Bloggerに存在しない「カテゴリ機能」をラベルとページをつかって実装してみた

Bloggerってラベル機能はあるけどカテゴリ機能がないんだよね。

個人的にはカテゴリって使っているうちに破綻してくるからあんまり使わないんだけど、場合によっては需要があるんじゃないかと。

Bloggerのページガジェット（タブ機能）だけど、これってレイアウトの上部、左部なんかに表示させる事ができるけど、あくまでリンク先がURL固定のページなんだよね。好きなURLの指定もできるけど、『指定した条件を満たす記事を見る』なんてことはできないわけ。

で、できれば、映画、音楽、ゲーム、書籍なんていうタブを表示させ、それぞれのラベルを持つ記事のみを表示させたい、なんて出来たら嬉しいと思う。

というわけで、以下の課題をクリアしてみよう。

レイアウト上にタブを表示させる
タブをクリックしたらそのタブに関連する記事のみを表示させる
ラベルを旨く使ってカテゴリ別リンクを作る
ホーム、タブクリック時、記事ページ表示時すべてでカテゴリを認識させる

ちなみにまだオープンしてない（2013年9月現在）けど、こちらのブログで実際に使ってるので見てもらいたい。

インプレッション大航海

※ここの記事はまだダミーね。

現状、以下の課題が残ってるけど、いずれやっつけたいとは思う。

選択されたカテゴリのみでページャ（古い記事、新しい記事リンク）移動させる
選択されているカテゴリのラベルガジェットの表示を自動で切り替える

前者はBloggerの特殊タグを使えば行けそう。後者はそれほど難しくないと思うので、時間があるときにでも対応しようかなと。

予め以下の手順が必要なのはご了承いただければと。

記事には必ずカテゴリ用のラベルをつける（「映画」、「音楽」など）
ラベルは画面に表示されているものとする
タイトル別にラベルガジェットを作る場合は新規ラベル作成の都度編集する必要がある

後者はラベルリンクを使わない人には関係ないので、使う人だけね。

さて、早速行ってみよう。

手順としては

jQueryを読みこませる
記事内からラベルを抽出するスクリプトを書く
タブ（ページガジェット）にリンク先をつける

■jQueryを読みこませる

Blogger編集画面のテンプレート、HTMLの編集へ進み、コードの中に以下のHTMLを入れておく。これでjQueryが使えるようになる。

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js'></script>

場所は、headのとじタグ直前くらいでいいと思う。

■スクリプトを追加する

記事内のラベルを抽出し、予め決められたカテゴリ名を含んでいた場合、そのラベルをカテゴリとして認識させるスクリプト。

上記の様な仕様なので、記事には必ずカテゴリと同じ名前のラベルを付けておくのが必至になる。

ブログの投稿エリアの直後に、『HTML/JavaScript』ガジェットを追加し、以下の内容を貼り付けよう。
ここではカテゴリとして、映画、音楽、ゲーム、書籍の4つを指定してあるので、タブに表示したい内容似あわせて、適宜編集しておいて欲しい。2行目のみを自分の好きなカテゴリとして編集しておけばOKだ。

<script type="text/javascript">
var tabNames = ["映画", "音楽", "ゲーム", "書籍"];
var pathName = window.location.pathname;
if(pathName.indexOf('/search/label',0)!=-1) {
  var pname = decodeURI(pathName);
  var pnames = pname.split('/');
  var selectedTabText = pnames[pnames.length-1];
  if(jQuery.inArray(selectedTabText, tabNames) != -1) {
    clearAllTabsSelected(selectedTabText);
  } else {
    getTabNameFromLabels();
  }
} else if(pathName.match(/^\/[0-9]{4}\/[0-9]{2}/)) {
    getTabNameFromLabels();
}
function getTabNameFromLabels() {
  $('span.post-labels a').each(function(){
    var label = $(this).text();
    if(jQuery.inArray(label, tabNames) != -1) {
      clearAllTabsSelected(label);
    }
  });
}
function clearAllTabsSelected(tabText) {
  $('#crosscol li').removeClass('selected');
  if(tabText) $('#crosscol li a:contains('+tabText+')').parent('li').addClass('selected');
}
</script>

やってることはすごく簡単で、URLから現在どの状態なのかを判別。その状態によってカテゴリが選択されているのかされてないのかを更に判別するという流れ。

このスクリプトは本文にラベルがあるのが条件なので、本文より前に置いても正しく動かないと思うので注意だ。そして本文直後であればあるほど処理も早くなるので、この場所を推奨する。

■タブ（ページガジェット）をつける

レイアウトではなく『ページ』メニューでカテゴリ名と同じページを作っておく。

リンク先はURLにしておき、『/search/label/＜カテゴリ名＞』のような相対URLを指定しよう。

相対URLで登録すると警告されるけど無視して『OK』しよう。

別に絶対URLで登録してもいいけど、なんとなく相対URLでやってみた。

すべてのページを作ったら、『レイアウト』メニューから『ページ』ガジェットを追加する。

ここでは、スクリプトで指定したカテゴリ名と同じ名前でページを作らないといけない。タブのページ名、ラベル名、スクリプトの配列は全部同じにしておくことでカテゴリ機能を実現させてるので、一言一句変更しないで作ろう。

というわけで、これで実装は完了だ。

場合によっては以下のように、『ラベル』ガジェットをカテゴリ別にカスタマイズして表示させると面白いかもしれない。

例えば一度見た映画『パラノーマル・アクティビティ』に関して、もう一度レビューを書いてみたりとか、『俺の考えた恋愛小説』、『俺の考えた学園モノ』などのシリーズをつくって連載したりなどした場合、直接リンクしておくと何かと便利なのだ。

というわけで、以下のおまけもやっておくと良いかもしれない。