AppSheet使ってみた - JCB Tech Blog

本稿はJCB Advent Calendar 2024の１２月２１日の記事です。

JDEPプラットフォームチーム所属の長沼です。

JDEPでは、ワークロードの実行基盤としてGoogle Cloud、開発者が使うグループウェアとしてGoogle Workspaceを使っています。

これらで提供されるサービスの1つとして、ローコード・ノーコードツールに位置づけられるAppSheetがあります。他チームへの管理情報の更新依頼に使ってみたところ、面白かったので、その気付きについてご紹介したいと思います。

AppSheetの利用を試みた背景

自分が所属するチーム外のチームやその所属メンバーに対して、例えば以下のようなことを行いたいニーズ・悩みはよくあると思います。

自分もしくは所属チーム以外のメンバに対して、データの更新を依頼したい（例えば、メンバの所属チームの移動・変更やツール等の利用希望をヒアリングしたい）。
データはスプレッドシートで管理している。しかしスプレッドシートを直接更新してもらう方法だと、意図せぬ更新をされることがある。
また管理用で編集・開示したくないパラメータは共有するスプレッドシートと別に用意する必要がある（結果、データが分散する）。
入力する項目によってはユーザビリティが良くない（例えば日付をテキスト入力ではなくカレンダ選択にしたい）。
とはいえ上記のようなことを実現するアプリ（GUI）を作るコストはかけたくない（であればスプレッドシートで妥協する）。

このような困りごとにに対して解決を図りたく、ローコード・ノーコードツールであるAppSheetを使ってみることにしました。

AppSheetによるアプリの作り方

AppSheetでアプリを作りたい場合、少なくとも以下3つ要素を設定していくことになります。
なおAppSheetには標準で様々な用途のテンプレートが用意されています。これを用いると、より早くアプリを作ることができますが、今回は作成方法を説明するため、スプレッドシートがある前提でアプリを作る方法を以降で説明していきます。

Data

公式ドキュメントに

AppSheet アプリでは、とにかくデータが重要です。

とあるように、AppSheetで最も肝になる部分がこのDataです。
Dataではデータ型や制約・初期値、その他表示する際のラベルなどを設定します。
この設定した情報が以降のViewで設定した表示形式や、Actionsで設定した制御に使われます。
逆に言えば、Dataを核として見せ方や操作を定義していくのがAppSheet だと言っても過言ではないと感じています。

例えば、今回はメンバへの開発サービスやチームの変更ヒアリング用途を想定し、以下のようシートからなるスプレッドシートがあったとします。

■ユーザ管理シート

user	service	team	last_updated_by	hidden
user1	service1	team1	editor_email@...	xxx
...	...	...	...

■チーム管理シート

service	team
service1	team1
service2	team2-1
service2	team2-2
service3	team1

これをAppSheetのDataとして読み込ませると、例えばユーザ管理シートから以下のような設定が自動生成されます。

このDataを用いてデータ型（TYPE）や、主キー（KEY?）のほか、表示（SHOW?）や編集可否（EDITABLE?）などを設定できます。
また型については、スプレッドシートに値がある場合、そこから適切と思われる型が自動的に補完されています。ただし、この型によって表示形式や編集方法も変わるため、意図した編集をさせたい場合には型を変更することが必要になります。

View

上記で設定したDataをどのように表示するかを設定するものが、このViewとなります。　

例えば、ユーザ管理シートの情報をテーブル形式で表示したい場合は、View TypeでTableを選択します。

また利用者の表示方法により標準でレイアウトを自動調整する機能がついており、以下のようにPCとモバイル端末で表示方法が自動的に切り替わります。

このほか表示順や表示位置の設定も、このViewから行うことができます。
ただし個々の値（スプレッドシートのセルに相当する情報）に対する編集方法はViewで設定できず、前述のDataで設定した内容をもとにAppSheetが自動的に表示を切り替えます。

Actions

最後に上記で定義したViewを用いてDataに対する操作を定義するものが、このActionsとなります。

初期状態では、Dataで設定した内容に応じて、Add / Delete / Edit といった標準的な操作方法が定義されます。
この標準操作はDataでシートを読み込む際に設定する項目と連動しています。例えば読み込み時にAddを許可していない場合は、ActionsでもAddが表示されない（結果として操作できない）制御が自動で行われます。

またDataへの一括操作など、この標準操作以外の操作もActionsで追加定義できます。

このようにData、ViewとActionsを設定することで、指定したデータを表示・編集するアプリを簡単に作ることができます。

今回の紹介では割愛しますが、このほか高度な自動化（操作を契機としたメール送信など外部システムの連携など）を行うAutomationや、Google Chatと接続するChatAppを作る機能などがあり、より高度なアプリを作ることもできます。

使って良かったと思うこと

Dataへの表示・編集制限

冒頭にも述べたように、直接スプレッドシートを利用者に公開してしまうと、そこに公開したくない情報を入れることは難しくなります。結果として、別のスプレッドシートで管理など、データが分散してしまうという課題があります。

AppSheetを使うと、１つのスプレッドシートに全ての情報を入れておき、表示制御で利用者へ非開示にできます。
具体的には図のように、"hidden"に対して"SHOW?"のチェックボックスを外すと、外した項目はGUI上で表示しない、といった制御を容易に実現できます。
一方でパラメータとして存在はしているため、この値を用いて他の値のチェックなど制御にも使用できます（例えばhiddenに入力がある場合は当該行の編集を許可しない、といった制御ができます）。

依存関係のある項目の表示制御

今回の例で、ユーザ管理シートのserviceとteamを編集する場合に、チーム管理シートのような依存関係を考慮して変更をさせたい場合があります。
具体的には、serviceがservice1の場合にはteamはteam1のみ選択可能でteam2-1は選択不可、逆にservice2の場合にはteam2-1とteam2-2が選択できる、といった制御をしたい場合があります。

このときAppSheetでは、Dataの各行に対して設定できる詳細オプション（Data Validity）を設定することで比較的簡単に実現できます。
下図の例では、ユーザ管理シートのserviceとteamに対して、それぞれ"Valid If"でチーム管理シートの値を参照するように設定しています。すると右側のようにserviceの選択に応じてteamの表示が切り替わる機能を実現できます。

デフォルト値の活用

利用者に編集依頼をするとき、編集した人の名前や識別子を合わせて記載してもらいたいというニーズはよくあると思います。
AppSheetでは、"FORMULA"の設定により、これを実現できます。
例えば、当該行を最後に編集した人のemailアドレスを"last_updated_by"に記載するといったことが簡単に実現できます（利用者がサインインしておりAppSheetが同情報を取得可能な場合）。
その例を下図に示しています。
これにより、デフォルトで補完されるため利用者の手間を減らすこともできますし、直接は編集できないため入力漏れや意図せぬ変更などを回避できます。