Gemini

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

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

２連円弧メーター(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/

先日再公開したWebサイト。

rNote版のサイトとイメージが乖離してしまうと面倒なので記事内のHTMLをそのまま引き継ぐ形で構築したのが、リンク切れなど細かく確認チェックしたところ、実体パスが変わっていたり、エラーで変換漏れしている事がわかった。

詳しく言うと、rNoteでいうところのAnker:20171115_b_routeは、アンダーバーを使わないHugoではslug:20171115-b-routeになるらしいので、改めて「清く正しくMarkdownのお作法に従うべし」という考えに立って、今度はPerplexityでやり直し。

変換漏れは、slugの元ネタとなるAnkerが元々間違っていた(コピー元から派生した際の変更忘れ)事に起因する、slug重複による上書きと判明し、XML側のAnkerをファイル名に合わせて手動で訂正。

アンダーバー問題は内部参照リンクをスクリプトで変換する形で対応。

公開サーバにアップロードすると記事内の画像や参照リンクURLが/images/～と絶対パスになってしまう問題も復活したが、Hugoのテンプレートに清く正しくRelPermalinkやrelURLなどを盛り込む対処でOK。

Gemini版とは違うものの、Archiveを年月でドリルダウンする仕掛けもそれなりにできた。いずれにせよrNote版とは乖離しており、どっちが良いとも言い切れないのが悩みだが、レスポンシブデザインだったりユニバーサルデザインとか考えるとそのあたりに拘るのは時代的によろしくないのかもしれないなぁ、と理解。

yano@cometlake:~$ cd ~/hugo_site/
yano@cometlake:~/hugo_site$ source .venv/bin/activate
(.venv) yano@cometlake:~/hugo_site$ rsync -avu gt110b.local:~/public_html/entries/diary/* rnote_xml/; \
                                    rsync -avu gt110b.local:~/public_html/images static/;
(.venv) yano@cometlake:~/hugo_site$ python rnote2hugo.py -b "/~yano" -i rnote_xml/ -o content/post/
完了: 8667 件変換, 0 件エラー  →  content/post/
(.venv) yano@cometlake:~/hugo_site$ hugo
Start building sites …
hugo v0.161.0-98d396c16a07b51df06e7673d817a3880da6218d+extended linux/amd64 BuildDate=2026-04-28T11:46:32Z VendorInfo=gohugoio
～～
Total in 40521 ms
(.venv) yano@cometlake:~/hugo_site$ rsync -avu ./public/* vps:~/public.hugo.20260516/

前回ので10分以上かかっていた8,000件のbuild時間も40秒ほどに短縮されて、何より。

参照

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

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

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

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

公開サーバにアップロードすると記事内の画像や参照リンクURが/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/

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

Wikipedia http://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/

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