manifest.jsonとは？
web application manifestと、それがどのようにプログレッシブウェブアプリを支えているかを分かりやすく解説します。
manifestを理解する
web application manifestは、W3C Web Application Manifest仕様で定義されており、Webアプリケーションに関する情報を提供するJSONのテキストファイルです。
web application manifestのもっとも一般的な用途は、アプリの名前やアイコンなど、プログレッシブウェブアプリ（PWA）をデバイスにインストールするためにブラウザが必要とする情報を提供することです。
web application manifestは、単一のJSONオブジェクトを含みます。そのトップレベルのキーはメンバー（members）と呼ばれます。
なぜmanifest.jsonが重要か
| メリット | 何をするか |
|---|---|
| PWAのインストール | manifestにより、ブラウザはユーザーに対してWebアプリをデバイスへインストールするよう促せます。ネイティブアプリのように感じさせます。 |
| アイコンの参照 | manifestは、ホーム画面、スプラッシュ画面、アプリランチャーといったさまざまな場面で、どのアイコンファイルを使うかをブラウザに伝えます。 |
| アプリのメタデータ | アプリ名、テーマカラー、表示モード、開始URLなど、一貫した体験に欠かせない情報を提供します。 |
アイコンという課題
完全なmanifest.jsonを作るには、複数のサイズでアイコンを生成し、参照する必要があります。各サイズは、さまざまなプラットフォームや場面で固有の役割を果たします。
各サイズの用途
| サイズ | 用途 |
|---|---|
| 192x192 | Androidの標準的なホーム画面アイコン |
| 512x512 | 高解像度のスプラッシュ画面とAndroid |
| 96x96 | デスクトップのショートカットとGoogle TV |
| 32x32 | ブラウザのタブとブックマーク |
| 16x16 | アドレスバーとレガシーブラウザへの対応 |
同じサイズを実寸で
Favicon Toolsがどう役立つか
必要なアイコンサイズをすべて手動で作り、manifest.jsonを管理し続けるのは、時間がかかり、間違いも起きやすい作業です。Favicon Toolsはこのプロセスを自動化します。
Favicon Toolsでfaviconを生成すると、必要なすべてのアイコンサイズを参照する完全なmanifest.jsonを自動で書き出します。
生成されたmanifestがカバーするもの
| アイコングループ | サイズ | カバーする範囲 |
|---|---|---|
| Androidアイコン | 192x192, 512x512 | ホーム画面のショートカットとスプラッシュ画面 |
| 標準的なfavicon | 16x16, 32x32, 96x96 | ブラウザのタブとブックマーク |
| Apple touch icon | 必要なサイズすべて | iOSデバイス |
| Windowsのタイル | タイルのサイズ | Microsoftのスタートメニューとの統合 |
manifest.jsonの例
{
"name": "Favicon Tools",
"short_name": "Favicons",
"start_url": "/",
"display": "standalone",
"scope": "/",
"background_color": "#ffffff",
"theme_color": "#ffffff",
"icons": [
{
"src": "/android-icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/favicon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "/favicon-32x32.png",
"sizes": "32x32",
"type": "image/png"
},
{
"src": "/favicon-16x16.png",
"sizes": "16x16",
"type": "image/png"
}
]
}このmanifestには、PWAのインストールと各プラットフォームでの正しい表示に必要な、すべての重要なアイコン参照が含まれています。Favicon Toolsは、参照されるすべてのアイコンファイルとともに、これを自動生成します。
ワンクリックで生成
ソース画像を一度アップロードするだけで、Favicon Toolsは必要なすべてのアイコンサイズと完全なmanifest.jsonファイルを生成し、ダウンロード可能な1つのパッケージにまとめます。
画像を手動でリサイズしたり、複数のファイルを作ったり、JSONを手書きしたりする必要はありません。すべてがプロジェクトにそのまま入れられる状態で用意されます。
常に最新の状態に
リブランドやデザイン更新の後にfaviconを再生成すると、manifest.jsonも正しいアイコン参照で更新されます。
これにより、manifestが実際のアイコンファイルとずれてしまうのを防げます。そのずれこそが、参照の破損やアイコンの欠落を生む原因なのです。