|| top ||

EPUB2版テンプレートの使い方
(2013年版)

*** 2013年に公開した使い方ページです。
*** 現在のEPUB2仕様に合っているかの確認をとっていないため、
*** なるべく『EPUB3テンプレート(電書協仕様準拠版)』の使用をお勧めします。
*** 解説ページは『EPUB3テンプレートの使い方(電書協仕様準拠版)』へ。
*** サンプルページは『リーディングシステムによる表示サンプル(電書協仕様準拠版)』へ。


EPUB2版テンプレートを使ってご自分の書籍を作成するための編集方法です。
テンプレートは《テンプレート1》の「dc_template_01_winered_ep2.epub」を例に解説しています。
EPUBの編集にはGoogleの『Sigil』、電子書籍ビュアーにはAdobeの『Adobe Digital Editions』を使用します。あらかじめこれらを《使用ツール》の項目を参考にインストールしておいてください。

  1. ファイル構成
  2. UUIDを変更する
  3. 書籍情報を差し替える
  4. ファイル名を変更する
  5. 本文を差し替える1 - 書籍情報や短い文章など
    1. 不要なページを削除する
    2. <title>〜</title>内の書籍名を差し替える
    3. 本文ファイル内の書籍情報を差し替える
    4. 扉、奥付ページなどの書籍情報を差し替える
  6. 本文を差し替える2 - 整形が必要な長い文章
    1. 章のページを編集する
    2. 第一節ページを編集する
    3. 第二節ページ以降を編集する
    4. 追加したページの見出しとアンカー名を編集する
    5. 追加したページの本文を編集する
  7. 目次ページ「navigation.xhtml」を編集する
  8. 「本文ページ」の指定を変更する
  9. 画像を差し替える/画像を追加する
  10. ナビゲーション用の目次「toc.ncx」を作成し直す
    1. 表紙ファイルの仮編集をする
    2. 「Generate Table Of Contents」で目次を作成する
    3. 「toc.ncx」を編集する
    4. 各ページへのリンクを確認する
    5. 仮編集した表紙ファイルを元に戻す
  11. EPUBファイルをビュアーで確認する
  12. 《『Sigil』のコード補完機能について》
  13. 《『Sigil』の設定に関してのヒント》
  14. 《EPUBファイルの検証について》
  15. 《使用ツール》
  16. 《参照サイト》
  17. 《その他の注意》
  18. 《改訂記録》

1. ファイル構成

  • 「dc_template_01_winered_ep2.epub」ファイル内の構成は以下のようになっています(アイコンの絵柄は各自の環境により異なります)。『Adobe Digital Editions』を起動してウィンドウ内に「dc_template_01_winered_ep2.epub」ファイルをドラッグして開き、各ページがどのように表示されているかを確認しておきます。
テンプレートファイル一覧

2. UUIDを変更する

  • 『Sigil』を起動し、左の「Book Browser」にツリー表示されているファイル「content.opf」をダブルクリックしてコードを表示させ、4行目のUUID をコピーしておきます(UUIDは「新規作成」する度に違うものが自動的に生成されます)。
UUID (Unique User ID) をコピーする
  • 「Open」アイコンアイコンをクリック、またはタイトルバー下のメニュー「File」→「Open...」から「dc_template_01_winered_ep2.epub」を開き、「content.opf」ファイル内のUUIDを先ほどコピーしておいたものと差し替えます。二冊以上の書籍を制作する場合は、書籍ごとに違うUUIDを付けてください。
UUID (Unique User ID) を貼り付ける

3. 書籍情報を差し替える

  • 「Metadata Editor」アイコンアイコンをクリック、またはメニューから「Tools」→「Metadata Editor...」をクリック。
「Metadata Editor...」をクリック
  • 書籍情報のウィンドウが表示されるので、必要項目を差し替えます。項目1〜5は「Value」部分の下の欄をそれぞれダブルクリックして編集します。6の更新日は編集した日付が自動的に入るので変更は不要です。
書籍情報を差し替える

4. ファイル名を変更する

  • ここでファイル名を変更して一度保存しておきます。メニューから「File」→「Save as...」で好きなファイル名を付けて「保存」をクリックします。この先の工程でも作業しながらこまめにセーブしてください。また、大きな変更を加える前には失敗しても元に戻せるように、ファイル名に連番を付けるなどして別名で保存しておくことをお勧めします。
  • 新しく名前を付けたファイルを『Adobe Digital Editions』のウィンドウ内にドラッグして開き、書籍名と著者名が変更されたことを確認します。
  • できれば編集中のファイルとは別にもうひとつ『Sigil』を起動してオリジナルの「dc_template_01_winered_ep2.epub」も開いておき、変更箇所などを見比べながら作業していきましょう。

5. 本文を差し替える1 - 書籍情報や短い文章など

  • 本文内の書籍情報や整形がいらない短い文章をご自分のものに差し替えていきます。本文を編集する時は、「Book View」アイコン「Book View」(簡易ビュアー表示)と「Code View」アイコン「Code View」(コード表示)とを切り替えながら行うとわかりやすいです。ただし、現時点では「Book View」は日本語の縦書き表示には対応していないので、『Adobe Digital Editions』での表示も確認しながら作業してください。
「Book View」と「Code View」
a. 不要なページを削除する
  • 削除したいページのファイル名の上で右クリックして、「Delete...」をクリック。「Delete Files」ウィンドウで、ファイル名の横にチェックが入っていることを確認してから「Delete Marked Files」を押します。「献辞」「挿絵」「登場人物」「まえがき」「プロローグ」など、使用しないページはここですべて削除します。書籍中に目次を表示させたくない場合は「目次」ページ(navigation.xhtml)も削除できます。ただし、「献辞」は「謝辞」や「引用」等、「挿絵」は「口絵」、「プロローグ」は「エピローグ」等にも応用できるので、それらのページを作成するのであれば該当ページはとりあえず残しておいてください。また、ページを増やす作業は後の解説で行います。
ページを削除する
b. <title>〜</title>内の書籍名を差し替える
  • 「Text」フォルダ以下にあるそれぞれの本文ファイル(xhtmlファイル)にはタイトルとして書籍名が入ってるので、本文ファイルの7行目にある、すべての<title>〜</title>の書籍名を変更します。この部分には「表紙」「まえがき」「プロローグ」といった各ページのタイトルまでいちいち入れなければならないという決まりはないので、面倒であれば書籍名だけでかまいません。
本文ファイルの書籍名を差し替える
c. 本文ファイル内の書籍情報を差し替える
  • 表紙ページ「cover.xhtml」の表紙画像の説明に使われている12行目の書籍名を変更します。
各本文ファイル内の書籍情報を差し替える
d. 扉、奥付ページなどの書籍情報を差し替える
  • 「Book View」アイコン「Book View」(簡易ビュアー表示)に切り替えて、扉ページ「titlepage.xhtml」・奥付ページ「colophon.xhtml」の各書籍情報をご自分のものに差し替えます。「副題」など不要な行は削除し、書籍名や著者名を二行以上にしたい場合は普通に文章を打つ時と同じように[Enter]キーで改行します。また、献辞ページ「dedication.xhtml」、まえがきページ「preface.xhtml」、あとがきページ「afterword.xhtml」など、短い文章だけのページも同様にここでご自分のものに差し替えます。差し替える文章が長い場合は、次の『6. 本文を差し替える2 - 整形が必要な長い文章』の項目を応用してください。下図はタイトルページ「titlepage.xhtml」の編集例です。
扉ページ、奥付ページなどの書籍情報を差し替える
  • 登場人物ページ「characters.xhtml」はテンプレートの例では国名+人名の形にグループ分けしていますが、グループ分けをせず人名のみ並べるパターンにもできます。グループ分けをしない場合は、13行目の「<div class="characters">」を「<div class="characters_no_mark">」と変更し、「<ul>」「<li>」の構成を一階層分にします。以下は登場人物をグループ分けしない場合のコード例です。なお、枠内のコードをコピーして使用する場合は、枠内をダブルクリックするとすべて選択状態となるので、そのままコピーするか、必要な部分を選択し直してからコピー→貼り付けします。
              <h2 class="section" id="mark_005">登場人物</h2>

              <div class="characters_no_mark">
                <ul>
                  <li>ガーランド……国王/先王オデイルの第一子</li>
                  <li>エレンディア……ガーランドの妃</li>
                  <li>リュシェンヌ……第一王女(庶子)/王位継承者</li>
                  <li>アンドレア……第二王女</li>
                  <li>シルヴァナス……先王オデイルの第二子</li>
                  <li>ジュリエナス……先王オデイルの第三子(幽閉中)</li>
                  <li>ルドヴィック侯アルフィオス・グリンガースト……宰相</li>
                  <li>アストレル侯オウラス・ディラガートリィ……軍師</li>
                  <li>メイランド侯エルウィン・アスタラード……ジュリエナス派貴族</li>
                  <li>ランスレイド伯ローレンス・レスタロット……黒竜騎士団団長</li>
                  <li>レドモンド伯テオドア・ウェルフリート……白竜騎士団団長</li>
                  <li>ファリオン・エヴァラード……黒竜騎士/リュシェンヌの警護</li>
                  <li>ローダン・ウェルフリート……黒竜騎士/リュシェンヌの警護</li>
                  <li>マテウス・ホクラード……王および黒竜騎士団専属の剣術師範</li>
                </ul>
              </div>

            </body>
          </html>
        

6. 本文を差し替える2 - 整形が必要な長い文章

  • メインの本文となる原稿が入ったテキストを用意します。内容は普通のテキストデータ(プレーンテキスト)です。一行の頭は全角一文字空きで一段落ごとに改行が入り、一行空きの部分には段落のみが入っています(見本のサンプルテキスト→「dc_sample.txt」)。この原稿が入ったテキストを『メモ帳』などのエディタで開いておきます。
a. 章のページを編集する
  • 第一章のページ「chapter001.xhtml」を開き、章のタイトルを変更します。このテンプレート例では第一章の下に第一節、第二節、第三節……と続く二段階の構造になっていますが、もし章にあたるタイトルが存在せず、節のタイトルのみが一、二、三……のように続く場合は章のページは不要なので削除します。
章のタイトルを変更する
b. 第一節ページを編集する
  • 第一節のページ「Section0001.xhtml」を開き、11行目の節のタイトルを変更します。
節のタイトルを変更する
  • 本文の13行目の最初の<p>とその次の全角の空白(半角は不可)を残して、77行目の</p>の直前までの元の本文をすべて削除します。全角の空白は最低でもひとつ、ダミーとして入れておいてください。
元の本文を削除する
  • 全角の空白の前後(どちらでも可)にカーソルを置いたまま「Book View」アイコン「Book View」(簡易ビュアー表示)に切り替えます。『メモ帳』で開いている原稿となるテキストの第一節分(最後に必ず段落を入れてください)をすべてコピーし、『Sigil』の[Edit]メニュー→[Paste]で貼り付けます。
  • 「Code View」アイコン「Code View」(コード表示)に切り替えます。以下は切り替えた直後の状態です。
「Book View」で貼り付けた直後のコード
  • 最後の行に入っている余計な「<p> </p>」を削除します。
最後の余計なコードを削除した後
  • 再び「Book View」アイコン「Book View」(簡易ビュアー表示)に切り替えて、行ごとの段落や一行空きなどがきちんと反映されているかを確認します。
c. 第二節ページ以降を編集する
  • 第二節のページ「Section0002.xhtml」を開き、第一節のページと同じ要領で編集します。まずダミーの文章をすべて削除したところでこのページをコピー元として、第三節以降の必要なページを複製します。
  • ダミーの文章をすべて削除したら、「Section0002.xhtml」のファイル名の上で右クリックして、表示されるメニューから「Add Copy」をクリックします。
  • メニューから「Add Copy」をクリック
    • すぐ下にファイルが追加されるので、「Section0002.xhtml」に続くページであれば「Section0003.xhtml」「Section0004.xhtml」「Section0005.xhtml」……と揃えていきます(必ずしもこのファイル名で揃えなければならないという決まりはありません)。
    ファイルが追加される
    • 第二章以降の章のページも上の要領でコピーします。コピー元のページのすぐ下に「Section000x.xhtml」の名前が付いたページが追加されるので、ファイル名の上で右クリックして、「Rename...」をクリック。直接ファイル名を打ち込んで変更します。
    「Rename...」をクリック
    • 以下は第一章のページ「chapter001.xhtml」をコピーして第二章のページ「chapter002.xhtml」にファイル名を変更した直後の例です。
    ファイル名を変更する
    • 「Book Browser」にツリー表示されているファイル名はドラッグすることにより上下の順序を自由に入れ替えられます。以下は第二章のページ「chapter002.xhtml」を第三節のページ「Section0003.xhtml」の後ろに移動した例です。
    ファイルをドラッグして移動させる
    d. 追加したページの見出しとアンカー名を編集する
    • 見出しにはそれぞれアンカー名(「id="xxxxx"」の「xxxxx」部分)が指定されています。第三節からは節のタイトルを変更するだけでなく、見出し用のアンカー名も変更します。
    見出し用アンカー名を変更する
    • このテンプレートの例ではアンカー名は以下のようなナンバリングになっているので、ご自分の内容に合わせて増減、または変更してください。アンカー名は必ずしも連番になっている必要はなく、半角英数字であれば自由に付けられますが、ひとつのファイルの中で同じアンカー名を違う箇所に指定しないようにします。
                id="mark_001"〜 本文より前にあるページ
                id="mark_100" 本文の第一章
                  id="mark_101"、"mark_102"、"mark_103"〜 第一節、第二節、第三節〜
                id="mark_200" 本文の第二章
                  id="mark_201"、"mark_202"、"mark_203"〜 第一節、第二節、第三節〜
                        ------------
                id="mark_900"〜 本文より後にあるページ
            
    e. 追加したページの本文を編集する
    • 第二節のページ以降の本文を今までと同じ要領で差し替えます。本文中のルビや傍点、アンダーライン、字下げ等のコーディングに関しては、あとがきページ「afterword.xhtml」に解説してありますので参考にしてください。
    • 本文以外で追加したいページもこれまでと同様の作業の応用で行います。例えば「エピローグ」ページなど、本文と同様の体裁のものは「プロローグ」か本文ページをコピーして追加し、「謝辞」「引用」など「献辞」のページと同様の体裁のものは「献辞」のページをコピーして追加し、ファイル名を変更して、内容を編集します。ページの構成をすべて整えた後で、それに合わせて見出しとアンカー名も揃えます。
    • 以下は書籍中によく使われるページの一例です。ファイル名を付ける際の参考にしてください。
    • 「(巻頭や本文の前に入れる)口絵(frontispiece)」
      「(本文中に入れる)挿絵(illustration)」
      「(著者以外による)前書き(foreword)」
      「(著者による)前書き(preface)」
      「献辞(dedication)」
      「謝辞(acknowledgement)」
      「引用(epigraph)」
      「プロローグ(prologue)」
      「エピローグ(epilogue)」

    7. 目次ページ「navigation.xhtml」を編集する

    • この作業は『5-a. 不要なページを削除する』で目次ページ「navigation.xhtml」を削除している場合は不要です。次の『8.「本文」ページの指定を変更する』に飛んで編集を続けてください。
    • まず、目次をどのように表示させるかを決めます。『Adobe Digital Editions』上で目次ページ「navigation.xhtml」を確認すると、目次の各項目の上に黒丸や白丸、あるいは数字を付けたり、何も付けないといった6パターンの例を載せているので、それを参考にしながら好みのパターンを一つのみ残し、他の5パターンは削除します。また、「<h5>〜</h5>」で囲まれた説明文も削除します。
    • 黒丸・白丸・黒四角のマークは指定するだけで自動的に付きます。各項目の上に連番で数字を付ける機能は縦書き表示には対応していないので、数字を付けたい場合は手動でひとつひとつ入れていく必要があります。
    • なお、組み合わせは、<ol class="mark_xxxx">の「xxxx」部分を以下のように変更することで入れ替えられますが、マークが自動的に入るものと入らないものの組み合わせを選ぶと、見かけ上の字下げ文字数が少なくなることがあります。
    • mark_disk……黒丸
      mark_circle……白丸
      mark_square……黒四角
      mark_none……マークなし
    • これまで増減したページを目次に反映させます。「navigation.xhtml」ファイルのコードを表示させて、削除したページの行は削除し、増やしたページの行はコピーして増やします。目次のページを簡素化して表示させたい場合は、表示させたくないページの項目は自由に削除してしまってかまいません。表示させる項目を整理したら、追加したページの「ファイル名+アンカー名(“#”以下の半角英数字)」と「タイトル」をページ内に指定したものに合わせていきます。以下は黒丸+白丸マークの組み合わせで「献辞」「挿絵」「登場人物」ページを削除し、第一章を第四節まで、第二章を第二節まで増やした例です。
                <title>銀色の獅子〈1〉- 目次</title>
              </head>
    
                <body id="toc">
                  <h2 class="section" id="mark_003">目次</h2>
    
                  <div class="navigation">
                    <ol class="mark_disk">
                      <li><a href="../Text/titlepage.xhtml#mark_001">扉</a></li>
                      <li><a href="../Text/preface.xhtml#mark_006">まえがき</a></li>
                      <li><a href="../Text/prologue.xhtml#mark_007">プロローグ</a></li>
                      <li>
                        <a href="../Text/chapter001.xhtml#mark_100">第一章 リュシェンヌ</a>
                        <ol class="mark_circle">
                          <li><a href="../Text/Section0001.xhtml#mark_101">デルフィンデル</a></li>
                          <li><a href="../Text/Section0002.xhtml#mark_102">イライアス</a></li>
                          <li><a href="../Text/Section0003.xhtml#mark_103">ファルティーヌ</a></li>
                          <li><a href="../Text/Section0004.xhtml#mark_104">宴</a></li>
                        </ol>
                      </li>
                      <li>
                        <a href="../Text/shortstories.xhtml#mark_200">第二章 銀の獅子</a>
                        <ol class="mark_circle">
                          <li><a href="../Text/Section0005.xhtml#mark_201">ホクラード卿</a></li>
                          <li><a href="../Text/Section0006.xhtml#mark_202">エルナンド</a></li>
                        </ol>
                      </li>
                      <li><a href="../Text/afterword.xhtml#mark_900">あとがき</a></li>
                      <li><a href="../Text/colophon.xhtml#mark_901">奥付</a></li>
                    </ol>
                  </div>
    
                </body>
              </html>
            
    • なお、メニューから「Tools」→「Table Of Contents」→「Create HTML Table Of Contents」をクリックすると自動的にリンクを入れた目次ページ「navigation.xhtml」を書き出してくれる機能もあります。先に『c. 「toc.ncx」を編集する』に従って「toc.ncx」ファイルの内容を整えておく必要がありますが、目次の項目が多い場合はこれを使用した方が楽でリンクの間違いもないので、特に細かいことにはこだわらないという方はこちらをどうぞ。※ただし、この後、EPUB3対応にさせる作業を行う場合は「navigation.xhtml」の内容をコピーしてEPUB3用の目次に応用するので、この機能から目次ページを作成しないことをお勧めします。
    「Create HTML Table Of Contents」をクリックする
    • 上の機能を使用した場合、そのままだと横書き表示になってしまうので、これを縦書き表示にしたい場合は、ファイルの先頭から「Table of Contents」がある行までを下段のコードと入れ替えてください。また、<title>〜</title>内の書籍名もを差し替えてください。この縦書き表示用のコードを使用した場合は、「Styles」フォルダの一番下に自動的に追加される「sgc-toc.css」ファイルも不要なので削除します。
              <?xml version="1.0"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
                 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
              <html xmlns="http://www.w3.org/1999/xhtml">
              <head>
              <title>Contents</title>
              <link href="../Styles/sgc-toc.css" rel="stylesheet" type="text/css"/>
              </head>
              <body>
              <div class="sgc-toc-title">Table of Contents</div>
            
              <?xml version="1.0" encoding="UTF-8" standalone="no" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" xmlns:epub="http://www.idpf.org/2007/ops">
                <head>
                  <link href="../Styles/ebook_style.css" rel="stylesheet" type="text/css"/>
                  <link class="vertical" href="../Styles/ebook_vertical.css" rel="stylesheet" title="縦組" type="text/css"/>
                  <link class="horizontal" href="../Styles/ebook_horizontal.css" rel="alternate stylesheet" title="横組" type="text/css"/>
    
                  <title>銀色の獅子〈1〉- 目次</title>
    
                <style type="text/css">
                  div.sgc-toc-level-1 { margin-top: 0em; }
                  div.sgc-toc-level-2 { margin-top: 2em; }
                  div.sgc-toc-level-3 { margin-top: 2em; }
                  div.sgc-toc-level-4 { margin-top: 2em; }
                  div.sgc-toc-level-5 { margin-top: 2em; }
                  div.sgc-toc-level-6 { margin-top: 2em; }
                </style>
                </head>
    
                  <body id="toc">
                    <h2 class="section" id="mark_003">目次</h2>
            

    8. 「本文ページ」の指定を変更する

    • 「content.opf」ファイル内にメインの本文ページを指定する箇所があります。「本文」に相当するページは「献辞」や「まえがき」といった前付(まえづけ)を除いた“本文”の最初のページ、例えば「第一章」といったページを指定します。このテンプレートの例ではプロローグのページ「prologue.xhtml」を指定していますが、他のページを指定したい時は該当箇所のファイル名を変更してください。以下は第一章のページ「chapter001.xhtml」を指定した例です。
    • 「本文」ページの指定を変更する

    9. 画像を差し替える/画像を追加する

    • 書籍中に使用している画像を差し替えたい時は、「Images」フォルダの上で右クリックして「Add Existing Files...」をクリック、または「Add Existing Files」アイコンアイコンをクリックします。
    「Add Existing Files...」をクリックする
    • 差し替えたい画像が入っているフォルダを指定して、差し替えたい画像ファイルを選択してから「開く」をクリック。下はEPUB内に使用しているすべてのファイルを選択した状態です。
    差し替えたい画像ファイルを選択する
    • ファイルを上書きしてもよいかの確認ウィンドウが表示されるので「OK」をクリック。複数ファイルを選択した場合はすべてに「OK」をクリックします。
    ファイルの上書き確認ウィンドウ
    • 表紙ファイルを差し替えた場合は、表紙に使用する画像を指定し直します。「cover_01.jpg」のファイル名の上で右クリック、「Add Semantics」→「Cover Image」とクリックして「Cover Image」の前にチェックを入れます。
    「Cover Image」にチェックを入れる
    • 本文中に使用する挿絵などの画像ファイルもすべて同様に追加し、該当箇所で指定します。指定の仕方は一ページ全体が画像の場合は挿絵ページ「illustration.xhtml」を、文章中に使用する場合はあとがきページ「afterword.xhtml」のコーディング例を参照してください。なお、表紙用ファイルなどテンプレート中にすでに使用されている画像を別の画像に差し替えた場合、ファイル名が同じであれば天地左右の大きさが違っても特に記述を変更する必要はありません。

    10. ナビゲーション用の目次「toc.ncx」を作成し直す

    • 『Sigil』のウィンドウで右側に表示されている「Table of Contents」の内容が、現在作成されているナビゲーション用の目次「toc.ncx」の状態です。これに増減したページの情報を反映させて、「toc.ncx」を作成し直します。
    a. 表紙ファイルの仮編集をする
    • 表紙を見出しの項目に表示させるために仮編集をします。表紙ページ「cover.xhtml」をコード表示させて、10行目を以下の通りに差し替えます。
              <body id="cover">
            
              <body id="cover">
                <div>
                  <h2 class="no-optical">表紙</h2>
                </div>
            
    b. 「Generate Table Of Contents」で目次を作成する
    • 「Generate Table of Contents」アイコンアイコンをクリック、またはメニューから「Tools」→「Table Of Contents」→「Generate Table Of Contents...」をクリック。
    「Generate Table Of Contents...」をクリック
    • 「Generate Table Of Contents」ウィンドウが開いたら、左下の〈Select headings to include in TOC〉をクリックして、一番下の「All」をクリック。ここにはすべてのページのすべての見出しを省略せずに含めます。項目リストに削除したページや追加したページの見出しがすべて反映されているのを確認してから、「OK」をクリックします。
    「Generate Table Of Contents」ウィンドウ
    c. 「toc.ncx」を編集する
    • 「toc.ncx」ファイルをダブルクリックしてコードを表示させます。6行目のUUIDと12行目の<title>〜</title>内の書籍名は、「content.opf」ファイルに指定したものに自動的に差し替えられているはずなので確認してください(もし変更されていなければ手動でコピーし直します)。
    • この後、ファイル名の後ろにアンカー名(“#”以下の半角英数字)を振り直します。面倒でも、アンカー名はできるだけ併記しておくことをお勧めします。
              <?xml version="1.0" encoding="utf-8"?>
              <!DOCTYPE ncx PUBLIC "-//NISO//DTD ncx 2005-1//EN"
               "http://www.daisy.org/z3986/2005/ncx-2005-1.dtd">
              <ncx xmlns="http://www.daisy.org/z3986/2005/ncx/" version="2005-1">
                <head>
                  <meta name="dtb:uid" content="urn:uuid:cc9fce31-939f-41be-85ec-8d2d651a836d" />
                  <meta name="dtb:depth" content="2" />
                  <meta name="dtb:totalPageCount" content="0" />
                  <meta name="dtb:maxPageNumber" content="0" />
                </head>
                <docTitle>
                  <text>銀色の獅子 -完全版-〈1〉 [template 1]</text>
                </docTitle>
                <navMap>
                  <navPoint id="navPoint-1" playOrder="1">
                    <navLabel>
                      <text>表紙</text>
                    </navLabel>
                    <content src="Text/cover.xhtml" />
                  </navPoint>
                  <navPoint id="navPoint-2" playOrder="2">
                    <navLabel>
                      <text>扉</text>
                    </navLabel>
                    <content src="Text/titlepage.xhtml#mark_001" />
                  </navPoint>
                  <navPoint id="navPoint-3" playOrder="3">
                    <navLabel>
                      <text>目次</text>
                    </navLabel>
                    <content src="Text/navigation.xhtml#mark_003" />
                  </navPoint>
                  <navPoint id="navPoint-4" playOrder="4">
                    <navLabel>
                      <text>まえがき</text>
                    </navLabel>
                    <content src="Text/preface.xhtml#mark_006" />
                  </navPoint>
                                      ------------
            
    d. 各ページへのリンクを確認する
    • ウィンドウの右側にある「Table of Contents」の内容が変更されたことを確認します。右側の各項目をクリックするとリンクされている各ページ(アンカー名が指定されていれば各アンカー名が記述されている位置)に飛んで内容が表示されるので、ここで各ページへのリンクが正しく指定されているかを確認できます。
    • なお、ここで作成される目次「toc.ncx」はビュアーのナビゲーション用メニューなどから利用されるもので、書籍の一部として表示される目次ページ「navigation.xhtml」とは扱いが違います。「toc.ncx」は『Adobe Digital Editions』ではナビゲーションパネル表示/非表示アイコン「ナビゲーションパネル表示/非表示」アイコンをクリックした時に表示される目次に使われます。
    e. 仮編集した表紙ファイルを元に戻す
    • 表紙ページ「cover.xhtml」をコード表示させて、最初に仮編集した10〜13行を下の一行に戻しておきます。
              <body id="cover">
                <div>
                  <h2 class="no-optical">表紙</h2>
                </div>
            
              <body id="cover">
            

    11. EPUBファイルをビュアーで確認する

    • 「Save」アイコンアイコンをクリック、またはメニューから「File」→「Save」でファイルを上書き保存します。
    • ファイルの内容を変更して保存し直した時は、一度『Adobe Digital Editions』の「ライブラリへ戻る」アイコンをクリックしてライブラリ表示へ戻り、左上に表示されている最後に開いた本の[読む]をクリックして本を開き直します。
    • すべての編集が終わったら、表示に不具合がないかどうかを最終的に確認します。特に目次ページから各ページへのリンクや、URL等へのリンクは実際にクリックして該当ページ、該当サイトにジャンプするかどうかすべてチェックしてください。
    • なお、途中で再度書籍情報を変更した場合、一度読み込んだ書籍の書籍名は『Adobe Digital Editions』上では変更されません。ウィンドウ右側の書籍一覧から該当書籍上で右クリック、「ライブラリから削除」→確認ウィンドウ上で「削除」をクリックして一度書籍をライブラリから削除し、再度ファイルをドラッグして読み込み直します。

    《『Sigil』のコード補完機能について》

    • 『Sigil』には行頭・行間の空きを自動的に整えてくれたり、コーディングのエラーを自動的に修復する機能が備わっています。通常はとても便利な機能なのですが、編集中にタグの閉じ忘れといった不具合があるとファイルの保存時や、「Code View」から「Book View」表示に切り替えた時などに次のようなエラーウィンドウが表示されることがあります。
    コードの間違いを指摘するエラーウィンドウ
    • ここで[Fix Automatically](自動修復)を選択してしまうと、データを一部削除されてしまうといった思わぬ修復がなされる可能性があります。まず、三行目のエラー指摘箇所に注目してメモしてから[Fix Manually](手動で修復)をクリックしてエラーウィンドウ閉じ、自分でエラー箇所を見つけて修復するのが無難です。上の例では「23行目」の「pの終了タグ」エラーを指摘されているので、そのあたりを修正すればいいとわかります(行の指定は多少前後することがあります)。修正後に再び試してみて、エラー表示が出なくなればOKです。

    《『Sigil』の設定に関してのヒント》

    • 『Sigil』の解説には汎用性を考慮して英語のメニューを使用していますが、日本語のメニュー表示にすることもできます。メニューの「Edit」→「Preferences...」をクリックし、「Preferencesウィンドウ」が開いたら、左側のメニューから「Language(言語)」をクリック。「User Interface Language(ユーザーインターフェース言語)」と「Default Language For Metadata(メタデータのデフォルト言語)」の両方を「Japanese」に変更して[OK]をクリックした後、再起動をうながすウィンドウでも[OK]をクリック、一度『Sigil』を閉じて再起動すると日本語表示になります(一部英語のままの部分があります)。メニューの言語が変わっても基本の操作は同じです。
    • インストール直後の『Sigil』では、コード表示の画面で日本語の下に赤い波線が引かれています(デフォルトの設定)。これは英語等のスペルをチェックする機能が日本語の文字をすべてスペルミスと判断してしまうためです。これを消すには、メニューの「Edit」→「Preferences...」をクリックし、「Preferencesウィンドウ」が開いたら、左側のメニューから「Spellcheck Dictionaries(スペルチェック辞書)」をクリック。右上の「Highlight Misspelled Words」のチェックをはずして、[OK]をクリックします。
    • 『Sigil』のバージョンによりコードの自動整形や補填に違いがあるため、この解説で使用しているコードの改行位置や行数表示が必ずしもお使いの『Sigil』と同じでない場合があります。また、メニュー等の表示にもバージョンによる違いがあります。

    《EPUBファイルの検証について》

    • 出来上がったEPUBファイルについては、原則として整合性を検証するツール『EpubCheck』によるチェックをクリアすることが求められます。10MBまでのサイズであれば、下記参照サイトにある『EPUB Validator (beta)』で検証できます。ただし、現バージョンの『Sigil』で制作したEPUBファイルでは日本語仕様の右めくりとルビのエラーをクリアできないので、それ以外の部分をチェックしてください(※「content.opf」内の「page-progression-direction="rtl"」部分と、各xhtml内に使用したすべての「ruby」箇所のエラーが指摘されます)。
    • サイトのトップページで[ファイルを選択]をクリックして作成したEPUBファイルを選び、横にファイル名が表示されたら[Validate]をクリックします。ファイルサイズが大きいとアップロードに多少時間がかかります。ページが変わり、「Results: Congratulations! No problems were found in sample.epub.」と表示されれば検証をパスしています。
    • なお、エラーが表示された場合は、エラー箇所のファイル名と行数が表示されるのでそれを参考にしてコードに間違いがないかを確認し、訂正してから再度実行します。
    • なお、「EpubCheck」をインストールして使用する方法はこちらを参考にしてください。以下はEPUB2テンプレート版を『EpubCheck』にかけた時に表示されるエラーの例です。タイトル部分をクリックするとエラー内容が表示されます(うまく表示されない場合はこちら)。
              Epubcheck Version 3.0
    
              Validating against EPUB version 2.0
              ERROR: d:/ebook/sample.epub/OEBPS/content.opf(42,53): attribute "page-progression-direction" not allowed here; expected attribute "id" or "toc"
              ERROR: d:/ebook/sample.epub/OEBPS/Text/prologue.xhtml(25,51): element "ruby" not allowed anywhere; expected the element end-tag, text or element "a", "abbr", "acronym", "applet", "b", "bdo", "big", "br", "cite", "code", "del", "dfn", "em","i", "iframe", "img", "ins", "kbd", "map", "noscript", "ns:svg", "object", "q","samp", "script", "small", "span", "strong", "sub", "sup", "tt" or "var" (with xmlns:ns="http://www.w3.org/2000/svg")
              ERROR: d:/ebook/sample.epub/OEBPS/Text/Section0001.xhtml(15,20): element "ruby" not allowed anywhere; expected the element end-tag, text or element "a", "abbr","acronym", "applet", "b", "bdo", "big", "br", "cite", "code", "del", "dfn", "em", "i", "iframe", "img", "ins", "kbd", "map", "noscript", "ns:svg", "object", "q", "samp", "script", "small", "span", "strong", "sub", "sup", "tt" or "var" (with xmlns:ns="http://www.w3.org/2000/svg")
              ERROR: d:/ebook/sample.epub/OEBPS/Text/Section0001.xhtml(49,44): element "ruby" not allowed anywhere; expected the element end-tag, text or element "a", "abbr","acronym", "applet", "b", "bdo", "big", "br", "cite", "code", "del", "dfn", "em", "i", "iframe", "img", "ins", "kbd", "map", "noscript", "ns:svg", "object", "q", "samp", "script", "small", "span", "strong", "sub", "sup", "tt" or "var" (with xmlns:ns="http://www.w3.org/2000/svg")
              ERROR: d:/ebook/sample.epub/OEBPS/Text/Section0001.xhtml(73,271): element "ruby"not allowed anywhere; expected the element end-tag, text or element "a", "abbr", "acronym", "applet", "b", "bdo", "big", "br", "cite", "code", "del", "dfn", "em", "i", "iframe", "img", "ins", "kbd", "map", "noscript", "ns:svg", "object", "q", "samp", "script", "small", "span", "strong", "sub", "sup", "tt" or "var" (with xmlns:ns="http://www.w3.org/2000/svg")
              ERROR: d:/ebook/sample.epub/OEBPS/Text/afterword.xhtml(28,37): element "ruby" not allowed anywhere; expected the element end-tag, text or element "a", "abbr", "acronym", "applet", "b", "bdo", "big", "br", "cite", "code", "del", "dfn", "em", "i", "iframe", "img", "ins", "kbd", "map", "noscript", "ns:svg", "object", "q", "samp", "script", "small", "span", "strong", "sub", "sup", "tt" or "var" (withxmlns:ns="http://www.w3.org/2000/svg")
              ERROR: d:/ebook/sample.epub/OEBPS/Text/afterword.xhtml(28,64): element "ruby" not allowed anywhere; expected the element end-tag, text or element "a", "abbr", "acronym", "applet", "b", "bdo", "big", "br", "cite", "code", "del", "dfn", "em", "i", "iframe", "img", "ins", "kbd", "map", "noscript", "ns:svg", "object", "q", "samp", "script", "small", "span", "strong", "sub", "sup", "tt" or "var" (withxmlns:ns="http://www.w3.org/2000/svg")
    
              Check finished with warnings or errors
            
    • 『EpubCheck』のチェックをすべてパスするには、一度出来上がったEPUB2書籍を解凍し、各ファイルを別エディタ等で手直ししてから再圧縮する必要があります。この手順については『EPUB2をEPUB3対応にする』ページで別に解説しています。

    《使用ツール》

    《参照サイト》

    《その他の注意》

    • ファイル名やアンカー名には半角の英数字を使用してください。
    • フォントや行間、装飾画像とのバランス等、見た目の雰囲気は端末やビュアーにより違ってきますので、『Sigil』の簡易ビュアー表示や『Adobe Digital Editions』による表示が必ずしもすべての環境でそのまま再現されるわけではありません。端末やビュアーによる表示の違いについては『ビュアーによる表示サンプル』ページを参照してください。
    • 編集方法はおおよそ各ソフトの基本的な操作ができる方を対象に解説しています。ここで触れていない操作方法については他に丁寧に解説されているサイトがいろいろありますので探してみてください。
    • テンプレートの内容については適宜見直しを行っているため、解説に使用している画像の細部やコードについては一部実際のものと違っている場合があります。
    • この制作方法は筆者が主にKindle用に作成したEPUBを元に記述しており、内容が必ずしも正しいとは限りません。また、ここで紹介したツールや参考サイトに関しても、安全性や正確さを保証するものではありません。利用される際は自己責任でお願い致します。
    • テンプレートに関する使用上の注意、利用規定等に関しては『EPUBテンプレート』のページをご覧ください。

    《改訂記録》

    • 2013/04/28 初稿
       『Sigil』 v0.7.2/『Adobe Digital Editions』 v2.0.67532/『EpubCheck』 v3.0 で作成