積極的に採用された新技術～HTML5、CSS3、JavaScriptを駆使
こういったスマートフォンならではのデザイン面の課題を考慮し、操作性の高いUIを実現するために、GREEではHTML5やCSS3などを採用。具体的には、HTML5のフォーム機能の各属性を使用して表示部分を節約したり、CSS3のレベル3セレクタの設定、アイコンのCSS実装などで、よりリッチな画面デザインを実装した。
これまでの携帯向けサイトでは、デスクトップPCで表現されるWebのインタラクションを実装したくても、表示に限界があるのは仕方のないことだった。しかし、スマートフォン開発ではJavaScriptが使用できるため、これまで携帯では実現できなかったインタラクションがWebと同じように表現できる。
さらに、iPhoneおよびAndroidのブラウザがWebkitベースで統一されていることにより、表示の差異を気にすることなくデスクトップの開発とほぼ同じ手法で実装が可能だ。デスクトップ開発で問題となる、Internet ExplorerにおけるCSS実装の不具合なども意識する必要が無くなるのだ。開発者にとっての一番のメリットはブラウザで作ったものが、ほぼそのままiPhone／Android上で動くと言うことだろう。
また、実際の開発現場では「HTML5やCSS3を画面デザインに取り入れることで、開発の生産性が向上した」点が大きいと言う。例えば「ボタンを画像で作って、角を丸くして、グラデーションをかける」などは、これまでデザイナに依頼しないといけなかったが、これらがCSSで表現可能となったことにより、開発者自身で見た目の部分も調整することが可能となり、デザイナの負担を軽減することに繋がるのだ。
HTML5は「仕様は若いが、機能自体は枯れてエンジニアに身近なもの」
まだ仕様が確定していないとされているHTML5の現状について、熊谷氏は以下のように捉えている。
「きちんと動く範囲を把握していることが大事。仕様としては新しいが、機能としては昔からブラウザの拡張機能などとして既に実装されていた技術であり、それが広く一般的に使えるようになっただけ」
OSの違いによる問題
iOSアプリとAndroidアプリの違い
ブラウザエンジンがWebkitで統一されているとはいえ、現状はOSが搭載するブラウザの違いによる問題点も残されている。例えば、AndroidのブラウザはiPhoneに比べまだ発展途上のため、gifアニメが非サポートのためうまく再生されず、代替策としては今のところHTML5のcanvas要素で実装するしかない。
一方で、ブラウザとネイティブAPIとの連携の面では、Androidの方が考慮されている。現状HTMLのみでは実現できず、連携が必要な具体例として、写真のアップロード機能やローカルへのファイルアクセス機能などが挙げられるが、AndroidではJava側からブラウザに関数を定義できるため、JavaScript側から関数を呼ぶことで、Javaのネイティブのメソッドが呼ぶことができる。この連携により、HTML側の値をJavaのネイティブが変更でき、HTMLのみでは実現できないことをJava側で補完することが可能だ。
App Storeの制約
また、iPhoneにおいては、独自の課題として、App Storeの制約などもある。App Storeを介さず、アプリが他のアプリをダウンロードすることは許可されていないため、これまでSNSでできたように、同じ画面に並ぶ複数のアプリの中からユーザーがそのときに遊びたいアプリのみを起動させることは不可能だ。しかし、「ユーザーがどのようなアプリで遊んだか」という情報はグリーのサーバが保有しており、ユーザーにゲーム履歴の一覧を表示することができるため、ユーザーはその一覧から遊びたいゲームを選ぶことで、携帯内にダウンロードされたアプリを起動できる仕組みになっている。
