会員サイト

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を入力します。

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

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

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

郵便番号を検索するアプリを作ります

標準のApp Inventor 2日本語版にSQLiteエクステンション、Zipエクステンション、Fileエクステンションを追加して使用しています。また、簡単なSQL言語を使用しています。なお、Android 11以降ではREAD_EXTERNAL_STORAGEの権限が拒否される場合があるため、エラーが出る可能性があります。

ソースコードを見ながらこのチュートリアルを読んだ方がわかりやすいと思います。ページの最後にあるダウンロードセクションからソースコードをダウンロードしてからApp Inventorを開き、[ プロジェクト ]をクリックして[コンピュータからプロジェクト（.aia）をインポートします]を選択し、ソースコードを選択してインポートしてください。  

アプリの構造（流れ）

SQLite自体はAndroidに標準装備です。

データベースファイルの準備

• 全国郵便番号データベース（約12万件）を事前にSQLite形式で作成し、このファイルをZIP圧縮してアセットに含めます。App Inventorのアセットの制限（5MB）を超えないように圧縮しています。
• 圧縮ファイルがアセットにない場合、指定サーバーからデータベースZIPファイルをダウンロードして使用する機能もあります。

ZIPファイルの解凍とデータベースのインポート

• ZIPファイルを解凍し、SQLiteにインポートします。その後、都道府県リストを取得してスピナーで表示します。

都道府県から町域までの選択フロー

• 都道府県が選択されると、その都道府県内の市町村リストをスピナーに表示。
• 市町村が選択されると、指定市町村内の町域リストを表示。
• 最終的に町域が選択されると、郵便番号が表示されます。

郵便番号データベースファイルの作成(App Inventorは使いません)

郵便番号データの取得

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

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

データの加工

• ダウンロードしたデータからローマ字列を削除し、通し番号の列を追加します。
• Shift JISからUTF-8に文字コードを変換して、CSVファイルとして保存します。

SQLiteデータベースの作成

• SQLiteのGUIツール（例: DB Browser for SQLite）でデータベースを作成し、データをインポートします。
• テーブル構造は以下の通りです。

CREATE TABLE "japanzip" (
	"id"	INTEGER NOT NULL UNIQUE,
	"zip"	TEXT,
	"prefs"	TEXT,
	"city"	INTEGER,
	"street"	TEXT,
	PRIMARY KEY("id" AUTOINCREMENT)
);

• 作成したデータベースをjapanzip.sqliteとして保存し、ZIP圧縮してjapanzip.zipとします。

  • ZIPファイルのダウンロード: japanzip.zip

プロジェクトを作成

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

エクテンションの追加

デザイン編集

垂直配置レイアウトの設定

• 垂直配置レイアウトをビューアーにドラッグアンドドロップし、水平に整列するは"中央揃え"、横幅は"親要素に合わせる"に設定します。
• 以下のコンポーネントを順に追加します。それぞれのコンポーネントの名前はカッコ内のもの。

  • ラベル（タイトル）：背景色="#4285f4ff"、フォントサイズ=32、テキスト="郵便番号検索"、テキストカラー="白"。
  • ラベル（空白）：テキスト=空白。
  • スピナー（選択ドロップダウン）：目に見えるはチェックを外します。
  • ラベル（初期化ラベル）：フォントサイズ=10、テキスト="郵便番号データベースを初期化します。よろしければ下の初期化ボタンをクリックしてください。"、目に見えるはチェックを外します。
  • ボタン（初期化ボタン）：テキスト="初期化"、目に見えるはチェックを外します。
  • ラベル（住所ラベル）：テキスト="初期化中"、目に見えるはチェックを外します。
  • テキストボックス（郵便番号）：目に見えるはチェックを外します。
  • ボタン（リセット）：背景色="#4285f4ff"、テキスト="リセット"、テキストカラー="白"、太字フォントをチェック

非可視コンポーネントなど

• 接続 パレットから ウェブ を、ストレージ パレットから ファイル を追加。
• japanzip.zip ファイルをアセットにアップロードします。

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

お絵かきアプリを作りましょう

このチュートリアルでは、画面上で指を使って自由に絵を描ける お絵かきアプリ を作成します。クリアボタンで画面を消去し、何度でも描き直すことができます。

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

デザイン編集

キャンバスの追加

ドローイングとアニメーションパレットから、 キャンバスコンポーネントをScreen1にドラッグアンドドロップします。

キャンバスの高さと横幅を"親要素に合わせる"に変更します

キャンバス1のプロパティの高さと横幅を"親要素に合わせる"に変更します。これにより、画面全体に描画スペースが広がり、どのサイズの画面でも対応できるようになります。

画面クリアボタンを追加

ユーザーインターフェースパレットから、ボタンをキャンバスの下にドラッグアンドドロップし、テキストを"クリア"に設定します。

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

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

キャンバス.ドラッグイベントの追加

スマホを振ると話す機能としゃべる言葉の入力機能の追加

ここではスマホを振るとしゃべる機能としゃべる言葉を入力する機能を追加します。

App Inventorを起動してログインし、TalkToMeプロジェクトを開いてください。App Inventorは前回開いたプロジェクトを自動的に開くので、もうTalkToMeプロジェクトが開いてあるかもしれません。

デザイン編集

加速度センサーを追加

センサーパレットから、 加速度センサーコンポーネントをドラッグしビューアーに配置します。ドロップすると、ビューアー下部の非可視コンポーネントとマークされた領域に表示されます 。

ブロック編集

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

加速度センサーの揺れたらイベントをプログラム

話しをするアプリを作りましょう

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

デザイン編集

ボタンを追加

ボタンのテキストを変更

ボタン1のプロパティのテキストにある “ボタン1のテキスト”を消し、"話して！"と入力します。

テキスト読み上げコンポーネントの追加