アドビは、オーディオおよびビデオ編集、画像処理、グラフィックデザイン、映画およびテレビのポストプロダクション、その他の分野をカバーする幅広いマルチメディア処理ソフトウェア製品ラインを製造しています。ソフトウェアの機能を拡張するために、Adobe はソフトウェアの機能を拡張する 2 つの方法、プラグインと拡張機能を開発者に提供します。昨年、公式に提供された SDK を使用して 2 つの Premiere プラグインが開発されました。これらは、カスタム形式でマルチメディア ファイルをインポートし、ビデオ ストリームをプレビューするために使用されました。最近Adobe Extensionの開発を経験しました。
Adobe Plugin は通常、基礎となるレベルに近い機能を提供するために使用されます。効率上の理由から、提供される公式プラグイン SDK は C++ 言語に基づいています。 Adobe Extensionは上位層のアプリケーション向けの拡張機能を提供する傾向があり、Adobe CS時代にはFlashの形で実装されていました。
Adobe CC の時代には、HTML5 実装が提供され、開発者は HTML5、CSS3、JavaScript、さらには NodeJS とインターフェイスして開発できるようになりました。 Adobe は Premiere Pro に CEF を埋め込んでいるため、HTML5 を効率的に解析してレンダリングし、Nodejs プログラムを実行できます。 Nodejs ではシステム関数の呼び出しを実現できますが、これは簡単ではありません。この記事では、HTML5 を使用して Adobe 拡張機能を開発するまでの過程を大まかにまとめます。 作成したい拡張機能は、次の図に示すように非常に単純です。
海外の動画素材取引サイトとして有名なPond5が開発したPremierePro拡張機能で、ProでWebサイトにログインしたり、プレビュー素材をダウンロードしたり、高解像度素材を購入したり、動画を自動インポートしたり、動画を自動で置き換えたりすることができます。これにより、ユーザーは Web サイトにログインするためにブラウザーを開く必要がなくなり、ユーザー エクスペリエンスが大幅に向上します。同様のプラグインが Shutterstock によって開発されています。
2. 開発環境Adobe は、Eclipse に基づいて Adobe Html5 Extension を開発するための IDE を正式に開始しました。したがって、最初に次のプロセスに従って開発環境を構成します。
Eclipse (できればバージョン 3.6 以降) と Extension Builder をダウンロードします。
Adobe Premiere Pro CC 2014/2015をインストールし、対象アプリケーションとelicpseのService Managerを設定します。
デバッグ モードをオンにする: レジストリに「PlayerDebugMode」フィールドを追加します。
構成が完了したので、Eclipse を使用して拡張テンプレート プロジェクトを生成できるようになりました。生成されたテンプレート プロジェクトは非常にシンプルで、パネルにはデフォルトのボタンが 1 つだけあります。
3. プロジェクト構成のmanifest.xmlファイルAdobe Html5 Extension の開発において最も重要なファイルは、manifest.xml です。このファイルには、Adobe ホスト プログラムがこの拡張機能を認識して正常に読み込めるように、この拡張機能の基本情報が記述されています。その一般的な内容は次のとおりです。
このうち、BundleName、BundleId、および BundleVersion は、通常は通常のバージョンの反復に基づいて開発者によって決定されます。最も重要なことは、HostList と RequiredRuntimeList の 2 つのタグの内容です。 HostList は、この拡張機能がサポートするホスト プログラム (PremierePro、After Effects など) を決定します。次のコードは、複数のホスト プログラムをロードできることを示しています。
ここでは Photoshop Extended のみがサポートされており、そのホスト ID は PHXS に対応します。他のホスト プログラムのホスト ID とバージョンは次のとおりです。
バージョンは角かっこ [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 ホスト プログラムをサポートしています。
上に示したように、ホスト プログラムの第 1 世代 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 という名前のキーと値のペア、文字列型、値 1 を追加します。
注: ホスト プログラムのバージョンが異なる場合、対応するファイルも異なる可能性があります。たとえば、CC2017 では、上記の該当部分を CSXS.7 に変更する必要があります。
クロムのデバッグChrome デバッグ ツールは、拡張機能の出力を観察し、拡張機能の DOM 構造を調べるのに役立ち、デバッグに非常に役立ちます。 Chrome デバッグ ツールを有効にするのも非常に簡単です。拡張機能フォルダーのルート ディレクトリに .debug という名前のファイルを作成し、次の内容を書き込みます。
このリストは、さまざまなホスト プログラムをデバッグするときに使用されるさまざまなポートを示しています。 Pond5 を例にとると、その .debug ファイルの内容は次のとおりです。
デバッグ Premiere 拡張機能を指定する場合、ポートは 8089 です。以下に示すように:
CEP キャッシュのクリーニング開発中に、Web コンテンツのキャッシュから 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 キャッシュを無効にすると言っていますが、私が試してみたところ、それは機能しないようです。拡張機能フォルダー 拡張機能は、システム全体とユーザー個人の 2 つの場所に保存されます。拡張機能をシステム全体にインストールする場合、拡張機能ファイルは次の場所に保存されます。Mac の場合:/Library/Application Support/Adobe/CEP/extensionsWindows の場合:C:/Program Files (x86)/Common Files/Adobe/ CEP/拡張機能
このようにして、現在のシステムのすべてのユーザーがこの拡張機能をロードできます。現在のユーザーのみにインストールすることもでき、その場所は次のとおりです。
Mac の場合: ~/Library/Application Support/Adobe/CEP/extensions Windows の場合: C://AppData/Roaming/Adobe/CEP/extensions 署名パッケージ
拡張機能を公開するときは、パッケージ全体に署名する必要があります。ここでは、公式 Web サイトからダウンロードできる ZXPSignCmd ツールを使用する必要があります。まず、署名するにはデジタル証明書が必要です。この証明書はサードパーティの証明書発行機関から購入できますが、それにはある程度の資金が必要です。自己署名証明書を作成して拡張機能に署名することもできます。後者の方法でプロセスを進めてみましょう。
これにより、現在のディレクトリに自己署名証明書が生成され、この証明書を使用してパッケージに署名できます。
ZXPSignCmd ツールが署名すると、拡張ディレクトリに META-INF ファイルが生成され、署名情報が保存されます。次に、ツールはディレクトリ全体を *.zxp ファイルにパッケージ化して圧縮します。これは、最終的に公開する必要がある拡張ファイルです。 ^_^
Pond5 と Shutterstock の日常的な分析 Pond5 と Shutterstock の実装を注意深く分析することで、このタイプの拡張機能の一般的な実行ロジックを要約できます。
(1) ホスト プログラムで拡張機能パネルを開き、Window-Extensions を通じてロードされた拡張機能を見つけます。
(2) 拡張機能スクリプトは、ユーザーが初めて拡張機能を使用するかどうかを分析します。初めての場合は、ユーザーにビデオ素材を保存する場所を選択させます。これは通常、ポップアップ ダイアログ ボックスを通じて行われます。ユーザーが選択した位置情報は、通常、xml ファイルを通じてユーザーのホーム ディレクトリに保存されます。ユーザーが拡張機能を初めて使用しない場合、ホーム ディレクトリ内の xml ファイルが直接ロードされて解析されます。
(3) ユーザーが特定の動画素材をクリックすると、ダウンロードが開始されます。このプロセスは通常、nodejs を通じて実現できます。ただし、ダウンロードコールバック関数を設定する必要があります。
(4) ダウンロードが成功したら、コールバック関数を実行し、ダウンロードしたビデオ ファイルをホスト プログラムにインポートします。このステップは、extendscript スクリプトを呼び出すことによって実装されます。具体的なスクリプトの書き方については、こちらを参照してください。このルーチンを参照して、Pond5 や Shutterstock と同様の Adobe Extension を実装しました。
要約する上記は、編集者が紹介した Adobe Html5 Extension 開発の初めての体験のためのグラフィック チュートリアルです。ご質問があれば、メッセージを残してください。編集者がすぐに返信します。また、VeVb武道サイトを応援してくださった皆様、誠にありがとうございました！