ちょっと前になってしまいましたが、電子書籍の標準フォーマットepubの様々な情報を提供している「epubcafé」が主催した「第1回EPUB3コンテスト」に応募してみました。

以前のセミナーで羽田野氏から聞いた「One Web for All」という考え方を、私の中で一番身近に感じられたものがEPUBでした。今身についている技術だけで、Webとは違う媒体にアプローチできるということに魅力を感じていました。そこにタイミング良くこのコンテストの情報を見つけることができ、ダメもとで挑戦してみようと考えた次第です。

今回の記事では、epub作成で挑戦したことを纏めておきたいとおもいます。

応募した作品はオリジナルコンテンツ「ナタニー台地の妖精たち」。急遽専用のサイトも設置しました。お暇なときにでもご覧いただければと思います。

目次：

• はじめに
• ①epub形式の構成を理解したい！
• ②縦書きしたい！ルビ振りたい！
• ③汎用性の高いデザインを！
• ④動画・もしくは音を使いたい！
• ⑤CSS3の効果をどこかで使いたい！
• ⑥SVGを使いたい！
• ⑦Webフォント使いたい！
• ⑧ソーシャルサイトへの導線をつけたい！
• ⑨こだわりの手動でコーディング！
• おまけ：コンテンツはオリジナルで！

はじめに

epub3はHTML5+CSS3への対応と、日本語用の縦書き・ルビ・禁則などの仕様が盛り込まれています。但し前提として、仕様は2011年5月23日に確定しましたが、完全に対応しているepub用のビューワーが現時点ではありません。なので、コンテストの応募条件にもなっていますが、「WebKit」で稼働することが条件となっています。

※私は「WebKit」での確認の仕方がよく分からなかったので、GoogleChromeで確認することにしました。一応主催者にも確認をとりました。

①epub形式の構成を理解したい！

当然ですが第1の目的はこれです。adobeからダウンロードしたepubファイルやSigilで生成されるファイルを一つずつ調べました。

「epubcafé」制作の「EPUB日本語文書作成チュートリアル」やtwitter経由で教えてもらったepub仕様書の日本語訳などを参考にしました。

構成の詳細はdisブログで書いていますので、そちらをご覧ください。
EPUBのファイル
EPUBのファイル構成その2

②縦書きしたい！ルビ振りたい！

コンテスト自体は縦書き・横書きどちらでもよいということでしたが、折角日本語対応が盛り込まれているのなら、挑戦しない手はないということで「日本語・縦書き（右→左）」を実装しました。

HTML的にいうと関連するCSSは“direction”、“writing-mode”ぐらいなので楽勝♪などと考えていましたが、見事に撃沈。。。。難しい。。。全体の時間の半分以上をここに費やすことになりました。

p {
-webkit-direction:rtl!important;
-webkit-writing-mode: vertical-rl;
font-family:"@ＭＳ 明朝";
}

文字の向きが・・・

そしてイラスト画像やテキストをfloatさせた時にclearの設定が上手くできないのです。横と縦の差なのでしょうか。縦書きの場合は、leftで上に、rightで下にfloatします。この時点で文字がぐちゃぐちゃ。

マージンがおかしい例

clearすると左右のマージンが破壊的に大きくとられたり、懐かしのPeekabooバグが発生したり。

懐かしのPeekabooバグ

ボックスのwidthを調整して最低限の表示を保つようにしました。根本的には解決できてません。

ルビの実装で問題があったのは、ルビを含む<p>タグをfloatしたときにlineheightを上手く保ってくれず、Peekabooバグが発生。ルビ自体にlineheightを指定することで回避しました。

あとは量が多かったので物理的に時間がかかりました。

p {
line-height:2em!important;
}
ruby {
line-height:2em;
}

rubyとrubyを付与する要素のline-heightの値を同じにすると上手くいきました。

③汎用性の高いデザインを！

epubの利用シーンがPCブラウザだけでなく、スマートフォンやタブレット端末など多岐にわたるため、サイズ・縦横に左右されないデザインを思案しました。JavaScriptでCSSを切り替えないというのも課題にしました。

ページの起点となる右サイドにナビゲーションや各ボタンを設置し、終点となる左サイドに次のページへのリンクを設置。positionでfix指定することで、長い文章でも、短い文章でも、どこでも操作ができるようにしました。ただ、GoogleChromeで、単純にfixさせると、画面幅の位置で固定されるバグが発生。

ブラウザの初期の幅で固定される

html上ではvisibilityをhiddenにし、固定するエリアの内側のボックスをvisibilityをscrollにすることで回避しました。

また、背景をbottom指定して、画面の一番下に設定したかったのですが、heightを100%にしても、一番下には表示されません。

コンテンツがない時に高さをとってくれない

昔からあるテクニックですが、htmlタグとbodyタグにheight:100%;を指定。画面下に背景を設定するボックス（今回は#container-inner）にmin-height:100%;を指定。

html {
height:100%;
}
body {
height:100%;
}
#container-inner{
background:transparent url(背景のパス) repeat-x right bottom;
min-height:100%;
}

さらにこの#container-innerに下記のようにCSSを指定しました。

body > #container-inner{
height:auto;
}

④動画・もしくは音を使いたい

HTML5といえば、動画や音声などのインタラクティブな要素を手軽に扱えること。どちらかを必ず使用したいと考えていました。

コンテンツ的に考えて<audio>タグを使ったBGMを取り入れることにしました。

また、デフォルトのコントローラーではなく、JavaScriptを使用して、オリジナルのコントローラーで再生・停止の機能を実装しました。機能的に必要が無かったので使用していませんが、他にも一時停止やミュート、再生時間の表示などの設定も、JavaScriptを使えば簡単に実装できます！快適！

この方法はdisブログで書いてますのでそちらをご覧ください。

disブログに書いた記事

⑤CSS３の効果をどこかで使いたい！

epub3のもう一つの魅力はCSS3に対応していることです。CSS特有の効果を使っておきたいということで、メニューにスクロールのアニメーションを施しました。

横にスライドするナビゲーションは意外と手間取ってしまいました。

⑥SVG使いたい！

epub3ではSVGファイルも使用できます。SVG自体を触ってみたかったことと、サイズを変えても荒れないというベクター画像の特性を活かしたいと考えました。そこで、各見出しページの背景にSVGを表示。SVGファイル自体にheight100％を設定することで、どんなモニターサイズでも同じように画像が見えるようにしました。

手描きのイラストをSVG化したこともあり、SVG自体の容量が半端ではなく、かなり表示に時間がかかってしまいます。時間があればベクターデータから作成するべきです。直接SVGファイルのソースをHTML内に書くと、負荷がとてもひどく、表示に時間がかかったり、HTMLの編集にも時間がかかったり、まったくいいことがありませんでした。

objectタグでの読み込みはサイズを可変にするという命題を果たすことが難しくなり断念。背景で表示させることを選択しました。使用したSVGは、スキャニングしたイラストを色数が少なくなるように色を塗り直したり、一回GIFで書き出してみたりと、結構苦労しています。

⑦Webフォント使いたい！

仕事でWebサイを制作する際には、ほぼ使用することが皆無なので、Webフォントは是非使ってみたかったです。特に問題もなく、簡単に実装できました。

ただし、②でも触れましたが、縦組みができませんでした。そのため、見出しページのみに実装し、横組みで使用しています。

ひとつ気になったのは、epubは基本的にダウンロードをしてファイルがローカルデバイスにある前提なので、当然フォントデータも手元にダウンロードされます。そうするとフォント自体の版権の問題が色々と湧きあがってきそうな気がします。

本当にフリーのフォント以外は使用料金とかどうなるんでしょうね。。。Webサイト上のフォントに設定していても設置場所は特定できますし、通信環境が無い場合は、正しく表示されないという問題も。。。

@font-face {
/* HuiFont Lisenced by Hui : http://hp.vector.co.jp/authors/VA039499/ */
font-family: 'huifont';
src:url('../Fonts/HuiFont29.ttf') format('truetype');
}

この設定をすることで、font-familyに’huifont’を指定することができるようになります。

⑧ソーシャルサービスへの導線をつけたい！

出版した電子書籍自体をバイラルに広げていくためにはfacebookやtwitterといったソーシャルサービスへの導線が欠かせません。今回のコンテンツでは、facebook、twitter、mixiへの導線となるボタンを設置しました。

⑨こだわりの手動でコーディング！

効率性を考えると、InDesign(残念ながら所有していませんが）やSigilを使用することも考えましたが、①の構成を理解するためには、まず自分で組んでみることが大事なのかなと考え、今回は全て手打ちでコーディングしました。そのおかげで、Sigilを使ったらこの設定がこのファイルになり、このビューワーで見たら、この設定がここに利用されているのかというようなことも理解しやすくなりました。

これは個々人の考え方だと思いますが、HTMLの勉強もメモ帳からスタートした経験から、手打ちのコーディングにこだわりました。

おまけ：コンテンツはオリジナルで！

折角の機会なので、昔、趣味で描いた物語に日の目をみせてやりました。完成に近づくにつれ、少しずつキャラクター達に命が吹き込まれるような気がして、楽しく作業ができました。文章は少しリライトしています。（でも不特定多数の方にみられるというのは少し恥ずかしいですねw）

コンテストの結果は。。。。残念でした。審査結果はこちらです。

応募したコンテンツの方向性が、今回の主催者が考えていたコンテストの趣旨と狙いとは違ってました。ファイル自体の検証もちゃんとできませんでしたし、受賞作を見ると当然の結果かなと。。。受賞作はすごいっす。でも、色々やってみたいことを実践するという自分自身の趣旨は達成できたので満足です。

コンテスト系は主催者の意図を如何に汲み取るかも重要な要素なんですね。勉強になりました。