diff --git a/app/_locales/ja/2.0/start/quick-tour.md b/app/_locales/ja/2.0/start/quick-tour.md index aaa45c47b9..5e585b7fb1 100644 --- a/app/_locales/ja/2.0/start/quick-tour.md +++ b/app/_locales/ja/2.0/start/quick-tour.md @@ -8,10 +8,9 @@ Polymerを使えば、宣言的記述によりWeb Componentsを簡単に作成 New web developers can simply add custom HTML elements on a web page with markdown. It’s just like using the HTML tags you’re already familiar with: -
<h1>A heading!</h1>
- -
<fancy-thing>A fancy thing!</fancy-thing>
+
A heading!
+
A fancy thing!
カスタム要素は、Polymerの提供する以下のような機能を利用でき、シンプルな記述によって複雑でインタラクティブな性質を持ったカスタム要素を容易に構築することができます。： @@ -29,30 +28,31 @@ New web developers can simply add custom HTML elements on a web page with markdo 新しいカスタム要素を登録するには、ES6で導入されたclass構文を使い`Polymer.Element`クラスを拡張した上で、`customElements.define`メソッドを呼び出しカスタム要素をブラウザに_登録_します。この登録によってカスタム要素名とclass名が関連付けられます。なお、カスタム要素の名前は**ASCII文字で始まりダッシュ(-)を含める必要があります**。 - + 
{{{include_file('2.0/start/samples/custom-element/custom-element.html')}}}
 
{{{include_file('2.0/start/samples/custom-element/index.html')}}}
 + - + + Try it out in **Plunker**: -* Try modifying the contents of `this.textContent`. -* If you’re familiar with your browser’s developer tools, try printing the - custom element’s `tagName` property to the console. - Hint: add `console.log(this.tagName);` to the constructor method! + +- Try modifying the contents of `this.textContent`. +- If you’re familiar with your browser’s developer tools, try printing thecustom element’s `tagName` property to the console.Hint: add `console.log(this.tagName);` to the constructor method! このサンプルでは、ライフサイクルコールバックをして``の初期化時にコンテンツを追加しています。初期化が完了すると、`ready`というコールバックが呼び出されます。`ready`コールバックは、カスタム要素の生成後にワンタイムの初期化を行いたい場合に利用できます。 -

+

Learn more: カスタム要素の登録

-

+

Learn more: ライフサイクルコールバック

@@ -60,23 +60,27 @@ Try it out in **Plunker**: 多くの要素は、独自のUIや動作を実装するために内部にDOMノードを持っています。PolymerのDOMテンプレートを使うことで、カスタム要素にShadow DOMというDOMのサブツリーを作成できます。 - + 
{{{include_file('2.0/start/samples/dom-element/dom-element.html')}}}
 
{{{include_file('2.0/start/samples/dom-element/index.html')}}}
 + - + + Try it out in **Plunker**: -* Try adding some other html elements inside the block. For example, add `

A heading!

` or `A link!` + +- Try adding some other html elements inside the + Shadow DOMはカスタム要素の内部にカプセル化されています。 -

Learn more: DOM templating

+

Learn more: DOM templating

### Shadow DOMを使って要素を作成 @@ -84,20 +88,23 @@ Shadow DOMを使うことでカスタム要素を柔軟に構築できます。 このサンプルでは、ロゴイメージをCSSでスタイリングされた`
`タグで囲うことで、シンプルなカスタムタグを作成しています。 - + 
{{{include_file('2.0/start/samples/picture-frame/picture-frame.html')}}}
 
{{{include_file('2.0/start/samples/picture-frame/index.html')}}}
 + - + + Try it out in **Plunker**: -* Try adding a `
` to `index.html`; is it affected by the styles in ``'s shadow DOM? -* Try adding other HTML elements to the DOM template to see how they are positioned relative to the distributed child nodes. + +- Try adding a `
` to `index.html`; is it affected by the styles in ``'s shadow DOM? +- Try adding other HTML elements to the DOM template to see how they are positioned relative to the distributed child nodes. **ヒント**: ``の内部で定義されたCSSのスタイル情報は、カスタム要素のShadow DOM内にスコープされます。そのため、上記サンプルにおいて``内部の`div`に対して適用したスタイルルールは、内部の`
`タグに対してのみ適用されます。 {: .alert .alert-info } @@ -111,49 +118,49 @@ Learn more: Composition & distribution

データバインディングを使えば、簡潔なコードでカスタム要素内部で発生した変化をShadow DOMへ反映させることができます。`{%raw%}{{}}{%endraw%}`という記号を使い、コンポーネント内のプロパティとバインドします。例えば`{%raw%}{{}}{%endraw%}`は、カスタム要素内のプロパティ`foo`の値によって置き換えられます。 - + 
{{{include_file('2.0/start/samples/name-tag/name-tag.html')}}}
 
{{{include_file('2.0/start/samples/name-tag/index.html')}}}
 + - + + Try it out in **Plunker**: -* Try editing the value of the `owner` property. -* Try adding another property and binding it in your component. - Hint: Add `this.propertyName = "Property contents";` to the constructor - and add {{propertyName}} to the element’s shadow DOM. + +- Try editing the value of the `owner` property. +- Try adding another property and binding it in your component.Hint: Add `this.propertyName = "Property contents";` to the constructorand add {{propertyName}} to the element’s shadow DOM.

Learn more: data binding

### プロパティの宣言 -プロパティは、カスタム要素が外部へ公開するAPIの重要な一部です。Polymerは、*宣言的なプロパティ*をサポートしており、以下のような一般的な機能を提供します。： - -- プロパティにデフォルト値を設定 -- マークアップからプロパティを設定 -- プロパティの変更を監視して事前に指定した処理(observer)を実行 +プロパティは、カスタム要素が外部へ公開するAPIの重要な一部です。Polymerは、*宣言的なプロパティ*をサポートしており、以下のような一般的な機能を提供します。 下記サンプルでは、一つ前に紹介したサンプルに`owner`プロパティの宣言を加えています。`index.html`内のマークアップから`owner`プロパティを設定しているのが分かると思います。 - + 
{{{include_file('2.0/start/samples/configurable-name-tag/configurable-name-tag.html')}}}
 
{{{include_file('2.0/start/samples/configurable-name-tag/index.html')}}}
 + - + + Try it out in **Plunker**: -* Try editing the initial value of `owner` in index.html. Observe how this sets the property directly from your HTML. + +- Try editing the initial value of `owner` in index.html. Observe how this sets the property directly from your HTML.

Learn more: プロパティの宣言

@@ -164,19 +171,22 @@ Shadow DOMのテキストコンテンツだけでなく、カスタム要素の このサンプルでは、双方向バインディング(two-way binding)を使用しています。カスタム`input`要素(`iron-input`)の`value`と`owner`プロパティがバインドされており、ユーザーがタイプするとカスタム要素のコンテンツもアップデートされます。 - + 
{{{include_file('2.0/start/samples/editable-name-tag/editable-name-tag.html')}}}
 
{{{include_file('2.0/start/samples/editable-name-tag/index.html')}}}
 + - + + Try it out in **Plunker**: -* Edit the placeholder text to see two-way data binding at work. + +- Edit the placeholder text to see two-way data binding at work. **ヒント**: [``](https://www.webcomponents.org/element/PolymerElements/iron-input)要素は、ネイティブの``要素のラッパーとして双方向のデータバインディングや入力値のバリデーション機能を提供します。 {: .alert .alert-info } @@ -185,24 +195,27 @@ Try it out in **Plunker**: テンプレートリピーター(`dom-repeat`)は、配列とのバインドに特化したテンプレートです。配列内の各アイテムにつき一つずつテンプレート内のコンテンツをインスタンス化します。 - + 
{{{include_file('2.0/start/samples/employee-list/employee-list.html')}}}
 
{{{include_file('2.0/start/samples/employee-list/index.html')}}}
 + - + + Try it out in **Plunker**: -* Change the first and last names inside this.employees -* Add another employee by inserting the following text into the array definition after Tony Morelli:
- ``` - , - {first: 'Shawna', last: 'Williams'} - ``` + +- Change the first and last names inside this.employees +- Add another employee by inserting the following text into the array definition after Tony Morelli:
+ ``` + , + {first: 'Shawna', last: 'Williams'} + ```

Learn more: テンプレートリピーター(dom-repeat)