T
THINK Watson

コーディングのできないド素人がチャットボットを作ってみた: ワードプレスのブログに実装編

post_thumb

文:鳥羽 恒彰(トバログ)

 
プログラミングのイロハも分からない筆者が、IBM Watsonでチャットボットを作るこの企画。これまで3回にわたってチャットボット制作の過程をお届けし、前回はコミュニケーションツール「Slack」に連携するところまでを紹介した。

第4回となる今回は、初回からの目標であった「チャットボットをワードプレスで構築したブログで動かす」ところまでを紹介しよう。

 

制作したチャットボットをワードプレスのブログに実装する

制作したチャットボットをワードプレスのブログに実装する

実装したチャットボットがこちら。ウェブサービスや企業ページでよく見かける、Facebook のメッセンジャー風の UI。まだまだチャットボットとしての完成度は高くないものの、こうして一から制作したチャットボットが、実際に使えるようになったというのは、我が子の成長を見守るようで嬉しい。

チャットボットをワードプレスに組み込むには膨大な時間が掛かる……と思いきや、Watson API上で公開されているワードプレス用のチャットボット実装プラグインを使えば、ほんの10分程度で実装できてしまう。とはいえ、つまずくポイントもあるので、実装までの手順を紹介しよう。

 

チャットボットの実装に必要なもの

  • Conversation で制作したチャットボット
  • ワードプレス上に構築したブログ(Ver.4.7以上)
  • Watson Conversation のワードプレス実装用プラグイン

 

チャットボットを実装する手順

  1. Conversation 上の必要な情報をメモする
  2. プラグインをワードプレスにインストールする
  3. プラグインのセッティング画面から Conversation のユーザー情報を入力
  4. 実装するページや大まかなデザインを決める

 

Conversation 上の必要な情報をメモしておこう

Conversation 上の必要な情報をメモしておこう

まずは、プラグインに制作したチャットボットを呼び出すために必要な情報をメモしておこう。

  • Workspace ID
  • API gateway url
  • ユーザーネーム
  • パスワード

ここで必要なのは上記の4点だ。

IBM Cloud にログインして、 Conversation API の Workspace に移動しよう。IBM Cloud にログインしたら「Bluemix のダッシュボード」>「サービス」>「Conversation(自分のチャットボットの名前)」>「Launch tool」で Workspace にアクセスできる。

Conversation 上の必要な情報をメモしておこう

Workspace にアクセスしたら、チャットボットのカード右上にあるメニューから「View details」をクリックする。すると上の画像のように「Workspace ID」が現れるので、この ID をメモ帳などに保存しておこう。

Conversation 上の必要な情報をメモしておこう

ちなみに、Conversation Tool画面を立ち上げて「Deploy」(赤丸)を選択すると、必要な情報が表示される。

Conversation 上の必要な情報をメモしておこう

まずは Conversation のページへ。「Bluemix のダッシュボード」>「サービス」>「Conversation(自分のチャットボットの名前)」>「サービス資格情報」の順にクリックしていく。

Conversation 上の必要な情報をメモしておこう

「サービス資格情報」を開き「資格情報の表示」をクリックすると、画像のようにコードが現れる。それぞれ「url」「username」「password」を、Workspace ID と同じところにメモをしておこう。

 

ワードプレス上でプラグインをインストールする

次にワードプレスの編集画面から、プラグイン「IBM Watson Conversation」をインストールする。まずは、チャットボットを実装したいワードプレスアカウントにログインしよう。

注意点①:プラグインは簡単に実装できる一方で、別のプラグインに干渉し、ページの動作がおかしくなったり、機能しなくなる可能性がある。それを踏まえた上でインストールしよう。

注意点②:自分のワードプレスのバージョンが 4.7 以上になっているか確認しよう。また、PHP のバージョンが古すぎても有効化できないこともある。サーバーから PHP のバージョンを確認しておこう。

注意点③:現状(Ver.0.1.4)では、iOS では動作しないので、基本的には PC 用と考えておこう。

ワードプレス上でプラグインをインストールする

編集画面トップの「プラグイン」>「新規追加」を選択し、キーワードに「Watson Conversation」と入力する。すると「IBM Watson Conversation」というプラグインが現れるので、インストールしよう。

ワードプレス上でプラグインをインストールする

インストールしたら、設定の項目から「Watson」を探してクリック。ここでチャットボットを置くページや、大まかなデザインが編集できる。

ワードプレス上でプラグインをインストールする

設定画面には「Workspace ID」「Username」「Password」「API Gateway URL」という項目があるので、IBM Cloud上の Conversation でメモした情報をそれぞれ入力していく。ここで入力の間違いがあると、ページ上にチャットボットが現れないので注意。

ワードプレス上でプラグインをインストールする

次に「Total Usage Management」を設定する。これは API の呼び出し回数の上限を設定できるというもの。必ず予算に応じて回数を制限しておこくとをおすすめする。なお、10000回までの会話は無料で呼び出すことができる。今回、筆者はブログ以外のところでもテストしているため、1000回で設定している。個人ブログなら(バズらない限りは)必要十分だろう。

ワードプレス上でプラグインをインストールする

さらに下に進めると、チャットボットのメッセージボックスを置く位置やチャットボット名、カラーやフォントのサイズなどが選べる。

チャットボットを実装したいページのトーンに合わせて、好みのデザインに設定しよう。これで基本的な設定は完了。任意のページから、実際にチャットボットが実装できているかを確認しよう。

ワードプレス上でプラグインをインストールする

チャットボットが無事に実装できていると、このように画面上に表示される。

 

まとめ

コーディングができない筆者がWatsonを使ってチャットボットを作る、この「ど素人がチャットボットを作る」企画。最初は右も左も分からず「本当に自分で作れるのか?」という疑問もあったのだが、実際に作ってみると、意外と簡単に作り上げることができた。

もちろん、まるで人と会話をしているかのように動作するチャットボットの構築には、それなりに作業時間やコストが必要となるが、ある程度定型文で返すチャットボットは、この記事で検証してきたように、慣れてしまえば1時間ほどで実装できる。

今回はブログに実装したが、ワードプレスで構築しているページであれば、基本的にはウェブメディアや企業ページなどの商用目的で制作したページ上にも、Watson の Conversation で制作したチャットボットを組み込むことができる。作り込むまでは大変かもしれないが、一回作ってしまえば、ユーザーからの質問にもある程度自動的にチャットボットが対応してくれるので、企業にウェブサイトに実装することで、企業にとっての顧客接点が増える上、お客様満足度向上にもつながるだろう。

IBM Watson を用いたチャットボットを作ってみたいという読者は、IBM Cloudライト・アカウントなら無料・無期限で使うことができるので、まずは試してみてほしい。(*一部機能制限あり)

 

IBM Cloudライト・アカウントを今すぐ登録

ライト・アカウント登録後、「組織」を作成する際、「地域」には最新サービスを提供している「米国南部」の選択をお勧めします。

(「ライト」の表記があるAPIは、無料・無期限で使用可能)

 
2017年11月1日、BluemixはIBM Cloudにブランドを変更しました。詳細はこちら

IBM Alert Notification
スタッフがすべての重大な IT アラートの通知を受け取ることができます
無料評価版はこちら