に投稿 コメントを残す

モンキー ターン 4 解析k8 カジノJavaScriptでファイル操作!? File APIを使いこなそう仮想通貨カジノパチンコボード ゲーム 3 人

モンキー ターン 4 解析k8 カジノJavaScriptでファイル操作!? File APIを使いこなそう仮想通貨カジノパチンコボード ゲーム 3 人

モンキー ターン 4 解析k8 カジノJavaScriptでファイル操作!? File APIを使いこなそう仮想通貨カジノパチンコボード ゲーム 3 人

米国 株 解説k8 カジノ 連載:人気順に説明する初めてのHTML5開発業務アプリInsider/Insider.NET

福井 パチンコ コロナpowered by Insider.NET

「連載:人気順に説明する初めてのHTML5開発」のインデックス

連載目次

 近年のWebアプリケーションでは、画像ファイルやテキスト・ファイル、Officeファイルのアップロードやダウンロードのやり取りが行われることが多くなってきている(例えば、Twitter上での画像ファイル共有やGoogleドキュメントでのOfficeファイルのアップロードなどがそれだ)。

 HTML5では、ファイル操作に関するAPIとして「File API」が定義されたことで、ローカルのファイルをブラウザ上で直接、取り扱うことが可能となった。これによって、Webとローカルの違いをアプリケーションで意識しなければならない局面も少なくなる。

 現在、File APIは以下の3種類の仕様が策定されている。

名前 概要File APIファイルの読み取りを行うAPIFile API:Writerファイルへの書き込みを行うAPIFile API:Directories and Systemディレクトリ階層内にフォルダやファイルの作成・保存を行うAPIFile APIの種類と仕様

 File APIはファイルのプロパティ値や読み込み、書き込み、新規作成などを実施するために全部で約30個のメソッドやプロパティなどを保有している。全てを紹介することが難しいため、今回はFile APIの基本となる読み取りを行うAPIにフォーカスを当てて解説を進める(本稿の後半では書き込みについても部分的に解説する)。

 次の表のとおり、現在、リリースされているほとんどの主要ブラウザでFile APIは実装済みだ。

ブラウザ File APIFile API:WriterFile API:Directories and SystemInternet Explorer未実装未実装未実装Firefox3.5以降6以降*1未実装Chrome6以降9以降*29以降*3Safari5以降未実装未実装Opera11.1以降未実装未実装主要ブラウザにおけるFile APIの実装状況*1 インターフェイスの一部に「Moz」というプレフィックスが必要。*2 インターフェイスの一部に「WebKit」というプレフィックスが必要。*3 「–unlimited-quota-for-files/–allow-file-access-from-files」というオプションが必要。

 もちろん全てのメソッドやプロパティが網羅されているわけではないが、今回紹介するFile APIに関してはIE以外のブラウザで実装済みだ(IEでは、次期バージョンとなる10からFile APIが正式対応の予定)。

■File API実装の有無を確認する

 File APIの解説に進む前に、File APIの実装の有無を確認するコードを紹介しておこう。File APIの実装の有無は、以下のコードで確認できる。

if (window.File) { // File APIに関する処理を記述 window.alert("File APIが実装されてます。");} else { window.alert("本ブラウザではFile APIが使えません");}

File APIの利用の可否チェック(FileAPI.htm)

 実行結果は図1のとおりだ。

図1 File APIの実装チェック

 windowオブジェクトのFileプロパティがある場合はFile APIが利用できるものとして実処理を、ない場合は利用できない旨を伝えるエラー・メッセージの表示などを行うのが一般的だ。

 では、順にFile APIの使用方法を確認していく。

■ファイルのプロパティ情報を取得する

 まずは、File APIでファイルのプロパティ情報を取得するサンプルを作成する。実行結果は図2のとおり。こちらから実際に試すことができる。

図2 File APIでファイルのプロパティ情報を取得

 今回は「本連載 第3回:アドインなしで実現可能! ドラッグ&ドロップを使いこなそう」で紹介したDrag and Drop APIを使用して複数のローカル・ファイルをドラッグ&ドロップした際に、ファイル情報を取得できるように実装する。実際のコードは以下のとおりだ。

<script type="text/javascript"> // File API実装チェック if (window.File) { window.alert("File APIが実装されてます。"); // File APIが実装されている場合には、dropイベントを登録 document.getElementById("drop").addEventListener("drop", onDrop, false); } else { window.alert("本ブラウザではFile APIが使えません"); } // Drop領域にドロップした際のファイルのプロパティ情報読み取り処理 function onDrop(event) { // (1)ドロップされたファイルのfilesプロパティを参照 var files = event.dataTransfer.files; var disp = document.getElementById("disp"); disp.innerHTML = ""; for (var i = 0; i < files.length; i++) { var f = files[i]; // (2)ファイル名とサイズを表示 disp.innerHTML += "ファイル名 :" + f.name + "ファイルの型:" + f.type + "ファイルサイズ:" + f.size / 1000 + " KB " + "<br />"; } // (3)ブラウザ上でファイルを展開する挙動を抑止 event.preventDefault(); } function onDragOver(event) { // (4)ブラウザ上でファイルを展開する挙動を抑止 event.preventDefault(); } </script><section id="main"> <p>ドラッグアンドドロップで1つから複数のファイルのプロパティを取得します。</p> <div id="drop" style="width:700px; height:150px; padding:10px; border:3px solid" ondragover="onDragOver(event)" ondrop="onDrop(event)" >ここにドロップしたファイルのプロパティを読み込みます。</div> <p>ファイルプロパティ表示</p> <div id="disp" ></div></section>

ファイルのプロパティ情報を参照するサンプル(FileAPI.htm)

(1)ドロップされたファイルのfilesプロパティを参照

 ドロップされたファイルは、dataTransferオブジェクトのfilesプロパティから取得できる。filesプロパティの戻り値は、Fileオブジェクトの配列となる。

(2)ファイル名とサイズを表示

 Fileオブジェクトのプロパティから各項目の値を取得し、<div>要素に出力している。

 取得できる情報は、以下の表のとおりだ。ファイルの主な情報は、一通り取得できることが確認できるだろう。

名前 概要nameファイル名typeファイルのMIME/TYPEsizebytes単位でのファイル・サイズurnファイルのURNFileインターフェイスのプロパティ

(3)(4)ブラウザ上でファイルを展開する挙動を抑止

 ブラウザ上でファイルを展開する挙動(=画像ファイルやテキスト・ファイルが開かれて、ブラウザ上に表示されてしまう動作)を防ぐために、preventDefaultメソッドを呼び出す。

 従来のHTMLでは、<input>要素で選択したファイルの名前しか取得できなかった。しかし、File APIを使用することで、より多くの情報にアクセスできるようになった。これを利用すれば、(例えば)アップロード前にファイルの事前検証などが実施できるようになるだろう。

■ファイルの内容を取得する

 続いて、ファイルの内容を取得するAPIについて解説する。

 ファイルを取得するAPIは同期/非同期の2種類が存在する。

名前 インターフェイス概要同期APIFileReaderSyncファイルの内容をメソッドの戻り値で取得非同期APIFileReaderファイルの内容はバックグラウンドで取得し、イベント・ハンドラ経由でファイルの読み取り結果を取得するファイル取得のAPI

 それぞれファイル取得のインターフェイスや呼び出し方法が異なるが、今回は非同期APIを使用したファイル内容の取得について解説する。同期APIは次回解説予定のWeb Workersの中でのみ利用可能なため、非同期APIを利用したファイル内容の取得については次回の記事を確認していただきたい。

 FileReaderインターフェイスで利用できる主なメソッド/プロパティは、以下のとおり。

メソッド/プロパティ 概要readAsBinaryString(ファイル)ファイル内容をバイナリ文字列として返すreadAsText(ファイル,文字エンコーディング)指定された文字エンコーディングでファイルを読み込んで返すreadAsDataURL(ファイル)ファイル内容をDataURL(http://www.akanko.net/marimo/data/rfc/rfc2397-jp.txt)の形式で返すabord()ファイルの読み取りを中断result各メソッドの結果を参照するプロパティFileReaderのメソッドとプロパティ

 これらを利用して、ファイルの内容を取得してみよう。

 先ほどのサンプルと同じようにファイルをWindowsエクスプローラから選択するか、ドラッグ&ドロップでファイルを複数ドロップされた場合にテキスト・ファイルか画像ファイルをFileReaderで読み取り、その内容を表示するサンプルを作成する。実行結果は図3~5になる。こちらから実際に試せる。

図3 実行直後の画面図4 取得した画像ファイルを表示した例図5 取得したテキスト・ファイルを表示した例

[Note]FileReaderの活用シナリオ

 一番イメージしやすい活用シナリオとしては、SkyDrive(次の画面を参照)などのWebアルバム・アプリケーションにおいて、複数の画像を一括アップロードする局面が考えられる。File APIを利用することで、画像ファイルの読み込みなどの実装をプラグインやアドインを利用することなく実装できるようになるだろう(SkyDriveは現在、Silverlightを用いて一括アップロード機能を実装している)。

図6 WindowsエクスプローラからSkyDriveへドラッグ&ドロップで画像のアップロード

 では、具体的なサンプル・コードを示す。

<script type="text/javascript"> // 前サンプル同様のFile API実装チェック(省略) // Drop領域にドロップした際のファイルのプロパティ情報読み取り処理 function onDrop(event) { var files = event.dataTransfer.files; var disp = document.getElementById("disp"); disp.innerHTML =""; // ファイルの配列から1つずつファイルを選択 for (var i=0; i< files.length; i++) { var f = files[i]; // (1)FileReaderオブジェクトの生成 var reader = new FileReader(); // (2)画像ファイルかテキスト・ファイルかを判定 if (!f.type.match(‘image.*’) && !f.type.match(‘text.*’)) { alert("画像ファイルとテキスト・ファイル以外は表示できません。"); continue; } // (3)エラー発生時の処理 reader.onerror = function (evt) { disp.innerHTML = "読み取り時にエラーが発生しました。"; } // (4)画像ファイルの場合の処理 if (f.type.match(‘image.*’)) { // ファイル読取が完了した際に呼ばれる処理 reader.onload = function (evt) { var li = document.createElement(‘li’); var img = document.createElement(‘img’); img.src = evt.target.result; li.appendChild(img); li.innerHTML += "<br />"; disp.appendChild(li); } // readAsDataURLメソッドでファイルの内容を取得 reader.readAsDataURL(f); } // (5)テキスト・ファイルの場合の処理 if (f.type.match(‘text.*’)) { // ファイル読取が完了した際に呼ばれる処理 reader.onload = function (evt) { // FileReaderが取得したテキストをそのままdivタグに出力 disp.innerHTML = reader.result; } // readAsTextメソッドでファイルの内容を取得 reader.readAsText(f, ‘shift-jis’); } } // (6)ブラウザ上でファイルを展開する挙動を抑止 event.preventDefault(); } function onDragOver(event) { // (6)ブラウザ上でファイルを展開する挙動を抑止 event.preventDefault(); }</script>

ファイルの内容を表示するサンプル(FileAPI2.htm)

 HTML要素部分は前掲のFileAPI.htmの場合と同じなので省略している。また、ドロップされたファイルをdataTransferオブジェクトのfilesプロパティから取得している点も前サンプルと同様だ。以下は、本項固有の部分について、番号順に解説する。

(1)FileReaderオブジェクトの生成

 ファイルの内容を読み込むFileReaderオブジェクトを生成している。

(2)画像ファイルかテキスト・ファイルかを判定

 画像かテキスト・ファイル以外のファイルが選択された場合に対応していない旨を表示する。そのため、コンテンツ・タイプ(typeプロパティ)からファイル種別を判定している。

(3)エラー発生時の処理

 ファイル読み込みでエラーが発生した場合のコールバック関数を、イベント・ハンドラとして登録している。FileReaderに関するイベントは、以下のとおり。

イベント 概要loadstart読み込み開始時load読み込み成功時loadend読み込み終了時(成功/失敗時の双方で発生)abord読み込み中断時error読み込み失敗時progress読み込み中FileReaderに関するイベント

 loadイベントとloadendイベントには、「成功時だけに発生する」と「成功時だけでなく失敗時にも発生する」という違いがある。状況に応じて使い分けると良いだろう。

 今回はerrorイベントとloadイベントを利用して実装している。

(4)画像ファイルの場合の処理

 画像ファイルかどうかを判定し、画像ファイルの場合の処理を記載している。FileReaderにファイルの読み込み成功時に行う処理をloadイベントに登録している。

 ポイントはFileReaderのreadAsDataURLメソッドだ。readAsDataURLは画像ファイルを読み込み、リソースへのリンクではなく、データを直接、埋め込むためのスキームであるDataURL形式で返す。読み込んだDataURL形式の結果はresultプロパティで参照されるため、今回は、生成した<img>要素のsrc属性の参照先にFileReaderで読み込んだ結果を指定している。

(5)テキスト・ファイルの場合の処理

 基本的な処理の流れは(4)と同様になる。異なる点は、テキスト・ファイルを読み込むためにreadAsTextメソッドを使用しているという点だ。文字コードの指定は第2パラメータで指定している(ここでは「shift-jis」)。テキスト・ファイルはそのまま出力可能なので、<div>要素にinnerHTMLプロパティで追加している。

(6)ブラウザ上でファイルを展開する挙動を抑止

 ブラウザ上でファイルを展開する挙動を防ぐために、preventDefaultメソッドを呼び出す。

 続いて次のページでは、ファイルに内容を書き込むAPIについて解説する。

File API:Writerによるファイル書き込み仮想通貨カジノパチンコau wallet クレジット カード au pay 違い

コメントを残す