解凍したデータの内部構成を軽く確認し、その中の拡張子「.opf」がついたファイル、パッケージドキュメントに注目してみました。

パッケージドキュメントはEPUBの書籍としての情報を定義するためのファイルで、このファイルがなければ、EPUBファイルはHTMLファイルの寄せ集めという印象が強くなってしまいます。

さて、今回はこのパッケージドキュメントの中を少し見てみようと思います。

■パッケージドキュメント内のタグ構成
パッケージドキュメントはテキストベースのXMLファイルなので、Windowsの「メモ帳」やMacの「テキストエディット」といった一般的なテキストエディターで開けます。

次の画像は以前でんでんコンバーターで作成した「おおかみと七ひきのこどもやぎ」のEPUBファイルに含まれるパッケージドキュメント「content.opf」をテキストエディターで開き、インデントを追加してドキュメントの入れ子構造を分かりやすくしたものです。

XMLはHTMLの親戚のような言語なので、書式はHTMLとよく似ていますが、そこで使われているタグが独自のものとなっています。以下、大まかな構成を紹介します。

パッケージドキュメントは全体がpackageタグで囲まれていて、その中に3つの必須要素が含まれます。

1つめは「metadata要素」です。metadata要素では書籍タイトル、著者名、出版社、出版日、更新日、使用言語、権利表記、概要など、書籍に関するさまざまな情報を定義できます。

また、書籍固有のIDも定義する必要があります。EPUB仕様で必須の項目とされているものは、書籍ID、書籍タイトル、使用言語、更新日となっています。

それらを定義するタグは次の通りです。

・書籍ID：dc:identifierタグ
・書籍タイトル：dc:titleタグ
・使用言語：dc:languageタグ
・更新日：metaタグ＋property属性の値「dcterms:modified」

固定レイアウト型の電子書籍を作成する場合などは、その書籍が固定レイアウト型であることを示す情報や、関連情報もmetadata要素内で指定します。固定レイアウト関連も、機会があれば紹介したいところです。

2つめは「manifest要素」です。ここでは、コンテンツを構成するファイル（XHTMLファイル、画像ファイル、CSSファイルなど）を「item要素」でリストアップします。

item要素ではそのファイルのメディアタイプ（MIMEタイプ）やEPUBファイル内でのIDも指定します。特殊な用途を持ったファイルに「properties属性」で用途を指定します。例えば目次用のファイルはproperties属性の値に「nav」を指定します。

3つめは「spine要素」です。ここではコンテンツ本編を構成するXHTMLファイルの表示順を「itemref要素」で指定します。

itemref要素ではidref属性でXHTMLファイルを指定しますが、ファイル名ではなくmanifest要素内のitem要素で指定したidを使います。

その他、spine要素のpage-progression-direction属性でページの開き方向も指定できます。

パッケージドキュメントで使われるXMLタグはIDPFが策定したEPUB仕様で決められていますが、HTMLと比べて日本語の資料が少なくとっつきにくい状況です。

シンプルなテキストベースの電子書籍をでんでんコンバーターなどのツールを使って作成する場合には、そのツールが生成したパッケージドキュメントを直接編集することはほとんどないでしょう。

それでも、パッケージドキュメントの概要は知っておくに越したことはありません。また、制作ツールがあまり無い固定レイアウト型の電子書籍を制作する場合には、パッケージドキュメントを直接編集する機会は少なからず出てくるでしょう。

■最後に
この電子書籍ブログは隔週で掲載していますが、私の記憶では次回から2年目に入ります。

より電子書籍のラインナップが増加すると共に、電子書籍ストアの淘汰も進んでくることでしょう。技術的な内容だけでなく情報系のお話しも扱っていきたいと考えています。

下記セミナーに登壇させていただきます。ぜひご参加ください！

『電子書籍「もうひとつの“イプシロン・ザ・ロケット”」企画・制作・リリースまでの一部始終〜ソニー・ミュージックコミュニケーションズ初の電子出版の軌跡〜』

■著者プロフィール
林　拓也（はやし　たくや）
テクニカルライター／トレーニングインストラクター／オーサリングエンジニア
Twitter：@HapHands
Facebook：https://www.facebook.com/takuya.hayashi

■ITライフハック
■ITライフハック Twitter
■ITライフハック Facebook

ということで、EPUB3ファイルの拡張子は「.epub」ですが、「.zip」に変更することで一般的なzipツールで解凍できます。

ただし、解凍したデータを再度EPUB化する場合、一般的なzipツールでzip化した後に拡張子を「.epub」に変更しても適正なEPUBファイルにはなりません。これはEPUB3のzip圧縮が、少しローカルルールを含んだものであるためです。

今回は解凍して中身を確認できればよいので、再EPUB化の処理については割愛します。

サンプルとして以前でんでんエディター＆でんでんコンバーターの紹介時に作成した「おおかみと七ひきのこどもやぎ」のEPUBを使います。

以下のサンプルデータをダウンロードし、解凍すると「おおかみと七ひきのこどもやぎ.epub」が入っています。

・［サンプルデータダウンロード］

■EPUBファイルの中身をチェック
おおかみと七ひきのこどもやぎ.epubの拡張子を「.zip」に変更して解凍すると、内部の第1階層には「mimetype」というファイルと「META-INF」フォルダ、「OEBPS」フォルダという2つのフォルダがあります。

2つのフォルダの中身は次の図のようになっています。

「META-INF」フォルダとその中にある「container.xml」はどちらも名称がEPUB仕様で決められていて、異なる名称にしてはいけません。

「META-INF」フォルダ内のデータはシステム上で利用される、裏方的なものです。「OEBPS」フォルダとその中にあるファイルは、基本的に制作者が任意の名称をつけることができます。

「OEBPS」フォルダ内のデータは、電子書籍のコンテンツ本編を構成するものや、書誌情報的なものとなっています。

今回はこの中の「content.opf」に注目したいと思います。

■パッケージドキュメントについて
この「.opf」という拡張子がついたファイルは、パッケージドキュメントと呼ばれ、EPUBを書籍たらしめているファイルです。

EPUBはコンテンツデータをXHTMLファイルで作成します。EPUB内のXHTMLファイルは、多くの場合1つのXHTMLファイルにまとめられるのではなく、章ごとなど区切りのよいところで適宜分割され、複数のXHTMLファイルで構成されます。

これらコンテンツ用のXHTMLファイル（と画像やCSSなどの関連ファイル）をパッケージ化するだけでは、電子書籍としては不十分です。そこには書籍としての情報が無いからです。

パッケージドキュメントには、様々な「書籍としての情報」を定義できます。主要なものとしては以下が挙げられます。

・書籍ID
・書籍タイトル
・著者名
・使用言語
・発行日
・改定日
・著作権情報
・書籍概要
・出版社名

これらの情報は、EPUB仕様で定められたXMLタグで定義します。

コンテンツ用のXHTMLファイルは、Web制作で使用されるHTMLタグを使うので、情報も豊富で比較的スムーズに制作できますが、パッケージドキュメントはEPUB仕様を理解して独自のXMLタグを使わなければならず、一筋縄ではいきません。

また、書誌情報的な内容だけでなく、固定レイアウト型のEPUBを作る場合に固定レイアウトに関する情報もパッケージドキュメントに定義します。

ということで、このパッケージドキュメント、重要な割にとっつきにくくジレンマを感じるファイルです。

基本的には、EPUB制作アプリやツールが適切なものを制作してくれますが、たまに直接編集するケースも出てきます。内部構成を少し知っておくと役立つことがあるかもしれません。

次回は、パッケージドキュメントの中身も少し覗いてみようと思います。

■最後に
少し告知をさせていただきます。私が制作に関わったイプシロン・ロケットの電子書籍「もうひとつの”イプシロン・ザ・ロケット”」がiBooks Storeでリリースされたことを以前告知させていただきました。

この電子写真集「もうひとつの“イプシロン・ザ・ロケット”」の制作秘話（というほどのことがあるかは分かりませんが）を披露させていただくセミナーが開催されることになりました。

電子書籍「もうひとつの“イプシロン・ザ・ロケット”」企画・制作・リリースまでの一部始終

・～ソニー・ミュージックコミュニケーションズ初の電子出版の軌跡～

日時は2014年5月30日（金）15:00～17:30。登壇者はディレクター兼デザイナーの中島さんと、オーサリング担当の私です。

この書籍タイトル「もうひとつの“イプシロン・ザ・ロケット”」の「もうひとつ」というフレーズは、印刷版の写真集「イプシロン・ザ・ロケット ―新型固体燃料ロケット、誕生の瞬間」を意識したものです。

「もうひとつの～」は印刷版を単に電子化したものではなく、最初からベツモノとして企画されたものです。それぞれがどのようなプランに基づいて制作されたのか、どのような問題や苦労があったのか、などできるだけお話したいと思っています。よろしければぜひお越しください。

■著者プロフィール
林　拓也（はやし　たくや）
テクニカルライター／トレーニングインストラクター／オーサリングエンジニア
Twitter：@HapHands
Facebook：https://www.facebook.com/takuya.hayashi

■ITライフハック
■ITライフハック Twitter
■ITライフハック Facebook

page2014では関連機器、ソフト、サービス等の展示の他、有料・無料のセミナーなどが開催されています。

今回、無料セミナーを2つ受講してきたので、その辺りについて少し紹介させていただきます。

受講したのは境 祐司（さかいゆうじ）氏の『HTML5でつくる「雑誌」と電子書籍ストアに頼らない直販モデル 〜必要なツール・雑誌の作り方・ビジネスモデルの事例紹介〜』、樋口泰行（ひぐちやすゆき）氏の『Adobe DPSとInDesignで作るiPadインタラクティブ・カタログ』です。内容的に不都合、間違いなどございましたらご指摘いただけると幸いです。

■境さんのHTML5出版セミナー
境さんは、早くから電子書籍・電子出版に取り組んでいらっしゃるデザイナーさんです。海外の情報なども広く収集され実験的な取り組みも積極的に行われ、それをセミナー等で惜しみなく披露してくださっています。私自身も境さんのセミナーにはなるべく参加するようにし、いつも勉強させていただいています。

さて、境さんのセミナーは、電子書籍を既存の電子書店で販売するだけでなく、Webでも発信し個人で課金する形を作る、という形態についての考察がテーマでした。

大まかなフローとしては、以下のような感じです。

1.Webサイトで電子出版の対象となる記事を執筆・連載し発信する。
2.記事が溜まったら電子書籍化して既存の電子書店で販売する。
3.個人でも販売する。

個人で販売する際の決済方法は、データ販売サービス「DL-MARKET」を使っていらっしゃいました。近年Paypalなどさまざまな決済サービスがありますが、決済だけでなくコンテンツデータのやりとりも考えると、このようなサービスを利用するのは現実的な方法だと思います。

セミナーの表題にある『HTML5でつくる「雑誌」』というのは、1のWebサイトをマルチデバイス対応（CSS3 Media Queriesを利用）にして、スマホやタブレットで見たときに出版物のような納まりのよいレイアウトに仕上げる、といった感じかと思います。

境さんは既にご自身で「eBook Strategy Magazine」というサイトでこのモデルを実践していらっしゃいます。

こちらのサイトではAdobe社のWebサイト制作ツール「Muse」のeBook Strategy Magazine学習ビデオを販売していらっしゃいます。

ここまで実行するのは大変なことですが、高価な機材やアプリなどは使用せず、コスト的なリスクをなるべく抑えているというのが現実的かつ魅力的なところだと言えます。

■樋口さんのADPSセミナー
樋口さんはInDesignで制作するAdobe社の電子出版ソリューション「eBook Strategy Magazine Adobe Digital Publishing Suite」（以下「ADPS」と記述します）の第一人者で同ソリューションの書籍執筆やセミナーを行っていらっしゃいます。

ADPSはプロユースのページレイアウトソフトInDesignを使って作成するソリューションです。

登場はCS5のときで、主に印刷・出版業界の法人をターゲットとしたサービスでした。私は当時EPUB書き出しの機能をチェックしたかったので、InDesignのパッケージを購入しましたが、InDesignは個人出版をテーマとした場合敷居が高すぎるように感じていました。

しかしAdobe製品がCS6からCCになって状況は変わりました。CCのライセンスを購入すればInDesignを含むAdobeの主要アプリの多くを利用できるようになったからです。

加えてiPad向けのADPSコンテンツをApple App StoreにリリースできるSingle Editionが含まれているとのこと（ただし、リリースにはApple Developer Programに加入する必要がある）。

ということで、私もこのセミナーを受講するまで知りませんでしたが、Adobe CCユーザーにはADPSはグッと身近なソリューションになっているのです。

そのADPSですが、InDesignでページを作成する作業に必要に応じてインタラクティブなオブジェクトと設定を追加することで、比較的簡単にリッチな電子出版物を作成できます。

セミナーでは卓上LEDライトの製品紹介カタログをテーマに、ライトのオン／オフの状態や、カラーバリエーションをクロスフェードの画像切り替えで表現したり、折り畳みの動きを連続画像やビデオで表現したりしていました。

その他、オンライン上のWebコンテンツをADPSコンテンツ内で表示したりと、通常のコンテンツ制作では十分な機能があるように感じました。

■最後に
今回も「他人のふんどし」でしたが、EPUBベースの電子出版とは少し違ったアプローチでいい刺激になりました。

本連載では基本的にEPUBをメインに扱うスタンスは維持しますが、機会があれば他のアプローチにも言及してみたいと思います。

また、今年は改めてEPUB書籍の制作手順も解説していこうと思っています。
今後にご期待ください。

■著者プロフィール
林　拓也（はやし　たくや）
テクニカルライター／トレーニングインストラクター／オーサリングエンジニア
Twitter：@HapHands
Facebook：https://www.facebook.com/takuya.hayashi

■ITライフハック
■ITライフハック Twitter
■ITライフハック Facebook

今回はさらにマークとCSSを追加し、その後でんでんコンバーターでEPUB化を行います。
前回の続きの素材データは以下からダウンロードしてください。

［サンプルデータダウンロード］

サンプルデータを解凍すると、中には今回の開始ファイル（「ookami_koyagi3_start.txt」「css_start.txt」）、画像ファイル（「img01.jpg」）、完成ファイル（「ookami_koyagi3_finish.txt」「css_finish.txt」）が入っています。

Webブラウザで、でんでんエディターを開いて、エディット画面に「ookami_koyagi3_start.txt」の内容をペーストしてください。

また、CSSエディターには「css_start.txt」の内容をペーストしてください。

■エディット画面でのHTMLタグの入力
まず著者名と翻訳者名の配置を右揃えにします。右寄せにするにはCSSのクラスセレクタで右寄せのクラスを定義し、著者名や翻訳者名を囲む「pタグ」に適用します。

でんでんマークダウン（でんでんコンバーター用のマーク記法）では空白行で囲まれた範囲が自動的にp要素となり、一見CSSクラスが適用できないように思われます。

ですが、でんでんマークダウンではHTMLタグを直接入力できます。著者名と翻訳者名の行はそれぞれ明示的にp要素とし、著者名には「author」、翻訳者には「translator」というクラスを適用することにします。

でんでんエディター エディット画面

CSSエディター画面に切り替えて、既存のCSSコードに以下のスタイルを追加します。

.author, .translator {
text-align:right;
}

プレビュー画面で確認すると、著者名と翻訳者名が右揃えになったのが確認できます。

プレビュー画面で確認

次に、終わり近くにある、おなかにごろた石を入れたおおかみが歌う部分の4行（多めのインデントが入っている部分）の前後に、余白を多めにとるようにします。

プレビュー画面　現状の余白は通常のp要素と変わらない

ここもp要素とし、「gorota-ishi」というクラスを適用する指定を行います。

ここで注意すべきは、明示的に指定した要素内での改行は自分でbr要素を記述する必要がある、という点です。

以下のような記述になります。

でんでんエディター エディット画面

CSSは次のコードを追加します。

.gorota-ishi{
margin:1em 0;
}

marginプロパティは値を2つ指定した場合、1つめが上下の余白を、2つめが左右の余白を表します。ここでは上下に1文字分の余白を指定しました。
プレビューすると次のようになります。

プレビュー画面で確認

このように、でんでんコンバーターではでんでんマークダウンだけでなくHTMLの直接記述も可能です。でんでんマークダウンだけでもかなりの指定が可能ですが、HTMLの直接記述が可能なことで、より懐の深いサービスとなっています。

原稿のマークとCSSの編集はここまでとしておきます。

マーク済みの原稿データはテキストファイルとして保存しておいてください。また、CSSエディターに記述したCSSスタイルもテキストエディタにコピー＆ペーストして保存しておきましょう。

■でんでんコンバーターでのEPUB化
でんでんコンバーターの利用については以前紹介したので、詳細は省略させていただき、注意点を確認しようと思います。

まず1つめは、画像ファイルの指定です。でんでんエディターではDropｂoxアカウント内の画像を指定しましたが、EPUB化する場合EPUB内の画像を指定する必要があります。

結果的にファイル名のみ指定すればよいので、一章の最後の画像指定のマークは次のように書き換えて上書き保存してください。


2つめはCSSです。

でんでんコンバーターでは制作者がCSSを用意しなくても十分な読みやすさが確保されるように、システムがCSSを用意してくれています。

制作者が用意したCSSファイルも利用できますが、その場合デフォルトのCSSが無効になってしまいます。

そのため、デフォルトのCSSファイルに制作者が追加したいスタイルを追記して利用するのが適切です。

デフォルトのCSSはでんでんコンバーターのダウンロードページから入手できます。

でんでんコンバーター　ダウンロードページ

デフォルトCSSをダウンロードして解凍すると、縦書き用と横書き用の2ファイルありますが、横書き用の「default.css」をテキストエディタで開きます。

このファイルの末尾に、でんでんエディターのCSSエディターで記述したスタイルを追加して上書き保存します。

ファイル名は変更して構いませんが、拡張子は「.css」にしてください。

でんでんコンバーターにアップする前に、原稿テキストファイル、CSSファイル、画像ファイルは同じフォルダにまとめておきます。

あとはでんでんコンバーターでこれらのファイルをアップロードしてEPUB化します。

この際、「タイトル」には「おおかみと七ひきのこどもやぎ」、「作成者」には「グリム兄弟」と入力しておきます。

後は、下の方にある［変換］ボタンをクリックすると、EPUB化およびダウンロードまで自動で行われます。

■最後に
3回に渡ってでんでんエディターの紹介を行ってきました。

日本の電子書籍ストアではEPUB 3形式が標準になってきていますが、MacでもWindowsでも手頃に利用できるEPUB 3制作アプリが見当たらない状況です。

EPUB 2の頃はSigilという無料のアプリがあって重宝していたのですが、SigilではEPUB 3形式のファイルが作れません。

そんな中で、でんでんエディターとでんでんコンバーターは初心者にも使いやすく、かなり色々なことができる奥の深さもあります。多くの制作者にとって非常に有力な選択肢となることでしょう。

1つ告知をさせていただきます。

先日、私がお手伝いさせていただいた電子写真集「もうひとつの”イプシロン・ザ・ロケット”」がiBooks Storeでリリースされました。

昨年打ち上げに成功したイプシロンロケットの写真集です。ご興味のある方は、まず無料お試し版を見ていただけると幸いです。

■著者プロフィール
林　拓也（はやし　たくや）
テクニカルライター／トレーニングインストラクター／オーサリングエンジニア
Twitter：@HapHands
Facebook：https://www.facebook.com/takuya.hayashi

■ITライフハック
■ITライフハック Twitter
■ITライフハック Facebook