1735345437
2024-12-27 23:10:00
この記事は、利用可能なプレゼンテーションの概要です ここ。作成されたデモ ファイルは、記事の最後からダウンロードできます。リポジトリは次の場所にあります。 https://github.com/gildas-lormeau/Polyglot-HTML-ZIP-PNG。
導入
単一ファイルは、Web アーカイブ用のツールであり、通常、Web ページのリソースをデータ URI として保存します。ただし、このアプローチは、リソースが大きい場合には非効率となる可能性があります。 ZIP 形式の柔軟な構造を HTML と組み合わせることで、より洗練されたソリューションが生まれます。次に、この構造全体を PNG ファイル内にカプセル化することで、さらに一歩進めます。
ZIP の力
ZIP 形式は、複数のファイルを保存するための整理された構造を提供します。これは、ファイル エントリの後に中央ディレクトリが続く構造に基づいています。中央ディレクトリは目次として機能し、各ファイル エントリに関するメタデータを含むヘッダーが含まれます。これらのヘッダーには、ファイル名、サイズ、チェックサム、ファイル エントリ オフセットなどの重要な情報が含まれています。 ZIP を特に多用途にしているのは、データ配置の柔軟性です。この形式では、最初のファイル エントリに 0 より大きいオフセットを設定することで、ZIP コンテンツの前にデータを追加できますが、その後に最大 64KB のデータを追加できます (つまり ZIP コメント)。この機能により、多言語ファイルの作成に適しています。
HTML/ZIP 多言語ファイルの作成
この知識に基づいて、Web ブラウザで動作する自己解凍アーカイブを作成できます。表示するページとそのリソースは ZIP ファイルに保存されます。 ZIP データを HTML コメントに格納することで、ZIP ファイルの内容を抽出して表示する自己解凍ページを作成できます。
自己解凍ページの基本構造は次のとおりです。
charset=utf-8>
Please wait...
lib/zip.min.js>
Please wait...
src=]]>lib/zip.min.js>
Please wait...
application/json>
[consolidation data]
]
[IEND chunk]
画像の再利用による最適化
最後の最適化では、ZIP ファイルからメイン画像 (RennesJS のロゴ) が削除され、PNG ファイルとして解釈されたページが再利用されて、表示されるページ内で置き換えられます。
結果のファイル
ダウンロード デモ.png.zip.html (macOS の「アーカイブ ユーティリティ」のバグにより、結果のファイルを解凍できません。この問題を回避するには、unzip を使用できます)。
#HTMLZIPPNG #多言語ファイルの作成方法