掲載誌情報
掲載誌 日経Linux 2003/02〜
タイトル リッチインターネットアプリケーションを開発しよう! 第3回
サブタイトル ColdFusion MXとFlash MXで作るリッチインターネットアプリケーションをMVCモデルで学ぶ
【要約】
 連載第3回では、第2回で構築したサーバー環境に対してプログラミングを行っていくこととする。今回は、主にColdFusion MXでバックオフィス側の処理に関するプログラミングを中心に開発を行っていく。

【概要】
 今回はFlash MXで作成されたリッチなインターフェースをフロントエンドでは使用せず、ブラウザーベースの一般的なWEBアプリケーションの開発を行う事で、ColdFusion MXがどのようにデータベースとアクセスするか、そしてどのように各機能をコンポーネント化するかを学んでいくことにする。プログラミングのオーサリング環境も前回クライアントマシンにインストールしたMacromedia Dreamweaver MXを使って、RDS(リモート開発サービス)にてリモートでサーバーへ接続してColdFusionコンポーネントの作成を行う。
 先ず初めに、ColdFusionMXを使っての簡単なプログラミングを学び、次に「勤怠管理システム」の一機能である「新規ユーザ登録」の実装を通して、実際のデータベースに対してデータの登録を行う。そして「勤怠管理システム」で必要な各機能のコンポーネント化を行いながら、ColdFusion MXのプログラミングの解説を行っていくこととする。

1. ColdFusion MXでのプログラミング
  前回でも少し触れたが、ColdFusion MX では、CFML(ColdFusion Markup Language)を用いて開発を行う。CGIのような難しいスクリプト言語を記述しなくても、HTML言語に類似したタグ記述によって、各種演算処理に加え、データベースとの連携が行え、比較的簡単にアプリケーションを構築することができる。
CFMLには、CFMLタグとCFML関数が用意されており、これらを使用してプログラミングを行う。
代表的なCFMLタグ、CFML関数には次のようなものがある。
     
 
CFMLタグ 概要
cfset 変数を定義、値を代入する。
cfif, cfelse, cfelsif 条件分岐を行う。
cfquery データベースに対してデータ取得、登録、更新、削除などの操作を行う。
cfqueryタグ間にSQL文を記述することで、データベースに対するデータ操作を行う。
ColdFusionではデータベースに対する問合せをクエリと呼ぶ。
cfoutput 変数や、クエリの結果を出力する。
cfloop 一連の処理や表示出力を繰り返す。
     
 
CFML関数 概要
Right, Left 文字列の先頭または末尾から指定された文字数分だけ文字列を抽出する。
Find 指定された文字列から特定の文字列を探す。
IsNumeric 指定された変数の値が数値であるかを判定する。
 
※上記以外にも、高度なタグや文字列関数、配列関数、算術関数など、各種タグ・関数が用意されている。

CFMLの詳細については、ColdFusion MXに付属のオンラインドキュメント「CFMLリファレンス」を参考にしていただきたい。
さて、先程紹介したCFMLで記述したプログラムファイルはどのように動作するのだろうか。
通常、HTMLベースのWebサイトでは、基本的にHTMLファイルに記述された内容をそのまま、Webサーバーからブラウザに返すことでWebページが表示される仕組みになっている。
一方、CFMLベースのWebサイトでは、特定の拡張子(.cfm)をもつページにリクエストがあると、ColdFusion ServerによってCFMLが実行された後、実行結果がブラウザに返され、Webページが表示される仕組みとなる。
  1-1. 開発用クライアント環境の準備
    それでは、実際にColdFusion MXのプログラミングを行っていくが、リモートサーバー上に配置するファイルを開発用クライアント環境からプログラミングするために、まずは、Dreamweaver MXの設定を行う。
リモートファイルの管理には、ColdFusion MX / Dreamweaver MXで提供されているRDS(リモート開発サービス)を利用する。

Dreamweaver MXを起動した後、次の操作を行う。
(1) メニューバーから[サイト]-[新規サイト]を選択する。
(2) ダイアログボックスの最上部にある [基本] タブをクリックする。
以降、ウィザード形式で、必要事項を入力しながらサイト定義設定を行っていく。
(3) サイト名を入力する。
ここでは、「日経Linux」とした。
  スクリーン
(4) サーバーテクノロジーを選択する。
ColdFusionのプログラミングを行うので、「はい」をクリックし、「ColdFusion」を選択する。
  スクリーン
(5) 開発ファイルの操作方法を選択する。
RDSを利用して、リモートサーバーに接続するため、「FTPまたはRDSを使用してテストサーバー上で直接ファイルを編集」を選択する。
また、サーバー上のプログラムファイルを編集する際、一旦ローカルマシンにファイルがダウンロードされるため、ファイルが格納されるローカルマシン上の作業ディレクトリを入力する。
  スクリーン
(6) テストサーバーへの接続方法を設定する。
「RDS」を選択後、「設定」ボタンをクリックする。
次に、設定ボタンをクリックして表示された「RDSサーバーの設定」ダイアログボックスで、接続するリモートサーバーの情報を入力する。
前回(第2回)、ColdFusion MXのインストールを行ったが、ここではそのインストール内容に基づいた情報を入力する。
「フルホストディレクトリ」には、Webサーバーの、プログラムファイルを配置するディレクトリを絶対パスで入力する。本連載では、Webサーバーのドキュメントリートディレクトリを設定したとして話を進めさせていただく。
尚、「パスワード」にはColdFusion MXのインルトール時に設定したRDSのパスワードを入力する。
  スクリーン
(7) リモートサーバーのルートURLを設定する。
(6)で設定したフルホストディレクトリに対応するURLを入力する。
  スクリーン
(8) チェックイン/チェックアウト機能を設定する。
Dreamweaver MXには複数ユーザで共同作業をする場合に便利な機能としてチェックイン/チェックアウト機能 ※注 が用意されているが、ここでは、1人での作業と想定し、「チェックイン/チェックアウト機能を有効にしない」を選択する。
複数ユーザで共同開発を行う場合は、チェックイン/チェックアウト機能を利用した方が良いだろう。
  スクリーン
※注: リモートサーバー上のプログラムファイルを複数のユーザで作成/管理する場合、注意していないと、同じファイルを同時に上書き更新してしまう可能性がある。チェックイン/チェックアウト機能を利用すると、ファイル作業時にDreamweaver MXによってチェックアウト(持ち出し)とチェックイン(返却)が自動管理される。そのため、チェックアウト中のファイルは別ユーザによる編集が不可となり、ファイル管理が容易になる。
(9) 設定内容を確認し、「終了」ボタンをクリックする。
  スクリーン
(10) リモートサーバーへの接続を確認する。
サイトパネルにて、先程設定したサイト名および、「リモートビュー」をプルダウンで選択すると、リモートサーバーのディレクトリ/ファイルが表示される。
リモートサーバー上の情報が正しく表示されていれば、設定は完了だ。
  スクリーン

次に、これから新規作成していくプログラムファイルの文字コードを設定しておく。
今回の連載では、文字コードに「UTF-8」を使用しているので、Dreamweaver MXで次の設定を行う。
(1) メニューバーから「編集」-「環境設定」を選択する。
(2) カテゴリから「新規ドキュメント」を選択する。
(3) 「エンコーディング初期設定」で「UTF-8(Unicode)」を選択する。
(4) 「OK」ボタンをクリックする。
  1-2. サンプルプログラムの作成
    準備が整ったところで、早速ColdFusion MXのプログラミングを行ってみる。
まずは、CFMLがどのようなものなのか、簡単なプログラムを作成してみよう。

(1) 初めにリモートサーバー上にファイルを作成する。
作成手順は次のようになる。
A) Dreamweaver MXで先程設定を行ったサイトへ接続する。
その際、サイトパネルのプルダウンで「リモートビュー」を選択しておく。
B) サイトパネル内のルートディレクトリを右クリックし、表示されたメニューから「新規フォルダ」を選択する。
リモートサーバー上にディレクトリが作成されるので、任意の名前をつける。
ここではディレクトリ名を「step1」とした。
  スクリーン
C) 同様に「step1」ディレクトリを右クリックし、今度は「新規ファイル」を選択する。
ファイルが作成されるので、ファイル名を「sample1.cfm」とする。
D) 作成したファイル名をダブルクリックし、ファイルを開く。
E) メニューバーより「表示」-「コード」を選択する。
  スクリーン
(2) 次にsample1.cfmに以下のソースコードを記述し、ファイルを保存する。
<cfprocessingdirective pageencoding="UTF-8">
<cfset price = 145> <!--- 単価 --->
<cfset amount = 5> <!--- 個数 --->
<cfset total = price * amount> <!--- 合計金額を計算 --->
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>日経Linuxサンプル</title>
</head>
<body>
 <!--- 合計金額の表示 --->
 <cfoutput>
 お買い上げありがとうございます。合計金額は#total#円です。
 </cfoutput>
</body>
</html>
(3) ファイルを保存したら、プログラムを実行してみよう。
ブラウザを起動して「http://<ホスト名またはIPアドレス>/step1/sample1.cfm」にアクセスすると以下のような画面が表示されるはずだ。
  スクリーン
以上のプログラムは、単価と個数を計算し、計算結果をブラウザに表示するという非常にシンプルなものだ。
まず、ソースコード中、以下の部分で、単価、個数の値を格納する変数price, amountへ値を代入し、次に、単価、個数から合計金額を計算し、結果を変数totalへ代入している。
変数への値代入を行うには「cfset」CFMLタグを用いる。
<cfset price = 145> <!--- 単価 --->
<cfset amount = 5> <!--- 個数 --->
<cfset total = price * amount> <!--- 合計金額を計算 --->
最後に、以下の部分で、計算結果をブラウザに表示している。
ブラウザに変数の値を表示するには、「cfoutput」タグを用いる。
表示する変数の前後に「<cfoutput>」と「</cfoutput>」を記述することで、ブラウザには変数の値が表示される。ColdFusionでは、変数を表す場合、変数名を「#」で囲み「#接頭辞.フィールド名#」(接頭辞は省略可能)とする。「#」で囲んでおかないと、変数名自体がブラウザに表示されることになる。
<!--- 合計金額の表示 --->
<cfoutput>
お買い上げありがとうございます。合計金額は#total#円です。
</cfoutput>
ちなみに、以下の部分では、<cfprocessingdirective>タグを用いて、ページエンコーディングを指定している。
ColdFusion MXでは、作成したプログラムファイルの文字コードを<cfprocessingdirective>タグで指定しておく。
今回の連載では「UTF-8」を使用しているので、「pageencoding="UTF-8"」としている。
<cfprocessingdirective pageencoding="UTF-8">
  1-3. ColdFusionコンポーネントの作成
    このように、ColdFusion MXでは、通常HTMLタグ中にCFMLタグを記述してプログラムを作成する形となり、直感的に分かりやすく、容易なWebアプリケーション開発が可能となる。
ただ、一方で、ユーザインターフェース(HTML)とビジネスロジック(業務処理の流れやデータベースアクセスロジック)が混在する形になるため、アプリケーションの規模が大きくなると、再利用性の高いビジネスロジックの開発が容易ではなくなる。類似した処理を複数のページで何度も書くのはやはり面倒だ。
そのような問題を解決するための最適な方法として、ColdFusion MXでは、ColdFusionコンポーネントという技術が提供されている。
ColdFusionコンポーネントとして作成することで、再利用可能なビジネスロジックや特定のアプリケーションに依存しないビジネスロジックの開発が可能となる。
また、ColdFusionコンポーネントはColdFusion MXで作成されたWebページからのみでなく、Flashで作成したアプリケーションからも利用することができ、本連載の最終目的であるリッチインターネットアプリケーションの開発には欠かせない。
そこで、早速、先程作成した「sample1.cfm」をコンポーネント化してみる。

(1) 先程と同じ手順で、リモートサーバー上の「step1」ディレクトリ下に、ファイル「calc.cfc」を作成する。次に同ファイルに以下のソースコードを記述し、保存する。
<cfcomponent>
 <cfprocessingdirective pageencoding="UTF-8">
 <cffunction name="totalCalc" access="remote" returnType="numeric" output="false">
  <cfargument name="price" type="numeric" required="true">
  <cfargument name="amount" type="numeric" required="true">
  <cfset total = arguments.price * arguments.amount>
  <cfreturn total>
 </cffunction>
</cfcomponent>
ColdFusionコンポーネントは、ある特定の処理をカプセル化した関数(メソッド)の集まりだ。
関数であるため、当然、必要な情報を受け取り(引数)、処理の結果を返す(戻値)ことができる。
1つのコンポーネント内には、類似した目的を持つ関数(メソッド)を複数提供することが可能だ。
開発言語であるJavaやC++のクラスと同じようなイメージだと思ってもらえれば、分かりやすいだろう。
ここでは、1-2.で作成した「sample1.cfm」の、合計値を計算していた部分(ビジネスロジック)をコンポーネント化し、次のようなメソッドをもつコンポーネント「calc」を作成した。
メソッド名 totalCalc
処理概要 単価と個数から合計金額を算出し、算出結果を返す
引数 単価 個数
戻値 合計金額
尚、コンポーネントの作成といっても、実は1-2.で作成した「sample1.cfm」と同じくCFMLで記述するという点は何も変わらない。異なる点としては、ファイルの拡張子が「.cfc」になっているということと、コンポーネントを定義するためのタグを使用しているという点だ。
ファイル名から拡張子「.cfc」を除いた部分がコンポーネント名となる。
以下にColdFusionコンポーネント作成に用いるタグを紹介する。
CFMLタグ 内 容
cfcomponent コンポーネントであることを定義する。
コンポーネント内部の記述の開始と終了を明示するためのタグ。
cffunction コンポーネントがもつメソッドを宣言する。
cffunctionタグ内に、メソッドが呼ばれた際の処理を記述する。
代表的なタグの属性には次のものがある。
name属性
  メソッド名を指定する。
returnType属性
  メソッドが返す戻値のデータ型を指定する。
指定する値としては、例えば次のようなものがある。
numeric(数値型)、string(文字列型)、query(クエリ)、void(値を返さない)
cfargument メソッドが呼ばれる際の引数を宣言する。
代表的なタグの属性には次のものがある。
name属性
  引数名を指定する。
type属性
  引数のデータ型を指定する。
指定する値としては、例えば次のようなものがある。
numeric(数値型)、string(文字列型)
cfreturn メソッドが実行された結果を戻り値で返す。
返す値を<cfreturn 値>のように記述する。
「cffunction」タグ内で、「cfargument」タグで宣言した引数を参照するには、「arguments.引数名」と記述する。
(2) 同様に「step1」ディレクトリ下に、ファイル「sample2.cfm」を作成、以下のソースコードを記述し、保存する。
<cfprocessingdirective pageencoding="UTF-8">

<!--- コンポーネントの呼出 --->
<cfinvoke component="calc" method="totalCalc" returnvariable="total">
 <cfinvokeargument name="price" value="145">
 <cfinvokeargument name="amount" value="5">
</cfinvoke>
(A)

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>日経Linuxサンプル</title>
</head>
<body>
 <!--- 合計金額の表示 --->
 <cfoutput>
 お買い上げありがとうございます。合計金額は#total#円です。
 </cfoutput>
</body>
</html>
1-2.で作成した「sample1.cfm」との違いは(A)の部分のみである。
(A)では、先程作成したCFC「calc」を呼び出し、結果を変数「total」で受け取っている。
以下にColdFusionコンポーネント呼び出しに用いるタグを紹介する。
CFMLタグ 内 容
cfinvoke コンポーネントを呼び出す。
代表的なタグの属性には次のものがある。
component属性
  呼び出すコンポーネント名を指定する。
method属性
  呼び出すメソッド名を指定する。
returnvariable属性
  メソッドの戻値が格納される変数名を指定する。
cfinvokeargument メソッドへの引数を指定する。
cfinvokeタグの内側に記述する。
代表的なタグの属性には次のものがある。
name属性
  メソッドで指定されている引数名を指定する。
value属性
  引数として渡す値を指定する。
(3) ファイルを保存したら、プログラムを実行してみよう。
ブラウザを起動して「http://<ホスト名またはIPアドレス>/step1/sample2.cfm」にアクセスすると1-2.の実行結果と同じ画面が表示されるはずである。

  NEXT
PAGETOP
CLOSE