はじめに
このクリスマスシーズンに沿ったものを作れたらな～ということで、LINE Botでアドベントカレンダーを作ってみました
12月1日～24日までの期間をタップして送られるメッセージ内のリンクからキャンペーンURLなどへの誘導もできる販促ツールとしての活用もアリです
準備するもの
LINE Developersアカウント作成、Messaging APIチャネル作成・設定
（Qiitaで検索すると作成方法の記事がたくさんあります！）
※チャネルアクセストークンを控えておいてください。
リッチメニュー画像
画像設定：
・フォーマット：JPEGまたはPNG
・最大ファイルサイズ：1MB以下
・最小画像サイズ：800×250px
・最大画像サイズ：2500×1724px
・画像アスペクト比 (幅：高さ)：1.45以上
（例）アドベントカレンダーデザインにしたリッチメニュー画像
（12月1日～24日までの）24日分の動画・画像など
（例）12月1日に表示する画像
動画や動く画像にすると良さそうですね！ここはひとまず静止画像で。
作成手順
リッチメニュー表示設定
用意したリッチメニュー画像をもとにリッチメニューを作成していきます。
リッチメニュー作成のノーコードツール
を使用しました！
https://richmenu.app.e-chan.me/
作成方法は、
#ノーコード リッチメニューを秒で増殖! #リッチメニューエディタ #LINEDC
を参考にさせていただきました！
アクションはテキスト（メッセージ）にして、タップした日付が返信されるようにします。
Google Apps Script(GAS)でLINE Botを作成
(コード一覧)
// 応答メッセージURL
const REPLY = "https://api.line.me/v2/bot/message/reply";
// アクセストークン
const ACCESS_TOKEN = "＊＊＊＊チャネルアクセストークン＊＊＊＊";
// LINEから送られてきたデータを取得 doPost()
function doPost(e) {
//メッセージ受信
// LINEから受け取ったレスポンス
const res = e.postData.getDataAsString();
const event = JSON.parse(res).events[0];
// リプライトークン取得
const replyToken = event.replyToken;
//今日の日付を取得
const date = Utilities.formatDate(new Date(), 'Asia/Tokyo', 'M月d日');
//メッセージ受信
if (event.type == "message") {
if (event.message.type == "text") {
//テキストメッセージ取得
const postMsg = event.message.text;
if (postMsg == "12月1日" && date == '12月1日') {
replyObject(day1(), replyToken);
}
if (postMsg == "12月2日" && date == '12月2日') {
replyObject(day2(), replyToken);
}
* if (postMsg == "12月3日" && date == '12月3日') {
* replyObject(day3(), replyToken);
* }
→ここに(*)の内容を12月4日～24日に変更してコピペ
}
}
}
チャネルアクセストークンの貼り付け忘れずに！
// LINE messaging apiにJSON形式でデータをPOST
function replyObject(messages,replyToken) {
// replyするメッセージの定義
const postData = {
"replyToken" : replyToken,
"messages" : messages
};
return postMessage(postData);
}
// LINE messaging apiにJSON形式でデータをPOST
function replyMessage(message,replyToken) {
// replyするメッセージの定義
const postData = {
"replyToken" : replyToken,
"messages" : [
{
"type" : "text",
"text" : message
}
]
};
return postMessage(postData);
}
// LINE messaging apiにJSON形式でデータをPOST
function postMessage(postData) {
// リクエストヘッダ
const headers = {
"Content-Type" : "application/json; charset=UTF-8",
"Authorization" : "Bearer " + ACCESS_TOKEN
};
// POSTオプション作成
const options = {
"method" : "POST",
"headers" : headers,
"payload" : JSON.stringify(postData)
};
return UrlFetchApp.fetch(REPLY, options);
}
//12月1日のときのフレックスメッセージ返信
function day1() {
return [
{
"type": "flex",
"altText": "12月1日",
"contents": {
"type": "bubble",
"size": "giga",
"hero": {
"type": "image",
"url": "画像URL",
"aspectMode": "cover",
"size": "full",
"aspectRatio": "16:13"
},
"body": {
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "text",
"text": "クリスマスキャンペーン実施！",
"weight": "bold",
"size": "xl",
"align": "center"
},
{
"type": "text",
"text": "2022年12月1日～24日まで",
"align": "center",
"color": "#008b8b",
"weight": "bold"
}
]
},
"footer": {
"type": "box",
"layout": "vertical",
"spacing": "sm",
"contents": [
{
"type": "button",
"style": "link",
"height": "sm",
"action": {
"type": "uri",
"label": "詳細はこちら",
"uri": "https://linecorp.com"
}
},
{
"type": "box",
"layout": "vertical",
"contents": [],
"margin": "sm"
}
],
"flex": 0
}
}
}
]
}
上記は12月1日タップ時に返信されるフレックスメッセージです。
12月2日以降も内容をコピペしてスクリプト名を「day2Flex」「day3Flex」…としておくと分かりやすいです。
日ごとに使用する画像URLとリンクを適宜変更してください！
Webhook連携をして完成！
12月2日に試した際の画面
12月2日以外の日付をタップしても反応しません。
12月2日（2のタイル）をタップすると、フレックスメッセージが返ってきます。
※画像は12月1日用のものを転用しているので、12月2日でも1日の画像デザインです(;^_^A
一言メモ
今回はリッチメニューをアドベントカレンダー表示に用いましたが、本来はLIFFでカレンダーを立ち上げたかったです！😿
