音声付き電子書籍を作る(Readium用)
リフロー型の音声付き電子書籍を作る
今回はリフロー型の音声付き電子書籍を作ります。
リフロー型は「文字を拡大して読める」というメリットがあります。(※単純な「拡大表示」でなく。くわしくはこちらで。)
その意味では文字サイズを大きくして読みたい方(高齢者や弱視の方)には適した型式だといえます。
何で読むか
今回は Readium という仕組みを使い、PC(もしくはMac )で音声付きEPUBを読む方法を紹介します。
Readiumは単体で動くアプリではなく、Chrome というウェブブラウザ上で動く仕組み(プラグイン)です。
そのため、ReadiumでEPUBを読むには
が必要になります。
ChromeとReadiumのインストール方法についてはこちらを御覧ください。
リフロー型の音声読み上げができるEPUBリーダーとしては、Himawari Reader というアンドロイド端末用アプリがあります。こちらも大変使いやすいと評判なのですが、私自身がAndroid端末を持っておらず、試せていないのでここでは触れないでおきます。端末をお持ちの方は是非お試し下さい。
どう作るか
作業の流れとしては、
という手順になります。
この流れ自体、iBooks用の音声付き電子書籍と同じですが、「3.」の工程で作るEPUBが「フィックス型」でなく「リフロー型」になります。
今回は前回作成したiBooks用のフィックス型EPUBをリフロー型に作り変え、Readiumを使い音声付きで読んでみます。(前回作ったファイルはここからDLできます。)
フィックス型をリフロー型に作り変える
EPUBを「フィックス型からリフロー型に作り変える」ということは、スタイルを制御しているCSSファイルやそこへリンクを作り変えることを意味します。その作業をFESEeを使って行います。
まず前回作った「うさあなピータのはなし.epub」を、FUSEeで開きます。その際、開く形式を聞かれるので「EPUBの構成で開く」を選びます。
次にメニューバーの「ファイル」から、「書き出し」→「EPUBに書き出し」を選択します。
ファイル名を「うさあなピータのはなしtate.epub」とし保存ボタンを押すと、「保存オプション」ウィンドウが開くので、
・保存形式:EPUB3
・表紙画像:チェック外す。リストからcover.pngを選択
・ページ送り:右から左
・改行コード:変換しない
・固定レイアウトを有効にする:チェック外す
・iBooksオプション:チェック外す
として保存ボタンを押します。
この作業により各ページファイル内からフィックス型EPU固有の情報が削除されました。
次にCSSファイル自体を差し替えます。
ツリービュー内、styleフォルダ内にあるfixed-layout.cssを削除します
続いて新たにリフロー型のスタイルを制御するCSSを作ります。
ツリービューで「styleフォルダ」を選択後、新規作成ボタンから「スタイルシート新規作成」を選択します。
するとファイル名を入力するウィンドウが開くので「standard」と入力しOKボタンを押します。
standard.cssファイルがstyleフォルダに作成されました。
次に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;
}
このようになります。
続いて各ページファイルを修正していきます。
各ページファイルにはCSSへのリンクがあります。現状では先ほど削除した古いCSSファイルへのリンクとなっているのでこれを書き換えます。
前付(p-fmattar1、p-fmattar2)と本文(p_1〜p_26)のxhtmlファイルをツリービューでまとめて選択します。
この状態でメニューバーの「検索」から「選択ページ置換」を選びます。
すると下のような「選択ページ置換」ウィンドウが開きますので、
検索する文字列に fixed-layout.css
置換する文字列に standard.css
と入力して「全て置換」ボタンを押します。
この作業により、前付、本文の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です。
以上作業が完了したら終わったら
ツールバーの「ファイル」から「上書き保存」し、完成です。
Readiumに作ったEPUBをアップロードして読んでみましょう。
今回作成手順を紹介した Readiumで読める音声付き電子書籍 がどのようなものなのか、確認できる動画をアップしてみましたのでご覧ください。※音声が出ます
前回作ったフィックス型と同じで、一度ファイルを開くとあとは自動でページめくりをしてくれます。*1また、この動画では文字の大きさを変更する様子も観ることが出来ます。
なお、今回作成したファイルを下記からダウンロードできます。
Dropbox - うさあなピーターのはなしtate2.epub
興味のある方はご自身の環境にReadiumを導入し、試していただければと思います。