Play Consoleでストアに公開するにはスクリーンショットを用意する必要があります。
エンジニア一人の趣味開発でも、それなりのものを用意したいところ、本当のスクリーンショットよりも、デバイスフレームがついた画像の方が見栄えしそうなので、これぐらいはなんとかしたいと思いました。
| ノーマルなスクショ | フレーム付き |
|---|---|
 |
 |
しかし、不慣れな画像編集ソフトでちまちま調整して何とか一枚できて、さて、同じ作業を何回繰り返すんだ？マクロとか？よくわからん！
よし、ImageMagick使おう！ということでやり方調べたのでそのメモです。
デバイスフレームの素材
Android Studioでエミュレータ（AVD）で、Device Frameをつけることができますね。この素材がSdk/Skins以下にありますので、これを利用させてもらいましょう。
例えば、Pixel 7の場合
- back.webp
- layout
- mask.webp
という3つのファイルが入っていると思います。
layoutの中身を見てみます
parts {
device {
display {
width 1080
height 2400
x 0
y 0
}
}
portrait {
background {
image back.webp
}
foreground {
mask mask.webp
cutout hole
}
}
}
layouts {
portrait {
width 1200
height 2541
event EV_SW:0:1
part1 {
name portrait
x 0
y 0
}
part2 {
name device
x 59
y 58
}
}
}
正確な意味は不明ながら、なんとなくどういうことを表現しているのか読み取れますね。
デバイスの解像度が1080x2400で、スクショ機能でとれる画像がこのサイズになります。
背景にback.webp、前景にmask.webpが使われ、フレーム付きの画像サイズが1200x2541でオフセットがx:59 y:58といったところでしょうか？
正確な仕様は以下にあるらしいです。
重ね合わせの方法としては、スクショ画像にmask.webpを適用した上でback.webpの上に乗せるような形みたいですが、back.webpを見てみると、オフセット加工したスクショの上にback.webpを重ね合わせるだけで良さそうです。
| back.webp | mask.webp |
|---|---|
 |
 |
ImageMagickで重ね合わせる
ということで、コマンドラインツールで加工できればいかようにでもできるぜ。ということでImageMagickつかって加工しちゃいましょう。これができれば、あとはシェルスクリプトなりで、何枚画像があろうが同じ加工を適用しちゃえば良いです。
インストール
ImageMagickはほとんどの環境のパッケージマネージャでインストールできるかと思います。
Windows
winget install ImageMagick.ImageMagick
Ubuntu
sudo apt install imagemagick
Mac
brew install imagemagick
その他、公式サイト配布のバイナリを使ってもいいですし、ソースコードからコンパイルするという方法もあります。
加工
convert screenshot.png -background transparent -extent 1200x2541-59-58 back.webp \
-compose over -composite out.png
スクショの上にそれよりも大きな画像を重ね合わせるので事前のコンバートが必要です。
背景を透過にして、x:59,y:58のオフセットを付け、1200x2541に拡大して、back.webpを重ね、出力という命令ですね。
AVDでスキンが用意されていればどのデバイスでも同じ要領でいけますね。
これで、不慣れな画像編集ソフトと格闘せずに、フレーム付きスクショを作成できます。
以上です。