BlobBuilder を使ってファイルを作成する
本記事は、マイクロソフト本社の IE チームのブログ から記事を抜粋し、翻訳したものです。
【元記事】Creating Files through BlobBuilder January 28, 2012 11:38 PM
Web サイトから Web アプリケーションへの移行が進むにつれて、ファイルを効果的に扱うことがますます重要になってきています。Platform Preview 2 以降、IE10 ではクライアント上でファイルの読み取りや切り出しを行えるようにするための File API (英語) がサポートされています。さらに Platform Preview 4 では、新しいファイルを作成するためのツールである BlobBuilder (英語) のサポートが追加されました。また、IE10 にはユーザーがコンピューターに BLOB データを保存できるようにするための新しいメソッドも 2 つ用意されており、これらを使って、クライアント常駐のデータを扱う場合に、優れたエンド ツー エンドのエクスペリエンスを実現できます。
IE Test Drive (英語) では、BlobBuilder と File API の機能を確認できるピアノ デモ (英語) をお楽しみいただけます。ピアノの鍵盤をクリックすると、mp3 形式の音楽ファイルと SVG 形式の楽譜ファイルの 2 つのファイルが作成されます。鍵盤をクリックするごとに、2 つのファイルのサイズが変わっていくようすがご確認いただけると思います。作成した曲を聴く場合は、再生ボタンをクリックします。また、ピアノの鍵盤のすぐ上にあるリンクをクリックすると、音楽ファイルまたは SVG の楽譜ファイルをダウンロードできます。今回のブログ記事では、BlobBuilder と File API の機能に焦点を当て、このデモの動作のしくみについてご紹介します。
BlobBuilder の機能
BlobBuilder は、その名のとおりクライアント上で BLOB を作成するための API です。この処理を行うメイン メソッドは append です。append 関数では、次の 3 種類のデータ型を使用できます。
- BLOB オブジェクト
- プレーンテキスト
- 配列バッファー
ピアノ デモでは、それぞれの音に対して 1 つの BLOB を使用し、それらを付け加えていって mp3 ファイルを作成します。また、楽譜の SVG ファイルは、SVG ソースが記述されたテキストを付け加えていって作成します。
getBlob は BlobBuilder オブジェクトで使用できる別のメソッドで、付け加えられたすべてのアイテムを含む BLOB オブジェクトを返します。以下に BlobBuilder を使ってテキスト ファイルを作成する簡単なサンプルをご紹介します。
// The BlobBuilder constructor is prefixed in all browsers.
// Use MSBlobBuilder in IE, MozBlobBuilder in Firefox, and WebKitBlobBuilder in WebKit-based browsers.
var bb = new MSBlobBuilder();
bb.append("Hello World!");
var blob1 = bb.getBlob("text/plain");
getBlob メソッドについて重要な点は、IE10 および Firefox で getBlob を呼び出すと、BlobBuilder オブジェクトの内容が削除されるということです。そのため、次に append を呼び出すときには、新しい BlobBuilder オブジェクトに追加する場合と同じように処理が行われます。WebKit では、現在、getBlob を呼び出しても BlobBuilder の内容が削除されることはありません。次の例について考えてみましょう。
var bb = new MSBlobBuilder();
bb.append("Hello World!");
var blob1 = bb.getBlob("text/plain");
bb.append("BlobBuilder is great");
var blob2 = bb.getBlob("text/plain");
すべてのブラウザーで、blob1 には "Hello World!" というテキストが格納されます。しかし、blob2 についてはブラウザーによって結果が異なります。IE10 と Firefox では、blob2 に "BlobBuilder is great" というテキストが格納されますが、WebKit ベースのブラウザーでは、"Hello World!BlobBuilder is great" というテキストが格納されます。この動作の違いについては、Web Applications ワーキング グループで現在も協議が続けられています (英語)。
XHR を使って BLOB を取得する
File API を使用すると、ユーザーが選択したファイルに簡単にアクセスできるようになります。この点については、Magnetic Poetry (英語) というデモで実際にご確認いただけます。File API はサイトにユーザー独自のデータを組み込む場合に最適ですが、ピアノ デモでは、デモに音のファイルを組み込む必要がありました。このように、BLOB を使って処理を行いたいがデータは提供したものを使いたいという場合には、XHR を使用することができます。
XHR の responseType プロパティは、IE10 で新しく追加されたものです。responseType プロパティでは、blob、array buffer、text、document の 4 つの値がサポートされています。以下はピアノ デモの初期化メソッドである getBlobs() の内容です。
var req = new XMLHttpRequest();
var url = 'PianoNotes/AllNotes2.mp3';
req.open('GET', url, false);
req.responseType = "blob";
req.onload = function () { /* ... */ };
req.send(null);
お気付きの方もいらっしゃると思いますが、このデモでは XHR リクエストが 1 回しか行われておらず、デモで使用するすべての音が含まれている 1 つのファイルだけがダウンロードされています。しかし、デモで鍵盤をクリックすると、1 つの音だけが再生され、mp3 ファイルには 1 つの音だけが追加されます。この動作を実現するには、すべての音が含まれているファイルをダウンロードしてから、File API の slice メソッドを使ってファイルを切り出し、24 個の音をそれぞれ抽出します。こうすることで、24 個のファイルを個別にダウンロードするよりも、はるかにパフォーマンスを抑えることができます。
音楽ファイルを作成する
デモでそれぞれの音の BLOB を取得したら、mp3 ファイルの作成は簡単です。鍵盤がクリックされるたびに、次のメソッドを呼び出します。
musicBlobBuilder.append(noteBlob);
ファイル サイズを更新するために、BLOB を取得してからファイル サイズを取得します。
var musicBlob = musicBlobBuilder.getBlob("audio/mp3");
// display musicBlob.size
最後に、getBlob を呼び出すと BlobBuilder オブジェクトが削除されるため、取得した BLOB を再度追加します。
musicBlobBuilder.append(musicBlob);
SVG ファイルを作成する
デモで鍵盤をクリックすると、そのたびに楽譜に音符が追加されて表示されます。楽譜は "scoreContainer" という ID を持つ div 要素に格納されている単一の SVG 要素で描かれます。鍵盤がクリックされるたびに、SVG 要素に音符を追加するスクリプトが実行され、ソースが追加されて SVG ファイルが作成されます。
svgBlobBuilder.append(document.getElementById("scoreContainer").innerHTML);
var svgBlob = svgBlobBuilder.getBlob("image/svg+xml");
// display svgBlob.size
この場合では、ユーザーが次に鍵盤をクリックしたときは白紙の状態から始めたいので、svgBlobBuilder にデータを追加し直す処理は行いません。
ディスクにファイルを保存する
デモで行う最後の処理は、ディスクへのファイルの保存です。ピアノの鍵盤の上にある [Music File] (音楽ファイル) と [Musical Score File] (楽譜ファイル) のリンクをクリックすると、ファイルのダウンロードと同じような操作でファイルを保存することができます。
Platform Preview では、通知バーが利用できないことに注意してください。代わりに、保存を確認するダイアログ ボックスが表示されます。
それぞれのリンクからは、saveSong() または saveSheetMusic() が呼び出されます。これらのメソッドを調べてみると、どちらのメソッドでも msSaveOrOpenBlob 関数が使用されていることがわかります。
window.navigator.msSaveOrOpenBlob(svgBlob, "MusicScore.svg");
msSaveOrOpenBlob と msSaveBlob はどちらも IE10 で提供されているメソッドで、これらを使って、BLOB をコンピューターに保存するかどうかをユーザーに確認することができます。
msSaveOrOpenBlob を呼び出すと、ファイルの保存とキャンセルに加えて、ファイルを開くオプションが通知バーに表示されます。msSaveBlob を呼び出すと、ファイルの保存またはキャンセルのオプションだけが表示されます。これらの関数はまだどの標準にも組み込まれていませんが、私たちは BLOB データを使用したエンド ツー エンドのシナリオを記述する場合にこれらの関数が大いに役立つと考えており、いつかこれらが標準となる (英語) ことを期待しています。
ピアノ デモの作成は楽しい作業でしたので、皆さんが BlobBuilder をどのように使用されるかをぜひ知りたいと思っています。どうぞご意見をお寄せください!
— Internet Explorer 担当グループ プログラム マネージャー Sharon Newman