[ 開発室・見本切替番外・マウス操作に反応 ]


●インタラクティブ?

* 見るだけの「一方通行」ではなく、走行画面上でのマウス操作に何らかの反応がある「双方向的」機能を持たせたシーン。
* 走行見本に使うマウス操作は、以下の種類がある。
 ├ Over (マウスポインタを乗せるだけ)
 ├ Click (クリック)
 ├ Double Click (ダブルクリック)
 ├ Triple Click (トリプルクリック)
 ├ Long Press (マウスボタン長押し)
 ├ Down (マウスボタン押し下げ) - クリックと長押し、両方を含む
 ├ Up (マウスボタンを離す)
 ├ Drag (マウスボタンを押しながら移動)
 └ Wheel (マウスホイールを回す) *
* 走行画面外までドラッグしてマウスボタンを離した場合、ブラウザによっては異常動作してしまうので注意。
* Drag と表示されているものの大半は、移動目的座標への直接マウスダウンにも反応する。一部、レバー等の現在位置上でマウスダウンしてからのドラッグにしか反応しないものもある。今のところ、表示上の区別はしていない。

* 左上走行フレーム上のマウス操作は、基本的に「ページ・スクローラ(この本文フレームのページをスクロールさせる)」となっているため、基本的にそれと連動してしまう。不便なので、一部のシーンに関しては、スクローラが働かない「解除領域」を設定してある。……が、2016年 夏に「ページ・スクローラ」を、220px×80px の範囲内だけで動作する仕様に改良。フレーム拡張部分は、事実上の「解除領域」になった。
* マウスの左ボタンと右ボタンを同時に押すとスクローラが異常動作し、本文スクロールを邪魔してしまう致命的な問題があった。両ボタンの同時押しをしたことがなかったので、2016年 秋まで気づかなかったが、すぐに対策を施した。スクローラに関しては、左ボタンに限定。中央ボタン(ホイール押下)と右ボタンではスクローラは動作しない仕様とした。但し、古いブラウザではこの問題は回避できないので、両ボタン同時押しはしないように注意。
* なお、本文フレームの縦スクロール量を表示する機能が No.150+ にあり。但し、古いブラウザでは機能しない。
* これらと同様のマウス反応シーンは、A02SL-Expert+カスタム関数、によって可能。
* 印付は、WindowsIE6以前のブラウザでは表示不可。
* 印付は、CSSの機能によるブラウザ制限あり。
* マウス操作の他に、タッチ操作可。但し、(逆) 印付は、マウスとタッチでは操作方向が逆。× 印付は、タッチ操作不可。
* PCサイト側ではタッチ可能なシーン(=このページに記載のシーン)でも、モバイルビューアではタッチ操作がキャンセルされるシーンが一部ある。
* Key 印付はキーボードからも操作可。
* Wheel 印付はマウスホイールの回転で操作可能なもの。通常のマウス操作とは異質なので、色分けした。前後回転のみで、左右チルトは非対応。また、ブラウザ限定で、IE には非対応。
* モバイルビューアでは、このページのリストにないシーンで、タッチ操作を追加したものがある。あくまでモバイルビューアのみで、スマホで見ても、このPCサイトでは操作できない。逆に、スマホでしか操作できなくても、PCサイトでも操作できるものは、リストにある。

シーン 走行車輌 マウス操作 スクローラ解除領域 解説
▼ 走行フレーム上の操作 * 他フレームからの操作は、このページ後半に記載。
▼車輌をコントロール
ON リモコン 成田空港アクセス特急
[ Kids ]
ボタン上のみ
Click
ボタン上 画面上のリモコンボタンをクリックすることで「左行・停止・右行」を切替。
* 走行方向切替は click だが、リモコンボタンは down で点灯、up で消灯する。
(変更/リモコン非表示
* リモコン操作は、マウス自体で代用。つまり、「左クリックで左行、中クリック(ホイールクリック)で停止、右クリックで右行」となる。
* 右クリックを操作系として使用するため、コンテクストメニュー(右クリックメニュー)が出ない設定になっている。さらに、左クリックだけ本文スクローラ表示が出ることが気に障るため、スクローラ機能も無効化。
ON 手動オン・オフ オリエント急行 画面上のボタンをクリックすることで「走行・停止」を切替。
(変更/慣性なし
* このシーンは「慣性あり」に改造してしまったが、以前の「慣性なし」表現も残してある。
ON 手動スピード調節 JR東日本 各種通勤電車 スライダ上のみ
Drag (左右)
Key
スライダ上 M00風の簡易手動速度制御。
* キー操作は、左上フレームをアクティブにする必要がある。
* 使うキーは < F - J > と、M00 と同じだが、方向切替がないので、間の G と H の意味が異なる。
ON 鉄塊 -2
縦横拡張
UP Big Boy スライダ上のみ
Drag (左右)
Wheel
列車固定風景走行+蒸機+簡易手動速度制御。
* 動輪一周 16枚画像。No.244 に速度コントローラを追加したもの。
* 最大速度 30mph(48km/h)に設定。
* マウスホイールで、10%刻みで速度上下可。
* キー操作なし。
* -2 は左行。-3 は右行。スライダの向きは進行方向が最大速度なので、操作方向は逆。マウスホイールの上下は同じ。
* 列車固定風景走行+蒸機は SA40SL で表現可能だが、手動速度制御を組み合わせる場合は A02SL-Expert 必須。
ON 鉄塊 -3
縦横拡張
ON 手動運転
拡張
寝台特急カシオペア
[ Kids ]
マスコンレバー上のみ
Drag (上下)
Key
マスコン台上
M01D風の手動運転操作。
制動はマウスアップ(ボタンを離す)しても維持するが、力行はボタンを離すとパワーオフなので、マウスダウンし続ける必要あり。
* 自動運転プログラムに、無理矢理、手動運転のカスタム関数を組込んだ例。
* 停止位置誤差を cookie に保存する機能付。なお、このページには cookie消去機能なし。→「Cookie 管理室」ページへ。
* キー操作は、左上フレームのアクティブ状態必須。
* 基本的に M01 と同じ。R - F、または テンキーの - + でレバー操作。E が非常ブレーキだ。
* 2017年 2月、タッチ操作を改良。以前から理論上は操作可能だったが、指の太さを想定していなかったので、事実上、操作できなかった。
▼スクロールさせて広域をカバー (シーン全体)
ON 手動パノラマ 京王電鉄 スライダ上のみ
Drag (左右)
スライダ上 マウスドラッグでスライダをドラッグすることで、広域シーンをスクロールさせる。
* スライダ上のマウス操作にのみ反応。
ON ギャラリー 北海道ちほく高原鉄道 Drag (左右)
(逆)
下部「順路」表示付近 マウスドラッグで左右にスクロールさせないと、走行シーンが見られない。マウス操作必須シーン。
* この No.234 は、マウス操作を本格導入した初のシーン。厳密に言えば、No.128「宇宙」で試行はしていたのだが…。
* これを含めた以下6つのシーンでは、マウスとタッチでは、操作方向が逆になる。
ON 橙色疾走 台湾高鐵 [ Kids ] なし 左右に長い広域シーンのため、マウスドラッグでスクロールさせないとシーンの全貌は見られない。
* シーン画像上に広域であることの説明がないため、スクロール可だと気づかない人もいるかも。
* スクローラ解除領域を設定していないため、走行シーン上をドラッグすると、このページのある本文フレームがスクロールしてしまう。中央付近をドラッグすれば、ページの上下スクロールだけは回避可能。
ON 玩具レイアウト 東武1720系等 [ Kids ] 下端帯部分 上記同様、左右に長い広域シーン。
* 上記と違い、マウスドラッグ可であることを画面内に表示し、スクローラ解除領域も設定。
ON 三内丸山
(−×Ψ拡張表示時を除く)
JR東日本 E5系 [ 半TK ] Drag (上下)
(逆)
左端 広域シーンだが、左右スクロールは自動。上下スクロールのみ手動。
* 但し、マウスボタンを離すと、元の位置にゆっくりと戻る仕組み。
(変更/フレーム拡張+横拡張+縦枠使用
* 通常のフレーム拡張(No.1198+)ではマウス操作ありだが、もっとフレーム拡張(No.1198-)では高さ方向も拡張しているので上下スクロールなし。マウス操作も不要となる。
▼スクロールさせて広域をカバー (風景だけ)
ON 五段飾り
(+拡張表示時を除く)
国鉄気動車特急 Drag (上下)
(逆)
Wheel
左端 背景画=雛人形の段が、左上フレーム高=80pxに収まりきらないため、マウスドラッグでスクロール表示。
* 但し、ひな祭の頃(2月 1日〜3月 3日)でないと、余計な柵が表示されて、ひな段がよく見えないので注意。なお、この期間限定でフレーム拡張表示(+)が可能だが、それを選択した場合はスクロール不要
ON ルーレット -2 三陸鉄道 なし 背景画=ルーレット台上面をスクロールさせるのみ。
* なんで三陸鉄道でルーレットか? 三陸鉄道の車輌形式は 36形。ルーレット台の最大数字は 36。それだけ。……ちなみに、ルーレット台には、ヨーロピアンスタイルの場合は 0が、アメリカンスタイルの場合には 0と 00が存在する。そのため、数字の選択肢は 36個ではない。
* ルーレット台だけで走行のない特殊表示時(Roulette Only と表示)は、スクロールなし。
▼シーンをズーム
ON 手動ズーム 錦川鉄道、平成筑豊鉄道
[ TrainGif 〜 倍TK ]
スライダ上のみ
Drag (左右)
Key
Wheel
スライダ上 TK規格で描いた車輌を、TrainGif縮尺〜倍TK縮尺までズーム。
* キー操作は、一度走行画面をクリックして、左上フレームをアクティブにする必要がある。
* F=半TK、G=TB規格、H=TK規格、J=倍TK。規格化された縮尺へのダイレクト選択のみ。
* マウスホイールでのズームは、ほぼ規格化された縮尺に限ったポイントを移動するだけ。スライダは左右なのにホイールは前後操作だが、ホイールの回転とズームの関係を Google Map と同じにしたので、違和感は小さいだろう。
▼風景変化 (移動)
ON 模型店 EB10等 Openの文字付近のみ
Drag (左右)
ガラス上、
Openの文字付近
鉄道模型陳列棚のガラス戸を、マウスドラッグで開閉。
* 当初は開閉不可だったが、開閉可能に改造。ガラス戸に貼付けてある文字表現のクオリティの都合上、24bit-PNG必須シーンに変わった。
* CSS3対応ブラウザでは、すりガラス風に見えるように改造した。
(変更/ぼかし強ぼかし無し
* すりガラス風ぼかし表現の強化と解除。
ON UVカット・ガラス JR東日本 各種通勤電車 鉄道模型陳列棚のガラス戸を、マウスドラッグで開閉。
* ↑上の「模型店」と、表現手法はまったく同じ。ガラスの色が濃いだけ。
ON カーテン カーテン上、
Openの文字付近
鉄道模型陳列棚のカーテンを、マウスドラッグで開閉。
* 初期状態では閉じていて電車が見えない。マウス操作必須のシーン。
* 画像移動だけではなく、画像伸縮も組込んでカーテンっぽさを表現している。ピンク色なのは、単に、おぱく堂が好きな色だから。なんで、そんな色が好きなのか? エロ野郎だからさ。
ON 濃色ガラス ▲印付近のみ
Drag (上下)
Wheel
ガラス上、
▲印付近
鉄道模型陳列棚のガラス戸を、マウスドラッグで開閉。
ON ブラインド スライダ上のみ
Drag (上下)
Wheel
スライダ付近 鉄道模型陳列棚のブラインドを、マウスドラッグで開閉。
* 初期状態では閉じていて電車が見えない。マウス操作必須のシーン。
* 2017年 2月、iOS と Android 限定で、ブラインド開閉のタッチ操作範囲を微妙に拡大。指での操作感が、わずかに良くなった……かも。
ON ゲテモノ? The Galloping Goose Wheel - マウスホイールを回すと、絵が微妙に移動。
* マウスホイールによるシーン操作はブラウザ限定。Firefox、Chrome、Edge。未確認だが Safari も動作するはず。……ホイール系イベント取得にはいくつか方法があるが、最も安直な方法を使っているため、IE では反応しない。同じ Microsoft の Edge で動作するから、IE 対応化の予定なし。
▼風景変化 (色の変更 - 切替)
ON 色調補正‐色相 国鉄一般気動車 Drag (左右)
Wheel
中央付近のみ マウス左右ドラッグで、風景の色相(Hue)を変化させる。
* スクローラ解除領域は、最初に「← drag here →」と表示されるが、一度ドラッグしてしまうと表示は消える。
* 上端の状態表示バーは、解除領域ではないので注意。
* マウスドラッグは左右なのに、ホイールは前後操作。
ON 色調補正‐明度 マウス左右ドラッグで、風景の明度(Brightness)を変化させる。
ON 色調補正‐彩度 マウス左右ドラッグで、風景の彩度(Saturation)を変化させる。
ON 明暗変化 各種私鉄特急 スライダ上のみ
Drag (左右)
スライダ上のみ 明暗スライダを左右にドラッグすると、背景色が変化。
* 以前はマウスポインタを乗せるだけ(= Over )の操作だったが、タッチ操作の追加と同時に、マウスドラッグ操作に仕様変更した。
ON RGB変化 JR東日本 各種通勤電車 スライダ上のみ
Drag (上下)
各原色(Red、 Green、 Blue)スライダを上下にドラッグすると、背景色が変化。
▼風景変化 (色の変更 - 一時的)
ON 標準色以外 -1 江ノ島電鉄 Down なし マウスダウン時に背景色をグリーンからクリームに変えるだけ。
* 標準色ではない車輌を走らせるシーンなので、比較のため、江ノ電標準色を背景色に設定した。メイン色のグリーンと、サブ色のクリームを切り替えるのに、マウス操作を使ってみただけ。
ON 縦列停車
横拡張
えちごトキめき鉄道
あいの風とやま鉄道
泊駅。マウスダウン時に、背後にある1番線側の駅施設の色を薄くして、旅客列車が発着する2番線をくっきりさせる。
▼風景変化 (絵の切替 - 全体)
ON 出雲坂根 -2
+横拡張+縦枠使用
(+Ψ拡張表示時)
キハ120 Click なし 出雲坂根駅。通常では画面スクロール+新旧駅舎自動切替だが、《一時的 cookie》使用時(No.1212+ と表示)はフレームを拡張してスクロールを廃している。駅舎画像の切替も手動化して、マウスクリックがスイッチとなっている。
* シングルクリックで新旧を切り替える処理は、ダブルクリックした時に、シングル×2回となって元に戻ってしまう。このシーンは、ダブルクリック時でも戻らないような処理を試してみた。
ON 能楽堂 -2
縦横拡張
E231系等 ボタン上のみ
Click
電車走行キットを始める以前の1999年に、VRMLで制作した「3D 能楽堂」の、いくつかの角度から撮ったスクリーンショット集を見せるためのシーン。上段の指定範囲(=ボタン)クリックで、画像を切り替える。下段ボタンはオン・オフ切替で、フレームを右側に拡張して VRMLコードを表示する。
* No.236 の背景画も、この 3D作品の流用。
* テキストで 3D画が描ける、というのが面白くて、その頃にハマっていた。「3D 能楽堂」は、わずか 40KBのテキスト+松と竹のテクスチャーのみ。コードも約2300行しかない。……といっても、すでに廃れた VRMLのコードを今更見せられても「は?」でしかない。おぱく堂の自己満足。鉄道はオマケ。
* 走行車両が総武中央緩行線なのは、国立能楽堂の下車駅が同線の千駄ヶ谷駅だから。そんだけ。
▼風景変化 (絵の切替 - 部分)
ON 八色八景 キハ120 Click なし クリック毎に、左端の帯を「DC type120」と表示するか、各路線の車輌色かに切り替える。
* 八色とはいうものの、木次線は鋼製とステンレス車の別があり、越美北線は旧標準色と単色化後の別があるため、帯色の表示は十色ある。
ON 風景選択 名鉄特急 [ Kids ] ボタン上のみ
Click
ボタン上 各種切り替えボタンクリックで、遠景、中景、近景を別々に切り替え。
ON -3
縦横拡張 右枠使用
京王電鉄
[ TB規格 ]
120px 写真上のみ
Click
---------
上記 120px写真外
Double Click
120px 写真上 左から、切り抜き写真、一辺 120px 写真、一辺 100px 写真×7枚。
クリック毎に、120px 猫写真の表示を切り替える。
* 鉄道を見せるためのシーンではなく、本当の目的は猫。小さな TB車両をおざなりに使って、無理矢理に鉄道シーンに仕立てた。
* モバイルビューア表示時は、写真切替なし。
----------------------
120px写真外の走行フレーム上、ダブルクリックで、フレーム高を一時的に 80px に戻す。
* 右上メニューフレーム内のダブルクリックには反応しないので注意。
▼風景変化 (絵の切替 - 一時的)
ON 加賀一の宮駅
拡張
北陸鉄道 Down なし マウスダウン時は、廃駅後の姿に変更。
* このシーンは 2007年に作ったが、2009年 11月 1日に廃駅となった。その後、2013年 8月に、廃駅後の画像を追加して、マウスダウンで表示するようにシーンを改造した。さらに、2014年 5月に、+10pxのフレーム微拡張に改造。
(変更/廃駅後
* 通常とは逆に、廃駅後の姿をメインとし、画面上マウスダウン時のみ往時の走行シーンを表示する。
ON 高台移転 -2
縦横拡張
三陸鉄道 [ TB規格 ] 線画駅舎上のみ
Over
×
---------
Double Click
島越駅の新旧駅舎。線画の駅舎にマウスを乗せると新旧を逆転する。
* -2 は新駅標準、-3 は旧駅標準。
* マウス反応での逆転は風景だけ。走行する車輌はその時代のまま。
* Over に相当するタッチ反応がないため、必然的にタッチ非対応。
----------------------
画面上、ダブルクリックで、フレーム高を一時的に 80px に戻す。
* 80px表示時は、上記新旧逆転は無効となる。
* フレーム高が 180px あり、本文フレームを狭くしてしまっているので、本文を読む時用にシーン高を減らす機能を追加した。
ON 高台移転 -3
縦横拡張
▼風景変化 (表示/非表示 - 切替)
ON 活劇世界 -3 Sentosa Express Click なし Waterfront 駅。画面クリックで、駅前広場の屋根を支える列柱の表示/消去を切り替える。
ON 火牛の計
縦横拡張
IRいしかわ鉄道
あいの風とやま鉄道
ボタン上のみ
Click
(イントロ終了後)
下部黒帯上 倶利伽羅駅。ボタン・クリックで、前々景(駅舎)、前景(跨線橋)の表示の有無、及び背景(森林)の有無を選択可能。さらに○ボタンは、右行停車電車の半自動ドア開閉ギミック。
* 前景の表示から非表示へのイントロ付だが、これは前景が消去可能だと示すため。
* シーン開始直後に発車する右行電車は、半自動ドア開閉ギミックなし。なお、521系だけではなく、実際には手動開扉の 413系でも○ボタンは機能する。
* モバイルビューアでは、切替ボタンが表示されないかわりに、タッチ時のみ駅舎と跨線橋を非表示にする。
ON キハ52等 おっぱい上のみ
Down / Up
おっぱい上 水着装着時は Down で裸体に。裸体時は Up で水着装着に。
* 反応するのは、列車手前=右端の赤鬼のおっぱい上のみ。
* 裸体モードにする方法は、サイト内のどこかに書いてあるが、その実現は運次第。もっとも、裸体といっても乳首は描いていない。
* モバイルビューアは裸体モードに出来ないが、そのかわり…(以下略)
ON 発進「SL銀河」
拡張
C58-239等 Double Click なし 走行画面上ダブルクリックで、ヘッドマーク常時表示のオンオフ。
* 左上走行見本は、2016年夏に、ダブルクリックに対応。それに合わせて、このシーンに「ヘッドマーク常時表示」機能を追加した。
ON 迷路 錦川鉄道 高速 Triple Click
Double Click
高速トリプルクリックで、迷路の正答を表示/ダブルクリックで正答を隠す。
* かなり素早く3連続クリックしなければいけないので、指に優しくない。
* 迷路も細かすぎて、目にも優しくない。
ON 縄文 vs 弥生 新幹線(短尺模型)
[ Fun ]
とある操作により、列車手前にある邪魔な柵をどかす(=消す)ことができる。
* 柵を消した後、再び柵を表示させるマウス操作はない。切替といっても、一方通行。
* 2018年 2月以降、柵を消した状態を 365日だけ cookie に保存。
* モバイルビューアでは、そもそも柵表示なし。
▼風景変化 (表示/非表示 - 一時的)
ON 交通博物館
+縦拡張
(−Ψ拡張表示時)
201系 Down & Up
---------
Double Click
道路上 拡張表示時(No.280-)では、手前に萬世橋(万世橋)が表示されるが、マウスダウン時のみ橋を消去して、神田川(外堀)の水面が見えるようにする。
さらに、マウスアップ毎に万世橋の不透明/半透明を切り替える。
* 2016年夏以降、スクローラは 220×80px の範囲に限定して動作する仕様に変更。そのため、橋の上に設定してある解除領域の意味がなくなったが、唯一、この領域内マウスダウン時はスクローラ範囲表示が出ない=画面に邪魔物が表示されないメリットがある。
* 通常表示(No.280)と、+拡張(No.280+)では、橋を表示しないため、この機能なし。
* Ψ拡張は、実質−拡張と同じ。
----------------------
画面上ダブルクリックで、一時的にフレーム高を 80pxに戻す。
* No.280+ でもフレームを縦拡張するが、フレーム高は 130px。一方、No.280- では、205px に達し、本文フレームを大きく狭めてしまうため、−拡張時だけにこの機能を付けた。
* 80px 表示時は、万世橋は表示せず、上記の Down での表示切替機能は停止。
ON 砂漠都市 -7
縦横拡張
Palm Jumeirah Monorail
[ TrainGif規格 ]
Down 左下黒帯部分 手前の椰子の木等を、マウスダウン時のみ消去。
* 2016年 7月からのスクローラ動作範囲限定の結果、このシーンのスクローラ解除領域が無意味な設定になってしまった…。
ON 菁桐站
(−〜拡張表示時を除く)
台灣鐵路 [ Kids ] なし 手前にある石炭積み出し施設の遺構の柱を、マウスダウン時のみ消去。
(変更/雨天→曇天
* 石炭施設が最初から非表示になっている場合(No.1169-、または No.1169~)は、マウス操作なし。
ON 極楽寺山門 江ノ島電鉄 手前の道路を、マウスダウン時のみ消去。
(変更/フレーム拡張フレーム拡張+道路消去+縦拡張
* 道路消去モード(−拡張時)はマウス反応が逆になり、マウスダウン時のみ手前の道路を表示する。
ON 軽便の復活 -5
横拡張
旧尾小屋鉄道 最前景を、マウスダウン時のみ消去。
ON ガルパン聖地
縦横拡張
鹿島臨海鉄道 大洗駅。車道の手前を、マウスダウン時のみ消去。
* 手前の看板の陰に、大洗の御当地プロレスラー「オーアライダー」の絵が隠れている。マウスダウンした時だけ見える仕組み。
ON サクラアート -1
横拡張
三陸鉄道 [ TB規格 ] 田野畑駅。手前の駅舎を、マウスダウン時のみ消去。
ON 恋がかなう駅
横拡張
智頭急行 [ TB規格 ] 恋山形駅。手前の1番ホームを、マウスダウン時のみ消去。
ON 越後西端
横拡張
えちごトキめき鉄道
あいの風とやま鉄道
市振駅。手前にある駅舎や煉瓦のランプ小屋等を、マウスダウン時のみ消去。
ON 中央アジア -1 Kazakhstan Railway
[ 2/3 TK ]
鉄道ロゴを、マウスダウン時のみ消去。
ON 未来を夢見た時 -1
( ☆ )
大阪万博展示模型
[ TB規格 ]
手前にある説明板を、マウスダウン時のみ消去。
* このシーンそのものは 24bit-PNGアルファチャンネル表示非対応の IE6 でも見られるが、手前にある半透明の説明板は IE7以降でしか表示されず、マウス反応も当然 IE7以降必須。
ON 立日橋
縦横拡張
(−拡張表示時を除く)
多摩モノレール
[ 半TK ]
「立日橋」という文字を書いたプレートを、マウスダウン時のみ消去。
* シーンそのものには文字盤は邪魔。一方で、フレーム拡張で崩れたサイトデザインを補完するには文字盤があった方がよい。その矛盾の解決策。
* −拡張表示時は、フレーム拡張なし、プレートなし。
ON パナマ運河 -1 曳船機関車 [ 上面 ] 文字や旗を、マウスダウン時のみ消去。
* 運河の曳船機関車という特殊すぎるシーンなので、文字解説がないと何がなんだか分からない。でも、文字は邪魔でもある。その矛盾の解決策。
ON じぇじぇじぇ!
横拡張
(+−拡張表示時を除く)
北三陸鉄道 NHK朝ドラ「あまちゃん」の袖が浜駅(ロケ地は三陸鉄道の堀内駅)だが、手前に表示されているヒロインの絵をマウスダウン時のみ消去。
* 実際の堀内駅として表示されている場合(No.1440+)や、ドラマ内で震災時に折り返し運転をしているシーン(No.1440-)では、ヒロイン表示がされないので、マウス操作もなし。
ON 欧風研究施設 -2 華為 小火車 華為(Huawei)のヨーロッパ風研究施設=溪流背坡村(英語名 Ox Horn Campus)の中を巡るトラム、宮殿風の建物の中にある巴黎(パリ)駅。手前の柱をマウスダウン時のみ消去。
ON 欧風研究施設 -6 Down
---------
Double Click
溪流背坡村の中を巡るトラム、屋根のない海コ尔堡(ハイデルベルク)駅。手前の三連アーチ門をマウスダウン時のみ消去。
* 遠景にボケ表現を加えているが、マウスダウン時のみ遠景にフォーカスが当たり、手前の駅にボケを入れる仕様。但し、+拡張時はボケ表現無し。
----------------------
画面上ダブルクリックで、一時的にフレーム高を 80pxに戻す。
▼風景変化 (動作/停止)
ON 構内往復
+横拡張
(+拡張表示時)
- Click なし Chama 駅。+拡張時は、車輌なしで構内展望。
画面クリックで、スクロールの動作/停止を切り替える。
ON 曲線 -2
(CSS3 準拠ブラウザ)
縦拡張
E6系 [ Toys ] [ 上面 ] Click (鈍反応)
Double Click
Triple Click
Long Press (1秒)
視点制御。
シングルクリックで画面の車輌追尾/停止の切替。
ダブルクリックで、列車の走行方向切替。
トリプルクリックで、先頭車追尾/最後尾追尾の切替。
1秒以上長押しで、背景色変更。
* クリック系、全使用。但し、シングルクリックは、ダブルクリックでないことを確認してから動作するため、微妙なタイムラグがある。
* 曲線走行は、CSS の transform : rotate() を使った表現。
▼風景変化 (その他)
ON - Click
---------
Triple Click
全体 周期表全体表示時のみ、クリック毎に、日本語と英語の表示を切り替える。
画面上トリプルクリックで、一時的に 220px幅× 80px高に戻す。
* ダブルにしなかったのは、単にトリプルを試してみたかっただけ。
ON 黄道十二星座
+横拡張
(+−拡張時)
Hogwarts Express Click なし 星座名表示時のみ、クリック毎に、日本語と英語の表示を切り替える。
* 十二宮記号表示の時はそもそも言語ではないので切替なし。
ON 被写界深度
(IE 以外)
縦横拡張
D51等 ボタン上のみ
Click
Wheel
ボタン上 カメラの被写界深度(DOF)を疑似的に再現。
ボタン左から……
(1) FENCE. 手前の金網だけに焦点が合う。深度が浅い。
(2) RAIL. 鉄道だけに焦点が合う。深度が浅い。
(3) 鉄道と背景に焦点が合う。
(4) ALL. 全てに焦点が合う。深度が深い。
* マウスホイールでも切替可。
* CSS の blur(ぼかし)を、個別に切り替えて、カメラっぽくしてみた。
* 菱形金網は、高精細画面でも綺麗に見えるように、インラインSVGで描いてある。
▼イントロ再現 (動作あり)
ON リゾート島 -1 Sentosa Express Down & Up
(イントロ終了後)
なし イントロ付のシーンだが、イントロ終了後の画面上マウスダウンで、イントロ冒頭を表示。その後、マウスアップ(ボタンを離す)で、イントロ表現を再度実行する。
* イントロ表現は一度きりで、見逃すとシーン再読込が必須。……というのは不便なので、この機能を追加した。
* スクローラ解除領域を設定していないので、マウスダウンは、走行画面中央付近で行うのが無難。
ON iPad(初代) CP #60、UP #119
ON 無風景
(警告画像確認)
+縦拡張
(+拡張表示時のみ)
JR東日本 各種通勤電車 Up
(イントロ終了後)
+拡張表示時は、は「管理者用:表示異常時警告画像の確認」というイントロがあり、マウス操作で再現。
上記と少し異なり、イントロ終了後の画面上マウスダウンではシーンは変化せず、マウスアップして初めてイントロ冒頭に戻り、イントロ表現を再度実行する。
* 表示異常時警告画像とは、以下の14枚。
----------------------
(1)外部スクリプトファイル読込エラー時の警告。→ 要再読込。
(2)JavaScript 無効時の警告。→ 要設定変更。
(3)スタイルシート無効時の警告。→ 要設定変更。
(4)Netscape4で表示できないシーンを Netscape4で表示した時の警告。
(5)IE7以上必須のシーンを IE6以下で表示した時の警告。
(6)左上走行フレーム横幅を大きく拡張するシーンで右上フレームのメニュー表示に必要なモニタ解像度(横幅)が不足する場合の警告。
(7)CSS指定による半透明(=24bitPNGの透明度に頼らない/動画でも半透明にできる)必須のシーンを表示不可能ブラウザで表示した時の警告。
(8)CSS指定による変形必須のシーンを表示不可能ブラウザで表示した時の警告。
(9)過去のブラウザでしか表示できないシーンを最新ブラウザで見た場合の警告。
(10)改築中により一時的に休止しているシーンの警告。
(11)新規シーンと差し換えるため、終了したシーンの警告。
(12)モバイルビューアでは表示できないシーンの警告。
(13)古いバージョンの走行プログラムがキャッシュされている警告。
(14)IEで表示できないシーンを IEで表示した時の警告。
----------------------
* 但し(2)は、現在は左上フレームに表示されることはなくなった。JavaScript 無効時は、サイトのフレーム構造そのものが表示されない仕様に変更したため。……といっても、Roulette サイト等、電車走行キット・サイト外での走行シーンでは、走行フレーム内に表示される仕様のまま。
* 但し(4)と(5)に該当するブラウザは絶滅状態。もはや警告不要。電車走行キット草創期の化石。
* 但し(6)は該当するシーンでも、指定をさぼって警告が出ない場合あり。
* 但し(9)は該当ブラウザが絶滅状態ゆえに見ることができない。……表向きは。
* 但し(10)に該当するシーンは現時点では存在しない。
* 当然ながら(12)の警告は、モバイルビューアでしか出ない。
* 但し(13)は、古いバージョンでは表示できないシーンでのみ表示。
* 但し(14)には、Edgeでも表示できないシーン用のバリエーションあり。
ON 鉄道問答♪ SL ばんえつ物語 長〜いイントロ終了後、マウスアップでイントロ再演。。
* イントロ表現を再度実行……とはいえ、このシーンは、イントロが主役で、列車走行がオマケかも。長過ぎるイントロゆえに、再実行(再演)が可能な段階に至った時に、その旨、表示する。但し、マウスダウンやアップの用語は一般的ではないので、シーン中では、厳密には異なるものの「クリックで再演」と表示する。
ON 無意味な表現 -1 京王帝都電鉄 1963 Click
(イントロ終了後)
走行画面を隠す重々しいシャッタが開くだけのイントロ。イントロ終了後の画面上クリックで、再度シャッタ開閉を行う。
* 上記と異なり、マウスボタンを離すか離さないかに関係なく、即座にイントロ再実行となる。
ON たま博物館 和歌山電鐵 駅舎のガラス扉が開いて暖簾をかける、始業準備のイントロ。イントロ終了後の画面上クリックで、扉が閉じた状態からやりなおす。
ON トラウマ 165系等 Double Click
(イントロ+終了後)
イントロで表現した、おぱく堂 8歳の頃のトラウマ的過去を、ダブルクリックで再表現。
* 最初のイントロ終了後、165系が画面外に走り去った後で、ダブルクリック有効となる。再現イントロでは、イントロ終了後すぐに再現可能。
▼イントロ再現 (表示/非表示 +遷移表現)
ON 拉薩河特大橋 青藏鐵路
[ TrainGif規格 ]
Down & Up
(イントロ終了後)
なし イントロで俯瞰表示される橋を、イントロ終了後の画面上マウスダウン時のみ再表示。
* マウスアップで元に戻すが、即座に戻るわけではなく、じわっと遷移表現あり。
ON アンデス PeruRail [ Kids ] イントロで表示される黄金のロゴを、マウスダウン時のみ、じわっと再表示。
* マウスアップでじわっと消去するのは他と同じだが、マウスダウンでのじわっと表示は、これのみ。
ON 大陸横断 Great Southern Railway イントロで表示される路線図を、マウスダウン時のみ再表示。
* オーストラリア大陸を跨ぐ長距離旅客列車(…の先頭の機関車)だが、東西横断は「Indian Pacific」、南北縦断は「The Ghan」。
ON 大陸縦断
ON 神域の駅( ☆ ) 高千穂鉄道 イントロで表示される駅舎を、マウスダウン時のみ再表示。
* 駅舎を描きたいが、描くと列車が見えない。そのジレンマを解決するための手法。
* このシーンそのものは 24bit-PNGアルファチャンネル表示非対応の IE6 でも見られるが、イントロの駅舎は 24bit-PNGで描いているため、これを見るには IE7以降必須。
(変更/駅舎半透過維持イントロ逆転
* 駅舎半透過維持は、駅舎を完全には消去しない。
* イントロ逆転は「表示」と「消去」を逆転する。つまり、駅舎表示がデフォルトとなり、マウスダウン時のみ消去となる。
ON じぇじぇ!
縦横拡張
(+拡張表示時を除く)
三陸鉄道 久慈駅。イントロで表示される手前側の JR八戸線プラットフォームを、マウスダウンで再表示する。
マウスアップの 0.5秒後に、まず JRより手前の跨線橋を消し、1秒後に JRプラットフォームを消す二段階戻し。
* NHK朝ドラ「あまちゃん」の北三陸駅シーンとして表示されている場合(No.1430+)は、マウス反応はなし。
* 今は JRは省略しているが、将来 JRの車両を走らせる設定に変えた場合は、この処理もやめる(=JR駅常時表示)ことになるかも。
* 厳密に言えば、表示/非表示の遷移表現ではないが、二段階戻しもこの分類とした。
ON 後世への伝言 -1 三陸鉄道 [ 半TK ] 島越駅。まず、津波後の惨状を表示して、後に鉄道があった頃のシーンへと移行する。マウスダウン時に、津波被害後の姿を再表示する。
ON 後世への伝言 -2 Click
(イントロ終了後)
島越駅の続編。旧駅(モノクロ) → 津波直後(モノクロ) → 運転再開時。このイントロを、マウスダウン時に再度くりかえす。
* 上と異なり、厳密に言えば、表示/非表示の遷移表現ではないが、二段階戻しもこの分類とした。
▼イントロ再現 (表示/非表示 - 単純切替)
ON 集集站
(+拡張時イントロなし)
台灣鐵路 [ Kids ] Down & Up
(イントロ終了後)
なし イントロで表示される駅舎を、マウスダウン時のみ再表示。
さらに、マウスアップ(ボタンを離した後)で「駅舎消去」と「駅舎シルエット表示」を切り替える。
* 日本統治時代の駅舎を残していたが、地震で倒壊。その後、同じ形で再建した。そういう貴重な駅舎ゆえに描きたかったわけだが、これも駅舎を描くと列車がみえないジレンマがあり、こういう表現手法に至った。
(変更/駅舎常時表示
* +拡張時は、駅舎を消すイントロがない。その結果「マウスダウン時のみ駅舎消去」と、マウス操作の意味が逆転する。
ON 金閣 嵐電 Down
(イントロ終了後)
まず路線図を表示し、北野白梅町駅までスクロールしたところで、四季の金閣寺表示に切り替わる。マウスダウン時に、北野白梅町駅付近路線図のみ再表示するが、路線図全体のイントロを再現するわけではない。
* イントロは動作付だが、再現は単純切替のみ。
ON 金鯱 名鉄特急 [ Kids ] イントロでは、名古屋城天守閣の全体図を表示した後、金鯱にズームアップする。マウスダウン時に、その天守閣全体図を再表示する。
* イントロは動作付だが、再現は単純切替のみ。
ON 中央アジア -2 Kazakhstan Railway
[ 2/3 TK ]
イントロで表示される鉄道ロゴを、マウスダウンで再表示するだけ。
ON 中央アジア -3
ON 蒸機の構造 国鉄 C62 イントロで C62の外観を表示した後、内部構造の表示に変わる。マウスダウンで外観を再表示する。
ON 滝駅 -1 JR東日本 キハ40 イントロで表示される駅名板を、マウスダウンで再表示するだけ。
ON 滝駅 -2 JR西日本
103系 3550番代等
ON 阿蘇駅前 バス等
[ TB規格/5/6TK ]
ON 圧縮空気 -1 49671号機 イントロで表示される建物の外壁を、マウスダウンで再表示するだけ。
(変更/フレーム拡張+横拡張
ON 減圧チューブ Hyperloop One イントロで表示される基地のあるチューブ端を、マウスダウンで再表示するだけ。
(変更/フレーム拡張+縦横拡張
▼シーン再演
ON 復旧の時系列
縦横拡張
三陸鉄道 Click
(シーン終了後)
なし 一巡でシーン終了。その後、画面クリックでリプレイ。
* もうひとつ、震災後の三陸鉄道で「あまちゃん」撮影車輌が走る時だけ登場するヒロインの絵をマウスダウン時のみ消去する機能もあり。
ON 深海へ
しんかい 6500
(鉄道以外)
スタートして元に戻ったところでシーン終了。その後、画面クリックで再演。
* シーンの構成が無限ループになっていないため、クリックで全てをリセットする仕組みになっている。
ON 垂直離着陸
縦横拡張
MV-22 Osprey
(鉄道以外)
▼別のシーンへ切替
ON 郷愁の空想 -1 架空鉄道 番号上のみ
Click
番号上 地図上の番号クリックで、その番号のシーンへと切り替える。但し、確認ダイアログは出るので、切り替えたくない場合は「キャンセル」可能。
* 地図上から選択した場合に限り、選択されたシーンに地図を追加して +縦拡張 になるので注意。また、その地図上からも番号クリックでシーン切替できるが、このページの扱い外とする。……この時に選択されたシーンには、高速ダブルクリックで一時的に 80px高に戻す機能を付けている。通常よりダブルクリック判定が厳しく、素早く二度クリックしないと受け付けない。
ON リゾート島 -3 Sentosa Express 駅名上のみ
Click
駅名上 駅名クリックで、その駅のシーンへと切り替える。上と同様、確認ダイアログも出る。
ON 楽園 -14
+縦横拡張
(+拡張表示時)
- 駅名上のみ
Click
---------
Triple Click
Double Click
地図上の駅名クリックで、その駅のシーンへと切り替える。確認ダイアログあり。
* 地図だけ表示モード(+拡張)時のみ。
* 本来は東京ディズニーリゾートのモノレールシーンだが、地図だけ表示モードではモノレール走行なし。
----------------------
トリプルクリックで、フレーム高を一時的に 80px に戻す/ダブルクリックで本来のサイズへ。
* この機能について、このページ以外では特に表示していないので、隠し機能とも言える。
* 縮小した状態では、上記、シーン切替機能は働かない。
* CSS3 対応ブラウザのみ。
ON 地図 -6
横拡張
IRいしかわ鉄道
あいの風とやま鉄道
えちごトキめき鉄道
一部駅名上のみ
Click
一部駅名上 地図に記された、「倶利伽羅」「市振」「有間川」のみ、それぞれの駅シーンに切り替える。確認ダイアログあり。
* 駅名の上にマウスを乗せて黄色く表示される駅が、切替可能。
▼特殊機能
ON ワイン
+横拡張+右枠使用
(+拡張表示時)
FS ETR500
[ Kids ]
Drag (右)
右へ40px以上
2秒以内
なし
画面上高速ドラッグで、右上フレームのタイトル文字を射出。到達距離を競うミニゲーム。
* ドラッグ距離÷ドラッグ時間で決まるが、水平にドラッグしたかどうかもチェックしている。斜めになると、射出速度が下がって記録が悪くなる。
* 必然性のないギミック。マウスボタンを押してから離すまでの時間差を何かに反映させるスクリプトのテストをしただけ。
* 2015年から、一応 cookie に記録を残す仕様とした。なお、このページには cookie消去機能なし。→「Cookie 管理室」ページへ。
ON -3 上海磁浮交通 牌上のみ
Down & Up
Long Press (5秒)
牌上 牌上マウスダウンで牌を裏返し、マウスボタンを離すと麻雀牌を選び直す。
さらに、牌上マウスボタン長押し5秒以上で、「日本麻雀牌」→「中国麻將牌」→「American Mahjong Tile」をトグルで切り替える。
* 各牌を次々と巡回して表示する一覧モード(×拡張)時は、牌上は巡回動作/停止用になる。
ON トランプ TGV-POS ボタン上のみ
Click
ボタン上 ボタンクリックで、トランプを選び直す。
* 各カードを次々と巡回して表示する一覧モード(+拡張)時は、ボタンは巡回動作/停止用になる。
ON 花札 蒸機時代の特急 ボタンクリックで、花札を選び直す。
* 各札を次々と巡回して表示する一覧モード(+拡張)時は、ボタンは巡回動作/停止用になる。
ON スロット
+縦拡張
(+拡張表示時)
Las Vegas Monorail
ボタンクリックで、スロットを回す。
* 1回毎にいちいちクリックして回す手動モード(MANUAL)と、勝手に回る自動モード(AUTO)があり、最初にどちらか選ぶ。
* 元々スロットが勝手に回るシーンだったので、マウス操作可能に改造したものの、自動モードではあまり意味がないかも。なお、自動モードは「777」が出たところで停止する。
* コイン数が赤字(マイナス)になっても続行する。その数字のまま、cookie に 1000日保存される。
ON Sentosa Express ボタンクリックで、盤を回す。
縦フレーム上のマウス操作
(変更/ゲーム+縦枠使用
* +拡張時は、縦フレーム内に表示されるルーレット台上での操作となる。
* 詳細は↓このページ下方「縦フレーム内のマウス操作」項目下へ。
ON ロシアン・ルーレット Trans Siberian
[ Kids ]
Click なし 走行画面クリックで、リボルバーのシリンダーを回す。
* Safe の時はリトライ可能。Hell が出ると終わり。
ON 丁半
縦拡張 右枠使用
草軽電気鉄道
[ 倍TK ]
特定の範囲
Click
+Form入力
Wheel
状況によって
変化

丁か半か、賭けるだけ。
* 1 - 畳表の壺振り台(正式名称は知らず)をクリックすると、壺を振ってサイコロの目を決定。
* 2 - 賭ける木札の数をフォームに入力。
* 3 - 白布の敷物(盆ぎれ)の上下、丁か半かをクリックすると木札が置かれ、賭けを確定。
* 4 - 畳表がアップになり、結果表示。
* 5 - 木札の残数がある限り、畳表クリックで再度賭けられる。木札の枚数は cookie に保存される。
* 木札の初期枚数は 50。
* IE 以外は、マウスホイール操作で、フレームの拡縮が可能。
* 走行シーンは右フレームのみ。草軽なのは特に意味はなく、画像の色合いと大きさが最適だったから選んだだけ。
ON アナログ時計
縦横拡張
(SVG 対応ブラウザ)
肥薩おれんじ鉄道 時計内のみ
Click
時計内 「ステップ運針/スイープ運針」を切り替える。
* ステップ運針=秒針をカチカチ刻。クオーツ時計の大半。
* スイープ運針=秒針がスーッと動く。機械式時計。
* 時計は、インラインSVG(Scalable Vector Graphic)による描画。
* 時計があるので、15秒間隔で車両が通過するようにしてある。
▼微妙…
ON 宇宙 C62等 Drag (上下左右)
×
なし 背景の宇宙が、微妙にスクロールする。
* マウス操作に反応させて風景を動かすことを初めて試行したシーン。スクロールさせても影響のない宇宙空間だから試行にちょうど良かったのだ。試行ゆえに、表現としてはまったく意味のないものに留まっている。
* マウスを離す(Up)と、背景画は元の位置に戻ってしまうが、これも自動戻しの試作。
* スクローラ解除領域を設定していないため、走行シーン上をドラッグすると、このページのある本文フレームがスクロールしてしまう。
* タッチ操作不可。
Double Click
×
ダブルクリックで、シーンを逆さまにする。上下のない無重力の宇宙らしさの表現。
* この反転機能は、CSS3 対応ブラウザのみ。
* ダブルタップには非対応。
ON 鉄塊 UP Big Boy Drag (左右) 車輌固定・風景スクロールのシーンだが、マウスドラッグで車輌の位置が微妙に変化。
* 巨大な機関車なので、車輌をスクロールさせないと全貌が見られない。ということで、組込んでみた機能。
* このシーンを作った頃は、まだフレームを拡張する方法を知らなかったわけね。
▼スタイル操作
ON Opacity テスト -3 ※×
(Windows IE9以前)
JR東日本 各種通勤電車 Down
なし CSSによる半透明表現。画面上マウスダウン時に、不透明度をちょっと下げるだけ。
* -3 は Windows IE9以前 専用の CSS filter:alpha() を使った半透明。
* -4 は CSS3 の opacity を使った半透明。IEは 9以降必須。
* 両方とも表示されるのは IE9だけ。
* 画像そのものを半透明にしてしまう 24bit-PNG を使う方が、風景や車輌の画像としてのクオリティは上である。しかし、指定による半透明の場合、動画 GIFも半透過できるし、JavaScript で不透明度を自由に変えられるメリットがある。ギミック的な鉄道シーンには有効な手法だが、ブラウザ限定になるのは、非対応ブラウザが世に存在している間はデメリット。
ON Opacity テスト -4
(CSS3 準拠ブラウザ)
ON Transform テスト -1
(CSS3 準拠ブラウザ)
スノーモンキー Click
CSSによる勾配表現。画面上クリックで、傾斜が変わる。
勾配チェンジャ → 水平 10 ‰ 22.6 ‰ 33.3 ‰ 66.7 ‰ 80 ‰
* ↑ここからも、勾配(‰)の変更可。
* CSS の transform : rotate() を使った表現。CSS3準拠ブラウザでしか表現できないのでブラウザ限定。IEは 9以降必須。
ON 横倒し -1
横縮小 縦拡張
熊本市交通局 9700形 Double Click
画面上ダブルクリックで、縦横変換。
* CSS3対応ブラウザのみ。
ON 急坂の街 -1 San Francisco Cable Car ダブルクリックで、疑似的勾配表現と、傾斜付のリアル勾配表現を切り替える。
* この傾斜機能は、CSS3 対応ブラウザのみ。
▼フレーム操作
ON 隠れしもの
横拡張
新幹線(短尺模型)
[ Fun ]
?印 Drag (左右)
!印 Click
?印と!印付近 境界線のないフレームは通常マウスドラッグでサイズ変更できないが、スクリプトを使えば可能。ということで「?」をドラッグすることで、上の左右フレームの境界を移動できるようにしてみた。なお「!」をクリックすることで元に戻る。
* スクリプトを試してみたかっただけで、鉄道シーンを見せるという目的には、何ひとつ役に立たない。
* ドラッグ可能な範囲は、通常位置から左へ 100px、右へ 1000px。左方向へ走行フレームを縮小することには意味はまったく無いが、これもスクリプトを試したかったから、ということに尽きる。背景の色帯は、100px幅を示す目安。
ON 招き猫
枠移動
都営 10-300形等
[ Kids ]
Drag (左右)
50px以上 → 動作
50px以下 → 停止
なし 走行画面上の左右ドラッグで、走行シーン表示位置をドラッグ方向へ移動開始。50px以下のドラッグ(またはクリック)で停止。
* 必然性のないギミック。マウスボタンを押した座標と離した座標の差を何かに反映させるスクリプトのテストをしただけ。
ON 横幅選択
縦横拡張
キハ181系等 ボタン上のみ
Click
Wheel
ボタン上 画面内にあるボタンクリックで、走行フレーム幅の拡縮を選択可能にしたもの。
* 選択できるのは、220px(デフォルト)、400px、600px、800px、1000px、1200px、1600px。
* 広い走行シーンを見せるには有効だが、広げるとメニューフレームが右にずれてしまい、モニタによっては右画面外に出てしまう。切替可能にしたのは、そのため。
* マウスホイール操作で、横幅選択ボタンのあるフレーム縦拡張部分を出したり引っ込めたりする。
ON 奥只見 -1
縦拡張
キハ40 ボタン上のみ
Click
Key
画面内にある ▼ボタンクリックで、走行フレーム高の拡縮を選択可能にしたもの。
* ▼ボタンで拡張、▲ボタンで戻す。
* ボタンの位置は「奥只見」では移動するが、「都田川」は左上固定。
* 80px高(デフォルト)と、縦拡張の二択のみ。
* 拡張寸法は「奥只見」は 350px高、「都田川」は 230px高。
* 走行フレームがアクティブで、半角英数モードの時のみ、空白キーで拡縮切替可。
* モバイルビューアでは 140px高で表示した上で、不足分は上下スワイプで表示範囲を変更する仕組み。
ON 都田川
縦拡張
天竜浜名湖鉄道
ON 軽便の復活 -4
縦横拡張
ホイットコム
[ 1/25 (72dpi) ]
画面内にある ▼ボタンクリックで、走行フレーム(高さと幅)の拡縮を選択可能にしたもの。
* ▼ボタンで拡張、▲ボタンで戻す。
* ボタンの位置は左上固定。
* 80 × 220px(デフォルト)と、縦横拡張 225 × 370px の二択のみ。
* 1/25 という見慣れない縮尺は、北米を中心とした巨大側面線画の世界における最大級サイズ。彼らはこの縮尺でアメリカの巨大な機関車を描いているが、さすがにその大きさの走行車輌(面の表現付の画像)を描くのは辛いので、軽便車輌にした。
ON 地図 -5
縦枠使用
満鉄「あじあ」 ボタン上のみ
Click
(イントロ終了後)
Key
画面内にある ▼ボタン(と右側の「地圖」文字上)クリックで、縦フレーム=地図を出し入れ。
* ▼は左右表示。右向きで地図表示、左向きで戻す。
* 地図上「Japan」の範囲として薄赤色に塗ってあるのは、当時の領土の他、祖借地を含む。
* 上と同じく、半角英数時は空白キーで拡縮切替可。切替できない時は、走行画面を一度クリック。
ON 動的なフレーム
縦横縮小 縦横拡張
西武 E851
[ 多縮尺 ]
ボタン上のみ
Click
ダイアログ確認付
ボタンクリックで、走行シーンを強制終了。
* 走行車輌は、半TKから LTC!縮尺まで。車輌のサイズに合わせて、フレームのサイズも拡縮する。かなり目障りなシーンであるため、左上の片隅に「緊急停止」ボタンを設置した。クリックすると確認ダイアログが出た上で、フレームサイズを標準に戻してシーン終了となる。
ON ピラミッド -2
縦拡張 +枠移動
(+拡張表示時)
Egyptian Railway
[ Kids ]
Double Click
(イントロ終了後)
なし 走行画面(及び、その左側)上、ダブルクリックで、走行シーンの開閉。
* 走行シーンが閉じた状態から開くイントロの再現でもある。
ON 三内丸山
+縦横拡張+縦枠使用
(−×Ψ拡張表示時)
JR東日本 E5系
[ 半TK ]
Double Click
×
画面上ダブルクリックで、一時的にフレーム高を 80pxに戻す。
* もう一度、ダブルクリックすることで、元に戻る。
* 三内丸山は、ダブルタップ非対応。
* 横拡張寸法はそのままなので、拡張で消えてしまうプルダウンメニューは、縮小時も表示されない。
* 欧風研究施設 -5 は、フルサイズと 80px高の間に中間サイズもある。3段階トグル切替。
* ラントヴァッサー橋-2 は、+拡張で「+右枠使用 =右フレーム貫通」となるが、縮小時、貫通部分は表示されなくなる。
ON フレーム拡張(高)
縦拡張
西武 E851 等
[ LTC!規格 ]
Double Click
ON 瀬戸内海 -3
縦横拡張
JR四国 8000系等
[ 半TK ]
ON ボイジャー -2
縦横拡張
NASA "Voyager"
(鉄道以外)
ON ブルージオ橋
縦横拡張
ベルニナ急行等
ON 蛇骨陸橋
縦横拡張
箱根登山鉄道
ON 欧風研究施設 -3
縦横拡張
華為 小火車
ON 欧風研究施設 -5
縦横拡張
ON 欧風研究施設 -7
縦横拡張
ON 欧風研究施設 -8
縦横拡張
ON ラントヴァッサー橋 -2
縦横拡張
氷河急行等
ON ラントヴァッサー橋 -3
縦枠使用 +横拡張
(+−Ψ拡張表示時)
Down
---------
Double Click
Triple Click
マウスダウン時は、縦フレームに縦寸法ピクセル定規を表示。
* +−拡張時以外も同様。
----------------------
ダブルクリックで、縦長フレームを 220pxまで縮小。トリプルクリックだと、更に縮小。再度ダブルクリックで、シーン本来のサイズに。
* 縦フレーム内ダブルクリックには反応しない。つまり、反応するのは、上から 80pxまで。
* 拡張シーンは、本文フレーム狭小化を微妙に改善するため、仕様変更した。以前のシーンは、−拡張として残してある。この古い仕様では、走行フレームの縦拡張もあり、ダブルクリックで 80px高に戻る。
* Ψ拡張時は、縦長フレームを 220pxに縮小した状態が初期表示される。
ON ラントヴァッサー橋 -3
縦枠使用
(+−ΨΛ拡張時を除く)
トリプルクリックで、縦フレームを縮小/ダブルクリックで縮小解除。
* この機能について、このページ以外では特に説明していないので、ほぼ隠し機能。
ON 走らない -4
縦枠使用
私鉄/3セクの車輌各種 Double Click
Triple Click
▲ 走行フレーム上の操作 * 以上は、走行画面上での操作。
▼ 他フレームからの操作 * 右上メニューフレームや縦フレームからのマウス操作シーンもあり。
* からくりは簡単で、それぞれのフレームにマウス座標を取得する関数を組み込んだだけ。走行シーン側からそれを参照してデータを取得することで、他フレームから操作が可能になった。右上フレーム操作の方が本文フレームを干渉しないメリットがあるが、操作個所が(タイトル文字との重なりを避けることで)走行シーンから離れてしまうデメリットもある。また、どちらの場合でも、ページ・スクローラとの干渉が回避される。
* 他フレームからの操作は、マウスのクリックボタンを押してから離すまで 0.1秒以内だと反応しない場合がある。……左上フレームの走行プログラム側から、他フレームのマウス操作のチェックが 0.1秒単位で行われるため、その間で Down+Up が完結してしまうと Down で始まり Up で終わる処理が、始まる前に終わってしまうのだ。
* 他フレームからの操作のために、走行フレーム側がどんな座標データを取得しているのか? JavaScript 的な興味がある人は、No.1340x を見られたし。これは元々、とあるバグの原因を探すために作ったツール。これで見つけたバグは修正済。フレーム外までドラッグした時、座標取得を停止するブラウザと、外なのに座標を取得し続けるブラウザがあるのも、これで判る。なお、中クリック(ホイールクリック)で、拡張したフレーム寸法を戻せる。
* このサイトのフレーム構造がよく分からない場合は No.129+ 参照。
▼右上フレーム内のマウス操作 ──走行フレーム以外から走行フレームを操作する(1)
ON 太陽神ラー
右枠使用
エジプト鉄道 [ Kids ] スライダ上のみ
Drag (左右)
右上メニューフレームに、スライド式の速度コントローラを追加。
ON 緑色機関車
右枠使用
GWR 4900
ON
右枠使用
カツミ自由形(16番)
[ Kids ]
同上。但し、スライドの方向が逆。
* 右行シーンは右端が全速、左行シーンは左端が全速、という理由で逆になる。
ON 三線交流模型
右枠使用
カツミ自由形(Oゲージ)
[ Kids ]
ON 愛の多様性
拡張 右枠使用
新幹線(短尺模型)
[ Fun ]
ON 黄昏
拡張 右枠使用
EF65+20系 スライダ上のみ
Drag (左右)
(微妙に乱調)
CSSによる歪み表現。右上フレームのスライドで、角度が変わる。
* CSS の transform : skew() と scale() の機能を含んだ matrix() を使った表現。CSS3準拠ブラウザ以外では、この機能なし。
* スライドバーは、実は移動している右上フレームに逆らって、見た目、同じ位置を維持させている。その関連で、マウスダウンしただけで動かさないと乱れた動きをしてしまう。
* 歪みは、最大 30度。
ON 手芸
拡張 右枠使用
富良野ノロッコ等
ON ジグソー
拡張 右枠使用
ゆぅトピア和倉等 同上。但し、歪みの角度が逆。
ON Transform テスト -2
(CSS3 準拠ブラウザ)
+右枠使用(+拡張時)
E6系 [ Toys ] [ 上面 ] ダイヤル上のみ
Drag (回転)
CSSによる回転表現。右上フレームの回転ダイヤルで、角度が変わる。
* CSS の transform : rotate() を使った表現。CSS3準拠ブラウザでしか表現できないのでブラウザ限定。IEは 9以降必須。
* デフォルトでは自動回転だが、+拡張時には手動回転となる。
ON サイコロ
右枠使用
Amtrak ボタン上のみ
Click
右上フレームの小さな「短気者ボタン」で、即座にサイコロを振りなおす。
ON 加速度比較
右枠使用
富山ライトレール 上に同じ「短気者ボタン」で、次の車輌にスキップ。但し、入線して停止するまではボタン無効。
ON S.K.I.P.号
+右枠使用(−拡張時)
江ノ電 右上フレームの7択ボタンで、スポット風景を選択。
* 通常はスポット風景の表示は自動切替だが、《一時的 cookie》使用時は手動選択となる。
* 右端の「0」ボタンは、スポット風景の消去。
ON 異星
+右枠使用(+拡張時)
BigBoy 改? 右上フレームの5択ボタンで、風景を選択。
* 通常は自動で6つの風景を順に切り替えるシーンだが、《一時的 cookie》使用時は手動選択となり、都合により選択肢がひとつ減少。
ON 描画工程 -5
+右枠使用(+拡張時)
キハ40 右上フレームの5択ボタンで、工程を選択。
* 通常は駅描画を工程順に自動切替するが、《一時的 cookie》使用時は手動切替となる。
* 気動車が発車するまでは切替ボタンは表示されない。
* 右端の「0」ボタンは、工程の消去。
ON 喫茶店
(IE以外)
+右枠使用
321系 右上フレームの4択ボタンで、窓越し風景のぼかし具合を選択。
* CSSの「filter : blur」の強度を切り替えるだけ。
* 右端の「0」ボタンは、blur効果の消去。
ON 描画比較
+右枠使用(+拡張時)
富良野ノロッコ 右上フレームの4択ボタンで、風景を選択。
* 通常は自動で3つの風景を順に切り替えるシーンだが、《一時的 cookie》使用時は手動選択となり、選択肢も No.597 だけでなく No.598 の画像を追加して4つとした。
ON 友好的隣人
右枠使用
台灣鐵路 [ Kids ] 右上フレームの3色ボタンで、全速‐半速‐停止を選択。
ON 星屑の下で
右枠使用
C62 右上フレームのボタンで、走行‐停止を選択。
ON アイス店
+右枠使用
+縦横拡張+縦枠使用
(+拡張表示時)
新幹線(短尺模型)
[ Fun ]
ON 最果て旅情
+右枠使用(−拡張時)
キハ54-500番代 右上フレームのボタンで、風景スクロールを制御。
* 左‐停止‐右の3つボタン。
ON 源氏物語
+右枠使用(+拡張時)
321系 右上フレームのボタンで、文章スクロールを制御。
* 左早送‐左‐停止‐右‐右早送の5つボタン。
* 通常は自動スクロールだが、《一時的 cookie》使用時の+拡張でははコントロール可能になり、スクロールを止めて読むことができる。
* −拡張では、別の方式も採用。詳細↓下記。
ON 東海道中膝栗毛
+右枠使用(+拡張時)
0系
ON 南総里見八犬伝
+右枠使用(+拡張時)
255系等
ON 孫子
+右枠使用(+拡張時)
上海磁浮交通
ON 千字文
縦拡張
+右枠使用(+拡張時)
中國人民鐵路
ON 源氏物語
+右枠使用(−Ψ拡張時)
321系 右上フレーム内全域
Drag
右上フレーム内マウスダウン、またはドラッグで、古典の文章を右上フレーム内に引き出す。
* 通常は自動スクロール、+拡張で手動スクロールとなるが、−拡張(及び Ψ拡張)では走行シーンの外に引き出す方式。
* 古文を読むには、おそらく一番見やすい方式だが、ウィンドウ幅右端以上に引き出せない欠点がある。特に「源氏物語」と「南総里見八犬伝」は、フルHD(1920px幅)でも完全には引き出せない。
(モバイルビューアでの見え方
   : 源氏物語東海道中膝栗毛南総里見八犬伝孫子千字文+縦横拡張
* モバイルビューアでは画面幅で表示した上で、不足分は左右スワイプで表示範囲を変更する仕組み。
ON 東海道中膝栗毛
+右枠使用(−Ψ拡張時)
0系
ON 南総里見八犬伝
+右枠使用(−Ψ拡張時)
255系等
ON 孫子
+右枠使用(−Ψ拡張時)
上海磁浮交通
ON 千字文
縦拡張
+右枠使用(−Ψ拡張時)
中國人民鐵路
ON 大将軍
縦横拡張 右枠使用
姫路モノレール ボタン上のみ
Click
右上フレームのボタンで、走行フレームの拡縮を選択可能。
さらに、拡大時に表示される、〇と×のボタンで、現役当時と廃線後を切替可。
ON 都市計画 -2
+縦横拡張+右枠使用
(+Ψ拡張表示時)
重慶モノレール 特定エリア内のみ
Click
右上フレーム内、タイトル「Opaku」文字+その下のボタン風エリアのクリックで、一時的にフレーム高を 80pxに戻す。
* 同じ場所のクリックが、オン・オフを兼用する、トグル的な切替。
* 走行シーンも縮小してしまうが、この機能の兼ね合いで、CSS3 対応ブラウザのみ。
* 一部シーンでは、Ψ拡張時にも表示される。
* 砂漠都市は、《一時的 cookie》使用の拡張表示時のみならず、すべてのバリエーションで、この機能あり。
* 五段飾りの+拡張は、2月1日〜3月3日(このサイトのフレーム読込時点)限定。
* この操作に関して、以前は「タッチ操作できない」問題があったが、ようやく原因を特定してタッチ可となった。
ON 遮光器土偶
+縦横拡張+右枠使用
(−Ψ拡張表示時)
リゾートしらかみ等
[ Kids ]
ON 砂漠都市 -14
縦横拡張 右枠使用
Dubai Metro 等
ON 砂漠都市 -15
縦横拡張 右枠使用
ON キハ82等
ON 動物園号の新旧
縦拡張 右枠使用
旭山動物園号 右上フレーム内、タイトル「Kit」文字周辺のエリアのクリックで、一時的にフレーム高を 80pxに戻す。
* 上記同様、走行シーンを縮小するので、CSS3 対応ブラウザのみ。ただし、上記が縦寸法のみ縮小するのに対し、こちらは縦横比を維持したまま縮小する。
ON 小本川橋梁
縦拡張 右枠使用
三陸鉄道 [ TB規格 ]
ON 鉄骨 -1
+縦拡張+右枠使用
(+Ψ拡張表示時)
Schwebebahn Wuppertal
ON 山男 -2
+縦横拡張+右枠使用
(+Ψ拡張表示時)
黒部峡谷鉄道
ON 宍喰駅
+縦拡張+右枠使用
(+Ψ拡張表示時)
阿佐海岸鉄道
ON 園内の駅
+縦横拡張+右枠使用
(+Ψ拡張表示時)
上野動物園モノレール
▼縦フレーム内のマウス操作 ──走行フレーム以外から走行フレームを操作する(2)
ON ティルト(上下)
+横拡張+縦枠使用
(+−拡張表示時)
京成電鉄 新AE形
[ Kids ]
スライダ上のみ
Drag (上下)
本文左側に縦フレームを出して、そこで走行画面の上下スクロールを操作する。
* 通常は自動スクロールのシーンなので、マウス操作は《一時的 cookie》使用時だけとなる。
(変更/逆方向操作
* マウス操作の方向と画面スクロールの関係を逆にする。
ON 走行展示
+枠移動+縦枠使用
(+拡張表示時)
C61等 本文左側に縦フレームを出して、そこで走行車輌の速度をコントロールする。
* 通常は自動走行のシーンなので、マウス操作は《一時的 cookie》使用時だけとなる。
ON 北の強力形
+横拡張+縦枠使用
(−拡張表示時)
キハ183系
ON 保存された古典機
+横拡張+縦枠使用
(+拡張表示時)
日鉄 1080号機(線画)
ON ロッド
横縮小 右枠使用 縦枠使用
- 本文左側に縦フレームを出して、右上フレームに表示される蒸機動輪の速度をコントロールする。
* 左上の走行フレームは、ページ・スクローラ(上下のみ)の分だけ残して縮小し、走行シーンは一切なし。
* モバイルビューア+スマホ(iOS と Android のみ)だと、動輪を走行フレームに表示した上で、傾斜で速度コントロールする。スマホで見ても、このPCサイトの表示では傾斜制御なし。……という機能は、HTTPプロトコル(当サイト)+Chrome系ブラウザでは動作しなくなった。
ON タロット(カード一覧)
+横拡張+縦枠使用
(−拡張表示時)
Hogwarts Express 同上。但し、こちらは列車固定風景走行。
* すべて蒸気機関車。定速だとアニメGIFとの違いがわからないが、可変速にすることで、TK蒸機規格の特性が明確になる。
ON ボックス動輪
+枠移動+縦枠使用
(+拡張表示時)
C57
ON スポーク動輪
+枠移動+縦枠使用
(+拡張表示時)
C55
ON ギースル
+枠移動+縦枠使用
(+拡張表示時)
D51
ON 吉備の軽便 -1
+横拡張+縦枠使用
(+拡張表示時)
井笠鉄道
ON ハチロク -2
+横拡張+縦枠使用
(+拡張表示時)
8620形
ON キュウロク -2
+横拡張+縦枠使用
(+拡張表示時)
9600形
ON 運炭 -5
+横拡張+縦枠使用
(+拡張表示時)
夕張鉄道
ON めるへん蒸機
+枠移動+縦枠使用
(+拡張表示時)
C58
ON 都市計画 -2
+横拡張+縦枠使用
(−拡張表示時)
重慶モノレール ボタン上のみ
Click
本文左側に縦フレームを出して、そこで走行画面の上下スクロールを操作する。
* 通常は自動スクロール。また、+拡張時はフレーム縦横拡張でスクロールなし。
ON 健脚必須
+枠移動+縦枠使用
(+−拡張表示時)
キハ120 上と同じく、本文左側に縦フレームを出して、そこで走行画面の上下スクロールを操作する。ただし操作方向が逆。
* 通常は自動スクロールのシーンなので、マウス操作は《一時的 cookie》使用時だけとなる。
(変更/逆方向操作
* マウス操作と画面スクロールの関係を逆にする。つまり、上の「重慶モノレール」と同じパターンになる。
ON 天候可変
+枠移動+縦枠使用
(+拡張表示時)
富士急行 本文左側に縦フレームを出して、そこで風景の天気を切り替える。
* 通常は自動切替なので、マウス操作は《一時的 cookie》使用時だけとなる。
* 縦フレームが存在しないモバイルビューアでは、自動切替を行いつつ、画面上の天気マークをタッチすることで手動切替も可能。
ON スマホで見える範囲
縦横拡張 縦枠使用
D&RGW 本文左側に縦フレームを出して、そこのボタンで走行フレーム幅を変更する。
* D&RGW = Denver & Rio Grande Western Railroad
* 模型屋っぽい風景を、各種スマホ画面サイズで切り取る。
【縦画面/Portrait】
 ├ Android 標準 = 360px
 ├ iPhone 5= 320px
 ├ iPhone 6〜iPhone X= 375px
 └ iPhone 6 Plus〜8 Plus、Xs Max= 414px
【横画面/Landscape】
 ├ Android 標準(16 : 9)= 640px
 ├ Android 縦長(19.5 : 9)= 780px
 ├ iPhone 5= 568px
 ├ iPhone 6〜8= 667px
 ├ iPhone 6 Plus 〜8 Plus= 736px
 ├ iPhone X〜(セーフエリアのみ)= 724px
 ├ iPhone X〜(フル画面)= 812px
 └ iPhone Xs〜 Max(フル画面)= 896px
* iPhone SEに関して、第一世代は5、第二世代は8と同じ。
ON 架鉄おもちゃ
枠移動 縦枠使用
架空鉄道 [ Kids ] ボタン上のみ
Click
(イントロ終了後)
イントロが終わった後に、本文左側に縦フレームを出して、そこで走行シーン左右移動を操作する。
ON 銀河
+縦拡張+枠移動
+縦枠使用
(+拡張表示時)
北海道ちほく高原鉄道 イントロが終わった後に、本文左側に縦フレームを出して、そこでフレーム高の拡大縮小を操作する。
* 通常はイントロの画面スクロールのみ。マウス操作は《一時的 cookie》使用時だけとなる。
ON ルーレット -3
+縦枠使用
(+拡張表示時)
Sentosa Express 台上 Click
+Form 入力

テーブル上、チップを置く場所をクリックするとベットする。賭けるチップの数はフォーム入力。
* チップの数を cookie に 1000日 保存する。
* チップが 0 枚になるとゲームオーバーだが、このシーンを選択しなおすと初期枚数からやりなおせる。
* 初期枚数は 9999 枚。但し、No.777 で「777」を出した記録がある場合は、77777 枚になる。さらに、DF-SLOT で 1000 coin 以上の記録があれば、各々一桁アップする。
* このページから選択できるのは「いつもの台」のみ。
* アメリカン、ヨーロピアンやフレンチ、メキシカン等の選択や、ルーレットの詳細解説は「見本切替番外・占いの館」ページへ。

bet a place :
* この本文フレーム側からフレーム超えで、縦フレーム内の「掛け金」入力フォームに数字(10〜100万)入力可。
* 余談。プロバイダDTI (Dream Train Internet) の個人ページの通信プロトコルが「http」であって「https」ではないため、掛け金をフォーム入力すると、Chromeでは「保護されていない通信(Not secure)」が赤く警告表示になる。フォームはパスワード入力などのサーバーとの通信にも使われるから仕方ない面もある。だが、DTIは個人ページにその手のサーバー負担を禁じていて、そもそも「掛け金」入力は通信の保護とは無関係。なのに警告が出るのが不快なので、数字入力をせずに「掛け金」を設定するボタンを追加した。
▼複数のフレーム内でのマウス操作 ──走行フレーム以外から走行フレームを操作する(3)
ON 黒船 -2
縦拡張 右枠使用
Susquehanna(サスケハナ)
(鉄道以外)
[ 1px=1ft ]
左上枠:
黒四角内のみ
Double Click
左上走行フレーム内、黒四角内のダブルクリックで、一時的にフレーム高を 80pxに戻す。
* ダブルクリック時のみ、黒四角内がスクローラ解除領域になる。
右上メニューフレームに、フィック錯視対策で視覚調整するスライド・レバー。
* フィック錯視とは、同じ寸法でも横より縦の方が長く見える目の錯覚。このシーンは、縦横同一寸法の正方形なのだが、この錯視によって縦長に見える。それを補正して正方形に見えるようにするため、縦寸法を縮める機能を追加。錯視の程度(強弱)は個人差があるため、最適値も人によって異なる。そのため可変調整となっている。ただし、CSS3 対応ブラウザのみ。
右枠:
スライダ上のみ
Drag (左右)
ON 多重操作
(CSS3 準拠ブラウザ)
拡張
右枠使用 縦枠使用
Class NR 左上枠:
Double Click
走行車両の速度操作と、意味のないシーン回転操作、及び走行画面上ダブルクリックでの水平戻し。
* 水平時にダブルクリックすると、天地逆さまにする余計な機能付。
* 回転は、CSS の transform : rotate() を使った表現。CSS3準拠ブラウザでしか表現できないので、古いブラウザでは不可。
* 右行、または左行のみ。どちらかは、ランダム。
(変更/全体を表示+縦横拡張
* 400px×400px までフレームを拡張して、全体を表示する。本来はシーン確認用で、表現目的の設定ではない。ゆえに一時的なフレーム縮小機能などはない。
* モバイルビューア+加速度センサーを持つスマホでこのシーンを見た場合は、スマホの傾きに抵抗して走行シーンを水平に保とうとする。但し、スマホで見ても PCサイトではその機能はなし。……という機能は、HTTPプロトコル(当サイト)+Chrome系ブラウザでは動作しなくなった。
右枠:
ダイヤル上のみ
Drag (回転)
縦枠:
スライダ上のみ
Drag (上下)
ON 曲線 -1
(CSS3 準拠ブラウザ)
縦横拡張 縦枠使用
E6系 [ Toys ] [ 上面 ] 左上枠:
Double Click
走行画面上ダブルクリックでのフレームサイズ変更と、縦フレームからの速度制御。
* 縮小時の走行フレームサイズは 245×122px、拡大時は 460×460px。
* 曲線走行は、CSS の transform : rotate() を使った表現。CSS3準拠ブラウザでしか表現できないので、古いブラウザでは不可。
縦枠:
スライダ上のみ
Drag (上下)
▲ マウスによる操作 * 以上は、マウスによる操作がメイン。
▼ マウス以外の操作 * マウスでは操作できないが、タッチ、またはキー操作のあるシーン。
▼タッチだけの操作
ON 黄色いガードレール キハ120等 Touch タッチ時だけ、ガードレールの色(黄→白)を変える。
* タッチ操作は、本来、マウス操作とセットであるべきものであり、「タッチだけ」というのは、よほど特殊な場合に限られるだろう。このシーンは、別に特殊でも何でもなく、ただ単に「タッチだけ」関数を試してみただけ。「操作できる要素がありつつ、操作する意味がない」という、試行にちょうどいい条件が整っていたので、このシーンを選んだ。
▼キーだけの操作
ON 色分解‐RGB
三陸鉄道 Key 通常は、気動車が画面外に出た時に、風景の色分解を一巡して元に戻る。
該当色のキーを押している間だけ、色一巡動作を停止した上で、該当する色分解画面をダイレクトに表示。
* キーは「R」「G」「B」、または「C」「M」「Y」「K」だが、大文字でも小文字でも可。
* 空白キー(英数モード)を押すと、分解色一巡を強制解除。
* キー操作は、走行フレームがアクティブになっている場合に限られる。操作できない時は、一度、走行画面クリックが必要。
* フレームを使ったデザインでは、ページが複数存在するのと同じ状況にあるため、キー操作の対象も複数から選択することになる。それが、アクティブなフレームか否か、ということであり、左上フレームがアクティブになっていないとキー操作できない原因だ。つまり、フレームとキー操作の相性が悪いということでもある。
ON 色分解‐CMYK
由利高原鉄道
ON 打鍵 -1
+縦横拡張
和歌山電鐵 背景にキーボードを表示し、一部のキーボード操作に反応して押したキーだけ青く光る。
* キー入力を受け付ける(走行フレームがアクティブ)の時は、反応するキーだけが、少し明るくなる。
* Windows か Mac かで表示されるキーボードが少し違う。但し、W キーを3秒以上押し続けると Windows キーボードに、M キーを3秒以上押し続けると Mac キーボードに切り替わる。
* キーボードは、テンキー付の JIS配列。
(変更/打鍵速度測定
* A から Z までのアルファベット順打鍵の速度を測定する。A キーを押したところから測定開始し、順番を間違えることなく Z まで達したところで測定終了。結果は上部に表示される。
* 走行フレームがアクティブな時以外は、測定結果表示部分を隠す。
(変更/キーコード表示 - onKeyDown
* JavaScript をコーディングする人にだけ便利な機能。onKeyDown イベントのキーコードを表示。
* onKeyDown は、押されたキーの「位置」で判別するので、上段の数字とテンキーの数字を区別できる。その代わり、キーの位置が同じアルファベットの大文字と小文字を区別できない。
* onKeyDown では、ファンクションキーや、Shift キー、Ctrl キーのキーコードも取得可能。
* ↓下記(-2)= onKeyPress も含めて、主要なキー(数字やアルファベット等)以外は、ブラウザによってキーコードが違うこともあるので注意が必要。また、Firefox 以外のブラウザでは、Back Space キーや Enter キー など特別な機能を持つキーのコード番号は表示できない。
ON 打鍵 -2
+縦横拡張+右枠使用
Key

BSボタン上のみ
Click
上記に、簡易文字入力機能を追加。入力した文字(英数のみ)が、右フレームに表示される。
* テンキーなしの、Mac US キーボード。Mac JIS と違い、配列が Windows キーボードに近い。
* Firefox だけ、入力文字を Back Space (Mac は Delete)キーで消すことができる。
* 他のブラウザでは Back Space キー本来の機能をキャンセルして走行シーン用に使うことができないので、やむをえず、キーボード画像上 Back Space キーの位置をクリックすることで、文字消去させる機能も付けた。但し、キー入力をしないと、この機能は有効にはならない。
* 青色反応のない文字でも、一部、入力可能な文字がある。
(変更/ホワイト・キーボード
* 配列が Mac US キーボードなので、Mac っぽい白も作ってみた。
* キー反応表示色と文字色は、青ではなく、ピンクになる。
(変更/打鍵速度測定
* 打鍵 -1 だけでなく、-2 にも打鍵速度測定機能あり。
* 入力文字の表示を止め、代わりに A から Z までのアルファベット順打鍵の速度を測定する。A キーを押したところから測定開始し、順番を間違えることなく Z まで達したところで測定終了。結果は右フレームに表示される。
(変更/キーコード表示 - onKeyPress
* JavaScript をコーディングする人にだけ便利な機能。onKeyPress イベントのキーコードを表示。
* onKeyPress は、押されたキーの「文字」で判別するので、数字は上段入力とテンキー入力を区別できない。一方で、アルファベットの大文字と小文字は区別される。
* onKeyPress では、ファンクションキーや、Shift キー、Ctrl キーのキーコードは取得できない。
▼スマホ・センサーによる操作
ON 傾斜でGO
(iOS/Android)
縦横拡張 一部本文枠使用
京王電鉄 [ Kids ] 本体の傾斜 スマホやタブレット(iOS と Android のみ)を傾けた方向に加速する。
* 加速度センサーのないパソコンでは操作不可。ただ走るだけ。
* 加速度センサーのない古い低性能スマホでは、スマホ判定されてしまう上にセンサー情報がないので、車輌が走らない。
* Chrome は、傾斜に反応しなくなった。どこかのバージョンから、各種センサーへのアクセスを「HTTPS」プロトコルに限定したため。その結果、旧来の「HTTP」プロトコルの当サイトのシーンは、この種の表現からは排除された。
* Chrome と同じ Blink エンジンを使っている Chromium ブラウザ(新Edge、Opera等)も、傾斜に反応しない。
* iOS と Android しか対応せず、少数派のスマホOSを見捨てている。が、何故か User-Agent に「Android」の文字を含む Windows Phone は、Android と判定されるはずだから動作すると思われる。……2017年末時点で、iOS と Android 合わせて世界のモバイル市場シェア 99%超というから、他を見捨ててもさほど問題はないだろう。
* Mobile Viewer では走行画面だけ。このページを含むパソコン用サイトでは、iPhoneX風の枠付き。走行見本切替ページでは、iPhoneX 全体を示す枠線を、この本文フレームに表示する。

* X軸とY軸の加速度によりスマホの傾斜方向をチェックして、電車に加速度を与える仕組み。Z軸方向の加速度が最大になった場合(=伏せる、または画面を上にして水平に置く)、傾斜なしとして表示する。
* 電車には慣性しかなく、空気抵抗も走行抵抗も設定していない。傾斜ゼロ状態では、減速せずに一定速度を維持してしまう。宇宙船状態。


<< 前頁へ戻る