先日MacOS用クリップボード拡張アプリ「Clipy」をリリースしました。
Clipyの開発については先日のQiitaの記事を参照ください。
今回はClipy内でも使用しているアプリケーション.dmgをダウンロードした際の背景等を指定したカスタムdmgの作り方をまとめたいと思います。
アプリケーションをWebからダウンロードした際によくあるパターンですが、なかなか参考にできるサイトもないので、参考になれば幸いです。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F1500%2F3adc5b3c-461a-6162-b202-27eaeeb691eb.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=17a80e7980071eedd803c7289b77ea99)
前準備
背景素材の用意
まずは、dmgの背景に使用する画像を作成してください。
用意する画像ですが、Clipyでは背景が白のため、そこまででかい画像を用意する必要はありませんが、背景を単色で埋める場合はある程度大きな画像を用意してください。
参考までに、dropboxのインストールdmgでは、拡大された時のため1024x1024の画像を用意しています。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F1500%2F4880a09c-2c04-aadf-1582-5cfd7b9c4303.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=30d01d6e90a378758578bc8b9ad7458d)
dmgの中には背景画像とアプリ本体、フォルダエイリアスしかはいりませんので、「Drag and drop」等の説明文は画像に予め埋め込んでおいてください。
Appファイルの用意
完成したアプリケーションをArchive
→ Export
→ Export as a Mac Application
より.appファイルを作成してください。
Applicationsフォルダのエイリアスを作成
完成したアプリケーションを入れるApplicationsフォルダのエイリアスを作成します。
作成するアプリケーションのディレクトリはシステム標準フォルダのMacintosh HD
に格納されています。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F1500%2F5a526e23-bfe0-4e05-907f-8c54e943e029.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=a7622ea86c8e95cff59f7cd1104a4d13)
アプリケーションフォルダを右クリックしてエイリアスの作成
を選択し、エイリアスフォルダを作成してください。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F1500%2F1b3be48c-4864-1372-a98a-4875a484fe0a.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=4ee02798d099be0cc7c9682481a77bbb)
このようなエイリアスが作成されると思いますので、デスクトップにフォルダを移動し、フォルダ名をApplications
にリネームしてください。
これで下準備は完了です。
dmg作成方法
1. ディスクユーティリティで空のディスクイメージの作成
OS標準ディスクユーティリティアプリケーションを起動して空のディスクイメージを作成します。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F1500%2F5826aca8-4fd8-b929-5535-0ca7590be52f.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=99dab52abce73a51b7eb0bd749236ee6)
イメージの作成ですが、特にいじる所はありませんので、名前
の変更を行って下さい。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F1500%2F0ebf9f07-7530-d730-3917-fd8722a96f1b.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=4ff9b5f10e222d9cc2840a5d7db644be)
作成されたdmgは自動的にマウントされ、デスクトップに表示されますのでマウントされたフォルダを選択してください。
2. フォルダにアプリケーションなどを移動
マウントされたディスクに下準備で用意した背景素材・アプリケーション本体・Applicationsエイリアスをドラッグアンドドロップします。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F1500%2F55a19327-e0ef-0054-0062-e8cd61d87587.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=ff0f69dc951897b8c4273eb97928507c)
このような状態にしてください。
background
フォルダに用意した背景素材を格納します。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F1500%2F47898983-0121-de46-0e28-945be3acf0bb.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=fe7cde4b0ff1149059ba6c011205955f)
3. 背景フォルダを隠しフォルダに
背景フォルダは使用しないため、隠しフォルダとして表示します。
隠しフォルダの作成はターミナルを使用して行いますので、ターミナルを起動してください。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F1500%2F6ea21a76-d930-5dba-5f13-9c6056add71a.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=369cf40693dcefd2d6dc4a500cd46fe1)
写真はかなりみにくいですが、以下のコマンドを実行してください
cd /Volumes/○○(作成したdmgファイル名)
mv background .background
これで、background
フォルダは隠しフォルダとなります。
隠しフォルダ内の画像は後で使用するため、
cd .background/
open ./
でフォルダは開いておいてください。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F1500%2F5fabfc6b-fe9e-bb3c-4672-a5d4589e6dcd.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=94859e885121cb0b043da48f7e582be9)
4. 背景・アイコンサイズの指定
まずはアイコンサイズの変更を行います。
サイズの変更は変更するフォルダを右クリック表示オプションを表示
から行います。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F1500%2F0c8b8599-0163-80c2-1923-aace3aa8ffe7.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=a4babc78e5b9108801ad5a757afb913c)
表示された項目より、アイコンサイズの変更を行って下さい。
Clipyの場合だと、128x128のサイズにしています。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F1500%2F09733739-1322-ffc4-69f5-1459c79477cc.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=6f6ca6cd425185788cf922e159810b09)
背景の変更は以下のスクリーンショットを参考にしてください。
背景
→ ピクチャ
より、先ほどのbackgroundの隠しフォルダより画像をドラッグアンドドロップしてください。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F1500%2Ffd47f404-5579-96ff-b60c-d5c7d0028777.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=a7eae2c026de2c26f4b1540fc3a78f00)
これで、カスタム背景等が適用されたフォルダが完成します。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F1500%2F15b2c0c9-3cd6-835a-2291-5b060b93682b.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=029d2f800821b0d9b728cc9a94193ebb)
ここまで完成すると後は、自分が表示しようとしているフォルダのサイズまで、拡大・縮小を行って下さい。
Clipyのディスクイメージの完成イメージはこのようになっています。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F1500%2Fe56a4bb2-0a49-a8e9-cbce-ebc1fe69619e.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=b4b3040b14f6a7cc6c8d8d2aacaac7e9)
ここでアプリケーションやフォルダの位置は手作業で行う必要があるため、かなりめんどくさいです・・・
5. ディスクの作成
ディスクユーティリティより、作成している.dmgを右クリックして変換をおこなってください
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F1500%2Fa042ca33-a37d-7de0-0cfd-57d134242642.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=435d09cb407e37773c44707d572d1bea)
####この時、保存する場所を現状の.dmgが保存されている場所を選択してしまうとうまく変換されません####
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F1500%2Fb9623996-50ae-f7e7-c377-81e8ab3b691b.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=c5f6d691f4c9a64cc01d37a7d9103c9d)
この場合すでに空のディスクがデスクトップに保存されていますので、デスクトップに保存してはいけません。
出力する名前を変更するか保存する場所を変更してください。
6. 保存の確認
さきほどのタイミングで失敗している場合、このようなエラーが発生し、作成さいた.dmgファイルを選択しても開くことができません。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F1500%2Fbf6fe334-ef58-0375-f197-a5b851516bc7.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=721f66a318b72ab26bde711e7127eec0)
この場合は、ディスクユーティリティより再度変換動作を行って下さい。
通常成功した場合、作成したフォルダがそのまま表示されると思います。
まとめ
なれてしまえば簡単にきれいなdmgを作成することができると思います。
アプリケーション開発者はぜひdmgファイルのカスタマイズを行って下さい!
はじめにもかきましたが、先日クリップボード拡張アプリケーションの「Clipy」をリリースしました。
Clipyのダウンロードdmgは上記の方法で作成されていますので、ぜひダウンロードしてお試し下さい!