jsDelivrから 最新の各種JavaScirpt / CSSフレームワークを読みこむ URL

jsDelivrから最新のJavaScirpt/CSSフレームワークを読みこむURLのメモ。

下記の「短縮形」は本来は複数ファイルをまとめる機能だが1ファイルでも使える。（URLが短くなり、キャッシュ期間が長くなる。）


■ jQuery

https://cdn.jsdelivr.net/jquery/latest/jquery.min.js
短縮形 https://cdn.jsdelivr.net/g/jquery
↓
v3.0.0-alpha1

https://cdn.jsdelivr.net/jquery/2/jquery.min.js
短縮形 https://cdn.jsdelivr.net/g/jquery@2
↓
v2.1.4

https://cdn.jsdelivr.net/jquery/1/jquery.min.js
短縮形 https://cdn.jsdelivr.net/g/jquery@1
↓
v1.11.3


■ jQuery UI

CSS
https://cdn.jsdelivr.net/jquery.ui/latest/jquery-ui.min.css

JS
https://cdn.jsdelivr.net/jquery.ui/latest/jquery-ui.min.js
短縮形 https://cdn.jsdelivr.net/g/jquery.ui

JSをjQuery(v2.X)と合わせて1ファイルにする
https://cdn.jsdelivr.net/g/jquery@2,jquery.ui

CSSでテーマを指定する場合
https://cdn.jsdelivr.net/jquery.ui/latest/themes/flick/jquery-ui.min.css
テーマを指定しないと"UI lightness"になる（参考：http://jqueryui.com/themeroller/#themeGallery）


■ jQuery Mobile

CSS
https://cdn.jsdelivr.net/jquery.mobile/latest/jquery.mobile.min.css

JS
https://cdn.jsdelivr.net/jquery.mobile/latest/jquery.mobile.min.js
短縮形 https://cdn.jsdelivr.net/g/jquery.mobile

JSをjQuery(v2.X)と合わせて1ファイルにする
https://cdn.jsdelivr.net/g/jquery@2,jquery.mobile


■ Bootstrap

CSS
https://cdn.jsdelivr.net/bootstrap/latest/css/bootstrap.min.css

JS
https://cdn.jsdelivr.net/bootstrap/latest/js/bootstrap.min.js
短縮形 https://cdn.jsdelivr.net/g/bootstrap

JSをjQuery(v2.X)と合わせて1ファイルにする
https://cdn.jsdelivr.net/g/jquery@2,bootstrap


■ Bootswatch

例
https://cdn.jsdelivr.net/bootswatch/latest/cerulean/bootstrap.min.css
テーマもたくさん → https://www.jsdelivr.com/?query=bootswatch


■ Pure.css

https://cdn.jsdelivr.net/pure/latest/pure-min.css
短縮形 https://cdn.jsdelivr.net/g/pure


■ Normalize.css

https://cdn.jsdelivr.net/normalize/latest/normalize.min.css
短縮形 https://cdn.jsdelivr.net/g/normalize


■ Font Awesome

https://cdn.jsdelivr.net/fontawesome/latest/css/font-awesome.min.css
短縮形 https://cdn.jsdelivr.net/fontawesome/latest/css/mainfile

https://cdn.jsdelivr.net/g/fontawesome だとうまく表示されなかった。（フォントファイルへの相対パスがおかしくなる？）



ブラウザキャッシュ期間は1週間。
ただし、複数ファイルをまとめると max-age=15724800（約6ヶ月）になった。


【HTTP Response Header（抜粋）】

Server: nginx
Content-Type: application/x-javascript; charset=utf-8
Vary: Accept-Encoding
X-Version: 3.0.0-alpha1
Cache-Control: public, max-age=604800
access-control-allow-origin: *
X-Cache: HIT
x-edge-location: jptk
Content-Encoding: gzip
X-Firefox-Spdy: h2

ファイル名は"mainfile"でも代替可。minのJSまたはCSSになる。



参考：パブリックなCDNはjsdelivrかcdnjsでいいじゃん。 | Sorry for Team KILLing

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は興味深い。

参考

• JavaScriptフレームワーク/ライブラリの CDNいろいろ
• JSの CDNの速度比較 （2013年版）
• jQuery UIの Datepickerで日本語のカレンダーを表示する方法

JSの CDNの速度比較 （2013年版）

jQueryとTwitter Bootstrapをhttpで3回ロードし、その平均値を比較してみた。

Library	CDN	load時間	https	最新版取得
jQuery 1.9.1 (min)	Google	0.215	○	○（メジャーバージョン番号ごと）
	jQuery CDN	0.550	×	○（Nightly Build？）
	Microsoft	0.139	○	×
	cdnjs	0.069	○	×
Bootstrap 2.3.1 (min.js)	cdnjs	0.087	○	×
	BootstrapCDN	0.243	○	○

以前測ったときはGoogle Hosted Libraries（当時はGoogle Ajax Librariesとかそんな名前だった気がする）が今回のcdnjs並みに速かったが、なぜかMSより遅くなっていた。CDNの拠点お日本から撤退させたのだろうか？（cdnjsは東京にも拠点がある。）

cdnjsはHTTPSも使えるし、GoogleにないjQuery MobileやFont Awesomeもあるから、今後はcdnjsでいいのかもしれない。
ただ、以前はライブラリのバージョンアップが遅かった気がするので、そのあたりは気になる。
それからBootswatchはBootstrapCDNにしかなかった。

また、jQueryの本家CDNでjQuery Mobileのlatestを取得したら1.4.0preというバージョンになった。アルファより前ということなのかな？

2011年を振り返って

2011年も残りあとわずか。このブログに投稿した内容を振り返ってみて、今年気になったキーワードのベスト5と、それに関連する投稿を挙げてみる。


5. Android

今年は予想されていたとおり、スマホ元年になった。そしてアメリカの状況を追うように、日本でもAndroidがiPhoneを上回りシェアを伸ばしている。
”Yahoo!”や”IE”を使っていた人たちがスマホを使うようになってきた、これは個人向けのサービスだけでなく企業向けのシステムをも飲み込んでいくのだろう。
タブレットも含めたスマホ以外へのAndroidの展開については、まだなんとも言えないけれど。（むしろこちらが来たら革命的に状況が変わるかも。）

• スマートフォンのGeolocation API 調査メモ

4. Amazon EC2

今年は満を持してAWSのデータセンターが日本に上陸した。もともとシンガポールでもそんなに問題はなかった（アメリカは体感できるくらい遅かった）けど、やはり東京にあるに越したことはない。
その他にもAWSは立て続けに機能が追加されている。個人的にはAmazon Linux AMIの登場が良かった。CentOSよりyumでインストールできるパッケージのバージョンが新しいし。
以前は「突然落ちる！」という話が蔓延して大丈夫かなと思ってたけど、実際に使ってみて大丈夫な部分もそうでない部分も分かってきた。
来年は色んな環境をEC2へ移行していこうかなと夢想中。

• Amazon EC2 東京リージョンと他のリージョンの価格比較
• AWS CloudFormationで PHP Hello World Applicationを作成してみた

3. jQuery UI

これは今年登場したわけではないけど、個人的に今年から本格的に使い始めたのでランクイン。
いわゆる”デザイン”ができない自分にとって、jQuery UIはまさに福音だった。classを指定するだけで簡単にそれらしいサイトができあがるし、その上バラエティに富んだテーマを選ぶことができる。企業向けのWebアプリならこれで充分でしょう。
はやくGridがリリースされないかな。

• jQuery UI Tabsでタブのリンクを静的リンクにする方法
• （去年書いたのだけど）jQuery UIの Datepickerで日本語のカレンダーを表示する方法

2. jQuery Mobile

そしてjQuery UIの弟分ながら既に兄貴とは比べものにならないくらいメジャーになり、（自分の中では）デファクトスタンダードにまでなっているjQeury Mobile。
jQuery UIのCSS Frameworkで実装されたclassさえ指定しておけばよいというやり方をさらに進化させ、data-*属性により動きまで指定するというやり方は黒魔術的だが、覚えてしまえば手軽に使うには便利。Ajax（実際にはHijax）による遷移も含めて、もうMobileだけじゃなくてPC向けにも取り入れればいいんじゃないかと思う。
とここまで書いて気づいたが、このブログではまともにjQuery Mobileについて書いたことがなかった。マニュアルを見れば他に調べる必要もないからか。

• JavaScriptフレームワーク/ライブラリの CDNいろいろ

1. Titanium Mobile

1位に輝いたのはTitanium。チタニウムではなくタイタニウム。日本ではチタンに引っ張られてチタニウムと読みたくなるが、それでもどうしてもタイタニウム。
まだ発展途上の感は強いが、JavaScriptで、AndroidとiPhoneの両方のアプリが作れるというのは便利。
フォーラム等で回答をしたり見やすいAPI Documentも作ってくれたmasuidriveさんの活躍に負うところも大きいと思う。参考情報（日本語ならなお良し）の探しやすさは往々にしてソフトウェアがブレイクするかどうかにおいて、ソフトウェアの出来よりも影響が大きかったりする。来年も期待してます。

• Windows XPに Titanium Studioをインストール
• Titanium Mobileで 特定のURLをブラウザで開くだけの Androidアプリを作成する方法
• Titanium Studioで作ったアプリを Android Marketに登録する手順

こうして見ると、やっぱりスマホの年だったと実感する。あとはJavaScriptか。
でも、ここでは出てこなかったけど、なんだかんだで個人的には今年もPHPが中心だったなあ。でもPHPは身近過ぎて、「今年」気になったキーワードという感覚にはならないんだよなあ。