-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathabout.html
243 lines (217 loc) · 17.4 KB
/
about.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
<!DOCTYPE html>
<html lang="ja">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--OGP -->
<meta property="og:title" content="漫画のEPUB作成サイト" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://kyukyunyorituryo.github.io/FixedEpub3JS/" />
<meta property="og:image" content="https://kyukyunyorituryo.github.io/FixedEpub3JS/twittercard.jpg" />
<meta property="og:site_name" content="FixedLayout Epub3.js" />
<meta property="og:description" content="kobo、bookwalker、Kindle、iBooks向けの漫画のEPUB作成サイト" />
<!--Twitterカード -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@99nyorituryo">
<meta name="twitter:creator" content="@99nyorituryo">
<meta name="twitter:title" content="漫画のEPUB作成サイト">
<meta name="twitter:description" content="kobo、bookwalker、Kindle、iBooks向けの漫画のEPUB作成サイト">
<meta name="twitter:image:src" content="https://kyukyunyorituryo.github.io/FixedEpub3JS/twittercard.jpg">
<title>Fixed Layout Epub3.jsの使い方</title>
<!-- BootstrapのCSS読み込み -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-93342586-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'UA-93342586-1');
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
.contents h3 {
margin-top: 0;
font-size: 18px;
padding: 10px 15px;
background: #228b22;
color: #fff;
border-radius: 5px;
}
</style>
</head>
<body class="top">
<!-- header -->
<header class="header">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarEexample">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="https://kyukyunyorituryo.github.io/">Topページ</a>
</div>
<div class="collapse navbar-collapse" id="navbarEexample">
<ul class="nav navbar-nav">
<li ><a href="./index.html">Fixed Layout Epub3.js</a></li>
<li><a href="http://99nyorituryo.hatenablog.com/">作者ブログ</a></li>
<li ><a href="http://99nyorituryo.hatenablog.com/archive/category/Fixed%20Layout%20EPUB3">関連する記事</a></li>
<li><a href="https://github.com/kyukyunyorituryo/FixedEpub3JS">GitHub</a></li>
</ul>
</div>
</div>
</nav>
</header><!-- header -->
<!-- Cathch -->
<div class="topCatch">
<div class="container">
<div class="row">
<div class="col-sm-7 catchText">
<h2>FixedEpub3JSの使い方</h2>
<p>簡単に漫画のEPUBを作れる<br>
電子出版初心者向けの取説</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/EqVBBCpyi1E" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</div><!-- row -->
</div><!-- container -->
</div><!-- topCatch -->
<!-- main -->
<div class="main">
<div class="container">
<div class="row">
<div class="contents col-sm-8">
<h3>かんたんEPUB作成</h3>
<p>
漫画や写真集などの画像が主な固定レイアウトのEPUBを簡単に作れるサイト。<br>
ファイルサイズの上限はPCやブラウザーに依存し、２００MBまでは試しています。画像ファイルの数は９９９枚以下、ブラウザーはchromeを推奨しています。対応OSはMac、iPadOSなどのSafariブラウザ。Windows、Androidなどのクロームやedge、firefox。ただし、IE11は対応していません。
</p>
<h3> 使い方</h3>
<p>
画像形式はJPGとPNGにしていて混在が可能。画像サイズは表紙も含めてすべての画像が同じサイズであることを前提にしています。<br>
スタイルを適用するだけでデザインに適用されます。
</p>
<ul>
<li>見開きページは分割する必要がある。</li>
<li>見開きページ位置を調整するには白ページなどを適宜入れてほしい。</li>
</ul>
<p>見開きの確認はEPUBビュワーで確認してほしいが。右綴じの場合に奇数ページが右、偶数ページが左のページになる。</p>
<h3> 本のとじ方向</h3>
<p>
本のとじ方向は通常の漫画では右綴じである。<br>
電子書籍端末で右綴じの場合に端末の左端をタップすると次のページをひらく。もしくは左から右にスワイプする。<br>
綴じ方向は見開きにした場合に、右綴じでは、右側から左側にページが並ぶ。<br>
左綴じでは左側から目右側にページが並ぶ。
</p>
<img border="0" src="./images/ページ.png" width="220" height="160" alt="綴じ方向">
<h3> パネルビュー</h3>
<p>
Kindle端末で画面をダブルタップした時に画像が拡大される。その拡大された表示の移動方向を指定する。<br>
通常の右綴じ漫画であれば、右上、左上、右下、左下と移動する。<br>
四コマの場合は、右上、右下、左上、左下と移動する。左綴じの場合は左上から移動が始まる。<br>
ファイルサイズの上限はPCやブラウザに依存しています。販売サイトごとにファイルサイズの上限が決まっている。
</p>
<img border="0" src="./images/パネルビュー1.png" width="120" height="160" alt="四コマ">
<img border="0" src="./images/パネルビュー2.png" width="120" height="160" alt="通常">
<h3> 本の情報の入力</h3>
<ul>
<li>タイトル名</li>
<li>著者名１</li>
<li>著者名２</li>
</ul>
<p>著者名は２つ入力できるが著者名２は入力しなくても問題がない。</p>
<h3>表紙画像</h3>
<p>
表紙画像でファイル選択をクリックすると、画像選択するウィンドウがひらく。<br>
ファイル形式はJPGとPNGに制限しています。表紙画像を選択するとその下の、画像の横幅と高さも自動で設定される。<br>
手動でサイズを変更することもできるが、おすすめしません。
</p>
<h3>本文ファイルの読み込み</h3>
<p>
本の内容の画像を複数ファイルを一括で読み込む。<br>
HTML5の仕様の問題でファイルの読み込まれる順番がランダムになっている。<br>
画像の整列をクリックしてファイル名順に整列してほしい。<br>
画像ファイルが読み込まれると小さく画像が表示される。その小さい画像をクリックすると拡大して表示ができる。<br>
ファイル名順では自然ソートを利用している。
</p>
<p> AndroidやiPadOS端末では、画像ファイルは一括して読み込むことができず、ひとつづつしか追加できない。iOS端末ではファイルの出力ができない。ともにOSの問題であり、パソコンでは動作する。推奨するブラウザはクローム。</p>
<h3>目次の編集</h3>
<p> EPUBの目次とはタップすることでそのページにジャンプする機能である。利用方法としては表紙、目次ページ、人物紹介、第一話、第二話、奥付などを目次に入れる。</p>
<p> 目次の編集画面ではCoverの右側が目次に表示される表紙の名前。表示する名前を変えることができる。</p>
<p> 本文の選択となっているところが、本文の画像ファイルを読み込むと画像ファイル名に変わる。画像ファイルを選び、画像につける目次の内容を決める。</p>
<p>追加をクリックすると目次を増やせる。</p>
<div id="menu-group" style="box-sizing: border-box; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
<form class="form-inline" style="box-sizing: border-box;">
<div class="form-group" style="box-sizing: border-box; margin-bottom: 0px; display: inline-block; vertical-align: middle;">
<label class="sr-only" style="box-sizing: border-box; display: inline-block; max-width: 100%; margin: -1px; font-weight: bold; position: absolute; width: 1px; height: 1px; padding: 0px; overflow: hidden; clip: rect(0px 0px 0px 0px); border: 0px;" for="InputSelect">選択</label><select id="InputSelect" class="form-control" style="box-sizing: border-box; margin: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: 14px; line-height: 1.42857; font-family: inherit; color: #555555; text-transform: none; display: inline-block; width: auto; height: 34px; padding: 6px 12px; background-color: #ffffff; background-image: none; border: 1px solid #cccccc; border-radius: 4px; box-shadow: rgba(0, 0, 0, 0.075) 0px 1px 1px inset; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; vertical-align: middle;">
<option style="box-sizing: border-box;">Cover</option>
</select>
</div>
<div class="form-group" style="box-sizing: border-box; margin-bottom: 0px; display: inline-block; vertical-align: middle;"><label class="sr-only" style="box-sizing: border-box; display: inline-block; max-width: 100%; margin: -1px; font-weight: bold; position: absolute; width: 1px; height: 1px; padding: 0px; overflow: hidden; clip: rect(0px 0px 0px 0px); border: 0px;">目次の書換</label><input id="covertext" class="form-control" style="box-sizing: border-box; margin: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: 14px; line-height: 1.42857; font-family: inherit; color: #555555; display: inline-block; width: auto; height: 34px; padding: 6px 12px; background-color: #ffffff; background-image: none; border: 1px solid #cccccc; border-radius: 4px; box-shadow: rgba(0, 0, 0, 0.075) 0px 1px 1px inset; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; vertical-align: middle;" type="text" value="表紙" placeholder="目次タイトル" /></div>
</form><form class="form-inline" style="box-sizing: border-box;" name="formNav">
<div class="form-group" style="box-sizing: border-box; margin-bottom: 0px; display: inline-block; vertical-align: middle;">
<label class="sr-only" style="box-sizing: border-box; display: inline-block; max-width: 100%; margin: -1px; font-weight: bold; position: absolute; width: 1px; height: 1px; padding: 0px; overflow: hidden; clip: rect(0px 0px 0px 0px); border: 0px;" for="InputSelect">選択</label><select id="InputSelect2" class="form-control" style="box-sizing: border-box; margin: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: 14px; line-height: 1.42857; font-family: inherit; color: #555555; text-transform: none; display: inline-block; width: auto; height: 34px; padding: 6px 12px; background-color: #ffffff; background-image: none; border: 1px solid #cccccc; border-radius: 4px; box-shadow: rgba(0, 0, 0, 0.075) 0px 1px 1px inset; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; vertical-align: middle;" name="selectNav">
<option style="box-sizing: border-box;">本文の選択</option>
</select>
</div>
<div class="form-group" style="box-sizing: border-box; margin-bottom: 0px; display: inline-block; vertical-align: middle;"><label class="sr-only" style="box-sizing: border-box; display: inline-block; max-width: 100%; margin: -1px; font-weight: bold; position: absolute; width: 1px; height: 1px; padding: 0px; overflow: hidden; clip: rect(0px 0px 0px 0px); border: 0px;">目次の書換</label><input id="navtext1" class="form-control" style="box-sizing: border-box; margin: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: 14px; line-height: 1.42857; font-family: inherit; color: #555555; display: inline-block; width: auto; height: 34px; padding: 6px 12px; background-color: #ffffff; background-image: none; border: 1px solid #66afe9; border-radius: 4px; box-shadow: rgba(0, 0, 0, 0.075) 0px 1px 1px inset, rgba(102, 175, 233, 0.6) 0px 0px 8px; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; outline: 0px; vertical-align: middle;" name="editNav" type="text" value="目次" placeholder="目次タイトル" /></div>
</form>
</div>
<p><button class="btn btn-default" style="box-sizing: border-box; margin: 0px; font-style: inherit; font-variant: inherit; font-weight: 400; font-stretch: inherit; font-size: 14px; line-height: 1.42857; font-family: inherit; color: #333333; overflow: visible; text-transform: none; -webkit-appearance: button; cursor: pointer; display: inline-block; padding: 6px 12px; text-align: center; white-space: nowrap; vertical-align: middle; touch-action: manipulation; user-select: none; background-image: none; border: 1px solid #cccccc; border-radius: 4px; background-color: #ffffff; orphans: 2; widows: 2; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;" type="submit">追加</button></p>
<h3> ファイルの出力</h3>
<p> 保存をクリックするとEPUBがダウンロードされる。このサイトはサーバー側で処理しているわけではないので、画像ファイルはアップロードされない。ブラウザでファイルを生成しているがファイルの保存機能はブラウザのダウンロードを利用している。</p>
<h3>EPUBビュワー</h3>
<p>EPUBビュワーとしてBiB/iを設置しているが、EPUB３の固定レイアウトに対応しているビュワーなら問題ない。PC用で、「超縦書」、Kinoppy。iPadやiPhoneやMacだと、Apple Booksで開くこともできる。EPUBビュワーで見開きや、目次の表示を確認してほしい。</p>
<ul class="nav nav-pills nav-stacked">
<li>
<a href="https://chrome.google.com/webstore/detail/readium/fepbnnnkkadjhjahcafoaglimekefifl?hl=ja">
<i class="fa fa-arrow-circle-right"></i>EPUBビュワー「Readium」
</a>
</li>
<li>
<a href="http://bibi.epub.link/">
<i class="fa fa-arrow-circle-right"></i>EPUBビュワー「BiB/i」
</a>
</li>
</ul>
<p>Kindleで見る場合は、KindlePreviewerにドラッグ・アンド・ドロップしてMOBIファイルに変換してから見ることができます。</p>
<h3> 利用条件</h3>
<p>
kobo、ブックウォーカー、Kindle、iBooksなどで個人でのEPUBでの入稿を目的として作りました。個人利用、商用利用のどちらも使用できます。<br>
サイトの維持のために<br>
ほしいものリストやGitHub Sponsorsで寄付を募集しているので儲かったらくれるとありがたい。
</p>
<ul class="nav nav-pills nav-stacked">
<li>
<a href="https://www.amazon.co.jp/gp/registry/wishlist/PP7F9RZJ1B0Y/ref=nav_wishlist_lists_1">
<i class="fa fa-arrow-circle-right"></i>ほしいものリスト
</a>
</li>
<li>
<a href="https://github.com/sponsors/kyukyunyorituryo">
<i class="fa fa-arrow-circle-right"></i>GitHub Sponsors
</a>
</li>
</ul>
<h3> 麺最事項</h3>
<p>
当サイトの運営者は当サイトの利用、または作成したファイルにより生じた損害に対する責任を負いません。
</p>
<h3> JSライブラリ</h3>
<p>
本来はjavascriptライブラリを作ることを目的として作っていたが、早く作ることを優先した。名前の付け方がjavascriptライブラリっぽい付け方になっているのはそのためだ。javascriptライブラリは特定の機能をひとまとめにしたもの。<br>
今のところサイト専用のライブラリになってしまって汎用性がない。例えば、汎用化するには、タイトル、著者名、目次、画像などをオブジェクト化してライブラリに渡すようにすべきだろうと思う。またテンプレートも外部ファイル化して編集しやすくすべきだろう。そういうことが全くできてない。<br>
<br>
そうすればサイトにfixedepub3.jsを読み込めばサイト上からEPUB3を生成できるようになる。
</p>
</div><!-- contents -->
</div><!-- row -->
</div><!-- container -->
</div><!-- main -->
</body>
</html>