Slide 1
Slide 1 text
SINoALICE -シノアリス-
Google Cloud Firestoreを
用いた観戦機能の実現について
株式会社ポケラボ サーバーエンジニア
山口 拓郎
Slide 2
Slide 2 text
• 本公演のターゲット
• Google Cloud Firestoreに興味がある方
• シノアリスのリアルタイムバトルのシステムに興味がある方
はじめに
2
Slide 3
Slide 3 text
• 山口 拓郎（Takuro Yamaguchi）
• 2016年新卒エンジニアとしてポケラボに入社
• AKB48ステージファイター2 バトルフェスティバル
• SINoALICE -シノアリス-
• 新卒から現在に至るまでサーバーサイドエンジニアとして従事
自己紹介
3
Slide 4
Slide 4 text
本日の流れ
4
1.シノアリスとは
2.観戦機能とは
3.コロシアムのシステム紹介
4.発生した課題と解決方法について
Slide 5
Slide 5 text
1.シノアリスとは
5
Slide 6
Slide 6 text
シノアリスとは
6
Slide 7
Slide 7 text
シノアリスとは
7
• リアルタイム通信対戦『コロシアム』
について
• シノアリスのメインコンテンツである、
ギルド対抗バトル
• 最大15人のギルドメンバーと協力し、
対戦ギルドの”イノチ”を奪い合う
• 1回20分間の対戦で、より多くの”イノ
チ”を獲得した方の勝利
Slide 8
Slide 8 text
2. 観戦機能とは
8
Slide 9
Slide 9 text
観戦機能について(始まり)
9
• コロシアムで世界１位のギルドを決める
「WORLD GRAN COLOSSEUM」を開催
Slide 10
Slide 10 text
観戦機能について(始まり)
10
• コロシアムで世界１位のギルドを決める
「WORLD GRAN COLOSSEUM」を開催
• 実際に出場するお客様だけでなく
• 出場されないお客様にも一緒になって楽しんでもらえるよう
様々な検討を重ねた結果
• 世界一を決める激戦をみんなで観戦・応援できる仕組みを導入
することとなりました
Slide 11
Slide 11 text
観戦機能について(始まり)
11
• コロシアムで世界１位のギルドを決める
「WORLD GRAN COLOSSEUM」を開催
• 実際に出場するお客様だけでなく
• 出場されないお客様にも一緒になって楽しんでもらえるよう
様々な検討を重ねた結果
• 世界一を決める激戦をみんなで観戦・応援できる仕組みを導入
することとなりました
※開発画面
Slide 12
Slide 12 text
観戦機能について(始まり)
12
• コロシアムで世界１位のギルドを決める
「WORLD GRAN COLOSSEUM」を開催
• 実際に出場するお客様だけでなく
• 出場されないお客様にも一緒になって楽しんでもらえるよう
様々な検討を重ねた結果
• 世界一を決める激戦をみんなで観戦・応援できる仕組みを導入
することとなりました
Slide 13
Slide 13 text
観戦機能について(技術方針)
13
Slide 14
Slide 14 text
観戦機能について(技術方針)
14
Slide 15
Slide 15 text
観戦機能について(技術方針)
15
Slide 16
Slide 16 text
Cloud Firestore
観戦機能について(技術方針)
16
• 柔軟な階層型データ構造に対応
• リアルタイムアップデート
• Firebase Unity SDK から扱える
• シノアリスのアプリには既に導入済みだった
Slide 17
Slide 17 text
3. コロシアムのシステム紹介
17
Slide 18
Slide 18 text
コロシアムのシステム紹介(構成)
18
Slide 19
Slide 19 text
コロシアムのシステム紹介(構成)
19
● Unity 2018.4.2f1
● Apache / PHP(7.0)
● Amazon Aurora
MySQL
● Memcached
● CDN(Akamai)
Slide 20
Slide 20 text
コロシアムのシステム紹介(構成)
20
● ポケラボ謹製
リアルタイム通信サーバ
(通称「Reflector」)
○ Java
○ クライアントと常時接続
○ Appサーバが提供する
HTTPサービスを定期的に
実行
○ データストアとして
Hazelcastを利用
Slide 21
Slide 21 text
コロシアムのシステム紹介(状態同期)
21
1
1. App サーバへ現在の状態を取得す
る HTTP サービスを実行
Slide 22
Slide 22 text
コロシアムのシステム紹介(状態同期)
22
1
1. App サーバへ現在の状態を取得す
る HTTP サービスを実行
2. 現在の状態を Reflector に返却
2
Slide 23
Slide 23 text
コロシアムのシステム紹介(状態同期)
23
1
1. App サーバへ現在の状態を取得す
る HTTP サービスを実行
2. 現在の状態を Reflector に返却
3. App サーバから返却された状態を
Client に転送
2
3
Slide 24
Slide 24 text
コロシアムのシステム紹介(状態同期)
24
1
1. App サーバへ現在の状態を取得す
る HTTP サービスを実行
2. 現在の状態を Reflector に返却
3. App サーバから返却された状態を
Client に転送
4. 転送された状態を元に画面同期
2
3
4
Slide 25
Slide 25 text
コロシアムのシステム紹介(ユーザー行動)
25
1. 武器使用などのユーザーの行動メ
ッセージを送信
1
Slide 26
Slide 26 text
コロシアムのシステム紹介(ユーザー行動)
26
2
1. 武器使用などのユーザーの行動メ
ッセージを送信
2. App サーバへユーザーの行動を
登録する HTTP サービスを実行
1
Slide 27
Slide 27 text
コロシアムのシステム紹介(ユーザー行動)
27
2
1. 武器使用などのユーザーの行動メ
ッセージを送信
2. App サーバへユーザーの行動を
登録する HTTP サービスを実行
3. 行動に基づいた処理を実行、結果
を Reflector に返却
3
1
Slide 28
Slide 28 text
コロシアムのシステム紹介(ユーザー行動)
28
2
1. 武器使用などのユーザーの行動メ
ッセージを送信
2. App サーバへユーザーの行動を
登録する HTTP サービスを実行
3. 行動に基づいた処理を実行、結果
を Reflector に返却
4. 返却された結果を Client に転送
3
4
1
Slide 29
Slide 29 text
コロシアムのシステム紹介(Firestore導入:戦況)
29
Slide 30
Slide 30 text
コロシアムのシステム紹介(Firestore導入:戦況)
30
1. Reflector から App サーバへ
HTTP サービスを実行
1
Slide 31
Slide 31 text
コロシアムのシステム紹介(Firestore導入:戦況)
31
1. Reflector から App サーバへ
HTTP サービスを実行
2. 結果を Reflector に返却すると共
に Firestore へ書き込み 1
2
Slide 32
Slide 32 text
コロシアムのシステム紹介(Firestore導入:戦況)
32
1. Reflector から App サーバへ
HTTP サービスを実行
2. 結果を Reflector に返却すると共
に Firestore へ書き込み
3. Firestore 上のデータ読み取り
1
2
3
Slide 33
Slide 33 text
コロシアムのシステム紹介(Firestore導入:チャット)
33
Slide 34
Slide 34 text
コロシアムのシステム紹介(Firestore導入:チャット)
34
1. Client から App サーバへ
メッセージ送信
1
Slide 35
Slide 35 text
コロシアムのシステム紹介(Firestore導入:チャット)
35
1. Client から App サーバへ
メッセージ送信
2. 結果を Firestore へ書き込み
2
1
Slide 36
Slide 36 text
コロシアムのシステム紹介(Firestore導入:チャット)
36
1. Client から App サーバへ
メッセージ送信
2. 結果を Firestore へ書き込み
3. Firestore 上のデータ読み取り
2
3
1
Slide 37
Slide 37 text
Firesto 上のデータ構造(仕様)
37
• Cloud Firestore はNoSQL ドキュメント指向データベース
• データは「ドキュメント」に格納し
それが「コレクション」にまとめられる
Slide 38
Slide 38 text
Firesto 上のデータ構造
38
collection1
コロシアムの
基本情報
対戦開始時
ギルド情報
メンバー情報
イベント情報 など
collection2
ユーザーの
行動履歴
ユーザー1行動毎
ユーザーID
攻撃対象
ダメージ量 など
collection3 戦況状態履歴 約1秒毎
全ユーザーのHP
イノチ獲得量
イベント状態 など
collection4 チャット 発言毎
ユーザーアイコン
発言内容 など
Slide 39
Slide 39 text
Firesto 上のデータ構造
39
collection1
コロシアムの
基本情報
対戦開始時
ギルド情報
メンバー情報
イベント情報 など
collection2
ユーザーの
行動履歴
ユーザー1行動毎
ユーザーID
攻撃対象
ダメージ量 など
collection3 戦況状態履歴 約1秒毎
全ユーザーのHP
イノチ獲得量
イベント状態 など
collection4 チャット 発言毎
ユーザーアイコン
発言内容 など
Slide 40
Slide 40 text
Firesto 上のデータ構造
40
collection1
コロシアムの
基本情報
対戦開始時
ギルド情報
メンバー情報
イベント情報 など
collection2
ユーザーの
行動履歴
ユーザー1行動毎
ユーザーID
攻撃対象
ダメージ量 など
collection3 戦況状態履歴 約1秒毎
全ユーザーのHP
イノチ獲得量
イベント状態 など
collection4 チャット 発言毎
ユーザーアイコン
発言内容 など
Slide 41
Slide 41 text
Firesto 上のデータ構造
41
collection1
コロシアムの
基本情報
対戦開始時
ギルド情報
メンバー情報
イベント情報 など
collection2
ユーザーの
行動履歴
ユーザー1行動毎
ユーザーID
攻撃対象
ダメージ量 など
collection3 戦況状態履歴 約1秒毎
全ユーザーのHP
イノチ獲得量
イベント状態 など
collection4 チャット 発言毎
ユーザーアイコン
発言内容 など
Slide 42
Slide 42 text
Firesto 上のデータ構造
42
collection1
コロシアムの
基本情報
対戦開始時
ギルド情報
メンバー情報
イベント情報 など
collection2
ユーザーの
行動履歴
ユーザー1行動毎
ユーザーID
攻撃対象
ダメージ量 など
collection3 戦況状態履歴 約1秒毎
全ユーザーのHP
イノチ獲得量
イベント状態 など
collection4 チャット 発言毎
ユーザーアイコン
発言内容 など
Slide 43
Slide 43 text
4. 発生した課題と解決方法について
43
Slide 44
Slide 44 text
発生した課題と解決方法について
44
• PHP から Firestore への write時、一定のコストがかかっており
• 結果 Response Time の悪化が見られた
Slide 45
Slide 45 text
発生した課題と解決方法について
45
• Firestore への write が遅延するケースがあった
• PHP と Firestore を切り離すために Cloud functions を使用
Slide 46
Slide 46 text
発生した課題と解決方法について
46
• Firestore への write にかかる時間が安定しなかった
• PHP と Firestore を切り離すために、下記を実施
app
サーバ
戦況書き込み
app
サーバ
戦況書き込み
● Cloud functions
○ PHP → Firestore への書き込み遅延を回避するために使用
PHP から write するのではなく、Cloud Functions から write する
● Cloud Pub/Sub
○ Cloud functions のトリガーとして使用
Slide 47
Slide 47 text
発生した課題と解決方法について
47
• Firestore への write が遅延するケースがあった
• PHP と Firestore を切り離すために Cloud functions を使用
app
サーバ
戦況書き込み
app
サーバ
戦況書き込み
Slide 48
Slide 48 text
発生した課題と解決方法について
48
• Cloud functions からの write に切り替えた結果
Response Time は安定
Slide 49
Slide 49 text
発生した課題と解決方法について
49
• Cloud functions からの write に切り替えた結果
Response Time は安定
• 依然として Cloud Pub/Sub への書き込みコストがあった
Slide 50
Slide 50 text
発生した課題と解決方法について
50
• 依然として Cloud Pub/Sub への書き込みコストがあった
• google-cloud-batch daemon を使用
Slide 51
Slide 51 text
発生した課題と解決方法について
51
• 依然として Cloud Pub/Sub への書き込みコストがあった
• google-cloud-batch daemon を使用
Request
pub/sub 書き込み
daemon
未使用
Slide 52
Slide 52 text
発生した課題と解決方法について
52
• 依然として Cloud Pub/Sub への書き込みコストがあった
• google-cloud-batch daemon を使用
Request
pub/sub 書き込み
daemon
pub/sub 書き込み
queueに書き込み
Request
daemon
未使用
daemon
使用
Slide 53
Slide 53 text
発生した課題と解決方法について
53
• google-cloud-batch daemon で Cloud Pub/Sub への write
を行うようにした結果
• Response Time が、Firestore導入前と同等まで改善
Slide 54
Slide 54 text
まとめ
54
• Cloud Firestore は以下の特徴がある
• 柔軟な階層型データ構造に対応
• リアルタイムアップデート
• Firebase Unity SDK から扱える
• Firestore への書き込み時に一定のコストが発生したが
Cloud functions, batch daemon を使用することで
書き込み時のコストを抑えることが出来た
Slide 55
Slide 55 text
55