Google Sheets API,チュートリアル,データベース,ユーティリティ

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ユーザーインターフェース パレットからラベルを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個、ユーザーインターフェース パレットから通知機能コンポーネントを1個追加します。スプレッドシートコンポーネントの名前はテーブルシート予約シートにします。

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

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

残りのコンテンツを表示するにはログインする必要がありますどうぞ . 会員ではないですか ? 入会のご案内

Google Sheets API,チュートリアル,データベース,ユーティリティ

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

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

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

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

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

郵便番号データの取得

データの加工

  • ダウンロードしたデータからローマ字列を削除します。
  • 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 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″にします。

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

非可視コンポーネントとしてストレージ パレットから スプレッドシートコンポーネントを、ユーザーインターフェース パレットから通知機能コンポーネントを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を入力します。

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

残りのコンテンツを表示するにはログインする必要がありますどうぞ . 会員ではないですか ? 入会のご案内