どうも。つじけ（tsujikenzo）です。このシリーズでは、「スプレッドシートとGASでリッチメニューを管理しよう」をお送りします。今回は2回目です。
前回のおさらい
前回は、「初期設定とリッチメニューオブジェクト」をお届けしました。
今回は、「リッチメニューオブジェクトのアップロード」をお届けします。
今日のアジェンダ
- リッチメニューオブジェクトのアップロード
- リッチメニューオブジェクト一覧の取得
- リッチメニューオブジェクトの削除
事前準備
LINE公式アカウントのチャンネルアクセストークンを取得してコピペしておきましょう。
/** リッチメニューに関するクラス */
class RichMenu {
constructor() {
this.ACCESS_TOKEN = "チャンネルアクセストークン";
}
}また、LINE公式アカウントをスマホのLINEでフォローしておきましょう。
リッチメニューオブジェクトのアップロード
リッチメニューオブジェクトの取得
復習です。テスト関数で、リッチメニューオブジェクトを取得します。
コンソールログで確認しましょう。
/** TEST用関数 */
function testRichMenu() {
//インスタンス生成
const r = newRichMenu();
//リッチメニューオブジェクトの取得
const richMenuSource = ENUM_RICHMENU["testRichMenuSource"];
console.log(richMenuSource);
// { size: { width: 2500, height: 1686 },
// selected: false,
// name: '99_richMenu_test',
// chatBarText: '▲タップしてメニューを表示▲',
// areas:
// [ { bounds: [Object], action: [Object] },
// { bounds: [Object], action: [Object] },
// { bounds: [Object], action: [Object] } ] }
}リッチメニューを新規アップロードするメソッド
テスト関数に、リッチメニューを新規アップロードするメソッドの呼び出しを記述します。
引数に、リッチメニューオブジェクトを渡します。
//リッチメニューオブジェクトのアップロード
const result = r.createRichMenu(richMenuSource);
console.log(result);クラスにメソッドを実装します。
/** リッチメニューを新規アップロードするメソッド
* @param{object} リッチメニューオブジェクト
* @param{string} リッチメニューid
*/
createRichMenu(richMenuSource) {
const url = "https://api.line.me/v2/bot/richmenu";
const headers = {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + this.ACCESS_TOKEN,
};
const payload = richMenuSource;
const options = {
'headers': headers,
'method': 'post',
'payload': JSON.stringify(payload),
};
const id = UrlFetchApp.fetch(url, options);
return`リッチメニューID[${id}]を作成しました`
}テスト関数を、実行しましょう。richmenu-からはじまるリッチメニューIDを取得できていれば成功です。（エラーがでるばあいは、リッチメニューオブジェクトのカッコなどが抜けていないか確認しましょう。）
//リッチメニューID[{"richMenuId":"richmenu-xxxx"}]を作成しましたリッチメニューオブジェクト一覧の取得
テスト関数に、リッチメニューオブジェクト一覧の取得するメソッドの呼び出しを記述します。
//アップロードされている全リッチメニューIDの配列を取得する
console.log(r.getRichMenuIds());クラスにメソッドを実装します。
/** アップロードされている全リッチメニューIDの配列を取得するメソッド
* @return{array} リッチメニューオブジェクトの配列
*/
getRichMenuIds() {
const url = "https://api.line.me/v2/bot/richmenu/list";
const headers = {
'Authorization': 'Bearer ' + this.ACCESS_TOKEN,
};
const options = {
'headers': headers,
'method': "get",
};
const richMenuIds = UrlFetchApp.fetch(url, options);
const ids = JSON.parse(richMenuIds);
return ids.richmenus;
}
テスト関数を、実行しましょう。（リッチメニューオブジェクトのアップロードする関数はコメントアウトしておきましょう）
リッチメニューオブジェクトの配列が取得できていれば、成功です。
// [ { richMenuId: 'richmenu-xxx',
// name: '99_richMenu_test',
// size: { width: 2500, height: 1686 },
// chatBarText: '▲タップしてメニューを表示▲',
// selected: false,
// areas: [ [Object], [Object], [Object] ] } ]リッチメニューオブジェクトの削除
リッチメニューオブジェクトは、リッチメニューidを指定して削除します。
テスト関数に、リッチメニューオブジェクトを削除するメソッドの呼び出しを記述します。
引数に、リッチメニューidを指定します。
//リッチメニューオブジェクトを削除する
const id = "richmenu-xxx";
console.log(r.deleteRichMenu_(id));クラスにメソッドを実装します。
/** リッチメニューを削除するメソッド
* @param{string} リッチメニューid
*/
deleteRichMenu_(id) {
const richMenuId = id;
const url = `https://api.line.me/v2/bot/richmenu/${richMenuId}`;
const headers = {
'Authorization': 'Bearer ' + this.ACCESS_TOKEN,
};
const options = {
'headers': headers,
'method': "delete",
};
const response = UrlFetchApp.fetch(url, options);
const statusCode = response.getResponseCode();
return`[${statusCode}]:リッチメニューオブジェクトを削除しました`
}テスト関数を、実行しましょう。
ステータスコードを含む、メッセージが取得できていれば、成功です。
// [200]:リッチメニューオブジェクトを削除しましたまとめ
以上で、「リッチメニューオブジェクトのアップロード」をお届けしました。
- リッチメニューオブジェクトをアップロードする
- リッチメニューidを取得する
- リッチメニューオブジェクトを削除する
- リッチメニューidを取得するという流れは、慣れるまで何度もトライしてみましょう。確実に動くことが自身につながります。
次回は、「リッチメニュー画像とIDの紐づけ」をお届けします。
