パタパタ列車案内表示機 シリーズの裏側

Electron + React

デスクトップアプリ化には Electron、画面の構成には React を使用しています。
Web 技術で UI を作りつつ、Windows 向けの実行ファイル（.exe）として配布できる構成です。

• UI：React + TypeScript
• パッケージング：Electron + electron-builder
• ビルドツール：Vite など

CSVベースの時刻表エンジン

発車時刻や行先などの情報は、CSV ファイルで管理しています。
PC の内蔵時計と照らし合わせて、現在時刻に最も近い列車から順に表示します。

• 平日／休日／曜日別ダイヤの自動切り替え
• 祝日カレンダーとの連携
• 将来的なダイヤ改正にも対応しやすい構造

画像シーケンス＋CSSアニメーション

フラップの回転や連続パタパタの表現には、画像シーケンスと CSS の transform を組み合わせています。
実際のフラップに近い「回転軸」を意識して調整しています。

パタパタ音の再現

フラップが連続してめくれるときの「カタカタ…」という音は、複数種類の WAV ファイルをランダム再生することで表現しています。
音が鳴るタイミングもアニメーションに合わせて調整しています。
なお、WAV ファイルの音源は、実際に近鉄の駅で録音したものです。

黒鉄フレームとネジ・リベット

フレームは「新品寄りの黒鉄」をイメージし、角にはプラスネジ、縁にはリベットを並べています。
少しだけ光沢を入れることで、金属らしい質感を表現しています。

時計・ラベル類

アナログ時計や「平日ダイヤ」「土休日ダイヤ」「祝」ラベルなど、一目で状況が分かるような表示にもこだわっています。

駅ごとの個性

駅名や路線名、列車案内のアイコン類（車椅子マークや車内販売マークなど）は、駅ごとに画像を差し替えられるように構成しています。
将来的に新しい駅を追加しやすいよう、設定ファイルや画像を分離しています。

車両種別の特急車両ごとの個性

独自の仕様として、車両種別の特急車両の画像には、それぞれ「ひのとり」「しまかぜ」「あをによし」「青の交響曲」「アーバンライナー」「伊勢志摩ライナー」「さくらライナー」「ビスタカー」「スタンダードタイプ」と多種にわたる特急車両の名称と画像を表示しています。
なお、特急車両の画像は、「駅旅・ゆけむり研究室」作成の画像を使用させていただいております。