─グーテンベルクの遙か彼方へ─このブログはEPUB3をはじめとした電子書籍制作の現場からの「現地レポート」を目指しています。電子書籍制作、アプリケーション開発など、多方面の方々からの積極的なご意見をお待ちしております。※『InDesign→EPUB3用XHTML作成ワークフロー』は通常エントリに移動しました。『ジャンル別まとめ/ダウンロード』からアクセスできます。カテゴリーのアーカイブepub-type=”noteref”を使った脚注ポップアップ2014/06/09先日お手伝いさせていただいた本で、以前このブログでもちょっと紹介をした「epub-type=”noteref”」を使った脚注のポップアップを実際に使いました。これはリンク自体は巻末の脚注ページに貼り、脚注ポップアップに対応しているiBooksでは内容がポップアップ表示され、対応していないその他のビューアでは通常のリンクとして動作するというものです。これに関して解説を書いて欲しいというご要望をいただきましたので、簡単にまとめさせていただきます。以前のエントリではfootnote指定を<aside>タグの属性として記述していたのですが、この状態ですとiBooksでは注釈部分は表示されません。今回は通常のテキストとしても表示させたかったので、<div>要素の属性としてfootnote指定をしました。以下のような感じです。class=”gfont”>注釈タイトル</span></p><p>注釈テキスト入る注釈テキスト入る注釈テキスト入る注釈テキスト入る注釈テキスト入る</p></div></div>なお今回は複数の段落ブロックを注として表示させるためにdiv要素に対してfootnote指定をしていますが、ブロック要素内の一部のテキストのみをポップアップ表示させたい場合は、span要素に対してfootnote指定をすることで実現できるようです。リンクタグはネストの一番内側に記述する以前のエントリーにも書いたのですが、リンクタグ(aタグ)はネストの一番内側に記述する必要があります。しないとiBooksでポップアップが動作しません。class=super>[★]</span></a>本文テキストではダメです。ポップアップウィンドウ内ではCSS指定は無視されるまた、ポップアップウィンドウ内では一切のCSS指定が無視されます。このため、太字や書体指定など、CSS指定に依存する表現は使用しない方が良いと思われます。同様にルビも通常のテキストとして表示されてしまいます。こちらは<rp>タグを利用して「文字(ルビ)」のように表示させることで対処できそうです。今回はルビが無かったため試してはいませんが、ソース的にはこんな感じでしょうか。class=”gfont”>注釈タイトル</span></p><p>注釈テキスト入る<ruby>注釈<rp>(</rp><rt>ちゅうしゃく</rt><rp>)</rp></ruby>テキスト入る注釈テキスト入る注釈テキスト入る注釈テキスト入る</p></div></div>また、注釈部分に内部/外部問わずリンクを含めるのは、現状では避けた方が良いようです。内部リンクではタップした際にポップアップウィンドウの挙動がおかしなことになりますし、外部リンクではアプリケーションが落ちてしまうようです。注釈部分のファイルサイズは30KB程度を目安に正確な値は分からないのですが、どうやら呼び出す注釈部分のファイルサイズが大きすぎるとポップアップが動作しなくなるようです。iBooksのメモリ管理の関係かと思います。試してみた範囲では、XHTMLファイルのサイズを30KB以下程度に抑えることで回避できるようです。リンクの数に依存する可能性もありますので、正確なところはわかりません。以前試したのは約1年前だったのですが、この部分に関する限り実装状況はほとんど変わっていないようです。Assetguideに記述のないノウハウも必要になりました。このepub-type=”noteref”要素を利用した脚注ポップアップは、Javascriptを使った手法などと異なり、電書協ガイドに沿って制作したコンテンツにそれほど大きく手を加えることなく、コンテンツのワンソース性を保ったまま対応ビューアでのインタラクティブ性を期待できるところは魅力です。現状ではポップアップ表示に対応しているのはiBooksのみですが、将来的に他社のビューアが対応してくれば、コンテンツ側には特に手を加えることなくポップアップ表示されるようになることも期待できます。制作したコンテンツを実際に読んでみればわかりますが、注釈の多い本をiBooksのポップアップで参照しながら読んでみると、これは明らかに紙の本よりも読者にとっての利便性は上です。いった本の電子化を考えられている出版社の方は、この手法を検討してみるのも悪くないのではないかと思います。(2014.6.9)注釈エリア内のリンク記述に関して説明を追記いたしました。情報ありがとうございます。Tajimaこちらにて、電子書籍&Web制作を担当しています。このブログは、EPUB3をはじめとした電子書籍制作担当オペレータからの、「電子書籍の制作時にたとえばこんな問題が出てきていますよ」的な「現地レポート」です。整うことを願って、現場からの声を発信していこうと目論んでおります。当ブログ内の記事・資料は、私の所属しております組織の許諾を得て掲載していますが、内容は私個人の見解に基づくものであり、所属する組織の見解を代表するものではありません。本ブログの情報・ツールを利用したことにより、直接的あるいは間接的に損害や債務が発生した場合でも、私および私の所属する組織は一切の責任を負いかねます。License.『電書魂』のコンテンツはクリエイティブ・コモンズによりライセンスされています。記事名の記載と、記事へのリンクを貼って頂ければ、コンテンツを自由にご利用いただくことができます。