Microsoft PowerPoint - 電流協報告会-公開 pptx

(1)

EPUB3.0 ビューア調査報告

発表者豊国印刷加藤凸版印刷遠藤大日本印刷苣木

電流協 EPUB研究部会

ワーキンググループ

2013/3/25 1

(2)

背景：日本でのEPUB3.0の制作需要の急増

• 2011年10月 IDPF「

EPUB 3.0 Final Specification

」公開

• 2012年 3月ソニーリーダー EPUB3.0 Fix型対応

• 2012年 7月楽天が「

kobo Touch

」を発売

• 2012年 9月 Google Playブックス開始

• 2012年 9月電書協「

EPUB 3 制作ガイド

」公開

• 2012年10月緊デジ「

EPUB3.0テンプレート

」公開

• 2012年11月 Amazon 日本向け「

Kindle

」発売

• 2013年 3月 Apple 日本向け「

iBookstore

」を開始

(3)

A社

調査データ＆端末

各社それぞれで複数の端末やアプリの表示・表現を調査し、

制作結果と照らし合わせている。

現状：制作会社単位でコンテンツ制作、調査

B社

調査データ＆端末

D社

調査データ＆端末

C社

調査データ＆端末

3

(4)

A社

共有の調査結果

各社が個々に調査するのではなく、共通の調査結果を共

理想：業界単位での調査と結果の共有

B社

C社

_D社

テスト端末

電流協

(5)

今回調査対象とした表示・表現

制作側の視点から、表現と制作効率のバランスを見つ

つ、調査項目を検討。

Ⅰ．文字

① 書体指定 ② 混植セット指定 ③ 文字サイズ指定 ④ 文字色指定 ⑤ 外字画像 ⑥ フォント埋め込み ⑦ ボールド ⑧ イタリック ⑨ 文字回転 ⑩ 小文字・大文字変化 ⑪ 添え字

Ⅱ．文字列

① 傍線 ② 傍点・圏点 ③ 囲み罫 ④ ルビ ⑤ 縦中横 ⑥ 影付き

Ⅲ．行・段落

① 行間 ② 見出しグループ ③ 揃え ④ 字下げ ⑤ 扉表現

Ⅳ．ページ構成

① 改行 ② 背景色 ③ 改ページ

Ⅴ．罫線

① 囲む ② 太さ指定 ③ 色指定 ④ 水平線

Ⅵ．画像

① 画像の表示 ② 回り込み ③ 画像周囲余白 ④ SVG画像

Ⅶ．表組み

① キャプションなし ② キャプションあり

(6)

今回調査対象としたビューア

ビューア企業・団体サービス

1

Readium

IDPF

2

Kindle Paperwhite Amazon

Kindleストア

3

Kobo Touch

楽天ﾌﾞｯｸｽ

Koboｲｰﾌﾞｯｸｽﾄｱ

(7)

Readium Chromium Release 3

MacOS 10.ｘ

ビューアのバージョン、設定：

Readium

(8)

ビューアのバージョン、設定：

Kindle

Kindlegen 2.8： .epub → .mobi

Kindle Paperwhite

(9)

ビューアのバージョン、設定： Kobo

ファームウェア： Ver 2.4.0

Kobo Touch

＊フォントを「ドキュメントデフォルト」に設定

(10)

iPad mini

ビューアのバージョン、設定： iBooks

(11)

調査方法

Readiumの表示結果を参照しつつ、各々の端末、

ビューアで調査を実施。

(12)

調査結果

Ⅰ．文字

Ⅱ．文字列

Ⅲ．行・段落

Ⅳ．ページ構成

Ⅴ．罫線

Ⅵ．画像

Ⅶ．表組み

(13)

調査結果

Ⅰ．文字

Ⅱ．文字列

Ⅲ．行・段落

Ⅳ．ページ構成

Ⅴ．罫線

Ⅵ．画像

Ⅶ．表組み

(14)

⑥ フォント埋め込み

Readium

横組

縦組

○ △

埋め込んだフォントが正しく反映されるか

Kindle Paperwhite

横組

縦組

○ ○

Kobo Touch

横組

縦組

○ ○

iBooks

横組

縦組

○ ○

Windows版は○

(15)

調査結果

Ⅰ．文字

Ⅱ．文字列

Ⅲ．行・段落

Ⅳ．ページ構成

Ⅴ．罫線

Ⅵ．画像

Ⅶ．表組み

(16)

⑨ 文字回転

Readium

横組

縦組

― ○

縦組で指定した文字が右90度回転するか

Kindle Paperwhite

横組

縦組

―

△

Kobo Touch

横組

縦組

― ○

iBooks

横組

縦組

― ○

(17)

(18)

(19)

(20)

ソースコード

xhtml

<span class="sideways">・：；</span>

CSS

.sideways {

‐webkit‐text‐orientation: sideways;

‐epub‐text‐orientation: rotate‐right;

‐epub‐text‐orientation: sideways;

(21)

調査結果

Ⅰ．文字

Ⅱ．文字列

Ⅲ．行・段落

Ⅳ．ページ構成

Ⅴ．罫線

Ⅵ．画像

Ⅶ．表組み

(22)

⑩ 小文字・大文字変化

スモールキャップス、オールキャップスが反映されるか

Readium

横組

縦組

○ ○

Kindle Paperwhite

横組

縦組

○ △

Kobo Touch

横組

縦組

○ △

iBooks

横組

縦組

○ ○

(23)

○ Readium 横組

■スモールキャップス

(24)

○ Readium 縦組

■ス

モ

ー

ル

キ

ャ

ッ

プ

ス

■オ

ール

キ

ャ

ッ

プ

ス

(25)

○ Kindle Paperwhite 横組

■スモールキャップス

(26)

△

_{Kindle Paperwhite 縦組}

■ス

モ

ー

ル

キ

ャ

ッ

プ

ス

■オ

ール

キ

ャ

ッ

プ

ス

(27)

○ kobo Touch 横組

■スモールキャップス

(28)

△

_{kobo Touch 縦組}

■ス

モ

ー

ル

キ

ャ

ッ

プ

ス

■オ

ール

キ

ャ

ッ

プ

ス

(29)

○ iBooks 横組

■スモールキャップス

(30)

○ iBooks 縦組

■ス

モ

ー

ル

キ

ャ

ッ

プ

ス

■オ

ール

キ

ャ

ッ

プ

ス

(31)

ソースコード

xhtml

<span class="smallcaps">

abcdefghijklmnopqrstuvwxyz

</span>

<span class="allcaps">

abcdefghijklmnopqrstuvwxyz

</span>

CSS

.smallcaps {font‐variant:small‐caps;}

.allcaps

{text‐transform: uppercase;}

(32)

調査結果

Ⅰ．文字

Ⅱ．文字列

Ⅲ．行・段落

Ⅳ．ページ構成

Ⅴ．罫線

Ⅵ．画像

Ⅶ．表組み

(33)

iBooks

横組

縦組

△ △

③揃え

和欧混在の文章で両端揃えが反映されるか

ビューア設定の両端揃えは○

Readium

横組

縦組

○ ○

Kindle Paperwhite

横組

縦組

○ ○

Kobo Touch

横組

縦組

○ ○

(34)

(35)

(36)

(37)

(38)

△

_{iBooks 横組}

(39)

△

_{iBooks 縦組}

(40)

ソースコード

xhtml

<div class="align‐justify">

<p>昔々、あるところに、an old manとan old

ladyが住んでいました。</p>

</div>

CSS

.align‐justify {

text‐align: justify;

‐webkit‐text‐align‐last: left;

(41)

調査結果

Ⅰ．文字

Ⅱ．文字列

Ⅲ．行・段落

Ⅳ．ページ構成

Ⅴ．罫線

Ⅵ．画像

Ⅶ．表組み

(42)

Ⅶ．表組

表組が正しく表示されているか

iBooks

横組

縦組

○ ○

Readium

横組

縦組

△ △

Kindle Paperwhite

横組

縦組

△ △

Kobo Touch

横組

縦組

△ △

(43)

(44)

(45)

(46)

(47)

(48)

(49)

(50)

(51)

ソースコード

xhtml

<table class="tb2"><tbody><tr><th>機能</th><th>Adobe Digital Editions(PC/Mac)</th><th>iBooks2(iOS)</th><th>Kinoppy(iOS)</th><th>Readium(Chrome)</th><th>FUSEeβ(PC)</ th></tr><tr><td>EPUB3の表示</td><td>？</td><td>？</td><td>？</td><td>？</td><td>？</td></tr><tr><td> フォント埋め込み</td><td>？</td><td>？</td><td>？</td><td>？</td><td>？</td></tr><tr><td>縦書き </td><td>？</td><td>？</td><td>？</td><td>？</td><td>？</td></tr><tr><td>均等割/和欧混植</td><td>？ </td><td>？</td><td>？</td><td>？</td><td>？</td></tr><tr><td>縦中横</td><td>？</td><td>？</td><td>？ </td><td>？</td><td>？</td></tr><tr><td>圏点</td><td>？</td><td>？</td><td>？</td><td>？</td><td>？ </td></tr><tr><td>ルビ</td><td>？</td><td>？</td><td>？</td><td>？</td><td>？</td></tr><tr><td>画像回込み</td><td>？</td><td>？</td><td>？</td><td>？</td><td>？</td></tr><tr><td>SVG</td><td>？</td><td>？ </td><td>？</td><td>？</td><td>？</td></tr><tr><td>外字</td><td>？</td><td>？</td><td>？</td><td>？ </td><td>？</td></tr><tr><td>文字装飾</td><td>？</td><td>？</td><td>？</td><td>？</td><td>？ </td></tr><tr><td>目次</td><td>？</td><td>？</td><td>？</td><td>？</td><td>？</td></tr><tr><td>表組み </td><td>？</td><td>？</td><td>？</td><td>？</td><td>？</td></tr></tbody></table>

CSS

.tb2 { border:1px solid;border‐spacing:0; border‐

collapse:collapse; width:100%; }

.tb2 th{border:1px solid;background‐color:#6495ED}

.tb2 td{border:1px solid;}

(52)

調査結果

Ⅰ．文字

Ⅱ．文字列

Ⅲ．行・段落

Ⅳ．ページ構成

Ⅴ．罫線

Ⅵ．画像

Ⅶ．表組み

(53)

① 傍線（１）

Readium

横組

縦組

○ △

横組が下線（underline）、縦組が右線（overline）で表示されるか

Kindle Paperwhite

横組

縦組

○ ○

Kobo Touch

横組

縦組

○ △

iBooks

横組

縦組

○ ○

画像外字に傍線は引かれない

(54)

(55)

△

_{Readium 縦組}

縦中横への傍線が

(56)

○ Kindle Paperwhite 横組

(57)

○ Kindle Paperwhite 縦組

(58)

(59)

△

_{Kobo Touch 縦組}

(60)

ソースコード

xhtml

<p>

<span class="em‐line">

【横組み】(text‐decoration: underline) 【縦組み】 (text‐decoration: overline)

</span>

</p>

<p>

<span class="em‐line">

縦中横指定に傍線→<span class="tcy">1</span>・ <span class="tcy">11</span></

span>

</p>

<p>

<span class="em‐line">

外字画像に傍線→<img class="gaiji" src="../image/gaiji‐go.svg" />（ゴシック外字）にある

</span>

</p>

<p>

<span class="em‐line">

外字画像＋ルビに傍線→<ruby><img class="gaiji" src="../image/gaiji‐go.svg" /><rt>くに</rt></ruby>（ゴシック<ruby>外字<rt>がいじ

</rt></ruby>）にある

</span>

</p>

<p>

<span class="em‐line em‐sesame">

外字画像＋ルビ＋圏点に傍線 →<ruby><img class="gaiji" src="../image/gaiji‐go.svg" /><rt>くに</rt></ruby>（ゴシック

(61)

ソースコード

CSS

.hltr .em‐line {

text‐decoration: underline;

}

.vrtl .em‐line {

text‐decoration: overline;

}

.tcy {

‐webkit‐text‐combine: horizontal;

‐epub‐text‐combine: horizontal;

}

.em‐sesame {

‐webkit‐text‐emphasis‐style: filled sesame;

‐epub‐text‐emphasis‐style: filled sesame;

}

(62)

① 傍線（２）

Readium

横組

縦組

○ △

横組が上線（overline）、縦組が左線（underline）で表示されるか

Kindle Paperwhite

横組

縦組

○ ○

Kobo Touch

横組

縦組

○ △

iBooks

横組

縦組

○ ○

(63)

○ Readium 横組

(64)

△

_{Readium 縦組}

縦中横への傍線が横へ引かれる

(65)

(66)

(67)

(68)

△

_{Kobo Touch 縦組}

(69)

ソースコード

xhtml

<p>

<span class="em‐line‐outside">

【横組み】(text‐decoration: underline) 【縦組み】(text‐decoration: overline)

</span>

</p>

<p>

<span class="em‐line‐outside">

縦中横指定に傍線→<span class="tcy">1</span>・<span class="tcy">11</span></

span>

</p>

<p>

<span class="em‐line‐outside">

外字画像に傍線→<img class="gaiji" src="../image/gaiji‐go.svg" />（ゴシック外字）にある

</span>

</p>

<p>

<span class="em‐line‐outside">

外字画像＋ルビに傍線→<ruby><img class="gaiji" src="../image/gaiji‐go.svg" /><rt>くに</rt></ruby>（ゴシック<ruby>外字<rt> がいじ</rt></ruby>）にある

</span>

</p>

<p>

<span class="em‐line‐outside em‐sesame">

外字画像＋ルビ＋圏点に傍線→<ruby><img class="gaiji" src="../image/gaiji‐go.svg" /><rt>くに</rt></ruby>（ゴシック<ruby>外字<rt>がいじ</rt></ruby>）にある

</span>

</p>

(70)

ソースコード

CSS

.hltr .em‐line‐outside {

text‐decoration: overline;

}

.vrtl .em‐line‐outside {

text‐decoration: underline;

}

.tcy {

‐webkit‐text‐combine: horizontal;

‐epub‐text‐combine: horizontal;

}

.em‐sesame {

‐webkit‐text‐emphasis‐style: filled sesame;

(71)

調査結果

Ⅰ．文字

Ⅱ．文字列

Ⅲ．行・段落

Ⅳ．ページ構成

Ⅴ．罫線

Ⅵ．画像

Ⅶ．表組み

(72)

② 傍点・圏点

Readium

横組

縦組

○ ○

指定した傍点・圏点が正しく表示される

Kindle Paperwhite

横組

縦組

○ ○

Kobo Touch

横組

縦組

○ ○

iBooks

横組

縦組

○ ○

(73)

(74)

(75)

(76)

(77)

ソースコード

xhtml

<p>圏点（・）

<span class="em‐dot">

ビュレット

</span>

</p>

<p>圏点（。）

<span class="em‐dot‐open">

白ビュレット

</span>

</p>

<p>圏点（ʘ）

<span class="em‐double‐circle">

蛇の目

</span>

</p>

<p>圏点（◎）

<span class="em‐double‐circle‐open">

二重丸

</span>

</p>

<p>圏点（●）

<span class="em‐circle">

黒丸

</span>

</p>

<p>圏点（〇）

<span class="em‐circle‐open">

白丸

</span>

</p>

<p>圏点（▲）

<span class="em‐triangle">

黒三角

</span>

</p>

<p>圏点（△）

<span class="em‐triangle‐open">

三角

</span>

</p>

<p>圏点（﹅）

<span class="em‐sesame">

ゴマ

</span>

</p>

<p>圏点（﹆）

<span class="em‐sesame‐open">

白ゴマ

</span>

</p>

<p>圏点（任意の文字☆）

<span class="em‐string">

星マーク

</span>

【電書協外】</p>

(78)

ソースコード

CSS

.em‐sesame { ‐epub‐text‐emphasis‐style: filled sesame; } .em‐sesame‐open { ‐epub‐text‐emphasis‐style: open sesame; } .em‐dot { ‐epub‐text‐emphasis‐style: filled dot; } .em‐dot‐open { ‐epub‐text‐emphasis‐style: open dot; } .em‐circle { ‐epub‐text‐emphasis‐style: filled circle; } .em‐circle‐open { .em‐double‐circle { ‐epub‐text‐emphasis‐style: filled double‐ circle; } .em‐double‐circle‐open { ‐epub‐text‐emphasis‐style: open double‐ circle; } .em‐triangle { ‐epub‐text‐emphasis‐style: filled triangle; } .em‐triangle‐open { ‐epub‐text‐emphasis‐style: open triangle; } .em‐string { ‐epub‐text‐emphasis‐style: "☆";

(79)

調査結果

Ⅰ．文字

Ⅱ．文字列

Ⅲ．行・段落

Ⅳ．ページ構成

Ⅴ．罫線

Ⅵ．画像

Ⅶ．表組み

(80)

④ ルビ

Readium

横組

縦組

△ △

指定されたルビ位置（縦組：左右）に表示されるか

Kindle Paperwhite

横組

縦組

△ △

Kobo Touch

横組

縦組

△ △

iBooks

横組

縦組

△ △

(81)

(82)

(83)

△

_{iBooks 横組}

(84)

(85)

(86)

(87)

ソースコード

xhtml

<h3>４―１．モノルビ</h3>

<h4>４―１―１．指定なし</h4>

<p>

<ruby>鬼<rt>き</rt></ruby><ruby>門<rt>もん</rt></ruby>

の…</p>

<h4>４―１―２．over指定【電書協外】</h4>

<p>

<ruby class="ruby‐Over">鬼<rt>き</rt></ruby><ruby class="ruby‐Over">

門<rt>もん</rt></ruby>の…</p>

<h4>４―１―３．before指定【電書協外】</h4>

<p>

<ruby class="ruby‐Before">鬼<rt>き</rt></ruby><ruby class="ruby‐

Before">門<rt>もん</rt></ruby>の…</p>

<h4>４―１―４．under指定【電書協外】</h4>

<p>

<ruby class="ruby‐Under">鬼<rt>き</rt></ruby><ruby class="ruby‐

Under">門<rt>もん</rt></ruby>の…</p>

<h4>４―１―５．after指定【電書協外】</h4>

<p>

<ruby class=“ruby‐After”>鬼<rt>き</rt></ruby><ruby class=“ruby‐After”>

門<rt>もん</rt></ruby>の…</p>

(88)

ソースコード

xhtml

<h3>４―２．グループルビ</h3>

<h4>４―２―１．指定なし</h4>

<p>

<ruby>鬼門<rt>きもん</rt></ruby>

の…</p>

<h4>４―２―２．over指定【電書協外】</h4>

<p>

<ruby class="ruby‐Over">鬼門<rt>きもん</rt></ruby>の…</p>

<h4>４―２―３．before指定【電書協外】</h4>

<p>

<ruby class="ruby‐Before">鬼門<rt>きもん</rt></ruby>の…</p>

<h4>４―２―４．under指定【電書協外】</h4>

<p>

<ruby class="ruby‐Under">鬼門<rt>きもん</rt></ruby>の…</p>

<h4>４―２―５．after指定【電書協外】</h4>

<p>

<ruby class="ruby‐After">鬼門<rt>きもん</rt></ruby>の…</p>

(89)

ソースコード

xhtml

<h3 id="contentIndex_id_59">４―３．熟語ルビ</h3>

<h4>４―３―１．指定なし</h4>

<p>

<ruby>鬼<rt>き</rt>門<rt>もん</rt></ruby>

の…</p>

<h4>４―３―２．over指定【電書協外】</h4>

<p>

<ruby class="ruby‐Over">鬼<rt>き</rt>門<rt>もん</rt></ruby>の…</p>

<h4>４―３―３．before指定【電書協外】</h4>

<p>

<ruby class="ruby‐Before">鬼<rt>き</rt>門<rt>もん</rt></ruby>の…</p>

<h4>４―３―４．under指定【電書協外】</h4>

<p>

<ruby class="ruby‐Under">鬼<rt>き</rt>門<rt>もん</rt></ruby>の…</p>

<h4>４―３―５．after指定【電書協外】</h4>

<p>

<ruby class="ruby‐After">鬼<rt>き</rt>門<rt>もん</rt></ruby>の…</p>

(90)

ソースコード

CSS

.ruby‐After {

‐epub‐ruby‐position: after;

}

.ruby‐Under {

‐epub‐ruby‐position: under;

}

.ruby‐Before {

‐epub‐ruby‐position: before;

}

.ruby‐Over {

‐epub‐ruby‐position: over;

}

(91)

調査結果

Ⅰ．文字

Ⅱ．文字列

Ⅲ．行・段落

Ⅳ．ページ構成

Ⅴ．罫線

Ⅵ．画像

Ⅶ．表組み

(92)

⑤ 縦中横

Readium

横組

縦組

ー ○

縦中横が正しく表示される

Kindle Paperwhite

横組

縦組

ー ○

Kobo Touch

横組

縦組

ー ○

iBooks

横組

縦組

ー ○

半角数字3桁、英字2桁まで有効

(93)

(94)

(95)

(96)

(97)

ソースコード

xhtml

<span class="tcy">200</span>

<span class="tcy">Word</span>

CSS

.tcy {

‐webkit‐text‐combine: horizontal;

‐epub‐text‐combine: horizontal;

}

(98)

調査結果

Ⅰ．文字

Ⅱ．文字列

Ⅲ．行・段落

Ⅳ．ページ構成

Ⅴ．罫線

Ⅵ．画像

Ⅶ．表組み

(99)

② 背景色

Readium

横組

縦組

× ×

背景色が正しく表示される

Kindle Paperwhite

横組

縦組

ーー

Kobo Touch

横組

縦組

ーー

iBooks

横組

縦組

○ ○

モノクロ端末の為モノクロ端末の為

(100)

(101)

(102)

(103)

(104)

ソースコード

xhtml

<html

xmlns="http://www.w3.org/1999/xhtml"

xmlns:epub="http://www.idpf.org/2007/ops"

xml:lang="ja"

class="vrtl bg‐cyan">

…</html>

CSS

.bg‐cyan { background‐color: #00ffff; }

(105)

調査結果

Ⅰ．文字

Ⅱ．文字列

Ⅲ．行・段落

Ⅳ．ページ構成

Ⅴ．罫線

Ⅵ．画像

Ⅶ．表組み

(106)

③ 改ページ

Readium

横組

縦組

× ×

改ページが正しくされているか

Kindle Paperwhite

横組

縦組

○ ○

Kobo Touch

横組

縦組

× ×

iBooks

横組

縦組

○ ○

(107)

(108)

(109)

(110)

(111)

(112)

(113)

ソースコード

xhtml

<div class="pagebreak">

<p>【１ページ】この段落の次は改ページされていますか？</p>

</div>

<p>【２ページ】この段落の前は改ページされていますか？</p>

<div class="pagebreak‐both">

<p>【３ページ】この段落の前後は改ページされていますか？このページはこの

段落だけですか？</p>

</div>

<p>【４ページ】この段落の前は改ページされていますか？この段落はページの

先頭ですか？</p>

<p>【５ページ】この段落の次は改ページされていますか？</p>

<div class="pagebreak‐before">

<p>【次ページ】この段落の前は改ページされていますか？この段落はページ

の先頭ですか？</p>

</div>

(114)

ソースコード

CSS

/* 指定したブロックの直後で改ページ */

.pagebreak {

page‐break‐after: always;

}

/* 指定したブロックの直前で改ページ */

.pagebreak‐before {

page‐break‐before: always;

}

/* 指定したブロックの前後で改ページ */

.pagebreak‐both {

page‐break‐before: always;

page‐break‐after: always;

(115)

調査結果

Ⅰ．文字

Ⅱ．文字列

Ⅲ．行・段落

Ⅳ．ページ構成

Ⅴ．罫線

Ⅵ．画像

Ⅶ．表組み

(116)

４．SVG

Readium

×

（一部）

正しく表示されるか

kobo Touch

×

Kindle Paperwhite

×

（一部）

iBooks

×

(117)

×

_{Readium 縦書}

(118)

ソースコード

xhtml

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink"

width="1465px" height="672px" viewBox="0 0 1465

672">

<image width="1465" height="672"

xlink:href="../image/img_fmt.png" ></image>

</svg>

(119)

(120)

(121)

(122)

ソースコード

xhtml

<h4>４―２―１．SVG棒グラフ</h4>

<p><img class="fit" src="../Image/barChart.svg" alt=""/></p>

The Apache™ Batik Projectのサンプルを利用しています。

http://svn.apache.org/viewvc/xmlgraphics/batik/trunk/samples/

(123)

Readium

Kindle

Kobo

iBooks

横

縦

横

縦

横

縦

横

縦

フォント

埋め込み指定

○ △

○ ○ ○ ○ ○ ○

文字回転縦組の文字を右90度

ー ○ ー

△

ー ○ ー ○

小（大）文

字変化

スモールキャプス／

オールキャプス

○ ○ ○

△

○ △

○ ○

揃え

和欧混在で両端揃え

○ ○ ○ ○ ○ ○

△ △

表組

表組を正しく表示

△ △ △ △ △ △ △

○ 傍線（１）

横：下線、縦：右線

○ △

○ ○ ○

△

○ ○

傍線（２）

横：上線、縦：左線

○ △

○ ○ ○

△

○ ○

まとめ：制作時に注意が必要なもの（１）

(124)

まとめ：制作時に注意が必要なもの（２）

Readium Kindle Kobo iBooks 横縦横縦横縦横縦

傍点・圏

点

指定の種類を表示

○ ○ ○ ○ ○ ○ ○ ○

ルビ

指定位置に表示

△ △ △ △ △ △ △ △

縦中横

ー ○ ー ○ ー ○ ー ○

背景色

× ×

ーーーー ○ ○

改ページ改ページの指定

× ×

○ ○

× ×

○ ○

ＳＶＧ

画像表示

× × × × × × × ×

各ビューアとも、基本的な機能はサポートされている。現時点で一部

Microsoft PowerPoint - 電流協報告会-公開 pptx

EPUB3.0 ビューア調査報告

電流協 EPUB研究部会

ワーキンググループ

背景：日本でのEPUB3.0の制作需要の急増

•

2011年10月 IDPF「

EPUB 3.0 Final Specification

」公開

•

2012年 3月 ソニーリーダー EPUB3.0 Fix型対応

•

2012年 7月 楽天が「

kobo Touch

」を発売

•

2012年 9月 Google Playブックス開始

•

2012年 9月 電書協「

EPUB 3 制作ガイド

」公開

•

2012年10月 緊デジ「

EPUB3.0テンプレート

」公開

•

2012年11月 Amazon 日本向け「

Kindle

」発売

•

2013年 3月 Apple 日本向け「

iBookstore

」を開始

A社

調査データ＆端末

各社それぞれで複数の端末やアプリの表示・表現を調査し、

制作結果と照らし合わせている。

現状：制作会社単位でコンテンツ制作、調査

B社

調査データ＆端末

D社

調査データ＆端末

C社

調査データ＆端末

A社

共有の調査結果

各社が個々に調査するのではなく、共通の調査結果を共

理想：業界単位での調査と結果の共有

B社

C社

D社

電流協

今回調査対象とした表示・表現

制作側の視点から、表現と制作効率のバランスを見つ

つ、調査項目を検討。

Ⅰ．文字

Ⅱ．文字列

Ⅲ．行・段落

Ⅳ．ページ構成

Ⅴ．罫線

Ⅵ．画像

Ⅶ．表組み

今回調査対象としたビューア

Readium

IDPF

Kindle Paperwhite Amazon

Kindleストア

Kobo Touch

楽天ﾌﾞｯｸｽ

Koboｲｰﾌﾞｯｸｽﾄｱ

Readium Chromium Release 3

MacOS 10.ｘ

ビューアのバージョン、設定：

Readium

ビューアのバージョン、設定：

Kindle

Kindlegen 2.8： .epub → .mobi

Kindle Paperwhite

ビューアのバージョン、設定： Kobo

ファームウェア： Ver 2.4.0

2012年 3月ソニーリーダー EPUB3.0 Fix型対応

2012年 7月楽天が「

2012年 9月電書協「

2012年10月緊デジ「

_D社

＊フォントを「ドキュメントデフォルト」に設定