このページは古い情報を掲載しています
このページの情報は更新されていません。新しい情報は「はてなスターSiteConfig作成方法 - Hatena Developer Center」に移転しました。
SiteConfig を作ると、世界中のサイトにスターを設置することが出来ます。ここでは SiteConfigGenerator という Firefox + Firebug を利用したサポートツールを使って、SiteConfig を作ってみましょう。
まずはどこにスターを設置するか決めましょう。今回は livedoor Pics のユーザ写真一覧を例に設置してみます。URL は http://pics.livedoor.com/u/ユーザ名/ となります。
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 とはページに一つ、もしくは複数あるはてなスターの一番上のコンテナ的なノードです。blog なら1エントリーごとの要素が該当します。
さて Firebug の Inspect でそれっぽいのを探します。すると div class="myphbody" というそれっぽいのが見つかりました。次はコンソールに戻って scg.entryNode(); 関数にその css セレクタを入れてみます。entryNode としてふさわしい要素の背景が水色が変わればOKです。
scg.entryNode('div.myphbody');
なお、毎回これらの関数は css セレクタにマッチした実行結果を Firebug のコンソールに表示してくれるので、クリックしてその要素をチェックなんかもできます。また、見た目の枠線や背景なども変化します。
次にさきほど決めた entryNode の内側から、タイトルとなる要素を選びましょう。ここで入力する css セレクタは、entryNode が最上位と考えて入力します。またタイトルは、css セレクタで指定した要素が img なら title/alt 属性が、他なら内側のテキストが選ばれます。ではまず img タグを指定してみましょう。
scg.title('img');
なにやらたくさん表示されました。別の要素を指定してみましょう。h3 がタイトルっぽいですね。
scg.title('h3');
コンソールに出力された結果を見るに、h3 のほうが良さそうですね。
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 として 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 のユーザページを見てみましょう。「☆+」アイコンが正常に表示されていれば完成です!
Firebug では copy() 関数を使うことでクリップボードに文字列をコピーできます。ので
copy(scg.generate());
とすることで、生成した文字列をクリップボードに入れる事ができ便利です。