HN 日本語サマリー

← 一覧へ戻る
Web開発

今日、7,234個の古いGIF画像を救出した

Today I Rescued 7,234 Old GIFs (danq.me)

118 pointsby birdculture13 コメント

要約

著者は、1990年代に収集された数千ものGIFアイコンのコレクションであるIbiblio Icon Browserを救出する過程を詳述しています。このコレクションは、サーバーサイドのImagemap を使用した古いウェブサイトに保存されており、直接ダウンロードが困難でした。著者は、Imagemap の仕組みを解析し、座標からリダイレクトURLを推測することで、すべてのアイコンを取得し、現代的な静的サイトとして再公開しました。

全文翻訳

今週、GlitchyZoruaさんが、1990年代にGioacchino La Vecchia氏によってキュレーションされた数千ものGIFアイコンのコレクションであるIbiblio Icon Browserについて私の注意を引きました。 Glitchyさんの目標は、アイコンのコピーをすべてアーカイブすることでしたが、それは…困難であることが判明しました。 今日見かける可能性のある、より90年代らしいウェブサイトはありません。それは pretty simple に見えます:(a) インデックスページ、そこから (b) 24個のサブインデックスページ、そこから (c) 57個のアイコンディレクトリページ、これらが (d) 114個のアイコンコレクションを表しており、最大で (e) 7,296個のアイコンが含まれています。ほとんどが32×32ピクセルですが、常にそうとは限りません。 しかし、ディレクトリページからアイコンファイルへ移動しようとすると、課題が生じます。リンクをクリックしているように見えますが、実際には…Imagemap をクリックしています。 私は以前にもImagemap について話しましたが、その本質は、画像上の領域を定義し、クリックされると異なる場所にハイパーリンクすることです。これらの中で最も一般的な方法は、常にクライアントサイドImagemap でした。HTMLコード自体にすべての座標と、決定的なのは、結果の宛先が含まれていました。しかし、これは私が話している種類のImagemap ではありません。 サーバーサイドImagemap は、クリックされたピクセル座標をクエリ文字列として送信するようにブラウザに要求します。このサーバーの場合、それはサーバーサイドでデコードされ、クリックした場所に基づいてリダイレクトされます。これはサーバーサイドImagemap です。 HTMLコードは次のようになります…そして、結果のGIFファイルのライブラリのURLはどこにも見当たりません: <a href="/iconbin/imagemap/icon3"> <img src="destic3/icons.gif" ismap> </a> この ismap 属性は、ブラウザにクリックした座標を送信するように指示するものです。 ディレクトリインデックスが無効になっているため、URLの末尾から画像ファイル名を削除して検査することはできません。 では、手作業で、骨の折れる作業で、一つ一つクリックする以外に、これらの画像を取得するにはどうすればよいでしょうか? それが、私がいくつかの素晴らしいアイデアを持って現れたときに、GlitchyZoruaさんが疑問に思っていたことです。(私たちは明らかに苦労した唯一のグループではありません。archive.orgもアイコンの完全なセットを収集できていませんでした。) 幸いなことに、ギャラリー画像について少し理解することができます。サイトの探索によると、それらは常に最大8×8のグリッドに配置されており、それぞれ(サイズ情報を含む)72×89ピクセルのスペースを占めています: A little experimentation shows that clicking anywhere within the intersection area results in a redirect to the same image. ウェブサーバーはApacheで動作しているようで、おそらく mod_imagemaps のようなものを使用してサーバーサイドImagemap を管理しています。サーバー上には、おそらく次のようなファイルがあり、長方形の座標ペアをリダイレクトURLにマッピングしていると想像できます: # icon3 images: base destic3/ # filename | top left | bottom right # -------------+------------+---------------- rect 49ers.gif 0,0 72,89 rect 49ers1.gif 73,0 145,89 rect 4dos.2.gif 146,0 217,89 rect 4dos.gif 218,0 289,89 # ... and so on for all 64 images in this collection! La Vecchia氏が、必要とした数千行の設定を生成するために何らかの自動化プロセスを使用していたことを心から願っています。彼がファイルを手書きしたわけではないでしょう! 私たちはそれらの設定ファイルにアクセスできませんが、それらがどのヒットエリアであるかを推測することができます。各ヒットエリアが72×89ピクセルである場合、トップレフトのものの中心を36×44でクリックし、72と89ピクセルを加え続けることで、すべてのヒットエリアの中心点を順列化できます。 擬似コードで、私たちがする必要があることは次のとおりです: 各ライブラリについて 1 から 113 まで、 X座標について {36, 108, 180, 252, 324, 396, 468, 540} のセットから、 Y座標について {44, 133, 222, 311, 400, 489, 578, 667} のセットから、 次の形式のURLを生成します: https://www.ibiblio.org/iconbin/imagemap/icon{library}?{x},{y} そのURLに対して HTTP HEAD リクエストを行います。 HTTP 302 (リダイレクト) レスポンスコードが得られたら、結果の Location: を記録します。 これにより、サービス上の何千ものGIFのURLがすべて取得できます。 次に、wget を使用してそれらをすべてダウンロードできます。 ソート済みです! しかし、さらに一歩進むことができます:すべてのアイコンを取得したら、新しいウェブサイトでそれらを提示できます。サーバーサイドImagemap がなく、動作する検索機能があるものです。 そこで、私はそれを実行しました。RubyとERBテンプレートを使用して非常に基本的な静的サイトジェネレーターをハックし、ギャラリー(元のページ番号をミラーリング)とクライアントサイド検索を生成しました。 そしてもちろん、あなたがアイコンのコピーを自分で欲しいだけなら、リポジトリ全体をクローンできます: このアイコンライブラリの私の近代化されたバージョンは、基本的ではありますが、オリジナルから大幅に改善されていると思います…(これは、その間に進歩したWebテクノロジーのおかげです!) とにかく、このアイコンライブラリを新しい形式で閲覧したい場合は、ibiblio-icon-archive.danq.dev にあります。それは…その年齢相応に見えますが、少なくとも今では世界中にアクセス可能であり、後世のためにアーカイブできます。 × ×