SlideShare una empresa de Scribd logo
1 de 10
Descargar para leer sin conexión
UI 設計におけるスマートフォン対応のまとめ

【KLab× ミクシィ・リクルートメント】 ∼ HTML5 によるソーシャルゲームの新世界@福岡∼
スマートフォンにおけるバグおよび問題まとめ


・共通                 ・Android                   ・iOS
 - イベントバブリング対応      - CSS アニメーションが遅い           - position:fixed のバグ
 - 端末画面サイズへの対応      - text-shadow バグ
 - Flash の問題        - CSS3 アニメーション+box-shadow 問題
 - jQuery アニメーション   - scroll ができない
  のメモリリーク           - z-index が効かなくなる
                    - 下層レイヤーが反応する
                    - フォントが無い
                    - font-weight:bold が使えない
                    - フォーカスがずれる件
                    - translate3d によるバグ
                    - touchend イベントが発生しない
                    - select や input[type=text] フォーカス時の挙動
                    - mask-image+アニメーション問題
                    - ...
                    - 端末依存のバグ
スマートフォンにおけるバグおよび問題まとめ




      ソースコードを一元管理するには
    Android の設計を先に考える必要がある
対応方法を簡単に共有

・position:fixed への対応
  現象

 スクロールするとついてくる。

                        対策

                      スクロールしない様に、
                      コンテンツの高さを 100% に抑える様に
                      CSS でチューニング。
                      もしくは、JS でスクロールをハンドリング。


                        環境

                      iOS5 以下 , Android2.2 以下
対応方法を簡単に共有

・z-index が効かなくなる。
   現象

 position:absolute の要素が
 z-index を無視して上にくる。
                            対策

                          オーバーレイ表示している HTML 要素に対して、
                          -webkit-transform:translate3d(0,0,0)
                          を指定する。



                            環境

                          Android 4.*
対応方法を簡単に共有

・端末画面サイズへの対応
  現象

 画面サイズが機種ごとに違う

                         対策

                 zoom プロパティで画面サイズ / 基本サイズで拡大。
                 更に高さを適応する。
                 var ratio = jQuery(window).width()/640;
                 jQuery( html ).css({
                       zoom : ratio,
                       height :window.innerHeight+ px
                 });


                         環境

                 Android, iPhone5
対応方法を簡単に共有

・下層レイヤーが反応する
  現象                          対策

 オーバーレイ表示等、上に要素を重ねると    オーバーレイした際に下層レイヤーの
 下にクリッカブルな要素があると反応する。   クリッカブル要素に visiblity:hidden に設定。
                        $('a,select,input').filter(function(i){
                          // 指定した親要素内は除外
                          if($(this).parents(ParrentNodeDom).length!=0) return false;
                          return true;
                        }).css({
                          'display': none ,
                          'visibility': hidden ,
                          '-webkit-tap-highlight-color': rgba(0,0,0,0) ,
                          '-webkit-touch-callout': none
                        }).bind('touchstart.Canceler',function(e){
                          e.preventDefault();
                        });

                              環境

                        Android 2.3
対応方法を簡単に共有

・スクロールができない
   現象                      対策

 overflow:auto が効かないので、   flickable や flicksimple などを使い
 スクロールができません。            フリック要素を形成する必要がある。
                         中にイメージがある場合には、
                         イメージをプリロードしてから実装する必要がある。
                         オーバーレイの中では、非表示だと高さがとれないので、
                         表示されてから再設定する。


                           環境

                         Android2.3
対応方法を簡単に共有

・イベント感染問題
  現象                             対策

 オーバーレイ表示時等にタップイベントが   オーバレイ非表示時にはオーバーレイのリンク要素に
 上層レイヤーにまで渡ってしまう。      e.preventDefault(); e.stopPropagation();
                       を設定。表示する関数のコールバックで解除する。

                       if(arguments[0]){
                           $('*',arguments[1]).bind('click.pre',function(e){
                             event.stopPropagation();
                             event.preventDefault();
                             if(window.event) window.event.cancelBubble = true;
                           }).bind('touchend.pre',function(e){
                             event.stopPropagation();
                             event.preventDefault();
                             if(window.event) window.event.cancelBubble = true;
                           });
                       }else{
                           $('*',arguments[1]).unbind('click.pre').unbind('touchend.pre');
                       }
感想



・Android への対応がかなり工数を取られる


・スマートフォン対応は Android から対応策を検討すべき

Más contenido relacionado

La actualidad más candente

私の欲しい Android 端末
私の欲しい Android 端末私の欲しい Android 端末
私の欲しい Android 端末android sola
 
GUI アプリケーションにおける MVC
GUI アプリケーションにおける MVCGUI アプリケーションにおける MVC
GUI アプリケーションにおける MVCYu Nobuoka
 
Prism + ReactiveProperty入門
Prism + ReactiveProperty入門Prism + ReactiveProperty入門
Prism + ReactiveProperty入門一希 大田
 
iOSやAndroidアプリ開発のGoodPractice
iOSやAndroidアプリ開発のGoodPracticeiOSやAndroidアプリ開発のGoodPractice
iOSやAndroidアプリ開発のGoodPracticeKen Morishita
 
かけ算で使いこなす Xamarin
かけ算で使いこなす Xamarinかけ算で使いこなす Xamarin
かけ算で使いこなす XamarinTatsuji Kuroyanagi
 
Xamarin で Prism を使いたい! ~「正式対応」 まで待てない人のための Prism 利用 Tips~
Xamarin で Prism を使いたい! ~「正式対応」 まで待てない人のための Prism 利用 Tips~Xamarin で Prism を使いたい! ~「正式対応」 まで待てない人のための Prism 利用 Tips~
Xamarin で Prism を使いたい! ~「正式対応」 まで待てない人のための Prism 利用 Tips~Tatsuji Kuroyanagi
 
Windows phone SDK 8.0でのアプリ開発
Windows phone SDK 8.0でのアプリ開発Windows phone SDK 8.0でのアプリ開発
Windows phone SDK 8.0でのアプリ開発Nobuaki Aoki
 
iOS 8 Widget ~ 導入から Tips まで
iOS 8 Widget ~ 導入から Tips までiOS 8 Widget ~ 導入から Tips まで
iOS 8 Widget ~ 導入から Tips までYuki Tanabe
 

La actualidad más candente (9)

私の欲しい Android 端末
私の欲しい Android 端末私の欲しい Android 端末
私の欲しい Android 端末
 
GUI アプリケーションにおける MVC
GUI アプリケーションにおける MVCGUI アプリケーションにおける MVC
GUI アプリケーションにおける MVC
 
Embedded Master2
Embedded Master2Embedded Master2
Embedded Master2
 
Prism + ReactiveProperty入門
Prism + ReactiveProperty入門Prism + ReactiveProperty入門
Prism + ReactiveProperty入門
 
iOSやAndroidアプリ開発のGoodPractice
iOSやAndroidアプリ開発のGoodPracticeiOSやAndroidアプリ開発のGoodPractice
iOSやAndroidアプリ開発のGoodPractice
 
かけ算で使いこなす Xamarin
かけ算で使いこなす Xamarinかけ算で使いこなす Xamarin
かけ算で使いこなす Xamarin
 
Xamarin で Prism を使いたい! ~「正式対応」 まで待てない人のための Prism 利用 Tips~
Xamarin で Prism を使いたい! ~「正式対応」 まで待てない人のための Prism 利用 Tips~Xamarin で Prism を使いたい! ~「正式対応」 まで待てない人のための Prism 利用 Tips~
Xamarin で Prism を使いたい! ~「正式対応」 まで待てない人のための Prism 利用 Tips~
 
Windows phone SDK 8.0でのアプリ開発
Windows phone SDK 8.0でのアプリ開発Windows phone SDK 8.0でのアプリ開発
Windows phone SDK 8.0でのアプリ開発
 
iOS 8 Widget ~ 導入から Tips まで
iOS 8 Widget ~ 導入から Tips までiOS 8 Widget ~ 導入から Tips まで
iOS 8 Widget ~ 導入から Tips まで
 

Destacado

CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグインCSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグインShogo Tamura
 
マークアップとUX
マークアップとUXマークアップとUX
マークアップとUXuenoyuuki
 
WordPress基礎講座1 CMSの概要
WordPress基礎講座1 CMSの概要WordPress基礎講座1 CMSの概要
WordPress基礎講座1 CMSの概要Akinori Kawamitsu
 
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & TipsjQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tipsyoshikawa_t
 
レスポンシブWeb「デザイン」
レスポンシブWeb「デザイン」レスポンシブWeb「デザイン」
レスポンシブWeb「デザイン」uenoyuuki
 
Pythonを取り巻く開発環境 #pyconjp
Pythonを取り巻く開発環境 #pyconjpPythonを取り巻く開発環境 #pyconjp
Pythonを取り巻く開発環境 #pyconjpYoshifumi Yamaguchi
 
Awsをちゃんと使ってみた
Awsをちゃんと使ってみたAwsをちゃんと使ってみた
Awsをちゃんと使ってみたYoichi Toyota
 
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録タカシ キタジマ
 
マルチデバイス時代におけるWebサイトのUIについて
マルチデバイス時代におけるWebサイトのUIについてマルチデバイス時代におけるWebサイトのUIについて
マルチデバイス時代におけるWebサイトのUIについてrie nabesaka
 
Javascriptを書きたくないヒ トのためのPythonScript
Javascriptを書きたくないヒ トのためのPythonScriptJavascriptを書きたくないヒ トのためのPythonScript
Javascriptを書きたくないヒ トのためのPythonScriptKazufumi Ohkawa
 
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~Horiguchi Seito
 
使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかたHiroshi Urabe
 
なぜ科学計算にはPythonか?
なぜ科学計算にはPythonか?なぜ科学計算にはPythonか?
なぜ科学計算にはPythonか?Aki Ariga
 
Pythonの開発環境を調べてみた
Pythonの開発環境を調べてみたPythonの開発環境を調べてみた
Pythonの開発環境を調べてみたKenji NAKAGAKI
 
NumPyが物足りない人へのCython入門
NumPyが物足りない人へのCython入門NumPyが物足りない人へのCython入門
NumPyが物足りない人へのCython入門Shiqiao Du
 
ソフトシンセを作りながら学ぶPythonプログラミング
ソフトシンセを作りながら学ぶPythonプログラミングソフトシンセを作りながら学ぶPythonプログラミング
ソフトシンセを作りながら学ぶPythonプログラミングRansui Iso
 
WordPressと離島での図書館作り〜コントリビュートすることで働き方を選択する未来へ
WordPressと離島での図書館作り〜コントリビュートすることで働き方を選択する未来へWordPressと離島での図書館作り〜コントリビュートすることで働き方を選択する未来へ
WordPressと離島での図書館作り〜コントリビュートすることで働き方を選択する未来へJunko Nukaga
 
モテる JavaScript
モテる JavaScriptモテる JavaScript
モテる JavaScriptOsamu Monoe
 

Destacado (20)

CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグインCSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
 
マークアップとUX
マークアップとUXマークアップとUX
マークアップとUX
 
WordPress基礎講座1 CMSの概要
WordPress基礎講座1 CMSの概要WordPress基礎講座1 CMSの概要
WordPress基礎講座1 CMSの概要
 
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & TipsjQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
 
AWS基礎
AWS基礎AWS基礎
AWS基礎
 
レスポンシブWeb「デザイン」
レスポンシブWeb「デザイン」レスポンシブWeb「デザイン」
レスポンシブWeb「デザイン」
 
Pythonを取り巻く開発環境 #pyconjp
Pythonを取り巻く開発環境 #pyconjpPythonを取り巻く開発環境 #pyconjp
Pythonを取り巻く開発環境 #pyconjp
 
Awsをちゃんと使ってみた
Awsをちゃんと使ってみたAwsをちゃんと使ってみた
Awsをちゃんと使ってみた
 
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
 
マルチデバイス時代におけるWebサイトのUIについて
マルチデバイス時代におけるWebサイトのUIについてマルチデバイス時代におけるWebサイトのUIについて
マルチデバイス時代におけるWebサイトのUIについて
 
Javascriptを書きたくないヒ トのためのPythonScript
Javascriptを書きたくないヒ トのためのPythonScriptJavascriptを書きたくないヒ トのためのPythonScript
Javascriptを書きたくないヒ トのためのPythonScript
 
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
 
使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた
 
CSS の歩き方
CSS の歩き方CSS の歩き方
CSS の歩き方
 
なぜ科学計算にはPythonか?
なぜ科学計算にはPythonか?なぜ科学計算にはPythonか?
なぜ科学計算にはPythonか?
 
Pythonの開発環境を調べてみた
Pythonの開発環境を調べてみたPythonの開発環境を調べてみた
Pythonの開発環境を調べてみた
 
NumPyが物足りない人へのCython入門
NumPyが物足りない人へのCython入門NumPyが物足りない人へのCython入門
NumPyが物足りない人へのCython入門
 
ソフトシンセを作りながら学ぶPythonプログラミング
ソフトシンセを作りながら学ぶPythonプログラミングソフトシンセを作りながら学ぶPythonプログラミング
ソフトシンセを作りながら学ぶPythonプログラミング
 
WordPressと離島での図書館作り〜コントリビュートすることで働き方を選択する未来へ
WordPressと離島での図書館作り〜コントリビュートすることで働き方を選択する未来へWordPressと離島での図書館作り〜コントリビュートすることで働き方を選択する未来へ
WordPressと離島での図書館作り〜コントリビュートすることで働き方を選択する未来へ
 
モテる JavaScript
モテる JavaScriptモテる JavaScript
モテる JavaScript
 

Similar a UI設計におけるスマートフォン対応のまとめ

Webアプリのシナリオテスト自動化を運用に乗せるまでの10のステップ
Webアプリのシナリオテスト自動化を運用に乗せるまでの10のステップWebアプリのシナリオテスト自動化を運用に乗せるまでの10のステップ
Webアプリのシナリオテスト自動化を運用に乗せるまでの10のステップNaoki Iwami
 
Android lecture for iOS developers
Android lecture for iOS developersAndroid lecture for iOS developers
Android lecture for iOS developersMasahiro Morodomi
 
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】Yasuhito Yabe
 
20130924 Picomon CRH勉強会
20130924 Picomon CRH勉強会20130924 Picomon CRH勉強会
20130924 Picomon CRH勉強会Yukihiro Kitazawa
 
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
 jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキングTakashi Okamoto
 
勉強会資料Out ofmemory
勉強会資料Out ofmemory勉強会資料Out ofmemory
勉強会資料Out ofmemoryNao Fujita
 
Smartphone ui:ux」 de na creative seminar vol.1 レポート
Smartphone ui:ux」 de na creative seminar vol.1 レポートSmartphone ui:ux」 de na creative seminar vol.1 レポート
Smartphone ui:ux」 de na creative seminar vol.1 レポートMasaru Kimura
 
goog.ui.Component のはぐれかた
goog.ui.Component のはぐれかたgoog.ui.Component のはぐれかた
goog.ui.Component のはぐれかたSoichi Takamura
 
Android Lecture #01 @PRO&BSC Inc.
Android Lecture #01 @PRO&BSC Inc.Android Lecture #01 @PRO&BSC Inc.
Android Lecture #01 @PRO&BSC Inc.Yuki Higuchi
 
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみようJavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみようHiroaki Wakamatsu
 
Try_to_writecode_practicaltest #atest_hack
Try_to_writecode_practicaltest #atest_hackTry_to_writecode_practicaltest #atest_hack
Try_to_writecode_practicaltest #atest_hackkimukou_26 Kimukou
 
Android Lecture #04 @PRO&BSC Inc.
Android Lecture #04 @PRO&BSC Inc.Android Lecture #04 @PRO&BSC Inc.
Android Lecture #04 @PRO&BSC Inc.Yuki Higuchi
 
20111031 MobileWeb at TDC
20111031 MobileWeb at TDC20111031 MobileWeb at TDC
20111031 MobileWeb at TDCNobuhiro Sue
 
0406web creators night_DeNA
0406web creators night_DeNA0406web creators night_DeNA
0406web creators night_DeNADeNA_open_events
 
Pf部2012年1月勉強会.androidsola
Pf部2012年1月勉強会.androidsolaPf部2012年1月勉強会.androidsola
Pf部2012年1月勉強会.androidsolaandroid sola
 
Jqm20120210
Jqm20120210Jqm20120210
Jqm20120210cmtomoda
 
Tokyo GTUG Bootcamp2010
Tokyo GTUG Bootcamp2010Tokyo GTUG Bootcamp2010
Tokyo GTUG Bootcamp2010Takashi EGAWA
 

Similar a UI設計におけるスマートフォン対応のまとめ (20)

Webアプリのシナリオテスト自動化を運用に乗せるまでの10のステップ
Webアプリのシナリオテスト自動化を運用に乗せるまでの10のステップWebアプリのシナリオテスト自動化を運用に乗せるまでの10のステップ
Webアプリのシナリオテスト自動化を運用に乗せるまでの10のステップ
 
Android lecture for iOS developers
Android lecture for iOS developersAndroid lecture for iOS developers
Android lecture for iOS developers
 
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
 
20130924 Picomon CRH勉強会
20130924 Picomon CRH勉強会20130924 Picomon CRH勉強会
20130924 Picomon CRH勉強会
 
Jqm20120804 publish
Jqm20120804 publishJqm20120804 publish
Jqm20120804 publish
 
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
 jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
 
勉強会資料Out ofmemory
勉強会資料Out ofmemory勉強会資料Out ofmemory
勉強会資料Out ofmemory
 
Smartphone ui:ux」 de na creative seminar vol.1 レポート
Smartphone ui:ux」 de na creative seminar vol.1 レポートSmartphone ui:ux」 de na creative seminar vol.1 レポート
Smartphone ui:ux」 de na creative seminar vol.1 レポート
 
goog.ui.Component のはぐれかた
goog.ui.Component のはぐれかたgoog.ui.Component のはぐれかた
goog.ui.Component のはぐれかた
 
Android Lecture #01 @PRO&BSC Inc.
Android Lecture #01 @PRO&BSC Inc.Android Lecture #01 @PRO&BSC Inc.
Android Lecture #01 @PRO&BSC Inc.
 
OSC京都2011
OSC京都2011OSC京都2011
OSC京都2011
 
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみようJavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
 
Try_to_writecode_practicaltest #atest_hack
Try_to_writecode_practicaltest #atest_hackTry_to_writecode_practicaltest #atest_hack
Try_to_writecode_practicaltest #atest_hack
 
Android Lecture #04 @PRO&BSC Inc.
Android Lecture #04 @PRO&BSC Inc.Android Lecture #04 @PRO&BSC Inc.
Android Lecture #04 @PRO&BSC Inc.
 
20111031 MobileWeb at TDC
20111031 MobileWeb at TDC20111031 MobileWeb at TDC
20111031 MobileWeb at TDC
 
0406web creators night_DeNA
0406web creators night_DeNA0406web creators night_DeNA
0406web creators night_DeNA
 
Flight入門
Flight入門Flight入門
Flight入門
 
Pf部2012年1月勉強会.androidsola
Pf部2012年1月勉強会.androidsolaPf部2012年1月勉強会.androidsola
Pf部2012年1月勉強会.androidsola
 
Jqm20120210
Jqm20120210Jqm20120210
Jqm20120210
 
Tokyo GTUG Bootcamp2010
Tokyo GTUG Bootcamp2010Tokyo GTUG Bootcamp2010
Tokyo GTUG Bootcamp2010
 

Último

持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見Shumpei Kishi
 
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor 2024 01 Virtual_Counselor
2024 01 Virtual_Counselor arts yokohama
 
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~arts yokohama
 
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdfAyachika Kitazaki
 
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)ssuser539845
 
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-LoopへTetsuya Nihonmatsu
 
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法ssuser370dd7
 
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfTaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfMatsushita Laboratory
 

Último (11)

持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
 
2024 04 minnanoito
2024 04 minnanoito2024 04 minnanoito
2024 04 minnanoito
 
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor 2024 01 Virtual_Counselor
2024 01 Virtual_Counselor
 
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
 
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf
 
2024 03 CTEA
2024 03 CTEA2024 03 CTEA
2024 03 CTEA
 
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
 
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
 
What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?
 
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
 
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfTaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
 

UI設計におけるスマートフォン対応のまとめ

  • 2. スマートフォンにおけるバグおよび問題まとめ ・共通 ・Android ・iOS - イベントバブリング対応 - CSS アニメーションが遅い - position:fixed のバグ - 端末画面サイズへの対応 - text-shadow バグ - Flash の問題 - CSS3 アニメーション+box-shadow 問題 - jQuery アニメーション - scroll ができない のメモリリーク - z-index が効かなくなる - 下層レイヤーが反応する - フォントが無い - font-weight:bold が使えない - フォーカスがずれる件 - translate3d によるバグ - touchend イベントが発生しない - select や input[type=text] フォーカス時の挙動 - mask-image+アニメーション問題 - ... - 端末依存のバグ
  • 3. スマートフォンにおけるバグおよび問題まとめ ソースコードを一元管理するには Android の設計を先に考える必要がある
  • 4. 対応方法を簡単に共有 ・position:fixed への対応 現象 スクロールするとついてくる。 対策 スクロールしない様に、 コンテンツの高さを 100% に抑える様に CSS でチューニング。 もしくは、JS でスクロールをハンドリング。 環境 iOS5 以下 , Android2.2 以下
  • 5. 対応方法を簡単に共有 ・z-index が効かなくなる。 現象 position:absolute の要素が z-index を無視して上にくる。 対策 オーバーレイ表示している HTML 要素に対して、 -webkit-transform:translate3d(0,0,0) を指定する。 環境 Android 4.*
  • 6. 対応方法を簡単に共有 ・端末画面サイズへの対応 現象 画面サイズが機種ごとに違う 対策 zoom プロパティで画面サイズ / 基本サイズで拡大。 更に高さを適応する。 var ratio = jQuery(window).width()/640; jQuery( html ).css({ zoom : ratio, height :window.innerHeight+ px }); 環境 Android, iPhone5
  • 7. 対応方法を簡単に共有 ・下層レイヤーが反応する 現象 対策 オーバーレイ表示等、上に要素を重ねると オーバーレイした際に下層レイヤーの 下にクリッカブルな要素があると反応する。 クリッカブル要素に visiblity:hidden に設定。 $('a,select,input').filter(function(i){ // 指定した親要素内は除外 if($(this).parents(ParrentNodeDom).length!=0) return false; return true; }).css({ 'display': none , 'visibility': hidden , '-webkit-tap-highlight-color': rgba(0,0,0,0) , '-webkit-touch-callout': none }).bind('touchstart.Canceler',function(e){ e.preventDefault(); }); 環境 Android 2.3
  • 8. 対応方法を簡単に共有 ・スクロールができない 現象 対策 overflow:auto が効かないので、 flickable や flicksimple などを使い スクロールができません。 フリック要素を形成する必要がある。 中にイメージがある場合には、 イメージをプリロードしてから実装する必要がある。 オーバーレイの中では、非表示だと高さがとれないので、 表示されてから再設定する。 環境 Android2.3
  • 9. 対応方法を簡単に共有 ・イベント感染問題 現象 対策 オーバーレイ表示時等にタップイベントが オーバレイ非表示時にはオーバーレイのリンク要素に 上層レイヤーにまで渡ってしまう。 e.preventDefault(); e.stopPropagation(); を設定。表示する関数のコールバックで解除する。 if(arguments[0]){ $('*',arguments[1]).bind('click.pre',function(e){ event.stopPropagation(); event.preventDefault(); if(window.event) window.event.cancelBubble = true; }).bind('touchend.pre',function(e){ event.stopPropagation(); event.preventDefault(); if(window.event) window.event.cancelBubble = true; }); }else{ $('*',arguments[1]).unbind('click.pre').unbind('touchend.pre'); }