ブログ編集画面のツール群の起動確認（2）/ JavaScript

編集画面で起動した JavaScriptツール

「Tampermonkey」は、開いたページで「起動した JavaScriptツールの数」を、ブラウザのツールバーのアイコンに表示します。 この起動は、厳密な意味での「スクリプトの起動」で、ツールを操作して作業を始めるといった、ユーザーが意識する「ツールの起動」ではありません。

常用ツールが少ない場合は、この「起動したツールの数」の変化だけで状況が推測できるでしょう。 何かの理由で常用ツールの1個をOFFにして、ONに戻すのを忘れていたとします。 編集中にいつもの操作が出来ない時に、この数が違うことで、OFFにしたままだと気付けます。

「Tampermonkey」の「起動数の表示」は、インジケータとして有効ですが、常用ツールが増え、非常駐のツールも使う様になると、「いつもの起動数」が宛てにならなくなります。（私がその状態なのですが）

編集環境全体に影響するツール の監視

そこで、「ツールの起動確認」で何が最も必要かを考えると、「編集環境全体に影響するツール」に絞った確認だと気付きました。 様々なツールがあり、それが欠落しても起動しなおせば良いだけの物は多くあります。 しかし、記事データの消失を抑止するツールを始め、幾つかのツールは「必ず起動していて欲しい」のです。

それらのツールも、ユーザーによっては不要な物もあり得ますが、その種のツールは全て起動時に報告を上げる様にして、その報告の数をカウントしてユーザーに判る様にすれば、「Tampermonkey」では出来ない「起動監視」になります。

 ツール群の起動をカウントする方法

方法は色々ありそうですが、今回はセッションストレージを使いました。 ページ読込み時のごく短時間に、複数のツールが 1個の記録アイテムの更新を繰り返す方法は、どうも不安です。 複数が同時にストレージ更新をした場合はややこしいので。

そこで、監視対象のツールごとに「jslord_1」「jslord_2」「jslord_3」… と、記録アイテムを別にして、それぞれのツールが起動した時にストレージに書き込む様にしました。 これは、下の1行を監視対象の各ツールに書き込むだけで済みます。「x」はツール毎に別にします。

sessionStorage.setItem("jslord_x", "1");

この場合は、ストレージに記録アイテムを書き込む事だけが肝心で、値は「1」でも「0」でも、何でも構いません。

そして全ての監視対象ツールが起動しているはずのタイミングで、ストレージを調べます。 これは特別な親ツールに調査コードを組込めばよく、先の記録アイテム名を連番の様にしたのは、カウントプログラムの便を考えたからです。

ここで「親ツール」として「Editor Keeper ⭐📛」が最もふさわしいツールです。 編集画面の右上端のボタンを JavaScriptの起動を示すデザインに変え、記事データの消失を生じる「遷移型リンク」の書換えなどを行うツールですから。

下は、「Editor Keeper ⭐📛」に追加したコードで、「jslord_x」の記録アイテムをカウントするコードです。

setTimeout(()=>{
    let count=0;
    for(let k=1; k<10; k++){
        let get=sessionStorage.getItem('jslord_'+k);
        if(get){
            sessionStorage.removeItem('jslord_'+k);
            count+=1; }}

    let disp='<p class="js_count">'+ count +'</p>';
    target.insertAdjacentHTML('beforeend', disp);
}, 2000); // 2sec後にスクリプトツールの起動数を表示

このコードは「Editor Keeper ⭐📛」が起動してから「2sec後」に、カウント動作をします。「2sec」よりスクリプト起動が遅れるなら、それも注意すべき事ですし。

最後に「<p class="js_count">」という、カウント表示の「p要素」を「target」に追加していますが、「target」は実は「編集画面の右上端のボタン」です。

上の様に、今回のカウント数を見易くするために、起動表示のボタンのデザインを変更しました。 これまで「絵文字フォント」を使って来ましたが、今回は「svg画像」を使っています。 これにより Chrome版と Firefox版のデザインが揃いました。 ボタンデザインは「Home」の様ですが、「編集画面から出る矢印」のイメージです。

上は、未だ監視対象のツールを決めていないので、起動数は「0」になっています。

 新しい起動監視の実装は次ページで

「Editor Keeper ⭐📛」を「親ツール」して、起動監視コードを実装しますが、同時に、これまで適当に選択していた JavaScriptツールを、改めて監視対象ツールだけに絞って、起動を報告するコードを書き込む必要があります。

混乱を避けるために、次ページ以降に、関連ツールの公開をする予定です。