OmniOut プロジェクトのデプロイの準備をする
学習の目的
この単元を完了すると、次のことができるようになります。
- OmniOut を使用してデプロイするプロジェクトの前提条件を満たす。
- OmniOut を使用してデプロイするために Salesforce 組織とツールを準備する。
- 接続アプリケーションを作成して、外部接続が Salesforce とやりとりできるようにする。
プロジェクトの前提条件
Robert はクライアントとの打ち合わせで、それぞれの OmniOut プロジェクトの詳細を確認しました。そして現在、デプロイ環境の準備を進めています。
どのプロジェクトでも、Robert は着手する前に、次の前提条件が整っていることを確認する必要があります。
- お客様の CMS が設定され、アプリケーションが作成されている。
- 自身の開発プラットフォームで Node.js の最新バージョンが実行されている。
- 各 OmniOut プロジェクトの npm キーを取得している。
- ソースコードエディターが最新の状態である。
- 使用する予定の FlexCard と OmniScript がすべて有効である。
CMS とアプリケーションの準備を整える
OmniOut を使用してデプロイする FlexCard や OmniScript を準備する前に、CMS が配備されていることを確認します。OmniOut を使用してアプリケーションをデプロイする組織を準備する際、どの CMS に接続するかを事前に把握しておくと、必要なすべての手順を実行しやすくなります。さらに、アプリケーションが構築され、OmniOut によるデプロイの準備ができていれば言うことありません。Robert の場合は、運よくどのプロジェクトも CMS とアプリケーションが準備万端の状態です。
Node.js がインストールされ、npm キーが使用可能であることを確認する
LTS Node.js がまだない場合は、ダウンロードしてインストールする必要があります。さらに、Salesforce カスタマーサービス担当者に連絡して、会社の npm キーも取得します。npm キーは、アプリケーションが OmniStudio の npm リポジトリにある基本コンポーネントにアクセスするために使用します。
Robert は Node.js の最新バージョンがインストールされていることを確認します。4 社のクライアントの 4 種類のプロジェクトに同時に取り組むため、4 種類のキーを取得します。
ソースコードエディターが最新の状態であることを確認する
FlexCard や OmniScript を OmniOut アプリケーションにデプロイするには、ソースコードエディターが必要です。手元にない場合は、Visual Studio Code の使用を検討します。無料で、Windows、macOS、Linux で利用できるためです。ドキュメントや動画を参考にして、プロジェクトを稼働させられるようにします。
Robert は Visual Studio Code を使い慣れているため、先に進みます。次は、各プロジェクトの組織の構成に取り組みます。
OmniOut を使用したデプロイの準備をする
前提条件が整ったら、OmniOut を使用したデプロイの準備にかかります。接続や CMS の種類に関係なく、どの組織でも手順は同じです。
Robert は、各組織で次のタスクを実行する必要があります。
- 静的リソースをダウンロードする。
- アプリケーションに連動関係をインストールする。
- ネストされた LWC があれば OmniScript に追加する。
静的リソースをダウンロードする
OmniOut プロジェクトでは次の 2 種類の静的リソースを使用します。
- OmniOut: すべての OmniOut プロジェクトで OmniOut 静的リソースを使用します。このリソースには、JS、HTML、CSS のほか、OmniStudio を Salesforce 外で実行するために必要なファイルが含まれます。
- CSS: 一部の OmniOut プロジェクトではカスタムスタイルシートを使用します。ダウンロードした FlexCard や OmniScript のメタデータには、カスタムスタイル設定が含まれません。そのため、CSS ファイルをダウンロードして、後から必要なカスタムスタイル設定をアプリケーションに追加する必要があります。
OmniScript Designer または FlexCard Designer で実施したカスタムスタイル設定は、ダウンロードしたオフプラットフォーム LWC に含まれます。
静的リソースをダウンロードします。
-
をクリックして、[設定] を選択します。 - [クイック検索] ボックスに
static(静的) と入力し、[静的リソース] を選択します。 - [静的リソース] ページで、vlocityomnioutlwc リソースを見つけて選択します。
- [ファイルを表示] をクリックして、静的リソースをダウンロードします。
- プロジェクトにカスタムスタイルが含まれる場合は、[静的リソース] ページに戻り、CSS リソースを見つけてダウンロードします。
- ダウンロードしたファイルを解凍して、必要なフォルダーをアプリケーションに追加します。
- CSS を使用する場合は、アプリケーションの index.html ファイルを開き、CSS を読み込むための参照を追加します。次のようになります。
<link rel="stylesheet" type="text/css" href=".../styles/my-custom-styles.css">
Bull Market Investments プロジェクトではカスタムスタイルシートを使用するため、Robert は Bull Market Investments 組織から OmniOut と CSS の両方の静的リソースをダウンロードします。
これでプロジェクトの連動関係をインストールする準備ができました。
連動関係をインストールする
ダウンロードした静的リソースには OmniOut の連動関係が含まれていないため、コマンドラインツールを使用してインストールする必要があります。Robert は自身のコンピューターのターミナルアプリケーションを使用します。
連動関係をインストールします。
- ターミナルアプリケーションを開きます。
- 解凍したフォルダーで .npmrc ファイルを見つけて開き、_auth を npm リポジトリのアクセスキーに設定します (
_auth=Authentication_Key)。 - 新しいターミナルシェルで、
npm installコマンドを実行して npm パッケージをインストールします。 -
npm run watchコマンドを実行して、開発サーバーを実行します。 - localhost:4002 にあるローカル開発サーバーにアクセスして、デモアプリケーションを表示します。
静的リソースと連動関係の処理を終えた Robert は、続いて、ネストされた LWC を OmniScript に追加することにします。
ネストされたカスタム LWC を OmniScript に追加する
OmniScript をオーバーライドする LWC や OmniScript にマッピングする LWC はすべて、オフプラットフォームの OmniScript LWC と一緒に自動的にダウンロードされます。OmniScript のカスタム LWC が参照するネストされたカスタム LWC は、自動的にダウンロードされません。ネストされた LWC とは、親 LWC の子である LWC です。また、ネストされているということは、カスタム LWC であるということです。
管理パッケージのカスタム LWC (OmniStudio または Salesforce の外部で開発され、OmniStudio で使用されるもの) を OmniOut と連携させるには、オフプラットフォームとの互換性がなければなりません。連携させるために、コンポーネントで @salesforce インポートを使用していないことと、参照先の LWC コンポーネントがオープンソースリストに記載されていることを確認します。
ネストされたカスタム LWC を適切にコンパイルするためには、[Element Type to LWC Component Mapping (LWC コンポーネントマッピング用の要素種別)] セクションでダミー要素にマッピングする必要があります。実際の要素にマッピングされている場合は、正しくコンパイルされません。
ネストされたカスタム LWC をマッピングします。
- OmniScript を開きます。
- OmniScript の [Setup (設定)] パネルで、[Element Type to LWC Component Mapping (LWC コンポーネントマッピング用の要素種別)] セクションを見つけます。
- [Element Type (要素種別)] 項目に、架空の要素種別 (例:
nestedElement) を入力します。 - [Lightning Web Component (Lightning Web コンポーネント)] 項目に、ネストされたカスタム LWC の名前 (例:
nestedLWC)を入力します。
Salesforce 接続アプリケーションを作成する
Robert が FlexCard や OmniScript をダウンロードする前に実行する必要がある最後のステップは、各組織に Salesforce 接続アプリケーションを構築することです。接続アプリケーションにより、プロキシやログイン認証を機能させるアクセストークンが OmniOut に付与されるため、外部接続が Salesforce とやりとりできるようになります。
Robert は各組織に接続アプリケーションを作成して、OmniOut をサポートする準備が整っていることを次の 3 段階で確認します。
- Salesforce でこのアプリケーションを作成する。
- アプリケーションでアクセストークンを生成する。
- ソースコードエディターを使用してログイン情報をリンクさせる。
Salesforce でアプリケーションを作成する
Robert は各組織で接続アプリケーションを作成します。
-
をクリックして、[設定] を選択します。
- [クイック検索] ボックスに
app(アプリケーション) と入力し、[アプリケーションマネージャー] を選択します。 - [新規接続アプリケーション] をクリックします。
- [接続アプリケーション名] 項目に、接続アプリケーションの名前 (例:
OmniOutConnectionApp) を入力します。次の [API 参照名] は、空の項目をクリックすると自動的に入力されます。 - アプリケーションの連絡先メールを入力します。
- [OAuth 設定の有効化] を選択します。
- コールバック URL を入力します。この URL は OmniOut アプリケーションの公開サイトの URL のため、プロジェクトごとに異なります。
- 必要に応じて、[フルアクセス (full)] と [データへのアクセスと管理 (api)] を [使用可能な OAuth 範囲] から [選択した OAuth 範囲] に移動します。
- [保存] をクリックして、接続アプリケーションを作成します。
- 確認メッセージが表示されたら、[続行] をクリックします。
アクセストークンを生成する
Salesforce 接続アプリケーションが作成されたら、Robert は設定を確認して、アクセストークンを生成する必要があります。
- 接続アプリケーションの詳細ページで、[管理] をクリックします。
- [ポリシーを編集] をクリックします。
- [許可されているユーザー] 項目で、[すべてのユーザーは自己承認可能] が表示されていることを確認します。この設定を変更した場合は、[保存] をクリックします。
- サイドバーで、[アプリケーションマネージャー] をクリックします。
- 右側の行で、ドロップダウンメニューをクリックして、[表示] を選択します。
- 接続アプリケーションの詳細ページで、コンシューマーキーとコンシューマーの秘密をコピーし、最後のステップとその後のデプロイ時に使用できるように保存しておきます。
- [動的クライアント登録用の初期アクセストークン値] セクションで、[初期アクセストークン] の横にある [生成] をクリックします。
- 画面が更新されたら、[初期アクセストークン値] の横にある [Reveal (表示)] をクリックします。プロジェクトを開発モードで実行するときにこの値を使用するため、保存しておきます。
最後のステップは、Salesforce のユーザー名/パスワードとコンシューマーキー/コンシューマーの秘密を、OmniOut を使用するアプリケーションにリンクさせることです。
ログイン情報をリンクさせる
Robert はソースコードエディターを使用してログイン情報をリンクさせます。
- ソースコードエディターで、
curl -d "username=USERNAME" -d "password=PASSWORD" -d "client_id=CLIENTID" -d "client_secret=CLIENTSECRET" -v -d "grant_type=password"というコマンドを入力します (まだ実行しないでください)。 - USERNAME を Salesforce のユーザー名に置換します。
- PASSWORD を Salesforce のパスワードに置換します。
- CLIENTID を先ほど保存したコンシューマーキーに置換します。
- CLIENTSECRET を先ほど保存したコンシューマーの秘密に置換します。
- 必要に応じて、Salesforce 環境の URL をコマンドの末尾に追加します。デフォルトで、この URL は Sandbox 組織に設定されます。
- コマンドを実行します。
- アクセストークンとインスタンス URL をコピーし、後から開発モードで使用できるように保存しておきます。
Robert は各組織の準備が整い、FlexCard と OmniScript がすべて有効になっていることを確認しました。これで、OmniOut プロジェクトを作成する次の段階に進むことができます。次の単元で、この方法を見ていきます。