EPUB形式の電子書籍を一からゴリゴリ作成する方法

ファイル構成

基本的にこのようなディレクトリ構成となるようにファイルを用意していきます．

└── EPUB
    ├── META-INF
    │   ├── com.apple.ibooks.display-options.xml # 任意
    │   └── container.xml # 必須
    ├── OEBPS
    │   ├── audio # 任意
    │   │   └── sample01.mp3
    │   ├── img # 任意
    │   │   └── sample.png
    │   ├── js # 任意
    │   │   ├── sample01.js
    │   │   ├── sample02.js
    │   │   └── sample03.js
    │   ├── navigation-document.xhtml # 必須
    │   ├── standard.opf # 必須
    │   ├── style # 任意
    │   │   ├── chapter.css
    │   │   └── toc.css
    │   └── xhtml # 必須
    │       ├── chapter-01.xhtml
    │       └── toc.xhtml
    └── mimetype # 必須

ファイルの準備

ディレクトリ META-INF

container.xml

rootfileのパスと名称は実際のものに合わせてください．

container.xml

<?xml version="1.0"?>
<container version="1.0" xmlns="urn:oasis:names:tc:opendocument:xmlns:container">
    <rootfiles>
        <rootfile full-path="OEBPS/standard.opf" media-type="application/oebps-package+xml" />
    </rootfiles>
</container>

com.apple.ibooks.display-options.xml

iBooks向けのフォント指定用ファイルの一例です．iBooksでの利用予定がある場合は追加します．
iBooks 3.0のちょっとびっくりな挙動。

com.apple.ibooks.display-options.xml

<?xml version="1.0" encoding="UTF-8"?>

<display_options>
    <platform name="*">
        <option name="specified-fonts">true</option>
    </platform>
</display_options>

ディレクトリ OEBPS

standard.opf

EPUBの大元のファイルです．
ここで電子書籍としてのデータ設定を行い，電子書籍に取り込みたい要素を規定します．

まず，UUID (Universally Unique IDentifier) が必要です．
uuidgenコマンドで生成します．

$ uuidgen

生成したUUIDをstandard.opfのidentifier id="unique-id"のuuidに設定します．

次に，<manifest>内で使用するリソースの宣言をします．
HTMLファイルだけでなく，CSS, javascript，音声ファイルや画像など使用するリソースは 全て ここで記述します ．
ファイル追加した際に忘れやすいところなので気をつけます．

<spine>では電子書籍内でのHTMLの順序を設定します．

standard.opf

<?xml version="1.0" encoding="UTF-8"?>
<package
    xmlns="http://www.idpf.org/2007/opf"
    version="3.0"
    xml:lang="ja"
    unique-identifier="unique-id"
    prefix="ebpaj: http://www.ebpaj.jp/"
>

    <metadata xmlns:dc="http://purl.org/dc/elements/1.1/">

        <dc:title id="title">タイトル</dc:title>
        <dc:creator id="creator01" xml:lang="ja">著者</dc:creator>
        <dc:publisher id="publisher" xml:lang="ja">出版社</dc:publisher>
        <dc:language>ja</dc:language>
        <dc:identifier id="unique-id">urn:uuid:XXXXXXXXXXXXXXXXXXXXX</dc:identifier>

        <!-- accessibility metadata -->
        <meta property="schema:accessMode">textual</meta>
        <meta property="schema:accessMode">visual</meta>
        <meta property="schema:accessibilityFeature">alternativeText</meta>
        <meta property="schema:accessibilityHazard">none</meta>
        <meta property="schema:accessModeSufficient">textual,visual</meta>
        <meta property="schema:accessModeSufficient">textual</meta>

    </metadata>

    <manifest>

        <!-- navigation -->
        <item media-type="application/xhtml+xml" id="toc" href="navigation-document.xhtml"
            properties="nav" />

        <!-- style -->
        <item media-type="text/css" id="chapter-style" href="style/chapter.css" />
        <item media-type="text/css" id="toc-style" href="style/toc.css" />

        <!-- image -->
        <item media-type="image/png" href="img/1.png" id="fig01" />
    
        <!-- audio -->
        <item media-type="audio/mpeg" href="audio/sample01.mp3" id="ad01" />
        <item media-type="audio/mpeg" href="audio/sample02.mp3" id="ad02" />
        <item media-type="audio/mpeg" href="audio/sample03.mp3" id="ad03" />

        <!-- xhtml -->
        <item media-type="application/xhtml+xml" id="table-of-content" href="xhtml/toc.xhtml" />
        <item media-type="application/xhtml+xml" id="chapter-01" href="xhtml/chapter-01.xhtml" />

        <!-- javascript -->
        <item media-type="text/javascript" id="js1" href="js/sample01.js" />
        <item media-type="text/javascript" id="js2" href="js/sample02.js" />
        <item media-type="text/javascript" id="js3" href="js/sample03.js" />

    </manifest>

    <spine page-progression-direction="ltr">
        <itemref linear="yes" idref="table-of-content" />
        <itemref linear="yes" idref="chapter-01" />
    </spine>

</package>

navigation-document.xhtml

目次を記述するファイルです．

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>

<html xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">

<head>
  <meta charset="UTF-8" />
  <title>目次</title>
</head>

<body>
  <nav epub:type="toc" id="toc">

    <h1>目次</h1>
    <ol>
      <li><a href="./xhtml/toc.xhtml">目次</a></li>
      <li><a href="./xhtml/chapter-01.xhtml">章タイトル</a></li>
    </ol>
  </nav>
</body>
</html>

XHTML

本文の一例です．CSSやjavascriptを使用する場合は<head>内で記述します．

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>

<html xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">

<head>
  <meta charset="UTF-8" />
  <title>章タイトル</title>

  <link rel="stylesheet" type="text/css" href="../style/chapter.css" />
  <script type="text/javascript" src="../js/sample01.js"></script>
  <script type="text/javascript" src="../js/sample02.js"></script>

</head>

<body>

  本文です．

</body>
</html>

mimetype

中身はこの1行だけです．

mimetype

application/epub+zip

zip化

EPUBディレクトリ直下で実行することを想定しています．

1. mimetype のみ無圧縮

zip -0 -X ../test.epub mimetype

2. mimetype や不要ファイルを除いて圧縮

zip -r ../test.epub * -x mimetype -x "*.DS_Store"

最後

電子書籍ビューアで開いてみましょう．
そもそも開けない場合は，ファイルの記述の見直しが必要な場合があります．EpubCheckやAceやその他オンラインの検証ツールを活用します．

また，EPUBにしてみると思った通りの表示となっていないことも多いです．XHTMLを書きながらブラウザで表示を確認しつつ，こまめにEPUBに書き出して電子書籍ビューアで動作を確認するのが良いと思います．

EPUBアクセシビリティ検証ツール「Ace」を試す

参考文献

自力でいちからEPUB形式の電子書籍を作ってみる！ HTML/CSSの知識があれば十分!?
アクセシブルな電子書籍 (リフロー型 EPUB) の作りかた
本好きに送る「電子書籍のつくり方」講座
Epub に新規画像ページを差し込む。