Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

20120628_openend_ebookpro_mediverse_epub3_audio_video_emb_fixed_layout_ver2

3,873 views

Published on

Published in: Technology
  • Be the first to comment

20120628_openend_ebookpro_mediverse_epub3_audio_video_emb_fixed_layout_ver2

  1. 1. EPUB3技術解説セミナー2 ビデオ・オーディオ/固定レイアウト 2012年6月28日(木)15:00-16:40 境祐司 @commonstyle ¦ 電子書籍メディア論
  2. 2. profile YOUJI SAKAIInstructional Designer | eBook Designer 境祐司
  3. 3. BOOKS 最新刊ウェブレイアウトの EPUB3スタンダード Webデザイン基礎 教科書 デザインガイド 改訂3版
  4. 4. community 電子書籍メデ ア論 ィ http://www.facebook.com/eBookStrategy デザインの未来http://www.facebook.com/TheFutureDesign
  5. 5. テキスト
  6. 6. EPUB3技術解説セミナー2本日のテーマ: ビデオ オーディオ ・ 固定レイアウト
  7. 7. EPUB3技術解説セミナー2ビデオ オーディオ ・EPUB3 Video, Audio
  8. 8. EPUB3技術解説セミナー2EPUB3の仕様書を確認します
  9. 9. EPUB3技術解説セミナー2EPUB 3 ¦ International Digital Publishing Forum http://idpf.org/epub/30
  10. 10. EPUB3技術解説セミナー2コンテンツドキュメントの仕様を確認します EPUB Content Documents 3.0
  11. 11. EPUB3技術解説セミナー2 EPUB Content Documents 3.0http://idpf.org/epub/30/spec/epub30-contentdocs.html
  12. 12. EPUB3技術解説セミナー2 1.2.1 Relationship to HTML5http://idpf.org/epub/30/spec/epub30-contentdocs.html#sec-overview-relations-html
  13. 13. EPUB3技術解説セミナー2 1.2.1 Relationship to HTML5http://idpf.org/epub/30/spec/epub30-contentdocs.html#sec-overview-relations-html
  14. 14. EPUB3技術解説セミナー2HTML5の仕様書を確認します
  15. 15. EPUB3技術解説セミナー2 HTML5 http://www.w3.org/TR/html5/
  16. 16. EPUB3技術解説セミナー2video要素の仕様について確認します
  17. 17. EPUB3技術解説セミナー2 4.8.6 The video elementhttp://www.w3.org/TR/html5/the-video-element.html#the-video-element
  18. 18. EPUB3技術解説セミナー2 4.8.6 The video elementhttp://www.w3.org/TR/html5/the-video-element.html#the-video-element src crossorigin poster preload autoplay mediagroup loop muted controls width height
  19. 19. EPUB3技術解説セミナー2audio要素の仕様について確認します
  20. 20. EPUB3技術解説セミナー2 4.8.7 The audio elementhttp://www.w3.org/TR/html5/the-audio-element.html#the-audio-element
  21. 21. EPUB3技術解説セミナー2 4.8.7 The audio elementhttp://www.w3.org/TR/html5/the-audio-element.html#the-audio-element src crossorigin preload autoplay mediagroup loop muted controls
  22. 22. EPUB3技術解説セミナー2パッケージドキュメントの仕様を確認します EPUB Publications 3.0
  23. 23. EPUB3技術解説セミナー2 EPUB Publications 3.0http://idpf.org/epub/30/spec/epub30-publications.html
  24. 24. EPUB3技術解説セミナー2ビデオのメディアタイプを確認します
  25. 25. EPUB3技術解説セミナー2 5.1 Core Media Typeshttp://idpf.org/epub/30/spec/epub30-publications.html#sec-core-media-types
  26. 26. EPUB3技術解説セミナー2 5.1 Core Media Typeshttp://idpf.org/epub/30/spec/epub30-publications.html#sec-core-media-types
  27. 27. EPUB3技術解説セミナー2 5.1 Core Media Typeshttp://idpf.org/epub/30/spec/epub30-publications.html#sec-core-media-types Audio Type
  28. 28. EPUB3技術解説セミナー2ビデオのメディアタイプはありません
  29. 29. EPUB3技術解説セミナー2 5.1 Core Media Typeshttp://idpf.org/epub/30/spec/epub30-publications.html#sec-core-media-types
  30. 30. EPUB3技術解説セミナー2 5.1 Core Media Types http://idpf.org/epub/30/spec/epub30-publications.html#sec-core-media-typesNOTEThis specification does not define any video codecs as CoreMedia Types. Refer to the note in EPUB Publications ̶ ReadingSystem Conformance above for informative recommendationson support for video codecs in EPUB Publications. この仕様はビデオコーデックを定義していません
  31. 31. EPUB3技術解説セミナー2 5.1 Core Media Typeshttp://idpf.org/epub/30/spec/epub30-publications.html#sec-core-media-types
  32. 32. EPUB3技術解説セミナー2 5.1 Core Media Types http://idpf.org/epub/30/spec/epub30-publications.html#sec-core-media-typesNOTEIt is recommended that Reading Systems support at least one of the [H.264] and [VP8] video codecs, but this is not a conformance requirement; aReading System may support no video codecs at all. Content creators andReading System developers should take into consideration factors such asbreadth of adoption, video playback quality, and technology usage royaltyrequirements when making a choice to include or implement video in either(or potentially, both) formats.H.264 と VP8 ビデオコーデックの少なくとも一つをサポートすることが望ましい※適合要件ではありません
  33. 33. EPUB3技術解説セミナー2 H.264 VP8
  34. 34. EPUB3技術解説セミナー2なぜ、ビデオは定義されなかったのか?
  35. 35. EPUB3技術解説セミナー2ウェブで「ビデオ」 といえば、 Flash Video
  36. 36. EPUB3技術解説セミナー2 すべてのブラウザに対応IE Firefox Chrome Safari Opera
  37. 37. EPUB3技術解説セミナー2 HTML5 Videoは?IE Firefox Chrome Safari Opera
  38. 38. EPUB3技術解説セミナー2HTML5版のYouTubeで試してみよう
  39. 39. EPUB3技術解説セミナー2
  40. 40. EPUB3技術解説セミナー2 HTML5版のYouTube
  41. 41. EPUB3技術解説セミナー2Flash版YouTubeの場合、以下のURLで切り替える http://www.youtube.com/html5
  42. 42. EPUB3技術解説セミナー2HTML5版のYouTubeで試してみよう Safari
  43. 43. EPUB3技術解説セミナー2
  44. 44. EPUB3技術解説セミナー2 動画タグ h.264 WebM
  45. 45. EPUB3技術解説セミナー2HTML5版のYouTubeで試してみよう Chrome
  46. 46. EPUB3技術解説セミナー2
  47. 47. EPUB3技術解説セミナー2 動画タグ h.264 WebM
  48. 48. EPUB3技術解説セミナー2HTML5版のYouTubeで試してみよう Firefox
  49. 49. EPUB3技術解説セミナー2
  50. 50. EPUB3技術解説セミナー2 動画タグ h.264 WebM
  51. 51. EPUB3技術解説セミナー2ブラウザによってサポートしている ビデオフォーマットが異なる!
  52. 52. EPUB3技術解説セミナー2ブラウザについて確認しておこう
  53. 53. EPUB3技術解説セミナー2 BrowserIE Firefox Chrome Safari Opera
  54. 54. EPUB3技術解説セミナー2 Browser rendering engine IE Firefox Chrome Safari OperaTrident Gecko WebKit WebKit Presto
  55. 55. EPUB3技術解説セミナー2HTML5 ビデオのサポートは?
  56. 56. EPUB3技術解説セミナー2MPEG-4 9.0+ - - 3.0+ - Ogg - 3.5+ 5.0+ - 10.50+WebM 9.0+ 4.0+ 6.0+ - 10.60+ VP8コーデック必要
  57. 57. EPUB3技術解説セミナー2MPEG-4 9.0+ - - 3.0+ - Ogg - 3.5+ 5.0+ - 10.50+WebM 9.0+ 4.0+ 6.0+ - 10.60+ VP8コーデック必要
  58. 58. EPUB3技術解説セミナー2 iOS AndroidMPEG-4 3.0+ 2.0+ Ogg - -WebM - -
  59. 59. EPUB3技術解説セミナー2この状況では、EPUB3の仕様で 定義できない!
  60. 60. EPUB3技術解説セミナー2 5.1 Core Media Types http://idpf.org/epub/30/spec/epub30-publications.html#sec-core-media-typesNOTEIt is recommended that Reading Systems support at least one of the [H.264] and [VP8] video codecs, but this is not a conformance requirement; aReading System may support no video codecs at all. Content creators andReading System developers should take into consideration factors such asbreadth of adoption, video playback quality, and technology usage royaltyrequirements when making a choice to include or implement video in either(or potentially, both) formats.H.264 と VP8 ビデオコーデックの少なくとも一つをサポートすることが望ましい※適合要件ではありません
  61. 61. EPUB3技術解説セミナー2 H.264 VP8
  62. 62. EPUB3技術解説セミナー2ビデオファイル
  63. 63. EPUB3技術解説セミナー2ビデオファイル Video Container
  64. 64. EPUB3技術解説セミナー2ビデオファイル MetadataVideo codecAudio codec
  65. 65. EPUB3技術解説セミナー2 ビデオコンテナMEPG-4 AVI FLV .mp4 .m4v .avi .flv Ogg WebM .ogv .webm
  66. 66. EPUB3技術解説セミナー2 ビデオコンテナ Metadata Metadata MetadataVideo codec Video codec Video codecAudio codec Audio codec Audio codec Metadata Metadata Video codec Video codec Audio codec Audio codec
  67. 67. EPUB3技術解説セミナー2 ビデオコンテナMPEG-4 Ogg WebM.mp4 .m4v .ogv .webm
  68. 68. EPUB3技術解説セミナー2 ビデオコンテナ (メタデータ)Metadata Metadata MetadataMPEG-4 Ogg WebM.mp4 .m4v .ogv .webm
  69. 69. EPUB3技術解説セミナー2 ビデオコンテナ (メタデータ + ビデオコーデック)Metadata Metadata Metadata H.264 Theora VP8MPEG-4 Ogg WebM.mp4 .m4v .ogv .webm
  70. 70. EPUB3技術解説セミナー2 ビデオコンテナ(メタデータ + ビデオコーデック + オーディオコーデック) Metadata Metadata Metadata H.264 Theora VP8 AAC Vorbis Vorbis MPEG-4 Ogg WebM .mp4 .m4v .ogv .webm
  71. 71. EPUB3技術解説セミナー2 Theora セオラ http://theora.org/
  72. 72. EPUB3技術解説セミナー2 Vorbis ボルビス http://www.vorbis.com/
  73. 73. EPUB3技術解説セミナー2 WebM ウェブエム http://www.webmproject.org/
  74. 74. EPUB3技術解説セミナー2 AAC Advanced Audio Coding http://www.audiocoding.com/
  75. 75. EPUB3技術解説セミナー2EPUB3ではどのフォーマットを 使用すればよい?
  76. 76. EPUB3技術解説セミナー2 iBookshttp://itunes.apple.com/jp/app/ibooks/id364709193?mt=8
  77. 77. EPUB3技術解説セミナー2 iBookshttp://itunes.apple.com/jp/app/ibooks/id364709193?mt=8 商用目的の場合
  78. 78. EPUB3技術解説セミナー2 ビデオコンテナ(メタデータ + ビデオコーデック + オーディオコーデック) Metadata Metadata Metadata H.264 Theora VP8 AAC Vorbis Vorbis MPEG-4 Ogg WebM .mp4 .m4v .ogv .webm
  79. 79. EPUB3技術解説セミナー2 Readium http://readium.org/
  80. 80. EPUB3技術解説セミナー2 ビデオコンテナ(メタデータ + ビデオコーデック + オーディオコーデック) Metadata Metadata Metadata H.264 Theora VP8 AAC Vorbis Vorbis MPEG-4 Ogg WebM .mp4 .m4v .ogv .webm
  81. 81. EPUB3技術解説セミナー2ビデオ埋め込みの電子書籍EPUB3 Enhanced eBook
  82. 82. EPUB3技術解説セミナー2公開されているEPUB3のサンプルを検証してみよう
  83. 83. EPUB3技術解説セミナー2 epub-sampleshttp://code.google.com/p/epub-samples/downloads/list
  84. 84. EPUB3技術解説セミナー2 cc-shared-culture-20120130.epubCreative Commons A Shared Culture with various permutations of video, audio (see TOC for details)
  85. 85. EPUB3技術解説セミナー2
  86. 86. EPUB3技術解説セミナー2Readium(Chrome)で確認
  87. 87. EPUB3技術解説セミナー2
  88. 88. EPUB3技術解説セミナー2
  89. 89. EPUB3技術解説セミナー2 shared-culture.mp4
  90. 90. EPUB3技術解説セミナー2MPEG-4 9.0+ - - 3.0+ - Ogg - 3.5+ 5.0+ - 10.50+WebM 9.0+ 4.0+ 6.0+ - 10.60+ VP8コーデック必要
  91. 91. EPUB3技術解説セミナー2Firefoxで確認
  92. 92. EPUB3技術解説セミナー2
  93. 93. EPUB3技術解説セミナー2 shared-culture.webm
  94. 94. EPUB3技術解説セミナー2MPEG-4 9.0+ - - 3.0+ - Ogg - 3.5+ 5.0+ - 10.50+WebM 9.0+ 4.0+ 6.0+ - 10.60+ VP8コーデック必要
  95. 95. EPUB3技術解説セミナー2Operaで確認
  96. 96. EPUB3技術解説セミナー2
  97. 97. EPUB3技術解説セミナー2 shared-culture.webm
  98. 98. EPUB3技術解説セミナー2MPEG-4 9.0+ - - 3.0+ - Ogg - 3.5+ 5.0+ - 10.50+WebM 9.0+ 4.0+ 6.0+ - 10.60+ VP8コーデック必要
  99. 99. EPUB3技術解説セミナー2iPadのiBooks (iOS5)で確認
  100. 100. EPUB3技術解説セミナー2 iPad
  101. 101. EPUB3技術解説セミナー2 iPad
  102. 102. EPUB3技術解説セミナー2 iPad
  103. 103. EPUB3技術解説セミナー2サンプルファイルを検証
  104. 104. EPUB3技術解説セミナー2
  105. 105. EPUB3技術解説セミナー2
  106. 106. EPUB3技術解説セミナー2
  107. 107. EPUB3技術解説セミナー2
  108. 108. EPUB3技術解説セミナー2
  109. 109. EPUB3技術解説セミナー2MPEG-4とWebMの2種類のビデオを用意している
  110. 110. EPUB3技術解説セミナー2
  111. 111. EPUB3技術解説セミナー2
  112. 112. EPUB3技術解説セミナー2
  113. 113. EPUB3技術解説セミナー2<video id="video1" controls="controls"> <source src="../video/shared-culture.mp4" type="video/mp4"/> <source src="../video/shared-culture.webm" type="video/webm"/> <div class="errmsg">  <p>Your Reading System does not support (this) video.</p>  <pre><code>   &lt;video id="video1" controls="controls"&gt;    &lt;source src="../video/shared-culture.mp4" type="video/mp4"/&gt;    &lt;source src="../video/shared-culture.webm" type="video/webm"/&gt;   &lt;/video&gt;  </code></pre> </div></video>
  114. 114. EPUB3技術解説セミナー2<video id="video1" controls="controls"><source src="video.mp4" type="video/mp4"/><source src="video.webm" type="video/webm"/></video>
  115. 115. EPUB3技術解説セミナー2iBooksとDL Reader Kinoppyで比較
  116. 116. EPUB3技術解説セミナー2 iPad ビデオが再生される
  117. 117. EPUB3技術解説セミナー2 DL Reader 代替情報が表示される
  118. 118. EPUB3技術解説セミナー2 Kinoppy 何も表示されない
  119. 119. EPUB3技術解説セミナー2iPad DL Reader
  120. 120. EPUB3技術解説セミナー2<video id="video1" controls="controls"> <source src="../video/shared-culture.mp4" type="video/mp4"/> <source src="../video/shared-culture.webm" type="video/webm"/> <div class="errmsg">  <p>Your Reading System does not support (this) video.</p>  <pre><code>   &lt;video id="video1" controls="controls"&gt;    &lt;source src="../video/shared-culture.mp4" type="video/mp4"/&gt;    &lt;source src="../video/shared-culture.webm" type="video/webm"/&gt;   &lt;/video&gt;  </code></pre> </div></video>
  121. 121. EPUB3技術解説セミナー2<video id="video1" controls="controls"> <source src="../video/shared-culture.mp4" type="video/mp4"/> <source src="../video/shared-culture.webm" type="video/webm"/> <div class="errmsg">  <p>Your Reading System does not support (this) video.</p>  <pre><code>   &lt;video id="video1" controls="controls"&gt;    &lt;source src="../video/shared-culture.mp4" type="video/mp4"/&gt;    &lt;source src="../video/shared-culture.webm" type="video/webm"/&gt;   &lt;/video&gt;  </code></pre> </div> 代替情報</video>
  122. 122. EPUB3技術解説セミナー2iPad DL Reader 代替情報
  123. 123. EPUB3技術解説セミナー2その他のリーディングシステムは?
  124. 124. EPUB3技術解説セミナー2Adobe Digital Editions 1.8
  125. 125. EPUB3技術解説セミナー2Androidの環境では?
  126. 126. EPUB3技術解説セミナー2 OverDrive 表示されない
  127. 127. EPUB3技術解説セミナー2 Kinoppy 表示されない
  128. 128. EPUB3技術解説セミナー2 ASTRI-Bee ビデオは表示されるが 再生しない
  129. 129. EPUB3技術解説セミナー2 DL Reader 代替情報が表示される
  130. 130. EPUB3技術解説セミナー2 Moon+ Reader Pro 代替情報が表示される
  131. 131. EPUB3技術解説セミナー2 FBReader 代替情報が表示される
  132. 132. EPUB3技術解説セミナー2 Aldiko 代替情報が表示される
  133. 133. EPUB3技術解説セミナー2 Himawari Reader Pro
  134. 134. EPUB3技術解説セミナー2 Himawari Reader Pro 外部の動画プレーヤーが起動して再生される著作権保護機能でスクリーンショットは撮れないが、問題なく再生されている
  135. 135. EPUB3技術解説セミナー2 Android環境では今のところビデオ埋め込み電子書籍は難しい EPUB3
  136. 136. EPUB3技術解説セミナー2 ビデオ埋め込み電子書籍の対象リーディングシステムは?
  137. 137. EPUB3技術解説セミナー2 iBookshttp://itunes.apple.com/jp/app/ibooks/id364709193?mt=8
  138. 138. EPUB3技術解説セミナー2 Readium http://readium.org/
  139. 139. EPUB3技術解説セミナー2 ビデオ埋め込みの電子書籍 EPUB3 Enhanced eBookパッケージドキュメントに追加する
  140. 140. EPUB3技術解説セミナー2
  141. 141. EPUB3技術解説セミナー2
  142. 142. EPUB3技術解説セミナー2 package.opf
  143. 143. EPUB3技術解説セミナー2 package.opf<manifest> <item id="video1" href="video.mp4" media-type="video/mp4"/> <item id="video2" href="video.webm" media-type="video/webm"/></manifest>
  144. 144. EPUB3技術解説セミナー2ビデオの変換方法
  145. 145. EPUB3技術解説セミナー2Miro Video Converterhttp://www.mirovideoconverter.com/
  146. 146. EPUB3技術解説セミナー2Miro Video Converterhttp://www.mirovideoconverter.com/
  147. 147. EPUB3技術解説セミナー2Miro Video Converterhttp://www.mirovideoconverter.com/
  148. 148. EPUB3技術解説セミナー2補足:ビデオに字幕を表示する track 要素
  149. 149. EPUB3技術解説セミナー2LeanBack Player ¦ HTML5 <track> element for subtitles example http://leanbackplayer.com/example_subtitles.html
  150. 150. EPUB3技術解説セミナー2LeanBack Player ¦ HTML5 <track> element for subtitles example http://leanbackplayer.com/example_subtitles.html
  151. 151. EPUB3技術解説セミナー2LeanBack Player ¦ HTML5 <track> element for subtitles example http://leanbackplayer.com/example_subtitles.html 再生中に字幕を切り替えられる 日本語 中国語
  152. 152. EPUB3技術解説セミナー2EPUB3のファイルで確認
  153. 153. EPUB3技術解説セミナー2
  154. 154. EPUB3技術解説セミナー2
  155. 155. EPUB3技術解説セミナー2 VTTファイル英語 フランス語
  156. 156. EPUB3技術解説セミナー2
  157. 157. EPUB3技術解説セミナー2
  158. 158. EPUB3技術解説セミナー2VTTファイルの指定
  159. 159. EPUB3技術解説セミナー2 Readium まだ対応していない
  160. 160. EPUB3技術解説セミナー2Chromeには先行実装されているchrome://flags/
  161. 161. EPUB3技術解説セミナー2Chromeには先行実装されている <track>要素を有効にする
  162. 162. EPUB3技術解説セミナー2 HTML5のTRACK要素の基礎http://www.html5rocks.com/ja/tutorials/track/basics/
  163. 163. EPUB3技術解説セミナー2 HTML5のTRACK要素の基礎http://www.html5rocks.com/ja/tutorials/track/basics/
  164. 164. EPUB3技術解説セミナー2 HTML5のTRACK要素の基礎 http://www.html5rocks.com/ja/tutorials/track/basics/字幕が表示されている
  165. 165. EPUB3技術解説セミナー2字幕付きビデオを組み込んだ電子書籍 ・教育分野(語学など) ・インタビュー、対談 ・多国語の絵本 ・音声がなくても情報が伝わる ・ビデオ(映像)も検索対象にできる
  166. 166. EPUB3技術解説セミナー2質疑応答の時間
  167. 167. EPUB3技術解説セミナー2iBookstoreからビデオ付き電子書籍を ダウンロードしてみよう
  168. 168. EPUB3技術解説セミナー2 iBooks
  169. 169. EPUB3技術解説セミナー2 iBooks
  170. 170. EPUB3技術解説セミナー2
  171. 171. EPUB3技術解説セミナー2 iBooks
  172. 172. EPUB3技術解説セミナー2 iBooks
  173. 173. EPUB3技術解説セミナー2
  174. 174. EPUB3技術解説セミナー2 これってEPUB? PDF?
  175. 175. EPUB3技術解説セミナー2 EPUBです。 絶対配置の固定レイアウト で作られています。
  176. 176. EPUB3技術解説セミナー2固定レイアウトFixed-Layout
  177. 177. EPUB3技術解説セミナー2 Fixed-Layoutテキストや図版を 画像化した 絶対配置 紙面を配置
  178. 178. EPUB3技術解説セミナー2 テキストや図版を絶対配置・座標値を指定してテキストや図版を配置する方法・文字サイズは固定されているものが多い リーディングシステム側で文字サイズの変更ができない・電子書籍のデータサイズは、 リフロー形式の電子書籍とあまり変わらない・テキストの選択や本文検索などは実行できる
  179. 179. EPUB3技術解説セミナー2 iPad at Work Volume 2 Apple iBookstore
  180. 180. EPUB3技術解説セミナー2 画像化した紙面を配置・DTPデータからイメージ変換する方法・もしくは、印刷物を取り込み、補正する方法・コミックや写真集、絵本などは、JPEG、PNGなどの ラスターグラフィックスが多い・雑誌や凝ったレイアウトの実用書などは、PDFが多い・リフロー形式やテキストや図版を絶対配置する方式と 比較した場合、データサイズが大きくなってしまう
  181. 181. EPUB3技術解説セミナー2There Was an Old Monkey Who Swallowed a FrogAmazon Kindle Store 固定レイアウト(Kindle Format 8)
  182. 182. EPUB3技術解説セミナー2 画像化した紙面を配置・DTPデータからイメージ変換する方法・もしくは、印刷物を取り込み、補正する方法・コミックや写真集、絵本などは、JPEG、PNGなどの ラスターグラフィックスが多い・雑誌や凝ったレイアウトの実用書などは、PDFが多い・リフロー形式やテキストや図版を絶対配置する方式と 比較した場合、データサイズが大きくなってしまう
  183. 183. EPUB3技術解説セミナー2 Countrys Best Cabins Amazon Kindle Store プリントレプリカ
  184. 184. EPUB3技術解説セミナー2固定レイアウトの検証環境
  185. 185. EPUB3技術解説セミナー2 Readium http://readium.org/
  186. 186. EPUB3技術解説セミナー2about:flags
  187. 187. EPUB3技術解説セミナー2 CSS領域を有効にする 「有効にする」をクリック
  188. 188. EPUB3技術解説セミナー2 Readium
  189. 189. EPUB3技術解説セミナー2 Readium
  190. 190. EPUB3技術解説セミナー2 Readium
  191. 191. EPUB3技術解説セミナー2 Readium
  192. 192. EPUB3技術解説セミナー2 Himawari Reader Pro Androidhttps://play.google.com/store/apps/details?id=jp.green_fld.himawari.pro
  193. 193. EPUB3技術解説セミナー2 Himawari Reader Pro Androidhttps://play.google.com/store/apps/details?id=jp.green_fld.himawari.pro
  194. 194. EPUB3技術解説セミナー2Readium mobile Chorme for Android 4.0 http://github.readium.org/
  195. 195. EPUB3技術解説セミナー2公開されているEPUB3固定レイアウトのサンプル epub-samples http://code.google.com/p/epub-samples/ ダウンロードリスト http://code.google.com/p/epub-samples/downloads/list
  196. 196. EPUB3技術解説セミナー2 EPUB 3 Fixed-Layout Documents・IDPFの情報文書(Informational Document)・IDPF EPUB working group が作成・2012年3月13日、IDPF 理事会によって承認
  197. 197. EPUB3技術解説セミナー2EPUB 3 Fixed-Layout Documents 対応付け 機能 領域
  198. 198. EPUB3技術解説セミナー2EPUB 3 Fixed-Layout Documentsプロパティ Prefixマッピング・rendition:layout・rendition:orientation コンテント・rendition:spread ディメンションズ・page-spread-*
  199. 199. EPUB3技術解説セミナー2 Prefixマッピング Prefix Mapping prefix属性で URI http://www.idpf.org/vocab/rendition/# にマッピング<package …prefix="rendition: http://www.idpf.org/vocab/rendition/#"></package>
  200. 200. EPUB3技術解説セミナー2 コンテント・ディメンションズ Content dimensions meta要素のviewportで指定<head><meta name="viewport" content="width=1200, height=600" /></head><head><meta name="viewport" content="width=512, height=600" /></head>
  201. 201. EPUB3技術解説セミナー2プロパティの定義Property Definitions・リフロー/ページ区切りの指定・スクリーンの方向(縦・横)・見開きの指定・見開きの配置指定(左・右・中央)
  202. 202. EPUB3技術解説セミナー2プロパティの定義Property Definitions・rendition:layout プロパティ・rendition:orientation プロパティ・rendition:spread プロパティ・page-spread-* プロパティ
  203. 203. EPUB3技術解説セミナー2コンテント・ディメンションズContent dimensionsmeta要素のviewportで指定PrefixマッピングPrefix Mappingprefix属性で URIhttp://www.idpf.org/vocab/rendition/# にマッピングプロパティの定義Property Definitions
  204. 204. EPUB3技術解説セミナー2page-blanche-20120314.epub
  205. 205. EPUB3技術解説セミナー2page-blanche-20120314.epub 解凍
  206. 206. EPUB3技術解説セミナー2page-blanche-20120314.epub
  207. 207. EPUB3技術解説セミナー2page-blanche-20120314.epub
  208. 208. EPUB3技術解説セミナー2page-blanche-20120314.epub
  209. 209. EPUB3技術解説セミナー2page-blanche-20120314.epub
  210. 210. EPUB3技術解説セミナー2 page-blanche-20120314.epubパッケージドキュメント(.opf)
  211. 211. EPUB3技術解説セミナー2page-blanche-20120314.epub
  212. 212. EPUB3技術解説セミナー2 page-blanche-20120314.epubEPUB 3 Fixed-Layout Documentsプロパティ Prefixマッピング・rendition:layout・rendition:orientation コンテント・rendition:spread ディメンションズ・page-spread-*
  213. 213. EPUB3技術解説セミナー2 page-blanche-20120314.epubコンテンツキュメント(.xhtml)
  214. 214. EPUB3技術解説セミナー2page-blanche-20120314.epub 6ページ目のXHTMLファイル
  215. 215. EPUB3技術解説セミナー2 page-blanche-20120314.epubEPUB 3 Fixed-Layout Documentsプロパティ Prefixマッピング・rendition:layout・rendition:orientation コンテント・rendition:spread ディメンションズ・page-spread-*
  216. 216. EPUB3技術解説セミナー2 page-blanche-20120314.epubパッケージドキュメント(.opf)
  217. 217. EPUB3技術解説セミナー2page-blanche-20120314.epub
  218. 218. EPUB3技術解説セミナー2 rendition:layout プロパティ・reflowable(リフロー)・pre-paginated(ページ区切り)
  219. 219. EPUB3技術解説セミナー2page-blanche-20120314.epub
  220. 220. EPUB3技術解説セミナー2rendition:orientation プロパティ・landscape(横方向)・portrait(縦方向)・auto(制限なし)
  221. 221. EPUB3技術解説セミナー2page-blanche-20120314.epub
  222. 222. EPUB3技術解説セミナー2rendition:spread プロパティ・none・landscape(横方向のみ)・portrait(縦方向のみ)・both(横方向・縦方向)・auto(制限なし)
  223. 223. EPUB3技術解説セミナー2
  224. 224. EPUB3技術解説セミナー2
  225. 225. EPUB3技術解説セミナー2 Double Pages
  226. 226. EPUB3技術解説セミナー2
  227. 227. EPUB3技術解説セミナー2例:ランドスケープモード(横向き)にすると見開きで表示されるランドスケープモード(横向き)では、見開きではなく、シングルページの拡大表示で読みたい、という読者もいる
  228. 228. EPUB3技術解説セミナー2読者が、シングルページ、ダブルページ(見開き)を自由に選択できたほうがよい場合もある
  229. 229. EPUB3技術解説セミナー2 page-spread-* プロパティ・page-spread-left プロパティ(左側に配置)・page-spread-right プロパティ(右側に配置)・rendition:page-spread-center(中央に配置)
  230. 230. EPUB3技術解説セミナー2 page-spread-* プロパティ<itemref id="titlepage"properties="page-spread-rightrendition:layout-pre-paginated"/> タイトルページは右側に配置する
  231. 231. EPUB3技術解説セミナー2 page-spread-* プロパティ<itemref id="titlepage"properties="page-spread-rightrendition:layout-pre-paginated"/>spine itemref要素でこのように指定してもよい
  232. 232. EPUB3技術解説セミナー2 補足<meta property="rendition:layout">pre-paginated</meta><itemref id="titlepage"properties="page-spread-rightrendition:layout-pre-paginated"/>
  233. 233. EPUB3技術解説セミナー2EPUB 3 Fixed-Layout Documents Appendix A. Examples http://idpf.org/epub/fxl/#examples
  234. 234. EPUB3技術解説セミナー2 Example 1・固定レイアウト・横向きでは合成された見開き・縦向きでは見開きにしない
  235. 235. EPUB3技術解説セミナー2 Example 1
  236. 236. EPUB3技術解説セミナー2 Example 2・固定レイアウト・合成された見開きにしない・横向きで固定
  237. 237. EPUB3技術解説セミナー2 Example 2
  238. 238. EPUB3技術解説セミナー2 Example 3・リフローのコンテンツ・タイトルページだけ固定レイアウト・合成された見開きを表示するときは 右側に配置
  239. 239. EPUB3技術解説セミナー2 Example 3
  240. 240. EPUB3技術解説セミナー2 Example 5・リフローのコンテンツ・固定レイアウトの 右配置ページと左配置ページを 合成された見開きページとして表示・リフローのページも見開き表示のまま
  241. 241. EPUB3技術解説セミナー2 Example 5
  242. 242. EPUB3技術解説セミナー2 Example 7・固定レイアウト・横向きでは合成された見開き・縦向きでは見開きにしない・進行方向は右から左(日本のマンガ)
  243. 243. EPUB3技術解説セミナー2 Example 7
  244. 244. EPUB3技術解説セミナー2
  245. 245. EPUB3技術解説セミナー2
  246. 246. EPUB3技術解説セミナー2本日のテーマ: ビデオ オーディオ ・ 固定レイアウト
  247. 247. EPUB3の最新情報はIDPFのサイトで確認してください http://idpf.org/
  248. 248. Thank you for your attention. ご清聴ありがとうございました
  249. 249. EPUB3技術解説セミナー2 ビデオ・オーディオ/固定レイアウト 2012年6月28日(木)15:00-16:40 境祐司 @commonstyle ¦ 電子書籍メディア論
  250. 250. community 電子書籍メデ ア論 ィ http://www.facebook.com/eBookStrategy デザインの未来http://www.facebook.com/TheFutureDesign

×