Stylishアドオンはどのページにそのスタイルを適用するかをURLで指定する。なので、通常は一つのWebページには一つのスタイルしか選べない。
しかし、一つのページに見かけ上複数のURLを与えられたら、異なるスタイルを使い分けられるはずである。試してみた。
ヒントになった仕組み
Webブラウザのキャッシュに残った古いデータが原因で、Webサイトが正しく表示されないことがある。
それを避けるためのテクニックのひとつとして、URLの後ろにダミーのパラメーターを付けるというものがある。
これはexample.comにダミーのパラメーター"hoge=XXX"を追加した例。
XXXの部分に乱数や時刻を入れることで、Webブラウザには毎回新しいページだと認識させてキャッシュによる不具合を防ぐ。
サーバー側は無効なパラメーターは無視するので、ダミーのパラメーターが付加されていないURL(この例だとhttp://example.com)のページを返す。
WorkFlowyでは
WorkFlowyでも無効なパラメーターは無視される。
なので、次の3つのURLにアクセスした場合、どれも同じページ(https://workflowy.com/#/bec047ae00b3のページ)が表示される。
- https://workflowy.com/#/bec047ae00b3
- https://workflowy.com/#/bec047ae00b3?hoge=PPAP (「?hoge=PPAP」の部分はサーバーには無視される)
- https://workflowy.com/#/bec047ae00b3?style=1 (「?style=1」の部分はサーバーには無視される)
ところで、パラメーターはURLの後ろに?を付けてそれに続けて指定するが、2個目以降のパラメーターはその後に&で追加していくみたいだ。
たとえば、上の 1. のURLで「APPLE」という単語で検索した時のページのURLは、
となる。このURLには既にq=APPLEという1番目のパラメーターが存在する。
だからこれと同じページを別のURLで開きたい場合は、
とか
という感じになる。
このように一つのページに異なるURLでアクセスすることで、WorkFlowyでも複数のスタイルを使い分けることが可能なはずだ。
実験してみる
Webブラウザの各タブで次のURLにアクセスする。
- タブ0 https://workflowy.com/#/bec047ae00b3
- タブ1 https://workflowy.com/#/bec047ae00b3?style=1
- タブ2 https://workflowy.com/#/bec047ae00b3?style=2
先ほど説明したとおり、全て同じページが表示される。
追加したダミーパラメーターの違いで適用されるスタイルが変わるように、Stylishアドオンで幾つかスタイル設定してみる。
スタイル0 (ダミーパラメーター「style=1」や「style=2」が付加されてない時に適用される)
スタイル1 (ダミーパラメーター「style=1」が付加されている時に適用される)
- CSSコード
.project .name .content {background-color:gray} - 正規表現に一致するURL
https:\/\/workflowy\.com\/.*[?&]style=1&*.*
スタイル2 (ダミーパラメーター「style=2」が付加されている時に適用される)
- CSSコード
.project .name .content {font-size:200%} - 正規表現に一致するURL
https:\/\/workflowy\.com\/.*[?&]style=2&*.*
そうすると、
- タブ0は全て赤文字
- タブ1はバックがグレー
- タブ2はデカ文字
で同じページが表示された。
(正規表現の使い方に慣れていないので、もしかしたらマズいところや、もう少し上手くやれるところがあるかも知れない。)
不思議なことにこの付加したダミーパラメーター、アウトラインの段差を上り下りしたり、単語やタグで検索したり、スターから跳ぶなどの操作をしてURLが変化しても、URLの末尾のどこかに居残り続ける(パラメーターの順番は入れ替わることがあっても、アドレスバーに居残り続ける)。
なので通常の操作をしている範囲ではStylishで指定したスタイルは剥がれずに適用され続ける。(ブックマークを押すなどしてURLを書き換えた場合は無理だが)
これはどういう仕組みなんだろう？(通常操作でダミーパラメーターが消えないことは、Windows上のGoogle ChromeとFirefox、iPad mlni上のSafariで確認)