プレミアム自炊のススメ

以前こんな記事を書きました。本の自炊スキャンデータの画像をそのまま並べるだけではなく、一手間加えてインタラクティブな電書にしようという記事です。

当時はhtmlウィジェット形式で作ったのですが、今回はこれをiBooks用のEPUB 3にしてみます。このようなインタラクティブな機能を含んだEPUB 3は、EPUBの規格内ではあるのですが、まだサポートしているリーダ環境はほとんどありません。iBooksはApple独自のインタラクティブブック(iBooks Author)も用意していることもあり、このあたり先行して対応しています。

現時点で汎用のEPUB 3とは言えませんが、実験的に次世代電書を探る意味でも、気に入った本を装丁しなおすような感覚としても、意味はあるのではないかと思います。このような行為を「プレミアム自炊」と呼ぶ提案です。

こんなんできました

さて、ネタはこの写真集。写真とキャプションが見開きになっています。

これをスキャンした画像を使って、1ページ写真1枚の固定フォーマットのEPUBにして、キャプションページは、オーバレイ表示で出すことにします。

iPadの画面キャプチャムービーです。

iPadのiBooksではこんな感じ。EPUBファイルで横方向固定の見開き無しに設定しているので、写真が画面いっぱいに表示されます。

ここがキモです。中央部をタップすると、解説ページがオーバーレイ表示されます。これをjavascriptで制御しています。

表紙はスキャンデータを使わず、本文の写真にhtmlで文字を重ねてみました。文字部分が選択できたりします。

一覧表示にすると、フォトアルバムのように見られます。

iPhoneだとこんな感じ。

iPhone4Sでも文字がかろうじて読めます。

一覧表示。

中身の解説

固定フォーマットEPUBなので、ページごとのxhtmlを作る必要があります。

1ページ分のxhtmlはこんなになってます。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xml:lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=1024, height=693" />
<title>title</title>
<link rel="stylesheet" type="text/css" href="../style/fixed-layout-jp.css" />
<link rel="stylesheet" type="text/css" href="../style/e366.css" />
<script type="text/javascript" src="e366.js"></script>
<style type="text/css">

</style>
</head>
<body>
<div class="main">

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 1024 693">
<image width="1024" height="693" xlink:href="../image/img0001.jpg" />
</svg>
</div>
<div class="tap" id="t_c"></div>
<div id="info"><div id="ii"><img id="info_img" src="../image/t_img0001.jpg" /></div></div>
</body>
</html>

SVGでラップした画像を全画面に貼り付けているのは普通の固定フォーマットEPUBと同じですが、それに加えてタップする領域とキャプション画像を貼るエリアを設定しています。img0001.jpgが写真画像。t_img0001.jpgがキャプションページの画像です。

これをページ数分だけ、366枚作る必要があるのですが、このツールをカスタマイズして、テンプレートから366ページ分のxhtmlを自動生成しました。

xhtmlから使っているスタイルe366.cssは次のようになっています。

body {
	background-color:#494949 ;
}
div.main{
	position:relative ;
	width:1024px;
}
#info {
	position:absolute ;
	overflow:hidden ;
	top:8px ;
	left:112px ;
	width:800px ;
	height:680px;
	background-color:white ;
	opacity:0 ;
	z-index:-1 ;
	-webkit-border-radius:20px ;
	-webkit-transition: opacity 0.3s linear ;
}
#ii {
	position:absolute  ;
	overflow:hidden ;
	top:20px ;
	left:20px ;
	width:760px ;
	height:640px ;
}
div.tap {
	position:absolute ;
	top:10px ;
	height:720px ;
}
#t_c {
	left:312px ;
	width:400px ;
}
svg {
	background-color:#494949 ;
}

ポイントは、キャプション画像を表示するときの透明度アニメーションをCSSで設定している点です。これによって、キャプションがふわっと浮かび上がる効果を出しています。

javascriptファイルの中身はこれだけ

function $(e) {return document.querySelector(e);} ;
onload=function() {
	$('#t_c').addEventListener("touchend",function(ev) {
		$('#info').style.zIndex = "10" ;
		$('#info').style.opacity = 0.8 ;
		ev.preventDefault();
	},false) ;
	$('#info').addEventListener("touchend",function(ev) {
		$('#info').style.opacity = 0 ;
		$('#info').style.zIndex = "-1" ;
		ev.preventDefault();
	},false) ;
}

タッチイベントを拾って、キャプション部分の透明度を制御しているだけです。ポイントは、イベント処理の最後にpreventDefault()を呼んでいることで、これをすることで本来のリーダの機能を抑制します。つまり、キャプションを出すタップ領域をタップしても、メニューがでたりしないようになるということです。

最後にOPFファイルの中身です。これは長いのでリンクではっておきます。

contents.opf

OPFのポイントは、まず、iBooks用として、横向き固定で見開きにしない指定がしてあります。また枠が表示されないようにbindingの指定もしてあります。次の部分です

<!-- Fixed-Layout Documents指定 -->
<meta property="rendition:layout">pre-paginated</meta>
<meta property="rendition:spread">none</meta>
<meta property="rendition:orientation">landscape</meta>

<!-- for iBooks -->
<meta property="ibooks:binding">false</meta>

Javascriptで制御をしているため、manifestセクションで各ページのxhtmlに、properties="scripted svg" を入れることが必要です。

その他の注意としては、jsファイルやキャプションで使っている画像などもmanifestセクションに忘れずに入れることです。

last updated 2013/03/28 12:50

←電書ラボに戻る