SiteConfig を作ってみましょう

SiteConfig を作ると、世界中のサイトにスターを設置することが出来ます。ここでは SiteConfigGenerator という Firefox + Firebug を利用したサポートツールを使って、SiteConfig を作ってみましょう。

なお、この作成方法は、はてなスターSiteConfig作成方法にもまとめてあります。

動画

実際に Firebug を使って作っていく様子を録画した動画です。説明を読みつつ、見てみると解りやすいでしょう。

http://s.hatena.ne.jp/swf/scg.htm

ターゲットとなるサイト(URL)を決める

まずはどこにスターを設置するか決めましょう。今回は livedoor Pics のユーザ写真一覧を例に設置してみます。URL は http://pics.livedoor.com/u/ユーザ名/ となります。

Firebug で JavaScript を実行

Hatena.Star.SiteConfigGenerator を利用するために Firebug のコンソールに以下の一行を入力します。(何度も使う場合は bookmarklet として登録しておくと便利です)

(function(){var s=document.createElement('script');s.charset='UTF-8';s.src='http://s.hatena.ne.jp/js/Hatena/Star/SiteConfigGenerator.js';document.body.appendChild(s)})();

すると

loaded: Hatena.Star.SiteConfigGenerator (scg)

と表示されましたね。この時点で scg という Hatena.Star.SiteConfigGenerator のインスタンスにアクセスすることが出来ます。

entryNode を決める

次に entryNode を決めましょう。entryNode とはページに一つ、もしくは複数あるはてなスターの一番上のコンテナ的なノードです。blog なら1エントリーごとの要素が該当します。
さて Firebug の Inspect でそれっぽいのを探します。すると div class="myphbody" というそれっぽいのが見つかりました。次はコンソールに戻って scg.entryNode(); 関数にその css セレクタを入れてみます。entryNode としてふさわしい要素の背景が水色が変わればOKです。

scg.entryNode('div.myphbody');

なお、毎回これらの関数は css セレクタにマッチした実行結果を Firebug のコンソールに表示してくれるので、クリックしてその要素をチェックなんかもできます。また、見た目の枠線や背景なども変化します。

title を決める

次にさきほど決めた entryNode の内側から、タイトルとなる要素を選びましょう。ここで入力する css セレクタは、entryNode が最上位と考えて入力します。またタイトルは、css セレクタで指定した要素が img なら title/alt 属性が、他なら内側のテキストが選ばれます。ではまず img タグを指定してみましょう。

scg.title('img');

なにやらたくさん表示されました。別の要素を指定してみましょう。h3 がタイトルっぽいですね。

scg.title('h3');

コンソールに出力された結果を見るに、h3 のほうが良さそうですね。

uri を決める

permalink となる uri を決めます。uri は a 要素を選択する必要があるので、おもむろに

scg.uri('a');

としてみましょう。一つの entryNode ごとに三つほどマッチしました。はてなスターではマッチした最初のノードが自動で選ばれるのでこれでもよいのですが、一応もっと正確にするため、a:nth-child(1) で1番目の要素を選びましょう。

scg.uri('a:nth-child(1)');

色が変化して、一番先頭の permalink が選ばれました。コンソールを見ると問題なさそうです。
また特殊な uri 名として、'window.location' と入力した場合、現在ブラウザで見ている uri が permalink となります。

container を決める

どの位置に「☆+」アイコンを差し込むかの場所、container を指定します。container として css セレクタで指定した要素の末尾に追加されます。h3 の最後でも良さそうですが、XX views の後ろに追加してみましょう。
Inspect で適当に要素をチェックして、scg.container() で指定します。div.myphcom がそれっぽいですね。

scg.container('div.myphcom');

この色が変わった場所の最後に「☆+」が追加されると思うので、これでいってみましょう。

☆を実際にロードしてみる

さて、これまで entryNode/title/uri/container と CSS セレクタを選んでみましたが、実際にスターは表示されるのでしょうか。というわけで実際に設定したCSS セレクタを元にスターを読み込んでみましょう。

scg.loadStar();

これでエラーが出ずに正常に、思った通りの場所に「☆+」アイコンが表示されたら成功です！色が変わってしまっていて見づらい場合は、それらをクリアーしましょう。

scg.allClearCSSs();

最後にコードを生成

さて、最後にコードを生成しましょう。scg.generate(); で生成されます。

scg.generate();

おお、それっぽいのがコンソールに出力されました。path が現在見ている path なので、これを正規表現に置き換えます。

path: '^/u/ユーザ名/$',

を

path: '^/u/\w+/$',

な感じでしょうか。最後に、これを http://s.hatena.ne.jp/siteconfig.edit の host(一番上の input 欄)に pics.livedoor.com を入れ、テキストエリアにスーパー pre 記法で入力し、送信します。

 ** users page
 >||
 path: '^/u/\w+/',
 entryNodes: { 
     'div.myphbody': { uri: 'a:nth-child(1)', title: 'h3', container: 'div.myphcom' } 
 }
 ||<

最後に実際のチェックとして、GreaseMonkey のユーザスクリプトコマンドで Hatena Star Everywhere のキャッシュをクリアして、livedoor PICS のユーザページを見てみましょう。「☆+」アイコンが正常に表示されていれば完成です！
どうぞご利用ください。