マルチタッチコミック【ナナのかぼちゃパン】をiBooks Authorで制作中です。
現在、マンガの舞台である「青葉の森ベーカリー」というパン屋さんの店内を作成中で、上の画像は一部分をレンダリング後ちょっとレタッチしたもの。焼きたてパンの雰囲気を出すのは難しいけど、暖色系の色味を強調して冷えてない感じに出来ました。でもいかんせん品薄。もっといろいろな種類を用意しなくては。
ところで前回のブログ（6/29）では、HTMLウィジェットによる表示がうまくいかず行き詰っちゃってました。
iPadの画面をタップしてHTMLウィジェットを起動すると、ウィジェット内の画像の周りに余白が生じてしまう、という問題点でした。つまりウィジェット領域の角にマージン0できっちりと画像を置きたいわけなのに、余白ができてしまい困っていたわけです。
その問題は解決しました。
『たぶん原因はこれに違いない...』とか『こうやってみたらどうだろう...』とか思いつくままに試してみてもどうしても余白が出てしまうので、基本に立ち返ってDashboardウィジェットに必要なファイルを新たに一から揃えてやり直してみたわけです。
・info.plist
・Default.png
・Icon.png
・index.html
・imagesフォルダ
・voicesフォルダ
上記ファイルを新たに揃えました。imagesフォルダとvoicesフォルダには、それぞれ画像ファイルと音声ファイルが入っています。
info.plistのWidthとHeightはそれぞれ、<key>Width</key><integer>1024</integer><key>Height</key><integer>768</integer>と記述。
Default.pngの画像サイズがウィジェット実行時のサイズになるようなので、Default.pngの画像は、1024x768サイズで作成。Icon.pngも念のために同じく1024x768で作成。
それから、index.htmlの<body>要素のstyle属性でwidthとheightを style='width:1024px; height:768;' と記述。
上記ファイルをpage1フォルダに入れて、拡張子wdgtをつけ、page1.wdgtというDashboardウィジェットを作成。
『さあ、これでだめだったらもうわからん...』と思いつつ、iBooks Authorでオーサリング開始。
ウィジェットオブジェクトにpage1.wdgtをドラッグ＆ドロップし、ウィジェットインスペクタのレイアウトを開き、「タイトル」「見出し」「背景」のチェックボックスのチェックをはずす。
次に、位置と回転インスペクタを開き、サイズを幅1024pt、高さ768ptに設定。位置は、X 0pt、Y 0ptに設定。
『ほんとにこれでだめだったら打つ手がないよな...』とか思いつつiPadをMacに接続。iPadでiBooksを起動して、iBooks Authorのプレビューをクリック。
コンテンツがiPadに転送され、自動的に開く。
iPadを横向きにして、セクション1のページをタップ。
『おおっ、なんてこった！ちゃんと表示されてるじゃないか！(≧▽≦)ノ』1ピクセルの余白もなく、ぴったりと1024x768のサイズで表示されてるではありませんか。
というわけで、この問題点は解決しました。
初めから上記のような普通の手順でちゃんと作成すれば、何ら問題は起こらなかったかもしれません。でも私の場合、iBooks Authorに期待するあまり、いきなりパラパラアニメを試してみたり、縦向き時・横向き時の見せ方をどうするか等、自分にとって必要な箇所ばかりに目がいってました。そのため、思いがけないところでつまずき時間を取られてしまったのかもしれません。
それからもう一つの問題点...と自分で勝手に思い込んでいた、背景画像とウィジェットの融合。
これはぜんぜん問題でも何でもありませんでした。
というのは、まず読者がページを開くと静止画が表示されている → その画面をタップすると、静止画の上に重ねられた透明なウィジェットが起動 → マルチタッチコミック開始
という流れが自分の頭の中に出来ていてしまったため、静止画の上にウィジェットを重ねなければならない、と決め付けていたんですね。
ウィジェットの中に静止画も含めてしまって、その静止画を背景としてその上でアニメを動かせば何ら問題ないわけです。ウィジェットは透明にして静止画の上に重ねると思い込んでいたため、そんな簡単なことも思いつきませんでした。
ちょっと頭が硬直化しているようです。いつもなら悩むような問題ではないはずですが。
少し気分転換が必要かもしれません。
玄関に置いてあるゴーヤの鉢植えを時々見に行って、『もう少し育ったらゴーヤチャンプルーにしよう』と眺めているだけでは、気分転換にはならないようです。
※コメント投稿者のブログIDはブログ作成者のみに通知されます