SIMPLE

今すぐ実装！PWAマニフェストファイル完全解説 〜コピペで使えるサンプル付き〜

ウェブサイトをアプリ化する秘訣！マニフェストファイルの正しい設定方法とサンプルコードで、PWAの実装が驚くほど簡単に実装できます。

通りすがりのラマ🦙
28 March, 2025
目次

PWAのマニフェストファイル完全ガイド

はじめに

プログレッシブウェブアプリケーション（PWA）は、最新のウェブ技術を活用して、ネイティブアプリに近い体験をユーザーに提供する方法です。PWAの重要な構成要素の一つが「Webアプリマニフェスト」です。

マニフェストファイルは、アプリケーションの外観や動作をブラウザに伝える役割を持つJSONファイルです。ユーザーがアプリをホーム画面に追加したときのアイコン、起動画面、表示名、テーマカラーなどを定義します。適切に設定されたマニフェストファイルは、ユーザーエクスペリエンスを大幅に向上させ、PWAをより「アプリらしく」見せることができます。

このガイドでは、マニフェストファイルの基本から応用まで、実用的なサンプルコードと共に詳しく解説します。

マニフェストファイルの構成

マニフェストファイルは .webmanifest または .json の拡張子を持つJSONファイルです。一般的には manifest.json または manifest.webmanifest というファイル名で作成されます。

マニフェストファイルの基本的な構造は以下のとおりです：

{
  "name": "アプリケーションの完全な名前",
  "short_name": "短い名前",
  "description": "アプリケーションの説明",
  "icons": [
    {
      "src": "path/to/icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#4285f4"
}

マニフェストファイルの設定

必須項目

マニフェストファイルには、以下の項目が必須とされています：

プロパティ 説明
name アプリケーションの完全な名前
short_name ホーム画面に表示される短い名前
icons 異なるサイズのアイコンの配列
start_url アプリが起動するURL

重要な任意項目

以下のプロパティは必須ではありませんが、優れたユーザー体験を提供するために設定することを強く推奨します：

プロパティ 説明 可能な値
display アプリケーションのUI表示モード fullscreen, standalone, minimal-ui, browser
background_color スプラッシュ画面の背景色 有効なCSSカラー値
theme_color アプリのテーマカラー 有効なCSSカラー値
description アプリケーションの詳細な説明 テキスト
orientation 優先される画面の向き any, natural, landscape, portrait など

高度な設定項目

より詳細な制御が必要な場合には、以下のプロパティも利用できます：

プロパティ 説明
scope アプリケーションのナビゲーションスコープ
lang アプリケーションの主要言語
dir テキストの方向 (ltr, rtl, auto)
categories アプリケーションのカテゴリ
screenshots アプリケーションのスクリーンショット
shortcuts アプリケーションのショートカット
related_applications 関連するネイティブアプリケーション
prefer_related_applications 関連するネイティブアプリを優先するか

マニフェストファイルの使用方法

マニフェストファイルを作成したら、HTMLの <head> セクションに以下のようにリンクを追加します：

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

ブラウザの互換性を高めるため、以下のメタタグも追加することをお勧めします：

<!-- iOS向け設定 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="アプリ名">
<link rel="apple-touch-icon" href="/icons/apple-icon-180.png">

<!-- Microsoft向け設定 -->
<meta name="msapplication-TileImage" content="/icons/mstile-150x150.png">
<meta name="msapplication-TileColor" content="#ffffff">

マニフェストファイルのサンプル

以下は、完全に設定されたマニフェストファイルの例です：

{
  "name": "Weather PWA",
  "short_name": "Weather",
  "description": "天気予報を提供するPWAアプリケーション",
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#3E4EB8",
  "theme_color": "#2F3BA2",
  "icons": [
    {
      "src": "/images/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "/images/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "/images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "/images/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "/images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/images/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "/images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "scope": "/",
  "orientation": "portrait",
  "lang": "ja",
  "dir": "ltr",
  "categories": ["weather", "utilities"],
  "screenshots": [
    {
      "src": "/images/screenshots/screen1.png",
      "sizes": "1280x720",
      "type": "image/png"
    },
    {
      "src": "/images/screenshots/screen2.png",
      "sizes": "1280x720",
      "type": "image/png"
    }
  ],
  "shortcuts": [
    {
      "name": "今日の天気",
      "short_name": "今日",
      "description": "今日の天気予報を表示",
      "url": "/today",
      "icons": [{ "src": "/images/today.png", "sizes": "192x192" }]
    },
    {
      "name": "明日の天気",
      "short_name": "明日",
      "description": "明日の天気予報を表示",
      "url": "/tomorrow",
      "icons": [{ "src": "/images/tomorrow.png", "sizes": "192x192" }]
    }
  ],
  "related_applications": [
    {
      "platform": "play",
      "url": "https://play.google.com/store/apps/details?id=com.example.weather",
      "id": "com.example.weather"
    },
    {
      "platform": "itunes",
      "url": "https://itunes.apple.com/app/example-weather/id123456789"
    }
  ],
  "prefer_related_applications": false
}

マニフェストファイルの実装例

以下は、マニフェストファイルを実装する簡単なHTMLファイルの例です：

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Weather PWA</title>
  
  <!-- マニフェストファイルのリンク -->
  <link rel="manifest" href="/manifest.json">
  
  <!-- iOS向け設定 -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="Weather PWA">
  <link rel="apple-touch-icon" href="/images/icons/apple-icon-180.png">
  
  <!-- テーマカラー -->
  <meta name="theme-color" content="#2F3BA2">
  
  <style>
    body {
      font-family: 'Helvetica Neue', sans-serif;
      margin: 0;
      padding: 20px;
      background-color: #f5f5f5;
    }
    header {
      background-color: #2F3BA2;
      color: white;
      padding: 16px;
      text-align: center;
      border-radius: 8px 8px 0 0;
    }
    .content {
      background-color: white;
      padding: 20px;
      border-radius: 0 0 8px 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
  </style>
</head>
<body>
  <header>
    <h1>Weather PWA</h1>
  </header>
  <div class="content">
    <h2>今日の天気</h2>
    <p>東京: 晴れ、気温25℃</p>
    <p>大阪: 曇り、気温23℃</p>
    <p>福岡: 雨、気温22℃</p>
  </div>
  
  <script>
    // Service Workerの登録
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', () => {
        navigator.serviceWorker.register('/sw.js')
          .then(registration => {
            console.log('Service Worker registered:', registration);
          })
          .catch(error => {
            console.log('Service Worker registration failed:', error);
          });
      });
    }
  </script>
</body>
</html>

マニフェストファイルの検証

マニフェストファイルが正しく設定されているか確認するには、以下の方法があります：

  1. Chrome DevTools: Chrome ブラウザで開発者ツールを開き、「Application」タブから「Manifest」セクションを確認できます。

  2. Lighthouse: Chrome の Lighthouse ツールを使用して、PWAのチェックリストを実行し、マニフェストファイルの問題を検出できます。

  3. PWA Builder: PWA Builder ウェブサイトでは、URLを入力するだけでマニフェストファイルの検証や生成が可能です。

マニフェストファイルの互換性

マニフェストファイルは主要なブラウザでサポートされていますが、ブラウザごとに一部の機能に違いがあります：

ブラウザ サポート状況
Chrome 完全サポート
Edge 完全サポート
Firefox ほぼ完全サポート
Safari 部分的サポート（iOS 11.3以降）
Samsung Internet 完全サポート

特にiOSでは、マニフェストファイルのサポートが限定的なため、前述のiOS向けメタタグを追加することが重要です。

まとめ

マニフェストファイルは、PWAをネイティブアプリのような体験に近づける重要な要素です。適切に設定することで、以下のメリットが得られます：

  • ホーム画面にインストール可能
  • スプラッシュスクリーンの表示
  • アプリケーションのブランディング強化
  • オフライン機能のサポート
  • 独立したウィンドウでの起動

マニフェストファイルは比較的簡単に実装できますが、ユーザーエクスペリエンスに大きな影響を与えます。このガイドを参考に、あなたのウェブアプリをPWAに進化させましょう。

参考リンク

関連記事

人気記事

通りすがりのラマ🦙

このブログでは個人開発で得た知見や興味のあるテクノロジーに関する記事を執筆します。 日々公開されている情報に助けられているので、自分が得た知見も世の中に還元していければと思います。 解決できないバグに出会うと、草を食べます。🦙🌿 経歴: 情報工学部→日系SIer→外資系IT企業 興味: Webアプリケーション開発、Webデザイン、AI 趣味: 個人開発、テニス