外部スクリプト(JSやCSS)の参照元に複数のCDNを指定可能なjQueryプラグイン

これまで何度か試みながらも、なかなか実現できなかった機能です。

CDN提供されている外部スクリプト(JSやCSS)は
なるべくなら手元にダウンロードせずに使いたい。

手元にダウンロードしておくのは万が一のため、
とコードリーディング(そのうち、いつかきっと)のため。

つまるところ、なるべく自サーバの負荷減＆ユーザへのレスポンスを良くし、かつ万が一に備えてダウンロードしておくソースも、必要とあれば「自動的に」切り替えられるのがベストだと考えていました。

セキュリティ要件が厳しくなるばかりで、XSS制約を突破できず半ば諦めていたところにModernizr.jsやyepnope.jsに出会い、淡い期待を抱いてしまったのが何かの縁かもですね。
そのおかげでなんとかこの機能を実現しようと奮闘しました。Modernizr.jsそのものはクロスブラウザの概念の本質に立ち戻る思考でとても良いライブラリだと思います。少しそれますがCan I use…もたまに見ていろいろ考えることがあります。

さて、鍵はJSONPでしたが、その挙動をちゃんと理解していなかったために、CSSの読み込み時に発生するSyntaxErrorをなかなかクリアできずに苦労しましたorz

それでは使用方法や注意点などを解説します。

複数のCDNを指定可能です！

ま、そうそうダウンすることはないと思います(むしろダウンは自サーバが先だろｗそう！だからCDNを利用するんです♪)が、同じソースがjquery.comとGoogleのCDNでホストされていることも多いので、順番に指定します。
※自サーバにもダウンロードしたソースを置き、必ずそちらも指定してくださいm(__)m

◆呼び出し方法

$(document).ready( function() {
    // jQuery依存コードのため、jquery.jsのみは事前ロードしておいてくださいm(__)m
    // 下記は「jquery-ui.min.js」をjquery.com→googleの順で読み込む例です。
    // 正常にロードされた時点でsuccessハンドラが実行されます。
    $.cdnLoader( {
        src: [
            "//code.jquery.com/ui/1.10.0/jquery-ui.min.js",
            "//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js",
            "client/jquery/jquery-ui.min.js"
        ],
        success: function(data) { },
        error: function(e) { console.log( e.statusText ); }
    } );
} );

$(document).ready( function() {

// jQuery依存コードのため、jquery.jsのみは事前ロードしておいてくださいm(__)m

// 下記は「jquery-ui.min.js」をjquery.com→googleの順で読み込む例です。

// 正常にロードされた時点でsuccessハンドラが実行されます。

$.cdnLoader( {

src: [

"//code.jquery.com/ui/1.10.0/jquery-ui.min.js",

"//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js",

"client/jquery/jquery-ui.min.js"

success: function(data) { },

error: function(e) { console.log( e.statusText ); }

} );

※srcプロパティに指定する配列の順番で読み込みます。

404エラー、301、302にも対応しています！

$.ajaxの挙動をいろいろ試しましたが、dataTypeとホスト側設定(Access-Control-Allow-Origin)の関係でstatusCode: { 301:function(), 302:function(), … }が正しく動いたり、そうでなかったりするようです。
Modernizr.js(yepnope.js)は404エラー等でもnopeに行かなかったはずです。

そのため、200以外のHTTPステータスコードは実際には取得できないようですが、ブラウザの挙動としては正しくなるようにいろいろ調整しました。

オプションで”async”、”timeout”の指定が可能です。それぞれデフォルトは false、30秒ですが、実行テストはやや怪しいです。(かなり出来立てのホヤホヤ状態です)

いくつか注意点アリ

jQueryにかなり依存したコードなので、jquery.jsのみは、事前に読み込んでおいてくださいm(__)m
※非jQuery依存で書くべきかなぁとは思いますが・・・

今のところCDNに対応しているのは、JavaScriptとCSSのみです。CDNホストされているWebフォントは動作対象外(未考慮)です。

また、CSSをJSONPで読み込んでしまうとスクリプトとして評価された直後にSyntaxErrorを吐いてしまうため、dataType:textで読み込んでいます。
これによって、src指定のURIに”.css”を含むかどうかでCSSを判定していますので、万が一JavaScriptの場合でも、正しく動作しません。
反対にCSSファイルなのに、URIに”.css”を含まないとスクリプトとして解釈し、JSONP読み込みを行います。
※オプションで指定可能なようにAPI変更するのが吉かもですね〜

それから、なぜかWindows SafariのCSS読み込みのみ、jquery.comもGoogleもSame origin policyエラー(Access-Control-Allow-Origin設定されていない)になりますので、必ずローカルファイルも指定してください。

最後になりますが、CDN提供されていないソースをこのcdnLoaderプラグインで読み込むのはやめてくださいね。