ランサーズ等のサービスを開発・運用する中で得た知識やノウハウを紹介しています。

Labels:  JavaScript, ツール/ライブラリ 投稿者:上野諒一

チャットワークをもっと使いやすくする拡張機能を作った

こんにちはエンジニアの上野です。
2016年のAdventCalendar も残すところあと僅か!
12/5の投稿(githubのissue, pull request 検索をハックする!)に引き続き、今日はチャットワークの拡張プラグインのご紹介です。エンジニア合宿で作成してウェブストアで一般にも公開している拡張機能になります。

主要な機能一覧

自分が使っていてほしいなと思った機能のうち汎用的に使いそうだなと思ったものを思いつくままに取り込んで作成しました。
  • 全員toを短縮形で使えるようにする
  • toListを開く
  • 全て既読にするボタン付ける
  • [info][/info]などのタグを簡単に作る
  • 自分へのto以外は隠す
  • 自分の送信以外は隠す
  • 隠したメッセージを戻す

利用法

chromeのストアに登録しているので、こちらから拡張機能を追加してください

chatwork helper(chromeストア)

全員toを短縮形で使えるようにする

chatworkには全員にtoを付ける機能があるのですが、人数が多いチャットだとtoの指定だけで画面が埋まってしまうのでtoのタグだけを全員分発行するショートカットを作りました。
a9020581a57dc076ea2c15884c35bfdc

toListを開く

エンジニア的には、toつけるたびにキーボードから手を離したくない。そこでtoListを開くためのショートカットキーを作成しています。
a19e6f1b7e8b37dd57d0c2907ef38536

全て既読にするボタン付ける

通知系をチャットワークに集約していたりすると、見る必要のないメッセージが大量に貯まってしまい、既読にするのが大変だったので追加しました。結構便利です
7287829e33f8e987f7285f74ac1d05ef

[info][/info]などのタグを簡単に作る

チャットワークにはinfoなど幾つかの特殊記法が用意されています。閉じタグを含めて記述するとちょっと長いので短縮するためにショートカットを作成しました
507c1e731e53a98f37fd98c5dcf5ae95

メッセージの表示を自分へのto や 自分のメッセージに限定する

投稿が多いチャットで自分へのメッセージを探す時や、以前の自分の発言を引用したいときなど、表示量を減らして、見つけやすくするために用意した機能です
ちょっと無理矢理感がある実装ですが、自分へのtoのみを表示したいという要望が周りから出ていたので作ってみました
  • 自分へのto以外は隠す
  • 自分の送信以外は隠す
  • 隠したメッセージを戻す
b9210fd053a472c0d39a79419ff12bd5

課題

ソースコードはこちらで公開(https://github.com/ryoichi-u/chatwork_helper )しています
開発合宿の1日という時間の中、 作ったものなのでまだまだ幾つかの課題感を持っています。
  • 見直したらもう少しスマートにかけそう
  • :toの処理などではサジェストしていく動きを実現したかった
  • 各ショートカットを使った後にカーソルが一番下に移動してしまう
  • :mine, :meで該当するものがローディングされてない場合、うまく表示できず追加ロードになる(力技でやりすぎた感)
上記の課題感や、汎用的に組み込んだほうが良さそうな機能がありましたらご意見、pull requestいただけると、とても喜びます。
今回、拡張機能としてchrome storeに登録するために汎用的に使えるコマンドのみを採用していますが、テンプレート自分用のテンプレートを多数登録したり、特定の何人かのグループにtoを送ったりとカスタマイズして使うこともできると思います。是非ご活用ください

参考にしたページ

今回の拡張機能作成には以下のようなページを参考にさせてもらいました。chromeの拡張機能はjavascriptがかければ簡単に作れるので、試してみてください。

Publish in the Chrome Web Store

Manifest File Format

初めてでも理解できるようになる「Google Chrome機能拡張の開発」

ランサーズではサービスを成長させてくれるエンジニア、デザイナーを募集しています!
ご興味がある方は、以下URLよりご応募ください。


【中途採用】
フロントエンドエンジニア
サーバーサイドエンジニア
コーポレートエンジニア
SREエンジニア

【新卒採用・その他】
21・22新卒
その他採用情報

関連記事

thumbnail
redux アプリで定期実行処理を書くには

森です。redux アプリで redux-saga を使って定期実行処理を書いてみました。 要件 redux-saga で以下を実装する方法を検討しました。 定期的にステート(本稿では reducer で分割したストア)の値をチェックして何かする 定期的に A …

thumbnail
React × Redux で action 発行時に確認ダイアログを挟む middleware の実装例

pookチームのtakepoです。 今回は、React × Redux でstateを変更する時にダイアログ等で確認表示を挟みたいときの良い方法をご紹介します。 その場合の例として、「ユーザーの情報を更新するとき、更新しても良いかを一度確認するダイアログ表示す …

thumbnail
コンソールで git のコミットを peco で検索して emacs に表示する

森です。わりと最近書いた便利なシェルスクリプトのご紹介です。 要件 私たちのプロジェクトは、Git のコミットがある程度きれいです。個々のコミットやプルリクがクックブックのように利用できます。コミットメッセージをキーにコミットを検索して、その内容を表示したいで …