電光掲示板(発車標)つくってみた

公開日:2018/11/28 / 最終更新日:2020/02/03

画面幅によって表示する内容が異なりますのでご注意ください。

発車標つくってみた

JR神戸線三ノ宮・西明石・姫路
JR Kobe LineSannomiya, Nishi-Akashi, Himeji
JR宝塚線宝塚・三田
JR Takarazuka LineTakarazuka, Sanda
種 別
Type
列車名/乗車位置
Train Name / Bording Position
時 刻
Departure Time
行 先
Destination
新快速 白△4~11 10:30 姫路播州赤穂
快 速 4~11 10:35 神戸加古川
普 通 白◯1~7 10:37 須 磨
普 通 白◇1~7 10:43 宝塚新三田
新快速 姫路方面 播州赤穂行きの停車駅は尼崎 芦屋 三ノ宮 神戸 明石 西明石 加古川 姫路 英賀保 はりま勝原 網干 竜野 相生 西相生 坂越です。

SideStory#03(白砂新幹線さかくら号)の冒頭や本編#06-1(eみやび)の冒頭などでワンポイントとしてLEDモニターを表示していますが、あのLED電光掲示板は画像や動画などでの再現ではなくHTMLやCSSなどを用いて制作したものでした。つい先日、とあるグループチャットで電光掲示板が話題に上っていたのでせっかくの機会、逃すわけには!ということでこの際なので公開してみました。
とはいっても、ソースコードを変更する以外には表示内容を変更する方法が現段階ではないのでシミュレータと呼べるわけでもないですし、ただの自己満足ではあるのですが…w

自慢したいところ

画像を一切使用していません!

私がこの電光掲示板で最も自慢したいのはひとつも画像を使っていないところですね。最近は帯域にも余裕が出てきているせいかイラストをふんだんに使用したサイトが増えていますが、一時期画像は一切使用しない(使用してもsvgや一部のロゴのみなど)サイトがありました。それにあやかって…というわけではないですが、画像を使用せずに組み立ててみました。

画面の幅によって表示が変わる!

いわゆるレスポンシブデザイン対応のページ(さくら栄急電鉄のウェブサイト本体もそうですが)の応用と言いますか、画面の幅に適した表示内容になるように設定しています。
パソコンなど画面の横幅が1081pxよりも広いデバイスでご覧になられている方は、種別・列車名/乗車位置・時刻・行先・乗り場の5項目が表示されていると思います。
1080pxよりは狭いが901px以上のデバイスでご覧になられている方は列車名/乗車位置の項目を除く4項目が、それよりも狭い900px以下768px以上のデバイスでご覧になられている方には行き先表示の○○方面という表示を除いた4項目が、767px以下540px以上では行き先表示の○○方面という表示がまた復活した4項目、540pxから420pxのデバイスでは文字のサイズが小さくなり、それよりも小さいデバイスでは再び行き先表示の○○方面という表示を除いた4項目が表示されています。
上の発車標ではJR大阪駅の5番6番線(当時)のデザインを再現しています。矢印の形やフォント、表示内容に一部相違があるもののだいたいの雰囲気は確保できているのかなと思っています。
画面幅ごとに異なるデザインになるというのは、駅によって、またその掲示されている場所によって異なったサイズの電光掲示板が置かれているというような感じがしていいなと思ったからですw

ちなみに、さくら栄急電鉄:加古駅バージョンの発車標はこちらにリンクがあります。と、自分なりのこだわりみたいなものが多少は組み込めてよかったかなと思った次第です。

仮免許をとりました

お恥ずかしながら、いまだに自動車免許を取得しておらず大学生のうちに取っておこうということで自動車学校に通っている最中なのですが、やっと仮免許を取得しました。
まぁ、だからといって何かこう話しが盛り上がるものがあるかと言われれば全くないのですが、一応ブログ的な日記的に残しておけばいつか見た時にああこの時に仮免許通ってたんだなみたいな感じで思い出せるかなと思って…w

と、完全に日記的ななにかでしたw

コメントを残す