EPUB

InDesign CS 5.5 で 縦書きに対応した EPUB 3 の電子書籍作成

電子書籍の新規格「EPUB 3」は、 HTML 5 や CSS 3 をベースにしているため、ビデオやオーディオなどのマルチメディアに対応したコンテンツや、JavaScript によるインタラクティブなコンテンツの作成が可能となります。

また、いままでの EPUB では表現できなかった日本語の縦書きとルビ、圏点などの機能が実装されています。

今回は、EPUB 3 への書き出しに対応している「InDesign CS 5.5」を使用して、EPUB 3 の縦書きとルビ機能を試してみました。

InDesign CS 5.5 から EPUB 書き出し

テキストの素材は、青空文庫さんから太宰治の「走れメロス」をダウンロードしました。ありがとうございます。

青空文庫

InDesign でルビを入れて縦書きで組んでみました(とりあえず組んだので、文字組みに関する突っ込みはナシの方向で)。

本文や見出し、文中の縦中横などを「段落スタイル」と「文字スタイル」で設定しておくと、書き出される CSS にもスタイル設定が引き継がれるので、必ず設定しておく。

各スタイルから「タグを書き出し」で書き出されるタグを編集できるようですね。

「段落スタイル」と「文字スタイル」のオプションメニューから「すべての書き出しタグを編集」を選ぶと、複数のスタイルのタグやクラス名の編集が一括でできるので便利。

スタイルの設定ができたら、EPUB への書き出し。

【ファイル → 書き出し】で「EPUB 書き出しオプション」は、「一般」と「画像」はデフォルトで、「目次」の「CSS オプション」の「埋め込みフォントを含む」はチェックをはずしました(※フォントを埋め込んでも、正常に表示しなかったので)。

Dreamweaver で編集

■ HTML ファイルの編集

EPUB ファイルの拡張子を「.epub」から「.zip」に変更後、解凍。「OEBPS」フォルダにある HTML ファイルを開く。

EPUB ファイルの解凍と圧縮方法は、以前 EPUB に動画を埋め込んだ記事を参考にしてくださいませ。

iPhoneのiBooks用EPUBに動画を埋め込む - STAFF_01 [KYS-LAB]

HTML ファイルを開くと、XHTML 1.1 形式で書き出されてますね。EPUB 3 の記述は HTML 5 ベース(XHTML5)だったはず。InDesign CS 5.5 からは EPUB3 への書き出しにに対応しているとのことだが、このへんはアップグレードで解消されていくのかな? 設定を見落としていたらスミマセン。

とりあえず、HTML 5 の記述に修正していく。

自動で書き出された DTD と html の属性を変更。

(変更前)
<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 //EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
(変更後)
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2011/epub" lang="ja" xml:lang="ja">

link 要素に設定する type 属性も省略できるので削除しました。

(変更前)
<link href="template.css" rel="stylesheet" type="text/css" />
(変更後)
<link href="template.css" rel="stylesheet" />

■ CSS ファイルの編集

つづいて、CSS ファイルを開く。

body タグに縦書きに反映させるベンダープレフィックスを追加(「-epub-」と「-webkit-」)。

body { writing-mode : vertical-rl; -epub-writing-mode : vertical-rl; -webkit-writing-mode : vertical-rl; }

■メモ( writing-mode のプロパティ)

このプロパティは行送り方向を設定する。

horizontal-tb 行送り方向は上から下。横書き。 vertical-rl 行送り方向が右から左。縦書き。 vertical-lr 行送り方向が左から右。縦書き。

Windows では MS 明朝以外のフォントでは縦書きにならなかったので、使用フォントを変更。

font-family : "Hiragino Mincho ProN W3", "@MS 明朝", serif;

本文の文字サイズをブラウザ標準サイズの 1em に。

font-size : 1em;

■ content.opf ファイルの編集

タイトルと著者名を追加。

<dc:title> 走れメロス</dc:title> <dc:creator> 太宰治</dc:creator>

EPUB の確認

現時点では EPUB 3 に対応した正式なリーダーがまだ出ていないとのことなので、EPUB 3 に対応した Web ブラウザ「Google Chrome」で確認。その他、バリデートや各種リーダーでもどのように表示するのか一応確認してみました。

■「Validate EPUB」で確認

とりあえず、修正した EPUB が正しいのか、「Validate EPUB」でチェックしてみました。

「Validate EPUB」は、EPUB をバリデートして構文チェックをしてくれる便利な Web サービスです。 Validate EPUB

エラーでまくり。。。(140個も) まだ EPUB 3 には対応していないのか、「ruby」要素は許容してないよ的なエラー内容も。

■「Google Chrome」で確認

気をとりなおして「Google Chrome」で確認。お、縦書きで表示されますね。ルビもちゃんとふられてます。

■「iBooks」で確認

現時点(2011.7.20)では、EPUB 3 に対応してませんが、iPhone の「iBooks」で一応確認。うーん、やはり縦書きで表示されない。

■「Stanza」で確認

「Stanza」でも確認。やはり縦書きで表示されませんでした。

■「espur(エスパー)」で確認

EPUB 3.0 に対応している PC 専用リーダー「espur(エスパー)」で確認。あ、縦書きで表示されていますね。ページ送りは逆になってましたが。サンプルの「草枕」ではきちんとページ送りできていたので、ボクの設定がおかしいんだと思います。

espur(エスパー):縦書き用電子書籍リーダー/eBook Reader for EPUB3(EPUB Enhancements for Japanese Text Layout)

■Murasaki

今回は検証してませんが、Mac な方には「Murasaki」という EPUB リーダーが縦書きに対応しているそうです。

Murasaki - Simple EPUB Previewer

感想

InDesign 5.5 になって、EPUB の書き出しがかなり便利になっていますが、完全に自動化ってわけにはいきませんね。

EPUB 3 については、対応したリーダーが出ていないので、広がっていくのはもう少し先かもしれません。今回は正式なマニュアルもなく、自分で調べた範囲内で制作したので、工程で間違っている箇所もあるかと思います。コメント等で突っ込んでいただけたら嬉しいです。

サンプルソース(追記)

HTML と CSS のソースは、「jsdo.it」に上げときました。

走れメロス - jsdo.it - Share JavaScript, HTML5 and CSS

参考サイト

EPUB 3.0 - 電子書籍の表現力

EPUB 3に見る日本語組版機能

制作基本チュートリアル

InDesign CS 5.5 で 縦書きに対応した EPUB 3 の電子書籍作成

電子書籍の新規格「EPUB 3」は、 HTML 5 や CSS 3 をベースにしているため、ビデオやオーディオなどのマルチメディアに対応したコンテンツや、JavaScript によるインタラクティブなコンテンツの作成が可能となります。

また、いままでの EPUB では表現できなかった日本語の縦書きとルビ、圏点などの機能が実装されています。

今回は、EPUB 3 への書き出しに対応している「InDesign CS 5.5」を使用して、EPUB 3 の縦書きとルビ機能を試してみました。

InDesign CS 5.5 から EPUB 書き出し

テキストの素材は、青空文庫さんから太宰治の「走れメロス」をダウンロードしました。ありがとうございます。

青空文庫

InDesign でルビを入れて縦書きで組んでみました(とりあえず組んだので、文字組みに関する突っ込みはナシの方向で)。

本文や見出し、文中の縦中横などを「段落スタイル」と「文字スタイル」で設定しておくと、書き出される CSS にもスタイル設定が引き継がれるので、必ず設定しておく。

各スタイルから「タグを書き出し」で書き出されるタグを編集できるようですね。

「段落スタイル」と「文字スタイル」のオプションメニューから「すべての書き出しタグを編集」を選ぶと、複数のスタイルのタグやクラス名の編集が一括でできるので便利。

スタイルの設定ができたら、EPUB への書き出し。

【ファイル → 書き出し】で「EPUB 書き出しオプション」は、「一般」と「画像」はデフォルトで、「目次」の「CSS オプション」の「埋め込みフォントを含む」はチェックをはずしました(※フォントを埋め込んでも、正常に表示しなかったので)。

Dreamweaver で編集

■ HTML ファイルの編集

EPUB ファイルの拡張子を「.epub」から「.zip」に変更後、解凍。「OEBPS」フォルダにある HTML ファイルを開く。

EPUB ファイルの解凍と圧縮方法は、以前 EPUB に動画を埋め込んだ記事を参考にしてくださいませ。

iPhoneのiBooks用EPUBに動画を埋め込む - STAFF_01 [KYS-LAB]

HTML ファイルを開くと、XHTML 1.1 形式で書き出されてますね。EPUB 3 の記述は HTML 5 ベース(XHTML5)だったはず。InDesign CS 5.5 からは EPUB3 への書き出しにに対応しているとのことだが、このへんはアップグレードで解消されていくのかな? 設定を見落としていたらスミマセン。

とりあえず、HTML 5 の記述に修正していく。

自動で書き出された DTD と html の属性を変更。

(変更前)
<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 //EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
(変更後)
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2011/epub" lang="ja" xml:lang="ja">

link 要素に設定する type 属性も省略できるので削除しました。

(変更前)
<link href="template.css" rel="stylesheet" type="text/css" />
(変更後)
<link href="template.css" rel="stylesheet" />

■ CSS ファイルの編集

つづいて、CSS ファイルを開く。

body タグに縦書きに反映させるベンダープレフィックスを追加(「-epub-」と「-webkit-」)。

body { writing-mode : vertical-rl; -epub-writing-mode : vertical-rl; -webkit-writing-mode : vertical-rl; }

■メモ( writing-mode のプロパティ)

このプロパティは行送り方向を設定する。

horizontal-tb 行送り方向は上から下。横書き。 vertical-rl 行送り方向が右から左。縦書き。 vertical-lr 行送り方向が左から右。縦書き。

Windows では MS 明朝以外のフォントでは縦書きにならなかったので、使用フォントを変更。

font-family : "Hiragino Mincho ProN W3", "@MS 明朝", serif;

本文の文字サイズをブラウザ標準サイズの 1em に。

font-size : 1em;

■ content.opf ファイルの編集

タイトルと著者名を追加。

<dc:title> 走れメロス</dc:title> <dc:creator> 太宰治</dc:creator>

EPUB の確認

現時点では EPUB 3 に対応した正式なリーダーがまだ出ていないとのことなので、EPUB 3 に対応した Web ブラウザ「Google Chrome」で確認。その他、バリデートや各種リーダーでもどのように表示するのか一応確認してみました。

■「Validate EPUB」で確認

とりあえず、修正した EPUB が正しいのか、「Validate EPUB」でチェックしてみました。

「Validate EPUB」は、EPUB をバリデートして構文チェックをしてくれる便利な Web サービスです。 Validate EPUB

エラーでまくり。。。(140個も) まだ EPUB 3 には対応していないのか、「ruby」要素は許容してないよ的なエラー内容も。

■「Google Chrome」で確認

気をとりなおして「Google Chrome」で確認。お、縦書きで表示されますね。ルビもちゃんとふられてます。

■「iBooks」で確認

現時点(2011.7.20)では、EPUB 3 に対応してませんが、iPhone の「iBooks」で一応確認。うーん、やはり縦書きで表示されない。

■「Stanza」で確認

「Stanza」でも確認。やはり縦書きで表示されませんでした。

■「espur(エスパー)」で確認

EPUB 3.0 に対応している PC 専用リーダー「espur(エスパー)」で確認。あ、縦書きで表示されていますね。ページ送りは逆になってましたが。サンプルの「草枕」ではきちんとページ送りできていたので、ボクの設定がおかしいんだと思います。

espur(エスパー):縦書き用電子書籍リーダー/eBook Reader for EPUB3(EPUB Enhancements for Japanese Text Layout)

■Murasaki

今回は検証してませんが、Mac な方には「Murasaki」という EPUB リーダーが縦書きに対応しているそうです。

Murasaki - Simple EPUB Previewer

感想

InDesign 5.5 になって、EPUB の書き出しがかなり便利になっていますが、完全に自動化ってわけにはいきませんね。

EPUB 3 については、対応したリーダーが出ていないので、広がっていくのはもう少し先かもしれません。今回は正式なマニュアルもなく、自分で調べた範囲内で制作したので、工程で間違っている箇所もあるかと思います。コメント等で突っ込んでいただけたら嬉しいです。

サンプルソース(追記)

HTML と CSS のソースは、「jsdo.it」に上げときました。

走れメロス - jsdo.it - Share JavaScript, HTML5 and CSS

参考サイト

EPUB 3.0 - 電子書籍の表現力

EPUB 3に見る日本語組版機能

制作基本チュートリアル