12
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【個人開発】名鉄名古屋駅の乗車位置が検索できるwebアプリケーションを開発した話

Last updated at Posted at 2023-09-14

1.アプリケーションの概要

本アプリケーションは名鉄名古屋駅(名古屋鉄道)の乗車位置表示をユーザーが入力した駅名に応じて表示し、適切な乗車位置表示を案内するものです。
諸般の事情により現在公開を休止しています。2024/10/1現在
乗車位置チェッカーof名鉄名古屋駅

名鉄名古屋駅を初めて利用するまたはそれに相当する方を対象ユーザーとしています。
IMG_7008.JPG

2.開発した背景

名鉄名古屋駅は上下線合わせて2本の線路から多数の方面へ走る列車が発着します。そのため行き先に応じて乗車位置表示が色分けされています。
適切な乗車位置で列車の到着を待てば予定の列車に乗車することができますが、探す方法は駅の電光掲示板を確認するか駅員に問い合わせる方法に限られていました。
そこでスマートフォンからスムーズに乗車位置表示情報をユーザーに提供できる本アプリケーションを開発いたしました。
IMG_3138.JPG
(色分けされた並び位置)
IMG_3137.JPG
(行き先ごとに色分けされた表示)

3.機能詳細

降りる駅を入力すると駅名の候補が表示されます。名鉄名古屋駅を初めて利用する方を対象ユーザーとしているので、表示される駅名一覧にはふりがなを設けました。駅名の選択操作をすると、行き先に応じた乗車位置のサインが表示として返されます。このサインは実際のものと極力同じデザインとなるように工夫しました。
IMG_7810.jpg
(駅名候補)

IMG_6935.jpg
(表示結果)

4.使用技術

 フロントエンドでは、ReactとTypeScriptを採用し、バックエンドにはRuby on Railsを使用しました。このアプリケーションの主要なターゲットは、電車の発車を待つ短い時間の間にサービスを利用するユーザーです。このような短時間での使用を想定して、ユーザーに最も快適な操作性を提供したかったため、SPA(シングルページアプリケーション)形式での開発が最適だと考えました。その結果、SPA開発に適しているReactをフロントエンドの技術として選択しました。DBはPostgresQLを、インフラはherokuを採用しています。

さらに、将来的にネイティブアプリケーションの開発を行う際の拡張性も考慮しました。バックエンドの開発時間を最小限に抑えつつ、APIの拡張が容易に行えるよう、RailsのAPIモードを使用しました。これにより、将来的にネイティブアプリケーションを追加する場合でも、バックエンドの変更や追加作業を簡単に行うことができます。

↓検索機能の実装方法についてまとめました。

ER図
my_station_ER.jpg

5.特徴的な実装

 見慣れた乗り換えアプリ感を出して直感的に操作してもらえるようなUIにこだわりました。本アプリケーションは降りる駅を入力すると結果を表示するというシンプルな機能ですが、よくある乗り換えアプリのように発駅と着駅を入力欄を設けて擬似的に経路検索をしているような体験ができるように工夫しました。もちろん、発駅の入力欄はダミーでplaceholderに”名鉄名古屋駅”と記述し発駅は名鉄名古屋駅であることを示しています。

6.フィードバックや反応

 「経路案内のアプリはよく見るけど、乗車位置のアプリはなかなか見かけない」「電車に乗るのが不慣れだからありがたい」など温かいお言葉をかけて頂きました。本当にありがとうございます。
一方で電車の両数に応じて並び位置が変わるので、両数対応してほしいというご意見も頂きました。課題も多いですが対応できるように精進して参ります。

7.学びや今後の課題

 開発を通じてモダンフロントエンド技術に触れることができたのが自分にとっての大きな財産です。
今後もキャッチアップを行い、前述の両数対応や検索結果を保存する機能の実装に努めて参ります。
また、鉄道業界は2020年に発生したCOVID‑19の影響で全国の鉄道利用者が減少し電車本数の削減や廃線に追い込まれる路線もありとても苦しい状況が続いています。そのような状況下においてITの力で鉄道の便利さや素晴らしさを広めて利用者の増加に少しでも貢献したい所存です。
最後までお読みになって下さり誠にありがとうございました。
また、本アプリケーションの開発に際して、さまざまなアドバイスを提供してくれた現在エンジニアをされている高校時代の友人にはとても感謝しています。

8.参考リンク

12
6
2

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
12
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?