JavaScriptでSLを走らせる「SL.JS」を作りました

開発に関わっていて、UNIX（Linux）を触った事のある人は「SLコマンド」をご存知の方が多いのではないでしょうか？

lsを間違えてslと打つとこんなのが煙を吹きながら走る sl(1) コマンドを作りました．

via: 豊田正史とslコマンド (Masashi Toyoda and SL command)

ファイル一覧を出力する「ls」をtypoして「sl」と打ってしまうと、文字通りSLが画面を走り抜けるというすばらしくくだらない仕組みなのだ。いわゆる、ジョークコマンドの一つとしてとても有名で、多くの開発者の気持ちを和らげた（腰を砕いた）ことでしょう。
さて、そんなくだらないジョークコマンドを懐かしんでいると、JavaScriptでSLを動かしてみたくなってしまったので作ってみました。
・SL.JS
ブックマークレット方式にしてあるので、上のSL.JSリンクをブックマークして下さい。
どんな動きをするか気になる人は、とりあえず上のSL.JSリンクを押しちゃって下さい。
あと、自分のブログにも貼ってみたいって人は下記タグをはれば良いかも。

<a href="javascript:(function(){var d=document,sl_open,sl_run,sl_close,s=d.createElement('script');s.charset='UTF-8';s.src='http://labs.creazy.net/sl/bookmarklet.js';d.body.appendChild(s)})();">SL発車！</a>

とりあえず色んなページを走らせてみた

せっかくだから、鉄道に関係しそうなサイトをね。

鉄道博物館 – THE RAILWAY MUSEUM –
先日行ってきたもんで・・・

銀河鉄道999
サイトはちょっとヒドいけどね。

JR東日本：東日本旅客鉄道株式会社
脱線事故のお詫びずっと出てますね。

豊田正史とslコマンド (Masashi Toyoda and SL command)
そして、もちろん「SLコマンド」生みの親の豊田さんのサイトでもw

ちょっとだけ仕組みの話

このSLはテキストだけで作られているのですが（AAみたいなもんだね）、文字は本家のものをそのまま拝借しました。で、文字を動いている様にみせるために可動部分を差し替えたSL文字列を６つほど用意して、document.element.innerHTMLで順番通りにすり替える感じです（パラパラ漫画の要領）。
で、DHTML的な手法でSLが入っているDIV要素の位置を動的に右から左に動かしていけば自然な感じになります。あと、サイトによってはSL文字列が見難いところが多かったので、黒い半透明なレイヤーを背景として表示して、SLは白いフォントカラーにするように工夫してみました。
まあ、興味がある人はJavaScriptなんで、ソース見て下さい。
・bookmarklet.js
なんだ、こんなに簡単かよとか言わないように。
（むだに200行くらいあるのは、ほとんど見た目のエフェクトとかスタイルのためのコード）
動作確認環境は、
・Windows XP
　　- Internet Explorer 7
　　- Firefox 2
　　- Opera 9.25（by 名無しさん 2008/02/17）
・Mac OS X 10.4.11
　　- Firefox 2
　　- Safari 3
・Linux(Ubuntu7.10)
　　- Firefox 2（by Sore_0さん 2008/02/17）
です。他の環境で試された方は動作報告頂けると助かります。

まとめ

いやー、くだらない事に時間を使うのってなんでこんなに清々しいのでしょうか。
Webだけに、もうちょっとSLで色々遊べる方法があるんじゃないと思っています。
SL好きな人（あ、オレそんなに好きなわけじゃないけどw）とか、技術的に何か思い付いた人いたら一緒にくだらない事を考えてみませんか？ささいな思いつきとかでも良いのでコメント下さい。
あと、不具合／動作報告もできたらよろしくお願いします。
ネタ元を明らかにしてこのページにリンクはるなりしてもらえればJSスクリプトをコピーしたり、改変したりもOKです。面白いのできたら教えて下さい。

追記

[2008/02/17] コメントを頂いたSore_0さん、名無しさんの動作確認情報を追加しました
[2008/02/18] バナーを作りました
[2008/02/19] SLコマンド本家の豊田正史さんからコメントを頂きました
[2008/02/22] SL友の会に登録されました

関連エントリー

・「SL.JS」が「SL友の会」に登録されました
・豊田正史さんとTwitterと「SL.JS」
・祝！「SL.JS」ホッテントリ記念にバナー各種作りました

鉄子の旅 1 カラー特別版 北海道編 (1) (IKKI COMICS スペシャル) 菊池 直恵 横見 浩彦 小学館 2007-12 by G-Tools

がんばれ!銚子電鉄 ローカル鉄道とまちづくり 向後 功作 日経BP社 2008-01-24 by G-Tools

DVD SLベストセレクション BOX TVドラマ NHKエンタープライズ 2003-02-28 by G-Tools