Open Source Web Development Tutorials - Dev Shed

GoogleのAjaxライブラリAPIの利用時にソースファイルを圧縮しない
（2009/03/09公開）

アプリケーションのモジュールを組み立てる

　前回のAjaxアプリケーションがどのように動作するかをテストしたい場合、圧縮を使用しないでPrototypeの依存関係をダウンロードするためには、下にその完全なコードを示してあるが、テキストファイルからその内容をフェッチしてクライアントに送り返すPHPファイルを含める必要がある。

(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()メソッドを使って自由に遊んでみてほしい。「圧縮あり」および「圧縮なし」のオプションを使用して実際にプログラムを実行してみると、これらのオプションが総合的なパフォーマンスにどのような影響を与えるかを正確に評価することができる。

まとめ

　この連載の第3回で、Google APIを利用して、指定したJavaScriptライブラリのサービスを、圧縮を使用せずに行う方法を説明した。実に、このプロセスは困難なものでは全くなかった。つまり、その使用方法を理解するのに大きな問題はなかったと思う。

　次の最終回では、GoogleのAjaxライブラリAPIを利用して、ソースファイルを圧縮せずにjQuery ライブラリのサービスを行う方法を説明する。このシリーズの最終回の内容をお知らせしたからには、ぜひ見逃さないでほしい！

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

（著者：Alejandro Gervasio）

【原文へのリンク】

前のページ 1 2 3 4