Takumi Ohashi, profile picture
Uploaded byTakumi Ohashi
6,558 views

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

Embed presentation

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アプリ としてリリース ○ 得点、進行状況のシェア ○ 友人のプレイ記録をゲーム 内で見られる • ザッカーバーグにも遊んでも らった • Best Social Mobile Game受賞！ • ついでにPCブラウザにも対応
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.createElement( img ); img.src = hoge.png ; img.onload = setInterval(function() { // 描画リフレッシュ ctx.clearRect(0, 0, canvas.width, canvas.height); // 座標を移動させながら描画 ctx.drawImage(img, x++, y); }, 33);
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; } }
CSS3アニメーション • Transition ○ 時間的変化 ○ スタイルを変更すると自動的にアニメー ションを伴って変化する CSS: -webkit-transition: ease-out 2s; js: document.getElementById( hoge ).style.left = 100px ; document.getElementById( hoge ).style.top = 100px ;
開発環境整ってない • これらを手打ち→確認の繰り返しはつらい • 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
開発環境整ってない • ライブラリの使用 Easel.js, cake.js, Arctic.js, etc... • オーサリングツールの使用 Adobe Edge, Sencha Animater, etc... • CS6からHTML5書き出しサポート
アニメーション重い • CanvasやCSS3アニメーションはFlashと比較す ると重い、複雑なものになると顕著 • 同時に多数のオブジェクトを動かしている と、ブラウザが落ちることも
アニメーション重い • Canvasアニメーションでは毎フレームCanvasを クリアする必要があるため必然的に描画範囲 が大きくなり、重くなる →必要な部分だけ再描画する • CorollinではあらかじめgetImageDataアニメー ションパターンを読み込み、putImageDataで連 続的に再生 →drawImageより描画コスト軽い
アニメーション重い • iOSではtransformプロパティなどに対してGPU アクセラレーションが有効になる →iOS5からはCanvasに対しても有効 • iOSシミュレータの場合 デバッグ→ブレンドレイヤーで確認
iOS/Android クロスプラットフォーム
バラバラ • OSのバージョン • HTML5対応状況 • 画面サイズ、解像度
Androidのバグ • CanvasのdrawImageメソッドで座標・サイズが1.5倍に引き延ばされる (Android2.1) • Android2.2以降でTransformを設定した要素の子要素にTransformを設定 →アニメーション時、一瞬Transformが適用されない事がある (Android2.2) • viewportでの拡大縮小無効が効かない(HTC製端末) • 最近の高解像度端末で、AndroidのバージョンがOpenGLに対応してい ない2.x系の場合、画面フリック時にレンダリング止まる ※ほんの一例です
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
最大の問題 • OSアップデートがされない端末も多い →OSのサイクルが長い • Android2.1以下のシェアは約5.8% ※2012年6月1日時点 参考URL:http://developer.android.com/about/dashboards/index.html
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と合わせて判断 • 2倍サイズの画像を用意する • CanvasのRetina対応 <canvas width= 200 height= 200 style= width: 100px; height: 100px; > ctx.drawImage(img, 0, 0, 200, 200); →アニメーションのパフォーマンスにも影響
ネイティブ機能
ネイティブ機能 • タッチイベント取得 • 加速度センサー • 3D描画 • カメラ使用 • 電池残量取得
もうちょっと先？ • やっぱりOSごとの対応状況バラバラ →参考URL: http://mobilehtml5.org/ • HTML5の仕様から外れるものも ex: Web SQL Database • ドキュメント少ない
まとめ
まとめ • HTML5はこれまでにないリッチなWebアプリを提供 できるが、万能ではない • 対応端末,OSを明確に • 新しいAPIやライブラリは事前検証 • iOSベースで開発→Androidに合わせるよりはAndroid ベースで開発→iOSに合わせるという選択肢も Androidでのチェックを万全に！
ありがとうございました

More Related Content

KEY
HTML5で作るスマホブラウザゲーム
byTakumi Ohashi
 
PDF
まだ DOM 操作で消耗してるの？
byYuki Ishikawa
 
PDF
HTML5でできるカメラアプリを実際に体験しよう
byHideki Akiba
 
PDF
なぜ人は必死でjQueryを捨てようとしているのか
byYoichi Toyota
 
PDF
React.js + Flux
bydsuke Takaoka
 
PDF
svelte と tailwind で始めるフロントエンド開発
byShuichi Takaya
 
PDF
angular X designer - デザイナからみたAngularJS #ten1club
bysilvers ofsilvers
 
PDF
SIROK技術勉強会 #1 「Reactってなんだ？」
byNaoyuki Kataoka
 
HTML5で作るスマホブラウザゲーム
byTakumi Ohashi
 
まだ DOM 操作で消耗してるの？
byYuki Ishikawa
 
HTML5でできるカメラアプリを実際に体験しよう
byHideki Akiba
 
なぜ人は必死でjQueryを捨てようとしているのか
byYoichi Toyota
 
React.js + Flux
bydsuke Takaoka
 
svelte と tailwind で始めるフロントエンド開発
byShuichi Takaya
 
angular X designer - デザイナからみたAngularJS #ten1club
bysilvers ofsilvers
 
SIROK技術勉強会 #1 「Reactってなんだ？」
byNaoyuki Kataoka
 

What's hot

PDF
サーバサイドエンジニアが 1年間まじめにSPAやってみた
byItaru Kitagawa
 
PDF
Flux react現状確認会
byVOYAGE GROUP
 
PDF
Xamarin 基礎講座
byYoshito Tabuchi
 
PDF
タスクランナー導入 〜とあるWordPress制作環境〜
byMasaya Kogawa
 
PDF
CSS Nite LP26 CodeKitで始める次世代Web制作
byMaboroshi.inc
 
KEY
12.09.08 明星和楽2012 KLabハンズオンセッション
byKei Nakazawa
 
PPTX
第１回 Japan Xamarin User Group Conference - Xamarin 概要
byYoshito Tabuchi
 
PPT
Chrome 拡張のご紹介
byTetsunosuke Saito
 
PDF
Smartphone ui:ux」 de na creative seminar vol.1 レポート
byMasaru Kimura
 
PPTX
Xamarin Overview
byMadoka Chiyoda
 
PDF
Aiming study#6pdf
byKoutaro Chikuba
 
PDF
( ﾟ∀ﾟ)o彡° Flux！ Flux！
byYuki Ishikawa
 
PDF
React+fluxを導入した話
byYuki Ishikawa
 
PDF
軽量ASP.NETフレームワークNancy
byNarami Kiyokura
 
PPTX
Xamarin の救世主 Unity !
byTatsuji Kuroyanagi
 
PPTX
Xamarin で Prism を使いたい！ ～「正式対応」 まで待てない人のための Prism 利用 Tips～
byTatsuji Kuroyanagi
 
PDF
フロントエンド初学者がSPAに手を出してみた
byKei Yagi
 
PPTX
Virtual boxからVM Importする
byShinji Saito
 
サーバサイドエンジニアが 1年間まじめにSPAやってみた
byItaru Kitagawa
 
Flux react現状確認会
byVOYAGE GROUP
 
Xamarin 基礎講座
byYoshito Tabuchi
 
タスクランナー導入 〜とあるWordPress制作環境〜
byMasaya Kogawa
 
CSS Nite LP26 CodeKitで始める次世代Web制作
byMaboroshi.inc
 
12.09.08 明星和楽2012 KLabハンズオンセッション
byKei Nakazawa
 
第１回 Japan Xamarin User Group Conference - Xamarin 概要
byYoshito Tabuchi
 
Chrome 拡張のご紹介
byTetsunosuke Saito
 
Smartphone ui:ux」 de na creative seminar vol.1 レポート
byMasaru Kimura
 
Xamarin Overview
byMadoka Chiyoda
 
Aiming study#6pdf
byKoutaro Chikuba
 
( ﾟ∀ﾟ)o彡° Flux！ Flux！
byYuki Ishikawa
 
React+fluxを導入した話
byYuki Ishikawa
 
軽量ASP.NETフレームワークNancy
byNarami Kiyokura
 
Xamarin の救世主 Unity !
byTatsuji Kuroyanagi
 
Xamarin で Prism を使いたい！ ～「正式対応」 まで待てない人のための Prism 利用 Tips～
byTatsuji Kuroyanagi
 
フロントエンド初学者がSPAに手を出してみた
byKei Yagi
 
Virtual boxからVM Importする
byShinji Saito
 

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

PDF
Canvas勉強会
byTsutomu Kawamura
 
PDF
ゲームだけじゃないHTML5
byOsamu Shimoda
 
PDF
HTML5@iPhoneゲーム開発
byh_kishi
 
PDF
Kddi mugen lab
byKazuya Hiruma
 
PDF
スマートフォン対応、気をつけたいトラブル
byHiroaki Wakamatsu
 
PDF
Concentrated HTML5 & Attractive HTML5
bySho Ito
 
PPTX
Phone gap＋javascriptスマホアプリ開発（入門編）
byMonaca
 
PPTX
PhoneGapユーザー会＠大阪 講演資料
byMonaca
 
PPTX
HTML5 クロスプラットフォームアプリ開発の現実解
byMonaca
 
PDF
HTML5ハイブリッド アプリ開発実践編
byMonaca
 
PDF
PhoneGapでWebアプリをスマホアプリ化
byTakashi Okamoto
 
PPTX
ABC2012Spring 20120324
byTak Inamori
 
KEY
20120413 nestakabaneworkshop
byYoichiro Sakurai
 
PDF
The forefront of html5 implementation
bySatoshi Tanaka
 
KEY
スマートフォンアプリケーション開発の最新動向
byTsutomu Ogasawara
 
PDF
20120316 designerworkshoppublished
byYoichiro Sakurai
 
PDF
Firefox OS - Blaze Your Own Path
bydynamis
 
PDF
Web os最新動向20130209
byAkira Sasaki
 
PDF
PhoneGapで作るハイブリッドアプリケーション
byMasahiko Tachizono
 
PDF
PhoneGapとハイブリッド開発
byAndy Hall
 
Canvas勉強会
byTsutomu Kawamura
 
ゲームだけじゃないHTML5
byOsamu Shimoda
 
HTML5@iPhoneゲーム開発
byh_kishi
 
Kddi mugen lab
byKazuya Hiruma
 
スマートフォン対応、気をつけたいトラブル
byHiroaki Wakamatsu
 
Concentrated HTML5 & Attractive HTML5
bySho Ito
 
Phone gap＋javascriptスマホアプリ開発（入門編）
byMonaca
 
PhoneGapユーザー会＠大阪 講演資料
byMonaca
 
HTML5 クロスプラットフォームアプリ開発の現実解
byMonaca
 
HTML5ハイブリッド アプリ開発実践編
byMonaca
 
PhoneGapでWebアプリをスマホアプリ化
byTakashi Okamoto
 
ABC2012Spring 20120324
byTak Inamori
 
20120413 nestakabaneworkshop
byYoichiro Sakurai
 
The forefront of html5 implementation
bySatoshi Tanaka
 
スマートフォンアプリケーション開発の最新動向
byTsutomu Ogasawara
 
20120316 designerworkshoppublished
byYoichiro Sakurai
 
Firefox OS - Blaze Your Own Path
bydynamis
 
Web os最新動向20130209
byAkira Sasaki
 
PhoneGapで作るハイブリッドアプリケーション
byMasahiko Tachizono
 
PhoneGapとハイブリッド開発
byAndy Hall
 

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

  • 1.
    HTML5でスマホ開発 理想と現実 株式会社フォリフ エンジニア 大橋 巧 2012/06/28 第4回SmartHacks
  • 2.
    about:me • スマホ向けWebアプリのフロントエンド開発 • 昔は微生物の研究してました • 最近はBackbone.jsとかCoffeeScriptとか
  • 3.
    今日話す事 • HTML5概要 • 開発事例紹介 • HTML5でスマートフォン開発・理想と現実
  • 4.
  • 5.
  • 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.
  • 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.
  • 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.
  • 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.

Editor's Notes