このページの本文へ

JavaScriptでEPUBビューアーを自作してみた (2/7)

2010年11月15日 10時00分更新

文●古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

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フォルダに入れておきます。

 続いて、サンプルとして使うEPUB形式のデータを用意します。今回は「今すぐ始める電子書籍制作入門」で作成したEPUBデータを使用します。

fig01.png

サンプルで使用するEPUBデータ。Calibreで表示したところ

 準備ができたら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>

 以上で準備ができました。

この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています