自分用同人小説を縦書きEpubファイルにするための作業手順 - 木俣ロバート久の覚書

この記事は、自分の試行錯誤の垂れ流しなので、いつも以上に突っ込み歓迎です

本手順書でEPUBと称しているファイルはEPUB Validator (beta)をEPUB 3.0.1で合格できるものであり、EPUBファイルとして仕様に準拠している保証はありません

自分用同人小説を縦書きEPUBファイルにするための作業手順を書き留めておきます

本手順はあくまで自分 (木俣) 用ですのでご注意ください

ディレクトリィ構造を作る

今回作成するEPUBファイルの用のディレクトリィを用意し (以下、「EPUB ルートディレクトリィ」と呼ぶ) その中に META-INF ディレクトリィと content ディレクトリィを作る

META-INF は固定、content は任意

content ディレクトリィ (以下、「content ディレクトリィ」と呼ぶ) の名称は任意で、更にその配下に任意のディレクトリィ構造を作ることができる

本手順では content とし、すべてのリソースを直下に配置する

ファイル名、ディレクトリィ名などの制約事項は以下を参照

`mimetype` の作成

mimetype を作成し、EPUB ルートディレクトリィに格納する

ファイル名は mimetype 固定であり、内容は application/epub+zip のみの固定で、エンコードは必ずUS-ASCIIエンコードとなる

`container.xml` の作成

container.xml ファイルを作成し、META-INF ディレクトリィに格納する

ファイル名は container.xml 固定であり、変更対象は rootfile 要素の full-path 属性の値のみ

本手順では content/content.opf とする

以下、テンプレート

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

本文のXHTMLの作成

本文となるXHTMLファイルを作成し、content ディレクトリィに格納する

XHTMLファイルは複数、例えば章ごとに別ファイルでも良い

EPUBはファイル名、ファイルパスの大文字小文字を区別するので、このXHTMLファイルのファイル名や、参照するファイルパス (リンクやCSSなど) の記述なども大文字小文字を区別して記述する

過去の実装との互換性の為に、拡張子はすべて小文字にした方が良いらしい

<?xml version='1.0' encoding='utf-8'?>
<!DOCTYPE html>
<html xml:lang="ja" lang="ja" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <title>タイトル</title><!-- 変更対象 -->
    <link rel="stylesheet" type="text/css" href="default.css" /><!-- 変更対象 -->
    <link rel="stylesheet" type="text/css" href="custom.css" /><!-- 変更対象 -->
  </head>
  <body>
    <!-- 変更対象 -->
  </body>
</html>

奥付のXHTMLの作成

奥付となるXHTMLファイルを作成し、content ディレクトリィに格納する

奥付はEPUBとして必須ではないが本手順では作業対象とする

以下、テンプレート

<?xml version='1.0' encoding='utf-8'?>
<!DOCTYPE html>
<html xml:lang="ja" lang="ja" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <title>タイトル - 奥付</title><!-- 変更対象 -->
    <link rel="stylesheet" type="text/css" href="default.css" /><!-- 変更対象 -->
    <link rel="stylesheet" type="text/css" href="custom.css" /><!-- 変更対象 -->
  </head>
  <body>
    <h1>タイトル</h1><!-- 変更対象 -->
    <dl class='version'>
      <dt>初版</dt>
      <dd><time datetime="yyyy-MM-dd">yyyy年MM月dd日</time></dd><!-- 変更対象 -->
      <dt>電子版　初版</dt>
      <dd><time datetime="yyyy-MM-dd">yyyy年MM月dd日</time></dd><!-- 変更対象 -->
    </dl>
    <hr/>
        <dl>
            <dt>著者</dt>
            <dd>著者名</dd><!-- 変更対象 -->
            <dt>発行</dt>
            <dd>サークル名</dd><!-- 変更対象 -->
            <dt>Web site</dt>
            <dd><address><a href='https://example.com'>example.com</a></address></dd>
            <dt>E-mail address</dt>
            <dd><address>john@example.com</address></dd>
        </dl>
        <p></p>
    <hr/>
    <p>他、注意書き等</p><!-- 変更対象 -->
  </body>
</html>

表紙絵となる画像と表紙となるXHTMLの作成

表紙絵となる画像ファイルと表紙となるXHTMLファイルを作成し、content ディレクトリィに格納する

表紙はEPUBとして必須ではないが本手順では作業対象とする

EPUBは画像ファイルとしてSVG、PNG、JPEG、GIFが使える

予め表紙絵の Cover.png を用意した上で表紙として以下の様なXHTMLファイルを作成する

<?xml version='1.0' encoding='utf-8'?>
<!DOCTYPE html>
<html xml:lang="ja" lang="ja" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <title>タイトル</title><!-- 変更対象 -->
  </head>
  <body>
    <div>
    <p><img alt="タイトル - 作者名等" src="cover.png" /></p><!-- 変更対象 -->
<!-- 2018-09-19 一部リーダーが object要素に対応してないようなのでimg要素によるマークアップへ変更
      <object data="Cover.png" type="image/png">
        <h1>タイトル</h1>
        <p>著者名など</p>
      </object>
-->
    </div>
  </body>
</html>

CSSの作成

XHTMLに適用するCSSファイルを作成し、content ディレクトリィに格納する

CSSはEPUBとしては必須ではないが、縦書きの為に必要となる

XHTMLに直接style要素で書き込んでも良いが、本手順では独立したCSSファイルを用意する

以下、自分が使っているテンプレート

html {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  -epub-writing-mode: vertical-rl;
}

body {
  text-orientation: upright;
  line-height: 180%;
}

* {
  font-size: 1.0em;
  text-align: justify;
  font-weight: inherit;
  font-style: inherit;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  margin: 3em 3em 1em 3em;
}

p {
  margin: 0;
  padding: 0;
}

hr {
  visibility : hidden;
  margin:0 1em;
}

補足説明

FirefoxにてXHTMLファイルとして表示した場合 writing-mode: vertical-rl; はbodyでなくhtmlにすると横スクロールバーが右側の状態で始まるのでそのようにした
text-orientation: upright; は内容による
縦中横については考慮していない
p要素に text-indent:1em; を書く場合、役物が先頭に来た場合はclassで制御する
他、q要素などを使い引用符を制御する場合その記述を追加する

目次の作成

目次ファイルとなるXHTMLファイルを作成し、content ディレクトリィに格納する

目次ファイルは nav 要素でマークアップし、nav 要素には名前空間 http://www.idpf.org/2007/ops の type 属性で値 toc を記述する

以下、テンプレート

<?xml version='1.0' encoding='utf-8'?>
<!DOCTYPE html>
<html xml:lang="ja" 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="default.css" /><!-- 変更対象 -->
</head>
<body>
  <nav epub:type="toc"><!-- 以下、nav要素の子要素全般が変更対象 -->
    <h1>タイトル - 目次</h1>
    <ol>
      <li><a href="cover.xhtml">表紙</a></li>
      <li><a href="chapter1.xhtml">第一章</a></li>
      <li><a href="chapter2.xhtml">第二章</a></li>
      <li><a href="chapter3.xhtml">第三章</a></li>
      <li><a href="colophon.xhtml">奥付</a></li>
    </ol>
  </nav>
</body>
</html>

XHTMLの確認

Nu Html CheckerでXHTMLファイルの確認を行う

XML宣言、目次の http://www.idpf.org/2007/ops 名前空間の宣言とその名前空間の type 属性以外でError、warningが出たら直す

`content.opf` の作成

content.opf を作成し、content ディレクトリィに格納する

`metadata` 要素

metadata 要素には書籍情報を記述する

`manifest` 要素

manifest 要素には、content ディレクトリィにあるcontent.opf以外のすべてのファイルを item 要素としてマークアップする

`item` 要素

item 要素には、id 属性、href 属性を記述する

href 属性の値はcontent ディレクトリィ内の相対パスとする

表紙画像には properties 属性で cover-image を記述する

目次には properties 属性で nav を記述する

`spine` 要素

spine 要素には、itemref 要素としてEPUB内で独立して内容となるファイルを昇順で記述する

ここでいう独立して内容となるとは、例えばXHTML内で参照される画像やスタイルシートを含まないことを意味する

本手順で作成するEPUBはページ送りが右から左であるため、spine 要素にpage-progression-direction 属性を記述し値を　rtl とする

`itemref` 要素

itemref 要素には idref 属性を記述する

以下、テンプレート

<?xml version="1.0" encoding="utf-8"?>
<package unique-identifier="BookId" version="3.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns="http://www.idpf.org/2007/opf">
  <metadata>
    <dc:title>タイトル</dc:title><!-- 変更対象 -->
    <dc:creator>作者名</dc:creator><!-- 変更対象 -->
    <dc:language>ja-JP</dc:language>
    <dc:identifier id="BookId">tag:example.com,yyyy-MM-dd:BookId</dc:identifier><!-- 変更対象 -->
    <meta property="dcterms:modified">yyyy-MM-ddThh:mm:ddZ</meta><!-- 変更対象 -->
  </metadata>
  <manifest><!-- 以下、manifest 要素の子要素全般が変更対象 -->
    <item id="cover" href="cover.xhtml" media-type="application/xhtml+xml" />
    <item id="navigation" href="navigation.xhtml" media-type="application/xhtml+xml" properties="nav" />
    <item id="chapter1" href="chapter1.xhtml" media-type="application/xhtml+xml" />
    <item id="chapter2" href="chapter2.xhtml" media-type="application/xhtml+xml" />
    <item id="chapter3" href="chapter3.xhtml" media-type="application/xhtml+xml" />
    <item id="colophon" href="colophon.xhtml" media-type="application/xhtml+xml" />
    <item id="defaultStlye" href="default.css" media-type="text/css" />
    <item id="navigationStyle" href="navigation.css" media-type="text/css" />
    <item id="chapterStyle" href="chapter.css" media-type="text/css" />
    <item id="colophonStlye" href="colophon.css" media-type="text/css" />
    <item id="coverImage" href="cover.png" media-type="image/png" properties="cover-image" />
  </manifest>
  <spine page-progression-direction="rtl"><!-- spine 要素の子要素全般が変更対象 -->
    <itemref idref="cover" />
    <itemref idref="navigation" />
    <itemref idref="chapter1" />
    <itemref idref="chapter2" />
    <itemref idref="chapter3" />
    <itemref idref="colophon" />
  </spine>
</package>

ZIP化する

EPUB ルートディレクトリィをZIP化し、拡張子を .epub とする

互換性の問題でEPUBの拡張子はすべて小文字で .epub とするのが良いらしい

ZIPファイル内には先頭に非圧縮で mimetype ファイルを配置した上でそれ以外のファイルを格納する

本手順ではbashにて実行する

EPUB ルートディレクトリィへ移動する
mimetypeのみを非圧縮でZIP化
zip -0Xq Document.epub mimetype
他のファイルをZIP化
zip -Xr9Dq SampleEpub.epub *

コマンドのオプション

-# (-0 ... -9): 0が非圧縮、9が最大圧縮
-X: no extra
余計なファイル属性を保存しない
-q: quiet
サイレント実行
-r: recurse paths
ディレクトリ構造を再帰的に取得し対象とする
-D: no dir entries
ディレクトリのzipアーカイブにディレクトリィエントリを作成しない

EPUB Validatorで確認する

EPUB Validator (beta) を使って生成したEPUBファイルを確認する

Error、Warningが出たら直す

ディレクトリィ構造を作る

ファイル名、ディレクトリィ名などの制約事項は以下を参照

mimetype の作成

container.xml の作成

本文のXHTMLの作成

奥付のXHTMLの作成

表紙絵となる画像と表紙となるXHTMLの作成

CSSの作成

補足説明

目次の作成

XHTMLの確認

content.opf の作成

metadata 要素

manifest 要素

item 要素

spine 要素

itemref 要素

ZIP化する

コマンドのオプション

EPUB Validatorで確認する

`mimetype` の作成

`container.xml` の作成

`content.opf` の作成

`metadata` 要素

`manifest` 要素

`item` 要素

`spine` 要素

`itemref` 要素