Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CA.swift19 恋するAIアプリ開発の裏側
Search
Osaka Miseri
April 15, 2024
Programming
1
470
CA.swift19 恋するAIアプリ開発の裏側
Osaka Miseri
April 15, 2024
Tweet
Share
Other Decks in Programming
See All in Programming
PicoRubyと暮らす、シェアハウスハック
ryosk7
0
210
asdf-ecspresso作って 友達が増えた話 / Fujiwara Tech Conference 2025
koluku
0
1.4k
ATDDで素早く安定した デリバリを実現しよう!
tonnsama
1
1.8k
return文におけるstd::moveについて
onihusube
1
1.4k
ESLintプラグインを使用してCDKのセオリーを適用する
yamanashi_ren01
2
230
週次リリースを実現するための グローバルアプリ開発
tera_ny
1
1.2k
Запуск 1С:УХ в крупном энтерпрайзе: мечта и реальность ПМа
lamodatech
0
940
Azure AI Foundryのご紹介
qt_luigi
1
180
php-conference-japan-2024
tasuku43
0
430
QA環境で誰でも自由自在に現在時刻を操って検証できるようにした話
kalibora
1
140
はてなにおけるfujiwara-wareの活用やecspressoのCI/CD構成 / Fujiwara Tech Conference 2025
cohalz
2
2.7k
サーバーゆる勉強会 DBMS の仕組み編
kj455
1
300
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Facilitating Awesome Meetings
lara
51
6.2k
Measuring & Analyzing Core Web Vitals
bluesmoon
5
210
The Invisible Side of Design
smashingmag
299
50k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.2k
Gamification - CAS2011
davidbonilla
80
5.1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
173
51k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
19
2.3k
A better future with KSS
kneath
238
17k
Building an army of robots
kneath
302
45k
How to train your dragon (web standard)
notwaldorf
89
5.8k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Transcript
CA.swift #19 Osaka Miseri 恋するAIアプリ開発の裏側 1
発表中のリアクションは #ca_swift をつけてツイート🔥 🙌 わいわいしよう 🙌 2
自己紹介👤 プロフィールを見る 逢坂美芹 逢坂 美芹 / Osaka Miseri 株式会社サイバーエージェント @oskmr_
2022年サイバーエージェント新卒入社 タップルのiOSエンジニア 恋するAIの開発を担当 3
目次 1. 恋するAIについて 2. アプリの構成 3. iOSアプリの使用技術・設計 4. AIアバターの実装 5.
まとめ 4
趣味でつながるマッチングアプリ 「タップル」 2014年 サービス開始 累計会員数1,700万人を超える国内最大規模のマッチングアプリ 5
恋するAIについて 今年1月にリリース 記憶するAIパートナーとのチャット・会話アプリ 6
2. アプリの全体構成 7
3つの前提 8
前提①プロトタイプ 弊社エンジニアが制作したプロトタイプの活用 Web、VRMアバター、ChatGPT、VOICEVOX、etc 9
前提②偉い人からのリクエスト 「流行り終わりそうだから早くリリースして!」 「Webで作ったプロトタイプいい感じに使えん?」 「タップルに還元できる知見持って帰ってきてね!」 「Unity as a Libraryとかええやん」 10 偉い人
前提③開発チーム メンバーが若手のみ iOS:2名(新卒+2年目) バックエンド兼インフラ:1名(新卒) 11
前提③ バックエンドの負荷減らしたい 12
アプリの設計を考えるための前提と課題 バックエンドの負荷減らしたい iOSの新しい技術使いたい 13
アプリの設計を考えるための前提と課題 バックエンドの負荷減らしたい iOSの新しい技術使いたい 開発速度最優先 14
アプリの設計を考えるための前提と課題 バックエンドの負荷減らしたい iOSの新しい技術使いたい 開発速度最優先 15 でもクオリティは担保したい
None
全体像 17
特徴① バックエンドがDBを持たない クライアントがアプリの機能に関するコアなドメインロジックを 管理 開発負荷をクライアントに寄せる💪 Firestore: ユーザーの情報などのデータ VectorDB: AIの記憶情報 18
特徴② アバターの表示をWebViewで実装 VRM規格のアバターを表示するviewerとしてのWebアプリ React×TypeScript, three.js アバターの表情, モーションもWebで実装 19
3. iOSの使用技術・設計 20
iOSの開発環境・利用技術 iOS16.7~サポート • Xcode15 • Swift Package Manager • Swift
OpenAPI Generator • Firestore • Xcode Cloud 21
iOSの設計 22
iOSの設計 UIComponent - UIの表示レイヤー UILogic - アプリ画面のViewに1対1対応したViewModel UseCase - アプリのユースケースを定義
Repository - データの取得を抽象化 - APIやFirebaseを叩く(キャッシュデータを持つこともある) Domain - ドメインロジック 親密度、ユーザー情報やメッセージなどのEntity 23
iOSの設計-プロジェクト構成- • dev, prdそれぞれのアプリが存在 ◦ 各環境ごとの設定はxcodeproject内に配 置 ◦ URLなど共通の設定はxcconfigを利用 •
AppFeatureのPackage内に各レイヤーごとの モジュール 24 Swift Package Manager
iOSの設計-DIコンテナ- オブジェクトのインスタンス化や依存関係の解決のためにDIコンテナを利用 モジュール間をまたぐオブジェクトの依存関係の解決 インスタンス化を行う際に疎結合を保つ目的 25
iOSの設計-DIコンテナ- 利用するオブジェクトをコンテナに登録する形で利用 26
iOSの設計 27
iOSの設計 アプリのコアロジック(ドメインやユースケース)が技術詳細に依 存しないクリーンな実装 大体同じ設計になるので可読性が高くレビューコストが低い。 バックエンドのメンバーも一部開発に参加👏 毎回UseCaseやDomainを経由する必要がある →ボイラープレートが増えてしまうこともあり、機能開発における レイヤー分割が過剰に感じられる場合も 28
Xcode Cloud • PRをOpenした際にBuildとテストを実行する • 実機確認, QAの際に特定Branchからアプリを配布 • production環境のアプリをTestFlightの内部テストで配布 •
AppStore Connectへのアップロード 29
Xcode Cloudのメリット • 25時間/月まで無料と安い • 学習コストが低い ◦ GUIでworkflowの設定ができる ◦ 証明書の複雑な設定が不要
◦ モノレポでもディレクトリを選ぶだけで設定完了 • Xcodeからアプリ配れる(不安定で動かない時もある ) 30
Xcode Cloudのデメリット • カスタマイズ性にかける • GUIで設定するため変更差分をGit管理できない ◦ 他プロジェクトの設定を使いまわせない ◦ 一応APIは存在する
• アプリ配布がTestFlightのみ • fastlane等の別ツールを導入する場合は旨みが減る 31
4. AIアバター実装 32
AIアバター 1. ユーザーのアクション 2. WebViewへアバターのイベントをRequest 3. Web側でアバターが動作 33
AIアバター 1. ユーザーのアクション 2. WebViewへアバターのイベントをRequest 3. Web側でアバターが動作 34
AIアバター 1. ユーザーのアクション 2. WebViewへアバターのイベントをRequest 3. Web側でアバターが動作 35
AIアバター 36
AIアバター WebViewで開発してみて • VRMのモーションがUnity想定で挙動に苦戦 • WebViewがあることで一部UIKitに • プロトタイプがあったので早期のリリースには貢献🔥 37
5. まとめ 38
まとめ 一見変な構成✖最新技術で若手でも爆速開発 チームの特性や目的に合った技術選定と柔軟さが大事🙆 新しい技術や挑戦したことない技術での開発が刺激的で楽し かったです!!! 39
ご清聴ありがとうございました 40