| エンタープライズ：特集 | 2003/07/01 15:46:00 更新 |
JAVA Developer 2003年8月号より転載
FlashとTomcatで実現する使いたくなるWebアプリ (3/10)
| アンケートシステムを作ろう |
今回は、クライアントにFlashを、サーバーサイドにサーブレットを使ったWebアプリケーションとして、簡単なアンケートシステムを作ってみようと思います。
システム概要は次のとおりです。
（１）アンケートクライアント
サーバーから、アンケート内容をXMLで取得。質問ごとに1ページを割り当て、次に進む際にユーザーが入力したデータの妥当性をチェックし、不適切な場合はユーザーに対応を促します。すべての質問の回答データを取得したら、サーバーに送信します。
（２）アンケートサーブレット
アンケートの結果を受け取る処理と、アンケートサマリー結果を返す処理だけをサーブレットで実装します。ただし、いずれもクライアントが動作するために必要最小限の処理とします。アンケートの内容は動的に作りませんので、単純にXMLファイルを返すようにします。
●アンケートクライアントの作成それでは、実際にFlashを使ったアンケートクライアントというか、Flashのオブジェクトを作成する手順を見てみましょう。
Flashは、フレームを時間軸に並べたムービークリップが画面を構成します。そのため、いわゆる「ページ」という概念とはちょっと違いますが、フレームを止めてしまえば、それを1つのページと見なすこともできます。今回作るアンケートクライアントは、Flashらしさであるアニメーションは一切入っていません。
また、通常なら動画の1コマになるフレームをページとして使うために、フレームを切り替えても表示後すぐに停止させています。もちろん、動く部分と動かない部分を作ることも可能ですが、今回は動く部分は作っていません。アニメーションを作る方法については、多くの書籍などで語られていますので、そちらを参照してください。
●レイヤーとフレームの構成レイヤーはフレームの中でのオブジェクトを配置する際の基本階層を構成します。また編集中の表示や編集可否の切り替えは、レイヤー単位で行うことができるので、ある程度役割を考えた階層を作るとよいでしょう。
今回のサンプルでは、上から、
- レイヤー1：ページごとに異なる部分用
- レイヤー2：各ページ共通のボタン用
- レイヤー3：各ページ共通のボタン以外のオブジェクト用
- レイヤー4：下地の配色用
- レイヤー5：スクリプト用
以上、5つのレイヤーを作りました。ちなみにスクリプト用のレイヤーには、視覚的なオブジェクトはなにもありません。
フレームはレイヤーごとに個別に作成することができます。レイヤー1には、表示するページとして、
- スタートページ
- テキスト入力用ページ
- 単一選択用ページ
- 複数選択用ページ
- 結果送信ページ
- 送信結果がエラーだった場合のページ
- 送信結果がOKだった場合のページ
以上をすべて「キーフレーム」として作りました。Flashでは、手前のフレームと存在する部品の数や位置などの内容が異なるフレームをキーフレームに設定する必要があります。キーフレームは、名前をつけることができ、フレームを表示する際にその名前を指定します。
レイヤー2では、テキスト入力、単一選択、複数選択用ページで共通して使う「前へ」や「次へ」のボタンを配置するために、フレームを作成しました。具体的には、3つの先頭部分をキーフレームとし、それ以外を普通のフレームとします。ほかのレイヤーについても同様にフレームを構成します。
フレームのスクリプトはすべてのフレームに共通で使用したいので、レイヤー5では先頭フレーム以外はすべて普通の「フレーム」とします。また、下地の配色も全ページで共通としたいのでフレーム5と同様です。（図1）
それぞれのフレームには、図2のようにオブジェクトを配置します。表示用テキスト、テキストフィールドは「ツール」、ラジオボタンやチェックボックス、プッシュボタンは「コンポーネント」パレットの中にあります。これらコンポーネントは、Flash MXで拡張され、はじめて登場するオブジェクトで、コンポーネント部品もムービークリップでできています。
図2 アンケートクライアントで表示されるキーフレームを作成（一部）
なお図では見えませんが、テキスト入力、単一選択、複数選択のフレームには、それぞれ左下部分にほとんど見えないムービークリップを配置しています。また、ラジオボタン、チェックボックスは、キャンバスの外に配置しています。これらは、本来ユーザーには直接見せないムービークリップです。「見えない」ムービークリップは、スクリプト記述のために用意しました。
前のページ | 1 2 3 4 5 6 7 8 9 10 | 次のページ
[佐藤 毅，JAVA Developer]
Copyright © ITmedia, Inc. All Rights Reserved.
