EPUB Media Overlays 3.0とFixed Layout（固定レイアウト）

EPUB3技術解説セミナー4
固定レイアウト／アクセシビリティ

2012年10月24日（水）16:00

境祐司
@commonstyle ¦ 電子書籍メディア論

proﬁle

YOUJI SAKAI
Instructional Designer | eBook Designer
境祐司

BOOKS

ウェブレイアウトの EPUB3スタンダード Webデザイン基礎
教科書デザインガイド改訂３版

InDesign CS6で作るEPUB 3 標準ガイドブック
森裕司, 境祐司, 林拓也, 向井領治

community

電子書籍メデア論
ィ
http://www.facebook.com/eBookStrategy

デザインの未来
http://www.facebook.com/TheFutureDesign


本日のテーマ：

固定レイアウト
EPUB 3 Fixed Layout

アクセシビリティ
EPUB Media Overlays 3.0

EPUB 3 Fixed Layout / Media Overlays

最新ニュース
今朝、iBooksが3.0にアップデート
・iBookstoreで購入してiCloudに保管したすべてのブックは、
iOS 6の本棚で直接見ることができます
・新しいスクロールテーマを使って、指でフリックしてブックを
上下方向にスクロールできます
・購入したブックの無料のアップデート（新しい章や訂正など）を
受信できます
・iOS 6では、語句の定義をドイツ語、スペイン語、フランス語、
日本語、および中国語（簡体字）で検索できます
・お気に入りのブックについて考えたことを、Facebook、
Twitter、メッセージ、またはメールで友達と共有できます


あとは、iBookstoreの
国内サービス開始を待つだけ



http://idpf.org/ http://www.w3.org http://www.daisy.org


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



SMIL
Synchronized Multimedia Integration Language



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/


EPUB Media Overlays 3.0 を利用した
テキストと音声が同期する電子書籍の作成


EPUB 3のファイルをベースにして作成

・朗読音声の準備
・コンテンツドキュメントにid属性を割り振る
・SMAILファイルの作成
・パッケージドキュメントに情報を追加


・必須のmimetype
・必須のMETA-INF
（container.xml）
・必須のパッケージドキュメント
・必須のナビゲーションドキュメント（目次）
・そして、コンテンツ（ページや画像など）

EPUBのルールで圧縮


朗読音声の準備


音声合成を使用する場合：
かんたん音声合成ソフトウェア
かんたん！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/


音声ファイルの形式：

MP3 MP4 AAC M4A AAC

不具合が発生しにくい
（※注意：2012年10月現在の検証）

EPUB 3 Fixed Layout / EPUB Media Overlays 3.0

コンテンツドキュメントに
id属性を割り振る


EPUB コンテンツドキュメント


ドキュメント構成要素の確認


見出しレベル1
リード文

本文（段落1）

本文（段落2）
ドキュメント構成要素の確認


朗読のセンテンスを決める


センテンスにid属性を追加


書籍はページごとにパーマリンクがあり、「書籍
Aの60ページで紹介されている技術は、書籍 Bの
200ページに詳しく書かれている。」といった、
ウェブでは当たり前のハイパーリンク機能が生かせ
ます。すべての本が解体され、知のまとまりとして
利用できるわけです。


書籍はページごとにパーマリンクがあり、「書籍
Aの60ページで紹介されている技術は、書籍 Bの
200ページに詳しく書かれている。」といった、
ウェブでは当たり前のハイパーリンク機能が生かせ
ます。

すべての本が解体され、知のまとまりとして利用で
きるわけです。

書籍はページごとに
パーマリンクがあり、「書籍 Aの60ページで紹介
されている技術は、書籍 Bの200ページに詳しく
書かれている。」といった、ウェブでは当たり前の
ハイパーリンク機能が生かせます。

すべての本が解体さ
れ、知のまとまりとして利用できるわけです。

例：第1章センテンス番号0003

書籍はページごとに
パーマリンクがあり、「書籍 Aの60ページで紹介
されている技術は、書籍 Bの200ページに詳しく
書かれている。」といった、ウェブでは当たり前の
ハイパーリンク機能が生かせます。

例：第1章センテンス番号0004

すべての本が解体さ
れ、知のまとまりとして利用できるわけです。


SMILファイルの作成


page1.smil


SMILファイル作成の手順


基本ブロック

smil要素, body要素, seq要素


詳細ブロック

par要素（とid属性）を追加


text要素とaudio要素を追加


再生開始と再生終了の時間指定


Media Overlays 要素

version="3.0">
<body>
epub:type="chapter"> 対応するコンテンツドキュメント

</seq>
</body>
</smil>

version="3.0">
<body>
epub:type="chapter">
セマンティクス（optional）
</seq>
</body>
</smil>

<par id="heading1">
見出し
</par>

<par id="lead">
リード文
</par>

<par id="sentence01">
本文のセンテンス 01番
</par>

本文のセンテンス 02番
</par>

</par>
text要素

</par>
chapter01.xhtmlの「chap01s0001」を朗読

2001年7月、オライリーメディ
アとピアソン・エデュケーションは共同事業である「Safari
Books Online」をスタートさせました。

</par>
audio要素

</par>
audio要素

開始時間終了時間

clipBegin="0:00:35.123" clipEnd="0:00:43.804"/>
</par>

開始時間終了時間

clipBegin="0:00:35.123" clipEnd="0:00:43.804"/>
</par>

35秒123ミリ秒 43秒804ミリ秒


時間指定の例：

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


ツールの紹介：

Audacity オーダシティ

無償で利用できるクロスプラットフォームのサウンド編集ツール
http://audacity.sourceforge.net/?lang=ja


Audacity オーダシティ http://audacity.sourceforge.net/?lang=ja


パッケージドキュメントに
情報を追加

<?xml version="1.0" encoding="UTF-8"?>
<package xmlns="http://www.idpf.org/2007/opf"
unique-identiﬁer="pub-id" xml:lang="ja" version="3.0">

<metadata>
matadata要素 - 書誌情報
</metadata>

<manifest>
manifest要素 - 出版物のリソース
</manifest>

<spine>
spine要素 - 読む順番
</spine>

</package>

情報の追加
<metadata>
</metadata>
情報の追加
<manifest>
</manifest>

<spine>
</spine>

</package>

メタデータの追加：

<meta property="media:duration"
reﬁnes="#chapter01_overlay">0:01:30.270</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>





音声ファイルの再生時間




例：
第1章の再生時間と第2章の再生時間






ナレーターの名前




再生中の要素をハイライトさせる
任意のクラス名


メタデータ：


CSS：

.-epub-media-overlay-active {
background-color: yellow;
}

おはようございます。今日は、良い天気ですね。がんばりましょう。


開発ツールについて



http://www.daisy.org

DAISYコンソーシアムが
提供するリファレンスツール
（見本となるツール）



Tobi（トビ）
テキストと音声を同期するコンテンツの作成
http://www.daisy.org/tobi/

http://www.daisy.org

DAISY Pipeline2
DAISYからEPUBに変換
http://www.daisy.org/pipeline2/


Tobi
http://www.daisy.org/tobi/


参考情報（※注意：2012年10月現在の検証）

EPUBコンテナ内のファイル構成


参考情報（※注意：2012年10月現在の検証）


HTMLファイル
SMILファイル
音声ファイルを同じ階層に
置かないと正しく
動作しない場合がある

参考情報
（※注意：2012年10月現在の検証）


作成したEPUBファイルを
リーディングシステムで
プレビューする


Readium
http://readium.org/


※バージョンにご注意：Version 0.5.3


パッケージドキュメントにメタデータを追加


CSSファイルにスタイルを追加

.-epub-media-overlay-active {
background-color: yellow;
}

おはようございます。今日は、良い天気ですね。がんばりましょう。


Android OSの環境
スマートフォン, タブレット等


IDEAL Group Reader Beta
https://play.google.com/store/apps/details?id=org.easyaccess.epubreader&hl=ja


Dropbox
・EPUBファイルをコピー
・EPUBファイルを選択
・「このファイルを開く」から
Ideal Group Reader - Betaを
タップする



EPUBファイルが表示される



ダブルタップすると朗読開始
もう一度ダブルタップすると停止



音声データのないページでも
日本語の音声合成エンジンで
読み上げることができる



音声合成エンジンの選択
TTS Settings


TTS Settings


TTS Settings
247円


SVOX Misaki
朗読の音声データがないページは、
この音声合成エンジンで読み上げる

TTS Settings


その他の機能：

JavaScript利用可能
Interactive EPUB3 mode



iOSの環境
iPad, iPhone, iPod touch


iBooks
http://itunes.apple.com/jp/app/ibooks/id364709193?mt=8


iBooks

iBooksの場合、
Fixed Layout modeに切り替える
必要がある


iBooks

通常モード（リフロー）では
機能しません。


Fixed Layout modeの電子書籍

iPad at Work
Volume 2
Apple iBookstore


固定レイアウト
Fixed Layout


Fixed-Layout
テキストや図版を画像化した
絶対配置紙面を配置


Fixed-Layout
テキストや図版を
絶対配置 iPad at Work Volume 2


テキストや図版を絶対配置

・座標値を指定してテキストや図版を配置する方法
・文字サイズは固定されているものが多い
リーディングシステム側で文字サイズの変更ができない
・電子書籍のデータサイズは、
リフロー形式の電子書籍とあまり変わらない
・テキストの選択や本文検索などは実行できる


There Was an Old Monkey Who Swallowed a Frog
Amazon Kindle Store
固定レイアウト（Kindle Format 8）


画像化した紙面を配置

・DTPデータからイメージ変換する方法
・もしくは、印刷物を取り込み、補正する方法
・コミックや写真集、絵本などは、JPEG、PNGなどの
ラスターグラフィックスが多い
・雑誌や凝ったレイアウトの実用書などは、PDFが多い
・リフロー形式やテキストや図版を絶対配置する方式と
比較した場合、データサイズが大きくなってしまう


Country's Best Cabins
Amazon Kindle Store

プリントレプリカ

雑誌などはPDFベース


2010年12月15日の
アップデートでiBooksの
機能を拡張、
EPUBの固定レイアウトが
可能になった（独自拡張）


iBooks

Fixed Layout modeの
電子書籍にする手順


META-INF フォルダに
iBooks専用のXMLファイルを
追加する


Fixed Layout modeに切り替えるXMLファイル

com.apple.ibooks.display-options.xml

Fixed Layout modeに切り替えるXMLファイル

<display_options>
<platform name="*">
<option name="ﬁxed-layout">true</option>
<option name="speciﬁed-fonts">true</option>
</platform>
</display_options>


HTMLファイルにmeta要素の追加

HTMLファイルにmeta要素の追加
記述例：

<meta name="viewport" content="width=2048,height=1536">
</meta>


記述例：

body {
width: 2048px;
height: 1536px;

記述例：

body {
width: 2048px;
height: 1536px;

HTMLファイル

<meta name="viewport" content="width=2048,height=1536">
</meta>


CSSファイルに
レイアウトスタイルを追加


テキストや図版などの要素を絶対配置


CSSファイルに

見出し・本文のブロックに適用

div.chapter {
絶対配置 position: absolute;
top: 70px;
left: 70px;
width: 1908px;
}


CSSファイルに

見出し・本文のブロックに適用

div.chapter {
絶対配置 position: absolute;
左上から下に70px top: 70px;
左上から右に70px left: 70px;
ブロックの幅は1908px width: 1908px;
}


CSSファイルに

ページ全体の領域見出し・本文のブロックに適用

body { div.chapter {
width: 2048px; position: absolute;
height: 1536px; top: 70px;
left: 70px;
width: 1908px;
}


70px 1908px 70px

2048px


・META-INF フォルダに
iBooks専用のXMLファイルを追加する

・HTMLファイルにmeta要素の追加

・CSSファイルにスタイルを追加

・CSSファイルにレイアウトスタイルを追加


iBooksでプレビューする


DropboxにEPUBファイルを
コピーしてiPadで選択


iBooks
Fixed Layout mode


iBooks Fixed Layout mode


絶対配置されたテキストは選択可能、検索の対象
iPad at Work
Volume 2
Apple iBookstore


複雑なレイアウトは固定レイアウトではなくレプリカ

.net
Apple Newsstand

レプリカ
（PDFベース）


EPUB 3
Fixed-Layout
Documents
http://idpf.org/epub/fxl/


EPUB 3 Fixed-Layout Documents

・IDPFの情報文書（Informational Document）
・IDPF EPUB working group が作成
・2012年3月13日、IDPF 理事会によって承認



プロパティ Preﬁxマッピング

・rendition:layout 対応付け
・rendition:orientation
・rendition:spread
・page-spread-* コンテント
ディメンションズ
機能
領域


プロパティの定義
Property Deﬁnitions

・リフロー／ページ区切りの指定
・スクリーンの方向（縦・横）
・見開きの指定
・見開きの配置指定（左・右・中央）


プロパティの定義

・リフロー／ページ区切りの指定
rendition:layout プロパティ

・スクリーンの方向（縦・横）
rendition:orientation プロパティ

・見開きの指定
rendition:spread プロパティ

・見開きの配置指定（左・右・中央）
page-spread-* プロパティ

Prefixマッピング
Prefix Mapping

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

<package …
prefix="rendition: http://www.idpf.org/vocab/rendition/#">

</package>

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

meta要素のviewportで指定

<head>
<meta name="viewport" content="width=1200, height=600" />
</head>

<head>
<meta name="viewport" content="width=512, height=600" />
</head>


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

meta要素のviewportで指定

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

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

プロパティの定義パッケージドキュメント


公開されているEPUB3固定レイアウトのサンプル

epub-samples
http://code.google.com/p/epub-samples/

ダウンロードリスト
http://code.google.com/p/epub-samples/downloads/list


epub-samples


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



パッケージドキュメント（.opf）



コンテンツキュメント（.xhtml）



XHTMLファイル



1200 1577px

パッケージ
<?xml version="1.0" encoding="UTF-8"?> ドキュメント

<metadata>
</metadata>

<manifest>
</manifest>

<spine>
</spine>

</package>

・reﬂowable（リフロー）
・pre-paginated（ページ区切り）

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

・landscape（横方向）
・portrait（縦方向）
・auto（制限なし）

<meta property="rendition:orientation">landscape</meta>
<meta property="rendition:orientation">portrait</meta>

・none
・landscape（横方向のみ）
・portrait（縦方向のみ）
・both（横方向・縦方向）
・auto（制限なし）

<meta property="rendition:spread">landscape</meta>
<meta property="rendition:spread">portrait</meta>
<meta property="rendition:spread">both</meta>


pre-paginated（ページ区切り）

auto（制限なし）

auto（制限なし）


例：
ランドスケープモード（横向き）にすると
見開きで表示される

ランドスケープモード（横向き）では、
見開きではなく、シングルページの
拡大表示で読みたい、という読者もいる


読者が、シングルページ、
ダブルページ（見開き）を自由に選択
できたほうがよい場合もある


見開きの配置指定


見開きの配置指定（左・右・中央）

・page-spread-left プロパティ
（左側に配置）
・page-spread-right プロパティ
（右側に配置）
・rendition:page-spread-center
（中央に配置）

<itemref id="titlepage"
properties="page-spread-right
rendition:layout-pre-paginated"/>

タイトルページは右側に配置する




spine itemref要素でこのように指定してもよい




タイトルページは固定レイアウト
タイトルページは右側に配置する

補足

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


EPUB 3 固定レイアウトの
ワークフロー


EPUB 3 電子書籍のワークフロー

・プロジェクトスコープの設定
・プラットフォームの選定（※今回は読書環境の選定）
・対象となるリーディングシステムのデフォルトスタイルおよび実装状況の確認
・技術コンセプトの策定
・アクセシビリティ指針の決定
・予算策定（※今回は省きます）
・素材の品質チェック
・設計
・コーディング（開発ツールを使う場合は省略）
・実機検証、評価


リフロー（行の折り返し処理）電子書籍の場合


CSSなしのEPUBファイルを準備

Adobe Digital Editions 1.8.x


Android - Himawari Reader Pro


iBooks


検証用のEPUBファイルを準備

*{
margin: 0;
padding: 0;
}


Himawari Reader Pro


デフォルトスタイルスタイルのリセット


デフォルトのスタイルをリセットしてから
上書き可能なスタイルを調べる


デフォルトのスタイルをリセットしてから
上書き可能なスタイルを調べる
（※この作業がないと製作コスト増）
試行錯誤を何度も繰り返すことになる



・技術コンセプトの策定 ※リフローの電子書籍では必須
・設計


固定レイアウトの電子書籍は、
自動化できるため、
ワークフローは簡素化される



・技術コンセプトの策定 ※固定レイアウトの電子書籍では必須
・設計


参考情報：
固定レイアウトをサポートした開発ツール

FUSEe ver.1.0
EPUB 3 固定レイアウト（iBooks 仕様も含む）も対応
http://fusee.jp

Tigris Plus（ティグリスプラス）
ブラウザベースのEPUBオーサリングツール
EPUB 3 固定レイアウト（iBooks 仕様も含む）に対応
http://tigris.jp


固定レイアウトの利用例


Appendix A. Examples
http://idpf.org/epub/fxl/#examples


Example 1

・固定レイアウト
・横向きでは合成された見開き
・縦向きでは見開きにしない


Example 1


Example 2

・合成された見開きにしない
・横向きで固定


Example 2


Example 3

・リフローのコンテンツ
・タイトルページだけ固定レイアウト
・合成された見開きを表示するときは
右側に配置


Example 3


Example 5

・リフローのコンテンツ
・固定レイアウトの
右配置ページと左配置ページを
合成された見開きページとして表示
・リフローのページも見開き表示のまま


Example 5


Example 7

・横向きでは合成された見開き
・縦向きでは見開きにしない
・進行方向は右から左（日本のマンガ）


Example 7


デモンストレーションを
ご覧ください


Kindle 固定レイアウトとの違い


Free Kindle Apps - Read eBooks on your Phone, Tablet, or Computer
http://amzn.to/nuQtcH


スマートフォン

専用端末

ウェブブラウザ

パソコン


日用品から食品、家電、衣類など
何でも買えるアマゾンのアカウント


Kindle Format 8
http://amzn.to/poyUKN


HTML5

EPUB 3 Kindle Format 8


Children s
Fiction
books

Technical Comics
and and
engineering graphic novels


絵本文芸書

実用書漫画


ルーツが同じ
ベースの技術が同じなので変換しやすい

EPUB 3 Kindle Format 8


最後に一言


標準仕様の捉え方

Speciﬁcation oriented
スペスィフィケーション・オリエンテッド

Implementation oriented
インプリメンテーション・オリエンテッド


標準仕様の捉え方

Speciﬁcation oriented
スペスィフィケーション・オリエンテッド

仕様策定の後、決められたとおりに実装する

Implementation oriented
インプリメンテーション・オリエンテッド

実装され実績のあるものが仕様に採択されていく
（勧告候補に記載されるには2つ以上の実装例が必要）

EPUB 3の最新情報は
IDPFのサイトで確認してください

http://idpf.org/

Thank you for your attention.
ご清聴ありがとうございました

固定レイアウト／アクセシビリティ

2012年10月24日（水）16:00

境祐司
@commonstyle ¦ 電子書籍メディア論

EPUB Media Overlays 3.0とFixed Layout（固定レイアウト）

More Related Content

EPUB Media Overlays 3.0とFixed Layout（固定レイアウト）