Web技術トピック&コラム

Script Topic 2013.10.05 (Sat)

電子書籍のリリース方法「e-pub制作」編

電子書籍のリリースの仕方をデベロッパー登録から、実際にリリースするまでの手順をiOS、Android、Kindleそれぞれを紹介しています。

第2回は「EPUBファイルの制作」編です。

EPUBという形式は電子書籍の世界で、普及促進されているフォーマットなので、
これをきっちり作っておけば、基本的にそのままiOS、Android、Kindleでリリースできます。

編集ソフトは「Sigil」というEPUB制作のフリーソフトもありますが、
EPUBフォーマットの中身は、htmlとcssでできているので、
Dreamweaver等で直接コーディングする形が良いと思います。
また、css3,html5,Javascriptが扱える人は、動きのあるダイナミックなコンテンツや、
動画や音声データも扱えます。

使用ツール

  • Adobe Digital Editions(閲覧確認)
    • ※iphoneなど実機で動作確認も必要です。
  • ZIP 3.0(epub形式に圧縮するソフト)
  • サイトEPUB Validator(記述にエラーが無いかチェックする)
    http://validator.idpf.org/
    • ※一つでもエラーがあると、申請に出せません。
    • ※このサイトは10M以上のデータはチェックがかけられないので、10M以上ある場合は、画像や音楽データなどを一時的にはずしましょう。

大まかな手順

  1. テンプレートを元に、著者情報など初期設定的な箇所を編集します。
  2. h1、h2などCSSの見出しデザインを行います。
  3. 文字原稿を流し込んでいきます。
  4. 実機もしくは、エミュレーターで動作確認。
  5. 解凍後、一部テキストエディタで直接編集。再圧縮。
  6. EPUB Validatorで構文チェック。

1. テンプレートを元に、著者情報など初期設定的な箇所を編集します。

絵本書籍「かわいい動物のお話」のepub3形式をアップしました。
animal.epub
よかったら、テンプレートして使用してください。

著者情報や全画像の管理するファイルは、content.opfというファイルです。

一番下の<spine page-progression-direction="rtl" toc="ncx">で縦書きか横書きかを指定します。

例)
  • 縦書き ページめくり方向が「右から左」の場合
    <spine page-progression-direction="rtl">
  • 横書き ページめくり方向が「左から右」の場合
    <spine page-progression-direction="ltr">

2. h1、h2などCSSの見出しデザインを行います。

webデザインをするときと同じようにh1、h2などcssの編集を行います。

si02

  • ※画像クリックで拡大します。

縦書きの場合、cssもそのように変更します。

body{
font-family: "ipamp";
writing-mode: vertical-rl;
line-break: normal;
-epub-writing-mode: vertical-rl;
-webkit-writing-mode: vertical-rl;
-epub-line-break: normal;
-webkit-line-break: normal;
}

3. 文字原稿を流し込んでいきます。

文字原稿を流し込んでいきます。

4. 実機もしくは、エミュレーターで動作確認

Adobe Digital EditionsでもPC上で確認できますが、
やはり実機にアップして確認するのが一番よいです。

iphone、ipadへの転送方法

  1. PCにiphone(もしくはipad)をUSB接続します。
  2. iTunesが起動したら、下記図の順番にクリックして、作成したepubファイルをドラッグ&ドロップします。
    そうすると、自動的に、実機側にデータが転送されます。
    • ※画像クリックで拡大します。
    1. si04
    2. si05
    修正ファイルを再度転送する場合は、一度実機側のデータを削除してから、再転送する必要があるようです。

ちなみに、実機に表示されるアイコンは、content.opfの
下記ファイルが表示されます。
<meta name="cover" content="icon-cover.png" />

表示の確認は、念のため、実機の縦向き、横向き両方で、確認しましょう。

5. EPUB Validatorで構文チェック

http://validator.idpf.org/
閉じタグの忘れなどエラーがあった場合は、エラーの行数などが表示されるので、
修正を行います。
下記エラーは、「Sigil」では直せないので、次のステップで対応します。
attribute "opf:event" not allowed here; expected attribute "id"

  • ※画像クリックで拡大します。

si06

  • ※このサイトはepubデータが10Mまでと制限があるので、音声ファイルなどは一時的に、軽いファイルに変換して、テストするとよいでしょう。

6. 解凍後、一部テキストエディタで直接編集。再圧縮。

Sigilというソフトで制作した場合、自動的に書き換えられて、
EPUB Validatorで、エラーが絶対に消えません。
エラーが消えないと、アップルへの申請もできませんので、
最後に、Sigilを使わずに、手動で書き換えます。

  1. 作成ファイルの拡張子を.epubから.zipに変更し、解凍ソフトで解凍します。
  2. 解凍したデータの「OEBPS」フォルダの中の、content.opfをテキストエディタで開きます。
    上の方の <dc:date opf:event="modification">2013-10-02</dc:date>
    を削除します。
    <dc:creator opf:role="aut">製作:株式会社ブルーアート</dc:creator>
    opf:role="aut"を削除
  3. 再圧縮します。
    Windowsの場合『ZIP』を用いてコマンドラインから行う必要があります。
    Info-ZIP』のサイトから『ZIP 3.0』をダウンロードし、適当なフォルダに解凍します。
    以下のテキストを丸ごとコピーし、Cドライブの「ebook」の下に「makeepub.bat」という名前のファイルを作成してペーストし、保存します。

    cd files
    c:\ebook\zip\zip -0 -X ..\sample.epub mimetype
    c:\ebook\zip\zip -r ..\sample.epub * -x mimetype
    cd ..

    階層の指定は各自の構築環境に合わせて変更してください。

    C:.
    ├─ebook
    ├─files ←---- 解凍し編集した各ファイル用フォルダ
    ├─zip ←---- ダウンロードした圧縮ツール用フォルダ
    └─makeepub.bat

  4. 「makeepub.bat」ファイルをダブルクリックして実行すると、「ebook」フォルダ内に「sample.epub」というファイルが作成されます。

※参照させていただいたサイト
http://www.darkcurrant.com/ebook/epub_template_howto_epub2-3.html#06

これで、epubデータの完成です。
また、リリース後のアップデートはもちろん可能ですが、
文字の間違えなど無いかしっかり確認しましょう。
(と言っている僕がよく誤字ありますが…)

その他 epub作成ツール

次は、各プラットフォームごとの「電子書籍の作り方その3 ~申請・リリース編~」です。

Web技術トピック&コラムの一覧へ