# 第 5 章：タブと動的ブロック

<iframe width="800" height="436" src="https://player.bilibili.com/player.html?isOutside=true&aid=113544406238001&bvid=BV1RfzNYLES5&cid=27009811403&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>

第 5 章へようこそ！この章はとても充実した内容です。タスク管理ページにさらに多くの機能を追加し、さまざまなビュー方式に対応させます。きっと楽しみにされていましたよね？大丈夫です。いつものように一歩ずつ進めていきましょう！

### 5.1 タブコンテナ：さまざまなブロックを収容する

タスク管理ページはすでに作成しましたが、システムをより直感的にするため、ページ内でさまざまな表示モードを切り替えられるようにしたいと思います。例えば、[**テーブル**](https://docs-cn.nocobase.com/handbook/ui/blocks/data-blocks/table)、[**かんばん**](https://docs-cn.nocobase.com/handbook/block-kanban)、[**カレンダー**](https://docs-cn.nocobase.com/handbook/calendar)、さらには[**ガントチャート**](https://docs-cn.nocobase.com/handbook/block-gantt)などです。NocoBase のタブ機能を使えば、同じページ内で異なるブロック配置を切り替えることができます。ゆっくり操作していきましょう。

- タブの作成
  まず、タブを作成しましょう。

1. **サブタブを新規追加する**：

   - 以前のタスク管理ページを開き、ページ内にサブタブを作成します。最初のタブは **「テーブルビュー」** と名付け、すでに設定済みのタスク一覧ブロックを表示します。
2. **もう一つタブを作成する**：

   - 次に、**「かんばんビュー」** というタブを作成します。ここにタスクのかんばんブロックを作成します。
     ![タブの作成](https://static-docs.nocobase.com/nocobase_tutorials_zh/202412172155490.gif)

準備はいいですか？各種ブロックの作成に入りましょう！

> **ブロックの紹介：** ブロックはデータとコンテンツの入れ物で、データを適切な方法でサイト上に表示します。ページ（Page）、ダイアログ（Modal）、ドロワー（Drawer）に配置でき、複数のブロックを自由にドラッグして配置できます。ブロック内でデータを操作することで、さまざまな設定や表示を実現できます。
> NocoBase のブロック機能を活用することで、今回の学習ケースでもシステムのページと機能の構築をより迅速に実現・管理できます。また、ブロックにはテンプレートの設定が可能で、コピーや参照が簡単に行え、ブロック作成の作業量を大幅に削減できます。

### 5.2 かんばんブロック：タスクの状態を一目で把握

[**かんばん**](https://docs-cn.nocobase.com/handbook/block-kanban)はタスク管理システムにおいて非常に重要な機能で、ドラッグ＆ドロップでタスクのステータスを直感的に管理できます。例えば、タスクのステータスごとにグループ化し、各タスクがどの段階にあるかを一目で確認できます。

#### 5.2.1 かんばんブロックの作成

1. **かんばんブロックの新規作成を開始する**：

- **かんばんビュー** タブで「ブロックを作成」をクリックし、タスクテーブルを選択します。すると、どのフィールドでタスクをグループ化するかを尋ねるオプションが表示されます。

2. **グループフィールドを選択する**：

- 先ほど作成した **ステータス** フィールドを選択し、タスクステータスでグループ化します。（注意：グループフィールドは[「ドロップダウンメニュー（単一選択）」](https://docs-cn.nocobase.com/handbook/data-modeling/collection-fields/choices/select)または[「ラジオボタン」](https://docs-cn.nocobase.com/handbook/data-modeling/collection-fields/choices/radio-group)タイプのみ使用可能です。）

3. **ソートフィールドを追加する**：

- かんばん内のカードはソートフィールドで順序を調整できます。この機能を実現するために、ソートフィールドを新規作成します。「フィールドを追加」をクリックし、**ステータスソート（status_sort）** という名前のフィールドを作成します。
- このフィールドは、かんばんでカードをドラッグした際の上下の順序を定義するためのもので、座標のようなものです。左右のグループが異なるステータス、上下の位置がソート値に対応します。後でカードをドラッグした後、フォームでソート値の変化を確認できます。
  ![かんばんブロックの作成](https://static-docs.nocobase.com/nocobase_tutorials_zh/202412172156926.gif)

#### 5.2.2 フィールドと操作のチェック

- 最後に、かんばんブロックで表示するフィールド（タスク名、タスクステータスなど）にチェックを入れて、カードの情報を充実させましょう。

![かんばんフィールドの表示](https://static-docs.nocobase.com/nocobase_tutorials_zh/202412172156326.gif)

### 5.3 テンプレートの活用：コピーと参照

かんばんブロックを新規作成した後、**新規追加フォーム**を作成する必要があります。ここで、NocoBase のとても便利な機能が登場します。以前のフォームテンプレートを[**コピー**または**参照**](https://docs-cn.nocobase.com/handbook/ui/blocks/block-templates#%E5%A4%8D%E5%88%B6%E5%92%8C%E5%BC%95%E7%94%A8%E7%9A%84%E5%8C%BA%E5%88%AB)できるので、毎回設定し直す必要がありません。

#### 5.3.1 **フォームをテンプレートとして保存する**

- 以前の新規追加フォームで、フォーム設定にマウスを移動し、「テンプレートとして保存」をクリックします。テンプレートに名前を付けましょう（例：「タスクテーブル_フォーム 新規追加」）。

![フォームをテンプレートとして保存](https://static-docs.nocobase.com/nocobase_tutorials_zh/202412172156356.gif)

#### 5.3.2 **テンプレートのコピーまたは参照**

かんばんビューで新しいフォームを作成すると、「**テンプレートをコピー**」と「**テンプレートを参照**」の 2 つのオプションが表示されます。この違いは何でしょうか？

- [**テンプレートをコピー**](https://docs-cn.nocobase.com/handbook/ui/blocks/block-templates#%E5%A4%8D%E5%88%B6%E5%92%8C%E5%BC%95%E7%94%A8%E7%9A%84%E5%8C%BA%E5%88%AB)：フォームの新しいコピーを作成します。独立して変更でき、元のフォームに影響しません。
- [**テンプレートを参照**](https://docs-cn.nocobase.com/handbook/ui/blocks/block-templates#%E5%A4%8D%E5%88%B6%E5%92%8C%E5%BC%95%E7%94%A8%E7%9A%84%E5%8C%BA%E5%88%AB)：元のフォームをそのまま「借用」します。変更を加えると、このテンプレートを参照しているすべての場所に同期されます。例えば、フィールドの順序を変更すると、参照しているすべてのフォームも一緒に変わります。

![コピーと参照のテンプレート](https://static-docs.nocobase.com/nocobase_tutorials_zh/202412172157435.gif)

ニーズに応じてコピーか参照を選択できます。一般的には、**テンプレートの参照**の方が便利です。一度変更するだけですべての場所に反映されるため、時間と手間が大幅に節約できます。

### 5.4 カレンダーブロック：タスクの進捗を一目で把握

続いて、[**カレンダーブロック**](https://docs-cn.nocobase.com/handbook/calendar)を作成して、タスクのスケジュール管理をより効果的にしましょう。

#### 5.4.1 カレンダービューの作成

##### 5.4.1.1 **日付フィールドを新規作成する**：

カレンダービューでは、タスクの**開始日**と**終了日**が必要なので、タスクテーブルに 2 つのフィールドを追加します。

- **開始日（start_date）**：タスクの開始時刻を示します。
- **終了日（end_date）**：タスクの終了時刻を示します。

![日付フィールドの新規追加](https://static-docs.nocobase.com/nocobase_tutorials_zh/202412172157585.png)

#### 5.4.2 カレンダーブロックを新規作成する：

カレンダービューに戻り、カレンダーブロックを作成します。タスクテーブルを選択し、先ほど作成した **開始日** と **終了日** フィールドを使用します。これにより、タスクがカレンダー上で期間として表示され、タスクの進捗を直感的に確認できます。

![カレンダービューの構築](https://static-docs.nocobase.com/nocobase_tutorials_zh/202412172157957.gif)

#### 5.4.3 カレンダー操作を体験する：

カレンダー上でタスクを自由にドラッグしたり、クリックしてタスクの詳細を編集したりできます（テンプレートのコピーや参照を忘れずに）。

![カレンダー操作](https://static-docs.nocobase.com/nocobase_tutorials_zh/202412172158379.gif)

### 5.5 ガントチャートブロック：タスク進捗管理の強力なツール

最後のブロックは[**ガントチャートブロック**](https://docs-cn.nocobase.com/handbook/block-gantt)です。プロジェクト管理でよく使われるツールで、タスクの進捗と依存関係を追跡するのに役立ちます。

#### 5.5.1 「ガントチャートビュー」タブの作成

#### 5.5.2 **「完了率」フィールドを新規追加する**：

ガントチャートでタスクの進捗をよりよく表示するために、**完了率（complete_percent）** というフィールドを追加します。このフィールドはタスクの完了進捗を記録し、デフォルト値は 0% です。

![完了率フィールドの新規追加](https://static-docs.nocobase.com/nocobase_tutorials_zh/202412172158044.gif)

#### 5.5.3 **ガントチャートブロックを新規作成する**：

ガントチャートビューで、ガントチャートブロックを作成し、タスクテーブルを選択して、関連する開始日、終了日、完了率フィールドを設定します。

![ガントチャートビューの構築](https://static-docs.nocobase.com/nocobase_tutorials_zh/202412172158860.gif)

#### 5.5.4 **ガントチャートのドラッグ機能を体験する**：

ガントチャートでは、タスクをドラッグして進捗や時間を調整できます。タスクの開始日、終了日、完了率がそれに伴って更新されます。

![ガントチャートのドラッグ](https://static-docs.nocobase.com/nocobase_tutorials_zh/202412172159140.gif)

### まとめ

素晴らしいです！NocoBase でさまざまなブロックを使ってタスクデータを表示する方法をマスターしました。[**かんばんブロック**](https://docs-cn.nocobase.com/handbook/block-kanban)、[**カレンダーブロック**](https://docs-cn.nocobase.com/handbook/calendar)、[**ガントチャートブロック**](https://docs-cn.nocobase.com/handbook/block-gantt)の使い方を学びました。これらのブロックにより、タスク管理がより直感的になるだけでなく、大きな柔軟性も得られます。

しかし、これはまだ始まりです！チーム内で異なるメンバーがそれぞれ異なる責務を持つ場合、全員がスムーズにコラボレーションできるようにするにはどうすればいいでしょうか？データセキュリティを確保しつつ、各メンバーが自分に関連するコンテンツだけを閲覧・操作できるようにするには？

準備はいいですか？次の章に進みましょう：[第 6 章：パートナー -- シームレスな協業と柔軟なコントロール](./06-user-permissions)。

シンプルな操作で、チームのコラボレーションをさらに一段階引き上げる方法を見ていきましょう！

---

引き続き探索を楽しんで、創造力を発揮しましょう！問題が発生した場合は、いつでも [NocoBase 公式ドキュメント](https://docs-cn.nocobase.com/) を参照するか、[NocoBase コミュニティ](https://forum.nocobase.com/) に参加してディスカッションできます。
