1. ynomura

    Posted

    ynomura
Changes in title
+次のバスの発車時刻を表示・カウントダウンする HTML & Javascript の Webアプリ
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,187 @@
+## バスはあと何分?
+ 電車やバスで通勤している人向けのアプリは結構あるのですが、残念ながら私が利用している岩手県交通に対応しているアプリは無いようでした。
+ また、汎用のものでも表示形式が自分が見たいような形式ではなかったので、無いものは自分で作るかぁと思いたち、現在時刻と連動する通勤バスの時刻表を見やすく(個人の感想です)表示するHTMLファイルを作りました。
+
+## なんでWebアプリか
+ iOS や Android アプリとして作るのは結構手間なので、Javascript & HTML で自動化する方式にしました。この方式だと1つのHTMLファイルを Dropbox などに置いて、Webブラウザー機能で表示できますので、ネットへのアクセスが出来ない場面でも使えて、アプリを作るより簡単です。
+ そのほか、自分のサイトに置いて Safari のブックマークに入れておくことでも利用できますね。
+例えばこんな感じ http://ynomura.com/nextBus.html
+
+## 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 = [
+ '盛岡バスセンター',
+ 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,
+ 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,
+ 1705, 1725, 1745, 1755,
+ 1815, 1835, 1855,
+ 1915, 1935,
+ 2012, 2052,
+ 2152,
+ 2222, 2252,
+ 2340
+];
+
+var busTables = [table0, table1, table2];
+/* ************* バス時刻表の設定はここまで ******************* */
+
+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];
+ 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]);
+ } else {
+ nnbTime = '';
+ };
+ } else {
+ nbTime = '';
+ nnbTime = '';
+ };
+ 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() {
+ tableNo = 0;
+ for (i = 0; i < busTables.length; i++) {
+ document.getElementById("btn" + i ).value = busTables[i][0];
+ };
+ 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;"/>
+ </div>
+
+
+</body>
+
+</html>
+```
+
+## ちょっと解説
+ バス時刻表の修正はこの部分です。
+ 形式は、1つのバス停の時刻表を配列で登録します。
+配列の先頭要素にバス停の名前を入れます。後は、時刻を hhmm と数字4桁で続けます。
+
+```javaScript:
+var table0 = [
+ '盛岡バスセンター',
+ 1455, 1515, 1532, 1552,
+<省略>
+];
+var table1 = [
+ '盛岡中央郵便局前',
+ 1459,
+<省略>
+];
+var table2 = [
+ '盛岡駅前',
+ 1512, 1552,
+<省略>
+];
+
+var busTables = [table0, table1, table2];
+
+```
+ 最後の1行は3つの時刻表の配列を更に1つの配列にまとめています。
+
+### バス停の数の変更
+ 上記の時刻表の部分と、以下の部分(ボタン定義)を変更します。
+
+```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;"/>
+
+```