書籍解説“What is EPUB 3?”

＆“Accessible EPUB 3”

イースト株式会社 高瀬 拓史takase@est.co.jp

2012/09/21 JEPA EPUBセミナー#14

•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より出版

•いずれも無料で入手できます。

今日お話しすること

加筆分 2012年末？（有料）

•EPUB 3の概論•“EPUB 3 Best Practices”の第一章となる位置づけ

•歴史、技術、メリット、展望がコンパクトに整理されている

•EPUB 3策定中に書かれているため、アップデートされるはず

概要

目次

•What Is EPUB 3?•EPUB 3 in a NutshellEPUBの概要

•The EPUB 3 RevisionEPUB 3への改訂経緯

•EPUB and Web StandardsEPUBとウェブ標準の関係

•The GoodiesEPUB 3の改良点

•The ArrivalEPUB 3普及への展望

•EPUBは汎用的なフォーマット特定の種類の出版物に特化したものではない雑誌、オフィス文書、政策文書など様々に利用できる

•ウェブ標準を積極的に取り入れているすでに広く利用されている技術やスキルを活用できる

•フリー、オープン誰もが制約なく利用できるように設計されているシンプルなテキストエディタで制作できる点は普及の大きな要因

EPUB 3とは何か

•電子出版市場の急速な進化E Inkデバイスからタブレットデバイスへ

•EPUB 2への改善要望マルチメディア対応インタラクティブなコンテンツグローバル言語対応アクセシビリティの向上

•EPUB 3で残された課題ビデオコーデック（H.264 vs WebM）が統一できなかったコミックやマンガの表示方法について試行錯誤が続いている

EPUB 3への改訂経緯

•ブラウザのスタックを採用した理由ブラウザのスタック（HTML, CSS, JavaScript）リフローに適していた長期生存できるフォーマットだったブラウザの描画エンジンを利用してビューワの開発コストを下げられた

•ウェブ標準を利用するデメリット標準化されておらずEPUBが自前で用意したもの　リッチな注釈データ（出版物としてのセマンティクス）　文書の読み順を定義する仕組み...etc.

他の仕様の方向性をコントロールできない　HTML5、CSS3の不確実性

EPUB 3とウェブ標準

•マルチメディア•メディアオーバーレイ•スクリプティング•SVG•グローバル言語対応•アクセシビリティ

EPUB 3の改良点

•EPUBをアクセシブルにするためのベストプラクティス•アクセシビリティに準拠するためのガイドラインではない•どうすれば出版物をアクセシブルにできるのか、観点や考え方を示すのが目的•WCAGやWAI-ARIAも参考に

WCAG: Web Content Accessibility Guidelineshttp://www.w3.org/TR/WCAG20/

WAI-ARIA: Web Accessibility Initiative’s Accessible Rich Internet Applicationshttp://www.w3.org/TR/wai-aria/

概要

目次

•Accessible EPUB 3• Introduction高品質なデータとアクセシブルなデータ

•Building a Better EPUB:Fundamental Accessibility基礎部分（テキスト、画像等）に関するテクニック

• It’s Alive: Rich Content AccessibilityEPUB 3の新機能（マルチメディア、TTS等）に関するテクニック

•Conclusion出版物をアクセシブルにすることのメリットぜひ実践を！

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

イントロダクション

基礎テクニック•スタイルの分離視覚情報に頼らず読者に意味を伝えられるようにするスタイルシートを除去しても内容が失われないかチェック

•セマンティクスの追加epub:type属性を追加してビューワのユーザビリティを向上させる

•コンテンツへの言語属性の指定音声読み上げや点字表示の精度が向上する

•読み順への重要度の指定linear属性を利用して重要ではない箇所をスキップできるようにする

<itemref idref="chapter1"/><itemref idref="chapter1-note" linear=”no”/><!-- skippable -->

基礎テクニック•段落間の空きをマークアップする場面や文脈の変化を<hr>要素によって示す

•リスト<ol>、<ul>、<dl>要素を適切に利用する

•図版、表、コード<figure>要素でグループ化しておく

•表: <table>画像化は非推奨。ヘッダやセル同士の関係を適切にマークアップする<th>要素、<thead>要素、scope属性、header属性の利用

基礎テクニック•画像: <img><img>要素を詳細に説明するための試案 ・<figcaption>要素の中で<details>要素を使う？ ・<a>要素で説明用のHTML文書にリンクさせる？意味のない画像にaltテキストは不要

•画像: SVG拡大縮小に強く、タイトルや説明文が入れられるスクリプトの利用はアクセシブルではないhttp://www.w3.org/TR/SVG-access/ を参考に

•数式: MathMLalttext属性に説明テキストを入れることを推奨

高度な説明が必要なら<annotation-xml>要素内にXHTMLで記述

基礎テクニック•脚注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>

リッチコンテンツ•オーディオ、ビデオ選択するビデオコーデックの問題(H.264 vs WebM)は解決できない→同じ内容を２種類のコーデックで用意するのは１つの方法

controls属性によって再生を制御できるようにする<video controls=”controls”>

•字幕の追加<track>要素を利用してマルチメディアにテキストと表示タイミングを指定することはアクセシビリティ上有用画像の説明テキスト同様わかりやすいものにすること <track kind="captions" src="video/captions/en/v001.cc.vtt"

srclang="en" label="English"/>

リッチコンテンツ•メディアオーバーレイ

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

•TTSPLS、SSML属性、CSS3 Speech…。今回の発表では省略します。

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

まとめ

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