でんでんコンバーターから固定レイアウトをつくってみた
この記事では、EPUBコンバーターの「でんでんコンバーター」から何とか固定レイアウトをつくれないかと苦心してある程度判明したことを書いていきます。
一発で出せるツールもあるのですが、それに頼るのも悔しいので何とかやってみた次第です(謎の対抗心)。(KindleのみでよければKindle Comic Creator、マルチ対応の場合はかんたん固定レイアウトEPUB3作成が賢くやるにはおすすめです)
<読む前に>
以下でご紹介する方法はあまり利口な方法とは言えません。私の自己満足のほうが強い記事です。とはいえ、ツールにそんなに詳しくない場合色々比較するのが面倒だ!という場合には使えるかもしれません。そのあたりはご了承いただけるとありがたいです。また、配信ストアの規定などはしょっちゅう変わりますので、実際に作成する場合は当該ストアのガイドラインを確認するようにしてください。
一発で出せるツールもあるのですが、それに頼るのも悔しいので何とかやってみた次第です(謎の対抗心)。(KindleのみでよければKindle Comic Creator、マルチ対応の場合はかんたん固定レイアウトEPUB3作成が賢くやるにはおすすめです)
<読む前に>
以下でご紹介する方法はあまり利口な方法とは言えません。私の自己満足のほうが強い記事です。とはいえ、ツールにそんなに詳しくない場合色々比較するのが面倒だ!という場合には使えるかもしれません。そのあたりはご了承いただけるとありがたいです。また、配信ストアの規定などはしょっちゅう変わりますので、実際に作成する場合は当該ストアのガイドラインを確認するようにしてください。
1.リフローと固定レイアウト
話を始める前に、リフロー(フロー型)と固定レイアウト(フィックス型)の違いについて簡単に説明しておきます。
リフローというのはテキスト主体の本に用いられるもので、あなたの使っている端末や設定に合わせて文字の大きさや行間などを自動で調整してくれるものです。
一方の固定レイアウトは、リフローのような調整がなく、画像としてコンテンツを見るかたちになります。マンガなどはこちらで作製します。
調整できないのなら全部リフローでいいじゃん? とも思うかもしれませんが画像の扱いはリフローと固定レイアウトでだいぶ違います。
リフローだとテキストなどは調整してくれますが画像はそこにあるだけです。まあ、普通のウェブサイトと同じです。
ところが、固定レイアウトは画像を画面幅に合わせてくれる機能を持ちます。ゆえにマンガなどでは固定レイアウトを使うのです。
話を始める前に、リフロー(フロー型)と固定レイアウト(フィックス型)の違いについて簡単に説明しておきます。
リフローというのはテキスト主体の本に用いられるもので、あなたの使っている端末や設定に合わせて文字の大きさや行間などを自動で調整してくれるものです。
一方の固定レイアウトは、リフローのような調整がなく、画像としてコンテンツを見るかたちになります。マンガなどはこちらで作製します。
調整できないのなら全部リフローでいいじゃん? とも思うかもしれませんが画像の扱いはリフローと固定レイアウトでだいぶ違います。
リフローだとテキストなどは調整してくれますが画像はそこにあるだけです。まあ、普通のウェブサイトと同じです。
ところが、固定レイアウトは画像を画面幅に合わせてくれる機能を持ちます。ゆえにマンガなどでは固定レイアウトを使うのです。
2.どこを変えるの?
そもそも論はこの辺にして、どこを変えるのかを説明します。なお、この方法ではkindle、KOBO、iBooksで見られることを目指しました。
前提として、でんでんコンバーターでは画像を1ページに1枚だけおくようにマークダウンを書いて変換しておきます。なお、画像は表紙も含めてサイズをすべて同じにしてください。また、各画像は幅×高さで出る総ピクセルが320万を超えないようにすることをおすすめします(これ以上だとiBooksで表示されません)。なお、Kindleは幅:高さが1:1.6、iBooksは3:4でつくっておくといいですよ。さらに、表紙を除いた画像数が偶数になるようにします。奇数だよっという方は白ページか何かで辻褄を合わせてください(表紙も入れて偶数という方法もとれますが今回は説明しません)。
変換されたEPUBはzip化して展開します(展開方法が分からない方はこちら)。変えるのは各ページのHTMLとOPF、ついでにCSSです。
私の方法は基本的には電書協サンプルをもとにしているのでCSSもいじります。いじらなくても平気かもしれませんが大した手間ではないので。とはいえ一部サンプルやガイドラインからは外れています。今のところ実用上の問題はありませんが、一応自己責任ということでお願いいたします(具体的にはフォルダ構造とfallback指定が無い点、linearが一部違う点が異なっています)。
そもそも論はこの辺にして、どこを変えるのかを説明します。なお、この方法ではkindle、KOBO、iBooksで見られることを目指しました。
前提として、でんでんコンバーターでは画像を1ページに1枚だけおくようにマークダウンを書いて変換しておきます。なお、画像は表紙も含めてサイズをすべて同じにしてください。また、各画像は幅×高さで出る総ピクセルが320万を超えないようにすることをおすすめします(これ以上だとiBooksで表示されません)。なお、Kindleは幅:高さが1:1.6、iBooksは3:4でつくっておくといいですよ。さらに、表紙を除いた画像数が偶数になるようにします。奇数だよっという方は白ページか何かで辻褄を合わせてください(表紙も入れて偶数という方法もとれますが今回は説明しません)。
変換されたEPUBはzip化して展開します(展開方法が分からない方はこちら)。変えるのは各ページのHTMLとOPF、ついでにCSSです。
私の方法は基本的には電書協サンプルをもとにしているのでCSSもいじります。いじらなくても平気かもしれませんが大した手間ではないので。とはいえ一部サンプルやガイドラインからは外れています。今のところ実用上の問題はありませんが、一応自己責任ということでお願いいたします(具体的にはフォルダ構造とfallback指定が無い点、linearが一部違う点が異なっています)。
3.画像をSVGラッピングする
電書協ガイドラインでは固定レイアウト時は画像をSVGラッピングすることになっています。なのでHTMLを書き換えてSVGラッピングします。
各ページは以下のようになっているはずです(head以下・下線部は適宜変更してください)。
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>あなたの本のタイトル</title>
</head>
<body class="bodymatter" epub:type="bodymatter">
<p><img src="このページの画像ファイル名" alt="" /></p>
</body>
</html>
これをこうします!(head以下・下線部は適宜変更してください)
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>あなたの本のタイトル</title>
<meta name="viewport" content="width=XXX, height=YYY"/>
</head>
<body class="bodymatter" epub:type="bodymatter">
<div class="main">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="100%" viewBox="0 0 XXX YYY">
<image width="XXX" height="YYY" xlink:href="画像ファイル名"/>
</svg>
</div>
</body>
</html>
具体的には
・メタ部分にViewportを加えます。content以降の画像サイズの部分はあなたが使っている画像サイズを入れればオッケーです。
・imgタグをdivで囲ったうえでSVGに書き換えます。(クラスが必須かは不明。一応書いておきます)
最初だけ丁寧に変えてから変更部分をコピーして、次のページ以降はペーストして画像ファイル名だけ変えるのが効率的かと思いますよ。
電書協ガイドラインでは固定レイアウト時は画像をSVGラッピングすることになっています。なのでHTMLを書き換えてSVGラッピングします。
各ページは以下のようになっているはずです(head以下・下線部は適宜変更してください)。
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>あなたの本のタイトル</title>
</head>
<body class="bodymatter" epub:type="bodymatter">
<p><img src="このページの画像ファイル名" alt="" /></p>
</body>
</html>
これをこうします!(head以下・下線部は適宜変更してください)
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>あなたの本のタイトル</title>
<meta name="viewport" content="width=XXX, height=YYY"/>
</head>
<body class="bodymatter" epub:type="bodymatter">
<div class="main">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="100%" viewBox="0 0 XXX YYY">
<image width="XXX" height="YYY" xlink:href="画像ファイル名"/>
</svg>
</div>
</body>
</html>
具体的には
・メタ部分にViewportを加えます。content以降の画像サイズの部分はあなたが使っている画像サイズを入れればオッケーです。
・imgタグをdivで囲ったうえでSVGに書き換えます。(クラスが必須かは不明。一応書いておきます)
最初だけ丁寧に変えてから変更部分をコピーして、次のページ以降はペーストして画像ファイル名だけ変えるのが効率的かと思いますよ。
4.opfを書き換える
opfにはまず、固定レイアウト使うぞ! という宣言を入れます。
上の方にpackageタグがあり、その中にprefixという部分があります。iBooks〜がすでに入っているので、その後ろに半角スペースを入れて、以下の文(下線部)を入れます。
prefix="ibooks: http://vocabulary.itunes.apple.com/rdf/ibooks/vocabulary-extensions-1.0/ rendition: http://www.idpf.org/vocab/rendition/# ebpaj: http://www.ebpaj.jp/">
次にmetaタグ内(<meta>から</meta>の間)に色々ぶちこみます。意味は面倒なので端折ります(下線部は適宜変更)。
<meta property="rendition:layout">pre-paginated</meta>
<meta property="rendition:orientation">auto</meta>
<meta property="rendition:spread">landscape</meta>
<meta property="ibooks:fixed-layout">true</meta>
<meta property="ibooks:binding">false</meta>
<meta name="original-resolution" content="XXXxYYY" />
<meta name="fixed-layout" content="true" />
<meta name="primary-writing-mode" content="horizontal-rl" />
<meta name="RegionMagnification" content="false" />
<meta name="book-type" content="comic" />
<meta property="ebpaj:guide-version">1.1.3</meta>
さらにmanifestタグの中にあるXHTMLページの部分に以下(下線部)を追記します。こだわりがなければ一番後ろに入れればいいです。一応スラッシュの前には半角スペース一つを入れておきましょう。これは「nav.xhtml」を除くすべてのXHTMLページに入れてください。
(例)
<item media-type="application/xhtml+xml" href="bodymatter_0_0.xhtml" id="_bodymatter_0_0.xhtml" properties="svg" />
最後にspineタグの中にあるcoverページに単体表示してねというコード(properties="rendition:page-spread-center")と、それ以外のすべてのページに見開き時に左右どちらになるかを指定するコード(properties="page-spread-right[left]")を書きます。普通は右左で交互になるはずです。右で始まって左で終わるようにしましょう(このためにページ数を偶数にします)。
<itemref idref="_cover.xhtml" linear="yes" properties="rendition:page-spread-center" />
<itemref idref="_bodymatter_0_0.xhtml" linear="yes" properties="page-spread-right" />
<itemref idref="_bodymatter_0_1.xhtml" linear="yes" properties="page-spread-left" />
opfにはまず、固定レイアウト使うぞ! という宣言を入れます。
上の方にpackageタグがあり、その中にprefixという部分があります。iBooks〜がすでに入っているので、その後ろに半角スペースを入れて、以下の文(下線部)を入れます。
prefix="ibooks: http://vocabulary.itunes.apple.com/rdf/ibooks/vocabulary-extensions-1.0/ rendition: http://www.idpf.org/vocab/rendition/# ebpaj: http://www.ebpaj.jp/">
次にmetaタグ内(<meta>から</meta>の間)に色々ぶちこみます。意味は面倒なので端折ります(下線部は適宜変更)。
<meta property="rendition:layout">pre-paginated</meta>
<meta property="rendition:orientation">auto</meta>
<meta property="rendition:spread">landscape</meta>
<meta property="ibooks:fixed-layout">true</meta>
<meta property="ibooks:binding">false</meta>
<meta name="original-resolution" content="XXXxYYY" />
<meta name="fixed-layout" content="true" />
<meta name="primary-writing-mode" content="horizontal-rl" />
<meta name="RegionMagnification" content="false" />
<meta name="book-type" content="comic" />
<meta property="ebpaj:guide-version">1.1.3</meta>
さらにmanifestタグの中にあるXHTMLページの部分に以下(下線部)を追記します。こだわりがなければ一番後ろに入れればいいです。一応スラッシュの前には半角スペース一つを入れておきましょう。これは「nav.xhtml」を除くすべてのXHTMLページに入れてください。
(例)
<item media-type="application/xhtml+xml" href="bodymatter_0_0.xhtml" id="_bodymatter_0_0.xhtml" properties="svg" />
最後にspineタグの中にあるcoverページに単体表示してねというコード(properties="rendition:page-spread-center")と、それ以外のすべてのページに見開き時に左右どちらになるかを指定するコード(properties="page-spread-right[left]")を書きます。普通は右左で交互になるはずです。右で始まって左で終わるようにしましょう(このためにページ数を偶数にします)。
<itemref idref="_cover.xhtml" linear="yes" properties="rendition:page-spread-center" />
<itemref idref="_bodymatter_0_0.xhtml" linear="yes" properties="page-spread-right" />
<itemref idref="_bodymatter_0_1.xhtml" linear="yes" properties="page-spread-left" />
5.CSSをいじる
これは必須か不明ですが、CSSを以下のコードのみにしておきます。単純にコピペで置換すればいいです。
@charset "UTF-8";
html,
body {
margin: 0;
padding: 0;
font-size: 0;
}
svg {
margin: 0;
padding: 0;
}
これは必須か不明ですが、CSSを以下のコードのみにしておきます。単純にコピペで置換すればいいです。
@charset "UTF-8";
html,
body {
margin: 0;
padding: 0;
font-size: 0;
}
svg {
margin: 0;
padding: 0;
}
6.再度EPUB化
これをEPUB化すると固定レイアウト用のEPUBになっているはずなので確認してみます。画像が大きいとiOs版kindle(AZKファイル)できちんと表示されない場合があるので気をつけてください。EPUBチェックも忘れずに。ただ、画像が多いと10MBを超えてしまう可能性があります。この場合はコマンドラインを使うか、画像をカンタンな軽いものに差し替えてコードをチェックしたあと、正式なものに置き換えるのがいいと思います。
※注意:これで作成したEPUBはhimawari readerではうまく拡大されません(横向きの見開きはキレイに出ますし、スクロールにすると見やすくなります)。画像サイズの問題なのか、はたまた致命的なミスをしているのかよく分かりません。また、iOs版のKOBOでは表紙部分の表示が何やらおかしいです。これはカバーページの仕様なのかもしれません。今のところはそんな状態ですがサンプルをあげておきます。(ところどころおかしいものの、本体コンテンツに問題はないです)
このコードではKindleにて表紙が最後にも出現する謎の現象が起きます。Kindle向けのファイルではKindle Comic Creator(KC2)を使うのがやはり一番良さそうです。ただ、目次がちょっと面倒なのですけどね。それについては別の記事で書く予定です。
今のサンプルファイルは表紙の単体中央指定をしていないバージョンになっていますので注意です。(Kindleの表示をあれこれ試していたもので)
これをEPUB化すると固定レイアウト用のEPUBになっているはずなので確認してみます。画像が大きいとiOs版kindle(AZKファイル)できちんと表示されない場合があるので気をつけてください。EPUBチェックも忘れずに。ただ、画像が多いと10MBを超えてしまう可能性があります。この場合はコマンドラインを使うか、画像をカンタンな軽いものに差し替えてコードをチェックしたあと、正式なものに置き換えるのがいいと思います。
※注意:これで作成したEPUBはhimawari readerではうまく拡大されません(横向きの見開きはキレイに出ますし、スクロールにすると見やすくなります)。画像サイズの問題なのか、はたまた致命的なミスをしているのかよく分かりません。また、iOs版のKOBOでは表紙部分の表示が何やらおかしいです。これはカバーページの仕様なのかもしれません。今のところはそんな状態ですがサンプルをあげておきます。(ところどころおかしいものの、本体コンテンツに問題はないです)
このコードではKindleにて表紙が最後にも出現する謎の現象が起きます。Kindle向けのファイルではKindle Comic Creator(KC2)を使うのがやはり一番良さそうです。ただ、目次がちょっと面倒なのですけどね。それについては別の記事で書く予定です。
今のサンプルファイルは表紙の単体中央指定をしていないバージョンになっていますので注意です。(Kindleの表示をあれこれ試していたもので)
fixed-sample.epub | |
File Size: | 309 kb |
File Type: | epub |