9/28におこなわれたokayama-jsでの発表用スライドです。

1. okayama-js
スマートフォン対応、
気をつけたいトラブル
∼ JavaScript編 ∼
若松 浩昭（株式会社ジークス）

2. 自己紹介
若松 浩昭（Hiroaki Wakamatsu）
・Webサイトの設計
・フロントエンド周りの実装
・スマートフォン案件が主体
・HTML5-WEST.jpコアメンバー
Twitter : azuyuu
ブログ : bit.ly/NFATf4
2

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

4. セッションの内容
8/18 の
『CSS Nite in OSAKA, Vol.32 』
で発表した内容に、JavaScriptの話を
追加しました
8/18のスライド： http://slidesha.re/QyICih
4

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

6. 1. 傾き時の画面サイズ取得
• Androidでは、orientationchange
イベント時に検知できる値がズレる
window.onorientationchange = function() {
alert("W: " + window.innerWidth + ", H: " + window.innerHeight);
}
横に傾けたにも関わらず、縦向け時の
幅と高さを取得している・・・
6

7. 1. 傾き時の画面サイズ取得
ー 対処方法の例（1）ー
• タイマーを使って、画面サイズ取得の
タイミングを少しだけ遅延させる
window.onorientationchange = function() {
setTimeout(function() {
alert("W: " + window.innerWidth + ", H: " + window.innerHeight);
}, 200);
}
横に傾けた時、正常に横向け時の
幅と高さが取得できている
ただし、端末によってはうまく取得できな
い場合がある（Galaxy S Ⅲとか・・・）
7

8. 1. 傾き時の画面サイズ取得
ー 対処方法の例（2）ー
• orientationchangeイベントの代わりに
resizeイベントを使う
ただし、画面をスクロー
ルした時や、キーパッド
を表示した時にも、
resizeイベントが発生し
てしまうので注意
8

9. 2. キーイベント
• Androidは、keyupなどのイベントが
うまく発生しない
• しかも、機種ごとに動作が異なったりする
$("textarea").on("keyup", function(e) {
var len = $("textarea").val().length;
}
9

10. 2. キーイベント
ー 現象の例 ー
最初の一文字や、途中に「確定」を
タップした時だけイベントが発生、途
日本語入力の場合だけ、イベントが発 中は英数字入力であってもイベントは
生しない 発生しない
Galasy S Ⅱの場合 Galaxy S Ⅲの場合
結局、Androidでの実装は諦めました・・・
10

11. 3. スワイプ処理
• Androidは、画面スクロールが発生すると、
touchmoveやtouchendを見失う
画面スクロール中は、touchmoveで
座標が取得できない・・・
iPhoneの場合（正常） Galaxy S Ⅲの場合
11

12. 3. スワイプ処理
ー 対処方法の例（1） ー
• touchmove時に、e.preventDefault()を
実行
$("E").on("touchstart", function(e) {
// event...
}).on("touchend", function(e) {
// event...
}).on("touchmove", function(e) {
// event...
e.preventDefault();
});
12

13. 3. スワイプ処理
ー 対処方法の例（2）ー
• ただし、縦方向にスクロールしなくなるの
で・・・
13

14. 3. スワイプ処理
ー 対処方法の例（3） ー
• e.preventDefault() に実行条件を付ける
$("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();
}
});
14

15. 3. スワイプ処理
ー 対処方法の例（4）ー
• 縦方向の移動が特定値以下の場合だけ、
e.preventDefault() を実行
縦スクロール時は座標は取得せず、
縦スクロールが発生しない（横方向のタッチ移動
の）時だけ座標の取得ができるようになる
15

16. okayama-js
スマートフォン対応、気をつけたいトラブル
∼ JavaScript編 ∼
若松 浩昭（株式会社ジークス）
@azuyuu