Oracle CloudアプリケーションへのWebアプリケーションの埋込み

ページ・コンポーザまたはアプリケーション・コンポーザを使用して、webアプリケーションを埋め込むようにOracle Cloudアプリケーションを編集できます。埋込みwebアプリケーションをOracle Cloudアプリケーションで動作させるには、次のことを確認する必要があります:

Visual BuilderインスタンスはOracle Cloudアプリケーションに関連付けられています。
シングル・サインオン(SSO)が有効です。
webアプリケーションの認証でOracle Cloudアカウントが使用されています。

ノート:

Visual Builderインスタンスの構成方法が不明な場合は、サービス管理者またはプロジェクト所有者に問い合せてください。

特に、ユーザーがこのメッセージを表示できないようにするには、インスタンスの「安全なアプリケーションのみを作成できるようにする」設定の選択を解除する必要があります: Refused to display 'https://idcs-domain.identity.oraclecloud.com/ui/v1/signin' in a frame because it set 'X-Frame-Options' to 'deny'。

ユーザーがOracle Cloudアプリケーションにログインすると、埋込みwebアプリケーションへのアクセス時に認証用のユーザーOracle Cloudアカウントの詳細がアプリケーションによって提供されるため、Webアプリケーションは追加のログインを必要とせずにアプリケーション・ページに表示されます。この認証は、ユーザーが最初に埋込みwebアプリケーションにアクセスしたときにのみ発生し、Webアプリケーションのロードに時間がかかる場合があります。その後のアクセスは高速になります。

webアプリケーションをOracle Cloudアプリケーションに追加するには、次の手順を実行する必要があります:

Visual Builderでwebアプリケーションを準備
webアプリケーションを公開
ページ・コンポーザまたはアプリケーション・コンポーザを使用してwebアプリケーションを埋め込みます。
「Oracle Cloudアプリケーション」で使用するファイルの詳細は、「アプリケーションの構成および拡張」の「ページ・コンポーザの使用とアプリケーション・コンポーザの使用の違い」を参照してください。

Webアプリケーションを埋め込む準備を整える

アプリケーションをOracle Cloudアプリケーションに埋め込む前に、埋込みを許可するようにwebアプリケーション設定を構成し、シェル・ページを変更してアプリケーションのデフォルトのヘッダーおよびフッターを削除します。また、埋め込むアプリケーションのルック・アンド・フィールに一致するアプリケーションのテーマを選択することもできます。

webアプリケーションを埋め込む場合、クラウド・アプリケーションが一部の値をURLのパラメータとしてWebアプリケーションに渡すようにWebアプリケーションを設定することが非常に一般的です。入力パラメータは通常、アプリケーションで定義されたアプリケーション・スコープ変数に割り当てられます。変数には、プロパティ・ペインで設定された「URLを渡す」オプションが必要です。

アプリケーションを埋め込む準備を整えるには:

webアプリケーションの設定エディタで、セキュリティ・タブを開き、「任意のアプリケーション・ドメインへの埋込みを許可」または「指定したドメインへの埋込みを許可」を選択します。

「図usecase-embed-embeddingpanel.pngの説明」
「指定したドメインへの埋込みを許可」を選択した場合は、「Oracle Cloudアプリケーション」インスタンスのドメイン(たとえば、fa-identifier.fa.ocs.oraclecloud.com)を入力します。ドメインのIDCSホスト名も追加してください(例: idcs-identifier.identity.oraclecloud.com)。

図domains-example.pngの説明

埋込みが許可されている複数のドメイン名を追加できますが、通常は1つのIDCSホスト名のみが必要です。
アプリのテーマを変更する場合は、一般タブを開き、一般タブのドロップダウン・リストからテーマを選択します。
ナビゲータで、ルート・ページを開き、コード・エディタでshellページを開きます。
コード内の<header>および<footer>要素を削除します。

「図usecase-embed-shellpage.pngの説明」

シェル・ページには、ページ、メッセージ通知およびコンテンツの<div>要素のみが含まれるようになりました。デザイン・ビューでは、アプリケーションにコア・コンテンツのみが含まれることがわかります。
アプリケーションを埋め込む準備ができたら、パブリックURLでアプリケーションにアクセスできるように、アプリケーションをステージングして公開します。
ブラウザでライブ・アプリケーションを開き、URLでページが正しくレンダリングされることを確認します。
URLをテストするときに、URLでのアプリケーション・パラメータの受渡しが正しく機能することをテストすることもできます。たとえば、URLに変数名と値を含めます(https://vbinstanceurl/.../appname/?VariableName=Value)。
URLをコピーし、使用しているアプリケーション・パラメータをノートにとります。
アプリケーション・コンポーザまたはページ・コンポーザを使用してアプリケーションを埋め込む場合は、URLおよびパラメータを把握する必要があります。

ページ・コンポーザを使用したWebアプリケーションの埋込み

ページ・コンポーザを使用して編集するOracle Cloudアプリケーションの場合、webページ・コンポーネントをページに追加し、アプリケーションのURLとパラメータを指定して、Webアプリケーションを埋め込みます。次のステップは高レベルであり、ページ・コンポーザを使用したページへのwebアプリケーションの埋込みに役立つようにここで説明します。詳細は、「アプリケーションの構成および拡張」の「ページ・コンポーザを使用するためのガイドライン」を参照してください。

ページ・コンポーザを使用してアプリケーションを埋め込むには:

アプリケーションを埋め込むOracle Cloudアプリケーションにログインします。
まだ開いていない場合は、ページ・コンポーザを有効にしてサンドボックスを開きます。
Oracle Cloudアプリケーションで、webアプリケーション・コンテンツを埋め込むページに移動します。
ツール・メニューを開き、「ページ・コンポーザ」を選択します。

「図usecase-embed-openpagecomposer.pngの説明」

ページ・コンポーザを使用して編集するように構成されたサンドボックスで作業している場合は、ページ・コンポーザがメニューに表示されます。

アプリケーション・コンポーザを使用している場合、次のトピックを参照してください。
ソース・ビューで、セレクタ・パネルを開き、アプリケーションを埋め込むページ内の領域を選択します。ポップアップ・メニューの「編集」をクリックして、編集モードに入ります。
セレクタ・パネルで領域が選択されていることを確認してから、パネル・ツールバーで「追加」 (+)をクリックし、「コンテンツの追加」ダイアログでWebページ・コンポーネントを追加します。「閉じる」をクリックします。

「図usecase-embed-addwebpage.pngの説明」

これで、この領域にはWebページ・コンポーネントが含まれます。
セレクタで、新しいWebページ・コンポーネントを右クリックし、ポップアップ・メニューで「編集」を選択してコンポーネント・プロパティを開きます: 「Webページ」ダイアログ・ボックス。
新しいコンポーネントの名前と説明を追加します。
ソース・フィールドで、ドロップダウン・リストを開き、「式ビルダー」を選択します。
URLの一部として変数をwebアプリケーションに渡す場合は、式エディタを使用してURLを作成する必要があります。
変数を渡さない場合は、webアプリケーションのURLをソース・フィールドに貼り付けることができます。
「式エディタ」ダイアログで、「値の選択」を選択し、ドロップダウン・リストで「バインディング・パラメータ」を選択します。
使用するバインディング・パラメータをドロップダウン・リストから選択します。
「値または式を入力」を選択し、テキスト領域で式を編集してwebアプリケーションのURLを定義します。

テキスト領域には、選択したバインディング・パラメータに基づいて生成された式フラグメント(<generated-expression>)が含まれます。これは、#{bindings.DisplayName.inputValue}のようになります。これは、webアプリケーションに渡される値です。

「図usecase-embed-expression-editor.pngの説明」
テキスト領域内のこの式へのwebアプリケーションのURLを「前置」します。

式はhttps://vbinstanceurl/.../appname/?VariableName=<generated-expression>のようになります。 URLを貼り付ける場合は、生成された式の前に?VariableName=が含まれていることを確認してください。ここで、VariableNameはwebアプリケーションがURLで想定している名前です(たとえば、"OwnerName")。
OKをクリックして「式エディタ」ダイアログを閉じ、OKをクリックして「コンポーネント・プロパティ」ダイアログ・ボックスを閉じます。
「完了」をクリックして、ページ・コンポーザの編集セッションを終了します。
webページを追加した後、サンドボックスを公開します。

編集セッションを閉じると、webアプリケーション・コンテンツがOracle Cloudアプリケーションのページの領域に表示されます。アプリケーションはページに埋め込まれており、webアプリケーションを含むOracle Cloudアプリケーションページを離れることなく、Webアプリケーション内のページに移動できます。 webアプリケーションを使用して、Webアプリケーション・データをページに表示できます。たとえば、Webアプリケーションでレンダリングされたグラフを表示できます。

アプリケーション・コンポーザを使用したWebアプリケーションの埋込み

アプリケーション・コンポーザを使用して編集するOracle Cloudアプリケーションの場合は、「マッシュアップ」をアプリケーション(タブやページなど)に追加してwebアプリケーションを埋め込みます。次のステップは高レベルであり、アプリケーション・コンポーザを使用してwebアプリケーションをページに埋め込む際に役立ちます。 webアプリケーションを埋め込む方法の詳細は、「アプリケーション・コンポーザを使用したアプリケーションの構成」の「マッシュアップの概要」の項を参照してください。

アプリケーション・コンポーザを使用してwebアプリケーションを埋め込むには:

アプリケーションを埋め込むOracle Cloudアプリケーションにログインします。
アプリケーション・コンポーザが有効になっているサンドボックスを開き(まだ開いていない場合)、アプリケーション・コンポーザを開きます。
webアプリケーションの「パラメータ・ベースのマッシュアップ」を作成します。

webアプリケーションに入力パラメータを渡す場合は、マッシュアップの作成時にパラメータの名前を定義する必要があります。たとえば、webアプリケーションでaccountid (https://vbinstanceurl/.../appname/?accountid=SomeValue)という名前の入力変数を使用している場合、accountidをマッシュアップに追加します。

パラメータ・ベースのマッシュアップの作成の詳細は、「アプリケーション・コンポーザを使用したアプリケーションの構成」の「Webアプリケーションの登録」を参照してください。

「図usecase-embed-appcomposer-register.pngの説明」
アプリケーション・コンポーザで、webアプリケーションを埋め込むアプリケーション・ページ(詳細ページなど)を見つけます。

マッシュアップでパラメータを指定した場合は、そのパラメータをアプリケーションのフィールドにマップする必要があります。たとえば、「レジストリID」値をwebアプリケーションの入力パラメータとして使用する場合は、マッシュアップで定義したaccountidパラメータに「レジストリID」フィールドをマップします。ページへのマッシュアップの追加の詳細は、「アプリケーション・コンポーザを使用したアプリケーションの構成」での「アプリケーション・ページへの登録済Webアプリケーションの埋込み」を参照してください。

「図usecase-embed-appcomposer-mashup.pngの説明」
マッシュアップをアプリケーションに追加した後、サンドボックスを公開します。