Enviar búsqueda
Cargar
CSS3 / JavaScriptで作るスマートフォンUIと落とし穴
•
38 recomendaciones
•
4,905 vistas
西畑 一馬
Seguir
DeNA Creative Seminar vol.1でお話しした内容のスライドです。
Leer menos
Leer más
Denunciar
Compartir
Denunciar
Compartir
1 de 43
Descargar ahora
Descargar para leer sin conexión
Recomendados
スマートフォン対応、気をつけたいトラブル JavaScript編
スマートフォン対応、気をつけたいトラブル JavaScript編
Hiroaki Wakamatsu
スマートフォンブラウザ不具合特集
スマートフォンブラウザ不具合特集
Hiroaki Wakamatsu
UI設計におけるスマートフォン対応のまとめ
UI設計におけるスマートフォン対応のまとめ
Tomoki Imatomi
スマートフォン対応、気をつけたいトラブル
スマートフォン対応、気をつけたいトラブル
Hiroaki Wakamatsu
スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法
スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法
Maboroshi.inc
iOS の動画アプリ開発に Xamarin を使ってみた @JXUG #2 East
iOS の動画アプリ開発に Xamarin を使ってみた @JXUG #2 East
irgaly
Smartphone ui:ux」 de na creative seminar vol.1 レポート
Smartphone ui:ux」 de na creative seminar vol.1 レポート
Masaru Kimura
Xamarin.formsでのmvvm利用のコツ
Xamarin.formsでのmvvm利用のコツ
Masuda Tomoaki
Recomendados
スマートフォン対応、気をつけたいトラブル JavaScript編
スマートフォン対応、気をつけたいトラブル JavaScript編
Hiroaki Wakamatsu
スマートフォンブラウザ不具合特集
スマートフォンブラウザ不具合特集
Hiroaki Wakamatsu
UI設計におけるスマートフォン対応のまとめ
UI設計におけるスマートフォン対応のまとめ
Tomoki Imatomi
スマートフォン対応、気をつけたいトラブル
スマートフォン対応、気をつけたいトラブル
Hiroaki Wakamatsu
スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法
スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法
Maboroshi.inc
iOS の動画アプリ開発に Xamarin を使ってみた @JXUG #2 East
iOS の動画アプリ開発に Xamarin を使ってみた @JXUG #2 East
irgaly
Smartphone ui:ux」 de na creative seminar vol.1 レポート
Smartphone ui:ux」 de na creative seminar vol.1 レポート
Masaru Kimura
Xamarin.formsでのmvvm利用のコツ
Xamarin.formsでのmvvm利用のコツ
Masuda Tomoaki
Androidプログラミング初心者のためのゲームアプリ開発入門
Androidプログラミング初心者のためのゲームアプリ開発入門
Masahiko Mizuta
GUI アプリケーションにおける MVC
GUI アプリケーションにおける MVC
Yu Nobuoka
Flashup 12 Basic Training of Away3D
Flashup 12 Basic Training of Away3D
Katsushi Suzuki
Flashup14 Away3d basic material setting
Flashup14 Away3d basic material setting
Katsushi Suzuki
知らないと損するアプリ開発におけるStateMachineの活用法(full版)
知らないと損するアプリ開発におけるStateMachineの活用法(full版)
Ken Morishita
Flashup13 Basic Training of Flare3D
Flashup13 Basic Training of Flare3D
Katsushi Suzuki
Android上での3D(OpenGL)描画の基礎とNDKによる実践的高速化手法
Android上での3D(OpenGL)描画の基礎とNDKによる実践的高速化手法
Hiroshi Yoshida
Prism + ReactiveProperty入門
Prism + ReactiveProperty入門
一希 大田
iOSやAndroidアプリ開発のGoodPractice
iOSやAndroidアプリ開発のGoodPractice
Ken Morishita
Xamarin で今日から始めるクロスプラットフォーム開発
Xamarin で今日から始めるクロスプラットフォーム開発
友太 渡辺
WordPress基礎講座1 CMSの概要
WordPress基礎講座1 CMSの概要
Akinori Kawamitsu
AWS基礎
AWS基礎
Keisuke Higo
マークアップとUX
マークアップとUX
uenoyuuki
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
Shogo Tamura
レスポンシブWeb「デザイン」
レスポンシブWeb「デザイン」
uenoyuuki
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
yoshikawa_t
Pythonを取り巻く開発環境 #pyconjp
Pythonを取り巻く開発環境 #pyconjp
Yoshifumi Yamaguchi
Awsをちゃんと使ってみた
Awsをちゃんと使ってみた
Yoichi Toyota
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
タカシ キタジマ
マルチデバイス時代におけるWebサイトのUIについて
マルチデバイス時代におけるWebサイトのUIについて
rie nabesaka
Javascriptを書きたくないヒ トのためのPythonScript
Javascriptを書きたくないヒ トのためのPythonScript
Kazufumi Ohkawa
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
Horiguchi Seito
Más contenido relacionado
La actualidad más candente
Androidプログラミング初心者のためのゲームアプリ開発入門
Androidプログラミング初心者のためのゲームアプリ開発入門
Masahiko Mizuta
GUI アプリケーションにおける MVC
GUI アプリケーションにおける MVC
Yu Nobuoka
Flashup 12 Basic Training of Away3D
Flashup 12 Basic Training of Away3D
Katsushi Suzuki
Flashup14 Away3d basic material setting
Flashup14 Away3d basic material setting
Katsushi Suzuki
知らないと損するアプリ開発におけるStateMachineの活用法(full版)
知らないと損するアプリ開発におけるStateMachineの活用法(full版)
Ken Morishita
Flashup13 Basic Training of Flare3D
Flashup13 Basic Training of Flare3D
Katsushi Suzuki
Android上での3D(OpenGL)描画の基礎とNDKによる実践的高速化手法
Android上での3D(OpenGL)描画の基礎とNDKによる実践的高速化手法
Hiroshi Yoshida
Prism + ReactiveProperty入門
Prism + ReactiveProperty入門
一希 大田
iOSやAndroidアプリ開発のGoodPractice
iOSやAndroidアプリ開発のGoodPractice
Ken Morishita
Xamarin で今日から始めるクロスプラットフォーム開発
Xamarin で今日から始めるクロスプラットフォーム開発
友太 渡辺
La actualidad más candente
(10)
Androidプログラミング初心者のためのゲームアプリ開発入門
Androidプログラミング初心者のためのゲームアプリ開発入門
GUI アプリケーションにおける MVC
GUI アプリケーションにおける MVC
Flashup 12 Basic Training of Away3D
Flashup 12 Basic Training of Away3D
Flashup14 Away3d basic material setting
Flashup14 Away3d basic material setting
知らないと損するアプリ開発におけるStateMachineの活用法(full版)
知らないと損するアプリ開発におけるStateMachineの活用法(full版)
Flashup13 Basic Training of Flare3D
Flashup13 Basic Training of Flare3D
Android上での3D(OpenGL)描画の基礎とNDKによる実践的高速化手法
Android上での3D(OpenGL)描画の基礎とNDKによる実践的高速化手法
Prism + ReactiveProperty入門
Prism + ReactiveProperty入門
iOSやAndroidアプリ開発のGoodPractice
iOSやAndroidアプリ開発のGoodPractice
Xamarin で今日から始めるクロスプラットフォーム開発
Xamarin で今日から始めるクロスプラットフォーム開発
Destacado
WordPress基礎講座1 CMSの概要
WordPress基礎講座1 CMSの概要
Akinori Kawamitsu
AWS基礎
AWS基礎
Keisuke Higo
マークアップとUX
マークアップとUX
uenoyuuki
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
Shogo Tamura
レスポンシブWeb「デザイン」
レスポンシブWeb「デザイン」
uenoyuuki
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
yoshikawa_t
Pythonを取り巻く開発環境 #pyconjp
Pythonを取り巻く開発環境 #pyconjp
Yoshifumi Yamaguchi
Awsをちゃんと使ってみた
Awsをちゃんと使ってみた
Yoichi Toyota
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
タカシ キタジマ
マルチデバイス時代におけるWebサイトのUIについて
マルチデバイス時代におけるWebサイトのUIについて
rie nabesaka
Javascriptを書きたくないヒ トのためのPythonScript
Javascriptを書きたくないヒ トのためのPythonScript
Kazufumi Ohkawa
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
Horiguchi Seito
使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた
Hiroshi Urabe
CSS の歩き方
CSS の歩き方
Seiichiro Mishiba
なぜ科学計算にはPythonか?
なぜ科学計算にはPythonか?
Aki Ariga
Pythonの開発環境を調べてみた
Pythonの開発環境を調べてみた
Kenji NAKAGAKI
NumPyが物足りない人へのCython入門
NumPyが物足りない人へのCython入門
Shiqiao Du
ソフトシンセを作りながら学ぶPythonプログラミング
ソフトシンセを作りながら学ぶPythonプログラミング
Ransui Iso
WordPressと離島での図書館作り〜コントリビュートすることで働き方を選択する未来へ
WordPressと離島での図書館作り〜コントリビュートすることで働き方を選択する未来へ
Junko Nukaga
モテる JavaScript
モテる JavaScript
Osamu Monoe
Destacado
(20)
WordPress基礎講座1 CMSの概要
WordPress基礎講座1 CMSの概要
AWS基礎
AWS基礎
マークアップとUX
マークアップとUX
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
レスポンシブWeb「デザイン」
レスポンシブWeb「デザイン」
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
Pythonを取り巻く開発環境 #pyconjp
Pythonを取り巻く開発環境 #pyconjp
Awsをちゃんと使ってみた
Awsをちゃんと使ってみた
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
マルチデバイス時代におけるWebサイトのUIについて
マルチデバイス時代におけるWebサイトのUIについて
Javascriptを書きたくないヒ トのためのPythonScript
Javascriptを書きたくないヒ トのためのPythonScript
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた
CSS の歩き方
CSS の歩き方
なぜ科学計算にはPythonか?
なぜ科学計算にはPythonか?
Pythonの開発環境を調べてみた
Pythonの開発環境を調べてみた
NumPyが物足りない人へのCython入門
NumPyが物足りない人へのCython入門
ソフトシンセを作りながら学ぶPythonプログラミング
ソフトシンセを作りながら学ぶPythonプログラミング
WordPressと離島での図書館作り〜コントリビュートすることで働き方を選択する未来へ
WordPressと離島での図書館作り〜コントリビュートすることで働き方を選択する未来へ
モテる JavaScript
モテる JavaScript
Similar a CSS3 / JavaScriptで作るスマートフォンUIと落とし穴
CordovaでAngularJSアプリ開発
CordovaでAngularJSアプリ開発
アシアル株式会社
Adobe Edge Inspectを利用してデバッグ
Adobe Edge Inspectを利用してデバッグ
Keisuke Todoroki
HTML5でできるカメラアプリを実際に体験しよう
HTML5でできるカメラアプリを実際に体験しよう
Hideki Akiba
Windows azure mobile services を使った windows ストアアプリ開発 1027
Windows azure mobile services を使った windows ストアアプリ開発 1027
Shotaro Suzuki
Xamarin 概要 2014年08月版
Xamarin 概要 2014年08月版
Yoshito Tabuchi
めんどうな viewport や 端末判別の ために sagen.js
めんどうな viewport や 端末判別の ために sagen.js
Hiroaki Okubo
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
Tsutomu Ogasawara
One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~
One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~
Akira Inoue
Android webブラウザのhtml5対応状況
Android webブラウザのhtml5対応状況
Masakazu Muraoka
Jqm20120804 publish
Jqm20120804 publish
Takashi Okamoto
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
Takashi Okamoto
Cod2012 デバッグ講座
Cod2012 デバッグ講座
Masuda Tomoaki
Xamarin de:code セッション:Windows Phone / iOS / Android アプリ同時開発のススメ
Xamarin de:code セッション:Windows Phone / iOS / Android アプリ同時開発のススメ
Yoshito Tabuchi
Android Lecture #01 @PRO&BSC Inc.
Android Lecture #01 @PRO&BSC Inc.
Yuki Higuchi
Windowsストアアプリ開発 オープンセミナー広島
Windowsストアアプリ開発 オープンセミナー広島
Akira Onishi
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
Hideki Akiba
Application Architecture for Enterprise Win Store Apps with DDD Pattern
Application Architecture for Enterprise Win Store Apps with DDD Pattern
Atsushi Kambara
HTML5 クロスプラットフォームアプリ開発の現実解
HTML5 クロスプラットフォームアプリ開発の現実解
Monaca
アバター着せ替えアプリ開発におけるフロントエンド技術(Vue.js活用事例) #denatechcon
アバター着せ替えアプリ開発におけるフロントエンド技術(Vue.js活用事例) #denatechcon
DeNA
Java scriptライブラリ「wijmo(ウィジモ)」による日本仕様のUI開発
Java scriptライブラリ「wijmo(ウィジモ)」による日本仕様のUI開発
Akiyoshi Yamazaki
Similar a CSS3 / JavaScriptで作るスマートフォンUIと落とし穴
(20)
CordovaでAngularJSアプリ開発
CordovaでAngularJSアプリ開発
Adobe Edge Inspectを利用してデバッグ
Adobe Edge Inspectを利用してデバッグ
HTML5でできるカメラアプリを実際に体験しよう
HTML5でできるカメラアプリを実際に体験しよう
Windows azure mobile services を使った windows ストアアプリ開発 1027
Windows azure mobile services を使った windows ストアアプリ開発 1027
Xamarin 概要 2014年08月版
Xamarin 概要 2014年08月版
めんどうな viewport や 端末判別の ために sagen.js
めんどうな viewport や 端末判別の ために sagen.js
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~
One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~
Android webブラウザのhtml5対応状況
Android webブラウザのhtml5対応状況
Jqm20120804 publish
Jqm20120804 publish
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
Cod2012 デバッグ講座
Cod2012 デバッグ講座
Xamarin de:code セッション:Windows Phone / iOS / Android アプリ同時開発のススメ
Xamarin de:code セッション:Windows Phone / iOS / Android アプリ同時開発のススメ
Android Lecture #01 @PRO&BSC Inc.
Android Lecture #01 @PRO&BSC Inc.
Windowsストアアプリ開発 オープンセミナー広島
Windowsストアアプリ開発 オープンセミナー広島
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
Application Architecture for Enterprise Win Store Apps with DDD Pattern
Application Architecture for Enterprise Win Store Apps with DDD Pattern
HTML5 クロスプラットフォームアプリ開発の現実解
HTML5 クロスプラットフォームアプリ開発の現実解
アバター着せ替えアプリ開発におけるフロントエンド技術(Vue.js活用事例) #denatechcon
アバター着せ替えアプリ開発におけるフロントエンド技術(Vue.js活用事例) #denatechcon
Java scriptライブラリ「wijmo(ウィジモ)」による日本仕様のUI開発
Java scriptライブラリ「wijmo(ウィジモ)」による日本仕様のUI開発
CSS3 / JavaScriptで作るスマートフォンUIと落とし穴
1.
DeNA Creative Seminar
vol.1 CSS3 / JavaScript で作る スマートフォンUIと落とし穴 株式会社まぼろし フロントエンドエンジニア 西畑 一馬
2.
西畑 一馬 ・雑誌や書籍の執筆 ・Webクリエイター向けの講座やトレーニング
3.
http://blog.webcreativepark.net/
4.
5.
6.
HTML / CSS マークアップ HTML5
/ CSS3 スマートフォンサイト作成 JavaScript / Ajax システム開発 Movable Type / WordPress サイト構築
7.
UI ?
8.
Appli or Web
?
9.
1. スワイプギャラリー 2. 固定配置 3.
オーバーレイ
10.
1. スワイプギャラリー
11.
12.
MouseDown
≒ TouchStart MouseMove ≒ TouchMove MouseUp ≒ TouchEnd
13.
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 ?
29.
30.
31.
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.オーバーレイ
35.
36.
Andoridの落とし穴
レイヤー下の 要素にフォーカスが当たる
37.
38.
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!!
Descargar ahora