「魔法の…」なんて、ちょっと大げさなタイトルをつけましたが、仮想的なURLを使ってウェブ上で様々な事が出来るのを知りましたのでまとめてみます。

端末にアクセスする方法としてDataURIを利用する方法がありますが、データ変換を数多く処理しなければならない為に効率があまり良くありません。そこでBlobURLの出番となります。


BlobURL

Careful now - Get a reading of that thing

Credit:Careful now – Get a reading of that thing

「Blob」って俗語ではスライムみたいに「ぶよぶよした」みたいな意味があるみたいです。ウェブ用語としては「Binary Large Object」の略なんで直接関係ないですけど。

このBlobURLですが、現在ではほぼすべてのブラウザに対応しています。(caniuse.com)

Can I use... Support tables for HTML5, CSS3, etc 2015-08-15 10-30-03

Mobile Safariにも対応したので、iPhoneでも使えます。

先日作ってみたHTML5 Video Caption Makerを例に使い方をまとめてみます。


動画ファイルにアクセスする

一番簡単なファイルへのアクセス方法は<input type="file">要素を使います。

呼び出されたファイルはforループを使ってファイルデータとして取り出す事が出来ます。

そしてそこからがポイントになるのですが、ファイルデータを仮想URLへと変換してくれる便利なメソッドがあるのです。

 URL.createObjectURL(blob)

これは本当に使い勝手がよくて、通常のWebサイトでURL指定する箇所すべてに仮想URLをセットする事が出来ます。ここではjQueryを利用して動画ファイルを仮想URLとして<video>要素のsrc属性として挿入しています。


入力したテキストを表示する

ここではtextareaのフィールドに入力されたテキストをjQueryメソッド.val()を利用して、変数textとして格納しています。

格納した変数は同じくjQueryメソッド.htmlを利用して表示させる事ができます。

BlobURLを利用すればこの変数textをファイルデータとして取り出す事が出来ます。


入力したテキストをダウンロードする

ローカルのファイルを呼び出すだけではなくて、入力されたデータを仮想URLとして引き渡す事もできます。

まずは上記の変数textをBlobオブジェクトとして変換します。

var blob = new Blob([ text ], { "type" : "text/plain" })

このメソッドを使って変数をテキスト形式でBlobオブジェクト(仮想的なファイル)に変換します。これで入力したテキストに仮想URLを持たせる事が出来ます。

var blobURL = window.URL.createObjectURL(blob);

この仮想URLblobURLをアンカータグのダウンロード属性を利用してダウンロードします。


<a target="_blank" download="caption.vtt" id="download">

ここではjQueryを利用してアンカータグのhref属性としてテキストの仮想URLを挿入しました。


 $("#download").attr("href",blobURL);

アンカータグにダウンロード属性があるのを知らなかったのですが、こちらa要素|MDNに詳しく載っています。 このようにしてBlobオブジェクトを外部ファイルに取り出す事が可能なんですね。


入力したテキストをWebVTT字幕で挿入する

さて、ここからが本番です。WebVTT字幕ファイルの中身はただのテキストデータなので、これを動画のtrack要素に指定してやれば良いのだろうと考えました。

jQueryの.attrメソッドを利用してtrack要素のsrc要素にテキストエリア内に書き込まれたテキスト(WebVTT)を引き渡します。

これは上手くいきました。

設置した保存ボタンをクリックする度に字幕が更新されます。一つ困ったのが字幕指定をする際には、更新前のデータが残ってしまうことでした。これはjQueryの.removeAttrメソッドで一度クリアしてから挿入する様にしてみたところ上手くいきました。


ひとつ残念だったのがFireFoxでこの指定が上手くいかなかったことです。(SafariとChromeでは反応するんですが…)これは解消方法が見つかったら修正してみようかなと思います。


まとめ

動画データの取得や、テキストデータのダウンロードなどはサーバーを経由しなければ出来ないかなと思っていたのですが、BlobURLメソッドを利用することで比較的簡単な記述で実装することができました。

Webの標準技術を利用して様々な事が出来る様になってきています。WebアプリやWebサービスを作ってみようと思っている方に、ちょっとでもお役に立てれば幸いです。

こちらのWebアプリは上記のBlobURLを使って作りました。

HTML5 Web標準API バイブル
羽田野 太巳
ソシム
売り上げランキング: 183,368

こちらは2014年発行の書籍です。当時実装が進んでいなかったブラウザ(特にSafari)でも様々なメソッドが利用できる様になってきているので参考になりました。ちょっと難しめだけど辞書的に使えるのでオススメです。