JavaScriptでZIP展開とUTF-8変換
JavaScriptでEPUBデータを扱うために、ZIPファイルを展開するライブラリーと、バイナリーデータをUTF-8に変換する2つのライブラリーを利用します。JavaScriptでZIPファイルを展開するライブラリーは以下のページからダウンロードします。ファイルを展開すると「sjis.js」と「zip.js」の2つのファイルが作成されるので、jsフォルダなどにまとめて入れておきます。
- ・JavaScriptでZIP解凍する
- http://hinata.in/blog/20101003214439.html
- ・ダウンロードページ
- http://lab.gkbr.me/zipjs/
バイナリーデータをUTF-8の文字コードのテキストとして変換する「UTF-8.js」も以下のサイトからダウンロードして、「utf8.js」という名前でjsフォルダに入れておきます。
- ・Javascript UTF-8
- http://www.webtoolkit.info/javascript-utf8.html
続いて、サンプルとして使うEPUB形式のデータを用意します。今回は「今すぐ始める電子書籍制作入門」で作成したEPUBデータを使用します。
準備ができたらFile APIを使ってEPUBデータを表示していきます。まず、以下のようにファイル選択と表示ボタンの入力フォームを用意します。選択できるファイルは1つに限定したいので、<input type="file">にmultiple属性は指定しません。ボタンにはそれぞれにID名を割り当てておきます。
<form action="./test.cgi" method="get"> <input type="file" id="myFile" /> <input type="button" id="viewEPUB" value="EPUB表示" /> </form>
次に、EPUBデータを表示するための場所(コンテナ)を以下のようにdiv要素で用意します。
<div id="result"></div>
以上で準備ができました。