去年の末ごろに、はてなスターを設置して AutoPagerize に対応してみました。

と言う報告だけで終わるのも何なので、はてなスターを設置し、AutoPagerizeに対応するまでの流れをざっくり紹介したいと思います。

※今回はAutoPagerizeと同時に AutoPatchWork にも対応します。

はてなスターを設置

はてなスターをブログに設置するにはを参考に、以下のコードをブログに貼り付ける。

• http://s.hatena.ne.jp/はてなID/blogs でブログを登録し表示されるコード
• はてなスター追加箇所を指定するためのコード

ウチのブログの場合以下のようなコード。

<script src="http://s.hatena.ne.jp/js/HatenaStar.js"></script>

Hatena.Star.Token = 'トークン';
Hatena.Star.SiteConfig = {
  entryNodes: {
    'article > header': {
      uri: 'h1 a',
      title: 'h1',
      container: 'h1'
    }
  }
};

AutoPagerize(+AutoPatchWork)への対応

継ぎ足しされるノードをHatena.Star.EntryLoader.loadNewEntries()に渡すイベントリスナーをwindow.addEventListener()で登録する。

注意点として、Hatena.Star.SiteConfig.entryNodesで指定したセレクタに、継ぎ足しされるノードが含まれる場合、継ぎ足しされるノードからのセレクタに修正する必要がある。

ウチのブログの場合、継ぎ足しされるノードがarticle要素なので、以下のようにセレクタからarticle要素を取り除いて対応した。

var StarConfig = Hatena.Star.SiteConfig.entryNodes;
var InsertNode = function(event) {
  Hatena.Star.SiteConfig.entryNodes = {
    '> header': StarConfig['article > header']
  };
  Hatena.Star.EntryLoader.loadNewEntries(event.target);
};
addEventListener('AutoPagerize_DOMNodeInserted', InsertNode, false);
addEventListener('AutoPatchWork.DOMNodeInserted', InsertNode, false);

これで継ぎ足しされた部分にも、はてなスターが追加されます。

あと、リスナーの登録にAutoPagerize_DOMNodeInsertedを使っているので、AutoPagerize 0.40以降でないと動作しません。

参考: AutoPagerizeで継ぎ足された部分に自分のスクリプトを適用する方法あれこれ - 0xFF

最後に

はてなスターの連打はキケンです！