Skip to content

Commit

Permalink
2025/02/22 時点の英語版に同期
Browse files Browse the repository at this point in the history
  • Loading branch information
@mfuji09
mfuji09 committed Mar 2, 2025
1 parent c4a3897 commit b586599
Show file tree
Hide file tree
Showing 5 changed files with 211 additions and 120 deletions.
88 changes: 70 additions & 18 deletions files/ja/web/progressive_web_apps/manifest/reference/background_color/index.md
View file
Original file line number Diff line number Diff line change
@@ -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")}}

<table class="properties">
<tbody>
<tr>
<th scope="row">型</th>
<td><code>String</code></td>
</tr>
<tr>
<th scope="row">必須</th>
<td>いいえ</td>
</tr>
</tbody>
</table>
`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"
}
]
}
```

## 仕様書
Expand All @@ -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)
77 changes: 58 additions & 19 deletions files/ja/web/progressive_web_apps/manifest/reference/categories/index.md
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,72 @@
---
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")}}

<table class="properties">
<tbody>
<tr>
<th scope="row">型</th>
<td><code>String</code> の配列 (<code>Array</code>)</td>
</tr>
<tr>
<th scope="row">必須</th>
<td>いいえ</td>
</tr>
</tbody>
</table>
`categories` はマニフェストのメンバーで、ウェブアプリケーションに 1 つ以上の分類を指定することができます。
これらのカテゴリーは、ユーザーがアプリストアでアプリを見つけるのに役立ちます。

`categories` メンバーは、アプリケーションが属すると思われるカテゴリーの名前を定義する文字列の配列です。標準化された値の一覧はありませんが、 W3C は[既知のカテゴリーの一覧](https://github.com/w3c/manifest/wiki/Categories)を保守しています。
> [!NOTE]
> `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" カテゴリーに分類されています。

<div style="display: flex; justify-content: center;">
<img src="bbc.jpeg" alt="BBC app overview in Apple App Store. CHART field is circled in red to show News category.">
<img src="bbc-info.jpeg" alt="BBC app Information section with the Category field circled in red showing News.">
</div>

- The Weather Channel アプリは "Weather" カテゴリーに属します。

<div style="display: flex; justify-content: center;">
<img src="weather.jpeg" alt="Weather app overview in Apple App Store. CHART field is circled in red to show Weather category">
<img src="weather-info.jpeg" alt="Weather app Information section with the Category field circled in red showing Weather">
</div>

## 例

### 献立計画ウェブアプリのカテゴリー分類

この例では、利用可能な食材に基づいて食事を計画するためのウェブアプリのカテゴリー分け方法を示しています。

```json
"categories": ["books", "education", "medical"]
{
"name": "Meal Planner",
"categories": ["food", "health", "lifestyle"]
}
```

## 仕様書
Expand All @@ -37,4 +75,5 @@ original_slug: Web/Manifest/Reference/categories

## ブラウザーの互換性

{{Compat}}
`categories` マニフェストメンバーは、アプリストアがウェブアプリを公開したりリスト化したりする際に使用されるため、ブラウザーの互換性は適用されません。
ブラウザーは、このメンバーを解析することがありますが、これはオプションであり、アプリの機能や表示には影響しません。
54 changes: 30 additions & 24 deletions files/ja/web/progressive_web_apps/manifest/reference/description/index.md
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,46 @@
---
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("/en-US/docs/Web/Progressive_web_apps/Manifest/Reference")}}

<table class="properties">
<tbody>
<tr>
<th scope="row">型</th>
<td><code>String</code></td>
</tr>
<tr>
<th scope="row">必須</th>
<td>いいえ</td>
</tr>
</tbody>
</table>
`description` はマニフェストのメンバーで、このウェブアプリケーションの主な特性や機能を説明するために使用します。
このテキストは、アプリストアでアプリを表示した際に、ユーザーがアプリの目的を理解する手助けとなります。

`description` メンバーは、何をするアプリケーションなのかを開発者が説明することができる文字列です。 `description` には書字方向を設定することができ、マニフェストメンバーの [`dir`](/ja/docs/Web/Manifest) と [`lang`](/ja/docs/Web/Manifest) の値に基づいて左書きまたは右書きで表示することができます。
> [!NOTE]
> `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 週間の献立を計画し、買い物リストを自動的に作成します。栄養を管理し、レシピを見つけます。"
}
```

## 仕様書
Expand Down
Loading

0 comments on commit b586599

Please sign in to comment.