Oracle Content Management (OCM)- APEXと統合したWebサイトを作成してみよう！ その3

# 目次

* はじめに
* 1：OCMとAPEXを統合するためのIAMアプリのセットアップ
* 2：コンテンツ・リポジトリのセットアップ
* 3：既存のテンプレートからWebサイトの作成
* 4：APEXアプリケーションのセットアップ
* [5：OCMとAPEXの統合](#5-ocmとapexの統合)
* [6：まとめ](#6-まとめ)

# ５. OCMとAPEXの統合

これで、Oracle Content ManagementとOracle APEXアプリケーションの両方が実行されました。このセッションでは、2つのシステム間の統合を体験します。 統合には2つのモードがあります。1つはREST APIを使用する方法で、もう1つはAPEX内にOCMインターフェイスを埋め込む方法です。

* OCM REST API Webクレデンシャルの構成
* APEXアプリ内の埋め込みコンテンツURLの変更
* クロス・オリジン・リソース・シェアリング（CORS）の許可
* OCM埋め込みの許可
* 動作確認


## 5.1 OCM REST API Webクレデンシャルの構成<a id="1"></a>

1. トップメニューより「**アプリケーション・ビルダー**」をクリックします。アプリケーション名「**Customer Tracker**」をクリックします。   
![7_task1_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/7886caba-2d0a-ee45-3c56-0e416f3df237.png)

2. 「**共有コンポーネント**」 をクリックします。    
![7_task1_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/23aee457-d382-f598-6ffb-2c73610596e0.png)
  
3. 「データ・ソース」セクションの「**RESTデータ・ソース**」をクリックします。  
![7_task1_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/463dda23-5238-1b89-74ef-8e7be6143363.png)

   
4. RESTデータ・ソース「**ContractDS**」をクリックします。  
![7_task1_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/e4ccaa26-e1ac-9f55-227d-39e1c8040185.png)

5. 「リモート・サーバー」の右にある「**鉛筆アイコン**」をクリックします。  
![7_task1_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/43bc4230-bdeb-4857-d7c3-3cad5bd85944.png)

6. 以下の項目を入力し、「**変更の適用**」ボタンをクリックします。  

   - エンドポイントURL：`OCMインスタンスURL`   

![7_task1_06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/fdc35726-3969-495a-0352-d5436725f095.png)
7. 「**認証**」タブをクリックします。   
![7_task1_07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/da5327ab-6101-c0ae-ff18-735666fdf67a.png)
8. 「資格証明」の右にある「**鉛筆アイコン**」をクリックします。   
![7_task1_08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/19be9957-eabc-d699-3071-56b47671d2fb.png)
9. 以下の項目を入力し、「**変更の適用**」ボタンをクリックします。  

   - OAuthスコープ：Lab1.1（ステップ10）で取得した**スコープURL**

   - クライアントIDまたはユーザー名：Lab1.1（ステップ14）で取得した**クライアントID**

   - クライアント・シークレットまたはパスワード：Lab1.1（ステップ14）で取得した**クライアント・シークレット**

   - クライアント・シークレットまたはパスワードの確認：Lab1.1（ステップ14）で取得した**クライアント・シークレット**

   - URLに対して有効：**OCMインスタンスURL**とLab1.1（ステップ3）で取得した**ドメインURL**  

 ![7_task1_09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/c09b39c1-6c5e-5373-8f3a-37d2fe1f968f.png)
10. 「認証サーバー」の右にある「**鉛筆アイコン**」をクリックします。   
![7_task1_10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/a7397c4d-4e83-669f-4ece-75fc948269db.png)
11. 以下の項目を入力し、「**変更の適用**」ボタンをクリックします。  

   - エンドポイントURL：Lab1.1（ステップ3）で取得した**ドメインURL** 
  
   - HTTPSホスト名：**ドメインURL**を再度入力しますが、プレフィックス**http://またはhttps://を付けない**でください  

![7_task1_11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/83052597-aa4b-4cca-33e5-423b0f853183.png)
12. ベースURLが変更されたことを確認します。   
![7_task1_12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/bb8ff8eb-badd-2795-10b2-d713a121ca23.png)




## 5.2 APEXアプリ内の埋め込みコンテンツURLの変更<a id="2"></a>

1. トップメニューより「**アプリケーション・ビルダー**」をクリックします。アプリケーション名「**Customer Tracker**」をクリックします。  
![7_task2_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/4e9e2ebc-f922-8292-64db-0c68f83f1ae8.png)
   
2. 検索ボックスに「**50**」を入力し、「**実行**」ボタンをクリックします。  
![7_task2_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/f1d10f38-0da7-dce1-08fb-f220f585ecc4.png)
   
3. ページ「**50 - Customer** 」をクリックします。  
![7_task2_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/0e7be1fa-3878-5b42-6ede-1b1de16c145b.png)
   
4. 「**ページ検索**」タブをクリックします。 検索ボックスで「**Resource**」を検索し、 検索結果「**リージョン->Resources->識別->タイトル**」をクリックします。
![7_task2_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/362461b2-665b-7282-9bc3-8acf9ca6155e.png)

5. 「ソース」→「HTMLコード」で強調表示されているURLを、Lab3.4（ステップ9）で取得したサイトのURLに置き換えます。「**&P50_IND.**」は、CustomerのIndustryを示す変数です。今回は固定値「**cafe**」に変更して、 「**保存**」ボタンをクリックします。
![7_task2_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/649e7cd8-f71d-e700-881c-76609f72b19b.png)

![7_task2_05_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/3671de15-2d08-a994-2a1f-aadfbc1d86d4.png)
6.  検索ボックスで「**oraclecloud**」を検索し、 検索結果「**列->NAME->リンク->ターゲット**」をクリックして、「**ターゲット**」をクリックします。
![7_task2_07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/10e4aefe-cdef-805d-9f3a-783ae5e4aa00.png)
7. URLのOCMドメイン名を置き換え、「**OK**」をクリックします。  
![7_task2_08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/5e252ebf-971c-bc6a-bdc0-13451d1c7b1b.png)
8. 「**保存**」ボタンをクリックします。  
![7_task2_09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/c8724cc6-c2ef-3cc1-9150-fb014cc6dede.png)


## 5.3 クロス・オリジン・リソース・シェアリング（CORS）の許可<a id="3"></a>


1. Oracle Cloudのダッシューボードにログインして、「**Default**」ドメインの左側のメニューから「**設定**」をクリックします。
![7_task3_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/80919fc1-e6e6-ec18-8889-7243e70fe1c4.png)
    
2. 「**セッション設定** 」をクリックします。  
![7_task3_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/8ec82e0c-e38a-796c-44ac-ef577e6e1ad6.png)
   
3. 「**データ共有設定**」まで下にスクロールし、以下の項目を入力し、「**変更の保存**」ボタンをクリックします。  

   - Cross-Origin Resource Sharing ( CORS )の許可：チェックを入れる  

   - 許可されたCORSドメイン名：APEXインスタンスのドメイン名（例：`https://<APEXインスタンス固有の値>.oraclecloudapps.com`）

![7_task3_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/62ed7d35-e71d-3d71-1ef4-4e4664032321.png)






## 5.4 OCM埋め込みの許可<a id="4"></a>

1. OCMにログインして、 左側のサイト・ナビゲーションから「**システム**」をクリックし、システムの管理画面に切り替えます。 プルダウンリストは自動的に「一般」と選択されます。「**一般▼**」をクリックし、「**セキュリティ**」を選択します。  
![7_task4_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/7eaab3b6-5758-e277-9720-220f7804f2b6.png)

2. 以下の項目を入力し、「**保存**」ボタンをクリックします。  

   - 他のドメイン内のOracle Content Managementの埋込みコンテンツを表示できます：有効  

   - 許可されるドメイン：APEXインスタンスのドメイン名（例：`https://<APEXインスタンス固有の値>.oraclecloudapps.com`）  

![7_task4_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/463d1b0c-643b-5999-be7c-c579534d3c82.png)

  



## 5.5 動作確認<a id="5"></a>

1. アプリケーション「**Customer Tracker**」 のホームページを開きます。ページ「**1 -Dashboard** 」をクリックします。       
![7_task5_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/199f170a-6b9d-f298-d1a3-f93dad66e28e.png)
    
2. 「**実行**」ボタンをクリックします。  
![7_task5_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/7671861d-03cf-724d-51e2-10a93e7c0d6f.png)
    
3. Dashboardページが実行されます。  「**ホームページ**」のアイコンをクリックします。
![7_task5_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/9d102d25-e0d3-8681-a72e-d48bc748991b.png)
4. アプリケーション「**Customer Tracker**」のホームページが表示されます。「**Cyphria**」をクリックします。  
![7_task5_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/ec790b18-8930-3107-e36f-e1bf33e4e637.png)
   
5. 「**Contracts**」タブをクリックします。
![7_task5_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/4f2f1163-2b65-2cd1-590f-fa9be3f9baaa.png)
   
6. REST APIでOCMから取得したデジタル・アセット「**Contracts**」が表示されていることを確認します 。ドキュメント名をクリックすると、ブラウザ内でドキュメントをプレビューできます。
![7_task5_06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/483ea822-8410-b1ee-5b52-850568dcba26.png)
   
7. 「**Resources**」タブをクリックします 。OCMサイトのコンテンツが埋め込みコンテンツとして表示されます。
![7_task5_07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/1733b53c-3478-e60d-3736-c4d782a79255.png)

**以上で、OCMとAPEXの統合チュートリアルは終了となります**

# 6. まとめ
さて、いかがだったでしょうか。
OCMには他にも色んな機能がありますので是非こちらのサイトもご覧ください。
[商品の詳細サイト](https://www.oracle.com/jp/cloud/paas/dx/overview/)