書籍解説 What is EPUB 3?               &Accessible EPUB 3   イースト株式会社 高瀬 拓史         takase@est.co.jp   2012/09/21 JEPA EPUBセミナー...
今日お話しすること• EPUB 3関連書籍の紹介と解説です。• What is EPUB 3? http://shop.oreilly.com/product/0636920022442.do• Accessible EPUB 3 http:/...
加筆分   2012年末?(有料)
概要• EPUB 3の概論• EPUB 3 Best Practices   の第一章 となる位置づけ• 歴史、技術、メリット、展望がコンパク トに整理されている• EPUB 3策定中に書かれているため、 アップデートされるはず
•What Is EPUB 3? • EPUB 3 in a Nutshell   EPUBの概要 • The EPUB 3 Revision   EPUB 3への改訂経緯 • EPUB and Web Standards   EPUBとウェブ...
EPUB 3とは何か• EPUBは汎用的なフォーマット 特定の種類の出版物に特化したものではない 雑誌、オフィス文書、政策文書など様々に利用できる• ウェブ標準を積極的に取り入れている すでに広く利用されている技術やスキルを活用できる• フリー...
EPUB 3への改訂経緯• 電子出版市場の急速な進化 E Inkデバイスからタブレットデバイスへ• EPUB 2への改善要望 マルチメディア対応 インタラクティブなコンテンツ グローバル言語対応 アクセシビリティの向上• EPUB 3で残された...
EPUB 3とウェブ標準• ブラウザのスタックを採用した理由 ブラウザのスタック(HTML, CSS, JavaScript) リフローに適していた 長期生存できるフォーマットだった ブラウザの描画エンジンを利用してビューワの開発コストを下げら...
EPUB 3の改良点• マルチメディア• メディアオーバーレイ• スクリプティング• SVG• グローバル言語対応• アクセシビリティ
概要• EPUBをアクセシブルにするためのベス  トプラクティス• アクセシビリティに準拠するためのガイ  ドラインではない• どうすれば出版物をアクセシブルにでき  るのか、観点や考え方を示すのが目的• WCAGやWAI-ARIAも参考に W...
• Accessible EPUB 3  • Introduction    高品質なデータとアクセシブルなデータ  • Building a Better EPUB:    Fundamental Accessibility    基礎部分(...
イントロダクション基本的な考え方• 高品質なデータ  =構造化されたデータ =アクセシブルなデータ• リッチで使い回しの効くコンテンツを制  作すること• あらゆる人によりよい読書体験を与える  こと
基礎テクニック• スタイルの分離 視覚情報に頼らず読者に意味を伝えられるようにする スタイルシートを除去しても内容が失われないかチェック• セマンティクスの追加 epub:type属性を追加してビューワのユーザビリティを向上させる• コンテンツ...
基礎テクニック• 段落間の空きをマークアップする 場面や文脈の変化を<hr>要素によって示す• リスト <ol>、<ul>、<dl>要素を適切に利用する• 図版、表、コード <figure>要素でグループ化しておく• 表: <table> 画像化...
基礎テクニック• 画像: <img> <img>要素を詳細に説明するための試案   ・<figcaption>要素の中で<details>要素を使う?   ・<a>要素で説明用のHTML文書にリンクさせる? 意味のない画像にaltテキストは不要•...
基礎テクニック• 脚注 epub:type属性とハイパーリンクで本文との関係を記述する <p>…<a epub:type="noteref" href="#n1">1</a> …</p> <aside epub:type="footnote" ...
リッチコンテンツ• オーディオ、ビデオ 選択するビデオコーデックの問題(H.264 vs WebM)は解決できない →同じ内容を2種類のコーデックで用意するのは1つの方法 controls属性によって再生を制御できるようにする <video c...
リッチコンテンツ• メディアオーバーレイ seq要素とpar要素を適切に使って構造化する epub:type属性を加えて内容がわかるようにする メタデータに再生時間を記述する(仕様) 読み上げ箇所がわかるように専用のスタイルを用意する  パッケ...
まとめ• EPUBの解説書は少なくないが、  設計思想や背景を知ることのできる 本書は貴重。• 制作マニュアルとして読まれるべきでは  ない。• EPUBの尊重するもの、目指すものを  理解すると、制作者としての視野が広が ります。
ご清聴ありがとうございました
書籍解説 “What is EPUB 3?” & “Accessible EPUB 3”
書籍解説 “What is EPUB 3?” & “Accessible EPUB 3”
Upcoming SlideShare
Loading in …5
×

書籍解説 “What is EPUB 3?” & “Accessible EPUB 3”

3,872 views

Published on

JEPA EPUBセミナー#14

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,872
On SlideShare
0
From Embeds
0
Number of Embeds
1,123
Actions
Shares
0
Downloads
23
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

書籍解説 “What is EPUB 3?” & “Accessible EPUB 3”

  1. 1. 書籍解説 What is EPUB 3? &Accessible EPUB 3 イースト株式会社 高瀬 拓史 takase@est.co.jp 2012/09/21 JEPA EPUBセミナー#14
  2. 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. 3. 加筆分 2012年末?(有料)
  4. 4. 概要• EPUB 3の概論• EPUB 3 Best Practices の第一章 となる位置づけ• 歴史、技術、メリット、展望がコンパク トに整理されている• EPUB 3策定中に書かれているため、 アップデートされるはず
  5. 5. •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普及への展望 目次
  6. 6. EPUB 3とは何か• EPUBは汎用的なフォーマット 特定の種類の出版物に特化したものではない 雑誌、オフィス文書、政策文書など様々に利用できる• ウェブ標準を積極的に取り入れている すでに広く利用されている技術やスキルを活用できる• フリー、オープン 誰もが制約なく利用できるように設計されている シンプルなテキストエディタで制作できる点は普及の大きな要因
  7. 7. EPUB 3への改訂経緯• 電子出版市場の急速な進化 E Inkデバイスからタブレットデバイスへ• EPUB 2への改善要望 マルチメディア対応 インタラクティブなコンテンツ グローバル言語対応 アクセシビリティの向上• EPUB 3で残された課題 ビデオコーデック(H.264 vs WebM)が統一できなかった コミックやマンガの表示方法について試行錯誤が続いている
  8. 8. EPUB 3とウェブ標準• ブラウザのスタックを採用した理由 ブラウザのスタック(HTML, CSS, JavaScript) リフローに適していた 長期生存できるフォーマットだった ブラウザの描画エンジンを利用してビューワの開発コストを下げられた• ウェブ標準を利用するデメリット 標準化されておらずEPUBが自前で用意したもの  リッチな注釈データ(出版物としてのセマンティクス)  文書の読み順を定義する仕組み...etc. 他の仕様の方向性をコントロールできない  HTML5、CSS3の不確実性
  9. 9. EPUB 3の改良点• マルチメディア• メディアオーバーレイ• スクリプティング• SVG• グローバル言語対応• アクセシビリティ
  10. 10. 概要• 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/
  11. 11. • Accessible EPUB 3 • Introduction 高品質なデータとアクセシブルなデータ • Building a Better EPUB: Fundamental Accessibility 基礎部分(テキスト、画像等)に 関するテクニック • It s Alive: Rich Content Accessibility EPUB 3の新機能(マルチメディア、TTS等)に 関するテクニック • Conclusion 出版物をアクセシブルにすることのメリット ぜひ実践を! 目次
  12. 12. イントロダクション基本的な考え方• 高品質なデータ =構造化されたデータ =アクセシブルなデータ• リッチで使い回しの効くコンテンツを制 作すること• あらゆる人によりよい読書体験を与える こと
  13. 13. 基礎テクニック• スタイルの分離 視覚情報に頼らず読者に意味を伝えられるようにする スタイルシートを除去しても内容が失われないかチェック• セマンティクスの追加 epub:type属性を追加してビューワのユーザビリティを向上させる• コンテンツへの言語属性の指定 音声読み上げや点字表示の精度が向上する• 読み順への重要度の指定 linear属性を利用して重要ではない箇所をスキップできるようにする <itemref idref="chapter1"/> <itemref idref="chapter1-note" linear= no /><!-- skippable -->
  14. 14. 基礎テクニック• 段落間の空きをマークアップする 場面や文脈の変化を<hr>要素によって示す• リスト <ol>、<ul>、<dl>要素を適切に利用する• 図版、表、コード <figure>要素でグループ化しておく• 表: <table> 画像化は非推奨。ヘッダやセル同士の関係を適切にマークアップする <th>要素、<thead>要素、scope属性、header属性の利用
  15. 15. 基礎テクニック• 画像: <img> <img>要素を詳細に説明するための試案 ・<figcaption>要素の中で<details>要素を使う? ・<a>要素で説明用のHTML文書にリンクさせる? 意味のない画像にaltテキストは不要• 画像: SVG 拡大縮小に強く、タイトルや説明文が入れられる スクリプトの利用はアクセシブルではない http://www.w3.org/TR/SVG-access/ を参考に• 数式: MathML alttext属性に説明テキストを入れることを推奨 高度な説明が必要なら<annotation-xml>要素内にXHTMLで記述
  16. 16. 基礎テクニック• 脚注 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>
  17. 17. リッチコンテンツ• オーディオ、ビデオ 選択するビデオコーデックの問題(H.264 vs WebM)は解決できない →同じ内容を2種類のコーデックで用意するのは1つの方法 controls属性によって再生を制御できるようにする <video controls= controls >• 字幕の追加 <track>要素を利用してマルチメディアにテキストと表示タイミング を指定することはアクセシビリティ上有用 画像の説明テキスト同様わかりやすいものにすること <track kind="captions" src="video/captions/en/v001.cc.vtt" srclang="en" label="English"/>
  18. 18. リッチコンテンツ• メディアオーバーレイ 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…。今回の発表では省略します。
  19. 19. まとめ• EPUBの解説書は少なくないが、 設計思想や背景を知ることのできる 本書は貴重。• 制作マニュアルとして読まれるべきでは ない。• EPUBの尊重するもの、目指すものを 理解すると、制作者としての視野が広が ります。
  20. 20. ご清聴ありがとうございました

×