"一時的にデータを保存するためにフィールドを使う ～勤怠管理アプリを例に～"のサンプルアプリを参考にして、ボタンをクリックすると、タイムカードが登録されるようにしたいのですが、サンプルアプリ管理がデモ環境によるセキュリティ上の理由（企業秘密？）があるために、参考として見られませんので、ボタンの設定方法がどうしても分かりません。
何か別の方法がありましたら、よろしくお願いします。
ao1962さん
srcを確認したところ以下のHTMLがカスタマイズビューに設定されていました。こちらを貼り付けて試してみてください。
<title>サンプル</title>
<meta charset="utf-8">
<style type="text/css">
body, ul, li {margin:0; padding:0; list-style:none;}
/* 日時表示 */
div.date-time {
height:50px;
padding:10px;
background:#44810F;
border-bottom:1px solid #fff;
color:#fff;
}
.year {width:150px; text-align:center; virtical-align:bottom; }
.date {width:150px; text-align:center;}
.time {font-size:200%;}
/* ボタン */
div.buttons {
/*color:#fff;*/
height:170px;
padding-top:30px;
background:#77C434;
}
.buttons li {
float:left;
width:120px;
text-align:center;
}
.buttons li span{
display:block;
background:#3BB111;
margin:auto;
font-size:150%;
color:#ffffff;
opacity:0.3;
width:100px;
height:50px;
line-height:50px;
border:1px solid #BDE7A2;
border-radius:7px;
box-shadow:1px 1px 4px 0 #4CAA2A, 0px 1px 1px 0 #91D877 inset;
}
.buttons li input{
display:block;
background:#3BB111;
margin:auto;
font-size:150%;
color:#ffffff;
opacity:1.0;
width:100px;
height:50px;
line-height:50px;
border:1px solid #BDE7A2;
border-radius:7px;
box-shadow:1px 1px 4px 0 #4CAA2A, 0px 1px 1px 0 #91D877 inset;
}
</style>
<div class="date-time">
<table>
<tbody><tr>
<td class="year" id="year">2016</td>
<td rowspan="2" class="time" id="time">14:37:34</td>
</tr>
<tr>
<td class="date" id="date">12/07 WED</td>
</tr>
</tbody></table>
</div>
<div class="buttons">
<ul>
<li><input id="syukkin" type="button" value="出勤"></li>
<li><span id="taikin">退勤</span></li>
<li><span id="kyuukei">休憩</span></li>
<li><span id="fukki">復帰</span></li>
</ul>
回答ありがとうございました。
大変助かりました。
何とか応用していきたいと思っています。
ao1962さん
私のほうで試したところ、このHTMLをカスタマイズビューに貼れば一覧できれいにボタンは表示できたので、あとはボタン押下時のJS処理ですね。
なにかあればまたご質問ください！
ところで、日時が201614:37:3412/07 WED のままになっておりますが、
日時をサンプルと同じようにデジタルとして動かす事は可能でしょうか？
ao1962さん
実際の処理を見たほうが早いのでgoogle chromeの開発者ツールを使って以下お試しください。
JSを見る手順
※google chromeの開発者ツールの起動は「F12」です。
①Sourceタグを開く
②ロードされているJSファイルを開く
③選択したJSが開く
デジタル時計は以下で処理しています。参考にしてみてください。
// 1000ミリ秒ごとにset_digitTime()を繰り返す
set_digitTime();
setInterval(set_digitTime, 1000);
// 時計に表示する関数
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.getUTCFullYear();
MM = zero_suppress(dt.getUTCMonth() + 1, 2);
dd = zero_suppress(dt.getUTCDate(), 2);
hh = zero_suppress(dt.getUTCHours() + 9, 2);
mm = zero_suppress(dt.getUTCMinutes(), 2);
ss = zero_suppress(dt.getUTCSeconds(), 2);
$('#year')[0].innerHTML = yyyy;
$('#date')[0].innerHTML = MM + '/' + dd + ' ' + DAY[dt.getUTCDay()];
$('#time')[0].innerHTML = hh + ':' + mm + ':' + ss;
}
回答をここまで詳しく教えてくださいまして、
大変ありがとうございました。
それでも、デジタルがまだ動きません。
原因として、カスタマイズビューでHTMLが次の日時に固定されているからでしょうか？
日時を固定せずに、変数化で現在の日時が表示できるようになれば、動くだろうと思いますが、どうでしょうか？
<tbody><tr>
<td class="year" id="year">2016</td>
<td rowspan="2" class="time" id="time">14:37:34</td>
</tr>
<tr>
<td class="date" id="date">12/07 WED</td>
</tr>