manifest.jsonとは何か？用途や使えるプロパティの一覧,メタデータやマニフェストについて実例でわかりやすく解説！

Webサイトをスマホのホーム画面に追加したり、オフラインでも使えるようにするファイル、それがmanifest.jsonです。

この記事では、PWA（Progressive Web App）などの土台となるmanifest.jsonについて、manifest.jsonとは何か、どのような場面で使うのかや、具体的なプロパティ一覧など、実例を交えてわかりやすくご解説しています。

manifest.jsonとは何か？

manifest.jsonは、Webアプリケーションのメタデータを記述するためのJSONファイルです。

Webサイトを、PCやスマートフォンのホーム画面に追加したり、オフラインで使えるようにしたりする際に、ブラウザがそのウェブサイトをどのように表示・動作させるべきかを定義する、設定ファイルのようなものです。

メタデータとは何か？

メタデータは、データの内容そのものではなく、そのデータが「どのようなものか」「どのようにして作られたか」「いつ作られたか」といった背景を表すデータのことです。

例えば、以下のようなデータがメタデータです。

• 写真ファイルの「撮影日時、カメラの機種、シャッタースピード、GPS情報」
• 音楽ファイルの「アーティスト名、アルバム名、曲名、ジャンル、リリース年」
• Webサイトの「ウェブサイト名、アイコン、テーマカラー」
• 本の「著者名、発行日、出版社、ページ数、ISBNコード」

manifest（マニフェスト）とは何か？

manifest（マニフェスト）という言葉は、文脈によって意味が変わりますが、「はっきりと示すこと」「明白なこと」というニュアンスを持っています。

船や飛行機などに積まれた貨物や乗客のリストをマニフェストと呼びます。

ITやWeb開発におけるマニフェストも同様の意味で、プログラムやシステム、データの中身や構成をはっきりと示した一覧表や設定ファイルのことを指します

manifest.jsonの用途

manifest.jsonの主な役割は、ウェブサイトをよりネイティブアプリに近い体験で提供できるようにすることです。具体的には、以下の用途で使われます。

• PWA (Progressive Web App)
  Webサイトをネイティブアプリのようにインストール可能にし、オフラインでも動作させるための設定を提供します。（manifest.jsonの作成は、PWAの必須要件の１つです）
  
• ホーム画面への追加
  スマートフォンやタブレットのホーム画面にウェブサイトのアイコンを追加する際の、アイコン画像やアプリ名などを指定します。
  
• ウェブサイトのショートカット
  スマートフォンやPCのデスクトップにウェブサイトのアイコンをショートカットとして作成する際に、アイコン画像、表示名、起動URLなどの情報を提供します。（この機能自体はPWAの機能の一部ですが、PWAとしてオフライン対応をしていなくても利用されることがあります）
  
• オフライン対応
  オフラインでも利用できるPWAの機能において、表示されるページのURLや、起動時に表示される画面などを設定します。
  
• ブラウザ表示のテーマカラー設定
  ウェブサイトをブラウザで開いた際に、ブラウザのアドレスバーやステータスバーの色をウェブサイトのテーマカラーに合わせることができます。manifest.jsonのtheme_colorプロパティで指定されます。
  
• WebAPKの生成
  Androidでは、PWAをGoogle Playストアからインストールできる「WebAPK」としてパッケージ化する際に、manifest.jsonの情報が使用されます。これにより、ユーザーはよりネイティブアプリに近い形でウェブサイトをインストールできます。

manifest.jsonで使える主なプロパティ一覧

manifest.jsonでは以下のようなプロパティを使うことができます。

manifest.jsonの実例

manifest.jsonは例えば次のように記述します。

{
  "name": "My WordPress PWA",
  "short_name": "WP-PWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "orientation": "portrait",
  "icons": [
    {
      "src": "/wp-content/uploads/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/wp-content/uploads/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

なぜ、iconsで複数の画像をするのか？

複数画像を指定する理由

inconsプロパティでは、PCのデスクトップやスマホのホーム画面に追加した際に表示する画像を指定します。

通常、以下のように２つ以上記載します。

  "icons": [
    {
      "src": "/wp-content/uploads/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/wp-content/uploads/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]

これは 端末や状況によって必要なアイコンサイズが異なるためです。

ブラウザやOSは必要に応じて最適なサイズのアイコンを自動で選択します。

たとえば、スマホのホーム画面に追加するときは 192×192 を選び、インストール時の確認画面や Play Store 互換用途では 512×512 を選びます。

• 192×192 → Android のホーム画面アイコンに使われることが多い。
• 512×512 → スプラッシュスクリーン（アプリ起動時の画面）や大きめのアイコンに使われる。

推奨されるアイコンサイズ

Googleの場合、少なくとも以下を用意することが推奨されています。

• 48×48
• 72×72
• 96×96
• 144×144
• 192×192
• 512×512

最小限なら「192」と「512」の 2 つで OK ですが、多サイズを用意すると端末ごとにより綺麗に表示できます。

manifest.jsonの登録

manifest.jsonファイルを作成したら、そのファイルをWebサイトの中で読み込みます。

通常は、headタグ内にlinkタグを追加して読み込みます。

<link rel="manifest" href="/manifest.json">

※上記は、プロジェクトのルートディレクトリにmanifest.jsoファイルがある場合です。

全ページで読み込ませる（SPAを除く）

多くのウェブサイトは複数のHTMLファイルで構成されています。

この場合、ユーザーは検索エンジンやSNSのリンクから、トップページではなく、記事ページや商品ページに直接アクセスする可能性があります。

ブラウザは、現在表示しているページのHTMLにmanifest.jsonを読み込ませるlinkタグが存在しないとファイルを読み込みません。

よって、全ページでmanifest.jsonを読み込ませることがベストプラクティスとなります。

ただし、ウェブサイトが単一のページで構成されている場合（SPA – Single Page Application）の場合は、ユーザーは常に同じindex.htmlに滞在します。このためSPAは、index.htmlにだけmanifest.jsonを読み込ませれば問題ありません。