読者です 読者をやめる 読者になる 読者になる

KDP(電子出版)のメモ 急急如律令

Amazon Kindleダイレクト・パブリッシングでの電子出版や電子書籍の作成販売について、文章やイラストの作成や編集方法について書いています。

広告

今までに出版した電子書籍

Amazon.co.jp: 急急如律令: Kindleストア

 

アニメ塗りとかを試した

 厚塗りの次はアニメ塗りをちょっと試してみようかと。この本の内容としては、イメージからどのようにキャラクターを組み上げるかという内容でした。だけど、イメージから描いているとだんだん絵が硬くなってくる。

 

アニメーターが教えるキャラ描画の基本法則

アニメーターが教えるキャラ描画の基本法則

 

 ベタ塗りで色が塗られているが、厚塗りを練習していたので厚塗りっぽくしてみた。そしたらどうなるか。

f:id:kyukyunyorituryo:20170424234857j:plain

f:id:kyukyunyorituryo:20170424234855j:plain

下からの光源みたいだが、

f:id:kyukyunyorituryo:20170424234844j:plain

 元になったポーズはあるけれどイメージで組み立てていくとどういう絵になるかなと思って試してみた。空手っぽくなってしまった。

f:id:kyukyunyorituryo:20170424234852p:plain

  プログラムばっかり書いていると頭がコチコチになってきている気がしたので、たまには絵を描いて気晴らし。

epub処理の嵌った所

github.com

漫画用のEPUBを作るサイトを作ろうと思ったが、漫画だと画像ファイルが多くて、サーバー側で処理をすると画像ファイルのアップロードが必要になって、サーバーの費用が掛かりそう。だったら静的ウェブページにjavascriptとHTML5ですれば、サーバーを借りる必要が無いかな。

 EPUBを出力するJavacriptを作っているが詰まったところをメモっておこうと思う。

uuid

epubでuuidをどうやって作るか。uuidはいいパブッ!!ver.4が多いそうなので、UUID.jsを使って作ってみる。dc:identifierはURLでもいいということで、重複しなさそうなものであればいいんだろうな。


www.slideshare.net

github.com

FILE API

 画像ファイルを読み込むのにローカルで処理する場合は画像をアップロードするようなファイルの選択画面を使う。それがFile APIで、非同期で読み込むので、ファイル名順に読み込んでくれない。だからファイルを取得したあとに整列させたい。

qiita.com

ファイルデータは次のようにオブジェクト配列でいったん取り込んで、配列を整列させようと思う。

coverFO={file_name:theFile.name,data:e.target.result,type:theFile.type}

 

表紙画像を取得するとcover.jpgというファイル名に設定する。別にPNGでもいいとは思うが。問題はファイル名を変更するときに拡張子を取得する必要がある。そうすると、ファイルタイプから拡張子を生成。

ブラウザでやるメリット

 JavascriptでEPUBを作るメリットとしては、アップロードする時間が必要なくなるので作成時間が短くなる。ウェブブラウザで行うのでスマホでもできるかもしれない。そうすると、PCになれてない人でもEPUBが作れるかも。ただ実際にスマホでの動作試験はやっていないので動くかがわからない。

 EPUBのファイルが、mimetypeとXMLと画像とXHTMLをZIP圧縮したものである。なのでファイル操作自体FILEAPIに任せて、その他のXMLはXMLParserでオブジェクト化してから編集してXMLシリアライザーでXMLに戻すことになるそして、ZIP圧縮はJSZIPを使っている。

XMLの書き換え

OPFファイルをテンプレートとして読み込んで

var standardOPF = ''

DOMParserでオブジェクトに変換して処理をして

var standardOPFxml = (new DOMParser()).parseFromString(standardOPF, 'text/xml');

テキストデータとして書き出す。

standardOPF = (new XMLSerializer()).serializeToString(standardOPFxml);

JSZIPでopfファイルとして出力する

item.file("standard.opf", standardOPF);

この流れを全体を通してやる。

ネームスペース

 単純なXMLだけじゃなくて、ネームスペースがたくさん使われているので。ちょっとしたDOMだけの知識では色んな所にハマる気がする。

ネームスペースがつかわれているhrefを書き換える場合は、setAttributeNSを使う。

<image width="800" height="1200" xlink:href="../image/cover.jpg"/>

setAttributeNS("http://www.w3.org/1999/xlink","href","../image/test.jpg");

 

 epubのopf、manifestではepubに含まれているファイルを列挙する必要がある。OPFには元の画像ファイル名を使うかリネームするか、画像ファイルではjpg以外にもPNGがあり、イメージの属性を指定する。たとえば、image/jpegと指定するために画像ファイルの属性を取得する必要がある。

 

 画像ファイルはXHTMLによって単ページ表示するために、画像ファイル一つにつき一つXHTMLを作る。そのXHTMLには画像ファイルをSRCで読むこむ指定をしている。

 

 デジタルコミック協議会のXHTMLでは画像ファイルの解像度が3通りの方法で書かれていて、3箇所変えることになる。その3箇所の指定方法がそれぞれ違っている。

 

EPUBをJavascritptで作成するときのメモ

epubのファイルを作成するときの最大の懸念だった、画像ファイルの保存はできるようになった。XMLをどのように編集するか。いちようDOMParserでパースしてから、シリアライズして戻すという方向で考えている。

XML | JavaScript プログラミング解説

 テンプレートの読み込み

EPUBのテンプレートはデジタルコミック協議会と電書協のサンプルEPUBから。改行を\nに置換して変数として取り込んだ。

 ファイルID、ユニークIDをどのように指定するかはまた今度。

日時

日時をepubで入れるがどのよう形式にするか。EPUBの中では次のようになっている。

dcterms:modified 2011-01-01T12:00:00Z

年月日T時間Zと言うかたちになっている。

ISO-8601 拡張形式 協定世界時(UTC)

qiita.com

developer.mozilla.org


ゼロパディング

連続するファイル名に頭に000などをつけて整列したときに順番に並びやすくする。ゼロパディングというらしい。

JavaScriptでゼロパディングして桁をそろえる方法

xmlの編集

XMLをどのように編集するか悩んだが、DOMParserとXMLシリアライザーでできるかどうか試してみよう。だめっぽかったら正規表現でやってもいいかな。

XML | JavaScript プログラミング解説

teratail.com

qiita.com

xlink:href等のxlinkで定義されている属性を書き換える場合はgetAttributeNS・setAttributeNSメソッドを用いる(getAttributeNS("http://www.w3.org/1999/xlink","href")).

svg要素の基本的な使い方まとめ

はてなブログをPROにしてアドセンスをつけた結果

 はてなブログを有料のPROコースにしてひと月ほどが経った。最近はなんかアクセスが落ちてきているようで時期が悪かったな。アドセンスを貼り付けて実際にPROにしてみて、どれぐらい収益があるか試してみた。

 はてなブログPROの料金が単月では月に1000円。一年契約で月に703円、二年で月に600円なので、700円ぐらいでいいかなと見積もり収益で調整すると無効なトラフィックでいっぱい引かれて少し足りないぐらいになってしまった。

 パソコン向けのページには2個ほどつけて、スマホ向けにページ単位の広告を入れてみたが、アマゾンの広告と競合していた気がする。このサイト以外のページアドセンスを貼り付けるのも試して、データを取ってみようと思う。

 アマゾンアフィリエイトを入れるとプラスにはなるがあまりPROにした意味が無いかな。EPUBの記事を書いても言葉で説明するより、プログラムを書いて実行してねって言う方が楽だなと思う。

キンドル用のEPUBテンプレートを作る

 EPUBを作るサイトを作ろうと思ったが、ベースとなるEPUBを先に作ってみる。EPUBのバリデーションチェックはPaginaEpub-Checkerが楽かなと思って使っている。ただ、JAVAのランタイムだけじゃなくてSDKも入れないと動かない場合があるので要チェックかな。

github.com

 

metaタグの次の部分を

<meta property="rendition:layout">pre-paginated</meta>
<meta property="rendition:orientation">portrait</meta>
<meta property="rendition:spread">landscape</meta>

このようにする

<meta name="original-resolution" content="600x837" />
<meta name="primary-writing-mode" content="horizontal-rl" />
<meta name="book-type" content="comic" />
<meta content="true" name="zero-gutter" />
<meta content="true" name="zero-margin" />
<meta content="none" name="orientation-lock" />
<meta content="true" name="fixed-layout" />
<meta content="false" name="region-mag" />

キンドルでは、画像ファイルの解像度をmetaタグにoriginal-resolutionという名前で追加しないといけないようです。横×縦の順番で書く。

 

manifestタグに次の文を追加した

<item id="cimage" media-type="image/jpeg" href="images/cover.jpg" properties="cover-image" />

 これを素にキンドル用のEPUBを作ろうと思う。