EPUB3 固定レイアウト徹底解説

EPUB3固定レイアウト解説
2012年6月7日（木）15:00-16:40

境祐司
@commonstyle ¦ 電子書籍メディア論

※講演資料の一部を抜粋した公開用スライドです

proﬁle

YOUJI SAKAI
Instructional Designer | eBook Designer
境祐司

BOOKS
最新刊

ウェブレイアウトの EPUB3スタンダード Webデザイン基礎
教科書デザインガイド改訂３版

community

電子書籍メデア論
ィ
http://www.facebook.com/eBookStrategy

デザインの未来
http://www.facebook.com/TheFutureDesign

EPUB3技術解説セミナー1

本日のテーマ：

固定レイアウト
フォント埋め込み
ウェブフォント

※講演資料の一部を抜粋した公開用スライドです


固定レイアウト
Fixed-Layout

Fixed-Layout
テキストや図版を画像化した
絶対配置紙面を配置

Fixed-Layout
テキストや図版を絶対配置

・座標値を指定してテキストや図版を配置する方法
・文字サイズは固定されているものが多い
リーディングシステム側で文字サイズの変更ができない
・電子書籍のデータサイズは、
リフロー形式の電子書籍とあまり変わらない
・テキストの選択や本文検索などは実行できる

Fixed-Layout
iPad at Work
Volume 2
Apple iBookstore

Fixed-Layout
画像化した紙面を配置

・DTPデータからイメージ変換する方法
・もしくは、印刷物を取り込み、補正する方法
・コミックや写真集、絵本などは、JPEG、PNGなどの
ラスターグラフィックスが多い
・雑誌や凝ったレイアウトの実用書などは、PDFが多い
・リフロー形式やテキストや図版を絶対配置する方式と
比較した場合、データサイズが大きくなってしまう

Fixed-Layout
.net
Apple Newsstand

インタラクティブ
レプリカ

Fixed-Layout
Country's Best Cabins
Amazon Kindle Store

プリントレプリカ

Fixed-Layout
There Was an Old Monkey Who Swallowed a Frog
Amazon Kindle Store
固定レイアウト（Kindle Format 8）


固定レイアウトの検証環境


Readium Version 0.3.2
http://readium.org/

6月2日リリースのバージョン／Chrome 19.0.1084.54（2012.6.7現在）


about:flags


CSS領域を有効にする
「有効にする」をクリック


「今すぐ再起動」をクリック


Readium mobile
Chrome for Android 4.0
http://github.readium.org/


公開されているEPUB3固定レイアウトのサンプル

epub-samples
http://code.google.com/p/epub-samples/

ダウンロードリスト
http://code.google.com/p/epub-samples/downloads/list


EPUB3固定レイアウトのサンプル
haruko-html-jpeg-20120524.epub
Fixed layout manga, jpeg embedded in xhtml
haruko-jpeg-20120524.epub
Fixed layout manga, jpeg directly in the spine
sous-le-vent_svg-in-spine-20120418.epub
fixed-layout document, using SVG in spine
svg-in-spine-20120417.epub
sous-le-vent-20120403.epub
fixed-layout document, using SVG embedded in XHTML
cole-voyage-of-life-20120320.epub
reflowable content with interspersed fixed-layout pages
page-blanche-20120314.epub
fixed layout document, using XHTML spine items that embed bitmaps

IDPF - EPUB 3 Fixed-Layout Documents

EPUB 3
Fixed-Layout
Documents
http://idpf.org/epub/fxl/


EPUB 3 Fixed-Layout Documents

・IDPFの情報文書（Informational Document）
・IDPF EPUB working group が作成
・2012年3月13日、IDPF 理事会によって承認


Editors:

Markus Gylling - IDPF
マーカス・ギリング

Dave Cramer - Hachette
デイヴ・クレイマー


Authors:
Takeshi Kanai (Sony) ソニー
Peter Sorotokin (Adobe) アドビ
Roger Webster (Barnes & Noble) バーンズ & ノーブル
James Lester (Barnes & Noble) バーンズ & ノーブル
Brady Kroupa (Barnes & Noble) バーンズ & ノーブル
Garth Conboy (Google) グーグル
Brady Duga (Google) グーグル
MURATA Makoto (JEPA) ジェパ
Edward O Connor (Apple) アップル
Luc Audrain (Hachette Livre) アシェット・リーブル
Hadrien Gardeur (Feedbooks) フィードブックス



2
1
3



対応付け

機能
領域



プロパティ Preﬁxマッピング

・rendition:layout
・rendition:orientation
コンテント
・rendition:spread
ディメンションズ
・page-spread-*


プロパティの定義
Property Deﬁnitions

・rendition:layout プロパティ
・rendition:orientation プロパティ
・rendition:spread プロパティ
・page-spread-* プロパティ



・リフロー／ページ区切りの指定
・スクリーンの方向（縦・横）
・見開きの指定
・見開きの配置指定（左・右・中央）


Prefixマッピング
Prefix Mapping

prefix属性で URI
http://www.idpf.org/vocab/rendition/# にマッピング

<package …
prefix="rendition: http://www.idpf.org/vocab/rendition/#">

</package>


コンテント・ディメンションズ
Content dimensions

meta要素のviewportで指定

<head>
<meta name="viewport" content="width=1200, height=600" />
</head>

<head>
<meta name="viewport" content="width=512, height=600" />
</head>


コンテント・ディメンションズ
Content dimensions


Preﬁxマッピング
Preﬁx Mapping




コンテント・ディメンションズ XHTML
Content dimensions


Preﬁxマッピングパッケージドキュメント
Preﬁx Mapping


プロパティの定義パッケージドキュメント


サンプルファイルを確認
epub-samples
http://code.google.com/p/epub-samples/


haruko-html-jpeg-20120524.epub
Fixed layout manga, jpeg embedded in xhtml
haruko-jpeg-20120524.epub
Fixed layout manga, jpeg directly in the spine
sous-le-vent_svg-in-spine-20120418.epub
svg-in-spine-20120417.epub
sous-le-vent-20120403.epub
fixed-layout document, using SVG embedded in XHTML
cole-voyage-of-life-20120320.epub
reflowable content with interspersed fixed-layout pages
fixed layout document, using XHTML spine items that embed bitmaps



解凍



Image



Text



Style



パッケージドキュメント（.opf）




プロパティ Preﬁxマッピング

・rendition:layout
・rendition:orientation
コンテント
・rendition:spread
ディメンションズ
・page-spread-*



コンテンツキュメント（.xhtml）



6ページ目のXHTMLファイル



1200 1577px


rendition:layout プロパティ

リフロー／ページ区切りの指定



・reﬂowable（リフロー）
・pre-paginated（ページ区切り）



・reﬂowable（リフロー）
・pre-paginated（ページ区切り）

<meta property="rendition:layout">reﬂowable</meta>
<meta property="rendition:layout">pre-paginated</meta>


rendition:orientation プロパティ

スクリーンの方向（縦・横）



・landscape（横方向）
・portrait（縦方向）
・auto（制限なし）



・landscape（横方向）
・portrait（縦方向）

<meta property="rendition:orientation">landscape</meta>
<meta property="rendition:orientation">portrait</meta>


rendition:spread プロパティ

見開きの指定



・none
・landscape（横方向のみ）
・portrait（縦方向のみ）
・both（横方向・縦方向）


Double Pages


例：
ランドスケープモード（横向き）にすると
見開きで表示される


例：
ランドスケープモード（横向き）にすると
見開きで表示される

ランドスケープモード（横向き）では、
見開きではなく、シングルページの
拡大表示で読みたい、という読者もいる


読者が、シングルページ、
ダブルページ（見開き）を自由に選択
できたほうがよい場合もある


page-spread-* プロパティ

見開きの配置指定（左・右・中央）



・page-spread-left プロパティ
（左側に配置）
・page-spread-right プロパティ
（右側に配置）
・rendition:page-spread-center
（中央に配置）




タイトルページは右側に配置する




spine itemref要素でこのように指定してもよい


補足

<meta property="rendition:layout">
pre-paginated
</meta>



Appendix A. Examples
http://idpf.org/epub/fxl/#examples


Example 1

・固定レイアウト
・横向きでは合成された見開き
・縦向きでは見開きにしない


Example 1


Example 2

・合成された見開きにしない
・横向きで固定


Example 2


Example 3

・リフローのコンテンツ
・タイトルページだけ固定レイアウト
・合成された見開きを表示するときは
右側に配置


Example 3


Example 5

・リフローのコンテンツ
・固定レイアウトの
右配置ページと左配置ページを
合成された見開きページとして表示
・リフローのページも見開き表示のまま


Example 5


Example 7

・横向きでは合成された見開き
・縦向きでは見開きにしない
・進行方向は右から左（日本のマンガ）


Example 7



復習



XHTMLファイル



貼付ける画像の準備

Readiumで確認


追記：

6月12日にアップデートした
国産EPUBリーディングシステムの
Himawari Reader Proが
EPUB3 固定レイアウトの仕様を
実装しました。


Himawari Reader Pro Android
https://play.google.com/store/apps/details?id=jp.green_ﬂd.himawari.pro


追記：

Readium mobileにも
EPUB3 固定レイアウトの仕様が
実装されました。


Readium mobile
Chorme for Android 4.0
http://github.readium.org/

実証状況など情報が頻繁に更新されていますので
日付にご注意ください！

この資料は、
2012年6月12日現在
の情報です

EPUB3の最新情報は
IDPFのサイトで確認してください

http://idpf.org/

Thank you for your attention.
ご清聴ありがとうございました

EPUB3 固定レイアウト徹底解説

More Related Content

EPUB3 固定レイアウト徹底解説