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

JavaScript, CSSライブラリの CDN

たくさんのライブラリをホスティングしているところ

RawGit
・（cdn.rawgit.comの方は）by MaxCDN
・Github上のライブラリが対象

jsDelivr
・by MaxCDN and CloudFlare

cdnjs
・by CloudFlare

OSSCDN
・by MaxCDN



特定のライブラリのみホスティングしているところ（と言ってもGoogleとMicrosoftはそこそこ揃ってる）

Google Developers Hosted Libraries
・by Google
・AngularJSあり

Microsoft Ajax Content Delivery Network
・by Microsoft
・Bootstrap、Knockoutあり

jQuery CDN
・by MaxCDN
・jQeuryファミリーのみ

Bootstrap CDN
・by MaxCDN
・Bootstrap、Font AwesomeとBootswatchのみ

Yahoo! Developer Network
・by Yahoo
・YUIとPure.cssのみ
・HTTPS不可


MaxCDNがんばってる


参考
floatingdays: JavaScriptフレームワーク/ライブラリの CDNいろいろ

Content Security Policy

ApacheでContent Security Policyを設定したメモ。


httpd.confで設定する例。

Header set Content-Security-Policy "default-src 'self'; script-src 'self', 'unsafe-inline', www.example.com"

とりあえずレポートだけ見たい場合の例。

Header set Content-Security-Policy-Report-Only \
"default-src 'none';\
 script-src 'self';\
 object-src 'none';\
 img-src 'self';\
 media-src 'none';\
 frame-src 'none';\
 font-src 'none';\
 connect-src 'none';\
 style-src 'self';\
 report-uri /csp-report.php?v=1"

レポートでどのポリシーに違反したのか見やすくするため、xxxx-srcを全部書いた。
何がエラーになるか分かるように基本厳し目に、使わなそうなのはとりあえずnoneにしている。
report-uriのパラメータ（v=1）は後述。

右辺の書き方については下記参照。
CSP policy directives - Security | MDN

はまりそうなとこだけ書くと、

• 'none'・'self'・'unsafe-inline'・'unsafe-eval'はシングルクォーテーションも含めて書く必要がある。
• データスキーム（data:）はコロンも含めて書く。
  （mod_pagespeedを使っていると、気づかない間にデータスキームが使われていたりする。）
  ちなみに、スキームはデータに限らず、"https:"など特定のスキーム限定を指定できるみたい。
• URLはスキームを省略可（例：www.example.com）。省略した場合、元のページと同じスキームと同じもののみ許可する。
  ポートも同様。
• URLで別のスキームを許可したい場合、別途記載が必要。
  例：元のページがhttpで、読み込むCSSがhttpsの場合、httpsのURLも書く必要がある。
  ワイルドカードが使えるという説明もあったが、下記のどちらも駄目だった（ブラウザによる？）

• *://www.example.com

• *//www.example.com

• URLのサブドメインはワイルドカード（*）が使える。
  サブドメインをワイルドカードにすると、サブサブ（...略）ドメインまでワイルドに適用される。
  ただしサブドメイン無しには適用されないらしい。

レポートをログに書き出すPHPの例。

<?php
if (!$_GET || $_GET['v'] < 1) {
        exit;
}
$report = json_decode(file_get_contents('php://input'), true);
$log = date('[Y-m-d H:i:s] ') . $_SERVER['HTTP_USER_AGENT'] . ' ';
$log .= var_export($report['csp-report'], true) . "\n";
error_log($log, 3, '/var/log/csp-report.log');

Content-Security-Policy-Report-Onlyの例でreport-uriにパラメータを付けたのは、このPHPの2行目で古いポリシーを無視するため。
ブラウザによってはキャッシュしてしまうようで、古いポリシーに基づき送信してくることがあり、ノイズになるので。
ポリシーを変えたら、パラメータの数字とPHPの2行目の数字を両方インクリメントする。

ログファイルはApacheが書き込めるように権限設定しておく。

（2015/3/2 追記）
logrotateも追加しておく。（phpのlogrotate設定をコピーして作成。）

/var/log/csp-report.log { missingok notifempty}

（追記終わり）

また、ModSecurityを使っている場合はレポートがModSecurityではじかれないように注意。

ログを見ていると、違反URLとして報告される"about"はabout:blankだと思うけど、"asset"って何だろう？



ちなみに、Gmailのポリシーはこんな感じだった。

script-src https://*.talkgadget.google.com 'self' 'unsafe-inline' 'unsafe-eval' https://talkgadget.google.com https://www.googleapis.com https://www-gm-opensocial.googleusercontent.com https://docs.google.com https://www.google.com https://s.ytimg.com https://www.youtube.com https://ssl.google-analytics.com https://apis.google.com https://clients1.google.com https://ssl.gstatic.com https://www.gstatic.com blob:;frame-src https://*.talkgadget.google.com https://www.gstatic.com 'self' https://accounts.google.com https://apis.google.com https://clients6.google.com https://content.googleapis.com https://mail-attachment.googleusercontent.com https://www.google.com https://docs.google.com https://drive.google.com https://*.googleusercontent.com https://feedback.googleusercontent.com https://talkgadget.google.com https://isolated.mail.google.com https://www-gm-opensocial.googleusercontent.com https://plus.google.com https://wallet.google.com https://www.youtube.com https://clients5.google.com https://ci3.googleusercontent.com;object-src https://mail-attachment.googleusercontent.com;report-uri /mail/cspreport

見やすく整形。

script-src
https://*.talkgadget.google.com
'self'
'unsafe-inline'
'unsafe-eval'
https://talkgadget.google.com
https://www.googleapis.com
https://www-gm-opensocial.googleusercontent.com
https://docs.google.com
https://www.google.com
https://s.ytimg.com
https://www.youtube.com
https://ssl.google-analytics.com
https://apis.google.com
https://clients1.google.com
https://ssl.gstatic.com
https://www.gstatic.com
blob:
frame-src
https://*.talkgadget.google.com
https://www.gstatic.com
'self'
https://accounts.google.com
https://apis.google.com
https://clients6.google.com
https://content.googleapis.com
https://mail-attachment.googleusercontent.com
https://www.google.com
https://docs.google.com
https://drive.google.com
https://*.googleusercontent.com
https://feedback.googleusercontent.com
https://talkgadget.google.com
https://isolated.mail.google.com
https://www-gm-opensocial.googleusercontent.com
https://plus.google.com
https://wallet.google.com
https://www.youtube.com
https://clients5.google.com
https://ci3.googleusercontent.com
object-src
https://mail-attachment.googleusercontent.com
report-uri
/mail/cspreport

scriptは'unsafe-inline'も'unsafe-eval'も許可してしまっているが、imgも含めて*を使っていないのは立派。
style等は（defaultも）指定していないが、不要という判断か、指定すると差し障りがあるのか、どちらだろう？

また、1バイトを削るのにもこだわるGoogleがわざわざこれだけの文字列を送信するのは、セキュリティの方が重要だからということだろう。
サブドメインをワイルドカードでまとめれば随分減りそうだが、Googleともなると使っているサブドメインも膨大なので、セキュリティが担保しづらくなるのだろう。
policy-uriを指定してポリシーをXMLでやりとりしてキャッシュを効かせれば総通信料は減りそうだが、柔軟性とのトレードオフか。
report-uriも送信料を増やすが、これ無しは運用的にきっと難しいだろう。

IEのバージョン別の X-Content-Type-Options: nosniffの対応状況

IE8以下は内容がHTMLっぽいとHTTPレスポンスヘッダ‐のContent-typeに関わらず、HTMLとしてレンダリングしてしまう。
IE8はnosniffをつければ、Content-typeに従う。

参考： X-Content-Type-Options: nosniffの効果を確認してみる | UCWD-Studio.【ホームページ制作 / 京都】


PHPの実験用コード

<?php header('Content-type: text/plain') ?>
<script>alert(1)</script>

IE9以降およびChrome・Firefoxなどは、nosniffがある場合はJavaScriptやCSSの外部ファイルのContent-typeが妥当でないと、その外部ファイルは読み込まない。

参考：
X-Content-Type-Options: nosniff の効果 : swdyh
MIME タイプのセキュリティ リスクの軽減 (Windows)

今どきのHTTPヘッダーによるセキュリティ向上の調査メモ

今夜つける HTTPレスポンスヘッダー （セキュリティ編） - うさぎ文学日記の中で、よく知らなかったヘッダーについて調べたメモ。

いくつかのヘッダーについてのブラウザ別のサポート状況はこちら。
（ちょっと古いが、少なくともこれ以降のバージョンではサポートしているということは分かる。）
↓
IPA ISEC　セキュア・プログラミング講座：Webアプリケーション編　第8章 マッシュアップ：クライアントサイドマッシュアップ: #4 対策に利用できる技術


X-XSS-Protection

IE8以降のXSSフィルターはデフォルトで有効になっている（ブロッキングモードではない）。
↓
Security through HTTP response headers

[IEInternals] XSS フィルターを制御する | Hebikuzure's Tech Memo

Internet Explorer 8 には、XSS フィルターとして知られている、反射型クロスサイト スクリプティング攻撃を防止するのに有効な画期的新機能があります。このフィルターは既定ではインターネット ゾーン、信頼済みサイト ゾーン、制限付きサイト ゾーンで動作します。

オフにしている人や、XSS on XSS Filterに備えて、ブロッキングモードで有効にさせるのが無難？

X-XSS-Protection: 1; mode=block

Content-Security-Policy

（参考）Content Security PolicyでXSSを断ち切る | monoの開発ブログ

インラインリソースは'unsafe-inline'で許可できる。
dataスキームURIには"data:"で許可できる。
↓
An Introduction to Content Security Policy - HTML5 Rocks

IEがほぼサポートしていないようなので、効果は限定的か。
↓
CSP policy directives - Security | MDN

CSP is quite usable in Chrome 16+, Safari 6+, and Firefox 4+, and has (very) limited support in IE 10.

セキュリティとしては非常に強力だが、ホワイトリストのメンテが面倒なので外部リソースを気軽に使うようなサイトでは使うのは難しい？

あるいは、こんな風に思いっきり緩くしておくか？（これだと意味がないか...）

Content-Security-Policy:
default-src 'self';
script-src 'unsafe-inline' *;
img-src data: *;
frame-src *;
font-src *;
style-src 'unsafe-inline' *;
report-uri /csp-report.php

見やすくするために改行している。未検証なので取扱注意。
faviconはimg-srcに含まれる。
違反が見つかったら、report-uriにJSONでPOSTされる。
eval()が必要なら'unsafe-inline'も追加する。

Content-Security-Policy-Report-Onlyでチェックのみに使うのが良いかもしれない。


Strict-Transport-Security

IEが10でもサポートしていないことを考えると、これが効かない場合のリダイレクト等の処理も必要。
↓
HTTP Strict Transport Security - OWASP

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というバージョンになった。アルファより前ということなのかな？

JavaScriptライブラリ備忘録

使ってたり、使ったことがあったり、使うことがありそうなJavaScriptライブラリを忘れないようにメモ。

• jQuery ファミリー
• jQuery
• jQuery UI
• jQuery Mobile
• jQuery プラグイン
• jQuery Cookie Plugin
• ブラウザのCookieを簡単に扱える
• jQuery Easing Scroll
• ページ内での遷移がスムーズなスクロールになる
• FancyBox
• いわゆるLightbox的なやつ。HTMLも可
• jQuery.flickable
• フリックするとスクロールする。PCでもOK
• jQuery Pryn Plugin
• Pryn2.cssとセットで
• その他
• Kana.JS
• 文字列の全角⇔半角の変換ができる

Titanium Mobileについて参考になるサイトのリンク集

Titaniumを使ってiPhoneアプリとかAndroidアプリとかをJavaScriptで作るための参考サイトのメモ。

• まず初めに
  
• Windows XPに Titanium Studioをインストール
• ただし、Windowsなら環境を作るのが楽なWindows7で開発した方がいいと思う
• 連載：Titanium Mobileで作る！ iPhone／Androidアプリ｜gihyo.jp … 技術評論社
• 雰囲気をつかむ
• APIリファレンス（マニュアル）
• Appcelerator Titanium MobileではじめるJavaScriptによるiPhone/Androidアプリケーション開発
• スクリーンショット付きで分かりやすい
• 基本的にiPhone向けなので、Androidアプリの場合はそれを差し引いて読む
• Titanium Mobile API Documents
• masuidriveさんによる準公式リファレンス（英語）
• 本家のより使いやすい
• 一歩進んで
  
• Titanium Mobileに神の火を！ - Prometheus.js
• 「もう少しだけ手軽にTitamium Mobileを使えるように、Titaniumをラップするライブラリ」
  
• Titanium Mobileで 特定のURLをブラウザで開くだけの Androidアプリを作成する方法
• まあ大抵の場合はWebで作った方が楽なのよね
  
• そしていよいよ！
  
• Titanium Studioで作ったアプリを Android Marketに登録する手順
  

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は身近過ぎて、「今年」気になったキーワードという感覚にはならないんだよなあ。

Windows XPに Titanium Studioをインストール

開発構築にリトライしたメモ。
インストールからKitchen Sinkを動かすまで。
Titanium StudioもAndroid SDKも重いので、なるべくパワーのあるPCでやった方がよい。


まずはインストール

• JDK
• Java SE Downloadsから、Java SE 6の最新版をダウンロードしてインストール
• 7だとダメらしい
• インストール時には、pathにスペースを含まないようにする？
• Windowsの環境変数「PATH」にbinフォルダのpathを追加
• 環境変数「JAVA_HOME」を登録し、PATHには"%JAVA_HOME%\bin"の形で登録しておくと、JDKのバージョンが変わった時の変更が楽になるし分かりやすい
• Android SDK
• Android SDK | Android Developersから、最新版をダウンロードしてインストール
• インストール時には、pathにスペースを含まないようにする
• スペースを含むとTitanium StudioからAndroidのエミュレータが起動できない
• 参考：Titanium Studio Android Emulator | Ami Kitchen
• SDK Managerを起動（通常は自動で立ち上がるらしい）
• 必要なパッケージをインストール
• SDK Platform Android 2.1は必須
• これが無いとTitanium StudioがAndroid SDKを認識しないらしい
• Google APIs by Google Incも必要
• これが無いとエミュレータがうまく動かない
• かなり時間がかかる
• 迷うなら全部入れておけば無難（ただし時間はかかる）
• platform-toolsフォルダ内のadb.exeを、toolsフォルダにコピー
• 以前はtoolsフォルダにあり、Titanium Studioがそれに合わせた動きをするため
• Windowsの環境変数「PATH」にplatform-toolsフォルダとtoolsフォルダのpathを追加
• JAVA_HOMEと同様に、ANDROID_SDKとか環境変数として登録すると良いでしょう
• Titanium Studio
• Sign Upしてアカウントを作成
• Resourcesからダウンロードしてインストール
• インストール時には、pathにスペースを含まないようにする？
• WinでTitanium Studio - はこもあいして！を参考にして、builder.pyを書き換える

動作確認

• Titanium Studioを起動
• Work Spaceの場所を訊かれる。スペースを含まないpathを指定する（？）
• Titanium（appcelerator）のアカウントを訊かれるので入力
• Firewallが警告を出してきたら許可
• Gitが無いと言ってきたら、「Use PortableGit」をクリック？
• Mobileのプロジェクトを作成
• Android SDKのフォルダを指定する
• Application IDには"."（ドット）を含ませること
• 参考：Titanium Mobileセミナーに行ってきたのでそのメモ - I’m hungry
• 実行
• 実行前にadb.exeが実行されていたら、タスクマネージャからプロセスを終了（？）
• プロジェクトをRun
• Firewallが警告を出してきたら許可
• 「I am Window 1」が表示されればOK！
• 「[TRACE] adb devices returned 0 devices/emulators」が続いてタイムアウトしたら、タスクマネージャから「adb.exe」のプロセスを終了させてから再実行する

KitchenSinkを動かす

• Titanium Studioの左下の「Samples」からKitchen Sinkのプロジェクトをimport
• 参考：Titanium Studioで最新のKitchen Sinkをインポート - kaz_konno’ blog: walkthisway
• Android SDKのバージョンはGoogle APIs Android 2.x(.x)にする
• AndroidのSDK ManagerのEmulator（AVD）とTitanium Studioの方のAndroid APIの設定の両方を変える必要あり？
• Titanium Studioの方のAndroid APIの設定は、メニューの「Run」のな間の「Run Configurations」から設定する
• 普通のAndroid 2.x(.x)ではアプリが起動しない
• 参考：開発環境をつくるべし！ - Titanium StudioではじめるAndroidアプリ開発
• プロジェクトをRun
• buildにかなり時間がかかるので辛抱強く待つ
• Controls等のタブと、Slider・Switch・Activity Indicator・・・というメニューが表示されたらOK！

さあ始めよう

• いよいよ自分でアプリを作ってみる
• とりあえず、下記のあたりを参考にする
• 連載：Titanium Mobileで作る！ iPhone／Androidアプリ｜gihyo.jp … 技術評論社
• サンプルアプリの作り方の例。まずは雰囲気をつかむ
• toc - titanium-mobile-doc-ja（中略）Appcelerator Titanium Mobileに関するドキュメントを日本語でまとめていくプロジェクト - Google Project Hosting
• Window、Viewやコントロールなどの各パーツについてのサンプルコードと画面イメージ。必読！
• Titanium Mobile 1.6.0 API Documents
• ちょっとバージョンが古いが使いやすい非公式リファレンス
• Appceleratorに就職した増井さんが作ったみたい

参考

• Office L: Windows で Titanium Studio を使って Android アプリ開発の準備
• Titanium Studio起動メモ(use Windows XP) — Gist
• 何がなんでもTitanium MobileでKitchenSinkを起動したい人の覚書（Windows） - Cherenkovの暗中模索にっき

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

prototype.jsとかは、もういいや。


プロダクト別CDN

• jQuery
• Google Libraries API
• Microsoft Ajax Content Delivery Network
• jQuery CDN
• cdnjs.com
• jQuery UI
• Google Libraries API
• Microsoft Ajax Content Delivery Network
• cdnjs.com
• jQuery Mobile
• Microsoft Ajax Content Delivery Network
• jQuery CDN （jQeury Mobile）
• YUI 3
• Google Libraries API
• YUI Configurator
• cdnjs.com
• YUI 2
• Google Libraries API
• YUI 2: Dependency Configurator
• Modernizr （yepnope.jsを含む）
• Microsoft Ajax Content Delivery Network
• cdnjs.com

（2013/3/19 追記）

• Twitter Bootstrap
• BootstrapCDN

（追記終わり）


CDNごとの特徴

• Google Libraries API
• HTTPS可
• マイナーバージョン（もしくはリビジョン番号）を省略すると、指定したメジャーバージョン（もしくはマイナーバージョン）内で最新のファイルをロードする
• 他にもprototype.jsやDojo、Ext core等メジャーなJavaScriptフレームワークがいくつかある
• Microsoft Ajax Content Delivery Network
• HTTPS可
• 他にもメジャーなjQuery Pluginがいくつかある
• jQuery CDN （jQuery CDN、jQuery CDN （jQeury Mobile））
• HTTPS不可
• YUI （YUI Configurator、YUI 2: Dependency Configurator）
• HTTPS不可
• 複数のファイルを結合して1ファイルとしてロードできる
• cdnjs.com
• HTTPS可
• 最新バージョンの適用タイミングは遅いかも？

結論

• Google Libraries APIが使えれば使う。
• jQuery MobileとModernizrはMicrosoft Ajax Content Delivery Networkを使う。

おまけ
以下のCDNは更新されていないようだ。

• Cached Commons
• JsLoad

関連

• フリーで使えるJavaScriptと CSSの CDNいろいろ
• jQuery UIの Datepickerで日本語のカレンダーを表示する方法
• Googleの CDNを使って jQuery UI Tabsを使う例
• Google App Engineと Google Codeからのファイル取得速度の比較