Your SlideShare is downloading. ×
0
スマートフォンブラウザ不具合特集
スマートフォンブラウザ不具合特集
スマートフォンブラウザ不具合特集
スマートフォンブラウザ不具合特集
スマートフォンブラウザ不具合特集
スマートフォンブラウザ不具合特集
スマートフォンブラウザ不具合特集
スマートフォンブラウザ不具合特集
スマートフォンブラウザ不具合特集
スマートフォンブラウザ不具合特集
スマートフォンブラウザ不具合特集
スマートフォンブラウザ不具合特集
スマートフォンブラウザ不具合特集
スマートフォンブラウザ不具合特集
スマートフォンブラウザ不具合特集
スマートフォンブラウザ不具合特集
スマートフォンブラウザ不具合特集
スマートフォンブラウザ不具合特集
スマートフォンブラウザ不具合特集
スマートフォンブラウザ不具合特集
スマートフォンブラウザ不具合特集
スマートフォンブラウザ不具合特集
スマートフォンブラウザ不具合特集
スマートフォンブラウザ不具合特集
スマートフォンブラウザ不具合特集
スマートフォンブラウザ不具合特集
スマートフォンブラウザ不具合特集
スマートフォンブラウザ不具合特集
スマートフォンブラウザ不具合特集
スマートフォンブラウザ不具合特集
スマートフォンブラウザ不具合特集
スマートフォンブラウザ不具合特集
スマートフォンブラウザ不具合特集
スマートフォンブラウザ不具合特集
スマートフォンブラウザ不具合特集
スマートフォンブラウザ不具合特集
スマートフォンブラウザ不具合特集
スマートフォンブラウザ不具合特集
スマートフォンブラウザ不具合特集
スマートフォンブラウザ不具合特集
スマートフォンブラウザ不具合特集
スマートフォンブラウザ不具合特集
スマートフォンブラウザ不具合特集
スマートフォンブラウザ不具合特集
スマートフォンブラウザ不具合特集
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

スマートフォンブラウザ不具合特集

113,127

Published on

CSS Nite in OSAKA, Vol.29 で発表したスライドです。改訂版を http://www.slideshare.net/HiroakiWakamatsu/ss-14011485 にアップしました。

CSS Nite in OSAKA, Vol.29 で発表したスライドです。改訂版を http://www.slideshare.net/HiroakiWakamatsu/ss-14011485 にアップしました。

2 Comments
206 Likes
Statistics
Notes
No Downloads
Views
Total Views
113,127
On Slideshare
0
From Embeds
0
Number of Embeds
33
Actions
Shares
0
Downloads
406
Comments
2
Likes
206
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. スマートフォンブラウザ不具合特集 若松 浩昭(株式会社ジークス)
  • 2. 自己紹介若松 浩昭(Hiroaki Wakamatsu) iPhone 3G・Webサイトの設計・フロントエンド周りの実装 003SH・スマートフォン案件が主体 Galaxy S Ⅱ・HTML5-WEST.jpコアメンバー Galaxt Nexus SO-01BTwitter : azuyuu IS05ブログ : goo.gl/x1kk4 My Desktop!! 2
  • 3. セッションのテーマ 不具合をうまく回避して、 案件を成功に導こう!! 3
  • 4. セッションの内容1. スマートフォン案件の現状2. 不具合を回避するための事前準備3. 代表的な不具合とその回避方法4. その他、気をつけていること5. 最後に・・・ 4
  • 5. Chapter. 1スマートフォン案件の現状 5
  • 6. 日本におけるスマートフォン 6
  • 7. 案件の多くは・・・ 7
  • 8. 苦労するのがAndroid対応•Android OS のバージョン•端末の解像度•ブラウザ•機種に依存する不具合 8
  • 9. Chapter. 2不具合を回避するための事前準備 9
  • 10. これだけはしておこう:対クライアント編•Webで実現可能な表現・機能の説明•iPhone Androidの説明•Androidの機種依存問題の説明•案件で対応する範囲を明確に 10
  • 11. •Android 2.2以下も動作対象?•標準ブラウザ以外のブラウザは?•動作検証(担保)の対象となる機種は? 11
  • 12. これだけはしておこう:クリエイター編•とにかくノウハウが大事。日頃から不具合等の情報収集に励む•要件に対しては事前に必ず検証•検証端末の確保(できれば複数台) 12
  • 13. Chapter. 3代表的な不具合と回避方法 13
  • 14. ・・・の前に、不具合に対応するための準備•UserAgentによる判別処理var ua = navigator.userAgent;var isIphone = /iphone/.test(ua);var isAndroid = /android/.test(ua);// Android端末なら、class="android"をHTMLタグに指定if (isAndroid) { $("html").addClass("android");} 14
  • 15. Case. 1太字•標準フォントの「Droid Sans Japanese」は、全角文字には非対応•機種によっては、太字に完全対応したオリジ ナルフォントがインストールされている SAMSUNG製Android端末 Sharp製Android端末 15
  • 16. Case. 1太字 ー 回避方法の例 ー•text-shadow を使って太字を再現 (機種別で分けるのは・・・さすがにしんどい) E{ font-weight: bold; } .android E { font-weight: normal; text-shadow: 0 0 1px 文字の色; } 16
  • 17. Case. 2リンク要素のアウトライン•ブロック要素のアウトライン反応がおかしい <a href="リンク先URL">リンクのタイトル</a> a { display: block; } /* aをブロック要素としてレンダリング */ 17
  • 18. Case. 2リンク要素のアウトライン ー 回避方法の例 ー•aタグの直下にdivタグを挿入 (pタグや、display:block; にしたspanタグはNG) <a href="リンク先URL"><div>リンクのタイトル</div></a> 18
  • 19. Case. 3translate3d•translate3d実行後のレンダリングに崩れ リンク要素のアウトライン、transform系プロパティ、 各種インプット系要素 ... 19
  • 20. Case. 3translate3d•translate3dと同時に指定した、その他の transform系プロパティが反映されない iPhone4 IS05 20
  • 21. Case. 3translate3d•translate3dを実行した要素内では、 インプット系要素が不可思議な動き デモURL : goo.gl/8oNXZ 21
  • 22. Case. 3translate3d ー 回避方法の例 ー•Androidではtranslate3dを使用しない E{ transition: all 0.75s ease-out; transform: translate3d(0, 400px, 0); } .android E { transform: translate(0, 400px); } 22
  • 23. Case. 4オーバーレイ•下層レイヤーのクリック要素(プルダウン含 む)が反応 Case 1 23
  • 24. Case. 4オーバーレイ•条件によっては、オーバーレイ上の要素が 操作できなくなる可能性も・・・ Case 2 Case 3 Case 4 24
  • 25. Case. 4オーバーレイ ー 回避方法の例 ー 方法1:ハイライトカラーを透明化 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); Case 1 Case 2 Case 3 Case 4 ハイライトは消えるが、要素は反応している 25
  • 26. Case. 4オーバーレイ ー 回避方法の例 ー 方法2:タップ時のイベントをキャンセル $("E").on("touchstart", function(e) { e.preventDefault(); } Case 1 Case 2 Case 3 Case 4 プルダウンが機能しなくなる 26
  • 27. Case. 4オーバーレイ ー 回避方法の例 ー 方法3:クリック(プルダウン)要素を非表示 visibility: hidden; Case 1 Case 2 Case 3 Case 4 下層レイヤーのaタグやプルダウンが全て非表示になるが・・・ 27
  • 28. Case. 5固定配置 iOSなら5以上、Android OSなら2.2以上 で、position: fixed; が使用可能 28
  • 29. Case. 5固定配置•iOS4でも対応するなら、ライブラリの使用 を推奨 iScroll4 http://cubiq.org/iscroll-4 29
  • 30. Case. 5固定配置•Androidでは、iScroll等のライブラリは動 作が不安定•position: fixed; を使用する場合は、 viewportに user-scalable=no の指定が 必須(Android4は除く) 30
  • 31. Case. 5固定配置•Galaxy S Ⅱなどの一部の機種では、 position: fixed; がうまく動かない 31
  • 32. Case. 5固定配置 ー 回避方法の例 ー•スクロール途中は固定配置の要素を 非表示にする等、調整を入れる デモURL : goo.gl/jLJwZ 32
  • 33. Case. 6text-shadow•必ずぼかしの設定値は1px以上にする (Android4は除く) text-shadow: 0 0 1px rgba(0, 0, 0, 0.75); 33
  • 34. Case. 6text-shadow•Galaxy Nexusでは、特定の文字で文字飛 びが発生するので、text-shadowは無効に if (/Galaxy Nexus/.test(navigator.userAgent)) { $("E").css("text-shadow", "none"); } 34
  • 35. Case. 7拡大と縮小•3種類のアクション ピンチイン・アウト ダブルタップ 拡大・縮小ボタン 35
  • 36. Case. 7拡大と縮小•2種類の拡大結果 全体がそのまま拡大 画面幅に合わせて改行 36
  • 37. Case. 7拡大と縮小•拡大(縮小)時のアクションと結果は、 機種によって違う場合がある 例) Xperia acro: → ピンチアウト ... 全体がそのまま拡大 → ダブルタップ/拡大アイコン ... 画面幅に合わせて改行 HTC EVO 3D: → ピンチアウト/ダブルタップ ... 画面幅に合わせて改行•端末の仕様と割り切る 37
  • 38. Chapter. 4その他、気をつけていること 38
  • 39. Point. 1スワイプ系のライブラリの選定•選定する時は「Androidでも動くか?」を 基準にする 39
  • 40. Point. 1スワイプ系のライブラリの選定•flickSimple イトーヨーカドー、スターバックス、セブンイレブン•flipsnap JRおでかけネット、ドミノピザ、UNO(資生堂)•flickslide 海遊館、ミスタードーナツ、モスバーガー•etc... まとめURL : goo.gl/eagSn 40
  • 41. Point. 2フォーム系のスタイルを調整•テキストフィールドの調整•プルダウンの高さ調整 input { padding: 8px 5px; } select { height: 36px; } 41
  • 42. Point. 2フォーム系のスタイルを調整•チェックボックスやラジオボタンのサイズ調 整と、labelタグへのイベント登録 <label onclick=""> <input type="checkbox" /> </label> input[type=checkbox] { -webkit-transform: scale(1.8); } 42
  • 43. Chapter. 5 最後に・・・ 43
  • 44. 最後に・・・•スマートフォン案件は、Androidの不具合をどれだけうまく回避できるかが鍵•Androidに関しては、 格好いい 動きの実装は避けた方が幸せ•HTML5のAPIを使用する際は、特に入念な検証が必要 44
  • 45. スマートフォンブラウザ不具合特集 若松 浩昭(株式会社ジークス) @azuyuu

×