固定レイアウトのSVG指定
先日公開した『kindle猫写真集』http://t2aki.doncha.net/?id=1382691748 の固定レイアウト、SVGでの指定について補足自分メモ。
KADOKAWAグループのEPUB制作仕様が公開されたので中を見たところ、画像は固定レイアウトにしてSVGで記述する、ということなのでちょっとだけ調べた。
目次画像用に使ったxhtmlファイル
（画像のサイズは 900x1270 で、画像の中に目次がある）
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>和猫～Japanese Bob Tail</title>
<meta name="viewport" content="width=900， height=1270" />
</head>
<body>
<div>
<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 900 1270">
<image width="900" height="1270" xlink:href="../images/dummy.jpg" />
<a xlink:href="contents001.xhtml" target="_top">
<rect fill-opacity="0.0" x="250" y="930" width="400" height="60" />
</a>
<a xlink:href="contents127.xhtml" target="_top">
<rect fill-opacity="0.0" x="250" y="990" width="400" height="60" />
</a>
</svg>
</div>
</body>
</html>
※KADOKAWAの仕様ではまだ「imageマップは使わない」となっているけど、ibooksなどEPUB3では使えるので目次に使った（クリッカブルマップのSVG版、かな）
上記のxhtml、もろもろ呪文状態で使ってるんだけど
svg（SVGで画像表示の設定。XMLだ）
・viewBox
画像領域のどの部分を切り取るかという指定（画像領域の左上からxyの座標を指定する）上記だと、x座標0、y座標0、幅900、高さ1270
・width height
viewBoxで切り取った画像領域をブラウザ（リーダー）で表示するサイズを指定。上記だと幅100%、高さ100%と目いっぱい表示するように指定（opfや、metaタグのviewportだったりで表示サイズを900x1270に指定してあるので天地左右100%でOK）
image（実際の画像ファイルの指定）
・実際のサイズを指定してファイルを指定する。 HTMLだとimgタグ。
rect（四角領域を作ってクリッカブルマップ）
・xy座標と、幅高さを指定してその四角の中は透明で埋める（fill-opacity）この四角を目次のリンクにする（HTMLのusemapより指定のしかたが分かりやすい）
一枚画像だけのためのxhtmlファイルなので愛想もなにもない短い単純なファイル。
固定レイアウトは画像サイズも揃えるので、画像ファイル名だけが違うxhtmlが画像の数だけ単調に並ぶ。
KADOKAWAのEPUB仕様では、リフローだとspine部で該当ページだけ固定レイアウト指定することになっている。
本文に混じる挿絵や見開き横長挿絵のために固定とリフローの混在がkindleやibooksで使えるようになってからが本番、だな。
KADOKAWA-EPUB PORTAL（EPUB制作仕様ページ）
http://kadokawa-epub.bookwalker.co.jp/home
↑これはかなり細かくて丁寧な資料なので、オススメ。
『おかえりください』
日野裕太郎
[更新]2013-11-18 11:52:30
| << | 2026/3 | >> | ||||
|---|---|---|---|---|---|---|
| 日 | 月 | 火 | 水 | 木 | 金 | 土 |
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 | 31 | ||||
【最近の10件】