ドキュメントAEMAEM チュートリアルDynamic Media Classic チュートリアル

基本テンプレートの概要 basic-templates

Last update: Thu Oct 10 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 適用対象：
  • Experience Manager 6.4
  • Experience Manager 6.5

作成対象：

  • 初心者
  • ユーザー

Dynamic Media Classic の用語では、テンプレートとは、公開後に URL を使用して動的に変更できるドキュメントのことです。Dynamic Media Classic には基本テンプレートが用意されています。これは、Image Server から呼び出される画像ベースのテンプレートで、画像とレンダリング済みテキストで構成されます。

テンプレートの最も強力な側面の 1 つは、テンプレートをデータベースに結び付けることができる直接統合ポイントがあることです。つまり、画像を提供してサイズを変更できるだけでなく、データベースにクエリを実行して新規品目や販売品目を検索し、画像上にオーバーレイとして表示することもできます。また、品目の説明を要求し、選択したフォントやレイアウトでラベルとして表示することもできます。可能性は無限です。

基本テンプレートは、単純なものから複雑なものまで、様々な方法で実装できます。次に例を示します。

  • 基本マーチャンダイジング。該当する商品が送料無料の場合に、「送料無料」などのラベルを使用します。これらのラベルは、商品チームが Photoshop でセットアップし、web ではロジックを使用して、画像に適用するタイミングを把握します。
  • 詳細マーチャンダイジング。各テンプレートには複数の変数があり、複数のオプションを同時に表示できます。データベース、在庫およびビジネスルールを使用して、製品を「ジャストイン」、「クリアランス」または「売り切れ」として表示するタイミングを決定します。また、様々な部屋などの背景に合わせて、製品の背後に透明度を適用して表示することもできます。同じテンプレートやアセットを製品の詳細ページで再利用して、同じ製品の大きいバージョンやズーム可能なバージョンを様々な背景で表示することができます。

Dynamic Media Classic は、これらのテンプレートベースのアプリケーションの視覚的な部分のみを提供することを理解しておいてください。Dynamic Media Classic の企業または統合パートナーは、アプリケーションを作成するためのビジネスルール、データベースおよび開発スキルを提供する必要があります。「組み込み」テンプレートアプリケーションはありません。デザイナーが Dynamic Media Classic でテンプレートをセットアップし、開発者が URL 呼び出しを使用してテンプレートの変数を変更します。

チュートリアルのこの節を最後まで学習すると、次の方法を理解することができます。

  • Photoshop PSD を Dynamic Media Classic にアップロードして、テンプレートの基礎として使用します。
  • 画像レイヤーで構成されるシンプルなマーチャンダイジング基本テンプレートを作成します。
  • テキストレイヤーを追加し、パラメーターを使用してそれらを可変にします。
  • テンプレート URL を作成し、web ブラウザーを使用して画像を動的に操作します。
NOTE
この章の URL はすべて、説明のみを目的としており、ライブリンクではありません。

基本テンプレートの概要

基本テンプレート（または単に「テンプレート」）の定義は、URL アドレス指定可能なレイヤー化された画像です。最終結果は画像ですが、URL で変更することができます。写真、テキスト、グラフィックなど、Dynamic Media Classic の P-TIFF アセットの任意の組み合わせで構成できます。

ワークフローや機能が似ていることから、テンプレートは Photoshop PSD ファイルに最も似ています。

  • どちらも、積み重ねられたアセテートのシートのようなレイヤーで構成されています。部分的に透明な画像を合成し、レイヤーの透明な領域から下のレイヤーを見ることができます。
  • レイヤーを移動および回転してコンテンツの位置を変更したり、不透明度や描画モードを変更してコンテンツを部分的に透明にしたりできます。
  • テキストベースのレイヤーを作成できます。Image Server は Photoshop や Illustrator と同じテキストエンジンを使用しているので、画質が非常に高くなります。
  • シンプルなレイヤースタイルを各レイヤーに適用して、ドロップシャドウや光彩などの特殊効果を作成できます。

ただし、Photoshop PSD とは異なり、レイヤーは完全に動的であり、Image Server 上の URL を使用して制御できます。

  • すべてのテンプレートプロパティに変数を追加できるので、その場で簡単に構成を変更できます。
  • 「パラメーター」と呼ばれる変数を使用すると、変更するテンプレートの部分のみを公開できます。

Photoshop で行うようにすべてのレイヤーを 1 つのファイルに入れ、それらを表示および非表示にするのではなく（ただし、必要に応じてそれを行うこともできます）、変化するレイヤーごとにプレースホルダーを追加するだけで済みます。

プレースホルダーを使用すると、レイヤーのコンテンツを別の公開済みアセットと動的に入れ替えることができ、置き換えたレイヤーと同じプロパティ（サイズや回転など）が自動的に取得されます。

基本テンプレートは通常、Photoshop で設計されますが、URL を介してデプロイされるので、テンプレートプロジェクトには設計と技術の両方のスキルが必要です。通常、クリエイティブテンプレートの作業を行うのは Photoshop デザイナーであり、テンプレートを実装するのは web 開発者であると想定しています。クリエイティブチームと開発チームは、テンプレートを正常に作成するために緊密に連携する必要があります。

テンプレートプロジェクトは、アプリケーションのビジネスルールやニーズに応じて、比較的単純になったり、非常に複雑になったりすることがあります。基本テンプレートは Image Server から呼び出されますが、Dynamic Media Classic 環境は柔軟なので、他のテンプレート内にテンプレートをネストすることもでき、一般的な名前の変数でリンクできる非常に複雑な画像を作成できます。

基本テンプレートの作成

基本テンプレートを使用する場合は、通常、次の図に示すワークフローステップに従います。ダイナミックテキストレイヤーを使用している場合、点線でマークされたステップはオプションで、以下の手順に「テキストワークフロー」と示されています。テキストを使用しない場合は、メインパスにのみ従います。

画像

基本テンプレートワークフロー。

  1. アセットをデザインし作成します。ほとんどのユーザーは、これを Adobe Photoshop で行います。必要なサイズでアセットをデザインします。サムネールページ用の 200 ピクセルの画像の場合は、200 ピクセルでデザインします。ズームオンが必要な場合は、約 2,000 ピクセルのサイズでデザインします。Photoshop（またはビットマップとして保存された Illustrator）を使用してアセットを作成し、Dynamic Media Classic を使用してパーツを組み立て、レイヤーを管理し、変数を追加します。
  2. グラフィックアセットをデザインしたら、それらを Dynamic Media Classic にアップロードします。PSD から個々のアセットをアップロードするのではなく、レイヤー化された PSD ファイル全体をアップロードし、アップロード時に「レイヤーを維持」オプションを使用して、Dynamic Media Classic でレイヤーごとにファイルを作成することをお勧めします（詳しくは、以下を参照してください）。テキストワークフロー：ダイナミックテキストを作成する場合は、フォントもアップロードします。ダイナミックテキストは可変で、URL を介して制御されます。テキストが静的であるか、変化しない少数の短いフレーズのみで構成される場合（例えば、X を数値変数とする「X％オフ」ではなく「新着」や「セール」とだけ書かれたタグ）、Photoshop でテキストを事前にレンダリングし、ラスタライズされたレイヤーとして画像としてアップロードすることをお勧めします。この方が簡単で、テキストのスタイルを好きなように設定できます。
  3. 作成メニューのテンプレートの基本エディターを使用して Dynamic Media Classic でテンプレートを作成し、画像レイヤーを追加します。テキストワークフロー：同じエディターでテキストレイヤーを作成します。このステップは、Dynamic Media Classic でテンプレートを手動で作成する場合に必要です。デザインに合ったカンバスサイズを選択し、画像をキャンバスにドラッグ＆ドロップし、レイヤーのプロパティ（サイズ、回転、不透明度など）を設定します。テンプレートにすべての可能なレイヤーを配置するわけではありません。画像レイヤーごとに 1 つのプレースホルダーのみを配置します。テキストワークフロー：テキストレイヤーは、Photoshop でのテキストレイヤーの作成と同様に、テキストツールを使用して作成します。フォントを選択し、Photoshop の文字ツールと同じオプションを使用してスタイルを設定できます。 もう 1 つのワークフローは、PSD をアップロードし、Dynamic Media Classic に「無料」テンプレートを生成させて、テキストレイヤーを再作成さえできるようにすることです。これについては後で詳しく説明します。
  4. レイヤーを作成したら、URL を通じて制御したいレイヤーの任意のプロパティに、レイヤーのソース（画像自体）などのパラメーター（変数）を追加します。テキストワークフロー：テキストレイヤーにパラメーターを追加して、テキストの内容、レイヤー自体のサイズと位置およびフォントカラー、フォントサイズ、横置きなどのすべての書式設定オプションを制御することもできます。
  5. テンプレートのサイズに合う画像プリセットを作成します。この場合、テンプレートは常に 1:1 のサイズで呼び出されるようにし、また、テンプレートに合わせてサイズ変更される大きな画像レイヤーにシャープを追加することをお勧めします。ズームするテンプレートを作成する場合、この手順は不要です。
  6. Dynamic Media Classic プレビューから URL を公開、コピーし、ブラウザーでテストします。

テンプレートアセットの準備と Dynamic Media Classic へのアップロード

テンプレートアセットを Dynamic Media Classic にアップロードする前に、いくつかの準備手順を完了する必要があります。

PSD のアップロード用の準備

Photoshop ファイルを Dynamic Media Classic にアップロードする前に、Photoshop 内のレイヤーを簡素化して、操作を容易にし、Image Server との互換性を最大限に高めます。PSD ファイルは、多くの場合、Dynamic Media Classic で認識されない多くの要素で構成され、最終的に、管理が困難な小さな要素が多数生じる場合もあります。後でオリジナルを編集する必要がある場合は、必ず、メイン PSD のバックアップを保存しておいてください。簡素化したコピーをアップロードします。メインはアップロードしません。

画像

  1. 1 つのレイヤーにオン／オフを切り替える必要のある関連レイヤーを結合／フラット化することで、レイヤー構造を簡素化します。例えば、「新着」というラベルと青いバナーは 1 つのレイヤーに結合されているため、1 回のクリックで表示／非表示を切り替えることができます。
    画像

  2. レイヤータイプやレイヤー効果によっては、Dynamic Media Classic や Image Server でサポートされていないものがあり、アップロード前にラスタライズする必要があります。そうしないと、エフェクトが無視されたり、レイヤーが破棄されたりする場合があります。レイヤーのラスタライズとは、レイヤーを編集可能な状態から編集不可能な状態に変換することです。レイヤー効果やテキストレイヤーをラスタライズするには、空のレイヤーを作成し、両方を選択して、レイヤー／レイヤーを結合 ​または Ctrl + E／cmd + E キーを使用して結合します。

    • Dynamic Media Classic では、レイヤーのグループ化やリンクはできません。グループやリンクセット内のすべてのレイヤーは、グループ化／リンクされなくなった別のレイヤーに変換されます。
    • レイヤーマスクは、アップロード時に透明に変換されます。
    • 調整レイヤーはサポートされていないので、破棄されます。
    • 塗りつぶしレイヤー（ベタ塗りレイヤーなど）はラスタライズされます。
    • スマートオブジェクトレイヤーやベクターレイヤーは、アップロード時に通常の画像にラスタライズされ、スマートフィルターが適用されてラスタライズされます。
    • テキストレイヤーも、「テキストを抽出」オプションを使用しない限り、ラスタライズされます。詳しくは、以下を参照してください。
    • ほとんどのレイヤー効果は無視され、いくつかのブレンドモードのみがサポートされています。不明の場合は、Dynamic Media Classic で単純な効果（内側シャドウまたはドロップシャドウ、内側または外側の光彩など）を追加するか、空のレイヤーを使用して Photoshop で効果を結合およびラスタライズします。

フォントの操作

また、ダイナミックテキストを生成する必要がある場合は、フォントをアップロードして公開します。Dynamic Media Classic に含まれるフォントは Arial のみです。

フォントを web 上で使用するためのライセンスを取得するのは、各企業の責任です。フォントをコンピューターにインストールしただけでは、web 上で商業的に使用する権利が与えられるわけではありません。許可なく使用すると、企業はフォントパブリッシャーから法的措置を受ける場合があります。また、ライセンス条件も様々で、例えば、印刷用と画面表示用で別々のライセンスが必要になる場合もあります。

Dynamic Media Classic では、標準 OpenType（OTF）、TrueType（TTF）および Type 1 Postscript フォントをサポートしています。Mac 専用のスーツケースフォント、タイプコレクションファイル、Windows システムフォントおよび独自のマシンフォント（彫刻機や刺繍機で使用されるフォントなど）はすべてサポートされていませんので、Dynamic Media Classic や Image Server で使用する場合は、標準のフォント形式に変換するか、類似のフォントに置き換える必要があります。

他のアセットと同様に、Dynamic Media Classic にフォントをアップロードしたら、Image Server にも公開する必要があります。非常に一般的なテンプレートエラーは、フォントの公開を忘れることで、これにより画像エラーが発生します。Image Server では、別のフォントを代わりに使用することはありません。また、アップロード時に「テキストを抽出」オプションを使用する場合は、それらのフォントを使用する PSD をアップロードする前に、フォントファイルをアップロードする必要があります。テキストを抽出 ​機能は、テキストを編集可能なテキストレイヤーとして再作成し、Dynamic Media Classic テンプレート内に配置しようとします。これについては、次のトピック「PSD オプション」で説明します。

フォントは複数の内部名を持ち、外部ファイル名と異なることが多いので注意が必要です。Dynamic Media Classic のそのアセットの詳細ページで、すべての異なる名前を確認できます。Dynamic Media Classic の「メタデータ」タブにリストされているフォント Adobe Caslon Pro Semibold の名前は次のとおりです。

画像

Dynamic Media Classic のフォントの詳細ページにある「メタデータ」タブ。

Dynamic Media Classic は、このフォントのファイル名（ACaslonPro-Semibold）をアセット ID として使用しますが、それはテンプレートで使用される名前ではありません。テンプレートでは、下部にリストされているリッチテキスト形式（RTF）名を使用します。RTF は、Image Server のテキストエンジンのネイティブ「言語」です。

URL を介してフォントを変更する必要がある場合は、（アセット ID ではなく）フォントの RTF 名を呼び出す必要があります。そうしないと、エラーが発生します。この場合、このフォントの適切な名前は「Adobe Caslon Pro」になります。フォントと RTF については、以下の「RTF とテキストパラメーター」のトピックで詳しく説明します。

Windows システムや Mac システムで見られる最も一般的なフォントファイル形式は、OpenType と TrueType です。OpenType の拡張子は .OTF、TrueType の拡張子は .TTF です。どちらの形式も Dynamic Media Classic で同様に機能します。

PSD をアップロードする際のオプションの選択

テンプレートを作成するために Photoshop ファイル（PSD）をアップロードする必要はありません。テンプレートは、Dynamic Media Classic の任意の画像アセットから作成できます。ただし、PSD をアップロードすると、通常はこれらのアセットがレイヤー化された PSD に既に含まれているため、オーサリングが容易になります。さらに、Dynamic Media Classic は、レイヤー化された PSD をアップロードする際に、自動的にテンプレートを生成します。

  • レイヤーを維持。 ​これは最も重要なオプションです。これにより、Dynamic Media Classic は Photoshop レイヤーごとに 1 つの画像アセットを作成します。これをオフにすると、他のオプションはすべて無効になり、PSD は 1 つの画像にフラット化されます。
  • テンプレートを****作成。 ​このオプションは、生成された様々なレイヤーを取り込み、それらを再び組み合わせて自動的にテンプレートを作成します。自動生成テンプレートを使用することの欠点は、Dynamic Media Classic ではすべてのレイヤーが 1 つのファイルに配置されますが、レイヤーごとに必要なプレースホルダーは 1 つだけであることです。余分なレイヤーを削除するのは簡単ですが、レイヤー数が多い場合は、作り直した方が早いです。新しいテンプレートの名前は必ず変更してください。表示されない場合は、次に同じ PSD を再度アップロードするときに上書きされます。
  • テキストを抽出します。 ​このオプションでは、アップロードされたフォントを使用して、PSD 内のテキストレイヤーがテンプレート内のテキストレイヤーとして再作成されます。この手順が必要なのは、テキストが Photoshop のパス上にあり、そのパスをテンプレートで維持する場合です。この機能は、抽出されたテキストがアップロード時に生成されたテンプレートによってのみ作成されるので、「テンプレートを作成」オプションを使用する必要があります。
  • レイヤーを背景サイズに拡大。 ​この設定により、各レイヤーが PSD カンバス全体と同じサイズになります。この機能は、常に固定された位置にあるレイヤーに非常に有効です。画像を同じレイヤーに入れ替える場合は、画像の再配置が必要になる場合があります。
  • レイヤーの名前。 ​このオプションは、レイヤーごとに生成された各アセットの命名方法を Dynamic Media Classic に指示します。「Photoshop とレイヤー****名」または「Photoshop と​ レイヤー****番号」のいずれかをお勧めします。どちらのオプションも、名前の最初の部分に PSD 名を使用し、最後に画層名または番号を追加します。例えば、「shirt.psd」という名前の PSD があり、「front」、「sleeves」、「collar」という名前のレイヤーがある場合、「Photoshop と ​レイヤー​ 名」オプションを選択した場合、Dynamic Media Classic はアセット ID「shirt_front」、「shirt_sleeves」および「shirt_collar」を生成します。これらのオプションのいずれかを使用すると、Dynamic Media Classic で名前が確実に一意になります。

画像レイヤーを使用したテンプレートの作成

Dynamic Media Classic ではレイヤー PSD からテンプレートを自動的に作成できるとは言え、手動で作成する方法も理解しておく必要があります。前述のように、Dynamic Media Classic で作成したテンプレートを使用しない場合もあります。

テンプレートの基本 UI

まず、編集インターフェイスについて理解します。

左側の中央には、最終的なテンプレートのプレビューを表示する作業領域があります。右側には、レイヤーパネルとレイヤープロパティパネルがあります。これらの領域で、ほとんどの作業を行います。

画像

作成 : テンプレートの基本ページ。

  • プレビュー／作業領域。 ​これがメインウィンドウです。ここでは、マウスを使用してレイヤーの移動、サイズ変更および回転を行えます。レイヤーのアウトラインは破線で表示されます。
  • レイヤー。 ​これは、Photoshop のレイヤーパネルに似ています。テンプレートにレイヤーを追加すると、ここに表示されます。レイヤーは上から下に積み重ねられます。レイヤーパネルの上のレイヤーは、リスト内で下にある他のレイヤーの上に表示されます。
  • レイヤーのプロパティ。 ​ここでは、数値コントロールを使用して、レイヤーのすべてのプロパティを調整できます。まず、レイヤーを選択し、次にそのプロパティを調整します。
  • 合成 URL。 UI の下部には、合成 URL 領域が表示されます。この節では説明しませんが、ここには、一連の Image Server URL 修飾子として分解されたテンプレートが表示されます。この領域は編集可能です。Image Server コマンドを熟知している場合は、ここでテンプレートを手動で編集できます。しかし、それを禁止することもできます。Photoshop と同様に、レイヤーの番号は 0 から始まります。カンバスはレイヤー 0 で、最初に自分で追加するレイヤーはレイヤー 1 です。描画モードは、レイヤーのピクセルとその下のピクセルとのブレンド方法を決定します。描画モードを使用して、様々な特殊効果を作成できます。

テンプレートの基本エディターの使用

基本テンプレートを開始するためのワークフローステップを以下に示します。

  1. Dynamic Media Classic で、作成／テンプレートの基本 ​に移動します。何も選択していない場合も、テンプレートの最初のレイヤーになる画像を選択して開始する場合もあります。

  2. サイズを選択し、「OK」を押します。このサイズは、Photoshop で設計したサイズと一致する必要があります。テンプレートエディターが読み込まれます。

  3. 手順 1 で画像を選択していない場合は、左側のアセットパネルで画像を検索するか参照して、作業領域にドラッグします。

    • 画像は、カンバスのサイズに合わせて自動的にサイズ変更されます。高解像度の画像をスワップアウトする場合、通常は大きな（2000 px）P-TIFF 画像を 1 枚持ってきて、それをプレースホルダーとして使用します。
    • これはテンプレートの一番下のレイヤーにする必要がありますが、後でレイヤーを並べ替えることもできます。

  4. 作業領域で直接またはレイヤーのプロパティパネルで設定を調整して、レイヤーのサイズを変更または再配置します。

  5. 必要に応じて、追加の画像レイヤーをドラッグします。必要に応じて、レイヤー効果も追加します。後述の​ レイヤー効果の追加 ​を参照してください。

  6. 「保存」をクリックして、場所を選択し、テンプレートに名前を付けます。プレビューは可能ですが、この時点では、テンプレートは Photoshop の画像をプラット化したようなものなので、まだ変更できません。

レイヤー効果の追加

Image Server では、プログラムによるレイヤー効果、つまりレイヤーコンテンツの外観を変更できる特殊効果をいくつかサポートしています。これらは、Photoshop のレイヤー効果と同じように機能します。これらはレイヤーに付加されますが、レイヤーとは独立に制御されます。レイヤー自体に恒久的な変更を加えることなく、これらを調整または削除できます。

  • ドロップシャドウ。X および Y ピクセルオフセットで配置された、レイヤーの境界の外側にシャドウを適用します。
  • シャドウ (内側)。X および Y ピクセルオフセットで配置された、レイヤーの境界内にシャドウを適用します。
  • 光彩 (外側)。レイヤーのすべてのエッジの周りに光彩効果を均等に適用します。
  • 光彩 (内側)。レイヤーのすべてのエッジの内側に光彩効果を均等に適用します。

画像

ドロップシャドウが適用されたレイヤーと適用されていないレイヤー

エフェクトを追加するには、「エフェクトを追加」をクリックし、メニューからエフェクトを選択します。通常のレイヤーと同様に、レイヤーパネルでエフェクトを選択し、レイヤーのプロパティパネルを使用して設定を調整できます。

シャドウ効果は、レイヤーから水平または垂直にオフセットされます。光彩効果は、すべての方向に均等に適用されます。内側のエフェクトはレイヤーの不透明部分に作用するのに対して、外側のエフェクトは透明部分にのみ影響します。

詳しくは、レイヤー効果の追加を参照してください。

パラメーターの追加

レイヤーを組み合わせて保存するだけの場合、最終的な結果は統合された Photoshop 画像と同じです。テンプレートには、各レイヤーのプロパティにパラメーターを追加し、URL を通じて動的に変更できる機能があります。

Dynamic Media Classic の用語では、パラメーターは、URL を介して操作できるようにテンプレートプロパティにリンクできる変数です。レイヤーにパラメーターを追加すると、Dynamic Media Classic は、パラメーター名の前にドル記号（$）を付けて URL 内にそのプロパティを表示します。例えば、レイヤーのサイズを変更する「size」というパラメーターを作成すると、Dynamic Media Classic はパラメーターの名前を「$size」に変更します。

プロパティにパラメーターを追加しない場合、そのプロパティは Dynamic Media Classic データベースで非表示のままとなり、URL には表示されません。

画像

パラメーターがない場合、特にダイナミックテキストを使用している場合、URL は通常、とても長くなります。テキストを使用すると、各 URL に余分な文字が多数追加されます。

最後に、初期のパラメーターセットがテンプレート内のプロパティのデフォルト値になります。テンプレートを作成し、パラメーターを追加したあと、パラメーターを指定せずに URL を呼び出した場合、Image Server はテンプレートに保存したすべてのデフォルトを使用して画像を作成します。パラメーターは、プロパティを変更する場合にのみ必要です。プロパティを変更する必要がない場合は、パラメーターを設定する必要はありません。

パラメーターの作成

次に、パラメーターを作成するワークフローを示します。

  1. パラメーターを作成するレイヤーの名前の横にある「パラメーター」ボタンをクリックします。「パラメーター」画面が開きます。 レイヤー上の各プロパティとその値が一覧表示されます。

  2. パラメーターにする各プロパティ名の横の「オン」オプションを選択します。デフォルトのパラメーター名が表示されます。プロパティに追加できるのは、デフォルトの状態から変更されたパラメーターのみです。

    • 例えば、レイヤーを追加し、デフォルトの XY 位置である 0,0 のままにした場合、Dynamic Media Classicは​ 位置 ​プロパティを公開しません。これを修正するには、レイヤーを少なくとも 1 ピクセル移動します。Dynamic Media Classic は、位置 ​を、パラメーター化できるプロパティとして公開するようになりました。
    • 表示／非表示プロパティ（レイヤーのオン／オフを切り替える）にパラメーターを追加するには、表示 ​または​ レイヤーを非表示 ​アイコンをクリックして、レイヤをオフに切り替えます（必要に応じて、後でオンに戻すことができます）。Dynamic Media Classic では、パラメーター化できる​ 非表示 ​プロパティを公開するようになりました。

  3. デフォルトのパラメーター名を、URL で識別しやすい名前に変更します。例えば、画像の上のバナーレイヤーを変更するパラメーターを追加する場合、「layer_2_src」のデフォルト名を「banner」に変更します。

  4. 「閉じる」を押して、パラメーター画面を終了します。

  5. 他のレイヤーに対してこの手順を繰り返すには、「パラメーター」ボタンをクリックし、パラメーターの追加と名前変更を行います。

  6. 完了したら、変更内容を保存します。

TIP
パラメーターの名前を意味のある名前に変更し、名前を標準化する命名規則を作成します。必ず、設計チームと開発チームの双方で命名規則にあらかじめ合意しておいてください。
プロパティが表示されないので、パラメーターを追加できない場合は、移動、サイズ変更、非表示などを行って、レイヤーのプロパティをデフォルトの状態から変更するだけです。そのプロパティが公開されたことがわかります。

テンプレートパラメーターについて詳しくは、こちらを参照してください。

テキストレイヤーを使用したテンプレートの作成

次に、テキストレイヤーを含んだ基本テンプレートを作成する方法を学びます。

ダイナミックテキストについて

これで、画像レイヤーを使用して基本テンプレートを作成する方法がわかりました。多くのアプリケーションでは、これが必要なすべてです。前の演習で示したように、単純なテキスト（「セール」や「新着」など）を持つレイヤーは、テキストを変更する必要がないので、ラスタライズして画像として扱うことができます。

ただし、次の操作が必要な場合はどうすればよいでしょうか。

  • 例えば、25％が変数値になっている「25％オフ」というラベルを追加します。
  • 製品名を含んだテキストラベルを画像の上に追加します。
  • テンプレートが表示される国に応じて、レイヤーを異なる言語にローカライズします。

このような場合は、テキストや書式設定を制御するためのパラメーターを含んだダイナミックテキストレイヤーを追加するとよいでしょう。

テキストを作成するには、いくつかのフォントをアップロードする必要があります。アップロードしない場合、Dynamic Media Classic はデフォルトで Arial を使用します。フォントも Image Server に公開する必要があります。公開しないと、そのフォントを使用するテキストのレンダリングが試行されるたびにエラーが発生します。

RTF およびテキストパラメーター

テンプレートの基本ツールを使用してテキストに変数を追加するには、テキストのレンダリング方法を理解しておく必要があります。Image Server では、Adobe Text Engine（Photoshop や Illustrator で使用されているのと同じエンジン）を使用してテキストを生成し、それを最終的な画像のレイヤーとして合成します。Image Server は、このエンジンと通信するために、リッチテキスト形式（RTF）を使用します。

RTF は、Microsoft がドキュメントの書式設定を規定するために開発したファイル形式仕様です。これは、ほとんどのワードプロセッシングとメールソフトウェアで使用される標準のマークアップ言語です。URL に「&text=\b1 Hello」と書き込むと、「\b1」はテキストを太字にする RTF コマンドなので、Image Server は「Hello」という単語を太字にした画像を生成します。

好ましいのは、Dynamic Media Classic が RTF を自動的に生成することです。テンプレートにテキストを入力して書式設定を追加するたびに、Dynamic Media Classic が RTF コードをテンプレートに自動的に書き込みます。ここでこれについて触れている理由は、パラメーターを RTF 自体に直接追加しているからです。そのため、このことに少し慣れておくことが重要です。

テキストレイヤーの作成

Dynamic Media Classic のテンプレート内にテキストレイヤーを作成するには、次の 2 とおりの方法があります。

  1. Dynamic Media Classic のテキストツール。以下では、この方法について説明します。テンプレートの基本エディターには、テキストボックスの作成、テキストの入力およびテキストの書式設定を行えるツールが用意されています。Dynamic Media Classic は、必要に応じて RTF を生成して、別のレイヤーに配置します。
  2. 「テキストを抽出」（アップロード時）。もう 1 つの方法は、Photoshop でテキストレイヤーを作成し、（画像レイヤーとしてラスタライズするのではなく）通常のテキストレイヤーとして PSD に保存することです。 その後、ファイルを Dynamic Media Classic にアップロードし、テキストを抽出 ​オプションを使用します。Dynamic Media Classic は、RTF コマンドを使用して、各 Photoshop テキストレイヤーを画像サービングテキストレイヤーに変換します。 この方法を使用する場合は、最初にフォントを Dynamic Media Classic にアップロードしてください。使用しない場合、Dynamic Media Classic はアップロード時にデフォルトのフォントを置き換え、正しいフォントを簡単に置き換えることはできません。

テキストエディター

テキストを入力するには、テキストエディターを使用します。 テキストエディターは、Photoshop や Illustrator と同様の書式設定コントロールを使用して、テキストの入力や書式設定を行うことができる WYSIWYG インターフェイスです。

画像

基本テンプレートのテキストエディター。

ほとんどの作業は「プレビュー」タブで行います。このタブでは、テキストを入力して、テンプレート内で表示されているとおりに表示できます。また、「ソース」タブもあり、必要に応じて RTF を手動で編集する際に使用します。

一般的なワークフローでは、「プレビュー」タブを使用してテキストを入力します。

次に、テキストを選択し、上部のコントロールを使用して、フォントカラー、フォントサイズ、位置合わせなどの書式を選択します。テキストのスタイルを設定したら、「適用」をクリックして、作業領域のプレビューで更新を確認します。確認したら、テキストエディターを閉じて、基本テンプレートのメインウィンドウに戻ります。

テキストエディターの使用

基本テンプレートのビルドページ内にテキストを追加するワークフローの手順を以下に示します。

  1. ビルドページの上部にある「テキスト」ツールボタンをクリックします。

  2. テキストを表示するテキストボックスをドラッグします。テキストエディターウィンドウがモーダルウィンドウで開きます。背景にテンプレートが表示されますが、テキストの編集が完了するまでは編集できません。

  3. テンプレートが最初に読み込まれたときに表示するサンプルテキストを入力します。例えば、パーソナライズされたメール画像用のテキストボックスを作成して、。 「こんにちは、名前。今すぐ保存してください！」というテキストが表示される場合があります。後でテキストパラメーターを追加して、名前を URL で送信する値に置き換えます。「適用」をクリックするまで、テキストはウィンドウの下のテンプレートに表示されません。

  4. テキストを書式設定するには、マウスでドラッグしてテキストを選択し、UI で書式設定コントロールを選択します。

    • 書式設定オプションは多数あります。最も一般的なものは、フォント（書体）、フォントサイズ、フォントカラー、左／中央／右揃えです。
    • 最初に必ずテキストを選択します。選択されていないと、書式設定を適用できません。
    • 別のフォントを選択する場合は、必ずテキストを選択してからフォントメニューを開いてください。Dynamic Media Classic にアップロードされたすべてのフォントのリストがエディターに表示されます。フォントがコンピューターにもインストールされている場合は、黒で表示されます。コンピューターにインストールされていない場合は、赤で表示されます。ただし、「適用」をクリックすると、プレビューウィンドウでレンダリングされます。Dynamic Media Classic にフォントをアップロードするだけで、Dynamic Media Classic を使用しているすべてのユーザーがフォントを使用できるようになります。公開すると、Image Server はこれらのフォントを使用してテキストを生成します。作成したテキストは画像の一部であるため、ユーザーはテキストを表示するためにフォントをインストールする必要はありません。
    • Photoshop や Illustrator とは異なり、Image Server はテキストボックス内でテキストを垂直方向に揃えることができます。デフォルトは上揃えです。これを変更するには、テキストを選択し、垂直方向揃え ​メニューから「中央」または「下」を選択します。
    • テキストがボックスに対して大きすぎる（またはテキストボックスが小さすぎる）場合、テキストの全部または一部が切り取られて非表示になります。フォントサイズを小さくするか、ボックスを大きくします。

  5. 「適用」をクリックして、変更が作業領域ウィンドウに反映されることを確認します。編集内容が失われないようにするには、「適用」をクリックする必要があります。

  6. 完了したら、「閉じる」をクリックします。編集モードに戻る場合は、テキストレイヤーをダブルクリックしてテキストエディターを再度開きます。

フォントがシステム上にローカルにインストールされている場合、テキストエディターではフォントの大きさが正確にプレビューされます。

テキストレイヤーへのパラメータの追加について

レイヤーパラメーターの場合と同様の手順で、テキストパラメーターを追加します。テキストレイヤーも、サイズや位置などのレイヤーパラメーターを取得できますが、追加のパラメーターを取得して、RTF のあらゆる側面を制御できます。

レイヤーパラメーターとは異なり、プロパティ全体にパラメータを追加するのではなく、変更する値のみを選択してその値にパラメーターを追加します。

画像

サンプル RTF：

画像

RTF を調べる際は、変更する設定がそれぞれどこにあるかを把握しておく必要があります。上記の RTF には、意味を持つ部分が含まれている可能性があり、書式設定の元の場所を確認できます。

「Chocolate Mint Sandal」というフレーズが表示されており、これがテキストそのものです。

  • 「Poor Richard」という名前のフォントへの参照があります。ここでフォントが選択されています。
  • 「\red56\green53\blue4」という RGB 値を確認できます。これはテキストカラーです。
  • 20 のフォントサイズですが、20 の数字は表示されません。 ただし、\fs40 というコマンドは表示されます。奇妙な理由により、RTF はフォントをハーフポイントとして測定します。 したがって、\fs40 はフォントサイズです。

パラメータを作成するのに十分な情報がありますが、画像サービングのドキュメントには、すべての RTF コマンドの完全な参照が記載されています。 「画像サービングドキュメント」を参照してください。

テキストレイヤーへのパラメーターの追加

次に、テキストレイヤーにパラメーターを追加する手順を示します。

  1. パラメーターを作成するテキストレイヤーの名前の横にある「パラメーター」ボタン (「P」) をクリックします。 「パラメーター」画面が開きます。 「共通 」タブには、レイヤーの各プロパティとその値が表示されます。 ここで、標準のレイヤーパラメーターを追加できます。
  2. 「テキスト」タブをクリックします。 ここでは、上部に RTF が表示されます。追加したパラメーターはその下に表示されます。
  3. パラメーターを追加するには、まず変更する値をハイライト表示し、「パラメーターを追加」ボタンをクリックします。 必ずコマンドの値だけを選択し、コマンド自体は選択しないでください。 例えば、上記のサンプル RTF でフォント名のパラメーターを設定する場合は、「Poor Richard」をハイライト表示し、それにパラメーターを追加するだけで、「\f0」を追加するわけではありません。 「パラメーターを追加」をクリックすると、下のリストに表示され、RTF では選択されているパラメーター値が赤で表示されます。 パラメーターを削除する必要がある場合は、「 オン」の横にあるチェックボックスをクリックし、そのパラメーターをオフにします。
  4. クリックして、パラメーターの名前をわかりやすい名前に変更します。
  5. 完了すると、パラメーターが存在することを意味する緑色で RTF がハイライト表示され、パラメーターの名前と値が次のように表示されます。
  6. 「閉じる」をクリックして「パラメーター」画面を終了します。次に、「保存」をクリックしてテンプレートを保存します。 編集が終了したら、「閉じる」をクリックして、「基本テンプレート」ページを終了します。
  7. 「プレビュー」をクリックして、Dynamic Media Classicでテンプレートをテストします。 テキストパラメーターをテストするには、プレビューウィンドウに新しいテキストまたは新しい値を入力します。 フォントを変更するには、フォントの正確な RTF 名を入力する必要があります。
TIP
テキストのカラーにパラメーターを追加するには、赤、緑、青のパラメーターを別途追加します。 例えば、RTF が \red56\green53\blue46 の場合は、56、53、46 の値のそれぞれに赤、緑、青のパラメーターを追加します。 URL 内で、3 つすべて（&$red=56&$green=53&$blue=46）を呼び出して、カラーを変更します。

詳細情報：動的テキストのパラメーターの作成。

テンプレート URL の公開と作成

画像プリセットの作成

テンプレートのプリセットの作成は必須の手順ではありません。 テンプレートは常に 1 対 1 のサイズで呼び出すことと、テンプレートに合わせてサイズ変更される大きな画像レイヤーにシャープニングを追加することをお勧めします。 プリセットを指定せずに画像を呼び出した場合、Image Server は画像のサイズを任意にデフォルトサイズ（約 400 ピクセル）に変更し、デフォルトのシャープニングを適用しない場合があります。

テンプレートの画像プリセットに関する特別な事項はありません。 同じサイズの静的画像のプリセットが既に存在する場合は、代わりにそのプリセットを使用できます。

パブリッシュ

Image Server にプッシュされた変更を確認するには、公開を実行する必要があります。 公開する必要があるもの（様々な画像アセットレイヤー、動的テキストのフォント、テンプレート自体）に留意してください。画像セットやスピンセットなどの他の Dynamic Media Classic リッチメディアアセットと同様に、基本テンプレートは人工的な構成物です。これは、一連の Image Server コマンドを使用して画像とフォントを参照する、データベース内の行項目です。そのため、テンプレートを公開する際には、Image Server 上のデータを更新するだけです。

詳しくは、テンプレートの公開を参照してください。

テンプレート URL の構成

基本テンプレートの必須の URL 構文は、前述の標準の画像呼び出しと同じです。通常、テンプレートには、値を持つパラメーターなど、より多くの修飾子（アンパサンド（&）で区切られたコマンド）が含まれています。ただし、主な違いは、静的な画像を呼び出すのではなく、メイン画像としてテンプレートを呼び出すことです。

画像

プリセット名の両側にドル記号（$）が付いた画像プリセットとは異なり、パラメーターには、先頭に 1 つのドル記号が付きます。このドル記号を付けることが重要です。

正しい構文：

$text=46-inch LCD HDTV

誤った構文：

$text$=46-inch LCD HDTV

$text=46-inch LCD HDTV$

text=46-inch LCD HDTV

前述のように、パラメーターはテンプレートを変更するために使用されます。パラメーターを指定せずにテンプレートを呼び出すと、テンプレートの基本オーサリングツールで設計されたデフォルト設定に戻ります。プロパティを変更する必要がない場合は、パラメーターを設定する必要はありません。

画像
パラメーターを設定しないテンプレート（上）とパラメーターを設定するテンプレート（下）の例。

recommendation-more-help
b56d7fc8-5dab-486f-a07d-09696ff7d067