iBooks Author: HTML 위젯 생성에 관하여

iBooks Author에서 작성하는 책에서 사용할 HTML5 위젯을 생성할 수 있습니다.

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 같은 옵션 파일을 생성하면 위젯 번들로 어셈블합니다.

  1. Finder를 사용하여 폴더를 생성하고 파일을 추가합니다.
  2. 폴더 이름에 .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에 알릴 수 있도록 위젯을 수정하십시오.

이 옵션 기능에 추가해야 하는 수정 사항이 세 가지 있습니다.

  1. iBooks가 실행 중인 HTML 위젯 표시로 언제 전환해야 하는지 이 위젯에서 알려준다는 것을 알 수 있도록 'true'로 설정된 'IBNotifiesOnReady' 항목 세트를 위젯의 info.plist 파일에 추가합니다.
    <key>IBNotifiesOnReady</key><true/>
  2. HTML의 파일의 HEAD 부분에서 Apple JavaScript 라이브러리를 로드하도록 위젯을 설정합니다.
    <script type="text/javascript" src="AppleClasses/AppleWidget.js"> </script>
    참고: AppleWidget.js가 이미 iPad에 표시되어 있으면 위젯 번들에 AppleWidget.js를 추가할 필요가 없습니다.

  3. iBooks에 언제 HTML이 초기화되는지 알 수 있도록 설정하면 HTML 파일의 HEAD 부분에 포함된 JavaScript에서 호출을 통해 iBooks가 Default.png 파일 표시에서 실행 중인 HTML 위젯 표시로 전환할 수 있습니다.
    widget.notifyContentIsReady()

중요: 깜박임 문제를 방지하기 위해 HTML 위젯을 수정하도록 선택하는 경우 위의 세 단계를 모두 수행해야 합니다. 이를 제대로 작동하도록 하려면 모든 단계를 완료해야 합니다.

외부 웹 서비스에 대한 게시 정보

웹 서비스에서 해당 CORS(출처 간 리소스 공유) 헤더를 구현한 경우 HTML 위젯은 외부 웹 서비스에만 게시할 수 있습니다.

게시일: