駅でよく、電車の先発・次発の行先や発車時刻が表示されているのありますよね。あれをですね、webで見れるようにできないかということです。いちいち駅ホームまで足を運ばなくても、次の列車をスマホで確認できれば楽かな〜と思って作ってみました。

東京を中心として様々な鉄道会社が参加している、東京公共交通オープンデータチャレンジというのがあります。試験運用ですが、無料で列車運行に関する情報をAPIを使うことができます。

https://tokyochallenge.odpt.org/

こちらのデータを使って、作っていきます。

最終的にはこんな形に。（こちらはイラストのみ）
機能としては、路線・駅ごとに、方面ごとに先発 次発 次々発の列車の到着残り時間、種別、行先を表示させようというものです。
ついで、駅と路線名で検索できる機能と、列車遅延を通知する機能、そして方面を主要駅ごとに分かりやすく表示してくれる機能を設けました。
デザイン的には、駅ごとのナンバリングはなくとも、路線シンボルやラインカラーで分かりやすくしたいですね。

さて、作っていきます。おおきく、3ステップで作成できます。

１　今日の曜日を判定する

平日と土日で、ダイヤが異なるためです。注意しなければならないのは、土曜日0時以降〜始発と、月曜日の0時以降〜始発は、それぞれ平日、休日ダイヤとなることです。なので、昨日の曜日、今日の曜日を出して、午前0-3時なら昨日の曜日を、それ以外なら今日の曜日を読み込むような書き方をしています。

//平日土日の判定
$day = date('w');
$holiday_json = file_get_contents('https://holidays-jp.github.io/api/v1/date.json');
$holiday = json_decode($holiday_json, true);

//今日の平日・休日判定
if(($day == 0) || ($day == 6) || (array_key_exists(date("Y-m-d"), $holiday))){
 $day_today = ".SaturdayHoliday";
}else{
 $day_today = ".Weekday";
}

//昨日の平日・休日判定
if(($day == 0) || ($day == 1) || (array_key_exists(date("Y-m-d"), $holiday))){
 $day_yesterday = ".SaturdayHoliday";
}else{
 $day_yesterday = ".Weekday";
} #echo  date('Y-m-d', strtotime('-1 day'));

//ダイヤグラムの判定
if(date('H')<3){
 $calendar = $day_yesterday;
}else{
 $calendar = $day_today;
}​

２　時刻表データを読み込む

鉄道会社、路線、駅、曜日のデータがあれば、APIの仕様に従ってパラメーターを書いていくと、方面ごとに、１日分の時刻表（発車時刻、種別、行先など）が取得できます。そして、発車時刻から現在時刻との差分を計算します。

３　表示パーツを揃える

単にHTML文字だけで表示させても面白くないので、よりみやすくするために、路線シンボル、ラインカラー、列車種別のパーツを用意します。画像にすると、表現内容がより自由になるので、面白いですね。

あとはファイル名と路線や種別IDと紐づけておけば、呼び出すだけ。

完成したものはこちら。

https://twitter.com/KURO40918632/status/1321789290800508930