From 01fac1b3dfa58d202854e5f2c17e3efd51376136 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 1 Mar 2025 23:39:06 +0900 Subject: [PATCH 1/2] =?UTF-8?q?2025/02/22=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../reference/background_color/index.md | 88 ++++++++--- .../manifest/reference/categories/index.md | 76 ++++++--- .../manifest/reference/description/index.md | 53 ++++--- .../manifest/reference/display/index.md | 144 ++++++++++-------- .../reference/display_override/index.md | 95 +++++------- .../manifest/reference/index.md | 17 +++ 6 files changed, 290 insertions(+), 183 deletions(-) create mode 100644 files/ja/web/progressive_web_apps/manifest/reference/index.md diff --git a/files/ja/web/progressive_web_apps/manifest/reference/background_color/index.md b/files/ja/web/progressive_web_apps/manifest/reference/background_color/index.md index 9f9d9533e4d00e..ce92c7ab2741ef 100644 --- a/files/ja/web/progressive_web_apps/manifest/reference/background_color/index.md +++ b/files/ja/web/progressive_web_apps/manifest/reference/background_color/index.md @@ -1,34 +1,80 @@ --- title: background_color slug: Web/Progressive_web_apps/Manifest/Reference/background_color -original_slug: Web/Manifest/Reference/background_color +l10n: + sourceCommit: 05187b0fecf39b9176d4a101623589309cf44dd0 --- -{{QuickLinksWithSubpages("/ja/docs/Web/Manifest")}} +{{QuickLinksWithSubpages("/ja/docs/Web/Progressive_web_apps/Manifest/Reference")}} - - - - - - - - - - - -
型String
必須いいえ
+`background_color` メンバーは、スタイルシートが読み込まれる前に表示するアプリケーションページの背景色を定義します。 +この色は、スタイルシートが読み込まれる前にマニフェストが利用可能な場合、ショートカットの背景色を描画するために、ユーザーエージェントが使用します。 -`background_color` メンバーは、スタイルシートが読み込まれる前に表示するアプリケーションページの背景色を定義します。 この値は、スタイルシートが読み込まれる前にマニフェストが利用可能な場合、ショートカットの背景色を描画するために、ユーザーエージェントが使用します。 +## 構文 -したがって、 `background_color` はウェブアプリケーションを起動してからサイトのコンテンツを読み込むまでの間にスムーズに遷移できるよう、 CSS の {{cssxref("background-color")}} と一致させるべきです。 +```json-nolint +/* 名前付きの色を使用 */ +"background_color": "aliceblue" -> **メモ:** `background_color` メンバーは、メインスタイルシートがネットワークまたはストレージメディアから読み込まれている間にだけ、ユーザーの操作感を向上させるためだけのものです。プログレッシブウェブアプリのスタイルシートが利用できるようになった後は、ユーザーエージェントが CSS の {{cssxref("background-color")}} プロパティとして使用されることはありません。 +/* 16 進の値を使用 */ +"background_color": "#f0fbff" + +/* RGB 値を使用 */ +"background_color": "rgb(240 248 255)" +``` + +### 値 + +- `background_color` + + - : 有効な[色値](/ja/docs/Web/CSS/color_value)を指定する文字列です。 + +## 解説 + +`background_color` メンバーは、以下の目的を果たします。 + +- アプリの初期起動から完全に読み込まれた状態へのスムーズな視覚的移行を提供します。 +- ネットワーク経由でアプリファイルを読み込み中、またはストレージメディアからアクセスされるときの使用感を向上させます。 +- インストールされたプログレッシブウェブアプリ (PWA) が起動した際の、一部のブラウザおよびオペレーティングシステムにおけるスプラッシュ画面の表示に寄与します。 + +マニフェストの `background_color` メンバーに指定する色値は、アプリケーションのスタイルシートの {{cssxref("background-color")}} プロパティの値と一致させることをお勧めします。 +これにより、初期表示（該当する場合はスプラッシュ画面も含む）と完全に読み込まれたアプリケーションとの間で視覚的な一貫性が確保されます。 +これらの色を揃えることで、ユーザーに洗練されたシームレスな使用感を提供することができます。 + +アプリケーションが読み込まれた後では、スタイルシートの `background-color` が優先されます。 +マニフェストの `background_color` は、初期読み込み段階における一時的な措置として、また一部の環境におけるスプラッシュ画面の生成のみに使用されます。 + +> [!NOTE] +> ブラウザは、アプリの CSS で定義された [`prefers-color-scheme`](/ja/docs/Web/CSS/@media/prefers-color-scheme) メディアクエリーに対応するために、マニフェストの `background_color` の値を上書きすることがあります。 ## 例 +### アプリに一貫した背景色を設定する + +天気予報アプリを開発していると想像してください。アプリのスタイルシートの背景色が以下のように設定されているとします。 + +```css +body { + background-color: #87ceeb; +} +``` + +アプリの起動から読み込み完了まで、ユーザーに一貫した背景色を表示させるには、アプリのマニフェストファイルに同じ背景色を設定します。以下のように設定します。 + ```json -"background_color": "red" +{ + "name": "WeatherPro", + "display": "standalone", + "background_color": "#87ceeb", + "theme_color": "#4682b4", + "icons": [ + { + "src": "icon-192x192.png", + "sizes": "192x192", + "type": "image/png" + } + ] +} ``` ## 仕様書 @@ -38,3 +84,9 @@ original_slug: Web/Manifest/Reference/background_color ## ブラウザーの互換性 {{Compat}} + +## 関連情報 + +- [`display`](/ja/docs/Web/Progressive_web_apps/Manifest/Reference/display) マニフェストメンバー +- [`theme_color`](/ja/docs/Web/Progressive_web_apps/Manifest/Reference/theme_color) マニフェストメンバー +- PWA 構築時の[アプリのテーマと背景色のカスタマイズ](/ja/docs/Web/Progressive_web_apps/How_to/Customize_your_app_colors) diff --git a/files/ja/web/progressive_web_apps/manifest/reference/categories/index.md b/files/ja/web/progressive_web_apps/manifest/reference/categories/index.md index b5784dcb388682..fa88f630d16550 100644 --- a/files/ja/web/progressive_web_apps/manifest/reference/categories/index.md +++ b/files/ja/web/progressive_web_apps/manifest/reference/categories/index.md @@ -1,34 +1,71 @@ --- title: categories slug: Web/Progressive_web_apps/Manifest/Reference/categories -original_slug: Web/Manifest/Reference/categories +l10n: + sourceCommit: 05187b0fecf39b9176d4a101623589309cf44dd0 --- -{{QuickLinksWithSubpages("/ja/docs/Web/Manifest")}} +{{QuickLinksWithSubpages("/en-US/docs/Web/Progressive_web_apps/Manifest/Reference")}} - - - - - - - - - - - -
型String の配列 (Array)
必須いいえ
+`categories` はマニフェストのメンバーで、ウェブアプリケーションに 1 つ以上の分類を指定することができます。 +これらのカテゴリーは、ユーザーがアプリストアでアプリを見つけるのに役立ちます。 -`categories` メンバーは、アプリケーションが属すると思われるカテゴリーの名前を定義する文字列の配列です。標準化された値の一覧はありませんが、 W3C は[既知のカテゴリーの一覧](https://github.com/w3c/manifest/wiki/Categories)を保守しています。 +> **メモ:** `categories` メンバーはオプションであり、アプリストアはアプリを表示する際に異なる値を使用することがあります。 -> **メモ:** `categories` は、ウェブアプリケーションの一覧を収集したり格納したりするヒントとしてのみ使用されます。検索エンジンやメタキーワードと同様に、カタログを無視して収集や格納を行うことができます。 +## 構文 -> **メモ:** `categories` の値は、格納したり収集したりする処理の前に小文字化されますので、 "News" と "news" は同じ値として扱われます。そもそも、開発者は小文字を使うことが推奨されています。 +```json-nolint +/* 単一のカテゴリー */ +"categories": ["productivity"] + +/* 複数のカテゴリー */ +"categories": ["productivity", "utilities", "social"] +``` + +### 値 + +- `categories` + - : カンマで区切られた文字列の配列で、各文字列がカテゴリー名を表します。 + 文字列は小文字でなければなりません。 + W3C は[標準化されたカテゴリーの一覧](https://github.com/w3c/manifest/wiki/Categories)（英語）を保守しており、有名な値には `business`, `education`, `entertainment`, `finance`, `games`, `productivity` などがあります。 + +## 解説 + +`categories` メンバーは、アプリの実行時動作やブラウザによるアプリの表示方法に影響を与えない補助的なメタデータです。 +その値は、アプリストアやその他の配信プラットフォームでのみ使用され、ブラウザーやインストールされたアプリを使用するユーザーには表示されません。 + +アプリが複数の目的に使える場合、関連するカテゴリーを複数指定することで、アプリストアの異なるセクションでユーザーがアプリを見つけやすくなります。 + +`categories` が指定されていない場合、または指定された値が使用されていない場合、アプリストアは独自の分類システムに基づいてウェブアプリを分類します。 + +以下の Apple App Store の画像は、アプリストアのさまざまな部分にカテゴリーがどのように表示されるかを示しています。 +アプリの概要では、"CHART" フィールド（丸印）にカテゴリーが表示され、そのカテゴリーにおけるアプリのランキングも表示されます。また、情報セクションでは、「カテゴリー」が専用のフィールド（丸印）として表示されます。 + +- BBC アプリは "News" カテゴリーに分類されています。 + +
+ BBC app overview in Apple App Store. CHART field is circled in red to show News category. + BBC app Information section with the Category field circled in red showing News. +
+ +- The Weather Channel アプリは "Weather" カテゴリーに属します。 + +
+ Weather app overview in Apple App Store. CHART field is circled in red to show Weather category + Weather app Information section with the Category field circled in red showing Weather +
## 例 +### 献立計画ウェブアプリのカテゴリー分類 + +この例では、利用可能な食材に基づいて食事を計画するためのウェブアプリのカテゴリー分け方法を示しています。 + ```json -"categories": ["books", "education", "medical"] +{ + "name": "Meal Planner", + "categories": ["food", "health", "lifestyle"] +} ``` ## 仕様書 @@ -37,4 +74,5 @@ original_slug: Web/Manifest/Reference/categories ## ブラウザーの互換性 -{{Compat}} +`categories` マニフェストメンバーは、アプリストアがウェブアプリを公開したりリスト化したりする際に使用されるため、ブラウザーの互換性は適用されません。 +ブラウザーは、このメンバーを解析することがありますが、これはオプションであり、アプリの機能や表示には影響しません。 diff --git a/files/ja/web/progressive_web_apps/manifest/reference/description/index.md b/files/ja/web/progressive_web_apps/manifest/reference/description/index.md index 68c6bc6a2bd506..da2490b6666dd6 100644 --- a/files/ja/web/progressive_web_apps/manifest/reference/description/index.md +++ b/files/ja/web/progressive_web_apps/manifest/reference/description/index.md @@ -1,40 +1,45 @@ --- title: description slug: Web/Progressive_web_apps/Manifest/Reference/description -original_slug: Web/Manifest/Reference/description +l10n: + sourceCommit: 05187b0fecf39b9176d4a101623589309cf44dd0 --- -{{QuickLinksWithSubpages("/ja/docs/Web/Manifest")}} +{{QuickLinksWithSubpages("/ja/docs/Web/Progressive_web_apps/Manifest/Reference")}} - - - - - - - - - - - -
型String
必須いいえ
+`description` はマニフェストのメンバーで、このウェブアプリケーションの主な特性や機能を説明するために使用します。 +このテキストは、アプリストアでアプリを表示した際に、ユーザーがアプリの目的を理解する手助けとなります。 -`description` メンバーは、何をするアプリケーションなのかを開発者が説明することができる文字列です。 `description` には書字方向を設定することができ、マニフェストメンバーの [`dir`](/ja/docs/Web/Manifest) と [`lang`](/ja/docs/Web/Manifest) の値に基づいて左書きまたは右書きで表示することができます。 +> **メモ:** `description` メンバーはオプションであり、アプリストアはアプリを紹介する際にこのテキストを使用しない場合があります。 -## 例 - -左書き言語用の単純な `description` です。 +## 構文 -```json -"description": "Awesome application that will help you achieve your dreams." +```json-nolint +"description": "毎日のタスクを追跡し、プロジェクトを効率的に計画しましょう。" ``` -アラビア語の `description` で、右書きで表示されます。 +### 値 + +- `description` + - : このウェブアプリを説明する文字列です。 + +## 解説 + +`description` メンバーは、アプリの実行時の動作やブラウザによるアプリの表示方法には影響しない補足的なメタデータです。 +この値は、アプリストアやその他の配信プラットフォームで使用され、ユーザーがアプリの機能について理解する手助けとなります。 +さらに、インストールされたアプリのアクセス可能な説明を提供します。 + +## 例 + +### 献立計画ウェブアプリに説明を追加 + +左書き言語用の単純な `description` です。 ```json -"dir": "rtl", -"lang": "ar", -"description": ".تطبيق رائع سيساعدك على تحقيق أحلامك" +{ + "name": "献立プランナー", + "description": "1 週間の献立を計画し、買い物リストを自動的に作成します。栄養を管理し、レシピを見つけます。" +} ``` ## 仕様書 diff --git a/files/ja/web/progressive_web_apps/manifest/reference/display/index.md b/files/ja/web/progressive_web_apps/manifest/reference/display/index.md index 13ed4d042b9e7c..19812f1d2764e8 100644 --- a/files/ja/web/progressive_web_apps/manifest/reference/display/index.md +++ b/files/ja/web/progressive_web_apps/manifest/reference/display/index.md @@ -1,80 +1,98 @@ --- title: display slug: Web/Progressive_web_apps/Manifest/Reference/display -original_slug: Web/Manifest/Reference/display +l10n: + sourceCommit: 05187b0fecf39b9176d4a101623589309cf44dd0 --- -{{QuickLinksWithSubpages("/ja/docs/Web/Manifest")}} +{{QuickLinksWithSubpages("/en-US/docs/Web/Progressive_web_apps/Manifest/Reference")}} - - - - - - - - - - - -
型String
必須いいえ
+`display` はマニフェストのメンバーで、ウェブアプリケーションの推奨表示モードを指定するために使用します。表示モードは、オペレーティングシステムのコンテキスト内でアプリケーションが起動された際に、ブラウザのUIがユーザーに表示される範囲を決定します。ブラウザのインターフェースをすべて表示するか、あるいは非表示にして、よりアプリケーションらしい体験を提供するかを選択できます。 -`display` メンバーは、開発者が推奨するウェブサイトの表示モードを判別する文字列です。この表示モードは、ブラウザーの UI をどれだけユーザーに見せるかを変更するものであり、 `browser` (ブラウザーのウィンドウが完全に見える) から `fullscreen` (アプリが全画面になる) までの範囲を取ります。 +## 構文 -> [!NOTE] -> ブラウザーは指定されたモードに対応していなかった場合は、定義済みの代替チェーンに従います。これは `fullscreen` → `standalone` → `minimal-ui` → `browser` であり、 `browser` が `display` メンバーが指定されていなかった場合の既定値です。 +```json-nolint +/* キーワード値 */ +"display": "fullscreen" +"display": "standalone" +"display": "minimal-ui" +"display": "browser" +``` + +### 値 + +- `display` + + - : キーワード値の文字列です。指定されなかった場合は、既定値の `browser` が使用されます。このキーワード値には以下のようなものがあります。 + + - `fullscreen` + + - : ブラウザーの UI 要素を非表示にしてアプリを開き、利用可能な表示領域全体を使用します。この値は、全画面での利用が重要であり、望ましいアプリで使用します。例えば、ブラウザーコントロールを表示せずに画面全体を使用できるゲームアプリで使用すると、完全に没入できるゲームの体験を提供できます。 + + > [!NOTE] + > マニフェストの `display` メンバーの `fullscreen` の値は、[全画面 API](/ja/docs/Web/API/Fullscreen_API) とは独立して動作します。 `fullscreen` 表示モードはブラウザーウィンドウ全体の状態を全画面に変更しますが、全画面 API はウィンドウ内の特定の要素のみを全画面にします。したがって、ウェブアプリは {{DOMxRef("Document.fullscreenElement")}} が `null` で {{DOMxRef("Document.fullscreenEnabled")}} が `false` であっても、 `fullscreen` 表示モードにすることができます。 + + - `standalone` + + - : アプリをスタンドアロンのネイティブアプリのようなルック＆フィールで開きます。これによって、アプリに独自のウィンドウと、アプリランチャー内の独自のアイコンを持たせることができます。ブラウザーは URL バーなどの UI の要素を除外しますが、ステータスバーなどの他の UI の要素を含めることができます。 例えば、バッテリー残量や通知用の端末のステータスバーを表示しながら、ブラウザーの URL バーなしで独自のウィンドウで開くタスクマネージャーアプリに使用することができます。 + + - `minimal-ui` + + - : アプリをスタンドアロンアプリのようなルック＆フィールで開きますが、最小限のナビゲーション用 UI 要素を表示します。具体的な要素はブラウザーによって異なりますが、通常は戻る、進む、更新などのナビゲーションコントロールや、場合によってはアプリの URL を表示する方法などが含まれます。さらにブラウザーは、コンテンツの共有や印刷機能を提供するプラットフォーム固有の UI の要素を含めることもあります。最小限のブラウザーインターフェイスを表示することが有益なアプリには、この値を使用します。例えば、ニュースリーダーや、その他の一般の読み取り専用アプリで、戻るボタンや再読み込みボタンなどの必要最低限のブラウザーコントロールのみを表示させ、よりクリーンでわずらわしいものを排除したインターフェイスを指定したい場合などに使用します。 + + - `browser` + - : 従来のブラウザーのタブまたは新しいウィンドウで、リンクを開くためのプラットフォーム専用の慣例に従ってアプリを開きます。 ブラウザーのコンテキスト内で使用するように設計されたアプリで、ブラウザーの全機能が必要な場合にこの値を使用します。 `display` モードが指定されていない場合、これが既定値となります。 + +## 解説 + +ブラウザーが{{Glossary("Application context", "アプリケーションコンテキスト")}}に表示モードを適用すると、それが最上位の閲覧コンテキストの既定の表示モードになります。 ブラウザーは、セキュリティ上の理由でこの表示モードを上書きしたり、ユーザーに別の表示モードに切り替えることを指定したりすることがあります。 + +ブラウザーは指定されたモードに対応していなかった場合は、定義済みの代替チェーンに従います。これは `fullscreen` → `standalone` → `minimal-ui` → `browser` です。 + +表示モードに応じて選択的に CSS を提供するには、 {{cssxref("@media/display-mode", "display-mode")}} メディア特性を使用することができます。これにより、サイトを URL から起動した場合とデスクトップアイコンから起動した場合とでユーザーの操作に一貫性を持たせることができます。 > [!NOTE] -> 表示モードに応じて選択的に CSS を提供するには、 {{cssxref("@media/display-mode", "display-mode")}} メディア特性を使用することができます。これにより、サイトを URL から起動した場合とデスクトップアイコンから起動した場合とでユーザーの操作に一貫性を持たせることができます。 - -## 値 - -以下の値を利用することができます。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
表示モード説明代替表示モード
fullscreen - 利用可能な画面の領域をすべて使用し、ユーザーエージェントの{{Glossary("chrome", "クローム")}}は表示されなくなります。 - standalone
standalone - アプリケーションの外見は、単独のアプリケーションのようになります。これは、アプリケーションに別のウィンドウを持たせたり、アプリケーションランチャーに独自のアイコンを追加したりすることができるようになります。このモードでは、ユーザーエージェントはナビゲーションを制御するための UI 要素を除外しますが、ステータスバーなどの他の UI 要素を含めることはできます。 - minimal-ui
minimal-ui - アプリケーションの外見は、単独のアプリケーションのようになりますが、ナビゲーションを制御するために最小限の UI 要素が表示されます。要素はブラウザーによって異なります。 - browser
browser - アプリケーションはブラウザーやプラットフォームに応じた一般的なブラウザータブや新しいウインドウで表示されます。これが既定値です。 - (なし)
+> `display-mode` メディア特性の値は、ブラウザーで実際に使用されている `display` モードを反映します。 +> これは、マニフェストでリクエストされたモードと異なる場合があります。リクエストされたモードにブラウザーが対応していない可能性があるためです。 + +次のコードのように、使用されている `display-mode` に応じて、アプリのスタイル設定を調整することができます。 + +```css +@media (display-mode: standalone) { + body { + background-color: #f0f0f0; /* スタンドアロンモード用のライトグレーの背景 */ + } +} + +@media (display-mode: fullscreen) { + body { + background-color: #000000; /* 全画面モード用の黒の背景 */ + } +} +``` ## 例 +### スタンドアロン表示モードを指定 + +次の例は、 "HackerWeb" というウェブアプリ用のマニフェストファイルで、ユーザーの端末にインストールされた際に、アプリがどのように表示され、動作するかを定義しています。`display` メンバーは `standalone` に設定されており、これは、 URL バーなどの一般的なブラウザーの UI 要素を表示せずに、アプリを別のウィンドウで開くことを指定しています。 + ```json -"display": "standalone" +{ + "name": "HackerWeb", + "short_name": "HackerWeb", + "start_url": "/index.html", + "display": "standalone", + "background_color": "#ffffff", + "description": "A readable Hacker News app", + "icons": [ + { + "src": "images/icons/homescreen192.png", + "sizes": "192x192", + "type": "image/png" + } + ] +} ``` ## 仕様書 diff --git a/files/ja/web/progressive_web_apps/manifest/reference/display_override/index.md b/files/ja/web/progressive_web_apps/manifest/reference/display_override/index.md index bae64449fb4a39..01010645d7ae52 100644 --- a/files/ja/web/progressive_web_apps/manifest/reference/display_override/index.md +++ b/files/ja/web/progressive_web_apps/manifest/reference/display_override/index.md @@ -1,72 +1,49 @@ --- title: display_override slug: Web/Progressive_web_apps/Manifest/Reference/display_override -original_slug: Web/Manifest/Reference/display_override +l10n: + sourceCommit: 05187b0fecf39b9176d4a101623589309cf44dd0 --- -{{QuickLinksWithSubpages("/ja/docs/Web/Manifest")}} +{{QuickLinksWithSubpages("/en-US/docs/Web/Progressive_web_apps/Manifest/Reference")}}{{SeeCompatTable}} - - - - - - - - - - - -
型Array
必須いいえ
- -[`display`](/ja/docs/Web/Manifest/display) メンバーは、開発者が推奨するウェブサイトの表示モードを決定するために使用されます。これは、要求された表示モードに対応していない場合に、ブラウザーが事次善の表示モードに代替するプロセスに従います。高度な用途では、この代替プロセスでは十分でない場合があります。 +[`display`](/ja/docs/Web/Progressive_web_apps/Manifest/Reference/display) メンバーは、開発者が推奨するウェブサイトの表示モードを決定するために使用されます。これは、要求された表示モードに対応していない場合に、ブラウザーが次善の表示モードに代替するプロセスに従います。高度な用途では、この代替プロセスでは十分でない場合があります。 `display_override` メンバーは、 `display` メンバーを使用する前にブラウザーが考慮する一連の表示モードを開発者に提供することで、これを解決しています。この値は表示モードの配列であり、順番に考慮され、最初にサポートされた表示モードが適用されます。 -## 値 +### 値 表示上書きオブジェクトは表示モード文字列の集合で、利用可能な値は以下の通りです。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
表示モード説明
fullscreen - 利用可能な画面の領域をすべて使用し、ユーザーエージェントの{{Glossary("chrome", "クローム")}}は表示されなくなります。 -
standalone - アプリケーションの外見は、単独のアプリケーションのようになります。これは、アプリケーションに別のウィンドウを持たせたり、アプリケーションランチャーに独自のアイコンを追加したりすることができるようになります。このモードでは、ユーザーエージェントはナビゲーションを制御するための UI 要素を除外しますが、ステータスバーなどの他の UI 要素を含めることはできます。 -
minimal-ui - アプリケーションの外見は、単独のアプリケーションのようになりますが、ナビゲーションを制御するために最小限の UI 要素が表示されます。要素はブラウザーによって異なります。 -
browser - アプリケーションはブラウザーやプラットフォームに応じた一般的なブラウザータブや新しいウインドウで表示されます。これが既定値です。 -
window-controls-overlay - この表示モードは、アプリケーションが別の PWA ウィンドウにあり、デスクトップ OS 上にある場合にのみ適用されます。この場合、ウィンドウ制御のオーバーレイ機能が利用できるようにします。これは、ウィンドウの全領域がアプリのウェブコンテンツに使用され、ウィンドウの制御ボタン（最大化、最小化、閉じる、およびその他の PWA 固有のボタン）がウェブコンテンツの上にオーバーレイとして表示されるものです。 -
+- `browser` + + - : アプリケーションはブラウザーやプラットフォームに応じた一般的なブラウザータブや新しいウインドウで表示されます。 + これが既定値です。 + +- `fullscreen` + + - : 利用可能な画面の領域をすべて使用し、ユーザーエージェントの{{Glossary("Chrome", "クローム")}}は表示されなくなります。 + +- `minimal-ui` + + - : アプリケーションの外見は、単独のアプリケーションのようになりますが、ナビゲーションを制御するために最小限の UI 要素が表示されます。 + 要素はブラウザーによって異なります。 + +- `standalone` + + - : アプリケーションの外見は、単独のアプリケーションのようになります。 + これは、アプリケーションに別のウィンドウを持たせたり、アプリケーションランチャーに独自のアイコンを追加したりすることができるようになります。 + このモードでは、ユーザーエージェントはナビゲーションを制御するための UI 要素を除外しますが、ステータスバーなどの他の UI 要素を含めることはできます。 + +- `tabbed` {{experimental_inline}} + + - : アプリケーションは、単一の OS レベルのウィンドウ内に、複数のアプリケーションコンテキストを含めることができます。 + 対応しているブラウザーでは、これらのコンテキストをどのように表示するかを選択できますが、一般的なアプローチは、それらを切り替えるためのタブバーを提供することです。 + +- `window-controls-overlay` {{experimental_inline}} + + - : この表示モードは、アプリケーションが別の PWA ウィンドウにあり、デスクトップ OS 上にある場合にのみ適用されます。 + この場合、ウィンドウ制御のオーバーレイ機能が利用できるようにします。これは、ウィンドウの全領域がアプリのウェブコンテンツに使用され、ウィンドウの制御ボタン（最大化、最小化、閉じる、およびその他の PWA 固有のボタン）がウェブコンテンツの上にオーバーレイとして表示されるものです。 ## 例 @@ -89,5 +66,5 @@ original_slug: Web/Manifest/Reference/display_override ## 関連情報 -- [Preparing for the display modes of tomorrow](https://web.dev/display-override/) -- [Customize the window controls overlay of your PWA's title bar](https://web.dev/window-controls-overlay/) +- [Preparing for the display modes of tomorrow](https://developer.chrome.com/docs/capabilities/display-override) +- [Customize the window controls overlay of your PWA's title bar](https://web.dev/articles/window-controls-overlay) diff --git a/files/ja/web/progressive_web_apps/manifest/reference/index.md b/files/ja/web/progressive_web_apps/manifest/reference/index.md new file mode 100644 index 00000000000000..b20f769fb3090d --- /dev/null +++ b/files/ja/web/progressive_web_apps/manifest/reference/index.md @@ -0,0 +1,17 @@ +--- +title: ウェブアプリマニフェストのメンバーのリファレンス +short-title: リファレンス +slug: Web/Progressive_web_apps/Manifest/Reference +l10n: + sourceCommit: 05187b0fecf39b9176d4a101623589309cf44dd0 +--- + +{{QuickLinksWithSubpages("/ja/docs/Web/Progressive_web_apps/Manifest/Reference")}} + +このページでは、ウェブで使用される[ウェブアプリマニフェスト](/ja/docs/Web/Progressive_web_apps/Manifest)のメンバーのリファレンスを一覧で紹介します。 + +{{SubPagesWithSummaries}} + +## 関連情報 + +- [ウェブアプリマニフェスト](/ja/docs/Web/Progressive_web_apps/Manifest) From ff2cfbb594c8e82683d38bd08ef901cef2cbabe3 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 3 Mar 2025 02:07:49 +0900 Subject: [PATCH 2/2] Update index.md --- .../progressive_web_apps/manifest/reference/display/index.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/files/ja/web/progressive_web_apps/manifest/reference/display/index.md b/files/ja/web/progressive_web_apps/manifest/reference/display/index.md index 19812f1d2764e8..8583f3ea10e784 100644 --- a/files/ja/web/progressive_web_apps/manifest/reference/display/index.md +++ b/files/ja/web/progressive_web_apps/manifest/reference/display/index.md @@ -51,8 +51,7 @@ l10n: 表示モードに応じて選択的に CSS を提供するには、 {{cssxref("@media/display-mode", "display-mode")}} メディア特性を使用することができます。これにより、サイトを URL から起動した場合とデスクトップアイコンから起動した場合とでユーザーの操作に一貫性を持たせることができます。 -> [!NOTE] -> `display-mode` メディア特性の値は、ブラウザーで実際に使用されている `display` モードを反映します。 +> **メモ:** `display-mode` メディア特性の値は、ブラウザーで実際に使用されている `display` モードを反映します。 > これは、マニフェストでリクエストされたモードと異なる場合があります。リクエストされたモードにブラウザーが対応していない可能性があるためです。 次のコードのように、使用されている `display-mode` に応じて、アプリのスタイル設定を調整することができます。