ハイブリッド型EPUB3のチェック

2015/9/12 [16:33:00] (土)

角川のBWインディーズが公開されて、BOOK☆WALKERに個人出版で参加ができるようになった。
BOOK☆WALKERはライトノベルが強いところで、「めがイラスト」での独自の表現方法など、挿絵・イラストに対する比重が大きいことがよくわかる。

「KADOKAWA-EPUB PORTAL」（https://kadokawa-epub.bookwalker.co.jp/）で角川のEPUB3の仕様が公開されていてとても参考になる。
仕様を見ると、挿絵・イラストなどはフィックス(固定)型レイアウトページで表示させることができるんで、やっぱそこは力が入ってんなあ、と。
リフロー型ページとフィックス型ページの混在、ハイブリッド型表示については、すでにEPUB3の仕様に入っている。KADOKAWAの資料はかなり具体的・詳細な記述方法が書いてあってわかりやすいので、ほんとオススメ。

イラストや写真など、リフロー型レイアウトじゃなんでダメなのかというと、ディスプレイの天地左右に中途半端なマージン(余白)が出てしまうのが全然ダメ。「一枚絵」として見せたいのが、なんじゃこの余白は、と台無しの脱力感。

リフローで表示するとこんな感じ。画像は600x800。72dpi（bookwalkerアプリ/Sharp SHL23）


しかし、フィックス型レイアウトでは指定した画像はディスプレイ目一杯に表示してくれる。
（もちろん、画像とディスプレイの縦横比の違いから余白が出ることになる。さすがに解像度・縦横比の違うすべてのデバイスで天地左右ぴったりフィットさせるのは無理）
これならば制作者の意図通りに表現された、と言えるだろう。

ということで、ハイブリッド型のEPUB3を作ってアプリで読んでみた。
以下は、ハイブリッドEPUB3ファイルの中の、画像一枚のフィックス型ページの表示例

ハイブリッド対応

BOOK☆WALKER for Android ver.3.9.0

さすがBOOK☆WALKERだな。1ページ大の挿絵はこうじゃなくっちゃだ。
画像が縦横比1.3で、スマホの縦横比が1.7ぐらい。画像の方が縦に短いので天地に余白は出るけど、左右はぴったりフィットで天地の余白も均等。

紀伊国屋書店Kinoppy for Android ver.2.5.0 build 22445

これはちょっとびっくり。ディスプレイにぴったりフィット…って、画像を縦に引っ張ってる。画像を変形したらいかんだろ。
[09/17 19:34:03]
↑すみません。これはまったくわたしのミスです。
画像のサイズとXHTMLで指定したサイズが違っていることが原因で、Kinoppyのせいではありません。
Kinoppyの表示モード「スクロール」では天地いっぱいではみ出た横幅分をスクロールして見せる。その他のモード(ブックやシンプル)では、天地に余白。

スクロールモード


きちんとハイブリッド、リフローの中のフィックスページを意図したとおりに表示してくれます。BOOK☆WALKERアプリと同じ…てことは、純国産(?)のアプリはEPUB3準拠に頑張ってんだなあ。


ハイブリッド非対応

ibooks ver.2

iPhone4Sのディスプレイは小さいからそれっぽく見えるけど、最近の高解像度のデバイスだと余白がかなり大きくなる。現状ままだとibooksでリフローの画像はその時々の上限いっぱいの大きさで作るイタチごっこ。

kobo

左右に余白…はともかく、この画像ページの前に空白ページが入る。viewportを中途半端に解釈してるんだろうか。空白のページが入ってしまうのはまずいなぁ。

ちなみに、kindleはkindlegenでkindle用にコンバートするのでハイブリッドEPUB3は他のリフローと同じになるようだ。


BOOK☆WALKER用に別途、EPUB3ファイルを作ることになるんだろうな。特にイラストや写真にこだわるような本はここ大事だ。
(BWインディーズの「リフローまたはフィックス」という注意書きのリフローって、ハイブリッドも含まれてるのかなぁ)


「KADOKAWA-EPUB PORTAL」 を強くオススメするけど、マニア向けに今回作ってみたハイブリッドのEPUB3ファイルを上げておきます。
https://t2aki.doncha.net/tmp/reflow-fixed-20150912b.epub
（直リンクできないので、ここから取ってください）

opfファイルのspine部、xhtmlのSVGの記述がキモかな。

» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」

»電子書籍制作代行についてはこちら