今日の午後、ふと自分のブログを見てみたら、jQueryやJavaScriptが動いていないのを発見しました。Google Adsenseが表示されてない箇所もあります。すぐ原因はつきとめたのですが、対策は1つではダメでした。
JavaScriptだけが動かない場合の切り分けは結構簡単です。私は高速化のためにCDNサービスCloudFlareを利用しているのですが、このサービスの中にRocket LoaderというJavaScriptを、あと読みする機能があります。これが第一の原因でした。
ゆめぴょんです。こんちはっ(^^)/
CloudFlareのRocket Loaderについては、以前に記事に書いたこともあります。今まではかなり便利で高速化にも貢献しているサービスに満足でした。
（追記）今回の現象はブラウザにも依存する可能性があります。私が試したところ、Macの最新のChromeとFirefoxでは発生しましたが、IE9,10、iOSとMacのSafariとOperaでは問題ありませんでした。
CloudFlareでRocket Loaderを利用している場合
今回の対象者はかなりのカスタマイズ好きだと思います。まずWordPressを利用している場合はプラグイン「W3 Total Cache」と「CloudFlare」を併用している人です。それ以外にRocket LoaderをONにする方法を私は知りません。CF側で出来ましたっけ？
もしこの機能を使っている人で、まだアドセンスやjQueryが動かない人は、「Automatic」から「Off」にしてください。「Manual」では、私の環境ではツイッターボタンなど一部に不具合が発生しました。
設定の場所はWordPress管理画面の左メニューから「Performance」の「General Settings」をクリック。そしてかなり下の方の「CloudFlare」です。「Rocket Loader」を「Off」にして「Save」すればOKです。
そして念のため、CloudFlareのキャッシュもクリアしておきましょう。上の設定と同じ場所にクリアボタン（Purge Cache）があります。ちなみに私の環境ではキャッシュクリアは不要でしたので、クリアの前にリロードで試してください。
ちなみに私は一部のアドセンスには「Rocket Loader」を利用しない設定をしていたため、今回の事態でも普通に動いていました。この設定方法についても、上の記事に書いていますので、今後のために参考にしてみてください。
（追記）今回は「data-cfasync=”false”」は全く効かないようです。アドセンスの表示・非表示が切り替わるのは、CloudFlareのRocket Loaderが（設定中などで）不安定だからだと思います。
Rocket Loaderを利用していないのにJavaScriptが動かない場合
上の設定により、多くのスクリプトが動くようになりました。しかしまだ動かないJavaScriptが存在することに気づきました。
いろいろ試した結果、一部のJavaScriptコードに設定した非同期化のコードが原因でした。ただ今までは普通に動いていたので、これもCloudFlareの何らかのトラブルにより発生したのだと思います。
具体的には、JavaScriptの非同期化コード「async」や「defer」を設定している場合は、取り除くと全てのスクリプトが動き出しました。ちなみにGoogle Adsenseだけはこのコードがあっても動くようです。
最後まで忘れていたのは、サイドバーのウィジェットの「はてなブックマークの人気記事」でした。
まとめ：今日のゆめぴょんの知恵
この記事を書いてる間にも、Rocket Loaderを使ってもアドセンスが動き出したり、「async」「defer」をつけても動いたり動かなかったりしています。
もしかするとCloudFlare側で何かの調整中かもしれませんし、改善に向かっている可能性もあります。明朝までには安定するかもしれないので、放置しておくのもいいかもしれません。Rocket Loaderははずした方がいいでしょうけど。
ゆめぴょんでした。ちゃおっ！
