Slide 1
Slide 1 text
[Session-A-08]
GrafanaのGit Sync機能を使って生成AIと共に
ダッシュボードを開発してみた
Slide 2
Slide 2 text
所属
クラスメソッド株式会社
クラウド事業本部コンサルティング部
ソリューションアーキテクト
趣味
ラジオ、散歩、山
好きなAWSサービス
Amazon Managed Grafana
与那嶺 創（よなみね そう）
自己紹介
ピザのアイコンでブログ書いてます
Slide 3
Slide 3 text
アジェンダ
何を解決したかったのか？
GrafanaのAPI
GrafanaのGitSync機能
やってみた
やってみた所感
Slide 4
Slide 4 text
何をしたかったのか？
GrafanaをClaude Codeで操作できないか？
Slide 5
Slide 5 text
データソース毎にクエリ言語が違う
Grafanaのオプションが多すぎて作りたいダッシュボードを作る
のにどの機能を使えばいいか分らない
ダッシュボード構築の時間を削減したい
なぜ？
これを普段から使ってるClaude Codeと
組み合わせて解決できないか？
Grafana使う時の課題
Slide 6
Slide 6 text
何が必要？
ダッシュボードをコード化する
リモート↔︎ローカル間でコードを受け渡し
リモートのコードをダッシュボードに反映
Slide 7
Slide 7 text
コード化
Slide 8
Slide 8 text
実は...Grafanaのダッシュボードは
JSONで定義されているんです！！
意外と他の可視化ツールにないメリットかも？
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
ということで、コード化はクリア！
Slide 11
Slide 11 text
リモート↔︎ローカル間のコード管理
Slide 12
Slide 12 text
コード管理の課題
コードをローカル環境のClaude Codeで操作したい
そのためには？
どこかでコードを管理する
ローカルにコードを落とす
ローカルの変更内容をリモートにも反映させる
Slide 13
Slide 13 text
GrafanaのAPIを利用する
Slide 14
Slide 14 text
dashboard.json
v1
取得
APIリクエスト
Slide 15
Slide 15 text
dashboard.json
v1→v2
dashboard.json
v2
編集
v1→v2
アップロード
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
よさそう...だけど...
Slide 18
Slide 18 text
dashboard.json
v1→v2
dashboard.json
v1
別の人がUI上から
ダッシュボードを編集
問題点
Slide 19
Slide 19 text
dashboard.json
v2
取得
dashboard.json
v1→v2
その都度差分が無いか確認が必要
（実質コードが管理されていない状態）
問題点
Slide 20
Slide 20 text
問題点
dashboard.json
v1→v2
dashboard.json
v2
編集
v1→v2
アップロード
どんな変更されるか
分らない
コードを編集しても
実際にダッシュボードを見るまで変更点が分かりづらい
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
今年、Grafana v12が発表されました！！
その中で Git Sync という機能がプレビューリリース
されました
Slide 23
Slide 23 text
どんな機能？
コードと同じようにダッシュボードを管理できます。
ダッシュボードはGitでバージョン管理され、PRワークフ
ローを通じて編集されるため、変更を常に追跡できます
※ドキュメントより
Slide 24
Slide 24 text
簡単にいうと
GrafanaのダッシュボードjsonをGitHubと同期できる！
Slide 25
Slide 25 text
dashboard.json
(ほぼ)同期
イメージ図
Slide 26
Slide 26 text
dashboard.json
(ほぼ)同期
ここが自動的に同期してるのがGood!!
Slide 27
Slide 27 text
demo_dashboard.json
(ほぼ)同期
更新
コード更新の数十秒後にはGrafanaの
ダッシュボードに反映される
Slide 28
Slide 28 text
このコードをローカル環境のClaude Codeで操作したい
そのためには？
どこかでコードを管理する
ローカルにコードを落とす
変更内容をリモートと合わせる
これが解決できそう!?
Slide 29
Slide 29 text
やってみる
まずはダッシュボードをひとつ作成
Slide 30
Slide 30 text
リポジトリをcloneして、あとはClaude Codeにお任せ
Slide 31
Slide 31 text
大事なこと
Claude Codeにお任せしますが、
「いい感じにダッシュボード作って！」
だとそれっぽいダッシュボードは作られるかもしれませんが、使える
ダッシュボードにはならないと思います。（たぶん）
まずは何を達成したいのか、目的や利用シーンを考えて
ラフでもいいので図を作って渡すと良いダッシュボードが作られます
Slide 32
Slide 32 text
こんな感じ→
のラフ図を作って渡してみる
(今回はAWSのコスト分析ダッシュボード)
これを文字で説明するのは難しい
図で渡す方が良いインプットになる
Slide 33
Slide 33 text
Claude Codeに渡すラフ図で意識していること
パネルには得たい情報を入れる
グラフの形式を入れる
Grafanaで表現できそうな内容にする(閾値を決めて着色するなど)
一発で完璧なダッシュボードができるとは思わない
Slide 34
Slide 34 text
> [Image #1]こちらの画像をベースにdemo-dashboard.jsonを編集して
AWSのコストを分析するダッシュボードを作成してください。
編集を終えたらdevelopにpushしてmainにプルリクを出してください。
プロンプト
Slide 35
Slide 35 text
#develop
#main
編集
(New Branch)
プルリクエスト
プルリクエストの作成まではClaude Codeにやってもらうのが良さそう
人間がダッシュボードのコード見ても良し悪しがわからない
Slide 36
Slide 36 text
#develop
プルリクエスト
#main
とはいえ...
プルリクエストでコードの差分を見ても良し悪しが判断できない
ダッシュボードに反映してから確認するしかない？
Slide 37
Slide 37 text
#develop
プルリクエスト 変更前の
ダッシュボード
変更後の
ダッシュボード
プレビュー機能
#main
こんなのがあったら嬉しいのにな...
Slide 38
Slide 38 text
それ、あるんです。
Slide 39
Slide 39 text
プルリクエストプレビュー機能
Slide 40
Slide 40 text
全てのパネルでエラーが...
Slide 41
Slide 41 text
クエリでエラーが出てた
Slide 42
Slide 42 text
何度か0からClaude Codeでダッシュボード作ってみたが
エラーが出たり出なかったり。
大体はデータソースの選択ミスかクエリの構文エラー
Slide 43
Slide 43 text
> クエリでエラーが出ています。
まずは実際にaws cliでathenaのクエリを実行して、結果が返ってく
ることを確認してからダッシュボードに適用してdevelopブランチに
pushしてmainにプルリクエストを出してください。
最もうまくいった方法
Slide 44
Slide 44 text
どちらにもアクセスできる
Slide 45
Slide 45 text
ダッシュボードに適用
期待するレスポンス
期待するレスポンスを受け取ってから
ダッシュボードに反映した方がエラーが少ない
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
変数が入っていなかった
Slide 48
Slide 48 text
かなりいい感じじゃないか？？
ここから、実際にダッシュボードを運用しながら修正を繰り返す
Slide 49
Slide 49 text
最終的にこんな感じに
なりました
Slide 50
Slide 50 text
やってみて学んだこと
ラフ図でいいのでインプットとなる図を書いた方がいい
クエリの構文エラーが多かったので、データソースに直
接クエリできる場合は事前にクエリするとエラーが減る
プルリクのプレビュー機能は細かい修正は分かりづらい
一度では絶対に良いダッシュボードは作れないので、
ダッシュボードの運用→改善のライフサイクルを回す
Slide 51
Slide 51 text
+α
Grafana Git syncとClaude Codeだけではなく
Grafana MCPも合わせると、ダッシュボード構築が捗るかも！？
https://speakerdeck.com/hamadakoji/grafana-mcpsabaniyoruaiezientojing-you-
denografanadatusiyubododong-de-sheng-cheng
Slide 52
Slide 52 text
一番大事なこと
Git Syncは実験的な機能なので、実稼働環境
での使用はお勧めされていません！！！
Slide 53
Slide 53 text
おしまい