今からでも遅くない！KDPで出版する前に読みたい、電子書籍制作の注意点まとめ : LINE Corporation ディレクターブログ

新年明けましておめでとうございます。
本年もNHN Japan並びにディレクターブログをよろしくお願いいたします。

こんにちは、ブログチームのディレクター兼フロントエンドエンジニアの真田です。

ここ数年「今年は電子書籍元年」と言われ続けてきましたが、2012年は日本でのkobo、Kindleの発売、そしてKDP（Kindleダイレクトパブリッシング）のスタートと、やっと本当に電子書籍元年と言える年になったのではないでしょうか。

今回はこの流れを後押しするためにも、いっちょ自分でも電子書籍作ってみるか！と思えるよう、EPUBの基本と、制作の際に注意すべきことを紹介したいと思います。

※読むの面倒、結論だけ知りたい！という方はこちらへ！

EPUBとは

EPUB（イーパブ）は電子書籍の規格のひとつで、誰でも自由に利用できるオープンな仕様としてIDPF（国際電子出版フォーラム）が中心になって策定が進められています。

電子書籍には多くのフォーマットがありますが、AppleのiBooksで採用されたこと、バージョン3で縦書きやルビなどの日本語組版に必要な機能が強化され、日本語での制作環境が整ってきたことなどから俄然注目を集めるようになりました。事実上電子書籍のスタンダードと言える規格です。

EPUBの特徴

EPUBはXHTML形式の文書と画像やCSSファイルを、特定のルールのもとにZIP形式で圧縮したものです。XHTMLやCSSといった既存のウェブ技術を流用しているため、ウェブ制作をしている人にとっては親しみやすいでしょう。また、EPUB3ではXHTML5とCSS3の一部がサポートされました。

EPUBの一番の特徴として、リーディングシステム（以下RS）やユーザーの設定によって、レイアウトが大きく変化する点が挙げられます（この仕組みをリフローといいます）。例えばRSの画面サイズが違えば1ページに表示される文字数が変わりますし、ユーザーが文字サイズを大きくすればそれだけ1ページに表示される文字数が少なくなり、全体のページ数が増えます。目次に表示されるページ番号も変わります（ですので紙の本のように、「では◯◯ページを開いて～」と言うことはできません）。このリフロー機能により、スマートフォンの小さな画面から、デスクトップPCの大画面でもユーザーは自分の読みやすいように調節することができます。

このようにテキスト主体の文書に向いている反面、画像を多用したページや凝ったレイアウトなどを再現するのが難しいという弱点もあります。そのため漫画や雑誌のようなレイアウトを再現する固定レイアウトに関する拡張仕様も検討が進んでいます。

EPUB制作のポイント

では実際の制作についてですが、具体的な制作方法を書き出すとキリがないので、ここでは実際に作る上で気をつけた方がよいポイントを挙げていきます。

基本はXML

EPUBはXHTMLを基本としたフォーマットです。XHTMLで書かれたウェブサイトでは多少のミスがあっても見逃してくれましたが、EPUBの場合は構文エラーがあるとエラーが表示されたり、そのページ以降が読み込まれなかったりするので注意してください。

対応するリーディングシステムを決める

現時点では各RSによって実装状況がまちまちで、バグと思われる動作も見受けられます。複雑なレイアウトですべてのRSで満足のいくように表示させることは難しいので、ある程度対応するRSを絞っておくほうがいいでしょう。（より多くのRSに対応したい場合は、EPUBだけにこだわらずPDFなど複数のフォーマットを用意するのもひとつの手です）

縦書きの場合の注意

EPUBファイルに以下の2点を記述することで、縦書きで表示することができます。

CSSでbody（またはhtml）要素にwriting-mode:vertical-rlを指定（縦書き、行の進行方向を右から左に）

content.opfのspine要素にpage-progression-direction="rtl"属性を指定（ページめくりを右から左に）

また、縦書きにするとCSSで指定した方向も意図したものと変わってしまうので注意が必要です。

横書きで引く下線は、縦書きだと右側に来ることが期待されますが、実際には左側になってしまいます。右側に線を引く場合はtext-decoration:overline とします。

横書きで上方向へのマージンmargin-top:1emとした場合、縦書きにも同じように指定すると、そのまま縦の行の上方向へのマージンになります。行の手前側にマージンを取る場合はmargin-rightにしなければなりません。

論理プロパティ（margin-before/margin-afterなど）の仕様が検討されていますが、まだ実用的な段階にはないようです。

CSSでハマったところ

Kindleフォーマット（後述）では、link要素でCSSファイルを指定する際、type属性（type="text/css"）を省略できません。HTML5では省略できるようになりましたが思わぬところでひっかかりました。

iBooksで文字色（リンク色）を変えるには、colorではなく-webkit-text-fill-colorというプロパティが必要でした。他にもiBooksでは独自のプロパティが多くあるようです。

既存のEPUBファイルを調べてみる

EPUBファイルはつまりzipファイルですので、通常のアーカイバソフトで展開することができます。他の人が作ったEPUBファイルを手に入れたら、中身を見てファイル構造やXHTML/CSSの書き方などを参考にしてみましょう。

ファイルの検証

ファイルを作成したら正しく作られているか確認しましょう。前述のように、EPUBは正しいXML構文が必要です。ツールを使ってチェックするのが確実です。

EpubCheckはオープンソースで開発されているEPUBの構文チェックツールです。昨年末にEPUB3に対応したver3の正式版がリリースされました。iBooksストアではEPUBファイルをアップする前にEpubCheckで確認するように求められていますし、KDPでも使用を推奨されています。

http://code.google.com/p/epubcheck/

Kindleフォーマットへの対応

このようにEPUB形式だけでよければいいのですが、昨年日本で発売されたKindleは直接EPUBファイルを読むことはできません。Kindleフォーマット（KF8、拡張子は.mobi）に変換する必要があります（KDPの場合はEPUBをアップロードすると自動的にmobiファイルに変換されます）。

KF8はEPUB2をベースにHTML5やCSS3に対応した規格で、EPUB3とは若干対応している要素やプロパティが違うようです。
以下のサイトからツール類をダウンロードできます。

KDPツールとリソース

Kindlegen（キンドルジェン）はコマンドラインの変換ツールです。KindleプレビューツールはKindleでの表示を確認するためのツールですが、こちらはドラッグ＆ドロップで表示を確認でき、同時にmobiファイルも生成されるのでこちらのほうが便利でしょう。

KF8はHTML5とCSS3をサポートするとされていますが、すべての要素・プロパティに対応しているわけではありません。変換した際に警告が出ますが、KF8でサポートしていないHTML要素やCSSプロパティを使用していた場合に警告が出るようです（nav要素やmax-widthなど）。
無視されるだけでファイル自体は正しく生成されていますので、表示が問題なければひとまず気にしなくてOKです。