---
title: ウェブアプリマニフェスト
slug: Web/Manifest
tags:
  - App
  - PWA
  - Reference
  - アプリ
  - ウェブ
  - マニフェスト
  - リファレンス
translation_of: Web/Manifest
---
<div>{{QuickLinksWithSubpages("/ja/docs/Web/Manifest")}}</div>

<div>{{SeeCompatTable}}</div>

<p><strong>ウェブアプリマニフェスト</strong>は、<a href="/ja/docs/Web/Progressive_web_apps">プログレッシブウェブアプリ</a> (PWA) と呼ばれる一連のウェブ技術の一部であり、アプリストアを通さずに端末のホーム画面にインストールすることができるものです。単純なホームスクリーンリンクやブックマークを持つ通常のウェブアプリとは異なり、 PWA は事前にダウンロードしてオフラインでも動作するだけでなく、通常の <a href="/ja/docs/Web/API">Web API</a> を使用することもできます。</p>

<p>ウェブアプリマニフェストは、ウェブアプリケーションについて、ウェブアプリをダウンロードしたり、ユーザーにネイティブアプリと同じように見せる (例えば、端末のホーム画面にインストールされ、ユーザーに素早いアクセスと豊かな操作性を提供するなどの) ために必要なの情報を {{Glossary("JSON")}} テキストファイルで提供します。 PWA のマニフェストには、その名前、作者、アイコン、バージョン、説明、および (他のものの中で特に) 必要なすべてのリソースのリストが含まれています。</p>

<div class="hidden">
<p>PWA のマニフェストにはコメントが入れられるのでしょうか？<br>
 これは {{Glossary("JSON")}} 形式のファイルですが、一つ例外があります。 "<code>//</code>" 形式のコメントを入れることができます。</p>
</div>

<h2 id="メンバー">メンバー</h2>

<p>ウェブマニフェストは以下のキーを含むことができます。それぞれのリンクをクリックすると詳細情報を見ることができます。</p>

<p>{{ListSubpages("/ja/docs/Web/Manifest")}}</p>

<h2 id="Example_manifest" name="Example_manifest">マニフェストの例</h2>

<pre class="brush: json">{
  "name": "HackerWeb",
  "short_name": "HackerWeb",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#fff",
  "description": "A simply readable Hacker News app.",
  "icons": [{
    "src": "images/touch/homescreen48.png",
    "sizes": "48x48",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen72.png",
    "sizes": "72x72",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen96.png",
    "sizes": "96x96",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen144.png",
    "sizes": "144x144",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen168.png",
    "sizes": "168x168",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen192.png",
    "sizes": "192x192",
    "type": "image/png"
  }],
  "related_applications": [{
    "platform": "play",
    "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
  }]
}</pre>

<h2 id="Deploying_a_manifest_with_the_link_tag" name="Deploying_a_manifest_with_the_link_tag">マニフェストの展開</h2>

<p>ウェブアプリマニフェストは、文書の {{HTMLElement("head")}} 内にある {{HTMLElement("link")}} 要素を使用して HTML ページから展開されます。</p>

<pre class="brush: html">&lt;link rel="manifest" href="/manifest.webmanifest"&gt;</pre>

<div class="note">
<p><strong>注</strong>: <code>.webmanifest</code> の拡張子が仕様書の <a href="https://w3c.github.io/manifest/#media-type-registration">Media type registration</a> の節で指定されています (マニフェストファイルのレスポンスは <code>Content-Type: application/manifest+json</code> を返してください)。ブラウザーは一般に <code>.json</code> (<code>Content-Type: application/json</code>) のような他の適切な拡張子でもマニフェストに対応します。</p>
</div>

<div class="note">
<p><strong>注</strong>: マニフェストのアクセスに資格情報が必要な場合は、マニフェストファイルが現在のページと同じオリジンにあったとしても、 {{domxref("HTML/CORS_settings_attributes", "crossorigin")}} 属性を <code>use-credentials</code> に設定する必要があります。</p>
</div>

<h2 id="Splash_screens" name="Splash_screens">スプラッシュ画面</h2>

<p>Chrome 47 以降では、ホーム画面からサイトが起動されるとスプラッシュ画面が表示されます。スプラッシュ画面はウェブアプリマニフェストのプロパティから、具体的には以下のように自動生成されます。</p>

<ul>
 <li><code><a href="/docs/Web/Manifest/name">name</a></code></li>
 <li><code><a href="/docs/Web/Manifest/background_color">background_color</a></code></li>
 <li><code><a href="/docs/Web/Manifest/icons">icons</a></code> の配列中のアイコンで、端末の 128dpi に最も近いもの。
</li></ul>

<h2 id="Specification" name="Specification">仕様書</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
  <tr>
   <td>{{SpecName("Manifest")}}</td>
   <td>{{Spec2("Manifest")}}</td>
   <td>初回定義</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<p>{{Compat("html.manifest")}}</p>