‘未分類’ カテゴリーのアーカイブ

EPUB3の実ページリンクを試してみた

2014/04/29

 リフロー型電子書籍における「ページ」は、利用者がドキュメントを開いた際にデバイスの画面サイズや設定された文字のサイズに応じて自動生成されるもので、紙の本における「ページ」のように、固定されたものではありません(従って「○○ページ参照」というような記述が使えないわけです)。ただ、EPUB3には実は元の紙の本のページを記述しておく仕様も定義されており、これは教育系コンテンツでのニーズから出たもののようです。
 まあわかりやすいところで言えば、「教科書の○○ページを開いてください」と先生が言って授業を進める場合に必要になるといったところでしょうか。将来的にはこれは先生と生徒の間でのコンテンツ表示箇所の同期などによって解決されていくのかもしれませんが、当面は紙の教科書との併用も視野に入れなければならず、現状では元の紙の本のページの情報をEPUB内にも記述しておく必要があるというのは理解できるところです。
 現在この機能を利用できるのは、私が観測した範囲ではiOS版のiBooksとMurasakiぐらいのようですが、どんなものなのか試してみましたのでお読みいただければ幸いです。

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

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

<p> <span epub:type=”pagebreak” id=”page1″ title=”1″/>ページ1本文入る ページ1本文入る ページ1本文入る ページ1本文入る ページ1本文入る ページ1本文入る ページ1本文入る ページ1本文入る ページ1本文入る ページ1本文入る ページ1本文入る ページ1本文入る ページ1本文入る ページ1本文入る ページ1本文入る ページ1本文入る ページ1本文入る ページ1本文入る ページ1本文入る ページ1本文入る ページ1本文入る ページ1本文入る ページ1本文入る ページ1本文入る ページ1本文入る ページ1本文入る ページ1本文入る ページ1本文入る <span epub:type=”pagebreak” id=”page2″ title=”2″/>ページ2本文入る ページ2本文入る ページ2本文入る ページ2本文入る ページ2本文入る ページ2本文入る ページ2本文入る ページ2本文入る ページ2本文入る ページ2本文入る ページ2本文入る ページ2本文入る ページ2本文入る ページ2本文入る ページ2本文入る ページ2本文入る ページ2本文入る ページ2本文入る ページ2本文入る ページ2本文入る ページ2本文入る ページ2本文入る ページ2本文入る ページ2本文入る ページ2本文入る ページ2本文入る ページ2本文入る ページ2本文入る <span epub:type=”pagebreak” id=”page3″ title=”3″/>ページ3本文入る ページ3本文入る ページ3本文入る ページ3本文入る ページ3本文入る ページ3本文入る ページ3本文入る ページ3本文入る ページ3本文入る ページ3本文入る ページ3本文入る ページ3本文入る ページ3本文入る ページ3本文入る ページ3本文入る ページ3本文入る ページ3本文入る ページ3本文入る ページ3本文入る ページ3本文入る ページ3本文入る ページ3本文入る ページ3本文入る ページ3本文入る ページ3本文入る ページ3本文入る ページ3本文入る ページ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で表示させてみました。目次のメニューを表示させますと、ページ下部に「プリントされたページ番号を表示するには、タップします」という表示が出ています。これをタップすることで目次内の表示ページ番号が実ページのページ番号に切り替えられ、またコンテンツ内にもページ番号が表示されるようです。

 まあ今回の内容はIDPFの公式ページにしっかり情報がありましたので、そこを見て書けばいいという話ではあるのですが、使用例が少ないせいかソースにたどり着くまでに少々時間がかかりましたので(@lost_and_found氏、情報提供感謝です)、メモ代わりに情報を残しておきます。

テストファイルはこちら
>>

(2014.5.1)

Kindle PaperWhite2013のリンクが脚注として表示される現象について

2014/03/14

 検証機としてKindle PaperWhite2013を入手したのですが、どうやら大きめの地雷を発見してしまったっぽいので報告です。

 どうもPaperWhite2013の新機能の脚注ポップアップ周りにバグがあるらしく、通常のリンクを脚注として表示してしまうことがあるようです。なお、Kindle PaperWhiteのファームウェアは「Kindle5.4.2(2155730032)」です。一方で正常にリンクが動作する場合もあり、正直条件が確定できませんでした。以下、その報告です。

普通に記述したリンクタグが脚注として表示されてしまう

 リンクのタグは例えば以下のような感じです。

リンク元:

<p>二 遠野の町は南北の川の落合にあり。以前は<a class=”cyu” href=”p-009.xhtml#ref-002″>七七十里<span class=”key” id=”key-002″>(2)</span></a>とて、七つの渓谷おのおの七十里の奥より売買の貨物を聚め、その市の日は馬千匹、人千人の賑わしさなりき。四方の山々の中に最も秀でたるを早池峯という、北の方附馬牛の奥にあり。東の方には六角牛山立てり。石神という山は附馬牛と<a class=”cyu” href=”p-009.xhtml#ref-003″>達曾部<span class=”key” id=”key-003″>(3)</span></a>との間にありて、その高さ前の二つよりも劣れり。大昔に女神あり、三人の娘を伴ないてこの高原に来たり、今の<a class=”cyu” href=”p-009.xhtml#ref-004″>来内<span class=”key” id=”key-004″>(4)</span></a>村の伊豆権現の社あるところに宿りし夜、今夜よき夢を見たらん娘によき山を与うべしと母の神の語りて寝たりしに、夜深く天より霊華降りて姉の姫の胸の上に止りしを、末の姫眼覚めて窃にこれを取り、わが胸の上に載せたりしかば、ついに最も美しき早池峯の山を得、姉たちは六角牛と石神とを得たり。若き三人の女神おのおの三の山に住し今もこれを領したもう故に、遠野の女どもはその妬を畏れて今もこの山には遊ばずといえり。</p>

リンク先:

<p id=”ref-002″><a class=”cyu” href=”p-003.xhtml#key-002″>(2)</a>この一里は小道すなわち坂東道なり、一里が五丁または六丁なり。</p>
<p id=”ref-003″><a class=”cyu” href=”p-003.xhtml#key-003″>(3)</a>タッソベもアイヌ語なるべし。岩手郡玉山村にも同じ大字あり。</p>
<p id=”ref-004″><a class=”cyu” href=”p-003.xhtml#key-004″>(4)</a>上郷村大字来内、ライナイもアイヌ語にてライは死のことナイは沢なり、水の静かなるよりの名か。</p>

 特に変わった書き方をしている訳でもないごく当たり前のリンク指定で、タグは電書協ガイドのものをそのまま用いています。普通に考えればこれで脚注にはならないのですが、手元のPaperWhite2013では以下のように脚注として表示されます。

リンクが脚注として表示されてしまう

まあこの箇所に関しては注釈へのリンクですので結果オーライとも言えるのですが、これが例えば目次のリンクでも発動してしまいますので困ったことになります。

目次でも・・・

別の実機でもテストしてみた

 ちょっとラチがあきませんので、Kindle PaperWhite2013をお持ちの、ブログ見て歩く者を運営されているライターの鷹野凌さんにご協力をいただき、別の実機でもテストを試みました。結果はほぼ同じでした。ただ、全く同じコンテンツで正常に動作したリンクと脚注として表示されてしまったリンクに差異が見られ、正直法則性が全く読めません。鷹野さんのPaperWhite2013のファームウェアは「5.4.2.1(2187320002)」とのことでしたので、もしかしたらファームウェアの差によって挙動が変わるのかも知れませんが、率直に言ってそんなことで「リンク」などという基本的な部分の動作の挙動が変わられてしまっては困ります。

 別のマークアップ方式ではどうなるだろうということで、電書ちゃんねるの高瀬拓史さんにもご協力をお願いし、でんでんコンバーターの生成した注釈相互リンクコンテンツでもテストを行いました。こちらのソースは以下の通り※1

リンク元:

<p>一 女鹿たづねていかんとして<a id=”fnref_1″ href=”#fn_1″ rel=”footnote” class=”noteref” epub:type=”noteref”>1</a>白山の御山かすみかゝる<span class=”upright”>〻</span></p>
<p>一 うるすやな<a id=”fnref_2″ href=”#fn_2″ rel=”footnote” class=”noteref” epub:type=”noteref”>2</a>風はかすみを吹き払て、今こそ女鹿あけてたちねる<span class=”upright”>〻</span></p>

リンク元:

<div class=”footnotes” epub:type=”footnotes”>
<hr />
<ol>
<li>
<div id=”fn_1″ class=”footnote” epub:type=”footnote”>
<p>して、字は〆てとあり。不明&#160;<a href=”#fnref_1″>&#9166;</a></p>
</div>
</li>
<li>
<div id=”fn_2″ class=”footnote” epub:type=”footnote”>
<p>播磨檀紙にや。&#160;<a href=”#fnref_2″>&#9166;</a></p>
</div>
</li>
</ol>
</div>

 こちらではリンク元の側がそもそもリンクとして動作してくれませんでした。もちろんどちらのコンテンツも、他のEPUBビューアでは少なくとも相互リンクとしてはきっちり動作してくれています。なんだかもうわけがわかりません。

そもそも脚注のマークアップ記法説明ドキュメントが見あたらない

 そもそもKindle PaperWhite2013の脚注ポップアップ対応は先日の制作者向けセミナーでもPaperWhite2013の新機能として説明されていましたが(鷹野凌さんのレポート記事)、最新のKindle Publishing Guidelineにも記法の説明がありません。
 制作者サイドとして切に望みたい対応は、epubの標準的な脚注記法に合わせて実装してくれることなのです。ですがどうもそうはなっていないようです。実際に「<a epub:type=”noteref” href=”p-000.xhtml#ref-000″>○○</a>」のような形でIDPFの脚注仕様に合わせたマークアップもやってみたのですが、この方法で明示的に脚注指定した箇所だけでなく、通常のリンクとしてマークアップした箇所まで脚注として表示されてしまいました(参考:「iBooksの注ポップアップを試してみた」)。現状、Kindle向けコンテンツでは明示的に脚注リンクを指定する方法が提示されていない状態です。

 また、もうひとつの問題は、Amazonが校正用ビューアとしてリリースしている「Kindle Previewer」上ではこの現象は再現せず、あくまでKindle PaperWhite2013の実機上でのみ発現する現象であることです。つまり、「Kindle Previewer」がプレビュー用ツールとしての役目を果たせていません。Kindle Previewerできっちり校正をかけリリースしたコンテンツが、実際の読者の手元で見たときにはエラーになってしまう可能性があるというのでは、何のためのプレビュー用ツールかわかりません。

 少なくとも今回のケースで、コンテンツ制作側での対処は無理です。何しろごく当たり前のリンク指定が脚注として表示されてしまい、発生条件が機械によって変わるのですから。この件に関しては、Amazonには早急な原因究明と、とりあえずの処置としての注釈ポップアップ処理の停止措置を望みたく思っています。

検証に使ったファイルはこちら
>>[download id=”32″]

 Kindleに限らず、現状電子書籍のビューアはまだまだ不具合が多く、機能面も必ずしも十分とは言えません。ただ、これは積極的に声を上げ、修正・改良を促すことで将来的にきちんとしたものを提供してもらうという気構えが制作者サイドにも求められるのではないかと思います。Amazonのフィードバック窓口はこちらです。みなさんどしどし意見を寄せ、修正すべき点はどんどん修正してもらうのが良いのではないかと思います。

※1 EPUBの仕様に従って明示的に脚注を指定しているマークアップとのこと。

(2014.3.17)

フィックス型EPUB3作成アプリを作ってみた

2014/01/16

OMUSUBI EPUBMAKER

 あけましておめでとうございます。もう1月半ば過ぎていますが、今年初更新なのであえて書かせていただきました(笑)。何を隠そう今回のアプリ作成に手間取って更新遅れました。すみません。

 さて、今回発表する「OMUSUBI EPUBMAKER」は、コミックなどで使われる、画像をまとめてEPUBのパッケージの形にした「フィックス型」EPUB3の作成アプリです。この目的ではもうすでにいくつかのソリューションが出ていまして、例えばWakuFactoryさん(お世話になってます!)の「mkepub 1.4」などがあったわけですが、これはターミナルから利用するコマンドラインツールのため、若干敷居の高い面がありました。そこで、Macで使えるGUIアプリとしてスクリプトの練習を兼ねて作ってみたわけです。ごく単純なEPUBパッケージアプリで、高度なことはなにも出来ませんが、気軽にフィックス型のEPUBを作りたいという要望には応えられると思っています。また、インタラクティブなEPUB作りのためのベース生成用としても使えると思います。ソフト名は、ごはんを握っておむすびを作るように、画像の束から手軽にEPUBを作れるアプリというようなところから付けました。もっとカジュアルに、それこそPDFの代わりくらいの感覚でEPUBを使ってほしいなという願いを込めております。

 こちらのアプリは個人使用に関してはフリーで提供させていただきますので、ご自由にお使いください。書誌情報内にメタ情報でクレジットが入りますが、それ以外の制限はありません。
 ただし、個人向けということでISBNやJP-eコードなどの出版社向けID情報の入力機能は外しています(出版社ごとに要件が異なるためカスタムにせざるを得ません)。

 ビジネス利用のために必要な場合などのカスタマイズは別途こちらの窓口からご依頼下さい。私の所属する組織で承らせていただきます。

使い方

このアプリは画像サイズの取得およびサイズ変換にフリーの画像操作・変換ソフト「ImageMagick」を使用します。こちらなどからMac用パッケージを取得し、あらかじめインストールをしておいて下さい。その後「OMUSUBI EPUBMAKER」を立ち上げ、「設定」タブを開いてインストールフォルダを指定します。デフォルトでは“/opt/ImageMagick/”にインストールされるはずで、この状態であれば設定の必要はありません。

1 変換元画像の準備

 任意のフォルダに素材として使う画像を準備しておきます。形式はjpgもしくはpng、カラーモデルはRGBにしてください(jpg/png形式以外の画像はパッケージ化されません)。Finder上で画像をリネームし、ページ順に並ぶようにしておきます。連番がラクだと思います※。なお、1番目の画像を自動的にカバー画像として設定します。全画像の縦横のピクセル数を統一しておくのが望ましいです。

※「001」「002」のように、0で埋めて桁数を揃える形で連番の命名をしてください。「1」「2」「10」「11」のような形ですと、現状ではページの並び方が狂います。次バージョン以降で対処する予定です。

2 書誌情報の入力

 アプリを起動し、各種書誌情報を入力します。制作者名は3名まで対応しています。出版者名は任意入力です。

3 目次情報の入力

 目次が必要な場合は情報を入力します。なお、ここで言う目次はコンテンツ内に表示される目次ではなく、ビューアのメニューから呼び出せる「論理目次」です。2014年1月現在、Kindleの iOS版など論理目次の情報が利用出来ないRSも数多くありますが、iBooks、Kinoppy、Koboなどでは問題なく利用できます。
 目次として項目設定したいページの変換元画像のファイル名を表の「設定する画像名(拡張子込み)」に拡張子込みで記入し、目次に表示したいテキストを「目次表示テキスト」に記入していけばOKです。デフォルトでは最初の6行ぶんが入力可能な状態です。さらに項目を入力するには、「+」ボタンを押して行を増やし、順次項目を入力してください。「−」ボタンを押すと最後の1行が消去されます。
 目次を全く指定しなかった場合、「表紙」の項目だけが目次に入ります。

4 綴じ方向の選択

 「右綴じ」「左綴じ」のいずれかを選択してください。通常縦書き文書は右綴じ、横書き文書は左綴じです。EPUB3では綴じ方向の混在はできませんので、必ずいずれかを選んでください。デフォルトでは「右綴じ」が選択されています。

5 見開き/単ページの選択

 「見開き」「単ページ」のいずれかを選択してください。EPUB3にはページ配置の指定項目(page-spread)があり、これを各ページに指定することで見開きレイアウトが実現できます。単ページを指定した場合は画面中央に各ページが配置されます(rendition:page-spread-center)。ただし、iBooksなどまだ指定を反映しないビューアも数多くあります。Readium等ではページ指定が反映されて表示可能です。デフォルトでは「見開き」が選択されています。

6 元画像のフォルダを選択

 変換元画像のフォルダを選択し、指定します。

7 リサイズ画像サイズ/画質を指定

 このアプリは画像のサイズを自動的にリサイズし、パッケージ化しますが、リサイズの際の画像サイズ(長辺)を指定することもできます。変更が必要なら「設定」タブをクリックしてドロワーを展開し、数値入力を行ってください。数値の上限などはありませんが、iBookStoreなどEPUB内使用画像のサイズに制限を設けているストアもありますので、ケースに応じて適切な値を入力するようにしてください。
 同じく、JPEG圧縮時の画質も1〜100の間で指定できます。数字が大きいほど高画質ですが、その分ファイルサイズも大きくなります。デフォルトの画質は70です。
 PNG圧縮の画質は、減色をするかどうかを選択出来る他、減色時の色数を2〜256色で選択できます。デフォルトの色数は256色です。
 画像サイズ/画質はツールが前回の設定値を記憶します。また、「デフォルトに戻す」ボタンで既定値に戻すことができます。

8 EPUBパッケージの作成

 「作成」ボタンを押すと、EPUBパッケージが元画像のフォルダと同じ階層の「タイトル名」フォルダ内に作成されます。ファイル名は作成年月日/時刻+「.epub」です。

ダウンロードはこちら
>>OMUSUBI EPUBMAKER
Mac OS X 10.6/10.7/10.8/10.9にて動作確認済みです

※10.7以降で搭載されたセキュリティ機能「GateKeeper」により、アプリを実行出来ない場合があります。その場合はこちらのページの「未確認の開発元からのAppを開き、そのAppをGatekeeperの監視の対象外にする方法」を参考に設定を変更することで起動できます。

ImageMagickはこちらより入手できます。

 「homebrewでImageMagickをインストールしている場合にインストーラパスの設定ができない」というお話をいただきましたので、設定用簡易マニュアルを作りました。

 とりあえず、以前に私が作成した資料をEPUB化してみました。以下の画像をクリックするとブラウザ内でご覧いただけます。

InDesignデータ→電子書籍で字形の変化する文字

 フルサイズでご覧になりたい場合は「open in New window」をクリックしてください。

 これはKitaitiMakotoさんの作られた「BiB/i’d」を利用したものです。「BiB/i’d」はウェブデザイナー松島智さんが作成したブラウザ内で動作するEPUBリーダ「BiB/i」を手軽にブログ内などで利用するためのサービスです。古いブラウザ環境などで見られない場合は、最新版のChrome/Safari/Operaでご覧いただければ幸いです。
 もともとA4サイズの資料でしたので少し文字が細かくて読みにくいですが、そこはご容赦ください。

 なお、こちらのアプリを利用したことによる損害等につきまして私として責任は負いかねますので、あくまで自己責任にてご利用ください。

(2014.1.17)

homebrewでImageMagickをインストールしている場合の簡易設定マニュアルを追加いたしました。

(2014.1.25追記)

Ver.1.1.1 バージョンアップに伴い、表記を一部修正しました。

(2014.2.18追記)

Ver.1.1.2 にバージョンアップしました。変更内容は元画像の拡張子が大文字だった際に正常にEPUBが生成できなかった問題の修正です。

(2014.5.20追記)

プロフィール
Jun Tajima

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

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