Upgrade to Pro — share decks privately, control downloads, hide ads and more …

iOSアプリ開発に入門して、いきなりUnity as a Libraryに挑戦してわかったこと。 / Challenge of Unity as a Library by a iOS development beginner

8959f99d4bf2e7445e5b847d3ac18dde?s=47 pkino
September 17, 2021

iOSアプリ開発に入門して、いきなりUnity as a Libraryに挑戦してわかったこと。 / Challenge of Unity as a Library by a iOS development beginner

ある日フロントエンドエンジニアが、Unityを組み込んだiOSアプリの開発を行う業務が決まりました。そこからSwiftなどを習得し、先輩エンジニアの経験も伺いながら、Unity as a Libary (UaaL)を採用しました。

Unity as a Libraryは、フレームワークとしてUnityをネイティブアプリに組み込むことができる仕組みです。多彩な3D表現を得意とするUnityと、ユーザーフレンドリーで洗練されたUIを実現できるネイティブ実装のいいとこどりができます。

プロダクトとして、デザイン性と実用性が必要とされる中で開発した経験や、iOSアプリ初心者の視点からつまずいたポイントなどを意識して、以下のテーマをお届けします。

- iOSアプリ開発の学習
- Unity as a Library (UaaL) を採用した経緯
- UaaLの実装における工夫点
- 唯一困っていること

詳細やコードなどについては、こちらにまとめております。
https://qiita.com/pkino/items/3e6eaff95cad3fc549ed

8959f99d4bf2e7445e5b847d3ac18dde?s=128

pkino

September 17, 2021
Tweet

Transcript

  1. iOSアプリ開発に入門して、
 いきなりUnity as a Libraryに挑戦してわ かったこと。
 株式会社ZOZOテクノロジーズ
 MATRIX エンジニア
 木下

    郁英 Copyright © ZOZO Technologies, Inc. iOSDC Japan 2021 Day0 2021/09/17 19:50~ Track B 

  2. © ZOZO Technologies, Inc. 株式会社ZOZOテクノロジーズ
 MATRIX エンジニア 木下 郁英
 Ikuhide

    Kinoshita
 2 2019年入社。
 新規事業専門の部署で、WebやiOSアプリの開発を楽しんでいます!
 ビール・日本酒、グリーンソフト(和歌山名物)が好きです。
 @pkino 
 @i_kinopee 

  3. https://zozo.jp/
 • 日本最大級のファッション通販サイト
 • 1,400以上のショップ、8,200以上のブランドの取り扱い(ともに2021年3月 末時点)
 • 常時83万点以上の商品アイテム数と毎日平均2,900点以上の新着 商品 を掲載


    • コスメ専門モール「ZOZOCOSME」や靴の専門モール
 「ZOZOSHOES」、ラグジュアリー&デザイナーズゾーン
 「ZOZOVILLA」を展開
 • 即日配送サービス
 • ギフトラッピングサービス
 • ツケ払い など
 3
  4. https://wear.jp/
 • 日本最大級のファッションコーディネートアプリ
 • 1,500万ダウンロード突破、コーディネート投稿総数は1,000万件以上(と もに2021年3月末時点)
 • ピックアップタグから最新のトレンドをチェック
 • コーディネート着用アイテムを公式サイトで購入


    • WEAR公認の人気ユーザーWEARISTAとして、モデル・タレント・デザイ ナー・インフルエンサーといった各界著名人も参加
 4
  5. © ZOZO Technologies, Inc. 5

  6. © ZOZO Technologies, Inc. ターゲット
 1. Unity as a Libraryを使おうか迷っている入門レベルの方


    ◦ 学習から実装まで一通りの経験をお伝えします
 
 2. Unity as a Libraryを少し使っている初級レベルの方
 ◦ いくつかの小さなTipsがあります
 6
  7. © ZOZO Technologies, Inc. Unity as a Libraryとは
 7 ARや2D/3Dシミュレーションを得意とするUnityの機能を


    フレームワークとしてネイティブアプリから呼び出す仕組み。
 https://unity.com/features/unity-as-a-library

  8. © ZOZO Technologies, Inc. Unity as a Libraryとは
 8

  9. © ZOZO Technologies, Inc. 新規事業開発を専門とする部署の性質上、
 要件に応じて様々な技術スタックでの開発が必要になる。
 今回は、未経験ながらiOSアプリの開発に挑戦することに。
 背景
 9

  10. © ZOZO Technologies, Inc. おわび
 アプリは現在開発中のため
 画面をお見せできません
 10

  11. © ZOZO Technologies, Inc. コンテンツ
 • iOSアプリ開発の学習
 • Unity as

    a Library (UaaL) を採用した経緯
 • UaaLの実装における工夫点
 • 唯一困っていること
 11
  12. © ZOZO Technologies, Inc. iOSアプリ開発の学習


  13. © ZOZO Technologies, Inc. iOSアプリ開発の学習
 アプリ開発のために、
 一から学習
 13

  14. © ZOZO Technologies, Inc. iOSアプリ開発の学習
 オンライン学習サイト(Udacity) • Intro to iOS

    App Development with Swift | Udacity Free Courses • UIKit Fundamentals | Udacity Free Courses
 • iOS Networking with Swift | Udacity Free Courses
 • iOS Persistence and Core Data | Udacity Free Courses
 
 14 ※Udacity: https://www.udacity.com/

  15. © ZOZO Technologies, Inc. iOSアプリ開発の学習
 ウェブ
 • MVP VS MVVM

    in iOS using swift. Introduction: | by Omar Tarek | Medium
 • Model-View-Controller (MVC) in iOS – A Modern Approach | raywenderlich.com 15
  16. © ZOZO Technologies, Inc. iOSアプリ開発の学習
 書籍
 • PEAKS(ピークス)|iOSアプリ設計パターン入門
 ◦ GitHub:

    peaks-cc/iOS_architecture_samplecode
 • [増補改訂第3版]Swift実践入門 ──直感的な文法と安全性を兼ね備えた言語:書籍案 内|技術評論社
 16 ※参考にできるリポジトリがあると、自分が実装する際の具体的なお手本とできたり、他のメンバーにも実装例が示しやすい。

  17. © ZOZO Technologies, Inc. iOSアプリ開発の学習
 アプリ実装の基本を、コードに触れながら学習
 +
 自分で実装する際に参考となるリポジトリを見つける 17

  18. © ZOZO Technologies, Inc. UaaLを採用した経緯


  19. © ZOZO Technologies, Inc. UaaLを採用した経緯
 開発要件:
 ECアプリに、Unityの3Dシミュレーションを埋め込む
 
 • EC部分がメインで、ゲームのように描画メインのアプリではない


    • 3Dについては、UnityのSDKを利用する必要があった
 19
  20. © ZOZO Technologies, Inc. UaaLを採用した経緯
 Unityの実装方法
 1. Unityのみ
 2. Unity

    as a Library
 20
  21. © ZOZO Technologies, Inc. UaaLを採用した経緯
 Unityの実装方法
 1. Unityのみ
 全てをUnityで実装する方法
 


    自由なアニメーションで表現される
 ゲームのようなアプリならこの選択肢も適切だが、
 iOSの標準的なUIをUnityのみで実装するのは困難。
 21 Unityのみの例
 https://www.youtube.com/watch?v=MAnhmhkeQ78

  22. © ZOZO Technologies, Inc. UaaLを採用した経緯
 Unityの実装方法
 2. Unity as a

    Library
 iOSの標準的なUIはネイティブで実装し、
 アプリの一部に埋め込む3DをUnityで実装する方法
 
 アプリの一部に3Dなどを埋め込みたい場合に便利で、
 AppleのHIGにも則りやすい。
 
 22 ※Unity 2018.3より前のバージョンではEmbedding Unityという古の方法が存在したが、現在は公式のUnity as a Libraryを利用するのが便利。
 参考:【Unity】MirrativのEmbedding Unityを更新した話: 実践 Unity as a Library - Mirrativ tech blog
 Unity as a Libraryの例
 https://unity.com/features/unity-as-a-library

  23. © ZOZO Technologies, Inc. UaaLを採用した経緯
 iOSに標準的なUIをメインとする、今回の開発要件を満たすのは……
 1. Unityのみ→△
 • Unityのみのruntimeなので、メモリの観点からは優位


    • iOSの標準的なUIをUnityのみで実装するのは困難
 
 2. Unity as a Library→◦
 • HIGに則ったiOSの標準的なUIを実装しやすい
 
 
 23
  24. © ZOZO Technologies, Inc. UaaLを採用した経緯
 ただし、ハードルは高い
 UaaLの公式ページは、以下の1文から始まる
 24 Unity as

    a Library is intended for specialist users who use native platform technologies such as Java/Android, Objective C/iOS, or Windows Win32/UWP, and want to include Unity-powered features in their games or applications.
 (Unity as a Libraryは、Java/Android、Objective C/iOS、Windows Win32/UWPなどのネイティブプラットフォーム技術を使用 し、ゲームやアプリケーションにUnity搭載の機能を搭載したいと考えている専門的なユーザー(開発者)を対象としていま す。)

  25. © ZOZO Technologies, Inc. UaaLを採用した経緯
 以下の理由から、UaaLの採用を決断
 • UaaL以外に適切な方法が存在しない
 • 他チームのiOSエンジニアや、


    技術顧問の方に相談しながら実装を進められる環境だった
 
 →フタを開けてみれば、
 • 警戒していたほどハードルは高くなかった
 • UaaLを扱う日本語記事が充実していたため、
 1つ(後述)を除いて大きな問題には遭遇しなかった
 25
  26. © ZOZO Technologies, Inc. 実装における工夫点


  27. © ZOZO Technologies, Inc. 実装における工夫点
 27 公式の実装例はObjective-Cのみ
 ※Unity-Technologies/uaal-example(参照:2021/08/26)


  28. © ZOZO Technologies, Inc. 実装における工夫点
 28 Swiftを用いた、先人の実装例 1. [Swift] Unity

    as a LibraryをSwiftから呼ぶ - Qiita 
 @noppefoxwolfさん
 iOSアプリに、Unityをシームレスに埋め込んだ実装
 2. Unity as a LibraryのサンプルプロジェクトをSwiftで書き直した|Hiroki Kodama|note @_hrkdさん
 公式サンプルと同様にUnityFrameworkを直接呼び出す実装
 iOSのUIにシームレスに組み込むという方針(後述)から、
 1.の方法をベースに実装を進めた。

  29. © ZOZO Technologies, Inc. 実装における工夫点
 29 そもそもUaaLはどうなっているのか?
 UnityをBuildしてXcode Projectを作成、
 Xcode

    WorkspaceでネイティブのProjectとまと める。
 • Unity部分
 ◦ 単独で動かすとUnityのみのアプリとして起動
 • ネイティブ部分
 ◦ UnityFramework.frameworkを読み込む

  30. © ZOZO Technologies, Inc. 実装における工夫点
 30 そもそもUaaLはどうなっているのか?
 
 • Unity部分


    ◦ 上部の灰色のボタン
 ◦ キューブや背景
 • ネイティブ部分
 ◦ 下部のカラフルなボタン

  31. © ZOZO Technologies, Inc. 実装における工夫点
 31 開発の中で工夫した点
 1. Unityのローディングを効率化
 2.

    自然な画面遷移の実現
 3. Unityとネイティブ間のやりとりを効率的に実装
 4. UnityのBuild後に必要な設定を自動化

  32. © ZOZO Technologies, Inc. 実装における工夫点
 32 1. Unityのローディングを効率化
 サンプルアプリでは、Unityの起動に
 時間がかかっていた。


  33. © ZOZO Technologies, Inc. 実装における工夫点
 33 1. Unityのローディングを効率化
 ローディングを効率化し、シームレスにUnity部分を表示したい。
 


    • Unityのスプラッシュをオフにする
 • アプリ起動時にAppDelegateでUnityを呼び出し、バックグラウンドで ローディングしておく

  34. © ZOZO Technologies, Inc. 実装における工夫点
 34 2. 自然な画面遷移の実現
 サンプルアプリでは、アニメーション
 がなく、単に切り替わるだけだった。


  35. © ZOZO Technologies, Inc. 実装における工夫点
 35 2. 自然な画面遷移の実現
 一般的なアプリでは、
 NavigationControllerなどで画面遷移。


    
 • Unity部分のViewを、
 ネイティブ部分のViewControllerに addSubViewすることで、
 自然な画面遷移を実現した

  36. © ZOZO Technologies, Inc. 実装における工夫点
 36 3. Unityとネイティブ間のやりとりを効率的に実装
 サンプルアプリでは、Unity⇄ネイティブ双方向にやりとりがされていた。
 


  37. © ZOZO Technologies, Inc. Unity→Unity ネイティブ→Unity Unity→ネイティブ Unity→ネイティブ 37

  38. © ZOZO Technologies, Inc. 実装における工夫点
 38 3. Unityとネイティブ間のやりとりを効率的に実装
 今回ライフサイクルを管理しているのは、ネイティブ側。
 


    • 全てのやりとりにおいて、ネイティブ→Unityの一方向のみの呼び出し とすることで、データの流れを把握しやすくした

  39. © ZOZO Technologies, Inc. 実装における工夫点
 39 3. Unityとネイティブ間のやりとりを効率的に実装
 ただしネイティブはUnity内のライフサイクルを把握することはできない。 そのようなネイティブからの呼び出しを、Unity内で適切に処理できるよう

    な実装が必要。
 
 • Unity内でEventとCoroutineを実装した
 

  40. private Environment environment; private bool isSetting = true; void Awake()

    { environment.SettingComplete += OnSettingComplete; } void OnSettingComplete() { isSetting = false; } public void SetEnvironment() { isSetting = true; environment.Set(); ... } public IEnumerator PutCube() { while (isSetting) { yield return new WaitForSeconds(.1f); } ... } 40 ①イベントの登録
 ②Set()の実行
 ③callbackにより実行
 ④whileを抜けて続行

  41. © ZOZO Technologies, Inc. 実装における工夫点
 41 4. UnityのBuild後に必要な設定を自動化
 サンプルアプリでは、UnityをBuildしてXcode Projectを作成した際には、

    毎回いくつかの設定を手動で行う必要があった。

  42. © ZOZO Technologies, Inc. 実装における工夫点
 42 4. UnityのBuild後に必要な設定を自動化
 Build後に毎回必要な設定をコードで自動化する。
 


    • Unity内のOnPostprocessBuildでBuild後の設定を実装した
 参考:【Unity】MirrativのEmbedding Unityを更新した話: 実践 Unity as a Library - Mirrativ tech blog
 

  43. © ZOZO Technologies, Inc. 唯一困っていること


  44. © ZOZO Technologies, Inc. 唯一困っていること
 44 XcodeのシミュレータでBuildできない
 UnityでBuildされたFrameworkが、
 シミュレータでは正しく認識されない。


  45. © ZOZO Technologies, Inc. まとめ


  46. © ZOZO Technologies, Inc. まとめ
 46 Unity as a Libraryはエキスパート向けとされているが、


    先人のおかげでドキュメントも充実している。
 初心者でも十分に入門可能。

  47. © ZOZO Technologies, Inc. まとめ
 Unity as a Libraryに
 挑戦する方の参考になれば、


    幸いです
 47
  48. © ZOZO Technologies, Inc. 詳細は、以下の記事をご覧ください。
 • Swiftで開発を行なっているiOSアプリにUnityを組み込む
 (Unity as a

    Library) - Qiita
 Appendix
 48
  49. MATRIXでは、新規事業開発に挑戦する仲間を募集中です。