Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

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

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Wird geladen in …3
×

Hier ansehen

1 von 76 Anzeige
Anzeige

Weitere Verwandte Inhalte

Ähnlich wie EPUBのナビゲーションを理解しよう (20)

Aktuellste (20)

Anzeige

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

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

×