Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
HTML5でスマホ開発              理想と現実株式会社フォリフエンジニア大橋 巧2012/06/28 第4回SmartHacks
about:me•   スマホ向けWebアプリのフロントエンド開発•   昔は微生物の研究してました•   最近はBackbone.jsとかCoffeeScriptとか
今日話す事•   HTML5概要•   開発事例紹介•   HTML5でスマートフォン開発・理想と現実
HTML5概要
ざっくりHTML5概要• 文章の構造を明確化• 画像描画、動画や音声の再生• 位置情報、双方向通信etc...• HTML5 + JavaScript + CSS3
開発事例紹介
Corollin’ Planet• 2011年7月• iOS/Android• 開発2週間くらい•   corollin.com
Corollin’ Planet•   今年3月、Mobile Hack Tokyoの    HackathonにてFacebookアプリ    としてリリース    ○ 得点、進行状況のシェア    ○ 友人のプレイ記録をゲーム    内で見...
Final Rebellion•   MMOストラテジー•   マップのスクロール、    ガチャ演出などに    HTML5を使用•   joynt.in/finalrebellion
HTML5 理想
HTML5なら• HTML5があればFlashはオワコン• iOS/Androidのクロスプラット フォーム対応• これからはWebアプリの時代!
現実
HTML5あるある•   Flashライクなアニメーションは手間がかかる    上に重い•   iOSとAndroidで全然表示が違う、というか動    かない•   明らかにネイティブより見劣りする
アニメーション
Canvasアニメーションvar canvas = document.getElementById( canvas );var ctx = canvas.getContext( 2d );var img = document.createEle...
CSS3アニメーション•    Animation     ○ キーフレームをCSSに記述    CSS:      #hoge {        -webkit-animation: animation_1 1s infinite;      ...
CSS3アニメーション•    Transition     ○ 時間的変化     ○ スタイルを変更すると自動的にアニメー     ションを伴って変化する    CSS:        -webkit-transition: ease-ou...
開発環境整ってない•   これらを手打ち→確認の繰り返しはつらい•   CanvasのAPIは基本的な機能のみtoDataURL(), getContext(), beginPath(), moveTo(), closePath(), line...
開発環境整ってない•   ライブラリの使用    Easel.js, cake.js, Arctic.js, etc...•   オーサリングツールの使用    Adobe Edge, Sencha Animater, etc...•   CS...
アニメーション重い•   CanvasやCSS3アニメーションはFlashと比較す    ると重い、複雑なものになると顕著•   同時に多数のオブジェクトを動かしている    と、ブラウザが落ちることも
アニメーション重い•   Canvasアニメーションでは毎フレームCanvasを    クリアする必要があるため必然的に描画範囲    が大きくなり、重くなる    →必要な部分だけ再描画する•   CorollinではあらかじめgetImag...
アニメーション重い•   iOSではtransformプロパティなどに対してGPU    アクセラレーションが有効になる    →iOS5からはCanvasに対しても有効•   iOSシミュレータの場合    デバッグ→ブレンドレイヤーで確認
iOS/Androidクロスプラットフォーム
バラバラ•   OSのバージョン•   HTML5対応状況•   画面サイズ、解像度
Androidのバグ•   CanvasのdrawImageメソッドで座標・サイズが1.5倍に引き延ばされる    (Android2.1)•   Android2.2以降でTransformを設定した要素の子要素にTransformを設定  ...
Androidのバグ•   ものによっては対策方法がある    // Android2.1系のdrawImageバグ修正    var zoom_fix = Math.sqrt(320 / screen.width);    ctx.scale(...
最大の問題•   OSアップデートがされない端末も多い    →OSのサイクルが長い•   Android2.1以下のシェアは約5.8%    ※2012年6月1日時点    参考URL:http://developer.android.com...
Androidのカオス出典:http://techcrunch.com/2012/05/11/this-is-what-developing-for-android-looks-like/
モバイルフレームワーク•   jQuery Mobile, Sencha Touch, etc..•   簡単にクロスブラウザ対応のサイトが作れる    →仕様の差異は吸収してくれる•   スライドなどのエフェクトを伴うページ遷移•   フレー...
Retinaディスプレイ対応•   解像度2倍•   iPhoneはほとんど4, 4S•   Retinaディスプレイに合わせた適切な解像度の    画像を用意しないと、逆に汚く見えてしまう
Retinaディスプレイ対応•     devicePixelRatioで判断    window.devicePixelRatio // 2ならRetina    // Androidは1.5のものが多い、念のためUAと合わせて判断•    ...
ネイティブ機能
ネイティブ機能•   タッチイベント取得•   加速度センサー•   3D描画•   カメラ使用•   電池残量取得
もうちょっと先?•   やっぱりOSごとの対応状況バラバラ    →参考URL: http://mobilehtml5.org/•   HTML5の仕様から外れるものも    ex: Web SQL Database•   ドキュメント少ない
まとめ
まとめ•   HTML5はこれまでにないリッチなWebアプリを提供    できるが、万能ではない•   対応端末,OSを明確に•   新しいAPIやライブラリは事前検証•   iOSベースで開発→Androidに合わせるよりはAndroid  ...
ありがとうございました
Upcoming SlideShare
Loading in …5
×

HTML5でスマートフォン開発の理想と現実

10,450 views

Published on

Published in: Technology
  • Be the first to comment

HTML5でスマートフォン開発の理想と現実

  1. 1. HTML5でスマホ開発 理想と現実株式会社フォリフエンジニア大橋 巧2012/06/28 第4回SmartHacks
  2. 2. about:me• スマホ向けWebアプリのフロントエンド開発• 昔は微生物の研究してました• 最近はBackbone.jsとかCoffeeScriptとか
  3. 3. 今日話す事• HTML5概要• 開発事例紹介• HTML5でスマートフォン開発・理想と現実
  4. 4. HTML5概要
  5. 5. ざっくりHTML5概要• 文章の構造を明確化• 画像描画、動画や音声の再生• 位置情報、双方向通信etc...• HTML5 + JavaScript + CSS3
  6. 6. 開発事例紹介
  7. 7. Corollin’ Planet• 2011年7月• iOS/Android• 開発2週間くらい• corollin.com
  8. 8. Corollin’ Planet• 今年3月、Mobile Hack Tokyoの HackathonにてFacebookアプリ としてリリース ○ 得点、進行状況のシェア ○ 友人のプレイ記録をゲーム 内で見られる• ザッカーバーグにも遊んでも らった• Best Social Mobile Game受賞!• ついでにPCブラウザにも対応
  9. 9. Final Rebellion• MMOストラテジー• マップのスクロール、 ガチャ演出などに HTML5を使用• joynt.in/finalrebellion
  10. 10. HTML5 理想
  11. 11. HTML5なら• HTML5があればFlashはオワコン• iOS/Androidのクロスプラット フォーム対応• これからはWebアプリの時代!
  12. 12. 現実
  13. 13. HTML5あるある• Flashライクなアニメーションは手間がかかる 上に重い• iOSとAndroidで全然表示が違う、というか動 かない• 明らかにネイティブより見劣りする
  14. 14. アニメーション
  15. 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. 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. 17. CSS3アニメーション• Transition ○ 時間的変化 ○ スタイルを変更すると自動的にアニメー ションを伴って変化する CSS: -webkit-transition: ease-out 2s; js: document.getElementById( hoge ).style.left = 100px ; document.getElementById( hoge ).style.top = 100px ;
  18. 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. 19. 開発環境整ってない• ライブラリの使用 Easel.js, cake.js, Arctic.js, etc...• オーサリングツールの使用 Adobe Edge, Sencha Animater, etc...• CS6からHTML5書き出しサポート
  20. 20. アニメーション重い• CanvasやCSS3アニメーションはFlashと比較す ると重い、複雑なものになると顕著• 同時に多数のオブジェクトを動かしている と、ブラウザが落ちることも
  21. 21. アニメーション重い• Canvasアニメーションでは毎フレームCanvasを クリアする必要があるため必然的に描画範囲 が大きくなり、重くなる →必要な部分だけ再描画する• CorollinではあらかじめgetImageDataアニメー ションパターンを読み込み、putImageDataで連 続的に再生 →drawImageより描画コスト軽い
  22. 22. アニメーション重い• iOSではtransformプロパティなどに対してGPU アクセラレーションが有効になる →iOS5からはCanvasに対しても有効• iOSシミュレータの場合 デバッグ→ブレンドレイヤーで確認
  23. 23. iOS/Androidクロスプラットフォーム
  24. 24. バラバラ• OSのバージョン• HTML5対応状況• 画面サイズ、解像度
  25. 25. Androidのバグ• CanvasのdrawImageメソッドで座標・サイズが1.5倍に引き延ばされる (Android2.1)• Android2.2以降でTransformを設定した要素の子要素にTransformを設定 →アニメーション時、一瞬Transformが適用されない事がある (Android2.2)• viewportでの拡大縮小無効が効かない(HTC製端末)• 最近の高解像度端末で、AndroidのバージョンがOpenGLに対応してい ない2.x系の場合、画面フリック時にレンダリング止まる ※ほんの一例です
  26. 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. 27. 最大の問題• OSアップデートがされない端末も多い →OSのサイクルが長い• Android2.1以下のシェアは約5.8% ※2012年6月1日時点 参考URL:http://developer.android.com/about/dashboards/index.html
  28. 28. Androidのカオス出典:http://techcrunch.com/2012/05/11/this-is-what-developing-for-android-looks-like/
  29. 29. モバイルフレームワーク• jQuery Mobile, Sencha Touch, etc..• 簡単にクロスブラウザ対応のサイトが作れる →仕様の差異は吸収してくれる• スライドなどのエフェクトを伴うページ遷移• フレームワークの縛りが多い• ゲームやアニメーション向きではない
  30. 30. Retinaディスプレイ対応• 解像度2倍• iPhoneはほとんど4, 4S• Retinaディスプレイに合わせた適切な解像度の 画像を用意しないと、逆に汚く見えてしまう
  31. 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. 32. ネイティブ機能
  33. 33. ネイティブ機能• タッチイベント取得• 加速度センサー• 3D描画• カメラ使用• 電池残量取得
  34. 34. もうちょっと先?• やっぱりOSごとの対応状況バラバラ →参考URL: http://mobilehtml5.org/• HTML5の仕様から外れるものも ex: Web SQL Database• ドキュメント少ない
  35. 35. まとめ
  36. 36. まとめ• HTML5はこれまでにないリッチなWebアプリを提供 できるが、万能ではない• 対応端末,OSを明確に• 新しいAPIやライブラリは事前検証• iOSベースで開発→Androidに合わせるよりはAndroid ベースで開発→iOSに合わせるという選択肢も Androidでのチェックを万全に!
  37. 37. ありがとうございました

×