nyanco! ブログ

nyanco! ブログ

ほぼ日刊ペースで、主にIT・PCネタ・便利グッズ・猫などについてお役立ちの精神で書き連ねていく雑記ブログです。

WEBアプリ「オリジナル通勤タイマー」のご紹介!

通勤タイマーのWEBアプリってないのかにゃ〜?

という疑問にズバリお答えします。  

とっちゃん@nyanco! です。

今回は、htmlの知識があればすぐに作れちゃう「オリジナル通勤タイマー」のご紹介です!

「通勤タイマー」アプリ、サービス終了…

通勤で使う電車の発車時刻がカウントダウンで表示される、Yahooの「通勤タイマー」というiPhoneアプリを便利に使ってたのですが、サービス終了しちゃいまして。

代わりに「Yahoo乗換案内」というアプリのウィジットで似たようなことができたのでそれを使ってたのですが、不満がありました。

動作がモッサリでとにかく表示が遅い!
スマホをスリープから立ち上げてウィジットを表示させるのが微妙に面倒!

こういった理由から代替サービスをずっと探していました。

できればパソコンでサクッと表示されるものがあれば…と思って探していたら、これ以上ないものを発見しました!!

オリジナルの通勤タイマーが作れる!

なんと、htmlファイル一つでオリジナル通勤タイマーWEBアプリが作れます!

▼見た目はこんな感じで超シンプル。CSSが書ければ見た目も自由に変えれます。

▼そのコードを公開してくださっている神のようなお人のサイトはこちら。
qiita.com

バスの時刻表として紹介されてますが、電車の時刻表としてももちろん使えます。

作り方

  1. 先ほどのページにある「nextBus.html」というコードをまるまるコピー。
  2. 新規テキストファイルを作成し、先程コピーしたコードをペースト。
  3. 「時刻表」「駅名」を必要に応じて変更し、htmlファイルとして保存で完成!
  4. あとはお好きなブラウザで閲覧するだけ!

自分で時刻表を登録するのが手間と言えば手間ですが、数字を編集するだけなのでやることは簡単です。

手入力が面倒なら、時刻表が見れるサイトに行ってテキストをコピーして適性な形に整形してペーストするとあっという間です!
正規表現を使えば簡単に整形できます!)

時刻表も複数登録できて、切替ボタンは時刻表の数だけ自動生成されます!

使い勝手のほどは?

ちなみに私は職場の最寄り駅の時刻表を「平日」「土日」の2種類登録して使ってます。

そろそろ帰ろうかな~という時にパソコンでサクッと確認して、ちょうど駅のホームに着けるくらいのタイミングで退社すると、ホームでの無駄な待ち時間が発生しないのでかなり快適です。

今は自分のパソコンだけで確認できれば十分なので、htmlファイルをローカルに設置してブラウザでブックマークして見てますが、静的ページのホスティングサービスを使えばスマホからでもどこからでも見れるようになってさらに便利ですね!

ほんとに、このような有用なコードを無償で公開してくださっていることに感謝です。

今回は以上となります。
最後まで読んでいただきましてありがとうございました!
それではまた〜✧٩(ˊωˋ*)و✧