JavaScript プログラミング講座
















Blob URL Scheme について




・Blob URL Scheme とは？
・Blob URL Scheme を生成する
・Blob URL Scheme を破棄する



前のページに戻る


　



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 を使って取得できます。
　
 これにより、詳細なダウンロードの進捗状況を知る事ができます。

　
■内部的な動作について
　
ファイルの中身が、一時的にメモリ上に常駐するようになります。
　
 ArrayBuffer は物理メモリが確保できなければ問答無用で失敗しますが、Blob は柔軟に動作します。ブラウザによっては、ローカルストレージを駆使してでも超巨大なバイナリの取り扱いを試みます。

　
現在のページがアンロードされると、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 は、大容量のデータを取り扱うには不向きです。
　
 100MByte のデータを渡すと、ブラウザが数分以上応答不能に陥るでしょう。

　
Blob URL 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);

}



　


上に戻る


 

　

前のページに戻る