電子書籍(EPUB形式)の作成時、挫折した点・詰まった点

挫折した点・詰まった点

現在、電子書籍を作成中。

その過程でできなかったことやつまずいた点を書き留めておく。

挫折した点
1：CSSを使用したアニメーション
2： xhtmlに対して、自動的に採番を行う(目次の内容を個々のxhtmlに反映する)
3：ソースコードの行数表示をきれいに行う
4：MathMLの使用(数式を表現するために)

詰まった点(なんとか解決)
1：ソースコードで円マーク(\)がスラッシュ(/)になる問題
2：Latexで書いた数式を画像にする

挫折した点

1：CSSを使用したアニメーション

CSSで簡単なアニメーションを組むことができる。

それを知った私は早速やってみた。

参考にしたのは以下のサイト

www.webcreatorbox.com

https://www.webcreatorbox.com/tech/css3-animation-colour

このサイトで紹介されているコードをそのまま使用して、EPUBファイルをSigilで作成。

※SigilはEPUBを作成する無料ツール

実際に、Sigil上では、アニメーションは正しく動いた。

しかし、Kindleの端末で表示しようとすると、アニメーションがうまく動かない(または、ファイル自体が開けない)

色々とソースコードをいじくってわかったことは、「-webkit-animation」がSigilでは有効だったが、Kindleの端末ではうまく働かない。

自分の技術力が足りないというよりは、Kindle側のリーディングシステム(または、EPUB形式自体)がcssのアニメーションに対応していないのではないかと疑っている。

2： xhtmlに対して、自動的に採番を行う(目次の内容を個々のxhtmlに反映する)

一つのxhtmlファイルの中で、ある要素に対して、自動的に採番するのは難しくない。

counter-incrementとcounter-resetプロパティをスタイルシートで使用すれば実現できる。

※以下のサイトを参照

デザインスタジオ・エフ

【CSS】counterを利用した自動ナンバリング 静岡県藤枝市のデザインスタジオ・エフ

最近は、CSSというとCSS3にクローズアップされることが多いのですが、今回は、CSS2より追加された「counter（カウンタ）」の着目してみました。 CSSの「counter（カウンタ）」を使用すると連番などの自動ナンバリングの機能を実装することができます。 「1」「2」「3」「4」のような一般的なナン

自分が実現したいことは、そのようなことではない。

EPUBファイルは複数のxhtmlファイルから成り立つ。そして、このxhtmlファイルに対して、順番に採番していきたいと思った。

より具体的には言うと、xhtmlファイルを順番に並べて、それぞれに対して、1-1、1-2、1-3、2-1みたいに割り振りたい。

だが、やり方がわからなかった。

もしも実現できるとするなら、個々のxhtmlファイルをまとめるcontent.opfをいじればできるんじゃないかな……

私は知識がなかったので諦めた。

3：ソースコードの行数表示をきれいに行う

ソースコードを書く際に、ソースコードの行数を表示したいと考えた。

実現するのは難しくない。

以下のサイトが参考になる。

hhsprings.pinoko.jp

preに行番号、の別解(cssで) | site-hhs

ここの pre ブロックが不思議でね…。 以下、不思議だ、と思う人は、結構 html 良く書いてきてる人と思う。 # -*- coding: utf-8 -*- import sys import os sys.path.append(os.path.join(os.path

問題なのは、ソースコードが長くて、1行で収まらず、2行目に突入した場合だ。

この時、上記の方法では見た目がかっこ悪くなる。

市販の本はどうだったかなと思い眺めてみるが、複数行に渡るコードというのはあまり書かれていない。

色々模索したが、行数の表示をあきらめた方が見た目がよいということもあって、実装をやめた。

4：MathMLの使用(数式を表現するために)

EPUBで数式を扱いたいという場合、候補に挙がるのがMathML。

MathMLの使い方は以下の本に書いてある

EPUB 3 電子書籍制作の教科書

書いている内容に従って、数式を書いたが、自分の想定したような表示されなかった。

Sigilの自動コード整形機能が悪さをしているのか、自分の書き方が悪かったのかよくわからなかった。

結局、MathMLの使用はあきらめた。

最終的に、Latexで数式を書き、Inkspaceで画像に変換するスタイルを採用。

※Latexから画像出力をするのも一苦労だった。詳しくは後で述べる。

詰まった点

1：ソースコードで円マーク(\)がスラッシュ(/)になる問題

ソースコードでエスケープシーケンスを扱う際に、円マーク(\)を使用する。

しかし、フォントによっては、円マーク(\)がスラッシュ(/)になる場合がある。

私は、それが我慢ならなかった。

出版されている多くの本は円マーク(\)を使っている中で、スラッシュ(/)を使うと読者が混乱すると思ったからだ。

最初は、文字の問題なので、適当なフォントを自分で追加すればいいかなと思った。

でも、自分で新規でフォント追加することができなかった。

これは、明らかに自分の知識・技術不足。

結局、Meiryoフォントを使用することで解決した。Meiryoフォント自体を自分で、追加していない。システム側で予め用意されていることをただただ祈るばかりである。

参考コード

2：Latexで書いた数式を画像にする

話が長くなるので、別の記事にした。

ITの119番(ict119.com)

EPUBで数式を扱う方法を探してみた

3つの方法EPUBで数式を扱いたいと思った。しかし、それは受難の道だった。私が、試してみた(見つけた)方法を紹介する。1：MathMLの使用 2：Pandoc 3：Latexから画像変換1：MathMLの使用以下の本の230ページを参照。EPUB 3 電子書籍制作の教科書 私の理解力が足りなかったのか、うまくできなかった。2：Pandocとりあえず、以下のサイトのパワポを見てください。EPUBでの数式の扱いについてまとまっているので読む価値あり。  このパワポで紹介されているPandocに興味を持った。しかし、Pandocのサイトが英語だったから、面...