ヘッダーをスキップ
Oracle® WebCenter Content Site Studio Designerユーザーズ・ガイド
11g Release 1 (11.1.1)
B72416-01
  目次へ移動
目次
索引へ移動
索引

前
 
次
 

8 テンプレートの操作

この項の内容は次のとおりです。

8.1 テンプレートについて

テンプレートは、Webサイトにコンテンツを配置するために使用されるファイルです。テンプレートはHTMLファイルです。ページ・テンプレートは<HEAD>および<BODY>タグがある完全なファイルですが、サブテンプレートおよびリージョン・テンプレートは部分的なHTMLセクションで、ページ・テンプレートの<BODY>タグの間に配置され、本文に関連するコンテンツにのみ使用されます。

Site Studioでは、Webサイトの処理方法が一般的なWebサイト開発ツールとは異なります。この違いを明確に確認できる点は、ページ・テンプレート、サブテンプレートおよびリージョン・テンプレートの使用にあります。

これらのテンプレートには、どのような静的コンテンツおよび動的コンテンツも追加できます。ただし、これらの各テンプレートに費やす時間の方が長いため、比較的小さな静的コンテンツをページに直接追加する方が有意義である理由がわかります。コンテンツをページに直接追加すると、再利用性が制限され、特にローカライズが難しくなります。

テンプレートに直接追加するコンテンツとしてよく使用されるのは、サイト全体の静的な(変化しない)情報です。これは、サイトの基本的なルック・アンド・フィールを決定するもので、背景色、背景イメージ、HTML表(テキストやグラフィックの位置決め用)などを含みます。

残りのコンテンツは、コントリビュータ・データ・ファイルから構築されます。このファイルはコントリビュータが更新し、テンプレートに関連付けられます。データの表示方法はテンプレートによって制御され、表示するデータは定義によって制御されます。

テンプレートをそれぞれ同様に使用して静的コンテンツと動的コンテンツを結合し、各テンプレートが制御するサイトの各部分を完了します。

この項では、「サイト・アセット」ペインに表示される3種類のテンプレートについて説明します。

8.1.1 ページ・テンプレートについて

ページ・テンプレートは、Webページのレイアウトと完全な構造を定義する完全形式のHTMLのファイルです。たとえば、コントリビューション・リージョン(ページ上の編集可能領域)の配置、ナビゲーション補助(フラグメント形式)、およびサイト全体のイメージ(バナーなど)などを定義します。ページ・テンプレートは、サイトのコンテンツを表示するフレームワークを提供します。Webサイトに必要なページ・テンプレートの数は、サイトの複雑さによって異なりますが、通常は少ない方が簡単に使用できます。

使用するページ・テンプレートの数を少なくすると、サイト全体の変更がはるかに簡単になります。ページ・テンプレートが表すアセットは、HCSP、JSPまたはASPによる完全なWebページです。リージョン・テンプレートまたはサブテンプレートの場合と同様に、テンプレートにはテキスト、イメージ、フラグメントなど、何でも直接配置でき、このテンプレートは、テンプレートが使用されるすべてのインスタンスで表示されます。これは、サブテンプレートとリージョン・テンプレートでも同様です。

ページ・テンプレートは、標準のHTMLレイアウト、書式設定コード、およびフラグメントまたはプレースホルダ(あるいはその両方)の配置場所を指定するSite Studioタグで構成されます。そのため、通常はページ・テンプレートは軽量です。ページ・テンプレートに含まれるのは、ページ上のコントリビューション・リージョンの配置場所に対する上位レベルの参照のみです。コンテンツおよび視覚的プレゼンテーションの観点でリージョンに何を配置するかについての情報は、ページ・テンプレートに指定されません。そのような情報は、リージョン定義とリージョン・テンプレートによって処理されます。通常、ページ・テンプレートには、企業のバナーやページ・レイアウト・イメージなどのサイト全体のグラフィック、およびナビゲーション補助などの繰り返し表示されるその他の編集不可のコンテンツが含まれます。

ページ・テンプレートを再利用する場合、そこに配置されているオブジェクトはページ・テンプレートを開くたびに表示されます。また、ページ・テンプレートを効率よく使用すると、少ない数(場合によっては1つ)のページ・テンプレートでWebサイト全体を作成できます。これにより、Webサイトの標準的なルック・アンド・フィールを維持しながら、サイト管理を可能なかぎり簡素化できます。

詳細は、3.12項「ページ・テンプレート」を参照してください。

8.1.2 リージョン・テンプレートについて

リージョン・テンプレートは、Webページ内のコントリビューション・リージョンにあるデータのレイアウトとルック・アンド・フィールを定義する、部分的なHTMLファイルです。リージョン・テンプレートは、ヘッドとボディ・セクションを持たない部分的なHTMLファイルです。したがって、Site StudioサイトのWebページを生成するときに、このリージョン・テンプレートを他のHTMLコードに挿入できます。

これらのテンプレートは、標準のHTMLレイアウト、書式設定コード、および要素(コントリビュータ・データ・ファイル)または動的変換(ネイティブ・ドキュメント)の配置場所を指定するSite Studioタグで構成されます。コントリビュータ・データ・ファイルの一部の要素は一部のリージョン・テンプレートに表示できますが、他のリージョン・テンプレートには表示できません。これにより、異なるページ間で情報を再利用できます。リージョン・テンプレートは、プレースホルダ内にデータを表示する場合や要素(リージョン定義で制限される)をWebサイトで必要なレイアウトに配置する場合に使用します。詳細は、3.10項「リージョン・テンプレートとリージョン定義」を参照してください。

リージョン・テンプレートを作成するときにはリージョン定義と関連付ける必要があるため、リージョン定義を最初に作成してからリージョン・テンプレートを作成することをお薦めします。

8.1.3 サブテンプレートについて

サブテンプレートはページ・テンプレートと同じですが、大きな違いが1つあります。それは、<HTML>、<HEAD>および<BODY>セクションを持たないことです。そのため、サブテンプレートはページ・テンプレートに挿入できる実際のHTMLコードのチャンクになります。サブテンプレートには非常に簡単なHTMLコードを含めることができますが、複雑にすることもできます。サブテンプレート内のコードは、ページ・テンプレートに直接配置されると、スクリプト、CSSファイル、その他の挿入されたアセットのいずれであるかにかかわらず、書かれたとおりにそのまま処理されます。

サブテンプレートはプレースホルダ内にのみ配置でき、サブテンプレートには1つまたは複数の独自のプレースホルダのみ含めることができます。サブテンプレートは、多くの場合、ページ・テンプレートに単独で配置される1つのプレースホルダを複数のプレースホルダに分割する手段として使用されます。これにより、ページ・テンプレートが再利用しやすくなります。

8.1.4 Cascading Style Sheetについて

Cascading Style Sheet (CSS)は、ページへの配置、レイアウトおよびその他のスタイルを制御する場合に使用します。スタイルシートは「ソース」ビューで編集します。スタイルシートは通常、静的HTMLページに挿入する場合と同様に、ページ・テンプレートやサブテンプレートなどの他のオブジェクトに追加します。

8.2 サイト・アセットとしてのテンプレートの管理

すべてのテンプレートは、他のサイト・アセットと同様に、「サイト・アセット」ペインで簡単に管理できます。ここで、新規テンプレートの追加、既存のテンプレート上の情報の変更およびサイトからのテンプレートの削除を行うことができます。

この項の内容は次のとおりです。

8.2.1 新規テンプレートの作成

テンプレートを作成するには、次の手順を実行します。

  1. アセット・タイプのリストから、作成するテンプレート・タイプを選択します。

  2. 「新規作成」アイコン(図8-1)をクリックし、「新規」を選択し、テンプレート・タイプ(ほとんどの場合、これはHCSPです)を選択します。

    「情報の割当てフォーム」が開き、テンプレートをコンテンツ・サーバーにチェックインできます。

    図8-1 「新規作成」アイコン

    「新規作成」アイコン
  3. 「情報の割当てフォーム」に適切な値を入力します。

    Site Studioアセットの名前指定のガイドラインは、4.2項「サイト・アセットの命名」を参照してください。

  4. 入力したら、「情報の割当て」をクリックします。

  5. テンプレートが作成されます。

サイト階層が作成されたページ・テンプレートを作成する方法は他にもあります。詳細は、8.2.2項「サイト階層からのページ・テンプレートの作成」を参照してください。

8.2.2 サイト階層からのページ・テンプレートの作成

ページ・テンプレートは次の方法でも作成できますが、サイト階層の作成後にのみ実行する必要があります。

  1. サイト階層で、セクションを右クリックし、ページ・テンプレートを使用する場所に応じて「ホームページの選択」「プライマリ・ページの選択」「セカンダリ・ページの選択」のいずれかを選択します。

    メニューでの選択内容に応じて、次のいずれかのダイアログが開きます。

  2. 「新規ページ・テンプレートの作成」を選択します。

  3. 「OK」をクリックします。

  4. 情報を入力して、ページ・テンプレートをコンテンツ・サーバーにチェックインします。

    Site Studioアセットの名前指定のガイドラインは、4.2項「サイト・アセットの命名」を参照してください。

  5. ページ・テンプレートが作成され、セクションに関連付けられます。

ページ・テンプレートをこの方法で作成すると、コンテキスト・データが「プレビュー」タブに表示されます。「サイト・アセット」ペインでページ・テンプレートを作成する場合は、ページ・テンプレートをセクションに割り当てて、ページが含まれるセクションに基づいてデータが開くことを確認する必要があります。

8.2.3 テンプレートのコピー

リストからテンプレートを選択してコピーするか、コンテンツ・サーバーからテンプレートを選択してコピーするか、ローカル・インスタンスからテンプレートを選択してコピーできます。

「サイト・アセット」ペインからのテンプレートのコピー

  1. 「サイト・アセット」ペインのメニューで、テンプレート・タイプを選択します。

  2. リストからコピーするテンプレートを選択します。

  3. 「新規作成」アイコン(図8-2)をクリックし、「コピー」「選択済」を選択します。

    「情報の割当てフォーム」が開き、アイテムをコンテンツ・サーバーにチェックインできます。

    図8-2 「新規作成」アイコン

    「新規作成」アイコン
  4. 「情報の割当てフォーム」に適切な値を入力します。

  5. 入力したら、「情報の割当て」をクリックします。

  6. テンプレートがコピーされます。

コンテンツ・サーバーからのテンプレートのコピー

  1. 「サイト・アセット」ペインのメニューで、テンプレート・タイプを選択します。

  2. 「新規作成」アイコン(図8-2)をクリックし、「コピー」「サーバーから」を選択します。

    検索結果ページが開きます。

  3. コピーするカスタム構成スクリプトに対応する「選択」ボタンをクリックします。

    「情報の割当てフォーム」が開き、アイテムをコンテンツ・サーバーにチェックインできます。

  4. 「情報の割当てフォーム」に適切な値を入力します。

  5. 入力したら、「情報の割当て」をクリックします。

  1. テンプレートがコピーされます。

ローカル・インスタンスからのテンプレートのコピー

  1. 「サイト・アセット」ペインのメニューで、テンプレート・タイプを選択します。

  2. 「新規作成」アイコン(図8-2)をクリックし、「コピー」「ローカルから」を選択します。

    「ファイルを開く」ダイアログが開きます。

  3. ローカル・インスタンスで、コピーするテンプレートに移動します。

  4. ファイルを選択し、「開く」をクリックします。

    「情報の割当てフォーム」が開き、アイテムをコンテンツ・サーバーにチェックインできます。

  5. 「情報の割当てフォーム」に適切な値を入力します。

  6. 入力したら、「情報の割当て」をクリックします。

  7. テンプレートがコピーされます。

8.2.4 テンプレートのコンテンツ情報の表示

テンプレートのコンテンツ情報を表示するには、次の手順を実行します。

  1. 「サイト・アセット」ペインのメニューで、テンプレート・タイプを選択します。

  2. リストからテンプレートを選択します。

  3. 「ドキュメント情報」アイコン(図8-3)をクリックします。

    コンテンツ情報ページが開きます。

    図8-3 「ドキュメント情報」アイコン

    「ドキュメント情報」アイコン

8.2.5 サイト階層からのページ・テンプレートのコンテンツ情報の表示

必要に応じて、ページ・テンプレートのコンテンツ情報ページを参照できます。コンテンツ・サーバーに含まれる機能を使用して、メタデータの更新、電子メールによるファイル・リンクの送信、メール配信のサブスクライブなどを実行できます。

コンテンツ情報ページは、「サイト階層」ペインを使用して表示できます。

ページ・テンプレートのメタデータを表示するには、「サイト階層」ペインで適切なページ・テンプレートを右クリックし、「ドキュメント情報の表示」を選択します。

8.2.6 サイトへのテンプレートの追加

サイトにテンプレートを追加するには、次の手順を実行します。

  1. 「サイト・アセット」ペインのメニューで、テンプレート・タイプを選択します。

  2. 「サイトに追加」アイコン(図8-4)をクリックします。

    検索結果ページが開きます。

    図8-4 「サイトに追加」アイコン

    「サイトに追加」アイコン
  3. 追加するテンプレートを選択し、「Site Studio」「印の付いたドキュメントを選択」をクリックします。

  4. 構成に応じて、既存のアセットをサイトに追加しようとしていることを示す警告が表示される場合があります。「OK」をクリックします。

    テンプレートがWebサイトに関連付けられます。

8.2.7 サイトからのテンプレートの削除

サイトからテンプレートを削除するには、次の手順を実行します。

  1. 「サイト・アセット」ペインのメニューで、テンプレート・タイプを選択します。

  2. 削除するテンプレートをリストから選択し、「サイトから削除」アイコン(図8-5)をクリックします。

    テンプレートを削除すると、サイトとの関連付けのみ削除されます。ファイルはコンテンツ・サーバーから削除されません。

    図8-5 「サイトから削除」アイコン

    「サイトから削除」アイコン

8.3 コントリビューション・リージョンの理解

コントリビュータが編集できる領域をコントリビューション・リージョンと呼びます。この領域はデザイナがプレースホルダを使用して定義します。プレースホルダ内では、サブテンプレート(使用する場合)とリージョン・テンプレートを使用して、コントリビューション・リージョン内に関連付けられたデータの表示方法が制御されます。コントリビュータがそのデータを編集したり対話処理したりする方法は、プレースホルダ、リージョンおよび要素などの各定義を使用して制御されます。

要素定義を使用して、コントリビュータが使用できるツールバー・アイコンと編集機能を決定します。要素はリージョン・テンプレートに配置されます。リージョン・テンプレートはサイト・アセットとして制御されるHTMLの最小のチャンクです。これにより、そのHTMLの1つの特定のセクションおよびテンプレート経由で渡される関連付けられたコンテンツを利用および再利用できます。リージョン定義では、リージョン・テンプレートで使用可能な要素が定義されます。また、リージョン・コンテンツの切替えに関するコントリビュータのアクセス・レベルが定義されます。

リージョン定義には、リージョン・テンプレートに配置されるよりも多くの要素定義を含めることができます。リージョン・テンプレートで使用されていなくてもリージョン定義にリストされている要素定義は、データ・ファルの編集時にコントリビュータに表示されます。あるページのティーザー情報を使用して、別のページの完全な情報セットに移動する場合、これは特に役立ちます。この概念は、3.10項「リージョン・テンプレートとリージョン定義」で詳細に説明されています。

コントリビューション・リージョンの境界はプレースホルダによって設定されます。一般的に、プレースホルダはコントリビューション・リージョンと呼ばれる領域を意味します。プレースホルダはアセットではありません。プレースホルダは単なるページ・テンプレート(またはサブテンプレート)上のマーカーです。これを使用して、サイトのテンプレートまたはサブテンプレート上にある他のオブジェクトの配置に対するコントリビューション・リージョンの相対的な位置を示します。プレースホルダに割り当てるプレースホルダ定義には、コントリビュータにデータ編集のアクセス権を与えるかどうかや、コントリビュータがコンテンツを切り替えることができるかどうかを定義します。

さらに、プレースホルダ定義には、プレースホルダで利用可能なリージョン定義、使用可能なリージョン・テンプレートおよびプレースホルダ内の各リージョン定義のデフォルトが定義されます。

プレースホルダへのアクセスを必ずしもコントリビュータに与える必要はありません。また、プレースホルダにサブテンプレートを含め、そのサブテンプレートを他のプレースホルダに分割することもできるため、プレースホルダが常に厳格にコントリビューション・リージョンになるとはかぎりません。ただし、簡単なプレースホルダを考える場合、一般的に、そのプレースホルダはコントリビュータが作業するコントリビューション・リージョンになります。

8.4 プレースホルダの挿入

プレースホルダは、コンテンツを配置する領域をマークするためにページ・テンプレートおよびサブテンプレートで使用されます。プレースホルダはアセットではありません。ページでのプレースホルダの使用方法とページに配置するコンテンツを定義するプレースホルダ定義がサイト・アセットです。

プレースホルダを挿入するには、次の手順を実行します。

  1. テンプレート内のプレースホルダを配置する場所をクリックします。

  2. ツールバーの「プレースホルダの挿入」ボタンをクリックします。

  3. 「プレースホルダの定義」ダイアログ(A.75項「「プレースホルダの定義」ダイアログ」を参照)が表示されます。

    ダイアログには、「プレースホルダ定義マッピング」ダイアログ(A.73項「「プレースホルダ定義マッピング」ダイアログ」を参照)で作成されたプレースホルダ名がリストされます。

  4. プレースホルダに関連付けるプレースホルダ名を選択し、「OK」をクリックします。

8.5 オブジェクトの挿入

他のサイト・アセットは、テンプレートにオブジェクトを直接配置することによって簡単に追加されます。これを行うには、ツールバーからアイコンを選択するかテンプレートを右クリックして、使用可能なサイト・アセットを追加します。

ページ・テンプレート、サブテンプレートまたはリージョン・テンプレートへのオブジェクトの追加は非常に簡単です。

オブジェクトを追加するには、次の手順を実行します。

  1. テンプレート内のアセットを配置する場所を右クリックします。

  2. コンテキスト・メニューが表示されます。「オブジェクトの挿入」を選択します。

  3. 次のコンテキスト・メニューが開き、挿入可能なサイト・アセットが表示されます。

    たとえば、要素は、リージョン・テンプレートを操作している場合にのみ選択できます。

  4. サイト・アセットを選択した後に、そのサイト・アセットがテンプレートに追加されます。

動的コンテンツ(プレースホルダなど)を含むアセットを追加すると、コンテンツが表示されるかわりにマーカーが表示されます。静的コンテンツ(イメージなど)を含むアセットを追加すると、コンテンツが表示されます。

アセットは「ソース」ビューで直接追加することもできます。

リージョン・テンプレートでは、リージョン定義によって追加可能な要素が制限されます。

8.6 フラグメントの挿入

フラグメントはどのテンプレートにも簡単に追加されます。フラグメントをテンプレートに追加するには、フラグメント・ツールボックスからフラグメントを選択します。選択したフラグメントは、テンプレート内の選択した場所に挿入されます。

ただし、フラグメントでの使用には重要な考慮事項が1つあります。

Site Studio Designerに付属するいくつかのフラグメントは、ページ・テンプレートのヘッドとボディで使用されるスニペットで構成されます。サブテンプレートとリージョン・テンプレートにはヘッドがなく、ボディのみが含まれます。したがって、フラグメントをこれらのテンプレートに挿入すると、そのフラグメントは適切に動作しません。

サブテンプレートまたはリージョン・テンプレートでフラグメントを適切に動作するには、ヘッド・スニペットがなく、1つのボディ・スニペットが含まれる独自のフラグメントを作成する必要があります。ヘッド・スニペットとボディ・スニペットを持つフラグメントはページ・テンプレートで動作しますが、他のテンプレートでは動作しません。これにより、フラグメントの再利用性が制限されます。

詳細は、第13章「フラグメントの操作」を参照してください。

8.7 テキストの操作

「設計」ビューでのテキストの操作は、ワードラップ、改行、書式設定オプションなどの機能を備えたワード・プロセッサ・プログラムでのテキストの操作によく似ています。ページ・テンプレートにテキストを追加するには、単にページ・テンプレートでテキストを追加する場所をクリックし、入力を開始します。必要なHTMLコードは、デザイナによって内部的に処理されます。

テキストを追加して編集したら、書体やフォント・サイズの変更、テキストのインデントまたは中央揃え、記号付きリストや番号付きリストの追加などを行ってテキストを書式設定できます。

テンプレートにテキストを直接追加することはお薦めしません。テキストがコントリビュータ・データ・ファイルではなくテンプレートにある場合は、これによってローカライズが難しくなります。

8.8 テンプレートでのオブジェクトの配置

特定のレイアウト構造が必要な場合に、HTML表またはCSSを使用してオブジェクトを配置し、ページに情報を配置できます。

アセットをページ・テンプレート、サブテンプレートまたはリージョン・テンプレートに挿入すると、ほとんどの場合、アセットはカーソルを置いた場所に挿入されます。ただし、アセットは、必ずしもデザイナに表示されたように最終的なWebページに表示されるとはかぎりません。ユーザーのブラウザ選択やブラウザのウィンドウ・サイズが異なったり、コントリビュータがコントリビュータ・データ・ファイルに他のどのオブジェクトを配置したかによっては、Webサイトが異なって編成されたように表示される場合があります。

CSSファイルは管理オブジェクトであり、再利用性が最大限発揮されるため、その使用はより効率のよい手段となります。表をサブテンプレートなどのアセットに配置する場合、他のアセットでその表と同じ構造を使用するには、表を再作成する必要があります。この方法で表を使用すると、変更が必要な場合に複数の場所を変更する必要があります。

CSSを使用すれば、スタイル・シート内で要素などの各サイト・アセットの正確な位置を特定できます。

Webページでの設定と作成が容易なため、多くのユーザーは表の使用を好みます。表は、相対的配置の構造化を簡単に解決できるソリューションです。表を使用すれば、データを互いに相対的に配置するセルの形状を作成できます。

8.9 CSSクラスの適用

Site Studioのデフォルトでは、フォントとパラグラフの設定が直接(インラインで)テキストに適用されます。

別の方法として、Cascading Style Sheet(CSS)のクラスをテキスト(およびイメージ)に適用できます。CSSクラスを使用して、フォントおよびパラグラフ設定のすべてを1つの場所に格納し、それらの設定をWebページに適用できます。

これにより、見出しやパラグラフごとにフォントおよびパラグラフ設定を変更することなく、それぞれに対応するクラスを指定できるため、作業時間が短縮されます。これらの設定を変更する必要がある場合は、クラスを更新すれば済みます。

CSSクラスを実装するには、ページ・テンプレートのヘッドにスタイル・シートへの参照を挿入します。これには、次のように相対パスを使用できます。

<link href="<!--$HttpRelativeWebRoot-->groups/public/documents/adacct/stylesheet.css" type="text/css" rel="stylesheet" />

また、通常は、CSSクラスをフラグメントに挿入します。CSS参照をフラグメントに配置しても、サーバーのディレクトリ構造は公開されません。

次に、「ソース」ビューでページ・テンプレートを編集するか、「設計」ビューで「プロパティ」ペインを使用して、スタイル・シートのクラス名をテキストおよびグラフィックに適用します。

図8-6 「プロパティ」ペインを使用したMyNewStyleクラスの適用

「プロパティ」ペインのclassnameプロパティ

デザイナの「サイト・アセット」ペインは、コンテンツ・サーバーのCascading Style Sheet (CSS)へのパスを追加、編集および識別する際に非常に便利です。

Site Studioに付属するフラグメントの多くには、フラグメントのアセットとしてCSSファイルが含まれます(13.12.5項「フラグメント・アセットの追加、編集および削除」を参照)。必要に応じて、これらのCSSファイルのクラス名を参照することもできます。

コントリビュータ・アプリケーションでの作業時に各コントリビュータがこれらのクラスを使用できるようにすることも可能です。これにより、サイト全体の一貫性が確保され、サイト全体でのスタイルの更新がずっと簡単になります。

8.10 HTML表の操作

HTML表は、Webページの設計でよく使用されます。Webページの構造化にCascading Style Sheetを使用しない場合にHTML表を使用できます。ページ・テンプレートでのHTML表の操作方法は、他のWebページの表と同じです。

HTML表の主な用途は、(1)データを表形式で表示することと、(2)テキストやグラフィックをWebページ上に適切に配置することの2つです。サイトのデザイナは、後者の用途で頻繁に表を使用することになります。

表で作業する場合、表のサイズと場所、それぞれの行と列のサイズ、および各セルに配置するコンテンツを指定することで、Webページでのコンテンツの表示方法を制御できます。表の枠線を非表示にすれば、サイト訪問者に表は表示されません。Site Studioで表が特に役立つのは、コントリビューション・リージョンと、その内部の要素の位置決めを行う場合です。

表で特定の編集を行う場合、「プロパティ」ペインでHTML <TABLE>タグを直接変更できます。変更は、「ソース」ビューでも可能です。

図8-7 「設計」ビューでの<TABLE>タグのプロパティ

「プロパティ」ペインのTableタグのプロパティ

「プロパティ」ペインでは、背景色、枠線の幅、セル内の余白および他のいくつかの設定を変更できます。<TABLE>タグに入力されたすべての属性は、「プロパティ」パネルで使用できます。<TABLE>タグの詳細は、World Wide Web Consortium (W3C)のWebサイト(http://www.w3.org/TR/html401/struct/tables.html#edef-TABLE)の説明を参照してください。

8.11 デザイナでのテンプレートの表示

デザイナにはテンプレートを表示する3つの方法(「設計」ビュー、「ソース」ビューおよび「プレビュー」)があります。それぞれ、デザイナでそのテンプレートを操作するときに各テンプレートを異なる方法で参照します。

デザイナ・ワークスペースの各テンプレート・ウィンドウの下部に、3つのタブがあります。タブを選択して、そのテンプレートの「設計」ビュー、「ソース」ビューおよび「プレビュー」を選択します。

この項の内容は次のとおりです。

8.11.1 「設計」ビュー

デザイナでテンプレート(ページ・テンプレート、リージョン・テンプレートまたはサブテンプレート)を開くと、そのテンプレートは「設計」ビューの作業領域に開き、必要に応じて編集できます。作業領域はエディタとして機能し、多くの一般的な編集機能を使用できます。

「設計」ビューには、テンプレートに配置されたすべてのオブジェクトが表示されます。「設計」ビューには、静的コンテンツ(固定バナー・グラフィックなど)と動的コンテンツ(プレースホルダやフラグメントなど)の両方の配置が表示されます。このビューは、テンプレートの設定方法と使用する配置方法(表またはCSSを使用したアセットの位置揃えなど)によっては、Webブラウザで表示されるページ・レイアウトに近くなることがあります。実際のWebサイトに表示されるとおりにテキスト、イメージ、色、ハイパーリンクおよび表が表示されますが、動的コンテンツ(フラグメントやスクリプトによるもの)は、実際のコンテンツではなくタグで表現されます。これは、ほとんどのフラグメントとスクリプトにはサーバー側のスクリプトと動的にレンダリングされるコンテンツが必要であるためです。

図8-8 「設計」ビュー

Webページのテンプレートの「設計」ビュー

一般的な編集キーストローク([Ctrl]+[C]、[Ctrl]+[V]でコピーおよび貼付けなど)、アプリケーション・ツールバー(5.10項「ツールバー」を参照)および右クリック・メニュー(5.6.7項「右クリック・メニュー」を参照)を使用してテキストやオブジェクトを編集できます。オブジェクトを選択するには、そのオブジェクトをクリックします。選択ハンドルが表示されます(図8-9)。

図8-9 「設計」ビューで選択されたオブジェクト

「設計」ビューで選択されたオブジェクト

「設計」ビューを使用して実行できない編集操作がある場合は、「プロパティ」ペインを使用できます(5.5項「「プロパティ」ペイン」を参照)。このペインで特定の編集操作を実行できない場合でも、常に「ソース」ビューで実際のコードを編集できます。

「設計」ビューでは、HTMLタグの場所をハイライト表示することもできます。この機能を有効化するには、書式設定ツールバーの「HTMLタグの表示/非表示」アイコン(図8-10)をクリックします。特定のHTMLタグの表示と非表示を切り替えるには、アイコンの横にある下向き矢印をクリックします。

図8-10 HTMLタグの表示/非表示

「HTMLタグの表示/非表示」アイコン

8.11.2 「ソース」ビュー

「ソース」ビューには、テンプレートに含まれるコード(HTML、XML、JavaScript、Idocスクリプト、Site Studioタグなど)が表示されます。

図8-11 「ソース」ビュー

Webページのテンプレートの「ソース」ビュー

「ソース」ビューの情報は、次のように色分けされたテキストとして表示されます。

  • 黒は、XMLコード、HTMLタグ属性およびWebページに表示されるテキストに使用されます。

  • 紫は、HTMLタグに使用されます。

  • 青は、HTMLタグ属性値に使用されます。

  • 緑は、Idocスクリプト、HTMLコメントおよびSite Studioにより挿入されたコードに使用されます。

書体、インデント・レベル、行の折返しなどの設定の多くは、変更できます。詳細は、6.9項「「ソース」ビューのコードの書式設定」を参照してください。

「ソース」ビューでは、サイト・テンプレートを完全に制御できます。これは、複数のカスタム・アセットを実装している場合に特に当てはまります。実際の手順では、「設計」ビューを使用してページの作成を開始し、その後「ソース」ビューに切り替えてページの外観と動作をカスタマイズします。

8.11.3 プレビュー

「プレビュー」には、すべてのアセットがWebブラウザでコンシューマに表示されるとおりに配置された、Webページの実際のビューが表示されます。これは、テンプレートをプレビューして、テンプレート上でのフラグメントとプレースホルダの配置を確認する場合に便利です(デザイン・モードでは、特にページ・レイアウトがCSSによって制御されていると、この表示は難しい場合があります)。

図8-12 プレビュー

Webページの「プレビュー」

注意:

Site Studioでは、プレビュー機能を提供するためにInternet Explorer 7以上を必要とします。

8.12 リージョン・テンプレートとリージョン定義

Webページのコントリビューション・リージョンに含めるものをリージョン定義で指定し、コントリビューション・リージョンの表示方法をリージョン・テンプレートに定義します。つまり、サイトのコンテンツの構造(および属性)をリージョン定義で指定し、そのコンテンツのWebページ上の視覚的プレゼンテーションをリージョン・テンプレートで定義します。

リージョン定義ごとに複数のリージョン・テンプレートが存在する場合もあります。これにより、サイト内のコンテキストに応じて、サイトのコンテンツを様々な形で表示できます。1つのリージョン定義に対して複数のリージョン・テンプレートがある場合、デフォルトでない方のリージョン・テンプレートを使用するように特に設定されていないかぎり、デフォルトのリージョン・テンプレートが使用されます。

リージョン・テンプレートを作成するときにはリージョン定義と関連付ける必要があるため、リージョン定義を最初に作成してからリージョン・テンプレートを作成することをお薦めします。

8.13 ネイティブ・ドキュメントと変換定義の操作

ネイティブ・ドキュメントを使用する場合、Webページのネイティブ・ドキュメントを変換するためのルールとテンプレートを定義する変換定義が使用可能になっている必要があります。ネイティブ・ドキュメントの使用と変換を行うには、まずCheck Out and OpenとDynamic Converterをコンテンツ・サーバーにインストールする必要があります。

動的変換を配置できるのはリージョン・テンプレートのみです。変換はリージョン・テンプレートに簡単に追加できます。他のアセットをテンプレートに追加する場合と方法は同じです。

動的変換をリージョン・テンプレートに追加するには、次の手順を実行します。

  1. 変換されるドキュメントを表示するリージョン・テンプレートを開きます。

  2. 右クリックして、メニューから「オブジェクトの挿入」「動的変換」を選択します。

    動的変換の挿入ダイアログ(A.78項「動的変換の挿入ダイアログ」を参照)が表示されます。

  3. 使用する動的変換を選択します。

  4. 「OK」をクリックします。

ネイティブ・ドキュメントおよび変換定義の詳細は、10.8項「ネイティブ・ドキュメントの操作」を参照してください。