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

img_vt_normal

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

Webエンジニア(Wantedly)
Rubyエンジニア(Wantedly)
フロントエンドエンジニア(Wantedly)
インフラエンジニア(Wantedly)
2017新卒エンジニア(Wantedly)
エンジニアインターン(Wantedly)
その他採用情報

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

関連記事

es6-logo
ES6 + React.js + Redux で作るチャットシステム

アプリケーションエンジニアのyutakaです。 先日ランサーズのメッセージ機能をリニューアルしました。 ランサーズのメッセージ機能はリアルタイムのチャット形式で他のユーザーさんとコミュニケーションがとれる機能となっています。 リニューアルに伴って、フロントエン …

thumbnail
ユーザーが簡単にHTMLを入力できるWYSIWYGエディタ ベスト3

ランサーズでは、現在、Webエンジニアを募集しています。 詳しくは、募集要項をご覧下さい。 こんにちは。リートの satoshi です。 前回の投稿より、少し時間が空いてしまいましたが、今回はWYSIWYGエディタについてご紹介したいと思います。 WYSIWY …

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 …