DEVELOPERS BLOGデベロッパーズブログ

  1. HOME > 
  2. 加藤 正人 > 
  3. タイトル

Data URI が便利

2018/01/08

Data URI が便利

 

最近プレビュー画面の実装を行なったのだが、Data URI が便利だという事に気づいた。

システムに登録済みのデータ (画像や HTML など) を表示するには、そのデータの URI を指定すれば良いわけだが、まだ登録していない段階のプレビューをする際に、一時的にデータベースに登録したり HTML ファイルを生成したりするのは面倒だし、消し忘れがあるとセキュリティ上問題となる場合もある。

そのような場合、Data URI を利用してリソースを URI に埋め込んでしまうことで対応できる。

データ URI の書式: data:[<MIMEタイプ>][;charset=<エンコーディング>][;base64],<データ>

上記の形式で、レンダリングするデータそのものを URI に含めることができる。これは言い換えると、URI を読みとってからそのコンテンツを改めて取得に行く必要がないという事でもある。画像であれば画像ファイルの中身をデータとして渡せるし、HTML データを上記の <データ> として渡すこともできる。

使い方を誤らなければ、結構便利だと思う。

但し、データの展開はメモリー上で行なわれることになるので、巨大なコンテンツデータをデータ URI で渡した場合ブラウザの種類やバージョン、あるいは実装メモリー量によっては正しく動作しない、あるいは表示にかかる処理時間が増えることもあるので使用に先立ち想定する環境での検証を行っておく必要があると思う。

この記事は加藤 正人さんが書いています!

加藤 正人

氏名
加藤 正人
役職
多分SE
血液型
秘密
出没
美味しいもののあるところ
特色
タヒチ大好き。ちょいメタボ。