eCatalog画像マップの作成

画像マップとは、eCatalogページ上の領域で、マウスでロールオーバーしたり、様々な種類のアクションをトリガーするために選択したりできます。 例えば、画像マップ上にポインタを移動すると、項目のロールオーバーテキスト説明が表示されます。 画像マップを選択すると、別のアクションが開始されます。 例えば、Web ページを開いてアイテムに関する詳細を確認したり、購入することができます。また、ビデオを起動して使用中のアイテムを確認することもできます。

eCatalog画像マップを描画

eCatalog では、eCatalog 画面の「ページをマップ」タブで画像マップを描画します。この画面は、eCatalog のページを表示する画像マップ領域と、右側に表示される画像マップリストから構成されます。画像マップを作成すると、その名前が画像マップリストに表示されます。

  1. eCatalogのロールオーバーの「編集」ボタンを選択します。

  2. ページをマップ」を選択します。

  3. ページをマップ画面の左側で、必要なページを選択します。

  4. 以下の手順に従って、長方形または多角形の画像マップを画像マップ領域で描画します。

    • 長方形マップ — 長方形画像マップツールを選択し、ページ上をドラッグして長方形を作成します。

    • 多角形マップ — 多角形画像マップツールを選択し、画像の周囲を必要な回数だけ選択します。選択すると、AdobeDynamic Media Classicは画像マップの境界線を描画します。

      画像マップを描画した後、AdobeDynamic Media Classicは画像マップリストにその画像マップの名前を割り当てます。 名前を作成するために、AdobeDynamic Media Classicは、作業中のeCatalogページの名前に連番を追加します。

  5. (オプション)画像マップリストの「名前」列に、画像マップの新しい名前を入力できます。 名前を入力するときは、空白を入力しないでください。

  6. ビューアが画像マップを選択する際に、新しいWebページを開くことができます。 画像マップリストパネルの「URL」列に Web ページの URL を入力します。

    URL(Hrefテンプレート)を簡単に入力するには、「編集」を選択し、テンプレートを入力します。

テンプレートを使用したJavaScriptとURLの入力を参照してください。

  1. (オプション)「表示」ドロップダウンリストで「テキストのロールオーバー」を選択し、ユーザーが画像マップにポインターを合わせたときに画面に表示するテキストを入力します。

  2. (オプション)「表示」ドロップダウンリストで「その他のアクション」を選択し、ユーザーが画像マップにポインターを合わせたときにぼかしや焦点のトリガーを行う属性を入力します。

    画像マップのその他のアクションの定義を参照してください。

  3. 保存」を選択します。

  4. (オプション)「プレビュー」を選択して、eCatalogをデフォルトのeCatalogビューアプリセットで表示します。

画像マップを削除するには、画像マップリストでその名前を選択し、「削除」を選択します。 画像マップを削除せずに一時的に画像マップをページから取り除くには、画像マップリストパネルの画像マップの「オン」オプションを選択解除します。

eCatalogへのリッチメディアの埋め込み

eCatalog のリッチメディアオプションを使用して、eCatalog に追加した画像マップに MP4 フォーマットのビデオやスピンセットを追加することができます。ユーザーがeCatalog内の画像マップ領域を選択すると、関連するスピンセットまたはビデオが表示されます。 この機能は、顧客に使用中のアイテムを表示したい場合や、異なる角度や展望からアイテムを表示したい場合に特に役に立ちます。

また、オプションで、顧客が画像マップにポインタを合わせたときに、選択した項目を把握できるよう、ツールチップテキストを表示することもできます。

eCatalog にリッチメディアを埋め込むには:

  1. eCatalog 画像マップを描画します。

    eCatalog画像マップの描画を参照してください。

  2. 「表示」ドロップダウンリストで、「リッチメディア」を選択します。

  3. 左側のアセットを追加パネルで、埋め込むスピンセットまたはビデオ(MP4 フォーマット)アセットを含むフォルダに移動します。

  4. アセットを画像マップにドラッグします。

  5. (オプション)画像マップリストパネルの「ツールヒント」列見出しの下で、ビューアが画像マップにポインターを合わせたときに画面に表示するテキストを入力します。

  6. 保存」を選択します。

eCatalog 画像マップの編集

eCatalog 画面の「ページをマップ」タブを選択し、以下の手順に従って、eCatalog の画像マップを編集できます。

  • 位置の調整 — パンツールを選択し、ポインタをマップの境界線の上ではなく近くに移動します。ポインタが 4 方向の矢印アイコンに変わったら画像マップ全体を新しい場所に移動します。

    画像マップの位置、形状、サイズを調整するを参照してください。

  • シェイプとサイズの変更 — 長方形の画像マップのサイズを変更するには、パンツールを選択します。左右の境界線または角の部分にポインタを合わせ、ポインタが 2 方向の矢印アイコンに変わったら、ドラッグします。多角形の画像マップのサイズを変更する場合は、正方形の選択ハンドルをドラッグします。選択ハンドルを作成するには、画像マップの境界線を選択し、ドラッグします。

    画像マップの位置、形状、サイズを調整するを参照してください。

  • 画像マップの削除 — パンツールを選択し、画像マップを選択して、「削除」を選 択します

    eCatalogからすべての画像マップを削除するには、「ページを並べ替え」タブを選択し、「マップをクリア」を選択します。

  • 重なっている画像マップの処理 — ドラッグして、画像マップリスト上の画像マップの順序を変更します。

    重なり合う画像マップの処理を参照してください。

  • 画像マップを他のページにコピーする - 「 マップのコピー先 」を選択します(「ページをマップ」タブを表示していることを確認してください)。画像を選択画面で、画像マップをコピーする1つ以上のページを選択し、「​を選択します。

    画像マップを他の画像にコピーするを参照してください。

メモ

画像マップをeCatalog内の異なるページにコピーする以外に、eCatalog内のすべての画像マップを別のeCatalogにコピーできます。 eCatalog間で画像マップをコピーするを参照してください。

画像マップデータの確認と読み込み

マップの概要画面を開くと、eCatalog のメタデータが表示されます。また、この画面から、eCatalog の画像マップデータをバッチ読み込みすることもできます。この方式で画像マップデータを読み込むようにすると、画像マップの URL やロールオーバーテキストを簡単に入力できるようになります。

マップの概要画面を表示するには、eCatalog画面の「マップページ」タブで、「概要」を選択します。

画像マップのデータ概要の確認

  1. ページをマップ画面で、「概要」を選択します。

    マップの概要画面を開くと、eCatalog に含まれている画像マップ、URL、ロールオーバーテキストの記述、その他のアクションの数が表示されます。

  2. ロールオーバーキーエラーがある場合は、 Rollover_Key Error​列でエラーを選択し、エラーを修正するためにスプレッドシートで何を変更する必要があるかを確認します。 このメッセージのテキストを選択し、コピーしてスプレッドシートにペーストできます。

  3. プレビュー​を選択して、eCatalogビューアでページを確認できます。「X」を選択して概要画面を閉じ、ページをマップ画面に戻るか、「閉じる」を選択して参照画面に戻ります。

画像マップデータの読み込み

ページごとに画像マップデータを入力する方法もありますが、eCatalog 全体のデータをマップの概要画面で読み込むこともできます。イメージマップデータは、タブ区切りファイルまたは XML DTD 形式で読み込みます。ファイルのフィールドの並び順は、マップの概要画面の表示順と同じにする必要があります。名前、TOC ラベル、マップ、URL、ロールオーバーテキスト、その他のアクション、検索文字列の順に並ぶようにしてください。画像マップデータを読み込むと、画像マップを作成するたびにそのデータを画像マップリストで入力する手間が省けます。

メモ

画像マップデータを読み込む場合、対応する画像マップが既に作成されている必要があります。

マップの概要画面を開き、以下の手順のいずれかに従って、作成した画像マップに対応する画像マップデータを読み込みます。

  1. マップデータを読み込み」を選択します。
  2. 「メタデータを読み込み」ダイアログで「参照」を選択し、タブ区切りのDTDファイルまたはXML DTDファイルを選択します。
  3. ファイルの拡張子を変更しないように注意しながら、「ジョブ名」フィールドにファイルの名前を入力します。
  4. アップロード」を選択します。

eCatalog間での画像マップのコピー

eCatalog 内のすべての画像マップを別の eCatalog にコピーできます。画像マップのコピーというこの方法により、同じ eCatalog の各国語版で容易に画像マップをコピーすることができます。コピーを正常におこなうために、AdobeAdobeDynamic Media Classicでは、同じページ数と同じ画像を持つeCatalog間でコピーすることをお勧めします。

メモ

画像マップのコピー先の eCatalog に既に画像マップが含まれている場合、コピー時にそれらの画像マップは削除されます。

1つのeCatalog内のすべての画像マップを別のeCatalogにコピーするには、次の手順を実行します。

  1. コピーする画像マップを含むeCatalogを選択し、eCatalogのロールオーバー​​を編集」ボタンを選択します。
  2. 「ページの順序」タブで、「マップをコピー」を選択します。
  3. アセットを選択ダイアログボックスで、画像マップをコピーするeCatalogを選択し、「選択」を選択します。

AdobeDynamic Media Classicは、ターゲットeCatalog(画像マップのコピー先のeCatalog)のページ数または画像数が異なる場合に警告メッセージを表示します。 警告が表示された場合でも、「続行」を選択して画像マップをコピーします。

このページ