GSP910

概要

このラボの目標は、AppSheet を使用してアプリの複数のデータソースからデータを接続および構成することです。

ラボでは、AppSheet を使用して、2 つ目のデータソースからのデータを活用し、基本的なアプリケーションを追加機能で強化します。AppSheet エディタを使用して、アプリで利用するデータ型を設定し、データソースやテーブル間の関係を作成することで、アプリにさらなる機能を追加します。

目標

このラボでは、次のタスクの実行方法について学びます。

• AppSheet UI を使用して、複数のデータソースからのデータを利用するアプリを構成する。
• 別の Google スプレッドシートを使用して、アプリに 2 つ目のデータソースを追加する。
• アプリで使用するテーブルのデータのデータ型を構成する。
• 既存のテーブルと新しいテーブルの間に関係を作成する。
• 新しく追加および変更されたデータが、基になる Google スプレッドシートに存在することを確認する。

設定と要件

[ラボを開始] ボタンをクリックする前に

こちらの説明をお読みください。ラボには時間制限があり、一時停止することはできません。タイマーは、ラボ用のリソースを利用できる時間を示しており、[ラボを開始] をクリックするとスタートします。

このハンズオンラボでは、シミュレーションやデモ環境ではなく実際のクラウド環境を使って、ラボのアクティビティを行います。そのため、ラボの受講中に AppSheet にログインしてアクセスするための新しい認証情報が一時的に提供されます。

必要なもの

このラボを完了するためには、下記が必要です。

• 標準的なインターネット ブラウザ（Chrome を推奨）
• ラボを完了するために十分な時間

注: このラボの実行には、シークレット モードまたはシークレット ブラウジング ウィンドウを使用してください。これにより、個人アカウントと受講者アカウント間の競合を防ぐことができます。

ラボを開始して Appsheet にログインする方法

1. 準備ができたら、[ラボを開始] をクリックします。

   [ラボの詳細] ペインに、このラボで Appsheet にログインするために必要な一時的な認証情報が表示されます。

   ラボの料金をお支払いいただく必要がある場合は、表示されるダイアログでお支払い方法を選択してください。

   注: 他の認証情報を使用すると、エラーが表示されたり料金が発生したりします。

2. [AppSheet を開く] をクリックします。

   ラボでリソースがスピンアップし、別のタブで [ログイン] ページが表示されます。

   ヒント: タブをそれぞれ別のウィンドウで開き、並べて表示しておきましょう。

3. [Google でログイン] をクリックします。

4. 必要に応じて、下のユーザー名をコピーして、[ログイン] ダイアログに貼り付けます。

   {{{user_0.username | "Username"}}}

5. [次へ] をクリックします。

6. 以下のパスワードをコピーして、[ようこそ] ダイアログに貼り付けます。

   {{{user_0.password | "Password"}}}

7. [次へ] をクリックします。

8. [同意] をクリックして利用規約に同意します。

9. [続行] をクリックして、Google AppSheet のポリシーと利用規約に同意します。

10. AppSheet の同意ページで、[許可] をクリックします。これにより、AppSheet は Google Cloud Skills Boost アカウントに関連付けられている Google ドライブ フォルダにアクセスできます。

11. これで、AppSheet にログインできました。

    必要に応じて [推奨事項の質を上げるために、ご自身について教えてください] ダイアログを閉じ、AppSheet の [MyApps] ページを表示します。

    まだアプリがないため、[MyApps] ページは空です。

タスク 1. アプリをコピーする

自分用または会社用のアプリを開発する場合、通常はプロジェクトのタイムラインに沿って、段階的にアプリを構築します。

このラボ環境でアプリの構築を続けるには、まず前回のラボで構築したアプリをコピーする必要があります。

アプリを AppSheet アカウントにコピーする

1. 別のブラウザタブでリンクを開き、Customer Contacts アプリを AppSheet アカウントにコピーします: Customer Contacts アプリ。

2. 左側のペインで [Copy app] をクリックします。

3. [Copy App] フォームで、次の設定を指定します。残りの設定はデフォルト値のままにしてください。

   アプリ名

   お客様の連絡先

4. [Copy app] をクリックします。

   また、AppSheet UI の [アプリ] から [My apps] ページにアクセスすることもできます。

アプリは元の連絡先のデータソースに基づいて設定されており、アプリの機能を引き続き構築できるようになりました。

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。 アプリを作成する

タスク 2. 2 つ目のデータソースを使用してアプリを設定する

現在、[Customer contacts] アプリでは、サンプルの個人の連絡先情報を含む Google スプレッドシートを使用しています。

このタスクでは、企業情報を含む 2 つ目の Google スプレッドシートをアプリに追加します。

アプリのデータを選択する

AppSheet では、アプリで使用するデータファイルをテーブルと呼びます。テーブルは、スプレッドシートの行と列の構造を表すもので、すべてのデータはスプレッドシートに保存されます。このテーブルの情報がアプリの定義の一部として扱われます。

通常、アプリ作成時の最初のステップのひとつが、テーブルをアプリに追加することです。

アプリの作成後にテーブルを追加するには、次の手順を行います。

1. 以下のリンクをコピーして、別のブラウザタブに貼り付けます: A copy of companies。

2. [コピーを作成] をクリックして、スプレッドシートのコピーを Google ドライブのフォルダに作成します。

3. シートの左上隅にあるファイル名部分をクリックし、名前を「companies」に変更します。

   

4. drive.google.com に移動して、ファイルが [マイドライブ] フォルダに保存されていることを確認します。

   

5. Customer Contacts - AppSheet UI で、左側のナビゲーション バーを使用して、[Data] > [Contacts] に移動します。

   

6. アプリに 2 つ目のデータソースを追加するには、[Data] の横にある [Add new Data]（+）をクリックします。

7. [Add data] フォームで、[Google スプレッドシート] を選択します。

新しいデータを追加する際にエラーが発生した場合は、ページを更新してから再度 [Add data] を試してください。

8. ファイル選択ツールで、前のステップでアップロードした companies シートを選択し、[Select] をクリックします。

9. [Create a new table] フォームで、デフォルト設定のまま [Add 1 table] をクリックします。

   このダイアログの設定では、スプレッドシートから特定のワークシートや、別の種類のデータソースを選択できます。さらに、アプリのユーザーがデータを変更できるかどうかを設定することも可能です。

   注: AppSheet エディタは、ワークシートごとに 1 つのテーブルのみ認識できます。同じワークシートに複数のテーブルがある場合は、テーブルをワークブックまたは Google スプレッドシートの新しいタブに移動する必要があります。

AppSheet によって、アプリに [companies] テーブルが追加されます。このテーブルには、さまざまなサンプル企業の情報が含まれています。

10. AppSheet のアプリのライブ プレビュー機能を使用して、新しく追加したテーブルのデータをプレビューします。

    

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。 2 つ目のデータソースを使用してアプリを設定する

タスク 3. アプリのデータ構造を構成する

データソースがアプリのテーブルとして追加されると、AppSheet は各列ヘッダーを読み取ってアプリの列構造を定義します。列ヘッダーは、データを保存する各列のデータソースに必要です。

このタスクでは、AppSheet が推測してアプリ用に設定した列の型とプロパティ（デフォルトの構造）を確認し、必要に応じて更新します。

contacts の列構造を更新する

1. AppSheet エディタの左側のナビゲーション メニューで、[Data] を選択します。

2. contacts テーブルの列の構造を調べるには、[contacts] をクリックします。

   

以下の表は、AppSheet が推測した列と、その一部のプロパティを示しています。

3. 各列の型やその他のプロパティを変更する必要があるかを確認します（AppSheet エディタで右にスクロールすると、すべての列のプロパティが表示されます）。

   Name	Type	Key?	Label?	Formula	Show?	Editable?	Require?
   _RowNumber （システム生成の仮想列）	Number
   ID	Number	オン			オン	オン	オン
   Email Address	Email				オン	オン	オン
   First Name	Name				オン	オン	オン
   Last Name	Name				オン	オン
   Phone	Text				オン	オン
   _ComputedName （システム生成の仮想列）	Name		オン	CONCATENATE([First Name]," ",[Last Name])	オン

   上記の列のプロパティのうち、更新する必要があると思われるものはどれですか。

   通常、必要な変更はアプリの要件によって異なります。このラボでは、上の表でハイライト表示されている列が、プロパティを変更する候補となります。

4. これは連絡帳アプリであるため、[First Name] 列のすべてのセルに有効なデータが必要です。そのため、この列の [Require?] プロパティをオンにする必要があります。

AppSheet によって、[Phone] 列の [type] プロパティが [text] に設定されていることに注意してください。

この設定では、列に 1 行のテキストを入力できます。ただし、この列には有効な電話番号を保存する予定のため、プルダウン リストを使用して type を [Phone] に変更します。

5. [SAVE] をクリックして、列の構成の変更を保存します。

companies の列構造を更新する

必要に応じて、同じ手順で companies テーブルの列構造を更新します。

1. この手順では、下の表でハイライト表示されている項目を参考にして、列のプロパティを更新します。

   Name	Type	Key?	Label?	Formula	Show?	Editable?	Require?
   _RowNumber （システム生成の仮想列）	Number
   ID	Number	オン			オン	オン	オン
   Phone	Text				オン	オン	オン
   Company Name	Name				オン	オン	オン
   Industry	Text				オン	オン	オン
   Business Address	Address				オン	オン	オン
   Shipping Information	LongText		オン		オン	オン

2. 上の表でハイライト表示されている列ごとに、前の手順を繰り返します。ただし、[Industry] 列は次のステップで更新されるため、除外してください。

AppSheet は、列の列挙型をサポートしています。これらの型の列は、許可される値の固定リストに含まれている 1 つ以上の値のみに制限されます。このステップでは、[Industry] 列の [type] プロパティを [Enum]（単一の値）または [EnumList]（複数の値）に変更します。

1. [Industry] 列の左側にある鉛筆アイコンをクリックします。

   

2. 列の詳細フォームで次のように指定し、残りの設定はデフォルト値のままにします。

   プロパティ	値 （入力または選択）
   Type	Enum
   Type Details Values	Accounting Finance Healthcare Retail Travel and Hospitality

3. 許可値のリストに追加する列挙値ごとに [Add] をクリックします。

   注: 参考情報です
   [Allow other values] オプションを使用すると、ユーザーはプルダウン リストの使用できる値に加えて、任意の値を入力できます。
   [Auto-complete other values] オプションを使用すると、ユーザーは以前入力した値のセットの中から簡単に選択できます。すべてのエントリが同じ形式で送信されるため、入力ミスを防げます。
   [Input mode] を設定すると、アプリでの値の表示方法を、自然に配置したボタンにする、縦に積み重ねる、プルダウン形式のラジオボタンにする、のいずれかから選択できます。

4. すべての値を入力したら、フォームの [Done] をクリックします。

5. [SAVE] をクリックして、アプリの構成の変更を保存します。

アプリの変更をプレビューする: companies

AppSheet エディタで変更をプレビューするには、companies データのビューを作成します。

1. AppSheet エディタで [App]（）に移動し、[Views]（）をクリックします。

2. [Primary navigation] の新しいビューを追加するには、[+] をクリックします。

3. [Add a new view] フォームで、[Create a new view] をクリックします。次のように指定し、残りの設定はデフォルトのままにします。

   プロパティ	値（入力または選択）
   View name	companies
   For this data	companies

4. 新しいビューを保存するには、[Save] をクリックします。

5. ライブ アプリ プレビューで変更を確認します:

• [companies] テーブルを選択し、ビューに表示された会社カードの中から 1 つ選択します。

• 会社の詳細ページで、鉛筆アイコンをクリックして会社レコードを編集します。

  

• ページをスクロールし、プルダウンを使用して [Industry] 列を選択します。enum の値が表示されるので、その中からいずれかの値を選択します。

  

• [Save] をクリックしてデータの変更を保存します。

詳細については、列のデータ型のドキュメントをご覧ください。

タスク 4. アプリのデータ構造を再生成する

AppSheet はデータソースから列のメタデータを読み取り、アプリ内の列構造を定義します。スプレッドシートの場合、AppSheet は列ヘッダーを使用してこの情報を取得します。スプレッドシートの列を変更するたびに、アプリの列構造を再生成する必要があります。再生成しないと、AppSheet はデータの読み書きに使用する列を正しく認識できず、アプリは動作を停止します。

このタスクでは、Google ドライブのスプレッドシートに新しい列を追加した後、アプリのデータ構造を再生成します。

contacts シートに新しい列を追加する

1. ブラウザタブを開き、Google ドライブに移動します。すでに開いている場合は、そのタブに切り替えます。

2. Google ドライブで appsheet/data フォルダを開きます。appsheet をダブルクリックして開き、次に data をダブルクリックします。

3. CustomerContacts-NNNNNNN フォルダを開きます。

   注: 実際のフォルダ名には、NNNNNNN の部分に数字が含まれます。

4. contacts シートを開きます。

5. 1 行目の F 列に、値が「Last Contacted」の新しい列ヘッダーを追加します。

   この新しい列を使用して、連絡した人の最終連絡日時を保存します。

   

6. ブラウザで AppSheet エディタに切り替え、[Data] > [contacts] に移動します。

7. [contacts] タイルのその他アイコン（3 つの点）をクリックし、[Regenerate Schema] を選択します。

8. [Regenerate] をクリックして確定します。

   AppSheet によって [contacts] テーブルの列構造が再生成され、ライブ プレビューでアプリが再同期されます。

AppSheet は新しい列の型も推測しますが、必ずしも意図した型になるとは限りません。

9. [Type] のプルダウン リストを使用して、[Last Contacted] 列の型を [DateTime] に変更します。

10. この列にすべての連絡先が値を持つ必要はないため、列のプロパティを右にスクロールして、[Require?] プロパティのチェックボックスがオフになっていることを確認します。オンになっている場合は、プロパティのチェックボックスをオフにします。

11. [SAVE] をクリックして、アプリの構成の変更を保存します。

アプリで新しい列をプレビューする

1. アプリ ライブ プレビューで、リストから連絡先を 1 つ選択します。

2. 鉛筆アイコンをクリックして、選択した連絡先を編集します。

3. 一番下までスクロールしてカレンダー アイコンをクリックし、連絡先の [Last Contacted] の値を設定します。

4. アプリのプレビューで [Save] をクリックして、連絡先のデータを保存します。

5. Google ドライブで contacts スプレッドシートを開き、アプリで更新した連絡先の [Last Contacted] 列に更新後の値が反映されていることを確認します。

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。 アプリのデータ構造を再生成する

タスク 5. テーブル間の関係を作成する

contacts スプレッドシートに登録されている人物は、companies スプレッドシートに情報が保存されている会社に所属していると考えられます。

2 つのテーブルには相互に関係があります。AppSheet では、Ref という特別な列の型を使用して、関連するテーブルの行間の参照を定義できます。

このタスクでは、Ref 列型を使用して、2 つのテーブルの行間の関係を定義します。

Ref 列型の詳細については、AppSheet ドキュメントをご覧ください。

contacts スプレッドシートで参照列を設定する

1. Google ドライブの contacts スプレッドシートで、1 行目 G 列に値が「Company ID」の新しい列ヘッダーを追加します。

   この新しい列は、連絡先が関連付けられている会社の ID を保存するために使用します。

   

2. ブラウザで AppSheet エディタに切り替え、[Data] > [Contacts] に移動します。

3. [contacts] タイルのその他アイコン（3 つの点）をクリックし、[Regenerate Schema] を選択します。

4. 次に、[Regenerate] をクリックして確定します。 AppSheet によって [contacts] テーブルの列構造が再生成され、新しい [Company ID] 列が列のリストに追加されます。

5. [Company ID] 列の左側にある鉛筆アイコンをクリックして、列のプロパティを編集します。

6. 列の詳細フォームで次のように指定し、残りの設定はデフォルト値のままにします。

   プロパティ	値 （入力または選択）
   Type	Ref
   Source table	companies

   これにより、列の型が [companies] テーブルを参照する [reference] に変更されます。

   アプリで連絡先を追加または更新する際、関連付けられた会社の情報を含めて、AppSheet は contacts スプレッドシートのこの列に [Company ID] を自動的に保存します。

7. この列のアプリに表示される値は実際の会社名であるため、列の表示名を変更する必要があります。列の詳細フォームを下にスクロールして、[Display] セクションを開きます。次に、[Display name] フィールドの expression assistant アイコンをクリックします。

8. [Display Name expression for column Company ID (Text)] の [Expression Assistant] フォームで、「Company」と入力します。

9. expression assistant フォームで [Save] をクリックします。

10. [Done] をクリックして、列のプロパティの変更を保存します。

11. 最後に、AppSheet エディタで [Save] をクリックして変更を保存し、ライブ プレビューでアプリを更新します。

アプリで [Company] 列をプレビューする

1. アプリ ライブ プレビューで、contacts リストから連絡先を 1 つ選択します。

2. 鉛筆アイコンをクリックして、選択した連絡先を編集します。

3. 一番下までスクロールして、会社のプルダウン リストから [Company] を選択します。AppSheet が companies テーブルからリストを自動的に入力します。

4. アプリのプレビューで [Save] をクリックして、連絡先のデータを保存します。

5. Google ドライブで contacts スプレッドシートを開き、アプリで更新した連絡先に、選択した会社の ID が含まれていることを確認します。

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。 テーブル間の関係を作成する

お疲れさまでした

AppSheet を使用して、アプリの複数のデータソースからのデータが正しく構成されました。

このラボでは、以下の操作について学習しました。

• AppSheet UI を使用して、複数のデータソースからのデータを利用するアプリを構成する。
• 別の Google スプレッドシートを使用して、アプリに 2 つ目のデータソースを追加する。
• アプリで使用するテーブルのデータのデータ型を構成する。
• 既存のテーブルと新しいテーブルの間に関係を作成する。
• 新しく追加および変更されたデータが、基になる Google スプレッドシートに存在することを確認する。

次のステップと詳細情報

• AppSheet アプリのユーザー エクスペリエンスの実装というタイトルのラボと、Building No-Code AppSheet Apps というタイトルのコースの他のラボをご確認ください。
• Google Workspace ラーニング センター

Google Cloud トレーニングと認定資格

Google Cloud トレーニングと認定資格を通して、Google Cloud 技術を最大限に活用できるようになります。必要な技術スキルとベスト プラクティスについて取り扱うクラスでは、学習を継続的に進めることができます。トレーニングは基礎レベルから上級レベルまであり、オンデマンド、ライブ、バーチャル参加など、多忙なスケジュールにも対応できるオプションが用意されています。認定資格を取得することで、Google Cloud テクノロジーに関するスキルと知識を証明できます。

マニュアルの最終更新日: 2024 年 10 月 30 日

ラボの最終テスト日: 2024 年 10 月 30 日

Copyright 2026 Google LLC. All rights reserved. Google および Google のロゴは Google LLC の商標です。その他すべての企業名および商品名はそれぞれ各社の商標または登録商標です。