Showcase Gig Blog

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

こんにちは。ディレクターの永田です。
今回はLINEのリッチメッセージ送信について、説明させていただきます。

1.LINEリッチメッセージとは

リッチメッセージ?と疑問に思われる方もいらっしゃると思いますが、LINE Newsとかで送られてくる形式のメッセージです。
テキスト、ステッカー(スタンプ)、画像や動画はユーザーサイドからも送信できますが、リッチメッセージはシステムサイドからしか送信できないものです。

20160822_LINE_0

2.リッチメッセージ仕様概要

1. 表示されているのは一枚絵

下記にリッチメッセージを送付した時の表示です。a/bと言う画像を表示しています。
画像サイズは1040、700、460、300、240px数の正方形画像が必要です。
画像のURLはベースURLとサイズで構成します。

20160822_LINE_2

2. タップしたらWebページを表示

アクションとしてはタップしたらWebサイトをWebViewで表示するというもののようです。
コールバックAPIを実行するといったことはなさそうでした。

3. タップ領域は座標で指定

表示ではaの領域をタップしたらyahoo、bの領域をタップしたらgoogleのサイトを表示するようにしています。
どの領域をタップしたら何を表示するかは、座標で範囲指定します。

20160822_LINE_1

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

・app.js

app.get('/zentai/1040', function(req, res){
    var buf = fs.readFileSync('public/images/zentai_1040.png');
    res.send(buf, { 'Content-Type': 'image/png' }, 200);
});
app.get('/zentai/700', function(req, res){
    var buf = fs.readFileSync('public/images/zentai_700.png');
    res.send(buf, { 'Content-Type': 'image/png' }, 200);
});
app.get('/zentai/460', function(req, res){
    var buf = fs.readFileSync('public/images/zentai_460.png');
    res.send(buf, { 'Content-Type': 'image/png' }, 200);
});
app.get('/zentai/300', function(req, res){
    var buf = fs.readFileSync('public/images/zentai_300.png');
    res.send(buf, { 'Content-Type': 'image/png' }, 200);
});
app.get('/zentai/240', function(req, res){
    var buf = fs.readFileSync('public/images/zentai_240.png');
    res.send(buf, { 'Content-Type': 'image/png' }, 200);
});
app.get('/thumb', function(req, res){
    var buf = fs.readFileSync('public/images/thumb.png');
    res.send(buf, { 'Content-Type': 'image/png' }, 200);
});

app.post('/test_rich_message', function(req,res){
  libLineBot.sendRichMessage("u22e8ab6b57b47956cded3863c12ba04e", "test", function response(error){ // kokokara
    if(error != null) {
      console.log(error);
    }
  });
});

・libLibeBot.js

// 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 () {};

MessageControll.prototype.sendRichMessage = function sendTextMessage(toData, text, res) {
  var options = setRequestOption(setBodyDataForRich(toData, text));
  console.log(options);
  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 setBodyDataForRich(toData, text ) {
  var markUpContentsData = new Buffer(markUpDataMake()).toString();
  var data = {
    "to":[toData],
    "toChannel":1383378250,
    "eventType":"138311608800106203",
    "content":{
      "contentType":12,
      "toType":1,
      "contentMetadata":{
        "DOWNLOAD_URL":"https://testlineapiserver.net/zentai",
        "SPEC_REV":"1",
        "ALT_TEXT":text,
        "MARKUP_JSON":markUpContentsData
      }
    }
  };
  console.log(data);
  return data;
}

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

function markUpDataMake() {
  var data = "{\"scenes\":{\"scene1\":{\"listeners\":[{\"type\":\"touch\",\"action\":\"action0\",\"params\":[0,0,520,1040]},{\"type\":\"touch\",\"action\":\"action1\",\"params\":[520,0,520,1040]}],\"draws\":[{\"h\":1040,\"w\":1040,\"y\":0,\"x\":0,\"image\":\"image1\"}]}},\"actions\":{\"action1\":{\"params\":{\"linkUri\":\"https://www.google.co.jp/\"},\"type\":\"web\"},\"action0\":{\"params\":{\"linkUri\":\"http://www.yahoo.co.jp/\"},\"type\":\"web\"}},\"images\":{\"image1\":{\"h\":1040,\"w\":1040,\"y\":0,\"x\":0}},\"canvas\":{\"height\":1040,\"width\":1040,\"initialScene\":\"scene1\"}}";
  return data;
}

module.exports = MessageControll.prototype;

指定の方法

上記ソースコード上のmarkUpDataMakeにあるエンコードされたJsonデータが指定部分になります。
下記がその詳細になります。

{
  "scenes": {
    "scene1": {                        // drawとlistenerを定義
      "listeners": [                   // タップする領域とそのアクションを定義
        {
          "type": "touch",             // touch固定
          "action": "action0",         // 適当なaction名称
          "params": [0, 0, 520, 1040]  // x, y, width, height(タップ可能領域の位置とサイズ)
        },
        {
          "type": "touch",              // touch固定
          "action": "action1",          // 適当なaction名称
          "params": [520, 0, 520, 1040] // x, y, width, height(タップ可能領域の位置とサイズ)
        }
      ],
      "draws": [                        // 描画する位置を指定
        {
          "h": 1040,                    // 1040を指定
          "w": 1040,            // 1040を指定
          "y": 0,                       // 0を指定
          "x": 0,                       // 0を指定
          "image": "image1"             // imageの適当な名称
        }
      ]
    }
  },
  "actions": {                          // アクションの定義
    "action1": {                        // action1に対する指定(listenersで指定)
      "params": {
        "linkUri": "https://example.com/right" // タップした時のURL
      },
      "type": "web"                            // Web固定
    },
    "action0": {                        // action0に対する指定(listenersで指定)
      "params": {
        "linkUri": "https://example.com/left"  // タップした時のURL
      },
      "type": "web"                            // Web
    }
  },
  "images": {                           // 画像に関する指定
    "image1": {                         // image1に対する指定(drawで指定)
      "h": 1040,                        // イメージの高さ 1040を指定
      "w": 1040,                        // イメージの幅 1040を指定
      "y": 0,                           // 0を指定
      "x": 0                        // 0を指定
    }
  },
  "canvas": {
    "height": 1040,                     // 基準サイズを指定する。1040を設定。
    "width": 1040,                      // 基準サイズを指定する。1040を設定。
    "initialScene": "scene1"            // sceneの名前を指定
  }
}

参考

コメントは受け付けていません。