1. ynomura

    No comment

    ynomura
Changes in body
Source | HTML | Preview
@@ -1,182 +1,262 @@
## バスはあと何分?
 電車やバスで通勤している人向けのアプリは結構あるのですが、残念ながら私が利用している岩手県交通に対応しているアプリは無いようでした。
 また、汎用のものでも表示形式が自分が見たいような形式ではなかったので、無いものは自分で作るかぁと思いたち、現在時刻と連動する通勤バスの時刻表を見やすく(個人の感想です)表示するHTMLファイルを作りました。
## なんでWebアプリか
 iOS や Android アプリとして作るのは結構手間なので、Javascript & HTML で自動化する方式にしました。この方式だと1つのHTMLファイルを Dropbox などに置いて、Webブラウザー機能で表示できますので、ネットへのアクセスが出来ない場面でも使えて、アプリを作るより簡単です。
 そのほか、自分のサイトに置いて Safari のブックマークに入れておくことでも利用できますね。
## HTMLソース
 HTMLファイルにJavascriptとstyle定義など全部を入れ込んでいます。乗るバス停3つ分を登録し、表示するようにしていますが、時刻表データは利用者用に簡単に変更できるように作ったつもりです。通常の通勤で利用するバス停、出張などで利用する駅前のバス亭、市内の飲み会などで利用するバス停といった感じで、3つあれば十分かと。(ソースは短いので簡単に変更できるでしょう)
 公開しているソースに書き込まれている時刻表データは現在の盛岡市内の路線バスのデータです。(バス停は「盛岡バスセンター」、「盛岡駅前」、「盛岡中庸郵便局前」の3つのバス停から松園方面に発車する時刻を「盛岡市バスロケーションシステム」を使って調べて、A、Bの2つのコースを組み合わせたものになっています。)
``` html:nextBus.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" >
<title>Next Bus</title>
<script type="text/javascript">
<!--
/*
*** バスの時刻表データを「hhmm」の形式で *****
- *** 先頭の項目にはバス停の名称をセット *****
+ *** 先頭の要素にはバス停の名称をセット *****
*/
-var table0 = [
+var busTables = [
+ // 一つ目の時刻表
+ [
+
'盛岡バスセンター',
+ 0712, 0743, 0758,
+ 0813, 0828, 0843, 0858,
+ 0913, 0915, 0917, 0928, 0948,
+ 1003, 1015, 1023, 1043,
+ 1103, 1123, 1143,
+ 1203, 1223, 1243,
+ 1303, 1315, 1323, 1343,
1455, 1515, 1532, 1552,
1612, 1632, 1652,
1712, 1717, 1722, 1727, 1733, 1738, 1743, 1748, 1753,
1803, 1813, 1823, 1833, 1843, 1853,
1903, 1913, 1923, 1933, 1943,
2012, 2032, 2052,
2122, 2330
-];
-var table1 = [
+ ],
+ // 二つ目の時刻表
+ [
'盛岡中央郵便局前',
- 1459,
+ // これ以前は本数が多いので省略
+ 1001, 1019, 1021, 1039, 1041, 1059,
+ 1101, 1119, 1121, 1139, 1141, 1159,
+ 1201, 1219, 1221, 1239, 1241, 1259,
+ 1301, 1319, 1321, 1339, 1341, 1359,
+ 1401, 1419, 1421, 1439, 1441, 1459,
1501, 1519, 1521, 1538, 1539, 1558, 1559,
1618, 1619, 1638, 1639, 1658,
1702, 1712, 1718, 1722, 1723, 1728, 1732, 1733, 1739, 1742, 1744, 1749, 1752, 1754, 1759,
1802, 1809, 1812, 1819, 1822, 1829, 1832, 1839, 1842, 1849, 1859,
1902, 1909, 1912, 1922, 1929, 1932, 1939, 1942, 1949, 1959,
2018, 2019, 2038, 2039, 2058, 2059,
2128, 2129, 2159,
2229, 2259,
2345
-];
-var table2 = [
+ ],
+ // 三つ目の時刻表
+ [
'盛岡駅前',
- 1512, 1552,
- 1632,
+ // これ以前は本数が多いので省略
+ 0902, 0912, 0922, 0932, 0952,
+ 1012, 1032, 1052,
+ 1112, 1132, 1152,
+ 1212, 1232, 1352,
+ 1312, 1332, 1352,
+ 1412, 1432, 1452,
+ 1512, 1532, 1552,
+ 1612, 1632, 1655,
1705, 1725, 1745, 1755,
1815, 1835, 1855,
1915, 1935,
2012, 2052,
2152,
2222, 2252,
2340
-];
-
-var busTables = [table0, table1, table2];
+ ],
+ // 四つ目の時刻表
+ [
+ '岩手大学前',
+ // これ以前は本数が多いので省略
+ 1003, 1005, 1023, 1025, 1043, 1045, 1052,
+ 1103, 1105, 1123, 1125, 1143, 1145, 1152,
+ 1203, 1205, 1223, 1225, 1243, 1245, 1252,
+ 1303, 1305, 1323, 1325, 1343, 1345, 1352,
+ 1403, 1405, 1423, 1425, 1443, 1445, 1452,
+ 1503, 1505, 1523, 1525, 1542, 1543,
+ 1602, 1603, 1622, 1623, 1642, 1643,
+ 1702, 1706, 1716, 1722, 1726, 1727, 1732, 1736, 1737, 1743, 1746, 1748, 1753, 1756, 1758,
+ 1803, 1806, 1813, 1816, 1623, 1826, 1833, 1836, 1843, 1846, 1853, 1856,
+ 1903, 1906, 1913, 1916, 1923, 1926, 1933, 1936, 1943, 1946, 1953,
+ 2003, 2022, 2023, 2042, 2043,
+ 2102, 2103, 2132, 2133,
+ 2203, 2233,
+ 2303, 2348
+ ]
+]; // 時刻表全体の宣言終了
+
/* ************* バス時刻表の設定はここまで ******************* */
function hms(tim) {
if (tim == '') return ' ';
return ('00' + Math.floor(tim / (60 * 60))).slice(-2) + ':' + ('00' + Math.floor((tim % (60 * 60)) / 60)).slice(-2) + ':' + ('00' + (tim % 60)).slice(-2);
};
function hm(tim) {
if (tim == '') return ' ';
return ('00' + Math.floor(tim / (60 * 60))).slice(-2) + ':' + ('00' + Math.floor((tim % (60 * 60)) / 60)).slice(-2);
};
function hm2Time(hm) {
return (Math.floor((hm / 100)) * (60 * 60) + (hm % 100) * 60);
}
function clock() {
document.getElementById("bus_stop").innerHTML = busTables[tableNo][0];
var now = new Date();
var nowTime = (now.getHours() * 60 * 60) + (now.getMinutes() * 60) + now.getSeconds();
var tbl = busTables[tableNo];
var bTime, nbTime, nnbTime = '';
for (var i = 1; i < tbl.length; i++) {
var bt = tbl[i];
if (bt > (now.getHours() * 100 + now.getMinutes())) {
bTime = hm2Time(bt);
if ((i + 1) < tbl.length) {
nbTime = hm2Time(tbl[i + 1]);
if ((i + 2) < tbl.length) {
nnbTime = hm2Time(tbl[i + 2]);
};
};
break;
}
};
lTime = bTime - nowTime;
document.getElementById("clock_time").innerHTML = hms(nowTime);
document.getElementById("bus").innerHTML = hm(bTime);
document.getElementById("timeLeft").innerHTML = hms(lTime);
document.getElementById("nbus").innerHTML = hm(nbTime);
document.getElementById("nnbus").innerHTML = hm(nnbTime);
};
-// 上記のclock関数を1000ミリ秒ごと(毎秒)に実行する
function startClock() {
+ // 時刻表を切り替えるボタンをHTMLに追加する
+ var div_button = document.createElement("div");
+ var btn_element ="";
tableNo = 0;
for (i = 0; i < busTables.length; i++) {
- document.getElementById("btn" + i ).value = busTables[i][0];
+ btn_element = btn_element + ' <input type="button" value="' + busTables[i][0] + '" onclick="';
+ btn_element = btn_element + 'tableNo = ' + i + ';"/>';
+ div_button.innerHTML = btn_element;
};
+ document.getElementById("btn").appendChild(div_button);
+
+ // 上記のclock関数を1000ミリ秒ごと(毎秒)に実行する
setInterval(clock, 1000);
};
-->
</script>
</head>
<body onLoad="startClock()">
<div id="clock_frame" style="color: #00ff00; background-color: black; font-family : Courier,'MS Pゴシック',monospace ;">
<br >
 現在時刻:<span id="clock_time" style="color: #ffffff"> </span>
</div>
<div id="bus_area" style="color: #00ff00; background-color: #000000; font-family : Courier,'MS Pゴシック',monospace; font-size: large;">
<span id="bus_stop" style="color: #ffffff"> </span>
<table>
<tr>
<td>今度のバス</td><td><span id="bus" style="color: #ffffff"> </span></td>
<td>(出発まで・・ <span id ="timeLeft" style="color: #ffffff"> </span>)</td>
</tr>
<tr><td>次のバス</td><td><span id="nbus" style="color: #ffffff"> </span> </td></tr>
<tr><td>その次のバス</td><td><span id="nnbus" style="color: #ffffff"> </span> </td></tr>
</table>
- <input type="button" id="btn0" value="0" onclick="tableNo = 0;"/>
- <input type="button" id="btn1" value="1" onclick="tableNo = 1;"/>
- <input type="button" id="btn2" value="2" onclick="tableNo = 2;"/>
+ <br />
+ <div id="btn">
+ <!--
+ ここに時刻表を切り替えるボタンが追加される
+ -->
+ </div>
+ <br />
</div>
</body>
</html>
```
## ちょっと解説
 バス時刻表の修正はこの部分です。
 形式は、1つのバス停の時刻表を配列で登録します。
配列の先頭要素にバス停の名前を入れます。後は、時刻を hhmm と数字4桁で続けます。
```javaScript:
-var table0 = [
+var busTables = [
+ // 一つ目の時刻表
+ [
+
'盛岡バスセンター',
- 1455, 1515, 1532, 1552,
-<省略>
-];
-var table1 = [
+ 0712, 0743, 0758,
+ <省略>
+ 2122, 2330
+ ],
+ // 二つ目の時刻表
+ [
'盛岡中央郵便局前',
- 1459,
-<省略>
-];
-var table2 = [
+ // これ以前は本数が多いので省略
+ 1001, 1019, 1021, 1039, 1041, 1059,
+ <省略>
+ 2345
+ ],
+ // 三つ目の時刻表
+ [
'盛岡駅前',
- 1512, 1552,
-<省略>
-];
-
-var busTables = [table0, table1, table2];
+ // これ以前は本数が多いので省略
+ 0902, 0912, 0922, 0932, 0952,
+ <省略>
+ 2340
+ ],
+ // 四つ目の時刻表
+ [
+ '岩手大学前',
+ // これ以前は本数が多いので省略
+ 1003, 1005, 1023, 1025, 1043, 1045, 1052,
+ <省略>
+ 2203, 2233,
+ 2303, 2348
+ ]
+]; // 時刻表全体の宣言終了
```
- 最後の1行は3つの時刻表の配列を更に1つの配列にまとめています。
+ 一つのバス停(路線)を配列で定義したものを二次元配列としてまとめています。
### バス停の数の変更
- 上記の時刻表の部分と、以下の部分(ボタン定義)を変更します。
+ 現ソースでは4つの時刻表データがありますが、この個数は自由に変更できます。
+上記の時刻表の部分のみを変更します。)
+
+時刻表の個数から自動的に、時刻表切り替えボタンを生成しています。(ソースの以下の部分)
-```html:
- <input type="button" id="btn0" value="0" onclick="tableNo = 0;"/>
- <input type="button" id="btn1" value="1" onclick="tableNo = 1;"/>
- <input type="button" id="btn2" value="2" onclick="tableNo = 2;"/>
+```javascript:
+ // 時刻表を切り替えるボタンをHTMLに追加する
+ var div_button = document.createElement("div");
+ var btn_element ="";
+ tableNo = 0;
+ for (i = 0; i < busTables.length; i++) {
+ btn_element = btn_element + ' <input type="button" value="' + busTables[i][0] + '" onclick="';
+ btn_element = btn_element + 'tableNo = ' + i + ';"/>';
+ div_button.innerHTML = btn_element;
+ };
+ document.getElementById("btn").appendChild(div_button);
```