[Javascript] ページ内のDOM構造変化をリアルタイムに取得する「MutationObserver」

JS提供型のSaasツールは、企業サイドで便利に機能を導入できるのだが、最近のSaasツール開発元で大きな問題が発生しているらしい。 それは、企業のWEBページがjQueryを使用して、HTMLソースコードに依存しないぐらいトリッキーになっているらしい。 一昔前は企業WEBページと言えば、どこもかしこも「prototype.js」ライブラリを使って、AJAX処理やページUIを動的に行う表示処理をカスタマイズしていたのだが、スマートフォンが登場して依頼、モバイルファーストが基本になり、コンテンツ自体もAJAX対応で実HTMLソースには一切記述がないままデプロイされているため、ツール開発会社は、その手のトリッキーなWEBサイトは考慮されていないため、そうした対応を個別に行わざるを得ない状態という事なのです。

何故動的ページが問題なのか？

トリッキーなWEBサイトという表現を行なったが、こういったページが何故問題なのかというと、 WEBページのUIを設計できていて、IDやclass管理がキッチリできている企業WEBサイトであれば何も問題がないのだが、 WEBページの製作会社が複数にわたっていて、統一ルールが存在しなかったり、何回かのアップデートが繰り返されて、仕様がブレブレにブレているWEBサイトの場合は、ツールで任意プロパティやDOM構造をベースに行うパターンが多いため、その構造体を崩してしまうWEBサイトでは、JSエラーが頻発するようなツールの動作になってしまうのである。 これは、こうした事を想定していないツールが悪いのか、お作法が整っていないWEBサイト側が悪いのか・・・いささか追求しずらいのだが、 WEBページの基本基準である「w3c」の基準に従っていないWEBページはある程度自分のページのお作法の悪さを修正すべきである。 https://www.w3.org/ 英語サイトだが、WEBエンジニアたるもの、このサイトの仕様は知っておくべきレベルなのである。 そして、WEBページのソースコードを登録すると、「バリデーションチェック」してくれる機能もあり、自分のWEBサイトを一度規定からどの程度外れているか、診断してみよう。 https://validator.w3.org/ URLを入れたりHTMLソースを直接登録できるので、是非採点してみよう。

WEBページのDOM構造の変化を取得する関数

var mo = new MutationObserver(function(mutationRecords){ console.dir(mutationRecords); }); var target = document.body; var config = { childList: true }; mo.observe( target , config ); この方式を利用すれば、WEBページが変更された事を取得してイベント発火し、都度ツール対策を行う仕組みにすればいいのだ。 でも実はこの機能、GoogleChromeでしか確認していないのだが、他のブラウザでは動作するのだろうか？？？ Chromeで動作することが分かったので、ChromeExtensionでライブラリ化して使えそうだ。