Google AJAX Libraries API の使い方

2010年8月14日

世に出まわっている様々なAJAX(エイジャックス、アジャックス)用の便利なライブラリを、当該サイトでダウンロードしてそれを自社サーバーにアップロードすることなく、グーグルのサーバーからライブラリを直接呼び出して利用する方法について。

早い話が、グーグルが Google AJAX Libraries API として、グーグルのサーバーから自由に使えるように公開してくれているのを利用しようというものです。

現時点で提供されている Google AJAX Libraries API
  • Chrome Frame
  • Dojo
  • Ext Core
  • jQuery
  • jQuery UI
  • MooTools
  • Prototype
  • script_aculo_us
  • SWFObject
  • Yahoo! User Interface Library (YUI)
  • WebFont Loader

【利点】
  • 一度ダウンロードしたライブラリ(どこのサイトからでもOK)はブラウザーにキャッシュされ、次回以降高速に機能する。
  • 使用するバージョンに対してワイルドカード指定ができるため、マイナーアップデートなどはグーグルに任かせておける。

【難点】
  • いわゆるフルパス指定になるため、オフラインで機能しない。(制作者サイド)

Google AJAX Libraries API を使うための準備


1.グーグルアカウントを取得
グーグルが提供するすべてのサービスに共通するグーグルアカウントを取得して、サービスにログインする必要があります。

  ▶ Google アカウント

2.Google AJAX Feed API への登録ページで、
  Google API キーを取得
Google AJAX Libraries API を利用するために、利用するウェブサイトのURLを入力し、「APIキーを生成」ボタンを押します。
Google API キーのコードが書かれてページが表示されるので、その Google API キーのコードをコピペかメモる。
(使用するウェブサイトのURLには、wwwといったサブドメインを書かないほうが無難。サブドメイン名を書かないと、全てのサブドメインに対して有効になる。)

  ▶ Google AJAX Feed API への登録

Google AJAX Libraries API の記述方法


Google AJAX Libraries API を呼び出すための記述方法は2つあります。(カギ括弧<>とコロン:は、全角<>:にしています

1.HTMLファイル内にインラインで記述
〈例〉
<meta http-equiv="content-script-type" content="text/javascript" />
<script src="http://www.google.com/jsapi/?key=グーグル API キー" type="text/javascript"></script>
<script type='text/javascript'>google.load('jquery', '1.4.2');</script>

2.HTMLファイル内で直接取得、さらに外部ファイル化
〈例:直接取得〉
<meta http-equiv="content-script-type" content="text/javascript" />
<script src="http://www.google.com/jsapi/?key=グーグル API キー" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

〈例:外部ファイル化〉
document.write('<script src="http://www.google.com/jsapi/?key=グーグル API キー" type="text/javascript"></script>');
document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>');

Google AJAX Libraries API の記述方法:ワイルドカード


〈例〉
1.
<script type='text/javascript'>google.load('jquery', '1');</script>

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

既出の例で、1.4.2とバージョン指定するところを、1と記述することで、バージョン1.9.9(=2未満)までのバージョンの中の最新バージョンを呼び出すことができます。

Google AJAX Libraries API の最新バージョン


以下のページで、提供されているライブラリの種類と最新バージョンを確認できます。

  ▶ Google Libraries API - Developer's Guide(英語)

フルパス指定する際は、“path(u)” ではなく、 “path” を使用すること。

ちなみに、“path(u)” はuncompressed(非圧縮)ファイルで、
“path” の方は、compressed(圧縮)や minified(最小化)がはかられたファイルです。


uncompressed(非圧縮)や minified(最小化)については、
次のホームページが参考になりました。

  ▶「jQuery 開発者向けメモ - 基本・サンプル

圧縮をしておらず,開発時の状態のままの Uncompressed 版と, 圧縮を行った Packed 版と Minified 版があります.
通常は Minified版かPacked版を使うと良いと思いますが, 開発中はデバッグがやりにくくなるため,Uncompressed版を利用することをおすすめします.
Minified版とPacked版の違いは,MinifiedはJavaScriptの文自体はそのままに,空白を詰めたものです. Packed版は,ソースコードを圧縮し,ロード後にJavaScriptで圧縮されたjQueryコードを解凍し,実行することで更に小さくしたものです. ファイルサイズはPacked版の方が小さいですが,クライアント側でJavaScriptの解凍処理が走るので,クライアントPCへの負担は大きくなります.



ラベル: ,



▲このページの先頭へ