Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Web/Progressive_web_apps/Manifest/Reference 以下の残りの部分を英語版に同期 #26182

Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
---
title: scope
slug: Web/Progressive_web_apps/Manifest/Reference/scope
original_slug: Web/Manifest/Reference/scope
l10n:
sourceCommit: 1e660f71a4741c5fdf36bb7ac8dc7acfbc9cfb49
sourceCommit: 05187b0fecf39b9176d4a101623589309cf44dd0
---

{{QuickLinksWithSubpages("/ja/docs/Web/Manifest")}}
{{QuickLinksWithSubpages("/en-US/docs/Web/Progressive_web_apps/Manifest/Reference")}}

`scope` はマニフェストメンバーで、ウェブアプリケーションのページとサブディレクトリーを格納する最上位の URL パスを指定するために使用します。
ユーザーがウェブアプリをインストールして使用すると、スコープ内のページがアプリのようなインターフェイスを提供します。
Expand Down Expand Up @@ -162,5 +161,5 @@ web-app/

## 関連情報

- [`start_url`](/ja/docs/Web/Manifest/start_url) マニフェストメンバー
- [`start_url`](/ja/docs/Web/Progressive_web_apps/Manifest/Reference/start_url) マニフェストメンバー
- {{Glossary("Application_context", "アプリケーションコンテキスト")}}
Original file line number Diff line number Diff line change
@@ -1,62 +1,169 @@
---
title: screenshots
slug: Web/Progressive_web_apps/Manifest/Reference/screenshots
original_slug: Web/Manifest/Reference/screenshots
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>Object</code></td>
</tr>
<tr>
<th scope="row">必須</th>
<td>いいえ</td>
</tr>
</tbody>
</table>
`screenshots` はマニフェストメンバーで、ウェブアプリケーションのショーケースとなる 1 枚以上の画像を指定することができます。
これらの画像は、ユーザーがアプリストアでウェブアプリのインターフェイスや機能をプレビューするのに役立ちます。

`screenshots` メンバーはアプリケーションのショーケースに向けたスクリーンショットの配列を定義します。これらの画像はプログレッシブウェブアプリストアで使用することを意図しています。
> [!NOTE]
> `screenshots` メンバーは任意であり、アプリストアはアプリを紹介する際にこれらの画像を表示しない場合があります。

##
## 構文

```json
"screenshots" : [
```json-nolint
/* 単一のスクリーンショット */
"screenshots": [
{
"src": "screenshot1.webp",
"src": "desktop.webp",
"sizes": "1280x720",
"type": "image/webp"
}
]

/* 2 枚のスクリーンショット */
"screenshots": [
{
"src": "screenshots/home.webp",
"sizes": "1280x720",
"type": "image/webp",
"platform": "wide",
"label": "Homescreen of Awesome App"
"form_factor": "wide",
"label": "メインナビゲーションと注目のコンテンツを表示するホーム画面"
},
{
"src": "screenshot2.webp",
"src": "screenshots/dashboard.webp",
"sizes": "1280x720",
"type": "image/webp",
"platform": "wide",
"label": "List of Awesome Resources available in Awesome App"
"platform": "ios",
"label": "キーメトリクスを表示するダッシュボードビュー"
}
]
```

`label` メンバーは、スクリーンショットのアクセス可能な名前として機能する文字列です。また、スクリーンショットの代替テキストとして使用することもできます。
### 値

- `screenshots`

- : オブジェクトの配列です。
各オブジェクトは、一般的な使用シナリオにおけるウェブアプリのスクリーンショットを表します。

各スクリーンショットオブジェクトには、 1 つ以上のプロパティが設定できます。このうち、 `src` のみが必須です。設定可能なプロパティは以下の通りです。

- `src`

- : 画像ファイルへのパスを指定する文字列。
これは `icons` メンバーの [`src`](/ja/docs/Web/Progressive_web_apps/Manifest/Reference/icons#src) プロパティと同じ形式です。

- `sizes` {{Optional_Inline}}

- : 1 つ以上の画像のサイズを指定する文字列。
これは `icons` メンバーの [`sizes`](/ja/docs/Web/Progressive_web_apps/Manifest/Reference/icons#sizes) プロパティと同じ形式です。

- `type` {{Optional_Inline}}

- : 画像の {{glossary("MIME_type", "MIME タイプ")}}を指定する文字列。
これは `icons` メンバーの [`type`](/ja/docs/Web/Progressive_web_apps/Manifest/Reference/icons#type) プロパティと同じ形式です。

- `label` {{Optional_Inline}}

- : スクリーンショットオブジェクトのアクセシブル名を表す文字列。
レンダリングされたスクリーンショットの代替テキストとして使用される可能性があるため、わかりやすい名前を付けてください。
アクセシビリティの観点から、すべてのスクリーンショットにこのプロパティを指定することをお勧めします。

また、 `platform` メンバーは文字列で、特定のスクリーンショットを適用する配信プラットフォームを定義することができます。定義されていない場合、ユーザーエージェントはスクリーンショットのアスペクト比を使用して表示することができます。
- `form_factor` {{Optional_Inline}}

`platform` メンバーには、以下の汎用的な値のいずれかを設定することができます。
- : スクリーンショットが適用される幅広い種類の端末の画面形状を表す文字列。
スクリーンショットが特定の画面レイアウトに適用される場合にのみ、このプロパティを指定してください。
`form_factor` が指定されていない場合、そのスクリーンショットはすべての種類の画面に適しているとみなされます。

- `wide` : ワイドスクリーンにのみ適用されるスクリーンショット用 (例: ステータスボード)。
- `narrow` : 狭いスクリーンショット用 (例: モバイル端末、ウェアラブル)。
有効な値は次のようなものです。

また、特定の OS で表示するスクリーンショットには `android`、`chromeos`、`ios`、`kaios`、`macos`、`windows`、`xbox` を、特定のアプリケーション配信プラットフォームで表示するスクリーンショットには `chrome_web_store`、`play`、`iTunes`、`microsoft-inbox`、`microsoft-store` を設定することができます。
- `narrow`
- : モバイル端末などの狭い画面にのみ適用できるスクリーンショットであることを示します。
- `wide`
- : デスクトップパソコンなどの広い画面のみに適用されるスクリーンショットであることを示します。

- `platform`

- : スクリーンショットが適用されるプラットフォームを表す文字列。
スクリーンショットが特定の端末や配信プラットフォームにのみ適用される場合にのみ、このプロパティを指定してください。
`platform` が指定されていない場合、スクリーンショットはすべてのプラットフォームに適していると見なされます。

有効な値は次のようなものです。

| 種類 | 値 | 説明 |
| ------------------------ | ------------------ | ------------------------------------ |
| オペレーティングシステム | `android` | Google Android |
| | `chromeos` | Google ChromeOS |
| | `ios` | Apple iOS |
| | `ipados` | Apple iPadOS |
| | `kaios` | KaiOS |
| | `macos` | Apple macOS |
| | `windows` | Microsoft Windows |
| | `xbox` | Microsoft Xbox |
| 配信プラットフォーム | `chrome_web_store` | Google Chrome Web Store |
| | `itunes` | iTunes App Store |
| | `microsoft-inbox` | Microsoft Windows にプリインストール |
| | `microsoft-store` | Microsoft Store |
| | `play` | Google Play Store |

## 解説

`screenshots` メンバーは、アプリの実行時の動作やブラウザーによるアプリの表示方法には影響しない補助的なメタデータです。
スクリーンショットは、アプリストアやその他の配信プラットフォームで、潜在的なユーザーに対してアプリの機能を紹介するために使用されます。

配信プラットフォームは、表示するスクリーンショットの数を指定することがあります。

以下の画像は Apple App Store のもので、 iPhone アプリのリストにスクリーンショットがどのように表示されるかを示しています。
ギャラリー表示(左の画像)では、ユーザーは複数の画像を横方向にスクロールして閲覧できます。
任意の画像をタップすると、全画面表示(右の画像)で閲覧できます。

<div style="display: flex; justify-content: center; flex-wrap: wrap;">
<img src="todoist-iphone-gallery.png" alt="Apple App Store の Todoist アプリでは、ユーザーがスクロールできるアプリ画像の横長ギャラリーが表示されている。" width="350">
<img src="todoist-iphone-fullscreen.png" alt="Todoist アプリの横長ギャラリーの画像を全画面表示" width="350">
</div>

iPad で同じ全画面画像を見ると、狭い端末 (iPhone) と広い端末 (iPad) のフォームファクターに異なるスクリーンショットが必要な理由がわかります。

<div style="display: flex; justify-content: center;">
<img src="todoist-ipad-fullscreen.png" alt="複数のスクリーンショットを広いギャラリービューで表示する iPad 上の Todoist アプリのリスト">
</div>

## 例

### 献立計画ウェブアプリのプレビューを追加

この例では、異なる端末向けの献立計画アプリのスクリーンショットを追加する方法を示しています。スクリーンショットは、デスクトップとモバイルの両方のビューで、アプリの同じ機能を表示しています。

```json
{
"name": "Meal Planner",
"screenshots": [
{
"src": "screenshots/desktop-home.webp",
"sizes": "1920x1080",
"form_factor": "wide",
"label": "Desktop view showing weekly meal calendar"
},
{
"src": "screenshots/mobile-home.webp",
"sizes": "750x1334",
"form_factor": "narrow",
"label": "Mobile view showing weekly meal calendar"
}
]
}
```

## 仕様書

{{Specifications}}

## ブラウザーの互換性

{{Compat}}
`screenshots` マニフェストメンバーは、ウェブアプリの公開やリスト化を行う際にアプリストアによって使用されるため、ブラウザーの互換性は適用されません。
ブラウザはこのメンバーを解析することがありますが、これは任意であり、アプリの機能や表示には影響しません。
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
---
title: serviceworker
slug: Web/Progressive_web_apps/Manifest/Reference/serviceworker
l10n:
sourceCommit: 05187b0fecf39b9176d4a101623589309cf44dd0
---

{{QuickLinksWithSubpages("/ja/docs/Web/Progressive_web_apps/Manifest/Reference")}}{{SeeCompatTable}}{{Non-standard_header}}

`serviceworker` メンバーは、商業ウェブサイトで指定された決済方法の決済メカニズムを提供するウェブベースの決済アプリケーションを実行するために、ジャストインタイム (JIT) でインストールされ、登録されたサービスワーカーを指定します。詳細は、{{domxref("Payment Handler API", "決済ハンドラー API", "", "nocode")}} を参照してください。

### 値

`serviceworker` オブジェクトは以下の値を持つことができます。

- `scope` {{experimental_inline}} {{non-standard_inline}}

- : サービスワーカーの登録スコープを表す文字列です。

- `src` {{experimental_inline}} {{non-standard_inline}}

- : サービスワーカーのスクリプトをダウンロードするための URL を表す文字列です。

- `use_cache` {{experimental_inline}} {{non-standard_inline}}

- : 論理値で、 HTTP キャッシュが更新中のサービスワーカーのスクリプトリソースにどのように使用されるかを設定します。
これは、 {{domxref("ServiceWorkerContainer.register()")}} を使用して JavaScript 経由でサービスワーカーを登録する際に指定する `updateViaCache` オプションの特定の値と同等な機能を提供します。

- `true`: HTTP キャッシュはインポートのために照会されますが、メインスクリプトは常にネットワークから更新されます。 HTTP キャッシュにインポート用の新しい項目が見つからない場合は、ネットワークから取得されます。 `updateViaCache: "imports"` と同等です。
- `false`: メインスクリプトやそのインポートには HTTP キャッシュは使用されません。すべてのサービスワーカーのスクリプトリソースはネットワークから更新されます。 `updateViaCache: "none"` と同等です。

## 例

[決済ハンドラー API > 概念と使用方法](/ja/docs/Web/API/Payment_Handler_API#concepts_and_usage)を確認してください。

## 仕様書

{{Specifications}}

## ブラウザーの互換性

{{Compat}}

## 関連情報

- {{domxref("Service Worker API", "サービスワーカー API", "", "nocode")}}
- {{domxref("Payment Handler API", "決済ハンドラー API", "", "nocode")}}
- [Web-based payment apps overview](https://web.dev/articles/web-based-payment-apps-overview)
- [Setting up a payment method](https://web.dev/articles/setting-up-a-payment-method)
- [Life of a payment transaction](https://web.dev/articles/life-of-a-payment-transaction)
- [決済ハンドラー API の使用](/ja/docs/Web/API/Payment_Request_API/Using_the_Payment_Request_API)
- [決済処理の概要](/ja/docs/Web/API/Payment_Request_API/Concepts)
Loading
Loading