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

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

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

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

YOUJI SAKAIInstructional Designer | eBook Designer

境祐司

profile

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

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

Webデザイン基礎改訂３版

最新刊

community

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

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

テキスト

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

EPUB3技術解説セミナー1

本日のテーマ：

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

Fixed-Layout固定レイアウト

Fixed-Layout

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

画像化した紙面を配置

Fixed-Layout

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

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

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

Readium Version 0.3.2

http://readium.org/

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

about:flags

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

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

Readium mobileChrome for Android 4.0

http://github.readium.org/

Readium mobileChrome for Android 4.0

epub-samples

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

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

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

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

機能

対応付け

領域

・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属性で URI http://www.idpf.org/vocab/rendition/# にマッピング

Content dimensions

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

meta要素のviewportで指定

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

Prefix MappingPrefixマッピング

Property Definitionsプロパティの定義

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

Prefix MappingPrefixマッピング

パッケージドキュメント

サンプルファイルを確認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

解凍

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

プロパティ

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

6ページ目のXHTMLファイル

1200×1577px

プロパティ

rendition:layout プロパティ

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

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

rendition:orientation プロパティ

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

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

rendition:spread プロパティ

見開きの指定

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

Double Pages

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

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

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

page-spread-* プロパティ

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

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

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

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

補足

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

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

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

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

の情報です

http://idpf.org/

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

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

community

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

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

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

Documents

ePub3 with PubCoder

JAグリーン B4うらレイアウトTitle JAグリーン_B4うらレイアウト Created Date 11/10/2017 9:39:37 AM

Salesforce と kintone 徹底比較

AutoCAD2006 マニュアル（レイアウトから出力ま …...AutoCAD2006 マニュアル（レイアウトから出力まで） 2006.07.09 ©ITAILAB -1 - 目次レイアウト

EPUB3 Now! at IDPF 2013 Digital Book

レイアウト改善～セル生産設問編 - 日本能率協会レイアウト改善～セル生産設問編 1，経営改善とレイアウト最適化の意義 2，レイアウト～ユニットセル最適化改善の基本

iOSレイアウト制約＝constraints について

RHEL7/CentOS7 NetworkManager徹底入門

PANORAMA DAS PUBLICAÇÕES DIGITAIS · 12/out/17. C O M O É HOJE. O FORMATO EPUB3 É UM HTML5 DOMESTICADO. O FORMATO EPUB3 ... (2016) fonte: FIPE 1,09% aumento vendas indies 2015

Nic Gibson - ePub3: how did we get here

Auto CAD 2011 マニュアル（レイアウトから出力ま …...Auto CAD 2011 マニュアル（レイアウトから出力まで）目次レイアウト p1 テキスト設定

なぜ「レイアウト」がいいのか？ - Autodesk...© 2011 Autodesk, Inc. レイアウトの使用ビューポートを配置して、図面レイアウトを作成、印刷

PHP AST 徹底解説

Poster / Exhibition Hall Layout ポスター・展示会場レイアウトPoster / Exhibition Hall Layout ポスター・展示会場レイアウト 63 1F イベントホール Event

Sencha Architect 3.1 徹底解説

集積回路工学 - TopPage - コンピュータアーキテク …sasaki/lecture/ICEng/PDF/VLSI...1 1 集積回路工学 9.レイアウト P 3 レイアウトとは？レイアウトとは、トランジスタや配線等の回路

#CEDEC2012 JavaScriptベースゲームエンジン徹底比較

Contact form 7レイアウト編集

徹底比較!! Heliosearch vs Solr

Sitecore におけるレイアウトの考え方