漫画用EPUB3の作成

漫画向けのEPUB３作成サイトをjavascriptで作ったときの必要になったものについて。
https://github.com/kyukyunyorituryo/FixedEpub3JS

EPUBパッケージング

EPUBはXMLやXHTML、CSSファイルをZIPで圧縮したものと説明することが多い。ただし、単純に圧縮しただけでは、EPUB validationで警告が出る。

JSZIPでmimetypeを指定して圧縮

JSZIPでは、フォルダの構造を決めてファイルを圧縮ができる。ここでは例としてデジタルコミック協議会のEPUB３のファイル構造を作成する。
JSZIP.jsとFileSaver.jsが必要になる。


var zip = new JSZip();
zip.file("mimetype", "application/epub+zip");
var meta = zip.folder("META-INF");
meta.file("container.xml", containerXML);
var item = zip.folder("item");
item.file("standard.opf", standardOPFS);
item.file("nav.xhtml", navigation);
item.file("toc.ncx", ncx);
var img = zip.folder("item/image");
var style = zip.folder("item/style");
style.file("fixed-layout-jp.css",layout)
var xhtml = zip.folder("item/xhtml");
xhtml.file("p-cover.xhtml",coverxhtml);
for (j = 0; j < imgFO.length; j++){
xhtml.file("p-"+ ('0000' + (j+1) ).slice( -3 )+".xhtml", pages[j]);
}
img.file("cover."+coverFO.ext, coverFO.data.split('base64,')[1], {base64: true});
for (j = 0; j < imgFO.length; j++){
img.file("i-"+ ('0000' + (j+1) ).slice( -3 )+"."+imgFO[j].ext, imgFO[j].data.split('base64,')[1], {base64: true});
}
zip.generateAsync({type:"blob"})
.then(function(content) {
// see FileSaver.js
saveAs(content, $("#title").val()+".epub");
});
  });
});

HTML5で画像の読み込み

　HTML5ではFileAPIによるファイルの読み込むことができる。
https://www.html5rocks.com/ja/tutorials/file/dndfiles/
fileapiで読み込んだ画像ファイルをJSZIPでパッケージングする。

テンプレート

デジタルコミック協議会のPDFファイルからテンプレートを作成する。CSSは電書協の表示確認用サンプルファイルのfixed-layout-jp.cssを利用している。

XMLをパースして編集

ナビゲーション文書

navigation.xhtml


<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xml:lang="ja">
<head>
<meta charset="UTF-8" />
<title>タイトル</title>
</head>
<body>
<nav epub:type="toc" id="toc">
<h1>Navigation</h1>
<ol>
<li><a href="xhtml/p-cover.xhtml">表紙</a></li>
<li><a href="xhtml/p-001.xhtml">１ページ</a></li>
</ol>
</nav>
</body>
</html>

navigation.xhtmlのタイトル、表紙、１ページの部分を書き換えるには、IDが指定されていないのでgetElementByIdではアクセスできない。querySelectorを使って細かく指定していく。

var navigationXml = (new DOMParser()).parseFromString(navigation, 'text/xml');
navigationXml.querySelector("title").textContent=$("#title").val();
navigationXml.querySelectorAll("li")[0].childNodes[0].textContent=$("#covertext").val();
navigationXml.querySelectorAll("li")[1].childNodes[0].textContent=$("#navtext1").val();

UUIDと日時

EPUBでは固有のUUIDがつけるので、UUIDをgenerateするUUID.jsを利用する。作成日時も必要で時間をISO時間に変換している。

//UUID宣言
//uuid ver.4
var objV4 = UUID.genV4();
//ファイルID、uuid
standardOPFxml.getElementById('unique-id').textContent=objV4.urn;
//日時
var today = new Date();
standardOPFxml.querySelector("meta[property='dcterms:modified']").textContent=today.toISOString().slice(0,19)+"Z";

HTML5+javascriptを使ってブラウザでEPUB３を作成する