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

6,864 views
6,672 views

Published on

技術解説セミナーで使用したスライド資料の抜粋です。
この公開バージョンは、スライド枚数を135枚に減らしてします

1 Comment
10 Likes
Statistics
Notes
No Downloads
Views
Total views
6,864
On SlideShare
0
From Embeds
0
Number of Embeds
538
Actions
Shares
0
Downloads
118
Comments
1
Likes
10
Embeds 0
No embeds

No notes for slide

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

  1. 1. EPUB3固定レイアウト解説 2012年6月7日(木)15:00-16:40 境祐司 @commonstyle ¦ 電子書籍メディア論
  2. 2. ※講演資料の一部を抜粋した公開用スライドです
  3. 3. profile YOUJI SAKAIInstructional Designer | eBook Designer 境祐司
  4. 4. BOOKS 最新刊ウェブレイアウトの EPUB3スタンダード Webデザイン基礎 教科書 デザインガイド 改訂3版
  5. 5. community 電子書籍メデ ア論 ィ http://www.facebook.com/eBookStrategy デザインの未来http://www.facebook.com/TheFutureDesign
  6. 6. テキスト
  7. 7. EPUB3技術解説セミナー1本日のテーマ: 固定レイアウト フォント埋め込み ウェブフォント※講演資料の一部を抜粋した公開用スライドです
  8. 8. EPUB3技術解説セミナー1固定レイアウトFixed-Layout
  9. 9. Fixed-Layoutテキストや図版を 画像化した 絶対配置 紙面を配置
  10. 10. Fixed-Layout テキストや図版を絶対配置・座標値を指定してテキストや図版を配置する方法・文字サイズは固定されているものが多い リーディングシステム側で文字サイズの変更ができない・電子書籍のデータサイズは、 リフロー形式の電子書籍とあまり変わらない・テキストの選択や本文検索などは実行できる
  11. 11. Fixed-Layout iPad at Work Volume 2 Apple iBookstore
  12. 12. Fixed-Layout iPad at Work Volume 2 Apple iBookstore
  13. 13. Fixed-Layout 画像化した紙面を配置・DTPデータからイメージ変換する方法・もしくは、印刷物を取り込み、補正する方法・コミックや写真集、絵本などは、JPEG、PNGなどの ラスターグラフィックスが多い・雑誌や凝ったレイアウトの実用書などは、PDFが多い・リフロー形式やテキストや図版を絶対配置する方式と 比較した場合、データサイズが大きくなってしまう
  14. 14. Fixed-Layout .net Apple Newsstand インタラクティブ レプリカ
  15. 15. Fixed-Layout Countrys Best Cabins Amazon Kindle Store プリントレプリカ
  16. 16. Fixed-LayoutThere Was an Old Monkey Who Swallowed a FrogAmazon Kindle Store 固定レイアウト(Kindle Format 8)
  17. 17. Fixed-Layout 画像化した紙面を配置・DTPデータからイメージ変換する方法・もしくは、印刷物を取り込み、補正する方法・コミックや写真集、絵本などは、JPEG、PNGなどの ラスターグラフィックスが多い・雑誌や凝ったレイアウトの実用書などは、PDFが多い・リフロー形式やテキストや図版を絶対配置する方式と 比較した場合、データサイズが大きくなってしまう
  18. 18. Fixed-Layoutテキストや図版を 画像化した 絶対配置 紙面を配置
  19. 19. Fixed-Layoutテキストや図版を 画像化した 絶対配置 紙面を配置
  20. 20. EPUB3技術解説セミナー1固定レイアウトの検証環境
  21. 21. EPUB3技術解説セミナー1 Readium Version 0.3.2 http://readium.org/6月2日リリースのバージョン/Chrome 19.0.1084.54(2012.6.7現在)
  22. 22. EPUB3技術解説セミナー1
  23. 23. EPUB3技術解説セミナー1
  24. 24. EPUB3技術解説セミナー1about:flags
  25. 25. EPUB3技術解説セミナー1
  26. 26. EPUB3技術解説セミナー1 CSS領域を有効にする 「有効にする」をクリック
  27. 27. EPUB3技術解説セミナー1 「今すぐ再起動」をクリック
  28. 28. EPUB3技術解説セミナー1
  29. 29. EPUB3技術解説セミナー1
  30. 30. EPUB3技術解説セミナー1
  31. 31. EPUB3技術解説セミナー1
  32. 32. EPUB3技術解説セミナー1
  33. 33. EPUB3技術解説セミナー1
  34. 34. EPUB3技術解説セミナー1 Readium mobile Chrome for Android 4.0 http://github.readium.org/
  35. 35. EPUB3技術解説セミナー1 Readium mobile Chrome for Android 4.0 http://github.readium.org/
  36. 36. EPUB3技術解説セミナー1公開されているEPUB3固定レイアウトのサンプル epub-samples http://code.google.com/p/epub-samples/ ダウンロードリスト http://code.google.com/p/epub-samples/downloads/list
  37. 37. EPUB3技術解説セミナー1
  38. 38. EPUB3技術解説セミナー1
  39. 39. EPUB3技術解説セミナー1 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
  40. 40. EPUB3技術解説セミナー1EPUB3固定レイアウトのサンプル
  41. 41. EPUB3技術解説セミナー1
  42. 42. IDPF - EPUB 3 Fixed-Layout Documents EPUB 3Fixed-Layout Documents http://idpf.org/epub/fxl/
  43. 43. IDPF - EPUB 3 Fixed-Layout Documents EPUB 3 Fixed-Layout Documents・IDPFの情報文書(Informational Document)・IDPF EPUB working group が作成・2012年3月13日、IDPF 理事会によって承認
  44. 44. IDPF - EPUB 3 Fixed-Layout DocumentsEditors:Markus Gylling - IDPF マーカス・ギリングDave Cramer - Hachette デイヴ・クレイマー
  45. 45. IDPF - EPUB 3 Fixed-Layout DocumentsAuthors: 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) フィードブックス
  46. 46. IDPF - EPUB 3 Fixed-Layout DocumentsEPUB 3 Fixed-Layout Documents 2 1 3
  47. 47. IDPF - EPUB 3 Fixed-Layout DocumentsEPUB 3 Fixed-Layout Documents 対応付け 機能 領域
  48. 48. IDPF - EPUB 3 Fixed-Layout DocumentsEPUB 3 Fixed-Layout Documentsプロパティ Prefixマッピング・rendition:layout・rendition:orientation コンテント・rendition:spread ディメンションズ・page-spread-*
  49. 49. IDPF - EPUB 3 Fixed-Layout Documentsプロパティの定義Property Definitions・rendition:layout プロパティ・rendition:orientation プロパティ・rendition:spread プロパティ・page-spread-* プロパティ
  50. 50. IDPF - EPUB 3 Fixed-Layout Documentsプロパティの定義Property Definitions・リフロー/ページ区切りの指定・スクリーンの方向(縦・横)・見開きの指定・見開きの配置指定(左・右・中央)
  51. 51. IDPF - EPUB 3 Fixed-Layout Documents Prefixマッピング Prefix Mapping prefix属性で URI http://www.idpf.org/vocab/rendition/# にマッピング<package …prefix="rendition: http://www.idpf.org/vocab/rendition/#"></package>
  52. 52. IDPF - EPUB 3 Fixed-Layout Documents コンテント・ディメンションズ Content dimensions meta要素のviewportで指定<head><meta name="viewport" content="width=1200, height=600" /></head><head><meta name="viewport" content="width=512, height=600" /></head>
  53. 53. IDPF - EPUB 3 Fixed-Layout Documentsコンテント・ディメンションズContent dimensionsmeta要素のviewportで指定PrefixマッピングPrefix Mappingprefix属性で URIhttp://www.idpf.org/vocab/rendition/# にマッピングプロパティの定義Property Definitions
  54. 54. IDPF - EPUB 3 Fixed-Layout Documentsコンテント・ディメンションズ XHTMLContent dimensionsmeta要素のviewportで指定Prefixマッピング パッケージドキュメントPrefix Mappingprefix属性で URIhttp://www.idpf.org/vocab/rendition/# にマッピングプロパティの定義 パッケージドキュメントProperty Definitions
  55. 55. IDPF - EPUB 3 Fixed-Layout Documentsサンプルファイルを確認 epub-samples http://code.google.com/p/epub-samples/
  56. 56. IDPF - EPUB 3 Fixed-Layout Documents 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
  57. 57. IDPF - EPUB 3 Fixed-Layout Documents page-blanche-20120314.epub
  58. 58. IDPF - EPUB 3 Fixed-Layout Documents page-blanche-20120314.epub 解凍
  59. 59. IDPF - EPUB 3 Fixed-Layout Documents page-blanche-20120314.epub
  60. 60. IDPF - EPUB 3 Fixed-Layout Documents page-blanche-20120314.epub
  61. 61. IDPF - EPUB 3 Fixed-Layout Documents page-blanche-20120314.epub Image
  62. 62. IDPF - EPUB 3 Fixed-Layout Documents page-blanche-20120314.epub Text
  63. 63. IDPF - EPUB 3 Fixed-Layout Documents page-blanche-20120314.epub Style
  64. 64. IDPF - EPUB 3 Fixed-Layout Documents page-blanche-20120314.epubパッケージドキュメント(.opf)
  65. 65. IDPF - EPUB 3 Fixed-Layout Documents page-blanche-20120314.epub
  66. 66. IDPF - EPUB 3 Fixed-Layout Documents page-blanche-20120314.epubEPUB 3 Fixed-Layout Documentsプロパティ Prefixマッピング・rendition:layout・rendition:orientation コンテント・rendition:spread ディメンションズ・page-spread-*
  67. 67. IDPF - EPUB 3 Fixed-Layout Documents page-blanche-20120314.epub
  68. 68. IDPF - EPUB 3 Fixed-Layout Documents page-blanche-20120314.epubコンテンツキュメント(.xhtml)
  69. 69. IDPF - EPUB 3 Fixed-Layout Documents page-blanche-20120314.epub 6ページ目のXHTMLファイル
  70. 70. IDPF - EPUB 3 Fixed-Layout Documents page-blanche-20120314.epub 1200 1577px
  71. 71. IDPF - EPUB 3 Fixed-Layout Documents page-blanche-20120314.epubEPUB 3 Fixed-Layout Documentsプロパティ Prefixマッピング・rendition:layout・rendition:orientation コンテント・rendition:spread ディメンションズ・page-spread-*
  72. 72. IDPF - EPUB 3 Fixed-Layout Documents page-blanche-20120314.epubEPUB 3 Fixed-Layout Documentsプロパティ Prefixマッピング・rendition:layout・rendition:orientation コンテント・rendition:spread ディメンションズ・page-spread-*
  73. 73. IDPF - EPUB 3 Fixed-Layout Documentsプロパティの定義 Property Definitions
  74. 74. IDPF - EPUB 3 Fixed-Layout Documentsrendition:layout プロパティリフロー/ページ区切りの指定
  75. 75. IDPF - EPUB 3 Fixed-Layout Documents rendition:layout プロパティ・reflowable(リフロー)・pre-paginated(ページ区切り)
  76. 76. IDPF - EPUB 3 Fixed-Layout Documents rendition:layout プロパティ ・reflowable(リフロー) ・pre-paginated(ページ区切り)<meta property="rendition:layout">reflowable</meta><meta property="rendition:layout">pre-paginated</meta>
  77. 77. IDPF - EPUB 3 Fixed-Layout Documents page-blanche-20120314.epubパッケージドキュメント(.opf)
  78. 78. IDPF - EPUB 3 Fixed-Layout Documents page-blanche-20120314.epub
  79. 79. IDPF - EPUB 3 Fixed-Layout Documentsrendition:orientation プロパティ スクリーンの方向(縦・横)
  80. 80. IDPF - EPUB 3 Fixed-Layout Documentsrendition:orientation プロパティ・landscape(横方向)・portrait(縦方向)・auto(制限なし)
  81. 81. IDPF - EPUB 3 Fixed-Layout Documents rendition:orientation プロパティ ・landscape(横方向) ・portrait(縦方向) ・auto(制限なし)<meta property="rendition:orientation">landscape</meta><meta property="rendition:orientation">portrait</meta>
  82. 82. IDPF - EPUB 3 Fixed-Layout Documents page-blanche-20120314.epubパッケージドキュメント(.opf)
  83. 83. IDPF - EPUB 3 Fixed-Layout Documents page-blanche-20120314.epub
  84. 84. IDPF - EPUB 3 Fixed-Layout Documentsrendition:spread プロパティ 見開きの指定
  85. 85. IDPF - EPUB 3 Fixed-Layout Documentsrendition:spread プロパティ・none・landscape(横方向のみ)・portrait(縦方向のみ)・both(横方向・縦方向)・auto(制限なし)
  86. 86. 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>
  87. 87. IDPF - EPUB 3 Fixed-Layout Documents page-blanche-20120314.epubパッケージドキュメント(.opf)
  88. 88. IDPF - EPUB 3 Fixed-Layout Documents page-blanche-20120314.epub
  89. 89. IDPF - EPUB 3 Fixed-Layout Documents
  90. 90. IDPF - EPUB 3 Fixed-Layout Documents
  91. 91. IDPF - EPUB 3 Fixed-Layout Documents
  92. 92. IDPF - EPUB 3 Fixed-Layout Documents Double Pages
  93. 93. IDPF - EPUB 3 Fixed-Layout Documents
  94. 94. IDPF - EPUB 3 Fixed-Layout Documents例:ランドスケープモード(横向き)にすると見開きで表示される
  95. 95. IDPF - EPUB 3 Fixed-Layout Documents例:ランドスケープモード(横向き)にすると見開きで表示されるランドスケープモード(横向き)では、見開きではなく、シングルページの拡大表示で読みたい、という読者もいる
  96. 96. IDPF - EPUB 3 Fixed-Layout Documents読者が、シングルページ、ダブルページ(見開き)を自由に選択できたほうがよい場合もある
  97. 97. IDPF - EPUB 3 Fixed-Layout Documents page-spread-* プロパティ見開きの配置指定(左・右・中央)
  98. 98. IDPF - EPUB 3 Fixed-Layout Documents page-spread-* プロパティ・page-spread-left プロパティ(左側に配置)・page-spread-right プロパティ(右側に配置)・rendition:page-spread-center(中央に配置)
  99. 99. IDPF - EPUB 3 Fixed-Layout Documents page-spread-* プロパティ<itemref id="titlepage"properties="page-spread-rightrendition:layout-pre-paginated"/>
  100. 100. IDPF - EPUB 3 Fixed-Layout Documents page-spread-* プロパティ<itemref id="titlepage"properties="page-spread-rightrendition:layout-pre-paginated"/> タイトルページは右側に配置する
  101. 101. IDPF - EPUB 3 Fixed-Layout Documents page-spread-* プロパティ<itemref id="titlepage"properties="page-spread-rightrendition:layout-pre-paginated"/>spine itemref要素でこのように指定してもよい
  102. 102. IDPF - EPUB 3 Fixed-Layout Documents 補足<meta property="rendition:layout">pre-paginated</meta><itemref id="titlepage"properties="page-spread-rightrendition:layout-pre-paginated"/>
  103. 103. IDPF - EPUB 3 Fixed-Layout DocumentsEPUB 3 Fixed-Layout Documents Appendix A. Examples http://idpf.org/epub/fxl/#examples
  104. 104. IDPF - EPUB 3 Fixed-Layout Documents Example 1・固定レイアウト・横向きでは合成された見開き・縦向きでは見開きにしない
  105. 105. IDPF - EPUB 3 Fixed-Layout Documents Example 1
  106. 106. IDPF - EPUB 3 Fixed-Layout Documents Example 2・固定レイアウト・合成された見開きにしない・横向きで固定
  107. 107. IDPF - EPUB 3 Fixed-Layout Documents Example 2
  108. 108. IDPF - EPUB 3 Fixed-Layout Documents Example 3・リフローのコンテンツ・タイトルページだけ固定レイアウト・合成された見開きを表示するときは 右側に配置
  109. 109. IDPF - EPUB 3 Fixed-Layout Documents Example 3
  110. 110. IDPF - EPUB 3 Fixed-Layout Documents Example 5・リフローのコンテンツ・固定レイアウトの 右配置ページと左配置ページを 合成された見開きページとして表示・リフローのページも見開き表示のまま
  111. 111. IDPF - EPUB 3 Fixed-Layout Documents Example 5
  112. 112. IDPF - EPUB 3 Fixed-Layout Documents Example 7・固定レイアウト・横向きでは合成された見開き・縦向きでは見開きにしない・進行方向は右から左(日本のマンガ)
  113. 113. IDPF - EPUB 3 Fixed-Layout Documents Example 7
  114. 114. IDPF - EPUB 3 Fixed-Layout DocumentsEPUB 3 Fixed-Layout Documents 復習
  115. 115. IDPF - EPUB 3 Fixed-Layout DocumentsEPUB 3 Fixed-Layout Documents 対応付け 機能 領域
  116. 116. IDPF - EPUB 3 Fixed-Layout DocumentsEPUB 3 Fixed-Layout Documentsプロパティ Prefixマッピング・rendition:layout・rendition:orientation コンテント・rendition:spread ディメンションズ・page-spread-*
  117. 117. IDPF - EPUB 3 Fixed-Layout Documents page-blanche-20120314.epubパッケージドキュメント(.opf)
  118. 118. IDPF - EPUB 3 Fixed-Layout Documents page-blanche-20120314.epub
  119. 119. IDPF - EPUB 3 Fixed-Layout Documents page-blanche-20120314.epub
  120. 120. IDPF - EPUB 3 Fixed-Layout Documents page-blanche-20120314.epub
  121. 121. IDPF - EPUB 3 Fixed-Layout Documents page-blanche-20120314.epubコンテンツキュメント(.xhtml)
  122. 122. IDPF - EPUB 3 Fixed-Layout Documents page-blanche-20120314.epub XHTMLファイル
  123. 123. IDPF - EPUB 3 Fixed-Layout Documents page-blanche-20120314.epub 貼付ける画像の準備
  124. 124. EPUB3技術解説セミナー1 Readiumで確認
  125. 125. IDPF - EPUB 3 Fixed-Layout Documents
  126. 126. IDPF - EPUB 3 Fixed-Layout Documents
  127. 127. IDPF - EPUB 3 Fixed-Layout Documents追記: 6月12日にアップデートした 国産EPUBリーディングシステムの Himawari Reader Proが EPUB3 固定レイアウトの仕様を 実装しました。
  128. 128. IDPF - EPUB 3 Fixed-Layout Documents Himawari Reader Pro Androidhttps://play.google.com/store/apps/details?id=jp.green_fld.himawari.pro
  129. 129. IDPF - EPUB 3 Fixed-Layout Documents Himawari Reader Pro Androidhttps://play.google.com/store/apps/details?id=jp.green_fld.himawari.pro
  130. 130. IDPF - EPUB 3 Fixed-Layout Documents追記: Readium mobileにも EPUB3 固定レイアウトの仕様が 実装されました。
  131. 131. IDPF - EPUB 3 Fixed-Layout Documents Readium mobile Chorme for Android 4.0 http://github.readium.org/
  132. 132. 実証状況など情報が頻繁に更新されていますので 日付にご注意ください! この資料は、 2012年6月12日現在 の情報です
  133. 133. EPUB3の最新情報はIDPFのサイトで確認してください http://idpf.org/
  134. 134. Thank you for your attention. ご清聴ありがとうございました
  135. 135. community 電子書籍メデ ア論 ィ http://www.facebook.com/eBookStrategy デザインの未来http://www.facebook.com/TheFutureDesign

×