大学を出発するバスの時刻表サイネージを作った
大学で所属している、いちぴろ・エクスプローラというサークルで、大学前のバス停と、大学近くの沼田料金所前発のバスを簡単に確認することができるサイネージの開発を行いました!
(なんとこの記事の公開日である2025年12月17日に正式リリースしました🎉)
どのような物を作ったの?
僕が在学している広島市立大学は山の上にあり、バスを1本逃すとその後次のバスを長時間待つ必要があり、不便を感じている学生が一定数いました。
これらの課題を解決するために、学生がサークル活動などで使用する学生会館に、次のバスが何時に来るのか、大学の麓にある沼田料金所前のバスとどちらが早いのかを"1秒で"簡単に比較できるサイネージを、所属サークルで開発しました。僕は主にデザイン周りのお手伝いと、フロントの実装を担当しました。
使用技術
- ルーティング: React Router
- 言語: TypeScript 5, React 19
- スタイリング: Tailwind CSS 4
- アニメーション: Framer Motion
- デプロイ: Vercel
- 外部API: 広島県バス協会GTFSオープンデータサイト, Open-Meteo
工夫した点
useSWR を活用したデータ取得
バスデータにはリアルタイム性が求められます。しかし、useEffectなどを用いてfetchを行うと、画面のチラつきやキャッシュ制御の面などで課題が生じます。また、大学のネットワークが起因し、データがうまく取得できないことが多々ありました。そのため、エラー時の自動再取得やキャッシュ管理を任せられるuseSWRを採用しました。
例:バスデータ（リアルタイム性重視）
const { data } = useSWR<BusService[]>(apiUrl, fetcher, {
refreshInterval: 15 * 1000, // 15秒ごとに自動更新
revalidateOnFocus: false, // タブ復帰時の再取得を無効化
})
沼田料金所前にも市大前にもくるバスは線で繋げる
バスの中には沼田料金所前から市立大学前まで登ってくるバスが数本あります。これらを一目でわかるように、線同士で繋げわかりやすくしています。
各種アニメーション
データ更新時に表示が突如切り替わるとユーザーの認知負荷が高まるため、最低限のアニメーションを用いたUX改善に取り組みました。 具体的には、バス出発時の非表示処理にFramer Motionを採用し、上方向への退場アニメーションを実装しました。これにより、サイネージ閲覧中にバスが出発しても違和感なく情報が更新されます。
また、限られた画面スペースに詳細情報を収めるため、通過地点や経由地は横スクロールアニメーションで確認できるようになっています。
横スクロールアニメーションと、出発時のアニメーションの様子
あとがき
今回初めてこのような大学でのプロジェクトに参画させてもらったのですが、大学の学生支援室や、各種事務局などとの調整の方が実装より遥かに大変で、これらを一手に引き受けてくださったM1, M2の先輩方にはただただ尊敬するばかりです。
また、実装後フィードバックをサークル内で得ることができ、チーム開発の楽しさを学ぶことができました!
Discussion