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

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

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

https://twitter.com/%23!/commonstyle

https://twitter.com/%23!/commonstyle

http://ja-jp.facebook.com/eBookStrategy

http://ja-jp.facebook.com/eBookStrategy

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

YOUJI SAKAIInstructional Designer | eBook Designer

境祐司

profile

BOOKS

ウェブレイアウトの教科書

EPUB3スタンダードデザインガイド

Webデザイン基礎改訂３版

最新刊

community

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

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

http://www.facebook.com/pages/dian-zi-shu-jimedia-lun/143512822352930








テキスト

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

EPUB3技術解説セミナー1

本日のテーマ：

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

Fixed-Layout固定レイアウト


Fixed-Layout

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

画像化した紙面を配置

Fixed-Layout


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

Fixed-LayoutiPad at WorkVolume 2Apple iBookstore

Fixed-LayoutiPad at WorkVolume 2Apple iBookstore

Fixed-Layout


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

Fixed-Layout

.netApple Newsstand

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

Fixed-LayoutCountry's Best CabinsAmazon Kindle Store

プリントレプリカ

Fixed-LayoutThere Was an Old Monkey Who Swallowed a FrogAmazon Kindle Store 固定レイアウト（Kindle Format 8）

Fixed-Layout


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

Fixed-Layout



Fixed-Layout



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


Readium Version 0.3.2


http://readium.org/

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

http://readium.org

http://readium.org

http://readium.org/

http://readium.org/




about:flags



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


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








Readium mobileChrome for Android 4.0

http://github.readium.org/

http://github.readium.org


http://readium.org/

http://readium.org/


Readium mobileChrome for Android 4.0




http://readium.org/

http://readium.org/

epub-samples


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

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

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





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

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






haruko-html-jpeg-20120524.epubFixed layout manga, jpeg embedded in xhtmlharuko-jpeg-20120524.epubFixed layout manga, jpeg directly in the spinesous-le-vent_svg-in-spine-20120418.epubfixed-layout document, using SVG in spinesvg-in-spine-20120417.epubfixed-layout document, using SVG in spinesous-le-vent-20120403.epubfixed-layout document, using SVG embedded in XHTMLcole-voyage-of-life-20120320.epubreflowable content with interspersed fixed-layout pagespage-blanche-20120314.epubfixed layout document, using XHTML spine items that embed bitmaps

EPUB3固定レイアウトのサンプル




IDPF - EPUB 3 Fixed-Layout Documents

EPUB 3Fixed-LayoutDocuments

http://idpf.org/epub/fxl/




EPUB 3 Fixed-Layout Documents

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


Editors:

Markus Gylling - IDPFDave 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)　フィードブックス


1


2

3


機能


対応付け

領域


・rendition:layout ・rendition:orientation・rendition:spread・page-spread-*

プロパティ


Prefixマッピング

コンテントディメンションズ


Property Definitions

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

プロパティの定義


Property Definitions

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

プロパティの定義


Prefix Mapping

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

</package>


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


Content dimensions

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

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

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

meta要素のviewportで指定


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


Prefix MappingPrefixマッピング


Property Definitionsプロパティの定義


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


Prefix MappingPrefixマッピング



XHTML

パッケージドキュメント

パッケージドキュメント


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






haruko-html-jpeg-20120524.epubFixed layout manga, jpeg embedded in xhtmlharuko-jpeg-20120524.epubFixed layout manga, jpeg directly in the spinesous-le-vent_svg-in-spine-20120418.epubfixed-layout document, using SVG in spinesvg-in-spine-20120417.epubfixed-layout document, using SVG in spinesous-le-vent-20120403.epubfixed-layout document, using SVG embedded in XHTMLcole-voyage-of-life-20120320.epubreflowable content with interspersed fixed-layout pagespage-blanche-20120314.epubfixed layout document, using XHTML spine items that embed bitmaps



page-blanche-20120314.epub



解凍







Image



Text



Style



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






プロパティ








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



6ページ目のXHTMLファイル



1200×1577px




プロパティ







プロパティ







rendition:layout プロパティ

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



・reflowable（リフロー）・pre-paginated（ページ区切り）



・reflowable（リフロー）・pre-paginated（ページ区切り）

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







rendition:orientation プロパティ

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



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



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

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







rendition:spread プロパティ

見開きの指定



・none・landscape（横方向のみ）・portrait（縦方向のみ）・both（横方向・縦方向）・auto（制限なし）



<meta property="rendition:spread">landscape</meta><meta property="rendition:spread">portrait</meta><meta property="rendition:spread">both</meta>










Double Pages



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


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

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


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


page-spread-* プロパティ

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



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



<itemref id="titlepage" properties="page-spread-right rendition:layout-pre-paginated"/>




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




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



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

補足


Appendix A. ExamplesEPUB 3 Fixed-Layout Documents

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）



XHTMLファイル



貼付ける画像の準備

EPUB3技術解説セミナー1Readiumで確認




6月12日にアップデートした国産EPUBリーディングシステムのHimawari Reader Proが

EPUB3 固定レイアウトの仕様を実装しました。

追記：


Himawari Reader Prohttps://play.google.com/store/apps/details?id=jp.green_fld.himawari.pro

Android

https://play.google.com/store/apps/details?id=jp.green_fld.himawari.pro



Himawari Reader Prohttps://play.google.com/store/apps/details?id=jp.green_fld.himawari.pro

Android




Readium mobileにもEPUB3 固定レイアウトの仕様が

実装されました。

追記：


Readium mobileChorme for Android 4.0




http://readium.org/

http://readium.org/

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

この資料は、2012年6月12日現在

の情報です

http://idpf.org/

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

http://idpf.org

http://idpf.org

http://idpf.org/

http://idpf.org/

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

community

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

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







