Creazy!

WEBエンジニア・ヤガーのテック・ガジェットブログ

Bookmarklet 開発実績

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

投稿日:


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
銀河鉄道999
サイトはちょっとヒドいけどね。
JR東日本
JR東日本:東日本旅客鉄道株式会社
脱線事故のお詫びずっと出てますね。
豊田正史とslコマンド
豊田正史とslコマンド (Masashi Toyoda and SL command)
そして、もちろん「SLコマンド」生みの親の豊田さんのサイトでもw

ちょっとだけ仕組みの話

このSLはテキストだけで作られているのですが(AAみたいなもんだね)、文字は本家のものをそのまま拝借しました。で、文字を動いている様にみせるために可動部分を差し替えたSL文字列を6つほど用意して、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」ホッテントリ記念にバナー各種作りました

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

by G-Tools

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

by G-Tools

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

by G-Tools

-Bookmarklet, 開発実績

執筆者:


  1. Sore_0 より:

    笑わせてもらいました。
    Linux(Ubuntu7.10) + Firefox2で動作。
    とりあえず、ご報告まで。

  2. 匿名 より:

    WinXP + Opera 9.25で動きました。
    Safariだとブラウザごと落ちましたw

  3. yager より:

    >Sore_0さん
    楽しんで頂けて嬉しいです。
    動作確認ありがとうございました。
    本文に追記させて頂きました。
    >名無しさん
    動作確認ありがとうございました。
    ブラウザごと落ちたSafariはWindowsのですか?
    だったらスイマセン。Win版Safariのせいにしちゃだめですか?w

  4. alm-ore より:

    SL.JS

    UNIX系システムでファイルリストを表示するコマンドに “ls” というのがある。 頻繁に “ls” と間違えて “sl” とタイポしてしまう人をからかう…

  5. 2008-02-24

    ファイル一覧を出力する「ls」をtypoして「sl」と打ってしまうと、文字通りSLが画面を走り抜けるというすばらしくくだらない仕組みなのだ。いわゆる、ジ…

  6. POPO より:

    ネットゲーム「ブラジャータウン」(TOWN ver.1.40)の自分のお店内で
    ご紹介のブログ用タグをコピペしたら見事店内を雄壮に走り出しました。
    ブックマークレット方式も、問題なく動作します。
    Mac OS X 10.3.9 + Firefox 2.0.0.15 です。

  7. hogehoge より:

    [vimperator]しゅっぽっぽ.js プラグイン

    元ネタ:JavaScriptでSLを走らせる「SL.JS」を作りました ::: creazy photograph 有名な(?)、slをVimperat…

  8. Blucky より:

    WinXPHome + Google Chromeでも動きましたw

comment

メールアドレスが公開されることはありません。

関連記事

YouTube Downloader の大幅アップデート(2009-03-22)

YouTube HD Suiteを公開してから、更新する予定はなかったYoutube Downloaderですが、久しぶりにアップデートしました。 前バージョンをインストールされている方は微妙な変化に …

no image

YouTube HD Suite更新(2010/08/02 iPod用フォーマット復旧)

【2010/08/02:追記】 YouTube HD Suite 公式ページができました。 先日のアップデート以来YouTube HD Suiteでは技術的な理由で一部の画質がダウンロードできなくなっ …

YouTube HD Suiteが100万インストール達成!

・YouTube HD Suite 公式ページ [C!] YouTubeを高画質で再生したり、ダウンロードできるようにするUserScript(Greasemonkey)であるYouTube HD S …

「Google Analytics with SBM」ページタイトル表示などUI改善

Google Analyticsの画面中でソーシャルメディアカウンターの値が確認できる「Google Analytics with SBM」のアップデートを行いました。現在、はてブ・Twitter・F …

ミイル(miil)にアップロードした写真をブログに貼り付けるためのHTMLをコピーするブックマークレット

みなさん、お料理写真をおいしそうに写すことができてTwitterやFacebookに共有できるミイル(miil)は使っていますでしょうか?ボクは外食したときにスマホで写真を撮ることが多いのですが、自分 …

スポンサードリンク

スポンサードリンク