「お店の場所はどこ？」店舗名から住所や電話番号、地図を確認したい！知識ゼロから作るLINE Bot

## 方向音痴で移動時はスマホが手放せない
初めて行く場所にはＭＡＰアプリを使って行くけれど、それでも逆方向に進んでしまう、
**極度の方向音痴** の「くま」です。1ヵ月前に訪れた場所も忘れます。小売で働いています。
業務中、店舗移動のたびにＭＡＰアプリを開いて検索して・・・がメンドー。
でもそうしないと、永遠にたどり着けない。
店舗名だけ入力したら、店舗情報を教えてくれるBotが欲しいと思いつきました。

## LINE Botは初心者でも作れる？
思い付いたは良いものの・・・
パソコンスキルは普通。もちろんプログラム知識も、専門用語もさっぱり。

さて、どうやったらBotを作られるか・・・
**無料**でできる範囲で、かつ**数日で基本をつくろう**と決め、作業開始！

## 使用ツール、アプリケーション
- [LINE Developers](https://developers.line.biz/ja/)
- [Make](https://www.make.com/en)
- Google SpreadSheet
- [SSSAPI](https://sssapi.app/)

## 出来た！！！
<img src="https://gyazo.com/8c213768ec98b8b08cde3d2014edacb6.gif" width="30%">

※公開の為、店舗名ではなく東京都の区役所でテスト。
区役所名を送ると、**「住所」「電話番号」「団体コード」** を返し、かつ **ＭＡＰリンク** をボタンで表示。
ボタンを押すと、地図へ移動します。

## 作成の下準備
<font color="Green">以下画像等を折りたたんでいる箇所があります。
▶　をクリックすると展開します。</font>
<font color="Silver">―――――――――――――――――</font>
<details><summary><b>使用ツール、アプリケーションそれぞれに会員登録</b></summary><div>
　<a href= "https://developers.line.biz/ja/">LINE Developers</a><br>
　<a href= "https://www.make.com/en">Make</a><br>
　Google SpreadSheet<br>
　<a href="https://sssapi.app/">SSSAPI</a><br>
</div></details>
<font color="Silver">―――――――――――――――――</font>
<details><summary><b> LINE Developersでは以下が大切</b></summary><div>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667370/54abe222-c764-92d0-8b16-7c8c585f40be.png" width=60%>

1:<b>チャネル基本設定</b>→ページ下部の`ユーザーID`。Makeの設定で使います。
2:<b>Messaging API設定</b>→`Webhook設定`、`チャネルアクセストークン`。これもMakeで使います。
3:<b>チャネル基本設定内のLINE Official Account Manager<b/>→以下画像の通りに実施。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667370/b6587c7b-c51d-8862-b43a-0077e8ef3c07.png" width="60%">
</div></details>
<font color="Silver">―――――――――――――――――</font>

<b>Google SpreadSheetでデータ作成</b>
　ポイントはA列にkeyとなるテキストを入れる事。
<font color="Silver">―――――――――――――――――</font>
<b>SSSAPIでGoogle SpreadSheetをAPIに</b>
　ページの指示通りにすれば、設定はカンタン！！
<font color="Silver">―――――――――――――――――</font>

## Makeで連携
下準備が完了し、Makeで連携作業開始！結論以下のようにつなぎました。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667370/962887a2-0b66-524e-d601-eb30ced31841.png" width=95%">


1.`LINE(watch Events)`：基本的な設定（LINE Developers）
2.`HTTP(Get a file)`：Google SpreadSheetをSSSAPIでJSON形式に変換したAPIへ。
そのURLを以下画像のように設定。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667370/b526a9d7-3ed0-d7d7-b41f-58303faca04e.png" width=60%">
3.`JSON`：HHTPに格納してあるGoogle SpreadSheetの表データを取り込み
4.`分岐（検索文字列有無）`：`routerモジュール`を使用
5.`Apple Map Links`：JSONが保持している情報から、住所情報を取り込み
6.`LINE(合致した場合)_Send a Reply message`：Botで返信する「①テキスト情報」「②地図へのリンク」を設定
7.`LINE(合致しない場合)_Send a Reply message`：該当しない旨のメッセージを返信
　<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667370/10d5ac69-764f-e916-93d6-f3d332e3e35b.png" width=50%">



**▼テキスト情報**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667370/27eca6bf-afa6-3cdb-d918-6b605e4b5723.png" width="50%">
#### ▼地図へのリンク設定（ボタンテンプレート使用）
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667370/fef2c93f-e8be-0ce0-a3c3-f7931e2bca39.png" width="50%">

#### ▼Routerの設定
>1.検索文字列有り
> 　画像下部の`Exists`が「合致した場合」という意味
>　<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667370/9fa8fa09-dfd4-ea50-6f75-e41d00da9bec.png" width="40%">

　２．検索文字列無し
> 　画像下部の`Does not Exist`が「合致しなかった場合」という意味
　<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667370/43471c6e-5f27-6968-8a30-41d9958f8d10.png" width="40%">

## 振り返り
#### **苦労した点**
　**①英語がわからない・・・**
　　翻訳ソフトが手放せない。自身の学力の無さに失望。
　**②Google SpreadSheetをAPIに**
　　これは方法を調べまくってようやくSSSAPIにたどり着き、連携！
　　あきらめかけていたので一番うれしかった！！
　　まぁ、無料アカウントだと最大50行までになるのですが・・・
　**③Map表記**
　　最初は`Google Maps`モジュールでやろうとしたのですが、太刀打ちできず・・・。
　　次に`Apple Map Links`モジュールを使用して、
　　設定はできたと喜んだのもつかの間、
　　返信のURLが長すぎて気に食わず。「**だったらボタンにしよう！**」として、
　　これも1時間程度格闘してようやく完成。

## まとめ
ド素人でプログラミングのプの字も知らない私でも、何とか形にする事は出来ました。
内容は素人感丸出しですが、それでも勝手に**感動**しています。
ただ本当に活用する為には、

>・完全一致ではない場合の返信方法
>・複数候補があった際の返信方法

なども必要ですし、汎用性を上げる為には**位置情報を取得**して、
>・現在地から近い店舗も表示
>・移動手段の提案（徒歩〇分、電車〇分など）

などが出来たらもっと良いだろうなぁ。

最後までお読みいただきありがとうございました！

## 参考サイト

https://qiita.com/ishioka-nozomi/items/1b0720759b0f02c6e5b9

https://qiita.com/boriko/items/93eb0eb15bfd4eff1fbd

https://qiita.com/kira_puka/items/42fa53dd2fa381a742d2