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 套件:
- 使用 Finder,建立檔案夾,並在其中加入這些檔案。
- 將檔案夾重新命名,並在檔案夾名稱中加入 .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。
有三個修改必須進行,才能新增這個選用功能:
- 在 widget 的 info.plist 檔案中,加入設成「true」的「IBNotifiesOnReady」項目,讓 iBooks 知道這個 widget 會通知 iBooks 何時該切換為顯示執行中的 HTML widget:
<key>IBNotifiesOnReady</key><true/>
- 在 HTML 檔案的 HEAD 部分中,設定 widget 載入 Apple JavaScript 程式庫:
<script type="text/javascript" src="AppleClasses/AppleWidget.js"></script>
附註:iPad 上已有 AppleWidget.js,因此不需要將此檔案加進 widget 套件。 - 設定 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 服務。