Pages

▼

2005-09-17

関連情報をエントリーの外に表示させる (3) printCategory |Blogger|JavaScript|はてな|

昨日の printAmazon の説明に引き続いて、 printCategory の説明を書いた。

目的

投稿にカテゴリー・タグの情報を埋め込み、記事のフッター部分にカテゴリー・タグを表示させる。

ソースコード

var hatena = 'http://b.hatena.ne.jp/at-aka/';

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

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(', ');
    gid('category_'+num).innerHTML = txt;
  }
}

テンプレートの編集

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

  1. 上記ソースコードを outEntry.js という名前で保存し、適当な場所にアップする。
  2. outEntry.js を head 要素でロードする。
  3. 関数 outEntry を body 要素から onload する。
  4. ブログの投稿部分を class="post" id="<$BlogItemNumber$>" な div 要素で囲む。
  5. フッター部分に、 id="category_<$BlogItemNumber$>" な空の span 要素を追加する。 
<html>
 <head>
  ...
  <script type="text/javascript" src="http://path.to/your/outEntry.js"></script>
 <head>
 <body onload="outEntry();">

 <BlogDateHeader>
  <h2 class="date-header"><$BlogDateHeaderDate$></h2>
 </BlogDateHeader>

 <div class="post" id="<$BlogItemNumber$>">
   <BlogItemTitle>
    <h3 class="post-title"><$BlogItemTitle$></h3>
   </BlogItemTitle>
   
   <div class="post-body">
    <$BlogItemBody$>
   </div> <!-- post-body -->

   <div class="post-footer">posted by <$BlogItemAuthorNickname$> at ...
    <span id="category_<$BlogItemNumber$>"></span>
   </div>
 </div> <!-- post -->
 </body>
<html>

ファイルが表示された後 (onload 後)、関数 outEntry が実行される。 outEntry は、エントリーごとにカテゴリー情報をスキャンして、フッター部分に反映させる。

printAmazon だと Amazon の情報はサイドバーの一か所に反映させればよかった。だから、簡単に id を指定することができた。でも、カテゴリーはエントリーのフッターに付けるから、(個別ページならまだしも) インデックス・ページやアーカイブ・ページでは ID 名が重ならないように工夫しなくちゃいけない。そこで、 Blogger が提供する <$BlogItemNumber$> を使うことを思いついた。

<$BlogItemNumber$> はブログの記事ごとに固有の番号を返す Blogger の変数タグ。カテゴリー・タグの展開先に、 category_ とこの変数タグをくっつけた ID を用意する。これで一意な ID が手に入る。カテゴリー・タグの情報からは、この変数タグの数値は知りようがないので、JavaScript で数値を手に入れる。

変数タグの値を確実に手に入れるため、投稿記事を囲む div を用意させた。それが post というカテゴリーを持った div。投稿記事のどこにカテゴリー・タグ情報を埋め込んでも、 parentNode を繰り返せば、必ず div.category に辿り着く。あとは、変数タグの値からカテゴリー・タグの展開先に、「 はてなブックマークを利用したタグへのリンク」を追加するだけ。

今回は、ブログ記事の特定に <$BlogItemNumber$> を使ったけど、permalink でも大丈夫だと思う。

エントリーを書く

エントリー内に次の一行を埋め込むと、フッターに情報が反映される。

<div class="category" title="category1,category2,category3"></div>

クラス名は category、title 属性にカテゴリー・タグの情報を書く。複数のカテゴリーを指定する場合はカンマ区切りで繋ぐ。

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

<div class="category" title="category1,category2,category3"/>

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

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

.

あとがき...

printCategory は、フッターだけでなく、ヘッダーでも使える。ただし、エントリーの中で使うんだったら、こんなに面倒なことをせずに、もっとスッキリに書ける。タグ情報を展開したい場所に置いて、JavaScript で置換すればいい。サイドバーに表示するなら、ID 値は一つに決まるから問題が少ない (printAmazon と同じ)。

エントリーの中じゃない。でも、エントリーの遠くでもない。エントリーのすぐ外に情報を書き出したい時に、この関数は威力を発揮する。もちろん、それはカテゴリーでなくったっていい。そんなニーズは、あるかしらん。何か思いついたら、トラックバックを下さい ;)

時刻:

No comments:

Post a Comment