Yuki's bnb blog

こんにちは!Yukiといいます。本業のかたわら大阪で2016年夏から民泊運営のお手伝いをしています。民泊業務に関する様々なことを自動化・効率化したいと思い日々活動しています。 お気軽にコメント・お問い合わせください :) TOEICスコア 985

【応用編第3話】コピペでOK!スプレッドシートを使ってLINE BOTにスタンプや画像を返信させる方法 (解説編: GAS)

f:id:yukibnb:20200619100911p:plain

こんにちは!
Yuki (@yukibnb) です。

LINE Messaging APIとGoogle Apps Script(GAS)を使い、スプレッドシートに記載されたテキスト・スタンプ・画像・動画を返信するLINE BOTを作成する方法の紹介記事第3話です。

前回はGASを記述し、LINE BOTが完成しました。
www.yukibnb.com

今回は前回記述したGASの解説を行います。

※「応用編の前に基本編を読み返したい」という方は以下からご覧ください。

 
では解説を見ていきましょう!

 

一番のポイント!メッセージタイプごとの記述方法

メッセージタイプとは

基本編で紹介したLINE BOTはテキストのみ返信できるシンプルなものでした。

応用編ではテキスト・スタンプ・画像・動画と4つの異なる種類のメッセージを送信できるようになりました。

LINE Messaging APIではこれらのように異なる種類のメッセージを「メッセージタイプ」と呼んで分類しています。

今回実装したテキスト・スタンプ・画像・動画以外にも以下のようなメッセージタイプがLINE Messaging APIでは用意されています。

  • テキスト
  • スタンプ
  • 画像
  • 動画
  • 音声
  • 位置情報
  • イメージマップ
  • テンプレート
  • Flex

一見するとすごく複雑になったように感じますが、基本編で覚えたテキストの返信方法をしっかり理解できていれば、他のメッセージタイプの送信方法もスムーズに理解ができます。

 

おさらい: テキストの送信方法

f:id:yukibnb:20200618213212p:plain

基本編第6話で紹介したテキストの返信方法と同じです。

まずはじめにメッセージタイプを指定します。

テキストの場合、メッセージタイプはtextと書きます。

[{"type": "text",

 
次に返信語句をお好きなテキストに置き換えると完成です。「こんにちは」と返信したい場合、以下のように記述します。

[{"type": "text",
  "text": "こんにちは"}]


応用編第1話で作成したスプレッドシートのB列がメッセージタイプ、C列が返信語句にあたります。

f:id:yukibnb:20200618214930p:plain

 

スタンプの送信方法

f:id:yukibnb:20200618215637p:plain

スタンプの送信方法はテキストと若干違うだけで、すぐ覚えられます。

まずはじめにメッセージタイプを指定します。

スタンプの場合、メッセージタイプはstickerと書きます。

[{"type": "sticker",

 
次に送信したいスタンプのPackage ID(packageID)とSticker ID(stickerId)を記述します。

Package IDとSticker IDの調べ方は応用編第1話で紹介しました。

スプレッドシートのB列がメッセージタイプ、D列がPackage ID、E列がSticker IDにあたります。

f:id:yukibnb:20200618220346p:plain

 

画像の送信方法

f:id:yukibnb:20200618220410p:plain

まずはじめにメッセージタイプを指定します。

画像の場合、メッセージタイプはimageと書きます。

[{"type": "image",

 
次に送信したい画像のURL(originalContentUrl)、プレビュー画像のURL(previewImageUrl)を記述します。

画像のURLとプレビュー画像のURLについては応用編第1話にて紹介しました。

スプレッドシートのB列がメッセージタイプ、F列が画像のURL、G列がプレビュー画像のURLにあたります。

f:id:yukibnb:20200618220732p:plain

 

動画の送信方法

f:id:yukibnb:20200618221011p:plain

まずはじめにメッセージタイプを指定します。

動画の場合、メッセージタイプはvideoと書きます。

[{"type": "video",

 
次に送信したい動画のURL(originalContentUrl)、プレビュー画像のURL(previewImageUrl)を記述します。

動画のURLとプレビュー画像のURLについては応用編第1話にて紹介しました。

スプレッドシートのB列がメッセージタイプ、F列が動画のURL、G列がプレビュー画像のURLにあたります。

f:id:yukibnb:20200618221227p:plain

 

複数のメッセージタイプを同時に送信する方法

f:id:yukibnb:20200618224026p:plain

複数のメッセージタイプを同時に送信する方法は簡単です。

この画像のように記述すればOKです。

5つ以内であればメッセージタイプの組み合わせや順序は自由です。

 

GASを徹底解説!

メッセージをどこに挿入する?

メッセージタイプによって記述方法が異なることはわかりました。

では応用編第2話で記述したGASのどの部分に当てはまるかというと、以下のmessageArrayがそれに当たります。

  var postData = {
    "replyToken": reply_token,
    "messages": messageArray
  };

送信したいメッセージタイプに応じてmessageArrayの中身を調整してあげるだけでOKです。

例えばテキストとスタンプを同時に送信したい場合、以下のようになります。

  var messageArray = [{"type": "text",
                       "text": "返信語句"},
                      {"type": "sticker",
                       "packageId": "aaaaaa",
                       "stickerId": "bbbbbb"}];

  var postData = {
    "replyToken": reply_token,
    "messages": messageArray
  };

ちなみにmessageArrayはテキストのみ送信するLINE BOTのGASを紹介した基本編第4話でも使用しています。

つまり基本編(テキストのみ返信するLINE BOT)と応用編(異なるメッセージタイプを送信するLINE BOT)は実は大きな違いはなく、messageArrayの中身をスプレッドシートとGASで調整しているだけです。

ではもう少し詳しく見ていきましょう。

 

A~G列を配列wordListに格納する

f:id:yukibnb:20200618231401p:plain

まずはじめにスプレッドシートのA~G列の最終行までのすべてのデータを配列wordListに格納します。

GASの以下部分です。

  //シートの最終行を取得する
  var lastRow = sh.getLastRow();
  
  //シートのA~G列を二次元配列で取得する
  var wordList = sh.getRange(1,1,lastRow,7).getValues();

 
現在配列wordListは二次元配列になっています。

 
※二次元配列があまりよくわからない方は以下記事をご参照ください。
www.yukibnb.com

 

メッセージタイプを配列replyTypeに格納する

f:id:yukibnb:20200618232023p:plain

ユーザー(人間)がLINE BOTに対して「チェックアウト」と送信すると、GASはスプレッドシートのA列の語句が「チェックアウト」と一致するかA列を一行一行確認します。

そしてA列の語句が「チェックアウト」と一致した場合、その行のB列、つまりメッセージタイプを空配列replyTypeにpushして格納します。

この時GASはスプレッドシートそのものではなく、予め取得しておいた配列wordList内をループして確認します。その方がGASを高速に処理できるからです。

以下部分が該当します。

  //返信メッセージのタイプを格納するための空配列を宣言する
  var replyType = [];
 
  //返信メッセージを格納するための空配列を宣言する
  var replyList = [];
  
  //LINEで受信した語句がシートの受信語句と同じ場合、
  //返信メッセージのタイプをreplyTypeにpushし、
  //さらにその行のA列~G列をreplyListにpushする
  for(var i = 1; i < wordList.length; i++) {
    if(wordList[i][0] == text) {
      replyType.push(wordList[i][1]);
      replyList.push(wordList[i]); //ポイント: 一次元配列をpushする
    }
  }

 
現在配列replyTypeは一次元配列になっています。

 
※pushについてよくわからない方は以下をご参照ください。
www.yukibnb.com

 

返信メッセージを含む行をまるごと配列replyListに格納する

f:id:yukibnb:20200618233604p:plain

先程空配列replyTypeにメッセージタイプを一次元配列として格納しました。

同じループ内で、該当する行を空配列replyListにまるごと格納しました。(空配列replyListに一次元配列を格納しました。)

空配列の中に一次元配列を格納するため、配列replyListは二次元配列となります。

  //返信メッセージのタイプを格納するための空配列を宣言する
  var replyType = [];
 
  //返信メッセージを格納するための空配列を宣言する
  var replyList = [];
  
  //LINEで受信した語句がシートの受信語句と同じ場合、
  //返信メッセージのタイプをreplyTypeにpushし、
  //さらにその行のA列~G列をreplyListにpushする
  for(var i = 1; i < wordList.length; i++) {
    if(wordList[i][0] == text) {
      replyType.push(wordList[i][1]);
      replyList.push(wordList[i]); //ポイント: 一次元配列をpushする
    }
  }

 

空配列messageArrayを宣言する

次に空配列messageArrayを宣言します。

ようやくここでmessageArrayが登場しました。

ただ現時点では空配列なので、メッセージを入れる箱だけ用意した段階です。

  var messageArray = [];

 

空配列messageArrayにメッセージタイプと返信メッセージをpushする

f:id:yukibnb:20200618234629p:plain

現在一次元配列replyTypeにはメッセージタイプが、二次元配列replyListには該当する行がまるごと格納されています。

例えばユーザーがLINE BOTに「チェックアウト」と送信した場合、一次元配列replyTypeと二次元配列replyListの中身は以下のようになっています。

//replyType
["text","sticker"];

//replylList
[["チェックアウト","text","チェックアウトは午前11時です。\nご協力よろしくお願いいたします。","","","",""],
 ["チェックアウト","sticker","","11539","52114110","",""]];

 
一次元配列replyTypeの一つ目の要素はtext、そして二つ目の要素はstickerです。

つまり一度にテキストとスタンプを同時送信する必要があります。

一次元配列replyTypeと二次元配列replyListの中から、必要な情報を空配列messageArrayにpushし、messegeArrayを以下のようにします。

//messageArray
[ {"type": "text",
    "text": "チェックアウトは午前11時です。\nご協力よろしくお願いいたします。"},
  {"type": "sticker",
    "packageId": "11539",
    "stickerId": "52114110"}];

 
実際にどのように空配列messageArrayに情報をpushしているかというと、以下箇所で行っています。

  //replyTypeに格納されている返信メッセージのタイプと、replyListに格納されている返信メッセージを最大5つ、
  //messageArrayにpushする
  for(var j = 0; j < messageLength; j++) {
    switch (replyType[j]) {
      case "text":
        messageArray.push({"type": replyType[j], "text": replyList[j][2]});
        break;
      
      case "sticker":
        messageArray.push({"type": replyType[j], "packageId": replyList[j][3], "stickerId": replyList[j][4]});
        break;
        
      case "image":
        messageArray.push({"type": replyType[j], "originalContentUrl": replyList[j][5], "previewImageUrl": replyList[j][6]});
        break;
        
      case "video":
        messageArray.push({"type": replyType[j], "originalContentUrl": replyList[j][5], "previewImageUrl": replyList[j][6]});
        break;
    }
  }

SWITCH文を使って、メッセージタイプに応じてmessageArrayにpushする情報を調整しています。

たとえばメッセージタイプ《replyType[j]》がtextの場合、スプレッドシートのC列の情報《replyList[j][2]》をmessageArrayにpushする必要があります。

またメッセージタイプ《replyType[j]》がstickerの場合、スプレッドシートのD列の情報《replyList[j][3]》とE列の情報《replyList[j][4]》をmessageArrayにpushする必要があります。

 

messageArrayが完成

無事messageArrayが完成しました!

これでテキスト・スタンプ・画像・動画と異なるメッセージタイプのメッセージをLINE BOTに送信させることができるようになりました。

 

まとめ

今回は応用編第2話で紹介したGoogle Apps Script(GAS)の解説を行いました。

繰り返しになりますが、基本編(テキストのみ返信するLINE BOT)と応用編(異なるメッセージタイプを送信するLINE BOT)は実は大きな違いはなく、messageArrayの中身をスプレッドシートとGASで調整しているだけです。

messageArrayに関すること以外は基本編のGASと変わりはないため、もしちょっとわかりにくいなという場合、基本編の第5話・第6話の解説をお読み頂くとより理解が深まると思います!
 

 
本解説を通じて皆さんご自身でLINE BOTをカスタマイズし、より便利に活用頂けるとうれしいです。

応用編は今回の第3話で一旦終了となりますが、今後は単発でLINE BOTのおすすめカスタマイズなどを紹介できればと思っています。

今後もご期待ください!
 

 
【シリーズ目次】
《基本編》
【シリーズ第1話】LINE Messaging APIのプロバイダーとチャネルを作成する方法
【シリーズ第2話】LINE Messaging APIのチャネルアクセストークンを発行しよう
【シリーズ第3話】LINE BOTに返信させる語句をスプレッドシートに入力する
【シリーズ第4話】コピペでOK!スプレッドシートの語句を返信するLINE BOTをGASで作成する方法(実践編)
【シリーズ第5話】スプレッドシートの語句を返信するLINE BOTをGASで作成する方法(解説編: 全体像)
【シリーズ第6話】スプレッドシートの語句を返信するLINE BOTをGASで作成する方法(解説編: GAS)
 
《応用編》
【応用編第1話】スプレッドシートを使ってLINE BOTにスタンプや画像を返信させる方法 (シート準備編)
【応用編第2話】コピペでOK!スプレッドシートを使ってLINE BOTにスタンプや画像を返信させる方法 (実践編)
・※本記事※【応用編第3話】コピペでOK!スプレッドシートを使ってLINE BOTにスタンプや画像を返信させる方法 (解説編: GAS)