会員サイト

グルメサーチAPIを活用して、周辺のお店を検索できる地図アプリを作成します

このチュートリアルでは、ホットペッパー グルメサーチAPI を活用して、地図上で表示している場所の近辺にある指定ジャンルのお店を検索し、マーカーで表示するアプリを作成します。地図上のマーカーをクリックすると、住所などの詳細情報を表示します。また、地図を現在地や入力した地名に移動させる機能も備えています。

ページの最後にあるダウンロードセクションからソースコードと実行用のapkファイルをダウンロードできます。使ってみると結構便利な実用的なアプリです。好きな場所でお店を探してみてください！

グルメサーチAPIを使用するには、APIキーが必要です。こちらで取得したAPIキーを公開することはできないため、各自で取得してください。APIキーは、メールアドレスを入力するだけで簡単に取得でき、利用は無料です。

APIキーの取得方法

新規登録ページでメールアドレスを入力します。

“リクルート Webサービス – メールアドレスの確認"というメールが送られてくるので、メールにあるURLをクリックします。

“リクルート Webサービス – APIキー発行完了のお知らせ"というメールでAPIキーが送られてきます。

これだけです！

デザイン編集

Screen1のタイトルを"グルメ検索地図"にします。

レイアウト パレットから 垂直配置コンポーネント を2個追加し、ビューアー上に縦に並べ、高さと横幅は"親要素に合わせる"に設定します。名前は垂直配置1と垂直配置2になっているはずです。

“垂直配置1“

• 地図 パレットから 地図 を追加し、高さと横幅は"親要素に合わせる"にします。文字列からの中心座標を"35.681236,139.767125″にしておきます。これは東京駅の緯度、経度です。
• レイアウト パレットから 水平配置コンポーネント を2個追加します。水平に整列するを"中央揃え"、横幅は"親要素に合わせる"にします。名前は水平配置1と水平配置2になっているはずです。
• 水平配置1にユーザーインターフェース パレットから ラベル と スピナー  を追加します。

  • ラベル のテキストプロパティーを"ジャンル"にします。
  • スピナー の名前は"ジャンル"、文字列から要素プロパティーを"居酒屋,ダイニングバー・バル,創作料理,和食,洋食,イタリアン・フレンチ,中華,焼肉・ホルモン,韓国料理,アジア・エスニック料理,各国料理,カラオケ・パーティ,バー・カクテル,ラーメン,お好み焼き・もんじゃ,カフェ・スイーツ,その他グルメ"に設定します。

• 水平配置2にユーザーインターフェース パレットから ボタン を追加します。

  • ボタン の名前とテキストを"検索"にします。

“垂直配置2“

• ユーザーインターフェース パレットから ウェブビュー を追加します。
• 垂直配置2の目に見えるプロパティーのチェックを外します。

垂直配置2の下にレイアウト パレットからラベルを2個追加し、ビューアー上に縦に並べ、名前を"住所"と"営業時間"にします。テキストは両方とも空白にします。

レイアウト パレットから 水平配置コンポーネント を2個、"営業時間"ラベルの下に追加し、ビューアー上に縦に並べ、横幅を"親要素に合わせる"に設定します。名前は水平配置3と水平配置4になっているはずです。

“水平配置3“

• ユーザーインターフェース パレットから ボタン を3個追加します。
• ボタンの名前を"ブラウザ表示"、"地図表示"、"現在地移動"、テキストを"ブラウザ表示"、"地図表示"、"現在地に移動"にします。

“水平配置4“

• レイアウト パレットから テキストボックス と ボタン を追加します。
• テキストボックス の名前とヒントを"移動先住所"にします。
• ボタン の名前を"住所移動"、テキストを"住所に移動"にします。

非可視コンポーネントの追加

地図コンポーネントを使ったアプリのアイデアとして、レストラン検索アプリを作ろうと考えました。
本来なら食べログやぐるなびからレストラン情報を取得する方法が考えられますが、これらのサービスは有料だったり、無料でもアプリから情報を取得するためのAPIキーを一般公開できないなどの制約があります。
そこで、スプレッドシートコンポーネントを使用し、Google Sheets APIを経由してレストランの情報を取得し、地図上で検索できるようにすることにしました。

作り方はChatGPTとGeminiに相談してみました。

1. MIT App Inventor 2 App Maker
2. ChatGPT-o1
3. Gemini 1.5 Pro
4. Gemini 2.0 Experimental Advanced

ラフなアイデアから始めたところ、こんな結果です。

• １はスプレッドシートコンポーネントを無視したので却下。でもマーカークリック時に通知機能でレストラン情報を表示するのは良いアイデア。
• ２もスプレッドシートコンポーネントを無視したので却下。
• ３はスプレッドシートコンポーネントを使用しているが他の部分のデザインがおかしい。
• ４はスプレッドシートコンポーネントを使用しているし、全体的によくできていて、コンポーネントの使い方で知らないものを教えてくれるのでありがたい。

４で作ってみます。

アプリのアイデア

地図コンポーネントを使って現在地の周辺にあるレストランを検索し、クリックしたときに以下の情報を表示する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スプレッドシートを使用して現在地周辺のレストラン情報を表示し、詳細を確認できるアプリを構築できます！

ChatGPT-o1

Google Sheets APIを使って観光名所を表示する地図を作ります

このチュートリアルでは、Google Sheets APIを使ってGoogleスプレッドシートに入力された東京の観光名所を地図上に表示するアプリを作ります。複数台のスマホからの同時アクセスも可能ですし、Googleスプレッドシートでデータを変更すると表示されるデータもリアルタイムで反映されます。ページの最後にあるダウンロードセクションからソースコードをダウンロードできます。

このアプリでは読み取りだけ行うのでこのページに従ってあらかじめサービスアカウント作成する必要はありません。読み取るGoogleスプレッドシートのスプレッドシートIDは必要ですのでここを読んでスプレッドシートIDの取得方法を理解してください。

[プロジェクト]メニューから[新規プロジェクトを始める]を選択し、"LandmarkExplorer“と名前を付けます。

Googleスプレッドシートの作成

地図上に観光名所を表示するには名所の名前、緯度、経度が必要です。ChatGPTに頼んでCSVファイルを作ってもらい、Googleスプレッドシートにしました。

ChatGPTに入力したプロンプトはこれです。無料アカウントでもできるので試してみてください。「東京」をあなたの住んでいる地名にするのも面白いですよ。

東京の観光名所の名前、緯度、経度のグーグル スプレッドシートを作りたいので、CSVファイルを作って。

ダウンロードしたCSVファイルをGoogleドライブにアップロードして、Googleスプレッドシートで開くだけです。こんな感じです。クリックするとGoogleスプレッドシートを見れます。シート名は"tokyo_landmarks“です。

Googleスプレッドシートの共有

このアプリはGoogleスプレッドシートを読み取るだけなので、Googleスプレッドシートのドキュメントが「リンクを知っている全員が閲覧できる」に設定します。

デザイン編集

Screen1のタイトルを"名所地図"にします。

地図 パレットから 地図 を追加し、高さと横幅は"親要素に合わせる"にします。使いやすくなるように文字列からの中心座標を"35.681236,139.767125″にしておきます。これは東京駅の緯度、経度です。

ストレージ パレットからスプレッドシートコンポーネントを追加します。使用するスプレッドシートの スプレッドシートID を取得し、それをプロパティのスプレッドシートIDに設定してください。

• スプレッドシートIDは以下の手順で取得できます：

  • スプレッドシートを開く。
  • URL の中に含まれる「docs.google.com/spreadsheets/d/」に続く文字列（例：1A2B3C4D5E6F7G8H）がスプレッドシートIDです。
  • よくわからない場合は 17Tukip5RlsU1LOBAkq0ngr3sMK1OLPxBKDq4sBwz8FI を使ってください。このスプレッドシートのスプレッドシートIDです。

ブロック編集機能を使用したプログラミング

アプリの動作をプログラミングするには、 ブロック編集機能にアクセスする必要があります。 画面右上のブロック編集ボタンをクリックしてブロック編集機能に行きます。

グローバル変数

外出先で写真を撮った際に位置情報を取得し、それを地図上に表示・保存するアプリを作成します

このチュートリアルでは、外出先で写真を撮るとそのときの位置情報を位置センサーで同時に取得しそれを保存してあとで地図上で見ることができるアプリを作成します。ページの最後にあるダウンロードセクションからソースコードをダウンロードできます。

このアプリでは三つのスクリーンを使っていますが、スクリーン毎に同じグローバル変数を設定したり小型DBやウェブコンポーネントなどの同じコンポーネントを使うのは煩雑なので、Screen1だけを使って三つのスクリーンを切り替えて使う、仮想スクリーンテクノロジーを使っています。仮想スクリーンではScreen1に複数の垂直配置コンポーネントを配置してブロック編集内で「目に見える」をON/OFFしてスクリーンを切り替えます。

[プロジェクト]メニューから[新規プロジェクトを始める]を選択し、"PhotosOnMap“と名前を付けます。

デザイン編集

Screen1のタイトルを"写真地図"にします。

仮想スクリーンを作成

レイアウト パレットから 垂直配置コンポーネント を3個追加し、ビューア上に縦に並べ、横幅は"親要素に合わせる"に設定します。上から順に地図スクリーン、リストスクリーン、写真スクリーンという名前にしてください。それぞれの垂直配置コンポーネントが仮想スクリーンになります。それぞれの垂直配置コンポーネント(スクリーン)にコンポーネントを追加するときは他のスクリーンの目に見えるのチェックを外して作業してください。スクリーン切り替えにはこれらのプロシージャを使います。

“地図スクリーン“

• 地図 パレットから 地図 を追加し、高さと横幅は"親要素に合わせる"にします。
• レイアウト パレットから  水平配置コンポーネント を 地図 の下に追加し、水平に整列するを"中央揃え"、横幅は"親要素に合わせる"にします。
• 水平配置コンポーネント の中にユーザーインターフェース パレットから ボタン を3個追加し、左から順に名前とテキストを"リセット"、"写真撮影"、"一覧"にします。

“リストスクリーン“

• ユーザーインターフェース パレットから リストビュー を追加し、高さと横幅は"親要素に合わせる"に、リストビューレイアウトを"メインテキスト、詳細テキスト(横)"にします。
• レイアウト パレットから  水平配置コンポーネント を リストビュー の下に追加し、水平に整列するを"中央揃え"、横幅は"親要素に合わせる"にします。
• 水平配置コンポーネント の中にユーザーインターフェース パレットから ボタン を3個追加し、左から順に名前を"リストリターン"、"削除"、"詳細"に、テキストを"リターン"、"削除"、"詳細"にします。

“写真スクリーン“

• レイアウト パレットから  垂直配置コンポーネント を追加し、水平に整列するを"中央揃え"、高さと横幅は"親要素に合わせる"にします。
• 垂直配置コンポーネント の中にユーザーインターフェース パレットから画像、ラベルを2個、ボタンを１個追加します。画像は高さと横幅は"親要素に合わせる"、回転角度は"90.0″に、ラベルの名前は日時とコメントにし、テキストは空白に、ボタンは名前を"写真リターン"、テキストを"リターン"にします。

非可視コンポーネントの追加

ユーザーインターフェース パレットから通知機能を２個、メディアパレットからカメラ、センサーパレットからタイマーと位置センサー、ストレージパレットから小型DBとファイル、接続パレットからウェブを追加します。

ここまでで下図のようになります。

ブロック編集機能を使用したプログラミング

アプリの動作をプログラミングするには、 ブロック編集機能にアクセスする必要があります。 画面右上のブロック編集ボタンをクリックしてブロック編集機能に行きます。

データ構造

このアプリでは小型DBにデータのリストを格納しています。データはJSONでその構造はChatGPT-o1が設計したもので以下の通りです。

photosList = [
  {
    "imagePath": "file:///storage/emulated/0/DCIM/Camera/IMG_20250101_123456.jpg",
    "latitude": 35.xxxxx,
    "longitude": 139.yyyyy,
    "timestamp":  "2025-01-01 12:34:56",
    "comment":       "初日の出"
  },
  ...
]

JSONを直接作る機能はApp Inventorにはありませんが、ウェブコンポーネントにディクショナリをJSONにエンコード(Jsonオブジェクトのエンコードメソッド)・デコード(Jsonテキストデコードメソッド)する機能があるのでこれを使います。

地図コンポーネントを使ったアプリのアイデアを思いついたので、ChatGPTとGeminiに相談してみました。

1. MIT App Inventor 2 App Maker
2. ChatGPT-o1
3. Gemini 2.0 Experimental Advanced

ラフなアイデアから始めたところアプリの感想から設計までいずれも一応それらしく行っていますが、３は余計なことをしていてあまりうまく設計できていません。UIの設計は２が良い感じです。１も２もデータ保存に関してはJSONを使っていて良いですが、２の方が丁寧に説明してくれています。他を参考にしながら２で作ってみます。

作ってみたところ、とりあえず３時間で動きましたね。あとは使い勝手をよくするために調整。

アプリのアイデア

写真を撮るとGPSで位置も取って地図にその写真のアイコン入れる。クリックで写真を拡大表示

MIT App Inventor 2 App Maker

こんなアプリはどう思う？：写真を撮るとGPSで位置も取って地図にその写真のアイコン入れる。クリックで写真を拡大表示

このアプリのアイデアは非常に魅力的で、以下のような構成でMIT App Inventorを使用して実現できます。写真撮影とGPS座標の取得、さらに地図にその写真をマークする機能を組み合わせたアプリは、旅行記録、不動産の調査、プロジェクト管理など、多くの用途に役立ちます。

### 必要なコンポーネント
1. **カメラ (Camera)**:
   - ユーザーが写真を撮るために使用。
   - 撮影後、写真のファイルパスを取得。

2. **ロケーションセンサー (LocationSensor)**:
   - 写真が撮影されたときのGPS位置情報（緯度・経度）を取得。

3. **マップ (Map)**:
   - 地図を表示し、写真のアイコンをその位置にマッピング。

4. **マーカー (Marker)**:
   - 撮影された写真ごとにマップに追加されるポイント。クリックすると写真が表示される。

5. **ストレージ (TinyDB)**:
   - 写真とGPSデータを保存して、アプリを閉じた後もデータを保持する。

### 実装手順
1. **UIのデザイン**:
   - ボタン：「写真を撮る」ボタン。
   - マップ：地図を表示するエリア。
   - 表示用のコンポーネント（例えば、画像表示用のラベルやポップアップ）。

2. **ブロックの構成**:
   - 「写真を撮る」ボタンのクリック時に、カメラを起動し、撮影後に写真のファイルパスを取得。
   - ロケーションセンサーでGPS座標を取得。
   - 写真ファイルのパスとGPS座標をTinyDBに保存。
   - 取得したGPS座標に基づいて、マーカーをマップに追加。マーカークリック時に、対応する写真を表示する。

3. **データ保存と表示**:
   - TinyDBを使用して、各写真のデータを保存（ファイルパス、緯度、経度）。
   - アプリ起動時に、保存済みデータを読み込み、地図にマーカーを復元。

### 注意点
- 写真ファイルのストレージパスはAndroidの権限設定に依存するため、適切な権限（カメラ、ストレージ、位置情報）を要求する必要があります。
- 高精度なGPSデータを得るために、LocationSensorの設定を調整することを推奨します。

このアプリは、実用性とカスタマイズの可能性が高いプロジェクトであり、App Inventorの基本的な機能だけで実現可能です。さらに質問や特定のステップについての詳細が必要であれば教えてください！

詳細設計してください。追加で条件が必要ならば聞いてください。

詳細設計に進む前に、以下の質問をさせていただきます。この情報を基に、より具体的な設計を提案できます：

### 確認事項
1. **写真の保存場所**:
   - 写真はデバイスのローカルストレージに保存しますか？それともクラウド（例: Firebaseなど）にアップロードしますか？

2. **地図の機能**:
   - ユーザーがズームイン/ズームアウト、ドラッグして地図を移動できるようにしますか？
   - 写真を撮影した場所の詳細情報（例: 日時、説明など）をマーカークリック時に表示しますか？

3. **複数の写真管理**:
   - 複数の写真を同じ地図上に表示できますか？
   - 古いデータの削除や編集機能が必要ですか？

4. **アプリ使用の想定環境**:
   - アプリを主に使用する場面（例: 旅行、仕事の記録）。
   - オフラインでの地図表示やデータ管理が必要ですか？

5. **見た目と操作性**:
   - カメラ起動や地図表示時に特別なアニメーションやガイドが必要ですか？
   - UIデザインの好み（シンプル、カラフルなど）。

### 仮の前提条件
上記に回答をいただくまでの間、以下のような仕様で設計します：
1. 写真はローカルストレージに保存し、GPS座標と共に地図上にマッピング。
2. ユーザーは複数の写真を撮影して地図上に追加可能。
3. マーカーをクリックすると、写真と撮影日時を表示。
4. データはローカルストレージ（TinyDB）に保存。

これを基に詳細設計を進めますが、追加情報があれば適宜反映します。どうしますか？

これでお願いします

Google Sheets APIを使って小さなレストランの予約管理をするアプリを作ります

このチュートリアルでは、Google Sheets APIを活用して、Googleスプレッドシートをリレーショナルデータベースとして使用するアプリを作成します。テーブルシートと予約シートの二つのシートを使用していますが、一つのテーブルは複数の予約を持てるので、1 対多のリレーションシップになり、予約シートではテーブルIDが外部キーになっています。ただしGoogle Sheets APIはリレーショナルデータベースとしての検索機能は持っていないのでアプリ側でリレーションを考慮した処理を行っています。

複数のスマートフォンから同時にアクセスすることが可能で、Googleスプレッドシート上でデータを変更すると、アプリの表示内容にもリアルタイムで反映されます。ソースコードは、ページ末尾のダウンロードセクションから入手できます。

このアプリの基本設計は生成AI(ChatGPTとGemini)で行っています。詳細はこちらから。

このアプリを作成するためには、Googleスプレッドシートへの読み書きを行う準備が必要です。以下の手順を事前に完了してください：

1. サービスアカウントの作成

   • サービスアカウントを作成し、秘密鍵（JSONファイル）をダウンロードしてください。詳細な手順は、このページに記載されています。

2. スプレッドシートIDの取得

   • 使用するGoogleスプレッドシートのスプレッドシートIDを取得してください。取得方法については、こちらを参考にしてください。

[プロジェクト]メニューから[新規プロジェクトを始める]を選択し、"ReservationManager“と名前を付けます。

Googleスプレッドシートの作成

ここにある手順でGoogleスプレッドシートを作成し、データを入力します。シートは"テーブル“と"予約“の2つ作ります。"テーブル“の列は"ID(主キー)“、"テーブル名“、"最大席数“を作りました。"予約“の列は"ID(主キー)“、"予約日“、"予約時間(18:00, 20:00)“、"テーブルID(外部キー)“、"氏名“、"電話番号“、"ステータス“です。クリックするとGoogleスプレッドシートを見れます。

“テーブル“シート

“予約“シート

Googleスプレッドシートの共有

ここにある手順でサービスアカウントのメールアドレスとそのシートを"編集者"権限で共有します。これでサービスアカウントにデータの読み書き権限が付与されます。

デザイン編集

“Screen1“のタイトルを"レストラン予約管理"にします。"スクリーンを追加"ボタンをクリックして"edit“という名前のデータ編集用のスクリーンを追加しタイトルを"編集"にします。

“Screen1“

レイアウト パレットから 水平配置コンポーネント をビューアーに追加し、水平に整列するは"中央揃え"、横幅は"親要素に合わせる"に設定します。名前は水平配置1になっているはずです。水平配置1にユーザーインターフェース パレットからラベルを１個追加し、名前を"日付"に、フォントサイズを20、テキストは"YYYY-MM-DD"にします。

ユーザーインターフェース パレットからリストビューコンポーネントを水平配置1の下に追加し、背景の色は"該当なし"に、テキストカラーは"黒"に設定します。

レイアウト パレットから 水平配置コンポーネント をリストビューコンポーネントの下に追加し、水平に整列するは"中央揃え"に、横幅は"親要素に合わせる"に設定します。その中にボタンを2個追加し、名前とテキストを左から"更新“、"予約追加“に、その右にデートピッカーを追加しテキストを"予約表示日指定“にします。

非可視コンポーネントとしてストレージ パレットから スプレッドシートコンポーネントを2個、センサー パレットからタイマーコンポーネントを1個追加します。スプレッドシートコンポーネントの名前はテーブルシートと予約シートにします。

テーブルシートと予約シートの認証情報Jsonプロパティーにはあらかじめダウンロードしておいた秘密鍵をアップロードします。スプレッドシートIDプロパティーにはこれもあらかじめ取っておいたスプレッドシートIDを入力します。

“edit“

レイアウト パレットから テーブル配置コンポーネント をビューアーに追加し、列を3、行を7に、横幅は"親要素に合わせる"に設定します。名前はテーブル配置1になっているはずです。

テーブル配置1の上から1、2、3、4、 5、6、7行の1列にユーザーインターフェース パレットからラベルを並べ、テキストを"日付"、"テーブル"、"時間帯"、"名前"、"電話番号"、"人数"、"ステータス"に変更します。

テーブル配置1の上から1、4、5、6行の2列にユーザーインターフェース パレットからテキストボックスを並べ、名前を"予約日"、"名前"、"電話番号"、"人数"に変更します。

テーブル配置1の上から2、3、7行の2列にユーザーインターフェース パレットからスピナーを追加し、名前を"テーブル"、"予約時間"、"ステータス"に変更します。"予約時間"の文字列から要素プロパティーに"18:00-20:00,20:00-22:00″を、"ステータス"の文字列から要素プロパティーに"予約済, キャンセル済み"を入力します。

テーブル配置1の上から1行の3列にユーザーインターフェース パレットからデートピッカーを追加し、テキストを"日付選択"にします。

非可視コンポーネントとしてストレージ パレットから スプレッドシートコンポーネントを2個、ユーザーインターフェース パレットから通知機能コンポーネントを１個追加します。スプレッドシートコンポーネントの名前はテーブルシートと予約シートにします。

テーブルシートと予約シートの認証情報Jsonプロパティーにはあらかじめダウンロードしておいた秘密鍵をアップロードします。スプレッドシートIDプロパティーにはこれもあらかじめ取っておいたスプレッドシートIDを入力します。

ブロック編集機能を使用したプログラミング

App Inventor 2のスプレッドシートコンポーネントを使うとGoogle Sheets API経由でリレーショナルデータベースの真似事ができそうなので、簡単なレストランの予約管理アプリを作ることにしました。

一から手で作るのも大変なのでChatGPTとGeminiに相談してみました。

1. MIT App Inventor 2 App Maker
2. ChatGPT-o1
3. Gemini 1.5 Pro

UIはどれも同じように設計してくれました。スプレッドシートの設計ではそれぞれ違いが出ていますが、今回はリレーショナルデータベースの真似事をするのが一つの目的なので、リレーショナルデータベースっぽい作り方はしてくれない2は却下。3はコンポーネントの知識が無さそうなので3を参考にしながら1で作ってみます。

設計条件

• テーブルは5卓、各テーブルは4席
• 予約時間は18:00-20:00と20:00-22:00
• 年中無休
• データはGoogleスプレッドシートに格納
• App Inventor 2のスプレッドシートコンポーネントを使ってGoogleスプレッドシートから読み込み、書き込み
• 予約の一覧表示
• 予約のキャンセル、変更が可能

MIT App Inventor 2 App Maker

まずは英語のApp Inventor 2の知識を持っているMIT App Inventor 2 App Makerです。

条件を与えて設計してもらいます。

次の条件でレストラン予約管理アプリを作ろうと思っているので設計してください。追加で条件が必要ならば聞いてください。
設計条件：
テーブルは5卓、各テーブルは4席
予約時間は18:00-20:00と20:00-22:00
年中無休
データはGoogleスプレッドシートに格納
App Inventor 2のスプレッドシートコンポーネントを使ってGoogleスプレッドシートから読み込み、書き込み
予約の一覧表示
予約のキャンセル、変更が可能

レストラン予約管理アプリの設計を以下に示します。この設計では、Googleスプレッドシートをデータベースとして使用し、MIT App Inventor 2のコンポーネントを活用して、予約管理を効率的に行えるようにします。

---

### **アプリ設計**
#### 1. **必要なコンポーネント**
- **ユーザーインターフェース**
  - **ListView**: 予約の一覧を表示
  - **TextBox**: 名前、電話番号などの入力
  - **DatePicker**: 予約日を選択
  - **Spinner**: テーブル番号と時間帯（18:00-20:00、20:00-22:00）の選択
  - **Buttons**: 予約作成、キャンセル、変更用
- **データ管理**
  - **Spreadsheetコンポーネント**: Googleスプレッドシートとのデータ連携

#### 2. **Googleスプレッドシートの構成**
| **列名**      | **内容**                      |
|---------------|-------------------------------|
| `ID`          | 各予約の一意識別子            |
| `Name`        | 顧客名                        |
| `Phone`       | 電話番号                      |
| `TableNumber` | テーブル番号 (1~5)            |
| `TimeSlot`    | 時間帯（18:00-20:00/20:00-22:00） |
| `Date`        | 予約日                        |

---

### **アプリの基本機能**
#### **1. 予約作成**
- **UI操作**: 名前、電話番号、テーブル番号、予約時間帯を入力し、「予約作成」ボタンを押す。
- **ブロック設計**:
  1. 入力データを取得。
  2. `Spreadsheet.AddRow` メソッドを使用してスプレッドシートに新規行を追加。
  3. 成功した場合は確認通知を表示。

#### **2. 予約一覧の表示**
- **UI操作**: アプリ起動時または「更新」ボタン押下時に予約データを表示。
- **ブロック設計**:
  1. `Spreadsheet.Query` メソッドでスプレッドシートの全データを取得。
  2. 結果をListViewに表示。

#### **3. 予約の変更**
- **UI操作**: ListViewで変更対象を選択し、入力フォームでデータを修正後、「変更」ボタンを押す。
- **ブロック設計**:
  1. `ID`をキーにスプレッドシートを検索。
  2. `Spreadsheet.UpdateRow` メソッドを使用して該当行を更新。

#### **4. 予約のキャンセル**
- **UI操作**: ListViewでキャンセル対象を選択し、「キャンセル」ボタンを押す。
- **ブロック設計**:
  1. `ID`をキーにスプレッドシートを検索。
  2. `Spreadsheet.DeleteRow` メソッドを使用して該当行を削除。

---

### **設計上の留意点**
1. **入力バリデーション**:
   - 名前や電話番号が未入力の場合、エラーメッセージを表示。
   - テーブルと時間帯の重複予約を防ぐロジックを追加。
2. **UI設計**:
   - フォームはシンプルにし、必要な情報のみを入力。
   - メッセージや通知を活用して操作の成功/失敗をわかりやすく表示。
3. **スプレッドシートの設定**:
   - スプレッドシートを事前に作成し、App InventorのSpreadsheetコンポーネントでアクセス許可を設定。

---

### **サンプルブロック例: 新規予約作成**
以下のようなブロックを使用します。

1. **予約作成ボタン押下イベント**
   ```blocks
   when CreateReservationButton.Click do
       if NameTextBox.Text ≠ "" and PhoneTextBox.Text ≠ "" then
           call Spreadsheet1.AddRow
               Data: (create a list (NameTextBox.Text, PhoneTextBox.Text, SelectedTable, SelectedTimeSlot, SelectedDate))
           notify User "予約が作成されました！"
       else
           notify User "すべての項目を入力してください。"
   ```

質問や追加要望があればお知らせください！

予約一覧の表示で全てを表示すると多すぎると思う。当日分だけとかにはできない？

Google Sheets APIを使って郵便番号から住所を検索するアプリを作ります

郵便番号検索アプリは住所から郵便番号を検索しますがこのアプリは郵便番号から住所を検索します。郵便番号検索アプリはSQLiteデータベースを使っていますが、このアプリはデータベースは使わずにGoogleスプレッドシートを使っています。スプレッドシートコンポーネントには完全一致、部分一致フィルターをかけて読み込むメソッドがあるのですが正常に動かないので、取得した列をリストに入れてリストで検索しています。郵便番号のGoogleスプレッドシートは124,690行ありますが、問題無い速度で動作します。動作速度はビデオで確認できます。ページの最後にあるダウンロードセクションからソースコードをダウンロードできます。

このアプリでは読み取りだけ行うのでこのページに従ってあらかじめサービスアカウント作成する必要はありません。読み取るGoogleスプレッドシートのスプレッドシートIDは必要ですのでここを読んでスプレッドシートIDの取得方法を理解してください。

[プロジェクト]メニューから[新規プロジェクトを始める]を選択し、"Zip2Address“と名前を付けます。

Googleスプレッドシートの作成

郵便番号データの取得

• 日本郵便のサイトから全国の郵便番号データをダウンロードします。

  • URL: https://www.post.japanpost.jp/zipcode/dl/roman-zip.html

データの加工

• ダウンロードしたデータからローマ字列を削除します。
• Shift JISからUTF-8に文字コードを変換して、CSVファイルとして保存します。KEN_ALL_ROME_UTF8.csv という名前にしました。

Googleドライブにアップロード

• KEN_ALL_ROME_UTF8.csv をGoogleドライブにアップロードします。
• アップロードしたKEN_ALL_ROME_UTF8.csv をGoogleスプレッドシートで開きます。これでKEN_ALL_ROME_UTF8という名前のGoogleスプレッドシートができます。

Googleスプレッドシートの共有

このアプリはGoogleスプレッドシートを読み取るだけなので、Googleスプレッドシートのドキュメントが「リンクを知っている全員が閲覧できる」に設定します。

デザイン編集

Screen1のタイトルを"郵便番号から住所検索"にします。

このアプリでは郵便番号を入力してGoogleスプレッドシートから住所を取得してアプリで表示するので、必要なコンポーネントを配置します。

水平配置内にラベル（ラベル1）、テキストボックス(三桁)、ラベル（ラベル2）、テキストボックス(四桁)、ボタン(消去)を配置します。

その下にボタン(住所検索)とラベル（住所）を配置します。そして、非可視コンポーネントのスプレッドシート（スプレッドシート1） です。それぞれのコンポーネントの名前はカッコ内のものです。

プロパティ設定について

• ラベルと消去以外のボタンのフォントサイズ=18.0
• ラベル1: テキスト="郵便番号"
• ラベル2: テキスト="-“
• 三桁: 横幅=38ピクセル、ヒント="三桁"
• 四桁: 横幅=50ピクセル、ヒント="四桁"
• 消去: 横幅=32ピクセル、背景の色=白
• 住所検索: テキスト="住所検索"
• 住所: テキスト="住所"
• スプレッドシート1：使用するスプレッドシートの スプレッドシートID を取得し、それをプロパティのスプレッドシートIDに設定してください

  • スプレッドシートIDは以下の手順で取得できます：

    • スプレッドシートを開く。
    • URL の中に含まれる「docs.google.com/spreadsheets/d/」に続く文字列（例：1A2B3C4D5E6F7G8H）がスプレッドシートIDです。
    • よくわからない場合は 1_QEuK-BajSgInIoC6GGMI7LQ0rjnaN-eRZ24dLMNOkA を使ってください。このスプレッドシートのスプレッドシートIDです。

ブロック編集機能を使用したプログラミング

Google Sheets APIを使ってタスク管理をするアプリを作ります

このチュートリアルでは、Google Sheets APIを活用して、Googleスプレッドシートをデータベースとして使用するアプリを作成します。このアプリは、データベースアプリに必要な基本的なCRUD機能（作成：Create、読み取り：Read、更新：Update、削除：Delete）を実現しています。また、複数のスマートフォンから同時にアクセスすることが可能で、Googleスプレッドシート上でデータを変更すると、アプリの表示内容にもリアルタイムで反映されます。ソースコードは、ページ末尾のダウンロードセクションから入手できます。

App Inventorにはラジオボタンがありません。このチュートリアルではチェックボックスをラジオボタンのように使う方法も学べます。

このアプリを作成するためには、Googleスプレッドシートへの読み書きを行う準備が必要です。以下の手順を事前に完了してください：

1. サービスアカウントの作成

   • サービスアカウントを作成し、秘密鍵（JSONファイル）をダウンロードしてください。詳細な手順は、このページに記載されています。

2. スプレッドシートIDの取得

   • 使用するGoogleスプレッドシートのスプレッドシートIDを取得してください。取得方法については、こちらを参考にしてください。

また、このチュートリアルでは簡略化のため、アプリで管理するタスクの数を最大10個に制限しています。

[プロジェクト]メニューから[新規プロジェクトを始める]を選択し、"TaskManager“と名前を付けます。

Googleスプレッドシートの作成

ここにある手順でGoogleスプレッドシートを作成し、データを入力します。列としては"タスク“、"説明“、"締切“、"担当者“、"進捗“を作りました。担当者が入力できるのでグループでタスク管理に使用できます。クリックするとGoogleスプレッドシートを見れます。シート名は"タスク“です。

Googleスプレッドシートの共有

ここにある手順でサービスアカウントのメールアドレスとそのシートを"編集者"権限で共有します。これでサービスアカウントにデータの読み書き権限が付与されます。

デザイン編集

“Screen1“のタイトルを"タスク管理アプリ"にします。"スクリーンを追加"ボタンをクリックして"edit“という名前のデータ編集用のスクリーンを追加しタイトルを"編集"にします。

“Screen1“

レイアウト パレットから テーブル配置コンポーネント をビューアーに追加し、列を1、行を10に、高さと横幅は"親要素に合わせる"に設定します。

各行にユーザーインターフェース パレットからチェックボックスを並べ名前を上から順に、"タスク1″から"タスク10″にします。

レイアウト パレットから 水平配置コンポーネント をテーブル配置コンポーネントの下に追加し、水平に整列するは"中央揃え"に、横幅は"親要素に合わせる"に設定します。その中にボタンを３個追加し、名前とテキストを左から"編集“、"削除“、"新規追加“にします。

非可視コンポーネントとしてストレージ パレットから スプレッドシートコンポーネントを、ユーザーインターフェース パレットから通知機能コンポーネントを2個追加します。スプレッドシート1の認証情報Jsonプロパティーにはあらかじめダウンロードしておいた秘密鍵をアップロードします。スプレッドシートIDプロパティーにはこれもあらかじめ取っておいたスプレッドシートIDを入力します。

“edit“

レイアウト パレットから テーブル配置コンポーネント をビューアーに追加し、列を3、行を6に、高さと横幅は"親要素に合わせる"に設定します。名前はテーブル配置1になっているはずです。

テーブル配置1の上から1、2、3行の1列にユーザーインターフェース パレットからラベルを並べ、テキストを"タスク"、"説明"、"締切"に変更します。5、6行の1列にユーザーインターフェース パレットからラベルを並べ、テキストを"担当者"、"進捗"に変更します。

テーブル配置1の上から1、2、3、5行の2列にユーザーインターフェース パレットからテキストボックスを並べ、名前を"タスク"、"説明"、"締切"、"担当者"に変更します。

テーブル配置1の上から4行の2列にユーザーインターフェース パレットからデートピッカーを、4行の3列にタイムピッカーを追加します。テキストをそれぞれ"締切日選択"と"締切時間選択"にします。

テーブル配置1の上から5行の2列にユーザーインターフェース パレットからスピナーを追加し、名前を"進捗"に、文字列から要素プロパティーに"未着手,作業中,完了"を入力します。

非可視コンポーネントとしてストレージ パレットから スプレッドシートコンポーネントを、ユーザーインターフェース パレットから通知機能コンポーネントを追加します。

スプレッドシート1の認証情報Jsonプロパティーにはあらかじめダウンロードしておいた秘密鍵をアップロードします。スプレッドシートIDプロパティーにはこれもあらかじめ取っておいたスプレッドシートIDを入力します。

ブロック編集機能を使用したプログラミング

Google Sheets APIを使って画像ファイルのカタログアプリを作ります

このチュートリアルでは、Google Sheets APIを使ってGoogleスプレッドシートに入力されたデータを表示するアプリを作ります。複数台のスマホからの同時アクセスも可能ですし、Googleスプレッドシートでデータを変更するとアプリに表示されるデータもリアルタイムで反映されます。ページの最後にあるダウンロードセクションからソースコードをダウンロードできます。

このアプリでは読み取りだけ行うのでこのページに従ってあらかじめサービスアカウント作成する必要はありません。読み取るGoogleスプレッドシートのスプレッドシートIDは必要ですのでここを読んでスプレッドシートIDの取得方法を理解してください。

[プロジェクト]メニューから[新規プロジェクトを始める]を選択し、"ImageCatalog“と名前を付けます。

Googleスプレッドシートの作成

ここにある手順でGoogleスプレッドシートを作成し、データを入力します。こんな感じで入力しました。クリックするとGoogleスプレッドシートを見れます。シート名は"画像“です。

Googleスプレッドシートの共有

このアプリはGoogleスプレッドシートを読み取るだけなので、Googleスプレッドシートのドキュメントが「リンクを知っている全員が閲覧できる」に設定します。

デザイン編集

Screen1のタイトルを"画像カタログ"にします。

このアプリではGoogleスプレッドシートから名前、アプリ名、説明、画像URLを取得してアプリで表示するので、表示に必要なコンポーネントを配置します。

上から順に、名前選択用にスピナー（名前選択スピナー）、水平配置内にラベルを２個（ラベル2、アプリ名）、ラベル（説明）、ウェブビュー（画像ウェブビュー）、そして非可視コンポーネントのスプレッドシート（スプレッドシート1） です。それぞれのコンポーネントの名前はカッコ内のものです。

プロパティ設定について

• ラベル2：テキスト="アプリ名："
• スプレッドシート1：使用するスプレッドシートの スプレッドシートID を取得し、それをプロパティのスプレッドシートIDに設定してください

  • スプレッドシートIDは以下の手順で取得できます：

    • スプレッドシートを開く。
    • URL の中に含まれる「docs.google.com/spreadsheets/d/」に続く文字列（例：1A2B3C4D5E6F7G8H）がスプレッドシートIDです。
    • よくわからない場合は 1YhL3cK2hcg2HvpgK8FNJEyRkRyak9G3kE-HKAoQsF68 を使ってください。このスプレッドシートのスプレッドシートIDです。

ブロック編集機能を使用したプログラミング