Skip to content

Commit

Permalink
説明ページの作成
Browse files Browse the repository at this point in the history
  • Loading branch information
@kyukyunyorituryo
kyukyunyorituryo committed Oct 8, 2017
1 parent 47361ba commit 36b7687
Show file tree
Hide file tree
Showing 5 changed files with 206 additions and 3 deletions.
202 changes: 202 additions & 0 deletions about.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,202 @@
<!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 Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-93342586-1', 'auto');
ga('send', 'pageview');

</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>
</div>
</div><!-- row -->
</div><!-- container -->
</div><!-- topCatch -->

<!-- main -->
<div class="main">
<div class="container">
<div class="row">

<div class="contents col-sm-8">

<h3> 基本</h3>
<p>　漫画や写真集などの画像が主な固定レイアウトのEPUBを簡単に作れるサイト。<br>
ファイルサイズの上限はPCやブラウザに依存し、私の環境では２００MBまでは試した。画像ファイルの数は９９９枚以下、ブラウザはchromeを推奨。</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やブラウザに依存し、私の環境では２００MBまでは試した。画像ファイルの数は９９９枚以下、ブラウザはchromeを推奨。</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>
ファイル名順ではファイル名が1、3、11だと 1、11、3と整列されるので001、003、011のように数字の桁合わせをする必要がある。</p>
<p>　Android端末では、画像ファイルは一括して読み込むことができず、ひとつづつしか追加できない。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がダウンロードされる。このサイトはサーバー側で処理しているわけではないので、画像ファイルはアップロードされない。ブラウザでファイルを生成しているがファイルの保存機能はブラウザのダウンロードを利用している。本来はオフラインでもスクリプトをダウンロードすれば動くはずだが、CDNを利用しているのでいったんネットに繋ぐ必要がある。</p>
<h3>EPUBビュワー</h3>
<p>EPUBビュワーとしてBiB/iを設置しているが、EPUB３の固定レイアウトに対応しているビュワーなら問題ない。クロームアプリのReadiumもある。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>
<h3> 利用条件</h3>
<p>kobo、ブックウォーカー、Kindle、iBooksなどで個人でのEPUBでの入稿を目的として作った。<br>
　サイトは維持費はかからないようにGitHub Pagesで公開している。シェアーウェアにするかオープンソースにして寄付に頼るか、広告をはるか決めかねている。<br>
　ほしいものリストを公開しているので儲かったらくれるとありがたい。<br>
スライドショーやモーダルウィンドウなど便利なものが用意されています。</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>
</ul>

<h3> JSライブラリ</h3>
<p>　　本来はjavascriptライブラリを作ることを目的として作っていたが、早く作ることを優先した。名前の付け方がjavascriptライブラリっぽい付け方になっているのはそのためだ。javascriptライブラリは特定の機能をひとまとめにしたもの。<br>
　今のところサイト専用のライブラリになってしまって汎用性がない。例えば、汎用化するには、タイトル、著者名、目次、画像などをオブジェクト化してライブラリに渡すようにすべきだろうと思う。またテンプレートも外部ファイル化して編集しやすくすべきだろう。そういうことが全くできてない。<br>
<br>
　そうすればサイトにfixedepub3.jsを読み込めばサイト上からEPUB3を生成できるようになる。</p>

</div><!-- contents -->


</div><!-- row -->
</div><!-- container -->
</div><!-- main -->

</body>
</html>
Binary file added images/パネルビュー1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/パネルビュー2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/ページ.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 4 additions & 3 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
<body >
<!-- ナビゲーション -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<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>
Expand All @@ -60,15 +60,16 @@

<div class="collapse navbar-collapse" id="navbarEexample">
<ul class="nav navbar-nav">
<li ><a href="http://99nyorituryo.hatenablog.com/entry/2017/08/11/003743">使い方</a></li>
<li ><a href="./about.html">使い方</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>
<div id="bg"class="container bg-info">
<div class=" col-sm-2"></div>
<div id="bg"class="container bg-info col-sm-7">


<h2>漫画のEPUB３を作成する</h2>
Expand Down

0 comments on commit 36b7687

Please sign in to comment.