Gemini

geminiによるダッシュボード作成がうまくいったので、2008年のMTOS乗り換え検討以来の懸案にも活用してみた。

この仕組みをイラスト1枚の扉絵にして

もう一度rNoteを立ち上げて移行する方法を相談してみたところ、やっぱりXML記事をMarkdownに変換して静的サイトジェネレーター(SSG)で構築するのが良さそうだ。というわけで2019年4月に着手したHugoに再トライ。

テーマはひとまずMainroadを選択。さらにArchive記事を年月日で絞り込めるようにレイアウト/テンプレートを補強し、大枠はいい感じになったものの、肝心の画像と参考リンクのスタイルがどうにも以前のサイトとイメージが乖離してしまうので、記事を真面目にMarkdownに変換するのは止めて、ひとまず記事内のHTMLはそのまま残す方針で再公開を優先。

vpsにアップロードすると記事内の画像や参照リンクURLが/images/～と絶対パスになってしまう（/~yanoが入らない）問題があって、hugo serverで起動してhttp://localhost:1313/で確認ケースと折り合いを付けるのに四苦八苦したのだが、「記事内のHTMLはそのまま残す」方針がHugoの仕様と相容れないらしい。

いずれ自家製AIに喰わせて遊ぼうと思ったら、画像や参照リンクも含めてMarkdownのお作法に従うのがいいんだろなぁ、というのもなんとなくわかったので、今回はMarkdown変換スクリプトで強制的にURLに/~yanoを入れてしまう方向で着地。

2019年4月のHugo着手から7年余りの紆余曲折を経てようやく結実。2024年9月に一時閉鎖したサイトもひとまず再開できた。

参照

The world’s fastest framework for building websites https://gohugo.io/

Hugo Themes

GitHub - Vimux/Mainroad https://github.com/Vimux/Mainroad/

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

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

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/

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 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、高いだけのことはある、のかも。