| Oracle® WebCenter Content Site Studio for External Applications開発者ガイド 11g リリース1 (11.1.1) B72419-01 |
|
 前 |
 次 |
| Oracle® WebCenter Content Site Studio for External Applications開発者ガイド 11g リリース1 (11.1.1) B72419-01 |
|
前 |
次 |
この項では、JDeveloper環境でSite Studio Webサイトを作成する手順を説明します。このチュートリアルでは、ナビゲーションを使用して単純なWebサイトを作成しながら説明します。この項の内容は、次のとおりです。
Site Studioプロジェクトとコンテンツ・サーバー接続の作成手順は次のとおりです。
ステップ1: アプリケーションとプロジェクトの新規作成
ステップ2: コンテンツ・サーバー接続の作成
ステップ3: プロジェクトへの接続の追加
アプリケーションとSite Studioプロジェクトを新規作成する手順は次のとおりです。
JDeveloperメイン・メニューから「ファイル」→「新規」を選択します。
「新規ギャラリ」ダイアログ・ボックスの「General」カテゴリを開いて、「アプリケーション」を選択します。
アイテム・リストで、「汎用アプリケーション」を選択します。
「OK」をクリックします。
アプリケーションの名前付けステップでは:
「アプリケーション名」には、SiteStudioDemoと入力します。
「アプリケーション・パッケージの接頭辞」には、demo.SiteStudioDemoと入力します。
「次」をクリックします。
プロジェクトの名前付けステップでは:
「プロジェクト名」には、SiteStudioDemoと入力します。
「使用可能なテクノロジ」には、Site Studio Technologyと入力し、シャトル・ボタンをクリックしてそれを選択済のテクノロジ・リストに移動します。
このSite StudioプロジェクトをWebSphereアプリケーション・サーバーにデプロイする場合は、「ADFライブラリWebアプリケーション・サポート」を選択してシャトル・ボタンをクリックし、それも選択済のテクノロジ・リストに移動する必要があります。
「終了」をクリックします。
JDeveloperメイン・メニューから「ファイル」→「すべて保存」を選択します。
コンテンツ・サーバーへの接続を作成し、それをSite Studioプロジェクトに追加する手順は次のとおりです。
「アプリケーション・ナビゲータ」が開いていない場合は、「ビュー」を選択してから「アプリケーション・ナビゲータ」を選択します。
「アプリケーション・リソース」パネルを選択します。
「接続」を右クリックして「接続の作成」→「Site Studio」を選択します。
「コンテンツ・サーバー接続の作成」ダイアログで次の操作を実行します。
「アプリケーション・リソース」オプション(まだ選択されていない場合は)を有効にします。
「接続名」には、コンテンツ・サーバーのホスト名を入力します(たとえば、developmentserver2またはdevelopmentserver2.mycompany.comなど)。
デザインタイムURLフィールドは、指定された接続名に基づき自動的に設定されます。サーバーのデフォルト設定を変更した場合は、このフィールドを編集する必要があります。
ランタイムURLフィールドは、指定された接続名に基づき自動的に設定されます。サーバーのデフォルト設定を変更した場合は、このフィールドを編集する必要があります。
「このJDeveloperセッションのログイン資格証明を指定」オプションを有効にします。
「ユーザー名」には、コンテンツ・サーバーの管理ユーザー名を入力します。
「パスワード」には、コンテンツ・サーバーの管理パスワードを入力します。
「接続のテストとログイン」をクリックします。
接続に失敗した場合は、コンテンツ・サーバーの接続名とURLが正しいこと、また有効なログイン資格証明を指定したことを確認してください。
「OK」をクリックします。
サンプルのWebサイトを作成する手順は次のとおりです。
ステップ1: コンテンツ・サーバーでのWebサイトの新規作成
ステップ2: コントリビューション・モードでのユーザー資格証明の指定
ステップ4: ホームページの作成
ステップ5: サイトへのページ・テンプレートの関連付け
ステップ6: サイトの実行とホームページの表示
ステップ7: サイト・フラグメントの作成
ステップ8: 要素定義の作成
ステップ9: リージョン定義の作成
ステップ10: リージョン・テンプレートの作成
ステップ11: プレースホルダ定義の作成
ステップ12: ホームページへのプレースホルダの追加
ステップ13: プレースホルダへのコンテンツの割当て
コンテンツ・サーバーでWebサイトを新規作成する手順は次のとおりです。
「アプリケーション・ナビゲータ」で、「プロジェクト」パネルを選択します。
Site Studioプロジェクト(SiteStudioDemo)を開きます。
「Webコンテンツ」を開いてから「WEB-INF」を開きます。
「wcm-config.xml」を右クリックして「開く」を選択します。
「サーバー」タブを選択して、「サイト」を開きます。
「作成」ボタンをクリックします。
「新規サイトの作成」ダイアログで名前およびIDフィールドにSiteStudioDemoと入力します。
「OK」をクリックします。
メイン・メニューで「ファイル」→「すべて保存」を選択します。
コントリビューション・モードでユーザー資格証明を指定する手順は次のとおりです。
「アプリケーション・ナビゲータ」で、「プロジェクト」パネルを選択します。
Site Studioプロジェクト(SiteStudioDemo)を開きます。
「Webコンテンツ」を開いてから「WEB-INF」を開きます。
「weblogic.xml」を右クリックして「開く」を選択します。
「セキュリティ」を選択して、「セキュリティ・ロールの割当て」を開きます。
「作成」ボタンをクリックします。
「ロール名」には、WCMContributorと入力します。
プリンシパル・セクションで、「作成」ボタンをクリックします。
新しく作成されたセキュリティ・ロールに、コンテンツ・サーバーに存在するプリンシパルと一致するプリンシパル(ユーザー)を追加します。このチュートリアルでは、weblogic プリンシパルを使用します。
プリンシパル名には、weblogicと入力します。
メイン・メニューで「ファイル」→「すべて保存」を選択します。
Webアプリケーションを編集してJSPFファイルを処理する手順は次のとおりです。
「アプリケーション・ナビゲータ」で、「プロジェクト」パネルを選択します。
Site Studioプロジェクト(SiteStudioDemo)を開きます。
「Webコンテンツ」を開いてから「WEB-INF」を開きます。
「web.xml」を右クリックして「開く」を選択します。
「ページ」を選択して、「JSPプロパティ・グループ」を開きます。
「作成」ボタンをクリックします。
新しいJSPプロパティ・グループで、「一般」タブを選択します。
「名前の表示」には、Fragmentsと入力します。
「ページ・エンコード」には、UTF-8と入力します。
「XML」オプションを有効にします。
「URLパターン」タブを選択します。
「作成」ボタンをクリックします。
新しいURLパターンとして*.jspfを入力します。
メイン・メニューで「ファイル」→「すべて保存」を選択します。
|
注意: 環境のエンコーディングをUTF-8に設定するには、「ツール」を選択してから「プリファレンス」を選択します。 |
ユーザー・アプリケーションで簡単なホームページを作成する手順は次のとおりです。
「アプリケーション・ナビゲータ」で、「プロジェクト」パネルを選択します。
Site Studioプロジェクト(SiteStudioDemo)を開きます。
「サイト・ファイル」を開いてから「テンプレート」を開きます。
「ページ」を右クリックして、「新規」を選択します。
「新規ギャラリ」ダイアログで、「Web層」を開き、「JSP」を選択します。
アイテム・リストで、「JSP」を選択します。
「OK」をクリックします。
「JSPの作成」ダイアログで次の操作を実行します。
「ファイル名」には、home.jspxと入力します。
XMLドキュメントとして作成オプションを有効にします。
「サイト・ファイルの登録」オプションを有効にします。
「アセット・タイプ」には、リストから「ページ・テンプレート」を選択します。
「サイト・ファイルID」には、ssd-home-ptと入力します。
「説明」には、Homepage for SiteStudioDemo siteと入力します。
「OK」をクリックします。
|
注意: このチュートリアルでは、ローカル(通常はJDeveloper上のプロジェクト内のサブディレクトリ)に保存されているJSPXテンプレートを使用します。JSPXテンプレートの作成と編集の詳細は、第1.10項「Site Studio JSP/JSPXテンプレートの理解」を参照してください。 |
エディタに新しいページ・テンプレートが開いたら、「ソース」タブを選択します。
このチュートリアルでは、デフォルトのエンコーディングがUTF-8に設定されていることが前提となります。異なるエンコーディングが設定されている場合は、encodingおよびcharsetエントリを必要に応じて編集するか、次のコードで置き換えます。
<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1">
<jsp:output omit-xml-declaration="true" doctype-root-element="HTML"
doctype-system="http://www.w3.org/TR/html4/loose.dtd"
doctype-public="-//W3C//DTD HTML 4.01 Transitional//EN"/>
<jsp:directive.page contentType="text/html;charset=UTF-8"/>
<head>セクション:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
スタイル・シートを<head>セクションに追加します。
|
注意: このチュートリアルでは、スタイル・シートを使用せずに済ませることも、後にオプションでスタイル・シートをサイトに追加することもできます。 |
例:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>SiteStudioDemo</title>
<link type="text/css" rel="stylesheet"
href="../wcm/css/template.css"/>
</head>
|
注意: これは単なる例です。サブディレクトリとスタイル・シートの名前を正確に指定する必要があります。例:href="../styles/basicstyle4.css". |
SiteStudioDemoサイトでは、ヘッダー、メニュー、サイドバー、フッター(JSPセグメント)が使用されます。既存のCSSファイルを使用するか、新規にスタイル・シートを作成するか、このチュートリアルに用意されているスタイル・シートをコピーできます。詳細は、第4.5項「スタイル・シートの追加」を参照してください。
このチュートリアルのコード・サンプルは、template.cssスタイル・シートを参照します。これは単なる例です。スタイル・シートを新規作成する手順は、第4.5.1項「スタイル・シートの新規作成」を参照してください。
このチュートリアルのコード・サンプルは、スタイル・シートの場所としてWebコンテンツ・サブディレクトリ/wcm/cssを参照します。これは単なる例です。このサブディレクトリの作成方法は、第4.5.2項「CSSファイル用サブディレクトリの作成」を参照してください。
<body>セクションを次のコードで置き換えます。
|
注意: このコードには4つのJSPFファイルへの参照が含まれます。これらのJSPセグメントは、このチュートリアルの後半で作成します。 |
<body>
<jsp:include page="/wcm/templates/fragments/header.jspf"/>
<div id="container">
<jsp:include page="/wcm/templates/fragments/menu.jspf"/>
<jsp:include page="/wcm/templates/fragments/sidebar.jspf"/>
<!-- add content here -->
<jsp:include page="/wcm/templates/fragments/footer.jspf"/>
</div>
</body>
メイン・メニューで「ファイル」→「すべて保存」を選択します。
新規に作成したhome.jspxページ・テンプレートをSiteStudioDemoサイトに関連付ける手順は次のとおりです。
「アプリケーション・ナビゲータ」で、「プロジェクト」パネルを選択します。
Site Studioプロジェクト(SiteStudioDemo)を開きます。
「Webコンテンツ」→「WEB-INF」→「サイト」を開きます。
「SiteStudioDemo.xml」を右クリックして、「開く」を選択します。
サイト構造エディタで、「Home」を右クリックして、「プライマリ・ページ・テンプレートの選択」を選択します。
「ssd-home-pt」を選択して、「OK」をクリックします。
メイン・メニューで「ファイル」→「すべて保存」を選択します。
ホームページを表示する手順は次のとおりです。
「アプリケーション・ナビゲータ」で、「プロジェクト」パネルを選択します。
Site Studioプロジェクト(SiteStudioDemo)を開きます。
「Webコンテンツ」を開きます。
「startSiteStudioDemo.jspx」を右クリックして、「実行」を選択します。
統合されたWebLogicサーバーが起動すると、ログ・パネルに起動情報が表示されます。アプリケーションの起動後に、ブラウザ・ウィンドウが開き、SiteStudioDemoホームページが表示されます。
JSPセグメントをヘッダー、フッター、サイドバー、およびメニューに追加する手順は、次のとおりです。
「アプリケーション・ナビゲータ」で、「プロジェクト」パネルを選択します。
Site Studioプロジェクト(SiteStudioDemo)を開きます。
「サイト・ファイル」を開きます。
「テンプレート」を「新規」を選択します。
「新規ギャラリ」ダイアログで、「すべてのアイテム」を選択します。
アイテム・リストからフォルダ(一般)を選択します。
「OK」をクリックします。
「フォルダの作成」ダイアログで「フォルダ名」にfragmentsと入力します。
「OK」をクリックします。
JSPセグメント(ヘッダー)の作成
新しいフラグメント・フォルダを右クリックして、「新規」を選択します。
「新規ギャラリ」ダイアログで、「Web層」を開き、「JSP」を選択します。
アイテム・リストで、「JSPセグメント」を選択します。
「OK」をクリックします。
「JSPセグメントの作成」ダイアログの「ファイル名」にheader.jspfと入力します。
「OK」をクリックします。
エディタに新しいJSPセグメントが表示されたら、「ソース」タブを選択します。
次のコードを追加します。
<?xml version='1.0' encoding='UTF-8'?> <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"> <div id="top"> <b> <a href="#">SiteStudioDemo</a> </b> </div> </jsp:root>
メイン・メニューで「ファイル」→「すべて保存」を選択します。
2番目のJSPセグメント(フッター)の作成
新しいフラグメント・フォルダを右クリックして、「新規」を選択します。
「新規ギャラリ」ダイアログで、「Web層」を開き、「JSP」を選択します。
アイテム・リストで、「JSPセグメント」を選択します。
「OK」をクリックします。
「JSPセグメントの作成」ダイアログの「ファイル名」にfooter.jspfと入力します。
「OK」をクリックします。
エディタに新しいJSPセグメントが表示されたら、「ソース」タブを選択します。
次のコードを追加します。
<?xml version='1.0' encoding='UTF-8'?> <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"> <div id="footer"> <p align="center"> Copyright © 2010 | SiteStudioDemo </p> </div> </jsp:root>
メイン・メニューで「ファイル」→「すべて保存」を選択します。
3番目のJSPセグメント(サイドバー)の作成
新しいフラグメント・フォルダを右クリックして、「新規」を選択します。
「新規ギャラリ」ダイアログで、「Web層」を開き、「JSP」を選択します。
アイテム・リストで、「JSPセグメント」を選択します。
「OK」をクリックします。
「JSPセグメントの作成」ダイアログの「ファイル名」にsidebar.jspfと入力します。
「OK」をクリックします。
エディタに新しいJSPセグメントが表示されたら、「ソース」タブを選択します。
次のコードを追加します。
<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1">
<div id="sidebar">
<h1 class="first">The Sidebar</h1>
<p><!-- add content here -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
In sit amet lacus sed lacus egestas fringilla eu sit amet leo.
In hac habitasse platea dictumst.
</p>
<h1>Linkroll</h1>
<ul class="linkroll">
<li>
<a href="#">Link 1</a>
</li>
<li>
<a href="#">Link 2</a>
</li>
<li>
<a href="#">Link 3</a>
</li>
<li>
<a href="#">Link 4</a>
</li>
</ul>
</div>
</jsp:root>
"Lorem ipsum"を適した内容に変更します。
メイン・メニューで「ファイル」→「すべて保存」を選択します。
4番目のJSPセグメント(メニュー)の作成
新しいフラグメント・フォルダを右クリックして、「新規」を選択します。
「新規ギャラリ」ダイアログで、「Web層」を開き、「JSP」を選択します。
アイテム・リストで、「JSPセグメント」を選択します。
「OK」をクリックします。
「JSPセグメントの作成」ダイアログの「ファイル名」にmenu.jspfと入力します。
「OK」をクリックします。
エディタに新しいJSPセグメントが表示されたら、「ソース」タブを選択します。
次のコードを追加します。
<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
xmlns:wcm="http://www.oracle.com/jsp/wcm"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:fn="http://java.sun.com/jsp/jstl/functions">
<div id="menu">
<ul id="nav">
<li>
<wcm:url var="root" type="node"
url="${wcmContext.project.structure.rootSection.ID}"/>
<a href="${root}">
${wcmContext.project.structure.rootSection.properties.label}
</a>
</li>
<c:set var="sections"
value="${wcmContext.project.structure.rootSection.activeChildren}"/>
<!-- Iterate through the site structure nodes and add them to the menu -->
<c:forEach var="section" items="${sections}">
<wcm:url var="sectionUrl" type="node" url="${section.ID}"/>
<li>
<a title="${section.properties.label}" href="${sectionUrl}">
<em>${fn:substring(section.properties.label, 0, 1)}</em>
${fn:substring(section.properties.label, 1, -1)}
</a>
</li>
</c:forEach>
</ul>
<br class="clear"/>
</div>
</jsp:root>
メイン・メニューで「ファイル」→「すべて保存」を選択します。
2つの要素定義ファイルを作成する手順は次のとおりです。
メイン・メニューから「表示」、「Site Studio」→「サイト・アセット」を選択します。
「プロジェクト」ドロップダウン・リスト(上部左)から「SiteStudioDemo」プロジェクトを選択します。
プロジェクトがリストされない場合は、接続にログインしていないことを示します。「アプリケーション・リソース」パネルで「接続」→「Site Studio」を選択し、接続を右クリックして「ログイン」を選択します。
「アセット・タイプ」ドロップダウン・リスト(上部右)から「要素定義」を選択します。
新規アセット・タイプの作成ボタンをクリックして、新規プレーン・テキスト要素の定義を選択します。
「タイトル」と「コンテンツID」の両方に「ssd-plaintext-ed」と入力します。
「OK」をクリックします。
「リフレッシュ」ボタンをクリックして、リストを更新します。コンテンツ・サーバーによる新しいアセットの索引付けが完了してリストが表示されるまで数分間掛ることがあります。
新規アセット・タイプの作成ボタンを再度クリックして新規WYSIWYG要素定義を選択します。
「タイトル」と「コンテンツID」の両方にssd-wysiwyg-edと入力します。
「OK」をクリックします。
「リフレッシュ」ボタンをクリックして、リストを更新します。コンテンツ・サーバーによる新しいアセットの索引付けが完了してリストが表示されるまで数分間掛ることがあります。
メイン・メニューで「ファイル」→「すべて保存」を選択します。
コンテンツ・サーバーでリージョン定義を作成する手順は次のとおりです。
「アセット・タイプ」ドロップダウン・リスト(上部右)から「リージョン定義」を選択します。
新規アセット・タイプの作成ボタンをクリックして、新規リージョン定義を選択します。
「タイトル」と「コンテンツID」の両方にssd-content-rdと入力します。
「OK」をクリックします。
「リフレッシュ」ボタンをクリックして、リストを更新します。コンテンツ・サーバーによる新しいアセットの索引付けが完了してリストが表示されるまで数分間掛ることがあります。
「ssd-content_rd」アセットを右クリックして、「編集」を選択します。
エディタにリージョン定義が表示されたら、「追加」をクリックします。
「要素インスタンス」ダイアログで次の操作を実行します。
「名前」と「ラベル」の両方に、titleと入力します。
場所には、「参照」をクリックします。
ssd-plaintext-ed要素定義を選択して「OK」をクリックします。
再度「OK」をクリックします。
「追加」をクリックします。
「要素インスタンス」ダイアログで次の操作を実行します。
「名前」と「ラベル」の両方にcontentと入力します。
場所には、「参照」をクリックします。
「ssd-wysiwyg-ed」要素定義を選択して、「OK」をクリックします。
再度「OK」をクリックします。
メイン・メニューで「ファイル」→「すべて保存」を選択します。
「チェックイン」ダイアログで「OK」をクリックします。
リージョン定義ファイルを使用するリージョン・テンプレートを作成する手順は次のとおりです。
「アプリケーション・ナビゲータ」で、「プロジェクト」パネルを選択します。
Site Studioプロジェクト(SiteStudioDemo)を開きます。
「サイト・ファイル」を開いてから「テンプレート」を開きます。
「リージョン」を右クリックして、「新規」を選択します。
「新規ギャラリ」ダイアログで、「Web層」を開き、「JSP」を選択します。
アイテム・リストで、「JSP」を選択します。
「OK」をクリックします。
「JSPの作成」ダイアログで次の操作を実行します。
「ファイル名」にcontent.jspxと入力します。
XMLドキュメントの作成オプションを選択します。
「サイト・ファイルの登録」オプションを選択します。
「アセット・タイプ」ドロップダウン・リストから「リージョン・テンプレート」を選択します。
「サイト・ファイルID」には、ssd-content-rtと入力します。
「説明」には、Content Region Templateと入力します。
「リージョン定義」では、「参照」をクリックします。
「ssd-content-rd」リージョン定義を選択して、「OK」をクリックします。
再度「OK」をクリックします。
エディタに新しいテンプレートが表示されたら、「ソース」タブをクリックします。
次のコードを追加します。
<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
xmlns:wcm="http://www.oracle.com/jsp/wcm">
<wcm:dataFile var="dataFile"/>
<div id="content">
<h1><a href="#">${dataFile.title}</a></h1>
<p>${dataFile.content}</p>
</div>
</jsp:root>
メイン・メニューで「ファイル」→「すべて保存」を選択します。
新しいリージョン定義テンプレートと新しいリージョン定義を作成する手順は次のとおりです。
「アセット・タイプ」ドロップダウン・リスト(上部右)から「プレースホルダ定義」を選択します。
新規アセット・タイプの作成ボタンをクリックして、新規プレースホルダ定義を選択します。
「タイトル」と「コンテンツID」の両方にssd-content-phdと入力します。
「OK」をクリックします。
「リフレッシュ」ボタンをクリックして、リストを更新します。コンテンツ・サーバーによる新しいアセットの索引付けが完了してリストが表示されるまで数分間掛ることがあります。
「ssd-content_phd」を右クリックして「編集」を選択してエディタで開きます。
すべての「許可されたアクション」・オプションを選択します。
リージョン定義表で「追加」をクリックします。
ssd-content-rdを選択して「OK」をクリックします。
リージョン・テンプレート表で、「追加」をクリックしてssd-content-rtと入力します。
ssd-content-rtを選択して「OK」をクリックします。
メイン・メニューで「ファイル」→「すべて保存」を選択します。
「チェックイン」ダイアログで「OK」をクリックします。
home.jspxにプレースホルダを追加する手順は次のとおりです。
「アプリケーション・ナビゲータ」で、「プロジェクト」パネルを選択します。
Site Studioプロジェクト(SiteStudioDemo)を開きます。
「サイト・ファイル」を開き、「テンプレート」を開いてから「ページ」を開きます。
「home.jspx」を右クリックして「開く」を選択します。
エディタにホームページが表示されたら、「ソース」タブを選択します。
メイン・メニューで「表示」→「コンポーネント・パレット」を選択します。
「コンポーネント・パレット」で、ドロップダウン・リストから「Site Studio」を選択します。
「プレースホルダの挿入」ダイアログで次の操作を実行します。
「名前」にcontentと入力します。
「プレースホルダ定義マッピングへの名前の追加」オプションを有効にします。
ドロップダウン・リストから「SiteStudioDemo」を選択します。
「OK」をクリックします。
次のようなホームページが表示されます。
<body>
<jsp:include page="/wcm/templates/fragments/header.jspf"/>
<div id="container">
<jsp:include page="/wcm/templates/fragments/menu.jspf"/>
<jsp:include page="/wcm/templates/fragments/sidebar.jspf"/>
<!-- add content here -->
<wcm:placeholder name="content"/>
<jsp:include page="/wcm/templates/fragments/footer.jspf"/>
</div>
</body>
メイン・メニューで「ファイル」→「すべて保存」を選択します。
Site Studioプロジェクト(SiteStudioDemo)を開きます。
「Webコンテンツ」→「WEB-INF」→「サイト」を開きます。
「SiteStudioDemo.xml」を右クリックして、「開く」を選択します。
サイト構造エディタで、Webサイト(SiteStudioDemo)ノードを開きます。
「デザイン・モード・ロール」をクリックして、ドロップダウン・リストからadminセキュリティ・ロールを選択します。
「プレースホルダ定義マッピング」ボタンをクリックします。
リストから「コンテンツ」を選択して、「編集」をクリックします。
「プレースホルダ定義マッピングの編集」ダイアログで次の操作を実行します。
「プライマリ定義ID」で「検索」をクリックします。
「ssd-content-phd」を選択して「OK」をクリックします。
再度「OK」をクリックします。
「OK」をクリックします。
メイン・メニューで「ファイル」→「すべて保存」を選択します。
コントリビューション・モードに入って、ホームページ上のプレースホルダにコンテンツを追加する手順は次のとおりです。
ユーザーのSite Studioプロジェクト(SiteStudioDemo)を開き、「Webコンテンツ」を開きます。
「startSiteStudioDemo.jspx」を右クリックして、「実行」を選択します。
アプリケーションがロードされたら、[Ctrl]と[Shift]と[F5]を同時に押してコントリビューション・モードに入ります。
「コンテンツ」 プレースホルダでは、「コンテンツの割当」ボタンをクリックします。
コンテンツの切替えウィザードのコンテンツ・ファイルの選択ステップで「新規コントリビュータ・データファイル」オプションを有効にします。
「次」をクリックします。
コンテンツのチェックイン・ステップでは、次の操作を実行します。
「コンテンツID」にssd-home-dfと入力します。
「Webサイト」で、SiteStudioDemoがリストされていることを確認します(これは自動的にリストされます)。
「リージョン定義」で、ssd-content-rdがリストされていることを確認します(これは自動的にリストされます)。
「終了」をクリックします。
コンテンツ・プレースホルダで、「リージョン・コンテンツの編集」ボタンをクリックします。
「要素」タブの「タイトル」にIntroductionと入力します。
コンテンツ・エディタでテキストを追加します。
「保存して閉じる」ボタンをクリックします。
[Ctrl]と[Shift]と[F5]を同時に押してコントリビューション・モードを終了します。
この項は、チュートリアル内の前の項に基づいて構成されています。静的プレースホルダを作成して、サイトのサイドバーにリンクを表示する手順は次のとおりです。
ステップ1: 静的リスト要素定義の作成
ステップ2: サイドバー・リージョン定義の作成
ステップ3: 静的リスト・データファイルの作成
ステップ4: リージョン・テンプレートの作成
ステップ5: サイドバー・フラグメントの更新
ステップ6: サイドバー・コンテンツ・リージョン定義の作成
ステップ7: サイドバー・コンテンツ・リージョン・テンプレートの作成
ステップ8: サイドバー・コンテンツ・プレースホルダ定義の作成
ステップ9: サイトへのサイドバー・プレースホルダ・マッピングの追加
ステップ10: サイドバーへのコンテンツの割当て
静的リスト要素定義を作成する手順は次のとおりです。
メイン・メニューから「表示」→「Site Studio」→「サイト・アセット」を選択します。
「プロジェクト」ドロップダウン・リスト(上部左)から「SiteStudioDemo」プロジェクトを選択します。
「アセット・タイプ」ドロップダウン・リスト(上部右)から「要素定義」を選択します。
新規アセット・タイプの作成ボタンをクリックして、新規静的リスト要素定義を選択します。
「タイトル」と「コンテンツID」の両方にssd-links-staticlist-edと入力して「OK」をクリックします。
「リフレッシュ」ボタンをクリックして、リストを更新します。コンテンツ・サーバーによる新しいアセットの索引付けが完了してリストが表示されるまで数分間掛ることがあります。
「ssd-links-staticlist-ed」アセットを右クリックして、「編集」を選択します。
「要素」をクリックします。
「要素」ダイアログで「追加」をクリックします。
「要素インスタンス」ダイアログで次の操作を実行します。
「名前」と「ラベル」の両方に、labelと入力します。
場所には、「参照」をクリックします。
ssd-plaintext-ed要素定義を選択して「OK」をクリックします。
再度「OK」をクリックします。
「追加」をクリックして、2番目の要素を追加します。
「要素インスタンス」ダイアログで次の操作を実行します。
「名前」と「ラベル」の両方に、urlと入力します。
場所には、「参照」をクリックします。
ssd-plaintext-ed要素定義を選択して「OK」をクリックします。
再度「OK」をクリックします。
「要素」ダイアログで「OK」をクリックします。
メイン・メニューで「ファイル」→「すべて保存」を選択します。
「チェックイン」ダイアログで「OK」をクリックします。
サイドバー・リージョン定義を作成する手順は次のとおりです。
メイン・メニューから「表示」→「Site Studio」→「サイト・アセット」を選択します。
「アセット・タイプ」ドロップダウン・リスト(上部右)から「リージョン定義」を選択します。
新規アセット・タイプの作成ボタンをクリックして、新規リージョン定義を選択します。
「タイトル」と「コンテンツID」の両方にssd-links-rdと入力して、「OK」をクリックします。
「リフレッシュ」ボタンをクリックして、リストを更新します。コンテンツ・サーバーによる新しいアセットの索引付けが完了してリストが表示されるまで数分間掛ることがあります。
ssd-links-rdアセットを右クリックして、「編集」を選択します。
エディタにリージョン定義が表示されたら、「追加」をクリックします。
「要素インスタンス」ダイアログで次の操作を実行します。
「名前」と「ラベル」の両方にlinksと入力します。
場所には、「参照」をクリックします。
ssd-links-staticlist-ed要素定義を選択して、「OK」をクリックします。
再度「OK」をクリックします。
メイン・メニューで「ファイル」→「すべて保存」を選択します。
「チェックイン」ダイアログで「OK」をクリックします。
静的リスト・データファイルを作成する手順は次のとおりです。
メイン・メニューから「表示」→「Site Studio」→「サイト・アセット」を選択します。
「アセット・タイプ」ドロップダウン・リストから「データファイル」を選択します。
新規アセット・タイプの作成ボタンをクリックして、「新規コントリビュータ・データファイル」を選択します。
新規アセットの作成ダイアログで次の操作を実行します。
「タイトル」と「コンテンツID」の両方にssd-sidebarlinks-dfと入力します。
「リージョン定義」では、「参照」をクリックします。
ssd-links-rdリージョン定義を選択して、「OK」をクリックします。
再度「OK」をクリックします。
メイン・メニューで「ファイル」→「すべて保存」を選択します。
リージョン・テンプレートを使用するリージョン・ファイルを作成する手順は次のとおりです。
「サイト・ファイル」を開いてから「テンプレート」を開きます。
「リージョン」ノードを右クリックして、「新規」を選択します。
「新規ギャラリ」ダイアログで、「Web層」を開き、「JSP」を選択します。
アイテム・リストで、「JSP」を選択します。
「OK」をクリックします。
「JSPの作成」ダイアログで次の操作を実行します。
「ファイル名」にlinks.jspxと入力します。
XMLドキュメントの作成オプションを選択します。
「サイト・ファイルの登録」オプションを選択します。
「アセット・タイプ」ドロップダウン・リストから「リージョン・テンプレート」を選択します。
「サイト・ファイルID」にssd-links-rtと入力します。
「説明」にSidebar Region Templateと入力します。
「リージョン定義」では、「参照」をクリックします。
ssd-links-rdリージョン定義を選択して、「OK」をクリックします。
再度「OK」をクリックします。
エディタに新しいリージョン定義が表示されたら、「ソース」タブをクリックします。
次のコードを追加します。
<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
xmlns:wcm="http://www.oracle.com/jsp/wcm"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<jsp:directive.page contentType="text/html;charset=UTF-8"/>
<wcm:dataFile var="dataFile"/>
<ul class="linkroll"> <c:forEach var="row" items="${dataFile.links.rows}">
<li>
<a href="${row.url}">${row.label}</a>
</li>
</c:forEach>
</ul>
</jsp:root>
前述のサイドバー・リージョン・テンプレートでは、新しいssd-sidebarlinks-dfデータファイルの使用法と、プロパティを参照してデータをフォーマットする方法に注目してください。
メイン・メニューで「ファイル」→「すべて保存」を選択します。
サイドバー・フラグメントを更新する手順は次のとおりです。
「サイト・ファイル」を開いて、「テンプレート」→「フラグメント」を選択します。
sidebar.jspfフラグメントを右クリックして、「開く」を選択します。
エディタでファイルが開いたら、「ソース」タブをクリックします。
次のコードを追加します。
<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
xmlns:wcm="http://www.oracle.com/jsp/wcm"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:fn="http://java.sun.com/jsp/jstl/functions">
<div id="sidebar">
<h1 class="first">Sidebar</h1>
<p>
<wcm:placeholder name="sidebar"/>
</p>
<h1>Linkroll</h1>
<wcm:staticPlaceholder dataFile="ssd-sidebarlinks-df"
template="@ssd-links-rt"/>
</div>
</jsp:root>
前述のサイドバー・リージョン・テンプレートでは、データファイルの使用法とデータファイル・プロパティの参照方法に注目してください。
メイン・メニューで「ファイル」→「すべて保存」を選択します。
サイドバー・コンテンツ・リージョン定義を作成する手順は次のとおりです。
「アセット・タイプ」ドロップダウン・リストから「リージョン定義」を選択します。
新規アセット・タイプの作成ボタンをクリックして、新規リージョン定義を選択します。
「タイトル」と「コンテンツID」の両方にssd-text-rdと入力して、「OK」をクリックします。
「リフレッシュ」ボタンをクリックして、リストを更新します。コンテンツ・サーバーによる新しいアセットの索引付けが完了してリストが表示されるまで数分間掛ることがあります。
「ssd-text-rd」アセットを右クリックして、「編集」を選択します。
エディタにリージョン定義が表示されたら、「追加」をクリックします。
「要素インスタンス」ダイアログで次の操作を実行します。
「名前」と「ラベル」の両方にtextと入力します。
場所には、「参照」をクリックします。
「ssd-wysiwyg-ed」 要素定義を選択して「OK」をクリックします。
再度「OK」をクリックします。
メイン・メニューで「ファイル」→「すべて保存」を選択します。
「チェックイン」ダイアログで「OK」をクリックします。
サイドバー・コンテンツ・リージョン・テンプレートを作成する手順は次のとおりです。
「サイト・ファイル」を開いてから「テンプレート」を開きます。
「リージョン」を右クリックして、「新規」を選択します。
「新規ギャラリ」ダイアログで、「Web層」を開き、「JSP」を選択します。
アイテム・リストで、「JSP」を選択します。
「OK」をクリックします。
「JSPの作成」ダイアログで次の操作を実行します。
「ファイル名」には、simple.jspxと入力します。
XMLドキュメントの作成オプションを選択します。
「サイト・ファイルの登録」オプションを選択します。
「アセット・タイプ」ドロップダウン・リストから「リージョン・テンプレート」を選択します。
「サイト・ファイルID」には、ssd-text-rtと入力します。
「説明」にText Region Templateと入力します。
「リージョン定義」では、「参照」をクリックします。
ssd-text-rdリージョン定義を選択して、「OK」をクリックします。
再度「OK」をクリックします。
エディタでファイルが開いたら、「ソース」タブをクリックします。
次のコードを追加します。
<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
xmlns:wcm="http://www.oracle.com/jsp/wcm"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<jsp:directive.page contentType="text/html;charset=UTF-8"/>
<wcm:dataFile var="dataFile"/>
<p>${dataFile.text}</p>
</jsp:root>
メイン・メニューで「ファイル」→「すべて保存」を選択します。
「チェックイン」ダイアログで「OK」をクリックします。
サイドバー・コンテンツ・プレースホルダ定義を作成する手順は次のとおりです。
「アセット・タイプ」ドロップダウン・リストから「プレースホルダ定義」を選択します。
新規アセット・タイプの作成ボタンをクリックして、新規プレースホルダ定義を選択します。
「タイトル」と「コンテンツID」の両方にssd-simple-phdと入力して「OK」をクリックします。
「リフレッシュ」ボタンをクリックして、リストを更新します。コンテンツ・サーバーによる新しいアセットの索引付けが完了してリストが表示されるまで数分間掛ることがあります。
ssd-simple-phdアセットを右クリックして「編集」を選択します。
すべての「許可されたアクション」・オプションを選択します。
リージョン定義表で「追加」をクリックします。
ssd-text-rdを選択して「OK」をクリックします。
リージョン・テンプレート表で、「追加」をクリックします。
ssd-simple-rtを選択して「OK」をクリックします。
メイン・メニューで「ファイル」→「すべて保存」を選択します。
「チェックイン」ダイアログで「OK」をクリックします。
サイトにサイドバー・プレースホルダ・マッピングを追加する手順は次のとおりです。
「Webコンテンツ」→「WEB-INF」→「サイト」を開きます。
「SiteStudioDemo.xml」を右クリックして、「開く」を選択します。
「プレースホルダ定義マッピング」ボタンをクリックします。
「プレースホルダ定義マッピング」ダイアログで「追加」をクリックします。
「プレースホルダ定義マッピングの定義」ダイアログで次の操作を実行します。
「名前」にsidebarと入力します。
「プライマリ定義ID」で「検索」をクリックします。
ssd-simple-phdを選択して「OK」をクリックします。
再度「OK」をクリックします。
「プレースホルダ定義マッピング」ダイアログで「OK」をクリックします。
メイン・メニューで「ファイル」→「すべて保存」を選択します。
コントリビューション・モードに入り、サイドバー上のプレースホルダにコンテンツを追加する手順は次のとおりです。
ユーザーのSite Studioプロジェクト(SiteStudioDemo)を開き、「Webコンテンツ」を開きます。
「startSiteStudioDemo.jspx」を右クリックして、「実行」を選択します。
アプリケーションがロードされたら、[Ctrl]と[Shift]と[F5]を同時に押してコントリビューション・モードに入ります。
「設計モードへの切替え」ボタン(右上の角)をクリックします。
サイドバー・プレースホルダで「コンテンツの割当」ボタンをクリックします。
コンテンツの切替えウィザードのコンテンツ・リージョンの選択ステップでssd-text-rdを選択します。
コンテンツ・ファイルの選択ステップで、「新規コントリビュータ・データファイル」オプションを選択します。
「次」をクリックします。
コンテンツのチェックイン・ステップでは、次の操作を実行します。
「コンテンツID」にssd-sidebarcontent-dfと入力します。
「Webサイト」で、SiteStudioDemoがリストされていることを確認します(これは自動的にリストされます)。
「リージョン定義」にssd-text-rdがリストされている(これは自動的にリストされる)ことを確認します。
「終了」をクリックします。
「設計モードへの切替え」ボタン(右上の角)をクリックします。
サイドバー・プレースホルダでリージョン・コンテンツの編集ボタンをクリックします。
テキスト・エディタでIntroductionと入力します。
「保存して閉じる」ボタンをクリックします。
ssd-sidebarlinks-dfプレースホルダで「リージョン・コンテンツの編集」ボタンをクリックします。
リンク・エディタで「行の追加」→「行の編集」をクリックして次のリンクを追加します。
リンク1:
「ラベル」にGoogleと入力します。
「URL」にhttp://www.google.comと入力します。
「行を更新して閉じる」をクリックします。
リンク2:
「ラベル」にYahoo!と入力します。
「URL」にhttp://www.yahoo.comと入力します。
「行を更新して閉じる」をクリックします。
リンク3:
「ラベル」にBingと入力します。
「URL」にhttp://www.bing.comと入力します。
「行を更新して閉じる」をクリックします。
「保存して閉じる」ボタンをクリックします。
[Ctrl]と[Shift]と[F5]を同時に押してコントリビューション・モードを終了します。
この項は、チュートリアル内の前の項に基づいて構成されています。以下は動的変換ページの追加手順です。これは、アプリケーション内でのネイティブ・ドキュメントの使用法を示します。手順を実行する前に、コンテンツ・サーバーのDynamicConverterが有効なこと、また正しく設定されていることを確認してください。
ステップ1: 変換定義の作成
ステップ2: ネイティブ・ドキュメント用ページ・テンプレートの作成
ステップ3: ネイティブ・ドキュメント用新規セクションの作成
ステップ4: ネイティブ・ドキュメント用リージョン定義の作成
ステップ5: ネイティブ・ドキュメント用リージョン・テンプレートの作成
ステップ6: ネイティブ・ドキュメント用プレースホルダ定義の作成
ステップ7: ネイティブ・ドキュメント・ページへのプレースホルダの追加
変換定義を作成する手順は次のとおりです。
「アセット・タイプ」ドロップダウン・リストから「変換定義」を選択します。
新規アセット・タイプの作成ボタンをクリックして新規変換定義を選択します。
「タイトル」と「コンテンツID」の両方にssd-default-cdと入力して「OK」をクリックします。
「リフレッシュ」ボタンをクリックして、リストを更新します。コンテンツ・サーバーによる新しいアセットの索引付けが完了してリストが表示されるまで数分間掛ることがあります。
ssd-default-cdアセットを右クリックして、「編集」を選択します。
エディタに変換定義が表示されたら、「追加」をクリックして定義に動的変換ルールを追加します。
「ネイティブ・ドキュメント変換設定」ダイアログで次の操作を実行します。
「名前」にsimpleと入力します。
「オプション」で「単純なインライン動的変換の使用」を有効にします。
「OK」をクリックします。
メイン・メニューで「ファイル」→「すべて保存」を選択します。
「チェックイン」ダイアログで「OK」をクリックします。
「Webコンテンツ」→「WEB-INF」→「サイト」を開きます。
「SiteStudioDemo.xml」を右クリックして、「開く」を選択します。
Webサイト(SiteStudioDemo)ノードを開きます。
「変換定義」の値をダブルクリックして「変換定義を選択します」ダイアログを表示します。ssd-default-cd変換定義を選択します。
「OK」をクリックします。
メイン・メニューで「ファイル」→「すべて保存」を選択します。
ネイティブ・ドキュメント用ページ・テンプレートを作成する手順は次のとおりです。
Site Studioプロジェクト(SiteStudioDemo)を開きます。
「サイト・ファイル」を開いてから「テンプレート」を開きます。
ページ・ノードを右クリックして「新規」を選択します。
「新規ギャラリ」ダイアログで、「Web層」を開き、「JSP」を選択します。
アイテム・リストで、「JSP」を選択します。
「OK」をクリックします。
「JSPの作成」ダイアログで次の操作を実行します。
「ファイル名」にnative.jspxと入力します。
XMLドキュメントとして作成オプションを有効にします。
「サイト・ファイルの登録」オプションを有効にします。
「アセット・タイプ」には、リストから「ページ・テンプレート」を選択します。
「サイト・ファイルID」にssd-native-ptと入力します。
「説明」にNative Documents Page for the SiteStudioDemo siteと入力します。
「OK」をクリックします。
次の内容を追加してファイルを保存します。
<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
xmlns:wcm="http://www.oracle.com/jsp/wcm">
<jsp:output omit-xml-declaration="true" doctype-root-element="HTML"
doctype-system="http://www.w3.org/TR/html4/loose.dtd"
doctype-public="-//W3C//DTD HTML 4.01 Transitional//EN"/>
<jsp:directive.page contentType="text/html;charset=UTF-8"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>SiteStudioDemo - Demo Blog</title>
<link type="text/css" rel="stylesheet"
href="../wcm/css/template.css"/>
</head>
<body>
<jsp:include page="/wcm/templates/fragments/header.jspf"/>
<div id="container">
<jsp:include page="/wcm/templates/fragments/menu.jspf"/>
<jsp:include page="/wcm/templates/fragments/sidebar.jspf"/>
<!--
Add content below.
-->
<jsp:include page="/wcm/templates/fragments/footer.jspf"/>
</div>
</body>
</html>
</jsp:root>
新規のページ・テンプレートをサイトに関連付ける手順は次のとおりです。
「Webコンテンツ」→「WEB-INF」→「サイト」を開きます。
SiteStudioDemo.xmlを右クリックして「開く」を選択します。
Webサイト(SiteStudioDemo)ノードを開きます。
「ホーム」を右クリックして「新規セクションの追加」を選択します。
「新規セクションの追加」ダイアログで次の操作を実行します。
「ラベル」にAboutと入力します。
「URL」にAboutと入力します。
「OK」をクリックします。
「バージョン情報」セクション・ノードで「セクションをナビゲーションに含める」を選択します。
「バージョン情報」セクション・ノードを右クリックして「プライマリ・ページ・テンプレートの選択」を選択します。
「ページ・テンプレートを選択します」ダイアログでssd-native-ptページ・テンプレートを選択します。
「OK」をクリックします。
メイン・メニューで「ファイル」→「すべて保存」を選択します。
リージョン定義を作成する手順は次のとおりです。
「アセット・タイプ」ドロップダウン・リストから「リージョン定義」を選択します。
「新規作成」ボタンをクリックして新規リージョン定義を選択します。
「タイトル」と「コンテンツID」の両方にssd-native-rdと入力して「OK」をクリックします。
「リフレッシュ」ボタンをクリックして、リストを更新します。コンテンツ・サーバーによる新しいアセットの索引付けが完了してリストが表示されるまで数分間掛ることがあります。
ssd-native-rdを右クリックして「編集」を選択します。
表から要素を選択して「リージョン・コンテンツの切替え」をクリックします。
「リージョン・コンテンツ・オプション」ダイアログで「新規ネイティブ・ドキュメントの作成」オプションを有効にします。
「ドキュメント・タイプ」で「選択」をクリックします。
リストから任意のドキュメント・タイプを選択して「OK」をクリックします。
メイン・メニューで「ファイル」→「すべて保存」を選択します。
ネイティブ・ドキュメント用リージョン・テンプレートを作成する手順は次のとおりです。
Site Studioプロジェクト(SiteStudioDemo)を開きます。
「サイト・ファイル」を開いてから「テンプレート」を開きます。
「リージョン」ノードを右クリックして、「新規」を選択します。
「新規ギャラリ」ダイアログで、「Web層」を開き、「JSP」を選択します。
アイテム・セクションで「JSP」を選択します。
「OK」をクリックします。
「JSPの作成」ダイアログで次の操作を実行します。
「ファイル名」にconversion.jspxと入力します。
XMLドキュメントとして作成オプションを有効にします。
「サイト・ファイルの登録」オプションを有効にします。
「アセット・タイプ」には「リージョン・テンプレート」を選択します。
「サイト・ファイルID」にssd-conversion-rtと入力します。
「説明」にNative File Region Templateと入力します。
「リージョン定義」には「参照」をクリックしてssd-native-rdリージョン定義を選択します。
「OK」をクリックします。
次の内容を追加してファイルを保存します。
<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
xmlns:wcm="http://www.oracle.com/jsp/wcm">
<div id="content">
<wcm:dynamicConversion rule="simple"/>
</div>
</jsp:root>
新規に作成されたリージョン・テンプレートとリージョン定義を使用するプレースホルダ定義を作成する手順は次のとおりです。
「アセット・タイプ」ドロップダウン・リストから「プレースホルダ定義」を選択します。
新規アセット・タイプの作成ボタンをクリックして、新規プレースホルダ定義を選択します。
「タイトル」と「コンテンツID」の両方にssd-native-phdと入力します。
ssd-content-phdアセットを右クリックして「編集」を選択します。
リージョン定義表で「追加」をクリックしてssd-native-rdを選択します。
リージョン・テンプレート表で「追加」をクリックしてssd-conversion-rtと入力します。
すべての「許可されたアクション」・オプションを選択します。
メイン・メニューで「ファイル」→「すべて保存」を選択します。
チェックインしてプレースホルダ定義を閉じます。
native.jspxファイルにプレースホルダを追加する手順は次のとおりです。
コンポーネント・パレットから「Site Studio」を選択します。
下のコンテンツを追加コメントの下のプレースホルダ・タグをドラッグします。
「プレースホルダの挿入」ダイアログで次の操作を実行します。
「名前」にnativeと入力します。
「プレースホルダ定義マッピングへの名前の追加」オプションを選択します。
サイトとしてSiteStudioDemoを選択します。
「OK」をクリックします。
「Webコンテンツ」→「WEB-INF」→「サイト」を開きます。
「SiteStudioDemo.xml」を右クリックして、「開く」を選択します。
「プレースホルダ定義マッピング」ボタンをクリックします。
ネイティブのプレースホルダ定義マッピングを選択して「編集」をクリックします。
「プレースホルダ定義マッピングの編集」ダイアログで次の操作を実行します。
「プライマリ定義ID」で「検索」をクリックします。
ssd-simple-phdを選択して「OK」をクリックします。
再度「OK」をクリックします。
メイン・メニューで「ファイル」→「すべて保存」を選択します。
コントリビューション・モードに入り、ネイティブ・ドキュメント・ページ上のプレースホルダにコンテンツを割り当てる手順は次のとおりです。
ユーザーのSite Studioプロジェクト(SiteStudioDemo)を開き、「Webコンテンツ」を開きます。
startSiteStudioDemo.jspを右クリックして「実行」を選択します。
バージョン情報ページで[Ctrl]tと[Shift]と[F5]を同時に押してコントリビューション・モードに入ります。
ネイティブ・プレースホルダ上の「コンテンツの割当」ボタンをクリックします。
コンテンツの切替えウィザードでssd-native-rdリージョン定義を選択します。
「次」をクリックします。
コンテンツ・ファイルの選択ステップで「既存のローカル・ファイル」オプションを選択します。
「次」をクリックします。
コンテンツのチェックイン・ステップでは、次の操作を実行します。
「タイトル」と「コンテンツID」の両方にssd-about-native-dfと入力します。
プライマリ・ファイルを参照して、それを選択します。
「Webサイト」で、SiteStudioDemoがリストされていることを確認します(これは自動的にリストされます)。
リージョン定義にssd-native-rdがリストされている(自動的にリストされる)ことを確認します。
[Ctrl]と[Shift]と[F5]を同時に押してコントリビューション・モードを終了します。
ドキュメントの内容がバージョン情報ページに表示されます。
この項はスタイル・シートのサンプル・サイトへの追加に関連する情報を提供し、次のトピックについて説明します。
SiteStudioDemoサイトでは、ヘッダー、メニュー、サイドバー、フッター(JSPセグメント)が使用されます。既存のCSSファイルの利用、スタイル・シートの新規作成、またはこの項のサンプル・スタイル・シートのコピーが可能です。
このチュートリアルのコード・サンプルは、template.cssスタイル・シートを参照します。これは単なる例です。スタイル・シートを新規作成する手順は、第4.5.1項「スタイル・シートの新規作成」を参照してください。
このチュートリアルのコード・サンプルは、スタイル・シートの場所としてWebコンテンツ・サブディレクトリ/wcm/cssを参照します。これは単なる例です。このサブディレクトリの作成方法は、第4.5.2項「CSSファイル用サブディレクトリの作成」を参照してください。
グラフィック(オプション)
この項に用意されているサンプル・スタイル・シートはいくつかのJPGおよびGIFファイルを参照します。このチュートリアルに提供されているサンプルのCSSコードを表示する方法は、第4.5.4項「サンプルのCSSドキュメント」を参照してください。SiteStudioDemoサイトにこのスタイル・シートを使用する場合は、独自の画像の作成、参照の編集、参照の削除が可能です。
body.jpg content.jpg header.jpg menu.jpg menu_a.jpg menu_a_hoover.jpg menu_link.jpg sidebar.jpg top.jpg linkroll.gif linkroll_hoover.gif
CSSファイルを新規作成する手順は次のとおりです。
「アプリケーション・ナビゲータ」で、「プロジェクト」パネルを選択します。
Site Studioプロジェクト(SiteStudioDemo)を開きます。
「Webコンテンツ」を右クリックして「新規」を選択します。
「新規ギャラリ」ダイアログで「すべてのアイテム」を選択します。
アイテム・リストから「CSSファイル(HTML)」を選択します。
「OK」をクリックします。
「Cascading Style Sheet」ダイアログで次の操作を実行します。
新しいスタイル・シートの名前を指定します。たとえば、template.cssなど。
このチュートリアル内のサンプル・コードは/wcm/cssWebコンテンツ・サブフォルダ内のtemplate.cssスタイル・シートを参照します。スタイル・シートとディレクトリは両方とも単なる例です。このサブディレクトリの作成方法は、第4.5.2項「CSSファイル用サブディレクトリの作成」を参照してください。
「OK」をクリックします。
Site Studioプロジェクト(SiteStudioDemo)を開きます。
「Webコンテンツ」→「css」を開きます。
「template.css」を右クリックして「開く」を選択します。
エディタでCSSファイルが開いたら、「ソース」タブを選択します。
SiteStudioDemoサイトでは、ヘッダー、メニュー、サイドバー、フッター(JSPセグメント)が使用されます。独自のコードを入力して新しいスタイル・シートを作成するか、このチュートリアルに用意されているサンプルのスタイル・シートをコピーして使用することができます。このチュートリアルに提供されているサンプルのCSSコードを表示する方法は、第4.5.4項「サンプルのCSSドキュメント」を参照してください。
メイン・メニューで「ファイル」→「すべて保存」を選択します。
このチュートリアルのコード・サンプルは、このスタイル・シートの場所としてWebコンテンツ・サブディレクトリ/wcm/cssを参照します。これは単なる例です。
|
注意: サブフォルダを作成するには、フォルダを右クリックして「新規」→「すべてのアイテム」→フォルダ(一般)を選択して「OK」をクリックします。 |
このチュートリアルでCSSファイルの場所として使用されるサブディレクトリを再作成する手順は次のとおりです。
「アプリケーション・ナビゲータ」で、「プロジェクト」パネルを選択します。
Site Studioプロジェクト(SiteStudioDemo)を開きます。
「Webコンテンツ」を右クリックして「新規」を選択します。
「新規ギャラリ」ダイアログで「すべてのアイテム」を選択します。
アイテム・リストからフォルダ(一般)を選択します。
「OK」をクリックします。
「新規フォルダ」ダイアログで次の操作を実行します。
新しいフォルダの名前を指定します。たとえば、wcmなど。
「OK」をクリックします。
「Webコンテンツ」→「wcm」を開きます。
「wcm」を右クリックして、「新規」を選択します。
「新規ギャラリ」ダイアログで「すべてのアイテム」を選択します。
アイテム・リストからフォルダ(一般)を選択します。
「OK」をクリックします。
「新規フォルダ」ダイアログで次の操作を実行します。
新しいサブフォルダの名前を指定します。たとえば、cssなど。
「OK」をクリックします。
メイン・メニューで「ファイル」→「すべて保存」を選択します。
ページ・テンプレートにCSSファイルを追加する手順は次のとおりです。
「アプリケーション・ナビゲータ」で、「プロジェクト」パネルを選択します。
Site Studioプロジェクト(SiteStudioDemo)を開きます。
「サイト・ファイル」を開いて、「テンプレート」→「ページ」を選択します。
home.jspx (ホームページにCSSを追加する場合は)を右クリックして「開く」をクリックします。
メイン・メニューから「表示」を選択してから「コンポーネント・パレット」を選択します。
コンポーネント・パレットでリストからCSSオプションを選択します。
プロジェクトのCSSファイル(例: template.css)を<head>セクションにドラッグします。
メイン・メニューで「ファイル」→「すべて保存」を選択します。
/* CSS Document */
body {
background-color:#fff;
background-image:url(../images/body.jpg);
background-position:top;
background-repeat:repeat-x;
font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:78%;
color:#666;
margin:0;
}
#top {
width:715px;
padding:12px 25px 15px 25px;
background-image:url(../images/top.jpg);
background-position:top;
background-repeat:no-repeat;
color:#fff;
margin:0 auto;
text-align:right;
}
#top a {
padding:0 10px 0 10px;
color:#fff;
border:none;
}
#top a:hover {
text-decoration:none;
}
#top b {
float:left;
font-weight:normal;
}
#top b a {
border-left:1px dotted #ccc;
border-right:none;
border:none;
}
#container {
width:765px;
margin:0 auto;
background-image:url(../images/header.jpg);
background-position:top;
background-repeat:no-repeat;
padding:30px 0 0 0;
}
#menu {
width:706px;
margin:0 auto;
text-align:left;
background-image:url(../images/menu.jpg);
background-position:top;
background-repeat:repeat-x;
}
#menu #nav {
margin:0;
padding:0;
float:left;
}
#nav li {
margin:0;
padding:0;
list-style:none;
float:left;
}
#nav li a {
display:block;
width:100px;
text-align:center;
margin:0 1px 0 0;
background-image:url(../images/menu_link.jpg);
background-position:left;
background-repeat:no-repeat;
color:#ccc;
font-family:Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
text-transform:uppercase;
font-weight:bold;
text-decoration:none;
padding:55px 0 23px 0;
border:none;
}
#nav li a em {
font-style:normal;
text-decoration:underline;
}
#nav li a.last {
margin:0;
}
#nav li a:hover {
background-image:url(../images/menu_link.jpg);
background-position:right;
color:#fff;
}
#nav li a.active {
background-image:url(../images/menu_link.jpg);
background-position:right;
color:#fff;
}
.clear {
clear:both;
}
#sidebar {
width:262px;
float:right;
background-image:url(../images/sidebar.jpg);
background-position:top;
background-repeat:no-repeat;
margin:0 29px 0 0 !important;
margin:0 15px 0 0;
padding:7px 20px 20px 20px;
color:#777;
line-height:18px;
font-size:90%;
word-spacing:-1px;
}
#sidebar h1 {
font-family:Century Gothic, Verdana, Arial, Helvetica, sans-serif;
font-size:20px;
color:#F2C21C;
font-weight:normal;
margin:10px 0 10px 0;
}
#sidebar h1.first {
color:#fff;
margin:10px 0 35px 0;
}
#content {
margin:0 331px 0 20px;
background-image:url(../images/content.jpg);
background-position:top right;
background-repeat:no-repeat;
padding:10px 20px 10px 20px;
}
#content {
line-height:20px;
word-spacing:2px;
overflow: auto;
height: 400px;
}
#content h1, p.ID11A, p.IDDF {
font-family:Trebuchet MS, sans-serif;
font-size:24px;
color:#333;
font-weight:normal;
margin:30px 0 35px 0;
border-bottom:2px solid #F4C833;
padding:0 0 2px 0;
}
p.IDAC{
font-family:Trebuchet MS, sans-serif;
font-size:16px;
color:#333;
font-weight:normal;
margin:20px 0 20px 0;
letter-spacing:-2px;
font-style: italic;
padding:0 0 2px 0;
}
#content h1 a {
color:#333;
text-decoration:none;
border:none;
}
#content h1 a:hover {
color:#666;
}
#content p {
text-indent:15px;
}
#sidebar .linkroll {
margin:10px 0 10px 0;
padding:0;
border-top:1px solid #eee;
}
.linkroll li {
margin:1px;
padding:0 !important;
padding:1px;
list-style:none;
}
.linkroll li a {
padding:2px 2px 2px 18px;
display:block;
margin:0;
color:#777;
text-decoration:none;
border-bottom:1px solid #eee;
background-image:url(../images/document.gif);
background-position:left;
background-repeat:no-repeat;
}
.linkroll li a:hover {
border-bottom:1px solid #ccc;
background-color:#fbfbfb;
color:#444;
}
h2 {
font:120% Verdana;
color:#333;
border-bottom:1px dotted #ccc;
}
blockquote {
margin:0;
padding:5px 15px 5px 15px;
background:#f6f6f6;
}
a {
color:#333;
border-bottom:1px solid #ccc;
text-decoration:none;
}
a:hover {
border-bottom:1px solid #999;
}
#footer {
padding:10px;
border-top:2px solid #f6f6f6;
text-align:center;
margin:20px 0 0 0;
}
