AI×開発　没入型体験施設「ワンダリア横浜」のアプリ開発

AI×開発 没入型体験施設 ワンダリア横浜のアプリ開発 ソリューション事業本部 菊地 勇輔

菊地 勇輔 ハンドルネーム: ラビ ワンダリアアプリ エンジニアリード 2023年4月 株式会社ディー・エヌ・エー 入社 (23新卒) 2023年7月 大規模基盤スマートフォンSDKの開発へ 2024年6月 アプリ開発エンジニアとしてワンダリア事業グループ へ 2025年4月 ワンダリアアプリのエンジニアリードに

SUBTITLE 目次 1. ワンダリア横浜とアプリの概要 2. アプリのコアバリュー 3. オンデバイスAIの課題と工夫 4. 両OS開発における工夫 5.生成AIを使ったアプリ開発

SUBTITLE ワンダリア横浜

ワンダリア横浜のコンセプト だけど⾒えにくい。 気づきにくい もともとの世界にワンダー[不思議体験] は満ちあふれている ワンダリア横浜 ワンダーを可視化できる世界、 それがワンダリア横浜 ⾒⽅が変われば、それは「映え」るものということ 広⼤な森林や神秘的な深海など6つのゾーンで映像だけでも楽しめる没⼊体験 いつも⾒ているものであっても驚きに変わる ＋ ワンダリア横浜を120%楽しむための公式アプリ 5

ワンダリアアプリについて SUBTITLE ワンダリアアプリは体験をさらに深めるための 施設公式オリジナルアプリです ● スマホをかざすだけで楽しめる体験 映像空間にスマホをかざすだけで、⽣き物ごとの情報を表⽰ しばらくかざすとカードとして後で⾒返すことができるように ● 能動的に楽しめるアプリ機能 能動的に探していくとミッションを達成でき、良いことがあるかも？ ● ⾃分だけの映像体験を学びへつなげる アプリでゲットした⽣き物の記録を後から⾒返すことで ⽣き物の情報（ワンダリアチップス)を知ることができ学びへとつなげます

SUBTITLE アプリのコアバリュー

アプリのコアバリュー SUBTITLE アプリで ⽬指した コアバリュー 目の前の生き物にスマホをかざすだけで 直感的に楽しめる体験 映像体験を主役に据え それをさらに深める楽しみ方を提供 この“発⾒する”という体験を⽣み出すために 物体検出AIを利⽤することに決定

物体検出の手法の検討 SUBTITLE サーバーサイド推論 オンデバイス推論 画像データ カメラ画像 AI推論 推論結果 検出結果 実機からAIの動くサーバへ 画像を転送し推論を行う方式 サーバーを経由せず、ユーザーの スマートフォンで直接AIを動かし 推論を行う方式

SUBTITLE サーバーサイド推論の限界 自ら“発見する”という体験のためには 物体検出は一瞬であってほしい！ 👉 検出完了を100ms以内が目標 ※Jakob Nielsenの法則* における「自分が操作 していると感じる限界値」を目安 サーバーサイド推論 画像データ AI推論 サーバー推論では画像転送の時間 で100msを超過 検出結果 サーバー推論ではコアバリューの実現が難しい... * 10 Usability Heuristics for User Interface Desi https://www.nngroup.com/articles/ten-usability-heuristics/

SUBTITLE 解決方法 オンデバイスAIを利用 することを決断 オンデバイスAIの利点 カメラ画像 推論結果 ● 外部への通信が発生しない ○ 転送時間が0に！ ○ ユーザーの通信量の削減にも ● 来館者のカメラの画像・動画を外部に送信しない ○ プライバシーの観点で安全

SUBTITLE オンデバイスAIの課題と工夫

オンデバイスAIを使う際の課題 SUBTITLE 処理負荷 の問題 iOS/Android 固有の 処理が多い IOSは⽶国その他の国におけるCiscoの商標または登録商標であり、ライセンス許諾を受けて使⽤されています。Android は Google LLC の商標です。

推論時間の削減 SUBTITLE AIの計算やカメラでの処理など負荷が かかるアプリ構成 処理負荷 の問題 ● 端末の発熱 ● バッテリーの消耗 ● 最悪動作困難 ○ 特にスペック差のある Android側は注意が必要 モデルの選定から処理の最適化まで必要

モデルの選定 SUBTITLE モデルは特に重要、いくつかのモデルの中で最終的に以下を検討 モデル名 アーキテクチャ 処理精度 DEIM v2 (Femto) YOLOX (Nano) Transformer系(現代的、高精度) CNN系(古典的) 高(AP 31.0) 中(AP 25.8)

モデルの選定 SUBTITLE 結果：YOLOXはDEIM v2より10倍高速(iPhone 14で計測) - AI⽤アクセラレータ (NPU)の利⽤率が鍵 - 多少の精度を犠牲にしても処理負荷を優先しYOLOXを採⽤ DEIM v2 (Femto) YOLOX (Nano) 処理時間 23ms 1.5ms 動作効率 中〜低 (GPU 7割,NPU2割,CPU 1割) 最高 (全て NPU実行) アーキテクチャ

オンデバイスAIの工夫 SUBTITLE ● iOS: ANE(NPU) への最適化 ○ 特定の演算子でつまずくケースがある ■ デコード層の構造チューニングを実施 ● Android : 端末スペックの差が激しく、思ったようにハードウェアアク セラレーションが効かない ○ ○ YOLOXのActivation層のチューニング PreprocessのGPGPUによる高速化 ● AIの学習過程で工夫 ○ 学習データのホモグラフィー変換 ○ ハイパーパラメータの調整 ○ 場所ごとにモデルを分割

SUBTITLE 両OS開発における工夫

オンデバイスAIアプリ開発の課題 SUBTITLE 処理負荷 の問題 iOS/Android 固有の 処理が多い

アーキテクチャ選定 SUBTITLE 当初Flutter™で開発を検討 iOS/Android 固有の 処理が多い - 両OSを単⼀コードで開発し 効率化するため プロダクトの技術検討 - AI⽤のカメラデータへのアクセス - AIの処理をNative Libraryで⾼速化 - iOSのLiquid Glass対応 OS固有の処理のしやすさを優先し OS別(Swift UI/Compose UI)での開発を採⽤することに決定 Flutter and the related logo are trademarks of Google LLC. We are not endorsed by or affiliated with Google LLC.

OS別の開発の問題 SUBTITLE Android と iOSでそれぞれの担当が作成するチーム構成 - 仕様書の解釈ミス、OSによる事情等で実装ずれが発⽣ - 過去に別プロジェクトで問題になることも OS固有機能を利⽤しないロジックだけでも共通化できれば...

Kotlin ® Multiplatform(KMP)の採用 SUBTITLE KMPはAndroid/iOS の間のビジネス(業務)ロジック共通化が 可能なライブラリ ● AndroidからはそのままKotlinのコードとして ● iOSからは Frameworkの形として利用可能 OS固有機能は使いやすく、ロジックの共通化を両立可能に！ Swift UI(iOS)実装 iOS専⽤ ロジック Compose UI(Android)実装 Kotlin Multiplatform Android 専⽤ロジック

SUBTITLE 生成AIを使ったアプリ開発

Devinについて SUBTITLE ● Slackで与えた指⽰タスクを⼀度受けると 最後まで⾃律的に完遂させる AI SoftwareEngneer ● 内部にVMを持ちテストを⾃律的に⾏い、安定した品質で コードを出⼒する ● 曖昧さの少ない作業に向いており作業の並列作成が得意

Devinの活用 SUBTITLE どちらかのOSで UIを作成 完成したコードを Devinに読み込ませる 別OS⽤のコードが作成 複数のリポジトリ全体を横断して 双⽅にポーティング iOS Android

Devinの活用 SUBTITLE iOS 開発 今までの 開発 ● UI部分のAI移植により ● 実装速度が実質2倍へ ⼈の⼿による編集や レビューを経ても QA Android開発 全体で170%の これからの 開発 ⽣産性を達成 Android 先⾏開発 iOS 変換 開発⾃体にも⽣成AI を活⽤ QA ● コスト⾯でも有利に！

採用の利点 SUBTITLE ● KMPは生成AIと相性が良い ● Kotlinの型定義や自動生成が堅牢 ○ 自動的にガードレールとして作用しAIで高品質な コードを生成しやすい ● UIと分離することで単体テストの記述、実行が容易 ○ 自律的にTestをVMで実行できるDevinと相性が良い

開発が迅速化による問題 SUBTITLE 開発が迅速化 ● 前述のDevin活用 ● Claude Code, Cursorなどの活用 両OSでエンジニア6名程度の小規模開発のためコードレ ビューで負担に →コードレビューの負荷を下げる方策を考えることに CursorはAnysphere,inc.の商標です。Anthropic、Claudeは、Anthropic, PBCの米国およびその他の国における商標または登録商標です。

生成AIで一次レビュー SUBTITLE 3つのAIによる多角的な １次レビュー エンジニアの注力ポイント Devin 基礎チェック後の 本質的なレビューに特化 PR Agent 設計意図の担保 技術負債の低減 - アーキテクチャ ガイドライン コーディング規則 をコード内で明文化 Gemini 抽象の精査

SUBTITLE まとめ ワンダリアアプリを直感的に楽しめる体験のために AIをフル活用 AI オールイン オンデバイスAI 開発のスピードと 品質の確保 オンデバイスAIの 特性とそれに合わせた 開発 オンデバイスAIアプリ における 開発⼿法 とAIによる効率化

SUBTITLE