皆さんはCDNを活用してますか？
使っているCDNのサーバーに不具合があった場合、JSファイルなどがロードされずwebサイトが正しく表示されない可能性があります。
そんな『万が一』のときにのために、CDNのサーバーからファイルがロードされなかったら自分のサーバーからファイルを配信するということがでます。
JavaScriptの場合
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery||document.write(unescape('%3Cscript src="/common/js/jquery.js?1.11.3"%3E%3C/script%3E'));</script>
このように書くとajax.googleapis.comのサーバーが落ちた場合でも自分のサーバーの/common/js/jquery.jsを配信することが出来ます。
原理としては、ページをロードした時にjQueryが定義されていなければ（jquery.min.jsをajax.googleapis.comから取得できなかった）、scriptタグをdocument.writeするという感じです。
CSSの場合
CSSの場合の書き方は、次のようになります。
<link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" onload="window.ChartistStyle=1;">
<script>window.ChartistStyle||document.write(unescape('%3Clink rel="stylesheet" href="/common/css/chartist/chartist.min.css"/%3E'));</script>
原理としてはJavaScriptの場合と同じですが、JavaScriptのonloadを使ってCSSファイルのロードが出来たかを検知します。
CSSのロードが正常に出来たらonloadでwindow.ChartistStyle=1;を定義します。
定義されていない場合はCSSがロード出来ていないことになるので、自分のサーバーからCSSを配信するという処理です。
最後に
JavaScriptのCDNが落ちているときの対策はいろんなサイトで見られるようになってきましたが、CSSの対策はあまり見かけていない気がします。このタイミングでみなさんもCDNが落ちているときの対策を検討してみてはどうでしょうか。
今回は必要最低限な情報のみですが、CDNサーバーが落ちているときでもガツガツ動くサイトを作りましょう！
ではでは、よき開発ライフを～。