Data URL スキーム
端的に言うと、URLへのデータ埋め込みに使えます。
- これが何の役に立つのか、
- これがなぜ便利なのか、
- これを使う時の注意点
そういうのをまとめました。
Data URLは便利だけど注意点も多いです。
このページの目次
Data URL はデータ（ファイル）を埋め込めるスキーム
この Data URL スキームを一言で表すなら・・・
「直接ファイルデータを埋め込めるURL」
と、表現できると思います。
▼ MDNでのData URL の基本構文の説明
データ URL は接頭辞 (data:)、データの種類を示す MIME タイプ、テキストではないデータである場合のオプションである base64 トークン、データ自体の 4 つの部品で構成されます。
data:[<mediatype>][;base64],<data>
mediatype は MIME タイプ文字列で, 例えば 'image/jpeg' で JPEG 画像を表します。省略時の既定値は text/plain;charset=US-ASCII です。引用元 ： データURL - HTTP | MDN
普通のURLだと https: とかが先頭につきます。
この https とかはスキーム（scheme）と呼ばれ、Data URL はデータそのものを表すから data: をスキームに使うという訳です。
基本は data: というスキームの後に image/png のようなMIMEタイプが付き、その後の ;base64, のあとに本体のデータがくっつくという構成になってます。
外部ファイルなど全く用意せず、
- URLだけで画像を埋め込めんだり、
- URLだけで音楽を埋め込めんだり、
- URLだけで動画までも埋め込めたり、
- その他あらゆるデータが埋め込み可能
これが Data URL の超便利な理由ですね。
でもこれだと分かりにくいので・・・
次URLにブラウザアドレス欄からアクセスしみてください。
|
1 |
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAt1BMVEUAAAD+4r5mMwH/6sZdKgATDAb/7swkFQkndR5zRBdMKw3v07FUIADVsozHpX6NYTUogB9eNAszHgrOrIawnIKainN/UyYabxbkyqlCJQr/99DqzavevpjCrI++mnNfVEWXbUE4Mio2rCkxpSf12bbixaHTuZm3kmyyjGOheU4rJyHsyqO9uImnt32irneId2N2alZkWk1ijUmbcUc8myxKOywzfiY6hyU2WyReTh1ELxv//+KMcVQY9ElPAAABiElEQVQ4y72S13KDMBBFpV1JRCB6CbjXuKT3xMn/f1eWYjy2meQtZzRIcA/SambZvyP/EuxfDWlFoV0UkdVtWTa02NZ5GsIR4YljwRnWeS4yqOdnX9AU7UuTMiq/+hMzoIAwnmugNCgq/y7q6pyNVi4JxBIz0LS0i/qcaoPR13qicG1gBJordzIQh0PCsuokH7jIcQJq5SuefycbAWFTBAjtWzSPOeFxvhzT0dsVbSEbAcC7GqbjByQBaTyM02E+WovmqjvKHVS9HvIG7PUUV7GAXZlPaZEjJtPhQRhOE+QDEPGUhMdrIWJU9yxVe0Gl7B4xFuL6kYQtZmZE2RVvqV7UymS4ZUTqmg0JyAlMknqm8WzclFW8guYdaHht+0i7dYFO++AY65C1aK8Rlo6T74VMHgSZ9esrLPr9RZ0v/OPGCz1E3oLo6tPGLHyvj03seL7NzjDi/bYWbt+FkB1d/TkPnu5ubu6egvlnxDr4mAWXFcHsg3XxNgsuKoLZW1cuX+Z7Yf5yKOEHv7caaOPKWk4AAAAASUVORK5CYII= |
アクセスしたら画像が出てきましたよね？
もし見れないなら、次のツールから開いてください。
表示された画像はURLデータをブラウザが表示してるだけ
外部のサーバーなど用意せずとも、URLだけで画像・音楽・動画・文章・etc...ありとあらゆるデータを表現できるのが Data URL のスゴサと言えます。
Data URL を扱う時のいくつかの注意点
ツールで Data URL を生成なら問題ないですが・・・
もしコードから動的に Data URL を作成するときは注意点があります。
１．末尾にクエリパラメータを付与できない
普通URLにはクエリパラメータが付けられます。
でも Data URL においては無理みたいです。
▼ 例えばこれは無効URLってこと
|
1 |
data:image/png;base64,iVBO...YII=?hoge=123 |
後ろに ?hoge=123 みたいなのは置けません。
これは場面によっては意外と困る・・・
しかし、 Data URL でもパラメータは埋め込み可能です。
その証拠は RFC2379（仕様）に書いてありました。
▼ RFC2379から一部抜粋
dataurl := "data:" [ mediatype ] [ ";base64" ] "," data
mediatype := [ type "/" subtype ] *( ";" parameter )
data := *urlchar
parameter := attribute "=" valueAttribute values in [RFC2045] are allowed to be either represented as tokens or as quoted strings. However, within a "data" URL, the "quoted-string" representation would be awkward, since the quote mark is itself not a valid urlchar.
▼ この仕様説明の部分的な意訳
[RFC2045]において属性値はトークン or 引用符付きの文字列で表せます。ただしData URL内では引用符は有効なurlcharではないため、引用府表現は不具合をおこしかねません。
このように attr=value 形式で埋め込み可能
たとえば hoge=123 を DataURL に渡したいなら・・・
こういう Data URL を定義しても問題なし
|
1 |
data:image/png;hoge=123;base64,iVBO...YII= |
たったこれだけ。パラメータはいくらでも付与可能。
あとは正規表現とか使って取り出せばOKですね。
２．データ部分前のコンマ（,）の置忘れに注意！
Data URLのデータ部分前にはコンマが必要です。
よくあるミスなのか、MDNでも警告されてます。
data URL の書式は非常に単純ですが、"データ" 部分の前にコンマを置くのを忘れがちです。忘れるとデータが正しく base64 形式にエンコードされません。
引用元 ： データ URL - HTTP | MDN
コード的にData URLを作るなら要注意！
意外と忘れがちなので気を付けたいですね。
Data URLスキームについてのまとめ
Data URLの利点はファイルが不要ってことです。
直接URLにデータを埋め込みできるから、
- ファイル読み込みを少なくしたり、
- CSSでの小画像埋め込みに使われたり、
- REST API のファイル送信に使われたり、
色々な場面で使うことになると思います。
ちなみに技術的な関連記事はこちら
具体例を挙げるなら上記事みたいなことですね。
以上、Data URL って何なのかでした。ではまた
