掲載誌情報
掲載誌 日経Linux 2003/02〜
タイトル リッチインターネットアプリケーションを開発しよう! 第2回
サブタイトル ColdFusion MXとFlash MXで作るリッチインターネットアプリケーションをMVCモデルで学ぶ
第1回 第2回 第3回 第4回 第5回

2. オーサリング環境の構築
   次にユーザーインターフェースの作成やActionScriptのコーディングを行うFlash MX、ColdFusion Markup Language/ActionScriptのコーディングやHTMLデザインを行うDreamweaver MX、フロントエンドのFlashのUIとバックオフィスのColdFusion MXサーバとの接続を行うFlash Remoting MXコンポーネントをオーサリング環境であるクライアントマシンにインストールする。(本連載ではWindows XPにインストールを行う。)
     
  (1) Macromedia Dreamweaver MXをクライアントマシンへインストールする
   
A) 下記サイトよりダウンロードした「dreamweaver_mx_trial_ja.exe」を、インストールを行うクライアントマシンで実行し、インストールを完了する。
B) ここでのインストールはウィザード形式で行うため、ウィザードの指示に従っていただきたい。
  ウィザード
  (2) Macromedia Flash MXをクライアントマシンへインストールする
   
A) 下記サイトよりダウンロードした「flash_mx_trial_ja.exe」を、インストールを行うクライアントマシンで実行し、インストールを完了する。
B) ここでのインストールはウィザード形式で行うため、ウィザードの指示に従っていただきたい。
  ウィザード
  (3) Macromedia Flash Remoting MXコンポーネントをクライアントマシンへインストールする
    Macromedia Flash Remoting MXコンポーネントは、Macromedia Flash MXのオーサリング環境を拡張して、バックオフィスのColdFusion MXサーバと接続する際に必要なActionScript APIをFlash MXへ追加するものである。
注: Flash Remoting MXコンポーネントとFlash Remoting MXとは異なるため注意が必要。Flash Remoting MXはサーバサイドにインストールするFlash MXとサーバサイドを結びつけるテクノロジーであるが、ColdFusion MXには既にFlash Remoting MXは実装済みのため、別途インストールの必要は無い。

A) 下記サイトよりダウンロードした「FlashRmtngCmpntsInstall_ja.exe」を、インストールを行うクライアントマシンで実行し、インストールを完了する。
B) ここでのインストールはウィザード形式で行うため、ウィザードの指示に従っていただきたい。
  ウィザード
     
    【ダウンロード】
●Macromedia Flash MX 、Macromedia Dreamweaver MXのトライアル版ダウンロード
 http://www.macromedia.com/jp/software/trial_download/
●Macromedia Flash Remoting MXコンポーネントのダウンロード
 http://www.macromedia.com/jp/software/flashremoting/downloads/components/
3. 「勤怠管理システム」の要件定義と仕様設計
  (1) サイト全体の構成と画面遷移を設計する
     今回のシステムの要件を定義し仕様を設計するために、先ずはシステム全体の構成を検討する必要がある。
「勤怠管理システム」は、タイムカードに対して出社時の「出社打刻」、退社時の「退社打刻」、月毎の「タイムカード参照」を行う「タイムカード」サービスと、タイムカードを利用するユーザの「ユーザ登録」「ユーザ修正」「ユーザ削除」を行う「ユーザ管理」サービスという2つの大きなサービスカテゴリから構成されるシステムである。
 先ずはサイトの構成を検討し必要な画面を抽出するために、サイトマップを作成する。今回の場合、各サービスの各機能サブページも含めると10数画面で構成される。(図:サイトマップ.pdf参照)
 デザイナーがFlash MXでインターフェースデザインを行う上での指針となる画面のワイヤーフレームも、使い勝手の良いWEBアプリケーションを作る上で重要となる。これは各画面の構成要素を単純に配置したものでありデザイン的な要素を含むものではないが、視覚的なドキュメントとしてデザイナーに渡すことで、より綿密なコミュニケーションを図るための重要な仕様書となる。今回は誌面の都合上「タイムカード打刻を行なう画面」と「タイムカード一覧画面」のみ掲載する。(図:WF_打刻.pdfWF_一覧.pdf

A) 出社及び退社打刻に関する仕様設計
 ユーザが出勤して先ず行うアクションは出社打刻であるが、システム的には誰の出社打刻であるのかを判定する必要があるため、本システムではユーザ登録時に登録された「ID」「パスワード」を入力して、誰のタイムカード出社打刻かを判定する。
よって登録されていない「ID」「パスワード」を入力したユーザは、当然打刻することはできず、画面にはエラーメッセージが表示される。また、既に出社打刻を行ったユーザが再度出社打刻を行おうとした場合もエラーメッセージが表示される仕様とする。
出社打刻の流れをアクティビティ図にて参照していただきたい。(図:アクティビティ図.pdf
 次に入力制限に関しては、入力フィールドである「ID」「パスワード」はいずれも、半角英数字のみ入力を受け付け、NULLの受付は行わない。
 入力された「ID」「パスワード」が適正な値の場合、データベースのユーザテーブル(UserTable)に該当レコードが存在するか否かを確認する。該当レコードが存在する、即ち適正なユーザの「ID」「パスワード」の場合、タイムカードテーブル(TimecardTable)に既に同日の打刻(対象ユーザの対象月日のレコードが存在しないかの確認)が無いかを確認して、無ければタイムカードテーブル(TimecardTable)にレコードを追加する。対象ユーザのユーザIDを「UserID」フィールドに、出社時刻を「ComingTime」フィールドに書き込む。
 出社打刻と同様に、退社時にユーザが行うアクションが退社打刻となるが、データベースまでのシステムの流れは出社打刻と同様であるため割愛させていただき、データベースへの書き込みを説明する。
 データベースに情報を書き込む場合、先ずは対象ユーザの対象月日のレコードを検索する。ここで該当レコードが存在しない場合は、未だ対象月日の出社打刻が行われていないということであるため、エラーメッセージを表示する。対象ユーザの対象月日が見つかった場合、既に退社時刻フィールドである「QuittingTime」にデータが存在しないかの確認を行う、既に打刻済みの場合はエラーメッセージ表示し、退社時刻フィールド「QuittingTime」がNULLの場合は、正常打刻であるため、現在の時刻を退社時刻フィールドに書き込む。
注意: ここで注意しなければならないのは、出社時は対象ユーザーの対象月日の初めての打刻情報であるため、タイムカードテーブル(TimecardTable)にレコードの追加(対象ユーザーの「ユーザIDフィールド:UserID」と「出社時刻フィールド:ComingTime」を書き込み)
を行うが、退社時においては対象ユーザーの対象月日のレコードは既に存在するため、該当ユーザの退社時刻フィールド「QuittingTime」に時刻を書き込むだけの処理で良いこととなる。
B) タイムカードの月次参照に関する仕様設計
 タイムカード月次参照は、入力された「ID」「パスワード」で判定されるユーザの参照月の日毎の出退社時間を一覧で参照する機能である。参照する月は、デフォルトでは参照する日の月を表示するが、一覧表示画面からさらに前月参照・次月参照へと再帰参照する機能も併せ持つ。
 入力された「ID」「パスワード」を基に、タイムカードテーブル(TimecardTable)から該当ユーザの該当月のデータを取得し、月初から昇順にて表示する仕様とする。
処理の流れに関しては、シーケンス図にて参照していただきたい。(図:シーケンス図.pdf
C) ユーザの新規登録・修正・削除に関する仕様設計
 当然のことながら、本システムを利用するユーザは事前にユーザとして登録されていることが前提となる。よってここでは、新規に利用するユーザの登録を行う新規登録、既存登録ユーザの情報修正、既存登録ユーザの削除という3つの機能に関して仕様を検討することとする。
 登録するユーザ情報は、「タイムカード」打刻・参照時に必要となる「ID」「パスワード」「名前」「メールアドレス」というシンプルな項目を設定する。「ID」に関しては同一の「ID」入力は許可しない仕様とし、登録時に既に同じ「ID」がある場合はエラーメッセージを表示する。
 入力制限に関しては、「ID」「パスワード」入力は、半角英数字のみ受け付け、NULLも含めてそれ以外は受け付けないものとする。「名前」はNULL以外は漢字も含めて受け付ける仕様とする。こうして入力された情報が適正な場合は、ユーザテーブル(UserTable)にデータを追加する。
既に登録されているユーザ情報の変更を行なう場合、変更できる項目は「パスワード」「名前」「メールアドレス」とし、ユーザIDは修正不可とする。画面遷移としては、「ユーザ情報修正」の選択により現在登録されているユーザ一覧が表示され、修正対象となるユーザを選択することで情報修正可能な画面へと遷移する。修正後「更新」ボタンをクリックすることで、ユーザーテーブル(UserTable)の該当ユーザ情報の更新処理を行う。
 最後に、既に登録されているユーザ情報の削除であるが、「ユーザ情報削除」を選択すると「ユーザ情報修正」機能と同様に、現在登録されているユーザ情報の一覧が表示され、対象となるユーザを選択することで、削除確認画面が表示される。確認画面内の「削除」ボタンをクリックによりユーザ情報削除処理が完了し、ユーザテーブル(UserTable)から該当のユーザ情報を削除する。

注釈 (1) UMLとは?
Unified Modeling Languageの略で、オブジェクト指向分析/設計においてシステムをモデル化する際の記法を規定した言語。
言語といっても、プログラミング言語ではなく、システム開発における分析/設計の記述方法を規定した「モデリング言語」であり、ユースケース図、アクテクビディ図、シーケンス図、クラス図など、用途に応じた複数の図や、その記述方法が規定されている。
UMLを利用することで、以下のメリットがある。
開発フェーズでの分析/設計が行いやすい
扱おうとしている問題を明らかにしたり、その解決法を組み立てる際に 問題を図としてモデリングする課程が行い易くなる。
コミュニケーションが容易になる
分かりやすく、また、統一された記述方法で仕様を記述することにより、顧客とのコミュニケーションや、チーム開発における開発メンバ間のコミュニケーションが行い易くなる。
UMLは現在のソフトウェア開発において事実上の標準となってきている。
  (2) アクティビティ図
業務や処理の流れを表すために、関連する複数の業務処理や処理ステップを順序立てて配置した図。ワークフローや処理フローなど手順のあるものを表現するのに役立つ。
  (3) シーケンス図
業務や処理における要素間の相互作用を表す図。要素間の処理の流れを表現するのに役立つ。

BACK NEXT
PAGETOP
CLOSE