2013年8月6日火曜日

名前付きでファイル保存可能なブラウザを検知するには?

HTML5でファイル保存を行うなら、今のところeligrey氏の「FileSaver.js」が鉄板だと思う。

しかし残念がら、SafariやOperaではダウンロードフォルダに保存する方式でなく、新しいタブを開いて保存することになる。つまりファイルに名前をつけられない_| ̄|○

これではとても「使える」という状態ではないので、SafariやOpera(ver.12。ver.15はOK。)は非サーポートブラウザにしようと考えた。

ここで問題なのは、どういった判断でサポート可能かどうかを検知するかだ。始めはユーザーエージェントで判断するしか無いか?と思ったのだけど、ソースを見たら、それらしき箇所が見つかった。

...
, save_link = doc.createElementNS("http://www.w3.org/1999/xhtml", "a")
, can_use_save_link = "download" in save_link
...

どうやら、xhtmlでaタグエレメントオブジェクトを作り、そのプロパティーとして「download」が存在するかどうかで判断しているようだ。

これに加えて、IE10では「navigator.msSaveOrOpenBlob」で判断しているようだ。

なので、このようにHTMLのHEAD内で同様の判断をすれば検知できるということが分かった。

var aTag = document.createElementNS("http://www.w3.org/1999/xhtml", "a");
var isSaveOK = navigator.msSaveOrOpenBlob || "download" in aTag;
if (isSaveOK) {
  alert("対応ブラウザ");
} else {
  alert("非対応ブラウザ");
}

ここで一つ疑問に思ったのは、なぜわざわざ「in」演算子を使うのだろう?ということ。「aTag.download」でもいいのでは?と。

こちらによると、「in」と「.」では意味が違う部分があるそうだ。

in演算子の使用法:続JavaScriptのオブジェクトについて - builder

きっと何か意味があると思うので、ソースの通り「in」を使っておいた方が無難だろう。