|
|---|
iPadのiBooksやSONY Reader、Nookなど、多くの電子書籍リーダーがサポートしているEPUB形式はXHTML+CSSがベースになっているので、誰でも自由にビューアーを作成できます。今回のJavaScriptラボは、Webブラウザー上でEPUBデータを表示するオリジナルのビューアーアプリを作ってみましょう。
ビューアーといっても、EPUB形式をきちんと解析して処理するには手間がかかりますので、今回はEPUBに含まれるXHTMLを表示するだけのシンプルなアプリです。それでも、著作権保護機能がかかっている場合を除けばほとんどのEPUBデータを表示できます。
今回のサンプルはHTML5 File APIを使っているので、Firefox 3.6以降でのみ動作します（一部をのぞく）。また、FirefoxのデバッガーであるFirebugを利用しますので、事前にインストールしておいてください。
EPUBとは？
EPUB形式はXHTML/CSS、画像などのファイルをまとめてZIP圧縮した電子書籍フォーマットです。拡張子の.epubを.zipに変更して展開するとEPUBデータの中身を確認できます。EPUBデータにはXTHML、CSSなどの電子書籍を構成する要素と、ページの順番などを記した「content.opf」ファイルが入っています。今回作成するEPUBビューアーではOEBPSフォルダ内にあるcontent.opfファイルを解析してXHTMLファイルの内容をブラウザー上に表示します。
content.opfがOEBPSフォルダ内に存在しない場合や、SVGで記述されているEPUBデータには対応はしません(*1)。また、CSSは無視して表示します。電子書籍やEPUBにについて以下のページも参考にしてください。
- ・今すぐ始める電子書籍制作入門
- http://ascii.jp/elem/000/000/545/545935/
- ・IDPF (EPUB形式)
- http://www.idpf.org/
*1 ほかにも、EPUBデータ内に.DS_StoreなどのMac OS X固有のファイルがあると今回のサンプルは正しく動作しない場合があります。
注意：今回のEPUBビューアーはJavaScriptで処理しているため巨大なEPUBファイルを展開するとスクリプト停止のダイアログが表示されてしまいます。高速なJavaScriptエンジンを搭載しているブラウザを使うのがベストです。プログラムを改良するのであればWeb Workersを使って並列処理させるのもよいでしょう。なお、Web Workersについては以下の記事を参考にしてください。
●JavaScriptで並列処理ができる「Web Workers」
http://ascii.jp/elem/000/000/560/560326/
「まとめてじっくり読みたい！」という読者のみなさまの声にお応えし、この連載が本になりました。書籍化にあたって加筆修正し、記事公開後の最新情報やコラムも盛り込んでいます。
HTML5+JavaScript アイデア&実践サンプル
本体 2,800＋税、B5変形判312ページ（オール4色刷）
ISBN：978-4-04-870448-9
