---
pkg: "@nocobase/plugin-kanban"
title: "かんばんブロック"
description: "かんばんブロック：グループ列でデータレコードを表示し、スタイル切り替え、クイック追加、ポップアップ設定、ドラッグ＆ドロップソート、カードクリックでの展開をサポートします。"
keywords: "かんばんブロック,Kanban,データグループ,ドラッグソート,クイック追加,ポップアップ設定,カードレイアウト,インターフェース構築,NocoBase"
---

# かんばん

## 紹介

かんばんブロックはグループ列でデータレコードを表示し、タスクのステータス遷移、営業ステージの追跡、チケット処理など、ステージごとにデータを確認・推進する必要があるシーンに適しています。

![](https://static-docs.nocobase.com/Kanban-04-17-2026_01_51_PM.png)

## ブロック設定項目

![](https://static-docs.nocobase.com/Kanban-04-22-2026_09_53_PM.png)

### グループ設定

かんばんブロックではまずグループフィールドを指定する必要があり、システムがフィールド値に基づいてレコードを各列に振り分けます。

- グループフィールドは単一選択フィールド、多対一フィールドをサポートしています。
- 単一選択フィールドの場合、列タイトルと列の色はフィールドオプションで設定されたラベルと色がそのまま使用されます。
- 多対一フィールドのグループオプションは、関連テーブルのレコードから読み込まれます。
- グループフィールドが多対一フィールドの場合、追加の設定が可能です：
	- タイトルフィールド：列ヘッダーにどの関連フィールド値を表示するかを決定します。
	- 色フィールド：列ヘッダーと列コンテナの背景色を決定します。
- 「グループ値の選択」で、どの列を表示するかや列の表示順序を制御できます。
- グループ値が空のレコードは「不明」列に表示されます。

![](https://static-docs.nocobase.com/Kanban-04-22-2026_09_53_PM%20(1).png)
![](https://static-docs.nocobase.com/Kanban-04-22-2026_09_54_PM.png)

### スタイル

かんばんは2種類の列スタイルをサポートしています：

- `Classic`：より軽量なデフォルトの列背景を維持します。
- `Filled`：列の色で列ヘッダーと列コンテナの背景をレンダリングし、ステータスカラーをより明確にしたいシーンに適しています。

![](https://static-docs.nocobase.com/Kanban-04-22-2026_09_54_PM%20(1).png)

### ドラッグ設定

ドラッグを有効にすると、カードを直接ドラッグして順序を調整できます。

- 「ドラッグソートを有効にする」を有効にすると、さらに「ドラッグソートフィールド」を選択できます。
- ドラッグソートはソートフィールドに依存し、ソートフィールドは現在のグループフィールドと一致する必要があります。
- カードを他の列にドラッグすると、レコードのグループフィールド値とソート位置が同時に更新されます。

詳細は[ソートフィールド](/data-sources/field-sort)をご参照ください。

![](https://static-docs.nocobase.com/Kanban-04-22-2026_09_55_PM.png)

### クイック追加

「クイック追加」を有効にすると、各列のタイトル右側にプラスボタンが表示されます。

- 列ヘッダーのプラスをクリックすると、現在の列をコンテキストとして新規追加ポップアップが開きます。
- 新規フォームには現在の列に対応するグループ値が自動的に入力されます。
- 現在の列が「不明」列の場合、そのグループフィールドは空値として事前入力されます。

![](https://static-docs.nocobase.com/Kanban-04-22-2026_09_57_PM.png)

### ポップアップ設定

ブロックレベルの「ポップアップ設定」は、列ヘッダーのクイック追加ボタンで開くポップアップの動作を制御します。

- 開き方（ドロワー、ダイアログ、ページなど）を設定できます。
- ポップアップのサイズを設定できます。
- ポップアップテンプレートをバインドしたり、ポップアップ内にブロックコンテンツを追加したりできます。

### 列ごとのページ数

各列で最初に読み込むレコード数を制御します。列内のレコードが多い場合は、スクロールして追加読み込みできます。

### 列幅

各列の幅を設定し、カードコンテンツの密度に応じて表示効果を調整できます。

### データ範囲の設定

かんばんブロックに表示するデータの範囲を制限するために使用します。

例：現在の担当者が作成したタスクのみを表示する、または特定のプロジェクトのレコードのみを表示する。

詳細は[データ範囲の設定](/interface-builder/blocks/block-settings/data-scope)をご参照ください。


## フィールドの設定

かんばんカードの内部では、詳細形式のフィールドレイアウトを使用してレコードのサマリー情報を表示します。

### フィールドの追加

![](https://static-docs.nocobase.com/Kanban-04-17-2026_01_55_PM.png)

フィールドの設定項目については[詳細フィールド](/interface-builder/fields/generic/detail-form-item)をご参照ください。

### カード設定

カード自体は以下の設定をサポートしています：

- クリックで開くを有効化：有効にすると、カードをクリックして現在のレコードを開けます。
- ポップアップ設定：カードクリック時の開き方、サイズ、ポップアップテンプレートを個別に設定できます。
- レイアウト：カード内のフィールドの表示レイアウトを調整できます。

![](https://static-docs.nocobase.com/Kanban-04-22-2026_09_56_PM.png)

![](https://static-docs.nocobase.com/Kanban-04-17-2026_01_55_PM%20(2).png)

## 操作の設定

かんばんブロックは上部にグローバル操作の設定をサポートしています。表示される操作タイプは、現在の環境で有効化されているアクション機能によって変わります。

![](https://static-docs.nocobase.com/Kanban-04-22-2026_10_02_PM.png)

### グローバル操作

- [新規追加](/interface-builder/actions/types/add-new)
- [ポップアップ](/interface-builder/actions/types/pop-up)
- [リンク](/interface-builder/actions/types/link)
- [リフレッシュ](/interface-builder/actions/types/refresh)
- [カスタムリクエスト](/interface-builder/actions/types/custom-request)
- [JS Action](/interface-builder/actions/types/js-action)
- [AI 従業員](/interface-builder/actions/types/ai-employee)
