2010年9月アーカイブ

濫読淫読

おととい買ってきた本(未読)。

    • 土の文明史
    • 生物の多様性と進化の驚異
    • ブライザで無料ではじめるActionScript3.0
    • ローソク足パターンの傾向分析
    • 日本はどこへいくのか

先月から今月にかけて買った本(未読と既読)

    • シチリア・マフィアの世界
    • 文明としての江戸システム
    • 数覚とは何か
    • 満州事変
    • ゾロアスター教
    • 西行物語
    • 古代ポンペイの日常生活
    • 世界史の康造
    • これから正義のはなしをしよう
    • 時間はなぜとりもどせないのか

ここ2?3ヶ月に買った、わかんないときに答えを探す顧問本

      • DOMscripting
      • JavaScript&Ajax
      • MovableType逆引きデザイン事典
      • PHP逆引きレシピ

ここ3週間で、読めと勧められて手にしてみた本

      • ドル凋落
      • 新たなる金融危機に向かう世界
      • マネーの動きで見抜く国際情勢
      • 会社にお金が残らない本当の理由

 

 

         

 

 

関心あり、感動求めず

旅行中の2冊。

Tipping Pointという本を空港で買った。InterNational No.1 Bestsellerといううたい文句につられた。市販が10年前のもの。梅毒とか淋病とかカリニ肺炎とかの感染症の用語を除けばきわめてやさしい単語で書かれた本。和訳もでてる。Tipping Pointということが定義しづらいので、とりあえず、ignition point とか、spontaneous combustionとかに解釈して読んでみた。Acc。。。。陰謀家でも、これを計画的に利用するのは困難なのではないか。

 

維新の構想と展開を、たぶん飛行機の中か、一つ目のホテルで置き忘れてきた。帰国してから買いなおして読んだ。Acc

 

 

 

旅先のねこ

ネコを預けて出かけたのですが、旅先で見かけると、どうしてるかなと気になります。 100_1120.JPG

Villaの門前にいたこのネコはとても、なつっこいコでした。

犬ヨダレ

つい、書いてしまった言葉ですが、実例としてはここ

犬ヨダレよりも、ヨダレ犬のほうがよいかも。

きらいで、きらいで。逃げて逃げて、ぜったい参考書など読まないぞ、と意地を張ってきたJavaScript Ajax DOM scripting に、無条件降伏せざるをえなくなった。電子書籍っぽい動きをするサイトを、(趣味ですが)どうしても作りたくなって、あちこちのJPGスライドショウモジュールを貰いに行ったら、どいつもこいつもJavaScriptで、まったく。。。。

でもiQueryとeasy-sliderに感謝しつつ、高田順二的テキトウでつくったら、原型ができた。

 

たぶん、その動きの簡潔さは、俳句の如く(あほみたいに)単純で、不器用で、けばけばの装飾はなく、あんまりサクサクは動かず、それでいて、読者が読みたい(いかような)ペースでも快適に読めて、読んで獲得する情報量を増やすのではなく、読み進むのをいったんとめて、書かれていることを舌の上の味蕾だけではなく舌の下側でもじっくりと味わえるような、そういう電子書籍ビューワーなのである、

 

と大きく宣言したいところであるが、実際に作りこむのは、転地療養の後になる。

 

 

 

 

 

しらめっちピラポ

新宿:HM,UNIQLO,JeansMate。

帰りのタクシー、daikyouchoを知らないので、道案内した。こういうことは久々。その車内で突然浮かび上がってきた単語「しらめっちピラポ」

確かに

おっめぇっち、しらねえのか、ベラボーめ。

という気分ではあったが、新しく思いついたわけではなくて、デジャブ的には確かに中学生のころクラスメートとふざけあってつかっていた単語である。それ以来使った覚えが無い。

フムム、それとも、どこかで聞き覚えた最近の言葉かしら?という疑いもあったので、googleしてみると、「しらめっちピラポ」では、「白石女子高校の生徒会へ、南米パラグアイのピラポ市にある日系. 人学校「聖霊(エスピリッツサント)中高等学校から何通もの手紙. か届きます」というpdfファイルが検索されるくらいだ。ということは、これはほとんど商標登録できるくらいの新語ではあろう。

中学時代の記憶では「しらめっちピラポ」のほかに「いらめっちピラポ」も使った覚えがある。そんなもん、いらねえや、べらぼうめ、という意味である。これも、googleでは出てこなかった。

著作権

「合成音声の2次利用を禁止いたします。」

voicetext社の方針だ。ちかごろTV番組でryouを使っているのに出くわした。2次利用は料金を払えばできると推量できる。

音声合成は音素の組み合わせで行うので、音素の著作権や(音素をナレーションした声優の)個人権を利用する場合は金を払えということか。

文字フォントで、例えば明朝体をデザインしたデザイナーに、私たちprinterユーザーは、文章を書くたびに間接的にでも金を払っているのだろうか。

著作権はあるから勝手に使うな・使うなら金払えというのは、道徳的に正しいロジックなんだろうか。そもそもその著作権者がそれを作ったのは、誰かに使ってもらいたくて、あるいは、読んでもらいたくて作ったのであるから、そういう物事の本性に立ち戻って考えれば、使う側は作者の希望どおり使ってあげているのだから、金を払わない限り使ってはならないという著作権者の主張は、詐欺師の言い分、ヤクザの言い分に等しい。つかうことによって磨耗するからその損害を補填する意味で金を払えという言い分ならともかく、使っても減らない著作権は、土地の所有権や二酸化炭素の排出権と同様のうさんくささがつきまとう。

 


 

ここは、備忘のため、あちこちでブラウズして出くわした情報やdocumentをコピペしてメモ帳のようにつかっている私個人専用の雑記帳です。家のPCに閉じ込めず、webサーバー上においてあるので、PCをもたずに外出したときでも、誰かのを借りてブラウズしてみたり、その場で書き込めたりできるので、とても重宝しています。

アクセス制限をかけていないので、誰でもみることができます。誰でもみることができるというのは「公開」ともいえるわけで、では、私があちこちでコピペした「他人様が著作権や版権をもつコンテンツ」は結果として、「無断で公開した」ことになるわけです。これが法令違反だとした判例を探すつもりです。逆に、アクセス制限をかけて使う分には「個人が自分用に家庭などで使う」ことになって法令違反とはならないという判例も探すつもりです。

 

 

手帳をさらけ出しているので、自分用の日記や手帳の常で、すべてが「説明抜き」です。

 

 

トリサラ資料コピペ

紀伊国屋書店本店

眼科医が10時からで、終わると10時半。この時刻、紀伊国屋本店は空いているが、ジュンク堂は11時から。

例によって「眼当たり次第買い」

  • 50JavaScript本当に使えるプロの技(秀和システム、秋田育紀)
  • DOM Scripting(技術評論社、古籏一浩)
  • PHP逆引きレシピ(翔泳社、鈴木ほか5名)
  • 電子書籍の作り方ハンドブック(ASCII、ジャムハウス)
  • MovableType逆引きデザイン事典(翔泳社、荒木ほか2名)

 

 

 

http://ascii.jp/elem/000/000/543/543785/index-7.html

http://ascii.jp/elem/000/000/552/552157/index-3.html

 

 

Kindle/iPad対応!電子書籍の作り方

2010年08月09日 10時00分更新

文● 古籏一浩

iPadの上陸、Googleの参入などで盛り上がる電子書籍市場。「Webに近い」性質を持つ電子書籍は、Web制作の世界とも決して無縁ではありません。本連載では、「JavaScriptラボ」でおなじみの古籏一浩氏が、主な電子書籍フォーマットのデータの作成方法を解説します。(編集部)

(C) David Sifry/CC Attribution 2.0 Generic

 電子書籍にはPDF、EPUB、.book、AZW/MOBI、Topaz、XMDFなどさまざまなフォーマットがありますが、どのフォーマットがどんなコンテンツに適しているのか、どのような方法でデータを作成できるのか、電子書籍の課題や現実のワークフローは実際にデータの作成を体験することで見えてきます。そこで、本連載では現時点で広く使われている(もしくは仕様が公開されている)4つの電子書籍フォーマットについて、データの作り方を解説します。

■作成する電子書籍フォーマット

・PDF
http://www.adobe.com/devnet/pdf/pdf_reference.html
・EPUB
http://www.idpf.org/
・テキスト(青空文庫形式)
http://www.aozora.gr.jp/
・AZW/MOBI(アマゾンKindle用)
http://www.amazon.com/

※Kindle向けはほかにTopaz形式がありますが本連載では扱いません。
※デジタル著作権管理機能であるDRMに関しては扱いません。


 一口に電子書籍といっても、文字だけの小説なのか、画像だけの漫画なのか、作りたい本の形態によって方法は変わってきます。そこで、この連載では、以下の種類の電子書籍を順に制作します。

  1. 文字のみ(小説、文学作品など)
  2. 画像のみ(漫画、絵本)
  3. 文字+画像(挿し絵付きの小説や写真集など)
  4. 文字+画像+図版(SVG)(技術書、教科書など)
  5. 動画を含む複雑なレイアウトおよびインタラクティブ要素を含むもの(雑誌など)

 データフォーマットによっては作成できないタイプもあります。簡単にまとめると以下のようになります。

PDF EPUB テキスト AZW/MOBI
文字のみ
画像のみ ×
文字+画像 ×
文字+画像+図版 × ×
動画を含む複雑なレイアウト × ×
インタラクティブなもの × ×

 仕様が決まっているとはいえ電子書籍はリーダーによって機能に差があるため、制作者の意図したとおりに表示、動作する保証はありません。印刷された紙の本や雑誌であれば誰に対しても同じように見せられますが、電子書籍の場合はどのように表示するか(されるか)は、電子書籍リーダーの実装とユーザーの環境設定によって変わり、制作者側ではすべてをコントロールできないのです。

 電子書籍は、感覚としてはWebサイトに似ています。実際、EPUBはXHTMLなどWebをベースにした仕様になっていますし、iBooksではJavaScriptを使ってインタラクティブな電子書籍を作成できます。

 

どのような電子書籍リーダーがあるのか

 電子書籍のリーダー(読書端末)には、iPhone/iPad、Kindle、パソコン、携帯電話などがあります(海外ではNook、Sony Readerなどもある)。それぞれのリーダーは以下のようなデータフォーマットに対応しています。

PDF EPUB
iPad/iPhone (iBooks)
Kindle ×
Sony Reader
Nook
携帯電話(一部) ×
パソコン

 Kindle/Sony Readerのように特定の形式にのみ対応している専用端末もあれば、ユーザーがアプリケーションを追加してさまざまな形式に対応できる汎用端末もあります。たとえばiPadには、EPUBデータとPDFデータに対応した「iBooks」という電子書籍リーダー(アプリケーション)が標準で用意されていますが、iBooks以外にも数多くの電子書籍リーダーが存在します。特にPDFと青空文庫形式に対応した「i文庫HD」は非常によくできたアプリケーションで人気を集めていますし、PDFに対応した「CloudReader」「GoodReader」といったリーダーも利用されています。

 iPadのようにユーザーが自由にアプリケーションを追加できるのは確かに便利ですが、反面、制作側からすると複数のフォーマットのデータを用意しなければならないデメリットもあります。EPUBやPDFの中間フォーマットを作成するツールもありますが、データの管理やワークフローは煩雑になり、制作現場はかえって混乱してしまうでしょう。

 次ページから、実際に電子書籍のデータを作りながら、こうした複雑な状況の背景を探っていきましょう。

iPad上で電子書籍データを見るには

 電子書籍データを表示する方法は電子書籍リーダーやアプリケーションによって異なります。ここではiPad(iBooks、i文庫HD)に電子書籍のデータを転送してみましょう。

 まず、iTunesを起動しiPadをMac/Windowsと接続します。接続後、同期処理が終了したら作成したデータを転送します。iBooksの場合はPDF形式やEPUB形式のファイルをMac/Windows側の「ブック」にドラッグドロップしコピーし、iPadで同期すれば電子書籍データが転送されます(iPhone (iOS4)の場合はiPhoneのブックの中に直接ドラッグ&ドロップするとコピーされます)。

iPadのiBooksの場合、Mac/Windows側のブックにコピーした後、同期させるとPDF、EPUBデータが転送されます
iPadのiBooksの場合、Mac/Windows側のブックにコピーした後、同期させるとPDF、EPUBデータが転送される

 iBooks以外のアプリケーションの場合は、iTunes上のiPadを選択しAppタブをクリックします。すると下の方にファイル共有できるアプリケーションの一覧が表示されます。ファイルを転送したいアプリケーションを選択してから、電子書籍データをドラッグ&ドロップすると転送できます。

iPadのアプリケーションの場合は、Appタグで表示されるアプリケーションを選択してからデータをコピーします
iPadのアプリケーションの場合は、Appタグで表示されるアプリケーションを選択してからデータをコピーする

 i文庫HDのように内蔵するFTPサーバーを使ってファイルを転送できるアプリケーションもあります。こうした機能に関してはアプリケーションのマニュアルを参照してください。

 

PDFデータを作成する

 最初に、もっとも多くの機器で使えるPDFデータを作成します。ここでは元データとして私の連載記事の原稿を使います(記事には写真が入っていますが、今回は文字だけですので写真はありません)。

・HTML5 VideoでiPadがデジタルサイネージに!(古籏一浩のJavaScriptラボ 第38回)
http://ascii.jp/elem/000/000/534/534533/


 

 PDFの作成方法は、プリンターで印刷する手順と変わりません。Adobe AcrobatがインストールされているPCなら、印刷ダイアログから「Adobe PDF」を選択して印刷を実行するだけです。Microsoft Officeなどの一部のアプリケーションではさらに手軽で、専用のボタンをクリックするだけでPDFを作成できます。また、Windows向けにはAcrobatよりも安価なPDF作成ソフトも販売されています。

 Mac OS Xの場合はOS自体がPDFをベースフォーマットとしているため、特別なアプリケーションを用意しなくても印刷ダイアログからPDFデータを出力できます。以下はテキストエディターからPDFを作成する例です。

元のテキストデータを用意する
元のテキストデータを用意する
ファイルメニューから印刷を選択する。どのアプリケーションでも印刷できるものであればPDFデータを作成できる
ファイルメニューから印刷を選択する。どのアプリケーションでも印刷できるものであればPDFデータを作成できる
PDFとして保存するようにメニューを選択する
PDFとして保存するようにメニューを選択する
保存するPDFファイル名を入力する
保存するPDFファイル名を入力する
PDFデータが作成される
PDFデータが作成される
PDFを閲覧できるアプリケーションを起動すれば内容を確認できる
PDFを閲覧できるアプリケーションを起動すれば内容を確認できる

 PDFデータを作成するのは非常に簡単です。作成後の手直しも特に必要なく、元データとほぼ同じ見た目になります。常に同じレイアウトやフォントで表示できるので、制作者の意図した通りにユーザーに見せられるのが大きなメリットです(逆にデメリットでもあります)。一方、次に取り上げるEPUBはPDFとまったく逆の性質を持つフォーマットです。

EPUB形式のデータを作成する

 EPUB形式はXHTMLファイルとスタイルシートファイル(CSS)、画像、関連ファイルをまとめてZIP圧縮したものです。つまり、Webページで使用しているXHTMLとCSSを、電子書籍向けに流用したものと言えます。

 XHTML+CSSとはいえ、EPUBはWebに比べるとできることは限られており、古くからWebを手がけた人であれば「1994年頃のWeb」と同じような感覚を覚えるかもしれません。たとえば、位置の指定は「左揃え」「中揃え(センタリング)」「右揃え」のみで、CSSで文字や画像を任意の場所にレイアウトする、といったことはできません。EPUB形式のデータは、「制作者が自由にレイアウトできない」という性質を踏まえて制作する必要があります(昔ながらのtableを利用したレイアウトは一応できますが、表示結果は電子書籍リーダーによって差があります)。

 EPUB形式の作成には、一般的なテキストエディターや、DreamweaverなどのWeb制作用のオーサリングツールが利用できます。また、DTPソフトのInDesignでも作成できます。ただし、実際の制作では、メタ情報などを一括して編集できる専用のオーサリングツール「Sigil」を使うのが便利です。SigilはWindows、Mac OS X、Linuxに対応しています。


 

 上のURLからダウンロードしたらSigilを起動します。ウィンドウが表示されるのでテキストデータを入力するか、ペーストします。

起動するとウィンドウが1枚表示される
起動するとウィンドウが1枚表示される
文字を入力するかペーストする
文字を入力するかペーストする

 文字の装飾などもSigilで設定できますが、細かい文字サイズや行間は調整できません。文字サイズや行間、色をより細かく指定するにはスタイルシートで定義する必要があります。

文字の装飾などはSigil上でもある程度は指定できる。より細かく調整した場合はスタイルシートファイルを編集する
文字の装飾などはSigil上でもある程度は指定できる。より細かく調整した場合はスタイルシートファイルを編集する

 データの作成が終わったらEPUB形式として保存します。

EPUB形式で保存する
EPUB形式で保存する
EPUB形式のファイルが作成される
EPUB形式のファイルが作成される

 作成したEPUBデータをiPadに転送してチェックします。iTunesを経由して同期させるとiPadのiBooksで閲覧できます。

iBooksに作成したEPUB形式の本が表示される
iBooksに作成したEPUB形式の本が表示される
iBooksで表示を確認する
iBooksで表示を確認する

 EPUB形式の場合、PDFと異なりリーダー側で文字サイズを変更できます。このため、視力が弱い高齢者などでも文字を大きくして閲覧できます。

文字サイズを変更できる
文字サイズを変更できる

 文字を大きく(もしくは小さく)すると、文字サイズに応じて自動的に再レイアウトされるため、EPUB形式では「総ページ数」が変化します。PDFの場合、ページ数が変わることはありえませんが、EPUB形式では文字サイズや表示画面によってページ数が大きく変動します。

文字サイズによってページ数が変化。上がiBooksのデフォルトの文字、下が文字サイズを大きくした場合。ページ数が変化しているのが分かる

 ページ数の増減があるため、「○○ページを参照」といったページ数を使ったポイントはできません。EPUB形式はPDFと違い、制作者が意図したとおりにユーザーへ見せるのは難しいフォーマットです(画像のみで構成する場合はこの限りではありません)。また、レイアウト機能に制限があるため、雑誌などの複雑なレイアウトを要求する電子書籍には向いていません。

 

テキスト/青空文庫形式のデータを作成する

 続いて、青空文庫形式(テキストデータ)を試してみましょう。青空文庫形式はテキストデータですので、テキストエディターなどで原稿を用意するだけです。iPadでは「i文庫HD」を購入するとプレーンテキストや青空文庫形式を表示できます。

i文庫HDのサイト
i文庫HDのサイト

 i文庫HDはテキストデータは縦書き表示やルビにも対応しています。テキストは自動的に縦書きになるので何も設定する必要はありません。ルビ(ふりがな)を振りたいときは以下のように《》で囲みます。

古籏一浩のJavaScript実験室《じっけんしつ》


 

 漢字が連続している場合は以下のように|で区切ってから《》で囲んでルビをふります。

古籏|一浩《かずひろ》のJavaScript実験室《じっけんしつ》


テキストファイルを用意する

 テキストファイルはiTunes経由でi文庫HDに転送します。実際の表示は以下のようになります。

i文庫HDで転送したファイルを選択する
i文庫HDで転送したファイルを選択する
i文庫HDで表示すると縦書きでルビも表示される
i文庫HDで表示すると縦書きでルビも表示される

 iPadのi文庫HDで表示する際は、文字を見やすく修正・置換しなければならない場合もあります。

 テキスト形式(青空文庫形式)は非常に手軽でシンプルですが、専用のビューア(i文庫HDなど)がないと電子書籍として表示できないデメリットがあります。また、画像が使えないので漫画、雑誌など

Kindle(AZW/MOBI形式)で読めるデータを作成する

 最後に、Kindle用のデータとしてAZW/MOBI形式のデータを作成します。AZW/MOBIの作成には、米アマゾン・ドットコムが提供する専用ツール「Kindlegen」を利用します。KindlegenはKindleで扱えるデータフォーマットに変換するツールで、日本語もおおよそ問題なく扱えます。Kindlegen以外にもAZW/MOBI形式に変換するフリーウェアがいくつか出回っていますが、期待通り変換されなかったり、日本語が正しく処理できなかったり、問題があるため、Kindlegenがおすすめです。

AmazonのKindlegenのページ

 KindlegenはMac OS X、Windows、Linux用があるので、環境に応じてダウンロードしてください。今回はMac OS XのKindlegenを使って説明します。

 まず、変換元となるデータを用意します。Kindlegenで変換できるのはHTML形式です。Mac OS Xの場合はHTMLファイルがあるフォルダや親フォルダに日本語が含まれていると正しく処理できないため、英数字で構成されたフォルダ名にします。

 ターミナルを起動し、kindlegenを実行します。このとき、パラメーターで変換したいファイル名を指定します。以下の例ではdenshiフォルダ内にあるdenshi.htmlファイルを変換します。

./kindlegen /denshi/denshi.html


変換したいファイル名を指定する

 変換が終了すると同じフォルダ内にMOBI形式のファイルが作成されます。

MOBI形式のデータが作成される。Kindle for PCやKindle for MacをインストールしておけばKindleファイルのアイコンになる
MOBI形式のデータが作成される。Kindle for PCやKindle for MacをインストールしておけばKindleファイルのアイコンになる

 作成されたファイルをKindle for Mac/PCなどで開くと表示されます。

Kindle for Macで表示した
Kindle for Macで表示した

 AZW/MOBI形式は、さまざまなプラットフォームにビューアーが移植されているため、多様な機器で電子書籍を楽しめるメリットがあります。一方、EPUB形式と同様、複雑なレイアウトはできませんので雑誌のような電子書籍には不向きです。

 

Adobe InDesignからEPUBを生成する

 ここまではSigilやAcrobatなどのツールを使って電子書籍のデータを作成してきましたが、実際に本を作成する現場で使われているのはアドビ システムズの「InDesign」というDTPアプリケーションです。現在、日本で発売されている雑誌/書籍のほとんどはInDesignで制作されています。


DTPで使われているAdobe InDesign。他にはQuark Xpressなどもある

 ここではInDesign CS5を使ってEPUB形式のデータを作成してみましょう。今回はテキストのみで、書体やサイズなども指定しない、シンプルなデータを作ってみます。

 まず、InDesignで新規ドキュメントを作成します。EPUBの場合、文字数や表示幅、ページ数などは電子書籍リーダーによって変わるので細かく指定する必要はありません。ページ数は「1」を指定しておきましょう。

サイズは自由。もしKindle用にもPDFを作成する場合はサイズを設定しておくと綺麗に表示できる(Kindle2 : 560×750、Kindle DX : 784×1142ピクセル)
サイズは自由。もしKindle用にもPDFを作成する場合はサイズを設定しておくと綺麗に表示できる(Kindle2 : 560×750、Kindle DX : 784×1142ピクセル)

 次に、テキストデータを流し込みます。ファイルメニューから配置を選択し、ファイル名を指定したらページ上でShiftキーを押しながらクリックします。するとすべてのテキストが自動的に流し込まれます。

テキストが流し込まれる
テキストが流し込まれる

 今回は画像や図版はなく、文字のサイズや色も調整しないので、以上でInDesignデータはできあがりです。ちなみにマスターページに背景色や文字、画像を指定してもEPUBでは反映されません。また、複数のテキストフレームを作成してレイアウトした場合、意図しない順番でデータが生成されるため、1つのテキストフレームで完結するように作成してください。

 それではEPUB形式に書き出してみます。InDesign CS3/ CS4/CS5それぞれメニュー項目が異なりますので、お使いのバージョンに合わせて参考にしてください。

InDesign CS5の場合
InDesign CS5の場合
InDesign CS5の場合
InDesign CS4の場合
InDesign CS5の場合
InDesign CS3の場合
InDesign CS5の場合
保存するEPUBファイル名を入力する
InDesign CS5の場合
必要な項目を入力し書き出しボタンを押す

 生成されたEPUBファイルは、アドビの電子書籍リーダー「Adobe Digital Editions」やiPadで表示を確認できます。

Adobe Digital Editionsでの表示
iPadでの表示
iPhone 3Gでの表示

 なお、InDesign CS3/CS4で書き出したEPUBデータはAdobe Digital Editionsで表示すると日本語が文字化けします。著者のサイトで修正方法を解説していますので参照してください。

新規にInDesignで電子書籍データ(ePub形式)を作成する場合
http://www.openspc2.org/eBook/InDesign/basic/0002/index.html


 

 実際に試してみると分かるとおり、今回のように文字だけの電子書籍データを作るのは実はあまり難しくありません。とにかく「作ること」を優先し、段組、書体や行間など、細かい調整を一切していないためです。特に、EPUBではWebの技術(スタイルシート)を使って調整を加えることで、読みやすさを表現します。今後の連載の中で、スタイルシートを使った調整方法にも触れていきましょう。

 次回は画像を含む電子書籍データを作成します。


 

InDesignだけで電子書籍を制作する

 InDesignでせっかくきれいにレイアウトや文字組みをしても、EPUBやAZW/MOBIなどのほとんどの電子書籍フォーマットでは反映されません。現在出回っている書籍を電子書籍で同じように再現したいとすると、PDF形式を選択するか、すべて画像化するしかありません。

 このため、現状では紙のデータと電子書籍のデータは別々に作成する必要があります。電子書籍ではなぜか安価な値付けが求められますが、制作コストはその分、上がってしまうのです。

 もしInDesign上ですべてのフォーマットに変換できれば、制作現場の負担は軽減され、コストも抑えられるでしょう。InDesignはCS3以降、EPUB形式を出力できますし、電子雑誌版の「TIME」はInDesign+inWoodWingで作成されています。今後は電子書籍データやアプリに変換するInDesignのプラグインが充実してくるかもしれません。

・WoodWing / TIME Magazine
http://www.youtube.com/watch?v=G_oBpaMuCvc

 電子書籍の主要なフォーマットのデータ作成方法を解説する短期連載。前回は文字だけの簡単な電子書籍を作成しましたが、今回は画像で構成する電子書籍を作ってみましょう。作例では写真集を制作しますが、漫画や絵本の場合も同じ手順で作成できます。

■連載ラインナップ

  1. 文字のみ(小説、文学作品など)
  2. 画像のみ(漫画、絵本) ←今回作成する電子書籍データ
  3. 文字+画像(挿し絵付きの小説や写真集など)
  4. 文字+画像+図版(SVG)(技術書、教科書など)
  5. 動画を含む複雑なレイアウトおよびインタラクティブ要素を含むもの(雑誌など)


 前回同様、以下の4つのフォーマットの電子書籍データを作成します。

  • テキスト(青空文庫形式)
  • PDF
  • EPUB
  • AZW/MOBI(アマゾンKindle用)


 テキスト(青空文庫形式)は原則として画像を扱えませんが、iPadのi文庫HDでは独自の拡張機能で画像の表示にも対応しています。そこでテキスト(青空文庫形式)についてはi文庫HDで表示する方法を説明します。

 次ページからフォーマットごとに写真集を作成していきましょう。

今回作成する写真集用に用意した画像データ(全部で5枚)。JPEG形式で用意したがGIFやPNG形式でもよい

 

青空文庫形式で画像を表示する(i文庫HD専用)

 最初に、青空文庫形式で画像を表示するデータを作成します。青空文庫形式は原則として文字だけで構成されるフォーマットですが、テキスト内に以下の形式で挿絵(図版)を指定できます。

・形式
[#図の名前(fig作品ID_番号.拡張子、横幅×縦幅)入る]
・記述例
[#制作ワークフロー(fig12345_01.jpg、横480×縦360)入る]
・青空文庫形式での画像の扱い
http://www.aozora.gr.jp/annotation/graphics.html#gazo_chuki


 ただ、i文庫HDでは上記の仕様通りに記述しても画像は表示されません。i文庫HDは独自の拡張記法を採用しており、テキストファイル内にHTMLの<img>タグを記述して画像を表示します。

・i文庫HD 使用できるファイル形式
http://ipn.sakura.ne.jp/ibunkohd/manual/folder_type.html


 <img>で指定した画像は自動的に1ページいっぱいに表示されます。つまり、ページ内に画像と文字を混在できません。また、画面の幅に合わせて画像サイズが調整されるため、画面よりも小さい画像は大きく拡大した状態で表示されます(iPadを回転させると画像サイズが変わる)。

i文庫HDではimgタグで画像を表示できる
iPadを横向きにすると見開きで表示され、画像のサイズが変化する

 作成したテキストファイルと画像ファイルはZIP形式でアーカイブし、i文庫HDに転送すると電子書籍として読めます。ちなみに、指定した画像ファイルが見つからない場合はiPad内部のパス(/var/Applications/?)が表示されてしまいます(このあたりは改良してほしいところです)。

 

 

PDFデータの作成

 次にPDFデータを作成します。前回説明したとおり、PDFは印刷機能があるアプリケーションとAcrobatなどのPDF作成ソフトを使って作成できます(Mac OS Xの場合はPDF作成ソフトも不要)。写真集の場合はInDesignやIllustratorなどのDTPソフトを使うと便利ですが、今回は身近にあるMicrosoft Wordを使いましょう。

 以下のようにページごとに写真を貼り付けます。

ページごとに写真を貼り付ける。漫画の場合も同様。InDesignやIllustratorなどDTP関連のアプリケーションを使えば、より細かい調整ができる

 写真の配置が終わったらファイルメニューからプリントを選択し印刷ダイアログを表示します。あとはPDFの保存に必要な情報を入力します。

ファイルメニューからプリントを選択。WindowsではAcrobatなどが入っていればボタン一発で変換することもできる
保存するファイル名などの情報を入力する

 実際に作成されたPDFを表示して確認します。

完成したPDFをAdobe Readerなどで確認する

 PDFはとにかく手軽に作成できるのがメリットです。文字のみでも画像を含む場合でも手順は変わらず、簡単に作成できます。なお、PDFはカラープロファイルの埋め込みに対応していますが、iPadでは反映されないため、あまり色味にこだわることはできません。

 次ページではEPUBデータを作成します。

 

 

EPUB形式のデータを作成

 EPUB形式のデータは前回と同じく「Sigil」を使います。前回はテキストを単純に流し込むだけで完成でしたが、今回は1ページごとに写真を配置します。

 Sigilを起動し、画像挿入ボタンをクリックします。

画像挿入ボタンをクリックする

 ダイアログが表示されたら読み込む画像ファイルを選択します。選択すると自動的にページ上に画像が配置されます。

画像を選択する

画像が読み込まれページ上に配置される

 次に、ページを追加するためInsertメニューからChapter Breakを選択します。すると新しいページ(XHTMLファイル)が作成されます。

Chapter Breakを選択すると新たにページが作成される

新しいページが作成される

 新しいページが表示されたら、さきほどと同様に画像を配置します。

画像を読み込み配置する。画像の数だけページを追加すればよい

 すべての画像を配置したらEPUB形式で保存します。

EPUB形式で保存する

 作成したEPUBをiPadなどで確認し、問題がなければ完成です。電子書籍リーダーによって写真の色味が異なる場合がありますが、EPUBは電子書籍リーダー(デバイス)に応じてカラープロファイルを設定する、といったことはできませんのである程度の妥協が必要です。

iPadのiBooksで作成したEPUBデータを表示したところ

 画像の点数が多い漫画などの場合は、連番ファイルを自動的にEPUBファイルに変換するスクリプトを使うとよいでしょう。

・連番画像ファイルからePubを作成する
http://naoki.sato.name/lab/archives/142


Kindle(AZW/MOBI形式)で読めるデータを作成する

 続いて、電子書籍データの管理ツール「calibre」を利用して、Kindleで読めるMOBI形式のデータを作成します。calibreには、EPUB、PDFなどの電子書籍フォーマットを相互変換する機能があり、Mac OS X、Windows、Linuxで利用できます(ただしAZW形式には対応していません)。


電子書籍データの管理や閲覧、メタデータの編集、フォーマット変換などの多彩な機能を持つ「calibre」

 まず、変換元のEPUBデータを用意します。元データはPDFでも構いませんが、より精度の高い結果を得るため、今回は別に用意したEPUBファイルを使います。calibre 0.7.8では最初の1ページを表紙として扱うようなので、EPUBデータにはあらかじめ表紙を追加しておきます。

表紙を新たに作成し1ページ目にしておく。これが変換されるとカバーページとして処理される

 calibreを起動したら、EPUBファイルをドラッグ&ドロップするか「書籍を追加」ボタンをクリックしてEPUBファイルを選択します。ファイルが追加されると中央のリスト内に書籍名が表示されます。

EPUBファイルをドラッグドロップする
書籍として追加される

 次に、EPUBデータをリスト内から選択して「電子書籍に変換」ボタンをクリックし、「個別に変換」を選択します。

ここでは個別に変換する

 変換ダイアログが表示されたら作者や発行者などのメタ情報を入力し、Output formatでMOBIを選択します。あとはOKボタンをクリックすると変換されます。

書籍情報を入力、編集する

カバー画像を指定する場合はChange covewr Image:の下の欄にあるボタンをクリックし画像を選択する

 変換が終了するとMOBI形式のファイルが生成されます。Mac OS Xの場合はユーザーフォルダ内のCalibre Libraryフォルダ内のフォルダ内に作成されます。日本語書籍の場合は元のファイルと異なる名前になるので、後で修正する必要があります。

MOBI形式のファイルが作成される

 完成したMOBIファイルの表示を確認します。今回は「Kindle for Mac」で確認したところ、ほぼ期待通りに表示されました。Kindleの実機はモノクロの電子ペーパーを採用しているため、カラー写真も白黒で表示されます。

Kindle for Macで表示したところ。ほぼ期待どおりの結果が得られた

前へ 1 2 3 4 5 6 次へ

  • twitterでつぶやく
  • はてなブックマークに登録
  • del.icio.usに登録
  • livedoorクリップに登録
  • Buzzurlに登録
  • StumbleUponに登録
  • Google Bookmarksに登録
  • Facebookでシェア
  • Yahoo!ブックマークに登録
  • お気に入りに登録
  • 本文印刷

今すぐ始める電子書籍制作入門 ― 第2回

EPUB/MOBI/PDFで作るiPad&Kindle写真集

2010年08月16日 10時00分更新

文● 古籏一浩


Adobe InDesignからEPUBを生成する

 最後に、InDesignでEPUBデータを作成します。前回同様、新規のドキュメントを作成します。ターゲットの電子書籍リーダー(アプリ)を限定しない場合、サイズは特に指定しなくてかまいません。

新規にドキュメントを作成する

 ページごとに画像を1枚ずつ配置していきます。

1ページに1枚貼り付ける。漫画も1ページに1枚貼り付ければよい。スクリプトを使って自動的に貼り付けるようにすれば手もかからない

 作例では1ページに1つの画像を配置していますが、1ページに複数の画像を置く場合は基本的に以下のようなルールでEPUBが出力されます。InDesignのドキュメント設定が右綴じか左綴じかで出力される順番が変わりますので注意してください。

綴じ方法 出力ルール
右綴じ 上から順に出力。Y座標が同じ画像は右から順に出力
左綴じ 左から順に出力。X座標が同じ画像は上から順に出力

 EPUBへの書き出しは前回と同様にファイルメニューから「書き出し先...」>「EPUB...」を選択し、保存するEPUBファイル名を入力します。

EPUBファイルを生成する

 次に、書き出しオプションダイアログが表示されます。画像を特定の形式に変換したいときは画像保存オプションを設定します。ここでは元がJPEG画像なので自動処理にしました。

画像のオプションを指定する。今回は自動処理に設定した
EPUB形式のファイルが作成される

 EPUBファイルが無事に出力されたら、iPad(iBooks)などの電子書籍リーダーで確認しましょう。印刷用のデータのカラーモードはCMYKですが、電子書籍の場合はRGBに変換されるため、同じモニターで表示しても色味が若干変わります。

 InDesignで生成したEPUBデータは、以下の画面のように電子書籍リーダーによって1ページに表示される画像の枚数が変わります。

iPadでの表示。画像が1ページに2枚表示されている
Adobe Digital Editionsでの表示。画像が1ページに3枚表示されている

 InDesignはページ単位で編集できますが、標準のEPUB書き出し機能を使うとページが分割されず、すべて1つのページ(XHTML)として出力されます。このため、制作者側でページネーションをコントロールしたい場合は、Sigilなどを使ってEPUBデータを再編集しなければなりません。

 また、筆者が確認したところ、InDesignが出力したEPUBデータは電子書籍リーダー(アプリ)によってはまったく表示されなかったり、アプリケーション自体が強制終了したりするケースがありました(*1)。今回のような画像だけの電子書籍であれば、InDesignではなく自動的にEPUB形式を生成するプログラムかSigilなどの専用アプリケーションを使った方がよいでしょう。

 ちなみにInDesignでPDFを生成してcalibreでEPUBに変換しても、複数ページが1ページにまとめられてしまいます。この場合、やはりSigilなどのアプリケーションを使って調整したり、手作業で修正したりする必要があります。今後、InDesignのEPUB書き出し機能の改良を期待したいところです。

calibreでEPUBからPDFに変換したもの。余計な空白ページが追加されることがある calibreでPDFからEPUBに変換したもの。タイトルページと、それ以外のページで分割され画像は全て同じページに収められてしまう

 また、iPadのiBooksに限定したInDesignでのデータ作成方法については、MdNの2010年9月号で詳しく解説されていますので参考にするとよいでしょう。

■Amazon.co.jpで購入


 

 次回は、文字(装飾)+画像を含む電子書籍データを作成します。

 

 

今すぐ始める電子書籍制作入門 ― 第3回

チュートリアルで学ぶ電子書籍制作の4つの方法

2010年08月23日 10時00分更新

文● 古籏一浩

(C) David Sifry/CC Attribution 2.0 Generic

 電子書籍の主要なフォーマットの作成方法を解説する連載の3回目は、文字と画像が混在する電子書籍のデータがテーマです。雑誌のような複雑なレイアウトはできませんが、挿絵入りの小説などに使える、もっともオーソドックスな電子書籍を作ってみましょう。

■連載ラインナップ

  1. 文字のみ(小説、文学作品など)
  2. 画像のみ(漫画、絵本)
  3. 文字+画像(挿し絵付きの小説や写真集など) ←今回作成する電子書籍データ
  4. 文字+画像+図版(SVG)(技術書、教科書など)
  5. 動画を含む複雑なレイアウトおよびインタラクティブ要素を含むもの(雑誌など)


 

 主要なフォーマットのうち、「テキスト(青空文庫形式)」は画像とテキストの混在ができません(*1)ので、今回は以下の3つの形式の電子書籍データを作成します。

  • PDF
  • EPUB
  • AZW/MOBI(アマゾンKindle用)


 

 第1回と同じく、私の別の連載記事を元原稿として使い、フォーマットごとに作例を作っていきます。

・HTML5 VideoでiPadがデジタルサイネージに!(古籏一浩のJavaScriptラボ 第38回)
http://ascii.jp/elem/000/000/534/534533/


 


*1 iPadのi文庫HDでは青空文庫でもテキストと画像を混在できます。ただし、同一ページ内には混在できず、画像だけで1ページ全体を消費します。詳しくは前回の記事を参考にしてください。

 

PDFデータを作成

 最初にPDF形式の電子書籍データを作成します。使用するアプリケーションは、画像を配置できて印刷機能があれば何でも構いません。ここではMicrosoft WordとInDesignを使います。

 Wordの場合はテキストを流し込み、間に画像を配置します。PDFに出力するので複雑な表組みなどを入れても問題ありません。レイアウトが完成したら、印刷メニューを選択し、PDFとして保存するだけです(詳しい手順は第1回を参照)。

Wordでテキストと画像をレイアウトする
これまでと同様の手順でPDFとして保存する。画面はMac OS Xの場合
完成したPDFを表示

 InDesignの場合も紙の書籍と同じようにテキストと画像を配置し、最後にファイルメニューから「書き出し...」を選択してPDFとして保存します。

InDesignでテキストと画像をレイアウトする
レイアウトが完成したらファイルメニューから書き出しを選択する
PDFとして保存する。このとき画像管理の項目で「圧縮」→「自動」を選択するとiPadで画像が表示されない場合があるので圧縮方法として「JPEG」を選択する
完成したPDFをiPadで表示する。iPad上でもレイアウトした通りに表示されている

 

EPUB形式のデータを作成

 続いてEPUB形式のデータを作成します。オーサリングツールには前回までと同様「Sigil」を使います。まず、Sigilを起動して新規ドキュメントを作成し、テキストを流し込みます。

最初にテキストを流し込む

 次に、画像を配置してページを一通り作っていきます(詳しい手順は前回の記事を参照)。テキストの流し込みと画像の配置が済んだら、スタイルシート(CSS)を使って、文字のサイズや色、行間を調整します。

Sigilでスタイルシートを設定する。ここでは見出しと行間調整、プログラム部分のフォントなどを指定した。なお、SigilはXHTMLファイル内にスタイルを記述するが、本来は別ファイルに分離する方が好ましい

 EPUBのスタイルシートはWebで一般的に使われているCSS 2.1をベースにしていますが、すべてのプロパティが使えるわけではありません。


 

[] EPUBで使用できるCSSプロパティ一覧(クリックで表示)


 たとえば背景画像などは指定できませんし、位置揃えは左/中央/右の3種類しかないので、雑誌のような複雑なレイアウトはできません。また、現在のEPUBの仕様では、ルビや縦書き、HTML5の要素やCSS3のプロパティも使えません(*2)

 しかも、仕様では定義されているCSSプロパティであっても、すべての電子書籍リーダーで期待通りに表示される保証はありません。閲覧環境によって表示結果に違いがあるのはWebの世界では当然のことですが、印刷/DTP関係の方は納得がいかない点だと思います。制作者側で意図したレイアウトや書体を厳密に再現したい場合は、EPUBではなくPDFを選択するのが妥当でしょう。

 なお、iPadのiBooksは描画エンジンにWebKitを使用しているようです。iBooksをターゲットとしたEPUBデータを作成したい場合は、Mac OS XやWindows用のSafariで表示結果を確認しながら進めるのも手です。

作成したEPUBをiBooksで表示した結果。iBooksの場合、設定したCSSはかなり期待通りに反映される。コード部分のフォントにはCourierを指定


*2 iPadのiBooks限定であればCSSを駆使することでルビや縦書きも一応は再現できます

Kindle(AZW/MOBI形式)で読めるデータを作成する

 次に、Kindleで読めるMOBI形式のデータを作成します。MOBI形式の場合は、前回同様、EPUBファイルを「calibre」というアプリケーションで変換します。

 calibreを起動したら変換したいEPUBファイルを追加し、「電子書籍に変換」ボタンをクリックして「個別に変換」を選択します。変換ダイアログが表示されたらOutput formatで「MOBI」を選択して必要事項を入力します。

メニューから変換したいEPUBファイルを追加する
タイトルや作者名など各種情報を設定する
MOBI形式のデータが生成される

 残念ながら現行の「calibre 0.7.14」には不具合があるのか、一部ページが正しく変換されない場合があります。また、iBooksと異なり、書体や行間などの細かい設定は反映されません。

変換されたMOBIファイルをKindle for Macで表示した結果。実機ではモノクロで表示される

Adobe InDesignからEPUBを生成する

 最後にInDesignでEPUBデータを作成します。すでにPDFデータを作成する際にInDesignデータを作成していますので、そのまま流用してEPUBデータに書き出してみます。

PDF出力時に作成したInDesignデータをそのまま使う

 EPUBに変換するInDesignファイルを開き、ファイルメニューから「書き出し先...」>「EPUB...」を選択します。保存ファイル名や書き出しオプションを指定します。

ファイルメニューから「書き出し先...」>「EPUB...」を選択する
保存するファイル名を入力する
必要に応じて書き出しオプションを設定する

 実際にEPUB形式に変換したデータをiPadのiBooksで表示すると以下のようになります。

InDesignから出力したEPUBデータをiPadのiBooksで表示した結果

 InDesignからEPUBデータを出力する際にはいくつか注意点があります。

1.ページごとのレイアウトは不可能

 ドキュメント全体が1ページ(1つのXHTMLファイル)にまとめられるため、InDesign上でページごとにレイアウトしても期待通りに出力されません。

2.段落スタイルに日本語は使えない

 文字のサイズや色などはInDesignの「段落スタイル」で指定できますが、日本語の段落スタイル名を使用すると反映されません。デフォルトの「基本段落」も日本語なので英数字を使ったスタイル名を必ず定義する必要があります。

段落スタイルのスタイル名に日本語が含まれていると反映されない。スタイル名はCSSのプロパティ命名規則に従ったものにする

3.テキストフレームは1つに、画像はインラインで

 InDesign上で複数のテキストフレームを作成すると、EPUBはテキストフレームごとに出力されます。たとえば、複数のページにまたがる「テキストフレームA」の間に「テキストフレームB」を配置しても、EPUBではAの後にBが配置されます。画像フレームの場合も同様ですので、テキストの間に画像を挟みたいときはテキストフレーム内にインフラインで配置する必要があります。

InDesignでは間に配置したテキストや画像もEPUBではフレーム単位で出力される。このためテキストフレームは1つに、画像はインラインで配置する

4.マスターページは反映されない

 PDFと見比べると分かりますが、InDesignで設定したマスターページの内容はすべて削除され、EPUBにはまったく反映されません。

 このように、InDesignのEPUB出力機能はごくシンプルな電子書籍の場合をのぞき、現状ではほとんど使いものにならないといってよいでしょう。既存の書籍のデータを再利用するにしても新たにレイアウトし直す必要があり、とても効率的とはいえません。

画像を含むEPUBデータの作成はSigilが便利

 画像と文字が混在するEPUBデータの制作は、EPUBデータを直接作成できるSigil(*3)を使うのがよさそうです。もしくはWeb制作用のアプリケーション、たとえばDreamweaverなどのオーサリングツールを使ってXHTMLを作成し、最終的に手作業でEPUBにする方法もあります。

 InDesignを使う場合は、最初からEPUBに出力された後のことを考えてレイアウトしなければいけませんし、最終的にはSigilなどのアプリケーションを使って微調整が必要です。

 次回は、文字+画像+図版(SVG)を含む電子書籍データを作成します。


 


*3 Sigil以外ではWindows/Mac OS X/Linuxで使える「eCub」もあります。

 

 

  1. 動画を含む複雑なレイアウトおよびインタラクティブ要素を含むもの(雑誌など) ←今回作成する電子書籍データ

 複雑なレイアウトができる電子書籍のフォーマットは限られているので、今回は以下の2つの形式のデータを作成します。レイアウトが指定できないテキスト形式やKindleのAZW/MOBI形式は対象外です。

  • PDF
  • EPUB

PDF版の電子書籍を作成する

 最初にPDFデータを作成します。元データを作成するアプリケーションは何でも構いませんが、複雑なレイアウト作業には多くの雑誌や書籍の制作に使われているInDesignが便利です。InDesignでテキストを配置し、QuickTime形式(H264エンコード、192×108ピクセル)の映像(動画)をドキュメント内に配置します。

InDesignでレイアウトを作成する。中央は画像ではなく動画を配置している

 レイアウトが済んだらInDesignからPDF(インタラクティブ)形式に書き出します。作成したPDFをAcrobatで表示したのが以下の画面です。動画のサムネイル部分をクリックすると再生が始まります。

Acrobat 9で表示した。中央の動画サムネイルをクリックすると再生が始まる

 作成したPDFをMac OS Xのプレビューで開くと、PDF内に配置した動画のサムネイル部分が表示されず空白になります。当然、再生もできません。

Mac OS Xのプレビューで表示。動画部分が表示されていない

 この現象は、iPadのiBooksや他のPDFリーダーでも同様です。PDFに埋め込んだ動画はアドビ純正のAcrobatかAdobe Readerでしか表示・再生できません。

iBooksでも動画部分が表示されない
CloudReadersでの表示 GoodReaderでの表示
i文庫HDでの表示 PDFReaderでの表示
PDFReader Proでの表示

 そこでiPadのiBooksでも動画を再生するための策として、動画の代わりにJPEG画像を配置し、サーバー上にある動画ファイルへのハイパーリンクを設定します。InDesignでハイパーリンクを設定するには、画像を選択した状態でハイパーリンクのパネルにURLを入力します。

画像にハイパーリンクを設定しネット上にある動画を再生するようにする

 ハイパーリンクを設定したInDesignドキュメントをPDFに書き出してMac OS XのプレビューやAcrobatで確認すると、以下の画面のようになります。PDF内の画像をクリックするとブラウザーが起動して動画が再生されます。

画像をクリックするとブラウザーが起動して動画が再生される

 iPadのiBooksでも動作を確認してみましょう。画像をタップすると以下のような確認メッセージが表示され、「開く」を選ぶとSafariが起動して動画が再生されます。ただ、それまで起動していたiBooksがいったん終了してしまうので、読者の使い勝手はよくありません。

iBooksでは画像をクリックするとSafariが起動して動画が再生される

 iPad上で動くPDFリーダーでは「GoodReader」が制作者の期待に近い動作をします。画像にタップするとGoodReaderの中で動画が再生され、iBooksのようにアプリケーションが終了することはありません(本当はPDFの中に動画を埋め込んで再生できるのがベストですが)。

GoodReaderではアプリケーションを終了せずに動画を再生できる

 続いて次ページではEPUB形式のデータ制作に挑戦します。

 

EPUB形式のデータを作成する

 EPUB形式のデータはこれまでと同じく「Sigil」を使って制作します。ドキュメントを作成し、テキストを流し込んだらtableタグを使って2段組にしていきます。

Sigilを使って2段組にレイアウトする

 段組みのようなレイアウト処理は本来、tableタグでなくCSSを使うのが理想ですが、CSSで段組みするとiBooksでは一部のテキストが欠ける不具合があるので、今回はtableタグを使います。また、EPUBのCSSでは使用できるプロパティに制限があるので複雑なレイアウトが難しい、という事情もあります(第3回を参照)

 tableタグを使って段組みする場合も、いくつか制限があります。まず、1ページの表示領域に合わせてtableの高さを指定しないと、ページ内に段落の内容が収まらず、次のページにはみ出してしまいます。

iBooksでの表示。1ページ目の段組の内容が2ページ目に表示されている
Stanzaでの表示。tableタグによるレイアウトだが、iBooks同様に2ページ目に段組の内容が表示され、一部のテキストが欠けている

 文字サイズを小さくすると今度はページの途中までしか段組が表示されず、余分な余白が発生します。

文字サイズを変更すると段組の内容が切れてしまったり、余白が出てしまったりして期待通りにならない

 EPUBで段組を実現するにはビューワーに合わせた細かい調整と作り込みが必要で、現状はあまり実用的ではありません。

 一方、動画ついてはPDFの場合と同様、サーバー上の動画ファイルへハイパーリンクを設定することで対応できます。リンクをクリックするとSafariが起動して動画が再生されます。また、簡単なアニメーションでよければアニメーションGIF画像を貼り付ける方法もあります(アニメーションGIFはiBooksのみ対応)。

JavaScriptを使ってインタラクティブにする

 最後に、EPUB形式の電子書籍をJavaScriptを使ってインタラクティブ化してみましょう。以降に説明するサンプルはiPad/iPhone用のiBooksでのみ動作します。

 iBooksは限定的ながらJavaScriptとCSS3に対応しています。WebKitをベースとしたレンダリングエンジンを採用しているので基本的な動作はSafariとほぼ同じです(まったく同じではありません。Safariで動作してもiBooksでは動かない場合もあります)。

 今回はシンプルな例として、特定の画像がタップされると、タイトル文字の色と画像を変更するスクリプトを試してみましょう。

 画像がタップされたときに処理を実行するには、以下のようなスクリプトを記述します。addEventListenerを使っても構いませんが、画像を入れ替える場合、後でイベントを解除する必要があります。


document.getElementById("anime").onclick = function(){〜}


 

 タイトル文字の色は以下のようにスタイルシートプロパティのcolorに色名かカラーコードを設定して変更します。例では文字の色を赤に設定しています。


document.getElementById("header").style.color = "red";


 

 画像を変更する処理も一般的なWebページの場合と同じです。ただし、iBooksでは画像を一度変更した後にさらに変更しようとすると、画像がまったく表示されない不具合があります(このとき、前後のページに移動して戻ると表示される場合もあります)。


var ele = document.getElementById("anime");
ele.src = "../Images/sunflower.jpg";


 

 そこで続けてタップされるのを防ぐために、以下のようにしてクリックイベントを消去します。これで画像が表示されない現象を防げます。


ele.onclick = null;


タイトル下の画像をクリックすると......
タイトル文字の色が赤になり、画像も入れ替わる
iPhone (iOS4)のiBooksの場合。画像をクリックするとタイトル文字の色と画像が入れ替わる


<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <script type="text/javascript">
//<![CDATA[
  window.onload = function(){
        document.getElementById("anime").onclick = function(){
             document.getElementById("header").style.color = "red";
             var ele = document.getElementById("anime");
             ele.src = "../Images/sunflower.jpg";
             ele.onclick = null;
        }
  }
  //]]>
  </script>
  
<style type="text/css">
  p.sgc-1 {font-weight: bold; text-align: center; font-size:24pt;}
  div.sgc-2 {text-align: center;}
  div.leftBlock {float:left; width:48%; height: 500px; }
  div.rightBlock {float:right; width:48%; height: 500px; }
</style>
</head>
<body>
  <p class="sgc-1" id="header">パソコン暮らしの小人たち</p>
  <div class="sgc-2">
    <img alt="" id="anime" src="../Images/wave.jpg" /><br />
  </div>
  <div class="leftBlock">
    <p>〜〜〜〜</p>
    <p>〜〜〜〜</p>
  </div>
  <div class="rightBlock">
    <p>〜〜〜〜</p>
    <p>〜〜〜〜</p>
    <p><br /></p>
  </div>
</body>
</html>


 

 今回紹介したスクリプトはごくシンプルな例ですが、以下のサイトではCSS3と組み合わせたより高度な方法も解説されています。現在のところJavaScriptが動作するビューワーはiBooksだけですが、より幅広いビューワーが対応すれば電子書籍ならではのインタラクティブな表現が手軽にできるようになるでしょう。

終わりに

 本連載では全5回にわたって電子書籍データの作成方法について説明してきました。ここのところ電子書籍への期待は急速に高まっていますが、現状では制作環境の未整備、フォーマットの乱立、リーダーによる表現の制約など、さまざまな課題があることが理解いただけたと思います。

 とはいえ、こうした課題の多くは時間が解決するものでしょう。オーサリングツールなどの制作環境が今後、整備されていくにつれて電子書籍はより作りやすくなるはずでしょうし、あと数年もすればHTML5やCSS3を組み合わせたより多彩な表現ができるようになるはずです。最近ではWebブラウザー上で電子書籍(EPUB)が作成できるプラットホームも登場しています。手軽に電子書籍を発行できる環境が整うことで、電子書籍はWebの制作者にとってもより身近な存在になってくるでしょう。

 

 

 

ラヤバディ資料コピペ

May さかさ

 

ねこ MAY

mei.jpg

プーケット資料コピペ

ブルーアイランド プーケット 会社概要
○会社名 : ブルーアイランド 株式会社
○住所 : 399/24-25 2nd Fr Yawarat RD Phuket.
○会社電話番号: +66-76-254687, +6676-255056
○日本人スタッフ携帯電話 : 081-7877417 ,081-7877418
○会社FAX: +66-76-356134
○メールアドレス : hkt@thailand-travelgateway.com
○代表 : Mr.Soontorn Wongsila
○スタッフ : 社内スタッフ 6名 / 運転手 7名 / 日本語ガイド 6名
○設立日/資本金 : 2004年3月1日 / 5百万バーツ

 

 

 

中断が残念

とあるMetaTraderの備忘秘録が中断した。残念だ。
12時すぎ、台風の中、紀伊国屋書店と伊勢丹に出かけた。雨が激しくなり、帰りはタクシー。