このページの本文へ

JavaScriptで作るインタラクティブな電子書籍 (2/3)

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のみ対応)。

この連載の記事

一覧へ

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