最近は自作品をePubにして売るのと並行して、ePubをWordPressのコンテンツから適当にバンドルして書き出す機能を作っています。かれこれ3ヶ月ぐらい完成していないんですけどね。
さて、すっかり呆れられている楽天koboですが、ePubビューアーとしてはわりと高性能のような気がします。縦書きもちゃんと表示されてますし、僕には文字組もわりかしちゃんとしているように見えます。
iBooks縦書きできない問題
さて、koboが縦書きに対応しているので「よーし、パパ縦書きePub作っちゃうぞー」となりがちですが、なんとiOSのePubビューアiBooksは縦書きに対応していません。厳密には中途半端に対応しているため、下手に縦書きePubを作ってしまうと大変なことになります。
iBooksでは縦書きにすると１ページ目しか表示されなくなります。これはひどいですね。ろくな表示ができないなら黙って横書きにしてくれればいいんですが、「読めない」という最低のユーザービリティでの表示になります。
対応策
さて、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
これがうまくいくと、ちゃんと目次にページ番号が表示されるようになります。
というわけで、以上です。