JavaScript プログラミング講座

 

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 を生成する事ができます。
 
■詳細なダウンロード進捗状況を取得する
 
Blob オブジェクトは、XMLHttpRequest を使って取得できます。
 
これにより、詳細なダウンロードの進捗状況を知る事ができます。
 
■内部的な動作について
 
ファイルの中身が、一時的にメモリ上に常駐するようになります。
 
現在のページがアンロードされると、Blob URL Scheme も自動的に消滅します。
 
手動的に破棄する事もできます。
 
■メディア系のファイルを事前に読み込む
 
<AUDIO> 要素などのプリロードは、必ずしも動作するとは限りません。
 
Blob URL Scheme に変換すると、確実な事前読み込みが実現できます。
 
■再リクエストを防止する
 
Blob URL Scheme に変換すると、再リクエストは発生しません。
 
画像などの src プロパティを、頻繁に変更したい場合に効果的です。
 

■ローカルファイルをリソースとして活用する

 
ローカルファイルを、リソースとして活用できます。
 
例えば、ローカルの画像ファイルをブラウザに表示できます。
 
File オブジェクトから、Blob URL Scheme を生成する事ができます。
 
■セキュリティについて
 
Blob URL Scheme は、ランダムな文字列です。
 
よって、ユーザーの個人情報(ディレクトリ名)が、開発者側に漏洩しません。
 
ローカルファイルを参照する手段の1つに、file: スキームがあります。
 
しかし、セキュリティ上の理由で、file: スキームは動作しません。
 

■動的に生成したバイナリをリソースとして活用する

 
ArrayBuffer から、Blob オブジェクトを作成します。
 
Blob オブジェクトから、Blob URL Scheme を生成します。
 
■ Data URI Scheme との違い
 
Data URI Scheme を使っても同じ事が実現できます。
 
Data URI Scheme の方が、多くのブラウザで対応しています。
 
しかし、Data URI Scheme は、大容量のデータを取り扱うには不向きです。
 
Blob URL Scheme なら、100MByte を超える大容量でも、実用に耐え得ます。
 
Data URI Scheme なら、ブラウザが数分以上応答不能に陥るでしょう。
 

■ブラウザが Blob URL Scheme をサポートしているか調べる

 
window.URL が真であるか比較します。
 
Opera(Presto 版) では、動作しません。
 
Safari 5 以前では、対応していません。
 
 


 

Blob URL Scheme を生成する

 
 


■Blob URL Scheme を生成する


window.URL.createObjectURL() メソッドを使用します。
 
window.URL.createObjectURL( Blob ) :String
第01引数 BlobBlob や File オブジェクトを指定する。
戻り値 StringBlob 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() メソッドを使用します。
 
window.URL.revokeObjectURL( "Blob URL" ) :Void
第01引数 StringBlob 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);

}