EPUBのナビゲーションを理解しよう

EPUBの
ナビゲーションを
理解しよう
31 January 2013
イースト株式会社
高瀬拓史 takase@est.co.jp
ブラックジャックによろしく © 佐藤秀峰

今日お話しすること

EPUBのナビゲーションの
徹底理解を目指します

・目次
・ランドマーク
・ページリスト
・まとめ


ナビゲーション
Navigation

目的の箇所まで
案内する仕組み

ウェブサイトの

音楽プレイヤーの

では本の
ナビゲーションは？

そう、読者を
本の中の様々な箇所へ
案内する仕組みです

EPUB 3の
必須
目次章や節などの区分へのナビゲーション
toc 通常、見出しを単位として作られる

任意
ランドマーク表紙やとびらなど、定番となる構成パーツ
landmarks へのナビゲーション
定義できる内容があらかじめ決まっている

任意
ページリスト同様の内容を持つ紙の本があった場合に
page-list そのページ番号を示すナビゲーション
特に教育分野での利用を想定
他に図版一覧、表一覧など…

目次

ランドマーク
nav.xhtml※
ページリスト

いずれも
ナビゲーション文書に書きます

※ファイル名は任意

１.目次


目次には
2とおりの
姿があるのを
知ってるか？


目次の例

論理的な目次視覚的な目次

Machine Readable
リーディングシステムが解釈できるように
特定の構文に従って書かれた目次
通常、専用のUIによって呼び出される
論理的な目次見せ方はリーディングシステムによって
異なる

Human Readable
本のページの一部としてHTMLで書かれた
目次
見せ方は他のページと同様に
視覚的な目次スタイルシートで制御できる

Q.大事なのはどっちだ？



Q.大事なのはどっちだ？


EPUBが重視するのは論理的な目次
視覚に依った読書が困難な人も利用できる


EPUB 3のナビゲーション文書は
XHTMLで書かれているので
論理的な目次と視覚的な目次を兼用できる

EPUB 2, KF8では
両者は別ファイルなので
NCX※ HTML 兼用できない

※独自のXMLファイル

そのため
こんな仕様になってます

必要任意

ナビゲーション文書と
その中の目次は
リーディングシステムのために必須
それを視覚的な目次として
利用するかは制作者次第

<html ...
xmlns:epub=”h8p://www.idpf.org/2007/ops”>
…
<nav id=”toc” epub:type=”toc”>
<ol>
<li><a href=”…”>第１章 ...</a></li>
<li><a href=”…”>第２章 ...</a></li>
…
</ol>
</nav> ナビゲーション文書
目次の記述例
HTML5のタグを意味的に拡張した構文
機械的に解釈できるように、使えるタグに
制限があるので注意

<ol>
<li><a href=”…”>第１章 ...</a>
<ol>
<li><a href=”…”>第１節 ...</a></li>
</ol>
</li>
</ol>
目次の記述例
階層構造を表現するには ol, li を入れ子にします

こんなの書けない？

大抵のEPUB 3対応制作ツールは
ナビゲーション文書と目次を
自動的に生成してくれるので、
心配無用です

ナビゲーション文書を
視覚的な目次として
表示する方法は
知ってるか？


ツールで書きだした自作EPUBに
こんなことをする人がいますが、

目次ページを
見せたくなかったから
できたEPUBを開いて
nav.xhtml ってのを
削除したぜ☆

やめてください

1

2

content.opf※ 3

パッケージ文書の spine に
表示するページの
順序が書かれているので
これを編集します
※ファイル名は任意

<manifest>
<item properGes=”nav”
id=”nav.xhtml” href=”nav.xhtml” … />
<!-‐-‐ properGesに nav を持つ item がナビゲーション文書 -‐-‐>

...
</manifest>
<spine …>
<itemref idref=”nav.xhtml” … />
<!-‐-‐ ナビゲーション文書のidを参照している行を削除すれば非表示 -‐-‐>

…
</spine> パッケージ文書
spineの中からナビゲーション文書を参照すると
視覚的な目次として表示できる
参照しなければ、論理的な目次としてのみ機能する

目次はできるだけ
詳細に作るんだ


読者があらゆる箇所に
アクセスしやすいように
詳細に記述しましょう
1. ⃝⃝⃝
1.1 ⃝⃝⃝
1.1.1 ⃝⃝⃝
1.1.1.1 ⃝⃝⃝
1.1.1.1.1 ⃝⃝⃝

目次ページが
ゴチャゴチャ
してきたぞ


視覚的な目次はスッキリ見せたいと
思うことがありますよね

やっぱり「節」より
深い階層の項目は
削っていいよね☆

ちょっと待った

<ol>
<li><a href=”…”>第１章 ...</a>
<ol>
<li><a href=”…”>第１節 ...</a>
<ol hidden=”hidden”>
<li><a href=”…”>第１項 ...</a></li>…
ナビゲーション文書
目次の特定の階層を隠す
項目そのものを削除しないでください。
代わりに視覚的に見せたくない階層の最上位の項目に
hidden属性を指定します。
この項目は表示されませんが、論理的には利用できます。

視覚的な目次は
重視しない
↑
これは飽くまでも
EPUB仕様上の話


KF8では事情が
少々違ってくる...

NCX HTML

Kindle パブリッシングガイドラインは
両方の目次を用意することを推奨

目次ページにジャンプ

論理的な目次を
表示しない
KindleのiOS/Androidアプリでは
視覚的な目次しか利用できないので
入れておかないと不便です
(Kindle Paperwhiteでは論理的な目次=NCXも利用できる)

2.ランドマーク


大抵の本が
持っている構成部品に
案内するナビゲーション
です
とびら表紙
索引

本文目次


目次と
何が違うのか？


ランドマーク目次
項目は役割ベース項目は見出しベース
形式的表紙実質的
論理的具体的
抽象的個性的
内容を予測しやすい
とびら階層構造を表現できる

目次目次

本文第一章

第一節

索引索引

<nav id=”landmarks” epub:type=”landmarks”>
<ol>
<li><a epub:type=”cover” href=”…”>表紙</a></li>
<li><a epub:type=”Gtle-‐page” href=”…”>とびら</a></
li>
<li><a epub:type=”toc” href=”…”>目次</a></li>
…
</ol>
ランドマークの記述例
各項目は自身の役割を示す epub:type 属性を持つ
階層化はできない

epub:type の値は
EPUB 3 Structural Semantic Vocabulary に
定義されています。

表紙とびら用語集
cover title-page glossary

目次索引参考文献
toc index bibliography

前付本文後付
frontmatter bodymatter backmatter …etc.


残念ながら現時点の主要な
EPUB 3対応制作ツールで、
ランドマークを出力するものはありません

また、
ランドマークを表示できる
主要なリーディングシステムも
Readium程度
でも実は iBooks/iBookstoreでは…

<nav id=”landmarks” epub:type=”landmarks”
hidden=”hidden”>
<ol>
<li><a epub:type=”cover” href=”…”>表紙</a></li>
<li><a epub:type=”Gtle-‐page” href=”…”>とびら</a></
li>
<li><a epub:type=”toc” href=”…”>目次</a></li>
…
</ol>

ランドマークを本のページから隠す方法
nav要素にhidden属性を指定する

ページからは消えるが
リーディングシステムは解釈する

では、
ナビゲーション文書
のない
EPUB 2では
どうしていたか
知っているか？

cover

toc

content.opf※ loi

EPUB 2では
パッケージ文書の guide に
書いていました

<spine>
...
</spine>
<guide>
<reference type=”cover” Gtle=”表紙” href=”…”/>
<reference type=”toc” Gtle=”目次” href=”…”/>
<reference type=”text” Gtle=”本文” href=”…”/>
</guide> パッケージ文書
guide
EPUB 2では guide要素で
構成部品の役割と位置を示す
type属性はランドマークのepub:type属性相当

なんでEPUB 2の話になるんだ？
と思うかもしれません

今さら
どうでもよくね？

残念。
KF8で今も使ってます

ここ

ここ

ここ
その他の
ガイドアイテム

Kindleの「移動」メニューは
guide要素を参照しています

Kindleの「移動」メニュー
メニュー上の関連する
遷移先
表示 type属性

カバー表紙画像
cover
／表紙（表紙ページではない）

目次 toc 目次ページ
（視覚的な目次）

開始位置最初に開く
text
/ 初めに戻るページ
KF8では表紙画像を直接表示するので、表紙ページは不要。表紙ページを識別して取り除くのに cover を利用する

3.ページリスト


しばしばこんなことが
言われます。

EPUBは
リフローするから
ページで位置を
指定できないよね

半分間違ってます。

紙の底本から
EPUBを作る時に…

各HTMLページの中に
ページの区切り位置を示す
タグを書いておき…

1ページ目
2ページ目

3ページ目

ナビゲーション文書から
その位置を参照させます

nav.xhtml

これがページリストです

教育分野から生まれた
要件です
28ページ開いて

はーいはーい

電子教科書を使用紙の教科書を使用

もちろんボーンデジタルな
本には無縁の機能です

機能があることだけ
知っておきましょう

<p>
…
<span epub:type="pagebreak" id="page10">10</span>
…
</p> コンテンツ文書

pagebreak
コンテンツ文書の中でのページ区切り位置は
epub:type属性にpagebreakを指定して
表します。
id属性も必須です。
内容にページ番号を書きます。

<p>
…
<span epub:type="pagebreak" id="page10"
Gtle=”10”></span>
…
</p> コンテンツ文書
ページ番号を視覚的に表示したくない場合は、
title属性にページ番号を書き、内容は空にします。

<nav id=”page-‐list” epub:type=”page-‐list”
hidden=”hidden”>
<ol>
…
<li><a href=”…#page10”>10</a></li>
…
</ol> ナビゲーション文書
ページリストの記述例
ナビゲーション文書側ではページ番号を項目とした
リストで表現します
非表示にするには、やはりhidden属性で

<metadata ...>
...
<dc:source>urn:isbn:XXXXXXXXXX</dc:source>
...
</metadata> パッケージ文書

底本の情報
さらに、パッケージ文書のメタデータに、
底本のISBN番号を書いておくと、
どの本のページ番号に対応させたのか
識別できる


残念ながら現時点の主要な
EPUB 3対応制作ツールで、
ページリストを出力するものはありません

ページリストの iBooks上の
ページ番号ページ番号

タップで切り替え

iBooksでも
部分的にサポートされました

ちなみにKindle本では
Amazon独自の仕組みで
紙の本のページ番号と対応付け
するらしい

4.まとめ


曲の頭出しができない
CDは不便ですよね
本も同じです


ナビゲーションいろいろ
EPUB 3 EPUB 2 / KF8

ナビゲーションパッケージ
文書
NCX
文書

目次 guide
HTML
ランドマーク
視覚的な目次
ページリスト

読みたい情報に
素早くアクセスする
手助けをしてくれます


ちゃんと理解すれば
KF8のナビゲーションも
完全制覇

表紙画像
視覚的な目次
論理な目次
読書開始位置
Kindle Previewer
- [表示] - [本に関する情報]

制作環境も閲覧環境も過渡期
実用に至らない機能もありましたが

電子出版に迷える
僕たちのことも
誰かナビゲート
してくださいね

誰がうまいことを…

状況は毎年
確実に進化しています

今年(も?)電子出版を
盛り上げて参りましょう

Thank you!

ブラックジャックによろしく
©佐藤秀峰
漫画 on Web
<h8p://mangaonweb.com>

Default Icon
© interacGvemania 2010-‐2011
CC-‐BY-‐ND 3.0
<h8p://www.defaulGcon.com/>

EPUBのナビゲーションを理解しよう

More Related Content

EPUBのナビゲーションを理解しよう