Web Page script component


Web ページ コンポーネントはホストした Web ページをスクリプト ページに埋め込みます。実行時に、指定されたページがスクリプト ページを読み込みます。

重要:

  • 参照されている Webサイトは、他のドメインのページへのページの埋め込みを許可する必要があります。つまり、Web サーバーの x-frame オプションを、他のドメインが iframe タグ内のページに表示できるように設定する必要があります。そうしないと、Web ページ コンポーネントは URL を表示できません。

  • You must use secure HTTP when specifying the URL (https:// instead of http://).

  1. Click the Web Page icon on the component toolbar.

  2. Expand the Common group in the properties panel. Then type the fully qualified URL of a web page in the Web Page Source box. Optionally, choose a string variable whose value contains a URL.

    例:

    https://www.usps.com/

    ページは即座に読み込まれるため、URL が有効であることを確認できます。プレビュー モードを選択する必要はありません。

  3. このコンポーネントのその他のプロパティを設定します。

    一般



    Web ページのソースは、Web ページ コンポーネント内に埋め込むように Web ページの URL を設定します。Web ページの URL を入力するか、または変数を使用して URL をコンポーネントに渡します。例:

    https://help.mypurecloud.com

    有効な URL が入力されると、Web ページ コンポーネントはページを即座に表示します。

    example-website-url

    URL は https:// で開始する必要があります。リモート サーバーがセキュア http プロトコルをサポートしない場合、ページ コンポーネントはそのサーバーからのページを表示できません。


    レイアウト



    幅は、固定サイズに設定したり、表示内容の必要性に応じて拡大することができます。またはサイズ調整に影響を与える加重を使って、他のコンポーネントに比べてできる限り多くのスペースを使用することができます。

    設定 説明
    settings-sizing-auto-size 自動サイズ変更により、コンポーネントの内容に従って、そのサイズを縮小または拡大できます。例えば、ラベルの幅はテキストの量に応じて拡大することができます。
    settings-sizing-stretch

    ストレッチでは、サイズ調整に影響を与える加重を使い、他のコンポーネントと比べてできる限り多くのスペースを 1 つのコンポーネントに使用できます。

    2 つのコンポーネントがストレッチに設定されていると、デフォルトでどちらのコンポーネントにも残りのスペースの 50% が割り当てられます。この比率は加重値を変更して調整できます。

    For example, if you set one component to a weight of 200, and the other to a weight of 100, then the first component occupies two thirds of the remaining space, while the other only takes one third. The first component appears twice the size of the other component, since its weight was two times the second component's weight.

    settings-sizing-pixels ピクセルで固定サイズを設定します。ボックスに整数を入力するか、上向き矢印か下向き矢印を使ってサイズを増加または減少します。コンポーネントにフォーカスがあると、これらの矢印が表示されます。



    高さは、固定サイズに設定したり、表示内容の必要性に応じて高くすることができます。またはサイズ調整に影響を与える加重を使って、他のコンポーネントに比べてできる限り多くのスペースを使用することができます。

    設定 説明
    settings-sizing-auto-size 自動サイズ変更により、コンポーネントの内容に従って、そのサイズを縮小または拡大できます。
    settings-sizing-pixels ピクセルで固定サイズを設定します。ボックスに整数を入力するか、上向き矢印か下向き矢印を使ってサイズを増加または減少します。コンポーネントにフォーカスがあると、これらの矢印が表示されます。
    settings-sizing-stretch

    ストレッチでは、サイズ調整に影響を与える加重を使い、他のコンポーネントと比べてできる限り多くのスペースを 1 つのコンポーネントに使用できます。

    2 つのコンポーネントがストレッチに設定されていると、デフォルトでどちらのコンポーネントにも残りのスペースの 50% が割り当てられます。この比率は加重値を変更して調整できます。

    For example, if you set one component to a weight of 200, and the other to a weight of 100, then the first component occupies two thirds of the remaining space, while the other only takes one third. The first component appears twice the size of the other component, since its weight was two times the second component's weight.




    コンポーネントは、親コンテナーを基準にして、左揃え、右揃え、中央揃えにできます。

    ヒント: 親コンテナーの高さ設定が [自動サイズ変更] に設定されている場合、コンポーネントは垂直方向を基準にして中央揃えにすることはできません。これを修正するには、親コンテナーの高さを [ストレッチ] にするか、ピクセルで固定の高さに設定します。 
    設定
    align-left2 align-left-example2
    align-center2 align-center-example2
    align-right2 align-right-example2
    align-start align-start-example
    align-vertical-center align-vertical-center-example
    align-vertical-end align-vertical-end-example



    境界線の周りの上下左右のスペースに設定されている余白。

    画像は、余白、境界線、およびスペース設定の関係を示しています

    1. To optionally update all margin values at once, press the Set All button for Margin in the properties panel.

      すべて設定ボタンの画像

    2. 余白の値フィールドをクリックします。そのフィールドにスピン コントロールが表示されます。

    3. Use the spin control to increase or decrease the margin. If Set All was selected, the change is applied to all margins.

      settings-margin-spinner

      コンポーネントは新しい余白設定に応じて即座に再配置されます。




    ブール型 (True または False) 変数の値に基づいて、コンポーネントを表示または非表示にします。

    1. [レイアウト] プロパティ グループをクリックします。[表示可能] の下にある [変数を選択] をクリックします。
    2. Select a variable, or optionally create a new Yes/No variable and then assign that new variable to the Visible property.
    3. At runtime, the component is visible when the value of the variable is True. Conversely it is hidden when the variable's value is False.


    詳細



    Web ページのソースは、Web ページ コンポーネント内に埋め込むように Web ページの URL を設定します。Web ページの URL を入力するか、または変数を使用して URL をコンポーネントに渡します。例:

    https://help.mypurecloud.com

    有効な URL が入力されると、Web ページ コンポーネントはページを即座に表示します。

    example-website-url

    URL は https:// で開始する必要があります。リモート サーバーがセキュア http プロトコルをサポートしない場合、ページ コンポーネントはそのサーバーからのページを表示できません。