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

# はじめに
このクリスマスシーズンに沿ったものを作れたらな～ということで、LINE Botでアドベントカレンダーを作ってみました:santa_tone1:

12月1日～24日までの期間をタップして送られるメッセージ内のリンクからキャンペーンURLなどへの誘導もできる販促ツールとしての活用もアリです:ok_hand:


# 準備するもの
 

:large_blue_diamond: LINE Developersアカウント作成、Messaging APIチャネル作成・設定
　 （Qiitaで検索すると作成方法の記事がたくさんあります！）
　　<strong>※チャネルアクセストークンを控えておいてください。</strong>
:large_blue_diamond:リッチメニュー画像

:::note info
画像設定：
・フォーマット：JPEGまたはPNG
・最大ファイルサイズ：1MB以下
・最小画像サイズ：800×250px
・最大画像サイズ：2500×1724px
・画像アスペクト比 (幅：高さ)：1.45以上
:::


　 （例）アドベントカレンダーデザインにしたリッチメニュー画像
![AdventCalendarPoster2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784430/e6a3f7e0-f875-0f61-a77a-7573ef85420d.png)


:large_blue_diamond:（12月1日～24日までの）24日分の動画・画像など
   　 （例）12月1日に表示する画像
![1ok.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784430/eb3c9a64-64ee-d57f-3d38-e50db4152f7b.jpeg)

動画や動く画像にすると良さそうですね！ここはひとまず静止画像で。



# 作成手順
:one: <strong>リッチメニュー表示設定</strong>
用意したリッチメニュー画像をもとにリッチメニューを作成していきます。
リッチメニュー作成のノーコードツール:point_down:を使用しました！
https://richmenu.app.e-chan.me/

作成方法は、
[#ノーコード リッチメニューを秒で増殖! #リッチメニューエディタ #LINEDC](https://qiita.com/okinakamasayoshi/items/c342506bc216417fd30f)
を参考にさせていただきました！

![111.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784430/b32b3b02-8550-9ab6-020a-0f85592b4b57.png)
![112.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784430/ad7678c7-03ce-1901-6c68-7e0de34205b2.png)

アクションはテキスト（メッセージ）にして、タップした日付が返信されるようにします。

:two: <strong>Google Apps Script(GAS)でLINE Botを作成</strong>
(コード一覧)

```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日に変更してコピペ
  }
}
}

```

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


```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
        }
      }
    }
  ]
}
```
:::note warn
上記は12月1日タップ時に返信されるフレックスメッセージです。
12月2日以降も内容をコピペしてスクリプト名を「day2Flex」「day3Flex」…としておくと分かりやすいです。
日ごとに使用する画像URLとリンクを適宜変更してください！
:::

:three: <strong>Webhook連携をして完成！</strong>

12月2日に試した際の画面:point_down:
12月2日以外の日付をタップしても反応しません。
12月2日（2のタイル）をタップすると、フレックスメッセージが返ってきます。
※画像は12月1日用のものを転用しているので、12月2日でも1日の画像デザインです(;^_^A

![Videotogif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784430/7f9100cc-7db2-5fc5-32c8-b15647995640.gif)


# 一言メモ
今回はリッチメニューをアドベントカレンダー表示に用いましたが、本来はLIFFでカレンダーを立ち上げたかったです！😿



:end: