ページへのDynamic Mediaクラシック機能の追加

AdobeDynamic Mediaクラシックは、リッチメディアアセットを管理、強化、公開、およびWeb、モバイル、電子メール、インターネットに接続されたディスプレイや印刷に配信するためのホストソリューションです。

Dynamic Mediaクラシックで公開したAEMアセットは、様々なビューアで表示できます。

  • ズーム
  • フライアウト
  • ビデオ
  • 画像テンプレート
  • 画像

デジタルアセットはAEMからDynamic Mediaクラシックに直接公開でき、また、Dynamic MediaクラシックからAEMに公開できます。

このドキュメントでは、デジタルアセットをAEMからDynamic Mediaクラシックに公開する方法と、その逆の方法を説明します。 また、ビューアについても詳しく説明します。Dynamic Mediaクラシック用のAEMの設定については、「Dynamic MediaクラシックとAEMの統合」を参照してください。

画像マップの追加も参照してください。

AEM でのビデオコンポーネントの使用について詳しくは、ビデオを参照してください。

メモ

Dynamic Mediaクラシックアセットが正しく表示されない場合は、ダイナミックメディアが無効であることを確認してから、ページを更新します。

アセットから手動でのDynamic Mediaクラシックへの公開

デジタルアセットは、次のようにしてDynamic Mediaクラシックに公開できます。

メモ

AEMは、非同期でDynamic Mediaクラシックに公開します。 「公開」をクリックした後で、アセットがDynamic Mediaクラシックに公開されるまでに数秒かかる場合があります。

Dynamic Mediaクラシックコンポーネント

AEMでは、次のDynamic Mediaクラシックコンポーネントを使用できます。

  • ズーム
  • フライアウト(ズーム)
  • 画像テンプレート
  • 画像
  • ビデオ
メモ

これらのコンポーネントはデフォルトでは使用できないので、を使用する前に​デザイン​モードで選択する必要があります。

これらのコンポーネントを​デザイン​モードで使用できるようになったら、他のAEMコンポーネントと同様に、ページに追加できます。 まだDynamic Mediaクラシックに公開されていないアセットは、同期フォルダー内、ページ上、またはDynamic Mediaクラシッククラウド設定で公開される場合、Dynamic Mediaクラシックに公開されます。

メモ

カスタムビューアを作成して開発する場合は、コンテンツファインダーを使用して、allowfullscreen​パラメーターを明示的に追加する必要があります。

Flash ビューアのサポート終了に関する通知

2017年1月31日、AdobeDynamic MediaクラシックはFlashビューアプラットフォームのサポートを終了しました。

ページへのDynamic Mediaクラシックコンポーネント(Scene7)の追加

Dynamic Mediaクラシック(Scene7)コンポーネントをページに追加するのと、コンポーネントをページに追加するのと同じです。 Dynamic Mediaクラシックコンポーネントについては、以下の節で詳しく説明します。

ページにDynamic Mediaクラシック(Scene7)コンポーネントを追加するには:

  1. AEMで、Dynamic Mediaクラシック(Scene7)コンポーネントを追加するページを開きます。

  2. 使用可能なDynamic Mediaクラシックコンポーネントがない場合は、「デザイン」モードをクリックし、青い境界のコンポーネントをタップします。次に、​アイコンをタップし、設定​アイコンをタップします。 Parsys (Design)​で、すべてのDynamic Mediaクラシックコンポーネントを選択して使用可能にし、「OK」をクリックします。

    chlimage_1-224

  3. 編集」をクリックして​編集​モードに戻ります。

  4. サイドキックのDynamic Mediaクラシックグループからページの目的の位置にコンポーネントをドラッグします。

  5. 設定​アイコンをクリックして、コンポーネントを開きます。

  6. コンポーネントの編集を必要に応じておこない、「OK」をクリックして変更内容を保存します。

  7. 画像またはビデオをコンテンツブラウザから、ページに追加したDynamic Mediaクラシックコンポーネントにドラッグします。

    メモ

    タッチ操作対応UIのみ、画像またはビデオをページに配置したDynamic Mediaクラシックコンポーネントにドラッグ&ドロップする必要があります。 Dynamic Mediaクラシックコンポーネントの選択と編集、およびアセットの選択はサポートされていません。

レスポンシブサイトへのインタラクティブな表示エクスペリエンスの追加

アセットのレスポンシブデザインとは、アセットが表示される場所に適応することを意味します。レスポンシブデザインを使用すると、同じアセットを複数のデバイスで効果的に表示できます。

Web ページのレスポンシブデザインも参照してください。

インタラクティブな表示エクスペリエンスをレスポンシブサイトに追加するには:

  1. AEMにログインし、AdobeDynamic MediaクラシックCloud Servicesを設定済みで、Dynamic Mediaクラシックコンポーネントが使用可能であることを確認します。

    メモ

    Dynamic Mediaクラシックコンポーネントが使用できない場合は、デザインモードを使用して有効にしてください。

  2. Dynamic Mediaクラシック​コンポーネントが有効なWebサイトで、画像​コンポーネントをページにドラッグします。

  3. コンポーネントを選択し、設定アイコンをタップします。

  4. Dynamic Mediaクラシック設定​タブで、ブレークポイントを調整します。

    chlimage_1-225

  5. ビューアがレスポンシブにサイズ変更され、すべてのインタラクションがデスクトップ、タブレットおよびモバイル用に最適化されていることを確認します。

すべてのDynamic Mediaクラシックコンポーネントに共通の設定

設定オプションは異なりますが、以下はすべてのDynamic Mediaクラシックコンポーネントに共通です。

  • ファイル
    参照参照するファイルを参照します。ファイル参照にはアセットのURLが表示されます。このURLは、URLコマンドとパラメータを含む完全なDynamic MediaクラシックURLとは限りません。 このフィールドには、Dynamic MediaクラシックURLのコマンドとパラメータを追加できません。 それらは、コンポーネントの対応する機能を使用して追加する必要があります。

  • 幅幅幅を設定します。

  • 高さ:高さを設定します。

これらの設定オプションは、例えば​ズーム​コンポーネントを開いた場合など、Dynamic Mediaクラシックコンポーネントを開く(重複クリック)ことで設定できます。

chlimage_1-226

ズーム

+​ボタンを押すと、HTML5ズームコンポーネントで大きい画像が表示されます。

アセットの下部にはズームツールが用意されています。+​をタップして拡大します。 -​をタップして減らします。 x​またはズームリセットの矢印をタップすると、画像が読み込み元のサイズに戻ります。 斜めの矢印をタップして、画面全体を表示します。 「編集」をタップして、コンポーネントを設定します。 このコンポーネントでは、Dynamic Mediaクラシックコンポーネント🔗に共通の設定を構成できます。

chlimage_1-227

Flyout

HTML5 フライアウト​コンポーネントでは、アセットは分割画面で表示されます。アセットを指定されたサイズで残し、右にズーム部分が表示されます。 「編集」をタップして、コンポーネントを設定します。 このコンポーネントを使用すると、すべてのDynamic Mediaクラシックコンポーネント🔗に共通の設定を構成できます。

メモ

フライアウト​コンポーネントでカスタムサイズを使用する場合、そのカスタムサイズが使用され、コンポーネントのレスポンシブセットアップが無効になります。

フライアウト​コンポーネントで、デザイン表示​の設定に従って初期設定のサイズが使用される場合は、初期設定のサイズが使用され、コンポーネントが伸張して、コンポーネントのレスポンシブ設定にページレイアウトサイズが調整されます。ただし、コンポーネントのレスポンシブセットアップには制限があることに注意してください。レスポンシブ設定で​フライアウト​コンポーネントを使用する場合は、フルページで使用しないでください。そうでないと、フライアウト​がページの右の境界線を越える場合があります。

chlimage_1-228

画像

Dynamic Mediaクラシック​イメージ​コンポーネントを使用すると、Dynamic Mediaクラシック修飾子、画像またはビューアプリセット、シャープなどのDynamic Mediaクラシック機能を画像に追加できます。 Dynamic Mediaクラシック​イメージ​コンポーネントは、特別なDynamic Mediaクラシック機能を持つAEMの他のイメージコンポーネントと似ています。 この例では、画像にDynamic MediaクラシックURL修飾子​&op_invert=1​が適用されています。

chlimage_1-229

  • タイトル、代替
    テキスト ​「詳細」タブで、画像にタイトルを追加し、グラフィックをオフにしているユーザー用の代替テキストを追加します。

  • URL、開くアセ
    ットを設定して、リンクを開くことができます。「URL」と「次のウィンドウで開く」で、同じウィンドウで開くか新しいウィンドウで開くかを指定します。

chlimage_1-230

  • ビューア
    プリセットドロップダウンメニューから既存のビューアプリセットを選択します。探しているビューアプリセットが表示されない場合は、表示できるように設定する必要があります。詳しくは、ビューアプリセットの管理を参照してください。画像プリセットを使用している場合は、ビューアプリセットを選択できません。逆の場合も同様です。

  • Dynamic Mediaクラシック
    設定Scene7 Publishing Systemからアクティブな画像プリセットを取得する際に使用するDynamic Mediaクラシック設定を選択します。

  • 画像
    プリセットドロップダウンメニューから既存の画像プリセットを選択します。探している画像プリセットが表示されない場合は、表示できるように設定する必要があります。画像プリセットの管理を参照してください。画像プリセットを使用している場合は、ビューアプリセットを選択できません。逆の場合も同様です。

  • 出力
    形式画像の出力形式を選択します(jpegなど)。選択する出力形式によっては、追加の設定オプションが表示される場合があります。画像プリセットのベストプラクティスを参照してください。


  • ャープ画像にシャープを適用する方法を選択します。シャープニングについて詳しくは、画像プリセットのベストプラクティスおよびシャープニングのベストプラクティスを参照してください。

  • URL
    修飾子追加のDynamic Mediaクラシック画像コマンドを提供することで、画像効果を変更できます。詳しくは、画像プリセットおよび「コマンドリファレンス」を参照してください。

  • ブレ
    ークポイントWebサイトがレスポンシブな場合は、ブレークポイントを調整する必要があります。ブレークポイントはコンマ(,)で区切って指定してください。

画像テンプレート

Dynamic Mediaクラシック画像 テンプレートは、Dynamic Mediaクラシックに読み込まれたレイヤーPhotoshopコンテンツです。コンテンツとプロパティは可変性を考慮してパラメータ化されていました。画像テンプレート​コンポーネントを使用すると、画像を読み込んで、テキストを AEM で動的に変更できます。また、ClientContext の値を使用するように​画像テンプレート​コンポーネントを設定できます。これにより、各ユーザーが個別に画像を活用できます。

編集」をタップして、コンポーネントを設定します。 設定は、すべてのDynamic Mediaクラシックコンポーネントに共通の設定と、この節で説明する他の設定を構成できます。

chlimage_1-231

  • ファイル参照、幅、
    高さすべてのDynamic Mediaクラシックコンポーネントに共通の設定を参照してください。

    メモ

    Dynamic MediaクラシックURLのコマンドとパラメーターをファイル参照URLに直接追加することはできません。 これらは、パラメーター​パネルのコンポーネントの UI でのみ定義できます。

  • タイトル、代替
    テキスト「Dynamic Mediaクラシック画像テンプレート」タブで、画像にタイトルを追加し、グラフィックをオフにしているユーザ用の代替テキストを追加します。

  • URL、開くアセ
    ットを設定して、リンクを開くことができます。「URL」と「次のウィンドウで開く」で、同じウィンドウで開くか新しいウィンドウで開くかを指定します。

chlimage_1-232

  • パラメータ
    パネル画像を読み込むと、パラメータに画像の情報が事前に入力されます。動的に変更できるコンテンツがない場合、このウィンドウは空になります。

chlimage_1-233

テキストの動的な変更

テキストを動的に変更するには、新しいテキストをフィールドに入力して、「OK」をクリックします。この例では、「価格」が $50 で、送料が 99 セントです。

chlimage_1-234

画像内のテキストが変更されます。フィールドの横の「リセット」をタップすると、テキストを元の値に戻すことができます。

chlimage_1-235

ClientContext の値を反映したテキストの変更

フィールドをクライアントコンテキスト値にリンクするには、「選択」をタップしてクライアントコンテキストメニューを開き、クライアントコンテキストを選択して「OK」をタップします。 この例では、「名前」フィールドとプロファイル内の書式設定された名前とのリンクに基づいて名前が変わります。

chlimage_1-236

現在ログインしているユーザーの名前がテキストに反映されます。フィールドの横にある「リセット」をクリックすると、テキストを元の値に戻すことができます。

chlimage_1-237

  1. Dynamic Mediaクラシック​画像テンプレート​コンポーネントを含むページで、「編集」をタップします。

  2. URL」フィールドに、画像をタップしたときにユーザーが移動するURLを入力します。 「次のウィンドウで開く」フィールドで、ターゲットを新しいウィンドウと同じウィンドウのどちらで開くかを選択します。

    chlimage_1-238

  3. OK」をタップします。

ビデオコンポーネント

Dynamic Mediaクラシック​ビデオ​コンポーネント(サイドキックのDynamic Mediaクラシックセクションから利用可能)は、デバイスと帯域幅検出を使用して、各画面に適切なビデオを提供します。 このコンポーネントは HTML5 ビデオプレーヤー(チャネルを超えて使用可能な単一のビューア)です。

このコンポーネントはアダプティブビデオセット(単一の MP4 ビデオまたは単一の F4V ビデオ)で使用できます。

Dynamic Mediaクラシック統合でのビデオの動作について詳しくは、ビデオを参照してください。 また、Dynamic MediaクラシックビデオコンポーネントとFoundationビデオコンポーネントを参照してください。

chlimage_1-239

ビデオコンポーネントに関する既知の制限事項

マスタービデオがアップロードされると、Adobe DAM および WCM が表示されます。次に示すプロキシアセットは表示されません。

  • Dynamic Mediaクラシックエンコードレンディション
  • Dynamic Mediaクラシックアダプティブビデオセット

Dynamic Mediaクラシックビデオコンポーネントでアダプティブビデオセットを使用する場合は、ビデオのサイズに合わせてコンポーネントのサイズを変更する必要があります。

Dynamic Mediaクラシックコンテンツブラウザ

Dynamic Mediaクラシックコンテンツブラウザを使用すると、Dynamic MediaクラシックのコンテンツをAEMで直接表示できます。 コンテンツブラウザーにアクセスするには、コンテンツファインダー​で、タッチ操作向けユーザーインターフェイスの「Dynamic Mediaクラシック」を選択するか、クラシックユーザーインターフェイスの「S7」アイコンを選択します。 どちらの UI を使用しても機能は同じです。

設定が複数ある場合、AEM では既定でデフォルト設定が表示されます。ドロップダウンメニューのDynamic Mediaクラシックコンテンツブラウザで、異なる設定を直接選択できます。

メモ
  • アドホックフォルダーにあるアセットは、Dynamic Mediaクラシックコンテンツブラウザーには表示されません。
  • セキュアプレビューを有効にすると、Dynamic Mediaクラシックの公開アセットと非公開アセットの両方が、Dynamic Mediaクラシックのコンテンツブラウザーに表示されます。
  • コンテンツブラウザーで​Dynamic Mediaクラシック​または​S7​アイコンがオプションとして表示されない場合は、AEM🔗で動作するようにDynamic Mediaクラシックを設定する必要があります。
  • ビデオの場合、Dynamic Mediaクラシックコンテンツブラウザは次の機能をサポートします。
  • アダプティブビデオセット:複数の画面でシームレスに再生するために必要なすべてのビデオレンディションのコンテナ
  • 単一の MP4 ビデオ
  • 単一の F4V ビデオ

タッチ操作向けUIでのコンテンツの参照

タッチ対応 UI またはクラシック UI を使用してコンテンツブラウザーにアクセスできます。現時点では、タッチ対応 UI には次の制限事項があります。

  • FXGおよびDynamic MediaクラシックからのFlashアセットはサポートされていません。

3番目のドロップダウンメニューから​Dynamic Mediaクラシック​を選択して、Dynamic Mediaクラシックアセットを参照します。 Dynamic Mediaクラシック/AEM統合を設定していない場合、リストにDynamic Mediaクラシックは表示されません。

メモ
  • Dynamic Mediaクラシックコンテンツブラウザは、約100個のアセットを読み込み、名前順に並べ替えます。
  • セキュリティで保護されたプレビューサーバーが設定されている場合、ブラウザーはそのプレビューサーバーを使用してサムネールとアセットをレンダリングします。

chlimage_1-240

また、ブラウザー内でアセットの上にマウスポインターを置くと、解像度の情報、サイズ、変更後の日数およびファイル名を参照できます。

chlimage_1-241

  • アダプティブビデオセットとテンプレートの場合は、サムネール用のサイズ情報が生成されません。
  • アダプティブビデオセットの場合は、サムネール用の解像度が生成されません。

コンテンツブラウザーでのDynamic Mediaクラシックアセットの検索

Dynamic Mediaクラシックアセットの検索は、AEMアセットの検索と似ていますが、検索を行うと、実際にはAEMに直接読み込むのではなく、Dynamic Mediaクラシックシステムでアセットのリモート表示が表示されます。

クラシック UI またはタッチ操作向け UI を使用して、アセットを表示および検索できます。インターフェイスによって検索方法は多少異なります。

どちらの UI で検索する場合でも、次の基準でフィルターを適用できます(ここでは、タッチ操作向け UI を示しています)。

  • キー
    ワードを入力アセットを名前で検索できます。検索時には、入力したキーワードで始まるファイル名が検索されます。例えば、「swimming」という単語を入力すると、入力した順序どおりの文字列で始まるアセットファイルの名前が検索されます。キーワードを入力した後は、必ずenterをタップしてアセットを検索してください。

chlimage_1-242

  • Folder/
    path表示されるフォルダーの名前は、選択した設定に基づきます。フォルダーのアイコンをタップし、サブフォルダーを選択し、チェックマークをタップしてレベルを下げることができます。

キーワードを入力してフォルダーを選択すると、AEM ではそのフォルダーがとすべてのサブフォルダーが検索されます。ただし、検索時にキーワードを入力しない場合は、フォルダーを選択してもそのフォルダー内のアセットしか表示されず、サブフォルダーは含まれません。

デフォルトでは、AEM は、選択したフォルダーとすべてのサブフォルダーを検索します。

chlimage_1-243

  • AssetSelect
    ​Dynamic Mediaクラシックのタイプを使用して、Dynamic Mediaクラシックのコンテンツを参照します。このオプションは、Dynamic Mediaクラシックが設定済みの場合にのみ使用できます。

chlimage_1-244


  • 設定 Cloud Servicesで複数のDynamic Mediaクラシック設定が定義されている場合は、ここで選択できます。そのため、選択した設定に基づいてフォルダーが変わります。

chlimage_1-245

  • アセット
    タイプDynamic Mediaクラシックブラウザでは、結果をフィルタして次のいずれかを含めることができます。画像、テンプレート、ビデオおよびアダプティブビデオセットを参照してください。アセットタイプを選択しない場合、AEM ではデフォルトですべてのアセットタイプが検索されます。

chlimage_1-246

メモ
  • クラシック UI では、FlashFXG も検索できます。現時点では、タッチ対応 UI でのこれらのフィルタリングはサポートされていません。

  • ビデオを検索するときは、単一のレンディションが検索されています。結果は、元のレンディション(*.mp4のみ)とエンコードされたレンディションを返します。

  • アダプティブビデオセットを検索する場合、フォルダとすべてのサブフォルダが検索されますが、検索にキーワードを追加した場合のみ検索されます。 キーワードを追加しない場合、AEM はサブフォルダーを検索しません。

  • 発行
    ステータス発行ステータスに基づいて、アセットをフィルタリングできます。 ​非公開または 公開済み。「公開ステータス」を選択しない場合、AEMでは、デフォルトで、すべての公開ステータスが検索されます。

chlimage_1-247

このページ

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