Dashboard Studio：ダッシュボードのカスタマイズが簡単に

Splunkダッシュボードをもっと手軽にカスタマイズして、下の画像のようなダッシュボードを作成したいとお考えですか？
 

答えが「Yes」なら、このブログを見にきて正解です！このブログでは、ダッシュボードのカスタマイズ事情を考察し、新しいDashboard Studioを使うと従来のシンプルXMLやHTMLダッシュボードと比べてどのくらい簡単にカスタマイズができるかをご紹介します。Dashboard Studioは、直感的なUIで高度な視覚オブジェクトと自由にカスタマイズ可能なレイアウトを使用して、魅力的でインタラクティブなダッシュボードを簡単に作成できるダッシュボード構築ツールです。

ダッシュボードのカスタマイズ事情

Splunkのコミュニティフォーラム「Splunk Answers」を調べると、Splunkダッシュボードのカスタマイズに関する質問が500件近く寄せられていることがわかります。これは、従来のシンプルXMLダッシュボードのカスタマイズが容易ではないことを示唆しています。背景画像の追加、視覚オブジェクトのレイアウトのカスタマイズ、静的な情報を表示するテキストボックスの追加、グラフの色の変更は、次のいずれかの方法で行う必要があります。

• カスタムJSまたはカスタムCSSを使ってシンプルXMLの独自の拡張機能を実装および保守する
• HTMLに変換する

どちらの方法もカスタム開発が必要で、ダッシュボードの保守が面倒になるという難点があります。また、Splunkのバージョンを変更した際に修正が必要になることもあります。HTMLダッシュボードの場合は、エディターのUIを使用できないほか、メール配信のスケジュールを設定できない欠点もあります。さらに、Splunk Cloud 8.2.2105とSplunk Enterprise 8.2以降では、HTMLダッシュボードが非推奨になりました。そのため、HTMLダッシュボードを使い続けるには、アップグレードのたびに手動での更新が必要になる可能性があります。

しかし、Dashboard Studioの登場により、ダッシュボードのカスタマイズニーズの多くがネイティブ機能で対応可能になったのです！Dashboard Studioは、Splunk Cloud Platform 8.1.2103とSplunk Enterprise 8.2以降のすべてのリリースに含まれています。では、いくつかの例をご紹介しましょう。

ダッシュボードレイアウトのカスタマイズ

Dashboard Studioには、2つのレイアウトオプションが用意されています。いずれも表示を柔軟にカスタマイズできます。一方のオプションが「Absolute」(絶対値)、もう一方が「Grid」(グリッド)と呼ばれます。

Absoluteレイアウトは、視覚オブジェクトを自由に配置できるまっさらなキャンバスのようなものです。ピクセル単位で配置を決めたり、オブジェクトを重ね合わせたりしたい場合に便利です。

Gridレイアウトでは、追加した視覚オブジェクトが基準線に沿って配置され、自動的にサイズ調整されます。そのため、見やすいダッシュボードをすばやく作成したい場合に最適です。

グラフの色の変更

Dashboard Studioでは、UIとソースコードのどちらからでもグラフの色を調整でき、しかも、どちらの方法でもUI上で作業できます！単一値、表、カスタムコロプレスSVGのいずれのオブジェクトでも、使用したい色をUIからHEX値で指定できます。カラーパレットで定義済みの色を選択することも可能です。

さらに、面グラフや棒グラフなどの視覚オブジェクトでは、使用したい色をソースコードで指定することもできます。その際は、一連の色をまとめて指定することも、フィールドごとに色を指定することも可能です。まとめて指定する場合は、"seriesColors"オプションを追加します。

   "options": {

        "seriesColors": [

            "#A870EF",

            "#A9F5E7",

            "#F29BAC",

            "#26AA92",

            "#FDAF93"

        ]

    }

フィールドごとに色を指定する場合は、"fieldColors"オプションを追加します。

   "options": {

       "fieldColors": {

            "1": "#A870EF",

            "2": "#A9F5E7",

            "3": "#F29BAC",

            "4": "#26AA92",

            "5": "#FDAF93"

        }

    }

複数の視覚オブジェクトに同じ色を適用したい場合は、ダッシュボードの"defaults"セクションを利用できます。たとえば、面グラフごとに一連の色を指定する代わりに、次のようにソースコードの"defaults"スタンザにそのオプションを挿入します。

"defaults": {

"visualizations": {

"viz.area": {

"options": {

        "seriesColors": [

            "#A870EF",

            "#A9F5E7",

            "#F29BAC",

            "#26AA92",

            "#FDAF93"

        ]

}

}

}

GIFを含む画像とテキストボックスの追加

Dashboard Studioでは、ダッシュボードで使用する画像を直接アップロードできます(注：現在、画像の追加はAbsoluteレイアウトでのみサポートされます)。背景画像をアップロードした場合は、その大きさを調整することも可能です。背景以外にも、企業ロゴの画像やGIFアニメーションを追加することもできます。以下に示すとおり、画像を直接アップロードすることも、URLを使ってアップロードすることもできます。

Dashboard Studioでは、テキストボックスを追加して、静的な情報を表示したり、ダッシュボードに関するコンテキストを追加したりすることも可能です。

図形とレイヤーオブジェクトの追加

Absoluteレイアウトでは、いくつかの機能を使ってさらに洗練したダッシュボードを作成できます。たとえば、図形や線を追加して、複数のオブジェクトを視覚的にグループ化したり、視覚オブジェクトと背景の間にレイヤーを追加したり、オブジェクト同士をつなげたりできます。

下の画像のEコマースの監視ダッシュボードでは、白いボックスを使って視覚オブジェクトと背景を分けるとともに、複数の単一値視覚エフェクトを1つのグループにまとめています。

ランディングページのダッシュボードの例

Dashboard Studioのネイティブ機能を使ってダッシュボードをカスタマイズする方法を学んだところで、ランディングページとして使用するダッシュボードをイメージしてみましょう。エンドユーザーはここを起点に他のダッシュボードや関連リンクに移動できます。下の画像は、Dashboard StudioのExamples Hubページです。このページ自体が、ドリルダウンで他のページに移動できるStudioダッシュボードです。

「Complete Dashboards」ページには、ドリルダウン付きの図形、テキストボックス、画像を組み合わせた、特定のダッシュボードやサンプルに移動できるランディングページが用意されています。

次のステップ

Dashboard Studioの操作と使用手順について詳しくは、こちらのデモをご覧ください。その他の詳細については、下記のリソースをご覧ください。

Dashboard Studioをぜひご活用ください。ご意見・ご感想はdashboard-studio@splunk.comまでお寄せください。

リソース

• Splunk Dashboard Studioドキュメント
• Dashboard Studio Tech Talk
• Splunk Ideas - Dashboard Studioの機能や改善リクエスト
• Examples Hub - Search & ReportingのDashboardsページからアクセス
• Splunkコミュニティ - ダッシュボードと視覚オブジェクトに関する質問 

このブログはこちらの英語ブログの翻訳、山村 悟史によるレビューです。