概要 ▶ 出典：Initializr - Start an HTML5 Boilerplate project in 15 seconds!先日開催された「CSS Nite in NIIGATA, Vol.3 with Microsoft」でせっかくHTML5の事を学んだので、実際に使ってみようと勉強を進めています。このブログも実はPC版は形式上HTML5のページになっているんです。見た目はほとんど変わって
先日開催された「CSS Nite in NIIGATA, Vol.3 with Microsoft」でせっかくHTML5の事を学んだので、実際に使ってみようと勉強を進めています。
このブログも実はPC版は形式上HTML5のページになっているんです。
見た目はほとんど変わっていませんが…。
さて、CSS Niteのセミナーの中でHTML5のベースとなるテンプレートを一瞬で作ってくれる「Initializr」が紹介されていました。
このサイトでテンプレートを作ってみて、そのテンプレートを開いたらjQueryをロードする時の書き方でこれはナイスな書き方だと思ったものがあったので紹介します。
Initializrで提供されるjQueryのロードコード
Initializrが書き出すjQueryのロードコードは以下の書き方です。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>
私が良いと思ったのは2行目の書き方です。
1行目について - <script src="//ajax.googleapis.com/ …
1行目のGoogleのCDN（Contents Delivery Network）からjQueryをロードする書き方はご存じの方も多いと思います。CDNを利用することでブラウザーのキャッシュが効きロード時間の短縮が期待されます。
また、最近は「src="http://"」とは書かないで、プロトコルを省略して「src="//」と書く場合も多いですね。
この書き方をしておくと読み出されるページのプロトコルが「http」なのか「https」なのかを考えなくても良いので便利です。
「Google HTML/CSS Style Guide」でも推奨されている書き方です。
Protocol
Omit the protocol from embedded resources.
Omit the protocol portion (http:, https:) from URLs pointing to images and other media files, style sheets, and scripts unless the respective files are not available over both protocols.
Omitting the protocol―which makes the URL relative―prevents mixed content issues and results in minor file size savings.
Google HTML/CSS Style Guide
2行目について - <script>window.jQuery || document.write …
Firebugのコンソールで「window.jQuery」と入力して実行すればわかりますが、jQueryがロードされていれば「function()」が返ってきて、jQueryがロードされていなかったら「undefined」が返ってきます。これを利用して2行目では、何らかの事情でCDNからjQueryが読み出せなかった場合に自分のサーバーにアップしてあるjQueryをロードするようにしています。
これはナイスな書き方ですね。
何も考えなかったらCDNが落ちることを想定せずに1行目だけを書いて終わりだと思います。
かなり多くの方がその書き方なのではないでしょうか。
しかしCDNとて何が発生するかはわかりません。
CSS Niteで鷹野さんが仰っていましたが、フォールバックをキチンとしておくことが大事ですね。
（CSS NiteではCSSのフォールバックの話でした）
皆さんのページのjQueryのロードはどういう書き方をしていましたか？
ぜひ一度確認してみてくださいね！
それでは。