カスタマイズした.dmgを作成する方法


先日MacOS用クリップボード拡張アプリ「[Clipy](http://clipy-app.com)」をリリースしました。
Clipyの開発については[先日のQiitaの記事](http://qiita.com/econa77/items/1848bf3fdfb7127ca9b8)を参照ください。

今回はClipy内でも使用しているアプリケーション.dmgをダウンロードした際の背景等を指定したカスタムdmgの作り方をまとめたいと思います。
アプリケーションをWebからダウンロードした際によくあるパターンですが、なかなか参考にできるサイトもないので、参考になれば幸いです。

<img src="https://qiita-image-store.s3.amazonaws.com/0/1500/3adc5b3c-461a-6162-b202-27eaeeb691eb.png" width="400px" />

## 前準備

### 背景素材の用意
まずは、dmgの背景に使用する画像を作成してください。
用意する画像ですが、Clipyでは背景が白のため、そこまででかい画像を用意する必要はありませんが、背景を単色で埋める場合はある程度大きな画像を用意してください。
参考までに、dropboxのインストールdmgでは、拡大された時のため1024x1024の画像を用意しています。

<img src="https://qiita-image-store.s3.amazonaws.com/0/1500/4880a09c-2c04-aadf-1582-5cfd7b9c4303.png" width="400px" />

dmgの中には背景画像とアプリ本体、フォルダエイリアスしかはいりませんので、「Drag and drop」等の説明文は画像に予め埋め込んでおいてください。

### Appファイルの用意
完成したアプリケーションを`Archive` → `Export` → `Export as a Mac Application`より.appファイルを作成してください。

### Applicationsフォルダのエイリアスを作成
完成したアプリケーションを入れるApplicationsフォルダのエイリアスを作成します。
作成するアプリケーションのディレクトリはシステム標準フォルダの`Macintosh HD`に格納されています。

<img src="https://qiita-image-store.s3.amazonaws.com/0/1500/5a526e23-bfe0-4e05-907f-8c54e943e029.png" width="400px" />

アプリケーションフォルダを右クリックして`エイリアスの作成`を選択し、エイリアスフォルダを作成してください。

<img src="https://qiita-image-store.s3.amazonaws.com/0/1500/1b3be48c-4864-1372-a98a-4875a484fe0a.png" width="400px" />

このようなエイリアスが作成されると思いますので、デスクトップにフォルダを移動し、フォルダ名を`Applications`にリネームしてください。

これで下準備は完了です。

## dmg作成方法

### 1. ディスクユーティリティで空のディスクイメージの作成
OS標準ディスクユーティリティアプリケーションを起動して空のディスクイメージを作成します。

<img src="https://qiita-image-store.s3.amazonaws.com/0/1500/5826aca8-4fd8-b929-5535-0ca7590be52f.png" width="400px" />

イメージの作成ですが、特にいじる所はありませんので、`名前`の変更を行って下さい。

<img src="https://qiita-image-store.s3.amazonaws.com/0/1500/0ebf9f07-7530-d730-3917-fd8722a96f1b.png" width="400px" />

作成されたdmgは自動的にマウントされ、デスクトップに表示されますのでマウントされたフォルダを選択してください。

### 2. フォルダにアプリケーションなどを移動
マウントされたディスクに下準備で用意した背景素材・アプリケーション本体・Applicationsエイリアスをドラッグアンドドロップします。

<img src="https://qiita-image-store.s3.amazonaws.com/0/1500/55a19327-e0ef-0054-0062-e8cd61d87587.png" width="400px" />

このような状態にしてください。

`background`フォルダに用意した背景素材を格納します。

<img src="https://qiita-image-store.s3.amazonaws.com/0/1500/47898983-0121-de46-0e28-945be3acf0bb.png" width="400px" />

### 3. 背景フォルダを隠しフォルダに
背景フォルダは使用しないため、隠しフォルダとして表示します。
隠しフォルダの作成はターミナルを使用して行いますので、ターミナルを起動してください。

<img src="https://qiita-image-store.s3.amazonaws.com/0/1500/6ea21a76-d930-5dba-5f13-9c6056add71a.png" width="400px" />

写真はかなりみにくいですが、以下のコマンドを実行してください
`cd /Volumes/○○(作成したdmgファイル名)`
`mv background .background`
これで、`background`フォルダは隠しフォルダとなります。

隠しフォルダ内の画像は後で使用するため、
`cd .background/`
`open ./`
でフォルダは開いておいてください。

<img src="https://qiita-image-store.s3.amazonaws.com/0/1500/5fabfc6b-fe9e-bb3c-4672-a5d4589e6dcd.png" width="400px" />

### 4. 背景・アイコンサイズの指定
まずはアイコンサイズの変更を行います。
サイズの変更は変更するフォルダを右クリック`表示オプションを表示`から行います。

<img src="https://qiita-image-store.s3.amazonaws.com/0/1500/0c8b8599-0163-80c2-1923-aace3aa8ffe7.png" width="400px" />

表示された項目より、アイコンサイズの変更を行って下さい。
Clipyの場合だと、128x128のサイズにしています。

<img src="https://qiita-image-store.s3.amazonaws.com/0/1500/09733739-1322-ffc4-69f5-1459c79477cc.png" width="400px" />

背景の変更は以下のスクリーンショットを参考にしてください。
`背景` → `ピクチャ` より、先ほどのbackgroundの隠しフォルダより画像をドラッグアンドドロップしてください。

<img src="https://qiita-image-store.s3.amazonaws.com/0/1500/fd47f404-5579-96ff-b60c-d5c7d0028777.png" width="400px" />

これで、カスタム背景等が適用されたフォルダが完成します。

<img src="https://qiita-image-store.s3.amazonaws.com/0/1500/15b2c0c9-3cd6-835a-2291-5b060b93682b.png" width="400px" />

ここまで完成すると後は、自分が表示しようとしているフォルダのサイズまで、拡大・縮小を行って下さい。
Clipyのディスクイメージの完成イメージはこのようになっています。

<img src="https://qiita-image-store.s3.amazonaws.com/0/1500/e56a4bb2-0a49-a8e9-cbce-ebc1fe69619e.png" width="400px" />

ここでアプリケーションやフォルダの位置は手作業で行う必要があるため、かなりめんどくさいです・・・

## 5. ディスクの作成
ディスクユーティリティより、作成している.dmgを右クリックして変換をおこなってください

<img src="https://qiita-image-store.s3.amazonaws.com/0/1500/a042ca33-a37d-7de0-0cfd-57d134242642.png" width="400px" />

####この時、保存する場所を現状の.dmgが保存されている場所を選択してしまうとうまく変換されません####

<img src="https://qiita-image-store.s3.amazonaws.com/0/1500/b9623996-50ae-f7e7-c377-81e8ab3b691b.png" width="400px" />

この場合すでに空のディスクがデスクトップに保存されていますので、デスクトップに保存してはいけません。
出力する名前を変更するか保存する場所を変更してください。

### 6. 保存の確認
さきほどのタイミングで失敗している場合、このようなエラーが発生し、作成さいた.dmgファイルを選択しても開くことができません。

<img src="https://qiita-image-store.s3.amazonaws.com/0/1500/bf6fe334-ef58-0375-f197-a5b851516bc7.png" width="400px" />

この場合は、ディスクユーティリティより再度変換動作を行って下さい。

通常成功した場合、作成したフォルダがそのまま表示されると思います。

## まとめ
なれてしまえば簡単にきれいなdmgを作成することができると思います。
アプリケーション開発者はぜひdmgファイルのカスタマイズを行って下さい！

はじめにもかきましたが、先日クリップボード拡張アプリケーションの「[Clipy](http://clipy-app.com)」をリリースしました。
Clipyのダウンロードdmgは上記の方法で作成されていますので、ぜひダウンロードしてお試し下さい！