こんにちは。新規事業開発部エンジニアの荒木です。最近Mac向けのデスクトップアプリを作っているので、その知見をブログにしたいと思います。

はじめに

みなさんは、こういうものを見たことがありますか？

Macユーザーの方にはお馴染みかもしれませんが、AppStore以外で配布されているMacアプリのインストーラーです。ドラッグ＆ドロップすることでアプリケーションフォルダにアプリをインストールすることができます。今回はこのインストーラーの作り方をご紹介しようと思います。

ファイルの準備

インストーラーの作成に必要なファイルは以下です。 - アプリケーションファイル - アプリケーションフォルダへのエイリアス - 背景画像

まずは、アプリケーションファイルを用意します。今回は『NALU』というアプリケーションのインストーラーを作ってみましょう。

宣伝ですが『NALU』は、こんなアプリです。

つづいて、アプリケーションフォルダのエイリアスを作ります。Finderでアプリケーションフォルダを右クリックし、「エイリアスを作成」を選択します。

すると、デスクトップフォルダにエイリアスが作成されます。

最後に背景画像を用意します。ドラッグ＆ドロップでインストールできることがわかるような画像を用意しましょう。

また、Retinaディスプレイに対応するために1倍スケールの画像と2倍スケールの画像を用意して tiff という形式にまとめておきます。ターミナルで以下のコマンドを使います。（1倍スケールの画像：drag_and_drop.png、2倍スケールの画像：drag_and_drop_2x.png）

tiffutil -cathidpicheck drag_and_drop.png drag_and_drop_2x.png -out drag_and_drop.tiff

ファイルの準備ができたら、いよいよインストーラーの作成です。新規作成した作業用のフォルダにアプリケーションとエイリアスを入れます。

ターミナルで、隠しフォルダ .background を作成して開きます。

cd <作業用のフォルダ>
mkdir .background
open .background/

.backgroundに背景画像のtiffファイルを入れます。

ターミナルで dmg ファイルを作成します。この時作成するdmgファイルのフォーマットはUDRWという読み書き可能なものを指定します。

hdiutil create -volname NALU_Installer -srcfolder <作業用のフォルダ> -ov -format UDRW NALU_Installer_rw.dmg

NALU_Installer_rw.dmg ができているのでマウントして開き、右クリックのメニューから「表示オプションを表示」を選択します。表示オプションの「背景」の項目で「ピクチャ」を選択しておきます。

NALU_Installerの中の.backgroundフォルダを開き、背景画像を「背景」項目の「イメージをここにドラッグしてください」にドラッグ＆ドロップします。

※ .backgroundフォルダは隠しフォルダなので、Cmd + Shift + . で表示します。

すると、以下のようになります。

アイコンの位置やサイズ、ウィンドウのサイズなどを調整します。この配置情報は.DS_Storeに保存されているので一度閉じてから再度開いても同じように表示されます。

配置の調整が終わったらNALU_Installerを取り出します。

最後に、ターミナルでdmgファイルをUDZOフォーマットに変換します。このフォーマットは読み取り専用なので、アイコンの配置が固定できます。また、圧縮もかかるので配布時のファイルサイズを小さくすることができます。

hdiutil convert NALU_Installer_rw.dmg -format UDZO -o NALU_Installer.dmg

以上でインストーラーの完成です！

この記事では、dmgファイルをカスタムしてMacアプリのインストーラーを作成する方法をご紹介しました。今後、機会があればMacアプリのサンドボックス化と公証（Notarization）まわりの記事も書きたいと思います。ありがとうございました！