- 投稿日：2022-01-14T19:43:08+09:00
WebページのGoogle翻訳がアプリっぽかった
これはGoogle翻訳のHTMLの最初の方。 <meta name="mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="application-name" content="Google 翻訳"> <meta name="apple-mobile-web-app-title" content="Google 翻訳"> <meta name="theme-color" content="#4285F4"> <meta name="msapplication-tap-highlight" content="no"> <link rel="manifest" crossorigin="use-credentials" href="_/TranslateWebserverUi/manifest.json"> <link rel="home" href="/?lfhs=2"> <link rel="msapplication-starturl" href="/?lfhs=2"> <link rel="icon" href="//ssl.gstatic.com/translate/favicon.ico" sizes="64x64"> <link rel="apple-touch-icon-precomposed" href="//ssl.gstatic.com/translate/favicon.ico" sizes="64x64"> <link rel="msapplication-square64x64logo" href="//ssl.gstatic.com/translate/favicon.ico" sizes="64x64"> スマホのホーム画面に追加をアプリっぽくする <meta name="mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes"> アプリ名 <meta name="application-name" content="Google 翻訳"> <meta name="apple-mobile-web-app-title" content="Google 翻訳"> マニフェスト <link rel="manifest" crossorigin="use-credentials" href="_/TranslateWebserverUi/manifest.json"> アイコン <link rel="icon" href="//ssl.gstatic.com/translate/favicon.ico" sizes="64x64"> <link rel="apple-touch-icon-precomposed" href="//ssl.gstatic.com/translate/favicon.ico" sizes="64x64"> <link rel="msapplication-square64x64logo" href="//ssl.gstatic.com/translate/favicon.ico" sizes="64x64">
- 投稿日：2022-01-14T16:59:14+09:00
【備忘録】Instagram Graph APIを使用してWEBページに正方形の画像を埋め込む
Instagram Graph APIを使用してInstagramの画像をwebページに埋め込む際に、少し手間取ったので備忘録として。 実現したいこと Instagram Graph APIを利用してInstagramから取得した画像をwebページに埋め込み、正方形のグリッド状に配置したい。 実装 Instagramのプロアカウント作成からwebページへの埋め込みまではこちらを参考に行った。 実装後に起きた問題 画像が表示されない。 画像をクリックしても投稿に飛ばない。 取得された画像サイズが正方形ではないのでレイアウトが崩れる。 原因 画像が表示されない。 phpファイル内のGraph APIのバージョンが最新ではなかった。 目的のInstagramアカウントの投稿数が、Graph APIで取得する数（javascriptファイルのphoto_lengthの値）より少なかった。 javascriptファイル内のphpファイル指定がうまく動作しなかった。 画像をクリックしても投稿に飛ばない。 投稿へのリンクの値であるpermalinkを取得していなかった。 取得された画像サイズが正方形ではないのでレイアウトが崩れる。 対策を後述。 修正点 画像が表示されない。 phpファイルの$instagram_api_url内のGraph APIのバージョンを最新のものに書き換える。 「取得する画像の数 ≦ 目的のアカウントの投稿の数」にする。 javascriptファイル内のphpファイル指定を相対パスから絶対パスに変更。 画像をクリックしても投稿に飛ばない。 phpファイルの$query内の、media｛値（省略）｝の値の部分にpermalinkを追加。 javascriptファイルのphotos +=内の、<li>と＜img>の間に「<a href="' + gallery_data[i].permalink + '" target="_blank">」を追加（閉じタグも忘れずに） 取得された画像サイズが正方形ではないのでレイアウトが崩れる。 こちらのサイトを参考に<li>タグを正方形にして、中に入れる画像をobject-fit: cover;で拡大表示。 まとめ 以上で、webサイト内にInstagramの画像をレスポンシブな正方形で配置することができた。
- 投稿日：2022-01-14T04:50:51+09:00
HTMLを使用した＜超簡略版＞お弁当発注画面制作
こんにちは^^ 今回はお弁当発注システムを作ってみましたv^^v 目次の書き方がわかったのでぜひ活用してください^^ もくじ 1 はじめに 2 きっかけ 3 リンクを埋め込んでみる 4 表を制作する 5 ボタンを追加する 6 まとめ 7 参考文献 はじめに お弁当発注システムとは、ブラウザにボタンや入力バーを埋め込み、皆がそれぞれ好きなお弁当を注文できるようにするシステムです。 説明が下手です。 きっかけ インターンシップでお弁当発注システムの画面レイアウトを考えたものの、プログラムを書く方面から考えずに描いたので、実際制作する側はどれだけ大変なのかを実感するために行いました。 当時描いた理想図を下記に示します。 はじめからこれが作れるとは思えないので、今回は必要最低限の情報を制作し、見た目もシンプルなものにして作ります。 リンクを埋め込んでみる 理想図は画像を2*2で並べて表示していますが、シンプルな見た目にするためブラウザ上では文字のみの表示にしました。 文字をクリックしたらお弁当の写真になるようにリンクを埋め込みました。今回は、いらすとやのお弁当の写真に跳ぶようになっています。 <!DOCTYPE html> <html> <head> <meta charaset="utf-8" /> <title> お弁当発注システム </title> </head> <body> <a href="https://www.irasutoya.com/2012/03/blog-post_3641.html">カレーライス</a> <a href="https://www.irasutoya.com/2013/12/blog-post_3564.html">和食弁当</a> <a href="https://www.irasutoya.com/2012/11/blog-post_6820.html">洋食弁当</a> <a href="https://www.irasutoya.com/2014/10/blog-post_3.html">幕の内弁当</a> </body> </html> これを実行すると以下のようになりました。 名前をクリックすると、リンク先にとぶようになりました。 しかしこれでは分かりづらいので、表を作ってみようと思います。 表を制作する 表を作るためのタグを使用して作りました。 <!DOCTYPE html> <html> <head> <meta charaset="utf-8" /> <title> お弁当発注システム </title> </head> <body> <table> <tr> <th>お弁当名</th> <th>ご飯サイズ</th> <th>個数</th> <th>値段</th> </tr> <tr> <td> <a href="https://www.irasutoya.com/2013/12/blog-post_3564.html">和食弁当</a> </td> <td>中</td> <td>1</td> <td>400円</td> </tr> <tr> <td> <a href="https://www.irasutoya.com/2012/11/blog-post_6820.html">洋食弁当</a> </td> <td>小</td> <td>0</td> <td>400円</td> </tr> <tr> <td> <a href="https://www.irasutoya.com/2014/10/blog-post_3.html">幕の内弁当</a> </td> <td>✕</td> <td>1</td> <td>500円</td> </tr> <tr> <td> <a href="https://www.irasutoya.com/2012/03/blog-post_3641.html">カレーライス</a> </td> <td>✕</td> <td>2</td> <td>450円</td> </tr> </table> </body> </html> 結果は以下のようになりました。 枠線が無かったり、見出しとの左右バランスが悪いので少し改良しました。 <table border="10" align="center"> <tr> <th>お弁当名</th> <th>ご飯サイズ</th> <th>個数</th> <th>値段</th> </tr> <tr align="center"> <td> <a href="https://www.irasutoya.com/2013/12/blog-post_3564.html">和食弁当</a> </td> <td>中</td> <td>1</td> <td>400円</td> </tr> <tr align="center"> <td> <a href="https://www.irasutoya.com/2012/11/blog-post_6820.html">洋食弁当</a> </td> <td>小</td> <td>0</td> <td>400円</td> </tr> <tr align="center"> <td> <a href="https://www.irasutoya.com/2014/10/blog-post_3.html">幕の内弁当</a> </td> <td>✕</td> <td>1</td> <td>500円</td> </tr> <tr align="center"> <td> <a href="https://www.irasutoya.com/2012/03/blog-post_3641.html">カレーライス</a> </td> <td>✕</td> <td>2</td> <td>450円</td> </tr> </table> これを実行すると枠が表示されるようになり、文字が中央揃いになりました。 最初に比べると表のようにはなりましたが、ご飯サイズや個数を勝手に設定しているので、実際使用する場合強制的にこの量を注文することになります。；； タグ解説 <table></table>：表を囲うタグ このタグ内に以下のタグを入れないと表として反応しない <th></th>：見出しのセルを作成する タグ数を増やすと列数が比例して増える <tr></tr>：行を作成する 何個でも増殖できる <td></td>：データをセルに書くためのタグ table border：表の枠を作成する 右辺の値が1以上だと生成され、値の大きさが線の幅になる align="center"：中央揃いにする 右辺の単語に合わせて左、右、真ん中に移動する ボタンを追加する <!DOCTYPE html> <html> <head> <meta charaset="utf-8" /> <title> お弁当発注システム </title> </head> <body> <input type="date" align="center"> <!--table border=枠線、1=枠幅--> <table border="10" align="center"> <!--tr=行作成、th=見出し、td=データ入力--> <tr> <th>お弁当名</th> <th>ご飯サイズ</th> <th>有無</th> <th>値段</th> </tr> <tr align="center"> <td> <a href="https://www.irasutoya.com/2013/12/blog-post_3564.html">和食弁当</a> </td> <td> <label><input type="radio" name="wasyoku" value="big" >大</label> <label><input type="radio" name="wasyoku" value="tall" >中</label> <label><input type="radio" name="wasyoku" value="short" >小</label> </td> <td> <input type="checkbox" id="check1" onchange="Change"> </td> <td> 400円 </td> </tr> <tr align="center"> <td> <a href="https://www.irasutoya.com/2012/11/blog-post_6820.html">洋食弁当</a> </td> <td> <label><input type="radio" name="yousyoku" value="big">大</label> <label><input type="radio" name="yousyoku" value="tall">中</label> <label><input type="radio" name="yousyoku" value="short">小</label> </td> <td> <input type="checkbox" /> </td> <td> 400円 </td> </tr> <tr align="center"> <td> <a href="https://www.irasutoya.com/2014/10/blog-post_3.html">幕の内弁当</a> </td> <td> ✕ </td> <td> <input type="checkbox" /> </td> <td> 500円 </td> </tr> <tr align="center"> <td> <a href="https://www.irasutoya.com/2012/03/blog-post_3641.html">カレーライス</a> </td> <td> ✕ </td> <td> <input type="checkbox" /> </td> <td> 450円 </td> </tr> </table> </body> </html> これの結果は以下のようになりました。 弁当の種類を自身で選べるようにしました。現時点では1種類1個ずつで合計4個のお弁当が購入できるようになっています。 また、ごはんのサイズも選べるようにしました。これは1種類のみ選べる仕様です。 左上にカレンダーを挿入し、当日以外のお弁当も予約できるようにしました。 まとめ HTMLのみで発注画面を作ろうとするとカウントアップボタンが作れなかったりボタン同士の動機ができませんでした。 HTMLに加えJavaScriptが必要だということが分かったものの、まだ知識がないため勉強しながらこれを改良して理想の発注画面に仕上げたいと思いました。 時間かけたのにJavaScript上手くいかなくて悲しい：： 参考文献 HTMLのtableでテーブルを作る方法と応用テクニックを解説 【HTML】align属性の使い方まとめ（center/right/left） ? チェックボックスを作成する
- 投稿日：2022-01-14T02:12:03+09:00
基礎編-超簡単なHTML・CSSのホームページ作成方法
今回は超簡単なホームページを作っていきます( ^ω^ ) 使う言語はHTMLとCSSのみです。どちらも基礎的な部分さえ理解できていれば簡単にホームページを作成することができるんです。 それでは早速やっていきましょう٩( 'ω' )و 目次 1.目的 2.レイアウトを考えよう 3.ヘッダーを作ろう 4.メイン部分を作ろう 5.サブメニューでページ内遷移を！ 6.気持ち程度にフッターを作っておこう 7.まとめてみよう 1.目的 まず目標はHTMLとCSSの基礎を押さえた人が、ホームページのレイアウトから中身まで１から作れるようにステップアップすることです。 HTMLやCSSが何なのか、どう書くのかわからないという人は少し難しい話になるかもしれませんが、ホームページの作成手順を知る程度だけでも見ていただけると嬉しいです。＾＾ 2.レイアウトを考えよう さて、ホームページを作る上で第一に考えなくてはならない最初の作業、それはレイアウトを決めることです。ホームページは言うなれば一つの作品です。どんな作品もどんなデザインにしようかをまず初めに考えるはず！それと同じようにどんなホームページにしようかというレイアウトの構想が非常に重要となります。 今回は例として上の図のようなレイアウトを考えます。 ヘッダー部分 ホームページの見出しやメインメニューを配置するいわばサイトの看板となる部分。 メイン部分 ホームページの内容を作成していきます。 サブメニュー部分 メイン部分を快適に見れるように目次のようなものを作成してページ内遷移ができるようにしたり、メイン部分を見る上で助けになるような機能を持たせます。 フッター部分 ヘルプや問い合わせフォームへのリンクやコピーライトを作成します。 今回はサブメニュー部分はページ内遷移のみ、フッター部分はコピーライトのみ作成します。 レイアウトの構想が終わったら、このレイアウトを満たす骨格を作っていこうと思います。 まずは以下のコードと結果を見てください。 See the Pen レイアウト by Charme (@charme0525) on CodePen. HTML ヘッダー内容・メイン内容・サブメニュー内容・フッター内容にそれぞれクラスを与えることでエリアごとに差分化しています。 CSS ページ全体をグリッドレイアウトとし、今回はエリアごとに名前を付けて配置していくグリッドエリアを使用しています。 グリッドレイアウトにするためには、グリッドレイアウトにしたい要素(今回ではクラス:Topの範囲内)にdisplay:grid;と記述する。 grid-template-areas: ”エリア名 エリア名” ”エリア名 エリア名” “エリア名 エリア名”; 今回では上記のようにして3x2のグリッドを作り、各エリアごとに名前を付けていきます。 次に、各divタグのクラスにgrid-are:エリア名;を記述すると、この指定したエリア名と対応するgrid-template-areasのエリア名の位置に配置されるようになります。 3.ヘッダー部分を作ろう ホームページのどこに何を配置するか決まったら今度は看板となるヘッダー部分を作成していきましょう。 See the Pen Untitled by Charme (@charme0525) on CodePen. HTML h1タグで見出しを作り、メニューはリストタグのulタグでリストを作っています。そして、メニューはクリックすれば指定のリンクに飛ぶように設定したいのでaタグでメニューの各要素であるliタグを囲います。 今回はホームページのトップ画面のみの作成のため、リンク先は指定しておりません。 CSS クラスheaderの中身をdisplay:flex;より、フレックスボックス化します。これは、headerの中身、つまりh1とulをフレックスボックスにして横並びにしているということです。これにより、下に示すように見出しとメニューが横並びになりましたが、これだけではまだHome・About・Topicsが縦の状態です。なお見出しとメニューはalign-items:center;とすることで上下の中央に配置しています。 See the Pen Untitled by Charme (@charme0525) on CodePen. 次にulもdisplay:flex;としてみます。 See the Pen Untitled by Charme (@charme0525) on CodePen. ちゃんとメニューも横並びになりましたね。 さて、リストタグの「・」が邪魔ですよね。あとaタグ特有の下線とクリックすると色が変化するのも消したいと思います。 See the Pen Header-sample by Charme (@charme0525) on CodePen. list-style:none;でリストの「・」を非表示にすることができます。text-decoration:none;でリンクの下線を消すことができ、クリックすると色が変化するのは、color:orange;で文字色を変えるだけで防ぐことができます。 4.メイン部分を作ろう See the Pen main by Charme (@charme0525) on CodePen. ここでは各セクションごとの見出しとその文章のみの構成となっているため特に解説はないですが、HTMLコードでセクションの見出しにid="数字"としているのは次のサブメニューのページ内遷移で使うからです。 本文には必要に応じて<img src="画像のパスorURL">を使用して画像や図を貼ることもできます。 5.サブメニューでページ内遷移を！ See the Pen サブメニュー by Charme (@charme0525) on CodePen. 実際に上のResultでサブメニューをクリックしてページ内遷移するかどうか確かめてみてください。 無事ページ内遷移がご確認いただけたと思います。 HTML 先ほどのセクションの見出しにつけたidをaタグのリンク先にhref="#id名"と#をつけて記述することで、そのidを持つ要素に飛ぶことができるのです。 CSS border:solid 5px color;でその要素を囲むように長方形の枠が5pxの太さで表示されるということです。colorは何も書かなければデフォルトでblackが入ります。 6.気持ち程度にフッターを作っておこう どこのウェブサイトにもフッターにコピーライトを設置しているのをよく見かけますよね。あれは著作権保護のためつけているのですが、webサイトはコピーライトがなくても作成された瞬間から著作権が生まれますのでなくても大丈夫なのです。ですが、コピーライトをつけてるだけでホームページ感が増すので気持ち程度につけておきましょう( ͡° ͜ʖ ͡°) See the Pen フッター by Charme (@charme0525) on CodePen. ©とすることで©となります。また、フッターの高さをheight:50px;にすることでpadding-top:25px;で上下の中央に配置することができ、text-align:center;で左右中央に配置できます。 7.まとめてみよう これで、ヘッダー部分・メイン部分・サブメニュー部分・フッター部分ができ上がったので全部繋げてみましょう。 See the Pen Sample homepage by Charme (@charme0525) on CodePen. という感じになりました。 とりあえず、ホームページの作り方-基礎編は以上となります。今回のはホームページとしてかなり雑なもの(サブメニューの余白等々)なので、次回はデザイン面やCSSのみを使ったアニメーションの作り方を載せていこうと思います。 最後までお付き合いいただきありがとうございました(( _ _ ))..zzzZZ
- 投稿日：2022-01-14T01:12:22+09:00
第5回 ホームページを作ってみよう-Part1-
はじめに HTML言語を全く触ったことがない超初心者が、学校で学んだことを忘れないようにすることを目的に作成しています。 HTMLとはどういったものなのか、結局何ができるのかを一緒に学んで行きましょう。 注意事項 この投稿はこれまでの総復習になります。そのため、過去に紹介した内容は説明せずに進めていきます。 ド素人ゆえ間違った記載(独自の解釈をしている)場合があるかもしれませんがご容赦ください。 説明に関してはできるだけ図を用いてわかりやすく、作成していこうと思います。 使用するのはGoogle Chrome、Visual Studio Code、GitHubの3点になります。 また、数がかなり多くなってしまうので、いくつかのパートに分けて説明していこうと思います。 基本的な操作はcssで行います。 これまでの投稿一覧 完成図 コードの全文に関してはGitHubの方から確認できます。 目次 1.ホームページ作成までに覚えておくこと 2.コードの説明 1.ホームページ作成までに覚えておくこと コメントアウトについて これはコードを書く上でかなり必要になってきます。 今書いているプログラムが何に反映させるものなのか、どこの部分を操作しているのかなどわかりやすくするために必要な操作と言えます。 書き方はコメントアウトしたい文字xを<!--xxx!-->とこのように囲うとコメントアウトされます。 <body> <h1>ホームページまでに知っておくこと</h1> <p> <!--コメントアウト!--> </p> </body> このようにコードを書いて実行した際にコメントアウトの文字が表示されていなければOKです。 しかし、これはあくまでhtmlでのコメントアウトの仕方になります。 cssでは仕様が少し異なります。 一度pタグの内容を表示させるために、コメントアウトを取り、文字の色をcssでも字の色を変えてみましょう。 style.cssにp{color: red;}と書きましょう。 このとき実行すればコメントアウトという文字が赤に変わるはずです。 このcolorをコメントアウトするには/＊→color: red;→＊/で挟みます。 p{ /*color: red;*/ } これでコメントアウトできるので文字の色は緑からデフォルトに戻ります。 ヘッダーとフッターについて ヘッダーを入れるときはhederタグを用います。特に意味はありませんが、ヘッダーを書くときはヘッダータグを使うのが一般的です。 2.コードの説明 先ずはhtmlの方で基本の形を作っておきます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>original character</title> <link rel="stylesheet" href="css/style.css"> </head> <body> </body> </html> レイアウトはflexboxを使って行います。 そのために、親要素と子要素が必要になリます。 今回は親要素をdiv class="head_container"とし、親要素の中に子要素を入れるため、 div class="head_item"を中に入れます。この子要素は2つ作ります。 <body> <header> <div class="head_container"> <div class="head_item"> <h1><font color="#ff69b4">オリジナルキャラクター紹介</font></h1> </div> <div class="head_item"> <ul> <li><a href="https://qiita.com/hamuo3kameru" target="_blank">Qiita</a></li> <li><a href="https://github.com/hamuo3kameta/Create-character">GitHub</a></li> <li><a href="https://www.instagram.com/arkhaiathea/">Instagram</a></li> </ul> </div> </div> <h2><font color="red">キャラクター作成日記</font></h2> </header> 子要素2つを左右に振っておきたいのでcssにjustify-contentを使います。 .head_container{ padding: 10px; display: flex; justify-content: space-between; 少し余白を空けるためにpaddingで10px分だけ開けています。 このままだとh1タグの文字が大きすぎるのでサイズを変えていきます。 上のコードの下に以下のコードを入れてください。 h1{ font-size: 18px; } header ul{ list-style-type: none; } header ul li{ display: inline-block; } font-size: 18px;と書いて大きさを18pxに、list-style-type: none;でリストマーカーを消しています。 リストを横並びにするために、幅と高さを調整できるインライン要素、display: inline-block;を使います。 ここまでできたらヘッダーに画像を入れていきましょう。 header{ width:100%; height: 320px; background: url(../img/satonaka004.PNG); background-size: cover; background-position: center; } このコードを.head_containerの上に追加します。 background: url(../img/satonaka004.PNG);←画像の指定 background-size: cover;←背景の画像が要素全体を覆うように表示されます。 background-position: center;←画像を中心に移動 次はキャラクター作成日記の文字を中心に移動させます。 header h2{ text-align: center; margin-top: 180px; font-size: 36px; } text-align: center;で文字を中心に寄せます。 margin-top: 180px;で上側に余白を取ります。 次に各キャラクターのナビタグを作っていきます。 ヘッダーの終了タグの下に以下のコードを書きます。 <nav> <ul> <li><a href="#shiseki"> シセキ キライ</a> </li> <li><a href="#fato"> ふぁとちゃん</a> </li> <li><a href="#mudage"> むだげ衆 </a></li> <li><a href="#booger"> ブーガァ</a> </li> <li><a href="#Caries"> Caries</a> </li> <a href="#kumo"> <li class="last_child">アプリス・クネ</a> <li> </ul> ですがこのままだと縦に並ぶ為に横並びにしていきます。 navタグの中のulなので nav ul{ list-style-type: none; text-align: center; } nav li{ display: inline-block; width: 150px; text-align: center; border-left: 1px dotted black; } .last_child{ border-right: 1px dotted black; } border-left: 1px dotted black;←で要素間を黒の点線で区切ります。 上のリストのアプリス・クネにのみ、class="last_child"がついているのはこの点線を右側に付ける為です。 いかがだったでしょうか、今回はここまでとさせていただきます。 残りの無いように関しては同じ作業の繰り返しになる為、案外一人でやってみるとさっくっと終わったりすると思います。 それでは皆さん、お疲れ様でした。