クリエイター手抜きプロジェクト[239]iPad編EPUB+SVGデータを作成する
── 古籏一浩 ──

投稿:  著者:


前回に続いて、iPad編というか電子書籍ネタです。InDesign CS3以降であれば、iPad(iBooks)で使用できる電子書籍のEPUB形式のデータを作成することができます。CS3だとエラーになってしまうので、実質CS4以降で生成することになります。

しかし、InDesignを使えない、持っていない、買えない人もいます。そんな人はSigilという電子書籍(EPUB)作成ソフトを使うとよいでしょう。SigilはWebページを作成する感覚......というより簡易ワープロ、もしくは少し高機能なテキストエディタの感覚で使うことができます。SigilはMacOS X、Windows、Linux版が用意されています。
< http://code.google.com/p/sigil/
>

ただ、このSigilでも作成できないデータがあります。それはSVGデータです。EPUB形式ではJPEGやGIF、PNG形式の画像を表示することができます。ただ、電子書籍リーダーによっては、画像が縮小されたり拡大されてしまいます。写真の場合は気になりませんが、図版の場合は文字が読みにくくなってしまうことがあります。

そんな場合は、SVGを使った方がきれいに表示されます。SVGであれば、電子書籍リーダーがSVGを解析できなくても、図版内の文字は表示されます(SVGはXMLなのでタグが無視されるだけ)。



文字と画像が混在したEPUBデータは、InDesignでもSigilでもテキストエディタでも作成できますが、SVGとなると途端に作成できるソフトが減ります。と言っても、デジクリ読者であればAdobe Illustratorを使っている人は多いでしょう。

Adobe Illustratorであれば、SVG1.1形式で保存することができます。また、保存した後でも編集することが可能です。まあ、Adobe Illustratorで描かれるものをXMLデータとして保存できるようにしたものがSVGなので、親和性が高いのは当然と言えば当然です。

ただし、Adobe Illustratorで作成した図形や文字が問題なくiPadで表示できるわけではありません。実際にやってみると、縦書きの文字の表示がおかしくなってしまいます。おかしくなるだけでなく、データによっては表示されません。表示されても、文字の位置がおかしかったり枠内からはみ出たりしてしまいます。

データの横幅/縦幅によっては、ページ内に収まらず一部しか表示されなかったり、まったく表示されなくなってしまうことがあります。つまり、iPadを縦にした場合と横にした場合、表示されたりされなかったりする事があるのです。

EPUBにSVGデータを入れる場合、Adobe Illustratorで描いてSVG1.1形式で保存し、< svg >〜< /svg >までの範囲をまるごとコピーし、表示したい部分でXHTMLファイル内にペーストします。表示される文字のフォントを問わないのであれば、生成されたSVGデータ内にある
「font-family="'KozGoPro-Regular-83pv-RKSJ-H'"」
を削除してサイズを軽量化することもできます(font-family=で始まる属性を削除)。

また、SigilではSVGデータでも文字に限っては編集することができます。少し凝ったEPUB形式のデータファイルを作成する場合は、いくつかのソフトを組み合わせないとやはり駄目なようです。

借りたiPadは返却してしまったので、続きは実際に手元に届いてからにしたいと思います(WiFi 16GBモデルを予約できました)。

【古籏一浩】openspc@po.shiojiri.ne.jp
< http://www.openspc2.org/
>

ハイビジョン映像素材についてアンケートを行っています。
よろしければご協力ください。
< http://www.smaster.jp/Sheet.aspx?SheetID=28846
>

さすがに発売してから3ヶ月以上経過すると売れなくなるみたいです。
電子書籍に限らず、ですが。
Adobe Illustrator CS3 + JavaScript 自動化サンプル集 発売中
< http://www.openspc2.org/book/PDF/Adobe_Illustrator_CS3_JavaScript_Book/
>

電子書籍(EPUB)を作成したい方は参考にどうぞ。
・電子書籍作成用ページ
< http://www.openspc2.org/eBook/index.html
>

毎度おなじみASCII.jpの連載もよろしく。今回はHTML5 + Canvas + VideoでApple社のMotionのような、ほぼリアルタイムエフェクターを作成しています。・HTML5+JavaScriptでビデオエフェクターに挑戦!
< http://ascii.jp/elem/000/000/519/519646/
>