PWA Manifest ビルダー
PWAマニフェストはブラウザとOSにウェブアプリのインストールと表示方法を伝える: 起動アイコン·スプラッシュカラー·フルスクリーン vs ブラウザクロム·対応方向·ディープリンクスコープ。このビルダーは実際に必要なフィールドで仕様準拠の `manifest.json` を生成 — Android安全領域用のマスカブルバリアント含む合理的なデフォルトアイコンセット（192px·512px）。出力には `<link rel="manifest">` とApple固有の `apple-mobile-web-app-*` メタタグも含む — Appleはまだ完全なマニフェストサポートを実装しておらず、クロスプラットフォームのインストール可能性には両方必要。すべて編集可能、入力するとJSONが再生成される。
{
"name": "My App",
"short_name": "MyApp",
"description": "A progressive web app",
"start_url": "/",
"scope": "/",
"display": "standalone",
"theme_color": "#0ea5e9",
"background_color": "#ffffff",
"lang": "en",
"categories": [
"productivity",
"utilities"
],
"icons": [
{
"src": "/icons/icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
}
]
}<link rel="manifest" href="/manifest.json" /> <meta name="theme-color" content="#0ea5e9" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="default" /> <meta name="apple-mobile-web-app-title" content="MyApp" /> <link rel="apple-touch-icon" href="/icons/icon-180.png" />
manifest.jsonは `Content-Type: application/manifest+json` で配信。Lighthouse PWA監査が欠落フィールドをフラグ。
使い方
- name + short_name を設定（short_nameはホーム画面に表示 — 12文字未満推奨）。start_urlは起動時に開くべき場所。
- 表示モードを選択: `standalone`（ブラウザUIなし、推奨）が最も一般的。`fullscreen` はステータスバー非表示、`minimal-ui` は薄いブラウザシェル維持。
- アイコン追加。デフォルトはAndroid（192/512）、適応アイコン用マスカブルバリアントをカバー。JSONを `manifest.json` に、HTMLを `<head>` にコピー。
よくある質問
- マスカブルアイコンとは?
- Android適応アイコンはアイコンをシステム定義の形状（円·スクワークル·角丸四角）にクロップ。`purpose: maskable` アイコンはロゴ周囲に安全領域パディングを含む → クロップがエッジを切り落とさない。192/512でロゴ周囲~20%パディングのマスカブルバリアントを生成。
- manifest.jsonとAppleメタタグの両方が必要?
- iOSでホーム画面追加を望むなら yes。Appleは部分的なマニフェストサポート（theme_color·`apple-touch-icon` 経由のアイコン）あるがほとんど無視。`apple-mobile-web-app-capable` メタが実際にiOSがサイトをスタンドアロンアプリとして扱うようにする。
関連ツール
Favicon ジェネレーター（マルチサイズ PNG）
1 枚の画像から 10 サイズの favicon PNG（16・32・48・64・96・128・180・192・256・512）を生成 — HTML スニペット付き。
/.well-known/* URI リファレンス
IANA登録のwell-known URIの検索可能カタログ — `security.txt`·`openid-configuration`·`apple-app-site-association`·`acme-challenge` 他30+、RFCリファレンス·使用例付き。
JWT デコーダー
JWT のヘッダー・クレーム・有効期限を即座に確認。
Plist ビューア（バイナリ・XML）
Apple のプロパティリストをバイナリでも XML でも開いてツリーで読み、JSON や XML plist に変換できます。
JSON Patch ビルダー (RFC 6902)
source/targetペアからRFC 6902 JSON Patchを生成、または既存のpatchをドキュメントに適用。add·remove·replace·move·copy·test op対応。
JSON フォーマッター & バリデーター
ブラウザで JSON を整形・並べ替え・圧縮・検証できます。