この 3 回連載記事の第 1 回 (英語) では、Firefox、Zend Core、MySQL などのオープン･ソース技術の主要な機能について説明し、Ajax アプリケーションの 3 つの層すべてにまたがる複雑な銀行のシナリオを例に、エンドツーエンドの Ajax アプリケーション開発に必要なデータベース・サーバー、中間層サーバー、そして Eclipse ベースの IDE をセットアップしました。連載の 2 回目となる今回の記事では、この銀行のシナリオの一部を開発します。具体的には、MySQL データベースを使ってバックエンド・データベースを作成し、このデータベースに接続して銀行固有のデータを作成、定義、そして設定するための MySQL のコマンド・ライン・ツールをいくつか公開します。次に行うのは、銀行のビジネス･ロジックを収容する中間層 PHP モジュールの開発です。このモジュールでは ODBC を使用して MySQL データベースに接続します。そして最後に銀行ポータルを開発して、ユーザーがこのエンドツーエンド・アプリケーションを操作する際に使う単純なブラウザー UI を提供し、Zend Core で早速実行できるようにします。

はじめに

第 1 回 (英語) で説明したように、この銀行のシナリオで重点としているのは、銀行窓口が行う基本的な顧客業務を提供することです。第 1 回 (英語) をまだ読んでいない方は、ここで第 1 回で説明したシナリオについて理解しておいてください。まず、このシナリオで重要な部分となるのは顧客データです。この演習を行うため、すべての顧客データはデータベース・テーブルに一度にまとめて設定します。顧客データが保管されると、Zend Core に付属の ODBC MySQL ドライバーを使ってこのデータを取得および更新できるようになります。顧客データが用意できたら、次に、銀行窓口のための関数を提供するには欠かせないコアの銀行ロジックに目を向けます。コアの銀行ロジックは、ODBC を使用した必要なデータベース・アクセスと併せて PHP コードのモジュールで開発します。このロジックに Zend Core および PHP を使用すると、MySQL の組み込みサポートを利用できるという大きなメリットがあるからです。

データベースと PHP モジュールの作業を完了したら、続いて銀行窓口が 4 つのコアとなる関数を実行するための単純なユーザー・インターフェースを提供します。シナリオで説明しているように、PHP モジュール内にカプセル化されたコアの銀行ロジックへのアクセスにはシン・クライアントを使用します。具体的には、この Web ベースのシン・クライアントは HTML、カスケーディング・スタイル・シート (CSS)、JavaScript、そして XHR (XMLHttpRequest) という Ajax スタイルで生成され、銀行窓口がコアとなる銀行業務を実行するときに使用する単純なユーザー・インターフェースを提供します。このブラウザー UI には、ブラウザーのクライアント・サイドのロジックがネットワークを介して PHP のサーバー・サイドのロジックと通信するための特定のメソッドもあります。

この記事の終わりでは、データベース、コアの銀行ロジックのための PHP モジュール、そして単一ページのブラウザー･ユーザー･インターフェースが出来上がっていることになります。つまり、この銀行のシナリオのすべての構成要素です。

MySQL データベース

第 1 回 (英語) で説明したように、MySQL はオープン・ソースのデータベースです。この記事のシナリオでは、小型のデータベース･サーバーでありながら便利な機能を数多く備えたコミュニティー・サーバー・エディションを使用します。銀行のシナリオの実装はオープン・ソースの製品をベースとするため、MySQL は Zend Core PHP サーバーと連動させるには最適です。MySQL は何の設定をしなくても Zend Core でサポートされます。MySQL の管理とプログラミングをサポートするツールにはさまざまなものがありますが、このシナリオでは MySQL コマンド・ライン・クライアントのみを使って MySQL を管理します。このシナリオで作成する銀行口座データベースには MySQL データベースを使用します。

銀行データベースの作成とデータ入力

このシナリオでは、特定の顧客に関する口座情報を以下の詳細で保管します。

• AccountHolderName
• AccountNumber
• CheckingBalance
• StockName
• StockQuantity
• StockValue

顧客の口座情報に含まれるのは、口座名義人の名前、口座番号、現在の口座残高、顧客が所有する株銘柄ごとのティッカー・シンボル (※訳注: 日本の証券コードに相当)、保有株数、そして該当する株ポートフォリオの現行市場価格です。以降のセクションで、データベース・テーブルを作成して架空の銀行顧客に関する口座情報の詳細をこのテーブルに入力する手順を詳しく説明します。それでは早速、始めましょう。

以下の手順に従って、データベースを作成し、アプリケーション固有のデータをデータベース・テーブルに入力します。

1. Eclipse が起動されていない場合は起動します (c:\eclipse\eclipse.exe)。
2. 以下の操作で、PHP が Eclipse のアクティブ・パースペクティブになるようにします。
   1. Window->Open Perspective->Other->PHP を選択し、OK をクリックします。
3. Eclipse で File->New->Project を選択します。
4. General->Project を選択し、Next をクリックします。
5. プロジェクト名フィールドに BankDB と入力します。
6. Finish をクリックします。
7. BankDB プロジェクトを右クリックして New->Other を選択します。
8. General-> File を選択し、Nextをクリックします。
9. File name フィールドに BankDB.sqlと入力し、Finish をクリックします。
10. リスト 1 に記載する BankDB.sql のコードの内容を入力するか、コピーします。
11. ファイルを保存して閉じます。
12. MySQL コマンド・ライン・クライアントを起動するため、 Windows のスタート・メニューからすべてのプログラム -> MySQL -> MySQL Server -> MySQL Command Line Client を選択します。
13. MySQL コマンド行ウィンドウでパスワードとして webtech と入力し、Enter を押します。
14. mysql> プロンプトが表示されたら、source c:\eclipse\workspace\BankDB\BankDB.sql と入力して Enter を押します。
15. 上記のコマンドが正しく実行されたことを確認するため、以下のコマンドを入力して BankDB データベースの有無をチェックします。
    1. show databases;
    2. use bankdb;
    3. show tables;
    4. describe account;
16. MySQL コマンド・ライン・クライアントで exit と入力してクライアントを終了します。

			
-- This file is part of the End-to-End Ajax development article in
-- the IBM developerWorks. This file contains a simple DB script to
-- create a database and populate it with the data.
-- 
-- Last Modified: May/10/2007
-- 
-- To execute the following statements in MySQL, do the following steps.
-- 1) Start MySQL command line client.
-- 2) Enter your MySQL admin password.
-- 3) Type the following line by substituting <YOUR_SQL_FILE_DIR> with the
--    directory name where the file is stored.
--    source <YOUR_SQL_FILE_DIR>\bankdb.sql

--
-- Table structure for table 'BankDB'
--

DROP DATABASE BankDB;

CREATE DATABASE BankDB;

USE BankDB;

CREATE TABLE account (
   AccountHolderName VARCHAR(20) NOT NULL, 
   AccountNumber INTEGER NOT NULL,
   CheckingBalance DOUBLE NOT NULL,
   StockName VARCHAR(6),
   StockQuantity INTEGER,
   StockValue DOUBLE,
   PRIMARY KEY(AccountHolderName, AccountNumber)
);

--
-- Populating data for table 'account'
--

insert into ACCOUNT values ('Frodo', 435245, 2344.45, 'GOOG', 100, 3453.32);
insert into ACCOUNT values ('Sam', 928462, 7583.32, 'CSCO', 200, 5323.43);
insert into ACCOUNT values ('Pippin', 234233, 3444.62, 'INTC', 300, 4213.76);
insert into ACCOUNT values ('Merry', 642445, 1005.32, 'MSFT', 250, 1353.32);
insert into ACCOUNT values ('Aragorn', 972321, 6424.24, 'HPQ', 525, 12043.94);
insert into ACCOUNT values ('Gandalf', 432134, 5392.23, 'IBM', 400, 10043.78);
insert into ACCOUNT values ('Legolas', 590134, 4313.82, 'DELL', 325, 5926.62);

PHP による MySQL データベースへのアクセス

PHP で人気のある機能の 1 つは、MySQL を含め、さまざまなベンダーのデータベースに保管されたデータに、単純な従来からの方法でアクセスできることです。そのため、ビジネス・ロジックを効果的かつ簡単な手段でデータベースに統合することができます。過去数年間で PHP コミュニティーが行ってきたさまざまな改善のなかには PDO (PHP Data Object) も含まれます。PDO とは、使用しているデータベース・サーバーに依存しない共通 API 関数を公開する抽象化層です。この PDO により、PHP データベースの API 関数はプロシージャー・スタイルでもオブジェクト指向・スタイルでも使用できるようになっています。このシナリオでは基本を理解するために、MySQL を対象としたダイレクト・データベース API を使用します。PHP では以下の 2 通りの方法で MySQL にアクセスすることができます。

• MySQL
• MySQL Improved

MySQL 4.1.0 の機能には、ストアード・プロシージャー、トリガー、ビューをはじめ、通常の MySQL 拡張ではサポートされないものもあります。このような関数にアクセスするために改善された最新の方法が、MySQL Improved (mysqli) 拡張です。mysqli 拡張は PHP 5.0 以降で使用できますが、デフォルトでは有効に設定されません。そのため、Zend Core 管理ツールを使って mysqli を有効にする必要があります。この記事の演習では、第 1 回 (英語) で Zend Core をインストールして構成する際に、すでに mysqli を有効にしてあります。

PHP データベース API の優れた特徴として挙げられるのは、データベース操作の結果をさまざまな方法で PHP データ構造にマッピングできることです。つまり PHPには、データベースの結果を PHP 連想配列として返せるデータベース API があり、データベース・テーブルの列名がこの配列のキーとなります。別のケースでは、結果を PHP クラス・オブジェクトとして返し、データベースの列名をオブジェクト・プロパティーとすることもできます。この方法は、データベース・クエリーの結果を表すのに非常に役立ちます。

PHP MySQLi 関数のビルディング・ブロック

前述のとおり、PHP にはありとあらゆる mysqli 関数が用意されていますが、このセクションでは銀行のシナリオの実装に使用する関数のみに焦点を絞って説明します。ここで説明する関数を具体的に挙げると、接続、読み取り、書き込み、接続解除といったデータベース関数です。その他の詳細については、「参考文献」にリストした PHP の正式な資料を参照してください。

データベース操作を行う前には、データベース・サーバーとの接続を確立する必要があります。PHPでは以下の関数を使用してデータベースに接続します。

$link = mysqli_connect("hostname", "user", "password", "dbname");

この関数は、適切なクレデンシャルを使って指定されたホストの指定されたデータベースとのデータベース接続を試みます。この関数が取るオプション・パラメーターはこの他にもあります (PHP の資料を参照してください)。データベースとの接続が成功すると、この関数によって以降のデータベース読み取り操作や書き込み操作に必要な接続オブジェクトが返され、失敗すると false が返されます。データベース・サーバーのパスワードを平文としてコードに組み込みたくないのであれば、MySQL のパスワード・ダイジェストの機能を調べてみてください。

以下は、接続操作を補足する、データベースをクローズする関数です。

$result = mysqli_close($link);

上記の関数が、オープンされたデータベース接続のクローズを試行します。この関数は MySQL データベース接続オブジェクトをパラメーターとして使用し、データベースのクローズ操作が成功すると true、失敗すると false を返します。

接続を管理する関数を見たところで、次はデータベースの読み取りと書き込みに関連する関数を取り上げます。読み取り/書き込み操作に役立つ関数を以下にリストします。

• (1) $result = mysqli_query($link, $queryStr);
• (2) $numberOfRows = mysqli_num_rows($result);
• (3) $row = mysqli_fetch_assoc($result);
• (4) $row = mysqli_fetch_object($result);

関数 (1) は、データベースで SQL クエリーを実行します。この関数がパラメーターとして使用するのは、接続オブジェクトおよび有効な SQL クエリー・ストリングです。クエリーが成功すると true、失敗すると false を返します。ただし、SELECT SQL クエリーの場合は結果オブジェクトを返します。

関数 (2) は、SQL クエリーから返された結果セットに含まれる行数を取得します。パラメーターとして使用するのは結果オブジェクトです。

関数 (3) は、結果行を PHP 連想配列として取得します。この配列には、配列キーとしてデータベースの列名、配列の値としてデータベースのフィールド値が含まれます。例えば、データベース・クエリーが「capital」という名前の列の値を返した場合、以下を使って配列を参照することでこの結果にアクセスすることができます。:

$stateCapital = $row['capital'];

関数 (4) は、結果行を PHP オブジェクトとして取得します。このオブジェクトには、オブジェクト・プロパティーとしてデータベースの列名、オブジェクト・プロパティーの値としてデータベースのフィールド値が含まれます。例えば、データベース・クエリーが「park」という名前の列の値を返した場合、以下を使ってオブジェクト値を逆参照することでこの結果にアクセスすることができます。

$nationalPark = $row->park;

このように強力な関数 (3) および関数 (4) は、データベース値をマッピングして変数をプログラムするのにも極めて簡単な方法を実現します。前述したように、PHP にはこの他にもデータベース値をマッピングする方法があります。

演習では、データベースを操作した後にエラー処理を行うため、さらに 2 つの関数を使用します。目的のデータベース操作が正常に完了したかどうかを把握することが重要になるからです。この場合には、以下の関数が役に立ちます。

• $returnCode = mysqli_errno($link);
• $errorMsg = mysqli_error($link);

mysqli_errno 関数は、最後の関数コールのエラー・コードを返します。接続オブジェクトをパラメーターとして取り、実行された関数の戻りコードを返します。戻りコードが 0 の場合は、エラーがなかったということです。一方の mysqli_error 関数は、最後のエラーに関する説明を文字列で返します。どちらの関数も、データベース・クエリーのサイクル全体を完了するには不可欠です

PHP モジュールでの銀行のビジネス・ロジックの実装

以下の手順に従って PHP モジュールを作成し、中間層のビジネス・ロジックを実装します。

1. Eclipse PHP パースペクティブにまだ切り替えていない場合は、Window->Open Perspective->Other->PHP を選択して OK をクリックし、PHP パースペクティブに切り替えます。
2. File->New->PHP Project の順にクリックします。
   1. Project name フィールドに BankTeller と入力します。
   2. Finishをクリックします。
3. Project Explorer ビューで、BankTeller プロジェクトを右クリックして New->PHP File を選択します。
   1. File Name フィールドに BankLogic.php と入力し、Finish をクリックします。
4. このファイルの内容を、リスト 2 に記載するソース・コードを入力または貼り付けて置き換えます。
   1. File->Save をクリックしてファイルを保存します。
5. このファイルのコメントに目を通してコードを理解します。または、次のセクションで説明するコード・ロジックの概要を読んでください。

ご覧のように、PHP ではわかりやすく簡単な方法でデータベースを操作することができます。リスト 2 ではパスワードが平文で指定されていますが、このパスワードは記事のために作成したテスト・データベースでしか使用しません。平文のパスワードの代わりにダイジェスト・パスワードを使用することで、パスワードの指定方法を改善することも可能です。

BankLogic PHP モジュールのロジック

リスト 2 の PHP ファイルには、銀行窓口のコアとなる関数に必要なビジネス・ロジックが記載されています。これらの関数とは、特定顧客のデータベースに保管されたすべての口座情報の取得、預け入れまたは引き落としの取引実行、株ポートフォリオ値の計算です。いずれの関数も特定の入力パラメーターを受け入れて、関連口座情報が含まれるアプリケーション固有の連想配列を返します。関数に含まれる大量のロジックには、BankDB MySQL データベースの接続と読み取りまたは更新に特有のアクションの実行が伴います。リスト 2 の先頭では、グローバル・スコープの 3 つの PHP 変数を定義しています。この 3 つの変数が格納するのは、データベース接続オブジェクト ($link)、SQL クエリーの結果オブジェクト ($dbResult)、そしてこの PHP モジュールの呼び出し側に返す最終結果 ($finalResult) です。この PHP モジュールには、MySQL データベースとの接続と接続解除を行うための 2 つのユーティリティー関数があります。接続が行われると接続オブジェクトが作成されて $link 変数に格納されます。この変数はグローバル・スコープなので、この接続オブジェクトは PHP ファイル全体で使用できます。同様に、DB の読み取りまたは更新が実行されると、SQL クエリーの結果が同じくグローバル・スコープ変数の $dbResult に格納されます。データベース接続をクローズしなければならない場合には、もう一方のユーティリティー関数 (close_connection_to_db) によってデータベースから接続解除します。このユーティリティー関数は、データベース接続をクローズする前に、$dbResult 内の結果セットによって占有されているメモリーが確実に解放されるようにします。

このファイルには、以下の 3 つのコアとなる関数が含まれます。

• getAllAccountInformation 関数が呼び出されるのは、呼び出し側がデータベースに保管された利用可能なすべての口座データを取得するときです。上記のコードでは、MySQLi 拡張 API を使って MySQL データベースへの ODBC 接続を行い、口座テーブルに格納されたすべての口座情報を取得するようになっています。データベースの読み取り操作が成功すると、結果セットが繰り返し処理されて個別の口座データ情報が収集されます。すべての口座データ情報は PHP 連想配列に格納されて呼び出し側に返されます。
• accountTransaction 関数が呼び出されるのは、呼び出し側が預け入れまたは引き落とし操作を実行するときです。このメソッド呼び出しで使用するパラメーターは、口座名義人の名前、取引量、そして預け入れ操作と引き落とし操作のどちらであるかを示す取引タイプなどです。上記のコードは MySQL データベースとの ODBC 接続を行い、データベースから指定口座名義人の現在の口座データをフェッチして連想配列に格納します。これは、この口座の取引前のスナップショットです。それから必要な取引 (預け入れまたは引き落とし) を実行し、取引後の新しい口座残高でデータベースを更新します。この取引後のデータも、別の連想配列に格納されます。この時点で、取引前と取引後の両方の口座のスナップショットが正規配列に格納され、最終結果として呼び出し側に返されます。このコードは対象とする取引タイプに対して取引量が有効な場合にのみ取引を実行することにも注意してください。
• portfoliovalue メソッドが呼び出されるのは、呼び出し側が特定口座名義人の株ポートフォリオ値を計算するときです。このメソッド呼び出しで使用するパラメーターは、口座名義人の名前、そしてこの口座名義人が所有する単一株の現行株価などです。メソッドは取引前の口座データのスナップショットを取得し、これを連想配列に格納します。次に新しい株価合計を計算して銀行データベース内の対応するデータベース・フィールドを更新します。さらに取引後の口座データのスナップショットも別の連想配列に格納します。両方の口座データのスナップショットが正規配列に保管され、最終結果としてクライアントに返されます。

ソース・ファイルには、コード・ロジックを理解しやすいようにコメントを記載しています。

単一ページの Ajax ユーザー・インターフェース

銀行窓口のユーザー・インターフェースには、単一ページのブラウザー・アプリケーションを開発します。単一ページのブラウザー・アプリケーションは、従来の「クリックして待機」するという Web アプリケーションとは異なることに注意してください。「クリックして待機」型の Web アプリケーションでは、ユーザーが新しいページにナビゲートすると、サーバーからフェッチする Web ページがどれであれ、毎回ページ全体のコンテンツがダウンロードされます。一方、単一ページのブラウザー・アプリケーションの背後にあるモデルはまったくその逆で、アプリケーションに必要なすべての表示コンテンツ (XHTML、CSS、および JavaScript) が、サーバーから 1 度だけしかフェッチされません。通常、この 1 回きりのダウンロードは、ユーザーがブラウザーにアプリケーションの URL を指定してアプリケーションが起動されるときに行われます。アプリケーションに必要なすべてのユーザー・インターフェース要素が定義されるのは XHTML ファイルで、ユーザー・インターフェースのそれぞれの部分に必要なすべてのスタイルがコード化されるのは CSS ファイルです。特殊な DOM (Document Object Model) 手法を適用してユーザー・インターフェースの該当部分の表示と非表示を切り替えることにより、別のページをフェッチするためにサーバーに戻ることなく、マルチページの振る舞いをシミュレートします。ブラウザーで実行されるアプリケーション固有の JavaScript コードは、アプリケーション・ロジックの大部分を処理することが可能です。このように、ブラウザー・アプリケーションの設計に用いる Ajax 技術によって、ユーザー操作に対するアプリケーションの応答性が極めて向上するとともに、通常のページ・フェッチによる重い負荷からサーバーが解放されます。Ajax アプリケーションでは、ブラウザーとサーバーの対話はアプリケーション固有のデータ交換だけに限られるので、より多くのユーザーとより多くのアプリケーションがサーバーのリソースを最大限に使用できるようになります。

ここで説明するメリットとは別に、アーキテクチャー上の懸念事項があります。例えば、データ・セキュリティー、データ・プライバシー、そしてブラウザー・クライアントで信頼して実行できるビジネス・ロジックの適切なパーティショニングなどです。さらに、HTTP による取引が途中で中断された場合にエラーから回復する必要もありますが、このような懸念事項は銀行のシナリオの対象外として、ここでは単純な特徴を備えた単一ページのブラウザー・アプリケーションの実装方法にのみ焦点を絞ります。同様に、ブラウザー・アプリケーションにリッチなグラフィックを提供するために組み合わせられる Ajax 手法は数多くありますが、この記事では単一ページのブラウザー・アプリケーション構築の背後にある概念を説明する基本的な手法のみを取り上げます。

単一ページのブラウザー･アプリケーションの各部分の表示と非表示に使用する手法の 1 つは、<DIV>、<SPAN>、および <TABLE> HTML タグの使用です。これらのタグの概要を示した図 1 を見てください。<DIV> タグは、HTML 文書を複数のセクションに区分するために使用します。アプリケーションの数多くの画面を区分するには、まず初めに <DIV> タグのなかに特定画面のユーザー・インターフェースのコントロールを配置します。こうすると、あとは JavaScript を使って簡単に、どの画面 (つまり <DIV>) を特定のアプリケーション実行段階で表示するかを操作することができます。この演習では <SPAN> タグも役に立ちます。これは、ブラウザー・アプリケーションのテキスト・セグメントにスタイルを適用するためのタグです。銀行のシナリオでは、このタグを使って画面上のメニュー・コントロールを作成します。さらに文書のレイアウトを管理するために <TABLE> タグも使用します。

ブラウザー・アプリケーションにリッチ感をもたらすために、個々のユーザー・インターフェース要素ごとにスタイル設定できるようにするという方法もよく使われます。ブラウザー・アプリケーションの全体的な外観を管理するために広範に使用される CSS は、独自の構文を持つ独立したコードです。CSS にはプラグインが必要ないため、テキスト・ファイルでルールを定義するだけで簡単に設定できます。この CSS ルールを構成するのは、セレクターと宣言ブロックです。セレクターでそれぞれのルールが開始し、その後に続く中括弧に、複数の宣言で構成される宣言ブロックが含まれます。それぞれの宣言は、セミコロンで区切られたプロパティーと値のペアとなっています。以下のリスト 3 は、CSS ルールの単純な一例です。CSS セレクターには、図 2 に示すように異なる種類があります。

body {
   color: maroon;
   font-size: medium;
   text-align: center; 
   background:green; 
}

いくつかの Ajax フレームワークでは、入出力、ネットワーク、グラフィックス、データなどのコード・ライブラリーを抽象化しています。Eclipse ベースの Aptana ツールは、このような数多くの Ajax フレームワークを 1 つの IDE で見事に統合しますが、これらの Ajax フレームワークについての説明はこの記事の対象外です。銀行のシナリオの Ajax 関連コードは、主に説明を簡潔にするという目的で単純な JavaScript を使って実装しているので、フレームワークのライブラリーではなくアプリケーションで直接、入出力、ネットワーク、グラフィックス、データなどのコードの一部を体験することができます。この連載を読み終えたら、Dojo、Rico、Script.aculo.us、Prototype などの Ajax フレームワークをぜひ調べてみてください。

Ajax と HTTP の相互作用

前のセクションでは、Ajax の一部である XHTML、CSS、および DOM 手法について検討しましたが、HTTP と (中間層サーバーで) 相互作用を行う方法も Ajax アプリケーションの中心的な特性です。Ajax は、ブラウザー・アプリケーションがサーバーと非同期で相互作用するという新しい方法を実現します。この方法は、ユーザーが HTML フォームの Submit ボタンを押した後、砂時計の回転を眺めながら待機する必要がないという点で、従来のブラウザー・アプリケーションとは大いに異なります。この非同期 HTTP 通信をサポートするのは、XHR です。XHR は、ブラウザー・サイドの JavaScript コードが非同期 HTTP サーバー要求を行えるようにするためのブラウザー・オブジェクトです。XHR によって HTTP 要求の実行、応答の受信、そして完全にバックグラウンドでの部分的ページ更新が可能になるため、ユーザーに対する視覚的干渉がなくなります。Ajax では、このようにしてサーバーとデータをやりとりしている際にもユーザー・インターフェースが応答できるようにします。XHR 標準化に向けて W3C で現在行われている取り組みについては、「参考文献」を参照してください。図 3 に、XHR の各種オブジェクトのメソッドおよびプロパティーを記載します。

XHR の大まかな操作シーケンスは以下のとおりです。

1. XMLHttpRequest object オブジェクトのインスタンスを作成します。
2. XMLHttpRequest オブジェクトを使用してサーバー応答の受信時に自動的に実行されるコールバック関数を定義し、サーバーに対する呼び出しを行います。
3. コールバック関数でサーバーの応答を処理します。
4. 必要に応じてステップ 2 に戻り、サーバーとの次の相互作用を非同期で行います。

この銀行のシナリオに特定の XHR を使用した実装についての詳細は、後で説明します。

Ajax ブラウザー・アプリケーションのビルディング･ブロック

この例でのブラウザー・アプリケーションは、以下の成果物で構成されます。

• XHTML ファイル
• CSS ファイル
• XHR JavaScript ファイル
• JavaScrip でのクライアント・サイドのビジネス・ロジック
• 必要に応じた Utility JavaScript ファイル

XHTML ファイルは、アプリケーションを起動するためにユーザーがブラウザーに指定するアンカー・ファイルです。このファイルには主に、<DIV>、<SPAN>、<TABLE>、<FORM> などの共通 HTML タグで最初に作成されるすべてのユーザー・インターフェース要素が含まれます。このファイルはその他のブラウザー手法も使用して、スタイル設定、通信、およびデータ・フォーマットのサポートを追加します。

CSS ファイルは、必要なスタイル設定をユーザー・インターフェース要素に追加するためのルールを指定します。CSS は広範なトピックなので、このシナリオで CSS の機能のすべてを説明することは不可能ですが、このアプリケーションのコンテキストでは基本的かつ重要な CSS の機能のいくつかに重点を絞って説明します。

XHR ファイルが説明する XMLHttpRequest オブジェクトの初期化に関するロジックは、特定のブラウザーにはとらわれません。また、このファイルでは非同期通信モードで可能な XHR の使用方法についても説明します。この記事では、XHR ロジックを作り直すのではなく、今日の Web 開発コミュニティーで広範に使用されている XHR のスタイルを使用します。

クライアント・サイドのビジネス･ロジックには、JavaScript を使用して銀行のシナリオの画面での Ajax 操作を示します。これは、サーバーとのデータのみの対話動作とサーバー応答の非同期処理に役立つイベント・モデルです。Ajax の概念に馴染みのない方にとって、このモジュールそのものが、あらゆる単一ページ・ベースの Ajax ブラウザー・アプリケーションに適用できる主要な概念を教えてくれるはずです。

さらに、このブラウザー・アプリケーションでは JSON (JavaScript Object Notation) データ処理のためのオープン・ソース・ユーティリティーもビルディング・ブロックの 1 つとなります。それについては、連載第 3 回 (英語) で詳しく説明します。

Ajax ブラウザー・アプリケーションとしての Bank ポータルの実装

この銀行のシナリオに必要なブラウザー・インターフェースは、前の手順で PHP モジュールに実装したコアとなる関数を実行するために銀行窓口が使用する単純なものです。このインターフェースの作成には、Aptana Web IDE を使用します。この記事を書いている時点で、Aptana Web IDE には XHTML、CSS、および JavaScript ベースのブラウザー･アプリケーションを簡単に作成する方法があります。Aptana は PDT ツールと併せてシームレスに Eclipse 環境に統合できる無料のプラグインです。Aptana はまだ開発中の段階ですが、現時点で入手できる中間バージョンで、銀行のシナリオの開発には十分対応できます。銀行のシナリオでは未加工の JavaScript を使用して Ajax 機能を実装しますが、Aptana によってその他のオープン・ソース Ajax フレームワーク・ライブラリーとの統合が可能になります。

以下の手順に従って、単一ページの Ajax ブラウザー・アプリケーションを作成します。

1. Eclipse のパースペクティブを Aptana に変更するため、Window->Open Perspective->Other->Aptana を選択し、OK をクリックします。
2. Aptana パースペクティブの左下にあるフレームで、Project というタブが付いたビューを選択します。
3. BankTeller プロジェクトを右クリックして New->HTML file を選択します。
   1. File name フィールドに index.html と入力して Finish をクリックします。
4. リスト 4 のソース・コードを入力または貼り付けて index.html ファイルのコンテンツを置き換え、File->Save をクリックします。
5. BankTeller プロジェクトを右クリックして New->CSS file を選択します。
   1. File name フィールドに BankTeller.css と入力し、Finish をクリックします。
6. リスト 5 のソース・コードを入力または貼り付けて BankTeller.css ファイルの内容を置き換え、File->Save をクリックします。
7. BankTeller プロジェクトを右クリックし、New->JavaScript file を選択します。
   1. File name フィールドに xhr.jsと入力し、Finish をクリックします。
8. リスト 6 のソース・コードを入力または貼り付けてこのファイルの内容を置き換え、File->Save をクリックします。
9. 以上のファイルのコメントをレビューしてコードを理解します。または、次のセクションで説明するコード・ロジックの概要を読んでください。

ここでまでのところで、単一ページの Ajax ブラウザー・アプリケーションに必要な成果物の 3 分の 2 が完成しました。ブラウザー・アプリケーションの残りの部分は、連載第 3 回 (英語) で作成します。

銀行ポータル・ブラウザー・アプリケーションのロジック

XHTML と CSS の成果物、そして XHR 関連のユーティリティー・ファイルの作成が完了しました。XHTML ファイル (index.html) がこのアプリケーションの出発点となります。銀行窓口アプリケーションのユーザーがブラウザーのアドレス・バーで確認できるのは、このファイルだけです。その他すべての成果物は、index.html ファイルと併せてサーバーからブラウザー・セッションにプルされます。index.html ファイルの <HEAD> セクションを見ると、以下の HTML タグが含まれているのがわかります。

<script language="JavaScript" type="text/javascript" src="xyz.js"></script>

この script タグが定義するのは、文書内の要素が呼び出すことのできる 1 つ以上のスクリプトです。この特定のケースでは、外部ファイルから JavaScript コードがロードされます。3 種類の JavaScript ファイルから銀行窓口アプリケーションの JavaScript コードをロードするには、以下のようにします。

<link rel="stylesheet" type="text/css" href="xyz.css" media="all" />

link タグは外部ファイルで定義されたスタイル・シート (CSS) ルールを関連付けるタグです。上記のステートメントは指定の CSS ファイルを HTML 文書にリンクして、この Web アプリケーション全体のスタイルを決定しています。

銀行窓口アプリケーションの表示コンテンツに関連する成果物は、起動時にすべてまとめてダウンロードされます。そのため個々の画面をアプリケーションの構成部分としてセグメント化し、ユーザーの必要に応じて表示できるようにしなければなりません。そうするには、個別の <DIV> 要素にすべてのユーザー・インターフェース・コントロールを含めれば簡単です。そこでアプリケーション全体を mainPage という <DIV> 要素に含めます。さらに、このブラウザー・アプリケーションには他に 6 つのセクションがありますが、そのすべてをそれぞれ固有の <DIV> 要素内に配置し、この 6 つの <DIV> セクションすべてを mainPage <DIV> 要素内に含めます。異なる UI セクションをこのように編成することで、連載第 3 回 (英語) で説明する DOM 操作によるセクションの制御が簡単になります。

アプリケーションのロード時には、イベント・ハンドラー ((initOnPageLoad)) が <body> 要素に設定されます。このイベント・ハンドラーがまず初めに呼び出されるため、初期画面のコンテンツが表示されるように設定されます。<SPAN> タグは <DIV> タグと同様に、タグ内に含まれる単純なテキストを使って、初期画面でメニューのような構造を組み立てるという目的を果します。<SPAN> 要素には、3 つの異なるマウス・アクション関連のイベント・ハンドラーがあることに注目してください。この 3 つのイベント・ハンドラーは CSS スタイル・ルールをそのまま使用してメニュー項目の強調表示と強調表示解除を行います。メニュー・テキスト項目のいずれかがクリックされると、対応する onclick イベント・ハンドラーが該当画面をブラウザー・ウィンドウに表示します。この動作は、サーバーに戻ることなく、ブラウザーの DOM をローカルで操作するだけで行われます。また、すべての画面の下に固定される footer セクションも興味深いユーザー・インターフェース・コントロールです。いつの時点でも、画面レイアウトには mainPage および pageFooter <DIV> という 2 つの <DIV> 要素があり、この 2 つの <DIV> 要素の中間に、他のセクションのうちの 1 つ (預け入れ、引き落とし、ポートフォリオ、または銀行窓口業務の結果) が配置されます。これもまた、柔軟な Aax 設計の原則です。

CSS ファイル (BankTeller.css) に含まれるのは、このブラウザー・アプリケーションのユーザー・インターフェース要素に適用される CSS ルールです。これらの CSS ルールを通して、CSS のいくつかの特徴が示されます。高位レベルでは、HTML セレクター、ID セレクター、そしてクラス・セレクターがこのアプリケーションで幅広く使用されます。

例えば、CSS ファイルの先頭にある body という HTML セレクターは、ブラウザー・アプリケーションのページ全体のフォントと背景色を再定義します。CSS ファイルの一番下で使用されている portfolioActionButton は ID セレクターです。この ID セレクターは、HTML ファイル (index.html) に定義されている、該当する ID ストリングを持つ HTML タグのすべてに #portfolioActionButton CSS ルールで定義されたスタイルが適用されることを示しています。同様に、. .tellerOptionsLink CSS ルールで使用されているクラス・セレクターは、.tellerOptionsLink クラスに割り当てられたすべての HTML タグに適用されます。また、グループ・セレクターによって複数のセレクターにまとめて同じスタイル宣言を指定していることにも注目してください。グループ・セレクターの例は、BankTeller.css ファイルに散在しています。CSS ファイルの下の部分では、3 つすべてのアクション・ボタン (#depositAmountActionButton、#debitAmountActionButton、および #portfolioActionButton) が同じボタン・スタイルのプロパティーを受け取るようにグループ化されています。このファイルには、別の拡張 CSS 機能である子孫セレクターも示されています。子孫セレクターでは、個別の子孫要素にその親セレクターに応じたスタイルを設定することが可能です。CSS ファイルで示されている子孫セレクターの例では、テーブル内のすべての列 (<td> iに含まれる <table> など) に、特定のセル余白を割り当ててスタイルを設定しています。table.depositAmountButtonTable td を見てみると、子孫セレクターが適用されていることがわかります。図 2 をもう一度見て、HTML セレクター、ID セレクター、クラス・セレクターの CSS 構文を確認してください。

XHR ファイル (xhr.js) には 2 つの関数があります。1 つは、アプリケーション固有の情報を中間層サービスで交換 (送受信) するために使用できる XHR オブジェクトを作成する関数です。この createRequest 関数が XHR オブジェクトを作成します。この記事を書いている時点では、XMLHttpRequestのサポート方法はブラウザーによって異なります。とりわけ 2 つの最もよく使われるブラウザー、IE (Internet Explorer) と Mozilla Firefox での違いは顕著です。

XHR は IE のバージョンによって実装方法が異なります。この関数はブラウザー固有の手法を使って XHR オブジェクトを作成しようとします。まず、IE 以外のブラウザーでは、組み込みの XMLHttpRequest クラスをインスタンス化するだけで XHR オブジェクトを作成することができます。IE バージョン 6.0 以降では、Msxml2 の ActiveXObject と XMLHTTP が使用されます。その他すべての IE バージョンで使用されるのは、ActiveXObject、そして XMLHTTP の異なるインスタンスです。Microsoft では現在、他のブラウザーと同様の XHR サポートを提供しようと取り組んでいるところですが、それが実現するまでは、この関数のロジックが必要です。もう一方の関数、sendHttpRequestは、任意のデータを中間層サービスに送信するために使用します。この関数は、POST HTTP 動詞を使用した REST スタイルのアクセス機構によって中間層サービスと対話動作を行います。この関数が取るパラメーターは以下の 4 つです。

• XHR オブジェクト
• コールバック関数 (コールバックが不要な場合はヌル)
• データの送信先の URL
• データ (中間層サービスに送信するアプリケーション固有のデータ)

sendHttpRequest メソッドは、XHR オブジェクトを使用して中間層サービスにデータを送信します。コールバック関数が指定されていると、この関数は XHR オブジェクトの onreadystatechangeプロパティーをそのコールバック関数に設定した上で、中間層サービスへの HTTP 接続をオープンします。そして必要な HTTP ヘッダーをすべて設定してから、データを中間層サービスに送信します。コールバック関数が指定されていれば、XHR オブジェクトの send メソッドがサーバーの応答を待たずに即時にリターンします。この場合、サーバーからの応答はブラウザーに到着した時点でコールバック関数によって処理されます。詳細は第 3 回 (英語) で説明しますが、コールバック関数が指定されないと送信関数がブロックし、サーバーからの応答が到着するまで待機することになります。サーバーからの応答がない場合には HTTP エラーが発生することになります。

リスト 4 の単一ページのブラウザー･アプリケーション・コードは、銀行窓口が預け入れ、引き落とし、ポートフォリオ値の計算などの銀行業務を実行する際に使用する単純なブラウザー・インターフェースを生成します。このコードは、この単一ページの Web アプリケーションの一部として 3 つのフォームを提供しています。この 3 つのフォームのそれぞれが、口座名義人の名前が入力される HTML ドロップダウン・ボックスを提供し、次にユーザーが預け入れまたは引き落とす金額を入力する編集フィールドを提供します。銀行窓口が要求された銀行業務を行うために使うのは 3 つのアクション･ボタンです。このアプリケーションでの 3 つのボタンは、第 3 回 (英語) で開発する中間層 REST サービスにアクセスするように設計されています。そのための PHP モジュールを開発するまでは、これらの銀行窓口の関数は機能しません。同様に、第 3 回 (英語) では JavaScript ファイル (BankTeller.js) も開発します。

この銀行のシナリオの開発ために、新しい Ajax 手法を数多く使用しました。まだ経験の浅い Web 開発者にとっては、この記事で説明した内容は新たな領域をいくつか紹介したものだったはずです。そのような開発者は、途中まで組み込んだブラウザー・コードと中間層コードを徹底的に分析して、新しい手法を十分に理解しておいてください。一方、経験豊富な Web 開発者であれば、残りのタスク (次のセクションにリスト) を試しに自分で完了してみるのも一案です。完了できなかったとしても心配は要りません。この連載の第 3 回 (英語) を読めば完了できます。

まとめ

ここまでのところで、銀行のシナリオの主要な部分は出来上がりました。エンドツーエンドの Ajax アプリケーションのシナリオはまだ途中ですが、データベース、PHP モジュールに組み込まれたコア･ビジネス・ロジック、そして Ajax 技術を用いた Web ユーザー・インターフェースについては理解できたはずです。第 1 回 (英語) に記載した銀行のシナリオの図によると、シナリオ全体を完成させるには、まだ以下の項目を作成しなければなりません。

• サーバーとのデータ交換を行うためのクライアント・サイドのロジックおよび非同期通信ロジックを収容する JavaScript モジュール
• リモート株価情報 Web サービスに対応した Web サービス SOAP クライアント・コードが含まれる PHP モジュール
• このシナリオを構成するその他の PHP モジュールのビジネス・ロジックの呼び出しを準備する REST サービスとして機能する PHP モジュール
• シナリオの完成に向けたすべての成果物の統合
• Ajax と PHP のエンドツーエンド・シナリオのデプロイとテスト
• クライアント・サイドとサーバー・サイドのデバッガーによるエンドツーエンド・シナリオのデバッグ

これまで第 1 回 (英語) と第 2 回で説明した内容から、3 つすべての層で利用できるオープン・ソース技術のリッチな機能の詳細、そして特定の Eclipse Ajax-PHP 開発ツールについて理解できたはずです。SQL の DB 作成、PHP でのサーバー・サイドの銀行ロジック、銀行ポータル (XHTML、CSS、および XHR) のコード成果物は、この記事に付属のダウンロード・ファイルで入手することができます。この連載の最終回となる第 3 回に備えて、中核となる Ajax と PHP の概念、そして銀行のシナリオにこれまで適用してきた開発手法を復習し、よく理解しておいてください。

上に戻る

ダウンロード

ダウンロード形式について

参考文献

学ぶために

• IBM developerWorks Ajax resource centerに掲載されている Ajax に関する記事とチュートリアルを読んでください。
  
  
• IBM developerWorks PHP resource centerに掲載されている PHP に関する記事とチュートリアルを読んでください。
  
  
• PHP Manual Web siteにアクセスして、PHP API 資料を読んでください。
  
  
• Eclipse PDT プロジェクトについて学んでください。
  
  
• Learn about the Aptana Web IDEについて学んでください。
  
  
• Ajax の発端となった独創性に富んだ記事「Ajax: A New Approach to Web Applications」(James Garrett 著) を読んでください。
  
  
• Learn about Zend Coreについて学んでください。
  
  
• XMLHttpRequest のW3C Working Draftを読んでください。
  
  
• PHP MySQLi API の資料を読んでください。
  
  
• この素晴しいCSS Zen Gardenのデモで CSS の威力を体験してください。
  
  

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

• Mozilla Firefoxをダウンロードしてください。
  
  
• MySQLをダウンロードしてください。
  
  
• Zend Coreをダウンロードしてください。
  
  
• Zend PDT ダウンロード Web サイトから Eclipse PDT (PHP Development Tools) をダウンロードしてください。
  
  
• MySQL PHP コネクターをダウンロードしてください。
  
  

著者について

Senthil Nathan は、ニューヨーク州 Hawthorne にある IBM T.J. Watson Research Center のシニア・ソフトウェア・エンジニアです。22 年間、各種エンタープライズ・アプリケーションを対象としたソフトウェアの作成に取り組んできました。現在専門としているのは、一連の話題の技術、SOA、Web サービス、ストリーム・プログラミング、Java 2 Platform、J2EE (Enterprise Edition)、PHP、Ruby On Rails、Web 2.0、そして Ajax の開発です。

この記事を評価する

コメント

上に戻る

目次

• はじめに
• MySQL データベース
• 銀行データベースの作成とデータ入力
• PHP による MySQL データベースへのアクセス
• PHP MySQLi 関数のビルディング・ブロック
• PHP モジュールでの銀行のビジネス・ロジックの実装
• BankLogic PHP モジュールのロジック
• 単一ページの Ajax ユーザー・インターフェース
• Ajax と HTTP の相互作用
• Ajax ブラウザー・アプリケーションのビルディング･ブロック
• Ajax ブラウザー・アプリケーションとしての Bank ポータルの実装
• 銀行ポータル・ブラウザー・アプリケーションのロジック
• まとめ
• ダウンロード
• 参考文献
• 著者について
• コメント