単一のHTML + CSS + JS + imagesファイル


8

すべてのHTMLコンテンツ自体を1つのファイルに統合するファイル形式はありますか?

doc、docx、odt、pdfの代わりに、HTML5ドキュメントを使用してコンテンツを作成します。しかし、たとえばHTMLファイルを電子メールで送信したい場合は、問題が発生します。圧縮してメールに添付する必要があります。もちろん、.litと.chmがありますが、明白な理由により、それは適切ではありません。また、JavaScriptファイルとCSSコードをHTMLファイルにインライン化することもできます。これには欠点もあります。画像は引き続き除外され、すべての外部CSSおよびJavaScriptファイルを1つのHTMLファイルに埋め込むのは面倒です。ツールでこれを自動化できますが、それでも画像の問題は解決しません。

pdf / doc / docx / odtよりもHTMLを使用する最も重要な動機は、HTMLが印刷用に設計されていないのに対し、pdf / doc / docx / odtはすべて(したがって、スクリーンリーディング用に最適化されていない)ことです。また、HTMLは完全に受け入れられたオープンな標準であり、指定された形式とは言えません(odtはオープンですが広く受け入れられていません)。

回答:


7

すべてを通常のHTMLファイルに埋め込むのがよいでしょう。TiddlyWikiを見たことがありますか?「シングルページアプリケーション」と呼ばれているのを見たと思います。すべてが1つのHTMLファイルに埋め込まれているため、スタンドアロンソフトウェアとして機能します。使っていませんが、技術的にはかなり印象的だと思います。

画像は、Data URIを使用するbase64エンコーディングでインラインに含めることができます。ただし、Internet Explorer 8でのサポートは完全ではなく(サイズ制限IIRCがあります)、IEの古いバージョンでは完全にサポートされていません。他のほとんどの最新ブラウザは、十分なサポートを提供しています。

これは一般に画像のサイズを約3分の1に増やすことに注意してください(バイトごとに8ビットごとに6つだけ「使用」するため、そのギャップに対応するためにさらに3バイトを使用する必要があります)。

たとえば、次のようなものが得られます。

<img src="data:image/png;base64,<BASE64 STRING>" />

またはこれ:

.someClass
{
    background-image:url(data:image/png;base64,<BASE64 STRING>");
}

また、データURIに関するWikipediaの記事を読むこともできます。ブラウザのサポートに関するコメントと使用例がいくつかあります。


変換とインクルードを処理するツール(gems、eggs、nodeパッケージなど)はありますか?src="..."またはhref="..."属性が表示される場所にJSおよびCSSをインライン化するツールはありますか?次に、画像をbase64に変換し、<img src="..."<img src="data:image/..."?に置き換えます。
スキマスイッチ

見た目が必要になるまで、このようなものをまとめようとしたことはありません。
DMA57361 2013

3

私が思うにMHTML形式(MIME HTML)(.MHTファイル拡張子)を使用すると、後は何か考えられます。これにより、すべてが1つのファイルに埋め込まれます(HTMLメールのように)。画像などはbase64エンコーディングで埋め込まれています。

ブラウザのサポートは妥当です。IEおよびOperaはMHTファイルを保存および表示できます。IEでは、「名前を付けて保存...」と「Webアーカイブ、単一ファイル(* mht)」を選択するだけです。ただし、FirefoxとChromeにはブラウザ拡張機能が必要です。

個人的には、おそらくHTMLコンテンツをWebサイト(おそらくパスワードで保護されている)にアップロードし、リンクを配布するだけです。MHTファイルはユーザーが編集できるわけではないため、配布する場合は再生成が必要です。すべてがMHTファイルに結合された後も、HTMLと同じくらいアクセス可能ですか?

PDFは合理的にアクセス可能です。独自の画面読み上げ機能を備えています。ただし、画像の処理方法がわからない-特定のツールを使用してこれを作成できない場合は、


技術的な要件とは別に、独自の標準を使用しないという組織上の要件もあります(pdfは公開されている可能性がありますが、依然として独自仕様です)。私はmhtmlを調べます。
user45971 2010

tools.ietf.org/html/rfc2557を参照してください。それはオープンスタンダードです。IEがFirefox(後者は独自の独自形式を好む)よりも優れたサポートを提供していることに驚いたが、それはそれである。ただし、pdfまたはhtml + dependanciesには、より優れたツールサポートがあります。
Iiridayn、2011
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.