オフラインパッケージのカスタマイズ

基本的なカスタマイズ > ユーザーインタフェースのカスタマイズ > 一般的な UI のカスタマイズ > オフラインパッケージのカスタマイズ

オフラインパッケージのカスタマイズ

目的

オフラインパッケージを Windchill からエクスポートして、会社のブランドアイデンティティを表示する場合に使用します。

バックグラウンド

Windchill からエクスポートしたオフラインパッケージは、エクスポートしたファイルが入った ZIP ファイルです。エクスポートしたコンテンツとともにオフラインビューアが提供されているので、ユーザーは Web ブラウザでコンテンツを参照できます。

デフォルトで、Windchill からエクスポートされたオフラインパッケージは、オフラインビューのヘッダーに Windchill ロゴとブランドが表示されます。このドキュメントでは、インストールサーバー上のいくつかのファイルを更新し、エクスポートしたパッケージにユーザーの会社のブランドアイデンティティを表示する方法について説明します。

範囲/適用可能性/前提条件

このソリューションを使用することで、サーバーからエクスポートしたすべてのパッケージのフォーマットを変更できます。この変更は、そのサーバーからパッケージを作成するすべてのユーザーと組織に反映されます。

予測される結果

エクスポートしたパッケージのオフラインビューが、ユーザーの会社のブランドアイデンティティ情報に更新されます。

ソリューション

スタティックソース ZIP ファイルの CSS を更新して、オフラインビューのヘッダーをスタイル設定します。

前提となる知識

この目的を達成するには、次のことを理解している必要があります。

• カスケードスタイルシート。このガイドでは、正しい CSS の記述方法を詳細に示さなくても、新しい CSS スタイルの指定と記述方法を十分に理解できることを前提としています。

• ユーザーの会社のブランドアイデンティティ基準に関する知識とアクセスが必要です。

ソリューションエレメント

エレメント	タイプ	説明
resources.zip	ZIP ファイル	この ZIP ファイルには、インストールサーバーから生成されたすべてのパッケージのリソースフォルダにあるスタティックエレメントが含まれます。このファイルは、ユーザーのサーバーの <Windchill>\codebase\com\ptc\netmarkets\wp\ixb ディレクトリにあります。
wpofflinestyles.css	CSS スタイルシート	resources.zip ファイル内にあるこの CSS スタイルシートには、オフラインビューの外観と操作性を制御する規則が記述されています。
head.html	HTML ファイル	すべてのページの最上部にロードされる HTML ファイルです。
header.gif	GIF グラフィックファイル	ヘッダーの背景イメージです。
logoWC.gif	GIF グラフィックファイル	Windchill ロゴの透過 GIF です。

手順 - ヘッダーの CSS スタイルの更新

1. resources.zip ファイルを見つけます。Windchill インストールルート相対パスの \codebase\com\ptc\netmarkets\wp\ixb ディレクトリにあります。通常、環境変数 WT_ROOT を使用することで、ルートを見つけることができます。

2. オリジナル resources.zip のバックアップコピーを作成します。

3. resources.zip をハードドライブの空のフォルダに解凍します。

4. "resources" フォルダ内に "wpofflinestyles.css" という名前のファイルがあります。このファイルを任意の CSS エディタまたはテキストエディタで開きます。

5. 以下のセクション「カスタマイズポイント」にあるスタイル規則を使用して、スタイルを編集し、ブランドアイデンティティヘッダーの外観をカスタマイズします。

6. スタイルを更新した場合は、リソースディレクトリ内のグラフィックファイルの更新、またはその他のリソースの追加も必要になる場合があります。

7. "pageHeaderActions" div に、外部リソースへのリンクを追加できます。これらのリンクはデフォルトでページの右上隅に表示されます。たとえば、会社の Web サイトへのリンクなどを設定します。

8. CSS スタイルをテストするには、ブラウザに "resources/head.html" ファイルをロードします。Windchill は Internet Explorer 6 と Firefox 2 をサポートしています。作成したスタイルが正しく表示されるかどうかを必ず両方のブラウザで確認してください。この方法でのテスト中は、"generateTabs()" JavaScript 関数は正しく動作しません。これに関連するエラーメッセージが表示されても無視してください。

9. ヘッダーの外観に問題がなければ、作業用フォルダの更新したリソースフォルダとファイルに resources.zip ファイルを更新します。zip ファイル内のファイルパスが正しいことを確認してください。ファイルには "resources\" パスが必要です。

10. 実行中のサーバーからテスト用のパッケージを作成し、それをオフラインで表示して、パッケージが正しく生成されたかどうかを確認します。

カスタマイズポイント

CSS 規則	デフォルト値	説明
.pageHeader	濃い青緑色の背景に、Windchill 背景イメージ (header.gif) と濃い緑色の下境界線。	ヘッダーの境界、背景イメージ、カラーを定義します。
.wncApplLogo	logoWC.gif	ロゴグラフィックファイルを定義します。
.applLogo	Height:55 pixels.	ロゴ div の高さを定義します。通常はページの左上隅に表示されます。
.pageHeaderActions (wpofflinestyles.css の CSS 規則)	白テキストリンク	通常ページの右上隅にあるリンクとテキストのスタイルを定義します。
pageHeaderActions (head.html の div)	空	この div にリンクを追加できます。

制限事項

この方法で resources.zip ファイルを更新すると、システムによって作成されたすべてのオフラインパッケージに変更が反映されます。現在のところ、1 つのパッケージのみに変更を適用し、その他を除外することはできません。作成後のパッケージをサーバー上で修正することはできません。

サンプルコード

.pageHeader {
border-bottom: 1px solid #20313d;
background-image: url(header.gif);
background-color: #40637A;
background-repeat: no-repeat;
… }
.wncApplLogo {
background-image: url(logoWC.gif);
}
.applLogo {
background-repeat: no-repeat;
height: 55px;
background-position:34px;}

これは役に立ちましたか?