fc2サーバでinview.jsが動かないことがある

fc2サーバを利用しinviewプラグインを使用したページを制作したところ、高確率でinviewの効果が働かないという現象が起きました。 あらかじめopacity:0で見えない状態にし、inviewを使って表示していくという動作をさせていたので、大変困りました。

結論として、Android端末で表示されるfc2側の広告が原因だったようです。

原因究明

数回更新してみても問題が発生しなかったパターン。

• PCのChromeでアクセス時
• PCのFireFoxでアクセス時
• Androidの標準ブラウザでアクセス時
• AndroidのFireFoxでアクセス時
• iPhoneのChromeでアクセス時

数度更新してみるとたまに問題が発生したパターン。

• AndroidのChromeでアクセス時

コンソールをチェック

問題が発生するのがAndroidのChromeのみとわかったところで、原因を特定するためPCのChromeの開発者ツールでUAをAndroidにし、更新を繰り返してみます。 するとやはりinviewが正しく動いてくれないことが数度発生しました。 体感で結構多いです。たぶん3～5割くらいの確率です。

inviewの動かないパターンのコンソールをチェックしてみると、13個のエラーが発生しています。 僕は英語がさっぱりなので、Google翻訳を通してみました。

パーサーブロッキングのクロスサイト（つまり、別のeTLD + 1）スクリプトがdocument.writeを介して呼び出されます。 このスクリプトのネットワークリクエストは、ネットワーク接続不良のために、このページまたは将来のページロードでブラウザによってブロックされる可能性があります。 このページの読み込みでブロックされると、後続のコンソールメッセージで確認されます。 詳細はを参照してください。

fam-tagify.min.js：1 [廃止予定]メインスレッド上の同期XMLHttpRequestは、エンドユーザの経験に有害な影響を与えるため、推奨されていません。 詳細については、 https://xhr.spec.whatwg.org/ を参照してください。

どうやらfam-tagify.min.jsというjsファイルでXMLHttpRequestというものを使用していることが原因のようです。

僕自身はdocment.writeなんて使っていませんしfam-tagify.min.jsというファイルにも見覚えがありません。 加えて、inviewが動くときと動かないときがあることもということも材料に考えれば、inviewそのものはこのエラーとは無関係ということになります。

じゃあ誰がdocument.writeなんて呼び出してるんだ？　とエラーの詳細を確認してみると、adとかfc2という単語がちらほら見ることができました。 つまり、fc2サーバ側で埋め込んでいる広告です。

iPhoneやiPadにUAを変更して再確認してみましたが、確かにAndroidでしか表示されない表示形式の広告が存在し、このタイプの広告が表示されているときだけinviewが動きません。 僕の知識では詳しいことはわかりませんでしたが、このAndroid専用の広告をChromeが排除しようとChromeが気を効かせて、制御にinviewを巻き込んでしまっているみたいです。

打開策

inviewの演出をPCのみに限定し、スマホではカットすることにしました。 FirefoxやAndroid標準ブラウザ、iPhoneなどでは正常に動いていたのでAndroidのみ除外でもいいかなーと思ったのですが、やはりスマホだと少し重い感じがしたのでPCのみに限定することにして妥協。

やっぱり広告のあるサーバはやれることが限定されますね。無料だから仕方ないですが……。

ちなみに、PCで閲覧時だとfc2の広告は1ヶ月更新しないと現れませんが、スマホ閲覧時では常時表示されます。 1ヶ月更新がない状態にして同じようなエラーがPCで発生してしまったら、残念ですがPC側でもカットするしかないですね。

広告