สร้างวิดเจ็ต HTML5 สำหรับ iBooks Author
ดูวิธีสร้างวิดเจ็ต HTML5 ซึ่งคุณสามารถใช้ในหนังสือที่คุณสร้างขึ้นใน iBooks Author
iBooks Author รองรับวิดเจ็ต HTML5 ซึ่งมีนามสกุลชื่อไฟล์ .wdgt หากต้องการสร้างวิดเจ็ต HTML5 ให้ใช้โปรแกรมแก้ไขข้อความหรือแอปสร้างคอนเทนต์เพื่อสร้างไฟล์สามไฟล์ดังต่อไปนี้
ไฟล์ HTML หลัก: ไฟล์นี้คือส่วนหลักของวิดเจ็ต ซึ่งสามารถมีชื่อใดก็ได้ที่คุณต้องการ แต่นามสกุลจะต้องเป็น .html คุณสามารถใส่ CSS และ JavaScript ข้างในไฟล์ HTML หลัก หรือเพิ่มไฟล์ .css และ .js ในบันเดิลของวิดเจ็ต แล้วโหลดไฟล์เหล่านั้นจากไฟล์ HTML หลัก โดยสามารถใช้เทคนิคใดก็ได้ที่คุณต้องการใช้ในการออกแบบเว็บเพจ ใช้ HTML เพื่อกำหนดโครงสร้างของวิดเจ็ต ใช้ CSS เพื่อกำหนดรูปแบบภาพ และใช้ JavaScript เพื่อทำให้เป็นแบบอินเทอร์แอ็คทีฟ
ไฟล์ Default.png: วิธีที่ง่ายที่สุดในการสร้าง Default.png คือ การใช้ภาพหน้าจอของไฟล์ HTML หลักในแอปสร้างเว็บคอนเทนต์หรือเว็บเบราเซอร์ โดยจะเป็นภาพที่ผู้อ่านจะเห็นในหน้า และแตะเพื่อเปิดวิดเจ็ต ในเว็บเบราเซอร์หรือแอปสร้างเว็บคอนเทนต์ ให้ถ่ายภาพหน้าจอของไฟล์ HTML หลัก ตั้งชื่อว่า "Default.png" และให้แน่ใจว่าใช้ "D" ตัวพิมพ์ใหญ่ เมื่อวิดเจ็ตเปิดใช้งานก็จะเป็นขนาดของไฟล์ Default.png โดยคุณสามารถเปลี่ยนขนาดได้ในไฟล์ Info.plist
ไฟล์ Info.plist: ไฟล์นี้จะให้ข้อมูลที่ iBooks Author และ Apple Books ต้องใช้ในการเรียกใช้วิดเจ็ต โดยชื่อไฟล์จะต้องเป็น "Info.plist"
หลังจากที่คุณสร้างไฟล์ที่กำหนดเหล่านี้แล้ว ให้สร้างไฟล์เสริมใดก็ได้ที่คุณต้องการ เช่น ไฟล์ CSS หรือ JavaScript จากนั้นให้เพิ่มไฟล์เหล่านั้นลงในบันเดิลของวิดเจ็ต โดยทำดังนี้
ใน Finder ให้สร้างโฟลเดอร์ขึ้นมาโฟลเดอร์หนึ่ง
เพิ่มไฟล์ลงในโฟลเดอร์ใหม่
เปลี่ยนชื่อโฟลเดอร์แล้วเพิ่มนามสกุล .wdgt ลงในชื่อโฟลเดอร์เพื่อสร้างบันเดิลของวิดเจ็ต ไอคอนโฟลเดอร์จะเปลี่ยนเป็นไอคอนวิดเจ็ต
เพิ่มวิดเจ็ตของคุณใน iBooks Author
เคล็ดลับในการสร้างวิดเจ็ต
ก่อนที่คุณจะสร้างบันเดิลของวิดเจ็ต ให้ตรวจสอบว่าไม่มีไฟล์ใดในบันเดิลที่มีอักขระควบคุมอยู่ในชื่อไฟล์ หากมีไฟล์ใดที่มีอักขระควบคุมอยู่ในชื่อไฟล์ คุณจะไม่สามารถเผยแพร่หนังสือไปยัง Apple Books
หากคุณตั้งค่าให้วิดเจ็ตเล่นโดยอัตโนมัติ วิดเจ็ตก็จะไม่สามารถเข้าถึงอินเทอร์เน็ตได้
อย่าใช้ไอคอนโฟลเดอร์แบบกำหนดเอง และหลีกเลี่ยงการใช้ชื่อโฟลเดอร์เหล่านี้ในวิดเจ็ต
แหล่งข้อมูล/
ไฟล์สนับสนุน/แหล่งข้อมูล/
เนื้อหา/แหล่งข้อมูล/
หากต้องการปรับวิดเจ็ตให้เหมาะกับจอภาพ Retina ให้ทำดังนี้
ในไฟล์ HTML, CSS และ JavaScript ให้ใช้โปรโตคอลมาตรฐานสำหรับเว็บไซต์ที่มีกราฟิก Retina (2x)
รวมไฟล์ Default@2x.png ไว้ในวิดเจ็ตของคุณ ทำให้ไฟล์มีความละเอียดเป็นสองเท่าของไฟล์ Default.png โดยคุณจะไม่เห็นไฟล์นี้ใน iBooks Author แต่คุณจะเห็นได้ใน Apple Books บนจอภาพ Retina
ดูเพิ่มเติมเกี่ยวกับวิธีการปรับความเหมาะสมของหนังสือที่คุณสร้างด้วย iBooks Author
Info.plist
ไฟล์ Info.plist ของวิดเจ็ตพื้นฐานจะประกอบด้วยคีย์บังคับบางคีย์และคีย์เสริมบางคีย์ ตารางนี้จะแสดงรายการคีย์เหล่านี้ คำจำกัดความของคีย์ รวมถึงค่าตัวอย่างบางค่าสำหรับวิดเจ็ตที่เรียกว่า "Hello World"
คีย์ | ค่าตัวอย่าง | จำเป็น | คำจำกัดความ |
CFBundleDevelopmentRegion | อังกฤษ | ไม่บังคับ | สตริงที่ระบุถิ่นกำเนิดสำหรับบันเดิล ซึ่งปกติแล้วจะตรงกับภาษาท้องถิ่นของผู้ที่สร้างบันเดิลนั้น |
CFBundleDisplayName | Hello World | จำเป็น | สตริงที่มีชื่อจริงของวิดเจ็ตของคุณ ซึ่งจะแสดงใน iBooks Author และ Apple Books |
CFBundleIdentifier | com.apple.widget.HelloWorld | จำเป็น | สตริงที่ระบุความเป็นเอกลักษณ์ของวิดเจ็ต ในรูปแบบโดเมนที่กลับกัน |
CFBundleName | Hello World | ไม่บังคับ | สตริงที่มีชื่อวิดเจ็ตของคุณ จะต้องตรงกับชื่อบันเดิลของวิดเจ็ตใน Finder ลบนามสกุลไฟล์ .wdgt |
CFBundleShortVersionString | 1.0 | ไม่บังคับ | สตริงที่ให้หมายเลขเวอร์ชั่นแบบสั้นของวิดเจ็ต โดยมักจะเหมือนกับ CFBundleVersion |
CFBundleVersion | 1.0 | ไม่บังคับ | สตริงที่ให้หมายเลขเวอร์ชั่นของวิดเจ็ต |
ส่วนสูง | 768 | ไม่บังคับ | หมายเลขที่ให้ความสูงในหน่วยพิกเซลของวิดเจ็ต หากไม่ได้ระบุไว้ จะใช้ความสูงของ Default.png |
MainHTML | HelloWorld.html | จำเป็น | สตริงที่ให้ชื่อไฟล์ HTML ที่นำ widget.Width1024Optional ของคุณไปใช้ |
Width | 1024 | ไม่บังคับ | หมายเลขที่ให้ความกว้างในหน่วยพิกเซลของวิดเจ็ต หากไม่ได้ระบุไว้ จะใช้ความกว้างของ Default.png |
IBNotifiesOnReady | ไม่บังคับ | เมื่อตั้งค่าเป็น true วิดเจ็ตจะบอก Apple Books ว่าเมื่อใดจึงจะเปลี่ยนจากการแสดง Default.png ไปเป็นการแสดงวิดเจ็ต HTML ที่เรียกใช้งานอยู่ |
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 คุณสามารถใส่ภาพยนตร์และเสียงได้โดยใช้องค์ประกอบวิดีโอ ภาพยนตร์และเสียงภายในวิดเจ็ต HTML จะไม่ได้รับการป้องกัน DRM |
AllowJava | วิดเจ็ตในหนังสือที่สร้างด้วย iBooks Author ไม่สามารถมีเนื้อหา Java ได้ |
AllowSystem | วิดเจ็ตในหนังสือที่สร้างด้วย iBooks Author ไม่สามารถเข้าถึงคำสั่งของระบบได้ |
ปลั๊กอิน | วิดเจ็ตในหนังสือที่สร้างด้วย iBooks Author ไม่สามารถมีองค์ประกอบปลั๊กอิน Cocoa ได้ |
iBooks Author จะข้ามคีย์เหล่านี้
คีย์ | คำอธิบาย |
CloseBoxInsetX | วิดเจ็ตใน iBooks Author และ Apple Books จะไม่แสดงการตกแต่งแบบปิด |
CloseBoxInsetY | |
แบบอักษร | วิดเจ็ต iBooks Author ไม่สามารถใช้แบบอักษรแบบเป็นชุดได้ |
ข้อกำหนดด้านวิดีโอและเสียง
คุณไม่สามารถใช้สื่อที่มีไฟล์นามสกุล .m4v หรือ .m4p ได้ ใช้หนึ่งในรูปแบบเหล่านี้กับไฟล์นามสกุล .mp4
วิดีโอ H.264: สูงสุด 720p, 60 เฟรมต่อวินาที โปรไฟล์ High Level 4.2 พร้อมเสียง AAC-LC สูงสุด 160 kbps, 48 kHz, เสียงสเตอริโอ วิดีโอที่เปิดใน iMovie 10 ซึ่งมีตัวเลือก HD 720p จะใช้การตั้งค่าเหล่านี้
วิดีโอ MPEG-4: สูงสุด 2.5 Mbps, 640 x 480 พิกเซล, 30 เฟรมต่อวินาที โปรไฟล์ Simple พร้อมเสียง AAC-LC สูงสุด 160 kbps ต่อช่องสัญญาณ, 48kHz, เสียงสเตอริโอ
สำหรับเสียง ให้ใช้ AAC (สเตอริโอ 8 ถึง 320 Kbps ความเร็ว 48 kHz) ที่มีไฟล์นามสกุล .m4a
สื่อวิดีโอและเสียงในบันเดิลของวิดเจ็ต HTML จะำไม่ได้รับการป้องกัน DRM
หากภาพยนตร์หรือไฟล์เสียงไม่เล่นในวิดเจ็ตใน iBooks Author ให้ดูตัวอย่างบน iPhone, iPad หรือ Mac ซึ่งจะแสดงให้คุณดูว่าไฟล์จะเล่นเป็นอย่างไรในหนังสือฉบับสมบูรณ์
การแปลเป็นภาษาท้องถิ่น
iBooks Author ไม่รองรับสตริงและแอสเซทที่ผ่านการแปล รวมสตริงข้อความในภาษาเป้าหมายที่ผู้อ่านสามารถมองเห็นได้ในบรรทัด
องค์ประกอบที่ถูกตัดแบบคงที่
องค์ประกอบอย่างเช่น วิดีโอ
#video { width: 960; height: 540; }
การพัฒนาสำหรับ iOS และ macOS
iOS และ macOS ใช้ประเภทการป้อนข้อมูลที่แตกต่างกัน โดยคุณสามารถจัดเตรียมได้ทั้งการป้อนข้อมูลด้วยการสัมผัสและด้วยเมาส์ เมื่อสร้างวิดเจ็ต HTML สำหรับ iBooks Author
หลีกเลี่ยงการกะพริบเมื่อผู้อ่านเปิดวิดเจ็ต HTML
หากวิดเจ็ต HTML มีความซับซ้อนมาก ผู้อ่านอาจเห็นการกะพริบเมื่อเปิดวิดเจ็ตนั้นใน Apple Books เพื่อหลีกเลี่ยงการกะพริบ ให้อัปเดตวิดเจ็ตเพื่อให้บอก Apple Books ว่าเมื่อใดจึงจะเปลี่ยนจากไฟล์ Default.png มาเป็นวิดเจ็ต HTML โดยทำดังนี้
1. เพิ่มรายการ "IBNotifiesOnReady" ที่ตั้งค่าเป็น true ในไฟล์ Info.plist ของวิดเจ็ต วิธีนี้จะทำให้ Apple Books ทราบว่าวิดเจ็ตจะบอกให้รู้เมื่อถึงเวลาเปลี่ยนเป็นวิดเจ็ต HTML
<key>IBNotifiesOnReady</key>
2. ตั้งค่าวิดเจ็ตให้โหลดคลัง Apple JavaScript
iOS และ macOS มี AppleWidget.js อยู่แล้ว คุณจึงไม่ต้องรวมไว้ในบันเดิลของวิดเจ็ต
3. ตั้งค่าวิดเจ็ตให้เตือน Apple Books เมื่อเริ่มใช้ HTML ใน JavaScript ที่อยู่ใน
widget.notifyContentIsReady()
การโพสต์ลงในบริการเว็บภายนอก
คุณสามารถโพสต์วิดเจ็ต HTML ลงในบริการเว็บภายนอกได้ก็ต่อเมื่อวิดเจ็ตเหล่านั้นใช้ส่วนหัว Cross-Origin Resource Sharing (CORS) ที่ถูกต้อง
