イントロダクション

現在(2019-08-31)自分は「はてなブログ」では、「計画やプログラムの理論部分など」どちらかというと高レベルな部分(人間に近い部分)を記載しています。リンク先は「テキストRPGの仕様作成」について記載しています。

しかし、基本はプログラムのことを記載しているので、やはり何かしらのプログラムを入れたいと思っているのですが、問題が。。。。

JSをどこに書く？

やりたいことは、はてなブログの、サイドバーに、IFRAMEで他のページを読み込んで表示しています。(PHPでの楽天APIの実行結果)実際左のリンクにパラメータを与えて表示内容を切り替えています。。。

しかし、現状はパラメータが固定なので(ハードコーディングなので)折角のAPIが意味なし状態になっています。

なので、今回はJSで動的に切り替えられるように改修を加えようと考えています。

問題１

初めのこの問題で全て解決しそうですが、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タグ部分に記載しました。以下のような手順でやりました。

1. サイドバーの編集で使用するタグにIDをつけて定義(HTMLで記述)
2. headタグの部分にJSを記載し「DOMContentLoaded」のイベントハンドラを設定してやります。

実行結果はこちらのページを見てくれれば。。。

でわでわ。。。