Rocket.Chatのルームのアイコンを変更する

Rocket.Chatを使って色々と話をしていると、ルームを作りたくなります。 用件ごとにルームを作っていたら、あっという間に左のサイドバーにずらっとルームが並んでしまいました。 それはそれで仕方のないことなのですが、ルームのアイコンがルーム名の頭文字のアルファベット1文字+背景色(システム固定?)なので、類似色が作成されてしまうと識別が難しくなってきます。
アイコンが並んでいる様子\(サンプル・一部\)
アイコンが並んでいる様子\(サンプル・一部\)
これをどうにか個別のアイコンにできないか、と思いました。 しかし、ユーザのアバターアイコンはプロフィールから変更できるのですが、ルームのアイコンは変更できない模様……。 困ったので、管理者のみが編集できる「カスタムCSS」で無理やり画像を指定するという力業で解決することにしました。
.avatar-image[src*="/avatar/%40ROOM_NAME"] { /* /avatar/%40 までが決め打ちで、その後ろにルーム名(左では「ROOM_NAME」)を記述し、1つ1つのルームに対して個別に指定 */
    content: url("/file-upload/XXXXXXXXXXXXXX/FILENAME.png"); /* 適当なルームで画像ファイルをアップロードし、そのパスを指定 */
}
このように、.avatar-imageが付与されている画像に対してcontentで画像を上書きするという力業。しかも個別指定のためにsrc属性を使うという……。 ちなみに、パッと見ではルームのアイコンは以下の場所で使用されているようです。
  1. 通常のサイドバーのルーム一覧
  2. 検索のサイドバーのルーム一覧
  3. ディレクトリのルーム一覧
  4. ルーム内で右上のインフォメーションから開くサイドメニューの中
1.~3.は小さいサイズで表示されますが、最後の4.はかなり大きめに表示されるので、画像サイズはそれなりに大きい方が良さそうです。 また、何故かサイドバーはプロトコル・ドメインからの絶対パスでsrc属性が記述されているのに対し、4.のインフォメーションはドメイン等を省いた/avatar/からの絶対パスで指定されているため、[src*="/avatar/%40ROOM_NAME"]という部分一致の形で指定しています。
cssで上書きしたサイドバーのアイコン
cssで上書きしたサイドバーのアイコン
カスタムcssで指定することで、上図のようにアイコンを変更することができました。
cssで上書きしたサイドメニューのアイコン
cssで上書きしたサイドメニューのアイコン
インフォメーションで開くサイドメニューの方も上書きされました。 一応これで解決……になるのでしょうか?ルームが増えたら個別に追記しないといけないので、もっとスマートな方法があればそうしたいです。

この記事を書いた人

アバター

アルム=バンド

フルスタックエンジニアっぽい何か。LAMPやNodeからWP、gulpを使ってejs,Scss,JSのコーディングまで一通り。たまにRasPiで遊んだり、趣味で開発したり。