[AEM Assets]{class="badge positive" title="AEM Assetsに適用）。"}

Dynamic Media ジャーニー：基礎知識、第 2 部 dm-journey-part2

Dynamic Media ジャーニー：基本、パート IIへようこそ。ここでは、次の内容を学習できます。

Dynamic Media ジャーニー：基本、パート Iも参照してください。

Dynamic Media URL の分解と Dynamic Media のコンテンツ配信方法 dm-journey-d

Dynamic Media アセットをアップロードして公開したら、アセットの生成URLをコピーしてブラウザーに貼り付け、アセットが顧客にどのように表示されるかを確認できます。 監視イメージの次のコピーされたURLは、読みやすく理解しやすいように、カラーで分類されています。

Dynamic Media URLの構造。

URL の最初の部分（赤）は、サーバードメイン自体を参照しています。 In this case, Dynamic Media is running on a generic server domain, which is https://s7d1.scene7.com/is/image/. Dynamic Mediaが一連の画像を提供しているかどうかを、サーバードメインを確認することで簡単に識別できます。 URL構造は一貫しています。 ただし、一部のDynamic Mediaのお客様は、専用のサーバードメイン（name-of-your-company.scene7.com）に切り替えています。 スマートイメージングには専用のサーバードメインが必要です。

アカウント名は紫色の部分です。 この場合、アカウントは jpearldemo です。

アセット ID または名前 AdobeStock_28563982 は緑色です。 アセットには .png または .jpg のようなファイル拡張子は​付きません。 アセットが Dynamic Media に取り込まれると、ファイル拡張子が削除され、別の種類のファイル、ピラミッド型 TIFF ファイルが作成されます。 ピラミッド TIFFを使用すると、Dynamic Mediaはレンディションを即座にすばやく作成できます。

最後に、画像処理パラメーター ?wid=1000&fmt=jpeg&qlt=85 が、末尾の黄色です。

この URL パスは実稼働しています。 試してみる。

Dynamic Media URLとWatch画像に対してブラウザーウィンドウが開いたままの状態で、URLを変更して画像のレンディションを作成する方法を確認します。

URL を使用した腕時計画像のレンダリング

最初に、URL パス内の画像処理ルールのみを手動で削除します。サーバー名、アカウント名、アセット ID または画像名はそのままにします。 試してみる。

次に、URL の末尾に画像処理パラメーターを追加します。 URL フィールドで、画像名の右側に「?wid=500」と入力し、Enter キーを押します。 試してみる。

時計の新しいレンディションが生成されます。 画像の幅を変更するこの簡単な演習から理解すべき重要なポイントは、見た画像が動的に100%生成されることです。

次に、幅の値 500 ピクセルを 1000 ピクセルに変更し、Enter キーを押します。 試してみる。
Enter キーが押された瞬間、ブラウザーは Dynamic Media Image Server に戻ります。 入力した新しい幅の値に基づいて腕時計のレンディションを生成し、画像をブラウザーに配信してキャッシュします。

Dynamic Media には、web ページ上の画像アセットの微調整に使用できる、多数の画像処理パラメーターがあります。 こちらからリストを確認できます。

次に、時計の画像に回転パラメーターを追加してみます。 URL パスの最後で、wid=1000の直後に&rotate=90と入力し、Enter​を押します。 試してみる。

時計はまだ少し左に歪んでいます。 回転の値を 90 から 92 に変更し、Enter キーを押します。 試してみる。

繰り返しますが、Enter​を押すと、新しいレンディションのウォッチがすぐに生成されます。 パフォーマンスのレベルを確認できます。これにより、Dynamic Mediaがトラフィックの多い期間中に​秒あたり 800,000件を超える画像リクエストを配信できる理由を説明します。

URLの画像処理パラメーターを画像ごとに変更すると、特に数千の画像を持つweb サイトでは非効率的です。 画像プリセットを使用する方法がはるかに効率的です。

アセットをレンダリングするための画像プリセットの作成の基本 dm-journey-e

画像を作成する方法はいくつかあります。 利用可能な画像が必要です。 従来、クリエイターはAdobe Photoshopにアクセスし、これらの異なるレンディションをそれぞれ静止画像として保存していました。

良好：静的な画像。それぞれ手動で作成しました。

クリエイティブ担当者が画像を見て，

「実は、時計の文字盤を見やすくするために、長針が 4 を、短針が 1 を指すように撮りたかったんだ」

クリエイティブは、すべての新しい静止画像を撮り直します。

しかし、Dynamic Media では、異なる画像プリセットがあれば、必要な場所でそれらの画像を使用できます。 画像プリセットには標準が適用されます。

最適：Search_GridやThumbnailなどの画像プリセットを使用して、複数のレンディションが即座に作成される1つのファイル。

特定のタイプの画像が必要な場所の例を以下に示します。

その画像を使用する場所と同じパラメーターで配信する必要があります。

ここで、Dynamic Media での画像プリセットの作成方法を見てみましょう。

基本タブから始まる画像プリセットを作成します。

上の例で、「Medium」という名前で新しい画像プリセットが作成されたことがわかります。 Dynamic Media では、標準搭載の画像（バックパック）の例を使用して、画像プリセットの作成時に特性を確認できます。

この「Medium」画像プリセットの幅は 500 ピクセル、高さは 800 ピクセルです。 このジャーニーの第 1 部では、様々な形式でのアセットの配信について読みました。 「形式」プルダウンメニューから、JPEG、PNG、TIFF またはその他の複数の形式でアセットを配信するよう選択できます。 これには柔軟性があります。

「詳細」タブを選択すると、アセットのカラースペースに関するオプションが表示されます。 「Basic」タブで選択したフォーマットに応じて、RGB、グレースケール、またはCMYKでアセットを配信できます。 カラープロファイル プルダウンメニューを使用して、印刷用のCMYK画像アセットを配信する方法を選択します。 また、画像をシャープにするために適用できる追加のパラメーターもあります。 この例では、「アンシャープマスク」が適用されました。

詳細タブからオプションを選択して、画像プリセットを作成します。

先ほどDynamic Media URLの構造で、Dynamic Media URLとその構築方法について読んだことを思い出してください。 この「画像の修飾子」テキストボックスに、必要な追加の画像処理パラメーターを入力できます。 パラメーターは、プリセットを使用して画像を配信する際に、URL のプリセット名に含まれます。 上のスクリーンショットでは、パラメーター bgc=451B15 が追加されました。 つまり、暗い茶色の背景色が追加されました。

画像プリセットは、画像の設定と考えることができます。 プリセットを常に使用する画像が配信されます。同じです。 また、パラメーター &op_brightness=+10 が、明るさを少し増やすために追加されました。

完了したら、プリセットを保存すると、既存のすべての画像で使用できるようになります。 この例では、Medium 画像プリセットを、液体チョコレートが入ったボウルの画像に適用します。

画像のレンディションを生成するには、画像プリセット Mediumを適用します。

画像の外観を確認するには、URLをコピーしてブラウザーに貼り付けます。 試してみる。

ブラウザーで、フル URL パスに画像プリセットの名前 Medium が表示されます。

表示された画像の鮮明さを確認できると思います。 この品質は、チョコレートボウルを撮影した方法に一部起因します。 また、Dynamic Media では、デジタルチャネルに配信される画像よりも大きな画像を保存できることも一因です。

チョコレートボウルの表示に納得したら、web ページで画像を表示する場所に URL を貼り付けます。

下の時計の画像を再確認する、Cart 画像プリセット、Grid プリセット、Large プリセット、PDP-page（製品の詳細ページ）プリセットなどがあります。

静的および動的画像プリセット。 時計の画像は、PDP-page 画像プリセットを使用してレンダリングされました。

しかし、web サイト上の画像を変更する必要がある場合はどうしますか？ 例えば、あるテストを行ったところ、120 x 120 （画像プリセット Cart）の画像が思ったとおりに認識されていないことが判明したとします。 幅を175 ピクセルに、高さを175 ピクセルに増やして、画像サイズを大きくします。 従来、Adobe Photoshopでは、そのようなカート画像はすべて再作成されます。 ただし、Dynamic Mediaでは、次の例に示すように、「幅」と「高さ」の値を175に更新して画像プリセットを編集し、プリセットを保存します。

画像プリセット Cartの幅と高さを編集しています。

画像プリセットを変更してキャッシュをクリアすると、すべての画像が更新され、そのプリセットで使用されているすべてのURLが​ not ​どこかを変更します。 つまり、リンク切れはなく、web ページのリダイレクトも不要です。

画像セット、スピンセット、混在メディアセット dm-journey-f

Dynamic Mediaのより一般的な用途の一部は、画像セット、スピンセット、および混在メディアセットを作成する機能です。

画像セットは、通常、一連の画像アセットで構成され、単一のエンティティとして表示されます。 このようなセットは、ユーザーに対して統一された視聴エクスペリエンスを提供します。ユーザーはこのエクスペリエンスで、サムネイル画像をクリックしてアイテムの様々なビューを表示できます。 画像セットによって、アイテムの別のビューを表示できます。ビューアでは、画像をより詳しく確認するためのズームツールを利用できます。 Flyout ビューアを使用する「Running」という画像セットを表示します。

Dynamic Media の中にランニングシューズの画像がいくつかあります。 これは、営業部門とマーケティング部門が、顧客に対して、ひとつのプレゼンテーションである画像セットとして見てもらいたいものです。

画像セットの作成開始。

画像セットを作成するには、「作成」プルダウンメニューから​ 画像セット ​を選択します。 メニューには、混在メディアセット、スピンセット、カルーセルセット​を作成するためのオプションもあります。 これらのセットは、画像セットと同じ方法で作成します。

混在メディアセットには、画像、スウォッチセット、スピンセット、ビデオおよびアダプティブビデオセットを含めることができます。 試してみる。 スピンセットを使用すると、ユーザーはオブジェクトを回転して調べることができます。 スピンセットを使用すると、主要な視覚的ディテールをあらゆる角度から確認できます。 試してみる。

画像セットの作成は簡単です。 セットに含める画像アセットを追加します。

画像セットエディターを使用すると、画像アセットを追加し、セット内の外観を並べ替えることができます。

セットには名前を付ける必要があります。 名前は後で編集できないので、慎重に付けてください。 上記の例では、このセットは Running という名前です。 完了したら、セットを保存します。

そして、これが Experience Manager Assets での Running の画像セットです。

Experience Manager AssetsのRunning画像セット、カードビュー

画像セット、混在メディアセット、スピンセットまたはその他のインタラクティブメディアを作成した後、それが顧客にどのように表示され、どのように動作するかをプレビューします。 Dynamic Mediaには多数のビューアが組み込まれているため、これを行うことができます。

次の例に示すように、画像セットを選択してプレビューで開きます。

ビューアーオプションを選択してプレビューで設定されたRunning画像。

プレビューで、ランニングシューズの見本を選択し、シューズをズームインおよびズームアウトできます。 ビューアをセットに適用するには、プルダウンメニューから「ビューア」を選択します。

フライアウトビューアが適用されたRunning画像セット。

ここでは、Flyout ビューアが選択されました。 この時点で、ビューアで画像セットをプレビューできます。 しかし、顧客がそれを見るように、ブラウザでそれを見るのが最善です。 左下にある URL を選択し、URL をコピーしてブラウザーに貼り付けます。 試してみる。

単一の URL で、web サイト上で画像セットとビューアが使用できます。 前の例では、埋め込み​がURL ボタンの右側にあることに気づきました。 「埋め込み」を選択すると、この画像セット／ビューアのコードをコピーして、web ページまたは Experience Manager Sites コンポーネントに追加できます。

フライアウトビューアは、プロパティを編集できるデフォルトの標準ビューアです。 または、画像プリセットの作成と同様に、独自のカスタムビューアを作成できます。

営業部門とマーケティング部門がフライアウトビューアーを好まないとします。 ズーム機能は気に入っているのですが、顧客には直接シューズの上でズーム効果を見てほしいと考えています。 そのような場合は、インラインズームビューアを画像セットに適用し、そのURLをブラウザーにコピー&ペーストして、その動作を確認します。 試してみる。

靴の上にマウスポインターを移動すると、画像がズームインし、ポインターを移動すると詳細が表示されます。 このズームエフェクトは、Dynamic Mediaに最初にアップロードされた画像のサイズが原因です。

消費者としての役割、または専門家としての役割を検討し、さまざまなweb サイトにアクセスすると、これらの機能の例が表示されます。 その方法と、Dynamic Mediaの機能を自身の作業や会社のweb サイトで使用する方法について検討します。

画像セットとビューアについて説明します。 他にもいくつかのビューアで、アセットを試してみてください。 ビューアをリセットするには、左下隅の「更新」ボタンをクリックします。

オプション - 詳細情報

詳細については、以下の資料を参照してください。 以上で、Dynamic Media ジャーニーは完了です。

Dynamic Media チュートリアル

Dynamic Media ビューア