2ヶ月前に投稿

鉄道遅延情報のJSONをテーブル(表)で表示してみた

この記事は約 6 分で読めます。

4.5

JSONについて調べていると、
鉄道comのRSSを集計して、
遅延ちえんしている電車を返すJSONを
提供しているサイトを発見しました。

JSONの発信元

上記、鉄道遅延ちえん情報のjsonの
発信元は何なのかな?
と思い調べたら「rti技研」となり、
しゃべるだけで家電とかを操作できる
ホームコントローラーを
作っている会社のようです。

この会社が何故「鉄道遅延ちえんAPI」を
発信するのか経緯は不明です。

遅延情報の取得

JavaScriptでJSONを外部から取得する際には
fetch() 命令が使えるそうです。

fetch() を用いた
JavaScriptが以下になります。

let url = "https://tetsudo.rti-giken.jp/free/delay.json";
fetch(url).then(function (response) {
  return response.json();
}).then(function (traindata) {
  for (let i = 0; i < traindata.length; i++) {
    const name = traindata[i].name;
    const company = traindata[i].company;
    const date = new Date(Number(traindata[i].lastupdate_gmt) * 1000);
    const day_week = ['日', '月', '火', '水', '木', '金', '土'];
    const day = day_week[date.getDay()];
    const lastupdated = date.getFullYear()
    + '/' + ('0' + (date.getMonth() + 1)).slice(-2)
    + '/' + ('0' + date.getDate()).slice(-2)
    + '【' + day + '】'
    + ' ' + ('0' + date.getHours()).slice(-2)
    + ':' + ('0' + date.getMinutes()).slice(-2)
    + ':' + ('0' + date.getSeconds()).slice(-2)
    + ' (JST)';
    const row = document.getElementById('delay_info').insertRow();
    row.insertCell().textContent = i + 1;
    row.insertCell().textContent = name;
    row.insertCell().textContent = company;
    row.insertCell().textContent = lastupdated;
  }
});

繰り返し処理

繰り返し処理にはfor文を使います。

for ([初期値]; [条件式]; [増減値])

初期値:繰り返す回数の初期値
条件式:繰り返しを継続する条件
増減値:「初期値」を増減する式

初期値:let i = 0;
条件式:i < 10;
増減値:i++;

常に「i++」と記述しておけば間違いないそうです。

この記事では配列を利用したプログラムで
書いています。

for (let i = 0; i < traindata.length; i++) {

条件式のところでtraindata.length;
書いていますが、length
配列の長さを取得できるメソッドだそうです。

日付情報の取得と設定

これは解らなくて
大変でした。

鉄道遅延ちえん情報を返すjsonの
構造は以下のようになっています。

  1. name:路線名
  2. company:鉄道会社名
  3. lastupdate_gmt:更新日時 (UNIX time)
  4. source:情報元

この
更新日時 (lastupdate_gmt)の
UNIX timeが曲者くせもので、

[{"lastupdate_gmt":1634228655}]

こんなの
何だか分かんないじゃん!
てか「UNIX time」って何だよ!

「UNIX時間」とは、
UTCで「1970年1月1日午前0時0分0秒」を基準として、
そこからの経過秒数で日時を表現した日時が
「UNIX時間」です。
UTCは「日本時間から9時間引いた時間」です。
日本語では「協定世界時」と表現されます。

この「UNIX時間」を
日本標準時に変換の仕方に
悩みました。

UNIXタイムスタンプは
通常「 1970年1月1日0時0分0秒 」からの秒数で表されます。
Date (JavaScript)は
通常ミリ秒が使われていて1000倍が必要です。

「ミリ秒」ではなく「秒」という
記事もあったが、
とにかく1000で掛けるのが
ポイントのようです。
const date = new Date(Number(traindata[i].lastupdate_gmt) * 1000);

調べに、調べてたどり着いた
結果が上記コードになります。

Number使用するのは、
なるほど大変勉強になりました。

行と列の追加

table要素に行 (tr要素)を追加するには、
insertRow() が使用できます。
また、
table要素にある行 (tr要素)に
列 (td要素)を追加するには、
insertCell() を使用します。

insertRow()
table要素だけで実行した場合、
暗黙的にtbody要素が生成された状態で、
そのtbody要素に追加され、
thead要素が存在する場合、
thaed要素に追加されるようなので、
以下のようなHTMLにしました。

HTML

<table id="delay_info">
  <thead>
    <tr>
      <th>路線数</th>
      <th>路線名</th>
      <th>鉄道会社名</th>
      <th>最終更新日時</th>
    </tr>
  </thead>
</table>

結果

鉄道遅延ちえん情報
路線数 路線名 鉄道会社名 最終更新日時
(参考)
1.鉄道遅延情報JSON : https://rti-giken.jp/fhc/api/train_tetsudo/
2.テーブル装飾CSSデザイン : https://ayaito.net/webtips/css/5876/
3.見出し装飾CSSデザイン : https://pulpxstyle.com/heading-design/

参考文献

最後に

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました

鉄道遅延情報のJSONをテーブル(表)で表示してみた