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

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よりご応募ください。


【中途採用】
サービスリードエンジニア
テックリード(アーキテクト)
フロントエンドエンジニア
サーバーサイドエンジニア
業務エンジニア(社内システム基盤・基幹システム)

【インターン・学生バイト】
19新卒対象サマーインターン
エンジニアインターン

その他採用情報

関連記事

thumbnail
Expo でフォントのロードが終わってから render するには

森です。今は Expo と ReactNative と NativeBase を使っています。先程体験した問題とその対処を紹介します。 現象 console.error: “fontFamily ‘Ionicons’ is …

thumbnail
react.js/redux/webpack/flowtype なプロジェクトでの stylelint の導入手順

こんにちは。森です。 最近コードレビューで「CSS の `:` のあとにスペースがあったりなかったりします」と指摘され、つい悲しくなって stylelint を導入しました。react.js/redux/webpack/flowtype なプロジェクトです。こ …

nodejs
NodeJS, WebSockets and the real-time web

Today our team held first presentation of the series “lancers|conf”. The idea behind “lancers|conf” is to …