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

1. DeNA Creative Seminar vol.1
CSS3 / JavaScript で作る
スマートフォンUIと落とし穴
株式会社まぼろし
フロントエンドエンジニア
西畑 一馬

2. 西畑 一馬
・雑誌や書籍の執筆
・Webクリエイター向けの講座やトレーニング

3. http://blog.webcreativepark.net/

6. HTML / CSS
マークアップ
HTML5 / CSS3
スマートフォンサイト作成
JavaScript / Ajax
システム開発
Movable Type / WordPress
サイト構築

7. UI ?

8. Appli or Web ?

9. 1. スワイプギャラリー
2. 固定配置
3. オーバーレイ

10. 1. スワイプギャラリー

12. MouseDown ≒ TouchStart
MouseMove ≒ TouchMove
MouseUp ≒ TouchEnd

14. -webkit-transform:
translate3d(100px,0,0);
GPUで高速に動作

15. これで完璧?

16. Andoridの落とし穴
3D系のtransformにバグ多い

17. Andoridの落とし穴
GPUに切り替わらない
端末も多い

18. Andoridの落とし穴
一部の端末では
touchmoveイベントをロスト

19. $("ul").on("touchstart",function(e){
! if(/Android/.test(navigator.userAgent)){
! ! e.preventDefault();
!}
}):
touchStart 時に縦スクロールを止める

20. Androidでは
次の3種類の実装が主流

21. e.preventdefault()型

22. touchmove無視型

23. フリック型
レコチョク

24. Androidは非対応
ビックカメラ

25. メリット・デメリットを
理解して
最適な実装をチョイス
しましょう

26. 2. 固定配置

27. 2. 固定配置

28. CSS ?

32. //set Full Screen without StatusBar
var 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);
};

33. $(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);
});

34. 3.オーバーレイ

36. Andoridの落とし穴
レイヤー下の
要素にフォーカスが当たる

39. $("a").not(".modalInner a")
! .css("-webkit-tap-highlight-color",
! ! ! ! ! ! ! ! ! ! ! ! !! ! ! ! ! "rgba(0,0,0,0)");

40. Andoridの落とし穴
レイヤー下のテキスト位置で
ハイライトカラーや
UI要素などの動作がおかしい

41. まとめ
スマートフォンのUI実装では
Androidのバグ対応がほとんど

42. 株式会社まぼろしでは
Androidと戦う
フロントエンドエンジニア
を募集中です

43. Thank you!!