モーションコミック、ちょっとずつ進めてます。

日々雑事に追われ、なかなかモーションコミック制作に没頭できない状況が続いている今日この頃です。それでも少しずつは進めているので近況報告します。

EPUB3版モーションコミック【SciKo the Robot（サイコ・ザ・ロボット）】のラフなストーリーボードは完成。

キャラクター設定もほぼ完了。手描きのキャラから3DCG画像を起こしてモーションコミックを描くのですが、3DCG画像に起こせてないキャラがまだ2体あります。

そのうち1体が、肝心のロボット・サイ子です。上の画像は3DCGに変換中の途中経過のサイ子です。まだ頭の中のイメージとはだいぶ離れている感じ。

サイ子は当初、フルスクラッチでモデリングするつもりでした。でもいつできるかわからないので、A3ベースでカスタマイズして仕上げる方向に変更。

でもフルスクラッチのロボットはそのまま継続して作り、いつか完成させるつもりです。

サイ子以外にもロボットが3～4体出てきますが、DAZとRenderosityで購入予定。

背景はいつも通りVueで作ります。といっても今回は自然環境の背景シーンがあまりなくて、ほとんどロボット制作現場のシーンばかりになりそうです。

モーションコミックはマルチメディアで作るので制作要素が多くなり複雑になってくると、前もってしっかり準備しておかないと本格的に制作に取り掛かったときに、ストーリーやキャラの表現に集中できなくなります。

と言いながら、延々と準備してるのも困りものですが(￣∇￣;)ゞ。

さて、この間「そろそろゲーム的要素を」というタイトルでブログを書きました。

もっとある程度形にして、『よし、いける！』という段階になってからブログに書けばよかったなぁと後で思ったんですけど、書いてしまったものは仕方ありません。

でも、「enchant.js」というゲームエンジンをちょっといじってみて、HTML5 + JavaScriptベースだし、EPUB3形式のモーションコミックとは非常に親和性が高いと思います。

『よし、いける！』とまでは言えませんが、『もしかしたら、いけそう』ぐらいですかね。

【SciKo the Robot】のサイ子とレナがゲームをするシーンで、ちょっとしたゲームもどきを動かすことができれば、今後のモーションコミックの可能性がぐっと広がるので、トライしてみたいと思います。

そろそろゲーム的要素を

そろそろ制作に取り掛かろうとしているモーションコミックのタイトルを変更しました。【ロボティクス アトム研究所】などと以前書きましたが、【SciKo the Robot(サイコ・ザ・ロボット)】にしました。もう何回も変更してますが．．．(￣∇￣;)ゞ。

上の画像は、SciKo(ロボット)とSciKoを作ったロボットデザイナー雄作の娘レナです。この二人がゲームをするシーンがあって、その内容を考えていたらちょっとアイディアが浮かびました。

大きめのタブレットで二人はゲームをやっているわけですが、読者がそのタブレットをタップするとゲームに参加できるというアイディア。

もちろんゲームといっても本格的なものではなく、非常にライトなものですが。

たとえば、SciKo vs レナ(読者)とすれば、SciKoのキャラクターがレナ(読者)のキャラクターを追っかけてきて、読者はバーチャルパッドを操ってSciKoのキャラから逃げる。何秒間逃げおおせるかというようなものを考えています。

その勝ち負け、もしくは秒数によって、ゲーム終了後のSciKoとレナのセリフが変わるという程度のライト感覚なゲームです。

このゲームのプレイがマンガのストーリーに影響を与えることはありません。

いつもこのブログで、モーションコミックを「静止画・音声・サウンド・アニメ・インタラクティブな仕掛けで表現するマンガ」というような書き方をしてきました。

問題は、最後の「インタラクティブな仕掛け」の部分ですね。インタラクティブな仕掛けといっても、ページ上のキャラをタップしたら効果音と共にちょっとピロッと動くような単純なものから、そのページでの読者との双方向のやり取りの結果が、次のページに反映されるようなものまでいろいろ考えられます。

昔、Webブラウザで表示するWebコミックを描いていたころは、サーバーサイドのテキストや画像データを動的に組み替えてページを作るなんてことも考えたもんです。

でもタブレットで読むモーションコミックに取り組み始めてからは、そのようなサーバーにちょくちょくアクセスするようなアイディアはあまり考えなくなりました。

その代り、ゲーム的な要素をいつか取り入れてみたいという気持ちが強くなってきたかもしれません。

今回実際に試してみようかと思うようになったのは、「Unity」、「enchant.js」、「cocos2d-x」などのゲームエンジンがどんどん増えてきて、モーションコミックにゲーム要素を導入するハードルが低くなってきたと感じたからです。

今この文章を書きながら頭の中では、『まずEPUBでシンプルなモーションコミックを完成させるのが先だろ！』という声が響くと同時に、『ゲーム要素を取り入れるのは今でしょ！(古い？(￣∇￣;))』という声が聴こえてきます。

『よし、取り入れよう！』と決めたからといって、簡単にできるとは思ってません。

でも、2016年になったことだし(もう3月末ですが...)、新しい取り組みを始めてみようと思ってます。

この取り組みがうまくいけば、自分が理想とするモーションコミックにかなり近づくはず。

アトム育ち、ドラえもん育ち。

昨年末にやっとモーションコミックをEPUB3形式で作る目処がついて、その後ガンガン描き出すのかと思いきや、またピタッと止まってしまいました。

先日、そろそろ制作に取り掛かろうとストーリーをざっくりと考え、主人公のロボットのデザインをし始めたところです。上の画像がそのロボットのラフスケッチ。

まだ細部がかっちりと決まってませんが、大体こんな感じになる予定です。

以前、ブログに書いていた「ロボティクス アトム研究所」というアイディアはとりあえず置いといて、その前段階から描くことにしました。

今の時代ならではのロボットマンガってやっぱりあると思うんですよ。電子書籍が何回かのブームの後にやっと立ち上がったように、人工知能も冬の時代を経てようやく現実的な状況になってきて期待感が高まってきています。無理やり電子書籍と人工知能を結び付けてしまった(o^皿^o)ゞ。

同時に、人工知能が人間を超越する瞬間（シンギュラリティ）を懸念する科学者達がそのような技術に反対したりする今日この頃。なかなか面白い状況じゃありませんか。

アメリカ人は、人間を超越したロボットが人間を支配するというストーリーが好きですよね。そしてロボットに支配されたディストピアな近未来を舞台に、地下に潜んだ主人公が人間の世界を取り戻すべく果敢に立ち上がるというような。

でもアトム育ちの日本人は、ロボットは友達という感覚なんでしょうか。日本人といっても、アトム育ち、マジンガーZ育ち、ガンダム育ち等、世代によって違うと思いますが。あとドラえもん育ちも...。

果たしてAIロボットは多くの日本人がなんとなく思っているように友好的なのか、それともアメリカ人が恐れるように暴走しうる恐怖の存在なのか。

2045年まで待たなくても、けっこう早く結論がでそうな気がします。

EPUB3で作るモーションコミックの制作手順とりあえず完成

夏にブログを更新後、ずっと休止状態でした。

EPUB3形式のモーションコミック（アニメや音声・サウンドを使った動くマンガ）を試行錯誤中でしたが、ほぼ制作手順が完成という段階で止まってしまいました。

休止してた理由は、iPadのiBooksリーダーアプリでEPUB3のモーションコミックを動作確認しようとすると、iBooksが終了してしまう（落ちてしまう）という不具合を解決できなかったからです。

何か良いアイディアがひらめいて不具合が解決できたらブログに書こうと思い、何もひらめかないまま秋が過ぎ年末になってしまいました。

いや、そういえば一度ひらめいたことがありましたね。

モーションコミック内のアニメは「Flash Professional CC」で作ってHTML5形式でパブリッシュしていました。その時書き出される画像ファイルが、全て合体して一枚のスプライトシートとして書き出されます。

一緒にJSONというファイルも出力されるんですが、これが不具合の原因じゃないかとにらんだわけです。

「Flash Professional CC」のパブリッシュ設定の書き出しオプションで「すべてのビットマップとスプライトシートを書き出し」という項目のチェックを外しました。そして再度パブリッシュすると、ビットマップ画像がバラバラに書き出されました。

『これでうまくいくだろう！』と喜んで、EPUBファイルにパッケージング。

『勝ったも同然！』とばかりにiPadに転送して、iBooksでモーションコミックを起動.....ガックリ。やっぱりダメでした、ストンと落ちてしまいます。

というわけで、その時点でまたストップしたまま年末になってしまったわけです。

そしてこのままこのプロジェクトはフェードアウト、自然消滅しそうな状況でした。

ところが先日、『そういえばiBooks Authorで作っていた「ナナのかぼちゃパン」は、iPadのiBooksで問題なく動いてたよな.....』とふと思いだしました。

iBooks Authorで作っていたときは、「Flash Professional CS6」の「Toolkit for CreateJS」という拡張機能を使ってHTML5形式でパブリッシュしていました。

さっそく「CS6 ＋ Toolkit for CreateJS」でパブリッシュしたHTML5を使ってEPUB3にまとめてみたところ.....動くじゃありませんか！iPadのiBooksで落ちることなくアニメーションが表示されました。

「Flash Professional CC」と「Flash Professional CS6 ＋ Toolkit for CreateJS」で使われるライブラリファイルを比較してみると、前者のほうがヘビーなファイルになっているようです。

iPadのスペックでは、ちょっと厳しいのかもしれません。

せっかく「Flash Professional CC」にバージョンアップしたのに、「Flash Professional CS6」に戻るのはちょっと抵抗があるけど、まあいいでしょう。

とりあえず「Flash Professional CS6 ＋ Toolkit for CreateJS」でパブリッシュしたHTML5を使うことにしようと思います。

さてこれで、EPUB3形式のモーションコミックの制作手順がほぼ完成しました。

前回のブログ「EPUBでモーションコミック」でその手順を書きましたが、「Flash Professional CS6」を使うことにしたので手順「１．」と「２．」を下記のように修正します。

１．「Flash Professional CS6」でアニメをつくる

２．「Toolkit for CreateJS」でパブリッシュする → html5形式のファイルができる

※拡張機能「Toolkit for CreateJS」は「Adobe Extension Manager CS6」で「Flash Professional CS6」にインストールしておく。

以上です。

制作手順が完成したといっても、本格的にモーションコミックを作り始めたらいろいろと問題点が出てくるでしょう。

でもプロジェクトがフェードアウトすることなく、次に進めそうで良かったです。

EPUB3でモーションコミック

前回は、「シンプルな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で起動すると → 画面が真っ白。ストンと落ちることはないんですが。

う～む、これは簡単じゃないかもしれない(-"-;)。

シンプルなEPUB

さて、EPUB3版の制作を開始したものの何となくとっつきにくくて後回しになっていました。

とっつきにくいという理由を考えてみると、たぶんXHTMLや他のファイルもXMLで記述されるためその構造に準拠してないとエラーになってしまうという窮屈さが一つあるでしょう。まあこれはしょうがないですが。

それからEPUB3になっていろいろできるようになったとはいえ、基本的には紙の本を電子書籍にするという視点での記事が多くて、マルチメディアによるリッチコンテンツ視点で書かれたものはまだまだ少ないです。

と、ひとまず言い訳をしたものの...状況はぜんぜん好転せず...とにかくもっともシンプルなものを作るところから着手してみました。

表紙を表示するだけのシンプルなEPUBです。

それでも基本的なファイルを一通り揃え、EPUBファイルとしての検証チェックなどをしないとEPUBリーダーアプリでエラーなどが出てしまうので、なかなか大変。

揃えたのは以下のファイルです。


・mimetype

・META-INFフォルダ

・OEBPSフォルダ


mimetypeは、このファイルがEPUBファイルであることをリーダーアプリに教えるためのファイル。

META-INFフォルダには、container.xmlファイルのみを入れました。container.xmlは、リーダーアプリにコンテンツの本体が格納されている場所を教えます。

そしてそのコンテンツの本体が格納されているところは、OEBPSフォルダ。

OEBPS(Open EBook Publication Structure)というフォルダ名は慣例的に使われていて、別にこの名前じゃなくても良いらしいのですが今回はとりあえずこのままいきます。

OEBPSフォルダには、表紙ページ(xhtmlファイル)のほかに本編ページのダミーを2ページ分と同じくダミーの目次ページを入れておきました。

今、表紙と書きましたが、ブックの表紙と本編の表紙(トビラ)をそれぞれ別画像にしました。

ブックの表紙は、「iBooks Store」の書棚に並んだときのアイコンのような画像用で縦長のもの。そして本編の表紙用、つまりトビラ画像は横長にしました。

おっと、重要なファイルを書き忘れるところでした。AtomLabo.opfというファイルです。

opfファイルは、タイトルや出版者名などの書誌情報、それからページの並び順などが記述されたXMLファイルです。

というわけで一応最低限のファイルが揃いました。

次にこれらのファイルをEPUBファイルにパッケージングします。

自分は、ePubPackというWindows用のフリーソフトを使いました。簡単にEPUBファイルを生成してくれます。AtomLabo.epubというEPUBファイルが出来上がりました。

さあ、あとはこれをリーダーアプリ「iBooks」で表示するだけ！

でも実は、iBooksで読み込もうとしたらエラーが出てしまい読み込めませんでした。どうもファイルに不備があるようです。

そこでEPUBファイルとして整っているかどうかチェックしてくれる「EPUB Validator」というWebアプリを利用してみました。AtomLabo.epubファイルを指定してValidateボタンを押すだけ。簡単便利です。

結果は、container.xml文書内で、AtomLabo.opfを指し示すパスが間違ってました。あとダミーのページをOEBPSフォルダに入れるのを忘れてました(￣∇￣;)ゞ。

今このようにブログを理路整然と書いてますが、実際にやってるときはあれやこれや間違えたりしてるんですよね。

さてもう一度再パッケージして、iBooksに持っていったところ無事表示できました。上の画像です。

『よっしゃー！』これで一番シンプルなEPUBが完成。

いや、一番シンプルなのは「Hello,World!」と表示するEPUBかな。

ここまでは順調。

キャラクターデザイン

最近は、EPUB3形式でモーションコミックを作るための手順を調べたり、新作【ロボティクス アトム研究所】のキャラデザインなどをしていました。

まずEPUB3のほうは、ざっくりですが頭の中で制作手順が整ってきたので、あとは実際に小さなコンテンツで試しながら進めるだけです。

「iBooks Author」で作っていたときの前半までの手順はそのまま使えそうなので、問題は後半部分ですね。

具体的にいうと、「iBooks Author」のテンプレートで用意されていた各ページに、ウィジェットを配置してモーションコミックを動かしていたわけです。

ウィジェットの本体であるHTML5コンテンツを作るまでの制作手順は同じ。そのHTML5コンテンツを配置するテンプレートはないので、1ページ単位の各コンテンツをハイパーリンクで繋げるということでいいんじゃないかと思ってるんですが...。

ハイパーリンクで繋げる部分を、スワイプなどの操作でスライドさせたりページ捲りアニメを挿入させる感じですかね。

とりあえず考えてるのはその辺りまで(￣∇￣)。

それからキャラクターデザインのほうですが、上の画像が先ほどまでスケッチしていた新キャラで、名前は彩子(サイコ)。

前作【ナナのかぼちゃパン】では、主人公ナナの父・雄作がパン職人として出てきましたが、新作でも雄作は登場します。ただし今回はパン職人ではなく、ロボットクリエーターという役です。

その雄作にはロボット製作の助手を付けることにしました。上に描いたスケッチの彩子がその助手というわけ。

性格は、「彩子です、よろしくネ！」と手を差し出すような、さっぱりした感じの天真爛漫な女子なんだけど、実はちょっと心に秘めた野望あり！なんですよね。

その野望とは...後のお楽しみにとっておきましょう。

EPUB3版開始

新たなカテゴリー「EPUB3版制作日記」を追加しました。

これでカテゴリーが、「Weblog」「iPad版制作日記」「EPUB3版制作日記」の三つになりました。

各カテゴリーの内容を簡単に説明すると、

・Weblog
ブログを始めた初期は、デフォルトのカテゴリー名の「Weblog」のまま特に区分わけすることもなく書いていた。Webブラウザーに対応したWebコミックの制作日記。

・iPad版制作日記
iPad対応のモーションコミック制作を始めたときに追加したカテゴリー。「iBooks Author」で作り上げたモーションコミックを「iBooks Store」にアップロードする段階で止まっている。

・EPUB3版制作日記
「iBooks Author」で作った.ibooks形式のコンテンツをベースに、EPUB3形式のモーションコミックを制作するために今回新たに追加したカテゴリー。


iPad版制作日記の次は普通ならKindle版とかSurface版になりそうなところですが、自然な流れでEPUB3版になりました。

自分にとってEPUBは、小説や文章と静止画像の組み合わせのコンテンツ向きという認識だったので、EPUB3になってJavaScriptが使えるようになったといっても、自分がやりたいモーションコミックには向いてないんじゃないかと思ってました。（今も少し思ってる(^ω^)ゞ）

なのでこれからトライするEPUB3版モーションコミックの制作にはちょっと不安もあるんですよね。

でももしかしたら「iBooks Author」には無い自由度があるかも。

というわけでとにかく制作開始です。

上の画像は、新作【ロボティクス アトム研究所】のワンシーンです。主人公の「みぃ」とお供のロボットが登校するところ。

近未来では、スマホの代わりにロボットがお供する時代になっているのであった。