iBooks Author 用の HTML5 ウィジェットを作成する

iBooks Author で作成するブックで使える HTML5 ウィジェットの作り方について説明します。

iBooks Author は HTML5 ウィジェット (ファイル拡張子は .wdgt) をサポートしています。HTML5 ウィジェットを作成するには、テキストエディタやコンテンツ作成 App を使って、以下の 3 つのファイルを作成します。

  • メイン HTML ファイル:このファイルはウィジェットの主要部分です。ファイル名には任意の名前を付けられますが、拡張子は必ず「.html」にします。CSS や JavaScript をこのメイン HTML ファイルに入れることができます。または、.css ファイルと .js ファイルをウィジェットバンドルに追加して、メイン HTML ファイルから読み込むこともできます。Web ページのデザインで通常使うテクニックなら何でも使えます。HTML でウィジェットの構造を定義し、CSS でビジュアルスタイルを決めて、JavaScript でインタラクティブに仕上げましょう。 
  • 「Default.png」ファイル:Web コンテンツ作成 App または Web ブラウザでメイン HTML ファイルのスクリーンショットを撮れば、いちばん手っ取り早く「Default.png」を作成できます。これがページに表示される画像となり、読者はこれをクリックしてウィジェットを開きます。Web ブラウザまたは Web コンテンツ作成 App で、メイン HTML ファイルのスクリーンショットを撮り、「Default.png」という名前を付けてください。必ず、大文字の「D」を使います。ウィジェットが有効になったときのサイズは、「Default.png」ファイルの実際のサイズです。このサイズは、「Info.plist」ファイルで変更できます。
  • 「Info.plist」ファイル:iBooks Author や iBooks に対し、ウィジェットの実行に必要な情報を伝えるファイルです。ファイル名は必ず「Info.plist」にします。

これらの必須ファイルを作成した後で、CSS や JavaScript ファイルなど、必要なオプションのファイルを作成します。作成したら、すべてウィジェットバンドルに追加してください。

  1. Finder で、フォルダを作成します。
  2. この新しいフォルダに、必要なファイルをすべて追加します。
  3. フォルダの名前を変更し、拡張子「.wdgt」を付けて、ウィジェットバンドルを作成します。フォルダのアイコンがウィジェットのアイコンに変わります。
  4. ウィジェットを iBooks Author に追加します。

ウィジェット作成のヒント

ウィジェットバンドルを作成する前に、ファイル名に制御文字が使われているファイルがないか確認してください。使われているものが 1 つでもあると、ブックを iBooks Store に公開できなくなります。

ウィジェットを自動再生するように設定する場合、そのウィジェットではインターネットにアクセスできません。 

カスタムのフォルダアイコンは使わないでください。また、以下のフォルダ名をウィジェット内で使うことも避けてください。

  • Resources/
  • Support Files/Resources/
  • Contents/Resources/

ウィジェットを Retina ディスプレイ対応にするには、以下の点に注意してください。

  • HTML、CSS、JavaScript ファイルでは、Web サイト作成の標準プロトコルに従いますが、Retina 対応 (2 倍) のグラフィックを用意してください。 
  • 「Default@2x.png」ファイルをウィジェットに入れておきます。このファイルの解像度は「Default.png」ファイルの 2 倍にします。このファイルは iBooks Author では確認できませんが、Retina ディスプレイ上の iBooks で表示できます。

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 のメディアは使えません。以下のいずれかのフォーマットで、ファイル拡張子が .m4p のものを使ってください。

  • H.264 ビデオ:最大 720p、毎秒 60 フレーム、ハイプロファイルレベル 4.2 (最大 160 Kbps の AAC-LC オーディオ)、48 kHz、ステレオオーディオ。720p の HD 画質オプションで iMovie 10 で開いたビデオでは、このような設定が使われます。
  • MPEG-4 ビデオ:最大 2.5 Mbps、640 x 480 ピクセル、毎秒 30 フレーム、シンプルプロファイル (1 チャンネルあたり最大 160 kbps の AAC-LC オーディオ)、48 kHz、ステレオオーディオ

オーディオには、ファイルの拡張子が .m4a の AAC (8 〜 320 Kbps、48 kHz のステレオ) を使います。

HTML ウィジェットバンドル内のビデオとオーディオは DRM で保護されません。

ムービーファイルやオーディオファイルが iBooks Author のウィジェットで再生されない場合は、iPhone、iPad、または Mac でプレビューしてみます。完成したブックでファイルがどのように再生されるかを見ることができます。

ローカリゼーション

iBooks Author は、ローカライズされた文字列やアセットには対応していません。読者に対してインラインで表示するテキスト文字列をターゲット言語で記入してください。

クリップされた要素を修正する

<video> などの要素が、片側がクリップされたように見えることがあります。要素のサイズが使用可能な領域よりも大きい場合に、こうした現象が起きることがあります。CSS の「#video」セレクタで「width:auto」を探し、実際のサイズを反映するように変更してください。たとえば、ウィジェットにサイズが 960 x 540 のビデオが入っている場合は、CSS で該当するセレクタを探し、width と height を正しい値に設定します。

#video   {
	width: 960;
	height: 540;
}

iOS および mac OS 用に開発する

iOS と macOS とでは、入力方式が異なります。iBooks Author 用の HTML ウィジェットを作成する際は、タッチ入力とマウス入力の両方に対応できます。

  • iOS のタッチイベントについては、こちらを参照してください。
  • OS X のマウスイベントについては、こちらを参照してください。

HTML ウィジェットを開いたときのちらつきを防止する

HTML ウィジェットが複雑になると、iBooks で開いたときにちらつく場合があります。こうしたちらつきを避けるには、ウィジェットを変更し、「Default.png」ファイルから HTML ウィジェットに表示を切り替えるタイミングを iBooks に指定してください。

1. ウィジェットの「Info.plist」ファイルに「IBNotifiesOnReady」を追加し、その値を true に設定します。これで、HTML ウィジェットに切り替えるタイミングをウィジェットから iBooks に通知できるようになります。

<key>IBNotifiesOnReady</key>
 <true/>






2. HTML ファイルの <head> 部で、Apple JavaScript ライブラリを読み込むようにウィジェットを設定します。

<script type="text/javascript" src="AppleClasses/AppleWidget.js"> </script>

iOS や macOS には「AppleWidget.js」が用意されているので、ウィジェットバンドルに入れておく必要はありません。

3. HTML が初期化されたら iBooks に通知するように、ウィジェットを設定します。HTML ファイルの <head> に読み込んだ JavaScript で、以下の関数を呼び出します。

widget.notifyContentIsReady()

外部 Web サービスに投稿する

HTML ウィジェットは、Cross-Origin Resource Sharing (CORS) ヘッダを使っている外部 Web サービスにのみ投稿できます。

公開日: