まだまだ知らない事だらけ

「Bad Iine Mute」や「Ranking Blocker」は、ローカルストレージに「排除リスト」を保存しています。 この様なスクリプトツールの基本動作は、何処かにデータを登録し、それを使ってブラウザ表示をフィルターする事です。 その保存先は安定していて、ブラウザから使い易い必要があります。 ローカルストレージはとても適した保存先で、これらのスクリプトに限らず、今後にユーザースクリプトを考案していく場合に、必ず候補になるデータ記憶機能です。

 

今回、「管理トップ」ページで不良「いいね!」をブロックするスクリプトを作っていますが、その機能をブログページに拡張するコードを試していて、大きな問題に気付きました。

 

それは、「管理トップ」で記録した「排除リスト」が、「ブログページ」では「認識されない」という事です。

 

ストレージの実際の内容

下は「管理トップ」で DevTools を起動した所で、左ペインの「Local Storage」の下に「https://blog.ameba.jp」を開くと、右に「iine_id_back」(排除リストデータ)が保存されています。

 

 

これを保存した「Bad Iine Mute」がたとえ起動していなくても、このデータは存在しています。

 

次に、ブログページで DevToolsを表示させたのが、下の画像です。

 

 

ストレージ内を探しても、「iine_id_back」がありません。 左ペインをもう一度調べると、「Local Storage」の下の「https://ameblo.jp」が、唯一の有りそうな場所ですが、色々なプログラムがストレージを使用していますが、みあたりません。

 

これでは、「管理トップ」の「排除リスト」は何か方策を考えないと「ブログページ」で利用できません。 困った事です。

 

ついでに「Amebaホーム」も DevToolsで調べてみました。

 

 

こちらは、「Local Storage」の下に「https://www.ameba.jp」がありますが、ストレージの中は全く空っぽです。

 

各種プログラムの相乗りについて

上の「ブログページ」の画像で、幾つものプログラムがストレージを相乗りで利用している事が判ります。 JavaScriptには「localStorage.clear();」などのメソッドがありますが、これはスクリプト自身の動作するドメインの中で、他の相乗りしているデータも削除します。「空いている」場合は良いが、気軽に実行しない方が良い様に思えます。

 

プログラムの側も、他のプログラムから「最悪の場合」は削除されてしまう可能性を考えて作ると思います。 ページ遷移の履歴だったり、Cookieの様に失われても決定的には困らないデータが多いのだろうと思いますが、断定は出来ません。 スクリプトを作る側も、妥当な近所付き合いが要ると思います。

 

また、「localStorage.clear();」メソッドが、左側ペインにある他のドメインに働く事は無い様です。 これがローカルストレージの基本仕様なのでしょう。

 

そしてここで一番問題になっている事は、異なる他ページで保存したデータは、ドメインが異なると全く表示されない(アクセス出来ない)という事です。

 

 

クロスドメインのストレージ利用は不可能ではない

ネットを調べると、これは時々問題になる様です。 少し旧い記事ですが、下のページでは、まさにこの方策のひとつを紹介しています。

 

  クロスドメインで同じlocalStorageを使うテクニック 

 

 

「iframe機能」「クロスドメインメッセージング機能」などを使うとあり、少し複雑な手順が必要の様です。 このあたりを少し掘り下げると下のページに出会いました。

 

 

  フロントエンドWeb戦略室 localStorageとpostMessageの使いどころ 

 

かなり専門的で、私などには僅かの部分しか判らないのですが、それでもローカルストレージやクロスドメインのセキュリティなど、「postMaeeage」関連の濃い内容があり、興味深いページです。 判らない環境に入って行かないと何も得られないのは、異文化の言葉を覚えるのと同じでしょう。

 

 

現在の方針は

「postMaeeage」を使う方法は敷居が高そうで、余り使えそうな印象がありません。 難しい事を避け、柔軟な対処を探すのが賢明と思います。 たとえば、ファイル保存は「Ranking Blocker」で実現しています。 ファイルで「排除データ」を移動させる事は出来るので、ブログページ用と管理ページ用のスクリプトは別のものとして、完全に独立させる。使う側は、ファイルの受け渡しだけたまにすれば良い。

 

この場合、

▪片側だけで「排除リスト」を編集できる

▪どちらも編集可能で、ファイルの操作時に両方のデータを足し合わせる

などのデータ管理が考えられるが、前者がシンプルで判り易いのでは。

 

JavaScript はこのクロスドメインの問題が出てしまうが、ユーザースタイルシートはそれが無くて、あらためて便利なものと思ったりします。