EPUB 3 Fixed Layout のサンプルを閲覧してみる(IDPF)

IDPFの公開しているサンプルを見るにはまずここにジャンプ。

http://code.google.com/p/epub-samples/wiki/FeatureMatrix#Fixed_Layout

ジャンプ先の「Fixed Layout」の欄の右側がサンプルデータのリンクですね。
上から
XHTMLベース、SVGベース、ミックストの3種類があがっています。とりあえずはクリックです。

Safari003

クリックするとGoogle codeのページが開きます。

Safari006


各テーブルの左のリンクはEPUBファイルのダウンロード、右はソースを表示になっていて、4番目の「cole-voyage-of-life-tol」は3番目のリンクのバリエーション的存在ということでいいみたいです。

さっそくEPUBをダウンロードして開いてみました。
1番上の「Page Blanche」です。絵の扉が出てきました。

Adobe Digital Editions001

Adobe Digital Editionsでは全体を縮小表示できないので絵が下までノートパソコンで見られません・・・
ちなみにiPadのiBooksではレイアウトが崩れるのでみられませんでした。そら当たり前ですね。

サンプルに書かれたメモでは、XHTMLのspine itemタグでビットマップ画像を埋め込んでいるとこのこと。
また、このサンプルは、rendition:layout プロパティ(EPUB出版物またはspine itemがリフロー形式か、あらかじめページが決められている(pre-paginated)かどちらか)pre-paginatedに、またrendition:orientationプロパティ(方向)はauto、rendition:spreadプロパティ(EPUB出版物またはspine itemに対して、「見開き」のように表現するリーディングシステムのための仕様)もautoに設定されているとのこと。

どちらも http://idpf.org/epub/fxl/#property-layout の新しい仕様です。

ソースはどのようになっているでしょうか。上記のプロパティはどちらも、Publication Documentのmeta要素かitemref要素の中で使うということなので、見てみましょう。ソースは「Browse Source」を開いて確認します。最初から「package.opf」が選択されているのでクリックで開きます。

Safari007

23-25行目に表記がありました。opfについてはほかはとくに変化はないみたいです。

Safari009

また、XHTMLファイルのほうを開いてみましょう。Textディレクトリに格納されていて、ページ数分ファイルがあるようです。

Safari010

これはcover.xhtmlです。上でSafariで表示してみたページです。
viewportが指定されています。

Safari012

さすが全ページが画像のサンプルなので、本文ページもほぼ同じでありました。

Safari013

では、最後にこのEPUBデータをreadium(http://readium.org/)で見てみました。

Google Chrome002
Google Chrome003
Google Chrome004

おお。

マンガみたいなレイアウトを実現するアプリは、過去にいろいろ存在するのでどこがすごいの?となる気持ちもあると思いますが、全部EPUB形式に揃えて管理・流通できるとなると、便利だよね、という感じです。