このページの本文へ

前へ 1 2 3 次へ

  • はてなブックマークに登録
  • 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ディレクター江口明日香が行く

お買い得・バーゲン品情報

Norton Internet Security 2011

Norton Internet Security 2011

シマンテック

5765円~

30%OFF!!

Microsoft Office Professional Academic 2010

Microsoft Office Professional A…

マイクロソフト

2万2989円~

23%OFF!!

Microsoft Office Home and Business 2010

Microsoft Office Home and Busin…

マイクロソフト

2万8167円~

23%OFF!!

Microsoft Office Personal 2010 アップグレード優待

Microsoft Office Personal 2010 …

マイクロソフト

1万2220円~

26%OFF!!

Microsoft Office PowerPoint 2010

Microsoft Office PowerPoint 2010

マイクロソフト

1万1980円~

23%OFF!!

ESET Smart Security V4.2

ESET Smart Security V4.2

キヤノンITソリューションズ

5471円~

23%OFF!!

Microsoft Office Home and Business 2010 アップグレード優待

Microsoft Office Home and Busin…

マイクロソフト

2万289円~

23%OFF!!

Microsoft Office Personal 2010

Microsoft Office Personal 2010

マイクロソフト

2万4145円~

23%OFF!!

ウイルスバスター2011 クラウド 1年版

ウイルスバスター2011 クラウド 1年版

トレンドマイクロ

5180円~

35%OFF!!

Amazon.co.jp