質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

解決済

1回答

14141閲覧

HTML5のFile APIは、廃止(?)予定のFileSystem APIの代替になりますか?

kokeshi

総合スコア6

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

0クリップ

投稿2015/01/02 12:41

最近chrome extensionで開発の真似事を始めました。
chrome上キャプチャ画像をブラウザに紐づくローカル空間にファイルとして保存・管理するシステムを現在作成途中です。

Full Page Screen Capture(chrome拡張) + FileSystem API(ページの基本的な例にあるデモ) = 自分のやりたいこと

FilesystemAPIの利点として、オフラインでも大容量のファイルの変更・保存・破棄ができるところが挙げられるでしょうか?ただ、FilesystemAPIは既に開発終了したようなアナウンス(W3Cで凍結宣言?)があります。
ローカル空間に保存する手段としては、とりあえず名前の近いFile APIが代替の手段になると思っています。ただ、File APIのネット上のサンプルを見る限り、

書き込みはWebブラウザのダウンロードにデータを渡す(またはObjectURLを生成)機能となっています。

File API - hifive
となっており、何だか難しそうだなーと感じています。

今回の質問はタイトルにある通り、HTML5のFile APIは、廃止(?)予定のFileSystem APIの代替になるかどうかです。
以下のコードはFileSystem API(ページの基本的な例にあるデモ) のソースの引用です。
このコードをFileSystemAPIを使わず、File APIでどのように実現すればよいでしょうか?

lang

1> buttons[1].addEventListener('click', function(e) { 2> if (!fs) { 3> return; 4> } 5> 6> var dirReader = fs.root.createReader(); 7> dirReader.readEntries(function(entries) { 8> if (!entries.length) { 9> filelist.innerHTML = 'Filesystem is empty.'; 10> } else { 11> filelist.innerHTML = ''; 12> } 13> 14> var fragment = document.createDocumentFragment(); 15> for (var i = 0, entry; entry = entries[i]; ++i) { 16> var img = entry.isDirectory ? '<img src="http://www.html5rocks.com/static/images/tutorials/icon-folder.gif">' : 17> '<img src="http://www.html5rocks.com/static/images/tutorials/icon-file.gif">'; 18> var li = document.createElement('li'); 19> li.innerHTML = [img, '<span>', entry.name, '</span>'].join(''); 20> fragment.appendChild(li); 21> } 22> filelist.appendChild(fragment); 23> }, errorHandler); 24> }, false);

よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

あまり詳しくは無いのですが、
File APIはフォームのファイル選択ダイアログで指定されたファイルなどを扱うためのAPIで、
ブラウザにデータを保存するためのAPIでは無かったはずです。

書き込みはWebブラウザのダウンロードにデータを渡す(またはObjectURLを生成)機能となっています。

これについても、ブラウザにファイルをダウンロードさせるためのリンクを生成する機能などの事ではないでしょうか。

例えばZIPファイルをダウンロードする時とか、リンクをクリックしますよね?
そのリンク先のURIに該当する文字列を、JavaScriptだけで生成する機能です。
(ファイルがURLになる原理として似たものに、画像のBase64エンコードがあります)

File API - hifive
このサイトの一番下にある「ファイルの書き込み」の例でも、最終的に生成されているのはURI文字列です。

キャプチャ画像をコンピュータのフォルダ内にファイルとしてダウンロード保存させるという用途であれば、
またはキャプチャ画像をimg要素や別ウィンドウで展開するということなら、
File APIは最適な選択かもしれません。

投稿2015/01/02 16:25

sounisi5011

総合スコア697

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kokeshi

2015/01/03 09:06

うーん、ブラウザに紐づくローカルに保存はできず、一時的にデータを生成し、コンピュータのフォルダにダウンロードファイルとして保存する方法しかない、ということですね。 FileSystemAPIは便利なので、廃止したり、chrome依存にしたりせず、いろいろ使えるとよかったのですが・・・。想定したものと少し方向性を変えないといけないですね。 ありがとうございました。
sounisi5011

2015/01/03 12:02

データ保存の用途としては localStorage があります。 これに関しては、廃止されるという話は(少なくとも私は)聞いていません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問