More than 3 years have passed since last update.

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

Last updated at 2021-06-21Posted at 2021-06-21

こんにちは、Yuiです。

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

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

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

よかったら遊んでみてね pic.twitter.com/CAxdugbJtb
— Yui ☁ Yuiko Ito (@yui_active) June 19, 2021

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

位置情報送ると近くのラーメン屋5件くらいのGoogleMapの写真を返してくれるLINE Bot
— nabettu🍲NotionでWebサイトが作れるサービス (@nabettu) June 18, 2021

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

過去の週イチ発信は以下

使い方

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

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

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

概要

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

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

上記のためにAPIとしてはGoogle MapのGeocoding APIとPlaces APIを利用しています。

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

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

カルーセルの表示に関しては今回はじめてだったんですけど、Line公式のFLEX MESSAGE SIMULATORで簡単に作れました。

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

少し詰まったところ

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

const ss = SpreadsheetApp.openById("スプレッドシートのID");
SpreadsheetApp.setActiveSpreadsheet(ss);
const activeSs = SpreadsheetApp.getActiveSpreadsheet();
const sheet = activeSs.getSheetByName("スプレッドシートの名前");

で該当のスプレッドシートを取得していたのですが、なんでか今回getSheetByNameがnullだと出力されてしまいました。

Logger.log(activeSs.getName());

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

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

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

おまけ

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

友達がいなくて寂しいので友達を作った（LineBot）

画像を送信するだけで、勝手に画像内の言語を認識して何でも日本語に変えてくれるLineBot作りました！
英語、中国語、ドイツ語、フランス語あたりは動作確認してます！（他の言語でもOK）
良いな〜と思ったら拡散してもらえると嬉しいです！

これからwebアプリ化もします！ pic.twitter.com/PrAG1o1gHO
— Yui ☁ Yuiko Ito (@yui_active) October 5, 2020

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up