2020/12/10に記事全体を修正しました。主な修正点は以下の通りです。
- Flex Messageを送信できるように加筆しました。
- 画像やGIF動画を追加・変更しわかりやすくしました。
- 文章を修正し読みやすくしました。
こんにちは！
Yuki (@yukibnb) です。
LINE Messaging APIとGoogle Apps Script (GAS) を使い、スプレッドシートに記載された語句を返信する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)
上記シリーズ記事で紹介したものはテキストのみ返信できるシンプルなものでした。
今回から数話に渡り応用編として、以下5種類の返信ができるLINE BOTの作成方法を紹介します。
- テキスト
- スタンプ
- 画像
- 動画
- Flex Message
完成するとこのようになります。
スタンプや画像、動画、Flex Messageを返信できると、テキストだけの返信よりも表現の幅が広がります。
この記事ではまずスプレッドシートを準備する方法を紹介します。
早速見ていきましょう！
Flex Messageがどういうものかについてはこちらの記事をご覧ください。
おさらい&事前準備
今回紹介する内容は前回の基本シリーズ第1話～第6話の応用です。
スプレッドシートの準備に進む前に以下記事の手順にそって、LINE Messaging APIのプロバイダーとチャネルの作成と、チャネルアクセストークンを発行してください。
【シリーズ第1話】LINE Messaging APIのプロバイダーとチャネルを作成する方法
【シリーズ第2話】LINE Messaging APIのチャネルアクセストークンを発行しよう
以前すでに作成・発行済みの方は同じものを使用しても大丈夫ですし、新たに作成・発行しても大丈夫です。
スプレッドシートを準備する
新規スプレッドシートを作成する
Google Driveにアクセスし、新規スプレッドシートを作成してください。
スプレッドシート名とシート名を記入する
画面上部の[無題のスプレッドシート]をクリックし、お好きなスプレッドシート名を記入してください。
「スプレッドシート名」＝「ファイル名」です。
そして画面下部の[シート1]をダブルクリックし、お好きなシート名を記入してください。特に思いつかなければ[シート1]のままでも構いません。
スプレッドシートIDを確認する
https://docs.google.com/spreadsheets/d/この箇所がIDです/edit
スプレッドシートIDはスプレッドシートのURLの一部分です。
スプレッドシートを開いているウェブブラウザー (Chrome、Firefoxなど) のアドレスバーを見ると、スプレッドシートIDを確認できます。
次回記事で紹介するGoogle Apps Script (GAS) でスプレッドシートIDを使用します。今は確認場所を覚えておいてください。
見出しを作成する
A1～G1セルに上記画像と同じように入力してください。
- A1: 受信語句
- B1: Type
- C1: 返信語句
- D1: packageId
- E1: stickerId
- F1: originalContentUrl
- G1: previewImageUrl
B列に入力規則を設定する
画面上部から[データ]→[データの入力規則]の順にクリックしてください。
するとこのようなポップアップが表示されます。
以下のように設定してください。
- {シート名}!B2:B
- リストを直接指定
- text,sticker,image,video,flex
- 入力を拒否
- [保存]をクリックして設定内容を保存
{シート名}!B2:Bの{シート名}はご自身のシート名に置き換えてください。
僕は"List"というシート名にしたので、画像内では"List!B2:B"となっています。
そして最後に[保存]をクリックしてください。
するとB列に以下のようなプルダウンが表示され、セルをクリックすると選択肢から選べるようになります。
C列に条件付き書式を設定する
画面上部から[表示形式]→[条件付き書式]の順にクリックしてください。
すると右側にこのような画面が表示されます。
以下のように設定してください。
- C2:C
- カスタム数式
=OR($B2="text",$B2="flex")- [完了]をクリックして設定を保存
これでB列で"text"もしくは"flex"を選択すると、その行のC列のセルが緑色になります。
D・E列に条件付き書式を設定する
先程と同じように画面上部から[表示形式]→[条件付き書式]の順にクリックしてください。
そして[条件を追加]ボタンをクリックしてください。
以下のように設定してください。
- D2:E
- カスタム数
=$B2="sticker"- [完了]をクリックして設定を保存
これでB列で"sticker"を選択すると、その行のD列とE列のセルが緑色になります。
F・G列に条件付き書式を設定する
先程と同じように画面上部から[表示形式]→[条件付き書式]の順にクリックしてください。
そして[条件を追加]ボタンをクリックしてください。
以下のように設定してください。
- F2:G
- カスタム数
=OR($B2="image",$B2="video")- [完了]をクリックして設定を保存
これでB列で"image"か"video"を選択すると、その行のF列とG列のセルが緑色になります。
スプレッドシートの下準備完了
入力規則と条件付き書式の設定を行い、無事スプレッドシートの下準備が完了しました。
上記GIF動画のようにB列で選択した項目によって、対応する列のセルが緑色になるはずです。
- text: C列が緑色になる
- sticker: D列とE列が緑色になる
- image: F列とG列が緑色になる
- video: F列とG列が緑色になる
- flex: C列が緑色になる
ここからはLINE BOTに返信させるモノをスプレッドシートに入力していきます。
LINE BOTに返信させるモノを入力する
各列の概要を見てみよう
このスプレッドシートは大きく3つのエリアに分割できます。
A列はユーザー(人)が送信する語句です。
B列はLINE BOTが返信するモノの種類です。
- text: 文字(テキスト)を返信する
- sticker: スタンプを返信する
- image: 画像を返信する
- video: 動画を返信する
- flex: Flex Messageを返信する
例えばBOTにスタンプを返信させたい場合、"sticker"を選択してください。
C～G列はBOTが実際に返信するモノです。
一つの行にC列～G列すべてを入力する必要はありません。
例えばB列で"text"を選択した場合、C列のみ入力します。
入力が必要なセルだけ緑色になるように条件付き書式を設定しましたので、緑色のセルだけ入力してください。
ではBOTに返信させるモノの種類を一つ一つ見ていきましょう。
文字(テキスト)を返信させる場合
B列で"text"を選択してください。
C列に返信したい文字を入力してください。
吹き出し内で改行したい場合、C列のセル内で改行してください。
【セル内での改行方法】
Windows
Alt + Enter
もしくは
Ctrl + Enter
Mac
Command + Enter
もしくは
Option + Enter
スタンプを返信させたい場合
B列で"sticker"を選択してください。
そしてD列にPackage ID、E列にSticker IDを入力します。
Package IDとSticker IDって何？と思いますが、簡単なので安心ください。
https://developers.line.biz/media/messaging-api/sticker_list.pdf
https://devdocs.line.me/files/sticker_list.pdf
上記2つのPDFはLINE社が公開している、使用できるスタンプリストです。
これらのスタンプリストから使用したいスタンプのPackage IDとSticker IDを確認し、D列とE列に入力するだけでOKです。
例えばこのスタンプを使用したい場合、Package IDは1、Sticker IDは11です。
そのためD列に"1"を、E列に"11"を入力します。
"STKID"は"Sticker ID"のことです。"STKPKGID"は"Package ID"のことです。
このスタンプを使用したい場合、Package IDは11537、Sticker IDは52002738です。
そのためD列に"11537"を、E列に"52002738"を入力します。
LINE BOTに「おはよう」と送信すると、「おはようございます！」というテキストと共に先程の二つのスタンプを返信させたい場合、このように入力します。
画像を返信させたい場合
B列で"image"を選択してください。
そしてF列に画像のURL(originalContentUrl)、G列にプレビュー画像のURL(previewImageUrl)を入力します。
"プレビュー画像のURL"とはLINEのチャット画面に表示される画像のことです。サムネイル画像のようなものですね。
"画像のURL"とは、チャット画面内の画像(プレビュー画像)をクリックすると表示される実際の画像です。
"プレビュー画像のURL"、"画像のURL"の最大サイズは10MBです。
送信できる画像の拡張子はJPG、JPEG、PNGです。
(2020/12/10現在)
あまりこだわりがない場合、"プレビュー画像のURL"と"画像のURL"は同じもので構いません。
またF列の"画像のURL"、G列の"プレビュー画像のURL"どちらもhttps://sample.com/image.jpgというような.jpg、.jpeg、.pngで終わるURLを入力する必要があります。
詳しい説明は本記事では省略しますが、「画像URL 作成方法」とGoogle検索すると.jpg、.jpeg、.pngで終わる画像URLを作成する色々な方法が出てきます。
ちなみに僕は「はてなフォトライフ」というはてなのサービスで画像URLを作成しています。
動画を返信させたい場合
B列で"video"を選択してください。
そしてF列に動画ファイルのURL(originalContentUrl)、G列にプレビュー画像のURL(previewImageUrl)を入力します。
手順は画像の場合と同じです。
"プレビュー画像のURL"とはLINEのチャット画面に表示される画像のことです。
"動画ファイルのURL"とはチャット画面内の画像(プレビュー画像)をクリックすると表示される実際の動画です。
"プレビュー画像のURL"の最大ファイルサイズは10MB、"動画のURL"の最大サイズは200MBです。
"プレビュー画像のURL"の拡張子はJPG、JPEG、PNGです。
"動画ファイルのURL"の拡張子はmp4です。
(2020/12/10現在)
動画ファイルのURLとはhttps://sample.com/video.mp4というような.mp4で終わるURLを入力する必要があります。
.mp4で終わるURLを作成するのは割と手間ではありますね。
Flex Messageを返信させたい場合
B列で"flex"を選択してください。
そしてC列にFlex Message SimulatorでエクスポートしたJSONをペーストします。
Flex Message Simulatorの使い方やJSONのエクスポート方法については以下の記事で詳しく解説していますのでご覧ください。
【初心者向け！LINE Bot】Flex Message Simulatorの使い方
C列にJSONをペーストするにはいくつかコツがあります。
セルを編集状態にしてからペーストする
C列のセルをダブルクリックし、セルを編集状態にしてからペーストします。
ダブルクリックではなく、選択したセル上で[Enter]もしくは[F2]をクリックしてもセルを編集状態にできます。
セルを編集状態にせずペーストすると以下のようにきちんとペーストできません。
行の高さを指定する
Flex Message SimulatorでエクスポートしたJSONは何百行もあります。そのためスプレッドシートのひとつのセルにJSONをペーストすると行がものすごく高くなり、とても見にくくなります。
そのため行の高さを指定(固定)することで、何百行もあるJSONをペーストしたとしてもスプレッドシートの見やすさを維持することができます。
JSONをペーストした行番号の上で右クリックします。
今回はC2セルにペーストしたので「2」の上で右クリックします。
[単一行のサイズを変更]をクリックします。
[行の高さを指定する]を選択し、[OK]をクリックして設定を保存します。
JSONをペーストした行(今回の例では2行目)の高さが21ピクセルに固定されたため見やすくなりました。
一度に返信できるモノは5つ
LINE Messaging APIの仕様上、LINE BOTが一度に返信できるモノは最大5つです。(2020/12/10現在)
テキスト・スタンプ・画像・動画・Flex Messageの合計が5つ以内である必要があります。
例えば「テキストの吹き出しを4つ、スタンプを2つ同時に返信する」ことはできませんのでご注意ください。
なお5つ以内であれば組み合わせは自由です。
「テキストを1つ、画像を1つ、Flex Messageを1つ、スタンプを2つ同時に返信する」ことも可能です。
色々な組み合わせをお試しください。
スプレッドシートの準備完了！
かなり長くなりましたが、これでスプレッドシートの準備が完了しました！
あとは皆さんご自身で受信語句(A列)、返信させるモノの種類(B列)、返信させるモノ(C列～G列)をどんどん入力してください。
入力が完了したら次はいよいよGoogle Apps Script (GAS) を書いていきましょう。以下の応用編第2話でGASを使ってLINE BOT実装完了まで紹介していますので、スプレッドシートの準備が完了した方は次回記事へとお進みください。
【次回記事はこちら！】
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に画像やFlex Messageを返信させる方法 (シート準備編)
・【応用編第2話】コピペでOK！スプレッドシートを使ってLINE BOTに画像やFlex Messageを返信させる方法 (実践編)
・【応用編第3話】コピペでOK！スプレッドシートを使ってLINE BOTに画像やFlex Messageを返信させる方法 (解説編: GAS)