[Blogger] カテゴリ別記事一覧をつけてみた

ブロガーのラベルページでは、指定したラベルの付いた記事群が表示されるが一覧がないのであまり使い勝手がよくない。かといって手動で作るのもなんなので調べてみたらこんなのがあった。

• Blogger 今まで書いた全記事をサイトマップとして設置してみた
  → 元「なんでもエンジニ屋」の×日記
• Blogger ブログにサイトマップ - ラベル分類された投稿一覧を「ページ」に表示する方法
  → クリボウの Blogger Tips
  

他にもいくつか見つかったがだいたいソースはここのようだ。

方法は極めて簡単で、新規ページを作成して以下のコードを記載するだけでいい。

<script type="text/javascript" src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js"></script>
<script type="text/javascript" src="http://xawa99.blogspot.jp/feeds/posts/summary?redirect=false&amp;max-results=500&amp;alt=json-in-script&amp;callback=loadtoc"></script>

これだけでこんな感じの記事一覧が作成される。

素晴らしい。
できればカテゴリ一覧が先頭にほしいとか、記事の多い順にカテゴリが並んでほしいとか、記事に公開日時が出てほしいとか細かいところはあるが当面の目的には十分な感じになっている。

---

何が起きているのか見てみよう。
ここでは2つの JavaScript をロードしている。

• http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js
• http://xawa99.blogspot.jp/feeds/posts/summary?redirect=false&max-results=500&alt=json-in-script&callback=loadtoc

前者は daftarisiblogger で公開している JavaScript。 後者は 自サイトのサイトサマリを JSON 形式でロードしている。
/feeds/posts/summary?redirect=false&max-results=500&alt=json-in-script&callback=loadtoc
は、サイトサマリを loadtoc 関数 呼び出し形式でロードする JavaScript を生成する。
内容はこんな感じになる。

// API callback
loadtoc({
  "version":"1.0", "encoding":"UTF-8",
  "feed":{
    ...
    "category":[
      {"term":"円周率"},
      {"term":"Scala"},
      .... ],
    "title":{"type":"text","$t":"xawa雑記帳"},
    ...
    "entry":[
      {"id":{"$t":"tag:blogger.com,1999:blog-......."},
       "published":{"$t":"2012-07-30T03:49:00.000+09:00"},
       ...
       "category":[
         {"scheme":"http://www.blogger.com/atom/ns#","term":"ドリトル"},
         ...]
       "title":{"type":"text","$t":"[ドリトル] 平方数を求める"},
       "summary":{"type":"text","$t":" 前回、円周率を......},
       ...
      }
    ]
  }
});

loadtoc 関数は、今回追加したスクリプトの前半でロードする blogtoc-min.js 内で定義されている。
/feeds/posts/summary では callback パラメータで指定した関数を呼び出す形式の JavaScript を作成してくれる。たとえば、callback=hogehoge とすると、作成される JavaScript が

// API callback
hogehoge({ ....

のようになる。
なるほど、こういう仕組みになっていたのか。

ここまでくれば、自作 JavaScript にサイトサマリ情報が一式わたってくるので、あとは気合さえあればどうにでもできる。daftarisiblogger の loadtoc でも渡されたサイトサマリ情報を使ってカテゴリごとの記事一覧を作成して、HTMLとして出力している。

Blogger 自体にも連携用にいろいろ機能が用意されているということが分かった。奥が深い。