Skip to content
This repository was archived by the owner on Jan 20, 2025. It is now read-only.

translate docs/working-with-video.md #60

Merged
merged 14 commits into from Feb 1, 2020
Merged

translate docs/working-with-video.md #60

Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
9a53be3
translate working-with-video.md
Jan 16, 2020
1f8b158
unify expressions
Jan 16, 2020
95b2ca3
update translation
Jan 16, 2020
f4c395f
update working-with-video.md
Jan 16, 2020
e37fac4
remove en
Jan 16, 2020
a5c3c9f
translate code comment
Jan 16, 2020
a2f216e
fix
Jan 16, 2020
0c97743
マークダウン to Markdown
Jan 17, 2020
c6ab1a8
add spaces
Jan 18, 2020
1da1480
update translate
Jan 18, 2020
db8f7ba
Merge branch 'master' of https://github.com/gatsbyjs/gatsby-ja into d…
Jan 29, 2020
a2fe453
respond to review
Jan 29, 2020
155d664
remove space
Jan 29, 2020
dc193bc
respond to review
Feb 1, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 49 additions & 49 deletions docs/docs/working-with-video.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,27 @@
---
title: Working with Video
title: 動画を使用する
---

- [Sourcing video from a host](#sourcing-video-from-a-host)
- [Embedding hosted videos in Markdown](#embedding-hosted-videos-in-markdown)
- [Writing custom components for hosted video](#writing-custom-components-for-hosted-video)
- [Querying video data from Markdown with GraphQL](#querying-video-data-from-markdown-with-graphql)
- [Hosting your own HTML5 video files](#hosting-your-own-html5-video-files)
- [Using custom video players](#using-custom-video-players)
- [ホストから動画を取得する](#ホストから動画を取得する)
- [ホストされた動画を Markdown に埋め込む](#ホストされた動画を-Markdown-に埋め込む)
- [ホストされた動画のためのカスタムコンポーネントを作成する](#ホストされた動画のためのカスタムコンポーネントを作成する)
- [GraphQL を使用して Markdown から動画を要求する](#GraphQL-を使用して-Markdown-から動画を要求する)
- [独自の HTML5 の動画ファイルをホスティングする](#独自の-HTML5-の動画ファイルをホスティングする)
- [カスタム動画プレイヤーを使用する](#カスタム動画プレイヤーを使用する)

## Sourcing video from a host
## ホストから動画を取得する

The easiest method for including video on a Gatsby site is to source an uploaded file from a site like YouTube, Vimeo, or Twitch. Using the source URL from one of those hosts, you can use Remark plugins or create a custom `<iframe>` solution to embed videos into your Gatsby site.
Gatsby サイトに動画を含めるもっとも簡単な方法は、YouTube や Vimeo、Twitch のようなサイトにアップロードされた動画を取得することです。ホストされた動画の URL を使って、Remark のプラグインを使用するか、カスタムされた `<iframe>` を作成することで、Gatsby サイトに動画を埋め込むことができます。

## Embedding hosted videos in Markdown
## ホストされた動画を Markdown に埋め込む

There are numerous Gatsby plugins for working with hosted video in your Markdown posts and pages. We recommend checking out the [gatsby-remark-embed-video](/packages/gatsby-remark-embed-video/?=video) plugin for sourcing from a variety of hosts like YouTube or vimeo.
Gatsby にはホストされた動画を Markdown 投稿やページから使用できるようにする、多くのプラグインが用意されています。 YouTube や Vimeo などのさまざまなホストから動画を取得するには、[gatsby-remark-embed-video](/packages/gatsby-remark-embed-video/?=video) プラグインをお勧めします。

### Writing custom components for hosted video
### ホストされた動画のためのカスタムコンポーネントを作成する

If you would like more control over how YouTube (or similar) videos are embedded into your Gatsby posts and pages, you can write a reusable custom `iframe` component and include it in a JSX template or in your content [with MDX](/docs/mdx/).
YouTube（または同様の）動画を Gatsby の投稿やページに埋め込む方法をさらに詳細に制御したい場合は、再利用可能なカスタム `iframe` コンポーネントを作成し、JSX テンプレートや [MDX の中](/docs/mdx/)の内容に含めます。

In this reusable sample component, you could include props for video data like URL or title, any necessary markup for styling purposes, and the common `iframe` embed code:
次の再利用可能なサンプルコンポーネントには、URL やタイトルなどの動画データのための props や、スタイル設定に必要なマークアップ、そして一般的な `iframe` 埋め込みコードが含まれています。

```jsx:title=src/components/video.js
import React from "react"
Expand All @@ -41,7 +41,7 @@ const Video = ({ videoSrcURL, videoTitle, ...props }) => (
export default Video
```

You would then include this component in a template or page with a video source URL and title passed in as props. The data for video URLs and titles can be sourced in multiple ways, such as importing JSON or [querying data from Markdown with GraphQL](#querying-data-from-markdown-with-graphql). You can also hard-code video data for something fun, like a custom 404 page with an Easter egg YouTube video:
次に、このコンポーネントを、動画の URL とタイトルの props と共にテンプレートやページに含めます。URL およびタイトルなどの動画のデータは、JSON のインポートや [GraphQL を使用して Markdown から動画を要求する](#GraphQL-を使用してMarkdownから動画を要求する)など、複数の方法で取得できます。また、404 ページの中にイースターエッグとして YouTube 動画を表示するなど、動画を何か面白いもののためにハードコードすることもできます。

```jsx:title=src/pages/404.js
import React from "react"
Expand All @@ -52,14 +52,14 @@ import Video from "../components/video"

const NotFoundPage = () => (
<Layout>
<SEO title="404: Not found" />
<SEO title="404: 見つかりません" />
<section>
<h1>NOT FOUND</h1>
<p>You just hit a page that doesn't exist... the sadness.</p>
<p>May I suggest a video instead?</p>
<h1>見つかりません</h1>
<p>検索されたページは存在しません...悲しい</p>
<p>代わりに動画を提案してもいいですか？</p>
<Video
videoSrcURL="https://www.youtube.com/embed/dQw4w9WgXcQ"
videoTitle="Official Music Video on YouTube"
videoTitle="YouTubeの公式ミュージックビデオ"
/>
</section>
</Layout>
Expand All @@ -68,21 +68,21 @@ const NotFoundPage = () => (
export default NotFoundPage
```

## Querying video data from Markdown with GraphQL
## GraphQL を使用して Markdown から動画を要求する

If a Markdown page or post has a featured video, you might want to include a video URL and title in [its frontmatter](/docs/adding-markdown-pages#note-on-creating-markdown-files). This allows you to pass those values into your custom component:
もし Markdown のページまたは投稿が特定の動画を含む場合は、[その序文](/docs/adding-markdown-pages＃note-on-creating-markdown-files)に動画の URL とタイトルを含めることができます。これにより、これらの値をカスタムコンポーネントに渡すことができます。

```markdown:title=my-first-post.md
---
path: "/blog/my-first-post"
date: "2019-03-27"
title: "My first blog post"
title: "私の最初のブログ投稿"
videoSourceURL: https://www.youtube.com/embed/dQw4w9WgXcQ
videoTitle: "Gatsby is Never Gonna Give You Up"
videoTitle: "Gatsbyは決してあなたをあきらめない"
---
```

To include a video component in a template, you could start with something like this:
動画コンポーネントをテンプレートに含めるには、次のようなことから始めることができます。

```jsx:title=vlog-template.js
import React from "react"
Expand All @@ -91,9 +91,9 @@ import { graphql } from "gatsby"
import Video from "../components/video"

export default function VlogTemplate({
data, // this prop will be injected by the GraphQL query below.
data, // この prop は下の GraphQL の Query によって注入されます。
}) {
const { markdownRemark } = data // data.markdownRemark holds your post data
const { markdownRemark } = data // data.markdownRemark はあなたの投稿データを持っています
const { frontmatter, html } = markdownRemark
return (
<div className="blog-post-container">
Expand Down Expand Up @@ -129,15 +129,15 @@ export const pageQuery = graphql`
`
```

## Hosting your own HTML5 video files
## 独自の HTML5 の動画ファイルをホスティングする

It's super common to source video from YouTube, Twitch or Vimeo. But what if you want to host your own video and include it as HTML5 video?
YouTube、Twitch または Vimeo から動画を取得することは非常に一般的な方法です。しかし、もし独自の動画をホストし、さらにそれを HTML5 として含めたい場合はどうしたらいいでしょうか？

To include your own video files that will work in multiple web browsers and platforms, you'll need to read up a bit on video extensions and codecs. We recommend MDN as a resource: [Media formats for HTML audio and video](https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats). You may need video converter software to produce the necessary formats -- such as `.webm` and `.mp4` -- to support a range of devices and environments.
独自の動画ファイルを複数の Web ブラウザーやプラットフォームに含めるためには、動画拡張機能とコーデックについて少し学ぶ必要があります。情報源として MDN をお勧めします：[HTML の音声と動画のメディア形式](https://developer.mozilla.org/ja/docs/Web/HTML/Supported_media_formats)。さまざまなデバイスや環境をサポートするための、必要な形式（「.webm」や「.mp4」など）を生成するには、動画変換ソフトが必要になる場合があります。

HTML5 provides the `<video>` media element for working with videos. Inside the `<video>` element, you can provide multiple `<source>` elements that serve as different file formats the video player can use, with each browser electing to use a format it supports.
HTML5 は、動画を使用するための `<video>` メディア要素を提供します。 `<video>` 要素の中では、動画プレーヤーが使用できる異なるファイル形式を複数の `<source>` 要素を使用して提供できます。各ブラウザーは、その中からサポートしている形式の動画を使用します。

If you have a video called `dog.mp4` in your site under `src/assets/dog.mp4`, you can [include that video in your page with webpack](/docs/importing-assets-into-files) like you would other assets. Then reference it in a `<source>` element, which is wrapped by a `<video>` element:
もし、あなたのサイトの `src/assets/dog.mp4` に `dog.mp4` という動画がある場合、他のアセットを使用する時と同様に [webpack を使用して動画をあなたのページに含める](/docs/importing-assets-into-files)ことができます。そして、それを `<video>` 要素にラップされた `<source>` 要素で参照します。

<!-- prettier-ignore -->
```jsx:title=src/pages/index.js
Expand All @@ -152,11 +152,11 @@ export default () => (

```

The `controls` attribute on the `<video>` will provide a default set of buttons overlaid on the video to play/pause, adjust volume, and go full screen. Other attributes like `muted` can set audio to silent, or `poster` can display an image when the video isn't playing. Common attributes that you'd want to apply to multiple videos could be extracted into a custom React video component. A full list of `<video>` attributes can be found on [the MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#Attributes).
`<video>` 要素の `controls` 属性は、動画にオーバーレイされる再生/一時停止ボタンや、音量調整、全画面表示ボタンなどのデフォルトのボタンセットを提供します。また、`muted` 属性なら、音声をミュートに設定できますし、`poster` 属性では動画が再生されていないときに画像を表示したりできます。複数のビデオに適用したい一般的な属性は、React のカスタム動画コンポーネントで抽出できます。 `<video>` 属性の完全な一覧は [MDN のドキュメント](https://developer.mozilla.org/ja/docs/Web/HTML/Element/video#Attributes)で見られます。

### Supporting multiple browsers and formats
### 複数のブラウザーと形式のサポート

Adding more source tags for additional formats will allow the browser to find a source type that it supports, if there are no matching source types the video will fail to load. You can see what formats are supported in different browsers on [MDN's docs about supported media formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats#Browser_compatibility).
もし形式が合わず読み込みに失敗した場合、形式を加えるために source タグを加えることでブラウザーはサポートしている source の type を見つけることができます。異なるブラウザーにどの形式がサポートされているのかは[ブラウザーの互換性](https://developer.mozilla.org/ja/docs/Web/HTML/Supported_media_formats#Browser_compatibility)で見ることできます。

<!-- prettier-ignore -->
```jsx:title=src/pages/index.js
Expand All @@ -173,24 +173,24 @@ export default () => (

```

Even though there are two `<source>` elements, only one video will be displayed, first `mp4` if it is supported, then `.ogg`.
2 つの `<source>` 要素がありますが、この中から 1 つだけが使用されます。サポートされていれば `mp4` 、 次に `.ogg` 。

**Note**: This requires importing a video in the format of the type specified, i.e. adding a `<source>` element with `type=video/ogg` would also need a file import with a format of `.ogg`. Alternatively, you can specify a URL to where a video is remotely hosted as the `src` instead of importing a local file.
**注意**: このとき、指定されたタイプの形式で動画をインポートする必要があります。つまり、`type=video/ogg` を持つ `<source>` 要素を追加するには、`.ogg` の形式でファイルをインポートする必要があるということです。もしくは、ローカルファイルをインポートする代わりに、動画がリモートでホストされる場所の URL を `src` として指定できます。

[See an example repository using `<video>` elements](https://github.com/gatsbyjs/gatsby/blob/master/examples/using-video/)
[`<video>` 要素を使った例のリポジトリを見てみてください](https://github.com/gatsbyjs/gatsby/blob/master/examples/using-video/)

### Accessibility with custom video players
### カスタム動画プレイヤーに伴うアクセシビリティ

One advantage of integrating a custom component with your own hosted video is it can give you more control over the video player, including its accessibility. Elements of accessible video and audio include:
カスタムコンポーネントを独自にホストした動画と統合する利点の 1 つは、アクセシビリティを含め、動画プレーヤーをより詳細に制御できることです。アクセシビリティに関する動画と音声の要素は次のとおりです。

- captions: a text version of the audio, synchronized with the video
- transcript (or subtitles): a text version of the audio and visual content, like captions but also including descriptions of key visual elements in the video
- audio description: an audio version of visual information not conveyed in dialogue
- accessible controls: buttons to operate the video that can be operated without a mouse, are labeled, and work across environments and browsers
- 字幕：動画の音声のテキストバージョン
- 文字起こし（または字幕）：動画の重要な視覚要素の説明も含めた字幕のような音声や視覚コンテンツのテキストバージョン
- 音声解説：対話で補えない視覚情報の音声バージョン
- アクセシブルコントロール：ラベルが付けられてたり、環境やブラウザーを越えて機能する、マウスなしで操作できる動画を操作するためのボタン

Though captions, transcripts, and audio descriptions primarily aim to assist those with greater difficulty seeing or hearing, they benefit many other users who prefer reading to listening. Captions can also help people watching videos when they can't have the sound turned on for whatever reason.
字幕、文字起こし、および音声解説は、主に見ること、聞くことが困難な人を支援することを目的としていますが、聞くことよりも読むことを好む他の多くのユーザーにとって有益です。字幕は、何らかの理由で音声を有効にできない時に動画を視聴したい人々にも役立ちます。

HTML5 provides support for these types of assistive content through the `<track>` element. The track element is nested under a `<video`> element as an empty tag. An example usage of the `<track>` element with a video looks like this:
HTML5 は、`<track>` 要素を通してこれらのタイプの支援コンテンツのサポートを提供します。 `<track>` 要素は、空のタグとして `<video>` 要素の入れ子にします。動画での `<track>` 要素の使用例は次のようになります。

```jsx:title=src/pages/index.js
import React from "react"
Expand All @@ -207,8 +207,8 @@ export default () => (
)
```

The kind attribute can be of a variety of different types including `captions`, `subtitles`, and `descriptions`, among others. The `srcLang` defines English as the language used in the captions in the example, and the captions file imported is used as the source. You can read about the specific attributes of a [`<track>` on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track).
kind 属性では、`captions` や、`subtitles` 、`descriptions` などのさまざまなタイプを指定できます。 `srcLang` で、この例では英語を字幕で使用される言語として定義しています。そして、インポートされた字幕ファイルがソースとして使用されます。 `<track>` 要素の詳しい属性については [track についての MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/track) で読むことができます。

**Note**: The filepath to import the captions in the above code snippet includes the `file-loader!` prefix, which helps webpack import the `.vtt` caption file.
**注意**: 上記のコードスニペットの字幕をインポートするファイルパスには、`file-loader！` プレフィックスが含まれています。これは、webpack が `.vtt` 字幕ファイルをインポートするのに必要となります。

Check out the accessible [HTML5 video player from PayPal](https://github.com/paypal/accessible-html5-video-player#react-version) for an example compatible with Gatsby and React.
Gatsby と React を使用した例については、アクセシビリティを伴う [PayPal の HTML5 動画プレイヤー](https://github.com/paypal/accessible-html5-video-player#react-version)をご覧ください。