期待の電子書籍フォーマット『EPUB3.0』で電子書籍を作ってみよう

2011年07月20日 18時42分更新

　今夏正式リリース予定の電子書籍フォーマット『EPUB3.0』。
　西田宗千佳氏の『EPUB3.0で電子書籍はどう変わる？』インタビューに続き、簡単にEPUB3.0を体験できる作成方法を、【入門編】、【応用編】にわけて紹介していきます。

●入門編　簡単にEPUB3.0の縦書きファイルをつくってみる

　EPUB3.0で追加される目玉仕様のひとつ、そして日本語圏にとって大きな意味を持つ“日本語の縦書き”を、Google Chromeを使って手軽に体験してみましょう。
　素材として利用するのは『青空文庫』。『青空文庫』のxhtmlファイルは、構造化されており、ルビのタグも含まれているので、一部だけを書き換えてcssと組み合わせることで、縦書きのEPUBデータが簡単につくれます。

1.cssファイルをダウンロードする

『epubcafe　草枕を作ろう縦書きHTML簡単作成ガイド』からcssファイルをダウンロード。“writing-mode”の値で、“tb-rl”を指定すると縦書きになります。

2.リンクや漢字コードを変更する

青空文庫のデータを使用する時は、上の図のように、ヘッダー部と漢字コードを、“utf- 8”に書き換えればOK。これだけで縦書きファイルのできあがり！

3.Google Chromeで表示を確認する

2.で書き換えたファイルを、Google Chromeで開いてみましょう。縦書きやルビがちゃんと表示されます！

　ここまでできたら、次は画像や傍点をくわえた【応用編】へ！

●EPUB3.0データ作成　応用編
　入門編で作成したファイルにさらに手を加えて、画像や傍点を含んだEPUBを作成してみます。タグの入力がいくつか必要になるので、入門レベルのhtmlの知識がある人向き。
　ファイルの作成が完了したら、Google Chromeで表示を確認します。最後にEPUB生成のWebサービスを利用して、すべてのファイルをまとめてEPUBに仕上げましょう。

1.cssファイルを編集する

/* --- --- */

p {
text-indent: 1em;
margin: 0;
}

img.sample {
float: left;
padding: 0 1.75em 1.5em 1.75em;
}

H1 {
text-indent: 1em;
}

H2.author {
text-align: right;
padding-bottom: 1em;
}

H3 {
text-indent: 10%;
}

H4 {
text-indent: 10%;
}

span.sesami {
text-emphasis-style : sesame;
text-emphasis-color : #333333;
-epub-text-emphasis-style : sesame;
-epub-text-emphasis-color : #333333;
-webkit-text-emphasis-style : sesame;
-webkit-text-emphasis-color : #333333;
}

　上記をコピーして、入門編の1.でダウンロードしたcssファイルに追加します。

2.本文を傍点を追加する

傍点をふる場合は、傍点をふりたい部分を、“text-emphasis-style”を設定したスタイルで囲みましょう。cssで設定しているスタイルを変更すれば、色をつけたり傍点の形を変更することも可能です。

文章に傍点が追加されました！　cssで設定しているスタイルを変更すれば、色をつけたり傍点の形を変更することもできます。

3.画像を挿入する

好みの画像を用意し、画像を表示したい場所に“img”タグを挿入。ここまでできたら、一度Chromeで表示を確認してみましょう。

4.EPUB形式に変換しよう

表示に問題が無ければ、EPUB生成サービス『epubpack』を使って、ファイルをEPUB形式に変換します。
※『epubpack』で作成したEPUBファイルは、変換後に自動的にサイトに登録され公開されるので注意。

5.EPUBビューアで閲覧してみる

EPUB3.0に対応したEPUBビューア『espur（エスパー）』をダウンロード。
インストールしたら、作成したEPUBファイルを表示してみよう。
_{※『espur（エスパー）』は試作版のため、ページ境界や行をまたいだ場合に文字や画像の表示が乱れる場合があります。また、WebKitを利用しているため、白紙ページが表示される場合があります。詳細は『espur（エスパー）』のサイトでご確認ください。}

　以上、駆け足ではありましたが、EPUB3.0でつくる電子書籍講座でした！

　なお、今回紹介した作り方のほかにも、ツールなどを使った作り方もあります。　