EPUB3固定レイアウト解説  2012年6月7日(木)15:00-16:40           境祐司   @commonstyle ¦ 電子書籍メディア論
※講演資料の一部を抜粋した公開用スライドです
profile          YOUJI SAKAIInstructional Designer | eBook Designer                境祐司
BOOKS               最新刊ウェブレイアウトの   EPUB3スタンダード   Webデザイン基礎   教科書        デザインガイド        改訂3版
community       電子書籍メデ ア論             ィ http://www.facebook.com/eBookStrategy         デザインの未来http://www.facebook.com/TheFu...
テキスト
EPUB3技術解説セミナー1本日のテーマ:      固定レイアウト      フォント埋め込み      ウェブフォント※講演資料の一部を抜粋した公開用スライドです
EPUB3技術解説セミナー1固定レイアウトFixed-Layout
Fixed-Layoutテキストや図版を    画像化した  絶対配置      紙面を配置
Fixed-Layout      テキストや図版を絶対配置・座標値を指定してテキストや図版を配置する方法・文字サイズは固定されているものが多い リーディングシステム側で文字サイズの変更ができない・電子書籍のデータサイズは、 リフロー形式の電子...
Fixed-Layout               iPad at Work               Volume 2               Apple iBookstore
Fixed-Layout               iPad at Work               Volume 2               Apple iBookstore
Fixed-Layout       画像化した紙面を配置・DTPデータからイメージ変換する方法・もしくは、印刷物を取り込み、補正する方法・コミックや写真集、絵本などは、JPEG、PNGなどの ラスターグラフィックスが多い・雑誌や凝ったレイアウ...
Fixed-Layout               .net               Apple Newsstand               インタラクティブ               レプリカ
Fixed-Layout        Countrys Best Cabins        Amazon Kindle Store        プリントレプリカ
Fixed-LayoutThere Was an Old Monkey Who Swallowed a FrogAmazon Kindle Store                             固定レイアウト(Kindle For...
Fixed-Layout       画像化した紙面を配置・DTPデータからイメージ変換する方法・もしくは、印刷物を取り込み、補正する方法・コミックや写真集、絵本などは、JPEG、PNGなどの ラスターグラフィックスが多い・雑誌や凝ったレイアウ...
Fixed-Layoutテキストや図版を    画像化した  絶対配置      紙面を配置
Fixed-Layoutテキストや図版を    画像化した  絶対配置      紙面を配置
EPUB3技術解説セミナー1固定レイアウトの検証環境
EPUB3技術解説セミナー1 Readium Version 0.3.2                http://readium.org/6月2日リリースのバージョン/Chrome 19.0.1084.54(2012.6.7現在)
EPUB3技術解説セミナー1
EPUB3技術解説セミナー1
EPUB3技術解説セミナー1about:flags
EPUB3技術解説セミナー1
EPUB3技術解説セミナー1        CSS領域を有効にする        「有効にする」をクリック
EPUB3技術解説セミナー1       「今すぐ再起動」をクリック
EPUB3技術解説セミナー1
EPUB3技術解説セミナー1
EPUB3技術解説セミナー1
EPUB3技術解説セミナー1
EPUB3技術解説セミナー1
EPUB3技術解説セミナー1
EPUB3技術解説セミナー1          Readium mobile               Chrome for Android 4.0            http://github.readium.org/
EPUB3技術解説セミナー1          Readium mobile               Chrome for Android 4.0            http://github.readium.org/
EPUB3技術解説セミナー1公開されているEPUB3固定レイアウトのサンプル        epub-samples         http://code.google.com/p/epub-samples/              ダウン...
EPUB3技術解説セミナー1
EPUB3技術解説セミナー1
EPUB3技術解説セミナー1            EPUB3固定レイアウトのサンプルharuko-html-jpeg-20120524.epubFixed layout manga, jpeg embedded in xhtmlharuko-...
EPUB3技術解説セミナー1EPUB3固定レイアウトのサンプル
EPUB3技術解説セミナー1
IDPF - EPUB 3 Fixed-Layout Documents   EPUB 3Fixed-Layout Documents       http://idpf.org/epub/fxl/
IDPF - EPUB 3 Fixed-Layout Documents EPUB 3 Fixed-Layout Documents・IDPFの情報文書(Informational Document)・IDPF EPUB working gro...
IDPF - EPUB 3 Fixed-Layout DocumentsEditors:Markus Gylling - IDPF      マーカス・ギリングDave Cramer - Hachette      デイヴ・クレイマー
IDPF - EPUB 3 Fixed-Layout DocumentsAuthors:  Takeshi Kanai (Sony) ソニー  Peter Sorotokin (Adobe) アドビ  Roger Webster (Barnes...
IDPF - EPUB 3 Fixed-Layout DocumentsEPUB 3 Fixed-Layout Documents                                      2      1           ...
IDPF - EPUB 3 Fixed-Layout DocumentsEPUB 3 Fixed-Layout Documents                                  対応付け   機能              ...
IDPF - EPUB 3 Fixed-Layout DocumentsEPUB 3 Fixed-Layout Documentsプロパティ                             Prefixマッピング・rendition:la...
IDPF - EPUB 3 Fixed-Layout Documentsプロパティの定義Property Definitions・rendition:layout プロパティ・rendition:orientation プロパティ・renditi...
IDPF - EPUB 3 Fixed-Layout Documentsプロパティの定義Property Definitions・リフロー/ページ区切りの指定・スクリーンの方向(縦・横)・見開きの指定・見開きの配置指定(左・右・中央)
IDPF - EPUB 3 Fixed-Layout Documents     Prefixマッピング     Prefix Mapping     prefix属性で URI     http://www.idpf.org/vocab/rendi...
IDPF - EPUB 3 Fixed-Layout Documents   コンテント・ディメンションズ    Content dimensions   meta要素のviewportで指定<head><meta name="viewport...
IDPF - EPUB 3 Fixed-Layout Documentsコンテント・ディメンションズContent dimensionsmeta要素のviewportで指定PrefixマッピングPrefix Mappingprefix属性で URIh...
IDPF - EPUB 3 Fixed-Layout Documentsコンテント・ディメンションズ                                  XHTMLContent dimensionsmeta要素のviewport...
IDPF - EPUB 3 Fixed-Layout Documentsサンプルファイルを確認  epub-samples   http://code.google.com/p/epub-samples/
IDPF - EPUB 3 Fixed-Layout Documents            EPUB3固定レイアウトのサンプルharuko-html-jpeg-20120524.epubFixed layout manga, jpeg em...
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.epubEPUB 3 Fixed-Layout Documentsプロパティ              ...
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.epubEPUB 3 Fixed-Layout Documentsプロパティ              ...
IDPF - EPUB 3 Fixed-Layout Documents            page-blanche-20120314.epubEPUB 3 Fixed-Layout Documentsプロパティ              ...
IDPF - EPUB 3 Fixed-Layout Documentsプロパティの定義        Property Definitions
IDPF - EPUB 3 Fixed-Layout Documentsrendition:layout プロパティリフロー/ページ区切りの指定
IDPF - EPUB 3 Fixed-Layout Documents rendition:layout プロパティ・reflowable(リフロー)・pre-paginated(ページ区切り)
IDPF - EPUB 3 Fixed-Layout Documents        rendition:layout プロパティ     ・reflowable(リフロー)     ・pre-paginated(ページ区切り)<meta pr...
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 Documentsrendition:orientation プロパティ  スクリーンの方向(縦・横)
IDPF - EPUB 3 Fixed-Layout Documentsrendition:orientation プロパティ・landscape(横方向)・portrait(縦方向)・auto(制限なし)
IDPF - EPUB 3 Fixed-Layout Documents     rendition:orientation プロパティ     ・landscape(横方向)     ・portrait(縦方向)     ・auto(制限なし...
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 Documentsrendition:spread プロパティ          見開きの指定
IDPF - EPUB 3 Fixed-Layout Documentsrendition:spread プロパティ・none・landscape(横方向のみ)・portrait(縦方向のみ)・both(横方向・縦方向)・auto(制限なし)
IDPF - EPUB 3 Fixed-Layout Documents      rendition:spread プロパティ<meta property="rendition:spread">landscape</meta><meta pr...
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 プロパティ(右側に配置)・rend...
IDPF - EPUB 3 Fixed-Layout Documents  page-spread-* プロパティ<itemref id="titlepage"properties="page-spread-rightrendition:lay...
IDPF - EPUB 3 Fixed-Layout Documents  page-spread-* プロパティ<itemref id="titlepage"properties="page-spread-rightrendition:lay...
IDPF - EPUB 3 Fixed-Layout Documents  page-spread-* プロパティ<itemref id="titlepage"properties="page-spread-rightrendition:lay...
IDPF - EPUB 3 Fixed-Layout Documents                  補足<meta property="rendition:layout">pre-paginated</meta><itemref id=...
IDPF - EPUB 3 Fixed-Layout DocumentsEPUB 3 Fixed-Layout Documents   Appendix A. Examples          http://idpf.org/epub/fxl...
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 DocumentsEPUB 3 Fixed-Layout Documents                 復習
IDPF - EPUB 3 Fixed-Layout DocumentsEPUB 3 Fixed-Layout Documents                                  対応付け   機能              ...
IDPF - EPUB 3 Fixed-Layout DocumentsEPUB 3 Fixed-Layout Documentsプロパティ                             Prefixマッピング・rendition:la...
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技術解説セミナー1  Readiumで確認
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 Pro                                              Androidhttps://pla...
IDPF - EPUB 3 Fixed-Layout Documents   Himawari Reader Pro                                              Androidhttps://pla...
IDPF - EPUB 3 Fixed-Layout Documents追記:      Readium mobileにも  EPUB3 固定レイアウトの仕様が          実装されました。
IDPF - EPUB 3 Fixed-Layout Documents   Readium mobile        Chorme for Android 4.0          http://github.readium.org/
実証状況など情報が頻繁に更新されていますので     日付にご注意ください!        この資料は、     2012年6月12日現在         の情報です
EPUB3の最新情報はIDPFのサイトで確認してください    http://idpf.org/
Thank you for your attention.  ご清聴ありがとうございました
community       電子書籍メデ ア論             ィ http://www.facebook.com/eBookStrategy         デザインの未来http://www.facebook.com/TheFu...
Upcoming SlideShare
Loading in …5
×

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

7,045 views

Published on

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

1 Comment
10 Likes
Statistics
Notes
No Downloads
Views
Total views
7,045
On SlideShare
0
From Embeds
0
Number of Embeds
544
Actions
Shares
0
Downloads
119
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

×