電子書籍

【Windows8.1版】InDesign CS6からリフローEPUBを作る

【Windows8.1版】InDesign CS6からリフローEPUBを作る

今回、Windows8.1環境のAdobe InDesign CS6でリフローEPUBを制作しないといけない案件があったので、自分用メモ的ですが書き留めておきたいと思います。

電子書籍とは

電子書籍は、従来の紙の書籍をデジタル情報に置き換える目的で製作されたコンテンツのことで、「電子ブック」「デジタル書籍」「デジタルブック」「E ブック」などとも呼ばれる。従来の紙メディアの書籍や雑誌などは、現在では発刊と同時に電子書籍としてもリリースされることが多くなっている。

電子書籍を閲覧する環境

デバイス

電子書籍は紙メディアと違いデジタルであるために閲覧するにはデバイス=装置が必要となる。PC/Mac、スマートフォン、タブレット端末、専用端末などがある。

閲覧するためのリーダーソフト

データ型の電子書籍は書籍データであるために、閲覧するためにはリーダーソフトが必要になる。Webデータを閲覧するためにはWebブラウザが必要になるのと同様である。電子書籍専用端末にはあらかじめリーダーソフトが組み込まれているが、それ以外ではインストールする必要がある。また、電子書籍ストアでは専用のリーダーソフトが配布されている。

電子書籍ストア

電子書籍を購入して読むためには、ネット上の電子書籍ストアでアカウントを作成して購入する必要がある。電子書籍ストアで作成したアカウントと、ストア専用のリーダーソフトのアカウントが紐づけられ、電子書籍が閲覧できる。

データー型電子書籍

一般的な電子書籍はデータとして作成・配布されている。電子書籍のファイルフォーマットを標準化しようとIDPFという団体が「EPUB」という標準フォーマットを策定している。

アプリ型電子書籍

iOS向けのApp StoreやAndroidのGoogle Playなどのアプリケーションを販売・配布しているストアで、アプリケーション型の電子書籍もリリースされている。アプリ型はリーダーソフトの役割が組み込まれており、起動するだけでその電子書籍が閲覧できる。

リフローレイアウトの電子書籍

文字中心の電子書籍の場合は、閲覧するデバイスの画面サイズによって文字の視認性が変化するので、リーダーソフト側で文字サイズを可変することが可能である。デメリットとしては、文字サイズを可変することで1ページの行文字数や行数といった体裁が変化することになる。そのため雑誌などの複雑なレイアウトには向かない。

フィックスレイアウトの電子書籍

1ページのレイアウトを固定する電子書籍がフィックスレイアウトである。身近なファイル形式としてはPDFがあるが、EPUBでもバージョン3からフィックスレイアウトのEPUBが規定されている。レイアウトが固定できるメリットがあるが、デバイスの画面サイズによっては拡大縮小やスクロール操作が強いられることになる。

世界標準となりつつあるEPUB

初期の電子書籍は、デバイス主導であったためにハードウェアメーカーの仕様に依存していた。ハードウェアメーカー毎に仕様がまちまちであり、有料であった。そのことが電子書籍市場の発展を阻害していたため、IDPFが電子書籍フォーマットの標準化を計り「EPUB」が誕生した。

EPUBの中身

EPUBは電子書籍に必要なデータをフォルダ内に持ち、ZIP圧縮でパッケージ化され、拡張子を「.epub」としている。そのためファイルを展開することでパッケージ内を確認したり、編集することが可能になる。

EPUBパッケージ内

mimetype EPUBのメディアタイプを記述した必須ファイル
META-INFOフォルダ container.xml EPUBのパッケージドキュメントの形式と格納場所がXMLで記述
OEBPSフォルダ content.opf EPUBに関する情報をXMLで記述した必須ファイル。書誌情報、格納されているファイルリスト、閲覧される順番などの情報が記述されている。
01.xhtml、02.xhtml、03.xhtml EPUBコンテンツドキュメントで、出版物の内容を記述したファイル。書籍での本文ページにあたる。
cssフォルダ style.css スタイルシートで、レイアウト情報を記述したファイル
imageフォルダ cover.jpg カバー用画像データ
photo01.jpg、photo02.jpg ページ内に使用する画像データ
cover.xhtml カバー用xhtmlファイル
toc.xhtml EPUB3向け目次データ
toc.ncx EPUB2向け目次データ

InDesign CS6でリフロー型EPUBを作る

EPUBはWebの仕組みを利用した電子書籍フォーマットである。EPUBの制作方法は様々あり、Webオーサリングソフトを使用する方法や、ワープロソフトから書き出す方法、EPUBオーサリングソフトを使用する方法、Webサービスを利用する方法などがある。InDesignもCS4からEPUB書き出しに対応している。今回は、レイアウトソフトのInDesignからEPUBを作ることにする。

配布データ

フォルダ内に、本文のテキストデータとカバー用の画像データを入れてある。

新規ドキュメントの作成

InDesign CS6を起動したら、ファイルメニューの新規から「ドキュメント」を選びます。リフローEPUBの場合はドキュメントサイズは関係ありませんが、今回は下記の設定とします。

  • ドキュメントプロファイル:デジタルパブリッシング
  • ページ数:1
  • 開始ページ番号:1
  • 見開きページ:OFF
  • プライマリテキストフレーム:ON
  • ページサイズ:iPad 1024px×768px
  • 方向:横
  • 綴じ方:右綴じ

「マージン段組」を選んで、任意のマージンを設定します。このマージンもリーダーアプリ側の設定に依存するので、適当な値で構いません。

テキストファイルの配置

1ページ目にテキストフレームが作られているので、文字ツールの挿入カーソルをたてます。

ファイルメニューから「配置」を選びます。

用意してあるテキストファイルを選びます。読み込みオプションを表示はチェックを外して、開くを選びます。

これでプライマリテキストフレームを設定してあるので、テキストが全て収まるまでページが増加し、連結したテキストフレームが作成されます。

段落スタイルの登録

今回の文章は「見出し」と「本文」の階層があるので、それぞれ段落スタイルを登録します。

まずは1ページ目の最初の段落にカーソルを立てて、段落スタイルパネルのパネルメニューから「新規段落スタイル」を選びます。

新規段落スタイルの登録画面が表示されます。スタイル名を「見出し」とします。

「ルビの位置と間隔」の種類を「グループルビ」にして、OKをクリックして登録しましょう。

次に本文の段落を選んでいる状態で、段落スタイルパネルのパネルメニューから「新規段落スタイル」を選択します。

スタイル名を本文とします。

見出しと同様に、ルビの位置と感覚をグループルビにしてOKをクリックして登録します。

段落スタイルの登録

登録した段落スタイルを文章に適用していきます。今回の文章は9章で出来ているので見出しが9段落あり、それ以外の段落は本文になります。

まずは全体の文章に本文の段落スタイルを適用し、その後に9箇所の見出しに段落スタイルを適用していきます。文章全体を選択して、本文の段落スタイルをクリックして適用します。

5回クリックしてストーリー全体を選択します。

段落スタイルパネルの「本文」をクリックして適用します。

9箇所の見出しに段落スタイルの「見出し」を適用しますが、見つけづらいので「検索と置換」の機能を利用しましょう。まずは編集メニューから「検索と置換」を選びます。

「検索と置換」のウィンドウが表示されるので、「テキスト」のタブを選びます。見出しの段落には1文字目に「★」が入力されているので、その★を検索するので検索文字列に「★」を入力します。置換文字列は空白のままで、検索に「ドキュメント」を選びます。ウィンドウ下部の置換形式の右にある「変更する属性を指定」ボタンをクリックします。

置換形式の設定ウィンドウが開くので、段落スタイルから「見出し」のスタイルを選んでOKをクリックします。

検索と置換のウィンドウに戻るので、「すべてを置換」を選びます。これで、★の文字がある段落が検索され「見出し」の段落スタイルが適用されます。

検索が完了し、段落スタイルが適用された置換の結果が表示されます。

続いて、見出しの段落から★の文字を削除しましょう。検索と置換のウィンドウ下部の「指定した属性を消去」ボタンをクリックして、置換形式から見出しの段落スタイルを削除します。

そのまま「すべてを置換」ボタンをクリックします。★の文字が検索され、置換文字列が空欄のため文字が削除されます。

検索と置換箇所の結果が表示されます。

段落スタイルのタグとクラスの設定

EPUBに書き出すと、InDesignの段落スタイルはEPUB内のXHTMLにタグとクラスで書き出され、設定した書式はCSSファイルに書き出されます。その際のタグ名やクラス名の設定をするので、段落スタイルパネルのパネルメニューから「すべての書き出しタグの編集」を選びます。

設定のウィンドウが表示されるので、見出しのタグを「h1」、クラスを「b」、EPUBを分割をチェックし、本文のタグを「p」、クラス名を「a」、EPUBを分割はチェックせずに「OK」をクリックしましょう。

目次の設定

EPUBではメニューの目次ボタンをクリックすると目次のウィンドウが表示され、タップ(クリック)すれば即座にその章が表示されます。あらかじめInDesignで目次を設定しておけば、EPUB書き出し時に自動で目次として書き出されます。

まずは、レイアウトメニューから「目次」を選びます。

目次の設定画面が表示されるので、その他のスタイルのウィンドウから「見出し」のスタイルを選んで「追加」をクリックします。

これで「段落スタイルを含む」ウィンドウに「見出し」が目次として登録されました。一番下のフレームの方向を「縦組み」に設定し、OKをクリックします。

カーソルが目次を持っている状態になるので、ページ外のスクラッチエリアでドラッグまたはクリックして、目次を配置しましょう。

書誌情報の設定

EPUBには書籍としての、タイトルや著者名の設定が埋め込まれます。InDesign側であらかじめ設定しておく必要があるので、ファイルメニューから「ファイル情報」を選びます。

ウィンドウが表示されるので、説明タブのドキュメントタイトルに書籍名「銀河鉄道の夜」を入力し、作成者に著者名「宮沢賢治」を入力し「OK」をクリックします。

EPUBファイルの書き出し

これでInDesign側の設定が全てできたので、EPUBファイルに書き出しましょう。ファイルメニューから書き出しを選びます。

保存のウィンドウが表示されるので、保存場所、ファイル名を設定し、ファイルの種類を「EPUB」にして保存を選びます。

EPUB書き出しオプションのウィンドウが表示されるので、「一般」のウィンドウを下記のように設定します。

  • バージョン:EPUB 3.0
  • カバー:画像を選択を選び、フォルダ内の「cover.jpg」を選択
  • 目次スタイル:デフォルト
  • 書き出し後 EPUBを表示:チェックを外す

次に詳細のウィンドウを表示し、下記の設定をして「OK」をクリックします。

  • ドキュメントの分割:「段落スタイルの書き出しタグに基づく」
  • ドキュメントデータを含む:チェック
  • スタイル定義を含む:チェック
  • オーカルオーバーライドを保持:チェック
  • 埋め込みフォントを含む:チェックを外す

EPUBファイルが書き出されました。

EPUBファイルをReadiumで閲覧する

InDesignから書き出したEPUBを閲覧してみましょう。様々なOSやデバイスに合わせたEPUBリーダーソフトが数多くリリースされていますが、今回はWebブラウザのChromeの拡張機能である「Readium」で閲覧してみます。

まずはChromeを起動します。

ブックマークバーが表示されていない場合は、右上のメニューから「ブックマークバーを表示」を選びます。

ブックマークバーが表示されたら、「アプリ」ボタンをクリックします。

インストールしてあるアプリが表示されるので、「Readium」をダブルクリックして起動します。

Readiumが起動しました。

EPUBファイルを読み込みために、右上の「+」をクリックします。

本の追加のウィンドウが表示されます。EPUBファイルを追加するには上に「ローカルファイルから」を使用します。展開したEPUBフォルダを追加するには下の「パッケージ化されているないフォルダ」を使います。

今はEPUBファイルを追加するので、上の「ローカルファイルから」のファイル選択をクリックします。

先ほどInDesignから書き出したEPUBファイルを選択し、「開く」をクリックします。

ReadiumにEPUBファイルが追加されました。

表紙をダブルクリックすると開かれます。

ウィンドウの左右に表示される矢印で1ページずつ移動ができますし、右上の「Table of Contents」ボタンをクリックすると目次が表示されます。

目次の項目をクリックすれば、その章にジャンプします。

元の本棚に戻るにはウインドウ右上の「Library」ボタンをクリックします。

本棚の表示では、右上の「List View」ボタンをクリックすることで、リスト表示に切り替えることができます。

リスト表示では、「詳細」ボタンをクリックすることで読み込んでいる本を削除することができます。

詳細ボタンをクリックすると現れるウィンドウで「削除」をクリックします。

EPUBファイルを展開する

EPUBファイルの内容の確認と編集をしたいので、ファイルを展開してみましょう。

書き出したEPUBファイルの拡張子を「zip」に変更します。

アラートが表示されますが、zipに変更します。

zipに変更したファイル上で右クリックして、「すべて展開」を選びます。

設定画面が表示されますので、そのまま「展開」を選びます。

これで展開(解凍)したフォルダが作成されました。

展開したフォルダ内をDreamweaverで確認、編集する

Dreamweaverを起動しましょう。

ファイルメニューから「開く」を選びます。

「OEBPS」フォルダ内の「content.opf」を開いてみます。

content.opfファイルでは、「metadate」で書誌情報を、「manifest」でEPUBフォルダ内のファイル構造を、「spine」でファイルの表示順を規定しています。

次に「OEBPS」フォルダ内の「xhtml」ファイルを開いてみましょう。

こちらは文章実体で、書籍の本文に当たる文章がタグ付けされて入っています。

「OEBPS」フォルダ内の「css」フォルダの「ReflowEPUB_idstyles.css」ファイルを開いてみましょう。

CSSファイルはXHTMLファイルでタグ付けされた範囲と結びついていて、その文章の書式が設定されています。

このCSSファイルを編集することで、文章の書式を変更することができます。

本文に画像ファイルを追加する

ファイルの移動

書式だけではなく、本文内に画像ファイルを追加してみましょう。画像は配布しているフォルダ内の「photo.jpg」を使用します。

「photo.jpg」ファイルを展開したフォルダ内の「OEBPS」フォルダ内の「image」フォルダに移動します。

manifestへの追記

EPUBフォルダ内にファイルを追加したので、content.opfファイルのmanifestに追記します。追記したら保存しておきましょう。

XHTMLファイルの編集

1章のXHTMLファイルを開いて、画像の記述を追加します。1章のXHTMLファイルは「ReflowEPUB.xhtml」ファイルです。

pタグの段落の間に画像ファイルを追加します。追記したら保存しておきましょう。

CSSファイルの編集

画像の表示方法をコントロールするためにCSSファイルも編集します。「OEBPS」フォルダ内の「css」フォルダから「ReflowEPUB_idstyles.css」ファイルを開きます。

CSSの記述の最後に画像のスタイルを追記します。追記したら保存しておきましょう。

全てを編集して保存したら、Readiumで表示を確認しましょう。展開したフォルダを読み込むので、Rediumの本の追加のウィンドウで、「パッケージ化されていないフォルダ」で「ファイルを選択」ボタンをクリックします。

展開しているEPUBフォルダを読み込みます。

画像が本文の間に表示されています。

画像に文章を回り込ませたパターンもCSSファイルで設定してみましょう。

本文が画像を回り込むようになりました。

Pocket
LINEで送る

URL
TBURL

返信

*
*
* (公開されません)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

Return Top