LINE謎の作り方 応用編-後編 メッセージ作成編
更新
ツイート
「謎解きを作って公開してみたい！」と思ったときに、方法の1つとしてLINE謎(LINE謎解き)という公開手段があります。
ここではLINE謎の作り方 応用編-後編 として、メッセージ送信のためのjsonについて解説します。
「記事の通りにしたのに動かないんだけど…」という場合などは筆者までご連絡いただけますと幸いです！
- LINE謎の作り方 前編 アカウント登録編
- LINE謎の作り方 後編 応答bot設定編
- LINE謎の作り方 応用編-前編 api連携初期設定編
- LINE謎の作り方 応用編-後編 メッセージ作成編←今この記事！
スプレッドシートの読み書き方法
ステータスタブ
- ユーザID：知らん。
- 名前：unknown(or ユーザー名)。
- ステータス：自動応答タブと連携。現在ユーザーがどのステータスにいるか。いざというときはスプレッドシートを書き換えることで上書きできる。
- 最終メッセージ：ユーザーが最後に送信したメッセージ。
- トークン：知らん。
- 送信時刻：ユーザーがメッセージを送った時間を何か処理した数字。
- 処理時刻：apiで返信した時間を何か処理した数字。
自動応答タブ
「ステータスで現在のユーザーのステータスを判定し、キーワードに一致する文字列が入力されたら、メッセージに書いてあるメッセージを返答し、処理後ステータスに移行する」という仕組みになっています。
複数の条件に当てはまる場合は上にある行が優先されます。
- ステータス：現在のユーザーの状態を分かりやすく表す文字列だと良さそう。(例：「q01」「05a」など)
初期状態は「Init」です。
(2022/04/28追記)正規表現を使用するようApp Scriptの記述を変更したので通常は「^q01$」のような記述をしておくのが無難です。 -
キーワード：正規表現でメッセージとして入力してほしいキーワードを入力する。以下基本的なものだけ。それ以外は逆引き正規表現を参照してください。
- ^aaa$：「aaa」のみ受け付ける。
- ^(aaa|AAA)$：「aaa」「AAA」のみ受け付ける。表記揺れ対応とか。
- ^.*$：すべて受け付ける。間違い用とか。
- メッセージ：送りたいメッセージをjson形式で送信する。
この記事はこのjson形式の解説がメインなので、読み進めてください。 - 処理後ステータス：ユーザーの入力後の状態を分かりやすく表す文字列だと良さそう。(例：「q02」「06b」など)
前提として・必須サイト
公式リファレンス
公式のリファレンスページです。
記述のことに関しては(分かりやすいかは別として)全てここに載っています。
最終的には公式が正義です。
Flex Message Simulator
カルーセルやバブルといったFlex Messageを作成する時に便利なシミュレーターです。
Flexやカルーセルを一から自分で書くのは正直しんどいので使いたい人は意地張らずに使いましょう。
初めて入ろうとする場合はLINE Business IDを聞かれます。
メッセージサンプル
基本的には公式リファレンスページを見ていただいた方が良いですが、この記事ではLINE謎で多く使用されると思われるメッセージのjsonサンプルを記載していきます。
基本テキスト・画像
一番基本となる、テキストや画像です。
画像は事前にwebに上げておく必要があります。
>>画像上げる用のHPを持っていない
{
"type": "text",
"text": "こんにちは"
}
{
"type": "image",
"originalContentUrl": "https://shiwehi.com/common/img/icon.png",
"previewImageUrl": "https://shiwehi.com/common/img/icon.png"
}クイックリプライ
クイックリプライは簡易的な返信機能です。
ストーリーを進めるために入力してもらう必要がある場合に入力の手間が省けるためユーザビリティが高いです。
また「【XXXX】と入力してください」のようなメッセージを出す必要が無くなるため、雰囲気も壊しません。
{
"type": "text",
"text": "明日遊びに行っても良い？",
"quickReply": {
"items": [
{
"type": "action",
"action": {
"type": "message",
"label": "いいよ！",
"text": "いいよ！"
}
},{
"type": "action",
"action": {
"type": "message",
"label": "だめだよ！",
"text": "だめだよ！"
}
}
]
}
}ボタン選択
ボタンをより強調したい場合はクイックリプライよりこちらのが良いでしょう。
{
"type": "flex",
"altText": "謎解きは好きですか？",
"contents":{
"type": "bubble",
"body": {
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "text",
"text": "謎解きは好きですか？",
"wrap": true
}
]
},
"footer": {
"type": "box",
"layout": "horizontal",
"contents": [
{
"type": "button",
"action": {
"type": "message",
"label": "はい",
"text": "はい"
},
"color": "#ED2453",
"style": "primary"
},{
"type": "button",
"action": {
"type": "message",
"label": "いいえ",
"text": "いいえ"
},
"style": "primary",
"color": "#523EFF"
}
],
"spacing": "5px"
}
}
}Flex
画像+テキスト+ボタンの使いやすい形です。(このサンプルはテキスト無しです。)
{
"type": "flex",
"altText": "あなたは【会社員】タイプです！",
"contents": {
"type": "bubble",
"hero": {
"type": "image",
"url": "https://shiwehi.com/ownwork/seikaku/img/o.png",
"aspectRatio": "16:9",
"aspectMode": "cover",
"position": "relative",
"size": "full"
},
"footer": {
"type": "box",
"layout": "vertical",
"spacing": "sm",
"contents": [
{
"type": "button",
"style": "primary",
"height": "md",
"action": {
"type": "message",
"label": "もう一度遊ぶ",
"text": "診断スタート"
},
"color": "#cc0044"
},{
"type": "button",
"style": "primary",
"height": "md",
"action": {
"type": "uri",
"label": "結果をツイート",
"uri": "https://x.gd/hcBgK"
},
"color": "#00acee"
},{
"type": "spacer", "size": "sm"
}
],
"flex": 0
}
}
}カルーセル
横並びになってるよく見るやつです。
{
"type": "template",
"altText": "AltTextサンプル",
"template": {
"type": "carousel",
"actions": [],
"columns": [{
"thumbnailImageUrl": "https://shiwehi.com/common/img/icon.png",
"title":"私営謎屋敷",
"text":"しゑひさんの運営している謎解きサイト",
"actions": [{
"type":"uri",
"label":"詳細を見る",
"uri":"https://shiwehi.com"
}]
},{
"thumbnailImageUrl": "https://shiwehi.com/common/img/icon.png",
"title": "テトリス堂",
"text": "しゑひさんの運営しているテトリスサイト",
"actions": [{
"type":"uri",
"label":"詳細を見る",
"uri":"https://shiwehi.com/tetris/"
}]
}]
}
}よくある質問
- 送っても返事が来ないんだけど？
-
どこかでミスをしています。
前ページのサンプル時点で返事が来ないのであれば、それまでの設定で、前ページのサンプルでは返事が来ているのに返事が来ないのであれば、スプレッドシートの記述でミスをしています。
後者の場合は殆どがjsonの記述ミスですが、原因としては以下が考えられます。
- jsonの記述ミス：カッコの閉じ位置が違う,カンマが足りない,記述の位置が異なっている…
- 存在しないURL：『uriの部分のurlを仮で入れとこう』とか『まだ画像できてないから先にURLだけ指定しておこう』ってやると起きる。文法はどこも間違っていないから気付きにくい。
- ステータスミス：現在の自分のステータスと記述したステータスが異なる。
→ステータスシートのC列を書き換えることで無理やりステータス変更をすることができます。 - 正規表現ミス：反応条件のためのキーワード(自動応答タブB列)の正規表現が誤っている。
- 画像上げるHPやサーバーなんて持ってないよ…。
-
TwitterやDropboxに画像を上げることで対応できます。
- Twitterの場合：普通に上げて、画像のURL(https://pbs.twimg.com/〜)を取得して使用してください。画像用の(公開)アカウントを作成すると良いでしょう。
{ "type": "image", "originalContentUrl": "https://pbs.twimg.com/media/FQJ5Cs0VcAEF2aa?format=jpg&name=medium", "previewImageUrl": "https://pbs.twimg.com/media/FQJ5Cs0VcAEF2aa?format=jpg&name=medium" } - Dropboxの場合：Dropboxに画像を上げた後、「Dropboxリンクをコピー」等で共有URLを取得してください。
共有URLの「www.dropbox.com」を「dl.dropboxusercontent.com」に書き換えることで画像のリンクとなります。{ "type": "image", "originalContentUrl": "https://dl.dropboxusercontent.com/s/kbbjznd0gygl4z1/icon.png?dl=0", "previewImageUrl": "https://dl.dropboxusercontent.com/s/kbbjznd0gygl4z1/icon.png?dl=0" }
- Twitterの場合：普通に上げて、画像のURL(https://pbs.twimg.com/〜)を取得して使用してください。画像用の(公開)アカウントを作成すると良いでしょう。
- スプレッドシートって改行できなくない？
-
「Alt+Enter」(Macの場合は「option+Enter」)で改行できますが、エディタで作成してコピペをお勧めします。
そもそも改行しなくても動くんですけど、通常のプログラムと異なりLINE上でエラーを確認しにくいので改行やインデント送りを使用しています。
そのため、できればjsonの構文エラーがすぐ分かるエディタ(Visual Studio Codeとか)を使用するとミスに気付きやすくて良いと思います。
- メッセージを2つ以上まとめて送りたいんだけど…。
-
「,」を付けて繋げることで最大5メッセージまで送ることができます。
{ "type": "text", "text": "メッセージ1つ目" }, { "type": "text", "text": "メッセージ2つ目" }
- Flex Message Simulatorで作ったのをコピペしたのに動かない！
-
微妙に外側の記述が足りていない可能性があります。
Flex Message Simelatorは使用するテンプレートによって微妙に外側が欠けた状態(ピンク部分)しかくれないので、その場合は自分で外側の記述を足す必要があります。
シミュレーターで作成した場合、一番外側の要素のtypeが"flex"か"carousel"になっていなかったら怪しいと思ってください。
{ "type": "flex", "altText": "AltTextサンプル", "contents": { "type": "bubble", "hero": { "type": "image", 〜〜〜〜〜（中略）〜〜〜〜〜 "size": "sm" } ], "flex": 0 } } }
- どれくらいの人数まで耐えれるんですか？
-
無料プランだと20,000応答/日です。
公式ページによれば、今回使用しているURL Fetch callsは以下のように上限が設けられています。
- 無料のGoogleアカウントユーザー：1日20,000回
- 有料のGoogle Workspaceユーザー：1日100,000回
そのため、クリアまでに20応答必要なLINE謎では、1日で1,000ユーザーまで(無料ユーザー)が限界で、上限回数を超えてしまうと公式LINEから返信が来なくなってしまうということです。
応答回数が多い場合などは注意してください。
- ステータスの状態に関係なく同じ返信はできないんですか？(「いつ『リセット』って入力してもリセットできる」みたいな)
-
「ステータス」の部分に「^.*$」と記述することで対応できます！
2022/04/28 如月一さん(@katteniittero)に情報提供いただきステータスも正規表現できるよう書き換えました！ありがとうございます！
現状、すべてのステータスに対して頑張って記入してもらう方法を取っていただくしか知りません。申し訳ないです。
どなたか分かる方がいらっしゃいましたらご教授をお願いいたします。
まとめ
- ちょっと頑張ればそこそこ強いLINE謎を作ることができる。
- 分岐が多いとスプレッドシートの管理が大変になってくる。
ここまで読んだ方なら、もう強めのLINE謎を公開できると思います！
ぜひ自分の愛情のこもった作品を作って公開してください！
ちなみに筆者が作成した強めのLINE謎はこちらです！良かったら遊んでみてください！
↓↓↓この記事をシェア↓↓↓
ツイート