自分だけの観光情報を作成！？駅名を入力すると自分で作成した観光情報を返してくれるLINEBotを作成してみた！

## いろんな土地をめぐり自分だけの観光情報を作りたい
みなさんこんにちは。知らない駅で降りてぶらり旅をするのが大好きな社会人yatです！🚄
<br>
私は普段、ぶらり旅をしているのですが降りる駅は決めずにランダムに決めた駅を観光したりしています。その時の自分ルールとして **「インターネットに書いてある観光情報は一切見ずに旅をする」** ということを決めて歩いています。自分で歩いて見つけたものを自分だけの観光情報としてデータに残しています。

## そうだシステムを作ろう！🤖 
残した観光情報をもとに観光をしたいのですが、パソコンの中にデータを残しているのですぐにデータにアクセスして観光情報を調べることができない状態となっています・・・


<br>

そこで私は **自分で作った観光情報を駅名を入力するだけで作成した観光情報を返してくれるLINEBot** を作ったらどこでもすぐに検索できて便利じゃないか！と思い今回そんなシステムをつくってみることにしました。

## やりたいこと

(1)
駅名を入力する

↓(データにない場合) 

新規登録する

(2)
駅名を入力する

↓（データにある場合）

記入してある観光情報を返す

## LINEBot完成


<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">駅名を入力したら、観光情報を返してくれるBotを作ってみた！<br>データにない駅だと、データを作成するようにしてみました～～<a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a> <a href="https://twitter.com/hashtag/LINEBot?src=hash&amp;ref_src=twsrc%5Etfw">#LINEBot</a> <a href="https://twitter.com/hashtag/Bot?src=hash&amp;ref_src=twsrc%5Etfw">#Bot</a> <a href="https://twitter.com/hashtag/%E5%88%9D%E4%BD%9C%E6%88%90?src=hash&amp;ref_src=twsrc%5Etfw">#初作成</a> <a href="https://twitter.com/hashtag/%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0?src=hash&amp;ref_src=twsrc%5Etfw">#システム</a> <a href="https://t.co/5J3XBIgDrD">pic.twitter.com/5J3XBIgDrD</a></p>&mdash; 大和 (@Hd3KETe5R885059) <a href="https://twitter.com/Hd3KETe5R885059/status/1721953778298175935?ref_src=twsrc%5Etfw">November 7, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<br>

完成品がこちらです！駅名を入力したら自分で作った観光情報を返してくれました！！
感動～～😭😭


## みなさんに今回作成したシステムの作り方を教えます！🎓

私が開発するにあたって **使用したツール**、**開発手順**を伝えます。
簡単にできるので真似してみてください😁

:::note info
目次
1.開発手順
2.早速開発していこう！！🔥
3.今回できなかったこと
4.最後に
:::

## 使用したツール
- [Make](https://www.make.com/en)
- [LINEdevelopers](https://developers.line.biz/ja/)
- Googleスプレッドシート
- LINE

**たったこれだけ！？** 

そう思いますよね。私もそう思いました。けれどこれだけでさっきの観光情報を返してくれるシステムが作れちゃうんですよ。


### Makeについて

そもそもMakeを知らない人が多いと思います。Makeとはノーコード（いわゆるプログラミング言語）を書かないでシステムを作れてしまうすごいものです！
（Makeをもっと知りたい方はこちらを確認ください。）
[ノーコードで利用可能なMake（旧：Integromat）のご紹介。サービスの垣根を越えて自動化](https://kiko-an.com/nocode-make-integromat/)

## 1.開発手順

Makeについてわかったところで皆さんに開発内容をお伝えしたいと思います。

#### 準備.Googleスプレッドシートの作成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3579182/68adbbaa-b0f6-b6fc-5396-1742eb1a49f5.png)

添付の画像のように[A列]に駅名、[B列]に所在地、[C列]に観光名所を入力したシートを作成します。

#### 準備.LINEdevelopersの登録/LINEbotの作成

LINEdevelopersとは一言でLINE連携できるサービスを作れるサイトのことです！
[詳しく知りたいかたはこちらを参照ください]
登録が完了してチャネルの作成が完了したら準備完了です！

## 2.早速開発していこう！！🔥

ここからは先ほどお話したMakeをメインに開発を行っていきます。
Makeで作っていく画面のことを**シナリオ**というのですが、今回私が作成したシナリオがこちらになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3579182/90bf3311-1c50-452c-a84c-84955c7dc952.png)




かなりシンプルですよね（笑）
この丸い形をしているアイコンのことを**モジュール**といいます。
これで作れちゃうのがほんとに驚きです。
続いては中身を説明していきましょう。

## 返答メッセージ

返答メッセージ①の中身を見てみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3579182/7cee7c4a-5659-9da9-429c-29d23cd9ff56.png)

これはLINEで送信したメッセージに対してBotが返してくれるメッセージを設定しています。
今回は[Text形式]で返信してくれるように作成しています。

同様に返答メッセージ②③④⑤も作成していきます。

## 条件分岐

これが今回の**一番のポイント**になります。⭐⭐

まず条件分岐とは「ある条件が満たされているかどうかによってその後の行動を変化させること」を指します。
<br>

今回のシステムは下記条件で分岐を行っています。
LINEで駅名を送信し、送信されたデータとGoogleスプレッドシートに格納されているデータが

- 一致する駅名が存在する場合
    - 県名がある**かつ**観光名所もある
    - 県名がある**かつ**観光名所がない
    - 県名がない**かつ**観光名所がある
    - 県名がない**かつ**観光名所もない
- 一致する駅名が存在しない場合

この5個の条件で作成を行いました。


### 一致する駅名が存在する場合

条件分岐の中身は似ているため、一つだけ中身をみていきたいと思います。

- 県名がある**かつ**観光名所もあるの場合

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3579182/16b865ad-ae91-0416-054b-acd75ded21ff.png)

中身を説明すると

:::note info
- GoogleスプレッドシートのB列にデータがあること
　**かつ**
- GoogleスプレッドシートのC列にデータがあると
　**かつ**
- LINEの送信メッセージとGoogleスプレッドシートのA列にデータが一致すること
:::

この条件に当てはまるときに返答メッセージ①を返すようにできます。
これで条件分岐はマスターで来ましたね🤩

これでもう駅名を入力すると自分で作成した観光情報を返してくれるシステムがほぼ完成です。
おめでとうございます！！👏

:::note warn
そのほかの条件も記しておきます。
～条件①～
- GoogleスプレッドシートのB列にデータがあること
　**かつ**
- GoogleスプレッドシートのC列にデータがないこと
　**かつ**
- LINEの送信メッセージとGoogleスプレッドシートのA列にデータが一致すること

～条件②～
- GoogleスプレッドシートのB列にデータがないこと
　**かつ**
- GoogleスプレッドシートのC列にデータがあること
　**かつ**
- LINEの送信メッセージとGoogleスプレッドシートのA列にデータが一致すること

～条件③～
- GoogleスプレッドシートのB列にデータがないこと
　**かつ**
- GoogleスプレッドシートのC列にデータがないこと
　**かつ**
- LINEの送信メッセージとGoogleスプレッドシートのA列にデータが一致すること
:::

### 一致する駅名が存在しない場合

自分が降りた駅名をスプレッドシートに記入しなければいけないのはめんどくさいですよね。
そこで以下の条件の場合、LINEの送信メッセージを**A列の駅名に追加する**ように作成しました。

:::note info
条件分岐
- LINEの送信メッセージとGoogleスプレッドシートのA列にデータが一致しないこと
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3579182/a789c09d-b6c0-8a0c-6f09-39e99720902d.png)

GoogleSheetモジュールでLINE送信されたテキストをA列に格納するというシステムにしています。

これにて自分で作成した観光情報を返してくれるBotの完成です。
お疲れ様でした😋😋

## 参考資料
①[プログラミング未経験者歓迎! Makeで作るノーコードLINE Bot入門](https://www.youtube.com/watch?v=LjN0VW1bg5w)
②[ノーコードツール（Make:旧Integromat）を使ってユーザー登録用のLINE botを作ってみた](https://dev.classmethod.jp/articles/make-line-bot/)

①はユーチューブ動画となっており、丁寧にMakeを利用したLINEBotの作成の仕方を開設してくれます。
②は今回使用した**条件分岐**、**スプレッドシートへのデータの追加方法**について教えてくれています。

ぜひ参考にしてみてください。

## 3.今回できなかったこと

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3579182/00aeaefa-30b6-2d9d-6485-0804e318be0c.png)


今回できなかったことをフローチャートにしてみました。

:::note warn
**【駅名データがある場合】**
駅名を入力する
⇒（データがある場合）駅名に紐づくデータを返す
⇒終了

**【駅名データがない場合】**
駅名を入力する
⇒（データがない場合）駅名データを追加する
**⇒保存するかどうかを求められる**
⇒（保存する場合）YESと入力
⇒終了
⇒（保存しない場合）NOと入力
⇒先ほど追加した駅名データを削除する
⇒終了
:::

理想はこのようにLINE Botが応答したテキストに対して追加で返答できる仕組みを作りたかったのですが、その技術を調べきれなかったため、1アクション1レスポンスという内容になりました。
わかりずらかったらすみません、、:sob:

今回は限られた時間での作成だったため、テキスト情報だけにしてみましたが、次回作成する際は画像や動画情報を返してくれるLINEBotを作成しようと考えています。:sunglasses:

# 4.最後に
今回作成したシステムは本当に簡単に作ることができてこんなに簡単だとは思いませんでした。😂
観光情報を返してくれるシステムは私の趣味に合わせたものでしたが、自分に好きなものに置き換えてつくってみるのもありかもしれないですよ

開発はノーコードで行えるので正直アイデア次第でどんなものでも作れる感じがしました。
次回作成するときはもっと凝ったものを作りたいなと思います。
みなさんも一緒にいろんなものを開発してみましょう！😊

ここまで読んでいただきありがとうございました。