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でライブラリ化して使えそうだ。
