CEDEC2021 『ラブライブ！スクールアイドルフェスティバル ALL STARS』の機械学習によるコンテンツ制作支援 https://cedec.cesa.or.jp/2021/session/detail/s60584eabc52ff

1. 高田 敦史
エンジニア
開発推進部機械学習グループ
『ラブライブ！スクールアイドルフェスティバル ALL STARS』の機械学
習によるコンテンツ制作支援
譜面作成ヘのディープラーニング活用
KLab株式会社
オウ リンジィャン
エンジニア
KLabGames事業本部
KLab株式会社

2. 2
大学院卒業後2019年にKLab新卒入社。
『ラブライブ！スクールアイドルフェスティバル ALL STARS』の関連開
発業務と、既存ワークフローの自動化・効率化ツール開発を行ってい
ます。
オウ リンジィャン
エンジニア
KLabGames事業本部
KLab株式会社

3. 3
2008年KLab入社。サーバーサイドエンジニア、データ基盤構築などをへ
て、2021年より機械学習グループの立ち上げメンバー。
高田 敦史
エンジニア
開発推進部機械学習グループ
KLab株式会社
自己紹介

4. ゲーム紹介
*資料の方は動画を省略しています

5. 5
説明の流れ
1. 譜面制作支援ツール導入の経緯
2. 譜面制作支援ツールのデモ
3. WEBサービスアーキテクチャーの紹介
4. 機械学習モデルの紹介

6. 譜面制作支援
ツール導入の経緯

7. 7
『ラブライブ！スクールアイドルフェスティバ
ル ALL STARS』のライブパートでは、音楽に
合わせてノーツをタップ。
譜面: 流れてくるノーツのタイミングや種類の
設定。
ライブパートの紹介

8. 8
各楽曲(1分半程度)につき最大4難易度
● 初級
● 中級
● 上級
● 上級+
ノーツ種類
● 通常タップ
● 上下左右スワイプ
● ロングノーツ
● その他ギミック
ライブパートの概要

9. 9
譜面制作のワークフロー
サウンドメンバー
MIDI
企画メンバー
マスターデータ
演出など追加
タイミング指定

10. 10
● サウンドチームが音源に合わせたMIDIファイルを作成し、ノーツのタ
イミングを指定。
● 企画チームの演出追加などをへて、ゲーム用のマスターデータに変
換。
● MIDIファイル作成は、楽曲に合わせて全難易度分のノーツを作成す
る大変な作業。1曲あたり40時間程度を要する。
譜面制作のワークフロー

11. 11
● 2020年 新曲追加のペースが倍増
○ 当初の想定年24曲 → 年60曲
● 現状の体制だけでは対応が難しい
● 開発メンバーや機械学習のチームも巻きこんで、制作効率化
のためのツール開発をスタート
本プロジェクトがはじまった経緯

12. 12
● 気持ちよく遊べるためには、振り付けに合わせてスワイプの向きを
調整するなど、細かい「こだわりポイント」が重要。
● 人間による調整を前提とした上で、単純作業を自動化したい。
今回のプロジェクトで実現したいこと
人間のこだわり
機械学習による自動化
高品質な譜面

13. 13
● ゲームへの機械学習の応用領域のひとつとして注目されるの
がコンテンツの自動生成・制作支援。
● 近年は画像や音楽を自動で作成する試みも注目されている
が、実用化はまだ遠い。
● 一方、リズムアクションゲームの譜面など、比較的自由度が低
いコンテンツなら現実的に使用可能。
なぜ機械学習による譜面作成なのか?

14. 14
● 初級・中級のベースをツールで制作することで、作業時間を
50%ほど短縮。
● 1曲(全難易度)40時間→20時間
譜面制作支援ツールの効果

15. 譜面制作支援
ツールのデモ
*資料の方は動画を省略しています

16. オウ リンジィャン
エンジニア
Games事業本部
譜面自動化のWEBサービス
KLab株式会社

17. 17
あらすじ
● システム構成
● 使い易くするためのポイント
● 少人数で効率的に開発を進めるポイント

18. システム構成

19. 19
WEBサーバー上で動作し、
Chrome・Firefoxなど普段ホーム
ページをみるのに使っている
WEBブラウザで操作するアプリ
ケーション
WEBアプリ
譜面自動化WEBサービス→MIDI
サウンドチーム→MIDI編集
企画チーム→マスタ編集
NEW

20. 20
WEBアプリ
● ユーザーは非エンジニア → 分かりやすい・使いやすいGUI
● Pythonのプログラムをそのまま使いたい → フロントエンド・バックエンド分離
● 不特定多数ユーザー対応 → インストールなし・更新しやすい・環境依存なし

21. 21
システム構成
クライアント：GUIを提供
サーバー：共通のAPIを提供
MessagePack

22. 22
バックエンド構成
FastAPI
メインフレームワーク
CouchDB
データベース
RabbitMQ
メッセージキュー
Celery
非同期タスク管理
機械学習モデル1
機械学習モデル2
...

23. 23
フロントエンド構成
Vue.js
メインフレームワーク
vuex
データ・状態管理
vuex-persist
LocalStorage同期
vue-router
ビュー遷移
Vuetify
UI
markdown-loader
MarkDownレンダーリング

24. 使い易くするためのポイント

25. 25
非同期状態表示
● 曲アップロード後の前処理や譜面生成
のような時間がかかる作業はUIで状態
をわかるように
● Slack通知機能あり

26. 26
UIの一体化と再利用
● 楽曲・譜面のUIはほぼ同じ構成
● 分かりやすいし、再利用も効く

27. 27
Tooltipとインプットエラー検知
● ボタンやパラメーターはTooltipを用意
● エラー検知できるところはエラー検知を
入れる

28. 28
Markdownマニュアル
● Markdownドキュメントを直接WEBアプ
リで表示（markdown-loader）
● 作成コストの割に見た目が綺麗・リンク
機能なども完備
● 編集・更新も簡単

29. 少人数で効率的に開発を進めるポイント

30. 30
開発ポイント
今回の運用システムはフロントエンド・バックエンド・データベース・タスク管理・
ユーザー認証など一般的なWEBサービスの要素を全部含めていて、そこそこ複
雑なタスクでありながら、開発期間も開発リソースも少ない：
● 開発期間は短い（〜3ヶ月）
● 開発スタッフは少ない（メイン1人・サポート3人）
4つの部分に分けて、効率的に開発できたポイントについて解説します

31. ● 開発環境
● バックエンド
● モデルの扱い
● デプロイと更新
少人数で効率的に開発を進めるポイント

32. 32
開発環境
がんばるきこり
効率的なWEBアプリ開発の勧め：
● Docker
● Visual Studio Code

33. 33
Visual Studio CodeとDevcontainer
Visual Studio Codeの
Devcontainer機能を利用す
ればIDEがDocker環境で
動くので、Intellisenseや自
動補完もフルに動作しま
す。

34. 34
Visual Studio CodeとDevcontainer
フロントエンドとバックエンドを分けていますが、同時に作業できます。
フロントエンド バックエンド

35. ● 開発環境
● バックエンド
● モデルの扱い
● デプロイと更新
少人数で効率的に開発を進めるポイント

36. 36
バックエンド（FastAPI）
性能面から見るとPythonではややネガティヴな印象があるかもしれないが、
「非同期ベースのASGIで性能を爆上げ」で有名なStarletteというフレームワークががあります
FastAPIはStarletteのラッパーみた
いな物：
FastAPIのドキュメントはわかりや
すくて、チュートリアルは5分ででき
た（素晴らしい）。

37. 37
バックエンド（FastAPI）
APIドキュメント自動生成機能もおまけで
付いてるので（OFFさせることも可能）、
全てのEndPointは{サーバーIPアドレ
ス}/docsから確認・テストできます

38. 38
バックエンド
FastAPIは名前通りです：
● 速い（性能）
● 早い（実装）
余談ですが、SlowAPIというFastAPIとStarletteに速度制限機能を追加するライブラリもあります。

39. ● 開発環境
● バックエンド
● モデルの扱い
● デプロイと更新
少人数で効率的に開発を進めるポイント

40. 40
モデルの扱い
● もっとも更新頻度が高い
● 複数モデルを同時採用したい
モデルは機械学習系アプリのコア部分
● モデルごとに独立リポジトリで開発・管理
● 共通のインターフェースを決める

41. 41
モデルの扱い（ベースモデル）
● モデルの開発と応用システムの開発はほぼ平行で開発を進めた
● 応用システム開発前にスピード重視で先にベースモデルを開発した
● 既存モデルの利用
● 計算コストの低い手法（ HMMなど）

42. 42
モデルの扱い（ベースモデル）
タイミング
Vocal
Drum
Other
音楽WAV リズムゲーム譜面
INPUT OUTPUT
MODEL
要
素
分
解
ノート種類
最終的に採用された機械学習モデルは本セッションの後半で詳しく紹介します

43. ● 開発環境
● バックエンド
● モデルの扱い
● デプロイと更新
少人数で効率的に開発を進めるポイント

44. 44
コスト削減と処理能力を両立
● WEBアプリのデメリット：サーバーが必要
→サーバーにコストがかかる
● システム負荷は使用状況によって大きく変動するため、
（自動スケーリングによって）コスト削
減と処理能力を両立できるKubernetesでデプロイ

45. 45
ビルド・デプロイをワンボタン化
● 各部分のソースコードはGitHubEnterpriseで管理し、ビルドとデプロイはCloudBuild機能を利
用して「ワンボタン化」

46. 46
まとめ
● システム構成
○ WEBアプリ形式
● 使い易くするためのポイント
○ 非同期状態表示・Tooltipとエラー検知・UI一体化・Markdownマニュアル
● 少人数で効率的に開発を進めるポイント
○ 開発環境→Docker＋VSCode（devcontainer）
○ バックエンド→FastAPI
○ モデルの扱い→独立リポジトリ・時短のベースモデル作成
○ デプロイと更新→Kubernetes＋CloudBuildワンボタン化

47. 次は機械学習モデルについて詳しく紹介します

48. 48
ディープラーニングによる
譜面制作支援モデル

49. 49
● プロジェクトメンバーと協力し、機械学習グループでモデルの
構築を進めている。
● 既存研究を元に独自の改良をくわえたモデルを使用。
● 学習用のデータはゲーム内で使っているデータを使用。
KLabにおける譜面制作支援モデルの研究開発

50. 50
2021年3月より、九州大学 情報基盤研究開発センター 附属汎オミクス計測・計算科学セ
ンター櫻井研究室との共同研究を開始。モデルの改良を目指す。
九州大学との共同研究

51. 51
ディープラーニングでリズムアクションゲーム
の譜面(の元データ)を作成する。
● 図1: 音源データ(波形)
● 図2: 譜面データ
上側を入力されると、下側を出力するようにモ
デルを学習させる
譜面作成支援機械学習モデルの概要
図1
図2

52. 52
ディープラーニングモデルを使用し、音源からDance
Dance Revolutionの譜面を作成。
KLabでの試みも、この論文を参考にしている。
KLabでの実装は論文のサンプル実装とは別に
Pytorchで再実装したもの。
先行研究の紹介
Donahue, Chris & Lipton, Zachary & McAuley, Julian. (2017)
Dance Dance Convolution. In Proceedings of the 34th
International Conference on Machine Learning , vol. 70,
pp.1039-1048.

53. 53
2つのモデルの組み合わせ
1. Onsetモデル: 音源から時系列上でノーツ
のありそうな位置を推定。
2. Symモデル: ノーツ種類の推定。過去の
ノーツとノーツ間隔を元に次のノーツの種
類を決定。
Onsetモデルでタイミングを決め、Symモデルで
ノーツ種類を当てはめていく。
先行研究の紹介

54. 54
画像認識と自然言語処理の両方の要素技術が組み合わされている。
音源データの解析(Onsetモデル)
● 画像に近い連続的データ。
● Convolution層など画像認識と同様の要素技術。
譜面の推定(Onsetモデル・Symモデル)
● 自然言語に近い離散値データの順列パターンを抽出。
● LSTM層、Transformer層など自然言語処理と同様の要素技術。
譜面生成モデルの特徴

55. 55
音源データはメルスペクトログラム化(時系
列×周波数の二次元の画像のような構造
のデータ)
Convolution層
● 二次元データの解析(画像)
LSTM層
● 順列パターンの解析(自然言語)
LSTMの段階で、難易度や小節・拍のデータ
を追加。
Onsetモデルの構造

56. 56
● 入力列: 過去のノーツ種類と間隔
● 出力列: 次に来るノーツ種類
自然言語の文章生成に使用されるのと同種の
モデル。
論文ではLSTMを使用しているが、KLabでは
Transformerを採用。
Symモデルの構造

57. 57
入力データ
● 楽曲の音源データ: 100曲程度(1曲90秒前後)
● 難易度: 初級・中級・上級・上級+
● BPM(拍位置)
出力データ(教師データ)
● ゲーム内で使用している譜面データを元に作成
○ Onsetモデル用の教師データ: ノーツ位置
○ Symモデル用の教師データ: ノーツ種類
学習に使用するデータ

58. 58
● 低難易度では、ノーツ位置は小節・拍の位置にあることがほとんど(図1)
● 拍が何秒おきにくるかはBPMによって決まる
● BPMは譜面制作者にとっても重要な情報なので、社内でも管理用のデータが
用意されている
● モデルよる譜面作成時も入力列に拍の位置を追加している(図2)。
BPM情報の利用
図1 図2

59. 59
● GANは主に画像生成などの領域で使われる技術。
● 一般的には画像生成での使用例がほとんど。
● しかし、GAN自体はモデルの学習法のテクニックなので、実際
にはさまざまなデータで使用できる。
● リズムアクションゲームの譜面でも使用できないか検証中。
GAN(敵対的生成ネットワーク)の導入

60. 60
ジェネレータ／ディスクリミネータという二種類の
モデルを交互に学習させることで、高度な偽物
を作り出す。
ジェネレータ: 偽物の画像を生成。ディスクリミ
ネータを騙すように学習。
ディスクリミネータ: 本物の写真と、ディスクリミ
ネータが生成した偽画像を識別するよう学習。
GANの紹介
StyleGanで生成された偽写真
Karras T, Laine S, Aila T (2019) A Style-Based Generator
Architecture for Generative Adversarial Networks. 2019 IEEE/CVF
Conference on Computer Vision and Pattern Recognition (CVPR). pp.
4396–4405

61. 61
GANのアーキテクチャ
G
D Fake / Real?
real data
fake data
ジェネレータ
ディスクリミネータ

62. 62
譜面作成支援への応用
画像生成 譜面作成
ジェネレータ
ディスクリミネータ
乱数を元に画像データを作
成
音源を元に譜面データ(ノー
ツ位置のみ)を作成
リアルデータとジェネレータ
が作成した画像を識別
リアルデータとジェネレータ
が作成した譜面を識別

63. 63
● 画像・音楽・文章などの自動コンテンツ生成は機械学習の中でもホットな領域。
● ただし、画像・音楽・文章など、人間が得意な領域での実用化はまだ難しい。
● ゲームの素材の中には、比較的生成しやすいものが多い。
○ 譜面以外にも3Dモデル、マップ、テクスチャなど
● 人間による修正を前提した上で、ベースを作るという発想であれば、実用化のハー
ドルは大きく下がる。
● 単純作業は機械学習に任せて、人間がクリエイティブな作業に集中できるようにし
たい。
コンテンツ生成×ゲーム

64. 64
まとめ
● 機械学習モデルによってリズムアクションゲームの譜面制作を支援
● 一曲あたり50%(20時間)の削減を達成
● Webサービスのこだわり: Vue.jsベースの使いやすいUI。少人数で効率的に
開発。
● 機械学習モデルのこだわり: さまざまな機械学習の要素技術(画像認識、自
然言語処理、GAN)を組み合わせ、人間の作業をサポート。
ご拝聴ありがとうございました