kindle comic creatorで漫画の電子書籍を作成するとtoc.ncxの目次だけが作られてしかもひとつの画像に対して、1つずつ買ってに目次を作られてしまう。そこで、それを折りたたんだら見やすくなるかなというように考えてみました。
toc.ncxの目次部分では、はじめは次のようになっている。
<navPoint id="toc1" playOrder="1">
<navPoint playOrder="1" id="toc-1">
<navLabel>
<text>menu</text>
</navLabel>
<content src="html/Page-0.html"/>
</navPoint>
<navPoint playOrder="2" id="toc-2">
<navLabel>
<text>Page-0</text>
</navLabel>
<content src="html/Page-1.html"/>
</navPoint>
<navPoint playOrder="3" id="toc-3">
<navLabel>
<text>Page-1</text>
</navLabel>
<content src="html/Page-2.html"/>
</navPoint>
これを目次階層化してみる。違いとしては、 </navPoint>の位置をずらすことで目次の階層化ができる。
<navPoint id="toc1" playOrder="1">
<navPoint playOrder="1" id="toc-1">
<navLabel>
<text>menu</text>
</navLabel>
<content src="html/Page-0.html"/>
<navPoint playOrder="2" id="toc-2">
<navLabel>
<text>Page-0</text>
</navLabel>
<content src="html/Page-1.html"/>
</navPoint>
<navPoint playOrder="3" id="toc-3">
<navLabel>
<text>Page-1</text>
</navLabel>
<content src="html/Page-2.html"/>
</navPoint>
</navPoint>
問題はここからで、html目次も同様に同じように階層化してみる。ただし死角目次が固定レイアウトで階層化した場合にどのように表示されるかというのの確認は必要。toc.ncxよりもhtml目次のほうが優先されるので、実際はhtml目次だけをいじるだけでいいかもしれない。
<nav epub:type="landmarks" id="landmarks" hidden="">
<h2>Guide</h2>
<ol>
<li><a epub:type="cover" href="cover.xhtml">表紙</a></li>
<li><a epub:type="toc" href="nav.xhtml">目次</a></li>
<li><a epub:type="bodymatter" href="0001.xhtml">本文</a></li>
</ol>
</nav>
<nav epub:type="toc" id="toc">
<h1>目 次</h1>
<ol>
<li class="chapter" id="toc2"><a href="0001.xhtml">一章</a></li>
<li class="chapter" id="toc3"><a href="0002.xhtml">一節</a></li>
<li class="chapter" id="toc4"><a href="0003.xhtml">二節</a></li>
</nav>
階層化部分に対して、html目次の場合は、htmlと<ol></ol></li>が追加されている。
<nav epub:type="landmarks" id="landmarks" hidden="">
<h2>Guide</h2>
<ol>
<li><a epub:type="cover" href="cover.xhtml">表紙</a></li>
<li><a epub:type="toc" href="nav.xhtml">目次</a></li>
<li><a epub:type="bodymatter" href="0001.xhtml">本文</a></li>
</ol>
</nav>
<nav epub:type="toc" id="toc">
<h1>目 次</h1>
<ol>
<li class="chapter" id="toc2"><a href="0001.xhtml">一章</a>
<ol>
<li class="chapter" id="toc3"><a href="0002.xhtml">一節</a></li>
<li class="chapter" id="toc4"><a href="0003.xhtml">二節</a></li>
</ol></li>
</nav>
実際に端末でどうのように表示されるかの確認は必要だと思う。
