こんにちは。18のTMです。
本を読むとき、最近は電子書籍という選択が増えてきました。
そもそも電子書籍ってどうなってるの？Epubって何？と疑問に思っている人もいると思うので、解説していこうと思います。
まずは電子書籍のメリットとデメリットを軽く書いていこうと思います。

電子書籍のメリット

まず、場所をとらない。
これはとても大きなメリットです。シリーズ物の本を買うだけで場所が一瞬で消えてしまう、なんてことはよくあります。(~~ハリーポッターとかSAO~~)
デジタルデータにしておけば、販売サイトをクラウド代わりに、いつでも読むことができて、非常に便利です。
次に、安い場合が多い。
印刷代がかからないので、その分安いことが多いです。また、楽天koboなどはクーポンや割引イベントがよく来るので、非常に安く買えることが多いです。

電子書籍のデメリット

やはり、買ったという実感がわかないというのが一番ですね・・・。
現物があったほうが、自分は買ったんだっていう気持ちになります。
あとは画面が必ず必要となるので、最低限スマホが必要になります。(~~今の時代持ってない人のほうが少ない~~)
もちろん、文字をずっと見ているので、ある程度ブルーライトカットも考える必要が出てくると思います。
これはクリエイター側の問題ですが、一度書籍として出版するためにAdobe Idなどで作られたファイルを、電子書籍に作り替える必要があるため、コストがかかるという問題もあります。
そして、これが一番怖いのですが、販売サイトが潰れてしまった場合、最悪書籍が読めなくなります！！
もちろん、潰れてしまったとしても返金等の救済措置が取られると思いますが、一度買った本が読めなくなる可能性が高いです。

まあ一長一短って感じですが、それでもメリットがかなり大きいので、私は電子書籍の方が好きですね。

そもそも電子書籍とは何なのか？

さて、本題に入りたいと思います。
EPUB（イーパブ）は、国際電子出版フォーラム（International Digital Publishing Forum、IDPF）が策定した、オープンフォーマットの電子書籍ファイルフォーマット規格である。「EPUB」は"Electronic PUBlication"の意味を持ち「epub」「ePub」などと表記される場合もある。 EPUBはXML、XHTML、CSSおよびZIPに基づいた規格であり、対応するハードウェアやアプリケーションソフトウェアは多く、電子書籍ファイルの標準となっている。(Wikipedia)

書籍を購入して、アプリケーションで読もうとする時、Kindleは.mobiファイル形式、楽天koboは.kepubファイル形式、Reader Storeは.mnhファイル形式でダウンロードされます。
KindleやKoboは.epub形式のファイルを暗号化させた状態のようですが、Reader StoreはSony独自のDRMを使って暗号化しているようなので、どのように作っているかはブラックボックスのようです・・・(~~さすがSony~~)

閑話休題。

epubファイルとは、基本的にZipファイルの事だと思ってもらって問題ありません。ちょっと特殊な加工をするので単純に.zipを.epubに書き換えるだけではエラーが出てしまいますが・・・。(.epub $\to$ .zipは可能)
中身については後程解説しますが、基本的にhtmlの集合体でできています。しかし、ただ単にhtmlだけを渡されても、読むことはできません。それにはページスタイルと言われる.cssファイルも必要だからです(もちろん画像なんかも必要)。これらを纏めて扱いやすくパックしたものが電子書籍形式(.epub)というわけです。一つのファイルにしたほうが管理しやすいですからね。つまり、htmlさえ作り方がわかれば後は簡単にepubが作れちゃうんです！！便利～

中身の解体を始めよう

参考として、「学問のススメ」の.epub解体版を置いておきます(著作権的に問題ないはずなので・・・)

https://drive.google.com/drive/folders/1mD12zbwKsM23d2sk0SdmR-n9gYB9026g?usp=sharing (解凍版)
https://drive.google.com/open?id=1sNJHxMzcc7QGQbcH3v_yPDhFLBMJ5sNk (zip圧縮版)

まず最初に見えるminetype、META-INFフォルダは正直知る必要はあまりありません。青空文庫辺りから適当にコピーするだけでも問題なく動きます。本の一番重要な中身の部分は、全てitemフォルダにあります。
ここから先、itemフォルダーの中身を解説していきます。

styleフォルダ

先ほど言っていた.css、ページスタイルファイルが格納されています。完全に作り方はweb上のcssと同じなので、割愛します。漫画だったり、自炊した画像本をepubにするならあまり必要ではないかも

xhtmlフォルダ

このフォルダの中身はズバリ、.xhtmlファイルが入ってます(それはそう)
詳しく説明すると、テキストデータの本体が入ってます。マンガや自炊した本の場合は、画像の指定を行います(サイズや、ファイルのパスの指定など)。つまり、これ単体をChromeで開けば、電子書籍でどのように見えるのか確認することができます。

p-titlepage.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"
 class="vrtl"> <!--ここまではテンプレートなのでコピーしましょう -->
<head>
<meta charset="UTF-8"/>
<title>cover</title> <!-- こう書いておくとわかりやすい-->
<link rel="stylesheet" type="text/css" href="../style/book-style.css"/> <!-- テキストスタイルを保存しているcssを読み込んでます -->
</head>
<body>
<div>
<p><br /></p>
<p class="covertai1">学問のすすめ</p>
<p class="sabutai1"></p>
<p class="sabutai1"></p>
<p class="sabutai1"></p>
<p class="sabutai2">福沢諭吉</p>
<p class="sabutai2"></p>
</div>
</body>
</html>

残念ながら福沢諭吉先生では画像を使わないので、画像の時の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>sample</title>
<link rel="stylesheet" type="text/css" href="../style/fixed-layout-jp.css"/>
<meta name="viewport" content="width=900, height=1280"/> <!-- 画像の大きさが高さ1280,幅が900であることを示しています -->
<meta charset="UTF-8"/>
</head>
<body>
<div class="main">

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 900 1280"> <!-- 画像の引き伸ばしは100%,画像を普通に表示したいなら"0 0 width height"の順で書けば大丈夫 -->
<image width="900" height="1280" xlink:href="../image/001.jpg"/> <!-- 画像のパスをここで入力します -->
</svg>

</div>
</body>
</html>

xhtmlの中身は完全にhtmlなので、この記事では割愛します。画像状態の本を自炊するなら、イメージの大きさも固定されているので、上のコードをひたすらコピーして画像パスを弄るだけで簡単に作れるはずです。

imageフォルダ

今回の学問のススメにはありませんが、漫画や自炊の本では欠かせないフォルダーです。名前の通り、画像を保存しておくフォルダです。ここに入れて、上記xhtmlでパスを指定することで表示させられます。jpg、pngのどちらでも問題なく認識してくれます。

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>学問のすすめ　</dc:title>
<dc:creator>福沢諭吉</dc:creator>
<dc:language>ja</dc:language>
<dc:identifier id="unique-id">urn:uuid:9d6ky7ae-awaq-e5n1-k4og-xw6rfya7uxgu</dc:identifier>
<meta property="dcterms:modified">2018-10-30T19:31:32Z</meta>
<meta property="ebpaj:guide-version">1.1.3</meta>
</metadata>
<manifest>
<item media-type="application/xhtml+xml" id="toc" href="toc.xhtml" properties="nav"/>
<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="application/xhtml+xml" id="p-titlepage"       href="xhtml/p-titlepage.xhtml"/>
<item media-type="application/xhtml+xml" id="pp0000" href="xhtml/p0000.xhtml"/>
<item media-type="application/xhtml+xml" id="pp0001" href="xhtml/p0001.xhtml"/>
    ・・・
</manifest>
<spine page-progression-direction="rtl">
<itemref linear="yes" idref="p-titlepage"/>
<itemref linear="yes" idref="toc"/>
<itemref linear="yes" idref="pp0000"/>
<itemref linear="yes" idref="pp0001"/>
    ・・・
</spine>
</package>

何言ってんじゃボケェ！！ってなりますよね(´・∀・｀)
まず最初の<package>、これはただコピーしてください。テンプレです。
次に<metadata>内を解説します。

<dc:title>ここに書いたものが、本のタイトルとして表示されます。
<dc:creator>ここに書いたものが、本の著者として表示されます。
<dc:language>日本人ならja(英語の本にしたいならen)
その下の何か
- よくわかりません。ただコピーしただけでも動きます。見た目には変化がなさそう
EXTRA
- <dc:publisher>ここに書いたものが、本の出版社として表示されます。
- <dc:description>ここに書いたものが、本のあらすじとして表示されます。

次は<manifest>内についてです。manifestでは、epubに格納してあるファイルを全て指定させる必要があります。これが無いとファイルが認識できません。

media-type="hoge"
そのファイルのタイプを認識します。application/xhtml+xml,text/css,image/jpeg,image/png等のタイプがあります。それぞれ.xhtml,.css,.jpg,.pngファイルを認識する時にこれを書きます。
id="hoge"
これは、<spine>で必要になってきます。わかりやすく書きましょう。
href="hoge"
ファイルが格納されている場所のパスです。imageフォルダにある"001.jpg"を認識させたいのなら、href="image/001.jpg"のように書きます。

最後に<spine>です。ここは、実際に表示する所を指定するため、絶対にバラバラに書かないでください。 滅茶苦茶になります。(上から順番に表示させていくので)
<itemref linear="yes" idref="hoge"/>
先ほど決めたidをidref=の後に書き込みます。

EXTRA
- idrefの後に、properties="page-spread-left"と入れると、見開き表示の場合、画像が左側に表示されます。その他、"page-spread-right","page-spread-center"などがあります。

toc.ncx(.html)ファイル]

navigation-documents.xhtmlというファイルでも指定できますが、これは目次です。
ただ、青空文庫のepubはめちゃくちゃ読みにくいので、別のものを用意しました。

<?xml version="1.0" encoding="UTF-8"?><ncx xmlns="http://www.daisy.org/z3986/2005/ncx/" version="2005-1">
<head>
<meta name="dtb:uid" content="urn:uuid:2dae8258-9b13-4f09-b331-e6deeacc9003"/>
<meta name="dtb:depth" content="1"/>
<meta name="dtb:totalPageCount" content="0"/>
<meta name="dtb:maxPageNumber" content="0"/>
</head>
<docTitle><text>Navigation</text></docTitle>
<navMap>

<navPoint id="xhtml-p-cover" playOrder="1">
<navLabel><text>表紙</text></navLabel>
<content src="xhtml/p-cover.xhtml"/>
</navPoint>

<navPoint id="xhtml-p-003" playOrder="2">
<navLabel><text>目次</text></navLabel>
<content src="xhtml/p-003.xhtml"/>
</navPoint>

</navMap>
</ncx>

id="hoge",<content src="hoge"/>の部分は、目次で表示したいページのxhtmlの名前をかくと、そのページに飛ぶことができます。
playOrder="n"は、目次の順番です。ちゃんと番号を変えましょう。

最後に

必要なことはこんなものだと思います。お疲れ様でした。
これを†完全に理解†すれば、epubを一瞬で作れるようになる(と思います。)
自分は、"hoge.xhtml"を大量に作っておいて、その作品に合わせてちょっと変更するだけで簡単に作れるようになったので、割とオヌヌメです。
画像で見るの怠いとか思ってる人は一回挑戦して見てはどうでしょうか
次はwasabi君の記事です。楽しみ〜

電子書籍の解体【アドベントカレンダー2018 24日目】

電子書籍のメリット

電子書籍のデメリット

そもそも電子書籍とは何なのか？

中身の解体を始めよう

styleフォルダ

xhtmlフォルダ

imageフォルダ

standard.opfファイル

toc.ncx(.html)ファイル]

最後に

関連する記事

電子書籍の解体【アドベントカレンダー2018 24日目】

電子書籍のメリット

電子書籍のデメリット

そもそも電子書籍とは何なのか？

中身の解体を始めよう

styleフォルダ

xhtmlフォルダ

imageフォルダ

standard.opfファイル

toc.ncx(.html)ファイル]

最後に

この記事をシェア

関連する記事