このページの本文へ

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

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

古籏一浩

  • この記事をはてなブックマークに追加
本文印刷
(C) David Sifry/CC Attribution 2.0 Generic

 さまざまな電子書籍の作り方を紹介してきた本連載も今回で最終回。今回は動画やインタラクティブな要素を含む、複雑なレイアウトの電子書籍データに挑戦します。

■連載ラインナップ

  1. 文字のみ(小説、文学作品など)
  2. 画像のみ(漫画、絵本)
  3. 文字+画像(挿し絵付きの小説や写真集など)
  4. 文字+画像+図版(SVG)(技術書、教科書など)
  5. 動画を含む複雑なレイアウトおよびインタラクティブ要素を含むもの(雑誌など) ←今回作成する電子書籍データ

 複雑なレイアウトができる電子書籍のフォーマットは限られているので、今回は以下の2つの形式のデータを作成します。レイアウトが指定できないテキスト形式やKindleのAZW/MOBI形式は対象外です。

  • PDF
  • EPUB

PDF版の電子書籍を作成する

 最初にPDFデータを作成します。元データを作成するアプリケーションは何でも構いませんが、複雑なレイアウト作業には多くの雑誌や書籍の制作に使われているInDesignが便利です。InDesignでテキストを配置し、QuickTime形式(H264エンコード、192×108ピクセル)の映像(動画)をドキュメント内に配置します。

InDesignでレイアウトを作成する。中央は画像ではなく動画を配置している

 レイアウトが済んだらInDesignからPDF(インタラクティブ)形式に書き出します。作成したPDFをAcrobatで表示したのが以下の画面です。動画のサムネイル部分をクリックすると再生が始まります。

Acrobat 9で表示した。中央の動画サムネイルをクリックすると再生が始まる

 作成したPDFをMac OS Xのプレビューで開くと、PDF内に配置した動画のサムネイル部分が表示されず空白になります。当然、再生もできません。

Mac OS Xのプレビューで表示。動画部分が表示されていない

 この現象は、iPadのiBooksや他のPDFリーダーでも同様です。PDFに埋め込んだ動画はアドビ純正のAcrobatかAdobe Readerでしか表示・再生できません。

iBooksでも動画部分が表示されない
CloudReadersでの表示GoodReaderでの表示
i文庫HDでの表示PDFReaderでの表示
PDFReader Proでの表示

 そこでiPadのiBooksでも動画を再生するための策として、動画の代わりにJPEG画像を配置し、サーバー上にある動画ファイルへのハイパーリンクを設定します。InDesignでハイパーリンクを設定するには、画像を選択した状態でハイパーリンクのパネルにURLを入力します。

画像にハイパーリンクを設定しネット上にある動画を再生するようにする

 ハイパーリンクを設定したInDesignドキュメントをPDFに書き出してMac OS XのプレビューやAcrobatで確認すると、以下の画面のようになります。PDF内の画像をクリックするとブラウザーが起動して動画が再生されます。

画像をクリックするとブラウザーが起動して動画が再生される

 iPadのiBooksでも動作を確認してみましょう。画像をタップすると以下のような確認メッセージが表示され、「開く」を選ぶとSafariが起動して動画が再生されます。ただ、それまで起動していたiBooksがいったん終了してしまうので、読者の使い勝手はよくありません。

iBooksでは画像をクリックするとSafariが起動して動画が再生される

 iPad上で動くPDFリーダーでは「GoodReader」が制作者の期待に近い動作をします。画像にタップするとGoodReaderの中で動画が再生され、iBooksのようにアプリケーションが終了することはありません(本当はPDFの中に動画を埋め込んで再生できるのがベストですが)。

GoodReaderではアプリケーションを終了せずに動画を再生できる

 続いて次ページではEPUB形式のデータ制作に挑戦します。

Web Professionalトップページバナー

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

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

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