コンテンツにスキップ

Data URI scheme

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

これはこのページの過去の版です。49.133.64.188 (会話) による 2013年5月28日 (火) 14:17 （個人設定で未設定ならUTC）時点の版 (→短所)であり、現在の版とは大きく異なる場合があります。

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

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

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

長所

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

短所

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

書式

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

エンコードが必要なデータに対してはBase64のエンコード形式を指定する。 エンコード形式の指定が無い場合、データはURLで使用可能な文字[7]についてはASCIIコードで記述し、それ以外の文字については標準の%xx形式(パーセントエンコーディング)でエンコードする。 MIME-Typeが省かれた場合、デフォルト値の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;
}

いくつかのブラウザ(Firefox5、Google Chrome17、Internet Explorer9)では改行を含めてはならない。

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

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,%3C%21DOCTYPE%20' +
  'html%3E%0D%0A%3Chtml%20lang%3D%22en%22%3E%0D%0A%3Chead%' +
  '3E%3Ctitle%3EEmbedded%20Window%3C%2Ftitle%3E%3C%2Fhead%' +
  '3E%0D%0A%3Cbody%3E%3Ch1%3E42%3C%2Fh1%3E%3C%2Fbody%3E%0A' +
  '%3C%2Fhtml%3E%0A%0D%0A','_blank','height=300,width=400');

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


関連項目

脚注

  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 URI support in Microsoft browsers”. 2012年4月9日閲覧。
  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=47983451」から取得