伝（つて） まち・ひと・もの アーカイブプロジェクト
作成日
28 March 2008
ページ ツール |
必要条件
ユーザーレベル
中級
必要な製品
- ColdFusion 8 (Download trial)
- Flash Professional CS3 (Download trial)
はじめに
「伝（つて） まち・ひと・もの アーカイブプロジェクト」は、中部学院大学短期大学部経営情報学科による「地域人の育成を目指す」取り組みの一つとして立ち上げられたwebサイトです。
地域人とは、生まれ育った地域で学び、働き、地域を愛する人材を指す造語ですが、こうした人材を育成する手段の一つとして「伝（つて）」は制作されました。若者（学生）が、地方の魅力をありのままの姿で、そこに暮らす人の視点で発信・表現するための手段として、本コンテンツでは写真投稿サイトの体裁をとることになりました。写真を通して、人々の暮らしをリアルに伝えるとともに、思いもかけない情報との出会いの場を演出することを意図しています。
この思いもかけない情報との出会いの演出のために、「伝（つて）」では、インターフェースに工夫を凝らしました。具体的には、目的の写真に加え、タグで関連づけられた情報が次々に表示されるという仕組みを提供するというものです。
技術の選択について
タグにより関連づけられた写真（情報）が次々に表示される仕組みを実現するにあたり、早い段階からいくつかの技術的な課題があがっていました。
思いがけない情報との出会いを楽しみながら、次々と「写真を見てしまう」しかけを提供するためには、
- 写真（サムネイル）にマウスを乗せるたびに実行されるタグ検索のパフォーマンスの実現
- 検索結果であるサムネイルの表示パフォーマンスの実現
が必要となります。
これらの課題を解決する手段として、サーバサイド技術として「ColdFusion8（以下CF8）」、クライアント（ブラウザ）技術として「ActionScript3（以下AS3）」を、そしてその両者の通信方法として AMF3 を選択しました。
CF8 で新たに実装されたイメージまわりの機能、AS3 で実現されるパフォーマンス、AMF3 によるバイナリ通信は上記の課題を解決するための最適な組み合わせとなるのではないかいう結論に至ったからです。
以下、詳細についてご紹介をさせて頂きます。
システム概要
ColdFusion 8
伝（つて）プロジェクトの開発をスタートした時期は、ちょうどColdFusion8日本語版発売のタイミングでした。CF8 は RIA バックエンド開発のための機能強化を始め、多くの新機能が実装され、これまで以上に生産性を高めるソリューションになりました。今回のコンテンツで利用した主な機能は次のようなものです。
イメージ操作
伝（つて）プロジェクトでは、Flashからポストされた画像を CF8 で受け取り、サーバのストレージへ保存する際に、投稿写真一覧用のサムネイル画像をサーバサイドで自動生成する機能のため、CF8 の新機能のひとつであるイメージ操作機能を使用しました。
今回使った機能は、
- イメージの情報取得機能
- Webルート外のイメージファイルの表示機能
- イメージのサイズ変更機能
- イメージ変換後の保存機能
など４つ程度でしたが、CF8 にはイメージ操作に関する 50 以上もの機能が用意されているため、今後予定されている機能追加にも短期間で応えられると考えています。前バージョンまでは、イメージを操作するためには、別途サードパーティのモジュールを利用して実装する必要がありましたが、CF8 がイメージまわりの多彩な機能を実装したことは、開発スピードや効率のうえで大きなアドバンテージになると感じています。
タスクスケジューリング
CF8 には Adobe ColdFusion Administrator と呼ばれる Web ブラウザベースの管理画面が用意されています。この管理画面を使うことで、CF8 のほとんどの設定を Web ブラウザ上で行うことができます。
そのひとつにタスクスケジュールの設定管理機能があります。
タスクスケジュール機能では、開発した CFM ファイルをバックグラウンドで実行する時間や頻度を詳細に設定できます。
伝（つて）では、PC からの投稿の他に、携帯電話で撮影した写真ファイルを添付したメールを、エントリー用メールアドレス宛に送信する事でエントリーを受け付けるサービスを用意しています。このタスクスケジューリングを利用して、サーバサイドで受信メールを解析し、エントリー処理を行うファイルを用意するといった処理を定期的に実行しています。
こうした設定がWebブラウザ上で簡単に設定できるのも、CF8の 魅力のひとつです。
また、エントリー処理だけではなく、ファイルのクリーンアップ処理などもスケジュールタスクで実行しています。
データベース連携
Flash では直接データベースとデータ通信を行うことはできないため、CF8 を経由してデータ通信を行っています。
ColdFusion の CFC と呼ばれるコンポーネントを作成し、データベースとの通信処理を関数化し、Flash 向けに API として提供しています。
Flash から API を呼び出すには、Flash Remoting ゲートウェイを使うことで Query 結果をそのまま返す事ができます。DB との連携の際には、AMF3 によるバイナリ通信を取り入れたため、通信と描画の両方で高いパフォーマンスを得ることができました。このパフォーマンスについては、次のユーザインタフェースの項でさらに詳しくご紹介いたします。
ユーザインタフェース
伝（つて）のメインユーザーインターフェースでは写真につけられたタグをもとに縦横に次々に展開していきます。基本的には同一のタグを持つ写真をデータベースから抽出し、表示するというシンプルなものです。しかし、気持ちよく展開し続けるためには通信も含めたパフォーマンスがとても重要になってきます。表示の度に待たされるようでは、インターフェースとしてはとても成り立たないと当初から懸念されていました。そこで、検討されたのが、AS3 と AMF (Action Message Format) を用いて、CF8 とバイナリ通信を行うというものです。
AMFによるバイナリ通信
今回採用したインタフェースでは、サーバとの通信スピードに加え、ブラウザでの描画までのレスポンスが求められます。バイナリ通信により、データのやりとりに XML が介在しないため、Flash 側で XML のパースが必要ないというのが描画処理を行うまでの処理としては、大きなメリットとなります。
Flash から AMF を利用するには ColdFusion の開発担当者と API の IN-OUT を事前に取り決めておくことが重要です。例えば、Flash 側で表示したり、ソートしたりするために必要なデータはこれこれです。というと、では、CF8 側には引数としてこれこれをください。というやりとりを事前のミーティングで行いました。あとは、必要な引数を用意して ColdFusion 側に送り、返ってきたデータを加工して表示するだけと、Flash 側の処理にのみ専念することができます。
以下は簡単な Flash 側の処理の流れです。
1.NetConnection クラスを継承してゲートウェイに接続するサブクラスをつくる。
package {
import flash.net.NetConnection;
import flash.net.ObjectEncoding;
public class RemotingService extends NetConnection {
function RemotingService(url:String) {
objectEncoding = ObjectEncoding.AMF3;
connect(url);
}
}
}}
2.（通信が必要なクラスから）ColdFusion8のゲートウェイに接続
var rs:RemotingService=new RemotingService("http://[サーバー名]/[ゲートウェイへのパス]")
3.返ってくる結果を受ける responder を作成
var responder:Responder = new Responder(onResult, onFault);
4.responder で受けとった結果の処理を定義
private function onResult(result):void {
//結果処理
}
private function onFault(fault:Object):void {
//エラー処理
trace("エラー："+fault.description);
}
5.ColdFusion 側で用意されたcfcコンポーネント（関数）を必要なパラメータをつけて呼び出す
rs.call("cfcコンポーネントの関数名を指定", responder, 引数1,引数2,引数3,引数4);
6.値が返ってくると responder に定義した onResult が実行される
厳密にはエラー処理の分岐などその他の処理も必要ですが、大まかには以上の流れで、
（例）
var nSearchResults:uint=result.RETURN_VAL.serverInfo.initialData.length
trace("検索結果は",nSearchResults,"件です。")
開発開始当初はアクセスできない！と焦りを感じたこともありましたが、
for(var obj in result){
trace(obj)
}
と、result に対して内容を表示してみるとちゃんとデータが格納されていることが確認できました。
あとはすべて同じ流れでサーバーとの連携が行えるので、XML を介して行うよりも非常に効率よく開発ができると感じました。それでいてスピードも速いとなれば積極的に使っていくべきでしょう。
AS3の正規表現
また、今回の開発で非常に役立った機能は AS3 からサポートされた正規表現です。Flash 側でも正規表現でテキストの整合性を確認したり、置換えしたりと手軽に行えるようになりました。そのため、CF8 と分担、または二重にデータチェックをすることで不正なデータを整形したり排除して、より確実なデータベースの構築につながります。また、Flash側からサーバーへの通信を極力減らすことにも役立っています。
開発生産性
CFC で 開発したビジネスロジックは、CFM からの呼び出しはもちろん、Flashから直接呼び出す事もできますし、JavaScript からも直接呼び出せるようになりました。
（CFM とは CFML という ColdFusion の開発言語で作成されたファイルです。）
具体的な例をひとつ紹介します。Flash 向けに投稿詳細情報を返す API は、CFM ベースの投稿管理画面でも呼び出して使用しています。同じプログラムを書く必要がないだけでなく、メンテナンス性も向上する結果となっていると言えます。
また、CFC を使えばオブジェクト指向の開発ができるため、例えば Flash 向けに構築した CFC を継承して二次利用していく事もできます。
API開発
前述の通り、Flash と CF8 のデータ通信は API で行うため、Flash 側で扱いやすい API を構築する必要がありました。API の設計が非常に重要なため、クライアントサイドとサーバサイドの開発関係者で集まり、概要設計書を実現すべくブレストベースで行いました。その後にAPI設計書としてまとめて共有し、必要に応じて更新をしていく方法をとりました。開発手法はいくつかありますが、大きな打ち合わせはこの最初のブレストだけでスムーズに開発をする事ができましたので、最適な方法だったと考えられます。概要設計書をベースに API を定義し、ミツエーリンクスとエスアイヤそれぞれで分担範囲を切り分け、それぞれの得意分野で作業を進めることができました。
まとめ
ミツエーリンクスとエスアイヤでの連携開発は今回が初めてでしたが、到達すべきゴールが明確だったため、初期の技術選定の段階から効率的に開発を進めることができました。これまでの開発の多くは、Flash と PHP の組み合わせによるものでしたが、Flash と ColdFusion との組み合わせの親和性の高さを改めて実感することになりました。イメージ操作など、Flash コンテンツで実装することが多い機能が CF8 との連携でより高いパフォーマンスで、容易に実現できるのは、限られた開発期間の中でも大きなアドバンテージとなると確信しています。
最後になりますが、実は、ラスベガスで開催された Adobe MAX 2006 でご一緒させて頂いたのが、ミツエーリンクスとエスアイヤが共同開発をするきっかけとなりました。思いもかけない素敵な出会いと、伝（つて）という素敵なコンテンツの制作の機会を与えてくださった中部学院大学短期大学部経営情報学科様に、この場をお借りして感謝の意を表したいと思います。
