Tech Do | メディアドゥの技術ブログ　

株式会社メディアドゥのエンジニアによるブログです。

やさしいEPUB入門

開発

メディアドゥでは、エンジニア有志によって執筆された【Tech Do Book】という合同誌を発行しています。
本日はその中から、Tech Do Book vol.1 【2章 やさしいEPUB入門】を紹介します。

はじめに

「電子書籍業界にいるにも関わらず、EPUBについて知らないのは、本格的にやばいのでは？🤔」 そう強く感じるようになったのは、メディアドゥがW3Cに加入してからです。 W3CとEPUBのつながりについては後述しますが、国際標準規格となっているEPUBについて知ることで、 会社や、電子書籍業界の動きをより面白く感じられるのではないかと考えています。 しかし、インターネットで情報を調べても情報は少なく、欲しい情報がなかなか得られません。 今回は、メディアドゥに在籍しているというメリットを活かし、今までのEPUBの歴史や最新の情報について纏めてみました。

電子書籍とは

まず初めに、電子書籍について触れておきたいと思います。 電子書籍とは、漫画や小説、文庫本などの出版物をデジタル化し、電子機器のディスプレイ上で読めるようにしたものを指します。 ebookとも呼ばれ、音声付き絵本なども存在します。

電子書籍の歴史

国内初の電子書籍は、1985年に三修社が出版した「最新科学技術用語辞典」だと言われています。 当時はインターネットの普及はあまり進んでおらず、CD-ROMを使って膨大なデータを配布していました。 「電子書籍」というと、オンライン上のサービスというイメージがありますが、もともとはオフラインが主流だったのです。 インターネットの普及とともに、パソコンや携帯電話を用いたオンラインでの電子書籍閲覧が定着していきます。 2007年にAmazonがアメリカで「Kindle」を発売、2010年にはAppleが日本で「iPad」を発売したことなどから、 日本企業も電子書籍リーダーやタブレット端末などの発売が開始しました。

さまざまな電子書籍フォーマット

多数のサイトで電子書籍が販売され、さまざまな端末で読めるようになり、 電子書籍業界が盛り上がる一方、データフォーマットの多様化も進みました。

電⼦書籍の表⽰⽅法として、「リフロー型」「フィックス型」という区分けが存在します *1。
さらにこの 2 つのいいとこ取りした「アドバンスド・ハイブリット・レイアウト型」というものも存在するようです。

リフロー型
　画⾯サイズに応じて、テキストを最適なレイアウトに⾃動的に組み替えて表⽰するため、⼩説やテキスト系の読み物で利⽤されます。
フィックス型
　固定したレイアウトでコンテンツ表⽰を⾏うもので、コミックや雑誌等でよく使⽤されます。

また、表⽰⽅法以外にも、オープンフォーマットか否かという区分けがあります。
実際に、新たな電⼦書籍フォーマットを策定した企業がプロプライエタリ・フォーマットと*2して扱うケースも多く存在します。たとえば、ボイジャー社の「.book（ドットブック）」や、Amazon 社の「AZW」等がこれに相当します。プロプライエタリ・フォーマットはオープン・フォーマットに⽐べ、顧客の囲い込みや DRM の管理がしやすいというメリットがある⼀⽅、汎⽤性がなく、市場全体の成⻑は期待できないというデメリットも持ち合わせています。PDF や HTML などの汎⽤性の⾼いフォーマットを⽤いれば、このような問題は解決しますが、電⼦書籍を読むという観点では機能的に⼗分と⾔い切れません。
そこで注⽬されたのがアメリカで開発された「EPUB（イーパブ）」です。

EPUBとは

"Electronic PUBlication"の略で、電子書籍の閲覧に特化したフォーマットです。 2019年2月現在の最新バーションは3.1で、その機能は多岐に渡ります。

EPUBの仕組み

最大の特徴は、HTML、CSSなどを利用してデータ制作が行えることです。 EPUBの仕様は、基本的にWeb標準であるHTMLやCSSをベースにしているため Canvasで描いたグラフィックを挿入したり、CSS3のアニメーションを入れるなども可能です。 たとえばリスト 2.1 のようにHTML データを記載すると、図 2.1 のように EPUB 形式で出⼒できます。

▼リスト 2.1 HTML 記述例

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  <head>
    <title>やさしいEPUB入門</title>
    <link type="text/css" rel="stylesheet" media="all" href="beginner.css" />
  </head>
  <body>
    <h3>はじめに</h3>
    <p>この書籍は株式会社メディアドゥが制作した技術情報誌です。<br>弊社では、社内勉強会やハンズオンイベントを開催したり、テックブログを始めたりと、アウトプット活動を積極的に行なっています。この活動もその一環として始めました。</p>
    <ol>
      <li><a href="https://techdo.connpass.com">Goハンズオン</a></li>
      <li><a href="https://techdo.mediado.jp">Media Do Tech Do Blog</a></li>
    </ol>
  </body>
</html>

また、EPUB形式のファイルの拡張子をZIPに変えると、中身のデータを見ることができます。
例えばEPUB3では、図 2.2*3のようにファイルが構成されています*4。

mimetype
このZIPアーカイブがEPUBの文書ファイルであることを表します。
中には「application/epub+zip」の1行のみ記載されています。

META-INF
出版物のメタデータを収めるフォルダです。
package.opfのファイルパスを記載した「container.xml」の配置が必須です。 EPUBアーカイブのルート直下に配置します。

OEBPS
使⽤するコンテンツそのもの（HTML、画像など）を配置するフォルダーです。
このフォルダーの作成は任意で、名前も⾃由に決めることができます。
⼀般的には「OEBPS*5」と表すことが多いようです。
なお、EPUB3 ではこのフォルダーの作成を推奨しています。
また、このフォルダーにはコンテンツの構造を定義したファイルも配置します。
たとえば toc.ncx には⽬次が設定され、package.opf には出版物のタイトルや著者などのメタデータや、ドキュメントファイルの読み順などが記述されています。

EPUBの歴史

EPUBは、2007年9月にアメリカの電子出版業界の国際標準化団体であるIDPF(International Digital Publishing Forum)により発表されました。 IDPFはもともと「Open eBook Forum」という名前の団体で電子書籍のための規格「Open eBook PublicationStructure(OeBPS)」を1999年に公開しています。
IDPFはこのOeBPSを下記のように分け、EPUBを作成しました。

  • Open Publication Structure(OPS) : コンテンツ構造の仕様
  • Open Packaging Format(OPF)：各ファイルをまとめるための仕様
  • OeBPS Container Format(OCF)：各ファイルをアーカイブ化する仕様

2010年6月にはEPUB2.0がドラフト規格として公開され、2011年10月にIDPFはEPUB3を公式規格としました。 このEPUB3が発表されたことにより、日本でのEPUB普及が進みました。 その理由はEPUB3で追加された新たな機能が、日本語の書籍には欠かせない仕様をカバーしていたからです。 代表的な例が下記の4つです。

  1. 縦読み (文字を縦書きで表示できる)
  2. ルビ (ふりがなを振ることができる)
  3. 禁則処理 (句読点を文章の行頭に表示させない等のルールを適用することができる)
  4. 縦中横 (縦書きの文章の中で、数字などを横書きで表記することができる)

日本語コンテンツに対応できるEPUB3が発表されたことで、国内電子書店だけでなく、 日本で電子書籍販売を開始した海外系電子書店もEPUB3のリーダを多く採用しました。 このことから、それまで主流としていた電子書籍フォーマットから、EPUBへと流れが変わりました。 そして現在、EPUBは電子書籍フォーマットとして世間に定着しています。

そして2017年2月、IDPFはW3C(World Wide Web Consortium)に統合されました。 W3Cは、HTMLやCSS、SVG、XMLなどのウェブ技術の根幹を策定する世界的な標準化組織です。 EPUBがこれらのウェブ技術を利用していることを考えると、これらの統合はとても納得できます。 未来の電子書籍フォーマットをどう発展させていくかを積極的に考え、今後も出版業界を盛り上げていくというメッセージを発信するために、メディアドゥもW3Cに加盟したのですね。

EPUBのこれから

EPUBはこれから、どのように変わるのでしょうか？ ドラフト版として公開されているEPUB3.2仕様書を確認しても、メタタグの細かい変更などはあるものの EPUB2からEPUB3に移行した時のようなインパクトは無いようです。 (メジャーバージョンの変更と比べてもあまり意味はありませんが..)

しかし、現状のEPUBで満足できているかと言うと、そうでもなさそうです。 電子書籍業界では、下記のような問題点が挙げられています*6。

  • EPUBテキスト読み上げでうまくいかない・・・（１）
    ー ルビと親文字を両方読んでしまう
    ー 漢字を読み間違えることがある

  • EPUBマンガは1ページの画像であり、テキストは含まれていない・・・（２）
    ーアクセシビリティに欠ける

（1）はEPUB3の問題点というより、電子書籍リーダーの問題点と言えるでしょう。 また、（２）の問題に対応するには、EPUB3もしくはウェブ技術の仕様改変が必要となるだけでなく、 現存するマンガデータを再構築する必要もあり、運用面でもハードと言えます。

EPUB3にて、以前より快適に読めるようになった電子書籍ですが、理想の電子書籍生活の実現までは長い年月がかかりそうです。

まとめ

今回の内容をまとめると、下記の通りとなります。

  • 日本で最初の電子書籍は「辞典」
  • EPUBは「電子書籍フォーマットの国際標準規格」としてIDPFが策定したオープン・フォーマットである
  • EPUBはHTML等のウェブ技術から作られており、拡張子をzipファイルにすることで中身を簡単に確認できる
  • EPUB3.0より日本語独特の仕様も取り入れたことで、日本でも多くの人や企業に使われるようになった
  • IDPFはW3Cに統合されたため、メディアドゥもW3Cに参加した

おわりに

調べる中で初めて知りましたが、Macintoshのデフォルトツール「Pages」には、書いた文章をEPUB形式で書き出せる機能があるようです。
なおかつ、リフロー型と固定レイアウト型を選択できます。
また、Macintoshには同じくデフォルトツール「ブック」があり、EPUB形式の書籍を閲覧することも可能です。
元々Apple Books(電子書籍アプリケーション)を提供するなど、Apple自身が電子書籍業界に積極的だということもあるかもしれませんが、 もしかすると、電子書籍やEPUBが身近になったということの表れでもあるかもしれません。
今回は EPUB に関してまとめましたが、途中でご紹介したフォーマットにも、それぞれおもしろいストーリーがあるのではと感じています。ぜひ機会があれば、他フォーマットの歴史や、電⼦書籍に関する世界的な動きについても調べてみたいなと考えています。

参考文献


今回はTech Do Book の紹介でした。現在vol.5まで発行されている合同誌には、エンジニア組織が選択している技術、Go言語に関する内容、エンジニア採用の話など様々なコンテンツが入っています。興味のある方は、こちらのリンクから無料ダウンロードいただけます！booth.pm

*1:EPUB(http://www.jepa.or.jp/ebookpedia/201507_2529/)

*2: 仕様・規格・構造などが公開されていないフォーマット⇔オープン・フォーマット

*3: 図中のチェックマークは必須ファイル、（）記載は作成任意であるファイルを⽰しています。

*4:EPUB3 仕様書および関連⽂書の⽇本語訳（http://imagedrive.github.io/spec/#itemSpecEPUB32）

*5: この後の章（EPUB の歴史）にて出てくる「Open eBook PublicationStructure」に由来しているようです。

*6: 電流協セミナー EPUB3.1 関連の状況について（https://www.slideshare.net/MURATAMakoto/epub-31- 71281412）

mdtechdo

関連記事

Media Doではエンジニアを募集しています。
興味のある方はこちらからご応募ください！

メディアドゥ採用サイトリンクバナー

© Copyright MEDIA DO Co., Ltd.

* * * 例：親要素が`data-label`属性を持たないが、言語が指定されているので、ラベルは`javascript` * *
* ```javascript * const message = 'Hello World' * console.log(message) * ``` *
* * * 例：親要素が`data-label`属性を持たず、言語も指定されていないので、ラベルは表示されない * *
* ``` * const message = 'Hello World' * console.log(message) * ``` *
*/ function addLabelToCodeBlocks () { Array.from(document.querySelectorAll('.entry-content pre.code')).forEach(codeElement => { const label = codeElement.parentElement.dataset.label || codeElement.dataset.lang if (label) { codeElement.dataset.label = label } }) } /** * はてなIDに、著者ページへのリンクを追加します。 */ function addLinkToHatenaIds () { Array.from(document.querySelectorAll('.author .fn')).forEach(authorNameElement => { const hatenaId = authorNameElement.dataset.userName const url = `${location.origin}/archive/author/${hatenaId}` const hatenaIdElement = authorNameElement.querySelector('.user-name-hatena-id') || authorNameElement hatenaIdElement.innerHTML = `${hatenaIdElement.innerHTML}` }) } })()