特定のXHTMLファイルを表示する
EPUBデータの展開ができたので、今度はEPUBに含まれるXHTMLデータをWebページとして表示してみます。ここではEPUB内の以下のパスにあるXHTMLファイルを表示します。
OEBPS/Text/Section0001.xhtml
展開されたEPUBデータで特定のファイルの内容にアクセスするには、zip.files[ファイルパス].dataとします。これでファイル内容を読み出せます。ただし、日本語が含まれる場合は以下のように文字化けしてしまいます。
日本語部分が文字化けしてしまう
そこでUTF-8変換ライブラリーを使って、バイナリーデータをUTF-8のテキストにデコード（復元）します。バイナリーデータをUtf8.decode()の引数に指定するとデコードできます。
var text = zip.files["OEBPS/Text/Section0001.xhtml"].data; document.getElementById("result").innerHTML = Utf8.decode(text);
実際のプログラムがサンプル2です。EPUBファイルを選択してEPUB表示ボタンを押すと、以下のように日本語を含むXHTMLが正しく表示されます。
日本語も正しく表示される
●サンプル2
<!DOCTYPE html> <html> <head> <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" src="js/utf8.js" charset="utf-8"></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]; 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["OEBPS/Text/Section0001.xhtml"]); // 特定のファイル情報を表示 var text = zip.files["OEBPS/Text/Section0001.xhtml"].data; // 特定のファイル内容を表示 document.getElementById("result").innerHTML = Utf8.decode(text); } 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>
