File APIによるファイルアクセス (1/4)
作成:2010-12-02 08:39
更新:2010-12-02 08:45
更新:2010-12-02 08:45
■File APIとファイルアクセス
「これからはWebで何でもできるようになる」「Webブラウザで普通のアプリケーションが動くようになる」と、言われてきましたが、正直、今までそんなすごいWebアプリケーションってあったかな？と思う人も多いでしょう。
今まで、Webベースのアプリケーションがなかなか活用されなかった理由の一つは、「ローカルボリュームにアクセス出来ない」ということがあるのではないでしょうか。最近では「クラウドにデータを保存」というのがはやりですが、やはりハードディスクにファイルを保管しておかないと不安だ、というのが普通の人の感覚です。ローカルボリュームに直接アクセスできないのでは、まともなアプリケーションは作れません。
こうしたことを考慮し、HTML5では、ローカルボリュームのファイルにアクセスできる「File API」と呼ばれるものが整備されることになりました。といっても、自由にアクセス出来るわけではありません。基本、できるのは「ファイルの読み込み」のみ。ローカルボリュームに書きだしたり、ハードディスク内のファイルを書き換えたりすることはできません。（今のところは。一応、仕様としてあるのですが、まだ実装されているブラウザはないみたいです）
では、このFile APIを使って、ファイルアクセスをしてみることにしましょう。まずは、HTMLファイルを用意しておきます。ここでは、ファイルを選択するための<input type="file>タグを１つ用意し、ここでファイルを選択したらスクリプトを実行させるようにしておきましょう。いろいろやり方はありますが、ここではonchangeにdochange関数を実行させるようにしてみました。
では、このHTMLページを使って、簡単なサンプルを作ってみましょう。
今まで、Webベースのアプリケーションがなかなか活用されなかった理由の一つは、「ローカルボリュームにアクセス出来ない」ということがあるのではないでしょうか。最近では「クラウドにデータを保存」というのがはやりですが、やはりハードディスクにファイルを保管しておかないと不安だ、というのが普通の人の感覚です。ローカルボリュームに直接アクセスできないのでは、まともなアプリケーションは作れません。
こうしたことを考慮し、HTML5では、ローカルボリュームのファイルにアクセスできる「File API」と呼ばれるものが整備されることになりました。といっても、自由にアクセス出来るわけではありません。基本、できるのは「ファイルの読み込み」のみ。ローカルボリュームに書きだしたり、ハードディスク内のファイルを書き換えたりすることはできません。（今のところは。一応、仕様としてあるのですが、まだ実装されているブラウザはないみたいです）
では、このFile APIを使って、ファイルアクセスをしてみることにしましょう。まずは、HTMLファイルを用意しておきます。ここでは、ファイルを選択するための<input type="file>タグを１つ用意し、ここでファイルを選択したらスクリプトを実行させるようにしておきましょう。いろいろやり方はありますが、ここではonchangeにdochange関数を実行させるようにしてみました。
では、このHTMLページを使って、簡単なサンプルを作ってみましょう。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5</title>
<style>
img.droppable {
width:200px;height:150px;
background-color:#AAA;
}
</style>
<script type="text/javascript" src="script.js"
charset="UTF-8"></script>
</head>
<body>
<h1>File API Sample</h1>
<p id="msg"></p>
<input type="file" id="file1" onchange="dochange(event);">
<hr>
</body>
</html>
※関連コンテンツ
「JavaScriptによるHTML5プログラミング入門」に戻る