いいパブッ!! - よくわかるEPUB 3

EPUBってさぁ
HTMLとCSSを
zipでまとめた
だけの
フォーマットでしょ？


このプレゼンが
終わる頃には
そんな理解は
変わってるわよ！


• 高瀬拓史
• @lost_and_found / ろす
• http://d.hatena.ne.jp/lost_and_found/
• ブログでEPUB2仕様を翻訳公開し
てる人
• イースト株式会社勤務
• “EPUB日本語拡張仕様策定”プ
ロジェクトに参加
• eBookジャーナル（マイナビ）
• 「EPUB定点観測」を連載⇨了

登場人物

• 電書ちゃん
• ろすのブログのマスコットキャラ
• 電子書籍の世界の案内役という初
期設定だったはず…
• 性格キツめ
• 立ち絵が少ないのが弱点
• © (有)JCN & Garakuta

登場人物

• EPUBはIDPF(国際電子出版フォーラム）が提唱
する電子出版物の配布・フォーマットの標準
• オープンな標準で制約なく利用できる
• XMLとウェブコンテンツをベースとしている
• スクリーンや文字サイズによって、行の折り返
しが変わる、リフローを特徴としている
• 2011年10月に最新のEPUB3が確定した
• このプレゼンではこのEPUB3の仕様を追えるだ
け追ってみます。

はじめに

• 公開場所は http://idpf.org/epub/30/
• 具体的な技術は次の文書で触れている
– EPUB Publications 3.0
– EPUB Content Documents 3.0
– EPUB Open Container Format (OCF) 3.0
– EPUB Media Overlays 3.0
– EPUB Canonical Fragment Identifier
• それではスタート

EPUB3.0の仕様

Open Container Format
(OCF) 3.0


• EPUBは複数のファイルで構成されており、zipで圧縮さ
れている
• EPUBを構成するファイルが入った入れ物を仕様では
EPUBコンテナ（EPUB Container）と呼ぶ
• zipで圧縮されているため簡単に展開して、中身を取り出
すことができる
• 暗号化（パス付き）zipはダメよ
• 一部のファイルとディレクトリの配置に、“お約束”が
ある

Open Container Format 3.0
EPUBコンテナ

パッケージ文書
コンテンツ文書
ナビゲーション文書

EPUBコンテナ

ちょ～シンプルなEPUBの構成例

この辺のお話です

EPUBコンテナ
仕様が定義する対象

• EPUBのメディアタイプを記述した一行だけの短いテキスト
ファイル
• このファイルはEPUBコンテナの先頭に、位置しなければなら
ない
• 圧縮、暗号化不可
• なので展開したファイルをEPUBに戻すのは、ちょっと面倒
• ↓中身

application/epub+zip

mimetype

• EPUBコンテナに関するメタデータを格納する必須ディ
レクトリ
• 出版物に関するメタデータじゃないよ
• ここに格納するファイルは役割によって名前が予約され
ている
• 必須ファイルはcontainer.xml。あとはオプショナル

META-INF

• 出版物のルートファイルの位置とメディアタイプを示すXML
文書。圧縮、暗号化不可
• EPUBのルートファイルはパッケージ文書（.opf）
• EPUBではmimetype、META-INF以外は自由なファイル・ディ
レクトリ構成が可能→ビューワに最初にどのファイルを見に
ゆけばよいか示す必要がある
<?xml version="1.0"?>
<container version="1.0“
xmlns="urn:oasis:names:tc:opendocument:xmlns:containe
r">
<rootfiles>
<rootfile full-path=“mybook.opf"
media-type="application/oebps-package+xml"/>
</rootfiles>
</container>
META-INF/container.xml

なんでわざわざ
パッケージ文書の
メディアタイプを
指定するわけ？
EPUBの中には
EPUBのルートファ
イルがあるに決まって
んじゃんJK

OCFは汎用的な
コンテナとして
開発されてます。
EPUBコンテナの中に
別のフォーマットを
入れることも許容されて
ます（いちおー）。


• EPUBに他のフォーマットや複数のパッケージ文書を同梱する
ことも仕様上は可能（ただし選択する条件を記述できる仕様
になってない）
• 将来の改版で条件指定ができるようになりそうな気配

<?xml version="1.0"?>
<container version="1.0"
xmlns="urn:oasis:names:tc:opendocument:xmlns:container">
<rootfiles>
<rootfile full-path="OEBPS/Great Expectations.opf"
media-type="application/oebps-package+xml" />
<rootfile full-path="PDF/Great Expectations.pdf"
media-type="application/pdf" />
</rootfiles>
</container>
META-INF/container.xml

ファイル名用途備考

encryption.xml 暗号化暗号化したファイルと方式を記述

manifest.xml マニフェスト仕様にはコード例すらないし、
使われてるの見たことない。
ぶっちゃけ要らない

metadata.xml メタデータコンテナレベルのメタデータを記
述する。
使われてるの見たことない…

rights.xml 著作権情報必要なDRM情報を記述。DRM方式
自体は任意。
signatures.xml デジタル署名署名したファイルと方式を記述


META-INF/にあるその他の面々

暗号化とか署名とか
DRMとか…
はっきり
書いちゃったら
破られるんじゃない？


方式は記述するけど
秘密鍵の場所など
復号に必要な情報は
書かれていません。
早い話が実装依存ね。


• Font Obfuscation
• EPUBにはフォントファイルを同梱できるが、暗号化されてい
なければ、高価な商用フォントであっても中から取り出すの
は容易。フォントメーカーの懸念材料となる
• そのため出版物の識別子をキーにして、フォントファイルの
先頭1040 byteを変換するアルゴリズムが仕様化
• 制作者はこのアルゴリズムでフォントを変換し、ビューワは
閲覧の際にこのアルゴリズムでフォントを復号化する
• フォントが流用されるリスクを少し下げる程度の機構
• 仕様上はEPUB3ビューワへの実装が必須
iBooksやRMSDK系ビューワでサポート
制作ツールではSigilが対応。
フォント難読化

EPUB Publications 3.0


• 書誌情報(メタデータ)や読み順等を記述したXML文書。
• 圧縮、暗号化不可。
• 拡張子.opf メディアタイプ application/oebps-package+xml
• EPUBの核となるファイルと言ってよい（これがなければ単なる
zipped webと変わらない）
• ルート要素であるpackage要素と、子要素であるmetadata、manifest、
spineで構成される。
• spineの次にguide、bindingsというオプショナルな子要素を持つ場
合もある。
<package>
<metadata /><!–- メタデータを書く -->
<manifest /><!–- ファイル一覧 -->
<spine /> 
<guide /> <!–- 本のセマンティクス -->
<bindings />
</package> EPUB Publications 3.0

• パッケージ文書のルート要素
• http://www.idpf.org/2007/opfの名前空間に属する
• 次の属性指定が必須
• version属性。EPUBのバージョン。これが3.0だとEPUB3
• unique-identifier属性。出版物の識別子。metadataに書いてあ
る識別子をID参照する
<package
xmlns="http://www.idpf.org/2007/opf"
version="3.0"
unique-identifier="bookid">
<metadata ...>
<dc:identifier id=“bookid”>...</dc:identifier>
</metadata>
...
</package>
パッケージ文書 - package

• （出版物レベルの）メタデータを記述する要素
• 基本は Dublin Core Metadata Element Setで記述する
• 最低限必要なのは、識別子(dc:identifier)、タイトル
(dc:title)、言語(dc:language)、更新日時(dcterms:modified)

<metadata
xmlns:dc="http://purl.org/dc/elements/1.1/">
<dc:identifier id=“bookid”>
urn:uuid:966a8a88-75c6-414c-bb3e-d29f0f07069b
</dc:identifier>
<dc:title id=“title”>いいパブッ！！</dc:title>
<dc:language id=“language”>ja</dc:language>
<meta property="dcterms:modified">
2012-02-10T04:00:00Z</meta>
</metadata> EPUB Publications 3.0
パッケージ文書 - metadata

• その出版物を表すユニークな識別子
• UUID(v4)を生成するオーサリングツールが多いが、特に
規定はない
• 複数保持可
• package要素のunique-identifier属性から一つだけID参照
する

<package ... unique-identifier=“bookid”>
<metadata
</dc:identifier>
</metadata>

パッケージ文書 – dc:identifier

EPUBの内容を
編集したら
識別子は
変えなきゃダメ？


マイナーな
リビジョンで
識別子を
変えるべきでは
ありません。
細かい差異は更新日時
で識別します。


• 出版物が最後に変更された時間を記述するmeta要素。
• 内容は CCYY-MM-DDThh:mm:ssZ の dateTime形式
• UTCで記述するので日本は＋9時間
• 出版物の識別は“識別子@更新日時”で行う
<metadata
</dc:identifier>
<meta property="dcterms:modified">
2012-02-10T04:00:00Z</meta>
</metadata>

urn:uuid:966a8a88-75c6-414c-bb3e-d29f0f07069b@2012-
02-10T04:00:00Z

パッケージ文書 – dcterms:modified

• dc:title その出版物のタイトル表す要素
• dc:language その出版物が使用する言語を表す要素。内
容は言語コードで指定する。英語はen、日本語はja。国
コードまで付けるならja-JP。

<metadata
<dc:language id=“language”>ja</dc:language>
</metadata>


パッケージ文書 – dc:title、dc:language

うーん、この本の正確な
タイトルは
「痛プレゼンシリー
ズ 1 いいパブッ!! よ
くわかるEPUB3 」
なんだけど…


……(呆)


• refines属性を持ったmeta要素と組み合わせて、メタデー
タを詳細に記述する仕組みがある
• どこまで運用するかは出版社、プラットフォーマー次第
か
<meta refines="#title" property="title-
type">main</meta>
<dc:title id=“subtitle”>よくわかるEPUB3</dc:title>
<meta refines="#subtitle" property="title-
type">subtitle</meta>
<dc:title id=“collection”>痛プレゼンシリーズ</dc:title>
<meta refines="#collection" property="title-
type">collection</meta>
<meta refines="#collection" property="group-
position">1</meta>

パッケージ文書 – メタデータの拡張

• dc:creator その出版物の責任者≒制作者を表す要素
• オプショナルな要素だが、大抵使うはず。
• 役割を詳細に記述するなら meta要素とMARC Code List
for Relatorsを組み合わせる方法がある。
<dc:creator id=“creator1”>
lost_and_found
</dc:creator>
<meta refines=“#creator1” property="role"
scheme="marc:relators" id="role">aut</meta>
<dc:creator id=“creator2”>
電書ちゃん
</dc:creator>
<meta refines=“#creator２” property="role"
scheme="marc:relators" id="role">aut</meta>

パッケージ文書 – dc:creator

• http://www.loc.gov/marc/relators/
• リソースの関係者を記述するためのコードで書誌情報の
記録に利用する
• The Library of Congress (米議会図書館)がメンテナンス
• 出版物のみならず音楽・演劇など幅広い分野をカバーし
223種類のコードを定義
• アルファベット3文字で表記できる
• 日本語で読める資料超少ない＞＜
aut: Author 著者
edt: Editor 編集者
ill: Illustrator イラストレーター
...etc.

補足 - MARC Code List for Relators

• 出版物のコンテンツが利用するリソースの一覧を記述し
た要素
• 利用するすべてのリソースをitem要素に記述する
• item要素にはid、href、media-type属性が必須
<manifest>
<item id=“foo” href=“foo.jpg”
media-type=”image/jpg” />
<item id=“bar” href=“bar.xhtml”
media-type=”application/xhtml+xml” />
<item id=“baz” href=“baz.xhtml”
</manifest>

パッケージ文書 - manifest

• item要素には内容を説明するproperties属性が必要とな
る場合がある
• cover-image:表紙画像、nav:ナビゲーション文書、
scripted:javascriptかformタグの利用、math:MathMLの利
用、svg:インラインSVGの利用
<item id=“foo” href=“foo.jpg”
properies=“cover-image”
media-type=”image/jpg” />
<item id=“bar” href=“bar.xhtml”
properies=“nav”
properies=“scripted math svg”
パッケージ文書 - manifest

• EPUB Core Media Types
• EPUBの中でfallbackなしで利用してよいリソース
• ここにないリソースはコアメディアタイプへのfallback
を提供しなければならない
• ビューワにとって全てがサポート必須ではなく、サポー
トに条件が設けられているリソースもある
• 例：読み上げ機能を持つビューワはPLS文書をサポー
トしなければならない...etc.

コアメディアタイプ

• fallback chain mechanism
• manifestのitem要素にはfallback属性で、代替リソースを
指定できる。
・fallbackのfallbackのfallback…と幾つも重ねてよいが、コ
アメディアタイプが一つ含まれている必要がある
<manifest>
<item id=“foo” href=“foo.foo”
fallback=“bar” media-type=“applicaion/foo” />
<item id=“bar” href=“bar.bar”
fallback=“baz” media-type=“application/bar” />
... media-type=“applicaion/xhtml+xml” />
...
</manifest>
manifest level fallback

分類名称メディアタイプ EPUB3 EPUB 2.0.1
画像 GIF image/gif ○ ○
JPEG image/jpeg ○ ○
PNG image/png ○ ○
SVG image/svg ○ ○
XML文書 XHTML application/xhtml+xml ○ ○
NCX application/x-dtbncx+xml ○ ○
EPUB Media Overlays application/smil+xml ○ ―
TTS発音辞書 application/pls+xml ○ ―
フォント OpenTypeフォント application/vnd.ms-opentype ○ ―
WOFFフォント application/font-woff ○ ―
音声 MP3 audio/mpeg ○ ―
MP4 AAC LC audio/aac ○ ―
テキストスタイルシート text/css ○ ○
Java Script text/javascript ○ ―

コアメディアタイプ一覧

あれ、
動画がないよ。
EPUB3は動画
埋め込めるんじゃ
なかったっけ？


ブラウザ戦争の煽りで、
動画はコアメディアタイプに
入らなかったの。
ビューワは少なくとも
H.264かVP8の
どちらかのコーデックは
サポートしましょうと
NOTEに小さく書いて
あるわ…


• spine = 本の「背」のこと
• コンテンツ文書の読み順を指定する要素
• 紙のページを綴じる代わりにspineに文書を綴じる感じ

<spine>
<itemref idref=“cover.xhtml” />
<itemref idref=“chapter01.xhtml” />
<itemref idref=“chapter02.xhtml” />
…
</spine> EPUB Publications 3.0
パッケージ文書 - spine

• 本の綴じ方向はspine要素にpage-progression-direction属
性で指定する
• ltr は左綴じ（横書きの本）で初期値。rtl が右綴じ（縦書
きの本）
• HTML+CSSでは文書間の進行方向を指定できないため、
導入した属性

<spine
page-progression-direction=“rtl”>

パッケージ文書 - spine

時間が限られて
いるので
プレゼンでは
次のguideと
bindingsは
割愛します…


• 本のセマンティクスを記述するオプショナルな要素
• EPUB3では非推奨の扱い。ナビゲーション文書の<nav
epub:type="landmarks"> で代替できる
<guide>
<reference href="cover.xhtml"
title="Cover" type="cover" />
</guide>
同じ内容をナビゲーション文書に書くとこうなる
<nav epub:type=“landmarks”>
<ol>
<li>
<a epub:type=“cover“ href”cover.xhtml”>表紙</a>
</li>
</ol>
</nav>
パッケージ文書 - guide

• 特殊なフォールバックを実現するオプショナルな要素
• 子要素にmediaType要素を持ち、そこにはmedia-type属
性とhandler属性がある。
• media-type属性のメディアタイプを持つリソースの
フォールバック先となるリソースをhandler属性でID参
照する。
• 結果次のフォールバック順序となる
1. カスタムリソース
2. handlerが参照するリソース
3. HTML5タグ固有のフォールバックリソース
• 一体誰が使うんだぜ？
パッケージ文書 - bindings

<object data=“foo.xml” type=“application/foo”>
<img src=“bar.ipg” />
</object>


<manifest>
<item id=“baz” href=“baz.xhtml” フォールバック順序
properies=“scripted”
type=“application/xhtml+xml” />
1. foo.xml
... 2. baz.xhtml
</manifest> 3. bar.jpg
...
<bindings>
<mediaType handler=“baz"
media-type="application/foo"/>
</bindings>
パッケージ文書 - bindings

EPUB Content
Documents 3.0


（あとCSSとかいろいろ）

EPUB Content Documents 3.0

• 本の内容を記述した文書。XHTML5またはSVGで記述す
る
• XHTML5なら拡張子は.xhtmlとする
• XHTML5を採用したおかげで、audioやvideoタグが利用
できるようになった。あとルビも。
• EPUB2ではXHTML1.1で記述し、scriptやformなどの利用
に制約があったが、EPUB3では利用可能。XHTML5のタ
グについて特に制約は設けていない
• その他epub:switchやepub:triggerといった独自のタグが
幾つか存在する（ほとんどはアクセシビリティ目的）


せっかくのHTML5の
勉強会なのにHTML5への
言及が少ないわね～

仕様でも単に参照してるだけだから
それほどHTML5ついてあれこれ
言ってるわけじゃないのよ
それに僕もHTML5勉強中なので
あんまり詳しく語れない（泣）


• 目次の役割を果たす特殊なXHTMLコンテンツ文書
• EPUBファイルの中にナビゲーション文書は必須
• 目次は<nav epub:type="toc">の中に番号リスト(ol、li）とハ
イパーリンク(a)などで記述する
• EPUB2では目次をNCXというXML文書で記述していた

<html ...
xmlns:epub="http://www.idpf.org/2007/ops">
...
<nav epub:type=“toc”>
<ol>
<li><a href=“c1.xhtml”>Chapter.1</a></li>
<li><a href=“c1.xhtml#sub1”>Chapter.1-1</a></li>
<li><a href=“c1.xhtml#sub2”>Chapter.1-2</a></li>
...
</ol>
</nav> EPUB Content Documents 3.0

• EPUBで利用するスタイルシートをEPUBスタイルシート
と呼ぶ
• CSS 2.1とCSS3のプロパティで構成される
• ただし、ビューワは全てのプロパティを実装しなければ
ならないわけではない
• 参照しているCSS3モジュールは以下のとおり
– CSS 3.0 Speech
– CSS Fonts Level 3
– CSS Text Level 3
– CSS Writing Modes
– Media Queries
– CSS Namespaces
– CSS Multi-Column Layout
EPUBスタイルシート

• CSS3からはまだWD、ED等安定していないステータスの
モジュールも参照している。
• これらのプロパティには –epub-の接頭辞を付ける
• -epub-が必要なプロパティは仕様の中で明示してある
• ちなみに、WebKitでは-epub-は-webkit-のエイリアスと
して動作する
• CSS Text Level 3やCSS Writing Modesは2011年4月11日
時点でのドラフトに従う。
html {
-epub-writing-mide: vertical-rl;
writing-mode: vertical-rl;
}
EPUBスタイルシート

EPUB Canonical
Fragment Identifier


• 出版物の中の任意の位置を参照するための識別子
• テキストだけではなく様々なメディアの時間や空間も指
定できる
• 読みかけの場所の保持、ハイライト、メモ、注釈など用
途は様々
• 人に厳しく機械に優しい構文＞＜
mybook.epub#epubcfi(/6/4[chap01ref]!/4[body01]/10/1:3)

→“mybook.epubの中のパッケージ文書の3番目の子ノードの2番目の子ノード
かつid=“chap01ref”のノードが参照するコンテンツ文書の中にある2番目の
子ノードかつid=“body01”のノードの5番目のノードの子ノードであるテキスト
ノードの3文字目の直後” という意味。解説は省略！

EPUB Canonical Fragment Identifier
epubcfi

Accessibility


• EPUB3のマルチメディア対応はアクセシ
ビリティ向上の目的もある
• 録音済み音声とテキストの同期
– メディアオーバーレイ文書を利用する
• 音声読み上げ（Text to Speech)
– PLS文書を同梱する
– コンテンツにSSML属性を記述する
– CSS Speech Moduleを利用する

聴覚的な読書の実現

• Synchronized Multimedia Integration Language (SMIL
3.0) のサブセット
• http://www.w3.org/TR/SMIL/ ←SMIL
• オーディオ再生とテキストの同期に利用する
• オーサリング環境が少なく作るのがキツい＞＜
• 拡張子 .smil メディアタイプ application/smil+xml
• 好みの声優さんに朗読して貰えたら…ゲフンゲフン
<par>
<text src="chapter1.xhtml#sentence1"/>
<audio src="chapter1_audio.mp3"
clipBegin="23s“
clipEnd="30s"/>
</par>

EPUB Media Overlays 3.0
メディアオーバーレイ文書

• Media Overlaysを体験するにはiBooksで“Yellow
Submarine”を読んでみるのがお奨め
• EPUB2ベースだが、マルチメディア、スクリプティング
などEPUB3の新機能のショーケースに近い
• Appleの独自拡張部分も少なからずあるので注意

EPUB Media Overlays 3.0
メディアオーバーレイ文書

• Pronunciation Lexicon Specification Version 1.0
• http://www.w3.org/TR/pronunciation-lexicon/
• 音声認識と音声合成エンジンが利用する
発音情報辞書を記述したXML文書…らしいです（汗
• 拡張子 .pls メディアタイプ application/pls+xml

<lexeme>
<grapheme>nihongo</grapheme>
<grapheme>日本語</grapheme>
<grapheme>にほんご</grapheme>
<phoneme>ɲihoŋo</phoneme>
</lexeme>

補足 - PLS

• Speech Synthesis Markup Language Version 1.1
• http://www.w3.org/TR/speech-synthesis11/
• 音声合成エンジンを制御するマークアップ言語
…らしいです（汗
• EPUB3ではコンテンツ文書の要素に属性として
発音情報を指定するのに利用する
<html ...
xmlns:ssml="http://www.w3.org/2001/10/synthesis">
...
<p><span ssml:alphabet="ipa“ ssml:ph=“ɲihoŋo”
>日本語</span>は難しい。</p>

補足 - SSML

• 紙の読書に困難を抱える人のための国際標準フォーマッ
トDAISY(=ANSI/NISO z39.86)を開発する非営利団体
• IDPFの古参かつ中核メンバー
• DAISYはDigital Accessible Information SYstemの略
• 米国や北欧などで電子教科書のフォーマットとして採用
されている
• 紙の本をセマンティックに記述するタグが豊富
• EPUB2にも影響を与えた（NCX, DTBook)
• 次期DAISY4は記述・交換フォーマットに特化。
EPUB3、点字本、PDFなどに変換して閲覧する。

補足 – DAISY Consortium

まあEPUBって
ウェブ技術を
パクリ
参照しまくり
だよね


既にあるものを
使うのは悪いことじゃ
ないし、
参照しっぱなし
でもないわよ！


• EPUBの日本語レイアウト対応を契機として策定
が前進したもの
– CSS Text Level 3
– CSS Writing Modes Module Level 3
• EPUBのレイアウト向上を視野にCSSモジュール
化が進められているもの
– CSS Regions Module Level 3
– CSS Exclusions and Shapes Module Level 3
– (CSS Page Templates )?

EPUBからW3C CSSへ

• EPUBのどこがウェブと同じでどこが違うのか見えてき
たものはありましたでしょうか？
• EPUBが独自に補っているものには、ウェブをよりよく
するヒントもあるかもしれません。
• 出版業界はしばらくCSS組版にドハマリしながらEPUBを
作ることになりそうですが、すでにウェブの世界に馴染
みのある方々からは、本のメタファに縛られないあっと
驚くEPUBコンテンツが生まれてこないか期待していま
す。
• ウェブ技術の浸透はこれまで縁のなかった業界や人に新
しい出会いを生んでいます。是非、電子出版にも触手を
伸ばしてみてください。

おわりに

ギャルゲーでわかるEPUB3
→ 無理ゲーでした

ボツ企画

ご清聴
ありがとう
ございました

Fin.

いいパブッ!! - よくわかるEPUB 3

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to いいパブッ!! - よくわかるEPUB 3

Similar to いいパブッ!! - よくわかるEPUB 3 (20)

More from Hiroshi Takase

More from Hiroshi Takase (7)

Recently uploaded

Recently uploaded (10)

いいパブッ!! - よくわかるEPUB 3