電子書籍づくり実践(表示確認。その方法)
それでは前回マークアップした内容をブラウザで表示してみましょう。
以前も何度かやったとおり、マークアップした文章をブラウザで表示するには、それを「入れ物」に入れる必要があります。
「EPUBテンプレート」という入れ物
今回使う「入れ物」は下記よりダウンロードします。
日本電子書籍出版社協会電書協EPUB 3 制作ガイド
http://ebpaj.jp/counsel/guide
上のウェブページから「電書協 EPUB 3 制作ガイド ver.1.1.3 2015年1月1日版」というzipファイル(ファイル名はebpaj_epub3guide_ver1.1.3-150101.zip)をダウンロードし、解凍*1して下さい。そして解凍して出来る「ebpaj_epub3guide_ver1.1.3_150101」というフォルダ内の「ver.1.1.3付録」フォルダ内に「book-template.epub」という名前のファイルがあるのを確認してください。これを「入れ物」として使います。
拡張子を見てお気づきの方もいるかと思いますが、これは電子書籍のファイル(EPUBファイル)です。このテンプレートは、電書協(日本電子書籍出版社協会 http://ebpaj.jp/)という電子書籍の業界団体がその構造の標準化を目的に作ったもので、プロの制作現場でもこれを「下敷き」にして電子書籍を作っているところが多いです。またデータの使用はフリーです。
名前の通り、このファイルは「テンプレート(ひな形)」ですので、特に大した内容は入っていません(あくまでも“入れ物”です)。これからこのファイルに電子書籍として表示させたい内容を入れていきます。
.epubとは実はファイルの集合体
それではどうやってこの.epubファイルの中に、マークアップした文章を入れるのか?その手順をこれから説明します。
まず「book-template.epub」を複製し、テンプレートファイルをもう一つ用意します(先ほど用意したファイル自体を書き換えてしまうと、今度また電子書籍をつくるときに再度ダウンロードしなければいけないので)。作り方は下記の通りです。
「ファイル自体をその場でコピペ」すればOKです。またキーボードショットカットでも対応可能です。
上記の通り作業すると「book-template - コピー.epub」という複製ファイルが出来ますので、次にその「拡張子」を「.epub」から「.zip」に変更します(途中アラート(=警告)が出ますが気にせず「はい」をクリックしてOKです)。
拡張子の変更によって出来た「book-template - コピー.zip」を解凍してください。
解凍するとzipファイルと同じ名前の「book-template - コピー」というフォルダが作られます。
そのフォルダ内を、item>xhtml>の順でフォルダを開いていくと、拡張子が「.xhtml」のファイルが複数見えてくると思います。
次にこの中の「p-002.xhtml」のファイルをテキストエディタで開きます。
エディタで開いたら
「<h1 class="oo-midashi"〜」で始まる行から
「<p> この文章はサンプルです。〜」で始まる行まで
削除します。
削除したら、その替わりに皆さんがここまででマークアップしてきた文章をコピペで貼付けてみましょう。
出来たら上書き保存して、この「p-002.xhtml」をブラウザで開いて表示の確認をしてみましょう。
ブラウザで表示確認してみる
こんな感じになっていればOKです。
なおWindowsのChromeの場合、ブラウザの初期設定のままだと縦書きの文字間隔が正常に表示されないので、下記の通りフォントの設定を変更してみてください。
今日のまとめ
マークアップした文章をブラウザで表示確認する。
その方法:「EPUBテンプレート」を使う
次回は
電子書籍づくり実践(トラブル対応)についてお話します。