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の画像をレスポンシブな正方形で配置することができた。

はじめに 　この度Font Awesomeのアイコンピッカーを作成しGithubで公開しました。 　その際の少しおもしろい使用方法を使ったので、こちらに残しておきたいと思います。　 　Font Awesomeのアイコンピッカーは「itsjavi/fontawesome-iconpicker」が有名どこのようですが、2018年に更新が止まり、使用を試みましたがうまく動作しないことが確認できました。 itsjavi/fontawesome-iconpicker 　こちらを改良して使用するてもあったのですが、今回の目的としては、npmが使いたいわけでもなく、SVGデータが欲しいわけでも、フレームワーク上やCMSに乗せるわけでもないので、大した機能が必要なわけではなく。 　そもそもFont Awesome4までしか対応してなく、javascript内にあるアイコンリストから表示を作っているようで、これを更新して使うのは一苦労になりそうな感じです。 　2022年になり、そろそろFont Awesome6もBeta版から正式バージョンになりそうです。 自分で作るしかないかなと思い立ちライブラリ風にまとめてみました。 　使用したい＆使い方を知りたい人は、直下のダウンロードから使ってください。 Qiita（本記事）では後で思い出せるように参考にした文献を貼りながらCSSからアイコンリストを作る技術解説をしたいと思います。 　Font Awesome6からWordPress用のアイコンピッカープラグインが公式で配布されていますので、WordPressで使いたい方は、公式プラグインのほうが出来がいいですのでお勧めです。 Font Awesome Wordpressプラグイン ダウンロード&マニュアル こちらからどうぞ 手段（本編） Font AwesomeにはCSS版と、JavaScript版があります。 どちらのファイルから一覧を作ってもよかったのですが、 CSSから作成する方が面白そうだったのでCSSから作ることにしました。 動作確認環境・依存関係 Chrome バージョン: 96.0.4664.110（Official Build） （64 ビット） bootstrap 5.1.3 Font Awesome Free 6.0.0-beta3 document.styleSheets JavaScriptからCSSファイルの中身を扱うには、document.styleSheetsを使用します。 document.styleSheets[n].cssRulesの中にCSSファイルの内容がCSSStyleRuleの形式で格納されています。 CSSStyleRule内の定義は、Element.styleでの書き方と同じです。 const targetCssName = "ファイル名.css"; let targetSheet = styleSheets.filter((styleSheet) => styleSheet.href !== null && styleSheet.href.endsWith(targetCssName))[0]; こんな感じで、CSSを1つに絞ります。 CORS問題の回避 CORSで指定した（CDNなど）CSSファイルのrulesはGoogleChromeでは参照できないようです。 Font AwesomeのCSSファイルをダウンロードしてきて使用すれば解決できます。 それだと使いにくいので、CSSをAjaxで持ってきてDOMにコピー function loadCSSCors(stylesheet_uri) { var _xhr = globalThis.XMLHttpRequest; var has_cred = false; try {has_cred = _xhr && ('withCredentials' in (new _xhr()));} catch(e) {} if (!has_cred) { console.error('CORS not supported'); return; } var xhr = new _xhr(); xhr.open('GET', stylesheet_uri); xhr.onload = function() { xhr.onload = xhr.onerror = null; if (xhr.status < 200 || xhr.status >= 300) { console.error('style failed to load: ' + stylesheet_uri); } else { var style_tag = document.createElement('style'); style_tag.appendChild(document.createTextNode(xhr.responseText)); document.head.appendChild(style_tag); const targetSheet = document.styleSheets[document.styleSheets.length-1]; targetSheet.disabled = true; draw(targetSheet); } }; xhr.onerror = function() { xhr.onload = xhr.onerror = null; console.error('XHR CORS CSS fail:' + styleURI); }; xhr.send(); } 一度読み込んだCSSをもう一度わざわざ読み込んでいるので、無駄ではありますが…… 新しくCSSが読み込まれると、一番最後に追加されるので const targetSheet = document.styleSheets[document.styleSheets.length-1]; と書けば、StyleSheetが特定できます。 WEBフォントの読み込みエラーが出るのと、CSSが2重適用されてしまうので、無効にしておきます。 targetSheet.disabled = true; cssRulesの中から、Font Awesomeのフォント情報だけを取り出す Font Awesomeのフォントを指定している部分は fontawesome.css .class::before { content: "文字コード" } になっているので、 const members = Array.from(targetSheet.rules).filter(v => v instanceof CSSStyleRule && v.style.content !== ""); contentがあるルールだけを取り出します。 CSSStyleRuleではないオブジェクトも含まれているので、エラーしないように取り除きます。 画面に書き出す function draw(targetSheet){ const members = Array.from(targetSheet.rules).filter(v => v instanceof CSSStyleRule && v.style.content !== ""); const drawEl = document.body; let zFlag = false; members.forEach(function(v,k) { if(members[k-1] !== void 0 && members[k-1].style.content == v.style.content) return; const iconName = v.selectorText.replace("::before", "").replace(".",""); const i = document.createElement("i"); i.classList.add(zFlag ? 'fa-brands' : 'fa-solid',iconName.split(', .')[0]); const btn = document.createElement('button'); btn.classList.add('btn','btn-outline-secondary', 'm-1'); btn.setAttribute('data-fapc-icon-name',iconName); btn.setAttribute('data-fapc-icon-type',zFlag ? 'fa-brands' : 'fa-solid'); btn.style.width = "3em"; btn.style.height = "3em"; drawEl .appendChild(btn).appendChild(i); if(iconName == "fa-z"){ zFlag = true; } }); } Font Awesome6は英文字1字の「A」fa-a～「Z」fa-zまでのアイコンが用意されていて、brandアイコンとの境目がちょうど、fa-zなので、fa-zが来たら次からbrandアイコン用のclassに切り替えています。 イベントを作ったりする ボタンにイベントを付けたり、受け取るinputを用意したりする。 この辺は、WEB上にたくさん知見があると思います。 宗教上の理由で記述方法が決まっている方もいると思います。 なので、今回は省略します。 完成 HTMLなどを書いて完成 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0-beta3/css/all.min.css"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> <script type="text/javascript"> function init(){ const targetCssName = "all.min.css"; let targetSheet = Array.from(document.styleSheets).filter((styleSheet) => styleSheet.href !== null && styleSheet.href.endsWith(targetCssName))[0]; if(targetSheet !== void 0 && targetSheet.href && !targetSheet.href.startsWith(window.location.origin)){ loadCSSCors(targetSheet.href); }else{ draw(targetSheet); } } function draw(targetSheet){ const members = Array.from(targetSheet.rules).filter(v => v instanceof CSSStyleRule && v.style.content !== ""); const drawEl = document.body; let zFlag = false; members.forEach(function(v,k) { if(members[k-1] !== void 0 && members[k-1].style.content == v.style.content) return; const iconName = v.selectorText.replace("::before", "").replace(".",""); const i = document.createElement("i"); i.classList.add(zFlag ? 'fa-brands' : 'fa-solid',iconName.split(', .')[0]); const btn = document.createElement('button'); btn.classList.add('btn','btn-outline-secondary', 'm-1'); btn.setAttribute('data-fapc-icon-name',iconName); btn.setAttribute('data-fapc-icon-type',zFlag ? 'fa-brands' : 'fa-solid'); btn.style.width = "3em"; btn.style.height = "3em"; drawEl .appendChild(btn).appendChild(i); if(iconName == "fa-z"){ zFlag = true; } }); } function loadCSSCors(stylesheet_uri) { var _xhr = globalThis.XMLHttpRequest; var has_cred = false; try {has_cred = _xhr && ('withCredentials' in (new _xhr()));} catch(e) {} if (!has_cred) { console.error('CORS not supported'); return; } var xhr = new _xhr(); xhr.open('GET', stylesheet_uri); xhr.onload = function() { xhr.onload = xhr.onerror = null; if (xhr.status < 200 || xhr.status >= 300) { console.error('style failed to load: ' + stylesheet_uri); } else { var style_tag = document.createElement('style'); style_tag.appendChild(document.createTextNode(xhr.responseText)); document.head.appendChild(style_tag); const targetSheet = document.styleSheets[document.styleSheets.length-1]; targetSheet.disabled = true; draw(targetSheet); } }; xhr.onerror = function() { xhr.onload = xhr.onerror = null; console.error('XHR CORS CSS fail:' + styleURI); }; xhr.send(); } document.addEventListener('DOMContentLoaded', init); </script> </head> <body> </body> </html> CSSからアイコンのリストを無事に作ることが出来ました。 たくさんありすぎる…… 公開しているライブラリでは アイコン検索（FontAwesomeでの英語名のみ） 除外機能 inputタグへの値渡し機能 ポップアップ（poper.js on bootstrap） などに対応しています。 ダウンロード&マニュアル（再掲） MITライセンスにて公開中です。 よかったら使ってみてください。 おわり（感想） CSSの要素を解析して、リストを作る方法を検証しました。 CORS問題などがなければかなり簡単にできることが分かりました。 あと、Array.filterって便利だなと最近多用しております。（いまさら） 今回の使おうと思っていた用途ではSolidのアイコンのみでいいのですが、 Font Awesome 6から、Regularのアイコンも一部無料で使えるようになっていますが、この方法だと対応できていません。 何かいい方法があればコメント欄などで教えていただければ嬉しいです。

今回は超簡単なホームページを作っていきます( ^ω^ ) 使う言語は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. &copy;とすることで©となります。また、フッターの高さをheight:50px;にすることでpadding-top:25px;で上下の中央に配置することができ、text-align:center;で左右中央に配置できます。 7.まとめてみよう これで、ヘッダー部分・メイン部分・サブメニュー部分・フッター部分ができ上がったので全部繋げてみましょう。 See the Pen Sample homepage by Charme (@charme0525) on CodePen. という感じになりました。 とりあえず、ホームページの作り方-基礎編は以上となります。今回のはホームページとしてかなり雑なもの(サブメニューの余白等々)なので、次回はデザイン面やCSSのみを使ったアニメーションの作り方を載せていこうと思います。 最後までお付き合いいただきありがとうございました(( _ _ ))..zzzZZ

はじめに 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"がついているのはこの点線を右側に付ける為です。 いかがだったでしょうか、今回はここまでとさせていただきます。 残りの無いように関しては同じ作業の繰り返しになる為、案外一人でやってみるとさっくっと終わったりすると思います。 それでは皆さん、お疲れ様でした。