【Update】 UIを刷新し、大型アップデートを行いました！
以前記事にした自作アプリ『Architecture Sandbox』ですが、 この度、UIの刷新と機能追加を行いました！
フォントやデザインを整えて見やすくしたほか、機能の追加に伴い「操作ガイド」も実装しました。 「使い方がわからない！」という方は、画面右上の「操作ガイド」ボタンからいつでも確認できるので、安心して触ってみてください。
はじめに：貧乏性開発者の新たな挑戦
以前、『「システム設計の練習場所がない！」と嘆くのが嫌で、RustとAIで『最強の壁打ち相手』を自作した話』という記事を書きました。
初めて5件を超えるいいねをいただいて非常に励みになっています！このアプリの機能追加を考えている中で、開発者の私には新たな悩みが生まれていました。
- 「ユーザーが作ったシナリオ、共有できなくない？」（DBがないから保存できない）
- 「VPCとかAZとか、枠で囲いたくない？」（コンポーネントの親子関係が欲しい）
これらを解決するためにアップデートを行ったのですが、その裏側には「文字数制限」と「月額200ドルの壁（と嘘をつくAI）」との戦いがありました。
今回は、そんな泥臭い実装の裏側を共有します。
戦い1：React Flowの「169ドルの壁」 vs Geminiの幻覚
「VPC」が欲しいだけなのに
AWSの設計図を描くなら、「VPCの中にSubnetがあり、その中にEC2がある」という包含関係（ネスト）の表現は必須です。
私が使用しているライブラリ「React Flow」には SubFlow という機能があり、これを使えば実現できそうでした。
「なるほど、公式のサンプルコードを見て実装するか」と思い、ドキュメントを開いたその時です。
……はい？
「親ノードに合わせて自動リサイズする」とか「子ノードを親の中に封じ込める」といった実用的なサンプルコードを見るには、月額3万円近いサブスクが必要だったのです。
個人開発で払える金額ではありません。
AIに頼るも、嘘ばかりつく
「Pro版のコードが見れないなら、AIに書いてもらえばいい」
そう思い、いつも通りGeminiに実装を依頼しました。しかし、ここからが本当の戦いでした。
React Flowの SubFlow や Nesting に関する実装は複雑で、Geminiに聞いても「存在しないプロパティ」を使おうとしたり、「動かないロジック」を自信満々に提案してくるのです。
「そのAPIはv11にはないよ」「動かないよ」と指摘し、エラーログを食わせ、修正させる……というAIとの泥沼のレスバトルが続きました。
正解のコードが見えない中で、AIの幻覚（ハルシネーション）と戦いながら、動くコードを模索し続ける作業は、ある意味でゼロからコードを書く以上に精神を削られる作業でした。
結果として、なんとか「親ノードへの吸着」や「自動リサイズ」が動くようになりましたが、これは私の技術力というより、諦めずにAIにプロンプトを投げ続けた執念の成果です。
戦い2：DBなしで「データ共有」を実現するまでの右往左往
保存できないなら、URLに埋め込めばいいじゃない
次に「シナリオ共有」です。DBがないので、「設定データを全部URLパラメータに埋め込んで共有する」というアプローチを取りました。
しかし、ここでも壁にぶち当たります。
失敗1：圧縮してもX（Twitter）に入りきらない
最初は単純に、「JSONデータを lz-string というライブラリで圧縮してURLに乗せればいいや」と思っていました。
しかし、システム設計のデータは巨大です。ノード座標、ラベル、接続情報……圧縮してもURLは数百文字になり、X（旧Twitter）の投稿文字数制限を余裕でオーバーしました。
失敗2：情報を減らしたら「再現」できなくなった
「なら、URLに含める情報を減らせばいい」
そう考え、座標データなどを削ぎ落とし、最低限の情報だけをパラメータに含めるようにしました。
しかし、テストしてみると「共有されたURLを開いても、元の図と同じにならない」という事態が発生。
自動配置ロジックでズレたり、ユーザーのこだわりポイントが消えたり……。「設計図の共有」としてこれでは本末転倒です。
最終解：Rustバックエンドを経由してTinyURLへ
「すべての情報を残したい。でもURLは短くしたい。でもDB代は払いたくない」
行き着いた答えは、「外部の短縮URLサービス（TinyURL）を使う」でした。
ただし、フロントエンドから直接APIを叩くとAPIキーが漏れるし、CORSエラーも面倒です。
そこで、Rustバックエンド（Axum）にプロキシ機能を持たせました。
- フロント（React）から、巨大なJSON設定データをRustサーバーに投げる
- Rustサーバーが、TinyURL APIを叩いて短縮URLを取得する
- 短縮されたURLをフロントに返す
これなら、完全なデータを保持したまま、SNSでシェア可能な短いURLを生成できます。
もちろん、自前のDBは使っていないのでランニングコストはゼロです。
今後の展望
AIとの戦いやコストとの戦いはまだ終わりません。今後は以下の機能実装を予定しています。
-
接続線（Edge）の表現力強化:
ただ線をつなぐだけでなく、「HTTPS」「gRPC」といったプロトコルのラベル表示や、同期/非同期通信での線の種類の使い分け（実線/点線）を実装し、より詳細な設計ができるようにします。 -
設計図の画像エクスポート:
現在はURL共有のみですが、設計したキャンバスをPNGやJPG画像としてダウンロードできる機能を追加し、ドキュメント作成やSNSシェアをさらに手軽にします。 -
テンプレート配置機能:
「Web3層構成」や「サーバーレス構成」など、よくあるアーキテクチャパターンをワンクリックで配置できるようにし、初学者のサポートを強化します。
まとめ
- 月額200ドルのサンプルが見れないので、幻覚を見るAIと戦いながら実装した
- DB代を払いたくないから、試行錯誤の末にTinyURLプロキシを実装した
振り返ってみると、「お金がない」「情報がない」という制約のおかげで、React Flowの挙動や外部API連携の実装に詳しくなれました。
もし最初から潤沢な予算があったら、ただのライブラリのコピペで終わっていたかもしれません。
そんな「貧乏性」と「執念」でアップデートされたArchitecture Sandbox、ぜひ遊んでみてください。
現在も機能の拡張などをしながら自分で遊んでいるので、バグって動かないことがあってもご了承ください🙏
みなさんの作った「最強のアーキテクチャ」の挑戦状（URL）、お待ちしています！