i-mobile
次へ下へ

Everyday Pieces ::

ありふれたカケラ::人生というジグソーパズルのピースたち

音波で空中浮遊なマジック!?
ロト7選択機なブログパーツ

CloudFlareのRocket Loaderを個別に対処

プログラム / @PAGES, ブログパーツ
公開日:2014年1月6日

なんか最近、
自作のブログパーツがうまく動かなくなっていることに気づきました。
おそらく年末か今年初頭の頃からおかしくなったようです。

調べてみたところ「CloudFlare」による副作用という結論に至りました。
このブログは無料ホスティングサービスの@pagesを利用していますが、
どうやら最近「CloudFlare」を導入したようです。
ただ告知はなかったように思います。
CloudFlareはWebページの表示速度を向上させるCDNサービスです。
基本的な仕組みはこんな感じらしいです。
要するにキャッシュして高速化を図るということのようです。

確かに以前より速くなっているような気がしないでもないです。
ただ残念ながらこちらにあるように、
JavaScriptがうまく行かなくなってしまうことがあるようです。

その他に個人的に調べてみたところでは、
HTMLの一部のタグが改変されるようです。
例えば、imgタグのsrc属性がdata-cfsrcに置き換わったり、
JavaScriptがtype=”text/rocketscript”に変わっていたりすることがあります。
これらはCDNサーバ側でうまく処理されることになっているようですが、
本来のタグの内容を想定している処理に影響が出たり、
JavaScriptが最適化されることによって
副作用が起きてしまうことがあるようです。

どうもJSONPが影響を受けている感じがします。
よくやる手法として、動的にスクリプトを読み込んで
callbackをキックしたりするわけですが、
返ってくる情報までがキャッシュされてしまうっぽい?
その時点での情報がほしいのに古いままだったりしました。

CloudFlareの Rocket Loader をオフにすれば、
JavaScriptでの問題はなくなるようです。
こちらこちらにあるように、
以下のようにscriptタグにdata-cfasync=”false”を付加すれば、
Rocket Loader の対象から除外されるとのことです。
ただしscriptタグの一番目の属性として記述する必要があるようです。

1

i-mobile
上へ次へ