Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
EPUB3技術解説セミナー4  固定レイアウト/アクセシビリティ   2012年10月24日(水)16:00           境祐司   @commonstyle ¦ 電子書籍メディア論
profile          YOUJI SAKAIInstructional Designer | eBook Designer                境祐司
BOOKSウェブレイアウトの   EPUB3スタンダード    Webデザイン基礎   教科書        デザインガイド         改訂3版      InDesign CS6で作るEPUB 3 標準ガイドブック           ...
community       電子書籍メデ ア論             ィ http://www.facebook.com/eBookStrategy         デザインの未来http://www.facebook.com/TheFu...
テキスト
EPUB3技術解説セミナー3本日のテーマ:      固定レイアウト      EPUB 3 Fixed Layout      アクセシビリティ      EPUB Media Overlays 3.0
EPUB 3 Fixed Layout / Media Overlays               最新ニュース今朝、iBooksが3.0にアップデート・iBookstoreで購入してiCloudに保管したすべてのブックは、 iOS 6の本棚...
EPUB 3 Fixed Layout / Media Overlays
EPUB 3 Fixed Layout / Media Overlays
EPUB 3 Fixed Layout / Media Overlays
EPUB 3 Fixed Layout / Media Overlays
EPUB 3 Fixed Layout / Media Overlays
EPUB 3 Fixed Layout / Media Overlays あとは、iBookstoreの国内サービス開始を待つだけ
EPUB3技術解説セミナー3本日のテーマ:      固定レイアウト      EPUB 3 Fixed Layout      アクセシビリティ      EPUB Media Overlays 3.0
EPUB 3 Fixed Layout / Media Overlays   アクセシビリティEPUB Media Overlays 3.0
EPUB 3 Fixed Layout / Media Overlays               アクセシビリティ      EPUB Media Overlays 3.0http://idpf.org/         http://ww...
EPUB 3 Fixed Layout / Media Overlays
EPUB 3 Fixed Layout / Media Overlays
EPUB 3 Fixed Layout / Media Overlays EPUB Media Overlays 3.0   http://idpf.org/epub/30/spec/epub30-mediaoverlays.html     ...
EPUB 3 Fixed Layout / Media Overlays     EPUB Media Overlays 3.0                 SMILSynchronized Multimedia Integration L...
EPUB 3 Fixed Layout / Media Overlays     EPUB Media Overlays 3.0                 SMILSynchronized Multimedia Integration L...
EPUB 3 Fixed Layout / Media OverlaysEPUB Media Overlays 3.0 を利用したテキストと音声が同期する電子書籍の作成
EPUB 3 Fixed Layout / Media OverlaysEPUB 3のファイルをベースにして作成・朗読音声の準備・コンテンツドキュメントにid属性を割り振る・SMAILファイルの作成・パッケージドキュメントに情報を追加
EPUB 3 Fixed Layout / Media Overlays
EPUB 3 Fixed Layout / Media Overlays・必須のmimetype・必須のMETA-INF           (container.xml)・必須のパッケージドキュメント・必須のナビゲーションドキュメント(目次)...
EPUB 3 Fixed Layout / Media Overlays
EPUB 3 Fixed Layout / Media Overlays  朗読音声の準備
EPUB 3 Fixed Layout / Media Overlays音声合成を使用する場合:  かんたん音声合成ソフトウェア  かんたん!AITalk 3,150円  http://fs-network.jp/mynetshop.html ...
EPUB 3 Fixed Layout / Media Overlays音声ファイルの形式:  MP3          MP4 AAC              M4A AAC                     不具合が発生しにくい  ...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0コンテンツドキュメントに  id属性を割り振る
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0                    EPUB コンテンツドキュメント
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0                    ドキュメント構成要素の確認
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0            見出しレベル1                                                リード文本文(段落1...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0                    朗読のセンテンスを決める
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0                    センテンスにid属性を追加
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0書籍はページごとにパーマリンクがあり、「書籍Aの60ページで紹介されている技術は、書籍 Bの200ページに詳しく書かれている。」といった、ウェブでは当たり...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0書籍はページごとにパーマリンクがあり、「書籍Aの60ページで紹介されている技術は、書籍 Bの200ページに詳しく書かれている。」といった、ウェブでは当たり...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0<span id="chap01s0003">書籍はページごとにパーマリンクがあり、「書籍 Aの60ページで紹介されている技術は、書籍 Bの200ページに...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0                  例:第1章センテンス番号0003<span id="chap01s0003">書籍はページごとにパーマリンクがあり、「...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 SMILファイルの作成
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0      page1.smil
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0SMILファイル作成の手順
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0                  基本ブロック                    smil要素, body要素, seq要素
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0                  詳細ブロック                    par要素(とid属性)を追加
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0                    text要素とaudio要素を追加
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0                    再生開始と再生終了の時間指定
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0Media Overlays 要素
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0                  基本ブロック                    smil要素, body要素, seq要素
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0<smil xmlns="http://www.w3.org/ns/SMIL"xmlns:epub="http://www.idpf.org/2007/o...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0<smil xmlns="http://www.w3.org/ns/SMIL"xmlns:epub="http://www.idpf.org/2007/o...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0<smil xmlns="http://www.w3.org/ns/SMIL"xmlns:epub="http://www.idpf.org/2007/o...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0<smil xmlns="http://www.w3.org/ns/SMIL"xmlns:epub="http://www.idpf.org/2007/o...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0                  詳細ブロック                    par要素(とid属性)を追加
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0<par id="heading1">                                              見出し</par><pa...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0                    text要素とaudio要素を追加
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0<par id="sentence01"><text src="chapter01.xhtml#chap01s0001"/><audio src="Med...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0<par id="sentence01"><text src="chapter01.xhtml#chap01s0001"/><audio src="Med...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0<par id="sentence01"><text src="chapter01.xhtml#chap01s0001"/><audio src="Med...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0<par id="sentence01"><text src="chapter01.xhtml#chap01s0001"/><audio src="Med...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0<par id="sentence01"><text src="chapter01.xhtml#chap01s0001"/><audio src="Med...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0                    再生開始と再生終了の時間指定
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0<par id="sentence01"><text src="chapter01.xhtml#chap01s0001"/><audio src="Med...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0<par id="sentence01"><text src="chapter01.xhtml#chap01s0001"/><audio src="Med...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0時間指定の例: 03:08 (3分8秒) 0:07:12 (7分12秒) 0:00:08.570(8秒570ミリ秒) 1:02:48.210(1時間2分4...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0ツールの紹介:  Audacity             オーダシティ  無償で利用できるクロスプラットフォームのサウンド編集ツール  http://a...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0Audacity オーダシティ   http://audacity.sourceforge.net/?lang=ja
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0パッケージドキュメントに   情報を追加
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0<?xml version="1.0" encoding="UTF-8"?><package xmlns="http://www.idpf.org/200...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0<?xml version="1.0" encoding="UTF-8"?><package xmlns="http://www.idpf.org/200...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0メタデータの追加: <meta property="media:duration" refines="#chapter01_overlay">0:01:30...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0メタデータの追加: <meta property="media:duration" refines="#chapter01_overlay">0:01:30...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0メタデータの追加: <meta property="media:duration" refines="#chapter01_overlay">0:01:30...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0メタデータの追加: <meta property="media:duration" refines="#chapter01_overlay">0:01:30...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0メタデータの追加: <meta property="media:duration" refines="#chapter01_overlay">0:01:30...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0メタデータ: <meta property="media:active-class"> -epub-media-overlay-active</meta>...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0   開発ツールについて
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0   開発ツールについて              http://www.daisy.org    DAISYコンソーシアムが   提供するリファレンスツ...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0                 開発ツールについて                        Tobi(トビ)                   ...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0                                          Tobi                               ...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0                                          Tobi                               ...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0    参考情報 (※注意:2012年10月現在の検証)EPUBコンテナ内のファイル構成
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0  参考情報 (※注意:2012年10月現在の検証)
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0                                     HTMLファイル                                ...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0作成したEPUBファイルを リーディングシステムで   プレビューする
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0              Readium                http://readium.org/
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0                 ※バージョンにご注意:Version 0.5.3
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0パッケージドキュメントにメタデータを追加 <meta property="media:active-class"> -epub-media-overlay...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
EPUB 3 Fixed Layout / Media Overlays音声ファイルの形式:  MP3          MP4 AAC              M4A AAC                     不具合が発生しにくい  ...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0   Android OSの環境スマートフォン, タブレット等
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0              IDEAL Group Reader Beta               https://play.google.com/s...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0                             IDEAL Group Reader Beta
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0                      Dropbox                       ・EPUBファイルをコピー            ...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0                      EPUBファイルが表示される                             IDEAL Group ...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0                      ダブルタップすると朗読開始                      もう一度ダブルタップすると停止     ...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0                      音声データのないページでも                      日本語の音声合成エンジンで       ...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0                           音声合成エンジンの選択                           TTS Settings...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0                           TTS Settings                             IDEAL Gro...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0                           TTS Settings           247円                       ...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0                      SVOX Misaki                      朗読の音声データがないページは、      ...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0                      その他の機能:                           JavaScript利用可能       ...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0            iOSの環境iPad, iPhone, iPod touch
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0                     iBooks    http://itunes.apple.com/jp/app/ibooks/id364709...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0                     iBooks    http://itunes.apple.com/jp/app/ibooks/id364709...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0                     iBooks    http://itunes.apple.com/jp/app/ibooks/id364709...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0    Fixed Layout modeの電子書籍                                                iPa...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0    Fixed Layout modeの電子書籍                                                iPa...
EPUB 3 Fixed Layout / Media Overlays 固定レイアウト      Fixed Layout
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0       Fixed-Layoutテキストや図版を                       画像化した  絶対配置                ...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0          Fixed-Layoutテキストや図版を  絶対配置                                         ...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0        テキストや図版を絶対配置・座標値を指定してテキストや図版を配置する方法・文字サイズは固定されているものが多い リーディングシステム側で文字...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0       Fixed-Layoutテキストや図版を                       画像化した  絶対配置                ...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0There Was an Old Monkey Who Swallowed a FrogAmazon Kindle Store              ...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0           画像化した紙面を配置・DTPデータからイメージ変換する方法・もしくは、印刷物を取り込み、補正する方法・コミックや写真集、絵本などは、...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0                             Countrys Best Cabins                            ...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0       Fixed-Layoutテキストや図版を                       画像化した  絶対配置                ...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0                                 2010年12月15日の                                ...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0                     iBooks    http://itunes.apple.com/jp/app/ibooks/id364709...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0   META-INF フォルダにiBooks専用のXMLファイルを       追加する
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0Fixed Layout modeに切り替えるXMLファイル     com.apple.ibooks.display-options.xml
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0   Fixed Layout modeに切り替えるXMLファイル<?xml version="1.0" encoding="UTF-8"?><displ...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0HTMLファイルにmeta要素の追加
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0       HTMLファイルにmeta要素の追加記述例:<meta name="viewport" content="width=2048,height...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0CSSファイルにスタイルを追加
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0       CSSファイルにスタイルを追加記述例:              body {                width: 2048px; ...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0          CSSファイルにスタイルを追加記述例:                  body {                    widt...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0   CSSファイルに レイアウトスタイルを追加
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0  テキストや図版などの要素を絶対配置
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0      CSSファイルに    レイアウトスタイルを追加                     見出し・本文のブロックに適用            ...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0             CSSファイルに           レイアウトスタイルを追加                            見出し・本...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0             CSSファイルに           レイアウトスタイルを追加ページ全体の領域                    見出し・本...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.070px                     1908px                    70px                      ...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0・META-INF フォルダに iBooks専用のXMLファイルを追加する・HTMLファイルにmeta要素の追加・CSSファイルにスタイルを追加・CSSフ...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0iBooksでプレビューする
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0              DropboxにEPUBファイルを              コピーしてiPadで選択
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0              DropboxにEPUBファイルを              コピーしてiPadで選択
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0                              iBooks                              Fixed Layou...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0  テキストや図版などの要素を絶対配置
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0                        iBooks Fixed Layout mode
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0絶対配置されたテキストは選択可能、検索の対象                                                 iPad a...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0複雑なレイアウトは固定レイアウトではなくレプリカ                                                  .ne...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0    EPUB 3 Fixed-Layout  Documents              http://idpf.org/epub/fxl/
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0  EPUB 3 Fixed-Layout Documents・IDPFの情報文書(Informational Document)・IDPF EPUB w...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0EPUB 3 Fixed-Layout Documentsプロパティ                               Prefixマッピング・r...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0プロパティの定義Property Definitions・リフロー/ページ区切りの指定・スクリーンの方向(縦・横)・見開きの指定・見開きの配置指定(左・右・...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0プロパティの定義Property Definitions・リフロー/ページ区切りの指定 rendition:layout プロパティ・スクリーンの方向(縦・...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0EPUB 3 Fixed-Layout Documentsプロパティ                               Prefixマッピング・r...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0     Prefixマッピング     Prefix Mapping     prefix属性で URI     http://www.idpf.org/vo...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0EPUB 3 Fixed-Layout Documentsプロパティ                               Prefixマッピング・r...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0   コンテント・ディメンションズ    Content dimensions   meta要素のviewportで指定<head><meta name=...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0コンテント・ディメンションズ                                       XHTMLContent dimensionsm...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0公開されているEPUB3固定レイアウトのサンプル         epub-samples          http://code.google.com...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0             epub-samples
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0            EPUB3固定レイアウトのサンプルharuko-html-jpeg-20120524.epubFixed layout manga...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0        page-blanche-20120314.epub
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0        page-blanche-20120314.epub
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0        page-blanche-20120314.epub パッケージドキュメント(.opf)
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0        page-blanche-20120314.epub
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0EPUB 3 Fixed-Layout Documentsプロパティ                               Prefixマッピング・r...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0        page-blanche-20120314.epub コンテンツキュメント(.xhtml)
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0        page-blanche-20120314.epub                                   XHTMLファイル
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0EPUB 3 Fixed-Layout Documentsプロパティ                               Prefixマッピング・r...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0        page-blanche-20120314.epub                                   1200 157...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0        page-blanche-20120314.epub パッケージドキュメント(.opf)
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0        page-blanche-20120314.epub
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0                                                          パッケージ<?xml version=...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0        rendition:layout プロパティ     ・reflowable(リフロー)     ・pre-paginated(ページ区切り...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0        page-blanche-20120314.epub
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0     rendition:orientation プロパティ     ・landscape(横方向)     ・portrait(縦方向)     ・...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0        page-blanche-20120314.epub
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0      rendition:spread プロパティ          ・none          ・landscape(横方向のみ)       ...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0   rendition:layout プロパティpre-paginated(ページ区切り)rendition:orientation プロパティ    ...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0例:ランドスケープモード(横向き)にすると見開きで表示されるランドスケープモード(横向き)では、見開きではなく、シングルページの拡大表示で読みたい、という...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0   rendition:layout プロパティpre-paginated(ページ区切り)rendition:orientation プロパティ    ...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0読者が、シングルページ、ダブルページ(見開き)を自由に選択できたほうがよい場合もある
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0    見開きの配置指定
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 page-spread-* プロパティ    見開きの配置指定(左・右・中央)・page-spread-left プロパティ(左側に配置)・page-s...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0                                                          パッケージ<?xml version=...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0  page-spread-* プロパティ<itemref id="titlepage"properties="page-spread-rightrend...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0  page-spread-* プロパティ<itemref id="titlepage"properties="page-spread-rightrend...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0  page-spread-* プロパティ<itemref id="titlepage"properties="page-spread-rightrend...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0                     補足<meta property="rendition:layout">pre-paginated</meta>...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0EPUB 3 固定レイアウトの     ワークフロー
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0      EPUB 3 電子書籍のワークフロー・プロジェクトスコープの設定・プラットフォームの選定(※今回は読書環境の選定)・対象となるリーディングシス...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0      EPUB 3 電子書籍のワークフロー・プロジェクトスコープの設定・プラットフォームの選定(※今回は読書環境の選定)・対象となるリーディングシス...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0リフロー(行の折り返し処理)電子書籍の場合
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0CSSなしのEPUBファイルを準備
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0           Adobe Digital Editions 1.8.x
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0           Adobe Digital Editions 1.8.x
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0      Android - Himawari Reader Pro
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0                                           iBooks
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 検証用のEPUBファイルを準備                             *{                              ...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0                                                iBooks
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0           Himawari Reader Pro
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0デフォルトスタイル                           スタイルのリセット
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0デフォルトのスタイルをリセットしてから  上書き可能なスタイルを調べる
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0デフォルトのスタイルをリセットしてから  上書き可能なスタイルを調べる(※この作業がないと製作コスト増)  試行錯誤を何度も繰り返すことになる
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0      EPUB 3 電子書籍のワークフロー・プロジェクトスコープの設定・プラットフォームの選定(※今回は読書環境の選定)・対象となるリーディングシス...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0固定レイアウトの電子書籍は、     自動化できるため、ワークフローは簡素化される
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0      EPUB 3 電子書籍のワークフロー・プロジェクトスコープの設定・プラットフォームの選定(※今回は読書環境の選定)・対象となるリーディングシス...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0                   参考情報:   固定レイアウトをサポートした開発ツールFUSEe ver.1.0EPUB 3 固定レイアウト(iBo...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0固定レイアウトの利用例
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0EPUB 3 Fixed-Layout DocumentsAppendix A. Examples            http://idpf.org/...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0              Example 1・固定レイアウト・横向きでは合成された見開き・縦向きでは見開きにしない
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0              Example 1
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0              Example 2・固定レイアウト・合成された見開きにしない・横向きで固定
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0              Example 2
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0                Example 3・リフローのコンテンツ・タイトルページだけ固定レイアウト・合成された見開きを表示するときは 右側に配置
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0              Example 3
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0                Example 5・リフローのコンテンツ・固定レイアウトの 右配置ページと左配置ページを 合成された見開きページとして表示...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0              Example 5
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0                Example 7・固定レイアウト・横向きでは合成された見開き・縦向きでは見開きにしない・進行方向は右から左(日本のマンガ)
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0              Example 7
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 デモンストレーションを    ご覧ください
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0Kindle 固定レイアウトとの違い
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0Free Kindle Apps - Read eBooks on your Phone, Tablet, or Computer            ...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0    スマートフォン                                                     専用端末ウェブブラウザ  ...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0日用品から食品、家電、衣類など何でも買えるアマゾンのアカウント
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0          Kindle Format 8              http://amzn.to/poyUKN
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0                                 HTML5EPUB 3                      Kindle Form...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 Children s                                                      Fiction     ...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0絵本                                            文芸書実用書                         ...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0                 ルーツが同じ  ベースの技術が同じなので変換しやすいEPUB 3                      Kindle...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0           最後に一言
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0       標準仕様の捉え方 Specification oriented         スペスィフィケーション・オリエンテッドImplementati...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0       標準仕様の捉え方 Specification oriented         スペスィフィケーション・オリエンテッドImplementati...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0       標準仕様の捉え方 Specification oriented         スペスィフィケーション・オリエンテッドImplementati...
EPUB 3 Fixed Layout / EPUB Media Overlays 3.0        標準仕様の捉え方 Specification oriented          スペスィフィケーション・オリエンテッド 仕様策定の後、決め...
EPUB 3の最新情報はIDPFのサイトで確認してください    http://idpf.org/
Thank you for your attention.  ご清聴ありがとうございました
EPUB3技術解説セミナー3  固定レイアウト/アクセシビリティ   2012年10月24日(水)16:00           境祐司   @commonstyle ¦ 電子書籍メディア論
community       電子書籍メデ ア論             ィ http://www.facebook.com/eBookStrategy         デザインの未来http://www.facebook.com/TheFu...
Upcoming SlideShare
Loading in …5
×

EPUB Media Overlays 3.0とFixed Layout(固定レイアウト)

7,032 views

Published on

Published in: Technology

EPUB Media Overlays 3.0とFixed Layout(固定レイアウト)

  1. 1. EPUB3技術解説セミナー4 固定レイアウト/アクセシビリティ 2012年10月24日(水)16:00 境祐司 @commonstyle ¦ 電子書籍メディア論
  2. 2. profile YOUJI SAKAIInstructional Designer | eBook Designer 境祐司
  3. 3. BOOKSウェブレイアウトの EPUB3スタンダード Webデザイン基礎 教科書 デザインガイド 改訂3版 InDesign CS6で作るEPUB 3 標準ガイドブック 森 裕司, 境 祐司, 林 拓也, 向井 領治
  4. 4. community 電子書籍メデ ア論 ィ http://www.facebook.com/eBookStrategy デザインの未来http://www.facebook.com/TheFutureDesign
  5. 5. テキスト
  6. 6. EPUB3技術解説セミナー3本日のテーマ: 固定レイアウト EPUB 3 Fixed Layout アクセシビリティ EPUB Media Overlays 3.0
  7. 7. EPUB 3 Fixed Layout / Media Overlays 最新ニュース今朝、iBooksが3.0にアップデート・iBookstoreで購入してiCloudに保管したすべてのブックは、 iOS 6の本棚で直接見ることができます・新しいスクロールテーマを使って、指でフリックしてブックを 上下方向にスクロールできます・購入したブックの無料のアップデート(新しい章や訂正など)を 受信できます・iOS 6では、語句の定義をドイツ語、スペイン語、フランス語、 日本語、および中国語(簡体字)で検索できます・お気に入りのブックについて考えたことを、Facebook、  Twitter、メッセージ、またはメールで友達と共有できます
  8. 8. EPUB 3 Fixed Layout / Media Overlays
  9. 9. EPUB 3 Fixed Layout / Media Overlays
  10. 10. EPUB 3 Fixed Layout / Media Overlays
  11. 11. EPUB 3 Fixed Layout / Media Overlays
  12. 12. EPUB 3 Fixed Layout / Media Overlays
  13. 13. EPUB 3 Fixed Layout / Media Overlays あとは、iBookstoreの国内サービス開始を待つだけ
  14. 14. EPUB3技術解説セミナー3本日のテーマ: 固定レイアウト EPUB 3 Fixed Layout アクセシビリティ EPUB Media Overlays 3.0
  15. 15. EPUB 3 Fixed Layout / Media Overlays アクセシビリティEPUB Media Overlays 3.0
  16. 16. EPUB 3 Fixed Layout / Media Overlays アクセシビリティ EPUB Media Overlays 3.0http://idpf.org/ http://www.w3.org http://www.daisy.org
  17. 17. EPUB 3 Fixed Layout / Media Overlays
  18. 18. EPUB 3 Fixed Layout / Media Overlays
  19. 19. EPUB 3 Fixed Layout / Media Overlays EPUB Media Overlays 3.0 http://idpf.org/epub/30/spec/epub30-mediaoverlays.html EPUB 3EPUB Publications 3.0EPUB Content Documents 3.0EPUB Open Container Format (OCF) 3.0EPUB Media Overlays 3.0
  20. 20. EPUB 3 Fixed Layout / Media Overlays EPUB Media Overlays 3.0 SMILSynchronized Multimedia Integration Language
  21. 21. EPUB 3 Fixed Layout / Media Overlays EPUB Media Overlays 3.0 SMILSynchronized Multimedia Integration Language 同期マルチメディアの統合言語1998年6月 SMIL 1.0 がW3Cで勧告2005年12月 SMIL 2.12008年12月 SMIL 3.0 http://www.w3.org/TR/SMIL3/
  22. 22. EPUB 3 Fixed Layout / Media OverlaysEPUB Media Overlays 3.0 を利用したテキストと音声が同期する電子書籍の作成
  23. 23. EPUB 3 Fixed Layout / Media OverlaysEPUB 3のファイルをベースにして作成・朗読音声の準備・コンテンツドキュメントにid属性を割り振る・SMAILファイルの作成・パッケージドキュメントに情報を追加
  24. 24. EPUB 3 Fixed Layout / Media Overlays
  25. 25. EPUB 3 Fixed Layout / Media Overlays・必須のmimetype・必須のMETA-INF (container.xml)・必須のパッケージドキュメント・必須のナビゲーションドキュメント(目次)・そして、コンテンツ(ページや画像など) EPUBのルールで圧縮
  26. 26. EPUB 3 Fixed Layout / Media Overlays
  27. 27. EPUB 3 Fixed Layout / Media Overlays 朗読音声の準備
  28. 28. EPUB 3 Fixed Layout / Media Overlays音声合成を使用する場合: かんたん音声合成ソフトウェア かんたん!AITalk 3,150円 http://fs-network.jp/mynetshop.html 入力文字読み上げソフト VOICEROID+ 民安ともえ 6,980円 ボイスロイド プラス タミヤストモエ http://www.ah-soft.com/voiceroid/maki/ 参考: AH-Software 個人・同人サークル 有償配布申請ページ http://www.ah-soft.com/licensee/ 法人の方、営利目的の有償配布をされる方 http://www.ah-soft.com/licensee/
  29. 29. EPUB 3 Fixed Layout / Media Overlays音声ファイルの形式: MP3 MP4 AAC M4A AAC 不具合が発生しにくい (※注意:2012年10月現在の検証)
  30. 30. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0コンテンツドキュメントに id属性を割り振る
  31. 31. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
  32. 32. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 EPUB コンテンツドキュメント
  33. 33. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
  34. 34. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 ドキュメント構成要素の確認
  35. 35. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 見出しレベル1 リード文本文(段落1)本文(段落2) ドキュメント構成要素の確認
  36. 36. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
  37. 37. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 朗読のセンテンスを決める
  38. 38. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
  39. 39. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 センテンスにid属性を追加
  40. 40. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
  41. 41. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0書籍はページごとにパーマリンクがあり、「書籍Aの60ページで紹介されている技術は、書籍 Bの200ページに詳しく書かれている。」といった、ウェブでは当たり前のハイパーリンク機能が生かせます。すべての本が解体され、知のまとまりとして利用できるわけです。
  42. 42. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0書籍はページごとにパーマリンクがあり、「書籍Aの60ページで紹介されている技術は、書籍 Bの200ページに詳しく書かれている。」といった、ウェブでは当たり前のハイパーリンク機能が生かせます。すべての本が解体され、知のまとまりとして利用できるわけです。
  43. 43. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0<span id="chap01s0003">書籍はページごとにパーマリンクがあり、「書籍 Aの60ページで紹介されている技術は、書籍 Bの200ページに詳しく書かれている。」といった、ウェブでは当たり前のハイパーリンク機能が生かせます。</span><span id="chap01s0004">すべての本が解体され、知のまとまりとして利用できるわけです。</span>
  44. 44. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 例:第1章センテンス番号0003<span id="chap01s0003">書籍はページごとにパーマリンクがあり、「書籍 Aの60ページで紹介されている技術は、書籍 Bの200ページに詳しく書かれている。」といった、ウェブでは当たり前のハイパーリンク機能が生かせます。</span> 例:第1章センテンス番号0004<span id="chap01s0004">すべての本が解体され、知のまとまりとして利用できるわけです。</span>
  45. 45. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 SMILファイルの作成
  46. 46. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
  47. 47. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 page1.smil
  48. 48. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0SMILファイル作成の手順
  49. 49. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 基本ブロック smil要素, body要素, seq要素
  50. 50. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 詳細ブロック par要素(とid属性)を追加
  51. 51. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 text要素とaudio要素を追加
  52. 52. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 再生開始と再生終了の時間指定
  53. 53. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0Media Overlays 要素
  54. 54. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 基本ブロック smil要素, body要素, seq要素
  55. 55. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0<smil xmlns="http://www.w3.org/ns/SMIL"xmlns:epub="http://www.idpf.org/2007/ops"version="3.0"><body><seq epub:textref="chapter01.xhtml"epub:type="chapter"></seq></body></smil>
  56. 56. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0<smil xmlns="http://www.w3.org/ns/SMIL"xmlns:epub="http://www.idpf.org/2007/ops"version="3.0"><body><seq epub:textref="chapter01.xhtml"epub:type="chapter"></seq></body></smil>
  57. 57. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0<smil xmlns="http://www.w3.org/ns/SMIL"xmlns:epub="http://www.idpf.org/2007/ops"version="3.0"><body><seq epub:textref="chapter01.xhtml"epub:type="chapter"> 対応するコンテンツドキュメント</seq></body></smil>
  58. 58. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0<smil xmlns="http://www.w3.org/ns/SMIL"xmlns:epub="http://www.idpf.org/2007/ops"version="3.0"><body><seq epub:textref="chapter01.xhtml"epub:type="chapter"> セマンティクス(optional)</seq></body></smil>
  59. 59. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 詳細ブロック par要素(とid属性)を追加
  60. 60. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0<par id="heading1"> 見出し</par><par id="lead"> リード文</par><par id="sentence01"> 本文のセンテンス 01番</par><par id="sentence02"> 本文のセンテンス 02番</par>
  61. 61. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 text要素とaudio要素を追加
  62. 62. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0<par id="sentence01"><text src="chapter01.xhtml#chap01s0001"/><audio src="Media_Overlay_Voice.mp3"clipBegin="0:00:00" clipEnd="0:00:00"/></par>
  63. 63. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0<par id="sentence01"><text src="chapter01.xhtml#chap01s0001"/><audio src="Media_Overlay_Voice.mp3"clipBegin="0:00:00" clipEnd="0:00:00"/></par> text要素
  64. 64. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0<par id="sentence01"><text src="chapter01.xhtml#chap01s0001"/><audio src="Media_Overlay_Voice.mp3"clipBegin="0:00:00" clipEnd="0:00:00"/></par> chapter01.xhtmlの「chap01s0001」を朗読<span id="chap01s0001">2001年7月、オライリーメディアとピアソン・エデュケーションは共同事業である「SafariBooks Online」をスタートさせました。</span>
  65. 65. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0<par id="sentence01"><text src="chapter01.xhtml#chap01s0001"/><audio src="Media_Overlay_Voice.mp3"clipBegin="0:00:00" clipEnd="0:00:00"/></par> audio要素
  66. 66. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0<par id="sentence01"><text src="chapter01.xhtml#chap01s0001"/><audio src="Media_Overlay_Voice.mp3"clipBegin="0:00:00" clipEnd="0:00:00"/></par> audio要素 開始時間 終了時間
  67. 67. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 再生開始と再生終了の時間指定
  68. 68. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0<par id="sentence01"><text src="chapter01.xhtml#chap01s0001"/><audio src="Media_Overlay_Voice.mp3"clipBegin="0:00:35.123" clipEnd="0:00:43.804"/></par> 開始時間 終了時間
  69. 69. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0<par id="sentence01"><text src="chapter01.xhtml#chap01s0001"/><audio src="Media_Overlay_Voice.mp3"clipBegin="0:00:35.123" clipEnd="0:00:43.804"/></par> 35秒123ミリ秒 43秒804ミリ秒
  70. 70. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0時間指定の例: 03:08 (3分8秒) 0:07:12 (7分12秒) 0:00:08.570(8秒570ミリ秒) 1:02:48.210(1時間2分48秒210ミリ秒) 5. SMIL 3.0 Timing and Synchronization Clock values http://www.w3.org/TR/SMIL3/smil-timing.html#q22
  71. 71. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0ツールの紹介: Audacity オーダシティ 無償で利用できるクロスプラットフォームのサウンド編集ツール http://audacity.sourceforge.net/?lang=ja
  72. 72. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0Audacity オーダシティ http://audacity.sourceforge.net/?lang=ja
  73. 73. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0パッケージドキュメントに 情報を追加
  74. 74. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
  75. 75. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0<?xml version="1.0" encoding="UTF-8"?><package xmlns="http://www.idpf.org/2007/opf"unique-identifier="pub-id" xml:lang="ja" version="3.0"> <metadata> matadata要素 - 書誌情報 </metadata> <manifest> manifest要素 - 出版物のリソース </manifest> <spine> spine要素 - 読む順番 </spine></package>
  76. 76. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0<?xml version="1.0" encoding="UTF-8"?><package xmlns="http://www.idpf.org/2007/opf"unique-identifier="pub-id" xml:lang="ja" version="3.0"> 情報の追加 <metadata> matadata要素 - 書誌情報 </metadata> 情報の追加 <manifest> manifest要素 - 出版物のリソース </manifest> <spine> spine要素 - 読む順番 </spine></package>
  77. 77. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0メタデータの追加: <meta property="media:duration" refines="#chapter01_overlay">0:01:30.270</meta> <meta property="media:duration" refines="#chapter02_overlay">0:01:18.300</meta> <meta property="media:duration">0:02:48.570</meta> <meta property="media:narrator">Youji Sakai</meta> <meta property="media:active-class"> -epub-media-overlay-active</meta>
  78. 78. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0メタデータの追加: <meta property="media:duration" refines="#chapter01_overlay">0:01:30.270</meta> <meta property="media:duration" refines="#chapter02_overlay">0:01:18.300</meta> <meta property="media:duration">0:02:48.570</meta> 音声ファイルの再生時間 <meta property="media:narrator">Youji Sakai</meta> <meta property="media:active-class"> -epub-media-overlay-active</meta>
  79. 79. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0メタデータの追加: <meta property="media:duration" refines="#chapter01_overlay">0:01:30.270</meta> <meta property="media:duration" refines="#chapter02_overlay">0:01:18.300</meta> 例: <meta property="media:duration">0:02:48.570</meta> 第1章の再生時間と第2章の再生時間 <meta property="media:narrator">Youji Sakai</meta> <meta property="media:active-class"> -epub-media-overlay-active</meta>
  80. 80. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0メタデータの追加: <meta property="media:duration" refines="#chapter01_overlay">0:01:30.270</meta> <meta property="media:duration" refines="#chapter02_overlay">0:01:18.300</meta> <meta property="media:duration">0:02:48.570</meta> <meta property="media:narrator">Youji Sakai</meta> <meta property="media:active-class"> ナレーターの名前 -epub-media-overlay-active</meta>
  81. 81. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0メタデータの追加: <meta property="media:duration" refines="#chapter01_overlay">0:01:30.270</meta> <meta property="media:duration" refines="#chapter02_overlay">0:01:18.300</meta> <meta property="media:duration">0:02:48.570</meta> 再生中の要素をハイライトさせる 任意のクラス名 <meta property="media:narrator">Youji Sakai</meta> <meta property="media:active-class"> -epub-media-overlay-active</meta>
  82. 82. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0メタデータ: <meta property="media:active-class"> -epub-media-overlay-active</meta>CSS: .-epub-media-overlay-active { background-color: yellow; }おはようございます。今日は、良い天気ですね。がんばりましょう。
  83. 83. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 開発ツールについて
  84. 84. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 開発ツールについて http://www.daisy.org DAISYコンソーシアムが 提供するリファレンスツール (見本となるツール)
  85. 85. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 開発ツールについて Tobi(トビ) テキストと音声を同期するコンテンツの作成 http://www.daisy.org/tobi/http://www.daisy.org DAISY Pipeline2 DAISYからEPUBに変換 http://www.daisy.org/pipeline2/
  86. 86. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 Tobi http://www.daisy.org/tobi/
  87. 87. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 Tobi http://www.daisy.org/tobi/
  88. 88. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 参考情報 (※注意:2012年10月現在の検証)EPUBコンテナ内のファイル構成
  89. 89. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 参考情報 (※注意:2012年10月現在の検証)
  90. 90. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 HTMLファイル SMILファイル 音声ファイルを同じ階層に 置かないと正しく 動作しない場合がある 参考情報 (※注意:2012年10月現在の検証)
  91. 91. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0作成したEPUBファイルを リーディングシステムで プレビューする
  92. 92. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 Readium http://readium.org/
  93. 93. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 ※バージョンにご注意:Version 0.5.3
  94. 94. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
  95. 95. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
  96. 96. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
  97. 97. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
  98. 98. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0パッケージドキュメントにメタデータを追加 <meta property="media:active-class"> -epub-media-overlay-active</meta>CSSファイルにスタイルを追加 .-epub-media-overlay-active { background-color: yellow; }おはようございます。今日は、良い天気ですね。がんばりましょう。
  99. 99. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
  100. 100. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
  101. 101. EPUB 3 Fixed Layout / Media Overlays音声ファイルの形式: MP3 MP4 AAC M4A AAC 不具合が発生しにくい (※注意:2012年10月現在の検証)
  102. 102. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 Android OSの環境スマートフォン, タブレット等
  103. 103. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 IDEAL Group Reader Beta https://play.google.com/store/apps/details?id=org.easyaccess.epubreader&hl=ja
  104. 104. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 IDEAL Group Reader Beta
  105. 105. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 Dropbox ・EPUBファイルをコピー ・EPUBファイルを選択 ・「このファイルを開く」から  Ideal Group Reader - Betaを  タップする IDEAL Group Reader Beta
  106. 106. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 EPUBファイルが表示される IDEAL Group Reader Beta
  107. 107. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 ダブルタップすると朗読開始 もう一度ダブルタップすると停止 IDEAL Group Reader Beta
  108. 108. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 音声データのないページでも 日本語の音声合成エンジンで 読み上げることができる IDEAL Group Reader Beta
  109. 109. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 音声合成エンジンの選択 TTS Settings IDEAL Group Reader Beta
  110. 110. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 TTS Settings IDEAL Group Reader Beta
  111. 111. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 TTS Settings 247円 IDEAL Group Reader Beta
  112. 112. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 SVOX Misaki 朗読の音声データがないページは、 この音声合成エンジンで読み上げる TTS Settings IDEAL Group Reader Beta
  113. 113. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 その他の機能: JavaScript利用可能 Interactive EPUB3 mode IDEAL Group Reader Beta
  114. 114. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 iOSの環境iPad, iPhone, iPod touch
  115. 115. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 iBooks http://itunes.apple.com/jp/app/ibooks/id364709193?mt=8
  116. 116. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 iBooks http://itunes.apple.com/jp/app/ibooks/id364709193?mt=8 iBooksの場合、 Fixed Layout modeに切り替える 必要がある
  117. 117. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 iBooks http://itunes.apple.com/jp/app/ibooks/id364709193?mt=8 通常モード(リフロー)では 機能しません。
  118. 118. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 Fixed Layout modeの電子書籍 iPad at Work Volume 2 Apple iBookstore
  119. 119. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 Fixed Layout modeの電子書籍 iPad at Work Volume 2 Apple iBookstore
  120. 120. EPUB 3 Fixed Layout / Media Overlays 固定レイアウト Fixed Layout
  121. 121. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 Fixed-Layoutテキストや図版を 画像化した 絶対配置 紙面を配置
  122. 122. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 Fixed-Layoutテキストや図版を 絶対配置 iPad at Work Volume 2
  123. 123. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 テキストや図版を絶対配置・座標値を指定してテキストや図版を配置する方法・文字サイズは固定されているものが多い リーディングシステム側で文字サイズの変更ができない・電子書籍のデータサイズは、 リフロー形式の電子書籍とあまり変わらない・テキストの選択や本文検索などは実行できる
  124. 124. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 Fixed-Layoutテキストや図版を 画像化した 絶対配置 紙面を配置
  125. 125. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0There Was an Old Monkey Who Swallowed a FrogAmazon Kindle Store 固定レイアウト(Kindle Format 8)
  126. 126. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 画像化した紙面を配置・DTPデータからイメージ変換する方法・もしくは、印刷物を取り込み、補正する方法・コミックや写真集、絵本などは、JPEG、PNGなどの ラスターグラフィックスが多い・雑誌や凝ったレイアウトの実用書などは、PDFが多い・リフロー形式やテキストや図版を絶対配置する方式と 比較した場合、データサイズが大きくなってしまう
  127. 127. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 Countrys Best Cabins Amazon Kindle Store プリントレプリカ 雑誌などはPDFベース
  128. 128. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 Fixed-Layoutテキストや図版を 画像化した 絶対配置 紙面を配置
  129. 129. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 2010年12月15日の アップデートでiBooksの 機能を拡張、 EPUBの固定レイアウトが 可能になった(独自拡張)
  130. 130. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 iBooks http://itunes.apple.com/jp/app/ibooks/id364709193?mt=8 Fixed Layout modeの 電子書籍にする手順
  131. 131. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 META-INF フォルダにiBooks専用のXMLファイルを 追加する
  132. 132. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
  133. 133. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0Fixed Layout modeに切り替えるXMLファイル com.apple.ibooks.display-options.xml
  134. 134. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 Fixed Layout modeに切り替えるXMLファイル<?xml version="1.0" encoding="UTF-8"?><display_options> <platform name="*"> <option name="fixed-layout">true</option> <option name="specified-fonts">true</option> </platform></display_options>
  135. 135. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0HTMLファイルにmeta要素の追加
  136. 136. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 HTMLファイルにmeta要素の追加記述例:<meta name="viewport" content="width=2048,height=1536"></meta>
  137. 137. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0CSSファイルにスタイルを追加
  138. 138. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 CSSファイルにスタイルを追加記述例: body { width: 2048px; height: 1536px;
  139. 139. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 CSSファイルにスタイルを追加記述例: body { width: 2048px; height: 1536px;HTMLファイル<meta name="viewport" content="width=2048,height=1536"></meta>
  140. 140. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 CSSファイルに レイアウトスタイルを追加
  141. 141. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 テキストや図版などの要素を絶対配置
  142. 142. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 CSSファイルに レイアウトスタイルを追加 見出し・本文のブロックに適用 div.chapter {絶対配置 position: absolute; top: 70px; left: 70px; width: 1908px; }
  143. 143. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 CSSファイルに レイアウトスタイルを追加 見出し・本文のブロックに適用 div.chapter { 絶対配置 position: absolute; 左上から下に70px top: 70px; 左上から右に70px left: 70px;ブロックの幅は1908px width: 1908px; }
  144. 144. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 CSSファイルに レイアウトスタイルを追加ページ全体の領域 見出し・本文のブロックに適用body { div.chapter { width: 2048px; position: absolute; height: 1536px; top: 70px; left: 70px; width: 1908px; }
  145. 145. EPUB 3 Fixed Layout / EPUB Media Overlays 3.070px 1908px 70px 2048px
  146. 146. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0・META-INF フォルダに iBooks専用のXMLファイルを追加する・HTMLファイルにmeta要素の追加・CSSファイルにスタイルを追加・CSSファイルにレイアウトスタイルを追加
  147. 147. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0iBooksでプレビューする
  148. 148. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 DropboxにEPUBファイルを コピーしてiPadで選択
  149. 149. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 DropboxにEPUBファイルを コピーしてiPadで選択
  150. 150. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 iBooks Fixed Layout mode
  151. 151. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
  152. 152. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
  153. 153. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
  154. 154. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 テキストや図版などの要素を絶対配置
  155. 155. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 iBooks Fixed Layout mode
  156. 156. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0絶対配置されたテキストは選択可能、検索の対象 iPad at Work Volume 2 Apple iBookstore
  157. 157. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
  158. 158. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
  159. 159. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0複雑なレイアウトは固定レイアウトではなくレプリカ .net Apple Newsstand レプリカ (PDFベース)
  160. 160. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 EPUB 3 Fixed-Layout Documents http://idpf.org/epub/fxl/
  161. 161. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 EPUB 3 Fixed-Layout Documents・IDPFの情報文書(Informational Document)・IDPF EPUB working group が作成・2012年3月13日、IDPF 理事会によって承認
  162. 162. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0EPUB 3 Fixed-Layout Documentsプロパティ Prefixマッピング・rendition:layout 対応付け・rendition:orientation・rendition:spread・page-spread-* コンテント ディメンションズ 機能 領域
  163. 163. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0プロパティの定義Property Definitions・リフロー/ページ区切りの指定・スクリーンの方向(縦・横)・見開きの指定・見開きの配置指定(左・右・中央)
  164. 164. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0プロパティの定義Property Definitions・リフロー/ページ区切りの指定 rendition:layout プロパティ・スクリーンの方向(縦・横) rendition:orientation プロパティ・見開きの指定 rendition:spread プロパティ・見開きの配置指定(左・右・中央) page-spread-* プロパティ
  165. 165. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0EPUB 3 Fixed-Layout Documentsプロパティ Prefixマッピング・rendition:layout 対応付け・rendition:orientation・rendition:spread・page-spread-* コンテント ディメンションズ 機能 領域
  166. 166. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 Prefixマッピング Prefix Mapping prefix属性で URI http://www.idpf.org/vocab/rendition/# にマッピング<package …prefix="rendition: http://www.idpf.org/vocab/rendition/#"></package>
  167. 167. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0EPUB 3 Fixed-Layout Documentsプロパティ Prefixマッピング・rendition:layout 対応付け・rendition:orientation・rendition:spread・page-spread-* コンテント ディメンションズ 機能 領域
  168. 168. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 コンテント・ディメンションズ Content dimensions meta要素のviewportで指定<head><meta name="viewport" content="width=1200, height=600" /></head><head><meta name="viewport" content="width=512, height=600" /></head>
  169. 169. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0コンテント・ディメンションズ XHTMLContent dimensionsmeta要素のviewportで指定Prefixマッピング パッケージドキュメントPrefix Mappingprefix属性で URIhttp://www.idpf.org/vocab/rendition/# にマッピングプロパティの定義 パッケージドキュメントProperty Definitions
  170. 170. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0公開されているEPUB3固定レイアウトのサンプル epub-samples http://code.google.com/p/epub-samples/ ダウンロードリスト http://code.google.com/p/epub-samples/downloads/list
  171. 171. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 epub-samples
  172. 172. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 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
  173. 173. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 page-blanche-20120314.epub
  174. 174. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 page-blanche-20120314.epub
  175. 175. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 page-blanche-20120314.epub パッケージドキュメント(.opf)
  176. 176. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 page-blanche-20120314.epub
  177. 177. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0EPUB 3 Fixed-Layout Documentsプロパティ Prefixマッピング・rendition:layout 対応付け・rendition:orientation・rendition:spread・page-spread-* コンテント ディメンションズ 機能 領域
  178. 178. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 page-blanche-20120314.epub コンテンツキュメント(.xhtml)
  179. 179. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 page-blanche-20120314.epub XHTMLファイル
  180. 180. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0EPUB 3 Fixed-Layout Documentsプロパティ Prefixマッピング・rendition:layout 対応付け・rendition:orientation・rendition:spread・page-spread-* コンテント ディメンションズ 機能 領域
  181. 181. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 page-blanche-20120314.epub 1200 1577px
  182. 182. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 page-blanche-20120314.epub パッケージドキュメント(.opf)
  183. 183. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 page-blanche-20120314.epub
  184. 184. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 パッケージ<?xml version="1.0" encoding="UTF-8"?> ドキュメント<package xmlns="http://www.idpf.org/2007/opf"unique-identifier="pub-id" xml:lang="ja" version="3.0"> <metadata> matadata要素 - 書誌情報 </metadata> <manifest> manifest要素 - 出版物のリソース </manifest> <spine> spine要素 - 読む順番 </spine></package>
  185. 185. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 rendition:layout プロパティ ・reflowable(リフロー) ・pre-paginated(ページ区切り)<meta property="rendition:layout">reflowable</meta><meta property="rendition:layout">pre-paginated</meta>
  186. 186. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 page-blanche-20120314.epub
  187. 187. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 rendition:orientation プロパティ ・landscape(横方向) ・portrait(縦方向) ・auto(制限なし)<meta property="rendition:orientation">landscape</meta><meta property="rendition:orientation">portrait</meta>
  188. 188. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 page-blanche-20120314.epub
  189. 189. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 rendition:spread プロパティ ・none ・landscape(横方向のみ) ・portrait(縦方向のみ) ・both(横方向・縦方向) ・auto(制限なし)<meta property="rendition:spread">landscape</meta><meta property="rendition:spread">portrait</meta><meta property="rendition:spread">both</meta>
  190. 190. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 rendition:layout プロパティpre-paginated(ページ区切り)rendition:orientation プロパティ auto(制限なし) rendition:spread プロパティ auto(制限なし)
  191. 191. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
  192. 192. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
  193. 193. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
  194. 194. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
  195. 195. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0例:ランドスケープモード(横向き)にすると見開きで表示されるランドスケープモード(横向き)では、見開きではなく、シングルページの拡大表示で読みたい、という読者もいる
  196. 196. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 rendition:layout プロパティpre-paginated(ページ区切り)rendition:orientation プロパティ auto(制限なし) rendition:spread プロパティ auto(制限なし)
  197. 197. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0読者が、シングルページ、ダブルページ(見開き)を自由に選択できたほうがよい場合もある
  198. 198. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 見開きの配置指定
  199. 199. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 page-spread-* プロパティ 見開きの配置指定(左・右・中央)・page-spread-left プロパティ(左側に配置)・page-spread-right プロパティ(右側に配置)・rendition:page-spread-center(中央に配置)
  200. 200. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 パッケージ<?xml version="1.0" encoding="UTF-8"?> ドキュメント<package xmlns="http://www.idpf.org/2007/opf"unique-identifier="pub-id" xml:lang="ja" version="3.0"> <metadata> matadata要素 - 書誌情報 </metadata> <manifest> manifest要素 - 出版物のリソース </manifest> <spine> spine要素 - 読む順番 </spine></package>
  201. 201. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 page-spread-* プロパティ<itemref id="titlepage"properties="page-spread-rightrendition:layout-pre-paginated"/> タイトルページは右側に配置する
  202. 202. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
  203. 203. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
  204. 204. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
  205. 205. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 page-spread-* プロパティ<itemref id="titlepage"properties="page-spread-rightrendition:layout-pre-paginated"/>spine itemref要素でこのように指定してもよい
  206. 206. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 page-spread-* プロパティ<itemref id="titlepage"properties="page-spread-rightrendition:layout-pre-paginated"/> タイトルページは固定レイアウト タイトルページは右側に配置する
  207. 207. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 補足<meta property="rendition:layout">pre-paginated</meta><itemref id="titlepage"properties="page-spread-rightrendition:layout-pre-paginated"/>
  208. 208. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0EPUB 3 固定レイアウトの ワークフロー
  209. 209. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 EPUB 3 電子書籍のワークフロー・プロジェクトスコープの設定・プラットフォームの選定(※今回は読書環境の選定)・対象となるリーディングシステムのデフォルトスタイルおよび実装状況の確認・技術コンセプトの策定・アクセシビリティ指針の決定・予算策定(※今回は省きます)・素材の品質チェック・設計・コーディング(開発ツールを使う場合は省略)・実機検証、評価
  210. 210. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 EPUB 3 電子書籍のワークフロー・プロジェクトスコープの設定・プラットフォームの選定(※今回は読書環境の選定)・対象となるリーディングシステムのデフォルトスタイルおよび実装状況の確認・技術コンセプトの策定・アクセシビリティ指針の決定・予算策定(※今回は省きます)・素材の品質チェック・設計・コーディング(開発ツールを使う場合は省略)・実機検証、評価
  211. 211. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0リフロー(行の折り返し処理)電子書籍の場合
  212. 212. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0CSSなしのEPUBファイルを準備
  213. 213. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 Adobe Digital Editions 1.8.x
  214. 214. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 Adobe Digital Editions 1.8.x
  215. 215. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 Android - Himawari Reader Pro
  216. 216. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 iBooks
  217. 217. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 検証用のEPUBファイルを準備 *{ margin: 0; padding: 0; }
  218. 218. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 iBooks
  219. 219. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 Himawari Reader Pro
  220. 220. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0デフォルトスタイル スタイルのリセット
  221. 221. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0デフォルトのスタイルをリセットしてから 上書き可能なスタイルを調べる
  222. 222. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0デフォルトのスタイルをリセットしてから 上書き可能なスタイルを調べる(※この作業がないと製作コスト増) 試行錯誤を何度も繰り返すことになる
  223. 223. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 EPUB 3 電子書籍のワークフロー・プロジェクトスコープの設定・プラットフォームの選定(※今回は読書環境の選定)・対象となるリーディングシステムのデフォルトスタイルおよび実装状況の確認・技術コンセプトの策定 ※リフローの電子書籍では必須・アクセシビリティ指針の決定・予算策定(※今回は省きます)・素材の品質チェック・設計・コーディング(開発ツールを使う場合は省略)・実機検証、評価
  224. 224. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0固定レイアウトの電子書籍は、 自動化できるため、ワークフローは簡素化される
  225. 225. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 EPUB 3 電子書籍のワークフロー・プロジェクトスコープの設定・プラットフォームの選定(※今回は読書環境の選定)・対象となるリーディングシステムのデフォルトスタイルおよび実装状況の確認・技術コンセプトの策定 ※固定レイアウトの電子書籍では必須・アクセシビリティ指針の決定・予算策定(※今回は省きます)・素材の品質チェック・設計・コーディング(開発ツールを使う場合は省略)・実機検証、評価
  226. 226. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 参考情報: 固定レイアウトをサポートした開発ツールFUSEe ver.1.0EPUB 3 固定レイアウト(iBooks 仕様も含む)も対応http://fusee.jpTigris Plus(ティグリス プラス)ブラウザベースのEPUBオーサリングツールEPUB 3 固定レイアウト(iBooks 仕様も含む)に対応http://tigris.jp
  227. 227. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0固定レイアウトの利用例
  228. 228. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0EPUB 3 Fixed-Layout DocumentsAppendix A. Examples http://idpf.org/epub/fxl/#examples
  229. 229. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 Example 1・固定レイアウト・横向きでは合成された見開き・縦向きでは見開きにしない
  230. 230. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 Example 1
  231. 231. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 Example 2・固定レイアウト・合成された見開きにしない・横向きで固定
  232. 232. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 Example 2
  233. 233. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 Example 3・リフローのコンテンツ・タイトルページだけ固定レイアウト・合成された見開きを表示するときは 右側に配置
  234. 234. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 Example 3
  235. 235. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 Example 5・リフローのコンテンツ・固定レイアウトの 右配置ページと左配置ページを 合成された見開きページとして表示・リフローのページも見開き表示のまま
  236. 236. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 Example 5
  237. 237. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 Example 7・固定レイアウト・横向きでは合成された見開き・縦向きでは見開きにしない・進行方向は右から左(日本のマンガ)
  238. 238. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 Example 7
  239. 239. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 デモンストレーションを ご覧ください
  240. 240. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0Kindle 固定レイアウトとの違い
  241. 241. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0Free Kindle Apps - Read eBooks on your Phone, Tablet, or Computer http://amzn.to/nuQtcH
  242. 242. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 スマートフォン 専用端末ウェブブラウザ パソコン
  243. 243. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0日用品から食品、家電、衣類など何でも買えるアマゾンのアカウント
  244. 244. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 Kindle Format 8 http://amzn.to/poyUKN
  245. 245. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 HTML5EPUB 3 Kindle Format 8
  246. 246. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 Children s Fiction books Technical Comics and andengineering graphic novels
  247. 247. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0絵本 文芸書実用書 漫画
  248. 248. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 ルーツが同じ ベースの技術が同じなので変換しやすいEPUB 3 Kindle Format 8
  249. 249. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 最後に一言
  250. 250. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 標準仕様の捉え方 Specification oriented スペスィフィケーション・オリエンテッドImplementation oriented インプリメンテーション・オリエンテッド
  251. 251. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 標準仕様の捉え方 Specification oriented スペスィフィケーション・オリエンテッドImplementation oriented インプリメンテーション・オリエンテッド
  252. 252. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 標準仕様の捉え方 Specification oriented スペスィフィケーション・オリエンテッドImplementation oriented インプリメンテーション・オリエンテッド
  253. 253. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0 標準仕様の捉え方 Specification oriented スペスィフィケーション・オリエンテッド 仕様策定の後、決められたとおりに実装するImplementation oriented インプリメンテーション・オリエンテッド実装され実績のあるものが仕様に採択されていく(勧告候補に記載されるには2つ以上の実装例が必要)
  254. 254. EPUB 3の最新情報はIDPFのサイトで確認してください http://idpf.org/
  255. 255. Thank you for your attention. ご清聴ありがとうございました
  256. 256. EPUB3技術解説セミナー3 固定レイアウト/アクセシビリティ 2012年10月24日(水)16:00 境祐司 @commonstyle ¦ 電子書籍メディア論
  257. 257. community 電子書籍メデ ア論 ィ http://www.facebook.com/eBookStrategy デザインの未来http://www.facebook.com/TheFutureDesign

×