From ed5e35fbcb1aa21b53cd4a4a9461efca099a0eba Mon Sep 17 00:00:00 2001 From: nakajmg Date: Mon, 3 Feb 2020 17:18:03 +0900 Subject: [PATCH 1/6] translate docs/sourcing-from-graphcms --- docs/docs/sourcing-from-graphcms.md | 56 ++++++++++++++--------------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/docs/docs/sourcing-from-graphcms.md b/docs/docs/sourcing-from-graphcms.md index d06948bbd..3ae894672 100644 --- a/docs/docs/sourcing-from-graphcms.md +++ b/docs/docs/sourcing-from-graphcms.md @@ -1,41 +1,41 @@ --- -title: Sourcing from GraphCMS +title: GraphCMS からデータを取得する --- -## Headless the GraphCMS way +## GraphCMS のやり方 -[GraphCMS](https://graphcms.com?ref="gatsby-headless-docs-top") is a headless CMS that is optimized for working with GraphQL. Content structures like posts, authors, products and more are broken down into content types called "models." These models can then be queried with the familiar GraphQL syntax. +[GraphCMS](https://graphcms.com?ref="gatsby-headless-docs-top") は GraphQL で操作するのに最適化されたヘッドレス CMS です。記事、作成者、プロダクトなどのコンテンツの構造は、モデルと呼ばれるコンテンツタイプに分類されます。これらのモデルはおなじみの GraphQL を使ってクエリーできます。 -One of the benefits of GraphCMS when working with Gatsby is that it supports GraphQL natively which allows you to test your content queries before even starting your Gatsby project. +GraphCMS を Gatsby から使用するときの利点のひとつは、プロジェクトを開始する前にコンテンツのクエリーを試せることです。これは Gatsby が GraphQL をネイティブでサポートしているためです。 ## Getting started -In this guide you'll create a complete project capable of querying data from GraphCMS. +このガイドでは、 GraphCMS からデータをクエリーできる完全なプロジェクトを作成します。 -### Install the boilerplate +### 雛形をインストールする -To begin, let's create a Gatsby starter site. +はじめに、 Gatsby のスターターサイトを作りましょう。 ```shell gatsby new gatsby-site https://github.com/gatsbyjs/gatsby-starter-default ``` -Navigate inside of the project with `cd gatsby-site`. +`cd gatsby-site` を実行してプロジェクトのディレクトリーに移動します。 -### Add the source plugin +### ソースプラグインを追加する -Additionally, you need the the `gatsby-source-graphql` library. Because GraphCMS uses GraphQL natively, you will take advantage of Gatsby's ability to simply stitch two GraphQL APIs together, reducing the time required to transform content. There is no need to use a special gatsby-source-x-cms plugin, the GraphQL source plugin is all you need. +加えて、`gatsby-source-graphql` が必要です。 GraphCMS は GraphQL をネイティブで使用するので、 Gatsby の機能を利用してふたつの GraphQL API をつなぎ合わせるだけで、コンテンツの変換に必要な時間を短縮できます。gatsby-source-x-cms のような特別なプラグインは必要なく、`gatsby-source-graphql` があれば十分です。 -You can install this component with: +次のコマンドでインストールできます。 ```shell # Optionally with `npm install` npm install --save gatsby-source-graphql ``` -### Configure the plugin +### プラグインの設定 -The last step required before you can query your data is to configure the `gatsby-source-graphql` plugin. Open `gatsby-config.js` and add the following object to the plugins array. This example uses an open API from GraphCMS but you will most likely want to replace this with your own API and provide a fieldName that makes the most sense to your project. [Here's more information on working with GraphCMS APIs.](https://docs.graphcms.com/developers/api) +最後に、データをクエリーする前に `gatsby-source-graphql` プラグインの設定が必要です。`gatsby-config.js` を開いて plugins の配列に次のオブジェクトを追加します。この例では GraphCMS の公開 API を使っていますが、ほとんどの場合あなたのプロジェクトに合わせて API の url や fieldName を置き換えることになります。[ GraphCMS API の詳細はこちらをご覧ください。](https://docs.graphcms.com/developers/api) ```js { @@ -52,17 +52,17 @@ The last step required before you can query your data is to configure the `gatsb }, ``` -If everything works correctly, you should now have your GraphCMS data added to the Gatsby source API! +もしすべてが正常に動いていたら GraphCMS のデータが Gatsby のソース API に追加されているはずです！ -### Querying for content +### コンテンツをクエリーする -From the root of your project, run the development environment with `gatsby develop`. Once the server has started and is error free, you should be able to open the following URL in your browser: +プロジェクトのルートで `gatsby develop` を実行して開発サーバーを起動します。エラーのない状態でサーバーが起動したら、ブラウザーで次の URL を開けます。 -This will show you an interface where you can test your new content API. +このページでは新しいコンテンツ API を試すことができるインターフェイスが表示されます。 -Try running this query: +このクエリーを実行してください。 ```graphql query { @@ -78,7 +78,7 @@ query { } ``` -Again, if everything is working properly, you should see a successful response in the shape of: +もしすべてが正常に動いていたら、次のような形のレスポンスが表示されます。 ```json { @@ -106,9 +106,9 @@ Again, if everything is working properly, you should see a successful response i } ``` -### Getting content on the page +### ページでコンテンツを取得する -For the purpose of this tutorial I've removed all the layout, SEO, link or other components that comprise a page in the Gatsby starter. The components are still there and 99% of users will likely want to put them back in once they understand what's happening in the code. You are just looking at the nails for right now, but the hammers, saws and other tools are still in the toolbox. Open the index file located at `src/pages/index.js` and replace the content with this code: +このチュートリアルのために、`src/pages/index.js` から layout 、SEO 、link やページコンポーネントを含むすべてのコンポーネントを取り除きました。これらのコンポーネントは存在しており、99% のユーザーはコードの内容を理解したらこれらのコンポーネントを元に戻したいと思うことでしょう。今は釘を見ているだけですが、ハンマーやのこぎりなど、その他のツールがツールボックスに入っています。`src/pages/index.js` にあるインデックスファイルを開いて、コンテンツを次のコードに置き換えます。 ```jsx import React from "react" @@ -148,14 +148,14 @@ const IndexPage = () => ( export default IndexPage ``` -With this code, you have: +このコードで次のことができます。 -1. Added the `StaticQuery` component to a page that allows you to fetch content from the GraphQL API. -2. Fetched some simplified data from the Mountain API, namely the title and elevation. -3. Rendered the list in the StaticQuery's RenderProp called "render". +1. ページに `StaticQuery` コンポーネントを追加する。このコンポーネントは GraphQL API でコンテンツをフェッチできます。 +2. title と elevation を含む簡略化されたデータを Mountain API からフェッチする。 +3. `StaticQuery` の "render" でリストを描画する。 -## Summary +## まとめ -Hopefully you've seen how easy it is to start working with GraphCMS and Gatsby. With projects of all sizes gravitating towards the benefits of the JAM stack, the time has never been better to learn how to work with Gatsby. Adding a content API in the backend with GraphCMS provides a scalable CMS that you can start using within minutes and keep using for the life of your project. +このチュートリアルから、GraphCMS と Gatsby を使い始めるのがどれだけ簡単かを感じとってもらえることを願っています。昨今、どのようなサイズのプロジェクトも Jamstack の利点へと引き寄せられているので、 Gatsby がどのように動いているかを学ぶには最適なタイミングです。コンテンツ API のバックエンドに GraphCMS を追加することで、プロジェクトの寿命に合わせたスケーラブルな CMS を数分以内で使い始められます。 -[Check out GraphCMS today and build "fast websites", fast!](https://graphcms.com?ref="gatsby-headless-docs-bottom") +[GraphCMS を今すぐチェックして"高速な Web サイト"を高速に構築しましょう！](https://graphcms.com?ref="gatsby-headless-docs-bottom") From 3e4287d6a463bbb76d16c7b17c09cb6b7cde16de Mon Sep 17 00:00:00 2001 From: nakajmg Date: Thu, 13 Feb 2020 07:00:21 +0900 Subject: [PATCH 2/6] Update docs/docs/sourcing-from-graphcms.md Co-Authored-By: Yasuaki Uechi --- docs/docs/sourcing-from-graphcms.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/sourcing-from-graphcms.md b/docs/docs/sourcing-from-graphcms.md index 3ae894672..af92ccbf0 100644 --- a/docs/docs/sourcing-from-graphcms.md +++ b/docs/docs/sourcing-from-graphcms.md @@ -2,7 +2,7 @@ title: GraphCMS からデータを取得する --- -## GraphCMS のやり方 +## GraphCMS 流のヘッドレス CMS [GraphCMS](https://graphcms.com?ref="gatsby-headless-docs-top") は GraphQL で操作するのに最適化されたヘッドレス CMS です。記事、作成者、プロダクトなどのコンテンツの構造は、モデルと呼ばれるコンテンツタイプに分類されます。これらのモデルはおなじみの GraphQL を使ってクエリーできます。 From 38bdeb064e9afd2303badb20940467cf6ff18d83 Mon Sep 17 00:00:00 2001 From: nakajmg Date: Thu, 13 Feb 2020 07:00:40 +0900 Subject: [PATCH 3/6] Update docs/docs/sourcing-from-graphcms.md Co-Authored-By: Yasuaki Uechi --- docs/docs/sourcing-from-graphcms.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/sourcing-from-graphcms.md b/docs/docs/sourcing-from-graphcms.md index af92ccbf0..b43f49405 100644 --- a/docs/docs/sourcing-from-graphcms.md +++ b/docs/docs/sourcing-from-graphcms.md @@ -35,7 +35,7 @@ gatsby new gatsby-site https://github.com/gatsbyjs/gatsby-starter-default ### プラグインの設定 -最後に、データをクエリーする前に `gatsby-source-graphql` プラグインの設定が必要です。`gatsby-config.js` を開いて plugins の配列に次のオブジェクトを追加します。この例では GraphCMS の公開 API を使っていますが、ほとんどの場合あなたのプロジェクトに合わせて API の url や fieldName を置き換えることになります。[ GraphCMS API の詳細はこちらをご覧ください。](https://docs.graphcms.com/developers/api) +最後に、データをクエリーする前に `gatsby-source-graphql` プラグインの設定が必要です。`gatsby-config.js` を開いて plugins の配列に次のオブジェクトを追加します。この例では GraphCMS の公開 API を使っていますが、ほとんどの場合あなたのプロジェクトに合わせて API の url や fieldName を置き換えることになります。[GraphCMS API の詳細はこちらをご覧ください。](https://docs.graphcms.com/developers/api) ```js { From 2f91a3d42147b042dba690a0787ead390c9d38c4 Mon Sep 17 00:00:00 2001 From: nakajmg Date: Fri, 14 Feb 2020 09:57:52 +0900 Subject: [PATCH 4/6] Update docs/docs/sourcing-from-graphcms.md Co-Authored-By: BSKY --- docs/docs/sourcing-from-graphcms.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/sourcing-from-graphcms.md b/docs/docs/sourcing-from-graphcms.md index b43f49405..a20744b1a 100644 --- a/docs/docs/sourcing-from-graphcms.md +++ b/docs/docs/sourcing-from-graphcms.md @@ -60,7 +60,7 @@ gatsby new gatsby-site https://github.com/gatsbyjs/gatsby-starter-default -このページでは新しいコンテンツ API を試すことができるインターフェイスが表示されます。 +このページには新しいコンテンツ API を試すためのインターフェースが表示されます。 このクエリーを実行してください。 From 71d0454cbd6d55fab71c7c799827c65922e41c0c Mon Sep 17 00:00:00 2001 From: nakajmg Date: Mon, 17 Feb 2020 20:15:15 +0900 Subject: [PATCH 5/6] Update docs/docs/sourcing-from-graphcms.md Co-Authored-By: Jesse Katsumata --- docs/docs/sourcing-from-graphcms.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/sourcing-from-graphcms.md b/docs/docs/sourcing-from-graphcms.md index a20744b1a..3fc9945b6 100644 --- a/docs/docs/sourcing-from-graphcms.md +++ b/docs/docs/sourcing-from-graphcms.md @@ -14,7 +14,7 @@ GraphCMS を Gatsby から使用するときの利点のひとつは、プロジ ### 雛形をインストールする -はじめに、 Gatsby のスターターサイトを作りましょう。 +はじめに、Gatsby のスターターサイトを作りましょう。 ```shell gatsby new gatsby-site https://github.com/gatsbyjs/gatsby-starter-default From a7e0665ef1aac75717ee1f82b16c3423f96f7ea4 Mon Sep 17 00:00:00 2001 From: nakajmg Date: Mon, 17 Feb 2020 20:15:42 +0900 Subject: [PATCH 6/6] Update docs/docs/sourcing-from-graphcms.md Co-Authored-By: Jesse Katsumata --- docs/docs/sourcing-from-graphcms.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/sourcing-from-graphcms.md b/docs/docs/sourcing-from-graphcms.md index 3fc9945b6..4bbaaf43a 100644 --- a/docs/docs/sourcing-from-graphcms.md +++ b/docs/docs/sourcing-from-graphcms.md @@ -24,7 +24,7 @@ gatsby new gatsby-site https://github.com/gatsbyjs/gatsby-starter-default ### ソースプラグインを追加する -加えて、`gatsby-source-graphql` が必要です。 GraphCMS は GraphQL をネイティブで使用するので、 Gatsby の機能を利用してふたつの GraphQL API をつなぎ合わせるだけで、コンテンツの変換に必要な時間を短縮できます。gatsby-source-x-cms のような特別なプラグインは必要なく、`gatsby-source-graphql` があれば十分です。 +加えて、`gatsby-source-graphql` が必要です。GraphCMS は GraphQL をネイティブで使用するので、Gatsby の機能を利用してふたつの GraphQL API をつなぎ合わせるだけで、コンテンツの変換に必要な時間を短縮できます。gatsby-source-x-cms のような特別なプラグインは必要なく、`gatsby-source-graphql` があれば十分です。 次のコマンドでインストールできます。