Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome or Safari browser. Firefox 10 (to be released soon) will also handle it.

Flexible & Responsive eBooks

第26回HTML5とか勉強会

Webと電子書籍について学ぼう！

こもりまさあき

1972年生まれのフリーランス。大学時代にDTP系デザイン会社でアルバイトをはじめ、そのまま正社員となる。入出力・デザイン業務、ネットワーク関連業務に並行して従事し、2001年退職。案件ごとに業務内容や立ち位置が異なるため、職域的な肩書きはなし。

近著に「EPUB 3 スタンダード・デザインガイド（マイナビ刊・共著）」「iPhone & Android スマートフォンサイト制作の教科書（共著・MdN刊）」など

今日お話しすること

  • 電子書籍の現状をおさらい
  • 中間フォーマットとしてのHTML5
  • 多様なデバイスへの対応を考える

電子書籍の現状をおさらい

いまの電子書籍の現状

配信形態がバラバラ、買えるところも限られる

  • ショップ毎にアプリが必要？
  • え？違うデバイスでは読めないの？
  • そんな問題がてんこもり

配信側の立場からすれば

既存の資産は有効活用、コストも抑えたい

  • 誌面と同じ体裁で配信したい
  • DTPの元データから変換できればいい

でも読む側の立場としては

必ずしもPCに向かっているわけではない

  • デバイスに関係なく読めた方がいい
  • テキストだけ読みたいこともある

押し寄せてくる時代の波

コンテンツへアクセスする手段の増加

  • スマートフォン、タブレットの登場
  • それにともなう専用アプリ
  • Kindleなどのリーディングデバイス

配信形式がひとつでいいの？

特定のフォーマットやデバイスに依存

  • デバイスの流通量に左右されてしまう
  • 利用者側の利便性は高いとはいえない

PDF, EPUB, MOBI

グローバルスタンダードはこの3つ

  • レイアウトされた誌面をキープするPDF
  • テキストが中心のコンテンツにはEPUB
  • Kindle（AZW）のベースであるMOBI

Fixed? or Reflow?

コンテンツはどっちに向いているか

  • デザインやレイアウト込みのコンテンツ
  • 文字情報が中心の読み物コンテンツ

中間フォーマットとしてのHTML5

EPUB 3.0 & HTML5

EPUBの新バージョンの登場で変わること

  • 日本語組版の要件を一部サポート
  • 構造化はHTML5が推奨フォーマット
  • 一部CSS3のプロパティもサポート
EPUB 3: http://idpf.org/epub/30

Amazon Kindle 8

Amazonから新たなフォーマットの登場

  • HTML5によるマークアップは可能
  • 基本的にKindle Fire用のフォーマット
  • Eインクやアプリでは未サポート
Amazon Kindle Guideline（PDF）: http://bit.ly/xjg1YJ

配信形態の多様化にも柔軟に

固執ではなく、フレキシブルに対応する

  • Webコンテンツとして配信
  • リフロー型のコンテンツとして配信
  • 専用アプリを制作して配信
EPUB 3 Structural Semantics Vocabulary: http://idpf.org/epub/vocab/structure/

ワンソースをマルチに展開する

HTML5を中間フォーマットとして有効に活用

  • Webコンテンツにはそのまま流用
  • EPUBやKindle向けには一部修正
  • Bakerなど、フレームワークでアプリに
Baker Framework: http://bakerframework.com/

変換はいろいろなツールがある

フォーマット変換なら既にツールが公開されている

  • Calibre
  • KindleGen 2
  • Hamster Free eBook Converter
KindleGen 2: http://www.amazon.com/gp/feature.html?docId=1000234621

多様なデバイスへの対応を考える

デバイスに依存することを前提

デザインの再現性はリーダーに依存する

  • CSSの再現はリーダーによってまちまち
  • 書体サイズはリーダー側で変更できる*1
  • 書体の埋込も可能だが、日本語は…
*1: リフロー型は何もかもが可変することを前提に考えた方が良い

デザインやレイアウトの確認

リーダーはWebkitを採用する傾向にある

  • Webkit、または最新のChrome
  • Adobe Digital Edition（Preview版）
  • DL Reader、Espur、Murasaki
Espur: http://espur.jp

紙のルールとは分けて考える

「紙と同じにして」という要望を聞くか聞かないか

  • 紙でできることができるわけではない
  • 日本語要件を満たすもリーダー依存
  • 「どれで見ても同じ」はコスト高に

多様なデバイスに対応するには

ヒントは「レスポンシブ・ウェブデザイン」にあり!?

  • 多くのデバイスで読めることが大事
  • 解像度やリーダーの実装差異を考慮
  • モバイルファーストとは言わないまでも
    最大公約数をとって実装するのがベター

本日の話のまとめ

Flexible & Responsive

  • 固定なのか、リフロー型なのかを考える
  • 多様な配信フォーマットに柔軟に対応
  • 中間フォーマットとしてHTML5を利用
  • リーダー依存を前提にデザインする、
    どこかで妥協点を見つける
  • レスポンシブ・ウェブデザインを参考に