Skip to main content

FlexCard と OmniScript をダウンロードする

学習の目的

この単元を完了すると、次のことができるようになります。

  • オフプラットフォームで使用する FlexCard をダウンロードする。
  • オフプラットフォームで使用する OmniScript をダウンロードする。
  • OmniOut プロジェクトで OmniScript の多言語サポートを有効にする。

FlexCard をオフプラットフォームにダウンロードする

Robert は期待に胸を弾ませています。ここで、これまで取り組んできたシステムの準備の成果が明らかになります。4 つのどの OmniOut プロジェクトも準備が整っていれば、FlexCard や OmniScript をダウンロードして、OmniOut プロジェクトを作成し、元の Salesforce に接続することができます。 

Robert は Simply Solar の Heroku アプリケーションへのデプロイから着手します。オフプラットフォームで使用する energyPlan FlexCard をダウンロードする必要があります。このプロセスを 2 つのフェーズに分割します。最初のフェーズで、組織から energyPlan FlexCard をダウンロードします。次のフェーズで、この FlexCard を Simply Solar の OmniOut アプリケーションに移行します。

energyPlan FlexCard をダウンロードします。

  1. Salesforce 組織の [OmniStudio FlexCard] タブで、ダウンロードする有効な FlexCard を開きます。
  2. [Deactivate (無効化)] の横にあるドロップダウンメニューをクリックして、[Download Off-Platform LWC (オフプラットフォームの LWC のダウンロード)] を選択します。
  3. [Download (ダウンロード)] ウィンドウで、[Done (完了)] をクリックします。

    FlexCard が zip 形式のフォルダーでダウンロードされます。

FlexCard を OmniOut アプリケーションに移動します。

  1. ダウンロードフォルダーで、FlexCard フォルダーを解凍して開きます。
    展開され、OmniOut アプリケーションにコピーされた FlexCard フォルダー
  2. ダウンロードしたファイルの c フォルダーにあるコンポーネントを、OmniOut アプリケーションの ./src/modules ディレクトリまたは ./src/modules/flexcards サブディレクトリにコピーします。たとえば、energyPlan または FlexCard という名前のフォルダーをディレクトリにコピーします。
  3. ソースコードエディターで、./src/index.html ファイルを開き、FlexCard コンポーネントタグを追加します。たとえば、energyPlan というコンポーネントフォルダーを ./src/modules/flexcards サブディレクトリに配置した場合、コンポーネントタグは <FlexCard-energyPlan></FlexCard-energyPlan> になります。
  4. ソースコードエディターで、./src/index.js ファイルを開き、各自のコンポーネントをインポートして定義します。
    1. コンポーネントのファイルパスからコンポーネントをインポートします。
    2. カスタム要素を定義し、コンポーネントに接続して、HTML 用の FlexCard を構成します。
  5. OmniStudio の Newport スタイル設定を使用する場合は、Index.html を開き、Newport スタイルシートのコメントを解除します。それ以外の場合は、次のステップに進みます。
  6. FlexCard に画像がある場合は、次のスタイルシートを使用して、Index.html に SLDS スタイルを追加します。
    <!-- SLDS styles -->
<link rel="stylesheet" type="text/css" href="/slds/assets/styles/salesforce-lightning-design-system.css">
<link rel="stylesheet" type="text/css" href="/vlocityresources/slds/styles/OmniLwcUtilsCss.css">
    このステップは、Newport スタイル設定を使用するかどうかに関係なく実行します。
    メモ: OmniOut では最大 30 MB の画像のアップロードがサポートされています。

  7. プロジェクトを保存します。
  8. ターミナルコンソールで、npm run watch コマンドを実行してサーバーを再起動し、FlexCard をローカルで表示します。

Robert は同じ手順を実行して、Healthy Benefits プロジェクトと Bull Market Investments プロジェクトの FlexCard もダウンロードします。 

OmniScript をオフプラットフォームにダウンロードする

Robert は FlexCard と同じ方法で、オフプラットフォームで使用する trackEnergyUseEnglish OmniScript をダウンロードします。最初に、組織から有効な OmniScript をダウンロードします。ただし、OmniScript の場合はメタデータをダウンロードするほか、OmniScript のコンポーネントタグをコピーする必要があります。 

組織から OmniScript をダウンロードします。

  1. 開いている OmniScript で、[Deactivate Version (バージョンの無効化)] の横にあるドロップダウンメニューをクリックして、[Download Off-Platform LWC (オフプラットフォームの LWC のダウンロード)] を選択します。
  2. [Downloading (ダウンロード)] ウィンドウで、[Done (完了)] をクリックします。
    OmniScript が zip 形式のフォルダーでダウンロードされます。
  3. [Deactivate Version (バージョンの無効化)] の横にあるドロップダウンメニューをクリックして、[How To Launch (起動方法)] を選択し、ウィンドウの上部にあるコンポーネントタグの 1 つをコピーして、後で使用できるように保存しておきます。
    コンポーネントタグのサンプルが強調表示されている [How To Launch (起動方法)] ウィンドウ

次のフェーズで、この OmniScript を OmniOut アプリケーションに移行します。FlexCard の移行とほぼ同じですが、いくつかの相違点があります。

  1. ダウンロードフォルダーで、メタデータフォルダーを解凍して開きます。
  2. ダウンロードしたファイルの vlocityomniscript フォルダーにあるコンポーネントを、OmniOut アプリケーションの ./src/modules ディレクトリまたは ./src/modules/vlocityomniscript サブディレクトリにコピーします。たとえば、trackEnergyUseEnglish という名前のフォルダーをディレクトリにコピーします。
  3. ソースコードエディターで、./src/index.html ファイルを開き、コンポーネントタグを、[How To Launch (起動方法)] ウィンドウからコピーした OmniScript コンポーネントタグに置換します。
  4. このコンポーネントタグを編集して、c-- を vlocityomniscript- に置換します。
  5. ファイルを保存します。
  6. ソースコードエディターで、./src/index.js ファイルを開き、コンポーネントをインポートして定義する手順を実行します。
    1. コンポーネントインポートのサンプルを各自のコンポーネントのファイルパス (例: 'vlocityomniscript/trackEnergyPlanUseEnglish') に置換します。
    2. コンポーネントタグのサンプルを変更したコンポーネントタグに置換して、終了タグと山括弧を削除します。たとえば、'vlocityomniscript-type-track-subtype-energyplanuse-english' のようになります。
  7. Newport スタイル設定を使用する場合は、Index.html を開き、Newport スタイルシートのコメントを解除します。それ以外の場合は、次のステップに進みます。
  8. Google マップに PDF アクションまたは Type Ahead ブロックを使用する場合は、Index.html で、該当するスクリプトファイルのコメントを解除します。
    1. PDF アクション: <script src="/vlocityresources/javascript/VlocityPdf.js"></script>.
    2. Type Ahead ブロック: <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={YOUR_API_KEY_HERE}&libraries=places"></script>.

      メモ: YOUR_API_KEY_HERE をそれぞれのお客様の API キーに置換します。

  9. OmniScript に画像またはファイルがある場合は、Index.html で、SLDS スタイルを追加します。画像の SLDS スタイルは FlexCard と OmniScript のどちらも同じですが、OmniScript にファイルがある場合は次のスタイルシートも必要です。

    <!-- SLDS styles -->
<link rel="stylesheet" type="text/css" href="/slds/assets/styles/salesforce-lightning-design-system.css">
<link rel="stylesheet" type="text/css" href="/vlocityresources/slds/styles/OmniLwcUtilsCss.css">
    このステップは、Newport スタイル設定を使用するかどうかに関係なく実行します。

  10. プロジェクトを保存します。
  11. ターミナルコンソールで、npm run watch コマンドを実行してサーバーを再起動し、OmniScript をローカルで表示します。
メモ

OmniScript または FlexCard をダウンロードした場合、Salesforce では異なるバージョンになります。後々 Salesforce で OmniScript や FlexCard のバージョンが変更または更新された場合は、最新バージョンをダウンロードして OmniOut アプリケーションを更新し、変更を各自のアプリケーションに適用する必要があります。

多言語サポートを構成する

Europa Communications は欧州全域の顧客に対応しているため、エージェントが多言語サポートを使用できる OmniStudio ソリューションを設定しています。Europa Comm ではこのサポートを、顧客がどこにいるかに関係なく、顧客全体に拡張したいと考えています。つまり、Robert が OmniOut アプリケーションに多言語サポートを構成する必要があります。 

まず、OmniScript をダウンロードするときに、コンポーネントタグを調整して run-mode="localScriptDef '' 属性を追加します。この属性によって Robert が望むとおり、多言語の OmniScript にローカルで定義されたカスタム表示ラベルが使用されるようになります。この属性がない場合は、Salesforce に接続して、カスタム表示ラベルが取得されます。データがローカルに保持されていれば、実行時のパフォーマンスが向上します。 

プロジェクトに多言語サポートを構成します。

  1. ソースコードエディターのコマンドラインに、npm run customlabels LANGCODE と入力して、LANGCODE を Salesforce 言語のコード (例: npm run customlabels es) に置換します。
    このコマンドで、次の 2 つのファイルが生成されます。
    1. LANGCODE.translations.js: 1 つの言語について、ユーザーが定義したカスタム表示ラベルと標準の表示ラベルがすべて含まれます。
    2. translations.js: すべてのカスタム表示ラベルのエクスポートされた翻訳が含まれます。
  2. ソースコードエディターで、translations.js を開き、エクスポート行のコメントを解除して、OmniScript の実行時に必要な言語を追加します。
  3. コンポーネントタグのプロパティまたは URL パラメーターを使用して、言語コードを渡します。
    1. コンポーネントタグのプロパティ: OmniScript のコンポーネントタグの言語コードを prefill プロパティとして渡します (例: <my-omniscript prefill='\{"LanguageCode":"es"}'> </my-omniscript>)。
    2. URL パラメーター: LanguageCode パラメーターを URL エンドポイントに追加して、Salesforce の言語コードを入力します (例: localhost:4002/myOmniScript?LanguageCode=es)。
  4. OmniScript コンポーネントタグで run-mode="localScriptDef" を使用するときは、LANGCODE.translations.js ファイルを選択し、キー - 値ペアを見つけて、各言語のカスタム翻訳を手動で定義します。
  5. [Value (値)] 項目に、カスタム表示ラベルの翻訳 (例: “New”: ”Nuevo”) を入力します。
  6. 各言語の表示ラベルごとにステップ 4 ～ 5 を繰り返します。

    終了したら、多言語の OmniScript をテストします。

  7. コマンドラインに、npm run watch コマンドを入力して実行し、コマンドラインに表示されるローカルホストリンクをクリックします。
  8. ブラウザーで、URL を編集して言語コードを追加します (例: localhost:4002/myOmniScript?LanguageCode=es)。

これで OmniScript が正しい言語で読み込まれます。 

コンソールビューに FlexCard の画像が表示されているモニターの前に座っている Robert

FlexCard と OmniScript が OmniOut アプリケーションに追加され、Europa Communications のプロジェクトに多言語サポートが構成されました。 

これで、Robert が開発モードで OmniOut を実行し、アプリケーションを CMS に移行することができます。次の単元で、Robert がこの手順を実行するところを見ていきます。

リソース

無料で学習を続けましょう!
続けるにはアカウントにサインアップしてください。
サインアップ ログイン
サインアップすると次のような機能が利用できるようになります。
  • 各自のキャリア目標に合わせてパーソナライズされたおすすめが表示される
  • ハンズオン Challenge やテストでスキルを練習できる
  • 進捗状況を追跡して上司と共有できる
  • メンターやキャリアチャンスと繋がることができる
今はしない