GoogleChrome拡張でチャットワークを使いやすくする

概要

業務でもプライベートでも、GoogleChromeでチャットワークを使用しているが、微妙に使いづらい部分があったり、使わない機能のUIが気になったりしていたので、Chromeの拡張機能でどうにか改善できないかと調査し、改善したお話。

標準の問題点

  • 何か全体的にUIの主張がデカイ
  • メッセージ記法の入力が面倒というか忘れる
  • タスク機能はメモレベルでしか使ってないので不要なUIが多い

Chrome拡張の導入

Chatwork Extension

Chatwork Extensionは、Chatwork全体をいい感じに拡張してくれるが、拡張内容のオン/オフの切替や、任意のスクリプト/スタイルの適用を行えるので実質ユーザの望むままのカスタマイズを行うことができる。

導入後のデフォルト設定だけで、主に以下のような拡張が行われる

ルーム一覧のスマート表示

ルーム一覧の縦幅が狭まりスマートに表示され、検索窓を用いてルームを検索することができる。

コードのシンタックスハイライト化

コードにシンプルな装飾をしてくれるので、チャットワークでコードを共有するレベルでなら充分。

@でToの入力をアシスト

Twitterに近い感覚で、@を入力すると対象ユーザの一覧が表示され、To指定を容易に行えるようになるので、マウスレスな宛先指定ができるようになる。

その他の機能

その他の機能についてはこちらを参照

カスタムスタイル

Chatwork Extensionでは、拡張のオプションから、任意のスタイルを設定することができる。

現状、チャットワークのタスク機能はメモ程度にしか使っていないので、タスク機能周りUIを始めとした、不要な要素を片っ端から非表示にするスタイルを適用した。適用したスタイルは以下の通り

/* チャットルームごとのタスク数を非表示 */
li.roomListBadges__taskBadge {
  display: none !important;
}

/* ヘッダーメニューのタスク一覧ボタンを非表示 */
li#_openTaskWindow {
  display: none !important;
}

/* ヘッダーメニューのチャットワークアシスタントボタンを非表示 */
div.globalHeaderAssistant {
  display: none !important;
}

/* チャット一覧のメニューを非表示 */
div#_chatFilterMenu {
  height: 25px !important;
}
div#_chatFilterMenu > div {
  display: none !important;
}
div#_chatFilterMenu > ul {
  display: none !important;
}
div#_chatFilterMenu > input  {
  width: 97% !important;
  position: static !important;
}

/*タスクの期限を非表示に*/
ul#_subRoomTaskList .taskListItem__meta {
  display: none !important;
}

/* 自分のタスクのみ表示 を非表示 */
div#_subRoomMyTaskList {
  display: none !important;
}

適用した結果、チャット一覧はよりスマートに

タスク一覧はただのメモとして表示されるようになった

ChatWork Quick Info Input

Chatwork Extensionとは別にもう一種、ChatWork Quick Info Inputも導入した。

こちらは地味ながらかなり大きな役割をもっており、入力ウィンドウに、title/info/codeのメッセージ記法を入力するためのUIを追加してくれる。

所感

  • チャットワーク用のChrome拡張は本記事で紹介した2種類の他にも様々ある。個々人のチャットワークの使い方や拘りに応じて柔軟にカスタマイズすると良さそう
  • Chatwork Extensionは、任意のスクリプトを仕込むこともできるので、やりようによっては凄いことできそう
  • Slackはもっとカスタマイズがしやすいとの噂が気になる

コメントを残す

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