よく使うサイトのCSSを、ちょびっと変える

# はじめに

こんにちは。フューチャーの棚井です。
本記事は、[フューチャー Advent Calendar 2022](https://qiita.com/advent-calendar/2022/future) の 18 日目です。

# 内容

本記事では、Web サイトの CSS デザインを上書きする Chrome プラグインの [Live editor for CSS, Less & Sass - Magic CSS](https://chrome.google.com/webstore/detail/live-editor-for-css-less/ifhikkcafabcgolfjegfcgloomalapol) を紹介します。前置きは不要で使い方を先に知りたい方は [こちら](https://qiita.com/RuyPKG/private/bdf4a5d20e9c9e8179b0#live-editor-for-css-less--sass---magic-css-%E3%81%AE%E8%A8%AD%E5%AE%9A) へどうぞ。

また、GoogleChat で利用する場合の注意点は [こちら](https://qiita.com/RuyPKG/private/bdf4a5d20e9c9e8179b0#googlechat-%E3%81%A7%E5%88%A9%E7%94%A8%E3%81%99%E3%82%8B%E5%A0%B4%E5%90%88%E3%81%AE%E6%B3%A8%E6%84%8F%E7%82%B9) をご確認お願いします。

# Slack → GoogleChat に移動して困ったこと

これまで複数のチームを渡り歩き、色々なコミュニケーションツール・開発環境・コード共有ツール・タスク管理ツールを利用してきました。
最近、またもや移動がありまして、Slack の民から Google Chat の民に転身したところ、明らかに生産性が下がる仕様に遭遇しました。

**あれ、Google Chat って、サイドバーが動かせない？**

Slack であればサイドバー項目の表示・非表示だけでなく、表示「幅」の調整が可能だと思います。
この仕様に慣れた状態で Google Chat に移動してきたため、サイドバーの表示幅が固定長な仕様に驚きました。

実際に操作すると明確ですが、左上のハンバガーボタンをクリックすることで、サイドバーの「表示」と「非表示」の切り替えが可能です。
![画像1のコピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261058/bf3522c9-4dc1-8caf-616e-6aef63bb82f6.png)
![画像2のコピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261058/40be62c3-1d01-9653-afcd-e55bd0dc0052.png)
しかし、サイドバーとチャンネルの分かれ目にある「それっぽい場所」にマウスホバーせども、左右に幅を調整できそうな表示は一向に出てきません。

私の所属するチームでは、業務上の都合により高頻度で新しいスペースを作成しています。
命名規則を定めた上でスペースを作成するため、各スペースの名称が長くなることで ↓ のようなカオス表示になります。
![画像3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261058/e1c781a6-8530-88e6-e885-b86c367a4e2b.png)
このスペース名は全てダミーですが、大体こんな感じで日付毎に区切る場合、そのスペース名をクリックして開いて確認しないと、内容の判別がつかない（もしくは、この日付はあの内容だと全て暗記しなければならない）状況になります。
唯一の救いは、ピン留めすればそれっぽい感じで自動ソートしてくれる点でしょうか。

これは Google の仕様だから、仕方ないな、、、慣れるしかないか。

となったら開発エンジニアとして終わりです。
Chrome の開発者ツールでタグ構造を確認したところ、`<div class="aeN">` の CSS レイアウト指定にて、サイドバーの横幅を定義している場所が見つかりました。

```css
.aeN {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  max-width: 320px !important; /* ここ */
  min-width: 320px !important; /* ここ */
  -webkit-transition-duration: 0.15s;
  transition-duration: 0.15s;
  -webkit-transition-property: background-color, box-shadow;
  transition-property: background-color, box-shadow;
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
```

要素の横幅指定に

- max-width: 320px!important;
- min-width: 320px!important;

とあるので、Google Chat のサイドバーは 320px の固定長になっているようです。
横幅の定義場所が特定できたので、ここの数値を直接書き換えることで、

こんな風にさらに狭くする（200px）ことも、
![画像4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261058/8e469e29-d1b9-2660-bb4a-8aef37547c6e.png)
逆に広げる（600px）こともできます。
![画像5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261058/8f11710c-096b-b6ae-b305-46922f618dd3.png)
320px から 600px に広げることで、各スペースの名前が一覧できるようになりました。

以上により GoogleChat のサイドバーの横幅を調整する方法は分かったので、あとは「GoogleChat を開きっぱなしにして、いい感じの横幅のままにしておく」か、または「毎度、GoogleChat を立ち上げるたびに、開発者ツール → タグ検索 → max-width, mmin-width の値をいい感じに書き換える」ことで、実質的には GoogleChat の横幅調整が可能となります。

ブラウザは予期せぬタイミングで閉じてしまうこともありますし、起動ごとに開発者ツール → ... と設定するのも、毎度必要となると面倒な作業です。
なので今回は、「CSS レイアウト定義を自動更新」してくれる、[Live editor for CSS, Less & Sass - Magic CSS](https://chrome.google.com/webstore/detail/live-editor-for-css-less/ifhikkcafabcgolfjegfcgloomalapol) を Chrome ブラグインに追加して設定していきます。

# Live editor for CSS, Less & Sass - Magic CSS の設定

今回利用する Chrome プラグインは、[こちらのサイト](https://chrome.google.com/webstore/detail/live-editor-for-css-less/ifhikkcafabcgolfjegfcgloomalapol?hl=en) で拡張機能に追加可能です。
Edge や Firefox、または Opera を利用されている方は、[GitHub のドキュメント](https://github.com/webextensions/live-css-editor) にそれぞれインストール先 URL が記載されていますので、そちらを参照お願いします。

## 設定作業

以下から、Chrome での設定手順を説明します。

まず、Chrome に追加から、今回のプラグインを追加します。
![スクリーンショット 2022-12-19 19.14.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261058/2362bb8d-4cf8-3e20-0478-7f8b46a89d06.png)
![スクリーンショット 2022-12-19 19.15.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261058/69b63193-8930-b6da-3f39-7dd31d5da3e7.png)

以下のメッセージが表示されたら、追加完了です。
![スクリーンショット 2022-12-19 19.18.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261058/3379211c-5ae4-1dfa-6079-b916e26bd421.png)

今回はブラウザに「ピン留め」すると使いやすくなるため、ピン留めしておきます。
ブラウザ右上にあるパズルピースのボタンを押すと、ブラウザにインストールした拡張機能のうち、有効になっている機能の一覧が表示されます。ツール名右横のピンを選択すれば、ブラウザにツールのアイコンが追加されます。

![スクリーンショット 2022-12-19 19.18.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261058/66cf8148-f9b4-f926-168d-b95950d496a7.png)

これで拡張機能 Live editor for CSS のインストールは完了なので、次は GoogleChat 側に移動します。

GoogleChat に移動したら、拡張機能のボタンをクリックします。
![スクリーンショット 2022-12-19 19.22.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261058/6bb37129-b40e-336e-6ccd-3625fcb4982f.png)

クリックすると、今回追加したツールのポップアップが表示されます。
このパネルに設定値を追加することで、各種レイアウトを任意のデザインに更新可能です。

今回は「CSS レイアウトを上書き」したいので、CSS を選択します。
![スクリーンショット 2022-12-19 19.22.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261058/6d7fbfad-1f62-a51d-bc01-2f310822f9b9.png)

前半の調査により、GoogleChat のサイドバーは

```css
.aeN {
  max-width: 320px !important;
  min-width: 320px !important;
}
```

で定義されていることを確認済みなので、ここの 320px を別の値に変更して登録します。
今回は 400px に変更して登録しました。
![スクリーンショット 2022-12-19 19.23.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261058/a2b0c794-9ea9-6cc1-1953-ef3e5201429c.png)

パネル右上のピンをクリックすると「CSS レイアウトの更新を自動適応する」ことが可能なので、クリックします。

初回だと、以下の警告が表示されます。
![スクリーンショット 2022-12-19 19.23.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261058/e71517c6-5c42-7f03-e4b6-abcefa24ee0a.png)

「閲覧履歴の読み取り」については、Google 側では ["危険度低"](https://support.google.com/chrome_webstore/answer/186213?hl=ja#zippy=%2C%E5%8D%B1%E9%99%BA%E5%BA%A6%E4%BD%8E) としているため、今回は問題なしとしています。

「許可をする」を選択すれば設定完了で、ページをリロードしても、CSS レイアウトが Live editor for CSS に設定した値に自動更新されることが確認できます。
![スクリーンショット 2022-12-19 19.31.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261058/6bc1f3fb-7e27-0c9c-77c9-21d75129dfcf.png)

これで、GoogleChat の横幅を、見やすいサイズで固定化することができました！

## GoogleChat で利用する場合の注意点

今回は「GoogleChat」をサンプルとして説明しました。
この方法は便利ですが、Gmail と併用すると、Gmail 側の表示がズレます。

Live editor for CSS は「ドメイン単位」で動作します。
GoogleChat と Gmail は両方とも同じドメイン **mail.google.com** でサービスが提供されているため、Chat 側に今回の CSS レイアウトを適応すると、Gmail 側も「同じタグ名」を利用しているため、以下のような表示になってしまいます。
![スクリーンショット 2022-12-19 20.11.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261058/52783acb-bbbd-17d2-9f73-a67b99a4148b.png)
私は全く気にしない程度の挙動なのですが、
Chat と Gmail の両方を利用する方には、このツールだと違和感を感じるかもしれません。

# さいごに

今回は、普段利用するサービス/サイトの CSS レイアウトをちょっとだけ変更して、普段の作業効率を上げる方法を説明しました。
Slack の民 → GoogleChat の民に移動し、サイドバーを伸ばす方法を探すうちに「Live editor for CSS」を発見し、同じような問題で困っている人がいるかも？というところから本ブログを執筆しました。途中、Gmail 側の表示がズレていることに気づいた時は驚きで、タグ名がしっかり管理されているのは流石だなと思いました。

本記事の執筆に際しては、Tsut-ps さんの [CSS を上書き! リアルタイムで Web サイトのデザイン変更。Chrome 拡張機能「Live editor for CSS(Magic CSS)」の使い方](https://matcha14.com/chrome-live-editor-for-css/) を参考にさせていただきました。日本語で真っ先にヒットするのはこの記事であり、内容の充実面を含めて非常に助かりました。

2022 年のフューチャーアドベントカレンダーはまだまだ続きます。
引き続きご期待ください！