Editionsで読むフォントデータについてiTunesに登録してiPadで読む開発ツールやリーダーアプリのアップデートについていよいよ、明日金曜日(28日)にAppleのiPadが発売されます。iPadを読書端末として活用したいと思っている人も多いのではないでしょうか。iBookstoreは、今のところ米国だけのサービスですが、リーダーアプリのiBooksはダウンロードできるようです。今回は、予定していた話題を変更し、iBooksで読む電子書籍の作り方について解説します。Syndrome」で公開されているOPSの日本語訳から、電子書籍の仕様を確認してみましょう。アクセシビリティ本仕様には、障害によって読書が困難な人によるコンテンツの利用を確保する機能が盛り込まれている。コンテンツアクセシビリティの機能を組み込んでいる。1.0(http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505/)に従って記述されるべきである(should)。形式の本を利用できるようになるだろう。開発者により検証、改善されることで、リーディングシステムはアクセシビリティの要件に適合するものになるだろう。v1.0]」よりEPUBフォーマットなどのリフロー処理される電子書籍は、デバイスに対して動的に対応します。モバイルデバイスの小さな画面でも、パソコンの大きな画面でも、それなりに順応し、読者が自由に文字サイズ(および行間、マージンなど)を変更できる「調整可能」な仕様になっています。「⁠紙」に近いレイアウトを保持した静的な電子書籍(PDFやスキャン画像のまとまり)は、デバイスに対して固定です。どちらを選択するかは、対象とする読者層やコンテンツの内容によって決められます。文字主体の文芸書などは、スキャンした静止画よりも動的にリフロー処理させる電子書籍の方が、読者のニーズに応えることができます。ビジュアルの美しさやレイアウトに意味がある雑誌や、テキストと絵を分離できない漫画(コミック)などは、紙と同じ固定されたフォーマットの方が適しています。EPUBは、文芸書のような文字主体の欧文書籍をデジタル化するために考えられたフォーマットですから、動的にリフロー処理される仕様のメリットを十分に活かしたほうがよいでしょう。「読者がフォントの設定を変えてしまうのでデザインの意味がない」と思っているデザイナーも多いと思いますが、デフォルトのデザインはとても重要です。何も調整せずにデフォルトのまま読んでいる読者がたくさんいるからです。デザイナーが、視認性・可読性の高い「デフォルト」を提供すれば、大半の読者がそのまま受け入れるでしょう。高齢者や弱視の読者が「読みにくい」と思ったときに、文字サイズの変更や反転、背景色の変更などの機能が活かされます。この「デフォルト」デザインは、リーダーアプリケーションで提供されていますが、デザイナーが一部を上書きすることができます。この作業が、デフォルトの見やすさ、読みやすいさを決めるのです。現在はまだ表現力が乏しく、印刷のレベルには敵いませんが、フォーマットの仕様が拡張されたり、リーダーアプリケーションが進化することで変わってくると思います。デジタルでしか表現できない電子書籍の魅力EPUBとは異なる、アプリケーションソフトウェアとして提供される電子書籍があります。Bookshelf」は、高速3Dエンジンを搭載した電子書籍です。iBooksを上回るリッチなブックメタファが話題になっています。YouTubeにビデオをアップロードしましたので、参考にしてください。高速3Dエンジン搭載で、総じて評判のよくない「ページめくり」のメタファも快適に動作するマルチメディア系やインタラクティブ系の電子書籍の発想は、90年代からあり、CD-ROMコンテンツとして制作されていましたが、まったく新しい電子書籍として、ソーシャルネットワークの機能を取り込んだユーティリティブックがあります。Characters」のようにTwitterのソーシャルストリームを融合させた電子書籍はめずらしいものです。「⁠電子書籍+ソーシャルメディア」は今後、注目の分野です。電子書籍のオーサリングツールそれでは、EPUBフォーマットの電子書籍の作り方を解説していきましょう。前述したとおり、EPUBの動的なリフロー処理を生かした電子書籍を作ります。アプリ版電子書籍のような派手さはありませんが、誰でも作成できる(しかも無償のソフトウェアで作成できる)手軽さが魅力かもしれません。iBooksは、EPUBフォーマットの電子書籍に対応しています(EPUBフォーマットの詳細については、前回の記事を参照してください⁠)⁠。今回は、オープンソースの電子書籍オーサリングソフト「Sigil」(⁠シジル)を使用したいと思います。X/Linux⁠)⁠、無償でダウンロードすることができます。国産では、株式会社フューズネットワークから提供されている「FUSEe」(⁠フュージー)があります。Sigilと同等の機能があり、今後のアップデートでマウスによるレイアウト編集やDRMについての機能も予定されています。現在、ベータ版が無償でダウンロードできます。iBooksで読む電子書籍をつくろう!まずは、Sigilで作成した電子書籍の映像をご覧ください。iBookでどのように表示されるのか確認できます。実は、身近にiPadがなかったので、Twitterでお願いしたところ、@takuhitoさんがEPUBのサンプルを撮影してくれました(ありがとうございます!⁠)⁠。図版は、すべてSVGで作成しています(SVGについては後で解説します⁠)⁠。EPUB電子ブックの作成(テスト)オーサリングのプロセスオーサリングのワークフローは以下のとおりです。ステップをこまかく分けていますが、作業時間は15~30分程度です。理解を深めるために、(⁠マークアップなど)効率化できるプロセスも手作業で進めています。作業の流れとワークフローの全体像を把握することが目的です。ここで作成する電子書籍は、DRMフリーです。Androidのスマートフォン、パソコンなど、さまざまな環境で利用可能です。DRM(デジタル著作権管理)はとても重要なテーマなので、どこかで取り上げていきたいと思います。原稿ファイルを用意するそれではオーサリングを始めていきましょう。最初は、原稿ファイルの準備です。サンプルとして、前回の記事を使ってみたいと思います。原稿はプレーンテキストにしてあります。原稿を構造化する文書を構造化します。1.1でマークアップしなければいけませんが、使用するタグはそれほど多くはありません。本のタイトルなら、h1要素で「<h1>読むウェブ~本とインタラクション</h1>」のように記述していくだけです。今回使用するSigilには、マークアップの機能が搭載されていますが、日本語を扱うと少々不安定になります。文字量が多いと、強制終了などのトラブルが発生しやすくなるため、マークアップは事前に済ませておく方がよさそうです。図3最も基本的なマークアップは以下のようになります。本のタイトル、章、節の順にh1要素、h2要素、h3要素をマークアップしていきます。本文は、段落ごとにp要素を使います。スタイルを記述する先にページの基本スタイルを記述しておきます。View]アイコンをクリックします。コーディング用の画面に切り替わります。/>」をhead要素内に記述しておきます。Item]を選択します。図5[Styles]フォルダをダブルクリックして開くと、CSSファイルが作成されています。ファイル名は自動的に「Style0001.css」となります。先ほどのCSSファイルのリンクは、新規作成された「Style0001.css」を指定しています。「⁠Style0001.css」をダブルクリックすると、編集画面が表示されますので、スタイルを記述していきます。ページ内の上下の余白を@pageで指定し(上下20ピクセル⁠)⁠、左右の余白をbody要素で指定します(左右20px⁠)⁠。あとは、本のタイトルや章見出しなどの文字サイズを小さくしています(1emにすると、本文と同じサイズになります⁠)⁠。原稿(テキスト)を挿入して文書構造を確認する「Section0001.xhtml」タブをクリックして画面を切り替えます。マークアップした原稿(テキスト)をすべてコピーし、編集画面の<body>~</body>内にペーストします。図7目次を確認してみましょう。Editor]を選択します。Editor]が表示され、文書構造(アウトライン)を確認できます。これが、そのままiBooksの目次になります。目次から特定の項目だけ非表示にしたい場合は、[⁠Include]のチェックをクリックして外しておきます。原稿のマークアップは以下のようになっており、h1、h2、h3の階層構造がつくられています。ブックカバーを設定するブックカバーを設定します。ブックカバーは、iBooksの本棚やiTunesのアートワークとして表示されますので、手を抜かずしっかりデザインしておいた方がよいでしょう。touchの画面比率にあわせて作成しています。GIF、そしてSVGが使用でき、画像サイズはデバイスの画面にあわせて伸縮表示されます。作成するサンプルは、iPhoneのサイズ(320x480px)にしています。View]アイコンをクリックしてプレビュー画面に切り替えます。図101行目の「読むウェブ~本とインタラクション」の行頭にカーソルをあわせて、改行します。一番に上に空きの行ができますので、カーソルをあわせておきます。Image]アイコンをクリックして、カバー画像を選択します。図11続けて、チャプターブレイクを挿入します。チャプターブレイクを使うと、各章を分割することができますので(たとえば)第1章の終りの文章と第2章の見出しが1つの画面に表示されることはありません。Bresk]アイコンをクリックしてもかまいません⁠)⁠。※注意:チャプターブレイクは、実行後に「取り消し」できませんので、失敗すると最初からやり直しになります。面倒ですが、チャプターブレイクを挿入する前に一度、保存しておくことをおすすめします。図12チャプターブレイクを挿入すると、ブックカバーのページが分割されます。Browserを見てください。XHTMLファイルが1つ増えています(⁠「⁠Section0002.xhtml」が作成されています⁠)⁠。「⁠Section0001.xhtml」が、ブックカバーのファイルです。章ごとにチャプターブレイクを挿入するブックカバーと同じように、各章ごとにチャプターブレイクを挿入していきます。Bresk]を選択します。図14XHTMLファイルが分割されました。図15同じ作業を繰り返します。Editor]を表示してみましょう。基本的に、分割されたファイルと目次の項目は一致するはずです。電子書籍のメタデータを入力するここで書籍のメタデータを入力しておきましょう。最低限、「⁠本のタイトル(Title⁠)⁠」⁠「⁠著者名(Author⁠)⁠」⁠「⁠言語(Language⁠)⁠」だけは入力しておきます。書籍のメタデータがないと、通常のWebページと変わりませんので忘れずに入力してください。EPUBファイルを保存する一度ここで、保存をしておきます。Sigilには、アプリケーションフォーマットがありませんので、保存するとEPUBフォーマットのファイルになります。編集するときは、保存したEPUBファイルを開きます。SVGフォーマットの図版を用意する写真以外は、SVGフォーマットの画像を使用します。Graphics)は、アウトラインの情報を保持しているベクター・グラフィックフォーマットです。Illustrator」やオープンソースのソフトウェア「Inkscape」などを使えば、作図ソフトと同じように作成することができます。デバイスの解像度に依存せず、(⁠多くの場合)データサイズを抑えられることがSVGを使う利点です。IllustratorでSVGを選択して保存すると以下のオプションが表示されます。SVGプロファイルやフォントなどの設定があります。ここでは、SVG1.1を選択し、フォントはアウトラインに変換しておきます。※注意SVGファイルの拡張子は「.svg」になります。図版を挿入する図版の挿入は、ブックカバーの工程と同じ操作です。Image]アイコンをクリックします。ダイアログから画像ファイルを選択します。電子書籍のダウンロードページを作成するオーサリングが終了したら、保存をしてSigilを終了します。以下のようにアイコンが表示されない場合がありますが、特に問題はありません。保存したEPUBファイルは、念のためにバックアップしておきましょう。図22次は、EPUBファイル(電子書籍)のダウンロードページを作成します。touchで読む場合は、「⁠Stanza」(⁠スタンザ)という無料のリーダーアプリを使いますが、ダウンロードページを用意しておくと、Stanzaで直接EPUBファイルをダウンロードできるようになります。Dreamweaverやホームページビルダー、その他、Webページ作成のアプリケーションソフトで作成し、EPUBファイルと一緒にサーバへアップロードしておきましょう。右上の[+]アイコンをタップすると、URLの入力欄が表示されますので、ダウンロードページのURLを入力します。[⁠ウェブページ]を忘れずにタップしてください。最後に、右上の[保存]をタップするとダウンロードページの名前が表示されます。サンプルのダウンロードページURL(※iPhoneのStanza用のURLです)http://design-zero.tv/2010/mailmagazine/iphone/※参考ダウンロード方法の詳しい解説は、こちらのページを参考にしてください(この連載記事の解説ではありませんので、手順のみ確認してください。ダウンロードすると、Stanzaのライブラリにインポートされますので、オフラインでも読書することができます。図24Stanzaは、欧文で読みやすいデフォルトになっていますので、日本語の可読性を向上させるには、フォントなどの設定を変更します。字体、文字サイズ、行間、ページのマージンをちょっと変更するだけで、かなり読みやすくなります。※参考Stanzaの設定方法については、こちらのページを参考にしてください。図25SVGフォーマットにも対応していますので、問題なく表示されています。Editorと同じアウトラインになっていることを確認しておきましょう。図26iPhoneをランドスケープモード(横向き)にすると、カバーフロー表示に切り替わります。ブックカバーが表示され、メタデータ(書籍タイトルと著者名)が表示されます。Androidスマートフォンで読むAndroidスマートフォンでも確認しておきましょう。docomoのHT-03Aを使用します。Androidには「Aldiko」というiPhoneのStanzaに相当するリーダーアプリがあります。EPUBファイルは、USB経由で「eBooks/import/」フォルダにコピーしておく必要があります。EPUBファイルをインポートすると、本棚に表示され、ページも問題なく表示できます。図28「縦書きビューワ」でも確認してみましょう。EPUBフォーマットについては簡易対応ですが、テキストは問題なく表示されます。特別な記述を追加することなく縦書きで読むことができます。※注意なお、EPUBの日本語組版対応については次期バージョンの検討課題として公開されています。Editions」を使用します。Nookなど、多くの読書端末で採用されているため、検証用としても使われます。Reader」やFirefoxのアドオン「EPUBReader」などがあります。フォントデータについてとても重要なことですが、フォントデータを持たない電子書籍をパソコンで開くと、書籍とは思えない「読みにくい」可読性の低いページを表示することがあります。Windowsは悲惨な表示になります。iBooksのような視認性の高いリーダーアプリをWindowsでも期待したいのですが...。海外製の電子書籍関連ソフトウェアの多くは、日本語に関してあまり考慮されていないため、多々問題があります。Editionsで開くと、日本語が文字化けします。xml:lang="ja")が記述されていないのが原因ですが、Sigilに問題があるわけではありません。EPUB内の「content.opf」にきちんと記述されているからです(<dc:language>ja</dc:language>⁠)⁠。使用言語を解釈するリーダーアプリは、日本語で表示します。Vistaで実行する方法です。Xは少々複雑な方法になりますので割愛します⁠)⁠。EPUBファイルの拡張子を「.zip」に変更し、OEBPSフォルダ、Textフォルダの順に開き、中にあるXHTMLファイルをコピーします。xml:lang="ja"を追加します。図31保存後、XHTMLファイルを元の場所(ZIP内のTextフォルダ)にドラッグします(上書きします⁠)⁠。図32拡張子を「.epub」に戻します。Editionsで開くと、日本語も問題なく表示されます。当然ですが、SVGもサポートしていますので、ウィンドウの大きさにあわせて表示されます。iPhoneのサイズと比較してみましょう。パソコンの大きな画面で高品質表示するには、(⁠PNGやJPEGなどのラスタグラフィックの場合)画像サイズを大きくしなければ劣化しますが、解像度に依存しないSVGであれば関係ありません。ちなみに、下図のサイズをPNGに置き換えるとデータサイズがSVGの3倍以上になってしまいます。Editionsは、文字サイズとウィンドウのサイズによって、見やすさを自動調整します。下図は、文字サイズを小さくし、2段組みに変更された画面です。図35目次を非表示にして、ウィンドウをさらに広げると3段組みになります。ここで、文字サイズを大きくすると、2段組みに戻ります。図36iTunesに登録してiPadで読むiTunesに登録する場合は、ライブラリの[ブック]を選択して、EPUBファイルをドラッグするだけです。ブックカバーとメタデータ(書籍名と著者名)が表示されます。同期するとiPadに転送されます。図37開発ツールやリーダーアプリのアップデートについて今回ご紹介したオーサリングのワークフローは一例です。導入する開発ソフトによって、作業の流れは変わりますので、Sigilを使った1つの作成方法として参考にしてください。EPUBはオープンなフォーマットですから、これから新しいオーサリングソフトやリーダーアプリケーションが次々と登場してくるでしょう。注意してほしいのは、トリッキーな手法です。多くのリーダーアプリケーションはまだ発展途上ですから、不備があります。不備を逆手にとったテクニックなどは、アップデートで無効になる可能性があります(リーダーアプリのアップデートで、埋め込んだビデオがまったく表示されなくなる等⁠)⁠。可能かぎりEPUBの仕様に沿って作成したほうがよいでしょう。EPUBの表現力を超えた電子書籍を企画したい場合は、(⁠EPUBの中身は触らず)リーダーエンジンと一体化したアプリ版として設計した方がよいかもしれません。eReaderは、EPUBファイルを章ごとに「ページ」として管理するため、スクロールをしながら閲覧する特別な仕様になっている。このように、(⁠EPUBはセマンティックなファイルとして扱い)リーダーアプリケーション側で、電子書籍のスタイルを決めることができる。音声や動画を付加することも可能だ。日本でもiPadが発売されます。ストアに行けば、誰でも触れるようになるわけです。「⁠自炊」と呼ばれる個人が実行する電子化(スキャン&電子書籍化)もブームになりそうな感じです。28日以降は、ソーシャルメディアにも注視していきたいと思います。次回は、iBooksなどのリーダーアプリケーションについて取り上げる予定です。イーブックストラテジー」と題して、音声やビデオなどで発信していますので、ご興味のある方はアクセスしてみてください。今回の記事で使用したEPUBサンプルの素材セットは、以下からダウンロードできます。Ltd.ページ内容の全部あるいは一部を無断で利用することを禁止します⁠。個別にライセンスが設定されている記事等はそのライセンスに従います。