Firebase と SendGrid で作るちょっと便利なお問合せフォーム

Firebase と SendGrid で作るちょっと便利なお問合せフォーム

Firebase のデータベース機能（Cloud Firestore）を利用してお問合せフォームを作る例を紹介しました。これは、お問合せ内容を Firebase のデータベースに入れて管理する方法です。

この方法の欠点は、お問合せ内容を定期的に確認する必要があります。Firebase コンソールからも確認はできますが、実際の運用をするにはちょっと不便です。そこで、管理用のアプリをReactやVueで作る事例も紹介しました。

しかし、お問合せだけ別に確認するのはちょっと面倒ですよね？

そこでこの記事では、お問合せフォームで入力した内容を E-Mail で送る事もできるという話を紹介します。

Web サービスから E-Mail を送るのはちょっと面倒

E-Mail はメールサーバーがまとめて受信したり、配送したりするシステムです。通常は Web のサービスとは独立のシステムから配送されるようになっているので、シンプルな JavaScript（Typescript）から送るのはちょっと面倒です。

しかし、お問合せ内容が E-Mail から確認できると便利だと思いませんか？

特別なアプリなしに、携帯（スマホ）からも簡単に確認できますし、管理用のアプリも必要ありません。お問合せも連絡先を E-Mail で頂いた場合は返信も E-Mail になるので E-Mail で確認できたほうが便利で、素早く回答も可能になります。

Firebase を使うと簡単に E-Mail に送る方法があります！

Firebase を使うとと書きましたが、Firebase で直接 E-Mail を送るわけではありません。Firebase のバックエンドの実装（functions）を利用して、外部のサービスを利用して E-Mail としてお問合せのメッセージを送るという方法です。

外部のサービスにはSendGridというサービスを使います。

SendGrid はメールの配送のサービスを提供していて、外部のプログラムからも利用しやすいように REST API を公開しています。このサービスを利用すると、Web のプログラムから簡単に E-Mail を通してお問合せのメッセージの送信が可能です。

SendGrid も無料から利用できる！

Firebase も無料から利用が可能なのは大きな魅力です。この SendGrid も最初は無料から利用できます。料金プランは何処からサービスを受けるかで変わってきます。日本でも幾つかの業者が代理店として SendGrid の日本語によるサービスを提供しています。

私は、日本のプランは構造計画研究所が提供するプランを利用しています。月に１２０００通までのメールは無料で利用できます。どれくらいのメールを送るかで幾つかのプランが用意されていて、必要に応じて有料プランに移行できます。

私がメインで利用しているのはアメリカの SendGridが提供しているサービスです。こちらは１日１００通までは無料で利用できます。

日本とアメリカの SendGrid では利用できる API に若干違いがあります。特にメルマガなどの様にリストを利用して多くの人に一度に配信するようなマーケティングメールでは、日本のサービスでは、「レガシーマーケティングキャンペーン」と呼ばれる API を利用しているのに対して、アメリカのサービスでは「ニューマーケティングキャンペーン」を利用していて、使用が異なるので注意が必要です。

私は、サポートするお客様がアメリカと日本の両方にいるので、両方のアカウントを利用しています。

Firebase と SendGrid のサービスの関係

さて、SendGrid と Firebase のサービスはどう関係があるのかというと、Firebase のバックエンドサービス（functions）を利用して SendGrid とのやり取りを行う事が可能です。 SendGrid のサービスは、Firebase 以外の方法でも利用は可能です。例えば、バックエンドに PHP のスクリプトを書いて利用することもできます。

しかし、Firebase で実装すると、全て JavaScriptで記述できるメリットがあります。フロントエンドもバックエンドも同じ言語で書けるのは大きな魅力です。

何故バックエンドサービスが必要か？

一番の理由はセキュリティの確保です。Web ブラウザーで動作する、フロントエンドの JavaScript のソースコードは基本的にブラウザーから閲覧する事が可能です。実際にソースコードをブラウザーで見て解析して悪さをするのは普通の人にはちょと大変です。しかし、悪意を持った人が悪用した場合には問題になります。例えば SendGrid の場合は、サービスの設定や登録されている人の情報が漏れる原因にもなります。そこで、通常は API Key を使って、バックエンドの簡単にはコードが見えないところからサービスにアクセスするという方法がとられます。

これが、バックエンドのサービスが必要な理由です。

Firebase ならば Web ホスティングとあわせて、バックエンドのサポートも可能！

Firebase を使えば、Web ホスティングと合わせてバックエンドのサポートも可能です。

フロントエンドでお問合せのフォームを作って、バックエンドに必要な情報を渡すようなシステムを作れば、お問合せ内容を E-Mail に転送する事が簡単にできます。

シリコンバレースーパーウエアでは、リニューアルしたサイトのお問合せフォームは SendGrid のサービスを使って E-Mail に送る仕組みになっています。

旧サイトでは Google フォームを利用していました。

E-mail にしたことで、迅速に回答が可能になって、ビジネスチャンスも大きくなりました！

Firebase によるバックエンドサービスの実装

詳細は別の記事で紹介する予定です。

概要は、以下の方針で実装します。

Firebase のバックエンド機能（functions）を有効にする（firebase init で指定）

バックエンドのコードを Node.js で実装

必要に応じてフロントエンドのフォームなどを作成

Web ホスティングは Firebase で可能なので、Firebase を利用すれば簡単に実現できます。

上で紹介したシリコンバレースーパーウエアのサイトの実装は、バックエンドで全てのページのレンダリングをしています。

如何ですか？Firebase を利用すると、いろいろなサービスを手軽に実装して公開できます！