0

Web アプリマニフェストバリデーター

Web アプリ マニフェスト仕様に対して PWA マニフェスト.json を検証し、Android のアダプティブ アイコン セーフ ゾーンに対してマスカブル アイコンをプレビューします。

📄

ここにmanifest.jsonをドロップします

またはクリックして参照 — 単一の .json ファイル

🖼️

アイコン画像ファイルをここにドロップします

またはクリックして参照 — PNG/JPEG/WebP/SVG、複数のファイルを使用可能

Buy Me a Coffee at ko-fi.com
処理中... 0%
マニフェスト.json を解析しています
フィールドの検証
アイコンのプレビューをレンダリングする
完了

結果

Progressive Web App は、manifest.json がブラウザーとアプリ ストアが実際にチェックするフィールドを満たしている場合にのみ、正常にインストールされます。このバリデータは、アップロードされたマニフェストを解析し、W3C Web アプリ マニフェスト仕様をフィールドごとに調べます。欠落している name と short_name、空または不正なアイコン配列、src、サイズ、タイプが欠落しているアイコン、解析できない start_url、認識できない表示値、および有効な CSS カラーではないテーマカラーまたは背景カラー文字列にフラグを立てます。すべての発見事項は、生の仕様の引用ではなく、平易な英語の文として表示されるため、何を修正すべきか、そしてそれがインストール性にとってなぜ重要なのかが正確にわかります。

最大の特徴は、マスク可能なアイコンのセーフ ゾーン プレビューです。 Android のアダプティブ アイコンは、OS が選択したマスク形状 (円、スクイクル、ティアドロップなど) を、「目的」「マスク可能」とマークされたアイコンに適用します。アイコンのビューポートの 40% をカバーする中心円の外側のものは、デバイスが適用するマスクに応じて切り取ることができます。マニフェストによって参照されるアイコン画像ファイルを、manifest.json と一緒にアップロードすると、このツールはそれらをファイル名で照合し、マスク可能な各アイコンを宣言されたサイズでキャンバス上に描画し、正確なセーフゾーンの円をオーバーレイするので、アートワークが切り取られても生き残るかどうかを自分の目で確認できます。

各プレビューの下にある合格/不合格バッジは、表面的なチェックリスト項目ではなく、デコードされた画像データの実際のピクセルごとの分析から得られます。このツールは、セーフ ゾーンの円の外側にある背景以外のコンテンツ (マスクによってクリップされるコンテンツ) の量と、アイコンの透明度 (マスク可能なアイコンの背景は完全に不透明である必要があります。透明では下にあるマスクの色が透けて見えるため) を測定します。どちらのチェックもアップロードした実際のビットマップに対して実行されるため、結果は推測ではなく実際のアイコン ファイルを反映します。

すべてはブラウザー内でローカルに行われます。manifest.json は File API で読み取られ、アイコンは createImageBitmap または FileReader/Image フォールバックでデコードされ、ピクセルはメモリ内キャンバスで分析されます。サーバーには何もアップロードされません。これは、マニフェストがまだ公開されていないアプリ名、内部 start_url パス、または開発中のアイコンを参照している場合に問題となります。