Let's try to use Imagemap message.
公式リファレンスでここに書かれていることを実際にやってみようと思います
以下のコードは、BOTとのトーク画面で link というテキストを入力すると
↓このようなimagemapが配置された画像を表示する例です
The code below means "replay Imagemap message when you send 'link'".
左下をクリックするとGoogle翻訳が開き
右下をクリックするとGoogleMapが開く
ようにしています
前提として
- 画像は横幅が 240, 300, 460, 700, 1040pxの5パターンを用意します
- .jpgや.pngの拡張子はファイル名から削除しておきます
- baseUrlにそれらの画像ファイルが入っているフォルダを設定します
詳しくはコードの下の「おまけ」に書きました
コード.gsvar CHANNEL_ACCESS_TOKEN = "TOKEN";
function doPost(e) {
var contents = e.postData.contents;
var obj = JSON.parse(contents);
var events = obj["events"];
for (var i = 0; i < events.length; i++) {
if (events[i].type == "message") {
reply_message(events[i]);
}
}
}
function reply_message(e) {
var input_text = e.message.text;
if (input_text == "link") {
var postData = {
"replyToken": e.replyToken,
"messages": [{
"type": "imagemap",
"baseUrl": "https://YOUR_DOMAIN/img/imagemap",
"altText": "this is an imagemap",
"baseSize": {
"height": 1040,
"width": 1040
},
"actions": [{
"type": "uri",
"linkUri": "https://www.google.co.jp",
"area": {
"x": 0,
"y": 0,
"width": 1040,
"height": 520
}
},
{
"type": "uri",
"linkUri": "https://translate.google.co.jp",
"area": {
"x": 0,
"y": 520,
"width": 520,
"height": 520
}
},
{
"type": "uri",
"linkUri": "https://www.google.co.jp/maps",
"area": {
"x": 520,
"y": 520,
"width": 520,
"height": 520
}
}
]
}]
};
}
var options = {
"method": "post",
"headers": {
"Content-Type": "application/json",
"Authorization": "Bearer " + CHANNEL_ACCESS_TOKEN
},
"payload": JSON.stringify(postData)
};
UrlFetchApp.fetch("https://api.line.me/v2/bot/message/reply", options);
}
| 意訳.gsアクセストークンを設定する この処理は以下を実行する 送信されたデータの内容を取得し そのJSONをオブジェクトに変換し eventsを取得する eventsの数だけ以下を繰り返す もしtypeがmessageなら reply_messageに渡す この処理は以下を実行する 入力されたtextを取得して もしそれが link なら postDataに replyTokenを設定し messagesの typeを設定し baseUrlを設定し altTextを設定し baseSizeの heightを設定し widthを設定する actionsの typeを設定し linkUriを設定し areaの x座標を設定し y座標を設定し widthを設定し heightを設定する 2つめのtypeを設定し linkUriを設定し areaの x座標を設定し y座標を設定し widthを設定し heightを設定する 3つめのtypeを設定し linkUriを設定し areaの x座標を設定し y座標を設定し widthを設定し heightを設定する optionsに methodを設定し headersに Content-Typeを設定し Authorizationを設定し payloadにはpostDataをJSONに変換したものを設定する optionをつけてLINEのmessage reply APIをたたく |
おまけ - Appendix -
この実装は難易度が高かった
きっと同じところでつまづく人もいるだろうと思い
実装するまでの試行錯誤を記録に残しておこうと思います
とりあえず
リファレンスのコードをそのまま貼り付けてみると
こうなります
コード内のbaseUrlを見れば
https://example.com
となっているので何となく予測はできます
この「baseUrl」というのが曲者でした
リファレンスにはこう書かれています
- httpsであること
- 画像はjpegかpngで
- ファイルサイズは1MBまでで
- 同じ画像で横幅を 240, 300, 460, 700, 1040px にした5つを用意すること
- それらはひとつのフォルダに入っていること
- それらのファイル名に拡張子を含めないこと
- baseUrlにはフォルダまでのパスを書くこと
ということらしいです
どうやら端末によって見に行くファイルサイズが異なり
そのサイズが5パターンあるらしい
しかもファイル名に拡張子が含まれていたらだめらしい
ということでこの仕様に合わせて進めて行きます
まずhttpsであることをクリアするために
5つの画像ファイルを入れるフォルダを置く場所が欲しい
- Yahoo!ジオシティーズ
- Google Drive
- Amazon Drive
- Microsoft One Drive
- DropBox
- Google Sites (classic)
- FC2
などなど無料でデータを置かせてくれるサービスはありますが
Yahoo!ジオシティーズ(2019年3月末でサービス終了)は「http」を「https」にする設定が見つけられず
Drive系はファイルIDでアクセスするため/images/folder/240の形ではアクセスできず
DropBoxはファイルを公開する設定が見つけられず
Google Sitesはページにファイルをaddしたらいけそうでしたが惜しくも拡張子を消せず諦めようとしていた時にFC2アカウントを持っていたことを思い出し
ログインしてみると「http」から「https」へ変更する設定もすぐに見つかりました
設定＞基本設定
SSL暗号化通信（HTTPS）の設定＞有効にする
そしてここに同じ画像の横幅だけを変更して保存した
この5つのファイルを入れたフォルダを
アップロードします
アップロードした時に.jpgや.pngなどの拡張子がファイル名に入っていたら
「名前を変更」から拡張子を削除してみてください
こうして
"baseUrl": "https://YOUR_DOMAIN.web.fc2.com/img/imagemap",
とすることでLINE BOTでimagemapを実装することができました
今回画像の置き場所として試したのはFC2のサービスでしたが
FC2以外でも条件を満たすサービスはあると思います
上に挙げた他のサービスでも僕が知らないだけで実はできる道があるかもしれません
