2005-09-16

関連情報をエントリーの外に表示させる (2) printAmazon |Blogger|JavaScript|

昨日の エントリーを読み返して、 printAmazon と printCategory の説明を一気にやったのはまずかったなぁ、と反省。改めて printAmazon の説明だけを書いてみる。

目的

エントリー内に Amazon の情報を埋め込み、サイドバーに反映させる。

ソースコード

var amazon = 'http://www.amazon.co.jp/exec/obidos/ASIN/';
var ama_id = 'clmemoaka-22';
var amaimg = 'http://images.amazon.com/images/P/';
var amajpg = '.09._SCTHUMBZZZ_.jpg';
var a_list = new Array();

function outEntry ()
{
  var divs = document.getElementsByTagName('div');
  var length = divs.length;
  for (var i=0; i<length; i++){
    printCategory (divs[i]);
    printAmazon (divs[i]);
  }
}

function gid (id){
  return document.getElementById(id);
}

function printAmazon (e)
{
  if (e.className == 'amazon'){
    var title = e.getAttribute('title').split(':');
    var asin = title.shift();
    title = title.join(':');

    // Check duplicate ASIN
    if (a_list[asin]) return;
    a_list[asin] = asin;

    var url = amazon + asin + '/' + ama_id;
    var img = amaimg + asin + amajpg;
    var li = document.createElement("li");
    var ul = gid ('bb');
    li.innerHTML = '<a href="'+ url +'"><img alt="" src="'+ img +'"/>'+ title +'</a>';
    ul.appendChild (li);
  }
}

テンプレートの編集

Blogger のテンプレートを編集する。

  1. 上記ソースコードを outEntry.js という名前で保存し、適当な場所にアップする。
  2. outEntry.js を head 要素でロードする。
  3. 関数 outEntry を body 要素から onload する。
  4. サイドバー部分に、 id="bb" な空の ul 要素を追加する。 
<html>
 <head>
  ...
  <script type="text/javascript" src="http://path.to/your/outEntry.js"></script>
 <head>
 <body onload="outEntry();">

 <div id="sidebar">
   ...
   <ul id="bb"></ul>
 </div>
 </body>
<html>

ファイルが表示された後 (onload 後)、関数 outEntry が実行される。 outEntry は、各々のエントリーから Amazon 情報をスキャンして、bb という ID を持つ ul 要素に情報を追加していく。ここで、 bb は便義上の使用したに過ぎない。変える場合は、 printAmazon 関数内の gid(bb) という部分を変更されたし。

PS. 重複した asin は無視する仕様です。

エントリーを書く

エントリー内に次のコードを埋め込むと、サイドバー内に情報が反映される。

<div class="amazon" title="ASIN:memo"></div>

クラス名は amazon、title 属性に amazon の情報を書く。書式は、ASIN 番号とメモをコロンで繋ぐ。memo 部分には、書名とか CD のタイトルとか入れるとよいかな? memo 部分にコロンが入っても問題ない。

一つの div 要素に、一つの Amazon 情報しか書けない。複数個の商品へリンクを張る場合は、一つ一つ div 要素を書く。

<div class="amazon" title="ASIN1:memo1"></div>
<div class="amazon" title="ASIN2:memo2"></div>

注意。 Blogger に ATOM API 経由でポストすると問題がある。上のコードの場合だと次の様に書き換えられちゃう。 

<div class="amazon" title="ASIN:memo"/>

firefox は div の閉じタグがないと思うので、メチャメチャになる。

とりあえず、div 要素の中にピリオドを打って逃げてる。

CSS

見栄えを良くするために使ってる CSS のサンプルです。

#sidebar li img { float: right; }
.amazon { display: none; }

一行目の設定は、 Amazon から取ってきた画像ファイルの周りに文字を回り込ませるためのもの。

二行目は、div 要素内にあるピリオドを表示させないためもの。ま、こっちはほとんどの人には意味ないでしょう。

あとがき...

何度紹介してもしたりない本がある。例えば、outEntry.js を書くのに参考にした「JavaScript & DHTML クックブック」。CSS の本もそうだし、Amazon の本もそう。一回こっきりの商品リンクなら、 G-Tools で十分だけど、二度三度紹介する本ならデータベースを作って簡単にリンクを張れたら、と思ってた。

title 属性に書く Amazon の情報は一行だから、テキスト・ファイルに保存して grep なんかで検索がかけられる。 

4774106224:スタイルシート Web デザイン -- CSS2 完全解説, すみけんたろう (著)
4873111811:Amazon Hacks 世界最大のショッピングサイト完全活用テクニック 100 選, Paul Bausch (著)
4873111692:JavaScript & DHTML クックブック -- Web エキスパート必携テクニック集, Danny Goodman (著)

メモ情報は自分で好きに書けるし、生成される HTML も printAmazon をいじれば自由に変えられる。それに、 Amazon のデータベースを全部検索するわけじゃないから、ノイズが少なくてすむ。手間は、ASIN を調べることとメモを書くだけ。それは、 G-Tools なんかを活用すれば、すぐに調べられるよね。

テンプレートを編集できるブログなら、printAmazon はどこでも使えるんじゃないかしらん。

.
.
時刻:
ラベル: , ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)