ネットスケープ・メテオズ

 (erynwells.me)
2 ポイント 投稿者 GN⁺ 2023-08-04 | 1件のコメント | WhatsAppで共有
  • 子どもの頃のWebの記憶とつながっていた Netscape Navigator の 「meteors」ローディングアニメーション の原本を探す作業が数日間続き、基準となる原本サイズは 60×60 px だった
  • Webで見つけた候補は原本と異なっており、特に 400×400 px 版は大きすぎ、ピクセルが長方形のように変形していて信頼しにくかった
  • Netscape 5.0 の GitHub ミラーや Mozilla FTP の古いソースアーカイブまで確認したが、アニメーションファイルはすでに削除されていた
  • Mastodon で助けを求めると、友人が Jamie Zawinski をタグ付けし、Netscape Navigator の作業に参加していた彼が送ってきたページから原本を見つけることができた
  • 原本には フレーム10の左側 に小さなアーティファクトが残っており、周囲のピクセルに合わせて補正した 60×60 px と 240×240 px の修正版が作られた

Netscape アニメーション原本を追跡した過程

  • 目標は Netscape Navigator の 「meteors」アニメーション の原本を見つけることだった
    • このアニメーションは、筆者にとって子どもの頃にWebを発見していた記憶と強く結びついたイメージだった
    • 原本サイズは 60×60 px だった
  • Web検索でいくつかの候補を見つけたが、原本と見るには不十分だった
    • あるバージョンは 400×400 px で大きすぎた
    • 誤ったサイズ変更のため、ピクセルが長方形のように変形していた
  • ソースアーカイブの探索もすぐには成果につながらなかった

Jamie Zawinski の返答と修正版

  • Mastodon で助けを求めたあと、友人が @jwz をタグ付けして、ファイルを持っているか尋ねた
  • Jamie Zawinski が直接返答し、彼が送ってきたページから Netscape meteors ローディングアニメーションを見つけることができた
    • Jamie Zawinski は 1990 年代に複数のソフトウェアプロジェクトに参加し、Netscape Navigator の開発にも関わっていた
    • 彼は Xscreensaver を作成・保守しており、現在はサンフランシスコの DNA Lounge を運営している
  • 見つかった原本には フレーム10の左側 に小さなアーティファクトが残っていた
    • その部分は赤色とオレンジ色のピクセルのようにレンダリングされていた
    • 筆者はそれらのピクセルを周囲になじむピクセルに置き換えた修正版を作成した
  • 修正版は 60×60 px 版と、より大きい 240×240 px 版として作られた

関連記事

1件のコメント

 
GN⁺ 2023-08-04
Hacker News のコメント

  • winworldpc.com から入手した Netscape Communicator から、かなり簡単な手順でアニメーションを抽出できた: binwalk -e cc32d48.exe, cd _cc32d48.exe.extracted, unshieldv3 extract comm.z comm, python extract_images.py --ico --png -d ns/ ~/Downloads/Netscape/_cc32d48.exe.extracted/comm/program/*.dll --continue-on-errors
    ここでの extract_images.py は https://github.com/akx/res-extract プロジェクトのツール。以前、誰かが Excel 95 のアイコンを必要としていたので作ってあげたもの
    ただし結果は記事に出てくる見事な 60x60 ではなく、32x32 フレームだけだった: https://i.imgur.com/sXcEEDU.png

    • モバイルでは imgur ページの実画像を見るのがほぼ不可能。不満を言いたいわけではないけれど、上には巨大な Futurama 広告、下にはプロモーションコンテンツがあり、画面の約 3% だけがその画像で、ちょっと面食らう。もちろん画像の高さが 30px しかないせいではある
    • 「以前、誰かが Excel 95 のアイコンを必要としていたので作ってあげた」というなら、reshacker.exe も紹介したい: http://www.angusj.com/resourcehacker/
      十代の頃、これで Windows のグラフィックを変えてよく時間を費やしていた。例えば Windows の起動画面や PC の終了画面の画像を変える、といった具合で、楽しい時代だった
    • 名前から気づくかもしれないが、これは記事で扱われているものより後の、より派手で色数の多い Netscape Communicator のバージョン。一般に「Netscape 4」と呼ばれるもので、より金色っぽく、より「ディテールのある」UI だった
      記事はおそらく Netscape Navigator バージョン 3、つまり「Netscape 3」のアニメーションを扱っているようだ
      Navigator: https://duckduckgo.com/?q=netscape+navigator&t=h_&iar=images...
      Communicator: https://duckduckgo.com/?q=netscape+communicator&t=h_&iar=ima...
    • こうなると、流星アニメーションのバージョンが全部でいくつあったのか気になってくる
      ループ部分だけを切り出したアニメーションはここにある。最初のフレームは除外されている: https://i.ibb.co/DMDBR7L/Netscape-Communicator-Meteor-Loop.g...

  • Dataglyph のウェブサイト（Marsh Chamberlain）のアーカイブに、このアニメーションの別バージョンがある: https://web.archive.org/web/20011214155044/http://dataglyph....
    もっと古いサイトのバージョンでは、使われなかったアイコンである回転するコンパスも Dataglyph が作ったとされている: https://web.archive.org/web/19981206034010/http://www.datagl...

    • こういうものをどうやって見つけるのか不思議だ

  • 全部ここにある。Netscape 4 のものだけではない: http://www.netscape-communications.com/netscapes-throbber-an...

    • サイトが復活しているついでに見てみたが、本当に全部かどうかは分からない。原文に出てきたものはないようだ。原文のものも Netscape 4 ではなさそうで、[1] によると原文が探していたのは Netscape 1、つまり著者の言う「original Netscape Navigator」のほうに見える
      そして [1] の画像には改変された形跡がある。白い縁取りがあり、最後の数フレームが欠けているようで、パレットもぴったり合っていない。一方、原文のパレットは当時の雰囲気が正確で、記事の要点をいっそう強めている
      [1]: https://www.versionmuseum.com/history-of/netscape-browser
    • 何千人もが見ていたものの小さな一部を、誰かがブログ記事で再現するために時間をかけたというのは皮肉だ。情報が島のように散らばっている時代という感じがする
    • そのサイトは HN のトラフィックに耐えられなかったようだ。それでもブログ記事は生きている
    • NCSA Mosaic は最高だった。特に SunOS で動かしていた頃が懐かしい

  • あのディザリングと量子化されたパレットの組み合わせが、当時を強烈に思い出させる

    • Web セーフカラー（web-safe colors）を本当に久しぶりに思い出した
    • 一番下の横並び比較を見ると、特にディザリングされた赤が興味深い

  • ああ、Netscape Navigator のアイコン。温かい思い出だ。Netscape のサイトとブラウザの色合いは美しく、心地よかった
    流星が動いていればインターネットに接続できていると思い、動いていなければあとでまた電話をかけ直す必要があった

  • 当然ちょっと笑える話ではあるけど、IE 3 と 4 はアニメーションの速度のせいで、Netscape より常に速く「感じられた」
    Microsoft がそういう印象を狙って、わざと速く作ったのか、ずっと気になっていた

    • 確かに違いはある。Facebook チームは iOS アプリ起動時のローダーを、Facebook 風の縞模様 ||||| から標準の iOS スピナーに変えた。ユーザーが Facebook のローダーだと Facebook が遅いと感じ、iOS のスピナーだと iPhone が遅いと感じたからだ
    • まったく笑い話ではなく、むしろ人間の心理に近い。実際にはより遅くても、反応が見えるとより速く感じる、という記事を昔読んだことがある
      自分で試すなら、好きな言語でボタンが3つあるアプリを作ればいい。1つ目のボタンは9秒待ってから「done」と表示、2つ目のボタンは10秒間、1秒ごとに進捗バーを更新してから「done」と表示、3つ目のボタンは10秒間、100msごとに進捗バーを更新してから「done」と表示する。どれが一番速く感じるか見ればいい
    • それを調べてみたい。途切れたりカクついたりするスピナー／ローダーの有無に応じてUI 変化のタイミングを合わせ、ユーザーの認識がどう変わるか比較できるとよさそう
      滑らかだという感覚があると、機械がうまくプログラムされ整理されているように感じるが、遅い GIF アニメーションは何かがおかしいという印象を与える
    • Windows ロゴの後ろで雲が動くアイコンのこと？ 自分のノートPCでは速度がばかげて速くて、雲がワープ速度で動いているみたいだった。IE 3 だったかは覚えていないけど、いつも変に見えた
      修正: IE 2 だった
    • 初期の IE バージョンは本当に速く、機能も多かった。実行ファイルのサイズもかなり小さかったし

  • ノスタルジーを見事に突いてくる。ワールドワイドウェブに加わるには本当にいい時代だった

    • 余計な装飾のない、純粋な Web だった時代
      その後 Netscape が JavaScript を作り、最初は Mocha/LiveScript だったが、結局いまの姿にまで至った
    • 自分の最初期のプログラミングプロジェクトの一つも思い出した。先生が Netscape 用の宇宙船ゲームを作っていて、自分はそれを IE の UI モデルに移植した
      当時は標準化された DOM がなく、記憶では非互換性を強制することが Microsoft の戦略の一翼だった

  • ここに .net と Wired 誌の山を置いておくから、モデムのハンドシェイク音を聞けばいい

    • 「Yahoo! Internet Life」誌も忘れてはいけない

  • もともとのアニメーションがどんな工程で作られたのか知っている人はいるだろうか？ 各フレームを手で描いたのか、それとも別の手法を使ったのか気になる

    • フレームを直接描いたのだと思うが、当時は ANI を GIF に変換するツールもあった
      だから 3D Studio Max や SGI の Maya、あるいは Amiga の Lightwave で作って、.ANI を経由して .GIF にした可能性もある
      もしそうなら、元のプロジェクトファイルを掘り出して、見事な 8K レンダリングを作る道もあるかもしれない
    • こういうハック的なワークフローだったのだと思う。基本アニメーションとライティングのレンダリングは Autodesk 3D Studio R3/R4（DOS）や Lightwave 3D（Amiga）のようなもので行った可能性があり、手作業でやるにはあまりに地獄だったはず
      その後にパレット最適化用のカスタムソフトウェア、合成用の Mac Photoshop、そしてフレームごとの手作業が混ざっていたのだろう。順序は必ずしもこの通りではないかもしれない
      3ds Max は1996年、Maya は1998年に登場した。ただし Netscape は SGI で有名な Jim Clark が創業したので、3D 作業はおそらく SGI マシン上で動くソフトウェアで行われた可能性が高い
    • 個別フレームを横につなげたビットマップ画像だった。しばらくの間 Web 上に多く、人気もあったアニメーション GIF でこういうものを作る方法は一般的だった: http://leighb.com/throbgif.htm

  • インターネットというものが、誰でも Borders Bookstore で厚さ6インチの本を買い、座って読んで HTML を学んだあと、すぐに試してキャリアを築けそうに感じられた時代だった
    実際に自分はそうしたし、始めたときは Netscape の中に入っていたプログラムを使っていた