Appsmithの使い方｜サンプルデータで一覧画面を作る

社内のデータを、必要な項目だけ見られる画面にしたい。Appsmithは、データベースやAPIから情報を取り出し、表や入力欄を組み合わせたWeb画面を作る道具です。ここでは公式のサンプルデータを使い、一覧を表示するところまで試します。

Gristとの役割の違い

Gristは、データを表として整理し、そのドキュメント内で見たり編集したりする入口です。Appsmithは、すでにあるデータベースやAPIを使う人向けに、一覧・検索・入力などの画面を作ります。Appsmithだけを入れてもデータベースは付いてきません。必要なデータの置き場を別に用意します。

サンプルの一覧画面を作る

1. 1Appsmith Cloudで無料のワークスペースを作る

   Appsmith Cloudへ登録して、空のアプリを作ります。無料プランはCloudで最大5ユーザーです。自分でサーバーに入れる場合はCloud登録ではなく、公式のセルフホスト手順を使います。

2. 2公式のSample Usersデータにつなぐ

   アプリのData画面でデータソースを追加し、公式チュートリアルの「Sample Users」を選びます。チュートリアルが用意している練習用データです。自分のPostgreSQL接続先を入れる必要はありません。

3. 3読み取り用の問い合わせを作る

   新しいクエリに、公式チュートリアルの例を入力します。これはサンプル表から最大10行を読むSQLです。

   この手順で使う入力例

   SELECT * FROM public."users" ORDER BY id LIMIT 10;

4. 4結果を確認して表に表示する

   Runを押して結果が返ることを確かめます。次にUIからTableウィジェットを追加し、Table Dataにこのクエリを指定します。行が画面に出れば、データソース→クエリ→画面の流れができました。

5. 5名前で探せるか試す

   テーブルのname列を検索可能にし、サンプルの名前を入力して行が絞られるか試します。実際の担当者や顧客の情報は入力しません。アプリはこの段階では自分の編集画面で確認し、公開しないでください。

どんな場面に使える？

社内ツールを作る人が、既存データを探す画面、申請の確認画面、問い合わせの一覧などを試作できます。画面を作る作業は速く始められますが、誰がどの行を見られるか、誰が書き換えられるか、データをどこに保存するかは別途決める必要があります。

一方、項目を決めながら簡単な表を作りたいだけなら、Gristの方が準備は少なくて済みます。Gristは表とデータをまとめて扱い、Appsmithは既存データにつなぐ画面づくりに向きます。二つの間に自動連携があるわけではないので、つなぐ場合は対応データソースやAPIを別途設定します。

費用の違い

今回のサンプル練習なら、無料のCloud枠から始められ、サーバーや機材を買う必要はありません。Community版を自分で常時動かしたい人は、保守できるサーバーが必要です。CloudのBusiness試用後にFreeへ継続する選択も公式料金ページに記載されています。