UTILS.
100% ブラウザ内で完結
📱

Webアプリマニフェスト生成ツール(PWA)

アイコン、テーマカラー、表示モードを備えた有効なPWA Webアプリマニフェスト(manifest.json)を、貼り付け可能なlink rel=manifestタグとともに生成します。

— ここに結果が表示されます —
— ここに結果が表示されます —

このツールについて

Webアプリマニフェスト生成ツールは、シンプルなフォームからプログレッシブWebアプリ用の有効なmanifest.jsonを作り、ページの<head>に貼り付ける付属のHTMLタグを渡します。すべてブラウザ内で組み立てられ、何もアップロードされません。JSONをコピーしたり、manifest.jsonとしてダウンロードしたり、linkタグとmetaタグをコピーしたりできます。

Webアプリマニフェストは、サイトをホーム画面にインストールしてネイティブアプリのように起動できるようにするJSONファイルです。本ツールは標準のキー、つまりname、short_name、description、start_url、scope、display(standalone、fullscreen、minimal-ui、browser)、orientation、theme_color、background_color、iconsの配列を組み立て、空欄のままにしたフィールドは省いて出力をきれいに保ちます。チェックした各アイコンサイズは、そのsrc、sizes、type(ファイル拡張子から導出)を持つエントリになり、任意のpurposeでアイコンをmaskableとして指定できます。結果はJSON.stringifyで2スペースのインデントでシリアライズされるので、人が読みやすく標準準拠です。

アイコンのパスに{size}プレースホルダー(例: /icons/icon-{size}.png)を使うと、192x192や512x512などの各寸法に置き換えられます。最低限、マニフェストにはname、start_url、表示モード、そして少なくとも192pxと512pxのアイコンを含めるべきで、これらがここでの既定値です。生成された<link rel="manifest">タグでページから参照し、ブラウザUI用にtheme-color metaを追加してください。

よくある質問

Webアプリマニフェストとは何ですか?
プログレッシブWebアプリを記述するJSONファイルです。名前、アイコン、色、どう起動すべきかを記述し、ブラウザがホーム画面へのインストールを提案し、アプリのようなウィンドウで開けるようにします。
どのフィールドが必須ですか?
有用なマニフェストには少なくともname(またはshort_name)、start_url、表示モード、そして192x192と512x512のアイコンが必要です。この生成ツールはそれらを既定で埋めます。他のフィールドは任意で、空欄のときは省略されます。
アイコンの「maskable」とは何を意味しますか?
maskableアイコンには安全なパディングがあり、プラットフォームがロゴを切り取ることなく円、スクワークル、角丸四角に切り抜けます。その安全域を考慮して設計したアイコンには、purposeを「maskable」または「any maskable」に設定してください。
マニフェストをサイトにどうインストールしますか?
JSONをmanifest.jsonとして保存し、サイトにアップロードしてから、生成された<link rel="manifest" href="/manifest.json">とtheme-color metaタグをすべてのページの<head>に追加してください。

その他のツール