この製品のマニュアルセットは、偏向のない言語を使用するように配慮されています。このマニュアルセットでの偏向のない言語とは、年齢、障害、性別、人種的アイデンティティ、民族的アイデンティティ、性的指向、社会経済的地位、およびインターセクショナリティに基づく差別を意味しない言語として定義されています。製品ソフトウェアのユーザーインターフェイスにハードコードされている言語、RFP のドキュメントに基づいて使用されている言語、または参照されているサードパーティ製品で使用されている言語によりドキュメントに例外が存在する場合があります。シスコのインクルーシブランゲージに対する取り組みの詳細は、こちらをご覧ください。
このドキュメントは、米国シスコ発行ドキュメントの参考和訳です。リンク情報につきましては、日本語版掲載時点で、英語版にアップデートがあり、リンク先のページが移動/変更されている場合がありますことをご了承ください。あくまでも参考和訳となりますので、正式な内容については米国サイトのドキュメントを参照ください。
• 「概要」
この章では、Cisco Service Portal(Service Portal)の Web ページの外観をカスタマイズするための機能について説明します。このカスタマイゼーションは、具体的にはカスケーディング スタイル シート(css)を使用して Web ページの書式を設定することによって、およびカスタム ヘッダーやフッターを追加することによって行います。
これらの機能を使用すると、Service Portal のすべての顧客向けモジュールの外観をカスタマイズできます。カスタマイズできるページは次のとおりです。
• Request Center の My Services モジュールや Service Manager モジュールに表示されるページ(たとえば、Service Designer 経由で指定された定義に基づいて動的に生成されるサービス フォーム)
• Demand Center のモジュール(Relationship Manager、My Services Executive、および Service Level Manager)に表示されるページ
• Reporting および Advanced Reporting のポータル
• Portal Manager ソリューション内の事前設定済みおよびカスタムのポータル ページ
サービス設計者や管理者が Service Portal の設定および管理に使用するモジュールの外観は、カスタマイズできません。これに該当するモジュールは、Service Item Manager、Service Designer、Organization Designer、Portfolio Designer、Administration、Catalog Deployer、Portal Designer、および Service Link です。
Service Portal アプリケーションのコンテンツは Web ページとして提示され、HTML を使用して書式が設定されます。カスケーディング スタイル シート(css)を使用すると、ページの表示に使用されるスタイルの定義を変更することによって Web ページの外観をカスタマイズできるため、Web ページそのものを編集する必要はありません。
カスタム スタイルを使用すると、Service Portal の Web ページ、ヘッダー、およびフッターをカスタマイズできます。1 つのアプリケーション インスタンスのすべてのユーザに同じカスタム スタイルを適用することも、ユーザのホーム組織単位に基づいて異なるスタイルを適用することもできます。
• アプリケーション サーバのファイル システム(具体的には、RequestCenter.war アーカイブの custom ディレクトリおよびそのサブディレクトリ)に対するアクセス権が必要です。このディレクトリおよびサブディレクトリに対する読み取りと書き込みの両方のアクセス権が必要です。
• 実行するユーザに付与されたユーザ ロールに、Administration の「Manage Global Settings」機能が含まれている必要があります。これは、カスタム スタイル シート、ヘッダー、およびフッターを使用するかどうかを切り替えるためです。
• ブラウザ ページ キャッシングをオフにする必要があります。これは、スタイル シートの変更をテストできるようにするためです。
• 他のアナリストや開発者の作業に影響することなく変更をテストできる、アプリケーション インスタンスへのアクセス権があれば理想的です。
次に示す手順は、組み込みモジュールで使用されるスタイルの外観をカスタマイズするための基本的なものです。組み込みモジュールには、My Services、Service Manager、My Services Executive、Relationship Manager、および Reporting があります。これらのスタイルの詳細については、以降のセクションを参照してください。
1. ディレクトリをアプリケーション サーバの RequestCenter.war/custom ディレクトリの下に作成します。ここが、カスタム スタイルに必要なファイルの場所となります。このディレクトリには一般的に images サブディレクトリがあり、ここにカスタム画像が保存されます。ディレクトリ名は、スタイル適用先のテナントや組織の名前を示すように付けてください。
2. Service Portal Web アーカイブ(RequestCenter.war)の custom/CustomExamples ディレクトリにあるファイル example.css をコピーします。このアーカイブの場所は、アプリケーション サーバおよびインストールの設定によって異なります。
3. コピーしたファイルに custom.css という名前を付けます。custom.css ファイル内のスタイルを、次のセクションで説明するガイドラインに従って変更します。
4. カスタマイズ済みファイルを、custom.css 内で参照されている画像とともに、ステップ 1 で作成した新しいディレクトリにコピーします。
5. Administration モジュールの [Custom Styles] ページを使用して、スタイルを定義し、必要なファイルが存在するディレクトリを指定し、スタイル適用先の組織を割り当てます。
6. Administration モジュールの [Settings] ページを使用して、カスタム スタイル シートをオンにします。
7. Service Portal のブラウザ セッションを再起動します。表示されたページには、ログイン済みユーザに適用されるカスタマイゼーションが反映されているはずです。カスタム スタイル シートを初めてアクティブ化したときは、Service Portal セッションを終了して再起動する必要があります。スタイルに対するそれ以降の変更をテストするには、修正済みスタイル シートをアプリケーション サーバにコピーして現在のページをリフレッシュするだけで十分です。
ページ キャッシングが有効になっている場合を除いて、新しいスタイルが適用されます。
My Services などの組み込みモジュールと同様に、Portal Manager のモジュールも組織ごとに、スタイル シートを使用してカスタマイズできます。カスタム スタイルは、他の組み込みモジュールのものとは別のスタイル シートに保持されるため、Portal Manager のモジュールの提示方法における柔軟性が高まります。
Portal Manager ソリューションには、さまざまなテーマも付属しており、ポータル ページ上のポートレットの色に影響を及ぼします。ユーザが独自のテーマを選択できるようにしたり、この機能をポータル設計者だけに許可したりできます。ポータル ページのテーマの詳細については、『 Cisco Service Portal Designer Guide 』を参照してください。
Portal Manager のカスタム スタイル シートの場所は、Service Portal と同じ custom ディレクトリであり、Service Portal とともにイネーブルまたはディセーブルになります。
1. Service Portal Web アーカイブ(RequestCenter.war)の custom ディレクトリにあるファイル example_portal-custom-header.css をコピーします。
2. コピーしたファイルに portal-custom-header.css という名前を付けます。ファイル内のスタイルを、次のセクションで説明するガイドラインに従って変更します。
3. このファイルを、使用されている画像とともに、テナントまたは組織用に作成した custom ディレクトリにコピーします(「組み込みモジュールのカスタマイズ」、ステップ 1 を参照)。
カスタム スタイル シートやヘッダーとフッターの使用を開始するには、次の手順を実行します。
ステップ 1 Service Portal にログインし、[Administration] モジュールを選択し、[Settings] タブに移動します。[Customizations] ページが表示されます。
ステップ 2 [Custom Style] オプションを画面右側のオプション リストから選択します。新しいスタイルを作成するには、[Add] をクリックします。[Custom Style Properties] ページが表示されます。
• スタイル名には、そのスタイルの適用先である組織を反映してください。
• スタイルの 1 つをデフォルトとして指定できます。デフォルトが指定されている場合は、ユーザのホーム組織(OU)にスタイルが割り当てられていないときにそのデフォルトが使用されます。デフォルトが指定されていない場合は、Service Portal デフォルトのスタイル シートが使用されます。
• 組織に階層構造が反映されている場合は、同じ親のすべての子 OU にスタイルを継承するかどうかを指定できます。
• RequestCenter.war/custom の下にある任意のディレクトリからスタイル ディレクトリを選択できます。スタイルを作成するには、ディレクトリが存在している必要があります。
• [Description] は必須ではありませんが、入力することを推奨します。
ステップ 4 [Add] をクリックするとスタイルが作成されます。これで、スタイルを編集してスタイルの適用先である組織を指定できるようになりました。
ステップ 5 [Associated Organizational Units] パネルの [Add] をクリックします。[Organizational Unit Search] ウィンドウが表示されます。事業単位を 1 つ以上選択します。
ステップ 6 スタイル定義や、スタイル適用先の事業単位の編集は、いつでもできます。
[Administration] モジュールを選択して [Settings] タブに移動します。[Customizations] ページが表示されます。次に示すように、[Common] の設定の中に [Enable Custom Header Footer] パラメータおよび [Enable Custom Style Sheets] パラメータがあります。
カスタム スタイル シートをイネーブルにするには、対応するパラメータ設定を [Off] から左の [On] ボタンに変更します。変更を保存するには、ページを更新します。新しい Service Portal セッションを開始すると、アプリケーション サーバ上の所定の場所にある custom.css ファイルで指定されているカスタム スタイルが有効になります。
同様に、カスタム ヘッダーやフッターをイネーブルにするには、[Enable Custom Header Footer] パラメータの設定を [On] に変更します。
これらのパラメータをオンにした状態で Service Portal セッションを開始した後は、セッションを終了しなくてもスタイルの変更が反映されます。スタイルの定義が変更されてファイルがアプリケーション サーバ上の指定のディレクトリに配置されると、それ以降は、ページをリフレッシュしたときに新しいスタイル定義が使用されます。
Administration の [Settings] で [Browser Cache] 設定がイネーブルになっている場合は、カスタム スタイル シート、ヘッダー、およびフッターに対する変更が有効になるのはブラウザ キャッシュが削除された後となります。アプリケーション ユーザに各自のブラウザ キャッシュを削除するように求めるには、「[Browser Cache] 設定」の手順に従ってブラウザ キャッシュのバージョンをインクリメントしてください。
custom¥CustomExamples ディレクトリにあるファイルは、Service Portal カスタマイゼーションの開始点として使用できます。次の表に、ディレクトリの内容の要約を示します。
CustomExamples/example.css ファイルおよび example_portal-custom-header.css ファイル(作成する custom.css ファイルのテンプレート)の形式は、標準カスケーディング スタイル シート ファイルとして設定されており、特定のスタイルについては修正方法を案内するコメントが含まれています。このコメントには、そのスタイルがどこでどのように使用されているかに関する簡単な説明が含まれていますが、カスタマイゼーションを詳細にチューニングするには、ある程度の検証作業が必要です。
カスタマイズしたスタイルのオリジナルの定義を、スタイル シート内にコメントとして記録しておいてください。このことが推奨されるのは、カスタマイズによる変更の破棄が必要になった場合に備えるためであり、元のページ外観がわかるようにするためでもあります。
オリジナルの custom.css ファイルおよび example_portal-custom-header.css ファイルについては、「カスタム ヘッダーおよびフッター」を参照してください。(オリジナルのレイアウトに小さな変更が加えられていますが、これは可読性を高めるためです)。変更を加える前に、ファイル全体に目を通してください。
エンドユーザ向けモジュールのページ ヘッダーには、次に示すスタイルが適用されます。
• lvl1_nav(組み込みモジュールのみ):「レベル 1 ナビゲーション バー」は、アプリケーション モジュール ドロップダウン メニューおよびメニュー バーの背景となります。アプリケーション名は修正できませんが、lvl1_nav_title スタイルを使用して非表示にすることもできます。
• header(ユーザ定義モジュールのみ):このヘッダー スタイルは、Portal Designer を使用して作成および管理されるポータル モジュールに使用されます。使用方法は、上記の lvl1_nav に似ています。
• headerlogo、leftheaderlogo:この 2 つのヘッダー ロゴ スタイルを利用すると、次に示す例のようにロゴをヘッダーの左右どちら側にも柔軟に配置できるようになります。左ロゴを使用するときは、アプリケーション名の background プロパティを none に設定する必要があります。アプリケーション モジュール メニューに適用されるスタイルも、修正してメニューを右隅に配置できます。
|
|
|
#headerlogo{ |
|
#leftheaderlogo{ |
|
#headerlogo{ |
|
|
||
|
|
||
|
|
||
|
デフォルトでは、ナビゲーション バーのほとんどには背景色のみが指定されています。ただし、スタイル シート内で指定される他の背景と同様に、バナーやグラフィックを使用するように変更できます。
My Services および My Services Executive のページのその他の部分では、ヘッダーやフッターなどの装飾がページの各部分に使用されます。たとえば、上の図に示すように、「レベル 3 ナビゲーション」(lvl3_nav)スタイルおよび footer スタイルによって My Services ホームページのページ本体の境界を示します。これらは同時に変更してください。
ボタンはサービス フォームに表示されるほか、Service Portal ユーザ インターフェイスにも表示されます。ボタンの外観は、button.primary スタイルによって決まります。プライマリ ボタン用のデフォルトのスタイルは、太字を使用するように設定されており、必要に応じてさらに目立つスタイルに変更することもできます。
|
サービス フォームに表示されるフィールドおよびキャプションの外観は、スタイルのセットによって決定されます。これらのスタイルについて、次の表に要約を示し、その後に例を示します。.form のスタイルはすべて同時に変更してください。
|
|
|
|
|
カスタム スタイル シートのファイル、およびカスタム ページ ヘッダーおよびフッターを定義する html ファイルは、アプリケーション サーバ上のアプリケーションの一部となっている必要があります。したがって、アプリケーション インスタンスのアップグレードや移行が必要になった場合に備えて、これらのカスタマイゼーションを維持するためのメカニズムが必要になります。カスタマイゼーションを維持するには、次の手順を実行します。
ステップ 1 アーカイブ ファイル(zip、またはアプリケーション サーバ プラットフォームに適したアーカイブ タイプ)を作成し、この中にカスタマイズ済みファイルを格納します。アーカイブ ファイルのルート ディレクトリは RequestCenter.war ディレクトリとする必要があります。
ステップ 2 Service Portal アプリケーションのアップグレードを実行します。インストール時に、「Site Component Installation Options」に関する次のような質問が表示されます。
ステップ 3 「Include custom content?」という質問(この例では 19 番)に「Yes」と回答します。ページ表示が次のように変化して、カスタム コンテンツが格納されているアーカイブ ファイルの場所をたずねる質問が追加されます。
ステップ 4 アーカイブ ファイルのディレクトリと名前を入力します。
ステップ 5 『 Cisco Service Portal Installation Guide 』の手順に従ってインストール/アップグレード プロセスを完了します。カスタム コンテンツは、アプリケーション サーバ展開パッケージに組み込まれます。
Service Portal のページで使用されているスタイルの中には、CustomExamples/example.css ファイルに含まれていないものもあります。このような省略が見つかった場合は、Cisco Technical Assistance Center(TAC)までお知らせください。
一時的な回避策を利用できる可能性があります。生成されたページのソースを表示して、そのスタイルの適用先であるセクションのクラスや ID を特定します。このクラスまたは ID によって一意に特定されるオブジェクトの外観を変更する場合は、該当するスタイルをカスタム スタイル シートに追加するか、該当する属性をスタイル定義に追加してください。この方法を使用する場合は、十分に注意してください。カスタム スタイル シートに追加したものは、以降のリリースでサポートされないことがあるためです。
このバージョンの Service Portal で使用されているスタイルは、以前のバージョンのスタイルから変更されている可能性があります。このような変更は、ページの外観を更新するだけでなく、以前のリリースで発見されたパフォーマンスや一貫性の問題を解決するものでもあります。
次の表は、custom.css で設定できるスタイルの要約です。
次の表は、portal-custom-header.css で設定できるスタイルの要約です。
|
|
|
|
example.css を複製して custom.css を作成した直後は、スタイルはユーザ インターフェイスに対して効力を持ちませんが、個々のプロパティが変更されると、その結果がカスタマイズ可能モジュールに反映されます。
デフォルトのユーザ インターフェイスで使用されているスタイルの中には、色の値としてではなく、背景画像として実装されるものがあります。画像の中には、置き換えのために custom/CustomExamples/images サブディレクトリに複製されているものがあります。置き換える画像は、タイプ、サイズ、形状、および名前が同一である必要があります。そうでない場合は、ユーザ インターフェイスに正しく組み込まれません。
カスタム スタイル シートの中には、背景画像を使用するか単純に色の値を指定するかを選択できる場所が多数あります。このような場所のそれぞれに代替属性があり、どちらの属性を使用するかは、属性のコメント化またはコメント解除によって指定します。次に例を示します。
ここでは、ポートレットをグラデーション ヘッダーにするための画像が使用されています。そのグラデーションを変更するには、custom サブディレクトリ内にあるこの画像を置き換えます。単色の背景色に切り替えるには、画像を指定している背景を /* */ のパターンを使用してコメント化し、16 進数で色が指定されている背景のコメントを解除します。
新しい画像を作成して、その画像を指すように custom.css ファイルを修正することもできます。次に例を示します。
この場合は、新しい logo.gif を作成してファイルを置き換えることも、新しい画像(たとえば acme_logo.gif)を生成することもできます。その後で、プロパティ宣言を次のように変更します。
ルック アンド フィールで使用されている他の画像についても同様です。
Portal Designer で定義および管理されるモジュールについては、ポータル ページ本体にカスタム スタイル シートの影響が及ぶことはありません。代わりに、Page Settings を使用して、ヘッダー スタイルに一致するポータル ページ テーマを設定します。
この図は、スタイルの効果を表しています。すべてのスタイルが含まれているわけではありませんが、最もよく使用されるものが含まれています。
シスコは、Service Portal の Web ページとともに表示されるページのヘッダーおよびフッターをカスタマイズするためのテンプレートを用意しています。
次に示す手順は、カスタム ヘッダーやフッターを Service Portal アプリケーションに追加するための基本的なステップです。これらのスタイルの詳細については、次のセクションで説明します。
ステップ 1 example_header.html ファイルおよび example_footer.html ファイルを Service Portal 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 Portal のブラウザ セッションを再起動します。表示されたページに、カスタマイゼーションが反映されているはずです。
カスタム ページ ヘッダーおよびフッターは、標準のページ ヘッダーおよびフッターに追加して表示されます。これらの代わりに表示されるわけではありません。ヘッダーおよびフッターの html ファイルでは、適切と見なされるコマンドはどれでも使用できます。これには、Service Portal のデフォルトのスタイルも含まれます。
たとえば、footer.html ファイルで次のようなコンテンツを使用するとします。
この結果、フッターは次のように表示されます。この図で、「Technology by Cisco」のロゴが My Services の標準ページ フッターです。