manifest.json ジェネレーターとは？
Manifest.jsonジェネレーターは、プログレッシブウェブアプリ（PWA）に必要なWeb App Manifestファイルを簡単に作成できます。アプリの情報を入力するだけで、必須フィールドとオプションフィールドが正しくフォーマットされたmanifest.jsonが生成されます。
name、short_name、description、start_url、scope、display(standalone、fullscreen、minimal-ui、browser)、orientation、テーマカラー、背景色、そしてサイズ・type・purpose を含むアイコンエントリを必要なだけ設定できます。出力はW3C Web App Manifest仕様に準拠しており、Chrome、Edge、Safariの「ホーム画面に追加」で正しく認識されます。
使い方
- アプリの基本情報（名前、短縮名、説明、テーマカラー、背景色）を入力してください。
- 表示モード（standalone、fullscreen、minimal-ui）、画面の向き、開始URL、スコープを設定します。
- アイコンエントリをサイズ指定で追加し、生成されたmanifest.jsonをコピーまたはダウンロードしてプロジェクトに配置できます。
使用するタイミング
- 既存のWebプロジェクトに「インストール」機能を付け、OSのアプリ一覧に表示させたいとき。
- 現場スタッフに配布する社内PWAのスプラッシュ色とアイコンをカスタマイズしたいとき。
- デフォルトでmanifestを持たないNext.jsやViteのテンプレートに最低限のmanifestを追加したいとき。
結果
レシピサイトをPWAに変換する場合、名前を「My Recipes」、テーマカラーをブランドのグリーン、表示モードを「standalone」に設定し、プロジェクトルートに配置するmanifestを生成できます。
よくある質問
- standaloneとminimal-uiの表示モードはどう違いますか?
- standaloneはブラウザのUIをすべて隠すのでネイティブアプリのように見えます。minimal-uiは上部に最小限のナビ(通常は戻ると再読み込み)を残します。fullscreenはステータスバーまで消すのでゲームに向きます。
- 実際に必要なアイコンサイズは何ですか?
- 最低限192×192と512×512のPNGを用意してください。ChromeとEdgeがホーム画面とスプラッシュに使います。古いWindowsタイル用に144×144を追加し、さらに`purpose: maskable`の512×512を入れるとAndroidが切り抜く際にディテールが失われません。
- nameとshort_nameの両方が必要なのはなぜですか?
- `name`はインストールプロンプトやアプリ一覧で表示され、`short_name`はホーム画面アイコンの下に出ます。そこには約12文字分のスペースしかありません。short_nameを省くと多くの端末でnameが不格好に切り詰められます。
- manifest.jsonファイルはどこに置けばいいですか?
- `manifest.json`(または`manifest.webmanifest`)としてサイトのルートに保存し、`<head>`から`<link rel='manifest' href='/manifest.json'>`でリンクしてください。ブラウザは初回ロード時に自動で取得します。
- manifestだけでサイトはインストール可能になりますか?
- なりません。ブラウザは`fetch`イベントを扱うService Worker、HTTPS、そして少なくとも192×192のアイコンも要求します。manifestはメタデータの層であり、オフライン動作を証明するのはService Workerです。