<aside>ではなく<div>要素に注釈部分を記述

以前のエントリではfootnote指定を<aside>タグの属性として記述していたのですが、この状態ですとiBooksでは注釈部分は表示されません。今回は通常のテキストとしても表示させたかったので、<div>要素の属性としてfootnote指定をしました。以下のような感じです。

呼び出しファイル側：

<p>本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る本文テキスト入る<span class=super><a epub:type=”noteref” href=”#cyu001″>［★］</a></span>本文テキスト入る本文テキスト入る本文テキスト入る</p>

注釈ファイル側：

<div class=”start-1em”>
<div epub:type=”footnote” id=”cyu001″>
<p><span class=”gfont”>注釈タイトル</span></p>
<p>注釈テキスト入る注釈テキスト入る注釈テキスト入る注釈テキスト入る注釈テキスト入る</p>
</div>
</div>

なお今回は複数の段落ブロックを注として表示させるためにdiv要素に対してfootnote指定をしていますが、ブロック要素内の一部のテキストのみをポップアップ表示させたい場合は、span要素に対してfootnote指定をすることで実現できるようです。

リンクタグはネストの一番内側に記述する

以前のエントリーにも書いたのですが、リンクタグ（aタグ）はネストの一番内側に記述する必要があります。そうしないとiBooksでポップアップが動作しません。

本文テキスト入る<span class=super><a epub:type=”noteref” href=”#cyu001″>［★］</a></span>本文テキスト

ならOKですが、

本文テキスト入る<a epub:type=”noteref” href=”#cyu001″><span class=super>［★］</span></a>本文テキスト

ではダメです。

ポップアップウィンドウ内ではCSS指定は無視される

また、ポップアップウィンドウ内では一切のCSS指定が無視されます。このため、太字や書体指定など、CSS指定に依存する表現は使用しない方が良いと思われます。同様にルビも通常のテキストとして表示されてしまいます。ただ、こちらは<rp>タグを利用して「文字（ルビ）」のように表示させることで対処できそうです。今回はルビが無かったため試してはいませんが、ソース的にはこんな感じでしょうか。

<div class=”start-1em”>
<div epub:type=”footnote” id=”cyu001″>
<p><span class=”gfont”>注釈タイトル</span></p>
<p>注釈テキスト入る<ruby>注釈<rp>（</rp><rt>ちゅうしゃく</rt><rp>）</rp></ruby>テキスト入る注釈テキスト入る注釈テキスト入る注釈テキスト入る</p>
</div>
</div>

また、注釈部分に内部／外部問わずリンクを含めるのは、現状では避けた方が良いようです。内部リンクではタップした際にポップアップウィンドウの挙動がおかしなことになりますし、外部リンクではアプリケーションが落ちてしまうようです。

注釈部分のファイルサイズは30KB程度を目安に

正確な値は分からないのですが、どうやら呼び出す注釈部分のファイルサイズが大きすぎるとポップアップが動作しなくなるようです。おそらくiBooksのメモリ管理の関係かと思います。試してみた範囲では、XHTMLファイルのサイズを30KB以下程度に抑えることで回避できるようです。ただ、リンクの数に依存する可能性もありますので、正確なところはわかりません。

電書協ガイドのサブセット

　まず、この仕様は電書協ガイドのサブセットとして作成したものです。「電書協EPUB 3 制作ガイド」（以下電書協ガイド）およびそのサブセットについての解説は、先日ITmediaに掲載された@lost_and_found氏の記事が参考になるでしょう。
　多少補足をしておくとすれば、電書協ガイドおよびそのサブセットは「量産ラインのためのもの」であるという点です。今後、出版社ベースの電子書籍の制作は大きく分けて「紙の書籍の内容をほぼそのまま電子化するもの」と、「デザイナーが関与して企画から作り起こすもの」に2分化されていくものと思いますが、電書協ガイドはこのうちの前者のためにあるものと思います。近い将来に期待される「新刊全点電子化」といった流れのためには、必然的にこうしたガイドラインが必要だったとも言えるでしょう。全点電子化の1点1点についてフルカスタマイズで丁寧に時間とコストをかける余裕はどんな出版社にもありませんから、こういった形で一定のルールを定め、効率よく電子化を行う必要があるのです。
　従って、「電書ラボEPUB制作仕様」もまた、基本的に「紙の書籍の内容をほぼそのまま電子化した電子書籍」を制作するためのものです。ただし、電書協ガイドや「KADOKAWA-EPUB制作仕様」などの先行するサブセットとは性格が異なる部分もあります。

出版社/制作会社のための制作ガイドライン

　電書協ガイドやそれに続く「KADOKAWA-EPUB制作仕様」などといった先行ガイドラインとこの「電書ラボEPUB制作仕様」の一番大きな性格の違いは、「電書ラボEPUB制作仕様」は、出版社や制作会社が直に使うことを想定したガイドラインだという点になると思います。
　電書協ガイドの最も大きな目的は、制作されるEPUBの形を固定し、各ビューア・ストアにその形式に準じて作られたコンテンツの適切な表示を要請することで、ワンソースで多くのストアに対応できるようにする事であるように思います。ストアごとにEPUBコンテンツの細部を作り分けなければならない状況が続いていてはとてもではないですが量産は望めませんから、これはとても大きな意義のあることです。
　ただし、それが第一義である以上、電書協ガイドは基本的には「ストアの方を見て作られたガイドライン」であるとも言え、制作者向けには基本的に「こうしたコードで作りなさい」としか示されていないため、出版社や制作会社の現場で使うためには、もうワンクッションが必要だったのではないかと思います。
　具体的には大きな出版社では、電子化の担当者が「電書協ガイドに沿ったコンテンツを制作するための社内ガイドライン」を作り、それをもとにコンテンツ制作を行ってきたのではないでしょうか。
　この状態ですと、社内に専任の電子化担当者を置くことが出来ない中小規模の出版社には依然として敷居が高く、コンテンツ電子化の格差が広がりかねない状況であるようにも思われます。

　「電書ラボEPUB制作仕様」は、この状況を鑑みて、中小出版社向けに「電書協ガイドに従って多くのストアにワンソースで供給できるEPUBコンテンツを制作するためのガイドライン」として使っていただくために提供するものです。同時に、制作会社と出版社との間で、「何をやり、何をやらないか」を事前にしっかり線引きをしておき、トラブルを防ぐためのツールとして活用していただければと思っています。

各項目を「やらないこと」を含めてホワイトリストとして提示

　「電書ラボEPUB制作仕様」の基本的な制作方針として、従来の出版の要素に即して各項目を書き出し、「やらないこと」まで含めてリストアップを行いました。同時に、「やることはできるが、工数がかかる項目」をLV2、「一部のビューアが対応しておらず、一部のストア専用のコンテンツとして制作せざるを得なくなる項目」をLV3とし、それぞれオプション設定要素としました。もちろん各出版社・制作会社が実コンテンツを制作してゆく中で、リストから外れた要素が出てくることも当然考えられるのですが、そういった部分は積極的にフィードバックしていただいてリストに加えてゆき、同時に各ストアビューアの進化を継続的に追いかけて各リスト内容を変更してゆく必要があるように思っています。

マークアップ指針自体は電書協ガイドやKADOKAWA-EPUB制作仕様に準ずる

　「電書ラボEPUB制作仕様」は以上のような性格のものですので、マークアップ指針自体にはほとんど独自性はありません。いずれサンプルも公開する予定ですが、KADOKAWA-EPUB制作仕様をベースにKADOKAWAの独自項目（OPF内のKADOKAWA表記など）を改変した程度のものになると思っています。KADOKAWA-EPUB制作仕様の大きな特長であるFixed-Layoutのハイブリッド仕様も「電書ラボEPUB制作仕様」でも使用できるようにするつもりでおります。

JISX0213「外」の文字の使用を考慮

　電書協ガイドや先行する各サブセットと比較して、一点だけ大きく踏み込んでいる点があります。それは、「使用できる文字の幅」です。電書協ガイドでは、文字はJISX0213：2004内のものだけを使用するように定められていました。これは現行最新の日本語の文字集合規格ですので、安全な範囲設定と言えます。ただ、実際に各社のビューアで使用されているフォントはJISX0213：2004ではなくAdobe-Japan 1の規格に即して作られており、JISX0213：2004外の文字も含んでいます。このため、「フォントには入っており、実態としては使用できるにも関わらず、厳密に電書協ガイドに準じた場合には外字画像にせざるを得ない文字」というものが存在していました。
　例を挙げますと、U+9AD9の「髙」^※1や、U+2474〜U+2487の「⑴」〜「⒇」などはこれに相当し、DTPのデータなどでもそれなりに使用されている文字であるにも関わらず、EPUB制作時には外字画像にせざるを得ない状況でした。外字画像は一部のビューアでユーザが背景色を黒に設定した場合に背景に溶け込んで視認できなくなるなるなどのデメリットが依然として存在し、可能な限り減らした方が良いにも関わらず、こうした状況が続いていたわけです。
　ただ、こうした文字に使用の保証を与えるには、JISX0213:2004に代わる何らかの基準が必要になります。そこで、「電書ラボEPUB制作仕様」では、あらかじめ各ビューアでの文字の表示状況を調査し、使用できる文字をホワイトリストの形で提示するとともに、将来的にはコンテンツ内の使用文字チェッカーを提供することでこれに応えることとしました。リスト・チェッカー共にまだ未提供ですが、そちらはもうしばらくお待ちいただければと思います。

XHTML内の各ページ区切り箇所にタグを記入

　まず、XHTMLファイル内の各ページの区切り箇所にタグを記入しました。ここの情報によれば、ページ数をコンテンツの一部として記述する記法や、ブロックレベル要素に記述する記法もあるようですが、今回は「Example 2」の記法に従ってコンテンツ内にページ数自体は表示させない形で記入しました。

<p>　<span epub:type=”pagebreak” id=”page1″ title=”1″/>ページ１本文入る　ページ１本文入る　ページ１本文入る　ページ１本文入る　ページ１本文入る　ページ１本文入る　ページ１本文入る　ページ１本文入る　ページ１本文入る　ページ１本文入る　ページ１本文入る　ページ１本文入る　ページ１本文入る　ページ１本文入る　ページ１本文入る　ページ１本文入る　ページ１本文入る　ページ１本文入る　ページ１本文入る　ページ１本文入る　ページ１本文入る　ページ１本文入る　ページ１本文入る　ページ１本文入る　ページ１本文入る　ページ１本文入る　ページ１本文入る　ページ１本文入る　<span epub:type=”pagebreak” id=”page2″ title=”2″/>ページ２本文入る　ページ２本文入る　ページ２本文入る　ページ２本文入る　ページ２本文入る　ページ２本文入る　ページ２本文入る　ページ２本文入る　ページ２本文入る　ページ２本文入る　ページ２本文入る　ページ２本文入る　ページ２本文入る　ページ２本文入る　ページ２本文入る　ページ２本文入る　ページ２本文入る　ページ２本文入る　ページ２本文入る　ページ２本文入る　ページ２本文入る　ページ２本文入る　ページ２本文入る　ページ２本文入る　ページ２本文入る　ページ２本文入る　ページ２本文入る　ページ２本文入る　<span epub:type=”pagebreak” id=”page3″ title=”3″/>ページ３本文入る　ページ３本文入る　ページ３本文入る　ページ３本文入る　ページ３本文入る　ページ３本文入る　ページ３本文入る　ページ３本文入る　ページ３本文入る　ページ３本文入る　ページ３本文入る　ページ３本文入る　ページ３本文入る　ページ３本文入る　ページ３本文入る　ページ３本文入る　ページ３本文入る　ページ３本文入る　ページ３本文入る　ページ３本文入る　ページ３本文入る　ページ３本文入る　ページ３本文入る　ページ３本文入る　ページ３本文入る　ページ３本文入る　ページ３本文入る　ページ３本文入る　</p>

　というような感じで、この「<span epub:type=”pagebreak” id=”page××” title=”××”/>」というタグを各ページ区切りの箇所に挿入していきます。「××」の箇所の番号が、表示させるページ番号にあたります。

ページのリストをNAVファイル内に記入

　次に、NAVファイル（電書協ガイドのフォーマットでは「navigation-documents.xhtml」、論理目次の表示用ファイル）内に、ここの情報を参考に各ページのリストを記入しました。ここのリストは各ページに記入したページ区切り用のタグと1対1で対応するものですので、id番号などは厳密に同じにしておく必要があります（通常のページリンクと同様です）。

<nav epub:type=”page-list”>
<ol>
<li><a href=”p-001.xhtml#page1″>1</a></li>
<li><a href=”p-001.xhtml#page2″>2</a></li>
<li><a href=”p-001.xhtml#page3″>3</a></li>
</ol>
</nav>

iBooksで表示してみる

　完成したテストファイルをiBooksで表示させてみました。目次のメニューを表示させますと、ページ下部に「プリントされたページ番号を表示するには、タップします」という表示が出ています。これをタップすることで目次内の表示ページ番号が実ページのページ番号に切り替えられ、またコンテンツ内にもページ番号が表示されるようです。