GSP883

概要

このラボでは、アプリケーションの構築を迅速に始められるようにする AppSheet について説明します。

ラボでは、AppSheet を使用して、個人の連絡先を作成および管理する基本的なアプリケーションを作成します。まず、データソースとして機能するシンプルなスプレッドシートに接続し、アプリを使用して連絡先情報を読み取り、更新するビューを作成します。

演習内容

このラボでは、次のタスクを行います。

• Google アカウントで AppSheet にログインする。
• Google スプレッドシートをデータソースとして使用し、AppSheet UI を使ってアプリを作成する。
• AppSheet UI のライブ プレビュー機能を使用して、アプリの機能をプレビューする。
• アプリを使用して、既存の連絡先データの一部を変更する。
• アプリを使用して、新しい連絡先情報を追加する。
• 新しく追加および変更されたデータが、基になる 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. Google Drive 上でデータを設定する

大半のアプリには機能するためにデータが必要です。AppSheet でアプリを作成する前に、アプリで管理されるデータをプロビジョニングする必要があります。このタスクでは、アプリで使用するスプレッドシート データ ファイルと Google ドライブ フォルダを設定します。

スプレッドシートと Google ドライブを設定する

このアプリの場合、サンプルの個人の連絡先情報を含むスプレッドシートを使用します。

1. [contacts spreadsheet] をクリックしてシートを開きます。

2. [ファイル] > [コピーを作成] の順にクリックして、Personal Contacts という名前を付けます。

3. [コピーを作成] をクリックして、シートのコピーをマイドライブに保存します。

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。 スプレッドシートと Google ドライブを設定する

タスク 2. 最初の AppSheet アプリを作成する

AppSheet を使用してアプリを構築する方法は 3 つあります。

• データソースに接続する
• アイデアを出してゼロから作る
• テンプレートを使用する

このタスクでは、AppSheet UI を使用してデータソースに接続し、新しいアプリを作成します。前のタスクで Google ドライブに設定したスプレッドシートを、このアプリのデータソースとして使用します。

アプリを作成する

1. 別のブラウザタブで [AppSheet UI] に移動します。

2. [My Apps] ページで、[+ Create] をクリックしてアプリを追加します。

3. [App] > [Start with existing data] を選択します。

4. [App name] では、「Customer Contacts」と入力して、アプリに名前をつけます。

5. [Category] では、リストから [Customer Engagement] を選択します。

6. 同じダイアログで [Choose your data] をクリックします。

7. [Google Sheets] をクリックします。

8. ファイル選択ツールで、前のタスクで Google ドライブに保存した Personal Contacts スプレッドシートを選択し、[Select] をクリックします。

9. [Customize with AppSheet] をクリックして、AppSheet エディタに移動します。

AppSheet によりアプリが作成され、AppSheet のエディタ UI に表示されます。UI には、エミュレータで実行しているアプリのプレビューも表示され、アプリの一部の機能を実行できます。

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

タスク 3. アプリをプレビューする

AppSheet により新しいアプリが作成され、アプリのデータを提供する Personal Contacts スプレッドシートに接続されました。 連絡先アプリは、Google ドライブ上の連絡先シートに接続されたライブの機能プロトタイプです。

AppSheet エディタは、3 つの主要なエリアで構成されています。

• ナビゲーション バー: 左側のナビゲーション バーを使用すると、アプリの機能を実装できます。たとえば、データソースの接続とスキーマ、ユーザー エクスペリエンス（UX）、その他の動作などがあります。このコースの残りのラボでこれらトピックの一部を確認できます。

• メインパネル: AppSheet エディタのメインパネルは、左側のナビゲーション バーで選択したオプションをベースにして、アプリの設定を構成し、機能を実装するエリアです。

• アプリ ライブ プレビュー: ここでは、アプリの機能を設計して実装する際に、アプリの機能への変更を表示してテストできます。

このタスクでは、アプリ ライブ プレビューを使用して、連絡先アプリの基本的な機能を確認します。

連絡先情報を表示する

1. アプリ ライブ プレビューで、アプリに表示されている連絡先リストをスクロールします。

   AppSheet が、データを名と姓で自動的に並べ替えます。

2. 連絡先のいずれかの名前をクリックします。

   アプリによりメールアドレスと電話番号を含む連絡先情報の詳細ビューが表示されます。

   このデータが Google スプレッドシートから自動で取り込まれたものです。

タスク 4. 連絡先情報を変更する

1. 選択した連絡先の編集アイコン をクリックして、その連絡先情報を編集します。

2. 連絡先の名前（First Name）と電話番号（Phone）を変更して [Save] をクリックします。

3. 名前と電話番号がアプリの連絡先詳細ページで更新されていることを確認します。

4. 戻る矢印アイコン をクリックして連絡先のリストに戻ります。

5. 更新された名前が、連絡先リストページに表示されていることを確認します。

タスク 5. 新しい連絡先の追加

1. ライブ アプリ プレビューの連絡先リストページで [+] アイコンをクリックして、新しい連絡先を追加します。

2. 連絡先フォームで、次の情報を指定します。

プロパティ	値
ID	51
メールアドレス（Email Address）	test.contact@gmail.com
名（First Name）	Test
姓（Last Name）	Contact
電話番号（Phone）	1-100-234567

注: 今のところ、値がアプリによって検証されていないため、任意のテストデータを値として入力できます。

3. [Save] をクリックします。

4. アプリの連絡先リストページで、虫眼鏡の検索アイコンをクリックします。

5. 検索ボックスに、前のステップで追加した連絡先の名または姓を入力します。

   注: メールアドレスまたは電話番号でも検索できます。

6. リストがフィルタされ、検索クエリに一致する連絡先のみが表示されます。

7. [Test Contact] レコードをクリックして連絡先についての詳細を表示し、表示された情報を確認します。

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。 新しい連絡先の追加

タスク 6. アプリデータを同期する

前のタスクで行ったすべての変更は、アプリ内でローカルであり、基になるデータソース（アプリに使用される）に自動的に同期されます。

ただし、いくつかの変更がデータソースにすぐに同期されない場合があります。

このタスクでは、データの変更を、アプリに使用される Google スプレッドシートに同期し、Google ドライブで変更を確認します。

アプリデータの変更を同期する

1. ライブ アプリ プレビューには、前回のアプリ同期のイベント以降にアプリに加えられた現在のデータ変更数が同期アイコン の上に表示されます。

   表示された数が、前回のタスクでアプリに加えた変更と一致しているか確認します。

   注: 数が表示されない場合は、アプリに加えたすべてのデータ変更がすでに同期されていることを示します。

2. 同期アイコン をクリックして、Google ドライブ上の Google スプレッドシートへの変更を同期します。

タスク 7. データ変更を確認する

1. 新しいブラウザタブで [マイドライブ] を開きます。

2. Personal Contacts シートを開きます。

3. リストの下部までスクロールし、アプリを使用して追加した新しい連絡先を見つけます。

4. シート内で Ctrl+F キーまたは Command+F キーを押して、アプリを使用して変更した連絡先を検索し、名前と電話番号が更新されていることを確認します。

お疲れさまでした

AppSheet を使用した最初のアプリを作成することができました。このラボでは、以下の操作について学習しました。

• AppSheet UI を使用してアプリを作成する。
• Google ドライブ上のシートのデータを使用してアプリを構成する。
• ライブ アプリ プレビューを使用して、アプリに表示されたデータを変更する。
• アプリ経由のデータ変更が、基になるデータソース（Google ドライブ上のシート）に保持されていることを確認する。

次のステップと詳細情報

このラボは Qwik Start と呼ばれるラボシリーズの一部です。これらのラボでは、Google Cloud で利用できる多くの機能を体験できます。ラボカタログで「Qwik Start」を検索し、興味のあるラボを探してみてください。

• Google Workspace ラーニング センター

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

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

マニュアルの最終更新日: 2024 年 9 月 6 日

ラボの最終テスト日: 2024 年 9 月 6 日

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