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

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

okayama-js

～ JavaScript編 ～

自己紹介

2

若松 浩昭（Hiroaki Wakamatsu）

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

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

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

このセッションについてChapter 1

セッションの内容

8/18 の『CSS Nite in OSAKA, Vol.32 』で発表した内容に、JavaScriptの話を追加しました

4

8/18のスライド： http://slidesha.re/QyICih

知っておこう2：JavaScriptに関するトラブルの例

Chapter 2

1. 傾き時の画面サイズ取得

6

• Androidでは、orientationchangeイベント時に検知できる値がズレる

window.onorientationchange = function() { alert("W: " + window.innerWidth + ", H: " + window.innerHeight);}

横に傾けたにも関わらず、縦向け時の幅と高さを取得している・・・

7

• タイマーを使って、画面サイズ取得のタイミングを少しだけ遅延させる

window.onorientationchange = function() { setTimeout(function() { alert("W: " + window.innerWidth + ", H: " + window.innerHeight); }, 200);}

横に傾けた時、正常に横向け時の幅と高さが取得できている

ただし、端末によってはうまく取得できない場合がある（Galaxy S Ⅲとか・・・）

1. 傾き時の画面サイズ取得

ー 対処方法の例（1）ー

• orientationchangeイベントの代わりにresizeイベントを使う

8

1. 傾き時の画面サイズ取得

ただし、画面をスクロールした時や、キーパッドを表示した時にも、resizeイベントが発生してしまうので注意

ー 対処方法の例（2）ー

2. キーイベント

9

• Androidは、keyupなどのイベントがうまく発生しない

• しかも、機種ごとに動作が異なったりする$("textarea").on("keyup", function(e) { var len = $("textarea").val().length;}

10

Galasy S Ⅱの場合 Galaxy S Ⅲの場合

2. キーイベント

ー 現象の例 ー

結局、Androidでの実装は諦めました・・・

日本語入力の場合だけ、イベントが発生しない

最初の一文字や、途中に「確定」をタップした時だけイベントが発生、途中は英数字入力であってもイベントは発生しない

3. スワイプ処理

11

• Androidは、画面スクロールが発生すると、touchmoveやtouchendを見失う

iPhoneの場合（正常） Galaxy S Ⅲの場合

画面スクロール中は、touchmoveで座標が取得できない・・・

12

• touchmove時に、e.preventDefault()を実行

$("E").on("touchstart", function(e) { // event...}).on("touchend", function(e) { // event...}).on("touchmove", function(e) { // event... e.preventDefault();});

3. スワイプ処理

ー 対処方法の例（1） ー

13

• ただし、縦方向にスクロールしなくなるので・・・

3. スワイプ処理

ー 対処方法の例（2）ー

• e.preventDefault() に実行条件を付ける

14

$("E").on("touchstart", function(e) { Y1 = e.originalEvent.touches[0].clientY;}).on("touchend", function(e) { // event...}).on("touchmove", function(e) { Y2 = e.originalEvent.touches[0].clientY; if (Math.abs(Y1 - Y2) < 5) { e.preventDefault(); }});

3. スワイプ処理

ー 対処方法の例（3） ー

15

• 縦方向の移動が特定値以下の場合だけ、e.preventDefault() を実行

3. スワイプ処理

ー 対処方法の例（4）ー

縦スクロール時は座標は取得せず、縦スクロールが発生しない（横方向のタッチ移動の）時だけ座標の取得ができるようになる

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

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

okayama-js

～ JavaScript編 ～