グリー株式会社 メディア企画本部 清田徹氏（右）
ハイブリッド開発のメリットとアーキテクチャー刷新の理由
グリーのセッションでは、最初に伊野友紀氏が登壇。グリーのスマートフォン戦略と、その実現のための技術について紹介した。グリーではスマートフォン向けの環境整備を着々と行っており、2010年8月にiPhone版「GREE」のベータ版をリリース。2011年1月から、「GREE Platform for smartphone」のWeb版、iOS版、Android版を矢継ぎ早に出した。国内では最速でフルラインナップを提供している。内製ソーシャルゲームのスマートフォン移植も、1月の『モンプラ』を皮切りに、次々とリリースしている。すでにフィーチャーフォンとほぼ同じ課金収入を得ているという。
現在、グリーの国内ユーザーは2,500万人に達している。グローバル戦略も着々と進めており、2011年4月、全世界で7,500万ユーザーが利用するOpenFeint社を買収。合わせて1億人以上が利用するプラットフォームとなっている。
ではグリーは、具体的にどのような技術を用い、スマートフォン戦略を推進しようとしているのか。まずWebでのサービス提供では従来のノウハウが使え、少しの変更でPC、フィーチャーフォンにも対応できる。ただ、Webではカメラなど内蔵の機能を使うことができない。そのためには、ネイティブのプログラムを開発する必要がある。ネイティブなら、起動の早さやUI拡張の容易さなどのメリットも享受できる。ただ、開発工数が増大する上、iOS用とAndroid用は別開発になるなどのデメリットも大きい。
そこでグリーでは「ハイブリッドアプリ」の開発を進めている。可能な限りWebで開発し、Webではできない機能についてはネイティブを使う。つまり両者の「良いところ取り」をする開発手法だ。
続けて伊野氏は、実際のフィーチャーフォンからスマートフォンへの移植作業における考え方を紹介した。グリーのアーキテクチャーはEthna（えすな）というPHPのフレームワークで動いており、HTML、Action、Logic、Storage、データベースなどのレイヤーがある。ただ開発当時、スマートフォンのような複数のビューがあるデバイスが来ることは想定していなかったため、移植には様々な不都合が生じることになってしまった。
まずLogicを共有し、スマホ用にActionを入れることを考えたが、実際はAction内に書かれているLogicも多く、構想は頓挫した。その他テンプレートを使うなども検討したが、結局モバイル用のアクションを半ば強引にスマホ用に作成し直して公開することになった。現在ではフレームワークを刷新し、スマートフォンとフィーチャーフォンのビルドプロジェクトを一つにし、同時にリリース可能にしている。
続けて不正な操作を防止するチート対策では、ログをまとめて送る手法を採用した。例えばボス戦が終わるまでサーバとは通信せず、一区切りしたところでログを送る。サーバ側でもう一度ボス戦をやり直し、不正がないか確認し、結果を戻す。
Flashの機能をHTML5で実現するには
ここでスピーカーが、Flashチームのリーダーを務める清田徹氏に交代。Flashは多くのコンテンツで画面作成、アニメーションなどで使われている技術だがAndroidでは動くものの、iOSでは使えない。そこでFlashチームの仕事に、HTML5への変換が加わった。清田氏は「移植作業には、何らかのツールを使った自動変換と、手作業の2つのアプローチがあると考えた」と振り返る。自動変換は最小限の手間で済み、コスト面でも有利だが、どこまで可能か未知数だった。一方、手作業であれば、確実に移植を実現できる。しかし一個Flashが作られるたびに作業が発生する。そこで検討の結果、自動変換を模索しながら、当面は手作業で移植を進めることになった。
まずFlashの機能を整理。グラフィック描画、フレーム、ムービークリップのネスト構造、インタラクティブの4要素をHTML5満たすことができれば、移植が可能だと考えた。
まずグラフィック描画だが、FlashのベクターデータをSVGに変換し、canvasで描画してみたが、どうしてもパフォーマンスが悪かった。そこで1コマずつpngファイルに書き出し、<div>タグのbackground-imageに設定し、その<div>をCSS3プロパティのwebkit-transformを使って動かすという方法にすると、かなり使えることが分かった。
次にフレーム。HTML5ファイルの場合、Flashにあるタイムラインという概念がない。そこで一定時間後に処理を行うwindow.setTimeOut()という関数を使うと、同じ動作を繰り返すループが再現できる。続いてビデオクリップ内に別のクリップを入れるネスト構造をどう実現するか。HTMLでは<div>の中に<div>を入れれば同じことになるので、それを使うことになった。getter/setterメソッドやwebkit-transformなどを使って機能を実現し、同時に入れ子状にする処理のためにFlashの関数（addChildなど）に似せた名前の関数を作った。Flashクリエイターが参入しやすくするためだ。
最後のインタラクティブの仕組みは、ボタンなどイベント実行のきっかけになるオブジェクトを決めるaddEventListener関数と、画面を押した瞬間に発生するtouchstartイベントの検知で対応できる。
スマートフォンアプリ開発におけるUI、画面デザインの留意点
以上のFlashからの移植ポイントに続けて清田氏は、スマートフォンならではの開発ポイントをいくつか紹介した。まずUIでは、多くの開発者がピンチ、スライド、フリックなどを使ってみたくなる。しかし、実際に組み込んでみると使うために余計なテクニックが必要だったり、使い方の説明が難しかったりする。また同時にフィーチャーフォン版も開発している現状では「スマホならではのUI設計は忘れよう」というのが結論だ。
次はCSS3の活用。例えば帯、線、ボタンはなるべくCSSで作成した方が良い。様々な端末があり、解像度などがバラバラだったりするのだが、CSSで作られていれば、きれいに対応してくれる。画像を使わないので、読み込み時間が短縮される。また、コードが苦手なデザイナー向けに、CSS3のサンプルコードを掲載している「CSS3 Button Generator」のような便利サイトの活用も有効だ。
続けてデザイン的側面での留意点。フィーチャーフォンでは上下キーを押していけば、メニューの選択肢を順番にすべて辿ることができる。スマートフォンの場合、指が触れないとボタン等の存在に永遠に気づかない可能性がある。そのため、エレメント数を減らし、リンクと分かるデザインにする。
最後に清田氏は、「スマートフォン時代になっても回線速度は変わっていないが、端末の処理能力は上がっている。ゲームの要素を分解して優先度を再確認すべき」と強調してセッションを閉じた。
グリー株式会社
