こんにちは。オブザーバビリティの世界へようこそ。
日々、数千のメトリクスとログの海を泳いでいるあなたへ。これまでの「静的で、単に情報を表示するだけ」のGrafanaダッシュボードに、物足りなさを感じていませんか？
「このグラフをクリックしたら、特定のエンドポイントのログを自動で絞り込みたい」「複雑な計算ロジックをダッシュボード上で動的に実行したい」。そんな現場の切実な願いを叶えるのが、Grafanaの次世代UIフレームワーク「Grafana Scenes」です。
これは単なるプラグイン開発ではありません。Grafanaを「監視ツール」から「高度な運用自動化アプリケーション」へと進化させるための鍵です。今日は、その神髄に触れてみましょう。
—
1. なぜ「Grafana Scenes」なのか？
従来のDashboard JSONモデルは、非常に強力ですが、複雑な動的制御には限界がありました。Scenesは、「すべてのダッシュボードをReactコンポーネントのツリーとして定義する」という設計思想を持っています。
つまり、あなたが書くReactコードがそのままダッシュボードの挙動になるのです。これを使えば、チームのナレッジをUIに埋め込み、「誰でも障害対応できるダッシュボード」を構築できます。
—
2. 開発環境のセットアップ：ここから全てが始まる
まずは、Grafanaプラグイン開発のための足場（スキャフォールド）を整えます。Node.js (v18+) がインストールされていることを確認してください。
Grafanaプラグインの雛形を作成する公式ツールを使用
npx @grafana/create-plugin@latest my-awesome-scene
プロンプトが表示されたら「app」または「panel」を選択しますが、
今回は独自のダッシュボードUIを作りたいので「app」を選択してください。
ディレクトリに入り、依存関係をインストールします。
cd my-awesome-scene
npm install
npm run dev
—
3. HelloWorld：動的な「シーン」を構築する
Scenes開発の心臓部は `Scene` オブジェクトです。これに「何を表示するか（Layout）」と「何からデータを取るか（Query）」を定義します。
`src/components/MainPage.tsx` を開き、最小構成を書いてみましょう。
import React from ‘react’;
import { SceneApp, SceneAppPage, SceneFlexLayout, SceneFlexItem } from ‘@grafana/scenes’;
export const MyCustomDashboard = () => {
// 1. シーンの定義：これがいわゆる「ダッシュボードの設計図」です
const scene = new SceneApp({
pages: [
new SceneAppPage({
title: ‘次世代運用ダッシュボード’,
url: ‘/a/my-awesome-scene’,
getScene: () => new SceneFlexLayout({
children: [
new SceneFlexItem({
body:
,
}),
],
}),
}),
],
});
return
};
—
4. 現場で震えるほど役立つ「カスタムUX」の組み込み
単なるテキスト表示では面白くありませんよね。ここで、「特定のボタンを押すと、バックエンドにAPIリクエストを飛ばし、その結果をグラフに反映させる」という、現場で最も求められる機能を実装するイメージを持ちましょう。
以下のポイントを押さえるだけで、あなたのダッシュボードは劇的に化けます。
- 状態管理（State Management）: Scenesの各コンポーネントは `SceneObject` を継承します。`useState` で値を保持するのではなく、オブジェクト内のプロパティとして状態を管理することで、ダッシュボード全体で同期されたデータフローを実現できます。
- データソース連携: `DataQueryRunner` を使うと、Grafanaのデータソース（PrometheusやLoki）から直接データを引っ張れます。
現場のTips:
「手動でクエリを書き換える」のではなく、「特定のコンポーネントを触ると、自動的にクエリパラメータが書き換わり、グラフが再描画される」というUXを意識してください。これにより、新米エンジニアでも「どこを見るべきか」に迷わなくなります。
—
5. 成功への道筋
まずは以下のステップで進めてみてください。
1. 公式ドキュメント（[Grafana Scenes Docs](https://grafana.github.io/scenes/)）を「読む」のではなく「動かす」。
2. 既存のPanelを1つだけScenes上にレンダリングする。
3. そこに「独自の制御ボタン」を追加して、Panelのクエリをプログラムから操作してみる。
これをマスターすれば、毎日の作業が劇的に楽になります。障害発生時に「どのグラフを見ればいいんだっけ？」と探す時間はゼロになり、「このボタンを押せば、影響範囲が自動的に可視化される」という、あなたが指揮官となる環境が手に入ります。
さあ、あなたの手で、オブザーバビリティの新しい景色を描き始めましょう。何か詰まったら、いつでも聞いてくださいね。応援しています。