GSP1146

概要

このラボでは、ノーコードの Chat 用アプリを作成する方法を紹介します。Chat 用アプリは、Google Chat で実行されるウェブ アプリケーションまたはサービスです。AppSheet を使用して Chat 用アプリを作成すると、別ウィンドウでアプリを開かなくても、Google Chat 内でアプリと直接やりとりできるようになります。

このラボでは AppSheet を使用して、ATM の問題を報告および管理するための基本的なアプリケーションを作成します。まず、スプレッドシートをデータソースとして使用するシンプルなアプリをコピーします。次に、チャット コンポーネントを追加して、Google Chat でアプリと直接やりとりできるようにします。

シナリオ: 銀行のオペレーション アナリスト

あなたは銀行のオペレーション アナリストで、5 人の ATM 技術者からなるチームで働いています。あなたは、この地域にある複数の ATM のメンテナンスを調整する責任があります。従来、このプロセスはメールと紙のドキュメントに大きく依存していました。

AppSheet を使用して、ATM のメンテナンスと技術者の派遣をより適切に管理するためのノーコード アプリを開発しました。ATM の技術者は、Google Chat を使用して互いに連絡を取り合っています。Google Chat から離れることなくアプリのコア機能を簡単に使用できるように、アプリ向けに Chat コンポーネントを作成したいと考えています。

学習内容

• 既存の AppSheet アプリにチャット コンポーネントを追加する
• スラッシュ コマンドを作成する
• アプリに自動化を追加する
• Google Chat でアプリを使用する

前提条件（必須ではありません）

このラボの前に Google AppSheet: スタートガイド ラボを完了することをおすすめします。このラボの前または後に、AppSheet を使用したノーコード アプリ構築: 基礎コースを受講することで、さらに理解を深めることができます。

設定と要件

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

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

このハンズオンラボでは、シミュレーションやデモ環境ではなく実際のクラウド環境を使って、ラボのアクティビティを行います。そのため、ラボの受講中に 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. アプリを作成する

アプリ開発では、新機能を段階的に追加するのが一般的です。このタスクでは、既存の ATM Maintenance アプリをコピーし、以降のタスクで機能を拡張していきます。

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

1. AppSheet にログインしたら、新しいブラウザタブで ATM Maintenance アプリを開きます。

2. 左側のナビゲーション メニューで、[Copy app]（）をクリックします。

3. [Copy app] フォームの [App name] に「ATM Maintenance Tracker」と入力し、残りの設定はデフォルトのままにします。

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

   AppSheet によってアプリが作成され、アプリで使用されるスプレッドシートが Google ドライブの [マイドライブ] フォルダ内の /appsheet/data/ATMMaintenanceTracker-nnnnnnn フォルダにコピーされます。

アプリは、元のアプリのデータソースで設定されます。これで、アプリ機能の構築を続けることができます。また、AppSheet UI の [Apps] の下にある [My apps] ページからアプリにアクセスすることもできます。

アプリをプレビューする

AppSheet エディタには、ナビゲーション バー、メインパネル、アプリのプレビューという 3 つの主要なエリアがあります。

アプリのプレビューには、縦向きのスマートフォンで最新バージョンのアプリがどのように表示されるかが示されます。

1. アプリのプレビュー パネルで、[New Ticket] フォームをスクロールします。

   [New Ticket] フォームでは新しいチケットを作成でき、選択した [Symptom] に応じて自動的に技術者に割り当てられます。

2. [Cancel] をクリックしてこのビューから移動し、アプリをさらに詳しく見てみましょう。アプリの全体的な機能が理解できたら、次のステップに進みます。

Chat 用アプリビルダーを開く

1. Chat 用アプリビルダーを開くには、左側のナビゲーション メニューで [Chat apps]（）を選択します。

2. [Create] をクリックします。

3. [Enable] カードで [Next] をクリックして、プロジェクトを自動的に構成します。

   デフォルトでは、AppSheet の Chat 用アプリは自動構成モードで作成されます。このモードでは、ラボを簡単に構成して公開できます。ワンクリックで公開できるこのフローについて詳しくは、AppSheet を使用して Chat 用アプリを構成するをご覧ください。

注: アプリが完全に構成されるまでに数分かかることがあります。ページを再読み込みしないでください。

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

タスク 2. アプリをカスタマイズする

会話またはスペースにアプリを追加すると、アプリから最初のメッセージが送信されます。アプリがインストールされたとき、または名前リンクが付けられたときにユーザーに送信される、カードと呼ばれる Chat 用アプリのメニューをカスタマイズできます。このタスクでは、最初のメッセージをカスタマイズし、アクションを追加して、Google Cloud コンソールで Chat API を構成します。

最初のメッセージをカスタマイズする

1. [Customize] カードで、[First message] をクリックしてセクションを展開します。

   AppSheet で、メッセージ テキストとアプリビューが自動的に表示されます。

2. メッセージ テキストの挨拶を「ATM Maintenance Tracker アプリへようこそ。本日はどのようなご用件でしょうか？」に変更します。

3. [Chat card menu] のリストで [My Tickets] をクリックし、プルダウンで [Issues Reported By Me] を選択してチャットカードを変更します。

4. [Manage Techs] ビューを削除するには、[Delete]（）をクリックします。

注: [Unsupported app view selected] という警告は、Google Chat 内でそのアプリビューにアクセスできないことを示しています。このオプションは引き続き [Chat card menu] に表示されますが、選択するとアプリが新しいタブで開きます。

5. AppSheet ウィンドウの上部にある [Save] をクリックします。

スラッシュ コマンドを作成する

1. [Actions] セクションで、[+ New action] をクリックします。

2. オプションのリストから [Slash command: Open app view] を選択します。

   スラッシュ コマンドは、メッセージに「/」と入力するだけで、使用可能な bot が提供する機能の一覧が表示される機能です。これにより、利用できる Chat 用アプリの機能を簡単に見つけて使用できます。

3. [App View] プルダウンから [Issues Reported By Me] を選択します。

4. [Name] に「/myissues」と入力します。

5. [Description] フィールドに「自分のメールアドレスを含むチケットを一覧表示する」と入力します。

6. [Next] をクリックします。

タスク 3. アプリを公開する

このタスクでは、デプロイ チェックを実行し、警告を解決して、アプリを公開します。

デプロイ チェックを行う

1. [Test] カードで [Go to deployment settings] をクリックして、AppSheet UI の [Deploy] タブを開きます。

2. デプロイ チェックが自動的に開始されない場合は、[Run Deployment Check] をクリックします。

   デプロイ チェックの出力には、アプリをデプロイする前に修正する必要があるエラーや警告が一覧表示されます。

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

   セクションが展開され、警告の詳細が表示されます。

4. [Continue editing] をクリックして、アプリを公開する前に [App description] に関する警告に対処します。

[App description] に関する警告を修正する

1. 左側のナビゲーション メニューで、[Settings]（）をクリックします。

2. [Information] タブの [App Properties] セクションで、[Function] のプルダウンをクリックします。

3. オプションの一覧から [Maintenance] を選択します。

4. [Industry] のプルダウンをクリックし、[Financial Services] を選択します。

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

アプリをデプロイする

1. 左側のナビゲーション メニューで [Manage]（）をクリックして、[Deploy] オプションに戻ります。

2. [Deployment Check] セクションで、[Run deployment check] をクリックしてプロセスを再実行します。

   [App Description] が「WARNING」から「PASSED」に変わったことに注目してください。

3. [Move app to deployed state] をクリックします。

タスク 4. アプリをテストする

Google Chat のスペースは、参加者がファイルの共有やタスクの割り当て、メッセージのやりとりを行える場所です。アプリに直接メッセージを送信したり、アプリをスペースや会話に追加したりできます。このタスクでは、スペースを作成し、アプリをスペースに追加して使用することで、Google Chat でアプリをテストします。

スペースにアプリを追加する

1. 新しいシークレット タブで Google Chat を開きます。
2. モーダルが表示されたら、[開始] をクリックしてから [X] をクリックしてチュートリアルを閉じます。
3. 左下のペインにある [スペース] で [スペースを作成または検索] をクリックし、続いて [スペースを作成] をクリックします。
4. スペースの名前を入力して、[作成] をクリックします。
5. [アプリを表示] をクリックし、リストから ATM Maintenance Tracker アプリを選択して [追加] をクリックします。

スペースでアプリを使用する

1. 新しいチケットを作成するには、[All Tickets] の横にある [Open in app] オプションをクリックし、[New Ticket] をクリックします。

   ダイアログが表示されます。

2. [First Name] フィールドと [Last Name] フィールドに任意の情報を入力します。

3. [ATM ID] に「ABC123」と入力します。

4. [Email] には、AppSheet へのログインに使用したラボのメールアドレスを使用します。

5. [Symptom] フィールドで、プルダウンから [Card reader not working] を選択します。

6. [Resolved] で [N]（いいえ）を選択します。

7. その他のフィールドはデフォルトのままにして、[Save] をクリックします。

8. 更新されたチケットリストを表示するには、返信欄に「/myissues」と入力して Enter キーを押します。

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

タスク 5. 自動化を構築する

自動化により、スペースでの Chat 用アプリの追加や削除など、Chat 用アプリとのやりとりに基づいてイベントをトリガーできます。また、Chat でのやりとりに基づいて、Chat スペースにメッセージやアプリのビューを送信することもできます。このタスクでは、独自の自動化を作成します。

カスタム イベントを作成する

1. AppSheet のタブに戻り、左側のナビゲーション メニューで [Chat apps]（）を選択して、Chat 用アプリビルダーを開きます。

   AppSheet タブを閉じた場合は、[My apps] をクリックし、リストから [ATM Maintenance Tracker] を選択します。

2. Chat 用アプリエディタで [Customize] カードをクリックします。

3. [+ New action] をクリックし、[Build my own...] を選択します。

   AppSheet エディタの自動化ページが同じタブで開きます。

4. [Configure event] をクリックし、[Create a new event] をクリックします。

5. [Settings] パネルで、次の情報を入力します。

項目	値
Event name	New ticket
Data change type	[Adds] のみをチェック
Table	Tickets

カスタム ステップを作成する

1. メインパネルで [+ Add a step] をクリックし、[Create a new step] を選択します。

2. [New step] をクリックして、作成したカスタム ステップの [Settings] を開きます。

3. [Settings] パネルで、 [Send a chat message] をクリックします。

4. [Message Content] で [Select chat spaces] オプションを選択します。

5. [Space ID(s)] で [Add] をクリックし、前のタスクで作成したスペースを選択します。

6. [Message Text] ボックスに「新規チケットが作成されました」と入力します。

7. ページ右上の [Save] をクリックしてアプリを更新します。

自動化をテストする

1. Google Chat に戻り、前のタスクで作成した Google Chat のスペースを開きます。

2. ATM Maintenance Tracker アプリで [New Ticket] をクリックします。

3. [First Name] ボックスに「Freeda」と入力します。

4. [ATM ID] と [Symptom] に任意の情報を入力します。

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

   アプリが確認メッセージを送信することに注目してください。

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。 自動化を構築する。

アプリを削除する

アプリのテストが正常に完了したので、アプリを削除します。これで、ソフトウェア開発ライフサイクルが完了します。

1. 左側のナビゲーション メニューで [Manage]（）をクリックします。

2. オプションのリストから [Collaborate & Publish] を選択します。

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

お疲れさまでした

初めてのノーコード チャットアプリを無事に作成できました。学んだことは次のとおりです。

• 既存のアプリにチャット コンポーネントを追加する
• スラッシュ コマンドを作成する
• アプリに自動化を追加する
• Google Chat でアプリを使用する

次のラボを受講する

• Google AppSheet: スタートガイド
• AppSheet アプリデータの接続と構成

次のステップと詳細情報

ノーコードの Chat 用アプリについて詳しくは、以下をご覧ください。

• Chat 用アプリの構成に関する問題を解決するためのヒントについては、Chat 用アプリのトラブルシューティングのリソースをご覧ください
• AppSheet を使用した Chat 用アプリに関する質問の回答を確認するには、AppSheet を使用した Chat 用アプリに関するよくある質問をお読みください

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

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

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

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

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