ChatWork Extensionの有効活用

はじめに

ChatWork Extensionと言われて、前に使っていたよという方もいるのではないでしょうか。

Chatwork左側のルーム一覧はデフォルトでは余白が多く、使い辛く感じる方もいます。
そんな方の強い味方であったChatWork Extension(Neo含む)ですが、Chatworkのアップデートにより残念ながら使い物にならなくなってしまいました。

今回の記事では代替のextensionを当てることも自作する事なく、その上でChatWork Extensionを消さずに放置している層向けに有効活用する方法を紹介していきます。
（もちろん今から入れてもOKです）

InjectUserCustomScriptsオプションの利用

今回紹介する方法は、最終的にcssをガリガリ書いていく方法になります。
ChatWork ExtensionではオプションでInjectUserCustomStylesheets機能を提供していますが、残念ながら現在では沈黙してしまっています。
幸いInjectUserCustomScriptsは生存していますので、jsを経由してcssを書き換えていきます。

記入方法

ベースとなるコードは下記のような形になります。

InjectUserCustomScripts

var text = '';
var ss = document.createElement('style');
ss.textContent = text;
window.document.head.appendChild(ss);

こちらをベースにtext変数にスタイルシートへの記述と同じように書いていけば、お好みのスタイルを適応させる事ができます。
注意点として、改行を含む文字列を書き込んでしまうと正常に反映させる事ができません。
気合を入れて1行で書き切る、メモ帳などで書いた後に改行を消す等の対処方法もありますが、改行を\でエスケープする事もできます。
お好みの方法で記入していってください。

最後に

この記事だけに言える事ではないですが、今後のChatworkアップデートにより本記事の内容も使えなくなる可能性があります。
私も現在の設定に落ち着くまで何度も修正を余儀なくされました。
ぜひともChatworkさんにはお手柔らかにして頂きたいものです。

おまけ

私は普段こちらの設定を使っています。
自前で書くのが面倒だという方、スタイルシートの書き方がよくわからないという方はご活用ください。

サンプル

var text = '\
#_roomListArea roomlist ul li[role="listitem"] {\
  padding: 0px 16px 1px 0px !important;\
}\
#_roomListArea roomlist ul li[role="listitem"] > div:nth-child(1) > div:nth-child(1),\
#_roomListArea roomlist ul li[role="listitem"] > div:nth-child(1) > div:nth-child(1) > img {\
  width: 24px !important;\
  height: 24px !important;\
}\
#_roomListArea roomlist ul li[role="listitem"] > div:nth-child(1) > div:nth-child(1) {\
  margin-right: 2px !important;\
}\
#_roomListArea roomlist ul li[role="listitem"] > div:nth-child(2) {\
  top: 0px !important;\
  right: 4px !important;\
  width: 16px !important;\
  height: 16px !important;\
}\
#_roomListArea roomlist ul li[role="listitem"] > div:nth-child(1) > div:nth-child(2) {\
  width: calc(100% - (16px + 16px)) !important;\
}\
';
var ss = document.createElement('style');
ss.textContent = text;
window.document.head.appendChild(ss);

お知らせ

エイチームグループでは一緒に活躍してくれる優秀な人材を募集中です。
興味のある方はぜひともエイチームグループ採用ページよりご応募ください！

Qiita Jobsのエイチーム引越し侍社内システム企画 / 開発チーム、社内システム開発エンジニアを募集！からチャットでご質問いただくことも可能です！

明日

明日は @andmorefine さんの記事です。
乞うご期待！