defide inc.

掲載誌	日経Linux　2003/02～
タイトル	リッチインターネットアプリケーションを開発しよう！　第５回
サブタイトル	ColdFusion MXとFlash MXで作るリッチインターネットアプリケーションをMVCモデルで学ぶ

第１回

【要約】
　Flash　MXによるリッチなインタフェースを用いて勤怠管理システムを構築していく。勤怠管理システムを通して、MVCアーキテクチャに基づいたFlashの開発手法を習得していただきたい。

【概要】
　前回学んだFlash MXでの開発手法を発展させ、今回は、いよいよFlash　MXによるリッチなインタフェースを用いた勤怠管理システムを構築していく。
　勤怠管理システムを通して、MVCアーキテクチャに基づいたFlashの開発手法、および、第4回で作成したColdFusionコンポーネントによるバックオフィスシステムとの連携方法を学んでいく。
　なお、今回も前回同様、プログラミングのオーサリング環境に、Macromedia Flash MXを使用する。

１．

勤怠管理システム

それでは、Flash MXによるリッチなインタフェースを用いた勤怠管理システムの構築について解説していく。
本連載で開発する勤怠管理システムに実装する機能は，出退社時にタイムカードを記録する（1）「出社打刻」と（2）「退社打刻」，月ごとの出退社状況を閲覧する（3）「タイムカード参照」，そして、タイムカードを利用するユーザーの管理を行う（4）「ユーザー登録」と（5）「ユーザー修正」と（6）「ユーザー削除」の6つである。
（図1-1 勤怠管理システム実装機能）
実装機能のユースケース図

それぞれの機能詳細については、連載第2回で設計を行っているのでそちらを参照していただきたい。
本連載では、Flash MXによる次のようなユーザインタフェースをもつ勤怠管理システムサンプルを用意した。
（図1-3　タイムカード打刻画面）
メインメニューには下記メニューが用意されており、メニューをクリックして各機能を利用する。

(1)	Timecard / 出退社
(2)	Timecard / 参照
(3)	UserManagement / 新規ユーザ登録
(4)	UserManagement / ユーザ情報変更

各機能の概要は次のようになる。

○勤怠管理システム機能概要

(1)	Timecard / 出退社　タイムカードの出社打刻、退社打刻を行う。（図1-3　タイムカード打刻画面）勤怠管理システム利用ユーザ（(3)新規ユーザ登録機能で予め登録しておいたユーザ）の「UserID」、「Password」を入力し、「出社」ボタンをクリックすると出社打刻が、「退社」ボタンをクリックすると退社打刻が行われる。打刻が行われた後はメッセージが表示される。（図1-4　打刻メッセージ画面）また、入力した「UserID」、「Password」が誤っていた場合などはエラーメッセージが表示される。（図1-5　エラーメッセージ画面）
(2)	Timecard / 参照月ごとの出退社状況を閲覧する。出退社状況を参照するユーザー名を選択し、（図1-6　タイムカード参照ユーザー選択画面）「参照」ボタンをクリックすると、月ごとの出退社時間が一覧表示される。（図1-7　タイムカード参照画面）「次月」、「前月」ボタンクリックで対応月の出退社状況を閲覧可能だ。
(3)	UserManagement / 新規ユーザー登録勤怠管理システムを利用するユーザー情報を新規登録する。（図1-8　新規ユーザー登録画面）各情報を入力し、「登録」ボタンをクリックすると、入力情報が登録される。
(4)	UserManagement / ユーザー情報変更勤怠管理システムを利用するユーザー情報の変更を行う。変更するユーザー名を選択し、（図1-9　ユーザー選択画面）「修正」ボタンをクリックすると、選択ユーザーの登録情報が表示される。各情報を変更した後、「登録」ボタンをクリックすると、入力情報が登録される。

２．

MVCアーキテクチャ

勤怠管理システムは，MVCアーキテクチャを基本とした設計モデルにより実装を行う。MVCアーキテクチャとはアプリケーションを開発する場合に，各役割をModelとView，Controllerの3つに分けて実装する手法のことだ。「View」は，実際にユーザーが目にするユーザー・インタフェースを担当し，Viewで入力された値などを受け取った「Controller」がデータを制御して，データを要求された処理に従ってそれぞれのビジネス・ロジックである「Model」に受け渡す。MVCアーキテクチャで開発しておけば，システムを改変や拡張する際に，各部分で作成したアプリケーションの再利用が可能になる。
なお，ViewやController，ModelをColdFusion MXとFlash MXに当てはめてみると以下のようになる。V i e w（Flash MXでデザインしたユーザー・インタフェースと，ActionScriptファイル）から得た情報を，C o n t r o l l e r（ A c t i o nScriptファイル）が受け取る。受け取ったデータをModel （ActionScriptファイル）が処理する。Modelが処理を受け渡す，バックエンドのDBMSとの接続API であるColdFusionコンポーネント（CFCsファイル）によってサーバー側の処理が実行される。そして，DBMSとの接続APIからM o d e l が処理結果を受け取り，Controllerを経由して，Viewであるユーザー・インタフェースに渡し，一連の処理が完了する。
（図2-1 MVCアーキテクチャによるリッチインターネットアプリケーションの処理の流れ）

なお、バックエンドの接続APIは、連載第4回で開発済みのColdFusionコンポーネントとなる。
今回は、先程の図中、View, Controller, Modelの部分を解説していく。

それでは、MVCアーキテクチャにより、どのようにプログラミングを行うのかを具体的に考えてみる。
先程紹介した、勤怠管理システムの「タイムカード打刻」機能（図1-3　タイムカード打刻画面）、「タイムカード参照」機能（図1-6　タイムカード参照ユーザー選択画面）では、ボタンがクリックされた際、それぞれ次のような処理を行う。

【タイムカード打刻機能】
出社（退社）ボタンがクリックされた場合の処理の流れ

(1)	出社（退社）ボタンのクリックイベントを検知（onPressイベントハンドリング）
	↓
(2)	入力情報（UserID,Password）を取得
	↓
(3)	入力情報をサーバー（ColdFusionコンポーネント）へ送信（DBへ打刻情報登録）
	↓
(4)	ColdFusionコンポーネントから結果を受信
	↓
(5)	メッセージを画面表示

【タイムカード参照機能】
参照ボタンがクリックされた場合の処理の流れ

(1)	参照ボタンのクリックイベントを検知（onPressイベントハンドリング）
	↓
(2)	入力情報（選択されたユーザのUserID）を取得
	↓
(3)	サーバー（ColdFusionコンポーネント）から出退社情報を取得（DBから出退社情報を取得登録）
	↓
(4)	ColdFusionコンポーネントから結果を受信
	↓
(5)	出退社時間を画面表示

このように、イベントハンドリングや、データ表示、データ取得、ColdFusionコンポーネントとのやりとりなど、様々な処理を行う必要がある。
これらの処理を、MVCアーキテクチャのModel、View、Contoroller各役割に応じてあてはめると、次の図のとおりとなる。
（図2-2 Model, View, Controllerの役割）

１・２・３