- htmxを用いたコンタクトフォームの実験
- 問い合わせ内容をGoogleスプレッドシートに記録します。
- Google Sheets APIを使用。
- APIはExpressで実装。
- Vercelにサーバーレスファンクションを用いてデプロイ。
server\inquiryProcessor.js
のSPREADSHEET_ID
にGoogleスプレッドシートのIDを設定する。これは、https://docs.google.com/spreadsheets/d/スプレッドシートID/edit
のスプレッドシート
の部分です。- Googleスプレッドシートの共有設定で、
.env
ファイルにあるclient_email
のメールアドレスを編集者として設定する。 - 以下のような内容の
.env
ファイルが必要です。
GOOGLE_SERVICE_ACCOUNT_CREDENTIALS='
{
"type": "service_account",
"project_id": "contact-form-******",
"private_key_id": "d00be****\n-----END PRIVATE KEY-----\n",
"client_email": "contact-form-api@contact-form-******.iam.gserviceaccount.com",
"client_id": "********",
"auth_uri": "https://accounts.google.com/o/oauth2/auth",
"token_uri": "https://oauth2.googleapis.com/token",
"auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
"client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/contact-form-api%40contact-form-******.iam.gserviceaccount.com",
"universe_domain": "googleapis.com"
}'
SPREADSHEET_ID = 'xxxxx';