タイトルの通り、背景が透明なSlackクライアントを開発合宿で作った。
モチベ
- 画面共有してるときにチャット見える状態にしたい(ウィンドウのサイズは小さくしたくない)
- 作業集中するとき公式クライアント終了させたいけど、案件のチャンネルとか見ておかないといけないチャンネルだけ見れるようにしておきたい
ということで考えたのが透明なSlackクライアント
Slack Real Time Messaging API
SlackのAPIにはいくつか種類がある。以前ステータスを変更するアプリを作ったときに使ったのはいわゆる普通のWeb API nakajmg.hatenablog.com
これとは別に、Slack上で起こっているイベントをリアルタイムに受け取れるAPIがReal Time Messaging API。超雑に説明すると、このAPIを使えばSlackクライアントが作れる。
WebSocketでリアルタイムにSlackで起こってる全イベントを受け取れるので、イベントをさばいて必要な情報をストアしたり表示したりすることでクライアントを構築する。
Electronで透明アプリ
Electronを使うと、背景色の透明なアプリができる。
new BrowserWindow({ frame: false, transparent: true, })
body { background-color: rgba(0,0,0,0); }
作った
GitHub - nakajmg/SlaCast: slack comment viewer
実装した機能は次のとおり
- チャンネルの選択
- 選択したチャンネルのチャット表示
- スレッドの展開
- カスタム絵文字対応絵文字ピッカー
- リアクションの表示
- メッセージの送信
チャットの表示はアプリを起動したタイミング以降のものだけが表示できる。
Web APIと組み合わせれば過去ログも辿れるようにできるが、今回の目的と異なるので見送り。
使ったやつ
開発合宿ではあまり詳しくないものを使うようにしてるので、Vueを使わずReact+MobXを使ってTypeScriptで書いた。
SlackのAPIとのやり取りは公式のライブラリで十分だった（型定義がなくてつらかったけど） github.com
絵文字ピッカーはemoji-martにSlackに登録してあるカスタム絵文字を登録して使えるようにした。 github.com
emoji-martはVueで使える版もあって絵文字ピッカーつけたいときは重宝している。
使い方
electron-webpackとelectron-builderの作法を把握しきれず、パッケージングして動く状態にするのがめんどくさくて諦めた。
なので使いたい人がいたらgit cloneしてnpm iしてnpm run startでお願いします…
そのほか
アプリにサインインするにはManage PermissionでSign in with Slackを有効にする必要があります。
SlackのApp Directoryに乗せる審査を通していないので、Teamの設定でNon distributedなappのインストールが許可されてない場合にはサインインでエラーになります 。（PermissionのOnly allow apps from the Slack App Directoryが有効な場合）
また、インストールにAdminの許可が必要な場合（Approved Appsが有効な場合）にもサインインでエラーがでますが、インストールが許可されると使えるようになります。
Slack APIの可能性
今回Real Time Messaging APIを使ってみて、めんどくさいながらもSlackクライアントが自分で作れることが確認できた。
公式クライアントは複数チームに所属してる場合の体験があまりよくないように感じるので
- 複数チームでサインイン
- 選択したチャンネルを横並びに表示
できるようなクライアント作れば便利そうだなと思った
