Skip to main content

Constellation Web埋め込み

Constellationでは、Web埋め込みは、フロントエンドのフレームワークに関係なく、Constellationの特定のランディングページとケースエクスペリエンスを既存のWebアセットに組み込むのに役立ちます。Pega Platform™ UIのパーツをビジネスニーズに合わせて選択し、Web埋め込みチャネルを作成し、自動生成されたマークアップを任意のwebページに挿入することで、他のWebサイトのユーザーが利用できるようにすることができます。

App StudioのChannel タブのオプションを使用して、新しいWeb埋め込みを作成できます。Web埋め込みは、HTML5 Webコンポーネントに依存しています。Web埋め込み設定を完了したら、Web埋め込みHTMLスニペットを生成できます。次に、コードスニペットを外部Webアプリケーションの静的WebページまたはWebビューに貼り付けて、アプリケーションを表示します。

補足: App Studioで新しいWeb埋め込みを作成する方法の詳細については、「Web埋め込みの作成」を参照してください。

次の図は、PegaアプリケーションポータルのConstellationビューを示しています。

A Create Loan Application View in Pega's native Portal.

次の図は前のConstellationビューを示していますが、PegaのWeb埋め込み機能を使用して、Pega以外のWebサイトに組み込んでいます。

Example of a Web embed in a Loan Application website

Web埋め込み機能

Web埋め込みチャネルページで生成したWeb埋め込みスニペットは、すぐに使用できます。ただし、ビジネスケースでウェブ埋め込みを、より複雑な方法で動作させる必要がある場合は、スニペットを手動で編集し、展開して、サポートされている追加の属性を使用できます。

同様に、サポートされているメソッドの1つを呼び出すJavaScriptコードを追加し、サポートされている特定のイベントを監視して反応するイベントハンドラーを追加できます。このアプローチは、Web埋め込みをニーズに適合させるのに役立ちます。

補足: JavaScriptコードの使用の詳細については、「Web埋め込みスニペットのカスタムコード」および「Web埋め込みのJavaScriptメソッド」を参照してください。

Pega Platformは、同じページの複数のWeb埋め込みをサポートしています。同じページに複数のWeb埋め込みをデプロイする場合、ページ上の最初の埋め込みでは、HTML5 Webコンポーネントが使用されますが、追加のWeb埋め込みごとに、<iframe>コンテナにラップするcontainer属性を使用する必要があります。さらに、複数のWeb埋め込みを使用するには、すべてのクライアント側UI生成ロジックを他の埋め込みから分離する必要があります。

補足: 同じページに複数のWeb埋め込みをデプロイする方法の詳細については、「同じページ上の複数のウェブ埋め込み」および「Web埋め込みの属性」を参照してください。

App StudioでWeb埋め込みチャネルを作成する場合、すぐに使用できるテーマを選択できます。Web埋め込みは、デフォルトでConstellationデザインシステムを使用し、すぐに使用できるテーマ作成オプションを通じて限定的なブランディングをサポートして、ローコード開発者がホストサイトのブランディングに一致するWeb埋め込みエクスペリエンスを設定できるようにします。 Web埋め込みスクリプトは、外部サイトとのシームレスな統合を可能にするために、組み込みアプリケーションのルックアンドフィールをカスタマイズするテーマパラメーターもサポートしています。高度なスタイル設定は、テーマJSONオブジェクトまたはSDKでのブランド化を使用して使用できます。

補足: Web埋め込みのブランド化の詳細については、「Web埋め込みのブランディングのベストプラクティス」を参照してください。

認証により、検証済みのIDを持つユーザーとシステムのみがWeb埋め込みを使用でき、許可されたすべてのデータ操作が現在のユーザーIDで行われるようになります。 Web埋め込みは、OAuth 2.0プロトコルを使用した多くの設定をサポートし、外部アプリケーションがアクセストークンを使用してPega Platform ™ RESTサービスにアクセスできるようにします。Web埋め込みは、OAth 2.0許可タイプを使用してアプリケーションがアクセストークンを取得する方法を定義することで、サイレント認証をサポートします。

補足: 認証の詳細については、「Web埋め込みでの認証」を参照してください。

次の問題に答えて、理解度をチェックしましょう。


このトピックは、下記のモジュールにも含まれています。

トレーニングを実施中に問題が発生した場合は、Pega Academy Support FAQsをご確認ください。

このコンテンツは役に立ちましたか?

改善できるところはありますか?

We'd prefer it if you saw us at our best.

Pega Academy has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice