Symfoware

Symfowareについての考察blog

Cordova(コルドバ)チュートリアル6 クリック後300msの遅延を抑止する

Cordova(コルドバ)チュートリアル5 端末標準の通知(Notification)を表示する
こちらの続きです。

OS標準の通知ダイアログを表示できました。

次のステップに進みます。
Module 6: Avoiding the 300ms Click Delay



ダイアログ表示遅延



iOSのデバイスやiOSエミュレーターだと、ボタンを押してから実際にダイアログが
表示されるまで遅延が発生します。

これはどうもダブルタップになるか、しばらく入力を待つのが原因のようですね。


index.htmlにlib/fastclick.jsを読み込む指定を追加します。


  1. <script src="lib/fastclick.js"></script>




index.html全体ではこうなりました。


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  6. </head>
  7. <body>
  8. <p><button class="help-btn">Help</button></p>
  9. <div class='header'><h1>Directory</h1></div>
  10. <div class='search-view'>
  11.     <input class='search-key' type="search" placeholder="Enter name"/>
  12.     <ul class='list employee-list'></ul>
  13. </div>
  14. <!-- cordova.js の読み込みを追加 -->
  15. <script src="cordova.js"></script>
  16. <!-- タップ遅延を抑止 -->
  17. <script src="lib/fastclick.js"></script>
  18. <script src="lib/jquery.js"></script>
  19. <script src="js/services/json/EmployeeService.js"></script>
  20. <script src="js/app.js"></script>
  21. </body>
  22. </html>




app.jsにFastClickを有効にするコードを追加します。


  1. FastClick.attach(document.body);




app.js全体ではこのようになります。


  1. // We use an "Immediate Function" to initialize the application to avoid leaving anything behind in the global scope
  2. (function () {
  3.     /* ---------------------------------- Local Variables ---------------------------------- */
  4.     var service = new EmployeeService();
  5.     service.initialize().done(function () {
  6.         console.log("Service initialized");
  7.     });
  8.     /* --------------------------------- Event Registration -------------------------------- */
  9.     $('.search-key').on('keyup', findByName);
  10.     $('.help-btn').on('click', function() {
  11.         alert("Employee Directory v3.4");
  12.     });
  13.     
  14.     // windows.alertを上書きする
  15.     document.addEventListener('deviceready', function () {
  16.      if (navigator.notification) { // Override default HTML alert with native dialog
  17.          window.alert = function (message) {
  18.              navigator.notification.alert(
  19.                  message,    // message
  20.                  null,     // callback
  21.                  "Workshop", // title
  22.                  'OK'        // buttonName
  23.              );
  24.          };
  25.      }
  26.     }, false);
  27.     
  28.     // ダイアログ表示遅延対策
  29.     FastClick.attach(document.body);
  30.     /* ---------------------------------- Local Functions ---------------------------------- */
  31.     function findByName() {
  32.         service.findByName($('.search-key').val()).done(function (employees) {
  33.             var l = employees.length;
  34.             var e;
  35.             $('.employee-list').empty();
  36.             for (var i = 0; i < l; i++) {
  37.                 e = employees[i];
  38.                 $('.employee-list').append('<li><a href="#employees/' + e.id + '">' + e.firstName + ' ' + e.lastName + '</a></li>');
  39.             }
  40.         });
  41.     }
  42. }());





Androidでも効果があるのかよくわからなかったのですが、
対策を入れる前後をログがしてみました。


対策を入れる前


[広告 ] VPS


対策を入れた後


[広告 ] VPS



エミュレーターなので、若干動作が重く違いがよくわからん。
とりあえず導入しておいたほうが良い気がします。
関連記事

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2015/02/22(日) 15:19:41|
  2. 備忘録
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
<<Cordova(コルドバ)チュートリアル7 シングルページアプリケーションの準備 | ホーム | Cordova(コルドバ)チュートリアル5 端末標準の通知(Notification)を表示する>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://symfoware.blog68.fc2.com/tb.php/1644-ef17f51f
この記事にトラックバックする(FC2ブログユーザー)