書籍解説 “What is EPUB 3?” ＆ “Accessible EPUB 3”
7 likes2,798 views
JEPA EPUBセミナー#14
書籍解説 “What is EPUB 3?” ＆ “Accessible EPUB 3”
- 1. 書籍解説 What is EPUB 3? ＆ Accessible EPUB 3 イースト株式会社 高瀬 拓史 [email protected] 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. ご清聴 ありがとうございました