東京都

Stadium App™ - 「Unity as a Library」を使った適材適所のアプリ設計について

文里沙, 森慶太

その他, Engineer

文里沙

株式会社スタジアムエクスペリメント / その他

フォロー

森慶太

PARTY / Engineer

フォロー

on 2021/08/23

株式会社スタジアムエクスペリメントの「Stadium App™」開発で、アプリ設計とUnity実装を担当している森慶太です。
今回の記事では、「Stadium App™」がどのような思想で、どのような設計がされているのか？を紹介していきたいと思います。

森慶太 (Keita Mori) / Engineer
大学卒業後、大手ERPパッケージ開発会社、株式会社奇兵隊の取締役CPOを経て、2019年にPARTYに参加。Androidアプリとバックエンドの開発をメインに、UX設計やグロース施策の策定など、サービスを一貫して設計・開発することを得意とする。また、「料理とプログラミングは人生を豊かにする」をモットーにCooking Programmerとしても活動をしている。
https://twitter.com/d_forest

Stadium App™は「SNS」であり、「GAME」でもある。

株式会社スタジアムエクスペリメントが開発をしている「Stadium App™」は現在、サッカークラブにおけるファンコミュニティのDXに挑戦しています。

「Stadium App™」は、SNSアプリによくある要素を持つのと同時に、スタジアムで応援しているときのような盛り上がりを派手な演出で再現する、という「GAME」のような要素も持っています。

SNSの要素を持つ部分は、スクロールやテキスト入力などのいわゆるアプリ的な操作が多いため、Native実装した方が軽快な操作感を短時間で実装できます。

一方で、GAME要素の部分は3D空間上の演出で派手に見せる必要があるので、Unityなどのゲームエンジンで実装したほうが効率的に実装できます。

また、実装を始めるときの実装メンバーのスキルセットやスケジュール的にも、Native実装とゲームエンジン実装を並行して行ったほうが良いことが分かっていました。

そのような要件で調査をしたところ、以下の二つの記事を見つけました。

【Unity】Mirrativのアバターがなんで動いているのか誰にもわからないので説明する - Mirrativ tech blog

こんにちは、よこてです。Mirrativ のアバターは Unity で動いているという話をします。Mirrativ は iOS/Android のライブ配信アプリですが、機能の一つとしてエモモ（アバター）があります。これは Unity で動いているのですが Mirrativ そのものはネイティブのモバイルアプリです。意味がわかりませんね。具体的にはオレンジの部分がネイティブで実装されていて、青い部分がUnityで実装されています。わかりにくいですね。要するに基本的にはネイティブ実装されていて、アバ

https://tech.mirrativ.stream/entry/2019/12/04/100000

ネイティブモバイルアプリケーションに Unity で作成した機能を追加できる「Unity as a Library」のご紹介 | Unity Blog

読み込み・アクティベーション・アンロードの方法とタイミングをネイティブアプリケーション内で管理するための制御機能が、Unity ランタイムライブラリによって提供されます。モバイルアプリケーションのビルドのプロセス自体は今までと変わりません。iOS アプリの Xcode プロジェクトや Android Gradle プロジェクトが Unity によって作成されます。ただし、この機能を実現するために、生成される iOS アプリの Xcode プロジェクトと Android Gradle プロジェクトの構造

https://blog.unity.com/ja/games/add-features-powered-by-unity-to-native-mobile-apps

ひとつめの記事は、MirrativeがアプリをNative実装とUnity実装のハイブリッドで作っているという内容です。
ふたつめの記事は、Mirrativeの開発方法をUnityが「Unity as a Library」として公式にサポートを始めたという内容です。

これらの記事によると、Unityはバージョン2019.3からハイブリッド実装を公式にサポートを始めたようですが、それ以前からEmbedded Unityという方法でハイブリッド実装が可能だったようです。
また、Unity as a Libraryのサンプルを見てみると、Embedded Unityでやられていることと内容はほとんど同じであることがわかりました。

つまり、すでにリリースされているアプリで実装実績があり、最新のUnityバージョンで公式にサポートされている、ということが記事を通じて分かりました。

これを受けて、「Stadium App™」はUnity as a Libraryを使って、軽快なUIが必要な箇所はNativeで実装し、3D空間で派手に演出したい箇所はUnityで実装するという設計を採用することになりました。

Unity as a Library でハイブリッド実装

Unity as a Libraryを利用すると、下記の画像のようにUnityとNaitveを重ねて実装することもできます。
「Stadium App™」では試合を応援する画面で、派手な演出をUnityで実現し、チャットやメニューなどをUnityの上にNativeのViewを重ねることで、それぞれの長所の良いとこ取りをしています。

ハイブリッド実装では、UnityとNativeの間をNative Plugin（UnityからNative）とUnity Send Message（NativeからUnity）で情報のやりとりができます。
「Stadium App™」では、Unityは演出装置と操作の受けつけにスコープを留めて、APIとのやりとりやビジネスロジックはNativeで実装し、どのような演出を表示するかをNativeからUnityに指示するような設計を採用しています。

試合を応援する画面では、自分以外のユーザーが応援している様子がリアルタイムに自分の画面でも分かるようになっています。その部分はFirebaseのCloud Firestoreをフル活用して実現しています。Cloud FirestoreはUnityからも直接使えますが、Native実装のほうが知見と実装事例が多いのと、ビジネスロジックをNativeに実装する設計にしたので、Nativeを通してUnityに反映をトリガーするようにしています。

このように、「Stadium App™」では、最新の技術を積極的に採用してアプリ開発を行っています。