ブコメwatcher - はてなブックマーク コメント追っかけサービス

はてなブックマークの複数のエントリーのコメントを同時進行でウォッチできるサービス「ブコメwatcher」ソースです。

Backbone.jsとCoffeeScriptをメインに構成されており、サーバーサイドでの処理は一切ありません。したがって、当プロジェクトをcloneもしくはダウンロードしてindex.htmlを開くだけでも使用できるようになっています。

(index.phpと.htaccessはherokuで静的ファイルをデプロイするのに必要なダミーファイルです)

ブコメwatcherについて

3つのリストから構成されているサービスです。

左: はてなブックマークホットエントリー一覧

はてなブックマークのホットエントリー一覧が表示されます。各エントリーにマウスカーソルを合わせるとウォッチリストに追加というボタンが表示されます。

このボタンを押すと中央のリスト(ウォッチリスト)にエントリーが追加されて、一定間隔で新着コメントがあるかどうかチェックします。

また、エントリーのタイトルにマウスカーソルを合わせると、記事の概要がツールチップで表示されます。

中央: ウォッチリスト

一定間隔で新着コメントをチェックする対象のエントリー一覧です。各エントリーにマウスカーソルを合わせるとコメント一覧というボタンが表示されます。

このボタンを押すと右のリスト(コメントリスト)にそのエントリーについたコメントの一覧を見ることができます。

新着コメントがあった場合にはエントリーの右下に赤いマークで新着コメント数が表示されます。

右: コメントリスト

ウォッチリストで選択したエントリーのコメント一覧を表示します。新着コメントには色が付きます。

このように、Twitterのタイムラインのような感覚ではてなブックマークのコメントを見ることができます。

ウオッチリストの情報保存先

ウォッチリストに登録したエントリーはブラウザのローカルストレージに保存されます。したがって一旦ブラウザを閉じて開き直したり、リロードしたりしてもウォッチリストの情報は消えません。

ウォッチリスト上部のウォッチリスト消去ボタンを押すと登録されているウォッチリストとローカルストレージがクリアされます。

なお、ブラウザにデータを保存するため、デバイス間でのウォッチリストの共有はできません。

ソース構成

jsディレクトリ内にはjsファイルとcoffeeファイルが混在しています。それらを1つにまとめたのがapp.jsです。

app.jsは、プロジェクトのルートディレクトリにあるbuildjs.coffeeを実行すると作成できます。

自分用に各種coffeeファイルをカスタマイズした場合などはbuildjs.coffeeを実行してapp.jsを作り直してください。

jsファイルはサードパーティのライブラリで、coffeeファイルはブコメwatcherのソースです。

サードパーティのライブラリ

• activity-indicator.js

  ローディング中のインジケーターを表示させるのに使用しています。

• jquery.powertip.js

  エントリーのタイトルにマウスカーソルを合わせた時にエントリー概要をツールチップ表示させるのに使用しています。

• _nicedate.js

  Underscore.jsを拡張するライブラリです。各種日時を相対表示させるのに使用しています。

• jquery.popn-socialbutton.coffee

  フッターに表示させるソーシャルボタンを表示するのに使用しています。

ブコメwatcherのソース

• base-view.coffee

  主要3リストのベースとなるビュークラスです。Backbone.Viewを継承しています。

• entry-list.coffee

  はてなブックマークホットエントリー一覧リスト(左)に関するBackboneクラス群です。

• watch-list.coffee

  ウォッチリスト(中央)に関するBackboneクラス群です。

  entry-list.coffeeで定義したクラスを継承しています。

• comment-list.coffee

  コメントリスト(右)に関するBackboneクラス群です。

• main.coffee

  DOMロード後に実行する処理です。各種リストのインスタンス化もここで行われます。

その他CDNからロードしているライブラリ

• Pure

  CSSフレームワークです。

• FontAwesome

  アイコンフォントを表示するのに使用しています。

• Backbone.js

  当プロジェクトの心臓部となるクライアントサイドのフレームワークライブラリです。

  また、Backbone.jsを使用するにあたり必要となるUnderscore.js、json2.js、jQueryもロードしています。

• Underscore.string

  Underscore.jsを拡張するライブラリです。文字列操作などに使用しています(ほとんど使用していません)。

• Google Feed API

  クロスドメインであるはてなブックマークのRSSを取得するのに使用しています。

対応ブラウザ

• モダンブラウザ
• IE8以上

ただしIE8では表示にあたり致命的ではないいくつかの問題があります。できるだけ最新のブラウザを使用することを推奨します。

なお、現段階はスマートフォンに適した表示には対応していません。マウスホバー時に実行されるイベントも多い為、タッチ型のデバイスでは快適には利用できないと思います。ご了承ください。

Changelog

0.1.5 (2013-12-07)

• Chromeでエラーになっていたのを修正

0.1.4 (2013-06-20)

• ウォッチリスト消去がエラーになっていたのを修正

0.1.3 (2013-06-19)

• エントリー非表示フィルター機能追加
• コメント不可エントリーの取得でエラーになるのを修正

0.1.2 (2013-06-18)

• ホットエントリー取得失敗時にリトライできるようにした

0.1.1 (2013-06-17)

• jQuery POP'n SocialButtonを最新版に差し替え

0.1.0 (2013-06-14)

• 初版リリース

ライセンス

MIT licenseで配布します。

© 2013 ktty1220