SHOWCASE GIG BLOG

LIST

2016.08.22

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

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

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

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

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

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

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

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

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

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

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

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

・app.js

[code lang=text]
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);
}
});
});
[/code]

・libLibeBot.js

[code lang=text]
// 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;

[/code]

指定の方法

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

[code lang=text]
{
“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の名前を指定
}
}
[/code]

参考

カテゴリー: GIGの日常BLOG /