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

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

pkino

September 17, 2021
Tweet

More Decks by pkino

Other Decks in Programming

Transcript

  1. iOSアプリ開発に入門して、

    いきなりUnity as a Libraryに挑戦してわ
    かったこと。

    株式会社ZOZOテクノロジーズ

    MATRIX エンジニア

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


    View full-size slide

  2. © ZOZO Technologies, Inc.
    株式会社ZOZOテクノロジーズ

    MATRIX エンジニア
    木下 郁英

    Ikuhide Kinoshita

    2
    2019年入社。

    新規事業専門の部署で、WebやiOSアプリの開発を楽しんでいます!

    ビール・日本酒、グリーンソフト(和歌山名物)が好きです。

    @pkino 
 @i_kinopee 


    View full-size slide

  3. https://zozo.jp/

    ● 日本最大級のファッション通販サイト

    ● 1,400以上のショップ、8,200以上のブランドの取り扱い(ともに2021年3月
    末時点)

    ● 常時83万点以上の商品アイテム数と毎日平均2,900点以上の新着 商品
    を掲載

    ● コスメ専門モール「ZOZOCOSME」や靴の専門モール

    「ZOZOSHOES」、ラグジュアリー&デザイナーズゾーン

    「ZOZOVILLA」を展開

    ● 即日配送サービス

    ● ギフトラッピングサービス

    ● ツケ払い など

    3

    View full-size slide

  4. https://wear.jp/

    ● 日本最大級のファッションコーディネートアプリ

    ● 1,500万ダウンロード突破、コーディネート投稿総数は1,000万件以上(と
    もに2021年3月末時点)

    ● ピックアップタグから最新のトレンドをチェック

    ● コーディネート着用アイテムを公式サイトで購入

    ● WEAR公認の人気ユーザーWEARISTAとして、モデル・タレント・デザイ
    ナー・インフルエンサーといった各界著名人も参加

    4

    View full-size slide

  5. © ZOZO Technologies, Inc. 5

    View full-size slide

  6. © ZOZO Technologies, Inc.
    ターゲット

    1. Unity as a Libraryを使おうか迷っている入門レベルの方

    ○ 学習から実装まで一通りの経験をお伝えします


    2. Unity as a Libraryを少し使っている初級レベルの方

    ○ いくつかの小さなTipsがあります

    6

    View full-size slide

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

    7
    ARや2D/3Dシミュレーションを得意とするUnityの機能を

    フレームワークとしてネイティブアプリから呼び出す仕組み。

    https://unity.com/features/unity-as-a-library


    View full-size slide

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

    8

    View full-size slide

  9. © ZOZO Technologies, Inc.
    新規事業開発を専門とする部署の性質上、

    要件に応じて様々な技術スタックでの開発が必要になる。

    今回は、未経験ながらiOSアプリの開発に挑戦することに。

    背景

    9

    View full-size slide

  10. © ZOZO Technologies, Inc.
    おわび

    アプリは現在開発中のため

    画面をお見せできません

    10

    View full-size slide

  11. © ZOZO Technologies, Inc.
    コンテンツ

    ● iOSアプリ開発の学習

    ● Unity as a Library (UaaL) を採用した経緯

    ● UaaLの実装における工夫点

    ● 唯一困っていること

    11

    View full-size slide

  12. © ZOZO Technologies, Inc.
    iOSアプリ開発の学習


    View full-size slide

  13. © ZOZO Technologies, Inc.
    iOSアプリ開発の学習

    アプリ開発のために、

    一から学習

    13

    View full-size slide

  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/


    View full-size slide

  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

    View full-size slide

  16. © ZOZO Technologies, Inc.
    iOSアプリ開発の学習

    書籍

    ● PEAKS(ピークス)|iOSアプリ設計パターン入門

    ○ GitHub: peaks-cc/iOS_architecture_samplecode

    ● [増補改訂第3版]Swift実践入門 ──直感的な文法と安全性を兼ね備えた言語:書籍案
    内|技術評論社

    16
    ※参考にできるリポジトリがあると、自分が実装する際の具体的なお手本とできたり、他のメンバーにも実装例が示しやすい。


    View full-size slide

  17. © ZOZO Technologies, Inc.
    iOSアプリ開発の学習

    アプリ実装の基本を、コードに触れながら学習

    +

    自分で実装する際に参考となるリポジトリを見つける
    17

    View full-size slide

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


    View full-size slide

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

    開発要件:

    ECアプリに、Unityの3Dシミュレーションを埋め込む


    ● EC部分がメインで、ゲームのように描画メインのアプリではない

    ● 3Dについては、UnityのSDKを利用する必要があった

    19

    View full-size slide

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

    Unityの実装方法

    1. Unityのみ

    2. Unity as a Library

    20

    View full-size slide

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

    Unityの実装方法

    1. Unityのみ

    全てをUnityで実装する方法


    自由なアニメーションで表現される

    ゲームのようなアプリならこの選択肢も適切だが、

    iOSの標準的なUIをUnityのみで実装するのは困難。

    21
    Unityのみの例

    https://www.youtube.com/watch?v=MAnhmhkeQ78


    View full-size slide

  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


    View full-size slide

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

    iOSに標準的なUIをメインとする、今回の開発要件を満たすのは……

    1. Unityのみ→△

    ● Unityのみのruntimeなので、メモリの観点からは優位

    ● iOSの標準的なUIをUnityのみで実装するのは困難


    2. Unity as a Library→○

    ● HIGに則ったiOSの標準的なUIを実装しやすい



    23

    View full-size slide

  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搭載の機能を搭載したいと考えている専門的なユーザー(開発者)を対象としていま
    す。)


    View full-size slide

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

    以下の理由から、UaaLの採用を決断

    ● UaaL以外に適切な方法が存在しない

    ● 他チームのiOSエンジニアや、

    技術顧問の方に相談しながら実装を進められる環境だった


    →フタを開けてみれば、

    ● 警戒していたほどハードルは高くなかった

    ● UaaLを扱う日本語記事が充実していたため、

    1つ(後述)を除いて大きな問題には遭遇しなかった

    25

    View full-size slide

  26. © ZOZO Technologies, Inc.
    実装における工夫点


    View full-size slide

  27. © ZOZO Technologies, Inc.
    実装における工夫点

    27
    公式の実装例はObjective-Cのみ

    ※Unity-Technologies/uaal-example(参照:2021/08/26)


    View full-size slide

  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.の方法をベースに実装を進めた。


    View full-size slide

  29. © ZOZO Technologies, Inc.
    実装における工夫点

    29
    そもそもUaaLはどうなっているのか?

    UnityをBuildしてXcode Projectを作成、

    Xcode WorkspaceでネイティブのProjectとまと
    める。

    ● Unity部分

    ○ 単独で動かすとUnityのみのアプリとして起動

    ● ネイティブ部分

    ○ UnityFramework.frameworkを読み込む


    View full-size slide

  30. © ZOZO Technologies, Inc.
    実装における工夫点

    30
    そもそもUaaLはどうなっているのか?


    ● Unity部分

    ○ 上部の灰色のボタン

    ○ キューブや背景

    ● ネイティブ部分

    ○ 下部のカラフルなボタン


    View full-size slide

  31. © ZOZO Technologies, Inc.
    実装における工夫点

    31
    開発の中で工夫した点

    1. Unityのローディングを効率化

    2. 自然な画面遷移の実現

    3. Unityとネイティブ間のやりとりを効率的に実装

    4. UnityのBuild後に必要な設定を自動化


    View full-size slide

  32. © ZOZO Technologies, Inc.
    実装における工夫点

    32
    1. Unityのローディングを効率化

    サンプルアプリでは、Unityの起動に

    時間がかかっていた。


    View full-size slide

  33. © ZOZO Technologies, Inc.
    実装における工夫点

    33
    1. Unityのローディングを効率化

    ローディングを効率化し、シームレスにUnity部分を表示したい。


    ● Unityのスプラッシュをオフにする

    ● アプリ起動時にAppDelegateでUnityを呼び出し、バックグラウンドで
    ローディングしておく


    View full-size slide

  34. © ZOZO Technologies, Inc.
    実装における工夫点

    34
    2. 自然な画面遷移の実現

    サンプルアプリでは、アニメーション

    がなく、単に切り替わるだけだった。


    View full-size slide

  35. © ZOZO Technologies, Inc.
    実装における工夫点

    35
    2. 自然な画面遷移の実現

    一般的なアプリでは、

    NavigationControllerなどで画面遷移。


    ● Unity部分のViewを、

    ネイティブ部分のViewControllerに
    addSubViewすることで、

    自然な画面遷移を実現した


    View full-size slide

  36. © ZOZO Technologies, Inc.
    実装における工夫点

    36
    3. Unityとネイティブ間のやりとりを効率的に実装

    サンプルアプリでは、Unity⇄ネイティブ双方向にやりとりがされていた。


    View full-size slide

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

    View full-size slide

  38. © ZOZO Technologies, Inc.
    実装における工夫点

    38
    3. Unityとネイティブ間のやりとりを効率的に実装

    今回ライフサイクルを管理しているのは、ネイティブ側。


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


    View full-size slide

  39. © ZOZO Technologies, Inc.
    実装における工夫点

    39
    3. Unityとネイティブ間のやりとりを効率的に実装

    ただしネイティブはUnity内のライフサイクルを把握することはできない。
    そのようなネイティブからの呼び出しを、Unity内で適切に処理できるよう
    な実装が必要。


    ● Unity内でEventとCoroutineを実装した


    View full-size slide

  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を抜けて続行


    View full-size slide

  41. © ZOZO Technologies, Inc.
    実装における工夫点

    41
    4. UnityのBuild後に必要な設定を自動化

    サンプルアプリでは、UnityをBuildしてXcode Projectを作成した際には、
    毎回いくつかの設定を手動で行う必要があった。


    View full-size slide

  42. © ZOZO Technologies, Inc.
    実装における工夫点

    42
    4. UnityのBuild後に必要な設定を自動化

    Build後に毎回必要な設定をコードで自動化する。


    ● Unity内のOnPostprocessBuildでBuild後の設定を実装した

    参考:【Unity】MirrativのEmbedding Unityを更新した話: 実践 Unity as a Library - Mirrativ tech blog


    View full-size slide

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


    View full-size slide

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

    44
    XcodeのシミュレータでBuildできない

    UnityでBuildされたFrameworkが、

    シミュレータでは正しく認識されない。


    View full-size slide

  45. © ZOZO Technologies, Inc.
    まとめ


    View full-size slide

  46. © ZOZO Technologies, Inc.
    まとめ

    46
    Unity as a Libraryはエキスパート向けとされているが、

    先人のおかげでドキュメントも充実している。

    初心者でも十分に入門可能。


    View full-size slide

  47. © ZOZO Technologies, Inc.
    まとめ

    Unity as a Libraryに

    挑戦する方の参考になれば、

    幸いです

    47

    View full-size slide

  48. © ZOZO Technologies, Inc.
    詳細は、以下の記事をご覧ください。

    ● Swiftで開発を行なっているiOSアプリにUnityを組み込む

    (Unity as a Library) - Qiita

    Appendix

    48

    View full-size slide

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

    View full-size slide