Node環境(Next.js)からのお問い合わせフォーム

# はじめに
Next.jsでホームページを作っていて、その中でお問い合わせフォームを作りたいと思いました。そこで試行錯誤した記録。

結論は、Google Formを使いましたっていう話。

## 技術や要件
- next: 14.0.4
- Vercelでデプロイ
- 問い合わせがあったら、Gmailへ飛ばしたい

# 検討１：SendGrid
[SendGrid](https://sendgrid.kke.co.jp/)というサービスがあります。月12,000通まで無料で、メールを送るAPIが提供されています。
結果的に使用は諦めました。

## 問題点：利用者は法人であること
私が作ろうとしていたホームページは、個人事業主としてのホームページで、法人は立ててないんですよね。。まだいいかなと思ってて。
利用申し込みの法人名を入力する欄は、もしかしたら個人事業主の屋号でもいけるかもしれないけど、「法人」って書いてあるし、まぁ今回は無理せずさらっと諦めました。

# 検討２：Nodemailer
次は、npmのライブラリ [nodemailer](https://www.npmjs.com/package/nodemailer) を使う方法。ググって得た情報によると、やる前から問題がありそうだとわかっていました。

## 問題点：Vercelでデプロイすると、Gmailへ送れないらしい etc
VercelにデプロイしたnodemailerからGmailのSMTPを利用しようとすると、Googleが、地理的な何かの点で安全性が低い？または不正利用と判断して送ってくれない問題があるようです。
また、nodemailerによる情報（[Using Gmail :: Nodemailer](https://nodemailer.com/usage/using-gmail/)）によると、やるとしたらOAuth2認証が必要だけど、Gmail側はAPI利用でなく人の利用を想定しているから、好ましくないとのこと。
さらに、ググって出てくる方法（アカウント管理～セキュリティ～２段階認証～アプリパスワード）は、Googleアカウントのページに推奨されてないって書いてある。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/87811f72-5482-3caa-2fad-ad45a23ac5e3.png)

そんないくつかの問題点があってもやるか？という話ですが、趣味や技術検証でなく、ビジネスで利用しようとしているので、選択できないと判断しました。Googleの仕様変更に弱そう。

### 参考
- [Next.jsだけでお問い合わせフォームを作る方法を解説 ｜ monotein](https://monotein.com/blog/nextjs-making-contact-function)
    - 偶然見つけたこちらの記事ですが、ちょうどホームページを作るときに参考にしたこちらの本の著者の方。本も記事も、Next.js v13で大きく変わった内容も考慮してくれた書き方で、読みやすいです。本はおすすめ。
      - [Amazon.co.jp: はじめてつくるNext.jsサイト: 最新バージョンのNext.jsを最速・時短で習得できる本 eBook : 三好アキ: Kindleストア](https://www.amazon.co.jp/dp/B0C7746ZC4)

# 検討３：Google Form
お問い合わせフォームなんて大した入力ではないよなーアンケートみたいな・・・と思って思いついたのが、Google Form。Google Spread Sheetに結果を書けるから、それをトリガーに、Google Apps Script(GAS)でGmailへ連携できるんじゃないかーということ。
ちょっと懸念点として、確かGASを使うときGCPのプロジェクトを立てて、それは課金が発生するんだっけ・・・しないんだっけ・・・ということがわからず、調べました。

## 1.Google Formを作成
Google Driveのフォルダ内を右クリックから、フォームを作って、質問項目を作りました。
上のタブのようなところ（「質問」「回答」「設定」）の「回答」から、"スプレッドシートにリンク"とすると、スプレッドシートを作れます。作らないと、どこにできるんだろう。その場合の容量は無料？まぁいいか。
「送信」ボタンは、このフォームを送る先を決めるボタンで、メールか、リンク送付か、Webシステム用の埋め込みかを選べます。３つ目のがまさにやりたいこと！あった！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/ff821a71-1b2a-52c5-d1a3-1558ca56cf59.png)
iframeをコピペすればいいのか。

## 2. Next.jsのページに埋め込む
Next.jsの書き方の説明は割愛しますが、ただiframeのタグを貼り付けただけで表示はできました。

見てみると、縦スクロールバーがiframeの中と、ページ全体ので２つ出る問題発生。これはダサい。いけてない。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/66e9d54e-e8f6-0921-ba1a-26ef5384ec66.png)
tailwindの`overflow-hidden`を設定して非表示で解消。

だけど今度は縦スクロールできなくなる、フリーズみたいな現象が発生。
Chromeの開発ツールの他デバイスのエミュレーターみたいなモードで、マウスのコロコロと、ドラッグのスクロールの両方を交互に使ってると、発生します。でも実際のスマホ(iPhone)では発生しないし、Chromeの何かの問題かもしれないと思って、思い切って放置！

最終的にこうしてます。
```jsx
<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の変更をメールで[通知する機能](https://support.google.com/docs/answer/91588?hl=ja&co=GENIE.Platform%3DDesktop)というのがあることがわかりました。
変更内容とかはないけど、とにかく変更があったことをメールで通知する。
変更都度か、１日１回まとめて通知かも選べる。

これで十分！！

Google Spread Sheetを直接編集することはないし、もし今後、フォーム入力とメールを１：１で正確に対応付けたいなら、改めてGASの登場としておきましょう。お金かからない！楽！手固い！

あ、設定方法は、メニューのツール＞通知設定からです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/3bf397e8-f631-6860-3409-eefd2cbf0750.png)


以上で、Next.jsの環境に、お問い合わせフォームの実装を終わります。

# まとめ
最終的に、Google Formを使えばいいやんってだけでした。今後、発展したければGASを使うことも選択肢としてあり。
ただGoogle Formはiframeを埋め込む形なので、スクロールがおかしくなるかも。ここはStyle Sheetを正しく設定すればよいのかもですが、知識不足で対応できないし、そもそも発生しないかも。

メールを飛ばすっていう頭で調べてしまうと森に迷い込むけど、まったく別のルートもあるよねっていう話でした。今回はたまたま気づいたけど、こういう大きな迂回ルートは経験値がものをいうなーと思いました。この回避でいいやんっていう人、多いと思うなぁ。