ePubnav

この投稿は4年半前の記事です。 情報が古くなっている可能性があるので、その点ご了承ください。
2012 年 9 月 10 日 1,718日前)
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

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

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

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

 

フォローしてください

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

SPONSORED LINK

この記事について

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

高橋先生の電子書籍

高橋先生の電子書籍

Amazonで電子書籍も買えます。

好きな言葉

神だって人間を創るとき、新たな創作ができなかったのか敢えてそうしなかったのかは知らぬが、いずれにせよ自分の姿に似せて創った。だからこそ、同時代の作家から一場面をそっくり盗み出していることがあるとアホな批評家に非難されたとき、シェイクスピアはこんな言葉を口にできたのである。「私はうら若い娘さんをお下劣な連中とのつきあいから救い出して上品な社会に入れてやったのです!」同様の批判を受けたとき、これも同じ理由からモリエールはもっと素朴にこう答えている。「俺は見つけたらすぐ自分の財産にする」シェイクスピアもモリエールも正しい。才能あるものは盗まず、奪い取るからである。

— アレクサンドル・デュマ

高橋先生の処女作

『途中下車』高橋文樹

2001年幻冬舎NET学生文学大賞受賞作です。

Web制作やります

Web制作やります

Web制作のご依頼は株式会社破滅派へ

不定期メルマガ

高橋文樹.comでは、不定期でニュースレターを配信しています。滅多に送らないので是非購読してください。

高橋文樹.comではプライバシーポリシーに準じて登録情報を取り扱います。