ChatWork さん、便利ですね！

元々弊社では Skype を使っていたんですが、ファイルのやりとりとアカウント管理の側面から不便さを感じて ChatWork に浮気したクチです。

非常に便利なサービスではあるんですが、ちょっと困ったこともあったりしたので、エンジニアとしては「困っていることがあるなら、自分で解決しちゃえば良いじゃ無い。」ってコトで、色々調べて試してみたことを書き殴る。

背景

ChatWork さんは、Web ベースのサービスなので、クライアントアプリが存在しませぬ。

故に、以下のような困ったことが。

Command + Tab で切り替え出来ない
標準で、ブラウザのデスクトップ通知機能を用いた通知は表示出来るが、ブラウザにバッヂ付けるとかは無理
Dock アイコン跳ねさせるとかも無理

準備

Single Application 化

Fluid という、 任意のウェブページを Single Application 化する アプリを用いる。

Single Application 化するだけなら無料版で OK。
バッヂ付けるとか Dock アイコンを跳ねさせるとかをしたい場合は、$4.99 払いましょう。

無事にインストールが出来たら、普通に起動しましょう。

設定項目埋めて Create ボタン押下で、Single Application 化完了！
簡単ですねっ！

Use Website Favicon を選択すると、当該ページの favicon を使ってくれるんだけど、解像度が若干残念なケースが多いので、自前で作るコトをオヌヌメする。

なお、無料版だと Cookie は Safari と共有されるっぽい。
有料版を購入すると、Cookie を独自のストレージに保持してくれるので、ログイン ID/Password とかを記憶させる派の人は $4.99 払いましょう。

通知周り改良

ある意味本題。

Single Application 化したところまでは良いが、離席中に呼び掛けられた場合とかに通知が残らない (まぁ、アプリ版使っていればある程度回避できるけどね。) ので、「戻ってきたときに気付けない。」みたいなコトが発生しうる。

それを解消するために、以下のアプローチを試みる。

Command + Tab 時などに気付けるように未読件数をバッヂに出す
何らかのメッセージを受信した瞬間に気付けるように Dock アイコンを跳ねさせる

そのための方法は UserScript を用いる のが手っ取り早い。

先ずはコードをぺたり。

ChatWorkNotification.js

window.fluid.dockBadge = '';
setTimeout(updateDockBadge, 1000);
setInterval(updateDockBadge, 5000);

function updateDockBadge() {
  var badge = '';
  var unread = document.getElementById('_chatUnreadStatus');
  if (unread.style.display != 'none' && unread.innerHTML) {
    badge = unread.innerHTML + '';
    if (window.fluid.dockBadge != badge) {
      window.fluid.requestUserAttention(true);
    }
  }
  window.fluid.dockBadge = badge;
}

Gist はコチラ。

簡単な解説としては、DOM 解析して条件に該当する場合に Fluid に実装されている API をキックして実現している。
※Fluid の API リファレンスはコチラ。

もーちょっと詳しく書くと以下のような感じ。

Line: 7 で DOM 解析して未読チャット数を拾ってる。
- getElementById の引数を _chatToUnreadStatus にすると、TO の未読件数になる。
- getElementById の引数を _chatTaskStatus にすると、未完了タスク数になる。
- 「チャットリストに於ける全チャットの未読件数を取得して総和を求める」とかも出来るとは思う。
Line: 11 で Dock アイコン跳ねさせるメソッドをキック
- 何故かマニュアルに載ってない…。
- 第一引数を false にすると、永遠に跳ねさせる。
Line: 14 はバッヂの表示内容を変更
- 空文字を食わせると非表示になる。

なお、UserScript を設定する方法は以下の通り。

[ メニュー ] > [ Window ] > [ Userscripts ]
まぁ、ショートカットでも良いけどね。
[ + ] を押下し、ChatWork なドメイン用の Script を設定
Patterns のトコは *chatwork.com* で良いんじゃないかと。

備考

Fluid は一回設定しちゃうとアイコンとか変更出来ないっぽいので、変更したいときは、作成済みの Single Application を削除してから、再設定するのが正解かな？

あと、Fluid にお金支払うときは PayPal アカウント必須なので、アカウント凍結されてるオレとしては、非常に涙目だった。
隣の席のエンジニアに頼んで立て替えてもらいましたよ、ええ。

ChatWork を更に便利にする (ただし、Mac に限る)

背景

準備

Single Application 化

通知周り改良

備考