# 第 4 章：タスクとコメントプラグイン

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

## 前章の振り返り

前の章のチャレンジ課題を覚えていますか？タスクテーブルに **ステータス** と **添付ファイル** フィールドを設定し、タスク一覧に表示させるという内容でした。早速、答えを見ていきましょう！

1. **ステータスフィールドの設定**：
   - [**ドロップダウンメニュー（単一選択）**](https://docs-cn.nocobase.com/handbook/data-modeling/collection-fields/choices/select)フィールドを選択し、選択肢ラベルを入力します：**未着手、進行中、レビュー待ち、完了、キャンセル、アーカイブ済み**。色はお好みで自由に設定して、タスクに彩りを添えましょう！

![ステータスフィールドの設定](https://static-docs.nocobase.com/nocobase_tutorials_zh/202412162341275.png)

2. **添付ファイルフィールドの設定**：
   - [**添付ファイル**](https://docs-cn.nocobase.com/handbook/file-manager/field-attachment)フィールドを新規作成し、名前（例：「添付ファイル」）を付けて送信するだけです。とても簡単ですね。

![](https://static-docs.nocobase.com/nocobase_tutorials_zh/202412162343470.png)

3. **タスク一覧に作成者とステータスを表示する**：
   - テーブルブロックで「作成者」「ステータス」「添付ファイル」フィールドにチェックを入れ、タスク一覧により多くの重要な情報を表示させましょう。

![タスク一覧のフィールド表示](https://static-docs.nocobase.com/nocobase_tutorials_zh/202412162344570.png)

4. **追加・編集フォームにフィールドを表示する**：
   - ポップアップフォームでも、ステータスと添付ファイルフィールドにチェックを入れることを忘れずに。これで、タスクの追加時も編集時も、これらのフィールドが表示されるようになります。

![フォーム内のフィールド表示](https://static-docs.nocobase.com/nocobase_tutorials_zh/202412162345053.gif)

うまくできましたか？繰り返し操作してみてください。NocoBase のコアな使い方が徐々に身についてきます。一つ一つのステップが、今後のタスク管理の堅固な基盤を築いています。続けて見ていきましょう！

---

## 4.1 タスク内容とコメント：タスク管理のインタラクション

ここまでで、タスク管理システムは基本的なタスク情報を扱えるようになりました。しかし、タスク管理は数行のテキストだけでは不十分で、よりリッチなコンテンツや、チームメンバー間のリアルタイムなやり取りが必要になることもあります。

### 4.1.1 Markdown(Vditor)：タスクの内容をよりリッチに

NocoBase が提供する[**リッチテキスト**](https://docs-cn.nocobase.com/handbook/data-modeling/collection-fields/media/rich-text)エディターや[**Markdown**](https://docs-cn.nocobase.com/handbook/data-modeling/collection-fields/media/markdown)エディターにはお気づきかもしれませんが、まだ機能的に物足りない部分があるかもしれません。
リッチテキストエディターは機能が限定的で、Markdown エディターは便利ですがリアルタイムプレビューに対応していません。

![](https://static-docs.nocobase.com/nocobase_tutorials_zh/202412162346447.png)

では、リアルタイムプレビューも豊富な機能も兼ね備えたエディターはあるのでしょうか？答えはイエスです！[**Markdown(Vditor)**](https://docs-cn.nocobase.com/handbook/field-markdown-vditor) は NocoBase で最も強力なテキストエディターで、リアルタイムプレビュー、画像アップロード、さらには音声録音にも対応しています。しかも、システムに内蔵されており、完全に無料です！

> **プラグインの紹介：** プラグインは NocoBase のコア機能の一つで、プロジェクトのニーズに応じてカスタム機能やサードパーティサービスとの統合を追加できます。
> プラグイン拡張を活用することで、便利な機能や意外な機能統合を実現でき、制作と開発がさらに快適になります。

以下では、この強力なエディターを有効化する手順をご案内します。プラグインマネージャーを覚えていますか？そうです、その中にあります。

> **Markdown(Vditor)**：Markdown を保存し、Vditor エディターでレンダリングします。リスト、コード、引用などの一般的な Markdown 構文をサポートし、画像のアップロードや録音にも対応しています。また、即時レンダリングで WYSIWYG を実現します。

1. **Markdown(Vditor) プラグインを有効化する**：
   - 右上の **プラグインマネージャー** を開き、「markdown」で検索して、[**Markdown(Vditor)**](https://docs-cn.nocobase.com/handbook/field-markdown-vditor) を有効化します。ページが一瞬リフレッシュされますが、数秒で元に戻りますのでご安心ください。

![Markdown プラグインの有効化](https://static-docs.nocobase.com/nocobase_tutorials_zh/202412162348237.png)

2. **Markdown フィールドを作成する**：

   - タスクテーブルに戻り、「フィールドを作成」をクリックすると、パワーアップ版の Markdown エディターが表示されます！

![](https://static-docs.nocobase.com/nocobase_tutorials_zh/202412162349275.png)

- 名前を付けましょう（例：「タスク詳細（task_detail）」）。利用可能なすべての機能にチェックを入れます。

3. 「ファイルデータテーブル」のオプションに気づくかもしれません。選択しなくてもファイル機能に影響はありませんので、ご安心ください。デフォルトのストレージスペースに保存されます。

![](https://static-docs.nocobase.com/nocobase_tutorials_zh/202412162350389.gif)

4. **Markdown フィールドをテストする**：
   - タスク管理ページに戻って、最初の Markdown テキストを書いてみましょう！画像の貼り付けやファイルのアップロードも試してみてください。とても強力だと感じるはずです！

![](https://static-docs.nocobase.com/nocobase_tutorials_zh/202412162351380.gif)

タスクテーブルがますます充実してきました！各ステップに沿って、システムの機能が段階的に拡張されています。続いて、フィールドの配置を調整して、インターフェースをより美しくしましょう。

### 4.1.2 フィールドの配置を調整する

タスクテーブルのフィールドが増えると、ページレイアウトが少し乱れてくるかもしれません。大丈夫です。NocoBase の柔軟性を活かして、フィールドの位置を簡単に調整できます。

**フィールド位置の調整**：

- フィールドの右上にある十字アイコンにマウスを移動し、クリックしてドラッグで好きな位置に移動し、離すだけで調整完了です。試してみてください。ページが一気にすっきりしますよ！

![フィールド位置の調整](https://static-docs.nocobase.com/nocobase_tutorials_zh/202412162352077.gif)

この操作で、ページレイアウトがより自分のニーズに合うようになります。続いて、タスクテーブルにコメント機能を追加して、チームのコミュニケーションをよりスムーズにしましょう。

## 4.2 コメント機能

タスクの説明だけでは不十分な場合もあります。チームメンバーがタスクにコメントを追加し、議論やフィードバックの記録が必要になることがあります。一緒に実装していきましょう。

### 4.2.1 方法 1：コメントプラグインを使用する

#### 4.2.1.1 コメントプラグインのインストール

> **コメントプラグイン（商用プラグイン）：** コメントデータテーブルテンプレートとブロックを提供し、任意のデータテーブルにコメント機能を追加できます。
>
> コメントを追加する際は、リレーションフィールドでターゲットデータテーブルを関連付ける必要があります。コメントデータの競合を防ぐためです。

[**プラグインマネージャー**](https://docs-cn.nocobase.com/handbook/plugin-manager)で、**コメントプラグイン**をアップロードして有効化します。プラグインが有効化されると、データソースに新しい「コメントテーブル」オプションが表示されます。
「追加」> 「プラグインをアップロード」> 圧縮ファイルをドラッグ > 「送信」をクリックします。
「コメント」で検索すると、コメントプラグインが表示されます！有効化してデータソースに入ると、コメントテーブルのオプションが確認できます。インストール成功です！

![コメントプラグインのインストール](https://static-docs.nocobase.com/nocobase_tutorials_zh/202412162353550.gif)

#### 4.2.1.2 コメントテーブルの新規作成

データソースに切り替えて、コメントデータテーブル **コメントテーブル（Comments）** を新規作成します。

#### 4.2.1.3 コメントテーブルとタスクテーブルの関係を考える

**コメントテーブル（Comments）** を作成しましたが、もうページでコメントエリアを作成できるのでは？と思うかもしれません。少し待ってください。**各タスクにはそれぞれのコメントエリアがある**こと、そしてコメントとタスクの関係は**多対一**であることを考えてみましょう。では、コメントとタスクをどう関連付ければいいのでしょうか？

**そうです！これから使うのが[「リレーションフィールド」](https://docs-cn.nocobase.com/handbook/data-modeling/collection-fields/associations)です！**

NocoBase では、リレーションフィールドを使ってデータレベルでテーブル間の関係を構築できます。橋をかけるように、関連するデータを密接に結びつけます。

![](https://static-docs.nocobase.com/nocobase_tutorials_zh/202412162355370.gif)

**なぜ多対一を選ぶのか？**

なぜ[**多対一**](https://docs-cn.nocobase.com/handbook/data-modeling/collection-fields/associations/m2o)関係を選び、[**一対多**](https://docs-cn.nocobase.com/handbook/data-modeling/collection-fields/associations/o2m)や他のタイプの関係ではないのでしょうか？思い出してください。**各タスクには複数のコメントがある**ため、複数のコメントが同じ一つのタスクを指し示します。この場合、コメントテーブルに**多対一**フィールドを作成して、タスクテーブルのタスクを参照する必要があります。

> お気づきかもしれませんが：
> コメントとタスクが多対一の関係なら、タスクテーブルに**一対多**フィールドを作成して、コメントテーブルを参照することもできるのでは？
> **正解です！** 一対多と多対一は互いに逆方向の関係です。タスクテーブルに一対多フィールドを作成してコメントテーブルに関連付けることも同様に可能です。すばらしいですね！

#### 4.2.1.4 多対一リレーションフィールドの設定

次に、コメントテーブルにタスクテーブルとの関連付けのための多対一フィールドを作成します。このフィールドの名前は**所属タスク（belong_task）**としましょう。設定時には、いくつかの重要な設定項目があります。

1. **データソーステーブル**：どのテーブルからリレーションを作成するか？ここでは**コメントテーブル**を選択します。
2. **ターゲットデータテーブル**：どのテーブルとリレーションを構築するか？ここでは**タスクテーブル**を選択します。

> **外部キーとターゲットデータテーブルフィールド識別子：例：**
> 次に重要な部分、**外部キー**と**ターゲットデータテーブルフィールド識別子**について説明します。
> 少し難しそうに聞こえますか？大丈夫です。詳しい例を使って簡単に理解できるようにします。
>
> **あるシナリオを想像してください**。大学入試の成績表がたくさんあり、各成績表に対応する学生を見つけるのが課題です。どうすればいいでしょうか？
> 一枚の成績表を手に取ると、以下の情報が記載されています。
>
> - **氏名**：田中太郎
> - **クラス**：3 年 15 組
> - **受験番号**：202300000001
> - **身分証番号**：111111111111
>   ここで、**氏名**と**クラス**で田中太郎を特定しようとします。しかし問題があります。同じ学校内に同姓同名の学生がたくさんいて、3 年 15 組だけでも **田中太郎が 20 人**もいます！氏名とクラスだけでは、どの田中太郎なのか正確に特定できませんね？
>   **そこで、よりユニークな識別子が必要になります**。例えば、**受験番号**が最適な選択です。各学生の受験番号は一意なので、受験番号を使えば成績表に対応する学生を正確に特定できます。例えば、受験番号 202300000001 で検索すると、「この成績表は田中太郎のもので、3 年 15 組の 3 列目のメガネの生徒です！」という回答が返ってきます。
>   **同じ原理で**、**コメント**のリレーション設計に戻ると、タスクテーブルの一意な識別子フィールド（例えば **id**）をコメントに保存して、コメントがどのタスクに属するかを特定できることにお気づきでしょう。
>   これが多対一関係の実装の核心概念：**外部キー**です。シンプルですよね！

コメントテーブルにタスクテーブルの一意な id フィールドを保存し、**task_id** と名付けます。これにより、task_id を通じてコメントとタスクを関連付けることができます。

#### 4.2.1.5 削除時の外部キー処理ポリシー

NocoBase では、多対一関係を設定した後、タスクを削除する際にコメントデータをどう処理するかも考慮する必要があります。以下の方法から選択できます。

- **CASCADE**：タスクを削除すると、そのタスクに関連するすべてのコメントも一緒に削除されます。
- **SET NULL**（デフォルト設定）：タスクを削除しても、コメントデータは保持されますが、関連付けの外部キーフィールドが空になります。
- **RESTRICT と NO ACTION**：タスクに関連するコメントがある場合、システムがタスクの削除を阻止し、コメントが失われないようにします。

#### 4.2.1.7 タスクテーブルに逆方向のリレーションを作成する

最後に、「**ターゲットデータテーブルに逆方向リレーションフィールドを作成する**」にチェックを入れます。これにより、タスクから関連するすべてのコメントを簡単に確認できるようになります。データ管理がさらに便利になります。

NocoBase では、リレーションフィールドの配置場所によってデータの取得方法が決まります。タスクテーブルからも対応するコメントデータを閲覧したい場合は、タスクテーブルにコメントテーブルへの**一対多**の逆方向リレーションフィールドを作成する必要があります。

再度タスクテーブルを開くと、関連付けられたコメントフィールドが自動生成され、「**一対多**」の関係であることが表示されます。これですべての関連コメントを簡単に閲覧・管理できます！

## 4.3 ページの構築

### 4.3.1 コメントテーブルを有効にする

いよいよ本番です。編集ポップアップに戻って、コメントテーブルブロックを作成し、必要な機能にチェックを入れれば完了です！

![demov3N-16.gif](https://static-docs.nocobase.com/nocobase_tutorials_zh/202412162357118.gif)

### 4.3.2 ページの調整

ページのスタイルを整えましょう。編集ボタンの右上にマウスを合わせ、幅の広いポップアップを選択します。先ほど学んだ知識を活かして、コメントブロックをドラッグしてポップアップの右側に配置すれば、完璧です！

![demov3N-17.gif](https://static-docs.nocobase.com/nocobase_tutorials_zh/202412162358300.gif)

コメント機能を実装したいけど、商用プラグインは持っていないという方も安心してください。無料の代替方法もご用意しています。

### 4.2.2 方法 2：カスタムコメントテーブル

コメントプラグインを購入していない場合でも、普通テーブルを作成して同様のコメント機能を実装できます。

1. **コメントテーブルを新規作成する**：

   - **コメントテーブル（comments2）** を作成し、**コメント内容（content）** フィールド（Markdown タイプ）と **所属タスク（belong_task）** フィールド（多対一タイプ）を追加します。
     ![](https://static-docs.nocobase.com/nocobase_tutorials_zh/202412170001040.gif)
2. **ページにコメントリストブロックを作成する**：

   - タスクテーブルの編集ポップアップに、[**リストブロック**](https://docs-cn.nocobase.com/handbook/ui/blocks/data-blocks/list)（3 つ目のブロックタイプの登場です！リストはフィールドの詳細情報も表示できます）を追加し、コメントを選択してテストしてみましょう。
     ![コメントリストブロックの作成](https://static-docs.nocobase.com/nocobase_tutorials_zh/202412170003544.gif)

## まとめ

ここまでで、Markdown(Vditor) を使ったタスク内容のリッチ化と、タスクへのコメント機能の追加方法を学びました！タスク管理システムの機能基盤が整い、プロフェッショナルなタスク管理ツールの実現にまた一歩近づいた実感がありませんか？

引き続き探索と操作を続けてください。NocoBase は無限の可能性に満ちています。もし問題に遭遇しても慌てないでください。各ステップを一緒に進んでいきます。

[次の章（第 5 章：タブと動的ブロック）](./05-tabs-dynamic-blocks)では、NocoBase のさらに多くのブロック機能を深く探索し、システムを新たなレベルに引き上げます。引き続き頑張りましょう！

---

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