何を本にするのか？（素材の準備）

本を作るには、当たり前ですが「本の中身となる文字や写真*1」が必要です。第１回目のエントリでもお話ししましたが、もし皆さんご自身で書き貯めている文章や撮影した写真があれば、それを使って電子書籍をつくっていただくのが面白いと思います。

また、そのような原稿がない方は「ご自身の好きな作家さんの作品を本にする」ことで、電子書籍づくりの面白さを体験されることをお薦めします。

原稿を「データ」にする

電子書籍にしたい文字や写真が「アナログ」（紙に書かれたりプリントされたりしている状態）の場合、まずはそれを「デジタル」（データ）にする必要があります。

文字のデータ化

手書きの場合
原稿が、鉛筆やペンで書いた「手書きの原稿」の場合、それデータ化するには「文字を読みながらタイピングしてデータにする」しか方法はありません。手間は掛かりますがタイピングの練習と捉えて取り組むと良いかもしれません。

紙の本の場合
お手元にある本をの文字をデータにするのであれば、やり方はふた通りあります。

• 読みながらタイピング入力
• スキャナを使い文字を読み取る。

上は原稿が手書きである場合と同じです。下はスキャナやOCR（光学文字認識）ソフト*2が必要ですが、読んで入力するよりも早く文字をデータにすることができます。ただスキャナにかけるには本を断裁する（背表紙を切り落としてバラバラにする）必要がありますし、OCRの読み取りは完璧ではないので誤字脱字を確認・修正する必要も出てきます。

文字が既にデータになっている場合
「既にパソコンのワープロソフトで書いた文章がある」というような場合は、それを電子書籍用の文字データとして使うことができます。また青空文庫*3で配布している文字データも電子書籍の素材として使えます。

青空文庫
http://www.aozora.gr.jp/

上記のウェブサイトにアクセスしていただき、ご自身のお好きな作品の「ファイル種別：テキストファイル」を選んでダウンロードしてください。このブログでは青空文庫の『こころ』（夏目漱石著）のテキストデータを使って、実際に電子書籍づくりを進めていきます。

ファイル形式と文字コードについて

電子書籍の素材として使用する「文字データ」は、下記のようなものである必要があります。

• ファイル形式：プレーンテキスト（拡張子は「.txt」）
• 文字コード　：UTF-8

ではまずファイル形式からみていきましょう。

プレーンテキスト*4のつくり方
ワープロソフトで作ったファイルは、通常ソフトごとの独自形式になっており、そのため拡張子も「.docx」「.JTD」「.ODT」など、作ったソフトごとに異なります。これを「.txt」という拡張子のファイル形式に変更する必要があります。

方法は下記の通りです。

• ワープロソフトでファイルを開く。
• “名前を付けて保存”を選択。
• 保存ファイル形式に「.txt」を選んで保存する。（下図：ワードの場合）

なお「ファイルを開かず、拡張子を.txtに書き換えるだけ」というやり方はNGです。

文字コード*5の確認と変更
次に文字コードを確認していきます。

• 作成した（もしくは青空文庫からダウンロードした）プレーンテキストのファイルをエディタで開きます。
• もし下のようなウィンドウが開いたら「一覧からエンコードを選択する」を選び、OKをクリック。

• 次に出てくるウィンドウの右側プレビュー表示欄内の文字が文字化けしないエンコードを、左側リストから選び、「開く」をクリック。

• ファイルが開くとその文字コードが何なのか、エディタの機能で確認することができます。（ウィンドウのどこかに表示されるケースが多いです。EmEditorの場合ウィンドウの右下に表示されます）

ここが「UTF-8」になっていない場合は、文字コードを変更する必要があります。ちなみに青空文庫で配布されている文字データは「シフトJIS」という文字コードなので、続けて下記の手順で文字コードをUTF-8に変更していきます。

• メニューバーの「ファイル」から「名前を付けて保存」を選択します。
• 下のようなウィンドウが出てくるので、そのウィンドウの右下にある「エンコード」ボタンをクリック。出てきたリストから「UTF-8（BOM無し）」を選び、保存してください。

シフトJISで表示されなかった漢字を入力する
青空文庫からダウンロードしてきたデータの中には、ときおり下のような表記が見られます。

これは一般的でない漢字（旧字体等）を表示することができなかった文字コード「シフトJIS」において、「ここは本来こんな形の文字が表示されるんですよ」という情報の表示です。一方今回の電子書籍づくりで使う文字コード「UTF-8」は、シフトJISに比べると一般的でない漢字も広く網羅しているので、このような表記部分は入力し直していきます。

入力の際、平仮名からの変換がうまくいかない場合は、IMEパッドの「手書き機能」を使うなどしてその文字を探して差し替えます。

なお、文章の「どこに差し替えるべき文字があるのか？」を探すには、「※」で検索すると簡単に見つけることができます。

なお『こころ』の文章においてシフトJISで表示できなかった漢字は、UTF-8だとすべて表示が可能です。

写真のデータ化

原稿が紙（現像された写真）の場合
現像や印刷された写真を使う場合は、スキャナを使ってデータ化します。保存形式はJPEG形式（拡張子.jpg）にしてください。

写真が既にデータになっている場合
デジカメで撮影したデータを使うことももちろん可能です。こちらも保存形式はJPEGで。

なお電子書籍に写真を使用する場合、画素数（ピクセル数）を変更する必要があるのですが、その作業は実際本に組み込むところで説明します。

今日のまとめ

電子書籍に使う素材データは

• 文字データのファイル形式　プレーンテキスト（.txt）
• 文字コード　UTF-8
• 画像データのファイル形式　JPEG

で用意する。

次回からはいよいよ
電子書籍づくり実践（マークアップ）ついてお話します。

*1:写真は挿絵程度の扱いのものを想定しています。

*2:インクジェットプリンタにはスキャナ機能が付いている機種が多くあります。その場合OCRソフトがおまけでついていることが多いので、プリンタを所有されている方は確認してみると良いかもしれません。

*3:著作権の切れた著名作品を無償で公開しているウェブサイト。

*4:プレーンテキストとは、文字に対する装飾的要素（書体、サイズ、太さなどの指定）のない、シンプルな文字情報のファイル形式です。

*5:文字コードとは「文字データの規格」みたいなもので、この差異により「文字化け」と呼ばれる現象が起きます。

タグ入力の省力化（正規表現）

今回は正規表現を使ってhtmlのタグを付ける方法を学びます。前回お伝えした通りエディタの検索置換機能に「正規表現」を使うと、魔法のようなスピードでタグをつけることが可能です。

正規表現を用いた「検索」「置換」

それでは実際にやってみましょう。今回も下の「桃太郎」の文章を使いますので、これをエディタの新規書類へコピペしてください。

桃太郎

桃太郎の誕生

昔々、あるところにお爺さんとお婆さんがおりました。

お爺さんは山へ柴刈りに、お婆さんは川へ洗濯に行きました。

お婆さんが洗濯をしていると、川上から大きな桃が「どんぶらこ、どんぶらこ」と流れてきました。

コピペができたら、エディタの「検索」と「置換」の欄にそれぞれ下記の通り入力してください。（キーボードショットカットを使ってコピペしましょう。）

検索　(.+)

置換　<p>$1</p>

とりあえずこの文字列が何を意味しているのか今は考えなくてOKです。

なお正規表現を用いて検索置換する場合は、エディタの「正規表現を使用する」とか「正規表現検索」といったチェックボックスにチェックを入れる必要があります。

チェックを入れたら「すべてを置換」をクリック。

おお！素晴らしい！

ボタンひとつで全ての段落の
前には<p>
後ろには</p>
がつきました！
この呪文を使えばどんなに段落が増えても、ボタン一発で作業を完了できます。

今後<p>〜</p>に限らず、さまざまなタグをこのような「正規表現を用いた検索置換」で付与していきます。

呪文の理屈（正規表現、基本の“き”）

今後このブログでは、タグをつける作業（マークアップと呼びます）のたびに、必要な正規表現をお伝えします。皆さんはそのワードを「検索」と「置換」の窓に入れ、今回と同じ要領でエディタを操作すればマークアップをすることが出来ます。

これにより正規表現の理屈はわからなくても作業を進めることは可能なのですが、その反面、仕組みを理解していると電子書籍づくりに限らずいろいろな作業に使えるのが正規表現ですので、興味のある方はその仕組みを軽くかじってみてください。

まずは先ほど「検索」「置換」の欄にコピペした文字列が、どのような意味を持っているのかを説明します。

検索欄に入れた文字

.+

これは「一文字以上の文字や数字」の意味です。となると「一文字以上って言うとじゃあ何文字まで？」という話しになりますが、ここでは「段落の最初から最後まで（＝改行から改行まで）」と理解してください。今回この「.+」は段落内の文字や数字すべてという意味になります。

( )

文字列を括弧で囲むことにより塊（かたまり）を表します。これについては後述の置換の説明とリンクするので、ここで「塊の意味」をあまり深く考えなくていいもです。

置換欄に入れた文字

$1

これは「塊の移行先」の意味です。検索にて「( )」で囲まれた内容を、この文字の場所にそのまま移行します。

<p> と </p>

置換後新たにに追加したい文字です。

理解を深めるため、下記の例題を正規表現で「検索」「置換」をしてみましょう。

まずはテキストエディタに「あいうえお」と入力し、それに検索置換を掛けていきます。（先ほどお伝えした正規表現のチェックボックスを忘れずにチェックしてください。

例題１

検索　あい(う)えお

置換　$1

やりたいこと
カッコに囲まれた文字だけが$1に移行する。それ以外の該当しない文字を消す。

結果　う

例題２

検索　あい(う)え(お)

置換　$1$2

やりたいこと
複数箇所を移行させる。
$1は文頭から数えてひとつめの括弧に囲まれている文字「う」の移行先。$2は文頭から数えてふたつめの括弧に囲まれている文字「お」の移行先。それ以外の該当しない文字を消す。

結果　うお

例題３

検索　(あいうえお)

置換　平仮名で$1と書きました。

やりたいこと
移行した文字の前後に、文字を追加する。

結果　平仮名であいうえおと書きました。

さらに正規表現への理解を深めたい方には下記のサイトがわかりやすくておすすめです。実際に正規表現を使いながら覚えることができます。

すぐに使える！正規表現サンプル集
http://hodade.adam.ne.jp/seiki/

検索置換の正規表現を考えるのはパズルを解くような愉しみもあり、またそれにより作業が一瞬で終わるのはなかなか感動ものです。

もちろん本来の目的は電子書籍（HTML）のタグを「早く正確に付ける」ことですので、このブログでお伝えする正規表現をコピペして作業するだけでも（正規表現の理屈を知らなくても）問題はないです。

補足
正規表現を用いた検索置換は、エディタによって若干解釈が異なります。もしお使いのエディタで正規表現を使って同じ結果を得られない場合、このブログで紹介されているEmEditor（Windows用）かmi（Mac用）を使うことをお薦めします。

今日のまとめ

正規表現とは？

• テキストエディタの検索置換機能で使うことにより、タグ付け等の繰り返し作業を瞬時に終わらせることができる仕組み。
• 電子書籍づくりにおいて、それをマスターする必要はないが仕組みを理解しているといろいろな作業省力化に使える。

次回は
電子書籍の素材データの準備についてお話します。

タグ入力の省力化（検索置換）

前回学んだキーボードショートカットを使ったコピペは、慣れると相当早く作業をすることが出来るようになります。ですが「一カ所ごとに作業していく」という手間に変わりはありません。（100の段落があれば100回「カーソルを合わせて貼付け」をしなければなりません）

次に紹介するのは、一口でいえばある“呪文”を唱えると繰り返しやっていた作業が一瞬で終わるという魔法みたいなやり方です。

検索と置換

その“呪文”は「正規表現」というのですが、今回はその正規表現を覚える前に必要な「検索と置換」という考え方について学びます。

テキストエディタと呼ばれるソフトウェアの多くに、この「検索」「置換」の機能がついています。電子書籍の制作に適しています、ということで以前皆さんにお薦めしたEmEditor（Windows用エディタ）、mi（Mac用エディタ）にもこの機能がついていて、下記の手順で呼び出して使います。

EmEditorの場合
メニューバーの「検索」→「置換」（ショートカットはctl+H）を選択します。

miの場合
メニューバーの「検索」→「検索・置換」（ショートカットはcommand+F）を選択します。

呼び出したどちらのウィンドウにも「上下にふたつの文字入力用スペース」があります。

これは

• 上が「検索」用
• 下が「置換」用

の文字入力スペースです。

検索置換の機能がついていれば、どんなエディタでも同じようなレイアウトになっています。

「検索」には何を入れるのか？

まず上側の「検索」について説明します。

Googleで調べものをするときにも「検索する」といいますが、Google検索の場合は入力したキーワードをもとに、インターネットから情報を探してきます。それに対しエディタの「検索」は、入力した「文字」をファイルの中から探してきます。

前回使った桃太郎の文章を例に見てみます。EmEditorで検索したいファイルが開いた状態で検索置換ウィンドウの「検索」の窓に「桃」と入力して「検索」をクリックします。続けて出てくるウィンドウの「すべてを検索」もクリックすると、エディタで該当する文字部分（桃）に色がつきます。

これはエディタが「操作者が検索した『桃』という文字を探しました」という結果を表示している、といえます。

「置換」には何を入れるのか

続いて下側の「置換」について説明します。

置換では、読んで字のごとく「置き換え」をします。ここで先ほどの桃太郎のファイルを使って説明します。

今度は

• 検索の欄に「桃」
• 置換の欄に「梨」

と入力して、「すべてを置換」のボタンをクリックします。

するとどうでしょう？さっきまで「桃」と表記されていた箇所が全て「梨」に変りました。

“検索した文字を置換指示された文字に置き換える”これが検索置換です。

この機能を利用した作業に「表記の揺れを統一する」というのがあります。

例えばひとつの文章のなかで、「ひっこし」の表記が

• 引っ越し
• 引越
• 引越し

と複数になっている、こういう状態を「表記が揺れている」といい統一する必要があります。

長い文章であると、統一すべき文字がどこにあるのか、人の目で探すのは容易ではありません。そんなときにエディタの「検索」を使い「潰したい揺れた表現（「引っ越し」の表記で統一するなら「引越し」や「引越」の表記）」を探し出し、「置換」の機能を使って書き換える。ということが簡単に且つ確実に出来ます。

この「検索」と「置換」の考え方をふまえ、次回は正規表現によるタグ付けを学んでいきます。

今日のまとめ

検索置換とは？

• コピペよりも効率的にタグ付けができる「正規表現」という手法、それを学ぶ前に必要な知識。
• 検索置換の機能は多くのテキストエディタに備えられている
• 検索　該当する文字をファイルの中から探す。
• 置換　検索した文字を指定された文字に置き換える。

次回は
正規表現を使ったタグ付けについてお話します。

タグ入力の省力化（コピペ）

前回はhtmlの基礎について、実際にhtmlのファイル（電子書籍データ）のつくりながら学びましたが、今回はもう少し長めの文章でhtmlファイルをつくります。

下のような文章をウェブブラウザ上で表示しようと思います。

桃太郎

桃太郎の誕生

昔々、あるところにお爺さんとお婆さんがおりました。

お爺さんは山へ柴刈りに、お婆さんは川へ洗濯に行きました。

お婆さんが洗濯をしていると、川上から大きな桃が「どんぶらこ、どんぶらこ」と流れてきました。

前回、文字をウェブブラウザで表示をするには

• “これはHTMLのファイルである”と定義した入れ物が必要
• 表示したい文字（要素）にはタグつけが必要

と学びましたので、そのルールに沿って下記のような内容のhtmlファイルを作ります。

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

<!DOCTYPE html>

<html

 xmlns="http://www.w3.org/1999/xhtml"

 xmlns:epub="http://www.idpf.org/2007/ops"

 xml:lang="ja"

 class="hltr"

>

<head>

<meta charset="UTF-8"/>

<title>作品名</title>

<link rel="stylesheet" type="text/css" href="../style/book-style.css"/>

</head>

<body class="p-text">

<div class="main">

<p>桃太郎</p>

<p>桃太郎の誕生</p>

<p>昔々、あるところにお爺さんとお婆さんがおりました。</p>

<p>お爺さんは山へ柴刈りに、お婆さんは川へ洗濯に行きました。</p>

<p>お婆さんが洗濯をしていると、川上から大きな桃が「どんぶらこ、どんぶらこ」と流れてきました。</p>

</div>

</body>

</html>

上記の文章を、前回と同じ手順でテキストエディタ（EmEditor等）の新規書類にコピペし、任意の名前で保存（エンコードを「UTF-8（BOM無し）」にするのを忘れずに！）、ブラウザで表示すると下のようになります。

では、タグをつけた本文部分をもう一度見てみましょう。段落の先頭には<p>を、終わりには</p>がついています。

<p>桃太郎</p>

<p>桃太郎の誕生</p>

<p>昔々、あるところにお爺さんとお婆さんがおりました。</p>

<p>お爺さんは山へ柴刈りに、お婆さんは川へ洗濯に行きました。</p>

<p>お婆さんが洗濯をしていると、川上から大きな桃が「どんぶらこ、どんぶらこ」と流れてきました。</p>

このようなタグを付けていくのは「同じ作業の繰り返し」になります。

この程度の、段落の少ない文章ならひとつひとつタイピングしてタグをつけていくのも可能ですが、もっと段落が増えたらどうでしょう？

長編小説のなかにある段落すべてに対して、ひとつひとつ入力していくのはあまりにも時間がかかってしまいます。

そこで、「作業の省力化」について考えてみましょう。

コピペ（コピー＆ペースト）

パソコンに限らず、世の中に存在する“機械”は、ひとの作業を省力化するために存在します。特に「同じ作業の繰り返し」は、機械が最も得意とする分野です。逆に言えば「単純な繰り返し作業を人間がやる」のは、あまり筋がいい話しでない、とも言えます。

コピペ
繰り返しをともなうパソコンの入力作業を省力化する方法として、よく知られているのが「コピペ」です。コピペとは「コピーアンドペースト」の略称で、「複製（コピー）したデータを別の場所に貼付ける（ペーストする）」ことです。

コピペをより効率的に行うためには、このブログの第二回目で出てきた「キーボードショートカット」が有効です。マウス操作（右クリックメニュー）でも「コピー」や「貼付け」をすることは可能ですが、今回のような繰り返しの多い作業では「キーボードショートカット」を使うとマウス操作よりも数段早く作業できます。

 今回の文章に対する作業であれば

• まず最初の段落に<p>とキーボードで入力。
• 入力した<p>の部分をマウスカーソルでなぞり、コピー（ctr+C）する。
• 次の段落の先頭にカーソルを移動。貼付ける（ctr+V）。
• 更に次の段落にカーソルを移動。貼付ける。以下繰り返し…。
• 先頭の<p>のコピペ終わったら、段落末に</p>を同じ要領でコピペする。

という手順になります。

省力化とともに得られる「誤入力防止」の効果

電子書籍づくりをしていると「作ったデータが上手く動かない」ことがよくあります。いわゆる「エラーが出ている」状態です。一度エラーが出たデータから、その原因を見つけ出すのは結構大変な作業です。そしてエラーの原因としてとても多いのが「入力ミス」です。

 もちろんワザと間違える人はいないわけですから、「注意深く作業する」という解決方法では限界があるのは容易に想像がつくところですし、そもそも注意深くなりすぎると作業がはかどらないし疲れます。

コピペにはこうした「誤入力を防ぐ」という効果も実はあります。

当たり前の話しですが、コンピューターは「コピーした文字」を「間違って別の文字にして貼付ける」といったことは絶対しません。もしコンピューターが使い手の意図に反した動作をするのであれば、それは操作している「人間」の指示が間違っている、ということになります。

どんなに慎重に作業しても、人が関わる限り誤入力は起こります。であれば、コピペなどのコンピューターの機能を活用し、タイプミスなどのヒューマンエラー要因を減らすことが、速やかに間違いのないデータをつくることにつながります。

今日のまとめ

コピペで繰り返しの作業を省力化する。

• 同じ内容を他所からもってくることにより、データの再入力の手間を減らす。
• マウス操作よりキーボードショートカットを使うのが効率的
• 副次的に「誤入力防止」の効果も得られる。

次回は
タグ付け作業の効率化（検索置換）についてお話します。

電子書籍づくりはhtmlファイルづくり

今回から実際に電子書籍のデータ（htmlファイル）をつくってみます。

まずは

• どうつくるか
• つくったものがどう見えるか

を実際に作業を通じて体験することに主眼を置きます。そのため技術的な解説は可能な限り解りやすく、かつ最低限にとどめたいと思います。

ちなみに今回お伝えする内容はウェブ制作の基礎知識とも重複する内容ですので、そちらにも興味がある方はその視点からも併せて学んでいただけるとお得かもです。

まずは“入れ物”をつくってみる

それでは作業開始です。

まずはテキストエディタ（EmEditor等）を立ち上げ、新規の書類を開きます。

開いたら下記の文字を「コピー」してテキストエディタに「貼付け」（コピペ*1）します。

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

<!DOCTYPE html>

<html

 xmlns="http://www.w3.org/1999/xhtml"

 xmlns:epub="http://www.idpf.org/2007/ops"

 xml:lang="ja"

 class="hltr"

>

<head>

<meta charset="UTF-8"/>

<title>作品名</title>

<link rel="stylesheet" type="text/css" href="../style/book-style.css"/>

</head>

<body class="p-text">

<div class="main">

</div>

</body>

</html>

このようになると思います。

これを保存します。
EmEditorのメニューバー「ファイル」から「名前を付けて保存」をクリックします。

そうすると下のようなウィンドウが出て来ますので、ファイル名をtest.html、エンコードはUTF-8 BOM無しを選択して保存します。

保存すると下のようなアイコンが新たに作られます。

アイコンの絵柄が上のものと違っていても気にする必要はありませんので、そのアイコンを「右クリック」→メニューから「プログラムから開く」を選択→「Google Chrome」をクリック。

Chromeが立ち上がり、何も表示されない空っぽのウィンドウが開きます。

このファイルは“入れ物”で、今は何も入っていない空き箱のような状態だと考えて下さい。

“入れ物”に“中身”を入れていく

ではさっき「 test.html 」にわざわざ書き込んだ（コピペした）文字は何なのか？

これは「このファイルはHTMLのファイルですよー」と“定義している文章”です。お約束として記述を義務づけられたものなので、この文字に「どのような意味があるのか？」を考える必要はありません（少なくとも現時点では）。「HTMLのファイルにはこんな記述をするのがお約束なんだなー」くらいに理解しておけばOKです。

では次に“空っぽの入れ物”に“中身”入れ、ブラウザで表示させてみましょう。

test.htmlを右クリック。「プログラムから開く」→「EmEditor」をクリック。

先ほどコピペした“定義している文章”の

<div class="main">

と

</div>

の間に下記の文字を追加します。

<p>この文字を表示させます。</p>

 このようになると思います。

文字を追加できたらファイルに名前をつけて保存します。

EmEditorのメニューバー「ファイル」から「名前を付けて保存」をクリックします。そして、ファイル名を「p.html」、エンコードを「UTF-8 BOM無し」として保存します。

次に保存した「p.html」を右クリックして「プログラムから開く」を選択→「Google Chrome」をクリックします。

Google Chrome（ウェブブラウザ）上に、文字が表示されました！

タグで挟むのが基本

先ほど「ブラウザ上で表示させたい文字」を追加する際、前後に記号が付いていたことにお気づきかと思います。これはタグと呼ばれるもので、HTMLでは表示させたいもの（要素の内容）の前後を「<」と「>」で囲まれた英数字（タグ）で挟むのが基本です。

要素を挟む「前」のタグを開始タグ、「後ろ」のタグを終了タグと呼びます。

先ほどの例であれば

開始タグが　<p>

終了タグが　</p>

となります。

一部例外（終了タグがないもの）もありますが、それはおいおい覚えるとして、基本的には、表示したいもの（要素の内容）を、開始タグ（<と>にはさまれた英数字）と終了タグ（開始タグの英数字の前に/を追加したもの）で挟む、と覚えてください。

ちなみに今回使用したタグ「p」は、段落 Paragraph の略で、<p>～</p> でひとつの段落を示します。一般的な文章で「本文のひと段落」を表し、電子書籍づくりで最も多く使うタグになります。

タグには他にもいろいろな種類のものがありますが、電子書籍はそれほど多種類のタグを使わなくてもつくることが可能です。

htmlファイルの構造

最後に「入れ物」である「htmlファイル」の構造について簡単に説明します。今回作成した「p.html」をエディタで開いていただき、その内容と下の画像を比べ、全体の構造ルールを押さえておきましょう。

今回作成した「p.xhtml」における「宣言文」にあたる部分は

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

になります。

また、それぞれの要素内にある「タグ」の意味については、いわゆる「ホームページ制作初心者入門サイト」で情報を積み増しすることをお薦めします。htmlについての理解が深いほど、楽しく電子書籍を作ることができます。

「ホームページ　入門」などのキーワードでGoogle検索すると、いろんなウェブサイトが表示されると思います。

ホームページ入門
http://www.tohoho-web.com/wwwbeg.htm

やさしいホームページ入門：HTML入門
http://www.ink.or.jp/~bigblock/html/index.html

色々なウェブサイトがあるので、ご自分で「理解しやすい」と感じるサイトを選んでみてください。

今日のまとめ

HTMLファイルをつくる手順

• テキストエディタの新規書類に「これはhtmlのファイルである」と定義する文字を書き込む（“入れ物”を作る）。
• “入れ物”ができたら、それに表示させたい要素を書き込む。その前後には「タグ」と呼ばれる記号をつける。
• 作ったHTMLファイルをウェブブラウザで表示してみる。

次回は
タグ付け作業の効率化（コピペ）についてお話します。

*1:Copy and Paste（コピーアンドペーストの略）

電子書籍をつくる前に必要な「ツール選び」

前回「電子書籍データ（EPUB）は、ウェブページとおなじ技術（HTML）でつくられている」とお伝えしました。

それでは早速その“技術”を学んでいきたいことろですが、その前に電子書籍の作成に必要なツールを先に押さえておきましょう。

必要なのはテキストエディタとウェブブラウザです。

テキストエディタ

その名の通り文字を編集するためのソフトウェアです。身近なところではWindowsに標準でついているメモ帳がそれにあたります。

世の中には様々な種類のテキストエディタがありますが、実はエディタごとに出来ることが若干異なります。このブログでは下で紹介するエディタ（無料）を使う前提で話しを進めていきます。各リンクよりダウンロードのうえご利用下さい。*1

EmEditor（Windows用テキストエディタ）
http://jp.emeditor.com/text-editor-features/history/emeditor-free/

ダウンロードをした後にfree版にダウングレードします。ダウンロードとダウングレードのやり方は上記リンクでご覧下さい。*2

mi（Mac用テキストエディタ）
http://www.mimikaki.net/

こちらは完全なフリーウェア（無料ソフト）です。

ウェブブラウザ

今回の電子書籍づくりに適したものをお使いいただく必要があります。

Google Chrome（グーグル クローム）
http://www.google.co.jp/intl/ja/chrome/browser/

検索エンジン最大手、グーグル（Google）社のウェブブラウザです。Chrome以外のブラウザだと表示が上手く出来ないことがあるので、Google Chromeを使っていない方はインストールをお願いします。

併せてGoogleのアカウントを取得しておきましょう。（無料です。電子書籍閲覧にものちのち必要になります）

https://accounts.google.com/SignUp?hl=ja

なお、現在「gmail」のサービスを使っている方は既にGoogleのアカウントをお持ちのはずですのでご確認ください。

今日のまとめ

電子書籍（HTMLファイル）をつくるにはふたつの「ツール」が必要

• テキストエディタ（ソースコードを書く）
• ウェブブラウザ（作ったHTMLを表示する）

次回は
HTMLファイルのつくり方についてお話します。

*1:ソフトのダウンロードとご使用については、各自の責任においてお願いいたします。

*2:現在（2014.2月）Free版（ダウングレード作業不要）が期間限定でダウンロード出来ます。http://jp.emeditor.com/text-editor-features/history/emeditor-free/

電子書籍を作り上げている“技術”

これからつくろうとしている電子書籍は、一種の“データファイル”です。（まあ当たり前ですが）

データファイルには一般的に、

• ワードなら　.docx
• エクセルなら　.xlsx
• デジカメなどの写真データなら　.jpg

という具合にファイル名の末尾にその種類を識別するための文字（拡張子*1）がつけられています。

今回作成する電子書籍は拡張子が.epubとなります。

例えば“ワープロ”でつくったファイルでも使ったソフトによって拡張子が異なりますよね？それと同様に電子書籍にもいくつかのファイル形式（規格）があります。*2

その中で、今回作り方をご紹介する電子書籍の規格名はEPUB（呼称：イーパブ）といい、現在電子書籍データの世界標準規格といわれています。

ホームページ*3を作成する技術が使われている

今日はこの「規格」について技術的な説明をします（眠くなるのでさらっといきます）。基本的に押さえておきたいのは一点。電子書籍データ“EPUB”は「ホームページをつくる技術」でつくられています。

これだけとさすがにざっくり過ぎなので、ちょっと補足します。

まずEPUBを電子書籍リーダー（閲覧用のソフト）で開いてみます。
こんな感じに見えます。

次にパソコンを使い、同じEPUBファイルの中にある構成要素をウェブブラウザ*4で表示してみます。

どうでしょう？見た目は電子書籍リーダーとほぼおなじですよね。

これでEPUBはホームページのデータと同じ技術で作られているのが、何となくご理解いただけると思います。

ご存知の方も多いと思いますが、ホームページを作成するにはHTMLと呼ばれる技術（データ記述言語）が用いられており、実は電子書籍もこれと同じ技術が用いられているのです。

今日のまとめ

• 今回つくる電子書籍の『規格』は「EPUB（イーパブ）」という。
• 電子書籍づくりにはホームページを作成するのと同じ技術（HTML）が使われている。

次回は
電子書籍をつくる前に必要な「ツール選び」についてお話します。

*1:最近のパソコンは、初期設定で「拡張子を表示しない」になっていますのでこの機会に表示する設定に変更しましょう。http://support.microsoft.com/kb/978449/ja

*2:日本国内規格として「ドットブック形式」「XMDF形式」などがあります。

*3:今回は初心者の方でもイメージしやすいよう「ホームページ」という言葉を使いましたが、この言葉は厳密に言うと誤用で、正しくは「ウェブページ」と呼びます。
http://e-words.jp/w/E3839BE383BCE383A0E3839AE383BCE382B8.html
このブログでは次回以降、いわゆる「ホームページ」のことを「ウェブページ」と呼ぶことにします。

*4:ホームページを閲覧するためのソフト。マイクロソフトのインターネットエクスプローラー（IE）や、グーグルのChrome（クローム）などが有名。