More Related Content
More from Youji Sakai (12)
EPUB Media Overlays 3.0とFixed Layout(固定レイアウト)
- 2. profile
YOUJI SAKAI
Instructional Designer | eBook Designer
境祐司
- 3. BOOKS
ウェブレイアウトの EPUB3スタンダード Webデザイン基礎
教科書 デザインガイド 改訂3版
InDesign CS6で作るEPUB 3 標準ガイドブック
森 裕司, 境 祐司, 林 拓也, 向井 領治
- 4. community
電子書籍メデ ア論
ィ
http://www.facebook.com/eBookStrategy
デザインの未来
http://www.facebook.com/TheFutureDesign
- 7. EPUB 3 Fixed Layout / Media Overlays
最新ニュース
今朝、iBooksが3.0にアップデート
・iBookstoreで購入してiCloudに保管したすべてのブックは、
iOS 6の本棚で直接見ることができます
・新しいスクロールテーマを使って、指でフリックしてブックを
上下方向にスクロールできます
・購入したブックの無料のアップデート(新しい章や訂正など)を
受信できます
・iOS 6では、語句の定義をドイツ語、スペイン語、フランス語、
日本語、および中国語(簡体字)で検索できます
・お気に入りのブックについて考えたことを、Facebook、
Twitter、メッセージ、またはメールで友達と共有できます
- 13. EPUB 3 Fixed Layout / Media Overlays
あとは、iBookstoreの
国内サービス開始を待つだけ
- 15. EPUB 3 Fixed Layout / Media Overlays
アクセシビリティ
EPUB Media Overlays 3.0
- 16. EPUB 3 Fixed Layout / Media Overlays
アクセシビリティ
EPUB Media Overlays 3.0
http://idpf.org/ http://www.w3.org http://www.daisy.org
- 19. EPUB 3 Fixed Layout / Media Overlays
EPUB Media Overlays 3.0
http://idpf.org/epub/30/spec/epub30-mediaoverlays.html
EPUB 3
EPUB Publications 3.0
EPUB Content Documents 3.0
EPUB Open Container Format (OCF) 3.0
EPUB Media Overlays 3.0
- 20. EPUB 3 Fixed Layout / Media Overlays
EPUB Media Overlays 3.0
SMIL
Synchronized Multimedia Integration Language
- 21. EPUB 3 Fixed Layout / Media Overlays
EPUB Media Overlays 3.0
SMIL
Synchronized Multimedia Integration Language
同期マルチメディアの統合言語
1998年6月 SMIL 1.0 がW3Cで勧告
2005年12月 SMIL 2.1
2008年12月 SMIL 3.0
http://www.w3.org/TR/SMIL3/
- 22. EPUB 3 Fixed Layout / Media Overlays
EPUB Media Overlays 3.0 を利用した
テキストと音声が同期する電子書籍の作成
- 23. EPUB 3 Fixed Layout / Media Overlays
EPUB 3のファイルをベースにして作成
・朗読音声の準備
・コンテンツドキュメントにid属性を割り振る
・SMAILファイルの作成
・パッケージドキュメントに情報を追加
- 25. EPUB 3 Fixed Layout / Media Overlays
・必須のmimetype
・必須のMETA-INF
(container.xml)
・必須のパッケージドキュメント
・必須のナビゲーションドキュメント(目次)
・そして、コンテンツ(ページや画像など)
EPUBのルールで圧縮
- 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. EPUB 3 Fixed Layout / Media Overlays
音声ファイルの形式:
MP3 MP4 AAC M4A AAC
不具合が発生しにくい
(※注意:2012年10月現在の検証)
- 30. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
コンテンツドキュメントに
id属性を割り振る
- 32. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
EPUB コンテンツドキュメント
- 34. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
ドキュメント構成要素の確認
- 35. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
見出しレベル1
リード文
本文(段落1)
本文(段落2)
ドキュメント構成要素の確認
- 37. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
朗読のセンテンスを決める
- 39. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
センテンスにid属性を追加
- 41. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
書籍はページごとにパーマリンクがあり、「書籍
Aの60ページで紹介されている技術は、書籍 Bの
200ページに詳しく書かれている。」といった、
ウェブでは当たり前のハイパーリンク機能が生かせ
ます。すべての本が解体され、知のまとまりとして
利用できるわけです。
- 42. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
書籍はページごとにパーマリンクがあり、「書籍
Aの60ページで紹介されている技術は、書籍 Bの
200ページに詳しく書かれている。」といった、
ウェブでは当たり前のハイパーリンク機能が生かせ
ます。
すべての本が解体され、知のまとまりとして利用で
きるわけです。
- 43. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
<span id="chap01s0003">書籍はページごとに
パーマリンクがあり、「書籍 Aの60ページで紹介
されている技術は、書籍 Bの200ページに詳しく
書かれている。」といった、ウェブでは当たり前の
ハイパーリンク機能が生かせます。</span>
<span id="chap01s0004">すべての本が解体さ
れ、知のまとまりとして利用できるわけです。
</span>
- 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. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
SMILファイルの作成
- 47. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
page1.smil
- 48. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
SMILファイル作成の手順
- 49. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
基本ブロック
smil要素, body要素, seq要素
- 50. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
詳細ブロック
par要素(とid属性)を追加
- 51. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
text要素とaudio要素を追加
- 52. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
再生開始と再生終了の時間指定
- 53. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
Media Overlays 要素
- 54. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
基本ブロック
smil要素, body要素, seq要素
- 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. 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. 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. 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. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
詳細ブロック
par要素(とid属性)を追加
- 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. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
text要素とaudio要素を追加
- 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. 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. 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月、オライリーメディ
アとピアソン・エデュケーションは共同事業である「Safari
Books Online」をスタートさせました。</span>
- 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. 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. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
再生開始と再生終了の時間指定
- 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. 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. 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. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
ツールの紹介:
Audacity オーダシティ
無償で利用できるクロスプラットフォームのサウンド編集ツール
http://audacity.sourceforge.net/?lang=ja
- 72. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
Audacity オーダシティ http://audacity.sourceforge.net/?lang=ja
- 73. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
パッケージドキュメントに
情報を追加
- 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. 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. 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. 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. 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. 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. 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. 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;
}
おはようございます。今日は、良い天気ですね。がんばりましょう。
- 84. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
開発ツールについて
http://www.daisy.org
DAISYコンソーシアムが
提供するリファレンスツール
(見本となるツール)
- 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. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
Tobi
http://www.daisy.org/tobi/
- 87. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
Tobi
http://www.daisy.org/tobi/
- 88. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
参考情報 (※注意:2012年10月現在の検証)
EPUBコンテナ内のファイル構成
- 89. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
参考情報 (※注意:2012年10月現在の検証)
- 90. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
HTMLファイル
SMILファイル
音声ファイルを同じ階層に
置かないと正しく
動作しない場合がある
参考情報
(※注意:2012年10月現在の検証)
- 91. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
作成したEPUBファイルを
リーディングシステムで
プレビューする
- 92. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
Readium
http://readium.org/
- 93. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
※バージョンにご注意:Version 0.5.3
- 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;
}
おはようございます。今日は、良い天気ですね。がんばりましょう。
- 101. EPUB 3 Fixed Layout / Media Overlays
音声ファイルの形式:
MP3 MP4 AAC M4A AAC
不具合が発生しにくい
(※注意:2012年10月現在の検証)
- 102. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
Android OSの環境
スマートフォン, タブレット等
- 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. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
IDEAL Group Reader Beta
- 105. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
Dropbox
・EPUBファイルをコピー
・EPUBファイルを選択
・「このファイルを開く」から
Ideal Group Reader - Betaを
タップする
IDEAL Group Reader Beta
- 106. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
EPUBファイルが表示される
IDEAL Group Reader Beta
- 107. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
ダブルタップすると朗読開始
もう一度ダブルタップすると停止
IDEAL Group Reader Beta
- 108. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
音声データのないページでも
日本語の音声合成エンジンで
読み上げることができる
IDEAL Group Reader Beta
- 109. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
音声合成エンジンの選択
TTS Settings
IDEAL Group Reader Beta
- 110. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
TTS Settings
IDEAL Group Reader Beta
- 111. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
TTS Settings
247円
IDEAL Group Reader Beta
- 112. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
SVOX Misaki
朗読の音声データがないページは、
この音声合成エンジンで読み上げる
TTS Settings
IDEAL Group Reader Beta
- 113. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
その他の機能:
JavaScript利用可能
Interactive EPUB3 mode
IDEAL Group Reader Beta
- 114. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
iOSの環境
iPad, iPhone, iPod touch
- 115. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
iBooks
http://itunes.apple.com/jp/app/ibooks/id364709193?mt=8
- 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. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
iBooks
http://itunes.apple.com/jp/app/ibooks/id364709193?mt=8
通常モード(リフロー)では
機能しません。
- 118. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
Fixed Layout modeの電子書籍
iPad at Work
Volume 2
Apple iBookstore
- 119. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
Fixed Layout modeの電子書籍
iPad at Work
Volume 2
Apple iBookstore
- 120. EPUB 3 Fixed Layout / Media Overlays
固定レイアウト
Fixed Layout
- 121. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
Fixed-Layout
テキストや図版を 画像化した
絶対配置 紙面を配置
- 122. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
Fixed-Layout
テキストや図版を
絶対配置 iPad at Work Volume 2
- 123. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
テキストや図版を絶対配置
・座標値を指定してテキストや図版を配置する方法
・文字サイズは固定されているものが多い
リーディングシステム側で文字サイズの変更ができない
・電子書籍のデータサイズは、
リフロー形式の電子書籍とあまり変わらない
・テキストの選択や本文検索などは実行できる
- 124. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
Fixed-Layout
テキストや図版を 画像化した
絶対配置 紙面を配置
- 125. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
There Was an Old Monkey Who Swallowed a Frog
Amazon Kindle Store
固定レイアウト(Kindle Format 8)
- 126. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
画像化した紙面を配置
・DTPデータからイメージ変換する方法
・もしくは、印刷物を取り込み、補正する方法
・コミックや写真集、絵本などは、JPEG、PNGなどの
ラスターグラフィックスが多い
・雑誌や凝ったレイアウトの実用書などは、PDFが多い
・リフロー形式やテキストや図版を絶対配置する方式と
比較した場合、データサイズが大きくなってしまう
- 127. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
Country's Best Cabins
Amazon Kindle Store
プリントレプリカ
雑誌などはPDFベース
- 128. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
Fixed-Layout
テキストや図版を 画像化した
絶対配置 紙面を配置
- 129. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
2010年12月15日の
アップデートでiBooksの
機能を拡張、
EPUBの固定レイアウトが
可能になった(独自拡張)
- 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. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
META-INF フォルダに
iBooks専用のXMLファイルを
追加する
- 133. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
Fixed Layout modeに切り替えるXMLファイル
com.apple.ibooks.display-options.xml
- 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. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
HTMLファイルにmeta要素の追加
- 136. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
HTMLファイルにmeta要素の追加
記述例:
<meta name="viewport" content="width=2048,height=1536">
</meta>
- 137. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
CSSファイルにスタイルを追加
- 138. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
CSSファイルにスタイルを追加
記述例:
body {
width: 2048px;
height: 1536px;
- 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. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
CSSファイルに
レイアウトスタイルを追加
- 141. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
テキストや図版などの要素を絶対配置
- 142. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
CSSファイルに
レイアウトスタイルを追加
見出し・本文のブロックに適用
div.chapter {
絶対配置 position: absolute;
top: 70px;
left: 70px;
width: 1908px;
}
- 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. 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. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
70px 1908px 70px
2048px
- 146. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
・META-INF フォルダに
iBooks専用のXMLファイルを追加する
・HTMLファイルにmeta要素の追加
・CSSファイルにスタイルを追加
・CSSファイルにレイアウトスタイルを追加
- 147. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
iBooksでプレビューする
- 148. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
DropboxにEPUBファイルを
コピーしてiPadで選択
- 149. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
DropboxにEPUBファイルを
コピーしてiPadで選択
- 150. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
iBooks
Fixed Layout mode
- 154. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
テキストや図版などの要素を絶対配置
- 155. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
iBooks Fixed Layout mode
- 156. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
絶対配置されたテキストは選択可能、検索の対象
iPad at Work
Volume 2
Apple iBookstore
- 159. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
複雑なレイアウトは固定レイアウトではなくレプリカ
.net
Apple Newsstand
レプリカ
(PDFベース)
- 160. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
EPUB 3
Fixed-Layout
Documents
http://idpf.org/epub/fxl/
- 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. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
EPUB 3 Fixed-Layout Documents
プロパティ Prefixマッピング
・rendition:layout 対応付け
・rendition:orientation
・rendition:spread
・page-spread-* コンテント
ディメンションズ
機能
領域
- 163. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
プロパティの定義
Property Definitions
・リフロー/ページ区切りの指定
・スクリーンの方向(縦・横)
・見開きの指定
・見開きの配置指定(左・右・中央)
- 164. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
プロパティの定義
Property Definitions
・リフロー/ページ区切りの指定
rendition:layout プロパティ
・スクリーンの方向(縦・横)
rendition:orientation プロパティ
・見開きの指定
rendition:spread プロパティ
・見開きの配置指定(左・右・中央)
page-spread-* プロパティ
- 165. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
EPUB 3 Fixed-Layout Documents
プロパティ Prefixマッピング
・rendition:layout 対応付け
・rendition:orientation
・rendition:spread
・page-spread-* コンテント
ディメンションズ
機能
領域
- 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. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
EPUB 3 Fixed-Layout Documents
プロパティ Prefixマッピング
・rendition:layout 対応付け
・rendition:orientation
・rendition:spread
・page-spread-* コンテント
ディメンションズ
機能
領域
- 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. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
コンテント・ディメンションズ XHTML
Content dimensions
meta要素のviewportで指定
Prefixマッピング パッケージドキュメント
Prefix Mapping
prefix属性で URI
http://www.idpf.org/vocab/rendition/# にマッピング
プロパティの定義 パッケージドキュメント
Property Definitions
- 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. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
epub-samples
- 172. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
EPUB3固定レイアウトのサンプル
haruko-html-jpeg-20120524.epub
Fixed layout manga, jpeg embedded in xhtml
haruko-jpeg-20120524.epub
Fixed layout manga, jpeg directly in the spine
sous-le-vent_svg-in-spine-20120418.epub
fixed-layout document, using SVG in spine
svg-in-spine-20120417.epub
fixed-layout document, using SVG in spine
sous-le-vent-20120403.epub
fixed-layout document, using SVG embedded in XHTML
cole-voyage-of-life-20120320.epub
reflowable content with interspersed fixed-layout pages
page-blanche-20120314.epub
fixed layout document, using XHTML spine items that embed bitmaps
- 173. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
page-blanche-20120314.epub
- 174. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
page-blanche-20120314.epub
- 175. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
page-blanche-20120314.epub
パッケージドキュメント(.opf)
- 176. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
page-blanche-20120314.epub
- 177. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
EPUB 3 Fixed-Layout Documents
プロパティ Prefixマッピング
・rendition:layout 対応付け
・rendition:orientation
・rendition:spread
・page-spread-* コンテント
ディメンションズ
機能
領域
- 178. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
page-blanche-20120314.epub
コンテンツキュメント(.xhtml)
- 179. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
page-blanche-20120314.epub
XHTMLファイル
- 180. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
EPUB 3 Fixed-Layout Documents
プロパティ Prefixマッピング
・rendition:layout 対応付け
・rendition:orientation
・rendition:spread
・page-spread-* コンテント
ディメンションズ
機能
領域
- 181. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
page-blanche-20120314.epub
1200 1577px
- 182. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
page-blanche-20120314.epub
パッケージドキュメント(.opf)
- 183. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
page-blanche-20120314.epub
- 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. 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. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
page-blanche-20120314.epub
- 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. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
page-blanche-20120314.epub
- 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. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
rendition:layout プロパティ
pre-paginated(ページ区切り)
rendition:orientation プロパティ
auto(制限なし)
rendition:spread プロパティ
auto(制限なし)
- 195. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
例:
ランドスケープモード(横向き)にすると
見開きで表示される
ランドスケープモード(横向き)では、
見開きではなく、シングルページの
拡大表示で読みたい、という読者もいる
- 196. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
rendition:layout プロパティ
pre-paginated(ページ区切り)
rendition:orientation プロパティ
auto(制限なし)
rendition:spread プロパティ
auto(制限なし)
- 197. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
読者が、シングルページ、
ダブルページ(見開き)を自由に選択
できたほうがよい場合もある
- 199. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
page-spread-* プロパティ
見開きの配置指定(左・右・中央)
・page-spread-left プロパティ
(左側に配置)
・page-spread-right プロパティ
(右側に配置)
・rendition:page-spread-center
(中央に配置)
- 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. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
page-spread-* プロパティ
<itemref id="titlepage"
properties="page-spread-right
rendition:layout-pre-paginated"/>
タイトルページは右側に配置する
- 205. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
page-spread-* プロパティ
<itemref id="titlepage"
properties="page-spread-right
rendition:layout-pre-paginated"/>
spine itemref要素でこのように指定してもよい
- 206. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
page-spread-* プロパティ
<itemref id="titlepage"
properties="page-spread-right
rendition:layout-pre-paginated"/>
タイトルページは固定レイアウト
タイトルページは右側に配置する
- 207. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
補足
<meta property="rendition:layout">
pre-paginated
</meta>
<itemref id="titlepage"
properties="page-spread-right
rendition:layout-pre-paginated"/>
- 208. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
EPUB 3 固定レイアウトの
ワークフロー
- 209. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
EPUB 3 電子書籍のワークフロー
・プロジェクトスコープの設定
・プラットフォームの選定(※今回は読書環境の選定)
・対象となるリーディングシステムのデフォルトスタイルおよび実装状況の確認
・技術コンセプトの策定
・アクセシビリティ指針の決定
・予算策定(※今回は省きます)
・素材の品質チェック
・設計
・コーディング(開発ツールを使う場合は省略)
・実機検証、評価
- 210. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
EPUB 3 電子書籍のワークフロー
・プロジェクトスコープの設定
・プラットフォームの選定(※今回は読書環境の選定)
・対象となるリーディングシステムのデフォルトスタイルおよび実装状況の確認
・技術コンセプトの策定
・アクセシビリティ指針の決定
・予算策定(※今回は省きます)
・素材の品質チェック
・設計
・コーディング(開発ツールを使う場合は省略)
・実機検証、評価
- 211. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
リフロー(行の折り返し処理)電子書籍の場合
- 212. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
CSSなしのEPUBファイルを準備
- 213. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
Adobe Digital Editions 1.8.x
- 214. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
Adobe Digital Editions 1.8.x
- 215. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
Android - Himawari Reader Pro
- 217. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
検証用のEPUBファイルを準備
*{
margin: 0;
padding: 0;
}
- 219. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
Himawari Reader Pro
- 220. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
デフォルトスタイル スタイルのリセット
- 221. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
デフォルトのスタイルをリセットしてから
上書き可能なスタイルを調べる
- 222. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
デフォルトのスタイルをリセットしてから
上書き可能なスタイルを調べる
(※この作業がないと製作コスト増)
試行錯誤を何度も繰り返すことになる
- 223. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
EPUB 3 電子書籍のワークフロー
・プロジェクトスコープの設定
・プラットフォームの選定(※今回は読書環境の選定)
・対象となるリーディングシステムのデフォルトスタイルおよび実装状況の確認
・技術コンセプトの策定 ※リフローの電子書籍では必須
・アクセシビリティ指針の決定
・予算策定(※今回は省きます)
・素材の品質チェック
・設計
・コーディング(開発ツールを使う場合は省略)
・実機検証、評価
- 224. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
固定レイアウトの電子書籍は、
自動化できるため、
ワークフローは簡素化される
- 225. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
EPUB 3 電子書籍のワークフロー
・プロジェクトスコープの設定
・プラットフォームの選定(※今回は読書環境の選定)
・対象となるリーディングシステムのデフォルトスタイルおよび実装状況の確認
・技術コンセプトの策定 ※固定レイアウトの電子書籍では必須
・アクセシビリティ指針の決定
・予算策定(※今回は省きます)
・素材の品質チェック
・設計
・コーディング(開発ツールを使う場合は省略)
・実機検証、評価
- 226. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
参考情報:
固定レイアウトをサポートした開発ツール
FUSEe ver.1.0
EPUB 3 固定レイアウト(iBooks 仕様も含む)も対応
http://fusee.jp
Tigris Plus(ティグリス プラス)
ブラウザベースのEPUBオーサリングツール
EPUB 3 固定レイアウト(iBooks 仕様も含む)に対応
http://tigris.jp
- 227. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
固定レイアウトの利用例
- 228. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
EPUB 3 Fixed-Layout Documents
Appendix A. Examples
http://idpf.org/epub/fxl/#examples
- 229. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
Example 1
・固定レイアウト
・横向きでは合成された見開き
・縦向きでは見開きにしない
- 230. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
Example 1
- 231. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
Example 2
・固定レイアウト
・合成された見開きにしない
・横向きで固定
- 232. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
Example 2
- 233. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
Example 3
・リフローのコンテンツ
・タイトルページだけ固定レイアウト
・合成された見開きを表示するときは
右側に配置
- 234. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
Example 3
- 235. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
Example 5
・リフローのコンテンツ
・固定レイアウトの
右配置ページと左配置ページを
合成された見開きページとして表示
・リフローのページも見開き表示のまま
- 236. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
Example 5
- 237. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
Example 7
・固定レイアウト
・横向きでは合成された見開き
・縦向きでは見開きにしない
・進行方向は右から左(日本のマンガ)
- 238. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
Example 7
- 239. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
デモンストレーションを
ご覧ください
- 240. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
Kindle 固定レイアウトとの違い
- 241. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
Free Kindle Apps - Read eBooks on your Phone, Tablet, or Computer
http://amzn.to/nuQtcH
- 242. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
スマートフォン
専用端末
ウェブブラウザ
パソコン
- 243. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
日用品から食品、家電、衣類など
何でも買えるアマゾンのアカウント
- 244. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
Kindle Format 8
http://amzn.to/poyUKN
- 245. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
HTML5
EPUB 3 Kindle Format 8
- 246. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
Children s
Fiction
books
Technical Comics
and and
engineering graphic novels
- 247. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
絵本 文芸書
実用書 漫画
- 248. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
ルーツが同じ
ベースの技術が同じなので変換しやすい
EPUB 3 Kindle Format 8
- 250. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
標準仕様の捉え方
Specification oriented
スペスィフィケーション・オリエンテッド
Implementation oriented
インプリメンテーション・オリエンテッド
- 251. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
標準仕様の捉え方
Specification oriented
スペスィフィケーション・オリエンテッド
Implementation oriented
インプリメンテーション・オリエンテッド
- 252. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
標準仕様の捉え方
Specification oriented
スペスィフィケーション・オリエンテッド
Implementation oriented
インプリメンテーション・オリエンテッド
- 253. EPUB 3 Fixed Layout / EPUB Media Overlays 3.0
標準仕様の捉え方
Specification oriented
スペスィフィケーション・オリエンテッド
仕様策定の後、決められたとおりに実装する
Implementation oriented
インプリメンテーション・オリエンテッド
実装され実績のあるものが仕様に採択されていく
(勧告候補に記載されるには2つ以上の実装例が必要)
- 257. community
電子書籍メデ ア論
ィ
http://www.facebook.com/eBookStrategy
デザインの未来
http://www.facebook.com/TheFutureDesign