ITエンジニア/デザイナ向けにオープンソースを毎日紹介

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)です。

onderceylan/pwa-asset-generator: PWA asset generator based on Puppeteer. Automatically generates icons and splash screens guided by Web App Manifest specs and Apple Human Interface guidelines. Updates manifest.json and index.html files with the generated images.

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2