ColdFusionおよびFlash Builder 4ベータ版入門

Adobe Flash Builder 4（以前の名前はFlex Builder）を使えば、Adobe ColdFusionとAdobe Flexフレームワークを統合して、SWFアプリケーションを作成するのが容易になります。ウィザードによる簡単な操作で、ColdFusionコンポーネント（CFC）をプロジェクトに読み込み、CFC関数へのサービス呼び出しを通じてデータにアクセスできます。また、データオブジェクトをクリックしてコントロールにドラッグするだけで、返されたデータをFlex UIコントロールに容易に入力できます。

このチュートリアルでは、ColdFusionデータソースとFlash Builderプロジェクトを設定し、Flash Builderのデータサービスウィザードを使用してCFCを読み込むことにより、架空のセールスプランナーのサンプルアプリケーションを作成します。その後、CFC操作の1つにアクセスして、SWFアプリケーションにデータを返し、FlexフレームワークのDataGridコントロールにデータを入力します。

実行時間：15分。

FlexおよびColdFusionミニラーニングセンターの多くのチュートリアルでは、架空のセールスプランナーの従業員売り上げ情報を記録した同じサンプルデータベースを使用します。この節では、HSQLDBデータベースエンジンおよびサンプルデータベースを設定し、ColdFusionデータソースを作成します。

注意：以下の設定手順では、ColdFusion 8 Professionalのデベロッパー版のローカルスタンドアロンインストールが存在することを前提としています。

HSQLDBデータベースエンジンの設定

次のステップでは、オープンソースの軽量なHyperSQL Database（HSQLDB）エンジンを設定する方法を示します。

HSQLDBが選択された理由は、ローカルColdFusion環境で使用するための設定が容易であり、このチュートリアルに付属する生徒用ファイル以外の追加のダウンロードが不要だからです。

1. f4cf_getting_started_db_hsqldb.zipサンプルファイルをまだダウンロードしていない場合は、ダウンロードします。
2. コンピュータ上でファイルを展開し、hsqldb_license.txtファイルの内容を確認します。
3. ColdFusionサーバーが実行されている場合は停止します。
4. hsqldb.jarファイルを \wwwroot\WEB-INF\lib ディレクトリに移動します。

HSQLDB.jarファイルはデータベースエンジンであり、ColdFusionサーバーが起動されたときに自動的に読み込まれます。

サンプルデータベースの設定

この節では、HSQLDBエンジンでF4CF_FictitiousSalesPlannerデータベースインスタンスを設定します。このデータベースには、架空のセールスプランナーのサンプルアプリケーションのための従業員売り上げデータが含まれます。これは、FlexおよびColdFusionミニラーニングセンターの他のチュートリアルでも使用されます。

1. f4cf_getting_started_db_fictitious.zipサンプルファイルをまだダウンロードしていない場合は、ダウンロードします。
2. ファイルを \wwwroot\WEB-INF ディレクトリに展開し、内容を確認します。
   • \wwwroot\WEB-INF フォルダーに、dbという名前のフォルダーができています。このフォルダーは、HSQLDBデータベースインスタンスファイルを整理しておくために役立ちます。
   • dbフォルダーには、F4CF_FictitiousSalesPlannerという名前のサブフォルダーがあります。このサブフォルダーには、このデータベースインスタンスのファイルが含まれ、やはりファイルを整理しておくために役立ちます。
   • F4CF_FictitiousSalesPlannerフォルダーには、F4CF_FictitiousSalesPlanner.scriptおよびF4CF_FictitiousSalesPlanner.propertiesという名前の2つのファイルがあります。これら2つのファイルは、ColdFusionサーバーが起動したときに、HSQLDBエンジンによって読み取られます。.propertiesファイルには、データベース設定プロパティが、.scriptファイルには、データベーステーブルとデータを生成するSQLスクリプトステートメントが記録されています。データベースはColdFusionサーバーのメモリに記憶され、データへの変更は定期的にログファイルに書き込まれます。
3. ColdFusionサーバーを開始します。

HSQLDBエンジンが初期化され、新しいF4CF_FictitiousSalesPlannerデータベースインスタンスがColdFusionサーバーのメモリに作成されます。

ColdFusionデータソースの設定

この節では、ColdFusion Administratorを使用して、HSQLDBデータベースインスタンスのデータソースを作成します。

1. ColdFusion Administratorにログオンし、F4CF_FictitiousSalesPlannerという名前の新規データソースを作成して、ドライバータイプをその他にします（図1を参照）。

2. 「追加」ボタンをクリックします。
3. JDBC URLボックスにjdbc:hsqldb:file:yourlocalpathと入力します。ここで、yourlocalpathはF4CF_FictitiousPlanner.propertiesファイルのシステム上でのフルパスを示します。ファイル名の拡張子.propertiesは省きます（図2を参照）。

   例えば、PC上のColdFusionのスタンドアロンインストールの場合、次の値をコピーして貼り付けます。

   jdbc:hsqldb:file:C:\ColdFusion8\wwwroot\WEB-INF\db\F4CF_FictitiousSalesPlanner\F4CF_FictitiousSalesPlanner

   Mac上のColdFusionのスタンドアロンインストールの場合、次の値を使用します。

   jdbc:hsqldb:file:/Applications/ColdFusion8/wwwroot/WEB-INF/db/F4CF_FictitiousSalesPlanner/F4CF_FictitiousSalesPlanner

   図2に、Windows XPでのColdFusionのデフォルトのスタンドアロンインストールに対する設定を示します。

図3に、Mac OS XでのColdFusionのデフォルトのスタンドアロンインストールに対する設定を示します。

4. ドライバークラスをorg.hsqldb.jdbcDriverに設定します。
5. ドライバー名にJDBC Driverと入力します。
6. ユーザー名にsaと入力します。
7. 「送信」ボタンをクリックします。

図4に示すように、画面の上部にデータソースの更新に成功しました。というメッセージが表示され、表にOKというステータスが表示されます。

このチュートリアルの後半で、F4CF_FictitiousSalesPlannerデータソースのインストールをテストします。

HSQLDBデータソースのデバッグ

ColdFusion Administratorがデータベースへの接続エラーを報告した場合、ColdFusionサーバーを再起動して、メモリ上のHSQLDBエンジンとデータベースを更新してから、データソースをもう一度設定してみてください。

アプリケーションを開発する際には、HSQLDBエンジンとデータベースがColdFusionサーバーのメモリ上にあることを意識しておいてください。.scriptファイルまたは.propertiesファイルを変更した場合、通常はサーバーを再起動する必要があります。

また、エラーが発生した場合（図5に示す、データベーステーブルが見つからないというエラーなど）、HSQLDBデータソースのパスが正しく設定されていない可能性を考えてみてください。データソースのパスが間違った場所を指しており、HSQLDBが予期した.propertiesファイルを見つけられなかった場合、空のデータベースで.propertiesファイルが作成されます。データソースの検証時に、テーブル、列、データが存在しないことになります。

注意：FlexおよびColdFusionミニラーニングセンターの「入門」の節を実行している場合は、次の節に進んでください。別のColdFusionデベロッパーのためのFlexチュートリアルからこの節に来た場合は、元のチュートリアルに戻って次の作業に進んでください。

実行時間：5分。

この節では、架空のセールスプランナーのサンプルアプリケーションで使用する、ColdFusionを利用したFlash Builderデータサービスプロジェクトを設定します。

Flash Builderプロジェクトの作成

Flash Builderのプロジェクトは、Dreamweaverのサイトに似ています。プロジェクトを作成する目的は、コードファイルを保存して整理することです。Flash Builderプロジェクトを作成するには、以下の手順を実行します。

1. Flash Builder 4ベータ版を開きます。

   注意：ここでは、Flash Builder 4ベータ版のスタンドアロン版（プラグイン版ではなく）を使用していることを前提とします。プログラミング環境として既にEclipseを使用している場合は、プラグイン版をインストールしてもかまいません。ただし、以下の手順で多少の違いが生じる可能性があります。また、ColdFusionのローカルスタンドアロンインストールが存在することを前提とします。カスタムインストールの場合は、パスの変更が必要となる可能性があります。

2. 図6に示すように、ファイル／新規／Flexプロジェクトを選択します。

新規プロジェクトダイアログボックスが表示されます。図7に示すように新規プロジェクトを設定します。

• プロジェクトの名前はF4CF_Getting_Startedとします。
• この例では、デフォルトの場所を使用してください。
• ダイアログボックスの「サーバーテクノロジー」セクションで、アプリケーションサーバーの種類ドロップダウンメニューからColdFusionを選択します。（「リモートオブジェクトアクセスサービスを使用」チェックボックスは、サーバーテクノロジを選択したときにデフォルトで選択されています。）
• 「ColdFusion Flashリモーティング」オプションを選択します。

3. 「次へ」をクリックします。

ColdFusionサーバーへの接続

Flash BuilderプロジェクトがColdFusionサーバーと連動するように設定するには、以下の手順を実行します。

1. ColdFusionサーバーを設定ダイアログボックスで、ColdFusionのインストールの種類のオプションを選択します。図8に、PCでスタンドアロンモードのColdFusionのデフォルトインストールを使用している場合の設定を示します。

注意：Mac OS XコンピュータでColdFusionのスタンドアロンモードのデフォルトインストールを使用した場合、ColdFusion設定は通常次のようになります。

• ColdFusionルートフォルダー： /Applications/ColdFusion8
• 組み込みのColdFusion WebサーバーのWebルート： /Applications/ColdFusion8/wwwroot
• 組み込みのColdFusion WebサーバーのルートURL： http://localhost:8500

2. 「設定を検証」ボタンをクリックして、設定が正しいことを確認します。

   出力フォルダーの場所は、ColdFusionサーバーのWebルート内にあることに注意してください。

   Flash Builderは、プロジェクト名に–debugが付いた名前のフォルダーを自動的に作成します。この例では、Flash Builderは、F4CF_Getting_Started-debugフォルダーに、コンパイルされたFlash SWFおよびHTMLラッパーファイルを保存します。

   注意：Mac OS XコンピュータでColdFusionのスタンドアロンモードのデフォルトインストールを使用した場合、出力フォルダー設定は通常次のようになります。 /Applications/ColdFusion8/wwwroot/F4CF_Getting_Started-debug

   Flashソースファイルは、ColdFusionソースファイルと異なり、Webサーバーに展開されません。その代わりに、ソースをコンパイルしてできたSWFファイルが、HTMLラッパーファイルで参照されます。SWFファイルとHTMLファイルが、サーバーにアップロードされます。

3. 「終了」ボタンをクリックして、Flash Builderプロジェクトを作成します。

図9に示すように、F4CF_Getting_Startedプロジェクトがパッケージエクスプローラーに表示されます。また、同じ名前のMXMLアプリケーションファイルが作成され、編集用に開かれます。図9では、「MXMLエディター」タブがデザインモードで示されています。タブの下の「ソース」ボタンをクリックすると、エディターのコードビューが表示されます。

Flexフレームワークでは、2つのプログラミング言語が提供されています。完全なオブジェクト指向言語であるActionScriptと、CFMLに似た構文を持つXMLベースの言語であるMXMLです。

注意：FlexおよびColdFusionミニラーニングセンターの「入門」の節を実行している場合は、次の節に進んでください。別のColdFusionデベロッパーのためのFlexチュートリアルからこの節に来た場合は、元のチュートリアルに戻って次の作業に進んでください。

実行時間：5分。

これで、データベース、データソース、Flash Builderプロジェクトの設定が終わったので、今度は、CFCメソッドから簡単にデータを取得して、Flexユーザーインターフェイス要素にバインドできることを学びます。

ColdFusionコンポーネントのイントロスペクション

ColdFusionコンポーネントは、ビジネスロジックを再利用可能なコードとして整理するためのものです。これはColdFusion MXで導入されたもので、インラインデータベースクエリー構文を置き換えるものです。つまり、CFMLページの先頭にcfqueryタグを置く代わりに、CFCメソッド内に置かれたクエリーを、必要に応じて引数を渡して呼び出します。

注意：CFCについて詳しくは、記事「Flexアプリケーションの開発におけるCFCの役割について」を参照してください。

1. 付属のf4cf_getting_started_tutorial.zipファイルをまだダウンロードしていない場合は、ローカルディスクにダウンロードして展開してください。
2. SalesTarget.cfcファイルを \wwwroot\F4CF_Getting_Started-debug ディレクトリに移動します。

   Flash Builderプロジェクトを設定したときに、コンパイルされたSWFファイルと関連するHTMLラッパーファイルの出力場所として、プロジェクト固有のデバッグフォルダーが自動的に参照され、作成されています。これはColdFusionデータサービスプロジェクトなので、デバッグフォルダーはColdFusionサーバーのWebルートにあります。図10は、SWFファイルおよびHTMLラッパーファイルと同じディレクトリにあるCFCを示します。

   注意：SWFファイルおよびHTMLラッパーファイルについて詳しくは、展開アセットを参照してください。Flash Builderのデフォルトのコンパイル設定は、ソースファイルを保存すると直ちにこれらのファイルが作成されるようになっています。

3. SalesTarget.cfcファイルをコードエディターまたはブラウザーで開きます。

多数のCFCメソッドがcffunctionタグで定義されているのがわかるはずです。各メソッドには、架空のセールスプランナーアプリケーションのビジネスロジックが、カプセル化されています。このチュートリアルでは、getAllData操作を使用して、データベース中のすべての従業員を取得します。

注意：各メソッドでaccessプロパティがremoteに設定されているのは、メソッドをSWFアプリケーションで使用できるようにするためです。

サンプルデータソースによるCFCのテスト

今度は、付属のテストファイルを使用して、架空の従業員データソースの設定が正常に行えるようにします。

1. 付属のf4cf_getting_started _db_test.zipファイルをまだダウンロードしていない場合は、ローカルディスクにダウンロードして展開してください。
2. SalesTargetTest.cfmファイルを \\wwwroot\F4CF_Getting_Started-debug ディレクトリに移動します。
3. ブラウザーを開き、SalesTargetTest.cfmページを表示します。

   すべてのデータベースレコードのcfdump表示が見られます（図11を参照）。

データサービスウィザードを使用したCFCの読み込み

次に、Flash Builderのデータとサービスビューを使用して、CFCをプロジェクトに読み込みます。

1. 図12のように、Flash Builderのデータとサービスビューを見つけます

   （ビューが開いていない場合、ウィンドウ／データとサービスを選択します）。

2. データとサービスに接続リンクをクリックして、データサービスウィザードを実行します。

   注意：データ／データとサービスに接続を選択して、データサービスウィザードを開くこともできます。

3. サービスの種類としてColdFusionを選択します（図13を参照）。

4. 「次へ」をクリックします。
5. サービスの名前をF4CF_Getting_Started_Serviceとし、図14に示すように設定します。

   注意：サービスの名前は任意です。どのような名前を付けてもかまいませんが、CFCに関連しているので、CFCと似た名前を付けるのが普通です。例えば、SalesTarget_Serviceのような名前が考えられます。ただしこの例では、チュートリアル名に合わせてサービス名を決定しました。

   • 「CFCを読み込み」オプションが選択されていることを確認します。
   • CFCの場所を指定します。CFCロケーションフィールドの隣の「参照」ボタンをクリックし、 \wwwroot\F4CF_Getting_Started-debug\ ディレクトリに移動します。SalesTarget.cfcファイルを選択し、「開く」ボタンをクリックします。

パッケージがservices.f4cf_getting_started_serviceに設定されていることに注意してください。以下の手順を終了すると、パッケージエクスプローラーで、プロジェクトのsrcフォルダーの下にservices.f4cf_getting_started_serviceパッケージが表示されているはずです。このパッケージには、Flash Builderウィザードが自動的に生成するActionScriptファイルが含まれます。

6. 「次へ」をクリックします。
7. 図15に示すリモートサービス認証ダイアログボックスで、RDSユーザー名とパスワードを入力します。

   注意：ColdFusion Administratorで必ずRDSを有効にしておいてください。デフォルトのユーザー名はadminです。

8. 「OK」をクリックします。

   Flash BuilderはCFCにアクセスし、イントロスペクトを行い、使用可能な操作と、操作に関連付けられたデータ型に関する情報を返します。CFCの各メソッドが、図16に示すサービス操作ウィンドウに表示されます。

9. 「終了」ボタンをクリックします。

   Flash Builderはサービスを作成します。図17に示す指示が表示される場合があります。これは、リモートサービスの使用ダイアログボックスの左下隅にあるチェックボックスを選択していなければ表示されます。

このチュートリアルの残りの部分では、この指示を実行します。

10. 「OK」をクリックして、リモートサービスの使用ダイアログボックスを閉じます。
11. データとサービスビューを探して、図18に示すCFC操作を確認します。

getAllData()メソッド名の後にObjectと表示されていることに注意してください。これは、Flash BuilderがCFCをイントロスペクトしてメソッドに関する情報を提供したときに、この操作から返されるColdFusionクエリーが、一般的なActionScriptのObjectデータ型にマッピングされたためです。

実行時間：15分。

CFCがFlash Builderにイントロスペクトされ、Flash Builderプロジェクトが設定されたので、今度は、返されたデータを使用して、簡単な従業員データ表示を作成します。

返されるデータ型の設定

この節では、CFCメソッド呼び出しで取得されて返されるデータに、独自のデータ型名を割り当てます。

1. F4CF_Getting_Started_ServiceのgetAllData()操作を右クリックし、「戻り値の型を設定」を選択します（図19を参照）。

クエリからの各レコードは、名前／値ペアの各データ列（FIRSTNAME、LASTNAME、EMAIL）が設定された状態で、ActionScriptオブジェクト内に格納されます。各レコードには、0から始まるインデックスが付けられます。

注意：ColdFusionと異なり、ActionScript言語のインデックスは0から始まります。

このウィザードを使うと、返されたデータをオブジェクトとして一般的に参照する代わりに、戻り値の型の名前をデータに付けることができます。次にこれを行います。

2. 操作の戻り値の型を設定ダイアログボックスで、EmployeeSalesDataという名前の新しいカスタムデータ型を作成します（図20を参照）。

3. 「次へ」をクリックします。
4. 新しいデータ型を作成ダイアログボックスで、「はい」オプションをクリックして、操作にリモーティング資格情報が必要であることを指定します。
5. リモートサービス認証ウィンドウにユーザー名とパスワードを入力します（図21を参照）。

6. 「OK」をクリックし、「次へ」をクリックします。
7. Modify Properties of Return Typeダイアログボックスを確認して、「終了」ボタンをクリックします。

ここで、データとサービスビューでデータ型カテゴリを展開すると、EmployeeSalesDataデータ型が、EMAIL、FIRSTNAME、LASTNAMEをプロパティとして持つオブジェクトとして定義されているのがわかります（図22を参照）。

Flexコンポーネントへのデータのバインド

メソッドの戻り値の型を設定したら、それを簡単にコンポーネントにバインドできます。この節では、EmployeeSalesDataデータ型をDataGridコンポーネントにバインドする方法を示します。

1. Flash Builderで、「エディター」タブの下の「デザイン」ボタンをクリックして、デザインモードに切り替えます（図23を参照）。

2. コンポーネントビューのDataGridコントロールを見つけます（図24を参照）。

3. 図25に示すように、DataGridコンポーネントをF4CF_Getting_Started.mxmlファイルのデザインビューにドラッグ＆ドロップします。

4. getAllData() CFC関数をデータとサービスビューからDataGridコントロールにドラッグ＆ドロップし、EmployeeSalesDataデータ型を挿入します。

   これにより、DataGridコントロールに、EmployeeSalesDataデータ型のプロパティに対応する列ができます（図26を参照）。

5. ファイル／保存を選択して、MXMLファイルを保存します。
6. 実行（緑の丸）ボタンをクリックして、ファイルをテストします（図27を参照）。

図28に、CFCデータが挿入されたDataGridコントロールを示します。Flash Builderは、WebルートにあるF4CF_Getting_Started-debugフォルダーからHTMLラッパーファイルを開いています。

次のステップ

このチュートリアルでは、HSQLDBエンジン、サンプルデータベース、ColdFusionデータソースを設定しました。次に、ColdFusionサーバーテクノロジーと協調動作するFlash Builderプロジェクトを設定しました。最後に、CFCメソッドからデータを取得して、Flexユーザーインターフェイス要素に簡単にバインドできることを体験しました。

FlexとColdFusionの協調動作については、次のチュートリアルを参照してください。

• UIコンポーネントへのデータのバインド
• フォームの生成
• マスター／詳細フォームの作成
• データの管理
• ColdFusion URL変数を使用したFlexアプリケーションの展開