「アイドルマスター シャイニーカラーズ」をモバイルブラウザ上で実現させるための取り組みとは？【CEDEC 2018】 ネイティブアプリと同等のクオリティへの挑戦

冒頭ではバンダイナムコエンターテインメント兼BXD「アイドルマスター シャイニーカラーズ」（以下、シャニマス）制作プロデューサーの高山祐介氏が本セッションの趣旨を説明。その後、enza-game.jsの開発および保守・運用プロジェクトのディレクター・プロデューサーを務めるSmith氏から、「シャニマス」の提供、そして現在に至るまでの取り組みから得られた知見を紹介していった。

すでにプレイしている人にはご存知のとおりだと思うが、「シャニマス」はBXDが提供するスマートフォン向けブラウザゲームプラットフォーム「enza」で提供されている。

現在、スマートフォンブラウザではWebGLが普及していることから、ネイティブアプリと同等のクオリティで、高い表現品質の実現およびパフォーマンスの維持が十分に可能な時代に突入しているが、その一方で実際にブラウザ上のゲームサービスとしてそれらが実現できるのは未知の領域だった。それに挑戦したのが「シャニマス」というわけだ。

挑戦するにあたって、enzaとそれを取り巻く環境を学び、適切な道具・手法を選択していくことが重要だと話したSmith氏。ここからは実際の流れに沿って、技術・ツール・手法をいかに選択していったかが紹介された。

まずは基本となるゲームエンジンについて。enzaのプロジェクト構想当時、すでにHTML5に対応していて2D表現ができるゲームエンジンは存在したそうだが、スマートフォンブラウザに特化したゲームエンジンはまだ用意されておらず、パフォーマンス面での懸念があったという。

そこで、スマートフォンブラウザ特化の2Dゲーム用ゲームライブラリの開発プロジェクトがローンチされ、そして生まれたのがブラウザWebGLで動作するJavaScript 2Dゲーム制作用エンジン「enza-game.js」だ。画面表示までの簡便さと高速な動作を実現した同エンジンは、そのまま「シャニマス」でも採用されている。

サウンドミドルウェアとエフェクトツールに関してはHTML5版が用意されているサービスの試験導入と検証を行ったものの、開発における以下の懸念から導入を見送り。サウンドについてはenza-game.jsで提供されている、ブラウザ標準のWebAudioで実装されたサウンドシステムを、エフェクトについてはenza-game.jsで描画のバックエンドに使用しているpixi.jsの専用モジュールで親和性が高く、パフォーマンス面での懸念が低いpixi-particlesを利用することに。

また、アニメーションについては、pixi.js向けプラグインが公開されていることから親和性が高く、導入およびチームでの対応に関するコストからSpineを採用。リンクアピール時など多くのキャラクターを動かす際には重くなるという課題はあるが、画面上のキャラクター数など一定の運用ルールを設定することで対応しつつ、表現品質を優先しているそうだ。

これらのミドルウェア選定を通じてSmith氏が感じたのは、全体的にWebGL/HTML5は実験領域であるということ。特に描画に関するミドルウェアへの対応コストの高さ、判読の難しいコードで構成されたasm.jsで提供されているモジュールの導入への課題などが浮き彫りになったようだ。

続いては画面遷移について。enza-game.jsでは単一のステージではなく複数のシーンを扱う前提の設計にしており、「シャニマス」ではUX（ユーザーエクスペリエンス）を尊重して、新たにページを読み込むことなく、異なる画面を表示する「SPA（Single-Page Application）」を採用。ルーティングで任意のシーンに遷移するようにした。

その結果、思わぬ副産物としてURLから直接任意のシーンに遷移することができるようになり、デバッガビリティが向上。その一方で、自由に遷移させたくない画面などでは同一のルーティーンで状態を持つなど、導線設計・制御が困難になるというデメリットも。

そしてネイティブアプリと違い、ブラウザはファイルシステムを直接扱えないため、通信量を抑える意図でのリソース永続化は重要な課題のひとつ。「シャニマス」では、HTTPヘッダの適切な設定によるブラウザキャッシュの制御、という手法を用いることでその課題に向き合っている。

これまで触れてきたことは全て準備段階でのことになるが、実際の開発上ではさまざまな問題が発生したという。ここからは、その一部を実際に起きたことを交えながら説明していった。

まずはAppleが導入したITP（※）でenzaが動いたことについて。ここでは、enza独自の仕様である、ユーザー登録をしなくてもゲストユーザーとしてゲームが遊べることが問題になってくるという。

※ITP（Intelligent Tracking PreventionIntelligent Tracking Prevention）：ユーザーが意図しないサードパーティドメインから発行されるCookieは保持せず破棄するという、ユーザーを守るためのWebkitの仕様

enzaでは、ゲストユーザーのゲームプレイ進行状況は、発行されたCookieが残存している限り保持される仕組みとなっている。ただ、ITPの環境下では、ゲームサーバーがenza.funには関係のないドメインである場合、enza.funが発行したCookieはすぐに削除されるため、次回プレイ時にプレイ状況は復元されないのだ。

一方、ゲーム側のサーバーがenza.funのサブドメインである場合にはCookieそのまま保持されるため、続けてのプレイが可能となる。つまり、ITPの環境下で適切に動作するためには、ゲームサーバーのドメインを全てサブドメインにする必要がある。現時点でもITPのバージョンは上がり続けており変化しているということで、注意を促していた。

また、ブラウザ上では動画やサウンドの再生にユーザーのタップが必要となる。そのタップを契機に一度再生させれば、その後のメディア制御が可能になるということで、いかにタップさせるかが大きなポイントになってくる。

サウンドの場合は初めて画面をタップした時点で空のサウンド再生処理を実行することで以降の処理は必要ないのだが、動画に関しては各動画ファイルごとにタップ処理を行う必要が出てくる。

実際、「シャニマス」では思い出アピールやガシャでのSSR演出など要所で動画を用いているが、その都度タップをするようになっている。また、ガシャの連続排出時は当初タップを必要としない仕様だったが、上記の制約によって、タップを必要とする仕様に変更されたのだとか。なお、メディア再生にタップを要するかどうかは、ブラウザやそのバージョンによって異なるそうだ。

そのほか、SafariのUIにおけるゲームの遊びづらさを解消するため、ボタン類が小さくなりすぎないようにしたり、画面上部には使用頻度の高いボタンを置かないようにするなどの配慮をしていることや、ブラウザ上で発生する不具合への対応など、まさに開発中ならではの問題が語られた。

そして最後に触れたのが、SafariのWebAppモードについて。先述したiOS SafariのUI問題を解消する上ではWebAppモードの利用は効果的であり、UX的にも推奨したいものではあったが、結果的に公式としてのサポートはしないという判断になったそう。

その要因となったのは、またしてもCookieに関する問題。WebAppモードで起動後、enzaへのログインをする際、外部アプリでログインすると通常モードへ切り替わってしまう。WebAppモードとSafariとではCookieが共有されないため、WebAppモードに戻るとログイン情報がリセットされてしまうという問題が起こるのだとか。

こうした苦労を経てリリースされた「シャニマス」だが、引き続きネイティブと同等のクオリティへの挑戦は続けているそうで、その一環として挙げたのが、通信環境に左右されずに利用でき、ユーザー操作に対してスムーズに反応し、ネイティブアプリと同等のUXを提供する、PWAへの挑戦だ。

具体的な取り組みとしては、Lighthouseを用いた定性評価、通信量の削除、セキュリティ品質の向上の3点を挙げた。専門的な話が多くなるので、ここでは説明そのものは割愛するが、これらの改善を経て、よりネイティブに近いUXをユーザーに提供できるようにしていきたいという展望を語っていた。