この記事はFusic Advent Calendar 2025の13日目の記事です。
はじめに
今回は、「スプレッドシートで手軽に集計できるフォームを作りたい」、「でもフォームの見た目にこだわりたい」、「さらにフォームが送信されたら通知を受け取りたい」という方に向けた、Next.js+スプレッドシート+SlackAPI構成のフォームの作り方をご紹介します。
シンプルな作りなので、もし機会がありましたらこの方法を用いていただけますと幸いです。
きっかけ
Google Formではスプレッドシートと連携させて結果を集計・分析できますが、見た目を自分好みにすることができません。そこで、Next.jで作ったフォーム画面をスプレッドシートに連携すれば、フォームのデザインや送信時の機能を自由自在にできるのではないかと思い立ち、作り始めました。
できたもの
とてものびしろの感じられるフォームデザインではありますが、Google Form単体やGoogle Formの埋め込みよりはオリジナリティのあるものにできたのではないかと思います。
また、スプレッドシートでデータを様々な形で扱えるように年・月・日・時刻それぞれをカラムとして設定したり、送信時のSlack通知にスプレッドシートのリンクを設定したりと、運用のための工夫も複数施せたと思います。
ソースコードは以下のリポジトリにて公開しています。
Nekonootete / next-spreadsheet-slack-sample
実装上のポイント
ここからは、実装上のポイントとなった部分をご紹介します。
Next.jsでフォーム画面を作る
今回は手軽にデザインするためにTailwindCSSを使っています。クリスマスを意識して緑をメインに赤を差し色として入れてみました。
スプレッドシートにデータを送信する
スプレッドシートとの連携については以下のREADMEを参考にして実装しています。
catnose99/timeline
注意点としては、Next.jsからスプレッドシートに送信するオブジェクトのキーとスプレッドシート上のカラム名を一致させる必要があります。キーの全てが一致していないとデータが送信されません。
const inquirySheet = doc.sheetsByTitle[sheetName];
const newRow = {
年:year,
月:month,
日:day,
時刻:time,
名前:name,
メール:email,
感想:content,
送信元:from};
await inquirySheet.addRow(newRow);
シート名についても、運用の途中で変えることがあると思いますが、その際にNext.js側の環境変数も変えることを忘れないようにしないといけません。
Slackに通知する
これについても、公式リポジトリのREDMEに詳しく説明されているので、そちらを参考にされてください。
slackapi / node-slack-sdk
ちなみに、Slack APIの使い方については、こちらの電子書籍がとてもわかりやすいのでおすすめです。
AWSとRubyではじめるサーバーレス入門
まとめ
今回は、Next.jsで作成したフォームの入力内容をスプレッドシートやSlackに連携させる方法をご紹介しました。
スプレッドシートに送られたデータをGoogle Applecation Scriptで処理すれば、より便利なフォームができあがると思います。
他にも便利な活用方法があったらぜひコメントなどで教えていただけるとうれしいです。