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

1. スマートフォンブラウザ不具合特集
若松 浩昭（株式会社ジークス）

2. 自己紹介
若松 浩昭（Hiroaki Wakamatsu） iPhone 3G
・Webサイトの設計
・フロントエンド周りの実装
003SH
・スマートフォン案件が主体 Galaxy S Ⅱ
・HTML5-WEST.jpコアメンバー
Galaxt Nexus
SO-01B
Twitter : 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. 3
translate3d
•translate3d実行後のレンダリングに崩れ
リンク要素のアウトライン、transform系プロパティ、
各種インプット系要素 ...
19

20. Case. 3
translate3d
•translate3dと同時に指定した、その他の
transform系プロパティが反映されない
iPhone4 IS05
20

21. Case. 3
translate3d
•translate3dを実行した要素内では、
インプット系要素が不可思議な動き
デモURL :
goo.gl/8oNXZ
21

22. Case. 3
translate3d ー 回避方法の例 ー
•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
オーバーレイ ー 回避方法の例 ー
方法１：ハイライトカラーを透明化
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
Case 1 Case 2 Case 3 Case 4
ハイライトは消えるが、要素は反応している
25

26. Case. 4
オーバーレイ ー 回避方法の例 ー
方法２：タップ時のイベントをキャンセル
$("E").on("touchstart", function(e) {
e.preventDefault();
}
Case 1 Case 2 Case 3 Case 4
プルダウンが機能しなくなる 26

27. Case. 4
オーバーレイ ー 回避方法の例 ー
方法３：クリック(プルダウン)要素を非表示
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. 6
text-shadow
•必ずぼかしの設定値は1px以上にする
（Android4は除く）
text-shadow: 0 0 1px rgba(0, 0, 0, 0.75);
33

34. Case. 6
text-shadow
•Galaxy Nexusでは、特定の文字で文字飛
びが発生するので、text-shadowは無効に
if (/Galaxy Nexus/.test(navigator.userAgent)) {
$("E").css("text-shadow", "none");
}
34

35. Case. 7
拡大と縮小
•３種類のアクション
ピンチイン・アウト ダブルタップ 拡大・縮小ボタン
35

36. Case. 7
拡大と縮小
•２種類の拡大結果
全体がそのまま拡大 画面幅に合わせて改行
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