はてなスターの仕組み

javascript

唐突に始まったはてなスターがどういう風に動いているのか調べてみた

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

早速、HatenaStar.js の本体を落としてきて眺めると

  • Ten
  • Hatena

という2つのクラスを定義している単体のファイルで完結したJavaScriptのファイル。前者はユーティリティ関数を集めたようなクラス群。後者がアプリケーション本体。外部サイトから参照されることも想定しているので、prototype.jsを使うわけにもいかなかったのだろう。同じような機能であってもTenで再実装しているようだ。

末尾にPod形式のドキュメントが付属しているのでpod2textとか任意のコンバータで変換してやると、一般サイトに適用するときの説明が手に入る。但し英語。AUTHORには近藤社長の名前があった。初版は今年の1月5日とあって、ちょくちょくバージョンアップをした上での公開であるとわかる。

基本的な設置方法ははてなダイアリーであるのと同じように、scriptタグで件のjsファイルを読み込むだけ。
一般的なblogシステムではh3がエントリのヘッダになっていると見做して、そこのリンクをパーマリンクとして貼りつくようだ。
それ以外の構造を持つblogでは

Hatena.Star.EntryLoader.headerTagAndClassName = ['h2',null];

ってな感じで、タグ名やclassを指定すると良いらしい。コードを見る限り、2つの条件はANDで効くようだ。
あるいは、Hatena.Star.EntryLoader.loadEntries プロパティにエントリ一覧を返すような関数を代入してやるというのもできる。
ちなみに、星のアイコンは

Hatena.Star.Star.ImgSrc = '/images/star.gif';

ってな感じで変更可能。
以下が定義されているユーティリティ群

  • Ten.Class クラスベースOOPっぽい挙動を実現するためのオジェクト
  • Ten.JSONP JSONPで通信するときのクラス
  • Ten.XHR XMLHttpRequestへのラッパ
  • Ten.Observer イベントの貼り付け関係
  • Ten.Event キー入力やマウスポインタの情報などを扱うクラス
  • Ten.DOM
  • Ten.Style エレメントに対してのStyleの適用
  • Ten.Geometry ウィンドウ、マウス位置などを扱うクラス
  • Ten.SubWindow divタグによるポップアップウィンドウっぽいもの
  • Ten.Draggable ドラッグで自由に動くようなエレメントを作るためのクラス

以下が本体、注釈を入れるのも馬鹿らしいぐらい分り易い作り

  • Hatena.User ユーザー名、Iconなどを保持するクラス
  • Hatena.Star.User
  • Hatena.Star.Entry
  • Hatena.Star.Button
  • Hatena.Star.AddButton
  • Hatena.Star.CommentButton
  • Hatena.Star.Star
  • Hatena.Star.InnerCount
  • Hatena.Star.Comment
  • Hatena.Star.NameScreen
  • Hatena.Star.AlertScreen
  • Hatena.Star.CommentScreen
  • Hatena.Star.EntryLoader
  • Hatena.Star.WindowObserver

ロードされると Hatena.Star.WindowObserver が呼ばれてwindowのonloadにHatena.Star.EntryLoaderを設定。エントリのヘッダそれぞれにはてなスターのアイコンを貼り付けて行くという流れ。
なんでこんなこと急にやりだしたって、削除インターフェイスが無いかなと探してたんだけど、やはりサーバ側に無さげ。/star.delete.json?あたりかなと思ったんだけど、少なくとも外部インターフェイスは公開していないのかも。