ePubnav

Hi, I detected your main language is not Japanese. I have an english version of about me, so please try it!

この投稿は4年半前の記事です。 情報が古くなっている可能性があるので、その点ご了承ください。
2012 年 9 月 10 日 1,786日前)
2,014文字 (読了時間5分)

SPONSORED LINK

最近は自作品を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

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

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

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

 

SPONSORED LINK

この記事について

この記事はが2012 年 9 月 10 日にデザインの記事として公開しました。

フォローしてください

ここで会ったのもなにかの縁。
高橋文樹.comの最新情報を見逃さないためにもフォローをお願いします。
めったに送らないメルマガもあります。