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

フィックス型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追記)

InDesignとEPUBの縦書き時の文字の向きの差について

2013/12/09

 私たち日本人にとっては縦書き文書を目にするのはごく日常的なことです。縦書きの文書には当然さまざまな固有の組版ルールがあり、それは必ずしも簡単なものばかりではないのですが、私たち日本人はそれがあまりに「当たり前のこと」であるがゆえに、「暗黙のルール」として受け入れてきました。
 もっぱら日本市場だけをターゲットとして製品開発・販売が行われてきたこれまでなら、「暗黙のルール」で済みました。ですが、Webブラウザや国際展開しているストアのEPUBビューアで日本語の縦書き文書を過不足無く読めることを期待するには(ツールの開発者に日本語の素養があるとは限りませんから)、きちんと明確化された国際ルールにする必要があります。こういった意味でW3C「日本語組版処理の要件」をはじめとして、さまざまな取り組みが行われてきましたが、最後に積み残した部分として残っていたのが「縦書き時の文字のデフォルトの向き」に関するルールです。
 縦書き文書内に長文の英語が混じるような場合、普通英語の部分は90度横転させる組版が行われますが、「A地点」などといったようにアルファベットひと文字の場合に「A」が横転していたら、私たちは不自然さを感じてしまうでしょう。従ってごく一般的に「A地点」の場合の「A」は全角文字で記述するといったようなことが行われます。これは「半角文字のAは縦書きで横転し、全角文字のAは縦書きで正立する」という共通認識があるために行われる行為です。
 しかし、アルファベットのようなごく一般的な文字はまだしも、使用機会の少ない特殊記号類や非英語のラテン系文字などでは、各種アプリケーションでデフォルトの文字の向きにかなりの差が見られる実態があったようです。これでは国際ルール化の際に困ります。

 そのためこの「縦書き時の文字のデフォルトの向き」についてユニコードコンソーシアムで話し合いが行われ、かなり紛糾したようですが、今年の8月31日にようやくこれが確定したようです。これが「UTR#50」(Unicode Technical Report #50)です。

現状のストアビューアでの縦書き時の文字の向き

 ただ、規格として確定したとは言っても、これが実際に各ビューアに反映されるまでには相当の時間はかかると見なくてはなりません。ストアビューアでの現状の縦書き時の文字の向きに関しては、KADOKAWAが「KADOKAWA-EPUB 制作仕様」の中で資料を公開しましたが、これを見ても現状各ビューアでかなりの混乱があるように見受けられます。
 そこで、実際に各ビューアでの表示を見てみた方が良いだろうと考え、各ビューアでの実機スクリーンショットを取りました。ご参照下さい。ひらがなや半角英数字などリストアップするまでもない文字は省いてあります。

 各ビューアのバージョン/フォント環境は以下の通りです。

各EPUBビューアのバージョン

各EPUBビューアのバージョン

 以下のリンクからデータをダウンロードしてご覧いただけます。





 なお、同梱した比較用のInDesign表組みデータの制作環境は、InDesign CS5/OS X 10.7/リュウミンL-KL Pr6N になります。

InDesign内での文字の向きとUTR#50 Rev.11の文字の向きの期待値の差異

 さて、上掲のInDesignでの文字の向きの資料とKADOKAWAの資料にあるUTR#50 Rev.11の文字の向きの期待値を比較してみると、実はかなりの差異があることがわかってきます。出版社から制作会社への要望としては実際に印刷物となって目にしている文書を可能な限りそのまま「電子化」したいわけですから、これに少しでも近づくためにはInDesignのデフォルト値とUTR#50の期待値の差分を出す必要がありそうです。そこでこれを調べてみました。
 以下に差異のあった文字を公開しますので、ご参照ください。InDesign側の環境は上記と同様です。

IDとUTR#50rev11でデフォルトの向きが異なる文字

 U+00A9の「©」やU+00AEの「®」、U+FF1Bの「;」、全角のシングル/ダブルクォーテーションマーク、ギリシャ文字やキリル文字、数学記号類などで差異が見られるようです。

KADOKAWA資料で表示方向に関わらず外字にすることを規定している文字

 KADOKAWA資料には、正立/横転の表示方向に関わらず縦書き時に外字にすることを規定している文字が存在します。これにはさまざまな要因があるようですが、例えばU+201Cの「“」およびU+201Dの「”」のダブルクォーテーションマークは、縦書き時にKindleでは現状U+301Dの「〝」およびU+301Fの「〟」のダブルミニュート(ノノカギ/チョンチョン)に自動置換されてしまうため、外字化して対応する必要があるようです。

 また、U+FF1Bの「;」やU+005Cの「\」も必ず外字化するように求められています。ただこれらの文字は上記の実態調査ではいずれのビューアでも正常に表示されていたため、ビューアのアップデートにより修正がなされたのかもしれません。他には発音記号などで用いられる結合文字や、結合文字の構成パーツが外字化する文字としてリストアップされています。
 以下が対照となる文字のリストです。

KADOKAWA資料で必ず外字化の指示がある文字

ID/UTR#50の双方で「正立」がデフォルト値だがKADOKAWA資料で縦中横タグの挿入を求められている文字

 InDesignのデフォルト値、UTR#50の期待値がともに「正立」であるにもかかわらず、KADOKAWAの資料内で「text-combine」(縦中横/電書協ガイドのXHTMLタグ指定では「<span class=”tcy”>00</span>」)のCSS指定を求められている文字も存在します
 おそらくデフォルト値が横転になってしまっているビューアが存在するため、明示的に正立指定をする必要があるためと思われます。
 以下が対照となる文字です。

ID/UTR#50の双方「正立」がデフォルト値だがKADOKAWA資料で縦中横タグの挿入を求められている文字

 将来的におそらく各社のビューアの実装はUTR#50に準拠する形に変化していくものと思うのですが、InDesignとの差異は消えることなく残りそうです。「古い印刷データを新しいバージョンのInDesignで開けたら文字の向きが変わった」などという事態はAdobeとしても間違いなく避けたいでしょうから、新バージョンでの対応もすぐには期待しない方が良いでしょう。

 こうした部分への間違いのない対応を現場の制作オペレータに期待するのは現実的ではありませんから、何らかの形で機械処理してやるのが正解と思っています。今回はそのための一助として資料を公開させていただきました。

 今回リストアップした文字の対策は、現状では外字画像にすることで解決を図っているコンテンツがかなりあるようです。KADOKAWA仕様でも横転する文字は全て外字とすることを求めています。これは一部ビューアで横転の指定が反映されない文字があることを考慮すれば仕方のない対応ではあるのですが、一方で外字画像は背景を黒に設定した場合に見えなくなるビューアが存在するなど、アクセシビリティの障害となることも事実です。

 将来的には全てのビューアで正立/横転の指定が正しく反映されるようになることを期待しつつも、現状では例えば一部別の文字で置き換えることが可能な記号類を出版社さんとの事前の協議をもとに自動で置換処理をするといったことも含めて、より質の高い電子書籍の制作に繋がるようなワークフローを考えるべきではないかと思っております。

 もし資料に誤り等を発見された場合はご一報をいただけると助かります。すみやかに修正させていただきます。

 なお、こちらの資料を使用したことによる損害に対して、私および私の所属する会社として責任は負いかねますので、あくまで自己責任にてご使用ください。

※ 本来電書協ガイドで文字の「正立」指定に用いるXHTMLタグ指定は「<span class=”upright”>00</span>」なのですが、現状「<span class=”upright”>00</span>」のCSS指定に用いられている「text-orientation」の挙動が怪しいビューアが多く見られるため、KADOKAWAフォーマットでは当面「<span class=”tcy”>00</span>」でのマークアップを求める方針としたようです

分類前の全文字が入った一覧も公開しておきます。KADOKAWAの資料をもとに、InDesignでの文字の向きのパラメータを追記してあります。

表(UTR#50対照文字全文字入り)

(2013.12.10)

(2013.12.10追記)ご指摘をいただきまして資料を修正いたしました。皆様ありがとうございます。

(2013.12.10追記)引用符のデフォルトの向きは、InDesign CS6以降では環境設定の「縦組み中で引用符を回転」のチェックが入っていると自動で横転になるようです。ご指摘をいただいたので追記しておきます。なお、CS5で作成したドキュメントをCS6で開いた場合には、もとの文字の向きが保持されるようです。

(2013.12.10追記)「必ず外字化の指示がある文字」に、カタカナの結合文字を追加しました。また、UTR#50およびInDesignでの文字の向きを追加しました。

(2013.12.11追記)資料をもう一度見直し、リストを更新しました。また、全文字のリストも添付しました。資料として落とされた方は、申し訳ありませんが再取得してください。また、アンテナハウスの村上真雄さんが関連記事を書いてくださったようですので、併読をおすすめしておきます。

「300ppiのweb用画像」に対応する

2013/11/20

 先日、株式会社KADOKAWAから「KADOKAWA-EPUB 制作仕様」の発表がありました。これはKADOKAWAが電書協ガイドをベースに社内で使用するために規定した仕様を一般公開したもので、頼りにできる製作指針がまだ完全に定まったとは言い難い現在、とても有り難い話で、率直に大英断だったと思います。
 今現在これをきっちり読み込んで電書協ガイドとの差分を調べて必要なら修正する作業をしているわけですが、一ヵ所「?」と思った部分がありました。それは画像の仕様が「画像の解像度は、外字画像含め、すべて300pixel/inch とする」となっていた箇所です。

 「pixel/inch」(ppi)という単位はDTP系の人間にとってはなじみ深いもので、dpiとも言われます。1インチあたりに何ピクセルの画素を割り当てるかで画像の精細さを表す単位です。ただこれはWeb系ではほとんど使われないのではないかと思います。何故かと言えば、これがあくまで印刷を前提とした場合に意味がある単位だからです。画面サイズとピクセル数が比例していないPCディスプレイやタブレット端末を表現の舞台とするWebや電子書籍では、この「pixel/inch」という単位はほとんど意味を持ちません。
 正直事情通の方にお聞きしてもなぜ電子書籍なのに画像を「300ppi」にする必要があるのか「?」が消えなかったのですが、仕様書にあるからには対応しなければなりません。以下、その対応方法です。

Photoshopから書き出すと強制的に72ppiになる

Photoshopで解像度を300ppiに

Photoshopで解像度を300ppiに

 最初に、Photoshop内で解像度を300ppiに変更してから「Webおよびデバイス用に保存」で書き出してみました。解像度を変える際には「画像の再サンプル」のチェックボックスを外してやらないとピクセル数そのものが書き換わってしまいますので、これのチェックを外した上で解像度を300ppiに変えてやります。

Photoshopで開くと72ppiになっている

Photoshopで開くと72ppiになっている

 その後、「ファイル」メニューから「Webおよびデバイス用に保存」を選び、Web用画像として書き出してやります。で、書き出された画像を再びPhotoshopで開いて見てみると・・・あれ、72ppiになってしまってますね。

ImageMagickで画像解像度を後から書き換える

 困りました。つまりAdobeとしては「Web用の画像は印刷の対象ではないのだから全部72ppiで問題ない」と判断しているわけです。通常の保存コマンドでjpgやpngを選べばもちろん解像度の設定は保持されるのですが、これをやってしまうとファイルサイズが大幅に肥大化するので電子書籍用の画像としては避けたいところです。
 そこで、Photoshopで一度書き出した画像の解像度設定をフリーのコマンドラインツールのImageMagickで書き換える方向を試してみました(ImageMagickのMac用インストーラはこちら)。ここなどを参考にさせていただいています。

/opt/ImageMagick/bin/mogrify -density 300×300 -units PixelsPerInch 置換対象ファイルのパス

 置換して上書きなので「mogrify」コマンドを使っています。「-units PixelsPerInch」が単位指定です。ImageMagickのインストールパスは適宜お手元の環境のものに置き換えてください。ターミナルにこれを入力し、リターンで置換されます。

300ppiになっている

300ppiになっている

 Photoshopで開いて見てみると確かに300ppiになっているようです。OKですね。あとはこれを組み込むだけです。

(2013.11.21)

プロフィール
Jun Tajima

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

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