はじめに
前回は「24 日目に LINE ミニアプリが完成する初心者 ── Day10. Messaging API」と題して、LINE 公式アカウントの作成と Messaging API の設定を行いました。
今回は、Messaging APIを使用して資料請求完了の際にLINEにプッシュメッセージを送信する機能を実装していきます。
チャネルアクセストークンを発行
はじめに Messaging API で使用するチャネルアクセストークンの発行を行っていきます。
トークンには以下の種類があります。
- 任意の有効期間を指定できるチャネルアクセストークン
- ステートレスチャネルアクセストークン
- 短期のチャネルアクセストークン
- 長期のチャネルアクセストークン
長期のチャネルアクセストークンの発行
今回は初めなので、簡単に発行できる長期のチャネルアクセストークンを発行していきます。
LINE Developers から Messaging API のチャネルを開いていきます。
上のタブから「Messaging API設定」をクリックします。
ページの一番下にあるチャネルアクセストークンの「発行」をクリックします。
トークンが表示されれば発行は完了です。
プッシュメッセージの実装
プッシュメッセージの実装は以下の情報を元に行っていきたいと思います。
環境変数の設定
先ほど発行したトークンを環境変数として設定していきます。
.env.localには以下の通り設定します。
NEXT_PUBLIC_LINE_ACCESS_TOKEN="your_long_term_access_token"
Netlify 側でも環境変数の設定を行っておきましょう。
line-liff-v2-starter配下のターミナルで以下のコマンドを入力します。
$ netlify env:set NEXT_PUBLIC_LINE_ACCESS_TOKEN "your_long_term_access_token"
API の実装
環境変数の設定が完了したら API を作成します。
pages/api配下に新しくmessage.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 url = "https://api.line.me/v2/bot/message/push";
const response = await fetch(url, {
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${process.env.NEXT_PUBLIC_LINE_ACCESS_TOKEN}`,
},
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`);
}
}
Authorizationとして先ほど発行したアクセストークンを設定しています。
ユーザ ID の取得
プッシュメッセージの設定にはユーザ ID が必要になります。
完了画面を閉じる時にも利用した LIFF SDK を使ってユーザ ID を取得を行っていきましょう。
CatalogPage.tsxに以下の内容を追記していきます。
import { useEffect, useState } from "react";
import liff from "@line/liff";
// （中略）
type MessageProps = {
to: string;
messages: { type: "text"; text: string }[];
};
async function sendData<T>(url: string, { arg }: { arg: T }) {
await fetch(url, {
method: "POST",
body: JSON.stringify(arg),
});
}
export default function CatalogPage({
setIsComplete,
}: {
setIsComplete: (isComplete: boolean) => void;
}) {
const [userId, setUserId] = useState(null);
useEffect(() => {
if (liff) {
liff.ready.then(() => {
liff
.getProfile()
.then((profile) => {
setUserId(profile.userId);
})
.catch((error) => {
console.error("Failed to get profile:", error);
});
});
}
}, [liff]);
// （中略）
}
今回取得したユーザ ID は useState へ格納しています。
送信処理
プッシュメッセージの送信は「送信する」ボタンが押され、スプレッドシートへの出力が完了してから行います。
onSubmitを以下の通り更新していきます。
const { trigger: catalogTrigger, isMutating } = useSWRMutation(
"/api/catalog",
sendData<CatalogPageProps>
);
const { trigger: messageTrigger } = useSWRMutation(
"/api/message",
sendData<MessageProps>
);
const onSubmit: SubmitHandler<CatalogPageProps> = (data) => {
console.log(data);
catalogTrigger(data, {
onSuccess: () => {
setIsComplete(true);
messageTrigger({
to: userId,
messages: [
{
type: "text",
text: "カタログをご請求いただきありがとうございます！カタログのご到着までしばしお待ち下さい。なにかご不明点があれば、お気軽にお問い合わせください！",
},
],
});
},
});
};
以上でプッシュメッセージの実装は完了です。
デプロイ
ここまでの内容が確認できたら LINE 画面で確認するため、デプロイを行いましょう。
line-liff-v2-starter配下のターミナルで以下のコマンドを入力します。
$ netlify deploy --build --prod
動作確認
ご自身の LINE から再度資料請求を行ってみましょう。
送信完了画面が出た後、前回作成した公式アカウントからメッセージが届けば完了です！
まとめ
今回は、Messaging API を使用して資料請求完了時にプッシュメッセージを送信する機能を実装しました。
次回からは新機能として、問い合わせを実装していきたいと思います。
残りは 13 日！
気になる方は是非フォローやカレンダー購読をお願いします