【GASでLINE Bot作成】現在地の近くのおすすめのごはん屋さんを教えてくれるLINE Botを作った

こんにちは、[Yui](https://twitter.com/yui_active)です。

引き続き週イチ発信をしていきます。

今回は、現在地の近くのおすすめのごはん屋さんを教えてくれるLINE Botを作ったのでその紹介です。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">現在地の近くのおすすめのごはん屋さんを教えてくれるLINE Bot作った！<br><br>よかったら遊んでみてね <a href="https://t.co/CAxdugbJtb">pic.twitter.com/CAxdugbJtb</a></p>&mdash; Yui ☁ Yuiko Ito (@yui_active) <a href="https://twitter.com/yui_active/status/1406226902885433348?ref_src=twsrc%5Etfw">June 19, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

なお、アイデアはnabettuさんからいただきました。感謝！

<blockquote class="twitter-tweet" data-partner="tweetdeck"><p lang="ja" dir="ltr">位置情報送ると近くのラーメン屋5件くらいのGoogleMapの写真を返してくれるLINE Bot</p>&mdash; nabettu🍲NotionでWebサイトが作れるサービス (@nabettu) <a href="https://twitter.com/nabettu/status/1405863580952449029?ref_src=twsrc%5Etfw">June 18, 2021</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

私がたまたま前日にラーメンを食べていて、ラーメンはお腹いっぱいだったこともあり、ユーザーが送ったものにそって検索結果を出してくれたら便利じゃないかと思って、何でも検索してくれる感じにしました。


過去の週イチ発信は以下

- [【React + Typescriptで顔認識】tensorflowを使って画像にマスクをかけるアプリを作った](https://qiita.com/Yui_active/items/b8062b9f89f72c6865ed)
- [【React + Typescript】ボタン一つでコンポーネントのscssをコピーできるサイトを作った](https://qiita.com/Yui_active/items/1288fed0dcc24c71e159)
- [ui-componentsに18個のコンポーネントを追加した](https://qiita.com/yuiko_ito/items/c1d0599e1e7da7fa42e0)
- [【Nuxt.js × Tailwind CSS】ボタン一つで有名絵画風の画像にできるサービスをリリースした！](https://qiita.com/yuikoito/items/126b0e2d36a707bfd36e)

## 使い方

![スクリーンショット 2021-06-20 18.53.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670446/358741ef-534a-8ad3-6e38-b0498fc30422.png)

- まずは上記から友達登録
- 位置情報を入力
- 食べたいものを入力

以上の簡単な構成になってますのでぜひ使ってみて下さい！

位置情報はLINE左下の「位置情報を送る」から送ってもらってもいいですし、ざっくりした場所を送ってもらってもOKです。
要は裏で動いているのはGoogle Mapなので、Google Mapで検索できる名前なら何でもOKです。

## 概要

今回の要件としては以下でした

- ユーザーの位置情報付近の情報を得る
- 検索ワードに従ってお店情報を出力する
- 同じ位置情報で検索ワードを変えるだけで再度検索ができるようにする
- 「変更」と入力されれば選択していた位置情報を変更する
- 検索結果はカルーセルで写真付きで表示する
- 住所を押したらGoogle Mapが開く
- カルーセル下の「場所を確認」ボタンを押してもGoogle Mapが開く

上記のためにAPIとしてはGoogle Mapの[Geocoding API](https://developers.google.com/maps/documentation/geocoding/overview)と[Places API](https://developers.google.com/maps/documentation/places/web-service/overview)を利用しています。

Line Botは前にも何回も作ってますが、毎回GAS（GoogleAppsScript）で作るので、今回もGASで作りました。
データは[友達がいなくて寂しいので友達を作った（LineBot）](https://qiita.com/yuikoito/items/04ccc89164c6bb57b09b)でも利用したスプレッドシートに保存することにしました。
お手軽な設計です。

スプレッドシートでは毎回検索のたびに行が増えていくのは微妙なので、ユーザーの端末情報につき一つの行のみを利用できるように限定しています。なので、直前に検索したものや直前に入力された位置情報は保存されますが、新しいものが入力されると上書きされていきます。

カルーセルの表示に関しては今回はじめてだったんですけど、Line公式の[FLEX MESSAGE SIMULATOR](https://developers.line.biz/flex-simulator/?status=success)で簡単に作れました。

レイアウトを変更したらそのJSONコードを見れるので簡単でした。

[![Image from Gyazo](https://i.gyazo.com/910a5dde21cfc090ab29ec7b98cd7ef7.gif)](https://gyazo.com/910a5dde21cfc090ab29ec7b98cd7ef7)

## 少し詰まったところ

今までGASとスプレッドシートのつなぎ込みでは

```javascript
const ss = SpreadsheetApp.openById("スプレッドシートのID");
SpreadsheetApp.setActiveSpreadsheet(ss);
const activeSs = SpreadsheetApp.getActiveSpreadsheet();
const sheet = activeSs.getSheetByName("スプレッドシートの名前");
```
で該当のスプレッドシートを取得していたのですが、なんでか今回getSheetByNameがnullだと出力されてしまいました。

```
Logger.log(activeSs.getName());
```

で名前が出力されることは確認したんですけど、その名前でgetSheetByName()を行ってもうまくいかず、どうしようもなかったので、やむなく以下の書き方をしました。

```javascript
const ss = SpreadsheetApp.openById("スプレッドシートのID");
SpreadsheetApp.setActiveSpreadsheet(ss);
const activeSs = SpreadsheetApp.getActiveSpreadsheet();
// 上記でアクティブ状態にしているのは１件だけなので、配列の0番目が該当のシートになる
const sheet = activeSs.getSheets()[0];
```

ちょっとこの辺はまた調べてみようと思います。
前に作ったLINE Botでは前者の書き方で動いていたので、GASの仕様が変わったのかなんなのか..。

## おまけ

他にも色々LINE Botを作ってます！
良ければ下記も一緒に登録して遊んでみてください

- [友達がいなくて寂しいので友達を作った（LineBot）](https://qiita.com/yuikoito/items/04ccc89164c6bb57b09b)

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">画像を送信するだけで、勝手に画像内の言語を認識して何でも日本語に変えてくれるLineBot作りました！<br>英語、中国語、ドイツ語、フランス語あたりは動作確認してます！（他の言語でもOK）<br>良いな〜と思ったら拡散してもらえると嬉しいです！<br><br>これからwebアプリ化もします！ <a href="https://t.co/PrAG1o1gHO">pic.twitter.com/PrAG1o1gHO</a></p>&mdash; Yui ☁ Yuiko Ito (@yui_active) <a href="https://twitter.com/yui_active/status/1313055726730792965?ref_src=twsrc%5Etfw">October 5, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>