Watson ConversationでLINEのチャットボットを作ってみる（前編） #linebot

はじめに

要望があったので基本的なことを書きます。Node-REDの基本については過去の記事を参考にしてください。

前提

LINEのアカウントを持っていて、PCログインができる。
IBM IDを持っていて、Buluemixにログインができる。

LINE＠アカウントの作成

個人（クライアントユーザ）としてのLINEアカウントと別でLINE＠アカウントが必要なので、公式ページから登録をします（法人扱いです）。関係ないですが事情あってiPhoneとiPadでの投稿をしているため、ここへのログインで四苦八苦しました。そして諦めました。ここで使用するLINE@のサービスとその内容は、公式サイトの説明を読んで正しく登録してください（動いたけどよくわかりません）。一部適当に見える箇所がありますが、自己責任にてお願いします。

『LINE@アカウントを作成する』をクリックすると以下の画面が出ますので、『一般アカウント』を作成します。

LINEアカウントでログインすると、色々入力を求められますので、がんばって真摯に入力します。

messaging APIを始める

登録が済むとLINE＠マネージャーから、messaging APIを始めることができるようです。何のこっちゃと思う人も、気にせず進みます。

上の画面から先ほど登録したアカウントを選択すると、以下のようにナビゲーションが現れますので、アカウント設定の基本設定を選択します。

色々項目がありますが気にせず最下部にある『LINE Developerで設定する』で移動しますと、こんな画面が出てきます。1つずつ見ていきましょう。

アプリアイコン画像
書かれている規定内のサイズでアップロードします。
アクセストークン
重要な項目ですが、ここでは触れずあとで戻ってきます。
Webhook送信
これもあとで戻ってきて設定します。
自動返信メッセージ
返事しません宣言は不要なので、使用しないに変えておきます。
QRコード
早速携帯から、友達になってみましょう。

QRコードを読むと無事、先程登録した内容で表示されることを確認し、友達になります。

Node-REDでの準備

Webhookが受けられるように、Webサーバを立ち上げます。と言っても、ここがNode-RED on Bluemix最大の利点とも言える簡単さです。初回知らずに「簡単じゃんLINE」と思いながら進みましたが、エンジニア達はセキュアな環境準備で結構つまずくらしいです。

フローエディタのメニューから『http in』『http request』『http response』『debug』ノードをそれぞれ下記のように配置し、httpノードを開きます。

メソッドをGETからPOSTに変更、URLに任意の文字列、例えば"/line_hook"と入れ適用します。

Webhook URLの設定

ここで先程のLINEの画面に戻り、Webhook URLを設定します。『Webhook送信』を利用するに変更。また『Webhook URL』の鉛筆アイコンを押し前項で設定したURL(例は"line_hook")を入力、閉じて試験します。疎通確認が取れたらOKです。これでLINEとNode-REDの経路が開通しました！

Bearerの取得

同じページの『アクセストークン』を発行します。長い文字列が出てきますが、認証に使うものですので、全てコピーしてメモ帳などにコピーします。

Node-REDの開発

今回はReply APIを使いますので、送信時ReplyTokenが必要になります。先ほど配置したものに更にDebugノードを追加し、調べてみましょう。

友達になったクライアントから挨拶を送ると、

Debugタブにこのような表示がされました。これは、"msg.payload.events[0].replyToken"という場所に入っている値がReplyTokenだという意味です。どこに入っているか判ったので、返信時、これを変数として渡してあげます。functionノードを挿入して、設定してやります。

API referenceを見ながら下記のように書きます。先ほどコピーしたアクセストークンは3行目に貼り付けてください。そして返信をせめて固定じゃない文言にしたいので、受信したテキスト（msg.payload.events[0].message.textに入っている）を埋め込んでやります。

function

msg.headers = {
    "Content-Type": "application/json",
    "Authorization": "Bearer {ここにアクセストークンを貼り付け}"
};

msg.payload = {
    "replyToken": msg.payload.events[0].replyToken,
    "messages":[
        {
            "type": "text",
            "text": msg.payload.events[0].message.text + "？"
        },
    ]
};
return msg;

ノードが接続されていることを確認して、デプロイします。携帯から『こんにちは』と送ってやると『こんにちは？』と返ってくることを確認しましょう。

LINE

[{"id":"fdeca679.e6ed08","type":"http in","z":"407ee723.987178","name":"line_hook[POST]","url":"/line_hook","method":"post","upload":false,"swaggerDoc":"","x":220,"y":140,"wires":[["d1fbe779.73a058","d22cd584.c0ae6"]]},{"id":"d1fbe779.73a058","type":"debug","z":"407ee723.987178","name":"","active":true,"console":"false","complete":"payload","x":390,"y":100,"wires":[]},{"id":"be576634.686ad8","type":"http request","z":"407ee723.987178","name":"send_result","method":"POST","ret":"txt","url":"https://api.line.me/v2/bot/message/reply","tls":"","x":510,"y":140,"wires":[["f252fab3.cff5d8","c51dc68d.6d0c38"]]},{"id":"f252fab3.cff5d8","type":"http response","z":"407ee723.987178","name":"","statusCode":"","headers":{},"x":650,"y":140,"wires":[]},{"id":"c51dc68d.6d0c38","type":"debug","z":"407ee723.987178","name":"","active":true,"console":"false","complete":"payload","x":670,"y":100,"wires":[]},{"id":"d22cd584.c0ae6","type":"function","z":"407ee723.987178","name":"オウム","func":"msg.headers = {\n    \"Content-Type\": \"application/json\",\n    \"Authorization\": \"Bearer {ここにアクセストークンを貼り付け}\"\n};\n\nmsg.payload = {\n    \"replyToken\": msg.payload.events[0].replyToken,\n    \"messages\":[\n        {\n            \"type\": \"text\",\n            \"input\": msg.payload.events[0].message.text,\n            \"text\": msg.payload.events[0].message.text + \"？\"\n        },\n    ]\n};\nreturn msg;","outputs":1,"noerr":0,"x":370,"y":140,"wires":[["be576634.686ad8"]]}]

今後

Watson Conversationとの接続に関してはWatson ConversationでLINEのチャットボットを作ってみる（後編）で書きます。