電子書籍の作り方④ ～固定レイアウトでの目次作成～
前回からだいぶ経ってしまいましたが、今回でEPUB作成は完結です！
（電子書籍をセルフ出版しまして、その際の方法を紹介しておりました）
前回、GoogleドキュメントとLeMEを組み合わせて固定レイアウトで電子書籍を作成を行いました。
そして前回、電子書籍ができたのですが目次とナビゲーション（左上の三本線をクリックすると出てくる目次）が無いので今回作成してみます。
※ここからはXMLファイル（HTMLのようなもの）をいじったりするのである程度ITに強い、興味のある方向けの話となります
目次作成のための下処理
最初にLemeでダミーの目次を挿入します。
「この自動生成の目次でいいんじゃ…」
と思うかもしれませんが、Lemeで自動生成した目次は見た目があれなのでおすすめしません。またこの後修正するのでダミーは目次である必要はないのですが、Lemeで開いたときわかりやすいように目次としました。
後は自由に編集して本の作成（EPUBの出力）をして下さい。
EPUBを開く
ではEPUBの編集を行います。大まかなイメージは「EPUBを開く」→「中身を目次だけ修正」→「またEPUBに戻す」というオペのようなことをします。
でどうやって開くかと言いますと、ZIPファイルにして解凍します。（前々回お話ししましたがEPUBはZIPファイルです。）
EPUBをZIPにするには拡張子を変えるだけです。
※Windowsでの拡張子の表示方法はこちらをご覧下さい
そしてZIPになったファイルを解凍してみて下さい。
2つのフォルダと1つのファイルが出てきました。（※EPUBのフォルダ構成は決まっていないので、この構成はLeme特有のものになります）
ファイル「mimetype」は置いておいて「item」フォルダを見てみます。
ほぼこちらに電子書籍の内容が詰め込まれています。
ファイルは置いておいて各フォルダを見てみますと
だからなんだといった感じですが、固定レイアウトで作成したのでImagesフォルダから何となく構造がわかるかと思います。
前々回の記事の通り、普段私たちがWebブラウザでhtmlファイルからWebページを見ているように、EPUBも「電子書籍アプリでxhtmlファイルを表示して書籍のように見せている」という構造になっています。
xhtmlフォルダからファイルを1つ見てみます。「p-0001.xhtml」をメモ帳で開くと次のようになっています。
何やらHTMLのようなもので色々書いてありますが、ほとんど意味がありません。このファイルでやっているのは下から4行目の「href="../image/image-0001.jpg"」とあるように「imgaeフォルダのimage-0001.jpgを表示しているだけ」となっています。
目次ページを除き、p-0002.xhtml以降を開いても画像の参照先が違っているだけです。
おわかり頂けましたでしょうか…
このEPUBは「1ページ目：p-0001.xhtml」「2ページ目：p-0002.xhtml」…
となっておりひたすら順番に画像を参照して、それを本のように見せているだけとなっています。
つまりLemeがやっているのはPDFだろうがなんだろうが「ひたすら画像に変換して、ページが割り振る」ということをしています。（固定レイアウトの場合）
※補足
p-0001、p-0002…というのは決まっているものではなく、Lemeが自動で定義したものです。itemフォルダにあるstandard.opfに"itemref"として定義されています。
目次の作成
長々と書きましたが、EPUB内部はこんな感じになっています。
でやっと目次です。Lemeで目次を挿入すると、そこだけは固定レイアウトとなっていません。目次ページを開いてみます。メモ帳などテキストエディタで開いてください。
目次は挿入した位置が異なるのですが、今回の例だと表紙を除いたページ数からp-0003.xhtmlが目次ページとなります。（ページがあやふやでも開いて目次と書いてあるのですぐにわかるかと思います）
あとはこれを自由に編集して下さい！
ということになります。
が、これでは不親切ですので私の作ったものを例としてアップします。
使い方としましては解凍しまして、xhtmlフォルダにあるmokuji.xhtmlを目次のファイル名（今回ならp-0003.xhtml）に変更。xhtmlとstyleの両フォルダを先ほど解凍したitemフォルダにかぶせて上書きすればOKです。
※Lemeのスタイルシートも直していますので必ずバックアップをとり、不具合などありましたら戻してください
もちろんこれでは私の書籍用の目次となっているため、目次のxhtmlファイル（元mokuji.xhtml）の修正が必要になります。そこは主に"勘"で修正をお願いします。（styleフォルダにあったファイルは修正不要です）
全ては説明できませんので簡単に説明します。
aタグと呼ばれる中の herf="XXXXX.xhtml"がリンク先となりますので、ここに章の表紙など飛ばす先となるページを設定します。次にpタグ、つまり<p class="XXXXX">～</p>内に目次内のタイトルを設定します。
以上です。
文字の大きさは？インデントの幅はどうやって変えるの？
と疑問に思うかと思いますが、それはスタイルシート（CSS）で行っています。
styleフォルダがスタイルシートの格納先で、今回の目次のスタイルはstyle-original.cssに設定されています。申し訳ないですがこれらは説明しきれないので検索などで調べてみてください。（CSSで検索すると出てきます。ChatGPTも得意です。）
色々修正したらChormeなどWebブラウザでプレビューすることをおすすめします。目次のxhtmlファイルをブラウザにドロップするだけです。
やっぱり丸投げで申し訳ありませんが、とにかくここら辺は色々試して修正をしてみてください。
※Webブラウザのプレビューは書籍のプレビューと若干異なります。最終的にはEPUBにしてKindle Previewerで確認してみて下さい。
ナビゲーションの修正
目次と同じようにナビゲーションを設定するファイルを修正します。ナビゲーションファイルはitem直下の"navigation-documents.xhtml"です。
開いてみるとこんな感じです。
こちらの方が目次のファイルよりやや複雑で<li>～</li><ol>～</ol>などを使っています。ただ基本的には先ほどと同じようにaタグ内にタイトル名、herf="～"にリンク先を設定しているだけです。ナビゲーションはブラウザでプレビューできませんので、少しずつ変えて試してみてください！
※私の作ったものもアップしておきますが、入れ子にしてあったりするので最初はおすすめしません
※今さらですがナビゲーションはここのボタンのやつです
オペ完了 - EPUBに戻す -
目次・ナビゲーションの修正が終わりましたら、再びEPUBに戻します。
戻すのはZIPに圧縮するだけなのですが重要なポイントがあります。
それは「item」「META-INF」「mimetype」を全て選択してZIPにすることです。
その上の階層のフォルダを右クリックでZIPにすることが多いと思いますが、それだとEPUBにした際エラーとなることがあります。（このエラーにかなり引っ掛かりました…）
これだけ注意すれば、あとはできたZIPファイルの拡張子を".epub"に戻せばOKです。Kindle Previewerで確認してみて下さい。
恐らくですが、開くとエラーとなってしまうことが多いと思います。そしてKindle Previewerのエラーメッセージはとても不親切です。
ですので面倒ですができる限り書籍と並行して少しづつ編集をしてエラーになったら戻すを繰り返して作成してみて下さい。
おわりに
長々となりましたが、この記事で言いたかったのは
EPUBはxhtmlや画像を圧縮してできている
固定レイアウトでも目次はxhtmlの編集で作成できる
以上だけです。Leme以外のツールの場合、不要な作業かもしれませんが「EPUBを開いて編集できる」ということを知っておくと"いざ"というとき役に立つかと思います。
読んで頂いた方、ありがとうございました。次回はKindleダイレクト・パブリッシング（KDP）への登録編をやるつもりです。
おまけ
目次のリンクに下線がいらない場合は次のファイルをstyleフォルダにかぶせて下さい。
宣伝
しれっと次の本ができました！
今度はリフロー型で作成したのでこちらもいつか説明したいと思います。
この記事が気に入ったらサポートをしてみませんか？