絳アト日記

このブログの 2 つ目のエントリーは ValueDomain でドメイン名 akaato.com を取得するお話でしたが、一年を経て ValueDomain さんからドメイン更新手続きのメールが届きました。そこで、2 年分の利用料をクレジット・カードで決済しました。これで Google Apps もあと 2 年使えるというものです。

さて、ePub3 ビューワーが出て来ません。おかげで、ブログを書くモチベーションが上がりません。とはいえ、このまま何も書かないでいるのも悲しいものです。これからは、せめて月一程度のブログ更新を目指したいと思います。どうぞよろしく。

過去エントリー

絳アト日記: Google Apps を始める 1 — ValueDomain でドメイン取得

2011年8月3日水曜日

EPUB3 コンテスト第 1 回の結果が発表

「EPUB3コンテスト」の結果が今日、発表されました。

EPUB3 コンテスト第1回結果発表 * - epubcafé

4 つの賞が用意されており、受賞者・受賞作品は次の通りです:

epubcafe 賞: 珈琲新聞 — Yuki.Mさん
ユーザ賞: 涼州詞 — 小川真樹さん
OnDeck 賞: OnDeckインタビュー記事 — 大西隆さん
村田真賞: ごんぎつね —川幡太一さん

「珈琲新聞」は HTML+CSS で新聞の複雑なレイアウトを再現する力作。「涼州詞」は漢詩を原文・書き下し文・繁体中国語・簡体中国語等で記述した作品。「OnDeckインタビュー記事」は雑誌誌面再現のデザイン性が評価されたのでしょうか。「ごんぎつね」は読み上げ部分がハイライトするという障害者向けのサポート機能を光を当てた作品。

ソースコードは、結果発表ページからダウンロードできますので、興味を持たれましたら中身を見てみるのもよろしいかと存じます。

2011年7月31日日曜日

EPUB3 コンテスト、落選

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

投稿作品

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

デパート・カタログ

akaato/catalogue-in-ePub3 - GitHub

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

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

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

JavaScript でインクリメンタル検索 (grepではない版) - bkブログ

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

LaTeX Intro

akaato/latex-intro - GitHub

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

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

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

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

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

2011年7月13日水曜日

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

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

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

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

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

2011年7月8日金曜日

espur — ePub3 対応ビューワー

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

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 には対応して欲しいところです。

2011年6月22日水曜日

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

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

スマートフォンサイトをデザインする上で知っておくべき10のTIPS[to-R]

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

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

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

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

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

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

2011年6月18日土曜日

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

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

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

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

Best practices in ePub cover images : Threepress Consulting blog

カバー画像を作る

カバーの画像を作ります。素材を使えると良いでしょう。私は何も持っていませんので、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 で一声かけて下さい。

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

2011年6月9日木曜日

ePub 2.0 ことはじめ (6) 画像の挿入

の続きです。

HTML で ePub 文書を書けるようになりましたし、目次も作ることができるようになりました。これで、ePub ドキュメントを作成する準備はほとんど整ったと言って良いでしょう。

さて、本エントリーでは ePub での画像の扱いについて書きます。

ePub で画像

画像を挿入するには、HTML の img 要素を使います:

<img src="foo.jpg" alt="サンプル画像" />

ePub が対応している画像は JPEG, PNG, GIF, SVG の四種類です。

content.opf の変更

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 で見ることができます。

akaato/epub-first-step - GitHub

iPad 上の iBooks で各々の画像を表示させてみました:

SVG もちゃんと表示されていますね。良かったです。

SVG 画像の作成

SVG 画像の作成には、graphviz を使いました。ソースコードは data ディレクトリー内にあるので、興味のある方は github で確認して下さい。なお、PNG/JPEG/GIF ファイルは SVG ファイルから convert したものです。

2011年6月8日水曜日

ePub 2.0 ことはじめ (5) 目次の作成

の続きです。

Makefile ができたので、XHTML ファイルを編集しても最少の手間で ePub ドキュメントを生成できるようになりました。本エントリーでは、「目次」の作成方法を解説します。

目次の作成

iBooks では目次がないと ePub ドキュメントとして不正に扱われます。そのため、簡単な目次の作成方法については「絳アト日記: ePub 2.0 ことはじめ (1) シンプルな ePub を作る」で解説しました。おさらいしてみましょう。

目次を作るには、まず content.opf ファイルに目次ファイル「toc.ncx」があることを認識させます。そして、toc.ncx ファイルで目次を作ります。

content.opf ファイルの変更点

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">

目次ファイル (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>

dtb:uid

目次ファイルの例を見れば分かる通り、目次ファイルには一つの 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"/>

navPoint

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 で表示させました。

2011年5月30日月曜日

「電子書籍らくらくPACK」下書き — 第 5 回配信

5/9、「電子書籍らくらくPACK」下書きの第五回が配信されました。同書については、過去記事をお読み下さい。

第五回の内容は、副題「EPUBテンプレート対応版」にあるテンプレートの紹介です。

EPUB の中身は (既に紹介した通り) XHTML です。つまり、ウェブ・ページと同じと言っても過言ではありません。ウェブ・ページは、「文章構造」を XHTML に、スタイル (見た目) をスタイル・シートに書く様になっています。このメリットは、スタイル・シートを差し替えるだけで、文章に手を加えることなく見た目を大きく変更できることです (実践されているページは少ないですが...)。

EPUB も同じ構造ですから、スタイル・シートを切り替えるだけで見た目を変更できます。しかし、EPUB 用のスタイル・シートのノウハウはまだ少ないです。そこで、ある程度整えた文章構造と CSS を「テンプレート」として提供しようというが、本書のウリです。

第五回では、提供しているテンプレートの実例が紹介されています。本書で用意しているテンプレートは以下の通りです。

基本テンプレート*
エッセイ、小説用
日記用*
写真集用*
招待状用*
レシピカード用*
自分史用
カタログ用

第五回ではこのうち * の付いたテンプレートをサンプルとして読むことができます。残るテンプレートについては、本を購入下さいということですね。

発売

「電子書籍らくらくPACK」は、下書きを一部公開するという変わったマーケティング手法を取ってきました。

私の話をすれば、本屋で本を立ち読みすることが少なくなったので、中身も分からず技術書を買うことが多くなりました。今回の様に、本の中身が一部でも先取りで分かると購入の判断がしやすくなってとても良いですね。また、発売日前から公開している点が気に入りました。この記事シリーズの頭でも書きましたが、読者のフィードバックを本に入れることができる可能性があるからです。これは本を出版した後には出来ないことですよね。Amazon の中身を見る機能では対応できないことです。

本書は 6/1 に発売とのことです。気に入ったら、購入してみてはいかがでしょうか?

2011年5月26日木曜日

EPUB3 仕様を確定

2011 年 5 月 23 日、EPUB の仕様を策定してる IDPF がついに EPUB 3 仕様を確定しました。

EPUB 3 Proposed Specification Released | International Digital Publishing Forum (リリースノート)
EPUB 3 | International Digital Publishing Forum

EPUB 3 の仕様が確定したということは、仕様にそって EPUB 3 のドキュメントを安心して作れるということです。また、現在 EPUB 3 用のリーダー・アプリは登場していませんが、仕様が確定したことで開発が進むことが期待されます。EPUB 3 には、日本語縦書きの仕様も盛り込まれていますから、とても楽しみですね。

JavaScript

EPUB 3 で一番気になっていたのは JavaScript が使えるかどうかでした。仕様によると、一応 JavaScript はサポートされました。良かったです :)

ただし、リーダー・アプリにおける JavaScript サポートはオプショナルなので、EPUB 3 で JavaScript を入れる場合は JavaScript が動かなくても文意が通じるようにしなければいけません。おそらく Apple の eBooks や Android の ePub リーダー・アプリは JavaScript 対応してくるでしょうが、Amazon の Kindle の様な商品は JavaScript サポートがない (か遅れる) でしょう。書き手は、その点を考えて JavaScript を使わないといけませんね。

2011年5月25日水曜日

EPUB3 コンテストの〆切が 6 月末まで延期

EPUB3 を盛り上げるイベントの一つに EPUB3 コンテストがあります。

このコンテストの応募〆切が延長されました。最初、5 月末日だったものが 6 月末日に変わっています。5/10 の情報です。5 月に入って絶賛体調不良なので、告知を見落としていました。なお、イベント開催者側は延期の理由を次の様に書いています。

5月下旬から6月にかけて、IDPF Digital Book 2011、Apple WWDC 2011などのイベントで、多くのEPUB3関連の発表があるので、それを待って、6月末日終了としました。

EPUB3 コンテスト　第1回 * - epubcafé より引用

なるほど。イベント目白押しですね。

私としては体が動かず、EPUB3 ドキュメントの作成も遅れに遅れていたので、今回の延長は棚からぼたもちです ;)

2011年5月17日火曜日

「電子書籍らくらくPACK」予約受付中

本ブログで (ドラフト原稿を) 紹介している「電子書籍らくらくPACK」が、Amazon で予約受付中になっています。

電子書籍らくらく作成PACK ＜EPUBテンプレート付き＞

作者は林拓也さん。出版社は技術評論社。大型本で 144 ページ。2011 年 5 月 26 日発売予定。価格は 2,079 円です。

まずは下書きを読んで、納得の内容だったら予約してみてはいかがでしょうか?

2011年5月16日月曜日

「電子書籍らくらくPACK」下書き — 第 4 回配信

5/9、「電子書籍らくらくPACK」下書きの第四回が配信されました。同書については、過去記事をお読み下さい。

第四回の内容は「Sigil の概要説明」です。第 3 回にて、ePub における基本情報を提示しました。第四回はその事実を踏まえて、本格的に Sigil を使った ePub 作成方法について解説をします。

各節のタイトルを挙げておきましょう。

4-1 Sigil の概要を知ろう
4-2 文章を貼り付けよう
4-3 文章を構造化しよう
4-4 画像を配置しよう
4-5 スタイルを設定しよう (※)
4-6 目次 (TOC) を設定しよう (※)
4-7 表紙画像とメタ情報を設定しよう (※)

今回のお試し配布版では、※のついた 4-5, 4-6, 4-7 節の内容が省略されています。

4-2, 4-3, 4-4 についてコメントを添えて紹介に変えたいと思います。

4-2 文章を貼り付けよう

本書では、Sigil で直接ドキュメントを作成することはしません。テキスト・エディターで原稿を作成し、Sigil で成型して ePub 化する手順を取っています。そのため、Sigil にテキストを貼り付ける作業が一番最初に説明されています。

Sigil をブックビュー・モードにして、テキストを貼り付けるのがコツです。すると、テキストに応じた HTML ファイルが Sigil によって作成されます。

何故、このような手間を取る必要があるのか? その説明がありません。ただ、その様にすると書いてあるだけです。コラムでも良いですから、説明があると良いと思いました。私が愚考するに

Sigil は大量の日本語ドキュメントを扱うと落ちる
下書きは、テキスト・エディターを使う方が書きやすい

ということを考慮しているのではないかと思います。

XHTML ファイルの容量

同名のコラムがあり、ePub リーダーによっては XHTML ファイルのデータ容量の上限が 300 KB になっていることを指摘しています。これは ePub リーダー側の都合であって、ePub の規格にあることではありません。ですが、より多くの人に読んでもらう場合、この事実は頭の隅に置いておく方が良さそうです。

4-3 文章を構造化しよう

Sigil のテキストを貼り付けただけでは、正しい構造化がされていません。例えば、Sigil はどの行が「見出し」かを知ることが出来ません。そこでユーザーは手で HTML ファイルを構造化する必要があります。4-3 では、具体的に以下の構造化について説明しています。

見出しの作成
箇条書きリストの作成
不要な空白の削除

段落について

Sigil はテキストをコピーした時、改行を段落として認識します。つまり、改行があるごとに p 要素でタグ付けします。

しかし、本書では、p 要素を br 要素に置き換えるよう勧めています。どうやら、p 要素を入れることで「空白行」ができることを嫌っているようです。

私は p 要素で空白行を入れるのは「文章構造」ではなく「スタイル」の問題だと思います。空白行が入るのが嫌であれば、p 要素のスタイルを変更すべきで、「段落」という文章構造を重視し残すべきだと考えます。

4-4 画像を配置しよう

特にコメントはありません。

おわりに

本書の様に、原稿と文章成型の工程を分ける場合メリットとデメリットがあります。

メリットは原稿作成時に「テキスト」だけを書けば良いことです。作者は文章作成以外に集中しなくて済みます。

デメリットは、原稿を Sigil で成型後、修正を入れるのが大変なことです。変更量が大きければ、テキスト・エディターで文章修正後、もう一度文章構造形成や画像配置を行なわなくてはなりません。変更量が小さい場合は、オリジナルの原稿と Sigil 側のドキュメント両方に修正を入れることになるでしょう。

現状、本書が示す方法が最良に近いと思いますが、メリット・デメリットがあることを具体的に書いてあると親切だと思いました。

体調を崩しています

ゴールデン・ウィーク明けから、体調を崩しています。今日、五月に入って初めて PC を起動しました。

少々不定期になるかもしれませんが、4/28 以来更新が止まっていたブログを再開します。どうぞ、よろしく。

2011年4月29日金曜日

Google Apps が新ビジネス・モデルを発表

Google Apps に大きな変化が 2 つ起きています。1 つ目は新ビジネス・モデルの導入。2 つ目は Google アカウントとの統合です。一つずつ説明します。

新ビジネス・モデル

Official Google Enterprise Blog: Helping small businesses start and manage Google Apps for Business

今まで年間契約だった Google Apps for Business が月間契約も可能になりました。年間プランでは 1 アカウント 50 ドル/年だったところ、月間プランでは 1 アカウント 5 ドル/月となります。月間プランの支払いは、月末に行なわれます。月間プランの方が割高ですが、ユーザー数を毎月変化させられるメリットがあります。短期契約社員を雇う会社、入れ替わりの激しい会社にはコスト削減につながるかもしれません。また、スタート・アップ企業に対しても初期コストが低いのが魅力です。小さな IT 系企業にとって、月間プランはおいしいサービスでしょう。

Google Apps のユーザー数制限

Google Apps (無料版) のユーザー数制限が変わります。今まで 50 人だったところが、10 人にまで減らされます。

この変更は、5/10 以降に Google Apps を開始する人 (会社) に適用されます。5/10 以前に Google Apps を使い始めた人達は、今まで通り無料で 50 人まで人数を増やせます。5/10 以降、10 人を越える人数で Google Apps を開設する場合は、Google Apps for Business を使う必要があります。

私も Google Apps を使っているので、人ごとではありません。幸い影響はなさそうですが、Google Apps に興味を持っていて、10〜50 人前後の人数ならば、とりあえず Google Apps を始めておくのが良さそうです。

Google アカウントの統合

最近、Google Apps アカウントと Google アカウントが統合されたようです。同じ Cookie が使われる様になり、一つのブラウザーで Google Apps のサービスと Google アカウントのサービスを同時に使うことが出来なくなりました。この結果、個人用の Gmail と会社の Google Apps 版 Gmail を一つのブラウザーで開けなくなりました。一旦ログアウトするか、(対応していれば) マルチ・アカウント機能を使うしかありません。

参考: SE奮闘記: Google AccountとGoogle Apps Accountを切り替えて使う

私は一つのブラウザーで使い分けることを諦めました。個人用 Google アカウントは Google Chrome で、Google Apps (つまり akaato.com 用) アカウントは Firefox 4 で使い分けています。

過渡期の混乱とは思いますが、Google さんには早めに良い解決策を提示して欲しいものです。

登録: 投稿 (Atom)

2012年7月5日木曜日

2012年6月14日木曜日

2012年3月6日火曜日

過去エントリー

2011年8月3日水曜日

2011年7月31日日曜日

投稿作品

デパート・カタログ

LaTeX Intro

2011年7月13日水曜日

2011年7月8日金曜日

espur 概要

2011年6月22日水曜日

2011年6月21日火曜日

シリアライゼーションについて

HTML5 と XHTML5 の大まかな分け方

HTML5 の雛型

XHTML5 の雛型

謝辞

2011年6月18日土曜日

カバー画像を作る

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

content.opf の変更

metadata 要素の変更

manifest 要素へ item を追加

spine 要素へカバーへの参照を追加する

guide 要素の追加

仕上がり

おしまい

2011年6月17日金曜日

スタイルの追加

Stylesheet の追加

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

content.opf の変更

2011年6月9日木曜日

ePub で画像

content.opf の変更

ソースとプレビュー

SVG 画像の作成

2011年6月8日水曜日

目次の作成

content.opf ファイルの変更点

目次ファイル (toc.ncx) は次のようになります:

dtb:uid

navPoint

2011年5月30日月曜日

発売

2011年5月26日木曜日

JavaScript

2011年5月25日水曜日

2011年5月17日火曜日

2011年5月16日月曜日

4-2 文章を貼り付けよう

XHTML ファイルの容量

4-3 文章を構造化しよう

段落について

4-4 画像を配置しよう

おわりに

2011年4月29日金曜日

新ビジネス・モデル

Google Apps のユーザー数制限

Google アカウントの統合

`metadata` 要素の変更

`manifest` 要素へ item を追加

`spine` 要素へカバーへの参照を追加する

`guide` 要素の追加