カスタム スタイル
カスタム スタイル

目次

カスタム スタイル

この章は次のトピックで構成されています。

カスタム スタイル

概要

この章では、Service Catalog Web ページの外観をカスタマイズするための機能について説明します。 アプリケーション内の顧客向けモジュールの外観をカスタマイズするには、カスケーディング スタイル シート(CSS)とカスタム ヘッダーおよびフッターを使用します。

カスタマイズできるページは次のとおりです。

  • Cisco Prime Service Catalog、My Services、および Service Manager モジュールに表示されるページ(たとえば、Service Designer 経由で指定された定義に基づいて動的に生成されるサービス フォーム)
  • Reporting および Advanced Reporting のポータル
  • ログイン ページ
  • Service Portal ソリューション内の事前設定のページとカスタム ポータル ページ

サービス設計者や管理者が Service Catalog の設定および管理に使用するモジュールの外観は、カスタマイズできません。 これに該当するモジュールは、Service Item Manager、Service Designer、Organization Designer、Administration、Catalog Deployer、Portal Designer、および Service Link です。

カスタム スタイル シート

Service Catalog アプリケーションのコンテンツは、HTML5 を使用して書式設定され Web ページとして表示されます。 カスケーディング スタイル シート(CSS)を使用すると、ページの表示に使用されるスタイルの定義を変更することによって Web ページの外観をカスタマイズできるため、Web ページそのものを編集する必要はありません。

カスタム スタイルを使用すると、Service Catalog の Web ページ、ヘッダー、およびフッターをカスタマイズできます。 1 つのアプリケーション インスタンスのすべてのユーザに同じカスタム スタイルを適用することも、ユーザのホーム組織単位に基づいて異なるスタイルを適用することもできます。

前提条件

  • アプリケーション サーバのファイル システム、特に、RequestCenter.war アーカイブの「custom」ディレクトリとそのサブディレクトリへのアクセス権を持つことが必要です。 このディレクトリおよびサブディレクトリに対する読み取りと書き込みの両方のアクセス権が必要です。
  • カスタム スタイル シート、ヘッダー、およびフッターの使用をオンまたはオフにするために、「グローバル設定の管理」のための Administration 機能を含むユーザ ロールを持つ必要があります。
  • ブラウザ ページ キャッシングをオフにする必要があります。これは、スタイル シートの変更をテストできるようにするためです。
  • 他のアナリストや開発者の作業を邪魔することなく変更をテストできるアプリケーション インスタンスへのアクセス権を持つことが理想的です。
  • スタイル シート エディタおよびその他の編集ツールの使用を推奨しますが、必須ではありません。

組み込みモジュールのカスタマイズ

次の手順は、組み込みモジュール(My Services、Service Catalog、Service Manager、および Reporting)で使用されるスタイルの外観をカスタマイズするための基本ステップです。 これらのスタイルの詳細については、以降の項を参照してください。

  1. ディレクトリをアプリケーション サーバの RequestCenter.war/custom ディレクトリの下に作成します。ここが、カスタム スタイルに必要なファイルの場所となります。 Linux 展開では、このディレクトリが /opt/CiscoPrimeServiceCatalog/jboss-as-7.1.1.Final/ServiceCatalogServer/deployments/RequestCenter.war/custom になります。 このディレクトリには一般的に images サブディレクトリがあり、ここにカスタム画像が保存されます。 ディレクトリ名は、スタイル適用先のテナントや組織の名前を示すように付けてください。
  2. Service Catalog モジュールをエンド ユーザ モジュールとして使用する場合は、ステップ 1 で作成した新しいディレクトリに custom/ServiceCatalogExamples ディレクトリに配置されたすべてのファイルをコピーします。 Linux 展開では、このディレクトリが /opt/CiscoPrimeServiceCatalog/jboss-as-7.1.1.Final/ServiceCatalogServer/deployments/RequestCenter.war/custom/SmallCompany になります。 My Services モジュールを使用する場合は、代わりに、custom/CustomExamples に配置されたすべてのファイルをコピーします。 このアーカイブ ファイルの場所は、アプリケーション サーバおよびインストール設定によって異なります。
  3. 新しいディレクトリで、その中のファイルとその下のアプリケーション ディレクトリの中のファイルから "example_" プレフィックスを削除します。 必要に応じて、css ファイルを変更し、画像ファイルを追加して、ユーザ インターフェイスのルックアンドフィールを調整します。
  4. Administration モジュールの [カスタムスタイル(Custom Styles)] ページを使用して、スタイルを定義して、必要なファイルが存在するディレクトリを指定し、スタイル名を適用する組織を割り当てます。
  5. Administration モジュールの [設定(Settings)] ページを使用して、カスタム スタイル シートをオンにします。
  6. Service Catalog のブラウザ セッションを再起動します。表示されたページには、ログイン済みユーザに適用されるカスタマイゼーションが反映されているはずです。 カスタム スタイル シートを初めてアクティブ化したときは、Service Catalog セッションを終了して再起動する必要があります。 スタイルに対するそれ以降の変更をテストするには、修正済みスタイル シートをアプリケーション サーバにコピーして現在のページをリフレッシュするだけで十分です。 ページ キャッシングが有効になっている場合を除いて、新しいスタイルが適用されます。

注意    


カスタム スタイル シートを使用するように Administration 設定を変更した後は、custom.css ファイルが指定のディレクトリに存在している必要があります。 このファイルが存在しない場合は、Service Catalog の標準スタイルが使用されます。 同様に、カスタム ヘッダーまたはフッターを使用するというオプションがオンの場合は、対応するファイルが指定のディレクトリに存在している必要があります。


カスタム スタイルの定義

CSS スタイルの設計者は、サーバ上のディレクトリに CSS を配置します。 次の例では、カスタム スタイルに名前を付け、スタイル ディレクトリに関連付けて、説明を入力します。さらに、このスタイルをサイト(関連付けられた組織ユニットの下のサブ OU)のすべてのユーザに適用するかどうか、また Service Catalog モジュールに適用するかどうかを指定します。

次のとおりにプロパティを入力します。

表 1 カスタム フィールド

フィールド

説明

[名前(Name)]

スタイルの名前は、スタイルが適用される組織の OU または OU のグループを反映している必要があります。

このスタイルをサイト全体のデフォルトにする(Make this Style the default for the entire site)

スタイルの 1 つをデフォルトとして指定できます。 デフォルトが指定されている場合は、ユーザのホーム組織(OU)にスタイルが割り当てられていないときにそのデフォルトが使用されます。 デフォルトが指定されていない場合は、システム定義のスタイル シートが使用されます。

このスタイルをすべてのサブOUに適用する(Apply this Style to all sub OUs)

組織で階層構造が使用されている場合は、同じ親のすべての子 OU にスタイルを継承するかどうかを指定できます。

Service Catalogにスタイルを適用する(Apply the Style to Service Catalog)

Service Catalog モジュールに CSS を適用することもできます。

サイトディレクトリ(Style Directory)

RequestCenter.war\custom の下にある任意のディレクトリからスタイル ディレクトリを選択できます。 スタイルを作成するには、ディレクトリが存在している必要があります。 デフォルトである 1 という名前のディレクトリは、すでに存在しています。

説明

(オプション)カスタム スタイルの説明を入力します。

カスタム スタイル シートやヘッダーとフッターの使用を開始するには、次の手順を実行します。


    ステップ 1   Service Catalog にログインし、[管理(Administration)] モジュールを選択して、[設定(Settings)] タブに移動します。

    [カスタマイゼーション(Customizations)] ページが表示されます。

    ステップ 2   画面右側にあるオプション リストから [カスタムスタイル(Custom Style)] オプションを選択します。
    ステップ 3   新しいスタイルを作成するには、[追加(Add)] をクリックします。

    [カスタムスタイルプロパティ(Custom Style Properties)] ページが表示されます。

    ステップ 4   プロパティを入力し、[追加(Add)] をクリックしてスタイルを作成します。 これで、スタイルを編集してスタイルの適用先である組織を指定できるようになりました。
    ステップ 5   [関連付けられた組織単位(Associated Organizational Units)] ペインの [追加(Add)] をクリックします。 [組織単位の検索(Organizational Unit Search)] ウィンドウが表示されます。 事業単位を 1 つ以上選択します。
    ステップ 6   スタイル定義や、スタイル適用先の事業単位の編集は、いつでも行えます。

    カスタム スタイル シートとヘッダー/フッターの有効化

    アプリケーション内の顧客向けモジュールの外観をカスタマイズするには、カスケーディング スタイル シート(CSS)とカスタム ヘッダーおよびフッターを使用します。

    Administration モジュールを選択して [設定(Settings)] タブに移動します。 [カスタマイゼーション(Customizations)] ページが表示されます。 共通設定には、[カスタムヘッダーフッターの有効化(Enable Custom Header Footer)] と [カスタムスタイルシートの有効化(Enable Custom Style Sheets)] に対するパラメータが含まれています。

    カスタム スタイルシートはデフォルトで有効にされます。 対応するパラメータ設定を [オン(On)] から [オフ(Off)] に変更できます。ページを更新して変更を保存します。 custom.css ファイル(アプリケーション サーバ上に配置)で指定されたものが有効になります。

    同様に、カスタム ヘッダーおよびフッターを有効にするには、[カスタムヘッダーフッターの有効化(Enable Custom Header Footer)] パラメータの設定を [オン(On)] に変更します。

    これらのパラメータをオンにした状態でセッションを開始した後は、セッションを終了しなくてもスタイルの変更が反映されます。 スタイルの定義が変更されてファイルがアプリケーション サーバ上の指定のディレクトリに配置されると、それ以降は、ページをリフレッシュしたときに新しいスタイル定義が使用されます。 RequestCenter.war/custom の下に ServiceCatalogExamples という名前のディレクトリがあり、ここに、ブランドや GUI デザインに合わせてカスタマイズ可能なベース アプリケーション CSS ファイルが保存されています。

    ブラウザ キャッシュを有効にした状態でのカスタマイゼーションの変更

    Administration 設定で [ブラウザキャッシュ(Browser Cache)] 設定が有効になっている場合は、ブラウザ キャッシュが削除されるまで、カスタム スタイル シート、ヘッダー、およびフッターに対する変更が有効になりません。 アプリケーション ユーザに各自のブラウザ キャッシュを削除するように求めるには、ブラウザ キャッシュの設定の手順に従ってブラウザ キャッシュのバージョンを上げてください。

    Service Catalog モジュールのスタイルのカスタマイズ

    UI のさらに詳細なカスタマイズが必要な場合は、custom\ServiceCatalogExamples ディレクトリ内のファイルを利用できます。 最初に使用する 3 つの主なファイルを次に示します。

    • before.html:このファイルの中身が HTML ドキュメントの <body> の先頭に追加されます。 このファイルは、製品文字列を表示する前に上書きするために使用できます。 たとえば、ヘッダー内の製品名に文字列 ID 15162 が使用されている場合は、このブロックを before.html に挿入することによって、製品名が「Small Company」と表示されるようにすることができます。
      <script>
      serviceCatalogMessage.putString("15162", 'Small Company');
      </script>
      

    Firebug やその他 Web 開発者ツールを使用して、Service Catalog モジュールの HTML コードを検証します。 上書き可能なその他の文字列を確認します。

    • head.html:このファイルの中身が HTML ドキュメントの(head)セクションの最後に挿入されます。 Web ページのさまざまな HTML クラスや要素で指定される色やスタイルを上書きできます。 たとえば、Small Company "homeslider" の色設定を別のものに変更します。
      <style>
      .homeslider .blocks.block1 {
      background-color: #9E6F9A; /*#2B6F9A;*/
      background-image: linear-gradient(to bottom, #985DC2, #B6115E); /*#258DC2, #04415E);*/
      background-repeat: repeat-x;
      }
      .homeslider .blocks.block2 {
      background-color: #9E6F9A; /*#2B6F9A;*/
      background-image: linear-gradient(to bottom, #D486C0, #B43557); /*#6486C0, #213557);*/
      background-repeat: repeat-x;
      }
      .homeslider .blocks.block3 {
      background-color: #9E6F9A; /*#2B6F9A;*/
      background-image: linear-gradient(to bottom, #EE86C0, #BE3157); /*#7B86C0, #2B3157);*/
      background-repeat: repeat-x;
      }
      </style>
      
    • after.html:このファイルの中身が html(body)の最後に追加されます。

    head.html ファイルでデフォルトのシスコ ロゴを他の会社のロゴに変更する方法、つまり、スタイルの上書きの簡単な例を以下に示します。

    • <style>
      .navbar-inner {
      background-color: transparent;
      background-image: none;
      filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /*disable gray header bar in IE*/
      }
      .navbar .nav {
      color: #333;
      text-shadow: none;
      }
      .navbar .nav ) li ) a {
      color: #333;
      text-shadow: none;
      }
      .psc-goto-cart {
      color: #333 !important;
      }
      .psc-top-icon {
      border:2px solid #333;
      background-color: #333;
      }
      /* Change company logo */
      .psc-header.navbar.brand {
      background-image: url("/RequestCenter/custom/SmallCo/images/SmallCo_logo92x33.gif");
      background-repeat: no-repeat;
      background-position: 0 .514em;
      background-size:75px auto;
      padding-left: 3em!important;
      padding-top: 0.25em!important;
      padding-right: 5em!important;
      font-size: 1.571em;
      line-height: 2.28em;
      color: #333; /* Small Company's website H1 color */
      text-shadow: none;
      }/* Change company logo */
      </style>
      <style>
      /* The following block changes the colors "Home", "Browse Categories" and magnifying glass
      (search) box to orange(!), including the search box hover state */
      .categories > .navbar li.menu.menu > a, .categories > .navbar li.menuHome.menu > a, .categories > .navbar li.search.menu > a {
      background: none repeat scroll 0 0 orange;
      }
      .categories > .navbar li.menu > a, .categories > .navbar li.menuHome > a, .categories > .navbar li.search > a {
      background: none repeat scroll 0 0 orange;
      }
      .categories > .navbar li.menu, .categories > .navbar li.menuHome, .categories > .navbar li.search {
      background: orange;
      }
      .categories > .navbar li.menu:hover, .categories > .navbar li.menuHome:hover, .categories > .navbar li.search:hover {
      background-color: orange;
      background-image: linear-gradient(to bottom, orange, orange);
      background-repeat: repeat-x;
      }
      /* This changes the navbar background color to the right of the Home, Browse Categories and magnifying glass box.*/
      .categories > .navbar {
      background-color: rgba(255, 255, 102, 0.75); /* this sets the color and transparency of the navbar*/
      }
      .page-heading { /* This overrides the default : background-image:*/ url("../../ngc/img/page_heading_bg.png"); 
      in the “Categories” view, so the color behind the “Categories” text is light green rather than the blue from the png.
      background-color: lightgreen;
      background-image: none;
      }
      </style>

    ユーザ定義ポータルのカスタマイズ

    Service Catalog や My Services などの組み込みモジュールと同様に、Service Portal モジュールもスタイル シートを使用して組織単位でカスタマイズできます。 カスタム スタイルは、他の組み込みモジュールとは別のスタイル シートに保持されるため、Portal Designer モジュールのプレゼンテーション方法に関して柔軟性が向上します。

    また、Service Portal ソリューションには、ポータル ページ上のポートレットの色を変更できるさまざまなテーマが用意されています。 ユーザが独自のテーマを選択できるようにしたり、この機能をポータル設計者だけに許可したりできます。 ポータル ページのテーマに関する詳細については、『Cisco Prime Service Catalog Designer Guide』を参照してください。

    Service Portal モジュール用のカスタム スタイルシートは Service Catalog と同じ custom/ServiceCatalogExamples または custom/CustomExamples ディレクトリに配置されており、それと一緒に有効/無効になります。

    1. Service Catalog Web アーカイブ(RequestCenter.war)の custom ディレクトリにあるファイル example_portal-custom-header.css をコピーします。
    2. コピーしたファイルに portal-custom-header.css という名前を付けます。 ファイル内のスタイルを、この章の次の項で説明するガイドラインに従って変更します。
    3. このファイルを、使用されている画像とともに、テナントまたは組織用に作成した custom ディレクトリにコピーします(組み込みモジュールのカスタマイズ、ステップ 1 を参照)。

    次の例では、ポータル ヘッダー内のロゴ(92x33 ピクセル)、製品名、および背景色を変更する方法について説明します。

    .reboot2 .xwtBackgroundSimplified {
    background: transparent !important;
    }
    /*style to modify logo image*/
    .reboot2 .applicationHeader17 .applicationLogoImage {
    background: url("images/SmallCo_logo92x33.gif") no-repeat transparent !important;
    /*background-repeat: no-repeat;
    background-position: 0 .514em;
    background-size:75px auto;
    padding-left: 3em!important;
    padding-right: 5em!important;*/
    height: 33px !important;
    width:92px !important;
    /* Note: un-comment display property to hide the Product Logo if needed */
    /*display:none !important;*/
    }
    /* This style is used to display or hide the Product Title in Portal modules
    See Also: .applicationHeaderAppSubTitle, .applicationLogoImage, .applicationHeaderLogoText style - which will be the new style used to display branding logo
    */
    .reboot2 .applicationHeader17 .applicationHeaderAppName {
    visibility: hidden;
    }

    次の例では、ポータル ヘッダー内のロゴ(135x70 ピクセル)、製品名、および背景色を変更する方法について説明します。

    .reboot2 .xwtBackgroundSimplified {
    background: transparent !important;
    }
    .reboot2 .applicationHeader17 {
    padding-left: 5px !important;
    }
    /*style to modify logo image*/
    .reboot2 .applicationHeader17 .applicationLogoImage {
    background: url("/RequestCenter/custom/style_dir/images/custom_logo.png") no-repeat scroll -2px -8px transparent !important;
    background-size: auto auto !important;
    height: 73px !important;
    line-height: 70px !important;
    top: 1px !important;
    width: 130px !important;
    }
    /*This style will reduce the left, right and top padding for logo container*/
    .reboot2 .applicationHeader17 .applicationHeaderLogo {
    margin-left: 2px !important;
    margin-right: 2px !important;
    padding-top: 5px !important;
    }
    .reboot2 .applicationHeader17 .applicationHeaderAppSubTitle {
    color: #202020;
    cursor: default;
    font-size: 17px !important;
    font-weight: bold !important;
    font-family: CiscoSans,Arial,"Helvetica Neue",Helvetica,sans-serif !important;
    text-shadow: 0 0.071em 0 #585858 !important;
    }
    

    次の例では、製品名を変更して、PortalFullpagePrimeUi.js ファイルをカスタマイズする方法について説明します。 Linux では、パス /opt/CiscoPrimeServiceCatalog/jboss-as-7.1.1.Final/ServiceCatalogServer/deployments/RequestCenter.war/ns360/js/PortalFullpagePrimeUi.js でこのファイルを見つけることができます。 機能名「getNavItems」を検索して、「Service Catalog」から「Cloud Manager」に名前を変更することができます。

    if(defaultSelectedId != ""){ /*existing code*/
    navItems.items.defaultSelected = defaultSelectedId;
    } /*existing code*/
    navItems.items.toolbar.push(getToolbar()); /*existing code*/
    /*Overwrite the app header text with custom application name “Cloud Manager”
    If text need to add for AppName div then from custom css file its "visibility“
    attribute should be "block !important“*/
    var appNameDiv = dojo.query('.applicationHeaderAppName')[0];
    appNameDiv.style.display = "block !important";
    appNameDiv.innerHTML = "Cloud Manager";
    var appSubTitleDiv = dojo.query('.applicationHeaderAppSubTitle')[0];
    appSubTitleDiv.style.display = "block !important";
    appSubTitleDiv.innerHTML = "Cloud Manager";
    return navItems; /*existing code*/
    

    MyServices モジュールのスタイルのカスタマイズ

    custom\CustomExamples ディレクトリには、My Services モジュールのカスタマイゼーションの開始点として使用可能なファイルが格納されています。 次の表に、ディレクトリの内容の要約を示します。

    表 2 カスタム スタイル

    custom(フォルダ)の内容

    説明

    CustomExamples

    カスタム スタイル、ヘッダー、およびフッターの開始点となるものが格納されているフォルダ

    画像

    Service Catalog のスタイル(カスタム スタイル シート経由での置き換えが可能)で現在使用されている画像が格納されているフォルダ

    common_task_bg.gif

    [共通タスク(Common Tasks)] ペインの背景

    headerGradient.gif

    ヘッダー スタイル(各ポートレットまたはペインの先頭に現れるスタイル)の背景

    logo_bottom.gif

    (非推奨)

    lvl1_nav_shade.gif

    各 Service Catalog モジュールで使用可能なオプションを通じてトップ レベルのナビゲーションを行うタブの背景

    lvl3_nav_shade.gif

    レベル 3 ヘッダーの背景(ページ フッターに対しても推奨されます)

    mark.gif

    サービス フォーム上の必須フィールドを示す

    orange_bullet.gif

    共通タスクの箇条書き記号

    orange_li_bullet.gif

    (example custom.css では使用されていません)

    page_footer_shade.gif

    ページ フッターのシェーディングに使用できる gif

    PopupHeaderGradient.gif

    (example custom.css では使用されていません)

    requiredMark.gif

    サービス フォーム以外のすべてのユーザ インターフェイス ページでの必須フィールドを表す

    tfoot_shade.gif

    (example custom.css では使用されていません)

    example.css

    サンプル ファイル(開始点となる Service Catalog のデフォルト設定が反映されており、グラデーションが単色で置き換えられます)

    example_portal-custom-header.css

    サンプル ファイル(Portal Designer デフォルトのヘッダー領域設定が反映されています)

    example_footer.html

    カスタム フッター開発の開始点

    example_header.html

    カスタム ヘッダー開発の開始点

    CustomExamples/example.css ファイルと example_portal-custom-header.css ファイル(custom.css と portal-custom-header.css のテンプレート)は、標準のカスケーディング スタイル シートとして書式設定されており、変更するスタイルの選択を支援するコメントが含まれています。 このコメントには、そのスタイルがどこでどのように使用されているかに関する簡単な説明が含まれていますが、カスタマイゼーションを詳細にチューニングするには、ある程度の検証作業が必要です。

    カスタマイズしたスタイルのオリジナルの定義を、スタイル シート内にコメントとして記録しておいてください。 このことが推奨されるのは、カスタマイズによる変更の破棄が必要になった場合に備えるためであり、元のページ外観がわかるようにするためでもあります。

    ページ ヘッダー

    エンドユーザ向けモジュールのページ ヘッダーには、次に示すスタイルが適用されます。

    • lvl1_nav(組み込みモジュールのみ):「レベル 1 ナビゲーション バー」は、アプリケーション モジュール ドロップダウン メニューおよびメニュー バーの背景となります。 アプリケーション名は修正できませんが、lvl1_nav_title スタイルを使用して非表示にすることもできます。
    • header(ユーザ定義モジュールのみ):このヘッダー スタイルは、Portal Designer を使用して作成および管理されるポータル モジュールに使用されます。 使用方法は、上記の lvl1_nav に似ています。
    • headerlogo、leftheaderlogo:この 2 つのヘッダー ロゴ スタイルは、ロゴをヘッダーの左右どちらにも配置できる柔軟性を提供します。 左ロゴを使用するときは、アプリケーション名の background プロパティを none に設定する必要があります。 アプリケーション モジュール メニューに適用されるスタイルを修正することでも、メニューを右隅に配置できます。
    ナビゲーション バー

    デフォルトでは、ほとんどのナビゲーション バーは、背景色を指定しているだけです。 ただし、スタイル シート内で指定される他の背景と同様に、バナーやグラフィックを使用するように変更できます。

    My Services のページのその他の部分では、ヘッダーやフッターなどの装飾がページの各部分に使用されます。 たとえば、上の図に示すように、「レベル 3 ナビゲーション」(lvl3_nav)スタイルおよび footer スタイルによって My Services ホームページのページ本体の境界を示します。 これらは同時に変更してください。

    「ブレッドクラム ナビゲーション」(bread_nav)は、ブレッドクラム領域の背景となります。

    ボタン

    ボタンは、サービス フォーム上と Service Catalog ユーザ インターフェイス経由で表示されます。 ボタンの外観は、button.primary スタイルによって決まります。 プライマリ ボタン用のデフォルトのスタイルは、太字を使用するように設定されており、必要に応じてさらに目立つスタイルに変更することもできます。

    図 1. サービス フォーム上のボタン

    1

    プライマリ ボタン

    サービス フォーム

    サービス フォーム上のフィールドおよびキャプションの外観は、スタイルのセットによって決定されます。これらのスタイルについて、次の表に要約を示し、その後に例を示します。 .form のスタイルはすべて同時に変更してください。

    表 3 サービス フォームのフィールド

    スタイル(Style)

    使用方法

    shortHeader

    ディクショナリのキャプション

    subhead

    キャプション付きで表示される各ディクショナリの開始を表すバー

    .formReq_border

    フィールド ラベルの左のブランク スペース、およびフィールドどうしを区切る線

    .formLabel

    フィールド ラベル

    .formElement

    フィールドの HTML 表現の入力要素の書式設定

    .formInfo

    フォーム要素の右のブランク スペース、およびフィールドどうしを区切る線

    .formIcon

    フォーム右側の灰色のバー

    図 2. サービス フォーム

    1

    shortHeader

    2

    subhead

    カスタマイゼーションの維持

    カスタム スタイル シート ファイル、およびカスタム ページ ヘッダーおよびフッターを定義する html ファイルは、アプリケーション サーバ上のアプリケーションの一部となっている必要があります。 したがって、アプリケーション インスタンスのアップグレードや移行が必要になった場合に備えて、これらのカスタマイズを維持するためのメカニズムが必要になります。

    アプリケーションのアップグレードまたは移行時にカスタマイズを維持するには、次の手順を実行します。


      ステップ 1   カスタマイズしたファイルを含むアーカイブ ファイルを Zip 形式で作成します。 アーカイブのディレクトリ構造は展開ディレクトリの構造と一致させる必要があります。 アーカイブ ファイルのルート ディレクトリは RequestCenter.war ディレクトリである必要があります。
      ステップ 2   Service Catalog アプリケーションのアップグレードを実行します。

      カスタマイズが失われないようにするために、Service Catalog インストール ウィザードではカスタム コンテンツがインストールに含まれるように指定できます。

      ステップ 3   Cisco Prime Service Catalog Installation Guide』の説明に従って、[拡張インストール(Advanced Installation)] タイプを使用して Service Catalog インストール ウィザードを実行します。
      ステップ 4   [アプリケーションサーバの設定(Application Server Configuration)] ページの [拡張オプション(Advanced Options)] をクリックします。
      ステップ 5   次のような [拡張オプション(Advanced Options)] ダイアログ ボックスが表示されます。
      ステップ 6   [カスタムコンテンツ(Custom content)] をオンにします。
      ステップ 7   [カスタムコンテンツのアーカイブ(Custom content archive)] に、アーカイブ名も含めたフル パスを入力するか、[参照(Browse)] をクリックしてカスタム コンテンツのアーカイブを探し、選択します。
      ステップ 8   [Close(閉じる)] をクリックします。
      ステップ 9   Cisco Prime Service Catalog Installation Guide』の説明に従ってインストールを続行します。
      ステップ 10   Service Catalog インストール ウィザードがインストールを完了する間、アプリケーションの展開ディレクトリ構造にカスタム コンテンツのアーカイブが抽出されます。

      既知のエラーおよび欠落

      Service Catalog に付属のオンライン ヘルプ ファイルはカスタマイズできません。

      不明なエラーおよび欠落

      Service Catalog のページで使用されているスタイルの中には、CustomExamples/example.css ファイルに含まれていないものもあります。 このような欠落が見つかった場合は、Cisco Technical Assistance Center(TAC)までお知らせください。

      一時的な回避策を利用できる可能性があります。 生成されたページのソースを表示して、そのスタイルの適用先であるセクションのクラスや ID を特定します。 このクラスまたは ID によって一意に特定されるオブジェクトの外観を変更する場合は、該当するスタイルをカスタム スタイル シートに追加するか、該当する属性をスタイル定義に追加してください。 この方法を使用する場合は、十分に注意してください。カスタム スタイル シートに追加したものは、以降のリリースでサポートされないことがあるためです。

      以前のバージョンからのアップグレード

      このバージョンの Service Catalog で使用されているスタイルは、以前のバージョンのスタイルから変更されている可能性があります。 このような変更は、ページの外観を更新するだけでなく、以前のリリースで発見されたパフォーマンスや一貫性の問題を解決するものでもあります。

      スタイルの要約と推奨される方法

      ここでは、さまざまなスタイルの要約と推奨される方法について説明します。

      スタイル要約 - 組み込みモジュール

      次の表は、custom.css で設定できるスタイルの要約です。

      表 4 使用可能なスタイル

      スタイル/クラス名

      コメント

      本体およびグローバルのスタイル

      本体

      #lvl3_nav

      #headerlogo

      右側のロゴ

      #leftheaderlogo

      左側のロゴ

      #lvl1_nav_title

      アプリケーション名

      #footer

      .levelTwoNavigation

      タブ選択

      table#nsLayout.rightMenu td#layoutright

      ナビゲーションのスタイル

      #lvl1_nav

      #lvl1_nav span#lvl1_nav a

      #llvl1_nav a:hover

      .menuDivider

      #lvl2_nav

      #lvl2_nav a

      #lvl2_nav td.active

      h2#title_nav

      #bread_nav

      #bread_nav a

      #logobottom

      廃止(ダミー画像を使用)

      タブ ナビゲーション制御のスタイル

      .levelTwoNavigation a.tabNavigation a

      .levelTwoNavigation a:hover.tabNavigation a:hover

      .levelTwoNavigation a.selected.tabNavigation a.selected

      .levelTwoNavigation a.selected:hover.tabNavigation a.selected:hover

      .propertyTabNavigation a

      #levelTwoTabDiv img

      タブ ボタンの左端と右端のイメージ

      .levelTwoNavigation div.levelTwoTab

      .levelTwoNavigation a

      My Services サービス項目タブのスタイル

      .x-grid3-row

      グリッド行の背景色

      .x-grid3-row TD

      グリッド行のフォント

      .x-grid3-row-alt

      1 行おきに変える背景色

      .x-grid3-hd-row td

      グリッド ヘッダーのフォント

      ul.x-tab-strip-top

      タブの背景色

      .x-tree-node A SPAN

      ツリーのフォント

      ヘッダーおよびタイトルのスタイル

      div.longHeaderdiv.shortHeader

      div.longHeader h4div.shortHeader h4div.longHeader spandiv.shortHeader span

      div.subHeader

      h4.header

      h4.header span

      ボタンのスタイル

      buttoninput.primaryinput.secondaryinput.disabled

      button.primaryinput.primary

      button.secondarybutton.helpinput.secondary

      button.disabledinput.disabled

      カタログおよびサービス表示のスタイル

      table.browser

      table.browser td.categoryImage

      Service Catalog とカテゴリの画像のピクセル サイズ

      table.browser td.categoryText

      table.browser td.categoryText

      div.smallshell

      div.service

      table#columns select

      データ テーブルのスタイル

      table. halfGrid,fullGrid,footGrid,taskGrid,noGrid

      table. halfGrid,taskGrid,noGrid

      table. footGrid,noGrid

      table.dProcess

      table. halfGrid、fullGrid、footGrid、taskGrid、noGrid、dProcess thead th.first

      table. halfGrid、fullGrid、footGrid、taskGrid、noGrid、dProcess thead th.firstSel

      table. halfGrid、taskGrid、fullGrid tbody td tbody th

      table. footGrid、fullGrid tbody td tbody th

      table.kpi

      table.fullGrid tbody.subHeader td

      table. halfGrid、fullGrid、footGrid、taskGrid、noGrid、smGrid tbody tr.shade td tbody tr.shade th taskGrid tbody tr.current th tbody tr.current td

      table. halfGrid、footGrid、taskGrid、noGrid tbody tr:hover th td

      table. halfGrid、fullGrid、footGrid、taskGrid、noGrid、dProcess、smGrid thead thbody.calendar table#calendar th

      table. halfGrid、fullGrid、footGrid、noGrid tfoot th tfoot td

      table. halfGrid、fullGrid、footGrid、noGrid tbody tr td.select tbody tr th.select

      table. halfGrid、fullGrid、footGrid、noGrid tbody tr td.select + td td.select + th th.select + td th.select + th

      table.fullGrid tbody.td.kvpKeyHi:hovertable.fullGrid tbody.th.kvpKeyHi:hovertable.fullGrid tbody.td.kvpKeyHi:hover + td.kvpValuetable.fullGrid tbody.th.kvpKeyHi:hover + td.kvpValue

      table.fullGrid tbody.td.kvpKeyHitable.fullGrid tbody.th.kvpKeyHi

      table.fullGrid tbody td.kvpValueHi

      他のテーブルおよびテーブル関連コンテンツのスタイル

      div.theaddiv tfoot

      div.tsubfoot

      div.detailHeader

      div.detailHeader td.owi

      div.tfoot input.textBoxdiv.tsubfoot input.textBox

      コメントおよび履歴のスタイル

      table.commentstable

      table.commentsTable div.commentContainer

      共通タスクおよびポートレットのスタイル

      div.shell

      .commonTaskCellul.tasks.li

      ul.tasks

      img.commontaskbullet

      通常のポートレット、フォーム、およびコンテナのスタイル

      div.servicediv.shelldiv.smallshelldiv smallShelltable.halfGridtable.fullGridtable.footGridtable.taskGridtable.noGrid#treecontainerdiv.loginBox

      入力要素

      inputselect

      サービス フォーム テキスト要素

      input.textBoxtextarea

      サービス フォーム テキストエリア要素

      コンテンツ スイッチングのスタイル

      ul.MDITabs li:hover

      ul.MDITabs li.active

      サービス フォームのスタイル

      tr.error td. formReq formLabel formElement formFlex formInfo

      サービス フォームで使用されるディクショナリ内で定義されているフィールドのコンポーネント(必須記号、フィールド ラベル、入力要素)

      tr.error td.formIcon

      .formReq_border

      .formLabel

      .formElement

      .formFlex

      .formInfo

      .formIcon

      div#formMonitor div a

      div#formMonitor div.valid

      div#formMonitor div.invalid

      カレンダーのスタイル

      body.calendar table#calendar td

      body.calendar table#calendar td.selected

      Service Manager のスタイル

      table#SMLayout

      table#SMLayout td#SMTreeFrame

      div.SMToolbar

      table.smGrid tbody tr.hilight td, th

      div. treeHeader treeNode treeItem treeNode span.unselected

      div.treeNode span.selected

      div.treeHeader span

      table.smGrid thead th

      table.smGrid tbody td、th

      table.smGrid tbody tr.shade td、th

      モジュールのメニュー

      .modulemenu

      .modulemenu .menuheadingrow

      menuHighlight

      スタイル要約 - ユーザ定義モジュール

      次の表は、portal-custom-header.css で設定できるスタイルの要約です。

      表 5 ユーザ定義のスタイル

      スタイル/クラス名

      コメント

      ヘッダーのスタイル

      #headerlogo

      右側のロゴ

      #leftheaderlogo

      左側のロゴ

      #lvl1_nav_title

      アプリケーション名

      #header

      #usercontrols

      #cornerpiece

      #moduleMenuDiv

      .modulemenu

      .menuHighlight

      #userinfoandcontrols

      #userinforow

      #usercontrolstable

      #userconrolsrow

      #profilef

      #logoutref

      #helpref

      推奨される方法

      example.css を複製して custom.css を作成した直後は、スタイルはユーザ インターフェイスに対して効力を持ちませんが、個々のプロパティが変更されると、その結果がカスタマイズ可能モジュールに反映されます。

      デフォルトのユーザ インターフェイスで使用されているスタイルの中には、色の値としてではなく、背景画像として実装されるものがあります。 画像の中には、置き換えのために custom/CustomExamples/images サブディレクトリに複製されているものがあります。 置き換える画像は、タイプ、サイズ、形状、および名前が同一である必要があります。そうでない場合は、ユーザ インターフェイスに正しく組み込まれません。

      カスタム スタイル シートの中には、背景画像を使用するか単純に色の値を指定するかを選択できる場所が多数あります。 このような場所のそれぞれに代替属性があり、どちらの属性を使用するかは、属性のコメント化またはコメント解除によって指定します。 次に例を示します。

      div.longHeader,
      div.shortHeader
      {	/* background: #FD2312; */
      	background: url(./images/headerGradient.gif); 
      	border-bottom:    2px solid #cc3333;
      }

      ここでは、ポートレットをグラデーション ヘッダーにするための画像が使用されています。 そのグラデーションを変更するには、custom サブディレクトリ内にあるこの画像を置き換えます。 単色の背景色に切り替えるには、画像を指定している背景を /* */ のパターンを使用してコメント化し、16 進数で色が指定されている背景のコメントを解除します。

      新しい画像を作成して、その画像を指すように custom.css ファイルを修正することもできます。 次に例を示します。

      #header
      {
      	background:	#ffffff url(./images/logo.gif) top left no-repeat;
      	border-bottom: 1px solid #a7a7a7;
      }

      この場合は、新しい logo.gif を作成してファイルを置き換えることも、新しい画像(たとえば acme_logo.gif)を生成することもできます。 その後で、プロパティ宣言を次のように変更します。

      	background:	#ffffff url(./images/acelogo.gif) top left no-repeat;
      

      ルック アンド フィールで使用されている他の画像についても同様です。

      Portal Designer で定義および管理されるモジュールについては、ポータル ページ本体にカスタム スタイル シートの影響が及ぶことはありません。 代わりに、[ページ設定(Page Settings)] を使用して、ヘッダー スタイルに一致するポータル ページ テーマを設定します。

      スクリーンショットの例および影響を受ける各スタイル

      この図は、スタイルの効果を表しています。 すべてのスタイルが含まれているわけではありませんが、最も一般的なカスタマイズされたスタイルが含まれています。

      図 3. サンプル画面



      * は、それがスタイル グループ内の最初の記述子であり、他にもあることを示します。

      カスタム ヘッダーおよびフッター

      ここでは、カスタム ヘッダーとカスタム フッターに対する更新について説明します。

      概要

      シスコは、Service Catalog の Web ページとともに表示されるページのヘッダーおよびフッターをカスタマイズするためのテンプレートを用意しています。

      手順

      これらのスタイルの詳細については、ページ ヘッダーおよびフッターのカスタマイズのセクションで説明します。 Service Catalog アプリケーションにカスタム ヘッダーまたはフッターを追加するには、次の手順を実行します。


        ステップ 1   example_header.html ファイルおよび example_footer.html ファイルを Service Catalog Web アーカイブ(RequestCenter.war)の custom ディレクトリからコピーします。
        ステップ 2   コピーしたファイルの名前を、header.html および footer.html と変更します。
        ステップ 3   この章の次のセクションに示すガイドラインに従って、ヘッダーまたはフッターのファイルにコンテンツを追加します。
        ステップ 4   カスタム ヘッダーおよびフッターのファイルを、適用するスタイルに応じた所定のディレクトリに置きます。 両方のファイルが存在している必要があります。 カスタム ヘッダーやフッターを使用しない場合は、空のファイルをアプリケーション サーバにコピーして該当する名前および .html 拡張子を付けます。
        ステップ 5   [管理(Administration)] の [サイト管理(Site Administration)] > [サイト設定(Site Configuration)] ページを使用してカスタム ヘッダーとフッターをオンにします。具体的には、サイト設定パラメータ [カスタムヘッダーとフッターの有効化(Enable Custom Header Footer)] を [オン(On)] に設定します。
        ステップ 6   Service Catalog のブラウザ セッションを再起動すると、カスタマイズしたページが表示されます。

        ページ ヘッダーおよびフッターのカスタマイズ

        カスタム ページ ヘッダーおよびフッターは、標準のページ ヘッダーおよびフッターに追加して表示されます。これらの代わりに表示されるわけではありません。 ヘッダーおよびフッター HTML ファイルには、適切と思われる任意の HTML コマンド(デフォルトの Service Catalog スタイルの使用を含む)が含まれます。

        たとえば、footer.html ファイルで次のようなコンテンツを使用するとします。

        <img src="/RequestCenter/images/eAdmin.gif"
             alt="eAdmin logo" align="top" name="eAdminLogo"/>
        

        この結果、フッターは次のように表示されます。この図で、「Technology by Cisco」のロゴが My Services の標準ページ フッターです。

        図 4. フッターのロゴ