前回は、「シンプルなEPUB」と称して静止画を表示するEPUBファイルを作ってみました。
静止画ベースのマンガならあとはこのままページを積み重ねていけばいいんですが、自分が作りたいモーションコミック、つまりアニメや音声・インタラクティブな仕掛けなどで制作するマンガは、そうはいきません。
ここ数日、アニメをEPUBのページに表示するためにあれやこれややってました。
制作手順は以下の通りです。
１．「Flash Pro CC」で簡単なアニメをつくる
２．パブリッシュする → html5形式のファイルができる
３．前回作った「シンプルなEPUB」の、画像を表示するページのxhtmlファイルのソースを開き、２．のhtmlの<head>と<body>の要素内容をコピペする
４．２．のパブリッシュで書き出された、jsファイル(ライブラリ含む)とimageファイルとsoundファイルを、「シンプルなEPUB」のそれぞれの場所へコピペする
５．jsファイルやimageファイルなどの所在が変わったことによるパスを修正する
６．opfファイルを開き、<manifest>に増えた<item>を追加する
７．ePubPackでパッケージングして、EPUBファイルを作る
８．EPUB-Checkerで検証する
上記の手順で作り検証しました。
１で「Flash Pro CC」を起動して、新規で「HTML5 Canvas」というドキュメント形式で開きます。
普通にFlashでシンプルなアニメを制作後、２でパブリッシュ → html5コンテンツが書き出されます。
「Flash Pro CS6」を使っていたときは、「Toolkit for CreateJS」という拡張機能からhtml5コンテンツを書き出していましたが、「Flash Pro CC」では「HTML5 Canvas」形式で新規ドキュメントを作り、そのままhtml5コンテンツをパブリッシュできます。
３～４では、「シンプルなEPUB」で作ったファイルを利用して「.xhtml」拡張子のファイルを作り、imageファイルやsoundファイル等を「シンプルなEPUB」のフォルダに統合しました。それによってimageファイル等へのパスが変わるので修正します。
５では、「Flash Pro CC」のアニメを取り込むことで増えたファイルをすべて、パッケージドキュメント(opfファイル)に記述します。
さて、これでアニメを表示するEPUBのためのファイルがそろいました。
あとは前回の「シンプルなEPUB」のときと同様に、パッケージングして、EPUBファイルとしての文法に間違いがないかを検証すればオーケー。
まずは、ePubPackでパッケージング → 問題なくEPUBファイル「AtomLabo_sample.epub」ができました。
最後に、EPUB-Checkerで検証。前回は「EPUB Validator」というWebアプリを使って検証したんですが、今回は「EPUB-Checker」をWindowsにインストールしました。Webアプリだと毎度アップロードするのがめんどうなので。
EPUB-Checkerで検証した結果 → どばーっとエラーが検出されました。大量なので一瞬あせりますが、大半はパスなどの間違いなので一つずつ修正すれば問題なし。
パスを修正したり、.xhtmlファイルに直接書き出されていたJavaScriptを別ファイルにしたりしてクリーンアップしていくと、エラーはほとんど消えました。
最後に一つだけ残ったのが、「Canvas element doesn't provide fallback」というエラー。
『Canvas要素が、フォールバックを提供しない？』
Canvas要素は、「Flash Pro CC」のCreateJSがCanvas要素を使って画像を描画しているわけですが、自分自身ではCanvas要素を使ったことがないんですよね。
そこでちょっとCanvas要素を調べてみたところ、「Canvasの要素内容には代替コンテンツを含める事ができる。 代替コンテンツはCanvas要素に非対応のブラウザで閲覧時にのみ表示される。」という記述が目に付き、『おっ、これか!?』と思いあたりました。
さっそくCanvasの要素内容に、以下のように代替画像を書いてみました。
<canvas id="canvas" width="1024" height="768" style="background-color:#FFFFFF">
<img ... />
</canvas>
再パッケージング後、EPUB-Checkerで検証 → 「No errors or warnings detected（エラー又は警告は検出されません）」
というわけで、ついにエラーが消えましたo(^▽^)o。
さて後は、iPadで動作確認するだけ。
その前に、PC用電子書籍リーダー「Readium」で動作確認。PC用の電子書籍リーダーがあると便利なので、先日インストールしたんですよね。
『よっしゃー！』問題なく表示されました。アニメもさくさく動いてます。
最後に、iPadで動作確認。
iBooksを開いて、iMacから転送したEPUBブックをタップすると → ブックが開いたかと思ったらストンと閉じてしまいましたΣ(゜Д゜υ)。
何度やってもだめです。ちなみにiMacのiBooksで起動すると → 画面が真っ白。ストンと落ちることはないんですが。
う～む、これは簡単じゃないかもしれない(-"-;)。