From 9e39701e280a215238bff5b9ca9cd4f91f55f4e1 Mon Sep 17 00:00:00 2001 From: 1natsu172 <1natsu172@users.noreply.github.com> Date: Thu, 16 Jan 2020 23:20:45 +0900 Subject: [PATCH 1/4] feat(docs): translate working-with-gifs --- docs/docs/working-with-gifs.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/docs/docs/working-with-gifs.md b/docs/docs/working-with-gifs.md index 2b919af06..85c99473d 100644 --- a/docs/docs/working-with-gifs.md +++ b/docs/docs/working-with-gifs.md @@ -1,14 +1,14 @@ --- -title: Working with GIFs +title: GIFを使用する --- -If you're building a blog with Gatsby, chances are you'll want to include some animated GIFs: who wouldn't want to include a dancing otter or cat GIF? +Gatsby でブログを作成していると、アニメーション GIF を使いたいときがあるかもしれません。たとえば踊るカワウソや猫の GIF を使いたいときなどです。 -## Including GIFs in components +## コンポーネントに GIF を含める -In Gatsby components and pages, you'll want to import animated GIFs instead of using Gatsby Image because of the way it optimizes image data for the responsive picture element. +Gatsby のコンポーネントとページではレスポンシブピクチャ要素の画像データを最適化するために、Gatsby Image を使用せずにアニメーション GIF をインポートする必要があります。 -Here's an example: +以下に例を示します。 ```jsx:title=pages/about.js import React from 'react' @@ -27,9 +27,9 @@ const AboutPage = () => ( export default AboutPage; ``` -## Including GIFs in Markdown +## マークダウンに GIF を含める -In Markdown posts and pages, including an animated GIF is the same as a static image: +マークダウンによる投稿とページにアニメーション GIF を含める場合は静止画像と同じ方法になります。 ```markdown ![otter dancing with a fish](./images/dancing-ofter.gif) @@ -37,13 +37,13 @@ In Markdown posts and pages, including an animated GIF is the same as a static i ![otter dancing with a fish](./images/dancing-otter.gif) -Animated GIFs can be quite large in size, so be careful not to sabotage your webpages' performance with extremely large files. You could reduce file size by [optimizing the frames](https://skylilies.livejournal.com/244378.html) or converting them to video. +アニメーション GIF はファイルサイズが非常に大きい場合があるので、ウェブページのパフォーマンスを損なわないように注意してください。[フレームを最適化する](https://skylilies.livejournal.com/244378.html)かビデオに変換するとファイルサイズを小さくできます。 -## Accessibility concerns with animated GIFs +## アニメーション GIF のアクセシビリティに関する問題 -Beware that flashing and autoplaying GIFs can cause issues for users who are sensitive to motion. GIFs should not autoplay whenever possible for safety reasons. One technique would be to add controls, such as using a package like [react-gif-player](https://www.npmjs.com/package/react-gif-player) as a [client-only package](/docs/using-client-side-only-packages/). +GIF の点滅と自動再生は、動きに敏感なユーザーの問題を引き起こす可能性があることに注意してください。安全上の理由から可能な限り GIF の自動再生をするべきではありません。方法の 1 つとしては、[react-gif-player](https://www.npmjs.com/package/react-gif-player) のようなパッケージを[クライアントサイド専用パッケージ](/docs/using-client-side-only-packages/)として使用して、GIF にコントロールを追加することです。 -For more information on accessible motion: +アクセシビリティにおけるモーションの詳細については以下を参照してください。 - https://source.opennews.org/articles/motion-sick/ - https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html From f34c6513090a82f7c288667a226242bb96e3fc2b Mon Sep 17 00:00:00 2001 From: 1natsu <1natsu172@users.noreply.github.com> Date: Fri, 17 Jan 2020 01:57:01 +0900 Subject: [PATCH 2/4] correct the translation of "responsive picture element" Co-Authored-By: Jesse Katsumata --- docs/docs/working-with-gifs.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/working-with-gifs.md b/docs/docs/working-with-gifs.md index 85c99473d..673201ad0 100644 --- a/docs/docs/working-with-gifs.md +++ b/docs/docs/working-with-gifs.md @@ -6,7 +6,7 @@ Gatsby でブログを作成していると、アニメーション GIF を使 ## コンポーネントに GIF を含める -Gatsby のコンポーネントとページではレスポンシブピクチャ要素の画像データを最適化するために、Gatsby Image を使用せずにアニメーション GIF をインポートする必要があります。 +Gatsby のコンポーネントとページではレスポンシブなピクチャ要素の画像データを最適化するために、Gatsby Image を使用せずにアニメーション GIF をインポートする必要があります。 以下に例を示します。 From a36e9078e9c7253272a2ce8432b8058498df305b Mon Sep 17 00:00:00 2001 From: 1natsu <1natsu172@users.noreply.github.com> Date: Fri, 17 Jan 2020 01:58:09 +0900 Subject: [PATCH 3/4] Update docs/docs/working-with-gifs.md Co-Authored-By: Jesse Katsumata --- docs/docs/working-with-gifs.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/working-with-gifs.md b/docs/docs/working-with-gifs.md index 673201ad0..c40ca8423 100644 --- a/docs/docs/working-with-gifs.md +++ b/docs/docs/working-with-gifs.md @@ -41,7 +41,7 @@ export default AboutPage; ## アニメーション GIF のアクセシビリティに関する問題 -GIF の点滅と自動再生は、動きに敏感なユーザーの問題を引き起こす可能性があることに注意してください。安全上の理由から可能な限り GIF の自動再生をするべきではありません。方法の 1 つとしては、[react-gif-player](https://www.npmjs.com/package/react-gif-player) のようなパッケージを[クライアントサイド専用パッケージ](/docs/using-client-side-only-packages/)として使用して、GIF にコントロールを追加することです。 +GIF の点滅と自動再生は、動きに敏感なユーザーの問題を引き起こす可能性があることに注意してください。安全上の理由から可能な限り GIF の自動再生をするべきではありません。対処法の 1 つとしては、[react-gif-player](https://www.npmjs.com/package/react-gif-player) のようなパッケージを[クライアントサイド専用パッケージ](/docs/using-client-side-only-packages/)として使用して、GIF にコントロールを追加すると良いでしょう。 アクセシビリティにおけるモーションの詳細については以下を参照してください。 From 07c25c0812c0ec333e1e99e8762e80d06aea8996 Mon Sep 17 00:00:00 2001 From: 1natsu <1natsu172@users.noreply.github.com> Date: Fri, 17 Jan 2020 15:28:32 +0900 Subject: [PATCH 4/4] =?UTF-8?q?Update=20working-with-gifs:=20=E3=83=9E?= =?UTF-8?q?=E3=83=BC=E3=82=AF=E3=83=80=E3=82=A6=E3=83=B3=20to=20Markdown?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/docs/working-with-gifs.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/docs/working-with-gifs.md b/docs/docs/working-with-gifs.md index c40ca8423..7268fe78b 100644 --- a/docs/docs/working-with-gifs.md +++ b/docs/docs/working-with-gifs.md @@ -27,9 +27,9 @@ const AboutPage = () => ( export default AboutPage; ``` -## マークダウンに GIF を含める +## Markdown に GIF を含める -マークダウンによる投稿とページにアニメーション GIF を含める場合は静止画像と同じ方法になります。 +Markdown による投稿とページにアニメーション GIF を含める場合は静止画像と同じ方法になります。 ```markdown ![otter dancing with a fish](./images/dancing-ofter.gif)