はじめに
Next.jsでホームページを作っていて、その中でお問い合わせフォームを作りたいと思いました。そこで試行錯誤した記録。
結論は、Google Formを使いましたっていう話。
技術や要件
- next: 14.0.4
- Vercelでデプロイ
- 問い合わせがあったら、Gmailへ飛ばしたい
検討１：SendGrid
SendGridというサービスがあります。月12,000通まで無料で、メールを送るAPIが提供されています。
結果的に使用は諦めました。
問題点：利用者は法人であること
私が作ろうとしていたホームページは、個人事業主としてのホームページで、法人は立ててないんですよね。。まだいいかなと思ってて。
利用申し込みの法人名を入力する欄は、もしかしたら個人事業主の屋号でもいけるかもしれないけど、「法人」って書いてあるし、まぁ今回は無理せずさらっと諦めました。
検討２：Nodemailer
次は、npmのライブラリ nodemailer を使う方法。ググって得た情報によると、やる前から問題がありそうだとわかっていました。
問題点：Vercelでデプロイすると、Gmailへ送れないらしい etc
VercelにデプロイしたnodemailerからGmailのSMTPを利用しようとすると、Googleが、地理的な何かの点で安全性が低い？または不正利用と判断して送ってくれない問題があるようです。
また、nodemailerによる情報（Using Gmail :: Nodemailer）によると、やるとしたらOAuth2認証が必要だけど、Gmail側はAPI利用でなく人の利用を想定しているから、好ましくないとのこと。
さらに、ググって出てくる方法（アカウント管理～セキュリティ～２段階認証～アプリパスワード）は、Googleアカウントのページに推奨されてないって書いてある。
そんないくつかの問題点があってもやるか？という話ですが、趣味や技術検証でなく、ビジネスで利用しようとしているので、選択できないと判断しました。Googleの仕様変更に弱そう。
参考
-
Next.jsだけでお問い合わせフォームを作る方法を解説 ｜ monotein
- 偶然見つけたこちらの記事ですが、ちょうどホームページを作るときに参考にしたこちらの本の著者の方。本も記事も、Next.js v13で大きく変わった内容も考慮してくれた書き方で、読みやすいです。本はおすすめ。
検討３：Google Form
お問い合わせフォームなんて大した入力ではないよなーアンケートみたいな・・・と思って思いついたのが、Google Form。Google Spread Sheetに結果を書けるから、それをトリガーに、Google Apps Script(GAS)でGmailへ連携できるんじゃないかーということ。
ちょっと懸念点として、確かGASを使うときGCPのプロジェクトを立てて、それは課金が発生するんだっけ・・・しないんだっけ・・・ということがわからず、調べました。
1.Google Formを作成
Google Driveのフォルダ内を右クリックから、フォームを作って、質問項目を作りました。
上のタブのようなところ（「質問」「回答」「設定」）の「回答」から、"スプレッドシートにリンク"とすると、スプレッドシートを作れます。作らないと、どこにできるんだろう。その場合の容量は無料？まぁいいか。
「送信」ボタンは、このフォームを送る先を決めるボタンで、メールか、リンク送付か、Webシステム用の埋め込みかを選べます。３つ目のがまさにやりたいこと！あった！
iframeをコピペすればいいのか。
2. Next.jsのページに埋め込む
Next.jsの書き方の説明は割愛しますが、ただiframeのタグを貼り付けただけで表示はできました。
見てみると、縦スクロールバーがiframeの中と、ページ全体ので２つ出る問題発生。これはダサい。いけてない。
tailwindのoverflow-hiddenを設定して非表示で解消。
だけど今度は縦スクロールできなくなる、フリーズみたいな現象が発生。
Chromeの開発ツールの他デバイスのエミュレーターみたいなモードで、マウスのコロコロと、ドラッグのスクロールの両方を交互に使ってると、発生します。でも実際のスマホ(iPhone)では発生しないし、Chromeの何かの問題かもしれないと思って、思い切って放置！
最終的にこうしてます。
<iframe
src="https://docs.google.com/forms/d/e/1FAIp ～略"
className="w-full m-0 overflow-hidden"
style={{ height:"930px", minWidth:"320px" }}
>読み込んでいます…</iframe>
Google Formのデメリットは、Google Formを使ってます！というのが全面に出て、ほかのデザイン性と統一できないのが悩みといえば悩み。iframeで出てくる入力formのソースを開発ツールで見て、そのまま自分のformに使うという技を紹介していたブログがあったけど、Googleの仕様変更でやられそうなので止めました。
3. GAS!? いや、Spread Sheetの機能
Google Spread Sheetまでは来た。いよいよGoogle Apps Script(GAS)かーと思ったけど、Google Spread Sheetの変更をメールで通知する機能というのがあることがわかりました。
変更内容とかはないけど、とにかく変更があったことをメールで通知する。
変更都度か、１日１回まとめて通知かも選べる。
これで十分！！
Google Spread Sheetを直接編集することはないし、もし今後、フォーム入力とメールを１：１で正確に対応付けたいなら、改めてGASの登場としておきましょう。お金かからない！楽！手固い！
あ、設定方法は、メニューのツール＞通知設定からです。
以上で、Next.jsの環境に、お問い合わせフォームの実装を終わります。
まとめ
最終的に、Google Formを使えばいいやんってだけでした。今後、発展したければGASを使うことも選択肢としてあり。
ただGoogle Formはiframeを埋め込む形なので、スクロールがおかしくなるかも。ここはStyle Sheetを正しく設定すればよいのかもですが、知識不足で対応できないし、そもそも発生しないかも。
メールを飛ばすっていう頭で調べてしまうと森に迷い込むけど、まったく別のルートもあるよねっていう話でした。今回はたまたま気づいたけど、こういう大きな迂回ルートは経験値がものをいうなーと思いました。この回避でいいやんっていう人、多いと思うなぁ。