تنتج Adobe مجموعة واسعة من خطوط إنتاج برامج معالجة الوسائط المتعددة، والتي تغطي تحرير الصوت والفيديو ومعالجة الصور والتصميم الجرافيكي ومرحلة ما بعد الإنتاج للأفلام والتلفزيون وغيرها من المجالات. من أجل توسيع وظائف البرنامج، توفر Adobe للمطورين طريقتين لزيادة وظائف البرنامج: المكونات الإضافية والملحقات. في العام الماضي، تم تطوير اثنين من المكونات الإضافية لـ Premiere باستخدام حزمة SDK المقدمة رسميًا، والتي تم استخدامها لاستيراد ملفات الوسائط المتعددة بتنسيقات مخصصة ومعاينة تدفقات الفيديو. لقد قمت مؤخرًا بتجربة تطوير Adobe Extension.
يُستخدم Adobe Plugin عمومًا لتوفير وظائف أقرب إلى المستوى الأساسي. لأسباب تتعلق بالكفاءة، يعتمد برنامج 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:
2. بيئة التطويرأطلقت Adobe رسميًا IDE لتطوير Adobe Html5 Extension استنادًا إلى Eclipse. لذلك، نقوم أولاً بتكوين بيئة التطوير وفقًا للعملية التالية:
قم بتنزيل Eclipse، ويفضل الإصدار 3.6 أو أعلى، وExtension Builder
قم بتثبيت Adobe Premiere Pro CC 2014/2015. قم بتكوين التطبيق المستهدف ومدير الخدمة لـ Ecpse
قم بتشغيل وضع التصحيح: أضف حقل "PlayerDebugMode" في التسجيل
اكتمل التكوين، ويمكنك الآن استخدام Eclipse لإنشاء مشروع قالب الامتداد. مشروع القالب الذي تم إنشاؤه بسيط للغاية، مع وجود زر افتراضي واحد فقط في اللوحة:
3. ملف Manifest.xml لتكوين المشروعفي تطوير ملحق Adobe Html5، الملف الأكثر أهمية هو 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 أو إصدار أحدث، فكيف تحدد هذا الإصدار؟ فقط اكتب رقم الإصدار الأقل:
بالإضافة إلى ذلك، هناك التسمية RequiredRuntimeList. تحدد هذه العلامة إصدار CEP لوقت التشغيل. ما يسمى CEP هو اختصار لـ Common Extensibility Platform وهو يوفر مجموعة خدمات أساسية لتسهيل على المطورين تنفيذ كود Extendscript واكتشاف متغيرات البيئة للبرنامج المضيف ومعالجة الأحداث المرسلة بين الامتداد والمضيف. في السابق، كانت مجموعة الخدمات هذه تسمى 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. كما هو موضح أدناه:
تنظيف ذاكرة التخزين المؤقت CEPأثناء التطوير، قد تحتاج إلى تعطيل CEF من التخزين المؤقت لمحتوى الويب. يمكنك حذف المجلد المتوافق مع الامتداد يدويًا مباشرةً في الموقع التالي:
ويندوز: 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/extensionsعلى Windows:C:/Program Files (x86)/Common Files/Adobe/ CEP/امتدادات
بهذه الطريقة، يمكن لجميع مستخدمي النظام الحالي تحميل هذا الامتداد. ويمكن أيضًا تثبيته فقط للمستخدم الحالي، وموقعه كما يلي:
على نظام Mac: ~/Library/Application Support/Adobe/CEP/extensions على نظام Windows: C://AppData/Roaming/Adobe/CEP/extensions تغليف التوقيع
عند نشر ملحق، يجب توقيع الحزمة بأكملها. تحتاج إلى استخدام أداة ZXPSignCmd هنا، والتي يمكن تنزيلها من الموقع الرسمي. أولاً، للتوقيع نحتاج إلى شهادة رقمية. يمكننا شراء هذه الشهادة من وكالة إصدار شهادات تابعة لجهة خارجية، الأمر الذي يتطلب قدرًا معينًا من التمويل. يمكنك أيضًا إنشاء شهادة موقعة ذاتيًا لتوقيع الامتداد. دعنا نتابع العملية بالطريقة الأخيرة:
سيؤدي هذا إلى إنشاء شهادة موقعة ذاتيًا في الدليل الحالي، ومن ثم يمكننا استخدام هذه الشهادة لتوقيع الحزمة:
عندما تقوم أداة ZXPSignCmd بالتوقيع، فإنها ستقوم بإنشاء ملف META-INF في دليل الامتداد، والذي يقوم بتخزين معلومات التوقيع. بعد ذلك، ستقوم الأداة بحزم الدليل بأكمله وضغطه في ملف *.zxp. هذا هو ملف التوسيع الذي نحتاج في النهاية إلى نشره. ^_^
التحليل الروتيني لـ Pond5 و Shutterstock من خلال التحليل الدقيق لتنفيذ Pond5 و Shutterstock، يمكننا تلخيص منطق التنفيذ العام لهذا النوع من الامتدادات:
(1) افتح لوحة الامتداد في البرنامج المضيف وابحث عن الامتداد المحمل من خلال Window-Extensions
(2) سيقوم البرنامج النصي للامتداد بتحليل ما إذا كان المستخدم يستخدمه لأول مرة. إذا كانت هذه هي المرة الأولى، فاسمح للمستخدم بتحديد الموقع الذي سيتم حفظ مادة الفيديو فيه ويتم تحقيق ذلك عادةً من خلال مربع حوار منبثق. يتم حفظ معلومات الموقع التي حددها المستخدم بشكل عام في الدليل الرئيسي للمستخدم من خلال ملف xml. إذا لم يكن المستخدم يستخدم الامتداد لأول مرة، فسيتم تحميل ملف XML الموجود في الدليل الرئيسي وتحليله مباشرة.
(3) ينقر المستخدم على مادة فيديو معينة لبدء التنزيل. يمكن تحقيق هذه العملية بشكل عام من خلال العقدة. ومع ذلك، يجب إعداد وظيفة رد اتصال التنزيل.
(4) بعد نجاح التنزيل، قم بتنفيذ وظيفة رد الاتصال واستيراد ملف الفيديو الذي تم تنزيله إلى البرنامج المضيف. يتم تنفيذ هذه الخطوة عن طريق استدعاء البرنامج النصي Extendscript. لكتابة نص محدد، يرجى الرجوع هنا. بالإشارة إلى هذا الروتين، قمنا بتطبيق Adobe Extension المشابه لـ Pond5 وShutterstock:
تلخيصما ورد أعلاه هو البرنامج التعليمي الرسومي للتجربة الأولى لتطوير ملحق Adobe Html5 الذي قدمه المحرر، وآمل أن يكون مفيدًا لك. إذا كانت لديك أي أسئلة، فيرجى ترك رسالة لي وسيقوم المحرر بالرد عليك في الوقت المناسب. أود أيضًا أن أشكر الجميع على دعمكم لموقع VeVb للفنون القتالية!