自力でいちからEPUB形式の電子書籍を作ってみる！ HTML/CSSの知識があれば十分!?

『人文×社会』の中の人

どうも、『人文×社会』の中の人です。

今回は、「電子書籍・超入門」シリーズ第4回ということで、実際にEPUB形式の電子書籍を作ってみたいと思います。

EPUBファイルは通常、専用のエディターを使って作成しますが、今回はEPUBの仕組みをご紹介するため、あえて自力でいちから作ってみます！

はじめに

今回作成するのは、扉と本文だけの簡単な電子書籍です。サンプル文は前回と同じく、室生犀星『或る少女の死まで』の冒頭部分を使います。

作成にあたっては、日本電子書籍出版社協会が公開している「電書協 EPUB 3 制作ガイド」に準拠して進めていきたいと思います。

電書協 EPUB 3 制作ガイド
http://ebpaj.jp/counsel/guide

ここでダウンロードできるzipファイル「電書協 EPUB 3 制作ガイド ver.1.1.3 2015年1月1日版」の中に入っている「20150101-ebpaj-guide-v113.pdf」が、その制作ガイドです。

このガイドの26ページ以下に、テンプレートのコードが記載されています。親切なことに、ファイルごとに変えるべき箇所と変えてはいけない箇所が色分けして示されていますので、これを横に置いておくと便利です。

EPUBの最小限の構造

まず、EPUBの最小限の構造を押さえておきましょう。

EPUBはzip圧縮して作成しますが、もとの状態は以下のような階層をもったフォルダにしておきます。

「item」フォルダ内以外は、すべてのEPUBファイルで共通なので、テンプレートをそのまま使います。「mimetype」は拡張子をつけないことに注意しましょう。

「item」フォルダ内のファイルのうち、「standard.opf」はxhtmlファイルやcssファイルを束ねる設定ファイルです。ここでページの順番や文字方向などを設定します。

「navigation-documents.xhtml」は、電子書籍ビューアの目次として表示されるものです。それぞれのxhtmlファイルへのリンクを貼ります。

「p-title.xhtml」が扉のページの内容、「p-01.xhtml」が本文の内容を記したxhtmlファイルです。

「style.css」はxhtmlファイルに適用する文字サイズなどのスタイルを記述するスタイルシートのファイルです。

設定用のファイルをそろえよう

では、さっそく設定用のファイルからそろえていきましょう。

① mimetype

これはすべてのEPUBファイルで共通です。以下の1行だけが書いてあればOKです。

application/epub+zip

② container.xml

これもすべてのEPUBファイルで共通です。以下のコードをコピペしておきましょう。

<?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>

③ 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>
<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">ムロオサイセイ</meta>
<meta refines="#creator01" property="display-seq">1</meta>

<dc:publisher id="publisher">森のたぬき出版</dc:publisher>
<meta refines="#publisher" property="file-as">モリノタヌキシュッパン</meta>

<dc:language>ja</dc:language>

<dc:identifier id="unique-id">urn:uuid:aafd4259-720c-4bb9-b59a-d9f6448dc86d</dc:identifier>

<meta property="dcterms:modified">2022-01-15T12:00:00Z</meta>

<meta property="ebpaj:guide-version">1.1.3</meta>

</metadata>

<manifest>
<item media-type="application/xhtml+xml" id="toc" href="navigation-documents.xhtml" properties="nav"/>
<item media-type="text/css" id="style-standard" href="style/style.css"/>
<item media-type="application/xhtml+xml" id="p-title" href="xhtml/p-title.xhtml"/>
<item media-type="application/xhtml+xml" id="p-01" href="xhtml/p-01.xhtml"/>
</manifest>

<spine page-progression-direction="ltr">
<itemref linear="yes" idref="p-title" properties="page-spread-left"/>
<itemref linear="yes" idref="p-01" properties="page-spread-left"/>
</spine>
</package>

④ 目次のファイル（navigation-documents.xhtml）

電子書籍ビューアの目次に表示される部分のxhtmlファイルです。扉・本文ページへのリンクを貼ります。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html
   xmlns="http://www.w3.org/1999/xhtml"
   xmlns:epub="http://www.idpf.org/2007/ops"
   xml:lang="ja"
>
<head>
<meta charset="UTF-8"/>
<title>目次</title>
</head>
<body>
<nav epub:type="toc" id="toc">
<h1>目次</h1>
<ol>
<li><a href="xhtml/p-title.xhtml">扉</a></li>
<li><a href="xhtml/p-01.xhtml">本文</a></li>
</ol>
</nav>
</body>
</html>

扉・本文ファイルを書こう

次に、電子書籍の扉・本文の内容を記したxhtmlファイルを書いていきます。

① 扉のファイル（p-title.xhtml）

今回は、タイトルと著者名を書いただけの簡単なファイルにしてみます。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:epub="http://www.idpf.org/2007/ops"
xml:lang="ja"
>
<head>
<meta charset="UTF-8"/>
<title>或る少女の死まで</title>
<link rel="stylesheet" type="text/css" href="../style/style.css"/>
</head>

<body>
    <div class="title">或る少女の死まで</div>
    <div class="author">室生犀星</div>
</body>
</html>

② 本文のファイル（p-01.xhtml）

本文のファイルはこんな感じです。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:epub="http://www.idpf.org/2007/ops"
xml:lang="ja"
>
<head>
<meta charset="UTF-8"/>
<title>或る少女の死まで</title>
<link rel="stylesheet" type="text/css" href="../style/style.css"/>
</head>

<body>
<h1>或る少女の死まで</h1>

<p>　遠いところで私を呼ぶ声がするので、ふと眼をさますと、枕もとに宿のおかみが立っていた。それを見ながら私はまたうとうとと深い睡りに落ちかかった。</p>
<p>「是非会わなければならないと言って、そとで誰方か待っていらっしゃいます。おやすみになっていらっしゃいますと言っても、是非会わなければならないって――。」</p>
<p>　私はゆめうつつに聴いていたが、もしやと思ってはっとした。すると、ふしぎに頭がいちどに冷たくなった。</p>
<p>「どんな人です。」</p>
<p>「眼の鋭い、いやな人です。とにかくおあいになったらどう。いらっしゃいますと私はそう申しておいたのですから。」</p>
<p>「じゃ階下へいま行きます。」</p>
<p>　私は着物をきかえると、袂のところに泥がくっついたのが何時の間にか乾いたのであろう、ざらざらとこぼれた。</p>
<p>　階下へ降りると、玄関の格子戸のそとに、日に焼けた髯の長い男が立っていた。見ると同時に、額からだらだらと流れた血を思い出した。ふらふらして宿へかえったとき、宿の時計が午前二時を指していたことと、宿のものが皆寝込んでひっそりしていたことを思い出した。</p>
<p>「あなたですか。××さんと言われるのは。」</p>
<p>　いきなり田舎訛りのある言葉で言った。</p>
<p>「そうです。御用は。」</p>
<p>「私はこんなものです。」と一枚の名刺を出した。駒込署刑事何某とあった。</p>
<p>「すぐ同行してもらいたいのです。昨夜は遅くおかえりでしたろうな。」</p>
<p>　私はすぐに、</p>
<p>「二時にかえったのです。みな分っています。いま着換えしますから。」と言った。</p>
<p>　私は二階へあがると、泥のつかない着物を押入から取り出して着た。そして室の中を丁寧に見廻した。ガマ口の金を半分だけ机の曳出しに入れたが、こんどは辞書の中へ挿み込んだ。何故かこんなことをしなければならないような気がした。くしゃくしゃになった敷島の殻を反古籠に投げ込んで、ぬぎすてた着物も畳んだ。室が乱れていないのを見て、ほっと安心した。</p>
<p>　階下へ下りる、すぐ男とつれ立って街路へ出た。男は私とならんで歩いていたが、私はその顔を「見ないように」して歩いた。もう朝日が昇りはじめていた。商家の小僧らが表に水をまいたり、女中らが拭き掃除をしたりしていた。</p>
<p>　駒込林町の裏町のまがりくねった道を、私どもは黙って歩いた。男の紺の褪めた袖がちらちらと見えた。かれは私の右に添ってあるいていたからだ。この樹木の多い緑深い静かな町のとある垣根を越えた幾本かの日向葵の花が、しずかに朝日をあびながらゆらりと揺れているのが、特に山の手の朝らしく目に触れた。表の通りを白いむっちりした二の腕を露わして掃いている、若い細君らしいのが、凝然と私どものあとを見送ったりしていた。総てが静かに穏かな、晴れ亘った夏の朝の心に充ちていた。</p>
<p>　私は深酒したのと酷い疲れとで、あたまがふらふらしていたが、それとは反対に心はハッキリと昨夜の出来事の逐一を辿っていた。まるで蜘蛛が糸を操るように、素早く、その光景を描いていた。</p>

</body>
</html>

CSSファイルを書こう

スタイルを指定するCSSファイルも書いてみます。フォントのサイズや種類、センタリング、行間など、必要最小限の分だけ書きました。

style.css

.title {
    font-size: 2em;
    font-family: serif;
    text-align: center;
    padding-top: 2em;
}

.author {
    font-size: 1.5em;
    font-family: serif;
    text-align: center;
    padding-top: 1em;
}

h1 {
    font-size: 1.5em;
    font-family: serif;
    padding: 1em 0em 2em 2em;
}

p {
    font-size: 1em;
    font-family: serif;
    margin: 0.5em;
}

zip圧縮してEPUBファイルに変換

ファイルがそろったら、zip圧縮してEPUBファイルに変換します。

ただし、zip圧縮の仕方が特殊です。mimetypeのファイルだけ無圧縮で、zipファイルに入れなければいけません。

これは通常の操作ではできないので、Linuxコマンドで操作するか、zip圧縮用のソフトを使うかしなければいけません。

これについては、別の記事で詳しくご紹介することにしたいと思います。

今回はLinuxコマンドでzip圧縮して、「ebook.epub」というファイルを作成してみました。

電子書籍ビューアで見てみると…

さて、さっそく作成したEPUBファイルを開いてみたいと思います。

ファイルを開くとこんな感じで表示されます。

おーっ、ちゃんと電子書籍になっています。

ただ、扉のページのフォントサイズだけがなぜか反映されていません…。なんでだろう…。

ちなみに、別のEPUBリーダーBiB/iで開くと、こうなります。

BiB/iだと正常に表示されています。

さらに、mobiファイルに変換して、Kindleで開くとこんな感じです。（mobiファイルへの変換方法も、別の記事でご紹介します！）

Kindleでも正常に表示されています。もしかしたらビューアとの相性の問題なのかもしれません。

今後調べてみて何か判明したら、ご紹介しようと思います。

結び

以上、EPUBをいちから自作する方法をご紹介してみました。

やってみると意外と簡単にEPUBが作れてしまうので、ご興味のある方はぜひ試してみてください。

この記事が気に入ったらサポートをしてみませんか？