webhookとLINEチャットの併用を体験してみよう！～チャットボットとLINEチャットの併用～

ユーザーがLINE公式アカウントに問い合わせを行い、登録されている語句(完全一致)があればそのデータをメッセージ送信にして返します。

登録されている語句がなければ、連続2回までは、語句を変えてくださいと送りますが、3回目には担当者につなぎますという文言を送り、担当者にはLINEnotifyでユーザーからの問い合わせ回答ができなかったというメッセージを送信して、担当者へLINEチャットで対応するように促すものを作ります。

今回は、お試しで東京都文京区のゴミ分別をデータベースとして、チャットボットを作成します。

2．１ LINE Developers（https://developers.line.biz/ja/）からログイン

２．２．アカウントを入力

LINEアカウント・・・・・ 現在、利用しているLINEと連携することができます。
ビジネスアカウント・・・ メールアドレスで登録することができます。

※LINEアカウントだと、スマホでQRコードを読み取ってログインができるなど簡単なのでおすすめです。

アカウントをお持ちでないかたは、これからアカウントを作成します。

２．２．１アカウントの新規作成

①

初めての方は「アカウントの作成」を押下してください。

②

「LINEアカウントで登録」または「メールアドレスで登録」を選択してください。

LINEアカウントで登録は簡単ですので、こちらでは、メールアドレスで登録の説明をします。

③登録するメールアドレスを入力してください。

④入力したメールアドレスに登録確認メールが届きますので「登録画面に進む」を押してください。

⑤名前とパスワードを入力して登録してください。

⑥登録確認画面で「登録」を押下

⑦ユーザー登録が完了しました。LINE DevelopersIDの作成を行います

⑧LINE開発者登録

開発者名とメールアドレスを入力し、LINE開発者契約の内容を確認しチェックをいれ、アカウントを作成します。

３．１新規プロバイダーを作成

３．２チャネル作成

チャネル設定で「Messaging API」を選択

チャネルを作成します。

・チャネルの種類
 MessagingAPI（自動で選択済み）
・プロバイダー
 先ほど作成したプロバイダー（自動で選択済み）
・会社・事業者の所在国・地域
 【日本】を選択
・チャネルアイコン
 今回のチャネルのアイコンを設定できます。
 特にない場合は選択無しでも、後ほど設定できます。
・チャネル名
 20230524ハンズオン
 など、任意のチャネル名を設定してください。
・チャネルの説明
 簡単な説明をいれます。チャネル名と同じでも問題ありません。
・大業種
 個人
・小業種
 個人（その他）
・メールアドレス
 自動入力済み
・プライバリーポリシーURL
 サービス利用規約URL
 今回は空欄。

「LINE公式アカウント利用規約」と「LINE公式アカウントAPI利用規約」にチェックをいれ作成ボタンを押します。

確認画面がでますので確認をしてＯＫボタンを押下します。

【情報利用に関する同意について】を読み【同意する】を押下

ZHDグループへの情報提供に関する個別規約への同意についてを読み【同意する】を押下

これでLINE DevelopersからLINE公式アカウントの作成が完了しました。

４．１チャネルアクセストークンの発行

このチャネルと後ほど作成するGAS(Google Apps Script)をつなぐ認証キーを発行します。

先ほどの画面で「MessagingAPI設定」タブを押し、下部にある「チャネルアクセストークン(長期)」の発行ボタンを押します。すると長い文字列が表示されます。これが「チャネルアクセストークン」となり、認証に使われる文字列となります。外部に漏れると、このLINEチャネルが悪用される恐れがありますので、ご注意ください。

この発行されたチャネルアクセストークンをメモしてください。

４．２ webhook設定

Webhookとは、http通信でデータを送信する先を設定することです。

LINEから入力されたデータをどこのURLに送信するかを設定します。

LINE Developersの機能では、高度なMessaging APIの設定などは行えますが、簡単な応答メッセージや、挨拶メッセージの設定は、LINE official Account Managerにて行います。その他、チャネルのアイコンや名称、リッチメニューの設定などもLINE official Account Managerにて行います。

５．１ LINEチャット機能ON

では設定を行います。

MessagingAPI設定タブから、下部にある応答メッセージの編集ボタンをクリックします。するLINE official Account Managerに飛びます。

LINE official Account Managerの画面から、応答設定にある、【チャット】をＯＮにします。

すると自動的に【応答メッセージ】の項目の表示が消えます。

データベースとして使用するスプレッドシートとGASの作成を行います。

今回コード(プログラム)は、事前に作成しておりますのでそちらを利用します。

６．１スプレッドシートのコピー

下記アドレスの開きスプレッドシートを各自のマイドライブにコピーしてください。

スプレッドシートを開く

６．２アクセストークンの記載

４．１でLINEdevelopersで発行しましたアクセストークン(長期)を【設定】シートのセルC2に貼り付けます。

６．３ AppsScriptの起動のデプロイ

GASのコードが記載されているか確認をします。

スプレッドシートから「拡張機能」→「Apps Script」を選択してます。

（1回選択するだけだと、開かないことがあるので、その時はもう1度同じように選択してください。）

スクリプトエディタが開き、今回使用するコードがみられます。

保存が完了しましたら、デプロイをします。

では、実際にやってみましょう。

右上にある、「デプロイ」ボタンから「新しいデプロイ」を選択します。

新しいデプロイ画面でウェブアプリを選択します。

そして各項目を入力します。

・説明
 例）ハンズオンデプロイ初回
 ※この欄は空欄でもかまいません
・ウェブアプリ
 自分
・アクセスできるユーザー
 全員

に設定して、デプロイボタンを押します。

初めてそのコードをデプロイするときは、承認してもよいかの確認がありますので

「アクセスを承認」ボタンを押します。

次にどのアカウントで承認するか選択します。

スプレッドシートおよびGASを作成したアカウントを選択します。

作成したGASがスプレッドシートのデータを編集したり、外部サービス(今回であれば、LINEDevelopers)へ接続してもよいかの確認が来ますので、許可ボタンを押します。

デプロイが完了です。

以下の画面が表示されます。

ウェブアプリに表示されているURLが、作成をしたWEBアプリのURLです。

先ほどGASで作成したWEBアプリのURLをwebhookの送信先として設定します。

LINEDevelopersの画面に戻り、MessagingAPI設定タブを選択し、Webhook設定のWebhook URLのところに、先ほどコピーしたWEBアプリのURLを貼り付けます。

貼り付けて更新ボタンを押し、そしてwebhookの利用にチェックをいれます。

以上で、完了となります。

実際に、動くか皆さんのLINEに友だち登録をして、動作するか試してみましょう。

LINEDevelopersから、MessagingAPI設定タブを選択します。

するとQRコードが表示されておりますので、こちらをスマホで読み込んで友だち登録します。

以下のようにメッセージがかえってくれば成功です！！

それでは先ほど、コピーして保存しましたスプレッドシートの【問い合わせ内容】シートご覧ください。

こちらで話しかけたメッセージが保存されていると思います。

今のままでは、3回連続でデータベースにないものを問いかけても通知は行きません。

通知が行くように、設定をいたします。

LINEnotifyのHPにアクセスし、右上のボタンからログインします。

その後、名前のところを選択してマイページを選択します。

次のページに行くとページの初めか一番下にトークンの発行ボタンがありますので

そこで【トークンを発行する】を選択します。

トークンの発行画面がでてきます。

そこで

①トークン名(この名前で通知されます。問い合わせチャットのようなわかるものでOKです！)
②どこで受け取るか
（グループか個人か選択できます。店員さん全員に通知などの場合は事前にグループを作り選択します。
個人の場合は一番上の【1：1でLINE Notifyから通知を受け取る】を選択します。）

を選択して、決まりましたら一番下の

③【トークンを発行する】のボタンを押します。

そうするとトークンが発行されます！

注意書きのように、ここでしか発行されずに閉じるを押すと二度と表示されませんので

すぐにコピーをして、スプレッドシートの【notify】シートのB3にはりつけてください。

A3セルには誰のもか分かるように名前を記載してください。

これでデータベースにない問い合わせが3回続いた場合通知が行くようになります。

LINEチャットをONにいたしましたのでLINEチャットの状況を確認します。

先ほどチャットのONの設定しましたLINEOfficialAccountManagerからチャットを開いてください。

チャット画面はこのようなものになっております。

LINEチャットの詳細な紹介は操作はこちらをご確認ください。

今回はbotとLINEチャットの区別がわかるようにbotにはメッセージ送信時にアイコンをつけております。

詳細はGASの下記コードをご確認ください。

LINEのドキュメントはこちらです。

"sender": {
          "name": "自動応答bot",
        "iconUrl":"https://drive.google.com/uc?export=view&id=〇〇〇"
           }

以上で、完成となります！

いかがでしたでしょうか。

今回はゴミ分別でしたが、いろいろなチャットbotが作れると思いますのでいろいろと変更して色々なものを作成してください！

(個人・商用ご利用は自由となっております。)

不明点がございましたら

問BOXスペシャルマンとマッシュルーマン LINE公式アカウントまで

お気軽にお問い合わせください！

https://lin.ee/PfVLNKa