ちいさな創造 wp

みつりんなどAmazonAPIで取得した情報を貼り付けるjavascriptのタグを作るときに いろいろ試したんですが、やっぱりdocument.writeは使わない方がいいですね。 そこでページの描画が止まってしまいイライラします。 試行錯誤の結果、貼り付けタグにscriptタグだけでなく、id付きのdivも一緒に発行し、 document.getElementById(“id名”)でその中に流し込むのが良さそうです。 divの中身には、テキストリンクなどを書いておけば、javascriptが動かない環境や、javascriptが読み込めなくなっても、 最低限の情報は確保できるし、空divじゃなくなるのでエラーも出ませんしね。 そして、実行するタイミングは、下記のページを参考にwindow.onloadに追加する形で。 ページの描画が邪魔されないので高速です。 イベントに処理を追加する ↑これは、いろいろな所で応用が利きますので覚えとくと便利です。 サンプルに週刊少年マガジンRSScheckerで使っているものを以下に。 javascriptファイル（PHPでAmazonの情報を元に生成） divと一緒にでもいいですが、出来ればページの下のほうで読み込めばさらに早く。

function magarank() {
	document.getElementById("rankbox").innerHTML='PHPで生成'したAmazonのコード;
}

if (window.addEventListener) {
  window.addEventListener("load", magarank, false);
} else if (window.attachEvent) {
  window.attachEvent("onload", magarank);
} else  {
  window.onload = magarank;
}

HTMLタグ 表示させたい箇所に貼り付けます。 上記jsが実行され次第、中身は消えて生成されたコードに置き換えられます。

<div id="rankbox">マガジンコミックス</div>

ブログに何個も貼るようなときは、divのidが被らないよう、ASINだけでなく、時間など数桁を付けるといいかも。 divのid命をjavascriptの指定idが同じになるように注意する必要もあります。 さらに、Amazonに毎回問い合わせてコードを生成するとせっかくjsを高速化しても、重いので、 1時間程度キャッシュすると最高です。すぐ忘れるので、メモ用に今度書くかも。