2005-09-15

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

ブログとはよくできたものだと思う。書きたいことだけ書いて投稿すると、綺麗な体裁のウェブページを作ってくれる。ヘッダーとかフッターとかサイドバーのような、定型部分をユーザーは気にかけないでいい。ブログの成功は、ユーザーが書く部分とコンピューターが自動生成できる部分の分離に寄るのではないかと思う。このブログがほぼ毎日続いているのも、定型部分を気にせず、エントリーだけに集中できているのが大きい。

でも逆を返せば、ブログではエントリー部分しか編集できない。つまり投稿する時に、フッターやサイドバーの内容は書き替えられない。

特に Blogger ではその制限が厳しい。

そこで、投稿記事に div 要素を埋め込んで、フッターやサイドバーに反映する JavaScript を書いてみた。

サンプル

記事には、次のコードを埋め込んだ。

<div class="category" title="Blogger,JavaScript,HTML"></div>
<div class="amazon" title="4873111692:JavaScript &amp; DHTMLクックブック -- Webエキスパート必携テクニック集"></div>
<div class="amazon" title="4774106224:スタイルシートWebデザイン -- CSS2完全解説"></div>
<div class="amazon" title="4873111811:Amazon Hacks 世界最大のショッピングサイト完全活用テクニック100選"></div>

最初の一行は、フッター部分に はてなブックマークを利用したカテゴリー・タグを表示させる設定。今回は Blogger と JavaScript と HTML のタグを付けた。

二行目〜四行目は、サイドバーに Amazon へのリンクを表示させる設定。この記事を書くのに参考にした本の情報を書いた。

JavaScript `outEntry'

今回使った JavaScript outEntry.js のソースは以下の通り。 

var hatena = 'http://b.hatena.ne.jp/at-aka/';
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'

function getNum (e)
{
  return (e.className=='post') ? e.getAttribute('id') : getNum(e.parentNode);
}

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 printCategory (e)
{
  if (e.className == 'category'){
    var num = getNum(e);
    var txt = '<br />Category: ';
    var tag = e.getAttribute('title').split(',');
    for (var j=0; j<tag.length; j++){
      tag[j] = '<a href="' + hatena + tag[j] + '/">' + tag[j] + '</a>';
    }
    txt += tag.join(', ');
    document.getElementById('category_'+num).innerHTML = txt;
  }
}

function printAmazon (e)
{
  if (e.className == 'amazon'){
    var title = e.getAttribute('title').split(':');
    var asin = title.shift();
    title = title.join(':');
    var url = amazon + asin + '/' + ama_id;
    var img = amaimg + asin + amajpg;
    var li = document.createElement("li");
    var ul = document.getElementById ('bb');
    li.innerHTML = '<a href="'+ url +'"><img alt="" src="'+ img +'"/>'+ title +'</a>';
    ul.appendChild (li);
  }
}

テンプレートの修正

head 部分
<head>
 <title>clmemo@aka</title>
 <script type="text/javascript" src="http://pop-club.hp.infoseek.co.jp/prog/outEntry.js"></script>
</head>
<body onload="outEntry();">

関数 outEntry がロード時に実行され、記事の中の category / amazon 情報を展開する。

カテゴリー・タグ用の設定

post クラスを持つ div 要素に次のような ID を付ける。

<div class="post" id="<$BlogItemNumber$>">

そういうコードがなければ、ブログの投稿部分を上記の div 要素で囲む。

そして、category を表示させる部分に次のコードを入れる。

<span id="category_<$BlogItemNumber$>"></span>

category クラスを持つ div 要素が、カテゴリー・タグに展開されるというわけ。

Amazon 用の設定

Amazon 用には次のコードを入れる。 

  <ul id="bb" class="body_shown">
  </ul>

id="bb" を持つ ul 要素の中に、 Amazon へのリンクが追加されていく。

解説

getElementsByTagName で div タグを集め、 className == 'category' ならカテゴリーの情報を className == 'amazon' なら Amazon の情報を getAttribute('title') で手に入れる。

printAmazon が Amazon 用のコード。title 属性に ASIN と書名をコロン区切りで情報を入れておいて、そこからリンクと li 要素を作る。 Amazon のアフィリエイト・リンクの作り方は、 Amazon Hacks を参照。その li 要素を bb という ID を持つ ul 要素に入れていく。

printCategory はカテゴリー・タグ用のコード。カテゴリー・タグはエントリーごとにあるので、カテゴリーとエントリーの対応を考えなくちゃいけない。エントリーを区別するのに $BlogItemNumber$ を使った。もちろん、permalink でもよいと思う。 $BlogItemNumber$ を手がかりに、カテゴリーを展開する場所を探す。

PHP とか使わないでも、JavaScript だけでこれだけできるので面白いんじゃないかと思う。

.
.
.
.
時刻:
ラベル: ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)