今回とある仕事の為に端末持った人の現在地を緯度、経度取得してデータにしておく必要があったんですが、Geolocationを使うなら、データ作成もJSでやってしまいたいなぁと思って、隣の人に聞いてみたんですが、JSでそんなことできねぇよパガ！って言われました。嘘だと思って調べてみたら、HTML5ではFileApiなるものがあるそうで、これを使えばなんとかなりそうな感じでした。とりあえずこれについて調べてたらgoogleの人の資料が出てきたので、ラッキーと思ったので記事にしました。
追記
2019年11月 本記事を丁寧に書き直したのでよろしければ下記リンクからご覧いただけないでしょうか。ダウンロードの実現もできています。
FileAPIの対応ブラウザ
IEの対応バージョンは10以降ってなってます。Safariでも、5まで一部機能がサポートされていないです。いやもう使ってるのかな。僕まだ使ってないのでわかんない。とりあえず使えなかった機能を表にしておきます。
| ブラウザ | 未対応機能 |
|---|---|
| IE10様 | ファイルを動的に読み取って2進数のデータを取得する機能((FileReaderオブジェクトのreadAsBinaryStringメソッド) |
| Safari5以前 | File内容読み取る機能(FileReaderオブジェクトが未実装) |
アタシのブラウザ大丈夫かしら
このコードを書いてエラーが出なきゃFileAPI全て利用が可能です。
if (window.File && window.FileReader && window.FileList && window.Blob) { } else { alert('未対応'); }何ができるの？
FileAPIを使うとJavaScriptでファイルの読み取りや書き込みができるようになるっぽいです。ざっと見た限り、良く出てきたサンプルプログラムは読み込みの方で、inputのname属性fileを使ってローカルから読んできたデータをブラウザに書き出すサンプルプログラムを結構な人が簡単に実装してました。
で、これinput属性使わなくてもファイル読み取れるらしいんですがむりかも・・・あれ？やっぱできるっぽい？、まだ説明書完全に読んでないので、もしできたら今度書きます。Fileの書き込みについて書いてみたいと思ってます。fileWriter.write()で書き込めるらしいです。Blobって概念がまだちゃんと掴めてないので、あんまり詳しくはまだかけません。おしえてください。追記
コメントでご指摘を頂いた通り、ファイルの書き込みとは、Webブラウザでダウンロードできるようにするって事みたいです。任意のファイルにアクセスしたり書き込みは出来ないそうです・・・。
詳しくFileAPIについて知りたい人向け資料
自分も今日発見したので、全然勉強してないです。でも、これ使ってプログラム組もうと思ってるので、これについてまた書くと思います。
FileAPIのスライド資料(仕組みが分かりやすい)
JavaScriptでローカルファイルを自在に操る - File API
HTML5のFile APIでローカルファイル情報取得してやんよ!!!FileSystem API について知る
JavaScriptでローカルにファイルを保存する方法（その1)HTML5に疎いなぁ。本当にでも勧告されたし覚えないとな。
W3C の HTML5 Logo では以下のカテゴリを HTML5 に含めている[7]。
セマンティックス - HTML5の新タグ、RDFa、マイクロデータ、マイクロフォーマット
オフラインとストレージ - App Cache、Web Storage、Indexed Database API、File API
デバイスアクセス - Geolocation API、マイク・カメラ、アドレス帳・カレンダー、端末の向き
接続性 - WebSocket、Server-Sent Events
マルチメディア - audio, video要素
3D、グラフィックス、エフェクト - SVG、canvas要素、WebGL、CSS3 3D
パフォーマンスと統合 - Web Workers、XMLHttpRequest Level 2
CSS3 - WOFFも含むWikipediaより引用
