kun432's blog

Alexaなどスマートスピーカーの話題中心に、Voiceflowの日本語情報を発信してます。たまにAWSやkubernetesなど。

〜スマートスピーカーやVoiceflowの記事は右メニューのカテゴリからどうぞ。〜

Voiceflow Dialog Management APIをつかってチャットボットをウェブサイトに設置できるようにしてみた

f:id:kun432:20210313005910p:plain

Voiceflow Dialog Management APIを使ってずっとやろうとしてウェブサイトへのチャットボット埋め込みができましたので、ご紹介します。

目次

お約束

  • デモ目的で作成したものであり、テストが十分でなかったり、バグがあったりする可能性があります。商用環境で利用する場合は十分なテストおよび必要な場合はご自身で修正をお願いします。
  • コードはGitHubでMITライセンスの元、公開しています。ライセンスの範囲内で自由にご利用いただけます。フィードバックやPRもお待ちしております。
  • 本プログラム及び手順に関する、質問への回答、サポート、修正、アップデートについては責任を負いかねます。
  • 本プログラム及び手順を利用したことによりいかなる損害についても責任を負いかねます。

感謝

以下を使用させていただいています。ありがとうございます。

必要なもの

必要なものは以下です。

  1. Voiceflowで作成したプロジェクトとAPIキー
  2. チャットボットを設置したいWebサイト
  3. Herokuアカウント

順に説明します。

1. Voiceflowで作成したプロジェクトとAPIキー

Voiceflowでプロジェクトを作成しておいてください。プロジェクトタイプは「チャットアシスタント」タイプになります。

f:id:kun432:20220226223811p:plain

会話フローを作成します。期待通りの動きになっているかをテストしておいてください。対話モデルのトレーニングをしておくことをお忘れなく。

f:id:kun432:20220226224434p:plain

f:id:kun432:20220226224443p:plain

作成できたら、APIキーを取得しておきます。

f:id:kun432:20220226224657p:plain

f:id:kun432:20220226224705p:plain

2. チャットボットを設置したいWebサイト

もちろんチャットボットを設置したいWebサイトが必要ですね。ただし、いくつか条件があります。

  1. HTTPSが有効になっていること(HTTPでは動かない)
  2. カスタムなHTMLやJavaScriptの埋め込みが可能なこと

レンタルサーバを借りてコンテンツも自分で用意している場合や、自前でサーバを立てて運用してる場合など、ご自身でホストしているようなケースであれば1、2のどちらも問題ないと思います。SSL証明書はLet's Encryptなどを使えばよいでしょう。

問題は2です。

今回のチャットボットを設置するためには<SCRIPT>タグを埋め込めるようにする必要がありますが、サービスとして提供されているウェブサイトやブログなどでは、これを許可していない・埋め込んでも無効化されるというものが多いようです。また、無料プランではできないが有料プランだとできる、というものもちらほらあるようです。これについてはお使いのサービスの仕様等を確認してください。

今回は、以下のレンタルサーバにWordPressを自分で設置して、これにチャットボットを設置したいと思います。ちなみにWordPressのインストールはレンタルサーバの管理画面からワンクリックで行えました。

3. Herokuアカウント

チャットボットとVoiceflow Dialog Management APIとのやり取りを中継するアプリをHerokuに立てるために必要です。デプロイはHeroku Buttonでほぼワンクリックで終わります。

手順

ではやっていきましょう。

まず最初にブログを見てみましょう。

f:id:kun432:20220227025942p:plain

WordPressで立てたブログです。ほぼデフォルトの状態です。必要なのはブログのドメインです。

f:id:kun432:20220227030052p:plain

このドメインはHerokuにデプロイするアプリのパラメータとして必要になります。

次にHerokuにアプリをデプロイしていきましょう。以下のレポジトリにアクセスしてみてください。

HerokuにデプロイするアプリのGitHubレポジトリです。READMEに「Deploy to Heroku」というボタンがあるのでこれをクリックします。

f:id:kun432:20220227030327p:plain

Herokuへのデプロイを開始するための画面が開きます(ログイン画面が出た場合には先にログインしてください)。いくつか設定項目があるので、順に設定していきます。

最初にアプリ名を設定します。適当なものをつけてください。アプリが公開されたときにこの名前がアプリ名.herokuapp.comというドメインで公開されます。(このドメインが後で必要になります。)

f:id:kun432:20220227030635p:plain

「Config Vars」にいくつか設定を行います。

FRONTEND_URLにブログのドメイン、VF_API_KEYにVoiceflowプロジェクトのAPIキーを入力します。ドメインの最後のスラッシュは不要です。 MAX_AGEはチャットのセッション保持時間で、最初にアクセスしてからこの設定時間の間はチャットの状態が保存されています。つまりVoiceflow側での永続的な変数などが保持されたままになるということです。デフォルトは3600秒=1時間にしていますので、必要ならば変更してください。

f:id:kun432:20220227030854p:plain

入力したら最後に「Deploy app」をクリックします。

f:id:kun432:20220227031403p:plain

APIサーバがデプロイされますので、しばらく待ちます。

f:id:kun432:20220227031521p:plain

以下のように「Successfully deployed」と表示されればOKです。「Manage App」をクリックするとアプリの管理画面が表示され、「View」をクリックするとアプリにブラウザでアクセスします。アプリのドメインを確認するために「View」をクリックしてみましょう。

f:id:kun432:20220227031856p:plain

エラーになっていますが、気にしなくてOKです。少なくともエラー画面が返ってきているということはアプリは動いているということですね。で、ここで必要なのはこのアプリのドメインです。後ほどチャットボットの設定で必要になるので控えておいてください。

f:id:kun432:20220227032203p:plain

ではブログにチャットボットを設置していきましょう。今回はWordPressを使っているので、WordPressの管理画面を開いてそこでHTML/JavaScritptの埋め込みを行います。

まず管理画面を開きます。

f:id:kun432:20220227032652p:plain

WordPressでカスタムなHTML/JavaScriptの埋め込みを行う方法は色々あると思いますが、今回はヘッダーやフッターにHTMLをかんたんに埋め込めるプラグイン「Insert Headers and Footers by WPBeginner」を使いましょう。

左のメニューから「Plugins」→「Add New」をクリックします。

f:id:kun432:20220227033004p:plain

insert header footerとかで検索してみてください。

f:id:kun432:20220227033402p:plain

出てきましたね。では「Install Now」をクリックします。

f:id:kun432:20220227033524p:plain

インストールが無事終わったら、以下のような画面になります。「Active」をクリックして有効化します。これでプラグインのインストールは完了です

f:id:kun432:20220227033621p:plain

ではプラグインを利用して、HTML/JavaScriptを埋め込みます。左のメニューから「Settings」をクリックするとさきほどの「Insert Headers and Footers」プラグインの設定が見えますのでこれをクリックします。

f:id:kun432:20220227033903p:plain

「Insert Headers and Footers」プラグインの設定画面が表示されました。ここの入力欄にHTML/JavaScriptを埋め込めば反映されます。ヘッダー・ボディ・フッターのどれでも設定ができますが、今回はフッターに設定しましょう。

f:id:kun432:20220227034306p:plain

下にスクロールしてフッターの入力欄に以下をコピペします。

<script src="https://chatux-kun432.netlify.app/chatux.min.js"></script>
<script>
  const chatux = new ChatUx();
  const initParam =
    {
      renderMode: 'auto',
      api: {
        endpoint: 'https://www.example.com/chat',
        method: 'POST',
        dataType: 'json'
      },
      bot: {
        botPhoto: 'https://vf-web-chatbot-demo.netlify.app/img/robot.png',
        humanPhoto: 'https://vf-web-chatbot-demo.netlify.app/img/human.png',
        widget: {
          sendLabel: '送信',
          placeHolder: 'なにか入力してみてください'
        }
      },
      method: {
        credentials: 'include'
      },
      window: {
        title: 'チャットボットのデモ',
        infoUrl: 'https://github.com/kun432/voiceflow-dialog-management-api-sample-webchat'
      }
    };
  chatux.init(initParam);
  chatux.start(true);
</script>

こんな感じですね。

f:id:kun432:20220227035306p:plain

で、1箇所だけ変更します。上記のendpoint: 〜となっている部分のURLをHerokuで取得したドメインに変更します。最後の/chatはそのままにしておいてください。今回の例だとこんな感じ。修正したら「Save」をクリックします。

f:id:kun432:20220227035110p:plain

これで完了です。

ブログの画面を開いてリロードすると、チャット用のウインドウが表示されると思います。

f:id:kun432:20220227035713p:plain

なにか入力してみて、Voiceflowで作成した会話フロー通りのやりとりができれば完了です!

f:id:kun432:20220227035956p:plain

まとめ

設置方法について説明しました。バックエンドはHeroku Buttonを使ってワンクリックで、設置するWebサイト側はHTML/JavaScriptを埋め込むだけにしたので、かなりかんたんに設置できるように工夫してみました。また、今回はWordPressを使いましたが、条件を満たすものであれば(やり方は変わると思いますが)基本的には動くのではないかと思います。

次回はもう少し裏側の話をまとめたいと思います。