LANG SELRCT

Google Apps Scriptのコードを書く場所  (新規作成: スプレッドシート | スクリプトエディタ

2018年12月31日月曜日

LINE BOTのリッチメニューをAPIで作ってみる


以前書いたLINE BOTで「リッチメニュー」を表示してみる
では、管理画面からぽちぽちクリックしながらリッチメニューを表示しました。

今回は個人的に作りたい仕組みの都合でAPIでコントロールしたくてコードを書きました。

知識不足のため思った以上に時間がかかってしまい、途中でこのAPIに手を出したことを後悔しながら、公式リファレンスを上から順番にやってみました。
いくつか試せていないAPIもありますが、Google Apps Scriptでやったりcurlでやったりした過程を書き残しました。


今回試した公式リファレンス
https://developers.line.biz/en/reference/messaging-api/#rich-menu


Create rich menu


https://developers.line.biz/en/reference/messaging-api/#rich-menu
に例示されているCreate rich menuのコードをそのまま使ってみます


コード.gs
function get_token() {
  return PropertiesService.getScriptProperties().getProperty('token');
}

function createRichMenu() {
  var postData = {
    "size": {
      "width": 2500,
      "height": 1686
    },
    "selected": false,
    "name": "Nice richmenu",
    "chatBarText": "Tap here",
    "areas": [
      {
        "bounds": {
          "x": 0,
          "y": 0,
          "width": 2500,
          "height": 1686
        },
        "action": {
          "type": "postback",
          "data": "action=buy&itemid=123"
        }
      }
    ]
  }
  var url = 'https://api.line.me/v2/bot/richmenu';
  
  var options = {
    "method": "post",
    "headers": {
      "Content-Type": "application/json",
      "Authorization": "Bearer " + get_token()
    },
    "payload": JSON.stringify(postData)
  };
  var result = UrlFetchApp.fetch(url, options);
  Logger.log(result);
}


Upload rich menu image


※一度設定したら変更できないので、変更したい場合は新規リッチメニューを作成することになります

curlコマンドの中の -T をコード.gsの中で表現する方法がよくわからないので
リファレンスのとおりにcurlでやってみます

curlコマンド
curl -X POST https://api.line.me/v2/bot/richmenu/richmenu-ID/content \ 
-H 'Authorization: Bearer  アクセストークン' \ 
-H 'Content-Type: image/jpeg' \
-H 'Expect:'  \
-T img.jpg
意訳
richmenu-IDを入れる
アクセストークンを入れる
image/jpegまたはimage/png
これは公式リファレンスのとおりに書いておく
この例ではMacのhomeに保存してある2500×1686ピクセルのimg.jpgファイルを指定している


curlコマンドはMacのターミナルやiTermを起動して入力できます
上記のcurlコマンドの中の以下3箇所を書き換えて
一行ずつenterを押していくとできるはず
  • richmenu-ID
  • アクセストークン
  • img.jpg

この画像アップロードが一番つまずきました、、


Download rich menu image


これも公式リファレンスの通りcurlでやってみましたが、ダウンロードしたファイルが壊れていた、、

今やらなくてもいいのでこれはもうこれ以上追わないことにしました。


Get rich menu list


これは以下のようなコード.gsでログに出せます

コード.gs
function getRichMenuList() {
  var url = 'https://api.line.me/v2/bot/richmenu/list';
  var options = {
    "method": "get",
    "headers": {
      "Content-Type": "application/json",
      "Authorization": "Bearer " + get_token()
    }
  };
  var response = UrlFetchApp.fetch(url, options);
  Logger.log(response);
}


Get rich menu


これも以下のようなコード.gsでログに出せます
richmenu-IDを対象のIDに書き換えます

コード.gs
function getRichMenu() {
  var id = 'richmenu-ID';
  var url = 'https://api.line.me/v2/bot/richmenu/' + id;
  var options = {
    "method": "get",
    "headers": {
      "Content-Type": "application/json",
      "Authorization": "Bearer " + get_token()
    }
  };
  var response = UrlFetchApp.fetch(url, options);
  Logger.log(response);
}




Delete rich menu


これは以下のようなコード.gsでできそうな気がしましたが

コード.gs
function deleteRichMenu() {
  var id = 'richmenu-ID';
  var url = 'https://api.line.me/v2/bot/richmenu/';
  var options = {
    "method": "delete",
    "headers": {
      "Content-Type": "application/json",
      "Authorization": "Bearer " + get_token()
    }
  };
  var response = UrlFetchApp.fetch(url, options);
  Logger.log(response);
}


実行すると 'DELETE', is not supportedというエラーが出たので

curlでやってみます

curlコマンド
curl -v -X DELETE https://api.line.me/v2/bot/richmenu/richmenu-ID \
-H 'Authorization: Bearer  アクセストークン '
意訳
richmenu-IDを入れる
アクセストークンを入れる

これで指定したrichmenu-IDが削除できました


Set default rich menu


これも以下のようなコード.gsで実行できます
richmenu-IDを対象のIDに書き換えます

コード.gs
function setDefaultRichMenu() {
  var id = 'richmenu-ID';
  var url = 'https://api.line.me/v2/bot/user/all/richmenu/' + id;
  var options = {
    "method": "post",
    "headers": {
      "Content-Type": "application/json",
      "Authorization": "Bearer " + get_token()
    }
  };
  var response = UrlFetchApp.fetch(url, options);
  Logger.log(response);
}



Get default rich menu ID


これも以下のようなコード.gsで実行できます

コード.gs
function getDefaultRichMenuId() {
  var url = 'https://api.line.me/v2/bot/user/all/richmenu';
  var options = {
    "method": "get",
    "headers": {
      "Content-Type": "application/json",
      "Authorization": "Bearer " + get_token()
    }
  };
  var response = UrlFetchApp.fetch(url, options);
  Logger.log(response);
}



Cancel default rich menu
Link rich menu to user
Get rich menu ID of user
Unlink rich menu from user

このあたりは今やる必要ないので、後で必要になった時にやろうと思います。


最新の投稿

Pixel 5でSuicaが使えないときはGoogle PayでSuicaを有効にしてみる

Pixel 5への機種変でSuicaが使えない人向けに書きました。 MISSION Pixel 5でSuicaを使えるようにする SOLUTION 旧端末で機種変更の設定を行う NFCをオンにする Google PayでSuicaを有効にする PROBLEMS 以前...