ダッシュボードをゼロから作る手順：グラフを1画面にまとめる
前作では、Incidentテーブルから優先度別の内訳が分かる積み上げ棒グラフを作りました。グラフが1つ完成すると、次は「他の指標も見たい」という欲が出てきます。担当グループ別の件数、直近のクローズ状況、対応時間の平均。増えるたびに一つひとつ開いて確認するのは手間です。朝のミーティング前に何画面も切り替えるのは、地味に時間を取られます。
この記事では、複数のグラフを1つの画面にまとめる「ダッシュボード」の作り方を、実機の画面で最後まで追います。使うのは前作で作った積み上げ棒グラフです。新しいダッシュボードを作り、そこへこのグラフを載せて完成させます。グラフ自体の作り方はすでに終えている前提で、ここでは「置き場所」を用意する手順だけに絞ります。
前作はこちらです。
ServiceNow レポート・ダッシュボード完全ガイド：Data VisualizationsとPerformance Analyticsの使い分け — ダッシュボード作成の前に知っておきたい、Data VisualizationsとPerformance Analyticsの役割分担をまとめた記事
Data Visualizationsでグラフをゼロから作る手順（無料・グラフの土台となる作成手順）
Data Visualizationsの各機能を使い倒す（有料・色や軸などの見た目調整）
この記事で分かること
ダッシュボード一覧の見方と「Create dashboard」ボタンの場所
In-line editorとTechnical editor、どちらを選ぶべきか
編集画面でSaveやAdd new elementなど各ボタンが担う役割
既存のグラフをダッシュボードに載せる2つの経路
保存してから閲覧モードに戻るまでの流れ
検証環境は ServiceNow の PDI（Personal Developer Instance）Zurich リリースです。デモデータ入りの状態で操作しています。画面や既定値はリリース・環境で変わることがあります。
ダッシュボード一覧から始める
ダッシュボードを作る入口は、Platform Analyticsの「Dashboards」一覧です。URLは/now/platform-analytics-workspace/dashboard-libraryで、見出しには「Dashboards」と表示されます。
右上に青い「Create dashboard」ボタンがあり、ここから新規作成が始まります。検証したPDIでは、すでに31件のダッシュボードが登録されていました。既製のダッシュボードが多く並ぶ状態です。
一覧にはName・Description・Viewed・Owned byといった列が並び、列ごとにフィルタ行を出して絞り込めます。左上には「Filter by」と「Categories」という選択も用意されていました。上部の集計タイルには「Not viewed in 1 year」「Updated in the last 30 days」が並び、使われていないダッシュボードが一目で分かります。一覧の操作は、Delete・Deactivate・Add to bookmarks・Certified・Other actions・Personalize Listです。まずはここから「Create dashboard」を押します。
手順1：In-line editorとTechnical editor、どちらを選ぶか
「Create dashboard」を押すと、作成方法を選ぶダイアログが開きます。「Select how do you want to create your dashboard.」という説明とともに、2つの選択肢が並びます。
1つ目はIn-line editorです。「Recommended for most users」というバッジが付き、既定で選択されています。説明文は「Create dashboards by dragging and dropping components on the stage of the page.」です。要素をドラッグ&ドロップして配置する編集方法だと分かります。プログラミングの知識が無くても組み立てられる、という位置づけです。
2つ目はTechnical editorです。説明文は「Take advantage of some additional capabilities like scripting and data binding.」となっています。スクリプトやデータバインディングといった追加機能を使える編集方法だと読み取れます。裏を返せば、使いこなすには相応の知識が要るということです。
どちらを選んでも、ダイアログにはName（必須）とDescription（任意）の入力欄が続きます。今回はグラフを1つ載せるだけなので、既定のIn-line editorのまま名前だけ入力し、「Create new dashboard」を押します。Technical editorの画面や操作は今回検証していません。スクリプトを書く前提が要る分、まず慣れるのはIn-line editorからで十分です。
手順2：編集画面の見方
「Create new dashboard」を押すと、作成したダッシュボードがそのまま編集モードで開きます。URLは/now/platform-analytics-workspace/dashboards/params/edit/true/sys-id/<sys_id>という形で、末尾のedit/trueが編集中であることを表します。
左上にはダッシュボード名と、名前を変えるための鉛筆アイコンがあります。その下に「+ Add a tab」があり、画面を複数のタブに分けられそうだと分かります。今回は使っていません。
右上には5つの操作が並びます。
歯車アイコンのDashboard Settings
iアイコンのView dashboard details
Save
Exit editing mode
青い「Add new element」ボタン
3点アイコンのMore actionsもあります。中央のキャンバスはドット方眼です。「Add your first element」という見出しが出ています。続けて「There is nothing here yet. You can start adding your first elements」という説明も添えられていました。まだ何も置かれていない、という状態です。ここまでは、ボタンの場所を確認しただけの段階になります。
ここから要素を足していけば、ダッシュボードが形になっていきます。
手順3：要素を追加する
右上の「Add new element」を押すと、追加できる要素の一覧が開きます。
並んでいるのは次の8種類です。
Data visualization（グラフや表を載せる）
Filter（絞り込み条件を置く）
Filter Group（複数の条件をまとめる）
Heading（見出しテキスト）
Image（画像）
List（レコード一覧）
Process Mining - Map（プロセスマイニングの図）
Rich text（自由記述のテキスト）
上部には「Search elements」があり、名前で絞り込めます。ダッシュボードにはグラフだけでなく、見出しや自由記述のテキスト、フィルタも置ける作りでした。グラフの上にHeadingで表題を添えたり、Rich textで注意書きを残したりする使い方もできそうです。今回はグラフを1枚載せる目的なので、「Data visualization」を選びます。Filter・Filter Group・Heading・Image・List・Process Mining - Map・Rich textの各要素は、パレットに存在することだけを確認しました。詳しい設定内容は今回の検証範囲外です。
手順4：既存のグラフを載せる
「Data visualization」を選ぶと、「Add Visualization」というダイアログが開きます。ここで進み方が2つに分かれます。
Add a saved Visualization（Saved Visualization）… ライブラリにある既存のグラフを載せる
Add new Visualization（New Visualization）… その場で新しいグラフを作る
前作ですでにグラフを作ってあるので、今回は「Add a saved Visualization」を選びます。「Add new Visualization」を選んだ場合の作成フローは、今回は確認していません。
「Add a saved Visualization」を選ぶと、ライブラリから選ぶダイアログに切り替わります。
タイトルは「Select a Visualization from library」です。上部に「Filter by name or description」という入力欄とSearchボタンがあり、名前や説明で絞り込めます。一覧の列はチェックボックス・Name・Description・Certified（true/false）です。Certified列があることから、組織として推奨するグラフかどうかを示す仕組みがあると分かります。似た名前のグラフが並んでいても、この列を見れば選ぶ手がかりになります。
選び方は行をクリックするのではなく、行のチェックボックスをONにします。チェックを入れるまでは、右下の「Add to Dashboard」ボタンは非活性のままです。前作で作った積み上げ棒グラフのチェックボックスをONにし、「Add to Dashboard」を押すと、キャンバスにそのグラフが配置されます。
手順5：保存して閲覧モードに戻る
グラフを配置したら、右上の「Save」を押します。保存しただけでは、まだ編集モードのままです。続けて「Exit editing mode」を押すと、閲覧専用の画面に切り替わります。URLのedit/trueの部分がedit/falseに変わり、編集していないことが分かります。
閲覧モードの右上には、更新アイコン・iアイコン・Edit・3点アイコンのMore actionsが並びます。タイトルの横には下向き矢印があり、ここから他のダッシュボードに切り替えられそうな作りです。編集し直したくなったら、「Edit」を押せば手順2の編集画面に戻ります。SaveとExit editing modeは別のボタンなので、保存したつもりで閉じずに編集モードのまま離れないよう注意してください。ここまでの5手順で、グラフが1枚載ったダッシュボードが完成しました。
配置したグラフの設定は Data Visualization と同じ
グラフをダッシュボードに配置すると、右側にConfigurationパネルが開きます。ここに並ぶセクションは、前作でグラフ単体を作ったときと同じ構成でした。
Header and border
Data / Data sources
Metric
Group by
Sorting
Data update
Info messages
Presentation（Display settings・Chart variation・Y axis・X axis・Legend・Data label・Colors）
つまり、Data Visualizationの各機能を使い倒す記事で確認した設定は、ダッシュボードに置いた後もそのまま使えます。色を変える、データラベルを出す、Group byを変える。作業手順は単体で編集していたときと変わりません。ダッシュボードに載せてから見た目を仕上げても、載せる前に仕上げてから持ってきても、たどり着く結果は同じです。
ウィジェットにカーソルを合わせると、操作用のアイコンが現れます。
Configure
Close
Increase height
Decrease height
Open widget options dropdown
More options for widget
高さの調整は、メニューを開かずにアイコンから直接行える作りでした。
つまずきやすい点
実際に作ってみて、引っかかりやすいのは次の点です。
作成方法の選択は最初の1回だけ。In-line editorとTechnical editorはダイアログの時点で決まり、あとから切り替える操作は確認していません。作り直すなら、新しいダッシュボードを作成し直すのが確実です。
「Add a saved」と「Add new」を間違えやすい。既存のグラフを使いたいのに「Add new Visualization」を選ぶと、ゼロから作る画面に進んでしまいます。前作のグラフを再利用するなら「Add a saved Visualization」です。ボタンの名前が似ているので、クリック前に一呼吸置くと安全です。
ライブラリでは行クリックでは選べない。チェックボックスを入れないと「Add to Dashboard」が押せません。行を1回クリックしただけでは反応しない画面です。プレビューが出るわけでもないので、最初は戸惑いやすい部分です。
SaveとExit editing modeは別操作。Saveを押しただけでは編集モードのままです。閲覧側の見え方を確認したいときは、Exit editing modeまで進める必要があります。編集を続けるつもりなら、Saveだけで作業を切り上げても問題ありません。
Add a tabやDashboard Settingsの中身は今回未検証。ボタンの存在は確認しましたが、開いた先の設定項目までは踏み込んでいません。今回のようにグラフ1枚だけの構成なら、触らずに完成させられます。
よくある質問
In-line editorとTechnical editor、結局どちらを選べばいい？
ダイアログでは In-line editorに「Recommended for most users」というバッジが付き、既定でも選ばれています。ドラッグ&ドロップで組み立てる編集方法です。Technical editorはスクリプトやデータバインディングを使う説明が添えられており、より込み入った作り方向けだと読み取れます。まずはIn-line editorから試すのが素直です。今回のように既存のグラフを1枚載せるだけなら、In-line editorで完結します。
ダッシュボードには何を置ける？
要素パレットには8種類が並んでいました。グラフを表すData visualizationのほか、Filter・Filter Group・Heading・Image・List・Process Mining - Map・Rich textです。グラフ以外にも、見出しや説明文、画像を組み合わせて1画面を構成できます。追加の操作はどの要素でも共通で、Add new elementから選ぶだけです。
既存のグラフと新規のグラフ、両方を置ける？
置けます。「Data visualization」を選ぶと出る「Add Visualization」ダイアログには、2つの経路があります。ライブラリにある既存グラフを選ぶ「Add a saved Visualization」と、その場で新規に作る「Add new Visualization」です。今回検証したのは既存グラフを載せる経路です。
ライブラリのグラフはどうやって選ぶ？
「Select a Visualization from library」ダイアログで、名前や説明による絞り込みができます。選択は行のチェックボックスで行い、チェックを入れるまで「Add to Dashboard」は押せません。列にはCertifiedもあり、認定済みかどうかも確認しながら選べます。
保存後にグラフの設定を直したい
ダッシュボードに配置したグラフをクリックすると、右側にConfigurationパネルが開きます。Header and border・Data・Metric・Group by・Presentationなど、単体のグラフを編集したときと同じセクションが並ぶ作りでした。色やデータラベルの変更は、この状態からそのまま行えます。
「Add a tab」やDashboard Settingsでは何ができる？
編集画面の左上には「+ Add a tab」というボタンがあります。名前から、1つのダッシュボードを複数のタブに分けられる機能だと見当が付きます。ただし今回の検証ではボタンの存在を確認しただけで、押した後の挙動までは踏み込んでいません。右上の歯車アイコンにある Dashboard Settings も同様です。中でどんな項目が設定できるかは、今回は確認できていません。1画面・1グラフのシンプルな構成であれば、どちらも開かずに完成させられます。
まとめ
ダッシュボードは「Dashboards」一覧の「Create dashboard」から作り始める
作成方法はIn-line editor（既定・推奨）とTechnical editorの2択で、まずはIn-line editorで十分
編集画面では「Add new element」から要素を足し、Saveで保存、Exit editing modeで閲覧モードに戻る
既存のグラフを載せるなら「Add a saved Visualization」、ライブラリではチェックボックスで選ぶ
配置後の設定パネルは、単体のグラフを作ったときと同じ項目が並ぶ
用語
ダッシュボード … 複数のグラフや要素を1画面にまとめたもの
In-line editor … ドラッグ&ドロップで組み立てる編集方法。既定で選ばれる
Technical editor … スクリプトやデータバインディングを使う編集方法
Saved Visualization … ライブラリに保存済みの既存グラフ
Certified … 認定済みかどうかを示すライブラリの列
自分の環境で確認するときのURL
/now/platform-analytics-workspace/dashboard-library（ダッシュボード一覧）
/now/platform-analytics-workspace/dashboards/params/edit/true/sys-id/<sys_id>（編集画面）
参考リンク
検証範囲とおことわり
確認した範囲：PDI（Zurich・デモデータ入り）のPlatform Analyticsで、In-line editorによるダッシュボード新規作成、既存グラフ（Add a saved Visualization）のライブラリからの追加、Save・Exit editing modeによる保存と閲覧モードへの遷移、配置後のConfigurationパネル表示までを実機で操作しました。本文の画面と手順はこの操作に基づきます
確認していない範囲（断定しません）：Technical editorの画面と操作、Filter・Filter Group・Heading・Image・List・Process Mining - Map・Rich textの各要素の詳細設定、ドラッグ&ドロップによる配置・リサイズの実操作、Add a tabの挙動、Dashboard Settingsの中身、「Add new Visualization」を選んだ場合の作成フロー
他リリースでの画面名・既定値、大量データでの表示速度、権限を絞ったロールでの見え方は本記事の範囲外です
ダッシュボードが1つ作れれば、グラフを増やして育てていくのは同じ手順の繰り返しです。次に載せたいグラフができたら、同じ「Add new element」から足していくだけです。
