ネイティブ AppSheet データベースを使用してコード不要のアプリを作成する

1. 始める前に

AppSheet データベース（ASDB）は、AppSheet アプリを支えるデータを整理および管理するための AppSheet の自社のネイティブ データベースです。そのインターフェースと改善されたパフォーマンスにより、よく使用される Google スプレッドシート、Big Query、Cloud SQL などの外部データソースと比較して、アプリ作成者とエンドユーザー双方により優れたエクスペリエンスを提供します。AppSheet データベースは、AppSheet アプリケーションのデフォルトのデータ オプションとして提供されます。

学習内容

  • サンプルのデータまたは Google スプレッドシートからインポートしたデータを使用して新しい AppSheet データベースを作成する方法。
  • AppSheet データベース エディタでデータをカスタマイズする方法。
  • AppSheet データベースから AppSheet アプリケーションを生成する方法。
  • テーブル構造の変更のために AppSheet でデータベースを変更してテーブルを再生成する方法。

作成するアプリの概要

この Codelab では、新しい AppSheet データベースを生成してカスタマイズする方法を説明します。まず、AppSheet データベースが提供するデフォルトのデータを使用してゼロから生成し、次に Google スプレッドシートの既存のデータから生成します。その後、AppSheet データベースから新しい AppSheet アプリケーションを生成する方法について説明します。最後に、データベース エディタでデータベースのテーブルを変更してから、AppSheet アプリエディタでテーブルを再生成する方法を説明します。

必要なもの

  • AppSheet 開発環境へのアクセス（appsheet.com）。

2. 新しい AppSheet データベースをゼロから作成してカスタマイズする

使用を開始するには、デフォルトのスターター データベースを使用して、ゼロから新しい AppSheet データベースを作成してカスタマイズします。これにより、Codelab の後のステップで効率的にデータベース エディタを試すことができます。

  1. AppSheet（appsheet.com）ホームページに移動してから、[Create] > [Database] > [New database] をクリックします。

ゼロからの新しいデータベース

  1. 新しいサンプルのデータベースが作成され、AppSheet データベース エディタが表示されます。

AppSheet のデータベース エディタで新しいデータベースのサンプルが表示された画像。

  1. データベースの名前を「Untitled database」から「Tasks DB」に変更してデータベースをカスタマイズします（デフォルトのタイトル「Untitled database」をダブルクリックしてデータベースの名前を編集します）。
  2. テーブル名を「Table 1」から「Tasks」に変更します（タブをダブルクリックして編集します）。
  3. 最初の列を「Title」から「Task」に変更します。
  4. 左上の [+] をクリックして新しいレコードを追加します。

左上の [＋] をクリックして、新しいレコードを追加する方法の画像

  1. [Status] 列をダブルクリックして、列挙型タイプとプルダウン項目タイプがどのように使用されているかを確認できます。

「Status」列のプロパティ エディタ。「列挙型」のタイプと「プルダウン」項目タイプが使用されている

  1. 省略可: [=] 記号の後にあるボタンをクリックして、各プルダウンのオプションに色を付けます。

カラー選択ツールでプルダウンのオプションに色を付けます。

  1. 省略可: エディタをさらに試すには、[Status] の列挙型タイプに新しい色で新しいオプションを追加します（[Add option] をクリックします）。
  2. 省略可: [Color]、[Progress]、[Yes/No]、[Phone] などさまざまな列タイプでテストして、その動作を観察してみてください。

ASDB でサポートされているすべてのデータタイプのコンテキスト メニュー。

データベース エディタを使って、いろいろと試してみてください。次のステップでは新しいデータベースを作成します。

3. Google スプレッドシートからインポートして新しいデータベースの作成とカスタマイズを行う

次のステップでは、Google スプレッドシートからデータをインポートする方法を説明します。

Google スプレッドシートからデータベースを作成する

  1. まず、この公開されている Google スプレッドシートのコピーを作成し、ASDB: IO Codelab に名前を変更します。

このスプレッドシートには、[Tasks] と [Owners] の 2 つのタブがあります。

  1. 前回同様、AppSheet（appsheet.com）のホームページに移動してから、[Create] > [Database] > [Import from Sheets] をクリックします。

スプレッドシートのインポートからデータベースを作成する

  1. Google ドライブのファイル選択ツールで、スプレッドシート ASDB: IO Codelab、またはご自分で名前を付けたスプレッドシートのコピーを選択します。

その結果として、スプレッドシートのデータから新しい AppSheet データベースが生成されます。

スプレッドシートから生成された AppSheet データベースをデータベース エディタで表示したスクリーンショット。

[Tasks] テーブルに参照を追加する

次に、[Tasks] テーブルから [Owners] テーブルへの参照を追加します。

  1. AppSheet データベースの [Tasks] テーブルで、[Owner] 列をダブルクリックして、その設定を編集します。
  2. タイプを [Text] > [References > Reference] に変更します。

参照タイプの選択

  1. [Table to reference] を [Owners] に設定してから、[Save] をクリックします。

タイプを [Reference]、参照するテーブルを [Owners] に設定したダイアログ

  1. 列タイプの変更に関する警告が表示されます。この場合、この列のデータは新しい列タイプと互換性があるので、[Yes] をクリックして進みます。

列タイプの変更 [Yes/No] ダイアログ。

  1. AppSheet データベースは、[Owners] テーブルの対応する行を [Tasks] テーブルの名前と一致させようとします。このデータセットが一致するため、AppSheet データベースは [Owner] 列に [Owners] 行への正しい参照を入力するはずです。

正しい [Owner] 列の値が表示されている ASDB エディタの [Tasks] テーブル。

  1. 参照をテストするために、[Owner] のセルをクリックし、「Sarah」など別のオーナーに更新します。

参照先から供給されるポップアップで他のオーナーを選択する。

選択すると、新しい値（Sarah）が（[Tasks] テーブルの）[Owner] のセルに表示されます。

別のオーナーを選択すると、タスクテーブルの [Owner] 列にオーナーの名前である「Sarah」が表示されます。

参照先テーブルのラベル列を変更する

AppSheet のデータベースでは、任意のテーブルのラベル列を選択できます。これにより、親テーブルに表示させたい列を指定できます。これは、リンクされた AppSheet フロントエンド アプリの親テーブルに表示される内容も管理します。つまり、（先ほど示した）[Owners] テーブルの [Name] 列を [Tasks] テーブルに表示する代わりに、[Owners] テーブルの [Email] 列を表示できます。

  1. そのためには、[Email] 列見出しの右側にカーソルを合わせてその他アイコンをクリックし、[Owners] テーブルのラベル列を [Email] に変更します。

列見出しの右側にあるその他アイコンを示す画像。

これにより、列のコンテキスト メニューが開きます。

[Use column as label] を選択した状態で表示される列のコンテキスト メニュー。

  1. コンテキスト メニューの [Use column as label] を選択して、列ラベルを [Email] 列に設定します。

ヘッダーの左上の列ラベルマーカーを使用したメールの列見出し。

  1. [Tasks] テーブルを参照する列ラベルとして [Email] 列が選択されていることを確認するために、[Tasks] テーブルのタブをクリックし、[Owner] 列にメールアドレスが表示されるようになったことを確認します。更新された [Owner] 列が表示されていない場合は、ブラウザを更新してください。

参照先の [Owners] テーブルの [Email] 列を列ラベルとして設定したため、[Tasks] テーブルにメールアドレスが表示されるようになった [Owner] 列。

4. AppSheet データベースから AppSheet アプリを生成する

データベースのカスタマイズが完了したら、データベースから直接 AppSheet アプリを生成できます。これは、カスタム フロントエンド UI が必要な場合や、自動化やセキュリティ フィルタなどを追加する必要がある場合に役立ちます。これを行うには、以下を実行します。

  1. ASDB エディタ右側の [Apps] をクリックします。

AppSheet データベース エディタのスクリーンショット。右側の [Apps] ボタンがハイライト表示されている。

これにより、新しいアプリを生成するために、右側のコンテキスト メニューが起動します。

先ほどと同じスクリーンショットですが、[New AppSheet app] ボタンのあるダイアログが表示されています。

  1. [New AppSheet app] をクリックして新しいアプリを生成します。

生成された AppSheet アプリのスクリーンショット。

アプリが生成されると、アプリに次のような警告が表示されます。

Column "Owner" in Tasks_Schema has a reference to an unknown table or slice "Owners". Open the column definition to select a source table.

これは、生成されたアプリにタスクテーブルしかなく、その [Owner] 列には未知の [Owners] テーブルへの参照があるためです。

これを修正するには、AppSheet アプリに [Owners] テーブルを追加します。

  1. AppSheet エディタの [Data] ページで、[+] をクリックします。

「+」のアイコンがハイライト表示されたデータページ。

  1. [Add data] コンテキスト メニューで、データソースとして [AppSheet Database] を選択します。

データを追加コンテキスト メニュー

  1. 次に、[ASDB: IO Codelab] データベース（または以前のステップで名前を付けたデータベースの名前）を選択します。

データベースのメニュー オプションを選択

  1. 続くダイアログで、デフォルトの [SELECT ALL] チェックボックスを選択してから、[Add to app] をクリックします。

AppSheet アプリに追加する [Owners] テーブルを選択するダイアログ。

[Owners] テーブルがアプリに追加されると、参照のエラーは表示されなくなります。

参照のエラーがない AppSheet アプリのスクリーンショット。

  1. 新しい AppSheet テーブル [Owners] が追加されたので、AppSheet の [Views] ページをクリックして、[PRIMARY NAVIGATION] の横の [+] をクリックすると、このデータを表示する新しいビューを作成できます。

「＋」アイコンがハイライト表示されている [Views] ページ。

  1. [Add a new view]ダイアログで、[Create a new view] をクリックします。

新しいビュー ダイアログの追加。

  1. 新しいビューが作成されたら、次のオプションを設定します。

[View name]: [Owners]、[For this data]: [Owners]、[View type]: [deck]

[Owner] ビューのビュー編集ページ。

これでアプリが完成しました。

  1. [Tasks] と [Owners] の間の参照をテストするには、モバイル プレビューで [Owners] ビューまたは [Tasks] ビューのいずれかをクリックして、レコードを選択すると、関連（参照）レコードが表示されます。

AppSheet アプリのスクリーンショット。右側のモバイル プレビューがハイライト表示されています。

たとえば、[Owners] ビューをクリックし、レコードをクリックしてドリルダウンして、関連するタスクのレコードを表示できます。

[Owner] を選択し、関連するタスクを表示するためにドリルダウンしているところを表示する画面

5. データベースを変更して [Tasks] テーブルを再生成する

AppSheet データベースを作成し、そこから新しいアプリを生成したので、データベース内のテーブルを変更してみましょう。列のデータタイプを変更し、リンク先の AppSheet アプリで何が起こるかを観察します。

  1. データベースの [Tasks] テーブルで、[Due Date] 列のタイプを [Date and time] > [Date] に変更します。

ASDB エディタでタスクテーブルの [Due Date] 列のタイプを [Date] に変更する。

AppSheet アプリに戻ると、データベースが更新されたことが検出され、警告が表示されます。

App Schema for table 'Tasks' is out of sync with the schema in AppSheet database. Please regenerate the table structure

AppSheet のエディタがデータベースのスキーマの変更を検出し、警告を表示します。

  1. 再生成するには、右上の再生成アイコン d1a956498c05d75f.png をクリックします。
  2. これにより、警告ダイアログがトリガーされます。

再生成の警告ダイアログ。

  1. [Regenerate] をクリックして続行します。これにより、アプリ内の [Due Date] 列のタイプが [Date] タイプに更新され、[Task] レコードの編集フォームの日付選択ツール入力要素が有効になります。

日付選択ツール入力要素が表示されている AppSheet アプリ編集フォーム

6. 完了

AppSheet データべース（ASDB）Codelab が完了しました。

参考資料