Your SlideShare is downloading. ×
スマートフォン対応、気をつけたいトラブル JavaScript編
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

11,014
views

Published on

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

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


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

No Downloads
Views
Total Views
11,014
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
21
Comments
0
Likes
21
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×