---
title: Mirrativ上のライブゲームを、単体アプリとしてリリースした事例紹介
tags: 
author: [DeNA_Tech](https://www.docswell.com/user/DeNA_Tech)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/YJ6Y1Z3G7V.jpg?width=480
description: スマホだけでかんたんにゲーム配信ができるプラットフォーム「Mirrativ」。 そこでプレイできる数々の「ライブゲーム」では、配信中のゲームに視聴者が介入できる、ゲームとライブ配信が融合した次世代のゲーム体験を提供しています。 現在、ライブゲームの1つである「プリンセス＆ナイト」は、配信プラットフォームから切り離された単体アプリとしてもストアにリリースされており、Mirrativ版とアプリ版の双方が運営されています。今回はこの単体アプリ化をどのように実現、運用しているか、技術面と仕様面の双方からご紹介します。  登壇者 : 山下駿 / 株式会社ディー・エヌ・エー  --------- Game Developers Meeting Vol.62 https://gdm62.peatix.com/view
published: August 08, 24
canonical: https://www.docswell.com/s/DeNA_Tech/ZG1XX4-2024-08-08-230136
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/YJ6Y1Z3G7V.jpg)

Mirrativ上のライブゲームを、
単体アプリとしてリリースした事例紹介
山下駿
ゲームサービス事業本部開発運営統括部
第一技術部テクノロジー推進第一グループ
株式会社ディー・エヌ・エー
© DeNA Co., Ltd.
1


# Page. 2

![Page Image](https://bcdn.docswell.com/page/GJ5G4WLXJ4.jpg)

自己紹介
© DeNA Co., Ltd.
2


# Page. 3

![Page Image](https://bcdn.docswell.com/page/LE3RG4L475.jpg)

自己紹介
山下 駿
DeNA ゲームサービス事業本部
2019年株式会社ディー・エヌ・エーに入社
現在『プリンセス＆ナイト』の
リードエンジニアを担当中
小学生からゲームとゲーム制作が趣味
最近はFF14(まだ漆黒)をやりつつ、
個人制作と仕事を進める日々
© DeNA Co., Ltd.
3


# Page. 4

![Page Image](https://bcdn.docswell.com/page/8EDY1QN5EG.jpg)

今日お話したい内容
© DeNA Co., Ltd.
4


# Page. 5

![Page Image](https://bcdn.docswell.com/page/V7P6QL5DJ8.jpg)

今日お話したい内容
■ Mirrativ上で動くライブゲーム『プリンセス＆ナイト』を単体アプリにした事例紹介
● ブラウザゲーム等を アプリ化 する事例はちょくちょくあるが、
『ライブゲーム』での事例はまだ多くはない（多分)
● 何かしら参考や知見になったり、
こういうのもあるんだなぁと
楽しんで頂けたら幸い
© DeNA Co., Ltd.
5


# Page. 6

![Page Image](https://bcdn.docswell.com/page/2JV35QPGEQ.jpg)

目次
1
今回の取り組みの概要
2
アプリ化を実現した方法
3
大変だったポイント
4
まとめ
© DeNA Co., Ltd.
6


# Page. 7

![Page Image](https://bcdn.docswell.com/page/5EG36WQD7L.jpg)

1. 今回の取り組みの概要
UnityのWebGLビルド、『Mirrativ』『ライブゲーミング』
『プリンセス＆ナイト』の簡単なご紹介
+
アプリ化の概要と課題
© DeNA Co., Ltd.
7


# Page. 8

![Page Image](https://bcdn.docswell.com/page/4JQ543KX7P.jpg)

UnityのWebGLビルド について
ざっくりした紹介
© DeNA Co., Ltd.
8


# Page. 9

![Page Image](https://bcdn.docswell.com/page/K749Q1P2E1.jpg)

今回の取り組みの概要
1
5
【UnityのWebGLビルドについて】
● WebGL (Web Graphics Library)
○
OpenGL ES の API体系 をブラウザに移植した グラフィックスAPI
○
OpenGL ES 相当の API で HTML5 の Canvas へレンダリングが可能
→ ブラウザ上で GPU を使ってリッチコンテンツを表示できる！
● WebAssembly
○
ブラウザ上 でもネイティブに近い速度が出る バイナリコード の フォーマット
→ ブラウザ上で高速にプログラムを動かし、リッチコンテンツを実現できる！
© DeNA Co., Ltd.
9


# Page. 10

![Page Image](https://bcdn.docswell.com/page/LJ1KPG9K7G.jpg)

今回の取り組みの概要
1
5
【UnityのWebGLビルドについて】
■ UnityのWebGLビルド (プリナイの場合)
WebGL
Templates
index.html
IL2CPP
TemplateData/
Builds/
StreamingAssets/aa
© DeNA Co., Ltd.
.loader.js
.wasm
(WebAssembly)
C#
.framework.js
.jslib
.data
10


# Page. 11

![Page Image](https://bcdn.docswell.com/page/GJWD2KQP72.jpg)

今回の取り組みの概要
1
5
【UnityのWebGLビルドについて】
■ UnityのWebGLビルド (プリナイの場合)
ブラウザ
WebViewなど
index.html
TemplateData/
Builds/
StreamingAssets/aa
© DeNA Co., Ltd.
.loader.js
.wasm
.framework.js
.data
11


# Page. 12

![Page Image](https://bcdn.docswell.com/page/4EZGDZW6J3.jpg)

『Mirrativ』
『ライブゲーミング』
『プリンセス＆ナイト』の簡単な紹介
© DeNA Co., Ltd.
12


# Page. 13

![Page Image](https://bcdn.docswell.com/page/Y76Y1ZGLEV.jpg)

今回の取り組みの概要
1
5
【Mirrativとは】
■ 『Mirrativ』の特徴
●
スマホでかんたんにアバター配信ができる
顔出しナシのゲーム配信プラットフォーム
●
友だちの家でいっしょにゲームを
遊んでいるようなコミュニティ空間
© DeNA Co., Ltd.
13


# Page. 14

![Page Image](https://bcdn.docswell.com/page/G75G4WVM74.jpg)

今回の取り組みの概要
1
5
●
【ライブゲーミング とは】
配信中のゲームに コメント や ギフト などのアクションで視聴者が介入できる、
ゲームとライブ配信が融合した新しいゲーム体験のこと
© DeNA Co., Ltd.
14


# Page. 15

![Page Image](https://bcdn.docswell.com/page/9J2YVQ3RJR.jpg)

今回の取り組みの概要
1
5
●
【ライブゲーム とは】
この体験を提供するゲームのことを
『ライブゲーム』と呼んでいる
●
Mirrativ上のライブゲームタブ等から遊ぶことができる
© DeNA Co., Ltd.
15


# Page. 16

![Page Image](https://bcdn.docswell.com/page/DEYG3W15EM.jpg)

今回の取り組みの概要
1
5
【プリンセス＆ナイトとは】
■ 『プリンセス＆ナイト』とは
●
Mirrativ上で遊べるライブゲームの１つ
●
開発: DeNA / パブリッシャー: Mirrativ
●
大量の敵に襲われる中、制限時間まで生き残るマルチPvE
●
○
マルチは最大で配信者1人、参加者２人の計３人。
○
非配信でもソロで遊べます。
以降、略してプリナイと呼びます。
© DeNA Co., Ltd.
16


# Page. 17

![Page Image](https://bcdn.docswell.com/page/VJNGV92478.jpg)

今回の取り組みの概要
1
5
【プリナイのライブゲーミング要素の紹介】
■ ライブゲーミング固有の遊び
●
視聴者 をその場ですぐ招待して マルチプレイ
●
ギフトによるバトルへの干渉やガチャの送り合い
○
隕石投下攻撃、プレイヤー巨大化、回復アイテム投下
○
配信者と視聴者の双方が受け取れるガチャ
●
一部コメントがバトル中に右から左に流れて攻撃に
●
ゲーム内アイテムの入った ミステリーバッグ というギフト
●
配信者ランキング など Mirrativ内イベント の実施
●
ライブゲームとコラボしたエモモ
（Mirrativ内の3Dアバター）のアイテム配布
© DeNA Co., Ltd.
17


# Page. 18

![Page Image](https://bcdn.docswell.com/page/YE9W6214E3.jpg)

今回の取り組みの概要
1
5
【プリナイの構成】
Webhook
Mirrativ サーバー
ゲームサーバー
ライブゲームAPI
Mirrativ アプリ
WebView
JavaScript
API呼び出し
ギフトやコメントは
Pollingで取ってくる
WebGL
(ゲーム本体)
.jslibを使用し、
ブラウザ側の機能の呼び出しや、
ディープリンクでMirrativアプリへ処理のリクエスト
© DeNA Co., Ltd.
18


# Page. 19

![Page Image](https://bcdn.docswell.com/page/GE8NZ54V7D.jpg)

今回の取り組みの概要
1
5
【プリナイの構成】
■ ギフト受け取り表示の例
Mirrativ サーバー
Mirrativ アプリ
© DeNA Co., Ltd.
ゲームサーバー
WebView
JavaScript
WebGL
(ゲーム本体)
19


# Page. 20

![Page Image](https://bcdn.docswell.com/page/LELPDY6R7R.jpg)

今回の取り組みの概要
1
5
【プリナイの構成】
■ ギフト受け取り表示の例
Webhook
Mirrativ サーバー
ゲームサーバー
Polling
Mirrativ アプリ
© DeNA Co., Ltd.
WebView
JavaScript
WebGL
(ゲーム本体)
20


# Page. 21

![Page Image](https://bcdn.docswell.com/page/4JM4PN5P7W.jpg)

今回の取り組みの概要
1
5
【プリナイの構成】
■ ギフト受け取り表示の例
Webhook
Mirrativ サーバー
ゲームサーバー
Polling
Mirrativ アプリ
© DeNA Co., Ltd.
WebView
JavaScript
WebGL
(ゲーム本体)
21


# Page. 22

![Page Image](https://bcdn.docswell.com/page/PJRW1D3Y79.jpg)

今回の取り組みの概要
1
5
【プリナイの構成】
■ マルチへの視聴者招待の例
Webhook
Mirrativ サーバー
Mirrativ アプリ
© DeNA Co., Ltd.
ゲームサーバー
WebView
JavaScript
WebGL
(ゲーム本体)
22


# Page. 23

![Page Image](https://bcdn.docswell.com/page/PEXPY1447X.jpg)

今回の取り組みの概要
1
5
【プリナイの構成】
■ マルチへの視聴者招待の例
視聴者情報を問い合わせ
Mirrativ サーバー
ゲームサーバー
視聴者一覧
Mirrativ アプリ
© DeNA Co., Ltd.
WebView
JavaScript
WebGL
(ゲーム本体)
23


# Page. 24

![Page Image](https://bcdn.docswell.com/page/3EKD32ZPJD.jpg)

今回の取り組みの概要
1
5
【プリナイの構成】
■ マルチへの視聴者招待の例
Webhook
Mirrativ サーバー
Mirrativ アプリ
© DeNA Co., Ltd.
ゲームサーバー
WebView
JavaScript
WebGL
(ゲーム本体)
24


# Page. 25

![Page Image](https://bcdn.docswell.com/page/L73RG4D4J5.jpg)

今回の取り組みの概要
1
5
【プリナイの構成】
■ マルチへの視聴者招待の例
Webhook
Mirrativ サーバー
Mirrativ アプリ
© DeNA Co., Ltd.
ゲームサーバー
WebView
JavaScript
WebGL
(ゲーム本体)
25


# Page. 26

![Page Image](https://bcdn.docswell.com/page/87DY1QP57G.jpg)

今回の取り組みの概要
1
5
【プリナイの構成】
■ マルチへの視聴者招待の例
視聴者を招待
Mirrativ サーバー
ゲームサーバー
招待チャット
Mirrativ アプリ
© DeNA Co., Ltd.
WebView
JavaScript
WebGL
(ゲーム本体)
26


# Page. 27

![Page Image](https://bcdn.docswell.com/page/VJP6QLNDE8.jpg)

今回の取り組みの概要
1
5
【プリナイの構成】
■ マルチへの視聴者招待の例
視聴者を招待
Mirrativ サーバー
ゲームサーバー
招待チャット
Mirrativ アプリ
© DeNA Co., Ltd.
WebView
JavaScript
WebGL
(ゲーム本体)
27


# Page. 28

![Page Image](https://bcdn.docswell.com/page/2EV35QKG7Q.jpg)

今回の取り組みの概要
1
5
【プリナイの構成】
■ マルチへの視聴者招待の例
視聴者を招待
Mirrativ サーバー
ゲームサーバー
招待チャット
Mirrativ アプリ
© DeNA Co., Ltd.
WebView
JavaScript
WebGL
(ゲーム本体)
28


# Page. 29

![Page Image](https://bcdn.docswell.com/page/57G36W9DJL.jpg)

今回の取り組みの概要
1
5
【過去の登壇の紹介】
● Unity の WebGLビルド の制約の話や、Mirrativ/プリナイのより詳しい話は
過去の登壇を見て頂けると
● 大規模IPゲーム開発のDeNAが挑むMirrativライブゲーミング【DeNA TechCon 2024】
●
https://www.youtube.com/watch?v=UBWoYi-4GWE&list=PLA4bt89i8SEGwC1_K5heaq6Gut1KmvdxE&index=1
© DeNA Co., Ltd.
29


# Page. 30

![Page Image](https://bcdn.docswell.com/page/4EQ543WXJP.jpg)

アプリ化の概要と課題
© DeNA Co., Ltd.
30


# Page. 31

![Page Image](https://bcdn.docswell.com/page/KJ49Q1K271.jpg)

今回の取り組みの概要
1
5
【アプリ化の概要】
■ アプリ化とは？
●
ライブゲーム を AppStore や GooglePlay にて、
ゲーム単体で動作するアプリとしてリリースすることを指している
●
主な狙いは
○
Mirrativのインストール無しにプレイ可能にし、プリナイを目的にした
ユーザーの初回ゲームプレイまでのハードルを下げること
○
© DeNA Co., Ltd.
その後、Mirrativへの連携を促し、コアユーザーを獲得すること
31


# Page. 32

![Page Image](https://bcdn.docswell.com/page/LE1KPGXKJG.jpg)

今回の取り組みの概要
1
5
【アプリ化の課題】
■ 多数の課題が...
●
●
「Mirrativ上で動作すること」を前提としたシステムや仕様が多く存在
○
ミラコインを消費して引くことができるガチャ
○
配信者が視聴者を招待する前提のマルチのマッチング導線
○
他、アカウント周りや Mirrativアプリ/サーバーの処理を呼び出していた部分など
Mirrativ版 が既に運用されている
© DeNA Co., Ltd.
○
単体アプリ版 と Mirrativ版 を個別保守する運用コストは払えない
○
Mirrativ版 の運用を止めずに、単体アプリ版をリリースする必要がある
32


# Page. 33

![Page Image](https://bcdn.docswell.com/page/GEWD2KNPJ2.jpg)

2. アプリ化を実現した方法
技術面以外のお話も含めて紹介
© DeNA Co., Ltd.
33


# Page. 34

![Page Image](https://bcdn.docswell.com/page/47ZGDZ36E3.jpg)

アプリ化の全体像
© DeNA Co., Ltd.
34


# Page. 35

![Page Image](https://bcdn.docswell.com/page/YJ6Y1ZXL7V.jpg)

アプリ化を実現した方法
2
【アプリ化の基本方針】
■ とにかく、リリース後に運用コストがかからないように
●
ゲーム本体のリポジトリやブランチ等は分けず、リリースも区別しない
○
ネイティブアプリ化するとMirrativ版とリリースサイクルを合わせられず運用コス
トが上がるため、単体アプリでもWebGLを使用
○
起動URLに渡されたパラメータでアプリ版かどうか識別し、
ゲーム内の処理を切り替える
○
●
普段通りMirrativ版のデプロイを行えば、アプリ版もアップデートされる
仕様面でも、最低限の要件を満たすことを優先しつつ、
出来る限り対応が少なく済む仕様を模索
© DeNA Co., Ltd.
35


# Page. 36

![Page Image](https://bcdn.docswell.com/page/GJ5G4WXMJ4.jpg)

以降
Mirrativアプリ上のWebViewで動くプリナイ
→ 『Mirrativ版』
単体アプリ上のWebViewで動くプリナイ
→ 『アプリ版』
© DeNA Co., Ltd.
36


# Page. 37

![Page Image](https://bcdn.docswell.com/page/9E2YVQXRER.jpg)

アプリ化を実現した方法
2
【母艦アプリとは】
■ 実際にストアにリリースされるUnity製のネイティブアプリ部分のこと
●
WebView経由でゲーム(WebGL)の起動を行う
●
ネイティブアプリ側でしかできない操作を担当
○
WebGL(WebView)のリロードやアプリケーションの終了
○
PlayerPrefsを使用したローカルへのデータ保存(WebGLだとIndexedDBに)
○
Unity IAP、Adjust等のAPI呼び出し
●
Mirrativ社が他タイトルでアプリ化を行った際の実装をベースに若干手を加えたもの
●
他タイトルでも共通の実装とタイトル固有の実装を分離し、メンテや他タイトルへの
転用をしやすくした
© DeNA Co., Ltd.
37


# Page. 38

![Page Image](https://bcdn.docswell.com/page/D7YG3W857M.jpg)

アプリ化を実現した方法
2
【アプリ版の全体構成】
Mirrativ サーバー
母艦アプリ
ゲームサーバー
WebView
WebGL
(ゲーム本体)
gree/unity-webviewを
使用させて頂きました
© DeNA Co., Ltd.
38


# Page. 39

![Page Image](https://bcdn.docswell.com/page/VENGV9Q4J8.jpg)

アプリ化を実現した方法
2
【アプリ版の全体構成】
Mirrativ サーバー
母艦アプリ
ゲームサーバー
WebView
WebGL
(ゲーム本体)
.jslibを使用し、
ブラウザ側の機能の呼び出しや、
簡易的なメッセージシステムで母艦アプリとやり取り
© DeNA Co., Ltd.
39


# Page. 40

![Page Image](https://bcdn.docswell.com/page/Y79W62D473.jpg)

アプリ化を実現した方法
2
【アプリ版の全体構成 + Mirrativ版】
Mirrativ サーバー
© DeNA Co., Ltd.
ゲームサーバー
母艦アプリ
WebView
Mirrativ アプリ
WebView
WebGL
(ゲーム本体)
40


# Page. 41

![Page Image](https://bcdn.docswell.com/page/G78NZ53VJD.jpg)

アプリ化を実現した方法
2
【アプリ化の開発体制】
■ DeNAとMirrativの2社で連携して開発、リリースを行った
Mirrativ
DeNA
他タイトルの知見やサンプルの共有
WebGL(ゲーム)側の実装対応
母艦アプリの開発、保守、リリース
母艦アプリのタイトル固有実装
Mirrativサーバー側の実装
ゲームサーバー側の実装
アプリ版QA
Mirrativ版QA
© DeNA Co., Ltd.
41


# Page. 42

![Page Image](https://bcdn.docswell.com/page/L7LPDYVRJR.jpg)

アプリ化を実現した方法
2
【アプリ化の実際にかかったスケジュール感】
■ 段階的なリリースを行った
設計やQA期間、通常の運営に伴う作業も含めて
●
初回リリース：3ヶ月
○
●
課金なし、マルチなし
課金アップデート：2ヶ月
○
© DeNA Co., Ltd.
マルチなし
42


# Page. 43

![Page Image](https://bcdn.docswell.com/page/4EM4PNGPJW.jpg)

Mirrativ版固有の
システムや仕様への対処
© DeNA Co., Ltd.
43


# Page. 44

![Page Image](https://bcdn.docswell.com/page/PERW1DZYJ9.jpg)

アカウント周り
© DeNA Co., Ltd.
44


# Page. 45

![Page Image](https://bcdn.docswell.com/page/P7XPY194JX.jpg)

アプリ化を実現した方法
2
【アカウント周り】
■ Mirrativ版のアカウント認証方法
●
Mirrativアプリから渡される認可コードを用いた認証
○
●
Mirrativサーバーに認可コードを渡し、アクセストークンやユーザー情報を取得
MirrativアカウントIDとゲームユーザーIDを紐づけて管理
© DeNA Co., Ltd.
45


# Page. 46

![Page Image](https://bcdn.docswell.com/page/37KD32PPED.jpg)

アプリ化を実現した方法
2
【アカウント周り】
■ アプリ版のアカウント認証方法
●
当然、Mirrativ版と同じ方法での認証はできない
●
新たにアプリ版専用の、ゲームユーザーIDでの認証の仕組みを構築
○
認証に必要な情報は母艦アプリ側のPlayerPrefsに保存
■
© DeNA Co., Ltd.
WebGL側のPlayerPrefsはIndexedDBに保存されてしまい、揮発性が高い
46


# Page. 47

![Page Image](https://bcdn.docswell.com/page/LJ3RG4X4E5.jpg)

アプリ化を実現した方法
2
【アカウント周り】
■ Mirrativ連携
●
アプリ版からMirrativ版のアカウントを連携することで、
双方にて同じアカウントで遊べるように
●
ホーム画面や、Mirrativ版でしか遊べない機能の導線上に
連携ボタンを配置
●
Mirrativ連携済みかどうかは、
ユーザーデータにMirrativIDが紐づけられているかどうかで判定
○
© DeNA Co., Ltd.
連携導線の表示切替などで使用
47


# Page. 48

![Page Image](https://bcdn.docswell.com/page/8JDY1Q25JG.jpg)

アプリ化を実現した方法
2
【アカウント周り】
■ Mirrativ連携の仕様
●
Mirrativ側に既にデータがある場合：Mirrativ版のデータでアプリ版を上書き
○
●
アプリ版のローカルの認証情報をMirrativ版のもので上書き
Mirrativ側にデータがない場合：アプリ版のデータをMirrativ版に反映
○
© DeNA Co., Ltd.
アプリ版のデータにMirrativアカウントIDを紐づける
48


# Page. 49

![Page Image](https://bcdn.docswell.com/page/VEP6QL1D78.jpg)

アプリ化を実現した方法
2
【アカウント周り】
■ なぜ連携時に上書きするデータを選択できない仕様にしたのか
●
Mirrativ社の別タイトルでデータを選択できるようにしたら、
意図しないアカウントで上書きしてしまったというお問い合わせが多数
●
基本的に既にMirrativ版で遊んでいる人はアプリ版で新規データは作らない想定
↓
●
Mirrativ版のデータを優先する仕様に
●
アプリ版のデータでMirrativ版を上書きしたい場合はお問い合わせベースで対応。
○
© DeNA Co., Ltd.
数が多いようであれば対策を検討する方針に。
49


# Page. 50

![Page Image](https://bcdn.docswell.com/page/27V35QYGJQ.jpg)

アプリ化を実現した方法
2
【アカウント周り】
■ 実際のアカウント連携の流れ
© DeNA Co., Ltd.
50


# Page. 51

![Page Image](https://bcdn.docswell.com/page/5JG36WWDEL.jpg)

アプリ化を実現した方法
2
【アカウント周り】
■ 実際のアカウント連携の流れ
© DeNA Co., Ltd.
51


# Page. 52

![Page Image](https://bcdn.docswell.com/page/47Q5433XEP.jpg)

アプリ化を実現した方法
2
【アカウント周り】
■ 実際のアカウント連携の流れ
●
●
ディープリンクを使用しMirrativアプリを開く
○
未インストールの場合はストアを開く
○
この際、プリナイに制御を戻すディープリンクも送信
Mirrativアプリ側での連携の認証後、プリナイに戻してもらう
○
ストア遷移時など、認証せずに戻った場合は
プリナイ側は何もしない
© DeNA Co., Ltd.
52


# Page. 53

![Page Image](https://bcdn.docswell.com/page/KE49Q112J1.jpg)

アプリ化を実現した方法
2
【アカウント周り】
■ 実際のアカウント連携の流れ
●
アプリ側でユーザーに連携が許可されたら
ゲームサーバー側の連携APIを叩き、
Mirrativサーバー側にも通知
●
Mirrativ側のデータで上書きする場合は
ローカルのアカウント情報を更新して
アプリを再起動して完了
© DeNA Co., Ltd.
53


# Page. 54

![Page Image](https://bcdn.docswell.com/page/L71KPGGKEG.jpg)

ガチャ / 課金周り
© DeNA Co., Ltd.
54


# Page. 55

![Page Image](https://bcdn.docswell.com/page/G7WD2KKPE2.jpg)

アプリ化を実現した方法
2
【ガチャ周り：Mirrativ版では】
■ Mirrativ版では
●
画像のような形でガチャ筐体が並んでいる
© DeNA Co., Ltd.
55


# Page. 56

![Page Image](https://bcdn.docswell.com/page/4JZGDZZ673.jpg)

アプリ化を実現した方法
2
【ガチャ周り：Mirrativ版では】
■ ガチャは大きく分けて3種類
●
チケットガチャ
○
●
●
ゲーム内で配布される石やチケットを消費して引けるガチャ
ギフトガチャ
○
Mirrativ側の機能で、配信者に視聴者が送れるガチャチケットで引けるガチャ
○
配信者が引くと「配信者と視聴者の双方それぞれ」のガチャが引かれる
セルフガチャ
○
© DeNA Co., Ltd.
Mirrativ側の通貨であるミラコインを消費して引けるガチャ
56


# Page. 57

![Page Image](https://bcdn.docswell.com/page/YE6Y1ZZLJV.jpg)

アプリ化を実現した方法
2
【ガチャ周り：Mirrativ版では】
■ それぞれ、アプリ版で使用可能かどうか
●
チケットガチャ○
○
●
ギフトガチャ✕
○
●
→ アプリ版でも問題なく使用可能
→ アプリ版ではギフトを送り合うことができないので使用不可
セルフガチャ✕
○
© DeNA Co., Ltd.
→ アプリ版には当然ミラコインは無いため使用不可
57


# Page. 58

![Page Image](https://bcdn.docswell.com/page/GE5G4WWME4.jpg)

アプリ化を実現した方法
2
【ガチャ周り：アプリ版では】
■ 初回リリース時（課金なし）
●
アプリ版かどうかで表示を切り替える実装
●
チケットガチャのみで運用し、他のタブにはMirrativ連携誘導バナーを設置
© DeNA Co., Ltd.
58


# Page. 59

![Page Image](https://bcdn.docswell.com/page/972YVQQR7R.jpg)

アプリ化を実現した方法
2
【ガチャ周り：アプリ版では】
■ 課金アップデートのリリース時
●
セルフガチャのタブで課金ガチャを引けるように
© DeNA Co., Ltd.
59


# Page. 60

![Page Image](https://bcdn.docswell.com/page/DJYG3WW5JM.jpg)

アプリ化を実現した方法
2
【課金周り】
■ 課金ガチャの実装方針
●
Unity IAPを使用
○
●
ゲーム内通貨を挟まずに決済後すぐガチャを引く仕様に
○
●
メッセージを介し、母艦アプリ側でIAPを叩く
ゲーム内通貨は実装も管理もコストがかかるため
初回のみ年齢確認を実施
© DeNA Co., Ltd.
○
18歳未満は月￥20,000までの課金制限
○
サーバー側で購入可否を判定するためサーバーに保存
60


# Page. 61

![Page Image](https://bcdn.docswell.com/page/V7NGV994E8.jpg)

アプリ化を実現した方法
2
【課金周り】
■ 課金周りのエラーハンドリング
●
決済キャンセルや失敗、コンビニ後払い、ゲームのクラッシュなど
●
未処理のレシートがない場合は特に何もしない
●
未処理のレシートがある場合
○
右のようなダイアログを表示し、処理を再開する
○
Mirrativサーバーを介してストアAPIを呼び出し
レシートのステータスを取得
○
ステータスと各サーバーの状態に従い、
課金効果付与→クローズ処理まで行う
© DeNA Co., Ltd.
61


# Page. 62

![Page Image](https://bcdn.docswell.com/page/YJ9W6224J3.jpg)

マルチプレイ周り
© DeNA Co., Ltd.
62


# Page. 63

![Page Image](https://bcdn.docswell.com/page/GJ8NZ55VED.jpg)

アプリ化を実現した方法
2
【マルチプレイ周り：Mirrativ版では】
■ Mirrativ版では
●
●
配信では、配信者が部屋を立てて
○
視聴者を招待する
○
ランダム募集
非配信では『みんなであそぶ』を選択すると
ランダム募集してる配信者の部屋へランダムに参加
○
© DeNA Co., Ltd.
配信視聴状態になる
63


# Page. 64

![Page Image](https://bcdn.docswell.com/page/LJLPDYYRER.jpg)

アプリ化を実現した方法
2
【マルチプレイ周り：アプリ版では】
■ アプリ版では
●
現状はマルチプレイは不可
○
●
配信と紐づかないマッチングの仕組みが必要
非配信とほぼ同じ導線だが
『みんなであそぶ』を選択するとMirrativ連携導線へ遷移
© DeNA Co., Ltd.
64


# Page. 65

![Page Image](https://bcdn.docswell.com/page/47M4PNNPEW.jpg)

その他
© DeNA Co., Ltd.
65


# Page. 66

![Page Image](https://bcdn.docswell.com/page/P7RW1DDYE9.jpg)

アプリ化を実現した方法
2
【その他：ミステリーバッグ周り】
■ 配信者に投げられるゲーム内アイテム『ミステリーバッグ』
●
●
Mirrativアプリ側の配信視聴画面から送ることができる
○
強化素材やダイヤ（無料ガチャ石）等が入手可能
○
送り側、送られ側の双方が貰える
Mirrativ版含め、ゲーム中は所持数の確認だけ
○
© DeNA Co., Ltd.
アプリ版ではMirrativ誘導ボタンを配置
66


# Page. 67

![Page Image](https://bcdn.docswell.com/page/PJXPY114EX.jpg)

アプリ化を実現した方法
2
【その他：チャット周りの非表示対応】
■ チャット表示欄
●
配信のコメントが表示される
○
ゲーム側からチャット送信はできない
○
代わりにゲーム内専用のスタンプを送ることができる
●
バトル画面では非表示に
●
ホーム画面ではMirrativ連携バナーに差し替え
© DeNA Co., Ltd.
67


# Page. 68

![Page Image](https://bcdn.docswell.com/page/3JKD322P7D.jpg)

アプリ化を実現した方法
2
【その他：アカウント削除導線の追加】
■ アカウント削除メニューの追加
●
GooglePlayのポリシーに従い実装
●
アプリ版のみ表示
●
ローカルに保存した認証情報等をすべてリセットし、
ゲーム再起動後、新規アカウント作成の導線になるように
○
© DeNA Co., Ltd.
連携していても、Mirrativ側は旧アカウントデータのまま
68


# Page. 69

![Page Image](https://bcdn.docswell.com/page/LE3RG44475.jpg)

アプリ化を実現した方法
2
【その他：お問い合わせメニューの作成】
■ オプションから、お問い合わせメール送信画面を開けるように
●
Mirrativ版ではMirrativアプリ側でお問い合わせ可能
●
お問い合わせテンプレートを記載したメールをディープリンクで開く
○
© DeNA Co., Ltd.
端末のメールアプリが開く
69


# Page. 70

![Page Image](https://bcdn.docswell.com/page/8EDY1QQ5EG.jpg)

アプリ化を実現した方法
2
【その他：ミッション周り】
■ ミッションの出し分け
●
Mirrativ版でしか達成できない条件がある
○
視聴者として配信でギフトを一回贈ろう、など
●
マスタにアプリ版かMirrativ版かによる表示切替フラグを用意
●
アプリ版のデイリーミッションでクリア不可なものは非表示に
○
© DeNA Co., Ltd.
他のミッションも、必要に応じて個別フラグを設定
70


# Page. 71

![Page Image](https://bcdn.docswell.com/page/V7P6QLLDJ8.jpg)

アプリ化を実現した方法
2
【その他：ミッション周り】
■ 連携ミッションの実現方法
●
Mirrativ連携すると『★3確定ガチャチケ5枚』
●
Mirrativ版へのログインで達成できるミッション条件を追加
○
Mirrativ版で遊んでる人は起動するだけで達成可能
■
○
© DeNA Co., Ltd.
アプリ版をインストールしなくてもチケットが貰える
連携の検知も不要で工数的にも安く済んだ
71


# Page. 72

![Page Image](https://bcdn.docswell.com/page/2JV35QQGEQ.jpg)

アプリ化を実現した方法
2
●
【その他：利用規約、プライバシーポリシーなど】
利用規約とプライバシーポリシーに同意しないとタイトルから進めないように
○
各ページはWebページで実装している
○
アプリ版とMirrativ版で文言が違うため、アプリ版では接続先のURLを切り替え
●
新たにOSS等の使用が増えたためライセンスページに追記
●
iOSのATT対応
○
© DeNA Co., Ltd.
母艦側でWebGL起動前にAdjustを使用し表示
72


# Page. 73

![Page Image](https://bcdn.docswell.com/page/5EG36WND7L.jpg)

アプリ化を実現した方法
2
【その他：強制アップデート】
■ 母艦アプリ側のアップデートが必要な場合の導線
●
WebGL側にハードコーディングで母艦アプリの最低バージョンを指定
●
最低バージョンを下回っていたら、ダイアログで更新を要求
●
○
初期化導線の中でメッセージでバージョンを受信
○
ボタンを押すとストアへ遷移させる
WebGL側はWebGL側で強制アップデートの仕組みがある
○
サーバー通信時に最低バージョンを下回っていたら
ダイアログを表示してゲームを終了させる
© DeNA Co., Ltd.
73


# Page. 74

![Page Image](https://bcdn.docswell.com/page/4JQ543QX7P.jpg)

3. 大変だったポイント
© DeNA Co., Ltd.
74


# Page. 75

![Page Image](https://bcdn.docswell.com/page/K749Q1N2E1.jpg)

大変だったポイント
3
【シンプルにやることが多かった】
■ アプリ化に限った話ではないが...
●
実装作業はもちろん、それ以外の対応も多かった
●
必要な対応の洗い出しと影響範囲の確認
○
前例が少ないので手探りな部分が多かった
■
○
Mirrativ社に前例と知見があったため、かなり助かりました
技術的な観点だけでなく仕様面での解決も検討し、コストを抑える必要があった
●
各所とのスケジュールの調整
●
２社間の連携の模索
●
技術面のキャッチアップ
© DeNA Co., Ltd.
75


# Page. 76

![Page Image](https://bcdn.docswell.com/page/LJ1KPG5K7G.jpg)

大変だったポイント
3
●
●
【課金対応】
アプリ化に限らず、１から課金対応を実装するのがそもそも大変
○
コンビニ後払い対応に伴うエラーハンドリングとか...
○
既にみんな経験されてると思うので、省略
課金で直接ガチャが引かれる仕組みにしたため、エラーハンドリングに工夫が必要
だった
○
1連ガチャ/10連ガチャといった単位で商品を登録していた
○
決済を済ませた未処理のレシートから分かるのは「1連ガチャ/10連ガチャを購入
した」という情報だけなので、実際に購入しようとしたガチャの識別情報は別途
管理する必要があった
© DeNA Co., Ltd.
76


# Page. 77

![Page Image](https://bcdn.docswell.com/page/GJWD2K5P72.jpg)

大変だったポイント
3
●
【Mirrativ版の運用をしながらの開発、リリース】
リリースをアプリ版とMirrativ版で分けないため、Mirrativ版の運用で影響が出ないよ
うにスケジュール調整等を行う必要があった
●
開発中も本流にマージする方針で進め、アプリ版の対応が間に合わなかった場合でも
うまく機能を塞ぐなどして、そこまでの差分をリリースに含めてしまう方針
●
課金リリース時に１度スケジュールを後ろにずらしたが、そもそも「Mirrativ版でアプ
リ版固有の導線は塞ぐ」作りだったこともあり、結果としてMirrativ版への影響はほぼ
なく済んだため、思っていたよりは楽に対応できた
© DeNA Co., Ltd.
77


# Page. 78

![Page Image](https://bcdn.docswell.com/page/4EZGDZN6J3.jpg)

大変だったポイント
3
●
【２社での連携の模索】
今後の運用や他タイトルへの転用を考えた時、どう分けるのがベストか、
手探りで模索していったため、大変だった
●
両社のQAのスケジュール調整や、リリースタイミングの調整なども、
初の試みで工数が見えづらいこともあり、大変だった
○
© DeNA Co., Ltd.
柔軟なスケジュール調整ができる体制が本当にありがたかった
78


# Page. 79

![Page Image](https://bcdn.docswell.com/page/Y76Y1Z8LEV.jpg)

大変だったポイント
3
●
【デバッグ】
母艦アプリとWebGLを繋ぎこんだ状態で動作確認をしたい時に
両方のビルドが必要だったり、WebGL側にブレークポイントを貼れない
○
課金周りの動作確認がとにかく辛かった
○
WebGLはURL開くだけですぐデバッグできるので、そのスピード感に慣れると、
そもそもネイティブアプリを端末にインストールするのがしんどい...
○
繋ぎこみが必要なパターンが多くなかったので用意しなかったが、母艦アプリ側
のログをWebGL側でも出力するなど、母艦アプリとWebGLの双方のログを同時か
つ時系列順に確認できるようにしたほうが良かった
© DeNA Co., Ltd.
79


# Page. 80

![Page Image](https://bcdn.docswell.com/page/G75G4W9M74.jpg)

4. やってみた感想とまとめ
© DeNA Co., Ltd.
80


# Page. 81

![Page Image](https://bcdn.docswell.com/page/9J2YVQ2RJR.jpg)

4
やってみた感想とまとめ
● 運用しながらのアプリ化はそれなりに大変
○
正直、それなりに思い切った対応を行ってコストを削ったものの、
トータルで約半年近い期間が必要だった。
■
© DeNA Co., Ltd.
ただ、知見が溜まった今ならもっと早く実現できるはず
81


# Page. 82

![Page Image](https://bcdn.docswell.com/page/DEYG3WY5EM.jpg)

4
やってみた感想とまとめ
● 一方で、WebGLでの開発に可能性を感じた
○
○
様々なプラットフォームやアプリにさくっと組み込めるのはやはり凄い
■
起動するだけならすぐできた
■
どちらかというと仕様面での課題が多かった
仕様面やシステム面が予めアプリ化に耐えうる仕組みなら、もっと低コストで移
植ができるはず。
■
開発初期からアプリ化の機運があるのであれば、それ前提のシステムや仕様
に寄せておくのが無難。
© DeNA Co., Ltd.
82


# Page. 83

![Page Image](https://bcdn.docswell.com/page/VJNGV9P478.jpg)

© DeNA Co., Ltd.
83