開発について - パタパタ列車案内表示機シリーズ

開発のきっかけ

現在、空港や鉄道向け旅客案内システムにおいて、FPD（フラットパネルディスプレイ）が案内用の表示機として主流となっていますが、ここでは、昭和レトロの懐かしい反転フラップ式発車案内表示機（パタパタ発車案内表示機）を再現しています。
子どもの頃に駅で見上げた、金属フラップがパタパタとめくれる発車案内表示機。その「少しうるさいけれど、ワクワクする感じ」を PC 上で再現してみたい、という思いからこのプロジェクトが始まりました。

かつて、WAKUDONさんが作成された「汎用パタパタ発車案内表示機」というソフトに夢中になって楽しんでいたのですが、そのソフトの公開が取りやめとなってしまったため、自分で「パタパタ発車案内表示機」のソフトを作成したいと思い、このアプリを完成させました。
近鉄の駅を選んだのは、近鉄沿線で育ち、通学・通勤に利用していて馴染みがあるのと、路線の数の多さ、何より特急車両の種類の豊富さにより、パタパタの見ごたえがあるからです。これからも、近鉄の主要な特急停車駅を題材にして作り続けて、シリーズ化をしていく予定です。

最大の特徴は、駅掲載の時刻表に表示されていた列車案内（特急列車の種類・他の特急列車との接続案内等）を表示するようにし、フラップの回転音は、かつて実際に近鉄の駅で使用されていた表示機の回転音を利用したところです。

当初はシンプルな表示からスタートしましたが、「アナログ時計も欲しい」「ネジやリベットも再現したい」 ……と少しずつ機能を追加していき、最新バージョンでは、車両種別で特急の車名だけの表示から、車名に特急車両の画像を加えた表示に変更して、現在のシリーズ構成になりました。

使用している主な技術

Electron + React

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

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

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

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

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

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

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

パタパタ音の再現

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

パタパタ表現の工夫

連続してめくれる「流れ」を重視

実物の表示機は、1枚だけがパタッと切り替わるのではなく、「目標の文字にたどり着くまで、何枚か連続でめくれていく」動きが特徴です。

この動きを再現するために、

上フラップ・下フラップを別々にアニメーションさせる
画像シーケンスで中間フレームを挟み、滑らかさを調整する
1行ずつ時間差をつけてパタパタさせる

……といった工夫を行っています。

デザインのこだわり

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

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

時計・ラベル類

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

駅ごとの個性

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

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

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

今後の予定

新しい駅バージョンの追加
より滑らかなフラップアニメーションの研究

「次は、この駅のアプリを見たい」というようなご要望がありましたら、お問い合わせページからお気軽にお知らせください。

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