diff --git a/docs/tutorial/part-eight/index.md b/docs/tutorial/part-eight/index.md index 33b897737..a6fc8ecfa 100644 --- a/docs/tutorial/part-eight/index.md +++ b/docs/tutorial/part-eight/index.md @@ -1,94 +1,94 @@ --- -title: Preparing a Site to Go Live +title: サイトを公開する準備 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 -- use GraphQL to query data for pages -- programmatically create pages from your data +- 新しい Gatsby サイトの作成 +- ページとコンポーネントの作成 +- スタイルコンポーネントについて +- サイトにプラグインを追加 +- ソースと変換データ +- ページ用データの参照に 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. "Audits" タブをクリックすると、次のような画面が表示されます。 ![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 audits" をクリックします。(評価の実行には 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 アプリケーションの動作をブラウザーに伝える単純な 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` ファイルを作成するように 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 +111,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 +152,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 +205,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 +291,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 +331,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 の"hello world"スターター](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/). +- クールなものを作りましたか?[#buildwithgatsby](https://twitter.com/search?q=%23buildwithgatsby)タグと[私たちへのメンションを付けて](https://twitter.com/gatsbyjs)Twitter で共有してください! -Check out the ["how to contribute"](/contributing/how-to-contribute/) docs for even more ideas. +- 学んだことについて、クールな記事を書きましたか?ぜひとも共有してください! +- 貢献しましょう!Gatsby リポジトリの[Open Issues]](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/)」のドキュメントをご覧ください。 + +あなたの貢献をお待ちしています 😄。