クリエイター手抜きプロジェクト[247]iPad編iPad+iBooks上でJavaScriptを使う/古籏一浩

投稿:  著者:  読了時間:5分(本文:約2,100文字)


電子書籍リーダー(端末/アプリケーション)はいくつかありますが、その中でiPad/iPhoneのiBooksはJavaScriptを動作させることができます。

iBooksで閲覧できる形式はEPUBとPDFがあります。EPUBは、XHTML+CSS+書籍情報を組み合わせたものをZIP圧縮したものです。XHTML+CSSであればJavaScriptだって動作してもおかしくないと考えた人はいるみたいで先月(6月24日付)以下のページでXHTML+CSS3+JavaScriptのサンプルコードが公開されています。

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

実際にいくつかのコードを書いてみました。以下の例では、文字の色を青に文字サイズを48ptにします。
コードはXHTML内に<script>タグで埋め込んでいます。



・XHTML部分
<p id="mainTitle">デジタルクリエイターズ</p>

・スクリプト部分
window.onload = function(){
var ele = document.getElementById("mainTitle");
ele.style.color = "blue";
ele.style.fontSize = "48pt";
}


イベントも上記のようなページが読み込まれた時(load)やクリック(iPadなのでタッチイベントにもなる)にも反応させることができます。文字を入れ替えることもできます。ページが表示されたら、現在の日時を表示するには以下のように書きます(XX年XXX月という形式にしたい場合は、もう少し長くなります)。


window.onload = function(){
var ele = document.getElementById("mainTitle");
ele.innerHTML = "今日は"+(new Date());
}


タイマーを使ってリアルタイムに時計を表示することもできます。


window.onload = function(){
setInterval(function(){
var ele = document.getElementById("mainTitle");
ele.innerHTML = "今日は"+(new Date());
}, 1000);
}


ただ、画像の入れ替えは注意が必要です。特定の画像を入れ替えると、最初は成功しますが2回目の入れ替えは表示されず失敗します。例えば、以下のコードは一般的なブラウザでは動作しますが、iBooksでは動作しません。


window.onload = function(){
var count = 0;
setInterval(function(){
var ele = document.getElementById("myImg");
ele.src = "../Images/"+count+".jpg";
count = (count + 1) & 3;
}, 1000);
}


静止画からGIFアニメーションに入れ替えた場合も、同様に最初の表示に失敗します。GIFアニメーションの場合、他のページに移動してから戻ってくるとアニメーションが再生されます。

iBooksのJavaScriptで何が動作して何が駄目なのか、どこかにまとまってリファレンスなどがあればよいのですが。ただ、クリックで何か画像を入れ替える、時間に応じて内容を変化させるということはできるので、もしiBooks用のEPUBを作るのであれば、遊び心でやってみるのもよいかもしれません。


【古籏一浩】openspc@po.shiojiri.ne.jp
< http://www.openspc2.org/ >

「借りぐらしのアリエッティ」観てきました。題名からして、ありえるって感じの話でした(苦しいダジャレ......)。「Toy Story 3」も観てきました。初めて3D映画見ましたが、2Dとあんまり変わらないという感じでした。奥行きがあるというより、そういうのが普通に見えるという(飛び出し感は少ない)。

・ハイビジョン映像素材
< http://footage2.openspc2.org/HDTV/footage/HD/60p/ >

・Adobe Illustrator CS3 + JavaScript 自動化サンプル集 発売中
< http://www.openspc2.org/book/PDF/Adobe_Illustrator_CS3_JavaScript_Book/ >

・電子書籍作成用ページ
< http://www.openspc2.org/eBook/index.html >

・1980年代からのmzユーザーに送るtiny XEVIOUS for 700の制作昔話
PDF、EPUB、AZW(Kindle)、プレーンテキスト、i文庫HD用テキスト、InDesignファイル含む
< http://digiconcart.com/dccartstore/cart/info/2561/40462 >