開発スタイルの変化がもたらすチーム連携の重要性
今回、グリーがHTML5で開発しているスマホアプリでは、その開発スタイルが、既存のものとは大きく変化している。既存プロダクトの開発スタイルでは、バックエンドエンジニアが機能と画面の作成を兼務することが多く、開発は多くても2～3名で行っていた。
一方、今回のプロダクトでは、これまでより開発が大規模化し、さらにリッチなUIの実現が求められた。バックエンドエンジニアが兼務するのは難しくなり、フロントエンド専門のチームとの分業体制となった。演出やアプリ、サウンドなど、多数のチームが関わるため、各チーム間の連携が重要となった。このスタイルのメリットは負荷が分散して専門化することだが、仕様のぶれや手戻り発生というデメリットがある。
では反田氏たちは、課題解決のためにどう動いたのか。まずフロントエンドとバックエンドのエンジニアの連携を難しくした背景には、「テンプレート化を考慮しない実装」というものがあった。フロントエンドエンジニアが先行して画面を実装していくのだが、それを実際にプロダクトに組み込むことになったときに問題が出てきた。
ソーシャルゲームでは、レイアウトがほぼ同一で、背景画像が異なっている画面がよくある。そうした場合、サーバ側で背景画像を置き換えているのだが、パラメーターがCSS/JavaScriptにハードコーディングされているものに関しては、置き換えられない。そのため、組み込み時点で実装を変えなければならなくなる。
また通常の手法では、HTMLが完成しないと、テンプレート化できない。さらにデザインが変更されるとHTMLの変更が必要になり、変更の差分を見て、再度テンプレート化をするといった作業が繰り返し発生する。また、マークアップの意図を理解できなかったケースで、テンプレートタグの組み込み漏れがあった。
以上の問題に対し、早い段階で実行したのは以下の3つ。
- テンプレートによる置き換えを想定して実装する。
- パラメーターで置き換わる画像はCSSで指定しない。
- JavaScriptで参照するパラメーターは、HTML側にdata属性で埋め込む。
連携でポイントになるのが、テンプレートの共有化だ。デザイン変更時などの手戻り発生を防ぐためには、「マークアップの段階で、テンプレートを組み込めばいい」というわけで、今回はSmarty互換のJavaScriptテンプレートエンジン『jSmart』を導入した。
HTMLではなくテンプレートを直接マークアップすることで、クライアント/サーバ間でテンプレートを共有化できるようになり、手戻りが発生しなくなった。
フロントエンドエンジニアが、サーバ側のSmartyテンプレートを直接編集するという方法もあるが、採用しなかった。なぜなら、開発中にサーバ側のプログラムがたびたび動作しなくなることが予想され、そのたびにフロントエンド開発作業がストップしてしまうからだ。
フロントエンド開発時は、モックデータを用意し、動作確認する。そのモックデータに合うようにサーバ側はデータをセットする。jSmartで作ったテンプレートをスクリプトで変換し、サーバ側にインポートすることで、手間なくテンプレートの組み込み作業ができるようになった。
サウンド組み込みと演出の作業効率改善も課題となった。まず、HTML5で音を鳴らそうとすると、1つの問題がある。それは、<audio>タグにより同時再生可能な音源数に制限があり、複数の音を組み合わせて再生することが不可能だということだ。つまり、BGMとSEを同時に再生することができない。これはゲームの演出を作るにあたって、致命的な問題だ。
そこで新プロダクトでは、GREE SDKが提供するアプリ側のサウンド再生APIを利用することで回避している。具体的には音声ファイルをアプリに組み込み、アプリ側のサウンド再生APIをWebViewから呼び出し、音を鳴らす。
しかし、まだ課題が残る。アプリがないとサウンドの検証ができないのである。そのため演出やサウンド担当者は、ボリュームの調整や音源の差し替えを、アプリの開発者にいちいち依頼しなければならない。
そこで、GREE SDKとHTML5それぞれのサウンド再生APIを切り替えて使える、ラッパーAPIを用意して対応した。<audio>タグにアプリ側API固有のパラメーターをdata属性として設定し、アプリとPCブラウザ、それぞれで適切なAPIを呼び出して再生する。この結果、アプリでもPCブラウザでも音声再生をサポートできるようになった。
