WordpressにIBM Watsonのチャットボット機能を実装してみた

#はじめに
 [Cognitive Class](https://cognitiveclass.ai/)がα版として提供している[Watson Conversation WordPressプラグイン](https://wordpress.org/plugins/conversation-watson/)を試してみました。

このプラグインを追加すればWordpressで作成したWebサイトに簡単にチャットボット機能を実装できます。

<img width="815" alt="スクリーンショット 2017-08-22 20.19.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/63451/b5914987-33a4-f267-99b9-4981dbc94750.png">

現時点でサポートされている機能は以下のとおり：

- プラグイン設定ページから直接Watson Conversationサービスを制御
- サイトの訪問者にチャットボットを表示させたいページと投稿を選択
- チャット・ボックスの外観を好みに合わせてカスタマイズ

#必要なもの

- Wordpressサイト
- Bluemixのアカウント
- デプロイ済みのWatson Conversationサービス

※Watson Conversation自体の利用方法は以下の記事などを参考にしてください。
[チャットボットを簡単に作れる！Watson Conversationの色々なTips](http://qiita.com/ishida330/items/ae7277598cd3e08fc3a2)
[Watsonに博多弁をしゃべらせてみた](http://qiita.com/asasaki/items/15e22f359da193669408)

#設定手順

## 1. WordpressのDashboardからプラグインの新規追加を選択する。

<img width="892" alt="スクリーンショット 2017-08-22 19.52.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/63451/553c52a9-0e45-cfb7-b348-d6142901046f.png">

## 2. プラグインの検索フィルタで"Watson Conversation"を検索する。

<img width="1026" alt="スクリーンショット 2017-08-22 19.54.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/63451/edb1a233-9ffc-c762-d817-5eac4ab0d2ab.png">

## 3. 今すぐインストールして有効化する。

<img width="549" alt="スクリーンショット 2017-08-22 19.55.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/63451/ff9a24a7-ce36-3031-e5db-cce9f83936e0.png">

## 4. 有効化された後、プラグインのSettingをクリックする。
 
<img width="1104" alt="スクリーンショット 2017-08-22 19.56.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/63451/d2fb6dd9-c7e2-2586-c641-93eb4b47a670.png">

## 5. Workspace ID、Username、Passwordをセットする。

<img width="862" alt="スクリーンショット 2017-08-22 19.58.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/63451/f1536d6e-794a-842f-089d-8abffe1e1c56.png">

*※ここで必要となるUsername、PasswordはBluemixにデプロイされたConversationのサービス資格情報から取得できます。*

<img width="1142" alt="スクリーンショット 2017-08-22 20.02.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/63451/4b194303-9a5c-63f7-a368-53ab2d258e94.png">

## 6. APIリクエストの呼び出し回数の制限を設定します。

<img width="941" alt="スクリーンショット 2017-08-22 20.12.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/63451/98c9ddc4-23bf-da61-8e8c-82b50973e656.png">

## 7. 表示方法や表示ページを設定します。

<img width="957" alt="スクリーンショット 2017-08-22 20.13.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/63451/f9b0b7ba-18bc-88be-db2c-94649b14a0f4.png">

## 8. チャットボックスの表示位置を設定します。
<img width="1024" alt="スクリーンショット 2017-08-22 20.14.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/63451/c1141bdc-8595-5e23-bedb-80518f939482.png">

## 9. 表示タイトルや色を設定します。

<img width="937" alt="スクリーンショット 2017-08-22 20.15.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/63451/4eff50b5-fa22-f7d2-f1da-1c302443996e.png">

## 10. 変更を保存すれば完了！

<img width="944" alt="スクリーンショット 2017-08-22 20.16.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/63451/9de2c10e-8016-9bbd-dc06-1cbd1af499aa.png">

#チャットボット機能の確認
Wordpressのサイトにチャットボット機能が追加されました。

<img width="1138" alt="スクリーンショット 2017-08-22 20.17.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/63451/beec8ef7-94b1-f1ad-ff67-25e23e385283.png">

# おわりに
[Watson Conversation](https://www.ibm.com/watson/jp-ja/developercloud/conversation.html)を詳しく勉強したい方は、[Cognitive Class](https://cognitiveclass.ai/)の [Build Your Own Chatbot (Beta)](https://cognitiveclass.ai/courses/chatbot-course/)にてFree Courseが用意されていますのでぜひお試しください！