若松 浩昭(株式会社ジークス)
スマートフォン対応、 気をつけたいトラブル
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編 ~