「head」は「MutationObserver」のターゲットに最適? / JavaScript

「MutationObserver」の監視ターゲット

「MutationObserver」は、HTML上の何かの要素を「監視ターゲット」にして、その要素に「オプションで指定した変化」が生じた時に、特定のプログラムを実行させる機能です。

これは、監視型のイベントリスナーといったもので、アメブロ関連のツールを作ると、多くの場合で必要になります。表示中のページを、直接編集画面に開くツール「Edit At Once Am」でも、この機能は必須でした。

ブログページでの監視ターゲット

ブログページは、ページャーを押すと「ページの一部」を入れ替えて、別ページを見せる仕組みになっています。スクリプトは別ページに遷移したら、遷移先の要素を取得しなおす必要がありますが、ブログページは、ページ全体は以前のままなので、スクリプトが停止してしまいます。

そこで「MutationObserver」にページの差替えを監視させ、その度にスクリプトを再起動させるわけです。これがないと、ページ送りを1回でもするとスクリプトは動作しなくなります。

「MutationObserver」のオプションを調べると、ページ上の些細な変化にも反応するオプションが指定できそうです。しかしそんな指定は、一定時間ごとにインターバルで無限に起動させ続けるのと同じで、ブラウザのリソースを食うだけでしょう。必要なのは、ページ送りに「的確に」反応するターゲットです。

しかし、これがなかなか適当な要素がなく、期待した起動が得られない事が何度もありました。これまで一番良さそうと判断して使って来たのは、視覚障害の方のためにページ読み上げに使われる「#announcer」というid名の要素です。

これは bodyの最初の子要素で、ページ送りで必ずテキスト内容が差替えられます。ターゲットにこれを指定したツールは、ほぼ良好ではあるものの、何かの拍子に起動しない事がありました。最新の「Edit At Once ⭐」では、これと「setInterval()」を使った起動コードの組み合わせで、非常に良い結果を得ています。

「Edit At Once Am」で「head」をターゲットに変更

起動アイコンを使わない「Edit At Once Am」は、スクリプトコードの内容が異なり、「setInterval()」と「#announcer」を使っても時々起動失敗が生じました。いよいよ煮詰まり、初めてHTMLのヘッダー「head」要素をターゲットに試しました。

「head」はページのシステム構成を纏めた要素で、ページ送りで中身が書換えられるので選んだのですが、なんと「setInterval()」無しでも完璧な反応を示しました。

これまで、HTML上の特殊な要素という考えから、ターゲットにするのをためらっていたのですが、「head」こそ最適のターゲットなのかも知れません。

「head」を監視ターゲットにした「MutationObserver」のコードは以下です。

let target=document.querySelector('head');
let monitor=new MutationObserver(icon_click);
monitor.observe(target, { childList: true });

覚え書きとして

「MutationObserver」の監視ターゲットに「head」要素を使うのは、もちろん万能な方法ではないでしょう。しかし、ブログページ上でページ送りの壁を乗り越えてスクリプト起動を維持するには、有効なターゲットの様です。「body」をターゲットにしてオプションを駆使しても、なかなか良い結果に至らなかったのですが、ページの一部が差換えられる場合は、「head」を有力候補に考えて良いと思います。

おお、これが今年の最後の纏めになりました。皆さま良いお年を ^^v