From b8899e350326af3e53dfad89747761c1c13a3915 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 14 Sep 2021 11:06:51 +0900 Subject: Learn 以下の文書内のリンクURLを正規化 (#2356) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - /en-US へのリンクを /ja へのリンクに修正 - /ja が付いていないものに /ja を付加 - MDN内のリンクが完全URLの場合、 /ja/docs からのURLに修正 --- .../automated_testing/index.html | 18 +++---- .../cross_browser_testing/html_and_css/index.html | 56 +++++++++++----------- .../cross_browser_testing/introduction/index.html | 2 +- .../cross_browser_testing/javascript/index.html | 6 +-- .../your_own_automation_environment/index.html | 2 +- 5 files changed, 42 insertions(+), 42 deletions(-) (limited to 'files/ja/learn/tools_and_testing/cross_browser_testing') diff --git a/files/ja/learn/tools_and_testing/cross_browser_testing/automated_testing/index.html b/files/ja/learn/tools_and_testing/cross_browser_testing/automated_testing/index.html index 98bf8d9394..abbfe4fa7e 100644 --- a/files/ja/learn/tools_and_testing/cross_browser_testing/automated_testing/index.html +++ b/files/ja/learn/tools_and_testing/cross_browser_testing/automated_testing/index.html @@ -227,7 +227,7 @@ npm install --save-dev @babel/core
  • Add 'js' as an item inside the array in the default task.
    • -

    Here we grab our main.js file, run jshint on it and output the results to the terminal using jshint.reporter; we then pass the file to babel, which converts it to old style syntax and outputs the result into the build directory. Our original code included a fat arrow function, which babel has modified into an old style function.

    +

    Here we grab our main.js file, run jshint on it and output the results to the terminal using jshint.reporter; we then pass the file to babel, which converts it to old style syntax and outputs the result into the build directory. Our original code included a fat arrow function, which babel has modified into an old style function.

    Further ideas

    @@ -607,14 +607,14 @@ function getSessionDetails(session){

    In this module

     

    diff --git a/files/ja/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html b/files/ja/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html index 62e21f35a2..86ed9a69cb 100644 --- a/files/ja/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html +++ b/files/ja/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html @@ -85,7 +85,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS

    Other popular editors have similar linting packages available. For example, see:

    @@ -109,7 +109,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS

    Older browsers not supporting modern features

    -

    This is a common problem, especially when you need to support old browsers (such as old IE versions) or you are using features that are implemented using CSS prefixes. In general, most core HTML and CSS functionality (such as basic HTML elements, CSS basic colors and text styling) works across most browsers you'll want to support; more problems are uncovered when you start wanting to use newer features such as Flexbox, or HTML5 video/audio, or even more nascent, CSS Grids or -webkit-background-clip: text.

    +

    This is a common problem, especially when you need to support old browsers (such as old IE versions) or you are using features that are implemented using CSS prefixes. In general, most core HTML and CSS functionality (such as basic HTML elements, CSS basic colors and text styling) works across most browsers you'll want to support; more problems are uncovered when you start wanting to use newer features such as Flexbox, or HTML5 video/audio, or even more nascent, CSS Grids or -webkit-background-clip: text.

    Once you've identified a list of potential problem technologies you will be using, it is a good idea to research what browsers they are supported in, and what related techniques are useful. See {{anch("Finding help")}} below.

    @@ -123,7 +123,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS

    Note: See {{anch("IE conditional comments")}} for the best way to do this.

    -

    More complex elements like HTML <video>, <audio>, and <canvas> (and other features besides) have natural mechanisms for fallbacks to be added, which work on the same principle as described above. You can add fallback content in between the opening and closing tags, and non-supporting browsers will effectively ignore the outer element and run the nested content.

    +

    More complex elements like HTML <video>, <audio>, and <canvas> (and other features besides) have natural mechanisms for fallbacks to be added, which work on the same principle as described above. You can add fallback content in between the opening and closing tags, and non-supporting browsers will effectively ignore the outer element and run the nested content.

    For example:

    @@ -143,13 +143,13 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS <a href="video/tears-of-steel-battle-clip-medium.mp4">Download MP4</a> </video> -

    This example (taken from Creating a cross-browser video player) includes not only a Flash video fallback for older IE versions, but also a simple link allowing you to download the video if even the Flash player doesn't work, so at least the user can still access the video.

    +

    This example (taken from Creating a cross-browser video player) includes not only a Flash video fallback for older IE versions, but also a simple link allowing you to download the video if even the Flash player doesn't work, so at least the user can still access the video.

    Note: 3rd party libraries like Video.js and JW Player use such fallback mechanisms to provide cross-browser support.

    -

    HTML5 form elements also exhibit fallback qualities — HTML5 introduced some special <input> types for inputting specific information into forms, such as times, dates, colors, numbers, etc. These are very useful, particularly on mobile platforms, where providing a pain-free way of entering data is very important for the user experience. Supporting platforms provide special UI widgets when these input types are used, such as a calendar widget for entering dates.

    +

    HTML5 form elements also exhibit fallback qualities — HTML5 introduced some special <input> types for inputting specific information into forms, such as times, dates, colors, numbers, etc. These are very useful, particularly on mobile platforms, where providing a pain-free way of entering data is very important for the user experience. Supporting platforms provide special UI widgets when these input types are used, such as a calendar widget for entering dates.

    The following example shows date and time inputs:

    @@ -252,14 +252,14 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS inset -1px -1px 3px rgba(255,255,255,0.4); } -

    Here we are providing an RGBA {{cssxref("background-color")}} that changes opacity on hover to give the user a hint that the button is interactive, and some semi-transparent inset {{cssxref("box-shadow")}} shades to give the button a bit of texture and depth. The trouble is that RGBA colors and box shadows don't work in IE versions older than 9 — in older versions the background just wouldn't show up at all so the text would be unreadable, no good at all!

    +

    Here we are providing an RGBA {{cssxref("background-color")}} that changes opacity on hover to give the user a hint that the button is interactive, and some semi-transparent inset {{cssxref("box-shadow")}} shades to give the button a bit of texture and depth. The trouble is that RGBA colors and box shadows don't work in IE versions older than 9 — in older versions the background just wouldn't show up at all so the text would be unreadable, no good at all!

    To sort this out, we have added a second background-color declaration, which just specifies a hex color — this is supported way back in really old browsers, and acts as a fallback if the modern shiny features don't work. What happens is a browser visiting this page first applies the first background-color value; when it gets to the second background-color declaration, it will override the initial value with this value if it supports RGBA colors. If not, it will just ignore the entire declaration and move on.

    -

    Note: The same is true for other CSS features like media queries, @font-face and @supports blocks — if they are not supported, the browser just ignores them.

    +

    Note: The same is true for other CSS features like media queries, @font-face and @supports blocks — if they are not supported, the browser just ignores them.

    IE conditional comments

    @@ -292,7 +292,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS

    Selector support

    -

    Of course, no CSS features will apply at all if you don't use the right selectors to select the element you want to style! If you just write a selector incorrectly so the styling isn't as expected in any browser, you'll just need to troubleshoot and work out what is wrong with your selector. We find that it is helpful to inspect the element you are trying to style using your browser's dev tools, then look at the DOM tree breadcrumb trail that DOM inspectors tend to provide to see if your selector makes sense compared to it.

    +

    Of course, no CSS features will apply at all if you don't use the right selectors to select the element you want to style! If you just write a selector incorrectly so the styling isn't as expected in any browser, you'll just need to troubleshoot and work out what is wrong with your selector. We find that it is helpful to inspect the element you are trying to style using your browser's dev tools, then look at the DOM tree breadcrumb trail that DOM inspectors tend to provide to see if your selector makes sense compared to it.

    For example, in the Firefox dev tools, you get this kind of output at the bottom of the DOM inspector:

    @@ -304,7 +304,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS

    (The date form input isn't directly inside the <form>; you'd be better off using a general descendant selector instead of a child selector).

    -

    However, another issue that appears in versions of IE older than 9 is that none of the newer selectors (mainly pseudo-classes and pseudo-elements like :nth-of-type, :not, ::selection, etc.) work. If you want to use these in your CSS and you need to support older IE versions, a good move is to use Keith Clark's Selectivizr library — this is a small JavaScript library that works on top of an existing JavaScript library like jQuery or MooTools.

    +

    However, another issue that appears in versions of IE older than 9 is that none of the newer selectors (mainly pseudo-classes and pseudo-elements like :nth-of-type, :not, ::selection, etc.) work. If you want to use these in your CSS and you need to support older IE versions, a good move is to use Keith Clark's Selectivizr library — this is a small JavaScript library that works on top of an existing JavaScript library like jQuery or MooTools.

    1. To try this example, make a local copy of selectivizr-example-start.html. If you look at this running live, you'll see that it contains two paragraphs, one of which is styled. We've selected the paragraph with p:first-child, which won't work in old versions of IE.
      2. @@ -345,7 +345,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS

      The first line shows a {{cssxref("transform")}} property with a -webkit- prefix — this was needed to make transforms work in Chrome, etc. until the feature was finalized and such browsers added a prefix-free version of the property (at the time of writing, Chrome supported both versions).

      -

      The last three lines show three different versions of the linear-gradient() function, which is used to generate a linear gradient in the background of an element:

      +

      The last three lines show three different versions of the linear-gradient() function, which is used to generate a linear gradient in the background of an element:

      1. The first one has a -moz- prefix, and shows a slightly older version of the syntax (Firefox)
        2. @@ -370,7 +370,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS
        •  
          • -
        • Now try to set a new value for the CSS property you are interested in on that element; you can do this using the style property of the element, for example try typing these into the JavaScript console: +
        • Now try to set a new value for the CSS property you are interested in on that element; you can do this using the style property of the element, for example try typing these into the JavaScript console: 
          test.style.transform = 'rotate(90deg)'
 test.style.webkitTransform = 'rotate(90deg)'
          • @@ -443,13 +443,13 @@ test.styleSupport for new layout features -

          Much of the layout work on the web today is done using floats — this is because floats are well-supported (way back to IE4, albeit with a number of bugs that would also need to be investigated if you were to try to support IE that far back). However, they are not really meant for layout purposes — using floats the way we do is really a hack — and they do have some serious limitations (e.g. see Why Flexbox?)

          +

          Much of the layout work on the web today is done using floats — this is because floats are well-supported (way back to IE4, albeit with a number of bugs that would also need to be investigated if you were to try to support IE that far back). However, they are not really meant for layout purposes — using floats the way we do is really a hack — and they do have some serious limitations (e.g. see Why Flexbox?)

          -

          More recently, dedicated layout mechanisms have appeared, like Flexbox and CSS Grids, which make common layout tasks far easier and remove such shortcomings. These however are not as well-supported in browsers:

          +

          More recently, dedicated layout mechanisms have appeared, like Flexbox and CSS Grids, which make common layout tasks far easier and remove such shortcomings. These however are not as well-supported in browsers:

          • CSS grids are very new; at the time of writing, they were only supported in the very newest versions of modern browsers.
            • -
          • Flexbox is well-supported in modern browsers, but provides problems in older browsers. IE 9 doesn't support it at all, and IE 10 and old versions of iOS/desktop Safari respectively support incompatible old versions of the flexbox spec. This results in some interesting browser prefix juggling if you want to try to use flexbox across all these browsers (see Advanced Cross-Browser Flexbox to get an idea).
            • +
          • Flexbox is well-supported in modern browsers, but provides problems in older browsers. IE 9 doesn't support it at all, and IE 10 and old versions of iOS/desktop Safari respectively support incompatible old versions of the flexbox spec. This results in some interesting browser prefix juggling if you want to try to use flexbox across all these browsers (see Advanced Cross-Browser Flexbox to get an idea).

          Layout features aren't as easy to provide graceful fallbacks for than simple colors, shadows, or gradients. If layout properties are ignored, your entire design will likely fall to pieces. Because of this, you need to use feature detection to detect whether visiting browsers support those layout features, and selectively apply different layouts depending on the result (we will cover feature detection in detail in a later article).

          @@ -457,14 +457,14 @@ test.styleFor example, you could apply a flexbox layout to modern browsers, then instead apply a floated layout to older browsers that don't support flexbox.

          -

          Note: There is a fairly new feature in CSS called @supports, which allows you to implement native feature detection tests.

          +

          Note: There is a fairly new feature in CSS called @supports, which allows you to implement native feature detection tests.

          Responsive design problems

          -

          Responsive design is the practice of creating web layouts that change to suit different device form factors — for example different screen widths, orientations (portrait or landscape), or resolutions. A desktop layout for example will look terrible when viewed on a mobile device, so you need to provide a suitable mobile layout using media queries, and make sure it is applied correctly using viewport. You can find a detailed account of such practices in The building blocks of responsive design.

          +

          Responsive design is the practice of creating web layouts that change to suit different device form factors — for example different screen widths, orientations (portrait or landscape), or resolutions. A desktop layout for example will look terrible when viewed on a mobile device, so you need to provide a suitable mobile layout using media queries, and make sure it is applied correctly using viewport. You can find a detailed account of such practices in The building blocks of responsive design.

          -

          Resolution is a big issue too — for example, mobile devices are less likely to need big heavy images than desktop computers, and are more likely to have slower internet connections and possibly even expensive data plans that make wasted bandwidth more of a problem. In addition, different devices can have a range of different resolutions, meaning that smaller images could appear pixellated. There are a number of techniques that allow you to work around such problems, from simple mobile first media queries, to more complex responsive image techniques.

          +

          Resolution is a big issue too — for example, mobile devices are less likely to need big heavy images than desktop computers, and are more likely to have slower internet connections and possibly even expensive data plans that make wasted bandwidth more of a problem. In addition, different devices can have a range of different resolutions, meaning that smaller images could appear pixellated. There are a number of techniques that allow you to work around such problems, from simple mobile first media queries, to more complex responsive image techniques.

          Another difficulty that can present problems is browser support for the features that make the above techniques possible. media queries are not supported in IE 8 or less, so if you want to use a mobile first layout and have the desktop layout then apply to old IE versions, you'll have to apply a media query {{glossary("polyfill")}} to your page, like css3-mediaqueries-js, or Respond.js.

          @@ -477,9 +477,9 @@ test.styleTo use the Mozilla Developer Network (MDN), most people do a search engine search of the technology they are trying to find information on, plus the term "mdn", for example "mdn HTML5 video". MDN contains several useful types of content:

          caniuse.com provides support information, along with a few useful external resource links. For example, see http://caniuse.com/#search=video (you just have to enter the feature you are searching for into the text box).

          @@ -497,12 +497,12 @@ test.styleこのモジュール diff --git a/files/ja/learn/tools_and_testing/cross_browser_testing/introduction/index.html b/files/ja/learn/tools_and_testing/cross_browser_testing/introduction/index.html index 3e0e2e7834..3111d63b0e 100644 --- a/files/ja/learn/tools_and_testing/cross_browser_testing/introduction/index.html +++ b/files/ja/learn/tools_and_testing/cross_browser_testing/introduction/index.html @@ -50,7 +50,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Introduction

          その一方で、サイトが視力のあるユーザーにとって動作していても、視覚障がいのあるユーザーにとって、スクリーンリーダーアプリケーションがそこにある情報を読み取れないため完全にアクセスできない場合は、OKではありません。

          -

          2つ目に、「受け入れられる数のウェブブラウザ間で」と言った時、世界中のブラウザの 100% の意味ではありません — これは不可能です。ユーザーが使うブラウザや端末の情報を呼び出すことができます (このシリーズの2つ目の記事で見ていきましょう — Gotta test 'em all?を見てください)が、すべてを保証することはできません。ウェブ開発者としては、ある範囲のブラウザと端末にてコードが完全に動作することをサイトオーナーと同意しておく必要があります。しかしそれを超えて、その他のブラウザでコンテンツを使う機会をできるだけ与えられるよう防衛的なコードを書いておく必要があります。

          +

          2つ目に、「受け入れられる数のウェブブラウザ間で」と言った時、世界中のブラウザの 100% の意味ではありません — これは不可能です。ユーザーが使うブラウザや端末の情報を呼び出すことができます (このシリーズの2つ目の記事で見ていきましょう — Gotta test 'em all?を見てください)が、すべてを保証することはできません。ウェブ開発者としては、ある範囲のブラウザと端末にてコードが完全に動作することをサイトオーナーと同意しておく必要があります。しかしそれを超えて、その他のブラウザでコンテンツを使う機会をできるだけ与えられるよう防衛的なコードを書いておく必要があります。

          注: このモジュールの後の方でも、防衛的なコードをカバーします。

          diff --git a/files/ja/learn/tools_and_testing/cross_browser_testing/javascript/index.html b/files/ja/learn/tools_and_testing/cross_browser_testing/javascript/index.html index 12c8f274d6..2ee7e93ba0 100644 --- a/files/ja/learn/tools_and_testing/cross_browser_testing/javascript/index.html +++ b/files/ja/learn/tools_and_testing/cross_browser_testing/javascript/index.html @@ -104,7 +104,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/JavaScript

          You can then point these tools at JavaScript files you want to lint, for example:

          -

          You can also use these tools with a task runner/build tool such as Gulp or Webpack to automatically lint your JavaScript during development. (see Using a task runner to automate testing tools in a later article.) See ESLint integrations for ESLint options; JSHint is supported out of the box by Grunt, and also has other integrations available, e.g. JSHint loader for Webpack.

          +

          You can also use these tools with a task runner/build tool such as Gulp or Webpack to automatically lint your JavaScript during development. (see Using a task runner to automate testing tools in a later article.) See ESLint integrations for ESLint options; JSHint is supported out of the box by Grunt, and also has other integrations available, e.g. JSHint loader for Webpack.

          注: ESLint takes a bit more setup and configuration than JSHint, but it is more powerful too.

          @@ -210,7 +210,7 @@ showHeroes(superHeroes);
      -

      注: We'd like you to try fixing this problem yourself. To give you a clue, you can either tell the XMLHttpRequest object explicitly to return JSON format, or convert the returned text to JSON after the response arrives. If you get stuck, consult our fixed-ajax.html example.

      +

      注: We'd like you to try fixing this problem yourself. To give you a clue, you can either tell the XMLHttpRequest object explicitly to return JSON format, or convert the returned text to JSON after the response arrives. If you get stuck, consult our fixed-ajax.html example.

      @@ -252,7 +252,7 @@ showHeroes(superHeroes);

      For example:

        -
      • Promises are a great new feature for performing asynchronous operations and making sure those operations are complete before code that relies on their results is used for something else. As an example, the Fetch API (a modern equivalent to XMLHTTPRequest) uses promises to fetch resources across the network and make sure that the response has been returned before they are used (for example, displaying an image inside an {{htmlelement("img")}} element). They are not supported in IE at all but are supported across all modern browsers.
        • +
      • Promises are a great new feature for performing asynchronous operations and making sure those operations are complete before code that relies on their results is used for something else. As an example, the Fetch API (a modern equivalent to XMLHTTPRequest) uses promises to fetch resources across the network and make sure that the response has been returned before they are used (for example, displaying an image inside an {{htmlelement("img")}} element). They are not supported in IE at all but are supported across all modern browsers.
      • Arrow functions provide a shorter, more convenient syntax for writing anonymous functions, which also has other advantages (see Arrow functions). For a quick example, see arrow-function.html (see the source code also). Arrow functions are supported across all modern browsers, except for IE and Safari.
      • Declaring strict mode at the top of your JavaScript code causes it to be parsed with a stricter set of rules, meaning that more warnings and errors will be thrown, and some things will be disallowed that would otherwise be acceptable. It is arguably a good idea to use strict mode, as it makes for better, more efficient code, however it has limited/patchy support across browsers (see Strict mode in browsers).
      • Typed arrays allow JavaScript code to access and manipulate raw binary data, which is necessary as browser APIs for example start to manipulate streams of raw video and audio data. These are available in IE10 and above, and all modern browsers.
        • diff --git a/files/ja/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.html b/files/ja/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.html index 06f93804ce..8f36e7e65b 100644 --- a/files/ja/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.html +++ b/files/ja/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.html @@ -50,7 +50,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/Your_own_automatio

        Node で Selenium のセットアップ

          -
        1. まず、最後の章の Setting up Node and npm で説明しているように、新しいnpmプロジェクトをセットアップします。selenium-testのように違うものを呼んでください。
          2. +
        2. まず、最後の章の Setting up Node and npm で説明しているように、新しいnpmプロジェクトをセットアップします。selenium-testのように違うものを呼んでください。
        3. 次に私たちはNodeの内部からSeleniumが機能するようにフレームワークをインストールする必要があります。 更新頻度が高く、よく改善されるため、私たちはselenium-webdriverを選択します。もしも他の選択をするならばwebdriver.io と nightwatch.js もいい選択です。selenium-webdriverをインストールするため, プロジェクトフォルダの下で以下のコマンドを走らせます:
        4. npm install selenium-webdriver
          -- cgit v1.2.3-54-g00ecf