MonacaでePubリーダーアプリを作ってみる

日本でも電子書籍アプリがたくさん増えてきました。小説などはもちろん、マンガコンテンツを提供するものもたくさんあります。その中には明らかにハイブリッドアプリとして作られているものも数多くあります。機能はあまり多くなく、画像を表示するだけのものが多いのでハイブリッドアプリでもさくさくと動くことでしょう。

今回はそんな電子書籍アプリをMonacaで作ってみたいと思います。デザイン上の改善点などは多いですが、基本的な動きは可能です。

利用するライブラリ

今回はJavaScriptのePubリーダー、epub.jsを使います。JavaScriptなので、プラグインを使わずに動かせるようになっています。

ライブラリの設置

必要なのは次のファイルです。ライブラリはwww/jsフォルダ以下に配置します。

zip.jsはその名の通り、Zip圧縮されたファイルを読むためのライブラリです。ePubファイルはコンテンツをZip圧縮したものなので、zip.jsを使って読み取ります。

ePubファイル

今回は白鯨のePubファイルを利用します。これは www/epubs フォルダ以下に配置します。

スタイルシート

デザインは自由ですが、今回はごく基本的なbasic.cssを使っています。これは www/css フォルダ以下に配置します。

HTML

HTMLはまずepub.jsとzip.js、basic.cssを読み込みます。

<link rel="stylesheet" href="css/basic.css">
<script src="js/zip.min.js"></script>
<script src="js/epub.min.js"></script>

Android 6.0.1にてエラーが発生するため、セキュリティポリシーを変更します。

<meta http-equiv="Content-Security-Policy" content="default-src * data:; script-src * 'unsafe-inline' 'unsafe-eval'; img-src * blob:; font-src * blob:; style-src * blob: 'unsafe-inline'">

さらに追加のスタイルシートを指定します。

<style type="text/css">
  body {
    overflow: auto;
    background: #eee;
  }
  #wrapper {
    width: 320px;
    height: 500px;
    overflow: hidden;
    border: 1px solid #ccc;
    margin: 20px auto;
    padding: 10px 10px;
    background: #fff;
    border-radius: 0 5px 5px 0;
    -moz-box-shadow:      inset 10px 0 20px rgba(0,0,0,.1);
    -webkit-box-shadow:   inset 10px 0 20px rgba(0,0,0,.1);
    box-shadow:           inset 10px 0 20px rgba(0,0,0,.1);
  }
  #area {
    width: 270px;
    height: 400px;
    margin: 0 auto;
  }
</style>

bodyタグ内の内容はとてもシンプルです。

<div id="main">
  <div id="prev" onclick="Book.prevPage();" class="arrow">‹</div>
  <div id="wrapper">
    <div id="area"></div>
  </div>
  <div id="next" onclick="Book.nextPage();" class="arrow">›</div>
</div>

Book.prevPage(); および Book.nextPage(); はそれぞれ電子書籍の戻る、進むに相当します。

最後にePubファイルを読み込んで、 #area へ電子書籍の内容を表示します。

<script>
    "use strict";
    var Book = ePub("epubs/moby-dick.epub", {
      width: 280,
      height: 600
    });
    Book.renderTo("area");
</script>

これでePubファイルの表示ができます。実機で確認してみましょう（プレビューでも確認できます）。