NocoBase で最初の業務アプリを作ってみよう！ コレクションを定義して画面に配置するまで
はじめに
杉浦です。NocoBase シリーズの第4回です。
第3回で Docker Compose を使ってローカルに NocoBase を立てました。今回はその環境の上に、最初の業務アプリを作ります。
題材は蔵書管理です。書籍の一覧を持ち、誰がいつ借りたかを記録するだけのアプリです。ありふれた題材にしたのは、仕様が想像しやすく、NocoBase の構造への理解に繋がると思ったからです。
この記事から3回で、ひとつのアプリを構築していきます。今回はコレクションを定義して画面に配置するところまで。第5回で権限を付け、第6回で自動化を足す予定です。第1回で示した「テーブルを作る → 画面に配置する → 操作と権限を付ける → 自動化を足す」という積み上げ方にそのまま対応していて、3回を通して NocoBase の基本的な仕組みを学べる構成にしています。
前提は次のとおりです。第3回の最後に触れた設定は済ませておいてください。
- 第3回で立てたローカル環境（v2.2.5）が動いていること。執筆時点の最新安定版は 2.2.15 ですが、第3回でイメージのタグを 2.2.5 に固定しているので、この記事もその環境で進めます
- 管理画面を日本語にしてあること
何を作るか
コレクションを2つ作ります。NocoBase では、いわゆるテーブルのことをコレクションと呼びます。
書籍（books） が本の情報、貸出（loans） が貸し借りの記録です。貸出は必ずどれかの書籍に紐づくので、貸出から書籍への関連を張ります。
この2つを作って、それぞれの一覧と入力フォームを画面に置くところまでが今回の範囲です。
コレクションを作る
画面右上の歯車アイコンから データソース を開きます。
一覧には「メイン」が1行あるので、操作列の 設定 を押します。すると、メインのデータソースにあるコレクションの一覧が出ます。最初から「役割」と「ユーザー」が入っていますが、これは NocoBase 本体が使うものです。
コレクションの作成 を押すと、データテーブルテンプレートの一覧が出ます。一般データテーブル・カレンダーデータテーブル・ツリーコレクション・ファイルデータテーブル・SQLコレクション・ビューに接続、の6つです。今回は 一般データテーブル を選びます。ほかはカレンダーやツリー構造など用途が決まっているもので、ふつうの業務データはこれで足ります。
識別子と表示名は別物
作成ダイアログには、名前を入れる欄が2つあります。
- コレクション名: 画面に出る表示名。日本語でよい。「書籍」
- コレクション識別子: システムが内部で使う名前。英数字で付ける。「books」
識別子は後から変えられません。表示名はいつでも変えられます。ここが今回いちばん大事な「後から変えにくい選択」です。第3回でバージョンやデータベースについて同じ話をしましたが、データモデルにも同じ性質の選択があります。
命名に迷ったら、複数形の英小文字で揃えておくと後で困りません。books、loans のように。
実際の業務では、社内やチームにデータベースの命名規則があれば、それに従ってください。NocoBase 側の制約は、英字で始まり、英数字とアンダースコアだけ、という点です。
フィールドを追加する
コレクションができたら、フィールドの追加 からフィールドを足していきます。ダイアログには フィールド表示名・フィールド識別子・フィールドタイプ の欄があります。書籍には次の5つを作ります。
| フィールド表示名 | フィールド識別子 | フィールドタイプ | 備考 |
|---|---|---|---|
| 書名 | title |
一行テキスト | |
| 著者 | author |
一行テキスト | |
| 分類 | category |
ドロップダウン（単数選択） | 技術書／ビジネス／小説／その他 |
| 状態 | status |
ドロップダウン（単数選択） | 在庫あり／貸出中 |
| 購入日 | purchased_at |
日付のみ |
フィールドにも識別子と表示名があり、識別子は同じく後から変えられません。
選択肢は別途登録します。 ドロップダウン（単数選択）は、フィールドを作っただけでは選択肢が空です。ダイアログの オプション に、値とラベルの組を登録してください。値は tech、ラベルは「技術書」のように、値は英数字、ラベルは日本語にします。理由は後述します。
日付の種類
日時のフィールドタイプには 日付のみ のほかに、日時（タイムゾーン含む） と 日時（タイムゾーンなし） があります。購入日のように日付だけを扱うなら、日付のみで十分です。
第3回で、データベース製品によって日時の保存形式が変わる話をしました。予定や締切のように時刻まで扱うフィールドを作るときは、そこを思い出してください。今回の蔵書管理では日付だけなので、この問題は起きません。
タイトルフィールドを決めておく
もうひとつ、書籍のコレクションで済ませておきたい設定があります。コレクションの編集 を開くと タイトルフィールド という欄があるので、「書名」を選んでください。
タイトルフィールドは、他のコレクションからこのレコードを参照したときに「代表として表示する項目」です。設定しないと ID が代表になります。試しにタイトルフィールドを未設定に戻して貸出の追加フォームを開くと、書籍を選ぶ欄には書名ではなく 387048334229504 のような ID の数値が並びました。あとから直す場合は、コレクションの設定を変えるか、フォーム側の書籍の欄にある タイトルフィールド の設定を「書名」にします。
関連を作る
次に貸出のコレクションを作ります。コレクション名「貸出」、識別子 loans。フィールドは次の4つです。
| フィールド表示名 | フィールド識別子 | フィールドタイプ |
|---|---|---|
| 利用者 | borrower |
一行テキスト |
| 貸出日 | loan_date |
日付のみ |
| 返却期限 | due_date |
日付のみ |
| 書籍 | book |
多対1 |
最後の「書籍」が関連フィールドです。フィールドタイプで 多対1 を選び、参照先コレクション に「書籍」を指定します。貸出は1冊の書籍に紐づき、1冊の書籍は何度も貸し出される、という関係です。
ダイアログには 外部キー の欄もあります。これは「どの書籍か」を保持するための列で、既定ではランダムな名前が入っています。保存すると、この名前のフィールドが貸出のフィールド一覧に現れます。この名前も後から変えられません。book_id のように、あとで見て分かる名前に直すのを勧めます。データベースを直接のぞいたり、API で取り出したりしたときに、ランダムな列名は読めません。
関連フィールドを作ると、画面側で「書籍を選ぶ」UI が自動的に用意されます。貸出の入力フォームを作ったときに、書籍の欄が選択肢として出てくる、ということです。これが第1回で触れた「データモデルと UI の分離」の実例です。UI を作る前に、データの関係だけを定義しておけば、画面はそれに従って組み上がります。
画面に配置する
コレクションができたので、画面を作ります。データが入っていなくても、画面は先に作れます。
右上のペンのアイコンで UI エディタ をオンにします。第3回のログイン直後に「UI Editor のアイコンから始めてください」と案内が出ていた、あれです。
UI エディタはこのアイコンでオンとオフを切り替えます。オンにすると、ブロックやフィールドの追加、操作の設定といった画面を変更するためのメニューが表示されます。ページに何かを配置したいときや、画面の構成を変えたいときはオンにして作業し、終わったらオフに戻すと、利用者が見る状態の画面になります。
ページを作る
左のメニューにある メニュー項目を追加 を押すと、グループ・Classic page (v1)・Modern page (v2)・リンクの4つが出ます。ページは v1 と v2 の2種類があり、今回は Modern page (v2) を選びます。v1 は旧版、v2 は 2.x の新版で、公式の入門チュートリアルも v2 で統一しています。この記事の手順はすべて v2 のページが前提です。
名前は「蔵書管理」にしました。今回は、このページ1枚に書籍と貸出の両方を置きます。
テーブルブロックを置く
ページを開くと ブロックを追加 が出るので、テーブル を選び、コレクションに「書籍」を指定します。空のテーブルが置かれます。
テーブルの右上に フィールド があります。ここで表示する列を選びます。書名・著者・分類・状態・購入日をオンにします。
操作を付ける
同じくテーブルの右上の 操作 から、追加 を有効にします。これで一覧の上に「追加」ボタンが出ます。
押すとポップアップが開きますが、最初は中身が空です。ポップアップの中で ブロックを追加 から フォーム (新規追加) を選び、フォームの フィールド で入力させたい項目を選びます。書籍のフォームには、書名・著者・分類・状態・購入日の5つを置きます。ID や作成日などのシステムフィールドは自動で入るので、フォームには置きません。
フォームにも 操作 があります。ここで 保存 を追加しないと、入力はできても保存するボタンがありません。これで書籍を登録するフォームになります。
一覧の各行にも操作を付けられます。テーブルには最初から「操作」列がありますが、これも中身は空です。操作列の見出しの設定から 表示 編集 削除 を有効にしておくと、一覧から各レコードを開いたり直したりできます。
貸出のテーブルも置く
同じ手順で、ページの下にもうひとつ テーブル を置き、コレクションに「貸出」を指定します。列は利用者・貸出日・返却期限・書籍の4つ、操作は書籍と同じです。「追加」のポップアップにも同じようにフォームを置き、フィールドは書籍・利用者・貸出日・返却期限の4つ、操作に 保存 を追加します。
ここで追加フォームの「書籍」の欄を見てください。テキスト入力ではなく、書籍を選ぶ欄になっているはずです。関連フィールドを作っただけで、画面側はこうなります。
動かしてみる
書籍を数冊登録して、貸出を1件作ってみます。
- 書籍の 追加 を押し、書籍を登録する。分類と状態は選択肢から選ぶ
- 何冊か入れたら、貸出の 追加 を押す
- 「書籍」の欄で、登録した本を選ぶ。利用者と日付を入れて保存する
貸出の一覧に、選んだ書籍の書名が表示されれば完成です。
貸し出した本の「状態」は「在庫あり」のままです。今回は貸出を記録しただけで、書籍側の状態は手で変えていません。貸出を登録したら状態を自動で「貸出中」にする、といった連動は第6回のワークフローで扱う予定です。
やってみて迷ったのは、コレクションと画面の間にある「もう一手間」でした。ドロップダウンのフィールドを作っただけでは選択肢が空で、「追加」を押しても中身のないポップアップが開くだけです。どちらも作れば済むのですが、テーブルとフォームが自動で用意されるツールに慣れていると、戸惑います。逆に、関連を張った途端に書籍の欄がドロップダウンになったところは、データモデルから画面が組み上がることを実感でき、ここが NocoBase らしさだと感じました。
後から変えられるものと変えられないもの
第3回と同じ切り口で、今回作る中で出てきた設定を、後から変えられるものと変えられないものに分けます。
識別子。 コレクション識別子・フィールド識別子・外部キーの列名は、作ったあと変えられません。表示名は変えられるので、画面の見た目は後から直せます。内部の名前だけ最初に決めておく、と割り切ってください。
必須。 フィールドの追加ダイアログに必須のチェックボックスはなく、Validation のルールとして付けます。ルールはアプリ側の検証で、後から付け外しできるので、こちらは変えやすい側です。
フィールドの型。 一行テキストを数値に、といった型の変更はできません。作り直しになり、データの移し替えが要ります。
選択肢の値。 ドロップダウンの選択肢には「値」と「ラベル」があります。ラベルは表示用で後から変えられますが、値は保存されるデータそのものです。値を変えると既存データとの対応がずれるので、値は最初から安定した英数字にしておくのが無難です。
こうして並べると、表示に関わるものは後から直せて、データの構造に関わるものは直しにくい、という区別がはっきりします。第1回で「データモデルと UI の分離」と書いたのは、こういう場面で意味を持ちます。
次回以降の予定
次の2回は、この順で進める予定です。
- 第5回（仮）: 権限を付けてみる。ロールを作り、見える範囲とできる操作を分ける
- 第6回（仮）: 自動化してみる。返却期限を過ぎたら通知する、といったワークフロー
どちらも今回作った蔵書管理をそのまま使います。
まとめ
- コレクションを2つ作り、関連を張り、画面に配置して動かすところまでを通しました
- 関連フィールドを定義すれば、画面側の「選ぶ UI」は自動で付いてきます。データモデルと UI の分離とはこのことです
- 識別子・型・選択肢の値は、作る時点で決めると後から変えにくい選択です。表示名やラベル、必須の検証ルールは後から直せます
次回は、この蔵書管理に権限を付けていきます。
