Movable Type 備忘録

The AJAX Libraries API

Aug102008
Author: bzbell
Categories: Tools
Tags: prototype, The AJAX Libraries API, Tools

Prev Page: blog chart.jp
Next Page: My Sparkling Text

こんにちわ^^

Google から提供されている AJAX Libraries API ってのを使ってみました。

AJAX Libraries API

ご存知のように prototype や jQuery などの JavaScript ライブラリはページが表示される時にロードされますね。
実際に使ってみたかんじは Good でした (●＞∀＜●)／

わたしのサイトで使用してるライブラリは prototype ですが、prototype.js 1.6.0.2 と script.aculo.us.js 1.8.1 を圧縮／最適化して 1 つのファイルにまとめたものを使用してます。なので、1 回のロードで 2 つのライブラリがロードされることになります。
以下にローカルの prototype ロード時と、Google の prototype & script.aculo.us ロード時にかかった時間を記します。

ローカルにある prototype をロードした場合

prototype.js をロードするのに 2.8 秒かかってる。
Google / The AJAX Libraries API からロードした場合

Google から prototype.js( 0.3 秒 )と scriptaculous.js( 0.1 秒 )をロードするのに 0.4 秒かかってる。

以上のことから、サイズ的にも更に圧縮されてる Google の The AJAX Libraries API を利用することに決めました (●´∀｀●)

サポートしてるライブラリ

現時点( 2008.08.10 )でサポートしてるライブラリは以下の通りです。

jQuery
jQuery UI
prototype
script.aculo.us
mootools
dojo

The AJAX Libraries API のメリット

The AJAX Libraries API を利用するメリットを以下に記します。

キャッシュ機能が備わっているそうです。
たとえば、トップページで一度ロードさえしちゃえば、エントリページではキャッシュを利用することで再度 JavaScript ライブラリをロードする必要がなくなるみたいです。
ワイルドカードを使用することで手軽にライブラリのバージョンを利用できます。
たとえば、prototype 1.6.0 という指定をすると、1.6.0.2 とか 1.6.0.x というように自動的に最新版を適用することが可能なようです。もちろん、1.6.0.2 と指定することで特定のバージョンをロードすることも可能です。
極力最小化されてるようです。
わたしが今まで使ってた prototype のように、肥大化した各ライブラリは極力最小化されて転送されるようです。ロードするサイズが小さければ、それだけ表示速度が早くなるという理屈です (￣∇￣)b 一概には言えないけどね。

The AJAX Libraries API の使い方

使い方はカンタンです。
サポートされてる、任意のライブラリをフルパス( URL )で指定してロードするか、API を使ってロードするかの 2 通りになります。

フルパス( URL )指定

HTML ヘッダ内に以下のように URL を指定してロードします。
1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>
2. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.1/scriptaculous.js"></script>
青字の部分には利用したいライブラリ名称を指定します。
赤字の部分には利用したいライブラリのバージョン番号を指定します。
API を使う

HTML ヘッダ内に以下のように google.load() という API を使って任意のライブラリをロードします。
1. <script type="text/javascript" src="http://www.google.com/jsapi"></script>
2. <script type="text/javascript">
3. google.load("prototype", "1.6.0.2");
4. google.load("scriptaculous", "1.8.1");
5. </script>
青字の部分には利用したいライブラリ名称を、赤字の部分にはライブラリのバージョン番号を指定します。
その際、緑字の 1 行を必ず記述することを忘れずに (￣∇￣)b