デジタルコミック 協 議 会 EPUB3 固 定 レイアウト 仕 様 ガイド ver.1.0 2012/11/22 本 ガイドは コミックスコンテンツ 制 作 およびリーディングシステム(RS) 開 発 のため EPUB3 固 定 レイアウトの 仕 様 をまとめたものです 現 在 IDPF が 規 定 する EPUB3 の 仕 様 では 多 様 な 記 述 が 許 容 されているため 制 作 されたファイルに 違 いが 出 て リーディングシステムによる 再 現 が 円 滑 に 行 われていない 状 況 があります このガイドの 利 用 により デジタルコミックス の 制 作 出 版 が 促 進 され より 多 くのコミックスがより 多 くの 電 子 書 店 で 提 供 され 読 者 に 豊 かな 読 書 体 験 が 届 けられることを 望 みます 1. 基 本 的 なフォルダ 構 成 とファイル 名 root フォルダ mimetype META-INF フォルダ container.xml item フォルダ standard.opf navigation-documents.xhtml image フォルダ style フォルダ xhtml フォルダ root フォルダ 名 は 版 元 の 指 示 に 従 って 設 定 されます ファイル フォルダ 名 は 原 則 小 文 字 とする(META-INF および 管 理 コードなど 指 示 のあるも のは 除 く) 素 材 格 納 フォルダの 名 前 は パッケージ 文 書 での <item> 要 素 にあわせ item とする( 仕 様 上 は 任 意 ) 素 材 はすべて item フォルダ 内 の 指 定 フォルダに 入 れることを 基 本 とします 画 像 ファイル CSS ファイル xhtml ファイル : image フォルダ : style フォルダ : xhtml フォルダ 1
以 下 のファイルはアイテムごとの 改 変 は 行 いません root フォルダ 直 下 にある mimetype META-INF フォルダ 内 の container.xml 2. ファイル 仕 様 底 本 での 改 ページごとにファイルを 分 割 して XHTML 文 書 を 作 成 します ファイルのタイトルは 作 品 名 を 基 本 とします XHTML 文 書 の <title>~</title> 部 分 には 版 元 より 特 別 に 指 示 がない 場 合 作 品 名 を 記 述 します 後 述 するパッケージ 文 書 (OPF ファイル)の 作 品 名 情 報 を 利 用 メイン タイトルと サブタイトルやシリーズ 名 との 間 は 全 角 アキでつなぎます 1コンテンツ に 複 数 の 作 品 を 含 むオムニバス 作 品 など 内 容 が 一 様 でない 場 合 は 版 元 より 個 別 に 指 示 します epub:type は カバーとナビゲーション 文 書 にのみ 挿 入 します EPUB では ページの 役 割 を 示 すために epub:type という 属 性 を 指 定 することができ ます ただ 現 状 でこれらを 利 用 する RS はなく また epub:type を 利 用 した CSS の 指 定 が 保 証 されているわけでもありません そのため 現 時 点 では 将 来 システムから 利 用 される 可 能 性 が 高 そうな 以 下 の2 項 目 だけ 目 印 代 わりに 指 定 しておくこととします カバー 画 像 のページ <body epub:type="cover" class="p-cover"> ナビゲーション 文 書 <nav epub:type="toc" id="toc"> これらはテンプレートに 記 した 定 型 ページ 用 の class や ナビゲーション 文 書 の id の 前 に 記 述 することとします 3. 簡 易 コーディングルール 文 字 コードは UTF-8N(BOM 無 し)を 推 奨 改 行 コードは 同 一 ファイル 内 で 混 在 させません 本 ガイドで 触 れていない HTML 要 素 や CSS プロパティの 利 用 は 非 推 奨 版 元 指 定 外 のコメントは 挿 入 しません 2
本 文 内 での 要 素 中 の 属 性 記 載 順 は epub:type class id src / href alt 煩 雑 になるのを 避 けるため <p> には 極 力 class を 指 定 しません 本 文 用 XHTML 文 書 中 の HTML 要 素 直 後 の 改 行 <div> などのブロックレベル 的 な 要 素 では 必 ず 開 始 タグと 閉 じタグの 直 前 直 後 にそれぞ れ 改 行 コードを 入 れるようにします ただし <p> と 見 出 しの <h1>~<h6> については 開 始 タグの 直 後 および 閉 じタグの 直 前 には 改 行 コードを 入 れないようにします 例 ) <h1> テキスト </h1> <div><p>テキスト</p></div> <h1>テキスト</h1> <div> <p>テキスト</p> </div> インライン 的 な 要 素 (<span> など)では 原 則 改 行 しないようにします <a> の 場 合 は <a> がブロックレベル 的 要 素 (<p> も 含 む)か <img> を 囲 むのでない かぎり 改 行 コードは 入 れないようにします 3
4. EPUB 構 成 ファイルのテンプレート 一 覧 テンプレートとファイル 名 規 則 特 に 指 示 がないかぎり 以 下 のテンプレートとファイル 名 規 則 を 用 いることとします こ こにあげたもの 以 外 のテンプレートやファイル 名 規 則 が 必 要 な 場 合 は 各 版 元 が 指 示 を 行 います ソースの 整 形 ソース 中 の 改 行 やインデント 要 素 内 の 属 性 順 等 ソースの 整 形 に 関 しては 各 版 元 の 指 示 に 従 うこととします 特 に 指 示 がないかぎり 以 下 のテンプレートに 準 じた 整 形 を 行 い ます テンプレート 中 の 色 分 けについて 灰 色 :すべての 作 品 で 共 通 の 部 分 ( 原 則 変 更 しません) 青 色 :すべての 作 品 の 共 通 部 分 中 で 作 品 ごとに 変 更 する 部 分 赤 色 :そのテンプレートを 利 用 する 作 品 に 特 有 の 注 意 すべき 部 分 ( 原 則 変 更 しません) 黒 色 : 定 型 ではない 部 分 ( 作 品 版 元 により 異 ります) 4-1:mimetype ---------------------------------[sample code]--------------------------------- application/epub+zip ------------------------------------------------------------------------------- 4-2 : container.xml META-INFフォルダ 内 に 配 置 ---------------------------------[sample code]--------------------------------- <?xml version="1.0"?> <container version="1.0" xmlns="urn:oasis:names:tc:opendocument:xmlns:container" > 4
<rootfiles> <rootfile full-path="item/standard.opf" media-type="application/oebps-package+xml" /> </rootfiles> </container> ------------------------------------------------------------------------------- 4-3: standard.opf RS に <dc:title> の 情 報 を 表 示 する 機 能 がある 場 合 必 ず RS 内 のどこかで 記 載 内 容 のす べてが 画 面 に 表 示 されるものと 想 定 します RS に <dc:creator> の 情 報 を 表 示 する 機 能 があり 複 数 の <dc:creator> がある 場 合 必 ず RS 内 のどこかで 記 載 内 容 のすべてが 画 面 に 表 示 されるものと 想 定 します( 複 数 著 作 者 名 の 連 結 時 の 記 号 や 役 割 表 記 の 表 示 等 は RS に 一 任 するものとします) 複 数 の 著 作 者 名 を 一 人 ずつ 分 けるか ひとつの <dc:creator> に 全 員 記 載 するかは 版 元 の 指 示 に 従 うこととします 分 けて 入 れる 場 合 版 元 は 各 著 作 者 の role の 値 と 著 作 者 の 表 示 順 序 を 指 定 します file-as で 指 定 した 整 列 用 カナは 読 者 に 対 しては 表 示 されないことを 想 定 します ファイル id( unique-identifier )に 用 いるコード 体 系 は 定 めず 版 元 が 指 示 特 に 指 示 が ない 場 合 は uuid を 挿 入 します 更 新 日 は 特 に 指 示 がない 場 合 後 のファイル 管 理 の 便 宜 を 考 えて 納 品 予 定 日 とします 更 新 日 は 読 者 に 対 して 表 示 されないこととします カバー 画 像 のファイル 名 は 特 に 指 示 がない 場 合 RS 側 のサムネイル 表 示 の 速 度 向 上 に 配 慮 する 目 的 で すべて 同 じ 名 前 (cover.jpg)とします 左 開 き 作 品 の 場 合 <spine> の page-progression-direction は rtl から ltr に 変 更 <spine> 要 素 の <itemref> で idref の 値 が 重 複 し て い る と 何 も 表 示 さ れ な い 場 合 (Readium)や ページがループする 場 合 (Firefox の EPUBReader)があるため 同 じ 画 像 を2 度 以 上 表 示 させたいときは 念 のため 画 像 を 呼 び 出 す xhtml ファイルを 別 に 用 意 するこ とを 推 奨 とします(2 度 目 の 白 画 像 なら white2.xhtml など) 電 書 協 EPUB3リフロー 型 ガイドとの 違 いは 以 下 の 点 です 5
<package> 要 素 に prefix の 行 を 追 加 <!-- Fixed-Layout Documents 指 定 --> 部 分 に <meta> 要 素 を2つ 追 加 スタイルシートは fixed-layout-jp.css のみ SVG ラッピングの 手 法 を 採 用 する SVG は XHTML に 直 接 記 載 SVG 未 対 応 RS に 配 慮 して <item> の xhtml ファイルに fallback として 対 応 する 画 像 ファイルを 指 定 <spine> 要 素 の <itemref> で カバーページに properties="rendition:page-spread-center" を 追 加 ---------------------------------[sample code]--------------------------------- <?xml version="1.0" encoding="utf-8"?> <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/" > <metadata xmlns:dc="http://purl.org/dc/elements/1.1/"> <!-- 作 品 名 --> <dc:title id="title"> 作 品 名 1</dc:title> <meta refines="#title" property="file-as">セイレツヨウサクヒンメイカナ01</meta> <!-- 著 者 名 --> <dc:creator id="creator01"> 著 作 者 名 1</dc:creator> <meta refines="#creator01" property="role" scheme="marc:relators">aut</meta> <meta refines="#creator01" property="file-as"> セ イ レ ツ ヨ ウ チ ョ サ ク シ ャ メ イ カ ナ 01</meta> <meta refines="#creator01" property="display-seq">1</meta> 6
<dc:creator id="creator02"> 著 作 者 名 2</dc:creator> <meta refines="#creator02" property="role" scheme="marc:relators">aut</meta> <meta refines="#creator02" property="file-as"> セ イ レ ツ ヨ ウ チ ョ サ ク シ ャ メ イ カ ナ 02</meta> <meta refines="#creator02" property="display-seq">2</meta> <!-- 出 版 社 名 --> <dc:publisher id="publisher"> 出 版 社 名 </dc:publisher> <meta refines="#publisher" property="file-as"> セ イ レ ツ ヨ ウ シ ュ ッ パ ン シ ャ メ イ カ ナ </meta> <!-- 言 語 --> <dc:language>ja</dc:language> <!-- ファイルid --> <dc:identifier id="unique-id">urn:uuid:860ddf31-55a4-449a-8cc9-3c1837657a15</dc:identifier> <!-- 更 新 日 --> <meta property="dcterms:modified">2012-01-01t00:00:00z</meta> <!-- Fixed-Layout Documents 指 定 --> <meta property="rendition:layout">pre-paginated</meta> <meta property="rendition:spread">landscape</meta> <!-- etc. --> <meta property="ebpaj:guide-version">1.1</meta> </metadata> <manifest> <!-- navigation --> 7
<item media-type="application/xhtml+xml" id="toc" href="navigation-documents.xhtml" properties="nav"/> <!-- style --> <item media-type="text/css" id="fixed-layout-jp" href="style/fixed-layout-jp.css"/> <!-- image --> <item media-type="image/jpeg" id="cover" href="image/cover.jpg" properties="cover-image"/> <item media-type="image/jpeg" id="i-white" href="image/i-white.jpg"/> <item media-type="image/jpeg" id="i-001" <item media-type="image/jpeg" id="i-002" <item media-type="image/jpeg" id="i-003" <item media-type="image/jpeg" id="i-004" <item media-type="image/jpeg" id="i-005" href="image/i-001.jpg"/> href="image/i-002.jpg"/> href="image/i-003.jpg"/> href="image/i-004.jpg"/> href="image/i-005.jpg"/> <item media-type="image/jpeg" id="i-colophon" href="image/i-colophon.jpg"/> <!-- xhtml --> <item media-type="application/xhtml+xml" id="p-cover" href="xhtml/p-cover.xhtml" properties="svg" fallback="cover"/> <item media-type="application/xhtml+xml" id="p-white" href="xhtml/p-white.xhtml" properties="svg" fallback="i-white"/> <item media-type="application/xhtml+xml" id="p-001" href="xhtml/p-001.xhtml" properties="svg" fallback="i-001"/> <item media-type="application/xhtml+xml" id="p-002" href="xhtml/p-002.xhtml" properties="svg" fallback="i-002"/> <item media-type="application/xhtml+xml" id="p-003" href="xhtml/p-003.xhtml" properties="svg" fallback="i-003"/> <item media-type="application/xhtml+xml" id="p-004" href="xhtml/p-004.xhtml" properties="svg" fallback="i-004"/> <item media-type="application/xhtml+xml" id="p-005" href="xhtml/p-005.xhtml" properties="svg" fallback="i-005"/> <item media-type="application/xhtml+xml" id="p-colophon" href="xhtml/p-colophon.xhtml" 8
properties="svg" fallback="i-colophon"/> <item media-type="application/xhtml+xml" id="p-white2" href="xhtml/p-white2.xhtml" properties="svg" fallback="i-white"/> </manifest> <spine page-progression-direction="rtl"> <itemref linear="yes" idref="p-cover" properties="rendition:page-spread-center"/> <itemref linear="yes" idref="p-white" properties="page-spread-right"/> <itemref linear="yes" idref="p-001" <itemref linear="yes" idref="p-002" <itemref linear="yes" idref="p-003" <itemref linear="yes" idref="p-004" <itemref linear="yes" idref="p-005" properties="page-spread-left"/> properties="page-spread-right"/> properties="page-spread-left"/> properties="page-spread-right"/> properties="page-spread-left"/> <itemref linear="yes" idref="p-colophon" properties="page-spread-right"/> <itemref linear="yes" idref="p-white2" properties="page-spread-left"/> </spine> </package> ------------------------------------------------------------------------------- < 参 考 情 報 > 全 ページ 定 形 サイズの 画 像 を 素 早 くページフィットして 表 示 させるために OPF ファイルに 基 準 サイズを 記 載 する 場 合 次 のように 記 載 することを 推 奨 します package 要 素 に 固 定 レイアウト 用 の prefix の 宣 言 を 追 加 <metadata> 要 素 に ページ 画 像 の 基 準 サイズ 指 定 を 追 加 ページ 画 像 の 寸 法 はすべて 同 一 とし 下 記 の 青 で 記 した 部 分 にその 原 寸 画 像 の 縦 と 横 の px 数 を 記 載 9
---------------------------------[sample code]--------------------------------- <?xml version="1.0" encoding="utf-8"?> <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/ fixed-layout-jp: http://www.digital-comic.jp/" > <metadata xmlns:dc="http://purl.org/dc/elements/1.1/"> ( 中 略 ) <!-- Fixed-Layout Documents 指 定 --> <meta property="rendition:layout">pre-paginated</meta> <meta property="rendition:spread">landscape</meta> <!-- 基 準 サイズ --> <meta property="fixed-layout-jp:viewport">width=848, height=1200</meta> <!-- etc. --> <meta property="ebpaj:guide-version">1.1</meta> </metadata> ( 後 略 ) ------------------------------------------------------------------------------- 10
4-4. navigation-documents.xhtml リンク 項 目 やリストの 階 層 構 造 は 作 品 内 容 により 変 更 版 元 から 特 に 指 示 がないかぎり カバーページ 目 次 ページ 奥 付 ページへのリンクのみと します ナビゲーション 文 書 中 にリンク 以 外 の 項 目 を 含 められるかどうかは 本 仕 様 ではサポートし ません ナビゲーション 文 書 の 表 示 のされ 方 については RS に 一 任 するものとします ナビゲーション 文 書 を 本 文 内 の 目 次 ページとしても 表 示 させる 場 合 は 後 述 する 本 文 ページ などの 例 を 参 考 に スタイルシートの 指 定 等 を 挿 入 することとします ファイル 名 が 連 番 の 場 合 は 適 時 調 整 します( 下 記 の 例 では 目 次 が p-001.xhtml) ---------------------------------[sample code]--------------------------------- <?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>navigation</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> <li><a href="xhtml/p-colophon.xhtml"> 奥 付 </a></li> </ol> 11
</nav> </body> </html> ------------------------------------------------------------------------------- 4-5 XHTML 文 書 ファイル カバーページ[cover.xhtml] 下 記 の 青 字 の3 箇 所 に 画 像 の 原 寸 サイズを 記 載 します ---------------------------------[sample code]--------------------------------- <?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> <link rel="stylesheet" type="text/css" href="../style/fixed-layout-jp.css"/> <meta name="viewport" content="width=848, height=1200"/> </head> <body epub:type="cover"> <div class="main"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewbox="0 08481200"> <image width="848" height="1200" xlink:href="../image/cover.jpg"/> 12
</svg> </div> </body> </html> ------------------------------------------------------------------------------- 本 文 ページ [p-***.xhtml] 例 では p-002.xhtml epub:type="cover" が 無 いこと 以 外 は カバーページと 同 じです 画 像 サイズは 各 作 品 内 で 統 一 することを 基 本 とします ---------------------------------[sample code]--------------------------------- <?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> <link rel="stylesheet" type="text/css" href="../style/fixed-layout-jp.css"/> <meta name="viewport" content="width=848, height=1200"/> </head> <body> <div class="main"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewbox="0 0 848 1200"> 13
<image width="848" height="1200" xlink:href="../image/i-002.jpg"/> </svg> </div> </body> </html> ------------------------------------------------------------------------------- < 参 考 > 本 文 にイメージマップ(クリッカブルマップ)を 指 定 する 場 合 下 記 のように 記 述 します a 要 素 の xlink:href 属 性 に リンク 先 のファイル 名 を 記 載 します rect 要 素 の x と y 属 性 に クリック 範 囲 の 開 始 位 置 ( 左 上 )の 座 標 を 記 載 rect 要 素 の width と height 属 性 に クリック 範 囲 のサイズを 記 載 ---------------------------------[sample code]--------------------------------- <?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> <link rel="stylesheet" type="text/css" href="../style/fixed-layout-jp.css"/> <meta name="viewport" content="width=848, height=1200"/> </head> <body> <div class="main"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" 14
xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewbox="0 08481200"> <image width="848" height="1200" xlink:href="../image/i-001.jpg"/> <a xlink:href="p-002.xhtml" target="_top"><rect fill-opacity="0.0" x="476" y="1000" width="300" height="60"/></a> <a xlink:href="p-colophon.xhtml" target="_top"><rect fill-opacity="0.0" x="476" y="1075" width="300" height="60"/></a> </svg> </div> </body> </html> ------------------------------------------------------------------------------- 15
デフォルト CSS ファイルについて スタイルシートの 構 成 fixed-layout-jp.css XHTML ファイルから 呼 び 出 すファイル 固 定 レイアウトでは @import がサポートされなくても 構 わないよう 他 のスタイルは 利 用 しま せん CSS ファイルの 運 用 ルール デフォルト CSS の 改 変 は 原 則 不 可 原 則 として 本 ガイドとあわせて 提 供 されるサンプルで 用 意 された CSS ファイルは 変 更 しないものとします このCSSファイルでは 複 雑 な 指 定 が 必 要 になるレイアウトを 考 慮 していません 以 下 のように CSS 内 容 そのものを 変 更 する 場 合 には 注 意 が 必 要 です class に 設 定 された 値 を 変 更 class にプロパティを 追 加 優 先 順 位 変 更 のため 記 述 位 置 を 移 動 他 の class と 連 動 している class の 名 前 を 変 更 新 たな class を 追 加 版 元 別 スタイルセットを 追 加 id の 重 複 を 避 ける id は 本 来 各 ページ(XHTMLファイル)ごとにユニークであれば 構 わないものですが 複 数 ファイルからなる EPUB データの 構 成 を 鑑 みて ひとつの 作 品 を 通 じてユニークな 値 であるものとします 独 自 CSS ファイルの 作 成 基 本 ルールとして UTF-8( BOM 無 し)で 保 存 すること またファイルの 先 頭 に @charset "UTF-8"; と 必 ず 挿 入 することを 推 奨 します 16