Open Source Web Development Tutorials - Dev Shed

Google AjaxライブラリAPIを使おう
（2009/02/23公開）

GoogleのJavaScriptライブラリAPIを使用する

　前のページで、簡単なテキストファイルの内容を読み取って、スクリーンに内容を表示するのに必要なロジックを実装するために、Prototypeライブラリのローカルコピーを使用する、簡単なAjaxベースのアプリケーションの作成方法を学んだ。

　ただ、最初のところで説明したように、GoogleのJavaScriptライブラリAPIを使用して、GoogleのサーバーからPrototypeフレームワークを直接ダウンロードすることにより、同じAjaxアプリケーションを実現することもできる。

　それが簡単にできることを知るために、前に説明したAjaxプログラムの、Google API使用バージョンを下に示してあるので、ちょっと見てほしい。

<!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 Prototype 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 Prototype library with Google API
google.load("prototype", "1.4");
// read file contents with Ajax
function readFileContents(){
// send http request
var ajaxobj=new Ajax.Request('read_file.php',{method: 'get',onComplete: displayFileContents,onFailure: displayError});
}
// display file contents
function displayFileContents(requestObj){
$('filecontents').innerHTML=requestObj.responseText;
}
// display error message
function displayError(requestObj){
$('filecontents').innerHTML='Error reading file contents!';
}
// initialize file reading application
function initializeApplication(){
// attach click handler to HTML button
Event.observe('btn','click',readFileContents);
}
google.setOnLoadCallback(initializeApplication);
</script>
</head>
<body>
<h1>Reading File Contents with Prototype library (uses Google API)</h1>
<p><input type="button" id="btn" value="Read File Now!" /></p>
<div id="filecontents"></div>
</body>
</html>

　実際、上の例は非常に簡単に理解できる。この場合、2つの点に注目するとよい。まず、ライブラリのサービスがhttp://www.google.com/jsapiのURLから提供され、次に、問題のライブラリがgoogle.load()メソッドを使用してロードされていることである。もちろん、このメソッドは、このGoogle APIに含まれている。

　最後に、このWebドキュメントが完全にロードされたら、まったく新しいメソッドsetOnLoadCallback()を使用して、このプログラムの最初の関数を呼び出している。簡単だよね？

　これで、Google提供のAPIを使用して、必要なJavaScriptライブラリのサービスを行うことが、いかに簡単か理解できたと思う。もちろん、読者が筆者と同類ならば、このアプローチを使用することにより何かメリットはあるのかと思うかもしれない。Googleのサーバーから必要なフレームワークのソースファイルがダウンロードされるので、負荷の大きな単一のマシンを使用するよりも「結局は」短時間でファイルを配布できるだろう。

　GoogleのJavaScriptライブラリAPIを使用する場合の是非に関係なく、インターフェースが極めて簡単になることは確かだ。ただ、お気付きのように、前の例では、Prototypeライブラリのバージョン1.4を使用するように指定してある。これは、Google APIのコンテキスト内では「バージョニング」とよばれる機能で、当然だが、所定のライブラリのどのバージョンの提供されるかを指定することができる。したがって、このチュートリアルの最後のページでは、この便利な機能を活用してPrototypeの別のバージョンを使用する方法を説明する。

　そのための方法を知るには、次のページに進んで、読み進めてほしい。