CONTENTS

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

July 20, 2011
Clip to Evernote このエントリーをはてなブックマークに追加
epub3_main.gif

電子書籍の新規格「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", "@ＭＳ 明朝", 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

Validate EPUB

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

■「Google Chrome」で確認

GoogleChrome

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

■「iBooks」で確認

iBooks

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

■「Stanza」で確認

Stanza

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

■「espur（エスパー）」で確認

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に見る日本語組版機能

制作基本チュートリアル

SASAKI Author
| | Comment(0) | Trackback(1)

カテゴリ:

タグ:

Clip to Evernote このエントリーをはてなブックマークに追加

関連記事

トラックバック(1)

ロボット人間の散歩道 - 電子書籍の現状 (2011年11月 1日 01:01)

　電子書籍について昨年、あんなに騒いでいたマスメディア、今年は静かです。 　日本電子出版協会の今月の調査報告（JEPAニュース　174号）を斜め読み... 続きを読む

コメントする


画像の中に見える文字を入力してください。

PageTop