EPUBのナビゲーションを理解しよう
•
39 likes•28,940 views
2013/1/31 JEPAセミナー Plat13 発表資料。 特にトピックが思いつかなかったので、自分の話したいことだけ話してしまいました。
Recommended
More Related Content
What's hot
What's hot (20)
Similar to EPUBのナビゲーションを理解しよう
Similar to EPUBのナビゲーションを理解しよう (20)
More from Hiroshi Takase
Recently uploaded
EPUBのナビゲーションを理解しよう
- 1. EPUBの ナビゲーションを 理解しよう 31 January 2013 イースト株式会社 高瀬 拓史 takase@est.co.jp ブラックジャックによろしく © 佐藤秀峰
- 2. 今日お話しすること EPUBのナビゲーションの 徹底理解を目指します ・目次 ・ランドマーク ・ページリスト ・まとめ ブラックジャックによろしく © 佐藤秀峰
- 8. EPUB 3の ナビゲーション 必須 目次 章や節などの区分へのナビゲーション toc 通常、見出しを単位として作られる 任意 ランドマーク 表紙やとびらなど、定番となる構成パーツ landmarks へのナビゲーション 定義できる内容があらかじめ決まっている 任意 ページリスト 同様の内容を持つ紙の本があった場合に page-list そのページ番号を示すナビゲーション 特に教育分野での利用を想定 他に図版一覧、表一覧など…
- 9. 目次 ランドマーク nav.xhtml※ ページリスト いずれも ナビゲーション文書に書きます ※ファイル名は任意
- 11. 目次には 2とおりの 姿があるのを 知ってるか？ ブラックジャックによろしく © 佐藤秀峰
- 12. 目次の例 論理的な目次 視覚的な目次
- 13. 目次の例 論理的な目次 視覚的な目次
- 14. Machine Readable リーディングシステムが解釈できるように 特定の構文に従って書かれた目次 通常、専用のUIによって呼び出される 論理的な目次 見せ方はリーディングシステムによって 異なる Human Readable 本のページの一部としてHTMLで書かれた 目次 見せ方は他のページと同様に 視覚的な目次 スタイルシートで制御できる
- 15. Q.大事なのはどっちだ？ 論理的な目次 視覚的な目次 ブラックジャックによろしく © 佐藤秀峰
- 16. Q.大事なのはどっちだ？ 論理的な目次 視覚的な目次 EPUBが重視するのは論理的な目次 視覚に依った読書が困難な人も利用できる ブラックジャックによろしく © 佐藤秀峰
- 17. EPUB 3のナビゲーション文書は XHTMLで書かれているので 論理的な目次と視覚的な目次を兼用できる EPUB 2, KF8では 両者は別ファイルなので NCX※ HTML 兼用できない ※独自のXMLファイル
- 18. そのため こんな仕様になってます 必要 任意 ナビゲーション文書と その中の目次は リーディングシステムのために必須 それを視覚的な目次として 利用するかは制作者次第
- 19. <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のタグを意味的に拡張した構文 機械的に解釈できるように、使えるタグに 制限があるので注意
- 20. <nav id=”toc” epub:type=”toc”> <ol> <li><a href=”…”>第１章 ...</a> <ol> <li><a href=”…”>第１節 ...</a></li> </ol> </li> </ol> </nav> ナビゲーション文書 目次の記述例 階層構造を表現するには ol, li を入れ子にします
- 21. こんなの書けない？ 大抵のEPUB 3対応制作ツールは ナビゲーション文書と目次を 自動的に生成してくれるので、 心配無用です ブラックジャックによろしく © 佐藤秀峰
- 22. ナビゲーション文書を 視覚的な目次として 表示する方法は 知ってるか？ ブラックジャックによろしく © 佐藤秀峰
- 23. ツールで書きだした自作EPUBに こんなことをする人がいますが、 目次ページを 見せたくなかったから できたEPUBを開いて nav.xhtml ってのを 削除したぜ☆ やめてください ブラックジャックによろしく © 佐藤秀峰
- 24. 1 2 content.opf※ 3 パッケージ文書の spine に 表示するページの 順序が書かれているので これを編集します ※ファイル名は任意
- 25. <manifest> <item properGes=”nav” id=”nav.xhtml” href=”nav.xhtml” … /> <!-‐-‐ properGesに nav を持つ item がナビゲーション文書 -‐-‐> ... </manifest> <spine …> <itemref idref=”nav.xhtml” … /> <!-‐-‐ ナビゲーション文書のidを参照している行を削除すれば非表示 -‐-‐> … </spine> パッケージ文書 spineの中からナビゲーション文書を参照すると 視覚的な目次として表示できる 参照しなければ、論理的な目次としてのみ機能する
- 26. 目次はできるだけ 詳細に作るんだ ブラックジャックによろしく © 佐藤秀峰
- 27. 読者があらゆる箇所に アクセスしやすいように 詳細に記述しましょう 1. ⃝⃝⃝ 1.1 ⃝⃝⃝ 1.1.1 ⃝⃝⃝ 1.1.1.1 ⃝⃝⃝ 1.1.1.1.1 ⃝⃝⃝ ブラックジャックによろしく © 佐藤秀峰
- 28. 目次ページが ゴチャゴチャ してきたぞ ブラックジャックによろしく © 佐藤秀峰
- 29. 視覚的な目次はスッキリ見せたいと 思うことがありますよね やっぱり「節」より 深い階層の項目は 削っていいよね☆ ちょっと待った ブラックジャックによろしく © 佐藤秀峰
- 30. <nav id=”toc” epub:type=”toc”> <ol> <li><a href=”…”>第１章 ...</a> <ol> <li><a href=”…”>第１節 ...</a> <ol hidden=”hidden”> <li><a href=”…”>第１項 ...</a></li>… ナビゲーション文書 目次の特定の階層を隠す 項目そのものを削除しないでください。 代わりに視覚的に見せたくない階層の最上位の項目に hidden属性を指定します。 この項目は表示されませんが、論理的には利用できます。
- 31. 視覚的な目次は 重視しない ↑ これは飽くまでも EPUB仕様上の話 ブラックジャックによろしく © 佐藤秀峰
- 32. KF8では事情が 少々違ってくる... 論理的な目次 視覚的な目次 NCX HTML Kindle パブリッシングガイドラインは 両方の目次を用意することを推奨 ブラックジャックによろしく © 佐藤秀峰
- 33. 目次ページにジャンプ 論理的な目次を 表示しない KindleのiOS/Androidアプリでは 視覚的な目次しか利用できないので 入れておかないと不便です (Kindle Paperwhiteでは論理的な目次=NCXも利用できる)
- 34. 2.ランドマーク ブラックジャックによろしく © 佐藤秀峰
- 35. 大抵の本が 持っている構成部品に 案内するナビゲーション です とびら 表紙 索引 本文 目次 ブラックジャックによろしく © 佐藤秀峰
- 36. 目次と 何が違うのか？ ブラックジャックによろしく © 佐藤秀峰
- 37. ランドマーク 目次 項目は役割ベース 項目は見出しベース 形式的 表紙 実質的 論理的 具体的 抽象的 個性的 内容を予測しやすい とびら 階層構造を表現できる 目次 目次 本文 第一章 第一節 索引 索引
- 38. <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> </nav> ナビゲーション文書 ランドマークの記述例 各項目は自身の役割を示す epub:type 属性を持つ 階層化はできない
- 39. epub:type の値は EPUB 3 Structural Semantic Vocabulary に 定義されています。 表紙 とびら 用語集 cover title-page glossary 目次 索引 参考文献 toc index bibliography 前付 本文 後付 frontmatter bodymatter backmatter …etc.
- 40. こんなの書けない？ 残念ながら現時点の主要な EPUB 3対応制作ツールで、 ランドマークを出力するものはありません ブラックジャックによろしく © 佐藤秀峰
- 42. また、 ランドマークを表示できる 主要なリーディングシステムも Readium程度 でも実は iBooks/iBookstoreでは…
- 43. Readiumでの 表示例
- 44. <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> ナビゲーション文書 ランドマークを本のページから隠す方法 nav要素にhidden属性を指定する
- 46. では、 ナビゲーション文書 のない EPUB 2では どうしていたか 知っているか？ ブラックジャックによろしく © 佐藤秀峰
- 47. cover toc content.opf※ loi EPUB 2では パッケージ文書の guide に 書いていました
- 48. <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属性相当
- 49. なんでEPUB 2の話になるんだ？ と思うかもしれません 今さら どうでもよくね？ 残念。 KF8で今も使ってます ブラックジャックによろしく © 佐藤秀峰
- 50. ここ ここ ここ その他の ガイドアイテム Kindleの「移動」メニューは guide要素を参照しています
- 51. Kindleの「移動」メニュー メニュー上の 関連する 遷移先 表示 type属性 カバー 表紙画像 cover ／ 表紙 （表紙ページではない） 目次 toc 目次ページ （視覚的な目次） 開始位置 最初に開く text / 初めに戻る ページ KF8では表紙画像を直接表示するので、表紙ページは不要。表紙ページを識別して取り除くのに cover を利用する
- 52. 3.ページリスト ブラックジャックによろしく © 佐藤秀峰
- 53. しばしばこんなことが 言われます。 EPUBは リフローするから ページで位置を 指定できないよね 半分間違ってます。 ブラックジャックによろしく © 佐藤秀峰
- 55. 各HTMLページの中に ページの区切り位置を示す タグを書いておき… 1ページ目 2ページ目 3ページ目
- 57. 教育分野から生まれた 要件です 28ページ開いて はーい はーい 電子教科書を使用 紙の教科書を使用
- 58. もちろんボーンデジタルな 本には無縁の機能です 機能があることだけ 知っておきましょう
- 59. <p> … <span epub:type="pagebreak" id="page10">10</span> … </p> コンテンツ文書 pagebreak コンテンツ文書の中でのページ区切り位置は epub:type属性にpagebreakを指定して 表します。 id属性も必須です。 内容にページ番号を書きます。
- 60. <p> … <span epub:type="pagebreak" id="page10" Gtle=”10”></span> … </p> コンテンツ文書 ページ番号を視覚的に表示したくない場合は、 title属性にページ番号を書き、内容は空にします。
- 61. <nav id=”page-‐list” epub:type=”page-‐list” hidden=”hidden”> <ol> … <li><a href=”…#page10”>10</a></li> <li><a href=”…#page11”>11</a></li> <li><a href=”…#page12”>12</a></li> … </ol> ナビゲーション文書 </nav> ナビゲーション文書 ページリストの記述例 ナビゲーション文書側ではページ番号を項目とした リストで表現します 非表示にするには、やはりhidden属性で
- 62. <metadata ...> ... <dc:source>urn:isbn:XXXXXXXXXX</dc:source> ... </metadata> パッケージ文書 底本の情報 さらに、パッケージ文書のメタデータに、 底本のISBN番号を書いておくと、 どの本のページ番号に対応させたのか 識別できる
- 63. こんなの書けない？ 残念ながら現時点の主要な EPUB 3対応制作ツールで、 ページリストを出力するものはありません ブラックジャックによろしく © 佐藤秀峰
- 65. Readiumでの 表示例
- 66. ページリストの iBooks上の ページ番号 ページ番号 タップで切り替え iBooksでも 部分的にサポートされました
- 68. 4.まとめ ブラックジャックによろしく © 佐藤秀峰
- 69. 曲の頭出しができない CDは不便ですよね 本も同じです ブラックジャックによろしく © 佐藤秀峰
- 70. ナビゲーションいろいろ EPUB 3 EPUB 2 / KF8 ナビゲーション パッケージ 文書 NCX 文書 目次 guide HTML ランドマーク 視覚的な目次 ページリスト
- 71. 読みたい情報に 素早くアクセスする 手助けをしてくれます ブラックジャックによろしく © 佐藤秀峰
- 72. ちゃんと理解すれば KF8のナビゲーションも 完全制覇 表紙画像 視覚的な目次 論理な目次 読書開始位置 Kindle Previewer - [表示] - [本に関する情報]
- 73. 制作環境も閲覧環境も過渡期 実用に至らない機能もありましたが 電子出版に迷える 僕たちのことも 誰かナビゲート してくださいね 誰がうまいことを… ブラックジャックによろしく © 佐藤秀峰
- 74. 状況は毎年 確実に進化しています
- 75. 今年(も?)電子出版を 盛り上げて参りましょう ブラックジャックによろしく © 佐藤秀峰
- 76. Thank you! ブラックジャックによろしく ©佐藤秀峰 漫画 on Web <h8p://mangaonweb.com> Default Icon © interacGvemania 2010-‐2011 CC-‐BY-‐ND 3.0 <h8p://www.defaulGcon.com/>