Skip to content

Commit

Permalink
Merge branch 'mdn:main' into 20240316
Browse files Browse the repository at this point in the history
  • Loading branch information
Dr-XYZ authored Mar 21, 2024
2 parents d67d9ba + 9f08ca0 commit 6c965f6
Show file tree
Hide file tree
Showing 86 changed files with 4,920 additions and 1,092 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ Il existe trois types de <i lang="en">workers</i>&nbsp;:

Dans cet article, nous allons voir un exemple décrivant le premier type, puis discuter brièvement des deux autres.

## Utiliser les <i lang="en>web workers</i>
## Utiliser les <i lang="en">web workers</i>

Vous souvenez-vous du premier article où nous avions une page qui calculait les nombres premiers&nbsp;? Nous allons ici utiliser un <i lang="en">worker</i> pour calculer les nombres premiers afin que notre page reste réactive aux actions des utilisatrices et utilisateurs.

Expand Down
36 changes: 19 additions & 17 deletions files/ja/learn/tools_and_testing/cross_browser_testing/index.md
Original file line number Diff line number Diff line change
@@ -1,31 +1,33 @@
---
title: クロスブラウザーテスト
title: ブラウザー横断テスト
slug: Learn/Tools_and_testing/Cross_browser_testing
l10n:
sourceCommit: 26e2f9883e0e73def04c0e86fec6da3ec42e66b3
---

{{LearnSidebar}}

このモジュールでは、色々なウェブブラウザー間でウェブプロジェクトをテストすることに焦点を当てます。あなたのターゲット視聴者 (例 どのユーザー、ブラウザー、デバイスに一番関心があるのか?) の特定や、テストをどう動かすかや、主な問題としてさまざまな種類のコードと対面してそれらを緩和する方法や、テストを楽にして問題を解決するのに最も役立つツールが何かや、自動化を利用してテストをスピードアップする方法を見て行きます。
このモジュールでは、色々なウェブブラウザー間でウェブプロジェクトをテストすることに焦点を当てます。あなたのターゲット視聴者例 どのユーザー、ブラウザー、デバイスに一番関心があるのか?の特定や、テストをどう動かすかや、主な問題としてさまざまな種類のコードと対面してそれらを緩和する方法や、テストを楽にして問題を解決するのに最も役立つツールが何かや、自動化を利用してテストをスピードアップする方法を見て行きます。

## 前提条件

ここで述べるツールを使ってみる前に、基本的な [HTML](/ja/docs/Learn/HTML)[CSS](/ja/docs/Learn/CSS) [JavaScript](/ja/docs/Learn/JavaScript) 言語をよく理解しておきます
ここで述べるツールを使ってみる前に、基本的な [HTML](/ja/docs/Learn/HTML)[CSS](/ja/docs/Learn/CSS)[JavaScript](/ja/docs/Learn/JavaScript) 言語をよく理解しておく必要があります

## ガイド

- [はじめてのクロスブラウザーテスト](/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction)
- : この記事ではクロスブラウザーテストの概観を提供し始めます。その過程で「ブラウザーテストとは何?」「どんな種類の問題によく出くわしますか?」「テストと、問題の特定・修正の主なアプローチは?」といった質問に答えたりします
- [テスト実行戦略](/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies)
- : 次に、テスト実行について掘り下げ、ターゲット視聴者(例、どのブラウザー、デバイス、その他のセグメントでテストを確実にするのか)を特定し、ローファイテスト戦略(ある範囲のデバイスと仮装マシンにて必要ならアドホックテストを行う)、高度なテスト戦略(専用テストアプリを使った自動化)、ユーザーグループを使ったテストまで見て行きます。
- [よくある HTML CSS の問題を扱う](/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS)
- : シーンがセットされたら、HTML と CSS コードの中でよく出くわすクロスブラウザー問題と、問題を防いだり、問題発生を修正するのに使えるツールを詳しく見ていきます。これにはコードの lint や、CSS プレフィックスを手渡したり、問題を監視するブラウザーの開発ツールを使ったり、ブラウザーサポート追加に polyfill を使ったり、レスポンシブデザインの問題に取り組んだり、といった事が含まれます
- [よくある JavaScript の問題を扱う](/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript)
- : 今度はクロスブラウザー JavaScript の問題と、その修正方法を見て行きます。ここにはブラウザーの開発ツールを使って問題を突き止めて修正したり、問題を回避するのに pollyfill やライブラリーを使用したり、古いブラウザーの対応にモダン JavaScript の機能を掴んだり、といった事が含まれます
- [はじめてのブラウザー横断テスト](/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction)
- : この記事ではブラウザー横断テストの概観を提供するところから始めます。その過程で「ブラウザーテストとは何か」「どんな種類の問題によく出くわすのか」「テストと、問題の特定・修正の主なアプローチは何か」といった疑問に答えたりします
- [テスト実行のための戦略](/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies)
- : 次に、テスト実行について掘り下げ、ターゲット視聴者例、どのブラウザー、デバイス、その他のセグメントでテストを確実にするのかを特定し、ローファイテスト戦略ある範囲のデバイスと仮装マシンにて必要ならアドホックテストを行う、高度なテスト戦略専用テストアプリを使った自動化、ユーザーグループを使ったテストまで見て行きます。
- [一般的な HTML CSS の問題への対処](/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS)
- : 場面を設定したところで、HTML と CSS のコードでよくあるブラウザー間の問題と、問題の発生を防いだり、発生した問題を修正したりするために使用することができます。これには、コードのリンティング、CSS 接頭辞の扱い、ブラウザーの開発ツールを使用した問題の追跡、ポリフィルを使用したブラウザーの対応追加、レスポンシブデザインの問題への対処などが含まれます。
- [よくある JavaScript の問題の扱い](/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript)
- : これで、よくあるブラウザー間の JavaScript 問題と、それを修正する方法を見ていきます。この情報には、問題を追跡し修正するためにブラウザー開発ツールを使用すること、問題を回避するためにポリフィルやライブラリーを使用すること、現行の JavaScript 機能を古いブラウザーで動作させること、などが記載されています
- [よくあるアクセシビリティの問題を扱う](/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility)
- : 次にアクセシビリティに注意を向けて、良くある問題の情報、簡単なテスト実施の方法、アクセシビリティの問題を見つけるための監査/自動化ツールの利用方法を提供します
- : 次にアクセシビリティに注目し、一般的な問題、単純なテストの方法、アクセシビリティの問題を探すための監査/自動化ツールの使用方法に関する情報を提供します
- [機能検出の実装](/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection)
- : 機能検出はブラウザーがあるコードブロックをサポートしているか考えたり、サポートする/しないによって他のコードを実行したりして、いくつかのブラウザーでクラッシュ/エラー起こすことなく、常に動作の体験を提供できるようにすることです。この記事では簡単な機能検出を書く方法や、 `@supports` のようなネイティブ機能について詳しく記載します
- [はじめての自動テスト](/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing)
- : いくつかのブラウザーと端末で、一日に何度もテストを手動実行するのはつまらないし時間をつぶします。これを効率良く扱うには、自動化ツールに詳しくなるべきです。この記事では何を入手できるかや、タスクランナーの使い方や、Sauce Labs Browser Stack のような商用ブラウザーテスト自動化ツールの使い方の基本を見て行きます
- [テスト自動化環境をセットアップする](/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment)
- : この記事では、Selenium/WebDriver selenium-webdriver for Node のようなテストライブラリーを使って、自動化環境のインストールとテストを実行する方法を教えます。またあなたのローカルテスト環境と、以前の記事で見てきたような商用アプリとを統合する方法についても見て行きます
- : 機能検出は、ブラウザーがあるコードブロックに対応しているかどうかを調べ、対応している(または対応していない)かどうかによって異なるコードを実行することで、さまざまなブラウザーでクラッシュしたりエラーになったりすることなく、常に快適な使用感を提供できるようにします。この記事では、自分自身で単純な機能検出を書く方法、実装を高速化するためにライブラリーを使用する方法、そして `@supports` のような機能検出のためのネイティブ機能について詳しく説明します
- [自動テストの紹介](/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing)
- : 複数のブラウザーや端末で、 1 日に何度もテストを手動で実行するのは、面倒で時間のかかる作業です。これを効率的に処理するためには、自動化ツールに慣れることです。この記事では、利用できるもの、タスクランナーの使い方、Sauce Labs Browser Stack などの商用ブラウザーテスト自動化アプリを使用する方法の基本を見ていきます
- [テスト自動化環境のセットアップ](/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment)
- : この記事では、Selenium/WebDriver selenium-webdriver for Node のようなテストライブラリーを使用して、自分自身で自動化環境をインストールし、テストを実行する方法を説明します。この記事では、前回説明したような商用アプリとローカルのテスト環境を統合する方法も見ていきます
68 changes: 68 additions & 0 deletions files/ja/web/accessibility/aria/attributes/aria-level/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
---
title: aria-level
slug: Web/Accessibility/ARIA/Attributes/aria-level
l10n:
sourceCommit: 904cdf09c7e328b7a15a6a4db6bc6bd31f969cce
---

`aria-level` 属性は、構造内の要素の階層レベルを定義します。

## 解説

階層レベルは見出し、ツリー、入れ子グリッド、入れ子タブリストなどに現れます。 DOM の祖先が正確なレベルを表していない場合、 `aria-level` 属性を使用して、階層構造内の階層レベル要素を定義してください。レベルは深さと共に増加します。 `aria-level` の値は `1` 以上の整数です。

文書構造内の見出しに関しては、最初のレベルの見出し、 2 つ目のレベルの見出し、 3 つ目のレベルの見出しなどがあります。ツリーでは、ルート要素、その子要素、子要素の子要素(または孫要素)などがあります。

`aria-level` 属性は支援技術に階層を公開するので、ユーザーに伝えることができます。すべての ARIA 属性と同様に、ユーザーエージェントに影響を与えず、従ってユーザーエージェントによる文書構造の決定にも影響を与えません。

DOM の祖先がレベルを正確に表している場合、ユーザーエージェントは文書構造からアイテムのレベルを計算することができますので、 `aria-level` は冗長であるだけでなく、誤った情報を作成する危険性があります。 `aria-level` は、本当に文書構造から計算することが可能でない場合に、レベルの明示的な表示を提供するためにのみ使用しましょう。この属性が必要かどうかをテストしてください。ユーザーエージェントがレベルを計算できる場合は、 `aria-level` 属性を省略することが最善です。

### `heading` ロール内の場合

`aria-level` 属性は [`heading`](/ja/docs/Web/Accessibility/ARIA/Roles/heading_role) ロールの要求される属性で、要素が見出しとして扱われるべきことを支援技術に示します。 `<div role="heading" aria-level="1">``<div>` をページの主見出しとして定義します。 `aria-level="2"` を定義するレベル 2 の見出しは最初のサブセクション、レベル 3 はそのサブセクション、といった具合になります。

```html
<div role="heading" aria-level="3">このサブセクションの見出し</div>
```

代わりに {{htmlelement("Heading_Elements", "h1")}} から {{htmlelement("Heading_Elements", "h6")}} 要素を使用してください。

### `treegrid` ロール内の場合

[`treegrid`](/ja/docs/Web/Accessibility/ARIA/Roles/treegrid_role) の場合、 `aria-level` はロール [`row`](/ja/docs/Web/Accessibility/ARIA/Roles/row_role) を持つ要素に対応しており、ロール [`gridcell`](/ja/docs/Web/Accessibility/ARIA/Roles/gridcell_role) を持つ要素には対応していません。行はグリッドの垂直方向の葉ノードとして動作します。グリッドセルは各行の水平方向の葉ノードです。 `aria-level` は行内のセルには対応していません。したがって、ツリーグリッドでは、 `aria-level` 属性は `row` ロールを持つ要素に適用されます。

利用できるノードの完全なセットが、ユーザーがツリー内でフォーカスを移動したり、ツリーをスクロールしたりする動的な読み込みのために DOM に存在しない場合、各ノードには `aria-level`, [`aria-setsize`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-setsize), [`aria-posinset`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-posinset) が含まれています。

##

- `<integer>`
- : 1 以上の値です。

## 関連するインターフェイス

- {{domxref("Element.ariaLevel")}}
- : [`ariaLevel`](/ja/docs/Web/API/Element/ariaLevel) プロパティは {{domxref("Element")}} インターフェイスの一部で、 `aria-level` 属性の値を反映します。
- {{domxref("ElementInternals.ariaLevel")}}
- : [`ariaLevel`](/ja/docs/Web/API/ElementInternals/ariaLevel) プロパティは {{domxref("ElementInternals")}} インターフェイスの一部で、 `aria-level` 属性の値を反映します。

## 関連するロール

以下のロール内で使用されます。

- [`associationlistitemkey`](/ja/docs/Web/Accessibility/ARIA/Roles/structural_roles)
- [`comment`](/ja/docs/Web/Accessibility/ARIA/Roles/comment_role)
- [`heading`](/ja/docs/Web/Accessibility/ARIA/Roles/heading_role)
- [`row`](/ja/docs/Web/Accessibility/ARIA/Roles/row_role)

## 仕様書

{{Specifications}}

## 関連情報

- [`<h1>` から `<h6>`: HTML 見出し要素](/ja/docs/Web/HTML/Element/Heading_Elements) ({{htmlelement("Heading_Elements", "h1")}}, {{htmlelement("Heading_Elements", "h2")}}, {{htmlelement("Heading_Elements", "h3")}}, {{htmlelement("Heading_Elements", "h4")}}, {{htmlelement("Heading_Elements", "h5")}}, {{htmlelement("Heading_Elements", "h6")}})

<section id="Quick_links">
<strong><a href="/ja/docs/Web/Accessibility/ARIA/Attributes">WAI-ARIA 状態とプロパティ</a></strong>
{{ListSubpagesForSidebar("/ja/docs/Web/Accessibility/aria/Attributes")}}
</section>
21 changes: 12 additions & 9 deletions files/ja/web/api/canvasrenderingcontext2d/strokestyle/index.md
Original file line number Diff line number Diff line change
@@ -1,23 +1,27 @@
---
title: "CanvasRenderingContext2D: strokeStyle プロパティ"
short-title: strokeStyle
slug: Web/API/CanvasRenderingContext2D/strokeStyle
l10n:
sourceCommit: 1f216a70d94c3901c5767e6108a29daa48edc070
sourceCommit: c8b447485fd893d5511d88f592f5f3aec29a725b
---

{{APIRef}}

**`CanvasRenderingContext2D.strokeStyle`** はキャンバス 2D API のプロパティで、図形の辺(輪郭)に使用する色、グラデーション、またはパターンを指定します。既定値は `#000` (黒色)です。

> **メモ:** 輪郭と塗りつぶしのスタイル例については、 [canvas チュートリアル](/ja/docs/Web/API/Canvas_API/Tutorial)[スタイルと色の適用](/ja/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors) をご覧ください。
> **メモ:** 輪郭と塗りつぶしのスタイル例については、[キャンバスのチュートリアル](/ja/docs/Web/API/Canvas_API/Tutorial)[スタイルと色の適用](/ja/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors) をご覧ください。
##

以下のいずれかです。

- CSS の {{cssxref("&lt;color&gt;")}} 値として解釈される文字列。
- {{domxref("CanvasGradient")}} オブジェクト(線形または放射状のグラデーション)。
- {{domxref("CanvasPattern")}} オブジェクト(繰り返し画像)。
- `color`
- : CSS の {{cssxref("&lt;color&gt;")}} 値として解釈される文字列。
- `gradient`
- : {{domxref("CanvasGradient")}} オブジェクト(線形または放射グラデーション)。
- `pattern`
- : {{domxref("CanvasPattern")}} オブジェクト(繰り返し画像)。

##

Expand Down Expand Up @@ -59,8 +63,8 @@ const ctx = document.getElementById("canvas").getContext("2d");
for (let i = 0; i < 6; i++) {
for (let j = 0; j < 6; j++) {
ctx.strokeStyle = `rgb(
0,
${Math.floor(255 - 42.5 * i)},
0
${Math.floor(255 - 42.5 * i)}
${Math.floor(255 - 42.5 * j)})`;
ctx.beginPath();
ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);
Expand All @@ -71,8 +75,7 @@ for (let i = 0; i < 6; i++) {

結果はこのようになります。

{{EmbedLiveSample("Creating_multiple_stroke_colors_using_loops", "180", "180",
"canvas_strokestyle.png")}}
{{EmbedLiveSample("Creating_multiple_stroke_colors_using_loops", "", "180")}}

## 仕様書

Expand Down
Loading

0 comments on commit 6c965f6

Please sign in to comment.