Slide 1
Slide 1 text
iOSアプリ開発に入門して、
いきなりUnity as a Libraryに挑戦してわ
かったこと。
株式会社ZOZOテクノロジーズ
MATRIX エンジニア
木下 郁英
Copyright © ZOZO Technologies, Inc.
iOSDC Japan 2021 Day0 2021/09/17 19:50~ Track B
Slide 2
Slide 2 text
© ZOZO Technologies, Inc.
株式会社ZOZOテクノロジーズ
MATRIX エンジニア
木下 郁英
Ikuhide Kinoshita
2
2019年入社。
新規事業専門の部署で、WebやiOSアプリの開発を楽しんでいます！
ビール・日本酒、グリーンソフト（和歌山名物）が好きです。
@pkino
@i_kinopee
Slide 3
Slide 3 text
https://zozo.jp/
● 日本最大級のファッション通販サイト
● 1,400以上のショップ、8,200以上のブランドの取り扱い（ともに2021年3月
末時点）
● 常時83万点以上の商品アイテム数と毎日平均2,900点以上の新着 商品
を掲載
● コスメ専門モール「ZOZOCOSME」や靴の専門モール
「ZOZOSHOES」、ラグジュアリー＆デザイナーズゾーン
「ZOZOVILLA」を展開
● 即日配送サービス
● ギフトラッピングサービス
● ツケ払い など
3
Slide 4
Slide 4 text
https://wear.jp/
● 日本最大級のファッションコーディネートアプリ
● 1,500万ダウンロード突破、コーディネート投稿総数は1,000万件以上（と
もに2021年3月末時点）
● ピックアップタグから最新のトレンドをチェック
● コーディネート着用アイテムを公式サイトで購入
● WEAR公認の人気ユーザーWEARISTAとして、モデル・タレント・デザイ
ナー・インフルエンサーといった各界著名人も参加
4
Slide 5
Slide 5 text
© ZOZO Technologies, Inc. 5
Slide 6
Slide 6 text
© ZOZO Technologies, Inc.
ターゲット
1. Unity as a Libraryを使おうか迷っている入門レベルの方
○ 学習から実装まで一通りの経験をお伝えします
2. Unity as a Libraryを少し使っている初級レベルの方
○ いくつかの小さなTipsがあります
6
Slide 7
Slide 7 text
© ZOZO Technologies, Inc.
Unity as a Libraryとは
7
ARや2D/3Dシミュレーションを得意とするUnityの機能を
フレームワークとしてネイティブアプリから呼び出す仕組み。
https://unity.com/features/unity-as-a-library
Slide 8
Slide 8 text
© ZOZO Technologies, Inc.
Unity as a Libraryとは
8
Slide 9
Slide 9 text
© ZOZO Technologies, Inc.
新規事業開発を専門とする部署の性質上、
要件に応じて様々な技術スタックでの開発が必要になる。
今回は、未経験ながらiOSアプリの開発に挑戦することに。
背景
9
Slide 10
Slide 10 text
© ZOZO Technologies, Inc.
おわび
アプリは現在開発中のため
画面をお見せできません
10
Slide 11
Slide 11 text
© ZOZO Technologies, Inc.
コンテンツ
● iOSアプリ開発の学習
● Unity as a Library (UaaL) を採用した経緯
● UaaLの実装における工夫点
● 唯一困っていること
11
Slide 12
Slide 12 text
© ZOZO Technologies, Inc.
iOSアプリ開発の学習
Slide 13
Slide 13 text
© ZOZO Technologies, Inc.
iOSアプリ開発の学習
アプリ開発のために、
一から学習
13
Slide 14
Slide 14 text
© 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/
Slide 15
Slide 15 text
© 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
Slide 16
Slide 16 text
© ZOZO Technologies, Inc.
iOSアプリ開発の学習
書籍
● PEAKS（ピークス）｜iOSアプリ設計パターン入門
○ GitHub: peaks-cc/iOS_architecture_samplecode
● ［増補改訂第3版］Swift実践入門 ──直感的な文法と安全性を兼ね備えた言語：書籍案
内｜技術評論社
16
※参考にできるリポジトリがあると、自分が実装する際の具体的なお手本とできたり、他のメンバーにも実装例が示しやすい。
Slide 17
Slide 17 text
© ZOZO Technologies, Inc.
iOSアプリ開発の学習
アプリ実装の基本を、コードに触れながら学習
＋
自分で実装する際に参考となるリポジトリを見つける
17
Slide 18
Slide 18 text
© ZOZO Technologies, Inc.
UaaLを採用した経緯
Slide 19
Slide 19 text
© ZOZO Technologies, Inc.
UaaLを採用した経緯
開発要件：
ECアプリに、Unityの3Dシミュレーションを埋め込む
● EC部分がメインで、ゲームのように描画メインのアプリではない
● 3Dについては、UnityのSDKを利用する必要があった
19
Slide 20
Slide 20 text
© ZOZO Technologies, Inc.
UaaLを採用した経緯
Unityの実装方法
1. Unityのみ
2. Unity as a Library
20
Slide 21
Slide 21 text
© ZOZO Technologies, Inc.
UaaLを採用した経緯
Unityの実装方法
1. Unityのみ
全てをUnityで実装する方法
自由なアニメーションで表現される
ゲームのようなアプリならこの選択肢も適切だが、
iOSの標準的なUIをUnityのみで実装するのは困難。
21
Unityのみの例
https://www.youtube.com/watch?v=MAnhmhkeQ78
Slide 22
Slide 22 text
© 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
Slide 23
Slide 23 text
© ZOZO Technologies, Inc.
UaaLを採用した経緯
iOSに標準的なUIをメインとする、今回の開発要件を満たすのは……
1. Unityのみ→△
● Unityのみのruntimeなので、メモリの観点からは優位
● iOSの標準的なUIをUnityのみで実装するのは困難
2. Unity as a Library→○
● HIGに則ったiOSの標準的なUIを実装しやすい
23
Slide 24
Slide 24 text
© 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搭載の機能を搭載したいと考えている専門的なユーザー（開発者）を対象としていま
す。）
Slide 25
Slide 25 text
© ZOZO Technologies, Inc.
UaaLを採用した経緯
以下の理由から、UaaLの採用を決断
● UaaL以外に適切な方法が存在しない
● 他チームのiOSエンジニアや、
技術顧問の方に相談しながら実装を進められる環境だった
→フタを開けてみれば、
● 警戒していたほどハードルは高くなかった
● UaaLを扱う日本語記事が充実していたため、
1つ（後述）を除いて大きな問題には遭遇しなかった
25
Slide 26
Slide 26 text
© ZOZO Technologies, Inc.
実装における工夫点
Slide 27
Slide 27 text
© ZOZO Technologies, Inc.
実装における工夫点
27
公式の実装例はObjective-Cのみ
※Unity-Technologies/uaal-example（参照：2021/08/26）
Slide 28
Slide 28 text
© 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.の方法をベースに実装を進めた。
Slide 29
Slide 29 text
© ZOZO Technologies, Inc.
実装における工夫点
29
そもそもUaaLはどうなっているのか？
UnityをBuildしてXcode Projectを作成、
Xcode WorkspaceでネイティブのProjectとまと
める。
● Unity部分
○ 単独で動かすとUnityのみのアプリとして起動
● ネイティブ部分
○ UnityFramework.frameworkを読み込む
Slide 30
Slide 30 text
© ZOZO Technologies, Inc.
実装における工夫点
30
そもそもUaaLはどうなっているのか？
● Unity部分
○ 上部の灰色のボタン
○ キューブや背景
● ネイティブ部分
○ 下部のカラフルなボタン
Slide 31
Slide 31 text
© ZOZO Technologies, Inc.
実装における工夫点
31
開発の中で工夫した点
1. Unityのローディングを効率化
2. 自然な画面遷移の実現
3. Unityとネイティブ間のやりとりを効率的に実装
4. UnityのBuild後に必要な設定を自動化
Slide 32
Slide 32 text
© ZOZO Technologies, Inc.
実装における工夫点
32
1. Unityのローディングを効率化
サンプルアプリでは、Unityの起動に
時間がかかっていた。
Slide 33
Slide 33 text
© ZOZO Technologies, Inc.
実装における工夫点
33
1. Unityのローディングを効率化
ローディングを効率化し、シームレスにUnity部分を表示したい。
● Unityのスプラッシュをオフにする
● アプリ起動時にAppDelegateでUnityを呼び出し、バックグラウンドで
ローディングしておく
Slide 34
Slide 34 text
© ZOZO Technologies, Inc.
実装における工夫点
34
2. 自然な画面遷移の実現
サンプルアプリでは、アニメーション
がなく、単に切り替わるだけだった。
Slide 35
Slide 35 text
© ZOZO Technologies, Inc.
実装における工夫点
35
2. 自然な画面遷移の実現
一般的なアプリでは、
NavigationControllerなどで画面遷移。
● Unity部分のViewを、
ネイティブ部分のViewControllerに
addSubViewすることで、
自然な画面遷移を実現した
Slide 36
Slide 36 text
© ZOZO Technologies, Inc.
実装における工夫点
36
3. Unityとネイティブ間のやりとりを効率的に実装
サンプルアプリでは、Unity⇄ネイティブ双方向にやりとりがされていた。
Slide 37
Slide 37 text
© ZOZO Technologies, Inc.
Unity→Unity
ネイティブ→Unity
Unity→ネイティブ
Unity→ネイティブ
37
Slide 38
Slide 38 text
© ZOZO Technologies, Inc.
実装における工夫点
38
3. Unityとネイティブ間のやりとりを効率的に実装
今回ライフサイクルを管理しているのは、ネイティブ側。
● 全てのやりとりにおいて、ネイティブ→Unityの一方向のみの呼び出し
とすることで、データの流れを把握しやすくした
Slide 39
Slide 39 text
© ZOZO Technologies, Inc.
実装における工夫点
39
3. Unityとネイティブ間のやりとりを効率的に実装
ただしネイティブはUnity内のライフサイクルを把握することはできない。
そのようなネイティブからの呼び出しを、Unity内で適切に処理できるよう
な実装が必要。
● Unity内でEventとCoroutineを実装した
Slide 40
Slide 40 text
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を抜けて続行
Slide 41
Slide 41 text
© ZOZO Technologies, Inc.
実装における工夫点
41
4. UnityのBuild後に必要な設定を自動化
サンプルアプリでは、UnityをBuildしてXcode Projectを作成した際には、
毎回いくつかの設定を手動で行う必要があった。
Slide 42
Slide 42 text
© ZOZO Technologies, Inc.
実装における工夫点
42
4. UnityのBuild後に必要な設定を自動化
Build後に毎回必要な設定をコードで自動化する。
● Unity内のOnPostprocessBuildでBuild後の設定を実装した
参考：【Unity】MirrativのEmbedding Unityを更新した話: 実践 Unity as a Library - Mirrativ tech blog
Slide 43
Slide 43 text
© ZOZO Technologies, Inc.
唯一困っていること
Slide 44
Slide 44 text
© ZOZO Technologies, Inc.
唯一困っていること
44
XcodeのシミュレータでBuildできない
UnityでBuildされたFrameworkが、
シミュレータでは正しく認識されない。
Slide 45
Slide 45 text
© ZOZO Technologies, Inc.
まとめ
Slide 46
Slide 46 text
© ZOZO Technologies, Inc.
まとめ
46
Unity as a Libraryはエキスパート向けとされているが、
先人のおかげでドキュメントも充実している。
初心者でも十分に入門可能。
Slide 47
Slide 47 text
© ZOZO Technologies, Inc.
まとめ
Unity as a Libraryに
挑戦する方の参考になれば、
幸いです
47
Slide 48
Slide 48 text
© ZOZO Technologies, Inc.
詳細は、以下の記事をご覧ください。
● Swiftで開発を行なっているiOSアプリにUnityを組み込む
（Unity as a Library） - Qiita
Appendix
48
Slide 49
Slide 49 text
MATRIXでは、新規事業開発に挑戦する仲間を募集中です。