「EPUB作成ソフト」で検索して出てきた結果を考察する

　私はEPUB作成ソフトを作っているのだけど、グーグルで検索した結果で見つかるソフトはどのようなものがあるのかを調べてみた。

１番目

itwebkatuyou.com

　sigil、ibookauthor、kindlegen、インデザイン

　sigilは使うこともあるが、まともなEPUBはかなりの熟練者じゃないと作れない。EPUB編集ソフトであって作成ソフトではないという認識です。作れなくはないのだけど、テキストエディタでホームページを作っている感じがする。しかも勝手にファイルを消したりファイルを作ったりするので混乱する。

　iBooks Authorは廃盤ソフトです、今後アップデートされないことが決定されています。ちなみに、アップル以外では正常に表示できないEPUBしか作れません。

　kindlegenは配布が終了しています、そのために見つけることは困難です。キンドルプレビュワーに同梱されているので、使っている。だけどEPUBをキンドルで表示するファイルに変換するツールです。

　インデザインはまともなEPUBが作れません。なので使っている人はあまりいません。今後に期待しましょう。

２番目

leme.style

　角川epubベースのepubを作るのでいいのではないでょうか。

３番目

www7b.biglobe.ne.jp

でんでんコンバーター、ロマンサー、暇つぶし雑記帳、一太郎２０１５、その他

　でんでんコンバータは簡単なスタイルシートしかないのを除けばいいと思う。ロマンサーは容量制限があるので漫画には向かないかな。「暇つぶし雑記帳」ファイルサイズが大きいEPUBを作ろうとすると、コマンドラインで動くツールを使う必要がある。一太郎は毎年新しくなるので、買い換える必要がある。必ずしもどこでも動くEPUBを出力するとは限らない。

４番目

freesworder.net

Pages＋Sigil

 pagesはアップル向けに最適化されているので、ほかのビュワーではまともに動かないEPUBを作ります。それをSigilで無理やり治すのだけど、その結果もまともじゃない。

　電子書籍販売サイトがこのソフトウェアを使って作ってくれと書いてあるサイトが有る。その説明を見るのが一番いいと思っている。

sites.google.com

　私が作成に関わっている。AozoraEpub3とFixedEpub3JSも自分がいいと思ったように作っているのでいいのではないかと思う。ちなみにどちらも電書教EPUBに対応している。電書教EPUBというのは出版社と同じような作り方のEPUBということである。

github.com

kyukyunyorituryo.github.io

AozoraEpub3で外字画像を表示する

　AozoraEpub3の内部処理を見ていると、画像注記の頭に、※をつけるだけで外字画像として認識してくれるようだ。

例

※［＃画像（あに濁点.png、横218×縦218）入る］

外字画像の形式は電書協EPUBを参考にして、透過pngで横218×縦218にしている。

　電書協EPUBサンプルに外字画像のについて書かれていので、参考にしながら外字画像を入れ方を考えていく。外字画像の横長とか縦長についての機能も追加してみたい。

 ebpaj-viewsamples.epub

ebpaj.jp

• 外字画像
• 行内画像
• 外字画像の連続
• 外字画像を含む文字列に文字色
• 外字画像を含む文字列に背景色

99nyorituryo.hatenablog.com

AozoraEpub3に画像指定付き外字

AozoraEpub3で内部処理がどうなっているのかを見ていくと、画像表示のところに

外字用のタグを入れて切り分けているようだ。

［＃（ファイル名）#GAIJI#］

##外字注記の画像 String.formatで出力
外字画像 <img class="gaiji" src="%s" alt=""/>

EPUBの外字を画像で表示する

　電書協EPUBに外字画像の指定のしかたが書かれていたので、その方法を見ていく。実際に各ビュワーでどのような表示され方がされるかを試してみよう。

 　青空文庫での画像の読み込みための形式

画像とキャプション

［＃コンドル博士の図（fig47728_06.png、横320×縦322）入る］

画像のファイル名からimgタグに変換している。

ただ、外字画像の場合には、次の３つを切り替える必要がある。

• 縦横１文字分の画像
• 幅が１文字分の縦長画像
• 高さが１文字分の横長画像

後でサンプルを作って表示テストをしてみよう。

　電書協EPUBガイドには外字について次のように書かれていた。ここで指定されている、CSS classは電書協EPUBのCSSを利用している。

・外字画像
【備考】
・JIS X 0213:2004 の文字集合にない文字は外字画像化
・字形のベースとするフォントなどは、各版元の指示に従う
・背景を透明で作成し、8bit PNG で保存した透過 PNG を用いる
※読者が背景色を変更できる RS のことを考慮
【CSS class】
class="gaiji" ： 縦横１文字分の画像 （作成画像サイズ例：128px×128px）
class="gaiji-line" ： 幅が１文字分の縦長画像 （作成画像サイズ例：幅128px×高さナリユキ）
class="gaiji-wide" ： 高さが１文字分の横長画像（作成画像サイズ例：高さ128px×幅ナリユキ）
例）１文字サイズ
---------------------------------[sample code]---------------------------------
この文章は<img class="gaiji" src="../image/gaiji-001.png" alt=""/>サンプルです。
-------------------------------------------------------------------------------
例）幅が１行分の縦長画像
---------------------------------[sample code]---------------------------------
この文章は<img class="gaiji-line" src="../image/gaiji-001.png" alt=""/>サンプルです。
-------------------------------------------------------------------------------
例）高さが１文字分の横長画像
---------------------------------[sample code]---------------------------------
この文章は<img class="gaiji-wide" src="../image/gaiji-001.png" alt=""/>サンプルです。
-------------------------------------------------------------------------------
・画像のサイズ指定
【備考】
サイズは文字数か、画面に対する比率で指定します。後述の「サイズ」の項も参照のこと。
インライン（行内）表示する画像のサイズは、基本的には文字数で指定してください。
指定できる文字数の詳細は CSS をご確認ください。
また、大きな画像を「max-」なしで指定すると、画面からはみ出したり変形したりする場合があります。
【CSS class】
height-*em ： 画像の高さを、文字数で指定（例「height-2em50」……高さ 2.5 文字分）
height-***per ： 画像の高さを、画面の高さに対する比率で指定
（例「height-010per」……高さ 10% 分）
max-height-*em ： 画像の高さの最大値を、文字数で指定
max-height-***per： 画像の高さの最大値を、画面の高さに対する比率で指定
width-*em ： 画像の幅を、文字数で指定
width-***per ： 画像の幅を、画面の幅に対する比率で指定
max-width-*em ： 画像の幅の最大値を、文字数で指定
max-width-***per ： 画像の幅の最大値を、画面の幅に対する比率で指定
max-size-*em ： 画像の高さと幅の最大値を、文字数で指定
max-size-***per ： 画像の高さと幅の最大値を、画面の高さと幅に対する比率で指定
※その他、auto、none、0 など、利用可能な値は後述の「■ボックスの扱い」→「サイズ」の項を参照
例）画像を縮小して行内に表示
---------------------------------[sample code]---------------------------------
この文章は<img class="height-2em50" src="../image/gaiji-0001.png" alt=""/>サンプルです。
-------------------------------------------------------------------------------

　キンドルでの外字画像については書かれていなかった。

kdp.amazon.co.jp

kdp.amazon.co.jp

AozoraEpub3の電書協css対応作業7 ゴシック体、明朝体、太字、斜体、区切り線

　最近こればっかしている気がするが、今月中には終わらせたいからなんだが、終わるのかこれ。電書協cssとAozoraEpub3のcssを比較して差をなくすようにしていっている。ただ、どうしても電書協cssだけでは表現できない部分を別途cssを追加する必要がある。

• 電書協のCSSの差をなくす
• CSSの差を別のファイルとして書き出す
• 縦書き横書きを同じCSSを使う
• htmlのcssの読み込みをbook-style.cssとfixed-layout-jp.cssだけにする

という工程が必要だと思われる。

　もう一つはファイル名の変更だ。電書協cssを使っていることを明確に示すために、CSSのファイル名も電書協の名前に変えようと思う。電書協ではbook-style.cssから@importを使って他のcssを読み込んでる。この部分に余ったcssを別ファイルとして読み込めばいいかなと思っている。

 @charset "UTF-8";
@import "style-reset.css";
@import "style-standard.css";
@import "style-advance.css";

フォント指定の追加

###ゴシック体

###ゴシック体

ゴシック体 <span class="gfont">

ゴシック体終わり </span>

ここからゴシック体 <div class="gfont"> 1

ここでゴシック体終わり </div> 1

ここまでゴシック体 </div> 1
###明朝体明朝体 <span class="mfont">

明朝体終わり </span>

ここから明朝体 <div class="mfont"> 1

ここで明朝体終わり </div> 1

ここまで明朝体 </div> 1

####太字

####太字

太字 <span class="bold">

太字終わり </span>

ここから太字 <div class="bold"> 1

ここで太字終わり </div> 1

ここまで太字 </div> 1
####斜体

斜体 <span class="italic">

斜体終わり </span>

ここから斜体 <div class="italic"> 1

ここで斜体終わり </div> 1

区切り線

注記は同じだった。

区切り線 <hr/> 1

AozoraEpub3の電書協css対応作業６ 罫線、罫囲み

　青空文庫で傍線で表していた部分が、電書協では罫線で表している部分がある。どっちの表記がいいのかわからないが、とりあえず青空文庫の方で書いている。機能を追加したければ追加すればいいかなと思う。

 電書協では文字をぐるっと線で囲むだけではなく、上だけや下だけといった部分的な指定もできる。線の種類も多かったので鎖線と二重線を追加した。

####罫囲み 点線(鎖線)dotted、二重線double
罫囲み <span class="k-solid">
罫囲み終わり </span>
破線罫囲み <span class="k-dashed">
破線罫囲み終わり </span>
破線の罫囲み <span class="k-dashed">
破線の罫囲み終わり </span>
枠囲み <span class="k-solid">
枠囲み終わり </span>
破線枠囲み <span class="k-dashed">
破線枠囲み終わり </span>
ここから罫囲み <div class="k-solid"> 1
ここで罫囲み終わり </div> 1
ここから破線罫囲み <div class="k-dashed"> 1
ここで破線罫囲み終わり </div><br/> 1
ここから枠囲み <div class="k-solid"> 1
ここで枠囲み終わり </div> 1
ここから破線枠囲み <div class="k-dashed"> 1
ここで破線枠囲み終わり </div> 1

鎖線罫囲み <span class=".k-dotted">
鎖線罫囲み終わり </span>
二重線罫囲み <span class="k-double">
二重線罫囲み終わり </span>
ここから鎖線罫囲み <div class=".k-dotted"> 1
ここで鎖線罫囲み終わり </div> 1
ここから二重線罫囲み <div class="k-double"> 1
ここで二重線罫囲み終わり </div><br/> 1

/* 罫線
----------------------------------------------------------------
線種や線幅など、細かな調整が必要なときは、
無理に既存のクラスを用いず新たにクラスを作成すること
---------------------------------------------------------------- */
/* 線種【実線】 */
.k-solid-top,
.k-solid-right,
.k-solid-bottom,
.k-solid-left,
.k-solid-topbottom,
.k-solid-rightleft {
border-width: 1px;
border-color: #000000;
}
/* 線位置【実線】 */
.k-solid-top { border-style: solid none none none; }
.k-solid-right { border-style: none solid none none; }
.k-solid-bottom { border-style: none none solid none; }
.k-solid-left { border-style: none none none solid; }
.k-solid-topbottom { border-style: solid none solid none; }
.k-solid-rightleft { border-style: none solid none solid; }

/* 線種【点線】 */
.k-dotted-top,
.k-dotted-right,
.k-dotted-bottom,
.k-dotted-left,
.k-dotted-topbottom,
.k-dotted-rightleft {
border-width: 2px;
border-color: #000000;
}
/* 線位置【点線】 */
.k-dotted-top { border-style: dotted none none none; }
.k-dotted-right { border-style: none dotted none none; }
.k-dotted-bottom { border-style: none none dotted none; }
.k-dotted-left { border-style: none none none dotted; }
.k-dotted-topbottom { border-style: dotted none dotted none; }
.k-dotted-rightleft { border-style: none dotted none dotted; }

/* 線種【二重線】 */
.k-double-top,
.k-double-right,
.k-double-bottom,
.k-double-left,
.k-double-topbottom,
.k-double-rightleft {
border-width: 4px;
border-color: #000000;
}
/* 線位置【二重線】 */
.k-double-top { border-style: double none none none; }
.k-double-right { border-style: none double none none; }
.k-double-bottom { border-style: none none double none; }
.k-double-left { border-style: none none none double; }
.k-double-topbottom { border-style: double none double none; }
.k-double-rightleft { border-style: none double none double; }

/* 線種【破線】 */
.k-dashed-top,
.k-dashed-right,
.k-dashed-bottom,
.k-dashed-left,
.k-dashed-topbottom,
.k-dashed-rightleft {
border-width: 1px;
border-color: #000000;
}
/* 線位置【破線】 */
.k-dashed-top { border-style: dashed none none none; }
.k-dashed-right { border-style: none dashed none none; }
.k-dashed-bottom { border-style: none none dashed none; }
.k-dashed-left { border-style: none none none dashed; }
.k-dashed-topbottom { border-style: dashed none dashed none; }
.k-dashed-rightleft { border-style: none dashed none dashed; }

/* 線幅 */
.k-0px { border-width: 0; }
.k-1px { border-width: 1px; }
.k-2px { border-width: 2px; }
.k-3px { border-width: 3px; }
.k-4px { border-width: 4px; }
.k-5px { border-width: 5px; }
.k-6px { border-width: 6px; }
.k-7px { border-width: 7px; }
.k-8px { border-width: 8px; }
.k-thin { border-width: thin; }
.k-medium { border-width: medium; }
.k-thick { border-width: thick; }

/* １Ｃ用の線色 */
.k-black { border-color: #000000; }
.k-dimgray { border-color: #696969; }
.k-gray { border-color: #808080; }
.k-darkgray { border-color: #a9a9a9; }
.k-silver { border-color: #c0c0c0; }
.k-gainsboro { border-color: #dcdcdc; }
.k-white { border-color: #ffffff; }

/* 基本色 */
.k-red { border-color: #ff0000; }
.k-blue { border-color: #0000ff; }
.k-cyan { border-color: #00ffff; }
.k-magenta { border-color: #ff00ff; }
.k-orangered { border-color: #ff4500; }

/* 罫囲み
.border {
border: 1px solid #000;
margin: 0.25em;
padding: 0.25em;
}
破線罫囲み
.dashed_border {
border: 1px dashed #000;
margin: 0.25em;
padding: 0.25em;
}

打ち消し線と取り消し線が重複していたので解消。

打ち消し線 <span class="line-through">
打ち消し線終わり </span>

.line-through {
text-decoration: line-through;
}

取り消し線 二重

/* 取り消し線 */
.strike { text-decoration:line-through; }
.dbl_strike { text-decoration:line-through; }