ダッシュボード - Yano's digital garage

先月作ったスマートメーターのダッシュボード。

一ヶ月あまり使ってみた感触をフィードバックする仕上げフェーズを実施。

２連円弧メーター(A,W)は基本的に同じ挙動しかしないので、電力(W)は邪魔かもな？と思い、電流(A)のみ水平ゲージに整理し、電力(W)は値だけ控えめに表示。

時系列グラフも、設定時間幅のままスクロールして過去に遡れるようにし、スケール調整も2段階に抑制。

見やすさ優先の調整を行い、万事OK。

最終的なGemini 3の完成版コードは670steps/25KBとなった。

まとめで「改めてゼロから作る前提でAIに投入するためのプロンプト」を生成し、終了。

Tapo P110MによるBルートアダプターのデイリーRebootで欠測ロスも解消した雰囲気で、冷房が本格稼働して電力消費の上がる夏に向けて、なかなかいい感じだ。

参照

Google Gemini https://gemini.google.com/

Wikipedia https://ja.wikipedia.org/wiki/

Perplexity Proの無料期間が6月で終了する。

2,950円/月、2万9500円/年で継続する必要があるかどうか判断するために、本腰入れて4月に契約したGoogle AI Plus（LLMモデルはGemini 3）を試す事に。

そんなわけで、先週完成したスマメ電力ダッシュボードについて、Perplexityでプロンプトを逆生成しGoogle Geminiにコピペしてみた。

さすがに一発OKとはいかなかったが、3ターンほどでやり取りして完成。細部の出来栄えはClaudeのSonnet 4.6に分があるものの、こっちを先に見ていれば文句なしの合格だろう。ちなみにGemini 3の生成コードは500steps/20KB、Claude Sonnet 4.6のコードは530step/24KB。

せっかくなので、別に40Aを超えたらGoogle Homeに警告アナウンスをキャストするスクリプト作成にもトライ。NestHubでのダッシュボード＆警告表示はNestHubのブラウザJavascript対応がうまくいかずひとまず諦めたが、Google Home Miniへの音声キャストだけなら3～4ターンほどであっけなく完成した。

2017年11月にスマートメーターBルートを開通して8年以上経ってしまったが、奇しくも2016年5月のGoogle Home発売のアナウンスから10年目前なので、滑り込みセーフという事で喜びたい。

最後に「この一連のバイブコーディング作業を扉絵に」と頼んだところ、“バイブ"ではなく"ライブ"という文字が入ってしまい、わけわかめｗ

参照

ITmedia NEWS https://www.itmedia.co.jp/news/

Google Cloud https://cloud.google.com/

バイブコーディングの説明: ツールとガイド

Google Gemini https://gemini.google.com/

Claude https://claude.ai/

Anthropic https://www.anthropic.com/

Introducing Sonnet 4.6

Wikipedia https://ja.wikipedia.org/wiki/

9日、10日の続報。

ダッシュボード完成形 — Perplexity+Claude Sonnet 4.6

PerplexityでLLMモデルを「Claude Sonnet 4.6」に指定して「バイブコーディング」を続行。

PC、スマホ、タブレットで確認しつつ情報やレイアウトを整理し、時系列グラフの表示幅(時間軸)を選択できるようにしたら、情報が多すぎて縦画面では選択ボタンが表示されなくなった。

縦画面ではプルダウンにしたり、いろいろと試行錯誤していたら「データ取得エラー」となって何も表示されなくなってしまったのだが、

原因が分かりました。applyRangeUiMode() 関数が .range-desktop / .range-mobile クラスを探していますが、前のリファクタリングでそれらの要素を削除済みです。さらに re.sub で isDual を全置換した際にJSコードが壊れている可能性があります。

と自己分析。

申し訳ありません、次のターンで改めてファイル全体を整合性のとれた状態で再生成します。現状は複数回の差分編集が積み重なってJS内部に矛盾が生じています。一度クリーンなベースから書き直した方が確実です。続行してよいですか？

という提案に乗って続けてもらい、無事に回復。

…すごいな。

参照

Perplexity https://www.perplexity.ai/

Claude https://claude.ai/

Anthropic https://www.anthropic.com/

Introducing Sonnet 4.6

Wikipedia https://ja.wikipedia.org/wiki/

昨日の生成AIで作ったスマートメーターモニターがいきなりいい感じだった件。

ほぼ完成形のダッシュボード — Perplexity+Claude Sonnet 4.6

速攻でClaude Codeの無料分(5時間枠)を使い切ってしまったので、さてどうしたもんかと思ったのだが、Perplexityで使用できるLLMモデルに「Claude Sonnet 4.6」があったので、こいつを使ったところ手作業で修正する必要がないものがサクッと出来上がってしまった。

そんなわけで、Perplexityのチャットインタフェースで、２要素グラフの軸を入れ替えたり、スマートフォン向けに位置や大きさを微調整したり、例外表示を追加したり、要件をプロンプトして、ほぼ完成。

なるほど、これが「バイブコーディング」か…

参照

Claude Code https://code.claude.com/

Claude Code の概要

Perplexity https://www.perplexity.ai/

Google Cloud https://cloud.google.com/

バイブコーディングの説明: ツールとガイド

IBM https://www.ibm.com/jp-ja/

バイブコーディングとは

Perplexity https://www.perplexity.ai/

新しいSonarに会う 2025年2月11日

Gemini https://gemini.google.com/

Microsoft Copilot https://copilot.microsoft.com/

ChatGPT https://chatgpt.com/

Wikipedia https://ja.wikipedia.org/wiki/

仕事先での打合せの最中、「ところでClaude Codeって、どうですかねぇ？」と言われて、そういえば「基本的に有料プラン（ProまたはMax）が必要」という敷居にビビってClaude Code使ってなかったなぁ、と思い出した。

そんなわけで、遅ればせながらclaude.aiにアクセスし、アカウント作成。

四の五の言わず

スマートメーターの消費電力を出力したcsvファイルをWebUIに出力するpythonスクリプトを作成して。CSV並びは日時、電力量(W)、アンペア(A)、累計電力(Wh)で、電力量の時系列折れ線グラフと、直近のアンペアを表示する（40アンペア以上はレッドゾーンになるスピードメーターのような）円形メーターも付けて。ファイル名はコマンドライン指定で、15秒周期で自動読み直し再表示。TCPはany:8989で待ち受け(IPv6にも対応)して下さい。

というプロンプトを喰わせてみたところ、Claudeが一発で結構イケてるGUIを実装してくれて驚いた。

なんと、メーターにはイエローゾーンがあったり、時系列グラフも電力量とアンペアの２軸表示。プロンプトに無い最大値や累計値、一覧リスト表示など至れり尽せりだ。おかしいところはメーターの円弧角度がおかしいのと、文字が被って見づらいくらいか。

そんなわけで、Perplexity、Gemini、Copilotでもやって比較してみた。

PerplexityのSonarは最大値や累計値、一覧リスト表示などもあり、見た目にもClaudeに近い凝った実装だが、グラフのスケールがおかしかったり円弧の接合点が上下逆だったり針が動いてなかったり問題はあり、ちょっと残念な感じ。

Geminiは必要十分なシンプル実装(最初は100行程度だったが、streamlit pandas plotlyを使わなくして143行になった)で、直近値の情報や生データリスト表示もあって悪くない。

Copilotも200行程度のシンプルな実装で、Geminiに近いが、一覧リスト表示が無い。

ChatGPTは軸ラベルすら無い最もシンプルな見た目で、メーターも針があるが文字がなく「忠実に言われたことだけやりましたが何か？」という潔さを感じる結果だが、ここから実装を積み上げて行くのだ～と言われると途方に暮れそうだ。

なるほどClaude Code、高いだけのことはある、のかも。