2011年6月18日土曜日

ePub 2.0 ことはじめ (8) カバーを付ける

の続きにして、「ePub 2.0 ことはじめ」最終回です。

本エントリーでは、iBooks で表示するカバーを付けます。これで、ePub ドキュメントとしては一まず形になるのではないでしょうか。

なお、カバー画像の作り方については、以下のサイトの説明を参考にしました。

カバー画像を作る

カバーの画像を作ります。素材を使えると良いでしょう。私は何も持っていませんので、SVG で作ってみました。


<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
     width="160px" height="220px" viewBox="0 0 160 220">
<text x="5" y="180" font-size="16">
  ePub 2.0 ことはじめ
</text>
<text x="60" y="200" font-size="14">
  絳アト
</text>
<path fill="#85B916"
      d="M79.998,130.406l-49.316-49.32l49.316-49.313l16.44,16.437l-32.88,32.876l16.439,16.44l49.316-49.313
  l-42.96-42.96c-3.508-3.511-9.198-3.511-12.709,0L4.161,74.736c-3.508,3.508-3.508,9.198,0,12.709l69.484,69.481
  c3.511,3.511,9.201,3.511,12.709,0l69.484-69.481c3.508-3.511,3.508-9.201,0-12.709l-10.087-10.084L79.998,130.406z"/>
</svg>

iBooks 1.3 はカバー画像に SVG を使えない様なので、PNG に変換します。

普段は convert コマンドを使っているのですが、convert コマンドは SVG 画像内の日本語テキストを変換してくれなかったので、Inkscape というベクター画像用のツールを使いました。SVG 画像を開き、「ファイル > ビットマップにエクスポート」から PNG ファイルを出力しました。

その結果がこちらです:

カバー用の XHTML ファイルを作る

カバー画像を含める XHTML ファイルを作ります。名前は cover.xhtml としました。


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 STRICT//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
  <title>ePub ことはじめ</title>
  <style type="text/css">
    img { height: 100%; }
  </style>
</head>
<body>
  <p><img alt="ePub 2.0 ことはじめ" src="cover.png"/></p>
</body>
</html>

content.opf の変更

変更箇所は四箇所です。

metadata 要素の変更

metadata 要素に次の meta 要素を追加します。

<meta name="cover" content="cover-image"/>
manifest 要素へ item を追加

manifest 要素に、カバー画像とカバー画像用の XHTML ファイルを登録します。

   <item id="cover" href="cover.xhtml" media-type="application/xhtml+xml" />
   <item id="cover-image" href="cover.png" media-type="image/png" />
spine 要素へカバーへの参照を追加する

spine 要素の先頭にカバー (XHTML ファイル) への参照を追記します。属性 linear="no" を追記するのがミソです。

 <spine toc="ncx">
   <itemref idref="cover" linear="no"/>
   <itemref idref="chap1" />
 </spine>
guide 要素の追加

以下の guide 要素を追加します。

 <guide>
   <reference href="cover.xhtml" type="cover" title="Cover" />
 </guide>

仕上がり

iPad でスクリーン・ショットを撮ってみました。

1 番左がカバー付。2 番目がカバー無しです。カバーが付いている方が見た目良いですね。

ちなみに、上で作った PNG ファイルとカバーが違います。これは一つ前に作ったカバー・ファイルなのですが、どうやらキャッシュが残っているらしく、新しいカバーが適用されませんでした。iBooks のバグだと思うのですが、解決できなかったので、無念ですがこのままブログにアップします。

おしまい

以上で、エディターで作る ePub 2.0 ドキュメントの連載を終了します。

希望者があれば、これをまとめて ePub 化しようかとも思います。希望者はコメントなり twitter/akaato で一声かけて下さい。

投稿者 時刻:
ラベル:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)