【第3回】#SmartHacks - スマートフォンブラウザ技術勉強会 - ～ スマートフォン上で動くhtml5 + CSS3 + Javascriptについてhackathon形式で学びます ～ に参加してきました

スマホアプリ開発の仕事は予定にないのですが、今ホットなソーシャルゲームの実装に興味があったので参加してきました。

HTML＋JavaScript＋CSSで出来るっていうのがやっぱりすごい。
昔では考えられなかったから、はじめに思いついた人はすごいと思う。納豆みたいなもの？
私も昔はRIAといったらFlashでしょ、みたいな感覚でした。（恥）

◯ATNDはこちら
http://atnd.org/events/27983　

◯株式会社フォリフ 大橋氏 実践！HTML5で作るスマホブラウザゲーム　資料　

HTML5で作るスマホブラウザゲーム

View more presentations from Takumi Ohashi

◯togetterまとめ
http://togetter.com/li/303969
　
１． 実践！HTML5で作るスマホブラウザゲーム
Corollin' PlanetというアプリをHTML5+JavaScript+CSSで実装したそうです。
セッションで使用されたCorollin' Planetのゲーム本体はこちら
http://apps.facebook.com/corollin/


Corollin' Planetにはfacebook 連携機能があります。
画面右上に他の人がクリアした結果を見ることができるボタンが配置してあり、
他人がどうやってクリアしたか、プレイ記録を見ることができます。
面白いですね。

ちなみに技術的な実装方法は・・・
slideshareを見たほうがよく理解できると思います。全部書いてあるし。
（さすがに手抜きなので、後で追記します・・・）

アニメーションは複雑な動きができるcanvasと実装が簡単なCSS3という２通りがあって、ゲームのメインはcanvas、メニューやストーリー部分はCSS3を組み合わせて使っているということです。

パフォーマンスについては登壇者の方がかなり気にされていて、

・Retinaディスプレイ対応（ただし、iOS4だと逆に遅いことがある）
・描画範囲を最小限にする
・GPUアクセラレーション（ただしiOS限定）

canvasのレイヤーを2枚（キャラクターと背景）にして、キャラクター部分のみ描画させることで描画範囲を最小限にしてパフォーマンスを改善するという工夫をしているそうです。


ちなみに、開発者として一番参考になったのが、最後のまとめでした。^^;

１ ．とにかく、Android端末のチェックを万全に。
端末、メーカー別の詳細チェック。特にAndroid2.1でのバグつぶしが大変だったようです。
当時で１０端末ほどテストしたとのこと。
（特に苦労した端末はIS03と最初のXperiaだそう。昔あった、IEとそれ以外のブラウザで動作が違うというトラウマを思い出す・・・）

iOSで動いているものをAndroidで動かそうとすると大変だけど、
逆はそうでもないとのこと。Androidで開発してからiOSに移植するのをオススメしていました。


２．安定した機能を使う。
実際に他社で使用されているものなどを積極的に取り入れる。
俗に言う「枯れた技術を使う」なんていう感じでしょうか。


３．ライブラリを使用する。
ここ一年ほどでJavaScriptのライブラリはかなり充実してきていて、
enchant.js、arctic.js、easal.js　などを使うと安定したものを提供できるそうです。

などなど、プラットフォームは変われど、開発の基本は変わらないという印象でした。

※ライブコーディングについてのセッションは、色々あったので割愛・・・




◯おまけの感想
・めったに行かないから怖かったよ、渋谷。
でも、ハチ公口じゃなくてよかった・・・


・女性が多めでしたよ！独身男性の皆さんチャンスです！


・飲み物が無料で、バリスタさんがカフェオレ入れてくれました。
上級者（？）の方はホイップクリームが乗るやつオーダーしてた。ムリムリ。
懇親会もビールや軽食が出て無料なんて初めてでした。参加できなかったけど。