バイブ コーディングしたら一日でマインドマップ アプリが作れてしまった(Google AI Studio)

投稿日:

Google AI Studioを使うことで、自然言語だけでマインドマップ アプリが作れました。バイブ コーディングというやつですね。

昔、簡単なプログラムを作ったり、少々複雑なOfficeマクロを作ったりしたことはありますが私はプログラマーではないです。

出発点

NotebookLMで出力したマインドマップは画像形式でしか出力できません。せっかくのマインドマップは編集したい。そこでGoogle AI Studioで、マインドマップ画像を読んでOCRしてMarkdownにするアプリを作りました。それがあまりに簡単にできたので、次を試したくなりました。

これならマインドマップ アプリそのものを作れるのでは?

Markdownのファイルを読み込んでマインドマップとして表示するまではあっというま。以下はGoogle AI Studioが自動生成したサンプルのマインドマップです。表示だけでまだ編集機能はありませんでした。

かなり初期。AIアシスタント機能は頼んでないのについてきた

編集機能の実装には一日かかりました。そしてまだバグや未実装の機能もあります。しかし十分に実用になる。

現時点

デバッグに時間を使うのではなく、ノードの配置を美しく見えるよう調整して、楽しいダークテーマ配色や操作時のエフェクトを考えるほうに注力できます。CyberpunkとかRoninとかZen DarkとかはGoogle AI Studioが自動で作ったやつですが。

ターン制のシヴィライゼーションVIにハマったときみたい。コーヒーを入れたり歯を磨いたりしている間にコードを書いてくれる。時々「できたのか?」とGoogle AI Studioに確認しないといけませんが。

そしてコーディングの知識はほとんど不要ですが、注意点はあります。

まずやりたいことをはっきりさせること。

何をやりたいか→見た目が良く、操作感が良いマインドマップ アプリ

(操作感は最初求めていませんでしたが、「見た目の良さ」があまりに簡単に実現してしまったので)

そしてやりたいことを言語化し、的確な指示を出す必要があります。何かおかしいと思ったらひたすらダメ出ししていく。英語でプロンプトを書く必要はないはずですが、英語で書けば勉強にもなります。そして英語のほうが日本語より論理的なのでたぶんうまくいきます。

Google AI Studioに標準装備されているもの:ウェブアプリなのでプラットフォームは問わない。サンプルやカラーパレットを含め、いい感じのデザインを最初から分かっている。

AIアシスタント機能は頼んでないのについてきました……。AIを使いすぎるとGoogleに課金することになります。

気づき

アプリはただ動くだけでなく、気持ちよく動かなければならない。そしてバグつぶしはGoogle AI Studioでも時間がかかる。コーディングの基礎知識はあると役立ちます。問題発生時に何がうまくいっていないかわかるので。プログラミング教育は無駄ではないです。

API上限に達したのでひとまず別のことをします。

必要なアプリは自分で作れる時代になったんですねえ。某マインドマップ アプリの課金が不要になりそう。たぶんやめます。SFプロトタイピングのワークショップするとき、マインドマップ アプリを自前で提供できるかな?

コメントを残す