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

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

「日本近代技術の形成」を読んでみた

 DASH島で反射炉を作るとやっていたので、日本ではじめに反射炉を作ったときにどのような苦労があったのかが載っている本があったので読んでみました。反射炉自体は大砲を作ろうとしたときに。

 青銅で作る→銅が足りなくなる→鉄で作ろう→炉が必要→反射炉

 

 最近江戸時代はすごかったというのが氾濫しているが、調べてみるとなんとなくほとんど嘘じゃないかと思うことが多い。鎖国をしているうちに急激な科学的進歩が日本以外であり追いつくのに苦労する話である。ホントなんで江戸時代は鎖国したんだろうか。鎖国しなければもっと早い段階で江戸幕府が解散になっていたから先延ばしにしたかったのかな。鎖国はなかったというのが定説になるようだけど、工学から見るとどうでもいい話に思える。

 

日本近代技術の形成―“伝統”と“近代”のダイナミクス (朝日選書)

日本近代技術の形成―“伝統”と“近代”のダイナミクス (朝日選書)

 

  この本の面白いところは、技術移転のときにどのようなところで躓いたかである。例えば、大砲を作ろうとして反射炉を作ってみたが、砲弾を打とうとしたら砲身が爆発したことや。鉄で大砲を作ろうとしたが無理なため、青銅でつくった。蒸気船を作っても馬力が五分の一しか出なかったり。

 それらは、本で読んでしらべたり観た人の話を聞いただけで作ろうとして。その技術の背後にあるものについて技術移転できなかったために起こった。もちろんそうなったのは鎖国していたからだけど。直接的に人から人に教えを請うことが難しかった。

 品物を持ってきてコピーしても手作業で作っていたので精度が出なかったり。個人の技量に頼る時代が終わり、工作機械で均一のものを作る時代に移行していく。そういった時代の変化に取り残されていた日本の苦闘について書いている。

 本の内容は紡績、製鉄、造船についての話が主にある。

 江戸幕府の酷さは、足の引っ張り合いにあって新しい技術を開発したひとや舶来の技術を吸収した人を殺してしまっているので。幕府自体を倒さない限り外国に植民地化されて奴隷化されるという危機感が幕府内や薩摩藩にあって討幕運動に繋がったが。討幕運動した人たち自体が邪魔だと気づいてしまう。結局倒幕側の思いと関係なく外国の圧力に開国に向かう。

 

 技術移転の難しさと材料の違いが機械を買っただけでは動かない事に気づくまで。例えば、日本の綿とアメリカの綿の違いが同じ機械で糸を紡ぐことができなかったり。木炭からコークスの切替に森林資源を食いつぶすことがあったのに。コークス炉に木炭を利用しようとして失敗した。鼠鉄と銑鉄の違いからくる加工のしにくさ気づくまで。

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>

漫画のEPUB作成サイトを作ったよ。Fixed Layout EPUB3 generator

 なんか色々コード書いているうちにマストドンが流行っていてどうも流行に乗り遅れた。EPUBを作るサイトを作ったが自分ではバグが気づきにくいので、試してみる人柱が欲しい。Githubに載せていたら勝手にバグがなくなっていると思っていた時もあった、けれどそもそも多くの人にみられないとだめっぽいな。

https://kyukyunyorituryo.github.io/FixedEpub3JS/

 このサイトを作るのに2週間でできるかと思ったんだけど、ほぼ一ヶ月ぐらいかかった。全く儲かりそうにないのでアドセンスかほしいものリストでも貼っとけば何かくれるだろうか。

 EPUB作成ソフト作っている人があまり儲かっていそうにないので、あまり新しいソフトが出てこない。キンドルでは、キンドルコミッククリエイターというソフトがあるが、キンドルだけでしか売れないファイルができる。キンドル以外に電子書籍を出そうとすると問題が出てくる。取次を使えばそのあたりの問題も少ないが個人出版で独立した立場でありたい思いがある。取次が集約されたりして、個人出版でも収束化している気がするのでもう少し活発になればなと思ったのも一つの動機ではある。

ほしいものリストを公開してみることに

 SPAMだったり、ブラックサンダーにしている人がいたのでネタ枠として、ツナ缶にしました。

www.amazon.co.jp

 EPUBを作るサイトにこんな機能がほしいとあれば、なんかくれるとやる気が増すよ。

 ページの説明

https://kyukyunyorituryo.github.io/FixedEpub3JS/

 基本的にブラウザで処理するので、アップロードが必要が無い。だからネット回線が貧弱でも繰り返し修正がしやすいと思う。キンドルコミッククリエイターのような手軽さで、EPUBで入稿レベルのものができればと思って作った。

 もともと漫画のEPUBを作るツールは下のサイトのようにあるが、OSの制限があったり、ある程度知識がある人向けのように感じていたので、もっと手軽にできないかなと思った。

 

densyodamasii.com

 

 

 タイトル、著者名が2つを入力するようになっている。今のところ全部入力しないといけない。後で必須入力以外を分けるつもり。

 出力されるファイルはEPUB validで、デジタルコミック協議会の仕様に近づけているのでわりといろんな電子書籍配信サイトに入稿できるかも。もともと入稿レベルを目指して作っていた。EPUB作成ソフトは色々有るが自炊レベルで入稿できないものが多い。キンドルを選択するとキンドル用のEPUBになり、koboを選択するとデジタルコミック協議会の仕様に近いEPUBになる。キンドル用にtoc.ncxを追加していて空白ページを削除している。また、タイトルや著者の整列用ひらがなは削除している。出版社名ももちろん削除している。

空白ページというのは

表紙→空白→目次という順番に出版社のEPUBはなっていて、ページ調整用の空白ページがある。だけど、プログラムを書きにくかったので除いた。デジタルコミック協議会の仕様に合わせるならば、追加するページは表紙を除くと偶数ページがいい。見開きにしたときにちょうど右と左と表示される。

 今のところ目次の編集機能はつけていないが、toc.ncxとnav.xhtmlの2つを用意している。キンドル用では、toc.ncxが優先され、toc.ncxがないと目次が表示されない端末もあるためだ。

既知のバグ

 iOS系safariで試してみたが動いていない。

表紙画像、複数の画像ファイルを選択するとそれぞれ漫画用のEPUBを保存できるようになっている。

 

  chromeのブラウザで動作チェックしているため、動作が違うMicrosoft Edgeでは警告が出る。DOMの仕様が違うため内容がおかしくなる。

とりあえずコードは置いておこう。

github.com

アニメ塗りとかを試した

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

 

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

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

 

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

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箇所の指定方法がそれぞれ違っている。