Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SINoALICE -シノアリス- Google Cloud Firestoreを用いた観戦機能の実現について

gree_tech
PRO
November 11, 2021

SINoALICE -シノアリス- Google Cloud Firestoreを用いた観戦機能の実現について

GREE Tech Conference 2021 で発表された資料です。
https://techcon.gree.jp/2021/session/Session-8

gree_tech
PRO

November 11, 2021
Tweet

More Decks by gree_tech

Other Decks in Technology

Transcript

  1. SINoALICE -シノアリス-
    Google Cloud Firestoreを
    用いた観戦機能の実現について
    株式会社ポケラボ サーバーエンジニア
    山口 拓郎

    View Slide

  2. • 本公演のターゲット
    • Google Cloud Firestoreに興味がある方
    • シノアリスのリアルタイムバトルのシステムに興味がある方
    はじめに
    2

    View Slide

  3. • 山口 拓郎(Takuro Yamaguchi)
    • 2016年新卒エンジニアとしてポケラボに入社
    • AKB48ステージファイター2 バトルフェスティバル
    • SINoALICE -シノアリス-
    • 新卒から現在に至るまでサーバーサイドエンジニアとして従事
    自己紹介
    3

    View Slide

  4. 本日の流れ
    4
    1.シノアリスとは
    2.観戦機能とは
    3.コロシアムのシステム紹介
    4.発生した課題と解決方法について

    View Slide

  5. 1.シノアリスとは
    5

    View Slide

  6. シノアリスとは
    6

    View Slide

  7. シノアリスとは
    7
    • リアルタイム通信対戦『コロシアム』
    について
    • シノアリスのメインコンテンツである、
    ギルド対抗バトル
    • 最大15人のギルドメンバーと協力し、
    対戦ギルドの”イノチ”を奪い合う
    • 1回20分間の対戦で、より多くの”イノ
    チ”を獲得した方の勝利

    View Slide

  8. 2. 観戦機能とは
    8

    View Slide

  9. 観戦機能について(始まり)
    9
    • コロシアムで世界1位のギルドを決める
    「WORLD GRAN COLOSSEUM」を開催

    View Slide

  10. 観戦機能について(始まり)
    10
    • コロシアムで世界1位のギルドを決める
    「WORLD GRAN COLOSSEUM」を開催
    • 実際に出場するお客様だけでなく
    • 出場されないお客様にも一緒になって楽しんでもらえるよう
    様々な検討を重ねた結果
    • 世界一を決める激戦をみんなで観戦・応援できる仕組みを導入
    することとなりました

    View Slide

  11. 観戦機能について(始まり)
    11
    • コロシアムで世界1位のギルドを決める
    「WORLD GRAN COLOSSEUM」を開催
    • 実際に出場するお客様だけでなく
    • 出場されないお客様にも一緒になって楽しんでもらえるよう
    様々な検討を重ねた結果
    • 世界一を決める激戦をみんなで観戦・応援できる仕組みを導入
    することとなりました
    ※開発画面

    View Slide

  12. 観戦機能について(始まり)
    12
    • コロシアムで世界1位のギルドを決める
    「WORLD GRAN COLOSSEUM」を開催
    • 実際に出場するお客様だけでなく
    • 出場されないお客様にも一緒になって楽しんでもらえるよう
    様々な検討を重ねた結果
    • 世界一を決める激戦をみんなで観戦・応援できる仕組みを導入
    することとなりました

    View Slide

  13. 観戦機能について(技術方針)
    13

    View Slide

  14. 観戦機能について(技術方針)
    14

    View Slide

  15. 観戦機能について(技術方針)
    15

    View Slide

  16. Cloud Firestore
    観戦機能について(技術方針)
    16
    • 柔軟な階層型データ構造に対応
    • リアルタイムアップデート
    • Firebase Unity SDK から扱える
    • シノアリスのアプリには既に導入済みだった

    View Slide

  17. 3. コロシアムのシステム紹介
    17

    View Slide

  18. コロシアムのシステム紹介(構成)
    18

    View Slide

  19. コロシアムのシステム紹介(構成)
    19
    ● Unity 2018.4.2f1
    ● Apache / PHP(7.0)
    ● Amazon Aurora
    MySQL
    ● Memcached
    ● CDN(Akamai)

    View Slide

  20. コロシアムのシステム紹介(構成)
    20
    ● ポケラボ謹製
    リアルタイム通信サーバ
    (通称「Reflector」)
    ○ Java
    ○ クライアントと常時接続
    ○ Appサーバが提供する
    HTTPサービスを定期的に
    実行
    ○ データストアとして
    Hazelcastを利用

    View Slide

  21. コロシアムのシステム紹介(状態同期)
    21
    1
    1. App サーバへ現在の状態を取得す
    る HTTP サービスを実行

    View Slide

  22. コロシアムのシステム紹介(状態同期)
    22
    1
    1. App サーバへ現在の状態を取得す
    る HTTP サービスを実行
    2. 現在の状態を Reflector に返却
    2

    View Slide

  23. コロシアムのシステム紹介(状態同期)
    23
    1
    1. App サーバへ現在の状態を取得す
    る HTTP サービスを実行
    2. 現在の状態を Reflector に返却
    3. App サーバから返却された状態を
    Client に転送
    2
    3

    View Slide

  24. コロシアムのシステム紹介(状態同期)
    24
    1
    1. App サーバへ現在の状態を取得す
    る HTTP サービスを実行
    2. 現在の状態を Reflector に返却
    3. App サーバから返却された状態を
    Client に転送
    4. 転送された状態を元に画面同期
    2
    3
    4

    View Slide

  25. コロシアムのシステム紹介(ユーザー行動)
    25
    1. 武器使用などのユーザーの行動メ
    ッセージを送信
    1

    View Slide

  26. コロシアムのシステム紹介(ユーザー行動)
    26
    2
    1. 武器使用などのユーザーの行動メ
    ッセージを送信
    2. App サーバへユーザーの行動を
    登録する HTTP サービスを実行
    1

    View Slide

  27. コロシアムのシステム紹介(ユーザー行動)
    27
    2
    1. 武器使用などのユーザーの行動メ
    ッセージを送信
    2. App サーバへユーザーの行動を
    登録する HTTP サービスを実行
    3. 行動に基づいた処理を実行、結果
    を Reflector に返却
    3
    1

    View Slide

  28. コロシアムのシステム紹介(ユーザー行動)
    28
    2
    1. 武器使用などのユーザーの行動メ
    ッセージを送信
    2. App サーバへユーザーの行動を
    登録する HTTP サービスを実行
    3. 行動に基づいた処理を実行、結果
    を Reflector に返却
    4. 返却された結果を Client に転送
    3
    4
    1

    View Slide

  29. コロシアムのシステム紹介(Firestore導入:戦況)
    29

    View Slide

  30. コロシアムのシステム紹介(Firestore導入:戦況)
    30
    1. Reflector から App サーバへ
    HTTP サービスを実行
    1

    View Slide

  31. コロシアムのシステム紹介(Firestore導入:戦況)
    31
    1. Reflector から App サーバへ
    HTTP サービスを実行
    2. 結果を Reflector に返却すると共
    に Firestore へ書き込み 1
    2

    View Slide

  32. コロシアムのシステム紹介(Firestore導入:戦況)
    32
    1. Reflector から App サーバへ
    HTTP サービスを実行
    2. 結果を Reflector に返却すると共
    に Firestore へ書き込み
    3. Firestore 上のデータ読み取り
    1
    2
    3

    View Slide

  33. コロシアムのシステム紹介(Firestore導入:チャット)
    33

    View Slide

  34. コロシアムのシステム紹介(Firestore導入:チャット)
    34
    1. Client から App サーバへ
    メッセージ送信
    1

    View Slide

  35. コロシアムのシステム紹介(Firestore導入:チャット)
    35
    1. Client から App サーバへ
    メッセージ送信
    2. 結果を Firestore へ書き込み
    2
    1

    View Slide

  36. コロシアムのシステム紹介(Firestore導入:チャット)
    36
    1. Client から App サーバへ
    メッセージ送信
    2. 結果を Firestore へ書き込み
    3. Firestore 上のデータ読み取り
    2
    3
    1

    View Slide

  37. Firesto 上のデータ構造(仕様)
    37
    • Cloud Firestore はNoSQL ドキュメント指向データベース
    • データは「ドキュメント」に格納し
    それが「コレクション」にまとめられる

    View Slide

  38. Firesto 上のデータ構造
    38
    collection1
    コロシアムの
    基本情報
    対戦開始時
    ギルド情報
    メンバー情報
    イベント情報 など
    collection2
    ユーザーの
    行動履歴
    ユーザー1行動毎
    ユーザーID
    攻撃対象
    ダメージ量 など
    collection3 戦況状態履歴 約1秒毎
    全ユーザーのHP
    イノチ獲得量
    イベント状態 など
    collection4 チャット 発言毎
    ユーザーアイコン
    発言内容 など

    View Slide

  39. Firesto 上のデータ構造
    39
    collection1
    コロシアムの
    基本情報
    対戦開始時
    ギルド情報
    メンバー情報
    イベント情報 など
    collection2
    ユーザーの
    行動履歴
    ユーザー1行動毎
    ユーザーID
    攻撃対象
    ダメージ量 など
    collection3 戦況状態履歴 約1秒毎
    全ユーザーのHP
    イノチ獲得量
    イベント状態 など
    collection4 チャット 発言毎
    ユーザーアイコン
    発言内容 など

    View Slide

  40. Firesto 上のデータ構造
    40
    collection1
    コロシアムの
    基本情報
    対戦開始時
    ギルド情報
    メンバー情報
    イベント情報 など
    collection2
    ユーザーの
    行動履歴
    ユーザー1行動毎
    ユーザーID
    攻撃対象
    ダメージ量 など
    collection3 戦況状態履歴 約1秒毎
    全ユーザーのHP
    イノチ獲得量
    イベント状態 など
    collection4 チャット 発言毎
    ユーザーアイコン
    発言内容 など

    View Slide

  41. Firesto 上のデータ構造
    41
    collection1
    コロシアムの
    基本情報
    対戦開始時
    ギルド情報
    メンバー情報
    イベント情報 など
    collection2
    ユーザーの
    行動履歴
    ユーザー1行動毎
    ユーザーID
    攻撃対象
    ダメージ量 など
    collection3 戦況状態履歴 約1秒毎
    全ユーザーのHP
    イノチ獲得量
    イベント状態 など
    collection4 チャット 発言毎
    ユーザーアイコン
    発言内容 など

    View Slide

  42. Firesto 上のデータ構造
    42
    collection1
    コロシアムの
    基本情報
    対戦開始時
    ギルド情報
    メンバー情報
    イベント情報 など
    collection2
    ユーザーの
    行動履歴
    ユーザー1行動毎
    ユーザーID
    攻撃対象
    ダメージ量 など
    collection3 戦況状態履歴 約1秒毎
    全ユーザーのHP
    イノチ獲得量
    イベント状態 など
    collection4 チャット 発言毎
    ユーザーアイコン
    発言内容 など

    View Slide

  43. 4. 発生した課題と解決方法について
    43

    View Slide

  44. 発生した課題と解決方法について
    44
    • PHP から Firestore への write時、一定のコストがかかっており
    • 結果 Response Time の悪化が見られた

    View Slide

  45. 発生した課題と解決方法について
    45
    • Firestore への write が遅延するケースがあった
    • PHP と Firestore を切り離すために Cloud functions を使用

    View Slide

  46. 発生した課題と解決方法について
    46
    • Firestore への write にかかる時間が安定しなかった
    • PHP と Firestore を切り離すために、下記を実施
    app
    サーバ
    戦況書き込み
    app
    サーバ
    戦況書き込み
    ● Cloud functions
    ○ PHP → Firestore への書き込み遅延を回避するために使用
    PHP から write するのではなく、Cloud Functions から write する
    ● Cloud Pub/Sub
    ○ Cloud functions のトリガーとして使用

    View Slide

  47. 発生した課題と解決方法について
    47
    • Firestore への write が遅延するケースがあった
    • PHP と Firestore を切り離すために Cloud functions を使用
    app
    サーバ
    戦況書き込み
    app
    サーバ
    戦況書き込み

    View Slide

  48. 発生した課題と解決方法について
    48
    • Cloud functions からの write に切り替えた結果
    Response Time は安定

    View Slide

  49. 発生した課題と解決方法について
    49
    • Cloud functions からの write に切り替えた結果
    Response Time は安定
    • 依然として Cloud Pub/Sub への書き込みコストがあった

    View Slide

  50. 発生した課題と解決方法について
    50
    • 依然として Cloud Pub/Sub への書き込みコストがあった
    • google-cloud-batch daemon を使用

    View Slide

  51. 発生した課題と解決方法について
    51
    • 依然として Cloud Pub/Sub への書き込みコストがあった
    • google-cloud-batch daemon を使用
    Request
    pub/sub 書き込み
    daemon
    未使用

    View Slide

  52. 発生した課題と解決方法について
    52
    • 依然として Cloud Pub/Sub への書き込みコストがあった
    • google-cloud-batch daemon を使用
    Request
    pub/sub 書き込み
    daemon
    pub/sub 書き込み
    queueに書き込み
    Request
    daemon
    未使用
    daemon
    使用

    View Slide

  53. 発生した課題と解決方法について
    53
    • google-cloud-batch daemon で Cloud Pub/Sub への write
    を行うようにした結果
    • Response Time が、Firestore導入前と同等まで改善

    View Slide

  54. まとめ
    54
    • Cloud Firestore は以下の特徴がある
    • 柔軟な階層型データ構造に対応
    • リアルタイムアップデート
    • Firebase Unity SDK から扱える
    • Firestore への書き込み時に一定のコストが発生したが
    Cloud functions, batch daemon を使用することで
    書き込み時のコストを抑えることが出来た

    View Slide

  55. 55

    View Slide