asset computeメタデータワーカーの開発

カスタムAsset computeワーカーは、XMP(XML)データを生成し、AEMに送り返して、アセットにメタデータとして保存できます。

一般的な使用例を次に示します。

  • 追加のメタデータを取得してアセットに保存する必要があるPIM(Product Information Managementシステム)などのサードパーティシステムとの統合
  • コンテンツやコマースAIなどのAdobe サービスとの統合により、追加の機械学習属性でアセットメタデータを拡張
  • バイナリからアセットに関するメタデータを取得し、アセットメタデータとしてAEMにCloud Serviceとして保存する

どうするか

このチュートリアルでは、Asset computeアセットで最もよく使用される色を引き出し、色の名前をAEMのアセットのメタデータに書き戻す画像メタデータワーカーを作成します。 ワーカー自体は基本的ですが、このチュートリアルでは、ワーカーを使用して、AEM内のCloud Serviceにメタデータを書き戻すためのAsset computeワーカーの使用方法を調べます。

asset computeメタデータワーカー呼び出しの論理フロー

asset computeメタデータワーカーの呼び出しは、ワーカーを生成するバイナリレンディションの呼び出しとほぼ同じです。戻り値のタイプは、値がアセットのメタデータにも書き込まれるXMP(XML)レンディションです。

asset computeワーカーは、Asset computeSDKワーカーAPI契約を、概念上次のようなrenditionCallback(...)関数に実装します。

  • 入力: AEMアセットの元のバイナリパラメーターと処理プロファイルパラメーター
  • 出力: AEMアセットにレンディションとして保持され、アセットのメタデータに保持されるXMP(XML)レンディション

asset computeメタデータワーカーの論理フロー

  1. AEMオーサーサービスは、Asset computeのメタデータワーカーを呼び出し、アセットの​(1a)​元のバイナリと、処理プロファイルで定義された​(1b)​パラメーターを提供します。
  2. asset computeSDKは、カスタムAsset computeメタデータワーカーのrenditionCallback(...)関数の実行を編成し、アセットのバイナリ​(1a)​と処理プロファイルのパラメーター​(1b)​に基づいてXMP(XML)レンディションを導き出します。
  3. asset computeワーカーは、XMP (XML)表現をrendition.pathに保存します。
  4. rendition.pathに書き込まれたXMP(XML)データは、Asset computeSDKを介してAEMオーサーサービスに転送され、(4a)​テキストレンディションとして公開され、(4b)​がアセットのメタデータノードに保持されます。

manifest.ymlの設定

すべてのAsset computeワーカーは、manifest.ymlに登録する必要があります。

プロジェクトのmanifest.ymlを開き、新しいワーカーを構成するワーカーエントリを追加します(この場合はmetadata-colors)。

空白が .yml 区別されることを覚えておいてください。

packages:
  __APP_PACKAGE__:
    license: Apache-2.0
    actions: 
      worker:
        function: actions/worker/index.js 
        web: 'yes' 
        runtime: 'nodejs:12'
        limits:
          timeout: 60000 # in ms
          memorySize: 512 # in MB
          concurrency: 10 
        annotations:
          require-adobe-auth: true
      metadata-colors:
        function: actions/metadata-colors/index.js 
        web: 'yes' 
        runtime: 'nodejs:12'
        limits:
          memorySize: 512 # in MB   

function は、次の手順で作成したワーカーの実装を指 していますワーカーのURLに示され、ワーカーのテストスイートフォルダー名も決定するので、意味的にワーカーに名前を付けます(actions/worker/index.jsの方がactions/rendition-circle/index.jsという名前の方が良い場合があります)。

limitsrequire-adobe-authは、ワーカーごとに個別に設定されます。 このワーカーでは、コードが(潜在的に)大きなバイナリイメージデータを検査するために、メモリの512 MBが割り当てられます。 その他のlimitsは削除され、デフォルトが使用されます。

メタデータワーカーの開発

新しいワーカー🔗のパス定義されたmanifest.ymlのAsset computeプロジェクト内の/actions/metadata-colors/index.jsに、新しいメタデータワーカーJavaScriptファイルを作成します。

npmモジュールのインストール

このAsset computeワーカーで使用する追加のnpmモジュール(@adobe/asset-compute-xmpget-image-colorscolor-namer)をインストールします。

$ npm install @adobe/asset-compute-xmp
$ npm install get-image-colors
$ npm install color-namer

メタデータワーカーコード

このワーカーは、レンディション生成ワーカーとよく似ています。主な違いは、XMP(XML)データをrendition.pathに書き込んでAEMに保存し直すことです。

"use strict";

const { worker, SourceCorruptError } = require("@adobe/asset-compute-sdk");
const fs = require("fs").promises;

// Require the @adobe/asset-compute-xmp module to create XMP 
const { serializeXmp } = require("@adobe/asset-compute-xmp");

// Require supporting npm modules to derive image colors from image data
const getColors = require("get-image-colors");
// Require supporting npm modules to convert image colors to color names
const namer = require("color-namer");

exports.main = worker(async (source, rendition, params) => {
  // Perform any necessary source (input) checks
  const stats = await fs.stat(source.path);
  if (stats.size === 0) {
    // Throw appropriate errors whenever an erring condition is met
    throw new SourceCorruptError("source file is empty");
  }
  const MAX_COLORS = 10;
  const DEFAULT_COLORS_FAMILY = 'basic';

  // Read the color family parameter to use to derive the color names
  let colorsFamily = rendition.instructions.colorsFamily || DEFAULT_COLORS_FAMILY;

  if (['basic', 'hex', 'html', 'ntc', 'pantone', 'roygbiv'].indexOf(colorsFamily) === -1) { 
      colorsFamily = DEFAULT_COLORS_FAMILY;
  }
  
  // Use the `get-image-colors` module to derive the most common colors from the image
  let colors = await getColors(source.path, { options: MAX_COLORS });

  // Convert the color Chroma objects to their closest names
  let colorNames = colors.map((color) => getColorName(colorsFamily, color));

  // Serialize the data to XMP metadata
  // These properties are written to the [dam:Asset]/jcr:content/metadata resource
  // This stores
  // - The list of color names is stored in a JCR property named `wknd:colors`
  // - The colors family used to derive the color names is stored in a JCR property named `wknd:colorsFamily`
  const xmp = serializeXmp({
      // Use a Set to de-duplicate color names
      "wknd:colors": [...new Set(colorNames)],
      "wknd:colorsFamily": colorsFamily
    }, {
      // Define any property namespaces used in the above property/value definition
      // These namespaces will be automatically registered in AEM if they do not yet exist
      namespaces: {
        wknd: "https://wknd.site/assets/1.0/",
      },
    }
  );

  // Save the XMP metadata to be written back to the asset's metadata node
  await fs.writeFile(rendition.path, xmp, "utf-8");
});

/**
 * Helper function that derives the closest color name for the color, based on the colors family
 * 
 * @param {*} colorsFamily the colors name family to use
 * @param {*} color the color to convert to a name
 */
function getColorName(colorsFamily, color) {
    if ('hex' === colorsFamily) {  return color; }

    let names = namer(color.rgb())[colorsFamily];

    if (names.length >= 1) { return names[0].name; }
}

メタデータワーカーのローカルでの実行

ワーカーコードが完了したら、ローカルの開発ツールを使用してAsset computeを実行できます。

asset computeプロジェクトには2人のワーカー(以前のcircle renditionとこのmetadata-colors worker)が含まれるので、Asset compute開発ツールのプロファイル定義には、両方のワーカーの実行プロファイルが一覧表示されます。 2つ目のプロファイル定義は、新しいmetadata-colorsワーカーを指します。

XMLメタデータのレンディション

  1. asset computeプロジェクトのルート

  2. aio app runを実行して、Asset compute開発ツールを起動します

  3. ファイルを選択…​ドロップダウンで、サンプル画像を選択して処理します。

  4. metadata-colorsワーカーを指す2つ目のプロファイル定義設定で、"name": "rendition.xml"を更新します。これは、このワーカーがXMP(XML)レンディションを生成するためです。 必要に応じて、colorsFamilyパラメーター(サポートされている値basichexhtmlntcpantoneroygbiv)を追加します。

    {
        "renditions": [
            {
                "worker": "...",
                "name": "rendition.xml",
                "colorsFamily": "pantone"
            }
        ]
    }
    
  5. ​を実行」をタップし、XMLレンディションが生成されるのを待ちます。

    • プロファイル定義には両方のワーカーがリストされているので、両方のレンディションが生成されます。 オプションで、サークルレンディションワーカーを指す上部のプロファイル定義を削除して、開発ツールから実行しないようにできます。
  6. レンディション​セクションで、生成されたレンディションのプレビューを表示します。 rendition.xmlをタップしてダウンロードし、VS Code(またはお気に入りのXML/テキストエディター)で開いて確認します。

ワーカーのテスト

メタデータワーカーは、バイナリレンディション🔗と同じAsset computeテストフレームワークを使用してテストできます。 唯一の違いは、テストケースのrendition.xxxファイルは、期待されるXMP(XML)レンディションである必要があります。

  1. 次の構造をAsset computeプロジェクトに作成します。

    /test/asset-compute/metadata-colors/success-pantone/
    
        file.jpg
        params.json
        rendition.xml
    
  2. サンプルファイルをテストケースのfile.jpgとして使用します。

  3. 次のJSONをparams.jsonに追加します。

    {
        "fmt": "xml",
        "colorsFamily": "pantone"
    }
    

    "fmt": "xml"は、.xmlテキストベースのレンディションを生成するようにテストスイートに指示するために必要です。

  4. rendition.xmlファイルに、必要なXMLを指定します。 これは、次の方法で取得できます。

    • 開発ツールを使用してテスト入力ファイルを実行し、(検証済みの)XMLレンディションを保存します。
    <?xml version="1.0" encoding="UTF-8"?><rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:wknd="https://wknd.site/assets/1.0/"><rdf:Description><wknd:colors><rdf:Seq><rdf:li>Silver</rdf:li><rdf:li>Black</rdf:li><rdf:li>Outer Space</rdf:li></rdf:Seq></wknd:colors><wknd:colorsFamily>pantone</wknd:colorsFamily></rdf:Description></rdf:RDF>
    
  5. asset computeプロジェクトのルートからaio app testを実行し、すべてのテストスイートを実行します。

ワーカーのAdobe I/O Runtimeへのデプロイ

この新しいメタデータワーカーをAEM Assetsから呼び出すには、次のコマンドを使用してAdobe I/O Runtimeにデプロイする必要があります。

$ aio app deploy

aioアプリデプロイ

これにより、プロジェクト内のすべてのワーカーがデプロイされます。 ステージングワークスペースと実稼動ワークスペースへのデプロイ方法については、デプロイ手順を完全に確認してください。

AEM処理プロファイルとの統合

新しいを作成するか、このデプロイ済みワーカーを呼び出す既存のカスタム処理プロファイルサービスを変更して、AEMからワーカーを呼び出します。

処理プロファイル

  1. AEM管理者​としてAEM as a Cloud Serviceオーサーサービスにログインします。
  2. ツール/アセット/処理プロファイル​に移動します。
  3. ____ 新しい(または編集と既存 ____ の)処理プロファイルの作成
  4. カスタム」タブをタップし、「新規追加」をタップします。
  5. 新しいサービスの定義
    • メタデータレンディションを作成:アクティブに切り替え
    • エンドポイント: https://...adobeioruntime.net/api/v1/web/wkndAemAssetCompute-0.0.1/metadata-colors
      • これは、deployまたはaio app get-urlコマンドを使用して取得したワーカーへのURLです。 URLが、AEM as a Workspace環境に基づいて正しいCloud Serviceを指していることを確認します。
    • サービスパラメーター
      • パラメーターを追加」をタップします。
        • キー: colorFamily
        • 値:pantone
          • サポートされている値:basichexhtmlntcpantoneroygbiv
    • MIME タイプ
      • 次を含みます。 image/jpegimage/pngimage/gif image/svg
        • これらは、色の派生に使用されるサードパーティnpmモジュールでサポートされる唯一のMIMEタイプです。
      • 除外: Leave blank
  6. 右上の「保存」をタップします
  7. AEM Assetsフォルダーに処理プロファイルを適用する(まだ適用していない場合)

メタデータスキーマの更新

色のメタデータを確認するには、画像のメタデータスキーマ上の2つの新しいフィールドを、ワーカーが入力する新しいメタデータデータプロパティにマッピングします。

メタデータスキーマ

  1. AEMオーサーサービスで、ツール/アセット/メタデータスキーマ​に移動します。
  2. default​に移動し、image​を選択して編集し、生成されたカラーメタデータを表示する読み取り専用フォームフィールドを追加します。
  3. 1行のテキスト​を追加します。
    • フィールドラベル: Colors Family
    • プロパティにマッピング: ./jcr:content/metadata/wknd:colorsFamily
    • ルール/フィールド/編集を無効にする:オン
  4. 複数値テキスト​を追加します。
    • フィールドラベル: Colors
    • プロパティにマッピング: ./jcr:content/metadata/wknd:colors
  5. 右上の「保存」をタップします

アセットの処理

アセットの詳細

  1. AEMオーサーサービスで、Assets/Files​に移動します。
  2. フォルダー(サブフォルダー)に移動すると、処理プロファイルが適用されます。
  3. 新しい画像(JPEG、PNG、GIFまたはSVG)をフォルダーにアップロードするか、更新された処理プロファイルを使用して既存の画像を再処理します。
  4. 処理が完了したら、アセットを選択し、上部のアクションバーの​プロパティ​をタップして、メタデータを表示します
  5. カスタムAsset computeメタデータワーカーから書き戻されたメタデータについて、 Colors FamilyColors メタデータフィールドを確認します。

アセットのメタデータに書き込まれたカラーメタデータを使用して、[dam:Asset]/jcr:content/metadataリソースでこのメタデータを検索を使用して、アセットの検出性を向上させるインデックスが作成されます。DAMメタデータの書き戻し​ワークフローが呼び出された場合でも、アセットのバイナリに書き戻せます。

AEM Assetsでのメタデータのレンディション

AEM Assetsメタデータレンディションファイル

XMPメタデータワーカーによって生成された実際のAsset computeファイルも、アセット上の個別のレンディションとして保存されます。 通常、このファイルは使用されず、アセットのメタデータノードに適用された値が使用されますが、ワーカーからの生のXML出力はAEMで使用できます。

GitHubのメタデータカラーワーカーコード

最終的なmetadata-colors/index.jsは、GitHubで次の場所から入手できます。

最終的なtest/asset-compute/metadata-colorsテストスイートは、GitHubで次の場所から入手できます。

このページ