JEPA EPUBセミナー#14

1. 書籍解説
What is EPUB 3?
＆
Accessible EPUB 3
イースト株式会社 高瀬 拓史
takase@est.co.jp
2012/09/21 JEPA EPUBセミナー#14

2. 今日お話しすること
• EPUB 3関連書籍の紹介と解説です。
• What is EPUB 3?
http://shop.oreilly.com/product/0636920022442.do
• Accessible EPUB 3
http://shop.oreilly.com/product/0636920025283.do
• IDPFとDAISY Consortium制作
O reilly Mediaより出版
• いずれも無料で入手できます。

3. 加筆分 2012年末？（有料）

5. 概要
• EPUB 3の概論
• EPUB 3 Best Practices の第一章
となる位置づけ
• 歴史、技術、メリット、展望がコンパク
トに整理されている
• EPUB 3策定中に書かれているため、
アップデートされるはず

6. •What Is EPUB 3?
• EPUB 3 in a Nutshell
EPUBの概要
• The EPUB 3 Revision
EPUB 3への改訂経緯
• EPUB and Web Standards
EPUBとウェブ標準の関係
• The Goodies
EPUB 3の改良点
• The Arrival
EPUB 3普及への展望
目次

7. EPUB 3とは何か
• EPUBは汎用的なフォーマット
特定の種類の出版物に特化したものではない
雑誌、オフィス文書、政策文書など様々に利用できる
• ウェブ標準を積極的に取り入れている
すでに広く利用されている技術やスキルを活用できる
• フリー、オープン
誰もが制約なく利用できるように設計されている
シンプルなテキストエディタで制作できる点は普及の大きな要因

8. EPUB 3への改訂経緯
• 電子出版市場の急速な進化
E Inkデバイスからタブレットデバイスへ
• EPUB 2への改善要望
マルチメディア対応
インタラクティブなコンテンツ
グローバル言語対応
アクセシビリティの向上
• EPUB 3で残された課題
ビデオコーデック（H.264 vs WebM）が統一できなかった
コミックやマンガの表示方法について試行錯誤が続いている

9. EPUB 3とウェブ標準
• ブラウザのスタックを採用した理由
ブラウザのスタック（HTML, CSS, JavaScript）
リフローに適していた
長期生存できるフォーマットだった
ブラウザの描画エンジンを利用してビューワの開発コストを下げられた
• ウェブ標準を利用するデメリット
標準化されておらずEPUBが自前で用意したもの
リッチな注釈データ（出版物としてのセマンティクス）
文書の読み順を定義する仕組み...etc.
他の仕様の方向性をコントロールできない
HTML5、CSS3の不確実性

10. EPUB 3の改良点
• マルチメディア
• メディアオーバーレイ
• スクリプティング
• SVG
• グローバル言語対応
• アクセシビリティ

12. 概要
• EPUBをアクセシブルにするためのベス
トプラクティス
• アクセシビリティに準拠するためのガイ
ドラインではない
• どうすれば出版物をアクセシブルにでき
るのか、観点や考え方を示すのが目的
• WCAGやWAI-ARIAも参考に
WCAG: Web Content Accessibility Guidelines
http://www.w3.org/TR/WCAG20/
WAI-ARIA: Web Accessibility Initiative s Accessible Rich Internet Applications
http://www.w3.org/TR/wai-aria/

13. • Accessible EPUB 3
• Introduction
高品質なデータとアクセシブルなデータ
• Building a Better EPUB:
Fundamental Accessibility
基礎部分（テキスト、画像等）に
関するテクニック
• It s Alive: Rich Content Accessibility
EPUB 3の新機能（マルチメディア、TTS等）に
関するテクニック
• Conclusion
出版物をアクセシブルにすることのメリット
ぜひ実践を！
目次

14. イントロダクション
基本的な考え方
• 高品質なデータ
＝構造化されたデータ
＝アクセシブルなデータ
• リッチで使い回しの効くコンテンツを制
作すること
• あらゆる人によりよい読書体験を与える
こと

15. 基礎テクニック
• スタイルの分離
視覚情報に頼らず読者に意味を伝えられるようにする
スタイルシートを除去しても内容が失われないかチェック
• セマンティクスの追加
epub:type属性を追加してビューワのユーザビリティを向上させる
• コンテンツへの言語属性の指定
音声読み上げや点字表示の精度が向上する
• 読み順への重要度の指定
linear属性を利用して重要ではない箇所をスキップできるようにする
<itemref idref="chapter1"/>
<itemref idref="chapter1-note" linear= no /><!-- skippable -->

16. 基礎テクニック
• 段落間の空きをマークアップする
場面や文脈の変化を<hr>要素によって示す
• リスト
<ol>、<ul>、<dl>要素を適切に利用する
• 図版、表、コード
<figure>要素でグループ化しておく
• 表: <table>
画像化は非推奨。ヘッダやセル同士の関係を適切にマークアップする
<th>要素、<thead>要素、scope属性、header属性の利用

17. 基礎テクニック
• 画像: <img>
<img>要素を詳細に説明するための試案
・<figcaption>要素の中で<details>要素を使う？
・<a>要素で説明用のHTML文書にリンクさせる？
意味のない画像にaltテキストは不要
• 画像: SVG
拡大縮小に強く、タイトルや説明文が入れられる
スクリプトの利用はアクセシブルではない
http://www.w3.org/TR/SVG-access/ を参考に
• 数式: MathML
alttext属性に説明テキストを入れることを推奨
高度な説明が必要なら<annotation-xml>要素内にXHTMLで記述

18. 基礎テクニック
• 脚注
epub:type属性とハイパーリンクで本文との関係を記述する
<p>…<a epub:type="noteref" href="#n1">1</a> …</p>
<aside epub:type="footnote" id="n1">
…
</aside>
• 原本のページ番号
同じ教室で紙の教科書と電子教科書が併用される際に有用
epub:type属性によってコンテンツの中に改ページ箇所を記述する
<span xml:id="page361" epub:type="pagenumber">361</span>
原本はパッケージ文書に<dc:source>要素で示す
<dc:source>urn:isbn:9780375704024</dc:source>

19. リッチコンテンツ
• オーディオ、ビデオ
選択するビデオコーデックの問題(H.264 vs WebM)は解決できない
→同じ内容を２種類のコーデックで用意するのは１つの方法
controls属性によって再生を制御できるようにする
<video controls= controls >
• 字幕の追加
<track>要素を利用してマルチメディアにテキストと表示タイミング
を指定することはアクセシビリティ上有用
画像の説明テキスト同様わかりやすいものにすること
<track kind="captions" src="video/captions/en/v001.cc.vtt"
srclang="en" label="English"/>

20. リッチコンテンツ
• メディアオーバーレイ
seq要素とpar要素を適切に使って構造化する
epub:type属性を加えて内容がわかるようにする
メタデータに再生時間を記述する（仕様）
読み上げ箇所がわかるように専用のスタイルを用意する
パッケージ文書
<meta property="media:active-class">-epub-media-overlay-active</meta>
CSS
.-epub-meia-overlays-active { background:yellow; }
DAISY制作ソフトTobiがメディアオーバーレイ入りEPUB 3を出力できるように
なる予定
http://www.daisy.org/tobi/blog/tobi-2.0-support-epub-3-media-overlays-roadmap
• TTS
PLS、SSML属性、CSS3 Speech…。今回の発表では省略します。

21. まとめ
• EPUBの解説書は少なくないが、
設計思想や背景を知ることのできる
本書は貴重。
• 制作マニュアルとして読まれるべきでは
ない。
• EPUBの尊重するもの、目指すものを
理解すると、制作者としての視野が広が
ります。

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