読者です 読者をやめる 読者になる 読者になる

本好きに送る「電子書籍のつくり方」講座

誰でも 簡単 手作り 電子書籍

電子書籍づくり実践(マークアップ)

前回の作業で電子書籍に使う「素材」の用意ができましたので、いよいよ今回からは実際につくる作業に入ります。

前々回までにお話しした通り、htmlのルールに沿って、正規表現を用いて効率的にマークアップ(タグ付け)しながら、「本(電子書籍)」を作っていきます。なお特に指示がない限り、検索置換は「すべてを置換」ボタンで実行してください。

本文タグ

まずは本文にpタグをつけています。使用する正規表現は下記の通りです。

検索
(.+)
置換
<p>$1</p>

文章内にはこの後説明する「見出し」など、本文以外の要素もありますが、とりあえずすべてに対して「pタグ」をつけてしまいます。

本文へ正規表現の検索置換でpタグを付ける

見出しタグ

小説などの文章は、多くの場合「見出し」という要素を持っています。

見出しへ正規表現の検索置換でhタグを付ける

青空文庫からダウンロードした『こころ』のテキストデータにも、見出しがあることが確認できます。

電子書籍においても紙の本同様、見出しは本文と別扱いにします。そのため見出しには「見出し用のタグ」をつけることになります。

見出し用のタグを付与するための正規表現は下記の通りです。

大見出し用

検索
<p>[#2字下げ](.+)[(.+)は大見出し]</p>
置換
<h1>$1</h1>

中見出し用

検索
<p>[#5字下げ](.+)[(.+)は中見出し]</p>
置換
<h2>$1</h2>

「大見出しへのタグ付け」と「中見出しへのタグ付け」、2回に分けて作業します。これらの検索置換を掛け終わると、文章内すべての見出しに「見出しタグ」が付きます。

hタグ付与後

ちなみにこの「hタグ」の「h」は Heading(見出し)の略です。また「h1」から「h6」までのレベルがあり、「h1」が一番大きな見出し、「h6」が一番小さな見出しになります。

縦中横タグ

次に縦中横のタグをつけていきます。本好きな方ならご存知の方も多いかと思いますが、縦中横とは「縦書き文章の中の(英)数字を正立させる」ことを指します。横書きの本をつくる場合、このタグは不要です。

縦中横タグ付け、前と後

このように表示するには下記の様なタグ付けをしていきます。

一桁
…都と道が<span class="tcy">1</span>と、…
二桁
…県が<span class="tcy">43</span>となる。
三桁
…以前は人口
<span class="tcy">1</span>
<span class="tcy">0</span>
<span class="tcy">0</span>万人と…

このように<span class="tcy">と</span>というタグで英数字を囲むと上記の「設定後」ように「正立」するのですが、ルールとして2桁の数字のみ「並べて正立」、それ以外の桁数は一文字ずつ正立させることが多いです。また数字だけでなく英字にも縦中横を設定する場合がありますが、こちらはルールが一定でないので逐次対応とします。

英字は縦にするか横のままか

それでは正規表現を使い縦中横のタグを付けていきましょう。

なお縦中横タグを付与するために使う正規表現なのですが、実は「EmEditor」と「mi」で、その記述方法が異なります。それぞれでうまく検索置換できる正規表現をエディタごとに記述しますので、お使いのエディタ用の正規表現で作業を進めてください。またタグ付けは「桁数ごと」に行います。

EmEditorの場合

1桁の数字に対して

検索
(\d{1,1})
置換
<span class="tcy">$1</span>

2桁の数字に対して

検索
(\d{2,2})
置換
<span class="tcy">$1</span>

3桁の数字に対して

検索
(\d{1,1})(\d{1,1})(\d{1,1})
置換
<span class="tcy">$1</span><span class="tcy">$2</span><span class="tcy">$3</span>

4桁の数字に対して

検索
(\d{1,1})(\d{1,1})(\d{1,1})(\d{1,1})
置換
<span class="tcy">$1</span><span class="tcy">$2</span><span class="tcy">$3</span><span class="tcy">$4</span>

miの場合

1桁の数字に対して

検索
\b([0-9])\b
置換
<span class="tcy">$1</span>

2桁の数字に対して

検索
\b([0-9][0-9])(?!\d)
置換
<span class="tcy">$1</span>

3桁の数字に対して

検索
\b([0-9])([0-9])([0-9])(?!\d)
置換
<span class="tcy">$1</span><span class="tcy">$2</span><span class="tcy">$3</span>

4桁の数字に対して

検索
\b([0-9])([0-9])([0-9])([0-9])(?!\d)
置換
<span class="tcy">$1</span><span class="tcy">$2</span><span class="tcy">$3</span><span class="tcy">$4</span>

5桁以上の数字については、3桁→4桁の法則に沿っていけばOKです。

タグ付けが終わるとこんな感じになります。

縦中横タグ付与後
ちょっとわかりづらいですが…。

ルビダグ

「ルビ」とは読みづらい文字に振られる“ふりがな”のことを指します。

ルビの説明

上のようにルビを振るには、下記の通りにタグをつけます。

増大に<ruby>拍車<rt>はくしゃ</rt></ruby>をかけています。

構成はちょっと分かりにくいかもしれませんが

<ruby>と</ruby>のタグの間に「漢字+よみがな」の順で並べ、さらに「よみがな」を<rt>と</rt>で挟む。

となっています。

それでは正規表現を使い、ルビタグを付けていきましょう。ルビタグを振るのに使用する正規表現は下記の通りです。(青空文庫原稿用です)

似たような検索置換を2回掛けます。

一回目

検索
|([一-龠 々]+)《([ぁ-ん ァ-ヶ ー]+)》
置換
<ruby>$1<rt>$2</rt></ruby>

二回目

検索
([一-龠 々]+)《([ぁ-ん ァ-ヶ ー]+)》
置換
<ruby>$1<rt>$2</rt></ruby>

もし青空文庫以外の原稿にルビタグをつける場合、原稿自体を青空文庫と同じ体裁(漢字+《ふりがな》)にして上記の正規表現を使うか、もしくは別の正規表現を考えるか、のいずれかの対応になると思います。

今日のまとめ

正規表現を利用したタグ付け作業

付けたタグの種類

  • pタグ(本文段落タグ)
  • hタグ(見出しタグ)
  • 縦中横タグ
  • ルビタグ

次回は
電子書籍づくり実践(表示の確認。その方法)ついてお話します。