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

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

文●古籏一浩

ツイートする

JavaScriptを使ってインタラクティブにする

　最後に、EPUB形式の電子書籍をJavaScriptを使ってインタラクティブ化してみましょう。以降に説明するサンプルはiPad/iPhone用のiBooksでのみ動作します。

　iBooksは限定的ながらJavaScriptとCSS3に対応しています。WebKitをベースとしたレンダリングエンジンを採用しているので基本的な動作はSafariとほぼ同じです（まったく同じではありません。Safariで動作してもiBooksでは動かない場合もあります）。

　今回はシンプルな例として、特定の画像がタップされると、タイトル文字の色と画像を変更するスクリプトを試してみましょう。

　画像がタップされたときに処理を実行するには、以下のようなスクリプトを記述します。addEventListenerを使っても構いませんが、画像を入れ替える場合、後でイベントを解除する必要があります。


document.getElementById("anime").onclick = function(){〜}

　タイトル文字の色は以下のようにスタイルシートプロパティのcolorに色名かカラーコードを設定して変更します。例では文字の色を赤に設定しています。


document.getElementById("header").style.color = "red";

　画像を変更する処理も一般的なWebページの場合と同じです。ただし、iBooksでは画像を一度変更した後にさらに変更しようとすると、画像がまったく表示されない不具合があります（このとき、前後のページに移動して戻ると表示される場合もあります）。


var ele = document.getElementById("anime");
ele.src = "../Images/sunflower.jpg";

　そこで続けてタップされるのを防ぐために、以下のようにしてクリックイベントを消去します。これで画像が表示されない現象を防げます。


ele.onclick = null;

タイトル下の画像をクリックすると……

タイトル文字の色が赤になり、画像も入れ替わる

iPhone (iOS4)のiBooksの場合。画像をクリックするとタイトル文字の色と画像が入れ替わる


<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <script type="text/javascript">
//<![CDATA[
  window.onload = function(){
        document.getElementById("anime").onclick = function(){
             document.getElementById("header").style.color = "red";
             var ele = document.getElementById("anime");
             ele.src = "../Images/sunflower.jpg";
             ele.onclick = null;
        }
  }
  //]]>
  </script>
  
<style type="text/css">
  p.sgc-1 {font-weight: bold; text-align: center; font-size:24pt;}
  div.sgc-2 {text-align: center;}
  div.leftBlock {float:left; width:48%; height: 500px; }
  div.rightBlock {float:right; width:48%; height: 500px; }
</style>
</head>
<body>
  <p class="sgc-1" id="header">パソコン暮らしの小人たち</p>
  <div class="sgc-2">
    <img alt="" id="anime" src="../Images/wave.jpg" /><br />
  </div>
  <div class="leftBlock">
    <p>〜〜〜〜</p>
    <p>〜〜〜〜</p>
  </div>
  <div class="rightBlock">
    <p>〜〜〜〜</p>
    <p>〜〜〜〜</p>
    <p><br /></p>
  </div>
</body>
</html>

　今回紹介したスクリプトはごくシンプルな例ですが、以下のサイトではCSS3と組み合わせたより高度な方法も解説されています。現在のところJavaScriptが動作するビューワーはiBooksだけですが、より幅広いビューワーが対応すれば電子書籍ならではのインタラクティブな表現が手軽にできるようになるでしょう。

・JavaScript and interactivity in iBooks: http://blog.threepress.org/2010/06/24/javascript-and-interactivity-in-ibooks/

終わりに

　本連載では全5回にわたって電子書籍データの作成方法について説明してきました。ここのところ電子書籍への期待は急速に高まっていますが、現状では制作環境の未整備、フォーマットの乱立、リーダーによる表現の制約など、さまざまな課題があることが理解いただけたと思います。

　とはいえ、こうした課題の多くは時間が解決するものでしょう。オーサリングツールなどの制作環境が今後、整備されていくにつれて電子書籍はより作りやすくなるはずでしょうし、あと数年もすればHTML5やCSS3を組み合わせたより多彩な表現ができるようになるはずです。最近ではWebブラウザー上で電子書籍(EPUB)が作成できるプラットホームも登場しています。手軽に電子書籍を発行できる環境が整うことで、電子書籍はWebの制作者にとってもより身近な存在になってくるでしょう。

前へ 1 2 3 次へ