漫画用のEPUBを作るサイトを作ろうと思ったが、漫画だと画像ファイルが多くて、サーバー側で処理をすると画像ファイルのアップロードが必要になって、サーバーの費用が掛かりそう。だったら静的ウェブページにjavascriptとHTML５ですれば、サーバーを借りる必要が無いかな。
EPUBを出力するJavacriptを作っているが詰まったところをメモっておこうと思う。
uuid
epubでuuidをどうやって作るか。uuidはいいパブッ！！ver.4が多いそうなので、UUID.jsを使って作ってみる。dc:identifierはURLでもいいということで、重複しなさそうなものであればいいんだろうな。
FILE API
画像ファイルを読み込むのにローカルで処理する場合は画像をアップロードするようなファイルの選択画面を使う。それがFile APIで、非同期で読み込むので、ファイル名順に読み込んでくれない。だからファイルを取得したあとに整列させたい。
ファイルデータは次のようにオブジェクト配列でいったん取り込んで、配列を整列させようと思う。
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では画像ファイルの解像度が３通りの方法で書かれていて、３箇所変えることになる。その３箇所の指定方法がそれぞれ違っている。
