OmniOut プロジェクトをデプロイする
学習の目的
この単元を完了すると、次のことができるようになります。
- プロジェクトを開発モードで実行する。
- dist フォルダーをコンパイルして、CMS (AEM を含む) にデプロイする。
- 元の Salesforce への接続を構築する。
プロジェクトを開発モードで実行する
管理パッケージ用 Omnistudio での Robert の OmniOut プロジェクトももう少しで完成です。プロとして完璧を追求し、ベストプラクティスにこだわる Robert は、各プロジェクトを開発モードで実行して、不具合がないかチェックします。
まず、プロジェクトを開発モードで実行します。
- ソースコードエディターを使用して、.src フォルダーの index.html ファイルで、
JSForceConnectionExample()関数を見つけます。
- const connection オブジェクトに、Salesforce 接続アプリケーションのアクセストークンと組織のインスタンス URL を入力します。
-
this.namespace = 'NAMESPACE'の NAMESPACE をパッケージの名前空間に置き換えます。
- ファイルを保存します。
- ターミナルコンソールで、
npm run watchコマンドを実行してサーバーを再起動し、プロジェクトをローカルで表示します。
- エラーを確認して解決し、必要に応じてテストを繰り返します。
Robert が 4 つのプロジェクトをすべて開発モードで実行したところ、特に問題は見つかりませんでした。次のステップに進みましょう。
アプリケーションを CMS にデプロイする
Robert はアプリケーションをコンパイルして、それぞれのプラットフォームにデプロイする必要があります。どのお客様も標準の CMS を所有しています。Healthy Benefits プロジェクトについては Adobe Experience Manager (AEM) CMS を使用しているため、追加の手順が必要です。
ここでは、アプリケーションをコンパイルして CMS にデプロイする手順の例を示します。
標準の CMS を使用する
標準の CMS の場合は、dist フォルダーをコンパイルします。
- ソースコードエディターで、
npm run buildコマンドを実行します。このコマンドにより、OmniOut が dist フォルダーにコンパイルされます。
- dist フォルダーで、必要に応じて次のファイルやフォルダーが存在することを確認します。
ファイル/フォルダー
必須?
説明
app.js ファイル (0.app.js などの番号付きファイルを含む)
必須
Flexcard や Omniscript に必要な JavaScript ファイル
vlocityresources
必須
Flexcard や Omniscript に必要な静的リソース
index.html
省略可能
OmniOut プロジェクトの実行方法を示すサンプルの index.html ファイル
newport
省略可能
デフォルトの Newport テーマを使用する場合は必須
slds
省略可能
Lightning テーマを使用する場合、Omniscript に Image または File 要素が含まれる場合、Flexcard に Image 要素が含まれる場合は必須
OmniscriptDocuSignReturnPage.html
省略可能
Omniscript に DocuSign アクションが含まれる場合は必須
OmniscriptLwcDocuSignViewPdf.html
省略可能
Omniscript に DocuSign アクションが含まれる場合は必須
- index.html ファイルで、app.js ファイルを参照するスクリプトタグを選択して、アプリケーションの index.html ファイルにコピーします。
- index.html ファイルで、Omniscript または Flexcard コンポーネントタグを選択して、アプリケーションの index.html ファイルにコピーします。たとえば、Flexcard コンポーネントタグは、
<flexcards-energyPlan run-mode="localScriptDef"> </flexcards-energyPlan>のようになります。
アプリケーションをコンパイルして、CMS にデプロイすることができました。AEM にデプロイする場合は、さらなる手順を実行する必要があります。
AEM CMS を使用する
Robert のクライアントである Healthy Benefits のように、アプリケーションを AEM CMS にデプロイする場合は、OmniOut プロジェクトにリソースパスを設定して、Lightning と Newport スタイルを AEM に読み込む必要があります。
ここに記載の手順以外の AEM のガイドラインについては、AEM のドキュメントの「Salesforce との統合」を参照してください。
まず、AEM で Salesforce 接続への接続を作成し、確認します。
次に、プロジェクトにリソースパスを設定します。
- ソースコードエディターで、OmniOut プロジェクトの ./src/index.js ファイルを見つけて開きます。
-
import { setSldsResourcesUrl, setNewportResourcesUrl } from 'c/salesforceUtils'行のコメントを解除します。
- setSldsResourcesUrl 関数と setNewportResourcesUrl 関数を見つけてコメントを解除します。
- ファイルを保存します。
ログイン情報を追加して、アプリケーションをデプロイします。
- ソースコードエディターで、./aem.ui.apps/pom.xml ファイルを開きます。
- タグを次のように編集します。
編集するタグ
置換する値
置換後の値
<crx.host>YOURHOST</crx.host>
YOURHOST
AEM サーバーのホスト名
<crx.port>PORT</crx.port>
PORT
AEM サーバーのポート名
<crx.username>USERNAME</crx.username>
USERNAME
AEM サーバーのユーザー名
<crx.password>PASSWORD</crx.password>
PASSWORD
AEM サーバーのパスワード
<publish.crx.host>HOST</publish.crx.host>
HOST
AEM サーバーのホスト名
<publsh.crx.port>PORT</publish.crx.port>
PORT
AEM サーバーのポート名
<publish.crx.username>USERNAME</publish.crx.username>
USERNAME
AEM サーバーのユーザー名
<publish.crx.password>PASSWORD</publish.crx.password>
PASSWORD
AEM サーバーのパスワード
-
npm run deploy:aem:clean:fullコマンドを実行して、アプリケーションをデプロイします。
これで OmniOut コンポーネントが AEM に追加されました。次に、Omniscript を AEM ページに追加します。
- コンポーネントタグ名を使用して、Omniscript の名前を入力します。ただし、角括弧は削除します。たとえば、Omniscript の種別 = doc、サブタイプ = test、言語 = 英語であれば、
vlocityomniscript-doc-test-englishというタグを入力します。
- 更新した AEM サイトをテストします。
これで Robert が Flexcard を表示して、AEM サイトで Omniscript を起動できます。完成まであと一歩です。最後のタスクは、アプリケーションを元の Salesforce に接続することです。
元の Salesforce に接続する
Robert は接続オブジェクトを構成して、OmniOut プロジェクトを、以前に作成した Salesforce 接続アプリケーションに接続する必要があることを認識しています。接続オブジェクトは、インスタンス URL、名前空間、request 関数を公開します。各アプリケーションの要件に応じて各接続を構成しなければならないことも心得ています。幸いにも、Robert は便利なテンプレートを使用できます。
Omniscript を使用する OmniOut の接続オブジェクト
OmniOut プロジェクトに Omniscript が含まれている場合は、OmniOut の omnioutcomponentready イベントを受け取った後に接続オブジェクトを渡すイベントハンドラーを作成します。
Robert はテンプレートの正しい形式を ./src/index.js ファイルにコピーします。まず、イベントハンドラーと接続オブジェクトを作成します。次に、アプリケーションごとに OmniOut の外部に追加の接続オプションを構成します。
Flexcard を使用するが、Omniscript は使用しない OmniOut の接続オブジェクト
OmniOut プロジェクトに Flexcard があるが、Omniscript はない場合は、initializeDatasourceSdk メソッドを使用してアプリケーションを接続します。
Robert はテンプレートの正しい形式を ./src/index.js ファイルにコピーします。Omniscript がない場合はイベントハンドラーが不要です次に、アプリケーションごとに OmniOut の外部に追加の接続オプションを構成します。
Robert が遂に 4 つの OmniOut プロジェクトを完成させました。どのクライアントも、管理パッケージ用 Omnistudio がオフプラットフォームで実行されることになって喜んでいます。
彼は、さらに Omnistudio の高度な機能に挑むことに意欲的になっています。OmniOut をより深く理解し、使用するために必要なツールを手に入れました。では、これをどのようなプロジェクトに使用できるでしょうか?
リソース
- Salesforce ヘルプ: OmniOut (管理パッケージ用 Omnistudio)
- Adobe Experience Manager ドキュメント: Salesforce との統合
- Salesforce 開発者: OmniOut Connection Object Templates (OmniOut の接続オブジェクトのテンプレート)