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

表組みをCSV経由でXHTMLにしてみた

2014/09/16

 InDesignデータからのEPUB制作で、悩ましいポイントのひとつが「表組み」の対応です。InDesignのEPUB書き出し機能を使うことでInDesign内の表をテーブル形式で書き出すことはできますが、InDesignの表組み機能では、そもそもセルの内容が複数ページにまたがるような場合には分割して作る必要があり、これの修正には当然相応の手間がかかります。また、そもそも元データがInDesign内の表作成機能を使用して作られていないケースも多々あります。
 また、現状多くのビューアでテーブル表示の対応が不完全で、これを受けて電書協ガイドではテーブル要素を非対応としているという現状もあります。このため、現在のEPUB作成では、現実的な解として表組みのページを画像として挿入しています。
 ただ、この形では当然文字を拡大することはできませんし、将来的にはアクセシビリティ対応にも支障をきたしそうです。

 そこで、InDesign内の表組みをCSV経由でXHTMLに変換することを考えてみました。CSV(カンマ区切りテキスト)は、ExcelやKeynoteから書き出して生成することができますので、InDesign内の表をコピーしてExcel等にペーストし、CSV形式で書き出してPerlで変換するという流れでワークフロー化することができます。Excel等の表計算ソフトであれば、比較的簡単に表の内容の編集・整理が可能ですので、かなり柔軟な処理ができると思います。

 PerlでCSVを扱う際に問題になるのは各項目の分割(パース)で、項目内にカンマが含まれていないなら普通にsplit関数で分割できるのですが、含まれている場合には結構面倒なことになりますので、今回は素直にCSV用のモジュール「Text::CSV_XS」を使いました。cpanminusがインストール済みの環境であれば、ターミナルで

sudo cpanm Text::CSV_XS

 と入力すればインストールできるはずです。

 また、今回出力するXHTMLファイルは最初の項目と次の項目を全角スペース区切りで並べ、次行との区別のためにぶら下がりインデントを指定する形にしてみました。表ではなくなってしまいますが、これならばまあ表示できないビューアはありません。本当はtable要素なりdiv要素のdisplay:table指定なりを使いたいところですが、現状ではまあ仕方ありません。

変換元データ 変換元データはこんな感じ。なお今回はPerl側で変換元の文字コードにUTF-8を指定しています。ExcelからCSVを出力した場合はShift_Jisで出力されるようですので、一度テキストエディタで開いて文字コードを変換する必要があります。なお、今回利用したNumbersでは出力時に文字コードを指定できる模様です。

 スクリプト的には外部からXHTMLのテンプレートを読み込む形にしても良いのですが、今回はコンパクトにしたかったのでソースコード内部に直にテンプレートを記述する形にしています。こういうのを「ヒアドキュメント」と呼ぶらしいです(初めて使いましたよ)。まあ可読性も良いですし悪くない形かなと思っています。以下が変換スクリプトになります。これに引数としてCSVファイルを食わせてやればXHTMLファイルを出力します。

 出力結果はこんな感じ。

 できたできた。

 やっていることは比較的単純で、読み込んだCSVファイルの各行の項目をモジュールで分割し、各行のテンプレートに入れ込む処理をしてから合成済みのテキストを配列に収納し、最後に配列内の各行を結合しています。その後でヘッダフッタを合成。テンプレート部分を書き換えるだけでそれなりに便利に使えるかと思います。いずれEPUBでテーブルが普通に使用できるようになったとしても、まあ応用は効きそうかなと思っています。

(2014.9.16)

電書協ガイドEPUB用試し読みファイル生成スクリプト

2014/07/16

 電子書籍の制作時に、コンテンツファイルと同時に納品が求められるものに「試し読みファイル」があります。これは例えばAmazonであれば画面右側の「1-Clickで今すぐ買う」ボタンの下にある「今すぐ無料サンプルを送信」ボタンから各端末に配信することで読める「試し読み用コンテンツ」のことで、通常冒頭の10%程度を読むことができます。BookLiveなどでは現在ブラウザ画面内で試し読みが出来るようです。
 この「試し読みファイル」は、各配信ストアや電子取次がサービスとして作成することを行っている場合もあるようなのですが、まだ別途必要とするストアもあるようで、現状まだ納品が求められます。また、各配信ストアや電子取次の作った試し読みファイルは出版社に支給されるわけではないため、自社サイトでのプロモーション用途には別途ファイルを用意する必要がある、といった事情もあるのではないかと思います。
 このため、コンテンツファイル完成後に試し読みファイルを制作する必要があるのですが、単純な読み物的なコンテンツならまだしも、画像やリンクが多数含まれるようなリフロー型のEPUBコンテンツを加工して試し読みファイルを制作するのは、実は結構面倒な作業です。

 そこでこの部分を自動化すべくスクリプト化を図っていたのですが、完成し、私の所属する会社から公開の許可も得られましたので公開させていただきます。
 なお、このスクリプトは「電書協ガイド仕様のリフロー型EPUB」用として作っております。例えばでんでんコンバーターRomancerなどで生成した、仕様の異なるEPUBでは、処理後にEPUBソースの手直しが必要になると思われます(おそらく階層化した目次まわり)。あらかじめご了承ください。

使用方法

「++試し読みここまで++」をコメント文で記述あらかじめZIP展開したEPUBフォルダ内の文書XHTMLファイル内に「++Trial reading is so far++」もしくは「++試し読みここまで++」という表記をコメント文等で記述しておきます。その後ターミナル等で
perl makesampleepub.pl(このスクリプトのソースファイル) 展開したEPUBのフォルダのパス 「試し読みはここまで」などと記載されたXHTMLファイルのパス
と入力して実行すると、展開したEPUBのフォルダと同一の階層に試し読みファイルが生成されます。ファイルがデスクトップにあるなら

perl /Users/username/Desktop/makesampleepub.pl /Users/username/Desktop/testepubfile /Users/username/Desktop/試し読みはここまで.xhtml

のような感じです。usernameのところは環境に合わせて差し替えてください。また、XHTMLファイルはあらかじめ作成しておく必要があります。

処理内容の詳細

  1. EPUBコンテンツを先頭から読んでゆき、「++Trial reading is so far++」もしくは「++試し読みここまで++」という文が含まれる行が出てきたらそこでファイルを分割、以後のコンテンツを削除
  2. 必要のなくなったXHTML文書ファイル、画像ファイルを削除
  3. OPFファイル内の消去したXHTML文書ファイル、画像ファイル関連の記述を削除、書名に「【試し読み版】」の記述を追記
  4. 文書ファイル消去により無効になったコンテンツ内リンクの消去
  5. 文書ファイル消去により無効になったHTML目次項目のリンクの消去
  6. 文書ファイル消去により無効になった論理目次項目の消去
  7. 「試し読みはここまで」などと記載されたXHTMLファイルをコンテンツ末尾に挿入、OPFにファイル情報を追記
  8. 以上の処理を行い、試し読みEPUBファイルを生成

ソースファイル

ダウンロードはこちら↓

このスクリプトを利用したことによる損害等に関しまして、私としては一切責任を負いかねますので、あくまで自己責任にてご利用ください。
転載・改訂等はご随意に。なお、改訂して再配布される際には@JunTajimaまでご一報いただけると嬉しいです。といいますか誰かスゴい人、汎用EPUB用コードに直しちゃってください。

なお、先日KADOKAWAさんのTw-ePub発表直後にこんな記事が流れてきてましたので、記事のとおりBiB/iを使って、生成した試し読みファイルをTwitterに流してみました。


意外と簡単でしたし、何よりTwitter経由でのコンテンツとの偶然の出逢いはずっと電子書籍の課題として挙げられ続けてきた「ディスカバラビリティ」の補完策になります。ライトコンテンツのプロモーション用としては結構有効と思いますので、活用を検討されてみてはいかがでしょうか。

(2014.7.16)

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

2014/06/09

先日お手伝いさせていただいた本で、以前このブログでもちょっと紹介をした「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追記)

プロフィール
Jun Tajima

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

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