epub-type=”noteref”を使った脚注ポップアップ

先日お手伝いさせていただいた本で、以前このブログでもちょっと紹介をした「epub-type=”noteref”」を使った脚注のポップアップを実際に使いました。これはリンク自体は巻末の脚注ページに貼り、脚注ポップアップに対応しているiBooksでは内容がポップアップ表示され、対応していないその他のビューアでは通常のリンクとして動作するというものです。これに関して解説を書いて欲しいというご要望をいただきましたので、簡単にまとめさせていただきます。

<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以下程度に抑えることで回避できるようです。ただ、リンクの数に依存する可能性もありますので、正確なところはわかりません。

以前試したのは約1年前だったのですが、この部分に関する限り実装状況はほとんど変わっていないようです。正直今回もかなりの試行錯誤が必要でしたし、リンクタグの記述位置やファイルサイズ上限など、iBooks Assetguideに記述のないノウハウも必要になりました。

ただ、このepub-type=”noteref”要素を利用した脚注ポップアップは、Javascriptを使った手法などと異なり、電書協ガイドに沿って制作したコンテンツにそれほど大きく手を加えることなく、コンテンツのワンソース性を保ったまま対応ビューアでのインタラクティブ性を期待できるところは魅力です。また、現状ではポップアップ表示に対応しているのはiBooksのみですが、将来的に他社のビューアが対応してくれば、コンテンツ側には特に手を加えることなくポップアップ表示されるようになることも期待できます。

制作したコンテンツを実際に読んでみればわかりますが、注釈の多い本をiBooksのポップアップで参照しながら読んでみると、これは明らかに紙の本よりも読者にとっての利便性は上です。そういった本の電子化を考えられている出版社の方は、この手法を検討してみるのも悪くないのではないかと思います。

(2014.6.9)

注釈エリア内のリンク記述に関して説明を追記いたしました。香月さま。情報ありがとうございます。

(2014.6.9追記)

コメント / トラックバック 1 件

  1. 電書魂「epub-type=”noteref”を使った脚注ポップアップ」公開 より:

    […] 電書魂 – epub-type=”noteref”を使った脚注ポップアップ […]

コメントをどうぞ

プロフィール
Jun Tajima

こちらにて、電子書籍&Web制作を担当しています。
このブログは、EPUB3をはじめとした電子書籍制作担当オペレータからの、「電子書籍の制作時にたとえばこんな問題が出てきていますよ」的な「現地レポート」です。少しでも早い段階で快適な電子書籍閲覧・制作環境が整うことを願って、現場からの声を発信していこうと目論んでおります。

当ブログ内の記事・資料は、私の所属しております組織の許諾を得て掲載していますが、内容は私個人の見解に基づくものであり、所属する組織の見解を代表するものではありません。また、本ブログの情報・ツールを利用したことにより、直接的あるいは間接的に損害や債務が発生した場合でも、私および私の所属する組織は一切の責任を負いかねます。