GASを使ったLINE BotのFlex Messageの送り方

今回は、株とは関係のないお話しで、Botについて書くことにしました。
ただBotの作り方を最初から全て書くと、とても長くなってしまいます。
そのため、今回はタイトル通り「GASでのFlexMessageの送り方」について備忘録を書いていきます。
初歩のGASを使ったLINE Botの作り方は検索すると多くの方達が分かりやすい説明を書いてくださっているのでそちらを参考にしていただけますと幸いです。
※GASはGoogle App Scriptの略です。「GAS LINE Bot」と出てきますが、もし必要あれば私のnoteでもまとめてみます。

少しこだわったbotを作りたい場合、やはり、Flex Messageを駆使できると幅が広がりますので参考になれば嬉しいです。

Flex Messageとは

※Flex Messageは知ってるよという方は、読み飛ばしてもらって大丈夫です。
そもそもFlex Messageとは何？というところですが、Lineの公式ではこう書いてあります。

Flex Messageは、レイアウトをカスタマイズできるメッセージです。CSS Flexible Box（CSS Flexbox） (opens new window)の基礎知識を使って、レイアウトを自由にカスタマイズできます。

イメージはこのような感じ。

ちょっとおしゃれなメッセージが送れるようになるので、こだわりたい時はこちらですね。

私の場合は、銘柄の情報を載せたり、チャートを表示するためのボタンを用意したかったのに、標準だとカスタマイズできなかったので、ボタンしか用意できないため、Flex Messageでカスタマイズして表示をしてみました。

実際こんな感じにしてみました

では、これからGASでのFlex Messageの送り方について記録して行きます。

Flex Messageの送り方：Flex Messageの準備

まず、Flex MessageですがLINE Developerで、FLEX MESSAGE SIMULATORというGUIでFlex Messageを作り、JSON形式にしてくれるものが用意してあります。（下記キャプチャです。）

この左側の画面で、イメージを確認しながらFlex Messageを作ることができます。自分で送りたいデザインを作り込めますので、ここでまずいろいろ試して遊んでみるのが良いと思います！

1から作るのは大変だと思うので、このSimulatorの右上にShowcaseというボタンがあります。
何をどうやればいいかわからない時は、Showcaseのテンプレートを参考にカスタマイズしていくと簡単にできるかもしれません。

納得のいくものができたら、View as JSONをクリックして、JSONコピペしておきます。

Flex Messageの送り方：GASでFlex Messageを送る

JSONができたら、GASを準備します。
ここでは、シンプルに下記の画像のFlex Messageを送るためのプログラムにします。

Flex MessageをGASで送る際に私が引っかかったのは、
JSONをそのままコピペしても使えなかったところです。
実際のFlex Messageを送る部分のコードで説明します

//メッセージを受け取ったときの処理をこの中に記載
function reply(e){
 
  
  var message = {
    "replyToken" : e.replyToken,
    "messages" : [
      {
        'type':'flex',　//ここの宣言が必須
        'altText':'this is a flex message',
        //↓このcontentsの部分にSimulatorのJSONをコピー
        'contents': 
        {　
          "type": "bubble",
          "body": {
            "type": "box",
            "layout": "vertical",
            "contents": [
              {
                "type": "text",
                "text": "Koshikake",
                "weight": "bold",
                "color": "#1DB446",
                "size": "sm"
              },
              {
                "type": "text",
                "text": "Flex Message Test",
                "weight": "bold",
                "size": "xxl",
                "margin": "md"
              }
            ]
          },
          "styles": {
            "footer": {
              "separator": true
            }
          }
        }
      }
    ]
  };
 
  
 //Lineの返信データの作成部分
 var replyData = {
   "headers" : {
     "Content-Type" : "application/json",
     "Authorization" : "Bearer " + channel_access_token
   },
   "method" : "post",
   "payload" : JSON.stringify(message)
 };
 
 UrlFetchApp.fetch("https://api.line.me/v2/bot/message/reply", replyData);


}

これがメッセージを受け取って、Flex Messageを返す部分です。

さらにFlex Messageのところだけを載せて説明します。

 "messages" : [
      {
        'type':'flex',　//ここの宣言が必須
        'altText':'this is a flex message',
        //↓このcontentsの部分にSimulatorのJSONをコピー
        'contents': 
         //ここにJSONをコピペします   
      }
    ]
   
 

LINE Flex Message Simulatorで準備されるのは,

"messages"の中の"contents"の部分のみ

です。
その前の"type"の宣言などはJSONでは記載されていないので自分で書いてあげてからcontentsのところにコピペしなければなりませんでした。

もし、自分で用意したFlex Messageを送りたい場合は
//ここにJSONをコピペします
の部分にコピペするといいです。

以上で無事に送られるはずです。連携したLine botに何か適当にメッセージを送るとFlex Messageが返信されてきます。
このnoteの最後にプログラム全文を載せておきますので、
手っ取り早く送りたい方はLINEのトークンをご用意いただき、トークンの部分に用意いただいたものをコピペすると送れるようになると思います。

終わりに

GASでのFlex Messageの送り方でした。

電子工作系の記事は書いたことがありますが、こういうプログラム自体の記事はほとんどないので、まだ読みにくいところがあると思います・・！すみません！

最後まで読んでいただきありがとうございました！

↓GAS全文はこちら

//アクセストークン　XXXXXXXXXXの部分に自分で用意いただいたトークンをコピペしてください
var channel_access_token = "XXXXXXXXXX"


// ボットにメッセージ送信/フォロー/アンフォローした時の処理
function doPost(e) {
 
 var events = JSON.parse(e.postData.contents).events;

 events.forEach(function(event) {
   if(event.type == "message") {
     reply(event);
   } else if(event.type == "follow") {
     follow(event);
   } else if(event.type == "unfollow") {
     unFollow(event);
   }
});

}


function reply(e){
 
  
  var message = {
    "replyToken" : e.replyToken,
    "messages" : [
      {
        "type" : "text",
        "text" : e.message.text
      },
      {
        'type':'flex',　//ここの宣言が必須
        'altText':'this is a flex message',
        //↓このcontentsの部分にSimulatorのJSONをコピー
        'contents': {　
          "type": "bubble",
          "body": {
            "type": "box",
            "layout": "vertical",
            "contents": [
              {
                "type": "text",
                "text": "Koshikake",
                "weight": "bold",
                "color": "#1DB446",
                "size": "sm"
              },
              {
                "type": "text",
                "text": "Flex Message Test",
                "weight": "bold",
                "size": "xxl",
                "margin": "md"
              }
            ]
          },
          "styles": {
            "footer": {
              "separator": true
            }
          }
        }
      }
    ]
  };
 
  
 //Line Messaging APIにテキストを渡して返信するためのデータを作成
 var replyData = {
   "headers" : {
     "Content-Type" : "application/json",
     "Authorization" : "Bearer " + channel_access_token
   },
   "method" : "post",
   "payload" : JSON.stringify(message)
 };
 
 UrlFetchApp.fetch("https://api.line.me/v2/bot/message/reply", replyData);


}
 


/* フォローされた時の処理 */
function follow(e) {
 
}

/* アンフォローされた時の処理 */
function unFollow(e){
 
}