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

13,230 views

Published on

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

0 Comments
24 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
13,230
On SlideShare
0
From Embeds
0
Number of Embeds
90
Actions
Shares
0
Downloads
24
Comments
0
Likes
24
Embeds 0
No embeds

No notes for slide

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

  1. 1. okayama-jsスマートフォン対応、    気をつけたいトラブル ∼ JavaScript編 ∼ 若松 浩昭(株式会社ジークス)
  2. 2. 自己紹介若松 浩昭(Hiroaki Wakamatsu)・Webサイトの設計・フロントエンド周りの実装・スマートフォン案件が主体・HTML5-WEST.jpコアメンバーTwitter : azuyuuブログ : bit.ly/NFATf4 2
  3. 3. Chapter 1このセッションについて
  4. 4. セッションの内容8/18 の『CSS Nite in OSAKA, Vol.32 』で発表した内容に、JavaScriptの話を追加しました 8/18のスライド: http://slidesha.re/QyICih 4
  5. 5. Chapter 2知っておこう2:JavaScriptに関するトラブルの例
  6. 6. 1. 傾き時の画面サイズ取得• Androidでは、orientationchange イベント時に検知できる値がズレるwindow.onorientationchange = function() { alert("W: " + window.innerWidth + ", H: " + window.innerHeight);} 横に傾けたにも関わらず、縦向け時の 幅と高さを取得している・・・ 6
  7. 7. 1. 傾き時の画面サイズ取得ー 対処方法の例(1)ー• タイマーを使って、画面サイズ取得の タイミングを少しだけ遅延させる window.onorientationchange = function() { setTimeout(function() { alert("W: " + window.innerWidth + ", H: " + window.innerHeight); }, 200); } 横に傾けた時、正常に横向け時の 幅と高さが取得できている ただし、端末によってはうまく取得できな い場合がある(Galaxy S Ⅲとか・・・) 7
  8. 8. 1. 傾き時の画面サイズ取得ー 対処方法の例(2)ー• orientationchangeイベントの代わりに resizeイベントを使う ただし、画面をスクロー ルした時や、キーパッド を表示した時にも、 resizeイベントが発生し てしまうので注意 8
  9. 9. 2. キーイベント• Androidは、keyupなどのイベントが うまく発生しない• しかも、機種ごとに動作が異なったりする$("textarea").on("keyup", function(e) { var len = $("textarea").val().length;} 9
  10. 10. 2. キーイベントー 現象の例 ー 最初の一文字や、途中に「確定」を タップした時だけイベントが発生、途日本語入力の場合だけ、イベントが発 中は英数字入力であってもイベントは生しない 発生しない Galasy S Ⅱの場合 Galaxy S Ⅲの場合結局、Androidでの実装は諦めました・・・ 10
  11. 11. 3. スワイプ処理• Androidは、画面スクロールが発生すると、 touchmoveやtouchendを見失う 画面スクロール中は、touchmoveで 座標が取得できない・・・ iPhoneの場合(正常) Galaxy S Ⅲの場合 11
  12. 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. 13. 3. スワイプ処理ー 対処方法の例(2)ー• ただし、縦方向にスクロールしなくなるの で・・・ 13
  14. 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. 15. 3. スワイプ処理ー 対処方法の例(4)ー• 縦方向の移動が特定値以下の場合だけ、 e.preventDefault() を実行 縦スクロール時は座標は取得せず、 縦スクロールが発生しない(横方向のタッチ移動 の)時だけ座標の取得ができるようになる 15
  16. 16. okayama-jsスマートフォン対応、気をつけたいトラブル ∼ JavaScript編 ∼ 若松 浩昭(株式会社ジークス) @azuyuu

×