スマートメーターモニター

バイブコーディングgemini編

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

gemini版のダッシュボード
gemini版のダッシュボード

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/

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/

Perplexity https://www.perplexity.ai/

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

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

Perplexity https://www.perplexity.ai/

Gemini https://gemini.google.com/

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

ChatGPT https://chatgpt.com/

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

Claude Code

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

オシャレなダッシュボード
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、高いだけのことはある、のかも。

参照

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

SIOS Tech Lab https://tech-lab.sios.jp/

みのるん https://qiita.com/minorun365

とまだ@AI 駆動開発教育者 https://zenn.dev/tmasuyama1114

Perplexity https://www.perplexity.ai/

Gemini https://gemini.google.com/

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

ChatGPT https://chatgpt.com/

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