【HTML Living Standard】manifest属性値の使い方

manifest属性値の使い方について、初心者にもわかりやすく解説します。

作成日: 2025年09月29日更新日: 2026年03月24日

基本的な使い方

manifestプロパティは、Webアプリケーションのオフライン利用に必要なマニフェストファイルのURLを保持するプロパティです。この属性は、HTMLの<html>要素に指定され、AppCache（アプリケーションキャッシュ）と呼ばれる仕組みの一部として機能しました。

AppCacheは、Webサイトの特定のリソース（HTML、CSS、JavaScript、画像など）をブラウザがローカルにキャッシュし、ユーザーがインターネットに接続していない状態でもWebアプリケーションを利用できるようにするための技術です。manifest属性に指定されたマニフェストファイルは、どのリソースをキャッシュするか、どのように更新するかといったルールを記述したテキストファイルでした。

しかし、AppCacheは設計上の複雑さや機能の限界から、現在では非推奨となっています。Web標準からも削除される方向で議論が進んでおり、新規のWebアプリケーション開発で利用することは推奨されません。

AppCacheの後継技術として、より強力で柔軟な機能を提供するService Workerが登場しています。Service Workerは、オフライン対応だけでなく、プッシュ通知やバックグラウンド同期など、より高度な機能を実現できます。システムエンジニアを目指す初心者の方々には、manifest属性やAppCacheの代わりに、Service Workerの学習と活用をおすすめいたします。

公式リファレンス: rel="manifest"

構文(syntax)


1<html manifest="url">

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

サンプルコード

PWA化するmanifest.jsonを設定する


1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Web App Manifest Example</title>
7    <!-- 
8        `manifest`属性はHTML Living Standardで廃止されました。
9        Webアプリケーションマニフェストファイル（`manifest.json`）を指定するには、
10        代わりに`<link rel="manifest">`要素を使用することが推奨されます。
11        `manifest.json`は、PWA（Progressive Web App）の設定ファイルで、
12        アプリ名やアイコンなど、Webアプリをインストール可能にする情報を提供します。
13    -->
14    <link rel="manifest" href="manifest.json">
15</head>
16<body>
17    <h1>Webアプリケーションマニフェストの利用例</h1>
18    <p>このHTMLファイルは、`manifest.json`というWebアプリケーションマニフェストファイルを参照しています。</p>
19    <p>この設定により、対応ブラウザではPWAとしてホーム画面に追加するなどの機能が利用可能になります。</p>
20
21    <!-- 
22        このコードを動作させるには、同階層に以下のような内容の`manifest.json`ファイルが必要です。
23        （例）
24        {
25          "name": "シンプルなPWAアプリ",
26          "short_name": "PWAサンプル",
27          "start_url": "/",
28          "display": "standalone",
29          "background_color": "#ffffff",
30          "theme_color": "#000000",
31          "icons": [
32            {
33              "src": "icon-192x192.png",
34              "sizes": "192x192",
35              "type": "image/png"
36            }
37          ]
38        }
39    -->
40</body>
41</html>

HTMLのmanifest属性は、かつてWebアプリケーションマニフェストファイルを指定するために使用されましたが、HTML Living Standardにおいて現在は廃止されています。そのため、サンプルコードのように直接HTML要素にmanifest属性を記述しても機能しません。

現在のHTMLでは、Webアプリケーションマニフェストファイルを参照するために、<link rel="manifest" href="manifest.json">のように<link>要素のrel属性にmanifest、href属性にマニフェストファイルのパスを指定する方法が推奨されています。このmanifest.jsonファイルは、Progressive Web App（PWA）の基本的な設定を行うJSON形式のファイルです。具体的には、ウェブサイトを単なるページとしてではなく、スマートフォンやPCにインストール可能なアプリケーションのように振る舞わせるための情報を定義します。

manifest.jsonには、アプリの名前、ホーム画面に表示されるアイコン、起動時のURL、表示形式（例: 全画面表示）などが記述され、これによってユーザーはウェブサイトをホーム画面に追加したり、アプリ一覧から起動したり、オフライン環境でも利用できるようになります。

この<link>要素は、マニフェストファイルの場所を指定する役割を持ち、プログラミング言語の関数のような「引数」や「戻り値」を持つものではありません。指定されたマニフェストファイルの内容がブラウザによって読み取られ、Webアプリケーションの挙動に影響を与えます。サンプルコードは、この現代的な方法でmanifest.jsonを参照し、PWAとして動作するウェブサイトの基本的な構造を示しています。

HTMLのmanifest属性は現在廃止されており、使用するとエラーや予期せぬ動作の原因となります。Webアプリケーションマニフェスト（manifest.json）ファイルを指定する際は、必ず<link rel="manifest" href="manifest.json">要素を使用してください。このmanifest.jsonは、PWA（Progressive Web App）としてWebアプリのアプリ名やアイコンを定義し、インストールやホーム画面への追加機能を提供する重要な設定ファイルです。サンプルコードのPWA機能を正しく動作させるためには、HTMLファイルと同じ階層に、適切な内容のmanifest.jsonファイルを別途用意し、パスも正確に記述することが必須です。

HTML manifest属性によるオフラインキャッシュ指定


1<!DOCTYPE html>
2<html manifest="appcache.manifest">
3<head>
4    <meta charset="UTF-8">
5    <title>HTML manifest属性の例</title>
6</head>
7<body>
8    <!-- 
9        'manifest'属性は、HTML Living Standardで非推奨とされており、
10        現代のWeb開発ではService Workerの使用が推奨されます。
11        
12        この属性はかつて、オフラインキャッシュのマニフェストファイルを指定するために使用されました。
13        ブラウザは指定されたマニフェストファイル ('appcache.manifest') に基づいて、
14        このページとその関連リソースをオフラインで利用可能にします。
15    -->
16    <h1>オフライン対応ページ</h1>
17    <p>このページは、<code>appcache.manifest</code>ファイルによってオフラインで利用可能になるように設定されています。（ただし、この機能は現在ほとんどのブラウザでサポートされていません。）</p>
18</body>
19</html>

HTMLのmanifest属性は、かつてWebページをオフラインで利用可能にするための「Application Cache（AppCache）」機能に関連して、<html>タグに記述された特別な属性です。この属性には、オフラインキャッシュに必要なリソースを定義したマニフェストファイルへのパスを指定しました。

サンプルコードのmanifest="appcache.manifest"のように記述することで、ブラウザは指定されたappcache.manifestファイルの内容を読み込み、HTMLページとその中で使用されている画像やCSS、JavaScriptなどの関連リソースをユーザーのデバイスにキャッシュしていました。これにより、インターネット接続がない状態でも、ユーザーはキャッシュされたページを閲覧することができました。

manifest属性自体は、引数や戻り値を持つ関数のようなものではなく、HTML要素に特定の振る舞いを指示するための設定値として機能します。

しかし、このmanifest属性とApplication Cache機能は、HTML Living Standardにおいて非推奨とされており、現代のWeb開発ではほとんどのブラウザでサポートされていません。代わりに、より高度で柔軟なオフライン機能やバックグラウンド処理を実現するために「Service Worker（サービスワーカー）」という技術の使用が推奨されています。

したがって、サンプルコードは過去のWeb技術の一例として理解することが重要であり、現在のWebアプリケーション開発でオフライン対応を行う際にはService Workerを利用することが一般的です。

このサンプルコードで使用されているmanifest属性は、HTML Living Standardで非推奨とされており、現在のWeb開発では利用を避けるべきです。かつてはオフラインキャッシュ機能を提供するために使われましたが、現在ではほとんどの主要ブラウザでサポートされていません。そのため、サンプルコードのように記述しても、期待通りのオフライン機能は動作しません。現代のWebアプリケーションでオフライン対応やリソースのキャッシュを行う場合は、より強力で柔軟なService Workerの利用が推奨されます。この属性は、Web技術の歴史を理解するためのものとして捉え、新規開発ではService Workerの学習を進めることをお勧めします。