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

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

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

タスク管理ページはすでに作成しましたが、システムをより直感的にするため、ページ内でさまざまな表示モードを切り替えられるようにしたいと思います。例えば、テーブル、かんばん、カレンダー、さらにはガントチャートなどです。NocoBase のタブ機能を使えば、同じページ内で異なるブロック配置を切り替えることができます。ゆっくり操作していきましょう。

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

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

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

2. もう一つタブを作成する：

   • 次に、「かんばんビュー」 というタブを作成します。ここにタスクのかんばんブロックを作成します。

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

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

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

かんばんはタスク管理システムにおいて非常に重要な機能で、ドラッグ＆ドロップでタスクのステータスを直感的に管理できます。例えば、タスクのステータスごとにグループ化し、各タスクがどの段階にあるかを一目で確認できます。

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

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

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

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

• 先ほど作成した ステータス フィールドを選択し、タスクステータスでグループ化します。（注意：グループフィールドは「ドロップダウンメニュー（単一選択）」または「ラジオボタン」タイプのみ使用可能です。）

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

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

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

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

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

かんばんブロックを新規作成した後、新規追加フォームを作成する必要があります。ここで、NocoBase のとても便利な機能が登場します。以前のフォームテンプレートをコピーまたは参照できるので、毎回設定し直す必要がありません。

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

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

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

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

• テンプレートをコピー：フォームの新しいコピーを作成します。独立して変更でき、元のフォームに影響しません。
• テンプレートを参照：元のフォームをそのまま「借用」します。変更を加えると、このテンプレートを参照しているすべての場所に同期されます。例えば、フィールドの順序を変更すると、参照しているすべてのフォームも一緒に変わります。

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

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

続いて、カレンダーブロックを作成して、タスクのスケジュール管理をより効果的にしましょう。

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

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

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

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

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

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

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

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

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

最後のブロックはガントチャートブロックです。プロジェクト管理でよく使われるツールで、タスクの進捗と依存関係を追跡するのに役立ちます。

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

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

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

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

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

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

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

#まとめ

素晴らしいです！NocoBase でさまざまなブロックを使ってタスクデータを表示する方法をマスターしました。かんばんブロック、カレンダーブロック、ガントチャートブロックの使い方を学びました。これらのブロックにより、タスク管理がより直感的になるだけでなく、大きな柔軟性も得られます。

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

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

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

---

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