ムニエルブログ

江戸川区在住のアプリケーションエンジニア。千葉工業大学卒。Apple信者。趣味は読書とプログラミング。Java/HTML/CSS/Sass/JavaScript/jQuery/Vue/GAS BTC:18i4i1Y1Kw2xdB6aHvB62WCWXiULqcqnAd

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

f:id:munieru_jp:20180407031019p:plain

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

directとは

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

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

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

direct helperとは

direct helperは、ウェブ版directに便利な機能を追加するChrome拡張です。
もともとは単なるユーザースクリプトでしたが、この度Chrome拡張として生まれ変わりました。

インストール方法

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

使用方法

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

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

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

機能

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

ユーザーアイコンの拡大

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

サムネイルサイズの変更

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

サムネイル画像をぼかす

f:id:munieru_jp:20180404231046p:plain

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

送信ボタンの確認

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

入力文字数の表示

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

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

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

メッセージ監視

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

開発について

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

お世話になった記事

余談

社内でdirectを使っていたのでつくったのですが、今月中にSlackに移行するようなので、今後は開発を継続できません。
オープンソースなので、どなたか開発を引き継ぎたい方がいれば是非。

関連リンク


ヘルたん ヘルパー探偵誕生 (中公文庫)

ヘルたん ヘルパー探偵誕生 (中公文庫)