【Dialogflow】とっても簡単！自分のサイトにチャットボットを設置する方法

チャットボットDialogflowの育て方は別記事で紹介する予定です。育て方に関しては以下のページが分かりやすいです（引用）。https://qiita.com/kenz_firespeed/items/0979ceb05e4e3299f313　とhttps://yutakami.work/?p=219　もしくはhttp://tech.wonderpla.net/entry/2018/03/13/110000

みなさんこんにちは！！

Amazon EchoやGoogle Homeなどのスマートスピーカーがだんだんと普及してきていますね。

今回の記事では、Google Homeにも使用できる言語解析エンジンDialogflowでサイトにチャットボットをつける方法を紹介します！

チャットボットを設置するメリット

最近ではとくに、起業のホームページなどにチャットボットを付けているところが増えました。ホームページ以外でもヤマト運輸がLINEを用いたチャットボットで配達の手配をするなど、多様な場面でチャットボットが使われています。

サイトにチャットボットをつけることで、ユーザー（消費者）のニーズに効率よく答えることが可能になります。

たとえば、ホテルのサイトで「火曜日に予約したい」とチャットボットに聞くことで、予約や予約ページへの案内を行うことができます。

さらに今回紹介するDialogflowでは、トレーニングをすることで「火曜日に予約したい」でなくても、「火曜日空いてる？」「明日泊まりたい」などにも柔軟に対応できます。つまり、ヤマト運輸のLINEチャットボットのようにあらかじめ選択肢を用意する必要がないのです。

Dialogflowは言語解析エンジンです。

チャットボットはその用途のひとつで、GoogleアシスタントやTwitter、Facebookなどにも応用できます。

文字入力・音声入力の際に問題となる自然言語処理をこのDialogflowが解決します。

それでは、実際にDialogflow（によるチャットボット）を設置していきましょう。設置するときには以下のものが必要です。

・Google アカウント

・自分のサイト（HTMLコードが編集できる環境）

たったこの2つです。

これらが準備できたら、https://dialogflow.com/ からDialogflowのページへいってください。

このサイトhttps://dialogflow.com/ にきたら、「Sign up for free」をクリックし、その次のページでGoogleアカウントで入ります。

Googleアカウントで入ると、以下のようなページにいくと思います。

「Yes, I have read and accept the agreement.」にチェックをいれ（利用規約同意）、右下の「ACCEPT」をクリックします。

そうすると次のようなDialogflowのページに入れます。

このページの右下の「CREATE AGENT」をクリックし、以下のようなページから自分のチャットボット（AGEANT）を作成していきます（下の画像では言語がEnglishになっていますが、日本語など自分のつくりたいチャットの言語にしてください）。

チャットボットを自分のサイトに設置する手順は

Dialogflowでチャットボットをつくる（トレーニングする）　→　自分のサイトに設置する

ですが、今回はトレーニングの仕方は紹介しません。トレーニングをしたい人は、以下などを参考にしてください（引用）。

チャットボットをトレーニングしたら、さっそくチャットボットを自分のサイトに設置しましょう。

以下のように、左サイドバーの「Integrations」を選び、いくつか出てくる選択しから「Web Demo」を選び、クリックします。

すると、以下のような画面になるので、ここにあるHTMLコードをコピーします。

このコードが作成したDialogflowチャットボットと連携としています。このコードをチャットボットを設置したいサイトのHTMLに貼り付ければ完了です。

サイトにチャットボットを設置しても、ユーザーがどのような質問をしてくるかわからないので、はじめのうちは返答できないと思います。Dialogflowでは、質問されたことが記録され、それをもとにチャットボットをトレーニングすることができます。

はじめからうまく返答をしてほしい場合は、かなりトレーニングを積んでから設置するか、「質問を選んでください」や「○○の空き状況は？と聞いてください」など、誘導したり選択肢を用意しておくとよいでしょう。