コンテンツにスキップ

Data URI scheme

出典: フリー百科事典『ウィキペディア（Wikipedia）』

これはこのページの過去の版です。Wdpp (会話 | 投稿記録) による 2017年7月11日 (火) 18:36 （個人設定で未設定ならUTC）時点の版 (Category:Uniform Resource Locator)であり、現在の版とは大きく異なる場合があります。

データURIスキーム（英語: data URI scheme）とは外部データ無しにウェブページにデータを埋めこむためのURIスキームである。例えば、通常画像データはHTMLやCSSに外部リンクとして記述され、ブラウザで表示する際には複数のHTTPリクエストが発生する。これは画像データが小さい場合などには非効率的である。データURIスキームを使用すれば内部データとして画像を埋め込むことができるので1つのHTTPリクエストで済み、効率化できる。RFC 2397で定義されている。

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

IETFはこの仕様を1998年[1]に標準プロトコル案として発行した。その後の更新はなく、現在に至っている。HTML 4.01の仕様でデータURIスキームについて言及[2]されており、今では多くのブラウザに実装されている。

長所

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

短所

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

書式

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

エンコードが必要なデータに対してはBase64のエンコード形式を指定する。エンコード形式の指定が無い場合、データはURLで使用可能な文字[7]については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では解釈できないプロパティは無視される[8]ため、通常の画像ファイルへのリンクを併記しておけば利用可能な環境でのみデータ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. ^ Masinter, L (1998年8月). “RFC 2397 - The "data" URL scheme”. Internet Engineering Task Force. 2008年8月12日閲覧。
  2. ^ “Objects, Images, and Applets: Rules for rendering objects”. HTML 4.01 Specification. World Wide Web Consortium (1999年12月24日). 2008年3月20日閲覧。
  3. ^ “RFC 2616 Section 8.1.4”. Internet Engineering Task Force. 2012年12月14日閲覧。
  4. ^ “data Protocol” (英語). Microsoft. 2014年3月16日閲覧。
  5. ^ Martin Isenburg, Jack Snoeyink (2003年). “Binary Compression Rates for ASCII Formats”. 2011年4月7日閲覧。
  6. ^ Masinter, L (1998年8月). “Security”. RFC 2397 - The "data" URL scheme. Internet Engineering Task Force. pp. 2. 2008年8月12日閲覧。
  7. ^ “safe URL characters Uniform Resource Identifiers (URI): Generic Syntax”. 2012年12月14日閲覧。
  8. ^ “W3C CSS2.1 specification: Rules for handling parsing errors”. World Wide Web Consortium (2011年6月7日). 2010年9月8日閲覧。

外部リンク

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

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

「https://ja.wikipedia.org/w/index.php?title=Data_URI_scheme&oldid=64750022」から取得