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

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

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

  1. ステータスフィールドの設定
    • 単一選択 フィールドを選択し、以下のオプションを入力します:未開始、進行中、レビュー中、完了、キャンセル、アーカイブ済み。お好みの色を選んで、タスクに色を添えましょう!

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

  1. 添付フィールドの設定
    • 新しい添付フィールドを作成し、「添付」という名前を付けて送信ボタンを押すだけ。シンプルですね!

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

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

  1. 追加および編集フォームにフィールドを表示
    • ポップアップフォームでステータスと添付フィールドを選択するのを忘れずに、タスクを追加または編集するときにこれらのフィールドが簡単に見えるようにします。

フォームのフィールド表示

うまくいきましたね!これらのステップを繰り返し練習して、NocoBaseの主要機能に慣れていきましょう。それぞれのステップが、将来のタスク管理のための堅固な基盤を築きます。進んでいきましょう!


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

これまでのところ、あなたのタスク管理システムは基本的なタスク情報を扱えます。しかし、タスク管理は単なる数行のテキスト以上のものが必要です。時には、より豊かな内容やチームメンバー間のリアルタイムの相互作用が必要です。

4.1.1 マークダウン (Vditor):タスク内容をより堅牢に

NocoBaseが提供するリッチテキストマークダウンエディターに注目したかもしれませんが、あまり満足できないかもしれません。リッチテキストエディターは少し機能が限られており、マークダウンエディターは使いやすいですが、リアルタイムプレビューをサポートしていません。

リアルタイムプレビューと豊富な機能を兼ね備えたエディターはあるのでしょうか?もちろん!Markdown (Vditor)はNocoBaseで最も強力なテキストエディターで、リアルタイムプレビュー、画像アップロード、さらには音声録音さえも提供しています。しかも、システムに組み込まれていて完全に無料です!

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

この強力なエディターの有効化を段階的に説明しましょう。プラグインマネージャーを覚えていますか?そこにありますよ!

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

Markdownプラグインを有効にする

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

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

  1. マークダウンフィールドをテストする
    • タスク管理ページに戻り、最初のマークダウンテキストを作成しましょう!画像をペーストしたり、ファイルをアップロードしてみてください。非常に強力ですね!

あなたのタスクコレクションはより多機能になってきています!各ステップを踏むごとに、システムの機能が拡張されます。次は、よりクリーンなインターフェースのためにフィールドの配置を調整する方法を探りましょう。

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

タスクコレクションにフィールドが増えると、ページレイアウトが混乱することがあります。心配はいりません。NocoBaseの柔軟性により、フィールドの配置を簡単に再配置できます。

フィールドの位置を調整する

  • フィールドの右上隅にある十字アイコンにカーソルを合わせてクリックし、希望する位置までドラッグします。その後、解放して調整を完了します。ページがすぐにきれいになりましたか?

フィールドの位置を調整する

この調整で、ページのレイアウトがあなたの好みに合わせられます。続いて、チームのコラボレーションをさらに容易にするために、タスクコレクションにコメント機能を追加しましょう。

4.2 コメント機能

タスクの説明があることは助かりますが、時にはチームメンバーがコメントを追加したり、問題を議論したり、フィードバックを記録する必要があります。一緒にこれを実装しましょう。

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

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

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

注意:コメントを追加する際は、データの競合を防ぐために、ターゲットコレクションをリレーションシップフィールドを通じてリンクしてください。

プラグインマネージャーで、コメントプラグインをアップロードして有効にします。プラグインが有効化されると、新しい「コメントコレクション」オプションがデータソースに表示されます。新規追加(追加と更新)> プラグインをアップロード > zipファイルをドラッグ > 送信をクリックします。コメントを検索すると、コメントプラグインが見えるはずです!有効にすると、データソース内にコメントコレクションオプションが表示され、インストール成功です!

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

コメントプラグインを表示

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

データソースに切り替え、コメントと呼ばれる新しいコメントデータコレクションを作成します。

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

コメントコレクションを作成したので、ページにコメントセクションを追加できるかもしれません。また、コメントとタスクのリレーションシップは多対一です。コメントをタスクにリンクさせるにはどうしますか?

正解です!リレーションシップフィールドを使用して、この接続をNocoBaseで構築します。

NocoBaseでは、データレベルでコレクション間のリンクを確立するためにリレーションシップフィールドを使用でき、関連するデータを緊密に接続する架け橋のように機能します。

なぜ多対一のリレーションシップを選ぶのか?

私たちは多対一のリレーションシップを選ぶことにしたのでしょうか?それは、各タスクには複数のコメントがあるため、複数のコメントが同じタスクを指すことができるからです。この場合、コメントコレクションにタスクコレクションのタスクにリンクする多対一フィールドを作成することが必要です。

おそらく賢いあなたは気づいたでしょう: コメントとタスクには多対一のリレーションシップがあるので、タスクコレクションにコメントコレクションを指す一対多のフィールドも作成できますか? その通りです、よくやりました! 一対多と多対一は相互関係にあるので、タスクコレクションにコメントコレクションをリンクする一対多のフィールドを作成できます。あなたは素晴らしいです!

4.2.1.4 多対一のリレーションシップフィールドを設定する

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

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

外部キーおよびターゲットコレクションフィールド識別の例: ここでクリアにする必要があります。

高校の成績証明書の積み重ねを処理していると仮定し、それぞれの成績証明書をその学生にリンクさせるのが仕事です。とある成績証明書には、次の情報があります:

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

名前やクラスを使って張三を見つけたいと仮定します。しかし、クラス内には名前が同じ学生が多く、正確に特定するのが難しいかもしれません。

そのため固有の識別子である試験番号が役立ちます。 試験番号を使うことで、特定の学生の成績証明書を正確に特定できます。たとえば、「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)フィールド(マークダウンタイプ)と関連タスク(belong_task)**フィールド(多対一タイプ)を追加します。
  2. ページにコメントリストブロックを作成
    • タスクコレクションの編集ポップアップでリストブロック(3種類目のブロック、フィールドの詳細情報を表示できます)を追加し、コメントを選択してテストします: コメントリストブロックを作成

まとめ

これで、マークダウン (Vditor)を使ってタスク内容を豊かにし、タスクにコメント機能を追加する方法が分かりました!タスク管理システムは、完全な機能基盤を持つことになりました。これで、プロフェッショナルなタスク管理ツールを作成する新しい一歩を踏み出しましたね!

引き続き探索し、実践してください。NocoBaseには無限の可能性があります。問題が発生しても心配しないでください – 各ステップを案内しますので!

次の章(第5章:タブ&ダイナミックブロック)では、NocoBaseでのブロック機能についてさらに深く掘り下げ、システムを次のレベルに引き上げる手助けをします。素晴らしい作業を続けいてください!


自由に探索し、創造性を発揮しましょう!困難に直面した場合は、NocoBase公式ドキュメントを参照するか、NocoBaseコミュニティに参加して議論してください。

× View Image