From dcc19d149d109dd7dff6ab7b6d70cee6536baa6d Mon Sep 17 00:00:00 2001 From: yukapomeranian Date: Sun, 19 Jan 2020 20:49:29 +0900 Subject: [PATCH 1/3] Translate docs/tutorial/eight --- .DS_Store | Bin 0 -> 6148 bytes docs/.DS_Store | Bin 0 -> 6148 bytes docs/tutorial/.DS_Store | Bin 0 -> 8196 bytes docs/tutorial/part-eight/index.md | 162 +++++++++++++++--------------- 4 files changed, 82 insertions(+), 80 deletions(-) create mode 100644 .DS_Store create mode 100644 docs/.DS_Store create mode 100644 docs/tutorial/.DS_Store diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..bb1dfef086e1618679d628ee073afa14206b9cd6 GIT binary patch literal 6148 zcmeHK&2G~`5S~o}aZD*WAhq0lLE?~B2~_2PDupyT^uUiWq6a{!9Y=|&Ye%s|2q7pJ z-T`<6#FKF1$b;|z@a=jV#oJWs2_e|AcEA0Z&$}}_>-7>5YmB@aQJIJgB#s3W*$UzP zJe`r8Y~f_a-*FH`9XE(v)Onj0?E&q9zuN<1rE6 z*v}PQZp9mL16UOb>sE4ej>0u*pB_<@TF4LSA@B*=*}3MvE1Uv(u&JZYE5CQ1o;!{Q z^2_?o9Rz-yRI5K&E?>BGxo8-sVO}*~+Wly3Cr&bo8_w`KuRV5>zAMX5qbOLE9ru~v z9k@o5l^u^+XA7&S%a6{o0MdymQPw)z1KI=sl?V9u!9wC#mpD&Rd^(VcD*&*7W+5nxUw@#* z8-R6*^AynnVJQ`uQklGBFnM!eDINWFsXtFKr4th)<2`a@CT}QAUObp3)QQzo)VcP6 z_CVGH`LtT*=YQ+``+t_CYuW?a1OJoFgv5pG%~KQ`dwR?wR8sjs;>ixZbGpgvEcHpTHuMjbo27NUg>@NFiF?{%Fx3Bj0 z9xRs~xpjB=(sE{J#+O^aL?$MA8!1d&XpCMGtf ze1)h_$ocb!Xysp3!dequAr8EFX)xgae)2}c>pPwS&wyvZ9yba^@IDbbtSy?Y1C6-? z00X#8Hk~>>lljE~iL64v;oL5^k kC1~7nYz#h%x1mN5Q)~c3hqXm`ApS+b(BK=-z&~Z+Cu5+{aR2}S literal 0 HcmV?d00001 diff --git a/docs/tutorial/.DS_Store b/docs/tutorial/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..4938147857b38c846517662fc5882391493dbfd7 GIT binary patch literal 8196 zcmeHM&2G~`5FRH1oFGJ0KyBe-ijX)oD1oXRP^Bo8LvKhyZ~)XgiQ8Cm>|!TP+Ypos z?*P03;z>Ah zocm16#WRbb2IPtQj{m3MnEH=5zq)|1pWsEaAtEek2&|{Q+?G4Xap`K z0-PT#bf)!~P9znn0~b*OfEF+<8pfytgp3u_dQ2yh3Q_2k)q@d>8gYqXNO3&3m>skp z(}|=~oD3;WMr_%LD-=UmhnywY$*4=JuNnc3z$^k>yU(Lu@8Hi()bADC4bTG$@q{b- zh#pdpIvZZlZh1iqk{oPL(I5N~4I`r4;AOckIrtL5Uj*8inSL3V)taUATT165wO~J> z9jZX518pAkZqoto+wds@O?jL2(wI+aya9~^=kM%gTpXGh-XNtc>yRa0(b_Fsn zY<8)i#4W#e7Ma#C+KqR_kJhf|M*V8_myydCE?vH2nkBPzt@N(h4TjCW-5*2^JAA`; zFYJD|6^~yAfp;{vTd!PaxLLmWEb#lb>pP(kb~_GO-oAGIPB3f)1HTgqJx%$*G>c|& zv%D}GRjSKYt-3N^wnnwbPga(#)zwGianYQ=Ut8PQ>Kz=8K8!zp!NSmt_&lNO^8V=h z6{Adm_L`yZ1^x~TqZbtrw*lfFIVlLggG&vNq(p#i7$zkO9F(erso3DpYbgsN1V1Yw zsQMk@)xsz8lQxJ$OqEe>L|Dgul3xUn%CFksU=Lv<<(CK-RYtYZry&I?8yp%czlzi$ z^oMB)5dx~j5|H9_6(NW?@l-Gp2*;thgQqrly7V5QKa(_$4I932pEO+=6VAR z)89gAUaqw*^euF5%r}u#h~Og1aZpi?gC70E5Mv9hEK`r^L{iM4{re9A`uxv0L-qN8 H!Os7`z#nbD literal 0 HcmV?d00001 diff --git a/docs/tutorial/part-eight/index.md b/docs/tutorial/part-eight/index.md index 33b897737..c0e64aefc 100644 --- a/docs/tutorial/part-eight/index.md +++ b/docs/tutorial/part-eight/index.md @@ -1,94 +1,95 @@ --- -title: Preparing a Site to Go Live +title: Preparing a Site to Go Live サイトを公開する準備 typora-copy-images-to: ./ disableTableOfContents: true --- -Wow! You've come a long way! You've learned how to: +ああ！長い道のりでしたね！あなたは以下の内容を学びました。 -- create new Gatsby sites -- create pages and components -- style components -- add plugins to a site -- source & transform data +- 新しい Gatsby サイトの作成 +- ページとコンポーネントの作成 +- スタイルコンポーネントについて +- サイトにプラグインを追加 +- ソースと変換データ - use GraphQL to query data for pages -- programmatically create pages from your data +- GraphQL をページ用データを照会するために使うこと +- データからプログラム的にページを作成すること -In this final section, you're going to walk through some common steps for preparing a site to go live by introducing a powerful site diagnostic tool called [Lighthouse](https://developers.google.com/web/tools/lighthouse/). Along the way, we'll introduce a few more plugins you'll often want to use in your Gatsby sites. +この最終章では、 [Lighthouse](https://developers.google.com/web/tools/lighthouse/) と呼ばれる強力なサイト公開ツールを導入することで、サイトの公開準備の一般的な手順をいくつか説明します。途中で、Gatsby サイトでよく使用するプラグインをいくつか紹介します。 -## Audit with Lighthouse +## Lighthouse による検証 -Quoting from the [Lighthouse website](https://developers.google.com/web/tools/lighthouse/): +[Lighthouse web サイト](https://developers.google.com/web/tools/lighthouse/)からの引用。 -> Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps (PWAs), and more. +> Lighthouse は、Web ページの品質を改善するためのオープンソースの自動化ツールです。パブリックまたは認証を必要とする任意の Web ページに対して実施できます。パフォーマンス、アクセシビリティ、プログレッシブ Web アプリ（PWA）などを検証します。 -Lighthouse is included in Chrome DevTools. Running its audit -- and then addressing the errors it finds and implementing the improvements it suggests -- is a great way to prepare your site to go live. It helps give you confidence that your site is as fast and accessible as possible. +Lighthouse は Chrome DevTools に含まれています。検証を実施し、検出されたエラーに対処し、提案された改善を実装することは、サイトを運用するための優れた方法です。これにより、サイトが可能な限り高速でアクセスしやすいという自信が得られます。 -Try it out! +やってみましょう！ -First, you need to create a production build of your Gatsby site. The Gatsby development server is optimized for making development fast; But the site that it generates, while closely resembling a production version of the site, isn't as optimized. +まず、 Gatsby サイトのプロダクションビルドを作成する必要があります。Gatsby 開発用サーバーは、開発を高速化するために最適化されています。しかし、それが生成するサイトは、サイトのプロダクションバージョンに非常に似ていますが、最適化されていません。 -### ✋ Create a production build +### ✋ プロダクション用ビルドを作成する -1. Stop the development server (if it's still running) and run the following command: +1. 開発サーバーを停止し（実行中の場合）、次のコマンドを実行します: ```shell gatsby build ``` -> 💡 As you learned in [part 1](/tutorial/part-one/), this does a production build of your site and outputs the built static files into the `public` directory. +> 💡 [パート 1](/tutorial/part-one/)で学習したように、これによりサイトのプロダクション用ビルドが実行され、ビルドされた静的ファイルが `public` ディレクトリに出力されます。 -2. View the production site locally. Run: +2. プロダクションサイトをローカルで表示します。実行: ```shell gatsby serve ``` -Once this starts, you can view your site at [`localhost:9000`](http://localhost:9000). +これが開始されると、[`localhost:9000`](http://localhost:9000) でサイトを表示できます。 -### Run a Lighthouse audit +### Lighthouse の監査を実行する -Now you're going to run your first Lighthouse test. +次に、Lighthouse の最初の検証を実施してみましょう。 -1. If you haven't already done so, open the site in Chrome Incognito Mode so no extensions interfere with the test. Then, open up the Chrome DevTools. +1. まだ行っていない場合は、Chrome シークレットモードでサイトを開き、拡張機能が検証へ干渉しないようにします。そして、Chrome DevTools を開きます。 -2. Click on the "Audits" tab where you'll see a screen that looks like: +2. "Audit" タブをクリックすると、次のような画面が表示されます。 ![Lighthouse audit start](./lighthouse-audit.png) -3. Click "Perform an audit..." (All available audit types should be selected by default). Then click "Run audit". (It'll then take a minute or so to run the audit). Once the audit is complete, you should see results that look like this: +3. "Perform an audit..." をクリックします（デフォルトでは、使用可能なすべての検証タイプを選択する必要があります）。次に、"Run audit" をクリックします。（検証の実行には 1 分ほどかかります）。検証が完了すると、次のような結果が表示されます。 ![Lighthouse audit results](./lighthouse-audit-results.png) -As you can see, Gatsby's performance is excellent out of the box but you're missing some things for PWA, Accessibility, Best Practices, and SEO that will improve your scores (and in the process make your site much more friendly to visitors and search engines). +ご覧のとおり、Gatsby のパフォーマンスはすぐに優れていますが、スコアを改善する PWA 、アクセシビリティ、ベストプラクティス、および SEO のいくつかの要素が欠けています。（そしてそのプロセスはあなたのサイトの訪問者と検索エンジンに親切です） -## Add a manifest file +## マニフェストファイルを追加する -Looks like you have a pretty lackluster score in the "Progressive Web App" category. Let's address that. +「プログレッシブ Web アプリ」カテゴリのスコアがかなり低いようです。それに対処しましょう。 -But first, what exactly _are_ PWAs? +しかし、そもそも、PWA とは正確には何でしょうか？ -They are regular websites that take advantage of modern browser functionality to augment the web experience with app-like features and benefits. Check out [Google's overview](https://developers.google.com/web/progressive-web-apps/) of what defines a PWA experience. +これらは通常の Web サイトであり、最新のブラウザー機能を利用して、アプリのような機能と利点で Web エクスペリエンスを強化しています。PWA エクスペリエンスにおける [Google の概要](https://developers.google.com/web/progressive-web-apps/)を確認してください。 -Inclusion of a web app manifest is one of the three generally accepted [baseline requirements for a PWA](https://alistapart.com/article/yes-that-web-project-should-be-a-pwa#section1). +Web アプリマニフェストを含めることは、一般に受け入れられている [PWA の 3 つのベースライン要件](https://alistapart.com/article/yes-that-web-project-should-be-a-pwa#section1)の 1 つです。 -Quoting [Google](https://developers.google.com/web/fundamentals/web-app-manifest/): +[Google](https://developers.google.com/web/fundamentals/web-app-manifest/) からの引用。 -> The web app manifest is a simple JSON file that tells the browser about your web application and how it should behave when 'installed' on the user's mobile device or desktop. +> Web アプリマニフェストは、Web アプリケーションと、ユーザーのモバイルデバイスまたはデスクトップに「インストール」されたときの Web アプリケーションの動作をブラウザーに伝える単純な JSON ファイルです。 -[Gatsby's manifest plugin](/packages/gatsby-plugin-manifest/) configures Gatsby to create a `manifest.webmanifest` file on every site build. +[Gatsby のマニフェストプラグイン](/packages/gatsby-plugin-manifest/)は manifest.webmanifest、すべてのサイトビルドで `manifest.webmanifest` ファイルを作成するように Gatsby を構成します。 -### ✋ Using `gatsby-plugin-manifest` +### ✋ `gatsby-plugin-manifest` を使用する -1. Install the plugin: +1. プラグインをインストールします: ```shell npm install --save gatsby-plugin-manifest ``` -2. Add a favicon for your app under `src/images/icon.png`. For the purposes of this tutorial you can use [this example icon](https://raw.githubusercontent.com/gatsbyjs/gatsby/master/docs/tutorial/part-eight/icon.png), should you not have one available. The icon is necessary to build all images for the manifest. For more information, look at the docs for [`gatsby-plugin-manifest`](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-manifest/README.md). +2. `src/images/icon.png` の下にアプリのファビコンを追加します。このチュートリアルの目的で、使用可能なアイコンがない場合は、[このサンプルアイコン](https://raw.githubusercontent.com/gatsbyjs/gatsby/master/docs/tutorial/part-eight/icon.png)を使用できます。このアイコンは、マニフェストのすべての画像を作成するために必要です。詳細については、[`gatsby-plugin-manifest`](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-manifest/README.md) のドキュメントをご覧ください。 -3. Add the plugin to the `plugins` array in your `gatsby-config.js` file. +3. プラグインを `gatsby-config.js` ファイルの `plugins` 配列に追加します。 ```javascript:title=gatsby-config.js { @@ -111,23 +112,23 @@ npm install --save gatsby-plugin-manifest } ``` -That's all you need to get started with adding a web manifest to a Gatsby site. The example given reflects a base configuration -- Check out the [plugin reference](/packages/gatsby-plugin-manifest/?=gatsby-plugin-manifest#automatic-mode) for more options. +Gatsby サイトへの Web マニフェストの追加を開始するために必要なのはそれだけです。示されている例は、基本構成を反映しています。その他のオプションについては、[プラグインリファレンス](/packages/gatsby-plugin-manifest/?=gatsby-plugin-manifest#automatic-mode)をご覧ください。 -## Add offline support +## オフラインサポートを追加する -Another requirement for a website to qualify as a PWA is the use of a [service worker](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API). A service worker runs in the background, deciding to serve network or cached content based on connectivity, allowing for a seamless, managed offline experience. +Web サイトが PWA として認定されるためのもう 1 つの要件は、サービスワーカーの使用です。サービスワーカーはバックグラウンドで実行され、接続に基づいてネットワークコンテンツまたはキャッシュコンテンツを提供することを決定し、シームレスな管理されたオフラインエクスペリエンスを可能にします。 -[Gatsby's offline plugin](/packages/gatsby-plugin-offline/) makes a Gatsby site work offline and more resistant to bad network conditions by creating a service worker for your site. +[Gatsby のオフラインプラグイン](/packages/gatsby-plugin-offline/)は、サイトのサービスワーカーを作成することにより、Gatsby サイトをオフラインで動作させ、悪いネットワーク状態に対する耐性を高めます。 -### ✋ Using `gatsby-plugin-offline` +### ✋ `gatsby-plugin-offline` を使用する -1. Install the plugin: +1. プラグインをインストールします: ```shell npm install --save gatsby-plugin-offline ``` -2. Add the plugin to the `plugins` array in your `gatsby-config.js` file. +2. `gatsby-config.js` ファイルの `plugins` 配列に追加します。 ```javascript:title=gatsby-config.js { @@ -152,27 +153,27 @@ npm install --save gatsby-plugin-offline } ``` -That's all you need to get started with service workers with Gatsby. +Gatsby でサービスワーカーを使い始めるために必要なのはそれだけです。 -> 💡 The offline plugin should be listed _after_ the manifest plugin so that the offline plugin can cache the created `manifest.webmanifest`. +> manifest オフラインプラグインは、作成された `manifest.webmanifest` をキャッシュできるように、マニフェストプラグインの後にリストする必要があります。 -## Add page metadata +## ページのメタデータを追加する -Adding metadata to pages (such as a title or description) is key in helping search engines like Google understand your content and decide when to surface it in search results. +ページにメタデータ（タイトルや説明など）を追加することは、Google などの検索エンジンがコンテンツを理解し、検索結果に表示するタイミングを決定する上で重要です。 -[React Helmet](https://github.com/nfl/react-helmet) is a package that provides a React component interface for you to manage your [document head](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head). +[React Helmet](https://github.com/nfl/react-helmet) は、[ドキュメントヘッド](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head)を管理するための React コンポーネントインターフェイスを提供するパッケージです。 -Gatsby's [react helmet plugin](/packages/gatsby-plugin-react-helmet/) provides drop-in support for server rendering data added with React Helmet. Using the plugin, attributes you add to React Helmet will be added to the static HTML pages that Gatsby builds. +Gatsby の [React Helmet プラグイン](/packages/gatsby-plugin-react-helmet/)は、React Helmet で追加されたサーバーレンダリングデータのドロップインサポートを提供します。プラグインを使用すると、React Helmet に追加した属性が Gatsby が構築する静的 HTML ページに追加されます。 -### ✋ Using `React Helmet` and `gatsby-plugin-react-helmet` +### ✋ `React Helmet` と `gatsby-plugin-react-helmet` を使用する -1. Install both packages: +1. 両方のパッケージをインストールする: ```shell npm install --save gatsby-plugin-react-helmet react-helmet ``` -2. Make sure you have a `description` and an `author` configured inside your `siteMetadata` object. Also, add the `gatsby-plugin-react-helmet` plugin to the `plugins` array in your `gatsby-config.js` file. +2. オブジェクト内に `description` および `author` が `siteMetadata` オブジェクトへ設定されていることを確認してください。また、 `gatsby-config.js` ファイル内の `plugins` 配列に `gatsby-plugin-react-helmet` プラグインを追加します。 ```javascript:title=gatsby-config.js module.exports = { @@ -205,7 +206,7 @@ module.exports = { } ``` -3. In the `src/components` directory, create a file called `seo.js` and add the following: +3. `src/components` ディレクトリー内に、 `seo.js` 名のファイルを作成し、次の行を追加します: ```jsx:title=src/components/seo.js import React from "react" @@ -291,9 +292,9 @@ SEO.propTypes = { export default SEO ``` -The above code sets up defaults for your most common metadata tags and provides you an `` component to work with in the rest of your project. Pretty cool, right? +上記のコードは、もっとも一般的なメタデータタグのデフォルトを設定し、プロジェクトの残りの部分で動作する `` コンポーネントを提供します。かなりクールですよね？ -4. Now, you can use the `` component in your templates and pages and pass props to it. For example, add it to your `blog-post.js` template like so: +4. これで、テンプレートとページで `` コンポーネントを使用し、 props を渡すことができます。たとえば、次の `blog-post.js` のようにテンプレートに追加します: ```jsx:title=src/templates/blog-post.js import React from "react" @@ -331,44 +332,45 @@ export const query = graphql` ` ``` -The above example is based off the [Gatsby Starter Blog](/starters/gatsbyjs/gatsby-starter-blog/). By passing props to the `` component, you can dynamically change the metadata for a post. In this case, the blog post `title` and `excerpt` (if it exists in the blog post markdown file) will be used instead of the default `siteMetadata` properties in your `gatsby-config.js` file. +上記の例は [Gatsby スターターブログ](/starters/gatsbyjs/gatsby-starter-blog/) に基づいています。`` コンポーネントに props を渡すことで、投稿のメタデータを動的に変更できます。この場合、`siteMetadatagatsby-config.js` ファイルのデフォルトの `siteMetadata` プロパティの代わりに、投稿ブログの `title` と `excerpt`（投稿ブログのマークダウンファイルに存在する場合）が使用されます。 -Now, if you run the Lighthouse audit again as laid out above, you should get close to--if not a perfect-- 100 score! +さて、上記のように Lighthouse の検証を再度実施すると、完全ではないにしてもスコア 100 に近づくはずです！ -> 💡 For further reading and examples, check out [Adding an SEO Component](/docs/add-seo-component/) and the [React Helmet docs](https://github.com/nfl/react-helmet#example)! +> 💡 さらに読むと例については、[SEO コンポーネントの追加](/docs/add-seo-component/)と [React Helmet のドキュメント](https://github.com/nfl/react-helmet#example) をご覧ください！ -## Keep making it better +## 改善し続ける -In this section, we've shown you a few Gatsby-specific tools to improve your site's performance and prepare to go live. +このセクションでは、サイトのパフォーマンスを改善し、運用を開始するための Gatsby 固有のツールをいくつか紹介しました。 -Lighthouse is a great tool for site improvements and learning -- Continue looking through the detailed feedback it provides and keep making your site better! +Lighthouse は、サイトの改善と学習に最適なツールです。Lighthouse が提供する詳細なフィードバックを引き続き確認し、サイトの改善を続けてください。 -## Next Steps +## 次のステップ -### Official Documentation +### 公式ドキュメント -- [Official Documentation](https://www.gatsbyjs.org/docs/): View our Official Documentation for _[Quick Start](https://www.gatsbyjs.org/docs/quick-start/)_, _[Detailed Guides](https://www.gatsbyjs.org/docs/preparing-your-environment/)_, _[API References](https://www.gatsbyjs.org/docs/gatsby-link/)_, and much more. +- [公式ドキュメント](https://www.gatsbyjs.org/docs/): _[クイックスタート](https://www.gatsbyjs.org/docs/quick-start/)_, _[詳細ガイド](https://www.gatsbyjs.org/docs/preparing-your-environment/)_, _[API リファレンス](https://www.gatsbyjs.org/docs/gatsby-link/)_, など、公式ドキュメントをご覧ください。 -### Official Plugins +### 公式プラグイン -- [Official Plugins](https://github.com/gatsbyjs/gatsby/tree/master/packages): The complete list of all the Official Plugins maintained by Gatsby. +- [公式プラグイン](https://github.com/gatsbyjs/gatsby/tree/master/packages): Gatsby が管理しているすべての公式プラグインの完全な一覧。 -### Official Starters +### 公式スターター -1. [Gatsby's Default Starter](https://github.com/gatsbyjs/gatsby-starter-default): Kick off your project with this default boilerplate. This barebones starter ships with the main Gatsby configuration files you might need. _[working example](http://gatsbyjs.github.io/gatsby-starter-default/)_ -2. [Gatsby's Blog Starter](https://github.com/gatsbyjs/gatsby-starter-blog): Gatsby starter for creating an awesome and blazing-fast blog. _[working example](http://gatsbyjs.github.io/gatsby-starter-blog/)_ -3. [Gatsby's Hello-World Starter](https://github.com/gatsbyjs/gatsby-starter-hello-world): Gatsby Starter with the bare essentials needed for a Gatsby site. _[working example](https://gatsby-starter-hello-world-demo.netlify.com/)_ +1. [Gatsby のデフォルトスターター]](https://github.com/gatsbyjs/gatsby-starter-default)：デフォルトの定型文でプロジェクトを開始します。この必要最小限のスターターには、必要なメイン Gatsby 構成ファイルが付属しています。_[実施例](http://gatsbyjs.github.io/gatsby-starter-default/)_ +2. [Gatsby のブログスターター](https://github.com/gatsbyjs/gatsby-starter-blog): 驚くほど高速なブログを作成するための Gatsby スターター。 _[実施例](http://gatsbyjs.github.io/gatsby-starter-blog/)_ +3. [Gatsby のハローワールドスターター](https://github.com/gatsbyjs/gatsby-starter-hello-world): Gatsby サイトに必要な最低限の要素を備えた Gatsby スターター。 _[実施例](https://gatsby-starter-hello-world-demo.netlify.com/)_ -## That's all, folks +## 以上です、みなさん -Well, not quite; just for this tutorial. There are [Additional Tutorials](/tutorial/additional-tutorials/) to check out for more guided use cases. +まあ、まったくそうではありません。このチュートリアルのためだけに。ガイド付きのユースケースを確認するには、[追加のチュートリアル（/tutorial/additional-tutorials/)があります。 -This is just the beginning. Keep going! +これは始まりにすぎなません。立ち止まらないで！ -- Did you build something cool? Share it on Twitter, tag [#buildwithgatsby](https://twitter.com/search?q=%23buildwithgatsby), and [@mention us](https://twitter.com/gatsbyjs)! -- Did you write a cool blog post about what you learned? Share that, too! -- Contribute! Take a stroll through [open issues](https://github.com/gatsbyjs/gatsby/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22) on the gatsby repo and [become a contributor](/contributing/how-to-contribute/). +- クールなものを作りましたか？Twitter で共有し、 [#buildwithgatsby](https://twitter.com/search?q=%23buildwithgatsby)にタグを付けて、[@mention us](https://twitter.com/gatsbyjs)！ -Check out the ["how to contribute"](/contributing/how-to-contribute/) docs for even more ideas. +- 学んだことについてのクールなブログ記事を書きましたか？それも共有してください！ +- 貢献しましょう！Gatsby リポジトリに[Issue をあげましょう]](https://github.com/gatsbyjs/gatsby/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22)、そして[貢献者になります](/contributing/how-to-contribute/)。 -We can't wait to see what you do 😄. +さらなるアイデアについては、「[貢献方法](/contributing/how-to-contribute/)」のドキュメントをご覧ください。 + +私たちはあなたが何をするのか楽しみです 😄。 From 795ed8fe50ca21a64dfbe0ce36d22b7ecfa73fdb Mon Sep 17 00:00:00 2001 From: yukapomeranian Date: Sun, 19 Jan 2020 21:01:42 +0900 Subject: [PATCH 2/3] fix translation. --- .DS_Store | Bin 6148 -> 0 bytes docs/.DS_Store | Bin 6148 -> 0 bytes docs/tutorial/.DS_Store | Bin 8196 -> 0 bytes docs/tutorial/part-eight/index.md | 99 +++++++++++++++--------------- 4 files changed, 49 insertions(+), 50 deletions(-) delete mode 100644 .DS_Store delete mode 100644 docs/.DS_Store delete mode 100644 docs/tutorial/.DS_Store diff --git a/.DS_Store b/.DS_Store deleted file mode 100644 index bb1dfef086e1618679d628ee073afa14206b9cd6..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 6148 zcmeHK&2G~`5S~o}aZD*WAhq0lLE?~B2~_2PDupyT^uUiWq6a{!9Y=|&Ye%s|2q7pJ z-T`<6#FKF1$b;|z@a=jV#oJWs2_e|AcEA0Z&$}}_>-7>5YmB@aQJIJgB#s3W*$UzP zJe`r8Y~f_a-*FH`9XE(v)Onj0?E&q9zuN<1rE6 z*v}PQZp9mL16UOb>sE4ej>0u*pB_<@TF4LSA@B*=*}3MvE1Uv(u&JZYE5CQ1o;!{Q z^2_?o9Rz-yRI5K&E?>BGxo8-sVO}*~+Wly3Cr&bo8_w`KuRV5>zAMX5qbOLE9ru~v z9k@o5l^u^+XA7&S%a6{o0MdymQPw)z1KI=sl?V9u!9wC#mpD&Rd^(VcD*&*7W+5nxUw@#* z8-R6*^AynnVJQ`uQklGBFnM!eDINWFsXtFKr4th)<2`a@CT}QAUObp3)QQzo)VcP6 z_CVGH`LtT*=YQ+``+t_CYuW?a1OJoFgv5pG%~KQ`dwR?wR8sjs;>ixZbGpgvEcHpTHuMjbo27NUg>@NFiF?{%Fx3Bj0 z9xRs~xpjB=(sE{J#+O^aL?$MA8!1d&XpCMGtf ze1)h_$ocb!Xysp3!dequAr8EFX)xgae)2}c>pPwS&wyvZ9yba^@IDbbtSy?Y1C6-? z00X#8Hk~>>lljE~iL64v;oL5^k kC1~7nYz#h%x1mN5Q)~c3hqXm`ApS+b(BK=-z&~Z+Cu5+{aR2}S diff --git a/docs/tutorial/.DS_Store b/docs/tutorial/.DS_Store deleted file mode 100644 index 4938147857b38c846517662fc5882391493dbfd7..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 8196 zcmeHM&2G~`5FRH1oFGJ0KyBe-ijX)oD1oXRP^Bo8LvKhyZ~)XgiQ8Cm>|!TP+Ypos z?*P03;z>Ah zocm16#WRbb2IPtQj{m3MnEH=5zq)|1pWsEaAtEek2&|{Q+?G4Xap`K z0-PT#bf)!~P9znn0~b*OfEF+<8pfytgp3u_dQ2yh3Q_2k)q@d>8gYqXNO3&3m>skp z(}|=~oD3;WMr_%LD-=UmhnywY$*4=JuNnc3z$^k>yU(Lu@8Hi()bADC4bTG$@q{b- zh#pdpIvZZlZh1iqk{oPL(I5N~4I`r4;AOckIrtL5Uj*8inSL3V)taUATT165wO~J> z9jZX518pAkZqoto+wds@O?jL2(wI+aya9~^=kM%gTpXGh-XNtc>yRa0(b_Fsn zY<8)i#4W#e7Ma#C+KqR_kJhf|M*V8_myydCE?vH2nkBPzt@N(h4TjCW-5*2^JAA`; zFYJD|6^~yAfp;{vTd!PaxLLmWEb#lb>pP(kb~_GO-oAGIPB3f)1HTgqJx%$*G>c|& zv%D}GRjSKYt-3N^wnnwbPga(#)zwGianYQ=Ut8PQ>Kz=8K8!zp!NSmt_&lNO^8V=h z6{Adm_L`yZ1^x~TqZbtrw*lfFIVlLggG&vNq(p#i7$zkO9F(erso3DpYbgsN1V1Yw zsQMk@)xsz8lQxJ$OqEe>L|Dgul3xUn%CFksU=Lv<<(CK-RYtYZry&I?8yp%czlzi$ z^oMB)5dx~j5|H9_6(NW?@l-Gp2*;thgQqrly7V5QKa(_$4I932pEO+=6VAR z)89gAUaqw*^euF5%r}u#h~Og1aZpi?gC70E5Mv9hEK`r^L{iM4{re9A`uxv0L-qN8 H!Os7`z#nbD diff --git a/docs/tutorial/part-eight/index.md b/docs/tutorial/part-eight/index.md index c0e64aefc..8aba65957 100644 --- a/docs/tutorial/part-eight/index.md +++ b/docs/tutorial/part-eight/index.md @@ -1,5 +1,5 @@ --- -title: Preparing a Site to Go Live サイトを公開する準備 +title: サイトを公開する準備 typora-copy-images-to: ./ disableTableOfContents: true --- @@ -11,19 +11,18 @@ disableTableOfContents: true - スタイルコンポーネントについて - サイトにプラグインを追加 - ソースと変換データ -- use GraphQL to query data for pages -- GraphQL をページ用データを照会するために使うこと -- データからプログラム的にページを作成すること +- ページ用データの参照に GraphQL を使うこと +- データからプログラムでページを作成すること -この最終章では、 [Lighthouse](https://developers.google.com/web/tools/lighthouse/) と呼ばれる強力なサイト公開ツールを導入することで、サイトの公開準備の一般的な手順をいくつか説明します。途中で、Gatsby サイトでよく使用するプラグインをいくつか紹介します。 +この最終セクションでは、 [Lighthouse](https://developers.google.com/web/tools/lighthouse/) と呼ばれる強力なサイト評価ツールを導入することで、サイトの公開準備の一般的な手順をいくつか説明します。途中で、 Gatsby サイトでよく使用するプラグインをいくつか紹介します。 -## Lighthouse による検証 +## Lighthouse による評価 [Lighthouse web サイト](https://developers.google.com/web/tools/lighthouse/)からの引用。 -> Lighthouse は、Web ページの品質を改善するためのオープンソースの自動化ツールです。パブリックまたは認証を必要とする任意の Web ページに対して実施できます。パフォーマンス、アクセシビリティ、プログレッシブ Web アプリ（PWA）などを検証します。 +> Lighthouse は、 Web ページの品質を改善するための自動化されたオープンソースツールです。パブリックまたは認証を必要とする任意の Web ページに対して実施できます。パフォーマンス、アクセシビリティ、プログレッシブ Web アプリ（PWA）などを評価します。 -Lighthouse は Chrome DevTools に含まれています。検証を実施し、検出されたエラーに対処し、提案された改善を実装することは、サイトを運用するための優れた方法です。これにより、サイトが可能な限り高速でアクセスしやすいという自信が得られます。 +Lighthouse は Chrome DevTools に含まれています。評価を実施し、検知したエラーに対処することは、サイト公開前の準備として良い方法です。これにより、サイトが可能な限り高速でアクセスしやすいという自信が得られます。 やってみましょう！ @@ -31,63 +30,63 @@ Lighthouse は Chrome DevTools に含まれています。検証を実施し、 ### ✋ プロダクション用ビルドを作成する -1. 開発サーバーを停止し（実行中の場合）、次のコマンドを実行します: +1. 開発サーバーを停止し（実行中の場合）、次のコマンドを実行します。 ```shell gatsby build ``` -> 💡 [パート 1](/tutorial/part-one/)で学習したように、これによりサイトのプロダクション用ビルドが実行され、ビルドされた静的ファイルが `public` ディレクトリに出力されます。 +> 💡 [パート 1](/tutorial/part-one/)で学習したように、これによりサイトのプロダクション用ビルドが実行され、ビルドされた静的ファイルが `public` ディレクトリーに出力されます。 -2. プロダクションサイトをローカルで表示します。実行: +2. プロダクションサイトをローカルで閲覧します。次のコマンドを実行してください。 ```shell gatsby serve ``` -これが開始されると、[`localhost:9000`](http://localhost:9000) でサイトを表示できます。 +これを実行すると、[`localhost:9000`](http://localhost:9000) でサイトを表示できます。 -### Lighthouse の監査を実行する +### Lighthouse による評価を実施する -次に、Lighthouse の最初の検証を実施してみましょう。 +次に、Lighthouse による最初の評価を実施してみましょう。 -1. まだ行っていない場合は、Chrome シークレットモードでサイトを開き、拡張機能が検証へ干渉しないようにします。そして、Chrome DevTools を開きます。 +1. まだ行っていない場合は、Chrome シークレットモードでサイトを開き、拡張機能が評価へ干渉しないようにします。そして、Chrome DevTools を開きます。 -2. "Audit" タブをクリックすると、次のような画面が表示されます。 +2. "Audits" タブをクリックすると、次のような画面が表示されます。 ![Lighthouse audit start](./lighthouse-audit.png) -3. "Perform an audit..." をクリックします（デフォルトでは、使用可能なすべての検証タイプを選択する必要があります）。次に、"Run audit" をクリックします。（検証の実行には 1 分ほどかかります）。検証が完了すると、次のような結果が表示されます。 +3. "Perform an audit..." をクリックします（デフォルトでは、使用可能なすべての評価タイプが選択されているはずです）。次に、"Run audits" をクリックします。（評価の実行には 1 分ほどかかります）。評価が完了すると、次のような結果が表示されます。 ![Lighthouse audit results](./lighthouse-audit-results.png) -ご覧のとおり、Gatsby のパフォーマンスはすぐに優れていますが、スコアを改善する PWA 、アクセシビリティ、ベストプラクティス、および SEO のいくつかの要素が欠けています。（そしてそのプロセスはあなたのサイトの訪問者と検索エンジンに親切です） +ご覧のとおり、Gatsby のパフォーマンスは驚くほど優れていますが、 まだ、PWA 、アクセシビリティ、ベストプラクティス、および SEO などのスコアに改善の余地があります。（そして、その改善を通じて、あなたのサイトは訪問者や検索エンジンに対してよりフレンドリーになるでしょう） ## マニフェストファイルを追加する -「プログレッシブ Web アプリ」カテゴリのスコアがかなり低いようです。それに対処しましょう。 +「プログレッシブ Web アプリ」カテゴリのスコアがかなり低いようです。それに対応しましょう。 しかし、そもそも、PWA とは正確には何でしょうか？ -これらは通常の Web サイトであり、最新のブラウザー機能を利用して、アプリのような機能と利点で Web エクスペリエンスを強化しています。PWA エクスペリエンスにおける [Google の概要](https://developers.google.com/web/progressive-web-apps/)を確認してください。 +これは、最新のブラウザー機能を利用してアプリのような機能と利点で Web エクスペリエンスを拡張した通常の Web サイトです。PWA エクスペリエンスの構成要素については、 [Google の概要](https://developers.google.com/web/progressive-web-apps/)を確認してください。 -Web アプリマニフェストを含めることは、一般に受け入れられている [PWA の 3 つのベースライン要件](https://alistapart.com/article/yes-that-web-project-should-be-a-pwa#section1)の 1 つです。 +Web アプリマニフェストを含めることは、一般的な[PWA の 3 つの基本的要件](https://alistapart.com/article/yes-that-web-project-should-be-a-pwa#section1)の 1 つです。 [Google](https://developers.google.com/web/fundamentals/web-app-manifest/) からの引用。 -> Web アプリマニフェストは、Web アプリケーションと、ユーザーのモバイルデバイスまたはデスクトップに「インストール」されたときの Web アプリケーションの動作をブラウザーに伝える単純な JSON ファイルです。 +> Web アプリマニフェストとは、ユーザーのモバイルデバイスまたはデスクトップに「インストール」されたときの Web アプリケーションの動作をブラウザーに伝える単純な JSON ファイルです。 -[Gatsby のマニフェストプラグイン](/packages/gatsby-plugin-manifest/)は manifest.webmanifest、すべてのサイトビルドで `manifest.webmanifest` ファイルを作成するように Gatsby を構成します。 +[Gatsby のマニフェストプラグイン](/packages/gatsby-plugin-manifest/)は、すべてのサイトビルドで `manifest.webmanifest` ファイルを作成するように Gatsby を設定します。 ### ✋ `gatsby-plugin-manifest` を使用する -1. プラグインをインストールします: +1. プラグインをインストールします。 ```shell npm install --save gatsby-plugin-manifest ``` -2. `src/images/icon.png` の下にアプリのファビコンを追加します。このチュートリアルの目的で、使用可能なアイコンがない場合は、[このサンプルアイコン](https://raw.githubusercontent.com/gatsbyjs/gatsby/master/docs/tutorial/part-eight/icon.png)を使用できます。このアイコンは、マニフェストのすべての画像を作成するために必要です。詳細については、[`gatsby-plugin-manifest`](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-manifest/README.md) のドキュメントをご覧ください。 +2. `src/images/icon.png` の下にアプリのファビコンを追加します。このチュートリアルを実施するに際して、使用できるアイコンを持っていない場合は、[サンプルアイコン](https://raw.githubusercontent.com/gatsbyjs/gatsby/master/docs/tutorial/part-eight/icon.png)を使用できます。このアイコンは、マニフェストファイルで使用されるのすべての画像の作成に必要です。詳細については、[`gatsby-plugin-manifest`](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-manifest/README.md) のドキュメントをご覧ください。 3. プラグインを `gatsby-config.js` ファイルの `plugins` 配列に追加します。 @@ -112,17 +111,17 @@ npm install --save gatsby-plugin-manifest } ``` -Gatsby サイトへの Web マニフェストの追加を開始するために必要なのはそれだけです。示されている例は、基本構成を反映しています。その他のオプションについては、[プラグインリファレンス](/packages/gatsby-plugin-manifest/?=gatsby-plugin-manifest#automatic-mode)をご覧ください。 +Gatsby サイトへ Web マニフェストを追加するのに必要なのは、それだけです。示されている例は、基本設定です。その他のオプションについては、[プラグインリファレンス](/packages/gatsby-plugin-manifest/?=gatsby-plugin-manifest#automatic-mode)をご覧ください。 ## オフラインサポートを追加する -Web サイトが PWA として認定されるためのもう 1 つの要件は、サービスワーカーの使用です。サービスワーカーはバックグラウンドで実行され、接続に基づいてネットワークコンテンツまたはキャッシュコンテンツを提供することを決定し、シームレスな管理されたオフラインエクスペリエンスを可能にします。 +Web サイトが PWA として認定されるためのもう 1 つの要件は、サービスワーカーの使用です。サービスワーカーはバックグラウンドで実行され、接続状態に基づき、ネットワークコンテンツまたはキャッシュコンテンツを提供することを決め、シームレスに管理されたオフラインエクスペリエンスを可能にします。 -[Gatsby のオフラインプラグイン](/packages/gatsby-plugin-offline/)は、サイトのサービスワーカーを作成することにより、Gatsby サイトをオフラインで動作させ、悪いネットワーク状態に対する耐性を高めます。 +[Gatsby のオフラインプラグイン](/packages/gatsby-plugin-offline/)は、サイトのサービスワーカーを作成することにより、Gatsby サイトをオフラインで動作可能にし、悪いネットワーク状態に対する耐性を高めます。 ### ✋ `gatsby-plugin-offline` を使用する -1. プラグインをインストールします: +1. プラグインをインストールします。 ```shell npm install --save gatsby-plugin-offline @@ -155,25 +154,25 @@ npm install --save gatsby-plugin-offline Gatsby でサービスワーカーを使い始めるために必要なのはそれだけです。 -> manifest オフラインプラグインは、作成された `manifest.webmanifest` をキャッシュできるように、マニフェストプラグインの後にリストする必要があります。 +> manifest オフラインプラグインは、作成された `manifest.webmanifest` をキャッシュできるように、マニフェストプラグインの後に記載する必要があります。 ## ページのメタデータを追加する -ページにメタデータ（タイトルや説明など）を追加することは、Google などの検索エンジンがコンテンツを理解し、検索結果に表示するタイミングを決定する上で重要です。 +ページにメタデータ（タイトルや説明など）を追加することは、Google などの検索エンジンにコンテンツを理解させ、検索結果で上位表示をするために重要です。 [React Helmet](https://github.com/nfl/react-helmet) は、[ドキュメントヘッド](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head)を管理するための React コンポーネントインターフェイスを提供するパッケージです。 -Gatsby の [React Helmet プラグイン](/packages/gatsby-plugin-react-helmet/)は、React Helmet で追加されたサーバーレンダリングデータのドロップインサポートを提供します。プラグインを使用すると、React Helmet に追加した属性が Gatsby が構築する静的 HTML ページに追加されます。 +Gatsby の [React Helmet プラグイン](/packages/gatsby-plugin-react-helmet/)は、React Helmet で追加されたサーバーレンダリングデータのドロップインサポートを提供します。プラグインを使用すると、React Helmet に追加した属性が Gatsby がビルドする静的 HTML ページに追加されます。 ### ✋ `React Helmet` と `gatsby-plugin-react-helmet` を使用する -1. 両方のパッケージをインストールする: +1. 両方のパッケージをインストールします。 ```shell npm install --save gatsby-plugin-react-helmet react-helmet ``` -2. オブジェクト内に `description` および `author` が `siteMetadata` オブジェクトへ設定されていることを確認してください。また、 `gatsby-config.js` ファイル内の `plugins` 配列に `gatsby-plugin-react-helmet` プラグインを追加します。 +2. `description` および `author` が `siteMetadata` オブジェクト内に設定されていることを確認してください。また、 `gatsby-config.js` ファイル内の `plugins` 配列に `gatsby-plugin-react-helmet` プラグインを追加します。 ```javascript:title=gatsby-config.js module.exports = { @@ -206,7 +205,7 @@ module.exports = { } ``` -3. `src/components` ディレクトリー内に、 `seo.js` 名のファイルを作成し、次の行を追加します: +3. `src/components` ディレクトリー内に、 `seo.js` という名前のファイルを作成し、次の行を追加します。 ```jsx:title=src/components/seo.js import React from "react" @@ -292,9 +291,9 @@ SEO.propTypes = { export default SEO ``` -上記のコードは、もっとも一般的なメタデータタグのデフォルトを設定し、プロジェクトの残りの部分で動作する `` コンポーネントを提供します。かなりクールですよね？ +上記のコードは、もっとも一般的なメタデータタグのデフォルトを設定し、これ以降のプロジェクトで使える `` コンポーネントを提供します。かなりクールですよね？ -4. これで、テンプレートとページで `` コンポーネントを使用し、 props を渡すことができます。たとえば、次の `blog-post.js` のようにテンプレートに追加します: +4. これで、テンプレートとページで `` コンポーネントを使用し、 props を渡すことができます。たとえば、次の `blog-post.js` のようにテンプレートに追加します。 ```jsx:title=src/templates/blog-post.js import React from "react" @@ -332,9 +331,9 @@ export const query = graphql` ` ``` -上記の例は [Gatsby スターターブログ](/starters/gatsbyjs/gatsby-starter-blog/) に基づいています。`` コンポーネントに props を渡すことで、投稿のメタデータを動的に変更できます。この場合、`siteMetadatagatsby-config.js` ファイルのデフォルトの `siteMetadata` プロパティの代わりに、投稿ブログの `title` と `excerpt`（投稿ブログのマークダウンファイルに存在する場合）が使用されます。 +上記の例は [Gatsby スターターブログ](/starters/gatsbyjs/gatsby-starter-blog/) に基づいています。`` コンポーネントに props を渡すことで、ブログ記事のメタデータを動的に変更できます。この場合、`siteMetadatagatsby-config.js` ファイルのデフォルトの `siteMetadata` プロパティの代わりに、投稿ブログの `title` と `excerpt`（ブログ記事のマークダウンファイルに存在する場合）が使用されます。 -さて、上記のように Lighthouse の検証を再度実施すると、完全ではないにしてもスコア 100 に近づくはずです！ +さて、この状態で Lighthouse の評価を再度実施すると、完全ではないにしてもスコア 100 に近づくはずです！ > 💡 さらに読むと例については、[SEO コンポーネントの追加](/docs/add-seo-component/)と [React Helmet のドキュメント](https://github.com/nfl/react-helmet#example) をご覧ください！ @@ -342,7 +341,7 @@ export const query = graphql` このセクションでは、サイトのパフォーマンスを改善し、運用を開始するための Gatsby 固有のツールをいくつか紹介しました。 -Lighthouse は、サイトの改善と学習に最適なツールです。Lighthouse が提供する詳細なフィードバックを引き続き確認し、サイトの改善を続けてください。 +Lighthouse は、サイトの改善と学習に最適なツールです。Lighthouse が提供する詳細なフィードバックを引き続き確認し、サイトの改善を継続してください。 ## 次のステップ @@ -352,25 +351,25 @@ Lighthouse は、サイトの改善と学習に最適なツールです。Lighth ### 公式プラグイン -- [公式プラグイン](https://github.com/gatsbyjs/gatsby/tree/master/packages): Gatsby が管理しているすべての公式プラグインの完全な一覧。 +- [公式プラグイン](https://github.com/gatsbyjs/gatsby/tree/master/packages): Gatsby が管理しているすべての公式プラグインの完全な一覧です。 ### 公式スターター 1. [Gatsby のデフォルトスターター]](https://github.com/gatsbyjs/gatsby-starter-default)：デフォルトの定型文でプロジェクトを開始します。この必要最小限のスターターには、必要なメイン Gatsby 構成ファイルが付属しています。_[実施例](http://gatsbyjs.github.io/gatsby-starter-default/)_ 2. [Gatsby のブログスターター](https://github.com/gatsbyjs/gatsby-starter-blog): 驚くほど高速なブログを作成するための Gatsby スターター。 _[実施例](http://gatsbyjs.github.io/gatsby-starter-blog/)_ -3. [Gatsby のハローワールドスターター](https://github.com/gatsbyjs/gatsby-starter-hello-world): Gatsby サイトに必要な最低限の要素を備えた Gatsby スターター。 _[実施例](https://gatsby-starter-hello-world-demo.netlify.com/)_ +3. [Gatsby の"hello world"スターター](https://github.com/gatsbyjs/gatsby-starter-hello-world): Gatsby サイトに必要な最低限の要素を備えた Gatsby スターター。 _[実施例](https://gatsby-starter-hello-world-demo.netlify.com/)_ -## 以上です、みなさん +## こちらで以上です、みなさん！ -まあ、まったくそうではありません。このチュートリアルのためだけに。ガイド付きのユースケースを確認するには、[追加のチュートリアル（/tutorial/additional-tutorials/)があります。 +このチュートリアルに限っては、ということです。様々なユースケースを[追加のチュートリアル](/tutorial/additional-tutorials/)で紹介しています。 -これは始まりにすぎなません。立ち止まらないで！ +これはあくまでチュートリアルです。継続して学習してください！ -- クールなものを作りましたか？Twitter で共有し、 [#buildwithgatsby](https://twitter.com/search?q=%23buildwithgatsby)にタグを付けて、[@mention us](https://twitter.com/gatsbyjs)！ +- クールなものを作りましたか？[#buildwithgatsby](https://twitter.com/search?q=%23buildwithgatsby)タグと[私たちへのメンションを付けて](https://twitter.com/gatsbyjs)Twitter で共有してください！ -- 学んだことについてのクールなブログ記事を書きましたか？それも共有してください！ -- 貢献しましょう！Gatsby リポジトリに[Issue をあげましょう]](https://github.com/gatsbyjs/gatsby/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22)、そして[貢献者になります](/contributing/how-to-contribute/)。 +- 学んだことについて、クールな記事を書きましたか？ぜひとも共有してください！ +- 貢献しましょう！Gatsby リポジトリの[Open Issues]](https://github.com/gatsbyjs/gatsby/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22)を覗き、[貢献者になりましょう](/contributing/how-to-contribute/)。 -さらなるアイデアについては、「[貢献方法](/contributing/how-to-contribute/)」のドキュメントをご覧ください。 +どのようにするかは「[貢献方法](/contributing/how-to-contribute/)」のドキュメントをご覧ください。 -私たちはあなたが何をするのか楽しみです 😄。 +あなたの貢献をお待ちしています 😄。 From 78db4f559d435abea04cf0a2af9de6d5a6ae5d3d Mon Sep 17 00:00:00 2001 From: yukapomeranian Date: Thu, 23 Jan 2020 21:56:13 +0900 Subject: [PATCH 3/3] revice based on review --- docs/tutorial/part-eight/index.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/tutorial/part-eight/index.md b/docs/tutorial/part-eight/index.md index 8aba65957..a6fc8ecfa 100644 --- a/docs/tutorial/part-eight/index.md +++ b/docs/tutorial/part-eight/index.md @@ -4,7 +4,7 @@ typora-copy-images-to: ./ disableTableOfContents: true --- -ああ！長い道のりでしたね！あなたは以下の内容を学びました。 +お疲れさまでした！ここまでで以下の内容を学びましたね。 - 新しい Gatsby サイトの作成 - ページとコンポーネントの作成 @@ -36,7 +36,7 @@ Lighthouse は Chrome DevTools に含まれています。評価を実施し、 gatsby build ``` -> 💡 [パート 1](/tutorial/part-one/)で学習したように、これによりサイトのプロダクション用ビルドが実行され、ビルドされた静的ファイルが `public` ディレクトリーに出力されます。 +> 💡 [パート 1](/tutorial/part-one/) で学習したように、これによりサイトのプロダクション用ビルドが実行され、ビルドされた静的ファイルが `public` ディレクトリーに出力されます。 2. プロダクションサイトをローカルで閲覧します。次のコマンドを実行してください。 @@ -331,11 +331,11 @@ export const query = graphql` ` ``` -上記の例は [Gatsby スターターブログ](/starters/gatsbyjs/gatsby-starter-blog/) に基づいています。`` コンポーネントに props を渡すことで、ブログ記事のメタデータを動的に変更できます。この場合、`siteMetadatagatsby-config.js` ファイルのデフォルトの `siteMetadata` プロパティの代わりに、投稿ブログの `title` と `excerpt`（ブログ記事のマークダウンファイルに存在する場合）が使用されます。 +上記の例は [Gatsby スターターブログ](/starters/gatsbyjs/gatsby-starter-blog/)に基づいています。`` コンポーネントに props を渡すことで、ブログ記事のメタデータを動的に変更できます。この場合、`siteMetadatagatsby-config.js` ファイルのデフォルトの `siteMetadata` プロパティの代わりに、投稿ブログの `title` と `excerpt`（ブログ記事のマークダウンファイルに存在する場合）が使用されます。 さて、この状態で Lighthouse の評価を再度実施すると、完全ではないにしてもスコア 100 に近づくはずです！ -> 💡 さらに読むと例については、[SEO コンポーネントの追加](/docs/add-seo-component/)と [React Helmet のドキュメント](https://github.com/nfl/react-helmet#example) をご覧ください！ +> 💡 さらなる例については、[SEO コンポーネントの追加](/docs/add-seo-component/)と [React Helmet のドキュメント](https://github.com/nfl/react-helmet#example) をご覧ください！ ## 改善し続ける @@ -359,9 +359,9 @@ Lighthouse は、サイトの改善と学習に最適なツールです。Lighth 2. [Gatsby のブログスターター](https://github.com/gatsbyjs/gatsby-starter-blog): 驚くほど高速なブログを作成するための Gatsby スターター。 _[実施例](http://gatsbyjs.github.io/gatsby-starter-blog/)_ 3. [Gatsby の"hello world"スターター](https://github.com/gatsbyjs/gatsby-starter-hello-world): Gatsby サイトに必要な最低限の要素を備えた Gatsby スターター。 _[実施例](https://gatsby-starter-hello-world-demo.netlify.com/)_ -## こちらで以上です、みなさん！ +## みなさん、これで以上です！ -このチュートリアルに限っては、ということです。様々なユースケースを[追加のチュートリアル](/tutorial/additional-tutorials/)で紹介しています。 +基本的なチュートリアルはこれで終了です。その他、様々なユースケースを[追加のチュートリアル](/tutorial/additional-tutorials/)で紹介していますので、ぜひご覧ください。 これはあくまでチュートリアルです。継続して学習してください！