data URIs

RFC 2397 で定義されている data URI を使うと、コンテンツ製作者は小さなファイルをインラインで文書に埋め込むことができます。

構文

data URI は次の構文をとります。

data:[<mediatype>][;base64],<data>

mediatype はMIMEタイプ文字列で, 例えば JPEG画像に対しては "image/jpeg" を使います。省略時のデフォルトは text/plain;charset=US-ASCII です。

データが文字ならば、そのまま埋め込めます (埋め込む文書タイプに応じて、適切な実体参照やエスケープを行なってください)。それ以外では base64 を指定し、base64 エンコードしたバイナリデータを埋め込みます。

例:

data:,Hello%2C%20World!
平易な text/plain データ
data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D
同じ内容の base64 エンコード版
data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E
<h1>Hello, World</h1> というHTML 文書

データを base64 形式にエンコードする

LinuxやMac OS X ではコマンドラインユーティリティ uuencode を使うと簡単です:

uuencode -m infile remotename

infile 引数は base64 形式にエンコードしたいファイルの名前です。remotename はリモートのファイル名で、実際には data URL 内で使われません。

出力は次のようなものになるでしょう:

begin-base64 664 test
YSBzbGlnaHRseSBsb25nZXIgdGVzdCBmb3IgdGV2ZXIK
====

data URI は、最初のヘッダー行より後ろのエンコードされたデータを使います。

the data URI kitchen では自前のデータから data URI を作り、data URI の構築を試すことができます。

nsIFile を data URI に変換する

次の関数に nsIFile を渡すと、base 64 エンコードされた data URI を返します。

function generateDataURI(file) {
  var contentType = Components.classes["@mozilla.org/mime;1"]
                              .getService(Components.interfaces.nsIMIMEService)
                              .getTypeFromFile(file);
  var inputStream = Components.classes["@mozilla.org/network/file-input-stream;1"]
                              .createInstance(Components.interfaces.nsIFileInputStream);
  inputStream.init(file, 0x01, 0600, 0);
  var stream = Components.classes["@mozilla.org/binaryinputstream;1"]
                         .createInstance(Components.interfaces.nsIBinaryInputStream);
  stream.setInputStream(inputStream);
  var encoded = btoa(stream.readBytes(stream.available()));
  return "data:" + contentType + ";base64," + encoded;
}

セキュリティ

Gecko 6.0 note
(Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3)

Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3) 以前には、ユーザがロケーションバーに dataURI を入力したときに、 data URI が現在のウィンドウにあるページのセキュリティコンテキストを継承していました。現在は、 data URI は新しい、空のセキュリティコンテキストを取得します。

よくある問題

この章では data URI を作ったり使ったりするときに、よく起こる問題について述べます。

構文
data URI の書式は非常に単純ですが、データ部分の前にカンマを置くのを忘れがちです。忘れると正しくエンコードされません。
HTML における体裁
data URI が作るファイル内のファイルは、元の文書に比べて幅が非常に広くなる可能性があります。 URL としてはdata は ホワイトスペース(ラインフィード、タブ、スペース)で体裁を整えられるべきですが、 base64 エンコードをすると起こる問題があります。
長さの制限
Mozilla は基本的に無限長の data URI をサポートしていますが、ブラウザによって扱えるデータの最大長は違います。例えば Opera 11 では data URI は約 65000 文字までに制限されます。
エラー処理の欠如
メディア内の不正なパラメータや、"base64"の定義内の打ち間違いは無視され、何もエラーは出ません。
クエリ文字列のサポートの欠如、など

data URI のデータ部分は不透明 (opaque) なので、data URI と一緒にクエリ文字列(<url>?parameter-data という構文で表されるページ固有のパラメータ)を使うと、data URI が表現するデータに単にクエリー文字列が含まれたものになります。例をあげます:

data:text/html,lots of text...<p><a name%3D"bottom">bottom</a>?arg=val

これは次の内容の HTMLリソース を表します:

lots of text...<p><a name="bottom">bottom</a>?arg=val

注記: Firefox 6 以降では、フラグメント(アンカー)は他の URI スキームと同じように処理されるので、コンテント内の裸の"#"は '%23' のようにエスケープする必要があります。

他のブラウザでのサポート

data スキームは Opera 7.20 以降とSafari、Konquerorでサポートされています。Internet Explorer 7 以前では現在のところサポートされていません。Internet Explorer 8 以降では、CSS、<link>、<img>内で画像を表す data URI だけがサポートされています。

リソース

ドキュメントのタグと貢献者

タグ: 
 このページの貢献者: ethertank, sosleepy
 最終更新者: ethertank,