はじめに
こんにちは、計測プラットフォーム開発本部アプリ部の中岡、永井、東原です。私たちのチームではZOZOMAT、ZOZOGLASSといった既存の計測機能の改善と、新規計測アプリの研究開発を担当しています。
その新規計測アプリとして、ZOZOFITというボディーマネジメントサービスを2022年の夏に米国でローンチしました。この記事では、ZOZOFITのiOSアプリを新規開発するにあたって、どのような技術要素を取り入れたかについてご紹介します。
目次
ZOZOFITとは
ZOZOFITは、ZOZOグループのZOZO Apparel USA, Inc.が提供するボディーマネジメントサービスであり米国でサービス提供をしています。
初代ZOZOSUITよりも大幅に計測精度を向上させたZOZOSUITを着用し、専用のスマートフォンアプリを利用することで手軽に3Dボディースキャンを行い、計測データをトラッキングできます。
計測可能な箇所は、肩幅、胸囲、腕周囲、ウエスト周囲、ヒップ周囲、太もも周囲、ふくらはぎ周囲の7箇所であり、体脂肪率も測定されます。計測データは下の画像のようにアプリ上で確認でき、過去のデータとの比較やグラフ表示が可能です。また、目標の管理機能によりそれぞれの計測部位について目標を設定でき、達成状況を確認できます。
開発についてはグループ会社であるZOZO New Zealandと協業して進めています。プロジェクト全体の話は下記の記事がありますので、ぜひご覧ください。
計測機能とその実装・統合
計測プラットフォーム開発本部アプリ部の永井です。ここでは、ZOZOFITの主要機能である計測機能の詳細と、その計測機能がiOSアプリへどのように実装・統合されているかについて説明します。
計測機能について
まずは、計測機能がどのようなものかをユーザー視点で説明していきます。
計測は、スーツを着用したユーザーの全身をスマートフォンの背面カメラで360度撮影することによって行われます。以下の図は、アプリ内のチュートリアルで使われているものです。
このように計測時、ユーザーはスマートフォンをスタンドに立てかけ、そこから2mほど離れた場所に立つ必要があります。そして、その場で体を0時から12時まで回転させながら、合計12枚の写真を撮影します。
計測の最中、ユーザーには背面カメラが向けられていて画面を見ることができないため、計測を進めるための案内はすべて音声により行われます。
そうして案内に沿って計測を完了させると、アプリ上で全身の3Dモデルと計測データを見ることできます。以下の図は実際のアプリ画面です。
このように自身の身体の気になる部位について、いろいろな角度から3Dモデルを見たり、計測データの変化をグラフで追ったりできます。
計測機能の実装・統合について
計測機能の実装・統合の説明にあたって、先に計測機能のアルゴリズムを紹介します。詳細は伏せますが、簡略化すると以下のようになります。
- ZOZOSUITを着用したユーザーを360度、12枚の写真として撮影
- ユーザーとスマートフォンとの距離やユーザーの身体の回転具合などに問題がないかをチェックする
- 撮影した写真を画像処理
- スーツ全体に施されたドットマーカーのパターン認識
- ユーザーの身体のシルエット検出
- 画像処理の結果から3Dモデルを生成
- 生成された3Dモデルから各部位の計測データが得られる
このアルゴリズムはZOZO New Zealandが開発したC++ライブラリによって提供されており、その中で、OpenCVやMediaPipeのような画像処理・機械学習のライブラリが使われています。MediaPipeはソースコードが公開されており、利用したい機能をZOZOFIT向けにカスタマイズできることから採用に至りました。
また、計測結果の3Dモデル描画は、WebGL（Three.js）で実装されたものをWeb Viewで表示する仕組みとなっており、iOSアプリではWKWebViewが使われています。
計測機能がこのような実装となっている大きな理由は、クロスプラットフォームのためです。ZOZOFITはAndroid・iOSの2つのプラットフォームでアプリを展開しており、主要機能である計測機能については両プラットフォームで共通のものを提供することが重要でした。そのためネイティブとは切り離された、両プラットフォームに対応する技術を用いて実装されています。
ZOZOFITに限らず、これまでのZOZOMATやZOZOGLASSといった計測プロダクトでもクロスプラットフォームは大きな関心事でした。これまでの計測プロダクトについては下記の記事がありますので、興味があればぜひご覧ください。
techblog.zozo.com techblog.zozo.com
さて、以下の図は、計測機能がどのように統合されているかを示したものです。
iOSアプリのリポジトリ内で、サブモジュールとして計測ライブラリと3D Model Viewerのリポジトリを参照しています。計測ライブラリについては、CMakeコマンドによりXcodeプロジェクトを生成することで、ワークスペース内で利用できるようにしています。
iOSアプリの技術要素
計測プラットフォーム開発本部アプリ部の中岡です。ここではZOZOFIT iOSの技術要素について説明します。
使用技術
2023年3月時点では以下のような技術構成となっています。
- 開発言語：Swift 5.7
- 対応OS：iOS 15~
- UIフレームワーク：SwiftUI(一部UIKit)
- CI/CD：Bitrise
- パッケージ管理：Swift Package Manager
- ライブラリ：Factory、Charts、SwiftGen、SwiftLint、 swift-snapshot-testing など。
- その他ツール：Figma、TestFlight、Firebase
対応OS
基本的に最新バージョンから1つ前のメジャーバージョンまでをサポートする方針となっています。開発当初はiOS 16がリリースされていなかったのですが、ZOZOFITがリリースされる2022年8月にはiOS 16がリリースされているということもあり開発当初からiOS 15~で開発していました。
また、開発体験に関してはiOS 14をサポートするより向上はしましたが、本アプリ開発においてそこまで大きく変わったという印象はありませんでした。
UIフレームワーク
基本的にSwiftUIをベースに開発していますが、一部実装が困難な部分はUIKitを使用しています。具体的には以下の図のように最前面にローディング画面を表示することがSwiftUIだけでは困難でした。そのためUIKitのUIWindowを使用して最前面に表示しています。
CI/CD
CI/CDにはBitriseを使用しており、PRが作られた際に自動でテストを実行するワークフローとApp Store Connectにアップロードするワークフローがあります。また、これらの設定のbitrise.ymlは同リポジトリで管理しています。
パッケージ管理
パッケージの管理は全てSwift Package Managerで行なっています。また、SwiftLintやSwiftGenといったツールもプラグイン機能を活用しバージョン管理をしています。
その他ツール
デザイン、テスト用アプリの配布はそれぞれFigma、TestFlightを使用しています。また、FirebaseはCrashlytics、Analytics、Dynamic Linksを使用するために導入しています。Analyticsの導入については下記の記事を公開しているので興味がある方はこちらをご覧ください。
アーキテクチャ
基本的に以下のようなView、Config、Managerという構成をとっています。
- View
- いわゆる見た目の部分です。
SwiftUI.Viewで書かれており、ユーザからのイベントをConfigに渡します。
- いわゆる見た目の部分です。
- Config
- MVVMでいうViewModelのような役割です。
ObservableObjectプロトコルに準拠したオブジェクトでViewの状態管理や受け取った値をManagerに渡します。
- MVVMでいうViewModelのような役割です。
- Manager
- MVVMでいうModelのような役割です。アプリのビジネスロジック部分で計測アルゴリズムの実行や、計測データの管理などを行なっています。
プロジェクト構成
ZOZOFIT iOSのプロジェクト構成は以下の図のようになっています。コアロジックや共通コンポーネント、カスタムModifier等をパッケージ化しそれらをXcodeプロジェクトから呼び出しています。
今後の課題
ローンチからまだ1年足らずということもあり、現状のZOZOFIT iOSにはいくつかの課題が残っています。
まずは、テストが行いづらいという点が挙げられます。現在一部のManagerが@Publishedプロパティを持っておりObservableObjectとしてViewから参照されています。Mock化するためにこれらのProtocolを定義したいのですが、SwiftのProtocolでは@Publishedプロパティを定義できずコンパイルエラーとなってしまいます。そのためこれらのManagerに依存しているViewやConfigのテストが行いづらくなってしまっています。加えて、ZOZOFITはプロダクトの特性上、カメラやセンサデータを使用するため計測機能をデバッグするには実機で動かす必要があり時間と手間がかかるといった課題もあります。これについては、カメラを使わず事前に用意した画像を読み込むようにすることで改善できます。ZOZO New Zealandの開発チームがSDKを作成する際にそのような機能を持つアプリを用意していたので、その機能をZOZOFITアプリにも取り込めると良いなと思っています。
また、計測機能の統合方法についても改善の余地があります。現在はCMakeによって、C++で書かれた計測ライブラリのXcodeプロジェクトを生成し、ワークスペース内で統合するというアプローチをとっています。しかし、理想的には計測ライブラリをXCFramework化して、統合することがよりシンプルで望ましいと考えています。
効率的に開発をするためにも今後チームで話し合いこれらの課題は解決していきたいです。
おわりに
ZOZOFITのiOSアプリについてその全体像をご紹介しました。アプリは昨年リリースされたばかりであり、より多くのユーザーに使っていただくために改善や新機能の追加を行なっています。例えば現在は機能開発に加えて、データをより活用できるようにGoogle Analyticsの測定箇所を見直したり分析レポートの作成に取り組んでいます。ZOZOFITはZOZO New Zealandとの協業のプロジェクトであり関係者が多く言語の壁もあるので簡単なプロジェクトではありませんが、プロジェクト全体の改善も行いながら進めているところです。
これからのグロースを目指し、海外チームと協業しながらSwiftUIを利用してiOSアプリ開発をしていく、ということに少しでも興味のある方は以下のリンクからぜひご応募ください。
