Product Documentation

Web Interface機能のStoreFrontへの移行

Dec 15, 2016

Web Interfaceのほとんどのカスタマイズは、JavaScriptを微調整したり、Citrixが公開しているAPIを使用したり、またはStoreFront管理コンソールを使用したりすることで、StoreFront内で同等の設定ができます。

カスタマイズの概要とそれに対応する方法に関する基本的な情報を次の表に示します。  

フォルダーの場所

  • スクリプトのカスタマイズの場合、次の場所にあるscript.jsファイルに例を追加します: 

\Inetpub\wwwroot\Citrix\StoreNameWeb

  • スタイルのカスタマイズの場合、次の場所にあるstyle.cssファイルに例を追加します:

\Inetpub\wwwroot\Citrix\StoreNameWeb

  • 動的コンテンツの場合、次の場所にあるテキストファイルに動的コンテキストを追加します:

\Inetpub\wwwroot\Citrix\StoreNameWeb

  • マルチサーバー展開環境の場合は、 StoreFront管理コンソールやPowerShellを使って変更をほかのサーバーにも繰り返して適応させることができます。

注:Web Interfaceでは、個々のユーザーがさまざまな設定をカスタマイズできます。 現在、StoreFrontにはこの機能はありません。これをサポートするためにより詳細なカスタマイズを追加することは可能ですが、このアーティクルではそれに焦点はあてません。

 

Web Interfaceの機能

StoreFrontの同等のもの

管理コンソールによるカスタマイズ

 

  • 低レイアウトのグラフィック
  • フルレイアウトのグラフィック
  • ユーザーによる選択の許可

該当なし StoreFrontではUIは自動的に検出され、デバイス画面に合わせて調整されます。

  • 検索の有効化
  • 検索の無効化
  • 検索は、デフォルトで有効になっています。
  • Disable: デスクトップまたはWeb UIで検索ボックスを非表示にするには、style.cssに次のスタイルを追加します。

.search-container {

    display: none;

}

スマートフォンUIで検索ボックスを非表示にするには、次のスタイルを追加します。

#searchBtnPhone {

    display: none;

}

更新の有効化

デフォルトで有効になっています(ブラウザー更新)。

前のフォルダーに戻る

デフォルトでは有効になっていません。

前のフォルダーに戻る - 現在のフォルダーを記憶して、読み込み時にそこに戻るには、次のものをscript.jsに追加します。

CTXS.Extensions.afterDisplayHomeScreen = function ()

{

  // check if view was saved last time

  CTXS.ExtensionAPI.localStorageGetItem("view",

  function (view) {

    if (view) {

         // if view was saved, change to it

         CTXS.ExtensionAPI.changeView(view);

    }

    if (view == "store") {  

        // if view is store, see if folder was saved

        CTXS.ExtensionAPI.localStorageGetItem("folder",

          function(folder) {

            if (folder != "") {

              // if folder was saved, change to it

              CTXS.ExtensionAPI.navigateToFolder(folder);

            }

          }

        );  

    }

    // set up monitoring of folder

    CTXS.Extensions.onFolderChange = function(folder) {

      CTXS.ExtensionAPI.localStorageSetItem("folder",

         folder);

    };

    // set up monitoring of view

    CTXS.Extensions.onViewChange = function(newview) {

      // don’t retain search or appinfo views

      // instead, remember parent view.

      if ((newview != "appinfo") &&

          (newview != "search")) {

            CTXS.ExtensionAPI.localStorageSetItem(

               "view", newview);

      }

    };

  });

};

ヒントの有効化

Citrix Receiverはタッチデバイスと非タッチデバイスを対象としているため、ツールチップの使用は非常に限定化されたものになります。 カスタムスクリプトを使うとツールチップを追加できます。
  • アイコンビュー
  • ツリービュー
  • 詳細ビュー
  • リストビュー
  • グループビュー
  • デフォルトビューの設定
  • (低グラフィックの)アイコンビュー
  • (低グラフィックの)リストビュー
    (低グラフィックの)デフォルトビュー

Citrix Receiverには異なるUIがあるため、これらについては適用されません。 StoreFront管理コンソールを使ってビューを構成できます。 詳しくは、「アプリケーションとデスクトップへの異なるビューの指定」を参照してください。

 

  • 単一のタブUI
  • タブ付けUI
    • アプリケーションタブ
    • デスクトップタブ
    • コンテンツタブ
    • (タブ順)

Citrix Receiver UIはデフォルトでタブ付けされています。アプリケーションとコンテンツは1つのタブに、デスクトップは別のタブにあります。 また、オプションとしてお気に入りタブがあります。

  • ヘッダーロゴ
  • 文字の色
  • ヘッダー背景色
  • ヘッダー背景画像

StoreFront管理コンソールを使った同等の色とロゴ。 StoreFront管理コンソールで[Webサイト外観のカスタマイズ]をクリックし、 表示される画面でカスタマイズを実行します。

スタイルをカスタマイズして、ヘッダーに背景画を設定できます。 例

.theme-header-bgcolor {

    background-image: url('spirals.png');

}

  • ログオン前のウェルカムメッセージ
    (事前ロケール)
    • タイトル
    • テキスト
    • ハイパーリンク
    • ボタンラベル

デフォルトでは、別個のログオン前画面はありません。

この例のスクリプトは、クリックスルーメッセージボックスを追加します。

var doneClickThrough = false;

// Before web login

CTXS.Extensions.beforeLogon = function (callback) {

    doneClickThrough = true;

    CTXS.ExtensionAPI.showMessage({

        messageTitle: "Welcome!",

        messageText: "Only for <a href="http://www.WWc.com" target="_blank">WWCo Employees",

        okButtonText: "Accept",

        okAction: callback

    });

};

// Before main screen (for native clients)

CTXS.Extensions.beforeDisplayHomeScreen

  = function (callback) {

    if (!doneClickThrough) {

        CTXS.ExtensionAPI.showMessage({

            messageTitle: "Welcome!",

            messageText: "Only for WWCo Employees",

            okButtonText: "Accept",

            okAction: callback

        });

    } else {

        callback();

    }

};

  • ログオン画面タイトル
  • ログオン画面メッセージ
  • ログオン画面システムメッセージ

ログオン画面にはカスタマイズできる4つの領域があります。 画面の上部と下部(ヘッダーとフッター)およびログオンボックス自体の上部と下部。

.customAuthHeader,

.customAuthFooter

.customAuthTop,

.customAuthBottom {

    text-align: center;

    color: white;

    font-size: 16px;

}

スクリプト例(静的コンテンツ)

$('.customAuthHeader').html("Welcome to ACME");

スクリプト例(動的コンテンツ)

function setDynamicContent(txtFile, element) {

CTXS.ExtensionAPI.proxyRequest({

url: "customweb/"+txtFile,

success: function(txt) {$(element).html(txt);}});

}

setDynamicContent("Message.txt", ".customAuthTop");

注:ここでの変更によりすべてのクライアントでUIが強制的に再読み込みされるため、動的コンテンツをスクリプトに明示的に含めたり、customディレクトリに置いたりしないでください。 動的コンテンツはcustomweb ディレクトリにおいてください。

  • アプリケーション画面のウェルカムメッセージ
  • アプリケーション画面のシステムメッセージ

前述したCustomAuthウェルカム画面の例を参照してください。

前述の動的コンテンツの例を参照してください。 ホーム画面にコンテンツを置くには、‘.customAuthTop’ではなく、‘#customTop’を使います。

フッター文字列(すべての画面)

スクリプト例:

#customBottom {

      text-align: center;

    color: white;

    font-size: 16px;

}

スクリプトを使った静的コンテンツ例:

$('#customBottom').html("Welcome to ACME");

Features with no direct equivalent

 

 

  • ヘッダーなしのログオン画面
  • ヘッダーありのログオン画面
    (メッセージを含む)
StoreFrontには直接同等するものがありません。 ただし、カスタムヘッダーを作成することはできます。  前述の「ログオン画面のタイトル」を参照してください。

ユーザー設定

デフォルトでは、ユーザー設定はありません。  JavaScriptからメニューやボタンを追加できます。

ワークスペースコントロール                       

管理者設定の同等の機能。 拡張APIにより、柔軟性が著しく向上します。

http://www.citrix.com/go/citrix-developer/storefront-receiver-developer-community/receiver-customization-api.htmlを参照してください。

詳細なカスタマイズ(コード)

 

 

ICAファイル生成フックおよびそのほかのコールルーティングのカスタマイズ。

同等またはそれ以上のAPI。

http://www.citrix.com/go/citrix-developer/storefront-receiver-developer-community/store-customization-sdk.html

認証カスタマイズ

同等またはそれ以上のAPI。

http://www.citrix.com/go/citrix-developer/storefront-receiver-developer-community/store-authentication-sdks.html

JSP/ASPソースアクセス

UIが同じ方法によってレンダリングされないため、StoreFrontには同等のAPIがありません。  UIのカスタマイズを有効にするための、多くのJavaScript APIがあります。