夏休みに仲間とハッカソン的なことをやりまして、その中でbellumというchrome拡張を作りました。 ウェブストアで配信を始めたので、宣伝がてらちょこっと記事を書いてみる。

そもそもbellumって？

同じページを見ている人が某動画投稿サイトの如くチャット出来るchrome用の拡張機能です。 見ているページに関連するチャットを画面内に流せたら楽しいよね、みたいな。

サーバーサイド

サーバー側のコードはすべてjskny氏が書いてくれました。 ホームページにbellumの紹介とサーバーサイドの小話があるのでそちらをどうぞ。

サーバーはnode.jsで実装されており、通信はsocket.ioです。難しいことは分かりません。 現在稼働中のサーバーはHerokuというサービスでホスティングされています。

クライアントサイド

元々はchromeとFirefoxの二つに対応する予定で開発していたのですが、Firefoxの拡張機能はあまりにも難解（DOMをいじれない？ そもそもXULってなに？ chromeならjsonファイル1つだよ？）でハッカソン期間中に完成せず。 そんな状況でもFirefox拡張のサンプルコードをいくつか書いてくれたyuia氏に敬意を。で、Firefox版はいつ完成するの？

私が担当したのはchrome版。 細かい話はいずれ覚えていたら書くとして、今回はクライアント側で使ったライブラリの紹介などをしてみます。

まず外せないのはjQuery。まあ、こいつは紹介するまでもない気がするね。 javascriptを拡張してくれる便利なやつ。正直なぜjavascriptの標準機能に入れないのかが分からないくらい。

jsSHAはURLをハッシュ化するのに使わせていただきました。 そのままURLをルームメイトしてチャットサーバーに送るとユーザーをトラッキング出来ちゃうからね。僕らはみなさんの動向を監視しませんよ、ということでハッシュ化。

個人的に気に入っているのがperfect-scrollbar。 jQueryのプラグインで、ちょっとおしゃれなスクロールバーを作ってくれます。 ログ機能のスクロールバーに使用。目立たなくていい。目立たなすぎな気もするけれど。 CSSで見た目をカスタマイズ出来るってサイトに書いてあるのだけれど、上手く行かなかったので研究の余地あり。上手くいったらここにも書こうと思います。

そんな感じ。あんまりライブラリ使ってないね。 jQueryが強すぎる。うん。