Dynamic Media Classicの用語では、テンプレートは、テンプレートが公開された後に、URLを使用して動的に変更できるドキュメントです。 Dynamic Media Classicは、Image Serverから呼び出され、画像とレンダリングされたテキストで構成される、基本的なテンプレートです。
テンプレートの最も強力な側面の1つは、直接統合ポイントを持ち、それらをデータベースに結び付けることです。 したがって、画像を提供してサイズを変更できるだけでなく、データベースに対して新しい商品や販売商品を検索し、それを画像上にオーバーレイとして表示することができます。 項目の説明を求め、選択およびレイアウトのフォントでラベルとして表示することができます。 可能性は無限です。
基本テンプレートは、単純なものから複雑なものまで、様々な方法で実装できます。 次に例を示します。
Dynamic Media Classicは、これらのテンプレートベースのアプリケーションの視覚的な部分のみを提供することを理解することが重要です。 Dynamic Media Classicの企業またはその統合パートナーは、アプリケーションを作成するために、ビジネスルール、データベース、開発スキルを提供する必要があります。 「組み込み」テンプレートアプリケーションはありません。設計者はDynamic Media Classicでテンプレートを設定し、開発者はURL呼び出しを使用してテンプレート内の変数を変更します。
このチュートリアルの最後までに、次の方法を理解できます。
この章のURLはすべて例示用です。これらはライブリンクではありません。
基本テンプレートの定義(つまり、単に「テンプレート」)は、URLアドレス可能なレイヤー画像です。 最終結果は画像ですが、URLで変更できる画像です。 Dynamic Media ClassicのP-TIFFアセットの組み合わせは、写真、テキスト、グラフィックで構成することができます。
テンプレートは、Photoshop PSDファイルに最も似ています。同様のワークフローと機能を持ちます。
ただし、Photoshop PSDとは異なり、レイヤーは完全に動的に、Image Server上のURLを使用して制御できます。
Photoshopと同様に、すべてのレイヤーを1つのファイルに配置して表示/非表示にするのではなく、変更する各レイヤーにプレースホルダーを追加するだけで済みます(ただし、必要に応じて追加することもできます)。
プレースホルダーを使用すると、レイヤーのコンテンツを、パブリッシュ済みの別のアセットと動的に入れ替えることができ、置き換えられたレイヤーと同じプロパティ(サイズや回転など)が自動的に取得されます。
基本テンプレートは通常、Photoshopで設計され、URLを使用してデプロイされるので、テンプレートプロジェクトにはデザインと技術の両方のスキルが混在している必要があります。 一般に、クリエイティブテンプレートの作業をおこなう人はPhotoshopのデザイナーで、テンプレートを実装する人はWeb開発者であると仮定します。 クリエイティブチームと開発チームは、テンプレートを正常に作成するために緊密に連携する必要があります。
テンプレートプロジェクトは、アプリケーションのビジネスルールやニーズに応じて、比較的シンプルな場合も非常に複雑な場合もあります。 基本テンプレートはImage Serverから呼び出されますが、Dynamic Media Classic環境は柔軟性があるので、他のテンプレート内にテンプレートをネストすることもでき、一般的な名前の変数でリンクできる、かなり複雑な画像を作成できます。
基本テンプレートを使用する場合は、通常、次の図に示すワークフロー手順に従います。 ダイナミックテキストレイヤーを使用する場合、点線が付いたステップはオプションで、以下の手順で「テキストワークフロー」と示されます。 テキストを使用しない場合は、メインパスにのみ従います。
基本テンプレートワークフロー。
テンプレートアセットをDynamic Media Classicにアップロードする前に、いくつかの手順を完了する必要があります。
PhotoshopファイルをDynamic Media Classicにアップロードする前に、Photoshopのレイヤーを簡略化して、の操作が容易になり、Image Serverとの互換性が最も高くなります。 PSDファイルは、Dynamic Media Classicで認識されない多くの要素で構成される場合が多く、管理が困難な小さな要素も多く含まれる場合があります。 後で元のPSDを編集する必要がある場合は、必ずマスターPSDのバックアップを保存してください。 シンプル化されたコピーは、マスターではなくアップロードされます。
オン/オフを切り替える必要のある関連レイヤーを1つのレイヤーにマージ/フラット化することで、レイヤー構造を簡略化します。 例えば、「NEW」と青いバナーは単一のレイヤーに結合され、1回のクリックで表示/非表示を切り替えることができます。
一部のレイヤータイプとレイヤー効果は、Dynamic Media ClassicまたはImage Serverではサポートされていないので、アップロードの前にラスタライズする必要があります。 そうしないと、効果が無視されたり、レイヤが破棄されたりする場合があります。 レイヤーをラスタライズすると、編集可能から編集不可に変換することになります。 レイヤーエフェクトまたはテキストレイヤーをラスタライズするには、空のレイヤーを作成し、レイヤー/レイヤーを結合またはCtrl + E/Cmd + Eキーを使用して、両方を選択して結合します。
また、ダイナミックテキストを生成する必要がある場合は、フォントをアップロードして公開します。 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では、どちらの形式も同様に機能します。
テンプレートを作成するためにPhotoshopファイル(PSD)をアップロードする必要はありません。テンプレートは、Dynamic Media Classicの任意の画像アセットから作成できます。 ただし、PSDをアップロードすると、通常はレイヤー化されたPSDに既にこれらのアセットが含まれるので、オーサリングが容易になります。 さらに、Dynamic Media Classicは、レイヤー化されたPSDをアップロードする際に、自動的にテンプレートを生成します。
Dynamic Media Classicは、レイヤー化されたPSDからテンプレートを自動的に作成できますが、手動でテンプレートを作成する方法を知っておく必要があります。 前述のように、Dynamic Media Classicで作成したテンプレートを使用しない場合もあります。
まず、編集インターフェイスについて説明します。
左側の中央には、最終的なテンプレートのプレビューを示す作業領域が表示されます。 右側には、[レイヤ]パネルと[レイヤプロパティ]パネルが表示されます。 これらの領域は、最も多くの作業を行う場所です。
ビルドテンプレートの基本ページ
基本テンプレートを開始するためのワークフロー手順を次に示します。
Dynamic Media Classicで、ビルド/テンプレートの基本に移動します。 何も選択していない場合や、テンプレートの最初のレイヤーとなる画像を選択して開始する場合があります。
サイズを選択し、OKを押します。 このサイズは、Photoshopで設計したサイズと一致する必要があります。 テンプレートエディターが読み込まれます。
手順1で画像を選択していない場合は、左側のアセットパネルで画像を検索または参照し、作業領域にドラッグします。
作業領域で直接、またはレイヤーのプロパティパネルで設定を調整して、レイヤーのサイズを変更または再配置します。
必要に応じて、追加の画像レイヤをドラッグします。 必要に応じて、レイヤー効果も追加します。 以下のレイヤー効果の追加を参照してください。
「保存」をクリックし、保存場所を選択し、テンプレートに名前を付けます。 ただし、この時点では、テンプレートは統合されたPhotoshop画像とまったく同じように見えます。まだ変更できません。
Image Serverは、いくつかのプログラムレイヤー効果(レイヤーのコンテンツの外観を変える特殊効果)をサポートしています。 これらは、Photoshopのレイヤー効果と同様に機能します。 レイヤにアタッチされているが、レイヤとは独立して制御されている。 レイヤ自体に恒久的な変更を加えることなく、調整や削除を行うことができます。
ドロップシャドウのあるレイヤーとないレイヤー
効果を追加するには、効果を追加をクリックし、メニューから効果を選択します。 通常のレイヤーと同様に、レイヤーパネルで効果を選択し、レイヤーのプロパティパネルを使用して設定を調整できます。
シャドウ効果は、レイヤーから水平または垂直にオフセットされますが、グロー効果はすべての方向に均等に適用されます。 内側のエフェクトは、レイヤーの不透明部分の上に作用しますが、外側のエフェクトは透明部分にのみ作用します。
レイヤー効果の追加について詳しく説明します。
レイヤーを組み合わせて保存するだけの場合、統合されたPhotoshopイメージと同じ結果になります。 テンプレートに特殊なのは、各レイヤーのプロパティにパラメーターを追加し、URLを使用して動的に変更できる機能です。
Dynamic Media Classicの用語では、パラメーターは、URLを使用して操作できるように、テンプレートプロパティにリンクできる変数です。 レイヤーにパラメーターを追加すると、Dynamic Media ClassicはURLでそのプロパティをドル記号($)で先頭に追加して公開します。例えば、「size」というパラメーターを作成してレイヤーのサイズを変更すると、Dynamic Media Classicはパラメーターの名前を$sizeに変更します。
プロパティにパラメーターを追加しない場合、そのプロパティはDynamic Media Classicデータベースで非表示のままとなり、URLには表示されません。
パラメーターがない場合、特に動的テキストを使用する場合は、URLは通常より長くなります。 テキストは、各URLに数十の追加文字を追加します。
最後に、最初のパラメーターセットがテンプレートのプロパティのデフォルト値になります。 テンプレートを作成し、パラメーターを追加して、パラメーターを指定せずにURLを呼び出すと、Image Serverはテンプレートに保存したすべてのデフォルトを使用して画像を作成します。 パラメーターは、プロパティを変更する場合にのみ必要です。 プロパティを変更する必要がない場合は、パラメーターを設定する必要はありません。
次に、パラメーターを作成するワークフローを示します。
パラメータを作成するレイヤーの名前の横にある「パラメータ」ボタンをクリックします。 「パラメーター」画面が開きます。 画層上の各プロパティとその値が一覧表示されます。
パラメーターにする各プロパティの名前の横にあるOnオプションを選択します。 デフォルトのパラメーター名が表示されます。 プロパティに追加できるのは、デフォルトの状態から変更されたパラメータのみです。
デフォルトのパラメーター名を、URLで識別しやすい名前に変更します。 例えば、画像の上のバナーレイヤーを変更するパラメーターを追加する場合、「layer_2_src」のデフォルト名を「banner」に変更します。
閉じるを押して、パラメーター画面を終了します。
パラメータボタンをクリックし、パラメータの追加と名前の変更を行って、他のレイヤーに対してこの手順を繰り返します。
完了したら、変更を保存します。
パラメーターの名前を意味のある名前に変更し、名前を標準化する命名規則を作成します。 設計チームと開発チームの両方で、あらかじめ命名規則に合意されていることを確認します。
プロパティが表示されないため、パラメータを追加できませんか? レイヤーのプロパティをデフォルトから(移動、サイズ変更、非表示など)変更するだけです。 これで、そのプロパティが公開されたのがわかります。
テンプレートパラメーターの詳細をご覧ください。
次に、テキストレイヤーを含む基本テンプレートを作成する方法を学びます。
これで、画像レイヤを使用して基本テンプレートを作成する方法がわかりました。 多くのアプリケーションでは、これが必要です。 前の練習で見たように、単純なテキスト(「Sale」や「New」など)を持つレイヤは、テキストを変更する必要がないので、画像としてラスタライズおよび処理できます。
ただし、次の操作が必要な場合はどうすればよいですか。
この場合、テキストや書式を制御するためのパラメータを含むダイナミックテキストレイヤーを追加します。
テキストを作成するには、いくつかのフォントをアップロードする必要があります。アップロードしない場合、Dynamic Media ClassicはデフォルトでArialに設定されます。 フォントもImage Serverに公開する必要があります。公開しないと、そのフォントを使用するテキストをレンダリングしようとするとエラーが発生します。
テンプレートの基本ツールを使用してテキストに変数を追加するには、テキストのレンダリング方法を理解する必要があります。 Image Serverは、PhotoshopとIllustratorが使用するのと同じエンジンであるAdobeテキストエンジンを使用してテキストを生成し、最終的な画像のレイヤーとして合成します。 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つの方法があります。
テキストを入力するには、テキストエディタを使用します。 テキストエディターは、PhotoshopやIllustratorの場合と同様の書式設定コントロールを使用して、テキストの入力と書式設定を行えるWYSIWYGインターフェイスです。
テンプレートの基本テキストエディター。
ほとんどの作業は、「プレビュー」タブで行います。このタブでは、テキストを入力し、テンプレート内での表示を確認できます。 また、必要に応じて、RTFを手動で編集するために使用する「ソース」タブもあります。
一般的なワークフローでは、「プレビュー」タブを使用してテキストを入力します。
次に、テキストを選択し、上部のコントロールを使用して、フォントカラー、フォントサイズ、位置揃えなどの書式を選択します。 テキストのスタイルを希望どおりに設定したら、[適用]をクリックして、作業領域のプレビューで更新を確認します。 次に、テキストエディタを閉じて、テンプレートの基本メインウィンドウに戻ります。
次に、テンプレートの基本ビルドページ内にテキストを追加するワークフロー手順を示します。
ビルドページの上部にある「テキスト」ツールボタンをクリックします。
テキストを表示するテキストボックスをドラッグします。 テキストエディターウィンドウがモーダルウィンドウで開きます。 バックグラウンドでは、テンプレートが表示されますが、テキストの編集が終了するまで編集できません。
テンプレートの初回読み込み時に表示するサンプルテキストを入力します。 例えば、パーソナライズされた電子メール画像用のテキストボックスを作成する場合、「名前をこんにちは」というテキストが表示されます。 今こそ救う時だ!」 後で、NameをURLで送信する値に置き換えるためのテキストパラメーターを追加します。 「適用」をクリックするまで、テキストはウィンドウの下のテンプレートに表示されません。
テキストの書式を設定するには、マウスでドラッグして選択し、UIで書式設定コントロールを選択します。
「適用」をクリックして、変更が作業領域ウィンドウに反映されることを確認します。 「適用」をクリックする必要があります。クリックしないと、編集内容が失われます。
完了したら、「閉じる」をクリックします。 編集モードに戻る場合は、テキストレイヤーをダブルクリックして、テキストエディターを再度開きます。
フォントがシステム上にローカルにインストールされている場合、テキストエディターは、フォントの大きさを正確にプレビューします。
次に、レイヤパラメータと同じ手順で、テキストパラメータを追加します。 テキストレイヤーは、サイズや位置などのレイヤーパラメータを取ることもできます。ただし、追加のパラメータを取得して、RTFのあらゆる側面を制御できます。
レイヤパラメータとは異なり、変更する値を選択し、プロパティ全体にパラメータを追加するのではなく、その値にパラメータを追加するだけです。
サンプルRTF:
RTFを調べる際に、各設定を変更する場所を見つけ出す必要があります。 上記のRTFでは、一部の形式が意味を持つ場合があり、書式設定の元の場所を確認できます。
「チョコレートミントサンダル」という言葉が見えます
パラメータを作成するのに十分な情報がありますが、画像サービングのドキュメントには、すべてのRTFコマンドの完全な参照が記載されています。 画像サービングのドキュメントを参照してください。
次に、テキストレイヤーにパラメータを追加する手順を示します。
テキストの色にパラメータを追加するには、赤、緑、青のパラメータを別途追加します。 例えば、RTFが\red56\green53\blue46
の場合、値56、53、46に赤、緑、青の各パラメータを個別に追加します。 URLで、3つすべてを呼び出して色を変更します。&$red=56&$green=53&$blue=46
.
ダイナミックテキストパラメーターの作成方法を説明します。
テンプレートのプリセットの作成は必須の手順ではありません。 ベストプラクティスとして、テンプレートは常に1:1のサイズで呼び出し、また、テンプレートに合わせてサイズ変更される大きな画像レイヤーにシャープを追加することをお勧めします。 プリセットを指定せずに画像を呼び出した場合、Image Serverでは任意に画像のサイズをデフォルトサイズ(約400ピクセル)に変更し、デフォルトのシャープニングは適用されません。
テンプレートの画像プリセットに関して特別なことはありません。 同じサイズの静的画像のプリセットが既にある場合は、代わりに使用できます。
Image Serverにプッシュされた変更を確認するには、公開を実行する必要があります。 公開する必要がある点に注意してください。様々な画像アセットレイヤー、ダイナミックテキストのフォント、およびテンプレート自体。 基本テンプレートは、画像セットやスピンセットなど、他のDynamic Media Classicのリッチメディアアセットと同様に、人工的な構成です。一連の画像サービングコマンドを使用して画像とフォントを参照する、データベース内の行項目です。 そのため、テンプレートを公開する際には、Image Server上のデータを更新するだけです。
テンプレートのパブリッシュの詳細をご覧ください。
基本テンプレートには、前述の通常の画像呼び出しと同じ必須URL構文があります。 通常、テンプレートには、値を持つパラメータなど、アンパサンド(&)で区切られた多くの修飾子が含まれます。 ただし、主な違いは、静的な画像を呼び出すのではなく、をメイン画像としてテンプレートを呼び出すことです。
プリセット名の両側にドル記号($)が付く画像プリセットとは異なり、パラメーターの先頭には1つのドル記号が付きます。 これらのドル記号の配置は重要です。
正解
$text=46-inch LCD HDTV
不正解
$text$=46-inch LCD HDTV
$text=46-inch LCD HDTV$
text=46-inch LCD HDTV
前述のように、パラメーターはテンプレートを変更するために使用されます。 パラメーターを指定せずにテンプレートを呼び出すと、Template Basicsオーサリングツールで設計されたデフォルト設定に戻ります。 プロパティを変更する必要がない場合は、パラメーターを設定する必要はありません。
imageパラメーターを設定しない(上記)テンプレートとパラメーターを設定する(下記)テンプレートの例。