Your SlideShare is downloading. ×
はじめてのEPUB 3                 高瀬 拓史/ @lost_and_found          August 25, 2012. プログラミング生放送勉強会#17
Who are you?             ろす / @lost_and_found             高瀬 拓史 / Takase, Hiroshi             イースト株式会社             ブログ 「電書...
たまにITmediaのeBook USERにお邪魔したりします。
Contents• 電子出版を3つの観点で整理する• EPUBとは? そしてEPUB 3とは?• EPUB 3の何が新しいの?• 進化を続けるEPUB
電子出版を3つの観点で整理する
電子出版って   広すぎるテーマで   いやんなっちゃう ありきたりだけど 現状のサービスを次の3つの観点から   考えましょう
AspectsReading      Platform   FormatSystemリーディングシステム   プラットフォーム   フォーマット
リーディングシステムは  電子出版物を閲覧する   ハードウェアまたは  ソフトウェアのことねビューワとかリーダーとか呼ばれることが多いかしら
Reading SystemComputer   E-Ink    Smart   Tablet           Device   Phone   Device
プラットフォームは   「土台」のことよね   転じて出版社などが電子ブックでビジネスする 土台となる環境のことよ
PlatformPublisher Author                Consumer
フォーマットは電子ブックのデータ形式ね  仕様が公開されている    オープンなものと    特定の企業による   独自のものがあるわ
Format      Open          EPUB     PDF                     AZW             U.S.            KF8                    (Mobi)  ...
リーディングシステム   プラットフォーム     フォーマットそれぞれプレイヤー毎に    まとめてみたわ  日本のプレイヤーにはこんなにスッキリ書けない ものも多いんだけど……
Reading System,         Platform & FormatApple        iBookstore       EPUB        iBooks B&N       Nook Book Store    EPU...
EPUBとは?そしてEPUB 3とは?
これから学ぶEPUBが     広く使われている     フォーマットなのは     わかったかな   じゃあEPUBの話を     始めてゆくわよまずEPUBのロゴはこれよ        2010年に コンペを経て決まったの
Designed Good!            【参考】Gマーク         (グッドデザイン賞)         by 日本デザイン振興会
………………。 でも良くデザインされたフォーマットなのは確かよ
EPUBを開発・管理しているのは(国際電子出版フォーラム)という非営利の団体よIDPFのサイトではEPUBを次のように解説しているの
EPUB isthe                  and      distribution         interchange     formatfor digital                 based on      ...
配信フォーマット      はわかるけど      交換フォーマットって      聞き慣れないね   異なるシステム間でデータをやり取りするのに  使うフォーマットだと        考えてね
Interchange vs Distribution            Interchange             Distribution                交換                      配信     ...
ウェブ標準がベース     ってどういう意味?EPUBはウェブの分野で広く使われている規格をたくさん取り入れてるの
EPUB & Web Standards          HTML5        Unicode     MathML            CSS         Dublin      SMIL                     ...
ウェブ標準を       ベースにすると、       何かいいことあるの?・フォーマットの長期生存・ウェブ制作スキルの活用・ブラウザエンジンの転用 ができるのは大きなメリットね
EPUBの特徴を   もう一つ挙げるとしたら          リフローねスクリーンの幅や文字の大きさを 条件にして行の折り返し位置が          変化するの    小さなスクリーンでも  テキストを読みやすいのが          長所だわ
Reflow  iBooks
EPUBと       EPUB 3は       どういうご関係で?   正確には EPUB 3.0     EPUBの3回目の メジャー改訂バージョンよできたてホヤホヤなんだから
HistoryOEBPS 1.0    EPUB 2.0    EPUB 3.0     1999         2007        2011
そろそろ     EPUB 3の具体的な     イメージを掴みたいな        それならEPUB 3をどうやって  作るのかを知るのが    手っ取り早いわ
How to createContent Documents   Package Document   EPUB Container  コンテンツ文書             パッケージ文書           EPUBコンテナ • XHTML...
ものすごく簡略化したら1.XHTML5で書いたコンテンツ  を用意する2.メタデータなどの情報を持った  パッケージ文書を作る3.全部のファイルをzipでまとめるってステップになるわねできたEPUBの中身はこんな感じになってるの
Structure   Package Document         Content Documents       Navigation Document     パッケージ文書                  コンテンツ文書     ...
ず、ずるい!      さっきの説明になかった      ファイルや      ディレクトリがある  だから簡略化したって    言ってるじゃない   zipの中の構造にも    ルールがあるのよ別に難しいものじゃないわ
ナビゲーション文書って     なんだよ?コンテンツ文書の一種よ  目次がXHTML5で     書いてあるの
今日はあんまり踏み込んだ話はしないわ代わりに仕様の話をします複数の文書があるんだけど制作に関するものは次の4つよ
Specification                EPUB EPUB                Open Content                Container Documents                Format...
さっきのステップに        対応してる感じだね        1つだけ知らないのが        あるけどEPUB Media Overlays (メディアオーバーレイ) については後で解説するわ
EPUB 3の何が新しいの?
話は変わるけど      EPUB 3の      どの辺が      新しくなったの?オーディオ・ビデオが使えたり     インタラクティブな    コンテンツが作れたり  日本語を含む多様な言語に       対応したり……
New FeaturesMultimedia   Media Overlay マルチメディア     メディアオーバーレイ Scripting   Globalizationスクリプティング     グローバリデーション
表現力の向上についてはHTML5をベースにしたのが大きいわね<audio>, <video>,<svg>, <math>などのタグをネイティブに使えるんだもんあとはCSS3を取り入れてレイアウトの幅も広がったの
CSS3って        まだ勧告されていない        ものがたくさんあった        ような……?EPUB 3ではコンテンツに使用できる/リーディングシステムが対応すべきCSSの目安をプロファイルとして定めているわ
EPUB 3 CSS Profile• CSS3 Speech• CSS3 Fonts• CSS3 Text• CSS3 Modes  Writing                    CSS3• Media Queries• CSS3  N...
グローバリゼーションの例として代表的なものはなんといっても日本語テキストのいろいろなレイアウトに対応したことね
Japanese Text Layout               Ruby Annotation               Vertical Writing               Tate-chu-yoko             ...
メディアオーバーレイは    仕様のところでも    出てきたよね    そろそろkwsk……コンテンツのテキストに   音声を同期させて読み上げるための仕様ね  アクセシビリティを     向上させるわ
Media Overlays          Media Overlay Document           メディアオーバーレイ文書                   .smilContent Document             ...
さて、     EPUB 3の本を     読みたい人は     どのリーディングシステムを     使えばいいの?代表的なものを紹介するわ  でもEPUB 3の仕様を      完全に実装した リーディングシステムは   実はまだないのよね
Reading System    toward EPUB 3Windows                                  Kinoppy            Adobe     Readium            Di...
2012年8月24日時点で日本で使えるEPUB 3の機能を取り入れた代表的なものを表にしてみたけど今は変化が激しいからすぐにあてにならなくなっちゃうかもね
Readiumってのが         やたら存在感を         放ってるんだけど……ReadiumはIDPFや会員企業が協力してリーディングシステムのお手本となる実装を開発するオープンソースプロジェクトよ
ReadiumはWebKitをベースにしたエンジン部分の開発とChrome拡張による読書機能部分の開発が行われているわ後者はChrome WebStoreで入手可能よ
ReadiumChrome Extension
進化を続けるEPUB
EPUB 3ができた後、      作ってた人たちは      何やってんの?         EPUBにさらなる改良を加えるための検討や策定を続けているわよ  幾つか例を紹介するわね
Fixed layout出典: http://code.google.com/p/epub-samples/downloads/detail?name=page-blanche-20120808.epub
EPUBといえばリフローが特徴だけど、レイアウトが重要なコンテンツもあるのよねレイアウトが固定されたページを扱うためのEPUB 3 Fixed-Layout Documentsという文書が2012年に公開されたわ
Adaptive layout出典: http://code.google.com/p/epub-revision/downloads/detail?name=adaptive-layout.zip
複数の領域にまたがったり特定の形状をなぞったり……リフローを高度に制御して複雑なレイアウトを実現する方法も検討が続いているの
Hybrid layout出典: http://code.google.com/p/epub-revision/downloads/detail?name=COSMO-BNFF_V2_drp.epub
固定されたレイアウトとリフローするレイアウトを切り替え可能にする方法も検討する動きがあるわね
いろんな話があって      何だか眠くなって      きちゃった…… デモ用のコンテンツを見て 気分転換してみましょうかあと、次に同じこと言ったら      グーで殴るわよ
Demo• JavaScript               • Multimedia         • Fixed Layout• Canvas                                        • Media ...
うっうっ……    EPUB最高や……    電子ブックの    フォーマットは    EPUBに統一せなあかん!ちょっと、それ本気で言ってるの?
フォーマットごとに           得意不得意があるわけだし   高い      多機能    均質な表現を   紙面の再現がアクセシビリティ   汎用的      保証       得意 DAISY     EPUB   Mobi    ...
それにいくらEPUBがオープンでも               DRMによって相互運用性が               損なわれることはあるわ               Adobe Content ServerReader Store(SON...
EPUB 3はオープンで     汎用性も高いけど     万能とまでは     いかないわけか    それでもEPUBが    重要であることに    変わりはないわよみんなが共通に使える標準は  どう考えても必要だもの
EPUBにも電子出版にもいろいろ課題は残されているけどどちらも確実に進化を続けているのは間違いないわ      豊かなコンテンツを      便利に楽しめる時代が      待ち遠しいな
For more information•   “EPUB 3” The International Digital Publishing Forum.    http://idpf.org/epub/30.•   “EPUB 3 Fixed-...
See also                                                       いいパブッ!! よくわかるEPUB 3                                        ...
Thank you!             Densho-chan illustration; © 2010 Jcn, Inc & Garakuta.DefaultIcon; © CC-BY-ND 3.0 2010-2011 Apostolo...
Upcoming SlideShare
Loading in...5
×

いいパブッ!! はじめてのEPUB 3

127,522

Published on

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

Published in: Technology
3 Comments
34 Likes
Statistics
Notes
  • リーディング・システム、フォーマット、プラットフォームときれいに分けて解説されていて、頭の整理になりました。助かります。
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ありがとうございます。こうやってまとめていただけるとホントに頭がスッキリしてきます!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • おお,相変わらずプレゼンの見本みたいな資料ですね〜.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
127,522
On Slideshare
0
From Embeds
0
Number of Embeds
28
Actions
Shares
0
Downloads
0
Comments
3
Likes
34
Embeds 0
No embeds

No notes for slide

Transcript of "いいパブッ!! はじめてのEPUB 3"

  1. 1. はじめてのEPUB 3 高瀬 拓史/ @lost_and_found August 25, 2012. プログラミング生放送勉強会#17
  2. 2. Who are you? ろす / @lost_and_found 高瀬 拓史 / Takase, Hiroshi イースト株式会社 ブログ 「電書ちゃんねる」管理人 • 日本電子出版協会 「Minimal Requirements on EPUB for Japanese Text Layout」 • 電子出版環境整備事業「EPUB日本語拡張仕様策定」電書ちゃん「電書ちゃんねる」マスコットキャラクター電子書籍の世界を案内してくれる謎の女の子性格キツめ立ち絵が少ないのが弱点イラストは© (有)JCN & Garakuta
  3. 3. たまにITmediaのeBook USERにお邪魔したりします。
  4. 4. Contents• 電子出版を3つの観点で整理する• EPUBとは? そしてEPUB 3とは?• EPUB 3の何が新しいの?• 進化を続けるEPUB
  5. 5. 電子出版を3つの観点で整理する
  6. 6. 電子出版って 広すぎるテーマで いやんなっちゃう ありきたりだけど 現状のサービスを次の3つの観点から 考えましょう
  7. 7. AspectsReading Platform FormatSystemリーディングシステム プラットフォーム フォーマット
  8. 8. リーディングシステムは 電子出版物を閲覧する ハードウェアまたは ソフトウェアのことねビューワとかリーダーとか呼ばれることが多いかしら
  9. 9. Reading SystemComputer E-Ink Smart Tablet Device Phone Device
  10. 10. プラットフォームは 「土台」のことよね 転じて出版社などが電子ブックでビジネスする 土台となる環境のことよ
  11. 11. PlatformPublisher Author Consumer
  12. 12. フォーマットは電子ブックのデータ形式ね 仕様が公開されている オープンなものと 特定の企業による 独自のものがあるわ
  13. 13. Format Open EPUB PDF AZW U.S. KF8 (Mobi) Pro-prietary Japan .book XMDF
  14. 14. リーディングシステム プラットフォーム フォーマットそれぞれプレイヤー毎に まとめてみたわ 日本のプレイヤーにはこんなにスッキリ書けない ものも多いんだけど……
  15. 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. 16. EPUBとは?そしてEPUB 3とは?
  17. 17. これから学ぶEPUBが 広く使われている フォーマットなのは わかったかな じゃあEPUBの話を 始めてゆくわよまずEPUBのロゴはこれよ 2010年に コンペを経て決まったの
  18. 18. Designed Good! 【参考】Gマーク (グッドデザイン賞) by 日本デザイン振興会
  19. 19. ………………。 でも良くデザインされたフォーマットなのは確かよ
  20. 20. EPUBを開発・管理しているのは(国際電子出版フォーラム)という非営利の団体よIDPFのサイトではEPUBを次のように解説しているの
  21. 21. EPUB isthe and distribution interchange formatfor digital based on publications web standards. ウェブ標準をベースにした 電子出版物の配信・交換フォーマット
  22. 22. 配信フォーマット はわかるけど 交換フォーマットって 聞き慣れないね 異なるシステム間でデータをやり取りするのに 使うフォーマットだと 考えてね
  23. 23. Interchange vs Distribution Interchange Distribution 交換 配信 EPUB AZWPublisher Kindle Store Consumer EPUB EPUBPublisher Reader Store Consumer
  24. 24. ウェブ標準がベース ってどういう意味?EPUBはウェブの分野で広く使われている規格をたくさん取り入れてるの
  25. 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. 26. ウェブ標準を ベースにすると、 何かいいことあるの?・フォーマットの長期生存・ウェブ制作スキルの活用・ブラウザエンジンの転用 ができるのは大きなメリットね
  27. 27. EPUBの特徴を もう一つ挙げるとしたら リフローねスクリーンの幅や文字の大きさを 条件にして行の折り返し位置が 変化するの 小さなスクリーンでも テキストを読みやすいのが 長所だわ
  28. 28. Reflow iBooks
  29. 29. EPUBと EPUB 3は どういうご関係で? 正確には EPUB 3.0 EPUBの3回目の メジャー改訂バージョンよできたてホヤホヤなんだから
  30. 30. HistoryOEBPS 1.0 EPUB 2.0 EPUB 3.0 1999 2007 2011
  31. 31. そろそろ EPUB 3の具体的な イメージを掴みたいな それならEPUB 3をどうやって 作るのかを知るのが 手っ取り早いわ
  32. 32. How to createContent Documents Package Document EPUB Container コンテンツ文書 パッケージ文書 EPUBコンテナ • XHTML5 • metadata • zip • CSS, images...etc. • manifest • reading order
  33. 33. ものすごく簡略化したら1.XHTML5で書いたコンテンツ  を用意する2.メタデータなどの情報を持った  パッケージ文書を作る3.全部のファイルをzipでまとめるってステップになるわねできたEPUBの中身はこんな感じになってるの
  34. 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. 35. ず、ずるい! さっきの説明になかった ファイルや ディレクトリがある だから簡略化したって 言ってるじゃない zipの中の構造にも ルールがあるのよ別に難しいものじゃないわ
  36. 36. ナビゲーション文書って なんだよ?コンテンツ文書の一種よ 目次がXHTML5で 書いてあるの
  37. 37. 今日はあんまり踏み込んだ話はしないわ代わりに仕様の話をします複数の文書があるんだけど制作に関するものは次の4つよ
  38. 38. Specification EPUB EPUB Open Content Container Documents Format 3.0 3.0 EPUB EPUB Media Publications Overlays 3.0 3.0
  39. 39. さっきのステップに 対応してる感じだね 1つだけ知らないのが あるけどEPUB Media Overlays (メディアオーバーレイ) については後で解説するわ
  40. 40. EPUB 3の何が新しいの?
  41. 41. 話は変わるけど EPUB 3の どの辺が 新しくなったの?オーディオ・ビデオが使えたり インタラクティブな コンテンツが作れたり 日本語を含む多様な言語に 対応したり……
  42. 42. New FeaturesMultimedia Media Overlay マルチメディア メディアオーバーレイ Scripting Globalizationスクリプティング グローバリデーション
  43. 43. 表現力の向上についてはHTML5をベースにしたのが大きいわね<audio>, <video>,<svg>, <math>などのタグをネイティブに使えるんだもんあとはCSS3を取り入れてレイアウトの幅も広がったの
  44. 44. CSS3って まだ勧告されていない ものがたくさんあった ような……?EPUB 3ではコンテンツに使用できる/リーディングシステムが対応すべきCSSの目安をプロファイルとして定めているわ
  45. 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. 46. グローバリゼーションの例として代表的なものはなんといっても日本語テキストのいろいろなレイアウトに対応したことね
  47. 47. Japanese Text Layout Ruby Annotation Vertical Writing Tate-chu-yoko Right to Left Page Progression Kobo Touch
  48. 48. メディアオーバーレイは 仕様のところでも 出てきたよね そろそろkwsk……コンテンツのテキストに 音声を同期させて読み上げるための仕様ね アクセシビリティを 向上させるわ
  49. 49. Media Overlays Media Overlay Document メディアオーバーレイ文書 .smilContent Document Audio clip Sync
  50. 50. さて、 EPUB 3の本を 読みたい人は どのリーディングシステムを 使えばいいの?代表的なものを紹介するわ でもEPUB 3の仕様を 完全に実装した リーディングシステムは 実はまだないのよね
  51. 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. 52. 2012年8月24日時点で日本で使えるEPUB 3の機能を取り入れた代表的なものを表にしてみたけど今は変化が激しいからすぐにあてにならなくなっちゃうかもね
  53. 53. Readiumってのが やたら存在感を 放ってるんだけど……ReadiumはIDPFや会員企業が協力してリーディングシステムのお手本となる実装を開発するオープンソースプロジェクトよ
  54. 54. ReadiumはWebKitをベースにしたエンジン部分の開発とChrome拡張による読書機能部分の開発が行われているわ後者はChrome WebStoreで入手可能よ
  55. 55. ReadiumChrome Extension
  56. 56. 進化を続けるEPUB
  57. 57. EPUB 3ができた後、 作ってた人たちは 何やってんの? EPUBにさらなる改良を加えるための検討や策定を続けているわよ 幾つか例を紹介するわね
  58. 58. Fixed layout出典: http://code.google.com/p/epub-samples/downloads/detail?name=page-blanche-20120808.epub
  59. 59. EPUBといえばリフローが特徴だけど、レイアウトが重要なコンテンツもあるのよねレイアウトが固定されたページを扱うためのEPUB 3 Fixed-Layout Documentsという文書が2012年に公開されたわ
  60. 60. Adaptive layout出典: http://code.google.com/p/epub-revision/downloads/detail?name=adaptive-layout.zip
  61. 61. 複数の領域にまたがったり特定の形状をなぞったり……リフローを高度に制御して複雑なレイアウトを実現する方法も検討が続いているの
  62. 62. Hybrid layout出典: http://code.google.com/p/epub-revision/downloads/detail?name=COSMO-BNFF_V2_drp.epub
  63. 63. 固定されたレイアウトとリフローするレイアウトを切り替え可能にする方法も検討する動きがあるわね
  64. 64. いろんな話があって 何だか眠くなって きちゃった…… デモ用のコンテンツを見て 気分転換してみましょうかあと、次に同じこと言ったら グーで殴るわよ
  65. 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. 66. うっうっ…… EPUB最高や…… 電子ブックの フォーマットは EPUBに統一せなあかん!ちょっと、それ本気で言ってるの?
  67. 67. フォーマットごとに 得意不得意があるわけだし 高い 多機能 均質な表現を 紙面の再現がアクセシビリティ 汎用的 保証 得意 DAISY EPUB Mobi PDF 一つの本が複数のフォーマットで 提供されることも珍しくないのよ
  68. 68. それにいくらEPUBがオープンでも DRMによって相互運用性が 損なわれることはあるわ Adobe Content ServerReader Store(SONY) FairPlayiBookStore(Apple)
  69. 69. EPUB 3はオープンで 汎用性も高いけど 万能とまでは いかないわけか それでもEPUBが 重要であることに 変わりはないわよみんなが共通に使える標準は どう考えても必要だもの
  70. 70. EPUBにも電子出版にもいろいろ課題は残されているけどどちらも確実に進化を続けているのは間違いないわ 豊かなコンテンツを 便利に楽しめる時代が 待ち遠しいな
  71. 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. 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. 73. Thank you! Densho-chan illustration; © 2010 Jcn, Inc & Garakuta.DefaultIcon; © CC-BY-ND 3.0 2010-2011 Apostolos Paschalidis interactivemania.

×