f:id:tellusium:20180709172959p:plain

はじめに

私はTrelloが好きで，タスク管理に使っているのですが，最近になって（ようやく）画面の背景に写真が（フリープランでも）使えることを知りました．単色に飽きていたとこだったので，喜んで写真にしてみたところ，思ったよりパッとしないなという印象でした．

f:id:tellusium:20180708213630p:plain

これはまだ良いのですが，カードが多くなり

f:id:tellusium:20180708213840p:plain

のようになってしまうと，せっかくの綺麗な背景が台無しになってしまうわけです．そこで，カードを半透明にすれば良いのでは？と考え，chrome extensionで実装してみました．

Chrome Extension

Chrome extensionとは，

Extensions are small software programs that customize the browsing experience. They enable users to tailor Chrome functionality and behavior to individual needs or preferences. They are built on web technologies such as HTML, JavaScript, and CSS.

と公式ページに書かれています．すなわち，ユーザがChromeの機能を追加したりできるというものです．

What are extensions? - Google Chrome

Chrome extensionによって，Webサービスに機能を追加したりすることもできます．様々なサイトにTogglのボタンを追加できるextensionや，Trelloにいくつか便利な機能を追加するUltimelloなどです．

chrome.google.com

これらはWebサイトのDOMを編集してボタンを追加し，それをトリガーに機能が書かれたJavascriptを実行することで実現されています．

すなわち，Chrome extensionを使うことでWebサイトの見た目やデザインを変更することもできるわけです．（Chrome extensionは非常に多くの機能を持つことができます．詳しくは公式ドキュメントなどをご覧ください）

Content script

今回は，Chrome extensionで使うことができる機能のうち，Content scriptというものを用います．

Content Scripts - Google Chrome

CSSをいじる方法はないかと探していたところ，下のページが見つかり，どうやらContent scriptを使っているようだということがわかりました．

marmooo.blogspot.com

公式ドキュメント曰く，

Content scripts are files that run in the context of web pages. By using the standard Document Object Model (DOM), they are able to read details of the web pages the browser visits, make changes to them and pass information to their parent extension.

すなわち，ブラウザが表示したWebページを読み込み，それらを変更したりできるらしいです．

詳細な作り方は公式チュートリアルなどを参考にしましたが，基本的にはフォルダを用意して，manifest.jsonというファイルに色々書き込みます．変更したいスタイルについては，transparentize.cssに書き込みます．また，上で参照したブログにおいて!importantをつける必要があると書かれており，実際そうしないと反映されなかったため，全てに!importantをつけました（ここはもう少し賢くできるかもしれません）．

https://developer.chrome.com/extensions/getstarted

// ディレクトリ構造
trello_transparentizer
├── manifest.json
└── transparentize.css

manifest.jsonです．matchesの部分に適用したいWebサイトのURLを記述します．今回はTrelloのボードのURLのはじめに付いている部分を指定しました．

{
    "name": "Trello Transparentizer",
    "version": "1.0",
    "description": "Transparentize trello interface.",
    "content_scripts": [
       {
        "matches": ["https://trello.com/b/*"],
        "css": ["transparentize.css"]
       }
    ],
    "manifest_version": 2
}

transparentize.cssです．Developer toolを使って変更したい要素のクラス名を探し，そのクラスのcssを上書きする形にしています．

/* リストの背景 */
.list {
    background-color: rgba(0, 0, 0, 0.5) !important;
}
/* カードの背景 */
.list-card {
    background-color: rgba(255, 255, 255, 0.7) !important;
    box-shadow: 0 0 0 #000 !important;
}
/* hover時のカードの背景 */
.list-card.active-card {
    background-color:  rgba(255, 255, 255, 0.9) !important;
}
/* リストの名前 */
h2.list-header-name-assist {
    color: white !important;
    font-weight: normal !important;
}
/* リストの名前（Ultimello使用時）*/
.list-header textarea {
    color: white !important;
    font-weight: normal !important;
}
/* カードをhoverした時に出てくる編集ボタン */
.expanded-list-card-operation {
    background-color: rgba(0, 0, 0, 0) !important;
}
/* スクロールバーの背景 */
.u-fancy-scrollbar::-webkit-scrollbar-track-piece {
    background: rgba(0, 0, 0, 0.3) !important;
}

以上を記述した後，その他のツール→拡張機能→デベロッパーモードON→パッケージ化されていない拡張機能を読み込む→先ほどのフォルダを指定，という流れで拡張機能をインストールできます．拡張機能を有効化した後にTrelloのボードを更新すると，次のように背景が透けて見えるようになります．

f:id:tellusium:20180709171418p:plain

以上でTrelloのUIを透明化し，背景の写真を映えさせることができるextensionが完成しました．

まとめ

カードが多すぎると背景の写真が全く見えなくなってしまうという問題を，UIを一部透明化するChrome extensionを作ることで解決しました．今回は勉強も兼ねて新しくextensionを作りましたが，user style sheetを導入するという手法もあります．指定したサイトに対し自分のCSSを適用できるという機能であり，これを可能にするいくつかのChrome extensionが公開されているようです．

今のところextensionとしてリリースはしない予定ですが（user style sheetの方が単純なため）一応Githubには公開しています．

github.com