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

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

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

音声付き電子書籍を作る(iBooks用_3)

ベースとなるEPUBを作る

先にお伝えしたとおり、ここからは「オーサリングソフト」という便利なツールを使って作業を進めていきます。
まずはじめに、ベースとなる「フィックス型EPUB」を「EPUB制作オーサリングソフト」を使って作成していきます。

FUSEe(有料)
http://fusee.jp/product.php

以前作った「こころ」のEPUBを、このFUSEeで開いてみます。

f:id:k_airyuu:20141015153823j:plain

 

開いたウィンドウの一番左側には、そのEPUBの目次構造が表示されます。
そのとなりの「ツリービュー」には、EPUB内のファイル構造がわかりやすく表示されます。手作業だとその度EPUBを解凍して確認・変更しなければいけなかった作業を、この「ツリービュー」を使って手軽に行うことが出来ます。

f:id:k_airyuu:20141019163231j:plain

 

右側の大きなウィンドウは、ファイルの「編集画面」と「プレビュー画面」を切り替えながら作業できるスペースです。

タグや文章などを「コード編集」画面で修正し、その結果を「ビューワ」画面に切り替えて編集結果を確認する、といった反復作業をひとつのソフトウェア内で素早く行うことができます

実際にやってみます。
まずは「コード編集画面」で、本文の先頭に文章を追加してみます。

f:id:k_airyuu:20141019160437j:plain

 

次に、画面上方にある「タブ」で「ビューワ画面」に切り替えてみます。すると修正が反映されていることが瞬時に確認できます。

f:id:k_airyuu:20141019160455j:plain

今までのテキストエディタとブラウザを使った制作方法だと

  1. テキストエディタで、文字を追加(修正)し保存
  2. ブラウザで開きなおして変更箇所の確認をする

という2つのソフトを行き来する手間があったのですが、オーサリングソフトのFUSEeを使えばタブの切り替えだけで瞬時に変更の反映が確認できます。
コードティングは反復作業が多いので、使うほどその便利さを感じることができます。

ここからはこのようなオーサリングソフトの便利な機能を紹介を交えながら、音声付き電子書籍を制作方法を紹介していきます。
このブログを読まれる方は、逆に「もしこの作業をオーサリンツール無しでやるとしたらどれくらい手間がかかるか」を想像しながら読み進めると、オーサリンツールの有用性を感じることができるかもしれません。

それではFUSEeを使って電子書籍を作っていきます。

作業前準備

EPUBを作り始める前に、まずはFUSEeを立ち上げてソフトの環境設定をしておきます。(メニューバーの「ファイル」→「環境設定」)

「カバー・目次」タブの、「目次を自動生成する」のチェックは「外す」

f:id:k_airyuu:20141019164621j:plain


「ページ」タブの、拡張子は「XHTML」を選択。ソースデータは「HTML5形式」を選択

f:id:k_airyuu:20141019165344j:plain

「レイアウト」タブの、固定レイアウトに「チェックを入れる」。
幅に「600」、高さに「800」と入力し、そのあとに固定レイアウトのチェックを「外す」

f:id:k_airyuu:20141019170040j:plain

「ファイル」タブの、「ファイル関連付け」の「.fprjをFUSEeに関連付け」に「チェックを入れる」

f:id:k_airyuu:20141019170625j:plain

これで環境設定は完了です。 

次に新規ファイルを開きます。(メニューバーの「ファイル」→「新規作成」)
開いたら続けてプロジェクトファイルを作成します。(メニューバーの「ファイル」→「名前をつけて保存」)

プロジェクトファイルとは、拡張子が「.fprj」のファイルで「FUSEeの作業途中の状態を保存するためのファイル形式」です。
ファイル名を「peter_rabbit」として保存ボタンを押します。

f:id:k_airyuu:20141019171805j:plain

 

すると
保存オプションウィンドウが出ますので、それを下記の通り設定します。

保存形式は「EPUB3」
固定レイアウトを有効にするに「チェックを入れる」
iBooksを有効にするに「チェックを入れる」
幅の数値を「600」、高さの数値を「800」にする
iBooksオプションのオリジナルフォントを有効にするに「チェックを入れる」

f:id:k_airyuu:20141019083514j:plain

 

設定が終わったら保存ボタンを押します。

すると下のようなファイルが生成されます。

f:id:k_airyuu:20141019175547j:plain


以後、FUSEeで作業している途中に「上書き保存」をするとこのファイルに情報が書き込まれます。

 

次に書誌情報(このプロジェクトファイルで作成する本の情報)を入力します。ツリービュー内で「 cover.xhtml 」を選択し、書誌情報編集タブをクリック。下記の通り入力します。

書籍タイトル
あなうさピーターのはなし
著者
ベアトリス・ポッター
言語
Japanese
出版社
青空文庫

f:id:k_airyuu:20141019180915j:plain

入力したら上書き保存します。

FUSEeへ画像を取り込む

次に絵本でつかう挿絵の画像を、一括でFUSEeで取り込みます。

ファイル追加ボタンから「画像ファイル追加」ボタン選択します。

f:id:k_airyuu:20141019182951j:plain

 

取り込む画像(青空文庫から先にダウンロードしたもの)を選択して「開くボタン」をクリックします。

f:id:k_airyuu:20141019210155j:plain

 

imagesフォルダに画像が取り込まれました。

f:id:k_airyuu:20141019210943j:plain

青空文庫には「表紙」がないので、表紙用の画像は別に用意しました。
下記よりダウンロードできます。

https://www.dropbox.com/s/simccokpnexggcy/cover.png?dl=0

コチラの画像も先ほどと同じ要領でimagesフォルダへ入れて下さい。

表紙と前付のページファイルをつくる

続けて各ページのxhtmlファイルを作っていきます。

まずは表紙です。
表紙には、画像を一枚めいいっぱいのサイズで表示します。FUSEeのプロジェクトファイル作成時に、あらかじめ「cover.xhtml」というファイルが自動で作られていますので、これを使います。

コード編集画面を開き、<p>と</p>の間にカーソルを置いた状態でCtrl+Shift+Iを同時に押すとimagesフォルダ内の画像リストが表示されるので、そこから「cover.png」を選択します。

f:id:k_airyuu:20141019212943j:plain

 

するとコード編集画面のカーソル位置に表紙の画像タグである
<img src="../images/cover.png" alt="" />
が挿入されています。
さらに、画像が画面に対してぴったりのサイズで表示されるように、「img」の後ろに「 style="width:100%;"」を追加して完了です。

f:id:k_airyuu:20141019213807j:plain

 

次に前付です。
新規作成ボタンから「ページ新規作成」を選びます。

f:id:k_airyuu:20141019214507j:plain

 

すると「ページ新規作成」ウィンドウが開くので
ページ名に「fmatter」
ページの複製の数値を「2」
にしてOKボタンを押します。

f:id:k_airyuu:20141019214901j:plain

するとツリービューの text フォルダ内に、「fmatter1.xhtml」「fmatter2.xhtml」という名前の連番の振られたページファイルが作成されています。

 

fmatter1は「本扉(中表紙)」となります。
タイトル、著者名、訳者名と、その下に「fig51344_01.png」の画像を配置する体裁にします。

まず「タイトル、著者名、訳者名」のテキストデータをいれます。
「あなうさピーターのはなし」のテキストファイルを開き、該当部分をコピーし、<body>の下の行に貼り付けます。

f:id:k_airyuu:20141019215911j:plain

 

次に、貼り付けた文章を選択した状態でCtrl+Shift+Pを同時に押すとpタグが付与されます(前に<p>、後ろに</p>が付与されます)。併せて各行が改行表示されるよう、改行タグも付与します。
改行したい部分にカーソルを置きCtrl+Shift+Cを押します。そうするとカーソルのあった場所に「<br />」が付与されます

「段落タグ」と「改行タグ」が付与されると下のようになります。

f:id:k_airyuu:20141015194551j:plain

 

次に画像を配置します。表紙と同じ要領で<p>と</p>の間にカーソルをおいた状態で、Ctrl+Shift+Iを押し、画像リストから「fig51344_01.png」を選びます。続けて全体の体裁を整えるために、下記のとおりいくつかのスタイルを指定します。

f:id:k_airyuu:20141015201129j:plain

指定したスタイルは
・ページの縁、天地左右に30pxの余白をとる
・文字、画像ともページの左右センターに配置する
・文字のサイズは1.5emに
・画像は高さを400pxで表示する
です。

「スタイル」やそれを指定する「タグ」ついては、HTMLとCSS(Webの技術)の話しになりますので、詳しくはGoogleなどで検索してみてください。また以前このブログでもいくつか初心者向けのサイトを紹介してますので、よければそちらも参照下さい。シンプルな電子書籍を作るのであれば、初心者レベルのWebの知識をおさえておけば充分です。

指定したスタイルが反映されると、FUSEeのビューワでは下のように表示されます。

f:id:k_airyuu:20141015201028j:plain

 

次にもうひとつの前付ページを作成します。
こちらのページには「fig51344_02.png」と「fig51344_02.png」の画像をそれぞれページの上下に配置します。

まず<p>と</p>の間にカーソルを置き、画像タグ配置のショートカット(Ctrl+Shift+I)を使い、画像「fig51344_02.png」を配置します。

続いてその次の行に、画像「fig51344_03.png」を、同じくショートカットを使い配置し、さらにその前後に「段落タグ」を付与します。 
段落タグの付与は、imgタグ全体を選択してから Ctrl+Shift+P のショートカット(段落タグ付与のショートカット)を使うことで行います。

続けて全体の体裁を整えるためのスタイルを付与して完了です。

ここで指定するスタイルは
・ページの縁、天地左右に30pxの余白をとる
・画像はページの左右センターに配置する
・画像は高さを350pxで表示する
です。

コードは下記のようになっていればOKです。

f:id:k_airyuu:20141015202830j:plain

 

FUSEeのビューワでは下のように表示されます。

f:id:k_airyuu:20141015203036j:plain

本文のページファイルをつくる

続いて本文のページファイルを作ります。
新規作成ボタンから「ページ新規作成」を選択します。

f:id:k_airyuu:20141019214507j:plain

 

すると下のような「ページ新規作成ウィンドウ」をが立ち上がります。ここでページ名の入力欄に「 p_ 」を、ページの複製の数値を、今回作成する絵本の本文ページ数である「26」、と入力しOKボタンを押します。

f:id:k_airyuu:20141019223654j:plain

 

すると「p_1」から「p_26」までの連番のついた本文ファイルが作成されます。

f:id:k_airyuu:20141019224538j:plain

続けて生成されたにファイルそれぞれに、そのページで表示する「文字」と「画像」を配置していきます。

早速1ページ目を作ってみます。

まずは画像を配置します。
既に入力されてある<p>と</p>の間にカーソルを置き、ショートカットCtrl+Shift+Iを使い「fig51344_04.png」を配置します。
次にその下に、ここで使うテキストデータを、ダウンロードしたテキストファイル内からコピーしてきて貼り付けます。
そして本扉の作成の時とおなじように、段落タグ( p タグ)と改行タグ(<br />)をショートカットCtrl+Shift+Cを使い付与します。
そしてつづけて、こちらも全体の体裁を整えるスタイルを指定します。

ここで指定したスタイルは
・ページのフチに30pxの余白をとる
・画像はページの左右センターに配置する
・画像は高さを400pxで表示する
です。


コードは下記のようになっていればOKです。

f:id:k_airyuu:20141015212303j:plain

 

FUSEeのビューワでは下のように表示されます。

f:id:k_airyuu:20141015212809j:plain

文を任意の長さで区切る

これから作る音声付きEPUBは、その時点で読み上げている箇所を「ハイライト表示」する機能がついています。

f:id:k_airyuu:20141019225354j:plain

 

このハイライトする箇所を「どこで区切るのか」は、タグの付与によって設定します。

それではやってみます。

まずは、「どこで区切るか?」を考えます。
基本的には「句読点で区切る」ようにすれば良いのですが、場合によってはそれだとハイライトが「長すぎたり」「短すぎたり」することがあるので、なるべく一定の長さになるよう、臨機応変で良いと思われます。
今どの部分の音声が再生されているのかが、読み手が理解しやすいよう留意して、区切りの位置を決めます。

タグの付け方は、ハイライト表示したい部分ひとかたまりの、前に<span class="mo">、後に</span>を付与し、はさみます。

下のようになっていればOKです。

f:id:k_airyuu:20141016124937j:plain


なお、このタグはあくまで音声の割り振りに必要な情報ですので、ビューワでの見た目になんら変化はありません。

以上で1ページ目の作業は完了です。

2ページ以降も1ページ目と同じ手順とルールで作っていきます。
なお、すでに御覧いただいたとおり、今回作成する「絵本」は、全ページ共通で「ページの上側が挿絵、下側に文字を配置する」という体裁にします。

 

また、先に作業した「本扉( fmatter1.xhtml )」にも音声を付与するので、「区切り」のタグを立ち返って付与しておきます。下記のようになればOKです。

f:id:k_airyuu:20141020094641j:plain

<p style="font-size:1.5em;">
<span class="mo">あなうさピーターのはなし</span><br />
<span class="mo">THE TALE OF PETER RABBIT</span><br />
<span class="mo">ベアトリクス・ポッター<br />
Beatrix Potter</span><br />
<span class="mo">おおくぼゆう やく</span></p>


次にツリービューを使い、いくつかある前付か本文のファイルのうちからひとつを選び、「コード編集タブ」で開いてみてください。下の画像のように、8行目に「<title></title>」という表記があると思います。

f:id:k_airyuu:20141020094531j:plain

 

ここの<title>と</title>の間に、書籍のタイトル名である「あなうさピーターのはなし」という文字を入力していきます。
この作業を1ファイルずつ、手作業でやってもよいのですが、ここではオーサリングソフトにある「一括変換の仕組み」を使って手早く作業する方法を紹介します。

 

まずツリービューで前付と本文のページファイルをすべて選択します。(coverとnavは選択しない)

f:id:k_airyuu:20141020094441j:plain

 

そうしたら、メニューバー「検索」から「選択ページを置換」をクリックします。

f:id:k_airyuu:20141021004939j:plain

 

すると検索ページ置換ウィンドウが開くので、検索する文字列に「<title></title>」、置換する文字列に「<title>あなうさピーターのはなし</title>」と入力し、「全て変換」ボタンを押します。

f:id:k_airyuu:20141020095733j:plain

 

前付と本文のページファイルすべての8行目が先ほど指定した通りに変換されていることが確認できます。

f:id:k_airyuu:20141021005722j:plain


これを検索置換機能といい、「複数のファイル内に存在する任意の文字列を「検索」し、それを希望する内容に一括で「置換」する」機能です。編集するページファイルが増えれば増えるほと、この機能は非常に便利なものになります。
このような便利な機能(反復作業を低減する機能)使えるのが、オーサリンツールを利用する大きなメリットです。

EPUBを書き出す

全ページ作業が終わったらプロジェクトファイルからEPUBを書き出します。
メニューバーの「ファイル」から「書き出し」→「EPUBに書き出し」を選択します。

f:id:k_airyuu:20141019230901j:plain

すると書き出したEPUBを保存する場所を聞かれるのでそれを指定し保存ボタンを押します。すると「保存オプション」ウィンドウが開きますので、そちらを下記の通り設定します。

保存形式は「EPUB3」

表紙画像
表紙画像を生成するの「チェックは外す」
画像ファイル名のドロップダウンリストから「 images/cover.png を選択」

ページ送り
「左から右」を選択

改行コードは「変換しない」を選択

固定レイアウト
固定レイアウトを有効にする に「チェックを入れる」
iBooksを有効にする に「チェックを入れる」
幅「600」
高さ「800」

iBooksオプション
オリジナルフォントを有効にするに「チェックを入れる」

設定ができたら保存ボタンを押します。
これでフィックス型EPUBが書き出されます。

f:id:k_airyuu:20141021101205j:plain

ここまでの作業で作ったEPUBを下記からダウンロードできるようにしておきますので、よかったらダウンロードしてみてください。音声なしの普通のフィックス型EPUB絵本として使えます。

https://www.dropbox.com/s/rxtq3j1q8zgsn6y/peter_rabbit.epub?dl=0

今日のまとめ

EPUBオーサリングソフト「FUSEe」
・機能の紹介
・固定レイアウトのEPUB作成

をお伝えしました。

次回は
このEPUBに音声データを入れ込む作業を行います。
その作業には別のオーサリングソフト(デジタル文書向け音声付与オーサリングソフト)を使用します。