iBooks Author:關於製作 HTML widget

您可以製作 HTML5 widget,然後將其用於 iBooks Author 中所製作的書籍。

iBooks Author 支援 HTML5 widget(副檔名為 .wdgt)。

若要建立 iBooks Author 的 HTML widget,請使用文字編輯器或網頁內容製作 app,建立下列網站:

  • 主要 HTML 檔案:這個檔案是 widget 的主要部分。可以將它命名為任何您想要的名稱,但是副檔名必須是「.html」。您可以將 CSS 和 JavaScript 放在主要 HTML 檔案內,或將 .css 和 .js 檔案新增到 widget 套件,並設定主要 HTML 檔案載入這些檔案。設計網頁時,您可以在這些檔案中使用任何技術或技巧。一般而言,您可以使用 HTML 定義 widget 的結構、用來提供視覺樣式的 CSS,以及支援互動功能的 JavaScript。
  • Default.png:這是頁面上將顯示的影像,而且使用者點選這個影像即可開啟 widget。它的名稱必須是「Default.png」,字母「D」必須大寫。若要建立 Default.png,最簡單的方式是對於網頁內容製作 app 或網頁瀏覽器中執行的主要 HTML 檔案建立螢幕擷取畫面。除非您在 Info.plist 中指定不同的大小,否則在 widget 啟動時,它將是 Default.png 的大小。
  • Info.plist:這個檔案為 iBooks Author 和 iBooks 提供執行 widget 所需的資訊。它的名稱必須是「Info.plist」。詳細資料和範例如下。

建立三個必要的檔案(以及其他一些非必要的檔案,例如 CSS 或 JavaScript)後,即可將這些檔案組合為 widget 套件:

  1. 使用 Finder,建立檔案夾,並在其中加入這些檔案。
  2. 將檔案夾重新命名,並在檔案夾名稱中加入 .wdgt 副檔名。這將建立 widget 套件,而且檔案夾圖示將變更為 widget 圖示。

Widget 現在即可新增到 iBooks Author 中。

附註

  • 您的書籍包含 HTML widget,其中有控制字元出現在檔案名稱中的檔案,則無法發佈到 iBooks Store。在製作 widget 套件之前,請確定套件中沒有任何一個檔案會使用檔名中的這些字元。請勿使用自定檔案夾圖像。
  • 避免將這些名稱的檔案夾包含在 widget 套件中:
    • 資源/
    • Support Files/Resources/
    • Contents/Resources/
  • 如果您要針對配備 Retina 顯示器的 iPad 或 Mac 製作內容:
    • 將 HTML、CSS 及 JavaScript 檔案編碼時,請依照使用 Retina(2x)圖形建立網站的標準通訊協定。 
    • 您的 widget 套件應該包含 Default@2x.png 檔案,這個檔案的解析度應該是 Default.png 檔案的兩倍。您無法在 iBooks Author 中檢視這個檔案,但是在配備 Retina 顯示器的 iPad 或 Mac 上,這個檔案將出現在 iBooks 中。 
  • 如果您要在進行縮放時使 widget 全螢幕顯示,請將 Default.png 設定為 768 x 1024 像素,並將 Default@2x.png 設定為 1536 x 2048 像素。如果要使 widget 以小於全螢幕的尺寸顯示,請將 Default.png 設定為要 widget 顯示的尺寸(例如 600 x 900),並將 Default@2x.png 設定為該尺寸的兩倍。
  • 進一步了解最佳化以 iBooks Author 製作的書籍

Info.plist

基本 widget 的 Info.plist 包含一些必要的鍵值及一些選用的鍵值。這些鍵值將列於下方,並列出鍵值的定義,以及稱為「Hello World」widget 的一些範例值。 

CFBundleDevelopmentRegion 英文 選用. 指定套件原生區域的字串。這通常對應於建立套件的人所用的母語。 
CFBundleDisplayName Hello World 必要. 包含 widget 實際名稱的字串,該名稱將在 iBooks Author 和 iBooks 中顯示。
CFBundleIdentifier com.apple.widget.HelloWorld 必要. 唯一識別 widget 的字串,這是以反向網域格式所呈現。
CFBundleName Hello World 選用. 包含 widget 名稱的字串。它必須符合 Finder 中的 widget 套件名稱,但不顯示 .wdgt 副檔名。
CFBundleShortVersionString 1.0 選用. 提供 widget 簡短版本編號的字串。它通常與 CFBundleVersion 相同。
CFBundleVersion 1.0 選用. 提供 widget 版本編號的字串。
高度 768 選用. 提供 widget 高度(單位為像素)的數字。如果未指定,將使用 Default.png 的高度。
MainHTML HelloWorld.html 必要. 提供實作 widget 的 HTML 檔案名稱的字串。
寬度 1024 選用. 提供 widget 寬度(單位為像素)的數字。如果未指定,將使用 Default.png 的寬度。
IBNotifiesOnReady <true/> 選用. 如果設定為 true,widget 將通知 iBooks 何時從顯示 Default.png 切換為顯示執行中的 HTML widget。 

widget 完整的 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 建立的書中出現的 widget 無法存取一般檔案系統中的檔案。
AllowFullAccess 其他存取鍵值的縮寫,有的並不相容。
AllowInternetPlugins 以 iBooks Author 建立的書籍不提供 Internet 外掛模組,例如 Flash。透過 HTML5 <video> 及 <audio> 元素可分別包含影像及音訊。
附註:HTML widget 內的影片和音訊無法受到數位版權管理功能的保護。
AllowJava 以 iBooks Author 建立的書中出現的 widget 無法包含 Java 內容。
AllowSystem 以 iBooks Author 建立的書中出現的 widget 無法存取系統指令。
Plugin 以 iBooks Author 建立的書中出現的 widget 無法包含 Cocoa 外掛模組組件。

iBooks Author 會忽略以下鍵值:

CloseBoxInsetX iBooks Author 及 iBooks 中的 widget 不會顯示 close 裝飾。
CloseBoxInsetY 您可能在 Dock 中的 App Store 圖像上看到標記出現,而且顯示可用軟體更新項目的數字。

您可能在 Dock 中的 App Store 圖像上看到標記出現,而且顯示可用軟體更新項目的數字。

Fonts iBooks Author widget 無法使用隨附字體。

影片及音訊需求

您不能使用副檔名是「.m4v」或「.m4p」的媒體。 

建議在「.mp4」副檔名的 MPEG-4 容器中使用 H.264 視訊。

對於音訊,建議在「.m4a」副檔名的 MPEG-4 容器中使用 AAC 音訊。

附註:HTML widget 套件中的視訊和音訊媒體,無法受到數位版權管理功能的保護。

附註:在某些情況下,HTML widget 中的影片及音訊檔案無法在 iBooks Author 中播放,但是會在 iBooks 中播放。如果 widget 中的影片或音訊檔案無法在 iBooks Author 中播放,請嘗試在 iPad 上或 OS X Mavericks 中預覽。這應該會顯示檔案將如何在您完成的書中播放。

本地化

iBooks Author 不支援本地化字串及資產。因此,使用者可見的文字字串應該納入目標語言中。

遭裁剪的元素

如果 <video> 元素等元素有一端遭裁剪,原因可能是因為延伸而填滿比可視區域更大的空間。對於 CSS 檢查 #video 選擇器中的「width:auto」,並加以變更,以反映實際尺寸。例如,如果 widget 包含 960 x 540 大小的視訊,則對於 CSS 檢查相關選擇器,並且將寬度及高度明確設定為正確的值:

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

針對 iOS 和 OS X Mavericks 同時適用來開發

iOS 和 OS X 使用完全不同的輸入類型,所以當您針對 iBooks Author 製作 HTML widget 時,如果您想要使用非標準手勢處理的任何控制類型,將需要確定同時顧及觸控處理和滑鼠處理。

 

開啟 HTML widget

讀者以 iBooks 開啟 widget 時,可能在 HTML 初始化期間看到閃光,不過要看 HTML widget 的複雜程度而定。如果要避免出現閃光,請修改您的 widget,讓 widget 通知 iBooks 何時從顯示 Default.png 檔案切換為顯示執行中的 HTML widget。

有三個修改必須進行,才能新增這個選用功能:

  1. 在 widget 的 info.plist 檔案中,加入設成「true」的「IBNotifiesOnReady」項目,讓 iBooks 知道這個 widget 會通知 iBooks 何時該切換為顯示執行中的 HTML widget:
    <key>IBNotifiesOnReady</key><true/>
  2. 在 HTML 檔案的 HEAD 部分中,設定 widget 載入 Apple JavaScript 程式庫:
    <script type="text/javascript" src="AppleClasses/AppleWidget.js"></script>
    附註:iPad 上已有 AppleWidget.js,因此不需要將此檔案加進 widget 套件。

  3. 設定 widget 讓 iBooks 知道 HTML 何時初始化,而且 iBooks 可以透過呼叫(在 HTML 檔案的 HEAD 部分中包含的 JavaScript 中)從顯示 Default.png 檔案切換為顯示執行中的 HTML widget:
    widget.notifyContentIsReady()

重要事項:如果您選擇以修改 HTML widget 的方式避免閃光問題,以上三個步驟就一個都不能少。您必須完成這三道步驟才能使功能正常。

關於發佈到外部 Web 服務

如果外部 Web 服務已實施適當的 CORS(跨來源資源共享,Cross-Origin Resource Sharing)標頭,HTML widget 就只能發佈到外部 Web 服務。

發佈日期: