本記事はチャット一覧の新UIをβ版としてリリース | ChatWorkブログによる変更に対して正しく動作しません。新UIに合わせて改変した記事を再投稿する予定です。
2017/12/13 新UIにあわせて更新しました。ChatWork Extensionの拡張CSS機能にて、スタイルを追加することで新UIでもレイアウトが崩れないようにしましたが、記事の通り進めても一部の機能は新UIでは動作しませんのでご容赦ください。
2017/12/15 ChatWor Extensionが真UIに合わせて更新されたようです。それにあわせて記事内容も一部修正しました。
概要
業務でもプライベートでも、GoogleChromeでチャットワークを使用しているが、微妙に使いづらい部分があったり、使わない機能のUIが気になったりしていたので、Chromeの拡張機能でどうにか改善できないかと調査し、改善したお話。
本記事では、Chrome拡張のChatwork Extensionと、ChatWork Quick Info Inputを導入している。
目次
標準の問題点
- 何か全体的にUIの主張がデカイ
- メッセージ記法の入力が面倒というか忘れる
- タスク機能はメモレベルでしか使ってないので不要なUIが多い
Chrome拡張の導入
Chatwork Extension
Chatwork Extensionは、Chatwork全体をいい感じに拡張してくれるが、拡張内容のオン/オフの切替や、任意のスクリプト/スタイルの適用を行えるので実質ユーザの望むままのカスタマイズを行うことができる。
導入後のデフォルト設定だけで、主に以下のような拡張が行われる
ルーム一覧のスマート表示
ルーム一覧の縦幅が狭まりスマートに表示され、検索窓を用いてルームを検索することができる。
コードのシンタックスハイライト化
コードにシンプルな装飾をしてくれるので、チャットワークでコードを共有するレベルでなら充分。
@でToの入力をアシスト
Twitterに近い感覚で、@を入力すると対象ユーザの一覧が表示され、To指定を容易に行えるようになるので、マウスレスな宛先指定ができるようになる。
その他の機能
その他の機能についてはこちらを参照
カスタムスタイル
Chatwork Extensionでは、拡張のオプションから、任意のスタイルを設定することができる。
現状、チャットワークのタスク機能はメモ程度にしか使っていないので、タスク機能周りUIを始めとした、不要な要素を片っ端から非表示にするスタイルを適用した。適用したスタイルは以下の通り
/* ユーザアイコンを縮める */
.roomListItem__iconContainer .avatarMedium {
width 24px !important;
height 24px !important;
}
/* チャットルームごとのタスク数を非表示 */
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;
}
/*自身のユーザ名を全て表示*/
.globalHeaderMyAccount__name {
max-width: 512px !important;
}
適用した結果、チャット一覧はよりスマートに
タスク一覧はただのメモとして表示されるようになった
ChatWork Quick Info Input
Chatwork Extensionとは別にもう一種、ChatWork Quick Info Inputも導入した。
こちらは地味ながらかなり大きな役割をもっており、入力ウィンドウに、title/info/codeのメッセージ記法を入力するためのUIを追加してくれる。
所感
- チャットワーク用のChrome拡張は本記事で紹介した2種類の他にも様々ある。個々人のチャットワークの使い方や拘りに応じて柔軟にカスタマイズすると良さそう
- Chatwork Extensionは、任意のスクリプトを仕込むこともできるので、やりようによっては凄いことできそう
- Slackはもっとカスタマイズがしやすいとの噂が気になる