การพัฒนาส่วนขยาย Adobe Html5 ประสบการณ์การสอนกราฟิกครั้งแรก

Adobe ผลิตกลุ่มผลิตภัณฑ์ซอฟต์แวร์ประมวลผลมัลติมีเดียที่หลากหลาย ครอบคลุมถึงการตัดต่อเสียงและวิดีโอ การประมวลผลภาพ การออกแบบกราฟิก การผลิตภาพยนตร์และโทรทัศน์ และสาขาอื่นๆ เพื่อที่จะขยายฟังก์ชันของซอฟต์แวร์ Adobe ให้นักพัฒนามีสองวิธีในการเพิ่มฟังก์ชันของซอฟต์แวร์: ปลั๊กอินและส่วนขยาย ปีที่แล้ว ปลั๊กอิน Premiere สองตัวได้รับการพัฒนาโดยใช้ SDK ที่ให้มาอย่างเป็นทางการ ซึ่งใช้ในการนำเข้าไฟล์มัลติมีเดียในรูปแบบที่กำหนดเองและดูตัวอย่างสตรีมวิดีโอ ล่าสุดผมได้สัมผัสกับการพัฒนา Adobe Extension

โดยทั่วไปปลั๊กอิน Adobe ใช้เพื่อจัดเตรียมฟังก์ชันที่ใกล้เคียงกับระดับพื้นฐานที่สุด เพื่อเหตุผลด้านประสิทธิภาพ ปลั๊กอิน SDK อย่างเป็นทางการที่มีให้จะขึ้นอยู่กับภาษา C++ Adobe Extension มีแนวโน้มที่จะจัดเตรียมส่วนขยายสำหรับแอปพลิเคชันชั้นบน ซึ่งถูกนำมาใช้ในรูปแบบของ Flash ในยุค Adobe CS

ในยุค Adobe CC มีการจัดเตรียม HTML5 ซึ่งช่วยให้นักพัฒนาสามารถเชื่อมต่อกับ HTML5, CSS3, Javascript และแม้แต่ NodeJS เพื่อการพัฒนา เนื่องจาก Adobe ได้ฝัง CEF ไว้ใน Premiere Pro จึงสามารถแยกวิเคราะห์และเรนเดอร์ HTML5 และรันโปรแกรม Nodejs ได้อย่างมีประสิทธิภาพ Nodejs สามารถรับรู้ถึงการเรียกใช้ฟังก์ชันของระบบซึ่งไม่ใช่เรื่องง่ายเกินไป! ในบทความนี้ ฉันสรุปคร่าวๆ เกี่ยวกับการใช้ HTML5 เพื่อพัฒนาส่วนขยาย Adobe ส่วนขยายที่เราต้องการสร้างนั้นง่ายมาก ดังแสดงในรูปด้านล่าง:

นี่คือส่วนขยาย PremierePro ที่พัฒนาโดย Pond5 ซึ่งเป็นเว็บไซต์ซื้อขายสื่อวิดีโอต่างประเทศที่มีชื่อเสียง โดยอนุญาตให้ผู้ใช้เข้าสู่ระบบเว็บไซต์ในรุ่น Pro ดาวน์โหลดสื่อตัวอย่าง ซื้อสื่อที่มีความคมชัดสูง นำเข้าวิดีโอโดยอัตโนมัติหรือแทนที่วิดีโอโดยอัตโนมัติ ซึ่งช่วยลดความจำเป็นที่ผู้ใช้จะต้องเปิดเบราว์เซอร์เพื่อเข้าสู่ระบบเว็บไซต์ ซึ่งช่วยปรับปรุงประสบการณ์ผู้ใช้ได้อย่างมาก ปลั๊กอินที่คล้ายกันได้รับการพัฒนาโดย shutterstock:

Adobe เปิดตัว IDE อย่างเป็นทางการสำหรับการพัฒนา Adobe Html5 Extension บน eclipse ดังนั้นเราจึงกำหนดค่าสภาพแวดล้อมการพัฒนาตามกระบวนการต่อไปนี้ก่อน:

ดาวน์โหลด Eclipse ควรเป็นเวอร์ชัน 3.6 ขึ้นไป และ Extension Builder

ติดตั้ง Adobe Premiere Pro CC 2014/2015 กำหนดค่าแอปพลิเคชันเป้าหมายและตัวจัดการบริการของ elicpse

เปิดโหมดแก้ไขข้อบกพร่อง: เพิ่มฟิลด์ 'PlayerDebugMode' ในรีจิสทรี

การกำหนดค่าเสร็จสมบูรณ์ และตอนนี้คุณสามารถใช้ eclipse เพื่อสร้างโปรเจ็กต์เทมเพลตส่วนขยายได้ โครงการเทมเพลตที่สร้างขึ้นนั้นง่ายมาก โดยมีปุ่มเริ่มต้นเพียงปุ่มเดียวในแผง:

ในการพัฒนา Adobe Html5 Extension ไฟล์ที่สำคัญที่สุดคือ manifest.xml ไฟล์นี้อธิบายข้อมูลพื้นฐานของส่วนขยายนี้เพื่อให้โปรแกรมโฮสต์ Adobe สามารถจดจำและโหลดได้ตามปกติ เนื้อหาโดยรวมมีดังนี้:

นักพัฒนาจะเป็นผู้กำหนด BundleName, BundleId และ BundleVersion ซึ่งโดยทั่วไปจะขึ้นอยู่กับการวนซ้ำเวอร์ชันปกติ สิ่งที่สำคัญที่สุดคือเนื้อหาของแท็กทั้งสอง HostList และ RequiredRuntimeList HostList จะกำหนดว่าโปรแกรมโฮสต์ใดที่ส่วนขยายนี้รองรับ (เช่น PremierePro, After Effects เป็นต้น) รหัสต่อไปนี้ระบุว่าสามารถโหลดโปรแกรมโฮสต์ได้หลายโปรแกรม:

ที่นี่รองรับเฉพาะ Photoshop Extended และรหัสโฮสต์สอดคล้องกับ PHXS รหัสโฮสต์และเวอร์ชันของโปรแกรมโฮสต์อื่น ๆ มีดังนี้:

โปรดทราบว่าเวอร์ชันใช้รูปแบบของวงเล็บเหลี่ยม [14.0, 14.9] ซึ่งระบุว่าส่วนขยายนี้รองรับ Photoshop Extended เวอร์ชัน 14.0-14.9 Photoshop Extended เวอร์ชันที่สูงกว่านี้หรือต่ำกว่าเวอร์ชันนี้จะไม่โหลดส่วนขยายนี้ อย่างไรก็ตาม จะเป็นอย่างไรถ้าคุณต้องการระบุว่ารองรับทุกเวอร์ชันที่สูงกว่าเวอร์ชันใดเวอร์ชันหนึ่ง เช่น หากต้องการรองรับ PremierePro CC 2014 ขึ้นไป จะระบุ Version นี้ได้อย่างไร? เพียงเขียนหมายเลขเวอร์ชันต่ำสุด:

นอกจากนี้ยังมีป้ายกำกับ RequiredRuntimeList แท็กนี้ระบุรันไทม์เวอร์ชัน CEP สิ่งที่เรียกว่า CEP เป็นตัวย่อของ Common Extensibility Platform โดยให้บริการหลักที่อำนวยความสะดวกแก่นักพัฒนาในการรันโค้ด Extendedscript ตรวจจับตัวแปรสภาพแวดล้อมของโปรแกรมโฮสต์ และประมวลผลเหตุการณ์ที่ส่งระหว่างส่วนขยายและโฮสต์ ก่อนหน้านี้ ชุดบริการนี้เรียกว่า Creative Suite Extensible Services หรือเรียกสั้น ๆ ว่า CSXS ดังนั้นยังคงเห็นตัวย่อ CSXS ในไฟล์คอนฟิกูเรชันบางไฟล์ CEP เวอร์ชันเริ่มต้นคือ 4.x และได้พัฒนาเป็น 5 เวอร์ชันหลักจนถึงตอนนี้ เวอร์ชันล่าสุดคือ 8.x ซึ่งรองรับโปรแกรมโฮสต์ Adobe CC 2018 ล่าสุด

ดังที่แสดงไว้ข้างต้น หากเราต้องการสนับสนุนโปรแกรมโฮสต์เวอร์ชัน CC รุ่นแรก เวอร์ชันของ RequiredRuntime จะต้องตั้งค่าเป็น 4.0 มิฉะนั้นจะไม่สามารถโหลดส่วนขยายได้ตามปกติ นอกจากนี้ หากคุณต้องการเข้าถึงระบบไฟล์ในส่วนขยาย คุณต้องระบุพารามิเตอร์เพิ่มเติม:

เมื่อเราพัฒนาเราจำเป็นต้องปรับโค้ดส่วนขยายได้ตลอดเวลา โปรแกรมโฮสต์ Adobe ละเว้นส่วนขยายที่ไม่ได้ลงนามและจะไม่โหลดส่วนขยายเหล่านั้น ดังนั้นเราจึงจำเป็นต้องเปิดโหมดการดีบักเพื่อที่เราจะได้ไม่ต้องลงนามในส่วนขยายระหว่างการพัฒนา:

บน Mac ให้เปิดไฟล์ ~/Library/Preferences/com.adobe.CSXS.6.plist และเพิ่มบรรทัดด้วยชื่อคีย์ PlayerDebugMode พิมพ์ String และตั้งค่าเป็น 1 บน Windows ให้เปิดคีย์รีจิสทรี: HKEY_CURRENT_USER /Software/Adobe/CSXS.6 เพิ่มคู่คีย์-ค่าชื่อ PlayerDebugMode พิมพ์ String ค่า 1

หมายเหตุ: หากเวอร์ชันของโปรแกรมโฮสต์แตกต่าง ไฟล์ที่เกี่ยวข้องอาจแตกต่างกันด้วย ตัวอย่างเช่น ใน CC2017 คุณต้องเปลี่ยนส่วนที่เกี่ยวข้องด้านบนเป็น CSXS.7

เครื่องมือแก้ไขข้อบกพร่องของ Chrome ช่วยในการสังเกตผลลัพธ์ของส่วนขยายและสำรวจโครงสร้าง DOM ของส่วนขยาย ซึ่งมีประโยชน์มากสำหรับการดีบัก การเปิดใช้งานเครื่องมือแก้ไขข้อบกพร่องของ Chrome นั้นง่ายมากเช่นกัน สร้างไฟล์ชื่อ .debug ในไดเร็กทอรีรากของโฟลเดอร์ส่วนขยายและเขียนเนื้อหาต่อไปนี้:

รายการนี้จะแสดงพอร์ตต่างๆ ที่ใช้ในการดีบักโปรแกรมโฮสต์ต่างๆ จากตัวอย่าง Pond5 เนื้อหาของไฟล์ .debug จะเป็นดังนี้:

เมื่อระบุการดีบักส่วนขยาย Premiere พอร์ตคือ 8089 ดังที่แสดงด้านล่าง:

ในระหว่างการพัฒนา คุณอาจต้องปิดการใช้งาน CEF จากการแคชเนื้อหาเว็บ คุณสามารถลบโฟลเดอร์ที่เกี่ยวข้องกับส่วนขยายในตำแหน่งต่อไปนี้ได้ด้วยตนเอง:

Windows: C:/Users/USERNAME/AppData/Local/Temp/cep_cache/Mac: /Users/USERNAME/Library/Logs/CSXS/cep_cache

แน่นอนว่านักพัฒนา Adobe บางรายยังบอกให้ระบุพารามิเตอร์ CEF <Parameter>--disable-application-cache</Parameter> เพื่อปิดใช้งานการแคช CEF แต่ดูเหมือนว่าจะไม่ทำงานหลังจากที่ฉันลองแล้ว โฟลเดอร์ส่วนขยาย ส่วนขยายจะถูกจัดเก็บไว้ในสองตำแหน่ง ทั้งระบบและส่วนบุคคลของผู้ใช้ หากคุณติดตั้งส่วนขยายทั้งระบบ ไฟล์ส่วนขยายจะถูกจัดเก็บไว้ในตำแหน่งต่อไปนี้: บน Mac,:/Library/Application Support/Adobe/CEP/extensionsOn Windows:C:/Program Files (x86)/Common Files/Adobe/ CEP/ส่วนขยาย

ด้วยวิธีนี้ ผู้ใช้ทั้งหมดของระบบปัจจุบันสามารถโหลดส่วนขยายนี้ได้ นอกจากนี้ยังสามารถติดตั้งได้สำหรับผู้ใช้ปัจจุบันเท่านั้น และตำแหน่งจะเป็นดังนี้:

บน Mac: ~/Library/Application Support/Adobe/CEP/extensionsOn Windows: C://AppData/Roaming/Adobe/CEP/extensions บรรจุภัณฑ์ลายเซ็น

เมื่อเผยแพร่ส่วนขยาย จะต้องลงนามทั้งแพ็คเกจ คุณต้องใช้เครื่องมือ ZXPSignCmd ที่นี่ ซึ่งสามารถดาวน์โหลดได้จากเว็บไซต์อย่างเป็นทางการ ก่อนอื่น ในการลงนาม เราจำเป็นต้องมีใบรับรองดิจิทัล เราสามารถซื้อใบรับรองนี้ได้จากหน่วยงานที่ออกใบรับรองบุคคลที่สาม ซึ่งต้องใช้เงินทุนจำนวนหนึ่ง คุณยังสามารถสร้างใบรับรองที่ลงนามด้วยตนเองเพื่อลงนามส่วนขยายได้ มาดูกระบวนการกันด้วยวิธีหลัง:

สิ่งนี้จะสร้างใบรับรองที่ลงนามด้วยตนเองในไดเร็กทอรีปัจจุบัน จากนั้นเราสามารถใช้ใบรับรองนี้เพื่อลงนามแพ็คเกจ:

เมื่อเครื่องมือ ZXPSignCmd ลงนาม เครื่องมือจะสร้างไฟล์ META-INF ในไดเร็กทอรีส่วนขยายซึ่งจัดเก็บข้อมูลลายเซ็น จากนั้น เครื่องมือจะจัดทำแพ็กเกจและบีบอัดไดเร็กทอรีทั้งหมดให้เป็นไฟล์ *.zxp นี่คือไฟล์สำหรับขยายที่เราจำเป็นต้องเผยแพร่ในท้ายที่สุด -

การวิเคราะห์ตามปกติของ Pond5 และ Shutterstock ด้วยการวิเคราะห์การใช้งาน Pond5 และ Shutterstock อย่างรอบคอบ เราสามารถสรุปตรรกะการดำเนินการทั่วไปของส่วนขยายประเภทนี้ได้:

(1) เปิดแผงส่วนขยายในโปรแกรมโฮสต์และค้นหาส่วนขยายที่โหลดผ่าน Window-Extensions

(2) สคริปต์ส่วนขยายจะวิเคราะห์ว่าผู้ใช้ใช้งานเป็นครั้งแรกหรือไม่ หากเป็นครั้งแรก ให้ผู้ใช้เลือกตำแหน่งที่จะบันทึกเนื้อหาวิดีโอ ซึ่งโดยปกติจะทำได้ผ่านกล่องโต้ตอบป๊อปอัป โดยทั่วไปข้อมูลตำแหน่งที่ผู้ใช้เลือกจะยังคงอยู่ในโฮมไดเร็กตอรี่ของผู้ใช้ผ่านไฟล์ xml หากผู้ใช้ไม่ได้ใช้ส่วนขยายเป็นครั้งแรก ไฟล์ xml ในโฮมไดเร็กตอรี่จะถูกโหลดและแยกวิเคราะห์โดยตรง

(3) ผู้ใช้คลิกที่เนื้อหาวิดีโอบางอย่างเพื่อเริ่มการดาวน์โหลด โดยทั่วไปกระบวนการนี้สามารถทำได้ผ่าน nodejs อย่างไรก็ตาม จะต้องตั้งค่าฟังก์ชันการติดต่อกลับการดาวน์โหลด

(4) หลังจากดาวน์โหลดสำเร็จ ให้เรียกใช้ฟังก์ชันโทรกลับและนำเข้าไฟล์วิดีโอที่ดาวน์โหลดมาลงในโปรแกรมโฮสต์ ขั้นตอนนี้ดำเนินการโดยการเรียกสคริปต์ขยาย สำหรับการเขียนสคริปต์โดยเฉพาะ โปรดดูที่นี่ จากกิจวัตรนี้ เราได้นำ Adobe Extension มาใช้คล้ายกับ Pond5 และ Shutterstock:

ข้างต้นคือบทช่วยสอนกราฟิกสำหรับประสบการณ์ครั้งแรกของการพัฒนา Adobe Html5 Extension ที่บรรณาธิการแนะนำ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใดๆ โปรดฝากข้อความถึงฉัน แล้วโปรแกรมแก้ไขจะตอบกลับคุณทันเวลา ฉันอยากจะขอบคุณทุกคนที่ให้การสนับสนุนเว็บไซต์ศิลปะการต่อสู้ VeVb!