Firebaseのデータベースで作る簡単お問合せフォーム

Firebaseのデータベースで作る簡単お問合せフォーム

Firebase のデータベース機能を使えば、お問合せフォームはとても簡単に実現できます。 お問合せフォーム自体は一つの HTML ファイルで実現できます。簡単な HTML の記述と、CSS で体裁を整えればあとは簡単な JavaScript を追加するだけです。

HTML ページで Firebase を使うための準備

一番シンプルな方法は HTML のページの「head」の中で Firebase を設定する事ができます。 Firebase コンソールで「プロジェクト設定（Project settings）」 に行けば必要なプロジェクトの情報を得る事ができます。

やり方は２つあって、Firebase のホスティングを使う場合はシンプルです。 プロジェクトの情報を入れなくても自動で読み込んでくれるので以下の情報を HTML の「」タグの内側に埋め込めば HTML ページ上で Firebase を使うことができます。Firebaseを利用する場合、Firebaseでホスティングした方が いろいろ便利です。

ココナラのブログでは、コードを埋め込んで綺麗に表示するのが難しいので詳しいコードの実装方法は省略します。（すみません！）

Firebaseでホスティングする場合は、簡単な記述を埋め込むだけでプロジェクト毎に異なる情報をいちいち記述する必要がなくなります。基本の記述があれば、詳細は自動で読み込んでくれる仕組みになっています。

これだけでも、ホスティングまで含めてFirebaseで作ってしまうメリットがあります。

HTMLでフォームを記述して、JavaScriptでFirebaseのデータベースに登録

Firebaseを使うための設定はHTMLファイルの「head」部分に上の記述を 埋め込めば完了なのであとは、HTMLでフォームを作って、JavaScriptで Firebaseのデータベースに登録するプログラムを書けばお問合せフォームは 完成です！

firebase.firestore().collection("query").add(query);

Firebaseのデータベースに新規のデータを入れるためのJavaScriptの記述は 基本的にはこれだけです。「query」というJSON形式のデータを作って この記述に渡すだけです。

新たにドキュメントを追加する場合の基本は、

コレクションへのリファレンスと登録するデータのJSON形式の物です

お問合せフォームで使うJSONのデータの例は 次の様になります。

const query = {

   name: "名前",

   email:"E-Mailアドレス",

   subject:"お問合せ件名",

   message:"お問合せ内容"

}

これをそのままFirebase渡す事ができるので処理はとてもシンプルです。 SQLのデータベースの様にデータを入れる前にテーブルを作る必要もありません。 それだけでも、コードはとてもシンプルになります。

Firebaseのデータベースを使えばお問合せフォームは簡単！

Firebaseは初期設定さえできてしまえば、簡単JavaScriptのコードを書くだけで、 誰でも簡単にすぐにいろいろな機能を利用できるのが魅力です。

このお問合せフォームで利用するのはCloud Firestoreのデータベース機能だけなので、 初期設定でこのデータベースの設定を基本設定に加えて読み込むだけです。 ちょっとしたWebページやLP(ランディングページ)を作る場合には手軽で便利です。

さらにFirebaseのホスティングを利用すればさらにシンプルになります。 Firebaseのプロジェクト毎に違う情報をいちいち入力する必要もありません。 Firebaseを利用する場合、全てFirebaseにしてしまうといろいろ便利な点が 沢山あります。

まとめ

今回のお問合せフォームはシンプルな実装の例として取り上げてみました。 しかし、実際のWebサービスやWebアプリはもっと複雑になる場合が殆どです。 その場合は、このようにHTMLに全部詰め込んでしまうよりは、 ReactやVueなどといったフロントエンドのフレームワークと組み合わせて利用した方が より効率的に開発できます。

例えば、お問合せフォームのサービスは、管理側の実装があった方が便利です。 これは、Firebaseのデータベースからお問合せの情報を取得して表示したり、 お問合せの回答をしたり、不要になったお問合せを削除したりするための物です。

FirebaseはFirebaseコンソールに行けば、データベースの情報を見たり、 削除したりすることは可能です。しかし、実際の運用で使うには不便です。 こうした機能は、ReactやVueといったフロントエンドのフレームワークを 利用して作った方がはるかに簡単で効率よく開発できます。

FirebaseをReactやVueなどのフロントエンドのフレームワークと組み合わせて 使用する方法については別途記事を書く予定です。 詳細はそちらをご覧ください。