概要 出典:Initializr - Start an HTML5 Boilerplate project in 15 seconds! 先日開催された「CSS Nite in NIIGATA, Vol.3 with Microsoft」でせっかくHTML5の事を学んだので、実際に使ってみようと勉強を進めています。 このブログも実はPC版は形式上HTML5のページになって
20120518-Initalizr-jQuery-load-00

先日開催された「CSS Nite in NIIGATA, Vol.3 with Microsoft」でせっかくHTML5の事を学んだので、実際に使ってみようと勉強を進めています。


このブログも実はPC版は形式上HTML5のページになっているんです。
見た目はほとんど変わっていませんが…。


さて、CSS Niteのセミナーの中でHTML5のベースとなるテンプレートを一瞬で作ってくれる「Initializr」が紹介されていました。


このサイトでテンプレートを作ってみて、そのテンプレートを開いたらjQueryをロードする時の書き方でこれはナイスな書き方だと思ったものがあったので紹介します。

Initializrで提供されるjQueryのロードコード

20120406-jQueryのattrとprop-00

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のロードはどういう書き方をしていましたか?
ぜひ一度確認してみてくださいね!


それでは。



追記:2012年7月28日

jQueryのロードのフォールバックでHTML4やXHTML1.0準拠の書き方を考えてみた」という記事を書きました。

●こんな記事も読まれています



ブログ著者

笹川純一・jdash2000

名前:(Google+のプロフィール)

ケータイ好き。ガジェットが好きでiPhoneやらAndroidなどを所有。Surface Pro 2も持っている。

お仕事は印刷会社で営業・広報活動・DTPオペなどをしています。要は何でも屋さんです。最近は印刷関連より、自社のウェブサイトを制作するお仕事がほとんど。使用しているCMSはMovable Type。

ブログ著者について


コメントをどうぞ


サイト内検索