2024年5月14日

【Google Workspace】AppSheet Coreを使ったアプリ作成してみた


Content
こんにちは。Google Workspace研究開発チームです。

今回は、Google WorkspaceのAppSheet Coreで、スプレッドシートをデータソースにして
受注管理アプリを作成してみました。
アプリの作成手順をご紹介します。

アプリ作成(データソース設定)

データソース設定では、アプリ初期作成からテーブル内容の設計を行います。
テーブル設定は以下3点の設定方法をご紹介します。

  1. 受注ヘッダと受注明細の親子関係
  2. 受注金額の自動計算
    受注ヘッダの受注金額=受注明細の受注金額の和
    受注明細の受注金額=商品マスタの金額×個数
  3. 受注ヘッダIDの自動採番

アプリ初期作成

データソースのスプレッドシートより、「拡張機能」>「AppSheet」>「アプリを作成」と進みます。

上記の手順だけで、初期アプリが自動で作成されます。

AppSheet内のテーブルは自動で反映されます。

テーブル追加

今回、スプレッドシートには4つのシート(テーブル)を用意し、
それぞれ、「受注ヘッダ」「受注明細」「商品マスタ」「取引先マスタ」のテーブルを反映させます。

「受注ヘッダ」は上記の手順で反映できているので、他3つのテーブルを追加します。

左側メニューにある「Data」をクリックします。
「Data」横にある「+」マークを押下します。

「+ New Source」を押下します。

Create a new table 画面で下記項目を設定し、「Add to app」を押下します。
Source ID:スプレッドシート名
Worksheet Name/Qualifier:シート名
Are updates allowed?:編集権限の選択

テーブル設定

受注ヘッダと受注明細の親子関係

この受注管理アプリでは、受注ヘッダに対して複数の受注明細を親子関係で紐づいています。
それぞれのテーブルに項目:受注IDがあるので、その項目で紐づけ設定を行いたいと思います。

受注明細テーブルの受注IDを編集します。

編集詳細画面が表示されます。
Type:Ref
Source table:受注ヘッダ
Is a part of?:☑
「Is a part of?」は関係性を持つ親データが更新または削除された場合、子データも反映するかを判断します。

受注ヘッダに「Related 受注明細s」が自動作成されます。
この項目に受注IDに紐づく受注明細リストが格納されます。

受注金額の自動計算

受注ヘッダの受注金額

受注ヘッダの受注金額は、受注明細の受注金額の合計なので、
受注明細の受注金額に変化に伴って、受注ヘッダの受注金額を自動計算されるように設定します。

受注ヘッダの受注金額の編集画面を表示します。
App formulaの式を編集します。

上記の親子関係で作成された「Relate 受注明細s」の受注金額の合計なので、
画像のように関数を与えます。
※「Relate 受注明細s」の名前を「明細リスト」に変更しています。

また、自動計算で手動設定はされたくないので、Editableのチェックを外します。

受注明細の受注金額

受注明細と商品マスタの商品IDは紐づいています。
受注明細の受注金額は商品マスタの価格×個数で自動計算設定をします。

まずは、受注明細と商品マスタの紐づけを行います。
受注の親子関係同様に設定します。

受注明細の商品IDを編集します。
Type:Ref
Source table:商品マスタ

続いて、受注明細の受注金額の式を編集します。

受注ヘッダIDの自動採番

受注ヘッダIDは一意で自動採番されるようにしたいので、
その設定方法をご紹介します。

受注ヘッダの受注ヘッダIDを編集します。

また受注ヘッダIDは編集されないようにしたいので、「EDITABLE?」のチェックを外したいです。
ですが、ここで注意です。テーブルのKEY項目は「EDITABLE?」のチェックを外すことができません。
そのため、「EDITABLE?」の式を編集し、明示的に「false」を与え、裏側でチェックを外すことが必要です。

以上で、データソース設定は完了です。
次に、ビュー設定をご紹介します。

アプリ作成(ビュー設定)

ビュー設定では、前項で作成したアプリの画面(ビュー:View)を設定します。
今回は、「受注一覧」と「受注登録」のビューを作成します。

受注一覧画面作成

左側メニューにある「Views」をクリックします。

Viewsナビゲーションではアプリ作成時に自動でビューが作成されますが、今回は新規作成します。
デフォルトで作成されたビューを編集して利用しても問題ありません。

「PRIMARY NAVIGATION」横にある「+」マークを押下します。

「Create a new view」を押下します。

ビュー設定パネルで下記項目を設定します。
View name:受注一覧
For this data:受注ヘッダ
View type:table
Sort by:得意先名(Descending)
Group by:得意先名(Ascending)
Column order:(順に)得意先名・受注金額・ステータス・発送日

右側のプレビューで「受注一覧」を押下し、確認します。

次に受注一覧の内容を表示、参照する詳細ビューを設定します。
受注一覧ビューでいずれかの明細をクリックします。

受注一覧詳細ビュー(受注ヘッダ_Detail)が表示されます。
プレビュー下にある「受注ヘッダ_Detail」のリンクをクリックします。

ビュー設定パネルで下記項目を設定します。
Column order:(順に)得意先名・受注金額・ステータス・発送日・Related 受注明細s

受注登録画面作成

同様に、受注登録画面を作成していきます。
「PRIMARY NAVIGATION」横にある「+」マークを押下し、「Create a new view」を押下します。
ビュー設定パネルで下記項目を設定します。
View name:受注登録
For this data:受注ヘッダ
View type:form
Column order:(順に)得意先名・Related 受注明細s・受注金額

右側のプレビューで「受注登録」を押下します。

入力フォーム画面が表示されることを確認します。

以上で、ビュー設定は完了です。
次に、作成したアプリの動作を確認します。

アプリ動作確認

作成したアプリの動作を確認していきます。
ここでは例として、T製作所から商品Aと商品Eを各1個受注したと仮定して受注登録を実施していきます。

実施前に受注一覧の画面で受注件数を確認しておきます。合計5件の明細が登録されているのが確認できます。

それでは受注登録を押下して登録していきます。

受注登録画面が表示されます。

得意先名をプルダウンから選択し、「Done」を押下します。

得意先名が入力されていることを確認し、「New」を押下します。

一度に複数商品を登録することはできないため、初めに商品Aから実施していきます。
商品名と個数を入力し、「Save」を押下します。
入力できない箇所はグレーアウトされています。

画面中央に商品Aの登録が確認できます。
次に商品Eを登録するため、「New」を押下します。

同様に、商品名と個数を入力し、「Save」を押下します。

商品Aと商品Eの登録が確認でき、画面下の受注金額には、商品Aと商品Eの合計金額が
表示されていることが確認できます。「Save」を押下すると、受注一覧に登録されます。

次に登録した受注明細を受注一覧画面から確認していきます。
T製作所の一番下にある明細が今回登録した明細になります。
1件追加され、合計6件の明細があることが確認できます。
追加した明細をクリックすると、詳細を確認できます。

画面右側にあるアイコンをクリックすることで、明細の編集および削除が実施できます。

以上で、アプリの動作確認ができました。

まとめ

以上が、スプレッドシートをデータソースにして受注管理アプリを作成した手順です。
スプレッドシートをAppsheetに読み込んで、簡単にアプリ作成することができます。

AppSheetはアプリを公開するまでは無償で試すことができます。
ぜひ無料版を使って、ご自身でアプリ作成してみてください。
本記事が皆様のお役に立ちましたら幸いです。

2024年5月14日 【Google Workspace】AppSheet Coreを使ったアプリ作成してみた

Category Google Workspace

ご意見・ご相談・料金のお見積もりなど、
お気軽にお問い合わせください。

お問い合わせはこちら