2013年5月1日水曜日

CDNから 各種JavaScriptライブラリを読み込むサンプルコード

下記のJavaScript(/CSS)ライブラリをCDNから読み込むためのサンプルコード。
  • jQuery
  • jQuery Mobile
  • jQuery UI
  • Twitter Bootstrap

共通事項として、URLのスキーム(http等)を省略すればhttpでもhttpsでも使える。
が、
CSSでスキームを省略するとIE8以下が2回サーバにアクセスするという問題があるので、下記ではCSSも使う場合はスキームをhttpにした。httpsで使いたい場合はhttpsにするか、上記の問題を無視していいならスキームを省略すればよい。


jQuery

cdnjs (by CloudFlare)
<script src=”//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js”></script>

Microsoft (Ajax Content Delivery Network)
<script src=”//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js”></script>

Google (Hosted Libraries)
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js”></script>
常に1.x系の最新版にする場合(※なぜか”2”や”1.9”という指定だと404 Not Foundになる)
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></script>

jQuery (CDN by Media Temple)
(https不可)
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
常に最新版にする場合(現時点の最新版の2.0.0ではなく1.9.1がロードされた)
<script src="http://code.jquery.com/jquery.min.js"></script>


jQuery Mobile

cdnjs (by CloudFlare)
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.3.1/jquery.mobile.min.css" />
<script src=”http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js”></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.3.1/jquery.mobile.min.js"></script>

Microsoft (Ajax Content Delivery Network)
(現時点の最新版の1.3.1がまだ無い)
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.3.0/jquery.mobile.structure-1.3.0.min.css" />
<script src=”http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js”></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>

jQuery (CDN by Media Temple)
(https不可)
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css"/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
常に最新版にする場合
(”1.4.0pre”になる。アルファ版未満のバージョン?)
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>


jQuery UI
テーマが”start”の場合(※cdnjsを除く)。

cdnjs (by CloudFlare)
(テーマは”lightness”と”smoothness”しかない?CSSに”custom”が付いているのはなぜ?i18nが無い)
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.2/css/smoothness/jquery-ui-1.10.2.custom.min.css" />
<script src=”http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js”></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>

Microsoft (Ajax Content Delivery Network)
(Datepikcerの日本語化もする場合)
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.2/themes/start/jquery-ui.min.css" />
<script src=”http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js”></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.2/jquery-ui.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.2/i18n/jquery.ui.datepicker-ja.min.js"></script>

Google (Hosted Libraries)
(Datepikcerの日本語化もする場合)
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/start/jquery-ui.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/i18n/jquery.ui.datepicker-ja.min.js"></script>
常に最新版にする場合
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>

jQuery (CDN by Media Temple)
(https不可。i18nが無い。常に最新版にすることもできないようだ)
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/start/jquery-ui.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.min.js"></script>


Twitter Bootstrap
レスポンシブにして、Font Awesomeも併用した場合。

cdnjs (by CloudFlare)
(Bootswatchは無い)
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" />
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.0.2/css/font-awesome.min.css" />
<!--[if IE 7]>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.0.2/css/font-awesome-ie7.css" />
<![endif]-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>

BootstrapCDN (by NetDNA)
Bootswatchも併用した場合。Font Awesomeを使わない場合は、no-iconsではなく通常のCSSを読み込むようにする。jQueryはBootstrapCDNからは供給されていないので例としてGoogleからにした)
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootswatch/2.3.1/united/bootstrap.min.css" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.min.css" />
<!--[if IE 7]>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome-ie7.css" />
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
常に最新版にする場合
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/latest/css/bootstrap-combined.no-icons.min.css" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/latest/css/bootstrap-responsive.min.css" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootswatch/latest/united/bootstrap.min.css" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />
<!--[if IE 7]>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/latest/css/font-awesome-ie7.css" />
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/latest/js/bootstrap.min.js"></script>


余談
URLがのきなみ長いのは、MicrosoftやcdnjsがGoogleに合わせてしまったからか。GoogleのURLが長いのは歴史的経緯の影響が大きいだろう。 (何回か名前が変わったが、URLのパス部分は変えなかった。今なら js.gapi.com/jqeury/1/jquery.min.js とかにできるだろうに。)
また、BootstrapCDNのPopular Files Overviewは興味深い。


参考

ブログ アーカイブ

tags