Googleフォームの回答ページのようなものを小一時間で作る【デモ動画あり】
この記事について
この記事では Google Forms のようなオンラインフォーム作成ツールの回答ページを小一時間（コード行数の合計 = 664行）で作成する手順について説明します。この記事で実装するオンラインフォーム作成ツールは下記の2つのサブシステムから構成されます。
- ユーザーが回答を入力するためのサブシステム
- ユーザーがフォームを管理するためのサブシステム
この記事では前者の「1. ユーザーが回答を入力するためのサブシステム」を対象として説明します。後者の「2. ユーザーがフォームを管理するためのサブシステム」については Googleフォームの管理ページのようなものは小一時間では作れない の記事をご参照ください。この記事の関連リソースを下記に示します。
おおまかな流れ
おおまかな流れを下記に示します。
- データベースの準備
- コーディングの準備
- コーディング
- 動作確認
データベースの準備
下記のSQL文を発行してデータベースの準備をします。
ターミナルからSQL文を発行するには下記のコマンドを実行します。なお、パスワードを設定していない場合は-pオプションは不要です。
mysql -u root -p
コーディングの準備
下記のコマンドを実行してコーディングの準備をします。
mkdir HanaForms
cd HanaForms
npm init -y
npm install --save dotenv ejs express morgan mysql2 nocache sequelize
touch .env api-initialize.js api-validate.js api-submit.js find-form.js fixture.js main.js model.js partial-checkbox.ejs partial-input.ejs partial-radio.ejs partial-textarea.ejs static-js-input.js validate.js view-finish.ejs view-home.ejs view-input.ejs
コーディング
ソースコードの一覧を下記に示します。
- .env
- main.js
- view-home.ejs
- view-input.ejs
- view-finish.ejs
- partial-input.ejs
- partial-textarea.ejs
- partial-radio.ejs
- partial-checkbox.ejs
- model.js
- fixture.js
- static-js-input.js
- find-form.js
- validate.js
- api-initialize.js
- api-validate.js
- api-submit.js
主要なソースコードの内容を下記に示します。
model.js
main.js
view-input.ejs
static-js-input.js
api-initialize.js
api-validate.js
api-submit.js
動作確認
下記のコマンドを実行してデータベースにテーブルを作成してレコードを挿入します。
node -r dotenv/config fixture.js
下記のコマンドを実行してサーバーを起動します。
node -r dotenv/config main.js
ブラウザで http://localhost:3000/form/1234abcd/ にアクセスします。
フォームに内容を入力してから送信ボタンをクリックします。
完了ページが表示されることを確認します。
参考画像
おわりに
この記事で作成したサブシステムはチュートリアル用に簡略化されており、さらにGoogle Formsに近づけるためには下記のような機能を設ける必要があると考えています。
- 画像や動画の表示
- ファイルのアップロード
- 受付メールの送信
- テーマの設定
機能の追加に加え、下記のような点に取り組む必要があります。
- ユーザー体験の向上
- セキュリティの向上
- 運用性の向上
- アクセシビリティの向上
この記事を投稿する前に本テーマに関する素晴らしい記事を見つけたので下記にリンクを記載します。
ユーザーがフォームを管理するためのサブシステムを作成する手順については来週中を目標に記事にまとめて投稿しようと思います。
Discussion