1
/
5

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

株式会社スタジアムエクスペリメントの「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™」では、最新の技術を積極的に採用してアプリ開発を行っています。

一緒にサービスを創ってくれるエンジニアを募集中!

株式会社スタジアムエクスペリメントでは、積極的に最新技術を使って設計・開発したいエンジニアを募集しています。

ぜひ気軽にカジュアル面談に応募してください。転職意向がなくても、今回紹介した設計や利用している技術をもっと詳しく聞いてみたい、という理由で応募いただいても大丈夫です!


Unityエンジニア
バーチャル空間でサッカーサポーターコミュニティを作るUnityエンジニア
私たちは、未来の体験を社会実装するクリエイティブ集団 ・PARTYが設立した、5G時代を見据えてサッカー観戦のデジタル・トランスフォーメーション(DX)を実現していく会社です。 サービスの第1弾として「スタジアムアプリ™️」(※商標登録申請中)を開発・提供します。これは、スタジアムとサポーターの熱狂を可視化し、サッカー観戦がもっと楽しくなる「サポーティング・アプリ」です。Jリーグ加盟4クラブ、JFL1クラブとパートナーシップを締結し、ともにトライを繰り返しながら各クラブ専用のアプリとしてサービスを提供していきます。 ----- 【導入クラブ】 ■J1/ 北海道コンサドーレ札幌:STADIUM CONSADOLE(スタジアム コンサドーレ) ■J1/ 清水エスパルス:S-PULSE STADIUM(エスパルス スタジアム) ■J1/ サンフレッチェ広島:SAPORTA(サポルタ) ■J2/ FC町田ゼルビア:ZEL-STA(ゼルスタ) ■JFL/ 奈良クラブ:N.GO(エヌゴー) ----- さらにパートナーとして「スタジアムアプリ™️」を導入するJリーグ加盟クラブからのオファーを受け付けています。第2弾クラブの導入開始は2021年シーズン開幕時を予定しています。
株式会社スタジアムエクスペリメント
バックエンドエンジニア
スタジアム体験を拡張する新サービスのバックエンドエンジニア募集!
私たちは、未来の体験を社会実装するクリエイティブ集団 ・PARTYが設立した、5G時代を見据えてサッカー観戦のデジタル・トランスフォーメーション(DX)を実現していく会社です。 サービスの第1弾として「スタジアムアプリ™️」(※商標登録申請中)を開発・提供します。これは、スタジアムとサポーターの熱狂を可視化し、サッカー観戦がもっと楽しくなる「サポーティング・アプリ」です。Jリーグ加盟4クラブ、JFL1クラブとパートナーシップを締結し、ともにトライを繰り返しながら各クラブ専用のアプリとしてサービスを提供していきます。 ----- 【導入クラブ】 ■J1/ 北海道コンサドーレ札幌:STADIUM CONSADOLE(スタジアム コンサドーレ) ■J1/ 清水エスパルス:S-PULSE STADIUM(エスパルス スタジアム) ■J1/ サンフレッチェ広島:SAPORTA(サポルタ) ■J2/ FC町田ゼルビア:ZEL-STA(ゼルスタ) ■JFL/ 奈良クラブ:N.GO(エヌゴー) ----- さらにパートナーとして「スタジアムアプリ™️」を導入するJリーグ加盟クラブからのオファーを受け付けています。第2弾クラブの導入開始は2021年シーズン開幕時を予定しています。
株式会社スタジアムエクスペリメント
iOSエンジニア
5Gでサッカー観戦に革命を起こす新サービスのiOSエンジニアを募集!
私たちは、未来の体験を社会実装するクリエイティブ集団 ・PARTYが設立した、5G時代を見据えてサッカー観戦のデジタル・トランスフォーメーション(DX)を実現していく会社です。 サービスの第1弾として「スタジアムアプリ™️」(※商標登録申請中)を開発・提供します。これは、スタジアムとサポーターの熱狂を可視化し、サッカー観戦がもっと楽しくなる「サポーティング・アプリ」です。Jリーグ加盟4クラブ、JFL1クラブとパートナーシップを締結し、ともにトライを繰り返しながら各クラブ専用のアプリとしてサービスを提供していきます。 ----- 【導入クラブ】 ■J1/ 北海道コンサドーレ札幌:STADIUM CONSADOLE(スタジアム コンサドーレ) ■J1/ 清水エスパルス:S-PULSE STADIUM(エスパルス スタジアム) ■J1/ サンフレッチェ広島:SAPORTA(サポルタ) ■J2/ FC町田ゼルビア:ZEL-STA(ゼルスタ) ■JFL/ 奈良クラブ:N.GO(エヌゴー) ----- さらにパートナーとして「スタジアムアプリ™️」を導入するJリーグ加盟クラブからのオファーを受け付けています。第2弾クラブの導入開始は2021年シーズン開幕時を予定しています。
株式会社スタジアムエクスペリメント
Androidエンジニア
スポーツ観戦に新たなカルチャーを呼び覚ます!Androidエンジニア募集!
私たちは、未来の体験を社会実装するクリエイティブ集団 ・PARTYが設立した、5G時代を見据えてサッカー観戦のデジタル・トランスフォーメーション(DX)を実現していく会社です。 サービスの第1弾として「スタジアムアプリ™️」(※商標登録申請中)を開発・提供します。これは、スタジアムとサポーターの熱狂を可視化し、サッカー観戦がもっと楽しくなる「サポーティング・アプリ」です。Jリーグ加盟4クラブ、JFL1クラブとパートナーシップを締結し、ともにトライを繰り返しながら各クラブ専用のアプリとしてサービスを提供していきます。 ----- 【導入クラブ】 ■J1/ 北海道コンサドーレ札幌:STADIUM CONSADOLE(スタジアム コンサドーレ) ■J1/ 清水エスパルス:S-PULSE STADIUM(エスパルス スタジアム) ■J1/ サンフレッチェ広島:SAPORTA(サポルタ) ■J2/ FC町田ゼルビア:ZEL-STA(ゼルスタ) ■JFL/ 奈良クラブ:N.GO(エヌゴー) ----- さらにパートナーとして「スタジアムアプリ™️」を導入するJリーグ加盟クラブからのオファーを受け付けています。第2弾クラブの導入開始は2021年シーズン開幕時を予定しています。
株式会社スタジアムエクスペリメント
株式会社スタジアムエクスペリメント's job postings

Weekly ranking

Show other rankings