プレストーリー

この夏は結局ほとんどマンガ制作ができず、気がつけばもう秋...。

遅ればせながらEPUB3版モーションコミック「Saikobot（サイコボット）」の制作に取りかかりました。

上の画像はストーリーボード用のラフスケッチで、AI（人工知能）のバージョンアップや皮膚感覚センサーを最新のものに取り換えたシーン。左の男はロボットクリエーターの雄作です。

前回の「ハードルを下げる」で書いたように、まずは予告編でiBooks Storeに問題なく並べてもらえるか試すことにします。

予告編といっても映画のトレーラーのような印象的なシーンを見せるのではなく、本編のプレストーリー的な短編にする予定です。自分の場合このプレストーリーに凝りだして大変なことになるのが常なので、そこらへんは注意しないと。

あくまでもEPUB3形式で短編のモーションコミックを作り、アップロードしAppleの審査を通りiBooks Storeに並べることに徹しないと。

その辺りの手順がしっかりしてないと、落ち着いて制作に取り組むことができませんからね。

しかし考えてみると、そろそろiPadやiBooksリーダーにこだわらなくてもいいかもしれません。

やっぱりAppleが伝統的にマルチメディア・コンテンツを重視してきたこと、そしてEPUBリーダーアプリであるiBooksがマルチメディア・コンテンツにいち早く対応した優れたリーダーアプリであること、などが理由でiBooksにこだわってきたわけです。

でもPC上で作りながら最初の動作確認では、Google Chrome ＋ Readiumリーダーという環境で動きをチェックします。そしてその環境では今まで問題なく動作するようです。

なのでその環境、つまりReadium対応版を先に作るという選択肢もありかなと。

今回、予告編を作りながらその辺りも検討しようかと思います。

ずいぶん前に書いたブログが、デジタルネイティブの子供たちが成長してデジタル素材を自由自在に組み合わせてマンガコンテンツを作るようになる、というような内容でした。

つまり静止画と文字だけのマンガではなく、映像や音声・サウンド、双方向のやり取りなどを駆使して描くマンガです。

スマホで撮影した写真をエディットしてSNSにアップしたり、同じく映像をyouTubeで公開したりとデジタルコンテンツを当たり前に受発信する時代になりました。

教育現場でのタブレットの導入やプログラミング教育の必修化も進みつつあるようだし、そろそろか！？

自分としてはその時代が来たころには、マルチメディア要素を自在に操って描いてる予定だったけど......。

なかなか難しいようです。

ハードルを下げる

夏はモーションコミック「サイコボット」の制作に没頭しようと思っていたのに、サイコのモデリングデータをちくちくいじってるうちに7月も下旬になってしまいました。

またまたタイトルを変更。「サイコ・ザ・ロボット」→「サイコボット」。

もうこれ以上モデリングデータをいじっても良くなりそうもないし、あとはモーションコミックを制作しながら必要に応じて修正していくことにします。

モーションコミック「サイコボット」のストーリー的には、ヘルメットなどを外して人工皮膚と髪を移植すればロボット・サイコが完成だけど、まだいろいろと頭や胴体を開いて改良しないといけないので人工皮膚を着けないロボットの質感のまま、AI（人工知能）の学習を進めているという設定です。

よく外見上は人間と変わらないけど実はロボットで、部品交換など修理のシーンで内部の機械を見せて、ロボットらしさを表現するというのはよくあるパターンですよね。

ただ外見が完全に人間になっちゃうとちょっとつまらないかなと思っていて、しばらくはこの人工皮膚を移植する前の状態でいく予定です。

さて、このままモーションコミック「サイコボット」の制作に突入すると思うと．．．．．．考えただけで気が遠くなるなぁ(￣∇￣;)。

サイコとレナがゲームで遊ぶシーンでは、タップすると読者もちょっとしたゲームを楽しむことができる、などというアイディアまで盛り込んでおもいっきりハードルを上げてしまいました。

それに仮に完成してもiBooksストアにアップロードするときのことを考えると気が重いなぁ。手順が複雑だし、iBooks形式で受け付けられなかったときのことがまだ尾を引いているようです。

そういえば前回登録するカテゴリーを選択するときも、「カテゴリーが間違っています」みたいなエラーがでたような．．．。

長い時間をかけてモーションコミックの試行錯誤をしているうちに、自分の理想的なマンガの要素を気軽に盛り込んでしまい、いつの間にかずいぶん制作のハードルを高くしてしまいました。

それに伴い自分の心の中にも気を重くする何かが溜まってきて、制作意欲を妨げているようです。

『ハードルを下げねば．．．』

まず予告編か何か短編を作ってアップロードしてみようか．．．そしてEPUB形式のモーションコミックがiBooksストアのフォーマットや審査を通り、問題なくアップロードできることを確認してから、安心して本編にとりかかる。

うん、これだ！o(*ﾟ▽ﾟ*)o。数ページの短編ならハードルは低いぞ！

いいアイディアが浮かんで良かった。って普通の人はそうしますよね。

それにしても、最近のAIの進歩の早さには目を見張るものがあります。特にグーグルのAI「アルファ碁」が韓国のイ・セドルを破ったあたりから、本格的に人工知能の可能性・実用性を感じ始めた人が多いのではないでしょうか。

なので自分が今、近未来のつもりで描こうとしてる「サイコボット」はもはや近未来ではない！？

すでに現在進行形かも．．．。

新カテゴリー「ゲーム要素ラボ」

新カテゴリー「ゲーム要素ラボ」を追加しました。

EPUB3形式のモーションコミックにゲーム要素を加えるという試みについてブログに時々書いてますが、「ゲーム要素ラボ」というカテゴリーにまとめることにしました。

モーションコミックの制作・進捗状況などを記したブログページに、ゲーム要素のアイディアが混在していては後で探すのが大変ですからね。

まぁゲーム要素のアイディアといってもそんなにポコポコ閃くわけじゃないし、閃いてから技術的なことを調べていては時間がかかってしょうがないので、前もってゲーム要素ラボで研究しておこうというわけです。

例えば、どのゲームエンジンが自分向きかなどについてもこのラボで試してみる予定。

さて、「ゲーム要素ラボ」の最初の記事として、ゲーム要素入りのモーションコミックをEPUB3形式にして動作チェックしてみました。

「そろそろゲーム的要素を」というタイトルで書いた記事で、SciKoとレナがゲームをするシーン。そのときのゲームを想定して、ランダムに動くキャラ画像と方向キーで動くキャラ画像を作ってみました。

正確に言うと、まだゲーム要素は入ってないけどさわりの部分を作って動作チェックです(*￣∇￣*)b。

ゲームエンジンは「enchant.js」。用意したファイルは以下の4つ。


　enchant.js （ゲームエンジン）
　gameSample.js （キャラ画像の動きを書いたJavaScript）
　gameSample.xhtml （enchant.jsやgameSample.jsを読み込むxhtmlファイル）
　chara.png （キャラ画像）


次に上記4ファイルをEPUB3ファイルにまとめます。

前に作ったEPUB3ファイル（Flashアニメを「ToolkitforCreativeJS」でパブリッシュしEPUB3ファイルにまとめたもの）に1ページ付け足して、「ePubPack」でパッケージングしました。このあたりの手順は、「シンプルなEPUB」「EPUBでモーションコミック」のページなどで詳しく書いたとおりです。

さあ出来上がったEPUB3ファイルをいつものように、「pegina-EPUB-Checker」でエラーがないか検証です。

「No error or warnings detected」と表示されました。問題なしですね。

さていよいよ動作チェック。まずはPC用のEPUBリーダー「Readium」で読み込んでみました。

Flashアニメで作ったモーションコミックが表示されました。ここまでは以前確認済み。

次のページを捲ると、『おおっ、キャラ画像がランダムに動いてる！』というわけで「Readium」での動作は問題なし。

その後、iPadに転送して動作チェックしたところ、上の画像のようにポコポコ動きました。

ちなみに上の画像は画面キャプチャーではなくイメージです。実際は残像などはありません(o^皿^o)ゞ。

それから、方向キーでキャラが動いているように描いてしまいましたが間違いです。Σ(;゜∀゜;;)今気づきました。

「Readium」では方向キーでページが捲れてしまい、iPadにはキーボードがなかったので．．．

本番では画面にバーチャルパッドを付ける予定です。

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

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

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ページ単位の各コンテンツをハイパーリンクで繋げるということでいいんじゃないかと思ってるんですが...。

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

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

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

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

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

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

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