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

株式会社まぼろしフロントエンドエンジニア

西畑 一馬

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

DeNA Creative Seminar vol.1

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

http://blog.webcreativepark.net/

HTML / CSSマークアップ

HTML5 / CSS3スマートフォンサイト作成

JavaScript / Ajaxシステム開発

Movable Type / WordPressサイト構築

UI ?

Appli or Web ?

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

1. スワイプギャラリー

MouseDown ≒ TouchStartMouseMove ≒ TouchMoveMouseUp ≒ TouchEnd

-webkit-transform: translate3d(100px,0,0);

GPUで高速に動作

これで完璧?

Andoridの落とし穴

3D系のtransformにバグ多い

Andoridの落とし穴

GPUに切り替わらない端末も多い

Andoridの落とし穴

一部の端末ではtouchmoveイベントをロスト

$("ul").on("touchstart",function(e){!if(/Android/.test(navigator.userAgent)){!!e.preventDefault();!}}):

touchStart 時に縦スクロールを止める

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

e.preventdefault()型

touchmove無視型

フリック型

レコチョク

Androidは非対応

ビックカメラ

メリット・デメリットを理解して

最適な実装をチョイスしましょう

2. 固定配置

2. 固定配置

CSS ?

//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);};

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

3.オーバーレイ

レイヤー下の要素にフォーカスが当たる

Andoridの落とし穴

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

レイヤー下のテキスト位置でハイライトカラーや

UI要素などの動作がおかしい

Andoridの落とし穴

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

まとめ

株式会社まぼろしではAndroidと戦う

フロントエンドエンジニアを募集中です

Thank you!!