Tech Racho エンジニアの「?」を「!」に。
  • 開発

EPUB制作: 目次Navigation Documentのよくある間違い

EPUB Navigation Documentは、EPUB内に含まれる目次に相当するXHTMLファイルです。

今回は、社内テストやお客様からの問い合わせで発見したコンテンツ制作上の間違いなどをご紹介します。

EPUB Navigation Documentの書き方

なお、ここでは特に断りのない限りEPUB 3.1のEPUB Navigation Documentを参照しますが、3.0や3.0.1でも基本的には同じです。

基本的な構造

必須となっており、多くのビューアでも主に使われるtocタイプを例に挙げます。あくまで概要ですので、詳しくはNavigation Documentの仕様をご確認ください。


  • nav[type="toc"]がある
    • navは0個または1個のheading content(h1-h6)を含む(目次全体のタイトルを書ける)
    • navは必ず1個のolを含む
    • olは1個以上のliを含む(項目が1個もない目次は許可されない)
      • liaまたはspanをどちらか必ず1個含む
        • aはContent Documentへのリンク
        • spanはサブリストのタイトル
        • aspanは、どちらも空にはできない(imgなどを含むことはできるが、テキストとして処理した際に必ず1文字以上となるように、titleやaltを付与すること)
      • aを含むliは、追加で最大1個のolを含むことができる
      • spanを含むliは、追加で必ず1個のolを含む(spanをleaf要素にすることはできない)

epubcheckを使おう

原則として、EPUB公開前にはepubcheckによるチェックを通しておくと安全です。epubcheckを通過したからと言って100%正当なEPUBであることが保証される訳ではありませんが、通常制作していく中で埋め込んでしまうEPUB仕様違反(主に凡ミス)の99%くらいは発見できると思います。

java -jar epubcheck.jar target.epub

よくある間違い

1. ネストしたリストに、spanによるheadingがついていない

以下のようなケースです。問題の行を👈で示しました。

<ol>
  <li><a href="p001.xhtml">第1章</a></li>
  <li> 👈
    <ol> 👈
      <li><a href="p002-1.xhtml">第2章その1</a></li>
      <li><a href="p002-2.xhtml">第2章その2</a></li>
    </ol>
  </li>
</ol>

liは必ず最初にaまたはspanを含む必要があり、olはこれらに続く形でのみ記述できます。つまり、タイトルのつかないサブリストは許容されません。

epubcheckでは以下のようなエラーが指摘されます。

ERROR(RSC-005): ...: ファイル解析時のエラー '要素 "ol" はまだここには書けません. ; ここに書かれるべきものは 要素 "a" または "span" です.'.

修正すると、以下のようになります。第2章の扉がある場合などは、spanの代わりにaを利用してももちろん構いません。

<ol>
  <li><a href="p001.xhtml">第1章</a></li>
  <li>
    <span>第2章</span>
    <ol>
      <li><a href="p002-1.xhtml">第2章その1</a></li>
      <li><a href="p002-2.xhtml">第2章その2</a></li>
    </ol>
  </li>
</ol>

2. href属性のないa要素がある

以下のようなケースです。

<ol>
  <li><a href="p001.xhtml">第1章</a></li>
  <li><a>セクション区切り</a></li> 👈
  <li><a href="p002.xhtml">第2章</a></li>
</ol>

A child a element describes the target that the link points to,

などと書かれているように、aはリンク(目次項目)のために利用する必要があります。spanの代わりに利用してはいけません。

この違反は、epubcheck 4.0.2では特にエラーが出力されないので注意が必要です。

修正するには、該当のaを含むliを削除するのが最も簡単です。もし後続の項目がセクションとしてまとめられるなら、spanに後続するサブリストとして利用することも検討してください。ブラウザで見た際の間隔を空けたいのなら、CSSを使いましょう。

<ol>
  <li><a href="p001.xhtml">第1章</a></li>
  <li><a href="p002.xhtml">第2章</a></li>
</ol>

3. aspanを含まないli要素がある

以下のようなケースです。

<ol>
  <li><a href="p001.xhtml">第1章</a></li>
  <li>-----</li> 👈
  <li><a href="p002.xhtml">第2章</a></li>
</ol>

liは必ずaまたはspanを1つ含む必要があり、区切り線のような用途に使うことは禁止されています。

epubcheckでは以下のエラーが報告されます。

ERROR(RSC-005): ...: ファイル解析時のエラー 'テキストはここには書けません. ; ここに書かれるべきものは 要素 "a" または "span" です.'.

修正するには、該当のliを削除します。

<ol>
  <li><a href="p001.xhtml">第1章</a></li>
  <li><a href="p002.xhtml">第2章</a></li>
</ol>

4. nav配下に余計な要素がある

以下のようなケースです。

<nav epub:type="toc">
  <p>目次です。</p> 👈
  <ol>
    <li><a href="p001.xhtml">第1章</a></li>
    <li><a href="p002.xhtml">第2章</a></li>
  </ol>
</nav>

nav直下には0個または1個のheading要素と必ず1個のol要素を置くことを必要とされ、それ以外は許可されません。

epubcheckでは以下のエラーが報告されます。

ERROR(RSC-005): ..: ファイル解析時のエラー '要素 "p" をここに書いてはいけません. ; ここに書かれるべきものは 要素 "ol" です.'.

修正するには、該当のpを削除するか、navの外に置くのが簡単です。

<p>目次です。</p>
<nav epub:type="toc">
  <ol>
    <li><a href="p001.xhtml">第1章</a></li>
    <li><a href="p002.xhtml">第2章</a></li>
  </ol>
</nav>

5. HTMLが壊れている

以下のようなケースです。

<ol>
  <li><a href="p001.xhtml">第1章</a></li>
  ------- 👈
  <li><a href="p002.xhtml">第2章</a></li>
  <ol> 👈
    <li><a href="p002-1.xhtml">第2章その1</a></li> 👈
  </ol> 👈
</ol>

どうしてこうなった、感が満載ですが、当然ながらol直下にli以外を書いてはいけません。

HTMLとしてli以外にscripttemplateも含むことができますが、EPUB Navigation Documentとしてはliのみが許可されます。テキストやolはHTMLでも当然NGです。

関連記事


CONTACT

TechRachoでは、パートナーシップをご検討いただける方からの
ご連絡をお待ちしております。ぜひお気軽にご意見・ご相談ください。