iBooks Author는 확장자가 .wdgt인 HTML5 위젯을 지원합니다.
iBooks Author용 HTML 위젯을 생성하려면 텍스트 편집기 또는 웹 콘텐츠 생성 App을 사용하여 다음 파일을 생성합니다.
- 기본 HTML 파일: 이 파일은 위젯의 주요 부분입니다. 원하는 이름을 지정할 수 있지만 확장자가 '.html'이어야 합니다. 기본 HTML 파일 안에 CSS 및 JavaScript를 넣거나 위젯 번들에 .css 및 .js 파일을 추가하고 기본 HTML 파일을 설정하여 로드할 수 있습니다. 웹 페이지를 설계할 때 이러한 파일에서 사용하고 싶은 기술이나 요령을 모두 사용할 수 있습니다. 일반적으로 위젯의 구조, 표시 스타일을 제공하는 CSS 및 상호 작용을 지원하는 JavaScript를 정의하기 위해 HTML 파일을 사용합니다.
- Default.png: 페이지에 나타나는 이미지로 사용자가 탭하면 위젯이 열립니다. 이름은 대문자 'D'로 시작하는 'Default.png'여야 합니다. Default.png를 생성하는 가장 쉬운 방법은 웹 콘텐츠 생성 App 또는 웹 브라우저에서 실행 중인 기본 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/
- Retina 디스플레이가 있는 iPad 또는 Mac용 콘텐츠를 생성하려는 경우
- HTML, CSS 및 JavaScript 파일을 코딩할 때 Retina(2x) 그래픽으로 웹 사이트를 생성하는 표준 프로토콜을 따릅니다.
- 위젯 번들에 Default.png 파일 해상도의 두 배가 되는 Default@2x.png 파일이 들어가야 합니다. 이 파일은 iBooks Author에서 볼 수 없지만 Retina 디스플레이가 있는 iPad 또는 Mac의 iBooks에 표시됩니다.
- 확대할 때 위젯이 전체 화면으로 보이게 하려면 Default.png는 768x1024 픽셀로, Default@2x.png는 1536x2048 픽셀로 만듭니다. 위젯이 전체 화면보다 작게 표시되게 하려면 Default.png는 위젯을 표시할 크기로 만들고(예: 600x900) Default@2x.png는 해당 크기의 두 배로 만듭니다.
- 자세한 내용은 iBooks Author를 사용하여 책 최적화를 참조하십시오.
The 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 | 선택 사항. 위젯의 버전 번호를 제공하는 문자열입니다. |
| 높이 | 768 | 선택 사항. 위젯의 높이를 픽셀로 제공하는 숫자입니다. 지정하지 않으면 Default.png의 높이가 사용됩니다. |
| MainHTML | HelloWorld.html | 필수. 위젯을 실행하는 HTML 파일의 이름을 제공하는 문자열입니다. |
| 너비 | 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 <비디오> 및 <오디오> 요소를 통해 포함될 수 있습니다. 참고: HTML 위젯 내부의 동영상과 오디오는 DRM으로 보호되지 않습니다. |
| AllowJava | iBooks Author로 생성된 책의 위젯에는 Java 콘텐츠가 들어갈 수 없습니다. |
| AllowSystem | iBooks Author로 생성된 책의 위젯은 시스템 명령에 액세스할 수 없습니다. |
| 플러그인 | iBooks Author로 생성된 책의 위젯에는 Cocoa 플러그인 구성요소가 들어갈 수 없습니다. |
iBooks Author는 다음과 같은 키를 무시합니다.
| 키 | 설명 |
| CloseBoxInsetX | iBooks Author 및 iBooks의 위젯은 닫는 장식을 표시하지 않습니다. |
| CloseBoxInsetY |
|
| 서체 | 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 선택기에서 'width:auto'에 대한 CSS를 확인하고 실제 크기를 반영하도록 변경합니다. 예를 들어 위젯에 크기가 960x540인 비디오가 있는 경우 관련 선택기에 대해 CSS를 확인하고 높이와 너비를 올바른 값으로 명시적으로 설정합니다.
#video { width: 960; height: 540;}iOS 및 OS X Mavericks용 개발
iOS와 OS X에서는 기본적으로 서로 다른 입력 유형을 사용하므로 iBooks Author용 HTML 위젯을 생성할 때 표준 제스처로 처리되지 않는 유형의 컨트롤을 사용하려면 터치 처리와 마우스 처리가 둘 다 가능하도록 해야 합니다.
HTML 위젯 열기
HTML 위젯의 복잡함 정도에 따라 독자가 iBooks에서 위젯을 열면 HTML을 초기화하는 도중 깜박임 문제가 발생할 수 있습니다. 깜박임 문제를 방지하려면 Default.png 파일 표시에서 실행 중인 HTML 위젯 표시로 언제 전환해야 하는지 iBooks에 알릴 수 있도록 위젯을 수정하십시오.
이 옵션 기능에 추가해야 하는 수정 사항이 세 가지 있습니다.
- iBooks가 실행 중인 HTML 위젯 표시로 언제 전환해야 하는지 이 위젯에서 알려준다는 것을 알 수 있도록 'true'로 설정된 'IBNotifiesOnReady' 항목 세트를 위젯의 info.plist 파일에 추가합니다.
<key>IBNotifiesOnReady</key><true/>
- HTML의 파일의 HEAD 부분에서 Apple JavaScript 라이브러리를 로드하도록 위젯을 설정합니다.
<script type="text/javascript" src="AppleClasses/AppleWidget.js"> </script>
참고: AppleWidget.js가 이미 iPad에 표시되어 있으면 위젯 번들에 AppleWidget.js를 추가할 필요가 없습니다. - iBooks에 언제 HTML이 초기화되는지 알 수 있도록 설정하면 HTML 파일의 HEAD 부분에 포함된 JavaScript에서 호출을 통해 iBooks가 Default.png 파일 표시에서 실행 중인 HTML 위젯 표시로 전환할 수 있습니다.
widget.notifyContentIsReady()
중요: 깜박임 문제를 방지하기 위해 HTML 위젯을 수정하도록 선택하는 경우 위의 세 단계를 모두 수행해야 합니다. 이를 제대로 작동하도록 하려면 모든 단계를 완료해야 합니다.
외부 웹 서비스에 대한 게시 정보
웹 서비스에서 해당 CORS(출처 간 리소스 공유) 헤더를 구현한 경우 HTML 위젯은 외부 웹 서비스에만 게시할 수 있습니다.