デベロッパーズブログ

加藤 正人のデベロッパーズブログ

加藤 正人

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

加藤 正人

2018/01/08

Data URI が便利

 

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

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

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

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

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

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

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

関連タグ:

お気軽にお電話ください 052-875-9930 年中無休にて対応しております

メールでのお問い合わせはこちら

お問い合わせフォーム

名古屋オフィス 東京オフィス

お気軽にお電話ください 052-875-9930 年中無休にて対応しております

WEBからのお問い合わせ

サイト内検索

入力例:CSS、ポータルサイトなど

 

BLOG デベロッパーズブログ

販売代理店募集

スタッフ紹介

ページの先頭へ戻る

ページトップへ戻る