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

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

PHPエンジニア
Rubyエンジニア
フロントエンドエンジニア
インフラエンジニア
新卒エンジニア
その他採用情報

関連記事

thumbnail
Webpack で git 管理してもよいような環境ごとに値の異なる定数を設定する方法

森です。仕事でのちょっとしたコミットをブログ記事化するシリーズです。今日は Webpack の話題です。 課題 環境ごとに値の異なる定数として、git で管理できるものと git で管理すべきではないものがあります。後者は dotenv と Webpack の …

thumbnail
ランサーズ流 React.js/redux アプリ開発入門

はじめまして、森(@mori-dev) と申します。React.js/redux, Rails, Node を使ったアプリの開発を行っています。 このエントリーでは、ランサーズでの React.js/redux プロジェクトの設計/実装などの雰囲気がわかるよう …

thumbnail
意外とすんなり作れたApple Watch 開発環境

  ランサーズ エンジニアの土屋です。 先日社内勉強会で行った、Apple Watch開発の環境構築内容を共有します。Apple Watch開発するぞ!という方のお役に立てたら幸いです。 Apple Watchについておさらい 2015/03/10の …