Flashアンケート集計:数値表示バージョン(Flash6)
Flashを使ったアンケート集計を作ってみましょう。CGIのプログラムはできていますし、項目を選択するラジオボタンの仕組みもできていますから、データを送信する所と集計結果を表示する所を作れば、アンケート集計は実現できます。Flash側での動作は、大きく分けて4つのブロックに分けて考えることができます。
1main 最初にアンケートの質問を表示したり選択肢のラジオボタンを表示するところ2
send 送信ボタンが押された時に、データの送信処理を行うところ 3disp 表示ボタンが押された時に、データの受信のみを行うところ 4kekka CGIからの受信が終了した時に、そのデータを表示するところ最初に、アンケート結果を数値で表示するバージョンを作成します。
アンケートの内容は、次のような質問にします。質問:患者さんとのコミュニケーションにおけるコメディカルスタッフの位置づけ
選択肢
@ 患者さんの緊張を緩和させる
A 患者さんの相談に乗っている
B 特定の分野のみ説明している
C 医師と同等に説明している
D 患者さん意思を医師に伝える役をしている
E 特に役割はない
F その他1. [修正]−[ドキュメント]でムービーのサイズは550×400px位にしておきます。
2. レイヤーを5つ追加して、計6層のレイヤーを用意します。フレームは22フレームまで用意します。
ラベル名 説明label ラベル用レイヤー action ActionScript用レイヤー dispkekka アンケート結果表示用レイヤー button ボタン用レイヤー radio ラジオボタン用レイヤー back 背景用レイヤー 3. 「label」レイヤーで、1フレーム、6フレーム、11フレーム、16フレーム目にキーフレームを作成し、「main」「send」「disp」「kekka」というラベルを設定します。
4. 「back」レイヤーに背景の絵を描いて、静止テキストを挿入します。
5. 「radio」レイヤーにラジオボタンを表示します。先ほど作ったラジオボタンコンポーネントを利用しましょう。
「radibottun.fla」を開き、[ウィンドウ]−[ライブラリ]メニューでライブラリを表示します。その状態で作成中のファイルを[ウィンドウ]メニューの一番下から選択すると、作成中の画面上に 「radibottun.fla」のライブラリが表示されます。6. その状態でライブラリからコンポーネントをドラッグ&ドロップすると、今作成中のファイルにコンポーネントがコピーされて使えるようになります。「ezRadioGroup」を1つと「ezRadioButton」を7つドラッグ&ドロップします。
「ezRadioGroup」には、「RadioGroup1」という名前をつけておきます。「kekka」フレームから後ろではラジオボタンの表示は必要ありませんので、空白キーフレームを挿入しておきます。背景の絵も追加します。7. ボタンシンボルを作成し、「button」レイヤーに2つ配置します。
送信用ボタンに「send_btn」、表示用ボタンに「disp_button」というインスタンス名を付けます。「kekka」フレームから後ろではボタンの表示は必要ありませんので、空白キーフレームを挿入しておきます。8. 「dispkekka」レイヤーの「kekka」フレームに、kekkaを表示するテキストボックスを作ります。テキストツールに「ダイナミックテキスト」のテキストボックスを1つ作り、変数名を「dispkekka」とします。「線の種類」を[複数行]に設定しておきます。
9. 「Action」レイヤーの「main」フレームに、以下のスクリプトを記述します。
1//-- 初期化 2//-- 各項目名 3fname = ["i-mode/携帯対応ページ", "Flash Movie作成", "産婦人科の病気のお話", "perl/ASP", "Biochemistory Simmulation ", "Virtual Hospital/その他"]; 4maxnum = fname.length; 5//-- ラジオボタンの初期設定 6for (i = 0; i < maxnum; i++) { 7datanum[i] = 1 ; 8this["radio" + i].label = fname[i]; 9} 10stop (); 11//-- 送信ボタン 12send_btn.tabIndex = 1; 13send_btn.onRelease = function () { 14gotoAndPlay ("send"); 15}; 16//-- 表示ボタン 17disp_btn.tabIndex = 2; 18disp_btn.onRelease = function () { 19gotoAndPlay ("disp"); 20}; 3行目:fnameという変数に各選択項目の表示内容を用意しています。
「Arrayオブジェクト=newArray();」は、「Arrayオブジェクト=[];」と略して記述することできます。ここでは、「fname=[];」と記述しています。4行目:項目の数をmaxnumに代入しています。
6〜8行目:ラジオボタンの各項目に、表示内容を表示しています。
12行目:[TAB]キーを押すとこのボタンが1番目に選択されるように設定しています。
13〜15行目:この送信用ボタンが押されたら、「send」フレームにジャンプします。
17行目:[TAB]キーを押すとこのボタンが2番目に選択されるように設定しています。
18〜20行目:この表示用ボタンがクリックされたら、「disp」フレームにジャンプします。
10. 「action」レイヤーの「send」フレームに、以下のスクリプトを記述します。
1//--アンケート送信オブジェクト 2mySendVars = new LoadVars(); 3mySendVars.selectdata = RadioGroup1.getValue(); 4//--アンケート受信オブジェクト 5myLoadVars = new LoadVars(); 6myLoadVars.onLoad = function(success) { 7gotoAndStop("kekka"); 8} 9//--アンケート送受信 10mySendVars.sendAndLoad("enqdata.cgi",myLoadVars,"POST"); 11stop(); 2行目:アンケート送信用のオブジェクトを作ります。
3行目:CGIに送信する「selectdata」という変数に、ラジオボタン司令塔の「Radiogroup1」の「getValue関数」で取得した、今選択されている値を代入します。
5行目:データ受信用のオブジェクトを作ります。
6〜8行目:データの読み込みが完了したら、「kekka」フレームにジャンプします。
10行目:データの送受信を開始します。
11行目:データの読み込みが完了するまで、このフレームで停止します。
11. 「action」レイヤーの「disp」フレームに、以下のフレームスクリプトを記述します。
1//--アンケート受信オブジェクト 2myLoadVars = new LoadVars(); 3myLoadVars.onLoad = function(success) { 4gotoAndStop("kekka"); 5} 6//--アンケート受信 7myLoadVars.load("enqdata.cgi"); 8stop(); 2行目:データ受信用のオブジェクトを作ります。
3〜5行目:データの読み込みが完了したら、「kekka」フレームにジャンプします。
7行目:データの送受信を開始します。
8行目:データの読み込みが完了するまで、このフレームで停止します。
12. 「action」レイヤーの「kekka」フレームに、以下のスクリプトを記述します。
1//-- 各項目の値を表示する 2dispkekka = ""; 3for (i = 0; i < maxnum; i++) { 4dispkekka += fname[i] + ":" + myLoadVars["dat" + i] + newline; 5} 6stop (); 2行目:結果を表示するテキストの「despkekka」をクリアします。
3〜5行目:すべての項目について、処理を繰り返します。
「項目名」と「アンケート結果の数値」と「改行」をdispkekkaに追加していくので、すべての項目を繰り返すことで一覧表が表示されます。13. これで、Flashアンケート集計はできあがりです。
[ファイル]−[名前をつけて保存...]メニューを選択し、「enquete.fla」という名前で保存します。14. [ファイル]−[パブリッシュ]メニューを選択して、「enquete.swf」「enquete.htm」の2つのファイルを書き出します。
1. 作成した「enquete.swf」「enquete.htm」と、前出の「enqdata.cgi」「enqdata.dat」の計4つのファイルを、サーバーにアップロードします。
2. 「enqdata.cgi」のパーミッションを「755」に、「enqdata.dat」のパーミッションを「666」に設定します。
3. ブラウザで「enquete.htm」にアクセスしてみましょう。アンケートのページが表示されます。
4. 項目を選択して「アンケート送信」ボタンをクリックするか、「グラフを見る」ボタンをクリックすると、アンケートの集計結果が表示されます。
Shirley's i-box | Shirley's little-box | Dreamweaver Technique | JAVA Script sample | CSS sample | JAVA Applet sample