電子書籍のつくりかた
「簡単」「手軽」と言われているけど、実はちょっとムズカシイ電子書籍のつくりかたをお教えいたします。企業秘密ともいえるノウハウを大公開！
スタイルシートは、電子書籍の見た目（修飾）を、まとめて記述しておいて、本文の中身をわかりやすくするためのものです。書式設定集とでも思っていれば、まちがいないでしょう。
Webのスタイルシートは、なにかと複雑になりがちで、素人が見てもさっぱりわからないものですが、電子書籍はできることが少ない分、シンプルなスタイルシートになります。
どれくらいシンプルか、サンプルを見て……と、その前に。
スタイルシートに関して、重要なポイントを説明しておきましょう。
縦書きの電子書籍をつくる場合、「縦書きにする」という指定は、スタイルシートでおこないます。これから紹介するサンプルコードを、スタイルシートに貼り付ければ、すぐに縦書きの電子書籍となるわけですが。まるまる一冊、縦書きでＯＫかというと、なかなかそうはいかないものだったりもするのです。
最初から最後まで縦書きでも、できることはできるんですよ。ただ、「書籍」として見た場合、ちょっと不恰好になるんですよね。まぁ、実際につくってみないことには、実感できないことだと思いますが……。
なので、経験者のアドバイスとして聞いてください。スタイルシートは、「縦書き用」と「横書き用」の２つ用意しましょう。あった方が便利なんです、絶対。
詳しいことは、おいおい書いていきますが……電子書籍の貧弱な仕様ゆえの問題が出てくるんですよ。
もともとEPUBっていうのは、海外のペーパーバックのような「とにかく文字が並んでいれさえいればいい」という書籍を電子化するという発想なんです（おそらく）。なので、見た目（デザインやバランス）をどうにかしようという部分が弱いのです。
EPUB 3あるいはそれ以降のバージョンの機能が、フルに利用されるようになってくれば、状況も変わってくるかもですが……。
そんなわけで、スタイルシートは必ず２つ用意しましょう。あれば便利なことは保証しますし、使わなくてもまったく問題になりませんし。
そんなことを言ってるわたしですが、実はスタイルシート、２つじゃなくて３つ使っています。
縦書き用と横書き用と、目次用の３つです。
考えがあって３つ用意したのではなくて、sigilが勝手に目次用のスタイルシートを作っていたんです。最初は削除しちゃってもいいかな、とも思ったのですが、そのまま使い続けてみたら、そこそこ便利だったので、そのまま３種類を使うことにしています。
このように、トコトンこだわるなら、「表紙用」「扉用」「コラム用」「あとがき用」など用途別にスタイルシートを用意するのはアリです。数が増えれば増えるだけ、管理が面倒になりますけど。
2013/07/11
admin
まずは、横書きのスタイルシートを見ていただきましょう。
|
@charset "utf-8";
p{
margin: 0;
}
|
……これだけ、です。
「それだけなら、いらないんじゃね？」という気もしますが、これが実は重要だったりするのです。
まず「p」について。
この「p」は、HTMLのタグです。HTMLでは、<p>と</p>に挟まれた間の文章を、ひとつの段落として認識します。
スタイルシートで、p{ … }と指定をすると、<p>から</p>で囲まれた部分を、すべてそのスタイルシートでの指定を適用します。これが、タグとスタイルシートの関係。
今回指定した「margin: 0;」というのは、「段落と段落の間隔を0にしなさい」という指示になります。
日本人からすると「そんなの必要なの？」と感じますが、英文では段落と段落の間が、一行空けるのが普通なのです。そのスタイルだと、日本人にとって違和感を感じるので、ここで「段落と段落の間隔を0にする」と指定してあげるわけです。
ほかにも、行間やフォントサイズなどの指定などもできるのですが、行間やフォントサイズを読む人が自由に変更できる「リフロー」という電子書籍の特徴を活かすためには、それらをスタイルシートで指定しない方がいいでしょう。
「読む人のことなんか知らないよ。自分がベストだと感じるものをつくるんだよ」という芸術家肌の人は、その限りではないかもしれませんが。
こうして作ったスタイルシートは、その別ファイルとして保存しておきましょう。テキストエディタにコピペして、名前をつけて保存が早いと思います。
名前は自由につけていいのですが…。「Style001.css」とか「Style-Yoko.css」など、わかりやすいものがいいと思います。
2013/07/13
admin
続いて、縦書き用のスタイルシートを見ていただきましょう。
|
@charset "utf-8";
p{
margin: 0;
}
body{
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;
}
span.tcy {
text-combine: horizontal;
-webkit-text-combine: horizontal;
-epub-text-combine: horizontal;
}
|
bodyの中にあるのが、縦書きに表示するための指示です。実際には1行目だけでも充分な可能性はありますが、すべての端末・アプリで確実に縦書きで表示するために指示が追加されていると考えてください。
この部分は、すべて理解する必要はありません。実際、私もわかりません（笑）
一種の「おまじない」です。ちゃんとすべてを理解している人が用意してくれたおまじないには、素直に従うのも、効率よく制作するためのコツです。
「span.tcy」は、縦中横用の設定。
縦中横というのは、縦書きの中に一部分だけ入る横書き部分のこと。二桁の数字や「!」などの記号に使われます。
詳しい使い方は、またのちほど。
2013/07/14
admin
スタイルシートの準備ができたら、いよいよ本文の制作……といきたいところですが、その前にひとつだけ。
本文はHTMLファイルになるわけですが、その前に２つ、やらなければならないことがあります。それは、
・「日本語文書である」という宣言
・使うCSSの指定
書誌情報ですでに日本語であることを指定してあるわけですが、ビュアーが必ずそれを確認しているとは限らないわけです。なので、ファイルごとに「このHTMLファイルは、日本語で書かれているよ」という指定をしてあげた方が安全なわけです。
もうひとつが、CSSの指定です。HTMLファイルの中で、「このCSSファイルを使ってね」と指定してあげないと、CSSの設定は反映されないわけです。
これらの指定をするためには、まずHTMLの中身（ソース）を開きます。sigilなら、ツールバーの[コードビュー]ボタンをクリックします。
つくったばかりのHTMLファイルは、こんな感じになってるんじゃないかと思います。
|
<xml version="1.0" encoding="utf-8">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<p> </p>
</body>
</html>
|
この中に、次の部分を追加します。
|
<xml version="1.0" encoding="utf-8">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<title></title>
<link href="../Styles/Style0001.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p> </p>
</body>
</html>
|
※赤字の部分が変更箇所
以上で準備終了です。
<body>部分に、本文を書くなりコピペするなりしましょう。
sigilの場合は、ブックビューに切り替えてからコピペするといいでしょう。ブックビューで直接文章を入力することもできますが、カーソルが消えちゃったりとかするので、あまりおすすめはしません。
2013/07/14
admin
EPUBを制作するアプリと、文章を入力するアプリは分けたほうがいい、という話はたびたびしていたと思います。文章を入力するアプリは、テキストエディタでもワープロでも、それこそ表計算アプリでも、好きなのを使ってください。そうしたアプリで入力した文章を、どうやってEPUB制作アプリにもってくるか、ということを少しお話しておきましょう。
とはいっても、事実上コピペ（コピー＆ペースト）の一択なんですが（笑）
そのコピペでハマっちゃうことがあるんですよね、これが。
ひとつ目が、ワープロ特有の問題。日本語は、「行頭を１字分空ける」というルールがあるわけですが、ワープロの中にはそれを自動でやってくれるアプリがあります。そのワープロから印刷するのであれば、それは「親切な機能」といえなくもないのですが、実はこれ、「インデント」であって「１字空け」ではないのです。
で、それをコピペすると、インデントが消えてしまうのです。つまり、行頭がまったく空いてない段落になってしまうのです。
これを回避するには、ワープロで「別名で保存」を選んで、テキストファィルとして保存し、そのテキストファイルからコピペするとうまくいく……こともあるようです。すべてのワープロアプリで検証したわけではないので、断言はできないのですけど。
ワープロからテキストファイルに出力するメリットは、もうひとつあります。
ワープロの場合、そのアプリ上できれいに見えるようになっています。その結果、不自然な場所に改行マークが入っていても、そうは見えないことがあるのです。電子書籍アプリは、そうした「行の途中の改行マーク」を見逃してくれません。結果、電子書籍で読むと、行の途中で改行されるという事態になってしまうわけです。
そういったことを回避するためには、面倒でも一度テキストファイル化して中身をチェックした方がいいかもしれません。
それと、これはsigil限定かもしれませんが。
文章をコピペすると、段落ごとに<Div>タグで囲われてしまうことがあります。<Div>タグで囲われたからといって、直接的な影響はない（ハズ）ですが、ソースコードはシンプルな方がいいので、余計な<Div>タグが入ってしまった場合は、コピペをやり直した方がいいでしょう。
2013/07/15
admin
スタイルシートを設定して、本文のHTMLファイルをつくれば、電子書籍は「できたも同然」なわけですが、このままだと「縦書きだけど右開き」というおかしなことになってしまうわけです。なので、左開きになるように設定しておきましょう。
本の開き方を設定するのは、content.opfです。content.opfの前の方、<metadata>セクションに、次の行を追加します。
|
<meta content="vertical-rl" name="primary-writing-mode"/>
|
さて。
検索していただければわかるように、電子書籍のつくりかたを解説したページはたくさんあるわけですが、そのいくつかには、「content.opfの<spine toc="ncx">を<spine page-progression-direction="rtl" toc="ncx">に書き換える」と解説してあるものがあります。
もちろん、それも正しい方法ではあるのですが。
sigilでつくった、EPUB2仕様のもの限定かもしれませんが……その方法だとEPUB Checkを通らないんです（<metadata>セクションの方だと通ります）。
「EPUB Checkを通らないからダメ」というわけではないですが、通らないより通った方がいいのは確かなので、sigilを使う方は覚えておきましょう。
2013/07/15
admin
本文もできて、縦書きならスタイルシートと左開きの設定が終われば、ひと通り電子書籍としての体裁はできたわけですが。
「絶対に必要というわけではないけど、しておいた方がいいこと」を紹介しておきましょう。
HTMLファイルの中身（コード）を見ると、上の方に<title>というタグがあります。
Webサイトでしたら、ここに指定した文字が、タイトルバーあるいはタブに表示されます。じゃあ、電子書籍の場合は？
電子書籍でも同じように、画面上部にタイトルが表示されるわけですが……Kindleの場合、書名が表示されてしまうのです。つまり、<title>タグの内容は使われていないわけです。
そうすると、この<title>タグは無視しても問題ないわけですが。
すべてのビュアーで、その仕様かというと、そう言い切れません。いまはそうでも、将来的にそうだとも言い切れません。
読者側からすると、画面上部には章タイトルが表示してほしいという声もあるでしょう。いや、「そんなものは一切表示せず、文章を表示するエリアを広くしろ」という声も強いでしょうが、それはさておき。
そう考えると、使われないかもしれないけど、<title>タグにその章タイトルを入力しておくというのは、悪い選択できないと思います。
<head>
<title>第１章 電子書籍の基礎知識</title>
<link href="../Styles/Style0002.css" rel="stylesheet" type="text/css" />
</head>
|
2013/07/18
admin
地の文だけで電子書籍ができればいいのですけど、実際にはタイトルやら見出しやらといった要素が出てくるものです。そうした見出しなどは、センタリングしたりして目立たせるのが常套手段……というわけで、センタリングなど文字揃えの方法について説明しておきましょう。
といっても、基本的な機能なので、そんなに難しいことはありません。ツールバーの「中央揃え」ボタンをクリックすればＯＫ。右揃えなら「右揃え」ボタンを、左揃えなら「左揃え」ボタンをクリックします。縦書きのときは、右が上に、左が下になります。これはどんなアプリでも共通のハズです。
ちなみに、sigilの場合だと、中央揃えにした部分は、下のようなコードになります。
|
<p style="text-align: center;">第２章 電子書籍をつくってみよう</p>
|
ここで「あれ？」と思った方もいるかもしれません。
HTMLの基本文法のひとつに<center>タグというものがあります。その名の通り、センタリングをするというタグです。たとえば、こんな感じ。
|
<p><center>第２章 電子書籍をつくってみよう</center></p>
|
実は、こっちの方法でも、ちゃんとセンタリングが可能です。
これは、どちらが正解というわけでもなく、どちらでもいいのです。
WYSIWYG（ウィジング）でサクサクつくりたい人はツールバーを使えばいいですし、コードを直接入力するなら、<center>タグの方がわかりやすいかもしれません。
こういう話をすると、「こういう書き方をするのが正しい」と言い出す人がいるのですが、私は「思ったような結果が出るなら、どうでもいい」と思います。
なによりまず、作る人にとってわかりやすいのが一番。その次が、できる限りシンプルなコード。ルール的に推奨されている方法か否かというのは、その次くらいでいいのではないでしょうか。
2013/07/19
admin
ページトップへ戻る
