Data URLスキームとは何なのか?便利な理由と扱うときの注意点

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にブラウザアドレス欄からアクセスしみてください。

アクセスしたら画像が出てきましたよね?

もし見れないなら、次のツールから開いてください。

表示された画像はURLデータをブラウザが表示してるだけ

外部のサーバーなど用意せずとも、URLだけで画像・音楽・動画・文章・etc...ありとあらゆるデータを表現できるのが Data URL のスゴサと言えます。

Data URL を扱う時のいくつかの注意点

ツールで Data URL を生成なら問題ないですが・・・

もしコードから動的に Data URL を作成するときは注意点があります。

1.末尾にクエリパラメータを付与できない

普通URLにはクエリパラメータが付けられます。

でも Data URL においては無理みたいです。

 例えばこれは無効URLってこと

後ろに ?hoge=123  みたいなのは置けません。

これは場面によっては意外と困る・・・

 

しかし、 Data URL でもパラメータは埋め込み可能です。

その証拠は RFC2379(仕様)に書いてありました。

▼ RFC2379から一部抜粋

dataurl := "data:" [ mediatype ] [ ";base64" ] "," data
mediatype := [ type "/" subtype ] *( ";" parameter )
data := *urlchar
parameter := attribute "=" value

Attribute 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.

引用元 : https://tools.ietf.org/html/rfc2397

▼ この仕様説明の部分的な意訳

[RFC2045]において属性値はトークン or 引用符付きの文字列で表せます。ただしData URL内では引用符は有効なurlcharではないため、引用府表現は不具合をおこしかねません。

このように attr=value 形式で埋め込み可能

たとえば hoge=123  を DataURL に渡したいなら・・・

こういう Data URL を定義しても問題なし

たったこれだけ。パラメータはいくらでも付与可能。

あとは正規表現とか使って取り出せばOKですね。

2.データ部分前のコンマ(,)の置忘れに注意!

Data URLのデータ部分前にはコンマが必要です。

よくあるミスなのか、MDNでも警告されてます。

data URL の書式は非常に単純ですが、"データ" 部分の前にコンマを置くのを忘れがちです。忘れるとデータが正しく base64 形式にエンコードされません。

引用元 : データ URL - HTTP | MDN

コード的にData URLを作るなら要注意!

意外と忘れがちなので気を付けたいですね。

Data URLスキームについてのまとめ

Data URLの利点はファイルが不要ってことです。

直接URLにデータを埋め込みできるから、

  • ファイル読み込みを少なくしたり、
  • CSSでの小画像埋め込みに使われたり、
  • REST API のファイル送信に使われたり、

色々な場面で使うことになると思います。

ちなみに技術的な関連記事はこちら

具体例を挙げるなら上記事みたいなことですね。

以上、Data URL って何なのかでした。ではまた

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください