Node.js初心者がNode.js + Watson Conversation でチャットボットを実装してみた

19848 ワード
Socket.io Bluemix Watson Node.js Node.js テキストリンク

始めに

既出の記事が多くある感じもありますが、ローカル環境でも動かせるチャットボットを気楽に作ってみました。この記事ではNode.js + Socket.ioを使ったチャットツールにAPIを組み込んでチャット機能を作る方法について記述しています。
※Watson Conversationの開発方法についてはこちらを参照して下さい。
(本当はNode-REDで組んでみたかったのですが、サンプルすら上手く動かせずに断念…こうなったら、一から組もうかなと思ったのが正直なところです。)

構成について

今回は下記の構成で作っています。下記は全てインストール済みという前提で進めていきます。
・ npm
・ Node.js
・ Express
・ ejs

プロジェクトの作成

まず、express exp01 -e ejsでプロジェクトを作成します。
次にプロジェクトディレクトリに移動して、npm installで必要なモジュールをプロジェクトに追加します。
これだけで下記の構成の基本的なプログラムが作成できました。

早速、node bin/wwwを実行してみましょう。
ポートなどを変更していなければ、http://localhost:3000でアクセス出来ちゃいます。
こんな画面が出来たらひとまず、準備作業は完了です。とっても簡単ですね。

必要なモジュールのインストール

次に、Socket.ioとwatson-developer-cloudを追加します。package.jsonのdependenciesに下記の2行を追加しましょう。

"socket.io": "2.0.3",
"watson-developer-cloud": "2.39.2"

もう一度、npm installを実行します。
これで必要なモジュールが全て揃いました。

API呼び出し処理の組み込み

次に、bin/wwwを編集していきます。

/**
 * Create HTTP server.
 */
var server = http.createServer(app);

の後ろに下記のソースコードを追加します。
ConversationのAPIの使い方は、ここを参考にしました。
また、Socket.IOのチュートリアルも元にしています。

var io = require('socket.io').listen(server);
io.on('connection', function(socket){
    var ConversationV1 = require('watson-developer-cloud/conversation/v1');

    // Set up Conversation service.
    var conversation = new ConversationV1({
      url: 'https://gateway.watsonplatform.net/conversation/api',
      username: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx', // ユーザー名を置き換えてください。
      password: 'xxxxxxxxxxxx', // パスワードを置き換えてください。
      path: { workspace_id: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' }, // ワークスペースIDを置き換えてください。
      version_date: 'YYYY-MM-DD'//何でもいいのかも？
    });
    var res = [];
    // このページにアクセスしたときに、空のメッセージをConversationに投げる
    conversation.message({}, processResponse);
    // Conversationのレスポンスを取得する
    function processResponse(err, response) {
        if (err) {
          console.error(err); // something went wrong
          return;
        }
        // intentがマッチしたらコンソールに出力する
        if (response.intents.length > 0) {
            console.log('chat message', 'Detected intent: #' + response.intents[0].intent);
        } 
       // 何らかの返答があれば、それをbotからの返答として全て返す(ループはjump to の時に必要)
        for (var i = 0, len = response.output.text.length; i < len; i++) {
            if(response.output.text[i] !== ''){ 
                io.to(socket.id).emit('bot message', response.output.text[i]);                
            }
        }
        res[socket.id] = response;
    }
    //新しいメッセージを受信したときの動作
    socket.on('chat message', function(msg){
        //受信したメッセージをそのまま、チャット画面に表示
        io.to(socket.id).emit('chat message',msg);
        // 受信したメッセージをAPIに投げる
        conversation.message({
          input: { text: msg },
          context : res[socket.id].context
        }, processResponse);
    });
});

ちなみに、ユーザー名とパスワードはダッシュボードのサービス資格情報、ワークスペースIDはConversationのダッシュボードから、自分が作ったアプリの右上にある…をクリック→view detailsから参照可能です。

最後に、/views/index.ejsと/stylesheets/style.cssをそれぞれ書き換えます。
index.ejs

<!doctype html>
<html>
  <head>
    <title>チャットボットテスト</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
      <div class="chat-box">
        <ul id="messages"></ul>
        <form action="">
          <input id="m" autocomplete="off" /><button>Send</button>
        </form>          
      </div>
    <script src="/socket.io/socket.io.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
    <script>
        $(function () {
          var socket = io();
          $('form').submit(function(){
            socket.emit('chat message', $('#m').val());
            $('#m').val('');
            return false;
          });
          socket.on('chat message', function(msg){
            $('#messages').append($('<li>').text(msg).addClass('chat-hukidashi someone').wrap('<div />'));
          });
          socket.on('bot message', function(msg){
            $('#messages').append($('<li>').text('ＱＡ botくん：'+msg).addClass('chat-hukidashi').wrap('<div />'));
          });          
        });
    </script>
  </body>
</html>

style.css

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin:auto 0; padding: 0; }
#messages li { padding: 5px 10px; display: block }
/* チャットレイアウト */
.chat-box {
    width: 80%;
    height: auto;
    overflow: hidden; /*floatの解除*/
    margin-bottom: 20px;
}
.chat-face {
    float: left;
    margin-right: -120px;
}
.chat-face img{
    border-radius: 30px;
    border: 1px solid #ccc;
    box-shadow: 0 0 4px #ddd;
}
.chat-area {
    width: 100%;
    float: right;
}
.chat-hukidashi {
    display: inline-block; /*コメントの文字数に合わせて可変*/
    padding: 15px 20px;
    margin-left: 120px;
    margin-top: 8px;
    margin-right: 20px;
    border-radius: 10px;
    position: relative; 
    background-color: #D9F0FF; 
}

.chat-hukidashi:after {
    content: "";
    position: absolute;
    top: 50%; left: -10px;
    margin-top: -10px;
    display: block;
    width: 0px;
    height: 0px;
    border-right: 10px solid #D9F0FF;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;}
.someone {
    background-color: #BCF5A9;
}
.someone:after {
    left: auto;
    right: -8px;
    border-right: none;
    border-left: 10px solid #BCF5A9;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}

これで、改めてnode bin/wwwを実行してみましょう。
http://localhost:3000にアクセスすると、こんな感じでConversationと会話が出来るようになると思います。

こんな簡単な手順で、チャットボットっぽいものが出来ました。APIの利用のしやすさがbluemixのいいところなんでしょうね。
弄りがいがあってとっても面白いです。皆さんも、ぜひ、トライしてみてくださいね。