【Make】車での旅行・出張の際に役に立つ！？【LINE Bot × google Maps】

## 
こんにちわ。皆さん旅行は好きですか？

今回【Make】で作成した【LINE Bot × Google Maps】を使えば
主張先や旅行先で役に立つかもしれません！？
複雑なシナリオは必要ありません！初心者でも作りやすいと思います！
今回は、広大な大地に住む私が旅行先で感じたことをヒントに作成しております。

広大な土地・のどかな田舎へ行くと、商業施設などが少なくひたすら道路と景色が広がっている道路を走り続ける事、ありますよね？
そんな時に車のガソリンが底をつきそう！次のガソリンスタンドまで持つだろうか・・と不安になることないですか？

そんなときに位置情報を送るだけで、
近くのガソリンスタンドを教えてくれるLINE Botを作ってみました。

## 使用するツール（用意するもの）

・`Make (integration)`
・`LINE`
・`Google Maps API`

## 参考情報と注意点

https://qiita.com/Haruka-Ogawa/items/997401a2edcd20e61037

:::note warn
注意
Google Maps APIはキーの取得にクレジットカードの登録が必要となります。
無料で使用できる枠がありますが、それを超えると利用料金を支払う必要があります。
個人で検証などに利用する範囲であれば、無料枠を超えることはなさそうですが、
念のため、APIの割り当て上限を設定することをお勧めします。
:::


## 複雑なシナリオは必要ありません！
![完成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775201/bc36ae56-cab1-2b94-8579-6848e688ad54.png)

こちらが完成形のシナリオのイメージになります。
何だかとっても簡単そうですよね！
それでは作り方に続いていきます。

## LINE Botを作成するために
まずはLINE Developersで設定が必要です。
こちらの参考情報を見ながら完了させましょう！

https://qiita.com/kuma_ssss/items/71ed5ffb3596abffbb29



## LINEでオウム返しBotを作成
続いて、LINE Botでオウム返しを作成しましょう。
こちらは、今回の土台となる部分です。
"**位置情報を受け取るトリガー部分**"とその位置情報を元に得た情報を"**返してくれる機能**"を先に実装していきます。
参考情報が続いていますが、見ながら作成してみてください！
また、作成が完了した後は一度オウム返しが正しく機能しているか試してみましょう！
後にエラーが発生した際に、どこで問題が起きているのか原因がわかりやすくなります。

https://note.com/nocode_dev/n/nb2d4e39eb25f

## いよいよGoogle Mapsモジュール

Google Mapsモジュール(Search For Place)を使用することで、施設や有名スポットなど様々なカテゴリを使用して場所を検索できます。検索する条件はいくつかあるのですが、今回は「位置情報から指定した範囲内の特定の施設を検索」することが出来る `By Nearby Search` を使用していきます。


①LINEのWatch Event（ユーザーから位置情報を受け取る）
②Google Maps Search For Place　で受け取った位置情報を元に範囲内の施設を検索
③検索した施設情報をLINE Send a replay　で返してもらう。

ここまでが出来るように作成していきます。それでは以下が作成手順です。

Make シナリオの下にある　`add`　からモジュールを追加します。
`Google Maps` を選択し、 `Search For Places`　で作成します。
画像のように先ほど作ったオウム返しBotの間に配置して繋げます。

![まずはプレイス.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775201/f97ef848-b24d-6739-427c-6f93cd4a7a26.png)
次に `Google Maps` の詳細を設定していきます。
`Connection` のところの `add` を押すと `Create a connection` が出てくるので
`API Key` のところへ事前に準備してある `Key` を入れて `Save` で保存。
※ `Connection name` は任意の名前　そのままでもわかりやすいのに変えてもOK！

`Find Places` は `By Nearby Search` を選択します。
`Latitude` と `Longitude` は画像のように設定下さい。
これがLINEで送信した位置情報になります。

`radius` は検索する半径（メートル）の数値です。
"50000"（50km）まで任意の数値を入れます。

`Type` には今回はガソリンスタンドを知りたいので、`Gas station`　を選択します。
※決まった施設しか選べませんが、ここを変えれば色々な施設を検索してくれます！

最後、 `Limit` は "1" にします。
この `Limit` の数値を増やすことで検索結果を増やすことが出来ます。

これで設定が完了です。

## Google Maps モジュール２つ目

実は、この前段階で今回の目的である位置情報を送信し、範囲内のガソリンスタンドを検索することが出来るようになっているのですが、さらに便利にするため以下２点も一緒に送ってもらえるように設定していきます。

①目的地までの距離や目安時間
②目的地のマップのURLを送ってもらい、開くとそのまま経路案内

これらを検索してもらうには、`Google Maps` モジュールの `Get Directions` を使用していきます。



![もう少し.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775201/b210cb15-48da-3d98-df33-de36ee8dea3e.png)

それでは詳細を設定していきましょう！
`add` から　`Google Maps` モジュールを作成していきます。
今度は `Get Directions` を選んでください。
`Connection` は先ほど作成したものを選べばまた作り直す必要はありません。

 `Origin` は出発地点です。送った位置情報の値にしたいのでLINEで受け取った位置情報を設定します。
`Destination` は到着地点になるので、`Search For Places` で検索してきた値を入れます。
 画像のように選択してください。

`Travel Mode` では目的地までの移動方法を徒歩・自転車・車から選べます。
 今回は車での移動を想定しているので `Travel Mode` は `Driving` を選択します。
 
 以上で `Get Directions` の設定は終わりです。

 ## いよいよ最後！

 LINEの `Send a Reply Message` を設定したら完成します。
 こちらでは、今までGoogle Mapsで取得してきた周辺施設（ガソリンスタンド）の`名前と住所`、`距離や目的地までの時間`、`目的地のMAP　URL`をLINE Botで返してもらうのに必要な作業になります。
![最後ー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775201/06b100a7-88c9-918d-0bab-971b781e70d7.png)

画像を見ながら設定してください。
テキストは任意でお好みに変更してください。

なぜか `item2` に `URL Map` を入れてますが、 `item1` の `Text`欄の最後に入れても問題ないと思います。

設定お疲れ様でした。
あとはエラーが出ないよう祈ってLINE Botに位置情報を送って実行してみましょう！
 
## 結果やいかに・・・

成功すれば、このようにLINE Botから返ってきます。


![実行結果.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775201/1fbd35c3-d76f-9452-e99e-9eceef910e81.png)

## 作成にあたり苦労した点

このシナリオを作成するために、一番苦労した点は
「Google Maps API」のAPIキーの取得と有効化　でした。
APIを有効にするために、APIキー作成を行ったあとに、APIの制限を１つ以上設定しなければ有効化されない事を知らず、無制限のままテストをしていたためエラーを繰り返していました。複数あるAPIから使用するものだけを設定しましょう。

実際に Make(integration) の Google Maps の Help では以下を有効にしてください。と手順があります。

・Geocoding API
・Maps Elevation API
・Time Zone API
・Directions API
・Distance Matrix API
・Maps Static API
・Places API
・Geolocation API
・Roads API

そして最大に苦労したのが、有効化までの所要時間です。有効化の設定変更をしてから数分程度、変更まで時間がかかる事があります。と注意書きがあるのですが数分どころか半日以上かかっていたと思われます。エラーが続き、色々検索していたところ、他にも半日以上かかって有効化された体験談などがありました。100%こちらが原因とは断定できていませんが、トライ＆エラーを繰り返し１日経って諦めかけた時に、他に大きな設定を弄ることなく成功したのでもしシナリオ設定に問題がなく、何度やってもエラーが続くようであれば半日ほど空けて再度チャレンジすると解決するかもしれません。

## 実際に使用してみた！

シチュエーション：札幌から初めての遠方ドライブ。気の向くままに函館までいってみた。

初めての遠方、函館への観光・・。下調べもしないまま気の向くままにドライブしていると長旅でガソリンがあっという間に減り、もう少しでガソリンのランプが付きそう！
下調べもしていないから周辺の地図は調べないとすぐにはわからない。いつかはガソリンスタンドにたどり着きそうだけどランプが付いたままで初めての土地は不安・・。

そんなときに、LINEから位置情報を送るだけで周辺のガソリンスタンドをすぐに教えてくれる！
さらにMAPのURL付きで、リンクを開けばそのまま経路の確認とナビまでしてくれちゃいます！
初めての遠方ドライブで車が止まってしまったらどうしようと不安でしたが、ひとまず安心しました！

<blockquote class="twitter-tweet" data-media-max-width="560"><p lang="zxx" dir="ltr"><a href="https://t.co/GVuMFCS9fN">pic.twitter.com/GVuMFCS9fN</a></p>&mdash; Ry7081031 (@Ry40562466201) <a href="https://twitter.com/Ry40562466201/status/1792912255861878984?ref_src=twsrc%5Etfw">May 21, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


## 問題点や課題点

**実際に使用してみての反省点**
上記の想定動画では問題なかったですが、場所によってはガソリンスタンドの名称や位置は出るが、MAPのURLを開くとページを探せませんでした。となりルート案内が出来ないことがあった。
※結局そこから目的地のガソリンスタンド名から調べてるルートを別でナビしなければいけないので不便。


**・最短ではない！？**
私の設定が悪いと思うのですが、自分の知っている土地でやってみたところ、
位置情報から最短ではないガソリンスタンドを選んでいた事がありました。
今回は田舎でガソリンスタンドを探すのが目的なため `radius` を最大の"50000"に設定しましたが、使用する土地によってはもう少し値を低くした方が近くのガソリンスタンドへ導いてくれるかもしれません。
なので今回作成したものは "一番近い" ではなく "範囲内の" と少し微妙なものになってしまいました。
最短設定が出来れば、たくさんあるコンビニなどを選択して急なトイレなどにも対応できるかもしれません。（トイレを使用するだけでなく、なるべく何か買いましょう！）


・**返ってきた住所がローマ字表記になってしまう。**
全てではないが、多くがローマ字表記なので少し見づらい。


・**結果を複数返す**
Limitで複数を設定できるので、これを使用できれば複数の結果から使い手が選択することを出来るので、少し使い勝手がよくなりそう。


**目的地のルート上での検索**
目的地までのルート上やガソリンスタンドに寄ったうえで最速で目的地までつけるガソリンスタンドを推薦してもらえるようなツールになるとかなり便利そう。
※こちらは他のレビュアー様よりご意見を頂きました。ありがとうございます。


まだまだ勉強をしてさらに改良を進められたらと思います。
間違いなどあれば、ぜひご指摘よろしくお願いいたします。

2024.05.21 
①各モジュールの設定などに目的や必要性などの詳細を加筆しました。
②掲示した動画がPC画面を映したものとなっており、実際のLINE Botを使用するシチュエーションと乖離していたため、よりリアルに近い想定のもと動画を作成し直しました。
③作成した際に苦労した点を加筆しました。
④課題点を一部加筆しました。