LINEのBot開発 超入門 Non-Coding版


# 概要

この記事ではLINEで動作するBotを開発する方法をチュートリアル形式で記載しています。カバーする内容は、「寿司の出前を受付するBot」を開発するというもので、LINE側でのアカウント開設から、Dialogflowを使った対話エンジンの作成をおこないます。コーディングを必要としないため、あまり技術的な知識がない方でもBotの作成をエンジョイすることができます。

# 必要なスキルと環境

- LINE
- Dialogflow

*＊どちらも無料で使用できます*


# 開発の流れ

- まず最初にBotのアカウントを作成します。この作業はLINE Developers コンソールというWebサイトで「Channel」を作成するという作業になります。 *＊以後BotのアカウントのことをChannelと呼びます。*
- DialogflowでこのBot用の「Agent」を作成し、設定していきます。Agentはユーザーの発言を理解し、応答をおこなってくれる存在です。


# 手順

## Channelを作成する

[LINE Developer コンソール](https://developers.line.me/ja/)にアクセスし、ログインボタンをクリックして自身のLINEアカウントでログインします。
![login.png](https://qiita-image-store.s3.amazonaws.com/0/26079/869f72dd-d485-d8eb-ec6c-08fc6d60a438.png "login.png")


はじめてログインしたときには開発者登録を求められますので必要事項を入力してください。
![first login.png](https://qiita-image-store.s3.amazonaws.com/0/26079/b78f6caf-7302-c573-8662-8589b58b94c6.png "first login.png")


「はじめる」をクリックして次のスクリーンに移ります。
![get_started.png](https://qiita-image-store.s3.amazonaws.com/0/26079/a1d7bb5e-77c6-2e93-fc8e-25eff50d136c.png "get_started.png")


次にプロバイダーを作成します。プロバイダーとはこれから作成するBotの提供元として表示される情報です。
![welcome_to_console.png](https://qiita-image-store.s3.amazonaws.com/0/26079/a6a3aafd-552c-8ba1-f4c0-078334943741.png "welcome_to_console.png")


必要情報を入力して進んでください。
![new provider.png](https://qiita-image-store.s3.amazonaws.com/0/26079/17c03b9d-954c-1c1c-df87-9f1482dac914.png "new provider.png")


次にChannelを作成します。ChannelにはLINEログインとMessaging APIの2つが存在します。今回作成するのはBotなのでMessaging APIを選択してください。
![new_provider_created.png](https://qiita-image-store.s3.amazonaws.com/0/26079/504bc7c7-0df7-fe92-59a5-5316ca8861ec.png "new_provider_created.png")


こちらの画面で必要情報を入力していきます。
![new channel.png](https://qiita-image-store.s3.amazonaws.com/0/26079/338e030a-06db-e4d8-2a1d-22d973e4b4d5.png "new channel.png")


- アプリ名: **任意のアプリ名**
- アプリ説明: **任意のアプリ説明**
- プラン: **Developer Trial**
- 大業種: **飲食店・レストラン**
- 小業種: **すし**
- メールアドレス: **ご自身のメールアドレス**

これでChannelが作成されますが、まだもう少し設定が必要です。「設定が完了していません」をクリックします。
![configure_channel.png](https://qiita-image-store.s3.amazonaws.com/0/26079/80683ebd-d650-d544-f7c9-df09fc903299.png "configure_channel.png")


メッセージ送受信設定のセクションにあるアクセストークンの「再発行」ボタンをクリックします。
![issue_channel_access_token.png](https://qiita-image-store.s3.amazonaws.com/0/26079/b848603d-e7f2-a5e3-606a-214ba70420c9.png "issue_channel_access_token.png")


そのまま再発行をクリックします。
![reissue.png](https://qiita-image-store.s3.amazonaws.com/0/26079/a191fb50-4ba1-82e5-42d7-f690a6aea67e.png "reissue.png")


これでアクセストークンが発行されます。このトークンはMessaging APIの呼び出し時に必要になります。

あと残りの項目を下記の通り設定します。

**メッセージ送受信設定**

- Webhook送信: **利用する**

**LINE@機能の利用**

- 自動応答メッセージ: **利用しない**
- 友達追加時あいさつ: **利用しない**

これでChannelの設定は**ほぼ**完了です。Dialogflowを設定するとWebhook URLが明らかになりますのでWebhook URLの設定だけその後おこないます。
また、これからおこなうDialogflowの設定でChannelの情報が必要になりますのでこのページは開いたまま、次のステッップへ進みます。


## 対話エンジンの設定

Dialogflowは自然言語処理のサービスであり、ユーザーが発話した文章が何を意図しているのかを特定するために利用します。また、その文章の中からパラメーターを抽出する機能も備えています。
また、文脈や条件に応じた返信をおこなう機能も包含しており、これだけでも対話エンジンとして利用することもできます。
まずは下記Dialogflowのサイトにアクセスしてアカウントを作成してください。

[Dialogflow](https://dialogflow.com)

アカウントが作成できたらDialogflowにログインし、Agentを新規に作成します。必要な項目を入力して「Create」ボタンをクリックします。
![create_agent.png](https://qiita-image-store.s3.amazonaws.com/0/26079/3364eacc-0f26-4104-cafc-1eeb677c17da.png "create_agent.png")


- Agent name: **任意のAgent name**
- DEFAULT LANGUAGE: **Japanese - ja**



最初にEntityを登録します。Entityには二つの役割があります。

ひとつは表記揺れを吸収する役割です。例えば「寿司」という単語の場合、「寿司」と書かれる場合もあれば、「すし」の場合、あるいは「スシ」「鮨」などのバリエーションが考えられます。こういう場合に「sushi」というEntityを作成しておき、バリエーションとして前述の寿司、すし、スシ、鮨を登録しておくと、Dialogflowが「寿司」を理解しやすくなります。

もうひとつはユーザーのメッセージ中でBotが抽出したいパラメータを特定する役割です。例えば寿司の出前注文の場合、どのメニューを注文するのか特定する必要があります。「松」「竹」「梅」というメニューがあったとすると、ユーザーは「松を出前でお願いしたいんですが」というメッセージでオーダーをいれてくる可能性があります。この時、メニューは「松」であると特定する必要がありますので、「menu」というEntityを作成しておき、そのバリエーションとして松、竹、梅を登録しておくと、Dialogflowがメッセージからメニューを抽出してくれるようになります。

では早速Entityを作っていきます。今回はメニューだけ登録してみます。左サイドバーからEntitiesの＋をクリックします。
![plus_entities.png](https://qiita-image-store.s3.amazonaws.com/0/26079/3e83da1f-e9cd-e3b7-5aa5-7b74dc58a881.png "plus_entities.png")


Entityの作成・編集フォームに遷移します。まずmenuのEntityを作成します。
![entities_form.png](https://qiita-image-store.s3.amazonaws.com/0/26079/ef320661-fa4e-3e17-e548-4949a355368c.png "entities_form.png")


- Entity name: **menu**
- Define synonyms: **チェックをはずす**
- value: **松、竹、梅**　（一行に一単語を入力）

必要な情報を入力したら「SAVE」をクリックします。

次にIntentを登録します。Intentはメッセージから「意図」と特定するための学習設定で、今回の場合だと「ユーザーは出前を注文しようとしている」という意図を特定できるようにする必要があります。学習プロセスはシンプルで、この意図を伝える際に使われる表現を例文としてどんどん登録していきます。

左サイドバーからIntentsの＋をクリックします。
![スクリーンショット_2018-05-04_10_32_24.png](https://qiita-image-store.s3.amazonaws.com/0/26079/9d6344ff-3501-4a63-639c-66cd0c2a22cb.png "スクリーンショット_2018-05-04_10_32_24.png")


Intentの作成・編集画面に遷移します。Intent nameに「出前注文」と入力し、ADD TRAINING PHRASESをクリックします。
![スクリーンショット_2018-05-04_10_34_20.png](https://qiita-image-store.s3.amazonaws.com/0/26079/52d7f3dd-9c27-45a7-9465-49d46b89a117.png "スクリーンショット_2018-05-04_10_34_20.png")


TRAINING PHRASESに例文をどんどん登録します。例えば下図のような文章です。実際に寿司を注文する際、ユーザーが電話で言いそうな表現を入れていくのです。
![スクリーンショット 2018-05-04 10.37.39.png](https://qiita-image-store.s3.amazonaws.com/0/26079/10778d5e-f21c-079d-d13d-849173f5764f.png "スクリーンショット 2018-05-04 10.37.39.png")

例文を入れるほどにDialogflowは様々な表現でも出前注文を理解できるようになります。注目すべきなのは、「松を出前でお願いします」という例文の「松」が自動でハイライトされているところです。Entityに該当する単語があったため、自動的にmenu entityであることが検出されているわけです。これによって、例文では「松」ですが、「梅を出前でお願いします」という表現でも意図が出前注文であると理解することができ、かつ、menuは「梅」だと特定できるようになります。

次にRESPONSEをクリックして応答を設定します。
![click_add_response.png](https://qiita-image-store.s3.amazonaws.com/0/26079/0881d8f5-81a9-5111-792b-4f1e99d4f0ad.png "click_add_response.png")

ここで設定した内容がLINEを通じてそのままユーザーに返信されます。下図の例では「おおきに！」と返信されることになります。
![add_text_response.png](https://qiita-image-store.s3.amazonaws.com/0/26079/0c6a7d4d-4034-cb82-1aef-3cd262c2fc69.png "add_text_response.png")


ここで忘れずに画面上の「SAVE」ボタンをクリックして設定を保存してください。

右サイドバーでメッセージを入力して、意図を特定できるかどうか、パラメーターを抽出できるかどうかをテストすることができます。
![test_intent.png](https://qiita-image-store.s3.amazonaws.com/0/26079/6fe97d4f-6543-ff0e-a0d1-6b53281bdec4.png "test_intent.png")


次に、LINEとの連携を設定します。左サイドバーから「Integrations」を選択します。
![click_integrations.png](https://qiita-image-store.s3.amazonaws.com/0/26079/ed93008b-ab08-8093-8410-97617022d67c.png "click_integrations.png")

LINEのスイッチを有効にします。
![activate_LINE.png](https://qiita-image-store.s3.amazonaws.com/0/26079/e806c953-aef5-0e8c-49f1-d4b0f762efab.png "activate_LINE.png")

するとLINEのChannel情報を入力するダイアログが表示されます。作成したBotのChannel ID, Channel Secret, Channel Access Tokenを入力します。
![input_channel_Info.png](https://qiita-image-store.s3.amazonaws.com/0/26079/caca9294-7e42-5648-8b11-ee0f24b6f6ff.png "input_channel_Info.png")

最後のWebhook URLは逆にLINE Developersコンソール側に入力します。この設定によって、LINEはこのBot宛のイベントが起こった場合、Dialogflowにそのイベントを転送することができるようになります。

Webhook URLをセットすると表示させる「接続確認」ボタンをクリックしてWebhookに正しく接続できるか確認します。「成功しました」と表示されればOKです。
![set_webhook.png](https://qiita-image-store.s3.amazonaws.com/0/26079/becb3166-98a4-7793-5a33-26cd915fad71.png "set_webhook.png")


ここでBotを友達に追加しておきましょう。スマホでLINEを起動し、LINE Developers コンソールのchannelにあるQRコードをスキャンして追加します。iOS版の場合は下記のような手順になります。

![IMG_0027.png](https://qiita-image-store.s3.amazonaws.com/0/26079/2b0d3c7f-e9ec-e47f-add4-e1ffb0e39692.png "IMG_0027.png") ![IMG_0028.png](https://qiita-image-store.s3.amazonaws.com/0/26079/049844ef-7271-251f-e91a-1a98fa6f09b8.png "IMG_0028.png")

それではLINEからテストしてみましょう。Botに「梅を出前でお願いしたいのですが」と話しかけて、Responsesに設定した「おおきに！」という返信がきたら成功です。
![test_from_client_1.jpeg](https://qiita-image-store.s3.amazonaws.com/0/26079/c344d35e-08a5-171e-4f2d-ce5012a073ce.jpeg "test_from_client_1.jpeg")

## 文脈に応じた柔軟な対応を追加する

現在の設定では、「出前をお願いします」といっても「梅を出前でお願いします」といっても同じ応答が返ってきます。
実際には前者の場合、まだ注文内容をうかがっていないので注文をとるべきでしょう。これを実現するために、menuを必須のパラメーターとして設定し、menuを確認するためのメッセージを設定します。

Actions and parametersでmenuのREQUIREDにチェックを入れます。
![check_required.png](https://qiita-image-store.s3.amazonaws.com/0/26079/78ed7737-eea8-f8e0-d3b5-7abc79c53048.png "check_required.png")

続いてDefine promptsをクリックします。Promptsとは、このパラメーターをユーザーに問い合わせるためのメッセージのことです。
![click_defined_prompt.png](https://qiita-image-store.s3.amazonaws.com/0/26079/d1263310-6ed3-f0e3-00d2-7bdfe2fdca67.png "click_defined_prompt.png")

メッセージを入力してCloseボタンをクリックします。
![set_message_to_confirm.png](https://qiita-image-store.s3.amazonaws.com/0/26079/d368d4c2-3658-e866-4f45-48c7734094d3.png "set_message_to_confirm.png")

これでDialogflowはこのIntentにおいてmenuが必須であることを認識しました。
もしmenuを会話から特定できなかった場合、Botは明示的にユーザーに注文を問い合わせることになります。

さらに、応答も少しカスタマイズしてみます。確認の意味も含め、メッセージに特定した注文を差し込みます。
![update_test_response.png](https://qiita-image-store.s3.amazonaws.com/0/26079/be674728-3ebb-9c07-1693-dd2295f4ffd6.png "update_test_response.png")

これで忘れずSaveボタンをクリックしてください。

**＊Saveしてから内容が会話に反映されるまでには1分程度時間がかかることがあります**

それではLINEからテストしてみましょう。
![IMG_0AD2608A0CB3-1.jpeg](https://qiita-image-store.s3.amazonaws.com/0/26079/d68002a4-ed51-f918-5479-0887a6c8cc79.jpeg "IMG_0AD2608A0CB3-1.jpeg")

会話から注文が特定できなければそれを確認してから最終的な応答をおこなっています。
会話から注文が特定できた場合は即座に最終的な応答をおこなっています。
そして最終応答にはしっかり特定した注文が差し込まれています。

# さらに学ぶには

今回はNon-CodingでありながらもDialogflowを活用することで、Botが会話に応じて動的な応答をおこなえること、その実装方法をカバーしました。
まずはこの構成でBot開発に取り組むことで、どこまでできるのか、あるいはどこまでいくとDialogflowだけではカバーできなくなるのかが見えてくると思います。より発展的なBotを作るときにはFullfilmentや、対話の流れをより柔軟にコントロールするための専用の対話エンジンが必要になるでしょう。
より本格的なBot開発に進む場合、下記のチュートリアルにあるような [bot-express](https://github.com/nkjm/bot-express) などの開発フレームワークを利用して対話エンジンの自作を試みてください。

https://qiita.com/nkjm/items/38808bbc97d6927837cd