WixEditをUIのみで使ってみる

# まえがき
本記事では、**WixEdit**というWindows用インストーラー作成ツールをご紹介します。
ツールのUIでできることを実際のインストーラー作成を通して見ていきます。
(**この記事で使用するUIとはGUIのことでCUIのことではありません**)

## インストーラーについて
インストーラーとは、**自分または他者が作成したソフトウェアをコンピューターに導入して使用可能にするためのコンピュータープログラム**です。ソフトウェアを利用する方法として、インストーラーを使用せず、ソフトウェアファイルをダブルクリックして直接起動させる方法もあります。
インストーラーを使用する利点として、導入するソフトウェアがアプリケーションだった場合、コンピューターにアプリケーションとして認識させることができます。アプリケーションとして認識させることで、PCの「アプリケーション」から、検索・管理をすることができます。また、インストーラーを実行するだけでソフトウェアが指定のフォルダーにインストールされるので、**zipファイルを指定のフォルダーに解凍というPCに疎い方が顔を引きつらせるような作業も回避**することができます。

## WixEditとは
WixEditとは、**WiX**(Windows Installer XML)というインストーラー作成ツールセットをGUIで作成できるようにしたアプリケーションです。WiXのみだとXMLで記述しなくてはならないため、知識がないと時間がかかってしまいます。WixEditを使用すると、XMLファイルを記述することなく、**マウス操作でWiXを作成することができます**。複雑なファイル構造を実現可能で、柔軟性が高いです。インストール時のUIも複数種類から選択できます。WiXを作成するとwxsという拡張子のファイルが保存されます。
インストーラーを作成する際には、WixEditとは別に**WiX Toolset**をダウンロードする必要があります。WiX Toolsetには、wxsファイルからmsiというインストーラーファイルを作成するexeファイルが含まれています。
それでは実際に簡単なインストーラーを作成してみましょう！

## WixEditとWiX Toolset
事前準備としてWixEditとWiX Toolsetをインストール・ダウンロードしておきましょう。
下記リンクより、ダウンロード可能です。

https://wixedit.github.io/

https://wixtoolset.org/

## 作ってみよう(WixEdit)
今回はVisual Studioで作成したこちらの簡単なフォームアプリのインストーラーを作成してみます。
![image20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3472355/f772766d-c476-58bb-6af6-5897bc1cc79c.png)


アプリケーションから[**WixEdit**]を起動します。
![image15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3472355/c546182a-8ef9-0fad-fb77-f0ffcd178c1e.png)


[**File**] から [**New**] を選択します。
[**Next**]をクリックします。
![image14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3472355/12418d00-401c-24c7-83fd-5b52088951f1.png)


この画面では、インストールする際のファイル構成を編集することができます。
今回は簡単なインストーラーを作成するので、何も変更は行いません。
[**Next**]をクリックします。
![image18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3472355/d2317f12-5a53-dc42-464d-2ccc1e631412.png)


この画面では、インストーラーにオプションを追加することができます。
インストール時にUIを付けるかどうか設定したり、デスクトップにショートカットを作成するかなどを設定できます。
こちらも、今回は何もチェックを付けずに[**Next**]をクリックします。
![image10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3472355/738bd6e3-7dae-c191-3b0c-21c929b87db7.png)


これで、準備は完了です。
[**Finish**]をクリックして次の画面に進みましょう。
![image3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3472355/f3dabd99-d92e-e88b-7956-098ed5943566.png)


先ほど選択した設定をもとに、土台が作成されます。
[**Product Properties**]のウィンドウが表示されています。
後から編集するので、今は[**Done**]をクリックしてウィンドウを閉じます。
![image7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3472355/289bc1a7-da1a-2d9b-675c-ca4fe358bacc.png)


下記の画像では、[**Global**]の[**Product**]がクリックされている状態です。
ここでは、インストールする製品のパッケージ情報を設定します。
**Id**：インストーラーに紐づけられる一意の文字列です。インストーラーを編集するたびに更新しましょう。
**Language**：インストーラーの言語を設定します。日本語は 1041 です。
**Manufacture**：製作元・販売元を設定します。
**Name**：製品名を記述します。
**UpgradeCode**：Idが異なっていても、UpgradeCodeが一致していれば同一製品の別バージョンだと認識させることができます。
**Version**：製品のバージョンです。
![image12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3472355/270c0f14-c0cd-27d2-296d-3243ef0d2a17.png)


編集後はこんな感じです。
IdとUpgradeCodeは、クリックすると文字列の右側に[**…**]が表示され、これをクリックすると自動的に一意の文字列を入力してくれます。
![image13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3472355/dd573ed4-b809-c138-4748-30e4aabc75c0.png)


次に[**Files**]をクリックし、インストールの際のファイル構成を設定します。
[**PFiles**]を右クリックし[**New**]->[**Directory**]を選択します。
[**PFiles**]は、「**C:\Program Files(X86)**」を意味し、Program Files(x86)の下に設定したファイルをインストールします。
![image2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3472355/c6b55168-8720-e334-b067-167f594401ce.png)


[**PFiles**]の下に[**Directory**]が追加されます。
右画面で、[**Id**]を入力します。![image9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3472355/aecdf184-ab5a-6535-7df1-ec4d9c7b9fe6.png)



続けて右画面の空白を右クリックして[**New**]をクリックします。
![image4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3472355/2bc68884-9d00-4913-b7b1-8d6e1ce7eb2e.png)


下記の画面が表示されるので、[**Name**]を選択し[**OK**]をクリックします。![image6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3472355/e0383fe8-4754-86b6-4da6-47ee5fc49c80.png)



右画面に[**Name**]項目が追加されるので、入力します。
[**Id**]と[**Name**]が存在する場合、[**Name**]がフォルダー名となります。
[**Name**]を追加するメリットとしては、[**Id**]では半角空白を含むいくつかの記号が使用できないが、[**Name**]では使用できる点です。これにより、フォルダー名に半角空白を含むいくつかの記号を使用できます。
![image8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3472355/b0767738-e132-f0f2-0274-ebed7c208d5c.png)


インストーラーに固めたいファイルを選択します。
作成したフォルダーを右クリックし[**Import Files**]をクリックします。
エクスプローラーが開くので、インストーラーに固めたいファイルを選択します。
この際、依存関係のあるファイルも忘れずに選択しましょう。
![image16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3472355/c509e720-27cc-6d95-257d-fcaae769ceb2.png)


選択すると以下のようになります。
画面左上タブの[**Features**]をクリックします。
![image17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3472355/78a688f7-b5da-ae26-d691-963bb68ac091.png)


[**DefaultFeature**]を右クリックし、[**New**]->[**ComponentRef**]をクリックします。
![image19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3472355/c8a9b2d1-5dee-879a-2b55-ad2cf08770b4.png)


[**DefaultFeatuer**]の下に[**ComponentRef**]が追加されます。
右画面で[**Id**]をクリックし、項目を選択します。
![image1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3472355/000ba317-8b67-0f9b-c995-944dcb23539b.png)


ここで選択するものは、[**Files**]の左画面で水色の四角をクリックした際に表示される[Id]です。
水色の四角が複数ある場合は、その個数だけ[**Id**]を追加します。
![image11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3472355/6f62b254-2c38-9b66-0ae9-c158022efddb.png)


[**Ctrl + S**]か[**File -> Save As**]で保存します。
今回は[**sample.wxs**]という名前にしました。
以上でWixEditでの作業は終了です。

## 作ってみよう(コマンドプロンプト・WiX Toolset)

ここからは、作成したsample.wxsをWiX Toolsetのexeを使用してインストーラーにしていく作業になります。
使用するWiX Toolsetのexeファイルは、**candle.exe**と**light.exe**です。
**~/WiX Toolset v{~}/bin** にcandle.exeとlight.exeが存在していることを確認しましょう。
コマンドプロンプトのパスを通し、以下のコマンドを実行します。
下記コマンドが実行に失敗するときは、candle.exeとsample.wxsの保存場所を確認し、パスを指定しましょう。
```:command prompt
candle sample.wxs
```
実行に成功すると、[**sample.wxs**]と同じフォルダー内に[**sample.wixobj**]が作成されます。
次に、以下のコマンドを実行します。
下記コマンドが実行に失敗するときは、light.exeとsample.wxsの保存場所を確認し、パスを指定しましょう。
```:command prompt
light -ext WixUIExtension -cultures:ja-JP sample.wixobj
```
実行に成功すると、[**sample.wixobj**]と同じファイルに[**sample.msi**]が作成されます。
このmsiファイルがインストーラーです。
この[**sample.msi**]を実行して、起動してみます。

起動することができました。
インストール先を確認してみると、[**C:\Program Files(x86)\Sample App**]と、先ほど指定したインストール先になっていますね。
![image5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3472355/268c35fd-2cca-3ebc-1d1c-b65be9aba5be.png)



## 使ってみて
以下はUIを用いて作成してみた私なりの感想です。

**できたこと**
・一度作成したファイルを再度UIで編集することができる
・柔軟性が高く、自分好みのインストーラーを作成できる

**できなかったこと**
・ローカルユーザー下のフォルダーを選択できない
　（できる旨の記事を見かけましたが、私は実現できませんでした。。。）
・WixEdit単体ではインストーラーを作成できない

WixEditではひたすらにカスタマイズできます。自分好みのインストーラーに仕上げるのにはもってこいだと思います。インストール後のファイル構造を視覚的にとらえながら作業できるため、間違いにも気づきやすいでしょう。
一方、ログインユーザー下のフォルダーに保存することができませんでした（XMLを直接操作するのかな。。。？）。前述した通り、できるという記事を見かけたので、私の勉強不足感は否めませんが、私の主観ですとUIでできたらなと感じてしまいました。ご存知の方がいらっしゃいましたら、ご教授願いたいと思います。
もう一点、WixEditに加え、WiX Toolsetとコマンドプロンプトを使用しなければならない点が気になりました。何度もインストーラーを作成するとなると、wxsファイルを編集してコマンドをたたくとなると少し面倒です。しかし、wxsファイルは一度パスを設定したら変更する必要が少なく、変更があったとしてもUIで編集できるのでXMLを眺めなくても良いことが大半です。コマンドもbatファイルにまとめておけば、さほど面倒にはなりませんね。工夫をすることでこの点は改善することができます。

## まとめ
UIを用いたインストーラー作成において、**中・上級者の方にWixEditをお勧めします**。
もちろんwxsファイルはスクリプトベースで編集することもできます。UIでの作成に慣れ、より高級なインストーラーを作成したい場合にはUIを用いてベースを作り、テキストエディタでファイルを開いてコアな編集をしてみると面白いかもしれません。

# あとがき
今回は数あるインストーラー作成ツールの中で、WixEditを私の主観多めでご紹介しました。再三になりますが、間違っている点・勘違いしている点がありましたらご教授願います。
完成したソフトウェアをインストーラーに固めると、一気に製品っぽさが出て私は好きです。
皆様もインストーラーを作成して、ご自身のアプリケーションをパッケージ化してみてはいかがでしょうか。