[ 色々あるけれど… ]
おぱく堂は「ウェブ上に鉄道シーンを作る」という目的を実現するための手段として ダイナミックHTML(CSS+JavaScript)を選択した。
だが、他にも列車をウェブページ上で走らせる手段はいくつかある。ここではそれらの方法を試してみて実感したことを書く。試してない方法についても、ちょいと触れる。
* ウェブ以外の側面画走行(スクリーンセーバ等)はこのページの研究対象外なので触れない。
* 古い低速CPUパソコンでは、左上フレーム走行見本と、このページの Flash、HTML+Time、Marquee と動画GIF の5つを同時に動かすのが辛い場合がある。動作がギクシャクする場合は「左上見本停止」されたし。但し、最初の列車が走り始める以前は停止できない上に、一度停止すると再スタートできないという問題もある。見本番号によっては停止できないものもあるかも。
* なお、このページには前記の他に Canvas と inline SVG を使った走行見本もある。但し、Canvas や inline SVG が表示できる新しい時代のブラウザは、逆に HTML+Time に対応していないから、すべてを同時に動かすことはできない。
●Flash(×過去の走行手段)(PNG画像で代替表示)
●HTML+Time(×過去の走行手段)
時間軸に沿って HTMLを動的に変化させ、ページ上にあるものを動かせる機能。
但し、Windows版 Internet Explorer(IE5〜IE8)専用機能であり、他のブラウザでは全く使えない。そういう事情はあるものの試してみた。
* 正式名称= Timed Interactive Multimedia Extensions for HTML.
* CSS+JavaScriptのみならず、HTML+TimeもダイナミックHTMLの一ジャンルという扱いらしい。CSSによる座標指定を動的に変化させる、という構造はどちらも同じだ。
●Marquee
ウェブページ上にあるものを、簡単にスクロールさせることができる機能。動く鉄道シーンを作る方法としては最も手軽。
* かつては Internet Explorer専用だった機能。Netscape4 など、過去のブラウザには非対応のものもあるが、今は、対応していないブラウザはない。
* 指定が簡単なのが最大のメリットだが、凝ったことができないデメリットもある。
●JavaScript
言うまでもなく、電車走行キットはこれである。
とりあえず、HTML+Time や Marquee と同じ画像で走行シーンを作ってみた。
↑ CSS指定による風景と車輌の位置重ね+「JavaScript」による動作
* 一から JavaScriptで鉄道シーンを作るのはそれなりに大変だが、既にある TKプログラムのパラメータ設定をするだけなら、簡単さは Marquee とさほど変わらないのではないか?
* ちなみに、このページの走行車輌は「立山砂防」のトロッコ。TBサイズ(32px高)の TK縮尺(1px=10cm)という両規格兼用画像。Flashシーンのみ倍サイズ。
●CSS3 Animation
HTML5 + CSS3 で可能になった、CSS要素を時系列に沿って変化させられる機能。
position を変化させることで鉄道走行が可能になるが、透明度、色、形状など、あらゆる設定を変化させられるので、表現の幅は広い。
↑ CSS3 Animation を使った動作 (IE10 以降)
* アニメーション開始点(0%)から終了点(100%)までの、どの時点でどう表現するかを指定し、その中間は自動的に補完され、動作は滑らかだ。Flash の指定方法と発想は同じ。補完は、直線的にも曲線的にも選択できる。見本は直線的だが、曲線的な補完を使って指定を工夫すれば、ギクシャクしないスムーズな駅停車も表現できそうだ。
* IE は ver.10 以降に限定される。とはいえ、未対応ブラウザでは静止画になるだけで、ページデザインが乱れるわけではない。Progressive Enhancement(最新ブラウザでは高度な表現、古いブラウザでは最低限の表現をするウェブデザインの手法)には有用。
* JavaScript 不要だが、Script と組み合わせることで、更に高度な表現が可能になるようだ。
●Canvas/inline SVG
終焉した Flash に変わって、多様な表現の主流に躍り出たのが、HTML5 + CSS3 で追加された Canvas や inline SVG。どちらもテキストとして記述され、動かすのは JavaScript。
* Canvas(2D)は、ウェブページ上に専用の描画スペースを設定する機能。そこに JavaScript で絵を描く。
* SVG は、Scalable Vector Graphics の略。画像ファイル(拡張子 .svg)もあるが、ウェブページ上に直接記述できるのが inline SVG だ。Canvas と違い、静止画なら JavaScript は不要。
* GIF や PNG などのバイナリの画像ファイルではなく、テキストで記述されたものがブラウザ上で画像に変換される。テキストだからこそ、画像そのものを JavaScript で制御できてしまうのが特徴で、画像の変形や色置換といったことも可能になる。
名称 | Canvas | inline SVG |
記述 | テキスト形式でコードを書く | |
画像形式 | ピクセル(ラスター)形式 | ベクトル形式 |
静止画 | JavaScript で描画 | タグ指定だけで描画 |
動画 | JavaScript で再描画くりかえし | JavaScript で変形(移動を含む) |
非対応 | ×IE8以前* | ×IE8以前/Android 2.x以前 |
●WebGL
ウェブブラウザ上で、高度な3D表現を可能にする技術。大は小を兼ねるので、2Dシーンも作れる。
* Canvas上に JavaScriptで描画する。前述の通常の Canvas描画(=Context2D)と似て非なるもの。
↑ WebGL を使った2D描画と走行 (IE9 以降)
* WebGLは、高度な 3D表現のためにある。それなのに、こんな低レベルな 2D表現に使うのは無駄。300km/h以上で走行可能なランボルギーニにわざわざ乗って、徒歩や自転車で十分な 100m先のコンビニに買い物に行くようなもの。
* 素の WebGLは難しすぎるので、簡単な記述で3D表現を可能にする代表的なライブラリ「Three.js」を使用。それでも、自分には 3Dは難しすぎる。
* CSSにしろ、Canvasにしろ、SVGにしろ、左上が座標 X:0 Y:0 の基点。一方で、WebGLはシーン中央が XYZ3軸のゼロ座標なので、感覚的にも分かりづらい。
* テキスト表現が難しいので、「Drawn with WebGL」の文字は入れられなかった。その代わり、小さな立方体を回転させて、本当は 3D用の技術であることを表現した。
* この見本は、風景だけではなく車両も WebGLで描いているが、右下の立方体以外はすべて 2Dオブジェクトで構成。
[ WebGLを使ったシーン ]
* No.1578 は、簡単すぎるが一応 3D風景。UFOの移動にあわせて光源を移動させている。
* No.1579 は、WebGLによる安直な2D風景。但し、このページ直上の見本と異なり、このシーンは 3D立体オブジェクトを 2Dに見えるように並べた上で、環境光源のみを使って立体感を消したもの。
* 同じ WebGLなのに、IE11では後者は問題なく表示され、前者はエラーになる。前者のどこが IE非対応なのか、ちょっと調べたが全く分からなかった。
●Java (Applet)(×過去の走行手段)
かつて、ダイナミックHTMLも Marqueeもなかった時代があった。
その頃にウェブページ上で動画を扱う手段は「Java」しかなかった。書店のインターネット関連書籍のコーナーには、時代の最先端としての Java に関する書物が溢れていた…。昔話である。
* 蛇足ながら、Java と JavaScript は別物である。
* その後、書店から Java に関する書物が激減したが、再び増えてきた。理由は追記として後述。
鉄道側面画の黎明期(TSV規格やTB規格が生まれた頃)は、そんな時代であった。
Javaは本格的プログラム言語なので可能性は高いのだが、当時、一般に流通していたものは簡単なスクローラ(Marquee と同じ程度のことしかできないもの)だけで、それでも鉄道車輌を走行させられるのは画期的だった。それゆえ、TSV画像配布サイトでは、ウェブ上での見本走行用に Java を使っている例が多々見られたものだ。
* Marqueeが登場した頃は、まだ Marquee非対応の NetscapeがシェアNo.1だったし、ダイナミックHTMLもどうやって使うのかという情報が不足していて当初は(今でも?)普及は進まなかった。それゆえに、Javaによる鉄道シーンは MarqueeやダイナミックHTMLが登場したからといって急に過去のものになったわけではなかった。
その後、簡単なスクローラ程度の表現は Marqueeにとってかわられ、そこそこの事は JavaScriptで可能になり、凝った表現のツールとして Flashが普及した。そんなこんなで Java(をブラウザ上で動作させる Applet)を見る機会は大いに減ってしまい、鉄道側面画用ツールとしては消えてしまった。
* Javaは本格的プログラムであり、Flashでも出来なかったような高度なことが可能である。ということで鉄道関連の Java をインターネット上で探してみると「3Dの鉄道シーンをウェブ上に再現する Applet」なんていうものがあった。やはり、非常に高度な世界では Javaは生きていた。だが、Java プラグインがブラウザに標準装備でなくなってしまったので、ウェブ用としては、もはや有用な表現ツールではない。
その後、主要ブラウザである Chrome (ver.42〜)や Firefox (ver.52〜) が、Java Applet への対応を止めてしまい、ウェブ表現用としての Java は完全に終わった。
* Edge や Safari に関しては分からないが、おそらくは既に対応終了になっていると思われる。
* 一方で 、Android アプリが Java で記述されることから、Java 自体は廃れたわけではなさそうだ。
●動画GIF
車輌も風景もまとめて、一枚の動画のGIF画像にしてしまう手法もある。
HTMLや CSSの知識も不要で、ある意味では最も手軽な方法かもしれないし、走行以外の要素をシーン中に持ち込むのも簡易なので、表現の幅も広い。
だが、走行シーン用としては問題もある。
リンクバナーぐらいの極小サイズならともかく、それなりの面積の鉄道シーンで列車をスムーズに動かそうとすると、フレーム数(コマ数)が、ものすごい数になる。結果として、画像容量が重くなり、サーバー容量も食う。さらに言えば、膨大なフレーム数の動画作成は、うんざりするほど大変な作業だ。
* 作業を軽減してくれる機能のある描画ソフトも、あるいは存在するかもしれないが…。
●動画PNG
上の動画GIFと同じ手法だが、こちらはPNG。
GIFと違って色数の制約がなく、24bit フルカラーと半透明アルファチャンネルが使えるのがメリット。
以前は対応しているブラウザが限定されていたので使いづらかったが、現行ブラウザはすべて対応している。
* 非対応ブラウザで見ると、ただの静止画(最初のフレームのみ表示)となる。
* 対応しているブラウザは、Firefox と Safari、Chrome 59以降、及び Chromium化した後の Edge。
* Firefox 以外のブラウザが対応せずに忘れられた存在だったが、Mac や iPhone 標準ブラウザの Safari が対応したことで流れが変わり、遂に Chrome も対応。Windows 標準の Edge も Chromium化して対応。動画PNGを問題なく使える環境が整った。
●結局のところ…
簡単な鉄道シーンなら、Marquee。
凝った鉄道シーンなら、JavaScript(=電車走行キット)
……という現実を、あらためて確認しただけであった。
一方で、高度な鉄道シーンは、過去には Flash だったが、今は Canvas (HTML5 + CSS3) か。
* 鉄道側面画走行という目的に限れば、現実的な選択肢はこれぐらいのものだろう。
* HTML5 の表現力の凄さには驚くが、使いこなす難しさと、ブラウザ間の互換性の問題があるようなので、鉄道シーン表現ツールとしては未知数ではある。とはいえ、高度な表現を試みようとすれば、今後はそれしか選択肢がないのではないかとも思われる。
……電車走行キットという走行手段の本家が、他の方法について研究する意味は何か。
日本をよく知るためには、外国を知ることである。内側からだけでは見えないことが、外からなら見えることがあるし、比較して初めて分かることも多いからだ。同じく、他の走行手段を知ることで、電車走行キットで出来ること出来ないことが明確になる。今回は「電車走行キットに出来ないことを、Flashでどこまで出来るのか」という好奇心からスタートしたわけだが、Marquee や HTML+Time も試すことで「Web Railroad(ウェブ上での鉄道/模型鉄道=Model Railroad をもじった表現)」の全体像も見えた。
自分は電車走行キット開発元であるから、他の手段を使って鉄道シーンを作ることもないし、自分の描いた画像を他の手段で使うことも許可はしていない(TB規格を除く)。しかし、鉄道側面画を趣味とする人々一般にとって、走行させる手段はあくまで手段でしかないのであって「どんな鉄道シーンをどう見せるのか」によって、それぞれ最適な手段はあろうということである。その選択結果が電車走行キットでないとか TK規格車輌じゃないからといって文句を言いたいわけではなく、簡単な Marquee でいいから車輌と風景を組み合わせてウェブ上に鉄道シーンを作ってみよう、という話である。そうやって、鉄道側面画による Web Railroad の世界が広がれば、自ずと電車走行キットの世界も広がるだろうし(結局それかい!)……まぁ、なんというか、そういうことである。