一時的にデータを保存するためにフィールドを使う ~勤怠管理アプリを例に~アプリのスマホ動作について

背景・実現したいこと

○参考サイト

一時的にデータを保存するためにフィールドを使う ~勤怠管理アプリを例に~

○内容

上記サイトを見て、全く同じタイムカードアプリを実装したのですが、

スマホ時、タイムカードが動作しないので、動作するようにしたいです。

 

エラー情報

PCではデベロッパーツールでエラーは出ていません。

(スマホ時のみファビコンの画像が見つからないエラー出ていますが、下記コードでファビコンを無効化しても、スマホ時の動作には関係ありませんでした。)

$(function() {
$('head').append('<link rel="shortcut icon" href="#">');
});

 

利用したソースコード

○JS

/*
* 勤怠管理 タイムカード
* Copyright (c) 2014 Cybozu
*
* Licensed under the MIT License
*/
(function () {
// 定数、変数定義、関数定義
'use strict';
// サーバーの時間を取得する
function getUTCDateByServer() {
var r;
return (r = new XMLHttpRequest()) ?
(r.open('HEAD', '#', false), r.send(null), new Date(r.getResponseHeader('Date'))) : null;
}
// 指定された文字の指定された長さのゼロサプレスを取得する
function zero_suppress(s, len) {
var str = '';
for (var i = 0; i < len; i += 1) {
str += '0';
}
str += s;
return str.substr(str.length - len, len);
}
// 時計に表示する関数
function set_digitTime() {
var dt = new Date(getUTCDateByServer());
var yyyy, MM, dd, hh, mm, ss;
var DAY = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];
yyyy = dt.getFullYear();
MM = zero_suppress(dt.getMonth() + 1, 2);
dd = zero_suppress(dt.getDate(), 2);
hh = zero_suppress(dt.getHours(), 2);
mm = zero_suppress(dt.getMinutes(), 2);
ss = zero_suppress(dt.getSeconds(), 2);

$('#year')[0].innerHTML = yyyy;
$('#date')[0].innerHTML = MM + '/' + dd + ' ' + DAY[dt.getDay()];
$('#time')[0].innerHTML = hh + ':' + mm + ':' + ss;
}
// イベントハンドラ実行
var events = ['app.record.index.show'];
kintone.events.on(events, function (event) {
if (event.viewId !== 5522744) {
return;
}
// タイムカード
// アカウント=ログインユーザー、日付=今日 のレコードをすべて取得
var appId = kintone.app.getId();
var user = kintone.getLoginUser();
var qryInfo = 'アカウント名 = "' + user.code + '" and 日付 = TODAY() order by 出勤 desc limit 1';
var params = {
app: appId,
query: qryInfo,
fields: [
'社員番号',
'アカウント名',
'日付',
'出勤',
'退勤',
'休憩中'
]
};
kintone.api(kintone.api.url('/k/v1/records', true), 'GET', params, function (resp) {
// resp['records'] の長さが 0 or 1以上の場合で状態を変える
// 今日の レコード数 = 0
if (resp.records.length === 0) {
$('#syukkin').replaceWith("<input id='syukkin' type='button' value='出勤'>");
$('#syukkin').on('click', clickFunction);
} else if (resp.records.length === 1) {
// 今日の レコード数 >= 1
if (resp.records[0]['退勤'].value === null) {
if (resp.records[0]['休憩中'].value[0] === '休憩中') {
$('#fukki').replaceWith("<input id='fukki' type='button' value='復帰'>");
$('#fukki').on('click', clickFunction);
} else {
$('#kyuukei').replaceWith("<input id='kyuukei' type='button' value='休憩'>");
$('#kyuukei').on('click', clickFunction);

$('#taikin').replaceWith("<input id='taikin' type='button' value='退勤'>");
$('#taikin').on('click', clickFunction);
}
} else {
$('#syukkin').replaceWith("<input id='syukkin' type='button' value='出勤'>");
$('#syukkin').on('click', clickFunction);
}
}
});
// クリック関数
function clickFunction() {
var status = $(this).val();
var id = $(this).attr('id');
switch (id) {
case 'syukkin':
syukkin_func();
break;
case 'taikin':
taikin_func();
break;
case 'kyuukei':
kyuukei_func();
break;
case 'fukki':
fukki_func();
break;
}
}
// 出勤関数
function syukkin_func() {
// ルックアップ先のID取得、従業員情報の取得
var applookId = kintone.app.getLookupTargetAppId('社員番号');
var qryInfo = 'アカウント名= "' + user.code + '" order by レコード番号 desc limit 1';
var params = {
app: applookId,
query: qryInfo,
fields: [
'社員番号',
'氏名',
'アカウント名'
]
};
kintone.api(kintone.api.url('/k/v1/records', true), 'GET', params, function (resp) {
// 従業員情報の取得
var employeeNo = resp.records[0]['社員番号'].value;
var employeeName = resp.records[0]['氏名'].value;
var employeeAccount = resp.records[0]['アカウント名'].value;
// 日時取得
var dt = new Date(getUTCDateByServer());
var yyyy = dt.getFullYear();
var MM = zero_suppress(dt.getMonth() + 1, 2);
var dd = zero_suppress(dt.getDate(), 2);
var hh = zero_suppress(dt.getHours(), 2);
var mm = zero_suppress(dt.getMinutes(), 2);
var syukkin_date = yyyy + '-' + MM + '-' + dd;
var syukkin_time = hh + ':' + mm;
var body = {
app: appId,
record: {
'社員番号': {
value: employeeNo
},
'氏名': {
value: employeeName
},
'アカウント名': {
value: employeeAccount
},
'日付': {
value: syukkin_date
},
'出勤': {
value: syukkin_time
}
}
};
// 出退勤アプリに record 登録
kintone.api(kintone.api.url('/k/v1/record', true), 'POST', body).then(location.reload());
});
}
// 休憩関数
function kyuukei_func() {
// レコード取得
var appId = kintone.app.getId();
var qryInfo = 'アカウント名 = "' + user.code + '" order by レコード番号 desc limit 1';
var params = {
app: appId,
query: qryInfo,
fields: ['レコード番号']
};
kintone.api(kintone.api.url('/k/v1/records', true), 'GET', params, function (resp) {
// 従業員情報の取得
var employeeRecId = resp.records[0]['レコード番号'].value;
// 日時取得
var dt = new Date(getUTCDateByServer());
var yyyy = dt.getFullYear();
var MM = zero_suppress(dt.getMonth() + 1, 2);
var dd = zero_suppress(dt.getDate(), 2);
var hh = zero_suppress(dt.getHours(), 2);
var mm = zero_suppress(dt.getMinutes(), 2);
var kyuukei_starttime = yyyy + '-' + MM + '-' + dd + 'T' + hh + ':' + mm + ':00+09:00';
var body = {
app: appId,
id: employeeRecId,
record: {
'休憩中': {
value: ['休憩中']
},
'休憩開始': {
value: kyuukei_starttime
}
}
};
// レコード更新へ
kintone.api(kintone.api.url('/k/v1/record', true), 'PUT', body).then(location.reload());
});
}
// 復帰関数
function fukki_func() {
// レコード取得
var appId = kintone.app.getId();
var qryInfo = 'アカウント名 = "' + user.code + '" order by レコード番号 desc limit 1';
var params = {
app: appId,
query: qryInfo,
fields: [
'レコード番号',
'休憩開始',
'休憩'
]
};
kintone.api(kintone.api.url('/k/v1/records', true), 'GET', params, function (resp) {
// 従業員情報の取得
var employeeRecId = resp.records[0]['レコード番号'].value;
var kyuukei_starttime = resp.records[0]['休憩開始'].value;
var kyuukei_time_total = resp.records[0]['休憩'].value;
// 日時取得
var dt = new Date(getUTCDateByServer());
var yyyy = dt.getFullYear();
var MM = zero_suppress(dt.getMonth() + 1, 2);
var dd = zero_suppress(dt.getDate(), 2);
var hh = zero_suppress(dt.getHours(), 2);
var mm = zero_suppress(dt.getMinutes(), 2);
var kyuukei_endtime = yyyy + '-' + MM + '-' + dd + 'T' + hh + ':' + mm + ':00+09:00';
var ST = new Date(kyuukei_starttime);
var ET = new Date(kyuukei_endtime);
var kyuukei_time;
if (ET - ST !== 0) {
kyuukei_time = Math.round((ET - ST) / (1000 * 60));
} else {
kyuukei_time = 0;
} // 分を表す
kyuukei_time_total = String(Number(kyuukei_time_total) + Number(kyuukei_time)); // 休憩時間トータル
var body = {
app: appId,
id: employeeRecId,
record: {
'休憩中': {
value: []
},
'休憩開始': {
value: null
},
'休憩': {
value: kyuukei_time_total
}
}
};
// レコード更新へ
kintone.api(kintone.api.url('/k/v1/record', true), 'PUT', body).then(location.reload());
});
}
// 退勤関数
function taikin_func() {
// レコード取得
var appId = kintone.app.getId();
var qryInfo = 'アカウント名 = "' + user.code + '" order by レコード番号 desc limit 1';
var params = {
app: appId,
query: qryInfo,
fields: [
'レコード番号',
'日付',
'出勤',
'休憩'
]
};
kintone.api(kintone.api.url('/k/v1/records', true), 'GET', params, function (resp) {
// 従業員情報の取得
var employeeRecId = resp.records[0]['レコード番号'].value;
var syukkin_day = resp.records[0]['日付'].value;
var syukkin_time = resp.records[0]['出勤'].value;
var kyuukei_time_total = resp.records[0]['休憩'].value;
// 日時取得
var dt = new Date(getUTCDateByServer());
var yyyy = dt.getFullYear();
var MM = zero_suppress(dt.getMonth() + 1, 2);
var dd = zero_suppress(dt.getDate(), 2);
var hh = zero_suppress(dt.getHours(), 2);
var mm = zero_suppress(dt.getMinutes(), 2);
var taikin_time = hh + ':' + mm;
var syukkin_daytime = syukkin_day + 'T' + syukkin_time + ':00+09:00';
var taikin_daytime = yyyy + '-' + MM + '-' + dd + 'T' + taikin_time + ':00+09:00';
var ST = new Date(syukkin_daytime);
var TT = new Date(taikin_daytime);
var kousoku_time;
if (TT - ST !== 0) {
kousoku_time = Math.round((TT - ST) / (1000 * 60));
} else {
kousoku_time = 0;
}
var jitsudou_time = Number(kousoku_time) - Number(kyuukei_time_total);
var body = {
app: appId,
id: employeeRecId,
record: {
'退勤': {
value: taikin_time
},
'拘束時間': {
value: kousoku_time
},
'実働時間': {
value: jitsudou_time
}
}
};
// レコード更新へ
console.log('出勤' + syukkin_time);
console.log('退勤' + taikin_time);
console.log('拘束時間' + String(kousoku_time));
console.log('実働時間' + String(jitsudou_time));
kintone.api(kintone.api.url('/k/v1/record', true), 'PUT', body).then(location.reload());
});
}
// 1000ミリ秒ごとにset_digitTime()を繰り返す
set_digitTime();
setInterval(set_digitTime, 1000);
});
// レコード編集画面を開いた際に、時刻フィールドは閲覧Onlyになるように
// イベントハンドラ実行
kintone.events.on('app.record.edit.show', function (resp) {
resp.record['休憩'].disabled = true;
return resp;
});
})();

ご回答よろしくお願いいたします。

 

batabataya様 こんにちは。

モバイル版で動作しないとのことでしたが、

pc版とモバイル版ではイベントが違いますので修正をしたら動作するかもしれません。

またモバイル専用のjavascriptに配置しているでしょうか。

モバイル版のイベントに関しましてはこちらを参照ください。

https://developer.cybozu.io/hc/ja/articles/202738940-PC-%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB-%E6%97%A9%E8%A6%8B%E8%A1%A8 

ishikawayuito様 お世話になっております。

kintoneのイベントをモバイル版に修正したところ、正常に動作いたしました!

初歩的な質問にも丁寧にご対応いただきありがとうございます!