統合ユーザーエクスペリエンスのサポート
注：
「StoreFront」（この名称に変更はありません）は、Citrix Virtual Apps and Desktopsサイトからアプリケーションとデスクトップを集約して、使いやすい単一のストアとして機能するエンタープライズアプリストアです。Citrix ReceiverのテクノロジーはCitrix Workspaceアプリに含まれるようになりました。現在、製品と製品ドキュメントで移行作業が行われています。統合エクスペリエンスで「Citrix Receiver」を使用するなど、製品内コンテンツには古い名称が含まれる場合があります。この移行の間はご迷惑をおかけしますが、何卒ご容赦願います。製品の新しい名称について詳しくは、https://www.citrix.com/products/を参照してください。
StoreFrontは、統合ユーザーエクスペリエンスをサポートします。統合エクスペリエンスにより、集中管理されたHTML5ユーザーエクスペリエンスがすべてのWebおよびネイティブCitrix Workspaceアプリで体感できます。これはカスタマイズとお勧めのアプリケーショングループの管理をサポートしています。
このバージョンのStoreFrontを使用して作成されたストアでは、統合エクスペリエンスが使用されます。
StoreFront管理コンソールを使って、次のCitrix Receiver for Web関連タスクを実行します：
- Citrix Receiver for Webサイトの作成。
- Citrix Receiver for Webサイトエクスペリエンスの変更。
- ストアに割り当てる統合Citrix Receiver for Webサイトの選択。
- Receiverの外観をカスタマイズします。
JavascriptとCSSを使用してCitrix Receiver for Webページをカスタマイズします。
複数サーバーによる展開環境では、複数のサーバー上で同時にサーバーグループの構成を変更しないでください。展開内のほかのサーバー上でCitrix StoreFront管理コンソールを同時に実行していないことを確認してください。変更が完了したら、構成の変更をサーバーグループに反映させて、展開内のほかのサーバーを更新します。
注：
XenApp 6.xを使用している場合、［クライアントへのストリーム配信］ または ［可能な場合はストリーム配信、それ以外の場合はサーバーからアクセス］ に設定されているアプリケーションは、統合エクスペリエンスを有効にしてもサポートされません。
Citrix Receiver for WebのWebサイトの作成
ストアを作成すると、Citrix Receiver for Webサイトが自動的に作成されます。また、次のことを実行して追加のReceiver for Webサイトを作成することもできます。
- Windowsの ［スタート］ 画面または ［アプリ］ 画面で、［Citrix StoreFront］タイルをクリックします。
- Citrix StoreFront管理コンソールの左ペインで［ストア］ノードを選択して、［操作］ペインで ［Receiver for Webサイトの管理］>［追加］ の順にクリックしてウィザードの指示に従います。
ストアに割り当てる統合Citrix Receiver for Webサイトの選択
StoreFrontを使って新しいストアが作成されると、Citrix Receiver for Webサイトが自動的に作成され、ストアに割り当てられます。Citrix Receiver for Webサイトは統合エクスペリエンスを使用します。ストアに複数のReceiver for Webサイトがある場合、ユーザーがCitrix Workspaceアプリを使用してストアにアクセスしたときにどのReceiver for Webサイトを表示するかを選択する必要があります。
- Windowsの ［スタート］ 画面または ［アプリ］ 画面で、［Citrix StoreFront］ タイルをクリックします。
- Citrix StoreFront管理コンソールの左ペインで ［ストア］ ノードを選択し、中央のペインでストアを選択して、［操作］ ペインで ［統合エクスペリエンスの構成］ をクリックします。作成されたCitrix Receiver for WebのWebサイトがない場合は、Receiver for Webサイトの追加ウィザードへのリンクを含むメッセージが表示されます。
- ユーザーがこのストアにアクセスしたときにCitrix Workspaceアプリクライアントが表示するデフォルトのReceiver for Webサイトを選択します。
- ［OK］ をクリックします。
Citrix Receiverの外観のカスタマイズ
- Windowsの ［スタート］ 画面または ［アプリ］ 画面で、［Citrix StoreFront］タイルをクリックします。
- Citrix StoreFront管理コンソールの左ペインで ［ストア］ ノードを選択して、［操作］ペインで［Receiver for Webサイトの管理］>［構成］の順にクリックします。
- ［外観のカスタマイズ］ を選択し、項目を選択してログオン後のWebサイトの表示方法をカスタマイズします。
JavascriptとCSSによる追加のカスタマイズ
注：
このセクションの例では、C:\inetpub\wwwroot\Citrix\StoreWeb\customなどにあるscript.jsファイルにJavascriptを追加し、同じディレクトリのstyle.cssファイルにCSSを追加します。
Receiver for Webのログインページに静的ヘッダーを追加
ここで「静的」とは、ウェルカムメッセージや会社名などの固定のテキストのことです。ニュースメッセージやサーバーの状態などのように変化する場合は、「Receiver for Webのログインページに動的ヘッダーを追加」を参照してください。
次のJavaScriptの行を使用して、4か所に静的テキストを追加できます：
$('.customAuthHeader').html("Example one - top of login screen");
$('.customAuthTop').html("Example two - above login box");
$('.customAuthBottom').html("Example three - below login box");
$('.customAuthFooter').html("Example four - bottom of login screen");
<!--NeedCopy-->
テキストをわかりやすくするために、custom.cssに次のスタイルを追加します：
.customAuthHeader,
.customAuthFooter,
.customAuthTop,
.customAuthBottom
{
font-size:16px;
color:yellow;
text-align: center;
}
<!--NeedCopy-->
これにより、以下のような結果になります：
HTML形式を使用するには、4行のjavascriptを次の内容に置き換えます：
$('.customAuthHeader').html("<b>Example one</b> – top of login screen");
$('.customAuthTop').html("<div style='background:black'>Example two – above login box</div>");
$('.customAuthBottom').html("<i>Example three – below login box</i>");
$('.customAuthFooter').html("<img src='logo.png'>Example four – bottom of login screen");
<!--NeedCopy-->
注：
例の4行目は、カスタムディレクトリの画像の名称がlogo.pngの場合です。
Receiver for Webのログインページに動的ヘッダーを追加
ここで「動的」とは、キャッシュされるのではなく、コンテンツが毎回読み込まれて表示されることを意味します。Webブラウザーは可能な限りコンテンツをキャッシュしますが、Citrix Workspaceアプリは常にUIをキャッシュし、常に以前キャッシュされたUIを読み込みます。つまり、サービスの状態などで以前の例を使用すると、意図した内容を取得できません。
コンテンツを動的に読み込んでページに挿入するためには、代わりにAjax呼び出しを使用する必要があります。これを行うには：
-
サーバーの\customwebディレクトリでページ内のコンテンツを取得する便利なユーティリティ関数を定義し、ページに追加します。これによって、上記の.htmlの例と同じことが行われます。カスタムページには、テキストまたはHTMLスニペットを含めることができます。\customwebディレクトリを使用します。これは、（\customディレクトリ同様）StoreFrontサーバーグループのすべてのサーバーにコピーされますが、ダウンロードされたりキャッシュされることはありません。
-
この関数が適切な時点で呼び出されるようにします。関数の呼び出しが早すぎると、Citrix Workspaceアプリで問題が発生します。これは、構成が完全に読み込まれる前にスクリプトが実行されるためです。こうした操作に適切なタイミングはbeforeDisplayHomeScreenです（ただし、ログインページにコンテンツを表示する場合は、代わりにbeforeLoginを使用します）。以下のコードは両方のケースを処理し、Webおよびネイティブクライアントに適しています。
完全なスクリプトは次のとおりです：
function setDynamicContent(txtFile, element) {
CTXS.ExtensionAPI.proxyRequest({
url: "customweb/"+txtFile,
success: function(txt) {$(element).html(txt);}});
}
var fetchedContent=false;
function doFetchContent(callback)
{
if(!fetchedContent) {
fetchedContent = true;
setDynamicContent("ReadMe.txt", "#customScrollTop");
}
callback();
}
CTXS.Extensions.beforeDisplayHomeScreen = doFetchContent;
CTXS.Extensions.beforeLogon = doFetchContent;
<!--NeedCopy-->
これによって、デフォルトでは不要な情報も含まれる\customweb\readme.txtからコンテンツを読み込みます。独自のファイル（status.txt）を追加して、より有用な結果を得られるようにスクリプトの呼び出しを調整します。
ログイン前後にクリックスルー免責事項を表示する
以下は、script.jsファイルで既に例として提供されていますが、コメント解除が必要です。このコードには2つのバージョンがあります。1つ目はWebブラウザーのログイン前に実行され、2つ目はネイティブクライアントのメインUI表示前に実行されます。ログイン後のメッセージのみが必要な場合は、最初の関数を削除します。ただし、ログイン前メッセージのみを使用するのは適切ではありません。その理由は、このログインフローがWebブラウザーでのみ表示され、ネイティブクライアントでは表示されないためです。Webブラウザーでのみ表示されている場合でも、ユーザーがCitrix Gatewayからアクセスしている時は、このログインフローは表示されません。
var doneClickThrough = false;
// Before web login
CTXS.Extensions.beforeLogon = function (callback) {
doneClickThrough = true;
CTXS.ExtensionAPI.showMessage({
messageTitle: "Welcome!",
messageText: "Only for WWCo Employees",
okButtonText: "Accept",
okAction: callback
});
};
// Before main screen (both web and native)
CTXS.Extensions.beforeDisplayHomeScreen = function (callback) {
if (!doneClickThrough) {
CTXS.ExtensionAPI.showMessage({
messageTitle: "Welcome!",
messageText: "Only for WWCo Employees",
okButtonText: "Accept",
okAction: callback
});
} else {
callback();
}
};
<!--NeedCopy-->
クリックスルー免責事項ボックスを拡張する
CTXS.ExtensionAPI.showMessage() で使用されるメッセージボックスは事前にスタイルが定義されています。このスタイルを拡張して、その他のメッセージでも対応できるようにできます。次の関数例をscript.jsに追加して、後からスタイルを再度縮小できます。さらに大きいボックスが必要な場合は、showLargeMessage()をCTXS.ExtensionAPI.showMessage()の代わりに呼び出します。
function mkLargeMessageExitFn(origfn)
{
if(origfn) {
return function() {
origfn();
window.setTimeout(function() {$('body').removeClass('largeMessage');},500);
};
}
}
function showLargeMessage(details)
{
$('body').addClass('largeMessage');
details.cancelAction = mkLargeMessageExitFn(details.cancelAction);
details.okAction = mkLargeMessageExitFn(details.okAction);
CTXS.ExtensionAPI.showMessage(details);
};
<!--NeedCopy-->
これによって、大きなメッセージが表示されている時、マーカークラスが追加されます。ボックスを閉じると、（不要な「ジャンプ」を回避するために）少し遅れてこのマーカークラスが削除されます。
このマーカークラスの存在に基づいてボックスのサイズを調整するためのCSSを追加します。たとえば、custom\style.cssで以下を実行します：
.largeTiles .largeMessage .messageBoxPopup
{
width:800px;
}
<!--NeedCopy-->
これによって、messageBoxPopupが大きなUIに表示され、largeMessageフラグが設定されます。その幅は800ピクセルです。既存のコードで確実にセンタリングされます（携帯電話などの小さなUIでは、デフォルトのメッセージボックスは既に最大幅です）。
さらに多くのテキストを表示するには、custom\style.cssに次を追加してフォントサイズを縮小するか、スクロール可能なコンテンツを追加します。
.largeTiles .largeMessage .messageBoxText
{
font-size:10px;
}
<!--NeedCopy-->
クリックスルー免責事項ボックスをスクロール可能にする
showMessageを呼び出すと、単なる文字列ではなくHTMLを渡してスタイルを追加できます。このためには、以前のshowMessageの呼び出し例におけるmessageTextを次のように置き換えます：
CTXS.ExtensionAPI.showMessage({
messageTitle: "Welcome!",
messageText: "<div class='disclaimer'>rhubarb rhubarb rhubarb ... rhubarb rhubarb</div>",
okButtonText: "Accept",
okAction: callback });
<!--NeedCopy-->
次に、style.cssに以下を追加します：
.disclaimer {
height: 200px;
overflow-y: auto;
}
<!--NeedCopy-->
これにより、以下のような結果になります：
各ページにフッターを追加
これを指定するためのカスタム領域がもう1つあります。次のJavascriptの行を追加してその内容を設定できます：
$('#customBottom').html("For ACME Employees Only");
<!--NeedCopy-->
style.cssでスタイルを定義します。position:staticを設定して、スクロール領域が正しく機能するようにします。
#customBottom
{
text-align:center;
font-size:30px;
position:static;
}
<!--NeedCopy-->
注：
スクリプトを使用してこの領域のサイズを動的に変更する場合は、CTXS.ExtensionAPI.resize()コマンドを呼び出して、Citrix Workspaceアプリに変更が加えられたことを認識させる必要があります。
ユーザーがアプリタブに移動する場合、フォルダービューをデフォルトにする
このためには、「ビュー変更」イベントを監視します。「ストア」（アプリビューの内部名）へのビューが変更されると、ルートフォルダーに移動します。以下は、注意事項です：
-
onViewChangeイベントが発火した場合（ストアビューの変更中）、ビューは描画を完了しません。したがって、すぐにフォルダーに移動すると、ストアビューの初期化コードが使用したコードの後に実行されるため、実行した作業を元に戻すだけです。これを回避するには、現在のスタックが元に戻された後にコードが実行されるように、1ミリ秒の遅延を追加します。
-
「whitespace」という単語を含む3行は、最初の［すべてのアプリケーション］のUIの上に大きなカスタム領域を配置することによって画面外に表示されるようにします。これにより、フォルダーが表示される前の［すべてのアプリケーション］ビューのちらつきが収まります。
通常どおり、script.jsに次のコードを追加します：
$('#customScrollTop').append('<div class="whitespace"></div>');
CTXS.Extensions.onViewChange = function(view) {
if (view == "store") {
$('.whitespace').height(5000);
window.setTimeout(function() {
CTXS.ExtensionAPI.navigateToFolder("/");
$('.whitespace').height(0);
}, 1);
}
};
<!--NeedCopy-->
［すべてのアプリケーション］からおすすめカテゴリにも表示されるアプリを非表示にする
このために、以下のコードを使用できます。まずバンドル内のすべてのアプリを記憶し、「すべてのアプリの表示」一覧からそれらを削除します。
var bundleApps = [];
CTXS.Extensions.sortBundleAppList = function(apps,bundle, defaultfn) {
for (var i = 0; i < apps.length; i++) {
bundleApps.push(apps[i]);
}
defaultfn();
};
CTXS.Extensions.filterAllAppsDisplay = function(allapps) {
for (var i = 0; i < allapps.length; i++) {
if ($.inArray(allapps[i], bundleApps) != -1) {
allapps.splice(i, 1);
i--;
}
}
};
<!--NeedCopy-->
このカスタマイズを使用する場合は、ユーザーが混乱しないように、「All Apps」というテキスト文字列を「Other Apps」に変更することをお勧めします。このためには、カスタムディレクトリのstrings.en.jsファイルを編集し、AllAppsTitleのタグを追加します。たとえば、変更を黄色で表示する場合、以下のようになります：
(function ($) {
$.localization.customStringBundle("en", {
<span style="background-color: yellow;">AllAppsTitle: "Other Apps",</span>
Example1: "This is an example",
Example2: "This is another example"
});
})(jQuery);
<!--NeedCopy-->
デフォルトのUIテキストを変更する
ラベルの名前が判明している場合、UIで使用されているテキストを変更できます。たとえば、Google ChromeのReceiver for Webで使用される「Install」画面を「Get Started」に変更するには、次のようにカスタム文字列を追加します：
(function ($) {
$.localization.customStringBundle("en", {
<span style="background-color: yellow;">Install: "Get Started",</span>
Example1: "This is an example",
Example2: "This is another example"
});
})(jQuery);
<!--NeedCopy-->
変更するラベルの名前を見つけるには、以下を実行します：
- StoreFrontサーバーでディレクトリC:\inetpub\wwwroot\citrix\StoreWeb\receiver\js\localization\enを探します（ストア名が「Store」の場合）。
- メモ帳でファイルctxs.strings_something.jsを開きます。
- 変更する文字列を探します。注：このファイルを直接編集する代わりに、「install 」例でのようにカスタムディレクトリの上書き値を作成します。
おすすめカテゴリの背景画像を変更する
重要：
サーバー上の画像を上書きしないでください。クライアントは変更を認識できないため、既に画像をダウンロードしたクライアントを混乱させることになります。また、これによってアップグレードで問題が発生したり、失敗したりします。
独自の画像を\customディレクトリに追加し、CSSを参照として追加できます。おすすめカテゴリ（内部の名称は「bundle」）ごとに2つの画像を使用します：
- 最初の画像はカルーセルのタイルとして使用されます。
- 2番目の画像は、詳細ページのヘッダーの背景画像として使用されます。この画像は画面の幅いっぱいに引き伸ばされ、下端の方はぼかしが追加されます。
画面ごとに異なる画像を使用できます。詳細ページで同じ画像を使用し、背景の高さを2倍にすると、画像の上半分だけが表示されます。画像は詳細ページ上で引き伸ばされるため、変形しても問題がない画像を使用してください。
最初のbundleのクラスは「appBundle1」、2番目は「appBundle2」で、「appBundle8」まで使用できます。以下の例では「clouds.png」を使用しています。これは、以下の画像を右クリックしてダウンロードできます：
- \customディレクトリに画像を保存します。他の画像と同様の約520×256ピクセルのサイズにしてください（必要に応じて拡大縮小します）。
- style.cssに以下を追加します：
.appBundle1 {
background-image: url('clouds.png');
}
.bundleDetail.appBundle1 {
background-image: url('clouds.png');
background-size: 100% 200%;
}
<!--NeedCopy-->
これにより、以下のような結果になります：
会社のロゴがぼやけないようにする
Receiver for Webは標準（「低DPI」）の画面と、1インチあたりのピクセル数が多い、新しい高画質（「高DPI」）画面の両方を正しく処理する必要があります。たとえば、Apple Retinaの画面は、Retina以外の画面の2倍の解像度です。ノートブックPCでは、画面は通常、同サイズの「標準」のピクセル数に対して1.5倍、2倍、または3倍のこともあります。現時点では、最も一般的なのは2倍であり、解像度の違いが最も明確になるため、Citrix Workspaceアプリは大半の画像アセットを2つの解像度で保有しています。標準の画面用の100×100ピクセルの画像と、2倍の解像度用の200×200ピクセルです。
StoreFront管理コンソールからロゴ画像をアップロードするときは、2倍の画像であることを確認してください。つまり、標準画面の約2倍の幅と高さの「スペース」になります（1倍でアップロードされた画像を2倍に拡大することはできません）。標準画面の「スペース」は170×40ピクセルであるため、アップロードするロゴ画像は約340×80ピクセルにする必要があります。
StoreFrontはロゴのコピーを作成し、それを半分のサイズに縮小します。この画像は低DPIディスプレイで使用されます。
この場合、画像の詳細の半分が破棄されるため、画像がぼやけることもあります。ただし、ロゴは明瞭度が高くシンプルであることが多いため、ぼやけることはほぼありません。ロゴでこの問題が発生した場合は、次の回避策を使用します：
- 1倍サイズ、2倍サイズの2つのバージョンのロゴを作成し、\customディレクトリに保存します。
- custom\style.cssを編集して、2つの異なる画像を参照できるようにします。次のようになります：
<span style="color: green;">/* The following section of the file is reserved for use by StoreFront. \*/</span>
<span style="color: green;">/\* CITRIX DISCLAIMER: START OF MANAGED SECTION. PLEASE DO NOT EDIT ANY STYLE IN THIS SECTION \*/</span>
<span style="color: green;">/\* CITRIX DISCLAIMER: END OF MANAGED SECTION. \*/</span>
<span style="color: green;">/\* You may add custom styles below this line. */</span>
.logo-container {
background-image: url('mylogo_x1.png');
background-size: 169px 21px;
}
.highdpi .logo-container {
background-image: url('mylogo_x2.png');
background-size: 169px 21px;
}
<!--NeedCopy-->
注：
- これらのカスタムスタイルが「managed section」内にないことを確認してください。「managed section」内にあると、上書きされるか、StoreFront管理コンソールを混乱させることになります。
- 両方のスタイルは同じ背景サイズを指定します。これは、サイズが「論理的な」単位で指定されており、2倍画像の場合、背景サイズは実際のロゴの幅と高さの半分になるためです。
背景イメージを設定する
注：
統合エクスペリエンスは、シンプルな白の背景用に設計されています。背景画像は邪魔になることが多いためです。そのため、背景画像を追加する場合は、明度の高いシンプルな画像を使用します。この画像に対応できるよう、必要に応じてフォントを調整してください。
例1：アップロードされた画像へのCSSリファレンス
custom.cssを次のように変更します：
.storeViewSection {
background: url('images/background.jpg') no-repeat center center fixed;
background-size: cover;
}
<!--NeedCopy-->
注：
background-size:cover;ステートメントは、一部の古いブラウザーでは機能しません。
例2：微調整による既存の画像へのCSSリファレンス
custom.cssを次のように変更します：
.storeViewSection {
background: url('../media/bg_bubbles.jpg') no-repeat center center fixed;
background-size: cover;
color: white;
}
// Tweak fonts
.smallTiles .storeapp .storeapp-name,
.largeTiles .storeapp .storeapp-name {
color: white;
}
// Tweak bundle area so it doesn't clash as badly
.largeTiles .applicationBundleContainer {
background-color: rgba(255, 255, 255, 0.4);
margin-top: 0;
padding-top: 25px;
}
.smallTiles .applicationBundleContainer {
background-color: rgba(255, 255, 255, 0.4);
margin-top: 0;
padding-top: 14px;
}
<!--NeedCopy-->
これにより、以下のような結果になります：
コード内のエラーを見つける
デバッグには、いくつかの方法があります。必ず最初にブラウザーを試してください。これはCitrix Workspaceアプリでカスタマイズをデバッグするよりもはるかに簡単です。ページURLで「?」や「#」の後に次の引数を追加して、一度に複数の文字列をつなぎ合わせることができます。例：
http://storefront.wwco.net/Citrix/StoreWeb/#-tr-nocustom
<!--NeedCopy-->
-errors - 通常、コードで発生する可能性があるエラーを回避しようとしますが、代わりにエラーを明確にすることもできます。この引数は、エラーが発生した時にアラートボックスを表示します。
-debug - この引数は、カスタマイズコードの例外処理を無効にします。これは、最近のブラウザーに組み込まれた開発ツール（Google ChromeやInternet ExplorerのF12など）で役に立ち、例外を自身でデバッグできます。
-nocustom - この引数は、スクリプトとCSSカスタマイズを無効にします。これは、Citrix Workspaceアプリが機能していない場合に、エラーが何らかの作業の結果かを確認する時に役に立ちます。
-tr - この引数は、個別のブラウザータブでCitrix WorkspaceアプリのUIコードのトレースを提供します（CTXS.ExtensionAPI.trace()の呼び出しで追加するトレースなど）。
統合ユーザーエクスペリエンス
ここでは統合エクスペリエンスの機能と外観について説明します。
カードのレイアウト
ストアのアプリは、「カード」レイアウトで表示されます。各カードの下のパネルを展開して、詳細および操作を表示できます。
注：
統合エクスペリエンスでは、ユーザーがドラッグアンドドロップでアプリケーションを再配置することはできません。
Home
ホームにはお気に入りが表示されます。
お気に入り
アイテムをお気に入りに登録するには、星をクリックまたはタップします：
検索
すべてのアプリ、デスクトップ、カテゴリを横断して検索します：
設定
ドロップダウンメニューのアクセス設定です：
メニューには、Active Directoryの表示名を使用したユーザー名が表示されます。表示名が空白の場合（推奨されていません）、ドメインとアカウント名が表示されます。メニューを使用して［設定］ページを開き、Citrix Workspaceアプリのバージョンを確認するかログオフします。
設定では、切断されたセッションを再開したり、現在のすべてのセッションを切断したり、ログアウトしたりできます。カードレイアウトまたは一覧レイアウトの設定ページを表示します：
接続。切断されたセッションを再開します 。
切断。現在のすべてのセッションを切断し、ログオフします。
Citrix Receiverのアクティブ化。このストアをローカルのCitrix Workspaceアプリに追加するファイルをダウンロードします。
Citrix Receiverの変更。ローカルのCitrix Workspaceアプリを確認するページを開きます。これによってユーザーがローカルにインストールされたCitrix Workspaceアプリを使用したリソースの起動とHTML5ブラウザーでのリソースの起動とを切り替えることもできます。