2. サイトの編集（Oracle Content and Experience のサイト機能を使ってみよう）

Satoshi Nakane-Oracle · Jun 4, 2020 2:59AM

目次に戻る: Oracle Content and Experience のサイト機能を使ってみよう

この文書は OCE のサイト作成機能を利用し、Web サイトのページ構成を編集します。またそれぞれのページで表示するコンテンツを編集します

2. サイトの編集

サイトを編集します。今回は、下記のようなページ構成のサイトを作成します

ホーム
  +--製品資料（製品資料のダウンロードページ：新規作成）
  +--Private Policy（既存ページのまま）

2.1 サイト編集画面の起動

sampleStandardSite を選択し、「開く」をクリックします
サイトの編集画面（Site Builder）が表示されます。「ベース・サイト▼」をクリックし、「新規更新の作成」を選択します
「新規更新の名前の指定」に update と入力し、「OK」をクリックします
「update」に切り替わっていることを確認します。表示側にあるスイッチを「編集」モードに切り替えます
サイトが編集モードに切り替わります。編集側にあるスイッチを「表示」モードに切り替えます。サイトの表示モードに戻ります

サイト編集のプロセスは、次の通りです。

新規更新の作成: ベースサイトのコピーが「更新」として作成されます。「更新」は複数作成できます
サイトの編集: ベースサイトからコピーされた「更新」を編集します
サイトの保存: ベースサイトからコピーされた「更新」の編集内容を保存します（「更新」の上書き保存）
サイトのコミット: ベースサイトからコピーし、編集された更新を、ベースサイトにコピー（上書き保存）します

2.2 サイトのページ構成の編集

サイトを「編集」モードに切り替えます
左サイドバーの「ページ」をクリックします
「Home」が選択されていることを確認し、「ページの追加」をクリックします
以下を入力し、「閉じる」をクリックします
- ページ・タイプ: Webページ
- ページ名: 製品資料
- ページURL: product
- オーバーライド: 選択する
- ページ・レイアウト: index.html を選択
- モバイル・ページ・レイアウト: 「デスクトップと同じ」を選択
「製品資料」ページを、Home ページと Developing Template の間にドラッグ&ドロップで移動します
今回のチュートリアルで利用しないページ（Developing Templates、Detail Page）を削除します。
Developing Template をクリックします
「ゴミ箱」アイコンをクリックします。続けて「OK」をクリックします
同じ手順で、Detail Page ページも削除します
最終的には、以下のページ構成となります。サイト上のナビゲーションメニューもページ構成の通りに表示されます
「保存」をクリックします

2.3 Home ページの編集

Home ページをクリックします

ページ上に「タイトル」コンポーネントと「段落」コンポーネントが配置され、それぞれにサンプルのテキストが入力されています。
サンプルテキストを削除し、適切な文言に変更します。以下は変更例です

タイトル: 社内向け製品情報提供サイトへようこそ！

段落: この社内サイトは、営業部門の皆さまに対して、最新の製品情報を提供します…（以降省略）

タイトルも段落も WYSIWYG エディタで編集でき、文字の装飾やスタイルの変更、URLの挿入、画像や表の挿入などが可能です。それぞれのコンポーネントの利用方法は、下記ドキュメントもあわせてご確認くださいタイトル/Titles: https://docs.oracle.com/en/cloud/paas/content-cloud/creating-experiences/titles.html段落/Paragraphs: https://docs.oracle.com/en/cloud/paas/content-cloud/creating-experiences/paragraphs.html

左サイドバーの「セクション・レイアウト」をクリックします

段落コンポーネントの下にセクション・レイアウトの「2列」を、ドラッグ&ドロップで配置します

セクション・レイアウトは、コンポーネントの配置を自動的に調整します。「2列」以外にも、「3列」「スライダ」「タブ」などのパターンが提供されています。詳細は、下記ドキュメントのSection Layout を合わせてご確認くださいセクション・レイアウト/Section Layout: https://docs.oracle.com/en/cloud/paas/content-cloud/creating-experiences/understand-layouts.html

配置したセクション・レイアウト「2列」の緑色のメニューをクリックし、「設定」をクリックします
「カスタム設定」をクリックします
以下を入力し、「< 戻る」をクリックします
- 最初の列の幅(%): 50
- 2番目の列の幅(%): 50
- レスポンシブ・ブレーク・ポイント: 768
- レスポンシブ動作: 2番目の列を最初の列の下に移動
右上の「 X 」をクリックし、設定画面を閉じます
セクション・レイアウトの「最初の列」にコンポーネントを配置します
1. 左サイドバーの「コンポーネント」→「シード」をクリックします
2. 「イメージ」コンポーネントを、セクション・レイアウトの「最初の列」にドラッグ＆ドロップします
3. 「最初の列」に配置した「イメージ」コンポーネントの下に「タイトル」コンポーネントをドラッグ＆ドロップします。その下に「段落」コンポーネントを、さらにその下に「ボタン」コンポーネント配置します
4. 「イメージ」コンポーネントをクリックします
5. 緑色ののメニューをクリックし、「設定」をクリックします
6. 「選択」をクリックします
7. ドキュメント・フォルダが開きます。フォルダから任意の画像を選択し、「OK」をクリックします
```
フォルダに必要な画像がない場合、この画面上の「アップロード」をクリックし、ローカル環境の画像ファイルをフォルダにアップロードし、それを選択することができます
```
8. 「タイトル」「代替テキスト」「キャプション」に「製品資料のダウンロード」と入力します
9. 右上の「 X 」をクリックし、イメージ設定を閉じます
```
イメージコンポーネントは、画像をページ上に配置する場合に利用します。スタンダードサイトの場合、ドキュメント・フォルダから画像を選択します。下記ドキュメントも合わせてご確認くださいイメージ/Images: https://docs.oracle.com/en/cloud/paas/content-cloud/creating-experiences/images.html
```
10. 「タイトル」コンポーネントをクリックし、「製品資料のダウンロード」と入力します
11. 「段落」コンポーネントをクリックし、任意のテキストを入力します
12. 「ボタン」コンポーネントをクリックし、緑色の「ボタン」のメニューをクリックし、「設定」選択します
13. 「ラベル」と「タイトル」に「製品資料ページへ」と入力します。さらに、「位置合わせ」で「中央」を選択します
14. 「リンク」タブをクリックします
15. 「リンク・タイプの選択」から「サイト・ページ」を選択します。続けて「ページ」より「製品資料」を選択します
16. 右上の「 X 」をクリックし、ボタン設定を閉じます
```
「ボタン」コンポーネントは、サイト・ページのリンクだけでなく、外部 Web サイトへのリンクや、ファイルのダウンロードやプレビューなども指定できます。詳しい利用方法は、下記ドキュメントを合わせてご確認くださいボタン/Button: https://docs.oracle.com/en/cloud/paas/content-cloud/creating-experiences/buttons.html
```
同じ手順を繰り返し、「セクション・レイアウト」の「第2列」に Privacy Policy ページの紹介とリンクを作成します。作成イメージは以下の通りです
「保存」をクリックします。以上で、Home ページの編集は終了です

2.4 製品資料ページの編集

2.4.1 フォルダに製品資料を登録する

左ナビゲーションより「ドキュメント」をクリックします。「作成」をクリックし、「サイト作成チュートリアル」フォルダを作成します
「サイト作成チュートリアル」フォルダの下に、「製品カテゴリA」と「製品カテゴリB」のフォルダを作成します
「製品カテゴリA」と「製品カテゴリB」のフォルダに、Web サイト上に掲載する資料をアップロードします。
ここでは、それぞれのフォルダに、2つのPowerPoint資料をアップロードしてあります

2.4.2 製品ページの編集

サイト編集画面を開き、「製品資料」ページを編集モードで開きます。ページには、ロゴもナビゲーションもありません

ページ上の真ん中に「＋」がある点線の長方形は「スロット」です。サイト作成者は、スロットの領域内にコンポーネントを配置し、ページを編集します。なお、スロットは、テンプレートの開発時に、開発者が定義します

ページの左上の logocontainer スロットに、コンポーネント→シード→「タイトル」コンポーネントを配置します
タイトルコンポーネントに「Starter Template」と入力し、文字の色を白(White)にします
サイトナビゲーションを表示するためのカスタムコンポーネントを配置します。
左サイドバーの「シード」をクリックし、「カスタム」を選択します
ページ右上の navMenu スロットに、「NavMenu」コンポーネントを配置します。
この際、コンポーネントの検索ボックスに nav と入力すると、NavMenu コンポーネントが見つけやすくなります
サイトナビゲーションが表示されます
slot-content スロットに、コンポーネントを配置します
1. 左サイドバーの「カスタム」を「シード」に切り替えます
2. ページ中央の slot-content スロットに「タイトル」コンポーネントを配置し、「製品資料ページ」と入力します
3. 「セクション・レイアウト」より「2列」を、「タイトル」コンポーネントの下に配置します
4. 「2列」のメニュー→「設定」→「カスタム設定」を開き、以下の通りの設定します
  - 最初の列の幅(%): 50
  - 2番目の列の幅(%): 50
  - レスポンシブ・ブレーク・ポイント: 768
  - レスポンシブ動作: 2番目の列を最初の列の下に移動
5. 「2列」の設定メニューを閉じます
6. 「セクション・レイアウト」の「最初の列」に「タイトル」コンポーネントを配置し、「製品カテゴリA」と入力します
7. タイトルコンポーネントの設定メニュー→「設定」→「スタイル」を選択します
8. 「カスタマイズ」を選択し、背景色とフォントの色を、それぞれ以下の通りに変更します
9. 「タイトル」コンポーネントの設定メニューを閉じます。背景色と文字の色が変更されていることを確認します
10. 「最初の列」の「タイトル」コンポーネントの下に「ファイル・リスト」コンポーネントを配置します
```
ファイル・リストコンポーネントは、選択したフォルダに保管されるファイルを一覧表示します。フォルダ・リストコンポーネントと組み合わせて利用することで、複数フォルダに含まれるファイル一覧を表示できます。詳細は、下記ドキュメントをあわせてご確認ください
ファイル・リスト/File Lists: https://docs.oracle.com/en/cloud/paas/content-cloud/creating-experiences/file-lists.html 
フォルダ・リスト/Folder Lists: https://docs.oracle.com/en/cloud/paas/content-cloud/creating-experiences/folder-lists.html 
```
  1. 「ファイル・リスト」の設定メニュー→「設定」→「カスタム設定」をクリックします
  2. 「選択」をクリックします
  3. フォルダの選択画面が表示されます。前の手順で作成した「製品カテゴリA」を選択し、「OK」をクリックします
  4. フォルダ権限の選択で「サイト・ビジターのアクセス：ダウンロード実行者」を選択します
  5. 表示オプションを以下の通りに選択します
  6. 「カスタム設定」を閉じます。続けて、「ファイル・リストの設定」を閉じます
11. 表示モードに切り替えます
12. 「製品カテゴリA」フォルダ内の資料が一覧表示されます。ダウンロード・アイコンをクリックすると、資料がダウンロードされることを確認します
13. 編集モードに切り替えます。
  同じ手順を繰り返し、セクション・レイアウトの「第2列」を編集します。今回は「ファイル・リスト」コンポーネントで「製品カテゴリB」フォルダを選択します
表示モードに切り替えます。それぞれのフォルダに格納された資料のダウンロードできることを確認します
編集内容を「保存」します

2.5 編集内容のコミット

「コミット」をクリックします
確認のダイアログを確認し、「コミット」をクリックします
編集内容がベース・サイトに上書き保存されます
サイト編集画面を閉じます

以上で、この章の作業は終了です