空間アプリ開発のフィードバックをCodexにするための抽象的なデザインツールの模索

Transcript

1. 空間アプリ開発 のフィードバック を Codex にするための 抽象的なデザインツール の模索 Copyright © 2026 Yorihiroi Frontend. カンソクインダストリーズ / よりひろいフロントエンド 原 一浩 (Kazuhiro Hara) / @kara_d visionOS Engineer Meetup： vol.13 ショートトーク会： オンライン
2. はなすひと 原 一浩 (Kazuhiro Hara) @kara_d カンソクインダストリーズ 代表 よりひろいフロントエンド 主催 Swift をやり始めたのは ChatGPT 登場以降 生粋の Open AI ファン (個人で Pro 課金) Photo by Rin Yano
3. 本日の構成 Seiro MCP、および今回発表するツールなど、AI x XR 向けの 開発ツールを作ってきた中で模索したことなどを話します AI 向けツールつくるときに参考になれば幸いです • Seiro MCP で日々つくっていました • 新しい不満 • Abstract Layout Tool (仮) を思いつく • DEMO • 今後の展開
4. Seiro MCP で日々つくっていました
5. ちょっとだけ Seiro MCP について紹介 https://github.com/karad/seiro-mcp • visionOS + Codex CLI / App の自律的コーディングを補助 ◦ MCP / Skills / CLI ◦ OSS で公開中 (MIT ライセンス) ◦ 昨年12月に最初のバージョンをリリース ◦ 現在 v0.4.0 • XcodeBuildMCP があったが、自分の環境では動作しなかった ◦ 空間コンピューティングアプリの開発に特化したシンプルなものを作ろうとおもいたつ • 2月に本家からも Xcode MCP が出た ◦ 今企画したら、作り始めないかもしれない みんなの ★ まってるぜ!!
6. Seiro MCP はこんなパートを担当 • Codex CLI / App で MCP 経由にて visionOS プロジェクトの自動ビルド • 通常のエラーだけでなく、 詳細なエラーも取得可能 • Skill や CLI ツールもあり
7. Codex + Seiro MCP で UI スタディ
8. Codex + Seiro MCP で UI の実装思索を続けた
9. 新しい不満
10. 新しい不満 (1) 「これができたら」ができると更に先があることに気づく Seiro MCP の場合… • 抽象的なエラーが発生するとAIはどうしていいかわからなくなる ◦ より詳しいログを掘りにいく ことで解決した • 同じようなエラーが何度も起き、似たような問題を再解決する ◦ 同じミスを何度もするし、起きるミスは 偏りがある ◦ これらを毎回エラーのたびに行っている • 解決のノウハウを集約できないものか、が今の課題の一つ 次期 Seiro MCP で対応していく
11. フィードバックループの欠点 • AIが正しい状態を把握できているが、実装上は間違っている場合に フィードバックループが機能する • そもそもAIが正解を理解できていないと正解にたどり着けない • 空間コンテンツは指示自体、結構難しい ◦ 小説家とかなら得意かもしれないが空間に関する描写は難しい ◦ 修正指示もむずかしい
12. 新しい不満 (2) 3D 空間におけるビジュアル面の 指示出しが結構むずい ボタンが水平に置かれているが これを前から押すみたいにすると… うまくいかなかったりする これが今回のテーマ
13. とにかく調整を楽したい …
14. Abstract Layout Tool (仮) を思いつく
15. Abstract Layout Tool (仮) ってどういうものか • AI とのコミュニケーションに 特化したフィードバックツール • MCP サーバ、Skills、 デスクトップアプリ、 SQLite で構成 • 細かな形状の指示はせず 抽象的なレイアウト指示に特化 • ラフにさくっと使うようなもの
16. Abstract Layout Tool (仮) の利用スタイル 1. AI からレイアウトを保存 (MCP 経由) 2. デスクトップアプリで レイアウトを確認、編集 a. 位置 b. 回転 c. サイズ d. フリーなコメント 3. レイアウトを保存すると リビジョン管理される 4. AI は編集後レイアウトを読み込みが 可能 (MCP 経由)
17. どんな感じでフィードバックするのか
18. 1. AI からある状態のレイアウトを保存 Codex より Skill を使ってレイアウトを保存指示する
19. 2. デスクトップアプリでレイアウトを確認、編集
20. 3. AI は編集後のレイアウトを読み込んで変更 レイアウト ID や最新のリビジョン ID を AI は自動で取得可能
21. なぜ抽象的なデザインツールなのか
22. なぜ抽象的なデザインツールなのか • 形状の抽象化をすることでツールのシンプルさを保てる • 抽象的なレベルのデザインさえ指摘できれば OK というモチベーション • 実装と分けることで AI が正解と思っている部分の一部を抽出できる • つまり、コードに定義されていないレイアウトでもフィードバックできる ◦ アニメーション移動後の想定レイアウト ◦ ユーザーアクション後に表示されるオブジェクト ◦ まだ実装されていない要素を仮に配置 • 抽象化するとプラットフォームに縛られなくなるというメリットも ◦ visionOS 用だけど WebXR 用ツールとしても使えた
23. visionOS だけでなく WebXR も
24. visionOS だけでなく WebXR も • 個々のオブジェクトの詳細な描画ではなく、 抽象的なレイアウト情報を扱うため、プラットフォームを選ばない • JSON でのやり取りな上に、解釈するレイヤーが AI なので visionOS だけでなく WebXR でも利用可能 (原理的にはたぶんあらゆる XR 系で利用可能なはず) • MCP や Skills という標準技術を利用
25. DEMO
26. visionOS 向け開発 3つのオブジェクトが並んで 配置されているプロジェクトを用意
27. WebXR 向け開発 visionOS のプロジェクトと 同じようなプロジェクトを用意 Three.js 製
28. 今後の展開
29. 今後の展開 • 画面をもっとポップでわかりやすくする • 導入方法を簡単にする • ドラッグやピンチなどで直感的にフィードバック • セキュリティ周りの強化 • ドキュメントの整備 • OSS で公開予定
30. みなさんも 自分なりの 課題をみつけたら ツールにしてみよう !!
31. 空間アプリ開発 のフィードバック を Codex にするための 抽象的なデザインツール の模索 Copyright © 2026 Yorihiroi Frontend. カンソクインダストリーズ / よりひろいフロントエンド 原 一浩 (Kazuhiro Hara) / @kara_d visionOS Engineer Meetup： vol.13 ショートトーク会： オンライン ありがとうございました