狠狠撸

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

若松浩昭（株式会社ジークス）

自己紹介

若松浩昭（Hiroaki Wakamatsu）

?Webサイトの設計
?フロントエンド周りの実装
?スマートフォン案件が主体

?HTML5-WEST.jpコアメンバー

Twitter : azuyuu
ブログ : bit.ly/NFATf4
2

Chapter 1

このセッションについて

セッションのテーマ

スマートフォン案件で、
トラブルは常に起こりえるもの

事例を知ることで、
トラブルを最小限に抑えよう！！

4

セッションの内容

? スマートフォン案件の現状

? トラブルを最小限に抑えるために

? 知っておこう：
? 表示?動作に関するトラブルの例
? 機種に依存するトラブルの例

? 最後に???

5

Chapter 2

スマートフォン案件の現状

多くの案件で対象となる翱厂

7

特に多いAndroidのトラブル

? 非常に多くの機種

? 異なる搭載OSのバージョン

? 機種ごとに調整された標準ブラウザ

? 標準ブラウザ以外のブラウザへの対応

8

補足：標準ブラウザにおけるHTML5への対応状況

html5test.com で対応状況を調査

Android 2.3 189
Android 4.0 280 ～ 380
機種によって点数が異なる !!

iOS 5.1.1 324
9

Chapter 3

トラブルを最小限に抑えるために

トラブルを引き起こす要因とその対策

Factor 1

制作側の知識不足?認識漏れ
Factor 2

クライアントのこだわり
Factor 3

機種に依存する問題

11

Factor 1 制作側の知識不足?認識漏れ

? 機種?OS?ブラウザ間での差異は当たり前

? 「これはNG」っていう事象がある

? 普段からバッドノウハウについて
情報収集をする
? 複数の実機で検証をする

12

Factor 2 クライアントのこだわり

? 「こういう動きをさせたい」という要望

? Androidでも奇麗にアニメーション

? 「できること」と「できないこと」を
事前に説明しておく
? iPhone Androidであることを
理解してもらう

13

Factor 3 機種に依存する問題（特にAndroid）

? 全てを防ぐことは不可能

? 「起きた」時の対応が重要

? 「起こりえる」ことを伝えた上で、
同意をもらっておく
? 実際に「起きた」場合の取り決めを
しておく（端末確保の費用の話とか）

14

Chapter 4

知っておこう：表示?動作に関するトラブルの例

最初に：ユーザーエージェントによる判定

? 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

// Chrome
Mozilla/5.0 (Linux; Android 4.0.4; SC-06D Build/IMM76D) AppleWebKit/535.19 (KHTML, like
Gecko) Chrome/18.0.1025.166 Mobile Safari/535.19

// Firefox
Mozilla/5.0 (Android; Mobile; rv: 14.0) Gecko/14.0 Firefox/14.0.1

// Opera Mobile
Opera/9.80 (Android 4.0.4; Linux; Opera Mobi/ADR-1207201819; U; ja) Presto/2.10.254
Version/12.00

16

1. 太字 (font-weight: bold;)

? Androidは、全角文字の太字が表示できない
機種がある

? 標準の日本語フォント「Droid Sans
Japanese」は、全角文字の太字に非対応
? 太字に対応したオリジナルフォントが
インストールされている機種も多数ある

17

ー対処方法の例ー

? CSSを活用して、擬似的に太字を表現

① text-shadow で表現
text-shadow: 0 0 1px 文字の色;

② 文字がぼやけるのが嫌な場合は、text-stroke でも表現可能
（webkit系ブラウザのみ）
-webkit-text-stroke: 1px 文字の色;

18

補足：標準ブラウザ以外のブラウザ

全角文字に対しては???

おそらく、「Droid Sans Japanese」が
インストールされていれば、font-weight: bold;
の指定が有効

インストールされているフォントの種類を問わず、
font-weight: bold; の指定が有効

19

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

3. リンク要素のアウトライン

? Androidでは、ブロック要素リンクの
アウトライン表示に不備がある

<a href="リンク先URL">リンクのタイトル</a>

a { display: block; } /* aをブロック要素としてレンダリング */

21

3. リンク要素のアウトライン

? aタグの直下にdivタグを挿入

<a href="リンク先URL"><div>リンクのタイトル</div></a>

※ ただし、pタグや、display:block; にしたspanタグはNG

22

4. 固定配置

? 要件に応じて、position: ?xed; と
iScroll 等のライブラリを使い分ける

position: ?xed; を採用している
サイトも多い

23

4. 固定配置
ー position: ?xed; を使う場合ー

? iOSなら5以上、Androidなら2.2以上

? Androidでは、viewportに
user-scalable=no の指定が必須
（Android4.0は除く）

? 常に安定して動作する訳ではないので、
実装前に検証した方が無難

24

4. 固定配置
ー iScroll 等のライブラリを使う場合ー

? iOS4で固定配置を実装する場合は必須

? Androidでは動作が不安定

iScroll4
http://cubiq.org/iscroll-4

25

5. オーバーレイ

? Android2.3では、下層レイヤーの
リンク要素やプルダウンが反応してしまう

26


サンプルURL：
bit.ly/THCYd2

? 場合によっては、オーバーレイ上の要素が
操作できなくなる可能性も???
27


方法1：リンク要素のハイライトカラーを透明化

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

方法2：タップ時のイベントをキャンセル

$("E").on("touchstart", function(e) {
e.preventDefault();
}

28


方法3：下層レイヤーのリンク要素やプルダウン
を全て非表示に

visibility: hidden;

? いずれの方法も、完全に対処できる訳では
ないので注意

29

6. transform系アニメーション

? Androidでは、アニメーションなど
translate3dを使用した処理を行うと、
様々なトラブルが発生する

30

ー translate3dが原因のトラブルー

1. tranlate3d使用後のレンダリングに崩れ
リンク要素のアウトライン、transform系プロパティなど

31

ー translate3dが原因のトラブルー

2. インプット系要素で不可思議な動き
オーバーレイなど、translate3dでアニメーションさせた
要素上にインプット系要素が配置してある場合???

サンプルURL：
bit.ly/NHSMfd

32


? 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

補足：translate と translate3d についての考察

? なぜ、２次元のアニメーションであっても、
translate3d がよく使われているのか？

? iOS上で、ハードウェアアクセラレーションを
使ったアニメーションを実施するため

translate3dを使わないとハードウェア
アクセラレーションは有効にならない？

34


? ハードウェアアクセラレーションの有効性を
確認してみる

ターミナルから以下のコマンドにてiOSシミュレータを起動
（iOSシミュレータがインストールされたMac限定）

CA_COLOR_OPAQUE=1 /Developer/Platforms/iPhoneSimulator.platform/
Developer/Applications/iPhone Simulator.app/Contents/MacOS/iPhone
Simulator

35


特殊モードの
iOSシミュレータで
動作確認

サンプルURL: bit.ly/OAVk0j
36


? iOS向けとAndroid向けとで、
アニメーション処理を分けるのが面倒で
あれば、translateで一本化してしまおう

37

7. スワイプ系ライブラリ

? 選定するときは「Androidでも動くか？」を
基準にする

? FirefoxやOperaでも動く方が望ましい

多くのサイトで、スワイプによる
画像切り替えを採用

38

ー代表的なライブラリと採用サイトー

国内サイトで、よく使われているライブラリ
? jQuery.?ickSimple (URL: bit.ly/QxeMWK)

イトーヨーカドーなどで採用

標準ブラウザ Chrome Firefox Opera Mobile
△ △ △

? ?ickslide (URL: bit.ly/RnCprE)

ミスタードーナツ、モスバーガーなどで採用

△ △ △

39

ー代表的なライブラリと採用サイトー

? ?ipsnap.js (URL: bit.ly/QxeMWK)

JRおでかけネット、ドミノピザなどで採用

○ ○ ○ ○

? ?ickGal (URL: bit.ly/RnCprE)

ZOZOTOWN、東急ハンズなどで採用

○ ○ △ ○

まとめURL: bit.ly/RWSDVY
40

Chapter 5

知っておこう：機種に依存するトラブルの例

1. 固定配置がうまく動作しない??????
?

? Galaxy S Ⅱでは、position: ?xed; を
使った固定配置がうまく動作しない

42

1. 固定配置がうまく動作しない????????

? スクロール途中だけ、固定配置の要素を
非表示にするなどして対応

動作サンプル：
bit.ly/MACxRp

43

2. text-shadow のトラブル

? Galaxy Nexus では、text-shadow を
使うと、リンク要素のアウトラインが崩れた
り、一部の文字で文字飛びが発生したりする

44

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

3. clickイベントが発生しない

? Galaxy S Ⅲでは、transform系
プロパティを使うと、そのレイヤー上の
clickイベントなどが発生しない場合がある

動画

46

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

スマートフォン対応は???

? ほぼAndroidとの戦い

? 特に機種依存のトラブルは非常にやっかい

? 事前に対応レベルについて、防衛線を張って
おく事を忘れないように

49

これからのスマートフォン対応

? Androidに関しては、2.3向けの対応は
まだしばらくは続く

? Android4.1から、いよいよChromeが
標準ブラウザに

? iOSのバージョンアップに伴う、改修?新規対応
が今後発生

? メディアクエリ等を用いた、レスポンシブな
対応が増加中
50

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

若松浩昭（株式会社ジークス）
@azuyuu

狠狠撸

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

More Related Content

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