アクセシビリティ
デベロッパーリソース
Trilemetry

Trilemetry社*

作成日:
2009年6月1日
ユーザレベル:
すべて
製品:
Flex
ColdFusion

Flexアプリケーションの開発におけるCFCの役割について

ColdFusionの経験豊富なデベロッパーは、Webアプリケーション開発において、Adobe ColdFusionアプリケーションサーバーでデータおよびHTML生成機能を使用することに慣れています。 この記事では、ColdFusionコンポーネント(CFC)によって、フロントエンドのAdobe Flexアプリケーションにバックエンドデータサービスを提供する方法について説明します。また、Flexアプリケーションの開発でCFCを扱うのに役立つ、Adobe Flash Builder 4ベータ版ツールについても説明します。

CFCへのビジネスロジックの組み込み

ColdFusionのデベロッパーの多くは、アプリケーションのプログラミングを手続き型で行います。つまり、ColdFusionサーバーが最初から最後に向かって処理できるように、CFMLコードを記述します。次のコードは、データベースに対してクエリーを実行し、値をHTMLテーブルに出力するための、一般的な手続き型CFMLディレクティブです。

<cfquery datasource="F4CF_FictitiousSalesPlanner" name="qEmployees">
   SELECT FirstName, LastName, Email, Phone, Region
   FROM SalesTargets
</cfquery>
<table border="1" cellpadding="10">
  <tr>
    <td>FIRST NAME</td>
    <td>LAST NAME</td>
    <td>EMAIL</td>
    <td>PHONE</td>
    <td>REGION</td>
  </tr>
  <cfoutput query="qEmployees">
  <tr>
    <td>#qEmployees.FIRSTNAME#</td>
    <td>#qEmployees.LASTNAME#</td>
    <td>#qEmployees.EMAIL#</td>
    <td>#qEmployees.PHONE#</td>
    <td>#qEmployees.REGION#</td>
  </tr>
  </cfoutput>
</table>

ColdFusionは、以下の2つの目的のために使用されます。

  • データベースからデータを取得する(また、必要に応じてその他のサーバー側サービスを実行する)
  • アプリケーションのユーザーインターフェイスのためのHTMLコードを動的に生成する

ColdFusionとFlexの開発では、フロントエンドのユーザーインターフェイスコードとバックエンドのビジネスロジックを完全に分離する必要があります。ユーザーインターフェイスはFlexフレームワークで作成し、ビジネスロジックはCFCに組み込むのです。

CFCを作成する最初のステップは、サーバー側のニーズを分析してロジック単位に落とし込むことです。このコードでは、アプリケーションには従業員情報が表示されるので、ビジネスロジックCFCの論理名はEmployee.cfcです。

次に、CFCで1つまたは複数の関数を作成し、次のコードのように、cffunctionタグで囲みます。

<cfcomponent>
  <cffunction name="getEmployees">
    <cfargument name="region" type="string" />
    <cfquery datasource="F4CF_FictitiousSalesPlanner" 
      name="qEmployees">
      SELECT FirstName, LastName, Email, Phone, Region
      FROM SalesTargets
      <cfif isDefined("arguments.region")>
        WHERE Region = '#arguments.region#'
      </cfif>
    </cfquery>
    <cfreturn qEmployees>
  </cffunction>
  <cffunction name="insertEmployee">
    ...
  </cffunction>
  <cffunction name="updateEmployees">
    ...
  </cffunction>
  <cffunction name="deleteEmployee">
    ...
  </cffunction>
</cfcomponent>

CFCのgetEmployees関数内のクエリーは、regionというオプションの引数の記述がある点を除き、手続き型コードのクエリーと同じです。 この関数を呼び出すと、cfreturnタグを使用してクエリー結果が返されます。

このCFC関数をCFMページで使用するには、次のコードに示すように、cfinvokeタグを使用して、手続き型のクエリーコードを関数呼び出しに置き換えます。

<cfinvoke component="Employee"
   method="getEmployees"
   returnvariable="qEmployees" />
<table border="1" cellpadding="10">
  <tr>
    <td>FIRST NAME</td>
    <td>LAST NAME</td>
    <td>EMAIL</td>
    <td>PHONE</td>
    <td>REGION</td>
  </tr>
  <cfoutput query="qEmployees">
    <tr>
      <td>#qEmployees.FIRSTNAME#</td>
      <td>#qEmployees.LASTNAME#</td>
      <td>#qEmployees.EMAIL#</td>
      <td>#qEmployees.PHONE#</td>
      <td>#qEmployees.REGION#</td>
    </tr>
  </cfoutput>
</table>

cfinvokeタグは、ファイル拡張子.CFCを付けなくてもEmployee.cfcコンポーネントを参照し、getEmployeesメソッドを呼び出します。returnvariable引数は、CFCメソッド呼び出しから返されたデータに名前を付けます。この名前は、CFMページでデータを参照するために使用できます。このコードでは、returnvariable引数には手順型クエリーと同じ名前が付けられているため、UIをテーブル表示するHTMLおよびCFMLコードの変更は不要です。

注意: CFCの作成の詳細については、この記事の最後のリソースを参照してください。

FlexアプリケーションからこのCFCにアクセスするには、次のコードに示すように、accessプロパティーをcffunctionタグに追加します。

<cffunction name="getEmployees" access="remote">
 ...
</cffunction>

これで、このCFC関数を使用して、HTMLとFlexアプリケーションの両方でサーバー側のビジネスロジック処理を行うことができるようになりました。

Flash Builder 4ベータ版によるCFCを使用した開発

CFCは、任意のコードエディターで作成できます。 また、Flexアプリケーションも、無料のオープンソースのFlexフレームワークSDKと任意のコードエディターで作成できます。しかし、Flash Builder 4ベータ版を使えば、Flexアプリケーションの開発を大幅に効率化できます。これは特に、サーバー側ロジックにCFCを使用する場合に顕著です。

図1に、Flexアプリケーションの開発でCFCを使用するワークフローを示します。

図1.Flexアプリケーションの開発でのCFCの使用

  1. まず、CFC関数を作成し、accessプロパティーをremoteに設定します。次に、Flash Builderベータ版のデータサービスウィザード(New Flex Service)を使用して、CFCに接続します。
  2. ウィザードが実際に動作してCFCを取得し、そのすべての関数と引数を検証してイントロスぺクションを行います。その後、Flash Builderの任意のパネルでCFC関数をデータサービスとして使用できるようになります。
  3. サービス呼び出しから返されたデータへの接続は簡単です。Flash Builderベータ版のデザインモードでユーザーインターフェイスをレイアウトし、「データとサービス」パネルからサービスをドラッグして、UI要素にドロップします。
  4. FlexアプリケーションのソースファイルであるMXMLファイルを保存するたびに、Flash Builderベータ版によって、コンパイルされたSWFファイルが自動生成されます。このSWFファイルは、サーバーに対して実際に動作するアセットであり、CFMLファイルのHTMLコードで参照できます。
  5. 任意のColdFusion開発ツールを使用して、SWFファイルへの参照をHTMLコードに埋め込みます。

SWFファイルとCFCファイル間の実行時の通信

ColdFusionで開発したFlexアプリケーションには、少なくとも以下の3つのファイルが含まれています。

  • アプリケーションのサーバー側ビジネスロジックなどの関数が記述されたCFCファイル
  • FlexアプリケーションのUIが格納されたコンパイル済みのSWFファイル
  • SWFファイルや(該当する場合は)追加のColdFusion/HTMLコンテンツを参照するためのHTMLが埋め込まれたCFMファイル

本番環境におけるこれらのファイルの設定は、ColdFusionで開発したWebアプリケーションと同様です。これらのファイルをサーバーに移動し、データベースに接続するためのデータソースを定義して、CFCのビジネスロジックに必要なその他のサーバー側リソースを設定します。

図2は、ユーザーがFlexアプリケーションを含むCFMページをリクエストした場合の動作の仕組みを示しています。

図2. 実行時のFlexアプリケーションからCFCへのアクセス

  1. ユーザーがCFMページをリクエストすると、ColdFusionサーバーはファイルを見つけて処理を開始します。
  2. CFMページの構築は、手続き型としてすべてのコードをインラインで記述するか、CFCに関数をリクエストする形で行われます。
  3. CFCのビジネスロジックは、データベース、メールサーバー、ファイルシステムなどのシステムリソースにアクセスできます。
  4. CFMページは、CFCデータを使用してHTMLの動的表示を生成します。これには、SWFファイルへの参照が含まれます。
  5. WebページにSWFファイルが表示されると、CFC関数に直接アクセスできるようになります。これは非常に強力で、HTMLページをリフレッシュしなくても、動的コンテンツでユーザーインターフェイスを更新できます。

次のステップ

この記事では、Flexアーキテクチャーの重要な要素としてCFCが必要な理由を説明しました。FlexとColdFusionの学習ページの「ファーストステップ」のセクションにあるチュートリアルで手順に従えば、ここで得た知識を実際に活用できます。まずは、ColdFusionとFlash Builder 4ベータ版の使用について*のチュートリアルから始めるといいでしょう。

ColdFusionコンポーネントの作成について詳しくは、ColdFusionデベロッパーセンター*のほか、以下のリソースを参照してください。

著者について

Trilemetry社*は、人間中心設計アプローチをとりいれたソフトウェアおよびコンテンツを作成している、開発および教育機関です。同社は『Adobe ColdFusion Getting Started Experience』、『Adobe Flex Getting Started Experience』、『Flex in a Week』ビデオシリーズ、オフィシャルAdobe集合研修トレーニングコースの『Flex 3: Extending and Styling Components』など様々なAdobe製品に関する仕事を手掛けています。また、インタラクティブなFlashサイトや企業Webサイトから基幹業務に欠かせないアプリケーションまで、多彩なWebアプリケーションを作成、そして作成をサポートしています。