ビジネスチャットツールdirectに便利な機能を追加するChrome拡張『direct helper』をリリースしました

f:id:munieru_jp:20180407031019p:plain

ビジネスチャットツールdirectに便利な機能を追加するChrome拡張『direct helper』をリリースしました。

directとは

directは、L is Bが提供する国産のビジネスチャットツールです。
LINEに近いUIで、以下のような機能があります。*1

スタンプ
ファイル添付
アクションスタンプ
- 投票
- タスク管理
全文検索
未読・既読表示

directにはウェブ版およびアプリ版が存在し、マルチプラットフォームで利用できます。*2

インストール方法

上記リンクからChromeウェブストアを開き、インストールしてください。

使用方法

direct helperが有効なとき、directの画面右上にアイコンが表示されます。

アイコンをクリックすると、設定画面が表示されます。

設定画面で使用したい機能をオンにすることで、その機能が有効になります。

機能

direct helperには現在、以下の機能があります。

ユーザーアイコンの拡大

ユーザーダイアログのアイコンをクリックすると、画像を拡大表示します。

サムネイルサイズの変更

サムネイル画像のサイズを変更します。
サイズは自由に指定できます。

サムネイル画像をぼかす

f:id:munieru_jp:20180404231046p:plain

サムネイル画像にブラー効果をかけてぼかします。
ぼかし度は自由に指定できます。

送信ボタンの確認

送信ボタンによるメッセージ送信前に、ダイアログで確認します。

入力文字数の表示

メッセージ入力欄に、入力文字数を表示します。
表示形式は、カウントダウン形式かカウントアップ形式を選べます。

マルチビューのレスポンシブ化

デフォルトでは3カラム固定であるマルチビューのカラム数を、選択状態に応じて動的に変更します。

メッセージ監視

メッセージを監視してコンソールに出力します。
複数のトークを行ったり来たりすることなく、メッセージを読むことができます。

開発について

ブックマークレットやユーザースクリプトなど、DOM操作を行うJavaScriptは日常的に書いているのですが、今回初めてChrome拡張を作りました。
開発環境の構築にChrome Extension generatorを使用しましたが、ES2017対応やwebpackの導入などがなかなかに大変でした。
ファイル構成などは、拡張機能としてのコンセプトが似ている Q Acceleratorを参考にしています（オープンソースに感謝）。