Yuki's bnb blog

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

【応用編第1話】スプレッドシートを使ってLINE BOTにスタンプや画像を返信させる方法 (シート準備編)

f:id:yukibnb:20200613200742p:plain

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

LINE Messaging APIとGoogle Apps Script(GAS)を使い、スプレッドシートに記載された語句を返信するBOTを作成する方法を以前紹介しました。

 

 
上記シリーズ記事で紹介したものはテキストのみ返信できるシンプルなものでした。

今回から数話に渡り応用編として、以下4種類の返信ができるLINE BOTの作成方法を紹介します。

  • テキスト
  • スタンプ
  • 画像
  • 動画

 
完成するとこのようになります。

f:id:yukibnb:20200613170606g:plain

 
スタンプや画像、動画を返信できると、テキストだけの返信よりも表現の幅が広がります!

この記事ではまずスプレッドシートを準備する方法を紹介します。

早速見ていきましょう!

 

おさらい&事前準備

今回紹介する内容は前回の基本シリーズ第1話~第6話の応用です。

スプレッドシートの準備に進む前に以下記事の手順にそって、LINE Messaging APIのプロバイダーとチャネル作成と、チャネルアクセストークンを発行してください。

【シリーズ第1話】LINE Messaging APIのプロバイダーとチャネルを作成する方法

【シリーズ第2話】LINE Messaging APIのチャネルアクセストークンを発行しよう

以前すでに作成・発行済みの方は同じものを使用しても大丈夫ですし、新たに作成・発行しても大丈夫です。

 

スプレッドシートを準備する

新規スプレッドシートを作成する

f:id:yukibnb:20200224192233p:plain

Google Driveにアクセスし、新規スプレッドシートを作成してください。

 

スプレッドシート名とシート名を記入する

f:id:yukibnb:20200224192449p:plain

画面上部の[無題のスプレッドシート]をクリックし、お好きなスプレッドシート名を記入してください。

「スプレッドシート名」=「ファイル名」です。

そして画面下部の[シート1]をダブルクリックし、お好きなシート名を記入してください。特に思いつかなければ[シート1]のままでも構いません。

 

スプレッドシートIDを確認する

f:id:yukibnb:20191010123552p:plain

スプレッドシートID

https://docs.google.com/spreadsheets/d/この箇所がIDです/edit

スプレッドシートIDはスプレッドシートのURLの一部分です。

スプレッドシートを開いているウェブブラウザー(Chrome、Firefoxなど)のアドレスバーを見ると、スプレッドシートIDを確認できます。

次回記事で紹介するGoogle Apps Script(GAS)でスプレッドシートIDを使用します。今は確認場所を覚えておいてください。

 

見出しを作成する

f:id:yukibnb:20200613171851p:plain

A1~G1セルに上記画像と同じように入力してください。

  • A1: 受信語句
  • B1: Type
  • C1: 返信語句
  • D1: packageId
  • E1: stickerId
  • F1: originalContentUrl
  • G1: previewImageUrl

 

B列に入力規則を設定する

f:id:yukibnb:20200613172527p:plain

画面上部から[データ]→[データの入力規則]の順にクリックしてください。

 
f:id:yukibnb:20200613172636p:plain

するとこのようなポップアップが表示されます。

以下のように設定してください。

  • 1: {シート名}!B2:B
  • 2: リストを直接指定
  • 3: text,sticker,image,video
  • 4: 入力を拒否

注意

f:id:yukibnb:20200613173327p:plain

{シート名}!B2:Bの{シート名}はご自身のシート名に置き換えてください。
僕は"List"というシート名にしたので、画像内では"List!B2:B"となっています。


そして最後に[保存]をクリックしてください。

するとB列に以下のようなドロップダウンが現れます。

f:id:yukibnb:20200613173117g:plain

 

C列に条件付き書式を設定する

f:id:yukibnb:20200613173538p:plain
 
画面上部から[表示形式]→[条件付き書式]の順にクリックしてください。

 
f:id:yukibnb:20200613173905p:plain
 
すると右側にこのような画面が表示されます。

以下のように設定してください。

  • 1: C2:C
  • 2: カスタム数式
  • 3: =$B2="text"

 
そして最後に[保存]をクリックしてください。

これでB列で"text"を選択すると、その行のC列のセルが緑色になります。

 

D・E列に条件付き書式を設定する

f:id:yukibnb:20200613173538p:plain
 
先程と同じように画面上部から[表示形式]→[条件付き書式]の順にクリックしてください。

 
f:id:yukibnb:20200613174228p:plain
 
そして[条件を追加]ボタンをクリックしてください。

 
f:id:yukibnb:20200613174349p:plain
 
以下のように設定してください。

  • 1: D2:E
  • 2: カスタム数式
  • 3: =$B2="sticker"

 
そして最後に[保存]をクリックしてください。

これでB列で"sticker"を選択すると、その行のD列とE列のセルが緑色になります。

 

F・G列に条件付き書式を設定する

f:id:yukibnb:20200613173538p:plain
 
先程と同じように画面上部から[表示形式]→[条件付き書式]の順にクリックしてください。

 
f:id:yukibnb:20200613174228p:plain
 
そして[条件を追加]ボタンをクリックしてください。

 
f:id:yukibnb:20200613174742p:plain
 
以下のように設定してください。

  • 1: F2:G
  • 2: カスタム数式
  • 3: =OR($B2="image",$B2="video")

 
そして最後に[保存]をクリックしてください。

これでB列で"image"か"video"を選択すると、その行のF列とG列のセルが緑色になります。

 

スプレッドシートの下準備完了

f:id:yukibnb:20200613175143g:plain

入力規則と条件付き書式の設定を行い、無事スプレッドシートの下準備が完了しました。

上記GIF動画のようにB列で選択した項目によって、対応する列のセルが緑色になるはずです。
 

  • text: C列が緑色になる
  • sticker: D列とE列が緑色になる
  • image: F列とG列が緑色になる
  • video: F列とG列が緑色になる

 
ここからはLINE BOTに返信させるモノをスプレッドシートに入力していきます。

  

LINE BOTに返信させるモノを入力する

各列の概要を見てみよう

f:id:yukibnb:20200613180119p:plain
 
このスプレッドシートは大きく3種類に分割できます。

A列は人が送信する語句です。

B列はBOTに返信させるモノの種類です。

  • text: 文字(テキスト)を返信する
  • sticker: スタンプを返信する
  • image: 画像を返信する
  • video: 動画を返信する

例えばBOTにスタンプを返信させたい場合、"sticker"を選択してください。

C列はBOTが実際に返信するモノです。

一つの行にC列~G列すべてを入力する必要はありません。

例えばB列で"text"を選択した場合、C列のみ入力します。

入力が必要なセルだけ緑色になるように条件付き書式を設定しましたので、緑色のセルだけ入力してください。

ではBOTに返信させるモノの種類を一つ一つ見ていきましょう。

 

文字(テキスト)を返信させる場合

f:id:yukibnb:20200613181424p:plain

B列で"text"を選択してください。

C列に返信したい文字を入力してください。

吹き出し内で改行したい場合、C列のセル内で改行してください。

【セル内での改行方法】
Windows
Alt + Enter
もしくは
Ctrl + Enter

Mac
Command + Enter
もしくは
Option + Enter

 

スタンプを返信させたい場合

f:id:yukibnb:20200613183557p:plain

B列で"sticker"を選択してください。

そしてD列にPackage ID、E列にSticker IDを入力します。

Package IDとSticker IDって何?と思いますが、簡単なので安心ください。
 

上記2つのPDFはLINE社が公開している、使用できるスタンプリストです。

これらのスタンプリストから使用したいスタンプのPackage IDとSticker IDを確認し、D列とE列に入力するだけでOKです。

 
f:id:yukibnb:20200613182757p:plain

例えばこのスタンプを使用したい場合、Package IDは1、Sticker IDは11です。

そのためD列に"1"を、E列に"11"を入力します。
 

memo

"STKID"は"Sticker ID"のことです。"STKPKGID"は"Package ID"のことです。


 
f:id:yukibnb:20200613183742p:plain

f:id:yukibnb:20200613183831p:plain

このスタンプを使用したい場合、Package IDは11537、Sticker IDは52002738です。

そのためD列に"11537"を、E列に"52002738"を入力します。

 
f:id:yukibnb:20200613184656g:plain

LINE BOTに「おはよう」と送信すると、「おはようございます!」というテキストと共に先程の二つのスタンプを返信させたい場合、このように入力します。

 

画像を返信させたい場合

f:id:yukibnb:20200613185024p:plain

B列で"image"を選択してください。

そしてF列に画像のURL(originalContentUrl)、G列にプレビュー画像のURL(previewImageUrl)を入力します。

 
f:id:yukibnb:20200613185419p:plain

"プレビュー画像のURL"とはLINEのチャット画面に表示される画像のことです。サムネイル画像のようなものですね。

 
f:id:yukibnb:20200613185631p:plain

"画像のURL"とは、チャット画面内の画像(プレビュー画像)をクリックすると表示される実際の画像です。

memo

"プレビュー画像のURL"の最大ファイルサイズは1MB、"画像のURL"の最大サイズは10MBです。

送信できる画像の拡張子はJPG、JPEG、PNGです。
(2020/6/13現在)

あまりこだわりがなく且つ画像のサイズが1MB未満の場合、"プレビュー画像のURL"と"画像のURL"は同じもので構いません。

 
またF列の"画像のURL"、G列の"プレビュー画像のURL"どちらもhttps://sample.com/image.jpgというような.jpg.jpeg.pngで終わるURLを入力する必要があります。

詳しい説明は本記事では省略しますが、「画像URL 作成方法」とGoogle検索すると.jpg.jpeg.pngで終わる画像URLを作成する色々な方法が出てきます。

ちなみに僕は「はてなフォトライフ」というはてなのサービスで画像URLを作成しています。

f.hatena.ne.jp

 

動画を返信させたい場合

f:id:yukibnb:20200613193354p:plain

B列で"video"を選択してください。

そしてF列に動画ファイルのURL(originalContentUrl)、G列にプレビュー画像のURL(previewImageUrl)を入力します。

手順は画像の場合と同じです。

"プレビュー画像のURL"とはLINEのチャット画面に表示される画像のことです。

"動画ファイルのURL"とはチャット画面内の画像(プレビュー画像)をクリックすると表示される実際の動画です。

memo

"プレビュー画像のURL"の最大ファイルサイズは1MB、"動画のURL"の最大サイズは200MBです。

"プレビュー画像のURL"の拡張子はJPG、JPEG、PNGです。

"動画ファイルのURL"の拡張子はmp4です。
(2020/6/13現在)

動画ファイルのURLとはhttps://sample.com/video.mp4というような.mp4で終わるURLを入力する必要があります。

.mp4で終わるURLを作成するのは割と手間ではありますね。

 

一度に返信できるモノは5つ

f:id:yukibnb:20200613195543p:plain

LINE Messaging APIの仕様上、LINE BOTが一度に返信できるモノは最大5つです。(2020/6/13現在)

テキスト・スタンプ・画像・動画の合計が5つ以内である必要があります。

例えば「テキストの吹き出しを4つ、スタンプを2つ同時に返信する」ことはできませんのでご注意ください。

なお5つ以内であれば組み合わせは自由です。

「テキストを1つ、画像を1つ、動画を1つ、スタンプを2つ同時に返信する」ことも可能です。

色々な組み合わせをお試しください。

 

スプレッドシートの準備完了!

f:id:yukibnb:20200613180119p:plain

かなり長くなりましたが、これでスプレッドシートの準備が完了しました!

あとは皆さんご自身で受信語句(A列)、返信させるモノの種類(B列)、返信させるモノ(C列~G列)をどんどん入力してください。

次回はGoogle Apps Scriptを書きます!コピペするだけでできるように紹介しますのでご期待ください。

 
【次回記事はこちら!】
www.yukibnb.com
 

 
【シリーズ目次】
《基本編》
【シリーズ第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)