【CDN】フォールバックとは？

お久しぶりです！前回の記事からかなり時間が経ってしまいましたが、本日からまたWEBコーディングについての記事を投稿していこうと思います！

今回のテーマは「フォールバックの方法」です。CDN使用時に設定するものです。

①フォールバックとは？

フォールバックとは、使用しているシステムや機能に問題が発生して、利用出来なくなる時に代わりのシステム、機能を使用して通常通りの状態を維持させることです。

つまり、CDNを利用している時に問題が発生し、利用できなくなった時に、違うファイルを読み込んで通常通りの状態を維持させることが出来るのでサイトが崩れるのを防いでくれます。

②設定方法

設定はとても簡単です。

⑴ 使用したいJSファイルを追加する

CDNと同じファイルを読み込みます。

⑵ HTMLファイルにCDNを読み込む

// HTML
<script src="https://使用したいCDN"></script>

⑶ 読み込んだCDNにフォールバックを設定する

読み込んだCDNの下に上記のコードを設定します。

// HTML
<script src="https://使用したいCDN"></script>
// 下記のコードを追加
<script>
 window.jQuery || document.write('<script src="CDNと同じファイル"><\/script>');
</script>

window.jQuery||document.write()の中にscriptを設定するだけです。

window.jQuery || document.write()の意味に関してはまた別の記事でアップ出来たらと思います。

④他のJSの場合

上記の方法はjQuery本体を読み込むのによく使用されていますが、他のプラグインではうまくフォールバックができない時があります。

その場合、このように設定します。

<script src="使用したいCDN"></script> 
<script>
　$.fn.使用しているプラグイン(CDN)名 || document.write('<script src="CDNと同じファイル"><\/script>');
</script>

これで、設定しているプラグインの有無を検知して、フォールバックできる様になります。

⑤まとめ

今回フォールバックについて記事にしましたが、まとめると…

・フォールバックは、使用しているシステムや機能に問題が発生して、利用出来なくなる時に代わりのシステム、機能を使用して通常通りの状態を維持させること。

・使用しているCDNに問題が出た時の為にフォールバックは設定しておく。

・設定方法はCDNと一緒にJSファイルを読み込めばCDNにエラー出ると一時的に読み込んでいたファイルを利用する。

・window.jQuery||document.write()でフォールバックの設定ができる。

・window.jQuery||document.write()でうまくいかない時は、$.fn.使用しているプラグイン(CDN)名 || document.write()で設定すると設定しているプラグインの有無を検知して、フォールバックできる様になる。

上記のことを覚えましょう。

この記事を拝見いただき、ありがとうございました！