14:00グリーの反田光洋氏のセッションテーマは、HTML5でのスマホアプリ開発の実践的なノウハウだ。フロントエンド、バックエンド、演出、サウンドといった複数チームによる大規模開発を進めるにあたって工夫した点。OSSのアニメーションエンジンLWFを利用した開発事例。その他、ゲームをより快適にプレイできるように工夫した点など、開発の現場におけるヒントが多数紹介された。今回、グリーがHTML5で開発しているスマホアプリでは、その開発スタイルが、既存のものとは大きく変化している。既存プロダクトの開発スタイルでは、バックエンドエンジニアが機能と画面の作成を兼務することが多く、開発は多くても2~3名で行っていた。今回のプロダクトでは、これまでより開発が大規模化し、さらにリッチなUIの実現が求められた。バックエンドエンジニアが兼務するのは難しくなり、フロントエンド専門のチームとの分業体制となった。演出やアプリ、サウンドなど、多数のチームが関わるため、各チーム間の連携が重要となった。このスタイルのメリットは負荷が分散して専門化することだが、仕様のぶれや手戻り発生というデメリットがある。反田氏たちは、課題解決のためにどう動いたのか。フロントエンドとバックエンドのエンジニアの連携を難しくした背景には、「テンプレート化を考慮しない実装」というものがあった。フロントエンドエンジニアが先行して画面を実装していくのだが、それを実際にプロダクトに組み込むことになったときに問題が出てきた。ソーシャルゲームでは、レイアウトがほぼ同一で、背景画像が異なっている画面がよくある。した場合、サーバ側で背景画像を置き換えているのだが、パラメーターがCSS/JavaScriptにハードコーディングされているものに関しては、置き換えられない。そのため、組み込み時点で実装を変えなければならなくなる。通常の手法では、HTMLが完成しないと、テンプレート化できない。デザインが変更されるとHTMLの変更が必要になり、変更の差分を見て、再度テンプレート化をするといった作業が繰り返し発生する。マークアップの意図を理解できなかったケースで、テンプレートタグの組み込み漏れがあった。以上の問題に対し、早い段階で実行したのは以下の3つ。テンプレートによる置き換えを想定して実装する。パラメーターで置き換わる画像はCSSで指定しない。JavaScriptで参照するパラメーターは、HTML側にdata属性で埋め込む。連携でポイントになるのが、テンプレートの共有化だ。デザイン変更時などの手戻り発生を防ぐためには、「マークアップの段階で、テンプレートを組み込めばいい」というわけで、今回はSmarty互換のJavaScriptテンプレートエンジン『jSmart』を導入した。HTMLではなくテンプレートを直接マークアップすることで、クライアント/サーバ間でテンプレートを共有化できるようになり、手戻りが発生しなくなった。フロントエンドエンジニアが、サーバ側のSmartyテンプレートを直接編集するという方法もあるが、採用しなかった。開発中にサーバ側のプログラムがたびたび動作しなくなることが予想され、そのたびにフロントエンド開発作業がストップしてしまうからだ。フロントエンド開発時は、モックデータを用意し、動作確認する。そのモックデータに合うようにサーバ側はデータをセットする。jSmartで作ったテンプレートをスクリプトで変換し、サーバ側にインポートすることで、手間なくテンプレートの組み込み作業ができるようになった。テンプレートの共有化サウンド組み込みと演出の作業効率改善も課題となった。HTML5で音を鳴らそうとすると、1つの問題がある。それは、<audio>タグにより同時再生可能な音源数に制限があり、複数の音を組み合わせて再生することが不可能だということだ。BGMとSEを同時に再生することができない。これはゲームの演出を作るにあたって、致命的な問題だ。SDKが提供するアプリ側のサウンド再生APIを利用することで回避している。具体的には音声ファイルをアプリに組み込み、アプリ側のサウンド再生APIをWebViewから呼び出し、音を鳴らす。アプリがないとサウンドの検証ができないのである。そのため演出やサウンド担当者は、ボリュームの調整や音源の差し替えを、アプリの開発者にいちいち依頼しなければならない。SDKとHTML5それぞれのサウンド再生APIを切り替えて使える、ラッパーAPIを用意して対応した。<audio>タグにアプリ側API固有のパラメーターをdata属性として設定し、アプリとPCブラウザ、それぞれで適切なAPIを呼び出して再生する。この結果、アプリでもPCブラウザでも音声再生をサポートできるようになった。圧縮・解凍UNIX基本講座@CodeZine『CodeZine(コードジン)』の公式アカウントです。【NEW】デブスト2019デブサミ2019福岡・関西デブサミ2019夏デブスト関西デブサミ2019×ログインEメールパスワード※旧SEメンバーシップ会員の方は、同じ登録情報(Eメール&パスワード)でログインいただけます。イラストの無断転載を禁じます。記載されているロゴ、システム名、製品名は各社及び商標権者の登録商標あるいは商標です。