楽天koboコンテンツ制作ガイド
1. EPUB2とEPUB3の違い 2. OPFにおける注意点
3. 目次の作り方 4. 組版表現Tips
5. 固定レイアウトの礼儀
固定レイアウトの礼儀（1/7）
• EPUB3固定レイアウトの仕様
•
最新版のIDPF仕様（2012.03.13）に準拠してください - http://idpf.org/epub/fxl/
<meta property="rendition:layout">pre-paginated</meta>
•
日本語版Koboビューワーは、旧仕様には対応していません
IDPF FLドラフト：
<meta property=“layout:fixed-layout”>true</meta>
iBooks向け仕様（EPUB2.01?）：
META-INF/com.apple.ibooks.display-options.xml
【参考】海外Kobo向け仕様：
META-INF/com.kobobooks.display-options.xml
固定レイアウトの礼儀（2/7）
• EPUB3固定レイアウトの例（OPF その1）
• <package
xmlns=http://www.idpf.org/2007/opf version=“3.0”
xml:lang=“ja”
unique-identifier=“unique-id”
prefix="rendition: http://www.idpf.org/vocab/rendition/#”>
• <metadata xmlns:dc=http://purl.org/dc/elements/1.1/>
<meta property=“rendition:layout”>pre-paginated</meta>
<meta property=“rendition:spread”>landscape</meta>
…
</metadata>
固定レイアウトの礼儀（3/7）
• EPUB3固定レイアウトの例（OPF その2）
• <spine page-progression-direction=“rtl”>
<itemref linear=“yes” idref=“p-cover”
properties=“rendition:page-spread-center”/>
<itemref linear=“yes” idref=“p-white”
properties=“page-spread-right”/>
<itemref linear=“yes” idref=“p-001”
properties=“page-spread-left”/>
…
</spine>
固定レイアウトの礼儀（4/7）
• EPUB3固定レイアウトの例（XHTML）
• <head>
<meta name=“viewport” content=“width=848, height=1200”/>
…
</head>
• <body>
<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 848 1200”>
<image width=“848” height=“1200” xlink:href=“../image/i-001.jpg”/>
</svg>
</body>
固定レイアウトの礼儀（5/7）
• クリッカブルマップ その1
• <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 848 1200”>
<image width=“848” height=“1200” xlink:href=“../image/i-001.jpg”/>
<a xlink:href=“p-002.xhtml” target=“̲top”>
<rect fill-opacity=“0.0” x=“476” y=“1000”
width=“300” height=“60”/>
</a>
<a xlink:href=“p-colophon.xhtml” target=“̲top”>
<rect fill-opacity=“0.0” x=“476” y=“1075”
width=“300” height=“60”/>
</a>
</svg>
固定レイアウトの礼儀（6/7）
• クリッカブルマップ その2
•
外部SVGファイルをXHTMLから参照する方法も可能です
<object data=“imagemap.svg” type=“image/svg+xml”
width=“768” height=“1024”>
<img src="imagemap.jpg"/>
</object>
•
外部SVGファイルにする場合はXML宣言が必要
<?xml version=“1.0” encoding=“UTF-8”?>
<svg …>
（拡張子は「.svg」でも中身はXML形式になります）
•
OPFで直接SVGファイルを指定する方法はおススメしません
固定レイアウトの礼儀（7/7）
• 固定レイアウト制作時の注意点
•
画像サイズは出来るだけ揃えて下さい
• 現在のKoboビューワーでは、縦横比が違う画像が混ざると、
正しく表示されない場合があります
•
大き過ぎる画像サイズは控えて下さい
• 高さが1600pxを超えるような画像の場合、解像度が低い kobo Touch などではキレイに表示出来ない場合があります
• 画像サイズが大きくなると、表示に時間がかかる場合があります
•
リフロー型（文字モノ）を混在しないで下さい
• 現在のKoboビューワーでは、リフロー型のページが混ざると、
正しく表示されない場合があります