今回のゼミでは今まで７つの時間差を手作業で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に対して次の修正を行う。
図3の関数を追加する（場所：関数show_timeのあと）
関数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.感想
いよいよ来週テーマ決め前最後のアプリ作成となる音声認証や輪読を生かしたいいものがつくれればなと思う。
参考文献
@zakiyamaaaaa：はじめてのAjax(jQuery) 2018年版. https://qiita.com/zakiyamaaaaa/items/bdda422db2ccbaea60d9, 2018/9/6, （2019/1/27参照）
JSON Pretty Print. https://jsonformatter.org/json-pretty-print, （2019/1/27参照）
