Kindleの固定レイアウトのサンプルを見ていたら、ダブルタップでテキストを画像上にポップアップできる機能があることを知り、それを利用して写文集を作ってみました。

　サンプルはこのページにある「Graphic Novel example」というリンクからダウンロードできる「ComicSample」という圧縮ファイルの中にある「The Absurd ABC」というmobiファイル。圧縮ファイルの中には他にmobiのソースファイルも入っています。

　「The Absurd ABC」というサンプル本には、Kindleの「領域拡大（Region Magnification）」の実例がたくさん入っていますが、今回目を引いたのは、最初の「copyright」のページの、画像による文字ページをダブルタップすると、テキストがポップアップされる機能です。最初はポップアップも画像かと思ったのですが、よく見るとテキストのよう。ソースのcopyright.htmlをエディターで開いてみると、確かにテキストがbody要素に書き込まれています。

　☞☞　

　で、思いついたのが、これを利用したら面白い写文集ができるのではないか、ということ。以前から撮り溜めた山の写真を素材に電子本を作ってみたかったのですが、素人写真を固定レイアウトでただ並べるだけでは芸がないので、文章も加えて色を着けてみたいところ。しかし、固定・リフロー混在にするにしても、固定オンリーで行くにしても、写真ページと文章ページが入り交じるというのは、少し冗長なような気がします。その点、写真をダブルタップして文章が表示できれば、無駄のない作りになります。

　copyright.htmlをのぞくと何やら幾つもdivタグが重ねられています。画像の配置に加えて、ダブルタップする領域やテキストをポップアップする領域が指定されているようです。IDが振られたものも３つほどあります。このサンプル本では複数のページのそれぞれ異なった場所で領域拡大がセットされていますので、それぞれにIDを振っているのでしょうが、今回の写文集ではポップアップの仕様は全ページ同一でオーケー。そこでややこしい構造に頭を悩ませながら、ID指定をCLASS指定に変更。

<div class=”fs”>
<div>
<img src=”../images/01.jpg” class=”singlePage” />
</div>
<div class=”bun”>
<a class=”app-amzn-magnify” data-app-amzn-magnify='{“targetId”:”bun-magTargetParent”, “ordinal”:1}’></a>
</div>
<div id=”bun-magTargetParent” class=”target-mag-parent”>
<div class=”target-mag-lb”></div>
<div class=”target-mag”></div>
<div class=”text”>
<p class=”part”>1.</p>
<p>
九十九折の登山道を、<br />
…

　真ん中あたりの「data-app-amzn-magnify」が領域拡大のスイッチで、その下のテキスト画面の設定は３層重ねになっているようです。もちろんCSSの方も、これに合わせて適宜書き換え、テキスト画面のサイズ・色・透明度なども変更しています。フォントの指定はserifだけではなぜかゴシックになってしまいますが、TBMinchoを直接指定すると明朝にできました。

　コーディングにはまったく自信がありませんが、これで何とか目的の文章ポップアップ型写文集が実現できています。作り方のせいなのか、環境の問題なのか、若干動作が不安定になる時もありますが、本を開き直せば戻りますので、大過はなさそう。動作の具合はKindleストアの無料サンプルで確認できます。また、DRMは設定していませんので、calibreというソフトを使ってKindle本をEPUBに変換して、ソースを流用することも可能だと思います。

　☟☟