Flash & ColdFusionでRemoting

講師：岡本 直美

今回はColdFusionでデータベースを管理をしてFlashで読み込む方法を見せてくださいました。

岡本さん推薦の「FLASH MX + ColdFusion MX リッチインターネットアプリケーション上級構築事例集（技術評論社刊）」を見てみると、楽しい開発事例がありました。

チョコレートの販売サイト：CAFFAREL（http://www.caffarel.co.jp/）
チョコ自体も可愛いのですが、選んでカートに入れるまでのアニメが可愛くて商品の魅力が倍増という感じです。

以下岡本さんが書いてくださった文章を掲載させていただきます。

データベースってなに？

データベースというのは、ある項目を鍵にして
ダイレクトに検索することの出来る情報の塊のことです。

図書館はたくさん本がありますよね？
で、必要な本を１冊だけ探すのは大変。 「Flashの本ありますか？」って聞くと「ここには、10冊ありますよ」と答える図書館員さんがいる・・、 データベースは、そんな図書館のようなものだと思ってください。

そんなデータベースの中でもテーブル（図書館で言えば本棚）の中の
項目同士を関連つけて処理することの出来るものをリレーショナルデータベースといいます。近年はコレが主流です。
そのRDB（リレーショナルデータベース）の中でwebサイトで よく使われているものには、MySQLやPostgreSQLやOracleなどがあります。

今回は、開発環境がWindowsなので、ポピュラーなMS Accessを使います。（他にColdFusion MXで扱えるデータベースは多数あります。）

（*岡本さん提供のデータより）

一番上の行が各列の情報の名前。以下同じ仲間の情報が続きます。

ColdFusion MXってなに？

・webサービスやデータベースなどの情報を検索表示したり、
・サーバー内にディレクトリやファイルを作っちゃったり
・メールを送ったり受け取ったり・・・

またColdFusion MXは、サーバー内検索機能が非常に高くまた、グラフをSWFで直接書き出すこともできます。

しかもwebサーバーのOSを意識せず、CFML（ColdFusion Markup LaLanguage）タグという比較的わかりやすい言語で指示することが出来るのでHTMLを知っている人ならとても理解しやすいと思います。

しかもMacromedia製品とは親和性が高いし、開発のみなら商用の日本語版 エンタープライズ版（120万円）と同じものがずっと無料で使えます。

参考：アンケートコム（http://www.anketo.com/）
Macromedia MAX アワード Japan コンテストで「優秀賞」を取っています。

CFMLで書かれたファイルをCFテンプレートと言い、拡張子は.cfmです。
ColdFusion MXでは、CFテンプレートを元にHTMLに書き換えてブラウザに表示します。

CFコンポーネントって？Flash Remotingって？

FlashからColdFusion MXを利用する場合にはCFコンポーネントというファイルを介して行います。 （拡張子は.cfcです。）

CFコンポーネントを利用したSWFとColdFusion MXのゲートウェイを
「Flash Remoting」といいます。

コレを利用することによって、CFML＋HTMLのようにいちいちブラウザに書き出ししない上に、動きや音などをつけてわかりやすいユーザーインターフェイスを作ることが出来るようになります。

Flash Remotingは、本来ColdFusion MXの機能ですが単体パッケージで.NET版とJAVA版もありますので、必ずしもColdFusion MXじゃなければFlash Remotingが出来ないわけではありません。

つまり、Flash Remotingというのは、SWFを使ってデータベースに接続したりメールサービスを使えたり・・・と、なにやら面白そうなことが出来るようになるのであります。

準備しよう！

岡本さんによると今回インストールが必要なアプリケーションは以下の通りです。

(1)Macromedia Flash MX
(2)Flash Remoting MXコンポーネント
(3)ColdFusion MXデベロッパー版
(4)Microsoft Access

マクロメディア社のホームページにFlash MXとColdFusionの開発の準備の手順が出ていますので、こちらも参考にしてください。>>HPを見る

どうしてもMacでやりたいひとはここを見てね・・・

ColdFusionにDBを登録しよう！

必要なアプリケーションをインストールしたら、いよいよColdFusionにDBを登録します。

その前に、今回使用するデータをダウンロードしてください。
>>データーをダウンロード

ダウンロードしたデータをC:\CFusionMX\wwwroot以下にF-siteというフォルダを作って展開してください。以後の作業はこのフォルダ内の素材を使って進めていきます。
（※注：CFMXをインストールしたドライブで作業行ってください。）

その中に入っている001.mdbというファイルをC:\CFusionMX\dbに移動します。

■DB登録までの手順はこちらをクリック

セミナー参加申し込みフォームを作ろう

今回ダウンロードしていただいたデータは、岡本さん作成の「セミナー参加申し込みフォーム」完成版です。

名前とメールアドレス、メモを書き込んで申し込みボタンを押すと、先ほどColdFusionに登録した001.mdbに追加登録される仕組みになっています。

とりあえず、C:\CFusionMX\wwwroot\F-site\seminar.flaを開いてムービーのプレビューでフォームに適当に記入して申し込みボタンを押してみましょう。

出力ウインドウに「書き込みが完了」の文字が出たら成功です。出ない人はもう一度ファイルの置き場所を確認してください。

DBの中身を確認しよう

「書き込み完了」のサインが出た方はDBの中身を見て見ましょう。
今回はDreamweaverからDBを確認してみます。
それでは、DreamweaverでC:\CFusionMX\wwwroot\F-site\seminar.cfcを開いてください。

■DreamweaverでのDB確認の手順はこちらをクリック

CFコンポーネント

先ほど開いたseminar.cfcをご覧頂くと次のようになっています。

<CFCOMPONENT>
<CFFUNCTION name="INPUT_DATA" access="remote">
<CFARGUMENT name="name">
<CFARGUMENT name="name2">
<CFARGUMENT name="email">
<CFARGUMENT name="memo">
<CFQUERY name="INPUT_DATA" datasource="001">
INSERT INTO regist(name,name2,email,memo)
VALUES('#name#','#name2#','#email#','#memo#')
</CFQUERY>
</CFFUNCTION>
</CFCOMPONENT>

CFコンポーネントは<CFCOMPONENT>というタグを使います。
今回は、その中に<CFFUNCTION>タグで、ユーザー関数としてINPUT_DATAという名前の関数を登録します。
（access属性はremoteにすることでFLASH Remotingを利用するようになります。）

内容は何をしているかなんですが、<CFAGUMENT>タグでINPUT_DATAで使う項目を定義し、<CFQUERY>で囲ったSQL文でデータベースに指示をだします。今回はregistテーブルにデータを挿入するというSQL文を書きました。

#変数名#で囲うのはCFMLの文法ですが、それ以外は一般のSQLに乗っ取ってます。

SQLというのは、Structured Query Language（構造化問合わせ言語）ていうもので、リレーショナルデータベースを問合わせする為の言語です。
データの挿入はINSERT、検索はSELECT、更新はUPDATE、削除はDELETEを使います。

インスタンス名をつけよう。

ActionScriptを見る前にステージ上のテキストフィールドのインスタンス名をつけましょう。

このインスタンス名はデータベースの各情報の名前と一致しています。CFCでも同じ名前を使いました。

■インスタンス名を確かめてみる。

ActionScriptを見てみよう。

先ほどFlash MXで開いたC:\CFusionMX\wwwroot\F-site\seminar.flaをご覧になってください。

---------------------------------------
1:stop();
2 :#include "NetServices.as"
3 :#include "NetDebug.as"
4 :NetServices.setDefaultGatewayUrl
("http://localhost:8500/flashservices/gateway");
5 :gatewayConnection = NetServices.createGatewayConnection();
6 :seminar = gatewayConnection.getService("F-site.seminar", this);
7 :
8 :function INPUT_DATA() {
9 :seminar.INPUT_DATA(name.text,name2.text,email.text,memo.text);
10 :}
11 :
12:function INPUT_DATA_Result() {
13:trace("書き込み完了");
14:
}
---------------------------------------

１行目は必要に応じて書いてください。
２、３行目は、Flash Remotingを使う（あるいはデバッグする）際に必要な
.asファイルをインクルードしてますので、必ず書いておいてください。
（今回外部ファイルの読み込みが出来るようになりましたが、ここではC:\Program Files\Macromedia\Flash MX\Configuration\Include以下にあるNetServices.asとNetDebug.asを読み込んでいます。）

４行目は今回ローカルマシンでのテストなので、こう書いてありますが、実際に本番サーバーの場合は必要に応じてColdFusion MXをインストールしてあるドメインのゲートウェイに書き換えてください。

５行目は、gatewayConnectionという任意のオブジェクトにゲートウェイ接続メ ソッドを定義することで、接続を確立します。

６行目は、seminarというオブジェクトの定義は、SWFを実行している場所からCFコンポーネントのある場所を指示しています。
F-siteというディレクトリのseminar.cfcという意味です。

８〜９行目はCFコンポーネントsemiarで定義したinput_dataメソッドにテキストフィールドの値を渡すメソッドを定義しています。
実際には、ボタンが押された時に実行するようにボタンコンポーネントのClick Handlarにここの関数を設定しています。

１２行目はデータの挿入が成功した後の処理を書きます。
ここではテキストフィールドをクリアにして、
出力画面に「書き込み成功」と表示させています。

今回は35分ほどの時間だったので、Flash Remotingのほんの触り程度しか出来ませんでしたが

例えば、CFコンポーネントの部分に

<CFFUNCTION name="LIST_DATA" access="remote">
<CFARGUMENT name="name">
<CFQUERY name="LIST_DATA" datasource="001">
SELECT * FROM regist ORDER BY name ASC
</CFQUERY>
</CFFUNCTION>

と名前順にデータを抽出するユーザー関数を定義しSWFへ一覧表示させることも出来ますし、もしくは座標データをデータベースにも持たせて地図と関連付けるとか勿論ショッピングカートや予約システムとかどのようなデータを持ってどのように表現するのか?という工夫でいろいろなことを実現できると思います。

OSのユーザーインターフェイスではなくデザイン化したあるいは誰もがわかりやすいユーザーインターフェイスをSWFで作るということもRemotingを活かす手法だと思います。

ぜひ皆さんもチャレンジして、もっとすごいものを作ってください。