TrelloのUIを透明化するChrome拡張機能を作る
はじめに
私はTrelloが好きで，タスク管理に使っているのですが，最近になって（ようやく）画面の背景に写真が（フリープランでも）使えることを知りました． 単色に飽きていたとこだったので，喜んで写真にしてみたところ，思ったよりパッとしないなという印象でした．
これはまだ良いのですが，カードが多くなり
のようになってしまうと，せっかくの綺麗な背景が台無しになってしまうわけです． そこで，カードを半透明にすれば良いのでは？と考え，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などです．
これらはWebサイトのDOMを編集してボタンを追加し，それをトリガーに機能が書かれたJavascriptを実行することで実現されています．
すなわち，Chrome extensionを使うことでWebサイトの見た目やデザインを変更することもできるわけです． （Chrome extensionは非常に多くの機能を持つことができます．詳しくは公式ドキュメントなどをご覧ください）
Content script
今回は，Chrome extensionで使うことができる機能のうち，Content scriptというものを用います．
Content Scripts - Google Chrome
CSSをいじる方法はないかと探していたところ，下のページが見つかり，どうやらContent scriptを使っているようだということがわかりました．
公式ドキュメント曰く，
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のボードを更新すると，次のように背景が透けて見えるようになります．
以上でTrelloのUIを透明化し，背景の写真を映えさせることができるextensionが完成しました．
まとめ
カードが多すぎると背景の写真が全く見えなくなってしまうという問題を，UIを一部透明化するChrome extensionを作ることで解決しました． 今回は勉強も兼ねて新しくextensionを作りましたが，user style sheetを導入するという手法もあります． 指定したサイトに対し自分のCSSを適用できるという機能であり，これを可能にするいくつかのChrome extensionが公開されているようです．
今のところextensionとしてリリースはしない予定ですが（user style sheetの方が単純なため）一応Githubには公開しています．
スプラトゥーンのインクカラーをまとめてみた
スプラトゥーンというゲームでは，非常に鮮やかな様々な種類の「インク」が使われています． せっかくなので自分でもインクの色を使いたいと思い，可能な範囲で調べてみました．
注意：アプリに使われている色をとったため，実際に使われているものとは異なる可能性があります．参考にする場合は自己責任でお願いします．
| 緑 |  | #16D819 |
| 青 |  | #440FC9 |
| 黄緑 |  | #CBF623 |
| 紫 |  | #A41FE3 |
| 赤 |  | #EF2E7F |
| 黄 |  | #FECD01 |
| 橙 |  | #FF5602 |
| ターコイズ |  | #04F2CD |
| 水色 |  | #39DDEC |
調査方法
実際にゲーム画面で行なったのではなく，イカリング2のアプリを参考にしました．
1. ステージ一覧から使われているインクを調べる
一通り目を通すと，緑，青，黄緑…と合計9種類見つかりました．
2. その色が使われているアプリの画面をスクショする
緑から黄色までは，自分のアカウントの詳細表示の場面からとりました． 編みかけの明るい方をとっています．おおよそ同じ色なので，これでいいかなと． 下がその画像です↓↓↓
加えて，橙はサーモンランから，ターコイズはタコの塗りポイントチャレンジからとってきました．
水色だけはどうしても使われているパーツが見当たらなかったので，ステージのインクの色からとっています． ただこれは光の当たり具合により場所によって色が変わってくるので，それっぽい部分から色をとりました．
フェスの色
フェスの色については，画面で使われている色とアプリで使われている色がちょっと違うと感じたため，今の所はとっていません． 余力があったらそのうち追記するかもしれないです．
正規表現の最短マッチングにおける"?"についての瑣末な話
最短マッチ
私は正規表現について簡単な用途では使える気でいたのですが，あるとき次のような正規表現に出会いました．
.*?
.*は任意の文字が0個以上，というのはわかるのですが，そのあとの?がわからない．
もちろんこの正体は，ご存知の方は多いでしょうが「最短マッチ」というものです．
私はこれに出会うのは初めてだったので，なるほど…と思ったのですが，これを見た時に色々考えてしまいました．
「?は0個か1個かを表す意味のメタ文字であるはず」
「ということは .* が0個か1個かを探しているのか？」
「いや，でもどう考えてもそれじゃ最短マッチにならない…」
結局考えると「?によって最短マッチとなるのは?の機能を活用したものなのか，それとも単に?に最短マッチとなる効果があるのか」という疑問にまとまり調査した結果，後者らしいということがわかりました．
Regex Tutorial - Repetition with Star and Plus曰く，「repititionオペレータはgreedyであるが，?をつけるとlazyにできる」とあったのでこれで結論みたいです．
他のサイトでもメタ文字一覧の?にも同じことが書かれていたりしました．
おまけ
?という0個か1個というrepititionにも?が使えるらしいので試して見ました．
文字列"ab"に対して
ab?->abにマッチab??->aにのみマッチ
ちゃんと動作しているようです．使い所あるのか…？
iPhoneXはAppleのマルチタスキングに対する回答かもしれない
iPhoneX
発売してから半年以上が経過したiPhoneXですが，私も手に入れてから半年近く愛用しています．
そもそもこの機種にしたのは画面が大きい方が電子書籍とか動画とか見やすいだろうという理由でした． 電車で大学に通学する途中でもちろんkindleなどを開いて電子書籍を読むのですが，実際読みやすいです． 前の機種がiPhone5Sというのもあり，画面サイズの大型化は思った以上に良かったです．
そんな中で，ふとiPhoneXを使った効率の良い電子書籍の読み方に気が付いたので，ここに書いてみようと思います．
TL;DR
メモとkindle（などのリーダ）を高速に行き来できるため，本を読みながらのメモが非常に捗る．
（以降は若干ポエム気味です）
iPhoneXにしかない機能
iPhoneXにしかない機能といえば何でしょうか． FaceID？デュアルカメラ？
Appleは（私の知る限り）新商品には必ず新しいインタラクションを備えています． iPhoneXで変わったことといえば，やはりホームボタンの消失が一番大きかったと思っています． ベゼルレスを実現するのに必要だったとはいえ，これまで操作が大きく変わるきっかけになりました．
ホームボタンを押す代わりに，画面の下端からスワイプする． アプリを切り替えるときには，画面の下端を横にスワイプする．
新しいインタクションでしたが，実際に使うとすぐに慣れました．
画面の下端をスワイプするだけで，kindleとメモを行き来できる
この「アプリを切り替えるときには，画面の下端を横にスワイプする」という操作ですが，これが画期的な操作感を生み出していると考えています． これまでの機種（Android含め）はアプリ間の切り替えにホームボタンのダブルタップやアプリ切り替えボタンのタップが求められており，一つの操作では切り替えられませんでした（Galaxyのように2画面同時表示などで解決した例もありますが…iPadも指4本スワイプで切り替えることはできます）． それがこのiPhoneXでは，「親指1本で横にスワイプする」だけでアプリの切り替えを行うことができます．
本を読みながらメモをとるというのはとても有効な読み方ですが，電車の中で行うには紙の本では難しく，タブレットはサイズが大きい，重いといったデメリットがありました． このインタラクションを用いることで，iPhoneXでは「メモとkindleをそれぞれ開き，横スワイプで切り替えながら，メモを取りつつ読む」が可能になります． 実際この手法を採用してからは本を読む効率が格段に上がりました． 電車の中だけでなく，右手が空いていれば本をメモ取りながら読めるので．
マルチタスキングのUI
Galaxyの2画面同時表示やiPadの指4本スワイプなど，様々なモバイルデバイスによるマルチタスキング*1インターフェースが考案されてきましたが，私はiPhoneXのインターフェースが一番使いやすいのではないかと考えています． 画面が小さいので，2つのアプリを同時に表示するのはとても見にくくなります． この画面の小ささという制約の中で，簡易な操作によるマルチタスクを実現したインタフェース． 正直iPadにも欲しいです．
狭い画面の中で複数のアプリを同時使用するのに必要なインターフェースという問いに対するAppleの答えが，iPhoneXによるベゼルレスを生かした横スワイプ切り替えなのではないかと思いました．
