HTML Academy · レッスン

Web App Manifest

Q: 「Web App Manifest」で何を学びますか？

manifest.jsonファイルでPWAのメタデータを定義します ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

manifest.jsonファイルでPWAのメタデータを定義します

「Web App Manifest」はCoddyKit上の無料HTML Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。

マニフェストの役割

Webアプリマニフェストは、ページをアプリとしてインストールする方法をブラウザーに伝えるJSONファイルです。使用する名前、表示するアイコン、起動するURL、適用する配色、描画に使用する表示モード（standalone、fullscreen、browser）などを指定します。

マニフェストのリンク

インストール可能にするすべてのページで、head内に<link rel="manifest" href="/manifest.webmanifest">を指定してマニフェストを参照します。ブラウザーはマニフェストを一度取得してキャッシュし、以降の読み込み時に更新を取得します。

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

最低限必要なフィールド

ブラウザーに「アプリをインストール」を表示させるには、マニフェストに少なくともname（正式名称）、short_name（ホーム画面のラベル、12文字程度）、start_url、display（通常は「standalone」）、および192x192と512x512のPNGを少なくとも1つずつ含むicons配列が必要です。

{
  "name": "Coddy Learn",
  "short_name": "Coddy",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#1f2937",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

start_url

インストール済みアプリのアイコンをタップしたときに起動するURLです。ホームページを表す/を指定することが多いですが、分析用のクエリパラメータを含めることもできます。"start_url": "/?source=pwa"とすると、インストール後のセッションをブラウザーのセッションとは別に識別できます。

displayモード

displayには、「browser」（通常のページUI）、「minimal-ui」（一部のUI）、「standalone」（UIなしでアプリのように表示）、または「fullscreen」（ステータスバーなし）を指定できます。一般的なPWAではstandaloneが選ばれます。

アイコンとMaskable

Androidでほかのホーム画面アイコンに合わせてシステムがアイコンをマスクできるよう、「maskable」目的のアイコンを含めます。{ src: "/icon-mask.png", sizes: "192x192", purpose: "maskable" }のように指定します。Maskableアイコンには、システムが切り抜く際に安全に残るセーフゾーンを設けます。

theme_colorとbackground_color

theme_colorは、アプリをブラウザーで実行しているときのアドレスバーの色合いを設定します。background_colorは、ページが読み込まれる前のスプラッシュ画面の背景として表示されます。洗練された起動体験になるよう、デザインシステムの主要カラーに合わせてください。

orientation

"orientation": "portrait"を指定すると、インストール後のアプリを縦向きに固定します。「any」、「landscape」、「portrait-primary」も指定できます。一般的なPWAでは、この項目を設定せず、デバイスの向きに任せることが多いです。

インストール可能条件

ブラウザーに「インストール」を表示させるには、ページをHTTPSで配信し、fetchイベントを処理するService Workerを登録し、最低限必要なフィールドを含む有効なマニフェストをリンクし、利用状況に関する条件（ユーザーがページを操作したこと）を満たす必要があります。

マニフェストの更新

ブラウザーはマニフェストをキャッシュします。編集後に更新を強制するには、アイコンのURLを変更します（キャッシュバスティング用のクエリパラメータが使えます）。または、しばらく待ってください。ほとんどのブラウザーは定期的に再確認します。強制更新APIはないため、ユーザーがしばらくの間、少し古いマニフェストを使用する可能性を前提に設計してください。

マニフェストのテスト

Chrome DevToolsのApplicationタブには、解析済みのマニフェスト、計算値、検証エラーが表示されます。Lighthouse PWA監査では、インストールに必要な各条件を確認し、不足しているものを報告します。開発中は両方を使って、インストール可能な状態か確認してください。

知識チェック

Webアプリマニフェストのdisplay: 「standalone」という値は何をしますか？

要約

Webアプリマニフェスト（manifest.webmanifest）は、ページをアプリとしてインストールする方法をブラウザーに伝えます。name、short_name、start_url、display、theme_color、アイコン（192と512、Android用のmaskableを含む）を指定します。<link rel="manifest">でリンクし、インストール可能にするにはHTTPSとService Workerを使用します。Chrome DevToolsとLighthouse PWA監査でテストしてください。

よくある質問

「Web App Manifest」レッスンは無料ですか？

はい。「Web App Manifest」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。

「Web App Manifest」で何を学びますか？

manifest.jsonファイルでPWAのメタデータを定義しますブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

HTML Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「Web App Manifest」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このHTML Academyレッスンでコードを書いて実行できますか？

はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← HTML Academyに戻る