このページの本文へ

前へ 1 2 3 次へ

  • twitterでつぶやく
  • はてなブックマークに登録
  • del.icio.usに登録
  • livedoorクリップに登録
  • Buzzurlに登録
  • StumbleUponに登録
  • Google Bookmarksに登録
  • Facebookでシェア
  • Yahoo!ブックマークに登録
  • お気に入りに登録
  • 本文印刷

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

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

2009年07月22日 14時54分更新

文● 西畑一馬/to-R

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の公式サイト

 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」(共著、毎日コミュニケーションズ刊)がある。

前へ 1 2 3 次へ

カテゴリートップへ

この連載の記事

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く

みんなが買ってる最新アイテムはコレだ!

VOCALOID3 スターターIA ARIA ON THE PLANETES

VOCALOID3 スターターIA ARIA ON THE PLANETES

ヤマハ

17,745円〜

24人が購入

標準HTML5タグリファレンス (WEB PROFESSIONAL)

標準HTML5タグリファレンス (WEB PROFESSIONAL)

アスキー・メディアワークス

2,205円〜

106人が購入

Google上位表示 64の法則 (WEB PROFESSIONAL)

Google上位表示 64の法則 (WEB PROFESSIONAL)

アスキー・メディアワークス

2,499円〜

66人が購入

Speck MacBook Air 13型 See Thru - Clear SPK-MBA13-SEE-CLR

Speck MacBook Air 13型 See Thru - Clear SPK-MBA13-SEE-CLR

スペックコンピュータ

4,291円〜

23人が購入

メモリーカード 32GB (PCH-Z321J)

メモリーカード 32GB (PCH-Z321J)

ソニー・コンピュータエンタテインメント

7,772円〜

11人が購入

iPhone 4S/4 防指紋性・高光沢機能性フィルム PRO GUARD AF for iPhone 4S/4 / PGAF-IPH4

iPhone 4S/4 防指紋性・高光沢機能性フィルム PRO GUARD AF for iPhone 4S/4 / PGAF-IPH4

マイクロソリューション Micro Solution Inc.

69人が購入

Amazon.co.jp