2011年7月31日日曜日

EPUB3 コンテスト、落選

メール・チェックを怠っていたら、6 日も前に「EPUB3コンテスト」から落選メールが届いていました。受賞者は 2011-08-03 (水) に発表されるとのことです。

投稿作品

私が投稿した作品は二つ。どちらも、github に在りますので自由に閲覧できます。折角なので、少しだけ紹介文を書きます。

デパート・カタログ

デパートのカタログを見ると、複数のメーカー/ブランドの商品を綺麗にカテゴライズして並べてありますよね。私は、新幹線の網に入っているカタログが好きです。

こういうカタログを作るのって大変だろうな... と思ったのが、作成のきっかけ。メーカーから商品のデータをもらったら、判面に合わように配置して、見栄えを揃えて、並べる順序も考えて。。。それを季節ごとに作り直し!? 大変そう。

そこで、メーカーから上がってきたデータをそのまま配列するだけのカタログを作りました。もちろん、それでは利便性が低過ぎです。そこからが、本と書子書籍の違い。ePub3 では JavaScript がオプションで使えるようになりました。オプションなので、当然 JavaScript 非対応な ePub リーダーも考えなくちゃいけないんですが、今回は可能性を探るという目的で JavaScript が使えるリーダーのみを対象に... やることは「検索」機能の独自実装です。

bk ブログさんのコードを参考にさせてもらって、商品ごとの検索をユーザーにしてもらおうというわけです。オリジナルのソース・コードは一行のみの検索 (grep) ですが、私のプログラムは商品単位で検索を行ないます。これは、HTML5 で section, article といった要素が追加されて、一行じゃない検索 (コンテキスト grep) がやり易くなったのを活用しています。

LaTeX Intro

ePub3 で LaTeX の入門を書きました。LaTeX というのは、紙用の組版システムです。とても高度な電子出版ソフトと言えば良いでしょうか。その高度なツール「LaTeX」の入力と出力サンプルを ePub でどれだけ再現できるか、に挑んだのが本作です。

LaTeX の説明を本文で書きつつ、aside 要素を使って「ePub3 で LaTeX の表現を再現する方法」を書きました。LaTeX の説明文も全て自分で書いたので大仕事でした (さすがに Public Domain になってる LaTeX の説明本はないので...)。

書いてて気付いた点を挙げておきます。

  • ePub3 には footnote 仕様がある (対応リーダーはまだない)
  • ePub3 には 章番号・表番号・図番号のクロス・リファレンス仕様がある (対応リーダーはまだない)
  • ePub3 に目次機能はあるが、自動作成機能はない (自動作成ツールを作る必要あり!?)
  • ePub3 に索引仕様がない (自動作成ツールを作る必要あり)
  • ePub3 に文献仕様がない (自動作成ツールを作る必要あり)

数式は、現在サポート真最中という感じですね。

投稿者 時刻: 0 件のコメント:
ラベル: , ,

2011年7月13日水曜日

Google Apps で Google+ はまだ無理!?

最近流行の Google+ の招待状が届きました。しかし、招待状のページに飛んでみるとすげない言葉が並んでいます。

この機能を使用するには Google プロフィールが必要です。

私が使っている Google Apps では、ほとんどの Google サービスが使えますが、Google プロフィールは例外なのです。そして、Google+ には Google プロフィールが必須とのこと。

Google 側が Google Apps における Google プロフィール対応を一日でも早く行なってくれることを望みます。

投稿者 時刻: 0 件のコメント:
ラベル:

2011年7月8日金曜日

espur — ePub3 対応ビューワー

イースト株式会社がおそらく世界で初となる ePub3 ビューワーをリリースしました。ビューワー名は「espur (エスパー)」です。

espur 概要

espur の概要をまとめます。

  • Version: 0.8
  • 対応 OS: Windows (Vista, 7)
  • レンダリング・エンジン: WebKit
  • Twitter: espur_jp

MathML は WebKit 依存だとか、JavaScript はインタラクティブなものに対応していないとか、目次のサポートが不十分といった既知の問題は espur のウェブページに載っているので、そちらを参照して下さい。

ともあれ、これで ePub3 ドキュメントの確認環境が出来たわけですね。喜ばしいことです。

私は残念ながら Mac と Windows XP のユーザーなので espur が使えません。Windows XP に対応して欲しいとは思いませんが、Mac には対応して欲しいところです。

投稿者 時刻: 0 件のコメント:
ラベル: , ,

2011年6月22日水曜日

スマートフォン Tips を紹介しているエントリー

[to-R] さんが、スマートフォン用の Tips を 11 集めてエントリーを書いていらっしゃいます。

ePub を読むツールもスマートフォン (iPhone/Android) が多いと思われるので、参考になるのではないでしょうか?

私は、「Android で (現在) ボールド体が表現できない」、「フォントサイズは 12px 以上」「1px のこだわりを捨てる」などが参考になりました。

また、「横幅は 320px もしくは 640px でデザインする」という意見は考えさせられました。というのは、ePub の場合は、この条件に加えて iBooks などが勝手に入れる余白も考慮しなければならないからです。ePub リーダーもスマートフォン・サイト同様、複数のモバイル・デバイスで表示される様になるでしょうから、こういう Tips を早めに集めておくとよさそうですね。

投稿者 時刻: 0 件のコメント:
ラベル:

2011年6月21日火曜日

HTML5 の XML 版の書き方

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」を一つのファイルに混在させることは出来ないからです。

HTML5 と XHTML5 の大まかな分け方

ファイルの先頭に XML 宣言

<?xml version="1.0" encoding="UTF-8"?>

が入っていたら XHTML5 です。入っていなければ HTML5 です。

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 の雛型

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 属性は要らないのではないか? と疑問に思ったのです。そこで、チュートリアルを書いたイースト株式会社の中の人とメールのやりとりをしました。

そして、どういう理由で「互換性の高い雛型」が出来たかを教えてもらったのでした。

教えてもらった後、同じ様なことで悩んでいる人が多いのではないかと思い、イーストさんに許可を求めたところ、心良く承知して下さったので、本エントリーを書くことができました。イーストさんに感謝致します。ありがとうございます。

投稿者 時刻: 0 件のコメント:
ラベル: , ,

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 件のコメント:
ラベル:

2011年6月17日金曜日

ePub 2.0 ことはじめ (7) スタイルの追加

の続きです。

ePub 2.0 ことはじめ (3) と (6) で構造化テキストの作成ができる様になりました。本章では、構造化したテキストにスタイルを追加して見栄えを良くする方法を説明します。

スタイルは CSS 2.1 で設定します。

スタイルの追加

最初に、スタイルの適用前と適用後の違いをお見せします。

今回はシンプルに、p 要素で出来る「空行」をなくすスタイルを適用してみます。

スタイル適用前は上のスクリーン・ショットの様に空行が空いています。スタイル適用後は、下のスクリーン・ショットの様に空行がなくなります。

ちょっと見た目が悪いですかね? text-indent なども設定すると良いと思います。今回は、一番シンプルで分かり易いサンプルということで、勘弁して下さい。

Stylesheet の追加

スタイル・シート「style.css」を OEBPS ディレクトリーの中に置きます。style.css の中身は下記の通りです (サンプルなので、かなり大雑把です m(_ _)m):

p {
  margin: 0;
}

XHTML ファイルから style.css へリンク

CSS ファイルを使う全ての XHTML ファイルから、style.css へのリンクを張ります。

XHTML の head 要素に次の link 要素を追記します。

<link rel="stylesheet" href="style.css"/>

content.opf の変更

最後に、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 の参考書を頼りに、読み易いスタイルを作成しましょう。

投稿者 時刻: 0 件のコメント:
ラベル:
登録: 投稿 (Atom)