このページの本文へ

JavaScriptで作るインタラクティブな電子書籍

2010年09月06日 10時00分更新

古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

EPUB形式のデータを作成する

 EPUB形式のデータはこれまでと同じく「Sigil」を使って制作します。ドキュメントを作成し、テキストを流し込んだらtableタグを使って2段組にしていきます。

Sigilを使って2段組にレイアウトする

 段組みのようなレイアウト処理は本来、tableタグでなくCSSを使うのが理想ですが、CSSで段組みするとiBooksでは一部のテキストが欠ける不具合があるので、今回はtableタグを使います。また、EPUBのCSSでは使用できるプロパティに制限があるので複雑なレイアウトが難しい、という事情もあります(第3回を参照)

 tableタグを使って段組みする場合も、いくつか制限があります。まず、1ページの表示領域に合わせてtableの高さを指定しないと、ページ内に段落の内容が収まらず、次のページにはみ出してしまいます。

iBooksでの表示。1ページ目の段組の内容が2ページ目に表示されている
Stanzaでの表示。tableタグによるレイアウトだが、iBooks同様に2ページ目に段組の内容が表示され、一部のテキストが欠けている

 文字サイズを小さくすると今度はページの途中までしか段組が表示されず、余分な余白が発生します。

文字サイズを変更すると段組の内容が切れてしまったり、余白が出てしまったりして期待通りにならない

 EPUBで段組を実現するにはビューワーに合わせた細かい調整と作り込みが必要で、現状はあまり実用的ではありません。

 一方、動画ついてはPDFの場合と同様、サーバー上の動画ファイルへハイパーリンクを設定することで対応できます。リンクをクリックするとSafariが起動して動画が再生されます。また、簡単なアニメーションでよければアニメーションGIF画像を貼り付ける方法もあります(アニメーションGIFはiBooksのみ対応)。

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く