Open Source Web Development Tutorials - Dev Shed

jQueryフレームワークとGoogleのAjaxライブラリAPIを併用する
（2009/03/02公開）

GoogleのAPIを利用してjQueryのソースファイルを保存する

　もうお分かりのように、前ページのGoogle APIを使用して作成したAjaxアプリケーションの再構築には、少し変更が必要だが、簡単に理解できると思う。ただし、それが正しいことを明確にする最良の方法は、関数コードを示すことだろう。それで、問題のAjaxアプリケーションの修正版を示すことにする。この修正版では、Google APIを利用してjQueryのソースファイルが提供される。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Reading file contents with jQuery library (uses Google API)</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #fff;
}
h1{
font: bold 18pt Arial, Helvetica, sans-serif;
color: #000;
}
#filecontents{
width: 600px;
padding: 10px;
border: 1px solid #999;
font: normal 10pt Arial, Helvetica, sans-serif;
color: #000;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
// load jQuery library with Google API
google.load("jquery", "1.2.3");
google.setOnLoadCallback(function(){
$("#btn").click(function(){
$.get("read_file.php",function(fileContents){$("#filecontents").html(fileContents);});
});
});
</script>
</head>
<body>
<h1 id="header">Reading file contents with jQuery library (uses Google API)</h1>
<p><input type="button" id="btn" value="Read File Now!" /></p>
<div id="filecontents"></div>
</body>
</html>

　上に示したように、このAjaxサンプルプログラムでは、Google APIを通じてパッケージをダウンロードしている。この手順は、PrototypeライブラリのサービスにこのAPIを使用した前回の例とほぼ同じだから、よくご存じのはずだ。

　この例では、google.setOnLoadCallback()を通じてアプリケーションの初期化を行っているだけでなく、バージョニング機能を使用して、クライアントにダウンロードするjQueryの正確なバージョンを指定している。

　ここまでは、すべてが順調だ。これで、Google API機能をjQueryフレームワークで活用する方法が学べた。Googleによって現在サポートされているJavaScriptスクリプトは、そのすべてがデフォルトで圧縮されているため、それぞれのダウンロード時間が短くて済む。

　ただし、Googleを通じてJavaScriptパッケージを配布する善しあしを評価する最良の方法は、実際に使用してみることだ。このチュートリアルに含まれているすべてのコードサンプルが、かなり役に立つと思う。

まとめ

　本連載の第2回では、GoogleのAjaxライブラリAPIを利用してjQueryライブラリを使用するAjax駆動型サンプルプログラムについて説明した。

　ただ、前にも説明したように、このAPIを通じてサービスが行われる各パッケージは、ブラウザに送られる前に圧縮される。それで、次回は、Prototypeフレームワークを使用するときに、この機能を無効にする方法について説明する。

　次回の内容を教えたからには、残念ながら読み逃したと言う口実は通じない。ぜひ、読んでほしい。

（編集部より：次回は、2009年3月9日に公開予定です）

（著者：Alejandro Gervasio）

【原文へのリンク】

前のページ 1 2 3 4