公開投稿
2025.12.10 12:00
動く電子書籍をつくる：見開きにする
28
◆まず、見開きにしたかった理由から。一つ目はこれですこれ。
ノドの影がね…ibooksだと強制的に入れられるんですよ。
cssにでも入っているのかとおもったらどこにもなくて、リーダーで強制的に入れられてしまうのです。
どうして電子になってまで印刷物のノドのアキから逃れられないんだわけがわからない…！
顔のどまんなかに影を入れるわけにもいかず、ちょっと構図を変えたりしました。
◆ふたつ目。片面にしかムービーを組み込めない。
こんなの見開きで表示したいに決まってるでしょう…！！！
でも左右両ページにはんぶんに切ったMP4を配置しても、ぜったい同期がズレるので…
GPTに色々きいて試してみたんですが、ぜんぶ出来なくて、
PAPで展示したバージョンでは苦し紛れにこのレイアウトにするしかなかったのでした。
その後ibooksでサンプルのまんがを見ていたら、あれっノドの影はいってない？ってことに気がつき、
ダウンロードして分解したら単ページ表示の方法がわかったという次第です。
もっと早くカンニングすればよかったよ…………。
◆◆◆
前提。1024×512見開きページのEPUBを作ります。
見開きにしたいページだけ見開きにする、ということが出来ないので（私調べ）
512×512を並べた1024×512サイズの画像を作成し、それを単ページ表示させる、という方法です。
変更点は全ページ見開きで画像を作ることと、opfと表紙のタグ修正です。
◆◆◆
下準備：
◆表紙以外の全ページそ見開きサイズで画像をつくります。
CLIPSUTADIO：
◆ページ作成、画像流し込みは同じ。
◆EPUBデータ出力設定。1024×512で入力すると512×256で出力されるんですよ。なんでだよ。
挙動がわからなくて色々試したんですが、多い方の数値に合わせるのかと思いきやそうでもなくて数時間格闘しました。この数値が正解。
まぁxhtmlで数値をいじればいいので必須ではないのですが、絶対できることが出来ないのは気持ち悪いじゃないですか…。
◆あとは前の記事：動く電子書籍をつくる と同じ。
クリスタが作ったepubを展開、JPGをpngに総入れ替え、
xhtml、opfファイルの拡張子のjpeg,jpgをすべてpngに置き換えます。
◆確認のために一度EPUBを作成してみます（※ここは省いていい）
・見開きサイズで作成したページが左右に配置されているので、こんな横長な本になっています。
これを単ページ表示にします。
◆opfの
＜!-- etc. --＞に↓を書き加えます
＜meta property="rendition:spread"＞none＜/meta＞
※タグを表示させる方法がないので＜を全角で記載しています。英数半角になおしてください
◆続いてOPF末尾の方の＜spine page-progression-direction="ltr"＞の
ページの左右指定を全部削除します。
＜itemref linear="yes" idref="p-002" properties="page-spread-left"/＞
↓
＜itemref linear="yes" idref="p-002""/＞
ibooksは残っていても影響なかったのですが、
Thoriumは左右指定が残っているとそのまま右端左端に表示してしまうので。
◆表紙のxtmlを修正します。
本文の画像サイズが1024×512 表紙の画像サイズが512×512
epubを生成すると、見開きページの片面が1024×512サイズに横長に拡大表示されてから
本来の画像サイズに収まるっていうびよーんとしたアニメがページをめくる度に入ってしまいました。
表紙の画像サイズを1024×512に揃えるって方法もあるのですが、
それだとEPUBリーダーで本を並べた時に横長い白の中にちっちゃく表紙絵、ってことになりそうなので却下。
GPT氏曰く『ビューボードと画像サイズの不一致』が原因だそうなので、タグでどうにかします。
・表紙のxhtml（p-cover.xhtml）
＜meta name="viewport" content="width=512, height=512"＞
↓
＜meta name="viewport" content="width=1024, height=512"＞
これでオッケー！と思いきや、今度は画像の上半分が2倍に拡大されて全面表示されました。手強い。
svgタグの中身を下記のように書き換えます。
・＜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 1024 512"＞
＜image width="512" height="512" x="512" y="0" xlink:href="../image/cover.png"/＞
＜/svg＞
※補足。
Square Alignmentは左閉じの本なので、表紙の画像は右に寄せたかったんですね。
最初に提示されたタグは preserveAspectRatio="xMaxYMid meet"
を入れることでしたがこれがどうしても効かなくて。頑なに左側に画像を配置するんですよ。
それで上記の方法を提示してもらってうまく行きました。
◆epubを生成します。
見開きで表示されました。ノドの影もなくなっています！
これで意図した通りに表示できます。やったね！
これにたどり着くまでに3ヶ月かかってしまいました。
これを読んだ方はわたしの屍を乗り越えていってほしい…
いや多分タグが使える人なら全然楽勝だと思うんだけどね…。
◆◆◆
この記事はヶさん（@ulufu_ug）主催 ドット絵 Advent calendar 2025 の10日の記事として書かせていただきました。
去年も10日担当だったことに今気がつきました。
書きかけだった記事を企画にのっかることで完成させたのですが、かっちり一年振りの記事となってしまったようです。
◆◆◆
なんと有益な記事なのだ！泡でも奢ってやりたいぜ！という方がおられましたら
BOOTHから奢れることが可能です。ご利用いただけましたら超励みになります。
お礼にダッフルちゃんに猫を添えた壁紙をお持ち帰りください。
誰かの創作の参考になれたら嬉しいです。ここまで読んでくれてありがとうございました！
2025.12.10 回ロ