翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

# ステップ 4. Amazon WorkSpaces アプリケーションと統合するようにウェブサイトを設定する
<a name="configure-website-for-integration"></a>

以下のセクションでは、埋め込み WorkSpaces アプリケーションストリーミングセッションをホストするようにウェブページを設定する方法について説明します。

**Topics**
+ [appstream-embed JavaScript ファイルをインポートする](#import-embed-javascript-file)
+ [`AppStream.Embed` インターフェイスオブジェクトを初期化して設定する](#initialize-configure-embed-interface-object)
+ [WorkSpaces アプリケーションユーザーインターフェイスで項目を非表示にする例](#examples-hiding-user-interface-items)

## appstream-embed JavaScript ファイルをインポートする
<a name="import-embed-javascript-file"></a>

1. WorkSpaces アプリケーションストリーミングセッションを埋め込む予定のウェブページで、次のコードを追加して **appstream-embed.js** ファイルをウェブページにインポートします。

   ```
   <script type="text/javascript" src="./appstream_embed.js"> </script>
   ```

1. 次に、空のコンテナ div を作成します。設定した div の ID は、WorkSpaces Applications 埋め込みコンストラクタに渡されます。その後、ストリーミングセッションの iframe を注入するために使用されます。div を作成するには、以下のコードを追加します。

   ```
   <div id="appstream-container"> </div>
   ```

## `AppStream.Embed` インターフェイスオブジェクトを初期化して設定する
<a name="initialize-configure-embed-interface-object"></a>

JavaScript で `AppStream.Embed` インターフェイスオブジェクトを初期化するには、ストリーミング URL およびユーザーインターフェイス設定のオプションを使用して `AppStream.Embed` オブジェクトを作成するコードを追加する必要があります。これらのオプション、および作成した div ID は、`appstreamOptions` というオブジェクトに保存されます。

以下のサンプルコードでは、`AppStream.Embed` インターフェイスオブジェクトを初期化する方法を示しています。

```
var appstreamOptions = {
     sessionURL: 'https://appstream2.region.aws.amazon.com/authenticate?parameters=authenticationcode...',
     userInterfaceConfig:{[AppStream.Embed.Options.HIDDEN_ELEMENTS]:[AppStream.Embed.Elements.TOOLBAR]}
 };
 appstreamEmbed = new AppStream.Embed("appstream-container", appstreamOptions);
```

コードで、*sessionURL* と *userInterfaceConfig* を独自の値に置き換えます。

**注記**  
*userInterfaceConfig* に指定された値は、WorkSpaces アプリケーションツールバー全体を非表示にします。この値は例として含まれており、オプションです。

***sessionUrl***  
WorkSpaces アプリケーションコンソール、[CreateStreamingURL](https://docs.aws.amazon.com/appstream2/latest/APIReference/API_CreateStreamingURL.html) API アクション、または [create-streaming-url](https://docs.aws.amazon.com/cli/latest/reference/appstream/create-streaming-url.html) AWS CLI コマンドを使用して作成したストリーミング URL。このパラメータは大文字と小文字が区別されます。  
**タイプ**: 文字列  
**必須**: はい

***userInterfaceConfig***  
ユーザーインターフェイス要素の初期状態を生成する設定。この設定はキーと値のペアです。  
キー は`AppStream.Embed.Options.HIDDEN_ELEMENTS`、埋め込み WorkSpaces アプリケーションストリーミングセッションが初期化されたときに最初に非表示になるユーザーインターフェイスオブジェクトを指定します。後で、`getInterfaceState` パラメータを使用して、非表示オブジェクトと表示オブジェクトの両方を返すことができます。  
値は、定数 (ツールバーボタン) の配列です。使用できる定数のリストについては、「[「`HIDDEN_ELEMENTS`」 の使用](constants-functions-events-embedded-sessions.md#constants-hidden-elements)」を参照してください。  
**タイプ**: マップ (*key*:*Value*)  
**必須:** いいえ

## WorkSpaces アプリケーションユーザーインターフェイスで項目を非表示にする例
<a name="examples-hiding-user-interface-items"></a>

このセクションの例では、埋め込み WorkSpaces Applications ストリーミングセッション中に WorkSpaces Applications ユーザーインターフェイスの項目をユーザーから非表示にする方法を示します。

**Topics**
+ [例 1: WorkSpaces アプリケーションツールバー全体を非表示にする](#example-hide-the-entire-tooolbar)
+ [例 2: WorkSpaces アプリケーションツールバーで特定のボタンを非表示にする](#example-hide-a-specific-toolbar-button)
+ [例 3: WorkSpaces アプリケーションツールバーで複数のボタンを非表示にする](#example-hide-multiple-toolbar-buttons)

### 例 1: WorkSpaces アプリケーションツールバー全体を非表示にする
<a name="example-hide-the-entire-tooolbar"></a>

埋め込みストリーミングセッション中にユーザーが WorkSpaces アプリケーションツールバーのボタンにアクセスできないようにするには、 `AppStream.Embed.Elements.TOOLBAR`定数を使用します。この定数を使用すると、すべての WorkSpaces Applications ツールバーボタンを非表示にできます。

```
var appstreamOptions = {
     sessionURL: 'https://appstream2.region.aws.amazon.com/authenticate?parameters=authenticationcode...',
     userInterfaceConfig:{[AppStream.Embed.Options.HIDDEN_ELEMENTS]:[AppStream.Embed.Elements.TOOLBAR]}
 };
```

### 例 2: WorkSpaces アプリケーションツールバーで特定のボタンを非表示にする
<a name="example-hide-a-specific-toolbar-button"></a>

WorkSpaces アプリケーションツールバーを表示しながら、埋め込みストリーミングセッション中にユーザーが特定のツールバーボタンにアクセスできないようにすることができます。そのためには、非表示にするボタンの定数を指定します。以下のコードは、`AppStream.Embed.Elements.FILES_BUTTON` 定数を使用して [**My Files**] ボタンを非表示にします。これにより、ユーザーは埋め込みストリーミングセッション中に永続的ストレージオプションにアクセスできなくなります。

```
var appstreamOptions = {
     sessionURL: 'https://appstream2.region.aws.amazon.com/authenticate?parameters=authenticationcode...',
     userInterfaceConfig:{[AppStream.Embed.Options.HIDDEN_ELEMENTS]:[AppStream.Embed.Elements.FILES_BUTTON]}
 };
```

### 例 3: WorkSpaces アプリケーションツールバーで複数のボタンを非表示にする
<a name="example-hide-multiple-toolbar-buttons"></a>

WorkSpaces アプリケーションツールバーを表示しながら、埋め込みストリーミングセッション中にユーザーが複数のツールバーボタンにアクセスできないようにすることができます。そのためには、非表示にするボタンの定数を指定します。以下のコードは、`AppStream.Embed.Elements.END_SESSION_BUTTON` および `AppStream.Embed.Elements.FULLSCREEN_BUTTON` 定数を使用して、[**End Session**] および [**Fullscreen**] ボタンを非表示にします。

**注記**  
各定数は、前後にスペースを入れずにカンマで区切ります。

```
var appstreamOptions = {
     sessionURL: 'https://appstream2.region.aws.amazon.com/authenticate?parameters=authenticationcode... (https://appstream2.region.aws.amazon.com/#/)',
     userInterfaceConfig:{[AppStream.Embed.Options.HIDDEN_ELEMENTS]:[AppStream.Embed.Elements.END_SESSION_BUTTON,AppStream.Embed.Elements.FULLSCREEN_BUTTON]}
 };
```