グランブルーファンタジー（グラブル）も今年で4周年を迎えました。いろいろ問題もありましたが、なんとかサービスも続いています。
2018年の今となっては、リッチなブラウザゲームというものは普通になりましたが、グラブルには4年前当時としてはわりと珍しい技術が使われています。
自分が遊んでいるゲームはどんな技術で動いているのだろう？と気になる人も多いと思います。そこで、この記事では、グラブルを取り巻く技術について簡単に解説したいと思います。
グラブルというゲーム
みなさん元気にグラブってますか？私は最近になって団アルバハHLに参加できるようになり、オメガ武器を作ることができました！4周年アップデートでやることもどんどん増えてきて、最近楽しいです。マグナ2の武器は全く出ずに苦労していますが、ちまちま6連戦を繰り返して頑張って集めようとしています。そして次に待つのは光有利古戦場ですね。一緒に頑張りましょう。
さて、そんなグラブルですが、一度は皆が気になった事があると思います。それは、「グラブルはいったいどんな技術で動いているのだろう？」ということです。
なんとなーーく気づいている人も多いと思うのですが、「グラブル、他のゲームアプリとはちょっと違うな？」と感じることがあるのではないでしょうか。それもそのはずで、グラブルは多くのゲームアプリとは使っている技術が根本的に違うのです。
いったい何が違うのだろう。どうやって作られているのだろう。そんなことが気になって仕方がないのではないでしょうか。そこで、この記事ではグラブルを取り巻く技術についてかるーく簡単に説明したいと思います。
なお、この記事は非技術者向けの記事となります。技術者の方にとっては面白い内容ではないと思います。あらかじめご了承ください。
グラブルはアプリじゃない？
Cygamesのスマホゲームというとシャドウバースやデレステなどがありますが、どうもグラブルはあれらとは違う雰囲気を放っています。いったいこの「なんとなくの違い」はどこから来るものなのでしょうか。
シャドバやデレステといったゲームは、iPhoneやAndroid専用に作られたゲームで、いわゆるネイティブアプリと呼ばれています。ネイティブアプリはその機種専用に作られたゲームのことで、専用設計なので計算が高速にできたり、様々なセンサーや通信機能を使った高機能なゲームを作る事ができます。PCで言えば、多くのPCゲームがWindowsでしか動かないのも「Windows向けのネイティブアプリ」だからですね。
察しのいい方ならもう気づいたかもしれませんが、こういう話をするということは、つまり「グラブルはネイティブアプリではない」ということです。グラブルはiPhoneやAndroid向けに作られたゲームではないのです。ええー、でもiPhoneやAndroidで動いてるよ？どういうこと？
ちょっと話を変えましょう。ブラウザってご存知でしょうか。SafariとかChromeとかFirefoxとかのことです。つまりウェブサイト（ホームページ）を見るためのアプリですね。
今まで疑問に思わなかったかもしれませんが、ウェブサイトというのはPCからでもスマホからでも、ゲーム機からでもタブレットからでも見ることができます。そしてちゃんとだいたい同じ内容が表示されます。
これ、実は意外と大変ですごい事なのです。ウェブページを作るための規格というのがガチガチに固まっていて、ブラウザの制作会社はそれをしっかり守って表示するようにします。するとどんなデバイスでも同じように表示されるわけです。すごい！
「ウェブページはどんなデバイスでも同じように表示される」……ここでひとつ悪巧みをしたくなります。「ウェブサイトの技術でゲームを作れば、どんな機械でも動くゲームが作れるんじゃね？」と。
そう。その発想の元に生まれたゲーム、それこそがグラブルなのです！つまり、グラブルはネイティブアプリではなく、単なる超豪華なウェブサイトだったのです。
そしてアプリ版グラブルも、中身はただのブラウザです。グラブルのページを表示するだけのブラウザが組み込まれているのです。
グラブルの正体は超豪華なホームページ
衝撃の事実！グラブルは実はアプリではなく超豪華なだけのウェブサイト（ホームページ）だった！なるほど、他のゲームアプリとはちょっと雰囲気が違うわけです。
しかしウェブサイトを作る技術で、どうやって「ゲーム」を実現しているのでしょうか？
ウェブサイトを作るのには、HTMLやJavaScriptと呼ばれる言語が主に使われています。かつて個人ホームページなどを作った経験のある方ならピンと来るのではないでしょうか。HTMLは文書を記述するための言語で、とてもゲーム作りのためのものとは思えません。JavaScriptはウェブページの動作を記述するためのプログラミング言語ですが、こちらもあまり高度な事ができるものではありませんでした。
しかし近年になってHTMLもJavaIScriptも大幅に拡張されました。「ウェブでも、ネイティブアプリ並みのことができるように！」と、様々な機能が大量に追加されました。その結果、ウェブサイト上でリアルタイム通信をしたり、3Dグラフィックスを描画できるようになったり、スマホについている各種センサも使う事ができるようになりました。
これらの、近年に追加された技術ことをひっくるめて「HTML5」と呼ぶ事があります。かつて個人ホームページ作りなどに使われた、ウェブサイトを作るためだけだった「HTML4」から一歩バージョンが進んで「5」です。HTML5の登場は、ネイティブアプリ並みの体験をウェブにもたらしました。
グラブルが生まれたのは、ちょうどそれらのHTML5が盛り上がってきて実用段階に入った頃でした。それら最新技術が取り込まれた、ChromeやFirefoxなどのいわゆるモダンブラウザと呼ばれるインターネットブラウザが台頭してきた時代に、Cygamesはいちはやく飛びつき実現にこぎつけたのです。
Flashとウェブ標準技術
最新ウェブ技術でゲームを作る、と言っても、過去にウェブゲームがなかったわけではありません。特にFlashと呼ばれるウェブ環境は、映像作品からゲームまで幅広く使われていました。だから昔からインターネットを見てきた人はこう思うでしょう。「Flashと何が違うの？」と。
Flashは、悪く言ってしまえば「全くの部外者」の技術でした。Macromedia（現在はAdobe）という会社が提供するFlashPlayer上で動く、限定的な映像プログラムのことをFlashと呼んでいました。部外者の技術であるので、ブラウザにFlashPlayerというプログラムをインストールしないと動きませんでした。
FlashはHTML5の無い時代に、リッチなウェブ体験をもたらしました。ですが、あくまでも部外者の拡張技術です。Adobeがやる気をなくしたり、機器メーカーがFlashの搭載を拒めばFlashは動きません。現にiPhoneでFlashは動きませんし、AndroidにFlashが提供されていたのもずいぶん昔の話になります。
一方でHTML5は「ウェブ標準」と呼ばれる規格です。標準ということは必ず実装しなければならず、どのブラウザメーカーもウェブ標準を守る必要があります。簡単に言ってしまえば、ブラウザを作る以上はウェブ標準は守らなければならないので、どのブラウザでも外部プログラムなしで絶対同じように動くということです。
そして、グラブルはウェブ標準技術のみで作られています。拡張プログラムなしで、ブラウザ単体で動くように作られているということです。つまり、グラブルは純粋なウェブページであるので、どこでも動かなければならない、ということが保証されます
ウェブアプリのメリットとデメリット
ゲームをネイティブアプリとしてではなく動くホームページ、つまり「ウェブアプリ」として作るのにはいくつかのメリットがあります。中でも特に、先ほども述べたように、「一度作ればどんな機械でも同じように動く」というのは大きなメリットです。
複数の機種でゲームを動かすのはなかなか大変で、機種間の差異を吸収するソフトを使って機種ごとに別々の実行ファイルを作ったりします。一方でウェブ標準技術で作られたウェブアプリは、ひとつのプログラムでどこでも動きます。
もちろんデメリットもあります。ウェブアプリを作る際に使うJavaScriptというプログラミング言語ですが、動作がそんなに速くありません。重い処理をやらせると、どうしてもネイティブアプリの速度に劣ります。
また、現実問題として、全てのブラウザがウェブ標準を完全に守れているかというと、意外とそうではなかったりします。どのブラウザも頑張ってウェブ標準に近づけてはいますが、バグが残っていてブラウザによってはちょっと表示がずれるなんてこともあります。グラブルがChromeとSafariのみにサポート対象を絞っているのはこのあたりが原因だと思われます。
そして、やはりウェブ標準ではネイティブアプリの機能に追いつけません。例えばデータのダウンロードでは、ネイティブアプリは好きなだけダウンロードさせる事ができますが、ウェブアプリでは容量制限が厳しく、ブラウザにもよりますが50MB程度がダウンロードの限度になります。キャッシュに収まらなかった分は毎回通信して取ってこないといけなくなります。
このあたりはどうしてもトレードオフになってしまいます。ウェブ標準も日々進歩しているので、時間が解決するとは思いますが。
計算処理はサーバで
グラブルに限った話では無いのですが、この手のオンラインゲームは多くの処理をサーバ側でやっています。これはユーザの端末の中で処理していると、改造されたりする可能性があるからです。
ではブラウザ側のグラブルは何をやっているかというと、結果の表示だけです。「1アビを押した」とか「この救援を選んだ」とかの情報をサーバに送って、サーバが戦闘のダメージ計算などをして、その計算結果だけをブラウザ側のグラブルに送ります。
つまり、私たちがダメージを見るときにはもうすでに計算は終わってて、その結果だけを見せられているのです。「リロ殴り」が成立する理由がこれです。ダメージ計算はサーバ側に任せるので、ボタンを押した直後にリロードでダメージ表示を飛ばしても、ちゃんと計算は行われているので全く問題ないという事です。
サーバ側の処理は我々では覗けないので詳しい話はできないのですが、グラブルではPHPというプログラミング言語が使われているとのことです。詳しくはCygamesさんの「グラブル流運用術〜1700万人を満足させるためのシステム構成、PHPプログラムの考え方〜」をご覧ください。
また、どうやらアビリティレールはブラウザ側の処理なようで、リロードすると消えてしまいます。全部が全部サーバで計算するのではなく、こういう風に一部処理はブラウザ側でやっているのかもしれません。
WebGLでネイティブ並みの描画速度を
戦闘の計算はサーバ側でやるのだから、ブラウザ側は入力と描画しか担当しません。特に描画に関してはブラウザ側のもっとも重要な仕事になります。
先述の通り、ウェブアプリはあまり高速には動作しません。特にグラフィックの描画が大変で、ゲームという分野においては致命的です。
グラブルの開始当初はcanvasという2Dグラフィック向けの描画機能が使われていました。canvasは使い方が簡単で、これはこれである程度高速に動作するのですが、やはりネイティブアプリの描画機能には追いつけません。
canvasを使ったグラフィック描画の例
canvasの他に、もう一個のグラフィック技術にWebGLというものがあります。WebGLはネイティブに近い描画処理を扱える機能で、3Dグラフィックス向けの機能ですが、2Dグラフィックスに応用することもできます。WebGLは使い方が難しいですが、その分高速に動作します。
今は消えていますが、グラブルはかつて「β版」という描画設定がありました。これはWebGLを有効にするための設定で、β版に切り替えると描画がかなり高速化したのがわかりやすかったと思います。現在ではβ版設定は消えてデフォルトでWebGLが有効になっており、誰でも恩恵を受けることができます。
WebGLに興味のある方は、当ブログの「WebGL2入門 基礎編」もご覧ください。
ライブラリで作りを簡単に
HTML5は非常に高機能で、なんでも実現できてしまうように思えます。ですが1から全部プログラムを書いていくのはとてもしんどい作業になります。
そこで一般的には「ライブラリ」と呼ばれるプログラミングの道具箱を使います。例えば画面表示ライブラリを使えば画面の描画が簡単にできるようになったり、アニメーションライブラリを使えば簡単にアニメーションが実現できます。
グラブルも多くのライブラリを用いています。例えばcreatejsというアニメーションライブラリを採用していたり、jqueryやunderscoreといったユーティリティライブラリを使っています。
グラブルぐらいの規模になると全部自力で作ると非常に大変なので、こういった工夫をして作業量を減らしているのですね。
今後のウェブ技術で実現できるかもしれないこと
ウェブの世界は日進月歩で、今でも様々な新しい規格が提案・策定されています。グラブルにもそれが採用されれば、もっと快適になるはずです。
例えばWebAssemblyというものがあります。これはプログラムをネイティブに近い形式に変換して、高速に実行する仕組みです。最近になってブラウザに実装されたのでグラブルは使っていませんが、これを使えばもっと高速に動作するようにできるかもしれません。
他にもServiceWorkerという技術もあります。ServiceWorkerはブラウザとサーバの中間に位置する存在で、たとえば一部のファイルをキャッシュしてオフラインで動かせるようになります。また、プッシュ通知機能もあるので、グラブルを起動していないときにも通知を受け取ることができるようになるかもしれません。
さらに進んでProgressive Web App（PWA）というものもあります。これはいろんな技術を組み合わせて、ネイティブアプリ並みの体験をウェブアプリで得ようというものです。PWAはネイティブアプリのようにスマホのホーム画面にインストールすることができ、ウェブアプリがまるでひとつのアプリのように動作します。
こういった技術が今度グラブルに採用されるかはわかりませんが、ウェブ技術で実現できることは日々増えています。最新技術も導入して、より快適に遊べるようになってほしいですね。
さいごに
このゲームはどうやって作られているんだろう、という多くの人が持つ疑問に対して、私なりに整理してみました。深くは解析できないですし、サーバ側にいたっては何も見ることができないのであまり突っ込んだ内容にはできませんでしたが、表面をなぞるぐらいはできたはずです。
ゲームとひとことに言っても様々な形態があります。今でこそHTML5のブラウザゲームは珍しくありませんが、グラブルサービス開始当初にHTML5を採用するのはなかなか勇気が必要だったと思います。HTML5は実に面白く素晴らしい規格で、これからもどんどん発展・普及していくので、時代の変化が見逃せませんね。
それでは、今後も楽しいグラブルライフを。