iBooks Author は HTML ウィジェット (拡張子は .wdgt) をサポートします。
iBooks Author のための HTML ウィジェットを作成するには、テキストエディタまたは Web コンテンツ作成 App を使って以下のファイルを作成します。
- メイン HTML ファイル：このファイルはウィジェットの主要部分です。ファイル名には任意の名前を付けられますが、拡張子は必ず「.html」にします。CSS や JavaScript をこのメイン HTML ファイルに入れることができます。または、.css ファイルと .js ファイルをウィジェットのバンドルとしてメイン HTML ファイルとのセットにして読み込むこともできます。これらのファイルには、ウィジェットをデザインする際に使えるテクニックやトリックを使用できます。一般的には、HTML でウィジェットの構成を定義して CSS でビジュアルスタイルを提供し、JavaScript でインタラクティビティをサポートします。
- Default.png：これはページに表示される画像で、ユーザがウィジェットを開くためにこれをタップします。ファイル名は必ず、大文字の「D」で「Default.png」とします。Default.png を作成するもっとも簡単な方法として、Web コンテンツ作成 App または Web ブラウザで表示しているメイン HTML ファイルのスクリーンショットを録ります。ウィジェットがアクティブなときに、Info.plist で指定しない限りこの画像は、Default.png の実際のサイズになります。
- Info.plist：このファイルは、ウィジェット実行に必要な情報を iBooks Author と iBooks に提供します。ファイル名は必ず「Info.plist」とします。このファイルの詳細およびサンプルは以下の通りです。
これらの 3 つの必須ファイル (オプションとして CSS またはJavaScript ファイル) を作成したら、ウィジェットバンドルにします。
- Finder を使ってフォルダを作成し、その中にすべてのファイルを追加します。
- フォルダの名前を変更し、フォルダ名に .wdgt 拡張子を追加します。これによりウィジェットバンドルが作成でき、フォルダのアイコンがウィジェットアイコンに変わります。
これで作成したウィジェットを iBooks Author に追加する準備ができました。
注意
- ファイル名にコントロール文字が使われているファイル が HTML ウィジェットに含まれていると、iBooks Store にブックを公開できません。ウィジェットのバンドルを作成する前に、バンドルに入っているファイルの名前にコントロール文字が使われていないことを確認してください。カスタムアイコンを使ったフォルダは使わないでください。
- ウィジェットバンドルの中には、以下のフォルダ名は使用しないでください。
- Resources/
- Support Files/Resources/
- Contents/Resources/
- iPad Retina ディスプレイモデルや Mac 用にコンテンツを作成する場合は、以下の点に注意してください。
- HTML、CSS、および JavaScript ファイルのコーディングの際は、Retina (2x) グラフィックスでの Web サイト作成の標準プロトコルに従ってください。
- ウィジェットバンドルに、Default.png ファイルの 2 倍の解像度の Default@2x.png ファイルを必ず入れます。このファイルは、iBooks Author では表示できませんが、iPad Retina ディスプレイモデルや Mac の iBooks では表示できます。
- ズームインしたときにウィジェットが全画面表示されるようにするには、Default.png のサイズを 768 x 1024 ピクセルに、Default@2x.png のサイズを 1536 x 2048 ピクセルにします。全画面より小さいサイズでウィジェットを表示するには、Default.png のサイズを、ウィジェットを表示したいサイズ (600 x 900 など) に指定し、Default@2x.png をその 2 倍のサイズにします。
- iBooks Author で作成したブックを最適化する方法については、こちらの記事 を参照してください。
Info.plist
基本的なウィジェットの Info.plist には必須キーとオプションのキーが含まれます。次の表は、「Hello World」というウィジェットを例にした、キー、値の例、および定義のリストです。
| キー | 値の例 | 定義 |
| CFBundleDevelopmentRegion | English | 任意。バンドルのネイティブとなる地域を指定する文字列です。通常はバンドル開発者の母国語に対応しています。 |
| CFBundleDisplayName | Hello World | 必須。ウィジェットの実際の名前を含めた文字列で、iBooks Author と iBooks に表示されます。 |
| CFBundleIdentifier | com.apple.widget.HelloWorld | 必須。ウィジェットを識別する文字列で、逆ドメインフォーマットです。 |
| CFBundleName | Hello World | 任意。ウィジェットの名前を含める文字列です。Finder のウィジェットバンドルの名前からファイル拡張子の「.wdgt」を取り除いたものと一致している必要があります。 |
| CFBundleShortVersionString | 1.0 | 任意。ウィジェットの省略されたバージョン番号を示す文字列です。通常は CFBundleVersion と同一です。 |
| CFBundleVersion | 1.0 | 任意。ウィジェットのバージョン番号を示す文字列です。 |
| Height | 768 | 任意。ウィジェットの高さをピクセルで指定する数値です。これが指定されていない場合は Default.png の高さが使用されます。 |
| MainHTML | HelloWorld.html | 必須。ウィジェットを実行する HTML ファイルの名前を指定する文字列です。 |
| Width | 1024 | 任意。ウィジェットの幅をピクセルで指定する数値です。これが指定されていない場合は Default.png の幅が使用されます。 |
| IBNotifiesOnReady | <true/> | 任意。true に設定されている場合は、Default.png ファイルの表示から実行中の HTML ウィジェットの表示に切り替えるタイミングをウィジェットが iBooks に通知します。 |
ウィジェットの完全な Info.plist は以下のように表示されます。
<?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>CFBundleDevelopmentRegion</key> <string>English</string> <key>CFBundleDisplayName</key> <string>Hello World</string> <key>CFBundleIdentifier</key> <string>com.apple.widget.HelloWorld</string> <key>CFBundleName</key> <string>Hello World</string> <key>CFBundleShortVersionString</key> <string>1.0</string> <key>CFBundleVersion</key> <string>1.0</string> <key>Height</key> <integer>768</integer> <key>MainHTML</key> <string>HelloWorld.html</string> <key>Width</key> <integer>1024</integer> <key>IBNotifiesOnReady</key> <true/></dict></plist>
規制と制限事項
サポートされていない機能もあります。以下のキーは使用できません。
| キー | 説明 |
| AllowFileAccessOutsideOfWidget | iBooks Author で作成されたブックのウィジェットは、一般のファイルシステム内のファイルにはアクセスできません。 |
| AllowFullAccess | ほかのアクセスキーのリストの短縮形で、対応しないものもあります。 |
| AllowInternetPlugins | Flash などのインターネットプラグインは iBooks Author で作成されたブックでは利用できません。ムービーまたはオーディオは、HTML5 の <video> 要素または <audio> 要素を使って埋め込むことができます。 注意：HTML ウィジェット内のムービーとオーディオは DRM により保護されません。 |
| AllowJava | iBooks Author で作成したブックのウィジェットは Java コンテンツを含めることはできません。 |
| AllowSystem | iBooks Author で作成したブックのウィジェットはシステムコマンドにアクセスできません。 |
| Plugin | iBooks Author で作成したブックのウィジェットには Cocoa プラグインコンポーネントを入れることはできません。 |
iBooks Author では以下のキーを無視します。
| キー | 説明 |
| CloseBoxInsetX | iBooks Author と iBooksのウィジェットはクローズデコレーションを表示しません。 |
| CloseBoxInsetY |
|
| Fonts | iBooks Author のウィジェットは、バンドルされたフォントを使用できません。 |
ムービーとオーディオの必要条件
ファイルの拡張子が「.m4v」または「.m4p」のメディアは使えません。
ファイル拡張子「.mp4」の MPEG-4 コンテナで H.264 ビデオを使用することが推奨されています。
オーディオには、ファイル拡張子「.m4a」の MPEG-4 コンテナで AAC オーディオを使用することが推奨されています。
注意：HTML ウィジェットバンドルのビデオまたはオーディオメディアは DRM により保護されません。
注意：場合によっては HTML ウィジェットのムービーファイルまたはオーディオファイルが iBooks Author で再生できないことがありますが、iBooks では再生できます。iBooks Author のウィジェットでムービーファイルやオーディオファイルを再生できない場合は、iPad または OS X Mavericks でプレビューしてみます。完成したブックでファイルがどのように再生されるかを見ることができます。
ローカライズ
ローカライズされた文字列は iBooks Author ではサポートされません。このため、ユーザに表示する文字列インラインをターゲット言語に記入する必要があります。
クリップされた要素
<video> 要素などの要素がクリップされているように見える場合は、表示されている領域より大きい領域に拡大されている可能性があります。「#video」セレクタの「width:auto」を CSS で確認し、実際のサイズに変更します。たとえば、ウィジェットに 960 x 540 のサイズのビデオがある場合、該当するセレクタを CSS で確認し、以下のように正しい幅と高さの値に指定します。
#video { width: 960; height: 540;}iOS および OS X Mavericks 用に開発する
iOS と OS X は入力方式が異なります。iBooks Author 用の HTML ウィジェットに、標準ジェスチャでは操作できないコントロールを使う場合は、タッチ操作とマウス操作の両方に対応するよう注意する必要があります。
HTML ウィジェットの起動
HTML ウィジェットの複雑さにもよりますが、iBooks でウィジェットを起動するときに HTML の初期化中にちらつきが見られることがあります。このようなちらつきを避けるには、ウィジェットを変更して、Default.png ファイルの表示から HTML ウィジェットの表示に切り替えるタイミングを iBooks に通知するようにします。
このオプションの機能を追加するには、以下の 3 つの変更を実行します。
- 該当する ウィジェットの info.plist ファイルで、IBNotifiesOnReady 項目を true に設定します。これで、この ウィジェットが、実行中の HTML ウィジェットの表示に切り替えるタイミングを iBooks に通知することができます。
<key>IBNotifiesOnReady</key><true/>
- HTML ファイルの HEAD の位置に、Apple JavaScript ライブラリを読み込むようにウィジェットを設定します。
<script type="text/javascript" src="AppleClasses/AppleWidget.js"> </script>
注意：AppleWidget.js は、すでに iPad に存在しており、ウィジェットのバンドルに入れる必要はありません。 - HTML 初期化が開始されたら iBooks に通知するようウィジェットを設定します。これで iBooks は、以下の関数の呼び出し (HTML ファイルの HEAD の位置に埋め込んだ JavaScript 内で) で、Default.png ファイルの表示から実行中の HTML ウィジェットの表示に切り替えます。
widget.notifyContentIsReady()
重要：ちらつきを避けるために HTML ウィジェットを変更する場合は、必ず上記 3 つの手順すべてを実行するようにしてください。正しく機能するためには上記すべての手順を実行する必要があります。
外部 Web サービスへの投稿について
HTML ウィジェットは、外部 Web サービスが適切な CORS (Cross-Origin Resource Sharing) ヘッダ を実装している場合のみ、投稿することができます。