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.
AspectsReading Platform FormatSystemリーディングシステム プラットフォーム フォーマット

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

9.
Reading SystemComputer E-Ink Smart Tablet Device Phone Device

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

11.
PlatformPublisher Author Consumer

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

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

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

15.
Reading System, Platform & FormatApple iBookstore EPUB iBooks B&N Nook Book Store EPUB NookSONY Reader Store EPUB Reader 楽天 Kobo ebook Store EPUB KoboSharp GALAPAGOS STORE XMDF GALAPAGOSAmazon 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 isthe and distribution interchange formatfor digital based on publications web standards. ウェブ標準をベースにした 電子出版物の配信・交換フォーマット

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

23.
Interchange vs Distribution Interchange Distribution 交換 配信 EPUB AZWPublisher Kindle Store Consumer EPUB EPUBPublisher Reader Store Consumer

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

25.
EPUB & Web Standards HTML5 Unicode MathML CSS Dublin SMIL Core JavaScript XML SSMLEPUB 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.
HistoryOEBPS 1.0 EPUB 2.0 EPUB 3.0 1999 2007 2011

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

32.
How to createContent 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 パッケージ文書 コンテンツ文書 ナビゲーション文書 XMLmimetype META-INF/ mybook.opf chapter1.xthml nav.xthml ...etc. XML CSS js F container.xml other resources EPUB Container zip containermybook.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 FeaturesMultimedia 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 メディアオーバーレイ文書 .smilContent Document Audio clip Sync

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

51.
Reading System toward EPUB 3Windows 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 WebStoreで入手可能よ

55.
ReadiumChrome 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 Overlayshttp://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 ServerReader Store(SONY) FairPlayiBookStore(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?” OReilly Media. http://shop.oreilly.com/product/0636920022442.do.• Matt Garrish. “Accessible EPUB 3” OReilly 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.