アセットエディタページの作成と設定

このドキュメントは次の内容について説明します。

  • カスタマイズされたアセットエディターページを作成する理由。
  • アセットエディターページ(メタデータの表示と編集、およびアセットに対するアクションの実行に使用する WCM ページ)の作成とカスタマイズの方法
  • 複数のアセットを同時に編集する方法
メモ

アセット共有は、オープンソースの参照実装として使用できます。Asset Share Commons を参照してください。アセット共有は正式にはサポートされていません。

アセットエディターページを作成および設定する理由

デジタルアセット管理は、ますます広く使用されるようになっています。専門的な教育を受けたユーザー(写真家や分類学者など)による小規模なユーザーグループ向けの小規模なソリューションから、大規模で多様なユーザーグループ(ビジネスユーザー、WCM 作成者、ジャーナリストなど)に移行する場合、専門的なユーザー向けの Adobe Experience Manager(AEM)Assets の強力なユーザーインターフェイスでは、利用できる情報が多すぎて不便が生じることがあります。この場合、関係者にとって必要なデジタルアセットにアクセスするための目的に特化したユーザーインターフェイスやアプリケーションが求められるようになります。

そのようなアセット中心型アプリケーションの例として、従業員が展示会に参加した際の写真をアップロードできるイントラネット内のシンプルな写真ギャラリーや、公開 Web サイトでのプレスセンター(Geometrixx で提供されたサンプルなど)があります。アセット中心型アプリケーションは、ショッピングカート、チェックアウト、検証プロセスを含む完全なソリューションに拡張することもできます。

アセット中心型アプリケーションの作成の大部分は、コーディングを必要としない設定プロセスとなります。ここでは、ユーザーグループとそのニーズ、使用されるメタデータに関する知識のみが必要となります。AEM Assets で作成されたアセット中心型アプリケーションは拡張可能です。適度なコーディング作業によって、アセットの検索、表示、変更のための再利用可能なコンポーネントを作成できます。

AEM のアセット中心型アプリケーションは、特定アセットの詳細を表示するのに利用できるアセットエディターページで構成されます。アセットエディターページでは、アセットにアクセスするユーザーが必要な権限を持っていれば、メタデータの編集も可能です。

アセット共有ページの作成と設定

DAM Finder 機能をカスタマイズし、必要なすべての機能を持つページを作成します。これらのページがアセット共有ページと呼ばれます。新しいアセット共有ページを作成するには、Geometrixx アセット共有テンプレートを使用してページを追加し、次にそのページに対してユーザーが実行できるアクションをカスタマイズします。さらに、アセットの表示方法と、ユーザーによるクエリの作成方法を決定します。

カスタマイズされたアセット共有ページを作成する用途としては次のような例が考えられます。

  • ジャーナリスト向けのプレスセンター
  • 社内ビジネスユーザー向けの画像検索エンジン
  • Web サイトユーザー向けの画像データベース
  • メタデータエディター向けのメディアタグ作成インターフェイス

アセット共有ページの作成

新しいアセット共有ページを作成する方法として、Web サイトでの作業中に作成するか、Digital Asset Manager から作成することができます。

メモ

デフォルトでは、Digital Asset Manager の「新規」からアセット共有ページを作成すると、アセットビューアおよびアセットエディターが自動的に作成されます。

Web サイト​コンソールで新しいアセット共有ページを作成するには:

  1. Web サイト」タブで、アセット共有ページを作成する場所に移動し、「新規」をクリックします。

  2. アセット共有​ページを選択し、作成​をクリックします。新しいページが作成され、アセット共有ページが「Webサイト」タブに一覧表示されます。

dam8

Geometrixx DAM アセット共有テンプレートを使用して作成した基本ページは次のイメージのようになります。

screen_shot_2012-04-18at115456am

アセット共有ページをカスタマイズするには、サイドキックのクエリを使用し、要素ビルダーのプロパティを編集します。Geometrixxプレスセンター​ページは、次のテンプレートに基づくページのカスタマイズ版です。

screen_shot_2012-04-19at123048pm

Digital Asset Manager を使用して新しいアセット共有ページを作成するには:

  1. Digital Asset Manager の「新規」で、「新しいアセット共有」を選択します。

  2. タイトル」にアセット共有ページの名前を入力します。必要に応じて、URL の名前を入力します。

    screen_shot_2012-04-19at23626pm

  3. アセット共有ページをダブルクリックして開き、ページの設定をおこないます。

    screen_shot_2012-04-19at24114pm

    デフォルトでは、「新規」からアセット共有ページを作成すると、アセットビューアおよびアセットエディターが自動的に作成されます。

アクションのカスタマイズ

定義済みの一部のアクションから、選択したデジタルアセットに対してユーザーが実行できるアクションを決定できます。

アセット共有ページにアクションを追加するには:

  1. カスタマイズするアセット共有ページで、サイドキックの「アクション」をクリックします。

    次のアクションが使用可能です。
    assetshare2

アクション 説明
アクションを削除 ユーザーが選択したアセットを削除できます。
アクションをダウンロード ユーザーが選択したアセットをコンピューターにダウンロードできるようにします。
Lightbox アクション アセットを「Lightbox」に保存します。Lightbox では、保存されたアセットに対して他のアクションを実行できます。これは、複数のページにまたがるアセットを操作する場合に便利です。Lightbox は、アセットの買い物かごとしても使用できます。
アクションを移動 ユーザーがアセットを別の場所に移動できます。
タグアクション ユーザーが選択したアセットにタグを追加できるようにします。
アセットアクションを表示 ユーザーが変更できるように、アセットをアセットエディターで開きます。
  1. 適切なアクションをページの​アクション​領域にドラッグします。 これによって、そのアクションを実行するボタンが作成されます。

    chlimage_1-387

検索結果の表示方法を決定する

事前定義済みのレンズリストで、結果の表示方法を指定します。

検索結果の表示方法を変更するには:

  1. カスタマイズするアセット共有ページで、「検索」をクリックします。

    chlimage_1

  2. 適切なレンズをページの上中央にドラッグします。 Press Center では、レンズは既に使用可能な状態です。ユーザーは適切なレンズアイコンをクリックして、求めるとおりの検索結果を表示します。

次のレンズが使用可能です。

レンズ 説明
リストレンズ 詳細情報を含むリスト形式でアセットを表示します。
モザイクレンズ モザイク形式でアセットを表示します。

モザイクレンズ

chlimage_1-388

リストレンズ

chlimage_1-389

クエリビルダのカスタマイズ

クエリビルダーでは、検索語句を入力し、アセット共有ページのコンテンツを作成できます。クエリビルダーの編集時に、1 ページに表示する検索結果数、アセットのダブルクリック時に開くアセットエディターおよびクエリ検索パスを指定し、ノード型をカスタマイズします。

クエリビルダーをカスタマイズするには:

  1. カスタマイズするアセット共有ページで、QueryBuilder の「編集」をクリックします。デフォルトでは、「一般」タブが開きます。

  2. ページあたりの結果数、アセットエディターのパス(カスタマイズされたアセットエディターを使用している場合)、および「アクション」タイトルを選択します。

    screen_shot_2012-04-23at15055pm

  3. パス」タブをクリックします。 検索対象とする 1 つまたは複数のパスを入力します。ユーザーがパスの述語を使用すると、これらのパスは上書きされます。

    screen_shot_2012-04-23at15150pm

  4. 必要に応じて、別のノードタイプを入力します。

  5. クエリビルダーのURL」フィールドで、クエリビルダーを上書きまたはラップし、既存のクエリビルダーコンポーネントを使用して新しいサーブレットURLを入力できます。 「フィード URL」フィールドで、フィード URL を上書きすることもできます。

    screen_shot_2012-04-23at15313pm

  6. テキスト」フィールドに、結果と結果のページ番号に表示するテキストを入力します。 変更作業が完了したら、「OK」をクリックします。

    screen_shot_2012-04-23at15300pm

追加予測

AEM Assets には、アセット共有ページに追加できる多数の述語が用意されています。述語を使用すると、ユーザーが検索をさらに絞り込むことができます。一部のケースでは、指定した述語がクエリビルダーのパラメーター(「パス」パラメーターなど)よりも優先されます。

述語を追加するには:

  1. カスタマイズするアセット共有ページで、「検索」をクリックします。

    assetshare3

  2. 適切な述部を、クエリビルダーの下のアセット共有ページにドラッグします。 これによって、適切なフィールドが作成されます。

    assetshare4

    次の述語が使用可能です。

述語 説明
日付の述語 ユーザーが特定の日付の前後に変更されたアセットを検索できるようにします。
オプションの述語 サイト所有者が検索用のプロパティを指定できます(プロパティの述語などで、例えば cq:tags と指定)。また、オプションを設定するためのコンテンツツリー(タグツリーなど)を指定できます。この操作によってオプションのリストが生成され、ユーザーはこのリストから、選択されたプロパティ(タグプロパティ)に含まれる値(タグ)を選択できます。この述語を使用すれば、タグのリスト、ファイルタイプのリスト、画像の向きのリストなどのリストコントロールを作成できます。この述語は、固定数のオプションに適しています。
パスの述語 ユーザーがパス(および必要に応じてサブフォルダー)を定義できるようにします。
プロパティの述語 サイト所有者が検索対象のプロパティ(例:tiff:ImageLength)を指定すると、ユーザーが値(例:800)を入力できます。この例では、高さが 800 ピクセルのすべての画像が返されます。プロパティに任意の値を設定できる場合に有効な述語です。

詳しくは、述語の Javadoc を参照してください。

  1. 述語をさらに構成するには、重複をクリックします。 例えば、「パスの述語」を開いたら、ルートパスを指定する必要があります。

    screen_shot_2012-04-23at15640pm

アセットエディタページの作成と設定

アセットエディターをカスタマイズして、ユーザーによるデジタルアセットの表示および編集方法を指定します。これをおこなうには、新規のアセットエディターページを作成してから、ユーザーがページに対して実行できる表示とアクションをカスタマイズします。

メモ

DAMアセットエディターにカスタムフィールドを追加する場合は、新しいcq:Widgetノードを/apps/dam/content/asseteditors.に追加します。

アセットエディタページの作成

アセットエディターページを作成する場合に、アセット共有ページのすぐ下にページを作成することをお勧めします。

アセットエディターページを作成するには:

  1. Web サイト」タブで、アセットエディターページを作成する場所に移動し、「新規」をクリックします。

  2. Geometrixx アセットエディター」を選択し、「作成」をクリックします。新しいページが作成され、ページが「Web サイト」タブに表示されます。

screen_shot_2012-04-23at15858pm

Geometrixx アセットエディターテンプレートを使用して作成された基本ページは次のイメージのようになります。

assetshare5

アセットエディタページをカスタマイズするには、サイドキックの要素を使用します。Geometrixxプレスセンター​からアクセスされるアセットエディタページは、次のテンプレートに基づくページのカスタマイズ版です。

assetshare6

アセット共有ページから開くアセットエディタの設定

カスタムのアセットエディターページを作成したら、アセット(作成したカスタムのアセット共有)をダブルクリックすると、カスタマイムのエディターページでアセットが開くことを確認する必要があります。

アセットエディターページを設定するには:

  1. アセット共有ページで、QueryBuilder の隣にある「編集」をクリックします。

    screen_shot_2012-04-23at20123pm

  2. 一般」タブが選択されていない場合はクリックします。

  3. アセットエディターのパス」フィールドに、アセットを開くアセットエディターのパスを入力し、「OK」をクリックします。

    screen_shot_2012-04-23at21653pm

追加アセットエディタコンポーネント

アセットエディターに含める機能を指定するには、ページにコンポーネントを追加します。

アセットエディターコンポーネントを追加するには:

  1. カスタマイズするアセットエディターページで、サイドキックの「アセットエディター」を選択します。使用可能なすべてのアセットエディターコンポーネントが表示されます。

    メモ

    何をカスタマイズできるかは、使用可能なコンポーネントによって異なります。コンポーネントを有効にするには、デザインモードに移動し、有効にする必要のあるコンポーネントを選択します。

  2. コンポーネントをサイドキックからアセットエディタにドラッグし、コンポーネントダイアログで変更を行います。 コンポーネントについて、次の表およびその下の詳細説明で説明します。

    メモ

    アセットエディターページのデザイン時に、読み取り専用、編集可能のいずれかのコンポーネントを作成します。ユーザーは、そのコンポーネント内に鉛筆の画像が表示されればフィールドが編集可能であるとわかります。デフォルトでは、ほとんどのコンポーネントは読み取り専用として設定されます。

    コンポーネント 説明
    メタデータ フォームと メタデータテキストフィールド アセットにメタデータを追加し、そのアセットに対して送信などのアクションを実行できるようにします。
    サブアセット サブアセットをカスタマイズできるようにします。
    タグ ユーザーがタグを選択してアセットに追加できるようにします。
    サムネール アセットのサムネールとファイル名を表示し、代替テキストを追加できるようにします。ここでは、アセットエディターのアクションを追加することもできます。
    タイトル アセットのタイトルを表示します。このタイトルはカスタマイズ可能です。

    screen_shot_2012-04-23at22743pm

メタデータフォームとテキストフィールド - メタデータの表示コンポーネントの設定

メタデータフォームは、開始アクションと終了アクションを含むフォームです。その間には、テキスト​フィールドを入力します。フォームの操作について詳しくは、フォームを参照してください。

  1. フォームの開始領域で「編集」をクリックして、開始アクションを作成します。 必要に応じて、「ボックスタイトル」にボックスタイトルを入力できます。デフォルトでは、ボックスタイトルは「メタデータ」です。生成された Java スクリプトクライアントコードを検証する場合は、「クライアントの検証」チェックボックスをオンにします。

    screen_shot_2012-04-23at22911pm

  2. フォームの「End」領域で「Edit」をクリックして、Endアクションを作成します。 例えば、ユーザーがメタデータの変更内容を送信できる「送信」ボタンを作成できます。また、オプションとして、メタデータを元の状態にリセットする「リセット」ボタンを追加できます。

    screen_shot_2012-04-23at23138pm

  3. フォーム開始​と​フォームの終わり​の間で、メタデータテキストフィールドをフォームにドラッグします。 ユーザーはこれらのテキストフィールドにメタデータを入力し、このメタデータを送信するか、他のアクションを実行することができます。

  4. フィールド名(例:タイトル)を重複がクリックすると、メタデータフィールドが開き、変更が行われます。 コンポーネントを編集​ウィンドウの「一般」タブで、名前空間、フィールドラベル、型(dc:title など)を定義します。

    screen_shot_2012-04-23at23305pm

    メタデータフォームで使用可能な名前空間の変更については、AEM Assetsのカスタマイズと拡張を参照してください。

  5. 制約」タブをクリックします。 ここで、フィールドを必須にするかどうかを選択し、必要に応じて制約を追加できます。

    screen_shot_2012-04-23at23435pm

  6. 表示」タブをクリックします。 ここで、メタデータフィールドの列の新しい幅と列数を入力できます。「フィールドは読み取り専用です」チェックボックスをオフにすると、ユーザーがメタデータを編集できるようになります。

    screen_shot_2012-04-23at23446pm

    次に、様々なフィールドを持つメタデータフォームの例を示します。

    chlimage_1-390

アセットエディターページでは、ユーザーはこの後メタデータフィールドに値を入力し(フィールドが編集可能な場合)、終了アクション(変更内容の送信など)を実行することができます。

サブアセット

サブアセットコンポーネントでは、サブアセットの表示と選択をおこなうことができます。メインアセットとサブアセットの下に表示される名前を指定できます。

screen_shot_2012-04-23at24025pm

サブアセットコンポーネントをダブルクリックし、サブアセットダイアログを開きます。このダイアログで、メインアセットや任意のサブアセットのタイトルを変更できます。デフォルト値は、対応するフィールドの下に表示されます。

screen_shot_2012-04-23at23907pm

次に、設定済みのサブアセットコンポーネントの例を示します。

screen_shot_2012-04-23at24442pm

例えば、あるサブアセットを選択すると、コンポーネントに適切なページが表示され、ボックスタイトルがサブアセットから兄弟アセットに変更されます。

screen_shot_2012-04-23at24552pm

タグ

タグコンポーネントは、ユーザーがアセットに既存のタグを割り当てることのできるコンポーネントです。タグは後で構成や取得に役に立ちます。ユーザーがタグを追加できず、参照のみできるように、このコンポーネントを読み取り専用にできます。

screen_shot_2012-04-23at25031pm

タグコンポーネントをダブルクリックしてタグダイアログを開きます。このダイアログで、必要に応じてタグのタイトルを変更し、割り当て済みの名前空間を選択することができます。このフィールドを編集可能にするには、「編集ボタンを​非表示にする」チェックボックスをオフにします。デフォルトでは、タグは編集可能です。

screen_shot_2012-04-23at24731pm

ユーザーがタグを編集できる場合は、鉛筆アイコンをクリックし、「Tags」ドロップダウンメニューからタグを選択して、タグを追加できます。

screen_shot_2012-04-23at25150pm

次に、設定済みのタグコンポーネントを示します。

screen_shot_2012-04-23at25244pm

サムネール

サムネールコンポーネントでは、選択したサムネールがアセットで表示されます(多くの形式でサムネールは自動的に抽出されます)。さらに、コンポーネントではファイル名と、変更可能なアクションが表示されます。

screen_shot_2012-04-23at25452pm

サムネールコンポーネントをダブルクリックすると、サムネールダイアログが開きます。このダイアログで、代替テキストを変更できます。デフォルトでは、サムネールの代替テキストは、「Click to download asset」です。

screen_shot_2012-04-23at25604pm

次に、設定済みのサムネールコンポーネントの例を示します。

screen_shot_2012-04-23at34815pm

タイトル

タイトルコンポーネントでは、アセットのタイトルと説明が表示されます。

chlimage_1-391

デフォルトでは、タイトルは読み取り専用であり、ユーザーは編集できません。編集可能にするには、コンポーネントをダブルクリックし、「編集ボタンを非表示にする」チェックボックスをオフにします。さらに、複数のアセットのタイトルを入力します。

screen_shot_2012-04-23at35100pm

タイトルが編集可能な場合、鉛筆アイコンをクリックして​アセットのプロパティ​ウィンドウを開いて、タイトルと説明を追加できます。さらに、日時を選択してアセットのオンとオフを切り替えることができます。

ユーザーが鉛筆アイコンをクリックしてタイトルを編集する場合、「タイトル」と「説明」を変更し、アセットをオンまたはオフにする「オンタイム」と「オフタイム」を入力することができます。

screen_shot_2012-04-23at35241pm

次に、設定済みのタイトルコンポーネントの例を示します。

chlimage_1-392

ア追加セットエディタのアクション

定義済みの一部のアクションから、選択したデジタルアセットに対してユーザーが実行できるアクションを決定できます。

アセットエディターページにアクションを追加するには:

  1. カスタマイズするアセットエディタページで、サイドキックの​アセットエディタ​をクリックします。

    sidekickでアセットエディタを選択

    次のアクションが使用可能です。

    アクション 説明
    ダウンロード ユーザーが選択したアセットをコンピューターにダウンロードできるようにします。
    エディター ユーザーが画像を編集できるようにします(インタラクティブ編集)。
    Lightbox アセットを「Lightbox」に保存します。Lightbox では、保存されたアセットに対して他のアクションを実行できます。これは、複数のページにまたがるアセットを操作する場合に便利です。
    ロック ユーザーがアセットをロックできるようにします。この機能はデフォルトでは有効ではなく、コンポーネントのリスト内で有効にする必要があります。
    参照 クリックすると、アセットで現在使用されているページが表示されます。
    バージョン管理 アセットのバージョンの作成と復元が可能です。
  2. 適切なアクションをページの​アクション​領域にドラッグします。 これによって、そのアクションを実行するボタンが作成されます。

chlimage_1-393

アセットエディタページで複数のアセットを編集

AEM Assets では複数のアセットを同時に変更できます。アセットを選択した後、それらのアセットの次の情報を同時に変更できます。

  • タグ
  • メタデータ

アセットエディターページを使用してアセットをマルチ編集するには:

  1. http://localhost:4502/content/geometrixx/en/company/press.htmlにあるGeometrixx センター​を押してください。

  2. アセットを選択します。

    • Windowsの場合:Ctrl + click個々のアセット。
    • Macの場合:Cmd + click個々のアセット。

    アセットの範囲を選択するには:最初のアセットをクリックし、最後のアセットをShift + clickクリックします。

  3. Actions」フィールド(ページの左側)の「Edit Metadata」をクリックします。

  4. Geometrixx Press Center Asset Editor ページが新しいタブで開きます。アセットのメタデータが以下のように表示されます。

    • すべてのアセットではなく一部のアセットにのみ適用されるタグは、斜体で表示されます。
    • すべてのアセットに適用されるタグは、通常のフォントで表示されます。
    • タグ以外のメタデータ:フィールドの値は、選択されたすべてのアセットで同じ場合にのみ表示されます。
  5. ダウンロード」をクリックして、元のレンディションを含むZIPファイルをダウンロードします。

  6. Tags」フィールドの横にある鉛筆アイコンをクリックして、タグを編集します。

    • すべてのアセットではなく一部のアセットにのみ適用されるタグは、グレーの背景になります。
    • すべてのアセットに適用されるタグは白の背景になります。

    以下の操作を実行できます。

    • x」アイコンをクリックして、すべてのアセットのタグを削除します。
    • +アイコンをクリックして、タグをすべてのアセットに追加します。
    • arrowをクリックし、タグを選択して、すべてのアセットに新しいタグを追加します。

    OK」をクリックして、変更内容をフォームに書き込みます。「Tags」フィールドの横にあるチェックボックスが自動的にオンになります。

  7. 「説明」フィールドを編集します。例えば、次の値に設定します。This is a common description.フィールドを編集すると、フォームが送信されると、その値によって選択したアセットの既存の値が上書きされます。 フィールドの編集時に、フィールドの横にあるボックスが自動的にチェックされます。

    This is a common description

    フィールドを編集すると、フォームの送信時に、選択したアセットの既存の値が編集した値によって上書きされます。

    注意:フィールドを編集すると、フィールドの横にあるチェックボックスが自動的にオンになります。

  8. メタデータを更新」をクリックしてフォームを送信し、すべてのアセットの変更を保存します。チェック済みのメタデータのみが変更されます。

このページ

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now