Your SlideShare is downloading. ×
CSS3 / JavaScriptで作るスマートフォンUIと落とし穴
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

9,818

Published on

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

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

0 Comments
38 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
9,818
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
56
Comments
0
Likes
38
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×