イントロダクション
現在(2019-08-31)自分は「はてなブログ」では、「計画やプログラムの理論部分など」どちらかというと高レベルな部分(人間に近い部分)を記載しています。リンク先は「テキストRPGの仕様作成」について記載しています。
しかし、基本はプログラムのことを記載しているので、やはり何かしらのプログラムを入れたいと思っているのですが、問題が。。。。
JSをどこに書く?
やりたいことは、はてなブログの、サイドバーに、IFRAMEで他のページを読み込んで表示しています。(PHPでの楽天APIの実行結果)実際左のリンクにパラメータを与えて表示内容を切り替えています。。。
しかし、現状はパラメータが固定なので(ハードコーディングなので)折角のAPIが意味なし状態になっています。
なので、今回はJSで動的に切り替えられるように改修を加えようと考えています。
問題1
初めのこの問題で全て解決しそうですが、JSをどこに書き起動させるか?
これを解決する必要があります。
先ほど、はてなブログにJSを記載してみたのですが、window.onload
のイベントハンドラで処理を行うと、サイドバーを読み込む前に処理が走ってしまうので初期値を設定したいDOM(HTMLタグ(今回はIFRAME)))を取得できません。
解決
はてなブログで、「onload」イベントを使用すると、コンテンツ(ブログのサイドバーなどの記事内容)が読み込まれる前に処理が走るので、DOM(HTMLタグ)の取得ができません。
なので、イベント処理を行うタイミングを変更します。起動するタイミングは「」です。コードに書くと下のようになります。
document.addEventListener("DOMContentLoaded", function(event) { loadIframe(); }); function loadIframe() { var data = ["pc", "guitar", "健康", "java", "占い", "github", "blender"]; var selected = Math.floor( Math.random()*(6-0)+0); var iframeDom = document.getElementById("rakutenAPI"); iframeDom.src= "https://zenryokuservice.com/project/rakuten/php/rakutenCatalog.php?category=" + data[selected]; iframeDom.style="height: 1200px; margin: auto;"; }
初めに、iframe.srcに渡すURLパラメータ用の配列を用意します。(var data)
次に、乱数で0-6までの整数を取得します。
Math.floor()は整数を取得するのに使用しています。Math.random()は小数点付きの値を返却するので、整数になるようにしています。
以下省略。。。
記載する部分は、詳細設定のheadタグ部分に記載しました。以下のような手順でやりました。
- サイドバーの編集で使用するタグにIDをつけて定義(HTMLで記述)
- headタグの部分にJSを記載し「DOMContentLoaded」のイベントハンドラを設定してやります。
実行結果はこちらのページを見てくれれば。。。
でわでわ。。。