Blob URL Scheme とは？
■Blob URL Scheme とは？
Blob URL Scheme は、HTML5 世代の機能です。
http://www.w3.org/TR/FileAPI/#creating-revoking (Working Draft)
Blob URL Scheme は、URL アドレス の一種です。
スキームは、『 blob: 』となります。
スキーム以降は、ランダムな文字列です。
Blob URL Scheme を、静的に用意する事はできません。
JavaScript から、動的に生成します。
静的にも利用したい場合、Data URI Scheme を使用するといいでしょう。
■Blob URL Scheme を活用する
URL アドレスを指定できる場所には、Blob URL Scheme も指定できます。
例えば、<IMG> 要素の src プロパティにセットすると、画像として表示することができます。
例えば、XMLHttpRequest のアクセス先に指定すると、テキストとして読み込むことができます。
使用例については、こちらで解説しています。
■外部ファイルをリソースとして活用する
Blob オブジェクトから、Blob URL Scheme を生成する事ができます。
■詳細なダウンロード進捗状況を取得する
■内部的な動作について
ファイルの中身が、一時的にメモリ上に常駐するようになります。
ArrayBuffer は物理メモリが確保できなければ問答無用で失敗しますが、Blob は柔軟に動作します。ブラウザによっては、ローカルストレージを駆使してでも超巨大なバイナリの取り扱いを試みます。
■メディア系のファイルを事前に読み込む
<AUDIO> 要素などのプリロードは、必ずしも動作するとは限りません。
Blob URL Scheme に変換すると、確実な事前読み込みが実現できます。
■再リクエストを防止する
Blob URL Scheme に変換すると、再リクエストは発生しません。
画像などの src プロパティを、頻繁に変更したい場合に効果的です。
■ローカルファイルをリソースとして活用する
ローカルファイルを、リソースとして活用できます。
例えば、ローカルの画像ファイルをブラウザに表示できます。
File オブジェクトから、Blob URL Scheme を生成する事ができます。
■セキュリティについて
Blob URL Scheme は、ランダムな文字列です。
よって、ユーザーの個人情報（ディレクトリ名）が、開発者側に漏洩しません。
ローカルファイルを参照する手段の１つに、file: スキームがあります。
しかし、セキュリティ上の理由で、file: スキームは動作しません。
■動的に生成したバイナリをリソースとして活用する
■ Data URI Scheme との違い
しかし、Data URI Scheme は、大容量のデータを取り扱うには不向きです。
100MByte のデータを渡すと、ブラウザが数分以上応答不能に陥るでしょう。
Blob URL Scheme なら、ローカル環境のスペックが許す限り、大容量データを実用的に扱えます。
ただし限界に近づくと、スワップが発生したようなビジー状態になります。
■ブラウザが Blob URL Scheme をサポートしているか調べる
window.URL が真であるか比較します。
Opera(Presto 版) では、動作しません。
Safari 5 以前では、対応していません。
Blob URL Scheme を生成する
■Blob URL Scheme を生成する
window.URL.createObjectURL( Blob ) :String
| 第01引数 | Blob | Blob や File オブジェクトを指定する。 |
| 戻り値 | String | Blob URL 文字列が得られる。 |
ローカルの画像ファイルを読み込んで表示する
<html>
<body>
<form>
<input type="file" id="aaa" accept="image/bmp,image/gif,image/jpeg,image/png" >
</form>
<script type="text/javascript">
<!--
// "aaa" という ID 属性のエレメントを取得する
var input_file = document.getElementById("aaa");
// ------------------------------------------------------------
// 値が変化した時に実行されるイベント
// ------------------------------------------------------------
input_file.onchange = function (){
// ファイルが選択されたか
if(!(input_file.value)) return;
// Blob URL Scheme をサポートしているか
if(!(window.URL)) return;
// ------------------------------------------------------------
// File オブジェクトを取得（HTML5 世代）
// ------------------------------------------------------------
// ファイルリストを取得
var file_list = input_file.files;
if(!file_list) return;
// 0 番目の File オブジェクトを取得
var file = file_list[0];
if(!file) return;
// ------------------------------------------------------------
// Blob URL Scheme を生成する
// ------------------------------------------------------------
var blob_url = window.URL.createObjectURL(file);
// 出力テスト
console.log(blob_url);
// ------------------------------------------------------------
// 画像を表示する
// ------------------------------------------------------------
// HTMLImageElement オブジェクトを作成する
var image = new Image();
// Blob URL を指定して、画像の読み込みを開始する
image.src = blob_url;
// BODY のノードリストに登録
document.body.appendChild(image);
};
//-->
</script>
</body>
</html>
XMLHttpRequest を使ってテキストとして読み込む
// ------------------------------------------------------------
// Blob オブジェクトを作成する
// ------------------------------------------------------------
var blob = new Blob(["あいうえお"]);
// ------------------------------------------------------------
// Blob URL Scheme を生成する
// ------------------------------------------------------------
var blob_url = window.URL.createObjectURL(blob);
// 出力テスト
console.log(blob_url);
// ------------------------------------------------------------
// XMLHttpRequest を使ってテキストとして読み込む
// ------------------------------------------------------------
var xhr = new XMLHttpRequest();
xhr.onload = function(e){
console.log(xhr.responseText);
};
xhr.open("GET",blob_url);
xhr.send();
Blob URL Scheme を破棄する
■Blob URL Scheme を破棄する
window.URL.revokeObjectURL( "Blob URL" ) :Void
| 第01引数 | String | Blob URL 文字列を指定する。 |
| 戻り値 | Void | なし。 |
Blob URL Scheme を破棄する
// Blob URL Scheme をサポートしている
if(window.URL){
// ------------------------------------------------------------
// Blob オブジェクトを作成する
// ------------------------------------------------------------
var blob = new Blob(["あいうえお"]);
// ------------------------------------------------------------
// Blob URL Scheme を生成する
// ------------------------------------------------------------
var blob_url = window.URL.createObjectURL(blob);
// 出力テスト
console.log(blob_url);
// ------------------------------------------------------------
// Blob URL Scheme を破棄する
// ------------------------------------------------------------
window.URL.revokeObjectURL(blob_url);
}