う～む、うまくいきませんねぇ...早くも壁にぶち当たってしまいました。
ここ2～3日打開策を探ってたんですけど、良いアイデアが思い浮かびません。
上の画像は、iPad横向き時の本編1ページ目です。短編マルチタッチコミック【ナナのかぼちゃパン】の舞台である「青葉の森ベーカリー」を描きました。
といっても店の中はまだ空っぽ。店内のインテリアや食パン・菓子パンなどは、次のページで細かく描くのでその時にこの画像も差し替える予定です。
とここまでは良かったんですが、この画像をiBooks Authorで横向き時セクション1に読み込んで、『さあ、次はHTMLウィジェットでふきだしを一つずつぽっぽっと表示しつつ音声再生だ！』と元気良く取り掛かった私でした。
ところがそれからが大変。
HTMLとCSSでふきだしを思い通りに配置して、それをJavaScriptで操るというのは、異様にめんどくさくて時間がかかる作業でした。
FlashやXcodeというパワフルなツールでの制作に比べると、急激に自由度を奪われてしまった感じです。
それでもdivタグ等を使って段組し、何とかふきだしを配置。
ふきだし表示のタイミングは、setTimeout関数を使いました。
setTimeout("showFukidashi()", 1000);
function showFukidashi(){
1つ目のふきだし表示;
音声再生;
2つ目のふきだし表示のsetTimeout関数実行;
}
上記の要領で、ウィジェット起動後1000ミリ秒、つまり1秒後に1つ目のふきだしを表示し、同時に音声も再生するわけです。
音声は自分の声で録音したダミーを使用。最終的には声優さんにお願いするつもりですが。
さて、Safariで動作確認。
『ねえ、この間のパン、ほしいんだけど...』
よし、ふきだし表示後に、私の聞き慣れたような慣れないような恥ずかしげな声がちゃんと再生されました。
とここまではタイマー処理が無事うまくいったことで気を良くしていたのですが、問題はその後に控えていました。
Dashboardウィジェットに固めて（このあたりの手順は5/2のブログのとおりです）、セクション1のベーカリー画像の上に配置。
ウィジェットの動作はiPad上でないと確認できないので、MacにiPadを接続、iBooksリーダーを起動し、iBooks Authorのプレビューボタンをクリック。
iPadにiBooks Authorでオーサリング中のコミックがコピーされ、本棚にアイコンが表示されました。
『よし、ちゃんと動くかな』とiPadを横向きにして、セクション1の1ページ目を開きタップ！
俊敏とまではいかないけど、まあまあの反応でウィジェット起動。
HTMLウィジェットはフル画面で開くんですね。でも画像の周りに白い余白ができてしまい画像全体が表示されません。1024x768で作ってあるので、ぴったりいくと思ったんですが。
でこの後、Default.pngというサムネイル画像をフル画面サイズ（1024x768）で作って、Dashboardウィジェットに固めてみたり、いろいろ試してみたけどまだ白い余白が消えません。
さらに問題なのは、上記の問題が解決したとしても、ウィジェットの下の背景画像と融合しながらウィジェットが動いてくれないとうまくありません。背景を完全におおい隠してウィジェットが動いているのでは、私のイメージするマルチタッチコミックと違うので。
というわけでここ数日悩んでいました。
まだ解決策がひらめかないのでもうしばらく試行錯誤してみます。