読者です 読者をやめる 読者になる 読者になる

#ToDo 関連のメモ ( #sorashima )

「物の状態が最終的にこうなっていたら良いな一覧と、その為の手順を書き込む」アプリを使う上でのメモなど。(内容が古いまま、間違ったままもあるので注意。)広告が自動で挿入される無料版ブログサービスを利用しているので、PVが増えても一銭の得にもなりませぬ

[ 記事一覧へ ]

#Stylish で #WorkFlowy にブラウザのタブ毎に異なるスタイルを適用する試み

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のページ)が表示される。

  1. https://workflowy.com/#/bec047ae00b3
  2. https://workflowy.com/#/bec047ae00b3?hoge=PPAP (「?hoge=PPAP」の部分はサーバーには無視される)
  3. https://workflowy.com/#/bec047ae00b3?style=1 (「?style=1」の部分はサーバーには無視される)

ところで、パラメーターはURLの後ろに?を付けてそれに続けて指定するが、2個目以降のパラメーターはその後に&で追加していくみたいだ。

たとえば、上の 1. のURLで「APPLE」という単語で検索した時のページのURLは、

となる。このURLには既にq=APPLEという1番目のパラメーターが存在する。
だからこれと同じページを別のURLで開きたい場合は、

とか

という感じになる。


このように一つのページに異なるURLでアクセスすることで、WorkFlowyでも複数のスタイルを使い分けることが可能なはずだ。

実験してみる

Webブラウザの各タブで次のURLにアクセスする。

先ほど説明したとおり、全て同じページが表示される。

追加したダミーパラメーターの違いで適用されるスタイルが変わるように、Stylishアドオンで幾つかスタイル設定してみる。

スタイル0 (ダミーパラメーター「style=1」や「style=2」が付加されてない時に適用される)

  • CSSコード * {color:red}
  • 正規表現に一致するURL https:\/\/workflowy\.com\/(?!.*[?&]style=(1|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 ChromeFirefoxiPad mlni上のSafariで確認)

広告を非表示にする