[to-R] さんが、スマートフォン用の Tips を 11 集めてエントリーを書いていらっしゃいます。
ePub を読むツールもスマートフォン (iPhone/Android) が多いと思われるので、参考になるのではないでしょうか?
私は、「Android で (現在) ボールド体が表現できない」、「フォントサイズは 12px 以上」「1px のこだわりを捨てる」などが参考になりました。
また、「横幅は 320px もしくは 640px でデザインする」という意見は考えさせられました。というのは、ePub の場合は、この条件に加えて iBooks などが勝手に入れる余白も考慮しなければならないからです。ePub リーダーもスマートフォン・サイト同様、複数のモバイル・デバイスで表示される様になるでしょうから、こういう Tips を早めに集めておくとよさそうですね。
ePub3 は中身のコンテンツを HTML5 でかつ XHTML (XML) で書くよう要請しています。いわゆる XHTML5 と呼ばれるものです。残念なことに、XHTML5 の書き方の説明が少ないです。そこで、XHTML5 の雛型の書き方を紹介します。
HTML5 の特徴の一つに、DTD がなくなったことが挙げられます。DTD とは大雑把に言えば HTML や XHTML を「定義」するものです。HTML は SGML によって DTD を、XHTML は XML によって DTD を定義されていました。HTML5 では DTD がなくなり、DOM で定義されるようになりました。そして、この DOM を HTML として解釈する場合、「HTML シリアライゼーション」と呼びます。一方、XML として解釈する場合、「XML シリアライゼーション」と呼びます。
HTML シリアライゼーションされたものを HTML5、XML シリアライゼーションされたものを XHTML5 と呼びます。大部分において HTML5 と XHTML5 は同じですが、違いもあります。例えば、HTML5 では閉じタグを省略できるケースがありますが、XHTML5 では閉じタグが必須です。HTML5 では <img ...> と書くところ、XHTML5 では <img .../> と書きます。XHTML5 では名前空間を使うことができます。
HTML5 を書く者は、自分が「HTML5」で書くのか「XHTML5」で書くのか、ちゃんと区別しなくてはなりません。「HTML5」と「XHTML5」を一つのファイルに混在させることは出来ないからです。
ファイルの先頭に XML 宣言
<?xml version="1.0" encoding="UTF-8"?>
が入っていたら XHTML5 です。入っていなければ HTML5 です。
先の説明は大雑把すぎるので、少し踏みこんで説明しましょう。
まず HTML5 は Content-Type に text/html をセットしなければなりません。
そして、最小の HTML5 は下記の様になります:
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>タイトル</title>
</head>
<body>
本文
</body>
</html>
DTD がなくなったことで、DOCTYPE がシンプルになったことに注目して下さい。また、meta 要素では charset 属性のみを設定する様になりました。
XHTML5 は Content-Type に application/xhtml+xml とセットしなければなりません。
そして、最小の XHTML5 は下記の様になります。
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<title>タイトル</title>
</head>
<body>
本文
</body>
</html>
さて、ここで互換性の問題。XHTML5 は新しい規格なので、W3C の Validator すら上記 XHTML5 のコードでは「正しい XHTML5」であると認識してくれません。解決策の一つに XHTML5 に DOCTYPE を付ける、というのがあります。幸いなことに、XHTML5 では DOCTYPE の宣言は必須ではない、言い換えると DOCTYPE を付けても良いことになっています。
もう一つ。日本語でテキストを書く場合、XHTML5 では html 要素に lang 属性も指定しないと日本語として認識しない ePub リーダーがあります。最新の HTML5 Last Call を読むと、XHTML5 でも lang 属性がオプションとして認められています (もちろん属性値は xml:lang の値と同じにしなければなりません)。
以上二点を踏まえて、互換性の高い XHTML5 の雛型を書くと次の様になります。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<title>タイトル</title>
</head>
<body>
本文
</body>
</html>
このエントリーのきっかけはEPUB3チュートリアルの「EPUB 3.0 への対応 — XHTML ファイルの修正」でした。「XHTML ファイルの修正」には XHTML5 の「互換性の高い雛型」が載っていて、私は DOCTYPE や lang 属性は要らないのではないか? と疑問に思ったのです。そこで、チュートリアルを書いたイースト株式会社の中の人とメールのやりとりをしました。
そして、どういう理由で「互換性の高い雛型」が出来たかを教えてもらったのでした。
教えてもらった後、同じ様なことで悩んでいる人が多いのではないかと思い、イーストさんに許可を求めたところ、心良く承知して下さったので、本エントリーを書くことができました。イーストさんに感謝致します。ありがとうございます。
の続きにして、「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 ファイルを作ります。名前は 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>
変更箇所は四箇所です。
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 で一声かけて下さい。
の続きです。
ePub 2.0 ことはじめ (3) と (6) で構造化テキストの作成ができる様になりました。本章では、構造化したテキストにスタイルを追加して見栄えを良くする方法を説明します。
スタイルは CSS 2.1 で設定します。
最初に、スタイルの適用前と適用後の違いをお見せします。
今回はシンプルに、p 要素で出来る「空行」をなくすスタイルを適用してみます。
スタイル適用前は上のスクリーン・ショットの様に空行が空いています。スタイル適用後は、下のスクリーン・ショットの様に空行がなくなります。
ちょっと見た目が悪いですかね? text-indent なども設定すると良いと思います。今回は、一番シンプルで分かり易いサンプルということで、勘弁して下さい。
スタイル・シート「style.css」を OEBPS ディレクトリーの中に置きます。style.css の中身は下記の通りです (サンプルなので、かなり大雑把です m(_ _)m):
p {
margin: 0;
}
CSS ファイルを使う全ての XHTML ファイルから、style.css へのリンクを張ります。
XHTML の head 要素に次の link 要素を追記します。
<link rel="stylesheet" href="style.css"/>
最後に、ePub ドキュメントに style.css を認識させる作業が必要です。
content.opf ファイルの manifest 要素にスタイル・シートの item を追記します。次の様になるでしょう。
<manifest>
<item id="ncx" href="toc.ncx" media-type="text/xml" />
<item id="style" href="style.css" media-type="text/css" />
...
以上で、スタイル・シートの追加作業はおわりです。CSS の参考書を頼りに、読み易いスタイルを作成しましょう。
の続きです。
HTML で ePub 文書を書けるようになりましたし、目次も作ることができるようになりました。これで、ePub ドキュメントを作成する準備はほとんど整ったと言って良いでしょう。
さて、本エントリーでは ePub での画像の扱いについて書きます。
画像を挿入するには、HTML の img 要素を使います:
<img src="foo.jpg" alt="サンプル画像" />
ePub が対応している画像は JPEG, PNG, GIF, SVG の四種類です。
ePub で画像を入れる際の注意点は、挿入する画像を content.opf に登録しておかなければいけない点です。登録は manifest 要素の中で行ないます。
サンプル・コードです。
<item id="sample-jpg" href="sample.jpg" media-type="image/jpeg" />
<item id="sample-png" href="sample.png" media-type="image/png" />
<item id="sample-gif" href="sample.gif" media-type="image/gif" />
<item id="sample-svg" href="sample.svg" media-type="image/svg+xml" />
ソースコードは github で見ることができます。
iPad 上の iBooks で各々の画像を表示させてみました:
SVG もちゃんと表示されていますね。良かったです。
SVG 画像の作成には、graphviz を使いました。ソースコードは data ディレクトリー内にあるので、興味のある方は github で確認して下さい。なお、PNG/JPEG/GIF ファイルは SVG ファイルから convert したものです。
の続きです。
Makefile ができたので、XHTML ファイルを編集しても最少の手間で ePub ドキュメントを生成できるようになりました。本エントリーでは、「目次」の作成方法を解説します。
iBooks では目次がないと ePub ドキュメントとして不正に扱われます。そのため、簡単な目次の作成方法については「絳アト日記: ePub 2.0 ことはじめ (1) シンプルな ePub を作る」で解説しました。おさらいしてみましょう。
目次を作るには、まず content.opf ファイルに目次ファイル「toc.ncx」があることを認識させます。そして、toc.ncx ファイルで目次を作ります。
content.opf ファイルにおける目次ファイルの変更部分は二か所です。
まず manifest 要素に toc.ncx が ncx (目次) ファイルであることを登録します。今回の場合、次のようになります:
<manifest>
<item id="ncx" href="toc.ncx" media-type="text/xml" />
...
</manifest>
id 属性値は ncx としておくのが無難でしょう。href 属性値は自由に決めて構いませんが、拡張子は ncx とします。今回は toc.ncx という名前を採用しました。media-type 属性値は text/xml です。
次に spine 要素に toc 属性を追加します。属性値は目次ファイルの ID です:
<spine toc="ncx">
<?xml version="1.0" encoding="UTF-8"?>
<ncx xmlns="http://www.daisy.org/x3986/2005/ncx/" version="2005-1">
<head>
<meta name="dtb:uid" content="akaato.com20110418"/>
<meta name="dtb:depth" content="1"/>
<meta name="dtb:totalPageCount" content="0"/>
<meta name="dtb:maxPageNumber" content="0"/>
</head>
<docTitle>
<text>ePub 2.0 ことはじめ</text>
</docTitle>
<navMap>
<navPoint id="chap1" playOrder="1">
<navLabel>
<text>第一章 ことはじめ</text>
</navLabel>
<content src="chap1.xhtml"/>
</navPoint>
</navMap>
</ncx>
目次ファイルの例を見れば分かる通り、目次ファイルには一つの navMap 要素が入ります。navMap 要素の前はヘッダーと考えて構いません。navMap 要素の中身が目次となって表示されます。
navMap 要素の中に目を移す前に、目次ファイルのヘッダー部分へ注意を向けましょう。ここに meta 要素で name="dtb:uid" というコードがあります。この属性値には、content.opf ファイルで dc:identifier で設定した値から「urn:uuid」を除いたものを設定します。
今回の例では、content.opf の概当部分は次の様になっていますから
<dc:identifier id="BookId">urn:uuid:akaato.com20110418</dc:identifier>
toc.ncx の概当部分は下記の様になります:
<meta name="dtb:uid" content="akaato.com20110418"/>
navMap 要素の中には複数の navPoint 要素を入れることができます。この navPoint が「目次」となります。
一般的な navPoint 要素は次の様になります。
<navPoint id="目次用のID" playOrder="目次の順番 (数字)"> <navLabel><text>目次名</text></navLabel> <content src="URL"/> </navPoint>
「目次用のID」は content.opf 内の ID とは無関係です。playOrder の順番に目次が並べられます。navPoint 要素は入れ子にすることも可能ですし、「#name」も利用可能です。
一例です。
<navMap>
<navPoint id="chap1" playOrder="1">
<navLabel>
<text>第一章 ことはじめ</text>
</navLabel>
<content src="chap1.xhtml"/>
<navPoint id="chap1" playOrder="2">
<navLabel>
<text>1.1 利用可能な要素</text>
</navLabel>
<content src="chap1.xhtml#elem"/>
<navPoint id="structure" playOrder="2">
<navLabel><text>1.1.1 構造要素</text></navLabel>
<content src="chap1.xhtml#structure"/>
</navPoint>
<navPoint id="text" playOrder="3">
<navLabel><text>1.1.2 テキスト</text></navLabel>
<content src="chap1.xhtml#text"/>
</navPoint>
<navPoint id="link" playOrder="4">
<navLabel><text>1.1.3 ハイパーリンク</text></navLabel>
<content src="chap1.xhtml#link"/>
</navPoint>
<navPoint id="list" playOrder="5">
<navLabel><text>1.1.4 リスト</text></navLabel>
<content src="chap1.xhtml#list"/>
</navPoint>
<navPoint id="fix" playOrder="6">
<navLabel><text>1.1.5 修正</text></navLabel>
<content src="chap1.xhtml#fix"/>
</navPoint>
<navPoint id="table" playOrder="7">
<navLabel><text>1.1.6 テーブル</text></navLabel>
<content src="chap1.xhtml#table"/>
</navPoint>
</navPoint>
</navPoint>
</navMap>
結果です。iPhone の iBooks で表示させました。
