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

  • このエントリーをはてなブックマークに追加

スポンサーリンク

※サイト運営にサーバーは必須です※
ロリポップ! はコスパのよい初心者向けサーバーです~

挫折した点・詰まった点

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

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

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

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

挫折した点

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

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

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

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

 

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

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

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

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

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

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

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

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

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

※以下のサイトを参照

 

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

 

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

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

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

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

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

詰まった点

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

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

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

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

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

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

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

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

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

参考コード

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

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

 

~Webサイトを自分で作ってみませんか?~

Webサイトを運営するにはサーバーが必須です。
このサイトは、エックスサーバー のサーバーを使用しています。
エックスサーバーは無料で10日間お試しができます。

  • このエントリーをはてなブックマークに追加

スポンサーリンク


コメントを残す

*

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