2018年12月10日月曜日

リズム認証してみよう！

今回のゼミではmonacaで実際にタップしてリズム認証してみる画面を作った。

1.まず、Javascriptファイルの作成をした。
2.jsフォルダ内にmain.jsを作成してリスト１の内容を入力した。
var touch_time = [];
var seq = 0;

$(document).on('touchstart','#canvas',function(event){
  touch_time.push({'label':'s','time':$.now()});
});

$(document).on('touchend','#canvas',function(event){
  touch_time.push({'label':'e','time':$.now()});
  if(++seq >= 4){
    show_time();
  }
});

function show_time(){
  var t = [];
  var prev = 0;
  touch_time.forEach(function(e){
    if(prev > 0){
      ti = e.time - prev;
      t.push(ti);
      $('#result').append(ti + '<br />');
    }
    prev = e.time;
  });
  $('#canvas').css('display','none');
}

function reset_canvas() {
  $('#result').html('');
  $('#canvas').css('display','');
  touch_time = [];
  seq = 0;
}
リスト１：main.js
2.index.htmlに下記を追加する。 
<script src="js/main.js"></script>
リスト２：scriptタグの追加 

以上の作業で黄色のキャンバスが表示されるようになり、４回タップすると下にt1～t7の値が表示されるようになった。 そしてこのt値を計測し、５人分のデータを集めて終わった。
次回はこのデータでユークリッド距離を求めたいと思う。

【Tips】 


jQuery


jQueryとは、JavaScriptのプログラムをより簡単に書けるようにするために設計されたJavaScriptライブラリのことです。ここではjQueryを使うとどんなにプログラムが簡単になるかを実例を挙げて説明します。

以前、2018年11月12日のブログ「YES/NOチャート 効果音の修正と動画再生 」のTipsでイベントリスナについて説明しました。

イベントリスナ


スクリーンのタップ、画面の表示などのイベントを捉えて処理を実行するために聞き耳を立てる仕掛けをイベントリスナと言う。
イベントリスナは次のように書く。
document.addEventListener([イベントの種類], function(event){
    ・・・ここにイベント処理を書く・・・
  }
},false);
リスト6　イベントリスナ

リスト6において[イベントの種類]には、どのようなイベントが発生したかを表す文字列を書く。例えば、スクリーンをタップした場合は'click'、画面を表示（push）した直後は'postpush'、画面を閉じた（pop）直後は'postpop'などと書く。
このイベントリスナをjQueryを使って書くと次のようになります。
$(document).on([イベントの種類], [CSSセレクタ], function(event){
  ・・・ここにイベント処理を書く・・・
});
リスト3．jQueryで書いたイベントリスナ 

これは、[CSSセレクタ]で指定される要素に[イベントの種類]に指定したイベントが発生したときに呼び出されるイベント処理を登録する命令です。

リスト1では4～6行目及び8～13行目でjQueryを用いたイベントリスナを書いています。

まず、4～6行目はキャンバス（CSSセレクタ="#canvas"ということは、id="canvas"のタグ：これは、top.html内のcanvasタグに付けたid）に'touchstart'というイベントが発生したら呼び出されるイベントを登録する命令です。
'touchstart'というイベントは、指がスクリーンをタッチした瞬間に発生します。したがってこれは指でスクリーンをタッチしたときに呼び出される処理の定義です。図1において1D, 2D, 3D, 4Dのことです。

図1．画面タップによって得られる時間差（引用元）

 同様に8～13行目はキャンバスに'touchend'というイベントが発生したら呼び出されるイベントを登録する命令です。
'touchend'というイベントは、指がスクリーンから離れた瞬間に発生します。したがってこれは指がスクリーンから離れたときに呼び出される処理の定義です。図1において1U, 2U, 3U, 4Uのことです。

指がスクリーンをタッチしたら「touch_time」という配列にpushメソッドを使って次のデータを追加しています。
  {
    'label':'s',
    'time':$.now()
  }
リスト4．タッチした時配列に追加するデータ

これは、'label'というキーに's'という値（'start'の's'）を、'time'というキーにミリ秒換算の現在時刻を取得する関数 $.now() を設定したものです（$.now()もjQueryの関数です）。

同様に、指がスクリーンから離れたら、リスト4において'label'を'e'（'end'の'e'）に変えたデータを配列「touch_time」に追加します。
これで図1に示す1D, 1U, ..., 4D, 4Uの発生時刻が配列「touch_time」に蓄えられることになります。

4回のスクリーンタッチが終わったら、全部で8つの発生時刻が格納された配列変数「touch_time」を先頭から順番に見ていくことにより、図1のt1, t2, ..., t7を計算することができます。それをやっているのがリスト1の「show_time()」関数です。

HTML要素の操作


jQueryの威力はイベントリスナの書き方だけではありません。HTML要素に対する値の設定・取得やスタイルシートの設定などの記述を簡単に書くことができます。

たとえば、リスト1の関数「reset_canvas()」内の1行目にある
$('#result').html('');
は、id="result"のHTML要素（t1~t7を表示するエリアを定義するdivタグ）を空にする（つまりクリアする）という意味です（top.htmlについては2018年12月3日のブログ「リズム認証」のリスト2参照）。jQueryを使わないでこれを書くと次のようになります。
  document.getElemenById("result").innerHTML = '';
かなり面倒くさいですね。

また、2行目の
$('#canvas').css('display','');
は、id="canvas"のHTML要素（タップするキャンバスを定義するcanvasタグ）のスタイルシートに「'display': none」を設定する（つまりキャンバスを非表示にする）という意味です。
これもjQueryを使わなければ次のようになります。 
  document.getElemenById("result").style.display = 'none';
やはり面倒ですね。
このように、jQueryでは「$([CSSセレクタ])」を使ってHTML要素にアクセスし、html()メソッドやcss()メソッドを使ってHTML要素の操作を簡単にすることができます。
このようなjQueryの使い方の詳細や例文についてはjQuery入門を参照してください。

ブログでプログラムやHTMLを書くときの注意事項

 

ブログでJavascriptのプログラムやHTMLを書くときはGoogle-code-prettifyを使います。使い方は以下の通りです。

１．Bloggerの編集画面で左上の［作成］を［HTML］に変える。
２．すると、ブログがHTMLで表示されるので、JavascriptのプログラムHTMLを書きたい部分を次のようにclass属性に"prettyprint"を設定したpreタグで囲む。
<pre class="prettyprint">
  ・・・ここにプログラムやHTMLを書く
</pre>
リスト5．Google-code-prettifyの使用方法

ただし、"<"や">"はそのまま書くとタグの記号と間違えられるので、"<"は"&lt;"に、">"は"&gt;"に置き換える。大量のHTMLがあるとこの置き換え作業は結構面倒なので、エディタの置換機能を使って一括置換する。
投稿者 時刻:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)