プログラミング生放送勉強会#17発表資料。 入門者向けの内容となっています。

1. はじめてのEPUB 3
高瀬 拓史/ @lost_and_found
August 25, 2012. プログラミング生放送勉強会#17

2. Who are you?
ろす / @lost_and_found
高瀬 拓史 / Takase, Hiroshi
イースト株式会社
ブログ 「電書ちゃんねる」管理人
• 日本電子出版協会 「Minimal Requirements on
EPUB for Japanese Text Layout」
• 電子出版環境整備事業「EPUB日本語拡張仕様策定」
電書ちゃん
「電書ちゃんねる」マスコットキャラクター
電子書籍の世界を案内してくれる謎の女の子
性格キツめ
立ち絵が少ないのが弱点
イラストは© (有)JCN & Garakuta

3. たまに
ITmediaの
eBook USER
にお邪魔したり
します。

4. Contents
• 電子出版を3つの観点で整理する
• EPUBとは？ そしてEPUB 3とは？
• EPUB 3の何が新しいの？
• 進化を続けるEPUB

5. 電子出版を
3つの観点で整理する

6. 電子出版って
広すぎるテーマで
いやんなっちゃう
ありきたりだけど
現状のサービスを
次の３つの観点から
考えましょう

7. Aspects
Reading Platform Format
System
リーディングシステム プラットフォーム フォーマット

8. リーディングシステムは
電子出版物を閲覧する
ハードウェアまたは
ソフトウェアのことね
ビューワとかリーダーとか
呼ばれることが多いかしら

9. Reading System
Computer E-Ink Smart Tablet
Device Phone Device

10. プラットフォームは
「土台」のことよね
転じて出版社などが
電子ブックでビジネスする
土台となる環境のことよ

11. Platform
Publisher
Author Consumer

12. フォーマットは
電子ブックのデータ形式ね
仕様が公開されている
オープンなものと
特定の企業による
独自のものがあるわ

13. Format
Open EPUB PDF
AZW
U.S. KF8
(Mobi)
Pro-
prietary
Japan .book XMDF

14. リーディングシステム
プラットフォーム
フォーマット
それぞれプレイヤー毎に
まとめてみたわ
日本のプレイヤーには
こんなにスッキリ書けない
ものも多いんだけど……

15. Reading System,
Platform & Format
Apple iBookstore EPUB iBooks
B&N Nook Book Store EPUB Nook
SONY Reader Store EPUB Reader
楽天 Kobo ebook Store EPUB Kobo
Sharp GALAPAGOS STORE XMDF GALAPAGOS
Amazon Kindle Store AZW, KF8 Kindle

16. EPUBとは？
そしてEPUB 3とは？

17. これから学ぶEPUBが
広く使われている
フォーマットなのは
わかったかな
じゃあEPUBの話を
始めてゆくわよ
まずEPUBのロゴはこれよ
2010年に
コンペを経て決まったの

18. Designed Good!
【参考】Gマーク
（グッドデザイン賞）
by 日本デザイン振興会

19. ………………。
でも良くデザインされた
フォーマットなのは確かよ

20. EPUBを
開発・管理しているのは
(国際電子出版フォーラム)
という非営利の団体よ
IDPFのサイトでは
EPUBを次のように
解説しているの

21. EPUB is
the and
distribution interchange format
for digital based on
publications web standards.
ウェブ標準をベースにした
電子出版物の配信・交換フォーマット

22. 配信フォーマット
はわかるけど
交換フォーマットって
聞き慣れないね
異なるシステム間で
データをやり取りするのに
使うフォーマットだと
考えてね

23. Interchange vs Distribution
Interchange Distribution
交換 配信
EPUB AZW
Publisher Kindle Store Consumer
EPUB EPUB
Publisher Reader Store Consumer

24. ウェブ標準がベース
ってどういう意味？
EPUBはウェブの分野で
広く使われている規格を
たくさん取り入れてるの

25. EPUB & Web Standards
HTML5 Unicode MathML
CSS Dublin SMIL
Core
JavaScript XML SSML
EPUB 3
Namespaces
SVG in XML
PLS
XML
OpenType WCAG
Signature
XML
WOFF
Encryption ...etc.

26. ウェブ標準を
ベースにすると、
何かいいことあるの？
・フォーマットの長期生存
・ウェブ制作スキルの活用
・ブラウザエンジンの転用
ができるのは大きなメリットね

27. EPUBの特徴を
もう一つ挙げるとしたら
リフローね
スクリーンの幅や文字の大きさを
条件にして行の折り返し位置が
変化するの
小さなスクリーンでも
テキストを読みやすいのが
長所だわ

28. Reflow
iBooks

29. EPUBと
EPUB 3は
どういうご関係で？
正確には EPUB 3.0
EPUBの３回目の
メジャー改訂バージョンよ
できたてホヤホヤなんだから

30. History
OEBPS 1.0 EPUB 2.0 EPUB 3.0
1999 2007 2011

31. そろそろ
EPUB 3の具体的な
イメージを掴みたいな
それなら
EPUB 3をどうやって
作るのかを知るのが
手っ取り早いわ

32. How to create
Content Documents Package Document EPUB Container
コンテンツ文書 パッケージ文書 EPUBコンテナ
• XHTML5 • metadata • zip
• CSS,
images...etc.
• manifest
• reading order

33. ものすごく簡略化したら
１．XHTML5で書いたコンテンツ
を用意する
２．メタデータなどの情報を持った
パッケージ文書を作る
３．全部のファイルをzipでまとめる
ってステップになるわね
できたEPUBの中身はこんな感じに
なってるの

34. Structure
Package Document Content Documents Navigation Document
パッケージ文書 コンテンツ文書 ナビゲーション文書
XML
mimetype META-INF/ mybook.opf chapter1.xthml nav.xthml
...etc.
XML CSS js F
container.xml
other resources
EPUB Container zip container
mybook.epub EPUBコンテナ

35. ず、ずるい！
さっきの説明になかった
ファイルや
ディレクトリがある
だから簡略化したって
言ってるじゃない
zipの中の構造にも
ルールがあるのよ
別に難しいものじゃないわ

36. ナビゲーション文書って
なんだよ？
コンテンツ文書の一種よ
目次がXHTML5で
書いてあるの

37. 今日はあんまり踏み込んだ
話はしないわ
代わりに仕様の話をします
複数の文書があるんだけど
制作に関するものは
次の４つよ

38. Specification
EPUB
EPUB
Open
Content
Container
Documents
Format
3.0
3.0
EPUB
EPUB
Media
Publications
Overlays
3.0
3.0

39. さっきのステップに
対応してる感じだね
１つだけ知らないのが
あるけど
EPUB Media Overlays
（メディアオーバーレイ）
については後で解説するわ

40. EPUB 3の何が新しいの？

41. 話は変わるけど
EPUB 3の
どの辺が
新しくなったの？
オーディオ・ビデオが使えたり
インタラクティブな
コンテンツが作れたり
日本語を含む多様な言語に
対応したり……

42. New Features
Multimedia Media Overlay
マルチメディア メディアオーバーレイ
Scripting Globalization
スクリプティング グローバリデーション

43. 表現力の向上については
HTML5をベースに
したのが大きいわね
<audio>, <video>,
<svg>, <math>
などのタグをネイティブに
使えるんだもん
あとはCSS3を取り入れて
レイアウトの幅も広がったの

44. CSS3って
まだ勧告されていない
ものがたくさんあった
ような……？
EPUB 3では
コンテンツに使用できる／
リーディングシステムが対応すべき
CSSの目安をプロファイルとして
定めているわ

45. EPUB 3 CSS Profile
• CSS3 Speech
• CSS3 Fonts
• CSS3 Text
• CSS3 Modes
Writing CSS3
• Media Queries
• CSS3
Namespaces
• CSS3 Multicol CSS2.1
• CSS3 Ruby
Baseline

46. グローバリゼーションの
例として代表的なものは
なんといっても
日本語テキストの
いろいろなレイアウトに
対応したことね

47. Japanese Text Layout
Ruby Annotation
Vertical Writing
Tate-chu-yoko
Right to Left
Page Progression
Kobo Touch

48. メディアオーバーレイは
仕様のところでも
出てきたよね
そろそろkwsk……
コンテンツのテキストに
音声を同期させて
読み上げるための仕様ね
アクセシビリティを
向上させるわ

49. Media Overlays
Media Overlay Document
メディアオーバーレイ文書
.smil
Content Document Audio clip
Sync

50. さて、
EPUB 3の本を
読みたい人は
どのリーディングシステムを
使えばいいの？
代表的なものを紹介するわ
でもEPUB 3の仕様を
完全に実装した
リーディングシステムは
実はまだないのよね

51. Reading System
toward EPUB 3
Windows
Kinoppy
Adobe Readium
Digital Chrome
Editions Extension
MacOS 1.8
preview
Murasaki kitabu
iOS
iBooks DL
Kinoppy
Reader
Andorid Himawari
Reader
E-Ink Reader Kobo
PRS-T1 Touch

52. 2012年８月24日時点で
日本で使える
EPUB 3の機能を
取り入れた代表的なものを
表にしてみたけど
今は変化が激しいから
すぐにあてにならなく
なっちゃうかもね

53. Readiumってのが
やたら存在感を
放ってるんだけど……
ReadiumはIDPFや会員企業が
協力してリーディングシステムの
お手本となる実装を開発する
オープンソースプロジェクトよ

54. Readiumは
WebKitをベースにした
エンジン部分の開発と
Chrome拡張による
読書機能部分の開発が
行われているわ
後者はChrome Web
Storeで入手可能よ

55. Readium
Chrome Extension

56. 進化を続けるEPUB

57. EPUB 3ができた後、
作ってた人たちは
何やってんの？
EPUBに
さらなる改良を加えるための
検討や策定を続けているわよ
幾つか例を紹介するわね

58. Fixed layout
出典： http://code.google.com/p/epub-samples/downloads/detail?name=page-blanche-20120808.epub

59. EPUBといえば
リフローが特徴だけど、
レイアウトが重要な
コンテンツもあるのよね
レイアウトが固定された
ページを扱うための
EPUB 3 Fixed-Layout Documents
という文書が2012年に
公開されたわ

60. Adaptive layout
出典： http://code.google.com/p/epub-revision/downloads/detail?name=adaptive-layout.zip

61. 複数の領域にまたがったり
特定の形状をなぞったり……
リフローを高度に制御して
複雑なレイアウトを実現する
方法も検討が続いているの

62. Hybrid layout
出典： http://code.google.com/p/epub-revision/downloads/detail?name=COSMO-BNFF_V2_drp.epub

63. 固定されたレイアウトと
リフローするレイアウトを
切り替え可能にする方法も
検討する動きがあるわね

64. いろんな話があって
何だか眠くなって
きちゃった……
デモ用のコンテンツを見て
気分転換してみましょうか
あと、次に同じこと言ったら
グーで殴るわよ

65. Demo
• JavaScript • Multimedia • Fixed Layout
• Canvas • Media Overlays
http://shop.oreilly.com/ http:// https://
product/ kanakanabooks.com/ docs.google.com/
0636920022473.do category/books open?
id=0ByYcqDWy0uj4dW
NvdXF5dE1XeTQ

66. うっうっ……
EPUB最高や……
電子ブックの
フォーマットは
EPUBに統一せなあかん！
ちょっと、それ本気で
言ってるの？

67. フォーマットごとに
得意不得意があるわけだし
高い 多機能 均質な表現を 紙面の再現が
アクセシビリティ 汎用的 保証 得意
DAISY EPUB Mobi PDF
一つの本が複数のフォーマットで
提供されることも珍しくないのよ

68. それにいくらEPUBがオープンでも
DRMによって相互運用性が
損なわれることはあるわ
Adobe Content Server
Reader Store
(SONY)
FairPlay
iBookStore
(Apple)

69. EPUB 3はオープンで
汎用性も高いけど
万能とまでは
いかないわけか
それでもEPUBが
重要であることに
変わりはないわよ
みんなが共通に使える標準は
どう考えても必要だもの

70. EPUBにも電子出版にも
いろいろ課題は
残されているけど
どちらも確実に進化を
続けているのは間違いないわ
豊かなコンテンツを
便利に楽しめる時代が
待ち遠しいな

71. For more information
• “EPUB 3” The International Digital Publishing Forum.
http://idpf.org/epub/30.
• “EPUB 3 Fixed-Layout Documents” The International Digital
Publishing Forum.
http://idpf.org/epub/fxl/.
• “EPUB 3 仕様書・関連文書日本語訳一覧” IMAGEDRIVE.
http://blog.imagedrive.jp/web/2012-05-08/epub-3-specification-ja.
• Matt Garrish. “What is EPUB 3?” O'Reilly Media.
http://shop.oreilly.com/product/0636920022442.do.
• Matt Garrish. “Accessible EPUB 3” O'Reilly Media.
http://shop.oreilly.com/product/0636920025283.do.

72. See also
いいパブッ!！ よくわかるEPUB 3
EPUB 3を、もう少し細かいレベルで
解説しています。
HTML5とか勉強会発表資料
http://www.slideshare.net/lost_and_found/iipabu-11542571
かたログッ!！ 本をネットに解き放て
電子出版物の配信技術OPDSカタログに 本をネットに解き放て
ついて解説しています。
日本電子出版協会EPUBセミナー発表資料
http://www.slideshare.net/lost_and_found/ss-12020124 高瀬 拓史
@lost_and_found
March 15, 2012

73. Thank you!
Densho-chan illustration; © 2010 Jcn, Inc & Garakuta.
DefaultIcon; © CC-BY-ND 3.0 2010-2011 Apostolos Paschalidis interactivemania.