From 87e1ab33c2499cf266153b41d76b8e703d820817 Mon Sep 17 00:00:00 2001 From: Youhei Nozaki Date: Sat, 18 Jan 2020 19:57:53 +0900 Subject: [PATCH 01/12] translate tutorial/gatsby-image-tutorial --- docs/tutorial/gatsby-image-tutorial/index.md | 80 +++++++++++--------- 1 file changed, 43 insertions(+), 37 deletions(-) diff --git a/docs/tutorial/gatsby-image-tutorial/index.md b/docs/tutorial/gatsby-image-tutorial/index.md index f2b6846b1..5282e1de6 100644 --- a/docs/tutorial/gatsby-image-tutorial/index.md +++ b/docs/tutorial/gatsby-image-tutorial/index.md @@ -1,63 +1,67 @@ --- -title: Using Gatsby-Image With Your Site +タイトル:　Gatsby-Image をサイトで使う --- -## What’s contained in this tutorial? +##このチュートリアルには何が含まれていますか？ -By the end of this tutorial, you’ll have done the following: +このチュートリアルを終わりには、以下のことが出来るようになります： -- learned how to use `gatsby-image` for responsive images -- queried for a single image with GraphQL -- sourced multiple images through YAML files -- learned how to troubleshoot common errors +- レスポンシブ画像に対応した　`gatsby-image` の使い方について学ぶ。 +- GraphQLを用いて単一の画像を照会する。 +- YAMLファイルを通して複数の画像を取得する。 +- 一般的なエラーのトラブルシューティングの方法について学ぶ。 -## Prerequisites +## 前提条件 -This tutorial assumes you already have a Gatsby project up and running as well as images you'd like to render on your page. To set up a Gatsby site, check out the [main tutorial](/tutorial/) or the [quick start](/docs/quick-start/). +このチュートリアルはすでにGatsbyのプロジェクトが実行されていて、そのページにレンダリングしたい画像があることを前提としています。Gatsbyサイトをセットアップする方法は [メインチュートリアル](/tutorial/) または [クイックスタート](/docs/quick-start/) をご覧ください。 -In this tutorial you'll learn how to set up `gatsby-image`, a React component that optimizes responsive images using GraphQL and Gatsby's data layer. You'll be informed of a number of ways to use `gatsby-image` and some gotchas. +このチュートリアルでは、`gatsby-image` 、GraphQLやGatsbyのデータレイヤーを用いてレスポンシブ画像を最適化するReactコンポーネントをセットアップする方法を学びます。 -> _Note: this tutorial uses examples of static content stored in YAML files, but similar methods can be used for Markdown files._ +> _ノート: このチュートリアルでは、YAMLファイルに保存されている静的なコンテンツを使用していますが、同様の方法がマークダウンファイルでも使用することが出来ます。_ -## Getting started +## 入門 -Image optimization in Gatsby is provided by a plugin called `gatsby-image` which is incredibly performant. +Gatsbyの画像最適化は信じられないパフォーマンスの `gatsby-image` と呼ばれるプラグインによって提供されます。 -### Step 1 +### ステップ 1 + +npmを使って、 `gatsby-image` プラグインとその依存関係にあるプラグインをインストールします。 -Start by using npm to install the `gatsby-image` plugin and its associated dependencies. ```bash npm install gatsby-image gatsby-transformer-sharp gatsby-plugin-sharp ``` ### Step 2 +### ステップ　2 -Add the newly installed plugins to your `gatsby-config.js` file. The config file ends up looking like this (other plugins already in use have been removed from this snippet for simplicity). +新たにインストールしたプラグインを　`gatsby-config.js` ファイルに追加します。ファイルは最終的に以下のようになります（すでに使用されている他のプラグインは簡単にするために省略しています）。 -> _Note: once `gatsby-image` has been installed, it does not need to be included in the `gatsby-config.js` file._ +> ＿ノート; `gatsby-image` はインストールしたら、`gatsby-config.js` に追加する必要はありません。 ```javascript:title=gatsby-config.js plugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`] ``` ## Gatsby-image configuration +## Gatsby-image の構成 + +これで、`gatsby-image` を使えるように設定されました。 -Now you're set up to use `gatsby-image`. +### ステップ　3 -### Step 3 +画像ファイルを置く場所を決めてください。この例では、`src/data` に置いてあります。 -Determine where your image files are located. In this example they're in `src/data`. +もし、プロジェクトがこのディレクトリ内のコンテンツを表示させる設定をまだ行なっていない場合は、次の2つを実行してください: -If you haven't already, make sure that your project is set up to see content inside that directory. That means doing two things: -1. Install `gatsby-source-filesystem`. Note: If you created your project using `gatsby new `, this first step should already be done for you via the default starter. +1. `gatsby-source-filesystem` をインストールしてください。　ノート: プロジェクトを　`gatsby new ` を使用して作成した場合は、この最初の手順はすでにデフォルトスターターを経由して実行されています。 ```bash npm install gatsby-source-filesystem ``` -2. The next step is to make sure your `gatsby-config.js` file specifies the correct folder. In this example it would look like this: +2. 次に　`gatsby-config.js` で正しくフォルダの指定がされているかを確認してください。この例では、以下のようになります: ```javascript:title=gatsby-config.js plugins: [ @@ -67,15 +71,15 @@ plugins: [ ] ``` -Now you're ready to start working with `gatsby-image`! +これで、 `gatsby-image` を使って作業を始める準備が整いました! -## Step 4 +## ステップ 4 -The next step can vary depending on what you're trying to accomplish. +次のステップはあなたが達成しようとしていることによって異なります。 -## Querying data for a single image +## 単一画像のデータのクエリ -Use `graphql` to query an image file directly. You can include the relative path to the image file and determine how you want `gatsby-image` to process the file. +画像ファイルを直接クエリするために　`graphql` を使用します。画像ファイルを相対パスに含めることで、 `gatsby-image` によってそのファイルを処理する方法を指定することが出来ます。 ```jsx:title=src/pages/index.js export const query = graphql` @@ -91,25 +95,27 @@ export const query = graphql` ` ``` -There are a couple of things to note here. +ここで注意することがいくつかあります。 -### Relative image paths and `gatsby-config.js` -You might expect the relative path to be relative to the file the code sits in, in this case that's index.js. However, that doesn't work. The relative path is actually based on the line of code you put in the `gatsby-source-filesystem` config, which points to `src/data`. +### 相対画像パスと　`gatsby-config.js` -### Image fragments +あなたは相対パスと聞いて、コードが置かれているファイルに対応する相対パス（この場合はindex.js）であると予想するかもしれません。しかし、それは違います。相対パスは実際には `gatsby-source-filesystem` に配置したコードの設定に基づき、ここでは `src/data` を指します。 -Another thing to note about this query is how it uses the fragment `GatsbyImageSharpFixed` to return a fixed width and height image. You could also use the fragment `GatsbyImageSharpFluid` which produces scalable images that fill their container instead of fitting specific dimensions. In `gatsby-image`, _fluid_ images are meant for images that don’t have a finite size depending on the screen, where as other images are _fixed_. +### 画像のフラグメント -The query will return a data object including the processed image in a format usable by the `gatsby-image` component. The returned result will be automatically passed into the component and attached to the `data` prop. You can then display the image using JSX to automatically output responsive, highly performant HTML. +このクエリについてもう1つ注意すべき点は、固定されたwidthとheightを持つ画像を返すフラグメント　`GatsbyImageSharpFluid` の使い方についてです。この特定の大きさに合わせる方法の代わりに、コンテナを埋めるスケーラブルな画像を作るフラグメント　`GatsbyImageSharpFluid` を使う事が出来ます。`gatsby-image` では、_fluid_ な画像は、_fixed_ な画像が固定されているのに対して、画面に応じたサイズを持っていない画像を意味します。 -To display the image, start by importing the component provided by `gatsby-image`. +クエリは、`gatsby-image` コンポーネントで利用可能な形式に処理された画像を含むデータオブジェクトを返します。その結果は自動的にコンポーネントに渡され、`data` propに添付されます。それから、JSXを用いて画像を表示し、レスポンシブで高いパフォーマンスのHTMLを自動的に出力します。 + +画像を表示するためには　まず、`gatsby-image` が提供するコンポーネントをインポートします。 ```jsx import Img from "gatsby-image" ``` -Now you can use it. Note that the key for pointing to the image corresponds to the way in which the image was processed. In this example that is `fixed`. +これで使用する事が出来ます。画像のキーは、画像が処理された方法と一致させることに注意してください。この例では `fixed`を用いています。 + ```jsx ``` -Here is the query and usage all put together: +こちらはクエリと使用方法を全てまとめたものです: ```jsx:title=src/pages/index.js import React from "react" From d9a789c3ec98f6cb66711183c1023d8d22193c85 Mon Sep 17 00:00:00 2001 From: Youhei Nozaki Date: Tue, 3 Mar 2020 23:56:41 +0900 Subject: [PATCH 02/12] =?UTF-8?q?docs/tutorial/gatsby-image-tutorial/index?= =?UTF-8?q?.md=E3=81=AE=E7=BF=BB=E8=A8=B3=E3=82=92=E5=AE=8C=E4=BA=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/tutorial/gatsby-image-tutorial/index.md | 132 +++++++++---------- 1 file changed, 64 insertions(+), 68 deletions(-) diff --git a/docs/tutorial/gatsby-image-tutorial/index.md b/docs/tutorial/gatsby-image-tutorial/index.md index 5282e1de6..57ad50abc 100644 --- a/docs/tutorial/gatsby-image-tutorial/index.md +++ b/docs/tutorial/gatsby-image-tutorial/index.md @@ -4,64 +4,60 @@ ##このチュートリアルには何が含まれていますか？ -このチュートリアルを終わりには、以下のことが出来るようになります： +このチュートリアルを終わりには、以下のことができるようになります： -- レスポンシブ画像に対応した　`gatsby-image` の使い方について学ぶ。 -- GraphQLを用いて単一の画像を照会する。 -- YAMLファイルを通して複数の画像を取得する。 +- レスポンシブ画像に対応した `gatsby-image` の使い方について学ぶ。 +- GraphQL を用いて単一の画像を照会する。 +- YAML ファイルを通して複数の画像を取得する。 - 一般的なエラーのトラブルシューティングの方法について学ぶ。 ## 前提条件 -このチュートリアルはすでにGatsbyのプロジェクトが実行されていて、そのページにレンダリングしたい画像があることを前提としています。Gatsbyサイトをセットアップする方法は [メインチュートリアル](/tutorial/) または [クイックスタート](/docs/quick-start/) をご覧ください。 +このチュートリアルはすでに Gatsby のプロジェクトが実行されていて、そのページにレンダリングしたい画像があることを前提としています。Gatsby サイトをセットアップする方法は [メインチュートリアル](/tutorial/) または [クイックスタート](/docs/quick-start/) をご覧ください。 -このチュートリアルでは、`gatsby-image` 、GraphQLやGatsbyのデータレイヤーを用いてレスポンシブ画像を最適化するReactコンポーネントをセットアップする方法を学びます。 +このチュートリアルでは、`gatsby-image` 、GraphQL や Gatsby のデータレイヤーを用いてレスポンシブ画像を最適化する React コンポーネントをセットアップする方法を学びます。 -> _ノート: このチュートリアルでは、YAMLファイルに保存されている静的なコンテンツを使用していますが、同様の方法がマークダウンファイルでも使用することが出来ます。_ +> _ノート: このチュートリアルでは、YAML ファイルに保存されている静的なコンテンツを使用していますが、同様の方法をマークダウンファイルでも使用できます。_ ## 入門 -Gatsbyの画像最適化は信じられないパフォーマンスの `gatsby-image` と呼ばれるプラグインによって提供されます。 +Gatsby の画像最適化は信じられないほど良いパフォーマンスを発揮する `gatsby-image` と呼ばれるプラグインによって提供されます。 ### ステップ 1 -npmを使って、 `gatsby-image` プラグインとその依存関係にあるプラグインをインストールします。 - +npm を使って、 `gatsby-image` プラグインとそれと依存関係にあるプラグインをインストールします。 ```bash npm install gatsby-image gatsby-transformer-sharp gatsby-plugin-sharp ``` -### Step 2 -### ステップ　2 +### ステップ 2 -新たにインストールしたプラグインを　`gatsby-config.js` ファイルに追加します。ファイルは最終的に以下のようになります（すでに使用されている他のプラグインは簡単にするために省略しています）。 +新たにインストールしたプラグインを `gatsby-config.js` ファイルに追加します。ファイルは最終的に以下のようになります（すでに使用されている他のプラグインは省略しています）。 -> ＿ノート; `gatsby-image` はインストールしたら、`gatsby-config.js` に追加する必要はありません。 +> ＿ノート; `gatsby-image` はインストール後、`gatsby-config.js` に追加する必要はありません。 ```javascript:title=gatsby-config.js plugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`] ``` -## Gatsby-image configuration ## Gatsby-image の構成 これで、`gatsby-image` を使えるように設定されました。 -### ステップ　3 +### ステップ 3 画像ファイルを置く場所を決めてください。この例では、`src/data` に置いてあります。 -もし、プロジェクトがこのディレクトリ内のコンテンツを表示させる設定をまだ行なっていない場合は、次の2つを実行してください: - +もし、プロジェクトがこのディレクトリー内のコンテンツを表示させる設定をまだ行なっていない場合は、次の 2 つを実行してください。 -1. `gatsby-source-filesystem` をインストールしてください。　ノート: プロジェクトを　`gatsby new ` を使用して作成した場合は、この最初の手順はすでにデフォルトスターターを経由して実行されています。 +1. `gatsby-source-filesystem` をインストールしてください。ノート: プロジェクトを `gatsby new ` を使用して作成した場合は、この最初の手順はすでにデフォルトスターターを経由して実行されています。 ```bash npm install gatsby-source-filesystem ``` -2. 次に　`gatsby-config.js` で正しくフォルダの指定がされているかを確認してください。この例では、以下のようになります: +2. 次に `gatsby-config.js` でただしくフォルダーの指定がされているかを確認してください。この例では、以下のようになります: ```javascript:title=gatsby-config.js plugins: [ @@ -71,15 +67,15 @@ plugins: [ ] ``` -これで、 `gatsby-image` を使って作業を始める準備が整いました! +これで、 `gatsby-image` を使って作業を始める準備が整いました！ ## ステップ 4 次のステップはあなたが達成しようとしていることによって異なります。 -## 単一画像のデータのクエリ +## 単一画像のデータのクエリー -画像ファイルを直接クエリするために　`graphql` を使用します。画像ファイルを相対パスに含めることで、 `gatsby-image` によってそのファイルを処理する方法を指定することが出来ます。 +画像ファイルを直接クエリーするために `graphql` を使用します。画像ファイルを相対パスに含めることで、 `gatsby-image` によってそのファイルを処理する方法を指定できます。 ```jsx:title=src/pages/index.js export const query = graphql` @@ -97,25 +93,23 @@ export const query = graphql` ここで注意することがいくつかあります。 +### 画像の相対パスと `gatsby-config.js` -### 相対画像パスと　`gatsby-config.js` - -あなたは相対パスと聞いて、コードが置かれているファイルに対応する相対パス（この場合はindex.js）であると予想するかもしれません。しかし、それは違います。相対パスは実際には `gatsby-source-filesystem` に配置したコードの設定に基づき、ここでは `src/data` を指します。 +相対パスと聞いて、コードが置かれているファイルに対応する相対パス（この場合は index.js）であると予想するかもしれません。しかし、それは違います。相対パスは実際には `gatsby-source-filesystem` に配置したコードの設定に基づき、ここでは `src/data` を指します。 ### 画像のフラグメント -このクエリについてもう1つ注意すべき点は、固定されたwidthとheightを持つ画像を返すフラグメント　`GatsbyImageSharpFluid` の使い方についてです。この特定の大きさに合わせる方法の代わりに、コンテナを埋めるスケーラブルな画像を作るフラグメント　`GatsbyImageSharpFluid` を使う事が出来ます。`gatsby-image` では、_fluid_ な画像は、_fixed_ な画像が固定されているのに対して、画面に応じたサイズを持っていない画像を意味します。 +このクエリーについてもう 1 つ注意すべき点は、固定された幅と高さを持つ画像を返すフラグメント `GatsbyImageSharpFluid` の使い方です。この特定の大きさに合わせる方法の代わりに、コンテナを埋めるスケーラブルな画像を作るフラグメント `GatsbyImageSharpFluid` を使う事ができます。`gatsby-image` では、_fluid_ な画像は、_fixed_ な画像が固定されているのに対して、画面に応じたサイズを持っていない画像を意味します。 -クエリは、`gatsby-image` コンポーネントで利用可能な形式に処理された画像を含むデータオブジェクトを返します。その結果は自動的にコンポーネントに渡され、`data` propに添付されます。それから、JSXを用いて画像を表示し、レスポンシブで高いパフォーマンスのHTMLを自動的に出力します。 +クエリーは、`gatsby-image` コンポーネントで利用可能な形式に処理された画像を含むデータオブジェクトを返します。その結果は自動的にコンポーネントに渡され、`data` prop に添付されます。それから、JSX を用いて画像を表示し、レスポンシブで高いパフォーマンスの HTML を自動的に出力します。 -画像を表示するためには　まず、`gatsby-image` が提供するコンポーネントをインポートします。 +画像を表示するためにはまず、`gatsby-image` が提供するコンポーネントをインポートします。 ```jsx import Img from "gatsby-image" ``` -これで使用する事が出来ます。画像のキーは、画像が処理された方法と一致させることに注意してください。この例では `fixed`を用いています。 - +これで使用できます。画像のキーは、画像が処理された方法と一致させることに注意してください。この例では `fixed` を用いています。 ```jsx ``` -こちらはクエリと使用方法を全てまとめたものです: +こちらはクエリーと使用方法を全てまとめたものです。 ```jsx:title=src/pages/index.js import React from "react" @@ -159,11 +153,11 @@ export const query = graphql` export default HomePage ``` -## Querying for multiple images from YAML data +## YAML から複数の画像をクエリーする方法 -Another way to source images is through YAML (or Markdown). This example uses the `gatsby-transformer-yaml` plugin to query the YAML files. More information about that plugin can be found in the [Gatsby plugin library](/packages/gatsby-transformer-yaml/?=gatsby-transformer-yaml). +画像を参照する別の方法には YAML（やマークダウン）を使う方法があります。この例では、YAML ファイルをクエリーする `gatsby-transformer-yaml` プラグインを使用します。このプラグインについて詳しく知りたい場合は [Gatsby プラグインライブラリー] をご覧ください。 -Here's an example of a query from a list of conferences in a YAML file with an image for each one: +こちらは YAML ファイルにあるカンファレンスとそれぞれの画像のリストのクエリーの例です。 ```graphql { @@ -185,19 +179,21 @@ Here's an example of a query from a list of conferences in a YAML file with an i } ``` -In this case the query starts with `allSpeakingYaml` to direct `graphql` to look for this data in the `speaking.yaml` file in your `src/data` folder referenced in `gatsby-config.js`. If you want to query a file named `blog.yaml`, for example, you'd start the query with `allBlogYaml`. +この場合、クエリーは `gatsby-config.js` に参照されている `src/data` ファイルにある `speakeing.yaml` のデータを探して `graphql` を含めるために `allSpeakingYaml` で開始しています。 ## Rendering images sourced from YAML -In order to reference your images in YAML make sure that the relative paths are accurate. The path to each image should be relative to the location of the `.yaml` file pointing to it. And all of these files need to be in a directory visible to the `gatsby-source-filesystem` plugin configured in `gatsby-config.js`. +## YAML をソースとする画像のレンダリング + +YAML データの画像を参照するために、相対パスが正確であるかどうかを確認してください。それぞれの画像のパスは `yaml` ファイルが示している位置と相対的になっているべきです。そして、それらのファイル全ては `gatsby-config-js` に設定済みの `gatsby-source-filesystem` のディレクトリーの中にある必要があります。 -The inside of the YAML file would look something like this: +YAML ファイルの中はこのようになっているでしょう。 ```yaml - image: speaking/kcdc.jpg ``` -Now, you can create the query. Similar to the single use example above, you can use `gatsby-image` features inside the query. When the query runs, the relative path will point to the location of the image file and the resulting query processes the file as an image for display. +これで、クエリーを作成できます。前述した単一の画像の例と同じように、あなたはクエリーの中の `gatsby-image` の機能を使えます。クエリーを実行すると、相対パスは画像ファイルの位置を示し、結果としてクエリーは表示するための画像としてファイルを処理します。 ```graphql { @@ -217,7 +213,7 @@ Now, you can create the query. Similar to the single use example above, you can } ``` -Since the images are stored as part of an array, they can be accessed using the JavaScript `map` function in JSX. As with the single image example, the actual processed image is at the `...GatsbyImageSharpFluid` level in the returned data structure. +画像が配列の一部として保存されるので、JSX の中で JavaScript の `map` 関数を使ってアクセスできます。 ```jsx ``` -## Using Static Query +## 静的クエリーを使う -If your query is part of a reusable component you may want to use a Static Query hook. The code necessary to do this is almost the same as the single image use case above. +もしあなたのクエリーが再利用可能なコンポーネントである場合、静的なクエリーフックを使うことができます。これを行うために必要なコードは前述した単一画像の使用例とほとんど同じです。 ```jsx:title=src/components/header-image.js export default () => { @@ -249,15 +245,15 @@ export default () => { } ``` -Instead of a query constant and data that references the result like in the first section above, you can put the `useStaticQuery` hook directly in the JSX code and then reference it in the `Img` component. Note that the query language didn’t change and neither did the `Img` tag syntax; the only change was the location of the query and the usage of the `useStaticQuery` function to wrap it. +上記の最初のセクションのように結果を参照するクエリー定数とデータの代わりに、JSX のコードに直接 `useStaticQuery` フックを置くことで `Img` コンポーネントの結果を参照できます。クエリー言語は変更せずに `Img` タグの構文でもないことに注意してください。唯一の変更はクエリーの位置とクエリーをラップする関数 `useStaticQuery` を使用していることです。 -## Multiple queries and aliasing +## 複数のクエリーとエイリアス -The last use case you may come across is how to handle a situation where you have multiple queries in the same file/page. +あなたが出くわすかもしれない最後のユースケースは、同じファイル/ページに複数のクエリーがある状況を処理する方法です。 -This example is attempting to query for all the data in `speaking.yaml` and the direct file query in the first example. In order to do this you want to use aliasing in GraphQL. +この例では、最初の例の `speaking.yaml` の全てのデータとダイレクトファイルのクエリーをクエリーすることを試みます。これを行うためには GraphQL のエイリアスを使います。 -The first thing to know is that an alias is assigning a name to a query. The second thing to know is that aliases are optional, but they can make your life easier! Below is an example. +最初に知っておくべきことはエイリアスがクエリーに名前を割り当てているということです。2 つ目にエイリアスはオプションですが、あなたの人生を楽にするということです。以下に例を示します。 ```graphql talks: allSpeakingYaml { @@ -276,7 +272,7 @@ talks: allSpeakingYaml { } ``` -When you do that, you’ve changed the reference to the query object available in your JSX code. While it was previously referenced as this: +これを行うと、JSX コードの再利用可能なクエリーオブジェクトへの参照が変化します。以前はこのように参照されていました。 ```jsx { @@ -286,7 +282,7 @@ When you do that, you’ve changed the reference to the query object available i } ``` -Giving it an alias does not add a level of complexity to the response object, it just replaces it. So you end up with the same structure, referenced like this (note the alias `talks` in place of the longer `allSpeakingYaml`): +エイリアスを与えてもオブジェクトのレスポンスへの複雑さのレベルは追加されず、単に置き換わるだけです。このように参照された同じ構成になります（エイリアスは `allSpeakingYaml` ではなく、 `talks` に置き換わっていることに注意してください）。 ```jsx { @@ -296,17 +292,17 @@ Giving it an alias does not add a level of complexity to the response object, it } ``` -The top-level object name of `data` is implicit. This is important because when you conduct multiple queries as part of a single component, Gatsby still passes the entire result to the component. +トップレベルにある `data`というオブジェクトは暗黙の値です。これは単一のコンポーネントの一部として複数のクエリーを実行するとき、Gatsby は結果全体をコンポーネントに渡すため重要です。 -Here's an example of data flowing into a component: +コンポーネントのデータの流れの例を以下に示します。 ```jsx const SpeakingPage = ({ data }) => {} ``` -Everything else gets referenced from that top-level return name. +その他の全てはトップレベルの戻り値から参照されます。 -With that understanding, you can combine two queries referencing images and use aliasing to distinguish between them. +これを理解すると、あなたは画像を参照する 2 つのクエリーを組み合わせたり、エイリアスを利用してそれらを区別できます。 ```graphql { @@ -333,7 +329,7 @@ With that understanding, you can combine two queries referencing images and use } ``` -Notice that this example uses aliasing for one query and not the other. This is allowed; there is no requirement that all your queries use aliasing. In this case, the JSX would look like this to access the `speaking.yaml` content. +この例では一方のクエリーではエイリアスを使用し、他のクエリーでは使用していないということに注意してください。これは許可されています。全てのクエリーでエイリアスを使用する必要はありません。この場合、JSX は `speaking.yaml` のコンテンツにアクセスするため、このように見えます。 ```jsx { @@ -343,38 +339,38 @@ Notice that this example uses aliasing for one query and not the other. This is } ``` -And then like this to access the image using the alias name `banner`. +そしてこのように `banner` というエイリアスを使って画像にアクセスします。 ```jsx ``` -These examples should handle a fair number of use cases. A couple bonus things: +これらの例はかなりの数のユースケースを処理する必要があります。以下はいつくかのボーナスです： -## Aspect ratio +## アスペクトレシオ -`gatsby-image` has a feature that gives you the ability to set an aspect ratio to constrain image proportions. This can be used for fixed or fluid processed images; it doesn't matter. +`gatsby-image` はアスペクトレシオを設定し、画像の比率を制限する機能を持っています。これは fixed や fluid に関わらず、処理された画像に使用できます。 ```jsx ``` -This example uses the `sizes` option on the `Img` component to specify the `aspectRatio` option along with the fluid image data. This processing is made possible by `gatsby-plugin-sharp`. +この例では fluid の画像データとともに `aspectRatio` オプションを `Img` コンポーネントに指定して `sizes` オプションを使用しています。この処理は `gatsby-plugin-sharp` が可能にしています。 -## Bonus Error +## ボーナスエラー -Now for errors to watch out for. If you change your image processing from `fixed` to `fluid` you may see this error. +エラーに気をつけてください。もし画像処理を `fixed` から `fluid` に変更したら、このようなエラーが表示されるかもしれません。 ![In image cache error message.](./ErrorMessage.png) -Despite its appearance, solving this doesn't actually require flushing any kind of cache. In reality, it has to do with incompatible references. You likely triggered it because you changed the query to process the image as `fluid` but the JSX key was still set to `fixed`, or vice versa. +見た目に関わらず、これを解決するためには実際にキャッシュをフラッシュする必要はありません。実際には、互換性のない参照に関係しています。これはおそらくクエリーの画像の処理を `fluid` に変更したが 、JSX のキーは `fixed` にセットされたまま、もしくはその逆だからです。 -## The end +## 最後に -So that's it. This post included a number of different possible use cases, so don't feel as if you need to explore them all. Pick the examples and tips that apply to your implementation. +以上です。この投稿には多くの異なるユースケースが含まれるため、これらすべてを調査する必要があるとは思わないでください。実際に該当する例とヒントを選択してください。 -## Other resources +## その他の資料 -- [Gatsby Image API docs](/docs/gatsby-image/) -- [Using Gatsby Image](/docs/using-gatsby-image/) -- [Other image and media techniques in Gatsby](/docs/images-and-files/) +- [Gatsby Image API ドキュメント](/docs/gatsby-image/) +- [Gatsby Image の使用](/docs/using-gatsby-image/) +- [Gatsby のその他の画像とメディアのテクニック](/docs/images-and-files/) From 29ea433741b7ea7ac83633c9452b4064334ff3ee Mon Sep 17 00:00:00 2001 From: BSKY Date: Fri, 6 Mar 2020 00:41:39 +0900 Subject: [PATCH 03/12] Apply suggestions from code review Co-Authored-By: Yasuaki Uechi --- docs/tutorial/gatsby-image-tutorial/index.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/tutorial/gatsby-image-tutorial/index.md b/docs/tutorial/gatsby-image-tutorial/index.md index 57ad50abc..1a56db2d1 100644 --- a/docs/tutorial/gatsby-image-tutorial/index.md +++ b/docs/tutorial/gatsby-image-tutorial/index.md @@ -1,8 +1,8 @@ --- -タイトル:　Gatsby-Image をサイトで使う +title: Gatsby-Image をサイトで使う --- -##このチュートリアルには何が含まれていますか？ +## このチュートリアルには何が含まれていますか？ このチュートリアルを終わりには、以下のことができるようになります： @@ -13,7 +13,7 @@ ## 前提条件 -このチュートリアルはすでに Gatsby のプロジェクトが実行されていて、そのページにレンダリングしたい画像があることを前提としています。Gatsby サイトをセットアップする方法は [メインチュートリアル](/tutorial/) または [クイックスタート](/docs/quick-start/) をご覧ください。 +このチュートリアルはすでに Gatsby のプロジェクトが実行されていて、そのページにレンダリングしたい画像があることを前提としています。Gatsby サイトをセットアップする方法は[メインチュートリアル](/tutorial/)または[クイックスタート](/docs/quick-start/)をご覧ください。 このチュートリアルでは、`gatsby-image` 、GraphQL や Gatsby のデータレイヤーを用いてレスポンシブ画像を最適化する React コンポーネントをセットアップする方法を学びます。 @@ -35,7 +35,7 @@ npm install gatsby-image gatsby-transformer-sharp gatsby-plugin-sharp 新たにインストールしたプラグインを `gatsby-config.js` ファイルに追加します。ファイルは最終的に以下のようになります（すでに使用されている他のプラグインは省略しています）。 -> ＿ノート; `gatsby-image` はインストール後、`gatsby-config.js` に追加する必要はありません。 +> _ノート: `gatsby-image` はインストール後、`gatsby-config.js` に追加する必要はありません。_ ```javascript:title=gatsby-config.js plugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`] @@ -155,7 +155,7 @@ export default HomePage ## YAML から複数の画像をクエリーする方法 -画像を参照する別の方法には YAML（やマークダウン）を使う方法があります。この例では、YAML ファイルをクエリーする `gatsby-transformer-yaml` プラグインを使用します。このプラグインについて詳しく知りたい場合は [Gatsby プラグインライブラリー] をご覧ください。 +画像を参照する別の方法には YAML（やマークダウン）を使う方法があります。この例では、YAML ファイルをクエリーする `gatsby-transformer-yaml` プラグインを使用します。このプラグインについて詳しく知りたい場合は [Gatsby プラグインライブラリー]をご覧ください。 こちらは YAML ファイルにあるカンファレンスとそれぞれの画像のリストのクエリーの例です。 @@ -282,7 +282,7 @@ talks: allSpeakingYaml { } ``` -エイリアスを与えてもオブジェクトのレスポンスへの複雑さのレベルは追加されず、単に置き換わるだけです。このように参照された同じ構成になります（エイリアスは `allSpeakingYaml` ではなく、 `talks` に置き換わっていることに注意してください）。 +エイリアスを与えてもオブジェクトのレスポンスへの複雑さのレベルは追加されず、単に置き換わるだけです。このように参照された同じ構成になります（エイリアスは `allSpeakingYaml` ではなく、`talks` に置き換わっていることに注意してください）。 ```jsx { @@ -347,9 +347,9 @@ const SpeakingPage = ({ data }) => {} これらの例はかなりの数のユースケースを処理する必要があります。以下はいつくかのボーナスです： -## アスペクトレシオ +## アスペクト比 -`gatsby-image` はアスペクトレシオを設定し、画像の比率を制限する機能を持っています。これは fixed や fluid に関わらず、処理された画像に使用できます。 +`gatsby-image` はアスペクト比を設定し、画像の比率を制限する機能を持っています。これは fixed や fluid に関わらず、処理された画像に使用できます。 ```jsx @@ -363,7 +363,7 @@ const SpeakingPage = ({ data }) => {} ![In image cache error message.](./ErrorMessage.png) -見た目に関わらず、これを解決するためには実際にキャッシュをフラッシュする必要はありません。実際には、互換性のない参照に関係しています。これはおそらくクエリーの画像の処理を `fluid` に変更したが 、JSX のキーは `fixed` にセットされたまま、もしくはその逆だからです。 +見た目に関わらず、これを解決するためには実際にキャッシュを削除する必要はありません。実際には、互換性のない参照に関係しています。これはおそらくクエリーの画像の処理を `fluid` に変更したが 、JSX のキーは `fixed` にセットされたまま、もしくはその逆だからです。 ## 最後に From f262397742028e0d29de8c7f0cd14513f0e6694f Mon Sep 17 00:00:00 2001 From: ryu-sou <47715432+YouheiNozaki@users.noreply.github.com> Date: Sat, 7 Mar 2020 18:35:12 +0900 Subject: [PATCH 04/12] Update docs/tutorial/gatsby-image-tutorial/index.md --- docs/tutorial/gatsby-image-tutorial/index.md | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/tutorial/gatsby-image-tutorial/index.md b/docs/tutorial/gatsby-image-tutorial/index.md index 1a56db2d1..c4ed64def 100644 --- a/docs/tutorial/gatsby-image-tutorial/index.md +++ b/docs/tutorial/gatsby-image-tutorial/index.md @@ -181,7 +181,6 @@ export default HomePage この場合、クエリーは `gatsby-config.js` に参照されている `src/data` ファイルにある `speakeing.yaml` のデータを探して `graphql` を含めるために `allSpeakingYaml` で開始しています。 -## Rendering images sourced from YAML ## YAML をソースとする画像のレンダリング From 645562f12b22f5d356dae9e6730f15ec95168f60 Mon Sep 17 00:00:00 2001 From: ryu-sou <47715432+YouheiNozaki@users.noreply.github.com> Date: Sat, 7 Mar 2020 18:37:51 +0900 Subject: [PATCH 05/12] Update docs/tutorial/gatsby-image-tutorial/index.md --- docs/tutorial/gatsby-image-tutorial/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/gatsby-image-tutorial/index.md b/docs/tutorial/gatsby-image-tutorial/index.md index c4ed64def..e6f7f58a5 100644 --- a/docs/tutorial/gatsby-image-tutorial/index.md +++ b/docs/tutorial/gatsby-image-tutorial/index.md @@ -360,7 +360,7 @@ const SpeakingPage = ({ data }) => {} エラーに気をつけてください。もし画像処理を `fixed` から `fluid` に変更したら、このようなエラーが表示されるかもしれません。 -![In image cache error message.](./ErrorMessage.png) +![画像キャッシュエラーメッセージ](./ErrorMessage.png) 見た目に関わらず、これを解決するためには実際にキャッシュを削除する必要はありません。実際には、互換性のない参照に関係しています。これはおそらくクエリーの画像の処理を `fluid` に変更したが 、JSX のキーは `fixed` にセットされたまま、もしくはその逆だからです。 From c3962487140ea5cd7d84b93d1988c47cf6779392 Mon Sep 17 00:00:00 2001 From: ryu-sou <47715432+YouheiNozaki@users.noreply.github.com> Date: Sun, 8 Mar 2020 14:23:24 +0900 Subject: [PATCH 06/12] Update docs/tutorial/gatsby-image-tutorial/index.md Co-Authored-By: Jesse Katsumata --- docs/tutorial/gatsby-image-tutorial/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/gatsby-image-tutorial/index.md b/docs/tutorial/gatsby-image-tutorial/index.md index e6f7f58a5..b8df13f5d 100644 --- a/docs/tutorial/gatsby-image-tutorial/index.md +++ b/docs/tutorial/gatsby-image-tutorial/index.md @@ -17,7 +17,7 @@ title: Gatsby-Image をサイトで使う このチュートリアルでは、`gatsby-image` 、GraphQL や Gatsby のデータレイヤーを用いてレスポンシブ画像を最適化する React コンポーネントをセットアップする方法を学びます。 -> _ノート: このチュートリアルでは、YAML ファイルに保存されている静的なコンテンツを使用していますが、同様の方法をマークダウンファイルでも使用できます。_ +> _ヒント: このチュートリアルでは、YAML ファイルに保存されている静的なコンテンツを使用していますが、同様の方法をマークダウンファイルでも使用できます。_ ## 入門 From 4b25478c0bb7d9cb0398fb8ff226af1fb0ee01a4 Mon Sep 17 00:00:00 2001 From: ryu-sou <47715432+YouheiNozaki@users.noreply.github.com> Date: Sun, 8 Mar 2020 14:23:50 +0900 Subject: [PATCH 07/12] Update docs/tutorial/gatsby-image-tutorial/index.md Co-Authored-By: Jesse Katsumata --- docs/tutorial/gatsby-image-tutorial/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/gatsby-image-tutorial/index.md b/docs/tutorial/gatsby-image-tutorial/index.md index b8df13f5d..4953d473c 100644 --- a/docs/tutorial/gatsby-image-tutorial/index.md +++ b/docs/tutorial/gatsby-image-tutorial/index.md @@ -51,7 +51,7 @@ plugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`] もし、プロジェクトがこのディレクトリー内のコンテンツを表示させる設定をまだ行なっていない場合は、次の 2 つを実行してください。 -1. `gatsby-source-filesystem` をインストールしてください。ノート: プロジェクトを `gatsby new ` を使用して作成した場合は、この最初の手順はすでにデフォルトスターターを経由して実行されています。 +1. `gatsby-source-filesystem` をインストールしてください。ヒント: プロジェクトを `gatsby new ` を使用して作成した場合は、この最初の手順はすでにデフォルトスターターを経由して実行されています。 ```bash npm install gatsby-source-filesystem From d5887394192a29ba5b6900cc853d1f4dc2955200 Mon Sep 17 00:00:00 2001 From: ryu-sou <47715432+YouheiNozaki@users.noreply.github.com> Date: Sun, 8 Mar 2020 14:24:27 +0900 Subject: [PATCH 08/12] Update docs/tutorial/gatsby-image-tutorial/index.md Co-Authored-By: Jesse Katsumata --- docs/tutorial/gatsby-image-tutorial/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/gatsby-image-tutorial/index.md b/docs/tutorial/gatsby-image-tutorial/index.md index 4953d473c..350493d72 100644 --- a/docs/tutorial/gatsby-image-tutorial/index.md +++ b/docs/tutorial/gatsby-image-tutorial/index.md @@ -35,7 +35,7 @@ npm install gatsby-image gatsby-transformer-sharp gatsby-plugin-sharp 新たにインストールしたプラグインを `gatsby-config.js` ファイルに追加します。ファイルは最終的に以下のようになります（すでに使用されている他のプラグインは省略しています）。 -> _ノート: `gatsby-image` はインストール後、`gatsby-config.js` に追加する必要はありません。_ +> _ヒント: `gatsby-image` はインストール後、`gatsby-config.js` に追加する必要はありません。_ ```javascript:title=gatsby-config.js plugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`] From b56180eb1728b880ecc791440c80bde7d91298e0 Mon Sep 17 00:00:00 2001 From: ryu-sou <47715432+YouheiNozaki@users.noreply.github.com> Date: Sun, 8 Mar 2020 14:24:36 +0900 Subject: [PATCH 09/12] Update docs/tutorial/gatsby-image-tutorial/index.md Co-Authored-By: Jesse Katsumata --- docs/tutorial/gatsby-image-tutorial/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/gatsby-image-tutorial/index.md b/docs/tutorial/gatsby-image-tutorial/index.md index 350493d72..ee11e7dbf 100644 --- a/docs/tutorial/gatsby-image-tutorial/index.md +++ b/docs/tutorial/gatsby-image-tutorial/index.md @@ -67,7 +67,7 @@ plugins: [ ] ``` -これで、 `gatsby-image` を使って作業を始める準備が整いました！ +これで、`gatsby-image` を使って作業を始める準備が整いました！ ## ステップ 4 From 6a2defb7df35582f3b8bf8025a248e49e20b7074 Mon Sep 17 00:00:00 2001 From: ryu-sou <47715432+YouheiNozaki@users.noreply.github.com> Date: Sun, 8 Mar 2020 14:24:48 +0900 Subject: [PATCH 10/12] Update docs/tutorial/gatsby-image-tutorial/index.md Co-Authored-By: Jesse Katsumata --- docs/tutorial/gatsby-image-tutorial/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/gatsby-image-tutorial/index.md b/docs/tutorial/gatsby-image-tutorial/index.md index ee11e7dbf..da5c715b0 100644 --- a/docs/tutorial/gatsby-image-tutorial/index.md +++ b/docs/tutorial/gatsby-image-tutorial/index.md @@ -75,7 +75,7 @@ plugins: [ ## 単一画像のデータのクエリー -画像ファイルを直接クエリーするために `graphql` を使用します。画像ファイルを相対パスに含めることで、 `gatsby-image` によってそのファイルを処理する方法を指定できます。 +画像ファイルを直接クエリーするために `graphql` を使用します。画像ファイルを相対パスに含めることで、`gatsby-image` によってそのファイルを処理する方法を指定できます。 ```jsx:title=src/pages/index.js export const query = graphql` From 00329673968a9bf190e99c7a1a94ea737aef12ef Mon Sep 17 00:00:00 2001 From: ryu-sou <47715432+YouheiNozaki@users.noreply.github.com> Date: Sun, 8 Mar 2020 14:25:00 +0900 Subject: [PATCH 11/12] Update docs/tutorial/gatsby-image-tutorial/index.md Co-Authored-By: Jesse Katsumata --- docs/tutorial/gatsby-image-tutorial/index.md | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/tutorial/gatsby-image-tutorial/index.md b/docs/tutorial/gatsby-image-tutorial/index.md index da5c715b0..953426b7f 100644 --- a/docs/tutorial/gatsby-image-tutorial/index.md +++ b/docs/tutorial/gatsby-image-tutorial/index.md @@ -181,7 +181,6 @@ export default HomePage この場合、クエリーは `gatsby-config.js` に参照されている `src/data` ファイルにある `speakeing.yaml` のデータを探して `graphql` を含めるために `allSpeakingYaml` で開始しています。 - ## YAML をソースとする画像のレンダリング YAML データの画像を参照するために、相対パスが正確であるかどうかを確認してください。それぞれの画像のパスは `yaml` ファイルが示している位置と相対的になっているべきです。そして、それらのファイル全ては `gatsby-config-js` に設定済みの `gatsby-source-filesystem` のディレクトリーの中にある必要があります。 From 559d1175ec24a81f37bc77777f866a0ad049dabe Mon Sep 17 00:00:00 2001 From: BSKY Date: Mon, 9 Mar 2020 20:04:01 +0900 Subject: [PATCH 12/12] Update docs/tutorial/gatsby-image-tutorial/index.md Co-Authored-By: ryu-sou <47715432+YouheiNozaki@users.noreply.github.com> --- docs/tutorial/gatsby-image-tutorial/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/gatsby-image-tutorial/index.md b/docs/tutorial/gatsby-image-tutorial/index.md index 953426b7f..85f60d059 100644 --- a/docs/tutorial/gatsby-image-tutorial/index.md +++ b/docs/tutorial/gatsby-image-tutorial/index.md @@ -211,7 +211,7 @@ YAML ファイルの中はこのようになっているでしょう。 } ``` -画像が配列の一部として保存されるので、JSX の中で JavaScript の `map` 関数を使ってアクセスできます。 +画像が配列の一部として保存されるので、JSX の中で JavaScript の `map` 関数を使ってアクセスできます。単一画像の例のように、実際に処理される画像は返されたデータ構造の `...GatsbyImageSharpFluid` のレベルにあります。 ```jsx