#第 4 章：フォームと詳細 — 入力・表示を一気に完成

前の章ではチケット一覧を構築し、簡易フォームでテストデータを入力しました。この章ではフォーム体験を改善します。フォームブロックのフィールドレイアウトの最適化、詳細ブロックの追加、連動ルールの設定を行い、さらに変更履歴でチケットの変更を追跡できるようにします。

#4.1 新規チケットフォームの改善

前の章で簡単に使える新規フォームを作成しました。ここではそれを改善します。フィールドの順序を調整し、デフォルト値を設定し、レイアウトを最適化します。前の章のクイックフォーム部分をスキップした方でも大丈夫です。ここではフォームをゼロから作成する手順も含めて説明します。

#「新規作成」アクションボタンの追加

1. UI エディターモードになっていることを確認します（右上のスイッチをオン）。
2. 「チケット一覧」ページに入り、テーブルブロック上部の 「アクション（Actions）」 をクリックします。
3. 「追加」 アクションボタンにチェックを入れます。
4. テーブル上部に「追加」ボタンが表示されます。クリックするとポップアップが開きます。

#ポップアップ内のフォーム設定

1. 「追加」ボタンをクリックしてポップアップを開きます。

2. ポップアップ内で 「ブロックを作成（Add block）」→ データブロック → フォーム（追加） をクリックします。

3. 「現在のデータテーブル（Current collection）」 を選択します。ポップアップは対応するデータテーブルのコンテキストに紐づいているため、手動で指定する必要はありません。

   

4. フォーム内で 「フィールド（Fields）」 をクリックし、以下のフィールドにチェックを入れます。

「タイトル」フィールドの横に赤いアスタリスク * が自動的に表示されていることに気づくでしょう。第 2 章でフィールド作成時に必須を設定したため、フォームはデータテーブルレベルの必須ルールを自動的に継承します。個別に設定する必要はありません。

ヒント：あるフィールドがデータテーブルレベルで必須に設定されていなくても、現在のフォームで必須にしたい場合は、フィールドの設定項目で個別に設定できます。

#送信ボタンの追加

1. フォームブロックの下部で 「アクション（Actions）」 をクリックします。
2. 「送信」 ボタンにチェックを入れます。

3. ユーザーがフォームに入力して送信をクリックすると、新しいチケットが作成されます。

#4.2 連動ルール：デフォルト値とフィールド連動

一部のフィールドは自動的に入力してほしい（例：ステータスのデフォルト値を「未対応」にする）、また一部のフィールドは条件に応じて動的に変化してほしい（例：緊急チケットでは説明を必須にする）という場合があります。現在 2.0 のデフォルト値機能はまだ進化の途中のため、本チュートリアルでは統一して連動ルールを使ってデフォルト値とフィールド連動を設定します。

1. フォームブロック右上の ブロック設定（三本線アイコン）をクリックします。
2. 「連動ルール（Linkage rules）」 を見つけてクリックすると、サイドバーに設定パネルが開きます。

#デフォルト値の設定

まず「ステータス」と「提出者」のデフォルト値を設定します。

1. 「連動ルールを追加」 をクリックします。
2. 条件は設定しません（空のままで OK）。条件なしの連動ルールはフォーム読み込み時に即座に実行されます。

3. アクション（Actions）を設定します：
   • ステータスフィールド → デフォルト値を設定 → 未対応
   • 提出者フィールド → デフォルト値を設定 → 現在のユーザー

注意：フィールド値の選択について：値を設定するときは、まず 「現在のフォーム」 をデータソースとして選択してください。リレーションフィールド（分類、提出者、担当者などの多対一フィールド）の場合は、展開後のサブフィールドではなく、オブジェクトの属性自体を選択する必要があります。

変数（「現在のユーザー」など）を選択するときは、まずシングルクリックで変数を選択し、次にダブルクリックで選択欄に入力してください。

特定のフィールド（例：ステータス）を変更不可にしたい場合は、フィールドの設定項目で 「表示モード（Display mode）」 を 「読み取り専用（Readonly）」 に設定できます。

3 つの表示モード：編集可能（Editable）、読み取り専用（Readonly、編集不可だがフィールドの見た目は維持）、閲覧モード（Easy-reading、テキストのみ表示）。

#緊急チケットの場合に説明を必須にする

次に、条件付きの連動ルールを追加します。ユーザーが優先度「緊急」を選択した場合、説明フィールドを必須にして、状況を詳しく書くよう促します。

1. 「連動ルールを追加」 をクリックします。

2. ルールを設定します：
   • 条件（Condition）：現在のフォーム / 優先度 等しい 緊急
   • アクション（Actions）：説明フィールド → 必須 に設定

3. ルールを保存します。

テストしてみましょう。優先度を「緊急」に選択すると、説明フィールドの横に赤いアスタリスク * が表示され、必須であることを示します。他の優先度に変更すると必須でなくなります。

学んだことを活かして、レイアウトを簡単に調整しましょう。

連動ルールで他に何ができますか？ デフォルト値の設定と必須制御の他に、フィールドの表示/非表示の制御や動的な値設定もできます。たとえば、ステータスが「クローズ」のとき担当者フィールドを非表示にするなど。後の章で出てきたときに詳しく説明します。

#4.3 詳細ブロック

前の章でテーブル行に「閲覧」ボタンを追加し、クリックするとドロワーが開くようにしました。ここでドロワー内のコンテンツを設定します。

1. テーブル内のある行の 「閲覧」 ボタンをクリックしてドロワーを開きます。
2. ドロワー内で 「ブロックを作成（Add block）」→ データブロック → 詳細 をクリックします。
3. 「現在のデータテーブル（Current collection）」 を選択します。

4. 詳細ブロック内で 「フィールド（Fields）」 を設定し、以下のレイアウトにします。

大きなタイトルを配置するにはどうすればよいでしょうか？ フィールド > markdown > 編集 > 編集エリアで変数を選択 > 現在のレコード > タイトル これでレコードのタイトルが markdown ブロックに動的に挿入されます。 デフォルトテキストを削除し、markdown 記法で見出し 2 のスタイルにします（先頭に ## を追加するだけです）。

ページ内の元のタイトルフィールドは削除しても構いません。詳細フォームのレイアウトを調整しましょう。

ヒント：複数のフィールドをドラッグ＆ドロップで同じ行に並べると、レイアウトがよりコンパクトで美しくなります。

1. 詳細ブロックの 「アクション（Actions）」 で 「編集」 ボタンにチェックを入れると、詳細から直接編集モードに入れるようになります。

#編集フォームの設定

「編集」ボタンをクリックすると新しいポップアップが開き、中に編集フォームを配置する必要があります。編集フォームのフィールドは新規作成フォームとほぼ同じですが、もう一度ゼロから選択し直す必要があるのでしょうか？

いいえ。新規作成フォームを覚えていますか？まずそれをテンプレートとして保存し、編集フォームから直接参照すれば OK です。

ステップ 1：新規作成フォームに戻り、テンプレートとして保存

1. 現在のポップアップを閉じ、チケット一覧に戻り、「追加」ボタンをクリックして新規作成フォームを開きます。
2. フォームブロック右上の ブロック設定（三本線アイコン）をクリックし、「テンプレートとして保存（Save as template）」 を見つけます。

3. 保存をクリックするだけで完了です。デフォルトは 「参照（Reference）」 モードです。このテンプレートを参照するすべてのフォームが同じ設定を共有し、1 箇所を変更するとすべてに同期されます。

今回のチケットフォームはシンプルなので、「参照」で統一管理するのがより手軽です。「コピー」を選択すると、各フォームが独立したコピーを取得し、それぞれ個別に変更しても影響し合いません。

ステップ 2：編集ポップアップでテンプレートを参照

1. 詳細ドロワーまたはテーブルの操作列に戻り、「編集」ボタンをクリックして編集ポップアップを開きます。

「ブロックを作成 → その他のブロック → ブロックテンプレート」 から直接作成すればよいのでは？と思うかもしれません。試してみると、この方法で作成されるのは追加フォームであり、フィールドに自動的にデータが入力されないことがわかります。これはよくあるハマりポイントです。

正しい方法は以下の通りです。

2. ポップアップ内で 「ブロックを作成（Add block）」→ データブロック → フォーム（編集） をクリックし、まず通常通り編集フォームブロックを作成します。
3. 編集フォーム内で 「フィールド（Fields）」→「フィールドテンプレート（Field templates）」 をクリックし、先ほど保存したテンプレートを選択します。
4. フィールドがワンクリックですべて入力され、新規作成フォームと完全に同じになります。
5. アクションボタン「送信」も忘れずに追加し、変更後に保存できるようにしましょう。

今後フィールドを追加したくなったら？テンプレートを 1 箇所変更するだけで、新規作成フォームと編集フォームの両方に同期されます。

#クイック編集：ポップアップを開かずにデータを変更

ポップアップ編集の他に、NocoBase はテーブル内で直接クイック編集する機能もサポートしています。ポップアップを一切開かずに、マウスを合わせるだけで変更できます。

有効化の方法は 2 箇所あります。

• テーブルブロックレベル：テーブルブロックの ブロック設定（三本線アイコン）をクリックし、「クイック編集（Quick editing）」 を見つけてオンにすると、テーブル全体のフィールドでクイック編集が有効になります。
• 個別フィールドレベル：特定の列のフィールド設定項目をクリックし、「クイック編集」 で個々のフィールドごとに有効/無効を制御できます。

有効化後、テーブルのセルにマウスを合わせると小さな鉛筆アイコンが表示されます。クリックするとそのフィールドの編集コンポーネントが表示され、変更すると自動保存されます。

どのような場面に適していますか？ クイック編集はステータスや担当者などのフィールドを一括変更する場面に最適です。たとえば管理者がチケット一覧を閲覧しながら、「ステータス」列を直接クリックしてチケットを「未対応」から「対応中」にすばやく変更でき、1 件ずつ編集画面を開く必要がありません。

#4.4 変更履歴の有効化

チケットシステムで最も重要なことの 1 つは、誰がいつ何を変更したかの追跡が可能であることです。NocoBase の「変更履歴」プラグインがデータの変更を自動的に記録してくれます。

#変更履歴の設定

1. 設定 → プラグイン管理 に入り、「変更履歴」（Record History）プラグインが有効になっていることを確認します。

2. プラグインの設定ページに入り、「データテーブルを追加」 をクリックし、「チケット」 を選択します。
3. 記録するフィールドを選択します：タイトル、ステータス、優先度、担当者、説明 など。

推奨：すべてのフィールドを記録する必要はありません。ID や作成日時のように手動で変更されないフィールドは追跡不要です。ビジネス上意味のあるフィールドの変更だけを記録しましょう。

4. 設定項目に戻り、「履歴データスナップショットを同期」 をクリックすると、プラグインが既存のすべてのチケットを最初の履歴レコードとして自動的に記録します。以降は変更のたびに新しい履歴レコードが追加されます。

#詳細ページで履歴を表示

1. チケット詳細のドロワーページに戻ります（テーブル行の「閲覧」ボタンをクリック）。
2. ドロワー内で 「ブロックを作成（Add block）」→ 変更履歴 をクリックします。
3. 「現在のデータテーブル」 を選択し、データは 「現在のレコード」 を選びます。
4. 詳細ページの下部にタイムラインが表示され、各変更が明確に示されます。誰がいつ、どのフィールドの値を何から何に変更したかが一目瞭然です。

これにより、チケットが複数の担当者を経由しても、すべての変更が明確に記録されます。

#まとめ

この章ではデータの完全なライフサイクルを完成させました。

• フォーム — ユーザーが新しいチケットを提出でき、フィールドにはデフォルト値とバリデーションあり
• 連動ルール — 緊急チケットは自動的に説明の入力を必須に
• 詳細ブロック — チケットの完全な情報をわかりやすく表示
• 変更履歴 — すべての変更を自動追跡、監査も安心（商用プラグイン、オプション）

「見える」から「入力できる」、そして「追跡できる」へ。チケットシステムは基本的な実用性を備えるようになりました。

#関連リソース

• フォームブロック — フォームブロックの詳細設定
• 詳細ブロック — 詳細ブロックの設定
• 連動ルール — フィールド連動ルールの説明