はじめに
前回は「24 日目に LINE ミニアプリが完成する初心者 ── Day14. 問い合わせメッセージ」と題して、Flex Message を使用した問い合わせ機能を完成させました。
今回は、問い合わせのあった内容をスプレッドシートへ出力していきたいと思います。
スプレッドシートの作成
はじめに前回同様スプレッドシートを作成します。
今回は「LINE お問い合わせ」という名前でスプレッドシートを作成しました。
以下のヘッダーには以下を設定します。
- A1: 日時
- B1: ユーザ ID
- C1: カテゴリ
- D1: 内容
以下のようになりました。
Google Apps Script の作成
スプレッドシートの作成が完了したら、GAS プロジェクトを作成します。
上部のメニューから「拡張機能」>「Apps Script」を選択しましょう。
プロジェクト名もスプレッドシートに合わせて「LINE お問い合わせ」としました。
コードは以下の通りです。
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 でデプロイを行います。
右上の「デプロイ」ボタンから「新しいデプロイ」をクリックします。
種類の選択は「ウェブアプリ」を選択します。
デプロイの情報を入力し「デプロイ」を押しましょう。
デプロイが完了すると最後にデプロイ ID とウェブアプリの URL が表示されますのでコピーしておきましょう。
問い合わせ内容送信を実装
GAS 側の準備が完了したので、問い合わせ内容を GAS へ送信する機能を実装していきます。
環境変数の設定
先ほどコピーした Google Apps Script の URL を環境変数として設定しておきます。
.env.localファイルに以下を追加します。
NEXT_PUBLIC_GOOGLE_SCRIPT_URL_INQUIRY=your-script-url
Netlify にもline-liff-v2-starter配下のターミナルで以下のコマンドを入力して、環境変数を設定しておきます。
$ netlify env:set NEXT_PUBLIC_GOOGLE_SCRIPT_URL_INQUIRY "your-script-url"
API に処理を追加
それでば問い合わせ内容の送信処理を追加していきます。
まずはwebhook.tsに GAS の URL へ POST する関数を追加します。
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),
});
}
この送信処理を今回は問い合わせお礼メールを送信する前に実行させるため、以下の部分へ追加を行います。
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`配下のターミナルで以下のコマンドを入力してデプロイを行います。
$ netlify deploy --build --prod
動作確認
LINEから問い合わせを実行してみましょう。
問い合わせ内容を入力しお礼メッセージが送信されたらスプレッドシートを確認します。
問い合わせ内容がスプレッドシートに反映されていれば完了です！
まとめ
ここまでで、問い合わせ内容のスプレッドシートに出力が完成しました。
次回からは、新機能として顧客管理を実装していきたいと思います。
残りは 9 日！
気になる方は是非フォローやカレンダー購読をお願いします