PWA asset generator - PWA用のアイコン/スプラッシュスクリーン用画像を一気に生成
PWA（Progressive Web Apps）は今後のWebを担う大事な技術になっています。多数ある技術を合わせたものなので、すべてを実装するのは難しいですが、逆に一部からでもはじめられるのがメリットです。 そんなPWAでアプリとしてインストールする機能に注目が集まっていますが、面倒なのが多数のアイコンを作成しなければならない作業です。そこで使ってみたいのがPWA asset generatorです。
PWA asset generatorの使い方
PWA asset generatorを実行します。画像やSVGファイルを指定するだけです。
$ pwa-asset-generator new-org-logo.png
16:24:49 getSplashScreenMetaData Initialising puppeteer to load latest splash screen metadata ?
:
16:25:01 saveImages Saved image apple-splash-2436-1125 ?
:
16:25:11 saveImages Saved image apple-splash-1242-2688 ?
16:25:11 cli Web App Manifest file is not specified, printing out the content to console instead ?
16:25:11 cli Below is the icons content for your manifest.json file. You can copy/paste it manually ?
[
{
"src": "manifest-icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "manifest-icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
16:25:11 cli Index html file is not specified, printing out the content to console instead ?
16:25:11 cli Below is the iOS meta tags content for your index.html file. You can copy/paste it manually ?
<link rel="apple-touch-icon" sizes="180x180" href="apple-icon-180.png"/>
<link rel="apple-touch-icon" sizes="167x167" href="apple-icon-167.png"/>
<link rel="apple-touch-icon" sizes="152x152" href="apple-icon-152.png"/>
<link rel="apple-touch-icon" sizes="120x120" href="apple-icon-120.png"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<link rel="apple-touch-startup-image"
href="apple-splash-2048-2732.png"
media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"/>
:
<link rel="apple-touch-startup-image"
href="apple-splash-1136-640.png"
media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"/>
一気に26種類もの画像が生成されます。
PWA asset generatorを使えばアイコンはもちろん、縦と横それぞれのスプラッシュスクリーン用画像も作成されます。マニフェストのJSONファイルを指定した生成も可能です。
PWA asset generatorはTypeScript製のオープンソース・ソフトウェア（MIT License）です。