コンテンツにスキップ

英文维基 | 中文维基 | 日文维基 | 草榴社区

「Data URI scheme」の版間の差分

出典: フリー百科事典『ウィキペディア（Wikipedia）』
履歴の双方向閲覧
← 古い編集新しい編集 →
削除された内容 追加された内容
ビジュアルウィキテキスト
→外部リンク: 外部リンクの修正 https://www-archive.mozilla.org/quality/networking/testing/datatests.html*[http://www.mozilla.org/quality/networking/docs/aboutdata.html About data: URLs and the Mozilla implementation]https://sveinbjorn.org/dataurls_css
Cewbot (会話 | 投稿記録)
ボット
782,031 回編集
m Bot作業依頼: sourceタグをsyntaxhighlightタグに置換 (Category:非推奨のsourceタグを使用しているページ) - log
39行目: 39行目:
赤い小さな点を表示する：[[File:Red-dot-5px.png]]
赤い小さな点を表示する：[[File:Red-dot-5px.png]]


<source lang="html4strict">
<syntaxhighlight lang="html4strict">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">
</syntaxhighlight>
</source>


[[Base64]][[エンコード]]では[[改行コード|改行]]を含めることができるので[[可読性]]が上がる。
[[Base64]][[エンコード]]では[[改行コード|改行]]を含めることができるので[[可読性]]が上がる。
50行目: 50行目:
背景[[画像]]を指定するには次のように記述する。
背景[[画像]]を指定するには次のように記述する。


<source lang="css">
<syntaxhighlight lang="css">
ul.checklist li.complete {
ul.checklist li.complete {
padding-left: 20px;
padding-left: 20px;
58行目: 58行目:
P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC') no-repeat scroll left top;
P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC') no-repeat scroll left top;
}
}
</syntaxhighlight>
</source>


いくつかの[[ブラウザ]] ([[Firefox]] 5, [[Google Chrome]] 17, [[Internet Explorer]] 9) では[[改行コード|改行]]を含めては'''ならない'''。
いくつかの[[ブラウザ]] ([[Firefox]] 5, [[Google Chrome]] 17, [[Internet Explorer]] 9) では[[改行コード|改行]]を含めては'''ならない'''。
65行目: 65行目:
[[Cascading Style Sheets|CSS]]では解釈できないプロパティは無視される<ref>{{cite web|url=http://www.w3.org/TR/CSS2/syndata.html#parsing-errors |title=W3C CSS2.1 specification: Rules for handling parsing errors |publisher=World Wide Web Consortium|date=7 June 2011 |accessdate=2010-09-08}}</ref>ため、通常の[[画像]]ファイルへのリンクを併記しておけば利用可能な環境でのみ'''データURIスキーム'''が有効になる。
[[Cascading Style Sheets|CSS]]では解釈できないプロパティは無視される<ref>{{cite web|url=http://www.w3.org/TR/CSS2/syndata.html#parsing-errors |title=W3C CSS2.1 specification: Rules for handling parsing errors |publisher=World Wide Web Consortium|date=7 June 2011 |accessdate=2010-09-08}}</ref>ため、通常の[[画像]]ファイルへのリンクを併記しておけば利用可能な環境でのみ'''データURIスキーム'''が有効になる。


<source lang="css">
<syntaxhighlight lang="css">
div.menu {
div.menu {
background-image: url('elephant.png');
background-image: url('elephant.png');
73行目: 73行目:
P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC');
P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC');
}
}
</syntaxhighlight>
</source>


===JavaScript===
===JavaScript===
次の[[スクリプト言語|スクリプト]]は埋め込みデータを元にサブウィンドウを表示する。[[脚注]]などに使用できる。
次の[[スクリプト言語|スクリプト]]は埋め込みデータを元にサブウィンドウを表示する。[[脚注]]などに使用できる。


<source lang="javascript">
<syntaxhighlight lang="javascript">
window.open('data:text/html;charset=utf-8,' +
window.open('data:text/html;charset=utf-8,' +
encodeURIComponent( // URL書式にエスケープ
encodeURIComponent( // URL書式にエスケープ
88行目: 88行目:
)
)
);
);
</syntaxhighlight>
</source>


この例を[[Internet Explorer]] 8で表示しようとしても実行ファイルの[[コンピュータセキュリティ|セキュリティ]]制限のため失敗する。（訳注:en版のwikipediaにあった例をそのまま記述してある。[[コンピュータセキュリティ|セキュリティ]]について考慮すべき例なので[[Internet Explorer]] 8以外でも注意。）
この例を[[Internet Explorer]] 8で表示しようとしても実行ファイルの[[コンピュータセキュリティ|セキュリティ]]制限のため失敗する。（訳注:en版のwikipediaにあった例をそのまま記述してある。[[コンピュータセキュリティ|セキュリティ]]について考慮すべき例なので[[Internet Explorer]] 8以外でも注意。）

2020年7月5日 (日) 23:05時点における版

データURIスキーム（英語: data URI scheme）とは、あたかも外部リソースを読み込むのと同じように、ウェブページにインラインにデータを埋めこむ手段を提供するURIスキームである。ファイルリテラル、あるいはヒアドキュメントの一形態である。この技術を利用することで、通常は別のデータに分かれている画像やスタイルシートなどの要素を、1つのHTTPリクエストによって読み込むことが可能になる。これにより、HTTPリクエスト数が削減され、データの転送効率が改善される可能性がある[1]。また、一部のブラウザ拡張機能でも、画像などのコンテンツを単一のHTMLファイル内にパッケージングしてユーザーに届けるために利用されている[2][3]。2018年現在、データURIは主要なほとんどのブラウザで完全にサポートされている。ただし、Internet ExplorerとMicrosoft Edgeでは、一部の機能が実装されていない[4]。

フルサポートされたブラウザでは、JavaScriptで生成されたコンテンツであってもwindow.location.hrefに値を設定することで通常の外部ファイルと同様に「ダウンロード」をすることができる。

2018年には、WHATWGのFetch Standardで改めて定義がなされることとなった[5]。

長所

  • データをテキスト形式で埋め込むのでHTTPリクエストやヘッダのトラフィックが低減できる。データによってはそのまま埋め込むことができないためエンコードのためのオーバーヘッドが起こる（例えば、600バイトのデータをデータURIスキームで埋め込む場合、Base64でエンコードされ約800バイトになり、200バイトほどデータ量は増える）が、それでもトラフィックを軽減できる事の方が有用である。
  • 小さなファイルを多数転送するよりもデータURIスキームを使った方が高速である。TCPのファイル転送にはスロースタートの仕組みが採用されている。小さなファイル1つ1つがTCPコネクションを要求した場合、転送速度はラウンドトリップタイムや帯域幅に応じて制限される。（ただし、HTTP/1.1で規定された持続的接続 (Keep alive)が有効であったり、HTTP/2を使用していたりする場合、この長所は価値が下がる。）
  • HTTPSを使用したウェブページを閲覧する場合、ブラウザはページ内で発生した全てのダウンロードに対してセキュアな接続を要求するか、一部セキュリティで守られていない要素があることをユーザに警告する。サーバーの設定にミスがあった場合、通常のHTTPリクエストに比べてHTTPSのリクエストは大きなオーバーヘッドが発生する。データURIスキームにより全てのファイルを1つにまとめることができればこのような心配はしなくてもよい。
  • 多くのブラウザは1つのドメイン名に対する接続数に限りがある[6]。データURIスキームにより全てのファイルを1つにまとめることができれば接続数の制限は問題にはならない。
  • 外部データへのアクセスが制限されている環境で有用である。
  • 1つのHTMLファイルでマルチメディアを表現することができる。
  • 電子メールで外部ファイルや添付ファイルを使用せずに画像を表示できる。

短所

  • データURIスキームによってダウンロードされたファイルは個別にキャッシュされない。HTMLやCSSのファイルがダウンロードされるたびにデータもダウンロードされる。
  • HTMLやCSSのファイルが更新されるたびに、その作者はエンコードや埋め込みをやり直さなければならない。
  • 古いInternet Explorerでサポートされていない。バージョン8ではデータサイズが32kBに制限されている。
  • Internet Explorerのバージョン8とバージョン9では画像でしか使用できない。JavaScriptで生成されたコンテンツはダウンロードすることができない[7]。データURIスキームではデータは単純な文字列として表現される。ブラウザなど、多くの処理環境ではメタデータ、データ圧縮、コンテントネゴシエーションのような複雑な処理はサポートしないであろう。他にサポートされないであろうと思われる要素に、電子メールクライアントのマルチパート形式やmessage/rfc822などがある。
  • Base64でエンコードされたデータは元のサイズより1/3程度大きくなる（バイト単位）。ただし、このオーバーヘッドはHTTPサーバーがレスポンスをgzipで圧縮した場合2～3%にまで軽減される[8]。
  • データURIスキームでダウンロードしたファイルには通常のリンクからダウンロードしたファイルと違ってファイル名がない。保存するときのファイル名はMIMEタイプごとに用意されたデフォルトの物となる。ただし、HTML5ではa要素にダウンロード時のファイル名を指定できるdownload属性が追加されたため、一部のブラウザではこの問題は解決した。
  • 例え1つのウェブページに埋め込むデータであっても、同じデータを複数使用すると使用された数だけコピーが必要となる。外部データの場合はいくつデータを使用する場合でも1つで済む。
  • データURIスキームはアンチウイルスソフトウェアのフィルタリング処理を難しくする[9]。

書式

データURIの構文は、IETFが1998年に標準プロトコル案RFC 2397として定義され[10]、続いて、URIスキームの構文が定義された。構文は、以下の通りである。 

data:[<MIME-type>][;charset=<encoding>][;base64],<data>

エンコードが必要なデータに対してはBase64のエンコード形式を指定する。エンコード形式の指定が無い場合、データはURLで使用可能な文字[11]についてはASCIIコードで記述し、それ以外の文字については標準の%xx形式（パーセントエンコーディング）でエンコードする。MIMEタイプが省かれた場合、デフォルト値のtext/plain;charset=US-ASCIIが指定されたものとする。（その場合、charsetだけの指定も可能。）

いくつかのブラウザ (Google Chrome, Opera, Safari, Firefox) では;charsetと;base64の順番が逆になっても正常に処理される。Internet Explorerでは;charsetと;base64の順番は逆になってはならない。データサイズはオクテット単位である。

例

HTML

赤い小さな点を表示する： 

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">

Base64エンコードでは改行を含めることができるので可読性が上がる。

CSS

背景画像を指定するには次のように記述する。 

ul.checklist li.complete {
    padding-left: 20px;
    background: white url('data:image/png;base64,iVBORw0KGgoAA
AANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0l
EQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6
P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC') no-repeat scroll left top;
}

いくつかのブラウザ (Firefox 5, Google Chrome 17, Internet Explorer 9) では改行を含めてはならない。

CSSでは解釈できないプロパティは無視される[12]ため、通常の画像ファイルへのリンクを併記しておけば利用可能な環境でのみデータURIスキームが有効になる。 

div.menu {
    background-image: url('elephant.png');
    background-image: url('data:image/png;base64,iVBORw0KGgoAA
AANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0l
EQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6
P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC');
}

JavaScript

次のスクリプトは埋め込みデータを元にサブウィンドウを表示する。脚注などに使用できる。 

window.open('data:text/html;charset=utf-8,' + 
    encodeURIComponent( // URL書式にエスケープ
        '<!DOCTYPE html>'+
        '<html lang="en">'+
        '<head><title>Embedded Window</title></head>'+
        '<body><h1>42</h1></body>'+
        '</html>'
    )
);

この例をInternet Explorer 8で表示しようとしても実行ファイルのセキュリティ制限のため失敗する。（訳注:en版のwikipediaにあった例をそのまま記述してある。セキュリティについて考慮すべき例なのでInternet Explorer 8以外でも注意。）

関連項目

脚注

  1. ^ “Using Data URIs to Speed Up Your Website”. Treehouse Blog (27 March 2014). 2018年8月26日閲覧。
  2. ^ “SingleFile - Chrome Web Store”. Chrome Web Store. 25 August 2018閲覧。
  3. ^ “SingleFile – Add-ons for Firefox”. Firefox Add-ons. 25 August 2018閲覧。
  4. ^ Deveria, Alexis (July 2015). “Can I use...”. 31 August 2015閲覧。
  5. ^ “Define data: URLs by annevk · Pull Request #579 · whatwg/fetch”. GitHub (2017年8月14日). 2018年5月26日閲覧。
  6. ^ “RFC 2616 Section 8.1.4”. Internet Engineering Task Force. 2012年12月14日閲覧。
  7. ^ “data Protocol” (英語). Microsoft. 2014年3月16日閲覧。
  8. ^ Martin Isenburg, Jack Snoeyink (2003年). “Binary Compression Rates for ASCII Formats”. 2011年4月7日閲覧。
  9. ^ Masinter, L (1998年8月). “Security”. RFC 2397 - The "data" URL scheme. Internet Engineering Task Force. pp. 2. 2008年8月12日閲覧。
  10. ^ Masinter, L (1998年8月). “RFC 2397 - The "data" URL scheme”. Internet Engineering Task Force. 2008年8月12日閲覧。
  11. ^ “safe URL characters Uniform Resource Identifiers (URI): Generic Syntax”. 2012年12月14日閲覧。
  12. ^ “W3C CSS2.1 specification: Rules for handling parsing errors”. World Wide Web Consortium (7 June 2011). 2010年9月8日閲覧。

外部リンク

公式
非公式
プロトコル一覧（英語版）
スタブアイコン

この項目は、インターネットやウェブに関連した書きかけの項目です。この項目を加筆・訂正などしてくださる協力者を求めています（PJ:コンピュータ/P:コンピュータ）。

「https://ja-two.iwiki.icu/w/index.php?title=Data_URI_scheme&oldid=78331793」から取得