知らないことを調べるブログ

映画の分からないところを調べてまとめる場所にしていきます。

アンケートフォーム作成

 会社で頼まれたのでWEBアンケートフォームを作った。入力されたデータはメールデコードの仕組みを使ってサーバから担当者のメールアドレスへ送られ、担当者がエクセルで集計する。完成した。ちゃんと動いている。いまは、WEBアンケートフォームを自動生成するアプリケーションをHTML5javascriptで作っている(ファイルの入出力機能がHTML5だったはず)。
 
 
 WEBアンケートフォームを自動生成するアプリケーションを作っている理由は、後にアンケート業務を担当する人がHTMLを知らなくても困らないようにするため。編集内容のセーブ・ロード機能はわりと簡単に実装できた。完成まで山があと二つありそう。
 
 自動生成プログラムの二つある山のうちの一つは、選択肢の挿入・削除機能。iTunesのプレイリスト編集画面みたく右側に「ー」と「+」と「…」がある感じのUIを作っている。「…」を押すと入れ子型質問に変化する。もう一度押すと普通の質問に戻る。

 普通の質問とは、こういうの。
 
 Q1.どうですか?:
   1.こうです
   2.そうです
   3.ああです
 Q2.やりますか?:
   1.やります
   2.やりません
   3.考えます  

 入れ子型質問とは、こういうの。

 Q1.いくつかおしえてください。:
   1_1.身長
     1.~150cm
     2.151~70cm
     3.171cm~
   1_2.体重
     1.~40kg
     2.41~70kg
     3.71kg~
 
 もう一つの山は、入力した質問文や選択肢をアンケートフォームの形にしてHTMLで出力する機能。こちらは、既に完成品のアンケートフォームがあるので、これからの作業は、仕様通りに変数を埋め込んで出力するだけだと思う。
 
 前者の山が難関。入れ子質問に対応する仕組みを考えるのが大変だった。でも、なんとか形になってきた。入力済みのinputタグのvalueを損なわないように並べなければならない。これは、inputのテキストに位置を特定する数値をidとして設定して、入れ替え時に検索するという試作プログラムを作った。いちおう正常に動作している。でも、それよりも、inputのテキストに共通のクラスを設定して、指定したdiv内の当該クラスをgetElementsByClassNameで配列にして昇順で入れ替えていくやり方がスマートかも!? と期待している。まだ試していない・・・でも絶対大丈夫だ! 小規模な実験では上手く動いた。それも、より短いコードで!
 
 さっき、テストで作っていた関数を整理・統合した。HTML側の構造は、作る予定の仕様すべてにばっちりと対応してくれている。強固だ。コードの量も350行から220行に減った。
 
 気に入っているコードはここ。

var qAry = [[2,3,4],[5,0]]; // 質問と選択肢の数

 
 ニ次元配列のxが質問数、yの要素0が選択肢の数、yの要素1以降が入れ子質問の選択肢の数を表している。例示したコードだと、質問1は、2つの入れ子質問を持ち、質問1_1は選択肢が3つ、質問1_2は選択肢が4つ。質問2は、5つの選択肢を持っている。入れ子質問かどうかは、yの要素1が0であるかどうかで判別できる。この配列は可変であり、質問や選択肢の数を変更するときにpush・popされる。
 
 という感じ・・・とても使いやすい管理方法だと思う。よく考えついたな、おれ! えへへ! とセルフで頑張っている。たぶんもっと上手い管理方法は世の中にあるのだろうけれど、今の僕はこれが精一杯だ。これを自作できただけでも、この仕事を引き受けて正解だったなと思う。
 
 
 僕は、今年の7月31日に自分がこう話したことを覚えている。「C#の(目的とするアプリケーションが作成できる)とは、登録したRSSからflvファイルをダウンロード・mp3に変換するアプリケーション。が作りたい」
 
 C#javascriptは別の言語なので、いま僕は遠回りをしている。ファイルの入出力と、classを配列で制御する方法を覚えられたのが嬉しい。
 
 WEBアンケートフォームを自動生成するアプリケーション(javascript)と、登録したRSSからflvファイルをダウンロード・mp3に変換するアプリケーション(C#)の両方を、9月中には完成させたいなあと思っている。