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

cronでエラー時にメールを送信するサンプル

1. 標準出力とエラー出力の両方をログに記録しつつ、エラー出力がある場合はその内容をメールする場合

MAILTO=foo@example.com

* * * * * (php test.php 1>>test.log) 2>&1 | tee -a error.log

teeで -a オプションを付けてerror.logに追記するようにしている。
test.logとerror.logは同じファイルでもOK。

エラー出力もログに残したいけど、何らかのエラーが出た時にメールさせたい場合に使う。

2. コマンドの戻り値が0でない場合のみ、ログの最後の方をメールする場合

MAILTO=foo@example.com

* * * * * php test.php 1>>test.log 2>>error.log || tail error.log

test.logとerror.logが同じでよいなら、2>&1にすればよい。
メールに出力するのはtailじゃなくてもよい。
異常じゃなくてもエラー出力を出すような処理の場合はこちらで。

小さな会社のITインフラを低予算で揃える方法を妄想してみた

もし小さな会社のITインフラを最低予算で用意するなら...

• メール、カレンダー共有、ファイル共有、ドキュメント共有 → Google Apps
• ファイル共有は普通に考えたらファイルサーバを立てるんだけど、思い切ってクラウドで。Dropboxと迷うところこだけど、どうせGoogle Appsを使うなら挑戦的にGoogle Driveで。検索に強そうでしょ？（漢ならS3直で！というのも香しいが...）
• ドキュメント共有はGoogle Docsを使い社内用のメモ程度のものを想定。社外とのやりとりは、結局ExcelやWordが中心になるだろうから。Goolgeスプレッドシートが使い物になればなあ...。
• Webサイト → Blogger
• 静的ページを組み合わせて「ホームページ」風にする。
• ブログ部分は新着情報的に使う。
• 会社所在地を載せるならGoogle Maps埋め込みで。
• お問合せフォーム → Google App Engineでチャチャッと作る
• 入力されたらメールを飛ばす。
• Google App Engineはhttpsで使えるのが便利。
• 本当に簡単に済ませるなら、お問合せ用メールアドレス載せとくだけという手もある。
• ドメイン
• Webサイトを www.xxxxx.com にして、 お問合せフォームを ssl.xxxxx.comにする感じかな。あるいはWebサイトを xxxxx.com にして、お問合せフォームを q.xxxxx.com とか？（人力検索っぽい！）
• タスク管理 → Backlog
• Redmineの方がいろいろカスタマイズはできるけど、非開発者にフレンドリーなBacklogが無難かな。
• Backlogいつの間にかGitに対応してる！
• Backlogにもファイル共有あるんだ...有料版使うならこっちのファイル共有を使うという手もあるか。
• 何かでサーバが必要になったら → Amazon EC2
• 定期的にS3にバックアップをとる。

 これなら社内にサーバが要らない。出先でも普通に仕事が出来る。外出が多いなら、いっそ事務所には固定回線無しで、イーモバイルのみというのもいいかもね。

他にも思いついたら足してく（かも）。

20年前の人がスマホを見たら？

もし20年前の人にスマホの説明をすると、手のひらサイズの大きさに、

• UNIX系コンピュータ
• タッチパネルのディスプレイ
• 無線の電話
• 無線LAN
• カメラ
• ビデオカメラ
• テレビ
• ウォークマン的なもの ステレオコンポ（イヤホン無しでも聴けるので訂正）
• GPS
• 電子マネー

が全て詰め込まれていると説明するのかな。

当時の人が空想する秘密兵器的スーパーアイテムより進んでる気がする。