Webプログラミング実習という授業の最終課題で作成しました.
実際に使ってみた動画がこちら↓になります.
手軽にアンケートを作成し, 結果を素早く共有できるアプリケーションを作成しました.
想定する利用者は, 主に「ローカルなコミュニティにおいて集団で行動している人々」です.
例えば, 集団で旅行に行っている時, 「次の観光場所はどこにしようか」, 「休憩をはさむか否か」, 「グループを分けて別行動するか」等の選択に迫られる時があります.
集団の人数が多ければ多いほど, 意見が一つにまとまらなかったり, 話を聞いていなくて次の行動を把握していない人が出てきたりする場合があります.
また, 少数意見が尊重されなかったり, 同調圧力で自分の意見が言えなかったりということもあります.
そうした集団での選択が難しい場面において, 活躍できるアプリケーションです.
その場ですぐにアンケートを取ることが目的なので, スマートフォンやタブレット等の端末で使用することを前提とします.
操作方法
トップ画面には, 4桁の番号を入力するフォーム, 「グループに入る」ボタン, 「新規グループ作成」ボタンがあります.
グループを作成する場合, 「新規グループ作成」ボタンを押すと, 4桁のグループ番号を発行します.
グループが作成されていた場合は, 4桁のグループ番号を入力してから「グループに入る」ボタンを押すことでグループに入室することができます.
グループを作ったらアンケートを手動で作成するかか自動で作成するかが選択できます.
手動で作成する場合は, アンケートの詳細設定画面に移動します.
詳細設定では, 制限時間の有無, リアルタイムでのグラフを表示の有無, 選択肢を3つ以上に変更するかが設定できます.
グラフはドーナツ型で表示します.
自動で作成する場合は, 制限時間は60秒, グラフ表示は無し, 選択肢は2つで変更不可の設定でアンケートを作成します.
グループに入室した時点で, それぞれに4桁の仮ユーザ番号を発行し, ログイン状態となります.
詳細設定をもとにアンケート画面を作成します.
初期はYes/Noの2択のボタン, 「おまかせ！」ボタン, プラスとマイナスのボタンがあります.
制限時間, グラフ, プラスとマイナスボタンについては設定次第では表示しません.
また, ユーザが回答済みか否かも確認することができます.
プラスとマイナスボタンを押すことで, 選択肢の数を変更できます.
上限は4つまであり, 3つ以上になると選択肢のYes/NoがA/B/C/Dという表示になります.
選択肢の数を2つに戻すと, 再びYes/Noの表示になります.
4桁のグループ番号は常に表示しているので, 途中で入室したい人がいる場合にも, すぐにグループ番号を伝えることができます.
左上にはメニュー画面を開くボタンがあり, 開くとユーザ名の変更, 使い方を見れる「ヘルプ」, トップ画面に戻れる「新規グループ作成」が利用できます.
時間を設定した場合には制限時間経過後, 設定してない場合は一番下にある「終了」ボタンを押すことで結果画面に移動します.
結果画面では, それぞれに選択したユーザの仮ユーザ番号(名前を変更した場合にはその名前)が表で見れます.
また, 割合もグラフで確認することができます.
「戻る」ボタンでトップ画面に戻ることができます.
使用技術
グループ, ユーザ, アンケートの情報はPHPを用い, SQLでデータベースへの読み書きを行っています.
4桁の番号は, PHPでランダムに発行しています.
アンケートの結果等はデータベースに読み書きし, サーバの管理はJavaScriptのライブラリNode.jsを使用しています.
メニュー画面開閉と選択肢増減のアニメーションは, JavaScriptを使用しています.
グラフの表示は, JavaScriptのライブラリChart.jsを使用しています.
私は主にHTML・CSSを用いてデザインなどのフロントエンドを担当しました.