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

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

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

リフロー型の音声付き電子書籍を作る

今回はリフロー型の音声付き電子書籍を作ります。
リフロー型は「文字を拡大して読める」というメリットがあります。(※単純な「拡大表示」でなく。くわしくはこちらで。)
その意味では文字サイズを大きくして読みたい方(高齢者や弱視の方)には適した型式だといえます。

何で読むか

今回は Readium という仕組みを使い、PC(もしくはMac )で音声付きEPUBを読む方法を紹介します。

Readium

Readiumは単体で動くアプリではなく、Chrome というウェブブラウザ上で動く仕組み(プラグイン)です。

そのため、ReadiumでEPUBを読むには

  • PC、もしくはMac
  • ウェブブラウザ(Chrome限定)
  • インターネット回線

が必要になります。

ChromeとReadiumのインストール方法についてはこちらを御覧ください。

リフロー型の音声読み上げができるEPUBリーダーとしては、Himawari Reader というアンドロイド端末用アプリがあります。こちらも大変使いやすいと評判なのですが、私自身がAndroid端末を持っておらず、試せていないのでここでは触れないでおきます。端末をお持ちの方は是非お試し下さい。

どう作るか

作業の流れとしては、

  1. 文章を用意する
  2. 音声を用意する
  3. EPUBを作る
  4. 作ったEPUBに音声を入れ込む

という手順になります。
この流れ自体、iBooks用の音声付き電子書籍と同じですが、「3.」の工程で作るEPUBが「フィックス型」でなく「リフロー型」になります。

今回は前回作成したiBooks用のフィックス型EPUBをリフロー型に作り変え、Readiumを使い音声付きで読んでみます。(前回作ったファイルはここからDLできます。)

フィックス型をリフロー型に作り変える

EPUBを「フィックス型からリフロー型に作り変える」ということは、スタイルを制御しているCSSファイルやそこへリンクを作り変えることを意味します。その作業をFESEeを使って行います。
まず前回作った「うさあなピータのはなし.epub」を、FUSEeで開きます。その際、開く形式を聞かれるので「EPUBの構成で開く」を選びます。

f:id:k_airyuu:20141103133357j:plain

 

次にメニューバーの「ファイル」から、「書き出し」→「EPUBに書き出し」を選択します。

f:id:k_airyuu:20141019230901j:plain

ファイル名を「うさあなピータのはなしtate.epub」とし保存ボタンを押すと、「保存オプション」ウィンドウが開くので、
・保存形式:EPUB3
・表紙画像:チェック外す。リストからcover.pngを選択
・ページ送り:右から左
・改行コード:変換しない
・固定レイアウトを有効にする:チェック外す
iBooksオプション:チェック外す
として保存ボタンを押します。

f:id:k_airyuu:20141103174137j:plain

この作業により各ページファイル内からフィックス型EPU固有の情報が削除されました。

 

次にCSSファイル自体を差し替えます。
ツリービュー内、styleフォルダ内にあるfixed-layout.cssを削除します

f:id:k_airyuu:20141103174338j:plain


続いて新たにリフロー型のスタイルを制御するCSSを作ります。
ツリービューで「styleフォルダ」を選択後、新規作成ボタンから「スタイルシート新規作成」を選択します。

f:id:k_airyuu:20141103085224j:plain


するとファイル名を入力するウィンドウが開くので「standard」と入力しOKボタンを押します。

f:id:k_airyuu:20141103110908j:plain


standard.cssファイルがstyleフォルダに作成されました。

f:id:k_airyuu:20141103175522j:plain


次にstandard.cssをコード編集画面で開き、下記内容を記述します。

/* 縦書きの指定 */

html {
-epub-writing-mode: vertical-rl;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
}

/* 書体と行間の指定 */
p {
font-family: serif-ja, serif;
font-size:1.25em;
line-height:2.5em;
}

 このようになります。

f:id:k_airyuu:20141103175705j:plain

 

続いて各ページファイルを修正していきます。

各ページファイルにはCSSへのリンクがあります。現状では先ほど削除した古いCSSファイルへのリンクとなっているのでこれを書き換えます。
前付(p-fmattar1、p-fmattar2)と本文(p_1〜p_26)のxhtmlファイルをツリービューでまとめて選択します。
この状態でメニューバーの「検索」から「選択ページ置換」を選びます。

f:id:k_airyuu:20141103180203j:plain

 

すると下のような「選択ページ置換」ウィンドウが開きますので、
検索する文字列に fixed-layout.css
置換する文字列に standard.css
と入力して「全て置換」ボタンを押します。

f:id:k_airyuu:20141103140932j:plain

この作業により、前付、本文のxhtmlファイル(全28ファイル)に共通で記述されていた

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

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

と書き換えられました。

このような「一括書き換え機能」は、オーサリングソフト(FUSEe)の大きな特長で、作業の効率化に寄与する便利な仕組みです。


最後に、表紙のページファイル(cover.xhtml)の一部を下記の通り修正します。

<link
rel="stylesheet"
href="../style/fixed-layout.css"
type="text/css" />
の記述を削除

 

style="width:100%;"

style="height:400px;"
に書き換える

 

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

f:id:k_airyuu:20141103181147j:plain


以上作業が完了したら終わったら
ツールバーの「ファイル」から「上書き保存」し、完成です。
Readiumに作ったEPUBをアップロードして読んでみましょう。

 

今回作成手順を紹介した Readiumで読める音声付き電子書籍 がどのようなものなのか、確認できる動画をアップしてみましたのでご覧ください。※音声が出ます

前回作ったフィックス型と同じで、一度ファイルを開くとあとは自動でページめくりをしてくれます。*1また、この動画では文字の大きさを変更する様子も観ることが出来ます。

なお、今回作成したファイルを下記からダウンロードできます。

Dropbox - うさあなピーターのはなしtate2.epub


興味のある方はご自身の環境にReadiumを導入し、試していただければと思います。

*1:Mac版の場合。Windows版のReadiumはページファイル間で再生が止まってしまうため、画面上もしくはキーボードの「矢印」を押して、ページを進める必要があります。(横書きの場合は連続再生可能。)