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
×

20121024 sakai epubsem_accessibility

6,324

Published on

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,324
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
43
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

20121024 sakai epubsem_accessibility

  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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×