読むウェブ ~本とインタラクション

第14回 [iPad発売記念]EPUBフォーマットの電子書籍をつくる!

この記事を読むのに必要な時間:およそ 7 分

オーサリングのプロセス

オーサリングのワークフローは以下のとおりです。ステップをこまかく分けていますが,作業時間は15~30分程度です。理解を深めるために,⁠マークアップなど)効率化できるプロセスも手作業で進めています。作業の流れとワークフローの全体像を把握することが目的です。

ここで作成する電子書籍は,DRMフリーです。iPhone, iPod touch, iPad, Androidのスマートフォン,パソコンなど,さまざまな環境で利用可能です。DRM(デジタル著作権管理)はとても重要なテーマなので,どこかで取り上げていきたいと思います。

原稿の構造化
STEP-1 原稿ファイルを用意する
STEP-2 原稿を構造化する
オーサリング
STEP-3 スタイルを記述する
STEP-4 原稿(テキスト)を挿入して文書構造を確認する
STEP-5 ブックカバーを設定する
STEP-6 章ごとにチャプターブレイクを挿入する
STEP-7 電子書籍のメタデータを入力する
STEP-8 EPUBファイルを保存する
図版の作成と挿入
STEP-9 SVGフォーマットの図版を用意する
STEP-10 図版を挿入する
ダウンロードページの作成
STEP-11 電子書籍のダウンロードページを作成する
モバイルデバイス(iPhoneとAndroid)で読む
STEP-12 iPhone, iPod touchで読書する
STEP-13 Androidスマートフォンで読む
パソコンで読む
STEP-14 Adobe Digital Editionsで読む

STEP-1 原稿ファイルを用意する

それではオーサリングを始めていきましょう。最初は,原稿ファイルの準備です。サンプルとして,前回の記事を使ってみたいと思います。原稿はプレーンテキストにしてあります。

図2

図2

STEP-2 原稿を構造化する

文書を構造化します。EPUBのコンテンツ部分は,XHTML 1.1でマークアップしなければいけませんが,使用するタグはそれほど多くはありません。本のタイトルなら,h1要素で「<h1>読むウェブ~本とインタラクション</h1>」のように記述していくだけです。今回使用するSigilには,マークアップの機能が搭載されていますが,日本語を扱うと少々不安定になります。特に文字量が多いと,強制終了などのトラブルが発生しやすくなるため,マークアップは事前に済ませておく方がよさそうです。

図3

図3

最も基本的なマークアップは以下のようになります。本のタイトル,章,節の順にh1要素,h2要素,h3要素をマークアップしていきます。本文は,段落ごとにp要素を使います。

リスト1 基本的なマークアップ例

<h1>本のタイトル</h1>
   <h2>はじめに</h2>
      <p>はじめにの本文</p> 
   <h2>第1章</h2>
      <h3>1-1.</h3>
          <p>1-1. の本文</p>
      <h3>1-2.</h3>
          <p>1-2. の本文</p>
      <h3>1-3.</h3>
          <p>1-3. の本文</p>
   <h2>第2章</h2>
      <h3>2-1.</h3>
          <p>2-1. の本文</p>

STEP-3 スタイルを記述する

先にページの基本スタイルを記述しておきます。Sigilを起動して,⁠Code View]アイコンをクリックします。コーディング用の画面に切り替わります。

図4

図4

CSSファイルのリンク<link rel="stylesheet" href="../Styles/Style0001.css" type="text/css" />をhead要素内に記述しておきます。続けて,左側のBook Browserの[Styles]フォルダを右クリックし,⁠Add New Item]を選択します。

図5

図5

[Styles]フォルダをダブルクリックして開くと,CSSファイルが作成されています。ファイル名は自動的に「Style0001.css」となります。先ほどのCSSファイルのリンクは,新規作成された「Style0001.css」を指定しています。 ⁠Style0001.css」をダブルクリックすると,編集画面が表示されますので,スタイルを記述していきます。ページ内の上下の余白を@pageで指定し(上下20ピクセル)⁠左右の余白をbody要素で指定します(左右20px)⁠あとは,本のタイトルや章見出しなどの文字サイズを小さくしています(1emにすると,本文と同じサイズになります)⁠

図6

図6

リスト2 スタイルの記述内容

@page {
  margin-top: 20px;
  margin-bottom: 20px;
}

body {
  margin-right: 30px;
  margin-left: 20px;
  padding: 0;
}

h1 { font-size:1.2em }
h2 { font-size:1em }
h3 { font-size:1em }

著者プロフィール

境祐司(さかいゆうじ)

インストラクショナル・デザイナー[Instructional Designer]として学校,企業の講座プラン,教育マネジメント,講演,書籍執筆などの活動をおこなう。2000年より情報デザイン関連のオンライン学習実証実験を始める。現在,教育デザイナー育成を目的としたフォーラムを立ち上げるため準備中。著書に「速習Webデザイン Flash CS4」(技術評論社),「Webデザイン&スタイルシート逆引き実践ガイドブック」(ソシム)などがある。

URLhttp://admn.air-nifty.com/monkeyish_studio/

著書