Open Source Web Development Tutorials - Dev Shed

GoogleのAjaxライブラリAPIでgoogle.load()メソッドを使用する
（2009/03/16公開）

復習－ソースファイルを圧縮せずに、Prototype JavaScriptライブラリを配布する

　Google APIを通じて、圧縮を使用せずにjQueryパッケージのサービスを行う方法の説明を、これまでに作成した実例を再掲することから始めようと思う。これは、同じプロセスをPrototypeライブラリで使用して示したものだ。

　この例では、サーバー内のテキストファイルの内容を読み取ってブラウザに表示できる、簡単なAjaxアプリケーションの作成方法を示した。前にも言ったように、この仕事はPrototypeによって実行され、そのソースファイルのサービスは圧縮せずに行われる。

　さて、元のAjaxアプリケーションは、次のようなものだった。

(definition for 'ajax_file_reader.htm' file)

<!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 (loads uncompressed source file)
google.load("prototype", "1.4",{uncompressed:true});
// 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>

(definition for 'read_file.php' file)

<?php
if(!$contents=file_get_contents('data.txt')){
trigger_error('Error reading file contents',E_USER_ERROR);
}
echo $contents;
?>

(definition for 'data.txt' file)

These are contents of sample file. These are contents of sample file.
These are contents of sample file. These are contents of sample file.
These are contents of sample file. These are contents of sample file.
These are contents of sample file. These are contents of sample file.
These are contents of sample file. These are contents of sample file.
These are contents of sample file. These are contents of sample file.
These are contents of sample file. These are contents of sample file.
These are contents of sample file. These are contents of sample file.
These are contents of sample file. These are contents of sample file.
These are contents of sample file. These are contents of sample file.
These are contents of sample file. These are contents of sample file.
These are contents of sample file. These are contents of sample file.
These are contents of sample file. These are contents of sample file.

　このAjaxプログラムについては、このシリーズの前のチュートリアルで詳細に説明したから、ここでは詳細な説明は省略する。ただ、google.load()メソッドに、Prototypeライブラリを圧縮しないでダウンロードするように指示する方法を思い出してほしい。

　次のコードを見れば、そのプロセスを思い出せるだろう。

google.load("prototype", "1.4",{uncompressed:true});

　Google APIを通じてPrototypeパッケージを圧縮せずに配布する方法が思い出せたと思うので、このプロセスをjQueryライブラリを使用して作成する方法を見てみよう。

　それを達成する方法を詳細に知るには、下のリンクをクリックして、先を読んでほしい。