世界を動かす技術を、日本語で。

The title "and (2020)" can be translated into Japanese as: と (2020)

概要

  • <blink>タグ<marquee>タグ の歴史的背景
  • 90年代ウェブデザインにおける役割と流行
  • NetscapeInternet Explorer による実装の違い
  • アクセシビリティプログレッシブエンハンスメント の観点
  • 現代における評価と再現方法

90年代ウェブデザインの象徴:<blink><marquee>タグ

  • <blink>タグ<marquee>タグ は、1990年代のウェブ黎明期を象徴するHTML要素
  • 若い世代の開発者には馴染みが薄い存在
  • 当時の代表的なウェブデザインツール Macromedia Dreamweaver でも、<blink><marquee>の組み合わせはアンチパターン扱い
  • Lou Montulli (Lynxブラウザ開発者、後にNetscape所属)が<blink>の発案者とされるが、実装には直接関与せず
    • バーでの会話から「Lynxでも動作する一番派手な効果は点滅」と冗談を言ったことが発端
    • 匿名のエンジニアが深夜にハックして実装
  • Netscape Navigator 2.0 (1995年リリース)で<blink>が初登場
    • 同時に アニメーションGIFJavaScript の初期バージョンも導入
  • <blink>タグの記法例:<BLINK>This is my blinking text!</BLINK>
  • <blink>は当初からジョーク的要素が強く、HTML4でも「冗談」として記載
  • しかし90年代後半には個人サイトで多用され、「最新情報」などを目立たせる用途で利用

<marquee>タグの登場と機能

  • Microsoft Internet Explorer 2.0 (1995年リリース)でも<Netscape>の機能を追従
  • <blink>の「冗談」に乗らず、独自に <marquee>タグ を実装
    • テキストのスクロール方向、速度、ループやバウンスなど多彩な属性
  • <marquee>はデフォルトで「不快かつアクセシビリティに悪い」デザインを助長
  • 記法例:<MARQUEE>Oh my god this still works in most modern browsers!</MARQUEE>

両タグの組み合わせと互換性

  • 90年代後半、一部では<blink><marquee>両方ラップ する手法が流行
    • Netscapeでは点滅、IEではスクロールやバウンス効果
    • 記法例:<MARQUEE><BLINK>This is my really important message!</BLINK></MARQUEE>
  • Postel’s Law (受け入れは寛容に、出力は厳格に)に基づくウェブ設計思想
    • 未知のタグは無視してもコンテンツ自体は表示される
    • <video>タグがブロック要素になった理由も同様

プログレッシブエンハンスメントとアクセシビリティ

  • <blink><marquee>の組み合わせで「どちらかのブラウザで効果が出る」設計
  • サポートされないブラウザでも テキスト自体は読める ため、最低限の互換性確保
  • 本来のウェブ設計は「まず全員が使えるものを作り、対応環境では追加の体験を提供」
    • JavaScriptやCSSも同様の原則
    • 保守性やアクセシビリティ向上に寄与

Operaユーザーの体験とNetscape 7の特異性

  • 有料時代の Opera ブラウザ利用者は<blink><marquee>の効果をほぼ体験せず
  • Netscape 7 (2002年リリース)は両タグをサポートした稀有なブラウザ
    • タグの順序やネストにより表示の挙動が異なる
    • 両方の効果が同時に現れ、非常に「目に痛い」デザインに

現代における評価と再現方法

  • <blink>タグは 完全に廃止 (CSSで再現可能だが非推奨)
  • <marquee>タグは 一部ブラウザでまだ動作、ポリフィルも存在
  • 現代での使用は推奨されず、 ノスタルジー目的以外で使うべきではない
  • デジタル懐古趣味として楽しむ範囲に留めるべき

まとめ

  • <blink><marquee>はウェブ初期の「悪名高き」遺産
  • 技術的な冗談や実験が、時代の流行を生み出した歴史
  • 現代のウェブ開発では アクセシビリティプログレッシブエンハンスメント が重視される
  • ノスタルジーを感じたいなら、実際に使うのではなくシミュレーションや歴史資料で楽しむのが賢明

Hackerたちの意見

https://web.archive.org/web/20201111125145/https://danq.me/2...

3000年前にそこにいたよ。フレームでのナビゲーションが悪い実践かどうかで争ってたのを覚えてる。iframeじゃなくて、フレームね。ここにフレームを覚えてる人いる?HTTP 204を使って、ページをリロードせずにサーバーにメッセージを送ってたのも覚えてる。2000年代初頭に、プロとして画像マップを作ってたのも。国の地図に州の境界を描くのに何日もかけて、クリックできる地図を作ったりしてた。Dreamweaverのテンプレートを使って、みんなが間違って更新して変更を失ったり、バージョン管理を使ってなかったから戻せなかったり。画像のどこをクリックしたかをバックエンドで処理してたのも覚えてる。モーションJPEGでページにストリーミング更新してたのも。今でもChromeでは動くけど、Firefoxではあんまり安定してない。IEのPNG修正に向けてのいろんなステップも覚えてる。アルファブレンディングを実現するために... それがActiveXのものがなんとか動くようになるまで。結局、好みが変わって、すべてがフラットになって、もう必要なくなったんだよね。Java、Flash、Silverlightでサイトのナビゲーションを作ってたのも覚えてる。スペーサーGIFや条件付きコメント、Firebugがどれだけ神のような存在だったかも。いつの間にか年を取ったのか、ある日突然そうなった感じ。

フレームを使ってウェブチャットを作ったことがある。テキスト用の無限にロードされる上部と、メッセージを送ったときにリロードしないために204を受け取る入力ボックスの下部。IE4+の時代では、これが一番エレガントな方法だったと思う。上部は、右側のフレームをリロードする小さなものも受け取れた。楽しい時代だったな。2000年頃にクラスメートと一緒に使ってた気がする。

そこにいたし、(ほとんど)これをやったことがある。Silverlightは使ったことないけど、VRMLやJava Applets、Chromeffectsは使ったことがある。画像マップを手書きで作って、Photoshopから直接ポイント座標を取得してたのも覚えてる。バージョン管理については、変更を加える前にウェブサイトのバックアップを作ることを早い段階で学んだ。私たちのバージョン管理は/site/yyyymmdd/だった。

フレームって覚えてる人いる?俺は週に何回もフレームのサイトに行くんだけど、Open Group/POSIXの人たちには、今は使っちゃダメって誰も教えてないみたいだね。

Photoshopのスライスツールを使って、HTMLテーブルにぴったり配置されるGIFをエクスポートしてたのを覚えてる。デザインは800x600に最適だったな。あの瞬間たちが、雨の中の涙のように失われていく。

俺は、これらの瞬間が雨の中の涙のように失われていくって言われると思ってたよ。

フレームを使ってウェブソフトを開発してたことがあって、当時はそれが全然問題ないと思ってた。今でもフレームの何が問題なのかよくわからない。たまにスクリーンリーダーのアクセシビリティについて言われるけど、それ以上の具体的なことは聞かないから、実際の問題が何なのかは謎のまま。

IE6をサポートしなきゃいけないクライアントのために働いてた時のことを思い出す。あの狂ったバグや制限があって、デザイナーが丸角のPhotoshopデザインを渡してくるたびに絶望してた。しかもレスポンシブにしなきゃいけなかったから(当時は主にデスクトップのサイズが違うだけだったけど)。角を切り取ってテーブルセルに配置する必要があったんだ。こういう手作業をすることで、開発者としてのタフさが身につくんだよね!

お前らが信じられないようなことを見てきた。オリオンの肩で燃える攻撃艦。タンハウザーゲートの近くで暗闇に光るCビームを見た。あの瞬間は時間の中で失われていく、まるで…。

ボーダー半径が出る前に、丸いコーナーの流体ビューを作ったことを覚えてる。

お気に入りのトリックは、異なる方向でネストさせることだった。内側のマルキーを外側のマルキーと同じ速度で逆方向に移動させることで、内容をスクロールと停止で交互にすることができた。もっとレベルを増やして、速度を交互にしてランダムに動かすこともできたと思う。これを機能させるには、内側のマルキーに最大幅を設定する必要があったかな?

「獣は復讐の渦巻く雲に包まれて現れる。信じない者の家は焼き払われ、彼らは地に焼かれる。彼らのタグは終わりの日まで点滅し続ける。」 > 『モジラの書』12:10(about:mozilla) そして今、モジラは地に焼かれている。終わり。

わからないけど、今でもFirefoxをメインブラウザとして使ってるよ。

ブリンクタグは、もちろん昔はすごく嫌われてたから、実験として、使ってたブラウザのバイナリ(多分Netscape)を取り出して、「blink」を探して「blonk」に変えたんだ。はい、もう点滅しなくなった!

そうだけど、もし誰かが使ってたら…ブロンキングになるのかな? :) いいハックだね!

Slackクライアントでこういうことやってるよ(Electronアプリのいいところ:めっちゃ簡単)。通知を隠したり、メッセージを書いてるって信号を止めたりする機能を消せるんだ。

バイナリエディティングは楽しかったなぁ。確か、__gnu_warning__gnu_whiningに置き換えたことがあった。gets()の周りのうるさい警告を消すためにね。まあ、バッファオーバーランの問題はあるけど、使い捨てのプログラム書いてる時は、バッファをオーバーランしないようにすればいいだけだし。

友達がいつも自分のミドルネームを``で囲んで、エスケープが抜けてるか、XSSのテストをしてたんだ。昔はこれが意外と効果的で、問題を見つけるのに役立ってたよ :-)

これをちょっと前に作ったんだけど、誰かに見せると、JavaScriptが全く使われてないことにみんな驚くんだ。アニメーションは全部マルキータグでやってるよ: https://udel.edu/~ianozi/

マルキータグを見たのは20年ぶりくらいだから、もしかしたら忘れちゃったかもしれないけど、縦スクロール用の方向パラメータがあるなんて知らなかった。

マルキーはすごく便利だと思う理由が一つあるんだ。それはHTMLインジェクションのテストに使えるから。マルキーは動くし、意図的に使う人がほとんどいないタグだから、攻撃が成功したときにわかりやすいんだ。技術に詳しくない人にHTMLインジェクションの影響を見せるのにも役立つし、やっぱり動くからね。「これが動いてるけど、本来は動くべきじゃない」っていうのは、「このテキストが太字だけど、本来は太字じゃない」よりも理解されやすいんだ。

HTMLのサニタイズをする時、いつもマルキーをイースターエッグとしてホワイトリストに入れてるんだよね(他はほとんど入れないけど)。

Hacker Newsはカスタムアグリゲーターを通して見てる。この投稿でHTMLインジェクションに弱いことを知ったんだ。2020年の投稿が画面をマルキーで流れてた。

ああ、いい時代だったな。しばらく自分のコンピュータで「大学の寮のフロア」ウェブサイトを運営してて、997語のマルキーを載せて、女の子や鬱、哲学についてダラダラ話してた。最後には隠しページへのリンクがある感嘆符があったんだ。もちろん、誰かがソースを見に行って、長すぎるメッセージを読んじゃったんだよね。

90年代のウェブ:Blinkはほとんど完全にイライラさせるために使われてた。要するに、使い方は全部ウザかった。Marqueeは、無視したい時に無視できる、横に流れる遅いニュースティッカーだったね。