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.
縦スクロールEPUBの現状
小形克宏(電脳マヴォ合同会社)
@ogwata
2017年9月24日
HTML5 conference
1
自己紹介
• 零細マンガ・エージェント会社の役員
• マンガ編集者/営業/法務/雑用係
• 作家のエージェントとしてマンガをプロバイダー各
社に販売
2
電子書籍の
売上の8割はマンガ
出典:株式会社インプレス ニュースリリース 2017.07.27
3
電子書籍になって
マンガは読みやすくなった?
• 固定型EPUBとは、過去の資産を画像化して手軽に
作り、ネットで儲けるのに都合よいフォーマット
• 過去の資産を食い潰しているだけで、新たな変化に
対応したものではない
• 電子書籍になってマン...
固定型EPUB(マンガ)の欠点
• スマホでは文字が小さくなってしまう
• スマホでは見開きが表示しづらい
• →作家の意図した読み方ができない
• 画像なのでアクセシビリティ皆無
5
そこで縦スクロールマンガ
• スクリーン表示を目的に、韓国のWEBTOONによ
って生み出された方式
• スマホで表示しても文字は大きく読みやすい
• 自然な読み心地、スマホに最適化したマンガ表現
• これをEPUB化したのが縦スクロールEPU...
縦スクロールEPUBの作り方①
1. 縦スクロールマンガの画像ファイルを用意し、同
じ幅の複数のファイルに切り分け、1から順番にフ
ァイル名をつけておく
2. CSSスタイルシートに以下のように指定
7
div.resizeimage img ...
縦スクロールEPUBの作り方②
3. OPFドキュメントで名前空間を以下のように指定
prefix="rendition:
http://www.idpf.org/vocab/rendition/#"
4. OPFドキュメントで、metadat...
縦スクロールEPUBの実装
• 対応している電子書店はない
• 対応しているリーダーも少ない
• 電子書店に実装を促すのはそう簡単なことではない
• 一方で、対応するリーダーに呼びかけを実装を増やして
いけば、やがて電子書店も対応するのでは
•...
リーダーの実装状況①
10
リーダーの実装状況②
11
リーダーの実装状況③
12
リーダーの実装状況④
13
サンプルの公開
• サンプルEPUB
• 『鳥の眼』(©ムライ、電脳マヴォ合同会社)
http://www.mavo.co.jp/epub/20170906_torinome.epub
• ソースコード
• epub3-samples/30/v...
開発ドキュメント
• 村田真氏(JEPA CTO)が縦スクロールEPUBに関
するドキュメントを執筆、公開
• Creating Vertically Scrollable EPUB Manga
• How to Support Vertica...
情報を集約した小社ブログ記事
• 縦スクロールEPUBサンプル『鳥の眼』の公開
• http://www.mavo.co.jp/20170923/
16
開発者のみなさん、
縦スクロールを実装して
!
17
Upcoming SlideShare
Loading in …5
×

縦スクロールEPUBの現状

1,497 views

Published on

縦スクロールEPUBこそはスマートフォンに対応した新しい時代のマンガ表現です。しかしアマゾンを始めとした電子書店では買えません。対応するリーダーも一部に留まります。その実装を促すために情報を整理してみました。

Published in: Software
  • Be the first to comment

縦スクロールEPUBの現状

  1. 1. 縦スクロールEPUBの現状 小形克宏(電脳マヴォ合同会社) @ogwata 2017年9月24日 HTML5 conference 1
  2. 2. 自己紹介 • 零細マンガ・エージェント会社の役員 • マンガ編集者/営業/法務/雑用係 • 作家のエージェントとしてマンガをプロバイダー各 社に販売 2
  3. 3. 電子書籍の 売上の8割はマンガ 出典:株式会社インプレス ニュースリリース 2017.07.27 3
  4. 4. 電子書籍になって マンガは読みやすくなった? • 固定型EPUBとは、過去の資産を画像化して手軽に 作り、ネットで儲けるのに都合よいフォーマット • 過去の資産を食い潰しているだけで、新たな変化に 対応したものではない • 電子書籍になってマンガ表現は何か変わったの? • 若いマンガ読者は今の電子マンガを読んで幸せ? 4
  5. 5. 固定型EPUB(マンガ)の欠点 • スマホでは文字が小さくなってしまう • スマホでは見開きが表示しづらい • →作家の意図した読み方ができない • 画像なのでアクセシビリティ皆無 5
  6. 6. そこで縦スクロールマンガ • スクリーン表示を目的に、韓国のWEBTOONによ って生み出された方式 • スマホで表示しても文字は大きく読みやすい • 自然な読み心地、スマホに最適化したマンガ表現 • これをEPUB化したのが縦スクロールEPUB • 実演(Murasaki) 6
  7. 7. 縦スクロールEPUBの作り方① 1. 縦スクロールマンガの画像ファイルを用意し、同 じ幅の複数のファイルに切り分け、1から順番にフ ァイル名をつけておく 2. CSSスタイルシートに以下のように指定 7 div.resizeimage img { height: 100%; } img {display: block;}
  8. 8. 縦スクロールEPUBの作り方② 3. OPFドキュメントで名前空間を以下のように指定 prefix="rendition: http://www.idpf.org/vocab/rendition/#" 4. OPFドキュメントで、metadata要素を以下のよう に指定 <meta property="rendition:layout">reflowable</meta> <meta property="rendition:flow">scrolled-doc</meta> 8
  9. 9. 縦スクロールEPUBの実装 • 対応している電子書店はない • 対応しているリーダーも少ない • 電子書店に実装を促すのはそう簡単なことではない • 一方で、対応するリーダーに呼びかけを実装を増やして いけば、やがて電子書店も対応するのでは • 村田真氏(IDEF)と共に開発用ドキュメントやサンプル データ(CC BY SA 3.0)、調査結果を公開 9
  10. 10. リーダーの実装状況① 10
  11. 11. リーダーの実装状況② 11
  12. 12. リーダーの実装状況③ 12
  13. 13. リーダーの実装状況④ 13
  14. 14. サンプルの公開 • サンプルEPUB • 『鳥の眼』(©ムライ、電脳マヴォ合同会社) http://www.mavo.co.jp/epub/20170906_torinome.epub • ソースコード • epub3-samples/30/vertically-scrollable-manga/ https://github.com/IDPF/epub3- samples/tree/master/30/vertically-scrollable-manga 14
  15. 15. 開発ドキュメント • 村田真氏(JEPA CTO)が縦スクロールEPUBに関 するドキュメントを執筆、公開 • Creating Vertically Scrollable EPUB Manga • How to Support Vertically-Scrollable EPUB Manga 15
  16. 16. 情報を集約した小社ブログ記事 • 縦スクロールEPUBサンプル『鳥の眼』の公開 • http://www.mavo.co.jp/20170923/ 16
  17. 17. 開発者のみなさん、 縦スクロールを実装して ! 17

×