かゆい所に手が届くかも！？Blogger用非同期通信ライブラリ｢bsoup.js｣追記 : たき備忘録

Bloggerを利用し始めてから早くも半年が過ぎ、テンプレートを少しずつ改良（改悪？）してよやくブログっぽくなってきました。

私は、Blogger以外のブログサービスを利用したことがあまり無いので強くは言えませんが、少なくともはてなブログやWordpress.comよりは高いカスタマイズ性があると感じています。

しかし、テンプレートを弄ったりしていると微妙にかゆい部分が出てくるもので、現時点でも結構不満があったりします。

各記事のアイキャッチ画像のリンクを示す要素がない
各記事に表示される「次の記事」「前の記事」に対象のタイトルが挿入できない
関連記事機能がない

上記の3点が特に気になる部分です。3は外部のサービスを利用することでなんとかなりますが、1と2に関しては少し難しいように思います。

そこで私は以前にbLinkerというプラグインを作成しましたが、どうせなら不満のある部分を全部カバーできるものを書いてしまえ！と思ったので書いてみました。

このプラグインのコードは以下からダウンロードが可能です。

bsoup.js - Google Blogger support plugin — gist

https://gist.github.com/1766334

[2012/02/15] 動作サンプルは以下のページから確認が可能です。

bsoup.js 動作サンプル - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)

http://jsfiddle.net/zerippe/5TM2H/

コードのバグや改善点などあれば、コメントかgistでforkを下さい。

作成したプラグインでできること
ライセンス、依存関係、動作環境
bsoup.jsの読み込み方（HTML5用）
想定されるシチュレーション1：記事のアイキャッチ画像、タイトル、ラベルを取得
想定されるシチュレーション2：関連記事の取得
想定されるシチュレーション3：Twitterでの記事に対する「つぶやき」の取得
詳しい仕様

更新履歴

2012/05/28 - 各ドメインに分散しているトラックバックツイートをまとめて取得する機能の追加
2012/04/03 - 名前空間の配置の変更、一般的なプラグイン形式へ変更、「Twitter上の反応」機能の追加
2012/03/29 - コメントで指摘されていた日本語ラベルを含む場合にうまく動作しない不具合の修正
2012/03/25 - 関連記事に対象記事の画像を表示する機能の追加

作成したプラグインでできること

今回作ってみた「bsoup.js」でできることは以下の通りです。

指定した記事URLから以下の記事情報を取得する
- タイトル
- ラベル
- 記事内で一番最初に使用されている画像のURL
- 更新日、投稿日
指定されたラベルが付けられた記事を表示する（簡易関連記事機能）

内部的にはもっといろいろできるのですが、外部に公開しているインタフェースとしては以上の2点が主となります。

ライセンス、依存関係、確認済み動作環境

MIT License - http://www.opensource.org/licenses/mit-license.php
jQuery 1.6.4以降（このプラグインをロードする前にあらかじめ読み込んでおくこと）
Google Chrome 16.0, InternetExplorer 8

bsoup.jsの読み込み方（HTML5用）

まず最初に、ダウンロードしたbsoup.jsをロードするコードを追加します。~~挿入する場所は好みが別れますが、よくわからない場合は<head></head>の中に挿入すればOKです。~~

<script src='http://..../bsoup.min.js'></script>

このライブラリは、Bloggerによって自動的に書き出される以下のような"link"要素からBloggerIDを取得して利用しています。

<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.blogger.com/rsd.g?blogID=5129191888080362196" />

なのでこのプラグインをロードする場所はその"link"要素が追加される場所より後に挿入してください。具体的には、テンプレートの"<b:include data='blog' name='all-head-content'/>"より後に挿入すればOKです。

前項の「依存関係」で示したとおりこのプラグインは内部でjQueryを利用しているので前もってロードしておいてください。

想定されるシチュレーション1：記事のアイキャッチ画像、タイトル、ラベルを取得

たとえばブログのインデックスページで複数の記事が表示されている部分にアイキャッチ画像を挿入したい、という場合は以下のようなコードで実現可能です。

(function(){
  var q = bsoup.ajax.query({type:"entry", uri: "対象記事のURL"});
  var q = bsoup.ajax.entry("対象記事のURL");
  q.image("#post-image");
  q.title("#post-title");
  q.label("#post-label");
  q.execute();
})();

"対象記事のURL"の部分は取得したい記事URLに置き換えて下さい。恐らくこの部分は<data:post.url/>あたりのデータタグが利用できると思います。

q.image()は、引数で指定されたimg要素のsrc属性を、取得した画像URLに置き換えるメソッドです。この場合は"#post-image"というIDを持ったimg要素のsrc属性を書き換えます。このとき、取得された画像がPicasaやBlogger標準の画像サービスで提供されている場合に限り、第二引数で画像サイズを指定することができます。

q.image("#post-image", "s300-c");

"s300-c"というオプションの意味は、縦横の最大幅を300ピクセル、溢れた部分はカットする、という意味で、実際に取得される画像のサイズは300ｘ300となります。このオプションの詳細は以下のサイトを参照してください。

クリボウの Blogger Tips: Blogger で画像の表示サイズを変更する方法（改）

http://www.kuribo.info/2010/10/blogger_10.html

q.title()は、引数で指定された要素の内容を、取得したタイトルに書き換えるメソッドです。何らかの文字列が設定されていた場合は上書きされます。

q.label()は、引数で指定された要素の内容を、取得したラベルに置き換えるメソッドです。複数のラベルが設定されている場合は、", "で結合した文字列が結果になります。また、第二引数に文字列を指定することによって先ほどの", "の部分を変更することができます。

q.label("#post-label","/")

上記のように指定した時、記事に付けられたラベルがHogeとFugaだった場合は"Hoge/Fuga"となります（標準では"Hoge, Fuga"）。

想定されるシチュレーション2：関連記事の取得

たとえば記事を表示しているときに、その記事に付けられたラベルと同じラベルが付いている記事を取得したい場合は以下のようなコードで実現可能です。

(function(){
  var q = bsoup.ajax.query({type: "related", element: "#related"});
  var q = bsoup.ajax.related("#related");
  q.label("Hoge");
  q.label("Fuga");
  q.max(10);
  q.deny("除外したい記事URL");
  q.execute();
})();

このコードでは、IDが"related"の要素に、HogeとFugaというラベルが付けられた記事を、最大10件、"除外したい記事URL"を除いたものを取得して挿入するというコード例です。

この中でq.deny()というメソッドがありますが、このメソッドは関連記事時の中から指定されたURLの記事を表示しないという設定を行うものです。主に関連記事を表示する記事を関連記事表示に含ませないために利用します。

また、関連記事として表示する記事候補の中に、"Old"というラベルが付いている記事がある場合、その記事は自動的に候補から外れます。情報の鮮度が落ちた記事を表示したくない場合は、記事に"Old"というラベルを追加してください。

この機能で関連記事を取得する時に、指定ラベルが多すぎると結果が表示されるまで時間がかかる可能性があります。

想定されるシチュレーション3：Twitterでの記事に対する「つぶやき」の取得

たとえば記事に対するツイッター上での反応を表示したい場合は、以下のコードで実装することができます。

(function(){
  var q = bsoup.util.topsy("記事URL");
  q.count(".twitter-count").trackback("#twitter-trackback").execute();
})();

上記のコードでは、記事URLを含むツイートを、IDが"twitter-trackback"の要素に挿入するというコード例です。

q.countは、記事に対するつぶやきの総数を挿入します。この場合は、クラスが"twitter-count"の要素にツイート数が挿入されます。

詳しい使い方は上記の動作サンプルを見ていただければ理解できるかと思います。

詳しい仕様

1箇所だけプロトタイプ汚染する箇所があります。（Array.prototype.indexOfの実装）
queryの部分はメソッドチェイン可能です。
- q.image("...").title("...").execute();
ローカルストレージを利用します。

たき備忘録