<スイート/アドバンストUI プロジェクトで、ユーザー インターフェイスを

InstallShield FAQ
<スイート/アドバンストUI プロジェクトで、ユーザー
インターフェイスをカスタマイズする>
注)このドキュメントは、InstallShield 2014 Premier Edition を基に作成しています。InstallShield 2014 以外のバージョンでは設
定名などが異なる場合もあります。
概 要
スイート/アドバンスト UI プロジェクトでは、MSI や InstallScript ベースのインストーラーに比べ、より柔軟にユーザ
ーインターフェイスをカスタマイズすることができます。
「スイート/アドバンスト UI プロジェクト」は複数の製品を1つに統合するためのプロジェクトで Premier Edition のみ
で提供されますが、複数製品を高度な UI に統合してインストールすることが可能です。
また、Professional Edition ではスイートインストーラーの高度な UI を使用できる「アドバンスト UI プロジェクト」が
提供されています。MSI や InstallScript ベースのユーザーインターフェイスはカスタマイズの自由度が低いため、
代わりにアドバンスト UI プロジェクトのウィザードインターフェイスを使用して MSI や InstallScript インストーラー
を実行することができます。
「スイート/アドバンスト UI プロジェクト」「アドバンスト UI プロジェクト」の違いは、以下のとおりです。
カテゴリ
アドバンスト UI プロジェクト
スイート/アドバンスト UI プロジェクト
プロジェクトに含められるプラ
1
1つ以上
制限なし
制限なし
カスタマイズ可能
カスタマイズ可能
イマリ パッケージの数
プロジェクトに含められる
InstallShield 前提条件の数
ユーザーインターフェイス
この記事では、スイート/アドバンスト UI プロジェクトで既存のダイアログの背景色やイメージ画像を変更する方法
を紹介します。
1/8
InstallShield FAQ
A.「スイート/アドバンスト UI」「アドバンスト UI」 プロジェクトプロジェクトを作成する
スイート/アドバンスト UI プロジェクトを作成し、パッケージを追加します。
1.
スイート/アドバンスト UI プロジェクトを作成します
2.
機能を作成し、msi パッケージを追加します
●スイートインストーラーの基本的な作成方法
Tips and Tricks(http://www.networld.co.jp/is/tips.htm)から以下の記事をご参照ください。
スイートインストーラーの基本的な作成方法
http://www.networld.co.jp/is/pdf/SuiteInstaller_Basic.pdf
2/8
InstallShield FAQ
B. ウィザードインターフェイスで、ダイアログの背景色やアイコンなどのスタイルを変更する
スイート/アドバンスト UI プロジェクトでは、基本の MSI や InstallScript プロジェクトと異なり、ウィザードインターフ
ェイスを使用して、ユーザーインターフェイスのカスタマイズを行います。
ウィザードインターフェイスは、「ウィザード ページ」および「2 番目のウィンドウ (ポップアップ ウィンドウ)」で構成さ
れます。
<ウィザードページ>
<2 番目のウィンドウ>
ウィザードインターフェイスの各要素(ヘッダー、本文、ナビゲーション、ヘッダーイメージなど)に対して、スタイルを設
定することで、一括でダイアログの背景やフォントなどを変更できます。
3/8
InstallShield FAQ
■ダイアログの背景色を変更する
ダイアログの背景には、ブラシスタイルを適用できます。カスタムのブラシスタイルを作成して、背景に適用します。
1.
[ユーザー インターフェイス]-[ウィザード インターフェイス]を表示します
2.
[ウィザードページ]をクリックして、設定を確認します
ウィザードページに属するダイアログの本文
背景、ヘッダー背景、ナビゲーション背景
に、それぞれ「Body」「Header」「Footer」のブ
ラシスタイルが適用されていることが確認で
きます
3.
[ブラシ]を右クリックして[ブラシを追加]を選択し、「caBackground」という名前に変更します
4.
「caBackground」スタイルで、背景色の設定を行います。
例)
ブラシの種類
グラデーション
垂直方向のグラデーション
新しいグラデーションボタン(緑の[+]) をクリックして、以下を設定
最初の色: 薄い黄色(FFFF99)
停止の色: 薄い緑(CCFFCC)
4/8
InstallShield FAQ
5.
再度、[ブラシを追加]から「caHeader」というスタイルを作成し、以下の設定を行います
ブラシの種類
グラデーション
6.
手順 5 と同様に「caFooter」というスタイルを作成し、以下の設定を行います
ブラシの種類
グラデーション
7.
純色ブラシ
薄い緑(CCFFCC)
[ウィザードページ]の設定で、作成したスタイルを適用します
デフォルトの本文背景
ヘッダー背景
ナビゲーション背景
8.
純色ブラシ
薄い黄色(FFFF99)
caBackground
caHeader
caFooter
ビルド後、インストーラーを実行して背景色が変更されたことを確認します
5/8
InstallShield FAQ
●背景すべてに同じスタイルを適用する方法
本文背景、ヘッダー背景、ナビゲーション背景に同じスタイルを適用したい場合、[完全なウィザード背景]
の設定を使用します。[完全なウィザード背景]にスタイルを指定すると、本文、ヘッダー、ナビゲーション背
景すべてが同じスタイルに指定されます。
下記は、水平方向へのグラデーション背景のブラシスタイルを、すべての背景に適用する設定例です。
※[完全なウィザード背景]を使用した場合、個別の背景スタイルはすべて「スタイル設定なし」にします。
6/8
InstallShield FAQ
■アイコンファイルを変更する
右上に表示されるヘッダーイメージと 「InstallationWelcome」「InstallationComplete」ダイアログのアイコンイメージを
変更します。
1.
[ウィザードページ]を表示し、[ヘッダーイメージ]にファイル(.png)を指定します
※ここで追加したファイルは、自動的に[サポートファイル]の[言語非依存]ノードに追加されます
2.
[ウィザードページ]の[InstallationWelcome]-[IDC_IMAGE1]を表示します
3.
[コンテンツ]-[リソース]で、ロゴファイルを選択します
4.
[InstallationComplete]-[IDC_IMAGE1]でも同様に、ロゴファイルを選択します
7/8
InstallShield FAQ
5.
ビルド後、インストーラーを実行してイメージが変更されたことを確認します
●ウィザードアイコンを変更する方法
キャプションバーの左上にあるアイコンファイルを変更したい場合、[ウィザードページ]の[ウィザードアイ
コン]に .ico ファイルを指定します。
【注意】左下の「InstallShield」の文字列は削除することはできません。
以上
8/8