LANG SELRCT

コードを書く場所についてはこちら

2017年10月22日日曜日

LINE BOTで「imagemap」を表示する


LINE BOTでImagemap messageを表示するということをやってみましょう
Let's try to use Imagemap message.

公式リファレンスでここに書かれていることを実際にやってみようと思います

LINE BOTをつくる方法はこちらの記事にまとめました

以下のコードは、BOTとのトーク画面で link というテキストを入力すると
↓このようなimagemapが配置された画像を表示する例です
The code below means "replay Imagemap message when you send 'link'".


上半分をタップするとGoogle検索が開き
左下をクリックするとGoogle翻訳が開き
右下をクリックするとGoogleMapが開く
ようにしています

前提として

  • 画像は横幅が 240, 300, 460, 700, 1040pxの5パターンを用意します
  • .jpgや.pngの拡張子はファイル名から削除しておきます
  • baseUrlにそれらの画像ファイルが入っているフォルダを設定します

詳しくはコードの下の「おまけ」に書きました


コード.gs
var 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」というのが曲者でした
リファレンスにはこう書かれています
要は
  1. httpsであること
  2. 画像はjpegかpngで
  3. ファイルサイズは1MBまでで
  4. 同じ画像で横幅を 240, 300, 460, 700, 1040px にした5つを用意すること
  5. それらはひとつのフォルダに入っていること
  6. それらのファイル名に拡張子を含めないこと
  7. 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以外でも条件を満たすサービスはあると思います
上に挙げた他のサービスでも僕が知らないだけで実はできる道があるかもしれません