スマートフォン対応、気をつけたいトラブル

82,439 views
82,086 views

Published on

8/18におこなわれたCSS Nite in OSAKA, Vol.32での発表用スライドです。4/27のCSS Nite in OSAKA, Vol.29で使用したスライドをベースに、若干の追記・修正をした内容となっています。

2 Comments
209 Likes
Statistics
Notes
  • >福田 様
    なるほど、3.X系でも発生するのですね・・・。
    当方、タブレット系は(案件的にも)ほぼあつかってないものですから、まったく気づきませんでした。
    貴重な情報ありがとうございました!!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Galaxy Nexusの文字飛びの件、他端末でも発生してます。REGZA tablet やGalaxtTab10など3.x系でも発生しており、それぞれ特定文字列の規則が端末ごとに異なっています。ウチでは、Android 3+は全機種疑って対処しています。
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
82,439
On SlideShare
0
From Embeds
0
Number of Embeds
2,875
Actions
Shares
0
Downloads
450
Comments
2
Likes
209
Embeds 0
No embeds

No notes for slide

スマートフォン対応、気をつけたいトラブル

  1. 1. スマートフォン対応、    気をつけたいトラブル 若松 浩昭(株式会社ジークス)
  2. 2. 自己紹介若松 浩昭(Hiroaki Wakamatsu)・Webサイトの設計・フロントエンド周りの実装・スマートフォン案件が主体・HTML5-WEST.jpコアメンバーTwitter : azuyuuブログ : bit.ly/NFATf4 2
  3. 3. Chapter 1このセッションについて
  4. 4. セッションのテーマ スマートフォン案件で、 トラブルは常に起こりえるもの 事例を知ることで、 トラブルを 最小限 に抑えよう!! 4
  5. 5. セッションの内容• スマートフォン案件の現状• トラブルを最小限に抑えるために• 知っておこう:   表示・動作に関するトラブルの例   機種に依存するトラブルの例• 最後に・・・ 5
  6. 6. Chapter 2スマートフォン案件の現状
  7. 7. 多くの案件で対象となるOS 7
  8. 8. 特に多いAndroidのトラブル• 非常に多くの機種• 異なる搭載OSのバージョン• 機種ごとに調整された標準ブラウザ• 標準ブラウザ以外のブラウザへの対応 8
  9. 9. 補足:標準ブラウザにおけるHTML5への対応状況html5test.com で対応状況を調査 Android 2.3 189 Android 4.0 280 ∼ 380 機種によって点数が異なる !! iOS 5.1.1 324 9
  10. 10. Chapter 3トラブルを最小限に抑えるために
  11. 11. トラブルを引き起こす要因とその対策Factor 1 制作側の知識不足・認識漏れFactor 2 クライアントのこだわりFactor 3 機種に依存する問題 11
  12. 12. Factor 1 制作側の知識不足・認識漏れ• 機種・OS・ブラウザ間での差異は当たり前• 「これはNG」っていう事象がある • 普段からバッドノウハウについて 情報収集をする • 複数の実機で検証をする 12
  13. 13. Factor 2 クライアントのこだわり• 「こういう動きをさせたい」という要望• Androidでも奇麗にアニメーション • 「できること」と「できないこと」を 事前に説明しておく • iPhone Androidであることを 理解してもらう 13
  14. 14. Factor 3 機種に依存する問題(特にAndroid)• 全てを防ぐことは不可能• 「起きた」時の対応が重要 • 「起こりえる」ことを伝えた上で、 同意をもらっておく • 実際に「起きた」場合の取り決めを しておく (端末確保の費用の話とか) 14
  15. 15. Chapter 4知っておこう:表示・動作に関するトラブルの例
  16. 16. 最初に:ユーザーエージェントによる判定• Androidの場合は、バージョンとブラウザ まで判定する// 標準ブラウザMozilla/5.0 (Linux; U; Android 4.0.4; ja-jp; SC-06D Build/IMM76D) AppleWebKit/534.30(KHTML, like Gecko) Version/4.0 Mobile Safari/534.30// ChromeMozilla/5.0 (Linux; Android 4.0.4; SC-06D Build/IMM76D) AppleWebKit/535.19 (KHTML, likeGecko) Chrome/18.0.1025.166 Mobile Safari/535.19// FirefoxMozilla/5.0 (Android; Mobile; rv: 14.0) Gecko/14.0 Firefox/14.0.1// Opera MobileOpera/9.80 (Android 4.0.4; Linux; Opera Mobi/ADR-1207201819; U; ja) Presto/2.10.254Version/12.00 16
  17. 17. 1. 太字 (font-weight: bold;)• Androidは、全角文字の太字が表示できない 機種がある • 標準の日本語フォント「Droid Sans Japanese」は、全角文字の太字に非対応 • 太字に対応したオリジナルフォントが インストールされている機種も多数ある 17
  18. 18. 1. 太字 (font-weight: bold;)ー 対処方法の例 ー• CSSを活用して、擬似的に太字を表現 ① text-shadow で表現 text-shadow: 0 0 1px 文字の色; ② 文字がぼやけるのが嫌な場合は、text-stroke でも表現可能 (webkit系ブラウザのみ) -webkit-text-stroke: 1px 文字の色; 18
  19. 19. 1. 太字 (font-weight: bold;)補足:標準ブラウザ以外のブラウザ全角文字に対しては・・・ おそらく、「Droid Sans Japanese」が インストールされていれば、font-weight: bold; の指定が有効 インストールされているフォントの種類を問わず、 font-weight: bold; の指定が有効 19
  20. 20. 2. ベンダープリフィックス• プリフィックスの有無は、OSのバージョン やブラウザによって異なるので注意が必要例) 影付きボックス:box-shadow Mobile Safari Android標準ブラウザ Android標準ブラウザ その他ブラウザ iOS4 iOS5 2.1 2.2 2.3 4.0 Chrome Firefox Opera無し ○ ○ ○ ○ ○ ○有り ○ ○ ○ ○ ○ ○ ○ まとめURL: bit.ly/PrEPzX 20
  21. 21. 3. リンク要素のアウトライン• Androidでは、ブロック要素リンクの アウトライン表示に不備がある<a href="リンク先URL">リンクのタイトル</a>a { display: block; } /* aをブロック要素としてレンダリング */ 21
  22. 22. 3. リンク要素のアウトラインー 対処方法の例 ー• aタグの直下にdivタグを挿入 <a href="リンク先URL"><div>リンクのタイトル</div></a> ※ ただし、pタグや、display:block; にしたspanタグはNG 22
  23. 23. 4. 固定配置• 要件に応じて、position: fixed; と iScroll 等のライブラリを使い分ける position: fixed; を採用している サイトも多い 23
  24. 24. 4. 固定配置ー position: fixed; を使う場合 ー• iOSなら5以上、Androidなら2.2以上• Androidでは、viewportに user-scalable=no の指定が必須 (Android4.0は除く) • 常に安定して動作する訳ではないので、 実装前に検証した方が無難 24
  25. 25. 4. 固定配置ー iScroll 等のライブラリを使う場合 ー• iOS4で固定配置を実装する場合は必須• Androidでは動作が不安定 iScroll4 http://cubiq.org/iscroll-4 25
  26. 26. 5. オーバーレイ• Android2.3では、 下層レイヤーの リンク要素やプルダウンが反応してしまう 26
  27. 27. 5. オーバーレイ サンプルURL: bit.ly/THCYd2• 場合によっては、オーバーレイ上の要素が 操作できなくなる可能性も・・・ 27
  28. 28. 5. オーバーレイー 対処方法の例 ー方法1:リンク要素のハイライトカラーを透明化 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);方法2:タップ時のイベントをキャンセル $("E").on("touchstart", function(e) { e.preventDefault(); } 28
  29. 29. 5. オーバーレイー 対処方法の例 ー方法3:下層レイヤーのリンク要素やプルダウン を全て非表示に visibility: hidden; • いずれの方法も、 完全に 対処できる訳では ないので注意 29
  30. 30. 6. transform系アニメーション• Androidでは、アニメーションなど translate3dを使用した処理を行うと、 様々なトラブルが発生する 30
  31. 31. 6. transform系アニメーションー translate3dが原因のトラブル ー1. tranlate3d使用後のレンダリングに崩れ リンク要素のアウトライン、transform系プロパティなど 31
  32. 32. 6. transform系アニメーションー translate3dが原因のトラブル ー2. インプット系要素で不可思議な動き オーバーレイなど、translate3dでアニメーションさせた 要素上にインプット系要素が配置してある場合・・・ サンプルURL: bit.ly/NHSMfd 32
  33. 33. 6. transform系アニメーションー 対処方法の例 ー• 2次元のアニメーションの場合は、 translateの方を使用する 例えば以下のようなアニメーション指定の場合は・・・ E{ transition: all 0.75s ease-out; transform: translate3d(0, 400px, 0); } 次のようにする E{ transition: all 0.75s ease-out; transform: translate(0, 400px); } 33
  34. 34. 6. transform系アニメーション補足:translate と translate3d についての考察• なぜ、2次元のアニメーションであっても、 translate3d がよく使われているのか? • iOS上で、ハードウェアアクセラレーションを 使ったアニメーションを実施するため translate3dを使わないとハードウェア アクセラレーションは有効にならない? 34
  35. 35. 6. transform系アニメーション補足:translate と translate3d についての考察• ハードウェアアクセラレーションの有効性を 確認してみる ターミナルから以下のコマンドにてiOSシミュレータを起動 (iOSシミュレータがインストールされたMac限定) CA_COLOR_OPAQUE=1 /Developer/Platforms/iPhoneSimulator.platform/ Developer/Applications/iPhone Simulator.app/Contents/MacOS/iPhone Simulator 35
  36. 36. 6. transform系アニメーション補足:translate と translate3d についての考察 特殊モードの iOSシミュレータで 動作確認サンプルURL: bit.ly/OAVk0j 36
  37. 37. 6. transform系アニメーション補足:translate と translate3d についての考察• iOS向けとAndroid向けとで、 アニメーション処理を分けるのが面倒で あれば、translateで一本化してしまおう 37
  38. 38. 7. スワイプ系ライブラリ• 選定するときは「Androidでも動くか?」を 基準にする• FirefoxやOperaでも動く方が望ましい 多くのサイトで、スワイプによる 画像切り替えを採用 38
  39. 39. 7. スワイプ系ライブラリー 代表的なライブラリと採用サイト ー国内サイトで、よく使われているライブラリ• jQuery.flickSimple (URL: bit.ly/QxeMWK) イトーヨーカドー などで採用 標準ブラウザ Chrome Firefox Opera Mobile △ △ △• flickslide (URL: bit.ly/RnCprE) ミスタードーナツ、モスバーガー などで採用 標準ブラウザ Chrome Firefox Opera Mobile △ △ △ 39
  40. 40. 7. スワイプ系ライブラリー 代表的なライブラリと採用サイト ー• flipsnap.js (URL: bit.ly/QxeMWK) JRおでかけネット、 ドミノピザ などで採用 標準ブラウザ Chrome Firefox Opera Mobile ○ ○ ○ ○• flickGal (URL: bit.ly/RnCprE) ZOZOTOWN、 東急ハンズ などで採用 標準ブラウザ Chrome Firefox Opera Mobile ○ ○ △ ○ まとめURL: bit.ly/RWSDVY 40
  41. 41. Chapter 5知っておこう:機種に依存するトラブルの例
  42. 42. 1. 固定配置がうまく動作しない        • Galaxy S Ⅱでは、position: fixed; を 使った固定配置がうまく動作しない 42
  43. 43. 1. 固定配置がうまく動作しない        ー 対処方法の例 ー• スクロール途中だけ、固定配置の要素を 非表示にするなどして対応 動作サンプル: bit.ly/MACxRp 43
  44. 44. 2. text-shadow のトラブル• Galaxy Nexus では、text-shadow を 使うと、リンク要素のアウトラインが崩れた り、一部の文字で文字飛びが発生したりする 44
  45. 45. 2. text-shadow で文字が飛ぶー 対処方法の例 ー• Galaxy Nexus の場合だけ、text-shadow の指定を無効にする if (/Galaxy Nexus/.test(navigator.userAgent)) { $("html").addClass("GalaxyNexus"); } E{ text-shadow: 0 1px 0 rgba(0, 0, 0, 0.75); } . GalaxyNexus E { text-shadow: none; } 45
  46. 46. 3. clickイベントが発生しない• Galaxy S Ⅲでは、transform系 プロパティを使うと、そのレイヤー上の clickイベントなどが発生しない場合がある 動画 46
  47. 47. 3. clickイベントが発生しないー 対処方法の例 ー• Galaxy S Ⅲ のアップデートで解決?!• 解決しなければ、Galaxy S Ⅲの場合だけ、 transformを無効にする if (/SC-06D/.test(navigator.userAgent)) { $("html").addClass("GalaxyS3"); } E{ -webkit-transform: translate(0, 400px); } .GalaxyS3 E { -webkit-transform: none; top: 20px; } 47
  48. 48. Chapter 6最後に・・・
  49. 49. スマートフォン対応は・・・• ほぼAndroidとの戦い• 特に機種依存のトラブルは非常にやっかい• 事前に対応レベルについて、防衛線を張って おく事を忘れないように 49
  50. 50. これからのスマートフォン対応• Androidに関しては、2.3向けの対応は まだしばらくは続く• Android4.1から、いよいよChromeが 標準ブラウザに• iOSのバージョンアップに伴う、改修・新規対応 が今後発生• メディアクエリ等を用いた、レスポンシブな 対応が増加中 50
  51. 51. スマートフォン対応、気をつけたいトラブル 若松 浩昭(株式会社ジークス) @azuyuu

×