Showcase Gig Blog

LINE BOT APIでリッチメッセージを送るまで

コメントする

こんにちは。ディレクターの永田です。
前回までWatsonについて解説しましたが、フロント部分についてこれから解説していきたいと思います。
まずはLINEから、解説していきます。

1. LINE BOT API概要

LINE BOT APIはLINEアプリ上でBOTシステムを構築するためのAPI群です。
BOT APIからメッセージを受信(callback)したり、メッセージ送信(post API)するには、システム(サーバー)が必要です。
LINE APIを利用したBOTは50人まで利用できます。
LINEに申請すれば、5000人まで利用可能だそうです。
それ以上となるとLINEビジネスコネクトを利用しないといけないのではないかと思います。
image-18

2. 準備

1.BOT API Trial Accountを作成

BOT API Trial Accountのページでアカウントを開設します。
image-17

2.BOTで利用するサーバーのコールバックのAPIを作成

下記のようなとりあえず200を返すようなAPIでOKです。

var express = require('express');        // Express
var cfenv = require('cfenv');            // Cloud Foundry
var bodyParser = require('body-parser'); // Json Parser

app.post("/callback", function (req, res) {
  res.status(200).end();
});

var server = app.listen(process.env.PORT || 3000, function() {
    console.log('Listening on port %d', server.address().port);
});

3.BOTの名称、アイコン、コールバックAPIを設定

コールバックAPIのURLはプリフィクスがhttpsかつポート番号(443)が含まれていないといけません。
「https://yourdomain.com:443/callback_function」のような形式です。

img-alternative-text

設定後、Verifyボタンをクリックし、Successが表示されればOKです。

img-alternative-text

4.White ListにサーバーのIPを設定

Post APIを実行できるように、White ListにサーバーのIPを設定しておきます。
サーバーが起動するたびにIPが変わってしまうと、再起動のたびに毎回White Listに登録する必要があるため、LINEと通信するサーバーは固定IPを付与しておきたいところです。

img-alternative-text

5.準備完了

これで準備は完了です。
フロント(アプリ)にメッセージ投稿されたら作成したコールバックAPIに通知されます。
POST APIを実行すれば、ユーザーにメッセージを送ることができます。
下記によく様々なサイトで記載されているおうむ返しのソースを記載しておきますので、参考にしていただければと思います。(環境はBluemix+Staticaです。)

・app.js

var express = require('express');        // Express
var cfenv = require('cfenv');            // Cloud Foundry
var bodyParser = require('body-parser'); // Json Parser
var util = require('util');              // util for console.log
var libLineBot = require('./lib/libLineBot.js');  // original library
var request = require('request');        // HTTP/HTTPS request client

var app = express();
var appEnv = cfenv.getAppEnv();

// Json Setting
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({     // to support URL-encoded bodies
  extended: true
})); 

app.post("/callback", function (req, res) {
  var body = req.body;
  console.log(util.inspect(body,false,null));
  for(var i = 0 ;i < body.result.length ; i++){
    if(body.result[i].content.toType == 1) {
      libLineBot.sendTextMessage(body.result[i].content.from, body.result[i].content.text, function response(error){
        if(error != null) {
          console.log(util.inspect(error,false,null));
        }
      });
    }
  }
  res.status(200).end();
});

・libLineBot.js


var request = require('request');        // HTTP/HTTPS request client

// Define Headers
var headers = {
    "Content-Type" : 'application/json; charset=UTF-8',
    "X-Line-ChannelID" : "<your_own_ChannelID>",
    "X-Line-ChannelSecret" : "<your_own_ChannelSecret>",
    "X-Line-Trusted-User-With-ACL" : "<your_own_mid>"
};

// Define proxy URL
if (typeof process.env.VCAP_SERVICES === 'undefined') {
  var proxyURL = "your_Statica_url" // テスト用に固定でStaticaのURLを設定しておきたいときに設定
} else {
  var vcap_services = JSON.parse(process.env.VCAP_SERVICES);         //Bluemixのサービス関係の環境変数を取得
  var proxyURL = vcap_services['statica'][0].credentials.STATICA_URL; //Staticaの固定アドレスを取得
  console.log(vcap_services);
}

// Make Class
var MessageControll = function () {};

// Method
MessageControll.prototype.sendTextMessage = function sendTextMessage(toData, text, res) {
  var options = setRequestOption(setBodyDataForText(toData, text));
  request.post(options, function(error, response, body){
  	if (!error && response.statusCode == 200) {
      res(null);
      console.log('success');
    } else {
      res(error);
      console.log('error: '+ JSON.stringify(response));
    }
  });
};

function setBodyDataForText(toData, text) {
    var data = {
    "to": [toData],
    "toChannel": 1383378250, //固定
    "eventType":'138311608800106203', //固定
    "content": {
      "contentType":1,
      "toType":1,
      "text":text
    }
  };
  return data;
}

function setRequestOption(body) {
  var options = {
    url: 'https://trialbot-api.line.me/v1/events',
    proxy: proxyURL, //Staticaのアドレスをプロキシに設定する
    headers: headers,
    json: true,
    body: body
  };
  return options;
}

module.exports = MessageControll.prototype;

3. リッチメッセージを送信

長くなりましたので、次の記事といたします。

4. 参考

LINE Bot を IBM Bluemix で作る
Statica でサーバー間プロクシーを実現する
line-bot-api-v1

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中