iBooks 3.0 で縦書きでepubを表示する方法

追記: 2013/2/22 見開きの方向だけではなくて縦に表示する方法も書きました。

本日、MacBook Pro with Retina Display 13インチ、Mac mini, iMac, iPad 4th Generation, iPad Miniと、多くのハードウェアが発表されました。Apple – Apple Events – Apple Special Event October 2012
ソフトウェアのアップデートで、日本語の縦書きがサポートされたことも発表されました。
が、しかし、iBook Storeには、日本語の縦書きの本は見つかりませんでした。epub 3.0で対応された縦書きの方式で書き出されている必要があり、縦書きで実際に本を読むまで一苦労だったのでまとめてみました。

まず、ePubのデータを探してみました。
みんなで作るePubファイル投稿・共有サイト(ベータ) – ePubファイル (Powered by ClipBucket) ここにたくさんepubのデータがあります。試しに、銀河鉄道の夜をダウンロードしてみると、横書きのデータでした。

次に、夏目漱石の「こころ」をダウンロードしてみると、縦書きになったものの、右綴じで、ページめくりの方向が逆で変な感じです。

ウェブサイトを見てみると、こんな注釈が。

左綴じになっています。右綴じにするにはcontent.opfのをにしてください。

おぅ、これを編集してあげればいい訳ですね。Macで、epubファイルをダウンロードして、拡張子を.zipに変更して、OEBPSフォルダの、content.opfを見てみると、


となっている部分があったので、これを、

に変えてあげました。そしてフォルダをzipに戻して、epubファイルに拡張子を変更して、メールでiPadに送って、iBooksで開いてあげると、ちゃんと縦書き、左とじで表示できました！

追記:2013/2/22
上の設定だけでは、見開きの方法が変わるのみです。文字を縦書きに設定するには、ファイル内の css すべてに対して、bodyに縦書き設定をしてあげることにより、縦書きが出来ました。
body {
writing-mode: vertical-rl;
-epub-writing-mode: vertical-rl;
-webkit-writing-mode: vertical-rl;
}
bodyの無いcssにはbodyを追加しました。実際すべてのcssに設定する必要があるかははっきりしないのですが、default.cssだけ設定してもうまく行かなかったので、全部設定しました。

ちょっと手順が面倒ですが、iBooksには、書籍用書体「游明朝体」と「游ゴシック体」が搭載されていて、とてもきれいな文字で本を読めそうですね。ルビなどもちゃんと表示されていました。

iBooks 3.0 に、史上最高に美しい書籍用書体「游明朝体」と「游ゴシック体」を搭載しました。ヒラギノ共々末永く可愛がってください。

— 木田泰夫さん (@kidayasuo) 10月 24, 2012

一つ気になったのは、ボタンを押したときに、ボタンが押された状態で止まった状態になる現象が多かったです。バックグラウンドで動いていないので、サクサク動いていない気がしました。これも iPad 4th Gen だと処理速度で改善されるのでしょうか。