fbpx

メニュー

ePub作成覚え書き(nav要素とか、kobo用縦書きとか)

高橋文樹 高橋文樹

この投稿は 12年 前に公開されました。いまではもう無効になった内容を含んでいるかもしれないことをご了承ください。

最近は自作品をePubにして売るのと並行して、ePubをWordPressのコンテンツから適当にバンドルして書き出す機能を作っています。かれこれ3ヶ月ぐらい完成していないんですけどね。

さて、すっかり呆れられている楽天koboですが、ePubビューアーとしてはわりと高性能のような気がします。縦書きもちゃんと表示されてますし、僕には文字組もわりかしちゃんとしているように見えます。

iBooks縦書きできない問題

さて、koboが縦書きに対応しているので「よーし、パパ縦書きePub作っちゃうぞー」となりがちですが、なんとiOSのePubビューアiBooksは縦書きに対応していません。厳密には中途半端に対応しているため、下手に縦書きePubを作ってしまうと大変なことになります。

iBooksで縦書きにするとこんなことに…
iBooksで縦書きにするとこんなことに…

iBooksでは縦書きにすると1ページ目しか表示されなくなります。これはひどいですね。ろくな表示ができないなら黙って横書きにしてくれればいいんですが、「読めない」という最低のユーザービリティでの表示になります。

対応策

さて、kobo向けに縦書きのePubを作成しつつ、iBooks向けにも横書きのePubを作りたいよーという場合のベストプラクティスはこんな感じかしらんと思います。

1. opfを書き換える

opfはePubのメタデータを記述するファイルですが、このspine要素に縦書き用の指定を書く必要があります。厳密には綴じ方向ですね。

<!-- kobo
-->
  <spine page-progression-direction="rtl" toc="nav.xhtml">
<!-- iBooks
  <spine toc="ncxtoc">
-->

この部分をiBooks用とkobo用に二種類書いておいて、書き出し時にコメントの位置をずらすという大変原始的な方法が考えられます。

2. CSSを縦書き用だけわける

縦書きはCSSで指定しますが、基本を横書き用のePubを縦書きePubで上書きするという方針でいきます。iBooks用のePubを書き出すときはcommon.cssのみ読み込み、kobo用のePubを書き出すときはvertical.cssを読み込むという案配です。

<link rel="stylesheet" type="text/css" href="../Styles/common.css" />
<!--
  <link rel="stylesheet" type="text/css" href="../Styles/vertical.css" />
-->

ただ、この方法の問題点はファイル数と修正箇所が比例するので、間違いが起きやすいという点ですね。

iBooksで目次動かない問題

さて、ePub cafeに書いてあったサンプル通りに目次をePub3対応してみましたが、iBooksで動きませんでした。草枕のサンプルをダウンロードしても動いていません。目次をタップしても、必ず1ページ目に移動しちゃうんですね。

目次の横にページ番号が出ていない
目次の横にページ番号が出ていない

これはなんだと考えてみて、色々試してみた結果、暫定的な結論としてはiBooksは目次要素(toc.ncxとかnav.xhtmlとか)をopfファイルと同じ階層(OEBPS直下)に置かないとリンク切れになるというものです。

僕の作ったePubもサンプルのePubも共通していたのは、目次用ファイルをOEBPS > Text > toc.ncxという具合に保存していました。ePub仕様上は問題ない(koboはこれで目次を認識した)はずですが、iBooksは目次のリンク先をopfファイルからのパスとして捉えるようです。これはバグだと思うのですが、どうでしょうか。

で、解決策としては、そのままtoc.ncxの場所を変更することです。はじめはnav要素による目次作成にiBooksが対応していないのかなーと疑ったのですが、どうやらリンク先URLの起点にまつわるものだったようです。

[NG]
OEBPS
├content.opf
└Text
 └toc.nxc

[OK]
OEBPS
├content.opf
├toc.ncx
└Text

これがうまくいくと、ちゃんと目次にページ番号が表示されるようになります。

目次が正しい場合はページ番号が出る
目次が正しい場合はページ番号が出る

というわけで、以上です。

すべての投稿を見る

高橋文樹ニュースレター

高橋文樹が最近の活動報告、サイトでパブリックにできない情報などをお伝えするメーリングリストです。 滅多に送りませんので、ぜひご登録お願いいたします。 お得なダウンロードコンテンツなども計画中です。