電車の降り過ごしを撲滅したい
みなさん電車に乗っていて「うっかり降り過ごしてしまった」なんて経験ありませんか？
私は結構あります…
・通勤中の満員電車で駅の看板、社内のモニターが見えず、気づいたら降りたい駅を過ぎていた。
・帰りの電車で読書に集中しすぎて最寄り駅を過ぎていた。
目的地に近づくと知らせてくれる天の声のようなWebアプリが欲しい！
＜イメージ＞
使用環境・ライブラリ
・CodePen
・Vue.js
・位置情報API(Geolocation)
・Netlify
アイデア
①．スマートフォンやノートPC等のモバイル端末から位置情報を取得する。
②．予め自分が降りたい駅をアプリに登録しておき、１駅前になったらアナウンスが届くようにする。
実装①：位置情報の取得
手持ちのモバイル端末から位置情報を取得する。
位置情報API(Geolocation)を用いて現在位置の経度と緯度を取得することができる。
See the Pen 【PDS】スマホセンサを試してみる (位置情報編) by zawachin_2024 (@k-tanizawa) on CodePen.
実装②：目的地まで距離を計算して、１駅前になったらアナウンスをさせる。
実装①で取得できるようにした現在地の緯度・経度と目的地の緯度・経度から距離を計算する。（地球を半径 6,371kmの球体だと思って計算する。）
目的地を有楽町駅として１駅前でアナウンスが届くようにする。
現在位置と目的地の距離を計算して以下のようなアナウンスを表示する。
・今だ！降りるぞ！←１駅前になった時
・まだ大丈夫じゃ
１駅前の目安は有楽町線の全長（28.3km）と全駅数（24駅）から1.179km(≒28.3km / 24)と概算する。
また、始発から終点まで50分程度（１駅あたり２分強）なので、余裕をもって１分間隔でアナウンスを送るようにする。
See the Pen 最寄りの１駅前でアナウンスしてくれる天の声 by zawachin_2024 (@k-tanizawa) on CodePen.
実際に作ったWebアプリ
ぜひ使ってみてください！
https://marvelous-pika-3046ea.netlify.app/
その他のアイデア
・目的地をもっと手軽に指定できるようにしたい。
・アナウンスを画面表示だけでなく、バイブレーションやメロディーで知らせる。
まだ、実際に使えていないので、上記の追加機能を実装して、通勤中に使ってみたい。
今度はもっと実用場面に沿った機能を追求したアプリを作ってみたい。
参考資料