地図コンポーネントを使ったアプリのアイデアとして、レストラン検索アプリを作ろうと考えました。
本来なら食べログやぐるなびからレストラン情報を取得する方法が考えられますが、これらのサービスは有料だったり、無料でもアプリから情報を取得するためのAPIキーを一般公開できないなどの制約があります。
そこで、スプレッドシートコンポーネントを使用し、Google Sheets APIを経由してレストランの情報を取得し、地図上で検索できるようにすることにしました。
作り方はChatGPTとGeminiに相談してみました。
ラフなアイデアから始めたところ、こんな結果です。
- １はスプレッドシートコンポーネントを無視したので却下。でもマーカークリック時に通知機能でレストラン情報を表示するのは良いアイデア。
- ２もスプレッドシートコンポーネントを無視したので却下。
- ３はスプレッドシートコンポーネントを使用しているが他の部分のデザインがおかしい。
- ４はスプレッドシートコンポーネントを使用しているし、全体的によくできていて、コンポーネントの使い方で知らないものを教えてくれるのでありがたい。
４で作ってみます。
アプリのアイデア
地図コンポーネントを使って現在地の周辺にあるレストランを検索し、クリックしたときに以下の情報を表示するApp Inventorアプリを作りたい。APIは使わずにレストラン情報はGoogleスプレッドシートを使いたい。どうするといいか？
名前 料理 営業時間 定休日 住所 電話番号
MIT App Inventor 2 App Maker
地図コンポーネントを使って現在地の周辺にあるレストランを検索し、クリックしたときに以下の情報を表示するApp Inventorアプリを作りたい。APIは使わずにレストラン情報はGoogleスプレッドシートを使いたい。どうするといいか？
名前 料理 営業時間 定休日 住所 電話番号以下の手順で、MIT App Inventorを使用して「地図コンポーネント」と「Googleスプレッドシート」を利用し、現在地周辺のレストラン情報を表示するアプリを作成できます。APIを使用せず、Googleスプレッドシートでデータを取得します。
---
### 必要な機能：
1. 現在地取得：`LocationSensor`を使用。
2. レストランリスト取得：Googleスプレッドシートから情報を取得。
3. 地図表示：`Map`コンポーネントを使用。
4. レストラン情報表示：`Notifier`または`Label`コンポーネントを利用。
---
### 実装ステップ
#### 1. Googleスプレッドシートの設定
1. **Googleスプレッドシートを作成**し、以下のようなフォーマットでデータを入力：
| Name | Cuisine | Hours | ClosedDay | Address | PhoneNumber | Latitude | Longitude |
|---------------|------------|--------------|-----------|---------------|---------------|----------|-----------|
| Restaurant A | Italian | 10:00-22:00 | Monday | Example Addr | 1234567890 | 35.6895 | 139.6917 |
| Restaurant B | Japanese | 11:00-23:00 | Sunday | Example Addr | 0987654321 | 35.6896 | 139.6920 |
2. スプレッドシートを**公開**設定にし、共有リンクを作成します。
3. スプレッドシートのデータをCSV形式で取得できるURLを生成：
- スプレッドシートのURL例：
```
https://docs.google.com/spreadsheets/d/your_spreadsheet_id/edit#gid=0
```
- データ取得用URL：
```
https://docs.google.com/spreadsheets/d/your_spreadsheet_id/export?format=csv
```
#### 2. App Inventorの準備
1. **コンポーネント追加**：
- `LocationSensor`（現在地を取得）
- `Map`（地図表示）
- `Web`（スプレッドシートデータ取得）
- `Notifier`（レストラン情報の表示）
- 必要に応じて`Button`や`Label`を追加。
---
#### 3. ブロックの設定
##### **現在地の取得**
- `LocationSensor.LocationChanged`イベントを使用し、緯度・経度を取得。
```plaintext
When LocationSensor1.LocationChanged
set global CurrentLatitude to LocationSensor1.Latitude
set global CurrentLongitude to LocationSensor1.Longitude
```
##### **スプレッドシートデータの取得**
- `Web1`を使用し、スプレッドシートからデータを取得。
```plaintext
When ButtonGetRestaurants.Click
set Web1.Url to "https://docs.google.com/spreadsheets/d/your_spreadsheet_id/export?format=csv"
call Web1.Get
```
- データ取得完了時の処理：
```plaintext
When Web1.GotText
set global RestaurantData to call csv table to list Web1.ResponseContent
```
##### **地図にマーカーを追加**
- `Map`コンポーネントの`AddMarker`メソッドを使用。
```plaintext
for each item in global RestaurantData
call Map1.AddMarker
Latitude: select list item (item, 7)
Longitude: select list item (item, 8)
Title: select list item (item, 1) // レストラン名
Description: select list item (item, 2) // 料理
```
##### **マーカークリック時に情報表示**
- `Map1.MarkerClick`イベントを使用：
```plaintext
When Map1.MarkerClick
call Notifier1.ShowMessageDialog
Message: join "Name: " + marker.Title + newline
"Cuisine: " + marker.Description + newline
"Phone: " + get restaurant phone (marker.Title)
Title: "Restaurant Info"
ButtonText: "OK"
```
##### **電話番号や住所の取得**
- タイトルに基づいて該当するレストラン情報を取得。
```plaintext
function get restaurant phone(name)
for each item in global RestaurantData
if select list item (item, 1) = name
return select list item (item, 6) // 電話番号
```
---
### 画面デザイン
1. 地図を画面いっぱいに配置。
2. ボタンでスプレッドシートからデータを取得。
3. マーカークリックで情報を表示。
---
これにより、Googleスプレッドシートを使用して現在地周辺のレストラン情報を表示し、詳細を確認できるアプリを構築できます！