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 は VS Code を使い慣れているため、先に進みます。次は、各プロジェクトの組織の構成に取り組みます。 

OmniOut を使用したデプロイの準備をする

前提条件が整ったら、OmniOut を使用したデプロイの準備にかかります。接続や CMS の種類に関係なく、どの組織でも手順は同じです。 

Robert は、各組織で次のタスクを実行する必要があります。

• 静的リソースをダウンロードする。
  
• アプリケーションに連動関係をインストールする。
  
• ネストされた LWC があれば Omniscript に追加する。
  

各ステップを詳しく見ていきましょう。

このモジュールでは、受講者が管理パッケージ用 Omnistudio 開発者で、ここに記載の操作を実行する適切な権限を有すると想定しています。ただし、そうでなくても大丈夫です。このまま読み進み、本番組織で開発者がどのような手順を実行するのか確認します。Trailhead Playground で次の手順を実行しないでください。Trailhead Playground では管理パッケージ用 Omnistudio を使用できません。

静的リソースをダウンロードする

OmniOut プロジェクトでは次の 2 種類の静的リソースを使用します。

• OmniOut: すべての OmniOut プロジェクトで OmniOut 静的リソースを使用します。このリソースには、JS、HTML、CSS のほか、Omnistudio を Salesforce 外で実行するために必要なファイルが含まれます。
  
• CSS: 一部の OmniOut プロジェクトではカスタムスタイルシートを使用します。ダウンロードした Flexcard や Omniscript のメタデータには、カスタムスタイル設定が含まれません。そのため、CSS ファイルをダウンロードして、後から必要なカスタムスタイル設定をアプリケーションに追加する必要があります。
  

Omniscript Designer または Flexcard Designer で実施したカスタムスタイル設定は、ダウンロードしたオフプラットフォーム LWC に含まれます。

静的リソースをダウンロードする手順は次のとおりです。

1. [Setup (設定)] の [Quick Find (クイック検索)] ボックスに Static Resources と入力し、[Static Resources (静的リソース)] を選択します。
   
2. [静的リソース] ページで、vlocityomnioutlwc リソースを見つけて選択します。
   
3. [View File (ファイルを表示)] を選択して、静的リソースをダウンロードします。
   
4. プロジェクトにカスタムスタイルが含まれる場合は、[静的リソース] ページに戻り、CSS リソースを見つけてダウンロードします。
   
5. ダウンロードしたファイルを解凍して、必要なフォルダーをアプリケーションに追加します。
   
6. 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 は自身のコンピューターのターミナルアプリケーションを使用します。

1. ターミナルアプリケーションを開きます。
   
2. 解凍したフォルダーで .npmrc ファイルを見つけて開き、_auth を npm リポジトリのアクセスキーに設定します (_auth=Authentication_Key など)。
   
3. 新しいターミナルシェルで、npm install コマンドを実行して npm パッケージをインストールします。
   
4. npm run watch コマンドを実行して、開発サーバーを実行します。
   
5. 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 コンポーネントマッピング用の要素種別)] セクションで架空の要素にマッピングします。実際の要素にマッピングされている場合は、正しくコンパイルされません。

1. Omniscript を開きます。
   
2. Omniscript の [Setup (設定)] パネルで、[Element Type to LWC Component Mapping (LWC コンポーネントマッピング用の要素種別)] セクションを見つけます。
   
3. [Element Type (要素種別)] 項目に、架空の要素種別 (例: nestedElement) を入力します。
   
4. [Lightning Web Component (Lightning Web コンポーネント)] 項目に、ネストされたカスタム LWC の名前 (例: nestedLWC) を入力します。
   

Salesforce 接続アプリケーションを作成する

Robert が Flexcard や Omniscript をダウンロードする前に実行する必要がある最後のステップは、各組織に Salesforce 接続アプリケーションを構築することです。接続アプリケーションにより、プロキシやログイン認証を機能させるアクセストークンが OmniOut に付与されるため、外部接続が Salesforce とやり取りできるようになります。 

Robert は各組織に接続アプリケーションを作成して、OmniOut をサポートする準備が整っていることを次の 3 段階で確認します。

• Salesforce でこのアプリケーションを作成する。
  
• アプリケーションでアクセストークンを生成する。
  
• ソースコードエディターを使用してログイン情報をリンクさせる。
  

各ステップを詳しく見てみましょう。

Salesforce でアプリケーションを作成する

Robert はまず各組織で接続アプリケーションを作成します。

1. [Setup (設定)] の [Quick Find (クイック検索)] ボックスに App Manager と入力し、[App Manager (アプリケーションマネージャー)] を選択します。
   
2. [新規接続アプリケーション] をクリックします。
   
3. [Connected App Name (接続アプリケーション名)] 項目に、接続アプリケーションの名前 (例: OmniOutConnectionApp) を入力します。次の [API Name (API 参照名)] は、空の項目を選択すると自動的に入力されます。
   
4. アプリケーションの連絡先メールを入力します。
   
5. [Enable OAuth (OAuth を有効化)] を選択します。
   
6. コールバック URL を入力します。この URL は OmniOut アプリケーションの公開サイトの URL のため、プロジェクトごとに異なります。
   
7. 必要に応じて、[フルアクセス (full)] と [データへのアクセスと管理 (api)] を [使用可能な OAuth 範囲] から [選択した OAuth 範囲] に移動します。
   
8. 作業内容を保存して、接続アプリケーションを作成します。
   
9. 確認メッセージが表示されたら、[続行] をクリックします。
   

アクセストークンを生成する

Salesforce 接続アプリケーションが作成されたら、Robert は設定を確認して、アクセストークンを生成する必要があります。

1. 接続アプリケーションの詳細ページから、[Manage (管理)] を選択します。
   
2. [Edit Policies (ポリシーを編集)] を選択します。
   
3. [許可されているユーザー] 項目で、[すべてのユーザーは自己承認可能] が表示されていることを確認します。この設定を変更した場合は、[保存] をクリックします。
   
4. サイドバーで、[App Manager (アプリケーションマネージャー)] を選択します。
   
5. 行で、ドロップダウンメニューを選択して、[View (表示)] を選択します。
   
   
6. 接続アプリケーションの詳細ページで、コンシューマーキーとコンシューマーの秘密をコピーし、最後のステップとデプロイ時に使用できるように保存しておきます。
   
7. [Initial Access Token for Dynamic Client Registration (動的クライアント登録用の初期アクセストークン値)] セクションで、[Initial Access Token (初期アクセストークン)] の横にある [Generate (生成)] をクリックします。
   
8. 画面が更新されたら、[Initial Access Token Value (初期アクセストークン値)] の横にある [Reveal (表示)] をクリックします。プロジェクトを開発モードで実行するときにこの値を使用するため、保存しておきます。
   

最後のステップは、Salesforce のユーザー名/パスワードとコンシューマーキー/コンシューマーの秘密を、OmniOut を使用するアプリケーションにリンクさせることです。 

ログイン情報をリンクさせる

Robert はソースコードエディターを使用してログイン情報をリンクさせます。

1. ソースコードエディターで、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 組織に設定されます。
     
2. コマンドを実行します。
   
3. アクセストークンとインスタンス URL をコピーし、後から開発モードで使用できるように保存しておきます。
   

Robert は各組織の準備が整い、Flexcard と Omniscript がすべて有効になっていることを確認しました。これで、OmniOut プロジェクトを作成する次の段階に進むことができます。次の単元で、この方法を見ていきます。

リソース

• Salesforce ヘルプ: OmniOut (管理パッケージ用 Omnistudio)
• 外部 Web サイト: Node.js: Download Node.js LTS (Node.js LTS のダウンロード)
• Trailhead: Lightning Web コンポーネント: クイックスタートガイド
• 外部 Web サイト: Visual Studio Code: Download Visual Studio Code (Visual Studio Code のダウンロード)
• Salesforce ヘルプ: 接続アプリケーション