24日目にLINEミニアプリが完成する初心者 ── Day15. スプレッドシートへの出力


# はじめに

前回は「24 日目に LINE ミニアプリが完成する初心者 ── Day14. 問い合わせメッセージ」と題して、Flex Message を使用した問い合わせ機能を完成させました。

https://qiita.com/non_watanabe/items/1ee618bd3057d39a613a

今回は、問い合わせのあった内容をスプレッドシートへ出力していきたいと思います。

# スプレッドシートの作成

はじめに前回同様スプレッドシートを作成します。

今回は「LINE お問い合わせ」という名前でスプレッドシートを作成しました。

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

- **A1: 日時**
- **B1: ユーザ ID**
- **C1: カテゴリ**
- **D1: 内容**

以下のようになりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2743174/d6e33eac-abbc-a480-6298-b81ba84ef0a7.png)

# Google Apps Script の作成

スプレッドシートの作成が完了したら、GAS プロジェクトを作成します。

上部のメニューから「拡張機能」>「Apps Script」を選択しましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2743174/0324d10b-fe3f-92c6-613c-520885a7b3f4.png)

<br/>
プロジェクト名もスプレッドシートに合わせて「LINE お問い合わせ」としました。

コードは以下の通りです。

```js
function doPost(e) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const data = JSON.parse(e.postData.contents);

  const timestamp = new Date();
  const { userId, category, details } = data;

  sheet.appendRow([timestamp, userId, category, details]);

  return ContentService.createTextOutput(
    JSON.stringify({ status: "success" })
  ).setMimeType(ContentService.MimeType.JSON);
}
```

GAS 側の実装はシンプルで、`timestamp, userId, category, details`をスプレッドシートに出力するのみの内容です。

# GAS のデプロイ

URL を取得するため GAS でデプロイを行います。

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2743174/2a4ac67d-bb2e-a237-3fb3-bc6858b49daf.png)

<br/>
種類の選択は「ウェブアプリ」を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2743174/9b8b5c2d-83a3-27e3-f1ee-92a9471c8d6f.png)

<br/>
デプロイの情報を入力し「デプロイ」を押しましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2743174/3d44b835-8158-dbd6-e385-c1fffc89f8a9.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2743174/3e3ab185-ccc5-de0e-9d56-d1972e8e12ae.png)

デプロイが完了すると最後にデプロイ ID とウェブアプリの URL が表示されますのでコピーしておきましょう。

# 問い合わせ内容送信を実装

GAS 側の準備が完了したので、問い合わせ内容を GAS へ送信する機能を実装していきます。

## 環境変数の設定

先ほどコピーした Google Apps Script の URL を環境変数として設定しておきます。

`.env.local`ファイルに以下を追加します。

```
NEXT_PUBLIC_GOOGLE_SCRIPT_URL_INQUIRY=your-script-url
```

Netlify にも`line-liff-v2-starter`配下のターミナルで以下のコマンドを入力して、環境変数を設定しておきます。

```terminal
$ netlify env:set NEXT_PUBLIC_GOOGLE_SCRIPT_URL_INQUIRY "your-script-url"
```

## API に処理を追加

それでば問い合わせ内容の送信処理を追加していきます。

まずは`webhook.ts`に GAS の URL へ POST する関数を追加します。

```ts:src/nextjs/pages/api/webhook.ts
async function saveToSpreadsheet(data) {
  await fetch(process.env.NEXT_PUBLIC_GOOGLE_SCRIPT_URL_INQUIRY, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(data),
  });
}
```

この送信処理を今回は問い合わせお礼メールを送信する前に実行させるため、以下の部分へ追加を行います。

```ts:src/nextjs/pages/api/webhook.ts
      else if (
        userState.has(userId) &&
        userState.get(userId).step === "detailsInput"
      ) {
        const state = userState.get(userId);
        const category = state.category;
        const details = userMessage;

        // Google Apps Script にPOSTリクエスト
        await saveToSpreadsheet({ userId, category, details });

        userState.delete(userId);

        await sendReply(event.replyToken, [
          {
            type: "text",
            text: "お問い合わせいただきありがとうございます！ご回答には通常2営業日以内に返答いたします。なにかご不明点があれば、お気軽にお問合せください！",
          },
        ]);
      }
```

これで問い合わせ内容の送信処理の実装は完了です！

# デプロイ

いつも通り、line-liff-v2-starter`配下のターミナルで以下のコマンドを入力してデプロイを行います。

```terminal
$ netlify deploy --build --prod
```

# 動作確認

LINEから問い合わせを実行してみましょう。

問い合わせ内容を入力しお礼メッセージが送信されたらスプレッドシートを確認します。

問い合わせ内容がスプレッドシートに反映されていれば完了です！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2743174/c7c356b3-1fb7-3330-d4ed-462c1fab5134.png)

# まとめ

ここまでで、問い合わせ内容のスプレッドシートに出力が完成しました。

次回からは、新機能として顧客管理を実装していきたいと思います。

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