Firebaseを使用したGoogleフォームのようなフォームの作成方法

Firebase Databaseでフォーム作成

イベントの出欠確認などのフォームを簡単に作成したい場合はGoogleフォームが使用されることが多い。

Googleフォームを使用すればテンプレートを使用して簡単にフォーム作成ができるが、カスタマイズをしにくいという難点がある。

しかし、FirebaseのRealtime Databaseを使用すればGoogleフォームのようなフォームを簡単に作成することができる。

以降にGoogleフォームの「イベント出欠確認」のようなフォームをFirebase Databaseで作成する方法を記載した。

Firebase Databaseの作成手順

まず、Googleにログインしている状態でFirebaseコンソールにアクセスして「プロジェクトを作成」を押す。

プロジェクトの作成（手順 1/3）でプロジェクト名を入力して「Firebaseの規約に同意します」をチェックして続行を押す。

プロジェクトの作成（手順 2/3）でGoogleアナリティクスを有効にするがオンになっている状態で続行を押す。

プロジェクトの作成（手順 3/3）のGoogleアナリティクスの構成でアナリティクスの地域に「日本」を選択して同意にチェックを入れて続行を押す。

以上でプロジェクトの作成が完了するので、次にルールを以下のように書き換える。

開発中はtrueで良いが、本番は「auth != null」などにしてAuthentication設定を忘れずに。

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

次にHTMLとJavaScriptを以下のようにする。

<h1>イベントの出欠確認</h1>
<form>
  <h2>参加者の名前をご記入ください。</h2>
  <input type="text" value="" id="user">
  <h2>参加されますか？</h2>
  <ul>
    <li>はい <input type="radio" name="join" value="yes"></li>
    <li>いいえ <input type="radio" name="join" value="no"></li>
  </ul>
</form>
<button id="b">button</button>
<hr>
<button id="g">get</button>
<div id="result"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script>
const b = document.getElementById('b')
b.addEventListener('click', () => {
  const user = document.getElementById('user').value
  const join = document.getElementsByName('join')
  let joinResult;
  for (let i = 0; i < join.length; i++) {
    if (join[i].checked) {
      joinResult = join[i].value
      break;
    }
  }
  const data = {
    user: user,
    joinResult: joinResult,
  }
  axios.post('https://my-form-170de.firebaseio.com/form.json', data)
    .then(res => console.log(res))
})

以上でFirebaseを使用したGoogleフォームのようなフォームの作成が完了となる。

送信されたデータをテーブルでグリッド表示

送信されたデータはRealtime Databaseに保存されているので、getで取得すればWebページ上で一覧表示できる。

JavaScriptライブラリ「Grid.js」を使用して以下のコードのようにデータをテーブルでグリッド表示できる。

// <button id="g">get</button>
// <div id="result"></div>

const g = document.getElementById('g')
g.addEventListener('click', () => {
  axios.get('https://my-form-170ae.firebaseio.com/form.json')
    .then(res => {
      const data = Object.keys(res.data).map(key => {
        return Object.values(res.data[key]).reverse()
      })
      new gridjs.Grid({
        search: true,
        columns: ['ユーザー名', '参加可否'],
        data: data
      }).render(document.getElementById('result'));
    })
})