Slide 1

Slide 1 text

『呪術廻戦 ファントムパレード』を ストレスなく楽しむためのマスタデータ基盤 1 サーバーサイドエンジニア / 呪術廻戦 ファントムパレード 岩上 裕樹 Iwakami Yuki

Slide 2

Slide 2 text

自己紹介 2 - 名前 - 岩上 裕樹(Iwakami Yuki) - 経歴 - 2014年新卒でサイバーエージェントに入社 - ゲーム事業にてさまざまなスマホゲームの新規開発・運用・改善等を担当 - 『呪術廻戦 ファントムパレード』 - バックエンドのテックリードとして開発に従事 - 基盤周りを担当することが多い

Slide 3

Slide 3 text

『呪術廻戦 ファントムパレード』とは 3

Slide 4

Slide 4 text

『呪術廻戦 ファントムパレードは、 2018年より「週刊少年ジャンプ」 (集英社)にて連載中の 芥見下々(あくたみげげ)氏による 人気漫画を原作としたTVアニメ 『呪術廻戦』を元にした、作品初の スマートフォンゲームです。 TVアニメ『呪術廻戦』の第1期の物語を 追体験できるだけでなく、福岡を舞台にした 『ファンパレ』オリジナルの ストーリーが楽しめる コマンドバトルRPGとなっています。 4

Slide 5

Slide 5 text

アジェンダ 5 - はじめに - マスタデータの入力 - マスタデータの環境への反映と配信

Slide 6

Slide 6 text

はじめに 6

Slide 7

Slide 7 text

マスタデータとは 7 - ゲーム内の静的な情報や設定値、バランス等を格納するデータ - キャラクタや敵の能力値などのゲームプレイに必要な情報が含まれる - 新キャラクターやイベントなどの追加はマスタデータを更新することで実現 ID 名前 HP 体術 術式 1 虎杖 悠仁 100 50 10 2 伏黒 恵 90 40 30 ID イベント名 開始日時 終了日時 1 大討祓戦 2023-11-30 15:00:00 2023-12-09 14:59:59 2 望郷の境界線 2023-11-24 15:00:00 2023-12-10 14:59:59 character_masters event_masters ※このマスタデータはサンプルであり実際のマスタデータとは異なります

Slide 8

Slide 8 text

これから話すこと 8 『ファンパレ』においてのマスタデータの入力から環境への 反映・配信までの工夫を紹介  配信  反映  入力

Slide 9

Slide 9 text

これから話すこと 9 ID イベント名 開始日時 終了日時 1 大討祓戦 2023-11-30 15:00:00 2023-12-09 14:59:59 event_masters ※このマスタデータはサンプルであり実際のマスタデータとは異なります  配信  反映  入力 『ファンパレ』においてのマスタデータの入力から環境への 反映・配信までの工夫を紹介

Slide 10

Slide 10 text

これから話すこと 10 ID イベント名 開始日時 終了日時 1 大討祓戦 2023-11-30 15:00:00 2023-12-09 14:59:59 2 望郷の境界線 2023-11-24 15:00:00 2023-12-10 14:59:59 event_masters ※このマスタデータはサンプルであり実際のマスタデータとは異なります  配信  反映  入力 『ファンパレ』においてのマスタデータの入力から環境への 反映・配信までの工夫を紹介

Slide 11

Slide 11 text

マスタデータの入力 11

Slide 12

Slide 12 text

マスタデータの入力の仕組みの設計思想 12 - マスタデータのバージョン管理にはGit管理をすることで解決 - GitHub上で差分確認、Pull Requestでレビュー - マスタの入力者はプランナーさんやレベルデザインを担当している方、 QAさんがほとんど - 入力のほとんどが非エンジニアの方なので入力フローで Gitコマンドを使いたくない - やったとしてもGitHubのウェブページ上のボタン操作だけにしたい 簡単な操作でマスタの入力・実機での動作確認・マージまでできる状態にしたい

Slide 13

Slide 13 text

マスタデータの入力の大まかな流れ 13 1. データの入力 2. 開発環境の作成 3. 開発環境への反映 4. 開発環境に接続して実機で動作確認 5. PR作成・レビュー・マージ 6. 開発環境の削除

Slide 14

Slide 14 text

マスタデータの入力の大まかな流れ 14 1. データの入力 2. 開発環境の作成 3. 開発環境への反映 4. 開発環境に接続して実機で動作確認 5. PR作成・レビュー・マージ 6. 開発環境の削除

Slide 15

Slide 15 text

マスタデータの入力の大まかな流れ 〜 データの入力 15 - スプレッドシートを利用して入力をしている - 複数人で同時に編集可能 - スプレッドシートの機能でログを追える。壊れたときに調査しやすい - スプレッドシートの関数やプルダウンリストのような機能が充実

Slide 16

Slide 16 text

マスタデータの入力の大まかな流れ 16 1. データの入力 2. 開発環境の作成 3. 開発環境への反映 4. 開発環境に接続して実機で動作確認 5. PR作成・レビュー・マージ 6. 開発環境の削除

Slide 17

Slide 17 text

マスタデータの入力の大まかな流れ 〜 開発環境の作成と削除 17 - 作業単位ごとに開発環境を作れるようにしている [環境の作成] - feature/dev-xxxxxという命名規則でブランチを作成すると dev-xxxxxという名前の環境が作成される - xxxxxは[A-Za-z0-9-]+ [環境の削除] - ブランチを削除すると対象の開発環境も削除される ブランチの作成・削除はGitHubのウェブページ上でできるのでGitコマンドが不要! 非エンジニアでもできる!

Slide 18

Slide 18 text

マスタデータの入力の大まかな流れ 18 1. データの入力 2. 開発環境の作成 3. 開発環境への反映 4. 開発環境に接続して実機で動作確認 5. PR作成・レビュー・マージ 6. 開発環境の削除

Slide 19

Slide 19 text

マスタデータの入力の大まかな流れ 〜 開発環境への反映 19 Slackからデプロイコマンドを実行して反映処理をしている [指定内容] - どのマスタを反映させるか - どのバージョンまでのデータを反映させるか - どの環境に反映させるか [処理内容] 1. スプレッドシートからマスタデータをダウンロード 2. 対象の環境に反映 3. 同時にマスタバリデーションチェック処理の実行 4. 作業ブランチにコミット(feature/dev-xxxxx)

Slide 20

Slide 20 text

マスタデータの入力の大まかな流れ 〜 開発環境への反映 20 1.スプレッドシートからマスタデータをダウンロード - スプレッドシートに入力されているマスタデータをCSVとしてダウンロード - GAS(Google Apps Scripts)を使わない - スプレッドシートはデータ入力に特化 - 独立したプログラムからデータを抽出する - スプレッドシートとGASとの依存性を排除した Google Sheets APIを用いてデータを取得 CSVとして出力 CodeBuild

Slide 21

Slide 21 text

マスタデータの入力の大まかな流れ 〜 開発環境への反映 1.スプレッドシートからマスタデータをダウンロード ダウンロードするマスタの指定方法 - 作業ごとに管理しているダウンロードリストというものがある - ダウンロードリストで☑を入れているマスタ群をダウンロードする - Slackから指定するときにダウンロードリストを指定する event_masters event_item_masters ︙ イベントマスタシート ☑カード □ガチャ ☑イベントマスタ   ︙ ダウンロードリスト ※このマスタデータはサンプルであり実際のマスタデータとは異なります 21

Slide 22

Slide 22 text

2.対象の環境に反映 - サーバサイドで参照するDBに追加 - クライアントで参照するS3に配置 マスタデータの入力の大まかな流れ 〜 開発環境への反映 22 S3 Aurora CodeBuild

Slide 23

Slide 23 text

3.同時にマスタバリデーションチェック処理の実行 - リレーションチェック - 数値の範囲チェック - 文字数チェック - などなど... 結果をSlackに投稿 マスタデータの入力の大まかな流れ 〜 開発環境への反映 23

Slide 24

Slide 24 text

4.作業ブランチにコミット(feature/dev-xxxxx) - CI上でダウンロードしたマスタデータをGitコミット マスタデータの入力の大まかな流れ 〜 開発環境への反映 24

Slide 25

Slide 25 text

マスタデータの入力の大まかな流れ 25 1. データの入力 2. 開発環境の作成 3. 開発環境への反映 4. 開発環境に接続して実機で動作確認 5. PR作成・レビュー・マージ 6. 開発環境の削除

Slide 26

Slide 26 text

- 動作確認 - 問題なければPRを作成 - レビューでダブルチェック - OKであればマージする マスタデータの入力の大まかな流れ 〜 動作確認からマージまで 26

Slide 27

Slide 27 text

- 入力者の作業内容はシンプルにできた - 新しくジョインした人にも教えやすい - Slackのログを追えばどの環境にどういうマスタを反映したかがわかる - アプリが動かない等の問題が起きても調査しやすい - 1人で環境作成から反映、動作確認までできるので他の人の作業を待たない - バリデーションチェックもしているので入力ミスも自己解決できる - エンジニアの手を介さなくなった マスタデータの入力のまとめ 27

Slide 28

Slide 28 text

マスタデータの環境への反映と配信 28

Slide 29

Slide 29 text

マスタデータの種類 29 1. サーバサイドのみ参照するマスタデータ 2. クライアントのみ参照するマスタデータ 3. サーバサイドとクライアントのどちらからも参照するマスタデータ S3 Aurora CodeBuild

Slide 30

Slide 30 text

マスタデータの反映・配信の設計思想 30 - サムザップの過去プロジェクトの課題 - APIサーバからマスタデータをクライアントに返していた - APIサーバの負荷にもなる - 静的なデータなので、S3に配置してCloudFront(CDN)を介して返し たい - 同じマスタデータを何度もダウンロードしている - 変更がない限りは再ダウンロードさせたくない - ユーザ様の端末のデータ通信量をなるべく少なくしてあげたい - 複数のマスタデータを並列ダウンロードしてより早くホーム画面にたどり着かせ たい - ダウンロード画面の待ち時間を減らしたい

Slide 31

Slide 31 text

マスタデータの設計の工夫 31 工夫していることを紹介 - テキストマスタ - マスタのグルーピング

Slide 32

Slide 32 text

マスタデータの設計の工夫 〜 テキストマスタ 32 - マスタデータのテキスト部分 - クライアント側でユーザ様に見せるだけの情報 - サーバサイドでは使わない情報で参照する必要がない - テキスト部分を分離 - テキストを入れ替えれば別の言語で扱うことも可能

Slide 33

Slide 33 text

マスタデータの設計の工夫 〜 テキストマスタ - event_mastersとevent_text_mastersに分離 - サーバサイドのロジックではevent_mastersのみ参照すれば良い ID イベント名 1 大討祓戦 2 望郷の境界線 event_text_masters ※このマスタデータはサンプルであり実際のマスタデータとは異なります ID 開始日時 終了日時 1 2023-11-30 15:00:00 2023-12-09 14:59:59 2 2023-11-24 15:00:00 2023-12-10 14:59:59 event_masters ID イベント名 開始日時 終了日時 1 大討祓戦 2023-11-30 15:00:00 2023-12-09 14:59:59 2 望郷の境界線 2023-11-24 15:00:00 2023-12-10 14:59:59 event_masters 33

Slide 34

Slide 34 text

マスタデータの設計の工夫 〜 マスタのグルーピング 34 - いくつかのマスタをグルーピングして1ファイルに結合してS3にアップロード - 適度にファイル数を減らしてネットワークの接続コストを減らす目的 - なるべく同じアップデートで一緒に更新されるマスタを グルーピングすると効率が良い event_text_masters event_masters ︙ 1つのマスタデータファイル player_level_masters event_masters ︙ 関係ないマスタの例

Slide 35

Slide 35 text

マスタデータの環境への反映と配信 35 - マスタデータをS3に配置し、ユーザ様へ配信するまでの話 CloudFront S3 (マスタデータ)

Slide 36

Slide 36 text

マスタデータの環境への反映と配信 36 - 事前に新旧複数のバージョンをアップロードしておく必要がある - ユーザがアクセスした時点のバージョンのマスタデータを 取得できるシステムを構築する必要がある - 同じマスタファイルで複数のバージョン管理ができるようにS3の バージョニング機能を利用する - https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/Ver sioning.html - バージョン管理はAWS側に任せる

Slide 37

Slide 37 text

S3のバージョニング機能 37 - S3にファイルを配置したときバージョンIDが生成される - 同じファイル名のものを上書きすると異なるバージョンIDの状態で 保持してくれる - バージョンIDをパラメータに付けてGETするとそのバージョンの データが取得できる マスタデータの配置 マスタデータの取得 https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/RetrievingObjectVersions.html

Slide 38

Slide 38 text

マスタデータの環境への反映 38 CodeBuild S3 Aurora Slack GitHub ※説明のために実際の処理とは異なるところがあります ①コマンド実行 ②マスタデータのDL ③マスタデータのアップ ロード ④バージョンIDの取得 ③マスタデータの追加 ⑤必要な情報の追加

Slide 39

Slide 39 text

①コマンド実行 マスタデータの環境への反映 39 CodeBuild S3 Aurora Slack GitHub ※説明のために実際の処理とは異なるところがあります ②マスタデータのDL ③マスタデータのアップ ロード ④バージョンIDの取得 ③マスタデータの追加 ⑤必要な情報の追加

Slide 40

Slide 40 text

マスタデータの環境への反映 40 CodeBuild S3 Aurora Slack GitHub ※説明のために実際の処理とは異なるところがあります ①コマンド実行 ②マスタデータのDL ③マスタデータのアップ ロード ④バージョンIDの取得 ③マスタデータの追加 ⑤必要な情報の追加

Slide 41

Slide 41 text

マスタデータの環境への反映 41 CodeBuild S3 Aurora Slack GitHub ※説明のために実際の処理とは異なるところがあります ①コマンド実行 ②マスタデータのDL ③マスタデータのアップ ロード ④バージョンIDの取得 ③マスタデータの追加 ⑤必要な情報の追加

Slide 42

Slide 42 text

マスタデータの環境への反映 42 CodeBuild S3 Aurora Slack GitHub ※説明のために実際の処理とは異なるところがあります ①コマンド実行 ②マスタデータのDL ③マスタデータのアップ ロード ④バージョンIDの取得 ③マスタデータの追加 ⑤必要な情報の追加

Slide 43

Slide 43 text

マスタデータの環境への反映 43 CodeBuild S3 Aurora Slack GitHub ※説明のために実際の処理とは異なるところがあります ①コマンド実行 ②マスタデータのDL ③マスタデータのアップ ロード ④バージョンIDの取得 ③マスタデータの追加 ⑤必要な情報の追加

Slide 44

Slide 44 text

マスタデータの配信 44 Aurora ※説明のために実際の処理とは異なるところがあります Fargate ①APIリクエスト ②DBからデータ取得 ③マスタのファイルの情 報を返す ④マスタデータの取得 (バージョンID付き) CloudFront S3

Slide 45

Slide 45 text

マスタデータの配信 45 Aurora ※説明のために実際の処理とは異なるところがあります Fargate ①APIリクエスト ②DBからデータ取得 ③マスタのファイルの情 報を返す ④マスタデータの取得 (バージョンID付き) CloudFront S3

Slide 46

Slide 46 text

②DBからデータ取得 マスタデータの配信 46 Aurora ※説明のために実際の処理とは異なるところがあります Fargate ①APIリクエスト ③マスタのファイルの情 報を返す ④マスタデータの取得 (バージョンID付き) CloudFront S3

Slide 47

Slide 47 text

マスタデータの配信 47 Aurora ※説明のために実際の処理とは異なるところがあります Fargate ①APIリクエスト ②DBからデータ取得 ③マスタのファイルの情 報を返す ④マスタデータの取得 (バージョンID付き) CloudFront S3

Slide 48

Slide 48 text

マスタデータの配信 48 Aurora ※説明のために実際の処理とは異なるところがあります Fargate ①APIリクエスト ②DBからデータ取得 ③マスタのファイルの情 報を返す ④マスタデータの取得 (バージョンID付き) CloudFront S3

Slide 49

Slide 49 text

マスタデータの反映と配信のまとめ 49 - マスタデータはCDNを利用してS3から配信されるため、 負荷をあまり意識しなくても良い - 並列ダウンロードも実現できダウンロード速度が早い(体感) - バージョンごとの反映・配信はシンプルにできた

Slide 50

Slide 50 text

50 ご清聴ありがとうございました ©芥見下々/集英社・呪術廻戦製作委員会  ©Sumzap, Inc./TOHO CO., LTD.