jQueryMobileを使って、ランニング記録と距離を設定すれば1km、3km、5km、10km、20km、42.195km各距離ごとの参考時間がわかるプチアプリを作った。
わたしは時々ランニングをする。
走った後、今回のペースでフルマラソンを走ればどれくらいの記録になるんだろう？とか思ったりする。ちょっと知りたいなぁ、ということがあるので、このアプリを作った。
ただ、わたしはまだまともにフルマラソンを走ったことが無いが．．．
オフラインでも動作するようにキャッシュマニフェストを設定してある。
iPhone4で動作確認した。
HTML部分
<!DOCTYPE html>
<html manifest="runCalc.appcache">
<head>
<meta charset="utf-8">
<!-- for iPhone -->
<meta name="viewport" content="width=device-width ,initial-scale=1.0 ,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/> <!--フルスクリーンモード-->
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<link rel="apple-touch-icon" href="icon.png" /> <!--ホームアイコンの設定-->
<!-- /for iPhone -->
<!-- for jQuery -->
<link rel="stylesheet" href="lib/jquery.mobile-1.3.2.min.css">
<script src="lib/jquery.js"></script>
<script src="main.js"></script>
<script src="lib/jquery.mobile-1.3.2.min.js"></script>
<!-- /for jQuery -->
<title>ラン計算</title>
<style>
p{
font-family: 'メイリオ', Osaka;
}
strong{
font-weight: 900;
font-size:2em;
}
</style>
</head>
<body>
<!-- メイン -->
<section id="index" data-role="page" data-title="ラン計算">
<div data-role="header" data-position="fixed" data-theme="b">
<h1>ラン計算</h1>
<a href="#info" class="ui-btn-left" data-transition="fade" data-icon="info" data-iconpos="notext">Info</a>
</div>
<div data-role="content" data-theme="c">
<div data-role="fieldcontain">
<label for="distance">走った距離：</label>
<select id="distance" onchange="runCalc()"></select>
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>タイム：</legend>
<label for="select-choice-hour">時間</label>
<select name="select-choice-hour" id="select-choice-hour" onchange="runCalc()"></select>
<label for="select-choice-minute">分</label>
<select name="select-choice-minute" id="select-choice-minute" onchange="runCalc()"></select>
<label for="select-choice-second">秒</label>
<select name="select-choice-second" id="select-choice-second" onchange="runCalc()"></select>
</fieldset>
</div>
<div id="outdata" data-role='fieldcontain'></div>
</div>
<footer data-role="footer" data-position="fixed" data-theme="b">
Copyright 2014 torisky.com
</footer>
</section>
<!-- 情報 -->
<section id="info" data-role="page" data-title="Info">
<header data-role="header" data-position="fixed" data-theme="b">
<a href="#index" data-transition="fade" data-icon="home" data-iconpos="notext">戻る</a>
<h1>Info</h1>
</header>
<div data-role="content" data-theme="c">
<h2>ラン計算</h2>
<p> ランニング記録のペース計算用に作りました。<br>
これで計算したからといって、ランニング記録がよくなるわけでもありません ;)</p>
<p>風のように走りたいものです</p>
</div>
<footer data-role="footer" data-theme="b">
Copyright 2014 torisky.com
</footer>
</section>
</body>
</html>
JavaScript部分
/* main.js */
var distance = ["1", "3", "5", "10", "20", "42.195"]; // 単位（km）
// km毎のラップを計算する
var getLap = function(t, d, km){
t = (t / d) * km;
var hours = "" + (t/36000|0) + (t/3600%10|0);
var minutes = "" + (t%3600/600|0) + (t%3600/60%10|0);
var seconds = "" + (t%60/10|0) + (t%60%10);
var lap = hours + "時間" + minutes + "分" + Math.floor(seconds) + "秒";
return lap;
};
// ラン計算
var runCalc = function(){
// 走った距離を取得
var runDistance = Number($("#distance").val());
// タイムを取得
var runtimeHour = Number($("#select-choice-hour").val());
var runtimeMinute = Number($("#select-choice-minute").val());
var runtimeSecond = Number($("#select-choice-second").val());
// トータルタイム（秒）
var totalSeconds = (runtimeHour * 60 * 60) + (runtimeMinute * 60) + runtimeSecond;
// 時速を計算
var kmH = runDistance / (totalSeconds / (60 * 60)) ;
// 表示用タグ作成
var tag = "";
tag += "<h2>参考データ</h2>";
tag += "<ul data-role='listview' data-inset='true'>";
tag += "<li style='color: red'>時速 " + Math.round(kmH*10) / 10 + "km/h</li>";
tag += "<li>100mのラップ " + getLap(totalSeconds, runDistance, 0.1) + "</li>";
// ラップ
for(var i=0; i<distance.length; i++){
var style = "";
if(runDistance == distance[i]) style="color: red";
tag += "<li style='" + style + "'>" + distance[i] + "kmのラップ " + getLap(totalSeconds, runDistance, distance[i]) + "</li>";
}
tag += "</ul>";
// 「00時間」や「00分」を削除
tag = tag.replace( /00時間/g, "");
tag = tag.replace( /00分/g, "");
$("#outdata").html(tag).trigger("create");
};
// 初期画面作成
$(function(){
// セレクタ生成（走った距離）
var tag = "";
for(var i=0; i<distance.length; i++){
if(i == 2){
tag += "<option value='" + distance[i] + "' selected>" + distance[i] + "km</option>";
continue;
}
tag += "<option value='" + distance[i] + "'>" + distance[i] + "km</option>";
}
$("#distance").html(tag);
// セレクタ生成（タイム 時・分・秒）
var selectId = ["#select-choice-hour", "#select-choice-minute", "#select-choice-second"];
var labelTime = ["時間", "分", "秒"];
for(var i=0; i<selectId.length; i++){
var tag = "";
for(var j=0; j<60; j++){
if(j == 0){
tag += "<option value='" + j + "'>" + labelTime[i] + "</option>";
}
tag += "<option value='" + j + "'>" + j + labelTime[i] + "</option>";
}
$(selectId[i]).html(tag);
}
});
コメント