画像カタログアプリ・テンプレート
このテンプレートでできること
「画像カタログアプリ」は、Googleスプレッドシートに登録した画像URLとタイトルを、スマホアプリ上に一覧表示できるテンプレートです。
スプレッドシートを編集するだけで、アプリ側の画像リストも自動的に更新されます。作品集、商品カタログ、観光写真集などにそのまま使えます。
使い方（セットアップ方法）
- App Inventorにアクセス
- 「プロジェクト」→「コンピューターからプロジェクトを(.aia)インポート」でaiaファイルを選択
- アプリを開いて「AIコンパニオン」で動作確認
- サンプル用の Googleスプレッドシート（画像URL＋タイトル＋説明など）を自分のGoogleアカウントにコピー
- App Inventor のデザイン編集内にあるスプレッドシート1のスプレッドシートIDを、自分のスプレッドシートIDに置き換え。詳細はこちらを参照。
- アプリを再度実行し、スプレッドシートの内容がアプリ側に表示されることを確認
アプリの基本操作
このアプリは以下の手順で利用できます：
- アプリが起動したら「名前」を選択
- スプレッドシートに登録したアプリ名、説明、画像を表示
- スプレッドシート側で名前、説明、画像URLなどを変更・追加すると、アプリを再起動した際に最新状態を反映
- 画像はURL形式（https://〜）で登録
アプリをカスタマイズする方法
このテンプレートは、以下のような改造が簡単にできます：
- 一覧表示のレイアウトを変更（リスト表示 → カード風レイアウトに変更するなど）
- 説明以外に「価格」、「カテゴリ」などの列を増やして、アプリ側にも表示項目を追加
- 画像をタップしたときに、別画面でより大きな画像＋詳細説明を表示
動作環境
・日本語化プロジェクトApp Inventorで動作確認済み
・Android端末で動作確認済み
・iOS版は一応動きますが、レイアウトが崩れます
改造サンプル集
ここでは、テンプレートを元に「初心者でも10〜15分でできる簡単な改造例」を紹介します。
- ブロック追加は最小限
- デザイン変更も少しだけ
- Google Sheets の構造を少し変更
①カタログに値段を追加
📌 できること
Google Sheets に値段を追加し、アプリ側でも値段を表示
🛠 必要な作業
- Google Sheets：値段列を追加
- デザイン編集：値段表示用のラベルを追加
- ブロック編集：受け取った値段データを表示
②説明読み上げ
📌 できること
Google Sheets の「説明」列に入っている内容を、アプリ内で テキスト読み上げコンポーネント を使って読み上げ
🛠 必要な作業
- デザイン編集：テキスト読み上げコンポーネントを追加
- ブロック編集：データの表示とともに「説明」を読み上げ
