iBooks AuthorのHTMLウィジェットの作り方

Appleが公開した「iPadのiBooks専用電子書籍」が作れる iBooks Author ですが、様々なインタラクティブなギミックを組み込むウィジェットというパーツがあります。その中にHTMLウィジェットというものがあり、公式にはMacのDashboard ウィジェットをインポートするという仕様になっています。

実はこのDashboardウィジェットは、html+javascriptで作成されており、必ずしもDashboard用に作られていなくても、インポートできるようです。これを使って何ができるかをちょっと探ってみました。

Dashboard ウィジェットの作り方

Dashboardウィジェットは最低限、以下のファイルで構成されます。

info.plist ウィジェットの情報定義ファイル
Default.png ウィジェットのサムネイルイメージ
Icon.png ウィジェットのアイコン
index.html ウィジェットの本体html

このうち、Icon.pngはiBooks Authorでは無視されるようで、なくても大丈夫です。この他に、イメージやcssファイルなど、htmlを構成するのに必要なファイルを用意します。

これらのファイルを適当な名前をつけたフォルダに入れ、フォルダの拡張子を.wdgtにすると、アイコンが変化してウィジェットファイルとして認識されます。これをiBooks Authorにドロップすると、インポートすることができます。

info.plistはxmlファイルで、中身は以下のようにウィジェットに必要なプロパティが書かれています。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>AllowNetworkAccess</key>
	<false/>
	<key>CFBundleDisplayName</key>
	<string>test1</string>
	<key>CFBundleIdentifier</key>
	<string>jp.wakufactory.test1</string>
	<key>CFBundleVersion</key>
	<string>1.0</string>
	<key>Height</key>
	<integer>350</integer>
	<key>Width</key>
	<integer>327</integer>
	<key>MainHTML</key>
	<string>index.html</string>
</dict>
</plist>

このうちiBooks Authorのウィジェットで本質的に有効なのは、WidthとHeightとMainHTMLだと思われます。

iBooks Author上でのふるまい

iBooks Authorのページ上に貼付けられたウィジェットは、インラインでサムネイル画像として表示されます。Default.pngがあればそれが表示され、なければMainHTMLで指定したhtmlのサムネイルが表示されます。html中のjavascriptは、貼りつけたときに一度実行されそれがサムネイルとして表示されますが、ページの中では動作しません。

実際にiPadに転送して動作させた場合、サムネイル画像をタップすると全画面になって、ウィジェットとして動作します。左上のxボタンを押すまでは、全画面ウィジェットとしてふるまうわけです。

サムネイルのサイズや、全画面化した時の実際の表示サイズは、info.plistに書かれた通りにはならず、適当に拡大縮小されるようです。全画面化したときのサイズは、Default.pngがあればそのサイズになるようですが、いまいち法則がわかっていません。

htmlウィジェットとしてどこまでできるか

さて、ここまでできれば、html5+javascriptとして動作するものなら、なんでも動きそうな気がします。おそらくは、iBooks上でもWebViewのコンポーネントで表示させているでしょうから、何かしらの機能制限がかかっていなければ、iPadのSafariと同様に動かせるはずです。

このあたりはまだ検証中ですが、いまのところ以下のことがわかっています。

iPad特有のタッチイベントは拾える
localStorageは使えるが、Bookごとのsandboxにはなっていない。したがってキーが重複しないようにする必要があり、セキュアなデータは保存できない。
input等のフォームタグへの入力
jQueryを使って、クロスサイトでのJSON-GET
Dashboardウィジェット用のオブジェクトであるwindow.widgetは存在するようだが、Dashboardの仕様と違うみたい。

というわけで、結構色々できそうです。

サンプル

テスト的に一つbookを作って、ipad-zineで公開してみました。

http://www.ipad-zine.com/b/1411/

上のサイトにiPadでアクセスして、ダウンロードしてiBooksに取り込むことができます。

上の応用例です。こちらはウィジェットも配布してます。
電子教科書に落書きできる。そう、iBooks Authorならね。