2011年07月20日18時42分

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

  • このエントリーをはてなブックマークに追加
  • Pocket

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

 

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

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

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

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

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

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

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

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

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

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

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.本文を傍点を追加する

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

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

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

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

3.画像を挿入する

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

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

4.EPUB形式に変換しよう

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

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

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

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

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

 

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


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

EPUB3.0で電子書籍を作ってみよう

↑フューズネットワークの電子書籍オーサリングソフト『FUSEe β』は、EPUB3.0にいち早く対応。
 現在、機能限定版で無料で公開している。こちらも、作成するにはHTMLやCSSに関する知識が必要ですが、同人誌の電子出版などを本気で考えているという人は試してみてはどうでしょう?

→電子書籍オーサリングソフト『FUSEe β』

 
 最後に、自分で作るのはちょっとなー、という人向けに、お試し版として週アスPLUSの記事をEPUB3.0版で作成してみました。閲覧はEPUBビューア『espur(エスパー)試作版 v0.8』を使います。下記からダウンロードしてインストールして体験してみてください。

※今回のお試し版は『espur(エスパー)試作版 v0.8』で閲覧した場合、縦書き表示で見づらい部分があるため、横書きの表示にしてあります。あらかじめご了承ください。

EPUB3.0で電子書籍を作ってみよう

→EPUB3.0お試し版『週アスPLUS WWDC2011レポート』

→読むには、EPUBビューア『espur(エスパー)』をダウンロード!

 

関連記事

あわせて読みたい

follow us in feedly
スマホやタブレットからはniconicoアプリをダウンロードのうえ、こちらからご覧ください

最新のニュース

アスキーストア人気ランキング

特集

Comic

アクセスランキング

Like Ranking

BEST BUY

みんなが買っている最新アイテムはこれだ!