recursal/MDN huggingface dataset:
StorageEvent: initStorageEvent() メソッド
=====================================

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**`StorageEvent.initStorageEvent()`** メソッドは `StorageEvent` の値を初期化するために使用します。

構文
--


```js
initStorageEvent(type)
initStorageEvent(type, canBubble)
initStorageEvent(type, canBubble, cancelable)
initStorageEvent(type, canBubble, cancelable, key)
initStorageEvent(type, canBubble, cancelable, key, oldValue)
initStorageEvent(type, canBubble, cancelable, key, oldValue, newValue)
initStorageEvent(type, canBubble, cancelable, key, oldValue, newValue, url)
initStorageEvent(type, canBubble, cancelable, key, oldValue, newValue, url, storageArea)
```

### 引数

`typeArg`

イベントの名前です。

`canBubble` 省略可

論理値で、イベントが DOM を介してバブリングするかどうかを示します。

`cancelable` 省略可

論理値で、イベントがキャンセル可能であるかどうかを示します。

`key` 省略可

このイベントの結果として値を変更しようとしているキーです。

`oldValue` 省略可

キーの古い値です。

`newValue` 省略可

キーの新しい値です。

`url` 省略可

変更を行おうとしている文書の URL です。

`storageArea` 省略可

このイベントが発生したストレージ領域を表す `Storage` オブジェクトです。

### 返値

なし (`undefined`)。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-storageevent-initstorageevent |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* この非推奨のメソッドの代わりに使用するコンストラクター: `StorageEvent()` (en-US)
scope
=====

|  |  |
| --- | --- |
| 型 | `String` |
| 必須 | いいえ |

`scope` メンバーは文字列型で、このウェブアプリケーションのアプリケーションコンテキストのナビゲーションスコープを定義します。これは、マニフェストが適用されている時に見ることができるウェブページを制限するものです。ユーザーがスコープ外へ移動した場合は、ブラウザータブやウィンドウの中の通常のウェブページに戻ります。

`scope` が相対 URL である場合、ベース URL はマニフェストの URL になります。

例
-

スコープが相対 URL の場合は、マニフェストの URL がベース URL として使用されます。


```json
"scope": "/app/"
```


以下のスコープは、ナビゲーションを現在のサイトに制限します。


```json
"scope": "https://example.com/"
```


最後に、以下の例はナビゲーションを現在のサイトのサブディレクトリーに制限します。


```json
"scope": "https://example.com/subdirectory/"
```

仕様書
---

| Specification |
| --- |
| Web Application Manifest # scope-member |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
name
====

|  |  |
| --- | --- |
| 型 | `String` |
| 必須 | はい |

`name` メンバーは文字列で、ウェブアプリケーションの名前を通常ユーザーに表示される形 (例えば、他のアプリケーションとのリストの中や、アイコンのラベルなど) で表します。 `name` は書字方向に対応しており、 `dir` および `lang` の各マニフェストメンバーの値に基づいて左書きで表示されたり右書きで表示されたりします。

例
-

単純な `name` を左書き言語で:


```json
"name": "Awesome application"
```


アラビア語で右書きの `name`:


```json
"dir": "rtl",
"lang": "ar",
"name": "!أنا من التطبيق"
```

仕様書
---

| Specification |
| --- |
| Web Application Manifest # name-member |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
display
=======

|  |  |
| --- | --- |
| 型 | `String` |
| 必須 | いいえ |

`display` メンバーは、開発者が推奨するウェブサイトの表示モードを判別する文字列です。この表示モードは、ブラウザーの UI をどれだけユーザーに見せるかを変更するものであり、 `browser` (ブラウザーのウィンドウが完全に見える) から `fullscreen` (アプリが全画面になる) までの範囲を取ります。

**メモ:** ブラウザーは指定されたモードに対応していなかった場合は、定義済みの代替チェーンに従います。これは `fullscreen` → `standalone` → `minimal-ui` → `browser` であり、 `browser` が `display` メンバーが指定されていなかった場合の既定値です。

**メモ:** 表示モードに応じて選択的に CSS を提供するには、 `display-mode` メディア特性を使用することができます。これにより、サイトを URL から起動した場合とデスクトップアイコンから起動した場合とでユーザーの操作に一貫性を持たせることができます。

値
-

以下の値を利用することができます。

| 表示モード | 説明 | 代替表示モード |
| --- | --- | --- |
| `fullscreen` | 利用可能な画面の領域をすべて使用し、ユーザーエージェントのクロームは表示されなくなります。 | `standalone` |
| `standalone` | アプリケーションの外見は、単独のアプリケーションのようになります。これは、アプリケーションに別のウィンドウを持たせたり、アプリケーションランチャーに独自のアイコンを追加したりすることができるようになります。このモードでは、ユーザーエージェントはナビゲーションを制御するための UI 要素を除外しますが、ステータスバーなどの他の UI 要素を含めることはできます。 | `minimal-ui` |
| `minimal-ui` | アプリケーションの外見は、単独のアプリケーションのようになりますが、ナビゲーションを制御するために最小限の UI 要素が表示されます。要素はブラウザーによって異なります。 | `browser` |
| `browser` | アプリケーションはブラウザーやプラットフォームに応じた一般的なブラウザータブや新しいウインドウで表示されます。これが既定値です。 | (なし) |

例
-


```json
"display": "standalone"
```

仕様書
---

| Specification |
| --- |
| Web Application Manifest # display-member |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
start\_url
==========

|  |  |
| --- | --- |
| 型 | `String` |
| 必須 | いいえ |

`start_url` メンバーは文字列で、*ウェブアプリケーションの開始 URL* を表します。 — ユーザーがウェブアプリケーションを起動したとき (例えば、ユーザーが端末のアプリケーションメニューやホーム画面でウェブアプリケーションのアイコンをタップしたときなど) に読み込まれるべき推奨 URL です。

**メモ:** `start_url` メンバーは純粋に参考であり、ユーザーエージェントがこれを無視したり、インストール時やその後でユーザーに変更を許したりすることがあります。

例
-

### 絶対 URL


```json
"start\_url": "https://example.com"
```

### 相対 URL

相対 URL の場合、解決のためのベース URL にはマニフェストの URL が使われます。


```json
"start\_url": "../startpoint.html"
```

仕様書
---

| Specification |
| --- |
| Web Application Manifest # start\_url-member |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
id
==

|  |  |
| --- | --- |
| 型 | `String` |
| 必須 | いいえ |

`id` メンバーは、*ウェブアプリケーションのアイデンティティ* すなわち、ウェブアプリケーションの一意な識別子です。ウェブアプリケーション ID が既存の ID と一致しない場合、URL が同じであっても一意なアイデンティティとして扱われます。

**メモ:** `id` メンバーはアプリケーションを一意に識別するために使用可能です。`id` メンバーは `start_url` と同様に処理されますが、ナビゲーション対象のリソースを指すわけではないので、スコープの範囲外でも大丈夫です。

例
-


```json
"id": "?homescreen=1"
```

仕様書
---

| Specification |
| --- |
| Web Application Manifest # id-member |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
display\_override
=================

|  |  |
| --- | --- |
| 型 | `Array` |
| 必須 | いいえ |

`display` メンバーは、開発者が推奨するウェブサイトの表示モードを決定するために使用されます。これは、要求された表示モードに対応していない場合に、ブラウザーが事次善の表示モードに代替するプロセスに従います。高度な用途では、この代替プロセスでは十分でない場合があります。

`display_override` メンバーは、 `display` メンバーを使用する前にブラウザーが考慮する一連の表示モードを開発者に提供することで、これを解決しています。この値は表示モードの配列であり、順番に考慮され、最初にサポートされた表示モードが適用されます。

値
-

表示上書きオブジェクトは表示モード文字列の集合で、利用可能な値は以下の通りです。

| 表示モード | 説明 |
| --- | --- |
| `fullscreen` | 利用可能な画面の領域をすべて使用し、ユーザーエージェントのクロームは表示されなくなります。 |
| `standalone` | アプリケーションの外見は、単独のアプリケーションのようになります。これは、アプリケーションに別のウィンドウを持たせたり、アプリケーションランチャーに独自のアイコンを追加したりすることができるようになります。このモードでは、ユーザーエージェントはナビゲーションを制御するための UI 要素を除外しますが、ステータスバーなどの他の UI 要素を含めることはできます。 |
| `minimal-ui` | アプリケーションの外見は、単独のアプリケーションのようになりますが、ナビゲーションを制御するために最小限の UI 要素が表示されます。要素はブラウザーによって異なります。 |
| `browser` | アプリケーションはブラウザーやプラットフォームに応じた一般的なブラウザータブや新しいウインドウで表示されます。これが既定値です。 |
| `window-controls-overlay` | この表示モードは、アプリケーションが別の PWA ウィンドウにあり、デスクトップ OS 上にある場合にのみ適用されます。この場合、ウィンドウ制御のオーバーレイ機能が利用できるようにします。これは、ウィンドウの全領域がアプリのウェブコンテンツに使用され、ウィンドウの制御ボタン（最大化、最小化、閉じる、およびその他の PWA 固有のボタン）がウェブコンテンツの上にオーバーレイとして表示されるものです。 |

例
-

以下の例では、ブラウザーは以下の表示モード代替チェーンを `fullscreen` → `minimal-ui` → `standalone` の順番で考慮します。


```json
{
  "display\_override": ["fullscreen", "minimal-ui"],
  "display": "standalone"
}
```

仕様書
---

| Specification |
| --- |
| Manifest Incubations # display\_override-member |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* Preparing for the display modes of tomorrow
* Customize the window controls overlay of your PWA's title bar
prefer\_related\_applications
=============================

|  |  |
| --- | --- |
| 型 | `Boolean` |
| 必須 | いいえ |

`prefer_related_applications` メンバーは論理値で、 `related_applications` で挙がっているアプリケーションがこのウェブアプリケーションよりも推奨されることを示します。 `prefer_related_applications` メンバーが `true` に設定されていた場合、ユーザーエージェントはこのウェブアプリの代わりに関連アプリケーションのうちの一つをインストールするよう勧めるかもしれません。

省略された場合は、 `prefer_related_applications` の既定値は `false` になります。

例
-


```json
"prefer\_related\_applications": true
```

仕様書
---

| Specification |
| --- |
| Web Application Manifest # prefer\_related\_applications-member |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
shortcuts
=========

|  |  |
| --- | --- |
| 型 | `Object` |
| 必須 | いいえ |

`shortcuts` メンバーは、ウェブアプリ内の主要なタスクやページへのショートカットやリンクの配列を定義します。ユーザーエージェントはこれらの値を用いて、ユーザーがウェブアプリのアイコンを操作したときにオペレーティングシステムが表示するコンテキストメニューを作成することができます。ユーザーがショートカットを呼び出すと、ユーザーエージェントはショートカットの `url` メンバーで指定されたアドレスに誘導します。

ショートカット項目の値
-----------

ショートカットオブジェクトには、以下の値を指定することができます（`name` と `url` のみ必須）。

| メンバー | 説明 |
| --- | --- |
| `name` | コンテキストメニューでユーザーに表示することができる文字列です。 |
| `short_name` | ショートカットのフルネームを表示するのに十分なスペースがない場合に表示することができる文字列です。 |
| `description` | ショートカットの目的を記述した文字列です。支援技術に公開される可能性があります。 |
| `url` | ショートカットを有効にしたときに開く、アプリケーション内の URL です。 |
| `icons` | ショートカットを表すアイコンのセットです。コンテキストメニューなどで使用することができます。この値を指定する場合、アイコンのセットには 96x96 ピクセルのアイコンを含める必要があります。 |

例
-

カレンダーアプリが持つ可能性があるショートカットのリストです。


```json
"shortcuts" : [
  {
    "name": "Today's agenda",
    "url": "/today",
    "description": "List of events planned for today"
  },
  {
    "name": "New event",
    "url": "/create/event"
  },
  {
    "name": "New reminder",
    "url": "/create/reminder"
  }
]
```

仕様書
---

| Specification |
| --- |
| Web Application Manifest # shortcuts-member |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
related\_applications
=====================

|  |  |
| --- | --- |
| 型 | 配列 (`Array`) |
| 必須 | はい |

`related_applications` フィールドはオブジェクトの配列で、基礎となるプラットフォームにインストール可能、またはアクセス可能なネイティブアプリケーション — たとえば、 Google Play ストアで入手可能なネイティブの Android アプリケーションなどを指定します。このようなアプリケーションは、ネイティブアプリの同等品のように、同様または同等の機能を提供するマニフェストのウェブサイトの代替品となることを意図しています。

**メモ:** 開発者は `prefer_related_applications` に `true` を設定することで、ネイティブアプリケーションがウェブアプリケーションよりも推奨されることを示すことができます。

例
-


```json
"related\_applications": [
  {
    "platform": "play",
    "url": "https://play.google.com/store/apps/details?id=com.example.app1",
    "id": "com.example.app1"
  }, {
    "platform": "itunes",
    "url": "https://itunes.apple.com/app/example-app1/id123456789"
  }
]
```

関連アプリケーションの値
------------

アプリケーションオブジェクトには、次の値を入れることができます。

| メンバー | 説明 |
| --- | --- |
| `platform` | アプリケーションを見つけることができるプラットフォームです。利用できる値の一覧 |
| `url` | アプリケーションを見つけることができる URL です。 |
| `id` | 指定されたプラットフォームでアプリケーションを表す ID です。 |

仕様書
---

| Specification |
| --- |
| Web Application Manifest # related\_applications-member |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
screenshots
===========

|  |  |
| --- | --- |
| 型 | `Object` |
| 必須 | いいえ |

`screenshots` メンバーはアプリケーションのショーケースに向けたスクリーンショットの配列を定義します。これらの画像はプログレッシブウェブアプリストアで使用することを意図しています。

例
-


```json
"screenshots" : [
  {
    "src": "screenshot1.webp",
    "sizes": "1280x720",
    "type": "image/webp",
    "platform": "wide",
    "label": "Homescreen of Awesome App"
  },
  {
    "src": "screenshot2.webp",
    "sizes": "1280x720",
    "type": "image/webp",
    "platform": "wide",
    "label": "List of Awesome Resources available in Awesome App"
  }
]
```


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

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

`platform` メンバーには、以下の汎用的な値のいずれかを設定することができます。

* `wide` : ワイドスクリーンにのみ適用されるスクリーンショット用 (例: ステータスボード)。
* `narrow` : 狭いスクリーンショット用 (例: モバイル端末、ウェアラブル)。

また、特定の OS で表示するスクリーンショットには `android`、`chromeos`、`ios`、`kaios`、`macos`、`windows`、`xbox` を、特定のアプリケーション配信プラットフォームで表示するスクリーンショットには `chrome_web_store`、`play`、`iTunes`、`microsoft-inbox`、`microsoft-store` を設定することができます。

仕様書
---

| Specification |
| --- |
| Web App Manifest - Application Information # screenshots-member |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
short\_name
===========

|  |  |
| --- | --- |
| 型 | `String` |
| 必須 | はい |

*`short_name`* メンバーは文字列で、 `name` を表示するのに十分なスペースがない場合 (例えば、携帯電話のホーム画面にあるアイコンのラベルなど) に、ユーザーに表示するウェブアプリケーションの名前を表します。 `short_name` は書字方向に対応しており、 `dir` および `lang` の各マニフェストメンバーの値に基づいて左書きで表示されたり右書きで表示されたりします。

例
-

単純な `short_name` を左書き言語で:


```json
"name": "Awesome application",
"short\_name": "Awesome app"
```


アラビア語で右書きの `short_name`:


```json
"dir": "rtl",
"lang": "ar",
"name": "تطبيق رائع",
"short\_name": "رائع"
```

仕様書
---

| Specification |
| --- |
| Web Application Manifest # short\_name-member |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
icons
=====

|  |  |
| --- | --- |
| 型 | 配列 (`Array`) |
| 必須 | はい |

`icons` メンバーは、様々なコンテキストでアプリケーションアイコンとして機能する画像ファイルを表すオブジェクトの配列を指定します。例えば、他のアプリケーションのリストの中でウェブアプリケーションを表現したり、ウェブアプリケーションを OS のタスクマネージャーやシステム環境設定と統合したりするために使用することができます。

例
-


```json
"icons": [
  {
    "src": "icon/lowres.webp",
    "sizes": "48x48",
    "type": "image/webp"
  },
  {
    "src": "icon/lowres",
    "sizes": "48x48"
  },
  {
    "src": "icon/hd\_hi.ico",
    "sizes": "72x72 96x96 128x128 256x256"
  },
  {
    "src": "icon/hd\_hi.svg",
    "sizes": "72x72"
  }
]
```

値
-

画像オブジェクトには、次の値を入れることができます。

| メンバー | 説明 |
| --- | --- |
| `sizes` | 画像の寸法を空白区切りで指定する文字列です。 |
| `src` | 画像ファイルへのパスです。 `src` が相対 URL である場合、基準 URL はマニフェストの URL です。 |
| `type` | 画像のメディア種別のヒントです。このメンバーは、ユーザーエージェントが対応していないメディア種別の画像を素早く無視することができるようにするためのものです。 |
| `purpose` | 画像の目的を定義します。例えば、画像がホスト OS の特定の場面で、特別な目的を果たすことを意図している場合などです (すなわち、よりよく統合するため)。
`purpose` は以下の値を 1 つ以上、空白で区切って指定することができます。* `monochrome`: ユーザーエージェントは、このアイコンを、 塗りつぶしのあるモノクロのアイコンが必要なときに表示することができます。アイコンの色情報は破棄され、アルファデータのみが使用されます。アルファデータのみが使用されます。このアイコンは、ユーザーエージェントが塗りつぶしのマスクのように使うことができます。
* `maskable`: 画像がアイコンのマスクと安全領域に配慮して設計されており、画像の安全領域外の部分をユーザーエージェントが無視したりマスクしたりしても安全になるようになっています。
* `any`: ユーザーエージェントはどのような場合でも、自由にこのアイコンを表示することができます (これが既定値です)。
 |

仕様書
---

| Specification |
| --- |
| Web Application Manifest # icons-member |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
protocol\_handlers
==================

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

|  |  |
| --- | --- |
| 型 | `Array` |
| 必須 | いいえ |

`protocol_handlers` メンバーは、このウェブアプリが登録・処理することができるプロトコルを表すオブジェクトの配列を指定します。プロトコルハンドラーは、 OS のアプリケーション設定にアプリケーションを登録します。登録は、特定のアプリケーションと与えられたプロトコルスキームを関連付けます。例えば、ウェブページで `mailto://` というプロトコルハンドラーを使用すると、登録されたメールアプリケーションが開きます。

プロトコルハンドラーとしてウェブアプリを登録すると、ユーザーがブラウザーやネイティブアプリから `mailto://` や `web+music://` などの特定のスキームを持つハイパーリンクをクリックすると、登録した PWA が開いてその URL を受信することができるようになります。

例
-

この例では、ウェブアプリのマニフェストで、プロトコルの `web+jngl` と `web+jnglstore` を処理するためにアプリを登録することを宣言しています。


```json
"protocol\_handlers": [
  {
    "protocol": "web+jngl",
    "url": "/lookup?type=%s"
  },
  {
    "protocol": "web+jnglstore",
    "url": "/shop?for=%s"
  }
]
```


開発者は manifest.json にフィールドを追加して、ウェブアプリがどのプロトコルを処理できるかを宣言することができます。上記の例で見られるように、キーは `protocol_handlers` という名前で、プロトコル ハンドラ宣言オブジェクトの配列が含まれています。

URL スキームを処理するためのアプリケーションの登録は、オペレーティングシステムに依存します。この関連付けは通常、アプリケーションのインストール時に行われますが、既にインストールされているアプリケーションから後で行われることもあります。

値
-

プロトコルハンドラーオブジェクトには、以下の値を指定することができます。

| メンバー | 説明 |
| --- | --- |
| `protocol` | 
 必須の文字列で、処理するプロトコルを指定します。 例:
 `mailto`, `ms-word`, `web+jngl`.
  |
| `url` | プロトコルを処理するアプリケーションのスコープ (scope) 内の必要な HTTPS URL。 `%s` トークンは、プロトコルハンドラーのスキームで始まる URL に置換されます。 `url` が相対 URL であった場合、ベース URL はマニフェストの URL になります。 |

仕様書
---

この機能はどの仕様書にも含まれていません。 Manifest 仕様書へ追加する提案が行われています。 [1] [2]

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
description
===========

|  |  |
| --- | --- |
| 型 | `String` |
| 必須 | いいえ |

`description` メンバーは、何をするアプリケーションなのかを開発者が説明することができる文字列です。 `description` には書字方向を設定することができ、マニフェストメンバーの `dir` と `lang` の値に基づいて左書きまたは右書きで表示することができます。

例
-

左書き言語用の単純な `description` です。


```json
"description": "Awesome application that will help you achieve your dreams."
```


アラビア語の `description` で、右書きで表示されます。


```json
"dir": "rtl",
"lang": "ar",
"description": ".تطبيق رائع سيساعدك على تحقيق أحلامك"
```

仕様書
---

| Specification |
| --- |
| Web App Manifest - Application Information # description-member |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
theme\_color
============

|  |  |
| --- | --- |
| 型 | `String` |
| 必須 | いいえ |

`theme_color` メンバーは文字列で、アプリケーションの既定のテーマカラーを定義します。これは OS がどのようにサイトを表示するかに影響することがあります (例えば、 Android のタスクスイッチャーでは、サイトの周りにテーマカラーが表示されます)。

例
-


```json
"theme\_color": "red"
```

仕様書
---

| Specification |
| --- |
| Web Application Manifest # theme\_color-member |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
background\_color
=================

|  |  |
| --- | --- |
| 型 | `String` |
| 必須 | いいえ |

`background_color` メンバーは、スタイルシートが読み込まれる前に表示するアプリケーションページの背景色を定義します。 この値は、スタイルシートが読み込まれる前にマニフェストが利用可能な場合、ショートカットの背景色を描画するために、ユーザーエージェントが使用します。

したがって、 `background_color` はウェブアプリケーションを起動してからサイトのコンテンツを読み込むまでの間にスムーズに遷移できるよう、 CSS の `background-color` と一致させるべきです。

**メモ:** `background_color` メンバーは、メインスタイルシートがネットワークまたはストレージメディアから読み込まれている間にだけ、ユーザーの操作感を向上させるためだけのものです。プログレッシブウェブアプリのスタイルシートが利用できるようになった後は、ユーザーエージェントが CSS の `background-color` プロパティとして使用されることはありません。

例
-


```json
"background\_color": "red"
```

仕様書
---

| Specification |
| --- |
| Web Application Manifest # background\_color-member |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
orientation
===========

|  |  |
| --- | --- |
| 型 | `String` |
| 必須 | いいえ |

`orientation` メンバーは、ウェブサイトの最上位の閲覧コンテキストすべてについて、既定の向きを定義します。

**メモ:** ユーザーエージェントの表示モードによっては、 `orientation` やその中の特定の値に対応していないことがあります。これらに対応することが、特定のコンテキストでは意味がないからです。

**メモ:** 実行時に画面の向きを変更するには、 Screen Orientation API を利用して実現することができます。

値
-

`orientation` は以下の値の内の一つを取ることができます。

* `any`
* `natural`
* `landscape`
* `landscape-primary`
* `landscape-secondary`
* `portrait`
* `portrait-primary`
* `portrait-secondary`
例
-


```json
"orientation": "portrait-primary"
```

仕様書
---

| Specification |
| --- |
| Web Application Manifest # orientation-member |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
categories
==========

|  |  |
| --- | --- |
| 型 | `String` の配列 (`Array`) |
| 必須 | いいえ |

`categories` メンバーは、アプリケーションが属すると思われるカテゴリーの名前を定義する文字列の配列です。標準化された値の一覧はありませんが、 W3C は既知のカテゴリーの一覧を保守しています。

**メモ:** `categories` は、ウェブアプリケーションの一覧を収集したり格納したりするヒントとしてのみ使用されます。検索エンジンやメタキーワードと同様に、カタログを無視して収集や格納を行うことができます。

**メモ:** `categories` の値は、格納したり収集したりする処理の前に小文字化されますので、 "News" と "news" は同じ値として扱われます。そもそも、開発者は小文字を使うことが推奨されています。

例
-


```json
"categories": ["books", "education", "medical"]
```

仕様書
---

| Specification |
| --- |
| Web App Manifest - Application Information # categories-member |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ウェブコンテンツ・アクセシビリティガイドラインを理解する
============================

この一連の記事では、W3C ウェブコンテンツ・アクセシビリティガイドライン 2.0 または 2.1（WCAG、Web Content Accessibility Guidelines）で概説されている推奨事項に準拠するために必要な手順を理解するのに役立つ簡単な説明を提供します。

WCAG 2.0 と 2.1 は、さまざまな障碍を持つ人々にとってウェブコンテンツをよりアクセスしやすくするための詳細なガイドラインを提供しています。 それは包括的ですが信じられないほど詳細であり、そして迅速な理解を得ることは非常に困難です。 このため、さまざまな推奨事項を満たすために必要な実際的な手順をまとめ、必要に応じて詳細へのリンクを追加しました。

4 つの原則
------

WCAG は大きく 4 つの原則に分割されます — ウェブコンテンツがアクセス可能であるように熟慮**しなければならない**主要な事柄（WCAG 定義のためのアクセシビリティの 4 つの原則の理解（英語）を参照してください）。

以下の各リンクはこれらの分野をさらに拡大するページにあなたを連れて行くでしょう。 それらは、WCAG 2.0 および 2.1 の各ガイドラインで概説されている達成基準に準拠するように、ウェブコンテンツの書き方について実際的なアドバイスを与え、各原則をさらに細分化します。

* 知覚可能: ユーザーは、1 つ以上の感覚を使って何らかの方法でそれを知覚できなければなりません。
* 操作可能: ユーザーは、UI 要素を制御できなければなりません（例えば、ボタンは、マウス、キーボード、音声コマンドなど、何らかの方法でクリック可能でなければならない）。
* 理解可能: コンテンツはそのユーザーにとって理解可能でなければなりません。
* 堅牢: コンテンツは、現在および将来にわたって、さまざまなブラウザで機能する、広く採用されているウェブ標準を使用して開発する必要があります。
WCAG 2.0 と 2.1 のどちらを使うべきか？
--------------------------

WCAG 2.1 は最新かつ関連性のあるアクセシビリティ標準です。 WCAG 2.1 を使用して、より多くの障碍者を支援し、ウェブサイト所有者に対する将来の法的リスクを軽減します。 リソースを割り当てるときは、最初に WCAG 2.0 を目標にしてください。 それから WCAG 2.1 にステップアップしてください。

### WCAG 2.1 とは何か？

WCAG 2.1 は、2018 年 6 月 5 日に公式勧告として発行されました。 欧州連合（EU）は、2018 年 9 月にデジタルアクセシビリティ標準として WCAG 2.1 を採用しました。 W3C は、プレスリリース ヨーロッパにおける WCAG 2.1 の採用（英語）を発表しました。

WCAG 2.1 には以下が含まれます。

* WCAG 2.0 の全て（逐語的、一字一句違わないで）
* A / AA / AAA レベルの 17 の新しい達成基準は、主に次の分野におけるユーザーのニーズに対応しています。
    + モバイルアクセシビリティ
    + ロービジョン
    + 認知
* WCAG 2.1 についてもっと読む
    + Deque: WCAG 2.1: アクセシビリティガイドラインの次のステップ（英語）
    + TPG: ウェブコンテンツ・アクセシビリティガイドライン（WCAG）2.1（英語）
法的地位
----

このガイドは、より良く、よりアクセスしやすいウェブサイトを構築するのに役立つ実用的な情報を提供することを目的としています。 しかし、私たちは弁護士ではありません、そしてこれのどれも法的助言を構成しません。 ウェブのアクセシビリティが法的にどのような意味を持つのかを心配している場合は、あなたの国や地域のウェブや公共のリソースに対するアクセシビリティを規定する特定の法律を調べ、有資格の弁護士に相談することをお勧めします。

アクセシビリティとは？と、その中のアクセシビリティのガイドラインと法律のセクションには、より関連性の高い情報が記載されています。
モバイルアクセシビリティのチェックリスト
====================

このドキュメントは、モバイルアプリ開発者向けのアクセシビリティ要件の簡潔なチェックリストを提供します。 それはより多くのパターンが生じるにつれて絶えず進化することを意図しています。

色
-

* カラーコントラストは、WCAG 2.0（英語）の AA レベルの要件に準拠**しなければならない**。
    + 通常のテキストでは、4.5:1 のコントラスト比（18 ポイント未満または 14 ポイント未満の太字）。
    + 大きなテキストでは、3:1 のコントラスト比（少なくとも 18 ポイントまたは 14 ポイントの太字）。
* 色で伝えられる情報は、他の方法でも利用可能**でなければならない**（リンクのための下線付きテキストなど）。
可視性
---

* `opacity` がゼロ、`z-index` 順、画面外配置のようなコンテンツ非表示テクニックは、可視性を扱うためだけに使用**してはいけない**。
* 現在の表示画面以外のものは、本当に見えないもの**でなければならない**（特に複数のカードを含む単一ページのアプリに関連します）。
    + `hidden` 属性、`visibility` スタイルプロパティ、または `display` スタイルプロパティを**使用します**。
    + 絶対に避けられない場合を除いて、`aria-hidden` 属性は使用**するべきではない**（SHOULD NOT）。
フォーカス
-----

* 全てのアクティブ化可能要素はフォーカス可能**でなければならない**。
    + リンク、ボタン、フォームフィールドのような標準コントロールは、デフォルトでフォーカス可能です。
    + 非標準コントロールには、`button`、`link`、`checkbox` のような適切な ARIA のロール（英語）が割り当てられて**いなければならない**。
* フォーカスは、論理的な順序と一貫した方法で扱われるべきです。
同等のテキスト
-------

* アプリ内の全ての非厳密で提示的な非テキスト要素には、同等のテキストを提供**しなければならない**。
    + 必要に応じて `alt` と `title` を使用してください（良いガイドについては、HTML の title 属性の使用（英語）に関する Steve Faulkner の投稿を参照してください）。
    + 上記の属性が適用できない場合は、`aria-label`、`aria-labelledby`、`aria-describedby` のような適切な ARIA のプロパティ（英語）を使用してください。
* テキストの画像は避け**なければならない**。
* スクリーンリーダーを使用するユーザーのために、全てのフォームコントロールにラベル（`<label>` 要素）を持た**なければならない**。
ステートの取り扱い
---------

* ラジオボタンやチェックボックスのような標準コントロールは、オペレーティングシステムによって処理されます。 ただし、他のカスタムコントロールでは、`aria-checked`、`aria-disabled`、`aria-selected`、`aria-extended`、および `aria-press` のような ARIA のステート（英語）を介してステートの変更を提供する必要があります。
一般的なガイドライン
----------

* アプリのタイトルを提供**しなければならない**。
* 見出しは階層構造を壊**してはならない**。

```html
<h1>最上位の見出し</h1>
<h2>副見出し</h2>
<h2>別の副見出し</h2>
<h3>下位の見出し</h3>
```

* `banner`、`complementary`、`contentinfo`、`main`、`navigation`、`search` のような ARIA のランドマークロール（英語）は、アプリやドキュメントの構造を説明するために使用**するべきです**（SHOULD）。
* タッチイベントハンドラは、`touchend` イベントでのみトリガ**されなければならない**。
* タッチターゲットは、ユーザーが対話するのに十分な大きさ**でなければならない**（有用なタッチターゲットサイズのガイドラインについては、BBC モバイルアクセシビリティ・ガイドライン（英語）を参照してください）。

**メモ:** この文書のオリジナル版（英語）は、Yura Zenevich によって書かれました。
堅牢
==

この記事では、ウェブコンテンツ・アクセシビリティガイドライン（WCAG）2.0 および 2.1 の**堅牢**原則に概説されている達成基準に準拠するようにウェブコンテンツを作成する方法についての実用的なアドバイスを提供します。 堅牢とは、支援技術を含む多種多様なユーザーエージェントによって確実に解釈されることができるほど十分に堅牢でなければならないと述べています。 これは通常、ウェブ標準に準拠し、厳密にテストすることによって実現できます。

**メモ:** W3C の堅牢の定義とそのガイドラインおよび達成基準を読むには、原則 4: 堅牢 — コンテンツは、支援技術を含むさまざまなユーザーエージェントによって確実に解釈されるよう十分に堅牢である必要があります（英語）を参照してください。

ガイドライン 4.1 — 互換性: 支援技術を含む現在および将来のユーザーエージェントとの互換性を最大化する
------------------------------------------------------

このガイドラインは、現在のユーザーエージェント（例えば、ブラウザ）だけでなく将来のものともコンテンツをできる限り互換性を持たせることに焦点を当てています。

| 達成基準 | 基準への準拠方法 | 実用的なリソース |
| --- | --- | --- |
| 4.1.1 解析 (A) | コンテンツは、ブラウザやスクリーンリーダーのような他のユーザーエージェントによって正常に解析されるように、整形式（well-formed）にするべきです。この基準に合格するには、HTML ができるだけ妥当（valid）であることを確認してください。 マークアップを検証するために W3C の検証ツール（英語）を使用してください。 | 実用的なガイドについては、HTML のデバッグを参照してください。 |
| 4.1.2 名前、役割、値 (A) | ユーザインターフェース・コンポーネント（例えば、フォーム入力、ボタン、リンクなど）の名前と役割（role、ロール）はプログラム的に決定可能であるべきです。意図された目的のために意味論の要素を正しく使用するとき、この基準に自動的に合格するはずです。 カスタムコンポーネントをスクリプト化するときは、例えば、晴眼でマウスのユーザーだけでなく、スクリーンリーダーのユーザー、キーボードのみのユーザーなども、コントロールが解釈されて意図したとおりに使用できるようにするために、WAI-ARIA のロールおよびその他の機能を使用する必要があります。 | HTML: アクセシビリティの基礎と WAI-ARIA の基本を参照してください。 |
| 4.1.3 ステータスメッセージ (AA) 2.1 で追加（英語） | 支援技術のユーザーは、ページに追加された新しいステータスメッセージを認識します。 | ステータスメッセージを理解する（英語） |

**メモ:** ガイドライン 4.1: 互換性: 支援技術を含む現在および将来のユーザーエージェントとの互換性を最大化する（英語）に関する WCAG の説明も参照してください。

関連情報
----

* WCAG
    1. 知覚可能
    2. 操作可能
    3. 理解可能
    4. 堅牢