Horizon DaaS テナントのブランディング - VMware Horizon DaaS

(1)

Horizon DaaS

テナントのブ

ランディング

(2)

最新の技術ドキュメントは、 VMware の Web サイト（https://docs.vmware.com/jp/） VMware, Inc. 3401 Hillview Ave. Palo Alto, CA 94304 www.vmware.com ヴイエムウェア株式会社 105-0013　東京都港区浜松町 1-30-5 浜松町スクエア13F www.vmware.com/jp

(3)

1 このドキュメントについて

4

2 管理コンソール

5

ログインページ 5 サイドナビゲーションパネル 8 ページの背景 9 ダッシュボードの背景 10 上部ナビゲーションバー 11 アクティブなタブの色 11 ページ上部のボタン 12 [アクティビティ] ページおよび [通知] ページ 12

3 ブラスト

ポータル

16

Blast ポータルのブランディング画像用のフォルダの作成 16 Blast ポータルのログインページ 17 クライアントのロゴ 21 ポータルテキスト 22 ポータルタブ 23

(4)

1

本書では、サービスプロバイダの管理者が、管理コンソールおよびブラストポータルインターフェイスのデフォル

トの外観を変更する方法について説明します。カスタマイズは通常、テナントアプライアンスレベルでお客様から

要求されますが、このプロセスにはアプライアンスのファイルシステムレベルのアクセス権が必要です。

(5)

2

このセクションでは、サービスプロバイダの管理者が、管理コンソールインターフェイスのデフォルトの外観を変更する方法について説明します。管理コンソールのカスタマイズはすべて、組織内の両方のテナントアプライアンスにある

stylesForCustomBranding.css

ファイルを変更することで実行されます。 $> /usr/local/desktone/release/dt-platform-20_2_0/deploy/dt-tenant-node-20.2.0-bin/horizonadmin/ static/css/production/ stylesForCustomBranding.css この章には、次のトピックが含まれています。 n ログインページ n サイドナビゲーションパネル n ページの背景 n ダッシュボードの背景 n 上部ナビゲーションバー n アクティブなタブの色 n ページ上部のボタン n

[

アクティビティ

]

ページおよび

[

通知

]

ページ

このトピックでは、管理コンソールのログインページの要素を変更する方法について説明します。

ページのロゴ

ロゴを変更するには、組織内の両方のテナントアプライアンスで

stylesForCustomBranding.css

ファイルを編集します。 $> /usr/local/desktone/release/dt-platform-20_2_0/deploy/dt-tenant-node-20.2.0-bin/horizonadmin/ static/css/production/ stylesForCustomBranding.css 次の例のように、コードの該当するセクションを編集します。

(6)

n 他のコメント行をコメント解除します。

n 画像ファイルの

URL

を変更します。

/*! App Logo with text */

.login-wrapper .login .brand-logo { display: none;

/*! Remove this when the logo is required. */

background: url('../../static/images//EUC_HorizonLogin_bg.png') no-repeat; width: 100px;

height: 100px;

margin: 0 auto 1rem auto; }

次の図は、上記に示すようにコードが編集されたときのページの外観の例を示しています。

変更前変更後

(7)

ページの背景

背景を変更するには、組織内の両方のテナントアプライアンスで

stylesForCustomBranding.css

ファイルを編集します。 $> /usr/local/desktone/release/dt-platform-20_2_0/deploy/dt-tenant-node-20.2.0-bin/horizonadmin/ static/css/production/ stylesForCustomBranding.css 次の例のように、コードの該当するセクションを編集して、コメントされたテキストをコメント解除し、画像ファイルの

URL

を変更します。

/*! Login Page Background changes */ .login-wrapper {

background: url('../../images/FBG.jpg') no-repeat; }; } 次の図は、上記に示すようにコードが編集されたときのページの外観の例を示しています。変更前変更後

ボタン

ボタンを変更するには、組織内の両方のテナントアプライアンスで

stylesForCustomBranding.css

ファイルを編集します。 $> /usr/local/desktone/release/dt-platform-20_2_0/deploy/dt-tenant-node-20.2.0-bin/horizonadmin/ static/css/production/ stylesForCustomBranding.css 次の例のように、コードの該当するセクションを編集して、コメントされたコードの

2

行をコメント解除し、 border-colorとbackground-colorの色を変更します。 /*! login button */

.login-wrapper .login .login-group .btn { border-color: #00b315;

background-color: #ff5733;

(8)

変更前変更後

サイド

パネル

このトピックでは、管理コンソールのサイドナビゲーションパネルを変更する方法について説明します。ナビゲーションパネルを変更するには、組織内の両方のテナントアプライアンスで

stylesForCustomBranding.css

ファイルを編集します。 $> /usr/local/desktone/release/dt-platform-20_2_0/deploy/dt-tenant-node-20.2.0-bin/horizonadmin/ static/css/production/ stylesForCustomBranding.css 次の例のように、コードの該当するセクションを編集して、コメントされたコードをコメント解除し、background-colorの色コードを変更します。

.main-container .content-container .clr-vertical-nav { background-color: #e8f4ff;

(9)

変更前変更後

ページの背景

このトピックでは、

[

アプリケーション

]

、

[

割り当て

]

、

[

イメージ

]

などの管理コンソールページの背景を変更する方法について説明します。ボタンを変更するには、組織内の両方のテナントアプライアンスで

stylesForCustomBranding.css

ファイルを編集します。 $> /usr/local/desktone/release/dt-platform-20_2_0/deploy/dt-tenant-node-20.2.0-bin/horizonadmin/ static/css/production/ stylesForCustomBranding.css 次の例のように、コードの該当するセクションを編集して、コメントされたコードをコメント解除し、background-colorの色を変更します。 .main-container .navigation-content { background-color: cyan;} 次の図は、このタイプの変更の前後の背景の例を示しています。

(10)

変更前変更後

ダッシュボードの背景

このトピックでは、管理コンソールの

[

ダッシュボード

]

ページの背景を変更する方法について説明します。背景を変更するには、組織内の両方のテナントアプライアンスで

stylesForCustomBranding.css

ファイルを編集します。 $> /usr/local/desktone/release/dt-platform-20_2_0/deploy/dt-tenant-node-20.2.0-bin/horizonadmin/ static/css/production/ stylesForCustomBranding.css 次の例のように、コードの該当するセクションを編集して、コメントされたコードをコメント解除し、色の値 background-colorを変更します。 .main-container .dashboard-background { background-color: #cfe7bb; } 次の図は、このタイプの変更の前後のページの外観の例を示しています。変更前変更後 VMware, Inc. 10

(11)

上部ナビゲーション

バー

このトピックでは、管理コンソールの上部ナビゲーションバーの外観を変更する方法について説明します。ナビゲーションバーを変更するには、組織内の両方のテナントアプライアンスで

stylesForCustomBranding.css

ファイルを編集します。 $> /usr/local/desktone/release/dt-platform-20_2_0/deploy/dt-tenant-node-20.2.0-bin/horizonadmin/ static/css/production/ stylesForCustomBranding.css 次の例のように、コードの該当するセクションを編集して、backgroundを含む行をコメント解除し、色の値を変更します。

/*! Top header and Navigation background change */ .main-container {

/*! Navigation background color */ } .main-container .site-header { background: #0177b3;} 次の図は、上記に示すようにコードが編集されたときのページの外観の例を示しています。変更前変更後

アクティブなタブの色

このトピックでは、管理コンソールのアクティブなタブの色を変更する方法について説明します。アクティブなタブの色を変更するには、組織内の両方のテナントアプライアンスで

stylesForCustomBranding.css

ファイルを編集します。 $> /usr/local/desktone/release/dt-platform-20_2_0/deploy/dt-tenant-node-20.2.0-bin/horizonadmin/ static/css/production/ stylesForCustomBranding.css 次の例のように、コードの該当するセクションを編集して、background-colorを含む行をコメント解除し、色の値を変更します。

.tabstrip .atk-tabs .line-container,

.tabstrip .atk-tabs .atk-tab:not(.active):hover:after { background-color: red !important; }

(12)

変更前変更後

ページ上部のボタン

[

アプリケーション

]

、

[

割り当て

]

、

[

イメージ

]

などの管理コンソールページの上部にあるボタンの外観を変更する方法について説明します。ボタンを変更するには、組織内の両方のテナントアプライアンスで

stylesForCustomBranding.css

ファイルを編集します。 $> /usr/local/desktone/release/dt-platform-20_2_0/deploy/dt-tenant-node-20.2.0-bin/horizonadmin/ static/css/production/ stylesForCustomBranding.css 次の例のように、コードの該当するセクションを編集して、border-color、background-color、colorを含む行をコメント解除し、色の値を変更します。 .atk-btn, .btn { border-color: #00b816 !important; background-color: #blue !important; color: $white !important; }

次の図は、上記に示すようにコードが編集されたときのページの外観の例を示しています。変更前変更後

[

アクティビティ

]

ページおよび

[

通知

]

ページ

[

アクティビティ

]

ページおよび

[

通知

]

ページの要素を変更する方法について説明します。

[

タスクをキャンセル

]

ボタン

stylesForCustomBranding.css

ファイルを編集します。 $> /usr/local/desktone/release/dt-platform-20_2_0/deploy/dt-tenant-node-20.2.0-bin/horizonadmin/ static/css/production/ stylesForCustomBranding.css VMware, Inc. 12

(13)

次の例のように、コードの該当するセクションを編集して、border-color、background-color、colorを含む行をコメント解除し、色の値を変更します。

#zedd-content .modal-footer .btn { border-color: blue !important; background-color: green !important; color: black !important; }

並べ替えアイコン

並べ替えアイコンを変更するには、組織内の両方のテナントアプライアンスで

stylesForCustomBranding.css

ファイルを編集します。 $> /usr/local/desktone/release/dt-platform-20_2_0/deploy/dt-tenant-node-20.2.0-bin/horizonadmin/ static/css/production/ stylesForCustomBranding.css 次の例のように、コードの該当するセクションを編集して、colorを含む行をコメント解除し、色の値を変更します。

#zedd-content .datagrid-column-title .sort-icon { color: orange !important; }

アクティブなタブ

アクティブなタブの外観を変更するには、組織内の両方のテナントアプライアンスで

stylesForCustomBranding.css

ファイルを編集します。 $> /usr/local/desktone/release/dt-platform-20_2_0/deploy/dt-tenant-node-20.2.0-bin/horizonadmin/ static/css/production/ stylesForCustomBranding.css 次の例のように、コードの該当するセクションを編集して、background、box-shadow、-webkit-box-shadowを含む行をコメント解除し、色の値を変更します。

#zedd-content .nav .nav-link { background: pink !important;

box-shadow: 0 -3px 0 red inset !important;

(14)

チェック

ボックス

チェックボックスを変更するには、組織内の両方のテナントアプライアンスで

stylesForCustomBranding.css

ファイルを編集します。 $> /usr/local/desktone/release/dt-platform-20_2_0/deploy/dt-tenant-node-20.2.0-bin/horizonadmin/ static/css/production/ stylesForCustomBranding.css 次の例のように、コードの該当するセクションを編集して、backgroundを含む行をコメント解除し、色の値を変更します。

.clr-checkbox-wrapper input[type=checkbox]:checked + label::before { background: red !important;

ページの背景

背景を変更するには、組織内の両方のテナントアプライアンスで

stylesForCustomBranding.css

ファイルを編集します。 $> /usr/local/desktone/release/dt-platform-20_2_0/deploy/dt-tenant-node-20.2.0-bin/horizonadmin/ static/css/production/ stylesForCustomBranding.css 次の例のように、コードの該当するセクションを編集して、backgroundを含む行をコメント解除し、色の値を変更します。 #zedd-content {

/*! Activity and Notification (all clarity pages) Background */ .main-container {

background: red !important; }

(15)

(16)

3

このセクションでは、サービスプロバイダの管理者が、ブラストポータルインターフェイスのデフォルトの外観を変更する方法について説明します。ロゴのカスタマイズを実行する前に、次の手順を実行する必要があります。

1

テナントアプライアンスに

root

ユーザーとしてログインします。

2

フォルダ

DEPLOYMENT_PATH/appblast/webclient/icons-15736269/

に移動します。

3 custom

という名前の新しいフォルダを作成します。

4

ブランディングに使用するすべての画像を

custom

フォルダに配置します。

5 CSS

ファイルを編集してブランディングのロゴを変更します。 $> /usr/local/desktone/release/dt-platform-20_2_0/deploy/dt-tenant-node-20.2.0-bin/appblast/ webclient/style.app-htmlaccess.f33ab3196e5a180e246e.css この章には、次のトピックが含まれています。 n

Blast

ポータルのブランディング画像用のフォルダの作成 n

Blast

ポータルのログインページ n クライアントのロゴ n ポータルテキスト n ポータルタブ

Blast

ポータルのブランディング画像用のフォルダの作成

Blast

ポータルのブランディングにカスタム画像ファイルを使用する予定がある場合は、そのファイル用のフォルダを作成する必要があります。手順

1

テナントアプライアンスに

root

ユーザーとしてログインします。

2

フォルダ

DEPLOYMENT_PATH/appblast/webclient/icons-15736269/

に移動します。

3 custom

という名前のフォルダを作成します。 VMware, Inc. 16

(17)

Blast

ポータルのログイン

ページ

このトピックでは、管理コンソールのログインページの要素を変更する方法について説明します。注：

開始する前に、このプロセスに使用しているすべてのカスタム

ファイルを

DEPLOYMENT_PATH/appblast/

webclient/icons-15736269/custom

に追加します。このフォルダをまだ作成していない場合は、

Blast

ポータルのブランディング画像用のフォルダの作成を参照してください。

ロゴの色

ロゴの色を変更するには、組織内の両方のテナントアプライアンスで

style.app-htmlaccess.f33ab3196e5a180e246e.css

ファイルを編集します。 $> /usr/local/desktone/release/dt-platform-20_2_0/deploy/dt-tenant-node-20.2.0-bin/appblast/webclient/ style.app-htmlaccess.f33ab3196e5a180e246e.css 下の図のように、このファイルのセクションを編集します。編集されたテキストはBRANDING_RESOURCE_PATH/ horizon.pngとなります。 .ui-pattern-logo { height: 112px; margin: 0 auto; width: 180px;

background: url(BRANDING_RESOURCE_PATH/horizon.png) no-repeat; margin-bottom: 32px;

}

(18)

変更前変更後

ロゴのサイズ

ロゴのサイズを変更するには、組織内の両方のテナントアプライアンスで

style.app-htmlaccess.f33ab3196e5a180e246e.css

ファイルを編集します。 $> /usr/local/desktone/release/dt-platform-20_2_0/deploy/dt-tenant-node-20.2.0-bin/appblast/webclient/ style.app-htmlaccess.f33ab3196e5a180e246e.css 下の図のように、このファイルのセクションを編集します。編集されたテキストはBRANDING_RESOURCE_PATH/ horizon_2x.pngとなります。 .ui-pattern-logo { height: 112px; margin: 0 auto; width: 180px;

background: url(BRANDING_RESOURCE_PATH/horizon_2x.png) no-repeat; margin-bottom: 32px;

}

次の図は、これらの変更の前後のページの外観の例を示しています。

(19)

変更前変更後

ボタン

style.app-htmlaccess.f33ab3196e5a180e246e.css

ファイルを編集します。 $> /usr/local/desktone/release/dt-platform-20_2_0/deploy/dt-tenant-node-20.2.0-bin/appblast/webclient/ style.app-htmlaccess.f33ab3196e5a180e246e.css 下の図のように、このファイルのセクションを編集します。編集されたテキストはredとなります。

ui-panel-footer .btn-primary[disabled], .ui-panel-footer .btn-primary[disabled]:hover { background-color: red ; border-radius: 4px; width: 295px; height: 41px; } 次の図は、これらの変更の前後のページの外観の例を示しています。

(20)

変更前変更後

ページのフッター

ロゴを変更するには、組織内の両方のテナントアプライアンスで

style.app-htmlaccess.f33ab3196e5a180e246e.css

ファイルを編集します。 $> /usr/local/desktone/release/dt-platform-20_2_0/deploy/dt-tenant-node-20.2.0-bin/appblast/webclient/ style.app-htmlaccess.f33ab3196e5a180e246e.css 下の図のように、このファイルのセクションを編集します。編集されたテキストはBRANDING_RESOURCE_PATH / vmware_logo_dark.svgとなります。 .bottom-logo { width: 83px; height: 13px; opacity: 100%; position: absolute; bottom: 30px; left: 51%; margin-left: -52px;

background: url(BRANDING_RESOURCE_PATH /vmware_logo_dark.svg) no-repeat; background-size: 83px 13px;

次の図は、これらの変更の前後のページの外観の例を示しています。

(21)

変更前変更後

クライアントのロゴ

このトピックでは、クライアントユーザーインターフェイスのロゴを変更する方法について説明します。注：

開始する前に、このプロセスに使用しているすべてのカスタム

ファイルを

DEPLOYMENT_PATH/appblast/

webclient/icons-15736269/custom

Blast

ポータルのブランディング画像用のフォルダの作成を参照してください。ロゴの色を変更するには、組織内の両方のテナントアプライアンスで

style.app-htmlaccess.f33ab3196e5a180e246e.css

ファイルを編集します。 $> /usr/local/desktone/release/dt-platform-20_2_0/deploy/dt-tenant-node-20.2.0-bin/appblast/webclient/ style.app-htmlaccess.f33ab3196e5a180e246e.css

(22)

下の図のように、このファイルのセクションを編集します。編集されたテキストはBRANDING_RESOURCE_PATH/

logo-horizon.pngとなります。

.navbar-brand {

background: url(BRANDING_RESOURCE_PATH/logo-horizon.png) no-repeat; background-size: 161px 40px; display: block; width: 161px; height: 40px; 次の図は、これらの変更の前後のページの外観の例を示しています。変更前変更後

ポータル

テキスト

Blast

ポータルのテキストの外観をカスタマイズする方法について説明します。テキストの外観を変更するには、該当する言語の

JSON

ファイルを編集します。

JSON

ファイルは、次の場所にあります。 $> /usr/local/desktone/release/dt-platform-20_2_0/deploy/dt-tenant-node-20.2.0-bin/appblast/locale/ サポートされている言語の

JSON

ファイルを次の表に示します。言語ファイル英語 en.json ドイツ語 de.json フランス語 fr.json スペイン語 es.json 日本語 ja.json 韓国語 ko.json VMware, Inc. 22

(23)

言語ファイル中国語-簡体字 zh_CN.json 中国語-繁体字 zh_TW.json 次の表に、

_ja.json

ファイルをカスタマイズする例を示します。これらのテキスト文字列には、テキスト_CUSTOMを追加します。デフォルトのテキスト文字列カスタムブランドテキスト文字列 "LOGOFF_DESKTOP_M": "{0} からログオフしてもよろしいですか?" "LOGOFF_DESKTOP_M": "カスタム {0} からログオフしてもよろしいですか?"

"dialog_confirm_logout": "Horizon Connection Server からログアウトしてもよろしいですか?"

"dialog_confirm_logout": "カスタム Horizon Connection Server からログアウトしてもよろしいですか?" "dialog_confirm_logoff": "このデスクトップからログオフしてもよろしいですか?" "dialog_confirm_logoff": "このカスタムデスクトップからログオフしてもよろしいですか?" "dialog_confirm_restart": "このテストデスクトップを再起動してもよろしいですか?" "dialog_confirm_restart": "このカスタムテストデスクトップを再起動してもよろしいですか?" "dialog_confirm_cancel_startsession": "接続の変更の試行に時間がかかりすぎています。続行しますか?" "dialog_confirm_cancel_startsession": "接続のカスタム変更の試行に時間がかかりすぎています。続行しますか?" 次の図は、カスタマイズされたテキストを含むダイアログボックスの例を示しています。

ポータル

タブ

Blast

ポータルタブのロゴを変更する方法について説明します。注：

開始する前に、このプロセスに使用しているすべてのカスタム

ファイルを

DEPLOYMENT_PATH/appblast/

webclient/icons-15736269/custom

Blast

ポータルのブランディング画像用のフォルダの作成を参照してください。ポータルタブのロゴを変更するには、

favicon.ico

ファイルを置き換えます。 /usr/local/desktone/release/dt-platform-20_2_0/deploy/dt-tenant-node-20.2.0-bin/appblast/favicon.ico 注：

ブランディングの更新を表示するには、エンド

ユーザーはブラウザのキャッシュをクリアしてポータルページを再ロードする必要があります。次の図は、この変更の前後のページの外観の例を示しています。

(24)

変更前変更後