CSS3 / JavaScriptで作るスマートフォンUIと落とし穴

10,700 views
10,532 views

Published on

DeNA Creative Seminar vol.1でお話しした内容のスライドです。

CSS3 / JavaScriptで作るスマートフォンUIと落とし穴

  1. 1. DeNA Creative Seminar vol.1 CSS3 / JavaScript で作る スマートフォンUIと落とし穴 株式会社まぼろし フロントエンドエンジニア 西畑 一馬
  2. 2. 西畑 一馬 ・雑誌や書籍の執筆 ・Webクリエイター向けの講座やトレーニング
  3. 3. http://blog.webcreativepark.net/
  4. 4. HTML / CSSマークアップHTML5 / CSS3スマートフォンサイト作成JavaScript / Ajaxシステム開発Movable Type / WordPressサイト構築
  5. 5. UI ?
  6. 6. Appli or Web ?
  7. 7. 1. スワイプギャラリー2. 固定配置3. オーバーレイ
  8. 8. 1. スワイプギャラリー
  9. 9. MouseDown ≒ TouchStartMouseMove ≒ TouchMoveMouseUp ≒ TouchEnd
  10. 10. -webkit-transform: translate3d(100px,0,0); GPUで高速に動作
  11. 11. これで完璧?
  12. 12. Andoridの落とし穴3D系のtransformにバグ多い
  13. 13. Andoridの落とし穴GPUに切り替わらない 端末も多い
  14. 14. Andoridの落とし穴 一部の端末ではtouchmoveイベントをロスト
  15. 15. $("ul").on("touchstart",function(e){! if(/Android/.test(navigator.userAgent)){! ! e.preventDefault();!}}): touchStart 時に縦スクロールを止める
  16. 16. Androidでは次の3種類の実装が主流
  17. 17. e.preventdefault()型
  18. 18. touchmove無視型
  19. 19. フリック型レコチョク
  20. 20. Androidは非対応 ビックカメラ
  21. 21. メリット・デメリットを 理解して最適な実装をチョイス しましょう
  22. 22. 2. 固定配置
  23. 23. 2. 固定配置
  24. 24. CSS ?
  25. 25. //set Full Screen without StatusBarvar ua = navigator.userAgent.toLowerCase();$.browser.android = /android/.test(ua);$.browser.iphone = /iphone/.test(ua);var portraitHeight,landscapeHeight;window.onload = function(){! $("html,body").height("1000px");! if($.browser.iphone){! ! $("body").css("position","relative");! }! setTimeout(function(){! ! scrollTo(1,0);! ! setTimeout(function(){! ! ! var height = window.innerHeight;! ! ! $("html,body").height(height+"px");! ! ! if(Math.abs(window.orientation)==0){! ! ! ! portraitHeight = height;! ! ! }else{! ! ! ! landscapeHeight = height;! ! ! }! ! ! setTimeout(loaded, 200);! ! },100);! }, 200);};
  26. 26. $(window).bind("orientationchange",function(){! if(Math.abs(window.orientation)==0){! ! if(!portraitHeight)portraitHeight = window.innerHeight;! ! height = portraitHeight;! }else{! ! if(!landscapeHeight)landscapeHeight = window.innerHeight;! ! height = landscapeHeight;! }! $("html,body").height(height+"px");! setTimeout(function(){! ! scrollTo(1,0);! }, 200);});
  27. 27. 3.オーバーレイ
  28. 28. Andoridの落とし穴 レイヤー下の要素にフォーカスが当たる
  29. 29. $("a").not(".modalInner a")! .css("-webkit-tap-highlight-color",! ! ! ! ! ! ! ! ! ! ! ! !! ! ! ! ! "rgba(0,0,0,0)");
  30. 30. Andoridの落とし穴レイヤー下のテキスト位置で ハイライトカラーやUI要素などの動作がおかしい
  31. 31. まとめ スマートフォンのUI実装ではAndroidのバグ対応がほとんど
  32. 32. 株式会社まぼろしでは Androidと戦うフロントエンドエンジニア を募集中です
  33. 33. Thank you!!

×