[Oracle Cloud] Oracle Content Management のフォルダUIを、他のアプリケーションに埋め込み表示する方法

# はじめに
Oracle Content Management (以降OCM)は、APIファーストなアーキテクチャで、マルチチャネルでのコンテンツ配信を実現するインテリジェントなコンテンツ管理プラットフォームです。

この記事では、OCMのフォルダに保管される資料一式を、他のWebアプリケーションに埋め込み表示する方法について紹介します。

:::note info
この記事は、2022年4月末時点での最新バージョン(22.4.3)を元に作成されてます
:::

:::note info
2021年6月リリースのバージョン21.6.1より、サービス名称が Oracle Content and Experience(略称:OCE) から **Oracle Content Management** (略称: **OCM** ) に変更されました。
:::

# 1. 事前準備
## 1.1 利用環境
準備する環境は以下の通りです

+ Webブラウザ
+ Webサーバ（今回はMacOSでApacheを起動し、ローカルのWebサーバとして利用）
+ OCMインスタンス

## 1.2 Webサーバのセットアップと起動
今回はMacOSのApacheを利用しますが、Webブラウザで```http://<ホスト名orIPアドレス>/xxx.html```などのURLが表示できれば、なんでもOKです。
私は、以下の記事を参考に、MacOSにApacheをローカルのWebサーバとしてセットアップ&起動しました

+ [Macでローカルサーバを立ち上げる方法](https://qiita.com/shuntaro_tamura/items/bdabcb77926dc92617b1)


## 1.3 OCMインスタンスの作成
Oracle Cloud Infrastructure(OCI)の管理コンソールを利用し、OCMインスタンスを作成します。以下のチュートリアルを参考に作成します

+ [Oracle Content Management インスタンスを作成する](https://oracle-japan.github.io/ocitutorials/content-management/create_oce_instance/)

なお、OCMインスタンスは、**Oracle Cloudの$300無料クレジット付きの30日間無料トライアル環境**で作成できます。もしOracle Cloudの環境をお持ちでない場合は、これを機に取得してみてはいかがでしょう？

+ [Oracle Cloud Free Tier](https://www.oracle.com/jp/cloud/free/)


## 1.4 埋め込み表示用フォルダの作成
OCMインスタンスにサインインし、埋め込み表示で利用するフォルダを作成します。また、作成したフォルダのID(GUID)をメモします
`フォルダのIDは、フォルダのUIを埋め込み表示の設定で利用します`

1. OCMインスタンスにサインインします。URLの形式は以下の通りです
*`https://myocedev-mytenancy.cec.ocp.oraclecloud.com/documents/home`*

1. 左ナビゲーションメニューの**ドキュメント**をクリックします

1. 画面右上部の**作成**をクリックします
![emb001.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/0100ce9a-0173-ff19-791d-346fabcce6db.jpeg)

1. _「名前」_ に **埋め込み用フォルダ** と入力し、**作成** をクリックします
![emb010.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/0d3f4d65-eacc-800f-3b4c-5a81e73d5237.jpeg)

1.  前の手順で作成した**埋め込み用フォルダ**を開き、いくつかのファイルをアップロードします

1.  フォルダを表示しているURLから、**フォルダのGUID**をメモします。フォルダのGUIDは、_`https://myocedev-mytenancy.cec.ocp.oraclecloud.com/documents/folder/Fxxxxxxxxx/_埋め込み用フォルダ/updated`_ の ***`Fxxxxxxxxx`*** です（スクリーンショットの赤線部分です）
![emb002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/722e30a3-98f6-5ed5-f99c-01b50b9d36c6.png)


## 1.5 OCMインスタンスの埋込み表示設定を有効化する
OCMの初期設定では、埋め込み表示は「無効化」に設定されてます。ここでは、システム設定より埋め込み表示を有効化します。さらに、埋込み表示を許可するドメインに「localhost」を追加します

1. 左ナビゲーションメニューの **ADMINISTRATION:システム** をクリックします

1. *「システム」* の右隣のプルダウンメニューより、**セキュリティ**を選択します

1. *「他のドメイン内のOracle Content Managementの埋込みコンテンツを表示できます:」* で **有効**を選択します

1. *「許可されるドメイン:」* に **http://localhost** を追加し、**保存** します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/6d027e35-f1a3-4408-a2c6-dd8aac59b7fc.png)

:::note warn
2022年4月リリースの 22.4.3 より、OCM の Embed UI API V2 は、Content Security Policy の frame-ancestors ディレクティブを利用して、クリックジャッキング攻撃に対する保護を強化するようになりました。そのため、*「許可されるドメイン:」* には ***http(s)://ホスト名*** （この場合は http://localhost ） を登録します
:::



# 2. OCMのフォルダを埋め込み表示するHTMLファイルを作成する
ローカルサーバ（今回の場合はApache）で表示するHTMLファイルを作成し、Apacheのドキュメントルートに配置します

## 2.1 説明
OCMは、iframe要素の作成を簡素化し、フレームで実行されているコードとの通信を管理するためのJavaScript API(Embed UI API V2)を提供します。詳細は以下のドキュメントをご確認ください

 + [Learn about the Embed UI API V2](https://docs.oracle.com/en/cloud/paas/content-cloud/solutions/learn-embed-ui-api-v2.html#GUID-E2D42071-F227-4E1F-AF8F-B80F03136629) 

今回は、指定したフォルダを埋め込み表示する **documentsView** コンポーネントを利用します。その他にも以下のコンポーネントが提供されています。

| コンポーネント | 概要説明 |
|:--|:--|
| assetView | 指定したリポジトリのアセット一覧を埋め込み表示 |
| assetViewer | 指定したアセットを埋め込み表示 |
| contentItemEditor | 指定したコンテンツ・アイテムの編集UIを埋め込み表示 |
| contentItemCreate | 指定したコンテンツ・アイテムの作成UIを埋め込み表示 |
| documentsView | 指定したフォルダを埋め込み表示 |
| documentViewer | 指定したドキュメントを埋め込み表示 |
| conversationsList | 指定した会話一覧を埋め込み表示 |
| conversationView | 指定した会話を埋め込み表示 |

それぞれのコンポーネントについては、以下リファレンスをご確認ください

- [Embed UI API V2 Reference](https://docs.oracle.com/en/cloud/paas/content-cloud/solutions/embed-ui-api-v2-reference.html#GUID-ABE9C14D-72CA-4F83-8654-F2A19767A148)


## 2.2 HTMLファイルの作成
Webサーバに配置するHTMLファイルを作成します。エディタを起動し、以下のコードをコピー&ペーストします

~~~html:test.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>OCM Embed UI</title>
  <script type="text/javascript" src="https://static.ocecdn.oraclecloud.com/cdn/cec/api/oracle-ce-ui-2.10.js"></script>
  <style>
  #oce-frame-1 {
    border: solid 2px black;
    width: 800px;
    height: 600px;
  }
  </style>
</head>
<body>
  <h1>Oracle Content Management - Embed Web UI v2 サンプル</h1>
  <p>この下にOCMのフォルダUIを表示します</p>

</body>

<script type="text/javascript">
  OracleCEUI.oceUrl = "https://<OCMInstance>-<CloudAccount>.cec.ocp.oraclecloud.com"

  var options = {
      documentsView: {
        id: '<埋め込み表示用フォルダのGUID>'
      }
    }

  var fe = OracleCEUI.documentsView.createFrame(options);
  document.body.appendChild(fe);
</script>
</html>
~~~

## 2.3 HTMLファイルの説明と編集

OCMの埋込み表示用APIは、シンプルなJavaScriptファイル`oracle-ce-ui-2.10.js`を介してアクセスします。JavaScriptファイルは、`<script>`タグを利用し、オラクルのコンテンツ配信ネットワーク(CDN)より取得します

~~~js
  <script type="text/javascript" src="https://static.ocecdn.oraclecloud.com/cdn/cec/api/oracle-ce-ui-2.10.js"></script>
~~~



次に、`OracleCEUI.oceUrl="https://..."`で指定する**OCMインスタンスのURL**を、利用中のものに書き換えます。以下は書き換え例です

~~~js
  OracleCEUI.oceUrl = "https://myocedev-mytenancy.cec.ocp.oraclecloud.com"
~~~

続けて、`id: 'xxxx'`で指定するフォルダのGUIDを、埋め込み表示用に作成した**フォルダのGUID**に書き換えます。以下は書き換え例です

~~~js
  var options = {
      documentsView: {
        id: 'F626526AA0D6EF29B5696AB739306AAC50E02C94D3C8'
      }
    }
~~~

ファイル名を **test.html** として保存します。

Webサーバのドキュメントルートに**test.html**を配置します。MacOSの場合は、`/Library/WebServer/Documents/`です
![emb004.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/40bf02e8-137f-4346-d777-7dda278b68a8.jpeg)

# 3. 動作確認
1. Webブラウザで `http://localhost/test.html` を開きます

2. （OCMにサインインしていないWebブラウザを利用した場合は）ポップアップウィンドウが開き、OCMへのサインイン画面が表示されます。OCMにサインインします
`ポップアップ・ウィンドウがブロックされている場合は、一時的に許可してください`

3. OCMへのサインインが完了すると、OCMのフォルダが埋め込み表示されたtest.htmlが表示されます
![embed10y.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/08ed6bee-4252-1a41-4b0f-0cc2debf90e8.png)
![embed10x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/cc863a5a-4eca-25e8-715c-807dfa51ef8b.png)



# 4. 埋め込み表示オプションを構成する
前の手順で作成した埋め込み表示フォルダは、新規ファイルのアップロード、フォルダ内のファイルの表示やダウンロードができません。これらの操作を可能にするには、`options` オブジェクトを構成します

## 4.1 ファイルのプレビュー、ダウンロード、新規ファイルのアップロードを有効にする

エディタで**test.html**を開き、`options`オブジェクトを以下の通りに変更し、保存します

~~~javascript
  var options = {
      documentsView: {
          "header": {
              "upload": true    //アップロードメニューを有効化
          },
          "actions": {
              "open": {
                  "file": true  //ファイルの表示を有効化
              },
              "download": true  //ファイルのダウンロードを有効化
          },
          id: 'F626526AA0D6EF29B5696AB739306AAC50E02C94D3C8'
      }
    }
~~~

Webブラウザで`http://localhost/test.html`を表示します
![embed10y.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/e84b579e-d9b0-64de-19a0-cf5300a736e3.png)


+ 説明
  + 右上に「アップロード」メニューが表示されます。また、ドラッグ&ドロップでのファイルアップロードができるようになります
  + ファイルを選択すると「プレビュー」「ダウンロード」アイコンが表示されます。また、ファイルの右クリックメニューにも「Webプレビュー」「ダウンロード」が表示されます。


## 4.2 UIコンフィギュレータの紹介
**UIコンフィギュレータ**は、埋め込み表示オプションの定義を支援する機能です。UIコンフィギュレータは、**開発者→埋込み可能なUI→UIコンフィギュレータ**より利用できます。

OCMの画面上で埋め込み表示オプションを設定し、他のWebアプリケーションに含めるコードをコピーして貼り付けることができます。

スクリーンショットの右パネル「Options」で有効化するメニューを設定し、「Source」でコードを取得します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/73740e6f-33b8-c9a3-5ac5-d6de8da6c043.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/bf864058-7ac2-028d-6c10-b0e48b932312.png)



UIコンフィギュレータの使い方は、こちらのマニュアルを参考にしてください

+ [Use the UI Configurator to Set Up Your Embedded UI](https://docs.oracle.com/en/cloud/paas/content-cloud/solutions/use-ui-configurator-set-your-embedded-ui.html)



以上でこのチュートリアルは終了です。ありがとうございました