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

2015年にもなったので font-familyを見直したら要らないものだらけだった

前提として、Windowsにヒラギノを入れてたり、Macにメイリオを入れてたりする、「ごく少数の人」は無視したい。それから、かなり古い環境や日本語以外の環境も除いて考える。

で、よくあるこんな無難なfont-familyを見て。

font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;

まず、Macは全角のfont-familyを無視するので、"ヒラギノ角ゴ ProN W3"は不要。

font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;

次に、Windowsでは全角のfont-familyを書いておけば良いので（両方、または全角のみを認識するブラウザはあるが、半角のみを認識するブラウザは無い。日本語環境なら）、Meiryoも要らない。

font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;

そして、Windowsのデフォルトは"ＭＳ Ｐゴシック"、Macは"Hiragino Kaku Gothic ProN"なので、sans-serifさえ指定しておけばこれらもわざわざ指定する必要はない。（ブラウザの設定を変えている人もいるだろうけど、そういう人は自分が設定したfont-familyで見せてあげたほうが良いと思う。）

font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;

游ゴシックは…好みかな？
Mac：YuGothicあり or なし（ヒラギノ）

Windows："游ゴシック"あり or なし（メイリオ）

ということで、游ゴシックありなら、

font-family: "游ゴシック", YuGothic, "メイリオ", sans-serif;

游ゴシック無しなら、

font-family: "メイリオ", sans-serif;

でいいんじゃないかな？

ちなみにiOSはヒラギノ、（一般的な）Androidはsans-serifでデフォルトのfont-familyが適用される。

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も送信料を増やすが、これ無しは運用的にきっと難しいだろう。

CSSの font-familyについての参考サイト 2014

参考になったサイトいろいろ。


CSSのfont-family指定に関する考察 2014年版 ｜ セブンシックス

下記について触れられていて、参考になる。

• ブラウザ/OSのデフォルトフォント
• Macが全角のfont-familyを無視する件とその例外条件
• 游書体
• 大手サイトのfont-family

CSSでのフォント指定について考える（2014年） - DTP Transit（Mac OS X, OS X Mavericks, Web Fonts, Web制作, iPhone, フォント）

Win/Macの日本語/アルファベットのfont-familyのブラウザ別対応状況表あり。

游ゴシック体と游明朝体はWinodws 8.1では日本語名、OS X Mavericks（10.9）ではアルファベット名のみの対応であるため、両名の併記が必要となります。

Osaka−等幅は貴重なOS X唯一の和文等幅フォントであるため、monospaceでは利用します。

ブラウザ、モバイル、OSそれぞれにデフォルトでインストールされている日本語フォント一覧

ブラウザ/OSごとの、指定なし/serif/sans-serifそれぞれのデフォルトフォントを調べている。



「游ゴシック」フォントと「Yu Gothic」フォントの違い - ななふぉ

違うらしい。



「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」の違い - 強火で進め

分かりやすい。


上記を参考に、個人的な好みとしてはこんな感じ？

画面表示用（ゴシック）

font-family: "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;

印刷用（明朝）

font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;

優先順位は、

1. 游書体（Win用）
2. Yu書体（Mac用）
3. ヒラギノProN（Mac/iOS用）
4. メイリオ/MS P明朝（Win用）
5. デフォルトフォント

今どきの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フレームワーク/ライブラリの 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からのファイル取得速度の比較

Google Font APIはどうやってマルチブラウザ対応しているのか

WebFontsを読み込む場合のCSSの書き方はブラウザごとに異なるため、こんなsyntaxを使う必要がある。
しかし、Google Font APIで読み込むCSSをではそんな書き方はしていない。
そこで、試しにTangerineのCSSを各ブラウザで読み込んでみて、Google Font APIがどのようにマルチブラウザ対応をしているのか調べてみた。


IE 8

@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: url('http://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouG-RPY6323mHUZFJMgTvxaG2iE');
  src: local('Tangerine'), url('http://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouG-RD8E0i7KZn-EPnyo3HZu7kw') format('woff');
}

URLはIE専用。
2行目のsrcはIE9用？


Firefox 4

@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: local('Tangerine'), url('http://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouG-RD8E0i7KZn-EPnyo3HZu7kw') format('woff');
}

URLはChromeと同じ。


Chrome 10

@media screen {
@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: local('Tangerine'), url('http://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouG-RD8E0i7KZn-EPnyo3HZu7kw') format('woff');
}
}

URLはFirefoxと同じ。
@mediaでscreenだけにしているのはAndroid対策か何かか？


Safari 5 (for Windows)

@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: local('Tangerine'), url('http://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouG-RKCWcynf_cDxXwCLxiixG1c') format('truetype');
}

URLはSafari用（Operaと共通）。アンダーバーで区切ってるのはiPhone用（iOS用？）が別にあったりするためか？


Opera 11

@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: local('Tangerine'), url('http://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouG-RKCWcynf_cDxXwCLxiixG1c') format('truetype');
}

URLはSafariと同じ。OperaもTrueType組。


まとめ
おそらくUser-Agentで判断して振り分けているだけのようだ。
フォントファイルは大きく分けると下記の3つに分かれるようだ。

• IE8-
  
• IE9+、Firefox、Chrome
• Safari、Opera
  

参考：Webフォント (Webfonts)を使う際の最新記述方法 Fontspring Syntax (The New Bulletproof@Font-Face Syntax) - フォントブログ

プログラム言語とフレームワークのオンラインマニュアル29選

Webで公開されている、プログラム言語・フレームワーク・DBのマニュアル（リファレンス）サイトへのリンクをまとめてみた。
選んだ基準は、できるだけ日本語で、なるべく分かりやすいこと。それを満たすなら公式リファレンスより非公式のものを優先している。

• JavaScript
• JavaScript
• とほほのJavaScriptリファレンス
  
• jQuery
• jQuery 日本語リファレンス
  
• Main Page - jQuery JavaScript Library （英語、公式）
  
• jQuery UI
• jQuery UI - Demos & Documentation （英語、公式）
  
• YUI
• YUI Library （英語、公式）
  
• HTML、CSS
• HTMLクイックリファレンス

• PHP
• PHP
  
• PHP: PHP マニュアル - Manual （公式）
  
• Zend Framework
• Zend Framework: Documentation: Zend Framework Manual （公式）
  
• PEAR
• Manual :: PEAR Manual （日本語の部分もあるが大部分は英語、またはソースを直読み。公式）
• CakePHP
• マニュアル :: 1.3コレクション （公式）
• Smarty
• Smarty 3：Smarty3 マニュアル | Smarty （公式）
• Smarty 2：Smarty マニュアル | Smarty （公式）
  
• Ruby
• Ruby
• 逆引きRuby - 逆引きRuby
  
• Rubyリファレンスマニュアル - Rubyリファレンスマニュアル （公式）
  
• Ruby on Rails
• Rails 3：Ruby on Rails Documentation （英語、公式）
• Rails 2：Ruby on Rails Documentation （英語、公式）
  
• Python
• Python
• Python 3：Overview — Python v3.1.3 documentation （英語、公式）
  
• Python 2：概要 — Python documentation （公式の和訳）
  
• Django
• Django 1.3：Django | Django documentation | Django documentation （英語、公式）
  
• Django 1.2：Django | Django documentation | Django documentation （英語、公式）
• Django 1.1：Django | Django documentation | Django documentation （英語、公式）
  
• Django 1.0：Django ドキュメント — Django v1.0 documentation （公式の和訳）
  
• Perl
• perldoc.jp （公式の和訳）
  
• Java
• 概要 (Java Platform SE 6) （公式）
  
• Objective-C
• Objective-C 2.0プログラミング言語 （公式）
  
• MySQL
• MySQL 5.5：MySQL :: MySQL 5.5 Reference Manual （英語、公式）
• MySQL 5.1：MySQL :: MySQL 5.1 リファレンスマニュアル （日本語だが一部は英語、公式）
  
• PostgreSQL
• PostgreSQL 9.0：PostgreSQL 9.0.3文書 （公式の和訳）
  
• バージョン別のリンク：PostgreSQL日本語ドキュメント（公式の和訳）
  

JavaScriptのマニュアルは他にも色々あり、使う人のレベルや用途によってどれが使いやすいかが変わってくると思うが、昔大変参考にさせて頂いた杜甫々版を挙げておいた。

Python、Perl、Objective-Cについては公式/準公式のリンクを書いたが、有志によるマニュアルでもっと良いものがあるのかもしれない。（これらの言語はあまり使わないので知らない。）