--- sourceDocument: オーストラリアのカスタマーサービス管理 (CSM) sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/ja-JP/customer-service-management Release : - australia ft:locale : - ja-JP ft:publication_title : - オーストラリアのカスタマーサービス管理 (CSM) ft:clusterId : - csm bundleId : - csm workflow : - Customer and Industry --- # ケースビューコンポーネントインスタンスの構成 # ケースビューコンポーネントインスタンスの構成 {#ariaid-title1} * リリースバージョン: Australia * * 更新日 2026年03月12日 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 所要時間：11分 ユーザーが Web サイトに埋め込み、Web サイト上のケース関連のアクティビティに直接アクセスできるように、ケースビューコンポーネントインスタンスを構成します。 ## 始める前に ケースビューコンポーネントインスタンスを構成するには、次のセットアップが必要です。 * インスタンスで Web 埋め込み可能 を有効にします。詳細については、「[Web 埋め込み可能 のアクティブ化](https://servicenow-prod.fluidtopics.net/3DKvoXXZsHZc4u08RQRTQQ "カスタマーサービス (sn_cx_components) の ServiceNow コンポーネント、ゲストの Web コンポーネント (sn_guest_component)、および Web 埋め込み可能コア (sn_embeddable_core) を有効にして、インスタンスで Web 埋め込み可能 を有効にすることができます。このアプリケーションは、まだインストールされていない関連プラグインを確立します。")」を参照してください。 * [カスタム URL をインスタンス URL として設定](https://servicenow-prod.fluidtopics.net/wS0HjuvEaanOh7TGO_kH7Q "使用するインスタンス構成に、ServiceNow URL の代わりにカスタム URL を追加します。このカスタム URL により、サードパーティの Cookie がオフになっている場合でも、ブラウザで埋め込みコンポーネントに引き続きアクセスできるようになります。")。 * OpenID Connect (OIDC) 認証または非 OIDC 認証を使用して、 ServiceNow コンポーネントを認証します。詳細については、「[OIDC を使用した ServiceNow コンポーネントの認証](https://servicenow-prod.fluidtopics.net/ddfwYpuYBuQ8FHVjg_URrA "OpenID Connect (OIDC) 認証を使用して自動ログインとログアウトを設定し、Web サイトや埋め込みコンポーネントで単一のログイン/ログアウトや同時ログイン/ログアウトを行えるようにします。")」と「[ServiceNow コンポーネントの非 OIDC 認証](https://servicenow-prod.fluidtopics.net/oUu5w6cTytujPpcjcjZshg "Web サイトで OpenID Connect (OIDC) 認証を使用しない場合は、JSON Web トークン (JWT) トークンを生成して ServiceNow コンポーネントを認証します。")」を参照してください。 {#configure-case-view-component-on-instance__ul_brf_cqf_ccc} 必要なロール:sn_embeddable_core.emb_admin ## 手順 1. 移動先 すべてWeb 埋め込み可能ホームページ. 2. ホームページで、\[モジュールの作成\] を選択するか、既存のモジュールを使用します。 新しいモジュールの作成の詳細については、「 [モジュールを作成](https://servicenow-prod.fluidtopics.net/dDeTk~6YSf1NJjA_4gpmpQ "Web サイトで使用されるコンポーネントインスタンスを管理するためのモジュールを作成します。モジュールを作成するか、構築済みのモジュールを使用して要件に応じて編集することができます。")」を参照してください。 3. モジュールページの \[コンポーネント\] タブで、ケースビューコンポーネントインスタンスを既存または新しいグループに追加します。 グループを作成してからコンポーネントインスタンスを追加する方法の詳細については、「 [グループの作成とコンポーネントインスタンスの追加](https://servicenow-prod.fluidtopics.net/TmdEAY0orFj5nCaIhB5y2A "ページやセクションなどのサードパーティの Web サイト構造をモデル化するグループを作成します。デフォルトのグループを使用するか、新しいグループを作成して、そのページまたはセクションのコンポーネントインスタンスを管理します。")」を参照してください。 4. **オプション:** \[ 静的プレビューを表示 \] オプションを切り替えて、ライブプレビューが利用できないときにコンポーネントの視覚的表現を表示します。 注: 有効にすると、グローバルプロパティまたはコンポーネントプロパティへの変更は \[プレビュー\] タブにリアルタイムで表示されません。 5. ケースビューコンポーネントのインスタンスプロパティを設定します。 * \[プレビュー\] タブには、コンポーネントプロパティで設定された選択肢に従ってリアルタイムデータが表示されます。 * ケースビューコンポーネントインスタンスに関連するコンポーネントプロパティの説明については、「 [\[ケース\] ビューのコンポーネントプロパティ](uuRfdtra35y5ccjz9lj~Xg "コンポーネントプロパティを使用すると、サードパーティの Web サイトでのケースビューコンポーネントインスタンスの動作を構成できます。")」を参照してください。 {#configure-case-view-component-on-instance__ul_jlw_yjw_cfc} 6. \[ CORS ルール \] タブを選択して、CORS ルールを構成します。 CORS ルールの構成の詳細については、「 [ServiceNowコンポーネントを埋め込む前に CORS (クロスオリジンリソース共有) ルールを構成する](https://servicenow-prod.fluidtopics.net/myQcJ8PC1kM9u7dlhnsbCw "ServiceNow コンポーネントと Web コンポーネントを埋め込む Web サイト間のクロスドメイン要求を有効にするように CORS ルールを設定します。")」を参照してください。 7. \[コンポーネント\] タブを選択します。 アプリケーションスコープに関するメッセージが表示された場合は、スコープを \[カスタマーサービスの Web コンポーネント \] に変更して、レコードを編集できるようにします。 8. \[埋め込みコードの取得\] を選択します。 グローバルコードとコンポーネントコードの両方を表示するポップアップウィンドウが表示されます。 9. \[グローバル コード\] タブで、生成されたコードを確認し、\[ グローバル コードのコピー\] を選択します。 グローバル コードは、サードパーティの Web ページに一度だけ追加する必要があります。 import { init, login, logout, startGuestSession } from 'https://demo.servicenow.com/uxasset/externals/sn_embeddable_core/index.jsdbx'; await init({ theme: 'fad87d2ca304121029a4d1aed31e610f', /* sys_id of the theme to use for the embeddable components in your website */ baseURL: 'https://demo.servicenow.com', /* Base URL of the instance to be used for the embeddable components in your website */ authCallback: getTokenCallBack, /* Function which returns the auth token for the current user, required for auth setup */ module: '591800ffc1243610f87714367ed47c6a', /* Demo module */ pageName: document.title, /* Uses the browser's document title as the page name in User analytics experience */ guestTokenCallback: getGuestJWTTokenCallBack, /* Function which returns the guest token for the current user, required for guest validation setup */ cacheComponents: [] /* Pre-caches resources for improved performance. Update component list as per your usage */ }); function getTokenCallBack() { var idToken; /* Get the id token for the current user */ return Promise.resolve(idToken); } function getGuestJWTTokenCallBack() { var guestToken; /* Get the guest token for the current user */ return Promise.resolve(guestToken); } /* Uncomment below function to handle guest session */ // await startGuestSession(); /* Uncomment below functions to handle login and logout once the user logs into your website */ // await login(); // await logout(); 10. **オプション:** \[コンポーネント コード\] タブで、\[ イベント ハンドラーを有効にする \] 切り替えスイッチをスライドさせて、Web ページでのユーザー操作によってトリガーされたイベントを処理します。 注: イベントハンドラーを有効にすると、コンポーネントコードも変更されます。Web 埋め込み可能 におけるイベントハンドラーの詳細については、「[拡張ケースビューコンポーネントのイベントハンドラー](https://servicenow-prod.fluidtopics.net/VcnRSZB~3VHNS~PDyYb3kg "コンポーネントは、特定の条件が満たされたとき、またはユーザーのインタラクション時にイベントをトリガーします。このイベントを使用して、サードパーティの Web ページ上のコードを介してアクションを実行できます。")」を参照してください。 11. \[コンポーネントコード\] タブで、生成されたコードを確認し、\[コンポーネントコードをコピー (Copy component code)\] を選択します。 この生成されたコードには、イベントハンドラーの構成も含まれています。 {#configure-case-view-component-on-instance__steps_kkl_1fn_ccc} ## タスクの結果 グローバルコードとコンポーネントコードをサードパーティアドミニストレーターと共有して、ケースビューコンポーネントインスタンスをサードパーティ Web サイトに埋め込む準備ができました。 ## 次のタスク [サードパーティ Web サイトへのケースビューコンポーネントインスタンスの埋め込み](https://servicenow-prod.fluidtopics.net/YYmmWE7PPm7QJP_vAICrsQ "顧客がサードパーティの Web サイトでケースビューコンポーネントインスタンスの使用を開始できるように、構成したケースビューコンポーネントインスタンスのグローバルコードとコンポーネントコードを埋め込みます。")