Project Zero、WebSphere sMash、そして PHP を使い始める

Zero と PHP を使って Ajax Web 2.0 サンプルを開発するための簡単な演習

Project Zero は、PHP などのよく使われる Web 技術をベースとした対話型 Web アプリケーションを迅速に開発するための環境を提供します。この演習では、開発ツールのインストールから PHP をバックエンドのスクリプト言語として使った Ajax Web 2.0 サンプルの作成に至るまで、Project Zero がいかに簡単に使い始められるプロジェクトであるかを実証します。説明のなかでは、アプリケーションのエクスポート方法と併せ、Web 2.0 アプリケーションを拡張する例も紹介します。

Ed Slattery (slattery@uk.ibm.com), Advisory Software Engineer, IBM

Ed Slattery photoEd Slattery は昨年、PHP チームの一員として P8 ランタイム用のパーサーおよびスキャナーを開発しました。



Judy Taylor (judy_taylor@uk.ibm.com), Software Engineer, IBM

Judy TaylorJudy Taylor は PHP チームのオープンソース・ソフトウェア・スペシャリストで、ソフトウェア・テスト分野で豊富な経験があります。



2008年 9月 29日 (初版 2007年 8月 21日)

編集者からの注記: IBM® WebSphere® sMash および IBM WebSphere sMash Developer Edition は、非常に高い評価を受けた Project Zero のインキュベーター・プロジェクトをベースにしています。Project Zero は WebSphere sMash の開発コミュニティーであり、最新のビルドや、最新の機能、そしてコミュニティーのサポートを利用したアプリケーションを開発するための無料のプラットフォームを今後も提供していきます。

始める前に

まずは Project Zero の Web サイトをよく読んで、このプロジェクトをよく理解してください。このサイトでは、Project Zero コミュニティーに参加してこのプロジェクトに貢献したり、ディスカッション・フォーラムに加わって開発の各段階でプロジェクトについてコメントしたりすることができます。この記事で前提としているのは、お使いのマシンに適切な JDK (Java™ Development Kit) がインストールされていることのみです。また、PHP と JavaScript の概念についても十分に理解している必要があります。

Project Zero の概要

Project Zero は対話型 Web アプリケーションを素早く簡単に開発するための環境を提供します。このプロジェクトの目的は、Web デプロイメントのための完全なインフラストラクチャーを提供することによって、アプリケーション開発者がビジネス・ロジックに専念できるようにすることです。Project Zero がいかに簡単に使い始められるプロジェクトであるかを示すため、この記事の演習では空のディレクトリーから始めて、必要なすべての開発ツールをインストールし、PHP をバックエンドのスクリプト言語として用いて Ajax Web 2.0 サンプルを開発する手順を説明します。この演習で開発環境として使用するのはEclipse です。

この演習を最後まで終えるには記事の手順に従うだけで十分ですが、PHP 版 Project Zero をダウンロードしてインストールする完全な手順を参照したい場合は、Project Zero のサイト (「参考文献」を参照) に記載されています。

PHP 版 Project Zero をインストールする

演習を開始するために、以下に記載するステップに従って PHP 版 Project Zero をインストールしてください。

  1. 空のディレクトリー (例えば、zero_example) を新規に作成します。
  2. Eclipseで開発するための PHP 対応の完全な開発環境をダウンロードします (「参考文献」のリンクを参照)。
    注: ダウンロード・ページからは、ビルド・ページを選択する必要があります (この演習では安定したビルドである S20070910-RC1 を選択していますが、ビルドは変更されている可能性があるので最新の安定ビルドを選択してください)。
    重要: 以前のバージョン (S20070611-M1 など) は、Project Zero の現行リリースでは動作しません。お使いのオペレーティング・システムに関連する All-in-One の PDT の .zip ファイル (pdt-all-in-one-<release_name>-win32.zip など) をダウンロードして、zero_example ディレクトリーに解凍してください。例えば Eclipse をお使いの場合、zero_example/<pdt_release_name>/eclipse のようなディレクトリーが作成されます。

これで開発環境はセットアップできました。次は Project Zero で PHP による開発を可能にするための Eclipse プラグインをインストールします。その手順は、以下のとおりです。

  1. zero_example/eclipse ディレクトリーに配置されている eclipse.exe を実行します。新規ワークスペース名の入力を求められたら、zero_example/workspace などの名前を指定します。
  2. メニューから、Help > Software Updates > Find and Install... を選択します。
  3. 上記の操作によって表示されたダイアログでは、Search for new features to install を選択して Next をクリックします。

これで、ソフトウェア更新の検索先とする新しいリモート・サイトを追加できるようになります。

  1. New remote site をクリックし、それによって表示されたダイアログで、新規サイトの名前として例えば Project Zero と入力します。
  2. 新規リモート・サイトに http://www.projectzero.org/update/zero.eclipse.php.latest という名前を割り当てます。
  3. OK をクリックし、元のダイアログで Finish をクリックします。
  4. 検索結果ダイアログのツリーで Project Zero 要素全体を選択し、Next をクリックします。
  5. 使用許諾契約に同意して Next をクリックします。
  6. Finish をクリックし、次に Install All をクリックします。

PHP 版 Project Zero 環境のインストールは、これで完了です。Eclipse の再起動が要求されるので、それに応じて Eclipse を再起動すると、この環境を使用できるようになります。いよいよ、単純な PHP アプリケーションの作成に取り掛かる段階になりました。

アプリケーション 1 の開発: MyFirstProject

初めてのアプリケーションを開発する際の最初のステップは、Eclipse で新しい Zero プロジェクトを作成することです。以下の手順に従ってください。

  1. File > New > Project... を選択し、表示されたダイアログで Project Zero を展開します (図 1 を参照)。
  2. Project Zero PHP Application を選択して Next をクリックします。
  3. プロジェクトの名前 (例えば、MyFirstProject) を入力し、Finish をクリックします。これで、プロジェクトが作成されます。
図 1. Project Zero カテゴリー
Project Zero カテゴリー

先ほど、Project Zero PHP Application を選択したので、Zero は PHP が使用されるということを認識し、プロジェクトの config ディレクトリーに適切な php.ini ファイルを配置します。リスト 1 は、この INI ファイルの内容の抜粋です。リスト 1 に記載した行によって、PHP に Zero 拡張機能がロードされるようになります。

リスト 1. Project Zero PHP 拡張機能
extension = zero.php.ZeroExtension
extension = zero.php.JSONExtension
extension = zero.php.LoginServiceExtension
extension = zero.php.ACFExtension
extension = zero.data.php.QueryExtension
extension = zero.php.XMLExtension
extension = zero.php.NetworkExtension
extension = zero.php.URIUtilsExtension

また、Zero は必要な PHP 依存関係を ivy.xml ファイルに追加しています。ナビゲーターでこの ivy.xml ファイルをダブルクリックすると、リストのなかに zero.php 依存関係があるのを確認できるはずです (今後の参考として、Add をクリックすると追加可能なその他のモジュールのリストを確認することができます)。

Zero で PHP を使用するための設定、そして PHP で Zero 拡張機能を有効にするための設定が済んだので、Zero ランタイムは P8 エンジンを呼び出して Web アプリケーションから受信したデータを処理できるようになりました。 PHP は Zero PHP 拡張機能のサービスを使用して Zero グローバル・コンテキストにアクセスすることができます。

グローバル・コンテキストは、Zero 開発の鍵の 1 つです。グローバル・コンテキストには、サーバーがクライアントから必要とするすべてのものを配置することができます (詳細については、Zero ドキュメンテーションの中核となっている Developer's Guide を参照してください。リンクは「参考文献」に記載されています)。

このプロセスの次のステップでは、クライアント・サイドでデータを入力し、サーバー・サイドでそのデータを PHP スクリプトを使って読み取る単純な PHP アプリケーションを作成します。

PHP アプリケーションの作成

アプリケーションの作成に取り掛かる前に、ウィンドウの右上隅に表示された名前をチェックして、PHP パースペクティブで開発を行っていることを確認してください。PHP パースペクティブになっていない場合は、ウィンドウ右上隅にある + の記号が付いたアイコンをクリックしてパースペクティブを切り替えます。

パースペクティブの確認が済んだら、以下のステップに従ってアプリケーションの作成を開始します。

  1. MyFirstProject ディレクトリーを展開します。
  2. public ディレクトリーを右クリックして、MyFirstForm.php という名前の新しい PHP ファイルを作成します。リスト 2 に記載したコードをフォームにコピーしてデフォルト PHP タグを上書きし、ファイルを保存します。
リスト 2. 単純なフォーム
<!--Input form with one field and a button-->
<html>
<head>
   <title>My First Form</title>
</head>
<body>
   <form name="input" action="/action.php" method="POST">
      <input type="text" name="item">
      <input type="submit" name="action" value="Post a message">
   </form>   
</body>
</html>

注: ファイル拡張子は .php ですが、実際には PHP は含まれていません。これは単なる HTML であるため、拡張子が .html でも同じく機能します。このフォームに PHP スクリプトを含めることも可能ですが、この手順では action.php という別のフォームを作成して POST された内容を処理します。form action='action.php' というコードの行によって、どのスクリプトでアクションを処理するかをサーバーに対して指示していることに注意してください。

次に、action.php という名前の 2 つ目の PHP ファイルを public ディレクトリーに作成し、リスト 3 のコードをペーストしてファイルを保存します。

リスト 3. 単純な PHP バックエンド
<html>
<body>
<b>Processing your entry</b>
<?php

$method = zget('/request/method');
echo "<p>The request was a $method</p>";

$keys = zlist('/request/params', true);

echo "<p>Here is the data:</p>";

echo "<table cellspacing='0' cellpadding='0' border='1' >";
echo "<tr><td>Key</td><td>Values</td></tr>";

for ($i=0;$i<count($keys);$i++) {
  echo  "<tr><td>$keys[$i]</td>";
  echo "<td>";
  $value = zget($keys[$i]);
  if (is_array($value)) {
  	 for ($j=0;$j<count($value);$j++) {
  	 	echo "$value[$j] ";
  	 }
  } else {
  	echo "$value";	
  }
  echo "</td>";
  echo "</tr>";
}

echo "</table>";
?>
</body>
</html>

リスト 3 のコードには、HTML および PHP コードが混在しています。PHP コードは HTML も出力しますが、使用する値は元のフォームから入力されたものです。このフォームでは、以下の行が Project Zero の部分に該当します。

リスト 4. グローバル・コンテキストからの項目の取得
$method = zget('/request/method');
$keys = zlist('/request/params', true);
...
$value = zget($keys[$i]);

リスト 4 の 1 行目で使用されている zget() は Zero ランタイムの一部です。Zero 拡張機能を php.ini ファイルに追加したことによって PHP に組み込まれたこのメソッドは、グローバル・コンテキストから値のみを 1 つ取得します。2 行目で使用されている zlist() では、グローバル・コンテキストのエントリーはキーと値のペアになります。上記では「/request/params」を対象とする場合です。このリストの 3 行目を含むループは、受け取ったキーを使用して対応する値を取得し、その値を配列またはストリングとして出力します。

PHP アプリケーションの実行

以上の 2 つのフォームを併せると、完全な Zero サンプル・アプリケーションになります。Eclipse でプロジェクト名を右クリックして Run as > Project Zero Application を選択してください。すると、Web サーバーがローカル・ホストのポート 8080 で起動します。ブラウザーで http://localhost:8080/MyFirstForm.php にアクセスすると、入力フォームが表示されるはずです。この入力フォームに例えば This is my zero project と入力してボタンをクリックすると、入力したデータを掲載した表を含む出力フォームが表示されます (図 2 を参照)。

図 2. サンプル出力
サンプル出力

入力フォームに戻って別のデータを入力するには、ブラウザーの戻るボタンをクリックします。データを入力して post a message ボタンをもう一度クリックすると、今度はそのデータが表示されます。アプリケーションの実行を停止するには、コンソール・ウィンドウにある赤い四角形をクリックします。

Project Zero を理解する鍵となるのは、グローバル・コンテキスト (get() メソッドが検索する場所) でクエリーを実行して設定できるデータ要素がどれなのか、そして data zero などの他のプラグインを使用してデータの保存と取得をデータベースに対して行う方法を知ることです。

アプリケーションのエクスポート

.zip ファイルが Eclipse で表示されない理由

.zip ファイルはディスクには書き込まれますが、Eclipse によって生成された成果物ではないため、Eclipse に .zip ファイルの存在が登録されるまでは、このファイルは表示されません。プロジェクト名を右クリックして Refresh を選択してください。

プロジェクトをエクスポートするには、コンソール・タブの上に表示されたタイトルにある赤の四角をクリックして Zero サーバーを停止する必要があります。サーバーが停止したら、以下の手順に従ってアプリケーションのエクスポートを開始してください。

  1. Eclipse でプロジェクトを右クリックし、Export... を選択します。
  2. Project Zero を展開して Project Zero Export Wizard を選択します。
  3. エクスポート先のディレクトリー名を選択し、ボックスにチェックマークを付けてソースを含めることを指定します。
  4. 最後に Finish を選択して、指定したディレクトリーにプロジェクトを .zip ファイルとしてエクスポートします。

.zip ファイルはプロジェクトを転送するための手段に過ぎません。このプロジェクトをコマンドラインから実行する場合には、コマンドライン zero ランタイムをインストールして、プロジェクトを該当する apps ディレクトリーに解凍する必要があります。

この時点でアプリケーションを Zero サーバーにデプロイするには、Project Zero ドキュメンテーション (「参考文献」を参照) の手順に従ってコマンドライン zero ランタイムを入手してください。その場合、Zero コア・ライブラリーを選択する「zero seed」を実行するところまで CLI インストール手順に従う必要があります。ドキュメンテーションのこのセクションに記載された残りの手順は、サンプルをインストールし、apps ディレクトリーを作成するためのものなので、そのまま手順を続けて後で使用するためにサンプルをインストールするのでも、Windows® Explorer を使って自分で apps ディレクトリーを作成するのでも構いません。いずれにしても、アプリケーションを Zero サーバーにデプロイするところまで手順を完了してから、ここへ戻ってきて演習を再開してください。

デプロイできない場合は

MyFirstForm.php をロードする際にエラー 500 が発生したら、まずは config ディレクトリーに php.ini ファイルがあることを確認してください。このディレクトリーにない場合には、別のサンプル・プロジェクト、または PHP をインストールしたディレクトリーにこのファイルがあることを確認します。

アクション・フォームのロードに失敗して unknown method get() と示されている場合には、php.ini ファイルに zero 拡張機能が定義されているかどうかを確認する必要があります。

以下のステップに従ってアプリケーションを実行してください。

  1. Eclipse からエクスポートした .zip ファイルを <zerohome>/apps ディレクトリーに解凍します。この操作によって、アプリケーションの apps の下にディレクトリー構造が作成されます。.zip ファイルの解凍方法によっては、単独のアプリケーション・ディレクトリー (例えば MyFirstProject) になることも、アプリケーション・ディレクトリーを含む基本ディレクトリーになることもあります。
  2. このディレクトリーをアプリケーションの基本ディレクトリーに変更して (config というサブディレクトリーがあるはずです)、zero resolve と入力します。
  3. そして最後に zero run と入力します。それによって、最初に Eclipse で確認したのと同じサーバーがポート 8080 で起動するので、ブラウザーが MyFirstForm.php ファイルをロードできるようになります。
  4. サーバーを停止するには、コマンド・プロンプトで Ctrl-C を押せばよいだけです。

Ajax 機能の追加 -- アプリケーション 2: MyFirstDojoApp で Ajax と Project Zero を使用する方法

単純な PHP アプリケーションが作成できたところで、次のアプリケーションでは JavaScript と Dojo を使って簡単に Ajax の機能を追加できることを示します。まずは以下のステップに従ってください。

  1. 新規 Zero アプリケーション・プロジェクトを作成するため、Eclipse で File > New > Project... の順にクリックします。
  2. Project Zero PHP Application 形式を選択して Next をクリックします。
  3. プロジェクトの名前 (例えば、MyFirstDojoApp) を入力し、Finish をクリックします。

このアプリケーションでは Dojo も使うことになるので、Zero には以下の手順でそれを指示する必要があります。

  1. MyFirstDojoApp および config ディレクトリーを展開します。
  2. ivy.xml ファイルを開き、Zero Package Information ペインで Add... をクリックします。
  3. Dependency Selection ウィンドウで Dojo 依存関係を探し (図 3 のリストの先頭)、この依存関係がある場合はステップ 8 に進みます。
  4. Dojo 依存関係がリストアップされていない場合は Manage Repository をクリックします (図 3 を参照)。
  5. Manage Repository ウィンドウで Search をクリックします (その他のデータを入力する必要はありません)。
  6. しばらくすると (リポジトリーの検索後)、リストが表示されます (図 3b)。
  7. Dojo 依存関係を選択して Download をクリックし、それから Close をクリックします。
  8. Dependency Selection ウィンドウで最新の Dojo を選択し、OK をクリックします (ここでは Dojo 0.9 を使いましたが、今ではもっと新しいバージョンが出ています)。これにより、Zero Package Information ペインの依存関係リストに Dojo が追加されます。
  9. File > Save メニューを選択して変更内容を保存します。
図 3. Dojo 依存関係
Dojo 依存関係
図 3b. Manage Repository ウィンドウ
図 3b. Manage Repository ウィンドウ

Zero 依存関係の更新

Dojo や PHP などの依存関係はすべて、バージョン管理の対象となります。最新バージョンにするための操作は、Eclipse ツールバーで Update Dependencies ボタンをクリックするか、またはメニューから Zero > Update Dependencies を選択するだけです (図 4 を参照)。

図 4. 依存関係の更新
依存関係の更新

ここで、このアプリケーションに対する JavaScript と HTML のフロントエンドを作成します。

public ディレクトリーに Example.html という名前のファイルを新規に作成し、リスト 5 のコードをペーストしてファイルを保存します。

リスト 5. 小規模な javascript フロントエンド
<html>
<head>
<title>Dojo Zero Example</title>
<style type="text/css">
 @import "dijit/themes/noir/noir.css";
 @import "dojo/dojo.css"
</style>
<script type="text/javascript" src="dojo/dojo.js" 
        djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dijit.form.Button");
dojo.require("dojo.parser");

function enterPressed() {
alert('The enter button was pressed');
}
</script>
</head>
<body>
<br/>
<br/>
Type your name then press enter: <input type='text' id ='name'/>
<br/>
<br/>
<br/>
<button dojoType='dijit.form.Button' onclick='enterPressed' >Enter</button>
</body>
</html>

リスト 5 のコードは現時点ではサーバーとのやりとりはまったく無く、Enter がクリックされると「The enter button was pressed」というメッセージをポップアップ表示するだけに過ぎません。このコードはボタン内で従来の onClick は使いませんが、Dojo イベント・システムを使用して、ページのロード時に呼び出すメソッドを登録します。

Dojo の試験的実行

この段階でアプリケーションを試験的に実行して、シナリオの Dojo 部分が正常に振る舞うことを確認しておきましょう。

  1. プロジェクト名を右クリックして Run as... > Project Zero Application を選択します。
  2. ブラウザーで http://localhost:8080/Example.html を表示します。
  3. Example.html は入力パネルで、ここにはボタンと入力フィールドが表示されているはずです (図 5 を参照)。入力フィールドに任意のテキストを入力し、ボタンをクリックします。「The enter button was pressed」というテキストが記載されたポップアップ・メッセージが表示されることを確認してください。
  4. この時点で、Firefox 拡張機能の 1 つである Google Firebug を Firefox にインストールすることをお勧めします。Firefox によって、後でこれよりも複雑になった JavaScript ファイルをステップ実行できるようになります。
  5. 入力パネルは表示されているのに、ボタンをクリックしてもメッセージが表示されないとしたら、Dojo が使用されていない可能性があります。その場合には、Enter ボタンのフォントと形状をチェックしてください (図 5 を参照)。Dojo コントロールは、ページのヘッダーに示されたテンプレート (この例では「noir」) に従ってスタイル設定されます。したがって、標準のシステム・フォントとボタン形状になっている場合には、Dojo が実行されていないことになります。前のパラグラフで設定した Dojo に関するプロジェクトの依存関係をもう一度チェックしてください。
図 5. Dojo のボタン
Dojo のボタン

PHP バックエンドの追加とフロントエンドの仕上げ

今度は、ボタン・クリックを Zero に送信するためのコードを追加し、このイベントを取得して処理する簡単な PHP スクリプトを提供します。

  1. public ディレクトリーに ExampleResponse.php という新しいファイルを追加します。
  2. リスト 6 のコードをペーストしてからファイルを保存します。
リスト 6. もう 1 つの PHP バックエンド
<?php

$method = zget('/request/method');
echo " The request was a $method ";

$keys = zlist('/request/params', true);

echo "\n Here is the data: ";

for ($i=0;$i<count($keys);$i++) {
  echo  " Key: $keys[$i] value:";
  $value = zget($keys[$i]);
  if (is_array($value)) {
  	for ($j = 0; $j <count($value) ; $j++ ) {
  		echo " $value[$j] ";
  	}
  } else {
  	 echo " $value ";
  }
}
?>

この演習に記載した最初のサンプルに従っていれば、リスト 6 のコードはかなり馴染み深いもののはずです。このコードは単にメッセージを取得し、表示するための内容を返すだけに過ぎません。

次に Example.html に戻り、前に作成した ExampleResponse とバインドするための enterPressed 関数を追加します。

リスト 7. PHP バックエンドに対応する enterPressed 関数
function enterPressed()
{
    var deferred = dojo.xhrGet({
        url: "ExampleResponse.php",
        handleAs: "text",
        content: {name: dojo.byId('name').value},
        timeout: 5000, //Time in milliseconds
        handle: function(response, ioArgs){
            if(response instanceof Error){
                if(response.dojoType == "cancel"){
                     alert("Request cancelled.");
                }else if(response.dojoType == "timeout"){
                     alert("Request timed out.");
                }else{
                     alert(response);
                }
            }else{
               alert(response);
            }
        return response;
        }
});
}

アラートを表示するためのハンドラーは、上記に記載した enterPressed 関数の定義に組み込まれています。このハンドラーが、Dojo 0.4.3 を対象に執筆したこの記事の前のバージョンで使用した dojo.io.bind 呼び出しに置き換わります。

必ず、今まで行ったすべての作業を保存してください。

これでブラウザーに表示していた Example.html ページを更新し、名前フィールドにテキストを入力して Enter ボタンをクリックすると、図 6 に示すように「The request was a GET」というメッセージがサーバーから返されるはずです。

図 6. アプリケーション
アプリケーション

Zero Ajax アプリケーションの完成

おめでとうございます!Zero Ajax アプリケーションは見事、完成しました。このアプリケーションは、皆さんがこれまでに作成した Web アプリケーションのなかで最も完成度の高いものではないかもしれませんが、簡単に作成できたことは認めざるを得ないはずです。

サーバー・サイドでは万事が順調だったことを願いますが、上手くいかなかった場合を想定して、以下のサブ演習では PHP スクリプトを変更して障害を発生させ、どのようにデバッグするかを説明します。

マウスの追跡

最後に遊び感覚で、サーバーにマウスがどこにあるのかを伝えてみましょう。サーバーはレスポンスとして、テキスト・ボックス内の場所を示すはずです。マウスの動きをいちいち送信するのはシステムの使い方としてあまり効率的ではないかもしれませんが、これによって Ajax の双方向性が実証されます。

Dojo にページの body をコントロールとして認識させ、それによってマウスの動きを追跡するには、body に名前を指定する必要があります。さらに、返された結果を表示する新しいウィジェットも追加しなければなりません。これにより、ページの body セクションはリスト8 のようになります。

リスト 8. 新規ウィジェット
<body id="body">
<br/>
<br/>
Type your name then press enter: <input type='text' id ='name'/>
<br/>
<br/>
<br/>
<button dojoType='dijit.form.Button' onclick='enterPressed' >Enter</button>
<br/>
Mouse Position: <input type='text' id='pos'/>
<br/>
</body>

次に、マウス移動ハンドラーをイベントにリンクするためのコードを init() メソッドに組み込み、すべての変更を保存します。init() メソッドはリスト 9 のようになっているはずです。

リスト 9. body でのマウス移動のリンク
function init()
{
   var domElement = document.getElementById('body');
    
    dojo.connect(domElement, 'onmousemove',	
		function (evt)
		{
    		var deferred = dojo.xhrGet({
        	url: "MouseResponse.php",
        	handleAs: "text",
       		content: {x:evt.pageX , y:evt.pageY},
        	timeout: 5000, //Time in milliseconds
        	handle: function(response, ioArgs){
            if(!(response instanceof Error)){
        		dojo.byId('pos').value = response;
       		}
        	return response;
        }
		});
	}
    );}
    
dojo.addOnLoad(init);

最後に public ディレクトリーにマウスの移動を処理する PHP スクリプトを追加し、リスト 9 のコードのように MouseResponse.php という名前を付けます。この PHP ファイルにはリスト 10 の内容をペーストします。

リスト 10. マウス移動のための PHP バックエンド
<?php
$keys = zlist('/request/params',false);
for ($i=0;$i<count($keys);$i++) {
  echo  "$keys[$i]=";
  $value = zget('/request/params/'.$keys[$i]);
  echo "$value";	
}
?>

これで、ページを実行して位置の更新を表示できるようになります (図 8 を参照)。

図 7. アプリケーション
アプリケーション

このページは、サーバーをシャットダウンする前に閉じてください。そうでないと、マウスが移動するごとにエラー・メッセージを受け取って対処しなければならなくなります。

まとめと次のステップ - この演習で行った内容

この演習では、以下のことを行いました。

  • PHP 対応 Eclipse 開発環境のインストール
  • Web 2.0 での PHP 開発に対応した Project Zero 環境のインストール
  • 単純な HTML フォームと PHP バックエンドによるアプリケーションの開発
  • アプリケーションのエクスポートと Zero コマンドラインからの実行
  • フロントエンド用に JavaScript と HTML と組み合わせた 2 つ目の PHP アプリケーションの開発
  • エラーの作成とそのデバッグ
  • 追加のコールバックと新規 Dojo ウィジェットによる Ajax アプリケーションの拡張

次なるステップ

小規模な Ajax Zero アプリケーションが完成した今、Dojo ライブラリーと PHP バックエンド・スクリプトの使い方を拡張することも可能です。これらのツールを Data Zero コンポーネントと組み合わせて、Apache Derby を使った実際のデータ検索システムを構築してみてはどうでしょうか。Project Zero に付属の Employee Demo のサンプル PHP アプリケーションは、その出発点として最適です。Project Zero のデモには、「参考文献」セクションに記載した Project Zero Documentation リンクからアクセスすることができます。

Zero グローバル・コンテキストや、リソース (REST) 処理などの関連トピックについて詳しく学ぶには、「参考文献」に記載されている Project Zero Developer's Guide を参照してください。

この演習が、Project Zero に着手する手助けとなったことを願います。この進化している Project Zero コミュニティーに参加するには、projectzero.org にアクセスしてください。また、developerWorks では Project Zero ライブラリーを常に更新しているので、こちらも頻繁に調べてみてください。

参考文献

学ぶために

製品や技術を入手するために

議論するために

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development, WebSphere
ArticleID=307904
ArticleTitle=Project Zero、WebSphere sMash、そして PHP を使い始める
publish-date=09292008