ChatWork の複数ユーザーを指定した画像で置き換える Chrome Extension を作った/アイコンについて

前回、「ChatWork のユーザーアイコンを指定した画像で置き換える UserScript を作った」というエントリを書きました。

同僚の @asonas がこの記事に反応してくれてを書いてくれました。

というわけで、Chatworker API を使った Chrome Extension を作りました。

簡単に説明すると、ChatWork 内のアイコンを、Chatworker に登録しているユーザーに一致した場合に置き換えるものです。先日作った UserScript では、一人のアイコンしか置き換えることができませんでしたが、この Extension は、複数人のアイコンを置き換えることができます。

chocoby/chatwork-replace-icons-extension https://github.com/chocoby/chatwork-replace-icons-extension

先ほどの Chatworker と一緒に使うような感じです。良かったら使ってみてください！

以下、技術的なことや心配なことなどついて...

技術的なこと

CoffeeScript を使った

前回、UserScript を作ったときは素の JavaScript で書いていたのですが、今回は CoffeeScript を使用して書きました。 Rails アプリを書く時にいつも使っていることもあり、特にハマる部分はありませんでしたが、括弧を書く数が少なくなるのは、やはり便利ですね。

CoffeeScript から JavaScript への変換は、後述する grunt を使用しています。

grunt を使ってみた

grunt ってよく聞くけど何やねん？と思っていたのですが、タスクランナーなのですね。便利です。

今回は .coffee ファイルを監視して CoffeeScript から JavaScript に変換する用途に使用しました。 guard などのツールを用意する必要がなく node のモジュールで完結するのが良いところだと思います。

Source Maps を使ってみたかったのですが、やり方が悪いのか extension では動かせませんでした。長いコードになってくると、とても便利そうな機能だと思います。

その他に、Chrome Extension 用のパッケージ化を行ってくれる grunt-crx というプラグインもあるのですが、今回は手動でパッケージを作成しました。

jQuery 2.0.0 を使った

リリースされたばかりの jQuery 2.0.0 ですが、大したこともしていないので、問題はありませんでした。サイズ的には 90KB から 81KB に減っているので、何らかのメリットはあるかもしれません。

心配なこと

人数が多くなるとパフォーマンス的に心配

先日の記事にも書いたのですが、ChatWork は DOM の書き換えがとても多いので、数十人単位のアイコンを置き換えることになると、もしかしたらパフォーマンスに影響があるかもしれません。

まあ、ChatWork 自体が元々重たいので、それを普通に使えている環境であれば、多分問題は無いのではないかと思います。

アイコンのキャッシュについて

API から取得したアイコンは当初、localStorage にキャッシュしておき、Content Scripts からは Event Pages 経由で呼びだそうかなと思っていたのですが、実際にやってみると、応答が返ってくるのに時間がかかりすぎて使えませんでした。

なので、Content Script のグローバル変数(と言えば良いのでしょうか)にキャッシュするようにしています。正直、お行儀が悪い気がします... もっと良い方法があれば教えて下さい。

以下、思うことがあったのでだらだらと続きます。特に読む必要はありません。

アイコンについて

@asonas も先のエントリで書いているのですが、同じような背景で同じようなポーズを取った顔が 36px という小さい画像で多数並んでいる状況で、呼びかけたい人のアイコンを選択するのはかなり難しいと思います。 (この UI がイケてないんじゃないか？という点はさておき)

この問題を丸く解決するのであれば、髪型をアフロにするのが良いと思います。しかし、それだと一人だけしか意味がない。アフロが何十人並んでいても鬱陶しくなるだけです。実際に犬や猫になるのも良いですが、ほぼ不可能です。

識別のしやすさという点において、Twitter や GitHub などの、ソーシャルネットワークのアイコンというものは、良い物だと思います。

人の顔や犬や猫、プリキュアもいれば文字もある、多種多様なアイコンではありますが、無意識に頭の中でアイコンと名前の紐付けが行われているのだと思います。

とは言え、きっちりしたアイコンを使用するのは、それなりに理由のあるものなので、無理は言えません。というわけで UserScript や Extension を作った、という経緯があります。

ChatWork について

ところで、社内のコミュニケーションツールが IRC から ChatWork に置き換わって、数ヶ月くらい経ちました。 ChatWork について、良いところ、悪いところをリストアップしてみたいと思います。

良いところ

インターネットとブラウザがあれば、どこからでもアクセスできる
文章が複数行に渡って書ける
過去ログが見える/検索機能がある

悪いところ

(ピン留めしていても)各ルームの順番が勝手に入れ替わる
反応する必要の無い部屋でも未読数が表示される
タイトルバーの未読件数を非表示にできない
API がないので GitHub や Jenkins などとの連携ができない

正直、良いところより悪いところの方が大きく上回っており、ストレスが溜まる感じです。日常的に使うものでこの状況はあまり良くない。これらの問題を解決できるような UserScript なり extension を作ろうかと思っていたのですが、もしかしたら慣れるかもしれませんし、自分のやりたいことに時間を使いたいので、我慢ができなくなったら作ります。

こう感じるのは、僕が LimeChat に慣れてしまっているせいかもしれません。 ChatWork は、良いサービスだと思います。特に、外出することが多い人には便利なツールなのかもしれませんね。

まとめ

ChatWork の Read/Write API があれば、だいぶ幸せになれるかと思います。
日々の問題を技術で解決できると楽しいですね！
きっかけをくれた @asonas に感謝です。

hitode909 さんが良い記事を書かれていたので貼っておきます: http://hitode909.hatenablog.com/entry/2013/04/10/201903