Web App Manifest ガイド: 本物の manifest.json をフィールドごとに
Web App Manifest は、サイトのインストール方法（名前、アイコン、色）を OS に伝える小さな JSON ファイルです。ここでは本物の例をフィールドごとに紹介します。
manifest は何のためにあるか
manifest は、ウェブサイトを OS がインストールできるものへと変えるものです。ユーザーがサイトをホーム画面に追加すると、ブラウザは manifest を読んで、アイコン、その下の名前、スプラッシュ画面、そしてアプリがブラウザの UI を伴って開くか否かを決定します。
これは純粋な JSON です。すべてのページからリンクされた 1 つのファイルと、それが指し示すアイコンの PNG が必要です。以下の各フィールドは、ユーザーが目にする何かに対応しています。
重要なフィールド
| フィールド | 何を制御するか |
|---|---|
| name | アプリのフルネーム。インストールプロンプトとスプラッシュ画面に表示されます |
| short_name | ホーム画面アイコンの下に表示される名前。スペースが限られる場所向けです |
| icons | アイコンのセット。192 と 512 の PNG に加え、Android の形状向けに maskable を指定した 1 つを含めます |
| theme_color | アプリ周囲の OS の UI（ステータスバーなど）の色 |
| background_color | アプリの読み込み中に表示されるスプラッシュ画面の背景 |
| display | アプリの開き方。standalone はブラウザの UI を隠し、ネイティブのように見せます |
| start_url | ホーム画面から起動したときにアプリが開くページ |
完全な manifest.json
{
"name": "Acme Dashboard",
"short_name": "Acme",
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icon-512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "/icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
],
"theme_color": "#0b0b0f",
"background_color": "#0b0b0f",
"display": "standalone",
"start_url": "/"
}標準アイコン 2 つと maskable 1 つ。これで Android は、ロゴを切らずにどんな launcher の形状にもクロップできます。
ページに組み込む
<link rel="manifest" href="/manifest.json">これをすべてのページの <head> に入れます。link タグがなければ、ファイルは存在しても何も読み込みません。
よくある質問
Web App Manifest とは何ですか？
サイトのインストール方法（名前、アイコン、色、開き方）をブラウザと OS に伝える小さな JSON ファイルです。ページをホーム画面にインストール可能にするものです。
theme_color と background_color の違いは何ですか？
theme_color はアプリ周囲の OS の UI（ステータスバーなど）に色を付けます。background_color はアプリの読み込み中に表示されるスプラッシュ画面を埋めます。同じ値になることが多いですが、制御する対象は異なります。
manifest.json はどこに置きますか？
サイトのルートのような安定したパスから配信し、<link rel="manifest" href="/manifest.json"> で参照します。そこに列挙したアイコンは、src フィールドのパスから解決できる必要があります。
普通のウェブサイトに manifest は必要ですか？
インストールプロンプトとホーム画面アイコンが欲しい場合だけです。単純な情報サイトなら manifest なしでも問題ありませんが、ユーザーがスマホに保存する可能性のあるサイトなら恩恵があります。