kindle comic creatorの代替を作ろう

　kindle comic creatorで漫画の電子書籍が簡単に作れる。けれど出力されるファイルがキンドル専用で目次の編集が面倒だった。そのため目次の編集するツールを作って補っていた。でも、どうせなら全体をいっぺんに作るようにしようとEPUBを作るプログラムをつくった。キンドルコミッククリエイターを使っていた人の乗り換え先を狙っている。

　キンドルコミッククリエイターではMOBIファイルまで一度に出力できるが、目次を編集するには、NCXファイルをテキストエディタで書き換えていた。その後にOPFファイルをキンドルプレビューワーに読み込ませることで作っていた。

www.amazon.co.jp

kdp.amazon.co.jp

以前までの工程

1. キンドルコミッククリエイターで出力
2. NCXをテキストエディターで書換
3. OPFをkindle previewerにドラッグ・アンド・ドロップ

これからの工程

1. FixedLayout Epub3.jsでEPUBを作る
2. EPUBをkindle previewerにドラッグ・アンド・ドロップ

EPUBを作る

　EPUBを作るプログラムでEPUBを出力して、キンドルプレビュワーに読み込ませてMOBIに変換する。そうすることでテキストエディターでの編集作業をしなくてすむ。

EPUB作成サイトは次のリンクとなる。

FixedLayout Epub3.js

基本的な構成はキンドルコミッククリエイターに似せているのでだいたい分かるかも。

　名前順に整列をクリックしないと画像がソートされないので注意。

ファイル名が1、3、11だと 1、11、3と整列されるので001、003、011のように数字の桁合わせをする必要がある。

　目次の編集で追加をクリックすると目次を増やすことができる。

左側がファイル名で、右側が目次にする内容。

たとえば、

• 001.jpg 目次
• 002.jpg 第一話

のように目次の内容を書き込める。

　保存で、EPUBがダウンロードのように保存画面が出る。

プライムデーで気になった商品

Fire HD 8 タブレット (Newモデル) 16GB、ブラック

 いつもなら11,980円にプライム会員で４０００円引きで７９８０円が５，９８０円になっていた。

BUFFALO USB3.0 外付けハードディスク PC/家電対応 3TB HD-LC3.0U3/N [フラストレーションフリーパッケージ(FFP)]

togetter.com

電子書籍作るのは簡単か？

　電子書籍のどのあたりにコストがかかっているかがわかっていないのよね。専門書の棚の電子化があんまりで、紙の本の置き場所に困っている。

　一回作ったら紙の電子書籍も自動で出力する機能があればいいのだろう。電子書籍を作る時に仕様について調べて、電書協の資料を見ていた。その時に感じたのが仕様が電子配信する会社で異なっていてるところがある。配信サイトごとに作る必要があるので、コストはかさみそうだな。この辺を自動化できないものかなとはおもう。

　共通部分だけを取って電子書籍を作るとどうしてもレイアウトが味気なくなるな。

www.kotsulog.com

　今あるソフトでも微妙に違うなと思うところがあったので、自分でEPUB作成プログラムを作ってみた。サイト作ってもあまり知名度ないので便乗だ。

github.com

デジタルコミック協議会のEPUBの問題点

　キンドルの漫画ではパネルビューという機能がついてる。イーインク端末やファイアー端末で漫画をひらいてダブルタップすると拡大して表示される。その拡大時の移動方向を指定がデジタルコミック協議会EPUBに書いていなかった。そのパネルビューは キンドルパブリッシングガイドラインより。

<meta name="primary-writing-mode" content="horizontal-rl" />

 rlとlr、horizontal、verticalの設定がある。

このmeta属性が干渉しなければ入れようと思う。

　これらの設定がデジタルコミック協議会EPUBには含まれていない。

機能追加のロードマップ

• 閉じ方向を選択できるようにする。
• パネルビューを使えるように。
• 画像を見やすくする。広告をつけるかも。

 綴じ方向の問題

右綴じの場合はこうする

<spine toc="ncxtoc" page-progression-direction="rtl">

本文で見開きにする場合、page-spread-rightの次にpage-spread-left

<itemref linear="yes" idref="p-001" properties="page-spread-right" />
<itemref linear="yes" idref="p-002" properties="page-spread-left" />

左綴じの場合は

<spine toc="ncxtoc" page-progression-direction="ltr">

本文で見開きにする場合、page-spread-leftの次にpage-spread-right

<itemref linear="yes" idref="p-001" properties="page-spread-left" />

<itemref linear="yes" idref="p-002" properties="page-spread-right" />

スマホ対応

　html5+javascriptで作ったらスマホやタブレットで動くかと思ったが。アンドロイドだと複数ファイルの一括選択ができない。iosだとfilesaver.jsが動かない。アプリでやれってことなんだろう。cordovaを使えば、html5+javascriptをスマホアプリにできるだろうけど。

日本語のページでは見つからなかったので英語で参考にした所。

stackoverflow.com

github.com

anond.hatelabo.jp

漫画の電子出版時の制限について

　BOOK☆WALKER、kobo writing life、kindle direct publishingそれぞれの仕様について。電書協のEPUBが使えるので画像の仕様の違いを調べた。

BOOK☆WALKER

BOOK☆WALKERは<画像のサイズを「3072 × 4096ピクセル」以下

help.bookwalker.jp

楽天Koboライティングライフ

 楽天Koboライティングライフではファイルサイズが100MB以下ではない場合は、アップロードすることができません。

利用可能な画像形式について
画像形式はJPEG・PNGに対応指定しています。
(サイズは長辺が1000～2000ピクセルまで利用可能です。)

【楽天Koboライティングライフ】ヘルプ

キンドルパブリッシング

キンドルパブリッシングガイドラインでは1200 x 1800 ピクセル以上で一冊のファイルサイズの上限は６５０MB

https://kindlegen.s3.amazonaws.com/AmazonKindlePublishingGuidelines_JP.pdf

全体の仕様

　全体を総合すると100MB以下で　JPEG　PNGで　長辺が1800以上2000ピクセルまでになる。コボのファイル上限が厳しすぎるので、コボに合わせるとだいたいどこでも配信できるかも。

googleやiBooksについては暇な時に。 

Google Play で書籍を公開

iTunes - iTunesをパートナーに - コンテンツを販売する - 本を販売する - 本を出版するには：よくある質問 - Apple（日本）

BiB/i でEPUBプレビュー機能ができないか調べた

bibi.epub.link

BiB/i の設置マニュアルを見てみたが。iframeで読み込んだ側からepubデータを直接BiB/iに渡す方法がわからなかった。

　延々とBiB/iのコード読んでみるということをしていた。私のjavascriptの能力高くないんだけど。

　やろうとしていたことは、下のサイトでEPUBを生成する。そしてBiB/iに渡してプレビュー表示をしようとした。いったん出力してからBiB/iに読み込ませるのはなんとも二度手間だし。

github.com

EPUBの目次をどのように指定するか。

EPUBの目次

　EPUBの目次について、どう設定するUIがいいかなと悩んでいた。目次を調べるときに第一話のページを探すには、画像を表示したほうが見つけやすい。ただ小さい文字を観ようとすると大変なので拡大とか全画面表示できたらいいかなとか考えていた。ファイル名でもくじがわかるようにしている場合はファイル名を変更して出力すると割り当てが変わってしまう。

　目次に表示する文字と画像を連ねて選択または書き込みできるようにする。どのようなUIが最適だろうか。画像を選択するのにファイル名をプルダウンメニューで選べるようにし、その横側に目次に表示する文字を入力できるようにする。クリックすると画像を表示する。

　キンドルでの目次では、XHTMLだけではなく、TOC.NCXでも指定する必要がある。

どうも端末によって表示する目次が違うようだ。

それぞれの目次について指定しておく。

例えば、nav.xhtmlから目次の部分だけを抜き出すと。

<ol>
<li><a href="xhtml/p-cover.xhtml">表紙</a></li>
<li><a href="xhtml/p-001.xhtml">目次</a></li>
</ol>

のように、olタグでliをはさみaタグでリンクを張っている。

増やすときは、

<li><a href="xhtml/p-cover.xhtml">表紙</a></li>

のリスト構造を増やす。

toc.ncx

　toc.ncxも同じようにすると、下のように長くなる。プログラムを書くときに問題になりそうなのがplayOrderで、1つずつ増やしていく必要がある。

<ncx:navMap>
<ncx:navPoint id="p01" playOrder="1">
<ncx:navLabel>
<ncx:text>navigation</ncx:text>
</ncx:navLabel>
<ncx:content src="xhtml/p-cover.xhtml"/>
</ncx:navPoint>

<ncx:navPoint id="about" playOrder="2">
<ncx:navLabel>
<ncx:text>目次</ncx:text>
</ncx:navLabel>
<ncx:content src="xhtml/p-001.xhtml"/>
</ncx:navPoint>
</ncx:navMap>