はじめに

このクリスマスシーズンに沿ったものを作れたらな～ということで、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を作成
(コード一覧)

main.js

// 応答メッセージ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日に変更してコピペ
  }
}
}

チャネルアクセストークンの貼り付け忘れずに！

replyLine.js

// 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);      
}

day1Flex.js

//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でカレンダーを立ち上げたかったです！😿

販促にも使える！LINE BOTでつくるアドベントカレンダー☆

はじめに

準備するもの

作成手順

一言メモ