コロナ禍だから何かできることをー　街クエ　ー

#まえがき
コロナ禍において、旅行にも行けない。

休みは家でじっとしている。
そんな日々をお過ごしでしょうか。

子供たちにおいても、子供時代の貴重な経験や体験もできない。
自治体などのイベントも中止。

なにもできない・・・。

そんな時にふと思いついたアイデアです。

##コンセプト

コンセプトは、
<strong>「歩ける範囲がテーマパーク」</strong>
です。

・ベースはウォークラリー
・クイズを入れてもOK
・最終ゴールのご褒美は近所のクーポン券

いつでも、だれでも、どこでもできます。
まずは、コンセプトムービーをどうぞ。

####コンセプトムービー
音なし
<iframe width="560" height="315" src="https://www.youtube.com/embed/fa0BLka32tI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
正直、この仕組みはいまさら感もあるのですが興味がある方は続きをどうぞ。

##利用方法

・LINE Botの自動返答機能を利用します
・チャンネル登録をしたときの返答が第一問
・一問目の答えを返すと二問目の問題を返す
・二問目の答えを返すと三問目の問題を返す
・設定した分だけ続けていきます
・最後の答えを返すと、終了のメッセージと商品となるクーポンイメージを返す

####この仕組みのいいところ
・応答メッセージしか使わないので基本無料で実装できます。
・プログラムを書かなくてもいいので、気軽にできます。

####しかし思わぬ落とし穴が！！
応答メッセージには順番を決めることができないので、仮に途中の問題の答えがヒットしてしまうと間の問題が飛ばされてしまう欠点があります。

##LINE Botの仕組み
####LINE Botの説明動画

<iframe width="560" height="315" src="https://www.youtube.com/embed/Ud2g1kGREVA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
LINE Botの仕組みを簡単に動画で説明します。
厳密にはLINEBotというより、LINE公式の登録と設定になります。

####料金について

#####料金プラン
[https://www.linebiz.com/jp/service/line-official-account/plan/](https://www.linebiz.com/jp/service/line-official-account/plan/)

||フリープラン|ライトプラン|スタンダードプラン|
|:-:|:-:|:-:|:-:|
|月額固定費|無料|5,000円|15,000円|
|無料メッセージ通数|1,000通|15,000通|45,000通|
|追加メッセージ料金|不可|5円|～3円<br>※詳細は[こちら](https://www.linebiz.com/sites/default/files/media/jp/docs/line-official-account-price-table.pdf)よりご確認ください。|

#####有料の定義
![システム構成.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/744261/5423d9b2-ec22-f9a3-b835-908ea8a8914b.jpeg)

・スマホから通知されたものに返答することは無料対象の通知
・チャンネルから各スマホへ送信は有料対象の通知

また、有料対象の通知は端末ごとに1通とカウントします。

１メッセージを１０端末で１０回となります。







#下準備をしよう
街クエの仕組みを作るにあたり、問題から答えのルートを考えます。
地図を見ながら自分の近所を題材に、歴史や隠れ〇〇や、クイズになりそうなものを調べて作っていきます。

###今回の設定
今回は地元の小ネタより、だれでもわかるように愛知のテーマパーク「レゴランド」を題材にしてみました。

レゴランドを上から見るとこのようになっています。
![レゴランド - コピー.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/744261/03dd12a4-7270-d9ba-c46b-be4154a500fc.jpeg)
ここからルートを考え、クイズになりそうなものを見つけていきます。

####今回のクイズはこのように決めました。

<dl>
<dt>① 入口で迎えてくれる動物は何でしょうか</dt>
<dd>
<font color="#f00">A.恐竜</font>
</dd>
<dt>② レゴランドファクトリーツアー建物の２階にいるキャラクターでどんなスポーツをやっているでしょうか</dt>
<dd>
<font color="#f00">A.野球</font>
</dd>
<dt>③ サブマリン・アドベンチャーの潜水艦の色は何色でしょうか</dt>
<dd>
<font color="#f00">A.黄色</font>
</dd>
<dt>④ ミニランドにある渋谷はいくつでしょう</dt>
<dd>
<font color="#f00">A.601</font>
</dd>
<dt>⑤ ロスト・キングダムのファラオ前にいる荷物を引いている動物は何でしょうか</dt>
<dd>
<font color="#f00">A.ラクダ</font>
</dd>
<dt>⑥ スタジオストア前にある噴水にはオウムが何羽いるでしょうか</dt>
<dd>
<font color="#f00">A.３羽</font>
</dd>
<dt>⑦ PALACE CINEMA前にいる女優は〇〇・モンロー</dt>
<dd>
<font color="#f00">A.マリリン</font>
</dd>
<dt>⑧ ナイト・テーブルレストラン前にいるコックの服の色は</dt>
<dd>
<font color="#f00">A.緑</font>
</dd>
<dt>⑨ WALK THE PLANK SNACKSの看板にいる船長が持っているものは、ジョッキと何</dt>
<dd>
<font color="#f00">A.フォーク</font>
</dd>
<dt>⑩ チキン・ダイナーの看板にあるCはどんな動物</dt>
<dd>
<font color="#f00">A.ニワトリ</font>
</dd>
</dl>

####自動応答メッセージの設定

この問題を自動応答メッセージに登録してみます。

|要求(Request)|応答(Response)|
|:---|:---|
|チャンネル登録|問題です。<br>入口で迎えてくれる動物は何でしょうか|
|「恐竜」|問題です。<br>レゴランドファクトリーツアー建物の２階にいるキャラクターで<br>どんなスポーツをやっているでしょうか|
|「野球」|問題です。<br>サブマリン・アドベンチャーの潜水艦の色は何色でしょうか|
|「黄色」|問題です。<br>ミニランドにある渋谷はいくつでしょう|
|「601」|問題です。<br>ロスト・キングダムのファラオ前にいる荷物を引いている動物は何でしょうか|
|「ラクダ」|問題です。<br>スタジオストア前にある噴水にはオウムが何羽いるでしょうか|
|「３羽」|問題です。<br>PALACE CINEMA前にいる女優は〇〇・モンロー|
|「マリリン」|問題です。<br>ナイト・テーブルレストラン前にいるコックの服の色は|
|「緑」|問題です。<br>WALK THE PLANK SNACKSの看板にいる船長が持っているものは、ジョッキと何|
|「フォーク」|問題です。<br>チキン・ダイナーの看板にあるCはどんな動物|
|「ニワトリ」|お疲れさまでした<br>クーポン情報を表示|

#LINE公式登録アカウントの設定（登録）

###ログインの方法

LINE Official Account Manager
[https://manager.line.biz/](https://manager.line.biz/)
サイトへアクセスします。

![login.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/744261/be699dd3-e6a3-e9fd-befe-a2db750bf349.png)
LINEアカウントでログインを選びます。

![login2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/744261/03963341-1ad5-d4bb-6542-b6926180e452.png)
QRコードログインを選びます。

![qr.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/744261/f28c9b64-f48e-e470-dc65-ccbf7e0d6ecb.png)
スマホからLINEを開き、友達追加のQRコード読み込みをします。

![qr-scan.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/744261/5dddcfa0-6264-12c6-7ccd-b3c58895dc1e.png)

###チャンネルの作成方法

![01.TOP.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/744261/4aca7a70-96ad-72f3-b940-1d00cb8f6868.png)
左メニューの作成をクリックします。

![02.TOP.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/744261/c463f703-c360-4948-7101-d972f5adad3b.png)
必須入力を適切に入力し、確認をクリックします。
画面を確認し、次へを処理していきます。

![05.TOP.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/744261/f0522569-0020-d481-85c7-e097dec7f6e6.png)

同意ボタンを押したらチャンネルアカウントの完成です。




#LINE公式登録アカウントの設定（設定）

先ほど決めたルールを適用します。
その前に、チャンネル登録されたタイミングで、あいさつ文と第一問を返信するための設定を”あいさつメッセージ”に設定します。

###あいさつメッセージの作成
トークルーム管理＞あいさつメッセージを開きます。

【リクエスト】

>チャンネル登録

【レスポンス】

>{Nickname}さん
>
>よこそ。{AccountName}へ。
>
>さっそくですが、問題です。
>入口で迎えてくれる動物は何でしょうか

![08.あいさつメッセージ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/744261/3b431105-f06b-1449-a49c-043b29a9ec01.png)


###応答メッセージの作成
![10.応答メッセージ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/744261/8932f190-842c-8fbd-d4d4-2560947cccb3.png)
デフォルトのメッセージは必要ないので削除します。
右上の作成から追加をしていきます。

【リクエスト】

>恐竜

【レスポンス】

>{Nickname}さん
>
>よこそ。{AccountName}へ。
>
>問題です。
>レゴランドファクトリーツアー建物の２階にいるキャラクターで
>どんなスポーツをやっているでしょうか

![11.応答メッセージ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/744261/74880f13-0b26-5072-80fc-59be73aafc79.png)

<dd>
</dd>

これを全問繰り返します。
![リスト.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/744261/f2698116-b1bf-093e-dc38-3caee22c2b80.png)
####はずれがあってもいいかも

キーワードを指定しない状態の応答メッセージを作って、登録しておけば、キーワード以外の文字は全てはずれにできます

![はずれ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/744261/5a6e0ba8-83a0-b814-0bd6-2cfd73537700.png)


####最後のレスポンス

最後だけ少し特殊です。
まず、２個のメッセージを返す。これは下の方の追加を押せばできます。
次にクーポンを表示これは、クーポンの設定をした後に選択すればできます。

![最後のレスポンス.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/744261/ae170963-0a81-2550-800b-978c86f2f17b.png)

####クーポンの作成
クーポンはツール＞クーポンから作成できます。
画面の指示に従って、入力したあと保存すれば作成できます。

![クーポン.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/744261/813443e6-20dd-4601-33b4-4edf55ca178e.png)


ここまでで、設定等の完了です
実際に動かしたイメージです
![一覧.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/744261/6181fb32-904c-7574-8f2b-d95e9fd52a72.jpeg)

#イベントの告知方法

左メニューの友達を増やす＞友達追加ガイドをクリックします。
![99.友達追加.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/744261/bd8b7f7c-15f6-6068-31f4-24e1e4d447e5.png)

宣伝方法は色々ありますが、QRコードをLINEで読み取ってもらう方法が一番簡単です。

ロゴガイドライン
[https://www.linebiz.com/jp/logo/](https://www.linebiz.com/jp/logo/)

#さいごに

今回の部分は、非エンジニアでコードが書けなくてもできる仕組みの説明をしました。
応答メッセージには順番を決めることができないので、
仮に途中の問題の答えがヒットしてしまうと間の問題が飛ばされてしまう欠点などがありましたが、
この辺りはプログラムを組んで解決することも可能です。

#今後の展開
###プログラミングで広がる範囲
・問題を順番に答えることができるようになる。
・チャンネル登録の開始から終了までの時間を測ることができるため、ランキングがつけれる