EPUBデータを読み込む
ファイル選択フォームで選ばれたEPUBデータをHTML5のFile APIを使って読み込みます。File APIについては以下の記事を参照してください。
- ・第41回 File APIでブラウザーからローカルファイルを操作
- http://ascii.jp/elem/000/000/559/559105/
EPUBデータはバイナリー形式なので、以下のようにバイナリーファイルとして読み込みます。
var fileData = document.getElementById("myFile").files[0]; // 選択されたEPUBファイル var reader = new FileReader(); reader.onload = function(evt){ 〜 } reader.readAsBinaryString(fileData);
バイナリーファイルの読み込みが完了すると、reader.onloadで指定したイベントハンドラが呼び出されるので、zip.jsライブラリーを使ってZIPファイルを展開します。
zip.jsライブラリーは配列に1バイト（1文字）ずつバイナリーデータを入れておき、展開するメソッドを呼び出して使います。バイナリーデータはevt.target.resultに入っているので、以下のように1バイトずつ配列に入れていきます。
var bytes = []; var byteData = evt.target.result; for (var i=0; i <byteData.length; i++)bytes[i] = byteData.charCodeAt(i);
これでZIPファイルを展開する準備ができたので、以下のようにしてZip.inflate()を呼び出します。inflate()メソッドにはバイナリーデータを入れた配列を指定します。
var zip = Zip.inflate(bytes);
無事にファイルが展開されると戻り値としてオブジェクトが返されます。返されるオブジェクトは以下のようになっています。
●ZIP展開後の戻り値
{
files: {
"file1": {
version:
bitFlag:
method:
fileTime:
fileDate:
crc32:
size:
fileSize:
nameLength:
extraLength:
},
"file2": …
},
directories: {
"file1": {
version:
extVersion:
bitFlag:
method:
fileTime:
fileDate:
crc32:
size:
fileSize:
nameLength:
extraLength:
commentLength:
diskNumberStart:
attributes:
extAttributes:
headerOffset:
},
"file2": …
},
record: {
diskNumber:
startNumber:
diskLength:
length:
directorySize:
offset:
commentLength:
}
}
展開されたEPUBデータのファイル情報をFirebugのコンソールで確認してみます。以下のようにconsole.dir()を使うと、オブジェクトの内容をFirebugのコンソールにまとめて出力できます。
console.dir(zip.files);
EPUB表示ボタンをクリックすると...
展開されたEPUB内のファイル名が表示される（実際には返されたオブジェクト内容が表示されている）
▲をクリックするとオブジェクトの中身が展開、表示される
展開されたデータがEPUBデータかどうかはmimetypeファイルの内容で確認できます。ファイルの内容はdataプロパティに格納されているので、以下のようにするとアラートダイアログにEPUB形式のMIME Typeが表示されます。
alert(zip.files.mimetype.data);
MIME Typeが表示される
実際のプログラムがサンプル1です。ローカルディスク内にあるEPUBファイルを選択して「EPUB表示」ボタンをクリックすると、ファイル内容がFirebugのコンソールに出力され、mimetypeファイルの内容が表示されます。
●サンプル1
<meta charset="UTF-8" /> <title>EPUBの解凍と情報の読み出し</title> <script type="text/javascript" src="js/sjis.js" charset="shift_jis"></script> <script type="text/javascript" src="js/zip.js" charset="shift_jis"></script> <script type="text/javascript"> window.addEventListener("load", function(){ document.getElementById("viewEPUB").addEventListener("click", function(){ document.getElementById("result").innerHTML = ""; var fileData = document.getElementById("myFile").files[0]; // 選択されたEPUBファイル var reader = new FileReader(); reader.onload = function(evt){ var bytes = []; // EPUBデータを解凍した後にバイトデータを入れる配列(for zip.js用) var byteData = evt.target.result; // zip.js用にバイトデータを配列に入れる for (var i=0; i <byteData.length; i++)bytes[i] = byteData.charCodeAt(i); var zip = Zip.inflate(bytes); // ZIP解凍 console.dir(zip.files); // Firebug用 alert(zip.files.mimetype.data); } reader.readAsBinaryString(fileData); }, true); }, true); </script> </head> <body> <h1>EPUBの解凍と情報の読み出し</h1> <form action="./test.cgi" method="get"> <input type="file" id="myFile" /> <input type="button" id="viewEPUB" value="EPUB表示" /> </form> <div id="result"></div> </body> </html>
