楽天kobo コンテンツ制作ガイド
Vol.01 Feb/20/2013
Shinya Takami, Ph.D. / Koji Ishii
eBook Service Development Group, Rakuten, Inc. http://www.rakuten.co.jp/
講師プロフィール
高見 真也
Shinya Takami, Ph.D.
博士（情報学）／
JAGAT認証DTPエキスパート
2007年に楽天技術研究所の初期メ ンバーとしてジョイン。2011年に
「Raboo」の立ち上げを手伝うため に電子書籍の世界へ。Panasonic社 製端末向けXMDF/dotBookビュー ワーおよびkobo Touch向け日本語 EPUB3ビューワー開発の陣頭指揮 をとる。Kobo端末向けの日本語 フォント選定なども担当。
石井 宏治
Koji Ishii
W3C/CSS WG エディタ
2012年に楽天イーブックジャパン 事業にジョイン。Kobo Touch/glo/ miniなどのeReaderデバイスおよび Android/iOSアプリのReading Experience全般を担当。CSS Text, CSS Text Decoration, CSS Writing Modes及び縦書時の文字 回転を規定するUnicode UTR#50 のエディタとしても活躍中。
本日の内容
• 楽天koboサービス・プロダクトの紹介
• 楽天koboコンテンツ制作ガイド
• EPUB2とEPUB3の違い
• OPFにおける注意点
• 目次の作り方
• 組版表現Tips
• 固定レイアウトの礼儀
• Kobo向けの推奨指定
• Koboにおける制約事項
• EPUBファイルの検証
• 標準化動向
• 質疑応答
楽天koboサービス・プロダクトの紹介
By Shinya Takami
2011年8月に「Raboo」をオープン
同じく2011年に「kobo」の買収を発表
「Raboo」から「kobo」へ
なぜ、「EPUB」か？
• 現実的な理由として
• 2種類もしくは3種類のフォーマットは多過ぎる
• 複数のプラットフォームを考慮した開発の負荷が高い
• 「kobo」はグローバル・プラットフォーム
• 日本独自の機能や要素は極力減らしたい
• ACCESS社のEPUB3ビューワーエンジンの採用
• 電子書籍の普及のために
• 電子化コストの低減に期待
• 「EPUB」であれば、中間フォーマットが不要
• 海外での作業を含め、制作コストの削減が期待できる
• コンテンツの変換や自動生成が容易
「Readium」にも貢献
ePUB
OSS X
大変申し訳ございません。。。
「Raboo」終了にあたり
• 感謝の気持ちを込めて
• ご購入いただいたコンテンツ購入金額の10％相当の
楽天スーパーポイントプレゼント
• 全員に楽天スーパーポイント200ポイントプレゼント
• koboサービス移行支援プログラムのご提供
• Rabooサービスでのコンテンツ購入代金の40％相当の 楽天スーパーポイントプレゼント
• kobo Touch 3,000円割引クーポンプレゼント
• 購入履歴の移行はフォーマットの違いから困難でした
2012年7月に「kobo」を日本でオープン
koboイーブックストア
kobo mini"
Android／iOSアプリ iOSアプリ 日本語未対応 "
kobo arc 日本未発売 " kobo Touch"
kobo glo"
koboデバイス／アプリ
マンガ ムック 雑誌 ラノベ
青空文庫 メルマガ 楽天グループ 古文書など
約半年で12万を超えるコンテンツ
楽天koboコンテンツ制作ガイド
By Shinya Takami
はじめに
• 本資料では、各種サンプルを示すために、以下の文献等から
引用もしくは素材を流用させて頂いています
• 電書協EPUB 3 制作ガイド ver.1.1.2
• http://www.ebpaj.jp/guide.html
• 日本語組版処理の要件（日本語版）
• http://www.w3.org/TR/jlreq/ja/
• Wikipedia
• http://ja.wikipedia.org/
楽天koboコンテンツ制作ガイド
1. EPUB2とEPUB3の違い
2. OPFにおける注意点
3. 目次の作り方
4. 組版表現Tips
5. 固定レイアウトの礼儀
6. Kobo向けの推奨指定
7. Koboにおける制約事項
8. EPUBファイルの検証
EPUB2とEPUB3の違い（1/5）
EPUB 2 EPUB 3
XHTML XHTML 1.1 XHTML 5
HTMLの拡張子 .html .xhtml
CSS CSS 2 CSS 2.1/3
OPF - 必須：dcterms:modified
廃止：guide
目次 NCX Navigation Document
縦書き、ルビ 不可 可能
フォントの埋込 不可 可能
音声・動画・読み上げ 不可 可能
スクリプト 不可 可能
EPUB2とEPUB3の違い（2/5）
• EPUB3に必要な要素
• mimetype
• 内容は「application/epub+zip」で固定
• ZIPで圧縮する際には対象外
• META-INF/container.xml
• OPFファイルの所在を示す
• item/standard.opf
• EPUBの設定ファイル、ファイル名は自由
• item/navigation-documents.xhtml
• OPFから参照される目次、ファイル名は自由
• item/xhtml/p-001.xhtml
• OPFから参照される本文、ファイル名は自由
EPUB2とEPUB3の違い（3/5）
• HTMLとXHTMLの違い
1. 文書は整形式でなければならない
2. 要素名及び属性名は小文字でなければならない
3. 非空要素には終了タグが必要である
4. 属性値は常に引用符で括られなければならない
5. 属性の省略化はしてはならない
6. meta、hr、br、img などは、空要素として書く
7. 属性値内での改行を含む複数の空白は１つと見なす
8. スクリプトおよびスタイル要素の定義が異なる
9. 要素の入れ子などSGMLの排除機能を再現できない
10. id および name 属性をもつ要素は、 id 属性を使用する
EPUB2とEPUB3の違い（4/5）
• HTMLとXHTMLの違い 例えば
• NG: <p><font size= 3 >text</p></font>
OK: <p><font size= 3 >text</font></p>
• NG: <p><font size= 3 >text</p>
OK: <p><font size= 3 >text</font></p>
• NG: <font size=3>text</font>
OK: <font size= 3 >text</font>
• NG: <BR />
OK: <br />
• NG: <br>
OK: <br />
EPUB2とEPUB3の違い（5/5）
• 表紙画像の指定方法
• EPUB2: 標準化された手段なし
• 先頭ページの画像が使用される
• 慣習的な指定方法の例（OPF内で指定）：
<meta name= cover content= cover-id />
…
<item media-type= image/jpeg id="cover-id"
href="cover.jpg" />
• EPUB3: OPF（<manifest>）内で指定
• <item media-type="image/jpeg id="cover"
href= cover.jpg properties="cover-image"/>
【参考】表紙画像の使われ方
ストア上のサムネイル ビューワー上の表紙
• 表紙画像は大きめのものがおススメ
• 楽天kobo向けに表紙画像をEPUBとは別に納品出来ますが、
画像サイズはビューワーでフル画面表示出来るものを推奨
（サイズ） ＜
楽天koboコンテンツ制作ガイド
1. EPUB2とEPUB3の違い
2. OPFにおける注意点
3. 目次の作り方
4. 組版表現Tips
5. 固定レイアウトの礼儀
6. Kobo向けの推奨指定
7. Koboにおける制約事項
8. EPUBファイルの検証
OPFにおける注意点（1/7）
• OPFファイルの構成
• <?xml version="1.0" encoding="UTF-8"?>
• <package … >
• <metadata … >
ここでタイトルやユニークIDなどを設定します
</metadata>
• <manifest … >
ここでEPUBに含まれるファイル群を宣言します
</manifest>
• <spine … >
ここでEPUBで実際に表示するファイルと順序を定義します
</spine>
• </package>
OPFにおける注意点（2/7）
• <metadata>における必須項目
• タイトル
<dc:title id="title">蜘蛛の糸</dc:title>
• 言語
<dc:language>ja</dc:language>
• ユニークID
<dc:identifier id="unique-id">
urn:uuid:707317b8-acab-46c2-a171-2da9afaec4bf
</dc:identifier>
• 更新日時
<meta property= dcterms:modified > 2012-12-07T00:00:00Z
</meta>
OPFにおける注意点（3/7）
• <metadata>における推奨項目
• 著者名
<dc:creator id= creator01 >
芥川龍之介
</dc:creator>
• 出版社名
<dc:publisher id= publisher >
日本電子書籍出版社協会
</dc:publisher>
OPFにおける注意点（4/7）
• <dc:identifier>には、以下をおススメします
1. eISBN（電子書籍用に採番されたISBN）
urn:isbn:9784816982835
2. Kobo向け商品番号（13桁の数値）
urn:isbn:4310000000322
3. JP-eコード（緊デジが採用）
urn:jpecode:00000000000000000000
4. UUID
urn:uuid:707317b8-acab-46c2-a171-2da9afaec4bf
5. pISBN（底本のISBN）
urn:isbn:9784062177634
OPFにおける注意点（5/7）
• ユニークIDに「UUID」を使用する場合
• UUIDの仕様
• UUIDは16バイトの数値で、16進数表記で32桁となる
• UUIDのフォーマット
• ＜8桁＞＜4桁＞＜4桁＞＜4桁＞＜12桁＞
time-low - time-mid - time-high-and-version - clock-seq-and-reserved clock-seq-low - node
• UUIDの例
• NG:
X0000999-0000-0000-0000-000000000123
• OK:
550e8400-e29b-41d4-a716-446655440000
OPFにおける注意点（6/7）
• <dc:language>には、「ja」を指定しましょう
• 現在のKoboビューワーは、日本語コンテンツを識別します
• 「ja-JP」は間違いではないですが、旧バージョンで不具合
• 「jpn」は間違い（RFC5646: shortest ISO 639 code）
• <spine>には、「page-progression-direction」
を必ず指定しましょう
• EPUBの仕様的には必須項目ではありませんが、
指定がない場合はビューワーの挙動に従います
• Koboはグローバルな製品なので欧米の左綴じ（ltr）
がデフォルト設定になります
OPFにおける注意点（7/7）
• <spine>における「linear」属性について
• 本来「linear」属性はページを順に進めた場合に、
• linear= yes ：表示される
• linear= no ：表示されない
という挙動が期待されます
例：<itemref linear= no" idref="p-ref"/>
• 現在のKoboビューワーでは、「no」でも表示されます
• もし「no」を指定したページが表示されない場合は、
そのページに遷移した後に、元の本文に戻る手段の
確保も考慮したコンテンツ制作をおススメします
楽天koboコンテンツ制作ガイド
1. EPUB2とEPUB3の違い
2. OPFにおける注意点
3. 目次の作り方
4. 組版表現Tips
5. 固定レイアウトの礼儀
6. Kobo向けの推奨指定
7. Koboにおける制約事項
8. EPUBファイルの検証
目次の作り方（1/4）
• EPUB2は「NCX」
• XML形式で、本文としては利用出来ない
• OPF内の<spine>で指定
<spine toc="ncx">
• EPUB3では任意
• EPUB3は「Navigation Document」
• XHTML形式で、本文としても流用可能
• OPF内の<manifest>で指定
<item media-type="application/xhtml+xml" id="toc"
href="navigation-documents.xhtml" properties="nav"/>
• EPUB3では必須
目次の作り方（2/4）
• EPUB3目次の例
• <body>
<nav epub:type= toc id= toc >
<h1>Navigation</h1>
<ol>
<li><a href= xhtml/p-cover.xhtml >表紙</a></li>
<li><a href= xhtml/p-toc.xhtml >目次</a></li>
<li><a href= xhtml/p-colophon.xhtml >奥付</a></li>
</ol>
</nav>
</body>
目次の作り方（3/4）
• EPUB3目次の仕様／ルール
• <ul>タグではなく<ol>タグを使う
• 階層構造にすることが出来る
（ただし、表現方法はビューワーに依存）
• <li>タグ内には<a>または<span>要素を格納可能
• Kobo向けEPUB3目次の注意点
• 現在のKoboビューワーでは、<span>要素は表示されない
（リンクが貼られている項目のみ表示されます）
• 現在のKoboビューワーでは、ルビ等は表示されない
（熟語ルビ形式の場合、親文字も正しく表示されません）
【参考】kobo glo の目次
階層化しても字下げなし 長い文字列は別ウィンドウで表示可
目次の作り方（4/4）
• ページ内リンク使用時の注意点
• 可能であればページ内リンクは避けて下さい（特に縦書時）
（けっこうトラブルが多いので、目次の項目単位で
XHTMLを分割することをおススメします・・・）
• <a>タグよりも、<h>や<p>タグに「id」を指定して下さい
NG: <a name= a01 id= a01 >subtitle</a>
OK: <h2 id= a01 >subtitle</h2>
• 「id」は「数字」で始まってはいけません
NG: <h2 id= 001 >subtitle</h2>
• 空タグは正しく機能しない場合があります
NG: <p id= a01 ></p>
楽天koboコンテンツ制作ガイド
1. EPUB2とEPUB3の違い
2. OPFにおける注意点
3. 目次の作り方
4. 組版表現Tips
5. 固定レイアウトの礼儀
6. Kobo向けの推奨指定
7. Koboにおける制約事項
8. EPUBファイルの検証
組版表現Tips（1/8）
• 縦書時の左右中央配置（扉表現）の実現方法
• 横書<html>に縦書<div>ブロックを挿入する
<html style= -epub-writing-mode: horizontal-tb; ><body>
<div style= margin-left: auto; margin-right: auto; -epub-writing-mode: vertical-rl; height: 100%; > <p style= text-align: left; >Title</p>
</div>
</body></html>
※ 横書<html>は横書<body>でもOK
• 文章量が多い場合は正しく表示されない場合があります
• 電書協ガイドの非推奨方法（横書<html>に縦書<body>）は
Koboビューワーでは正しく表示されない場合があります
【参考】縦横ブロックの組み合わせ
横書<html>
縦 書
<div>
テ キ
ス ト
margin-left: auto margin-right: auto
文字 進行方向
組版表現Tips（2/8）
• 改ページ可能な扉表現（非推奨）
• 縦書<div>と横書<div>ブロックに「dir」属性を指定する
<html style= -epub-writing-mode: vertical-rl; ><body>
<div style= -epub-writing-mode: horizontal-tb; dir= rtl > <div style= margin-left: auto; margin-right: auto;
-epub-writing-mode: vertical-rl; height: 100%; dir= ltr > <p style= text-align: left; >Title</p>
</div> </div>
</body></html>
• 2ページ以内に収まる場合はうまく表示される場合があります
• 現在のKoboビューワーでは、この方法はおススメしません
【参考】縦横ブロックの組み合わせ（改）
margin-left: auto margin-right: auto
<vid>書横
文字 進行方向
dir= rtl
縦書
<div>
テ キ
ス ト
dir= ltr
縦 書
<html>
組版表現Tips（3/8）
• 縦中横の実現方法 その1
• 部分的に横書モードにする
<span style="-epub-writing-mode: horizontal-tb >12</span>
• 縦中横の領域だけ「line-height: 1em;」などのように
行間を調整しないと上下に不自然な空白が生まれます
• 縦中横の実現方法 その2
• 「text-combine」を使用する
<span style="-epub-text-combine: horizontal;">12</span>
• 電書協ガイドではこちらが推奨されている
組版表現Tips（4/8）
• 縦書時の傍線の引き方
• border-right
<span style="border-right: 1px solid #000000 >text</span>
• overline
<span style="text-decoration:overline">text</span>
• 楽天koboでは「border-right」をおススメします
• 「overline」の場合、ルビや縦中横が含まれる場合に、
Koboビューワーでは正しく表示されない場合があります
• 「border-right」の場合、外字画像にも傍線が付与できます
• ただし、電書協ガイドでは「overline」が推奨されています
【参考】 傍線の引き方による違い
border-right overline
組版表現Tips（5/8）
• ルビの種類
• モノルビ
<ruby>京<rt>きょう</rt></ruby><ruby>都<rt>と</rt></ruby>
• グループルビ
<ruby>京都<rt>きょうと</rt></ruby>
• 熟語ルビ
<ruby>京<rt>きょう</rt>都<rt>と</rt></ruby>
• ルビ使用時の注意点
• 現在のKoboビューワーでは、熟語ルビはモノルビと同様に
泣き別れますが、EPUB3目次では使用しないで下さい
• 長過ぎるルビは見切れることがあるので適度に分割して下さい
組版表現Tips（6/8）
• 泣き別れが禁止される挙動
• 禁則文字が連続した場合
〕〉》」』】
• グループルビが付与された文字列
<ruby>京都<rt>きょうと</rt></ruby>
• 「inline-block」要素で囲まれた文字列
<span style= display: inline-block; >京都</span>
• タグで囲まれた全角文字の集合
<span>あ</span><span>い</span><span>う</span>
<span>え</span><span>お</span>
※ 期待する表示にならない場合があるので注意
組版表現Tips（7/8）
• 外字に圏点を付与したい場合
• 圏点をルビとして指定する
<ruby><img src= gaiji.png" class="gaiji /><rt>●</rt></ruby>
• 外字を文字に変換する
※ JIS第一・第二水準外のために外字画像化された文字の場合、 UnicodeベースのEPUB3では文字に戻せる可能性があります
※ Koboビューワーでは「JIS X 0213:2004, Adobe-Japan1-6」 相当の日本語グリフが使用できます
• 圏点とルビの同時使用について
• 現在のKoboビューワーでは、ルビが優先されます
組版表現Tips（8/8）
• 縦書または横書を意識して制作をお願いします
• EPUB3では縦書／横書の切り替えが標準化されていません
• 現在のKoboビューワーでは、ビューワー側でユーザが 縦書と横書を切り替えることができません
• 縦書用と横書用の2種類のCSSを用意することは出来ますが、 それらを切り替える仕様がまだ標準化されていません
• 作業負荷の軽減の意味でも一方に絞ることをおススメします
• 句読点などを除き、記号類の変換は自動では行われません
• 例えば、横書で使用されるダブルコーテーション「 」は、 縦書では制作時に「〝〟」に変換することをおススメします
• 日付のような数字列は、縦書では縦中横の指定を行うか、 全角数字に変換して正立させることをおススメします
楽天koboコンテンツ制作ガイド
1. EPUB2とEPUB3の違い
2. OPFにおける注意点
3. 目次の作り方
4. 組版表現Tips
5. 固定レイアウトの礼儀
6. Kobo向けの推奨指定
7. Koboにおける制約事項
8. EPUBファイルの検証
固定レイアウトの礼儀（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ビューワーでは、リフロー型のページが混ざると、 正しく表示されない場合があります
楽天koboコンテンツ制作ガイド
1. EPUB2とEPUB3の違い
2. OPFにおける注意点
3. 目次の作り方
4. 組版表現Tips
5. 固定レイアウトの礼儀
6. Kobo向けの推奨指定
7. Koboにおける制約事項
8. EPUBファイルの検証
Kobo向けの推奨指定（1/10）
• 電書協と緊デジのEPUB3制作ガイド
• 基本的には電書協ガイドに従いましょう
• 現状でのベストプラクティスに近い存在
• 現在のKoboビューワーを考慮した場合、
• 傍線は「border-right」がおススメ
• 扉表現の実現方法はKobo向けがおススメ
• 縦書時の文字方向に関する仕様が若干違う（後述） といった違いはあります
• 固定レイアウト向けはデジコミ協と共同制作
• 緊デジ版テンプレートは電書協ガイドに準拠
• 基本的には電書協ガイドのサブセットの位置付け
（電書協テンプレートのCSSを一部簡略化）
Kobo向けの推奨指定（2/10）
• マージン（余白）：ゼロ（0）を推奨
• 楽天Kobo向けとしてはUXの向上が期待できる
• ビューワー側で適度なマージンを確保しているため、 コンテンツ側ではマージンを「ゼロ（0）」にして下さい
• 基本的には、縦書時の左右／横書時の上下マージンは コンテンツ側の指定が反映されません
• マージンの指定がない場合はデフォルト値になりますので、 明確に「margin: 0;」などと指定して下さい
• マージン：ゼロによる不具合の可能性
• マージン部分にルビや句読点（ぶら下がり）を表示する ビューワーでコンテンツを表示する場合
• 現在のKoboビューワーは「ぶら下がり」に対応していません
Kobo向けの推奨指定（3/10）
• XHTMLの適度な分割を推奨
• 楽天koboによる最大サイズの目安は「200KB」
• 1MBを超えるXHTMLはUX低下の原因となります
• 巨大なXHTMLファイルは表示に時間がかかります
• 現在のKoboビューワーでは、XHTMLの切り替わり時に XHTMLに含まれるコンテンツ全体をレンダリングしてから 最初のページを表示する仕組みになっています
• 目次項目の区切りでの分割を推奨
• XHTMLの分割により、自動的に改ページが行われ、
ページ内リンクによる目次を作成する必要がなくなります
• 現在のKoboビューワー（kobo Touch などのE-Ink端末）では、 XHTMLの区切り単位で、画面をフルリフレッシュします
Kobo向けの推奨指定（4/10）
• 「inline-block」は危険です
• テキストブロックには使わないで下さい
• <p>タグなどのディスプレイ要素として、 display: inline-block;
といった指定が可能ですが、現在のKoboビューワーでは ページの区切りが正しく判断されず、文字が見切れてしまう 場合があります
• 外字画像などの指定に使って下さい
• 「inline-block」は文中にあたかも文字のようにブロックを 挿入する目的で使用されますので、外字などに適しています
Kobo向けの推奨指定（5/10）
• リンクの貼り方にはご注意下さい
• 画像のみのページの場合に、画像にリンクは貼らないで下さい
• Koboビューワーを含む多くは、タップとフリックにより ページを遷移する操作方法が用意されています
• フリックによるページ移動の場合は問題ありませんが、
タップを利用するユーザにとっては、画像しかないページで
画像に目次等へのリンクが貼られていると、次ページではなく、 意図しないページへ遷移して混乱を招く可能性があります
• 相互リンクはおススメしません
• EPUBには目次機能があり、読書中にいつでも利用出来るため、 目次ページへ戻るリンクを見出し等に貼る必要はありません
• 見出し等が表示される位置によっては、意図せず遷移してしまう 上記の問題を引き起こす可能性があります
Kobo向けの推奨指定（6/10）
• 狭過ぎる行間の指定は避けて下さい
• 楽天koboの推奨値は「1.75em」
• 「1.75em」は、Adobe Illustrator のデフォルト値
• 行間の指定である「line-height」には「1.6em」以上を 指定することをおススメします
• 現在のKoboビューワーでは、テキストブロックに
「1.5em」以下の行間が指定された場合、ページの区切りが 正しく判断されず、文字が見切れてしまう場合があります
• ルビの表示領域を考慮した設定を推奨
• ルビの標準サイズが親文字に対して「0.25em」のため、
「1.75em」程度がバランスがよいと思います
• 行間が狭いとルビのある行とない行で行間が変わります
Kobo向けの推奨指定（7/10）
• フォントの指定は必ずお願いします
• フォントの指定がないと正しく表示されません
• 現在のKoboビューワーでは、フォントの指定（font-family）が 正しくされていないと、欧米のフォントが自動的に選択され、 日本語が正しく表示されない場合があります
• 「serif」および「sans-serif」の使用を推奨
• 明朝系とゴシック系の併記をおススメします
（明朝指定の例）font-family: serif, sans-serif;
（ゴシック指定の例）font-family: sans-serif, serif;
• 具体的なフォント名の指定は、各OSで代表的なフォントの場合、 指定しなくてもそれらが選択されるのであまり意味がなく、
ファイルサイズの肥大化の原因となるのでおススメしません
Kobo向けの推奨指定（8/10）
• 画像の配置について その1
• 文字の回り込み指定は避けて下さい
• 現在のKoboビューワーでは、画像の周囲に文字列が回り込む 指定がされている場合に、改ページが画像の途中で行われ、 画像が分断されてしまう場合があります
• 画像はブロック要素のタグで囲んで下さい
• 現在のKoboビューワーでは、<body>に画像が単体で文中に
配置されていると、改ページで画像が分断される場合があります
• 画像の周囲には適度なマージンを確保して下さい
• 現在のKoboビューワーでは、画像と文字列の間に適度な余白が 確保されていない場合に、改ページが画像の端ギリギリで行われ、 1px分だけ前のページに残る場合があります
【参考】 ページネーション
• 文字と画像の混在は切り分けが困難
• 文字の回り込み指定があると、ページネーションの際に、
画像を分断するか、全体を縮小して表示するしかない
す る
と 、
い っ
し ょ
う
け
ん め
い
に の
ぼ っ
た 甲
斐 が
あ っ
て 、
さ っ
き ま
で 自
分 が
い た
血 の
池 は
、
今 で
は も
う 暗
の 底
に い
つ の
間 に
か か
く れ
て お
り ま
す 。
そ れ
か ら
あ の
ぼ ん
や り
光 っ
て い
る 恐
し い
針 の
山 も
、 足
の 下
に な
っ て
し ま
い ま
し た
。 こ
の 分
で ぼ
っ て
行 け
ば 、
Kobo向けの推奨指定（9/10）
• 画像の配置について その2
• 拡大表示させたい画像は単独のXHTMLに配置して下さい
• 現在のKoboビューワー（kobo Touch などのE-Ink端末）では、 XHTMLに画像のみが配置されている場合に、その画像を
拡大する機能が利用できます
• 中央に配置したい場合は、SVGタグでラッピングして下さい
• 指定方法については、固定レイアウトの項目を参照下さい
• 画像の推奨サイズは、長辺が「1000∼1200px」
• 現在のKoboビューワー（kobo Touch などのE-Ink端末）では、 1200pxを超える画像はキレイに表示されない場合があります
• ただし、雑誌などタブレットでの表示を前提としたものは、 長辺が「1600px」を推奨しています
Kobo向けの推奨指定（10/10）
• 画像の種類について
• フォーマットは「JPEG」または「PNG」を推奨
• EPUBはWeb技術と親和性が高いため、「BMP」などの プラットフォームに依存するフォーマットは避けて下さい
• 「GIF」は透過の指定が出来ますが、アルファチャンネルが 用意されていないため、外字等で透過画像を使う場合は、
「PNG」をおススメします
• カラースペースは「RGB」を推奨
• 「JPEG」の場合、「CMYK」も利用出来ますが、トラブルを 避けるためにも色空間は「RGB」にして下さい
• モノクロ端末への配慮
• kobo Touch などのモノクロE-Ink端末では、色相・彩度は違うが 明度が近い色彩が並ぶと区別がつかない場合があります
【参考】GIFとPNGの違い
PNG GIF
• 白背景を前提に制作されたGIF画像は、アルファチャンネルが
ないため、別の背景色の上に乗せるとなじまない
【参考】ユニバーサルデザイン
カラーで見ると モノクロで見ると
• モノクロ端末で見ると区別がつかなくなるような
色の組み合わせは避け、色弱の方に配慮した配色を
楽天koboコンテンツ制作ガイド
1. EPUB2とEPUB3の違い
2. OPFにおける注意点
3. 目次の作り方
4. 組版表現Tips
5. 固定レイアウトの礼儀
6. Kobo向けの推奨指定
7. Koboにおける制約事項
8. EPUBファイルの検証
Koboにおける制約事項（1/5）
• 画像のサイズ（解像度）に制約があります
• 最大ピクセル数は「3,145,728」
• 現在のKoboビューワー（主にAndroid OS向けアプリ）では、 画像の高さと幅を掛け合わせたピクセル数が約300万を超えると 正しく表示出来ない場合があります
• 「2048 x 1536」ピクセルの画像はその範囲内です
• 表示できない文字があります
• サロゲートペア
• 現在のKoboビューワーでは、うまく表示出来ない場合があります
• 日本語以外のUnicodeグリフ
• 中国語の漢字など、Unicode文字でも使えない文字があります
【参考】サロゲートペア
• コード値が5桁のUnicode文字
• 16ビットに収まらなかった文字たち
• Unicodeは当初16ビット（65,536文字）で全世界の文字を 扱おうとしましたが、足りなくなったので一部の文字たちは もう16ビットを足して32ビットで表現されています
• サロゲートペアに該当する文字たちは、本来「16進数で8桁」 のコード値になるはずですが、5桁に特殊変換されています
• サロゲートペアの例
• （U+2123D）
• （U+20BB7）
Koboにおける制約事項（2/5）
• EPUB3の仕様で未対応のもの
• 段組み（Multi-Column）
• フォントの埋め込み（難読化）
• WOFF/SVGフォント
• 動画／音声の再生
• テキストの読み上げ
• MathML
• Media Overlays / SMIL
• Javascript（一部動作します）
Koboにおける制約事項（3/5）
• 組版表現として未対応のもの
• 熟語ルビ
• 現在のKoboビューワーでは、「モノルビ」と同じ挙動で、 EPUB3目次で使用すると不具合が発生します
• 行末禁則（追い込み、ぶら下がり）
• 現在のKoboビューワーでは、「追い出し」のみ
• ルビの配置
• 現在のKoboビューワーでは、「均等割付」のみ
• 行揃え（強制割付）
• 現在のKoboビューワーでは、「強制割付」は未対応のため、 最終行を均等割付することが出来ません
【参考】未対応の組版表現（熟語ルビ）
熟語ルビ モノルビ
熟語ルビの泣き別れ
【参考】未対応の組版表現（行末禁則、強制割付）
ぶら下がり 追い込み
強制割付
文 字 揃 え （ も じ そ ろ え ） は、
タイポグラフィで、行の中に
文字をどう配置するかの規則
で あ る。
Koboにおける制約事項（4/5）
• 改ページについて
• XHTMLの切り替わりで必ず改ページされます
• 現在のKoboビューワーでは、次のXHTMLファイルに 切り替わる箇所で必ず改ページが発生します
• 現状ではこの改ページを無効にする方法はありません
• CSSによる改ページタグは一部で機能しません
• 現在のKoboビューワー（kobo Touch などのE-Ink端末）では、
「page-break-before/after」タグは機能しません
• 現在のKoboビューワー（主にAndroid OS向けアプリ）では、
「page-break-before/after」タグは機能します
Koboにおける制約事項（5/5）
• 「.kepub.epub」という拡張子について
• eReader（Touch/glo/mini）向け
• 現在のKoboビューワー（kobo Touch などのE-Ink端末）には、 Adobe DRMに対応したEPUB2ビューワーエンジンと
日本語EPUB3ビューワーエンジンの2種類が搭載されています
• グローバルな互換性確保のため、非購入コンテンツの表示
（サイドロード）に際して、「.epub」はAdobe DRM向け、
「.kepub.epub」は日本語EPUB3向けとなっています
• Androidアプリでは不要
• 現在のKoboビューワー（主にAndroid OS向けアプリ）には、 Adobe DRMに対応したビューワーエンジンが未搭載なため、
「.epub」で問題なくサイドロードが可能です
• Kobo向け納品データでは不要（内部的に自動変換）
楽天koboコンテンツ制作ガイド
1. EPUB2とEPUB3の違い
2. OPFにおける注意点
3. 目次の作り方
4. 組版表現Tips
5. 固定レイアウトの礼儀
6. Kobo向けの推奨指定
7. Koboにおける制約事項
8. EPUBファイルの検証
EPUBファイルの検証（1/3）
• EPUBファイルを検証しましょう
• EPUB2とEPUB3の仕様が混在していないか？
• 「sigil」などEPUB3非対応のツールで出力したデータを 手作業で修正した場合は注意が必要です
• IDPFの仕様に準拠しているか？
• XMDF/dotBookなどから変換したEPUBファイルは要注意
• EPUB3目次はEPUB2のNCXと仕様が大きく違います
• 固定レイアウトは最新の仕様に準拠しましょう
• XHTMLの仕様に準拠しているか？
• タグの閉じ忘れには注意しましょう
• 正しいビューワーで確認しているか？
• kobo Touchなどでは「.kepu.epub」にする必要があります
EPUBファイルの検証（2/3）
• EPUBファイルの検証ツール
• epubcheck
- http://code.google.com/p/epubcheck/
• EPUB3に対応した業界標準の検証ツール
• オープンソースとして無償で公開されている
• 使用方法：
terminal> java -jar epubcheck-x.x.x.jar file.epub
• EPUB Validator (beta)
- http://validator.idpf.org/
• IDPFにより提供されているWebベースの検証ツール
• 「epubcheck」 をWeb UIから利用出来るようにしたもの
• 10MBまでのファイルサイズに対応
【参考】epubcheck
http://code.google.com/p/epubcheck/
【参考】EPUB Validator (beta)
http://validator.idpf.org/
EPUBファイルの検証（3/3）
• 「Readium」によるチェック
• 現状ではKoboビューワーの挙動に最も近い存在ですが、
まったく同一ではありませんのであくまでも参考程度に！
• EPUBファイルの中身のチェック
• XHTMLファイルレベルでのチェックもおススメ
• EPUBに含まれるXHTMLはブラウザでも確認可能
（ただし、組版表現など完全には再現出来ません）
• 検証にはWebKitベースのブラウザがおススメ
• 「Safari」「Chrome」などのWebKitベースのブラウザは Koboビューワーの挙動に比較的近い表示が可能です
• ブラウザの開発者向けツールはCSS等の検証に便利
【参考】Readium
http://readium.org/
【参考】ブラウザでの検証
「Safari」の例
標準化動向
By Koji Ishii
IDPF EPUB WG
• EPUB 3.(0.)1の検討開始
• FXL（固定レイアウト）
• FXL Extensions
• AHL
• IDX
• DICT
• 6月の東京CSS会合に合わせてW3Cとの共同イベントを検討中
EPUB3 =
• XHTML5
• + CSS 2.1
• + CSS Fonts Level 3
• + CSS Text Level 3
• + CSS Writing Modes Level 3
• + α
W3C Process
WD= 開発中
LC= ベータ版候補
CR= ベータ版
PR= 製品候補
REC= 製品
W3C Process
WD=Fonts, Text, WM
LC=Text-decoration
CR=XHTML5
PR
REC=CSS 2.1
HTML5
• 2012/12/18にCRへ
• HTML Ruby Extension
• 二重ルビなど
• 出版からは不要の声も多いが、要望の声も強い
• 省略可能なオプション仕様として検討中
CSS Fonts Level 3
• 近々LCへ移行すると想定
CSS Text Level 3
• 2月F2F会合にて修正
• text-justify:autoでも日本語の両端揃えが可能
• letter-spacing
• 修正、課題解決後、LCリクエスト予定
CSS Text Decoration Level 3
• 1月にLC期間終了
• 課題解決後CRをリクエスト予定
CSS Writing Modes Level 3
• 残課題解決後、LCリクエスト予定
• それぞれの文字の向きを明示的に指定しない場合はUTR#50を利用
Unicode Technical Report #50 (UTR#50)
• Unicode Process
• Proposed Draft
• Draft
• 現在はProposed Draft #8
• Proposed Draft #6∼#8までは向きデータの変更なし
• Proposed Draft #9を現在執筆中
• 向きデータの変更がある
• Unicode内部および公開レビューで大きな問題が発見されなければ Draft化
質疑応答
Don’t hesitate to ask!
