Tweet
Tweet

Slide 1

Slide 1 text

CA.swift #19 Osaka Miseri 恋するAIアプリ開発の裏側 1

Slide 2

Slide 2 text

発表中のリアクションは #ca_swift をつけてツイート🔥 🙌 わいわいしよう 🙌 2

Slide 3

Slide 3 text

自己紹介👤 プロフィールを見る
 逢坂美芹
 逢坂 美芹 / Osaka Miseri 株式会社サイバーエージェント @oskmr_ 2022年サイバーエージェント新卒入社 タップルのiOSエンジニア 恋するAIの開発を担当 3

Slide 4

Slide 4 text

目次 1. 恋するAIについて 2. アプリの構成 3. iOSアプリの使用技術・設計 4. AIアバターの実装 5. まとめ 4

Slide 5

Slide 5 text

趣味でつながるマッチングアプリ 「タップル」 2014年 サービス開始 累計会員数1,700万人を超える国内最大規模のマッチングアプリ 5

Slide 6

Slide 6 text

恋するAIについて 今年1月にリリース 記憶するAIパートナーとのチャット・会話アプリ 6

Slide 7

Slide 7 text

2. アプリの全体構成 7

Slide 8

Slide 8 text

3つの前提 8

Slide 9

Slide 9 text

前提①プロトタイプ 弊社エンジニアが制作したプロトタイプの活用 Web、VRMアバター、ChatGPT、VOICEVOX、etc 9

Slide 10

Slide 10 text

前提②偉い人からのリクエスト 「流行り終わりそうだから早くリリースして！」 「Webで作ったプロトタイプいい感じに使えん？」 「タップルに還元できる知見持って帰ってきてね！」 「Unity as a Libraryとかええやん」 10 偉い人

Slide 11

Slide 11 text

前提③開発チーム メンバーが若手のみ iOS：2名（新卒+2年目） バックエンド兼インフラ：1名（新卒） 11

Slide 12

Slide 12 text

前提③ バックエンドの負荷減らしたい 12

Slide 13

Slide 13 text

アプリの設計を考えるための前提と課題 バックエンドの負荷減らしたい iOSの新しい技術使いたい 13

Slide 14

Slide 14 text

アプリの設計を考えるための前提と課題 バックエンドの負荷減らしたい iOSの新しい技術使いたい 開発速度最優先 14

Slide 15

Slide 15 text

アプリの設計を考えるための前提と課題 バックエンドの負荷減らしたい iOSの新しい技術使いたい 開発速度最優先 15 でもクオリティは担保したい

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

全体像 17

Slide 18

Slide 18 text

特徴① バックエンドがDBを持たない クライアントがアプリの機能に関するコアなドメインロジックを 管理 開発負荷をクライアントに寄せる💪 Firestore: ユーザーの情報などのデータ VectorDB: AIの記憶情報 18

Slide 19

Slide 19 text

特徴② アバターの表示をWebViewで実装 VRM規格のアバターを表示するviewerとしてのWebアプリ React×TypeScript, three.js アバターの表情, モーションもWebで実装 19

Slide 20

Slide 20 text

3. iOSの使用技術・設計 20

Slide 21

Slide 21 text

iOSの開発環境・利用技術 iOS16.7~サポート ● Xcode15 ● Swift Package Manager ● Swift OpenAPI Generator ● Firestore ● Xcode Cloud 21

Slide 22

Slide 22 text

iOSの設計 22

Slide 23

Slide 23 text

iOSの設計 UIComponent - UIの表示レイヤー UILogic - アプリ画面のViewに1対1対応したViewModel UseCase - アプリのユースケースを定義 Repository - データの取得を抽象化 - APIやFirebaseを叩く（キャッシュデータを持つこともある） Domain - ドメインロジック 親密度、ユーザー情報やメッセージなどのEntity 23

Slide 24

Slide 24 text

iOSの設計-プロジェクト構成- ● dev, prdそれぞれのアプリが存在 ○ 各環境ごとの設定はxcodeproject内に配 置 ○ URLなど共通の設定はxcconfigを利用 ● AppFeatureのPackage内に各レイヤーごとの モジュール 24 Swift Package Manager

Slide 25

Slide 25 text

iOSの設計-DIコンテナ- オブジェクトのインスタンス化や依存関係の解決のためにDIコンテナを利用
 モジュール間をまたぐオブジェクトの依存関係の解決
 インスタンス化を行う際に疎結合を保つ目的
 25

Slide 26

Slide 26 text

iOSの設計-DIコンテナ- 利用するオブジェクトをコンテナに登録する形で利用
 26

Slide 27

Slide 27 text

iOSの設計 27

Slide 28

Slide 28 text

iOSの設計 アプリのコアロジック（ドメインやユースケース）が技術詳細に依 存しないクリーンな実装 大体同じ設計になるので可読性が高くレビューコストが低い。 バックエンドのメンバーも一部開発に参加👏 毎回UseCaseやDomainを経由する必要がある →ボイラープレートが増えてしまうこともあり、機能開発における レイヤー分割が過剰に感じられる場合も 28

Slide 29

Slide 29 text

Xcode Cloud ● PRをOpenした際にBuildとテストを実行する
 ● 実機確認, QAの際に特定Branchからアプリを配布
 ● production環境のアプリをTestFlightの内部テストで配布
 ● AppStore Connectへのアップロード
 29

Slide 30

Slide 30 text

Xcode Cloudのメリット ● 25時間/月まで無料と安い ● 学習コストが低い ○ GUIでworkflowの設定ができる ○ 証明書の複雑な設定が不要 ○ モノレポでもディレクトリを選ぶだけで設定完了 ● Xcodeからアプリ配れる(不安定で動かない時もある ) 30

Slide 31

Slide 31 text

Xcode Cloudのデメリット ● カスタマイズ性にかける ● GUIで設定するため変更差分をGit管理できない ○ 他プロジェクトの設定を使いまわせない ○ 一応APIは存在する ● アプリ配布がTestFlightのみ ● fastlane等の別ツールを導入する場合は旨みが減る 31

Slide 32

Slide 32 text

4. AIアバター実装 32

Slide 33

Slide 33 text

AIアバター 1. ユーザーのアクション 2. WebViewへアバターのイベントをRequest 3. Web側でアバターが動作 33

Slide 34

Slide 34 text

AIアバター 1. ユーザーのアクション 2. WebViewへアバターのイベントをRequest 3. Web側でアバターが動作 34

Slide 35

Slide 35 text

AIアバター 1. ユーザーのアクション 2. WebViewへアバターのイベントをRequest 3. Web側でアバターが動作 35

Slide 36

Slide 36 text

AIアバター 36

Slide 37

Slide 37 text

AIアバター WebViewで開発してみて ● VRMのモーションがUnity想定で挙動に苦戦 ● WebViewがあることで一部UIKitに ● プロトタイプがあったので早期のリリースには貢献🔥 37

Slide 38

Slide 38 text

5. まとめ 38

Slide 39

Slide 39 text

まとめ 一見変な構成✖最新技術で若手でも爆速開発 チームの特性や目的に合った技術選定と柔軟さが大事🙆 新しい技術や挑戦したことない技術での開発が刺激的で楽し かったです！！！ 39

Slide 40

Slide 40 text

ご清聴ありがとうございました󰢛 40