開発について
本物の発車案内表示機にできるだけ近づけるために、使用している技術やアニメーションの工夫、デザイン面でのこだわりを紹介します。
現在、空港や鉄道向け旅客案内システムにおいて、FPD（フラットパネルディスプレイ）が案内用の表示機として主流となっていますが、ここでは、昭和レトロの懐かしい反転フラップ式発車案内表示機（パタパタ発車案内表示機）を再現しています。
子どもの頃に駅で見上げた、金属フラップがパタパタとめくれる発車案内表示機。その「少しうるさいけれど、ワクワクする感じ」を PC 上で再現してみたい、という思いからこのプロジェクトが始まりました。
かつて、WAKUDONさんが作成された「汎用パタパタ発車案内表示機」というソフトに夢中になって楽しんでいたのですが、そのソフトの公開が取りやめとなってしまったため、自分で「パタパタ発車案内表示機」のソフトを作成したいと思い、このアプリを完成させました。
近鉄の駅を選んだのは、近鉄沿線で育ち、通学・通勤に利用していて馴染みがあるのと、路線の数の多さ、何より特急車両の種類の豊富さにより、パタパタの見ごたえがあるからです。これからも、近鉄の主要な特急停車駅を題材にして作り続けて、シリーズ化をしていく予定です。
最大の特徴は、駅掲載の時刻表に表示されていた列車案内（特急列車の種類・他の特急列車との接続案内等）を表示するようにし、フラップの回転音は、かつて実際に近鉄の駅で使用されていた表示機の回転音を利用したところです。
当初はシンプルな表示からスタートしましたが、「アナログ時計も欲しい」「ネジやリベットも再現したい」 ……と少しずつ機能を追加していき、最新バージョンでは、車両種別で特急の車名だけの表示から、車名に特急車両の画像を加えた表示に変更して、現在のシリーズ構成になりました。
私の最寄り駅は伊勢中川駅です。
日常の中で特急列車が通過していく姿を見送るたびに、特に観光特急「しまかぜ」の存在は特別なものでした。
本来その駅では表示されない通過列車の情報を、あえて発車ボードに入れているのは、そんな個人的な思いからです。
このシリーズは、そうした小さなこだわりの積み重ねで出来ています。
画面構成にはReactとTypeScript、Windowsデスクトップアプリ化にはElectronを使用しています。
Web技術で画面を構築しながら、インストーラーから導入できるWindowsアプリとして配布できる構成です。
発車案内表示機の描画にはthree.jsを使用しています。
フラップ、中央回転軸、ケース、金属フレーム、ボルト、リベットなどを3Dオブジェクトとして構成し、カメラ・照明・材質・テクスチャを組み合わせて表示しています。
正面から見た比率を保つために平行投影カメラを採用し、ウィンドウサイズが変わっても表示機の縦横比が崩れないようにしています。
時刻、列車種別、行先、停車駅などには、駅ごとに用意したPNG画像を使用しています。
ボルトやリベットの金属表現には、Canvas 2Dで生成したグラデーションや陰影をCanvasTextureとして利用し、2D版で完成したデザインの雰囲気を3D版にも引き継いでいます。
発車時刻や行先などのデータはCSVファイルで管理しています。
PC内蔵時計またはアプリ内のテスト日時と照合し、その時刻以降に発車する列車を順番に表示します。
パタパタの回転音には複数のWAVファイルを使用し、Web Audio APIで再生しています。
連蔵回転時の音量、再生間隔、最終フラップの音を調整し、3Dアニメーションと機械音が自然に同期するよう設計しています。
なお、WAV ファイルの音源は、実際に近鉄の駅で録音したものです。
駅名、路線名、画像枚数、時刻表、凡例、表示領域、アプリ名、アイコンなどを駅別の設定ファイルで管理しています。
新しい駅を制作するときは共通テンプレートを利用し、駅固有のデータを差し替える方式を採用しています。
また、公開前にCSV・画像・音声・設定内容を検査する機能も用意しています。
Windowsのシステム日時を変更せず、アプリ内部だけの日時を自由に設定できるテストモードを搭載しています。
曜日別ダイヤ、祝日、始発・終電、指定時刻でのフラップ動作などを、安全かつ効率的に確認できます。
反転フラップ式表示機は、現在の表示から目的の表示へ瞬時に切り替わるのではなく、途中のフラップを一枚ずつ送りながら目的の表示まで進みます。
3D版では、この連続した動きを再現するため、現在の画像番号から目的の画像番号まで順番にフラップを回転させています。
フラップは上半分と下半分に分け、中央の軸を基準に回転させています。
これらを組み合わせ、単なる画像切り替えではない、立体的なパタパタ動作を表現しています。
発車時刻、列車種別、行先、停車駅などは、文字をその場で描画するのではなく、専用に用意した画像をテクスチャとして使用しています。
画像の色や輪郭がぼやけないよう、テクスチャ補間や色空間を項目ごとに調整し、元画像に近い鮮明な表示を保っています。
フラップの回転に合わせて複数のWAV音源を再生し、連続してめくれる機械音を表現しています。
回転数や動作の強さに合わせて音量や再生タイミングを変化させ、最後のフラップでは音と動きが自然に収束するよう調整しています。音量はアプリ上から変更できます。
表示機のフレームやボルト、リベットは、実物の反転フラップ式案内表示機をイメージして立体的に制作しています。
金属部分には光沢・陰影・面取りを加え、正面から見たときにも厚みを感じられるよう調整しました。ボルトとリベットには、2D版で培ったグラデーション表現をCanvasテクスチャとして活用しています。
表示内容は平面的な画像切り替えではなく、厚みを持つ3Dフラップとして構成しています。
中央の回転軸、上下のフラップ、裏面、ケース内部などを個別に作り、回転途中にも実物らしい奥行きが見えるようにしています。
路線名・駅名・行先・停車駅・列車種別・番線・列車案内記号などは、駅ごとの専用データと画像で構成しています。
駅によって異なる表示機の横幅や「列車案内記号詳細」欄の有無、高さ、掲載項目にも対応し、それぞれの駅らしい案内表示を目指しています。
アナログ時計、現在の日付、平日・曜日別・土休日ダイヤの表示を備えています。
列車案内記号には、車いす対応、車内販売、特急列車への連絡など、駅ごとに異なる案内を掲載しています。アイコンや説明文の配置も、実際の案内板を意識して調整しています。
4時30分に始発電車の案内が出るまで、「列車の運行は、終了しました。」という表示を続けます。
独自の仕様として、車両種別の特急車両の画像には、それぞれ「ひのとり」「しまかぜ」「あをによし」「青の交響曲」「アーバンライナー」「伊勢志摩ライナー」「さくらライナー」「ビスタカー」「スタンダードタイプ」と多種にわたる特急車両の名称と画像を表示しています。
なお、特急車両の画像は、「駅旅・ゆけむり研究室」作成の画像を使用させていただいております。