ハンドラの変更によるディスプレイ反応速度の改善

7988 ワード
Python Pepper NAOqi JavaScript Python テキストリンク

　本記事は以下の環境で動作を確認しています。

バージョン
NAOqi 2.5.5.5
Choregraphe 2.5.5.5

この記事の内容

　ロボアプリを作成した時、ディスプレイの反応が悪く感じたことがあるかもしれません。そんな時、少しの変更でディスプレイの反応速度を改善できますので、その方法をサンプルアプリを見ながらご紹介します。

改善方法

　ディスプレイに表示されているHTMLのonclick()ハンドラを、touchstartイベントを捕捉する方法に変更します。

1. HTMLを修正します。

jQuery を利用するため、以下のコードを挿入します。

<script src="/libs/qimessaging/1.0/jquery.min.js"></script>  <!--　←<head/>に追加-->

onclickハンドラを除去します。

<button id="target_button" onclick="funcRep();">ボタン</button>

　　↓

<button id="target_button">ボタン</button>  <!--　←変更-->

2. JavaScript側にハンドラを実装します。

HTMLの部品に対応するハンドラを追加します。

// タッチイベントによるハンドラ
$(function() {
  $('#target_button').on({
      'touchstart': function () {
          funcRep(); // 実行したい処理
      },
  });
});

サンプルプログラム

　サンプルプログラムはGitHubよりダウンロードしてください。
　https://github.com/Atelier-Akihabara/pepper-tablet-event-example

　サンプルを実行すると以下のように表示されます。

  • ボタン［おそーい］をクリックすると「おそーい」とPepperが発声します。
  • ボタン［早い］をタッチすると「早い」とPepperが発声します。
  • 頭タッチで終了します。

比較

　実際にロボアプリを作成しonclickハンドラとtouchイベントを捕捉する実装を比較したいと思います。

index.html
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale = 1, minimum-scale = 1, maximum-scale = 1" />
  <script src="/libs/qimessaging/2/qimessaging.js"></script>
  <script src="scripts/jquery-2.2.2.min.js"></script>
  <script src="scripts/jquery.qimhelpers.js"></script>
  <script src="scripts/main.js"></script>
  <link rel="stylesheet" type="text/css" href="stylesheets/app.css">
</head>
<body>
  <div class="mount">
      <button id="slow_button" class="button" onclick="slowRep();">おそーい</button><button id="fast_button" class="button">早い</button>
  </div>
</body>
</html>

　上記HTMLでは比較のためのボタンを2つ［おそーい］［早い］を表示させています。

main.js
// タッチイベントによるハンドラ
$(function() {
  $('#fast_button').on({
      'touchstart': function () {
          $.raiseALMemoryEvent("SBR/Test/Tablet/FastTouch", 1);
      },
  });
});

// HTML onClickeによるハンドラ
function slowRep(){
  $.raiseALMemoryEvent("SBR/Test/Tablet/SlowTouch", 1);
}

　［おそーい］ボタンに対応するハンドラslowRep()と［早い］ボタン（id: fast_button）に対応するハンドラを用意します。

　サンプルプログラムをPepper実機に転送し実行すると、［早い］ボタンはタッチするだけで反応するのに対し、［遅い］ボタンでは明確にクリックされた時にみボタンが反応することが確認できます。

ユーザビリティの向上

　反応速度の向上はユーザビリティ（使いやすさ）に直結するポイントですので、是非touchイベントでの捕捉も試してみてください。