epub3 固定レイアウト徹底解説
DESCRIPTION
技術解説セミナーで使用したスライド資料の抜粋です。この公開バージョンは、スライド枚数を135枚に減らしてしますTRANSCRIPT
EPUB3固定レイアウト解説2012年6月7日(木)15:00-16:40
境祐司@commonstyle | 電子書籍メディア論
※講演資料の一部を抜粋した公開用スライドです
YOUJI SAKAIInstructional Designer | eBook Designer
境祐司
profile
BOOKS
ウェブレイアウトの教科書
EPUB3スタンダードデザインガイド
Webデザイン基礎改訂3版
最新刊
community
電子書籍メディア論http://www.facebook.com/eBookStrategy
デザインの未来http://www.facebook.com/TheFutureDesign
テキスト
固定レイアウトフォント埋め込みウェブフォント
EPUB3技術解説セミナー1
本日のテーマ:
※講演資料の一部を抜粋した公開用スライドです
Fixed-Layout固定レイアウト
EPUB3技術解説セミナー1
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
テキストや図版を絶対配置
画像化した紙面を配置
固定レイアウトの検証環境
EPUB3技術解説セミナー1
Readium Version 0.3.2
EPUB3技術解説セミナー1
http://readium.org/
6月2日リリースのバージョン/Chrome 19.0.1084.54(2012.6.7現在)
EPUB3技術解説セミナー1
EPUB3技術解説セミナー1
EPUB3技術解説セミナー1
about:flags
EPUB3技術解説セミナー1
EPUB3技術解説セミナー1
CSS領域を有効にする「有効にする」をクリック
EPUB3技術解説セミナー1
「今すぐ再起動」をクリック
EPUB3技術解説セミナー1
EPUB3技術解説セミナー1
EPUB3技術解説セミナー1
EPUB3技術解説セミナー1
EPUB3技術解説セミナー1
EPUB3技術解説セミナー1
EPUB3技術解説セミナー1
Readium mobileChrome for Android 4.0
http://github.readium.org/
EPUB3技術解説セミナー1
Readium mobileChrome for Android 4.0
http://github.readium.org/
epub-samples
EPUB3技術解説セミナー1
http://code.google.com/p/epub-samples/
ダウンロードリストhttp://code.google.com/p/epub-samples/downloads/list
公開されているEPUB3固定レイアウトのサンプル
EPUB3技術解説セミナー1
EPUB3技術解説セミナー1
EPUB3技術解説セミナー1
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固定レイアウトのサンプル
EPUB3技術解説セミナー1
EPUB3固定レイアウトのサンプル
EPUB3技術解説セミナー1
IDPF - EPUB 3 Fixed-Layout Documents
EPUB 3Fixed-LayoutDocuments
http://idpf.org/epub/fxl/
IDPF - EPUB 3 Fixed-Layout Documents
EPUB 3 Fixed-Layout Documents
・IDPFの情報文書(Informational Document)・IDPF EPUB working group が作成・2012年3月13日、IDPF 理事会によって承認
IDPF - EPUB 3 Fixed-Layout Documents
Editors:
Markus Gylling - IDPFDave Cramer - Hachette
マーカス・ギリング
デイヴ・クレイマー
IDPF - EPUB 3 Fixed-Layout Documents
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) フィードブックス
IDPF - EPUB 3 Fixed-Layout Documents
1
EPUB 3 Fixed-Layout Documents
2
3
IDPF - EPUB 3 Fixed-Layout Documents
機 能
EPUB 3 Fixed-Layout Documents
対応付け
領 域
IDPF - EPUB 3 Fixed-Layout Documents
・rendition:layout ・rendition:orientation・rendition:spread・page-spread-*
プロパティ
EPUB 3 Fixed-Layout Documents
Prefixマッピング
コンテントディメンションズ
IDPF - EPUB 3 Fixed-Layout Documents
Property Definitions
・rendition:layout プロパティ・rendition:orientation プロパティ・rendition:spread プロパティ・page-spread-* プロパティ
プロパティの定義
IDPF - EPUB 3 Fixed-Layout Documents
Property Definitions
・リフロー/ページ区切りの指定・スクリーンの方向(縦・横)・見開きの指定・見開きの配置指定(左・右・中央)
プロパティの定義
IDPF - EPUB 3 Fixed-Layout Documents
Prefix Mapping
<package … prefix="rendition: http://www.idpf.org/vocab/rendition/#">
</package>
Prefixマッピング
prefix属性で URI http://www.idpf.org/vocab/rendition/# にマッピング
IDPF - EPUB 3 Fixed-Layout Documents
Content dimensions
<head><meta name="viewport" content="width=1200, height=600" /></head>
<head><meta name="viewport" content="width=512, height=600" /></head>
コンテント・ディメンションズ
meta要素のviewportで指定
IDPF - EPUB 3 Fixed-Layout Documents
Content dimensionsコンテント・ディメンションズ
meta要素のviewportで指定
Prefix MappingPrefixマッピング
prefix属性で URI http://www.idpf.org/vocab/rendition/# にマッピング
Property Definitionsプロパティの定義
IDPF - EPUB 3 Fixed-Layout Documents
Content dimensionsコンテント・ディメンションズ
meta要素のviewportで指定
Prefix MappingPrefixマッピング
prefix属性で URI http://www.idpf.org/vocab/rendition/# にマッピング
Property Definitionsプロパティの定義
XHTML
パッケージドキュメント
パッケージドキュメント
IDPF - EPUB 3 Fixed-Layout Documents
サンプルファイルを確認epub-sampleshttp://code.google.com/p/epub-samples/
IDPF - EPUB 3 Fixed-Layout Documents
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
page-blanche-20120314.epub
IDPF - EPUB 3 Fixed-Layout Documents
page-blanche-20120314.epub
解 凍
IDPF - EPUB 3 Fixed-Layout Documents
page-blanche-20120314.epub
IDPF - EPUB 3 Fixed-Layout Documents
page-blanche-20120314.epub
IDPF - EPUB 3 Fixed-Layout Documents
page-blanche-20120314.epub
Image
IDPF - EPUB 3 Fixed-Layout Documents
page-blanche-20120314.epub
Text
IDPF - EPUB 3 Fixed-Layout Documents
page-blanche-20120314.epub
Style
IDPF - EPUB 3 Fixed-Layout Documents
page-blanche-20120314.epub
パッケージドキュメント(.opf)
IDPF - EPUB 3 Fixed-Layout Documents
page-blanche-20120314.epub
IDPF - EPUB 3 Fixed-Layout Documents
page-blanche-20120314.epub
・rendition:layout ・rendition:orientation・rendition:spread・page-spread-*
プロパティ
EPUB 3 Fixed-Layout Documents
Prefixマッピング
コンテントディメンションズ
IDPF - EPUB 3 Fixed-Layout Documents
page-blanche-20120314.epub
IDPF - EPUB 3 Fixed-Layout Documents
page-blanche-20120314.epub
コンテンツキュメント(.xhtml)
IDPF - EPUB 3 Fixed-Layout Documents
page-blanche-20120314.epub
6ページ目のXHTMLファイル
IDPF - EPUB 3 Fixed-Layout Documents
page-blanche-20120314.epub
1200×1577px
IDPF - EPUB 3 Fixed-Layout Documents
page-blanche-20120314.epub
・rendition:layout ・rendition:orientation・rendition:spread・page-spread-*
プロパティ
EPUB 3 Fixed-Layout Documents
Prefixマッピング
コンテントディメンションズ
IDPF - EPUB 3 Fixed-Layout Documents
page-blanche-20120314.epub
・rendition:layout ・rendition:orientation・rendition:spread・page-spread-*
プロパティ
EPUB 3 Fixed-Layout Documents
Prefixマッピング
コンテントディメンションズ
IDPF - EPUB 3 Fixed-Layout Documents
Property Definitionsプロパティの定義
IDPF - EPUB 3 Fixed-Layout Documents
rendition:layout プロパティ
リフロー/ページ区切りの指定
IDPF - EPUB 3 Fixed-Layout Documents
rendition:layout プロパティ
・reflowable(リフロー)・pre-paginated(ページ区切り)
IDPF - EPUB 3 Fixed-Layout Documents
rendition:layout プロパティ
・reflowable(リフロー)・pre-paginated(ページ区切り)
<meta property="rendition:layout">reflowable</meta><meta property="rendition:layout">pre-paginated</meta>
IDPF - EPUB 3 Fixed-Layout Documents
page-blanche-20120314.epub
パッケージドキュメント(.opf)
IDPF - EPUB 3 Fixed-Layout Documents
page-blanche-20120314.epub
IDPF - EPUB 3 Fixed-Layout Documents
rendition:orientation プロパティ
スクリーンの方向(縦・横)
IDPF - EPUB 3 Fixed-Layout Documents
rendition:orientation プロパティ
・landscape(横方向)・portrait(縦方向)・auto(制限なし)
IDPF - EPUB 3 Fixed-Layout Documents
rendition:orientation プロパティ
・landscape(横方向)・portrait(縦方向)・auto(制限なし)
<meta property="rendition:orientation">landscape</meta><meta property="rendition:orientation">portrait</meta>
IDPF - EPUB 3 Fixed-Layout Documents
page-blanche-20120314.epub
パッケージドキュメント(.opf)
IDPF - EPUB 3 Fixed-Layout Documents
page-blanche-20120314.epub
IDPF - EPUB 3 Fixed-Layout Documents
rendition:spread プロパティ
見開きの指定
IDPF - EPUB 3 Fixed-Layout Documents
rendition:spread プロパティ
・none・landscape(横方向のみ)・portrait(縦方向のみ)・both(横方向・縦方向)・auto(制限なし)
IDPF - EPUB 3 Fixed-Layout Documents
rendition:spread プロパティ
<meta property="rendition:spread">landscape</meta><meta property="rendition:spread">portrait</meta><meta property="rendition:spread">both</meta>
IDPF - EPUB 3 Fixed-Layout Documents
page-blanche-20120314.epub
パッケージドキュメント(.opf)
IDPF - EPUB 3 Fixed-Layout Documents
page-blanche-20120314.epub
IDPF - EPUB 3 Fixed-Layout Documents
IDPF - EPUB 3 Fixed-Layout Documents
IDPF - EPUB 3 Fixed-Layout Documents
IDPF - EPUB 3 Fixed-Layout Documents
Double Pages
IDPF - EPUB 3 Fixed-Layout Documents
IDPF - EPUB 3 Fixed-Layout Documents
例:ランドスケープモード(横向き)にすると見開きで表示される
IDPF - EPUB 3 Fixed-Layout Documents
例:ランドスケープモード(横向き)にすると見開きで表示される
ランドスケープモード(横向き)では、見開きではなく、シングルページの拡大表示で読みたい、という読者もいる
IDPF - EPUB 3 Fixed-Layout Documents
読者が、シングルページ、ダブルページ(見開き)を自由に選択できたほうがよい場合もある
IDPF - EPUB 3 Fixed-Layout Documents
page-spread-* プロパティ
見開きの配置指定(左・右・中央)
IDPF - EPUB 3 Fixed-Layout Documents
page-spread-* プロパティ
・page-spread-left プロパティ (左側に配置)・page-spread-right プロパティ (右側に配置)・rendition:page-spread-center (中央に配置)
IDPF - EPUB 3 Fixed-Layout Documents
page-spread-* プロパティ
<itemref id="titlepage" properties="page-spread-right rendition:layout-pre-paginated"/>
IDPF - EPUB 3 Fixed-Layout Documents
page-spread-* プロパティ
<itemref id="titlepage" properties="page-spread-right rendition:layout-pre-paginated"/>
タイトルページは右側に配置する
IDPF - EPUB 3 Fixed-Layout Documents
page-spread-* プロパティ
<itemref id="titlepage" properties="page-spread-right rendition:layout-pre-paginated"/>
spine itemref要素でこのように指定してもよい
IDPF - EPUB 3 Fixed-Layout Documents
<itemref id="titlepage" properties="page-spread-right rendition:layout-pre-paginated"/>
<meta property="rendition:layout">pre-paginated</meta>
補 足
IDPF - EPUB 3 Fixed-Layout Documents
Appendix A. ExamplesEPUB 3 Fixed-Layout Documents
http://idpf.org/epub/fxl/#examples
IDPF - EPUB 3 Fixed-Layout Documents
Example 1
・固定レイアウト・横向きでは合成された見開き・縦向きでは見開きにしない
IDPF - EPUB 3 Fixed-Layout Documents
Example 1
IDPF - EPUB 3 Fixed-Layout Documents
Example 2
・固定レイアウト・合成された見開きにしない・横向きで固定
IDPF - EPUB 3 Fixed-Layout Documents
Example 2
IDPF - EPUB 3 Fixed-Layout Documents
Example 3
・リフローのコンテンツ・タイトルページだけ固定レイアウト・合成された見開きを表示するときは 右側に配置
IDPF - EPUB 3 Fixed-Layout Documents
Example 3
IDPF - EPUB 3 Fixed-Layout Documents
Example 5
・リフローのコンテンツ・固定レイアウトの 右配置ページと左配置ページを 合成された見開きページとして表示・リフローのページも見開き表示のまま
IDPF - EPUB 3 Fixed-Layout Documents
Example 5
IDPF - EPUB 3 Fixed-Layout Documents
Example 7
・固定レイアウト・横向きでは合成された見開き・縦向きでは見開きにしない・進行方向は右から左(日本のマンガ)
IDPF - EPUB 3 Fixed-Layout Documents
Example 7
IDPF - EPUB 3 Fixed-Layout Documents
復 習
EPUB 3 Fixed-Layout Documents
IDPF - EPUB 3 Fixed-Layout Documents
機 能
EPUB 3 Fixed-Layout Documents
対応付け
領 域
IDPF - EPUB 3 Fixed-Layout Documents
・rendition:layout ・rendition:orientation・rendition:spread・page-spread-*
プロパティ
EPUB 3 Fixed-Layout Documents
Prefixマッピング
コンテントディメンションズ
IDPF - EPUB 3 Fixed-Layout Documents
page-blanche-20120314.epub
パッケージドキュメント(.opf)
IDPF - EPUB 3 Fixed-Layout Documents
page-blanche-20120314.epub
IDPF - EPUB 3 Fixed-Layout Documents
page-blanche-20120314.epub
IDPF - EPUB 3 Fixed-Layout Documents
page-blanche-20120314.epub
IDPF - EPUB 3 Fixed-Layout Documents
page-blanche-20120314.epub
コンテンツキュメント(.xhtml)
IDPF - EPUB 3 Fixed-Layout Documents
page-blanche-20120314.epub
XHTMLファイル
IDPF - EPUB 3 Fixed-Layout Documents
page-blanche-20120314.epub
貼付ける画像の準備
EPUB3技術解説セミナー1Readiumで確認
IDPF - EPUB 3 Fixed-Layout Documents
IDPF - EPUB 3 Fixed-Layout Documents
IDPF - EPUB 3 Fixed-Layout Documents
6月12日にアップデートした国産EPUBリーディングシステムのHimawari Reader Proが
EPUB3 固定レイアウトの仕様を実装しました。
追記:
IDPF - EPUB 3 Fixed-Layout Documents
Himawari Reader Prohttps://play.google.com/store/apps/details?id=jp.green_fld.himawari.pro
Android
IDPF - EPUB 3 Fixed-Layout Documents
Himawari Reader Prohttps://play.google.com/store/apps/details?id=jp.green_fld.himawari.pro
Android
IDPF - EPUB 3 Fixed-Layout Documents
Readium mobileにもEPUB3 固定レイアウトの仕様が
実装されました。
追記:
IDPF - EPUB 3 Fixed-Layout Documents
Readium mobileChorme for Android 4.0
http://github.readium.org/
実証状況など情報が頻繁に更新されていますので日付にご注意ください!
この資料は、2012年6月12日現在
の情報です
http://idpf.org/
EPUB3の最新情報はIDPFのサイトで確認してください
Thank you for your attention.ご清聴ありがとうございました
community
電子書籍メディア論http://www.facebook.com/eBookStrategy
デザインの未来http://www.facebook.com/TheFutureDesign