This content has been machine translated dynamically.

Dieser Inhalt ist eine maschinelle Übersetzung, die dynamisch erstellt wurde.(Haftungsausschluss)

Cet article a été traduit automatiquement de manière dynamique.(Clause de non responsabilité)

Este artículo lo ha traducido una máquina de forma dinámica.(Aviso legal)

此内容已动态机器翻译。放弃

このコンテンツは動的に機械翻訳されています。免責事項

이 콘텐츠는 동적으로 기계 번역되었습니다.책임 부인

This content has been machine translated dynamically.

This content has been machine translated dynamically.

This article has been machine translated.

Dieser Artikel wurde maschinell übersetzt.(Haftungsausschluss)

Ce article a été traduit automatiquement.(Clause de non responsabilité)

Este artículo ha sido traducido automáticamente.(Aviso legal)

この記事は機械翻訳されています.免責事項

이 기사는 기계 번역되었습니다.책임 부인

Este artigo foi traduzido automaticamente.

这篇文章已经过机器翻译.放弃

Switch to englishAuf Englisch anzeigenLire en anglaisLeer en inglés英語に切り替え영어로 전환Mudar para ingles切换到英文

Translation failed!

$('.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"）;

.customAuthHeader,.customAuthFooter,.customAuthTop,.customAuthBottom{font-size:16px;color:yellow;text-align:center;}--NeedCopy-->

$('.customAuthHeader').html("Example one– top of login screen"); $('.customAuthTop').html("style='background:black'>Example two – above login box

注：

例の4行目は、カスタムディレクトリの画像の名称がlogo.pngの場合です。

Receiver for Webのログインページに動的ヘッダーを追加

ここで「動的」とは、キャッシュされるのではなく、コンテンツが毎回読み込まれて表示されることを意味します。Webブラウザーは可能な限りコンテンツをキャッシュしますが、Citrix Workspaceアプリは常にUIをキャッシュし、常に以前キャッシュされたUIを読み込みます。つまり、サービスの状態などで以前の例を使用すると、意図した内容を取得できません。

コンテンツを動的に読み込んでページに挿入するためには、代わりにAjax呼び出しを使用する必要があります。これを行うには、次の操作を行います。

1. サーバーの\customwebディレクトリでページ内のコンテンツを取得する便利なユーティリティ関数を定義し、ページに追加します。これによって、上記の.htmlの例と同じことが行われます。カスタムページには、テキストまたはHTMLスニペットを含めることができます。\customwebディレクトリを使用します。これは、（\customディレクトリ同様）StoreFrontサーバーグループのすべてのサーバーにコピーされますが、ダウンロードされたりキャッシュされることはありません。

2. この関数が適切な時点で呼び出されるようにします。関数の呼び出しが早すぎると、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; 

これによって、デフォルトでは不要な情報も含まれる\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(); } }; 

クリックスルー免責事項ボックスを拡張する

CTXS.ExtensionAPI.showMessage()で使用されるメッセージボックスは事前にスタイルが定義されています。このスタイルを拡張して、その他のメッセージでも対応できるようにできます。次の関数例をscript.jsに追加して、後からスタイルを再度縮小できます。さらに大きいボックスが必要な場合は、showLargeMessage()をCTXS.ExtensionAPI.showMessage()の代わりに呼び出します。

functionmkLargeMessageExitFn(origfn){if(origfn){returnfunction(){origfn();window.setTimeout(function(){$('body').removeClass('largeMessage'）;},500）;};}}functionshowLargeMessage(details){$('body').addClass('largeMessage'）;details.cancelAction=mkLargeMessageExitFn(details.cancelAction）;details.okAction=mkLargeMessageExitFn(details.okAction）;CTXS.ExtensionAPI.showMessage(details）;};

これによって、大きなメッセージが表示されている時、マーカークラスが追加されます。ボックスを閉じると、（不要な「ジャンプ」を回避するために）少し遅れてこのマーカークラスが削除されます。

このマーカークラスの存在に基づいてボックスのサイズを調整するためのCSSを追加します。たとえば、custom\style.cssで以下を実行します：

.largeTiles.largeMessage.messageBoxPopup{width:800px;}--NeedCopy-->

これによって、messageBoxPopupが大きなUIに表示され、largeMessageフラグが設定されます。その幅は800ピクセルです。既存のコードで確実にセンタリングされます（携帯電話などの小さなUIでは、デフォルトのメッセージボックスは既に最大幅です）。

さらに多くのテキストを表示するには、custom\style.cssに次を追加してフォントサイズを縮小するか、スクロール可能なコンテンツを追加します。

.largeTiles .largeMessage .messageBoxText {font-size:10px; } 

クリックスルー免責事項ボックスをスクロール可能にする

showMessageを呼び出すと、単なる文字列ではなくHTMLを渡してスタイルを追加できます。このためには、以前のshowMessageの呼び出し例におけるmessageTextを次のように置き換えます：

CTXS.ExtensionAPI.showMessage({ messageTitle: "Welcome!", messageText: "<div class='disclaimer'>rhubarb rhubarb rhubarb ... rhubarb rhubarb</div>", okButtonText: "Accept", okAction: callback }); 

次に、style.cssに以下を追加します：

.disclaimer{height:200px;overflow-y:auto;}--NeedCopy-->

これにより、以下のような結果になります：

各ページにフッターを追加

これを指定するためのカスタム領域がもう1つあります。次のJavascriptの行を追加してその内容を設定できます：

$('#customBottom').html("For ACME Employees Only"）;

style.cssでスタイルを定義します。position:staticを設定して,スクロール領域が正しく機能するようにします。

#customBottom{text-align:center;font-size:30 px;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）;}};

［すべてのアプリケーション］からおすすめカテゴリにも表示されるアプリを非表示にする

このために、以下のコードを使用できます。まずバンドル内のすべてのアプリを記憶し、「すべてのアプリの表示」一覧からそれらを削除します。

varbundleApps=[];CTXS.Extensions.sortBundleAppList=function(apps,bundle,defaultfn){for(vari=0;i<apps.length;i++){bundleApps.push(apps[i]);}defaultfn();};CTXS.Extensions.filterAllAppsDisplay=function(allapps){for(vari=0;i<allapps.length;i++){if($.inArray(allapps[i],bundleApps)!=-1){allapps.splice(i,1）;i--;}}};

このカスタマイズを使用する場合は、ユーザーが混乱しないように、「All Apps」というテキスト文字列を「Other Apps」に変更することをお勧めします。このためには、カスタムディレクトリのstrings.en.jsファイルを編集し、AllAppsTitleのタグを追加します。たとえば、変更を黄色で表示する場合、以下のようになります：

(function($){$.localization.customStringBundle("en",{<spanstyle="background-color: yellow;">AllAppsTitle:"Other Apps",</span>Example1:"This is an example",Example2:"This is another example"});})(jQuery）;

デフォルトのUIテキストを変更する

ラベルの名前が判明している場合、UIで使用されているテキストを変更できます。たとえば、Google ChromeのReceiver for Webで使用される「Install」画面を「Get Started」に変更するには、次のようにカスタム文字列を追加します：

(function($){$.localization.customStringBundle("en",{<spanstyle="background-color: yellow;">Install:"Get Started",</span>Example1:"This is an example",Example2:"This is another example"});})(jQuery）;

変更するラベルの名前を見つけるには、以下を実行します：

1. StoreFrontサーバーでディレクトリC:\inetpub\wwwroot\citrix\StoreWeb\receiver\js\localization\enを探します（ストア名が「Store」の場合）。
2. メモ帳でファイルctxs.strings_something.jsを開きます。
3. 変更する文字列を探します。注：このファイルを直接編集する代わりに、「install 」例でのようにカスタムディレクトリの上書き値を作成します。

おすすめカテゴリの背景画像を変更する

重要：

サーバー上の画像を上書きしないでください。クライアントは変更を認識できないため、既に画像をダウンロードしたクライアントを混乱させることになります。また、これによってアップグレードで問題が発生したり、失敗したりします。

独自の画像を\customディレクトリに追加し、CSSを参照として追加できます。おすすめカテゴリ（内部の名称は「bundle」）ごとに2つの画像を使用します：

• 最初の画像はカルーセルのタイルとして使用されます。
• 2番目の画像は、詳細ページのヘッダーの背景画像として使用されます。この画像は画面の幅いっぱいに引き伸ばされ、下端の方はぼかしが追加されます。

画面ごとに異なる画像を使用できます。詳細ページで同じ画像を使用し、背景の高さを2倍にすると、画像の上半分だけが表示されます。画像は詳細ページ上で引き伸ばされるため、変形しても問題がない画像を使用してください。

最初のbundleのクラスは「appBundle1」、2番目は「appBundle2」で、「appBundle8」まで使用できます。以下の例では「clouds.png」を使用しています。これは、以下の画像を右クリックしてダウンロードできます：

1. \customディレクトリに画像を保存します。他の画像と同様の約520×256ピクセルのサイズにしてください（必要に応じて拡大縮小します）。
2. 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. 1倍サイズ、2倍サイズの2つのバージョンのロゴを作成し、\customディレクトリに保存します。
2. custom\style.cssを編集して、2つの異なる画像を参照できるようにします。次のようになります：

<spanstyle="color: green;">/* The following section of the file is reserved for use by StoreFront. \*/span><spanstyle="color: green;">/\*CITRIXDISCLAIMER:STARTOFMANAGEDSECTION.PLEASEDONOTEDITANYSTYLEINTHISSECTION\*/span><spanstyle="color: green;">/\*CITRIXDISCLAIMER:ENDOFMANAGEDSECTION.\*/span><spanstyle="color: green;">/\*Youmayaddcustomstylesbelowthisline.*/span>.logo-container{background-image:url('mylogo_x1.png');background-size:169px21px;}.highdpi.logo-container{background-image:url('mylogo_x2.png');background-size:169px21px;}--NeedCopy-->

注：

• これらのカスタムスタイルが「managed section」内にないことを確認してください。「managed section」内にあると、上書きされるか、StoreFront管理コンソールを混乱させることになります。
• 両方のスタイルは同じ背景サイズを指定します。これは、サイズが「論理的な」単位で指定されており、2倍画像の場合、背景サイズは実際のロゴの幅と高さの半分になるためです。

背景イメージを設定する

注：

統合エクスペリエンスは、シンプルな白の背景用に設計されています。背景画像は邪魔になることが多いためです。そのため、背景画像を追加する場合は、明度の高いシンプルな画像を使用します。この画像に対応できるよう、必要に応じてフォントを調整してください。

例1：アップロードされた画像へのCSSリファレンス

custom.cssを次のように変更します：

.storeViewSection{background:url('images/background.jpg')no-repeatcentercenterfixed;background-size:cover;}--NeedCopy-->

注：

background-size:cover;ステートメントは、一部の古いブラウザーでは機能しません。

例2：微調整による既存の画像へのCSSリファレンス

custom.cssを次のように変更します：

.storeViewSection{background:url('../media/bg_bubbles.jpg')no-repeatcentercenterfixed;background-size:cover;color:white;}//Tweakfonts.smallTiles.storeapp.storeapp-name,.largeTiles.storeapp.storeapp-name{color:white;}//Tweakbundleareasoitdoesn'tclashasbadly.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 

-errors- 通常、コードで発生する可能性があるエラーを回避しようとしますが、代わりにエラーを明確にすることもできます。この引数は、エラーが発生した時にアラートボックスを表示します。

-debug- この引数は、カスタマイズコードの例外処理を無効にします。これは、最近のブラウザーに組み込まれた開発ツール（Google ChromeやInternet ExplorerのF12など）で役に立ち、例外を自身でデバッグできます。

-nocustom- この引数は、スクリプトとCSSカスタマイズを無効にします。これは、Citrix Workspaceアプリが機能していない場合に、エラーが何らかの作業の結果かを確認する時に役に立ちます。

-tr- この引数は、個別のブラウザータブでCitrix WorkspaceアプリのUIコードのトレースを提供します（CTXS.ExtensionAPI.trace()の呼び出しで追加するトレースなど）。

統合ユーザーエクスペリエンス

ここでは統合エクスペリエンスの機能と外観について説明します。

カードのレイアウト

ストアのアプリは、「カード」レイアウトで表示されます。各カードの下のパネルを展開して、詳細および操作を表示できます。

注：

統合エクスペリエンスでは、ユーザーがドラッグアンドドロップでアプリケーションを再配置することはできません。

ホーム

ホームにはお気に入りが表示されます。

Favorites

アイテムをお気に入りに登録するには、星をクリックまたはタップします：

検索

すべてのアプリ、デスクトップ、カテゴリを横断して検索します：

設定

ドロップダウンメニューのアクセス設定です：

メニューには、Active Directoryの表示名を使用したユーザー名が表示されます。表示名が空白の場合（推奨されていません）、ドメインとアカウント名が表示されます。メニューを使用して［設定］ページを開き、Citrix Workspaceアプリのバージョンを確認するかログオフします。

設定では、切断されたセッションを再開したり、現在のすべてのセッションを切断したり、ログアウトしたりできます。カードレイアウトまたは一覧レイアウトの設定ページを表示します：

接続。切断されたセッションを再開します 。

切断。現在のすべてのセッションを切断し,ログオフします。

Citrix Receiverのアクティブ化。このストアをローカルのCitrix Workspaceアプリに追加するファイルをダウンロードします。

Citrix Receiverの変更。ローカルのCitrix Workspaceアプリを確認するページを開きます。これによってユーザーがローカルにインストールされたCitrix Workspaceアプリを使用したリソースの起動とHTML5ブラウザーでのリソースの起動とを切り替えることもできます。