Skip to content

Commit

Permalink
２回保存をクリックすると、メチャクチャなEPUBになったのを修正。
Browse files Browse the repository at this point in the history 
キンドル用の設定をしなくても問題がなかったので端末選択画面を削除。
全体的なUIの調整。
  • Loading branch information
@kyukyunyorituryo
kyukyunyorituryo committed Jun 11, 2017
1 parent 0681066 commit 6453007
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 30 deletions.
13 changes: 10 additions & 3 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,13 @@
</head>
<body >
<div class="container bg-info">
<!--端末選択を削除
<h2>漫画のEPUB３を作成する</h2>
<h3>端末の指定</h3>
<label class="checkbox-inline"><input type="radio" name="radio" id="radio1" value="radio1" checked="">キンドル</label>
<label class="checkbox-inline"><input type="radio" name="radio" id="radio2" value="radio2">koboなど</label>
-->
<h3>入力欄</h3>
<div class="form-group ">
<label class="label label-primary">表題</label>
Expand All @@ -49,12 +52,17 @@ <h3>入力欄</h3>
}
</style>
<div >
<label class="label label-primary">画像ファイルの読み込み</label>
<label class="label label-primary">本文ファイルの読み込み</label>
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
</div>

<h3>目次の編集</h3>
<label class="label label-primary">画像の整列</label>

<div > <label class="checkbox-inline"><input type="radio" name="radio" id="radio3" value="radio3" checked="">名前順</label>
<label class="checkbox-inline"><input type="radio" name="radio" id="radio4" value="radio4"disabled="disabled">日付順</label></div>
<label class="label label-primary">目次の選択</label>
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="InputSelect">選択</label>
Expand Down Expand Up @@ -84,8 +92,7 @@ <h3>目次の編集</h3>
</form>

<h3>ファイルの出力</h3>
<div > <label class="checkbox-inline"><input type="radio" name="radio" id="radio3" value="radio3" checked="">名前順</label>
<label class="checkbox-inline"><input type="radio" name="radio" id="radio4" value="radio4"disabled="disabled">日付順</label></div>

<button id="demo" class="btn btn-primary">保存</button>
<span id="status"></span>

Expand Down
35 changes: 8 additions & 27 deletions js/FixedEpub3.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ document.addEventListener("DOMContentLoaded", function(){
//EPUB３テンプレート
var containerXML ='<?xml version="1.0" encoding="UTF-8"?>\n<container xmlns="urn:oasis:names:tc:opendocument:xmlns:container" version="1.0">\n<rootfiles>\n<rootfile full-path="item/standard.opf" media-type="application/oebps-package+xml"/>\n</rootfiles>\n</container>';
var standardOPF = '<?xml version="1.0" encoding="utf-8"?>\n<package xmlns="http://www.idpf.org/2007/opf" version="3.0" xml:lang="ja" unique-identifier="unique-id" prefix="rendition: http://www.idpf.org/vocab/rendition/# ebpaj: http://www.ebpaj.jp/" >\n<metadata xmlns:dc="http://purl.org/dc/elements/1.1/">\n<!-- 作品名 -->\n<dc:title id="title">作品名１</dc:title>\n<meta refines="#title" property="file-as">セイレツヨウサクヒンメイカナ01</meta>\n<!-- 著者名 -->\n<dc:creator id="creator01">著作者名１</dc:creator>\n<meta refines="#creator01" property="role" scheme="marc:relators">aut</meta>\n<meta refines="#creator01" property="file-as"> セイレツヨウチョサクシャメイカナ 01</meta>\n<meta refines="#creator01" property="display-seq">1</meta>\n<dc:creator id="creator02">著作者名２</dc:creator>\n<meta refines="#creator02" property="role" scheme="marc:relators">aut</meta>\n<meta refines="#creator02" property="file-as"> セイレツヨウチョサクシャメイカナ 02</meta>\n<meta refines="#creator02" property="display-seq">2</meta>\n<!-- 出版社名 -->\n<dc:publisher id="publisher">出版社名</dc:publisher>\n<meta refines="#publisher" property="file-as"> セイレツヨウシュッパンシャメイカナ</meta>\n<!-- 言語 -->\n<dc:language>ja</dc:language>\n<!-- ファイルid -->\n<dc:identifier id="unique-id">urn:uuid:860ddf31-55a4-449a-8cc9-3c1837657a15</dc:identifier>\n<!-- 更新日 -->\n<meta property="dcterms:modified">2012-01-01T00:00:00Z</meta>\n<!-- Fixed-Layout Documents指定 -->\n<meta property="rendition:layout">pre-paginated</meta>\n<meta property="rendition:spread">landscape</meta>\n<!-- etc. -->\n<meta property="ebpaj:guide-version">1.1</meta>\n</metadata>\n<manifest>\n<!-- navigation -->\n<item media-type="application/xhtml+xml" id="toc" href="nav.xhtml" properties="nav"/>\n<item media-type="application/x-dtbncx+xml" id="ncxtoc" href="toc.ncx"/>\n<!-- style -->\n<item media-type="text/css" id="fixed-layout-jp" href="style/fixed-layout-jp.css"/>\n<!-- image -->\n<item media-type="image/jpeg" id="cover" href="image/cover.jpg" properties="cover-image"/>\n<!-- xhtml -->\n<item media-type="application/xhtml+xml" id="p-cover" href="xhtml/p-cover.xhtml" properties="svg" fallback="cover"/>\n</manifest>\n<spine toc="ncxtoc" page-progression-direction="rtl">\n<itemref linear="yes" idref="p-cover" properties="rendition:page-spread-center"/>\n</spine>\n</package>';
var kindleOPF ='<?xml version="1.0" encoding="utf-8"?>\n<package xmlns="http://www.idpf.org/2007/opf" version="3.0" xml:lang="ja" unique-identifier="unique-id" prefix="rendition: http://www.idpf.org/vocab/rendition/# ebpaj: http://www.ebpaj.jp/" >\n<metadata xmlns:dc="http://purl.org/dc/elements/1.1/">\n<!-- 作品名 -->\n<dc:title id="title">作品名１</dc:title>\n<meta refines="#title" property="file-as">セイレツヨウサクヒンメイカナ01</meta>\n<!-- 著者名 -->\n<dc:creator id="creator01">著作者名１</dc:creator>\n<meta refines="#creator01" property="role" scheme="marc:relators">aut</meta>\n<meta refines="#creator01" property="file-as"> セイレツヨウチョサクシャメイカナ 01</meta>\n<meta refines="#creator01" property="display-seq">1</meta>\n<dc:creator id="creator02">著作者名２</dc:creator>\n<meta refines="#creator02" property="role" scheme="marc:relators">aut</meta>\n<meta refines="#creator02" property="file-as"> セイレツヨウチョサクシャメイカナ 02</meta>\n<meta refines="#creator02" property="display-seq">2</meta>\n<!-- 出版社名 -->\n<dc:publisher id="publisher">出版社名</dc:publisher>\n<meta refines="#publisher" property="file-as"> セイレツヨウシュッパンシャメイカナ</meta>\n<!-- 言語 -->\n<dc:language>ja</dc:language>\n<!-- ファイルid -->\n<dc:identifier id="unique-id">urn:uuid:860ddf31-55a4-449a-8cc9-3c1837657a15</dc:identifier>\n<!-- 更新日 -->\n<meta property="dcterms:modified">2012-01-01T00:00:00Z</meta>\n<!-- Fixed-Layout Documents指定 -->\n<meta name="original-resolution" content="600x837" />\n<meta name="primary-writing-mode" content="horizontal-rl" />\n<meta name="book-type" content="comic" />\n<meta content="true" name="zero-gutter" />\n<meta content="true" name="zero-margin" />\n<meta content="none" name="orientation-lock" />\n<meta content="true" name="fixed-layout" />\n<meta content="false" name="region-mag" />\n<!-- etc. -->\n<meta property="ebpaj:guide-version">1.1</meta>\n</metadata>\n<manifest>\n<!-- navigation -->\n<item media-type="application/xhtml+xml" id="toc" href="nav.xhtml" properties="nav"/>\n<item media-type="application/x-dtbncx+xml" id="ncxtoc" href="toc.ncx"/>\n<!-- style -->\n<item media-type="text/css" id="fixed-layout-jp" href="style/fixed-layout-jp.css"/>\n<!-- image -->\n<item media-type="image/jpeg" id="cover" href="image/cover.jpg" properties="cover-image"/>\n<!-- xhtml -->\n<item media-type="application/xhtml+xml" id="p-cover" href="xhtml/p-cover.xhtml" properties="svg" fallback="cover"/>\n</manifest>\n<spine toc="ncxtoc" page-progression-direction="rtl">\n<itemref linear="yes" idref="p-cover" properties="rendition:page-spread-center"/>\n</spine>\n</package>';
//var kindleOPF ='<?xml version="1.0" encoding="utf-8"?>\n<package xmlns="http://www.idpf.org/2007/opf" version="3.0" xml:lang="ja" unique-identifier="unique-id" prefix="rendition: http://www.idpf.org/vocab/rendition/# ebpaj: http://www.ebpaj.jp/" >\n<metadata xmlns:dc="http://purl.org/dc/elements/1.1/">\n<!-- 作品名 -->\n<dc:title id="title">作品名１</dc:title>\n<meta refines="#title" property="file-as">セイレツヨウサクヒンメイカナ01</meta>\n<!-- 著者名 -->\n<dc:creator id="creator01">著作者名１</dc:creator>\n<meta refines="#creator01" property="role" scheme="marc:relators">aut</meta>\n<meta refines="#creator01" property="file-as"> セイレツヨウチョサクシャメイカナ 01</meta>\n<meta refines="#creator01" property="display-seq">1</meta>\n<dc:creator id="creator02">著作者名２</dc:creator>\n<meta refines="#creator02" property="role" scheme="marc:relators">aut</meta>\n<meta refines="#creator02" property="file-as"> セイレツヨウチョサクシャメイカナ 02</meta>\n<meta refines="#creator02" property="display-seq">2</meta>\n<!-- 出版社名 -->\n<dc:publisher id="publisher">出版社名</dc:publisher>\n<meta refines="#publisher" property="file-as"> セイレツヨウシュッパンシャメイカナ</meta>\n<!-- 言語 -->\n<dc:language>ja</dc:language>\n<!-- ファイルid -->\n<dc:identifier id="unique-id">urn:uuid:860ddf31-55a4-449a-8cc9-3c1837657a15</dc:identifier>\n<!-- 更新日 -->\n<meta property="dcterms:modified">2012-01-01T00:00:00Z</meta>\n<!-- Fixed-Layout Documents指定 -->\n<meta name="original-resolution" content="600x837" />\n<meta name="primary-writing-mode" content="horizontal-rl" />\n<meta name="book-type" content="comic" />\n<meta content="true" name="zero-gutter" />\n<meta content="true" name="zero-margin" />\n<meta content="none" name="orientation-lock" />\n<meta content="true" name="fixed-layout" />\n<meta content="false" name="region-mag" />\n<!-- etc. -->\n<meta property="ebpaj:guide-version">1.1</meta>\n</metadata>\n<manifest>\n<!-- navigation -->\n<item media-type="application/xhtml+xml" id="toc" href="nav.xhtml" properties="nav"/>\n<item media-type="application/x-dtbncx+xml" id="ncxtoc" href="toc.ncx"/>\n<!-- style -->\n<item media-type="text/css" id="fixed-layout-jp" href="style/fixed-layout-jp.css"/>\n<!-- image -->\n<item media-type="image/jpeg" id="cover" href="image/cover.jpg" properties="cover-image"/>\n<!-- xhtml -->\n<item media-type="application/xhtml+xml" id="p-cover" href="xhtml/p-cover.xhtml" properties="svg" fallback="cover"/>\n</manifest>\n<spine toc="ncxtoc" page-progression-direction="rtl">\n<itemref linear="yes" idref="p-cover" properties="rendition:page-spread-center"/>\n</spine>\n</package>';
//ナビゲーション
var navigation= '<?xml version="1.0" encoding="UTF-8"?>\n<!DOCTYPE html>\n<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xml:lang="ja" >\n<head>\n<meta charset="UTF-8"/>\n<title>Navigation</title>\n</head>\n<body>\n<nav epub:type="toc" id="toc">\n<h1>Navigation</h1>\n<ol>\n<li><a href="xhtml/p-cover.xhtml">表紙</a></li>\n<li><a href="xhtml/p-001.xhtml">目次</a></li>\n</ol>\n</nav>\n</body>\n</html>';
//カバーHTML
Expand All @@ -107,8 +107,8 @@ var layout='@charset "UTF-8";\n\nhtml,\nbody {\n margin: 0;\n padding: 0;

function rewrite(){
//キンドルの場合kindleOPF、それ以外はstandardOPFに設定する。
var flag = document.getElementById("radio1").checked;
if(flag){standardOPF=kindleOPF};
//var flag = document.getElementById("radio1").checked;
//if(flag){standardOPF=kindleOPF};
//画像ファイル名で整列
//imgFO = [{file_id:"",file_name:'cover.jpg',data:'',type:'image/jpeg'}];
imgFO.sort(function(a,b){
Expand Down Expand Up @@ -143,15 +143,12 @@ node.parentNode.removeChild(node);
}
//出版社
var node = standardOPFxml.getElementById("publisher");
if(node != null){
node.parentNode.removeChild(node);
}
if(node != null){node.parentNode.removeChild(node);}
var pub = standardOPFxml.querySelectorAll("meta[refines='#publisher']");
for (i = 0; i < pub.length; i++){
pub[i].parentNode.removeChild(pub[i]);}
//meta refines="#publisher"


//ファイルID、uuid
standardOPFxml.getElementById('unique-id').textContent=objV4.urn;
//日時
Expand All @@ -176,10 +173,6 @@ var imgdf = standardOPFxml.createDocumentFragment();
*/
//繰り返し用
for (j = 0; j < imgFO.length; j++){
//２重実行の停止
//if (imgFO[j].id) {
// break;
// }
imgFO[j].id="i-"+ ('0000' + (j+1) ).slice( -3 );
if(imgFO[j].type=="image/jpeg"){imgFO[j].ext="jpg"};
if(imgFO[j].type=="image/png"){imgFO[j].ext="png"};
Expand All @@ -201,7 +194,6 @@ var reference = standardOPFxml.getElementById('cover');
//coverFO.file_id+"."+coverFO.ext
parent.insertBefore(imgdf,reference.nextSibling);
// parent.insertBefore(ele,reference.nextSibling);

console.log(parent);

//manifest xhtml
Expand All @@ -216,12 +208,7 @@ var xele = standardOPFxml.createElement("item");
xele.setAttribute("fallback", "i-002");
*/
//繰り返し用

for (j = 0; j < imgFO.length; j++){
//２重実行の停止
//if (imgFO[j].xhid ) {
// break;
// }
imgFO[j].xhid="p-"+ ('0000' + (j+1) ).slice( -3 );
var xele = standardOPFxml.createElement("item");
xele.setAttribute("media-type", "application/xhtml+xml");
Expand All @@ -231,26 +218,20 @@ var xele = standardOPFxml.createElement("item");
xele.setAttribute("fallback", imgFO[j].id);
xhtdf.appendChild(xele);
}


//ココまで繰り返す
var xparent =standardOPFxml.querySelector("manifest");
console.log(xele)
var xreference = standardOPFxml.getElementById('p-cover');
// parent.appendChild(ele);
// xparent.insertBefore(xele,xreference.nextSibling);
xparent.insertBefore(xhtdf,xreference.nextSibling);

console.log(xparent);

//spine
//<itemref linear="yes" idref="p-001" properties="page-spread-right"/>
var spinedf = standardOPFxml.createDocumentFragment();
for (j = 0; j < imgFO.length; j++){
//２重実行の停止
//if (standardOPFxml.querySelector("itemref[idref='p-001']") != null) {
// break;
// }

var spele = standardOPFxml.createElement("itemref");
spele.setAttribute("linear", "yes");
spele.setAttribute("idref", imgFO[j].xhid);
Expand All @@ -259,17 +240,16 @@ var spele = standardOPFxml.createElement("itemref");
spinedf.appendChild(spele);
}


var sparent =standardOPFxml.querySelector("spine");
console.log(spele)
var sreference = standardOPFxml.querySelector("itemref[idref='p-cover']");
sparent.insertBefore(spinedf,sreference.nextSibling);

console.log(sparent);

//XMLシリアライズ
standardOPFS = (new XMLSerializer()).serializeToString(standardOPFxml);

console.log(standardOPFxml);

//ナビゲーションファイル
var navigationXml = (new DOMParser()).parseFromString(navigation, 'text/xml');
navigationXml.querySelector("title").textContent=$("#title").val();
Expand Down Expand Up @@ -325,6 +305,7 @@ imagesize.setAttributeNS("http://www.w3.org/1999/xlink","href","../image/"+imgFO
pages[i] = (new XMLSerializer()).serializeToString(pagexhtmlXml);
}
console.log(pages);
//2重実行の防止
return standardOPFS;
}

Expand Down

0 comments on commit 6453007

Please sign in to comment.