Go to Qiita Advent Calendar Top
LoginSignup
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@nakasato310

マーケットプレイス版Oracle WebCenter Content For OCIのApplinkを使ってカスタムアプリケーションにWCCのフォルダUIを埋め込み表示する

Last updated at Posted at 2025-03-06

はじめに

マーケットプレイス版Oracle WebCenter Content For OCI(以降WCC For OCI)は、Oracle Cloud Infrastructure上のVMベースのソリューションとして提供されます。マーケットプレイス版のOracle WebCenter Contentを使用すると、顧客は数回クリックするだけで環境をプロビジョニング/セットアップでき、クラウド上でコンテンツ・ソリューションを提供できるようになります。

詳細は製品ドキュメントおよび概要紹介資料をご確認ください

製品ドキュメント

概要紹介資料(SpeakerDeck)

この記事で説明すること、しないこと

この記事では、先日リリースされた25.2.1 - February 2025より利用可能になったApplinkを利用し、カスタムアプリケーションにWCCのフォルダUIを連携(埋め込み表示)する方法について説明します

なお、WCC For OCIのプロビジョニング手順の詳細は割愛します。具体的なプロビジョニング手順は、上記の製品ドキュメントやあとの章で紹介するQiita記事を参考にしてください

Applinkとは

image.png

説明

  • ApplinkはREST APIとして提供されます
  • カスタムアプリケーションからこのユーザーがこのアクセス権限でこのフォルダ（もしくはファイル）にアクセスしますとREST APIにリクエストを送信すると、WCCはアクセスに必要な アクセストークン と 埋め込み用URL などを払い出します
  • WCCから払い出された埋め込み用URLとアクセストークンを利用し、カスタムアプリケーションはWCCのフォルダ（もしくはファイル）を自身のUIに埋め込み表示します
  • （WCCのユーザーアカウントを持たない）カスタムアプリケーションのユーザーは、埋め込み表示されたWCCのフォルダ（もしくはファイル）を許可されたアクセス権限で操作することができます
  • 払い出された埋め込み用URLは、ブラウザのアドレスバーに直接入力して使用することはできません。
  • Applinkは本質的に開発者中心の機能であり、カスタムアプリケーション側でのプログラム開発が必要です

関連ドキュメントおよび記事

1. 構築する環境の説明と準備

1.1 説明

今回は以下のような環境を準備します

image.png

1.2 カスタムアプリケーション(Apache)

ローカルPC(ここではMacOS)にApache HTTP Serverを構成し、ブラウザからhttp://localhostでアクセスできるようにします。
私は以下の記事を参考に、MacOSにApacheをローカルのWebサーバとしてセットアップしました

ブラウザでhttp://localhostにアクセスし、いつもの It Works! が表示されればOKです
image.png

1.3 WCC For OCIインスタンス

WCC For OCIの環境を作成し、起動します。以下のQiita記事などを参考にしてください

なお、過去にWCC For OCI環境を作成済で、最新バージョン(25.2.1以上)を利用していない場合は、以下の製品ドキュメントを参考にWCC環境へのパッチ適用を実施してください

ブラウザでWCCのネイティブUIhttps://<ロードバランサのパブリックIPアドレス>:16200/cs/にアクセスし、以下の画面が表示されればOKです
image.png

1.4 カスタムアプリケーションのドメインへの埋込み表示を許可する

WCC For OCIのconfig.cfgにRedwoodUIFrameAncestorsパラメータを追加し、指定ドメイン（今回はhttp://localhost）に対してWCCのUIを埋め込み表示することを許可します

  1. WCC For OCIのネイティブUIにシステム管理者でサインインします

  2. 管理→管理サーバー→一般構成を開きます

  3. 追加の構成変数: にRedwoodUIFrameAncestors=http://localhostパラメータを追加し、保存をクリックします
    image.png

  4. UCMサーバー(UCM_server1)を再起動します

1.5 埋め込み用フォルダを作成する

WCC For OCIのRedwood UIにWebブラウザでアクセスし、埋め込み表示するフォルダを作成します

  1. WCC For OCIのRedwood UIにサインインします
  2. 参照を開き、任意のライブラリ配下にフォルダを作成します（ここではTESTLibraryの下にテストフォルダを作成）
    image.png
    image.png
  3. 作成したフォルダ選択し、プロパティを開きます
    image.png
  4. フォルダIDをメモします
    image.png

2. カスタムアプリケーションの開発

2.1 REST APIの確認

今回は以下のREST APIを利用し、フォルダのApplinkを作成します

PostmanなどのRESTクライアントからこのREST APIを実行し、その動作を確認します

image.png

レスポンスのBodyを確認すると、以下のようなJSONデータを受信します

レスポンスデータ
{
   "dAppLinkID":"LFVODdd9lvUc1NO9gW6kEY24aR5yh...",
   "dAppLinkAccessToken":"RrDcdPJp30-gsTpvaOo8DVhJnK1vufxkkdpK_Fcw...",
   "dAppLinkRefreshToken":"9FaB_48sSWe_ekfQi6OvcV...",
   "dEmbedUrl":"https://<LoadBalancer Public IP>:16200/cs/idcplg?IdcService=REDWOODUI_FOLDER_VIEWER&fFolderGUID=80E6A267BFBFA519665D6F96DD13FC7F&dAppLinkID=LFVODdd9lvUc1NO9gW6kEY24aR5yh...&ActAsAnonymous=1"
}

カスタムアプリケーションはこれらレスポンスデータを利用して、WCCのフォルダUIを埋め込み表示するプログラムを実装します

2.2 カスタムアプリケーションの開発

製品ドキュメントにサンプルコードがありますので、まずはご確認ください

では、実際に開発していきます。Webサーバに配置するHTMLファイルapplink.htmlとJavaScriptファイルapplink.jsを作成します。以下サンプルです

applink.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Applink Sample</title>
</head>

<body>
  <p>Embed WCC Redwood UI using Applink API</p>
  <iframe id="applink_frame" name="applink" src="" width="1024" height="640"></iframe>

  <script src="./applink.js"></script>
</body>
</html>
applink.js
async function callApi() {
	// WCC Access User info
	const username = "weblogic"; // ユーザー名
	const password = "xxxxxxxx"; // パスワード
	const auth = btoa(username + ":" + password); // Base64でエンコード

	// REST API - Create an applink to a Folder
	const base = "https://<Load Balancer Public IP>:16200/documents/wcc/api/v1.1/applinks/.by.folder/";
	const folderid = "<Folder ID>";
	const callurl = new URL(folderid, base);

	try {
		const res = await fetch(callurl, {
			method: "POST",
			headers: {
				"Content-Type": "application/json",
				"Authorization": "Basic " + auth
			},
			body: JSON.stringify({
				"dAssignedUser": "AppUser1",
				"dLinkPrivilege": "RW",
				"dUserLocale": "ja-JP",
				"dUserTimeZone": "Asia/Tokyo"
			})
		})

		const createApplinkResponse = await res.json();

		const wccOrigin = new URL(createApplinkResponse.dEmbedUrl).origin;

		const iframe = document.getElementById('applink_frame');

		window.addEventListener('message', (event) => {
			if (event.origin !== wccOrigin) return; // ensure message is from WCC

			if (event.data?.message === 'appLinkReady') {
				var iframewindow = iframe.contentWindow ? iframe.contentWindow : iframe.contentDocument.defaultView;
				iframewindow.postMessage({
					message: 'setAppLinkTokens',
					dAppLinkID: createApplinkResponse.dAppLinkID,
					dAppLinkAccessToken: createApplinkResponse.dAppLinkAccessToken,
					dAppLinkRefreshToken: createApplinkResponse.dAppLinkRefreshToken,
				}, '*');
			}
		}, false);

		iframe.src = createApplinkResponse.dEmbedUrl;
	} catch {
		console.error(error.message);
	}
};

callApi();

作成したhtmlとjsをWebサーバのドキュメントルートに配置します。今回（MacOS）の場合は、/Library/WebServer/Documents/です

説明
WCCのフォルダにアクセスできるユーザー名とパスワードを指定します

	// WCC Access User info
	const username = "weblogic"; // ユーザー名
	const password = "xxxxxxxx"; // パスワード
	const auth = btoa(username + ":" + password); // Base64でエンコード

<Load Balancer Public IP>は、WCC For OCIインスタンスのロードバランサのパブリックIPアドレスを指定します
<Folder ID>は、準備時にメモしたフォルダIDを指定します

    // REST API - Create an applink to a Folder
	const base = "https://<Load Balancer Public IP>:16200/documents/wcc/api/v1.1/applinks/.by.folder/";
	const folderid = "<Folder ID>";
	const callurl = new URL(folderid, base);

作成するApplinkの定義(条件)を指定します。dAssignedUserのみ必須で、その他はオプションです

  • dAssignedUser: 埋め込みリンクを利用するユーザー名を指定します。埋め込みUIからフォルダやファイルを作成すると、作成者として記録されます
  • dLinkPrivilege: 埋め込みリンクのアクセス権限を指定します。R/RW/RWD/RWDAから選択。デフォルトはR
  • dUserLocale: 埋め込みリンクで表示されるUIのロケール(言語)を指定します。選択するロケールは、事前にWCC側で有効化されている必要があります
  • dUserTimeZone: 埋め込みリンクで表示されるUIのタイムゾーンを指定します
	body: JSON.stringify({
		"dAssignedUser": "AppUser1",
		"dLinkPrivilege": "RW",
		"dUserLocale": "ja-JP",
		"dUserTimeZone": "Asia/Tokyo"
	})

3. 確認

  1. ブラウザを開き、http://localhost/applink.htmlを開きます。WCCのフォルダが埋め込み表示されます
    image.png

  2. フォルダの作成をクリックし、フォルダを作成します（ここではサブフォルダを作成）
    image.png
    image.png

  3. 作成したフォルダ（ここではサブフォルダ）を開きます

  4. アップロードボタンをクリックし、ファイルを1件アップロードします。
    image.png
    image.png
    image.png
    image.png

  5. ファイルを選択すると、RW権限で利用できる表示やダウンロード、チェックインなどの操作ができることを確認します。また、削除のメニューは表示されないこともあわせて確認します
    image.png

  6. WCCのRedwood UIに戻り、テストフォルダを開きます。カスタムアプリケーションの埋め込み用UIから作成したサブフォルダとアップロードしたファイルを確認します
    image.png

  7. ファイルを選択し、プロパティを開きます。Applink作成時にdAssignedUserに指定したAppUser1が、作成者として記録されていることを確認します
    image.png

おわりに

Applink機能をつかって、カスタムアプリケーションにWCCのフォルダUIを埋め込み表示する方法を説明しました。皆さまのお役に立てば幸いです

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?