作業報告書アプリを作る — AppSheetを使って

11 min readMar 30, 2021

No-Codeツールで完全に作ることができるのか？

この記事は ” Build a Work Report App — with AppSheet”を翻訳したものです。

なぜこれを試すのか？

Google Sheetsは、すべてのビジネスパーソン、特に中小企業で働くシステム管理者にとって素晴らしいアプリです。社内のデータを管理するのに非常に適しています。
しかし、特に中小企業では、Google Sheetsも普通の社員には使いづらいものです。(言うまでもなく、Excelもそうですが）
そこで私は、社員がGoogle Sheetsを使いやすくするためのツールやサービスを調べてきました。
最終的には、No-Codeツールという良い解決策を見つけました。そこで、これらのサービスを試してみたいと思います。
以前、Glideについて書きました。今回は、AppSheetについて書いてみたいと思います。

AppSheetについて

AppSheetは、Google Drive、DropBox、Office 365などのクラウドベースのスプレッドシートやデータベースプラットフォームなどのデータソースを利用して、モバイル、タブレット、Webアプリケーションを作成することができるノーコードツールです。
Googleは2020年1月にAppSheetを買収しました。

サンプルアプリについて

AppSheetの潜在的な機能を検討するために、わかりやすいサンプルアプリを作ります。このアプリは、作業報告書を見たり書いたりするもので、ビルメンテナンスの作業員が使うようなものです。といっても、目的としては単純なものですが😅）。
デザインと構成は以下のようになっています。

画面

現場（サイト）一覧
社員が担当している現場を表示します。現場を選択すると、次の画面が表示されます。
レポート一覧
選択した現場のレポートが表示されます。また、レポートの追加、編集、削除ができます。レポートには、撮影した写真を含めることができます。

データ構造

AppSheetでは、スプレッドシートはRDBのテーブルに似ています。Glideと同じく、AppSheetは1つのスプレッドシートから同じ構造を持つ複数のスプレッドシートに対して関連付けることができません。そこで私はそれらを1つのシートにすることにしました。上の2つの画面に対応して、2つのスプレッドシートがあります。

現場リスト
現場とそのスタッフの情報を表します。
レポートリスト
現場の作業報告を表しています。

構築方法

AppSheetのダッシュボードページで、「Make a new app」をクリックし、「Start with your own data」を選択します。そして、例えば「Field Service」のようなカテゴリーを選択します。「Choose your data 」をクリックします。
Select a fileダイアログで、先ほどの2つのリストを含むスプレッドシートを選択します。
すると、AppSheetは適切なデフォルトアプリを構築します。素晴らしいですね。

Work Reportsシートの追加

Glideとは異なり、AppSheetはデータソースから1つのシートしかインポートしません。そこで、もう一つシートを追加する必要があります。「Add a table for “Work Reports”」 をクリックしましょう。

現場リストとレポートリストの関係を作る

現場を選択したときにレポートリスト画面を表示するためには、参照（Reference）を作成する必要があります。

DataセクションでColumnタブをクリックし、Work Reportsを選択します。
Site nameの左端にある鉛筆マークをクリックします。
TypeのドロップダウンでRefを選択します。
Source tableのドロップダウンで、参照するテーブルを選択します。
Doneをクリックします。
変更内容を保存(Save)します。

現場リストの列を見ると、AppSheetが自動的に追加した逆参照の列が表示されています。ここでは、「Related Work Reports」という名前が付いています。この参照用列には、関連するレポートリストレコードのキー値が含まれています。

注：親テーブルの参照用列はKEY列であるべきだと思われます。そうしないと、サイトリストのレコードを選択したときに、関連するレポートリストデータが表示されないからです。なぜ必要なのか疑問です。

写真アップロードのサポート

写真のアップロードを可能にするには、Work ReportのPhoto欄のTYPEをImageに変更する必要があります。その後、レポートの編集画面で写真をアップロードできるようになります。

Glideは自社のGoogle Cloud Storageに写真をアップロードしますが、AppSheetはあなた自身のGoogle Driveに写真をアップロードします。アップロード先フォルダは、データソースとなるスプレッドシートと同じフォルダです。この動作は、アップロードした写真を簡単にコントロールできるので気に入っています。画像の相対パスは、レコードのPhoto列に書き込まれます。

不必要なアクションの無効化

Glideと違い、AppSheetはAdd, Update, Deleteのアクションを自動的に追加します。これらの動作は私も好きです。しかし、必要のないアクションもあり、特に現場一覧画面では、これらのアクションを持つべきではありません。そこで、これらのアクションを削除しました。

左側パネルのBehaviorをクリックします。
必要に応じて、「Show system actions」をクリックします。サイト一覧画面でDelete アクションをクリックします。
次にAppearanceをクリックし、「Do not display」をクリックします。
EditとAddのアクションも同様にします。
Saveボタンをクリックします。

ユーザーを自分のデータに限定する

そのためには、 Security Filtersを使用することができます。セキュリティフィルタを使用する前に、Security > Require Sign-Inペインで Require user authenticationオプションを設定しておく必要があります。ユーザーがサインインすると、AppSheetはそのユーザーの電子メールアドレスを知ることができます。

準備の第一歩として、Google Sheetsを使って個々のメールアドレスを現場リスト含む列（「Email」という名前）を追加しました。そして、テスト用のメールアドレスを入力します。
DataセクションのColumnsをクリックし、Site Listエリアの「Regenerate Structure」ボタンをクリックします。
左側ペインのSecurityをクリックします。
Security Filtersタブをクリックします。
Site listのSecurity Filterをクリックし、「[Email] = USEREMAIL() 」と入力して保存します。
これで、ユーザーは自分のデータへのアクセスが制限されます。

注：「セキュリティフィルタ」は、PROプラン（$10/アクティブユーザー）が必要です。

その他

Work Report 画面を直接開く必要はないので、UX ペインで画面を削除することができます。
不思議なことに、サイトリスト画面には、サイトリストレコードにリンクされたワークレポートレコードに含まれる画像が表示されています。これは必要ありません。そこで、ビュータイプをDeckに変更しました。(実は、サイト一覧画面から画像表示を削除する方法が見つかりませんでした。)

アプリの公開

Glideと違い、AppSheetはデフォルトでユーザーへのアクセスを制限しています。そのため、Userペインでユーザーを追加する必要があります。
アプリを公開するには、Not Deployedをクリックする必要があります。すると、デプロイメントチェックが実行されます。今回は、アカウントの状態がFREEプランだったので、デプロイを進めることができませんでした。前述のSecurity Filter機能を使用しているので、デプロイするにはPROプランにする必要があります。(ここでやめることにしました)