Grafik-Tutorial für erste Erfahrungen mit der Entwicklung der Adobe Html5-Erweiterung

Adobe produziert eine breite Palette an Multimedia-Verarbeitungssoftware-Produktlinien, die Audio- und Videobearbeitung, Bildverarbeitung, Grafikdesign, Film- und Fernsehpostproduktion und andere Bereiche abdecken. Um die Funktionen der Software zu erweitern, stellt Adobe Entwicklern zwei Möglichkeiten zur Erweiterung der Funktionen der Software zur Verfügung: Plug-Ins und Erweiterungen. Im vergangenen Jahr wurden mithilfe des offiziell bereitgestellten SDK zwei Premiere-Plug-Ins entwickelt, mit denen Multimediadateien in benutzerdefinierten Formaten importiert und Videostreams in der Vorschau angezeigt werden konnten. Kürzlich habe ich die Entwicklung der Adobe Extension miterlebt.

Das Adobe-Plugin wird im Allgemeinen verwendet, um Funktionen bereitzustellen, die näher an der zugrunde liegenden Ebene liegen. Aus Effizienzgründen basiert das bereitgestellte offizielle Plug-in-SDK auf der Sprache C++. Adobe Extension stellt in der Regel Erweiterungen für Anwendungen der oberen Ebene bereit, was in der Adobe CS-Ära in Form von Flash implementiert wurde.

In der Adobe CC-Ära wurde eine HTML5-Implementierung bereitgestellt, die es Entwicklern ermöglichte, für die Entwicklung eine Schnittstelle mit HTML5, CSS3, Javascript und sogar NodeJS herzustellen. Da Adobe CEF in Premiere Pro eingebettet hat, kann es HTML5 effizient analysieren und rendern sowie Nodejs-Programme ausführen. Nodejs kann den Aufruf von Systemfunktionen realisieren, was nicht ganz einfach ist! In diesem Artikel fasse ich grob den Weg der Verwendung von HTML5 zur Entwicklung einer Adobe-Erweiterung zusammen. Die Erweiterung, die wir vornehmen möchten, ist sehr einfach, wie in der folgenden Abbildung dargestellt:

Dies ist eine PremierePro-Erweiterung, die von Pond5, einer bekannten Website für den Handel mit ausländischem Videomaterial, entwickelt wurde. Sie ermöglicht es Benutzern, sich in Pro auf der Website anzumelden, Vorschaumaterialien herunterzuladen, hochauflösende Materialien zu kaufen, Videos automatisch zu importieren oder Videos automatisch zu ersetzen. Dadurch entfällt die Notwendigkeit für Benutzer, einen Browser zu öffnen, um sich auf der Website anzumelden, was das Benutzererlebnis erheblich verbessert. Ähnliche Plugins werden von Shutterstock entwickelt:

Adobe hat offiziell eine IDE für die Entwicklung der Adobe Html5-Erweiterung basierend auf Eclipse veröffentlicht. Daher konfigurieren wir zunächst die Entwicklungsumgebung nach dem folgenden Prozess:

Laden Sie Eclipse, vorzugsweise Version 3.6 oder höher, und Extension Builder herunter

Installieren Sie Adobe Premiere Pro CC 2014/2015. Konfigurieren Sie die Zielanwendung und den Service Manager von elicpse

Aktivieren Sie den Debug-Modus: Fügen Sie das Feld „PlayerDebugMode“ in der Registrierung hinzu

Die Konfiguration ist abgeschlossen und Sie können nun mit Eclipse das Erweiterungsvorlagenprojekt generieren. Das generierte Vorlagenprojekt ist sehr einfach, mit nur einer Standardschaltfläche im Bedienfeld:

Bei der Entwicklung der Adobe Html5-Erweiterung ist manifest.xml die wichtigste Datei. Diese Datei beschreibt die grundlegenden Informationen dieser Erweiterung, damit das Adobe-Hostprogramm sie normal erkennen und laden kann. Sein allgemeiner Inhalt ist wie folgt:

Unter diesen werden BundleName, BundleId und BundleVersion vom Entwickler bestimmt, normalerweise basierend auf der normalen Versionsiteration. Das Wichtigste ist der Inhalt der beiden Tags HostList und RequiredRuntimeList. Die HostList bestimmt, welche Host-Programme diese Erweiterung unterstützt (z. B. PremierePro, After Effects usw.). Der folgende Code gibt an, dass mehrere Hostprogramme geladen werden können:

Hier wird nur Photoshop Extended unterstützt und seine Host-ID entspricht PHXS. Die Host-IDs und Versionen anderer Host-Programme lauten wie folgt:

Beachten Sie, dass Version die Form von eckigen Klammern verwendet [14.0, 14.9], was darauf hinweist, dass diese Erweiterung die Photoshop Extended-Versionen 14.0–14.9 unterstützt, die höher oder niedriger sind als diese Version, diese Erweiterung nicht laden. Was aber, wenn Sie festlegen möchten, dass alle Versionen ab einer bestimmten Version unterstützt werden? Wenn Sie beispielsweise PremierePro CC 2014 oder höher unterstützen möchten, wie geben Sie diese Version an? Schreiben Sie einfach die niedrigste Versionsnummer:

Darüber hinaus gibt es die Bezeichnung RequiredRuntimeList. Dieses Tag gibt die CEP-Version der Laufzeit an. Das sogenannte CEP ist die Abkürzung für Common Extensibility Platform. Es bietet einen Kerndienstsatz, der es Entwicklern erleichtert, Extendscript-Code auszuführen, die Umgebungsvariablen des Hostprogramms zu erkennen und zwischen der Erweiterung und dem Host gesendete Ereignisse zu verarbeiten. Zuvor hieß dieser Servicesatz Creative Suite Extensible Services, kurz CSXS. Daher ist in einigen Konfigurationsdateien immer noch die Abkürzung CSXS zu sehen. Die ursprüngliche Version von CEP war 4.x und es wurden bisher fünf Hauptversionen entwickelt. Die neueste Version ist 8.x, die das neueste Adobe CC 2018-Hostprogramm unterstützt.

Wie oben gezeigt, muss die Version von RequiredRuntime auf 4.0 gesetzt werden, wenn wir die CC-Version der ersten Generation des Hostprogramms unterstützen möchten. Andernfalls kann die Erweiterung nicht normal geladen werden. Wenn Sie außerdem auf das Dateisystem in der Erweiterung zugreifen möchten, müssen Sie zusätzliche Parameter angeben:

Bei der Entwicklung müssen wir den Erweiterungscode jederzeit anpassen. Das Adobe-Hostprogramm ignoriert nicht signierte Erweiterungen und lädt sie nicht. Daher müssen wir den Debugging-Modus aktivieren, damit wir die Erweiterung während der Entwicklung nicht signieren müssen:

Öffnen Sie auf einem Mac die Datei ~/Library/Preferences/com.adobe.CSXS.6.plist und fügen Sie eine Zeile mit dem Schlüsselnamen PlayerDebugMode hinzu, geben Sie String ein und setzen Sie den Wert auf 1. Öffnen Sie unter Windows den Registrierungsschlüssel: HKEY_CURRENT_USER /Software/Adobe/CSXS.6, fügen Sie ein Schlüssel-Wert-Paar mit dem Namen PlayerDebugMode hinzu, Typ String, Wert 1.

Hinweis: Wenn die Version des Host-Programms unterschiedlich ist, können auch die entsprechenden Dateien unterschiedlich sein. In CC2017 müssen Sie beispielsweise den entsprechenden Teil oben in CSXS.7 ändern

Das Chrome-Debugging-Tool hilft dabei, die Ausgabe der Erweiterung zu beobachten und die DOM-Struktur der Erweiterung zu erkunden, was beim Debuggen sehr hilfreich ist. Das Aktivieren des Chrome-Debugging-Tools ist ebenfalls sehr einfach. Erstellen Sie eine Datei mit dem Namen .debug im Stammverzeichnis des Erweiterungsordners und schreiben Sie den folgenden Inhalt:

Diese Liste veranschaulicht die verschiedenen Ports, die beim Debuggen verschiedener Hostprogramme verwendet werden. Am Beispiel von Pond5 lautet der Inhalt der .debug-Datei wie folgt:

Bei der Angabe der Debug-Premiere-Erweiterung ist der Port 8089. Wie unten gezeigt:

Während der Entwicklung müssen Sie möglicherweise das Zwischenspeichern von Webinhalten durch CEF deaktivieren. Sie können den Ordner, der der Erweiterung entspricht, direkt am folgenden Speicherort löschen:

Windows: C:/Benutzer/BENUTZERNAME/AppData/Local/Temp/cep_cache/Mac: /Benutzer/BENUTZERNAME/Library/Logs/CSXS/cep_cache

Natürlich empfehlen einige Adobe-Entwickler auch, den CEF-Parameter <Parameter>--disable-application-cache</Parameter> anzugeben, um das CEF-Caching zu deaktivieren, aber nachdem ich es ausprobiert habe, scheint es nicht zu funktionieren. Der Erweiterungsordner „Extension“ wird an zwei Orten gespeichert: systemweit und benutzerpersönlich. Wenn Sie die Erweiterung systemweit installieren, wird die Erweiterungsdatei am folgenden Speicherort gespeichert: Auf dem Mac:/Library/Application Support/Adobe/CEP/extensionsUnter Windows:C:/Program Files (x86)/Common Files/Adobe/ CEP/Erweiterungen

Auf diese Weise können alle Benutzer des aktuellen Systems diese Erweiterung laden. Es kann auch nur für den aktuellen Benutzer installiert werden und befindet sich wie folgt:

Auf Mac: ~/Library/Application Support/Adobe/CEP/extensionsUnter Windows: C://AppData/Roaming/Adobe/CEP/extensions Signaturverpackung

Beim Veröffentlichen einer Erweiterung muss das gesamte Paket signiert werden. Hier müssen Sie das ZXPSignCmd-Tool verwenden, das von der offiziellen Website heruntergeladen werden kann. Zum Signieren benötigen wir zunächst ein digitales Zertifikat. Wir können dieses Zertifikat von einem externen Zertifikatsaussteller erwerben, wofür eine bestimmte Finanzierung erforderlich ist. Sie können auch ein selbstsigniertes Zertifikat erstellen, um die Erweiterung zu signieren. Gehen wir den Prozess wie folgt durch:

Dadurch wird im aktuellen Verzeichnis ein selbstsigniertes Zertifikat generiert, und dann können wir dieses Zertifikat zum Signieren des Pakets verwenden:

Wenn das ZXPSignCmd-Tool signiert, generiert es eine META-INF-Datei im Erweiterungsverzeichnis, in der die Signaturinformationen gespeichert werden. Anschließend packt und komprimiert das Tool das gesamte Verzeichnis in eine *.zxp-Datei. Dies ist die Erweiterungsdatei, die wir letztendlich veröffentlichen müssen. ^_^

Routineanalyse von Pond5 und Shutterstock Durch sorgfältige Analyse der Implementierung von Pond5 und Shutterstock können wir die allgemeine Ausführungslogik dieser Art von Erweiterung zusammenfassen:

(1) Öffnen Sie das Erweiterungsfenster im Host-Programm und suchen Sie die geladene Erweiterung über Window-Extensions

(2) Das Erweiterungsskript analysiert, ob der Benutzer es zum ersten Mal verwendet. Wenn es das erste Mal ist, lassen Sie den Benutzer den Speicherort für das Videomaterial auswählen. Dies geschieht normalerweise über ein Popup-Dialogfeld. Die vom Benutzer ausgewählten Standortinformationen werden im Allgemeinen über eine XML-Datei im Home-Verzeichnis des Benutzers gespeichert. Wenn der Benutzer die Erweiterung nicht zum ersten Mal verwendet, wird die XML-Datei im Home-Verzeichnis direkt geladen und analysiert.

(3) Der Nutzer klickt auf ein bestimmtes Videomaterial, um den Download zu starten. Dieser Prozess kann im Allgemeinen über NodeJS erreicht werden. Allerdings muss die Download-Callback-Funktion eingerichtet sein.

(4) Führen Sie nach erfolgreichem Download die Rückruffunktion aus und importieren Sie die heruntergeladene Videodatei in das Hostprogramm. Dieser Schritt wird durch den Aufruf des Extendscript-Skripts implementiert. Informationen zum Schreiben spezifischer Drehbücher finden Sie hier. In Bezug auf diese Routine haben wir eine Adobe-Erweiterung ähnlich wie Pond5 und Shutterstock implementiert:

Das obige ist das vom Herausgeber vorgestellte grafische Tutorial für die ersten Erfahrungen mit der Entwicklung von Adobe Html5. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!