リッチなレイアウトの出版物を HTML5 と CSS3、そして MathML を使用して EPUB 3 で作成する

高度なレイアウトとタイポグラフィーに対応した次世代のオープンな電子書籍の標準を探る

業界標準の XML 電子書籍フォーマットの最新改訂版である EPUB 3.0 は、HTML5 と CSS3 に対応することで、最新の Web 技術を採り入れています。EPUB 3.0 の焦点は引き続き XML 駆動型ツールキットに置かれ、XHTML シリアライズを必要とする他、MathML や SVG などの補足的な XML 語彙を追加しています。EPUB 3 は、デジタル技術の特徴を生かした高度な出版物を作成するための多彩なオプションを提供します。この記事で、EPUB 3 の新機能を使ってリッチなレイアウトのページを作成する方法を学んでください。

2012年 7月 05日: 著者からの依頼に基づき、リスト 4 の 1 行目 (<![CDATA[) を完全に削除しました。

Liza Daly, Vice-President of Engineering, Safari Books Online

Photo of Liza DalyLiza Daly は、Safari Books Online で Vice-President of Engineering を務める、Web アプリケーションとデジタル出版の分野で経験豊富なソフトウェア・エンジニアです。出版関連のソフトウェア会社、Threepress Consulting の創始者であり、2010年に初の HTML5 モバイル電子書籍リーダーである Ibis Reader をリリースしました。彼女は、EPUB 電子書籍仕様を後援および開発している組織、IDPF (International Digital Publishing Forum) の理事会のメンバーです。



2012年 8月 02日 (初版 2012年 4月 19日)

はじめに

EPUB は、IDPF (International Digital Publishing Forum) によって標準化された、リフロー (再流し込み) が可能な電子書籍および電子出版物のための XML フォーマットです。2009年を迎える頃には EPUB 2 が主要な電子書籍小売業者や読み取りシステムの大半で使用される、電子書籍フォーマットのデファクト・スタンダードとなりました。

EPUB ZIPアーカイブは、明確に定義された構造でパッケージ化されています。以下のように、個々のコンポーネントがそれぞれ固有の仕様を持ち、EPUB という共通のラベルの下に統合されています。

コンテナー仕様
EPUB 文書をパッケージ化する方法を定義します。
EPUB 出版物
電子書籍のコンテンツに関するすべてのメタデータが含まれます。メタデータには、パッケージのマニフェスト、基本タイトル、著者のメタデータなどがあります。さらに EPUB 3 では、JavaScript や MathML など、出版物でサポートが期待される高度な機能の定義が追加されています。EPUB 出版物は、OPF (Open Container Format) ファイルと呼ばれます。
EPUB コンテンツ文書
出版物のコンテンツを構成する実際の XHTML ファイルおよび CSS ファイル。コンテンツ文書には、画像やマルチメディアなどのバイナリー・リソースや、場合によっては外部で定義された XML 文書も含まれます。

頻繁に使用される略語

  • CSS: Cascading StyleSheet
  • DTD: Document Type Definition
  • HTML: HyperText Markup Language
  • JAR: Java ARchive
  • OPF: Open Packaging Format
  • SVG: Scalable Vector Graphics
  • XHTML: Extensible Hypertext Markup Language
  • XML: Extensible Markup Language
  • XSLT: Extensible Stylesheet Language Transformations

この記事では、EPUB 3 のいくつかの機能を詳しく探ります。EPUB 3 文書の妥当性検査の方法、ナビゲーションと階層、そして開発のガイドラインについて学んでください。サンプル・アプリケーションでは、子供向け書籍のページを EPUB 3 対応にするプロセスについて順を追って説明します。さらに、出版物に MathML を組み込む方法も説明します。

この記事で使用するサンプル・コードは、ここからダウンロードすることができます。

前提条件

この記事で取り上げる例とサンプル・コードでは、読者が EPUB 2 仕様と XML ベースの出版物についての全般的な基礎知識を持っていることを前提とします。EPUB 2 の詳細については、「参考文献」を参照してください。


EPUB 3 での変更内容

EPUB 2 には、テキストの占める割合が高い出版物には十分過ぎるほどの、HTML4 および CSS2 のフォーマット設定機能とレイアウト設定機能のすべてが揃っています。その一方、出版社や著者は、EPUB 2 では扱えないコンテンツ・タイプや使用ケースが数多くあることに気づいています。例えば、マルチメディア・ブックや、複雑なレイアウトの書籍、そして数学関連の出版物や、インタラクティブな文書などは、EPUB 2 では処理できません。このことから、IDPF および電子書籍コミュニティーは 2011年 10月に、EPUB 3 仕様をリリースしました。

EPUB 3 読み取りシステム

2011年 12月の時点では、EPUB 3 を公式にサポートする読み取りシステムはまだありません。けれども、WebKit などの HTML5 対応ブラウザー・エンジンを使用して作成された多くの読み取りシステムは、EPUB 3 Content Documents 仕様の大部分をサポートします。EPUB 3 文書のテストおよび開発には、最新の HTML レンダリング・エンジンをベースとする新しいブラウザーを使用することをお勧めします。

この記事では、他への悪影響を及ぼすことのない polyfill (機能の格差を埋める手段) を作成することで、完全な EPUB 3 読み取りシステムを使用せずに EPUB 3 対応の出力を生成する手法を説明します。

EPUB 2 から EPUB 3 への改訂で行われた主な変更内容を以下にまとめます。

  • EPUB 3 コンテンツ文書に必要なスキーマは、XHTML 1.1 から HTML5 の XHTML シリアライズへと変更されています。この変更は、HTML5 のマルチメディア要素 (<video><audio>、および <canvas>) を組み込む上で不可欠な要件でした。
  • EPUB 3 コンテンツ文書で許容される CSS の範囲が、CSS2.1 のサブセットだけではなく、文書の作成に関連する CSS3 の成熟したモジュール一式にまで拡大されています。
  • MathML が 1 次コンテンツ・タイプとして XHTML5 および SVG に追加されました。
  • CSS ビューポートを使用する読み取りシステムには、組み込みフォントのサポートが必要になっています。許容されるフォント・フォーマットとして、Web Open Font Format が追加されました。
  • 日本語やその他のアジア言語での縦書きをはじめとする、欧文以外の書式と書体が明示的にサポートされるようになりました。
  • オプションで、カスタム・セキュリティー・モデルを使用した JavaScript による双方向性がサポートされます。
  • RDFa (Resource Description Framework–in–attributes) のサポートを含め、出版文書で使用できるメタデータの範囲が拡大されました。
  • EPUB 2 の NCX (Navigational Center eXtended) TOC (Table of Contents) 文書が非推奨となり、XHTML5 ベースの TOC に置き換えられています (後方互換性を維持するため、引き続き NCX を使用することはできます)。

EPUB 3 文書の妥当性検査

EPUB 3 では、ほとんどのコンテンツ・タイプで XML シリアライズが行われることから、自動妥当性検査を容易に適用することができます。EPUB 文書の妥当性および適合性をテストする標準的手段としては、EpubCheck ツールが使用されています。EpubCheck は Berkeley Software Distribution ライセンスの下でオープンソースとして使用できる Java ライブラリーです。EPUB 3 文書には開発者向けプレビュー・バージョンを使用できるので、この記事では一貫してこのバージョンを使用します。最新バージョンへのリンクについては、「参考文献」を参照してください。

すべての EPUB コンテンツ文書には、.xhtml 拡張子を使用することを強くお勧めします。この拡張子がないと、ブラウザーが HTML コンテンツを application/xhtml+xml として解釈しません。この記事で説明する機能の多く (CSS 名前空間など) は、XML 処理モードで動作させる必要があります。

一般に、EpubCheck を操作するには、コマンドラインから以下に示すようなコマンドを実行します。

$ java -jar epubcheck-3.0b3.jar sample.epub

Epubcheck Version 3.0b3

No errors or warnings detected.

java.lang.NoClassDefFoundError: com/thaiopensource/validate/SchemaReader というエラーが返ってきた場合には、EpubCheck ディストリビューションで提供された lib/ ディレクトリーが、EpubCheck JAR ファイルと同じディレクトリー内にあることを確認してください。

EpubCheck 3 では、EPUB パッケージの単一のサブコンポーネントを個々に妥当性検査することができます (リスト 1 を参照)。これは極めて便利な機能で、この記事の例で使用しているように、以下の目的のために利用することができます。

  • 問題を切り分ける。
  • EPUB を妥当検査するためだけに新しい ZIP にわざわざ再パッケージ化する手間をなくす。
  • ユニット・テスト・フレームワークに組み込んで、1 つのツール・チェーンで単一のファイル・タイプを出力する。
リスト 1. 単一のファイル・タイプに対して EpubCheck 3 を実行する
$ java -jar ~/src/epubcheck-3.0b3.jar sample-toc.xhtml -mode nav 
Epubcheck Version 3.0b3

WARNING: sample-toc.xhtml: File is validated as a single file of type nav and version 3! 
         Only a subset of the available tests is run!

No errors or warnings detected.

EPUB 3 文書のナビゲーションおよび階層

EPUB 2 の NCX TOC ファイルは、階層的なナビゲーションとページ・マッピングのための豊富なマークアップをサポートしていましたが、このファイルは元々、(出力を読むことのできないユーザーにもアクセシブルな電子書籍を作成するための仕様である) DAISY (Digital Accessible Information SYstem) の標準仕様「Specifications for the Digital Talking Book (デジタル録音図書のための仕様)」から派生して作られたものです。そこには、明確に指定された DAISY フォーマットに準拠することによって、充実したアクセシビリティーをサポートできる電子書籍リーダーの開発を容易にするという目的がありました。その点では NCX は力を発揮しましたが、NCX DTD はかなりの大きさとなり、EPUB 2 に関係のない機能も組み込まれています。EPUB には NCX のどの部分が必要であるかをめぐって混乱が生じたことから、一部の電子書籍小売業者と読み取りシステムのベンダーが分裂し、独自の拡張機能を作成するという望ましくない結果に至りました。

EPUB 3 では NCX が非推奨となり、代わりに END (EPUB Navigational Document) が導入されています。リスト 2 に END の一例を記載します。END は、カスタム DTD を使用する代わりに XHTML5 を使用することで、実装および妥当性検査の対象となる XML フォーマットの数を減らしています。カスタム EPUB 属性は、EPUB 名前空間 (http://www.idpf.org/2007/ops) を使用して指定されます。

リスト 2. 最小限の END
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:epub="http://www.idpf.org/2007/ops">
  <head>
    <title>Example</title>
  </head>
  <body>
    <section epub:type="frontmatter toc">
      <header>
        <h1>Contents</h1>
      </header>
      <nav epub:type="toc" id="toc">
        <ol>
          <li id="chapter_001">
            <a href="chapter_001.html">Chapter 1</a>
          </li>
        </ol>
      </nav>
    </section>
  </body>
</html>

HTML5 の <nav> 要素は必須です (epub:type の値 “toc” も同じく必須です)。

END の宣言

END を出版物に組み込むには、マニフェストで properties 値を “nav” に設定した item を宣言します (リスト 3 を参照)。

リスト 3. EPUB パッケージ文書 (OPF) に END を組み込む
  <manifest>

    <item id="toc" 
properties="nav"
    href="toc.html" 
    media-type="application/xhtml+xml"/>

    <item id="chapter_001" 
    href="chapter_001.html" 
    media-type="application/xhtml+xml"/>
    ...
  </manifest>

EPUB 3 では、END ファイルを組み込むことが必須となっています。後方互換性のために NCX ファイルを組み込むこともできますが、EPUB 3 プロセッサーは NCX を無視して END を優先するはずです。

END の表示

NCX とは異なり、END は書籍のコンテンツのフローの中に組み込むことができます。EPUB 2 では、(電子書籍リーダーの組み込み TOC サポートを利用するのではなく) カスタム TOC をユーザーに表示しようと思ったら、同じコンテンツのコピーを 2 つ (1 つは NCX の形式で、もう 1 つは HTML コンテンツ文書として) 作成しなければなりませんでした。END はこの重複を排除し、コンテンツのフローの中で TOC の一部あるいは全体を極めて柔軟に表示することができます。

END をコンテンツのフローに追加するために必要な作業は、OPF の spine に END を組み込むことだけです (リスト 4 を参照)。

リスト 4. END を書籍のフローに組み込む
  <spine>
    <itemref idref="toc" />
    <itemref idref="chapter_001" />
    ...
  </spine>

深い階層の文書 (技術文書など) では、純粋な TOC の機能にはセクションのすべてのレベルを含める一方、コンテンツのフローでは、第 1 レベルまたは第 2 レベルのセクションのみをユーザーに表示したいという場合もあります。その場合、ユーザーに表示しない要素については、HTML5 の hidden 属性を設定します (リスト 5 を参照)。

リスト 5. TOC の表示内容からサブセクションを削除する
...
<nav xmlns:epub="http://www.idpf.org/2007/ops" epub:type="toc" id="toc">
  <ol>
    <li id="chapter_001">
      <a href="chapter_001.html">Chapter 1</a>
      <ol hidden="hidden">
        <li>
          <a href="chapter_001.html#id1">Chapter 1 subsection</a>
          <ol>
            <li>
              <a href="chapter_001.html#id1.1">Chapter 1 subsection 1</a>
            ...

これと同じ目的のために、なぜ CSS の display: none プロパティーを使用できないのだろうと思う読者もいるかもしれませんが、それは、EPUB は多種多様な読み取りシステムで使用されるためです。視覚障害者用のスクリーン・リーダーや点字装置をはじめ、すべてのリーダーが CSS をサポートしなければならないわけではありません。最近の Web ブラウザーのほとんどでは hidden をネイティブにサポートしています。TOC に表示するセクション要素の display プロパティーを明示的に設定する CSS を組み込むのは賢明な考えです (リスト 6 を参照)。END ファイルは HTML ファイルにすぎないため、他のあらゆるスタイルシートと同じように、HTML の head に CSS を追加することができます。

リスト 6. display プロパティーを設定する
/* Never display elements with the hidden attribute */
*[hidden] {
  display: none;
}

互換性のない読み取りシステムやブラウザーでは、hidden 属性に対応するスタイル設定がなければ、すべてのサブセクションが表示されます (図 1 を参照)。

図 1. hidden 属性または CSS が設定されていない END TOC
hidden 属性が設定されていない END ファイルのレイアウトを示すスクリーン・キャプチャー。すべてのサブセクションが表示されています。

hidden をサポートしているブラウザーでの出力、あるいは機能の格差を埋めるための CSS を用意した後の出力は、図 2 のように変わります。

図 2. hidden 属性が適用された END TOC
hidden 属性が設定された END ファイルのレイアウトを示すスクリーン・キャプチャー。サブセクションは 1 つも表示されていません。

デフォルトでは、HTML の順序付きリストは、番号付きリストを生成します。ただし、END 仕様では、「・・・リスト項目のデフォルトの表示スタイルは、CSS の list-style: none と同じでなければならない」と規定しています。このような表示にするには、もう 1 つのルールを EPUB 3 の CSS polyfill に追加します (リスト 7 を参照)。

リスト 7. リスト項目のスタイルを設定する
/* In a declared TOC list, never show list numbering */
nav#toc ol {
  list-style-type: none;
}

XSLT による NCX から END へのマイグレーション

EPUB 3 の END には、EPUB 2 よりも多くのレイアウト・オプションと制御オプションがありますが、EPUB 2 から EPUB 3 のワークフローにマイグレーションする場合には、まず始めに既存の NCX 文書を変換することを検討してください。入力文書と出力文書はどちらも XML なので、この変換は、XSLT にはうってつけのアプリケーションです。

リスト 8 に、TOC を取り込む HTML 文書を生成するための基本フレームワークを記載します。

リスト 8. NCX と END に必要な名前空間を宣言する
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" 
                exclude-result-prefixes="ncx xsl"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ncx="http://www.daisy.org/z3986/2005/ncx/"
                xmlns:epub="http://www.idpf.org/2007/ops"
                xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

  <xsl:template match="ncx:ncx">
    <html>
      <head>
        <title><xsl:apply-templates select="/ncx:ncx/ncx:docTitle/ncx:text"/></title>
      </head>
      <body>
        <xsl:apply-templates/>
      </body>
    </html>
  </xsl:template>

http://www.idpf.org/2007/ops 名前空間は必ず含めなければならないことに注意してください。この名前空間には通常、epub という接頭辞が付けられます。この名前空間を含める第一の目的は、EPUB のセマンティック・インフレクション (EPUB コンテンツ文書の中の要素に対して、特定の目的の場合に対応する意味を追加すること) をサポートするためです。EPUB 3 を使用する場合には、Structural Semantics Vocabulary に用意されている表現を使用して、アクセシビリティー・ソフトウェアやマシン処理のコンテキストを提供することが推奨されています。この語彙に含まれる値についての情報は、「参考文献」を参照してください。

他のページ・マップ・タイプの変換も記載されている完全な例については、「参考文献」に記載されているオープンソースの nend アプリケーションを参照してください。

基本的なフレームワークが準備できたところで、早速 NCX の階層型 TOC を探索して、対応する XHTML 要素を出力します。NCX では数種類のページ・リストを使用することができますが、一般に EPUB 書籍に組み込まれているのは ncx:navMap だけです。ncx:navMap から一連のノードを出力する方法は、リスト 9 に抜粋したテンプレートに示されています。

リスト 9. navMap を出力する
...
  <!-- Generate a complete nav element and sub-list out of the navMap, 
       then recurse through the nodes -->
  <xsl:template match="ncx:navMap">
      <nav id="toc" epub:type="toc">
        <xsl:copy-of select="@class"/>
        <xsl:choose>
          <xsl:when test="ncx:navLabel">
            <xsl:apply-templates select="ncx:navLabel" mode="heading"/>
          </xsl:when>
          <xsl:otherwise>
            <xsl:if test="self::ncx:navMap">
              <h1>Table of Contents</h1>
            </xsl:if>
          </xsl:otherwise>
        </xsl:choose>
        <ol>
          <xsl:apply-templates select="ncx:navPoint|ncx:navLabel"/>
        </ol>
      </nav>
  </xsl:template>

  <xsl:template match="ncx:navPoint">
    <xsl:text>
</xsl:text>
    <li>
      <xsl:copy-of select="@id|@class"/>

      <!-- Every navPoint must have a navLabel and content -->
      <a href="{ncx:content[1]/@src}">
        <xsl:apply-templates select="ncx:navLabel"/>
      </a>

      <!-- Does this element have a sub-nav? -->
      <xsl:if test="ncx:navPoint">
        <ol>
          <xsl:apply-templates select="ncx:navPoint"/>
        </ol>
      </xsl:if>
    </li>
  </xsl:template>

  <!-- These nodes only contain text -->
  <xsl:template match="ncx:navLabel|ncx:text">
    <xsl:apply-templates/>
  </xsl:template>
...

リスト 10 に、階層型 NCX の例を記載します。

リスト 10. 階層的に編成された NCX の例
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ncx PUBLIC "-//NISO//DTD ncx 2005-1//EN" 
  "http://www.daisy.org/z3986/2005/ncx-2005-1.dtd">

<ncx xmlns="http://www.daisy.org/z3986/2005/ncx/" version="2005-1" xml:lang="en">

  <head>
    <meta name="dtb:uid" content="d989d60c-2302-40d1-9c85-1c028414342a" />
    <meta name="dtb:depth"          content="-1" />
    <meta name="dtb:totalPageCount" content="-1" />
    <meta name="dtb:maxPageNumber"  content="-1" />
  </head>

  <docTitle>
    <text>Middlemarch</text>
  </docTitle>

  <navMap>
    <navPoint id="np1" playOrder="1">
      <navLabel>
        <text>Prelude</text>
      </navLabel>
      <content src="prelude.html"/>
    </navPoint>

    <navPoint id="np2" playOrder="2">
      <navLabel>
        <text>I: Miss Brooke</text>
      </navLabel>
      <content src="book1.html" />

      <navPoint id="np3" playOrder="3">
        <navLabel>
          <text>Chapter 1</text>
        </navLabel>
        <content src="chapter1.html" />
      </navPoint>
      <navPoint id="np4" playOrder="4">
        <navLabel>
          <text>Chapter 2</text>
        </navLabel>
        <content src="chapter2.html" />
      </navPoint>
   ...

XSLT を使用してリスト 10 のファイルを変換すると、リスト 11 の出力結果となります。このサンプル・ファイルはここからダウンロードすることができます。

リスト 11. NCX から END に変換した後の出力
<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
  <head>
    <title>Middlemarch</title>
  </head>
  <body>
    <nav id="toc" epub:type="toc">
      <h1>Table of Contents</h1>
      <ol>
        <li id="np1">
          <a href="prelude.html">Prelude</a>
        </li>
        <li id="np2">
          <a href="book1.html">I: Miss Brooke</a>
          <ol>
            <li id="np3">
              <a href="chapter1.html">Chapter 1</a>
            </li>
            <li id="np4">
              <a href="chapter2.html">Chapter 2</a>
            </li>
...

@id の値は元のファイルから引き継がれているため、元のノードのすべてが取り込まれていることを確認するための妥当性検査ツールを作成できるはずです。他にも以下の変換オプションがあります。

  • OPF ファイル内のメタデータを古い Dublin Core スキームから、Publications 3.0 仕様 (「参考文献」を参照) で定義されているメタ @property スキームに更新する。
  • 非推奨となった OPF の guide コンテンツを END の landmarks 機能にマイグレーションする。
  • OPF の spine から NCX ファイルへの参照を削除する (ただし、後方互換性のある文書を作成しているのではない場合に限ります)。

通常、EPUB 3 対応のコンテンツ文書を作成するために、XHTML 1.1 のコンテンツを変更する必要はありません。ただし、セマンティックな情報が使用可能な場合 (コンテンツ管理システムや他の文書リポジトリーから抽出できる場合など) には、セマンティック・インフレクションを出力に適用することを検討してください。セマンティック・インフレクションについては、EPUB 3 仕様で詳しく説明されています (「参考文献」を参照)。


EPUB 3 開発のガイドライン

EPUB 3 読み取りシステムが利用可能になる前に、具体的なベスト・プラクティスを推奨するのは時期尚早だと思いますが、EPUB 3 は急速に成熟しつつある Web 技術をベースにしています。ベースとなるこれらの技術を使用する方法について、そして確実でアクセシブルなセマンティック・マークアップを作成するために既存のベスト・プラクティスを適用する場合について、広く推奨できるだけの情報はすでに揃っています。

EPUB 3 を作成し始めるタイミング

今の時点で、電子書籍を作成するには EPUB 2 と EPUB 3 のどちらを使えば良いのでしょうか。幸い、後方互換性は EPUB 3 の設計目標の 1 つであったため、EPUB 3 で拡張されたセマンティクスや追加されたメタデータのメリットを生かして電子書籍を作成しても、古い電子書籍リーダーで読み取ることができるはずです。けれども実際のところは、一部の電子書籍市場では、EPUB 3 コンテンツを販売できない可能性があります。それは、ビジネス・ルールが理由で EPUB 3 を受け入れられないためです。ただし、EPUB 3 コンテンツを「サイドロード」することによって、ほとんどの EPUB 2 対応読み取りシステムには有効に機能することが見込まれます。EPUB 3 は、読み取りシステムのサポートという点で前方互換性を持つようにも設計されています。したがって、EPUB 3 対応の読み取りシステムは妥当な EPUB 2 文書をサポートするはずです。

多くの読み取りシステムは、HTML5 マークアップを (特に videoaudiocanvas 要素に関して) 使用できる一種の「EPUB 2.5」をすでにサポートしています。Apple iBooks などの Web ブラウザー・エンジンを備えた電子書籍読み取りプラットフォームでは、EPUB 3 コンテンツ文書で使用可能な要素の多くを正常にレンダリングするはずです。あらゆる最先端の Web コンテンツと同じく、コンテンツをリリースする前には、可能な限り多くのリーダーでコンテンツをテストしてください。

レスポンシブ電子書籍デザイン

CSS3 の Media Query (メディア・クエリー) モジュールは、EPUB 3 で新しく追加された、大いに期待されるコンポーネントです。メディア・クエリーでは、作成者が特定の (通常はビューポートのサイズに基づく) 表示条件に対してのみ、ルールおよびプロパティーのセットを適用するように指定することができます。また、メディア・クエリーを使用して、特定の高さと幅の比率 (縦表示または横表示) をターゲットにすることもできます。

一部の Web サイトでは、モバイル機器でのユーザー・エクスペリエンスを向上させるために、これらの機能をすでに使用しています。このように表示画面のサイズと向きに応じてレイアウトを調整するという原則は、「レスポンシブ Web デザイン」と総称されています。レスポンシブ Web デザインの Web での効果はすでに実証済みですが、この手法はいくつかの点で書籍のデザインにさらによく適していると言えます。書籍のデザインをする人は、何十年も調査と試験を重ねてきたなかから、さまざまなサイズと向きで効果的に情報を表示する方法を導き出しているからです (レスポンシブ Web デザインについての詳細は、「参考文献」を参照してください)。

ほとんどの電子書籍は、すべてがテキストで構成されているか、ほとんどがテキストで構成されていますが、多くのタイプの出版物では、マーケティング上の理由から、あるいはコンテンツが持つ基本的な特性から、よりリッチなレイアウトが必要となります。これまでは、レイアウトを駆使した書籍は、電子書籍に変換する候補とはなりにくかったものの、EPUB 3、そして EPUB 3 で使用されている HTML5 と CSS3 によって、高度なデザインが可能になります。その一方で、大きな勢力には大きな責任が伴うもので、読みやすい上に魅力的なレイアウトのコンテンツを期待するモバイル機器のユーザーを無視することはできません。そこで活躍するのが、CSS3 のレイアウトとレスポンシブ電子書籍デザインを組み合わせた手法です。


EPUB 3 の高度なレスポンシブ・レイアウト

これまで、絵本、料理本、テキストブック、そして詩をリフロー可能なコンテンツに変換するのは困難でしたが、このセクションでは子供向けの詩集のページ (図 3 を参照) を EPUB 3 に適応させる方法を紹介します。「変換」という言葉ではなく「適応」という言葉を使った理由は、これは技術的なプロセスであるのと同時に、芸術的な趣のあるプロセスでもあるからです。

図 3. Thomas Crane 著『Abroad』の 1 ページ (インターネット・アーカイブから入手したパブリック・ドメインのイメージ)
EPUB 3 に適応させる『Abroad』という書籍の 1 ページを示すスクリーン・キャプチャー

このプロセスの手法としては、テキストを XHTML として取り込み、元のレイアウトを (再現するのではなく) 連想させる画像をいくつか抽出します。EPUB 3 は XHTML5/CSS3 処理のコンテキストを前提とするため、オープン Web での場合のように多数のレガシー・ブラウザーに対応するのではなく、最小限のセマンティック・マークアップを使用することができます。リスト 12 に、コンテンツの XHTML マークアップを記載します。

リスト 12. 詩のマークアップ
<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
  <head>
    <title>Example of Media Query in EPUB 3</title>
    <link rel="stylesheet" type="text/css" href="childrens-book-style.css" />
  </head>
  <body>
    <div epub:type="chapter">
      <h1>The Swans.</h1>
      <p>
        <span>"Ho! pretty swans,</span>
        <span>Do you know, in our Zoo'</span>
        <span>The swans of old England</span>
        <span>Are just like you?"</span>
      </p>
      <p>
        <span>"Don't tell me!"</span>
        <span>Said a cross old bird;</span>
        <span>"I know better,</span>
        <span>The thing's quite absurd.</span>
      </p>
      <p>
        <span>Their figures, I'm sure,</span>
        <span>Are not worth a glance:</span>
        <span>If you want to see style,</span>
        <span>You <em>must</em> come to France."</span>
      </p>
      <p>
        <span>With a scornful whisk</span>
        <span>The swan turned tail,</span>
        <span>Spread its wings to the breeze</span>
        <span>And was off full-sail.</span>
      </p>
      <p>
        <span>"Ho! pretty swan,</span>
        <span>Do you know, in our Zoo'</span>
        <span>The swans are not half</span>
        <span>So conceited as you?"</span>
      </p>
    </div>
  </body>
</html>

上記では、画像は 1 つも指定されていません。レスポンシブ・デザインを促進するために、イメージは CSS で提供することになります。多くのレスポンシブ Web 開発の支持者たちは、「モバイル最優先」の戦略を採っていますが、最初は印刷コンテンツをデスクトップやタブレット・サイズの画面に適応させるほうが簡単かもしれません。例えば、デフォルト・ビューが大型の画面であるという前提にします。リスト 13 に CSS を記載し、図 4 にその CSS によって Apple iPad で iBooks にレンダリングされた電子書籍を示します。

リスト 13. タブレット・サイズのレイアウトに対応する CSS
@namespace epub "http://www.idpf.org/2007/ops";

body {
    font-family: Georgia, serif;
    margin: 0;
    padding: 0;
}

/* Select the entire <div epub:type> and apply the background 
   images at various positions relative to the text. */

div[epub|type="chapter"] {
    background-image: url('childrens-book-swans.jpg'),
                      url('childrens-book-flowers.jpg');
    background-position: 100% 50%, bottom center;
    background-size: 50% auto, auto auto;
    background-repeat: no-repeat, repeat-x;
    background-color: #fdefc2;

    padding: 2em;
}

p {
    font-size: .75em;
    text-align: left;
}

p:last-child {
    padding-bottom: 2em;
}

h1 {
    margin-top: 0;
    text-transform: uppercase;
    font-weight: 200;
}

p > span {
    display: block;
}

/* Use the CSS Selector module to apply rule-based formatting to the 
   poetry content, generating alternating rows of indented text. */

p > span:nth-child(even) {
    text-indent: 1em;
}

この例では CSS Namespaces Module 仕様に規定されている @namespace 構文を使用しています。CSS 名前空間では、名前空間接頭辞を要素と属性に使用したスタイルを指定することができます。EPUB 3 で CSS 名前空間を使用しなければならないわけではありませんが、スタイルを設定するためだけに別個のクラスを作成するより、EPUB のセマンティック・インフレクションを適用した要素 (@epub:type 属性) にスタイルを追加するほうが便利です。ほとんどのブラウザーが CSS 名前空間を正しく処理するためには、HTML 文書に .xhtml 拡張子を使用する必要があります。

図 4. タブレット・サイズの画面でレンダリングされた『Abroad』という書籍のページ
iPad 上で iBooks に表示された、XHTML の電子書籍『Abroad』のページを示すスクリーン・キャプチャー

右に揃えられた画像と大きな装飾枠を使用した図 4 のレイアウトは、元のページを見事に連想させると言えます。けれども、この配置は縦長画面のモバイル機器には、画像を表示するにもテキストを表示するにも画面の幅が足りないため、適していません。モバイル機器 (通常の幅は約 480 ピクセル) に対しては、リスト 14 に示すように、いくつかの要素の属性を変更することができます。リスト 14 の CSS では、以下のように処理しています。

  • 白鳥の画像を縮小して中央に揃え、テキストの上に表示します。最下部にある装飾の画像を縮小し、詩のコンテンツにかぶらないようにします。
  • タイトルを小さくして、中央揃えにします。
  • 詩のテキスト自体は、ぴったり左寄せにするのではなく、もう少し中央方向に配置します。
リスト 14. 携帯電話サイズの縦長画面に対応する CSS
@media screen and (max-width:480px) { 

    div[epub|type="chapter"] {
        background-position: top center, bottom center;
        background-size: 30% auto, 50% auto;

        padding: 1em;
        margin: auto;
        text-align: center;
    }

    h1 {
        margin: 50% auto 0 0;
        font-size: 1em;
        text-align: center;
    }

    p {
        margin-left: 25%;
    }
}

上記のディレクティブは前の CSS に従うため、このディレクティブで必要なのは、新しいレイアウトで値が変更されたプロパティーに対する変更を行うことだけです。図 5 に、2 ページにわたる出力を示します。

図 5. 携帯電話サイズの画面上にレンダリングされた『Abroad』という書籍のページ
Apple iPhone 上で iBooks に表示された、XHTML の電子書籍『Abroad』のページを示すスクリーン・キャプチャー

幅を狭くした表示は、縦長画面では上手く機能するものの、このような短い詩を横長画面用のページに配置すると、大抵は画面がすぐにいっぱいになってしまうはずです。そこで、最後にもう 1 つのメディア・クエリーを追加して、横長画面の機器で詩を段組みして配置できるようにします。CSS Text モジュールに含まれるこの機能は、EPUB 3 の CSS サポートの中核です。リスト 15 に、携帯電話サイズの横長画面に対応する CSS を記載します。

リスト 15. 携帯電話サイズの横長画面に対応する CSS
@media screen and (orientation:landscape and max-width:480px) { 
    div[epub|type="chapter"] {
        background-position: 97% 40%, bottom center;
        background-size: 20% auto, 50% auto;

        /* For now we are required to use the vendor-prefixed versions in most browsers */
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;

        -webkit-column-gap: 0;
        -moz-column-count: 0;
        column-gap: 0;

        padding: 2em 4em 5em 4em;
    }
}

図 6 に、レンダリングされた出力を示します。

図 6. 携帯電話サイズの横長画面でレンダリングされた『Abroad』という書籍のページ
横長画面のモバイル Safari に表示された、XHTML の電子書籍『Abroad』のページを示すスクリーン・キャプチャー

出版物に MathML を組み込む方法

EPUB 2 の出版物には、数学的なコンテンツをラスター画像または SVG として組み込むことしかできませんでした。SVG による数学コンテンツは見栄えの良い出力になるとは言え、スクリーン・リーダーにとっては理解できないため書き出すのが困難です。ラスター画像となると、さらに事態は悪化します。ラスター画像は、アクセシビリティーを提供することも、異なるフォントとディスプレイ・サイズに応じて巧みに拡大/縮小することもありません。

EPUB 3 には、MathML がネイティブ EPUB コンテンツ・タイプとして組み込まれています。MathML マークアップは、ラスター画像などの別のタイプへのフォールバックを使わずに指定することができます。ほとんどの場合、EPUB 3 リーダーでは最低限、表示用の MathML をサポートしなければなりません。

MathML はコアのコンテンツ・タイプですが、OPF ファイルに MathML が使用されている XHTML ページを宣言する必要があります (リスト 16 を参照)。

リスト 16. OPF ファイルの中で MathML コンテンツを宣言する
  <manifest>
    <item href="mathml-style.css" id="css1" media-type="text/css"/>
    <item href="mathml.xhtml" properties="mathml" 
             id="page1" media-type="application/xhtml+xml"/>
    <item href="toc.ncx" id="ncx" media-type="application/x-dtbncx+xml"/>
    <item id="toc" properties="nav" 
             href="toc.xhtml" media-type="application/xhtml+xml"/>
  </manifest>

リスト 17 に、単純な方程式を記載します。一部の Web ブラウザーは HTML5 のコンテキストで (名前空間を指定せずに) MathML をサポートするようになっていますが、EPUB 3 では MathML コンテンツを http://www.w3.org/1998/Math/MathML という正しい名前空間で宣言する必要があります。

リスト 17. EPUB 3 コンテンツ文書での MathML
<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:epub="http://www.idpf.org/2007/ops" 
      xmlns:m="http://www.w3.org/1998/Math/MathML">
  <head>
    <title>Example of MathML in EPUB 3</title>
    <link rel="stylesheet" type="text/css" href="mathml-style.css" />
  </head>
  <body>

    <m:math display="block">
      <m:mrow>
        <m:mi>x</m:mi>
        <m:mo>=</m:mo>
        <m:mfrac>
          <m:mrow>
            <m:mo form="prefix">-</m:mo>
            <m:mi>b</m:mi>
            <m:mo>±</m:mo>
            <m:msqrt>
              <m:msup>
                <m:mi>b</m:mi>
                <m:mn>2</m:mn>
              </m:msup>
              <m:mo>-</m:mo>
              <m:mn>4</m:mn>
              <m:mo>⁢</m:mo>
              <m:mi>a</m:mi>
              <m:mo>⁢</m:mo>
              <m:mi>c</m:mi>
            </m:msqrt>
          </m:mrow>
          <m:mrow>
            <m:mn>2</m:mn>
            <m:mo>⁢</m:mo>
            <m:mi>a</m:mi>
          </m:mrow>
        </m:mfrac>
      </m:mrow>
    </m:math>              
  </body>
</html>

図 7 に、iBooks での出力を示します。すべてのタイプの方程式が適切にレンダリングされるようにするためには、適切な数学記号が含まれるフォントを組み込まなければならない場合もあります。科学出版物で使用される STIX Fonts については、「参考文献」を参照してください。

図 7. EPUB 3 でレンダリングされた単純な数学の方程式
EPUB 3 書籍での方程式を示すスクリーン・キャプチャー

MathML を出力する多くのシステムでは、MathML 1.0 DTD で名前が指定されている実体 (&PlusMinus; など) を使用することができます。これらの実体は、EPUB 3 出版物に組み込む前に、数字実体に変換する必要があります。外部 DTD であるこれらの実体は、コアのコンテンツ・タイプであるとしても、EPUB アーカイブには組み込まないでください。


他のトピックについても調べてください

EPUB 3 は、デジタル技術の特徴を生かした高度な出版物を作成するためのオプションを数多く提供します。以下のトピックについて、さらに調べることをお勧めします。

  • HTML5 の canvas と JavaScript を組み合わせて、インタラクティブな書籍を作成する。
  • セマンティック Web に興味がある場合には、EPUB 3 Structural Semantics Vocabulary のセマンティック・インフレクション・オプションを十分に理解する。
  • HTML5 のセマンティクスと Accessible Rich Internet Applications Suite (WAI-ARIA) のロールを使用することで、補助装置やマシン・ラーニング・アルゴリズムで使用できるリッチなコンテンツにするための魅力的な方法を実現する。

現在、EPUB 3 の拡張が活発に進められています。今後の改訂版では、CSS Regions など、新しい CSS モジュールに含まれる機能が統合されることになりそうです。


ダウンロード

内容ファイル名サイズ
XSLT and sample files for NCX transformationncx-to-end.zip5KB
A sample EPUB 3 demonstrating advanced CSS3 layoutchildrens-book-epub.zip139KB
A sample EPUB 3 demonstrating MathMLmathml-epub.zip3KB

参考文献

学ぶために

  • EPUB で電子書籍を作成する」(Liza Daly 著、developerWorks、2011年7月): EPUB フォーマットについて詳しく学んでください。
  • EPUB 3 仕様: 最新バージョンの EPUB 標準の概要を把握してください。
  • EPUB Publications 3.0 Recommended Specification: EPUB 3 の出版レベルのセマンティクスと適合要件について読んでください。パッケージ文書のフォーマットや、この文書および他の出版物リソースが EPUB 準拠の出版物を作成するためにどのように関連しているかについても説明されています。
  • EPUB 3 Structural Semantics Vocabulary: 著作物の構造的セマンティクスの記述に関連する一連のプロパティーについて詳しく学んでください。
  • HTML5 for Publishers』(Sanders Kleinfeld 著、O'Reilly Media、2011年): 無料で入手できるこの EPUB に関する一冊では、EPUB 3 のcanvas ベースの対話性やその他の素晴らしい機能の使用方法を具体的に説明しています。
  • Responsive Web Design』(Ethan Marcotte 著): 流動性のあるグリッド、柔軟なイメージ、そしてメディア・クエリーを含め、CSS の手法とデザイン原則について調べてください。
  • New to XML: XML を学ぶために必要なリソースを入手してください。
  • developerWorks の XML エリア: DTD、スキーマ、XSLT を含め、XML 分野でのスキルを磨くための資料を見つけてください。広範な技術に関する記事とヒント、チュートリアル、標準、そして IBM Redbooks については、XML 技術文書一覧を参照してください。
  • IBM XML 認定: XML や関連技術の IBM 認定技術者になる方法について調べてください。
  • developerWorks の Technical events and webcasts: これらのセッションで最新情報を入手してください。
  • developerWorks オンデマンド・デモ: 初心者向けの製品のインストールおよびセットアップから熟練開発者向けの高度な機能に至るまで、さまざまに揃ったデモを見てください。
  • developerWorks は Twitter を利用しています: 今すぐ developerWorks のツイートをフォローしてください。
  • developerWorks podcasts: ソフトウェア開発者向けの興味深いインタビューとディスカッションを聞いてください。

製品や技術を入手するために

  • EpubCheck: EPUB 2 および EPUB 3 文書を処理するこのバリデーターの最新バージョンをダウンロードしてください。
  • nend: NCX ファイルを END に変換するための XSLT および Python ツールが完全に揃った一式を入手してください。
  • STIX Fonts: 科学およびエンジニアリング・コミュニティーに対応する包括的なフォント・セットを使用してください。
  • IBM 製品の評価版: DB2、Lotus、Rational、Tivoli、および WebSphere のアプリケーション開発ツールとミドルウェア製品を体験するには、評価版をダウンロードするか、IBM SOA Sandbox のオンライン試用版を試してみてください。

議論するために

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=XML, Open source, Web development
ArticleID=810139
ArticleTitle=リッチなレイアウトの出版物を HTML5 と CSS3、そして MathML を使用して EPUB 3 で作成する
publish-date=08022012