EPUB3 固定レイアウト徹底解説
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 5,789 views

技術解説セミナーで使用したスライド資料の抜粋です。

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

Statistics

Views

Total Views
5,789
Slideshare-icon Views on SlideShare
5,511
Embed Views
278

Actions

Likes
9
Downloads
103
Comments
1

5 Embeds 278

http://fanfanfan.net 247
http://backmemo.com 22
http://180.222.76.252 5
http://pinterest.com 2
http://webcache.googleusercontent.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 最後の方の誤字に気付きました......
    実証状況 → 実装状況

    とりあえず、このままにしておきます。
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • 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/TheFutureDesign
    • テキスト
    • 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などの ラスターグラフィックスが多い・雑誌や凝ったレイアウトの実用書などは、PDFが多い・リフロー形式やテキストや図版を絶対配置する方式と 比較した場合、データサイズが大きくなってしまう
    • 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 Format 8)
    • Fixed-Layout 画像化した紙面を配置・DTPデータからイメージ変換する方法・もしくは、印刷物を取り込み、補正する方法・コミックや写真集、絵本などは、JPEG、PNGなどの ラスターグラフィックスが多い・雑誌や凝ったレイアウトの実用書などは、PDFが多い・リフロー形式やテキストや図版を絶対配置する方式と 比較した場合、データサイズが大きくなってしまう
    • 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/ ダウンロードリスト http://code.google.com/p/epub-samples/downloads/list
    • EPUB3技術解説セミナー1
    • EPUB3技術解説セミナー1
    • 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
    • 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 group が作成・2012年3月13日、IDPF 理事会によって承認
    • 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 & 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 DocumentsEPUB 3 Fixed-Layout Documents 2 1 3
    • IDPF - EPUB 3 Fixed-Layout DocumentsEPUB 3 Fixed-Layout Documents 対応付け 機能 領域
    • IDPF - EPUB 3 Fixed-Layout DocumentsEPUB 3 Fixed-Layout Documentsプロパティ Prefixマッピング・rendition:layout・rendition:orientation コンテント・rendition:spread ディメンションズ・page-spread-*
    • 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マッピング Prefix Mapping prefix属性で URI http://www.idpf.org/vocab/rendition/# にマッピング<package …prefix="rendition: http://www.idpf.org/vocab/rendition/#"></package>
    • 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>
    • IDPF - EPUB 3 Fixed-Layout Documentsコンテント・ディメンションズContent dimensionsmeta要素のviewportで指定PrefixマッピングPrefix Mappingprefix属性で URIhttp://www.idpf.org/vocab/rendition/# にマッピングプロパティの定義Property Definitions
    • IDPF - EPUB 3 Fixed-Layout Documentsコンテント・ディメンションズ XHTMLContent dimensionsmeta要素のviewportで指定Prefixマッピング パッケージドキュメントPrefix Mappingprefix属性で URIhttp://www.idpf.org/vocab/rendition/# にマッピングプロパティの定義 パッケージドキュメントProperty Definitions
    • 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 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
    • 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プロパティ Prefixマッピング・rendition:layout・rendition:orientation コンテント・rendition:spread ディメンションズ・page-spread-*
    • 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プロパティ Prefixマッピング・rendition:layout・rendition:orientation コンテント・rendition:spread ディメンションズ・page-spread-*
    • IDPF - EPUB 3 Fixed-Layout Documents page-blanche-20120314.epubEPUB 3 Fixed-Layout Documentsプロパティ Prefixマッピング・rendition:layout・rendition:orientation コンテント・rendition:spread ディメンションズ・page-spread-*
    • 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 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 Documentsrendition:orientation プロパティ スクリーンの方向(縦・横)
    • IDPF - EPUB 3 Fixed-Layout Documentsrendition: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 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 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-rightrendition:layout-pre-paginated"/>
    • IDPF - EPUB 3 Fixed-Layout Documents page-spread-* プロパティ<itemref id="titlepage"properties="page-spread-rightrendition:layout-pre-paginated"/> タイトルページは右側に配置する
    • IDPF - EPUB 3 Fixed-Layout Documents page-spread-* プロパティ<itemref id="titlepage"properties="page-spread-rightrendition:layout-pre-paginated"/>spine itemref要素でこのように指定してもよい
    • IDPF - EPUB 3 Fixed-Layout Documents 補足<meta property="rendition:layout">pre-paginated</meta><itemref id="titlepage"properties="page-spread-rightrendition:layout-pre-paginated"/>
    • IDPF - EPUB 3 Fixed-Layout DocumentsEPUB 3 Fixed-Layout Documents Appendix A. Examples 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 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:layout・rendition:orientation コンテント・rendition:spread ディメンションズ・page-spread-*
    • 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://play.google.com/store/apps/details?id=jp.green_fld.himawari.pro
    • IDPF - EPUB 3 Fixed-Layout Documents Himawari Reader Pro Androidhttps://play.google.com/store/apps/details?id=jp.green_fld.himawari.pro
    • 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/TheFutureDesign