アクセシブルな電子書籍 (リフロー型 EPUB) の作りかた

「Form Design Patterns — シンプルでインクルーシブなフォーム制作実践ガイド」電子書籍版の制作では、自ら手を動かして EPUB を一から作ってみるという貴重な経験ができました。

この記事では、私自身の EPUB 制作過程を振り返りつつ、アクセシビリティに優れたリフロー型 EPUB の作りかたについて、まとめてみたいと思います。これから EPUB 制作に取り組んでみようという方に、少しでも参考になれば幸いです。

EPUB の仕様および参考文書

まずは、EPUB を制作するうえでよりどころとなる仕様および参考文書をご紹介します。

EPUB の構成

ごく大雑把に言うと、書籍の内容を記述した XHTML ファイルや CSS、画像などを ZIP でまとめて、リーディングシステム (電子書籍の閲覧環境) で読めるようにしたのが EPUB です。その中身ですが、「Form Design Patterns」電子書籍版では、「電書協 EPUB 3 制作ガイド」に記載されいている「基本のフォルダ構成とファイル名」に倣って、以下のフォルダおよびファイル構成にしました。

出版物を構成するファイル一式 (上記で言うと、ルートディレクトリ以下のすべてのフォルダとファイル) をまとめたコンテナを、EPUB の仕様では「EPUB (OCF) Container」といいます。このコンテナを作成するのに必要なファイルとして、ルートディレクトリに mimetype ファイルを、META-INF フォルダ内にコンテナファイル (container.xml) を、それぞれ置きます。

「EPUB (OCF) Container」に含まれる出版物の実体を、EPUB の仕様では「EPUB Publication」といいます。「EPUB Publication」は、パッケージ文書 (Package Document)、ナビゲーション文書 (Navigation Document)、リソース (XHTML ファイル、CSS ファイル、画像ファイルなど) で構成されます。上記では、item フォルダの中に、standard.opf (パッケージ文書) と navigation-document.xhtml (ナビゲーション文書) を置き、各種リソースとして、image フォルダに画像ファイルを、style フォルダに CSS ファイルを、xhtml フォルダに XHTML ファイルを、それぞれ格納しています。

なお上記では、META-INF フォルダの中に「com.apple.ibooks.display-options.xml」というファイルがあります。これは EPUB の仕様として必須ではありませんが、EPUB 出版物を Apple Books アプリで開いた際に、フォント選択で「オリジナル」(EPUB 制作者が CSS ファイルで設定したフォント) を選ぶことを可能にするためのものです。

EPUB の制作

以下の要領で、EPUB を構成するファイルをひとつひとつ作成します。

mimetype を作る

ルートディレクトリに mimetype ファイルを置きます。ファイル名は「mimetype」(拡張子なし) 固定です。ファイルの中身は、以下の文字列のみです (前後に空白や改行などを入れてはいけません)。

application/epub+zip

コンテナファイル (container.xml) を作る

META-INF フォルダ内に、container.xml というファイル名の XML ファイルを置きます。フォルダ名およびファイル名は EPUB の仕様で固定となっています。ファイルの中身は、以下のようになります。

<?xml version="1.0"?>
<container version="1.0" xmlns="urn:oasis:names:tc:opendocument:xmlns:container">
    <rootfiles>
        <rootfile full-path="item/standard.opf" media-type="application/oebps-package+xml" />
    </rootfiles>
</container>

<rootfile> 要素の full-path 属性で、パッケージ文書 (.opf ファイル) を指定します。上記の例では item フォルダの中の standard.opf を指していますが、パッケージ文書のフォルダ名とファイル名は EPUB の仕様では任意です。

com.apple.ibooks.display-options.xml ファイルを作る

META-INF フォルダ内に、com.apple.ibooks.display-options.xml というファイル名の XML ファイルを置きます。ファイルの中身は、以下のとおりです。

<?xml version="1.0" encoding="UTF-8"?>

<display_options>
    <platform name="*">
        <option name="specified-fonts">true</option>
    </platform>
</display_options>

XHTML を作る

書籍のコンテンツ本体として、XHTML ファイルを作成します。ファイルの中身は、以下のようになります。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>

<html xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml"  xmlns:epub="http://www.idpf.org/2007/ops">

<head>
    <meta charset="UTF-8" />
    <title>{タイトル}</title>
    <link rel="stylesheet" href="{CSS ファイルへのパス}" type="text/css" />
</head>

<body>

{コンテンツ本文}

</body>

</html>

「Form Design Patterns」電子書籍版では、章ごとに1つの XHTML ファイルを作成しました。そのため <title> 要素には、章タイトルを入れています。

<body> 要素内のコンテンツ本文は、ウェブコンテンツを制作するのと同じように、HTML 要素のセマンティクスに則って、見出しやリンク、箇条書き、テーブル、画像などを、アクセシブルにマークアップします。言うまでもありませんが、画像の <img> 要素では代替テキスト (alt 属性) を適切に記述します。その他、ウェブコンテンツと同様、WCAG (日本語訳) の各達成基準を満たすように実装します。

なお、ウェブコンテンツではあまり見られない電子書籍ならではの機能として、脚注があります。脚注の実装は、リンク元を以下のように記述し ;

<sup><a href="#footnote1-1" id="footnoteref1-1" epub:type="noteref">※脚注1</a></sup>

リンク先 (脚注内容) を章末などに以下のように列挙する形で記述します。

<ol>

    <li><span id="footnote1-1" epub:type="footnote">{脚注の文章}</span><br /><a href="#footnoteref1-1">[→ 本文へ戻る]</a></li>

    :

</ol>

リンク元の <a> 要素に epub:type="noteref" 属性を記述することで、リーディングシステムによりますが、リンク先の脚注内容 (epub:type="footnote" で括られた範囲) をその場でポップアップ表示することができます。リンク先の脚注内容の実装については、Apple Books アセットガイドや Kindle パブリッシング ガイドラインを見ると、epub:type="footnote" を <aside> 要素に記述するように書かれていますが、そうすると脚注内容はポップアップ表示でしか見ることができなくなり、章末などに列挙した脚注内容は非表示になってしまいます。このため「Form Design Patterns」電子書籍版では <aside> 要素を用いずに、上述のようにリスト項目の中に <span> 要素を置き、そこに epub:type="footnote" 属性を記載する形を採っています。

CSS を作る

ウェブコンテンツを制作するのと同じ要領で、CSS ファイルを作成します。アクセシビリティの観点から、WCAG の各達成基準を満たしつつ、基本的には固定レイアウトではなくリフロー、つまりリーディングシステムの画面サイズやユーザーの任意の文字サイズ変更などに合わせて、流動的にレイアウトされるスタイルを採用します。

EPUB では、ユーザーがリーディングシステムの標準機能を用いてフォントの種類、文字サイズ、行間、背景色などを任意に変更できるのが通例なので、CSS で細かくスタイルを制御してもあまり意味がないかもしれません。また Kindle Paperwhite などモノクロ表示のリーディングシステムもあり、CSS で色を指定してもそのとおり見られない人が相当数いることも理解しておくとよいでしょう。リーディングシステムによっては CSS で設定したスタイルが忠実に反映されないケースも少なくないので、割り切ってシンプルなスタイリングにするのも一考ですし、そのほうが無難かと思います。

「Form Design Patterns」電子書籍版では、CSS で色の指定は一切せず、基本的な文字サイズ、行送り、要素間のマージンを相対値で指定したり、ごく一部の箇所で font-weight:bold; を指定したり、引用や囲み線の太さや線種 (実線か点線か) を指定したり、といった程度に留めています。font-family の指定も最低限の総称ファミリー名のみです。なお、アクセシビリティの観点から一応念のため、以下のスタイリングを明示的に記述しています。

ただしリーディングシステムのレンダリングで、これらの記述がデフォルトで無視されてしまうこともあり、やや残念に思うところではあります (とは言え、大抵のリーディングシステムではリンクに下線は付きますし、ユーザーの任意の設定変更で「両端揃え」でなくすることもできます)。

ナビゲーション文書を作る

ナビゲーション文書とは、目次を記述したファイルです。書籍の中に (表紙の直後などに) 含まれる目次ページとは別の、リーディングシステムの目次表示機能によって開くことができる目次です。

「Form Design Patterns」電子書籍版では、「電書協 EPUB 3 制作ガイド」に倣って item フォルダ直下に navigation-document.xhtml というファイル名でナビゲーション文書を置いています。

以下のように、目次全体を <nav epub:type="toc"> で囲み、順序付きリスト (<ol>) でマークアップします。章の下位階層 (節や項) も目次に含める場合は、リストを入れ子にします。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>

<html xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml"  xmlns:epub="http://www.idpf.org/2007/ops">

<head>
    <meta charset="UTF-8" />
    <title>目次</title>
</head>

<body>

    <nav epub:type="toc" id="toc">

    <h1>目次</h1>

    <ol>

        <li><a href="xhtml/chapter-1.xhtml">第1章：●●●</a>
            <ol>
                <li><a href="xhtml/chapter-1.xhtml#section1-1">●●●</a></li>
                <li><a href="xhtml/chapter-1.xhtml#section1-2">●●●</a></li>
            </ol>
        </li>

        <li><a href="xhtml/chapter-2.xhtml">第2章：●●●</a></li>

        <li><a href="xhtml/chapter-3.xhtml">第3章：●●●</a></li>

        :

    </ol>

    </nav>

</body>
</html>

パッケージ文書を作る

上述のコンテナファイル (container.xml) で、<rootfile> 要素の full-path 属性で指定したパスに、パッケージ文書 (.opf ファイル) を置きます。「Form Design Patterns」電子書籍版では、「電書協 EPUB 3 制作ガイド」に倣って item フォルダ直下に standard.opf というファイル名でパッケージ文書を置いています。

ファイルの中身は XML で、以下のように作成します。(ごく一部の抜粋です。実際には、これ以外の多くの情報が含まれます。)

<?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="ebpaj: http://www.ebpaj.jp/"
>

<metadata xmlns:dc="http://purl.org/dc/elements/1.1/">

    <dc:title id="title">{書籍名}</dc:title>
    <dc:creator id="creator01" xml:lang="ja">{著者名}</dc:creator>
    <dc:publisher id="publisher" xml:lang="ja">{出版社名}</dc:publisher>
    <dc:language>ja</dc:language>
    <dc:identifier id="unique-id">urn:uuid:{UUID の文字列}</dc:identifier>

    <!-- accessibility metadata -->
    <meta property="schema:accessMode">textual</meta>
    <meta property="schema:accessMode">visual</meta>
    <meta property="schema:accessibilityFeature">alternativeText</meta>
    <meta property="schema:accessibilityHazard">none</meta>
    <meta property="schema:accessModeSufficient">textual,visual</meta>
    <meta property="schema:accessModeSufficient">textual</meta>

</metadata>

<manifest>

    <!-- navigation -->
    <item media-type="application/xhtml+xml" id="toc" href="navigation-document.xhtml" properties="nav" />

    <!-- style -->
    <item media-type="text/css" id="book-style" href="style/book.css" />

    <!-- image -->
    <item media-type="image/png" id="cover-image" href="image/cover.png" properties="cover-image" />

    <item media-type="image/png" id="fig1-1" href="image/1-1.png" />
    <item media-type="image/png" id="fig1-2" href="image/1-2.png" />
    <item media-type="image/png" id="fig1-3" href="image/1-3.png" />
    :

    <!-- xhtml -->
    <item media-type="application/xhtml+xml" id="cover" href="xhtml/cover.xhtml" />

    <item media-type="application/xhtml+xml" id="table-of-content" href="xhtml/table-of-content.xhtml" />
    <item media-type="application/xhtml+xml" id="chapter-1" href="xhtml/chapter-1.xhtml" />
    <item media-type="application/xhtml+xml" id="chapter-2" href="xhtml/chapter-2.xhtml" />
    <item media-type="application/xhtml+xml" id="chapter-3" href="xhtml/chapter-3.xhtml" />
    :

</manifest>

<spine page-progression-direction="ltr">

    <itemref linear="yes" idref="cover" />
    <itemref linear="yes" idref="table-of-content" />
    <itemref linear="yes" idref="chapter-1" />
    <itemref linear="yes" idref="chapter-2" />
    <itemref linear="yes" idref="chapter-3" />
    :

</spine>

</package>

<metadata> 要素には、書籍名、著者名、出版社名、言語、といった各種のメタデータを記述します。また、<dc:identifier id="unique-id"> 要素で、EPUB パッケージのユニークな ID (UUID : Universally Unique Identifier) を入れる必要があります。ターミナルで uuidgen コマンドを実行するなどして生成した文字列を、記述します。

<metadata> 要素にはまた、アクセシビリティメタデータ (accessibility metadata) も記述します。これは、障害当事者が自分の読書環境に合った電子書籍を見つけやすくするための手がかりとして、EPUB Accessibility 1.1 (W3C 勧告) で規定されているものです。同勧告の 2.2 Package metadata によると、以下のメタデータが必須または推奨となっています。

<manifest> 要素には、ナビゲーション文書および各種リソース (XHTML、CSS、画像ファイル) を抜けもれなく列挙して記述します。

<spine> 要素には、XHTML ファイル (表紙ページ、目次ページ、各章のページ、巻末の奥付など) の並び順を記述します。また、<spine> 要素内の page-progression-direction 属性で、ページの読み進めかたを指定します (横書きの書籍であれば左から右に読み進めるので、left to right という意味で属性値は ltr となります)。

EPUB ファイル (.epub) を生成する

ここまで作成した各ファイルを、ZIP でまとめ、EPUB ファイル (.epub) を生成します。

ターミナルの cd コマンドで、EPUB を構成するファイル一式を格納したルートディレクトリに移動してから、以下を実行します。ルートディレクトリの外に ●●●.epub というファイル名で、EPUB ファイルを生成します。

まず、mimetype だけを、無圧縮で ZIP に入れます。

$ zip -0 -X ../●●●.epub mimetype

続いて、mimetype を除外した残りのファイルをすべて ZIP に入れます。Mac で作業する場合、念のため "*.DS_Store" も除外しておくとよいでしょう。

$ zip -r ../●●●.epub * -x mimetype -x "*.DS_Store"

これで、ついに EPUB ファイル (.epub) ができあがりました。

制作した EPUB の検証

チェックツールで検証する

EPUBCheck

EPUBファイル (.epub) が、仕様に則って適切に制作されているかを確認します。W3C が公開している EPUBCheck というツールを使用します。Java Runtime Environment (JRE) が必要なので事前にインストールしたうえで、EPUBCheck をダウンロードします。

EPUBCheck をダウンロードすると (本記事執筆時点での公式の最新バージョンは 5.0.0 なので)「epubcheck-5.0.0」というフォルダの中に epubcheck.jar というファイルがあります。ターミナルの cd コマンドで、検証する EPUB ファイル (.epub) のあるディレクトリに移動してから、以下のように実行します。

$ java -jar ../../epubcheck-5.0.0/epubcheck.jar ●●●.epub

問題がなければ、以下のようなメッセージが出力されます。

EPUB version 3.3 のルールを使って検証します.
エラーも警告も検出されませんでした.
メッセージ: 0 件の致命的エラー / 0 件のエラー / 0 件の警告 / 0 件の情報

EPUBCheck 完了

Ace by DAISY

EPUBCheck では、パッケージ文書 (.opf ファイル) にアクセシビリティメタデータが書かれていなくても、エラーとして検出されません。DAISY コンソーシアムが公開している Ace by DAISY というツールを使用することで、アクセシビリティメタデータが適切に入っているかをチェックすることができます。

なお Ace by DAISY では、アクセシビリティメタデータのうち、accessMode (必須)、accessibilityFeature (必須)、accessibilityHazard (必須)、accessibilitySummary (推奨) が欠落していると「serious」な問題として検出され、accessModeSufficient (推奨) が欠落していると「moderate」な問題として検出されます。accessibilitySummary については、EPUB Accessibility 1.1 では必須とされていないこと、また特記事項がなければ省略可であることから、Ace by DAISY でエラー (serious) が出ても非対応で問題ないという判断もありかと思います。

リーディングシステムで表示・動作確認をする

各種リーディングシステムでの検証

EPUB ファイル (.epub) を、実際にリーディングシステムで開いてみて、問題なく表示や動作ができるかを確認します。

「Form Design Patterns」電子書籍版の制作にあたっては、以下のリーディングシステムを用いてチェックしました。このうち Kindle Previewer は、正確にはリーディングシステムではありませんが、制作した EPUB を Kindle 用に変換処理したときに、Kindle のアプリや端末でどう表示されるかをプレビューできる、Amazon の公式ツールです。

「Form Design Patterns」電子書籍版ではまた、Kindle Paperwhite (Send to Kindle) や Kobo といった電子書籍専用端末でも、関係者のご協力をいただいて検証しました。

スクリーンリーダーでの検証

リーディングシステムを用いた検証では、アクセシビリティの観点から、スクリーンリーダー (VoiceOver、TalkBack、NVDA、など) を併用しての動作検証も併せて行いたいところです。ただ実際問題として、記事「EPUB リーディングシステムをスクリーンリーダーと併用しての雑感」で書いたように、リーディングシステムとスクリーンリーダーとの併用はまだまだ動作が熟れていない印象で、とりあえず Thorium Reader + NVDA でテストして問題がなければ及第点とするのが妥当と言えそうです。スクリーンリーダーを併用しない場合のキーボード操作についても、Thorium Reader でテストして問題なければ及第点としてよいかと思います。

以上です。EPUB のファイル構成から、制作方法、検証方法に至るまで、ひととおり盛り込んだので長い記事になってしまいましたが、「電子書籍はこうやって作るんだ」という具体的なイメージを持っていただけるように、意識してみました。この記事が、アクセシビリティに優れた EPUB 出版物を作るうえでの一助になれば、嬉しく思います。

関連記事