艦これ大規模メンテナンスに関する雑感

0. 前置き

艦隊これくしょん(以下「艦これ」)の大規模メンテナンスが先日、8/15 11:55より開始されました。

最新のメンテナンス状況についてはTwitterの「艦これ」開発/運営アカウント(@KanColle_STAFF)で更新されているので、そちらをご覧頂ければと思います。

さて、今回のメンテナンスは艦これのサービス始まって以来の大規模な改修となっています。

主な作業内容は上記ツイートの通りですが、改めて書き出すと

  • DBのフルバックアップ
  • 転属第ニ弾(12サーバ群への異動)実施
  • 「艦娘」高解像度化アセットの投入
  • 第二期(HTML5化)【Block-1】への換装

とのことです。

個人的に「艦これ」開発/運営アカウントについては、

のようにインターネットインフラに関わる情報も流していたため、ゲームそのものというよりもネットワーク、サーバ、Webに関わる技術や情報の観点から興味を常日頃から持っていたところに、「第二期(HTML5化)」という単語が飛んできたためあえなくクリティカルヒット、大破して筆を取らせて頂いた次第です。

後述しますが、現時点でそこそこ息の長いブラウザゲームではこの道は逃れられない運命であると言えるでしょう。そのため、「ついに来たか」という嘆息を漏らさずにはいられませんでした。時期的にも、ちょうど今頃が良い時分だったのではないかと思います。

以下、この「第二期(HTML5化)」について雑感を流していきます。完全に技術の話になるので、その点ご了承ください。

1. Flashの衰退

まず、メンテナンス前(以下、第一期)の艦これのフロントエンド(ブラウザ側の処理)について軽く触れておきます。

ブラウザで艦これのゲーム画面を開くとたまに「Adobe Flashプレイヤーを有効にしてください」と表示されるのを見たことがある提督もいらっしゃるのではないでしょうか。

その画面から分かるように、第一期の艦これのフロントエンドにはAdobe Flashが使われています。


このAdobe FlashはAdobe社が開発している動画やゲームなどを扱うための規格です。

2000年代~2010年前半には、Webサイトの最初に開いたときの画面でインパクトを出すために派手なアニメーションや動画をAdobe Flashの規格(拡張子でいうと「.swf」や「.flv」)で作成したものが広く普及していました。

また、個人サイトでもAdobe Flashで作成したちょっとしたミニゲームがコンテンツになっているものも多く見られました。

しかし、Adobe Flashは近年徐々に姿を消し、今ではほぼ見られなくなりました。その要因としては、以下のものが挙げられるかと思います。

  1. スマートフォンの普及
  2. セキュリティの問題
a. スマートフォンの普及

今やスマートフォン(以下「スマホ」)は生活に欠かせないアイテムになりました。

日本でスマホが登場したのは、

  • iPhone: 2008/7/11にiPhone 3Gがソフトバンクから発売
  • Android: 2009/7/10にHT-03AがNTTドコモから発売

となっており、約10年前に登場したことになります。

総務省の平成29年度版『通信利用動向調査』に拠れば、世帯別の情報通信機器の保有状況の推移は

  • 2010年
    • PC: 83.4%
    • スマホ: 9.7%
  • 2016年
    • PC: 73.0%
    • スマホ: 71.8%
  • 複数回答可

と、爆発的な速度でスマホの保有率が上昇していることが分かります。

ここで着目したいのは、スマホはAdobe Flashをサポートしていないことです。

特にiPhoneに関しては、故スティーブ・ジョブズ氏が「Webの技術はオープンであるべき」という方針を出しており、Flashをサポートすることはありませんでした(参考: Thoughts on Flash - AppleiPhone OSがFlashをサポートしない6つの理由 - ジョブズ氏が説明 | マイナビニュース)。

※他の要因として、「動作が重い」「タッチ操作に不向き」なども挙げられます。

b. セキュリティの問題

iPhoneなどのスマホで動作しないことも影響は大きいですが、こちらの要因についても看過できません。

つい昨日(2018年8月15日)のMicrosoft社の月一恒例Windows Update(セキュリティパッチ)でも、Adobe Flashの動作環境であるAdobe Flash Playerの脆弱性に対処するパッチが公開されました(参考: アドビ、「Flash Player」「Adobe Acrobat」などの脆弱性を修正 - CNET Japan「Adobe Flash Player 30」の月例セキュリティアップデートが公開 ~互換性問題も修正 - 窓の杜)。

Adobe Flash Playerはパソコンにインストールするアプリケーションであり、その環境の上で様々な動作をさせることができるため、Webのプラットフォームとしては非常に便利なものでした。様々なことができてしまう便利なものだけに、悪意のあるソフトウェア(マルウェア)のインストールの横道など、セキュリティ的にも狙われやすいものでした。

そのため、Adobe Flash Playerに関しては「脆弱性が発見される→パッチが配布される→新しい脆弱性が発見される……」と鼬ごっこのような状態がずっと続いていました。

Flashの衰退

上記のような理由から、Adobe Flashは徐々に活躍の場を失っていきました。

こうした流れもあってか、開発元であるAdobe社は2020年に開発と配布を終了すると発表しています。

そのため、Adobe Flashを利用したコンテンツは遅くとも2020年までにはAdobe Flash以外の技術を用いた実装に切り替える必要があります。冒頭で「そこそこ息の長いブラウザゲーム」と言及したのは、時代背景から、Adobe Flashを利用して動作している可能性が高いと考えられるからです(実際の実装を見てみないと実のところがどうなのかは分かりませんが)。

艦これもAdobe Flashを利用している以上、この運命からは逃れられません。ユーザー数が多いため、影響を小さく抑えつつ移行するための開発・テストから実際の運用での動作様子を観察するところまで考えると、ギリギリではなくそれなりの猶予を持っておく必要があるでしょう。そうした点から、2018年の夏は来て然るべきタイミングだったのではないでしょうか。

2. HMTL5について

さて、「第二期(HTML5化)」は上記の経緯より「脱Flash」というのが前提になります。そこで問題になるのは、Flashの代替となる技術です。

そこで冒頭から名前が出ている「HTML5」の登場、となるのですが。「HTML5」という言葉については文脈によってかなりブレがあるので前置きをさせて頂きます。

まず、HTMLという単語について。HTMLは”HyperText Markup Language”の略で、Webページの文書(ドキュメント)の構造を定義するために作られた、コンピュータが解釈するための言語です。

「文書(ドキュメント)の構造」というのは、論文や小説の文章にあるように「見出し」や「段落」、あるいは「箇条書き」といった文章の構造です。

Webサイトを構成する各ページ(企業のWebサイトならば「会社概要」や「製品紹介」といったページ)も、このHTMLによって構造が定義されています。

現在はJavaScriptというプログラミング言語によってアニメーションやデータの通信などの多様な使い方ができるようになったため、各種WebサービスやWebアプリケーションも存在しますが、アプリケーションでも基本にHTMLがあることは変わりません。

このHTMLは「World Wide Web Consortium(略称「W3C」)」という国際的な標準化団体・非営利団体によって仕様が策定されています。

HTMLの仕様は、長らく4.01というバージョンで維持されてきました(1999年12月24日勧告)。

しかし、スマートフォンの普及によるWebサイトの構造の変化や、JavaScriptによるWebアプリケーションといった新しい用途といった時代の変化を受け、新しい仕様が2014年10月28日に勧告されました。

この新しい仕様が「HTML5」です。狭い意味では、このHTMLの新しい仕様を指して「HTML5」と呼びます。

一方で、このHTML5は企業が開発しているプラットフォーム(Adobe Flashもこのうちの1つ)を置き換えることを標榜した仕様でもあり、そのために様々な周辺技術も策定・開発されました。

  • データをPCやスマホに保存するためのストレージ: Web Storage, Indexed Database API
  • デバイスアクセス: Geolocation API, マイク, カメラなど
  • サーバとPC・スマホの接続手法: WebSocket

上記に挙げたものは一例ですが、こうした周辺技術まで含めて「HTML5」と言い表す場合があります。広い意味のHTML5は、HTMLの仕様だけではなくWebアプリケーションなどで使用するHTML以外の周辺技術も含んでいる、ということです。

今回の艦これの「第二期(HTML5化)」は、その内容からHTMLだけで完結するわけではないので、後者の広い意味でのHTML5の意味でしょう。

JavaScriptの世界

広義のHTML5の中で、アニメーションやリアルタイムなデータの通信という分野においては、JavaScriptが担う役割が大きなウェイトを占めてくると考えられます。

HTMLは文書の構造を定義するだけであって、データの保存や通信、ユーザーインターフェースのアニメーションといった部分はプログラミング言語に依ることになります。そこで登場するのがJavaScriptです。

Flashが台頭するより前の時代、JavaScriptはある種厄介者扱いをされていました。それというのは、Internet ExplorerやNetscapeといったブラウザごとに実装が異なっていたため、同じプログラムでも挙動が異なっていたり、動作の妨げになったりしていたからです。

風向きが変わり始めたのは、スマホの普及よりも少し前、2005年頃でしょうか。

その一つの要因として、Googleの地図コンテンツであるGoogle MapでJavaScriptが使われたことが大きな影響を及ぼしたと考えられます。

それまでは地図の上下左右斜めの8方向に矢印があり、ページ内で表示されている地図と違う場所を表示するには、8方向の矢印をクリックして、リンク先のページへジャンプし、まだ違う場所ならばまた矢印をクリックしてジャンプし……を繰り返す必要がありました(図1)。

図1: Ajax登場以前の地図アプリのイメージ
図1: Ajax登場以前の地図アプリのイメージ

しかし、現在のGoogle Mapはそんなことをせずとも、見たい方向へスクロールしていけば、その部分の地図が新しく読み込まれ、どんどん先へ進むことができます(図2)。

図2: Ajax技術を使った地図アプリのイメージ
図2: Ajax技術を使った地図アプリのイメージ

これを可能にしたのが、Ajax(Asynchronous JavaScript + XML)で、JavaScriptによる非同期通信、つまり「後読み」を可能にしました。

このAjaxの仕組みにより、ページ読み込みの度に待つことを繰り返すことがなくなってユーザーの使い勝手が向上しました。そして、業務アプリケーションでも実用に耐えるようなユーザーインターフェースのアプリケーションが生まれることになりました。

jQueryの普及

JavaScriptがFlashの代替となる過程の上で、jQueryの存在も忘れてはならないでしょう。

jQueryは、JavaScriptのライブラリ(便利な機能や関数をまとめたツール群)です。

通常のJavaScriptでは、HTMLの操作を行うときにIDやクラス、あるいはタグ名でHTMLの要素を指定します。その際の記述方法
document.getElementById("ID");document.getElementsByClassName("CLASS");document.getElementsByTagName("TAG");といった長いものでした。こうした長い名前は、今までHTMLやcssを記述していたWebデザイナーから見れば、馴染みがなく覚えづらい書き方でしす。

jQueryの画期的だったところは、こうしたIDやクラス、タグ名の指定を$("#ID")$(".CLASS")$("TAG")といった、IDは#、クラスは.が先頭にあるというcssと同じ書き方でHTMLの要素を指定できるようになったところではないでしょうか。同時に、jQueryはWebデザイナーに優しいだけでなく、先述したAjaxも比較的簡単な記述で扱うことができました。かくして、jQueryは爆発的に普及し、現在もなおWebサイトを作る上で活躍し続けるライブラリとなりました。

こうした複数の要因から、JavaScriptの活躍の場が徐々に増えていくことになりました。

JavaScriptフレームワーク

JavaScriptでの開発が本格化すると、よりモダンなデザインや使いやすいユーザーインターフェースを作りこむための便利なツール群としてのライブラリの需要が高まってきました。

このようなライブラリを「JavaScriptフレームワーク(JSフレームワーク)」と言います。いちいち0から作り始めるのではなく、あらかじめよく使う機能はまとめておいて、それを準備さえしておけば1や2からスタートできるようにしたかったわけです。なお、デザインやユーザーインターフェースと言及したように、JSフレームワークが担うのは開発環境やサーバー側というよりも、ブラウザで動く方に近い領域です。今までで登場した中では、jQueryが担う領域が近いといえます。

こうしたJSフレームワークは、おおよそ2014年~2016年の間に爆発的に増加しました。しかも増加しただけではなく、俗に戦国時代とも呼ばれたように、新しいJSフレームワークが登場しては消え、消えてはまた新しいJSフレームワークが登場し……といった具合に、「半年経てばもう別のJSフレームワークに移り変わっている」というくらいの目まぐるしい変化を遂げました。まるで千歳や千代田のように。

ただし、最近はこの戦国時代も終息を迎え、3つの選択肢に固定化されてきました。いわばJSフレームワークの御三家とも言えるその顔触れは、以下の通りになります。

Reactはfacebook社が開発したJSフレームワークで、もちろんfacebookの中にも使用されています。

AngularはGoogleが開発したJSフレームワークで、デフォルトの状態では御三家の中では最も多機能です。

Vueは他の2つと比べると後発で、元Angularの開発チームだった一個人とコミュニティによって提供されているJSフレームワークです。後発なので実績やライブラリの種類は少ないですが、他2つが超大手によって開発されていることを考えると驚異的な伸びを見せています。

最近のWebサービスやWebアプリケーションでは、この3つのJavaScriptフレームワークのいずれかを使用しているケースがよく見られます。

このように、JavaScriptの技術基盤が安定してノウハウが蓄積されてきたことから、大型サービスでもある程度安心して技術を選択できるようになりました。そのため、このタイミングでの「第二期(HTML5化)」なのかもしれません。

個人的には艦これ第二期がどのJavaScriptフレームワークを使用してくるのか、と期待しています。

3. 脱Flashのために

以上長くなりましたが、「第二期(HTML5化)」という言葉には重い意味があることが分かります。

HTML5化とは、「今まで使用してきたAdobe Flashという技術・プラットフォームを捨てて、新しいプラットフォームに切り替える」ということだからです。

Adobe Flashであれば楽に実装できた機能が、HTML5ではとんでもなく面倒な実装をせざるを得ないこともあるかもしれません。逆に、Adobe Flashで込み入った実装をしていた部分を何とか解読してみたら、HTML5では楽に実装できることが分かったかもしれません。

その辺りは実際に開発に携わったプログラマやエンジニアでないと窺い知ることはできません。しかし、「HTML5化」ということが非常に困難なプロジェクトであることはある程度想像ができます。

この文章では「第二期(HTML5化)」にスポットを当てて話を進めてきましたが、冒頭で紹介した通りこの他にも

  • DBのフルバックアップ
  • 転属第ニ弾(12サーバ群への異動)実施
  • 「艦娘」高解像度化アセットの投入

といった作業も行っています。特にDB(データベース)については

とアナウンスされている通り、既存データベースを構造から見直すようです。

既に運用されているデータベースのシステムにメスを入れることも、やはり相当な準備と開発、テストが必要とされることが想像されます。

脱Flash・HTML5化というフロントエンド(PCやスマホのブラウザでの動き)での大規模な改修と並行して、バックエンド(サーバ側の処理)も改修しているのが、今回の大規模メンテナンスということなのでしょう。DBに関しては、

  • 肥大化したデータベースを、構造を見直すことでコンパクトにする
  • 上記に付随して、パフォーマンスを向上させる

といったことや、さらに進んで

  • 今後の機能追加に備えた下準備の改修

といったことも行っているのかもしれません。実際は分かりませんが。

4. まとめ

冒頭にも述べましたが、「今回の大規模メンテナンスは駆逐艦を戦艦に作り変えるくらい大変な作業なのではないか」ということをどうにかして伝えられないかと思って長文を書いてしまいました。艦これの開発・運用のスタッフとのコネはないので実際の内容がどうなっているのかは分かりませんが、おそらく大変なのだろうなと思います。

あわよくば、この文章をきっかけに少しでもWebの技術に関心を持って頂けたら幸いです。

今なおメンテナンスを行っているであろうプログラマやエンジニアの方に敬意を表しつつ、第二期の実装を待ちたいと思います。スタッフの皆様、頑張ってください。

この記事を書いた人