1. HTML5でスマホ開発
理想と現実
株式会社フォリフ
エンジニア
大橋 巧
2012/06/28 第4回SmartHacks

2. about:me
• スマホ向けWebアプリのフロントエンド開発
• 昔は微生物の研究してました
• 最近はBackbone.jsとかCoffeeScriptとか

3. 今日話す事
• HTML5概要
• 開発事例紹介
• HTML5でスマートフォン開発・理想と現実

4. HTML5概要

5. ざっくりHTML5概要
• 文章の構造を明確化
• 画像描画、動画や音声の再生
• 位置情報、双方向通信etc...
• HTML5 + JavaScript + CSS3

6. 開発事例紹介

7. Corollin’ Planet
• 2011年7月
• iOS/Android
• 開発2週間くらい
• corollin.com

8. Corollin’ Planet
• 今年3月、Mobile Hack Tokyoの
HackathonにてFacebookアプリ
としてリリース
○ 得点、進行状況のシェア
○ 友人のプレイ記録をゲーム
内で見られる
• ザッカーバーグにも遊んでも
らった
• Best Social Mobile Game受賞！
• ついでにPCブラウザにも対応

9. Final Rebellion
• MMOストラテジー
• マップのスクロール、
ガチャ演出などに
HTML5を使用
• joynt.in/finalrebellion

10. HTML5
理想

11. HTML5なら
• HTML5があればFlashはオワコン
• iOS/Androidのクロスプラット
フォーム対応
• これからはWebアプリの時代！

12. 現実

13. HTML5あるある
• Flashライクなアニメーションは手間がかかる
上に重い
• iOSとAndroidで全然表示が違う、というか動
かない
• 明らかにネイティブより見劣りする

14. アニメーション

15. Canvasアニメーション
var canvas = document.getElementById( canvas );
var ctx = canvas.getContext( 2d );
var img = document.createElement( img );
img.src = hoge.png ;
img.onload = setInterval(function() {
// 描画リフレッシュ
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 座標を移動させながら描画
ctx.drawImage(img, x++, y);
}, 33);

16. CSS3アニメーション
• Animation
○ キーフレームをCSSに記述
CSS:
#hoge {
-webkit-animation: animation_1 1s infinite;
}
@-webkit-keyframes animation_1 {
0% { left: 0px; }
50% { left: 200px; }
100% { left: 100px; top: 100px; }
}

17. CSS3アニメーション
• Transition
○ 時間的変化
○ スタイルを変更すると自動的にアニメー
ションを伴って変化する
CSS:
-webkit-transition: ease-out 2s;
js:
document.getElementById( hoge ).style.left = 100px ;
document.getElementById( hoge ).style.top = 100px ;

18. 開発環境整ってない
• これらを手打ち→確認の繰り返しはつらい
• CanvasのAPIは基本的な機能のみ
toDataURL(), getContext(), beginPath(), moveTo(), closePath(), lineTo(), quadraticCurveTo(),
bezierCurveTo(), arcTo(), arc(), rect(), fill(), stroke(), clip(), isPointInPath(), clearRect(),
fillRect(), strokeRect(), addColorStop(), createLinearGradient(), createRadialGradient(),
createPattern(), save(), restore(), scale(), rotate(), translate(), transform(), setTransform(),
createImageData(), getImageData(), putImageData(), drawImage(), fillText(), strokeText(),
measureText(), drawFocusRing(), strokeStyle, fillStyle, globalAlpha,
globalCompositeOperation, lineWidth, lineCap, lineJoin, miterLimit, shadowColor,
shadowOffsetX, shadowOffsetY, shadowBlur, font, textAlign, textBaseline

19. 開発環境整ってない
• ライブラリの使用
Easel.js, cake.js, Arctic.js, etc...
• オーサリングツールの使用
Adobe Edge, Sencha Animater, etc...
• CS6からHTML5書き出しサポート

20. アニメーション重い
• CanvasやCSS3アニメーションはFlashと比較す
ると重い、複雑なものになると顕著
• 同時に多数のオブジェクトを動かしている
と、ブラウザが落ちることも

21. アニメーション重い
• Canvasアニメーションでは毎フレームCanvasを
クリアする必要があるため必然的に描画範囲
が大きくなり、重くなる
→必要な部分だけ再描画する
• CorollinではあらかじめgetImageDataアニメー
ションパターンを読み込み、putImageDataで連
続的に再生
→drawImageより描画コスト軽い

22. アニメーション重い
• iOSではtransformプロパティなどに対してGPU
アクセラレーションが有効になる
→iOS5からはCanvasに対しても有効
• iOSシミュレータの場合
デバッグ→ブレンドレイヤーで確認

23. iOS/Android
クロスプラットフォーム

24. バラバラ
• OSのバージョン
• HTML5対応状況
• 画面サイズ、解像度

25. Androidのバグ
• CanvasのdrawImageメソッドで座標・サイズが1.5倍に引き延ばされる
(Android2.1)
• Android2.2以降でTransformを設定した要素の子要素にTransformを設定
→アニメーション時、一瞬Transformが適用されない事がある
(Android2.2)
• viewportでの拡大縮小無効が効かない(HTC製端末)
• 最近の高解像度端末で、AndroidのバージョンがOpenGLに対応してい
ない2.x系の場合、画面フリック時にレンダリング止まる
※ほんの一例です

26. Androidのバグ
• ものによっては対策方法がある
// Android2.1系のdrawImageバグ修正
var zoom_fix = Math.sqrt(320 / screen.width);
ctx.scale(zoom_fix, zoom_fix);
ctx.drawImage(hoge, 0, 0);
• バグが報告されているプロパティは使用を避
けるのが無難
• それでも新たな機種やOS依存のバグにぶつか
るのがAndroid

27. 最大の問題
• OSアップデートがされない端末も多い
→OSのサイクルが長い
• Android2.1以下のシェアは約5.8%
※2012年6月1日時点
参考URL:http://developer.android.com/about/dashboards/index.html

28. Androidのカオス
出典:http://techcrunch.com/2012/05/11/this-is-what-developing-for-android-looks-like/

29. モバイルフレームワーク
• jQuery Mobile, Sencha Touch, etc..
• 簡単にクロスブラウザ対応のサイトが作れる
→仕様の差異は吸収してくれる
• スライドなどのエフェクトを伴うページ遷移
• フレームワークの縛りが多い
• ゲームやアニメーション向きではない

30. Retinaディスプレイ対応
• 解像度2倍
• iPhoneはほとんど4, 4S
• Retinaディスプレイに合わせた適切な解像度の
画像を用意しないと、逆に汚く見えてしまう

31. Retinaディスプレイ対応
• devicePixelRatioで判断
window.devicePixelRatio // 2ならRetina
// Androidは1.5のものが多い、念のためUAと合わせて判断
• 2倍サイズの画像を用意する
• CanvasのRetina対応
<canvas width= 200 height= 200 style= width: 100px; height: 100px; >
ctx.drawImage(img, 0, 0, 200, 200);
→アニメーションのパフォーマンスにも影響

32. ネイティブ機能

33. ネイティブ機能
• タッチイベント取得
• 加速度センサー
• 3D描画
• カメラ使用
• 電池残量取得

34. もうちょっと先？
• やっぱりOSごとの対応状況バラバラ
→参考URL: http://mobilehtml5.org/
• HTML5の仕様から外れるものも
ex: Web SQL Database
• ドキュメント少ない

35. まとめ

36. まとめ
• HTML5はこれまでにないリッチなWebアプリを提供
できるが、万能ではない
• 対応端末,OSを明確に
• 新しいAPIやライブラリは事前検証
• iOSベースで開発→Androidに合わせるよりはAndroid
ベースで開発→iOSに合わせるという選択肢も
Androidでのチェックを万全に！

37. ありがとうございました