チュートリアル 2: データの処理を行う

App Maker の中級スキル

15~20 分

作成するアプリの概要

簡単な従業員データベース アプリを作成します。アプリのユーザーは次のことができます。

  • 新しい従業員レコードを作成してデータを入力する
  • 従業員レコードを編集する
  • レコード間を移動する
  • レコードを並べ替える
  • レコードを削除する

ラボの内容

このチュートリアルでは、次の方法について説明します。

  • データモデルを作成してフィールドを追加する。モデル、フィールド、レコード、データソース、データ バインディングなど、データ関連のコンセプトについて学びます。
  • フォームとテーブル ウィジェットをページに追加する。これらのウィジェットを変更する方法とそれらの機能について学びます。また、挿入フォームと編集フォームの違いについても学びます。

アプリを作成する

  1. 雇用主や学校から提供される G Suite アカウントにログインします。
  2. App Maker を開きます。
  3. 空のアプリを作成します。
    • App Maker に開始時のダイアログが表示されたら、[新しいアプリの作成] をクリックします。
    • それ以外の場合は、メニュー [新規] [空のアプリケーション] をクリックします。
  4. アプリの Employee データベースの名前を変更します。

モデルを作成する

モデルを作成してフィールドを定義します。モデルには、アプリで利用可能なデータが含まれています。モデル フィールドは表の列にあたるものであり、名前メール雇用日などを指定できます。データはレコードとして格納されますが、これは表の行に該当します。このチュートリアルでは、Google Cloud SQL モデルを使用します。

  1. 左側のナビゲーションで、[データ] をポイントして [追加] をクリックします。[Google Cloud SQL] が選択された状態で、[モデルの作成] ダイアログが開きます。
  2. [次へ] をクリックします。
  3. モデルに「EmployeeData」と名前をつけます。
  4. [作成] をクリックします。App Maker によってモデルが作成され、モデルエディタが開きます。
  5. [データソース] タブをクリックします。App Maker によって自動的に作成される EmployeeData という名前のデータソースが 1 つあるはずです。データソースによって、アプリの UI で利用可能なデータベースのデータが決まります。
  6. [EmployeeData] をクリックしてデータソース エディタを開き、データソースの設定を確認します。

    デフォルトでは、すべてのデータが利用可能であり(クエリが設定されていない)、データソースが自動的に読み込まれます([自動的にデータを読み込む] が選択されています)。また、変更は自動的に保存されます([手動保存モード] は選択されていません)。今回のアプリの場合は、デフォルトの動作で問題ありません。他のアプリで最初にユーザーからクエリを渡す場合には、[自動的にデータを読み込む] をオフにすることをおすすめします。データソース内のレコードの変更を、ユーザーに確実に保存させたい場合には、[手動保存モード] をオンにします。たとえば、[変更を保存] ボタンをクリックさせる方法などがあります。

モデルにフィールドを追加する

[フィールド] タブで、各フィールドに対して次の操作を行います。

  1. [新規フィールドを追加] をクリックしてフィールドのタイプを選択します。
  2. [名前] フィールドにフィールド名を入力します。説明などの設定はそのままにします。

    次のフィールドを追加します。

    フィールド名フィールド タイプ
    Name文字列
    Email文字列
    HireDate日付
    Activeブール値

UI 用のページを設定する

アプリを開始する際のページを用意する必要があり、名前をつけてモデルのデータソースを割り当てます。ページを作成時には、データソースは事前に定義されていません。ページのデータソースを選択することで、ページ上のウィジェットが自動的にデータソースを継承します。

  1. 左側のサイドバーで、[NewPage] をポイントし、その他 [名前を変更] をクリックします。
  2. EmployeePage」と入力して [OK] をクリックします。
  3. プロパティ エディタ(編集アイコン が選択されていると表示される)で、[データソース] プロパティをクリックします。
  4. [EmployeeData] をクリックし、データソースとして選択します。

編集フォームを追加する

編集フォームを使用すると、ユーザーは次のことができます。

  • データベースに新しいレコードを作成する
  • レコードのデータを入力する
  • ブール値フィールド、日付フィールド、値に制限があるフィールドなど、選択肢のあるフィールドの値を選択する
  • レコード内のデータを編集する
  • データベースからレコードを削除する

編集フォームの追加方法:

  1. ウィジェット パレットを開き(ウィジェット をクリックする)、フォーム フォーム ウィジェット をページに追加します。
  2. ページのデータソースを [継承: EmployeeData] に設定すると、そのデータソースが自動的に推奨されます。選択されたままにして [次へ] をクリックします。
  3. [フォームの種類を選択] ダイアログで、[編集] を選択して [次へ] をクリックします。
  4. フォームのオプションを指定します。

    • フィールド - フォームに含めるデータソース フィールドを選択します。
    • 編集可能 - フィールドを編集可能にします。

    今回のチュートリアルでは、デフォルトのままにします。デフォルトのオプションでは、すべてのデータソース フィールドを含むフォームが作成されます。[Id] 以外のすべてのフィールドが編集可能です。

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

テーブルを追加する

テーブルはデータを行と列として表示します。行はモデル内のレコードに対応し、列はフィールドに対応します。ユーザーはテーブルを使って次のことができます。

  • 複数のレコードを同時に表示し、データのページ間を移動する
  • 編集可能フィールドのレコードデータを編集する
  • 列でレコードを並べ替える
  • レコードを削除する

テーブルの追加方法:

  1. ウィジェット からテーブル フォーム ウィジェット をページの編集フォームの下に追加します。編集フォームとテーブルの左端を揃えます。
  2. ページのデータソースを [継承: EmployeeData] に設定すると、そのデータソースが自動的に推奨されます。選択されたままにして [次へ] をクリックします。
  3. テーブルのオプションを指定します。

    • フィールド - テーブルの列として使用するデータソース フィールドを選択します。
    • 編集可能 - 編集可能なフィールドを選択します。

    今回のチュートリアルでは、デフォルトのままにします。デフォルトのオプションでは、すべてのデータソース フィールドに対応する列を持つテーブルが作成され、いずれも編集できません。一般的に、編集可能フィールドがあまりない方が、アプリのパフォーマンスは向上します。このチュートリアルのように、すべてを編集可能なテーブルとするのではなく、レコードの作成や編集にはポップアップ ダイアログを用意し、レコードの確認のためには読み取り専用のテーブルを用意します。

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

  5. その他のオプション(ページ分け、並べ替え、削除可能な行)については、そのままにします。

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

アプリのプレビューとテストを行う

  1. 右上隅にある [プレビュー] をクリックし、新しいブラウザタブでアプリを実行します。
  2. [許可] をクリックして、アプリに特定の情報の使用を許可します。
  3. ブラウザ ウィンドウを拡大し、編集フォーム全体とテーブルの上部を合わせます。
  4. [EmployeeData の編集] フォームで、[名前] フィールドに名前を入力してみます。まだレコードが存在しないため、入力できないはずです。
  5. [作成] をクリックして、レコードを作成します。レコードがテーブルに追加されます。これがデータベース内の実際のレコードになります。これでデータを入力することができ、データが自動的にデータベースに保存されます。これはレコードの更新に有効な動作ですが、レコードの作成が必要であるという点で直感的ではありません。このチュートリアルの後半説明する挿入フォームを利用すれば、ユーザーはデータをより直観的に追加できます。
  6. フォームに入力します。データを入力して値を選択すると、App Maker によって値がテーブルに追加されます。Enter キーを押したり、フィールドの外側をクリックしたり、選択を行ったりするとすぐに、データが各フィールドに反映されます。
  7. [作成] をクリックして追加のレコードを作成し、レコードのデータを入力します。
  8. テーブル内のレコードを 1 つ選択します。編集フォームで削除アイコン をクリックしてレコードを削除します。自動的に削除を取り消すことはできませんが、スクリプトで行うことができます。
  9. App Maker でフォームの下部に追加されるコントロールに注意してください。データのページ間を移動するには、このコントロールを使用します。

これで、データの処理を行う App Maker アプリが作成されました。

UI の各機能を実現する仕組みを確認する

チュートリアルを終了する前に、UI の各機能を実現する仕組み(バインディング、イベント、アクション)について詳細を確認します。

バインディングについて学ぶ

バインディングは、ウィジェットのプロパティと他のプロパティとを双方向で結びつけるものです。データ バインディングとは、ウィジェットのプロパティがデータソースのプロパティにバインドされている状態を意味します。

バインディングは双方向なので、バインディングされているプロパティの片方を変更するともう一方のプロパティも変更されます。

アプリの UI でバインディングが使用される際の仕組み:

  1. アプリの [プレビュー] タブが開いている場合は、閉じてから App Maker に戻ります。
  2. [Employee の編集] フォームで、[名前] テキスト ボックスを選択します。
  3. プロパティ エディタで、[] プロパティが @datasource.item.Name に設定されていることを確認します。

    このバインディングにより、編集フォーム内の [名前] の値と、データソース内のレコードの [名前] の値がリンクされます。[] プロパティ内のパスにより、バインディングが以下のように定義されます。

    • datasource - ウィジェットのデータソースを参照する
    • item - 現在選択されているアイテム(レコード)を参照する
    • Name - Name のレコードの値を参照する
  4. プロパティ エディタで、[ラベル] プロパティを選択します。@models.EmployeeData.fields.Name.displayName に設定されていることを確認してください。

    このバインディングにより、編集フォーム内の [名前] テキスト ボックスの [ラベル] と、[EmployeeData] モデルの [名前] フィールドの [displayName] プロパティがリンクされます。[ラベル] プロパティ内のパスにより、バインディングが以下のように定義されます。

    • models.EmployeeData - [EmployeeData] モデルを参照する。
    • fields.Name.displayName - [名前] フィールドの [displayName] プロパティを参照する。

イベントおよびアクションについて学ぶ

動作の起点(イベント)と、付随する動作(アクション)を関連付けることができます。

イベントがアクションを引き起こします。アプリのイベントには次のものが含まれます。

  • アプリが起動する
  • データソースが読み込まれる
  • アプリが権限を確認する
  • ユーザーがボタンをクリックする
  • アプリがデータにアクセスしたりデータを変更したりする
  • アプリがデータを検証する

アクションはイベントに付随して起こります。アクションには次のものが含まれます。

  • 新しいアイテムを作成する
  • 現在のアイテムを削除する
  • データソースを再読み込みする
  • クライアント スクリプトを実行する

イベントとアクションがアプリで使用される際の仕組み:

  1. [EmployeeData の編集] フォームで、[作成] ボタンを選択します。
  2. プロパティ エディタで、[onClick] が設定されているところを探します。onClick イベントは、ユーザーが [作成] ボタンをクリックしたときに動作するもので、[ボタン] セクションと [イベント] セクションの両方に表示されます(利便性を考慮して、同じアイテムが 2 か所に表示されるようになっています)。
  3. [onClick] をクリックします。メニューに、ユーザーがボタンをクリックした際に動作させることのできるアクションが表示されます。ここでのアクションはカスタム スクリプトで、[カスタム操作] をクリックするとコードが表示されます。このコードで、ウィジェットに割り当てられているデータソース内にアイテムを作成します。なお、App Maker には [新しいアイテムを作成] というプリセット アクションがありますが、これは挿入フォーム用です。
  4. キャンバス(ページエディタ)のテーブルで、[名前] ヘッダーをクリックします。
  5. プロパティ エディタで、[onClick] > [カスタム操作] の順にクリックします。ユーザーが [名前] ヘッダーをクリックすると、アクションがテーブルを [名前] フィールドで並べ替えるカスタム スクリプトになります。

挿入フォームと編集フォームを比較する

フォームに関するチュートリアルを終了する前に、編集フォームと挿入フォームを比較してみます。

このチュートリアルの前半では、編集フォームを使用してユーザーがデータベース内のレコードの編集ができることを学びました。レコードが存在しない場合、ユーザーはデータを入力する前にレコードを作成する必要があります。対照的に、挿入フォームの場合は、最初からデータベースではなく、データソースにあるドラフト レコードにデータを保存します。ユーザーの準備が整った時点で、ユーザーがドラフト レコードの内容をデータベースに保存します。

挿入フォームを使用してユーザーは次のことができます。

  • ドラフト レコードのフィールドにデータを入力して値を選択する
  • ドラフト レコードの内容をデータベースの新しいレコードに保存する。データがコピーされると、ドラフト レコードは空になる。

挿入フォームを追加する

  1. ウィジェット から、フォーム フォーム ウィジェット をページの編集フォームの隣に追加します。
  2. デフォルトで、[継承: EmployeeData] データソースが選択されているので、そのままにして [次へ] をクリックします。
  3. [挿入] を選択して [次へ] をクリックします。フォーム上で編集できるように、すべてのフィールドを選択したままにします。
  4. [終了] をクリックします。

挿入フォームの動作の詳細を確認する

  1. 右上隅にある [プレビュー] をクリックし、新しいブラウザタブでアプリを実行します。
  2. テーブルにレコードが含まれている場合は、その行をポイントし、レコードが表示されなくなるまで [削除] をクリックします。
  3. [EmployeeData の作成] フォームに入力します。従業員用のフォームを編集する場合とは異なり、すぐにデータを入力できますが、データはテーブルに追加されません。データが入力されると、App Maker により、データベースではなくデータソースのドラフト レコードに保存されます。データベースにレコードが保存されるまで、テーブルは更新されません。
  4. [送信] をクリックして、データベースに実際のレコードを作成します。App Maker はドラフト レコードから実際のレコードにデータをコピーしてから、ドラフト レコードを空にします。この際、データベースにデータが存在していれば、テーブルにもデータが表示されます。また、データは編集フォームにも表示され、現在選択されているレコードのデータが含まれます。

    編集フォームにデータを入力しても、挿入フォームにはデータは表示されません。挿入フォームの値はドラフト レコードにバインディングされているためです。

挿入フォームの作成方法の詳細を確認する

  1. アプリの [プレビュー] タブが開いている場合は、閉じてから App Maker に戻ります。
  2. [EmployeeData の作成] フォームで、[名前] テキスト ボックスを選択します。
  3. プロパティ エディタで、[] プロパティが @datasource.item.Name に設定されていることを確認します。これは編集フォームと同様です。ただし、このフォームは挿入フォームなので、このバインディングにより、挿入フォームの [名前] の値がデータソースのドラフト レコードの [名前] の値にリンクされます。詳細については、ドラフト レコードと作成モードのデータソースをご覧ください。
  4. ここで、[送信] ボタンをクリックします。onClick イベントのアクションが [新しいアイテムを作成] になっています。挿入フォームの場合、[新しいアイテムを作成] アクションでは、次の動作が行われます。
    1. データベースに新しいレコードを作成する
    2. ドラフト レコードの内容を新しいレコードにコピーする
    3. ドラフト レコードをクリアする

次のステップ

  • チュートリアル 3 を見る - アプリケーションのスタイル設定について学びます。
  • データの詳細について学ぶ - モデルに関するドキュメントを参照します。
  • サンプルアプリについて確認する - Hello Data アプリは、編集フォームにいくつかの変更を加えたうえで、ここで作業した内容をコピーします。