SlideShare une entreprise Scribd logo
1  sur  135
Télécharger pour lire hors ligne
EPUB3固定レイアウト解説
  2012年6月7日(木)15:00-16:40




           境祐司
   @commonstyle ¦ 電子書籍メディア論
※講演資料の一部を抜粋した公開用スライドです
profile




          YOUJI SAKAI
Instructional 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
        Country's Best Cabins
        Amazon Kindle Store

        プリントレプリカ
Fixed-Layout
There Was an Old Monkey Who Swallowed a Frog
Amazon 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技術解説セミナー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 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.epub
Fixed layout manga, jpeg embedded in xhtml
haruko-jpeg-20120524.epub
Fixed layout manga, jpeg directly in the spine
sous-le-vent_svg-in-spine-20120418.epub
fixed-layout document, using SVG in spine
svg-in-spine-20120417.epub
fixed-layout document, using SVG in spine
sous-le-vent-20120403.epub
fixed-layout document, using SVG embedded in XHTML
cole-voyage-of-life-20120320.epub
reflowable content with interspersed fixed-layout pages
page-blanche-20120314.epub
fixed layout document, using XHTML spine items that embed bitmaps
EPUB3技術解説セミナー1

EPUB3固定レイアウトのサンプル
EPUB3技術解説セミナー1
IDPF - EPUB 3 Fixed-Layout Documents




   EPUB 3
Fixed-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 Documents




Editors:

Markus Gylling - IDPF
      マーカス・ギリング


Dave 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




EPUB 3 Fixed-Layout Documents


                                      2
      1
                                      3
IDPF - EPUB 3 Fixed-Layout Documents




EPUB 3 Fixed-Layout Documents


                                  対応付け

   機能
                                   領域
IDPF - EPUB 3 Fixed-Layout Documents




EPUB 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 dimensions

meta要素のviewportで指定


Prefixマッピング
Prefix Mapping

prefix属性で URI
http://www.idpf.org/vocab/rendition/# にマッピング


プロパティの定義
Property Definitions
IDPF - EPUB 3 Fixed-Layout Documents



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

meta要素のviewportで指定


Prefixマッピング                              パッケージドキュメント
Prefix Mapping

prefix属性で URI
http://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.epub
Fixed layout manga, jpeg embedded in xhtml
haruko-jpeg-20120524.epub
Fixed layout manga, jpeg directly in the spine
sous-le-vent_svg-in-spine-20120418.epub
fixed-layout document, using SVG in spine
svg-in-spine-20120417.epub
fixed-layout document, using SVG in spine
sous-le-vent-20120403.epub
fixed-layout document, using SVG embedded in XHTML
cole-voyage-of-life-20120320.epub
reflowable content with interspersed fixed-layout pages
page-blanche-20120314.epub
fixed 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.epub


EPUB 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.epub


EPUB 3 Fixed-Layout Documents


プロパティ                             Prefixマッピング

・rendition:layout
・rendition:orientation
                                   コンテント
・rendition:spread
                                 ディメンションズ
・page-spread-*
IDPF - EPUB 3 Fixed-Layout Documents

            page-blanche-20120314.epub


EPUB 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 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


                  補足

<meta property="rendition:layout">
pre-paginated
</meta>


<itemref id="titlepage"
properties="page-spread-right
rendition:layout-pre-paginated"/>
IDPF - EPUB 3 Fixed-Layout Documents




EPUB 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 Documents




EPUB 3 Fixed-Layout Documents


                 復習
IDPF - EPUB 3 Fixed-Layout Documents




EPUB 3 Fixed-Layout Documents


                                  対応付け

   機能
                                   領域
IDPF - EPUB 3 Fixed-Layout Documents




EPUB 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                                              Android
https://play.google.com/store/apps/details?id=jp.green_fld.himawari.pro
IDPF - EPUB 3 Fixed-Layout Documents


   Himawari Reader Pro                                              Android
https://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

Contenu connexe

Tendances

OSC2012Kansai@Kyoto 自宅SAN友の会 - インフラエンジニアなら知っておきたい ストレージのはなし
OSC2012Kansai@Kyoto 自宅SAN友の会 - インフラエンジニアなら知っておきたい ストレージのはなしOSC2012Kansai@Kyoto 自宅SAN友の会 - インフラエンジニアなら知っておきたい ストレージのはなし
OSC2012Kansai@Kyoto 自宅SAN友の会 - インフラエンジニアなら知っておきたい ストレージのはなしSatoshi Shimazaki
 
プログラマ目線で見た “The DAO事件” とは
プログラマ目線で見た “The DAO事件” とはプログラマ目線で見た “The DAO事件” とは
プログラマ目線で見た “The DAO事件” とはYuto Takei
 
20130601わんくま「序hpcクラスターを作ろう!まずはオンプレで」公開用
20130601わんくま「序hpcクラスターを作ろう!まずはオンプレで」公開用20130601わんくま「序hpcクラスターを作ろう!まずはオンプレで」公開用
20130601わんくま「序hpcクラスターを作ろう!まずはオンプレで」公開用幸智 Yukinori 黒田 Kuroda
 
Hubs Cloud研究-公開リポジトリを中心に-
Hubs Cloud研究-公開リポジトリを中心に-Hubs Cloud研究-公開リポジトリを中心に-
Hubs Cloud研究-公開リポジトリを中心に-GREE VR Studio Lab
 
Man-in-the-Middle Attack for SSH with Scala and JSch
Man-in-the-Middle Attack for SSH with Scala and JSchMan-in-the-Middle Attack for SSH with Scala and JSch
Man-in-the-Middle Attack for SSH with Scala and JSchAtsuhiko Yamanaka
 
ドメイン駆動設計 実践ガイド
ドメイン駆動設計 実践ガイドドメイン駆動設計 実践ガイド
ドメイン駆動設計 実践ガイド増田 亨
 
ジョブ管理でcronは限界があったので”Rundeck”を使ってハッピーになりました
ジョブ管理でcronは限界があったので”Rundeck”を使ってハッピーになりましたジョブ管理でcronは限界があったので”Rundeck”を使ってハッピーになりました
ジョブ管理でcronは限界があったので”Rundeck”を使ってハッピーになりましたYukiya Hayashi
 
Nettoyer et transformer ses données avec Openrefine : partie 2
Nettoyer et transformer ses données avec Openrefine : partie 2Nettoyer et transformer ses données avec Openrefine : partie 2
Nettoyer et transformer ses données avec Openrefine : partie 2Mathieu Saby
 
Btrfs + Snapper + Samba で作る「以前のバージョン」に戻せるファイルサーバー
Btrfs + Snapper + Samba で作る「以前のバージョン」に戻せるファイルサーバーBtrfs + Snapper + Samba で作る「以前のバージョン」に戻せるファイルサーバー
Btrfs + Snapper + Samba で作る「以前のバージョン」に戻せるファイルサーバーFuminobu Takeyama
 
Embulk, an open-source plugin-based parallel bulk data loader
Embulk, an open-source plugin-based parallel bulk data loaderEmbulk, an open-source plugin-based parallel bulk data loader
Embulk, an open-source plugin-based parallel bulk data loaderSadayuki Furuhashi
 
これだけ知っときゃなんとかなるVim
これだけ知っときゃなんとかなるVimこれだけ知っときゃなんとかなるVim
これだけ知っときゃなんとかなるVimarisu yano
 
Les bases de l'HTML / CSS
Les bases de l'HTML / CSSLes bases de l'HTML / CSS
Les bases de l'HTML / CSSSamuel Robert
 
DDD 20121106 SEA Forum November
DDD 20121106 SEA Forum NovemberDDD 20121106 SEA Forum November
DDD 20121106 SEA Forum November増田 亨
 

Tendances (20)

Docker Swarm入門
Docker Swarm入門Docker Swarm入門
Docker Swarm入門
 
OSC2012Kansai@Kyoto 自宅SAN友の会 - インフラエンジニアなら知っておきたい ストレージのはなし
OSC2012Kansai@Kyoto 自宅SAN友の会 - インフラエンジニアなら知っておきたい ストレージのはなしOSC2012Kansai@Kyoto 自宅SAN友の会 - インフラエンジニアなら知っておきたい ストレージのはなし
OSC2012Kansai@Kyoto 自宅SAN友の会 - インフラエンジニアなら知っておきたい ストレージのはなし
 
プログラマ目線で見た “The DAO事件” とは
プログラマ目線で見た “The DAO事件” とはプログラマ目線で見た “The DAO事件” とは
プログラマ目線で見た “The DAO事件” とは
 
20130601わんくま「序hpcクラスターを作ろう!まずはオンプレで」公開用
20130601わんくま「序hpcクラスターを作ろう!まずはオンプレで」公開用20130601わんくま「序hpcクラスターを作ろう!まずはオンプレで」公開用
20130601わんくま「序hpcクラスターを作ろう!まずはオンプレで」公開用
 
Hubs Cloud研究-公開リポジトリを中心に-
Hubs Cloud研究-公開リポジトリを中心に-Hubs Cloud研究-公開リポジトリを中心に-
Hubs Cloud研究-公開リポジトリを中心に-
 
Man-in-the-Middle Attack for SSH with Scala and JSch
Man-in-the-Middle Attack for SSH with Scala and JSchMan-in-the-Middle Attack for SSH with Scala and JSch
Man-in-the-Middle Attack for SSH with Scala and JSch
 
ドメイン駆動設計 実践ガイド
ドメイン駆動設計 実践ガイドドメイン駆動設計 実践ガイド
ドメイン駆動設計 実践ガイド
 
eBPFを用いたトレーシングについて
eBPFを用いたトレーシングについてeBPFを用いたトレーシングについて
eBPFを用いたトレーシングについて
 
FJcloud-Vの無料トライアルで雑にWordPressを入れてみた(リベンジ)
FJcloud-Vの無料トライアルで雑にWordPressを入れてみた(リベンジ)FJcloud-Vの無料トライアルで雑にWordPressを入れてみた(リベンジ)
FJcloud-Vの無料トライアルで雑にWordPressを入れてみた(リベンジ)
 
ジョブ管理でcronは限界があったので”Rundeck”を使ってハッピーになりました
ジョブ管理でcronは限界があったので”Rundeck”を使ってハッピーになりましたジョブ管理でcronは限界があったので”Rundeck”を使ってハッピーになりました
ジョブ管理でcronは限界があったので”Rundeck”を使ってハッピーになりました
 
B-link-tree
B-link-treeB-link-tree
B-link-tree
 
Nettoyer et transformer ses données avec Openrefine : partie 2
Nettoyer et transformer ses données avec Openrefine : partie 2Nettoyer et transformer ses données avec Openrefine : partie 2
Nettoyer et transformer ses données avec Openrefine : partie 2
 
これがCassandra
これがCassandraこれがCassandra
これがCassandra
 
Btrfs + Snapper + Samba で作る「以前のバージョン」に戻せるファイルサーバー
Btrfs + Snapper + Samba で作る「以前のバージョン」に戻せるファイルサーバーBtrfs + Snapper + Samba で作る「以前のバージョン」に戻せるファイルサーバー
Btrfs + Snapper + Samba で作る「以前のバージョン」に戻せるファイルサーバー
 
Apprendre à programmer avec scratch
Apprendre à programmer avec scratchApprendre à programmer avec scratch
Apprendre à programmer avec scratch
 
Embulk, an open-source plugin-based parallel bulk data loader
Embulk, an open-source plugin-based parallel bulk data loaderEmbulk, an open-source plugin-based parallel bulk data loader
Embulk, an open-source plugin-based parallel bulk data loader
 
これだけ知っときゃなんとかなるVim
これだけ知っときゃなんとかなるVimこれだけ知っときゃなんとかなるVim
これだけ知っときゃなんとかなるVim
 
Les bases de l'HTML / CSS
Les bases de l'HTML / CSSLes bases de l'HTML / CSS
Les bases de l'HTML / CSS
 
DDD 20121106 SEA Forum November
DDD 20121106 SEA Forum NovemberDDD 20121106 SEA Forum November
DDD 20121106 SEA Forum November
 
Raft
RaftRaft
Raft
 

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

EPUB Media Overlays 3.0とFixed Layout(固定レイアウト)
EPUB Media Overlays 3.0とFixed Layout(固定レイアウト)EPUB Media Overlays 3.0とFixed Layout(固定レイアウト)
EPUB Media Overlays 3.0とFixed Layout(固定レイアウト)Youji Sakai
 
JEPA 11月度定例会資料
JEPA 11月度定例会資料JEPA 11月度定例会資料
JEPA 11月度定例会資料Takuya Hayashi
 
EPUB3以降とReadium
EPUB3以降とReadiumEPUB3以降とReadium
EPUB3以降とReadiumMakoto Murata
 
いいパブッ!! - よくわかるEPUB 3
いいパブッ!! - よくわかるEPUB 3いいパブッ!! - よくわかるEPUB 3
いいパブッ!! - よくわかるEPUB 3Hiroshi Takase
 
Sitecore におけるレイアウトの考え方
Sitecore におけるレイアウトの考え方Sitecore におけるレイアウトの考え方
Sitecore におけるレイアウトの考え方サイトコア株式会社
 
Rails初心者レッスン lesson3 3edition
Rails初心者レッスン lesson3 3editionRails初心者レッスン lesson3 3edition
Rails初心者レッスン lesson3 3editionSatomi Tsujita
 
Db2 Warehouse Spark利用ガイド データ操作編
Db2 Warehouse Spark利用ガイド データ操作編Db2 Warehouse Spark利用ガイド データ操作編
Db2 Warehouse Spark利用ガイド データ操作編IBM Analytics Japan
 
Xcode グループとフォルダー参照 #yhios
Xcode グループとフォルダー参照 #yhiosXcode グループとフォルダー参照 #yhios
Xcode グループとフォルダー参照 #yhiosTomohiro Kumagai
 
Build 番号の自動更新スクリプトについて #cocoa_kansai
Build 番号の自動更新スクリプトについて #cocoa_kansaiBuild 番号の自動更新スクリプトについて #cocoa_kansai
Build 番号の自動更新スクリプトについて #cocoa_kansaiTomohiro Kumagai
 
Alfresco勉強会20120829: やさしいShareダッシュレットの作り方
Alfresco勉強会20120829: やさしいShareダッシュレットの作り方Alfresco勉強会20120829: やさしいShareダッシュレットの作り方
Alfresco勉強会20120829: やさしいShareダッシュレットの作り方linzhixing
 
Flyway使いたい
Flyway使いたいFlyway使いたい
Flyway使いたいfourside
 
WordBenchTokyo-20111126
WordBenchTokyo-20111126WordBenchTokyo-20111126
WordBenchTokyo-20111126webourgeon
 
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩Chieko Aihara
 
baserCMSテーマ制作チュートリアル
baserCMSテーマ制作チュートリアルbaserCMSテーマ制作チュートリアル
baserCMSテーマ制作チュートリアルRyuji Egashira
 
達人出版会のご紹介(技術編)
達人出版会のご紹介(技術編)達人出版会のご紹介(技術編)
達人出版会のご紹介(技術編)masayoshi takahashi
 
Dbtechshowcasesapporo mysql-turing-for-cloud-0.9.3
Dbtechshowcasesapporo mysql-turing-for-cloud-0.9.3Dbtechshowcasesapporo mysql-turing-for-cloud-0.9.3
Dbtechshowcasesapporo mysql-turing-for-cloud-0.9.3infinite_loop
 
CMSMix Sapporo vol.3 (Drupal の回)
CMSMix Sapporo vol.3 (Drupal の回)CMSMix Sapporo vol.3 (Drupal の回)
CMSMix Sapporo vol.3 (Drupal の回)Kenji Shirane
 
eZ Publish勉強会2013年3月「eZ Publishの構築を簡単に!」
eZ Publish勉強会2013年3月「eZ Publishの構築を簡単に!」eZ Publish勉強会2013年3月「eZ Publishの構築を簡単に!」
eZ Publish勉強会2013年3月「eZ Publishの構築を簡単に!」ericsagnes
 

Similaire à EPUB3 固定レイアウト徹底解説 (20)

EPUB Media Overlays 3.0とFixed Layout(固定レイアウト)
EPUB Media Overlays 3.0とFixed Layout(固定レイアウト)EPUB Media Overlays 3.0とFixed Layout(固定レイアウト)
EPUB Media Overlays 3.0とFixed Layout(固定レイアウト)
 
20121024 sakai epubsem_accessibility
20121024 sakai epubsem_accessibility20121024 sakai epubsem_accessibility
20121024 sakai epubsem_accessibility
 
JEPA 11月度定例会資料
JEPA 11月度定例会資料JEPA 11月度定例会資料
JEPA 11月度定例会資料
 
EPUB3以降とReadium
EPUB3以降とReadiumEPUB3以降とReadium
EPUB3以降とReadium
 
いいパブッ!! - よくわかるEPUB 3
いいパブッ!! - よくわかるEPUB 3いいパブッ!! - よくわかるEPUB 3
いいパブッ!! - よくわかるEPUB 3
 
Sitecore におけるレイアウトの考え方
Sitecore におけるレイアウトの考え方Sitecore におけるレイアウトの考え方
Sitecore におけるレイアウトの考え方
 
Rails初心者レッスン lesson3 3edition
Rails初心者レッスン lesson3 3editionRails初心者レッスン lesson3 3edition
Rails初心者レッスン lesson3 3edition
 
Db2 Warehouse Spark利用ガイド データ操作編
Db2 Warehouse Spark利用ガイド データ操作編Db2 Warehouse Spark利用ガイド データ操作編
Db2 Warehouse Spark利用ガイド データ操作編
 
Xcode グループとフォルダー参照 #yhios
Xcode グループとフォルダー参照 #yhiosXcode グループとフォルダー参照 #yhios
Xcode グループとフォルダー参照 #yhios
 
Build 番号の自動更新スクリプトについて #cocoa_kansai
Build 番号の自動更新スクリプトについて #cocoa_kansaiBuild 番号の自動更新スクリプトについて #cocoa_kansai
Build 番号の自動更新スクリプトについて #cocoa_kansai
 
Alfresco勉強会20120829: やさしいShareダッシュレットの作り方
Alfresco勉強会20120829: やさしいShareダッシュレットの作り方Alfresco勉強会20120829: やさしいShareダッシュレットの作り方
Alfresco勉強会20120829: やさしいShareダッシュレットの作り方
 
Flyway使いたい
Flyway使いたいFlyway使いたい
Flyway使いたい
 
WordBenchTokyo-20111126
WordBenchTokyo-20111126WordBenchTokyo-20111126
WordBenchTokyo-20111126
 
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
 
20130204 pre 5
20130204 pre 520130204 pre 5
20130204 pre 5
 
baserCMSテーマ制作チュートリアル
baserCMSテーマ制作チュートリアルbaserCMSテーマ制作チュートリアル
baserCMSテーマ制作チュートリアル
 
達人出版会のご紹介(技術編)
達人出版会のご紹介(技術編)達人出版会のご紹介(技術編)
達人出版会のご紹介(技術編)
 
Dbtechshowcasesapporo mysql-turing-for-cloud-0.9.3
Dbtechshowcasesapporo mysql-turing-for-cloud-0.9.3Dbtechshowcasesapporo mysql-turing-for-cloud-0.9.3
Dbtechshowcasesapporo mysql-turing-for-cloud-0.9.3
 
CMSMix Sapporo vol.3 (Drupal の回)
CMSMix Sapporo vol.3 (Drupal の回)CMSMix Sapporo vol.3 (Drupal の回)
CMSMix Sapporo vol.3 (Drupal の回)
 
eZ Publish勉強会2013年3月「eZ Publishの構築を簡単に!」
eZ Publish勉強会2013年3月「eZ Publishの構築を簡単に!」eZ Publish勉強会2013年3月「eZ Publishの構築を簡単に!」
eZ Publish勉強会2013年3月「eZ Publishの構築を簡単に!」
 

Plus de Youji Sakai

電子書籍が順調に売れ始めた理由/プロモーションの方法と今後重要になる電子出版マーケティングの提案~「一人出版社、構想から立ち上げ、運用まで、苦難の道のり」
電子書籍が順調に売れ始めた理由/プロモーションの方法と今後重要になる電子出版マーケティングの提案~「一人出版社、構想から立ち上げ、運用まで、苦難の道のり」電子書籍が順調に売れ始めた理由/プロモーションの方法と今後重要になる電子出版マーケティングの提案~「一人出版社、構想から立ち上げ、運用まで、苦難の道のり」
電子書籍が順調に売れ始めた理由/プロモーションの方法と今後重要になる電子出版マーケティングの提案~「一人出版社、構想から立ち上げ、運用まで、苦難の道のり」Youji Sakai
 
電子書籍メディア論/読者を探し、読者の求める「本」をつくる「アジャイル開発+リーン手法」に学ぶ
電子書籍メディア論/読者を探し、読者の求める「本」をつくる「アジャイル開発+リーン手法」に学ぶ電子書籍メディア論/読者を探し、読者の求める「本」をつくる「アジャイル開発+リーン手法」に学ぶ
電子書籍メディア論/読者を探し、読者の求める「本」をつくる「アジャイル開発+リーン手法」に学ぶYouji Sakai
 
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワークYouji Sakai
 
制作者の視点での EPUB 3 オーサリング最前線
制作者の視点での EPUB 3 オーサリング最前線制作者の視点での EPUB 3 オーサリング最前線
制作者の視点での EPUB 3 オーサリング最前線Youji Sakai
 
EBOOK OVERVIEW - INDD 2012 Tokyo
EBOOK OVERVIEW - INDD 2012 TokyoEBOOK OVERVIEW - INDD 2012 Tokyo
EBOOK OVERVIEW - INDD 2012 TokyoYouji Sakai
 
イーブックデザイナーの仕事/HTML5ブックデザインの可能性
イーブックデザイナーの仕事/HTML5ブックデザインの可能性イーブックデザイナーの仕事/HTML5ブックデザインの可能性
イーブックデザイナーの仕事/HTML5ブックデザインの可能性Youji Sakai
 
電子書籍デザイナーのための Dreamweaverを使ったEPUB3.0 マガジンレイアウトの実践
電子書籍デザイナーのための Dreamweaverを使ったEPUB3.0 マガジンレイアウトの実践電子書籍デザイナーのための Dreamweaverを使ったEPUB3.0 マガジンレイアウトの実践
電子書籍デザイナーのための Dreamweaverを使ったEPUB3.0 マガジンレイアウトの実践Youji Sakai
 
電子雑誌のためのWeb Adaptive Layout
電子雑誌のためのWeb Adaptive Layout電子雑誌のためのWeb Adaptive Layout
電子雑誌のためのWeb Adaptive LayoutYouji Sakai
 
EPUB3で変わる電子書籍の表現力
EPUB3で変わる電子書籍の表現力 EPUB3で変わる電子書籍の表現力
EPUB3で変わる電子書籍の表現力 Youji Sakai
 
2007年7月15日「ユーティリティビデオコンテンツによる新しいWebサービス」
2007年7月15日「ユーティリティビデオコンテンツによる新しいWebサービス」2007年7月15日「ユーティリティビデオコンテンツによる新しいWebサービス」
2007年7月15日「ユーティリティビデオコンテンツによる新しいWebサービス」Youji Sakai
 
PAGE2011「EPUBフォーマットの 電子書籍を設計するための 5つのポイント」
PAGE2011「EPUBフォーマットの 電子書籍を設計するための 5つのポイント」PAGE2011「EPUBフォーマットの 電子書籍を設計するための 5つのポイント」
PAGE2011「EPUBフォーマットの 電子書籍を設計するための 5つのポイント」Youji Sakai
 
実践!CSSデザインの「型」でみる視覚表現テクニック
実践!CSSデザインの「型」でみる視覚表現テクニック実践!CSSデザインの「型」でみる視覚表現テクニック
実践!CSSデザインの「型」でみる視覚表現テクニックYouji Sakai
 

Plus de Youji Sakai (12)

電子書籍が順調に売れ始めた理由/プロモーションの方法と今後重要になる電子出版マーケティングの提案~「一人出版社、構想から立ち上げ、運用まで、苦難の道のり」
電子書籍が順調に売れ始めた理由/プロモーションの方法と今後重要になる電子出版マーケティングの提案~「一人出版社、構想から立ち上げ、運用まで、苦難の道のり」電子書籍が順調に売れ始めた理由/プロモーションの方法と今後重要になる電子出版マーケティングの提案~「一人出版社、構想から立ち上げ、運用まで、苦難の道のり」
電子書籍が順調に売れ始めた理由/プロモーションの方法と今後重要になる電子出版マーケティングの提案~「一人出版社、構想から立ち上げ、運用まで、苦難の道のり」
 
電子書籍メディア論/読者を探し、読者の求める「本」をつくる「アジャイル開発+リーン手法」に学ぶ
電子書籍メディア論/読者を探し、読者の求める「本」をつくる「アジャイル開発+リーン手法」に学ぶ電子書籍メディア論/読者を探し、読者の求める「本」をつくる「アジャイル開発+リーン手法」に学ぶ
電子書籍メディア論/読者を探し、読者の求める「本」をつくる「アジャイル開発+リーン手法」に学ぶ
 
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
〜Kindleダイレクトパブリッシング・EPUB 3・HTML5ウェブコンテンツ〜 コミック&グラフィックノベル・プロダクションワーク
 
制作者の視点での EPUB 3 オーサリング最前線
制作者の視点での EPUB 3 オーサリング最前線制作者の視点での EPUB 3 オーサリング最前線
制作者の視点での EPUB 3 オーサリング最前線
 
EBOOK OVERVIEW - INDD 2012 Tokyo
EBOOK OVERVIEW - INDD 2012 TokyoEBOOK OVERVIEW - INDD 2012 Tokyo
EBOOK OVERVIEW - INDD 2012 Tokyo
 
イーブックデザイナーの仕事/HTML5ブックデザインの可能性
イーブックデザイナーの仕事/HTML5ブックデザインの可能性イーブックデザイナーの仕事/HTML5ブックデザインの可能性
イーブックデザイナーの仕事/HTML5ブックデザインの可能性
 
電子書籍デザイナーのための Dreamweaverを使ったEPUB3.0 マガジンレイアウトの実践
電子書籍デザイナーのための Dreamweaverを使ったEPUB3.0 マガジンレイアウトの実践電子書籍デザイナーのための Dreamweaverを使ったEPUB3.0 マガジンレイアウトの実践
電子書籍デザイナーのための Dreamweaverを使ったEPUB3.0 マガジンレイアウトの実践
 
電子雑誌のためのWeb Adaptive Layout
電子雑誌のためのWeb Adaptive Layout電子雑誌のためのWeb Adaptive Layout
電子雑誌のためのWeb Adaptive Layout
 
EPUB3で変わる電子書籍の表現力
EPUB3で変わる電子書籍の表現力 EPUB3で変わる電子書籍の表現力
EPUB3で変わる電子書籍の表現力
 
2007年7月15日「ユーティリティビデオコンテンツによる新しいWebサービス」
2007年7月15日「ユーティリティビデオコンテンツによる新しいWebサービス」2007年7月15日「ユーティリティビデオコンテンツによる新しいWebサービス」
2007年7月15日「ユーティリティビデオコンテンツによる新しいWebサービス」
 
PAGE2011「EPUBフォーマットの 電子書籍を設計するための 5つのポイント」
PAGE2011「EPUBフォーマットの 電子書籍を設計するための 5つのポイント」PAGE2011「EPUBフォーマットの 電子書籍を設計するための 5つのポイント」
PAGE2011「EPUBフォーマットの 電子書籍を設計するための 5つのポイント」
 
実践!CSSデザインの「型」でみる視覚表現テクニック
実践!CSSデザインの「型」でみる視覚表現テクニック実践!CSSデザインの「型」でみる視覚表現テクニック
実践!CSSデザインの「型」でみる視覚表現テクニック
 

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

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