18
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Watson ConversationでLINEのチャットボットを作ってみる(前編)

Last updated at Posted at 2017-10-16

はじめに

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

前提

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

LINE@アカウントの作成

個人(クライアントユーザ)としてのLINEアカウントと別でLINE@アカウントが必要なので、公式ページから登録をします(法人扱いです)。関係ないですが事情あってiPhoneとiPadでの投稿をしているため、ここへのログインで四苦八苦しました。そして諦めました。ここで使用するLINE@のサービスとその内容は、公式サイトの説明を読んで正しく登録してください(動いたけどよくわかりません)。一部適当に見える箇所がありますが、自己責任にてお願いします。
IMG_0229.PNG
『LINE@アカウントを作成する』をクリックすると以下の画面が出ますので、『一般アカウント』を作成します。
IMG_0230.PNG
LINEアカウントでログインすると、色々入力を求められますので、がんばって真摯に入力します。
IMG_0232.PNG

messaging APIを始める

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

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

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

  1. アプリアイコン画像
    書かれている規定内のサイズでアップロードします。

  2. アクセストークン
    重要な項目ですが、ここでは触れずあとで戻ってきます。

  3. Webhook送信
    これもあとで戻ってきて設定します。

  4. 自動返信メッセージ
    返事しません宣言は不要なので、使用しないに変えておきます。

  5. QRコード
    早速携帯から、友達になってみましょう。

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

Node-REDでの準備

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

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

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

Webhook URLの設定

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

Bearerの取得

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

Node-REDの開発

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

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

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

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

IMG_0245.PNG

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;

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

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のチャットボットを作ってみる(後編)で書きます。

18
18
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
18
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?