#第 7 章：ダッシュボード — 全体を一目で把握する

前の章ではワークフローを使ってシステムに自動通知と自動時刻記録をさせました。システムはどんどんスマートになりましたが、まだ 1 つ足りないものがあります——全体を俯瞰する視点です。

チケットは何件？対応済みは何件？どの種類の問題が多い？毎日何件追加されている？これらの質問に一覧をスクロールしても答えられません。この章では、チャートブロック（円グラフ、折れ線グラフ、棒グラフ）と Markdown ブロックでデータダッシュボードを構築し、データを一目で理解できる画面に変えます。

#7.1 ダッシュボードページの追加

まず、トップナビゲーションバーに新しいメニュー項目を追加します。

設定モードに入り、トップメニューバーの 「メニュー項目を追加」（+ アイコン）をクリックし、「新版ページ（v2）」 を選択して「データダッシュボード」と名付けます。

このページはチャート専用で、ダッシュボードのメイン画面になります。

#7.2 円グラフ：チケットステータスの分布

最初のチャートは、「未対応」「対応中」「完了」がそれぞれ何件あるかを円グラフで表示します。

データダッシュボードページで ブロックを作成（Add block） → チャート をクリックします。

追加後、ブロック右上の 設定 ボタンをクリックすると、右側にチャート設定パネルが開きます。

#データクエリの設定

• データテーブル：「チケット」を選択
• メジャー（Measures）：重複しない任意のフィールド（例：ID）を選択し、集計方法は カウント（Count） を選択
• ディメンション（Dimensions）：「ステータス」フィールドを選択

クエリを実行 をクリックすると、下部に返されたデータがプレビュー表示されます。

#チャートオプションの設定

• チャートタイプ：円グラフ を選択
• フィールドマッピング：Category は「ステータス」、Value はカウント値を選択
• ラベル：スイッチをオン

左側のページにきれいな円グラフが表示されているはずです。各セクターが 1 つのステータスを表し、デフォルトで具体的な数量と割合が表示されます。

保存 をクリックすれば、最初のチャートの完成です。

#7.3 折れ線グラフ：日別新規チケットの推移

円グラフは「現在の分布」を見るものですが、折れ線グラフは「変化の傾向」を見るものです。

ページにもう 1 つチャートブロックを追加し、以下のように設定します。

#データクエリ

• データテーブル：「チケット」を選択
• メジャー：ID、カウント
• ディメンション：「作成日時」フィールドを選択し、フォーマットを YYYY-MM-DD（日別でグループ化）に設定

ヒント：日付ディメンションのフォーマットは重要です。YYYY-MM-DD を選ぶと日別統計、YYYY-MM にすると月別統計になります。データ量に応じて適切な粒度を選んでください。

#チャートオプション

• チャートタイプ：折れ線グラフ を選択
• フィールドマッピング：xField は「作成日時」、yField はカウント値を選択

保存すると、チケット数の時間的な変化曲線が確認できます。ある日に急増していたら、その日に何か問題が起きた可能性があり、注目に値します。

#7.4 横棒グラフ：分類別チケット数

3 つ目のチャートでは、どの分類のチケットが最も多いかを確認します。ここでは縦棒グラフではなく横棒グラフを使います。分類が多い場合、縦棒グラフだと X 軸のラベルが重なって隠れることがありますが、横向きの方がすっきり表示されます。

3 つ目のチャートブロックを追加します。

#データクエリ

• データテーブル：「チケット」を選択
• メジャー：ID カウント
• ディメンション：「分類」リレーションフィールドを選択（分類の名前フィールドを選択）

#チャートオプション

• チャートタイプ：棒グラフ（Bar） を選択
• フィールドマッピング：xField はカウント値（ID カウント）、yField は「分類名」を選択

保存すると、どの種類の問題が最も多いかが一目瞭然です。「ネットワーク障害」の棒が他の分類より明らかに長い場合、ネットワーク機器のアップグレードを検討すべきかもしれません。

#7.5 テーブルブロック：未完了チケット

チャートは集計の視点を提供しますが、管理者は通常、具体的な明細も確認したいものです。未完了チケットのテーブルを追加し、まだ対応が完了していないすべてのチケットを直接表示しましょう。

ページに テーブルブロック を追加し、データテーブルは「チケット」を選択します。

#フィルタ条件の設定

テーブルブロック右上の設定項目をクリックし、データ範囲を設定 を見つけて、フィルタ条件を追加します。

• ステータス が 完了 と等しくない

これでテーブルにはまだ完了していないチケットだけが表示され、完了したチケットはリストから自動的に消えます。

#フィールドの設定

表示する列を選択します：タイトル、ステータス、優先度、担当者、作成日時。

ヒント：デフォルトソート（作成日時の降順）も追加すると、最新のチケットが一番上に表示されて便利です。

#7.6 Markdown ブロック：システムのお知らせ

チャートの他にも、ダッシュボードにテキスト情報を配置できます。

Markdown ブロック を追加し、システムのお知らせや使い方を記入します。

## IT チケットシステム

ご利用ありがとうございます！問題が発生した場合はチケットを提出してください。技術チームが迅速に対応します。

**緊急の場合**は IT ホットラインに直接お電話ください：8888

Markdown ブロックをダッシュボードの上部に配置すれば、ウェルカムメッセージとお知らせ掲示板の両方を兼ねることができます。内容はいつでも変更可能で、非常に柔軟です。

#7.7 JS ブロック：パーソナライズされたウェルカムバナー

Markdown のフォーマットはやや限定的ですが、もっとリッチな表現が欲しい場合はどうすればよいでしょうか？NocoBase は JS ブロック（JavaScript Block） を提供しており、コードで自由に表示コンテンツをカスタマイズできます。

これを使ってビジネス風のウェルカムバナーを作りましょう。現在のログインユーザーと時間に応じて、パーソナライズされた挨拶を表示します。

ページに JS ブロック を追加します（ブロックを作成 → その他のブロック → JS ブロック）。

JS ブロック内では ctx.getVar("ctx.user.username") で現在のログインユーザーのユーザー名を取得できます。以下はビジネス調のシンプルなウェルカムバナーです。

const uname = await ctx.getVar("ctx.user.username")
const name = uname || 'ユーザー';
const hour = new Date().getHours();
const hi = hour < 12 ? 'おはようございます' : hour < 18 ? 'こんにちは' : 'こんばんは';

const d = new Date();
const date = `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`;
const week = ['日','月','火','水','木','金','土'][d.getDay()];

ctx.render(`
<div style="padding: 24px 32px; background: #f7f8fa; border-radius: 8px;">
  <div style="display: flex; justify-content: space-between; align-items: flex-end;">
    <div>
      <div style="font-size: 22px; font-weight: 600; color: #1d2129;">${hi}、${name} さん</div>
      <div style="font-size: 14px; color: #86909c; margin-top: 4px;">IT チケットシステムへようこそ</div>
    </div>
    <div style="font-size: 14px; color: #86909c;">${date}　${week}曜日</div>
  </div>
</div>`);

淡いグレーの背景のカードで、左側に挨拶メッセージ、右側に日付が表示されます。シンプルで実用的、かつ控えめなデザインです。

ヒント：ctx.getVar("ctx.user.xxx") は JS ブロックで現在のユーザー情報を取得する方法です。よく使うフィールドには nickname（ニックネーム）、username（ユーザー名）、email（メール）などがあります。JS ブロックでは API を呼び出してデータを取得することもでき、さらに多くのカスタムコンテンツを作成できます。

#7.8 アクションパネル：ショートカット + ポップアップの再利用

ダッシュボードはデータを見るだけの場所ではなく、操作の起点でもあるべきです。アクションパネル（Action Panel） を追加して、ユーザーがトップページから直接チケットを提出したり、チケット一覧にジャンプしたりできるようにしましょう。

ページに アクションパネル ブロック（ブロックを作成 → その他のブロック → アクションパネル）を追加し、アクションパネルに 2 つのアクションを追加します。

1. リンク：チケット一覧へジャンプ — 「リンク」アクションを追加し、URL をチケット一覧ページ（例：/admin/camcwbox2uc）に設定します

2. ボタン：チケットを追加 — 「ポップアップ」アクションボタンを追加し、タイトルを「チケットを追加」に変更します

ただし「チケットを追加」ボタンをクリックしてもポップアップは空です。ポップアップのコンテンツを設定する必要があります。手動で再度フォームを構築するのは面倒なので、ここで非常に便利な機能を紹介します：ポップアップの再利用。

#ポップアップテンプレートの保存

注意：ここでのポップアップテンプレートと第 4 章の「ブロックテンプレート」は別物です。ブロックテンプレートは単一のフォームブロックのフィールドとレイアウトを保存しますが、ポップアップテンプレートはポップアップ全体のコンテンツを保存します。中のすべてのブロック、フィールド、アクションボタンを含みます。

1. チケット一覧ページ に移動し、「チケットを追加」ボタンを見つけます
2. ボタンの設定項目をクリックし、「テンプレートとして保存」 で現在のポップアップを保存します
3. テンプレートに名前を付けます（例：「新規チケットポップアップ」）

#トップページでポップアップを再利用

1. データダッシュボードページに戻り、アクションパネルの「チケットを追加」ボタンの設定項目をクリックします
2. 「ポップアップ設定」 を見つけ、先ほど保存した「新規チケットポップアップ」テンプレートを選択します
3. 保存後、ボタンをクリックするとチケット一覧と全く同じ新規フォームのポップアップが直接開きます

#タイトルクリックで詳細ポップアップを開く

同様の方法で、未完了チケットテーブルのタイトルをクリック可能にし、直接チケット詳細を開くこともできます。

1. まずチケット一覧ページに移動し、「閲覧」ボタンの設定項目で同様に 「テンプレートとして保存」 します（例：「チケット詳細ポップアップ」）

2. データダッシュボードページに戻り、未完了チケットテーブルの「タイトル」フィールドの設定項目をクリックします
3. 「クリックで開くを有効化」 スイッチをオンにすると、「ポップアップ設定」オプションが表示されます
4. ポップアップ設定で先ほど保存した「チケット詳細ポップアップ」テンプレートを選択します

これで、ユーザーはダッシュボード上でチケットのタイトルをクリックするだけで直接詳細を確認でき、チケット一覧ページにジャンプする必要がありません。ダッシュボード全体がよりコンパクトで効率的になります。

ポップアップ再利用のメリット：同じポップアップテンプレートを複数のページで使用でき、テンプレートを変更するとすべての参照箇所に同期されます。第 4 章の「参照」モードと同じ考え方で、1 箇所で管理し、すべてに反映されます。

#7.9 レイアウトの調整

ページには 6 つのブロックが配置されました（JS ウェルカムバナー + アクションパネル + 3 つのチャート + チケットテーブル）。レイアウトを調整して、より見栄え良くしましょう。

設定モードでドラッグ＆ドロップにより各ブロックの位置とサイズを調整できます。

おすすめのレイアウト例：

• 第 1 行：JS ウェルカムバナー（左）+ アクションパネル（右）
• 第 2 行：円グラフ（左）+ チケットテーブル（右）
• 第 3 行：折れ線グラフ（左）+ 棒グラフ（右）

ブロックの高さが揃っていない場合は、ブロック設定 > ブロックの高さ で手動調整できます。たとえば、第 2 行の 2 つのブロックをどちらも 500px に調整しました。

端をドラッグするとブロックの幅を調整でき、2 つのチャートを半分ずつに配置できます。何度か試して、最も快適な配置を見つけてください。

#まとめ

この章では 6 つのブロックを使って、充実した実用的なデータダッシュボードを構築しました。

• JS ウェルカムバナー：現在のユーザーと時間に応じてパーソナライズされた挨拶を表示
• アクションパネル：チケット一覧へのショートカットジャンプ、ワンクリックでチケット追加（ポップアップ再利用）
• 円グラフ：チケットステータスの分布割合を一目で把握
• 折れ線グラフ：チケット数の時間的な変化の傾向を追跡
• 横棒グラフ：各分類のチケット数を横方向に比較、分類が多くてもラベルが重ならない
• 未完了チケットテーブル：すべての未対応チケットを一覧表示、タイトルをクリックで直接詳細確認（ポップアップ再利用）

また、ポップアップの再利用という重要なテクニックも学びました。あるページのポップアップをテンプレートとして保存し、他のページから直接参照することで、設定の重複を避けられます。

データビジュアライゼーションは NocoBase の組み込みプラグインのため、追加インストールは不要です。設定方法もページ構築と同じくシンプルで、データを選択、チャートタイプを選択、フィールドをマッピングするだけの 3 ステップで完了します。

#今後の予定

ここまでで、チケットシステムの機能はかなり充実しました。データモデリング、ページ構築、フォーム入力、権限制御、自動化ワークフロー、データダッシュボードがすべて揃っています。今後は AI Agent によるシステム構築チュートリアル を公開予定です。AI Agent がローカルで自動的にシステム構築を行います。どうぞお楽しみに。

#関連リソース

• データビジュアライゼーション — チャート設定の詳細
• Markdown ブロック — Markdown ブロックの使い方
• ブロックレイアウト — ページレイアウトとブロック設定