feature image

2018年11月17日 | ブログ記事

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

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

電子書籍のメリット

電子書籍のデメリット

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

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

さて、本題に入りたいと思います。
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.zipは可能)
中身については後程解説しますが、基本的にhtmlの集合体でできています。しかし、ただ単にhtmlだけを渡されても、読むことはできません。それにはページスタイルと言われる.cssファイルも必要だからです(もちろん画像なんかも必要)。これらを纏めて扱いやすくパックしたものが電子書籍形式(.epub)というわけです。一つのファイルにしたほうが管理しやすいですからね。つまり、htmlさえ作り方がわかれば後は簡単にepubが作れちゃうんです!!便利~

中身の解体を始めよう

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

まず最初に見える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>内を解説します。

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

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

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君の記事です。楽しみ〜

TM icon
この記事を書いた人
TM

時間が足りない

この記事をシェア

このエントリーをはてなブックマークに追加
共有

関連する記事

ERC20トークンを用いた宝探しゲーム(真)の提案【アドベントカレンダー2018 10日目】 feature image
2018年11月3日
ERC20トークンを用いた宝探しゲーム(真)の提案【アドベントカレンダー2018 10日目】
Azon icon Azon
2018年12月12日
多重スリーブの世界と,各種進捗報告。
Silviase icon Silviase
2018年12月23日
LogicProXでのサラウンド設定,オーケストラ用テンプレ作成,その他の小ネタ
SolunaEureka icon SolunaEureka
2018年11月30日
Flutterでスマホアプリを作ってみ(た | よう)【アドベントカレンダー2018 37日目】
Fourmsushi icon Fourmsushi
2018年12月23日
線形解読法
nari icon nari
2018年12月16日
ICPCアジア地区横浜大会参加記【アドベントカレンダー2018 52日目】
eiya icon eiya
記事一覧 タグ一覧 Google アナリティクスについて