EPUBフォーマット構造の理解

# 初めに
電子書籍が近年、短な存在になってきました。
今回は電子書籍を構成しているEPUBフォーマットを勉強しました。

# EPUBとは
> W3Cが仕様策定を行なっている国際的な電子書籍のフォーマットです。元々はEPUB推進団体IDPFで仕様の策定が行われていましたが、2017年2月1日に[W3C](https://d.hatena.ne.jp/keyword/W3C) と正式統合されました。

# EPUBフォーマットの構造
EPUBフォーマットは、以下のようなディレクトリで構成されたフォルダをZIPアーカイブしたファイルです。
※EPUBバージョン3.0を参照しております。
今回は、[KINDIGI_REFLOW_TEMPLATE](https://epub.works/static/kindigi_reflow_template.zip)を参考にします。
![スクリーンショット 2023-06-08 9.58.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2727168/2064f09f-f809-41f0-100d-6c668eafd09d.png)

このフォルダは「ファイルの配置位置、名称まで仕様で固定されたもの」と、「任意でファイル名、配置位置を変更できるもの」との２つに分かれます。

- ファイルの配置位置、名称まで仕様で固定されたもの
    - mimetype
    -  META-INF/container.xml
- 任意でファイル名、配置位置を変更できるもの
    - 上記以外のファイル


## mimetype

```php:mimetype
application/epub+zip
```

## container.xml

```php:META-INF/container.xml
<?xml version="1.0"?>
<container version="1.0" xmlns="urn:oasis:names:tc:opendocument:xmlns:container">
    <rootfiles>
        <rootfile full-path="item/standard.opf" media-type="application/oebps-package+xml"/>
   </rootfiles>
</container>
```
 <rootfile full-path="item/standard.opf"
上記のコードから、今回のEPUBフォーマットのうち、電子書籍に関する情報を取得していることがわかります。
ここまでがどのEPUBフォーマットでも同じ構造部分です。
続いて、「item/standard.opf」を見てみましょう！

## standard.opf
```php: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="jpecode" prefix="ebpaj: http://www.ebpaj.jp/">
  <metadata xmlns:dc="http://purl.org/dc/elements/1.1/">

    <!-- 作品名 -->
    <dc:title id="title">作品名</dc:title>
    <meta refines="#title" property="file-as">サクヒンメイカナ</meta>

    <!-- 著者名 -->
    <dc:creator id="creator01">著作者名１</dc:creator>
    <meta refines="#creator01" property="role" scheme="marc:relators">aut</meta>
    <meta refines="#creator01" property="file-as">チョサクシャメイカナ1</meta>
    <meta refines="#creator01" property="display-seq">1</meta>

    <dc:creator id="creator02">著作者名２</dc:creator>
    <meta refines="#creator02" property="role" scheme="marc:relators">aut</meta>
    <meta refines="#creator02" property="file-as">チョサクシャメイカナ2</meta>
    <meta refines="#creator02" property="display-seq">2</meta>

    <!-- 出版社名 -->
    <dc:publisher id="publisher">出版社名</dc:publisher>
    <meta refines="#publisher" property="file-as">シュッパンシャメイカナ</meta>

    <!-- 言語 -->
    <dc:language>ja</dc:language>

    <!-- ファイルid：JP-eコードを記入 -->
    <dc:identifier id="jpecode">00000000000000000000</dc:identifier>

    <!-- 更新日 -->
    <meta property="dcterms:modified">2013-01-07T00:00:00Z</meta>

    <!-- etc. -->
    <meta property="ebpaj:guide-version">1.1.2</meta>

  </metadata>

  <manifest>

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

    <!-- style -->
    <item media-type="text/css" id="book-style" href="style/book-style.css" />
    <item media-type="text/css" id="style-reset" href="style/style-reset.css" />
    <item media-type="text/css" id="style-standard" href="style/style-standard.css" />
    <item media-type="text/css" id="style-advance" href="style/style-advance.css" />
    <item media-type="text/css" id="style-check" href="style/style-check.css" />

    <!-- image -->
    <item media-type="image/jpeg" id="cover" href="image/cover.jpg" properties="cover-image" />
    <item media-type="image/jpeg" id="img-001" href="image/img-001.jpg" />
    <item media-type="image/jpeg" id="img-002" href="image/img-002.jpg" />
    <item media-type="image/jpeg" id="credit" href="image/original_credit.jpg" />
    <item media-type="image/png" id="cid08705" href="image/cid-08705.png" />
    <item media-type="image/png" id="cid13706" href="image/cid-13706.png" />

    <!-- xhtml -->
    <item media-type="application/xhtml+xml" id="p-cover" href="xhtml/p-cover.xhtml" />
    <item media-type="application/xhtml+xml" id="p-titlepage" href="xhtml/p-titlepage.xhtml" />
    <item media-type="application/xhtml+xml" id="p-caution" href="xhtml/p-caution.xhtml" />
    <item media-type="application/xhtml+xml" id="p-toc" href="xhtml/p-toc.xhtml" />
    <item media-type="application/xhtml+xml" id="p-001" href="xhtml/p-001.xhtml" />
    <item media-type="application/xhtml+xml" id="p-002" href="xhtml/p-002.xhtml" />
    <item media-type="application/xhtml+xml" id="p-003" href="xhtml/p-003.xhtml" />
    <item media-type="application/xhtml+xml" id="p-004" href="xhtml/p-004.xhtml" />
    <item media-type="application/xhtml+xml" id="p-005" href="xhtml/p-005.xhtml" />
    <item media-type="application/xhtml+xml" id="p-006" href="xhtml/p-006.xhtml" />
    <item media-type="application/xhtml+xml" id="p-credit" href="xhtml/p-credit.xhtml" />

  </manifest>

  <spine page-progression-direction="rtl">

    <itemref linear="yes" idref="p-cover" properties="page-spread-left" />
    <itemref linear="yes" idref="p-titlepage" properties="page-spread-left" />
    <itemref linear="yes" idref="p-caution" properties="page-spread-left" />
    <itemref linear="yes" idref="p-toc" properties="page-spread-left" />
    <itemref linear="yes" idref="p-001" properties="page-spread-left" />
    <itemref linear="yes" idref="p-002" properties="page-spread-left" />
    <itemref linear="yes" idref="p-003" properties="page-spread-left" />
    <itemref linear="yes" idref="p-004" properties="page-spread-left" />
    <itemref linear="yes" idref="p-005" properties="page-spread-left" />
    <itemref linear="yes" idref="p-006" properties="page-spread-left" />
    <itemref linear="yes" idref="p-credit" properties="page-spread-left" />

  </spine>

</package>

```

### package 要素
この要素より内側にある内容がどのような内容であるかを示します。
EPUB のバージョンはここで指定することができます。
opf 名前空間(ファイル形式)を定義する URL と、その書籍を識別する ID を指定します。

```php
<?xml version="1.0" encoding="UTF-8"?>
<package xmlns="http://www.idpf.org/2007/opf" version="3.0" xml:lang="ja" unique-identifier="jpecode" prefix="ebpaj: http://www.ebpaj.jp/">
  <metadata xmlns:dc="http://purl.org/dc/elements/1.1/">
```

### metadata 要素
この要素より内側にある内容が書誌情報（どのような書籍であるか）を示します。

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

    <!-- 作品名 -->
    <dc:title id="title">作品名</dc:title>
    <meta refines="#title" property="file-as">サクヒンメイカナ</meta>

    <!-- 著者名 -->
    <dc:creator id="creator01">著作者名１</dc:creator>
    <meta refines="#creator01" property="role" scheme="marc:relators">aut</meta>
    <meta refines="#creator01" property="file-as">チョサクシャメイカナ1</meta>
    <meta refines="#creator01" property="display-seq">1</meta>

    <dc:creator id="creator02">著作者名２</dc:creator>
    <meta refines="#creator02" property="role" scheme="marc:relators">aut</meta>
    <meta refines="#creator02" property="file-as">チョサクシャメイカナ2</meta>
    <meta refines="#creator02" property="display-seq">2</meta>

    <!-- 出版社名 -->
    <dc:publisher id="publisher">出版社名</dc:publisher>
    <meta refines="#publisher" property="file-as">シュッパンシャメイカナ</meta>

    <!-- 言語 -->
    <dc:language>ja</dc:language>

    <!-- ファイルid：JP-eコードを記入 -->
    <dc:identifier id="jpecode">00000000000000000000</dc:identifier>

    <!-- 更新日 -->
    <meta property="dcterms:modified">2013-01-07T00:00:00Z</meta>

    <!-- etc. -->
    <meta property="ebpaj:guide-version">1.1.2</meta>

  </metadata>
```

### manifest 要素
manifest はその EPUB 書籍を構成するファイルを示すための要素です。
href プロパティにファイルへのパスを指定して、そのファイルを参照するための唯一の値を id に指定します。指定した id によって、そのファイルを参照することができるようになります。

```php
  <manifest>

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

    <!-- style -->
    <item media-type="text/css" id="book-style" href="style/book-style.css" />
    <item media-type="text/css" id="style-reset" href="style/style-reset.css" />
    <item media-type="text/css" id="style-standard" href="style/style-standard.css" />
    <item media-type="text/css" id="style-advance" href="style/style-advance.css" />
    <item media-type="text/css" id="style-check" href="style/style-check.css" />

    <!-- image -->
    <item media-type="image/jpeg" id="cover" href="image/cover.jpg" properties="cover-image" />
    <item media-type="image/jpeg" id="img-001" href="image/img-001.jpg" />
    <item media-type="image/jpeg" id="img-002" href="image/img-002.jpg" />
    <item media-type="image/jpeg" id="credit" href="image/original_credit.jpg" />
    <item media-type="image/png" id="cid08705" href="image/cid-08705.png" />
    <item media-type="image/png" id="cid13706" href="image/cid-13706.png" />

    <!-- xhtml -->
    <item media-type="application/xhtml+xml" id="p-cover" href="xhtml/p-cover.xhtml" />
    <item media-type="application/xhtml+xml" id="p-titlepage" href="xhtml/p-titlepage.xhtml" />
    <item media-type="application/xhtml+xml" id="p-caution" href="xhtml/p-caution.xhtml" />
    <item media-type="application/xhtml+xml" id="p-toc" href="xhtml/p-toc.xhtml" />
    <item media-type="application/xhtml+xml" id="p-001" href="xhtml/p-001.xhtml" />
    <item media-type="application/xhtml+xml" id="p-002" href="xhtml/p-002.xhtml" />
    <item media-type="application/xhtml+xml" id="p-003" href="xhtml/p-003.xhtml" />
    <item media-type="application/xhtml+xml" id="p-004" href="xhtml/p-004.xhtml" />
    <item media-type="application/xhtml+xml" id="p-005" href="xhtml/p-005.xhtml" />
    <item media-type="application/xhtml+xml" id="p-006" href="xhtml/p-006.xhtml" />
    <item media-type="application/xhtml+xml" id="p-credit" href="xhtml/p-credit.xhtml" />

  </manifest>
```

### spine 要素
spine はページの内容とその順序を示し、背表紙を意味します。
各ページの内容を示すファイルへの参照を追加していきます。

```php
  <spine page-progression-direction="rtl">

    <itemref linear="yes" idref="p-cover" properties="page-spread-left" />
    <itemref linear="yes" idref="p-titlepage" properties="page-spread-left" />
    <itemref linear="yes" idref="p-caution" properties="page-spread-left" />
    <itemref linear="yes" idref="p-toc" properties="page-spread-left" />
    <itemref linear="yes" idref="p-001" properties="page-spread-left" />
    <itemref linear="yes" idref="p-002" properties="page-spread-left" />
    <itemref linear="yes" idref="p-003" properties="page-spread-left" />
    <itemref linear="yes" idref="p-004" properties="page-spread-left" />
    <itemref linear="yes" idref="p-005" properties="page-spread-left" />
    <itemref linear="yes" idref="p-006" properties="page-spread-left" />
    <itemref linear="yes" idref="p-credit" properties="page-spread-left" />

  </spine>
```
# 最後に
ざっくりとEPUBフォーマットについてまとめてみました。
何か認識に誤りがありましたらご指摘をお願いいたします。
次回は、実際にEPUBフォーマットを手動で作成してみたいと思います！

# 引用
- [EPUBファイルを手で作ってみる。](https://techdo.mediado.jp/entry/2019/04/01/112244)
- [KINDIGI_REFLOW_TEMPLATE](https://epub.works/static/kindigi_reflow_template.zip)
- [OPF ファイル概要](http://neareal.net/index.php?IT%2FEPUB%2FOPF%2FWhole)