🙃

LINE message APIを使用してユーザーからの自動応答を作成してみた🔥

2023/09/03に公開

Next.js

そもそもLINE message APIとは？

LINE message API（LINE Messaging API）は、LINEプラットフォーム上でボットやアプリケーションとのコミュニケーションを可能にするプログラムインターフェース（API）です。このAPIを使用することで、開発者はLINEユーザーとメッセージをやり取りしたり、自動応答ボットを作成したりすることができます。LINE message APIは、テキストメッセージ、画像、スタンプ、位置情報などのさまざまなメディア形式をサポートしており、ユーザーとの対話を豊かにするためのツールとして利用されます。

なぜ自動応答が便利なのか？

自動応答は、多くの面で便利です。以下はその主な理由です：

24時間対応:
人手での対応が難しい時間帯や休日でも、自動応答はユーザーからのメッセージに即座に返信できます。これにより、ユーザーサポートの利用可能性が向上します。
一貫性: 自動応答はプログラムによって制御されるため、ユーザーに対して一貫したメッセージを送信できます。情報の不一致を避けるのに役立ちます。
効率性: 自動応答は一般的な質問やリクエストに対して迅速に応答できます。これにより、人手での対応が必要なケースを減らし、スタッフの負担を軽減します。
予約や通知: 予約の確認やイベントの通知など、特定のアクションをトリガーに自動応答を送信できます。これにより、予定の管理やリマインダーの設定が容易になります。
パーソナライズ: 適切に設計された自動応答は、ユーザーの行動やプロファイルに基づいてパーソナライズされたメッセージを提供できます。ユーザーエクスペリエンスを向上させます。

事前準備

1. LINE message APIのアカウント作成

まずはLINE message APIのアカウントが必要になります。
https://developers.line.biz/ja/
ここからコンソールへ移動しアカウントを作成してください

私のはプロパイダーもチャネルも作成済みになっています
アカウントを作成すると、この画面へ行きます

2. プロパイダーの作成

プロパイダーってなんなの？って人はこちらを参考までに

ここでプロパイダーを作成しますが名前はなんでもいいです

3. チャネルの作成

LINE message APIで何をしたいかで選択が変わりますが、公式LINEで自動応答を
作成したいのであればMessage APIを選択して下さい

4. チャネルの詳細設定

ここは本当になんでもいいです。必須項目を埋めていって下さい

5. webhookの設定

チャネルを作成し終わるとこの画面に遷移します。

そして画像の画面でMessage API設定のタブを押し、webhook　URLを設定します

webhook URLとは現在作成しているチャネルのユーザーIDのアカウントへ
メッセージや友達追加をされた場合にLINEからRequestされる入り口です
next.jsで作成されている場合は、以下の画像のような状態になります

ここでwebhook URLに設定するURLは LINE message APIの入り口なので

next.jsではlocalhost://api(index.tsを入り口とするなら)

になります。
もしapi配下にindex.ts以外を入り口にしたいなら

localhost://api/その後のファイル名またはフォルダ名

になります

事前準備での注意点

localhostではLINEからは届かないのでlocalhostを外部へ公開する必要があります
公開した際は

公開したurl/api/その後のファイル名またはフォルダ名

localhostを外部に公開するには以下の記事をご参考にして下さい

ngrok

localtunnel

最初のメッセージを受け取ろう

まずはnext.jsで環境構築をしましょう

npx create-next-app@latest

環境ができたらpages/api/の下にindex.tsを作成してみましょう
LINEの入り口を作ってみましょう

import { NextApiRequest, NextApiResponse } from "next";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  if (req.method === "POST") {
    const events = req.body.events;
    console.log(events)

    res.status(200).end();
  } else {
    res.status(405).end();
  }
}

自動応答の作成

LINEのパッケージを使用するため以下をinstallして下さい

npm install @line/bot-sdk

import { Client } from '@line/bot-sdk';
import { NextApiRequest, NextApiResponse } from "next";

const lineClient = (acccessToken: string) =>
    new Client({ channelAccessToken: acccessToken });

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
const acccessToken = 'acccessToken'
//ここでのacccessTokenは下の画像付きの説明しています
  if (req.method === "POST") {
  //このeventsの中にユーザーから送信されたメッセージなどのユーザー情報が格納されている
    const events = req.body.events;
    const message =  {
	type: 'text',
	text:'メッセージありがとう😊',
 　　　　　　};'
    //replyTokenはeventsの中に入ってますので確かめてそれを代入して下さい
    await lineClient(acccessToken).replyMessage(replyToken, message)
    //lineClientにcommand + クリックで詳細を見に行けば何ができるのか書いてるので見て下さい
    res.status(200).end();
  } else {
    res.status(405).end();
  }
}

送信できるメッセージは公式ドキュメントを参考を確認して下さい

アクセストークンとは

自動応答を設定したいチャネルへの許可証だと思って下さい
画像下部にあるチャネルアクセストークンの発行ボタンを押しその文字列を
コピーし、コード上の

const acccessToken = 'acccessToken'
ここに代入して下さい

最後に

自動応答はカスタマーサポートなどが不要になり、ユーザーからの質問に対して
即レスをすることができるため、ユーザビリティの向上に役立つので積極的に
採用していくのがいいと思いました。

またわからないことがあればコメントください。