会員サイト

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です。

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

スーパーマリオ風の横スクロールアクションゲームです

有名なスーパーマリオのように画面を横にスクロールしながら進んでいくゲームです。このYouTubeビデオを参考にして作っています。このアプリでは画像スプライトの位置とサイズを動的に調整しているのでエミュレーターを使うとスクリーンの確認に便利です。エミュレーターのインストールと使い方はこちらから。

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

ページの最後にあるダウンロードセクションから使用する画像と音源をクリックしてダウンロードしてください。

横スクロールの実現方法

画像を描画するにはドローイングとアニメーションパレットのキャンバスコンポーネントに画像スプライトを使いますが、画面を横にスクロールするには少し工夫が必要です。ここではキャンバスコンポーネントの横幅をスクリーンの横幅の３倍にして、スクリーンの、右側から画像が入ってきて左側に出ていくようにしています。座標は下図のようにキャンバスの左上が原点でX座標は右に行くほど大きくなり、Y座標はしたに行くほど大きくなります。このようにキャンバスを配置するためには、Screen1の水平に整列するプロパティは"中央揃え"にする必要があります。

デザイン編集

Screen1のタイトルを"Speed Jumper"にします。タイトル表示可能のチェックを外し、水平に整列するプロパティを"中央揃え"にします。

ダウンロードセクションからダウンロードした画像と音源をすべて、メディアのファイルをアップロードボタンをクリックしてアップロードします。

スコア表示とスタートボタンの配置

レイアウト パレットから 水平配置コンポーネント を1個ビューアーにドラッグアンドドロップします。″水平配置1″の水平に整列するは"中央揃え"にし、横幅は"親要素に合わせる"に設定します。″水平配置1″に、ユーザーインターフェース パレットから ラベル を2個、ボタンを2個配置し、"ラベル1“の テキスト を"スコア："に、"ラベル2“の名前は"スコア"、 テキスト を"0″にします。ボタンはそれぞれ１個目は名前を"スタート"、テキスト も"スタート"に、２個目は名前を"リスタート"、テキスト も"リスタート"にします。

画像スプライトの配置

ドローイングとアニメーション パレットから、 キャンバスコンポーネントをビューアーにドラッグアンドドロップして、高さと横幅は"親要素に合わせる"にします。

画像スプライト を 6個 “キャンバス1 “に追加し、名前を順番に"ランナー"、"雲"、"山"、"地面"、"地面2″、"岩"にします。画像プロパティはそれぞれ boy1.png 、 cloud.png 、 mountain.png 、 platform.png 、 platform2.png 、 rock.png にします。画像スプライトの位置とサイズはブロック編集で動的に調整するのでここでは気にしなくて構いませんが、"ランナー"と"岩"は背景よりも前に表示するためにZを2にします。

サウンドの設定

メディア パレットから サウンド コンポーネントを2個追加し、それぞれ"ジャンプ音"、"ゲームオーバー音"という名前を付けます。

“ジャンプ音"の ソース に jump05.mp3 を、"ゲームオーバー音"の ソース に failure.mp3 を指定します。

タイマーの設定

センサー パレットから タイマー コンポーネントを5個追加し、名前を順番に"ロードタイマー"、"背景タイマー"、"ジャンプタイマー"、"アニメタイマー"、"スコアタイマー"という名前を付けます。プロパティは次の表のように設定します。タイマーをたくさん使っていますが、適宜タイマーを有効にしたり無効にしたりして、待ち時間のある繰り返し処理をしています。

	タイマー常時起動	タイマー有効	タイマー間隔
ロードタイマー	チェック無し	チェック	25
背景タイマー	チェック無し	チェック無し	48
ジャンプタイマー	チェック無し	チェック無し	20
アニメタイマー	チェック無し	チェック無し	70
スコアタイマー	チェック	チェック無し	333

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

英単語を読み上げて音声認識機能で発音チェックをする学習アプリを作ります

このチュートリアルでは、ランダムに選んだ英単語を読み上げて、音声認識機能で発音チェックをする学習アプリを作成します。ページの最後にあるダウンロードセクションからソースコードをダウンロードできます。

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

デザイン編集

Screen1のタイトルを"発音学習アプリ"にします。

コンポーネントの追加

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

“水平配置1“

• ユーザーインターフェース パレットから ラベル と スピナー を追加し、それぞれ"ラベル2″、"レベル"に名前を変更します。
• “ラベル2″の テキスト を"難易度"に設定します。
• “レベル"スピナーの文字列から要素プロパティーは"初級,中級,上級"、選択要素は"初級"にします。

“水平配置2″

• ユーザーインターフェース パレットから ラベルを2個追加し、それぞれ"ラベル3″、"出題単語"に名前を変更します。
• “ラベル3″の テキスト を"出題単語:"に設定します。
• “出題単語"の テキスト を空白に設定します。

“水平配置3“

• ユーザーインターフェース パレットから ラベルを2個追加し、それぞれ"ラベル4″、"聞き取り単語"に名前を変更します。
• “ラベル4″の テキスト を"聞き取り単語:"に設定します。
• “聞き取り単語"の テキスト を空白に設定します。

“ラベル1"

• “水平配置1“の上にユーザーインターフェース パレットからラベル を追加し、名前を"ラベル1″、テキスト を"単語を聞いて、発音してみましょう！"に設定します。

“単語を聞く"

• “水平配置2“と“水平配置3“の間にユーザーインターフェース パレットからボタン を追加し、名前を"単語を聞く"、テキスト を"単語を聞く"に設定します。

“発音を確認"

• “水平配置3“の下にユーザーインターフェース パレットからボタン を追加し、名前を"発音を確認"、テキスト を"発音を確認する"に設定します。

“結果“

• “発音を確認"ボタンの下にユーザーインターフェース パレットからラベル を追加し、名前を"結果"、テキスト を"結果"、テキストカラーを赤に設定します。

非可視コンポーネント

• メディア パレットから テキスト読み上げ コンポーネントを1つ、音声認識 コンポーネントを1つ追加します。

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

有名なブロックくずしゲームです

有名なゲームを作りながら、同じコンポーネントがたくさんあるときの、"すべてのコンポーネント“ブロックを使ったループ処理の仕方を学びます。

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

ページの最後にあるダウンロードセクションから使用する画像と音源をクリックしてダウンロードしてください。

デザイン編集

Screen1のタイトルを"ブロック崩しゲーム"にします。

ダウンロードセクションからダウンロードした画像と音源をすべて、メディアのファイルをアップロードボタンをクリックしてアップロードします。

ブロックの配置

ドローイングとアニメーション パレットから、 キャンバスコンポーネントをビューアーにドラッグアンドドロップして、高さと横幅は"親要素に合わせる"にします。

画像スプライト を 5 個 “キャンバス1 “に追加し、それぞれの 画像プロパティ を blockgreen.png に設定します。以下のように X プロパティと Y プロパティを調整し、横一列に配置します：

• X: 0, 68, 136, 204, 272
• Y: 25

同様に、別の 画像スプライト を 5 個 “キャンバス1" に追加し、画像プロパティ を blockblue.png に設定。以下のように配置します：

• X: 0, 68, 136, 204, 272
• Y: 60

同じ手順で 画像スプライト を 5 個追加し、画像プロパティ を blockyellow.png に設定し、次のように配置します：

• X: 0, 68, 136, 204, 272
• Y: 95

ブロックを見やすくするために、"キャンバス1 “の背景色をライトグレーに変更します。ここまでの画面構成は、ブロックが3段に並び、各段がそれぞれの色で構成されます。

スコア表示とリスタートボタンの配置

レイアウト パレットから 水平配置コンポーネント を2個キャンバス1の下に追加します。1つ目は″水平配置1″、2つ目は″水平配置2″になります。

″水平配置1″に、ユーザーインターフェース パレットから ラベル を2つ配置し、"ラベル1“の テキスト を"得点"に、"ラベル2“の テキスト を"0″にします。″水平配置1″の水平に整列するは"中央揃え"にし、横幅は"親要素に合わせる"に設定します。

″水平配置2″に ユーザーインターフェースパレットからボタンコンポーネントを追加し、名前を"リスタート"、テキスト も"リスタート"にします。″水平配置2″の水平に整列するは"中央揃え"にし、横幅は"親要素に合わせる"に設定します。

パドルとボールの配置

ドローイングとアニメーション パレットから 画像スプライト を1個"キャンバス1″の下中央にドラッグアンドドロップし、名前を"パドル"、画像プロパティ を blockwhite.png に設定します。

同じパレットから ボール コンポーネントを1つ追加し、名前を"ボール"、半径 を10に設定します。

サウンドの設定

メディア パレットから サウンド コンポーネントを2個追加し、それぞれ"当り音"、"ゲームオーバー音"という名前を付けます。

“当り音"の ソース に hit.mp3 を、"ゲームオーバー音"の ソース に over.mp3 を指定します。

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

入力した言葉を多言語に翻訳して結果を読み上げるアプリを作ります

このチュートリアルでは、入力したテキストを多言語に翻訳し、結果を音声で読み上げるアプリを作成します。App Inventor 2日本語化プロジェクトでは翻訳コンポーネントが動作しないため、Google Apps Scriptで作成した無料のウェブアプリを呼び出して翻訳処理を行います。このウェブアプリは自由に利用可能です。ページの最後にあるダウンロードセクションからソースコードをダウンロードできます。

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

デザイン編集

Screen1のタイトルを"翻訳"にします。

コンポーネントの追加

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

“水平配置1“

• ユーザーインターフェース パレットから ラベル と スピナー を追加し、それぞれ"入力言語ラベル"、"入力言語"に名前を変更します。
• “入力言語ラベル"の テキスト を"入力言語"に設定します。
• “入力言語"スピナーの文字列から要素プロパティーは"英語,日本語,スペイン語,フランス語,ドイツ語"、選択要素は"英語"にします。

“水平配置2″

• ユーザーインターフェース パレットから ラベル と スピナー を追加し、それぞれ"出力言語ラベル"、"出力言語"に名前を変更します。
• “出力言語ラベル"の テキスト を"出力言語に設定します。
• “出力言語"スピナーの文字列から要素プロパティーは"英語,日本語,スペイン語,フランス語,ドイツ語"、選択要素は"日本語"にします。

“水平配置3“

• ユーザーインターフェース パレットから ラベル、テキストボックス、ボタン を追加し、それぞれ"入力ラベル"、"入力"、"入力消去"に名前を変更します。
• “入力ラベル"の テキスト を"入力"に設定します。
• “入力"の横幅は親要素に合わせるにし、マルチライン をチェックしてヒントは空白にします。
• “入力消去"の テキスト を"X"、横幅を32ピクセルに設定します。

“水平配置4“

• ユーザーインターフェース パレットから ラベルとテキストボックスを追加し、それぞれ"出力ラベル"、"出力"に名前を変更します。
• “出力ラベル"の テキスト を"翻訳結果出力"に設定します。
• “出力"の 横幅は親要素に合わせるにしマルチラインをチェックしてヒントは空白にします。

“翻訳ボタン“

• “水平配置4″の下にユーザーインターフェース パレットからボタン を追加し、名前を"翻訳ボタン"、テキスト を"翻訳実行"に設定します。

非可視コンポーネント

• メディア パレットから テキスト読み上げ コンポーネントを1つ、接続 パレットから ウェブ コンポーネントを1つ追加します。

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

人工知能の機械学習モデルを使って画像を精度良く分類するアプリを作りましょう

このチュートリアルでは、機械学習モデルを使用し、画像を自動的に分類するアプリを作成します。カメラで撮影した画像をAIが解析し、その結果を英語で表示し、さらに日本語に翻訳して音声で読み上げます。

ページの最後にあるダウンロードセクションからアセットに使用するindex.htmlファイルをダウンロードしてください。 また、ソースコードもダウンロードできます。

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

アプリの概要

このアプリでは、Googleが提供するオープンソースの機械学習ライブラリである TensorFlow.js を使用して画像分類を行います。分類モデルには MobileNet を採用しており、簡単に他のモデルへ置き換えることも可能です。アプリの仕組みは次のようになっています。

1. 画像の取得: カメラで撮影した画像を外部サーバーにアップロードし、URLを取得します。
2. 画像の分類: ウェブビューで画像を表示し、JavaScript関数で画像の分類処理を行います。
3. 英日翻訳と音声読み上げ: 推論結果は英語で表示されますが、多言語翻訳アプリで使っているのと同じ翻訳方法で日本語に変換し、音声で結果を出力します。

このアプリでは、JavaScriptコードを含むHTMLファイル（index.html）をウェブビューで読み込み、JavaScript関数をアプリから呼び出すことで画像分類を実現しています。index.html の詳細はダウンロードセクションで確認できます。

デザイン編集

Screen1のタイトルを"ビジョンアプリ"にします。