リズム認証の改良 （Ajax）

今回のゼミでは今まで７つの時間差を手作業でExcelファイルに入力していたがとても面倒であるため自動化することを考えた。

1.データベース

表1．rhythmテーブル

項目	格納するデータ
ID	レコードを識別するID。主キー。自動インクリメント
patientId	患者番号（学籍番号）
measurement_time	計測日時（データベースへ書き込んだ日時を設定する）
t1~t7	計測した７つの時間差データがt1～t7に入る

2.インターフェイス

{   "rhythms": [     {       "patientId": "w9999999",  ← 利用者番号       "name": "〇〇　〇〇",      ← 利用者氏名       "t": [         45,         70,         96,         204,       計測した時間（配列）         62,         90,         61       ]     }   ] }

図2．JSON形式の送信データ

3.WebAPI

表2．WebAPIの仕様

項目	内容
url	http://hinfo〇〇〇.php.xdomain.jp/〇〇〇2018/putRhythmData.php
メソッド	post
data	図2に示すJSON形式のデータ

4.Ajax

function putRhythmData(t) {   var data = {     'rhythms': [       {         'patientId': 'ｗ9999999',  // ここには自分の学番を書く         'name': '〇〇　〇〇',  // ここには自分の名前を書く         't': t  // 引数で受け取った計測時間配列 t をセットする       }     ]   }   var url = 'http://hinfo〇〇〇.php.xdomain.jp/〇〇〇2018/putRhythmData.php';   var formData = new FormData();   formData.append('rhythms', JSON.stringify(data)); $.ajax({       url: url,       method: 'post',       async: true,   data: formData,   processData: false,  // Ajaxがデータを整形しない   contentType: false     }).done(function(response, status, xhr){       if (response != null) {         var res = JSON.parse(response);         alert('送信成功：' + unescape(JSON.stringify(res)));       } else {         alert('送信失敗：');       }     }).fail(function(xhr, status, error){       var message = "xhr.status = " + xhr.status + ", xhr.statusText = " + xhr.statusText     + ", status = " + status + ", error = " + error + '\n\nurl=' + url;       alert('サーバからの応答がありません。status=' + message);     });     formData = null; }

図3．Ajaxを使ってリズム認証サーバへ計測データを送信する関数putRhythmData

5.スマホアプリの修正

Monacaのプロジェクト「リズム認証」のmain.jsに対して次の修正を行う。

1. 図3の関数を追加する（場所：関数show_timeのあと）
2. 関数show_timeに関数putRhythmDataの呼び出しを追加する（場所：関数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;   });   putRhythmData(t);   $('#canvas').css('display','none'); }

図4．関数putRhythmDataの呼び出し

6.テスト

Monacaの修正が終わったら動作確認を行う。リズム認証を起動して［スタート］ボタンをタップして表示される黄色いキャンバスを4回タップする。

次にブラウザに以下のURLを入力する。

http://hinfo〇〇〇.php.xdomain.jp/〇〇〇2018/putRhythmData.php?patientId=[自分の学番]

すると、ブラウザに指定したpatientIdの計測データがJSON形式で表示されるので、それをコピーしてJSON整形サイト[2]へ貼り付けて整形する。

あるいはphpMyAdminを通じてダイレクトにデータベースのrhythmテーブルを参照してもよい。

https://phpmyadmin2.php.xdomain.ne.jp/?

7.感想

いよいよ来週テーマ決め前最後のアプリ作成となる音声認証や輪読を生かしたいいものがつくれればなと思う。

参考文献

1. @zakiyamaaaaa：はじめてのAjax(jQuery) 2018年版. https://qiita.com/zakiyamaaaaa/items/bdda422db2ccbaea60d9, 2018/9/6, （2019/1/27参照）
2. JSON Pretty Print. https://jsonformatter.org/json-pretty-print, （2019/1/27参照）