OmniOut プロジェクトをデプロイする
学習の目的
この単元を完了すると、次のことができるようになります。
- プロジェクトを開発モードで実行する。
- dist フォルダーをコンパイルして、CMS (AEM を含む) にデプロイする。
- 元の Salesforce への接続を構築する。
プロジェクトを開発モードで実行する
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 については AEM CMS を使用しているため、追加の手順が必要です。
ここでは、アプリケーションをコンパイルして CMS にデプロイする手順の例を示します。
標準の CMS (AEM ではない) を使用する
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 コンポーネントタグは、
<FlexCard-energyPlan run-mode="localScriptDef"> </FlexCard-energyPlan>のようになります。
アプリケーションをコンパイルして、CMS にデプロイすることができました。AEM にデプロイする場合は、さらなる手順を実行する必要があります。
AEM CMS を使用する
Healthy Benefits のように、アプリケーションを AEM CMS にデプロイする場合は、OmniOut プロジェクトにリソースパスを設定して、Lightning と Newport スタイルを AEM に読み込む必要があります。
ここに記載の手順以外の AEM のガイドラインについては、AEM ヘルプファイルの「Salesforce との統合」を参照してください。
接続を作成します。
- AEM で Salesforce 接続を作成します。
- Salesforce と AEM 間の接続を確認します。
プロジェクトにリソースパスを設定します。
- ソースコードエディターで、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 がオフプラットフォームで実行されることになって喜んでいます。
Robert は早速この内容をブログにまとめながら、さらに OmniStudio の高度な機能に挑むことに意欲的になっています。