---
title: "UI 設定"
description: "UI 設定 Skill は、NocoBase のページ、ブロック、フィールド、操作の設定を作成・編集するためのツールです。"
keywords: "AI ビルダー,UI 設定,ページ,ブロック,ポップアップ,連動,UI Builder"
---

# UI 設定

:::tip 前提条件

このページを読む前に、[AI ビルダー クイックスタート](./index.md)に従って NocoBase CLI のインストールと初期化が完了していることを確認してください。

:::

## 概要

UI 設定 Skill は、NocoBase のページ、ブロック、フィールド、操作の設定を作成・編集するためのツールです。業務用語でページの要件を記述すると、ブループリントの生成、ブロックのレイアウト、インタラクション連動を処理します。


## 対応機能

できること：

- 完全なページの作成：テーブル、フィルターフォーム、詳細ポップアップを一括作成
- 既存ページの編集：ブロックの追加、フィールドの調整、ポップアップの設定、レイアウトの調整
- インタラクション連動の設定：デフォルト値、フィールドの表示/非表示、計算連動、操作ボタンの状態
- テンプレート再利用：繰り返しのポップアップやブロックをテンプレートとして保存
- マルチページタスク：順番にページを構築

できないこと：

- ACL 権限の設定はできません（[権限設定 Skill](./acl) を使用してください）
- データテーブル構造の設計はできません（[データモデリング Skill](./data-modeling) を使用してください）
- ワークフローの構築はできません（[ワークフロー管理 Skill](./workflow) を使用してください）
- 非モダンページ（v1）のナビゲーションは処理できません。v2 ページのみに対応しています。

## プロンプト例

### シナリオ A：管理ページの作成

```
顧客管理ページを作成してください。名前検索ボックスと顧客テーブルを含め、テーブルには名前、電話番号、メール、作成日時を表示してください
```

Skill がデータテーブルのフィールドを読み取り、ページブループリントを生成して書き込みます。

![管理ページの作成](https://static-docs.nocobase.com/20260420100608.png)


### シナリオ B：ポップアップの設定

```
テーブル内の顧客名をクリックした際に詳細ページをポップアップ表示し、すべてのフィールドを表示してください
```

追加の操作ボタンではなく、フィールドポップアップ（クリックで即表示）が優先的に使用されます。

![ポップアップの設定](https://static-docs.nocobase.com/20260420100641.png)

### シナリオ C：連動ルールの設定

```
ポップアップ /admin/c0vc2vmkfll/view/cec3e7a69ac/filterbytk/1 内の編集フォームにフィールドルールを追加してください：
ユーザー id が 1 の場合、username の編集を禁止する
```

設定を手動で記述する必要なく、連動ルールの設定を通じて実現します。

![連動ルールの設定](https://static-docs.nocobase.com/20260420100709.png)

### シナリオ D：マルチページの構築

```
ユーザー管理システムを構築してください。このシステムにはユーザー管理ページとロール管理ページの 2 つのページがあり、1 つのページグループに配置します。
```

マルチページのシンプルな設計案が提示され、確認・調整後に構築が開始されます。

![マルチページの構築](https://static-docs.nocobase.com/20260420100731.png)

## よくある質問

**ページ作成後にブロック内にデータが表示されない場合は？**

まず、対応するデータテーブルにレコードが存在することを確認してください。また、ブロックにバインドされたコレクションとデータソースが正しいか確認してください。[データモデリング Skill](./data-modeling) を使用してテストデータを作成することもできます。

**ポップアップに複数のブロックを配置したい場合は？**

プロンプトでポップアップの内容を記述できます。例えば「編集ポップアップにフォームと関連テーブルを配置する」のように指定すると、Skill が複数のブロックを含むカスタムポップアップレイアウトを生成します。

**手動設定と AI 設定は互いに影響しますか？**

手動設定と AI 設定を同時に行っている場合は互いに影響しますが、同じタイミングでなければ影響はありません。

## 関連リンク

- [AI ビルダー概要](./index.md) — すべての AI ビルダー Skill の一覧とインストール方法
- [データモデリング](./data-modeling) — AI によるデータテーブル、フィールド、リレーションの作成と管理
- [権限設定](./acl) — ロールとデータアクセス権限の設定
- [ワークフロー管理](./workflow) — ワークフローの作成、編集、診断
