defide inc.

掲載誌	日経Linux　2003/02～
タイトル	リッチインターネットアプリケーションを開発しよう！　第４回
サブタイトル	ColdFusion MXとFlash MXで作るリッチインターネットアプリケーションをMVCモデルで学ぶ

第１回

Step2.

計算処理のクラス化

先程のサンプルでは、イベントハンドラを定義し、その中で計算処理を直接行っていた。次は、この計算処理をクラス化してみる。
ここでいうクラスとは、JavaやC++で開発を経験した読者なら、Java、C++のクラスと同じイメージをもってもらえれば、分かりやすいだろう。
クラスによるオブジェクト指向プログラミングを行うことで、処理を最小単位でカプセル化（隠蔽）することができ、処理の再利用性が高まる。よって大規模なアプリケーションの構築が容易となる。
先程のサンプルのようなシンプルな処理であれば特に必要ないが、これからリッチインターネットアプリケーションを開発する上では不可欠なコーディング方法であるため、早速行ってみる。
クラス化したソースコードは以下のとおりとなる。
（ソース：2-1）

//Calcクラス定義


Calc = function(){ 　this.price = 100; };				(1)


Calc.prototype.total = function(amount){ 　var total = this.price * amount; 　return total; };				(2)

//calc_mcイベントハンドラ定義
calc_mc.onPress = function(){


var calcClass = new Calc(); 　var total = calcClass.total(amount_txt.text);				(3)

　total_txt.text = total;
};

ここでのポイントは以下のとおりだ。

(1)

クラスの定義
まず、クラスを定義する。クラスを定義するには以下のように記述する。

Calc = function(){
　・・・
};

ここでは「Calc」というクラスを定義している。
この定義関数はコンストラクタと呼ばれ、コンストラクタ内に記述したスクリプトは、クラスをインスタンス化（後述　(3)参照）した際に実行される。コンストラクタにはクラスの初期化処理を記述しておく。
なお、ソース2-1 (1) 「this.price = 100;」の部分では、プロパティ（属性データ）「price」を定義している。「this.変数名」と記述することで、クラス全体で有効な変数となる。

(2)

メソッドの定義
次に、メソッドを定義する。メソッドを定義するには以下のように記述する。

Calc.prototype.total = function(){
　・・・
};

ここで、「Calc」はクラス名、「total」はメソッド名となる。
ソース2-1 (2)では、パラメータとして個数を受取り、計算結果を返すという処理を行っている。
以上でクラスの定義は終了だ。これで、「total」メソッドをもつ「Calc」クラスが定義された。

(3)

メソッドの実行
では、定義したクラスを利用する。先程クラスを定義したが、このままでは何も実行されない。クラスのメソッドを実行するには、まずクラスをインスタンス化（実体化）する必要がある。
ここで、クラスとインスタンスの関係は、次のようにイメージしていただければ分かりやすい。
両者の関係を車に例えると、クラスとは車をつくるための設計書、インスタンスとは設計書にもとづき製造された実物の車となる。製造されて実際に存在するものとなって初めて走ることができる。
クラスをインスタンス化するには、以下のように「new クラス名()」と記述する。

var calcClass = new Calc();

ここでは、「Calc」クラスのインスタンスを「calcClass」変数に格納している。
メソッドを実行するには、以下のように「インスタンス.メソッド名」と記述する。

calcClass.total(パラメータ);

ソース2-1 (3)では、「total」メソッドに、パラメータとして個数データを渡し、実行結果を「total」変数に格納している。
実際に、実行するとStep1のサンプルと同じ動作をするはずだ。
Step2でのサンプルは付録のCD-ROMに含めている（「sample2.fla」）ので、そちらも参考にしていただきたい。

Step3.

サーバーとの連携

リッチインターネットアプリケーションを開発するには、データベースとの連携が欠かせない。Flash MXとデータベースの連携を行うためには、前回までに紹介したColdFusionコンポーネントを利用することにより行うが、Flash MXとColdFusionコンポーネントはどのようにして連携を行うのだろうか。
それでは、次に、Step2でFlash MXで行っていた計算処理をColdFusionコンポーネントで行うようにし、Flash MXでColdFusionコンポーネントとの連携を行ってみる。
まず、連載第3回でも紹介した次のようなメソッドをもつColdFusionコンポーネント「calc.cfc」をサーバーサイドに用意する。

メソッド名	totalCalc
処理概要	単価と個数から合計金額を算出し、算出結果を返す
引数	単価　個数
戻値	合計金額

ColdFusionコンポーネントのソースコードは以下のとおりとなる。
（ソース：3-1）

次に、ActionScriptのソースコードは以下のとおりとなる。
（ソース：3-2）

#include "NetServices.as"

//Responseクラス定義
Response = function(){
};

Response.prototype.onResult = function(result){
　trace("データ受信 : " + result);
　total_txt.text = result;
};

Response.prototype.onStatus = function(error){
　trace("エラー : " + error.description);
};

//calc_mcイベントハンドラ定義
calc_mc.onPress = function(){
　NetServices.setDefaultGatewayUrl("http://localhost/flashservices/gateway");
　var gw = NetServices.createGatewayConnection();
　var calcAPI = gw.getService("step1.calc", new Response());
　calcAPI.totalCalc(100, amount_txt.text);
};

ここでのポイントは以下のとおりだ。

(1)

ライブラリのインクルード
ColdFusionコンポーネントとの連携を行うためには、Flash MXに標準で用意されているActionScript ライブラリが必要となる。このライブラリには、通信に必要な ActionScript コードとオブジェクトが含まれているため、以下のように必ずインクルードする。

#include "NetServices.as"

(2)

ColdFusionコンポーネントの呼び出し
次に、ColdFusionコンポーネントを呼び出す。処理の流れは以下のようになる。

NetServices.setDefaultGatewayUrl("http://localhost/flashservices/gateway");

まず、ColdFusion MX サーバー上のFlashRemotingサービスが動作するURLを設定している。ColdFusionをデフォルトでインストールした場合のURLは、
「http://<ホスト名またはIPアドレス>/flashservices/gateway」となる。

var gw = NetServices.createGatewayConnection();

次に Flash MXで用意されているNetConnection オブジェクトを使い、ColdFusion MX サーバーとの接続を確保している。

var calcAPI = gw.getService("step1.calc", new Response());

更に、ColdFusionコンポーネント「calc」への参照情報を取得している。
ここで、「step1.calc」はColdFusionコンポーネント「calc」へのパスとなる。
これはサーバサイドでコンポーネントを配置した場所に応じて指定する必要がある。
例えば、Web(ColdFusion MX)サーバのドキュメントルート直下に「step1」というディレクトリ作成し、「step1」下に「calc.cfc」を配置した場合、コンポーネントへのパスは「step1.calc」となる。
また、「getService」メソッドのパラメータに「new Response()」を渡しているが、これは、コンポーネントを呼び出した後、コンポーネントから返されるデータを処理するインスタンスだ。
コンポーネントから返されたデータを受信すると、ここで指定したインスタンスのメソッド（「onResult」、「onStatus」）が呼び出される。

calcAPI.totalCalc(100, amount_txt.text);

最後に、コンポーネント「calc」の「totalCalc」メソッドを呼び出している。

(3)

通信結果を処理するクラス作成
次に、ColdFusionコンポーネントから受信したデータを処理するクラスを作成する。
(2)でも触れたとおり、コンポーネントから返されたデータをFlash MXが受信すると、指定されたインスタンスのメソッドが呼び出される。
呼び出されるメソッドであるが、コンポーネントで処理が正常に終了した場合には、「onResult」メソッドが、何らかの原因で処理が異常終了した場合には「onStatus」メソッドが呼び出されることになる。なお、正常に終了した場合は、「onResult」メソッドにはコンポーネントからの戻り値が返され、異常終了した場合は、「onStatus」メソッドにエラー情報が返される。
したがって、ソースコードは以下のように記述している。

//Responseクラス定義
Response = function(){
};

Response.prototype.onResult = function(result){
　trace("データ受信 : " + result);
　total_txt.text = result;
};

Response.prototype.onStatus = function(error){
　trace("エラー : " + error.description);
};

「trace」関数を使用しているが、これは、オーサリングツールでムービープレービュー（メニューバーで「制御」-「ムービープレビュー」を選択して実行した場合）を行っている際に、デバック情報を表示できる関数だ。
ここでは、受信した結果に応じてメッセージを表示している。
なお、ColdFusionコンポーネントからデータを受信した際に呼び出されるメソッドは、「onResult」、「onStatus」の代わりに、それぞれ、「コンポーネントメソッド名_Result」、「コンポーネントのメソッド名_Status」とすることもできる。先程紹介したソースコードは以下のように記述することもできる。（コンポーネントメソッド名 = Flash MXから呼び出すColdfusionコンポーネントのメソッド名）
両表記を組合わせることで、例えば、複数のColdFusionコンポーネントメソッドを呼び出す際に、正常処理は個別に処理、エラー処理は共通で処理するということも可能だ。

//Responseクラス定義
Response = function(){
};

Response.prototype.totalCalc_Result = function(result){
　trace("データ受信 : " + result);
　total_txt.text = result;
};

Response.prototype.totalCalc_Status = function(error){
　trace("エラー : " + error.description);
};

以上で、ColdFusionコンポーネントとの連携を行う準備が整った。実際に実行してみると、個数を入力した後「計算」ボタンをクリックすると、Flash MXでは以下の処理が行われる。

入力された個数データ取得

　　↓

ColdFusionコンポーネント「calc」を呼び出し

　　↓

ColdFusionコンポーネント「calc」で計算された合計金額を受信

　　↓

合計金額の画面表示

Step3でのサンプルは付録のCD-ROMに含めている（「sample3.fla」、「calc.cfc」）ので、そちらも参考にしていただきたい。

いよいよ次回は、前回作成した勤怠管理システムのバックオフィスと、Flash MXで作成したユーザインターフェースを連動させ、リッチインターネットアプリケーションを開発していく予定だ。

１・２