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

前のセクションのレビュー

前のセクションでの課題を覚えていますか?タスクコレクションの ステータス添付ファイル フィールドを設定し、それらをタスクリストに表示しました。さあ、答えを明らかにしましょう!

  1. ステータスフィールドの設定
    • 単一選択 フィールドを選択し、次のオプションを入力します:未開始、進行中、レビュー中、完了、キャンセル、アーカイブ。タスクをより鮮やかにするために好きな色を選んでください!

ステータスフィールドの設定

  1. 添付ファイルフィールドの設定
    • 新しい 添付ファイル フィールドを作成し、名前を「添付ファイル」などにして送信をクリックします。これで簡単に設定完了です!

  1. タスクリストに作成者とステータスを表示
    • 「列の設定」で「作成者」、「ステータス」、「添付ファイル」フィールドを選択して、タスクリストにより重要な情報を表示します。

タスクリストにフィールドを表示

  1. 追加と編集フォームにフィールドを表示
    • ポップアップフォームでステータスと添付ファイルフィールドを選択するのを忘れないでください。これにより、タスクを追加または編集する際に、これらのフィールドを簡単に確認できます。

フォームにフィールドを表示

素晴らしい!この手順を繰り返し実践し続ければ、NocoBaseのコア機能にもっと慣れることができます。各ステップが将来のタスク管理に向けたしっかりとした基盤を築きます。それでは、続けましょう!


4.1 タスク内容とコメント:インタラクティブなタスク管理

これまでのところ、あなたのタスク管理システムは基本的なタスク情報を処理できるようになりました。しかし、タスク管理には時には簡単なテキスト以上のものが必要です。よりリッチなコンテンツやチームメンバー間のリアルタイムのインタラクションが必要なこともあります。

4.1.1 Markdown (Vditor):タスク内容をより強化

NocoBaseが提供しているリッチテキストMarkdownエディタに気づいたかもしれませんが、これらが完全にあなたのニーズに応えているわけではないかもしれません。リッチテキストエディタはやや制限がありますが、Markdownエディタは使いやすいですがリアルタイムプレビューをサポートしていません。

リアルタイムプレビューと豊富な機能の両方をサポートするエディタはありますか?もちろんです!Markdown (Vditor)は、NocoBaseで最も強力なテキストエディタであり、リアルタイムプレビュー、イメージアップロード、音声録音までサポートしています。しかも、システムに組み込まれていて、完全に無料です!

Markdown(Vditor): Markdownを保存し、Vditorエディタを使用してレンダリングします。リスト、コード、引用などの一般的なMarkdown構文をサポートし、画像や録音のアップロードもできます。さらに、即時レンダリングを実現し、見たままのものが得られます。

この強力なエディタを有効にする手順を一つ一つ確認していきましょう。プラグインマネージャーを覚えていますか?それが見つかる場所です!

  1. Markdown (Vditor) プラグインの有効化
    • 右上の プラグインマネージャーを開き、プラグイン内で「markdown」を検索してMarkdown (Vditor)を有効にします。ページが一瞬リフレッシュされても心配しないでください。数秒後には戻ります。

Markdownプラグインを有効化

  1. Markdownフィールドの作成
    • タスクコレクションに戻り、「フィールドを追加」をクリックすると、Markdown Pro Plusの強化版が準備完了です!

  • 名前を「タスク詳細(task_detail)」などに付けて、すべての利用可能な機能を有効にします。
  1. 「ファイルコレクション」のオプションに気づくかもしれません。選択しないとファイル機能に影響がありますか?ご心配なく、ファイルはデフォルトのストレージに保存されるので、自由に使用できます。

  1. Markdownフィールドのテスト
    • さあ、タスク管理ページに戻り、最初のMarkdownテキストを作成しましょう!画像を貼り付けたりファイルをアップロードしたりしてみてください。とても強力ですね?

あなたのタスクコレクションはますます機能が豊かになっています!各ステップを踏むごとに、システムの能力が拡大します。次は、クリーンなインターフェースのためにフィールド配置を調整してみましょう。

4.1.2 フィールドレイアウトの調整

タスクコレクションにフィールドが増えると、ページレイアウトが雑然とした印象になることがあります。心配しなくても大丈夫です。NocoBaseの柔軟性を活かして、フィールドを簡単に再配置できます。

フィールド位置の調整

  • フィールドの右上隅にある十字アイコンにカーソルを置き、それをクリックしてドラッグして任意の位置に移動させます。放すと調整が完了します。これで、ページが一瞬にしてすっきりしましたか?

フィールド位置の調整

この操作により、配置がよりニーズに合ったものになります。それでは、タスクコレクションにコメント機能を追加して、チームコラボレーションをさらに簡単にしましょう。

4.2 コメント機能

タスクの説明があるのは良いことですが、時にはチームメンバーがコメントを追加し、問題について話し合う必要があることもあります。さあ、一緒にこの実装を始めましょう。

4.2.1 方法1:コメントプラグインの使用

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

コメントプラグイン (商業プラグイン): コメント収集テンプレートとブロックを提供し、任意のコレクションにコメント機能を追加します。

注:コメントを追加する場合は、ターゲットコレクションを関係フィールドでリンクして、コメントデータの競合を防いでください。

プラグインマネージャーコメントプラグイン をアップロードして有効化します。プラグインが有効化されると、新しい「コメントコレクション」オプションがデータソースに表示されます。「新規追加」をクリック > プラグインのアップロード > ZIPファイルをドラッグ&ドロップ > 提出。コメントを検索することで、コメントプラグインが表示されます!有効化後、データソースに入り、コメントコレクションオプションを確認してください。インストール成功です!

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

4.2.1.2 コメントコレクションの作成

データソースに切り替え、新しいコメントデータコレクション コメント(Comments) を作成します。

4.2.1.3 コメントとタスクコレクションの関係の探討

今や コメントコレクション(Comments) ができたわけですが、ページにコメントセクションを追加できるでしょうか?まだ早いです。まずは考えてみましょう:各タスクにはそれぞれコメントセクションが必要です。コメントとタスク間の関係は 多対一 であるべきです。では、いかにしてコメントをタスクにリンクするでしょうか?

その通り!関係フィールドを使って、NocoBase内でこのつながりを作ります。

NocoBaseは、データのレベルでコレクション間のリンクを設定するために関係フィールドを使用することを許可します。まるで関係データをしっかり結びつける橋を架けるように。

なぜ多対一の関係を選ぶのか?

なぜ多対一の関係を選ぶのかというと、各タスクには複数のコメントがあるため、複数のコメントが同じタスクを指すことができるからです。そのため、コメントコレクションにタスクコレクションのタスクをリンクする 多対一 フィールドを作成する必要があります。

あなたは思いついたかもしれません: コメントとタスクは多対一の関係ですので、タスクコレクション内に 一対多 フィールドを作成し、コメントコレクションを指すこともできるでしょうか? その通りです、素晴らしい! 一対多と多対一は相互の関係で、タスクコレクションにコメントコレクションへの一対多フィールドを作成できます。素晴らしいですね!

4.2.1.4 多対一の関係フィールドの設定

次に、コメントコレクションに多対一フィールドを作成して、タスクコレクションにリンクさせます。このフィールドを 関連タスク(belong_task) と名付けることができます。設定時に注意すべき重要な設定は次のとおりです:

  1. ソースコレクション:関係がどこから開始されるのか?ここでは、コメントコレクションです。
  2. ターゲットコレクション:どのコレクションとリンクするのか?ここでは、タスクコレクションです。

外部キーとターゲットコレクションフィールドの識別に関する例: これは重要な部分です:外部キーターゲットコレクションフィールドの識別。 このコンセプトは聞こえが難しいですか?心配いりません。詳しい例を使って簡単に理解できるようにします。

想像してみてください、もしあなたが高等学校の成績証明書を何枚も持っていて、あなたの仕事はそれぞれの成績証明書をそれに対応する学生に関連付けることだとします。その場合、どうすればいいでしょうか? 例えば、次のような情報が書かれた成績証明書を持っているとします:

  • 名前:張三
  • クラス:高三35
  • 試験ID:202300000001
  • ID番号:111111111111

さて、名前とクラスを使って張三を見つけたいとしましょう。しかし、同じクラスに同じ名前の学生が多くいるため、正確に識別するのは難しいかもしれません。

だから、ユニークな識別子、試験IDのようなものが役に立つわけです。試験IDを使えば、各学生の成績証明書を正確に特定できます。例えば、試験ID「202300000001」で検索した場合、学校からすぐに「この成績証明書は張三に属しており、高三35の3列目にいる眼鏡をかけた張三です」と答えてくれるでしょう。

同様の論理がコメントの関係設計に戻ると、タスクコレクション内のユニークな識別子(例えば ID)を選択して、このコメントに保存することで、各コメントを対応するタスクに関連付けることができるのです。

外部キーというこの概念は、多対一関係を実現する核心です — 簡単ですね。

コメントコレクションには、タスクコレクションのユニークな task_id フィールドを保存し、コメントをその関連するタスクに結びつけます。

4.2.1.5 削除時の外部キー処理

NocoBaseで多対一の関係を設定したら、タスクが削除された場合にコメントはどうなるのか考慮する必要があります。いくつかのオプションがあります:

  • CASCADE:タスクが削除されると、そのタスクに関連するすべてのコメントも削除されます。
  • SET NULL(デフォルト設定):タスクが削除されると、コメントデータは保持されますが、外部キーフィールドはnullに設定されます。
  • RESTRICT及びNO ACTION:タスクに関連するコメントがある場合、システムはそのタスクを削除できないようにして、コメントが失われることを防ぎます。

4.2.1.6 タスクコレクションでのリバース関係の作成

最後に、ターゲットコレクションでリバース関係フィールドを作成を選択すると、タスク内からすべての関連コメントを見ることが容易になります。これにより、データ管理の効率が向上します。

NocoBaseにおける関係フィールドの位置は、データへのアクセスの仕方を決定します。タスクコレクションから直接コメントを表示できるようにするために、タスクコレクションに 一対多 のリバース関係フィールドを作成し、コメントコレクションにリンクさせます。

タスクコレクションを再度開くと、関連するコメントフィールドが「一対多」の関係として表示され、すべての関連コメントを簡単に表示して管理できるようになります!

4.3 ページ設定

4.3.1 コメントコレクションを有効化

楽しい瞬間がやってきました!編集ポップアップに戻り、コメントブロックを作成し、必要な機能をチェックします。完了です!

コメントテーブルを有効化

4.3.2 ページの調整

ページレイアウトをスタイリングしましょう。編集ボタンの右上にカーソルを合わせ、より広いポップアップを選択し、学んだことを使ってコメントブロックをポップアップの右側にドラッグします。完璧です!

ページレイアウトの調整

一部の方々は「私もコメントを設定したい!」と思っているかもしれません。ご心配なく、もう一つの無料オプションを用意しています。

4.2.2 方法2:カスタムコメントコレクションの作成

コメントプラグインを購入していない場合でも、カスタムコレクションを作成することで、同様のコメント機能を設定することができます。

  1. 新しいコメントコレクションを作成
    • **コメントコレクション(comments2)**を作成し、**コメント内容(content)フィールド(Markdownタイプ)と関連タスク(belong_task)**フィールド(多対一タイプ)を追加します。
  2. ページにコメントリストブロックを作成
    • タスクコレクションの編集ポップアップに、リストブロック(フィールドの詳細を表示できる3種類のブロックの1つ)を追加し、コメントを選択してテストします: コメントリストブロックを作成

まとめ

これで、Markdown (Vditor) を使用してタスク内容を強化し、タスクにコメント機能を追加する方法を知ることができました!あなたのタスク管理システムには、完璧な機能の基盤が整いました。専門的なタスク管理ツールを作成する一歩に近づいていますね!

引き続き探求と実践を続けてください。NocoBaseには無限の可能性があります。問題が発生した場合も心配しなくて大丈夫です。私はあなたのすべてのステップを案内します。

次の章(第5章:タブ & ダイナミックブロック)では、NocoBaseのブロック機能をさらに深く探求し、あなたのシステムをより高いレベルに引き上げる手助けをします。素晴らしい仕事を続けましょう!


自由に探求し、創造力を発揮してください!何か問題が発生した場合は、NocoBase公式ドキュメントを参照するか、NocoBaseコミュニティに参加して議論を行ってください。

× 画像を拡大表示