fallback - JavaScript/スタイルシートを外部CDNからダイナミックに読み込み
最近はCDNサービスが多数あり、JavaScriptやスタイルシートを外部サイトから読み込むのも当たり前になっています。しかし他サービスとあって、ずっと存在し続けるのかも安定性も若干の不安が残ります。 しかしだからといってローカルにファイルを用意するのも面倒です。そこで使ってみたいのがfallbackです。
fallbackの使い方
fallbackはスタイルシート、JavaScriptファイルをダイナミックにローディングしてくれるライブラリです。使い方は見ての通りで、一つのライブラリに対して複数のURLを指定できます。
// Here we actually invoke Fallback JS to retrieve the following libraries for the page.
fallback.load({
// Include your stylesheets, this can be an array of stylesheets or a string!
page_css: 'index.css',
global_css: ['public.css', 'members.css'],
// JavaScript library. THE KEY MUST BE THE LIBRARIES WINDOW VARIABLE!
JSON: '//cdnjs.cloudflare.com/ajax/libs/json2/20121008/json2.min.js',
// Here goes a failover example. The first will fail, therefore Fallback JS will load the second!
jQuery: [
'//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.FAIL_ON_PURPOSE.min.js',
'//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js',
'//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js'
],
'jQuery.ui': [
'//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js',
'//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js',
'//js/loader.js?i=vendor/jquery-ui.min.js'
]
}, {
// Shim jQuery UI so that it will only load after jQuery has completed!
shim: {
'jQuery.ui': ['jQuery']
},
callback: function(success, failed) {
// success - object containing all libraries that loaded successfully.
// failed - object containing all libraries that failed to load.
// All of my libraries have finished loading!
// Execute my code that applies to all of my libraries here!
}
});
fallback.ready(['jQuery'], function() {
// jQuery Finished Loading
// Execute my jQuery dependent code here!
});
fallback.ready(['jQuery', 'JSON'], function() {
// jQuery and JSON Finished Loading
// Execute my jQuery + JSON dependent code here!
});
fallback.ready(function() {
// All of my libraries have finished loading!
// Execute my code that applies to all of my libraries here!
});
さらにファイルの読み込みが終わったタイミングでコールバックさせることもできます。一つのサービスがダメだったとしても他のサービスからファイルを取得してくれるなら安心できます。ライブラリの依存関係に応じた読み込みも行ってくれるので、HTMLに直書きするのではなくfallbackを使った方が便利でしょう。
fallbackはJavaScript製のオープンソース・ソフトウェア（MIT License）です。