マインドマップ型TODOアプリ。CanvasとSVGで創る「ラテカラー」な無限キャンバス
デモページを開く
実際にアプリを全画面で操作できるデモページです。新しいタブで開きます。
（※デスクトップ表示推奨）
デモを開く
今回は、最新のアシスタント「Antigravity（Gemini 3.1）」に「TODOリストを作って」とお願いしてみたら、ちょっと特別なアプリができあがった、というお話です。
ただのTODOリストではありません。「マインドマップ」のように情報を繋げていける、視覚的で直感的なTODOアプリをAntigravityが提案・構築してくれました。
私のようなおっさんになると、箇条書きのリストだけだと「あれ、これ何だったっけ？ふぇ～～」と忘れてしまうことが増えました。「もっと映像や感覚で残しておきたい、、、今やったことを残しておきたい」とAntigravityに伝えたところ、見事に応えてくれたのです。
たった一つのHTMLファイルで完結する「ワンページアプリ」という構成で、Antigravity（Gemini 3.1）がどのようにしてこれを作り上げていったのか、その過程を振り返ってみたいと思います。結果から言うと、かなり面白いものができました。最新の技術はすごいですねぇ～～～。
💡 【すぐ使えるお裾分け】
ちなみに、このアプリは完全に独立して動くため、以下のタグを1行コピペするだけで、どんなサイトやブログにもそのまま埋め込んで使うことができます！
<iframe src="https://yosuke4061.com/midori313/todo.html" width="100%" height="600" style="border: 1px solid #ccc; border-radius: 20px; box-shadow: 0 8px 32px rgba(0,0,0,0.1);" allowfullscreen></iframe>
☕ 普段使いできる「ラテカラー」のTODOアプリ
まずは、実際にAntigravityが生成してくれたものをベースに調整したアプリを触ってみてください。
どうでしょう。少し、温かい感じがしませんか。
普通、TODOアプリというと白と青の冷たい事務的なデザインが多いですよね。
私がAntigravityに「毎日見ても疲れないような、OLさんが好むラテカラーやグレージュ（くすみカラー）にして」と指示を出したところ、見事にくすみピンク（ダスティローズ）やセージグリーンを使った配色を生成してくれました。
背景はミルクティーのような柔らかなグラデーション、そして少し透ける「すりガラス」風のパネルデザインも、AntigravityがサクッとCSSで表現してくれたものです。
これだけでも、開いた時のモチベーションが全然違います。言葉のニュアンスをそのままデザインに落とし込むAntigravityのパワーを感じます。もちろん完成までには、実際にさわってみて「もう少しここをこうして」と思い通りの形になるまで対話を重ねて修正を加えています。
🧩 Antigravityとの核心的なやり取り：無限キャンバスとSVGの葛藤
今回のアプリの最大のポイントは「無限のキャンバス」です。
ドラッグでどこへでも移動できて、ズームもできるというUIです。
Antigravityに頼めばワンアクションで完成するわけではなく、開発プロンプトに対してどのようにコードを生成し、どこでつまずくかを予測しながら指示を修正していく過程が必要でした。この「無限キャンバス」をどう実装していったのか、そのステップを見てみます。
- Antigravityの最初の試行（レイアウトのカオス）:
最初は、単に要素を絶対座標で配置するだけのコードをAntigravity（Gemini 3.1）は生成しました。しかしこれだと、画面外に出た要素がスクロールしても見えず、ブラウザのスクロールバーとも干渉してレイアウトが崩壊してしまいました。自動生成のUIでは、こうしたレイアウト崩壊は結構起こりやすい初期症状です。
- 2回目の試行（CSS Transformの魔法へと軌道修正）:
そこで、「個別の要素を動かすのではなく、全体をカメラ（視点）のように動かす仕組みにして」とアプローチを変えるよう指示を出しました。
するとAntigravityは、「DOMを生成して配置する」仕組みをベースにしつつ、全体を包む div に transform: translate(x, y) scale(z) を当てて、マウスの動きに合わせてビューポート自体を動かすという見事なコードを組み上げてきました。
画面上のマウス位置からズーム率を逆算してキャンバス上の正当な座標を求める複雑な計算も、正確に処理してくれました。
- 3回目の試行（SVGでノードを繋ぐ難関）:
無限キャンバスができたら、次はタスクの派生として「子タスク」や「ファイル」をぶら下げて、線で繋ぎたいと要望しました。
Antigravityがここで選択した手法が「SVG」です。HTML要素の裏に透明な <svg> レイヤーを敷き、要素の中心座標同士を計算してパスで結ぶという見事なアプローチでした。
// Antigravityが生成したupdateConnections関数 (一部抜粋)
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
// 親ノードと子ノードの座標を計算して、ベジェ曲線で結ぶ
const d = `M ${startX} ${startY} C ${startX} ${midY}, ${endX} ${midY}, ${endX} ${endY}`;
path.setAttribute('d', d);
path.classList.add('connection-line');
svgConnections.appendChild(path);
ただ、自動生成された初期コードでは「DOM（HTML要素）とSVGの座標がズレる」という不具合が出ました。そこに対しても、「リロード時に線の位置がおかしいので、再描画のタイミングを調整して」と的確な指示を出すことで、Antigravity（Gemini 3.1）が正確に修正を加え、安定した動作に到達しました。
🎯 期待を越える柔軟性：ドラッグ＆ドロップの世界
さらに「直感的な操作感」も要求してみました。
頭の中にあるタスクは文字だけでなく、「あの請求書のPDF」や「参考画像のスクショ」といったファイルそのものがタスクの一部だったりします。
そこで、「キャンバス上のタスクにファイルを直接ドラッグ＆ドロップで紐付けられるようにして」と少し高度な要求をAntigravityに投げてみました。
驚いたことに、Antigravity（Gemini 3.1）はDrag & Drop APIを駆使し、タスクの近くにファイルをポンと投げ込むだけで、タスクのノードとファイルがSVGの線で結ばれる仕掛けを生成してきました。
「あ、この仕事にはこの資料が必要なんだな」と一目でわかるビューが、Antigravityとの対話だけで構築できるのは本当に気持ちいい体験です。
🧠 すべてはあなたのブラウザの中に（Local Storage）
そして、私が強く要望した要件が「サーバーやデータベースを使わずに、HTMLファイル1枚で完結させること」でした。
では、作成したタスクデータはどこに保存しているのでしょうか？
それはあなたの使っているブラウザの中です。
Antigravityは localStorage というブラウザの標準機能を使い、タスクを動かすたびに自動的にブラウザ内にデータを保存する仕組みを組み込んでくれました。
- メリット: 起動が爆速。サーバー代がゼロ。オフラインでも使える。
- 安心感: 誰かのサーバーにデータを送らないので、セキュリティ面でも最強です。
右上の「自動保存: ON」ボタンを見ながら、「あぁ、いま自分のパソコンの中に守られているんだな」と実感できる作りに仕上がっています。
🎁 そして、「お裾分け」
Antigravity（Gemini 3.1）との共同作業で生まれた一番面白い仕掛けがこれです。
このTODOアプリ、生成したコードがすべて1枚のHTMLファイル（todo.html）にまとまっています。
CSSもJavaScriptも、すべてその中に埋め込まれています。
だからこそ、こんなことができるんです。
そう、iframeを使って、ブログのページ内にそのまま埋め込めるんです。
もちろん、ファイルごとダウンロードして、自分のパソコンのデスクトップに置いておくこともできます。ネットに繋がっていなくても動きます。
「使ってみたいな」と思ったら、ただダウンロードするだけ。
インストールも、ログインも必要ありません。
📥 TODOアプリ（todo.html）のダウンロード
記事中で紹介したTODOアプリの実体ファイルです！
このファイル単体で動作するので、ご自身のPCのわかりやすい場所（デスクトップなど）に置いて、毎日のタスク管理にお使いください。
👇 ダウンロード（右クリックして「名前を付けてリンク先を保存」）
todo.html をダウンロードする
👇 そのまま別タブで全画面表示して使う
todo.html を全画面で開く
※ダウンロードした todo.html をブラウザ（ChromeやEdgeなど）にドラッグ＆ドロップするか、ダブルクリックで開くだけですぐに使えます。
まとめ
- 思考を予測するプロンプト: Antigravity（Gemini 3.1）に丸投げするのではなく、どのような手法を選び設計していくかを予測しながら細かく指示を出すことで、リッチなワンページアプリが完成する。
- UIデザインの言語化: 「ラテカラー」「すりガラス」といった感覚的な注文をAntigravityが見事なCSSに翻訳してくれる。言葉の選び方がUIデザインの鍵になる。
- ワンページアプリの可能性: 環境構築不要でHTML1枚にすべてを詰め込む「割り切り」が、開発プロセスを飛躍的に楽にしてくれる。
- 次のステップ: ノードが増加した場合はCanvas APIへの移行、画像などの保存容量が増えた場合はIndexedDBへの移行など、状況に応じた指示の切り替えが有効。
さらに深く学ぶには
もし良かったら、最初のデモの下にあるボタンから todo.html をダウンロードして、明日からのタスク管理に使ってみてください。
Antigravity（Gemini 3.1）が手伝ってくれたこの小さなアプリが、皆さんの毎日を少しだけ優しくサポートできれば嬉しいです。