3. 既存のテンプレートからWebサイトの作成

サイト開発者は、次のようなサイトの構築に使用されるフレームワークを定義します。

標準テンプレート：テーマに基づいてサイトのフレームワークとして使用され、サイト(アセット、レイアウト、ページ、およびコンテンツを含む)、関連するテーマ、およびカスタム・コンポーネントが含まれます。
テーマ：色、フォント・サイズ、フォント・タイプ、ページ背景など、サイトの一般的なルック・アンド・フィール(全体スタイル)を定義するために使用され、ロゴ、スタイルシート、複数のページ・レイアウト、およびサイトナビゲーションを定義するコードで構成されます。テーマは、サイト内のページ間に視覚的な統一感を与えます。
カスタム・コンポーネント：特定の種類のコンテンツをサイトページに追加するために使用されます。これにより、任意のページ・テクノロジーを使用して、サイトページ内に埋め込むことができる複合エレメントを開発できます。

このセッションでは、既存のテンプレートからウェブサイトを作成して公開する手順について説明します。また、作成されたウェブサイトと同じチャネルにデジタル・アセットを公開します。

サイト・テンプレートのインポート
サイトの作成
サイトのセキュリティの変更
サイトの公開
デジタル・アセットの公開

3.1 サイト・テンプレートのインポート

Webブラウザを起動し、OCMにログインします。
左側のサイト・ナビゲーションから「開発者」をクリックし、開発者用の画面に切り替えます。「すべてのテンプレートの表示」をクリックします。
右上の「作成」をクリックし、「テンプレート・パッケージのインポート」を選択します。
CafeSupremoSalesEnablement.zipをダウンロードします。
「アップロード」をクリックします。
サイトのテンプレート・ファイル「CafeSupremoSalesEnablement.zip」を選択し、「開く」をクリックします。
アップロードされた「CafeSupremoSalesEnablement.zip」を選択し、「OK」をクリックします。
テンプレートが正常にインポートされたことを確認します。

3.2 サイトの作成

テンプレート「Sales-Enablement」が選択されている状態で、「選択したテンプレートからサイトを作成」アイコンをクリックします。
サイトの作成画面が表示されます。以下の項目を入力し、「次」ボタンをクリックします。
- アセット・リポジトリ：Demo
- ローカリゼーション・ポリシー：自動設定されます
- デフォルト言語: 英語(en-US) （※自動設定されます。変更不可）

3. 「詳細の追加」を以下の通りに入力し、「終了」 をクリックします。

名前：Sales-Enablement
簡易URL値の接頭辞：自動設定されます。
ターゲット・リポジトリのアセット：アセットの複製

4. サイト「Sales-Enablement」が作成されたことを確認します。 Webサイトを作成すると、このWebサイト向けの「公開チャネル」も同じ名前で自動的に作成されます。

3.3 サイトのセキュリティの変更

メッセージ内のサイトのリンクをクリックします。
サイト「Sales-Enablement」を選択し、「プロパティ」 をクリックします。
「埋込み可能なサイト」を有効にします。
「セキュリティ」タブをクリックし、サインインのラジオ・オプションを「いいえ」から「はい」に変更します。「クラウド・ユーザー」を選択し、最後に「保存」ボタンをクリックします。

3.4 サイトの公開

サイト「Sales-Enablement」を選択し、「公開」をクリックします。
公開ダイアログが表示されます。「サイトと、サイトの公開チャネルのターゲット対象になっているすべてのアセットを公開」を選択し、「OK」をクリックします。
サイトで利用されるすべてのアセットに対する公開検証が実行されます。問題がなければ、そのまま「公開」をクリックします。
サイトが公開されたことを確認します。ステータスが公開済に更新されています。
続けて、サイトをオンライン状態にします。「このサイトはオフラインです。オンラインにするにはクリックしてください。」アイコンをクリックします。
「確認して続行」にチェックを入れ、「オンラインにする」をクリックします。
サイトがオンライン状態になります。これで、サイトはインターネット経由でアクセスできるようになります。
サイト「Sales-Enablement」を右クリックし、「表示」を選択します。
これにより、サイトが新しいタブで開きます。サイトURLをコピーします。
https://<インスタンス名>*/site/authsite/Sales-Enablement/

3.5 デジタル・アセットの公開

ナビゲーションから「アセット」に切り替えます。デジタル・アセット「Contract.pdf」を右クリックし、「今すぐ公開」を選択します。
「選択済」を選択します。
チャネル「Sales-Enablement」を選択して「検証」ボタンをクリックします。
公開検証が行われます。問題がなければ、そのまま「公開」ボタンをクリックします。
デジタル・アセットが公開されます。

4. APEXアプリケーションのセットアップ

このセッションでは、サンプルのAPEXアプリケーションCustomer Trackerをインポートし、IAMを使用してシングル・サインオンを構成します。

サンプル・アプリケーションのインポート
APEX SSO用のIAMアプリケーションの作成
APEXアプリのセキュリティ構成
ログイン＆IAM統合の確認

4.1 サンプル・アプリケーションのインポート

Webブラウザを起動し、APEXワークスペースにログインします。
ホームページが表示されます。「アプリケーション・ビルダー」をクリックします。
Customer Tracker APEX アプリケーションをダウンロードします。
「インポート」をクリックします。
ローカルよりアプリケーション・ファイル「Customer-Tracker-APEX-App.zip」を「ドラッグ・アンド・ドロップ」領域にドラッグ&ドロップし、「次 >」をクリックします。
「次 >」をクリックします。
「エクスポート・ファイルからアプリケーションID 100を再利用」を選択し、「アプリケーションのインストール」をクリックします。
（アプリケーションID 100を再利用して、ドキュメント内の他の場所でアプリケーションURLをそのまま参照できるようにします。すでにアプリケーションがあり、「新規アプリケーションIDを自動割当て」を選択します。その場合は、参照先のURLのアプリケーションIDを変更することを忘れないでください）
「次 >」をクリックします。
「次 >」をクリックします。
「インストール」をクリックします。
以下の完了画面が表示されます。「アプリケーションの編集」をクリックします。
アプリケーションのホームページが表示されます。

アプリケーションの実行は、現在のアプリケーションのホームページをApplication Expressエンジンに送信して、表示可能なHTMLをレンダリングします。
サポートするオブジェクトは、サポートするオブジェクト・ページにリンクしています。サポートするオブジェクトを使用して、アプリケーションのインポート時に呼び出されるデータベース・オブジェクト・インストール・スクリプトを定義します。アプリケーションを削除するときにオブジェクトを削除するための削除スクリプトを定義することもできます。
共有コンポーネントは、共有コンポーネント・ページにリンクしています。共有コンポーネントは、アプリケーション内の任意のページに表示または適用できます。
ユーティリティは、ユーティリティページにリンクしています。このページを使用して、開発者のアクティビティを監視し、ダッシュボードを表示し、Advisorを実行し、その他の多数のレポートを表示します。
エクスポート/インポートは、エクスポート/インポート・ウィザードにリンクします。このウィザードを使用して、アプリケーション全体と、カスケード・スタイルシート、画像、静的ファイル、スクリプト・ファイル、テーマ、ワークスペース・ユーザーなどの関連ファイルをインポートおよびエクスポートします。

4.2 APEX SSO用のIAMアプリケーションの作成

Oracle Cloudのダッシューボードにログインします。OCI コンソールのサイド・ナビゲーション・メニューをクリックして「アイデンティティとセキュリティ」を選択し、「ドメイン」をクリックします。
「Default」ドメインをクリックして、詳細ページに移動します。
左側のメニューから「アプリケーション」をクリックし、「アプリケーションの追加」ボタンをクリックします。

4. 「アプリケーションの追加」ウィンドウで、「機密アプリケーション」を選択し、「ワークフローの起動」ボタンをクリックします。

5. 以下の項目を入力し、「次」ボタンをクリックします。

名前：Apex Customer Tracker
説明：APEX Sign in for Customer Tracker App
アプリケーションURL： https://<APEXインスタンス固有の値>.oraclecloudapps.com/ords/f?p=100

注: アプリのインポート時に同じアプリIDを割り当てる場合は、p = 100です。それ以外の場合は、APEXアプリケーションのアプリIDを指定します。

6. 「このアプリケーションをクライアントとして今すぐ構成します」を選択します。「認可」セクションで、「許可される権限付与タイプ」として「認可コード」を選択します。

7. 以下の項目を入力し、「次」ボタンをクリックします。

リダイレクトURL：https://<APEXインスタンス固有の値>.oraclecloudapps.com/ords/apex_authentication.callback
ログアウト後のリダイレクトURL：https://<APEXインスタンス固有の値>.oraclecloudapps.com/ords/f?p=100
ログアウトURL：空白のまま

8. そのまま「終了」ボタンをクリックします。

9. アプリケーションは非アクティブ化された状態に追加されています。「アクティブ化」ボタンをクリックして、アプリケーションをアクティブ化します。

10. 確認ダイアログが表示されます。「アプリケーションのアクティブ化」ボタンをクリックします。

11. 「一般情報」セクションまで下にスクロールして、「クライアントID」と「クライアント・シークレット」をコピーします。

4.3 APEXアプリのセキュリティ構成

トップメニューより「アプリケーション・ビルダー」をクリックします。アプリケーション名「Customer Tracker」をクリックします。
「共有コンポーネント」をクリックします。
「セキュリティ」セクションの「Web資格証明」をクリックします。
「IAM Web Credentials」をクリックします。
Lab4.2（ステップ11）で取得した「クライアントID」と「クライアント・シークレット」を入力します。「URLに対して有効」にLab1.1（ステップ3）で取得したドメインURLを入力し、「変更の適用」ボタンをクリックします。
「共有コンポーネント」アイコン（円と正方形の上に三角形があるアイコン）をクリックして、「共有コンポーネント」に戻ります。
「認証スキーム」をクリックします。
「IAM Authentication Scheme – カレント」をクリックします。
「設定」タブをクリックします。以下の項目を入力します。
- 検出URL：https://<ドメインURL>/.well-known/openid-configuration

10. 「ログアウト後URL」タブをクリックします。以下の項目を入力し、「変更の適用」ボタンをクリックします。

移動先：URLを選択
URL：https://<APEXインスタンス固有の値>.oraclecloudapps.com/ords/f?p=100

4.4 ログイン＆IAM統合の確認

アプリケーション「Customer Tracker」のホームページに戻ります。
「アプリケーションの実行」をクリックします。
アプリケーションが実行されます。Oracle Cloudアカウントでログインして、「Allow」をクリックします。
以下の構成ページが表示されます。
ページの下部にある「Complete Setup」ボタンをクリックします。　
「Customer Tracker」アプリケーションのホームページが表示されます。
左側のサイト・ナビゲーションから「Dashboard」をクリックします。「Customer Tracker」アプリケーションのダッシュボード・ページが表示されます。