Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

開発合宿20130523

1,319 views

Published on

  • Be the first to comment

  • Be the first to like this

開発合宿20130523

  1. 1. スマートフォンのクリックイベントを高速化事業開発本部 damaya2013.05.24
  2. 2. クリックイベントの高速化目的•Mobile SafariでonClick()が処理される場合、ユーザーがタッチしてから約300ms~350ms程、遅延して処理が実行される
  3. 3. なぜ遅延するか• ユーザーのタッチ操作に伴って、シングルタップかダブルタップかスクロール処理か長押し判定等の判定を行ったあとにクリックイベントが認識されているため。• 但し、スマホ特有のタッチイベント(touchstart/touchend等)であればそのような判定が要らない為、反応が速い。
  4. 4. 今回の検証環境•iPhone iOS 5.0.1•iPad mini iOS 6.1.3
  5. 5. onmousedownとontouchstart<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html lang="ja"><head><meta http-equiv="content-type" content="text/html;charset=utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"><title>Sample</title><script type="text/javascript">window.onload = function(){var touch3 = document.getElementById("touch3");touch3.ontouchstart = function(){sendMsg("ontouchstart");};touch3.ontouchend = function(){sendMsg("ontouchend");};touch3.onmousedown = function(){sendMsg("onmousedown");};touch3.onmouseup = function(){sendMsg("onmouseup");};touch3.onclick = function(){sendMsg("onclick");};}function sendMsg(msg){document.getElementById("msg").value += msg + n;}</script></head><body style="font-size:20px;"><span onclick="alert(onclick);">[◆onclickテスト◆]</span><br/><br/><span onmousedown="alert(onmousedown);">[◆onmousedownテスト◆]</span><br/><br/><span id="touch3">[◆ontouchstartテスト◆]</span><br/><textarea id="msg" style="width:200px; height:150px;"></textarea></body></html>
  6. 6. 実機DEMO
  7. 7. 実行結果タッチイベント終了後、clickイベントの処理が判別される
  8. 8. が、しかし!•このサンプルでは、スクロールする際に対象のリンクを触っただけで、反応してしまう
  9. 9. スクロール処理にも対応できる高速化fastclick.jsを使うhttps://github.com/kyo-ago/fastClick.jshttps://github.com/ftlabs/fastclickタッチされた位置からスクロールなのか(マウスで言うところのドラッグ)を座標位置で計算し、onclick処理よりも早く応答するライブラリ
  10. 10. fastclickの使い方<div class="fastclick">クリック</div><script src="fastclick.js"></script><script type="text/javascript">var button =document.querySelector(".fastclick");new FastClick(button);</script>
  11. 11. 各種ライブラリ情報jQuery Mobileの場合、vclickhttps://github.com/jquery/jquery-mobile/blob/master/js/jquery.mobile.vmouse.jsMobile Boilerplateの場合、Fast Buttonshttps://raw.github.com/h5bp/mobile-boilerplate/master/js/helper.jsClosure Libraryの場合、Creating Fast Buttons for Mobile Web Applicationshttps://developers.google.com/mobile/articles/fast_buttonsJavaScriptのフレームワークに依存されずに判別する場合https://github.com/kyo-ago/fastClick.js
  12. 12. まとめ• iOSでWebを表示する際に、onclick処理させるのであればontouchstartを使用したほうが、体感速度も含めて圧倒的に速い! (次回はAndroidで試してみたい)• TEXTAREAをタッチした際に表示されるキーボードの出現速度などにも応用可能!• ライブラリはフレームワーク別に公開されているので、あとは読み込んで呼び出すだけ。• スマートホン専用サイトや、ソーシャルゲーム等に効果的!• 速さは力!

×