第 3 章：ページを構築する — 空白から実用へ
前の章でデータテーブルの骨格を組み立てましたが、今のところデータは「バックエンド」にしか存在せず、ユーザーからは見えません。この章では、データを表舞台に出します。テーブルブロックを作成してチケットデータ を表示し、フィールド表示、ソート、フィルタリング、ページネーションを設定して、実際に使えるチケット一覧にしていきます。
3.1 ブロック（Block）とは
NocoBase において、ブロックはページ上の「積み木」です。テーブルを表示したい？テーブルブロックを配置します。フォームを表示したい？フォームブロックを配置します。1 つのページに複数のブロックを自由に組み合わせ、ドラッグ＆ドロップでレイアウトを調整できます。
よく使われるブロックタイプ：
このたとえを覚えておきましょう：ブロック = 積み木。これから積み木でチケット管理ページを組み立てていきます。
3.2 メニューとページの追加
まず、システムに「チケット管理」の入口を作ります。
- 右上の UI エディター スイッチをクリックして設定モードに入ります（ページ全体にオレンジ色の編集可能な枠が表示されます）。
- マウスをトップナビゲーションバーの 「メニュー項目を追加（Add menu item）」 ボタンに移動し、「グループを追加（Add group）」 を選択して、「チケット管理」 と名付けます。
- トップナビゲーションバーに「チケット管理」メニューが即座に表示されます。クリックすると、左側にグループメニューバーが展開されます。
- 左側メニューバーで、オレンジ色の 「メニュー項目を追加（Add menu item）」 ボタンをクリックし、「新版ページ（v2）（Modern page (v2)）」 を選択して、2 つのサブページを順に追加します：
- チケット一覧 — すべてのチケットを表示
- チケット分類 — 分類データを管理
注意：ページ追加時に「旧版ページ（v1）」と「新版ページ（v2）」の 2 つのオプションが表示されます。本チュートリアルでは統一して v2 を使用します。
3.3 テーブルブロックの追加
「チケット一覧」ページに移動し、テーブルブロックを追加しましょう。
- 空白ページで 「ブロックを作成（Add block）」 をクリックします。
- データブロック → テーブル を選択します。
- ポップアップのデータテーブルリストで 「チケット」（前の章で作成した tickets テーブル）を選択します。
テーブルブロックの追加が成功すると、ページに空のテーブルが表示されます。
空のテーブルではデバッグしにくいので、まず新規作成ボタンを追加して、テストデータを数件入力しましょう。
- テーブル右上の 「アクションを設定（Configure actions）」 をクリックし、「新規作成（Add new）」 にチェックを入れます。
- 新しく表示された 「新規作成」 ボタンをクリックし、ポップアップで ブロックを追加（Add block） → フォーム（新規追加）（Form (Add New)） → 現在のデータテーブル（Current collection） を選択します。
- ポップアップ内で 「フィールドを設定（Configure fields）」 をクリックし、タイトル、ステータス、優先度などのフィールドにチェックを入れます。「アクションを設定（Configure actions）」 をクリックし、「送信（Submit）」 ボタンを有効にします。
- 適当にチケットデータを数件入力して送信すると、テーブルにデータが表示されます。
フォームの詳細な設定（フィールド連動、編集フォーム、詳細ポップアップなど）は第 4 章で詳しく解説します。ここではデータが入力できれば十分です。
3.4 表示列の設定
デフォルトではテーブルにすべてのフィールドが自動表示されるわけではないので、表示する列を手動で選択する必要があります。
- テーブルブロックのヘッダー右側にある 「フィールド（Fields）」 をクリックします。
- 表示するフィールドにチェックを入れます：
- タイトル — チ ケットの概要、一目で把握
- ステータス — 現在の対応状況
- 優先度 — 緊急度
- 分類 — リレーションフィールド、分類名が表示されます
- 提出者 — 誰がチケットを提出したか
- 担当者 — 誰が対応しているか
- 表示不要なフィールド（ID、作成日時など）はチェックを外し、テーブルをすっきり保ちます。
ヒント：フィールドの表示順はドラッグ＆ドロップで調整できます。最も重要な「タイトル」と「ステータス」を先頭に配置すると、キーとなる情報がすぐに目に入ります。
リレーションフィールドに ID が表示される問題
「分類」にチェックを入れると、テーブルに分類名ではなく ID（数値）が表示されることがあります。これはリレーションフィールドがデフォルトで ID をタイトルフィールドとして使用しているためです。2 つの方法で修正できます。
方法 1：テーブル列の設定で変更する（現在のテーブルのみ有効）
「分類」列の設定項目をクリックし、「タイトルフィールド（Title field）」 を ID から名前に変更します。この方法は現在のテーブルブロックにのみ影響します。
方法 2：データソースで変更する（グローバルに有効、推奨）
設定 → データソース → データテーブル → 分類テーブル に移動し、「タイトルフィールド」 を 名前 に変更します。これにより、分類テーブルを参照するすべての箇所でデフォルトで名前が表示されるようになります。変更後はページに戻ってフィールドを再追加する必要があります。
3.5 フィルタリングとソートの追加
チケットが増えてくると、特定のチケットをすばやく見つける必要が出てきます。NocoBase には複数の方法がありますが、まず最もよく使うフィルタフォームブロックを紹介します。
フィルタフォームの追加
- チケット一覧ページで 「ブロックを作成」 をクリックし、フィルタブロック → フィルタフォーム を選択します。
- v2 ページではデータテーブルを選択する必要はありません。フィルタフォームが直接ページに追加されます。
- フィルタフォームで 「フィールド（Fields）」 をクリックすると、現在のページ内のフィルタ可能なデータブロックのリストが表示されます（例：
Table: チケット #c48b。後ろのコードはブロックの UID で、同じテーブルの複数のブロックを区別するために使います）。
- マウスをブロック名にホバーすると、そのブロックでフィルタ可能なフィールドのリストが展開されます。フィールドをクリックするとフィルタ項目として追加されます：ステータス、優先度、分類。
- 追加後、フィルタフォームに条件を入力すると、テーブルデータがリアルタイムで自動フィルタリングされます。
複数フィールドのあいまい検索
1 つの検索ボックスで複数のフィールドを同時に検索するにはどうすればよいでしょうか？
検索フィールド右上の設定項目をクリックすると、「フィールドを接続（Connect fields）」 オプションが表示されます。展開すると各ブロック内の検索可能なフィールドが一覧表 示されます。デフォルトでは「タイトル」だけが接続されています。
さらにフィールドを選択できます。たとえば説明を追加すれば、キーワード入力時にこれらのフィールドを同時に検索します。
さらにリレーション先のフィールドでもフィルタリングできます。「分類」をクリックし、次のレベルのオプションで「分類名」にチェックを入れると、検索時に分類名もマッチングの対象になります。
「フィールドを接続」は強力です：複数のブロック、複数のフィールドにわたって機能します。ページに複数のデータブロックがある場合は、ぜひ新しいブロックを作成して効果を試してみてください。
自動フィルタリングを無効にしたい場合
ユーザーがボタンをクリックしてからフィルタリングを実行したい場合は、フィルタフォーム右下の 「アクション（Actions）」 をクリックし、「フィルタ（Filter）」 と 「リセット（Reset）」 ボタンにチェックを入れます。これにより、ユーザーが条件を入力した後、 手動でクリックしないとフィルタリングが実行されなくなります。
もう 1 つのフィルタリング方法：テーブル内蔵のフィルタ操作
独立したフィルタフォームブロック以外に、テーブルブロック自体にも 「フィルタ（Filter）」 操作ボタンがあります。テーブルブロック上部の 「アクション（Actions）」 をクリックし、「フィルタ」 にチェックを入れると、テーブルのツールバーにフィルタボタンが表示されます。クリックすると条件パネルが表示され、フィールド条件でデータをフィルタリングできます。
フィルタボタンを開くたびに手動でフィールドを探す手間を省きたい場合は、フィルタボタンの設定項目でデフォルトのフィルタフィールドを事前設定できます。これにより、ユーザーはボタンを開くとすぐによく使うフィルタ条件を確認できます。
注意：テーブル内蔵のフィルタ操作は現在複数フィールドのあいまい検索をサポートしていません。複数フィールドでの検索が必要な場合は、上記のフィルタフォームブロックと「フィールドを接続」機能を組み合わせてください。
デフォルトソートの設定
最新のチケットが一番上に表示されるようにしましょう。
- テーブルブロック右上の ブロック設定（三本線アイコン）をクリックします。
- 「ソートルールを設定」 を見つけます。
- ソートフィールドを追加します：作成日時 を選択し、ソート方向を 降順 に設定します。
これで、新しく提出されたチケットが常に一番上に表示され、対応がより便利になります。
3.6 行アクションの設定
一覧を見るだけでは不十分です。チケットの詳細を確認したり、チケットを編集したりする機能も必要です。
「閲覧」ボタンをクリックすると、ドロワー（Drawer）が開き、中に詳細ブロックを配置して完全な情報を表示できます。詳細な設定は次の章で行います。 「削除」をクリックすると、その行のデータが削除されます。
3.7 ページレイアウトの調整
ここまでで、ページにはフィルタフォームとテーブルの 2 つのブロックが配置されていますが、デフォルトでは上下に積み重なっており、見た目がいまひとつかもしれません。NocoBase はドラッグ＆ドロップでブロックの位置とレイアウトを調整できます。
設定モードで、ブロック左上のドラッグハンドルにマウスを合わせる（カーソルが十字矢印に変わります）と、押しながらドラッグできます。
フィルタフォームをテーブルの上にドラッグ：フィルタフォームブロックをつかんで、テーブルブロックの上端に移動し、青い線が表示されたら離すと、フィルタフォームがテーブルの上に配置されます。
フィルタフィールドを同じ行にドラッグ：フィルタフォーム内部でも、フィールドはデフォルトで縦に並んでいます。「優先度」を「ステータス」の右側にドラッグし、縦方向のガイドラインが表示されたら離すと、2 つのフィールドが同じ行に横並びになり、縦方向のスペースを節約できます。
NocoBase ではほぼすべての要素がドラッグ＆ドロップに対応しています。アクションボタン、テーブル列、メニュー項目なども自由に探索してみてください。
3.8 チケット分類ページの設定
3.2 節で作成した「チケット分類」サブページも忘れずに設定しましょう。設定手順はチケット一覧と同様で、テーブルブロックの追加、フィールドの選択、アクションの設定を行います。ここでは繰り返しませんが、1 つ重要な違いだけ説明します。
第 2 章で作成した「チケット分類」テーブルを覚えていますか？あれはツリーテーブル（親子階層をサポート）でした。テーブルでツリー構造を正しく表示するには、設定項目を 1 つ有効にする必要があります。
- 「チケット分類」ページに入り、テーブルブロックを追加して「チケット分類」データテーブルを選択します。
- テーブルブロックの ブロック設定（三本線アイコン）をクリックし、「ツリーテーブルを有効化（Tree table）」 を見つけてオンにします。
オンにすると、テーブルはすべてのレコードを平坦に並べるのではなく、インデントされた階層形式で親子分類関係を表示します。
- 表示するフィールド（名前、説明など）にチェックを入れ、行アクション（追加、編集、削除）を設定します。
- レイアウトの提案：「名前」を第 1 列、「アクション」列を第 2 列に配置しましょう。分類テーブルはフィールドが少ないため、2 列レイアウトの方がコンパクトで使いやすくなります。
まとめ
おめでとうございます！チケットシステムにしっかりとした管理インターフェースができました。
- すっきりしたメニュー構造（チケット管理 → チケット一覧 / チケット分類）
- チケットデータを表示するテーブルブロック
- ステータス、優先度、分類でスピーディにフィルタリングできるフィルタフォーム
- 作成日時の降順で並べるソートルール
- 閲覧や編集に便利な行アクションボタン
- 分類の階層を表示するツリーテーブル
想像以上に簡単だったのではないでしょうか？ここまでの作業でコードは一行も書いておらず、すべてインターフェースのドラッグ＆ドロップと設定で完了しています。
次の章のプレビュー
「見る」だけでは不十分です。ユーザーが新しいチケットを提出できるようにする必要があります。次の章では、フォームブロックを構築し、フィールド連動ルールを設定して、さらに変更履歴を有効にしてチケットの変更を追跡できるようにします。