24日目にLINEミニアプリが完成する初心者 ── Day8. スプレッドシートとの連携

はじめに

前回は「24 日目に LINE ミニアプリが完成する初心者 ── Day7. フォーム UI の作成」と題して、資料請求フォームの UI を作成しました。

今回は、GASを使ってフォームで入力されたデータをGoogleスプレッドシートに保存する機能を実装していきたいと思います。

GAS（Google Apps Script）の設定

はじめに GAS ってなに？という人のために簡単に説明を載せておきます。

GAS（Google Apps Script）は、Google スプレッドシートや Google ドキュメントなどの Google 製品を操作するための JavaScript ベースのローコードプラットフォームです。

基本的な説明は省くため、初めて使うよって方は以下の記事で 1 から説明していますので参考にしてみてください。

スプレッドシートの作成

まず、フォームのデータを保存するためのスプレッドシートを新規で作成しましょう。

今回私は「LINE 資料請求」という名前でスプレッドシートを作成しました。

以下のヘッダーには以下を設定します。

• A1: お名前
• B1: メールアドレス
• C1: 電話番号
• D1: 郵便番号
• E1: 都道府県
• F1: 市区町村
• G1: 町名・番地
• H1: メッセージ
• I1: 送信日時

こんな感じで作成ができました。

Google Apps Script の作成

次に GAS のプロジェクトを作成します。

スプレッドシート上部のメニューから「拡張機能」>「Apps Script」を選択します。

プロジェクト名もスプレッドシートに合わせて「「LINE 資料請求」としました。

では早速コードを書いていきます。

function doPost(e) {
  try {
    // JSONをパース
    const data = JSON.parse(e.postData.contents);

    // スプレッドシートを取得
    const sheet = SpreadsheetApp.getActiveSheet();

    // データを行として追加
    sheet.appendRow([
      data.name,
      data.email,
      data.tel,
      data.postalCode,
      data.prefecture,
      data.city,
      data.address,
      data.message,
      new Date().toLocaleString(), // 現在時刻
    ]);

    return ContentService.createTextOutput(
      JSON.stringify({ success: true, message: "Data added successfully" })
    ).setMimeType(ContentService.MimeType.JSON);
  } catch (error) {
    console.log("Error: " + error.message);
    return ContentService.createTextOutput(
      JSON.stringify({ success: false, error: error.message })
    ).setMimeType(ContentService.MimeType.JSON);
  }
}

データを受け取ってappendRowでスプレッドシートに追加するというシンプルな処理です。

GAS のデプロイ

Next.js からデータを受け取るためには GAS のデプロイが必要になります。

右上の「デプロイ」ボタンから「新しいデプロイ」をクリックします。

種類の選択がありますが、ここでは「ウェブアプリ」を選択します。

ここでデプロイの情報を設定します。

• 新しい説明文： 資料請求フォーム（API わかりやすいものであれば構いません）
• 次のユーザーとして実行： 自分
• アクセスできるユーザー： 全員

最後に右下の「デプロイ」ボタンをクリックしたらデプロイは完了です。

初回のデプロイ時 Google アカウントの認証が求められることがあります。

その場合は画面の指示に従って認証を完了させてください。

デプロイが完了すると最後にデプロイ ID とウェブアプリの URL が表示されます。

この URL については、後ほど Next.js で使用するのでコピーしておいてください。

フォームの送信処理の実装

GAS の準備が完了したら、Next.js でフォームの送信処理を実装していきます。

環境変数の設定

はじめにsrc/nextjs配下に.env.localファイルを作成し、先ほどコピーした Google Apps Script の URL を設定しておきましょう。

NEXT_PUBLIC_GOOGLE_SCRIPT_URL=your-script-url

API 関数の作成

次に Google Apps Script にデータを送信するための API 関数を、Next.js の API ルートを使って作成します。

この関数は、クライアントからの POST リクエストを受け取り、Google Apps Script の URL にデータを転送します。

src/pages/api/catalog.ts

import type { NextApiRequest, NextApiResponse } from "next";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const { method, body } = req;
  if (method === "POST") {
    try {
      const scriptUrl = process.env.NEXT_PUBLIC_GOOGLE_SCRIPT_URL;

      const response = await fetch(scriptUrl, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body,
      });

      const result = await response.json();
      res.status(200).json(result);
    } catch (err) {
      res.status(500).json({ error: "Internal Server Error" });
    }
  } else {
    res.setHeader("Allow", ["POST"]);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

フォームの送信処理の実装

フォームの送信処理は今回、 SWR というライブラリを使ってを実装したいと思います。

TanStack Queryよりシンプルな記述で書けるので、今回はこちらを採用しました。

SWR のインストール

src/nextjs配下で以下のコマンドを実行しましょう。

npm install swr

フォームの送信処理の実装

送信処理にはuseSWRMutationを使用するため、先にフェッチャー関数を定義します。

src/nextjs/components/pages/catalog/CatalogPage.tsx

import useSWRMutation from "swr/mutation";

// （中略）

async function sendData<T>(url: string, { arg }: { arg: T }) {
  await fetch(url, {
    method: "POST",
    body: JSON.stringify(arg),
  });
}

このフェッチャー関数と path をuseSWRMutationに渡して、trigger関数を取得します。

今回は送信ボタンを押した際に送信処理を実行するため、onSubmit関数内でtrigger関数を呼び出します。

src/nextjs/components/pages/catalog/CatalogPage.tsx

import { useForm, SubmitHandler } from "react-hook-form";
import useSWRMutation from "swr/mutation";

// （中略）

async function updateUser(url: string, { arg }: { arg: CatalogPageProps }) {
  await fetch(url, {
    method: "POST",
    body: JSON.stringify(arg),
  });
}

export default function CatalogPage() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<CatalogPageProps>();

  const { trigger: catalogTrigger, isMutating } = useSWRMutation(
    "/api/catalog",
    sendData<CatalogPageProps>
  );
  
  const onSubmit: SubmitHandler<CatalogPageProps> = (data) => {
    console.log(data);
    trigger(data);
  };

  // （中略）
}

これで送信処理の実装は完了です！

動作確認

それでは動作確認をしていきましょう。

ブラウザの検証ツールからネットワークを開いた後、フォームにテストデータを入力して送信ボタンをクリックしてみます。

200 のステータスコードが確認できました。

GASの実行数のタブも見てみましょう。

筆者は何度も試したためバージョン 7 の表記になっていますが、ステータスは完了で表示されているのがわかると思います。

最後にスプレッドシートを見てみます。

フォームで入力した内容が出力されているのが確認できました。

Netlify への環境変数設定

最後に.env.localに設定した環境変数を Netlify にも設定しておきましょう。

$ netlify env:set NEXT_PUBLIC_GOOGLE_SCRIPT_URL "your-script-url"

まとめ

今回は GAS を使用してフォームデータをスプレッドシートに保存する機能を実装しました。

次回は、送信完了時の完了画面等を作成し資料請求フォーム UI を完成させていきます。

残りは 16 日！
気になる方は是非フォローやカレンダー購読をお願いします