22
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

位置や時刻によって表示が変わるオレオレ時刻表

22
Last updated at Posted at 2025-12-14

はじめに

時刻表好きですか? ですよね、みんな好きじゃないよね。わかるー(ギャル風)。

時刻表の9割はノイズでできています。正確に言うと、これから交通機関に乗ろうとして時刻表を見るとき、そこに書かれている9割は今見る必要のない情報です。
現在時刻以前の発車予定は不要だし、出勤時に帰宅方向の情報は不要だし、平日に休日ダイヤは不要です。
駅のホームの発車標ディスプレイはなかなかイケてますが、それでも行先が混在しているとノイズが混ざります。自分の目的地が印旛日本医大方面かどうかなんて本質的な問いではないはずです。

作ったアプリ

そんなわけで、今オレに必要な情報だけ表示する時刻表アプリ「オレタイム」をつくりました。時間帯と位置情報から自分が知るべき発車時刻情報を表示するアプリです。
https://github.com/aike/oretime

たとえばあなたの自宅が幌平橋で、札幌で乗り換え、野幌の職場へ通勤しているとします。

  1. 朝8時に自宅でこのアプリを起動すると、幌平橋から札幌方面の直近の発車予定時刻が表示されます
  2. その後、あなたの乗った電車が札幌に近づいたときにこのアプリを見ると、札幌から野幌方面の直近の発車予定時刻が表示されます
  3. 仕事を終えて夕方18時に職場でこのアプリを起動すると、野幌から札幌方面の直近の発車予定時刻が表示されます
  4. 帰宅途中札幌駅近くでこのアプリを起動すると、札幌から幌平橋方面の直近の発車予定時刻が表示されます

このように、現在時刻と現在の位置情報から必要な情報を推測して表示します。

対象ユーザー

対象ユーザーはオレです。オレオレ。オレだけのためにオレが作りました。
もう少し広げると、以下の条件を満たす人はこのプログラムを自分用にカスタマイズすると便利に使えるかもしれません。

  • ほぼ毎日通勤・通学がある
  • 通勤・通学経路に乗換がある
  • 交通機関の本数はすぐに来るほど多くなく、完璧に記憶できるほど少なくない

つまり、ちょっとした地方都市で通勤・通学に1時間以上かかるような人がターゲットです。狭いですね。在宅勤務の人は紅茶でも入れて高みの見物をしていてください。

使った技術

  • 生HTML
  • 直書きCSS
  • 直書きJavaScript
  • 直書きテスト
  • GeoLocation API
  • 人力時刻表転記

単一のhtmlファイルにプログラムもCSSもテストも全部入れています。自宅と勤務先の最寄り駅が推測できてしまう情報が含まれるため、自分だけの秘密のサーバやローカル環境で動かしたいですよね。

利用中に場所を移動しても自動更新はしません。 信頼と実績のリロードボタンです。したい人はスマホのバッテリーと相談の上、タイマーで自動更新するようカスタマイズしてください。

時刻表情報について

この手のアプリは時刻表情報を自動更新してくれると大変ありがたいのですが、いまどきの電車やバスの時刻表を見たことがある人は、それがとてつもなく難しいことを理解できると思います。
ですからこれはクソアプリだ、と開き直ってしまいましょう。そうすれば泥臭いスクレイピングや複雑な条件分岐と向き合う必要もありません。信頼と実績の人力時刻表転記です。
乗換駅はなくても、2つ以上あってもリストに加えるだけで正しく計算されます。

ん、土日ダイヤ?土日は時刻表を見ませんよね。

index.htmlの.js
    // 駅名リスト
    const st = ["幌平橋", "札幌", "野幌"];
    // 駅の緯度経度リスト
    const stationCoords = {};
    stationCoords[st[0]] = { lat: 43.04040433914205, lon: 141.35574742753303};
    stationCoords[st[1]] = { lat: 43.06878376429499, lon: 141.35076610764554 };
    stationCoords[st[2]] = { lat: 43.09235380590427, lon: 141.5295765266777 };
    // 駅の時刻表リスト
    const timetables = {"AM": {}, "PM": {}};
    // 駅0から駅1への時刻表 (午前)
    timetables["AM"][st[0] + "_" + st[1]] = [
      "06:11","06:21","06:31","06:41","06:49","06:56",
      "07:03","07:09","07:15","07:20","07:24","07:28","07:32","07:36","07:41",
                 :
    ];
    // 駅1から駅2への時刻表 (午前)
    timetables["AM"][st[1] + "_" + st[2]] = [
      "06:00","06:16","06:35","06:57",
                 :
    ];
    // 駅2から駅1への時刻表 (午後)
    timetables["PM"][st[2] + "_" + st[1]] = [
      "12:02","12:21","12:36",
                 :
    ];
    // 駅1から駅0への時刻表 (午後)
    timetables["PM"][st[1] + "_" + st[0]] = [
      "12:05","12:12","12:19","12:26","12:33","12:40","12:47","12:54",
                 :
    ];

おしまい。

22
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
22
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?