読者です 読者をやめる 読者になる 読者になる

本好きに送る「電子書籍のつくり方」講座

誰でも 簡単 手作り 電子書籍

電子書籍づくり実践(EPUBの構造 目次を作る2)

前回は、目次とリンクさせるために必要な「id」を、本文の見出し側に付与しました。今回はそれとリンクする目次自体のデータを作りながら、その仕組みを学びます。

つくる目次ファイルは“二つ”

目次として機能するファイルを二つ作ります。なおこのファイルはここまでつくり進めて来た、EPUBテンプレート*1内に既に存在しますので、それに追記する形で作業を進めていきます。

下の構造図で、赤丸のついた2ファイルです。

epubフォルダ内での目次の在処

navigation-documents.xhtmlは論理目次

構造図の左下にある「navigation-documents.xhtml」は論理目次といい、リーダー側の仕組みから呼び出される目次です。

論理目次の説明

p-toc.xhtmlは本文目次

構造図の右上にある「p-toc.xhtml」は本文目次といい、本文ページファイルとして存在する目次で、本のページをめくっていくと出てくる目次です。

本文目次の説明

なおこのように目次情報をふたつ作るには理由があり、それはリーディングシステム*2によっては「どちらか片方の目次の仕組みにしか対応していない」場合があるためです。

目次ファイルの作り方

それでは目次ファイルの作り方を説明します。
全体の流れてとしては、まずは本文の内容から見出し項目(=目次項目)だけを抜き残します(正規表現の検索置換を使う)。次に目次に必要な情報を新たに付加します。また、つくる順番としては、まず論理目次をつくり、そこから本文目次をつくり出します。

本文ファイル→論理目次の書き出し

まずは論理目次をつくります。
本文ファイル自体、これはこれとして必要なデータなので、まずは「p-002.xhtml」をコピペなどして複製します(複製したファイルはどこに置いてもOKです)。ファイル名は「mokuji.xhtml」としておきましょう。

次に「mokuji.xhtml」をエディタで開き、下記の3組の検索置換を掛けていきます。

ねらい:pタグのついた文章の削除(=見出し部分だけを残す)

検索
<p>(.+?)</p>
置換
空欄

ねらい:残ったものからhタグを外し、idを生かしつつ、liタグに付け替えます

検索
<h[0-9] .+?id="(toc-[0-9][0-9][0-9][0-9])">(.+?)</h[0-9]>
置換
<li><a href="xhtml/p-000.xhtml#$1">$2</a></li>

ねらい:不要な改行を削除

検索
^\n ※emeditorの場合
^\r ※miの場合
置換
空欄

検索置換が完了するとエディタでは下のように見えます。

本文から論理目次を検索置換で書き出す

できたら上書き保存し、次にこの内容を「すべて選択」して「コピー」します。

続いてテンプレートのフォルダ内にある「navigation-documents.xhtml」をエディタで開きます。

開いたら

<ol>

</ol>

の間に先ほどコピーしたデータを貼付けます。

書き出した目次データを論理目次のテンプレートへ貼付ける

貼り付けが出来たら上書き保存し、今度はブラウザで「navigation-documents.xhtml」を開いてみます。

論理目次をブラウザで開いたときの見え方

このように表示されていればOKです。

論理目次→本文目次の書き出し

続いて本文目次のファイルを作ります。
先ほどつくった「mokuji.xhtml」を複製し、ファイルネームを「honbun-mokuji.xhtml」とします(この複製ファイルはどこに置いてもOKです)。

これをエディタで開き、下記の2組の検索置換を掛けていきます。

ねらい:不要な記述を削除します。

検索
xhtml/
置換
空欄

ねらい:liタグをpタグに変更します。

検索
li>
置換
p>

検索置換が完了するとエディタでは下のように見えます。

論理目次から本文目次を検索置換で書き出す

できたら上書き保存し、次にこの内容を「すべて選択」して「コピー」します

続いてテンプレートのフォルダ内にある「xhtmlフォルダ」を開き、その中の「p-toc.xhtml」をエディタで開きます。

開いたら

<p><br /></p>

</div>

の間に先ほどコピーしたデータを貼付けます。

書き出した目次データを本文目次のテンプレートに貼付ける

貼り付けが出来たら上書き保存し、今度はブラウザで「p-toc.xhtml」を開いてみます。

本文目次をブラウザで開いたときの見え方

このように表示されていればOKです。
なお作業後「mokuji.xhtml」と「honbun-mokuji.xhtml」は不要なので削除してください。

今日のまとめ

EPUBの構造。今回は目次ファイルをつくりました。

目次ファイルは

  • 論理目次「navigation-documents.xhtml
  • 本文目次「p-toc.xhtml

のふたつが必要。

またその作成には正規表現による検索置換を使い、作業を省力化します。

次回は
電子書籍づくり実践(EPUBの構造 本文ファイルを分割する)についてお話します。

*1:日本電子書籍出版社協会電書協EPUB 3 制作ガイド。下記よりダウンロードできます。http://www.ebpaj.jp/guide.html
その中にある「book-template.epub」というファイルの拡張子を.zipに変更し、解凍すると上図の構造を持ったフォルダが作られます

*2:電子書籍を読むための仕組みのこと。専用の端末、またはデバイス上で作動する電子書籍閲覧用アプリなどの総称