Zenn
💬

Dialogflowチュートリアル | AIチャットボットの作り方

2022/07/03に公開
Dialogflow
チュートリアル
tech

この記事では、Dialogflow[1]を使ってWEBサイトにチャットボットを作る方法を記載します。
チャットボットをはじめて作成する人に向けて作成しています。

Dialogflowとは

Dialogflowとは

Dialoflow ESは自然言語処理を搭載したチャットボットをローコードで作成できるプラットフォームです。
Dialogflow内で完結していれば難しいプログラムを書く必要はなく、無料で作成できます。

チャットボットを作る

作るチャットボット

チャットボットが扱う内容

いくらの冷凍食品を扱っているECサイトの商品受付チャットボットを作成します。
エンドユーザーが欲しい商品を分類し、購入受付をゴールとします。

仮定する商品のラインナップは以下の通りです。

  • 北海道産：普通サイズ
  • 北海道産：大サイズ
  • アメリカ産：普通サイズ
  • アメリカ産：大サイズ

ペルソナ設定

いくらの購買意欲はすでにある方と想定します。

手順

Dialogflowでは以下の順番で作成していきます。

  1. Agent
  2. Entity
  3. Intent

Agentの作り方

まずはじめにAgentを作成します。
Dialogflow ESのサイトに入って、エージェントを作成します。

  1. 左上のCreate Agentを選択する。

  2. Agent名に「Ikura-EC」、LanguageにJapaneseを設定する。

  3. Create Agentボタンを押して少し待つ。

Entityの作り方

次にEntityを作ります。
今回必要な単語は以下の通りに決めます。

Entity名 代表単語 類義語1 類義語2
ikura いくら いくら
from-hokkaido 北海道産 北海道産 北海道
from-america アメリカ産 アメリカ産 アメリカ
size-normal 普通サイズ 普通サイズ 普通
size-big 大サイズ 大サイズ 大

テーブルのEntityをWEBで入力します。

  1. Entitiesタブを選択する。
  1. CREATE ENTITYを選択する。
  1. Entity nameにEntity名を設定する。
  1. entryを設定する。

saveボタンをクリックして少々待つ。

Intentの作り方

Intentを作成します。
以下のインテントはデフォルトで存在しています。

  • Welcom
  • Default fallback
    これらは、初期表示などで使用します。

これらに加えて、独自のIntentを作成します。
今回は簡単に作る方法として、全ての入力を別々に処理します。
Intentは以下のテーブルのように作ります。
(縦に産地を、横にサイズの大きさを記載し、各インテントの名前を記載しています。)

北海道産 アメリカ産
普通サイズ ikura_hokkaido_normal_size_intent ikura_hokkaido_large_size_intent
大サイズ ikura_america_normal_size_intent ikura_america_large_size_intent

次にトレーニングの文字です。
各Intentに10個ほど有れば良いそうですが、今回は簡単に3つずつ入力します。

  1. ikura_hokkaido_normal_size_intent
  • 北海道産の普通サイズを下さい。
    • from-hokkaido：北海道産
    • size-normal：普通サイズ
  • 北海道の普通を下さい。
    • from-hokkaido：北海道
    • size-normal：普通
  • 北海道産の普通が欲しいです。
    • from-hokkaido：北海道産
    • size-normal：普通
  1. ikura_hokkaido_large_size_intent
  • 北海道産の大サイズを下さい。
    • from-hokkaido：北海道産
    • size-large：大サイズ
  • 北海道の大を下さい。
    • from-hokkaido：北海道
    • size-large：大
  • 北海道産の大が欲しいです。
    • from-hokkaido：北海道産
    • size-large：大
  1. ikura_america_normal_size_intent
  • アメリカ産の普通サイズを下さい。
    • from-america：アメリカ産
    • size-normal：普通サイズ
  • アメリカの普通を下さい。
    • from-america：アメリカ
    • size-normal：普通
  • アメリカ産の普通が欲しいです。
    • from-america：アメリカ産
    • size-normal：普通
  1. ikura_america_large_size_intent
  • アメリカ産の大サイズを下さい。
    • from-america：アメリカ産
    • size-large：大サイズ
  • アメリカの大を下さい。
    • from-america：アメリカ
    • size-large：大
  • アメリカ産の大が欲しいです。
    • from-america：アメリカ産
    • size-large：大

最後に返答の文字列です。
各Intentに返答文字列を設定します。

  • ikura_hokkaido_normal_size_intent
    北海道産の普通サイズの注文を受け付けました。ご注文ありがとうございます。
  • ikura_hokkaido_large_size_intent
    北海道産の大サイズの注文を受け付けました。ご注文ありがとうございます。
  • ikura_america_normal_size_intent
    アメリカの普通サイズの注文を受け付けました。ご注文ありがとうございます。
  • ikura_america_large_size_intent
    アメリカの大サイズの注文を受け付けました。ご注文ありがとうございます。

それぞれをWEBで入力します。

  1. Intentsタブを選択する。
  1. CREATE INTENTをクリックする。
  1. Intent nameにインテント名のテーブルを設定する。
  1. ADD TRAINING PHRASESを選択して、トレーニングを入力する。

    ADD TRAINING PHRASESを選択する


トレーニングを入力すると自動的にEntityを当ててくれるので確認する


Entityが当たらない場合は範囲選択するとEntityを当てられる

  1. ADD RESPONSEを選択して、レスポンスを記載する。

    ADD RESPONSEを選択する


レスポンスを入力する

  1. SAVEボタンを押して、少々待つ。

動きを確認する。

入力したチャットボットの動きを確認します。
右側のtry it nowで確認をする。

画面右側のTry it now


確認したい入力をする。


INTENT名とPARAMETER(ENTITY)を確認する。

期待した内容が確認できない場合は、IntentやEntityを再度見直してみてください。

WEBにチャットボットを表示する。

ここでは簡単に実装できるDialogflow Messengerを使って画面に表示します。

  1. Integrationsタブを選択する。

  2. Dialogflow Messengerを選択する。

  3. Dialogflow Messengerを有効化する。

    ENABLEボタンをクリックする。

  4. XMLが表示されるので、好きなWEBサイトのHTMLに貼り付けて下さい。

    XMLをコピーする

flaskを使ったlocalhostでの表示
  1. ファイルを作成する。
app.py
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def hello():
    return render_template('index.html')

if __name__=='__main__':
    app.run(debug=True)
index.html
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>いくらサイト</title>
</head>
<body>
    <!-- ここにタグ入力する -->
    <script src="https://www.gstatic.com/dialogflow-console/fast/messenger/bootstrap.js?v=1"></script>
    <df-messenger
    intent="WELCOME"
    chat-title="Ikura-EC"
    agent-id="************************************"
    language-code="ja"
    ></df-messenger>
    <!-- ここまでタグを入力する -->
</body>
</html>
  1. ファイルパスを設定する。
└────templates
|  └────index.html
└────app.py
  1. コマンドを入力する
windows
python app.py
linux
python3 app.py
  1. サイトにチャットボットが表示されます。

    右下に表示される。


入力すると返答が返ってくる。

次にすることは？

この記事で動くチャットボットを作成しました。
次にすることは色々あると思います。

  • UIを変える
  • チャットボットの返答をさらに多くする
  • 他のプログラムと連携する

好きな内容で拡張していただければ幸いです。

ここまで見てくださりありがとうございました。

用語一覧

Dialogflowでは多くの初めて知る単語が使われます。
ここに記載する意味はDialogflowで実装するときに使用する意味です。
必要な時に適宜参照してもらえれば大丈夫です。

Agent(エージェント)

Agentとは返答を返すチャットボット自身のことです。
(Dialogflow ES のドキュメント)
お問い合わせ用・説明用・雑談用などで別々に作成することができます。
Agentを分けてチャットボットを作成することで、チャットボットが大きくなった時に管理をしやすくすることができます。

Intent(インテント)

Intentとはユーザーの入力を分類し、それに応じて返答する一連の流れのことです。
(Dialogflow ES のドキュメント)
インテントには、入力の学習データと返答文字列を入力する欄があります。
例えば、「今日の天気は？」とユーザーが入力した時に、
この文字を「天気の質問」というインテントに分類し、
チャットボットが「今日は晴れのようですね。」と返答します。
この一連の流れを処理しているまとまりをインテントと呼びます。

Entity(エンティティ)

類似した単語をまとめたグループです。
(Dialogflow ES のドキュメント)
「あす」「あした」のように同じ意味でも異なる文字をひとつのグループとして扱います。

脚注

  1. DialogflowにはESとCXのバージョンがあります。
    この記事ではESのみを紹介しますので、Dialogflowとの記載はすべてDialogflow ESを指します。 ↩︎

Discussion