Web制作の現場で使えるjQuery　UIデザイン入門 ― 第2回

jQueryのダウンロードとインストールのチュートリアル (3/3)

Google AJAX Libraries APIによるjQueryの利用

　本文では、jQuery本体をダウンロードする方法を紹介しましたが、米グーグルのサービス「Google AJAX Libraries API」を使えばダウンロード不要でjQueryを利用できます。Google AJAX Libraries APIは、さまざまなJavaScriptライブラリーをグーグルのサーバーにホスティングし、Webページに直接読み込めるようにしたサービスです。jQuery以外にも、「jQuery UI」「Prototype」「script.aculo.us」「MooTools」「Dojo」「SWFObject」「Yahoo! User Interface Library（YUI）」などの主要なJavaScriptライブラリーに対応しています。

Google AJAX Libraries APIの公式サイト

　Google AJAX Libraries APIで提供されるライブラリーは、いずれも「gzip」と呼ばれる圧縮形式で圧縮されており、転送量を大幅に抑えているのが特徴です。jQueryの場合、Minified版の55.9 KBがgzip圧縮によって19KBにまで軽量化されています。

　また、ユーザーが過去にGoogle AJAX Libraries APIを使っているWebページを閲覧していればJSファイルがキャッシュされているため、たとえ自分のWebサイトに初めて訪れる場合でもページの表示速度が高速化されるメリットも期待できます。

　Google AJAX Libraries APIを利用するには、script要素でhttp://www.google.com/jsapi を読み込み、使用したいJavaScriptライブラリーとライブラリーのバージョンを指定します。たとえば、jQueryの1.3.2を読み込むときは以下のように記述します。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>

　google.loadを利用せず、src属性で直接ライブラリーを指定しても読む込めます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>

　以下のようにバージョン名の一部（マイナーバージョン）を省略すると、常に最新のバージョンを自動的に読み込んでくれます。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3");</script>

　この場合、1.3.xの最新バージョン――たとえば現在は1.3.2ですが、1.3.3がリリースされれば1.3.3が読み込まれるようになります。マイナーバージョンアップのほとんどがパフォーマンスの向上ですので、わざわざHTMLのscript要素を書き換えなくてもパフォーマンスの向上が望める、というわけです。

　ただし、マイナーバージョンアップにバグや仕様変更が含まれている場合、当然ですがそれらも自動的に反映されてしまいます。また、マイナーバージョンを指定した場合に比べてキャッシュの有効期間が短くなるため（バージョンを指定しない場合は1時間、指定した場合は1年間有効)、通常はマイナーバージョンを指定する方法をおすすめします。

◆

　今回はここまでです。次回は、いよいよjQueryのコードを実際に書きながら、基本的な文法をマスターしていきましょう。

著者：西畑一馬（にしはた かずま）

to-R代表、Webクリエイター。PHPによるシステム開発や、CMSを利用したWebサイト制作、SEO対策などのマーケティング、コンサルティング、Webクリエイター向けの講座などを業務で行なっている。また、ブログto-RではJavaScriptやSEO対策、CSS、Movable TypeなどのWEB制作にかかわる様々な情報を発信している。
主な著書に「現場のプロから学ぶXHTML+CSS」（共著、毎日コミュニケーションズ刊）がある。