diff options
| author | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:07:59 +0100 |
|---|---|---|
| committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:07:59 +0100 |
| commit | 6ef1fa4618e08426b874529619a66adbd3d1fcf0 (patch) | |
| tree | 890e3e27131be010d82ef957fa68db495006cb0e /files/ja/conflicting | |
| parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
| download | translated-content-6ef1fa4618e08426b874529619a66adbd3d1fcf0.tar.gz translated-content-6ef1fa4618e08426b874529619a66adbd3d1fcf0.tar.bz2 translated-content-6ef1fa4618e08426b874529619a66adbd3d1fcf0.zip | |
unslug ja: move
Diffstat (limited to 'files/ja/conflicting')
118 files changed, 14503 insertions, 0 deletions
diff --git a/files/ja/conflicting/learn/css/building_blocks/index.html b/files/ja/conflicting/learn/css/building_blocks/index.html new file mode 100644 index 0000000000..379b38949d --- /dev/null +++ b/files/ja/conflicting/learn/css/building_blocks/index.html @@ -0,0 +1,331 @@ +--- +title: Boxes +slug: Web/Guide/CSS/Getting_started/Boxes +tags: + - CSS + - 'CSS:Getting_Started' +translation_of: Learn/CSS/Building_blocks +translation_of_original: Web/Guide/CSS/Getting_started/Boxes +--- +<div>{{CSSTutorialTOC}}</div> + +<p>{{previousPage("/ja/docs/CSS/Getting_Started/Lists", "Lists")}} これは <a href="/ja/docs/CSS/Getting_Started" title="CSS/Getting Started">CSS Getting Started</a> チュートリアルの第11章です。ここでは、要素が表示されるとき、要素の占めるスペースを CSS で操作する方法について述べます。実際に文書を作り、間隔の調整や装飾ルールの追加を試してください。</p> + +<h2 class="clearLeft" id="ボックスについて">ボックスについて</h2> + +<p>ブラウザに表示されると、要素は一定のスペースを占有します。このスペースは4つの部分で構成されています。</p> + +<p>中央に、<em>要素（element）</em>がその内容を表示するのに必要なスペースがあります。その周りに パディング（<em>padding）</em> があり、その周りに <em>ボーダー（border）</em> があります。その周りには <em>マージン（margin）</em> があって、他要素とその要素を隔てています。</p> + +<table> + <tbody> + <tr> + <td style="width: 22em;"> + <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;"> + <p style="text-align: center; margin: 0px;">マージン</p> + + <p style="text-align: center; margin: 0px 0px -.75em 0px;">ボーダー</p> + + <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> + <p style="text-align: center;">パディング</p> + + <div style="background-color: #eee;"> + <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">要素</p> + </div> + </div> + </div> + + <p><em>薄い灰色がレイアウトの部品を示します。</em></p> + </td> + <td> + <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;"> + <p style="text-align: center; margin: 0px;"> </p> + + <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p> + + <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> + <p style="text-align: center;"> </p> + + <div style="background-color: #fff;"> + <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">要素</p> + </div> + </div> + </div> + + <p><em>ブラウザではこう見えます。</em></p> + </td> + </tr> + </tbody> +</table> + +<p>パディング、ボーダー、マージンは要素の上下左右で異なるサイズにできます。一部または全部をゼロにすることもできます。</p> + +<h3 id="Coloring" name="Coloring">彩色</h3> + +<p>パディングは常に要素の背景色と同じ色です。このため背景色を設定すると、その色は要素自身とそのパディングに適用されます。マージンは常に透明です。</p> + +<table> + <tbody> + <tr> + <td style="width: 22em;"> + <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;"> + <p style="text-align: center; margin: 0px;">マージン</p> + + <p style="text-align: center; margin: 0px 0px -.75em 0px;">ボーダー</p> + + <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> + <p style="text-align: center;">パディング</p> + + <div style="background-color: #ded;"> + <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">要素</p> + </div> + </div> + </div> + + <p><em>要素の背景色は緑です。</em></p> + </td> + <td> + <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;"> + <p style="text-align: center; margin: 0px;"> </p> + + <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p> + + <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> + <p style="text-align: center;"> </p> + + <div style="background-color: #efe;"> + <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">要素</p> + </div> + </div> + </div> + + <p><em>ブラウザではこう見えます</em>。</p> + </td> + </tr> + </tbody> +</table> + +<h3 id="Borders" name="Borders">ボーダー</h3> + +<p>ボーダーを使って、要素を線や枠囲みで装飾できます。</p> + +<p>要素の境界線をすべて同じにするには、{{cssxref("border")}} プロパティを使います。幅（画面表示されるときの単位は通常 pixel です）、スタイル、色を定義します。</p> + +<p>選べるスタイル:</p> + +<table style="margin-left: 2em;"> + <tbody> + <tr> + <td style="width: 6em;"> + <div style="border: 2px solid #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>solid</code></div> + </td> + <td style="width: 6em;"> + <div style="border: 2px dotted #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dotted</code></div> + </td> + <td style="width: 6em;"> + <div style="border: 2px dashed #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dashed</code></div> + </td> + <td style="width: 6em;"> + <div style="border: 4px double #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>double</code></div> + </td> + </tr> + <tr> + <td style="width: 6em;"> + <div style="border: 2px inset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>inset</code></div> + </td> + <td style="width: 6em;"> + <div style="border: 2px outset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>outset</code></div> + </td> + <td style="width: 6em;"> + <div style="border: 4px ridge #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>ridge</code></div> + </td> + <td style="width: 6em;"> + <div style="border: 4px groove #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>groove</code></div> + </td> + </tr> + </tbody> +</table> + +<p>また、スタイルを <code>none</code> か <code>hidden</code> にして、明示的にボーダーを消したり、色を <code>transparent</code> にして、レイアウトを変えずにボーダーを透明にしたりできます。</p> + +<p>一辺ずつボーダーを定義するには、次のプロパティを使います: {{cssxref("border-top")}}、{{cssxref("border-right")}}、{{cssxref("border-bottom")}}、{{cssxref("border-left")}}。これを使うと、一辺だけボーダーを定義したり、辺ごとに違うボーダーを定義したりできます。</p> + +<div class="tuto_example"> +<div class="tuto_type">例</div> + +<p>次のルールは、見出し要素の背景色と上辺のボーダーを定義します:</p> + +<pre class="brush:css">h3 { + border-top: 4px solid #7c7; /* mid green */ + background-color: #efe; /* pale green */ + color: #050; /* dark green */ +}</pre> + +<p>結果は次のようになります:</p> + +<table> + <tbody> + <tr> + <td> + <p style="font-size: 133%; font-weight: bold; background-color: #efe; border-top: 4px solid #7c7; color: #050; padding-right: 6em;">スタイルつきの見出し</p> + </td> + </tr> + </tbody> +</table> + +<p>次のルールは、画像をミッドグレーの枠で取り囲んで見やすくします:</p> + +<pre class="brush:css">img {border: 2px solid #ccc;} +</pre> +</div> + +<p>結果は次のようになります:</p> + +<table> + <tbody> + <tr> + <td>画像:</td> + <td style="border: 2px solid #ccc;"><img alt="Image:Blue-rule.png" src="/@api/deki/files/47/=Blue-rule.png"></td> + </tr> + </tbody> +</table> + +<h3 id="Margins_and_padding" name="Margins_and_padding">マージンとパディング</h3> + +<p>マージンとパディングで要素の位置を調整し、周りに余白を作ります。</p> + +<p>{{cssxref("margin")}} プロパティと {{cssxref("padding")}} プロパティでそれぞれ、マージンの幅、パディングの幅を設定します。</p> + +<p>幅を一つだけ記述すると、要素の全ての枠（top（上辺）、right（右辺）、bottom（下辺）、left（左辺））に適用されます。</p> + +<p>幅を2つ記述すると、1番目が top と bottom に、2番めが right と left に適用されます。</p> + +<p>4つすべての幅を定義するには、次の順番で記述します: top、 right、bottom、left</p> + +<div class="tuto_example"> +<div class="tuto_type">例</div> + +<p>次のルールは、<code>remark</code> クラスを持つ段落に、四辺すべてを囲むような赤い枠を与えます。</p> + +<p>パディングで囲むことで、テキストから枠が少し離れます。</p> + +<p>左マージンは段落を他のテキストからインデントします:</p> + +<pre class="brush:css">p.remark { + border: 2px solid red; + padding: 4px; + margin-left: 24px; + } +</pre> + +<p>結果は次のようになります:</p> + +<table> + <tbody> + <tr> + <td> + <p>ここは通常の段落です。</p> + + <p style="border: 2px solid red; padding: 4px 6em 4px 4px; margin: 0px 0px 0px 24px;">ここは remark 用の段落です。</p> + </td> + </tr> + </tbody> +</table> +</div> + +<div class="tuto_details"> +<div class="tuto_type">さらに詳しく</div> + +<p>マージンとパディングで要素の配置方法を調整すると、そのスタイルのルールとブラウザのデフォルトが、複雑な方法で相互作用します。</p> + +<p>ブラウザによって、要素の配置方法が異なります。スタイルシートで変えなければ、結果は同じに見えるかもしれません。このため、時折スタイルシートのもたらす結果に驚くことがあります。</p> + +<p>望む結果を得るには、文書のマークアップを変更する必要があるかもしれません。このチュートリアルの次のページで、このことについてもっと触れています。</p> + +<p>パディング、マージン、ボーダーについての詳しい情報は、リファレンスの <a href="/ja/docs/CSS/box_model" title="CSS/box model"><span>ボックスモデル</span></a> をご覧ください。</p> +</div> + +<h2 id="Action.3A_Adding_borders" name="Action.3A_Adding_borders">実習: ボーダーの追加</h2> + +<p>CSS ファイル <code>style2.css を編集します。次のルールを追加して、見出しのそれぞれで、ページを横切る線を描くようにしてください</code>:</p> + +<pre class="brush:css">h3 {border-top: 1px solid gray;} +</pre> + +<p>前のページのチャレンジを終えていれば、そこで作ったルールを編集するか、次の新しいルールを追加して、各リスト項目の真下にスペースを置くようにしてください:</p> + +<pre class="brush:css">li { + list-style: lower-roman; + margin-bottom: 8px; + } +</pre> + +<p>ブラウザを更新すると次の結果になります:</p> + +<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> + + <ul style=""> + <li style="margin-bottom: 8px;">Arctic</li> + <li style="margin-bottom: 8px;">Atlantic</li> + <li style="margin-bottom: 8px;">Pacific</li> + <li style="margin-bottom: 8px;">Indian</li> + <li style="margin-bottom: 8px;">Southern</li> + </ul> + + <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Numbered paragraphs</p> + + <p><strong>1: </strong>Lorem ipsum</p> + + <p><strong>2: </strong>Dolor sit</p> + + <p><strong>3: </strong>Amet consectetuer</p> + + <p><strong>4: </strong>Magna aliquam</p> + + <p><strong>5: </strong>Autem veleum</p> + </td> + </tr> + </tbody> +</table> + +<div class="tuto_example"> +<div class="tuto_type">チャレンジ</div> + +<p>スタイルシートに一つルールを追加して、リスト項目全体を囲むような広い枠を作り、海を連想するような色にしてください — 次のような感じです:</p> + +<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> + + <div style="border: 12px solid #69b; padding-left: 1em;"> + <ul style=""> + <li style="margin-bottom: 8px;">Arctic</li> + <li style="margin-bottom: 8px;">Atlantic</li> + <li style="margin-bottom: 8px;">Pacific</li> + <li style="margin-bottom: 8px;">Indian</li> + <li style="margin-bottom: 8px;">Southern</li> + </ul> + </div> + + <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Numbered paragraphs</p> + + <p><strong>. . .</strong></p> + </td> + </tr> + </tbody> +</table> + +<p>（幅や色を正確に同じにする必要はありません。）</p> +</div> + +<p><a href="/ja/docs/CSS/Getting_Started/Challenge_solutions#Boxes" title="https://developer.mozilla.org/ja/CSS/Getting_Started/Challenge_solutions#Boxes">このチャレンジの解答を見る。</a></p> + +<h2 id="What_next.3F" name="What_next.3F">さて次は？</h2> + +<p>{{nextPage("/ja/docs/CSS/Getting_Started/Layout", "Layout")}}マージンやパディングを指定して、文書のレイアウトを変えることができました。次のページでは、他の方法で文書の <a href="/ja/docs/CSS/Getting_Started/Layout" title="CSS/Getting_Started/Layout">レイアウト</a> を変えます。</p> diff --git a/files/ja/conflicting/learn/css/building_blocks/styling_tables/index.html b/files/ja/conflicting/learn/css/building_blocks/styling_tables/index.html new file mode 100644 index 0000000000..1f0905d1ec --- /dev/null +++ b/files/ja/conflicting/learn/css/building_blocks/styling_tables/index.html @@ -0,0 +1,478 @@ +--- +title: Tables +slug: Web/Guide/CSS/Getting_started/Tables +tags: + - CSS + - 'CSS:Getting_Started' +translation_of: Learn/CSS/Building_blocks/Styling_tables +translation_of_original: Web/Guide/CSS/Getting_started/Tables +--- +<div> + {{CSSTutorialTOC}}{{previousPage("/ja/docs/CSS/Getting_Started/Layout", "Layout")}}</div> +<p>これは <a href="/ja/docs/CSS/Getting_Started" title="CSS/Getting Started">CSS Getting Started</a> チュートリアルの第 13 章です。ここではさらに高度なセレクタと、テーブルのスタイルづけに特有の方法を述べます。テーブルを含む新しいサンプル文書と、スタイルシートを作ってください。</p> +<h2 class="clearLeft" id="Information.3A_Tables" name="Information.3A_Tables">表（テーブル）について</h2> +<p>テーブルは、縦軸 / 横軸のデータ構造を持つ情報の並びです。テーブルは複雑になることがあり、複雑なテーブルはブラウザによって違った表示になる場合があります。</p> +<p>文書を設計する際には、テーブルを細かな情報同士の <a href="/ja/docs/CSS/Getting_Started/Selectors#relselectors" title="CSS/Getting_Started/Selectors#relselectors">関係性</a> を示すのに使ってください。そうすれば、ブラウザによって少し違った表示がされても問題ありません。目的が依然はっきりしているためです。</p> +<p>精密な視覚的レイアウトを作るために、テーブルの変わった使い方をしないでください。そういった目的には、このチュートリアルの前のページにある技法（<strong><a href="/ja/docs/CSS/Getting_Started/Layout" title="CSS/Getting_Started/Layout">レイアウト</a></strong>）のほうが適しています。</p> +<h3 id="Table_structure" name="Table_structure">テーブルの構造</h3> +<p>テーブルでは、情報の一つ一つが <em>セル（cell）</em> に入れて表示されます。</p> +<p>ページを横切るように並ぶセルが、 行（<em>row</em>）を作ります。</p> +<p>テーブルによっては、行はグループ化されているかもしれません。テーブルの初めにある特殊な行グループが、<em>ヘッダー（header）</em>です。テーブルの終わりにある特殊な行グループが、<em>フッター（footer）</em>です。テーブルの中心的な行が <em>ボディ（body）</em>で、これも、グループに入っているかもしれません。</p> +<p>ページ下方に向けて並ぶセルは<em>列（column）</em>を作りますが、CSS のテーブルでは、列の用途には制限があります。</p> +<div class="tuto_example"> + <div class="tuto_type"> + 例</div> + <p><a href="/ja/docs/CSS/Getting_Started/Selectors" title="CSS/Getting_Started/Selectors">Selectors</a> ページの <a href="/ja/docs/CSS/Getting_Started/Selectors#relselectors" title="CSS/Getting_Started/Selectors#relselectors">Selectors based on relationships</a> の表には、行が 5 つ、セルが 10 個あります。</p> + <p>最初の行はヘッダーです。残りの 4 つの行はボディです。フッターはありません。</p> + <p>列は 2 つあります。</p> +</div> +<p>このチュートリアルでは結果が予測できるような、簡単なテーブルしか扱いません。簡単なテーブルでは、各セルがどれも 1 つの行と 1 つの列を占めます。セルが 1 行や 1 列以上に <em>伸びた（span）</em>複雑なテーブルにも CSS を使えますが、そういったテーブルはこの基本チュートリアルの範疇を超えています。</p> +<h3 id="Borders" name="Borders">ボーダー</h3> +<p>セルにはマージンがありません。</p> +<p>セルにはボーダーとパディングがあります。デフォルトでは、ボーダーはテーブルの {{cssxref("border-spacing")}} プロパティで決められます。テーブルの {{cssxref("border-collapse")}} プロパティを <code>collapse</code> にすると、間隔を完全に取り除くことができます。</p> +<div class="tuto_example"> + <div class="tuto_type"> + 例</div> + <p>テーブルが 3 つあります。</p> + <p>左のテーブルには 0.5em 幅のボーダーがあります。中央のテーブルには幅ゼロのボーダーがあります。右のテーブルには 折り畳まれた（collapsed）ボーダーがあります:<br> + （表示例は、この wiki の制限により、正しく表示されていないかもしれません）</p> + <table style="border: 2px outset #36b ; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td style="padding-right: 2em;"> + <table style="border-collapse: separate;"> + <tbody> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Clubs</td> + <td style="border: 1px solid #c00; text-align: center;">Hearts</td> + </tr> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Diamonds</td> + <td style="border: 1px solid #c00; text-align: center;">Spades</td> + </tr> + </tbody> + </table> + </td> + <td style="padding-right: 2em;"> + <table style="border-collapse: separate;"> + <tbody> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Clubs</td> + <td style="border: 1px solid #c00; text-align: center;">Hearts</td> + </tr> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Diamonds</td> + <td style="border: 1px solid #c00; text-align: center;">Spades</td> + </tr> + </tbody> + </table> + </td> + <td style="padding-right: 6em;"> + <table style="border-collapse: collapse;"> + <tbody> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Clubs</td> + <td style="border: 1px solid #c00; text-align: center;">Hearts</td> + </tr> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Diamonds</td> + <td style="border: 1px solid #c00; text-align: center;">Spades</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> +</div> +<h3 id="Captions" name="Captions">キャプション</h3> +<p>{{HTMLElement("caption")}} 要素はテーブル全体に当てられるラベルです。デフォルトでは、テーブルの一番上に表示されます。</p> +<p>底部に移動させるには、{{cssxref("caption-side")}} プロパティを <code>bottom</code> にします。プロパティは継承されるので、テーブルに設定することも、祖先要素に設定することもできます。</p> +<p>キャプションの文字にスタイルをつけるには、通常のテキスト用のプロパティを使ってください。</p> +<div class="tuto_example"> + <div class="tuto_type"> + 例</div> + <p>このテーブルは底部にキャプションがあります</p> + <p>（表示例は、この wiki の制限により、正しく表示されていないかもしれません）</p> + <pre class="brush: css">#demo-table > caption { + caption-side: bottom; + font-style: italic; + text-align: right; +} +</pre> + <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;"> + <tbody> + <tr> + <td> + <table> + <caption> + Suits</caption> + <tbody> + <tr> + <td> + <table style="border-collapse: collapse;"> + <tbody> + <tr> + <td style="border: 1px solid gray; text-align: center;">Clubs</td> + <td style="border: 1px solid gray; text-align: center;">Hearts</td> + </tr> + <tr> + <td style="border: 1px solid gray; text-align: center;">Diamonds</td> + <td style="border: 1px solid gray; text-align: center;">Spades</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> +</div> +<h3 id="Empty_cells" name="Empty_cells">空のセル</h3> +<p>テーブル要素に {{cssxref("empty-cells")}}: show; と定義すると、空のセル（これはつまりセルのボーダーと背景です）を表示できます。</p> +<p>隠すには <code>empty-cells: hide;</code> と定義します。こうすると、セルの親要素に背景があるとき、空のセル越しに見ることができます。</p> +<div class="tuto_example"> + <div class="tuto_type"> + 例</div> + <p>次のテーブルは薄い緑の背景を持っています。各セルは薄い灰色の背景と濃い灰色のボーダーを持っています。</p> + <p>左のテーブルでは、空セルが見えています。右のテーブルでは隠されています:</p> + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td style="padding-right: 2em;"> + <table style="border-collapse: separate; background-color: #dfd;"> + <tbody> + <tr> + <td style="border: 1px solid #555; background-color: #eee;"> </td> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Hearts</td> + </tr> + <tr> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Diamonds</td> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Spades</td> + </tr> + </tbody> + </table> + </td> + <td style="padding-right: 6em;"> + <table style="border-collapse: separate; background-color: #dfd;"> + <tbody> + <tr> + <td> </td> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Hearts</td> + </tr> + <tr> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Diamonds</td> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Spades</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> +</div> +<div class="tuto_details"> + <div class="tuto_type"> + 詳細</div> + <p>テーブルについての詳しい情報は、CSS 仕様書の <a href="http://www.w3.org/TR/CSS21/tables.html">Tables</a> をご覧ください。</p> + <p>そこにある情報はこのチュートリアルを超えたものになりますが、そこでは、複雑なテーブルに影響する、ブラウザ間の相違については触れていません。</p> +</div> +<h2 id="Action.3A_Styling_a_table" name="Action.3A_Styling_a_table">実習: テーブルのスタイルづけ</h2> +<ol> + <li>新しい HTML 文書 <code>doc3.html</code> を作ってください。次の内容をコピー＆ペーストしてください。スクロールさせて、コピー漏れがないか確認してください: + <div style="height: 36em; overflow: auto;"> + <pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <title>Sample document 3</title> + <link rel="stylesheet" href="style3.css"> + </head> + <body> + <table id="demo-table"> + <caption>Oceans</caption> + <thead> + <tr> + <th></th> + <th>Area</th> + <th>Mean depth</th> + </tr> + <tr> + <th></th> + <th>million km<sup>2</sup></th> + <th>m</th> + </tr> + </thead> + <tbody> + <tr> + <th>Arctic</th> + <td>13,000</td> + <td>1,200</td> + </tr> + <tr> + <th>Atlantic</th> + <td>87,000</td> + <td>3,900</td> + </tr> + <tr> + <th>Pacific</th> + <td>180,000</td> + <td>4,000</td> + </tr> + <tr> + <th>Indian</th> + <td>75,000</td> + <td>3,900</td> + </tr> + <tr> + <th>Southern</th> + <td>20,000</td> + <td>4,500</td> + </tr> + </tbody> + <tfoot> + <tr> + <th>Total</th> + <td>361,000</td> + <td></td> + </tr> + <tr> + <th>Mean</th> + <td>72,000</td> + <td>3,800</td> + </tr> + </tfoot> + </table> + </body> +</html> +</pre> + </div> + </li> + <li>新しいスタイルシート <code>style3.css</code> を作ります。次の内容をコピー＆ペーストしてください。スクロールして、コピー漏れがないことを確認します: + <pre class="brush: css">/*** Style for doc3.html (Tables) ***/ + +#demo-table { + font: 100% sans-serif; + background-color: #efe; + border-collapse: collapse; + empty-cells: show; + border: 1px solid #7a7; +} + +#demo-table > caption { + text-align: left; + font-weight: bold; + font-size: 200%; + border-bottom: .2em solid #4ca; + margin-bottom: .5em; +} + + +/* basic shared rules */ +#demo-table th, +#demo-table td { + text-align: right; + padding-right: .5em; +} + +#demo-table th { + font-weight: bold; + padding-left: .5em; +} + + +/* header */ +#demo-table > thead > tr:first-child > th { + text-align: center; + color: blue; +} + +#demo-table > thead > tr + tr > th { + font-style: italic; + color: gray; +} + +/* fix size of superscript */ +#demo-table sup { + font-size: 75%; +} + +/* body */ +#demo-table td { + background-color: #cef; + padding:.5em .5em .5em 3em; +} + +#demo-table tbody th:after { + content: ":"; +} + + +/* footer */ +#demo-table tfoot { + font-weight: bold; +} + +#demo-table tfoot th { + color: blue; +} + +#demo-table tfoot th:after { + content: ":"; +} + +#demo-table > tfoot td { + background-color: #cee; +} + +#demo-table > tfoot > tr:first-child td { + border-top: .2em solid #7a7; +} +</pre> + </li> + <li>文書をブラウザで開きます。次の内容に似たものになるでしょう: + <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;"> + <tbody> + <tr> + <td> + <div> + <p style="font: bold 200% sans-serif; text-align: left; border-bottom: .2em solid #4ca; margin: 0px 0px .5em 0px;">Oceans</p> + <div style="border: 1px solid #7a7; background-color: #efe;"> + <table style="font: 100% sens-serif; background-color: #efe; border-collapse: collapse; text-align: right; padding-right: .5em;"> + <tbody> + <tr style="text-align: center; color: blue;"> + <th> </th> + <th>Area</th> + <th style="padding-left: .5em; padding-right: .5em;">Mean depth</th> + </tr> + <tr style="font-style: italic; color: gray;"> + <th> </th> + <th style="padding-left: .5em; padding-right: .5em;">million km<sup>2</sup></th> + <th style="padding-left: .5em; padding-right: .5em;">m</th> + </tr> + <tr> + <th style="padding-right: .5em;">Arctic:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">13,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">1,200</td> + </tr> + <tr> + <th style="padding-right: .5em;">Atlantic:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">87,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td> + </tr> + <tr> + <th style="padding-right: .5em;">Pacific:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">180,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,000</td> + </tr> + <tr> + <th style="padding-right: .5em;">Indian:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">75,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td> + </tr> + <tr> + <th style="padding-left: .5em; padding-right: .5em;">Southern:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">20,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,500</td> + </tr> + <tr> + <th style="padding-right: .5em; color: blue;">Total:</th> + <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td> + <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td> + </tr> + <tr> + <th style="padding-right: .5em; color: blue;">Mean:</th> + <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td> + <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td> + </tr> + </tbody> + </table> + </div> + </div> + </td> + </tr> + </tbody> + </table> + </li> + <li>表示されたテーブルとスタイルシートにあるルールを比較して、各行の働きを理解できているか確かめてください。自信のないルールを見つけたら、そのルールをコメントアウトしてブラウザを更新し、何が起きるか見てみましょう。このテーブルに関する注意点は次のとおりです: + <ul> + <li>キャプションはテーブルのボーダーより外側に置かれています。</li> + <li>もしオプションでフォントの最小値を設定していれば、 km<sup>2</sup> の上付き文字に影響します。</li> + <li>空セルが 3 つあります。そのうち2つは、テーブルの背景を透過しています。 3 つ目は背景と上辺にボーダーを持ちます。</li> + <li>コロンはスタイルシートで追加しています。</li> + </ul> + </li> +</ol> +<div class="tuto_example"> + <div class="tuto_type"> + チャレンジ</div> + <p>スタイルシートを、テーブルが次のようになるように変えてください:</p> + <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;"> + <tbody> + <tr> + <td> + <div> + <div style="border: 1px solid #7a7; background-color: #efe;"> + <table style="font: 100% sens-serif; background-color: #efe; border-collapse: collapse; text-align: right; padding-right: .5em;"> + <tbody> + <tr style="text-align: center; color: blue;"> + <th> </th> + <th>Area</th> + <th style="padding-left: .5em; padding-right: .5em;">Mean depth</th> + </tr> + <tr style="font-style: italic; color: gray;"> + <th> </th> + <th style="padding-left: .5em; padding-right: .5em;">million km<sup>2</sup></th> + <th style="padding-left: .5em; padding-right: .5em;">m</th> + </tr> + <tr> + <th style="padding-right: .5em;">Arctic:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">13,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">1,200</td> + </tr> + <tr> + <th style="padding-right: .5em;">Atlantic:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">87,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td> + </tr> + <tr> + <th style="padding-right: .5em;">Pacific:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">180,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,000</td> + </tr> + <tr> + <th style="padding-right: .5em;">Indian:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">75,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td> + </tr> + <tr> + <th style="padding-left: .5em; padding-right: .5em;">Southern:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">20,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,500</td> + </tr> + <tr> + <th style="padding-right: .5em; color: blue;">Total:</th> + <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td> + <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td> + </tr> + <tr> + <th style="padding-right: .5em; color: blue;">Mean:</th> + <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td> + <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td> + </tr> + </tbody> + </table> + </div> + <p style="font: italic 100% sans-serif; text-align: right; border-top: .4em solid #4ca; margin: 1em 0px 0px 0px;">Oceans</p> + </div> + </td> + </tr> + </tbody> + </table> +</div> +<p><a href="/ja/docs/CSS/Getting_Started/Challenge_solutions#Tables" title="CSS/Getting started/Challenge solutions#Tables">チャレンジの解答を見る。</a></p> +<h2 id="What_next.3F" name="What_next.3F">さて次は？</h2> +<p>{{nextPage("/ja/docs/CSS/Getting_Started/Media", "Media")}} このページは、CSS のプロパティと値に主眼を置いたチュートリアルの最後のページです。プロパティと値についてのすべての概要については、CSS 仕様書の <a href="http://www.w3.org/TR/CSS21/propidx.html">Full property table</a> をご覧ください。</p> +<p>次のページでは、CSS スタイルシートの目的と構造を<a href="/ja/docs/CSS/Getting_Started/Media" title="CSS/Getting_Started/Media">もう一度見ていきます</a>。</p> diff --git a/files/ja/conflicting/learn/css/building_blocks/values_and_units/index.html b/files/ja/conflicting/learn/css/building_blocks/values_and_units/index.html new file mode 100644 index 0000000000..4d080bc3a4 --- /dev/null +++ b/files/ja/conflicting/learn/css/building_blocks/values_and_units/index.html @@ -0,0 +1,349 @@ +--- +title: 色 +slug: Web/Guide/CSS/Getting_started/Color +tags: + - CSS + - 'CSS:Getting_Started' + - Getting_Started +translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors +translation_of_original: Web/Guide/CSS/Getting_started/Color +--- +<p>この文書では、CSS 中でどのように色を指定するかについて詳細に説明します。</p> + +<p>サンプルスタイルシートに、背景色を指定出来るようになります。</p> + +<p>{{ 英語版章題("Information: Color") }}</p> + +<h3 id=".E8.A7.A3.E8.AA.AC:_.E8.89.B2" name=".E8.A7.A3.E8.AA.AC:_.E8.89.B2">解説: 色</h3> + +<p>このチュートリアルでは、限られた名前付きの色だけを利用してきました。 CSS 2 では 17 個しか名前付きの色が定義されていません。 それらのいくつかの名前は、想像と異なるかもしれません。</p> + +<table style="border: 0px; margin-left: 2em; text-align: right;"> + <tbody> + <tr> + <td> </td> + <td>black</td> + <td style="width: 2em; height: 2em; background-color: black;"> </td> + <td>gray</td> + <td style="width: 2em; height: 2em; background-color: gray;"> </td> + <td>silver</td> + <td style="width: 2em; height: 2em; background-color: silver;"> </td> + <td>white</td> + <td style="width: 2em; height: 2em; background-color: white; border: 1px dotted gray;"> </td> + </tr> + <tr> + <td>プライマリー</td> + <td>red</td> + <td style="width: 2em; height: 2em; background-color: red;"> </td> + <td>lime</td> + <td style="width: 2em; height: 2em; background-color: lime;"> </td> + <td>blue</td> + <td style="width: 2em; height: 2em; background-color: blue;"> </td> + </tr> + <tr> + <td>セカンダリー</td> + <td>yellow</td> + <td style="width: 2em; height: 2em; background-color: yellow;"> </td> + <td>aqua</td> + <td style="width: 2em; height: 2em; background-color: aqua;"> </td> + <td>fuchsia</td> + <td style="width: 2em; height: 2em; background-color: fuchsia;"> </td> + </tr> + <tr> + <td> </td> + <td>maroon</td> + <td style="width: 2em; height: 2em; background-color: maroon;"> </td> + <td>orange</td> + <td style="width: 2em; height: 2em; background-color: orange;"> </td> + <td>olive</td> + <td style="width: 2em; height: 2em; background-color: olive;"> </td> + <td>purple</td> + <td style="width: 2em; height: 2em; background-color: purple;"> </td> + <td>green</td> + <td style="width: 2em; height: 2em; background-color: green;"> </td> + <td>navy</td> + <td style="width: 2em; height: 2em; background-color: navy;"> </td> + <td>teal</td> + <td style="width: 2em; height: 2em; background-color: teal;"> </td> + </tr> + </tbody> +</table> + +<p> </p> + +<table style="background-color: #f4f4f4; border: 1px solid #36b; padding: 1em;"> + <caption>詳細情報</caption> + <tbody> + <tr> + <td>ブラウザが上記以上の名前付きの色をサポートしている可能性もあります + <table style="background-color: inherit; border: 0px; margin: .5em 0px .5em 2em; text-align: right;"> + <tbody> + <tr> + <td>dodgerblue</td> + <td style="width: 2em; height: 2em; background-color: dodgerblue;"> </td> + <td>peachpuff</td> + <td style="width: 2em; height: 2em; background-color: peachpuff;"> </td> + <td>tan</td> + <td style="width: 2em; height: 2em; background-color: tan;"> </td> + <td>firebrick</td> + <td style="width: 2em; height: 2em; background-color: firebrick;"> </td> + <td>aquamarine</td> + <td style="width: 2em; height: 2em; background-color: aquamarine;"> </td> + </tr> + </tbody> + </table> + + <p>拡張された色の名前リストについては、CSS 3 カラーモジュールの <a class="external" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#svg-color">SVG 色キーワード</a> を参照してください。利用者のブラウザがサポートしていない色を利用しないように注意してください。</p> + </td> + </tr> + </tbody> +</table> + +<p>より広い色空間を利用するためには、赤、緑、青の各色の割合を、# の後に 3 文字の<em>16 進数</em> 、0 – 9 か a – f、a – f は 10 – 15 を意味します、で指定してください。</p> + +<table style="border: 0px; margin-left: 2em;"> + <tbody> + <tr> + <td>black</td> + <td style="width: 2em; height: 2em; background-color: #000;"> </td> + <td><code>#000</code></td> + </tr> + <tr> + <td>pure red</td> + <td style="width: 2em; height: 2em; background-color: #f00;"> </td> + <td><code>#f00</code></td> + </tr> + <tr> + <td>pure green</td> + <td style="width: 2em; height: 2em; background-color: #0f0;"> </td> + <td><code>#0f0</code></td> + </tr> + <tr> + <td>pure blue</td> + <td style="width: 2em; height: 2em; background-color: #00f;"> </td> + <td><code>#00f</code></td> + </tr> + <tr> + <td>white</td> + <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> + <td><code>#fff</code></td> + </tr> + </tbody> +</table> + +<p>完全な色空間を利用するためには、それぞれの色について 2 文字の 16 進数を利用します。</p> + +<table style="border: 0px; margin-left: 2em;"> + <tbody> + <tr> + <td>black</td> + <td style="width: 2em; height: 2em; background-color: #000;"> </td> + <td><code>#000000</code></td> + </tr> + <tr> + <td>pure red</td> + <td style="width: 2em; height: 2em; background-color: #f00;"> </td> + <td><code>#ff0000</code></td> + </tr> + <tr> + <td>pure green</td> + <td style="width: 2em; height: 2em; background-color: #0f0;"> </td> + <td><code>#00ff00</code></td> + </tr> + <tr> + <td>pure blue</td> + <td style="width: 2em; height: 2em; background-color: #00f;"> </td> + <td><code>#0000ff</code></td> + </tr> + <tr> + <td>white</td> + <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> + <td><code>#ffffff</code></td> + </tr> + </tbody> +</table> + +<p>これらの 6 桁の 16 進数は画像ソフトやその他のツールで取得可能です。</p> + +<table style="background-color: #fffff4; border: 1px solid #36b; padding: 1em;"> + <caption>Examples</caption> + <tbody> + <tr> + <td>少し練習すると、ほとんどの場面で 3 文字色指定は手動で調整できるようになります。 + <table style="background-color: #fffff4; border: 0px; margin-left: 2em;"> + <tbody> + <tr> + <td>赤から始めます</td> + <td style="width: 2em; height: 2em; background-color: #f00;"> </td> + <td><code>#f00</code></td> + </tr> + <tr> + <td>桃色に近づけるため、緑・青を追加</td> + <td style="width: 2em; height: 2em; background-color: #f77;"> </td> + <td><code>#f77</code></td> + </tr> + <tr> + <td>橙に近づけるため、緑を追加</td> + <td style="width: 2em; height: 2em; background-color: #fa7;"> </td> + <td><code>#fa7</code></td> + </tr> + <tr> + <td>暗くするため、全ての色を減らす</td> + <td style="width: 2em; height: 2em; background-color: #c74;"> </td> + <td><code>#c74</code></td> + </tr> + <tr> + <td>飽和を減らすため、色の値を近づける</td> + <td style="width: 2em; height: 2em; background-color: #c98;"> </td> + <td><code>#c98</code></td> + </tr> + <tr> + <td>色同士を完全に同じにすると、灰色</td> + <td style="width: 2em; height: 2em; background-color: #ccc;"> </td> + <td><code>#ccc</code></td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <td>空色のようなパステル調を出すには: + <table style="background-color: #fffff4; border: 0px; margin-left: 2em;"> + <tbody> + <tr> + <td>白から始めます:</td> + <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> + <td><code>#fff</code></td> + </tr> + <tr> + <td>他の色の値を少し減らします:</td> + <td style="width: 2em; height: 2em; background-color: #eef; border: 1px dotted gray;"> </td> + <td><code>#eef</code></td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> + +<p> </p> + +<table style="background-color: #f4f4f4; border: 1px solid #36b; padding: 1em;"> + <caption>More details</caption> + <tbody> + <tr> + <td>色の指定は、上記以外にでも、RGB 値を 0 – 255 の 10 進数やパーセント値で指定できます。 + <p>たとえば、次の色はマロン (濃い赤) になります :</p> + + <div style="width: 24em;"> + <pre> +rgb(128, 0, 0) +</pre> + </div> + + <p><br> + 色指定の詳細については、CSS 仕様書の <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#color-units">色</a> をご覧ください。</p> + + <p>メニューや ThreeDFace のようなシステム色とあわせるための情報として、CSS 仕様書の <a class="external" href="http://www.w3.org/TR/CSS21/ui.html#system-colors">CSS2 システム色</a> があります。</p> + </td> + </tr> + </tbody> +</table> + +<p><br> + {{ 英語版章題("Color properties") }}</p> + +<h4 id=".E8.89.B2.E3.81.AE.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.83.BC" name=".E8.89.B2.E3.81.AE.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.83.BC">色のプロパティー</h4> + +<p><code>color</code> プロパティーをすでに利用しました。</p> + +<p>同様に <code>background-color</code> プロパティーを指定することで、要素の背景色を変えることができます。</p> + +<p>背景色には <code>transparent</code> を指定でき、明示的に親要素の背景色を透過して、明示的に上書きすることも可能です。</p> + +<table style="background-color: #fffff4; border: 1px solid #36b; padding: 1em;"> + <caption>Example</caption> + <tbody> + <tr> + <td>このチュートリアルの <strong>サンプル</strong> ボックスは、このような 淡黄色を背景色にしています。 + <div style="width: 24em;"> + <pre> +background-color: #fffff4; +</pre> + </div> + + <p><strong>より詳細は</strong> のボックスは淡灰色を使っています。</p> + + <div style="width: 24em;"> + <pre> +background-color: #f4f4f4; +</pre> + </div> + </td> + </tr> + </tbody> +</table> + +<p>{{ 英語版章題("Action: Using color codes") }}</p> + +<h3 id=".E8.A9.A6.E3.81.97.E3.81.A6.E3.81.BF.E3.81.BE.E3.81.97.E3.82.87.E3.81.86:_.E3.82.AB.E3.83.A9.E3.83.BC.E3.82.B3.E3.83.BC.E3.83.89.E3.82.92.E5.88.A9.E7.94.A8.E3.81.99.E3.82.8B" name=".E8.A9.A6.E3.81.97.E3.81.A6.E3.81.BF.E3.81.BE.E3.81.97.E3.82.87.E3.81.86:_.E3.82.AB.E3.83.A9.E3.83.BC.E3.82.B3.E3.83.BC.E3.83.89.E3.82.92.E5.88.A9.E7.94.A8.E3.81.99.E3.82.8B">試してみましょう: カラーコードを利用する</h3> + +<p>CSS ファイルを編集します。 以下で太字で書かれている変更を付け加え、最初の文字を淡青色の背景にしてください。 (ファイルのレイアウトとコメントは以下のものとは異なるとは思いますが、 好みのレイアウトやコメントの形式を利用してください。)</p> + +<div style="width: 32em;"> +<pre class="eval">/*** CSS Tutorial: Color page ***/ + +/* page font */ +body {font: 16px "Comic Sans MS", cursive;} + +/* paragraphs */ +p {color: blue;} +#first {font-style: italic;} + +/* initial letters */ +strong { + color: red; + <strong>background-color: #ddf;</strong> + font: 200% serif; + } + +.carrot {color: red;} +.spinach {color: green;} +</pre> +</div> + +<p>ブラウザを再読み込みして結果を見てみましょう。</p> + +<table> + <tbody> + <tr> + <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="background-color: #ddf; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddf; color: green; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddf; color: green; font: 200% serif;">S</strong>heets</td> + </tr> + <tr> + <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="background-color: #ddf; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddf; color: red; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddf; color: red; font: 200% serif;">S</strong>heets</td> + </tr> + </tbody> +</table> + +<p> </p> + +<table style="background-color: #ffe; border: 1px solid #36b; padding: 1em; width: 100%;"> + <caption>Challenge</caption> + <tbody> + <tr> + <td>結果を変えずに、CSS ファイルの全ての色の名前を 3 桁の数字のカラーコードにしてみましょう。 + <p>(完全に同じに出来ないかもしれませんが、近い色にできると思います。 完全に同じにするには 6 桁のカラーコードが必要ですが、選択には CSS 仕様書を参照するか、画像ツールを利用する必要があるかもしれません。)</p> + </td> + </tr> + </tbody> +</table> + +<p><br> + {{ 英語版章題("What next?") }}</p> + +<h4 id=".E6.AC.A1.E3.81.AF_.3F" name=".E6.AC.A1.E3.81.AF_.3F">次は ?</h4> + +<p>あなたのサンプルは完全にスタイルと中身に分離されました。</p> + +<p>次のページでは、この完全分離の状態に例外を作る方法を説明します。 <strong><a href="Content">Content</a></strong></p> diff --git a/files/ja/conflicting/learn/css/css_layout/index.html b/files/ja/conflicting/learn/css/css_layout/index.html new file mode 100644 index 0000000000..e8bd18d944 --- /dev/null +++ b/files/ja/conflicting/learn/css/css_layout/index.html @@ -0,0 +1,285 @@ +--- +title: Layout +slug: Web/Guide/CSS/Getting_started/Layout +tags: + - CSS + - 'CSS:Getting_Started' +translation_of: Learn/CSS/CSS_layout +translation_of_original: Web/Guide/CSS/Getting_started/Layout +--- +<div> + {{CSSTutorialTOC}} {{previousPage("/ja/docs/CSS/Getting_Started/Boxes", "Boxes")}}</div> +<p>これは <a href="/ja/docs/CSS/Getting_Started" title="CSS/Getting Started">CSS Getting Started</a> チュートリアルの第 12 章です。ここでは、文書のレイアウトを調整する方法をいくつか述べます。サンプル文書のレイアウトを変えてみましょう。</p> +<h2 class="clearLeft" id="レイアウトについて">レイアウトについて</h2> +<p>CSS を使うと、文書のレイアウトを変えるような様々な視覚効果を定義できます。レイアウト定義の手法には、上級者向けで、この基本チュートリアルの範疇を超えるようなものもあります。</p> +<p>多くのブラウザで同じ見た目になるようレイアウトを設計すると、スタイルシートはブラウザのデフォルトのスタイルシートやレイアウトエンジンと、入り組んだ方法で相互作用します。これもまた基本チュートリアルの範疇を超えた、上級者向けの話題です。</p> +<p>このページでは、あなたが試せるような簡単な技法をいくつか述べます。</p> +<h3 id="Document_structure" name="Document_structure">文書の構造</h3> +<p>文書のレイアウトを操作するなら、その構造を変える必要があるかもしれません。</p> +<p>お使いのマークアップ言語には、構造化のための汎用タグがあるかもしれません。たとえば、HTML では構造化に {{HTMLElement("div")}} 要素を使うことができます。</p> +<div class="tuto_example"> + <div class="tuto_type"> + 例</div> + <p>サンプル文書では、2 番目の見出しの下にある、番号づけされた段落はどれも、入れ物に入っていません。</p> + <p>セレクタで指定する要素がないため、スタイルシートでこれらの段落の周囲に枠を描くことができません。</p> + <p>この構造的な問題を直すために、段落の周りに {{HTMLElement("div")}} タグを一つ追加します。このタグは一意で、<code>id</code> 属性で見分けられます。</p> + <pre class="brush:html;highlight:[2,8]"><h3>Numbered paragraphs</h3> +<div id="numbered"> + <p>Lorem ipsum</p> + <p>Dolor sit</p> + <p>Amet consectetuer</p> + <p>Magna aliquam</p> + <p>Autem veleum</p> +</div> +</pre> + <p>これで、両方のリストの周りに枠を定義するルールをスタイルシートに追加できます。</p> + <pre class="brush:css">ul, #numbered { + border: 1em solid #69b; + padding-right:1em; +} +</pre> + <p>結果は次のようになります:</p> + <table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> + <div style="border: 12px solid #69b; margin-bottom: 16px; padding: 1em;"> + <ul style=""> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</li> + </ul> + </div> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> + <div style="border: 12px solid #69b; margin-bottom: 8px; padding: 0px 12em 0px .5em;"> + <p><strong>1: </strong>Lorem ipsum</p> + <p><strong>2: </strong>Dolor sit</p> + <p><strong>3: </strong>Amet consectetuer</p> + <p><strong>4: </strong>Magna aliquam</p> + <p><strong>5: </strong>Autem veleum</p> + </div> + </td> + </tr> + </tbody> + </table> +</div> +<h3 id="Size_units" name="Size_units">サイズの単位（Size units）</h3> +<p>このチュートリアルではこれまで、サイズを pixels (<code>px</code>) で定義してきました。これはコンピューターの画面のようなディスプレイデバイスでの用途にはふさわしいものです。しかし、ユーザがフォントサイズを変えると、レイアウトがおかしくなる可能性があります。</p> +<p>多くの用途で、サイズをパーセンテージか ems (<code>em</code>) で定義するのがよいでしょう。em は通常、現在のフォントサイズを指します（文字 m の幅）。ユーザがフォントサイズを変えると、レイアウトが自動的に調整されます。</p> +<div class="tuto_example"> + <div class="tuto_type"> + 例</div> + <p>次のテキストの左辺のボーダーは pixel 単位のサイズで定義されています。</p> + <p>右辺のボーダーは ems 単位のサイズで定義されています。</p> + <p>ブラウザの表示フォントサイズを変えて、右辺のボーダーが調整されることと、左辺のボーダーはされないことを確認してください:</p> + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td> + <div style=""> + 僕の大きさを変えてお願い</div> + </td> + </tr> + </tbody> + </table> +</div> +<div class="tuto_details"> + <div class="tuto_type"> + さらに詳しく</div> + <p>その他のデバイスには、これ以外の長さの単位が適しています。</p> + <p>これについては、このチュートリアルの後半のページにもっと情報があります。</p> + <p>すべての利用可能な値と単位の詳細は、CSS 仕様書の <a href="http://www.w3.org/TR/CSS21/syndata.html#values">Values</a> をご覧ください。</p> +</div> +<h3 id="Text_layout" name="Text_layout">テキストのレイアウト</h3> +<p>2 つのプロパティで、要素の内容がどのように文字寄せされるか定義します。これは、単純なレイアウトの調整にも使えます。</p> +<dl> + <dt> + {{cssxref("text-align")}}</dt> + <dd> + 文字寄せを行います。次のうちいずれかの値を使います: <code>left</code>, <code>right</code>, <code>center</code>, <code>justify</code></dd> + <dt> + {{cssxref("text-indent")}}</dt> + <dd> + 指定した幅でインデントを行います。</dd> +</dl> +<p>これらのプロパティは要素内のテキストだけではなく、テキストに似たコンテンツにも適用されます。これらのルールが要素の子に継承されることを忘れないでください。結果を見て驚かないように、子要素で明示的にこれらをオフにする必要があるかもしれません。</p> +<div class="tuto_example"> + <div class="tuto_type"> + 例: 見出しを中央寄せする</div> + <pre class="brush:css">h3 { + border-top: 1px solid gray; + text-align: center; +} +</pre> + <p>表示結果:</p> + <table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray; text-align: center;">(A) The oceans</p> + </td> + </tr> + </tbody> + </table> + <p>HTML 文書では、見出しの下に見える内容は構造的には見出しに含まれていません。したがって見出しを文字寄せしても、見出しの下にあるタグにそのスタイルは継承されません。</p> +</div> +<h3 id="Floats" name="Floats">フロート（Floats、浮動体）</h3> +<p>{{cssxref("float")}} プロパティは、要素を左または右に押しつけます。これは要素の位置やサイズを操作する簡単な方法です（以降、float 指定された要素のことをフローティング要素と呼びます）。</p> +<p>文書の残りのコンテンツは通常、フローティング要素の周囲に流れ込み（flow）ます。{{cssxref("clear")}} プロパティを使うと、残りの要素をフローティング要素から離して、この流れを制御できます。</p> +<div class="tuto_example"> + <div class="tuto_type"> + 例</div> + <p>サンプル文書では、リストはウィンドウいっぱいに広がります。これは、左側に浮動させると回避できます。</p> + <p>見出しを定位置に留めるには、その左側にあるフローティング要素から、見出しを離れさせるような定義も必要です。</p> + <pre class="brush:css">ul, +#numbered { float: left; } +h3 { clear: left; } +</pre> +</div> +<p>結果は次のようになります:</p> +<table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> + <div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding-left: 1em;"> + <ul style=""> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</li> + </ul> + </div> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> + <div style="float: left; border: 12px solid #69b; margin-bottom: 8px; padding-left: .5em;"> + <p><strong>1: </strong>Lorem ipsum</p> + <p><strong>2: </strong>Dolor sit</p> + <p><strong>3: </strong>Amet consectetuer</p> + <p><strong>4: </strong>Magna aliquam</p> + <p><strong>5: </strong>Autem veleum</p> + </div> + </td> + </tr> + </tbody> +</table> +<p>（ボックスの右側でボーダーがテキストに近すぎるので、少しパディングが必要です）</p> +<h3 id="Positioning" name="Positioning">位置取り</h3> +<p>{{cssxref("position")}} プロパティと次の値のうちの 1 つを指定すると、要素の位置を 4 つの方法で定義できます。</p> +<p>これは高度なプロパティです。基本チュートリアルで取り上げるのは、これが簡単に使えるためです。しかし、複雑なレイアウトに使うなら難しくなります。</p> +<dl> + <dt> + <code>relative</code></dt> + <dd> + 相対的。要素の位置は通常位置に比べて相対的に移動します。指定量だけ要素を動かす場合にこれを使ってください。場合によっては、要素のマージンを使って同じ効果が得られることがあります。</dd> + <dt> + <code>fixed</code></dt> + <dd> + 固定。要素の位置は固定されます。文書のウィンドウに対する相対値で指定してください。文書の他の部分がスクロールしても、要素は固定されたままです。</dd> + <dt> + <code>absolute</code></dt> + <dd> + 絶対的。要素は祖先要素の内、直近のポジショニング要素 (<code>position</code> プロパティの値が <code>relative</code>、<code>fixed</code> 、<code>absolute</code> の何れかの要素 ) に対する絶対位置に、もしくはポジショニング要素が無い場合はルート要素に対する絶対位置に配置されます。親要素自身に位置指定が必要無い場合には <code>position:relative</code> を用いる事により親要素自身への影響を回避できます。</dd> + <dt> + <code>static</code></dt> + <dd> + 静止。デフォルトです。明示的に位置づけをオフにしたいときにこの値を使ってください。</dd> +</dl> +<p><code>position</code> プロパティ（<code>static</code> を除く）の値といっしょに、次のプロパティから一つかそれ以上を指定します: <code>top</code> 、 <code>right</code> 、 <code>bottom</code> 、 <code>left</code> 、 <code>width</code> 、 <code>height</code> これにより、要素の現れる場所やおそらくはそのサイズも指定します。</p> +<div class="tuto_example"> + <div class="tuto_type"> + 例: 複数の要素を重ねる</div> + <p>2 つの要素を重なり合うように位置づけるには、文書に入れ物になる親要素を作り、その中に 2 つの要素を入れます:</p> + <pre class="brush:html"><div id="parent-div"> + <p id="forward">/</p> + <p id="back">\</p> +</div> +</pre> + <p>スタイルシートで、親要素の <code>position</code> を <code>relative</code> にします。移動量を指定する必要はありません。子要素の <code>position</code> を <code>absolute</code> にします。</p> + <pre class="brush:css">#parent-div { + position: relative; + font: bold 200% sans-serif; +} + +#forward, #back { + position: absolute; + margin: 0; /* 要素の周囲のマージンを 0 に */ + top: 0; /* 上部からの距離 */ + left: 0; /* 左部からの距離 */ +} + +#forward { + color: blue; +} + +#back { + color: red; +} +</pre> + <p>結果は、スラッシュの上にバックスラッシュが乗り、次のようになります。</p> + <div style="position: relative; left: .33em; font: bold 300% sans-serif;"> + <p style="position: absolute; margin: 0; top: 0; left: 0; color: blue;">/</p> + <p style="position: absolute; margin: 0; top: 0; left: 0; color: red;">\</p> + </div> + <table style="border: 2px outset #36b; padding: 1em; width: 30em; height: 5em; background-color: white;"> + <tbody> + <tr> + <td> </td> + </tr> + </tbody> + </table> +</div> +<div class="tuto_details"> + <div class="tuto_type"> + さらに詳しく</div> + <p>位置決めに関する完全な記事は、 CSS 仕様書の複雑な 2 つの章: <a href="http://www.w3.org/TR/CSS21/visuren.html">Visual formatting model</a> と <a href="http://www.w3.org/TR/CSS21/visudet.html">Visual formatting model details</a> にあります。</p> + <p>多くのブラウザで機能するようにスタイルシートをデザインするつもりなら、ブラウザごとの標準の解釈の仕方や、おそらくは特定ブラウザの特定バージョンのバグについても考慮する必要があります。</p> +</div> +<h2 id="Action.3A_Specifying_layout" name="Action.3A_Specifying_layout">実習: レイアウトの定義</h2> +<ol> + <li>サンプル文書 <code>doc2.html</code> と スタイルシート <code>style2.css</code> を、上の『<a href="#Document_structure" title="#Document structure"><strong>文書の構造</strong></a>』と『<a href="#Floats" title="#Floats"><strong>フロート</strong></a>』の各章にある例を使って変更してください。</li> + <li><a href="#Floats" title="#Floats"><strong>フロート</strong></a> の例にパディングを追加し、右のボーダーからテキストを <code>0.5em</code> 離してください。</li> +</ol> +<div class="tuto_example"> + <div class="tuto_type"> + チャレンジ</div> + <p>サンプル文書 <code>doc2.html</code> を変更して、文書の末尾近く、<code></body> の直前に次のタグを追加します。</code></p> + <pre class="brush:html"><img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin"> +</pre> + <p>もし初めの方のチュートリアルで画像ファイルをダウンロードしていなければ、いま行なって、他のサンプルファイルと同じディレクトリに置いてください。</p> + <p><img height="25" src="/@api/deki/files/490/=Yellow-pin.png" style="border: 3px solid #ccc;" width="20"></p> + <p>画像が文書内のどこに現れるか予測してみてください。ブラウザを更新して、予測が正しかったかどうかを見ます。</p> + <p>スタイルシートにルールを追加して、文書の右上に画像が置かれるようにしてください。</p> + <p>ブラウザを更新し、ウィンドウを小さくします。文書をスクロールしても、画像が右上に留まることを確認しましょう。</p> + <div style="position: relative; width: 29.5em; height: 18em;"> + <div style="overflow: auto; border: 2px outset #36b; padding: 1em; width: 29em; height: 16em; background-color: white;"> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> + <div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding: 0px .5em 0px 1em;"> + <ul style=""> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</li> + </ul> + </div> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> + <div style="float: left; border: 12px solid #69b; padding: 0 .5em 0 .5em;"> + <p><strong>1: </strong>Lorem ipsum</p> + <p><strong>2: </strong>Dolor sit</p> + <p><strong>3: </strong>Amet consectetuer</p> + <p><strong>4: </strong>Magna aliquam</p> + <p><strong>5: </strong>Autem veleum</p> + </div> + <p style=""> </p> + <div style="position: absolute; top: 2px; right: 0px;"> + <img alt="Yellow map pin" class="internal" src="/@api/deki/files/490/=Yellow-pin.png"></div> + </div> + </div> +</div> +<p><a class="button liveSample" href="/ja/docs/CSS/Getting_Started/Challenge_solutions#Layout" title="CSS/Getting_Started/Challenge_solutions#Layout">このチャレンジの解答を見る</a></p> +<h2 id="What_next.3F" name="What_next.3F">さて次は？</h2> +<p>{{nextPage("/ja/docs/CSS/Getting_Started/Tables", "Tables")}} あなたは、この基本チュートリアルのほとんどすべてのトピックスを踏破しました。次のページでは CSS ルールのもっと高度なセレクタと、<a href="/ja/docs/CSS/Getting_Started/Tables" title="CSS/Getting_Started/Tables">テーブル</a> のスタイルづけに特有のやり方をいくつか述べます。</p> diff --git a/files/ja/conflicting/learn/css/styling_text/styling_lists/index.html b/files/ja/conflicting/learn/css/styling_text/styling_lists/index.html new file mode 100644 index 0000000000..212947f4f6 --- /dev/null +++ b/files/ja/conflicting/learn/css/styling_text/styling_lists/index.html @@ -0,0 +1,246 @@ +--- +title: Lists +slug: Web/Guide/CSS/Getting_started/Lists +tags: + - CSS + - 'CSS:Getting_Started' +translation_of: Learn/CSS/Styling_text/Styling_lists +translation_of_original: Web/Guide/CSS/Getting_started/Lists +--- +<p>{{ CSSTutorialTOC() }}</p> +<p>{{ previousPage("/ja/docs/CSS/Getting_Started/Content", "Content") }} これは <a href="/ja/CSS/Getting_Started" title="ja/CSS/Getting Started">CSS Getting Started</a> チュートリアルの第10章です。CSS を使ってリストの外見を決める方法について述べます。リストを含む新しいサンプル文書と、リストの体裁を決めるスタイルシートを作ってください。</p> +<h2 class="clearLeft" id="リストについて">リストについて</h2> +<p><a href="/ja/docs/CSS/Getting_Started/Content" title="/ja/docs/CSS/Getting_Started/Content">前章</a> のチャレンジでは、どの要素の直前にでも、コンテンツを追加してリスト項目のように表示する方法がわかりました。</p> +<p>CSS にはリスト用に作られた特別なプロパティがあります。使えるときには使ったほうがたいてい便利です。</p> +<p>リストにスタイルを定義するには、{{ cssxref("list-style") }} プロパティを使ってマーカーの種類を指定します。</p> +<p>CSS ルールでは、セレクタにリスト項目要素を選ぶこともできますし（例：{{ HTMLElement("li") }}）、親のリスト要素を選んで、リスト要素がスタイルを継承するようにもできます（例：{{ HTMLElement ("ul") }}））。</p> +<h3 id="箇条書きリスト（unordered_list）">箇条書きリスト（unordered list）</h3> +<p><em>箇条書きリスト</em>では、すべてのリスト項目に同じ方法でマーカーがつきます。</p> +<p>CSS には3種類のマーカーがあり、ブラウザは次のように表示します:</p> +<ul style="padding-left: 2em;"> + <li style="list-style-type: disc;"><code>disc</code></li> + <li style="list-style-type: circle;"><code>circle</code></li> + <li style="list-style-type: square;"><code>square</code></li> +</ul> +<p>もしくは、画像の URL を指定できます。</p> +<div class="tuto_example"> + <div class="tuto_type"> + 例</div> + <p>次のルールはリスト項目のクラス別に異なったマーカーを定義します:</p> + <pre class="brush:css">li.open {list-style: circle;} +li.closed {list-style: disc;} +</pre> + <p>リスト内でこれらのクラスを使うと、open と closed の項目の区別がはっきりします（例：to-doリスト):</p> + <pre class="brush:css"><ul> + <li class="open">Lorem ipsum</li> + <li class="closed">Dolor sit</li> + <li class="closed">Amet consectetuer</li> + <li class="open">Magna aliquam</li> + <li class="closed">Autem veleum</li> +</ul> +</pre> + <p>結果は次のようになるでしょう:</p> + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td> + <ul style="padding-right: 6em;"> + <li style="list-style-type: circle;">Lorem ipsum</li> + <li style="list-style-type: disc;">Dolor sit</li> + <li style="list-style-type: disc;">Amet consectetuer</li> + <li style="list-style-type: circle;">Magna aliquam</li> + <li style="list-style-type: disc;">Autem veleum</li> + </ul> + </td> + </tr> + </tbody> + </table> +</div> +<h3 id="番号順リスト（ordered_lists）">番号順リスト（ordered lists）</h3> +<p><em>番号順リスト</em>では、リスト項目は各々違ったマーカーをつけられ、順番を表します。</p> +<p>マーカーの種類を定義するには {{ cssxref("list-style") }} プロパティを使ってください:</p> +<ul style="padding-left: 2em;"> + <li style=""><code>decimal</code></li> + <li style=""><code>lower-roman</code></li> + <li style=""><code>upper-roman</code></li> + <li style=""><code>lower-latin</code></li> + <li style=""><code>upper-latin</code></li> +</ul> +<div class="tuto_example"> + <div class="tuto_type"> + 例</div> + <p>これは <span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: inherit;">info クラスの </span><span style="line-height: inherit;">{{ HTMLElement("ol") }} 要素についてのルールで、項目が大文字のアルファベット</span><span style="line-height: inherit;">で識別されます。</span></p> + <pre class="brush:css">ol.info {list-style: upper-latin;} +</pre> + <p>リスト内の {{ HTMLElement("li") }} 要素はこのスタイルを継承します:</p> + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td> + <ul> + <li style="padding-right: 6em; list-style-type: upper-latin;">Lorem ipsum</li> + <li style="padding-right: 6em; list-style-type: upper-latin;">Dolor sit</li> + <li style="padding-right: 6em; list-style-type: upper-latin;">Amet consectetuer</li> + <li style="padding-right: 6em; list-style-type: upper-latin;">Magna aliquam</li> + <li style="padding-right: 6em; list-style-type: upper-latin;">Autem veleum</li> + </ul> + </td> + </tr> + </tbody> + </table> +</div> +<div class="tuto_details"> + <div class="tuto_type"> + さらに詳しく</div> + <p>{{ cssxref("list-style") }} は略記用のプロパティです。複雑なスタイルシートでは、値ごとに個別のプロパティを使いたくなるかもしれません。これら個別のプロパティや、CSS がリストを定義する方法については、リファレンス {{ cssxref("list-style") }} をご覧ください。</p> + <p>箇条書きリスト ({{ HTMLElement("ul") }}) や番号リスト ({{ HTMLElement("ol") }}) の慣例的なタグを定めている HTML のようなマークアップ言語を使うなら、その意図通りにタグを使うのはよい練習になります。しかしながら、CSSでは お望みであれば {{ HTMLElement("ul") }} に番号リストを表示させたり、{{ HTMLElement("ol") }} に箇条書きリストを表示させたりもできます。</p> + <p>リストのスタイルづけはブラウザによって実装方法が異なります。どのブラウザでも同じ結果が出るとは思わないでください。</p> +</div> +<h3 id="カウンター">カウンター</h3> +<div style="border: 1px solid red; padding: 6px; margin: 0 0 .5em -6px; width: 100%;"> + <p><strong>注: </strong> 一部のブラウザーはカウンターをサポートしていません。<a class="external" href="http://www.quirksmode.org/" title="http://www.quirksmode.org/">Quirks Mode site</a> の <a class="external" href="http://www.quirksmode.org/css/contents.html" style="line-height: inherit;" title="http://www.quirksmode.org/css/contents.html">CSS contents and browser compatibility</a><span style="line-height: inherit;"> ページに、カウンターや他の CSS 機能についてのブラウザの実装状況の詳しい表があります。このサイトの </span><a href="/ja/CSS_Reference" style="line-height: inherit;" title="https://developer.mozilla.org/ja/CSS_Reference">CSS Reference</a><span style="line-height: inherit;"> の各ページにもブラウザ実装状況の表があります。</span></p> +</div> +<p>カウンターはリスト項目だけでなく、どの要素にも番号をつけられます。例えば、ある文書では見出しや章を数えたいかもしれません。</p> +<p>通し番号を定義するには、独自に名前をつけた <em>counter</em> が必要です。</p> +<p>カウントが開始されるより前の要素のいずれかで、{{ cssxref("counter-reset") }} プロパティとカウンター名を使ってカウンターをリセットしてください。これは数える要素の親で行うのが適していますが、リスト項目より前に現れる要素ならどれでも使えます。</p> +<p>番号が増える要素の各々に {{ cssxref("counter-increment") }} プロパティとカウンター名を使ってください。</p> +<p>カウンターを表示するには、セレクタに {{ cssxref(":before") }} または {{ cssxref(":after") }} を追加し、<code>content</code> プロパティを使います（前のページ <strong><a href="/ja/CSS/Getting_Started/Content" title="en/CSS/Getting_Started/Content">コンテンツ</a></strong> で行った要領です）。</p> +<p><code>content</code> プロパティの値として、<code>counter()</code> とカウンター名を記述します。オプションとして種類を記述します。種類は上の <strong>番号順リスト</strong> の欄にあるものと同じです。</p> +<p>通常、カウンターを表示する要素もまたカウンターを増やします。</p> +<div class="tuto_example"> + <div class="tuto_type"> + 例</div> + <p>次のルールは <code>numbered</code> クラスを持つ <span style="line-height: inherit;">{{ HTMLElement("h3") }} 要素が現れるたびにカウンターを初期化します:</span></p> + <pre class="brush:css">h3.numbered {counter-reset: mynum;} +</pre> + <p> </p> + <p>次のルールは<span style="line-height: inherit;"> </span><code style="font-size: 14px; line-height: inherit;">numbered クラスを持つ </code><span style="line-height: inherit;">{{ HTMLELement("p") }} 要素が現れるたびにカウンターを表示し、番号を増やします:</span></p> + <pre class="brush:css">p.numbered:before { + content: counter(mynum) ": "; + counter-increment: mynum; + font-weight: bold;} +</pre> + <p>結果は次のようになります:</p> + <table style="border: 2px outset #36b; padding: .5em 6em .5em 1em; background-color: white;"> + <tbody> + <tr> + <td><strong>Heading</strong><br> + <p><strong>1: </strong>Lorem ipsum</p> + <p><strong>2: </strong>Dolor sit</p> + <p><strong>3: </strong>Amet consectetuer</p> + <p><strong>4: </strong>Magna aliquam</p> + <p><strong>5: </strong>Autem veleum</p> + </td> + </tr> + </tbody> + </table> +</div> +<div class="tuto_details"> + <div class="tuto_type"> + さらに詳しく</div> + <p>読者がみな、カウンターをサポートするブラウザを使っているとわからなければ、カウンターは使えません。</p> + <p>カウンターを使えると、リストの項目と切り離してカウンターにスタイルをつけられる利点があります。上の例では、カウンターは太字ですがリスト項目は違います。</p> + <p>もっと複雑な方法でカウンターを使えます — 例えば、様式に沿う文書の章、見出し、サブ見出し、段落を数えます。詳しくは、CSS 仕様書の <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters">Automatic counters and numbering</a> をご覧ください。</p> +</div> +<h2 id="実習_スタイルづけされたリスト">実習: スタイルづけされたリスト</h2> +<p>新しいHTML文書、<code>doc2.html</code> を作成してください。次の内容をコピー＆ペーストします:</p> +<pre class="brush:html;"><!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <title>Sample document 2</title> + <link rel="stylesheet" href="style2.css"> + </head> + <body> + + <h3 id="oceans">The oceans</h3> + <ul> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</li> + </ul> + + <h3 class="numbered">Numbered paragraphs</h3> + <p class="numbered">Lorem ipsum</p> + <p class="numbered">Dolor sit</p> + <p class="numbered">Amet consectetuer</p> + <p class="numbered">Magna aliquam</p> + <p class="numbered">Autem veleum</p> + + </body> +</html> +</pre> +<p>新しいスタイルシート、<code>style2.css を作成してください。次の内容をコピー＆ペーストします</code>:</p> +<pre class="brush:css;">/* numbered paragraphs */ +h3.numbered {counter-reset: mynum;} + +p.numbered:before { + content: counter(mynum) ": "; + counter-increment: mynum; + font-weight: bold; +} +</pre> +<p>レイアウトやコメントが気に入らなければ変えてください。</p> +<p>ブラウザで文書を開きます。カウンター対応のブラウザなら下の例に似たものが見えるでしょう。非対応のブラウザなら、数字が見えません（おそらくコロンも）:</p> +<table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">The oceans</p> + <ul style=""> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</li> + </ul> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">Numbered paragraphs</p> + <p><strong>1: </strong>Lorem ipsum</p> + <p><strong>2: </strong>Dolor sit</p> + <p><strong>3: </strong>Amet consectetuer</p> + <p><strong>4: </strong>Magna aliquam</p> + <p><strong>5: </strong>Autem veleum</p> + </td> + </tr> + </tbody> +</table> +<div class="tuto_example"> + <div class="tuto_type"> + チャレンジ</div> + <p>スタイルシートに一つルールを追加して、リスト項目に i から v のローマ数字で番号をつけてください:</p> + <table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">The oceans</p> + <ul style=""> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</li> + </ul> + </td> + </tr> + </tbody> + </table> + <p> </p> + <p>次のように、見出しを括弧内の大文字のアルファベットで識別するように、スタイルシートを変更してください:</p> + <table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(A) The oceans</p> + <p><strong>. . .</strong></p> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(B) Numbered paragraphs</p> + <p><strong>. . .</strong></p> + </td> + </tr> + </tbody> + </table> +</div> +<p><a href="/ja/CSS/Getting_Started/Challenge_solutions#Lists" title="en/CSS/Getting started/Challenge solutions#Lists">チャレンジの解答を見る。</a></p> +<h2 id="さて次は？">さて次は？</h2> +<p>{{ nextPage("/ja/docs/CSS/Getting_Started/Boxes", "ボックス") }} 文書を表示するとき、ブラウザは要素をページ上に並べる際に、要素を囲むようにスペースを作ります。次のページでは、要素の基礎となる形である <a href="/ja/CSS/Getting_Started/Boxes" title="en/CSS/Getting_Started/Boxes">ボックス（boxes）</a>を CSS で扱う方法について述べます。</p> diff --git a/files/ja/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html b/files/ja/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html new file mode 100644 index 0000000000..b87febbe05 --- /dev/null +++ b/files/ja/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html @@ -0,0 +1,303 @@ +--- +title: Getting Started (Javascript Tutorial) +slug: Web/JavaScript/Getting_Started +translation_of: Learn/Getting_started_with_the_web/JavaScript_basics +translation_of_original: Web/JavaScript/Getting_Started +--- +<h2 id="Why_JavaScript.3F" name="Why_JavaScript.3F">Why JavaScript?</h2> +<p>JavaScript is a powerful, complicated, and often misunderstood computer language. It enables the rapid development of applications in which users can enter data and view results easily.</p> +<p>The primary advantage to JavaScript, which is also known as ECMAScript, centers around the Web browser, thus having the ability to produce the same results on all platforms supported by the browser. The examples on this page, just like Google Maps, run on Linux, Windows, and Mac OS. With the recent growth of numerous JavaScript libraries it is now easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. Unlike the hype around other technologies pushed by various proprietary interests, JavaScript is really the only cross-platform, client-side programming language that is both free and universally adopted.</p> +<h2 id="What_you_should_already_know" name="What_you_should_already_know">What you should already know</h2> +<p>JavaScript is a very easy language to start programming with. All you need is a text editor and a Web browser to get started.</p> +<p>There are many other technologies that can be integrated into and developed along with JavaScript that are beyond the scope of this document. Don't expect to make a whole application like Google Maps all on your first day!</p> +<h2 id="Getting_Started" name="Getting_Started">Getting started</h2> +<p>Getting started with JavaScript is very easy. You don't have to have complicated development programs installed. You don't have to know how to use a shell, program Make, or use a compiler. JavaScript is interpreted by your Web browser. All you have to do is save your program as a text file and then open it up in your Web browser. That's it!</p> +<p>JavaScript is a great programming language for introductory computer languages. It allows instant feedback to the new student and teaches them about tools they will likely find useful in their real life. This is in stark contrast to C, C++, and Java which are really only useful for dedicated software developers.</p> +<h2 id="Browser_Compatibility_Issues" name="Browser_Compatibility_Issues">Browser compatibility issues</h2> +<p>There are variations between what functionality is available in the different browsers. Mozilla, Microsoft IE, Apple Safari, and Opera fluctuate in behavior. We intend on <a href="/en-US/docs/JavaScript/Compatibility" title="en-US/docs/JavaScript/Compatibility">documenting these variations</a>. You can mitigate these issues by using the various cross-platform JavaScript APIs that are available. These APIs provide common functionality and hide these browser fluctuations from you.</p> +<h2 id="How_to_try_the_Examples" name="How_to_try_the_Examples">How to try the examples</h2> +<p>The examples below have some sample code. There are many ways to try these examples out. If you already have your own website, then you should be able to just save these examples as new Web pages on your website.</p> +<p>If you do not have your own website, you can save these examples as files on your computer and open them up with the Web browser you are using now. JavaScript is a very easy language to use for beginning programmers for this reason. You don't need a compiler or a development environment; you and your browser are all you need to get started!</p> +<h2 id="Example:_Catching_a_mouse_click" name="Example:_Catching_a_mouse_click">Example: Catching a mouse click</h2> +<p>The specifics of event handling (event types, handler registration, propagation, etc.) are too extensive to be fully covered in this simple example. However, this example cannot demonstrate catching a mouse click without delving a little into the JavaScript event system. Just keep in mind that this example will only graze the full details about JavaScript events and that if you wish to go beyond the basic capabilities described here, read more about the JavaScript event system.</p> +<p>'Mouse' events are a subset of the total events issued by a Web browser in response to user actions. The following is a list of the events emitted in response to a user's mouse action:</p> +<ul> + <li>Click - issued when a user clicks the mouse</li> + <li>DblClick - issued when a user double-clicks the mouse</li> + <li>MouseDown - issued when a user depresses a mouse button (the first half of a click)</li> + <li>MouseUp - issued when a user releases a mouse button (the second half of a click)</li> + <li>MouseOut - issued when the mouse pointer leaves the graphical bounds of the object</li> + <li>MouseOver - issued when the mouse pointer enters the graphical bounds of the object</li> + <li>MouseMove - issued when the mouse pointer moves while within the graphical bounds of the object</li> + <li>ContextMenu - issued when the user clicks using the right mouse button</li> +</ul> +<p>Note that in the latest versions of HTML, the inline event handlers, i.e. the ones added as tag attributes, are expected to be all lowercase and that event handlers in script are always all lowercase.</p> +<p>The simplest method for capturing these events, to register event handlers - using HTML - is to specify the individual events as attributes for your element. Example:</p> +<pre class="brush:js"> <span onclick="alert('Hello World!');">Click Here</span></pre> +<p>The JavaScript code you wish to execute can be inlined as the attribute value or you can call a function which has been defined in a <script> block within the HTML page:</p> +<pre class="brush:js"><script type="text/javascript"> + function clickHandler () { + alert ("Hello, World!"); + } +</script> +<span onclick="clickHandler();">Click Here</span></pre> +<p>Additionally, the event object which is issued can be captured and referenced, providing the developer with access to specifics about the event such as which object received the event, the event's type, and which mouse button was clicked. Using the inline example again:</p> +<pre class="brush:js"><script type="text/javascript"> + function clickHandler(event) { + var eType = event.type; + /* the following is for compatibility */ + /* Moz populates the target property of the event object */ + /* IE populates the srcElement property */ + var eTarget = event.target || event.srcElement; + + alert( "Captured Event (type=" + eType + ", target=" + eTarget ); + } +</script> +<span onclick="clickHandler(event);">Click Here</span></pre> +<p>In addition to registering to receive events in your HTML, you can likewise set the same attributes of any HTMLElement objects generated by your JavaScript. The example below instantiates a span object, appends it to the page body, and registers the span object to receive mouse-over, mouse-out, mouse-down, and mouse-up events.</p> +<pre class="brush:js"><body></body> +<script type="text/javascript"> + function mouseeventHandler(event) { + /* The following is for compatibility */ + /* IE does NOT by default pass the event object */ + /* obtain a ref to the event if one was not given */ + if (!event) event = window.event; + + /* obtain event type and target as earlier */ + var eType = event.type; + var eTarget = event.target || event.srcElement; + alert(eType +' event on element with id: '+ eTarget.id); + } + + function onloadHandler () { + /* obtain a ref to the 'body' element of the page */ + var body = document.body; + /* create a span element to be clicked */ + var span = document.createElement('span'); + span.id = 'ExampleSpan'; + span.appendChild(document.createTextNode ('Click Here!')); + + /* register the span object to receive specific mouse events - + notice the lowercase of the events but the free choice in the names of the handlers you replace them with. + */ + span.onmousedown = mouseeventHandler; + span.onmouseup = mouseeventHandler; + span.onmouseover = mouseeventHandler; + span.onmouseout = mouseeventHandler; + + /* display the span on the page */ + body.appendChild(span); +} + +window.onload = onloadHandler; // since we replace the handler, we do NOT have () after the function name +</script></pre> +<h2 id="Example:_Catching_a_keyboard_event" name="Example:_Catching_a_keyboard_event">Example: Catching a keyboard event</h2> +<p>Similar to the "Catching a mouse event" example above, catching a keyboard event relies on exploring the JavaScript event system. Keyboard events are fired whenever any key is used on the keyboard.</p> +<p>The list of available keyboard events emitted in response to a keyboard action is considerably smaller than those available for mouse:</p> +<ul> + <li>KeyPress - issued when a key is depressed and released</li> + <li>KeyDown - issued when a key is depressed but hasn't yet been released</li> + <li>KeyUp - issued when a key is released</li> + <li>TextInput (available in Webkit browsers only at time of writing) - issued when text is input either by pasting, speaking, or keyboard. This event will not be covered in this article.</li> +</ul> +<p>In a <a class="new " href="/en-US/docs/DOM/event/keypress" rel="internal">keypress</a> event, the Unicode value of the key pressed is stored in either the <code>keyCode</code> or <code><a href="/en-US/docs/DOM/event.charCode" rel="internal">charCode</a></code> property, never both. If the key pressed generates a character (e.g., 'a'), <code>charCode</code> is set to the code of that character, respecting the letter case (i.e., <code>charCode</code> takes into account whether the shift key is held down). Otherwise, the code of the pressed key is stored in <code>keyCode</code>.</p> +<p>The simplest method for capturing keyboard events is again to register event handlers within the HTML, specifying the individual events as attributes for your element. Example:</p> +<pre class="brush:js"> <input type="text" onkeypress="alert ('Hello World!');" /> +</pre> +<p>As with mouse events, the JavaScript code you wish to execute can be inlined as the attribute value or you can call a function which has been defined in a <script> block within the HTML page:</p> +<pre class="brush:js"><script type="text/javascript"> + function keypressHandler() { + alert ("Hello, World!"); + } +</script> + +<input onkeypress="keypressHandler();" /> +</pre> +<p>Capturing the event and referencing the target (i.e., the actual key that was pressed) is achieved in a similar way to mouse events:</p> +<pre class="brush:js"><script type="text/javascript"> + function keypressHandler(evt) { + var eType = evt.type; // Will return "keypress" as the event type + /* here we again need to use a cross browser method + mozilla based browsers return which and others keyCode. + The <a href="/en-US/docs/JavaScript/Reference/Operators/Conditional_Operator" title="/en-US/docs/JavaScript/Reference/Operators/Conditional_Operator">Conditional operator</a> or ternary is a good choice */ + var keyCode = evt.which?evt.which:evt.keyCode; + var eCode = 'keyCode is ' + keyCode; + var eChar = 'charCode is ' + <span class="typ" style="background-color: transparent; margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; color: rgb(43, 145, 175);">String</span><span class="pun" style="background-color: transparent; color: rgb(0, 0, 0); margin: 0px; padding: 0px; border: 0px; vertical-align: baseline;">.</span><span class="pln" style="background-color: transparent; color: rgb(0, 0, 0); margin: 0px; padding: 0px; border: 0px; vertical-align: baseline;">fromCharCode(</span>keyCode); // or evt.charCode + alert ("Captured Event (type=" + eType + ", key Unicode value=" + eCode + ", ASCII value=" + eChar + ")"); + } +</script> +<input onkeypress="keypressHandler(event);" /></pre> +<p>Capturing any key event from the page can be done by registering the event at the document level and handling it in a function:</p> +<pre class="brush:js"><script type="text/javascript"> + document.onkeypress = keypressHandler(event); + document.onkeydown = keypressHandle(event); + document.onkeyup =keypressHandle(event) + +</script></pre> +<p>Here is a complete example that shows key event handling:</p> +<pre class="brush:js"><!DOCTYPE html> +<html> +<head> + <script> + var metaChar = false; + var exampleKey = 16; + function keyEvent(event) { + var key = event.keyCode || event.which; // alternative to ternary - if there is no keyCode, use which + var keychar = String.fromCharCode(key); + if (key==exampleKey) { metaChar = true; } + if (key!=exampleKey) { + if (metaChar) { + alert("Combination of metaKey + " + keychar) + metaChar = false; + } else { alert("Key pressed " + key); } + } + } + function metaKeyUp (event) { + var key = event.keyCode || event.which; + if (key==exampleKey) { metaChar = false; } + } + </script> +</head> +<body onkeydown="keyEvent(event)" onkeyup="metaKeyUp(event)"> + Try pressing any key! +</body> +</html></pre> +<h3 id="Browser_bugs_and_quirks">Browser bugs and quirks</h3> +<p>The two properties made available through the key events are <code>keyCode</code> and <code>charCode</code>. In simple terms, <code>keyCode</code> refers to the actual keyboard key that was pressed by the user, while <code>charCode</code> is intended to return that key's ASCII value. These two values may not necessarily be the same; for instance, a lower case 'a' and an upper case 'A' have the same <code>keyCode</code>, because the user presses the same key, but a different <code>charCode</code> because the resulting character is different.</p> +<p>The way in which browsers interpret the charCode is not a consistently-applied process. For example, Internet Explorer and Opera do not support <code>charCode</code>. However, they give the character information in <code>keyCode</code>, but only onkeypress. Onkeydown and onkeyup <code>keyCode</code> contain key information. Firefox uses a different word, "which", to distinguish the character.</p> +<p>Refer to the Mozilla Documentation on <a href="/en-US/docs/DOM/Event/UIEvent/KeyboardEvent" title="https://developer.mozilla.org/en-US/docs/DOM/Event/UIEvent/KeyEvent">Keyboard Events</a> for a further treatment of keyboard events.</p> +<p>{{ draft() }}</p> +<h2 id="Example:_Dragging_images_around" name="Example:_Dragging_images_around">Example: Dragging images around</h2> +<p>The following example allows moving the image of Firefox around the page:</p> +<pre class="brush:js"><!DOCTYPE html> +<html> +<head> +<style type='text/css'> +img { position: absolute; } +</style> + +<script type='text/javascript'> +window.onload = function() { + + movMeId = document.getElementById("ImgMov"); + movMeId.style.top = "80px"; + movMeId.style.left = "80px"; + + document.onmousedown = coordinates; + document.onmouseup = mouseup; + + function coordinates(e) { + if (e == null) { e = window.event;} + + // e.srcElement holds the target element in IE, whereas e.target holds the target element in Firefox + // Both properties return the HTML element the event took place on. + + var sender = (typeof( window.event ) != "undefined" ) ? e.srcElement : e.target; + + if (sender.id=="ImgMov") { + mouseover = true; + pleft = parseInt(movMeId.style.left); + ptop = parseInt(movMeId.style.top); + xcoor = e.clientX; + ycoor = e.clientY; + document.onmousemove = moveImage; + return false; + } else { + return false; + } + } + + function moveImage(e) { + if (e == null) { e = window.event; } + movMeId.style.left = pleft+e.clientX-xcoor+"px"; + movMeId.style.top = ptop+e.clientY-ycoor+"px"; + return false; + } + + function mouseup(e) { + document.onmousemove = null; + } +} +</script> +</head> + +<body> + <img id="ImgMov" src="http://placehold.it/100x100&text=JS" width="64" height="64" /> + <p>Drag and drop around the image in this page.</p> +</body> + +</html></pre> +<h2 id="Example:_Resizing_things" name="Example:_Resizing_things">Example: Resizing things</h2> +<div> + Example of resizing an image (the actual image is not resized, only the image's rendering.) + <pre class="brush:js"> <!DOCTYPE html> + <html> + <head> + <style> + #resizeImage { + margin-left: 100px; + } + </style> + <script> + window.onload = function() { + + var resizeId = document.getElementById("resizeImage"); + var resizeStartCoordsX, + resizeStartCoordsY, + resizeEndCoordsX, + resizeEndCoordsY; + + var resizeEndCoords; + var resizing = false; + + document.onmousedown = coordinatesMousedown; + document.onmouseup = coordinatesMouseup; + + function coordinatesMousedown(e) { + if (e == null) { + e = window.event; + } + + var element = (typeof( window.event ) != 'undefined' ) ? e.srcElement : e.target; + + if (element.id == "resizeImage") { + resizing = true; + resizeStartCoordsX = e.clientX; + resizeStartCoordsY = e.clientY; + } + return false; + } + + function coordinatesMouseup(e) { + if (e == null) { + e = window.event; + } + + if (resizing === true) { + var currentImageWidth = parseInt(resizeId.width); + var currentImageHeight = parseInt(resizeId.height); + + resizeEndCoordsX = e.clientX; + resizeEndCoordsY = e.clientY; + + resizeId.style.height = currentImageHeight - (resizeStartCoordsY - resizeEndCoordsY) + 'px'; + resizeId.style.width = currentImageWidth - (resizeStartCoordsX - resizeEndCoordsX) + 'px'; + + resizing = false; + } + return false; + } + } + </script> + </head> + + <body> + <img id="resizeImage" src="http://upload.wikimedia.org/wikipedia/commons/e/e7/Mozilla_Firefox_3.5_logo_256.png" +width="64" height="64" /> + <p>Click on the image and drag for resizing.</p> + </body> + + </html></pre> +</div> +<h2 id="Example:_Drawing_Lines" name="Example:_Drawing_Lines">Example: Drawing Lines</h2> +<p><span class="diff_add">{{todo("Need Content. Or, remove headline")}}</span></p> diff --git a/files/ja/conflicting/learn/html/howto/author_fast-loading_html_pages/index.html b/files/ja/conflicting/learn/html/howto/author_fast-loading_html_pages/index.html new file mode 100644 index 0000000000..08f5330b89 --- /dev/null +++ b/files/ja/conflicting/learn/html/howto/author_fast-loading_html_pages/index.html @@ -0,0 +1,201 @@ +--- +title: 読み込みが速い HTML ページを作成するための Tips +slug: Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages +tags: + - Advanced + - Guide + - HTML + - NeedsUpdate + - Performance + - Web + - Web Performance +translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages +--- +<p>これらの豆知識は、一般の知識や実験に基づくものです。</p> + +<p>ウェブページを最適化すると、訪問者に対して応答性のよいサイトを提供するだけでなく、ウェブサーバーやインターネット接続の負荷を低減する効果もあります。これは大規模なサイトや、緊急事態で通信量が急増するニュース速報のようなサイトでは重要でしょう。</p> + +<p>ページの読み込みパフォーマンスの最適化は、低速なダイヤルアップ接続やモバイルデバイスの利用者向けコンテンツのためだけではありません。ブロードバンド向けコンテンツでも重要であり、高速接続の利用者であっても劇的な改善につながるでしょう。</p> + +<h2 id="Tips" name="Tips">豆知識</h2> + +<h3 id="Reduce_page_weight" name="Reduce_page_weight">ページの量の削減</h3> + +<p>ページの量は、ページ読み込みパフォーマンスにおいて断然重要な要素です。</p> + +<p>最小化として知られる不要なホワイトスペースやコメントの削除、インラインのスクリプトや CSS の外部ファイルへの移動によりページの量を削減することで、ページの構造変更を最小限にしてダウンロードの性能を向上できるでしょう。</p> + +<p><a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a> のようなツールを利用すると、妥当な HTML ソースから行頭のホワイトスペースや過剰な空行を自動的に取り除くことができます。他に JavaScript ソースを、書式変更や難読化および長い識別子を短いものに置き換えることで 「{{原語併記("圧縮", "compress")}}」するツールもあります。</p> + +<h3 id="Minimize_the_number_of_files" name="Minimize_the_number_of_files">ファイル数の最少化</h3> + +<p>ウェブページが参照するファイル数を削減することで、ページのダウンロードに必要な <a href="/ja/docs/HTTP" title="ja/docs/HTTP">HTTP</a> コネクションの数が減り、それによってリクエストを送信したり、レスポンスを受け取ったりする時間が短縮できます。</p> + +<p>ブラウザーのキャッシュ設定によっては、ブラウザーが各ファイルの <code><a href="/ja/docs/Web/HTTP/Headers/If-Modified-Since">If-Modified-Since</a></code> ヘッダーで、ファイルが最後にダウンロードされてから変更されているかどうかを確認するリクエストを送信することがあります。ページをレンダリングする前に、ブラウザがこれらの各ファイルの変更時刻をチェックする必要があるため、参照されたファイルの最終変更時刻をチェックするのに時間がかかり過ぎると、ウェブページの初期表示が遅くなることがあります。</p> + +<p>CSS で多数の背景画像を使用している場合は、画像スプライトと呼ばれる方法でで画像を 1 つに結合することで必要な HTTP による参照の数を減らすことができます。すなわち、背景として用いる画像ファイルは毎回同じものを適用し、それを適切な x/y 座標に調整します。これは寸法が限られている要素について最善の方法ですが、適用できない場合もあるでしょう。しかし、HTTP リクエストを少なくしてキャッシュする画像を単一にすることで、ページの読み込み時間を削減できます。</p> + +<h3 id="コンテンツ配信ネットワーク_(CDN)_を使用する">コンテンツ配信ネットワーク (CDN) を使用する</h3> + +<p>この記事の目的のために、CDN はサーバーと訪問者の間の物理的な距離を縮めるための手段です。サーバーの起点と訪問者の間の距離が長くなると、読み込み時間が長くなります。ウェブサイトのサーバーがアメリカにあり、インドからの訪問者がいるとします。米国からの訪問者と比較して、ページの読み込み時間はインドの訪問者の方がはるかに長くなります。</p> + +<p>CDN は地理的に分散したサーバーネットワークで、ユーザーとウェブサイトの距離を縮めるために連携して機能します。CDN はキャッシュされたウェブサイトのバージョンを保存し、それらをユーザーに最も近いネットワークノードを介して訪問者に提供するので、<a href="http://www.webperformancetoday.com/2012/04/02/latency-101-what-is-latency-and-why-is-it-such-a-big-deal/">待ち時間</a>が短縮されます。</p> + +<p>参考文献:</p> + +<ul> + <li><a href="https://www.incapsula.com/cdn-guide/what-is-cdn-how-it-works.html">Understanding CDNs</a></li> +</ul> + +<h3 id="Reduce_domain_lookups" name="Reduce_domain_lookups">ドメイン検索の削減</h3> + +<p>ドメインが分かれていると DNS の参照に時間がかかるため、CSS の link や JavaScript や画像の src に多数のドメインが現れるほど、ページの読み込み時間が長くなるでしょう。</p> + +<p>現実的でない場合があるかもしれませんが、ページがあるドメインと異なるドメインの使用数は必要最低限にするよう注意すべきです。</p> + +<h3 id="Cache_reused_content" name="Cache_reused_content">再利用されるコンテンツのキャッシュ</h3> + +<p>どんなコンテンツでも、キャッシュできるか、キャッシュされているか、キャッシュ期限が適切であるかを確認してください。</p> + +<p>特に、<code>Last-Modified</code> ヘッダーに注意してください。これは、効率のよいページのキャッシュができるようにします。このヘッダーは、ファイルを読み込もうとしているユーザーエージェントに、ファイルがいつ更新されたかなどの情報を伝えます。多くのウェブサーバーは、静的なページ (<code>.html</code>、<code>.css</code> など) にはファイルシステムに格納されている最終更新日に基づいて、自動的に <code>Last-Modified</code> ヘッダーを追加します。もちろん、動的なページ (<code>.php</code>、<code>.aspx</code> など) については取得できないので、ヘッダーを送信しません。</p> + +<p>そのため、特に動的に生成されるページについては、この件について調べてみると有益です。よって特に、動的に生成されるページのためにこの問題について調べることは有益です。少し厄介ですが、通常キャッシュできないページのリクエストを大幅に節約できるでしょう。</p> + +<p>詳細情報:</p> + +<ol> + <li><a class="external" href="http://fishbowl.pastiche.org/2002/10/21/http_conditional_get_for_rss_hackers">HTTP Conditional Get for RSS Hackers</a></li> + <li><a class="external" href="http://annevankesteren.nl/archives/2005/05/http-304">HTTP 304: Not Modified</a></li> + <li><a class="external" href="https://ja.wikipedia.org/wiki/HTTP_ETag">Wikipedia の HTTP ETag の記事</a></li> + <li><a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec13.html">Caching in HTTP</a></li> +</ol> + +<h3 id="Optimally_order_the_components_of_the_page" name="Optimally_order_the_components_of_the_page">ページのコンポーネントの最適な順序</h3> + +<p>最初の表示に必要な CSS または JavaScript と共に、ページコンテンツをまずダウンロードすると、ページの読み込み中にユーザーに最もすばやくページを表示させることができます。このコンテンツは通常テキストであるため、転送中のテキスト圧縮の効率が良く、ユーザーへの反応がもっと早くなります。</p> + +<p>使用される前にページの読み込みが完了する必要がある動的機能は、最初は無効にしておき、ページの読み込みが完了した後でのみ有効にするようにしましょう。これにより、JavaScript がページコンテンツの後に読み込まれるようになり、ページ読み込み時に全体が表示されるまでの時間が短縮されます。</p> + +<h3 id="Reduce_the_number_of_inline_scripts" name="Reduce_the_number_of_inline_scripts">インラインスクリプト数の削減</h3> + +<p>インラインスクリプトがあると、インラインスクリプトのパース中にページの構造が変わる可能性があるとパーサーが想定しなければならないため、ページの読み込みにおいて重荷になることがあります。一般的にはインラインスクリプトの使用を減らし、また特に <code>document.write()</code> を用いたコンテンツの出力を減らすことで、ページ読み込みのパフォーマンスが向上するでしょう。 <code>document.write()</code> に基づく旧来のコンテンツ操作方法ではなく、最新のブラウザー向けの方法である <a href="/ja/docs/AJAX" title="ja/docs/AJAX">AJAX</a> を使用してください。</p> + +<h3 id="Use_modern_CSS_and_valid_markup" name="Use_modern_CSS_and_valid_markup">最新の CSS と正しいマークアップの使用</h3> + +<p>最新の CSS を用いるとマークアップの量を削減し、レイアウトの点で (スペーサーの) 画像使用を減らし、また多くの場合スタイル付けした文字列の画像を置き換えることが可能です。画像は CSS と文字列の組み合わせに比べ、多大なコストがかかります。</p> + +<p>正しいマークアップを使用することは、ほかにも利点があります。第一に、ブラウザーが HTML を解釈する際にエラー訂正を行う必要がなくなります (ユーザーの記述法の多様性を認めるかどうかという哲学的な問題とは別です。厳密な、許容範囲のない書式を強制するというより、プログラム的に「正しく」または正規化しましょう)</p> + +<p>さらに、正しいマークアップをすることによって、ウェブページを<em>プリプロセス</em>ができる他のツールが自由に利用できるようになります。例えば、<a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a> はホワイトスペースや省略可能な終了タグを除去することができます。しかし、重大なマークアップの誤りがあるページではツールを実行できません。</p> + +<h3 id="Chunk_your_content" name="Chunk_your_content">コンテンツをまとめる</h3> + +<p>テーブルをレイアウトのために使うのは陳腐化した方法であり、もはや使うべきではありません。レイアウトを行うには、代わりに <a href="/ja/docs/Learn/CSS/CSS_layout/Floats">floats</a>、<a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">positioning</a>、<a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a>、<a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a>を使用してください。</p> + +<p>テーブルは現在でも妥当なマークアップと考えられていますが、表形式のデータを表示するために用いるべきです。ブラウザーがページを迅速に表示するためには、テーブルを入れ子にしないようにしてください。</p> + +<p>以下のように深い入れ子のテーブルを使用する代わりに、</p> + +<pre><table> + <table> + <table> + ... + </table> + </table> +</table></pre> + +<p>以下のように入れ子にしないテーブルや div を用いてください。</p> + +<pre><table>...</table> +<table>...</table> +<table>...</table> +</pre> + +<p><a class="external" href="https://www.w3.org/TR/css-flexbox-1/" title="https://www.w3.org/TR/css-flexbox-1/">CSS Flexible Box Layout</a> と <a class="external" href="https://www.w3.org/TR/css-grid-1/" title="https://www.w3.org/TR/css-grid-1/">CSS Grid Layout</a> の仕様書も参照してください。</p> + +<h3 id="Minify_and_compress_SVG_assets" name="Minify_and_compress_SVG_assets">SVG の資産を最小化し圧縮する</h3> + +<p>多くの描画アプリケーションで作成された SVG は、不必要なメタデータを含んでいることが多く、削除することができます。サーバーで SVG 資産を gzip で圧縮するよう設定しましょう。</p> + +<h3 id="Minify_and_compress_your_images" name="Minify_and_compress_your_images">画像を縮小して圧縮する</h3> + +<p>画像が大きいと、ページの読み込みに時間がかかります。画像をページに追加する前に、圧縮することを検討してください。 <a href="https://compressjpeg.com/">Compress Jpeg</a>、<a href="https://tinypng.com">Tiny PNG</a>、その他多くのツールがオンラインで利用可能です。photoshop などのオフラインツールも使用できます。</p> + +<h3 id="Specify_sizes_for_images_and_tables" name="Specify_sizes_for_images_and_tables">画像やテーブルのサイズ指定</h3> + +<p>ブラウザーが直ちに画像やテーブルの高さや幅を決めることができれば、ブラウザーはコンテンツの再配置を行うことなくウェブページを表示できます。これはページの表示を高速化するだけでなく、ページの読み込みが完了するまでにレイアウトが不安定に変化することを防ぎます。よって、可能な限り画像には <code>height</code> と <code>width</code> を指定するべきです。</p> + +<p>テーブルは以下のセレクターとプロパティの組み合わせを用いるべきです:</p> + +<pre> table-layout: fixed; +</pre> + +<p>そして、 <code><a href="/ja/docs/Web/HTML/Element/col"><col></a></code> 要素および <code><a href="/ja/docs/Web/HTML/Element/colgroup"><colgroup></a></code> 要素を用いて列の幅を指定しましょう。</p> + +<h3 id="Choose_your_user-agent_requirements_wisely" name="Choose_your_user-agent_requirements_wisely">ユーザーエージェント要件の賢い選択</h3> + +<p>ページデザインを最大限に改善するには、プロジェクトのユーザーエージェントの要件を合理的なものにしましょう。すべてのブラウザー、特に古いバージョンのブラウザーでコンテンツがピクセル単位で正確に見えるように要求しないでください。</p> + +<p>理想的には、適切な標準仕様に対応している最新のブラウザーを最低要件にするよう考慮するべきです。これには、最近のバージョンの Firefox、Internet Explorer、Google Chrome、Opera、Safari が含まれます。</p> + +<p>ただし、この記事に記載している秘訣の多くはあらゆるユーザーエージェントに適用できる汎用的なテクニックであり、かつブラウザーの対応要件にかかわらずどのようなウェブページにでも適用できます。</p> + +<h3 id="Example_page_structure" name="Example_page_structure">可能なら async や defer を使用する</h3> + +<p><a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">async</a> と <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">defer</a> 属性の両方と互換性のある JavaScript を使用し、特に、複数の script タグがある場合、可能ならば <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">async</a> をいつでも使用してください。<br> + <br> + これにより、ページで JavaScript が読み込み中である間はレンダリングを中断できます。さもなければ、ブラウザーはこれらの属性を持たない script タグの後にあるコンテンツをレンダリングしないでしょう。</p> + +<p>注意: これらの属性が初回のページ読み込みに大きな効果があるとしても、属性は使用するべきですがすべてのブラウザーで動作するとは考えないようにしてください。よい JavaScript コードを作るためのガイドラインすべてに従っていれば、コードを変更する必要はありません。</p> + +<h2 id="Example_page_structure" name="Example_page_structure">ページ構造の例</h2> + +<p>· <code>HTML</code></p> + +<dl> + <dd>· <code>HEAD</code></dd> +</dl> + +<dl> + <dd> + <dl> + <dd>· <code>LINK </code>...<br> + ページの外観に必要な CSS ファイルです。管理のために関連性のない CSS は別のファイルに分けるとともに、パフォーマンスのためにファイル数は最小限にしてください。</dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd>· <code>SCRIPT </code>...<br> + ページの読み込み中に<strong>必要な</strong>機能の JavaScript ファイルです。ページの読み込み後にしか実行しない DHTML は含めないようにしてください。</dd> + <dd>管理のために関連性のない JavaScript は別のファイルに分けるとともに、パフォーマンスのためにファイル数は最小限にしてください。</dd> + </dl> + </dd> +</dl> + +<dl> + <dd>· <code>BODY</code></dd> + <dd>· 小さな塊 (tables / divs) のページコンテンツは、ページ全体の読み込みを待つことなく表示することができます。</dd> +</dl> + +<dl> + <dd> + <dl> + <dd>· <code>SCRIPT </code>...<br> + DHTML を実行するのに用いるスクリプトです。DHTML のスクリプトはたいてい、ページが完全に読み込まれて必要なオブジェクトがすべて初期化された後にのみ実行します。よって、ページのコンテンツより先に読み込む必要はありません。先に読み込むと、ページが最初に表示されるのが遅くなります。</dd> + <dd>管理のために関連性のない JavaScript は別のファイルに分けるとともに、パフォーマンスのためにファイル数は最小限にしてください。</dd> + <dd>ロールオーバー効果で用いる画像がある場合は、ページのコンテンツをダウンロードした後に画像の先読みをしておきましょう。</dd> + </dl> + </dd> +</dl> + +<h2 id="Related_Links" name="Related_Links">関連リンク</h2> + +<ul> + <li>書籍: <a class="external" href="http://www.websiteoptimization.com/">"Speed Up Your Site" by Andy King</a> (英語)</li> + <li>Yahoo! によるすばらしい完成された <a class="external" href="http://developer.yahoo.com/performance/rules.html" title="http://developer.yahoo.com/performance/rules.html">ウェブサイト高速化のためのベストプラクティス</a> (英語)</li> + <li>パフォーマンス解析・最適化向けツール: <a href="https://developers.google.com/speed/pagespeed/" title="https://developers.google.com/speed/pagespeed/">Google PageSpeed Tools</a></li> + <li><a href="/ja/docs/Tools/Paint_Flashing_Tool">Paint Flashing Tool</a></li> +</ul> diff --git a/files/ja/conflicting/learn/html/introduction_to_html/index.html b/files/ja/conflicting/learn/html/introduction_to_html/index.html new file mode 100644 index 0000000000..1c8a7cc261 --- /dev/null +++ b/files/ja/conflicting/learn/html/introduction_to_html/index.html @@ -0,0 +1,87 @@ +--- +title: Historical artifacts to avoid +slug: Web/Guide/HTML/Obsolete_things_to_avoid +tags: + - HTML + - NeedsContent + - NeedsTechnicalReview +translation_of: Learn/HTML/Introduction_to_HTML +translation_of_original: Web/Guide/HTML/Obsolete_things_to_avoid +--- +<h2 id="導入">導入</h2> + +<p>多くの人々はページのソースを見てコピー & ペーストすることで、元のサイトが上手に作成されているかを考えることなく HTML、CSS、JavaScript を学習しました。これは、過去には必要であったかもしれないが現在は無意味になっているコーディングの慣習を習得してしまうことを意味します。このページでは、時間がたつにつれて不要あるいは悪い慣習になった事柄を説明します。</p> + +<h2 id="Doctype">Doctype</h2> + +<p>(X)HTML には 10 種類ほどの <a class="external" href="http://en.wikipedia.org/wiki/Document_Type_Declaration">doctype</a> があります。それらの違いはわずかです (違いがない場合もあります)。HTML5 の doctype の使用を推奨します。</p> + +<pre><!DOCTYPE html></pre> + +<p>これはすべてのブラウザ (Internet Explorer 6 を含む) で標準準拠モードになります。</p> + +<h2 id="<meta>_要素と_charset_属性"><meta> 要素と <code>charset</code> 属性</h2> + +<p>以下の記述を含むソースコードを見ることがよくあります:</p> + +<pre><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> +</pre> + +<p>ところが、すべての Web ブラウザ (Internet Explorer 6 を含む) は以下のように短縮した場合でも同様に動作します:</p> + +<pre><meta charset="UTF-8" /> +</pre> + +<p>すばらしい <a class="external" href="http://blog.whatwg.org/the-road-to-html-5-character-encoding">リバースエンジニアリング</a> や <a class="external" href="http://lists.w3.org/Archives/Public/public-html/2007Jul/0550.html#replies">プラグマティズム</a> によってこの知識を獲得しました。これを使用してください。</p> + +<ul> + <li>HTML5 ではこの挙動を元にして、この構文が正式に採用されたという経緯があります。HTML5 で用いるのが良いでしょう。また、HTML5 で以前の構文を利用する事もできます。</li> + <li>Web 開発者の中には、適切なセマンティクスやユーザビリティを持つ HTML となっているかチェックする為に Lynx というテキストブラウザを利用する人がいます。新しい構文を用いると Lynx での表示に支障が出る場合がある点に注意して下さい。</li> +</ul> + +<h2 id="Non-existing_<meta>_elements" name="Non-existing_<meta>_elements">存在しない <code><meta></code> 要素</h2> + +<p>多数の非推奨、非標準、不使用な値がいまだにサイトからサイトへコピーされています。特に以下の値は使用しないでください:</p> + +<ul> + <li><code><meta name="MSSmartTagsPreventParsing" content="true"></code>。これは Internet Explorer 6 の<em>ベータ</em>版でしか役に立ちません。このバージョンはもはや使用されず、またスマートタグ機能は削除されており復活することはないでしょう。</li> + <li><code><meta name="robots" content="all"></code>。robots 値が存在して、また正当であれば、<code>all</code> のような存在しない値を使用してはいけません。既定値は <code>index, follow</code> であり、これは基本的に、存在しない値 <code>all</code> で想定される動作です。<code><meta></code> 全体を削除してください。</li> + <li><code><meta name="copyright" content="</code><code>…</code><code>"></code>。この meta は存在しません。このタグは削除して著作権表示のページまたは箇所を作成して、それに <code>rel="copyright"</code> 値を持つ {{HTMLElement("link")}} HTML 要素でリンクしてください。</li> + <li><code><meta name="rating" content="</code><code>…</code><code>">。</code>この meta は存在しません。<code><meta></code> 全体を削除してください。</li> +</ul> + +<h2 id="スクリプト内の_HTML_コメント">スクリプト内の HTML コメント</h2> + +<p>かつては一部のブラウザのみが {{ HTMLElement("script") }} タグを認識していました。そのためスクリプトとして解釈されるべきテキストを、ブラウザが表示してしまうことがありました。この現象に対する自然なアイデアは、スクリプトを HTML のコメントに収めることでした。この方法では、スクリプトを実行するブラウザはそのスクリプトを実行し、スクリプトを認識しないブラウザはスクリプトを無視しました。</p> + +<p>そのような時期から、我々は以下のような記述を受け継いできました:</p> + +<pre><script><!-- +var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); +document.write(unescape("%3Cscript src='" + gaJsHost + "bla.com/ga.js' type='text/javascript'%3E%3C/script%3E")); +//--> +</script> +</pre> + +<p>または以下のような記述:</p> + +<pre><script type="text/javascript"> +<!--//--><![CDATA[//><!-- +Blabla.extend(MyFramework.settings, { "basePath": "/" }); +//--><!]]> +</script> +</pre> + +<p>このような記述は、今日では無意味です。スクリプトを実行しないブラウザであっても、 {{ HTMLElement("script") }} タグを無視します。スクリプトだけを {{ HTMLElement("script") }} 要素の開始タグと終了タグの間に記述してください。また、{{ htmlattrxref("src", "script") }} 属性で指定する別のファイルにスクリプトを含めることもよいです。合わせて、HTML5 の {{ htmlattrxref("async", "script") }} 属性や {{ htmlattrxref("defer", "script") }} 属性を用いることも考えてみましょう。</p> + +<h2 id="もはや使用すべきではない要素">もはや使用すべきではない要素</h2> + +<h3 id="font">font</h3> + +<p><font> タグに代わり、CSS を用いて要素や id/class セレクタにフォントスタイルを適用してください。</p> + +<h3 id="b_i_u">b, i, u</h3> + +<p>これらは少々議論の余地がありますが、適切な場合はできる限り、それぞれ {{ HTMLElement("strong") }}、 {{ HTMLElement("em") }}、CSS (<code>text-decoration:underline</code>) を適用した {{ HTMLElement("span") }} を用いるようにしてください。</p> + +<p>これらのうちどの要素を選択するかは、裁量に任せます。一部の開発者向けページでは、単純に {{ HTMLElement("b") }} を {{ HTMLElement("strong") }} で、{{ HTMLElement("i") }} を {{ HTMLElement("em") }} で置き換えるようにアドバイスしています。<strong>このアドバイスに従うことは悪い考えです。</strong> {{ HTMLElement("strong") }} は特に重要な記述のため、一方 {{ HTMLElement("em") }} はそれ以外に強調する記述のための要素です。たとえば、文字をイタリック体にする目的で単純に {{ HTMLElement("em") }} を用いるのは悪い考えです。強調しないイタリック体の文字列は、CSS で <code>font-style:italic</code> を用いて実現してください。同様に、書籍や芸術作品のタイトルは伝統的にイタリック体のテキストで記載しますが、このような箇所は {{ HTMLElement("em") }} や {{ HTMLElement("i") }} より {{ HTMLElement("cite") }} 用を用いる方が、より意味を持ちます。</p> diff --git a/files/ja/conflicting/learn/javascript/building_blocks/events/index.html b/files/ja/conflicting/learn/javascript/building_blocks/events/index.html new file mode 100644 index 0000000000..0c2047bce5 --- /dev/null +++ b/files/ja/conflicting/learn/javascript/building_blocks/events/index.html @@ -0,0 +1,89 @@ +--- +title: Event 属性 +slug: Web/Guide/HTML/Event_attributes +tags: + - Beginner + - Guide + - HTML + - Intermediate + - JavaScript +translation_of: >- + Learn/JavaScript/Building_blocks/Events#Inline_event_handlers_%E2%80%94_don%27t_use_these +translation_of_original: Web/Guide/HTML/Event_attributes +--- +<p><span class="seoSummary">すべての HTML 要素は、特定のイベントが発生したときの JavaScript の実行が許可された属性の集合から成り立ちます。これらは Event 属性と呼ばれ、その属性名には "on" の接頭辞が付きます。</span>例えば、ユーザーが要素をクリックしたときに JavaScript を実行するために、JavaScript を <code>onclick</code> 属性の中に書きます。</p> + +<p>イベントの応答として JavaScript のコードが実行された場合、<code>this</code> スコープは HTML 要素となり、このスコープ内にある <code>event</code> 変数を通して {{domxref("Event")}} オブジェクトにアクセスできます。</p> + +<div class="warning"> +<p><strong>警告:</strong> これらの属性を使うことは避けるべきです。これは HTML を巨大化し可読性を下げます。情報と振る舞いの関心事が正しく分離されておらず、発見が困難なバグを生み出します。その上に、Event 属性の使い方はほとんどの場合、{{domxref("Window")}} オブジェクト上のグローバル関数にスクリプトを晒す原因になります。これはグローバルの名前空間を汚染します。</p> +</div> + +<p>これらの属性が魅力的で簡単に使うことができたとしても、これを使うのは避けるべきです。代わりに、イベントリスナーを追加する為には {{domxref("EventTarget.addEventListener()")}} 関数を使ってください。</p> + +<p>この Event 属性は、'unsafe-inline' キーワードを使わない限りすべてのインラインスクリプトをブロックする<a href="/docs/Security/CSP/Introducing_Content_Security_Policy">コンテンツ・セキュリティ・ポリシー</a>を使うことよって ブロックされる可能性があります。</p> + +<h2 id="Example_using_event_attributes" name="Example_using_event_attributes">Event 属性の使用例</h2> + +<p>この例は {{HTMLElement("div")}} がクリックされる度にテキストを要素に追加します。</p> + +<div class="note"> +<p><strong>注意:</strong> これは、これらの属性の 1 つを使用する例であり、するべきではない方法です。</p> +</div> + +<pre class="brush: html"><!doctype html> +<html> + <head> + <title>Event 属性の例</title> + <script> + function doSomething() { + document.getElementById("thanks").innerHTML += "<p>クリックしてくれてありがとう!</p>"; + } + </script> + </head> + <body> + <div onclick="doSomething();">クリック!</div> + <div id="thanks"></div> + </body> +</html> +</pre> + +<p>この例を実行してみてください:</p> + +<p>{{ EmbedLiveSample('Example_using_event_attributes', '', '', '') }}</p> + +<h2 id="Example_using_event_listeners" name="Example_using_event_listeners">イベントリスナーの使用例</h2> + +<p>代わりに、以下に示すように {{domxref("EventTarget.addEventListener()")}} を使うべきです。</p> + +<pre class="brush: html"><!doctype html> +<html> + <head> + <title>Event 属性の例</title> + <script> + function doSomething() { + document.getElementById("thanks").innerHTML += "<p>クリックしてくれてありがとう!</p>"; + } + + // ページのロードが完了した時に呼ばれる; + // ここは、ページ内の要素にイベントリスナを追加するなど、何でも必要な設定を実行する場所です。 + + function setup() { + document.getElementById("click").addEventListener("click", doSomething, true); + } + // ウィンドウ内のドキュメントのロードが完了したことを知る為の、 + // "load" イベントを受け取る為にイベントリスナを window オブジェクトに追加する + + window.addEventListener("load", setup, true); + </script> + </head> + <body> + <div id="click">クリック!</div> + <div id="thanks"></div> + </body> +</html></pre> + +<p>この動作を以下の例から確認できます:</p> + +<p>{{ EmbedLiveSample('Example_using_event_listeners', '', '', '') }}</p> +<section id="Quick_Links"><ol><li><a href="/ja/docs/Web/API/Event" title="Event インターフェイスは、DOM で発生するイベントを表します。ユーザーによって発生するイベント (マウスやキーボードのイベント) もありますし、API によって発生するイベント (アニメーションの実行が完了したことを示すイベントや、動画再生が一時停止したイベントなど) もあります。さまざまな型のイベントがあり、一部のイベントは基底の Event インターフェイスを基にした他のインターフェイスを使用します。Event 自体は、すべてのイベントで共通のプロパティやメソッドを持ちます。">Event</a></li><li><a href="/ja/docs/Web/API/EventTarget" title="EventTarget は、イベントを受け取り、そのためのリスナーを持つ可能性があるオブジェクトにより実装されたインターフェースです。">EventTarget</a></li><li><a href="/ja/docs/Web/API/EventTarget.addEventListener">EventTarget.addEventListener</a></li></ol></section> diff --git a/files/ja/conflicting/learn/javascript/client-side_web_apis/manipulating_documents/index.html b/files/ja/conflicting/learn/javascript/client-side_web_apis/manipulating_documents/index.html new file mode 100644 index 0000000000..fc2fa7a3b4 --- /dev/null +++ b/files/ja/conflicting/learn/javascript/client-side_web_apis/manipulating_documents/index.html @@ -0,0 +1,149 @@ +--- +title: JavaScript and CSS +slug: Web/Guide/CSS/Getting_started/JavaScript +tags: + - CSS + - 'CSS:Getting_Started' +translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +translation_of_original: Web/Guide/CSS/Getting_started/JavaScript +--- +<div> + {{CSSTutorialTOC}}</div> +<p>これは <a href="/ja/docs/CSS/Getting_Started" title="https://developer.mozilla.org/ja/CSS/Getting_Started">CSS チュートリアル</a> 第2部の、第 1 章です。第 2 部には、他のウェブや Mozilla の技術とともに使われる CSS の応用例があります。</p> +<p>第 2 部の各ページで、 CSS とその他の技術を相互作用させる方法を説明します。これらのページは、その他の技術の使い方を学べるようには作られていません。その他の技術の詳細を学ぶなら、他のチュートリアルを探してみてください。</p> +<p>代わりに CSS の数々の用途を解説していきます。読むために CSS の知識が少し必要ですが、その他の技術について何も知っている必要はありません。</p> +<p>前の章（第 1 部）: <a href="/ja/docs/CSS/Getting_Started/Media" title="https://developer.mozilla.org/ja/CSS/Getting_Started/Media">メディア</a><br> + 次の章: <a href="/ja/docs/CSS/Getting_Started/SVG_graphics" title="https://developer.mozilla.org/ja/CSS/Getting_Started/SVG_graphics">SVG</a></p> +<h2 id="Information:_JavaScript" name="Information:_JavaScript">JavaScriptについて</h2> +<p>JavaScript は<em>プログラミング言語</em> です。JavaScript はウェブサイトやアプリケーションで、インタラクティブ性を作るのに広く使われています。</p> +<p>JavaScript はスタイルシートと相互に作用でき、文書のスタイルを動的に変えるプログラムを書けます。</p> +<p>3 つの方法があります:</p> +<ul> + <li>文書内のスタイルシートの一覧を扱う方法—例: スタイルシートの追加、削除、編集</li> + <li>スタイルシート内のルールを扱う方法—例: ルールの追加、削除、編集</li> + <li>DOM 内の 個々の要素を扱う方法—文書のスタイルシートと関係なしに、スタイルシートを編集します</li> +</ul> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;"> + <caption> + さらに詳しく</caption> + <tbody> + <tr> + <td>JavaScript, についてのさらに詳しい情報は、この wiki の <a href="/ja/docs/JavaScript" title="JavaScript">JavaScript</a> のページをご覧ください。</td> + </tr> + </tbody> +</table> +<h2 id="Action:_A_JavaScript_demonstration" name="Action:_A_JavaScript_demonstration">実習: JavaScript の実演</h2> +<p>新規 HTML 文書 <code>doc5.html</code> を作ってください。以下の内容をコピー＆ペーストしてください（スクロールしてすべてをコピーできているか確認してください）:</p> +<div style="width: 48em;"> + <pre class="brush:html;"><!DOCTYPE html> +<html> + +<head> +<title>Mozilla CSS Getting Started - JavaScript demonstration</title> +<link rel="stylesheet" type="text/css" href="style5.css" /> +<script type="text/javascript" src="script5.js"></script> +</head> + +<body> +<h1>JavaScript sample</h1> + +<div id="square"></div> + +<button type="button" onclick="doDemo(this);">Click Me</button> + +</body> +</html> +</pre> +</div> +<p>新規 CSS ファイル <code>style5.css</code> を作り、次の内容をコピー＆ペーストしてください:</p> +<div style="width: 48em;"> + <pre class="brush:css;">/*** JavaScript demonstration ***/ +#square { + width: 20em; + height: 20em; + border: 2px inset gray; + margin-bottom: 1em; +} + +button { + padding: .5em 2em; +} +</pre> +</div> +<p>新規テキストファイル <code>script5.js</code> を作り、以下の内容をコピー＆ペーストしてください:</p> +<div style="width: 48em;"> + <pre class="brush:js;">// JavaScript demonstration +function doDemo (button) { + var square = document.getElementById("square"); + square.style.backgroundColor = "#fa4"; + button.setAttribute("disabled", "true"); + setTimeout(clearDemo, 2000, button); +} + +function clearDemo (button) { + var square = document.getElementById("square"); + square.style.backgroundColor = "transparent"; + button.removeAttribute("disabled"); +} +</pre> +</div> +<p>ブラウザで HTML 文書を開いて、ボタンを押してください。</p> +<p>この wiki はページ内に JavaScript を含められないため、ここで実際の表示をお見せすることはできません。ボタンを押す前と押した後で、結果は次のような感じになるでしょう:</p> +<table> + <tbody> + <tr> + <td style="padding-right: 2em;"> + <table style="border: 2px outset #36b; padding: 0 1em .5em .5em;"> + <tbody> + <tr> + <td> + <p><strong>JavaScript sample</strong></p> + </td> + </tr> + <tr> + <td> </td> + </tr> + </tbody> + </table> + </td> + <td> + <table style="border: 2px outset #36b; padding: 0 1em .5em .5em;"> + <tbody> + <tr> + <td> + <p><strong>JavaScript sample</strong></p> + </td> + </tr> + <tr> + <td style="background: #fa4;"> </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> +<div class="note"> + この実演についての<strong>重要な補足</strong>: + <ul> + <li>HTML 文書からは、いつものようにスタイルシートがリンクされ、スクリプトもリンクされています</li> + <li>スクリプトは DOM の個々の要素を扱います。正方形のスタイルを直接編集しています。ボタンのスタイルは属性を変更することで、間接的に編集しています。</li> + <li>JavaScript では、<code>document.getElementById("square")</code> は CSS セレクタ <code>#square</code> と、機能的に同義です。</li> + <li>JavaScript では、<code>backgroundColor</code> は CSSのプロパティ <code>background-color</code> に相当します。JavaScriptでは名前にハイフンを含めることができないので、"キャメルケース" が代わりに使われます。</li> + <li>ブラウザ内蔵の CSS ルールには<br> + <code>button{{mediawiki.external('disabled=\"true\"')}}</code> に対するものがあり、ボタンが使用不可にされるとボタンの外見を変更します。</li> + </ul> +</div> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: .5em;"> + <caption> + チャレンジ</caption> + <tbody> + <tr> + <td>スクリプトを変更して、色が変わるときに正方形が右に 20 em 跳び、その後元の位置に跳んで戻るようにしてください。</td> + </tr> + </tbody> +</table> +<p><a href="/ja/docs/CSS/Getting_Started/Challenge_solutions#JavaScript" title="https://developer.mozilla.org/ja/CSS/Getting_Started/Challenge_solutions#JavaScript">チャレンジの解答を見る。</a></p> +<h2 id="What_next.3F" name="What_next.3F">さて次は？</h2> +<p>このページにわかりづらいところやご意見があれば <a href="/Talk:ja/CSS/Getting_Started/JavaScript" title="Talk:ja/CSS/Getting_Started/JavaScript">Discussion</a> ページに参加してください。</p> +<p>この実演では、ボタン要素だけがスクリプトを使っているのに、HTML 文書にスクリプトがリンクされていました。Mozilla は CSS を拡張して、JavaScript コード（あるいはコンテンツや他のスタイルシート）を選択した要素にリンクできるようにしています。次のページではこの実演を行います: <strong><a href="/ja/docs/CSS/Getting_Started/XBL_bindings" title="CSS/Getting_Started/XBL_bindings">XBL bindings</a></strong></p> diff --git a/files/ja/conflicting/learn/javascript/objects/index.html b/files/ja/conflicting/learn/javascript/objects/index.html new file mode 100644 index 0000000000..cbe9e10a0a --- /dev/null +++ b/files/ja/conflicting/learn/javascript/objects/index.html @@ -0,0 +1,381 @@ +--- +title: オブジェクト指向 JavaScript 入門 +slug: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript +tags: + - Constructor + - Encapsulation + - Inheritance + - Intermediate + - JavaScript + - Members + - Namespace + - OOP + - Object + - Object-Oriented +translation_of: Learn/JavaScript/Objects +translation_of_original: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript +--- +<div>{{jsSidebar("Introductory")}}</div> + +<p>オブジェクト指向を追求することで、JavaScript は強力かつ柔軟な{{Glossary("OOP", "オブジェクト指向プログラミング")}}能力を特色としています。この記事ではまずオブジェクト指向プログラミングの入門から始め、JavaScript のオブジェクトモデルの復習、そして最後に JavaScript のオブジェクト指向プログラミングの概念を説明します。</p> + +<h2 id="JavaScript_review" name="JavaScript_review">JavaScript の復習</h2> + +<p>変数、型、関数、スコープといった JavaScript の概念について自信がないのでしたら、<a href="/ja/docs/Web/JavaScript/A_re-introduction_to_JavaScript">JavaScript「再」入門</a>で該当するトピックをご覧いただくとよいでしょう。また、<a href="/ja/docs/Web/JavaScript/Guide">JavaScript ガイド</a>もご覧ください。</p> + +<h2 id="Object-oriented_programming" name="Object-oriented_programming">オブジェクト指向プログラミング</h2> + +<p>オブジェクト指向プログラミング (OOP) は、実世界を元にしたモデルの作成に{{glossary("abstraction", "抽象化")}}を使用する、プログラミングのパラダイムです。OOP は{{glossary("modularity", "モジュラリティ")}}、{{glossary("polymorphism", "ポリモーフィズム")}}、{{glossary("encapsulation", "カプセル化")}}といった、これまでに確立されたパラダイム由来の技術を複数使用しています。今日、人気がある多くのプログラミング言語 (Java、JavaScript、C#、C++、Python、PHP、Ruby、Objective-C など) が OOP をサポートしています。</p> + +<p>OOP はソフトウェアを関数の集まりや単なるコマンドのリスト（これまでの伝統的な見方）としてではなく、協調して動作するオブジェクトの集まりであると考えます。OOP では、各々のオブジェクトがメッセージを受信し、データを処理し、また他のオブジェクトへメッセージを送信できます。各々のオブジェクトは明確な役割や責任を持つ、独立した小さな機械であると見なせます。</p> + +<p>OOP はプログラミングにおける柔軟性や保守性の向上を促し、大規模ソフトウェアエンジニアリングにおいて広く普及しています。OOP はモジュラリティを強く重視しているため、オブジェクト指向によるコードは開発をシンプルにします。また、コードを後から理解することが容易になります。オブジェクト指向によるコードはモジュラリティが低いプログラミング方法よりも、直接的な分析、コーディング、複雑な状況や手続きの理解を促進します。<a href="#cite-1"><sup>1</sup></a></p> + +<h2 id="Terminology" name="Terminology">用語集</h2> + +<dl> + <dt>{{Glossary("Namespace", "ネームスペース")}} （名前空間）</dt> + <dd>開発者があらゆる機能をアプリケーション固有の一意な名前にまとめることができる一種の容器のことです。</dd> + <dt>{{Glossary("Class", "クラス")}}</dt> + <dd>オブジェクトの特性を定義するものです。クラスは、オブジェクトのプロパティやメソッドを定義するテンプレートです。</dd> + <dt>{{Glossary("Object", "オブジェクト")}}</dt> + <dd>クラスの実体です。</dd> + <dt>{{Glossary("Property", "プロパティ")}}</dt> + <dd>「色」などといったオブジェクトの特性です。</dd> + <dt>{{Glossary("Method", "メソッド")}}</dt> + <dd>「歩く」などといった、オブジェクトの能力です。これは、クラスに関連付けられたサブルーチンや関数です。</dd> + <dt>{{Glossary("Constructor", "コンストラクタ")}}</dt> + <dd>インスタンス化するときに呼び出されるメソッドです。コンストラクタの名前は通常、クラスの名前と同じです。</dd> + <dt>{{Glossary("Inheritance", "継承")}}</dt> + <dd>あるクラスが別のクラスから特性を引き継ぐことを指します。</dd> + <dt>{{Glossary("Encapsulation", "カプセル化")}}</dt> + <dd>データと、そのデータを使用するメソッドとをまとめる手法のことです。</dd> + <dt>{{Glossary("Abstraction", "抽象化")}}</dt> + <dd>実世界のモデルが、オブジェクトの複雑な継承、メソッド、プロパティの集合体によって適切に再現されている状態を指します。</dd> + <dt>{{Glossary("Polymorphism", "ポリモーフィズム")}}</dt> + <dd>Poly は "<em>many</em>"、morphism は "<em>forms</em>" を意味します。別々のクラスが同じメソッドやプロパティを定義可能であることを表します。</dd> +</dl> + +<p>オブジェクト指向プログラミングのより広範な説明については、Wikipedia の {{interwiki("wikipedia", "オブジェクト指向プログラミング")}} をご覧ください。</p> + +<h2 id="Prototype-based_programming" name="Prototype-based_programming">プロトタイプベースプログラミング</h2> + +<p>プロトタイプベースのプログラミングはクラスを使用せず、既存の<strong>プロトタイプ</strong>オブジェクトをデコレート（あるいは拡張）してそのオブジェクトの持つ挙動を再利用する（クラスベースの言語における継承と同等）ことで実現される OOP モデルです（クラスレス、プロトタイプ指向、あるいはインスタンスベースプログラミングとも呼ばれます）。</p> + +<p>プロトタイプベース言語として先駆けの（そしてもっとも正統な）代表例は、David Ungar 氏と Randall Smith 氏によって開発された {{interwiki("wikipedia", "Self")}} です。とはいえ、クラスレスのプログラミングスタイルは最近ますます人気が高まり、JavaScript、Cecil、NewtonScript、Io、MOO、REBOL、Kevo、Squeak （ソフトウェア Morphic のコンポーネント操作の際の Viewer フレームワークとして使われています）などのプログラミング言語に採用されました。</p> + +<h2 id="JavaScript_object_oriented_programming" name="JavaScript_object_oriented_programming">JavaScript のオブジェクト指向プログラミング</h2> + +<h3 id="Namespace" name="Namespace">ネームスペース</h3> + +<p>ネームスペース（名前空間）とは、開発者が一意なアプリケーション固有の名前を付けて、機能をまとめることができる一種の容器です。<strong>JavaScript では、ネームスペースはメソッド、プロパティ、オブジェクトを包含する別のオブジェクトとなります。</strong></p> + +<p>{{note('JavaScript では通常のオブジェクトとネームスペースとの間に、言語レベルの違いがない点に留意することが重要です。これは他の多くのオブジェクト指向言語とは異なっており、新たな JavaScript プログラマを混乱させることがあります。')}}</p> + +<p>JavaScript でネームスペースを作成する考え方はシンプルです。グローバルオブジェクトをひとつ作成して、すべての変数、メソッド、関数をそのオブジェクトのプロパティとすればよいのです。ネームスペースを使用すると、アプリケーション内で名前が衝突する可能性が低下します。これは各アプリケーションのオブジェクトが、アプリケーションで定義したグローバルオブジェクトのプロパティとなるからです。</p> + +<p>MYAPP という名前のグローバルオブジェクトを作成しましょう :</p> + +<pre class="brush: js">// グローバルネームスペース +var MYAPP = MYAPP || {};</pre> + +<p>上記のサンプルコードでは、始めに MYAPP が（同じファイルまたは別のファイルで）すでに定義されているかを確認します。定義されている場合は、既存の MYAPP グローバルオブジェクトを使用します。定義されていない場合はメソッド、関数、変数、オブジェクトをカプセル化する、MYAPP という名前の空のオブジェクトを作成します。</p> + +<p>サブネームスペースも作成できます（グローバルオブジェクトを最初に定義する必要があることに注意）:</p> + +<pre class="brush: js">// サブネームスペース +MYAPP.event = {};</pre> + +<p>ネームスペースを作成して変数、関数、メソッドを追加する構文は以下のようになります :</p> + +<pre class="brush: js">// 共通のメソッドやプロパティ向けに MYAPP.commonMethod という名前のコンテナを作成 +MYAPP.commonMethod = { + regExForName: "", // 名前を検証するための正規表現を定義 + regExForPhone: "", // 電話番号を検証するための正規表現を定義 + validateName: function(name){ + // 名前に対してなんらかの処理を行う。"this.regExForName" を使用して + // 変数 regExForName にアクセス可能 + }, + + validatePhoneNo: function(phoneNo){ + // 電話番号に対してなんらかの処理を行う + } +} + +// オブジェクトとともにメソッドを定義する +MYAPP.event = { + addListener: function(el, type, fn) { + // 処理 + }, + removeListener: function(el, type, fn) { + // 処理 + }, + getEvent: function(e) { + // 処理 + } + + // 他のメソッドやプロパティを追加できる +} + +// addListener メソッドを使用する構文: +MYAPP.event.addListener("yourel", "type", callback);</pre> + +<h3 id="Standard_built-in_objects" name="Standard_built-in_objects">標準ビルトインオブジェクト</h3> + +<p>JavaScript は、例えば <code>Math</code>、<code>Object</code>、<code>Array</code>、<code>String</code> といったコアに組み込まれたオブジェクトがあります。以下の例では、乱数を取得するために <code>Math</code> オブジェクトの <code>random()</code> メソッドを使用する方法を示したものです。</p> + +<pre class="brush: js">console.log(Math.random()); +</pre> + +<div class="note"><strong>註:</strong> この例、および以降の例では、{{domxref("console.log()")}} という名前の関数がグローバルで定義されていると仮定しています。実際は、<code>console.log()</code> 関数は JavaScript そのものの一部ではありませんが、多くのブラウザがデバッグ用に実装しています。</div> + +<p>JavaScript におけるコアオブジェクトの一覧については、<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects">JavaScript リファレンスの標準ビルトインオブジェクト</a>をご覧ください。</p> + +<p>JavaScript ではすべてのオブジェクトが <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>Object</code></a> オブジェクトのインスタンスであり、それゆえに Object の全プロパティおよび全メソッドを継承します。</p> + +<h3 id="Custom_objects" name="Custom_objects">カスタムオブジェクト</h3> + +<h4 id="The_class" name="The_class">クラス</h4> + +<p>JavaScript はプロトタイプベースの言語であり、C++ や Java でみられる <code>class</code> 文がありません。これは時に、<code>class</code> 文を持つ言語に慣れているプログラマを混乱させます。その代わりに、JavaScript ではクラスのコンストラクタとして関数を使用します。クラスの定義は、関数の定義と同じほど簡単です。以下の例では、空のコンストラクタを使って Person という名前の新たなクラスを定義しています。</p> + +<pre class="brush: js">var Person = function () {}; +</pre> + +<h4 id="The_object_(class_instance)" name="The_object_(class_instance)">オブジェクト（クラスのインスタンス）</h4> + +<p><code>obj</code> オブジェクトの新たなインスタンスを生成するには <code>new obj</code> 文を使用し、その結果（<code>obj</code> 型を持つ）を、後からアクセスするための変数に代入します。</p> + +<p>前出の例で、<code>Person</code> という名前のクラスを定義しました。以下の例では、2 つのインスタンス（<code>person1</code> と <code>person2</code>）を生成しています。</p> + +<pre class="brush: js">var person1 = new Person(); +var person2 = new Person(); +</pre> + +<div class="note"><strong>註:</strong> 初期化されていないインスタンスを生成する、新たに追加されたインスタンス化方法については、 {{jsxref("Object.create()")}} をご覧ください。</div> + +<h4 id="The_constructor" name="The_constructor">コンストラクタ</h4> + +<p>コンストラクタは、インスタンス化の際（オブジェクトのインスタンスが生成されたとき）に呼び出されます。コンストラクタは、クラスのメソッドです。JavaScript では、関数がオブジェクトのコンストラクタとして働きます。したがって、コンストラクタメソッドを明示的に定義する必要はありません。クラス内で定義されたすべてのアクションが、インスタンス化の際に実行されます。</p> + +<p>コンストラクタはオブジェクトのプロパティの設定や、オブジェクトの使用準備を行うメソッドの呼び出しを行うために使用されます。クラスのメソッドの追加やメソッドの定義は別の構文を使用して行うことについては、後ほど説明します。</p> + +<p>以下の例では <code>Person</code> をインスタンス化する際に、コンストラクタがメッセージをログに出力します。</p> + +<pre class="brush: js">var Person = function () { + console.log('instance created'); +}; + +var person1 = new Person(); +var person2 = new Person(); +</pre> + +<h4 id="The_property_(object_attribute)" name="The_property_(object_attribute)">プロパティ（オブジェクトの属性）</h4> + +<p>プロパティは、クラス内にある変数です。オブジェクトのインスタンスはすべて、それらのプロパティを持ちます。プロパティがそれぞれのインスタンスで作成されるように、プロパティはコンストラクタ（関数）内で設定されます。</p> + +<p>カレントオブジェクトを示す <code>this</code> キーワードを使用して、クラス内でプロパティを扱うことができます。クラス外からプロパティにアクセス（読み取りや書き込み）するには、<code>InstanceName.Property</code> という構文を使用します。これは C++、Java、その他の言語と同じ構文です（クラスの内部では、プロパティの値の取得や設定に <code>this.Property</code> 構文を使用します)。</p> + +<p>以下の例では、<code>Person</code> クラスをインスタンス化する際に <code>firstName</code> プロパティを定義しています:</p> + +<pre class="brush: js">var Person = function (firstName) { + this.firstName = firstName; + console.log('Person instantiated'); +}; + +var person1 = new Person('Alice'); +var person2 = new Person('Bob'); + +// オブジェクトの firstName プロパティを表示する +console.log('person1 is ' + person1.firstName); // "person1 is Alice" と出力 +console.log('person2 is ' + person2.firstName); // "person2 is Bob" と出力 +</pre> + +<h4 id="The_methods" name="The_methods">メソッド</h4> + +<p>メソッドは関数です（また、関数と同じように定義されます）が、他はプロパティと同じ考え方に従います。メソッドの呼び出しはプロパティへのアクセスと似ていますが、メソッド名の終わりに <code>()</code> を付加して、引数を伴うことがあります。メソッドを定義するには、クラスの <code>prototype</code> プロパティの名前付きプロパティに、関数を代入します。関数を代入した名前を使用して、オブジェクトのメソッドを呼び出すことができます。</p> + +<p>以下の例では、<code>Person</code> クラスで <code>sayHello()</code> メソッドを定義および使用しています。</p> + +<pre class="brush: js">var Person = function (firstName) { + this.firstName = firstName; +}; + +Person.prototype.sayHello = function() { + console.log("Hello, I'm " + this.firstName); +}; + +var person1 = new Person("Alice"); +var person2 = new Person("Bob"); + +// Person の sayHello メソッドを呼び出す +person1.sayHello(); // "Hello, I'm Alice" と出力 +person2.sayHello(); // "Hello, I'm Bob" と出力 +</pre> + +<p>JavaScript のメソッドはオブジェクトにプロパティとして割り付けられた通常の関数であり、「状況に関係なく」呼び出せます。以下のサンプルコードについて考えてみましょう:</p> + +<pre class="brush: js">var Person = function (firstName) { + this.firstName = firstName; +}; + +Person.prototype.sayHello = function() { + console.log("Hello, I'm " + this.firstName); +}; + +var person1 = new Person("Alice"); +var person2 = new Person("Bob"); +var helloFunction = person1.sayHello; + +// "Hello, I'm Alice" と出力 +person1.sayHello(); + +// "Hello, I'm Bob" と出力 +person2.sayHello(); + +// "Hello, I'm undefined" と出力 +// (strict モードでは TypeError で失敗する) +helloFunction(); + +// true と出力 +console.log(helloFunction === person1.sayHello); + +// true と出力 +console.log(helloFunction === Person.prototype.sayHello); + +// "Hello, I'm Alice" と出力 +helloFunction.call(person1);</pre> + +<p>この例で示すように、<code>sayHello</code> 関数を参照しているもの（<code>person1</code>、<code>Person.prototype</code>、<code>helloFunction</code> 変数など）すべてが、<strong>同一の関数</strong>を示しています。関数を呼び出しているときの <code>this</code> の値は、関数の呼び出し方に依存します。もっとも一般的な、オブジェクトのプロパティから関数にアクセスする形式 (<code>person1.sayHello()</code>) で <code>this</code> を呼び出すときは、その関数を持つオブジェクト (<code>person1</code>) を <code>this</code> に設定します。これが、<code>person1.sayHello()</code> で名前として "Alice"、<code>person2.sayHello()</code> で名前として "Bob" が使用される理由です。一方、他の方法で呼び出す場合は <code>this</code> に設定されるものが変わります。変数 (<code>helloFunction()</code>) から <code>this</code> を呼び出すと、グローバルオブジェクト（ブラウザでは <code>window</code>）を <code>this</code> に設定します。このオブジェクトは（おそらく）<code>firstName</code> プロパティを持っていないため、"Hello, I'm undefined" になります（これは loose モードの場合です。<a href="/ja/docs/Web/JavaScript/Reference/Strict_mode" title="Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">strict モード</a>では異なる結果（エラー）になりますが、ここでは混乱を避けるために詳細は割愛します）。あるいは、例の最後で示したように <code>Function#call</code> （または <code>Function#apply</code>）を使用して、<code>this</code> を明示的に設定できます。</p> + +<div class="note"><strong>註:</strong> <code>this</code> について、詳しくは {{jsxref("Global_Objects/Function/call","Function#call")}} および {{jsxref("Global_Objects/Function/apply","Function#apply")}} をご覧ください。</div> + +<h4 id="Inheritance" name="Inheritance">継承</h4> + +<p>継承は、1 つ以上のクラスを特化したバージョンとしてクラスを作成する方法です（<strong>JavaScript は単一継承のみサポートしています</strong>）。特化したクラスは一般的に<strong>子</strong>と呼ばれ、またそれ以外のクラスは一般的に<strong>親</strong>と呼ばれます。JavaScript では親クラスのインスタンスを子クラスに代入して、特化させることにより継承を行います。現代のブラウザでは、継承の実装に {{jsxref("Global_Objects/Object/create","Object.create","#Classical_inheritance_with_Object.create()")}} を使用することもできます。</p> + +<div class="note"> +<p><strong>註:</strong> JavaScript は子クラスの <code>prototype.constructor</code>（{{jsxref("Global_Objects/Object/prototype","Object.prototype")}} をご覧ください）を検出しないため、手動で明示しなければなりません。Stackoverflow に投稿された質問 "<a href="http://stackoverflow.com/questions/8453887/why-is-it-necessary-to-set-the-prototype-constructor">Why is it necessary to set the prototype constructor?</a>" をご覧ください。</p> +</div> + +<p>以下の例では、<code>Person</code> の子クラスとして <code>Student</code> クラスを定義しています。そして、<code>sayHello()</code> メソッドの再定義と <code>sayGoodBye()</code> メソッドの追加を行っています。</p> + +<pre class="brush: js">// Person コンストラクタを定義する +var Person = function(firstName) { + this.firstName = firstName; +}; + +// Person.prototype にメソッドを 2 つ追加する +Person.prototype.walk = function(){ + console.log("I am walking!"); +}; + +Person.prototype.sayHello = function(){ + console.log("Hello, I'm " + this.firstName); +}; + +// Student コンストラクタを定義する +function Student(firstName, subject) { + // 親のコンストラクタを呼び出す。呼び出しの際に "this" が + // 適切に設定されるようにする (Function#call を使用) + Person.call(this, firstName); + + // Student 固有のプロパティを初期化する + this.subject = subject; +}; + +// Person.prototype を継承する、Student.prototype オブジェクトを作成する +// 註: ここでよくある間違いが、Student.prototype を生成するために +// "new Person()" を使用することです。これは様々な理由で間違っていますが、 +// まずこれでは Person の "firstName" 引数に渡すものがありません。 +// Person を呼び出す正しい場所はこれより前の、 +// Student から呼び出します。 +Student.prototype = Object.create(Person.prototype); // 以下の注釈を参照 + +// "constructor" プロパティが Student を指すように設定する +Student.prototype.constructor = Student; + +// "sayHello" メソッドを置き換える +Student.prototype.sayHello = function(){ + console.log("Hello, I'm " + this.firstName + ". I'm studying " + + this.subject + "."); +}; + +// "sayGoodBye" メソッドを追加する +Student.prototype.sayGoodBye = function(){ + console.log("Goodbye!"); +}; + +// 使用例: +var student1 = new Student("Janet", "Applied Physics"); +student1.sayHello(); // "Hello, I'm Janet. I'm studying Applied Physics." +student1.walk(); // "I am walking!" +student1.sayGoodBye(); // "Goodbye!" + +// instanceof が正常に機能するかをチェック +console.log(student1 instanceof Person); // true +console.log(student1 instanceof Student); // true +</pre> + +<p><code>Student.prototype = Object.create(Person.prototype);</code> という行について :<br> + {{jsxref("Global_Objects/Object/create","Object.create")}} が存在しない古い JavaScript エンジンでは、「{{原語併記("ポリフィル","polyfill")}}」 （"shim" とも呼ばれます。リンク先の記事をご覧ください）または同様の結果になる以下のような関数を使用できます。:</p> + +<pre class="brush: js">function createObject(proto) { + function ctor() { } + ctor.prototype = proto; + return new ctor(); +} + +// 使用法: +Student.prototype = createObject(Person.prototype); +</pre> + +<div class="note"><strong>註:</strong> Object.create や古いエンジン向けの shim が何を行っているかについては、{{jsxref("Global_Objects/Object/create","Object.create")}} をご覧ください。</div> + +<p>オブジェクトをインスタンス化する方法を問わずに、<code>this</code> の参照先を適切に指定するのは時に難しいものです。ですが、これを容易にするシンプルなイディオムがあります。</p> + +<pre class="brush: js">var Person = function(firstName) { + if (this instanceof Person) { + this.firstName = firstName; + } else { + return new Person(firstName); + } +} +</pre> + +<h4 id="Encapsulation" name="Encapsulation">カプセル化</h4> + +<p>前の例では、<code>Person</code> クラスによる <code>walk()</code> メソッドの実装状況を <code>Student</code> が知らなくても、そのメソッドを使用できました。<code>Student</code> クラスは変更の必要がない限り、そのメソッドを明示的に定義する必要はありません。すべてのクラスのデータとメソッドがひとつのユニットに収められていることから、これを<strong>カプセル化</strong>と呼びます。</p> + +<p>情報を隠蔽することは、他の言語でも <code>private</code> または <code>protected</code> なメソッドやプロパティという形で一般的な機能です。JavaScript でも同様のことをシミュレートできますが、オブジェクト指向プログラミングに必須というわけではありません。<a href="#cite-2"><sup>2</sup></a></p> + +<h4 id="Abstraction" name="Abstraction">抽象化</h4> + +<p>抽象化は、取り組んでいる問題の箇所を継承（特殊化）や合成によってモデル化することを可能にする仕組みです。JavaScript では継承によって特殊化を、クラスのインスタンスを別のオブジェクトの属性値にすることで合成を実現しています。</p> + +<p>JavaScript の <code>Function</code> クラスは <code>Object</code> クラスから継承しています（これはモデルを特殊化している一例です）。また、<code>Function.prototype</code> プロパティは <code>Object</code> のインスタンスです (これは合成の一例です)。</p> + +<pre class="brush: js">var foo = function () {}; + +// "foo is a Function: true" と出力 +console.log('foo is a Function: ' + (foo instanceof Function)); + +// "foo.prototype is an Object: true" と出力 +console.log('foo.prototype is an Object: ' + (foo.prototype instanceof Object));</pre> + +<h4 id="Polymorphism" name="Polymorphism">ポリモーフィズム</h4> + +<p>すべてのメソッドやプロパティが <code>prototype</code> プロパティの内部で実装されているのと同じように、異なるクラスで同じ名前のメソッドを定義できます。メソッドは 2 つのクラスに親子関係（すなわち、あるクラスが別のクラスから継承されている）がない限り、自身が定義されたクラスに収められます。</p> + +<h2 id="Notes" name="Notes">注記</h2> + +<p>これらは JavaScript でオブジェクト指向プログラミングを実装する唯一の方法ではありません。この点で JavaScript はとても融通がききます。同様に、ここで示した技術は言語ハックをまったくしていませんし、他言語のオブジェクト理論における実装を模倣してもいません。</p> + +<p>このほかにも、JavaScript によるより高度なオブジェクト指向プログラミングのテクニックがありますが、この入門記事で扱う範囲を超えます。</p> + +<h2 id="References" name="References">参考情報</h2> + +<ol> + <li>Wikipedia: "<a href="http://en.wikipedia.org/wiki/Object-oriented_programming" name="cite-1">Object-oriented programming</a>" (<a href="http://ja.wikipedia.org/wiki/%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E6%8C%87%E5%90%91%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0">日本語版</a>)</li> + <li>Wikipedia: "<a href="http://en.wikipedia.org/wiki/Encapsulation_%28object-oriented_programming%29" name="cite-2">Encapsulation (object-oriented programming)</a>" (<a href="http://ja.wikipedia.org/wiki/%E3%82%AB%E3%83%97%E3%82%BB%E3%83%AB%E5%8C%96">日本語版</a>)</li> +</ol> diff --git a/files/ja/conflicting/mdn/contribute/index.html b/files/ja/conflicting/mdn/contribute/index.html new file mode 100644 index 0000000000..96d5ef691e --- /dev/null +++ b/files/ja/conflicting/mdn/contribute/index.html @@ -0,0 +1,97 @@ +--- +title: MDN へ貢献するには +slug: MDN_at_ten/Contributing_to_MDN +translation_of: MDN_at_ten/Contributing_to_MDN +--- +<div class="column-container"> +<div class="column-8"> +<h2 id="MDNへ貢献するには">MDNへ貢献するには</h2> + +<p>MDN への貢献は、誤字・脱字の修正や、最新の情報への更新、間違いの修正など、簡単なことから始められます。現在見ているページを修正する場合にはページ上部に表示されている青い「編集」ボタンをクリックしてください。また、存在しないページを新規作成する場合は、 <a href="/ja/docs/MDN/Contribute/Howto/Create_and_edit_pages">ここ</a>にあるいずれかの方法で新しくページを作成してください。あなたが作成したページはコミュニティ内のレビュワーや編集者が、作成したドキュメントが<a href="/ja/docs/Project:MDN/Style_guide">スタイルガイド</a>に適合しているかどうかチェックしてくれます。なので、ページのデザインや装飾など最初から完璧な物を作る必要はありません。みんなで助け合いながら良いものにしていきましょう！</p> + +<h3 id="具体的には？">具体的には？</h3> + +<p>具体的にどのようなことをしたらよいのかは、<a href="/ja/docs/MDN/Contribute/Howto">How-to ガイド</a>をご覧ください。</p> +</div> + +<div class="column-4"> +<div class="promo10 promo10-globe"> +<div class="promo10-text"> +<h3 id="参加しよう！">参加しよう！</h3> + +<p>Web開発を助けるオープンなドキュメントを一緒に作っていきましょう！</p> + +<p><a class="learnmore" href="https://developer.mozilla.org/docs/MDN/Getting_started">詳しくはこちら</a></p> +</div> +</div> +</div> +</div> + +<div class="column-container"> +<div class="column-8"> +<h2 id="主な貢献者のプロフィール">主な貢献者のプロフィール</h2> + +<p><span id="result_box" lang="ja"><span>MDN</span><span>はMDNを支える</span><span>貢献者による</span><span>大きなコミュニティ</span><span>で</span><span>す。</span><span>我々は</span><span>貢献者のすべてのプロフィールを</span><span>提供</span><span>することはできませんが</span><span>、その一部(英語)を下で紹介します。</span></span></p> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Chris_Blizzard_Former_Director_of_Evangelism_Mozilla">Chris Blizzard<br> + <small>Former Director of Evangelism, Mozilla</small></h3> + +<p><a href="https://developer.mozilla.org/profiles/Blizzard">Blizzard</a> oversaw and drove Mozilla Developer Center's transition from focusing on Mozilla-specific material to a community-maintained resource useful to a variety of Web developers.</p> + +<h3 id="Nickolay_Ponomarev_Volunteer">Nickolay Ponomarev<br> + <small>Volunteer</small></h3> + +<p><a href="/profiles/Nickolay">Nickolay</a> <span class="author-p-1669">was one of the earliest contributors, helping with the initial DevEdge clean-up effort. He has continued contributing in many areas, both for Web standards and Mozilla products, ever since</span>.</p> + +<h3 id="Andrew_Overholt_Engineering_Manager">Andrew Overholt<br> + <small>Engineering Manager</small></h3> + +<p><a href="/profiles/Overholt">Andrew</a><span class="author-g-l0xhvihafq5iyoyt"> leads developers on the Web API team. As part of his job, he encourages all DOM and API developers to help make sure documentation is great by providing information the writing team needs, reviewing documentation, and assisting with sample code. This example makes the MDN team very, very happy.</span></p> + +<h3 id="Jérémie_Patonnier_Project_Manager">Jérémie Patonnier<br> + <small>Project Manager</small></h3> + +<p><a href="/profiles/Jeremie">Jérémie</a> began contributing to MDN in 2011 by documenting SVG properties, because he needed this information for his own work. Jérémie has become a leader in the MDN French community, hosting regular "Mercredi Docs" (Wednesday Docs) sessions in the Mozilla Paris office. Currently, he is leading efforts to create the <a href="/en-US/Learn">Learning area</a> and to improve and regularize browser compatibility data across MDN.</p> + +<h3 id="Julien_(Sphinx)_Volunteer"><span id="Julien_Sphinx_Volunteer">Julien (Sphinx)<br> + <small>Volunteer</small></span></h3> + +<p><a href="/en-US/profiles/SphinxKnight">Julien</a> contributed the "lion's share" of effort to translate the entire JavaScript section of MDN into French. Many other contributors also helped in this effort, but Julien spent many nights and weekends over several months, translating JavaScript articles.</p> +</div> + +<div class="column-half"> +<h3 id="Jeff_Walden_Software_Engineer_JavaScript_Engine">Jeff Walden<br> + <small>Software Engineer, JavaScript Engine</small></h3> + +<p><a href="/profiles/Waldo">Jeff Walden</a> <span class="author-p-1669">is </span><span class="author-g-jkiyvakmsbole3bz122z">now on the SpiderMonkey team, who has contributed to MDN since its beginning, and across many topic areas, including <a href="/en-US/docs/Mozilla/XPCOM">XPCOM</a>, Mozilla build and test, <a href="/en-US/docs/en-US/javascript">JavaScript</a>, <a href="/en-US/docs/Web/CSS">CSS</a>, and more</span>.</p> + +<h3 id="Priyanka_Nag_Volunteer">Priyanka Nag<br> + <small>Volunteer</small></h3> + +<p><a href="/profiles/Priyanka13">Priyanka Nag</a> joined MDN in 2012, but she became active with the MDN community only after the Mozilla Summit in 2013, where she met and worked with Luke Crouch and David Walsh from the MDN development team; this acted as her main inspiration to start contributing to MDN. Priyanka mainly enjoys evangelizing MDN, hosting MDN events and introducing more people to MDN, along with making some edits on the wiki at times. She is currently working as a Technical writer at Red Hat and she proudly claims that her interest in technical writing started through her MDN contributions, which ended up influencing her career decision in a great way.</p> + +<h3 id="Saurabh_Nair_Volunteer">Saurabh Nair<br> + <small>Volunteer</small></h3> + +<p><a href="/profiles/jsx">Saurabh</a> has been contributing to MDN since 2011, and became more active in the last year. He is on the “spam watch” team, who look out for spam pages, deleting them and banning the spammers as soon as they appear. Since he lives in India, he can do this while MDN staff members in Europe and North America are sleeping.</p> + +<h3 id="Sebastian_Zartner_Volunteer">Sebastian Zartner<br> + <small>Volunteer</small></h3> + +<p><a href="/en-US/profiles/sebastianz">Sebastian</a>'s first contributions to MDN were in 2007, to German translations, but he soon started working on English ones. He has has contributed a lot to both the content and structure of the CSS reference, including creating a JSON API for CSS pages, and a macro for CSS syntax.</p> +</div> +</div> +</div> + +<div class="column-4"> +<div class="quote"> +<blockquote>Mozilla docs for JavaScript are made from a mixture of gold and rainbows. Lots of rainbows. They're that magical.</blockquote> +<a href="/profiles/Priyanka13"><span class="attribution">— </span></a><a href="https://twitter.com/nathandim">Nathan Dimitriades</a></div> + +<div class="quote"> +<blockquote>I love MDN because I can't even remember the structure of APIs I designed.</blockquote> +<span class="attribution">— <a href="https://twitter.com/jaffathecake/status/620987733524262912">Jake Archibald</a></span></div> +</div> +</div> diff --git a/files/ja/conflicting/mdn/contribute_b4eeb7c50b999a53684260de17d44d1b/index.html b/files/ja/conflicting/mdn/contribute_b4eeb7c50b999a53684260de17d44d1b/index.html new file mode 100644 index 0000000000..18e7425832 --- /dev/null +++ b/files/ja/conflicting/mdn/contribute_b4eeb7c50b999a53684260de17d44d1b/index.html @@ -0,0 +1,31 @@ +--- +title: FAQ +slug: MDN/Contribute/FAQ +tags: + - MDN +translation_of: MDN/Contribute +translation_of_original: MDN/Contribute/FAQ +--- +<div>{{MDNSidebar}}</div><h2 id="Mozilla_Developer_Networkとは何か">Mozilla Developer Networkとは何か ?</h2> + +<p><b>Mozilla Developer Network</b> (<b>MDN</b>)は(以前の<b>Mozilla Developer Center) </b>、web標準とMozillaプロジェクトの開発用文書化のための、Mozillaを支援するコミュニティwebサイトです。</p> + +<h2 id="新しく編集者として参加する方法は">新しく編集者として参加する方法は ?</h2> + +<p>MDNを編集する事の良い点を全て知るのは時間がかかりますが、今すぐに書き始める事ができます。コミュニティは新人に新しい事を学ぶように約束します。参加するには次の簡単な手順に従って下さい。</p> + +<ol> + <li>MDNのアカウントを作成します。</li> + <li><a href="https://lists.mozilla.org/listinfo/dev-mdc">dev-mdc</a> のメーリングリストを購読します (必須ではありませんが強く推奨されます)。</li> + <li>記事を編集する事で、最初の貢献を始めます。 (新しい記事も作成できますが、まずメーリングリストで協議してその記事が必要かを確認して下さい。)</li> + <li>レビューを待ち、それから学習します。</li> + <li>実習して定期的に貢献します。</li> +</ol> + +<h2 id="MDNを書くことのメリットは">MDNを書くことのメリットは ?</h2> + +<p>コミュニティと一緒に作業する体験が得られて、筆記のコミュニケーションスキルが上達するでしょう。あなたの履歴書に何行か追加するのにも役立つでしょう。</p> + +<h2 id="次にする事は">次にする事は ?</h2> + +<p>単に<a href="https://developer.mozilla.org/ja/docs/MDN/Getting_started#Option_2.3A_I_like_code">MDNに参加する</a>の記事にある手順に従って下さい。</p> diff --git a/files/ja/conflicting/mdn/yari/index.html b/files/ja/conflicting/mdn/yari/index.html new file mode 100644 index 0000000000..9e7fc695c3 --- /dev/null +++ b/files/ja/conflicting/mdn/yari/index.html @@ -0,0 +1,53 @@ +--- +title: Kuma プロジェクトに貢献する +slug: MDN/Kuma/コントリビュート +tags: + - Kuma + - MDN +translation_of: MDN/Kuma +translation_of_original: MDN/Kuma/Contributing +--- +<div>{{MDNSidebar}}</div> + +<p>Kuma プロジェクトに貢献して我々の優れた Wiki プラットフォームの構築を助け、Mozilla Developer Network サイトを改善したいのであれば、以下のドキュメントがプロジェクトに参加して活動する助けになるでしょう。</p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Documentation" name="Documentation">Kuma への貢献</h2> + +<dl> + <dt><a href="/ja/docs/Project:MDN/Kuma/Contributing/Getting_started" title="/en-US/docs/Project:About">Kuma をはじめる</a></dt> + <dd>Kuma を GitHub からフォークして開発環境を構築する方法。</dd> + <dt><a href="/ja/docs/Project:MDN/Kuma/Contributing/Help_wanted" title="/docs/Project:MDN/Kuma/Contributing/Help_wanted">望んでいる手助け</a></dt> + <dd>我々は Kuma のバグをたくさん報告しています。この記事のリストは我々が心から助けに貢献してほしいと思うものです。</dd> +</dl> + +<h2 class="Tools" id="Tools" name="Tools">ツールとタスク</h2> + +<dl> + <dt><a href="https://bugzilla.mozilla.org/buglist.cgi?cmdtype=dorem&remaction=run&namedcmd=mdn-backlog&sharer_id=416309&list_id=6206936" title="https://bugzilla.mozilla.org/buglist.cgi?cmdtype=dorem&remaction=run&namedcmd=mdn-backlog&sharer_id=416309&list_id=6206936">バグ</a></dt> + <dd>Kuma のバグのリストです。気兼ねなく見渡してあなたが修正できるものを見つけてください。<em>このリンクは Bugzilla へのログインが必要です。</em></dd> + <dt><a href="https://bugzilla.mozilla.org/form.mdn" title="https://bugzilla.mozilla.org/enter_bug.cgi?product=Mozilla%20Developer%20Network">バグを報告する</a></dt> + <dd>Kuma の問題に遭遇したときや改善するためのアイデアを思いついたときは、バグ報告してください。</dd> + <dt><a href="/en-US/docs/Project:MDN/Kuma/Changelog" title="/en-US/docs/Project:MDN/Kuma/Changelog">変更ログ</a></dt> + <dd>最近反映された変更のリストです。これは最近何がおこっているかを見つけるのに最高の場所です。</dd> +</dl> + + +</div> + +<div class="section"> +<h2 class="Community" id="Community" name="Community">MDN 開発者コミュニティ</h2> + +<p>開発者と話をしたい場合や、Kuma プラットフォームのビルドや改善を助けたい場合は、開発者コミュニティに参加してください。</p> + +<ul> + <li>Join the conversation on IRC: <a href="irc://irc.mozilla.org/mdndev" title="irc://irc.mozilla.org/mdndev">#mdndev</a></li> + <li>Read the MDN developer forum: {{DiscussionList("dev-mdn", "mozilla.dev.mdn")}}</li> +</ul> + +<p><span class="alllinks"><a class="external" href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">Don't forget about the <em>netiquette</em>...</a></span></p> +</div> +</div> + +<p><span class="alllinks"><a href="/docs/tag/MDC_Project" title="MDN project pages">すべて見る...</a></span></p> diff --git a/files/ja/conflicting/mozilla/add-ons/index.html b/files/ja/conflicting/mozilla/add-ons/index.html new file mode 100644 index 0000000000..03b01cfbdd --- /dev/null +++ b/files/ja/conflicting/mozilla/add-ons/index.html @@ -0,0 +1,248 @@ +--- +title: Building an Extension +slug: Building_an_Extension +tags: + - Add-ons + - Extensions +--- +<p> </p> +<h4 id=".E5.BA.8F.E7.AB.A0" name=".E5.BA.8F.E7.AB.A0">序章</h4> +<p>このチュートリアルでは、基本的な拡張機能を作る手順を段階を追って説明していきます。まずはFirefoxのステータスバーパネルに「<strong>Hello, World!</strong>」を表示してみましょう。</p> +<div class="note"> + <p><strong>注意</strong> このチュートリアルは、Firefox 1.5 の拡張機能の作成方法です。それ以前のバージョンの作成方法については、別のチュートリアルを参照してください。</p> +</div> +<h4 id=".E9.96.8B.E7.99.BA.E7.92.B0.E5.A2.83.E3.82.92.E6.BA.96.E5.82.99.E3.81.99.E3.82.8B" name=".E9.96.8B.E7.99.BA.E7.92.B0.E5.A2.83.E3.82.92.E6.BA.96.E5.82.99.E3.81.99.E3.82.8B">開発環境を準備する</h4> +<p>拡張機能は、ZIPファイルの形式で固めて配布するか、さもなくば <strong>拡張子が<code>xpi</code>のファイル（実体はZIP形式です）</strong>を<a href="/ja/Bundles" title="ja/Bundles">バンドル</a>します。XPIファイルの構造は下記のとおりです。</p> +<pre class="eval">extension.xpi: + /<a href="/ja/Install_Manifests" title="ja/Install_Manifests">install.rdf</a> + <a href="#XPCOM_Components">/components/*</a> + <a href="#Application_Command_Line">/components/cmdline.js</a> + <a href="#Defaults_Files">/defaults/</a> + <a href="#Defaults_Files">/defaults/preferences/*.js</a> + /plugins/* + /<a href="/ja/Chrome_Registration" title="ja/Chrome_Registration">chrome.manifest</a> + /<a href="/ja/Window_icons" title="ja/Window_icons">chrome/icons/default/*</a> + /chrome/ + /chrome/content/ + +</pre> +<p>自作のソースをzipに固めるのにMakefileやシェルスクリプトを書きたくないのであれば、上記と同じようにファイルを配置してみるのが一番簡単です。たとえ準備ができているとしても、一度このように広げて確認してみると、Firefox 1.5 のアドオンの仕組みがずっと簡単になります。</p> +<p>それでは始めましょう。まずハードディスク上に、拡張機能用のフォルダ（例：「<code>C:\extensions\myExtension\」</code>や<code>「~/extensions/myExtension/」</code>等）を作って下さい。このフォルダの中に「<code>chrome</code>」という名前のフォルダを作成します。この「<code>chrome</code>」の中に「<code>content</code>」というフォルダを作成します。（UNIX系のシステムであれば、拡張機能のrootディレクトリから「<code>mkdir -p chrome/content</code>」と叩くだけで2つのディレクトリが作成できます。）</p> +<p>次に、あなたの拡張機能用フォルダ（<strong>root</strong> とします）に、<code>chrome</code> フォルダと並んで 2つの新規ファイルを作成します。1つは「<code>chrome.manifest</code>」で、もう1つは「<code>install.rdf</code>」です。</p> +<p>開発環境の準備に関するもっと多くの助言が、<a class="external" href="http://kb.mozillazine.org/Setting_up_extension_development_environment">Mozillazine Knowledge Base</a> にもありますので、そちらも参考にしてください。</p> +<h4 id=".E3.82.A4.E3.83.B3.E3.82.B9.E3.83.88.E3.83.BC.E3.83.AB.E3.83.9E.E3.83.8B.E3.83.95.E3.82.A7.E3.82.B9.E3.83.88.E3.82.92.E4.BD.9C.E3.82.8B" name=".E3.82.A4.E3.83.B3.E3.82.B9.E3.83.88.E3.83.BC.E3.83.AB.E3.83.9E.E3.83.8B.E3.83.95.E3.82.A7.E3.82.B9.E3.83.88.E3.82.92.E4.BD.9C.E3.82.8B">インストールマニフェストを作る</h4> +<p>拡張機能の root フォルダに作った <code><a href="/ja/Install_Manifests" title="ja/Install_Manifests">install.rdf</a></code> を開いて、下記のように書いて下さい。</p> +<pre class="eval"><?xml version="1.0"?> + +<RDF xmlns="<span class="nowiki">http://www.w3.org/1999/02/22-rdf-syntax-ns#</span>" + xmlns:em="<span class="nowiki">http://www.mozilla.org/2004/em-rdf#</span>"> + + <Description about="urn:mozilla:install-manifest"> + <em:id><strong><a class="link-mailto" href="mailto:sample@foo.net" rel="freelink">sample@foo.net</a></strong></em:id> + <em:version><strong>1.0</strong></em:version> + <em:type>2</em:type> + + <!-- Target Application this extension can install into, + with minimum and maximum supported versions. --> + <em:targetApplication> + <Description> + <em:id><strong>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</strong></em:id> + <em:minVersion><strong>1.0+</strong></em:minVersion> + <em:maxVersion><strong>1.5.0.*</strong></em:maxVersion> + </Description> + </em:targetApplication> + + <!-- Front End MetaData --> + <em:name><strong>Sample!</strong></em:name> + <em:description><strong>A test extension</strong></em:description> + <em:creator><strong>Your Name Here</strong></em:creator> + <em:homepageURL><strong><span class="nowiki">http://www.foo.com/</span></strong></em:homepageURL> + </Description> +</RDF> +</pre> +<ul> + <li><strong><a class="link-mailto" href="mailto:sample@foo.net" rel="freelink">sample@foo.net</a></strong> - この拡張機能の ID です。これはあなたの拡張機能を識別するためのメールアドレス形式の値です（「あなたのメールアドレス」を書くところではありませんよ？）。他の機能拡張とかぶらないよう、ユニークな値にします。GUIDを使う事もできます。</li> + <li><code><em:type>2</em:type></code> の指定 -- この「2」は拡張機能であることを表しています。 (他の値の意味については <a href="/ja/Install_Manifests#type" title="ja/Install_Manifests#type">Install Manifests#type</a> を参照のこと)。</li> + <li><strong>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</strong> - Firefoxのアプリケーション ID です。</li> + <li><strong>1.0+</strong> - この拡張機能が動作するFirefoxの最小バージョン。あなたが動作確認して、バグを修正する責任を持とうとする最小のバージョンを指定して下さい。</li> + <li><strong>1.5.0.*</strong> - この拡張機能が動作するFirefoxの最大バージョン。この値を現時点の最新版よりも大きな値にしないように！</li> +</ul> +<p><a href="/ja/Install_Manifests" title="ja/Install_Manifests">Install Manifests</a> には必須のプロパティもオプションのプロパティも全て網羅されています。</p> +<p>ファイルを保存します。</p> +<h4 id="XUL_.E3.81.A7.E3.83.96.E3.83.A9.E3.82.A6.E3.82.B6.E3.82.92.E6.8B.A1.E5.BC.B5.E3.81.99.E3.82.8B" name="XUL_.E3.81.A7.E3.83.96.E3.83.A9.E3.82.A6.E3.82.B6.E3.82.92.E6.8B.A1.E5.BC.B5.E3.81.99.E3.82.8B">XUL でブラウザを拡張する</h4> +<p>Firefox のユーザインタフェースは XUL と JavaScript で書かれます。<a href="/ja/XUL" title="ja/XUL">XUL</a> はボタン、メニュー、ツールバー、ツリーといったユーザインタフェースの部品を提供するための XML の文法です。ユーザーの行動は JavaScript を使って関数のように結び付いています。</p> +<p>ブラウザを拡張するために、我々は部品を加えるか修正することでブラウザのユーザーインタフェースの一部を修正します。我々は新しい XUL DOM 要素をブラウザウインドウに挿入することによって部品を追加し、スクリプトにイベントハンドラを付加することによって修正します。</p> +<p>ブラウザは <code>browser.xul</code> (<code>$FIREFOX_INSTALL_DIR/chrome/browser.jar</code> に含まれる <code>content/browser/browser.xul</code>)と呼ばれる XUL ファイルに実装されています。browser.xul では、ステータスバーについてこんな風に定義されているのを見つける事ができます。</p> +<pre class="eval"><statusbar id="status-bar"> + ... <statusbarpanel>s ... +</statusbar> +</pre> +<p><code><statusbar id="status-bar"></code> は、XUL オーバーレイ方式のための「マージポイント」です。</p> +<h5 id="XUL_.E3.82.AA.E3.83.BC.E3.83.90.E3.83.AC.E3.82.A4.E6.96.B9.E5.BC.8F" name="XUL_.E3.82.AA.E3.83.BC.E3.83.90.E3.83.AC.E3.82.A4.E6.96.B9.E5.BC.8F">XUL オーバレイ方式</h5> +<p><a href="/ja/XUL_Overlays" title="ja/XUL_Overlays">XUL オーバレイ方式</a>とは、動的に他の UI 部品を XUL ドキュメントに紐付ける方法です。XUL オーバーレイ方式は、拡張子「.xul」のファイルに XUL のかたまりを記述しておくと、「マスター」ドキュメントにあるマージポイントで紐付けて追加してくれます。これらのかたまりで部品を追加したり削除したり変更したりが可能になるのです。</p> +<p><strong>XUL オーバレイ方式の例</strong></p> +<pre class="eval"><?xml version="1.0"?> +<overlay id="sample" + xmlns="<span class="nowiki">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"> + <statusbar id="<strong>status-bar</strong>"> + <statusbarpanel id="my-panel" label="Hello, World"/> + </statusbar> +</overlay> +</pre> +<p><code><strong>status-bar</strong></code> という名前の <code><statusbar></code> で、ブラウザウィンドウの中のくっつけたい「マージポイント」を指定しています。</p> +<p><code><statusbarpanel></code> はその子要素で、マージポイントに追加したい部品です。</p> +<p>上記のサンプルコードを <code><strong>sample.xul</strong></code> という名前のファイルに書いて、先ほど作った <code>chrome/content</code> に保存して下さい。</p> +<p>オーバーレイを使っての部品の追加やユーザーインターフェースの修正に関する詳細は、下記を参照して下さい。</p> +<h4 id="Chrome_URI.E3.81.AE.E6.9B.B8.E5.BC.8F" name="Chrome_URI.E3.81.AE.E6.9B.B8.E5.BC.8F">Chrome URIの書式</h4> +<p>XUL ファイルは、 "<a href="/ja/Chrome_Registration" title="ja/Chrome_Registration">Chrome パッケージ</a>" と呼ばれる ユーザーインターフェースコンポーネントのかたまりの一部です。これらは「<code>file://</code>」といったURIではなく、「<code>chrome://</code>」といった URI で呼び出されます（これはプラットフォームの依存度を下げるためです）。XUL ファイルの URI を インストールされたアプリケーションに引き継ぐために、Mozillaの開発者がこの解決策を考えつきました。</p> +<p>ブラウザのウィンドウは <code><a class="external" rel="freelink">chrome://browser/content/browser.xul</a></code> です。試しにこの URL を Firefox のロケーションバーに打ち込んでみてください！</p> +<p>Chrome URI はいくつかの要素から成り立っています。</p> +<ul> + <li>第1に <strong>URI スキーマ</strong> (<code>chrome</code>の部分) 、これでFirefox のネットワーキングライブラリに「これは Chrome URIである」と伝えることでその内容がロードされますので、特別に処理される必要があります。</li> + <li>第2に、ユーザインタフェースコンポーネントの包みを識別するパッケージ名（上記の例では <code><strong>browser</strong></code>の部分）。これは拡張同士の競合を避けるために、可能な限りあなたのアプリケーションに特有であるべきです。</li> + <li>第3に、リクエストするデータの種類。これには3種類あります。 + <ul> + <li><code>content</code> (XUL, JavaScript, XBL バインディングといったアプリケーション UI の構造と振舞いを構成しています。)</li> + <li><code>locale</code> (DTD, .properties ファイルといった UI の<a href="/ja/Localization" title="ja/Localization">地域化</a>のための文言を含んでいます。)</li> + <li><code>skin</code> (CSS や画像といった、UI の <a href="/ja/Themes" title="ja/Themes">見た目</a> の部分を構成します。)</li> + </ul> + </li> + <li>最後に、ロードするファイルへのパスです。</li> +</ul> +<p>つまり、<code><a class="external" rel="freelink">chrome://foo/skin/bar.png</a></code> だと、<code>foo</code> テーマの <code>skin</code> セクションの <code>bar.png</code> というファイルを呼び出すのです。</p> +<p>あなたが Chrome URI を使って内容をロードするとき、 Firefox はこれらのURIを実際のディスク上のソースファイル(もしくはJARパッケージ)に変換するのに、Chromeレジストリを使用します。</p> +<h4 id="Chrome_Manifest.E3.81.AE.E4.BD.9C.E6.88.90" name="Chrome_Manifest.E3.81.AE.E4.BD.9C.E6.88.90">Chrome Manifestの作成</h4> +<p>Chrome Manifest に関するさらに詳細な情報と、それがサポートするプロパティについては、<a href="/ja/Chrome_Manifest" title="ja/Chrome_Manifest">Chrome Manifest</a> を参照して下さい。</p> +<p>先ほど root フォルダに <code>chrome</code> というディレクトリと並べて作成した <code><strong>chrome.manifest</strong></code> を開いて下さい。</p> +<p>下記の一文を追加します。</p> +<pre class="eval">content sample chrome/content/ +</pre> +<p>(<strong>最後のスラッシュ "<code>/</code>" を忘れない事！</strong> さもないと、拡張機能はロードされません。)</p> +<p>注意: Firefox/Thunderbird 2 とそれ以前のバージョンでは混合/大文字をサポートしていないので、必ず小文字のパッケージ名 ("sample") を使ってください。 - {{ Bug(132183) }}</p> +<p>ここで指定しているのは、</p> +<ol> + <li>chrome パッケージの物の種類</li> + <li>chrome パッケージの名前</li> + <li>chrome パッケージファイルの場所</li> +</ol> +<p>つまりこの行は、「chrome パッケージ名が <strong>sample</strong>」で「<strong>content</strong> ファイルが <code>chrome/content</code> (<code>chrome.manifest</code>の相対パス) にある」という事を表しているのです。</p> +<p>「content」「locale」「skin」に相当するファイルは、それぞれ<code>chrome</code> のサブディレクトリである「content」「locale」「skin」のディレクトリ下に配置しなくてはならない事を注意してください。</p> +<p>ファイルを保存して下さい。あなたが拡張機能を入れて Firefox を起動した時に(このチュートリアルの後で)、chrome パッケージが登録されます。</p> +<h4 id=".E3.82.AA.E3.83.BC.E3.83.90.E3.83.BC.E3.83.AC.E3.82.A4.E3.81.AE.E7.99.BB.E9.8C.B2" name=".E3.82.AA.E3.83.BC.E3.83.90.E3.83.BC.E3.83.AC.E3.82.A4.E3.81.AE.E7.99.BB.E9.8C.B2">オーバーレイの登録</h4> +<p>Firefoxでオーバーレイを表示する時はいつでも、そのオーバーレイをブラウザウィンドウにマージする必要があります。ですから、 <code>chrome.manifest</code> ファイルに次の一文を追加して下さい。</p> +<pre class="eval">overlay <a class="external" rel="freelink">chrome://browser/content/browser.xul</a> <a class="external" rel="freelink">chrome://sample/content/sample.xul</a> +</pre> +<p>これはFirefox に、「 browser.xul をロードする時に sample.xul を browser.xul にマージする」という意味です。</p> +<h4 id=".E3.83.86.E3.82.B9.E3.83.88" name=".E3.83.86.E3.82.B9.E3.83.88">テスト</h4> +<p>最初に、我々はあなたの拡張機能の存在を Firefox に伝えなくてはなりません。昔、Firefox 1.0 の頃にはこれは、あなたの拡張機能を XPI としてパッケージ化して、ユーザインタフェースを通じてそれをインストールする事を意味していました。これが実に辛い。でも、今はもっとずっと簡単です。</p> +<ol> + <li>あなたの環境の <a class="external" href="http://kb.mozillazine.org/Profile_folder">プロファイルフォルダ</a>を開いてください。</li> + <li>そこにある <strong>extensions</strong> という名前のフォルダを開いて下さい。(なければ作成して下さい。)</li> + <li>新しいテキストファイルを作成して、その中にあなたの機能拡張フォルダのパス（例：「<code>C:\extensions\myExtension\</code>」とか「<code>~/extensions/myExtension</code>」とか。）を書いて、そのファイルをあなたの拡張機能のIDと同じ名前（例：「<code><a class="link-mailto" href="mailto:sample@foo.net" rel="freelink">sample@foo.net</a></code>」）で保存して下さい。</li> +</ol> +<p>これで拡張機能のテストの準備ができました！</p> +<p>Firefoxを起動します。Firefox はあなたの拡張機能のディレクトリへのテキストリンクを検出して、そして拡張機能をインストールしてくれます。ブラウザウインドウが表示されると、ステータスバーパネルの右側でテキスト「Hello, World!」と表示されているのが見えるでしょう。</p> +<p>戻って「.xul」ファイルを修正した場合も、ファイルを閉じて Firefox を再起動すれば、その結果が反映されます。</p> +<p><span class="comment">These don't actually match the described extension and confuse people. -Nickolay CENTER> Image:Helloworld_tools_menu.PNG Image:Helloworld_extensions_wnd.PNG </CENTER</span></p> +<h4 id=".E3.83.91.E3.83.83.E3.82.B1.E3.83.BC.E3.82.B8.E5.8C.96" name=".E3.83.91.E3.83.83.E3.82.B1.E3.83.BC.E3.82.B8.E5.8C.96">パッケージ化</h4> +<p>あなたの拡張機能が動作する今、あなたは配備とインストールのためにそれを<a href="/ja/Extension_Packaging" title="ja/Extension_Packaging">パッケージ</a>することができます。</p> +<p>あなたの拡張機能のフォルダのコンテンツ（rootフォルダ自体を圧縮するのではなく、中身だけ）をZipで圧縮し、そのZipファイルの拡張子を「.xpi」に変更します。Windows XP ではもっと簡単で、root フォルダの下の全てのファイル・ディレクトリを選択して右クリックして、「送る」->「圧縮(zip形式)フォルダ」を選択します。これで拡張子「.zip」のファイルができます。あとはファイル名を変更すればおしまい！</p> +<p>次に「.xpi」ファイルをあなたのサーバーにアップロードして、MIMEタイプが「<code>application/x-xpinstall</code>」になっている事を確認して下さい。これであなたはリンクを張って、みんながダウンロードしてFirefoxにインストールする事を可能にできます。</p> +<h5 id="addons.mozilla.org_.E3.81.AE.E5.88.A9.E7.94.A8" name="addons.mozilla.org_.E3.81.AE.E5.88.A9.E7.94.A8">addons.mozilla.org の利用</h5> +<p>Mozilla Update は、あなたが無料であなたの拡張機能を配布する事ができるサイトです。あなたの拡張機能は、非常に人気が高くなっても安定的にダウンロードできるように、Mozillaのミラーサーバー上にも格納されます。Mozillaのサイトはまた、ユーザーにより容易なインストレーションを提供し、さらにあなたが新バージョンをアップロードした時には、既存のユーザーにその新バージョンを自動で提供します。さらに Mozilla Update では、ユーザーのコメントをあなたにフィードバックさせる事も可能です。あなたがあなたの拡張機能を Mozilla Update で配布する事は、強く推奨されているのです！</p> +<p><a class="external" href="/http://addons.mozilla.org/developers/%7Chttp://addons.mozilla.org/developers" title="http://addons.mozilla.org/developers/|http://addons.mozilla.org/developers">http://addons.mozilla.org/developers/|http://addons.mozilla.org/developers</a>を訪ねて、アカウントを作って機能拡張を配布してみて下さい。</p> +<p><em>注意:</em> あなたの拡張機能は、もし丁寧な説明文と動作のスクリーンショットがあれば、より早く知られて、もっとダウンロードされるでしょう。</p> +<h5 id=".E6.8B.A1.E5.BC.B5.E6.A9.9F.E8.83.BD.E3.81.AEWindows.E3.83.AC.E3.82.B8.E3.82.B9.E3.83.88.E3.83.AA.E3.81.B8.E3.81.AE.E7.99.BB.E9.8C.B2" name=".E6.8B.A1.E5.BC.B5.E6.A9.9F.E8.83.BD.E3.81.AEWindows.E3.83.AC.E3.82.B8.E3.82.B9.E3.83.88.E3.83.AA.E3.81.B8.E3.81.AE.E7.99.BB.E9.8C.B2">拡張機能のWindowsレジストリへの登録</h5> +<p>Windows では、拡張機能の情報をレジストリに登録する事ができます。これによって拡張機能は次回自動的に呼び出されてアプリケーションが起動されます。これはアプリケーションインストーラに拡張機能として容易にインテグレーションフックを加えることを許すものです。詳細は<a href="/ja/Adding_Extensions_using_the_Windows_Registry" title="ja/Adding_Extensions_using_the_Windows_Registry">Windowsレジストリへの拡張機能の登録</a>を参照の事。</p> +<h4 id="XUL_.E3.82.AA.E3.83.BC.E3.83.90.E3.83.BC.E3.83.AC.E3.82.A4.E6.96.B9.E5.BC.8F.E3.81.AE.E8.BF.BD.E5.8A.A0.E6.83.85.E5.A0.B1" name="XUL_.E3.82.AA.E3.83.BC.E3.83.90.E3.83.BC.E3.83.AC.E3.82.A4.E6.96.B9.E5.BC.8F.E3.81.AE.E8.BF.BD.E5.8A.A0.E6.83.85.E5.A0.B1">XUL オーバーレイ方式の追加情報</h4> +<p>UI部品をマージポイントに追加するだけでなく、XUL のかたまりをオーバーレイの中で使う事もできます。</p> +<ul> + <li>マージポイントの属性の変更</li> +</ul> +<dl> + <dd> + <dl> + <dd> + （例：「<code><statusbar id="status-bar" hidden="true"/></code>」(ステータスバーを隠す)）</dd> + </dl> + </dd> +</dl> +<ul> + <li>マスタードキュメントからマージポイントの削除</li> +</ul> +<dl> + <dd> + <dl> + <dd> + （例：「<code><statusbar id="status-bar" removeelement="true"/></code>」）</dd> + </dl> + </dd> +</dl> +<ul> + <li>追加した部品の位置の操作</li> +</ul> +<pre class="eval"><statusbarpanel position="1" .../> + +<statusbarpanel insertbefore="other-id" .../> + +<statusbarpanel insertafter="other-id" .../> +</pre> +<h4 id=".E6.96.B0.E3.81.97.E3.81.84.E3.83.A6.E3.83.BC.E3.82.B6.E3.83.BC.E3.82.A4.E3.83.B3.E3.82.BF.E3.83.BC.E3.83.95.E3.82.A7.E3.83.BC.E3.82.B9.E3.82.B3.E3.83.B3.E3.83.9D.E3.83.BC.E3.83.8D.E3.83.B3.E3.83.88.E3.81.AE.E4.BD.9C.E6.88.90" name=".E6.96.B0.E3.81.97.E3.81.84.E3.83.A6.E3.83.BC.E3.82.B6.E3.83.BC.E3.82.A4.E3.83.B3.E3.82.BF.E3.83.BC.E3.83.95.E3.82.A7.E3.83.BC.E3.82.B9.E3.82.B3.E3.83.B3.E3.83.9D.E3.83.BC.E3.83.8D.E3.83.B3.E3.83.88.E3.81.AE.E4.BD.9C.E6.88.90">新しいユーザーインターフェースコンポーネントの作成</h4> +<p>自分で作ったウィンドウとダイアログボックスを「.xul」ファイルを分けて作ったり、UI部品を操作するためのDOMメソッドを「.js」ファイルに実装する事で、機能として提供できます。また、「.css」ファイルにスタイルを定義しておけば、色の設定など、見た目を触る事もできます。</p> +<p>XUL開発のためのもっと詳しい情報は、<a href="/ja/XUL" title="ja/XUL">XUL</a>の文章を参照して下さい。</p> +<h4 id="Defaults_.E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB" name="Defaults_.E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB">Defaults ファイル</h4> +<p>Defaults ファイルは、拡張機能の root フォルダの下の <code>defaults/</code> というフォルダにあって、ユーザーのプロファイルを後押しするのに使います。デフォルトの情報は<code>defaults/preferences/</code> の下の「.js」ファイルに格納されます。ファイルをここに置いておけば Firefoxのプリファレンスシステムが起動時に自動的に読み込んでくれますので、あなたのプログラムは<a href="/ja/Preferences_API" title="ja/Preferences_API">プリファレンスAPI</a>を通じてデフォルトの情報を参照する事が可能です。</p> +<h4 id="XPCOM_.E3.82.B3.E3.83.B3.E3.83.9D.E3.83.BC.E3.83.8D.E3.83.B3.E3.83.88" name="XPCOM_.E3.82.B3.E3.83.B3.E3.83.9D.E3.83.BC.E3.83.8D.E3.83.B3.E3.83.88">XPCOM コンポーネント</h4> +<p>Firefox は拡張機能で <a href="/ja/XPCOM" title="ja/XPCOM">XPCOM</a> コンポーネントの利用をサポートしています。ですからあなたは JavaScript や C++ で(<a href="/ja/Gecko_SDK" title="ja/Gecko_SDK">Gecko SDK</a>を使って) 簡単にあなたのコンポーネントを作る事ができます。</p> +<p>自作の「.js」「.dll」ファイルは<code>components/</code> ディレクトリに置いて下さい。そうすれば拡張機能をインストールした最初のFirefox起動時に、自動的に登録されます。</p> +<p>詳細については <a href="/ja/How_to_Build_an_XPCOM_Component_in_Javascript" title="ja/How_to_Build_an_XPCOM_Component_in_Javascript">How to Build an XPCOM Component in Javascript</a> および <a href="/ja/Creating_XPCOM_Components" title="ja/Creating_XPCOM_Components">Creating XPCOM Components</a> bookを参照してください。</p> +<h5 id=".E3.82.A2.E3.83.97.E3.83.AA.E3.82.B1.E3.83.BC.E3.82.B7.E3.83.A7.E3.83.B3.E3.82.B3.E3.83.9E.E3.83.B3.E3.83.89.E3.83.A9.E3.82.A4.E3.83.B3.E3.81.AE.E6.93.8D.E4.BD.9C" name=".E3.82.A2.E3.83.97.E3.83.AA.E3.82.B1.E3.83.BC.E3.82.B7.E3.83.A7.E3.83.B3.E3.82.B3.E3.83.9E.E3.83.B3.E3.83.89.E3.83.A9.E3.82.A4.E3.83.B3.E3.81.AE.E6.93.8D.E4.BD.9C">アプリケーションコマンドラインの操作</h5> +<p>カスタム XPCOMコンポーネントの可能な用途のひとつは、Firefox または Thunderbird にコマンドラインハンドラを追加することです。このテクニックを使えば、あなたの拡張機能をアプリケーションとして実行できます:</p> +<pre class="eval"> firefox.exe -myapp +</pre> +<p><span class="comment">I should move the useful parts of this to the Command Line page. -Nickolay ファンクションを含んだコンポーネントを追加する事によって、これは実行されます。 function NSGetModule(comMgr, fileSpec) { return myAppHandlerModule; } このファンクションはFirefox 起動を起動するたびに、Firefox から呼び出されます。 #Firefox はmyAppHandlerModuleの「registerSelf()」を呼ぶことによって、 myAppHandlerModule を登録します。 #それから「getClassObject()」によって myAppHandlerModule のハンドラファクトリを入手します。 #ハンドラファクトリはその「createInstance()」を使ってハンドルを作るために使われます。 #最終的にハンドルの「handle(cmdline)」で、コマンドライン(cmdline)の 「handleFlagWithParam()」と「handleFlag()」を処理します。</span> 詳細については、<a href="/ja/Chrome/Command_Line" title="ja/Chrome/Command_Line">Chrome: Command Line</a>と <a class="external" href="http://forums.mozillazine.org/viewtopic.php?t=365297">forum Discussion</a> を参照して下さい。</p> +<h4 id="Localization_.28.E5.9C.B0.E5.9F.9F.E5.8C.96.29" name="Localization_.28.E5.9C.B0.E5.9F.9F.E5.8C.96.29">Localization (地域化)</h4> +<p>複数言語をサポートするために、あなたは <a href="/ja/XUL_Tutorial/Localization" title="ja/XUL_Tutorial/Localization">エンティティ</a>や<a href="/ja/XUL_Tutorial/Property_Files" title="ja/XUL_Tutorial/Property_Files">文字列のバンドル</a> を使ってコンテンツから文字列を分離するべきです。開発時にやっておけば、後から戻ってきてやるよりもずっと楽ですよ！</p> +<p>拡張機能の地域化の情報は、「locale」ディレクトリの中に格納します。例えば、サンプル機能拡張に国依存の情報を追加したい場合、ディレクトリ「chrome」(「content」ディレクトリがあるのと同じ場所です）の中に「locale」ディレクトリを作り、そこにファイル「chrome.manifest」を作成して下記の一文を記述します。</p> +<pre class="eval">locale sample sampleLocale chrome/locale/ +</pre> +<p>XULで地域化した属性値を与えるためには、その値を「<code>.ent</code>」ファイル（または「<code>.dtd</code>」ファイル）に記述します。これは「locale」ディレクトリに、こんな感じで書いておきます。</p> +<pre class="eval"><!ENTITY button.label "Click Me!"> +<!ENTITY button.accesskey "C"> +</pre> +<p>そうしたら、今度はあなたが書いた XUL ドキュメントの先頭（但し "<?xml version"1.0"?>" よりは下）に下記のように書きます。</p> +<pre class="eval"><!DOCTYPE <strong>window</strong> SYSTEM "<a class="external" rel="freelink">chrome://packagename/locale/filename.ent</a>"> +</pre> +<p>ここで <code><strong>window</strong></code> というのは<code><a href="/ja/DOM/element.localName" title="ja/DOM/element.localName">地域名</a></code> であり、XUL文書のルート要素となります。<code>SYSTEM</code> プロパティは、エンティティファイルへの chrome URI です。例えばサンプルの拡張機能で言うと、ルート要素は<code><strong>overlay</strong></code>です。</p> +<p>エンティティを使うために、XUL を下記のように修正して下さい。</p> +<pre class="eval"><button label="&button.label;" accesskey="&button.accesskey;"/> +</pre> +<p>Chrome レジストリは確かに指定された地域名に対応するローカリゼーションバンドルからエンティティをロードしている事が確認できましたね。</p> +<p>スクリプトの中で文字列を使う時には、「.properties」ファイルを作成して、下記の書式で１つ１行で指定します。</p> +<pre class="eval">key=value +</pre> +<p>スクリプト中で値を取得するには、<code><a href="/ja/NsIStringBundleService" title="ja/NsIStringBundleService">nsIStringBundleService</a></code>/<code><a href="/ja/NsIStringBundle" title="ja/NsIStringBundle">nsIStringBundle</a></code>や、<code><a class="external" href="http://xulplanet.com/references/elemref/ref_stringbundle.html"><stringbundle></a></code> タグを使用します。</p> +<h4 id=".E3.83.96.E3.83.A9.E3.82.A6.E3.82.B6.E3.82.92.E7.90.86.E8.A7.A3.E3.81.99.E3.82.8B" name=".E3.83.96.E3.83.A9.E3.82.A6.E3.82.B6.E3.82.92.E7.90.86.E8.A7.A3.E3.81.99.E3.82.8B">ブラウザを理解する</h4> +<p>ブラウザウィンドウや他のXULウィンドウの検査をするのには、<a href="/ja/DOM_Inspector" title="ja/DOM_Inspector">DOMインスペクタ</a>を使用します。 (これはFirefoxの「標準」インストールには含まれませんので、「カスタムインストール」で再インストールして「開発者ツール」を選択すれば、ブラウザのツールメニューに「DOM Inspector」が表示されます）</p> +<p>DOMインスペクタのツールバーの左上の「ノードファインダボタン」を押してから、検査したいウィンドウのオブジェクトをクリックすると、視覚的に選択したものの情報が表示されます。この時、DOMインスペクタのDOMツリービューは、あなたがクリックしたものの所にジャンプルするでしょう。</p> +<p>DOMインスペクタの右側のパネルでマージポイントとあなたがオーバーレイから追加した要素を見つけるのにも使います。もしあなたがマージした要素が見つけられないのであれば、マスターのXULウィンドウが呼び出された(<code>load</code>イベントが発行された)タイミングで、あなたのオーバーレイでスクリプト割り付けて要素を追加する必要があるかもしれません。</p> +<h4 id=".E6.8B.A1.E5.BC.B5.E6.A9.9F.E8.83.BD.E3.81.AE.E3.83.87.E3.83.90.E3.83.83.E3.82.B0" name=".E6.8B.A1.E5.BC.B5.E6.A9.9F.E8.83.BD.E3.81.AE.E3.83.87.E3.83.90.E3.83.83.E3.82.B0">拡張機能のデバッグ</h4> +<p><strong>デバッグ用の分析ツール</strong></p> +<ul> + <li><a href="/ja/DOM_Inspector" title="ja/DOM_Inspector">DOMインスペクタ</a> - 属性・DOM構造・CSSスタイルルールの検査が実施されます。(例えば、あなたのスタイルルールが特定の要素では効いてなさそうな場合に調査する、非常に便利なツールです！）</li> + <li><a href="/ja/Venkman" title="ja/Venkman">Venkman</a> - ブレークポイントを JavaScript にセットして、スタック呼び出しを検証します。</li> + <li><code><a href="/ja/Core_JavaScript_1.5_Reference/Objects/Function/arguments/callee" title="ja/Core_JavaScript_1.5_Reference/Objects/Function/arguments/callee">arguments.callee</a>.<a href="/ja/Core_JavaScript_1.5_Reference/Objects/Function/caller" title="ja/Core_JavaScript_1.5_Reference/Objects/Function/caller">caller</a></code> in JavaScript - ファンクションのスタックにアクセスします。</li> +</ul> +<p><strong>printf デバッグ</strong></p> +<ul> + <li>Firefox をコマンドラインから <code>-console</code> オプションをつけて起動します。使う時には <code><a href="/ja/DOM/window.dump" title="ja/DOM/window.dump">dump</a>("string")</code> で文字列を出力できます。(詳細はリンク先を見てください)</li> + <li>JavaScript コンソールにログ出力するのには、<code><a href="/ja/nsIConsoleService" title="ja/nsIConsoleService">nsIConsoleService</a></code> を使用します。</li> +</ul> +<p><strong>さらに上のデバッグ</strong></p> +<ul> + <li>デバッグビルド版のFirefoxを動かして、Firefoxなり あなたのC++のモジュールなりにブレークポイントをセットします。経験豊かな開発者にとっては、このやり方がしばしば問題を診断する最速の方法です。詳細は <a href="/ja/Developer_Guide/Build_Instructions" title="ja/Developer_Guide/Build_Instructions">Build Documentation</a> および <a href="/ja/Developing_Mozilla" title="ja/Developing_Mozilla">Developing Mozilla</a> を参照してください。</li> + <li><a href="/ja/Debugging_a_XULRunner_Application" title="ja/Debugging_a_XULRunner_Application">Debugging a XULRunner Application</a>にもっと詳しい情報があります。</li> +</ul> +<h3 id=".E3.82.AF.E3.82.A4.E3.83.83.E3.82.AF.E3.83.BB.E3.82.B9.E3.82.BF.E3.83.BC.E3.83.88" name=".E3.82.AF.E3.82.A4.E3.83.83.E3.82.AF.E3.83.BB.E3.82.B9.E3.82.BF.E3.83.BC.E3.83.88">クイック・スタート</h3> +<p>機能する簡単な拡張機能を作るために <a class="external" href="http://ted.mielczarek.org/code/mozilla/extensionwiz/">Extension Wizard</a> オンラインツールを使えます。</p> +<p>Extension Wizard を使って作ったのと同じような <a class="external" href="http://mozilla.doslash.org/stuff/helloworld.zip">Hello World 拡張機能</a> の一行一行の説明が <a class="external" href="http://kb.mozillazine.org/Getting_started_with_extension_development">another tutorial from MozillaZine Knowledge Base</a> にあります。</p> diff --git a/files/ja/conflicting/mozilla/developer_guide/how_to_submit_a_patch/index.html b/files/ja/conflicting/mozilla/developer_guide/how_to_submit_a_patch/index.html new file mode 100644 index 0000000000..c4163517cb --- /dev/null +++ b/files/ja/conflicting/mozilla/developer_guide/how_to_submit_a_patch/index.html @@ -0,0 +1,55 @@ +--- +title: Hacking Mozilla +slug: Hacking_Mozilla +tags: + - Developing Mozilla +--- +<p>このページは、Mozilla の CVS リポジトリにプログラムコードをチェックインする方法を知りたい方のために設けられました。もしあなたが、今まで一度も Mozilla をビルドしたことがなければ、<a href="ja/Mozilla_Source_Code_(HTTP%2f%2fFTP)">ソースコード</a> のページを参照して、ビルドすることから始めた方がよいでしょう。そして <a href="ja/Mozilla_Hacker's_Getting_Started_Guide">Mozilla のハックを始めるためのガイド</a> を調べてみてください。 +</p> +<h3 id=".E3.83.91.E3.83.83.E3.83.81.E3.81.AE.E3.83.A9.E3.82.A4.E3.83.95.E3.82.B5.E3.82.A4.E3.82.AF.E3.83.AB"> パッチのライフサイクル </h3> +<p>もし、パッチ作成に関心があれば、以下のガイドラインが役に立つでしょう +</p> +<ul><li> 私達の基本的な設計思想の一つは、私達のプログラムコードが様々なプラットフォーム上で動作するようにするということです。必ずしも最新の標準の全てをサポートしていないようなコンパイラを使って、小さなプラットフォームに Mozilla を移植している人々もいます。もしあなたがコンパイルされたコード (C, C++) を書いているのであれば、私達の <a href="index.php?title=ja/C%2b%2b_Portability_Guide">C++ 移植ガイド</a> に従い、できる限りの警告出力を有効にしてコンパイルを行うことで、それらのプラットフォームを助けてください。いつの日かあなたは、あなたが書いたプログラムコードが、ケーブルテレビの受信機や携帯電話のような本当に小さなプラットフォーム上で動作しているのを見つけることでしょう。 +</li><li> あなたのコードは <a class="external" href="http://www.mozilla.org/projects/l10n/customizable-code.html">ローカリゼイション</a> にも気を付けてください。62の <a class="external" href="http://www.mozilla.org/projects/l10n/mlp_status.html#projects">登録されたプロジェクト</a> があり、そのうち 7 〜 10 個は現在もアクティブです。 +</li><li> <a href="ja/Mozilla_Coding_Style_Guide">Mozilla コーディングスタイルガイド</a> にも注意してください。 +</li><li> カスタマイズ性を考慮してください。Mozilla テクノロジの最大の利点の一つは、カスタマイズ性です。Mozilla のベンダやディストリビュータは彼らのニーズに向かって Mozilla を仕立てる特別な要件があるでしょう。Mozilla のディストリビュートを円滑にするために、機能を追加、削除、修正を容易に出来るように、是非カスタマイズ性を考慮してください。 +</li><li> 私達の <a class="external" href="http://www.mozilla.org/roadmap.html">開発ロードマップ</a> を読んでください。それは、Mozilla が目標としているアーキテクチャの概説であり、Mozilla をハックする全ての人にとって良い読みものです。 +</li><li> 新しいソースファイルを作るときには、適切な <a class="external" href="http://www.mozilla.org/MPL/boilerplate-1.1/">boilerplate (テンプレート)</a> のライセンスヘッダを加え、空欄を埋めてください。また、修正したファイルのライセンスヘッダの contributors (貢献者) 欄にあなた自身を加えるべきならばそうしてください。 +</li><li> パッチは現在の CVS に対して書くべきです。また、ソースファイルを開くことなくパッチを理解してもらうために、なるべく前後に十分な行を加えるべきです。標準のガイドラインとしては、最低限 <code>cvs diff -u8pN</code> を使用することが推奨されます。理解しやすいパッチを作るためにもっと前後の行を増やしたいなら、数字の 8 をもっと大きい数字に変えてください。 +</li></ul> +<p>もし、あなたがパッチを持っていたら、それを <a class="link-https" href="https://bugzilla.mozilla.org/">Bugzilla</a> へのバグ報告に添付してください。私たちはコードレビューに大きな信頼を置いています。なので、CVS リポジトリにコードをチェックインする前に、適切な <a class="external" href="http://www.mozilla.org/owners.html">モジュールオーナー</a> か、その同僚によるレビューを受ける必要があります。モジュールは完全には直接 Bugzilla コンポーネントに対応しません。しかし、強い相関があります。レビューを受けるには： +</p> +<ul><li> <a class="external" href="http://www.mozilla.org/owners.html">該当モジュールのモジュールオーナーか peer (代行者)</a> に、パッチに <code>?</code> というレビューフラグを立て (このフラグはレビューが求められていることを示します)、レビューをお願いしたい人のメールアドレスを記入して、レビューを明示的に依頼してください (あなたが指名されたのでなければ)。 +</li><li> バグナンバと、パッチを添付している事実と、レビューしてほしいことに言及して、モジュールオーナーか代行者に直接メールを送ることも出来ます。しかし、Bugzilla の依頼機能を使った方が見落とされる可能性は低いです。 +</li></ul> +<p>いくつかのケースで、次の数日以内に返答を受け取ることが出来るでしょう。不幸にして、忙しすぎるので彼らのバグ情報すべてに追いつけていない人々もいます。なので、あなたが 1 週間以内に返事を受け取れなくて、あなたがそのパッチに (言うならば、1 年やそこらでなく) すぐに対応する価値があると考えるなら、このようなことが出来ます。 +</p> +<ul><li> そのコンポーネントのバグに対するパッチをレビューしたことのある誰か他の人を Bugzilla で探し、かわりにその人にレビューを依頼してください。 +</li><li> IRC の <a class="link-irc" href="irc://irc.mozilla.org/#developers">#developers</a> で適切なレビューワが誰かを聞いてください。注意：レビュー依頼は IRC ではなく、E-Mail で +</li></ul> +<p>レビューワはあなたが取り組んでほしいあなたのパッチに対してコメントするでしょう。彼らが満足したとき、かれらはパッチをレビュー済みと印付けし、バグ (訳注：Bugzilla) で "r=<user>"と言うでしょう。 +</p><p>たいていの場合、"スーパーレビュー"として知られる追加のレベルのレビューが必要です。<a class="external" href="http://www.mozilla.org/hacking/reviewers.html">スーパーレビュー</a> ドキュメントはスーパーレビューを受けるために何をすべきかについて詳しく述べています。また、スーパーレビューはパッチに変更を求めるかもしれません。彼らが満足すると、バグ (Bugzilla) の中でそう言うでしょう。 +</p><p>レビューとスーパーレビューを受けて、パッチが十分な水準に達していたら、ツリーにチェックインできます。あなたが CVS アカウントを持っていない場合、代わりにチェックインしてくれる人を探さなければなりません。これは実に簡単です。<code>checkin-needed</code> キーワードをバグに追加するだけです。数少ないコミッターがこのキーワードの検索を設定しており、ちょくちょく調べてはコミットされていないパッチをコミットします。通常はキーワードが追加されてから 1 ～ 2 週間のうちにはコミットされるでしょう。2 週間以上たってもコミットされない場合、IRC に行って誰かにあなたのパッチをコミットするように (そして <code>checkin-needed</code> が付いたバグを調べるように、それらのバグにパッチを提供した人たちも同じように待たされているでしょうから) 言ってみる価値はあるでしょう。 +</p><p>時折、ツリーはリリースを試みるために少しより厳重にロックされ、"approval" (承認) と呼ばれる第三段階がチェックインのために必要になります。それらの時期には、<a class="external" href="http://tinderbox.mozilla.org/">Tinderbox</a> は approval が必要であると先頭でうたって注意を促します。approval を依頼するには、パッチ添付ファイルを変更して approval フラグに <code>?</code> をセットしてください。もし、approval が断られた場合、リリースが行われるか、リリースへ向けての開発がブランチとなるまで、1 週間程度パッチのチェックインを待たなければなりません。 +</p><p>これらのプロセスの中で、他に問題を抱えているか、ガイドが必要なら、<a class="link-mailto" href="mailto:gerv@mozilla.org">Gerv</a> にメールすることです。 +</p> +<h3 id="CVS_Commit_Access_.E3.83.AB.E3.83.BC.E3.83.AB"> CVS Commit Access ルール </h3> +<p>あなたがパッチでの貢献を頻繁に行って、品質の良いコードについて定評のある業績を残したとき、<a class="external" href="http://www.mozilla.org/hacking/getting-cvs-write-access.html">CVS コミット権限を得る</a> のプロセスを始めることが出来ます。CVS コミット権限は、以下のルールが伴います。 +</p><p>もっとも重要なルールは、ビルドのプロセスに関してです。それを無視することは、多くの人々の時間を浪費することになります。図々しい違反者は、ルールに従う事に悩まされるでしょう。抵抗は無駄です。 +</p> +<ul><li> <a class="external" href="http://www.mozilla.org/hacking/rules.html">follow the tree rules</a> を学びましょう。私達のビルドの手順は、柔軟で、人の手の介入を最小限しか必要とせず、数百人の技術者に対しても調整可能です。人々がこの単純なルールに従う限り、この手順は動作し続けるでしょう。 +</li><li> リポジトリにチェックインする人は全て、ツリーの担当する部分がきれいに保たれているようにしなくてはいけません。あなたのプログラムコードをチェックイン<b>する前に</b>、他のプラットフォームでビルドできることを確かめてください。チェックイン後は、Tinderbox があなたのプログラムコードを正常にビルドできるようにすることと、ビルド時や実行時の予期しない問題に対応できるようにすることは、あなたの責任です。多くの人にとって、<a class="external" href="http://groups.google.com/groups?oi=djq&as_umsgid=mcmullen-2404991952090001%40h-208-12-40-136.mcom.com">ツリーの破損は時間の損失</a> となります。決してしないでください。 +</li><li> <a class="external" href="http://tinderbox.mozilla.org/">Tinderbox</a> の活用について学んでください。Tinderbox を使って、ツリーについての全ての情報を入手することができます。誰かがプログラムコードをツリーにチェックインしている場合、あなたは Bonsai を使って、ツリーがオープンされているかどうかや、計画されているクローズがあるかどうかなど、そのツリーについての情報を調べなくてはいけません。 +</li><li> 新しいディレクトリを作成する際には、そのディレクトリの親ディレクトリの所有者の許可を得てください。"mozilla" のトップディレクトリに新しいディレクトリを追加する際には、mozilla.org の <a class="link-mailto" href="mailto:staff@mozilla.org">スタッフ</a> に連絡してください。私達は、相当な理由がない限りは、新しいトップレベルディレクトリの追加を望みません。ほとんどの新しいプロジェクトは、ツリーにすでにあるどこかのフォルダ、例えば components におさまるでしょう。 +</li></ul> +<p>Happy hacking! +</p> +<div class="originaldocinfo"> +<h2 id=".E5.8E.9F.E6.96.87.E6.9B.B8.E3.81.AE.E6.83.85.E5.A0.B1"> 原文書の情報 </h2> +<ul><li> 最終更新日: October 1, 2007 +</li><li> 著作権: Portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a Creative Commons license | <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">詳細</a> +</li></ul> +</div> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Hacking_Mozilla" } ) }} diff --git a/files/ja/conflicting/mozilla/developer_guide/index.html b/files/ja/conflicting/mozilla/developer_guide/index.html new file mode 100644 index 0000000000..80eb0d79bc --- /dev/null +++ b/files/ja/conflicting/mozilla/developer_guide/index.html @@ -0,0 +1,143 @@ +--- +title: Mozilla Hacker's Getting Started Guide +slug: Mozilla_Hacker's_Getting_Started_Guide +tags: + - Developing Mozilla +--- +<p>もし、このドキュメントについて、誤りを見つけたとか、更新に貢献したいとか、セクションを追加したいとか、そういうときには <a class="link-mailto" href="mailto:kaie@kuix.de">Kai Engert</a> までコンタクトを。</p> +<h3 id="Mozilla_.E3.81.A8.E3.81.AF.EF.BC.9F" name="Mozilla_.E3.81.A8.E3.81.AF.EF.BC.9F">Mozilla とは？</h3> +<p>Mozillaは オープンソースプロジェクトであり、クロスプラットフォームのインターネットクライアントソフトウェアを開発する組織です。ソースコードごとに定められた (MPL、NPL、GPL、LGPLが混在している) <a class="external" href="http://www.mozilla.org/MPL/">ライセンス</a> に従う必要があるとはいえ、Mozilla がオープンソースであるために、ソースコードは誰にでも利用可能です。</p> +<p>Mozilla.org は、このプロジェクトの開発者を助けるための基盤を提供する組織の名前です。<a class="external" href="http://www.mozilla.org/">mozilla.org</a> は Mozilla プロジェクトのための中心となる Web サイトのアドレスでもあります。</p> +<h3 id=".E5.8B.95.E6.A9.9F" name=".E5.8B.95.E6.A9.9F">動機</h3> +<p>Mozilla は最大規模のオープンソースプロジェクトの一つです。Mozilla は 何百万行のコードで作られています。そのため、この巨大プロジェクトに参加するのは簡単ではありません。このドキュメントの意図は、Mozilla をハックするために何に気を付けなくてはならないかについての概要を示すことにあります。このドキュメントで Mozilla プロジェクトで使われている多くの異なったテクノロジーの間の橋渡しをしようとしています。</p> +<p>私が Mozilla の内部に目を向け始めたとき、私はこのようなドキュメントがあればと願いました (^^)</p> +<h3 id=".E5.AF.BE.E8.B1.A1.E8.80.85" name=".E5.AF.BE.E8.B1.A1.E8.80.85">対象者</h3> +<p>このドキュメントは第一に Mozilla のどの部分かで作業できることを望む開発者のために書かれました。参加希望者は、オブジェクト指向プログラミングについて十分な理解が求められます。そして、特に、このプロジェクトで主にプログラム言語で用いられている C言語と C++ についての経験が求められます。</p> +<p>しかし、もしあなたが、例えば JavaScript と XUL UI (XUL ユーザインタフェース) だけのように、コードの一部でだけ作業することを望んでいるとしても、この文書は参考になるでしょう。</p> +<h3 id=".E3.81.93.E3.81.AE.E3.83.89.E3.82.AD.E3.83.A5.E3.83.A1.E3.83.B3.E3.83.88.E3.81.AE.E7.AF.84.E5.9B.B2" name=".E3.81.93.E3.81.AE.E3.83.89.E3.82.AD.E3.83.A5.E3.83.A1.E3.83.B3.E3.83.88.E3.81.AE.E7.AF.84.E5.9B.B2">このドキュメントの範囲</h3> +<p>このドキュメントは以下の疑問に答えようとしています。</p> +<ul> + <li>どのようにソースコードは組織化されているか？</li> + <li>どんなテクノロジーが使われているか？</li> + <li>参加するにはどこから手をつければ良いか？</li> + <li>コンポーネントは相互にどのように働いているか？</li> + <li>どんなツールがあり、どのように便利なのか？</li> + <li>参加するために従う必要のあるどんなルールがあるのか？</li> +</ul> +<h3 id="Netscape_.E7.A4.BE.E3.81.AF.E3.81.93.E3.81.AE.E3.83.97.E3.83.AD.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E3.81.AB.E4.BD.95.E3.82.92.E3.81.99.E3.81.B9.E3.81.8D.E3.81.AA.E3.81.AE.E3.81.8B.EF.BC.9F" name="Netscape_.E7.A4.BE.E3.81.AF.E3.81.93.E3.81.AE.E3.83.97.E3.83.AD.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E3.81.AB.E4.BD.95.E3.82.92.E3.81.99.E3.81.B9.E3.81.8D.E3.81.AA.E3.81.AE.E3.81.8B.EF.BC.9F">Netscape 社はこのプロジェクトに何をすべきなのか？</h3> +<p>Mozilla が創造された時、それは Netscape のものでした。ある時期に、会社としての Netscape は、会社が所有していて、他者の著作権に抵触しないソースコードの部分を公開することにしました。</p> +<p>Mozilla は完成された製品ではありませんでした。なので、Mozilla プロジェクトはたくさんのコードを新たに書かなくてはなりませんでした。それに加えて、多くの部分を書き直しました。他のコンポーネントのいくつかは維持され、拡張されました。これが、このドキュメントや、Mozilla プロジェクトについて議論するときに Netscape という単語を目にする、耳にする機会があるの理由の一つです。</p> +<h3 id="C.2B.2B_.E3.81.A8_JavaScript" name="C.2B.2B_.E3.81.A8_JavaScript">C++ と JavaScript</h3> +<p>Mozilla では幅広く使われているため、Mozilla のソースコードで JavaScript と C++ が互いにどう関係しているかを説明するのは意味のあることです。C++ はコンパイル型の言語で、JacaScript はインタプリタ型の言語です。JavaScript は Web サイトをインプリメントするのに使われるテクノロジーとして最も共通のものとして知られています。しかし、Mozilla 開発者は、Mozilla ソースコード自身を両方の言語の混合で成り立たせることを選びました。</p> +<p>Mozilla ブラウザを起動したとき、C言語 と C++ のコンポーネントがまず開始します。しかし、起動処理の速い時点で XPConnect と呼ばれるテクノロジーが実行時にインタプリタ解釈された JavaScript を使用可能に初期化します。実際、Mozilla ブラウザは、コンパイルされた C++ と、コンパイルされない JavaScriptの両方で構成されています。</p> +<p>JavaScript は、OS によって直接に実行できるようにコンパイルすることが出来ないことに注意してください。そのために、われわれは C言語と C++ をプログラムのバックエンドで使用し、JavaScript は Mozilla の内部で動作します。</p> +<p>そして、JavaScript を使用した Web ページをネットサーフするとき、その JavaScript はサンドボックス (隔離された安全地帯) の範囲内で動作し、Mozilla の内部オブジェクトにアクセスすることは出来ないことも覚えておいてください。DOM (ドキュメント・オブジェクト・モデル Document Object Model) によって露出したオブジェクトだけが アクセス可能です。</p> +<p>このドキュメントで JavaScript に言及がある時はいつでも、Mozilla 内部の機能性に寄与するテクノロジーを意味します。JavaScript は、ユーザインタフェースイベント (ユーザの操作によるブラウザの動作) の処理を行うソースコードの部分に最もよく使われています。以下のドキュメントのほとんどは、アプリケーションの C++ 部分の概観について説明します。</p> +<h3 id="NSPR_-_Netscape_.E3.83.9D.E3.83.BC.E3.82.BF.E3.83.96.E3.83.AB.E3.83.BB.E3.83.A9.E3.83.B3.E3.82.BF.E3.82.A4.E3.83.A0" name="NSPR_-_Netscape_.E3.83.9D.E3.83.BC.E3.82.BF.E3.83.96.E3.83.AB.E3.83.BB.E3.83.A9.E3.83.B3.E3.82.BF.E3.82.A4.E3.83.A0">NSPR - Netscape ポータブル・ランタイム</h3> +<p>Mozilla プロジェクトでのソフトウェア開発のために第一に必要なのは、例えば、特定の OS に制限されてはいけないなどのように、クロスプラットフォームであることです。</p> +<p>C++ がポータブルな言語を意図している一方、そのポータブル性の概観は、一般的なプログラミングロジックとデータ構造に限られます。もし、特定の OS のためのソフトウェアを書きたいならば、その OS の特有の機能を使う必要があります。しばしば、すべての OS 上で同じ機能を使いたくなりますが、それをするためにはプラットフォーム毎に特有のコードを書かなくてはなりません。</p> +<p><a href="ja/NSPR">NSPR</a> の意図するところは、OS と Mozilla ソースコードの間に、Mozilla ソースコードの他のエリアのコードをシンプルにしやすくするためのレイヤー (層) を提供することです。C言語のライブラリ関数を利用しようとするとき、まずはクロスプラットフォームなインプリメントのものが NSPR により提供されていないかチェックすることが必要です。</p> +<h3 id=".E3.82.B9.E3.83.AC.E3.83.83.E3.83.89" name=".E3.82.B9.E3.83.AC.E3.83.83.E3.83.89">スレッド</h3> +<p>Mozilla はマルチスレッドアプリケーションです。Mozilla のコードにトライするまえに、それが何を意味するかを知る必要があります。</p> +<p>NSPR はマルチスレッドプログラムのための OS 非依存の機能を提供しています。例えば、すべてのネットワークデータ転送はデータ転送をしている間にも、ユーザインタフェースが応答可能なままとするために、スレッドごとに行われます。</p> +<p>C++ コードのために必要なことの一つは、マルチスレッド対応 (スレッドセーフ) であることです。</p> +<h3 id=".E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E6.8C.87.E5.90.91.E3.83.97.E3.83.AD.E3.82.B0.E3.83.A9.E3.83.9F.E3.83.B3.E3.82.B0_&_.E3.83.A2.E3.82.B8.E3.83.A5.E3.83.BC.E3.83.AB.E5.8C.96" name=".E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E6.8C.87.E5.90.91.E3.83.97.E3.83.AD.E3.82.B0.E3.83.A9.E3.83.9F.E3.83.B3.E3.82.B0_&_.E3.83.A2.E3.82.B8.E3.83.A5.E3.83.BC.E3.83.AB.E5.8C.96">オブジェクト指向プログラミング & モジュール化</h3> +<p>Mozilla の C++ ソースコードは、OOP (オブジェクト指向プログラミング) のルールに従うことを意図しています。そのルールには、モジュール化コンポーネント設計も含まれており、そこでは、あなたのクラスの public なインターフェースを使用した場合のみ、内部データ (変数) に対するアクセスが許可される、あるいは可能になります。</p> +<p>たいていのシンプルな C++ プロジェクトにおいて、これはそれだけの意味です。クラスを適切に public/protected/private を使い分けるのには注意深くデザインするというだけの意味です。しかし、すべてのソースコードはどこでも利用可能な状態のままです。例えば、いつでも、クラスのコンポーネントを private から public へ変更することが出来ます。そうすると、それはプロジェクトの中の他の箇所から利用可能となります。これは、Mozilla には当てはまりません。Mozilla では、よりモジュール化することが望まれます。</p> +<p>Mozilla のソースコードは分離されたコンポーネントで組織されています。一つのコンポーネントの中に限れば、前段落に記した単純なプロジェクトのように、すべてが自由ですが、複数のコンポーネント間においては、同じレベルの柔軟性はありません。</p> +<p>コンポーネント同士が通信するとき、コンポーネント・オブジェクト・モデル (COM component object model) を使ったうまく定義されたインタフェースだけを使って行います。</p> +<h3 id=".E3.82.A4.E3.83.B3.E3.82.BF.E3.83.95.E3.82.A7.E3.83.BC.E3.82.B9" name=".E3.82.A4.E3.83.B3.E3.82.BF.E3.83.95.E3.82.A7.E3.83.BC.E3.82.B9">インタフェース</h3> +<p>インタフェースのコンセプトは、CORBA テクノロジーで使われているもののようなものです。例えば、CORBA も Mozilla もインタフェースを記述するのに XPIDL (IDL とはインタフェース定義言語を意味します Interface Definition Language) という同様の言語を用いています。</p> +<p>CORBA 環境を使用する事は、制限が多く難しいものです。なぜならば、Mozilla では頻繁には用いないようなプロセス間、ネットワーク間通信を伴うためです。正式に流通している CORBA 環境ではインタフェースのコンポーネントを変更するのは同時にしばしば実行しているシステムすべてを入れ替えることが出来ないために困難です。何か変更を加えたいとき、新しいバージョンのインタフェースを定義しなくてはなりません。しかし、前のバージョンのサポートも続けることが求められます。</p> +<p>Mozilla は本稿執筆時点において正式に流通しているアプリケーションではないので、現在のところ多くのインタフェースは開発プロセスの必要に応じて変更することが可能です。しかし、Mozilla ブラウザはいくつかの環境に埋め込まれて実行されるので、それらの環境は確定したインタフェースを信頼できなくてはなりません。したがって、インタフェースは凍結されることができます。この状況は、しばしば、インターフェースが定義されている状態で表されます。時間の経過とともに Mozilla が安定化する、または、魔法のパージョン番号 1.0 に近づくにつれ、凍結されていないインタフェースに対する凍結されているものの割合は増えるでしょう。</p> +<p>Mozilla ビルドする一つのステップは、インタフェース定義ファイルを自動的に C言語 /C++ ヘッダファイルに翻訳することです。これは Mozilla の持つ IDL コンパイラである xipdl の仕事です。</p> +<p>メソッドとメンバデータに加えて、インタフェースは追加の属性を持っています。インタフェースは UUID というインタフェースごとに唯一に識別可能な番号を持っています。インタフェースはスクリプト記述可能な属性を持つことが出来ます。これは、インタフェースに JavaScript のコードからもアクセス可能であるということです。スクリプト記述可能なインタフェースは JavaScript ランタイムの範囲内で有効なパラメータのためのデータタイプを使うためだけに限定されています。</p> +<h3 id="XPCOM_.2F_nsISupports_.2F_nsCOMPtr" name="XPCOM_.2F_nsISupports_.2F_nsCOMPtr">XPCOM / nsISupports / nsCOMPtr</h3> +<p>XPCOM は Mozilla 自身の COM (コンポーネント・オブジェクト・モデル component object model) のインプリメンテーションです。名前の頭につく XP は、それがクロスプラットフォームであることを意味します (この XP がつくということを、特定の OS 製品のためのように見えるので、XP のつくこの名前で混乱しないこと)。実際のところ、クロスプラットフォームであるので、XPCOM は、他の形の COM より、用途は広いです。</p> +<p>最終的には、mozilla.org にある紹介ドキュメント <a href="ja/XPCOM">XPCOM</a> を読むべきでしょう。ハックを始めるためには、XPCOM は COM のコンセプトを働かすエンジンだということができます。これは、オブジェクト仲介人の役割を演じることも含まれています。</p> +<p>一般に、インタフェースはジョブを行うために使われることのできるオブジェクトを記述します。もし、しなければならないジョブがあるなら、インタフェースで提供される インプリメントをリクエストする必要があります。そのインプリメントは他のコンポーネントの範囲内に属することが出来ます。あなたの望む特定のインプリメントに決定するために、テキストベースの識別子である規約 ID を利用しています。規約 ID は、細部まで定義されたインターフェースを使用することで利用しやすくなる、インプリメントの動作上の契約です。XPCOM ランタイムシステムは、どのクラスが規約 ID でインプリメントされているか、どのコンポーネントがそれを提供しているかを知っています。</p> +<p>たとえ、あなたのコードが単独のコンポーネント内だけのものであり、COM の使用が必要条件ではないとしても、COM はいずれにせよとてもしばしば使われます。一つの理由は柔軟さにあります。他の理由として、JavaScript を利用してインプリメントされた Mozilla のロジックのある部分と機能を共有することを許すためです。Mozilla は実行時にインタプリタ言語の JavaScript と コンパイル言語の C++ の間でコミュニケーション可能とする XPConnect と呼ばれる技術を提供しています。</p> +<p>実行時に COM オブジェクトのインスタンスが必要なときにはいつでも、クラスオブジェクトは作成され、インタフェースのポインタが与えられます。いくつかの理由でこれらのインスタンスが参照をカウントされることが決められました。一つの理由は効率です。そのために、オブジェクトの不要なコピーは省かれるべきです。他の理由は、データオブジェクトはスレッド間で渡されるべきですが、すべてがメモリ上の同じデータオブジェクトに対するポインタを維持するためです。だからです。最後に、同じデータオブジェクトは多数のコンポーネントに参照されたり、多数のリストに貯えられたりすべきだからです。</p> +<p>参照の生存期間は異なるため、どのくらいしばしば現在何かに参照されているという状態であるか覚えておくためには、それぞれのオブジェクトが参照のカウントを保持するのが最も簡単な方法です。オブジェクトから参照されたとき (XPCOM エンジンによる直接参照もしくは、関数呼び出しによって)、リファレンスのカウントのケアを確実にする必要があります。オブジェクトへの参照を維持するかどうかや、参照を終えられるかどうかを教え、参照を削除しなくてはなりません。そのように、オブジェクトはそれがまだ必要とされているかどうかを自分自身で判断することが出来ます。オブジェクトがもう不要なら、自分自身でメモリから削除します。</p> +<p>この一般的な機能を満たすために、インタフェースをインプリメントする Mozilla のすべてのクラスは参照カウント機能と自動破棄機能を備えた nsISupports という共通基礎クラスを共有しています。このような共通基礎クラスは、どんな COM のインプリメントにも存在します。</p> +<p>あなたが割り当てたものは、あなたが掃除 (削除) しなければならない、という一般的なルールがあります。例えば、参照を追加したいとき、もう不要となったときすぐさま参照を解放することを強く促します。そうしなければメモリリークといった問題を引き起こすことになるでしょう。</p> +<p>C++ では、nsISupports 基本クラスのメソッドの明白なメソッド呼び出しによって行われます。しかし、それらのメソッド呼び出しは、忘れやすいだけでなく、コードの可読性も低下させます。特に多くの関数やメソッドは複数の出口を持っているからです (例：return 文など)。</p> +<p>関数やメソッドの出口毎にすべてのオブジェクトへの参照を解放することを確実にしなければなりません。これを楽にするために、解放の呼び出しを繰り返さなくて良いために、一般的な補助クラスは <a href="ja/NsCOMPtr">nsCOMPtr</a> という名前の COM オブジェクトへのポインタを扱うために提供されています。これは XPCOM の特徴の一つで、COM コーディングをより楽にします。これは、特定のオペレータのオーバーライドを通してポインタをシミュレートします。いくつかの例外的ケースがありうるにも関わらず、このような一般的なルールはほとんどすべてのコードで守られています。：ポインタ変数 "interface*" をインタフェースをインプリメントしたオブジェクトとして使うつもりがあるときにはいつでもローカル "nsCOMPtr<interface>" 変数をかわりに使う。このポインタが "スコープ範囲外" となったらすぐに、可能ならデストラクタが自動的に参照カウントを減らします。</p> +<p>インタプリタ言語の JavaScript では、これはコード上で簡単に行えます。それは、ガベージコレクションのためです。可能なときに参照を自動的に減少させる魔法があるのです。しかし、この魔法は循環参照しないことを必要とします。例えば、もし、二つのオブジェクトがあり、お互いへの参照を含んでいても、他のオブジェクトがそれらを参照していないとき、それらのオブジェクトは検出されません。それらのオブジェクトはプログラム実行の残りの間メモリに存在しつづけます。</p> +<h3 id=".E4.BE.8B.E5.A4.96_.2F_nsresult" name=".E4.BE.8B.E5.A4.96_.2F_nsresult">例外 / nsresult</h3> +<p>コード実行が実行時に失敗することもあります。失敗を扱うプログラミングメカニズムが例外 (エクセプション) を用いることです。Mozilla では JavaScript 部分で例外を使っており、C++ 部分では使っていません。以前やったことがスタックの中にあるため、例外はいつでもポータブルというわけではないというのが、そのいくつかの理由のうちの一つです。Mozilla の C++ のコードは戻り値で例外を真似ています。つまり、JavaScript の中では、tyr-catch のブロックを使うことが出来、C++ の中では、インタフェースのメソッドを使う場合はいつでも戻り値を見なくてはなりません。その戻り値は nsresult 型です。このため、IDL ファイルで定義されている論理的な戻り値型は、C++ コードの中の追加のメソッドのパラメータにマッピングされています。</p> +<p>nsresult 型は、失敗理由の付加情報も運ぶことを意図しています。成功か失敗かという単純なレポートの代わりに、整数型を使い、多くの異なったエラーコードを定義することを許しています。</p> +<p>いくつかの戻り値があります。例えば、NS_OK は、何事もうまくいっていて、そのままプログラムを続けることが出来るという場合に使われ、NS_ERROR_FAILURE は、何か異常が発生しているけれども、今のところそれ以上の詳細は必要ないといった場合に使われます。</p> +<p>それに加え、互いのコンポーネントはアプリケーションの他のエリアで使用していない失敗コードを上書きしないエラーコードの定義をするために、独自の範囲の整数をリクエストすることが出来ます。詳細な情報は mozilla/xpcom/base/nsError.h を参照のこと。</p> +<h3 id="C.2B.2B_.E3.81.AB.E3.81.8A.E3.81.91.E3.82.8B.E6.96.87.E5.AD.97.E5.88.97" name="C.2B.2B_.E3.81.AB.E3.81.8A.E3.81.91.E3.82.8B.E6.96.87.E5.AD.97.E5.88.97">C++ における文字列</h3> +<p>多くのアプリケーションやクラスライブラリでは、単なる簡単な string (文字列) クラスを使用することを決めている中で、Mozilla 開発者は、文字列により強力な機能を求めました。実行時の動的な振る舞いを異なったシチュエーションのために最適化することを許すために、いくつかの文字列クラス階層をインプリメントしました。時には文字列のサイズを変更するだけでしょうし、時には、自動的にサイズが大きくなる文字列が必要でしょう。そのため、たとえば、ただの平坦な文字列ではなく、断片化された文字列型も使用可能です。</p> +<p>さらなる要求としては、Mozilla は完全な多言語対応をしなくてはならないということです。ユーザにみせる情報を扱う文字列は、そのためにマルチバイトな Unicode 文字列を使っています。</p> +<p>文字列型はテンプレートに基づき、可変型のような文字列型を伴い、通常文字列と Unicode 文字列を使うのを同じロジックで扱えるようにしています。</p> +<p>多くの文字列クラスを持つというアプローチは多くの柔軟性を意味する一方、欠点としてMozilla の文字列クラスを学ぶのが易しい作業ではなくなる、ということがあります</p> +<h3 id="GUI_.28.E3.82.B0.E3.83.A9.E3.83.95.E3.82.A3.E3.82.AB.E3.83.AB.E3.83.BB.E3.83.A6.E3.83.BC.E3.82.B6.E3.83.BB.E3.82.A4.E3.83.B3.E3.82.BF.E3.83.95.E3.82.A7.E3.83.BC.E3.82.B9.29_.2F_XUL" name="GUI_.28.E3.82.B0.E3.83.A9.E3.83.95.E3.82.A3.E3.82.AB.E3.83.AB.E3.83.BB.E3.83.A6.E3.83.BC.E3.82.B6.E3.83.BB.E3.82.A4.E3.83.B3.E3.82.BF.E3.83.95.E3.82.A7.E3.83.BC.E3.82.B9.29_.2F_XUL">GUI (グラフィカル・ユーザ・インタフェース) / XUL</h3> +<p>たいていの OS では、GUI を開発するための独自の方法を定義していて、それぞれたいてい異なっています。</p> +<p>Mozilla のようなクロスプラットフォームアプリケーションにとっては、アプリケーションのロジックから OS 依存のロジックを隠すテクノロジーをもつということは、重大なことです。</p> +<p>今までに、多くの C 言語と C++ のライブラリはクロスプラットフォームに書かれてきました。私の知るところによると、それらは Mozilla には使われていません。またしても、独自のグラフィックシステムを作りました。</p> +<p>GUI のレイアウトを定義するとき、二つの可能性のいずれかを共にするかを選ぶことが出来ます。まず、表示させたいそれぞれの UI (ユーザ・インタフェース： user interface) 要素の絶対位置を定義する方法があります。この方法は、実際に多くの GUI ライブラリで選ばれています。しかし、これには欠点があります。エレメントが加わってレイアウトが変わったとき、十分な柔軟性がないことです。それは、すべての要素を新しい位置に計算し直す必要があるからです。それは、どのエレメントが重なっているかなどのフィードバックをいちはやく得るために、よりグラフィカルにしなくてはなりません。しかし、いまだ、UI は異なるメトリクスをもつフォントが使われなくてはならないとき、意図したように見えないかもしれません。このことは、UI が使い物にならないと判断させます。</p> +<p>Mozilla の開発者は、より柔軟性のあるものを求めました。Mozilla はクロスプラットフォームなので、フォントにより注意を払う柔軟性を備えることが必要です。</p> +<p>Mozilla 開発者は、論理的なもので UI のコンテンツがデザインされたところというアプローチを使うことを選びました。現在は UI エディタを使っていません。UI がどうみえるべきかを指示するファイルを書きました。実行時にレイアウトエンジンはどのフォントが利用可能か決定し、UI 詳細に定義されたすべての要求を考慮し、実際の UI を動的に生成します。これは、Web ブラウザが Web ページをどのように表示するかと似ています。</p> +<p>Web は大部分がテキストベースのシステムから多くのプログラムのようなユーザインタフェースをもつとてもグラフィカルで裕福な環境へ移り変わってきました。そのため、Web ブラウザにとって、独自のユーザインタフェースを定義するために Web 言語を使うことはもっとも自然なことです。XUL(extensible user-interface language 拡張ユーザインタフェース言語) と呼ばれる UI 内容の記述のための XML ベースの文法を選びました (XUL についての良いリファレンスとして <a class="external" href="http://www.xulplanet.com/">XULPlanet</a> が利用できます)。</p> +<p>XUL ファイルは、どの要素が UI を構成しているか、どこに要素が現れているかを記述します。XUL 言語は制御に反応してどういう働きがあるかをプログラマが定義することを許す属性を定義します。動的なアプリケーションのふるまいを定義するために、ある場合には特定のユーザインタフェースイベントが発生したときに呼ばれる JavaScript 関数を定義することが出来ます。それらの JavaScript 関数の中では、直接アプリケーションのふるまいを記述するか C++ で定義されたロジックを含む COM オブジェクトの利用可能な他のアプリケーションロジックを呼び出すかすることが出来ます。</p> +<p>UI の論理的表現に加え、人々は UI のかわいらしい見た目を望んだりもします。UI の詳細な特徴を定義するために、例えば特定の UI 要素を表示するのに使われる画像を定義する CSS を使うこともあります。これは、"テーマ"や"スキン"を参照するアプリケーションのための追加の"ルックス"の定義を柔軟にします。Mozilla には、現在 Mozilla 開発者によって活発にメンテナンスされている「クラシック」と「モダン」という２つの「テーマ」が定義されています。Mozilla のための追加のテーマが存在するということは、それだけのバージョンの Mozilla が存在するということです。UI に毎日起こるすべての変化に同期をとりつづけることは、「テーマ」のデザイナにとって大きな仕事です。</p> +<h3 id=".E3.83.93.E3.83.AB.E3.83.89.E3.82.B7.E3.82.B9.E3.83.86.E3.83.A0.E3.81.A8.E3.83.84.E3.83.AA.E3.83.BC" name=".E3.83.93.E3.83.AB.E3.83.89.E3.82.B7.E3.82.B9.E3.83.86.E3.83.A0.E3.81.A8.E3.83.84.E3.83.AA.E3.83.BC">ビルドシステムとツリー</h3> +<p>現在、Mozilla は主に実行時に必要に応じて動的にロードされた多くの共有ライブラリの集まりのように使われています。COM システムによって、ソースコードの複数の場所を変更した場合でも、再コンパイルする必要があるのはアプリケーションの一部だけで良い場合が多い、という開発環境が可能となっています。これは、とても便利な開発環境です。しかし、これは実行の速度低下を意味します。一方、内部コンポーネントの大部分を静的にリンクした Mozilla バイナリを作ることも可能です。アプリケーションのサイズのため、このリンクステップには多くの時間がかかります。ディストリビューション向けのパッケージを準備するときに、この意味が良くわかるでしょう。</p> +<p>それぞれのコンポーネントはその独自のディレクトリを Mozilla のルートディレクトリの中に持ちます。それはまた、呼び出したモジュールの範囲内でサブのコンポーネントを持つということです。Mozilla をどのようにビルドするか教えるツリーの全体にわたるメイクファイル (Make File) があります。</p> +<p>プラットフォーム依存のコードのほとんどは、ツリーの少しの場所にだけ含まれます。OS と Mozilla の他のコードの間にあるレイヤーはこのコードによってインプリメントされたインタフェースです。ビルドが発生するものの中のプラットフォームを準備するプラットフォーム依存のコードだけがビルドされます。</p> +<p>OS からのメッセージはプラットフォーム依存のコードによって集められています。そして、同じ方法でプラットフォームに独立したコードへ送られます。</p> +<p>Mozilla プロジェクトに関する部品はプラットフォーム依存のレンダリング技術を使って書かれた OS 独立の部品です。</p> +<p>ツリーの範囲内で、public と名づけられたディレクトリはたいていインタフェースのヘッダを含み、src と名づけられたディレクトリはたいていインタフェースのインプリメントやインタフェースのヘッダでないものを含みます。</p> +<p>このプログラムのビルドはこのように大きなプロジェクトに慣れない人をひるませるかもしれません。ビルドには、パワフルなワークステーションで 20 分、古い PC なら 2 時間はかかるでしょう。まず、ソースを入手しなくてはなりません。そして、<a href="ja/Build_Documentation">ビルド資料</a> に含まれるルールを使ってそれをビルドします。ビルドしている間、ヘッダファイルのディレクトリを特に指定する必要がないように、すべてのヘッダファイルは dist/include ディレクトリに移動するでしょう。(集合としては chrome と呼ばれる) XUL 、画像、JavaScript ファイルもすべて chrome ディレクトリ (Mozilla のバイナリを含むディレクトリの子ディレクトリ) にコピーされるでしょう。これらは jar.mn と呼ばれるファイルの中で定義される <a class="external" rel="freelink">chrome://</a> という URL にマッピングされます。Mozilla のリリースバージョンでは、chrome ディレクトリは、.jar ファイルだけが含まれるでしょう。</p> +<p>Mozilla をビルドするというのは、プロセスの一部に過ぎません。もし、開発したければ、<a class="external" href="http://www.cvshome.org/">CVS</a> と呼ばれるプログラムを使ったツリーのメンテナンスをしなくてはなりません。ビルドに失敗した時には、あなたのツリーの中のファイルとレポジトリの中のファイルとの結合が失敗した際に生じた競合を解消しなくてはなりません。また、ツリーをハックするとき、修正したツリーの部分をビルドしなくてはなりません。時折、depending と呼ばれるプロセスを使ってツリー全体を再ビルドしなくてはならないでしょう。ソースファイル間の依存を決定しなくてはならないからです。また、時折、ツリーを再ビルドするでしょう。たいていは、これをしている間、ツリーへの自身の行った変更をメンテナンスしていて、他人の変更と同期をとろうとしているでしょう。</p> +<h3 id=".E3.82.A2.E3.83.97.E3.83.AA.E3.82.B1.E3.83.BC.E3.82.B7.E3.83.A7.E3.83.B3.E3.81.AE.E9.96.8B.E5.A7.8B" name=".E3.82.A2.E3.83.97.E3.83.AA.E3.82.B1.E3.83.BC.E3.82.B7.E3.83.A7.E3.83.B3.E3.81.AE.E9.96.8B.E5.A7.8B">アプリケーションの開始</h3> +<p>Mozilla の COM システムは、タイプライブラリと、実行可能なコンポーネントの内部レジストリと、インタフェースに頼っています。アプリケーションを開始している間、レジストリが今も最新のものかのチェックが行われます。もし、変更されたライブラリを検知したとき、レジストリは更新されます。それぞれのコンポーネントはそのレジストレーションフェーズの間に初期化を行うことが許されます。もし、変更されたライブラリを検知したとき、それらはロードされ、初期化ロジックが実行されます。変更ライブラリに加え、それらのアプリケーションコンポーネントだけが必要とされたようにロードされます。</p> +<h3 id=".E5.86.85.E9.83.A8.E9.80.9A.E7.9F.A5.E3.82.B7.E3.82.B9.E3.83.86.E3.83.A0" name=".E5.86.85.E9.83.A8.E9.80.9A.E7.9F.A5.E3.82.B7.E3.82.B9.E3.83.86.E3.83.A0">内部通知システム</h3> +<p>このセクションでは Mozilla 内部で利用可能な機構について記述します。めったにこれは必要になりません。しかし、特定のイベントに対処する必要のある時には、このシステムを知ることが助けとなるでしょう。OOP (オブジェクト指向プログラミング) の考え方は、各々が各々自身の役割を果たすことというものです。しかし、それはしばしば他のコンポーネントがコンポーネント B で起きたあるアクションの引き金を引くとき、コンポーネント A がそれに対応しなくてはなりません。しかし、コードは部分で分離されているほうが好ましいため、B はそれを起こすのに何が必要かの詳細を知るべきではないのです。ここで必要なのは、次のような事です。もし、他のコンポーネントが B のアクションに反応する必要があるのであれば、B はそのアクションに対する引き金が引かれたら通知を送信するように拡張されるべきです。それに加え、B は誰が通知されるのを待っているか覚えているリストを実行時に動的に保持します。実行時に、A が初期化されたとき、A は B に通知リストの対象に加えてほしいと告知します。</p> +<p>これをより一般化するため、中央観察サービス (central observer service) を使うことを決めました。コンポーネント B がアクションの引き金を引いたとき、観察サービスにすぐに通知し、記述的にイベントの名前を明確にします。A のようなコンポーネントは観察サービスに観察したいイベントの名前をもらえるよう申請します。その原則を使用し、観察サービスだけがイベントを見るコンポーネントのリストを扱わなくてはなりません。観察サービスはイベントの通知を受けると、その通知を、そのイベントへのすべてのコンポーネントリストに引き渡します。詳細は nsIObserver を参照のこと。</p> +<h3 id=".E3.83.AD.E3.83.BC.E3.82.AB.E3.83.A9.E3.82.A4.E3.82.BC.E3.83.BC.E3.82.B7.E3.83.A7.E3.83.B3" name=".E3.83.AD.E3.83.BC.E3.82.AB.E3.83.A9.E3.82.A4.E3.82.BC.E3.83.BC.E3.82.B7.E3.83.A7.E3.83.B3">ローカライゼーション</h3> +<p>Mozilla は人間の言語からコードを分離するデザインがされています。ユーザに見せる必要があるためにテキスト文字列が必要なときはいつでも JavaScript や C++ ファイルの中に直接文字列を保存することは許されません。かわりに、C++ や JavaScript のコードで使われるテキストのために記述的識別子を定義します。その識別子をキーとして使い、実際のテキストを取り出すための文字列集合インタフェースのメンバーを呼び出します。テキスト自身はテキストだけ格納された分離されたファイルに格納されます。Mozilla はモジュールの集合であるため、多くのファイルがあり、分離されたモジュールにそれぞれ所属します。その分離にともなって、翻訳者がテキストファイルの言語別バージョンを作るのが簡単なのです。</p> +<p>UI を定義するとき、2 種類の文字列があります。ある文字列は、入力フィールドのテキストやヘルプの中にだけ出てくるテキストのようにアプリケーションがコンパイルされ、パッケージ化されたその時に知られるもので、またある文字列は、実行時に動的に組み立てられます。</p> +<p>実行時にアクセスされる必要のないテキストを定義するときはいつでも、DTD ファイルの中に定義してください。XUL ファイルの中でそのテキストを直接参照することが出来ます。</p> +<p>実行時にテキストを伴った動作が必要なとき、例えばテキストが実行時に入力される必要のあるユーザ名のための代替文字列を含むとき、properties ファイルにテキストを定義してください。</p> +<h3 id=".E3.82.B3.E3.83.BC.E3.83.87.E3.82.A3.E3.83.B3.E3.82.B0.E3.81.A8.E3.83.AC.E3.83.93.E3.83.A5.E3.83.BC.E3.81.AE.E3.83.AB.E3.83.BC.E3.83.AB" name=".E3.82.B3.E3.83.BC.E3.83.87.E3.82.A3.E3.83.B3.E3.82.B0.E3.81.A8.E3.83.AC.E3.83.93.E3.83.A5.E3.83.BC.E3.81.AE.E3.83.AB.E3.83.BC.E3.83.AB">コーディングとレビューのルール</h3> +<p>Mozilla ダウンロード、コードの変更、独自の変更を含むバージョンでの作業などがフリーで行えます。</p> +<p>しかし、Mozilla で使われているオープンソースの背後にある一つの考え方に次のようなものがあります。ソースをフリーで入手できるかわりに、ソースに変更を加えたら、コミュニティに何がしかの還元を考えるべきです。そうすることにより、貢献者となるのです。</p> +<p>しかし、Mozilla コミュニティは公開の中央 Mozilla コードに組み込まれるという変更をただ受け入れることは出来ないと決定しました。自分のコードをその中の一部にしたければ、次のようなルールに従わなければなりません。それは法律のようなものではありません。しかし、基本的に、あなたは、あなたの変更が良いものであると他の人々が認めるよう説得しなければなりません。</p> +<p>この考え方は、Mozilla のコードをより正しい状態にするために作られた多くの効果があります。Mozilla のコードはどのソフトウェアの一部と同様に、完璧からはほど遠く、人々は保守性を低下させるものは何でも取り除こうとし、正しいと思われるコードだけを受け入れます。</p> +<p>これを達成するために、Mozilla コミュニティはすべてのコードは他のすでによく知られた Mozilla ハッカーたちに受け入れられる必要があると決めました。ここに２つの段階のレビューがあります。まず、コード変更希望者は、変更したいコードの部分の所有者から最初のレビュー (r=) を受ける必要があります。要求された修正を行うことが期待されます。そうでなければここで終わりです。もし、最初のレビューが終われば、たいていの場合スーパーレビュー (sr=) と呼ばれるレビューを受ける必要があります。限られたメンバーである " Mozilla 導師 " という、どのコードがよく、どこを変更するべきかについての判断が優れていると認められている人々がいます。一度、両方のレビューを受ければ、ほとんどの場合、コードはチェックインされます。ある特定の事例では、他のレベルのレビューがあり、それは別の場所に記述されます。</p> +<p>多くの人々が Mozilla を変えています。みんなが Mozilla をよりよくしようとする一方、どの変更も思いがけない面への影響というリスクがあります。これは、変更の結果、アプリケーションの機能が動かなくなるといったものから、Mozilla ソースコードがコンパイルできなくなるといった単純な問題にまで及びます。後者は、"ツリーが壊れている、燃え上がっている、赤い"と表現され、ここでツリーとは CVS リポジトリの事です。</p> +<p>ある OS とコンパイラの組み合わせの上でだけ開発をしていて、移植性について (Mozilla.org のドキュメント参照のこと) 注意を払っていないとき、ツリーは簡単に壊れてしまいます。ツリーを壊さないためにベストを尽くす必要があり、レビューを受けることで、願わくば、変更点をチェックインするより早く潜在的な問題を発見したいのです。</p> +<p>ツリーが壊れてしまったとき、Mozilla コミュニティは、ツリーが壊れている間ほかのチェックインを許さないというルールを決定します。これは、この問題を修正する人を助けます。ほかの変更を許すことは、新しいチェックインがあたらしい問題を含んでいるかもしれないために、問題のほんとうの原因を見つけることを難しくします。</p> +<h3 id=".E3.83.9E.E3.82.A4.E3.83.AB.E3.82.B9.E3.83.88.E3.83.BC.E3.83.B3" name=".E3.83.9E.E3.82.A4.E3.83.AB.E3.82.B9.E3.83.88.E3.83.BC.E3.83.B3">マイルストーン</h3> +<p>数週間ごとに、Mozilla.org はソースレポジトリの新しいスナップショットを出します。この考え方は、世界の人々が現在のスナップショットを試してみて、彼らの見つけた問題 (バグ) を報告すべきだというものです。しかし、Mozilla.org はそれらのマイルストーンはテスト目的だけのために出されたということを強調したいのです。</p> +<p>より安定したマイルストーンを準備するために、ソースコードレポジトリを変更するためのルールは、新しいマイルストーンを準備する前にはより厳格なものになります。Mozilla.org は、スケジュールを引き、マイルストーン目標日の前の２日間、Mozilla.org の"ドライバ"と呼ばれる人たちに認可されたチェックインだけが許されます。ドライバは、Mozilla レポジトリに関して、最高の権限をもっている人の集団です。ドライバはまた、マイルストーンが準備できているのか、よりマイルストーンを安定させるためにマイルストーンを出すためより多くの修正を許すために日程を遅らせるかどうかも決定します。</p> +<h3 id="Bugzilla" name="Bugzilla">Bugzilla</h3> +<p><a class="link-https" href="https://bugzilla.mozilla.org/">Bugzilla</a> は Mozilla.org の Web ベースのバグ追跡システムです。問題に遭遇したときはいつでも、ユーザは新しいバグ (時には問題に切符を切ることとして知られてもいます) を、よく詳細に何が起こったかとともに申し立てるよう依頼されます。バグが公表されるなり、番号を発給するなりします。この番号は問題について話されるときに使われます。開発者は"バグ"について署名し、コメントします。そして、修正方法を知っていればどのように問題の修正方法を提案するかを見せるために、パッチを添付するでしょう。レビューも、このシステムの内部で進みます。</p> +<p>バグという単語はしばしばソフトウェアのエラーという意味にみなされます。しかし、Bugzilla の内部では、バグは追跡されるべきものとなります。これはソフトウェアのエラーから、機能拡張のリクエストに及びます。例えば、このドキュメントの発展は {{ Bug(123230) }} で追跡されています。</p> +<p>もし、C++ の開発者でないなら、Bugzilla で貢献できます。これは、簡単なバグ報告ツールとして出発し、ほかのプロジェクト (例えば <a class="external" href="http://www.redhat.com/">Redhat</a> のような) まで多くのユーザに使われる機能的な複雑なシステムにすっかり変わりました。</p> +<h3 id="Webtools_.2F_LXR_.2F_Bonsai" name="Webtools_.2F_LXR_.2F_Bonsai">Webtools / LXR / Bonsai</h3> +<p>Webtools は情報を貯えるツールをベースとしたサーバで、その情報を表示されることやときに操作することまで許します。そのシステムには Mozilla のように Web ブラウザを使ってアクセスできます。</p> +<p>Mozilla 開発者は開発を容易にするためにいくつかのツールを作りました。すでにお話した Bugzilla もそうです。</p> +<p><a class="external" href="http://lxr.mozilla.org/">LXR</a> は Mozilla のソースコードのためのハイパーテキスト検索エンジンです。識別子やテキストを調べることが出来、Mozilla の中のどこでそれが使われているかを見られるでしょう。検索結果項目をクリックすることで、直接現在のソースコードが得られます。コードはページに表示され、識別子にはハイパーリンクがはられ、それはクリックすると、その識別子についての LXR 検索結果を得られます。LXR はソースコードを表示し、それを通してすぐにナビゲートするのに使うことが出来ます。これは、Linux プロジェクトの glimpse のエンジンに内部修正を加えたものをベースにしています。</p> +<p><a class="external" href="http://tinderbox.mozilla.org/">Tinderbox</a> はソースコードレポジトリの現在の状況を表示するツールです。Mozilla.org は、多くの異なった OS のために、繰り返し、絶え間なく中央レポジトリから新しいソースコードを手に入れ (チェックアウトし)、コンパイルを試みるマシンをホストしています。コンパイルが終わったとき、プログラムがまだ正しく動作するかをチェックするためのいくつかの自動テストが実行されます。コンパイルとテストの結果は中央の Tinderbox システムにレポートされます。Tinderbox ページにアクセスすると、ソースコードレポジトリが現在いい状態にあるかどうかこの数時間の間にどんな変化があったのかを見ることが出来ます。Tinderbox は縦軸が時間を示し、横軸が OS ごとの状態を示すグラフを表示します。それぞれのコンパイル・テストフェーズはビルドの要求された時間で定義されたバーで表されます。</p> +<p>バーは色付けられています。緑は Good を示します。黄色はコンパイル中であることを示します。オレンジはコンパイルとビルドが終わったけれども自動テストに失敗したことを示します。赤はソースコードのコンパイルが成功していないことを示します。もしツリーが赤になると、開発を停滞させます。</p> +<p>Tinderbox はとても有用なツールで、ソースコードレポジトリに変更を加える人は誰でも、例えば、自分の変更がなにか問題を起こしていないかのような"ツリーを見る" ことを期待できます。</p> +<p>より援助とするため、追加の情報が Tinderbox ページで利用できます。チェックインしたときに、その人の名前がページに現れます。行われた変更の一覧へのリンクがあります。もし、コンパイルかテストが失敗したとき、ボックスはコンパイル失敗理由を示すコンパイラからのアウトプットへのリンクも含みます。ページのいつかのテキストはパフォーマンス測定の結果も示します。</p> +<p>ほかの Web ツールとして、<a class="external" href="http://bonsai.mozilla.org/">Bonsai</a> があります。Bonsai はソースコードレポジトリのすべての変更を追跡します。誰かの行ったすべての変更の一覧を取り出すことが出来ます。Bonsai は変更一覧の問い合わせのための強力なインタフェースも提供します。</p> +<h3 id=".E6.9B.B4.E3.81.AA.E3.82.8B.E6.83.85.E5.A0.B1.E3.82.92.E6.8E.A2.E3.81.99" name=".E6.9B.B4.E3.81.AA.E3.82.8B.E6.83.85.E5.A0.B1.E3.82.92.E6.8E.A2.E3.81.99">更なる情報を探す</h3> +<p>一般的なプログラミング技術について述べられたものについてもっと知りたければ、Web でフリーのドキュメントを捜し求めることを勧めます。うまくいけば、そのドキュメントでの言及が導いてくれるでしょう。もし、本を読むことをより好むなら、一般的な説明を著者が試みている本であって、いくつかの特定の OS に集中していない本を選ぶことを勧めます。</p> +<p>Mozilla に関するたいていのドキュメントは www.mozilla.org の Web サイトに掲載されています。もし、探しているものがなければ、サーチエンジンを使うことを試してみてください。いくつかのポピュラーなサーチエンジンは、特定の Web サイトに限定して検索することのできる上級 (詳細) 検索オプションを提供しています。</p> +<div class="originaldocinfo"> + <h2 id=".E5.8E.9F.E6.96.87.E6.9B.B8.E3.81.AE.E6.83.85.E5.A0.B1" name=".E5.8E.9F.E6.96.87.E6.9B.B8.E3.81.AE.E6.83.85.E5.A0.B1">原文書の情報</h2> + <ul> + <li>著者: Kai Engert</li> + <li>最終更新日: September 24, 2004</li> + <li>著作権: Portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a Creative Commons license | <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">詳細</a></li> + </ul> +</div> +<div class="noinclude"> + </div> diff --git a/files/ja/conflicting/mozilla/firefox/releases/index.html b/files/ja/conflicting/mozilla/firefox/releases/index.html new file mode 100644 index 0000000000..8067ad603e --- /dev/null +++ b/files/ja/conflicting/mozilla/firefox/releases/index.html @@ -0,0 +1,416 @@ +--- +title: リリースノート +slug: Tools/Release_notes +translation_of: Mozilla/Firefox/Releases +translation_of_original: Tools/Release_notes +--- +<div>{{ToolsSidebar}}</div><h2 id="Firefox_52" name="Firefox_52">Firefox 52</h2> + +<ul> + <li><a href="/ja/docs/Tools/Responsive_Design_Mode">UA の選択やネットワークの調整など、レスポンシブデザインモードを全面的に改良しました。</a></li> + <li><a href="/ja/docs/Tools/Debugger">再設計した UI など、新しい JavaScript デバッガーを搭載しました。</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Work_with_animations">アニメーションインスペクターで、タイミング関数を表示するようになりました。</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">インスペクターに CSS グリッドの強調表示機能を搭載しました。</a></li> + <li><a href="/ja/docs/Tools/about:debugging#Service_worker_state">about:debugging で Service Worker の状態を表示するようになりました。</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#element_rule">インスペクターで、選択した要素を簡単に強調表示できるようになりました。</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Whitespace-only_text_nodes">インスペクターで、ホワイトスペースのみのテキストノードを表示するようになりました。</a></li> +</ul> + +<p><a href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&classification=Client%20Software&chfieldto=2016-11-14&query_format=advanced&chfield=resolution&chfieldfrom=2016-09-19&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%20about%3Adebugging&component=Developer%20Tools%3A%20Animation%20Inspector&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Computed%20Styles%20Inspector&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20CSS%20Rules%20Inspector&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20DOM&component=Developer%20Tools%3A%20Font%20Inspector&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20JSON%20Viewer&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&component=Developer%20Tools%3A%20Responsive%20Design%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Shared%20Components&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox&list_id=13333174">Firefox 51 から Firefox 52 の間に解決した開発ツール関連のバグ一覧</a></p> + +<h2 id="Firefox_51" name="Firefox_51">Firefox 51</h2> + +<ul> + <li><a href="/ja/docs/Tools/Network_Monitor#Timings">ネットワークモニターで、ネットワーク要求の "ブロック" 状態を表示するようになりました。</a></li> +</ul> + +<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?list_id=13263768&resolution=FIXED&classification=Client%20Software&chfieldto=2016-09-19&query_format=advanced&chfield=resolution&chfieldfrom=2016-08-01&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%20about%3Adebugging&component=Developer%20Tools%3A%20Animation%20Inspector&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Computed%20Styles%20Inspector&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20CSS%20Rules%20Inspector&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20DOM&component=Developer%20Tools%3A%20Font%20Inspector&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20JSON%20Viewer&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&component=Developer%20Tools%3A%20Responsive%20Design%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Shared%20Components&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox">Firefox 50 から Firefox 51 の間に解決した開発ツール関連のバグ一覧</a></p> + +<h2 id="Firefox_50" name="Firefox_50">Firefox 50</h2> + +<ul> + <li><a href="/ja/docs/Tools/Web_Console/Console_messages#Source_maps">ウェブコンソールがソースマップを理解するようになりました。</a></li> + <li><a href="/ja/docs/Tools/Storage_Inspector#IndexedDB">ストレージインスペクターで、IndexedDB のオブジェクトストアからアイテムを削除できるようになりました。</a></li> + <li><a href="/ja/docs/Tools/Memory">メモリーツールをデフォルトで有効化しました。</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector/UI_Tour#Computed_view">ボックスモデルビューを計算済みビューに移動しました。</a></li> + <li><a href="/ja/docs/Tools/Web_Console/Console_messages#Viewing_network_request_details">ウェブコンソールで、XHR や Fetch() によるネットワークリクエストのスタックトレースを表示します。</a></li> +</ul> + +<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?list_id=13263766&chfield=resolution&chfieldfrom=2016-06-06&chfieldvalue=FIXED&resolution=FIXED&classification=Client%20Software&chfieldto=2016-08-01&query_format=advanced&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%20about%3Adebugging&component=Developer%20Tools%3A%20Animation%20Inspector&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Computed%20Styles%20Inspector&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20CSS%20Rules%20Inspector&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20DOM&component=Developer%20Tools%3A%20Font%20Inspector&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20JSON%20Viewer&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&component=Developer%20Tools%3A%20Responsive%20Design%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Shared%20Components&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox">Firefox 49 から Firefox 50 の間に解決した開発ツール関連のバグ一覧</a></p> + +<h2 id="Firefox_49" name="Firefox_49">Firefox 49</h2> + +<ul> + <li><a href="/ja/docs/Tools/Web_Console/Console_messages#JS">コンソールに記録した JavaScript エラーで、MDN のヘルプページへのリンクを提供します</a>。</li> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Work_with_animations#Further_information_about_animation_compositing">アニメーションインスペクターで、パフォーマンス情報を提供します</a>。</li> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Element_popup_context_menu">インスペクターのコンテキストメニューを再編しました</a>。</li> + <li><a href="/ja/docs/Tools/Network_Monitor#Cause_column">ネットワークインスペクターで、ネットワーク要求の発生源を表示するようになりました</a>。</li> + <li><a href="/ja/docs/Tools/Storage_Inspector#IndexedDB">ストレージインスペクターで、IndexedDB データベースが削除可能になりました</a>。</li> + <li><a href="/ja/docs/Tools/about:debugging#Tabs">about:debugging に、開いているタブをデバッグするための "タブ" ページを追加しました</a>。</li> +</ul> + +<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?list_id=13263762&chfield=resolution&chfieldfrom=2016-04-25&chfieldvalue=FIXED&resolution=FIXED&classification=Client%20Software&chfieldto=2016-06-06&query_format=advanced&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%20about%3Adebugging&component=Developer%20Tools%3A%20Animation%20Inspector&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Computed%20Styles%20Inspector&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20CSS%20Rules%20Inspector&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20DOM&component=Developer%20Tools%3A%20Font%20Inspector&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20JSON%20Viewer&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&component=Developer%20Tools%3A%20Responsive%20Design%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Shared%20Components&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox">Firefox 48 から Firefox 49 の間に解決した開発ツール関連のバグ一覧</a></p> + +<h2 id="Firefox_48" name="Firefox_48">Firefox 48</h2> + +<p>ハイライト:</p> + +<ul> + <li><a href="/ja/docs/Tools/Storage_Inspector#Editing_storage_items">ストレージインスペクターで保存済みのアイテムを編集する</a></li> + <li><a href="/ja/docs/Tools/Memory/Tree_Map_view">メモリーツールのツリーマップビュー</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Reposition_elements_in_the_page">ページ内で要素をドラッグして再配置する</a></li> + <li><a href="/ja/docs/Tools/Web_Console/Console_messages#Viewing_network_request_details">ウェブコンソールで HTTP リクエストの詳細を表示する</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Work_with_animations#Animation_inspector">Web Animations API 向けにアニメーションインスペクターを更新</a></li> + <li><a href="/ja/docs/Tools/Settings#Choose_DevTools_theme">Firebug のテーマ</a></li> + <li><a href="/ja/docs/Tools/DOM_Property_Viewer">DOM プロパティビューワー</a></li> +</ul> + +<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?list_id=13263745&resolution=FIXED&classification=Client%20Software&chfieldto=2016-04-25&query_format=advanced&chfield=resolution&chfieldfrom=2016-03-07&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%20about%3Adebugging&component=Developer%20Tools%3A%20Animation%20Inspector&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Computed%20Styles%20Inspector&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20CSS%20Rules%20Inspector&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20DOM&component=Developer%20Tools%3A%20Font%20Inspector&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20JSON%20Viewer&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&component=Developer%20Tools%3A%20Responsive%20Design%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Shared%20Components&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox">Firefox 47 から Firefox 48 の間に解決した開発ツール関連のバグ一覧</a></p> + +<h2 id="Firefox_47" name="Firefox_47">Firefox 47</h2> + +<p>ハイライト:</p> + +<ul> + <li><a href="/ja/docs/Tools/about:debugging#Workers">登録済みの Service Worker をデバッグ</a></li> + <li><a href="/ja/docs/Tools/Storage_Inspector#Cache_Storage">ストレージインスペクターでキャッシュストレージを表示</a></li> + <li><a href="/ja/docs/Tools/Memory/Dominators_view#Retaining_Paths_panel">ドミネータービューで保持パスを表示</a></li> + <li><a href="/ja/docs/Tools/Browser_Toolbox#Debugging_popups">ブラウザーやアドオンのデバッグを支援するため、パネルが自動的に閉じないようにする</a></li> + <li><a href="/ja/docs/Tools/3D_View">3D ビュー (Tilt) を削除</a></li> + <li><a href="/ja/docs/Tools/Responsive_Design_Mode#Responsive_Design_Mode_controls">レスポンシブデザインモードでカスタムユーザーエージェント文字列を設定</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector/UI_Tour#Fonts_view">フォントインスペクターをデフォルトで無効化</a></li> + <li><a href="/ja/docs/Tools/Web_Console/The_command_line_interpreter#Entering_expressions">コンソールが未完了の入力を検出して、複数行入力モードに切り替える</a></li> + <li><a href="/ja/docs/Tools/Contributing/Contribute_on_nightly">Firefox のリビルドなしで開発ツールのハックを可能にする Devtools Reload</a></li> +</ul> + +<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?list_id=13263761&chfield=resolution&chfieldfrom=2016-01-25&chfieldvalue=FIXED&resolution=FIXED&classification=Client%20Software&chfieldto=2016-03-07&query_format=advanced&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%20about%3Adebugging&component=Developer%20Tools%3A%20Animation%20Inspector&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Computed%20Styles%20Inspector&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20CSS%20Rules%20Inspector&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20DOM&component=Developer%20Tools%3A%20Font%20Inspector&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20JSON%20Viewer&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&component=Developer%20Tools%3A%20Responsive%20Design%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Shared%20Components&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox">Firefox 46 から Firefox 47 の間に解決した開発ツール関連のバグ一覧</a></p> + +<h2 id="Firefox_46" name="Firefox_46">Firefox 46</h2> + +<p>ハイライト:</p> + +<ul> + <li><a href="/ja/docs/Tools/Memory/Dominators_view">メモリーツールのドミネータービュー</a></li> + <li><a href="/ja/docs/Tools/Performance/Allocations">パフォーマンスツールのメモリー割り当てビュー</a></li> + <li><a href="/ja/docs/Tools/Style_Editor#The_media_sidebar">スタイルエディターで <code>@media</code> 規則の条件をワンクリックで適用</a></li> +</ul> + +<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?list_id=13263754&resolution=FIXED&classification=Client%20Software&chfieldto=2016-01-25&query_format=advanced&chfield=resolution&chfieldfrom=2015-12-14&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%20about%3Adebugging&component=Developer%20Tools%3A%20Animation%20Inspector&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Computed%20Styles%20Inspector&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20CSS%20Rules%20Inspector&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20DOM&component=Developer%20Tools%3A%20Font%20Inspector&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20JSON%20Viewer&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&component=Developer%20Tools%3A%20Responsive%20Design%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Shared%20Components&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox">Firefox 45 から Firefox 46 の間に解決した開発ツール関連のバグ一覧</a></p> + +<h2 id="Firefox_45" name="Firefox_45">Firefox 45</h2> + +<p>ハイライト:</p> + +<ul> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Searching">ページインスペクターの全文検索機能</a></li> + <li><a href="/ja/docs/Tools/Memory#Diffing_heap_snapshots">メモリーツールでヒープのスナップショットの差分を表示</a></li> + <li><a href="/ja/docs/Tools/Network_Monitor#Timeline">ネットワークモニターで DomContentLoaded および load イベントを表示</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Work_with_animations">アニメーションインスペクターを改良</a></li> +</ul> + +<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?bug_status=RESOLVED&bug_status=VERIFIED&chfield=resolution&chfieldfrom=2015-10-29&chfieldto=2015-12-14&chfieldvalue=FIXED&classification=Client%20Software&component=Developer%20Tools&component=Developer%20Tools%3A%203D%20View&component=Developer%20Tools%3A%20about%3Adebugging&component=Developer%20Tools%3A%20Animation%20Inspector&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Computed%20Styles%20Inspector&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20CSS%20Rules%20Inspector&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20Font%20Inspector&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20JSON%20Viewer&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&component=Developer%20Tools%3A%20Responsive%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox&resolution=FIXED&list_id=12753878">Firefox 44 から Firefox 45 の間に解決した開発ツール関連のバグ一覧</a></p> + +<h2 id="Firefox_44" name="Firefox_44">Firefox 44</h2> + +<p>ハイライト:</p> + +<ul> + <li><a href="/ja/docs/Tools/Memory">メモリーツール</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Work_with_animations">アニメーションインスペクターを改良</a></li> + <li><a href="/ja/docs/Tools/Performance/Waterfall#Markers">タイムラインの新たなマーカー: DomContentLoaded、load、worker メッセージ</a></li> +</ul> + +<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&classification=Client%20Software&chfieldto=2015-11-03&query_format=advanced&chfield=resolution&chfieldfrom=2015-09-19&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%203D%20View&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&component=Developer%20Tools%3A%20Responsive%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox&list_id=12582678">Firefox 43 から Firefox 44 の間に解決した開発ツール関連のバグ一覧</a></p> + +<h2 id="Firefox_43" name="Firefox_43">Firefox 43</h2> + +<p>ハイライト:</p> + +<ul> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Work_with_animations#Firefox_43">アニメーションインスペクターの新たな UI</a></li> + <li><a href="/ja/docs/Tools/Web_Console/Console_messages#Server">ウェブコンソールでサーバー側のログを記録</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Overridden_declarations">CSS 宣言をオーバーライドしたルールをすばやく見つける</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Element_popup_menu">インスペクターのコンテキストメニュー項目 "コンソールで使う"</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Strict_search">ルールビューで "厳密に" フィルタリング</a></li> + <li><a href="/ja/docs/Tools/Web_Console/Console_messages#Network">コンソールのネットワーク項目にネットワークモニターへのリンクを追加</a></li> + <li><a href="/ja/docs/Tools/WebIDE">WebIDE の新たなサイドバー UI</a></li> +</ul> + +<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&classification=Client%20Software&chfieldto=2015-09-19&query_format=advanced&chfield=resolution&chfieldfrom=2015-08-10&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%203D%20View&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&component=Developer%20Tools%3A%20Responsive%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox&list_id=12582678">Firefox 42 から Firefox 43 の間に解決した開発ツール関連のバグ一覧</a></p> + +<h2 id="Firefox_42" name="Firefox_42">Firefox 42</h2> + +<p>ハイライト:</p> + +<ul> + <li><a href="/ja/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_over_Wifi">Wi-Fi 経由で Android 版 Firefox のデバッグを行う</a></li> + <li><a href="/ja/docs/Tools/WebIDE/Setting_up_runtimes#Configuring_Simulators">WebIDE で Firefox OS シミュレーターの設定を行う</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Edit_CSS_filters#Saving_filter_presets">CSS filter のプリセット</a></li> +</ul> + +<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&classification=Client%20Software&chfieldto=2015-08-10&query_format=advanced&chfield=resolution&chfieldfrom=2015-06-29&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%203D%20View&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&component=Developer%20Tools%3A%20Responsive%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox&list_id=12478437">Firefox 41 から Firefox 42 の間に解決した開発ツール関連のバグ一覧</a>。</p> + +<h2 id="Firefox_41" name="Firefox_41">Firefox 41</h2> + +<p>ハイライト:</p> + +<ul> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Element_popup_menu">DOM ノードのスクリーンショットを撮影する</a></li> + <li><a href="/ja/docs/Tools/Network_Monitor#CopySave_All_As_HAR">HAR としてコピー/HAR として保存</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Add_rules">ルールビューの "新しいルールを追加" ボタン</a></li> + <li><a href="/ja/docs/Tools/View_source">タブでソースを表示</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Copy_rules">CSS ルールのコピー方法を追加</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/View_background_images">ルールビューで画像を data: URI としてコピー</a></li> +</ul> + +<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&classification=Client%20Software&chfieldto=2015-06-29&query_format=advanced&chfield=resolution&chfieldfrom=2015-05-11&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%203D%20View&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&component=Developer%20Tools%3A%20Responsive%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox&list_id=12283503">Firefox 40 から Firefox 41 の間に解決した開発ツール関連のバグ一覧</a>。特にパフォーマンスツールに関係する、これらのバグ修正の多くは Firefox 40 に反映されました。</p> + +<h2 id="Firefox_40" name="Firefox_40">Firefox 40</h2> + +<p>ハイライト:</p> + +<ul> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Work_with_animations#Firefox_40">アニメーションビューを改良</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Get_help_for_CSS_properties">CSS プロパティの構文のヘルプを MDN から取得</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Edit_CSS_filters">インスペクターでフィルターを編集</a></li> + <li><a href="/ja/docs/Tools/Web_Console#console_API_messages">Worker が発したメッセージをウェブコンソールで表示</a></li> + <li><a href="/ja/docs/Tools/Network_Monitor#Filtering_by_URL">ネットワークモニターで、要求を URL でフィルタリング</a></li> + <li><a href="/ja/docs/Tools/Network_Monitor#Context_menu">ネットワークモニターで、多くの新たなコンテキストメニュー項目を追加</a></li> + <li><a href="/ja/docs/Tools/Network_Monitor#Network_request_fields">ネットワークリソースがブラウザーのキャッシュから取得されたことを示す</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Filtering_rules">ページインスペクターで、ルールをフィルタリング</a></li> +</ul> + +<p>さらに:</p> + +<ul> + <li><a href="/ja/docs/Tools/Debugger/How_to/Debug_eval_sources">無名の eval ソース内で、debugger; 構文でブレーク</a></li> + <li><a href="/ja/docs/Tools/Debugger/UI_Tour#Source_list_pane">デバッガーのソースリストペインで、[URL をコピー] および [新しいタブで開く] コンテキストメニュー項目を追加</a></li> + <li><a href="/ja/docs/Tools/Web_Console#Log_messages">ウェブコンソールで console.dirxml をサポート</a></li> + <li><a href="/ja/docs/Tools/Style_Editor#The_style_sheet_pane">スタイルエディターで、スタイルシートリストのコンテキストメニューに "リンクを新しいタブで開く" を追加</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Searching">インスペクターのセレクター検索で、CSS 接頭辞をつけなくても class や id を検索結果に表示</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model#The_Box_Model_view">ボックスモデルビューのツールチップで、どの CSS ルールによって値が決まったかを表示</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Inspect_and_select_colors">インスペクターで、Shift + クリックで色単位を切り替え</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Element_popup_menu">インスペクターで、"この要素の位置にスクロール" メニュー項目を実装</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Element_popup_menu">インスペクターで、url/id/resource 属性をリンクとして扱う</a></li> + <li><a href="/ja/docs/Tools/Network_Monitor#Network_request_fields">ネットワークモニターで、IP アドレスをツールチップで表示</a></li> +</ul> + +<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&classification=Client%20Software&chfieldto=2015-05-11&query_format=advanced&chfield=resolution&chfieldfrom=2015-03-31&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%203D%20View&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&component=Developer%20Tools%3A%20Responsive%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox&list_id=12283503">Firefox 39 から Firefox 40 の間に解決した開発ツール関連のバグ一覧</a></p> + +<h2 id="Firefox_39" name="Firefox_39">Firefox 39</h2> + +<p>ハイライト:</p> + +<ul> + <li><a href="/ja/docs/Tools/WebIDE/Setting_up_runtimes#Connecting_over_WiFi">WebIDE で、Wi-Fi 経由で Firefox OS デバイスのデバッグが可能になりました</a></li> + <li><a href="/ja/docs/Tools/WebIDE/Working_with_Cordova_apps_in_WebIDE">WebIDE で Cordova のプロジェクトをサポートしました</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Work_with_animations#Firefox_39">アニメーションビューで早戻し、早送り、特定の時間へのジャンプが可能になりました</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Work_with_animations#Firefox_39">3 次ベジェ曲線エディターにプリセットを 31 個搭載しました</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Drag_and_drop">インスペクターで要素のドラッグ・アンド・ドロップが可能になりました</a></li> + <li><a href="/ja/docs/Tools/Web_Console#Command_history">ウェブコンソールのコマンド履歴が、セッションをまたいで維持されるようになりました</a></li> + <li><a href="/ja/docs/Tools/Web_Console#Helper_commands">コンソールで最後に評価された式の結果を表示する $_ コマンド</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model#Firefox_39">インライン要素のボックスモデルのハイライト機能を改善</a></li> +</ul> + +<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&classification=Client%20Software&query_based_on=devtools_resolved_week&chfieldto=2015-03-31&chfield=resolution&query_format=advanced&chfieldfrom=2015-02-22&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&bug_status=CLOSED&component=Developer%20Tools&component=Developer%20Tools%3A%203D%20View&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&component=Developer%20Tools%3A%20Responsive%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox&known_name=devtools_resolved_week&list_id=12157026">Firefox 38 から Firefox 39 の間に解決した開発ツール関連のバグ一覧</a></p> + +<h2 id="Firefox_38" name="Firefox_38">Firefox 38</h2> + +<p>ハイライト:</p> + +<ul> + <li><a href="/ja/docs/Tools/Web_Audio_Editor#Bypassing_nodes">Web Audio Editor でオーディオノードをバイパス</a></li> + <li><a href="/ja/docs/Tools/Web_Console#Helper_commands">ウェブコンソールの "コピー" コマンド</a></li> + <li><a href="/ja/docs/Tools/Web_Console#XHR">ウェブコンソールで XmlHttpRequest をハイライトおよびフィルター</a></li> + <li><a href="/ja/docs/Tools/Debugger/How_to/Examine,_modify,_and_watch_variables">デバッガーで、最適化により削除された変数を確認</a></li> + <li><a href="/ja/docs/Tools/Network_Monitor#Security">ネットワークモニターでセキュリティの警告を確認</a></li> + <li><a href="/ja/docs/Tools/Network_Monitor#Network_request_fields">ネットワークモニターで伝送サイズを確認</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Work_with_animations#Animations_view">ページのアニメーションを再生/停止</a></li> +</ul> + +<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&classification=Client%20Software&chfieldto=2015-02-23&query_format=advanced&chfield=resolution&chfieldfrom=2015-01-12&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%203D%20View&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Profiler&component=Developer%20Tools%3A%20Responsive%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20Timeline&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox&list_id=12076303">Firefox 37 から Firefox 38 の間に解決した開発ツール関連のバグ一覧</a></p> + +<h2 id="Firefox_37" name="Firefox_37">Firefox 37</h2> + +<p>ハイライト:</p> + +<ul> + <li><a href="/ja/docs/Tools/Network_Monitor#Security">ネットワークモニターのセキュリティパネル</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Work_with_animations">インスペクターのアニメーションパネル</a></li> + <li><a href="/ja/docs/Tools/WebIDE#Running_a_custom_build_step">WebIDE でカスタムビルドステップの実行をサポート</a></li> +</ul> + +<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&classification=Client%20Software&chfieldto=2015-01-12&chfield=resolution&query_format=advanced&chfieldfrom=2014-11-28&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%203D%20View&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Profiler&component=Developer%20Tools%3A%20Responsive%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20Timeline&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox&list_id=11892733">Firefox 36 から Firefox 37 の間に解決した開発ツール関連のバグ一覧</a></p> + +<h2 id="Firefox_36" name="Firefox_36">Firefox 36</h2> + +<p>ハイライト:</p> + +<ul> + <li><a href="/ja/docs/Tools/Debugger/How_to/Debug_eval_sources">eval で評価されるソースをデバッガーで表示</a></li> + <li><a href="/ja/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE">Android 版 Firefox への接続手順を簡素化</a></li> + <li>リモートでボックスモデルのハイライト表示が動作</li> + <li><a href="/ja/docs/Tools/Performance#Inverting_the_call_tree">プロファイラーの "呼び出しツリーを反転" オプション</a></li> + <li><a href="/ja/docs/Tools/Web_Console#Type-specific_rich_output">コンソールで DOM Promise を調査</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Element_popup_menu">インスペクターで "貼り付け" 方法を追加</a></li> +</ul> + +<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&classification=Client%20Software&chfieldto=2014-11-28&chfield=resolution&query_format=advanced&chfieldfrom=2014-10-13&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%203D%20View&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Profiler&component=Developer%20Tools%3A%20Responsive%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20Timeline&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox&list_id=11736454">Firefox 35 から Firefox 36 の間に解決した開発ツール関連のバグ一覧</a></p> + +<h2 id="Firefox_35" name="Firefox_35">Firefox 35</h2> + +<p>ハイライト:</p> + +<ul> + <li><a href="/ja/docs/Tools/Page_Inspector#.3A.3Abefore_and_.3A.3Aafter">インスペクターで ::before および ::after 疑似要素を確認できるようになりました</a>。</li> + <li><a href="/ja/docs/Tools/Style_Editor#Source_map_support">CSS ソースマップがデフォルトで有効になりました</a>。</li> + <li><a href="/ja/docs/Tools/Page_Inspector#Element_popup_menu_2">インスペクターから "DOM プロパティの表示" が可能になりました</a>。</li> +</ul> + +<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&chfieldto=2014-10-13&chfield=resolution&query_format=advanced&chfieldfrom=2014-09-02&chfieldvalue=FIXED&component=Developer%20Tools&component=Developer%20Tools%3A%203D%20View&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Profiler&component=Developer%20Tools%3A%20Responsive%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20Timeline&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&component=Simulator&product=Firefox&product=Firefox%20OS&list_id=11184176">Firefox 34 から Firefox 35 の間に解決した開発ツール関連のバグ一覧</a></p> + +<h2 id="Firefox_34" name="Firefox_34">Firefox 34</h2> + +<p>ハイライト:</p> + +<ul> + <li><a href="/ja/docs/Tools/Storage_Inspector">Storage Inspector: ウェブページが保存したデータを確認できる新ツール</a></li> + <li><a href="/ja/docs/Tools/Performance">Performance tool: プロファイラーの UI の改良とフレームレートのタイムライン</a></li> + <li><a href="/ja/docs/tools/Working_with_iframes">Frame switching: 開発ツールがページ内の特定の iframe を指すようにする</a></li> + <li><a href="/ja/docs/Web/API/Console.table">console.table をサポート</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector#Examining_event_listeners">インスペクターで jQuery のイベントの確認が可能</a></li> +</ul> + +<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&chfieldto=2014-09-02&chfield=resolution&query_format=advanced&chfieldfrom=2014-07-21&chfieldvalue=FIXED&component=Developer%20Tools&component=Developer%20Tools%3A%203D%20View&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Profiler&component=Developer%20Tools%3A%20Responsive%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20Timeline&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&component=Simulator&product=Firefox&product=Firefox%20OS&list_id=11184176">Firefox 33 から Firefox 34 の間に解決した開発ツール関連のバグ一覧</a></p> + +<h2 id="Firefox_33" name="Firefox_33">Firefox 33</h2> + +<p>ハイライト:</p> + +<ul> + <li><a href="/ja/docs/Tools/WebIDE">WebIDE</a>: ウェブアプリの開発やデバッグのための新たな環境</li> + <li>アニメーションの <a href="/ja/docs/Tools/Page_Inspector#Editing_.40keyframes">@keyframes</a> と <a href="/ja/docs/Tools/Page_Inspector#Editing_cubic_B.C3.A9zier_curves">タイミング関数</a> の編集が可能</li> + <li>インスペクターで <a href="/ja/docs/Tools/Page_Inspector#Examining_event_listeners">イベントリスナーの確認が可能</a></li> + <li>スタイルエディターの <a href="/ja/docs/Tools/Style_Editor#The_media_sidebar">サイドバーで @media 規則を表示</a></li> + <li>インスペクターで <a href="/ja/docs/Tools/Page_Inspector#Adding_rules">CSS 規則の新規作成</a> と <a href="/ja/docs/Tools/Page_Inspector#Editing_rules">セレクターの編集</a> が可能</li> + <li><a href="/ja/docs/Tools/GCLI#Commands">開発ツールバーの新コマンド</a>: folder, highlight, inject</li> +</ul> + +<p>さらに:</p> + +<ul> + <li><a href="/ja/docs/Tools/Tools_Toolbox#Advanced_settings">キャッシュを無効化する設定</a> が、開発ツールを開き直した後も継続</li> + <li><a href="/ja/docs/Tools/Page_Inspector#transform_visualisation">transform の視覚化をツールチップではなく、ページ内で表示</a></li> + <li><a href="/ja/docs/Tools/Tools_Toolbox#Editor_Preferences">ソースエディターの設定</a> を開発ツールのオプションに移動</li> + <li>レスポンシブデザインビューで <a href="/ja/docs/Tools/Responsive_Design_View#select-size">ビューポートのサイズを直接編集可能</a></li> + <li>デバッガーで、<a href="/ja/docs/Tools/Debugger#Debugger_settings">拡張子が "min.js" であるソースファイルを自動的にブラックボックス化</a></li> +</ul> + +<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&classification=Client%20Software&chfieldto=2014-07-21&chfield=resolution&query_format=advanced&chfieldfrom=2014-06-09&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%203D%20View&component=Developer%20Tools%3A%20App%20Manager&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Profiler&component=Developer%20Tools%3A%20Responsive%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&product=Firefox">Firefox 32 から Firefox 33 の間に解決した開発ツール関連のバグ一覧</a></p> + +<h2 id="Firefox_32" name="Firefox_32">Firefox 32</h2> + +<p>ハイライト:</p> + +<ul> + <li><a href="/ja/docs/Tools/Web_Audio_Editor">Web Audio エディター</a></li> + <li><a href="/ja/docs/Tools/Scratchpad#Code_completion_and_inline_documentation">スクラッチパッドのコード補完とインラインドキュメント</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector#Rules_view">インスペクターのルールビューでユーザーエージェントのスタイルを表示</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector#Firefox_32_onwards_2">要素選択ボタンを移動</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector#Firefox_32_onwards">インスペクターの情報バーにノードの寸法を追加</a></li> + <li><a href="/ja/docs/Tools/Tools_Toolbox#Extra_tools">ページ全体のスクリーンショットボタンを追加</a></li> +</ul> + +<p>さらに:</p> + +<ul> + <li>ツールに HiDPI 画像を追加</li> + <li>インスペクターで、<code>display:none</code> が設定されているノードを異なる書式で表示</li> +</ul> + +<p><a href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&classification=Client%20Software&chfieldto=2014-06-09&chfield=resolution&query_format=advanced&chfieldfrom=2014-04-28&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%203D%20View&component=Developer%20Tools%3A%20App%20Manager&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Profiler&component=Developer%20Tools%3A%20Responsive%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&product=Firefox">Firefox 31 から Firefox 32 の間に解決した開発ツール関連のバグ一覧</a></p> + +<h2 id="Firefox_31" name="Firefox_31">Firefox 31</h2> + +<p>ハイライト:</p> + +<ul> + <li><a href="/ja/docs/Tools/Eyedropper">ウェブページから色を選択するスポイトツール</a></li> + <li><a href="/ja/docs/Tools/Web_Console#Error_messages">コンソールのエラーメッセージでフルスタックトレースを表示</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector#Box_model_view">ボックスモデルビューで編集が可能</a></li> + <li><a href="/ja/docs/Tools/Web_Console#Styling_messages">コンソールのメッセージにスタイルを設定する %c 書式</a></li> + <li><a href="/ja/docs/Tools/Network_Monitor#Copy_as_cURL">ネットワークモニターの "cURL としてコピー" コマンド</a></li> + <li><a href="/ja/docs/tools/Keyboard_shortcuts#Source_editor">ソースエディターで Sublime Text のキーバインドをサポート</a></li> +</ul> + +<p>さらに:</p> + +<ul> + <li><a href="/ja/docs/Tools/Network_Monitor#Network_request_list">ネットワークモニターのログを残し続けるオプション</a></li> + <li><a href="/ja/docs/Tools/Web_Console#JavaScript_errors_and_warnings">ウェブコンソールで、JavaScript の警告をデフォルトで表示するように変更</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector#HTML_pane_2">Alt + クリックでノードの子孫をすべて表示</a></li> +</ul> + +<p><a href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&classification=Client%20Software&chfieldto=2014-04-28&chfield=resolution&query_format=advanced&chfieldfrom=2014-03-17&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%203D%20View&component=Developer%20Tools%3A%20App%20Manager&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Profiler&component=Developer%20Tools%3A%20Responsive%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&product=Firefox&list_id=10022921">Firefox 30 から Firefox 31 の間に解決した開発ツール関連のバグ一覧</a></p> + +<h2 id="Firefox_30" name="Firefox_30">Firefox 30</h2> + +<p>ハイライト:</p> + +<ul> + <li><a href="https://www.youtube.com/watch?v=y2LcsxE2pR0">インスペクターのアニメーションパネル</a></li> + <li><a href="/ja/docs/Tools/Web_Console#Working_with_iframes">フレーム内で実行する JS をウェブコンソールでサポート</a></li> + <li>ウェブコンソールの表示を改良: コードのハイライト表示、<a href="/ja/docs/Tools/Web_Console#Highlighting_and_inspecting_nodes">ノードのハイライト表示と調査</a></li> + <li>ネットワークモニターのテーマを改良、<a href="/ja/docs/Tools/Network_Monitor#Network_request_fields">画像のサムネイルとプレビュー</a>、<a href="/ja/docs/Tools/Network_Monitor#Preview">HTML のプレビュー</a></li> + <li><a href="/ja/docs/Tools/Browser_Console#Browser_Console_command_line">ブラウザーコンソールの入力領域は、設定から有効化しなければなりません</a></li> + <li><a href="/ja/docs/Tools_Toolbox#Available_Toolbox_Buttons">スクラッチパッドなどのツールのアイコンをデフォルトで非表示に変更</a></li> +</ul> + +<p>さらに:</p> + +<ul> + <li><a href="/ja/docs/Web/API/console.count">console.count()</a> をサポート</li> + <li><a href="/ja/docs/Tools/Web_Console#Keyboard_shortcuts">ウェブコンソールのコマンドラインにフォーカスするための新たなショートカットキー</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector#font-family_tooltip">インスペクターの、フォントファミリーのツールチップ</a></li> + <li><a href="/en-US/Firefox_OS/Debugging/Developer_settings#Developer_HUD">Firefox OS HUD</a> 機能: メモリのトラッキングと jank モニター</li> +</ul> + +<p><a href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&classification=Client%20Software&chfieldto=2014-03-17&chfield=resolution&query_format=advanced&chfieldfrom=2014-02-03&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%203D%20View&component=Developer%20Tools%3A%20App%20Manager&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Profiler&component=Developer%20Tools%3A%20Responsive%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&product=Firefox&list_id=9755315">Firefox 29 から Firefox 30 の間に解決した開発ツール関連のバグ一覧</a></p> + +<h2 id="Firefox_29" name="Firefox_29">Firefox 29</h2> + +<p><a href="https://hacks.mozilla.org/2014/02/css-source-map-support-network-performance-analysis-more-firefox-developer-tools-episode-29/" title="http://www.mozilla.org/en-US/firefox/aurora/">Firefox 29 Hacks ブログの記事</a>。ハイライト:</p> + +<ul> + <li>Light テーマのメジャーアップデートを含む、<a href="/ja/docs/Tools_Toolbox#Choose_DevTools_theme">テーマの改善</a></li> + <li><a href="/ja/docs/Tools/Network_Monitor#Performance_analysis">ネットワークモニターのパフォーマンス分析ツール</a></li> + <li><a href="/ja/docs/Tools/Style_Editor#Source_map_support">CSS ソースマップ</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector#Selecting_elements">インスペクターでノード選択時の動作を変更</a></li> + <li>デバッガーで <a href="/ja/docs/Tools/Debugger#Call_stack_pane">伝統的なコールスタック</a> および <a href="/ja/docs/Tools/Debugger#Highlight_and_inspect_DOM_nodes">ノードの強調および調査</a> 機能を追加</li> + <li><a href="/ja/docs/Tools/Using_the_Source_Editor#See_also">ソースエディターで Emacs および Vim のキーバインドをサポート</a></li> +</ul> + +<h2 id="Firefox_28" name="Firefox_28">Firefox 28</h2> + +<p><a href="https://hacks.mozilla.org/2013/12/split-console-pretty-print-minified-js-and-more-firefox-developer-tools-episode-28/" title="Aurora Hacks post">Firefox 28 Hacks ブログ記事</a>。ハイライト:</p> + +<ul> + <li>アプリマネージャーに <a href="/ja/Firefox_OS/Using_the_App_Manager#マニフェストエディタ">マニフェストエディター</a> を統合</li> + <li>ウェブコンソールと他の開発ツールを並べて使用可能にする、<a href="/ja/docs/Tools/Web_Console#The_split_console">コンソールの常時表示</a> 機能</li> + <li>デバッガの、<a href="/ja/docs/Tools/Debugger#Pretty-print_a_minified_file">ミニファイされた JavaScript を整形する機能</a></li> + <li>インスペクターの、<a href="/ja/docs/Tools/Page_Inspector#Rules_view">カラーピッカーのツールチップ</a></li> + <li>プラットフォームやアドオンのコードをデバッグするための <a href="/ja/docs/Tools/Browser_Toolbox">ブラウザーツールボックス</a></li> +</ul> + +<h2 id="Firefox_27" name="Firefox_27">Firefox 27</h2> + +<p><a href="https://hacks.mozilla.org/2013/11/firefox-developer-tools-episode-27-edit-as-html-codemirror-more/">Firefox 27 Hacks ブログ記事</a>。ハイライト:</p> + +<ul> + <li>WebGL シェーダーの表示や編集が可能な <a href="/ja/docs/Tools/Shader_Editor">シェーダーエディター</a></li> + <li>デバッガーで、リッスンしている <a href="/ja/docs/Tools/Debugger#Break_on_a_DOM_event">DOM イベントでブレーク</a> させるようにする</li> + <li><a href="/ja/docs/Tools/Page_Inspector#Editing_HTML">インスペクター内で HTML を編集</a></li> + <li>インスペクターの <a href="/ja/docs/Tools/Page_Inspector#Rules_view">ルールビュー</a> で、色見本と背景画像を確認</li> + <li>ウェブコンソールが <a href="/ja/docs/Tools/Web_Console#Reflow_events">リフローイベント</a> を記録</li> + <li>多くのツールで、ソースエディターとして CodeMirror を使用</li> +</ul> diff --git a/files/ja/conflicting/tools/debugger/how_to/search/index.html b/files/ja/conflicting/tools/debugger/how_to/search/index.html new file mode 100644 index 0000000000..4f3391c8b1 --- /dev/null +++ b/files/ja/conflicting/tools/debugger/how_to/search/index.html @@ -0,0 +1,69 @@ +--- +title: 検索とフィルタ +slug: Tools/Debugger/How_to/Search_and_filter +translation_of: Tools/Debugger/How_to/Search +translation_of_original: Tools/Debugger/How_to/Search_and_filter +--- +<div>{{ToolsSidebar}}</div><p><a href="/ja/docs/Tools/Debugger/UI_Tour#toolbar">ツールバー</a>のスクリプトフィルタを使用して、デバッガ内にある項目を検索できます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13214/debugger-filter.png" style="display: block; height: 351px; margin-left: auto; margin-right: auto; width: 904px;"></p> + +<p>接頭辞をつけずに文字列を入力すると、<a href="/ja/docs/Tools/Debugger/UI_Tour#Source_list_pane">ソースリストペイン</a>に一覧表示されているソースから検索します。</p> + +<p>いずれかの特殊文字による検索演算子を接頭辞として付加することで、さまざまな検索機能を提供します。</p> + +<table class="fullwidth-table standard-table"> + <thead> + <tr> + <th scope="col">接頭辞</th> + <th scope="col">機能</th> + </tr> + </thead> + <tbody> + <tr> + <td>なし</td> + <td><a href="/ja/docs/Tools/Debugger/UI_Tour#Source_list_pane" title="#source-list-pane">ソースリストペイン</a>に表示しているスクリプトの絞り込みを行います。</td> + </tr> + <tr> + <td>!</td> + <td>すべてのファイルから文字列を検索します。</td> + </tr> + <tr> + <td>@</td> + <td>すべてのファイルから、指定した文字列を含む関数定義を検索します。</td> + </tr> + <tr> + <td>#</td> + <td> + <p>現在<a href="/ja/docs/Tools/Debugger/UI_Tour#Source_pane" title="#source-pane">ソースペイン</a>で開いているファイルから文字列を検索します。</p> + + <p>検索した後に Enter キーを押下すると、マッチした箇所を巡ります。</p> + </td> + </tr> + <tr> + <td>:</td> + <td>現在<a href="/ja/docs/Tools/Debugger/UI_Tour#Source_pane" title="#source-pane">ソースペイン</a>で開いているファイルで、指定した行へ移動します。</td> + </tr> + <tr> + <td>*</td> + <td><a href="/ja/docs/Tools/Debugger/UI_Tour#Variables_pane" title="#variables-pane">変数ペイン</a>に表示している変数の絞り込みを行います。</td> + </tr> + </tbody> +</table> + +<p>これらのオプションは、フィルタ内をクリックしたときにポップアップ表示します。また、<a href="/ja/docs/Tools/Debugger/UI_Tour#Source_pane" title="#source-pane">ソースペイン</a>のコンテキストメニューでもアクセスできます。</p> + +<p>接頭辞を組み合わせて、より強力な問い合わせが可能です。例えば:</p> + +<table class="fullwidth-table standard-table"> + <tbody> + <tr> + <td>file.js:12</td> + <td>"file.js" を開いて 12 行目へ移動します。</td> + </tr> + <tr> + <td>mod#onLoad</td> + <td>ファイル名に "mod" を含むすべてのファイルから、文字列 "onLoad" を検索します。</td> + </tr> + </tbody> +</table> diff --git a/files/ja/conflicting/tools/debugger/how_to/set_watch_expressions/index.html b/files/ja/conflicting/tools/debugger/how_to/set_watch_expressions/index.html new file mode 100644 index 0000000000..74c0db4345 --- /dev/null +++ b/files/ja/conflicting/tools/debugger/how_to/set_watch_expressions/index.html @@ -0,0 +1,47 @@ +--- +title: 変数を調査、編集、ウォッチする +slug: 'Tools/Debugger/How_to/Examine,_modify,_and_watch_variables' +translation_of: Tools/Debugger/How_to/Set_Watch_Expressions +translation_of_original: 'Tools/Debugger/How_to/Examine,_modify,_and_watch_variables' +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>この機能は、まだ新しいデバッガーでサポートしていません。現時点で必要である場合は、about:config で設定項目 "devtools.debugger.new-debugger-frontend" を <code>false</code> に設定して、古いデバッガーに戻すことができます。</p> + +<p>古いデバッガーのドキュメントは、<a href="/ja/docs/Tools/Debugger_%28before_Firefox_52%29">デバッガー (Firefox 52 より前)</a> をご覧ください。</p> +</div> + +<h2 id="Examine_variables" name="Examine_variables">変数を調査する</h2> + +<p>コードがブレークポイントで停止したときはデバッガーの <a href="/ja/docs/Tools/Debugger/UI_Tour#Variables_pane" title="#variables-pane">変数ペイン </a>で、変数の状態を調査できます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13216/debugger-variables-pane.png" style="display: block; height: 335px; margin-left: auto; margin-right: auto; width: 903px;"></p> + +<p>変数はスコープによってグループ化されます: Function スコープには <code>user</code> や <code>greeting</code> といった関数で定義したローカル変数はもちろん、ビルトインの <code>arguments</code> および <code>this</code> 変数も表示します。同様にグローバルスコープでは <code>localStorage</code> や <code>console</code> といったビルトインのグローバル変数だけでなく、<code>greetme</code> といった独自に定義したグローバル変数も表示します。</p> + +<p>それぞれのオブジェクトは三角印をクリックすると、プロパティを表示するように拡張できます。</p> + +<p>変数名にマウスポインターを重ねると、その変数に関する付加情報を提供するツールチップを表示します。これらのプロパティの意味について、詳しくは <a href="/ja/docs/JavaScript/Reference/Global_Objects/Object/defineProperty" title="JavaScript/Reference/Global_Objects/Object/defineProperty"><code>Object.defineProperty()</code></a> をご覧ください。</p> + +<p><a href="/ja/docs/Tools/Debugger/How_to/Search_and_filter" title="#script-filter">スクリプトフィルター</a> で "*" 修飾子を使用するか、(<a href="/ja/docs/Tools/Debugger/Settings" title="#debugger-settings">デバッガーの設定</a> で有効にしている場合は) 変数フィルターボックスに入力することで、表示する変数をフィルターできます。</p> + +<p>{{EmbedYouTube("dxCvnixpM_Q")}}</p> + +<p>ソース内に存在する変数が JavaScript エンジンの最適化により削除されている場合は、変数ビューに変数を表示しますが値は <code>(optimized away)</code> となっており、編集ができません。以下のスクリーンショットでは、変数 <code>upvar</code> が最適化で削除されています:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10169/optimized-out.png" style="display: block; height: 235px; margin-left: auto; margin-right: auto; width: 332px;"></p> + +<h2 id="Modify_variables" name="Modify_variables">変数を変更する</h2> + +<p>コードがブレークポイントで停止したときに、デバッガーの <a href="/ja/docs/Tools/Debugger/UI_Tour#Variables_pane" title="#variables-pane">変数ペイン</a> で変数を変更できます。変数の現在の値をクリックすると、そこに入力できるようになります:</p> + +<p>{{EmbedYouTube("FKG-jkvSpq8")}}</p> + +<h2 id="Watch_an_expression" name="Watch_an_expression">式をウォッチする</h2> + +<p>ウォッチ式は、実行が停止するたびに評価される式です。よって、これらの式の結果を調査できます。これらは、コード内で必ずしも調査を行える状態であるとは限らない不変量の調査ができる点が役に立ちます。"ウォッチ式を追加" と表示されているボックスをクリックして、コードをステップ実行したときに出力内容を監視したい JavaScript 式を入力することで、ウォッチ式を追加します。</p> + +<p>そして、コードの実行を開始します。コードのステップ実行を始めるまでウォッチ式は何も行いませんので、ブレークポイントに達するまでは何も起きません。ブレークポイントに達すると、アクティブな式とその値を表示するボックスが現れます:</p> + +<p>{{EmbedYouTube("CwGU-5wKRw0")}}</p> + +<p>コードをステップ実行して、値の変化に応じた式の結果をウォッチできます。値が変わるたびに、ボックスが一時的に黄色に光ります。式の隣にある "x" 印のアイコンをクリックすると、ウォッチ式を削除できます。またもちろん、ウォッチ式は同時に複数設定できます。</p> diff --git a/files/ja/conflicting/tools/keyboard_shortcuts/index.html b/files/ja/conflicting/tools/keyboard_shortcuts/index.html new file mode 100644 index 0000000000..f546812c77 --- /dev/null +++ b/files/ja/conflicting/tools/keyboard_shortcuts/index.html @@ -0,0 +1,100 @@ +--- +title: ソースエディタの使用 +slug: Tools/Using_the_Source_Editor +translation_of: tools/Keyboard_shortcuts#Source_editor +translation_of_original: Tools/Using_the_Source_Editor +--- +<div>{{ToolsSidebar}}</div><p>ソースエディタは <a href="/ja/JavaScript_code_modules/source-editor.jsm" title="source-editor.jsm"><code>source-editor.jsm</code></a> によって提供されるエディタコンポーネントで、<a href="/ja/Tools/Scratchpad" title="Scratchpad">スクラッチパッド</a> や <a href="/ja/Tools/Style_Editor" title="Style Editor">スタイルエディタ</a> などの開発ツールで共用しています。また、<a href="/ja/JavaScript_code_modules/Using_the_Source_Editor_API" title="Using the Source Editor API">Firefox の拡張機能から使用する</a>こともできます。この記事では、テキストを編集するときのエディタ自身の使い方を説明します。</p> + +<h2 id="キーボードコマンド">キーボードコマンド</h2> + +<p>以下は、各コマンドの標準的なキーボードショートカットです。これは一部のアドオンで異なる場合があることに注意してください。ただし、Firefox では常にこれらを使用します。</p> + +<div class="note"><strong>注意:</strong> Mac OS X では、control キーの代わりに Command キーを使用します。</div> + +<p> </p> + +<table class="standard-table" style="width: auto;"> + <thead> + <tr> + <th class="header">機能</th> + <th class="header">キーボード</th> + </tr> + </thead> + <tbody> + <tr> + <td>すべて選択</td> + <td>Ctrl-A</td> + </tr> + <tr> + <td>コピー</td> + <td>Ctrl-C</td> + </tr> + <tr> + <td>検索</td> + <td>Ctrl-F</td> + </tr> + <tr> + <td>再検索</td> + <td>Ctrl-G</td> + </tr> + <tr> + <td>指定行へ移動</td> + <td>Ctrl-L</td> + </tr> + <tr> + <td>やり直し</td> + <td>Ctrl-Shift-Z</td> + </tr> + <tr> + <td>貼り付け</td> + <td>Ctrl-V</td> + </tr> + <tr> + <td>切り取り</td> + <td>Ctrl-X</td> + </tr> + <tr> + <td>元に戻す</td> + <td>Ctrl-Z</td> + </tr> + <tr> + <td>行のインデント</td> + <td>Tab</td> + </tr> + <tr> + <td>行のインデント解除</td> + <td>Shift-Tab</td> + </tr> + <tr> + <td>前の行へ移動</td> + <td>Alt-↑ (Mac OS X では Ctrl-Option-↑)</td> + </tr> + <tr> + <td>後の行へ移動</td> + <td>Alt-↓ (Mac OS X では Ctrl-Option-↓)</td> + </tr> + <tr> + <td>選択範囲のコメント化とコメント解除</td> + <td>Ctrl-/ {{ fx_minversion_inline("14.0") }}</td> + </tr> + <tr> + <td>開き括弧へ移動</td> + <td>Ctrl-[ {{ fx_minversion_inline("14.0") }}</td> + </tr> + <tr> + <td>閉じ括弧へ移動</td> + <td>Ctlr-] {{ fx_minversion_inline("14.0") }}</td> + </tr> + </tbody> +</table> + +<p> </p> + +<h2 id="参考情報">参考情報</h2> + +<ul> + <li><a href="/ja/Tools" title="Tools">Tools</a></li> + <li><a href="/ja/Tools/Scratchpad" title="Scratchpad">Scratchpad</a></li> + <li><a href="/ja/Tools/Style_Editor" title="Style Editor">Style Editor</a></li> +</ul> diff --git a/files/ja/conflicting/tools/memory/basic_operations/index.html b/files/ja/conflicting/tools/memory/basic_operations/index.html new file mode 100644 index 0000000000..74fa47f372 --- /dev/null +++ b/files/ja/conflicting/tools/memory/basic_operations/index.html @@ -0,0 +1,15 @@ +--- +title: ヒープのスナップショットを比較する +slug: Tools/Memory/Comparing_heap_snapshots +translation_of: Tools/Memory/Basic_operations +translation_of_original: Tools/Memory/Comparing_heap_snapshots +--- +<div>{{ToolsSidebar}}</div><div class="geckoVersionNote"> +<p>これは Firefox 45 の新機能です。</p> +</div> + +<p>Firefox 45 より、2 つのヒープのスナップショットの差分を確認できます。これは 2 つのスナップショット間で、メモリのアロケートや空き状態の違いを表示します。</p> + +<p>差分を作成するにはカメラのアイコンの隣にある "+/-" ボタンを押下して、基準とするスナップショットを選択します。そして、比較するスナップショットを選択してください。ツールが 2 つのスナップショットの差分を表示します。単体のスナップショットの場合と同じビューを使用して、差分を分析できます。</p> + +<p>{{EmbedYouTube("rbDHVxCzqhU")}}</p> diff --git a/files/ja/conflicting/tools/page_inspector/index.html b/files/ja/conflicting/tools/page_inspector/index.html new file mode 100644 index 0000000000..bbfb74ccca --- /dev/null +++ b/files/ja/conflicting/tools/page_inspector/index.html @@ -0,0 +1,69 @@ +--- +title: Style panel +slug: Tools/Page_Inspector/Style_panel +translation_of: Tools/Page_Inspector#CSS_pane +translation_of_original: Tools/Page_Inspector/Style_panel +--- +<div>{{ToolsSidebar}}</div><p>ページ調査ツールのスタイルパネルでは、調査を行っているページの CSS を調べたり操作したりすることができます。このパネルには選択されている要素に紐づけられている CSS に関する 2 つのビューがあります: CSS ルールを基にしたビューと、プロパティを基にしたビューです。</p> + +<p>{{ 英語版章題("The Rules view") }}</p> + +<h2 id="ルールビュー">ルールビュー</h2> + +<p><img alt="style-rules.png" class="internal lwrap" src="/@api/deki/files/6075/=style-rules.png" style="float: left;">ルールビュー (左図) では、スタイルが<a href="/ja/DOM/stylesheet" title="stylesheet">スタイルシート</a>の編成方法に似た形式でまとめられています。ここには選択された要素に適用しているルールが、そのルールが要素に与えたプロパティ (およびその値) と共に表示されます。また、最後に適用したスタイルがリストの始めに表示されます。スタイルは供給源ごとにグループ化され、そのスタイルが読み込まれたファイルの名前が表示されます。なお、"インライン" グループは HTML の <code>style</code> 属性を用いて適用されたスタイルをリスト化します。</p> + +<p>継承されたスタイルはその旨が注記され、また後から適用されたスタイルに上書きされたスタイルには取り消し線が引かれます。よって、ある要素のスタイルの由来がどこかを明らかにすることを簡単にし、また要素のスタイルが予期しないものになってしまう問題のデバッグに役立つでしょう。</p> + +<p>また、ルールビューでは CSS に変更を加えることができます。あるスタイルの適用／非適用を切り替えるには、そのスタイルの隣にあるチェックボックスをクリックしてください。変更点はブラウザウィンドウ内へ直ちに反映されます。</p> + +<p>加えて、プロパティ名をクリックして新しい名前を入力することで、プロパティの名前を変えることができます。同様にプロパティの値をクリックして新しい値を入力することで、値を変えることもできます。</p> + +<p>閉じ括弧 ("<span class="nowiki">}</span>") がある行をクリックすることで、新しいプロパティを追加することができます。新しい行が追加されて、プロパティ名とその値を入力することができます。</p> + +<p>すべての変更内容は一時的なものです。ページを再読み込みすると、元のスタイルに戻ります。</p> + +<p>例えば "Sign in" ボタンの {{ HTMLElement("a") }} 要素に、以下に示したルールの新しいプロパティを追加してみましょう:</p> + +<p><img alt="font-size.png" class="default internal" src="/@api/deki/files/6076/=font-size.png" style="border: 1px solid black;"></p> + +<p>フォントサイズが大きくされたので、ボタンが以前よりも大きくなります。このように、コンテンツで実験を行ったり、作業中のコンテンツで何をすればどのような外見になるかをリアルタイムに確認したりすることにスタイルパネルを使用できます。</p> + +<p>{{ 英語版章題("New features in Firefox 13") }}</p> + +<p>ある宣言のために CSS の大規模な編集を行いたい場合は、背景が灰色の見出し行 (スクリーンショットで "mdn-min.css:1" などのような箇所) をクリックしましょう。すると、当該宣言を定義する場所にカーソルを置いた状態で<a href="/ja/Tools/Style_Editor" title="Style Editor">スタイルエディタ</a>が開きます。</p> + +<p>宣言の部分で右クリックすると、その宣言をさまざまな方法でコピーする項目があるポップアップメニューを表示しますので、例えば別のドキュメントに貼り付けるといったことができます。</p> + +<p>編集中、あるプロパティに対して不正な値を入力したり未知のプロパティ名を入力したりすると、黄色の警告アイコンをプロパティの隣へ以下のように表示します:</p> + +<p><img alt="style-panel-warning-icon.png" class="default internal" src="/@api/deki/files/6223/=style-panel-warning-icon.png"></p> + +<p>{{ 英語版章題("The Properties view") }}</p> + +<h2 id="プロパティビュー">プロパティビュー</h2> + +<p>一方プロパティビューでは、選択された要素に適用されているすべてのプロパティやその値を、どのスタイルシートやルールがその値を設定したかと共に表示します。これらはアルファベット順に並べられ、また見たい項目を簡単に発見できる検索機能も提供されています。</p> + +<p><img alt="style-properties.png" class="internal rwrap" src="/@api/deki/files/6077/=style-properties.png" style="float: right;">既定の状態ではページのスタイルシートで設定したスタイルだけが表示されますが、"ユーザ CSS のみ" のチェックボックスのチェックを外すことで、ブラウザの既定のスタイルも表示することができます。</p> + +<p>検索ボックスに入力することでリアルタイムに一覧の絞り込みが行われます。例えばフォント関連の設定内容だけを見たい場合は、検索ボックスに "font" と入力すれば名前に "font" が含まれるプロパティだけが表示されます。同様に、プロパティの値を検索することもできます。例えば、フォントに "Lucida Grande" が適用されることの起因となるルールを探したいとします。その場合は、フォント名を検索ボックスに入力してください。</p> + +<p>プロパティ名の隣にある三角印をクリックすると、プロパティの値・プロパティがどのように適用されたか・そのプロパティの由来はどこかといった詳細情報が表示されます。</p> + +<p>{{ 英語版章題("Learning more about properties") }}</p> + +<h3 id="プロパティについて詳しく学ぶ">プロパティについて詳しく学ぶ</h3> + +<p><img alt="showing-info-icon.png" class="internal lwrap" src="/@api/deki/files/6079/=showing-info-icon.png" style="float: left;">よく知らない CSS プロパティや、より詳しく知りたいプロパティがあるときにとても便利な機能があります: プロパティビューでプロパティ名にマウスポインタを載せると、小さな "情報" アイコンが表示されます。このアイコンをクリックすると、Mozilla Developer Network の Wiki にある当該プロパティのドキュメントが表示されます。</p> + +<p>{{ 英語版章題("See also") }}</p> + +<h2 id="参考情報">参考情報</h2> + +<ul> + <li><a href="/ja/Tools/Page_Inspector/HTML_panel" title="HTML panel">HTML panel</a></li> + <li><a href="/ja/Tools/Page_Inspector" title="Page Inspector">Page Inspector</a></li> + <li><a href="/ja/Tools" title="Tools">Tools</a></li> +</ul> + +<p>{{ languages( { "en": "en/Tools/Page_Inspector/Style_panel"} ) }}</p> diff --git a/files/ja/conflicting/tools/page_inspector/ui_tour/index.html b/files/ja/conflicting/tools/page_inspector/ui_tour/index.html new file mode 100644 index 0000000000..3210682298 --- /dev/null +++ b/files/ja/conflicting/tools/page_inspector/ui_tour/index.html @@ -0,0 +1,35 @@ +--- +title: HTML panel +slug: Tools/Page_Inspector/HTML_panel +translation_of: Tools/Page_Inspector/UI_Tour +translation_of_original: Tools/Page_Inspector/HTML_panel +--- +<div>{{ToolsSidebar}}</div><p>{{ fx_minversion_header("10.0") }}</p> + +<p>ページ調査ツールの HTML パネルでは、調査ツールで現在選択している要素の HTML 構文を周囲の HTML と共に閲覧することができますので、その要素を生成する文脈を見ることができます。これはサイトのデバッグや、特定のレイアウトがどのように作られているかの学習に役立ちます。</p> + +<div class="note"><strong>注意:</strong> HTML パネルの表示／非表示は Ctrl-H を押すことで切り替えできます。</div> + +<h2 id="HTML_のナビゲートを行う">HTML のナビゲートを行う</h2> + +<p>HTML 中のノードをクリックして、さらなる調査のために要素を選択することができます。また、要素を選択していないときに HTML パネルを開いている場合は、マウスポインタを載せている要素の HTML を表示するようにパネルの内容が自動更新されます。これは、コードの問題点の発見に役立つツールにもなります。</p> + +<p><img alt="html-panel.png" class="default internal" src="/@api/deki/files/6073/=html-panel.png"></p> + +<p>HTML パネルを表示しているときは、ページ調査ツールのツールバーの右端にリサイズ用のウィジェットが表示されますので、一度に見たい HTML の量に合わせてサイズを調節することができます。</p> + +<h2 id="属性の実験を行う">属性の実験を行う</h2> + +<p>ソース中の属性値をダブルクリックして新しい値を入力することで、HTML 属性の値を変更することができます:</p> + +<p><img alt="edit-html-attr.png" class="default internal" src="/@api/deki/files/6080/=edit-html-attr.png"></p> + +<h2 id="参考情報">参考情報</h2> + +<ul> + <li><a href="/ja/Tools/Page_Inspector" title="Page Inspector">Page Inspector</a></li> + <li><a href="/ja/Tools/Page_Inspector/Style_panel" title="ja/Tools/Page_Inspector/Style panel">Style panel</a></li> + <li><a href="/ja/Tools" title="Tools">Tools</a></li> +</ul> + +<p>{{ languages( { "en": "en/Tools/Page_Inspector/HTML_panel"} ) }}</p> diff --git a/files/ja/conflicting/tools/performance/call_tree/index.html b/files/ja/conflicting/tools/performance/call_tree/index.html new file mode 100644 index 0000000000..858b944015 --- /dev/null +++ b/files/ja/conflicting/tools/performance/call_tree/index.html @@ -0,0 +1,114 @@ +--- +title: プロファイラのチュートリアル +slug: Tools/Performance/Profiler_walkthrough +translation_of: Tools/Performance/Call_Tree +translation_of_original: Tools/Performance/Profiler_walkthrough +--- +<div>{{ToolsSidebar}}</div><p>JavaScript プロファイラは JavaScript エンジンの状態を定期的にサンプリングして、その時点のコード実行のスタックを記録します。統計的に、個々の関数を実行しているときに取得したサンプル数はブラウザが実行にかけた時間に対応しますので、コード内のボトルネックを発見できます。</p> + +<h2 id="Analysing_profiles" name="Analysing_profiles">プロファイルを分析する</h2> + +<p>パフォーマンスツールがどのようにプロファイルを提供するかを理解するには、例を見ていくことがもっとも簡単です。以下のコードは 2 から 10,000 までの数値について素数であるかを確認して、その結果を表示します。少しおもしろくするため、素数の確認は <code><a href="/ja/docs/Web/API/WindowTimers.setTimeout">setTimeout</a></code> のコールバックとして実行します:</p> + +<pre class="brush: js">function isPrime(i) { + for (var c = 2; c <= Math.sqrt(i); ++c) { + if (i % c === 0) { + console.log(i + " is not prime"); + return; + } + } + console.log(i + " is prime"); +} + +function timedIsPrime(i) { + setTimeout(function() { + isPrime(i); + }, 100); +} + +function testPrimes() { + var n = 10000; + for (var i = 2; i != n; ++i) { + timedIsPrime(i); + } +} + +var testPrimesButton = document.getElementById("test-primes"); +testPrimesButton.addEventListener("click", testPrimes, false);</pre> + +<p>このコードを Web ページに貼り付けて実行すると、コンソールへ以下のように出力します:</p> + +<pre>"2 is prime" +"3 is prime" +"4 is not prime" +"5 is prime" +"6 is not prime"</pre> + +<p>このコードのプロファイルを取得すると、以下のように表示されるでしょう:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9511/primality-profile.png" style="display: block; margin-left: auto; margin-right: auto; width: 650px;"></p> + +<p>最初の行は、<em>関数</em>列が常に <em>(ルート)</em> になります。ここでは 2 つのことを示しています: プロファイリングに 1,121.95 ミリ秒かかっており、またその間に 78 個のサンプルを取得しました。<em>(ルート)</em> の下に、サンプルの取得中にプログラムで経由した、さまざまなパスのツリーを表示します。<em>(ルート)</em> の直下に、スタックの底にあるトップレベルの関数が現れます。この例では、トップレベルの関数が 2 つあります:</p> + +<ul> + <li>click イベントのリスナである <code>testPrimes()</code></li> + <li><code>timedIsPrime()</code> 内の <code>setTimeout()</code> の引数で指定した、無名のコールバック関数</li> +</ul> + +<p><code>testPrimes()</code> の行を見ていきましょう:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9515/primality-profile-testprimes.png" style="display: block; margin-left: auto; margin-right: auto; width: 650px;"></p> + +<p>ここでは、78 個のサンプルのうち 29 個を <code>testPrimes()</code> 内で取得したことがわかります。<em>合計コスト</em>の列は、サンプル数をパーセント値に置き換えたものです: <code>(29/78) * 100</code> =<code> 37.17</code></p> + +<p>ところが<em>時間</em>と<em>コスト</em>は、ともに 0 です。これは、そのスタックフレームのコードを実行している間に取得したサンプルがないためです。サンプルはすべて、関数内にネストしているブロックまたは <code>testPrimes()</code> が呼び出した関数の内部で取得したものです。これは次の行でわかります:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9517/primality-profile-testprimes-2.png" style="display: block; margin-left: auto; margin-right: auto; width: 650px;"></p> + +<p>この行も <em>testPrimes</em> という名称です。これは 19 行目から始まる <code>for</code> ループが作成した、<code>testPrimes()</code> の新たなスタックフレームを指しています。前のフレームの<em>コスト</em>が 0 であったことから予想されるとおり、このフレームの<em>サンプル</em>列も 29 です。</p> + +<p>しかし、<em>コスト</em>と<em>時間</em>は 0 ではありません。これはいくつかのサンプルが、このフレームを実行しているときに取得されたことを表します。プロファイルではサンプルをいくつ取得したかを明示していませんが、次の <em>timedIsPrime</em> という名前の行で取得したサンプルが 24 個であることから、5 個取得したはずです。これは簡単に確認できます。<code>(5/78) * 100 = 6.41</code> であり、<em>コスト</em>の値と一致します。</p> + +<p>この分岐で残る 24 個のサンプル (全体の 30.76%) は <code>timedIsPrime()</code> で取得されました。つまり、<code>setTimeout()</code> (12 行目) を呼び出している部分です。</p> + +<p>コールツリーの別の分岐は、<code>setTimeout()</code> (13 行目) に渡した無名のコールバック関数から始まっています。ここではサンプルを 1 個取得しており、残り 48 個のサンプル (全体の 61.53%) はコールバックで呼び出す <code>isPrime()</code> で取得されました。</p> + +<p>総括すると、もっとも多くのサンプルを <code>isPrime()</code> で取得しており (全体の 61.53%)、その次が <code>timedIsPrime()</code> (全体の 30.76%)、残りは取るに足らない量です。統計的に言えば、おそらくこれらの関数がほとんどの時間を消費していますので、プログラムを高速化したい場合の有力な最適化候補になります。</p> + +<h3 id="Total_Time_and_Self_Time" name="Total_Time_and_Self_Time"><em>合計時間</em>と<em>時間</em></h3> + +<p><em>合計時間</em>と<em>時間</em>の列は<em>合計コスト</em>と<em>コスト</em>から算出していますが、直接反映したものではありません。規則的にサンプルを取得しようとしていますが、そのとおりに取得できない場合もあります。適切な時期にサンプルを取得できなかった場合は、その不規則性を補正しようとします。</p> + +<h3 id="Inverting_the_call_tree" name="Inverting_the_call_tree">呼び出しツリーを反転</h3> + +<p>既定では、プロファイラは一般的なコールスタックと同様に、呼び出しツリーを根から葉の順に表示します。つまりそれぞれのトップレベル関数、トップレベル関数が呼び出す関数、その関数から呼び出される関数、といった順になります:</p> + +<pre>testPrimes + + -> timedIsPrime + + + +(setTimeout callback) + + -> isPrime</pre> + +<p>これは論理的かつスタックが積み上げられる時系列に従っており、コールスタックを表現するための慣習的な方法でもあります。一方、時間がかかっている場所が呼び出しツリーの深部にあることがよくあります。前出の例でわかるとおり、全サンプルの 90% は 2 つの主要な分岐の終端で発生しています。</p> + +<p>多くのサンプルを記録したスタックフレームに注目させるため、呼び出しツリーを反転させるオプションがプロファイラにあります。このオプションを選択すると、プロファイラは以下のようになります:</p> + +<ul> + <li><em>コスト</em>が 0 より大きいスタックフレーム、つまり、サンプルを取得したとき実際に実行していたスタックフレームのリストを作成します。</li> + <li>リストは、スタックフレームで取得したサンプル数の順に並べ替えられます。</li> + <li>リスト内の各項目で、コールスタックをトップレベル関数に向かって逆向きに表示します。</li> +</ul> + +<p>例えば testPrimes の例を、既定の表示でもう一度示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9511/primality-profile.png" style="display: block; margin-left: auto; margin-right: auto; width: 650px;"></p> + +<p>呼び出しツリーを反転すると以下のようになります:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9521/primality-profile-inverted.png" style="display: block; margin-left: auto; margin-right: auto; width: 650px;"></p> + +<p>反転した表示では、プログラムで時間がかかっている場所を効果的に目立たせていることがわかるでしょう。</p> diff --git a/files/ja/conflicting/tools/performance/index.html b/files/ja/conflicting/tools/performance/index.html new file mode 100644 index 0000000000..c05f177c25 --- /dev/null +++ b/files/ja/conflicting/tools/performance/index.html @@ -0,0 +1,145 @@ +--- +title: JavaScript プロファイラ +slug: Tools/Profiler +tags: + - Debugging + - Firefox + - Guide + - Profiler + - Profiling + - Tools +translation_of: Tools/Performance +translation_of_original: Tools/Profiler +--- +<div>{{ToolsSidebar}}</div><p>プロファイラツールを使用して、JavaScript コードのボトルネックを見つけましょう。プロファイラは周期的に、サンプルについて現在の JavaScript コールスタックやコンパイルの統計情報を抽出します。</p> + +<p>"Web 開発" メニューから "プロファイラ" を選択することで、プロファイラを起動できます。"Web 開発" メニューは、Linux や OS X では "ツール" メニューの配下に、Windows では "Firefox" メニューの直下にあります。</p> + +<p><a href="/ja/docs/Tools/Tools_Toolbox" title="Tools/Tools_Toolbox">ツールボックス</a>が開いて、プロファイラが選択されます。</p> + +<h2 id="Sampling_profilers" name="Sampling_profilers"><a name="sampling-profilers">サンプリング型プロファイラ</a></h2> + +<p>JavaScript プロファイラは、サンプリング型のプロファイラです。これは JavaScript エンジンの状態を定期的にサンプリングして、その時点のコード実行のスタックを記録します。統計的に、個々の関数を実行しているときに取得したサンプル数はブラウザが実行にかけた時間に対応しますので、コード内のボトルネックを発見できます。<br> + <br> + <a name="profiling-example">例えば、以下のようなプログラムについて考えてみましょう:</a></p> + +<pre class="brush: js">function doSomething() { + var x = getTheValue(); + x = x + 1; // -> サンプル A + logTheValue(x); +} + +function getTheValue() { + return 5; +} + +function logTheValue(x) { + console.log(x); // -> サンプル B、サンプル C +} + +doSomething();</pre> + +<p>プロファイラをアクティブにしてこのプログラムを実行したら、実行時にプロファイラは上記のインラインコメントで示したように 3 つのサンプルを取得します。</p> + +<p>これらはすべて <code>doSomething()</code> の内部から取得されますが、2 番目の 2 つは <code>doSomething()</code> から呼び出された <code>logTheValue()</code> 関数の内部です。よってプロファイルは、以下のように 3 つのスタックトレースで構成されます:</p> + +<pre>サンプル A: doSomething() +サンプル B: doSomething() > logTheValue() +サンプル C: doSomething() > logTheValue()</pre> + +<p>これは私たちに何も伝えられない不十分なデータであることが明らかですが、より多くのサンプルにより、<code>logTheValue()</code> がコード内のボトルネックであると断定できるかもしれません。</p> + +<h2 id="Creating_a_profile" name="Creating_a_profile">プロファイルの作成</h2> + +<p>プロファイラで<em>ストップウォッチ</em>のボタンをクリックして、サンプルの記録を始めます。プロファイラが記録を行っている間は、ストップウォッチのボタンがハイライトされます。ボタンを再度押すと記録を停止して、新たなプロファイルを保存します:</p> + +<p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/5977/Screen%20Shot%202013-08-26%20at%2010.35.47%20AM.png"></p> + +<p>"終了" をクリックすると、新しいプロファイルが自動的に開きます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5981/Screen%20Shot%202013-08-26%20at%2011.07.18%20AM.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>このペインは 2 つのパーツに分かれています:</p> + +<ul> + <li>左側は取得したすべてのプロファイルを一覧表示しており、それぞれのプロファイルを読み込むことができます。また、リストの上にボタンが 2 つあります。<em>ストップウォッチ</em>のボタンは新たなプロファイルの記録を、<em>インポート...</em> ボタンは以前に保存したデータのインポートを行います。プロファイルを選択しているときは、<em>保存</em>ボタンをクリックするとデータを JSON ファイルとして保存できます。</li> + <li>右側は現在読み込んでいるプロファイルを表示します。</li> +</ul> + +<h2 id="Analyzing_a_profile" name="Analyzing_a_profile">プロファイルの分析</h2> + +<p>プロファイルは 2 つのパーツに分かれています:</p> + +<ul> + <li><a href="#profile-timeline" title="#profile-timeline">プロファイルのタイムライン</a></li> + <li><a href="#profile-details" title="#profile-details">プロファイルの詳細</a></li> +</ul> + +<h3 id="Profile_timeline" name="Profile_timeline"><a name="profile-timeline">プロファイルのタイムライン</a></h3> + +<p>プロファイルのタイムラインは、プロファイル表示の上部を占めています:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5987/timeline" style="display: block; margin-left: auto; margin-right: auto;">横軸は時間、縦軸はサンプルにおけるコールスタックのサイズを表します。コールスタックは、サンプルを取得したときにアクティブであった関数の量を表します。</p> + +<p>チャートで赤色のサンプルは、そのときにブラウザが応答していなかったことを示しており、ユーザはアニメーションや応答性が止まったことに気づいたかもしれません。プロファイルに赤色のサンプルがある場合は、そのコードをいくつかのイベントに分解することを検討したり、<a href="/ja/docs/Web/API/window.requestAnimationFrame" title="Web/API/window.requestAnimationFrame">requestAnimationFrame</a> や <a href="/ja/docs/Web/Guide/Performance/Using_web_workers" title="Web/Guide/Performance/Using_web_workers">Worker</a> の使用について調べたりしましょう。</p> + +<p>タイムラインでクリックアンドドラッグすることで、プロファイル内の特定の範囲を調査できます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5989/Screen%20Shot%202013-08-26%20at%2011.17.59%20AM.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>タイムラインの上に "サンプリング範囲 [AAA, BBB]" というラベルがついた、新たなボタンが現れます。そのボタンを押すとプロファイルがズームされて、そのタイムスライスの詳細なビューが下部に表示されます:</p> + +<p><br> + <img alt="" src="https://mdn.mozillademos.org/files/5991/Screen%20Shot%202013-08-26%20at%2011.18.03%20AM.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h3 id="Profile_details" name="Profile_details"><a name="profile-details">プロファイルの詳細</a></h3> + +<p>プロファイルの詳細は、プロファイル表示の下部を占めています:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5993/profiler-details-highligted.png" style="display: block; margin-left: auto; margin-right: auto;">始めに新しいサンプルを開くと、サンプルペインには上のスクリーンショットのように "(total)" という名前の行があります。"(total)" の隣にある三角印をクリックすると、サンプル内にあるすべてのトップレベル関数がリストアップされます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5995/Screen%20Shot%202013-08-26%20at%2011.22.10%20AM.png"></p> + +<p><strong>実行時間</strong>は当該関数が現れたサンプルの総数を示し<a href="#footnote-1"><sup>1</sup></a>、その後ろにプロファイル内で当該関数が現れた全サンプルのパーセント値があります。最上段の行はプロファイル全体で 2021 のサンプルがあることを表し、また 2 行目は 1914 サンプルすなわち全体の 94.7% が、<code>detectImage()</code> 関数内にいたことを表します。</p> + +<p><strong>滞在</strong> は当該関数そのものを実行する間に取得したサンプル数を示しており、関数を呼び出しているときではありません。前出の<a href="#profiling-example" title="#profiling-example">シンプルな例</a>では、<code>doSomething()</code> は<strong>実行時間</strong>が 3 (サンプル A、B、C) ですが、<strong>滞在</strong>の値は 1 (サンプル A) になるでしょう。</p> + +<p>3 列目は関数名およびファイル名と行数 (ローカルの関数) またはベースネームとドメイン名を表示します。灰色の関数はブラウザ組み込みの関数です。黒色の関数がページで読み込んだ JavaScript を表します。行にマウスポインタを乗せると、関数の識別名の右側に矢印が現れます: 矢印をクリックすると関数のソースを表示します。</p> + +<h3 id="Expanding_the_call_tree" name="Expanding_the_call_tree">コールツリーの展開</h3> + +<p>ある行で、この関数から呼び出された関数に滞在している間のサンプルが存在する場合 (すなわち、<strong>実行時間</strong>がその行の<strong>滞在</strong>より大きい場合) は、関数名の左側に三角印が表示され、コールツリーを展開できます。</p> + +<p>前出の<a href="#profiling-example" title="#profiling-example">シンプルな例</a>では、完全に展開したコールツリーは以下のようになります:</p> + +<table class="standard-table" style="height: 100px; width: 378px;"> + <tbody> + <tr> + <td style="text-align: center;"><strong>実行時間</strong></td> + <td style="text-align: center;"><strong>滞在</strong></td> + <td style="text-align: center;"> </td> + </tr> + <tr> + <td style="text-align: center;">3 100%</td> + <td style="text-align: center;">1</td> + <td style="text-align: center;">doSomething()</td> + </tr> + <tr> + <td style="text-align: center;">2 67%</td> + <td style="text-align: center;">2</td> + <td style="text-align: center;">logTheValue()</td> + </tr> + </tbody> +</table> + +<p>より実際的な例を見ましょう: 前出のスクリーンショットで、上から 2 行目を見ると <code>detectImage()</code> 関数の内部で 1914 サンプルかかっていることがわかります。しかし、そのすべては <code>detectImage()</code> から呼び出された関数でかかっています (<strong>滞在</strong> セルが 0 です)。コールツリーを展開して、ほとんどのサンプルがかかっていたとき実際に実行していた関数は何かを明らかにできます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5999/bla.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>これは、<code>detectAtScale()</code> を実際に実行しているときに 6 サンプル、<code>getRect()</code> の実行に 12 サンプルかかっていたことなどを表します。</p> + +<h2 id="Footnotes" name="Footnotes">脚注</h2> + +<ol> + <li><a name="footnote-1">関数がさまざまなソースから複数回呼び出される場合、プロファイラの出力にも複数回現れます。よって、<code>forEach</code> など汎用的な関数はコールツリー内に複数回現れるでしょう。</a></li> +</ol> diff --git a/files/ja/conflicting/tools/responsive_design_mode/index.html b/files/ja/conflicting/tools/responsive_design_mode/index.html new file mode 100644 index 0000000000..90596180ce --- /dev/null +++ b/files/ja/conflicting/tools/responsive_design_mode/index.html @@ -0,0 +1,71 @@ +--- +title: レスポンシブデザインモード (Firefox 52 より前) +slug: Tools/Responsive_Design_Mode_(before_Firefox_52) +translation_of: Tools/Responsive_Design_Mode +translation_of_original: Tools/Responsive_Design_Mode_(before_Firefox_52) +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>このページでは、Firefox 52 より前のバージョンのレスポンシブデザインモードについて説明します。Firefox 52 以降については、<a href="/ja/docs/Tools/Responsive_Design_Mode">レスポンシブデザインモード</a> をご覧ください。</p> +</div> + +<p><a href="/ja/docs/Web_Development/Responsive_Web_design">レスポンシブデザイン</a> は、携帯電話やタブレットのようなさまざまなデバイスに適した体裁を提供するため、さまざまなスクリーンサイズに適応します。レスポンシブデザインモードは、ウェブサイトやウェブアプリがさまざまなスクリーンサイズでどのように見えるかの確認を容易にします。</p> + +<p>以下のスクリーンショットは Wikipedia のモバイル版を、コンテンツエリアのサイズが 320x480 の状態で表示した例です。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12738/responsive-design-mode.png" style="height: 788px; width: 735px;"></p> + +<p>レスポンシブデザインモードは、コンテンツエリアのサイズをすばやくかつ正確に変更できるので便利です。</p> + +<p>もちろん、ブラウザーのウィンドウサイズを変えることもできるでしょう。しかしブラウザーのウィンドウを小さくするとほかのタブもすべて小さくなってしまい、ブラウザーのインターフェイスが使用しづらくなります。</p> + +<p>レスポンシブデザインモードを有効にした状態で、コンテンツエリアがリサイズされたまま通常どおりにブラウジングを続けることができます。</p> + +<h2 id="Enabling_and_disabling" name="Enabling_and_disabling">有効化と無効化</h2> + +<p>レスポンシブデザインモードの有効化方法は 3 つあります:</p> + +<ul> + <li>Firefox メニュー (メニューバーを表示している場合や OS X ではツールメニュー) のウェブ開発サブメニューで [レスポンシブデザインモード] を選択する</li> + <li><a href="/ja/docs/Tools_Toolbox#Toolbar" title="Tools_Toolbox#Toolbar">ツールボックスのツールバー</a> で [レスポンシブデザインモード] ボタンを押す</li> + <li>Ctrl + Shift + M を押下する (OS X では Cmd + Opt + M)</li> +</ul> + +<p>また、レスポンシブデザインモードを無効化する方法も 3 つあります:</p> + +<ul> + <li>[レスポンシブデザインモード] メニュー項目を再度選択する</li> + <li>ウィンドウの左上隅にある [終了] ボタンをクリックする</li> + <li>Ctrl + Shift + M を押下する (OS X では Cmd + Opt + M)。Firefox 34 より前では、Esc キーでもレスポンシブデザインモードが閉じました。</li> +</ul> + +<h2 id="Resizing" name="Resizing">リサイズ</h2> + +<p>コンテンツエリアのサイズを変更する方法は 2 つあります:</p> + +<ul> + <li><a href="#select-size">[サイズ選択] コントロール</a> を使用する</li> + <li>コンテンツエリアの右端と下端、および右下隅にあるコントロールをクリックアンドドラッグする</li> +</ul> + +<p>クリックアンドドラッグでリサイズする場合、Control キー (Mac OS X では Cmd キー) を押しながら操作するとリサイズ時の移動速度が遅くなります。これにより、精密なサイズ設定が容易になります。</p> + +<h2 id="Responsive_Design_Mode_controls" name="Responsive_Design_Mode_controls">レスポンシブデザインモードの操作</h2> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12736/responsive-design-mode-controls.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>レスポンシブデザインモードでページを表示しているときは、ウィンドウの上部に 5 個のコントロールがあります:</p> + +<dl> + <dt>終了</dt> + <dd>レスポンシブデザインモードを終了して、通常のブラウジングに戻ります。</dd> + <dt>サイズ選択</dt> + <dd>いくつかの幅と高さのプリセット、または独自に定義したサイズから選択します。</dd> + <dt>高さと幅を入れ替え</dt> + <dd>スクリーンの向きのポートレートとランドスケープを切り替えます。</dd> + <dt>タッチイベントをシミュレート</dt> + <dd>touch イベントのシミュレーションを有効化/無効化します。touch イベントのシミュレーションを有効化すると、mouse イベントを <a href="/ja/docs/Web/Guide/API/DOM/Events/Touch_events">touch イベント</a> に変換します。</dd> + <dt>スクリーンショット</dt> + <dd>コンテンツエリアのスクリーンショットを取得します。スクリーンショットは、Firefox の既定のダウンロード先に保存します。</dd> + <dt>Custom User Agent を設定</dt> + <dd><em>Firefox 47 の新機能</em>。ユーザーエージェント文字列を入力して、入力ボックスからフォーカスを外します。入力ボックスを青色でハイライト表示して、入力した UA 文字列を使用していることを示します。Firefox はカレントタブから実行するリクエストに限り、指定した UA 文字列を含めます。これは、<a href="/ja/docs/Browser_detection_using_the_user_agent">UA スニッフィング</a> によってブラウザーごとに異なるコンテンツを提供するサイトで役に立ちます。文字列を選択および削除すると、通常の UA 文字列に戻ります。</dd> +</dl> diff --git a/files/ja/conflicting/web/accessibility/aria/index.html b/files/ja/conflicting/web/accessibility/aria/index.html new file mode 100644 index 0000000000..df17bbcfbb --- /dev/null +++ b/files/ja/conflicting/web/accessibility/aria/index.html @@ -0,0 +1,1063 @@ +--- +title: Accessible Rich Internet Applications +slug: ARIA/Accessible_Rich_Internet_Applications +tags: + - AJAX + - Accessibility + - DHTML + - DOM +translation_of: Web/Accessibility/ARIA +translation_of_original: ARIA/Accessible_Rich_Internet_Applications +--- +<p> </p> +<p>Accessibility Rich Internet Applications(ARIA) の Firefox による実装は、ツリービューやメニューバー、表計算などのデスクトップスタイルのウィジェットを、キーボードとスクリーンリーダや拡大鏡、代替入力機器などの支援技術から利用可能にします。また、ページ上で一部を AJAX スタイルのライブアップデートを行う際のアクセシビリティの解決策を提供します。</p> +<p>ARIA は、以前は <a href="ja/DHTML">DHTML</a> アクセシビリティとして知られており、<a class="external" href="http://www.w3.org/">W3C - World Wide Web Consortium</a> にて開発中の標準です。すべての文書は <a class="external" href="http://w3.org/wai/pf">Protocols and Formats Working Group 公式ページ</a> で利用可能です。ここには、<a class="external" href="http://www.w3.org/TR/aria-roadmap/">ARIA ロードマップ</a> および <a class="external" href="http://www.w3.org/TR/aria-role/">ARIA roles 仕様</a>, <a class="external" href="http://www.w3.org/TR/aria-state/">states モジュール</a> が含まれます。</p> +<p>Firefox における ARIA のためのソースコードは IBM によって寄贈されています。</p> +<p>また、<a class="external" href="http://developer.mozilla.org/en/docs/ARIA:_Accessible_Rich_Internet_Applications/Relationship_to_HTML_FAQ">ARIA のよくある質問とその答え(FAQ)</a> もご覧ください。</p> +<p><br> + ARIA の例は Firefox の実装で説明することができます。コミュニティが W3C の Protocols and Formats グループがいくつかの標準化プロセスを経て ARIA 実装へと移行するのを待つ間、今日のウェブサイトはすでに Firefox の ARIA サポートを利用して書かれています。バグ修正と小さな改良は続いており、Firefox における ARIA サポートは進化し続けています。 {{ 英語版章題("Keyboard navigation") }}</p> +<h3 id=".E3.82.AD.E3.83.BC.E3.83.9C.E3.83.BC.E3.83.89.E3.81.AB.E3.82.88.E3.82.8B.E6.93.8D.E4.BD.9C" name=".E3.82.AD.E3.83.BC.E3.83.9C.E3.83.BC.E3.83.89.E3.81.AB.E3.82.88.E3.82.8B.E6.93.8D.E4.BD.9C">キーボードによる操作</h3> +<p>キーボードナビゲーションは二通りの方法でサポートされています:</p> +<ol> + <li>HTML の <code>tabindex</code> 属性を通して、どの HTML 要素へもタブで移動可能にし、また少なくとも、スクリプトやマウスを通してフォーカスすることができます。タブで移動可能な要素と単にフォーカス可能な要素を区別することによって、コンテナ内の子要素を矢印キーを使って移動できる、ツリービューや表計算のようなコンテナウィジェットを開発することができます。現在、これは Internet Explorer や Firefox, Opera で動作します。Safari では動作しません。キーボードから操作可能な DHTML ウィジェットの tabindex コードの書き方は、<a href="ja/Key-navigable_custom_DHTML_widgets">Practical documentation on building key navigable custom widgets</a> を参照してください。</li> + <li><code>aria-activedescendant</code> 属性を通して。これを利用すると、とても簡単です。(例えば、list や tree, grid などの) コンテナウィジェット 上に tabindex="0" を置くだけで、ウィジェットがタブの移動順に追加されます。そして、aria-activedescendant="{{ mediawiki.external('id') }}" 属性を持つ、現在フォーカスされたものの子孫にフォーカスが移ります。コンテナウィジェット上の keydown ハンドラは、そのフォーカスが移った子孫に変更され、現在の項目がそれと分かるように (border や background color によって) スタイル付けされます。この方法は、すべてのブラウザで動作させることができます。この動作を直接描いた例は、<a class="external" href="http://www.mozilla.org/access/dhtml/listbox">listbox example</a> のソースコードをご覧ください。</li> +</ol> +<p>{{ 英語版章題("Basic support for assistive technologies") }}</p> +<h3 id=".E6.94.AF.E6.8F.B4.E6.8A.80.E8.A1.93.E3.81.AE.E3.81.9F.E3.82.81.E3.81.AE.E5.9F.BA.E6.9C.AC.E7.9A.84.E3.81.AA.E3.82.B5.E3.83.9D.E3.83.BC.E3.83.88" name=".E6.94.AF.E6.8F.B4.E6.8A.80.E8.A1.93.E3.81.AE.E3.81.9F.E3.82.81.E3.81.AE.E5.9F.BA.E6.9C.AC.E7.9A.84.E3.81.AA.E3.82.B5.E3.83.9D.E3.83.BC.E3.83.88">支援技術のための基本的なサポート</h3> +<p>支援技術のサポートには、<a class="external" href="http://www.mozilla.org/projects/firefox/">Firefox 2 以降</a>と、各ウィジェットを記述するために ARIA マークアップを使用するコンテンツを必要とします。例えば、各ウィジェットの種類を指定するために ARIA role を使用する必要があります。ウィジェットの種類にはメニューやスライダー、プログレスバーなどがあります。各 role は、<code>checked</code> および <code>selected</code>, <code>required</code>, <code>invalid</code>, <code>expanded</code> などの追加の property 属性をサポートします。 {{ 英語版章題("What does the markup look like?") }}</p> +<h3 id=".E3.83.9E.E3.83.BC.E3.82.AF.E3.82.A2.E3.83.83.E3.83.97.E4.BE.8B" name=".E3.83.9E.E3.83.BC.E3.82.AF.E3.82.A2.E3.83.83.E3.83.97.E4.BE.8B">マークアップ例</h3> +<p>ARIA の勧告が変更され、名前空間がマークアップ内で使用されなくなったため、HTML 内で使用できるようになりました。</p> +<p>例えば、checkbox は以下のように指定します: {{ 英語版章題("In HTML (requires Firefox 3)") }}</p> +<h4 id="HTML_.E3.81.A7.E3.81.AF_.28.E8.A6.81_Firefox_3.29" name="HTML_.E3.81.A7.E3.81.AF_.28.E8.A6.81_Firefox_3.29">HTML では (要 Firefox 3)</h4> +<pre><span tabindex="0" role="checkbox" + aria-checked="true" + onkeydown="return checkBoxEvent(event);" + onclick="return checkBoxEvent(event);"> + チェックボックスのラベル +</span> +</pre> +<p>{{ 英語版章題("Historical Namespace approach (no longer supported)") }}</p> +<h4 id=".E4.BC.9D.E7.B5.B1.E7.9A.84.E3.81.AA.E5.90.8D.E5.89.8D.E7.A9.BA.E9.96.93.E3.81.AB.E3.82.88.E3.82.8B.E3.82.A2.E3.83.97.E3.83.AD.E3.83.BC.E3.83.81_.28.E3.82.B5.E3.83.9D.E3.83.BC.E3.83.88.E3.81.95.E3.82.8C.E3.81.BE.E3.81.9B.E3.82.93.29" name=".E4.BC.9D.E7.B5.B1.E7.9A.84.E3.81.AA.E5.90.8D.E5.89.8D.E7.A9.BA.E9.96.93.E3.81.AB.E3.82.88.E3.82.8B.E3.82.A2.E3.83.97.E3.83.AD.E3.83.BC.E3.83.81_.28.E3.82.B5.E3.83.9D.E3.83.BC.E3.83.88.E3.81.95.E3.82.8C.E3.81.BE.E3.81.9B.E3.82.93.29">伝統的な名前空間によるアプローチ (サポートされません)</h4> +<p>これは、歴史に残しておくための名前空間によるアプローチです。この方法は宣言が使用されるため、XHTML が必要です。Firefox 3 ではサポートされません:</p> +<pre><span tabindex="0" role="wairole:checkbox" + aaa:checked="true" + onkeydown="return checkBoxEvent(event);" + onclick="return checkBoxEvent(event);"> + チェックボックスのラベル +</span> +</pre> +<p><br> + 上記の checkbox はカスタム構成です。しかし、支援技術とユーザに関しては通常の checkbox のように動作します。作者が望めば、<a href="ja/CSS">CSS</a> を通してビジュアルな外観にすることができます。以下に各属性の意味を解説します:</p> +<table class="fullwidth-table"> + <tbody> + <tr> + <th>属性</th> + <th>意味</th> + </tr> + <tr> + <td><code>tabindex="0"</code></td> + <td><code><span class="nowiki"><span></span></code> ベースのチェックボックスをタブで移動する順番に含め、マウスでクリックしてフォーカスできるようにします。対照的に、<code>tabindex="-1"</code> はスクリプトやマウスクリックから要素をフォーカスできるようにしますが、既定のタブで移動する順番には含まれません。</td> + </tr> + <tr> + <td><code>role="checkbox"</code></td> + <td>これが checkbox であることを指定します。スクリーンリーダなどの支援技術は、これが checkbox であることを知ることができます。</td> + </tr> + <tr> + <td><code>aria-checked="true"</code></td> + <td>checkbox はチェックが入っているかどうかをサポートしています。この指定により、checkbox がチェック可能であることを示しています。property は支援技術にも向いています。</td> + </tr> + <tr> + <td><code>onkeydown="return checkBoxEvent(event);"</code></td> + <td>スペースキーでチェックの切り替えができるようにします。<code>checkBoxEvent()</code> メソッドでこれを実装しています。同様に、(消費された)イベントが伝達され続けるべきではない場合に false を返します。</td> + </tr> + <tr> + <td><code>onclick="return checkBoxEvent(event);"</code></td> + <td>キーボードハンドラに加えて、これも必要です。checkbox をクリックすると checkbox の値を切り替えます。</td> + </tr> + </tbody> +</table> +<p>このマークアップが使用されている例は、<a href="#Sample_widgets">ARIA サンプル</a> をご覧ください。Firefox はこれらのマークアップ role と property を + <i> + MSAA - Microsoft Active Accessibility</i> + と + <i> + ATK - Accessibility Toolkit</i> + (from <a class="external" href="http://developer.gnome.org/projects/gap/">Gnome Accessibility Project</a>) から実装しています。これは、Windows と Linux 上でのアクセシビリティ API 標準です。ウィジェットの情報がアクセシビリティ API 標準を通して公開されているため、支援技術はこれらのウィジェットを用いて、新しいコードなしで多くの互換性を得ることができます。現在、最も完全なスクリーンリーダによるサポートには + <i> + <a class="external" href="http://www.gwmicro.com/">Window-Eyes 5.5</a></i> + が必要です。 + <i> + <a class="external" href="http://www.aisquared.com/">ZoomText</a></i> + などのスクリーン拡大鏡もまた、ARIA と互換性があります。</p> +<p>Internet Explorer による role や property のサポートは現在利用できません。Internet Explorer は現在、これらのウィジェットのキーボード操作のみサポートしています。支援技術ベンダーは、Internet Explorer を変更せずに <a href="ja/DOM">DOM</a> と DOM 変更イベントを直接探すことによって、ARIA のセマンティクスをサポートできるようにするべきです。 {{ 英語版章題("Choosing XHTML or HTML") }}</p> +<h3 id="XHTML_.E3.81.A8_HTML_.E3.81.AE.E3.81.A9.E3.81.A1.E3.82.89.E3.82.92.E9.81.B8.E3.81.B6.E3.81.8B" name="XHTML_.E3.81.A8_HTML_.E3.81.AE.E3.81.A9.E3.81.A1.E3.82.89.E3.82.92.E9.81.B8.E3.81.B6.E3.81.8B">XHTML と HTML のどちらを選ぶか</h3> +<p>XHTML と HTML (または SVG と XUL) のどちらを使用するかという問題はなくなりました。Firefox は名前空間なしの新しいマークアップを、他のものと同じ方法で処理します。content type の心配をしなくても、ARIA マークアップ宣言を使用し、それを他のものと同様に動的に設定することができます。初期の ARIA の扱いに比べれば、これは劇的な向上です! {{ 英語版章題("Sample widgets") }}</p> +<h3 id=".E3.82.B5.E3.83.B3.E3.83.97.E3.83.AB.E3.82.A6.E3.82.A3.E3.82.B8.E3.82.A7.E3.83.83.E3.83.88" name=".E3.82.B5.E3.83.B3.E3.83.97.E3.83.AB.E3.82.A6.E3.82.A3.E3.82.B8.E3.82.A7.E3.83.83.E3.83.88">サンプルウィジェット</h3> +<p>{{ 英語版章題("Testing with keyboard and mouse navigation") }}</p> +<h4 id=".E3.82.AD.E3.83.BC.E3.83.9C.E3.83.BC.E3.83.89.E3.81.A8.E3.83.9E.E3.82.A6.E3.82.B9.E3.81.AB.E3.82.88.E3.82.8B.E6.93.8D.E4.BD.9C.E3.82.92.E3.83.86.E3.82.B9.E3.83.88.E3.81.99.E3.82.8B" name=".E3.82.AD.E3.83.BC.E3.83.9C.E3.83.BC.E3.83.89.E3.81.A8.E3.83.9E.E3.82.A6.E3.82.B9.E3.81.AB.E3.82.88.E3.82.8B.E6.93.8D.E4.BD.9C.E3.82.92.E3.83.86.E3.82.B9.E3.83.88.E3.81.99.E3.82.8B">キーボードとマウスによる操作をテストする</h4> +<p>キーボードまたはマウスによる操作は、Internet Explorer と Firefox のどちらでも可能です。サンプルの HTML バージョンのみが Internet Explorer 上でテストし、動作するように作られているので注意してください。サンプルの XHTML バージョンはそうではありません。 {{ 英語版章題("Testing with Firefox Accessibility Extension") }}</p> +<h4 id="Firefox_.E3.81.AE.E3.82.A2.E3.82.AF.E3.82.BB.E3.82.B7.E3.83.93.E3.83.AA.E3.83.86.E3.82.A3.E6.8B.A1.E5.BC.B5.E3.81.A7.E3.83.86.E3.82.B9.E3.83.88.E3.81.99.E3.82.8B" name="Firefox_.E3.81.AE.E3.82.A2.E3.82.AF.E3.82.BB.E3.82.B7.E3.83.93.E3.83.AA.E3.83.86.E3.82.A3.E6.8B.A1.E5.BC.B5.E3.81.A7.E3.83.86.E3.82.B9.E3.83.88.E3.81.99.E3.82.8B">Firefox のアクセシビリティ拡張でテストする</h4> +<p><a class="external" href="http://firefox.cita.uiuc.edu/index.php">Firefox Accessibility Extension</a> は ARIA role のアクセシビリティをテストする機能を持っています。 {{ 英語版章題("Testing with screen readers") }}</p> +<h4 id=".E3.82.B9.E3.82.AF.E3.83.AA.E3.83.BC.E3.83.B3.E3.83.AA.E3.83.BC.E3.83.80.E3.81.A7.E3.83.86.E3.82.B9.E3.83.88.E3.81.99.E3.82.8B" name=".E3.82.B9.E3.82.AF.E3.83.AA.E3.83.BC.E3.83.B3.E3.83.AA.E3.83.BC.E3.83.80.E3.81.A7.E3.83.86.E3.82.B9.E3.83.88.E3.81.99.E3.82.8B">スクリーンリーダでテストする</h4> +<p>スクリーンリーダのサポートは Firefox 1.5 以降でのみ利用可能です。以下のコンポーネントをインストールする必要があります:</p> +<ol> + <li>Firefox: <a class="external" href="http://www.mozilla.com/firefox/">Firefox</a> からダウンロードしてインストールしてください。</li> + <li>スクリーンリーダ: スクリーンリーダでテストするには <a class="external" href="http://www.gwmicro.com/">Window-Eyes</a> 5.5 以降が必要です。加えて、JAWS 7.x が ARIA の一部をサポートしています。また、Orca 2.20 以降が Firefox 3.0 のほとんどの ARIA ウィジェット型をサポートしています。</li> +</ol> +<p>{{ 英語版章題("Where can I find samples?") }}</p> +<h4 id=".E3.82.B5.E3.83.B3.E3.83.97.E3.83.AB.E3.81.AF.E3.81.A9.E3.81.93.E3.81.AB.E3.81.82.E3.82.8A.E3.81.BE.E3.81.99.E3.81.8B.3F" name=".E3.82.B5.E3.83.B3.E3.83.97.E3.83.AB.E3.81.AF.E3.81.A9.E3.81.93.E3.81.AB.E3.81.82.E3.82.8A.E3.81.BE.E3.81.99.E3.81.8B.3F">サンプルはどこにありますか?</h4> +<p>注意: 以下の例は、次のセクションの role/property にもあります。 {{ 英語版章題("Dojo Toolkit") }}</p> +<h5 id="Dojo_Toolkit" name="Dojo_Toolkit">Dojo Toolkit</h5> +<p><a class="external" href="http://www.dojotoolkit.org/">Dojo 1.0 widget toolkit</a> のすべての <a class="external" href="http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/">Dijit ウィジェット</a>コアは ARIA をサポートしています。スクリーンリーダをサポートする Dojo の例は、Firefox 2 または Firefox 3 で開かなくてはなりません。 {{ 英語版章題("University of Illinois") }}</p> +<h5 id=".E3.82.A4.E3.83.AA.E3.83.8E.E3.82.A4.E5.A4.A7.E5.AD.A6" name=".E3.82.A4.E3.83.AA.E3.83.8E.E3.82.A4.E5.A4.A7.E5.AD.A6">イリノイ大学</h5> +<p><a class="external" href="http://test.cita.uiuc.edu/aria/">イリノイ大学の ARIA テストスイート</a>は、スクリーンリーダのサポートに Firefox 3 が必要です。 {{ 英語版章題("Mozilla bare bones examples") }}</p> +<h5 id="Mozilla_.E3.83.99.E3.82.A2.E3.83.9C.E3.83.BC.E3.83.B3.E3.81.AE.E4.BE.8B" name="Mozilla_.E3.83.99.E3.82.A2.E3.83.9C.E3.83.BC.E3.83.B3.E3.81.AE.E4.BE.8B">Mozilla ベアボーンの例</h5> +<p>Mozilla.org の ARIA テストページは、ここから学ぶためのいくつかの例を提供しています。スクリーンリーダのサポートは Firefox 3 が必要です:</p> +<ol> + <li><a class="external" href="http://www.mozilla.org/access/dhtml/checkbox">Checkbox</a>, <a class="external" href="http://www.mozilla.org/access/dhtml/button">説明つき Button</a></li> + <li><a class="external" href="http://www.mozilla.org/access/dhtml/pretty-slider.htm">グラフィカルな slider</a>, <a class="external" href="http://www.mozilla.org/access/dhtml/simple-slider">簡単な slider</a>, <a class="external" href="http://www.mozilla.org/access/dhtml/progressbar">Progress bar</a></li> + <li><a class="external" href="http://www.mozilla.org/access/dhtml/alert">Alert</a></li> + <li><a class="external" href="http://www.mozilla.org/access/dhtml/spreadsheet">menubar 付きの Grid (spreadsheet)</a></li> + <li><a class="external" href="http://www.mozilla.org/access/dhtml/tabpanel">タブパネル</a></li> + <li><a class="external" href="http://www.mozilla.org/access/dhtml/tabpanel">Listbox</a></li> + <li><a class="external" href="http://www.mozilla.org/access/dhtml/tree">Tree ビュー</a>, <a class="external" href="http://www.weba11y.com/AjaxDemo/sample.html">Tree ビュー #2</a></li> +</ol> +<p>{{ 英語版章題("CLC World: live region examples") }}</p> +<h5 id="CLC_World:_live_region_.E3.81.AE.E4.BE.8B" name="CLC_World:_live_region_.E3.81.AE.E4.BE.8B">CLC World: live region の例</h5> +<p>現在の <a class="external" href="http://accessibleajax.clcworld.net/">live region の例</a> は Fire Vox 内で動作します。Fire Vox スクリーンリーダ拡張の実行は、Firefox のどのバージョンを使用しても問題ありません。 {{ 英語版章題("Supported roles") }}</p> +<h3 id=".E3.82.B5.E3.83.9D.E3.83.BC.E3.83.88.E3.81.95.E3.82.8C.E3.81.A6.E3.81.84.E3.82.8B_role" name=".E3.82.B5.E3.83.9D.E3.83.BC.E3.83.88.E3.81.95.E3.82.8C.E3.81.A6.E3.81.84.E3.82.8B_role">サポートされている role</h3> +<p>ここには、Firefox に対応した使用例のある role と 各 role に対応する property の表があります。一部の property は "universal properties" であり、すべての要素上で動作することに注意してください。詳しくは、対応する property のセクションをご覧ください。</p> +<p>他の方法で指示されていない限り、property はブーリアン値で <code>true</code> または <code>false</code> に対応します。ブーリアン値である場合は、値が設定されていない属性には <code>false</code> が設定されます。</p> +<p>ただし、<code>checked</code> および <code>selected</code>, <code>expanded</code> 属性は特別です。属性に <code>false</code> が提供されている場合は、ウィジェットが checkable/selectable/expandable であると指示され、<code>false</code> が無いものとは異なります。</p> +<p>また私たちは、<a href="ja/ARIA_to_API_mapping">これらの情報を Firefox がどのように Windows(MSAA) や Linux(ATK) 上のアクセシビリティ API を通して公開しているか</a>、技術の詳細を提供しています。</p> +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Role</th> + <th>サポートされている作者が定義した property †</th> + <th>自動的にサポートされる property</th> + <th>使用例</th> + <th>Firefox 1.5 対応</th> + <th>Firefox 2 対応</th> + <th><a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/">Firefox 3</a> テストビルド対応</th> + </tr> + <tr> + <td><code>alert</code></td> + <td> </td> + <td>子コンテンツまたは <code>title</code> 属性からの名前</td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/alert">Mozilla.org alert</a>,</td> + <td colspan="3">Window-Eyes 5.5 以降、ZoomText 9.1 以降、JAWS 7.1 以降</td> + </tr> + <tr> + <td><code>alertdialog</code></td> + <td> </td> + <td>子コンテンツまたは <code>title</code> 属性からの名前</td> + <td> </td> + <td>なし</td> + <td>Window-Eyes 5.5 以降、ZoomText 9.1 以降、JAWS 7.1 以降</td> + <td>Window-Eyes 5.5 以降、ZoomText 9.1 以降、JAWS 7.1 以降</td> + </tr> + <tr> + <td><code>application</code></td> + <td> </td> + <td> </td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/spreadsheet">Mozilla.org Grid (spreadsheet) と menubar</a></td> + <td colspan="2">Window-Eyes 5.5 以降</td> + <td>Window-Eyes 5.5 以降、Orca 2.20 以降</td> + </tr> + <tr> + <td><code>button</code></td> + <td> + <ul> + <li><code>disabled</code></li> + <li><code>pressed</code></li> + </ul> + </td> + <td>子コンテンツまたは <code>title</code> 属性からの名前</td> + <td><a class="external" href="http://www.weba11y.com/Examples/button.html">Weba11y button</a> <a class="external" href="http://www.mozilla.org/access/dhtml/button">説明付きの Mozilla.org button</a>, <a class="external" href="http://test.cita.uiuc.edu/aria/button">UIUC button</a></td> + <td colspan="2">Window-Eyes 5.5 以降、JAWS 8.0 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 8.0 以降、Orca 2.20 以降</td> + </tr> + <tr> + <td><code>checkbox</code></td> + <td> + <ul> + <li><code>checked</code></li> + <li><code>disabled</code></li> + <li><code>readonly</code></li> + <li><code>required</code></li> + <li><code>invalid</code></li> + </ul> + </td> + <td>子コンテンツまたは <code>title</code> 属性からの名前</td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/checkbox">Mozilla.org checkbox</a>, <a class="external" href="http://test.cita.uiuc.edu/aria/checkbox">UIUC checkbox</a></td> + <td colspan="2">Window-Eyes 5.5 以降、JAWS 7.0 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.0 以降、Orca 2.20 以降</td> + </tr> + <tr> + <td><code>columnheader</code></td> + <td> + <ul> + <li><code>disabled</code></li> + <li><code>selected=true|false</code> (<code>selected</code> 属性が無いときは選択できない状態を指示)</li> + <li><code>readonly</code></li> + </ul> + </td> + <td>子コンテンツまたは <code>title</code> 属性からの名前</td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/spreadsheet">Mozilla.org grid (spreadsheet) と menubar</a></td> + <td colspan="2">Window-Eyes 5.5 以降、JAWS 7.1 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.1 以降、Orca 2.20 以降</td> + </tr> + <tr> + <td><code>combobox</code></td> + <td> + <ul> + <li><code>disabled</code></li> + <li><code>readonly</code></li> + <li><code>expanded</code></li> + </ul> + </td> + <td><code>title</code> 属性からの名前</td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/combo">Mozilla.org combo box</a></td> + <td colspan="2">Window-Eyes 5.5 以降、JAWS 7.0 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.0 以降、Orca 2.20 以降</td> + </tr> + <tr> + <td><code>description</code></td> + <td> </td> + <td>子コンテンツまたは <code>title</code> 属性からの名前</td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/button">Mozilla.org button</a></td> + <td colspan="2">Window-Eyes 5.5 以降、JAWS 7.0 以降<br> + 要素上では、その要素のための記述と共に <code>aria-describedby</code> を使用する必要があります。</td> + <td>Window-Eyes 5.5 以降、JAWS 7.0 以降、Orca 2.20 以降</td> + </tr> + <tr> + <td><code>dialog</code></td> + <td> </td> + <td> </td> + <td><a class="external" href="http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/test_Dialog.html">Dojo dialog</a></td> + <td colspan="2"> </td> + <td>Orca 2.20 以降</td> + </tr> + <tr> + <td><code>directory</code></td> + <td> </td> + <td> </td> + <td> </td> + <td colspan="3">公開されているが、対応する特別な支援技術は無い</td> + </tr> + <tr> + <td><code>document</code></td> + <td> </td> + <td> </td> + <td> </td> + <td colspan="3">Window-Eyes 5.5 以降</td> + </tr> + <tr> + <td><code>grid</code></td> + <td> + <ul> + <li><code>disabled</code></li> + <li><code>readonly</code></li> + <li><code>multiselectable</code></li> + </ul> + </td> + <td><code>title</code> 属性からの名前</td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/spreadsheet">Mozilla.org grid (spreadsheet) と menubar</a>, <a class="external" href="http://test.cita.uiuc.edu/aria/grid">UIUC grid</a></td> + <td> + <ul> + <li>Window-Eyes 5.5 以降は完全対応</li> + <li>JAWS 7.1 以降は一部対応(JAWS は row/column ヘッダを読まないため)</li> + <li>まだ公開されていなかったため、Firefox 1.5 では <code>multiselectable</code> に未対応。</li> + </ul> + </td> + <td> + <ul> + <li>Window-Eyes 5.5 以降は完全対応</li> + <li>JAWS 7.1 以降は一部対応(row/column ヘッダを読まないため)</li> + <li><code>multiselectable</code> に対応している場合、検証データをテストする必要あり</li> + </ul> + </td> + <td> + <ul> + <li>Window-Eyes 5.5 以降は完全対応</li> + <li>Orca 2.20 以降は完全対応</li> + <li>JAWS 7.1 以降は一部対応(row/column ヘッダを読まないため)</li> + <li><code>multiselectable</code> に対応している場合、検証データをテストする必要あり</li> + </ul> + </td> + </tr> + <tr> + <td><code>gridcell</code></td> + <td> + <ul> + <li><code>disabled</code><code>selected=true|false</code> (<code>selected</code> 属性が無いときは選択できないない状態を指示)</li> + <li><code>readonly</code></li> + <li><code>invalid</code></li> + <li><code>required</code></li> + </ul> + </td> + <td>子コンテンツまたは <code>title</code> 属性からの名前</td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/spreadsheet">Mozilla.org grid (spreadsheet) と menubar</a>, <a class="external" href="http://test.cita.uiuc.edu/aria/grid">UIUC grid</a></td> + <td colspan="2"> + <ul> + <li>Window-Eyes 5.5 以降は完全対応</li> + <li>JAWS 7.1 以降は一部対応(各セルに関連する row ヘッダまたは column ヘッダセルを読まないため)</li> + </ul> + </td> + <td> + <ul> + <li>Window-Eyes 5.5 以降は完全対応</li> + <li>JAWS 7.1 以降は一部対応(各セルに関連する row ヘッダまたは column ヘッダセルを読まないため)</li> + <li>Orca 2.20 以降</li> + </ul> + </td> + </tr> + <tr> + <td><code>group</code></td> + <td> </td> + <td><code>title</code> 属性からの名前</td> + <td><a class="external" href="http://test.cita.uiuc.edu/aria/tree">UIUC tree</a>, <a class="external" href="http://www.mozilla.org/access/dhtml/progressbar">Mozilla.org progress bar</a></td> + <td colspan="2">Window-eyes 5.5 以降、JAWS 7.1 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.1 以降、Orca 2.20 以降</td> + </tr> + <tr> + <td><code>img</code></td> + <td> </td> + <td><code>title</code> 属性からの名前</td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/imagetiled">Mozilla.org 並べられた image</a></td> + <td>未対応</td> + <td>未対応</td> + <td>Orca 2.20 以降</td> + </tr> + <tr> + <td><code>label</code></td> + <td> </td> + <td>子コンテンツまたは <code>title</code> 属性からの名前</td> + <td> </td> + <td colspan="3">Window-Eyes 5.5 以降、JAWS 7.1 以降</td> + </tr> + <tr> + <td><code>link</code></td> + <td> </td> + <td>子コンテンツまたは <code>title</code> 属性からの名前、<code>linked</code>(常に true)</td> + <td><code>disabled</code></td> + <td>名前の処理が不正確</td> + <td>名前の処理が不正確</td> + <td>Window-Eyes 5.5 以降、JAWS 7.1 以降</td> + </tr> + <tr> + <td><code>list</code></td> + <td> + <ul> + <li><code>readonly</code></li> + <li><code>multiselectable</code></li> + </ul> + </td> + <td><code>title</code> 属性からの名前</td> + <td> </td> + <td colspan="3">Window-Eyes 5.5 以降、JAWS 7.1 以降</td> + </tr> + <tr> + <td><code>listbox</code></td> + <td> + <ul> + <li><code>disabled</code><code>readonly</code></li> + <li><code>multiselectable</code></li> + </ul> + </td> + <td><code>title</code> 属性からの名前</td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/listbox">Mozilla.org listbox</a></td> + <td>なし</td> + <td>Window-Eyes 5.5 以降、JAWS 7.1 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.1 以降、Orca 2.20 以降</td> + </tr> + <tr> + <td><code>listitem</code></td> + <td> + <ul> + <li><code>disabled</code><code>selected=true|false</code> (<code>selected</code> 属性が無いときは選択できない状態を指示)</li> + <li><code>checked=true|false</code> (<code>checked</code> 属性が無いときは <code>checkable</code> ではない状態を指示)</li> + </ul> + </td> + <td>子コンテンツまたは <code>title</code> 属性からの名前</td> + <td> </td> + <td colspan="2">Window-Eyes 5.5 以降、JAWS 7.1 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.1 以降、Orca 2.20 以降</td> + </tr> + <tr> + <td><code>log</code> (チャットログ、ゲームログ、エラーログなど。デフォルトで実況)</td> + <td> </td> + <td> </td> + <td><a class="external" href="http://accessibleajax.clcworld.net/ajax_chat/chat.htm">AJAX チャット</a></td> + <td colspan="3">公開されているが、現在は対応する特別な支援技術は無い</td> + </tr> + <tr> + <td><code>menu</code></td> + <td><code>disabled</code></td> + <td><code>title</code> 属性からの名前</td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/spreadsheet">Mozilla.org grid (spreadsheet) と menubar</a></td> + <td colspan="2">Window-eyes 5.5 以降、JAWS 7.1 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.1 以降、Orca 2.20 以降</td> + </tr> + <tr> + <td><code>menubar</code></td> + <td><code>disabled</code></td> + <td><code>title</code> 属性からの名前</td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/spreadsheet">Mozilla.org grid (spreadsheet) と menubar</a>, <a class="external" href="http://test.cita.uiuc.edu/aria/menubar">UIUC menubar</a></td> + <td colspan="2">Window-eyes 5.5 以降、JAWS 7.1 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.1 以降、Orca 2.20 以降</td> + </tr> + <tr> + <td><code>menuitem</code></td> + <td> + <ul> + <li><code>disabled</code></li> + <li><code>checked=true|false|mixed</code></li> + </ul> + </td> + <td>子コンテンツまたは <code>title</code> 属性からの名前</td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/spreadsheet">Mozilla.org grid (spreadsheet) と menubar</a>, <a class="external" href="http://test.cita.uiuc.edu/aria/menubar">UIUC menubar</a></td> + <td>Window-Eyes 5.5, JAWS 7.1 以降 (<code>checked=mixed</code> には未対応)</td> + <td>Window-Eyes 5.5, JAWS 7.1 以降 (<code>checked=mixed</code> に対応している場合、検証データをテストする必要あり)</td> + <td>Window-Eyes 5.5, Orca 2.20 以降、JAWS 7.1 以降 (<code>checked=mixed</code> に対応している場合、検証データをテストする必要あり)</td> + </tr> + <tr> + <td><code>menuitemcheckbox</code></td> + <td> + <ul> + <li><code>checked</code></li> + <li><code>disabled</code></li> + </ul> + </td> + <td><code>checkable</code>, 子コンテンツまたは <code>title</code> 属性からの名前</td> + <td> </td> + <td>なし</td> + <td>検証データをテストする必要あり</td> + <td>検証データをテストする必要あり</td> + </tr> + <tr> + <td><code>menuitemradio</code></td> + <td> + <ul> + <li><code>checked</code></li> + <li><code>disabled</code></li> + </ul> + </td> + <td><code>checkable</code>, 子コンテンツまたは <code>title</code> 属性からの名前</td> + <td> </td> + <td>検証データをテストする必要あり</td> + <td>検証データをテストする必要あり</td> + <td>検証データをテストする必要あり</td> + </tr> + <tr> + <td><code>option</code></td> + <td> + <ul> + <li><code>selected=true|false</code> (<code>selected</code> 属性が無いときは選択できない状態を指示)</li> + <li><code>checked=true|false</code> (<code>checked</code> 属性が無いときは <code>checkable</code> ではない状態を指示)</li> + <li><code>disabled</code></li> + </ul> + </td> + <td>子コンテンツまたは <code>title</code> 属性からの名前</td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/listbox">Mozilla.org listbox</a></td> + <td>なし</td> + <td>Window-Eyes 5.5 以降、JAWS 7.1 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.1 以降、Orca 2.20 以降</td> + </tr> + <tr> + <td><code>presentation</code></td> + <td> </td> + <td>これらの項目はアクセシビリティの階層から自動的に削除されます。table 上に置いたときは、table 以下のすべての子孫もまたアクセシビリティの階層から自動的に削除されます。</td> + <td> </td> + <td colspan="3">MSAA や ATK のようにアクセシビリティ API を使用する、DOM ベースでない支援技術すべて<br> + 例えば、Window-Eyes 5.5 以降、JAWS 7.0 以降、ZoomText 9.1 以降、Orca 2.20 以降で動作するが、Fire Vox では動作しない</td> + </tr> + <tr> + <td><code>progressbar</code></td> + <td> + <ul> + <li><code>disabled</code></li> + <li><code>valuenow="#"|"unknown"</code></li> + <li><code>valuemin="#"</code></li> + <li><code>valuemax="#"</code></li> + </ul> + </td> + <td><code>title</code> 属性からの名前</td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/progressbar">Mozilla.org progress bar</a></td> + <td colspan="2">Window-eyes 5.5 以降、JAWS 7.1 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.1 以降、Orca 2.20 以降</td> + </tr> + <tr> + <td><code>radio</code></td> + <td> + <ul> + <li><code>checked</code></li> + <li><code>disabled</code></li> + </ul> + </td> + <td>子コンテンツまたは <code>title</code> 属性からの名前</td> + <td><a class="external" href="http://david.atrc.utoronto.ca/aria/radios/posinset.xhtml">模擬 radio buttons ATRC radio buttons (ARIA の名前空間のみ)</a>, <a class="external" href="http://test.cita.uiuc.edu/aria/radio">UIUC radio buttons</a></td> + <td colspan="2">Window-eyes 5.5 以降、JAWS 7.1 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.1 以降、Orca 2.20 以降</td> + </tr> + <tr> + <td><code>radiogroup</code></td> + <td> + <ul> + <li><code>disabled</code></li> + <li><code>invalid</code></li> + <li><code>required</code></li> + </ul> + </td> + <td><code>title</code> 属性からの名前</td> + <td><a class="external" href="http://test.cita.uiuc.edu/aria/radio">UIUC radio buttons</a></td> + <td colspan="2">Window-eyes 5.5 以降、JAWS 7.1 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.1 以降、Orca 2.20 以降</td> + </tr> + <tr> + <td><code>region</code></td> + <td> </td> + <td> </td> + <td> </td> + <td colspan="3">公開されているが、対応する特別な支援技術は無い</td> + </tr> + <tr> + <td><code>row</code></td> + <td> + <ul> + <li><code>disabled</code></li> + <li><code>selected=true|false</code> (<code>selected</code> 属性が無いときは選択できない状態を指示)</li> + <li><code>checked=true|false|mixed</code> (<code>checked</code> 属性が無いときは <code>checkable</code> ではない状態を指示)</li> + <li><code>expanded=true|false</code> (<code>expanded</code> 属性が無いものは展開できない状態を指示)</li> + </ul> + </td> + <td>子コンテンツまたは <code>title</code> 属性からの名前</td> + <td> </td> + <td>なし</td> + <td>なし</td> + <td>Firefox 3 に向けて作業中</td> + </tr> + <tr> + <td><code>rowheader</code></td> + <td> + <ul> + <li><code>disabled</code></li> + <li><code>selected=true|false</code> (<code>selected</code> 属性が無いときは選択できない状態を指示)</li> + <li><code>readonly</code></li> + </ul> + </td> + <td>子コンテンツまたは <code>title</code> 属性からの名前</td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/spreadsheet">Mozilla.org grid (spreadsheet) と menubar</a></td> + <td colspan="2">Window-Eyes 5.5 以降、JAWS 7.1 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.1 以降、Orca 2.20 以降</td> + </tr> + <tr> + <td><code>separator</code></td> + <td> </td> + <td> </td> + <td> </td> + <td colspan="3">検証データをテストする必要あり</td> + </tr> + <tr> + <td><code>slider</code></td> + <td> + <ul> + <li><code>disabled</code></li> + <li><code>invalid</code></li> + <li><code>readonly</code></li> + <li><code>required</code></li> + <li><code>valuenow="#"</code></li> + <li><code>valuemin="#"</code></li> + <li><code>valuemax="#"</code></li> + </ul> + </td> + <td><code>title</code> 属性からの名前</td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/simple-slider">Mozilla.org 平坦な slider</a>, <a class="external" href="http://www.mozilla.org/access/dhtml/pretty-slider.htm">Mozilla.org グラフィカルな slider</a>, <a class="external" href="http://test.cita.uiuc.edu/aria/slider">UIUC slider</a></td> + <td colspan="2">Window-Eyes 5.5 以降、JAWS 7.1 以降 (JAWS 8.0 では矢印キーによる操作不可)</td> + <td>Window-Eyes 5.5 以降、Orca 2.20 以降、JAWS 7.1 以降 (JAWS 8.0 では矢印キーによる操作不可)</td> + </tr> + <tr> + <td><code>spinbutton</code></td> + <td> + <ul> + <li><code>disabled</code></li> + <li><code>invalid</code></li> + <li><code>readonly</code></li> + <li><code>required</code></li> + <li><code>valuenow="#"</code></li> + <li><code>valuemin="#"</code></li> + <li><code>valuemax="#"</code></li> + </ul> + </td> + <td><code>title</code> 属性からの名前</td> + <td><a class="external" href="http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/form/test_Spinner.html">Dojo spinner</a></td> + <td colspan="2"> </td> + <td>Orca 2.20 以降</td> + </tr> + <tr> + <td><code>tab</code></td> + <td><code>disabled</code></td> + <td>子コンテンツまたは <code>title</code> 属性からの名前</td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/tabpanel">Mozilla.org tab panel</a>, <a class="external" href="http://test.cita.uiuc.edu/aria/tabpanel">UIUC tab panel</a></td> + <td colspan="2">Window-Eyes 5.5 以降、JAWS 7.0 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.0 以降、Orca 2.21.5 以降</td> + </tr> + <tr> + <td><code>tablist</code></td> + <td> </td> + <td> </td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/tabpanel">Mozilla.org tab panel</a>, <a class="external" href="http://test.cita.uiuc.edu/aria/tabpanel">UIUC tab panel</a></td> + <td colspan="2">Window-Eyes 5.5 以降、JAWS 7.0 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.0 以降、Orca 2.21.5 以降</td> + </tr> + <tr> + <td><code>tabpanel</code></td> + <td> </td> + <td> </td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/tabpanel">Mozilla.org tab panel</a>, <a class="external" href="http://test.cita.uiuc.edu/aria/tabpanel">UIUC tab panel</a></td> + <td colspan="2">Window-Eyes 5.5 以降、JAWS 7.0 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.0 以降、Orca 2.21.5 以降</td> + </tr> + <tr> + <td><code>textbox</code></td> + <td> + <ul> + <li><code>disabled</code></li> + <li><code>readonly</code></li> + <li><code>multiline</code></li> + </ul> + </td> + <td><code>title</code> 属性からの名前</td> + <td><a class="external" href="http://test.cita.uiuc.edu/aria/textfield">UIUC textfield</a></td> + <td>未対応</td> + <td>未対応</td> + <td>Window-Eyes 5.5 以降、JAWS 7.0 以降</td> + </tr> + <tr> + <td><code>toolbar</code></td> + <td><code>disabled</code></td> + <td> </td> + <td> </td> + <td colspan="3">公開されているが、どの支援技術がこれに対応しているか、または必要としているかが不明確</td> + </tr> + <tr> + <td><code>tooltip</code></td> + <td> </td> + <td> </td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/new/tooltip.html">Mozilla.org tooltip</a></td> + <td> </td> + <td> </td> + <td> </td> + </tr> + <tr> + <td><code>tree</code></td> + <td> + <ul> + <li><code>disabled</code></li> + <li><code>multiselectable</code></li> + <li><code>readonly</code></li> + </ul> + </td> + <td><code>title</code> 属性からの名前</td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/tree">Mozilla.org tree</a>, <a class="external" href="http://test.cita.uiuc.edu/aria/tree">UIUC tree</a></td> + <td colspan="2">Windows-Eyes 5.5 以降、JAWS 7.0</td> + <td>Windows-Eyes 5.5 以降、JAWS 7.0, Orca 2.20 以降</td> + </tr> + <tr> + <td><code>treegrid</code></td> + <td> + <ul> + <li><code>disabled</code></li> + <li><code>multiselectable</code></li> + <li><code>readonly</code></li> + </ul> + </td> + <td><code>title</code> 属性からの名前</td> + <td> </td> + <td>なし</td> + <td>なし</td> + <td>Firefox で作業中のため未サポート</td> + </tr> + <tr> + <td><code>treeitem</code></td> + <td> + <ul> + <li><code>disabled</code></li> + <li><code>selected=true|false</code> (<code>selected</code> 属性が無いときは選択できない状態を指示)</li> + <li><code>checked=true|false|mixed</code> (<code>checked</code> 属性が無いときは <code>checkable</code> ではない状態を指示)</li> + <li><code>expanded=true|false</code> (<code>expanded</code> 属性が無いものは展開できない状態を指示)</li> + </ul> + </td> + <td>子コンテンツまたは <code>title</code> 属性からの名前</td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/tree">Mozilla.org tree</a>, <a class="external" href="http://test.cita.uiuc.edu/aria/tree">UIUC tree</a></td> + <td>Windows-Eyes 5.5 以降、JAWS 7.0 以降、<code>checked=mixed</code> には未対応</td> + <td>Windows-Eyes 5.5 以降、JAWS 7.0</td> + <td>Windows-Eyes 5.5 以降、JAWS 7.0, Orca 2.20 以降</td> + </tr> + </tbody> +</table> +<p>† 下記の表において、適用性の列が "すべての要素" と書かれているすべての要素が universal property を許容します。 {{ 英語版章題("Landmark Roles from XHTML role attribute module") }}</p> +<h4 id=".E4.BB.A3.E8.A1.A8.E7.9A.84.E3.81.AA_XHTML_.E3.81.AE_role_.E5.B1.9E.E6.80.A7.E3.83.A2.E3.82.B8.E3.83.A5.E3.83.BC.E3.83.AB" name=".E4.BB.A3.E8.A1.A8.E7.9A.84.E3.81.AA_XHTML_.E3.81.AE_role_.E5.B1.9E.E6.80.A7.E3.83.A2.E3.82.B8.E3.83.A5.E3.83.BC.E3.83.AB">代表的な XHTML の role 属性モジュール</h4> +<p><a class="external" href="http://www.w3.org/TR/xhtml-role/">XHTML の role 属性モジュール</a> は次の role を定義しています: <code>banner, contentinfo, definition, main, navigation, note, search, secondary, seealso</code></p> +<p>XHTML では、これらの代表的な role を "wairole:" プレフィックス無しで使用することができます (例: <code><div role="main"></code>)。理想的なスクリーンリーダーは、これらの role を用いてナビゲーション機構を提供するか、ユーザがメインコンテンツに入ると自動的にナビゲーションを開始します。スクリーン拡大鏡や携帯電話もまた、メインコンテンツから開始するか、特別なハイライトやナビゲーション機構を提供します。しかしながら、これらの role は MSAA 下の role を通じて公開されており、現在ある支援技術には特別なサポートが知られていません。 {{ 英語版章題("Supported properties") }}</p> +<h3 id=".E3.82.B5.E3.83.9D.E3.83.BC.E3.83.88.E3.81.95.E3.82.8C.E3.81.A6.E3.81.84.E3.82.8B_property" name=".E3.82.B5.E3.83.9D.E3.83.BC.E3.83.88.E3.81.95.E3.82.8C.E3.81.A6.E3.81.84.E3.82.8B_property">サポートされている property</h3> +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Property 名</th> + <th>適用性</th> + <th>使用例</th> + <th>Firefox 1.5 対応</th> + <th>Firefox 2 対応</th> + <th><a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/">Firefox 3</a> テストビルド対応</th> + </tr> + <tr> + <td><code>aria-activedescendant="{{ mediawiki.external('id') }}"</code></td> + <td>すべての要素</td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/listbox">Mozilla.org Listbox</a></td> + <td>無し</td> + <td>無し</td> + <td>Window-Eyes 5.5 以降、JAWS 7.0 以降、Orca 2.20 以降</td> + </tr> + <tr> + <td><code>aria-atomic="true"</code></td> + <td>すべての要素</td> + <td> + <ul> + <li><a class="external" href="http://accessibleajax.clcworld.net/simple/atomic_false.htm">aria-atomic="false"</a></li> + <li><a class="external" href="http://accessibleajax.clcworld.net/simple/atomic_true.htm">aria-atomic="true"</a></li> + <li><a class="external" href="http://accessibleajax.clcworld.net/ajax_chat/chat.htm">AJAX チャット</a></li> + <li><a class="external" href="http://accessibleajax.clcworld.net/form_hints/form_hints.htm">フォームのヒント</a></li> + </ul> + </td> + <td>Fire Vox 2.7 以降</td> + <td>Fire Vox 2.7 以降</td> + <td>Fire Vox 2.7 以降<br> + アクセシビリティ API を通じて公開されているが、一般的な目的の支援技術にはまだ使用されていない</td> + </tr> + <tr> + <td><code>aria-busy="true" or "false" or "error"</code></td> + <td>すべての要素</td> + <td> </td> + <td> </td> + <td>未実装</td> + <td>未実装</td> + </tr> + <tr> + <td><code>aria-channel="main" (default) or "notify"</code></td> + <td>すべての要素</td> + <td> </td> + <td>未実装</td> + <td>未実装</td> + <td>未実装</td> + </tr> + <tr> + <td><code>aria-checked="true"</code><br> + <code>aria-checked="false"</code> (チェック可能だがチェックされていない)</td> + <td>roles: checkbox, menuitem, menuitemcheckbox, menuitemradio, listitem, option, radio, treeitem</td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/checkbox">Mozilla.org checkbox</a>, + <p><a class="external" href="http://test.cita.uiuc.edu/aria/checkbox">UIUC checkbox</a></p> + </td> + <td>Window-Eyes 5.5 以降、JAWS 7.0 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.0 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.0 以降、Orca 2.20 以降</td> + </tr> + <tr> + <td><code>aria-checked="mixed"</code> (チェック可能だが未確定)</td> + <td>roles: checkbox, menuitem, treeitem</td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/checkbox">Mozilla.org checkbox</a></td> + <td>検証データをテストする必要あり</td> + <td>検証データをテストする必要あり</td> + <td>検証データをテストする必要あり</td> + </tr> + <tr> + <td><code>aria-controls=IDLIST</code></td> + <td>すべての要素</td> + <td> + <ul> + <li><a class="external" href="http://accessibleajax.clcworld.net/simple/controls.htm">aria-controls=IDLIST</a></li> + <li><a class="external" href="http://accessibleajax.clcworld.net/advanced/live_controls-and-politeness.htm">controls と politeness</a></li> + </ul> + </td> + <td>Fire Vox 2.7 以降<br> + アクセシビリティ API を通じて公開されているが、一般的な目的の支援技術にはまだ使用されていない</td> + <td>Fire Vox 2.7 以降<br> + アクセシビリティ API を通じて公開されているが、一般的な目的の支援技術にはまだ使用されていない</td> + <td>Fire Vox 2.7 以降<br> + アクセシビリティ API を通じて公開されているが、一般的な目的の支援技術にはまだ使用されていない</td> + </tr> + <tr> + <td><code>aria-datatype="xsd:DATATYPE"</code></td> + <td>すべての要素</td> + <td> </td> + <td>無し</td> + <td>無し</td> + <td>公開されているが、対応する支援技術は無い</td> + </tr> + <tr> + <td><code>aria-describedby=IDLIST</code></td> + <td>すべての要素</td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/button">Mozilla.org button with aria-describedby</a> + <p><a class="external" href="http://accessibleajax.clcworld.net/simple/describedby.htm">Live region with aria-describedby</a></p> + </td> + <td>Window-Eyes 5.5 以降</td> + <td>Window-Eyes 5.5 以降</td> + <td>Window-Eyes 5.5 以降、Orca 2.20 以降</td> + </tr> + <tr> + <td><code>aria-disabled="true"</code></td> + <td>roles: button, checkbox, columnheader, combobox, grid, gridcell, link, listbox, menu, menubar, menuitem, menuitemcheckbox, menuitemradio, option, progressbar, radio, radiogroup, row, rowheader, slider, spinbutton, tab, textbox, toolbar, tree, treegrid, treeitem</td> + <td> </td> + <td>Window-Eyes 5.5 以降、JAWS 7.0 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.0 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.0 以降、Orca 2.20 以降 (span への参照点なし)</td> + </tr> + <tr> + <td><code>aria-dropeffect="copy" または "move", "reference", "none"</code></td> + <td>すべての要素</td> + <td> </td> + <td>未実装</td> + <td>未実装</td> + <td>未実装</td> + </tr> + <tr> + <td><code>aria-expanded="true"</code></td> + <td>roles: treeitem, region, (combobox?)</td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/tree">Mozilla.org tree</a>, + <p><a class="external" href="http://test.cita.uiuc.edu/aria/tree">UIUC tree</a></p> + </td> + <td> </td> + <td> </td> + <td>Orca 2.20 以降</td> + </tr> + <tr> + <td><code>aria-flowto=IDLIST</code></td> + <td>すべての要素</td> + <td> </td> + <td>公開されているが、対応する支援技術は無い</td> + <td>公開されているが、対応する支援技術は無い</td> + <td>公開されているが、対応する支援技術は無い</td> + </tr> + <tr> + <td><code>aria-grab= "true" または "false", "supported"</code></td> + <td>すべての要素</td> + <td> </td> + <td>未実装</td> + <td>未実装</td> + <td>未実装</td> + </tr> + <tr> + <td><code>aria-haspopup="true"</code></td> + <td>すべての要素</td> + <td> </td> + <td>Window-Eyes 5.5 以降、JAWS 7.0 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.0 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.0 以降、Orca 2.20 以降</td> + </tr> + <tr> + <td><code>aria-hidden="true"</code></td> + <td>すべての要素</td> + <td> </td> + <td>要素のスタイルに display: none がある場合に動作</td> + <td>要素のスタイルに display: none がある場合に動作</td> + <td>要素のスタイルに display: none がある場合に動作</td> + </tr> + <tr> + <td><code>aria-invalid="true"</code></td> + <td>すべての要素</td> + <td><a class="external" href="http://david.atrc.utoronto.ca/aria/errorAlert.xhtml">ATRC alert</a>, + <p><a class="external" href="http://www.mozilla.org/access/dhtml/checkbox">Mozilla.org checkbox</a></p> + </td> + <td>Window-Eyes 5.5 以降</td> + <td>Window-Eyes 5.5 以降</td> + <td>Window-Eyes 5.5 以降</td> + </tr> + <tr> + <td><code>aria-labelledby="{{ mediawiki.external('IDLIST') }}"</code></td> + <td>すべての要素</td> + <td><a class="external" href="http://accessibleajax.clcworld.net/simple/labelledby.htm">aria-labelledby=IDLIST</a></td> + <td>Window-Eyes 5.5 以降、JAWS 7.0 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.0 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.0 以降、Orca 2.20 以降</td> + </tr> + <tr> + <td><code>aria-level=POSITIVE_NUMBER</code></td> + <td>すべての要素、特に treeitem 上で有用</td> + <td> </td> + <td>無し</td> + <td>無し</td> + <td>ツリービューでのみ動作、Window-Eyes 5.5 以降および JAWS 7.0 以降</td> + </tr> + <tr> + <td><code>aria-live=POLITENESS</code></td> + <td>すべての要素</td> + <td> + <ul> + <li><a class="external" href="http://accessibleajax.clcworld.net/simple/live_off.htm">aria-live="off"</a></li> + <li><a class="external" href="http://accessibleajax.clcworld.net/simple/live_polite.htm">aria-live="polite"</a></li> + <li><a class="external" href="http://accessibleajax.clcworld.net/simple/live_assertive.htm">aria-live="assertive"</a></li> + <li><a class="external" href="http://accessibleajax.clcworld.net/simple/live_rude.htm">aria-live="rude"</a></li> + <li><a class="external" href="http://accessibleajax.clcworld.net/advanced/live_multiple-regions.htm">複数の live region</a></li> + <li><a class="external" href="http://accessibleajax.clcworld.net/advanced/live_nested-regions.htm">入れ子状の live regions</a></li> + <li><a class="external" href="http://accessibleajax.clcworld.net/advanced/live_controls-and-politeness.htm">controls と politeness</a></li> + <li><a class="external" href="http://accessibleajax.clcworld.net/form_hints/form_hints.htm">フォームのヒント</a></li> + <li><a class="external" href="http://accessibleajax.clcworld.net/ajax_chat/chat.htm">AJAX チャット</a></li> + <li><a class="external" href="http://accessibleajax.clcworld.net/scoreboard/scoreboard.htm">Scoreboard</a></li> + </ul> + </td> + <td>Fire Vox 2.7 以降</td> + <td>Fire Vox 2.7 以降</td> + <td>Fire Vox 2.7 以降<br> + アクセシビリティ API を通じて公開されているが、一般的な目的の支援技術にはまだ使用されていない</td> + </tr> + <tr> + <td><code>aria-multiselectable="true"</code></td> + <td>roles: grid, list, tree</td> + <td><a class="external" href="http://test.cita.uiuc.edu/aria/grid/grid.html">UIUC grid</a></td> + <td>未対応</td> + <td>未対応</td> + <td>検証データをテストする必要あり</td> + </tr> + <tr> + <td><code>aria-owns</code></td> + <td>すべての要素</td> + <td> </td> + <td>無し</td> + <td>無し</td> + <td>無し</td> + </tr> + <tr> + <td><code>aria-pressed="true"</code></td> + <td>roles: button</td> + <td><a class="external" href="http://test.cita.uiuc.edu/aria/button">UIUC button</a></td> + <td>検証データをテストする必要あり</td> + <td>検証データをテストする必要あり</td> + <td>Orca 2.20 以降</td> + </tr> + <tr> + <td><code>aria-posinset=POSITIVE_NUMBER</code> (treeitem 上の場合、aria-setsize および aria-level と共に使用)</td> + <td>すべての要素、特に option, listitem, treeitem 上で有用</td> + <td><a class="external" href="http://david.atrc.utoronto.ca/aria/radios/posinset.xhtml">模擬 radio buttons (名前空間付き/xhtml/FF2 のみ)</a></td> + <td>無し</td> + <td>無し</td> + <td>Window-Eyes 5.5 以降および JAWS 7.0 以降、Orca 2.20 以降において、option および listitem, treeitem のみ動作</td> + </tr> + <tr> + <td><code>aria-readonly="true"</code></td> + <td>roles: checkbox, columnheader grid, gridcell, list, rowheader, spinbutton, textarea, textfield</td> + <td> </td> + <td>Window-Eyes 5.5 以降、JAWS 7.0 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.0 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.0 以降、Orca 2.20 以降</td> + </tr> + <tr> + <td><code>aria-relevant=RELEVANCE_LIST</code></td> + <td>すべての要素</td> + <td> + <ul> + <li><a class="external" href="http://accessibleajax.clcworld.net/simple/relevant_additions.htm">aria-relevant="additions"</a></li> + <li><a class="external" href="http://accessibleajax.clcworld.net/simple/relevant_removals.htm">aria-relevant="removals"</a></li> + <li><a class="external" href="http://accessibleajax.clcworld.net/simple/relevant_text.htm">aria-relevant="text"</a></li> + <li><a class="external" href="http://accessibleajax.clcworld.net/simple/relevant_all.htm">aria-relevant="all"</a></li> + </ul> + </td> + <td>Fire Vox 2.7 以降</td> + <td>Fire Vox 2.7 以降</td> + <td>Fire Vox 2.7 以降<br> + アクセシビリティ API を通じて公開されているが、一般的な目的の支援技術にはまだ使用されていない</td> + </tr> + <tr> + <td><code>role="{{ mediawiki.external('rolename') }}"</code></td> + <td>すべての要素</td> + <td>上記の role 表をご覧ください</td> + <td>上記の role 表をご覧ください</td> + <td>上記の role 表をご覧ください</td> + <td>上記の role 表をご覧ください</td> + </tr> + <tr> + <td><code>aria-required="true"</code></td> + <td>すべての要素</td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/checkbox">Mozilla.org checkbox</a></td> + <td>Window-Eyes 5.5 以降</td> + <td>Window-Eyes 5.5 以降</td> + <td>Window-Eyes 5.5 以降</td> + </tr> + <tr> + <td><code>selected="true"</code><br> + <code>selected="false"</code> (選択可能だが、選択されていない)</td> + <td>roles: columnheader, gridcell, listitem, option, rowheader</td> + <td><a class="external" href="http://test.cita.uiuc.edu/aria/grid/grid.html">UIUC grid</a></td> + <td>検証データをテストする必要あり</td> + <td>検証データをテストする必要あり</td> + <td>検証データをテストする必要あり</td> + </tr> + <tr> + <td><code>aria-setsize=POSITIVE_NUMBER</code> (treeitem 上の場合、aria-setsize および aria-level と共に使用)</td> + <td>すべての要素、特に option, listitem, treeitem 上で有用</td> + <td><a class="external" href="http://david.atrc.utoronto.ca/aria/radios/posinset.xhtml">模擬 radio buttons (名前空間付き/xhtml/FF2 のみ)</a></td> + <td>無し</td> + <td>無し</td> + <td>Window-Eyes 5.5 以降および JAWS 7.0 以降、Orca 2.20 以降において、option および listitem, treeitem のみ動作</td> + </tr> + <tr> + <td><code>aria-sort=SORT_TYPE</code></td> + <td>すべての要素</td> + <td> </td> + <td>無し</td> + <td>無し</td> + <td>アクセシビリティ API を通して公開されているが、一般的な目的の支援技術にはまだ使用されていない</td> + </tr> + <tr> + <td><code>tabindex</code></td> + <td>すべての HTML 要素</td> + <td> </td> + <td>すべての支援技術、同様に IE 5 以降も対応</td> + <td>すべての支援技術、同様に IE 5 以降も対応</td> + <td>すべての支援技術、同様に IE 5 以降も対応</td> + </tr> + <tr> + <td><code>valuenow="#"</code><br> + <code>valuemin="#"</code><br> + <code>valuemax="#"</code></td> + <td>roles: progressbar, slider, spinbutton</td> + <td><a class="external" href="http://www.mozilla.org/access/dhtml/simple-slider">Mozilla.org 平坦な slider</a> <a class="external" href="http://www.mozilla.org/access/dhtml/pretty-slider.htm">Mozilla.org グラフィカルな slider</a> <a class="external" href="http://www.mozilla.org/access/dhtml/progressbar">Mozilla.org plain progress bar</a></td> + <td>Window-Eyes 5.5 以降、JAWS 7.0 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.0 以降</td> + <td>Window-Eyes 5.5 以降、JAWS 7.0 以降、Orca 2.20 以降</td> + </tr> + <tr> + <td><code>valuenow の設定なし (値が未確定)</code></td> + <td>roles: progressbar</td> + <td> </td> + <td>検証データをテストする必要あり</td> + <td>検証データをテストする必要あり</td> + <td>検証データをテストする必要あり</td> + </tr> + </tbody> +</table> +<p>{{ 英語版章題("Live regions") }}</p> +<h3 id="Live_regions" name="Live_regions">Live regions</h3> +<p>一部のウェブページには、ユーザのアクションや現実世界のイベントによって更新することができる Live region(動的更新が可能な領域) があります。ユーザのアクションによる変更の例は、<a class="external" href="http://developer.mozilla.org/ja/docs/Special:Preferences">この wiki のオプションページ</a>です。現実世界のイベントによる変更の例には、<a class="external" href="http://ircatwork.com/">チャット領域</a> や <a class="external" href="http://cbs.sportsline.com/nba/scoreboard">試合状況のライブ更新</a>, <a class="external" href="http://finance.yahoo.com">金融情報のライブ更新</a> があります。</p> +<p>今のところ、スクリーンリーダの Live region のためのアクセシビリティには問題があります。スクリーンリーダがページ上のすべての変更を逐次読み上げてしまうと、ユーザにとって迷惑になります。もし、スクリーンリーダがそれらを読み上げなければ、ユーザは極めて重要な情報を失うことになります。</p> +<p>解決策は ARIA を通して開発されており、ウェブページの作者がそこにある Live region が何かを指定し、また Live region についての追加の役立つ情報を指定することができます。これは、スクリーンリーダが何をいつ読み上げればよいかを決められるようにします。</p> +<p>これらの ARIA プロパティには、aria-live および aria-atomic, aria-relevant, aria-controls, aria-labelledby, aria-describedby があります。現在のサポートは、標準仕様の執筆活動を前進させ、ウェブ開発者コミュニティに対して WAI-ARIA を採用する利点を実証し、またスクリーンリーダ開発者コミュニティがエンドユーザに WAI-ARIA の 動作を体験できることを示すため、<a class="external" href="http://www.firevox.clcworld.net/">Fire Vox スクリーン読み上げ拡張機能</a>で開発されています。</p> +<p>さらに詳しい情報:</p> +<ul> + <li>Live region マークアップの開発状況の完全なリポートは、<a href="ja/AJAX/WAI_ARIA_Live_Regions">AJAX:WAI_ARIA_Live_Regions</a> をご覧ください。ここでは、Fire Vox で動作するテストケースへのリンクも提供しています。</li> + <li><a class="external" href="http://accessibleajax.clcworld.net/">テストケースの簡単なものと詳細なもの</a> は、Fire Vox 拡張の開発者である Charles Chen 氏によって提供されています。これらの例はすべて、Fire Vox で動作します。</li> + <li>その他のマークアップの記述は、Gez Lemon 氏による Juicy Studio の <a class="external" href="http://juicystudio.com/article/wai-aria-live-regions.php">ARIA live region についての記事</a>にあります。</li> +</ul> +<p>Firefox 3 の登場までに、Live region がスクリーンリーダのすべての目的に対応することは期待されていません。 {{ 英語版章題("Standards development for ARIA") }}</p> +<h3 id="ARIA_.E3.81.AE.E3.81.9F.E3.82.81.E3.81.AE.E6.A8.99.E6.BA.96.E9.96.8B.E7.99.BA" name="ARIA_.E3.81.AE.E3.81.9F.E3.82.81.E3.81.AE.E6.A8.99.E6.BA.96.E9.96.8B.E7.99.BA">ARIA のための標準開発</h3> +<p><a class="external" href="http://www.w3.org">W3C</a> の <a class="external" href="http://www.w3.org/WAI/">Web Accessibility Initiative</a> の中身は <a class="external" href="http://www.w3.org/WAI/PF/">Protocols and Formats Working Group (PFWG)</a> です。このグループは、<a class="external" href="http://www.w3.org/WAI/PF/#Roadmap">Dynamic Web Content Accessibility Work roadmap</a> と呼ばれるものに大きく焦点を当てており、すべての重要な格差を埋める長期的な努力と同時に、基本的な role および properties を定義する短期間の努力をしています。 {{ 英語版章題("Open Bugs in Firefox") }}</p> +<h3 id="Firefox_.E3.81.AE.E5.85.AC.E9.96.8B.E3.83.90.E3.82.B0" name="Firefox_.E3.81.AE.E5.85.AC.E9.96.8B.E3.83.90.E3.82.B0">Firefox の公開バグ</h3> +<p>完全な <a class="link-https" href="https://bugzilla.mozilla.org/showdependencytree.cgi?id=343213&hide_resolved=1">Firefox の ARIA バグ一覧</a> では、Firefox の ARIA 対応の進捗を追跡することができます。 {{ 英語版章題("Future of ARIA") }}</p> +<h3 id=".E5.B0.86.E6.9D.A5.E3.81.AE_ARIA" name=".E5.B0.86.E6.9D.A5.E3.81.AE_ARIA">将来の ARIA</h3> +<p>追加の ARIA サポートは将来のリリースで計画されています。この作業は W3C PF グループの安定した標準から得ることに依存しています。これらの変更には、作者が既存の role を継承して新しい role を定義したり、動作を記述したり、要素間の関係を新たに指定したり、またブラウザと Web ページの間でのキーボード・アクセラレータの今日のような衝突を避けるセマンティック・アクセスキーのサポートが含まれます。 {{ 英語版章題("ARIA IRC channel and mailing list") }}</p> +<h3 id="ARIA_IRC_.E3.83.81.E3.83.A3.E3.83.B3.E3.83.8D.E3.83.AB.E3.81.A8.E3.83.A1.E3.83.BC.E3.83.AA.E3.83.B3.E3.82.B0.E3.83.AA.E3.82.B9.E3.83.88" name="ARIA_IRC_.E3.83.81.E3.83.A3.E3.83.B3.E3.83.8D.E3.83.AB.E3.81.A8.E3.83.A1.E3.83.BC.E3.83.AA.E3.83.B3.E3.82.B0.E3.83.AA.E3.82.B9.E3.83.88">ARIA IRC チャンネルとメーリングリスト</h3> +<p>WAI-ARIA について公共の場で討議するには #wai-aria チャンネル (irc.w3.org:6665) に参加してください。メンバーは内部ドラフト案を #pf で審議してください。</p> +<p>公共の討議をするメーリングリストは wai-xtech です。wai-xtech に参加したい方は PFWG 議長 <a class="link-mailto" href="mailto:(wai-pf-call@w3.org)" rel="freelink">(wai-pf-call@w3.org)</a> に購読希望のメールを出してください。</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/ARIA/Accessible_Rich_Internet_Applications", "fr": "fr/ARIA/Applications_riches_Internet_accessibles" } ) }}</p> diff --git a/files/ja/conflicting/web/api/canvas_api/tutorial/index.html b/files/ja/conflicting/web/api/canvas_api/tutorial/index.html new file mode 100644 index 0000000000..b84af866ef --- /dev/null +++ b/files/ja/conflicting/web/api/canvas_api/tutorial/index.html @@ -0,0 +1,60 @@ +--- +title: canvas チュートリアル +slug: Web/Guide/HTML/Canvas_tutorial +tags: + - Canvas + - Graphics + - Guide + - HTML + - HTML5 + - Intermediate + - Web +translation_of: Web/API/Canvas_API/Tutorial +--- +<div>{{CanvasSidebar}}</div> + +<div><a href="/ja/docs/HTML/Canvas" title="HTML/Canvas"><img alt="" src="https://mdn.mozillademos.org/files/257/Canvas_tut_examples.jpg" style="float: right; height: 450px; width: 200px;"></a></div> + +<div class="summary"> +<p><a href="/ja/docs/Web/HTML/Element/canvas" title="HTML/Canvas"><strong><code><canvas></code></strong></a> 要素は、スクリプト (一般的に <a href="/ja/docs/Glossary/JavaScript" title="JavaScript">JavaScript</a>) を使って図形を描くために使われる新しい <a href="/ja/docs/Web/HTML" title="HTML">HTML</a> 要素です。例えば、グラフを描く、写真を合成する、または簡単な (または<a href="/ja/docs/Web/API/Canvas_API/A_basic_ray-caster" title="A_Basic_RayCaster">あまり簡単ではない</a>) アニメーションに使うことができます。このページの画像は後でこのチュートリアルの中でみる <a href="/ja/docs/Web/HTML/Element/canvas" title="HTML/Canvas"><strong><code><canvas></code></strong></a> を実際に使った例です。</p> +</div> + +<p><span class="seoSummary">このチュートリアルでは、2D グラフィックスを描画するために <code><canvas></code> 要素を使用する方法を、基礎から説明します。提供する例は、<code><canvas></code> で出来ることの、いくつかの明確なアイデアと、それをあなた自身のコンテンツで作成開始できるようなコードスニペットを提供します。</span></p> + +<p><code><canvas></code> は Apple によって OS X の Dashboard のために WebKit へ初めて導入され、後にブラウザーに実装されました。現在は、あらゆる主要ブラウザーがサポートしています。</p> + +<h2 id="Before_you_start" name="Before_you_start">始める前に</h2> + +<p><code><canvas></code> を使うことはそれほど難しくはありませんが、<a href="/ja/docs/Web/HTML">HTML</a> と <a href="/ja/docs/Web/JavaScript">JavaScript</a> の基本的な理解が必要です。一部の古いブラウザーは <code><canvas></code> 要素をサポートしていませんが、最近のバージョンの主要ブラウザーはすべてサポートしています。canvas のデフォルトのサイズは、300 px × 150 px (幅 × 高さ) です。しかし、HTML の <code>height</code> および <code>width</code> プロパティを使用して、独自のサイズを定義することができます。canvas にグラフィックスを描画するためには、JavaScript コンテキストオブジェクトを使用します。このオブジェクトは、グラフィックスをオンザフライで生成します。</p> + +<h2 id="In_this_tutorial" name="In_this_tutorial">チュートリアル</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Basic_usage" title="HTML/Canvas/Tutorial/Basic_usage">基本的な使い方</a></li> + <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes" title="HTML/Canvas/Tutorial/Drawing_shapes">図形を描く</a></li> + <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors" title="HTML/Canvas/Tutorial/Applying_styles_and_colors">スタイルと色を適用する</a></li> + <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Drawing_text">文字の描画</a></li> + <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Using_images" title="HTML/Canvas/Tutorial/Using_images">画像を使う</a></li> + <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Transformations" title="HTML/Canvas/Tutorial/Transformations">変形</a></li> + <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Compositing" title="HTML/Canvas/Tutorial/Compositing">合成とクリッピング</a></li> + <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Basic_animations" title="HTML/Canvas/Tutorial/Basic_animations">基本的なアニメーション</a></li> + <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Advanced_animations">高度なアニメーション</a></li> + <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">ピクセル操作</a></li> + <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">ヒット領域とアクセシビリティ</a></li> + <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas" title="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML/Canvas/Tutorial/Optimizing_canvas">canvas を最適化する</a></li> + <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Finale">最後に</a></li> +</ul> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Canvas_API" title="HTML/Canvas">Canvas トピックのページ</a></li> + <li><a href="http://visitmix.com/labs/ai2canvas/" title="http://visitmix.com/labs/ai2canvas/">Adobe Illustrator to Canvas plug-in</a></li> + <li><a href="http://www.html5canvastutorials.com/" title="http://www.html5canvastutorials.com/">HTML5CanvasTutorials</a></li> +</ul> + +<h2 id="A_note_to_contributors" name="A_note_to_contributors">貢献者への注記</h2> + +<p>2013 年 6 月 17 日の週に発生した不運な技術的エラーにより、すべての過去の貢献者の属性を含む、このチュートリアルの履歴情報が失われました。この問題についておわびするとともに、この不運な事故を容赦願います。</p> + +<div>{{Next("Web/API/Canvas_API/Tutorial/Basic_usage")}}</div> diff --git a/files/ja/conflicting/web/api/canvas_api/tutorial_3cd5468edc15a1ef1ddc0d2b17e1fa5d/index.html b/files/ja/conflicting/web/api/canvas_api/tutorial_3cd5468edc15a1ef1ddc0d2b17e1fa5d/index.html new file mode 100644 index 0000000000..be09a119f7 --- /dev/null +++ b/files/ja/conflicting/web/api/canvas_api/tutorial_3cd5468edc15a1ef1ddc0d2b17e1fa5d/index.html @@ -0,0 +1,213 @@ +--- +title: canvas に絵を描く +slug: Web/API/Canvas_API/Drawing_graphics_with_canvas +tags: + - HTML + - HTML5 + - 'HTML:Canvas' +translation_of: Web/API/Canvas_API/Tutorial +translation_of_original: Web/API/Canvas_API/Drawing_graphics_with_canvas +--- +<div class="note"> +<p>このページには、一部古い内容が含まれています。</p> +</div> + +<h2 id="Introduction" name="Introduction">イントロダクション</h2> + +<p><a href="ja/Firefox_1.5">Firefox 1.5</a> より、 Firefox はプログラム可能な画像のための新しい HTML 要素を含みます。<code><canvas></code> は <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas">WHATWG の canvas の仕様</a>を基にしています。WhatWG canvas 仕様自体は Safari で実装された Apple の <code><canvas></code> を基にしています。クライアント上でグラフ、UI 要素、および他のカスタムグラフィックスの描画に使用することができます。</p> + +<p><code><canvas></code> は 1 つ以上の<em>描画コンテクスト</em> を公開した固定サイズの描画表面を作ります。現在は 2 次元描画コンテクストのみが実装されています。 3D グラフィックスの描画には、 <a href="/ja/docs/WebGL" title="https://developer.mozilla.org/en/WebGL">WebGL レンダリングコンテクスト</a>を用いると良いでしょう。</p> + +<h2 id="The_2D_Rendering_Context" name="The_2D_Rendering_Context">2 次元描画コンテクスト</h2> + +<h3 id="A_Simple_Example" name="A_Simple_Example">初歩的な例</h3> + +<p>始めに、2 つの交差した長方形を描く簡単な例を見てみましょう。片方の長方形は透明度を持っています。</p> + +<pre class="brush: js">function draw() { + var myCanvas = document.getElementById('canvas'); + var ctx = myCanvas.getContext('2d'); + + ctx.fillStyle = "rgb(200,0,0)"; + ctx.fillRect (10, 10, 55, 50); + + ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; + ctx.fillRect (30, 30, 55, 50); +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="120" height="120"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<div>{{EmbedLiveSample('A_Simple_Example','150','150','/@api/deki/files/602/=Canvas_ex1.png')}}</div> + +<p><code>draw</code> 関数は、まず <code>canvas</code> 要素を取得し、次にその <code>canvas</code> 要素 の 2 次元レンダリングコンテクストを取得しています。 <code>ctx</code> オブジェクトは canvas に実際に描画するのに使うことができます。例では CSS color 仕様による 2 つの異なる色を <code>fillStyle</code> プロパティで設定し、<code>fillRect</code> メソッドにより 2 つの長方形を単純に塗りつぶしています。 2 つ目の <code>fillStyle</code> は色と一緒に透明度を定義するために <code>rgba()</code> を使っています。</p> + +<p><code>fillRect()</code> は矩形状の塗りつぶし、<code>strokeRect()</code> は矩形状の輪郭線の描画、 <code>clearRect()</code> はコンテクストの指定部分の消去に用います。より複雑な形を描画するにはパスを用います。</p> + +<h3 id="Using_Paths" name="Using_Paths">パスの利用</h3> + +<p><code>beginPath</code> メソッドは新しいパスの作成を開始します。そして <code>moveTo</code>、<code>lineTo</code>、<code>arcTo</code>、<code>arc</code> などのメソッドはパスにセグメントを加えるのに使われます。パスは <code>closePath</code> メソッドによって閉じることが可能です。パスの作成後、<code>fill</code> か <code>stroke</code> を使って <code>canvas</code> コンテクストにパスを描画します。</p> + +<pre class="brush: js">function draw() { + var myCanvas = document.getElementById('canvas'); + var ctx = myCanvas.getContext('2d'); + + ctx.fillStyle = "red"; + + ctx.beginPath(); + ctx.moveTo(30, 30); + ctx.lineTo(150, 150); + + // was: ctx.quadraticCurveTo(60, 70, 70, 150); これは間違い + + ctx.bezierCurveTo(60, 70, 60, 70, 70, 150); // <- これが正しい書式 -> + + ctx.lineTo(30, 30); + + ctx.fill(); +}</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="160" height="160"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<div>{{EmbedLiveSample('Using_Paths','190','190','/@api/deki/files/603/=Canvas_ex2.png')}}</div> + +<p><code>fill()</code> か <code>stroke()</code> を呼ぶと現在のパスが使われます。 もう一度塗りつぶしか輪郭線を描くにはパスを再作成しなくてはなりません。</p> + +<h3 id="Graphics_State" name="Graphics_State">レンダリングコンテクストの状態</h3> + +<p><code>fillStyle</code> 、<code>strokeStyle</code> 、<code>lineWidth</code> 、 <code>lineJoin</code> のようなコンテクストの属性は、現在のレンダリングコンテクストの状態の一部です。 コンテクストは現在の状態を状態スタックに格納したり取り出したりするために <code>save()</code> と <code>restore()</code> という 2 つのメソッドを提供してます。</p> + +<h3 id="A_More_Complicated_Example" name="A_More_Complicated_Example">より複雑な例</h3> + +<p>パス、状態、変換行列を用いた少し複雑な例を紹介します。 <code>translate()</code> 、<code>scale()</code> 、<code>rotate()</code> のコンテクストメソッドは全て現在の行列を変換します。 全ての描画された点は最初にこの行列により変換されます。</p> + +<pre class="brush: js">function drawBowtie(ctx, fillStyle) { + + ctx.fillStyle = "rgba(200,200,200,0.3)"; + ctx.fillRect(-30, -30, 60, 60); + + ctx.fillStyle = fillStyle; + ctx.globalAlpha = 1.0; + ctx.beginPath(); + ctx.moveTo(25, 25); + ctx.lineTo(-25, -25); + ctx.lineTo(25, -25); + ctx.lineTo(-25, 25); + ctx.closePath(); + ctx.fill(); +} + +function dot(ctx) { + ctx.save(); + ctx.fillStyle = "black"; + ctx.fillRect(-2, -2, 4, 4); + ctx.restore(); +} + +function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + // 以後の全て変換はこの変換から相対的であることに注意 + ctx.translate(45, 45); + + ctx.save(); + //ctx.translate(0, 0); // 不要 + drawBowtie(ctx, "red"); + dot(ctx); + ctx.restore(); + + ctx.save(); + ctx.translate(85, 0); + ctx.rotate(45 * Math.PI / 180); + drawBowtie(ctx, "green"); + dot(ctx); + ctx.restore(); + + ctx.save(); + ctx.translate(0, 85); + ctx.rotate(135 * Math.PI / 180); + drawBowtie(ctx, "blue"); + dot(ctx); + ctx.restore(); + + ctx.save(); + ctx.translate(85, 85); + ctx.rotate(90 * Math.PI / 180); + drawBowtie(ctx, "yellow"); + dot(ctx); + ctx.restore(); +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="185" height="185"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<div>{{EmbedLiveSample('A_More_Complicated_Example','215','215','/@api/deki/files/604/=Canvas_ex3.png')}}</div> + +<p><code>drawBotie</code> 関数及び <code>dot</code> 関数を定義し、 draw 関数内で 4 回使用しています。 それぞれを呼び出す前に、<code>translate()</code> 及び <code>rotate()</code> を現在の変換行列を用意するために用いています。その変換行列は順番に点と蝶ネクタイを配置します。 <code>dot</code> 関数は <code>(0, 0)</code> を中心に小さな黒い正方形を描画します。 dot は変換行列によって移動されます。 <code>drawBowtie</code> は第 1 引数に指定した塗りつぶしスタイルを使い、単純な蝶ネクタイのパスを描画します。</p> + +<p>行列の操作は累積されるので、<code>save()</code> 及び <code>restore()</code> はそれぞれが設定した元の canvas の状態に復帰するために使われます。 注目すべきは、回転が常に現在の基点の周りで起こるということです。 従って <code>translate() rotate() translate() </code> の連続は <code>translate() translate() rotate()</code> の連続実行とは異なった結果を生みます。</p> + +<h2 id="Compatibility_With_Apple_.3Ccanvas.3E" name="Compatibility_With_Apple_.3Ccanvas.3E">Apple の <canvas> との互換性</h2> + +<p><code><canvas></code> は Apple の実装とその他の実装で互換性があります。 しかし、いくつかの注意すべき問題があります。</p> + +<h3 id="Required_.3C.2Fcanvas.3E_tag" name="Required_.3C.2Fcanvas.3E_tag">必須の <code></canvas></code> タグ <span style="font-size: smaller; font-weight: normal;">このセクションの内容には古い情報が含まれます</span></h3> + +<p>Apple の Safari の実装においては、<code><canvas></code> は <code><img></code> とほぼ同じような方法で実装された要素で、終了タグを持っていません。 しかしながら、<code><canvas></code> がウェブで広く普及するために、 代替内容のための何らかの方法を提供しなければなりません。 したがって、Mozilla の実装では、 終了タグが必須となっています。</p> + +<p>代替内容が必要無い場合、単純に <code><canvas id="foo" ...></canvas></code> とすれば、Safari は終了タグを無視し、 Safari と Mozilla の両方で完全に互換性を持つでしょう。</p> + +<p>もし代替内容が望まれるならば、(canvas だけが描画されるべき) Safari から代替内容を隠すために、そして(代替内容が表示されるべき) IE から canvas 自体を隠すためにいくつかの CSS のトリックを使わなければなりません。</p> + +<p>現在は canvas 要素の内容には代替コンテンツを配置するように仕様書で定められています。</p> + +<h2 id="Additional_Features" name="Additional_Features">その他の機能</h2> + +<h3 id="Rendering_Web_Content_Into_A_Canvas" name="Rendering_Web_Content_Into_A_Canvas">canvas への Web コンテンツの描画</h3> + +<div class="note">この機能は Chrome 特権コードの実行時のみに存在します。通常の HTML ページでは許可されていません。<a class="external" href="http://mxr.mozilla.org/mozilla/source/content/canvas/src/nsCanvasRenderingContext2D.cpp#2345">理由についてはソースをお読みください</a>。</div> + +<p>Mozilla の <code>canvas</code> は {{domxref("CanvasRenderingContext2D", "drawWindow()", "drawWindow()")}} メソッドで拡張できます。このメソッドは DOM <code>window</code> の中身のスナップショットを canvas に描画します。以下に例を示します。</p> + +<pre class="brush: js">ctx.drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)"); +</pre> + +<p>上記の例では、現在のウィンドウの、左上から (0, 0, 100, 200) 座標にある四角形の中身を、黒色背景の canvas に描き込みます。 遅くなりますが、 "rgba(255, 255, 255, 0)" と色を指定すれば、透過背景の上に中身を描画することになります。</p> + +<p>このメソッドにより、隠し IFRAME に任意の内容 (たとえば、CSS でスタイル付けされた HTML テキストや SVG) を入れて、その内容を canvas に描画することも可能です。その場合、現在の変形にしたがって、拡大縮小・回転が行われます。</p> + +<p>Ted Mielczarek の <a class="external" href="http://ted.mielczarek.org/code/mozilla/tabpreview/">tab preview</a> 拡張では、 Web ページのサムネイルを提供するために chrome の中でこのテクニックを使われています。ソースコードを参照してみてください。</p> + +<div class="note"><strong>注記:</strong> Using <code>canvas.drawWindow()</code> while handling a document's <code>onload</code> event doesn't work. In Firefox 3.5 or later, you can do this in a handler for the <a href="/ja/docs/Gecko-Specific_DOM_Events#MozAfterPaint" title="Gecko-Specific DOM Events#MozAfterPaint"><code>MozAfterPaint</code></a> event to successfully draw HTML content into a canvas on page load.</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/HTML/Canvas" title="HTML/Canvas">Canvas トピックページ</a></li> + <li><a href="/ja/docs/Canvas_tutorial" title="Canvas_tutorial">Canvas チュートリアル</a></li> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas">WHATWG 仕様</a></li> + <li><a href="http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html" title="http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html">Apple Canvas Documentation</a></li> + <li><a href="http://weblogs.mozillazine.org/roc/archives/2005/05/rendering_web_p.html">Rendering Web Page Thumbnails</a></li> + <li><a href="/ja/docs/tag/canvas_examples">いくつかの使用例</a> : + <ul> + <li><a href="http://azarask.in/projects/algorithm-ink">Algorithm Ink</a></li> + <li><a href="http://www.tapper-ware.net/canvas3d/">OBJ format 3D Renderer</a></li> + <li><a href="/ja/docs/A_Basic_RayCaster" title="A_Basic_RayCaster">A Basic RayCaster</a></li> + <li><a href="http://awordlike.textdriven.com/">The Lightweight Visual Thesaurus</a></li> + <li><a href="http://caimansys.com/painter/">Canvas Painter</a></li> + </ul> + </li> + <li><a href="/ja/docs/tag/canvas">その他...</a></li> +</ul> diff --git a/files/ja/conflicting/web/api/crypto/getrandomvalues/index.html b/files/ja/conflicting/web/api/crypto/getrandomvalues/index.html new file mode 100644 index 0000000000..5972564d98 --- /dev/null +++ b/files/ja/conflicting/web/api/crypto/getrandomvalues/index.html @@ -0,0 +1,113 @@ +--- +title: RandomSource +slug: Web/API/RandomSource +tags: + - API + - Interface + - RandomSource + - Reference + - Web Crypto API +translation_of: Web/API/Crypto/getRandomValues +translation_of_original: Web/API/RandomSource +--- +<p>{{APIRef("Web Crypto API")}}</p> + +<p><strong><code>RandomSource</code></strong> は、暗号的に安全な乱数値のソースを表します。これは、グローバルオブジェクトの {{domxref("Crypto")}} オブジェクトを通して利用可能です。ウェブページ上では {{domxref("Window.crypto")}}、Worker 内では {{domxref("WorkerGlobalScope.crypto")}} が利用できます。</p> + +<p><code>RandomSource</code> は、インターフェイスでも、作成できるこの種類のオブジェクトでもありません。</p> + +<h2 id="Properties" name="Properties">プロパティ</h2> + +<p><em><code>RandomSource</code> はどのプロパティも定義または継承しません。</em></p> + +<dl> +</dl> + +<h2 id="Methods" name="Methods">メソッド</h2> + +<dl> + <dt>{{ domxref("RandomSource.getRandomValues()") }}</dt> + <dd>渡された {{ domxref("ArrayBufferView") }} を意味不明の乱数値で埋めます。</dd> +</dl> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">策定状況</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('Web Crypto API', '#dfn-RandomSource')}}</td> + <td>{{Spec2('Web Crypto API')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの実装状況</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基本サポート</td> + <td>11.0 {{ webkitbug("22049") }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(21)}} [1]</td> + <td>11.0</td> + <td>15.0</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{ CompatNo() }}</td> + <td>23</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(21)}}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>6</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] <code>RandomSource</code> は Firefox 26 からのみ利用可能ですが、機能は Firefox 21 から利用可能でした。</p> + +<h2 id="See_Also" name="See_Also">関連情報</h2> + +<ul> + <li>{{domxref("Crypto")}} オブジェクトを取得する {{ domxref("Window.crypto") }}。</li> + <li>{{jsxref("Math.random")}}、意味不明ではない乱数値。</li> +</ul> diff --git a/files/ja/conflicting/web/api/css_object_model/determining_the_dimensions_of_elements/index.html b/files/ja/conflicting/web/api/css_object_model/determining_the_dimensions_of_elements/index.html new file mode 100644 index 0000000000..c09e67595e --- /dev/null +++ b/files/ja/conflicting/web/api/css_object_model/determining_the_dimensions_of_elements/index.html @@ -0,0 +1,31 @@ +--- +title: Determining the dimensions of elements +slug: Determining_the_dimensions_of_elements +tags: + - DOM +--- +<p><span class="CRHTML_TXN"><span id="eq00000g00003">要素の幅と高さを知るためのプロパティはいくつかあり、本当に求めているプロパティがどれであるかわかりにくいことがあります。このページでは目的に応じてどのプロパティを使用すれば良いか説明します。</span></span></p> + +<h3 id="How_much_room_does_it_use_up.3F" name="How_much_room_does_it_use_up.3F">表示に使用されている領域の大きさはどのくらいか？</h3> + +<p>表示されているコンテンツ、スクロールバー(あれば)、padding の幅を含む element の占有スペースの総量を知る必要があるならば、<code><a href="/ja/DOM/element.offsetWidth" title="ja/DOM/element.offsetWidth">offsetWidth</a></code> プロパティと <code><a href="/ja/DOM/element.offsetHeight" title="ja/DOM/element.offsetHeight">offsetHeight</a></code> プロパティを利用するのが良いです:</p> + +<p><img alt="Image:Dimensions-offset.png" class="internal" src="/@api/deki/files/186/=Dimensions-offset.png"></p> + +<h3 id="What.27s_the_size_of_the_displayed_content.3F" name="What.27s_the_size_of_the_displayed_content.3F">表示されているコンテンツのサイズは何か?</h3> + +<p>border、margins、スクロールバーを含まない、実際に表示されているコンテンツの padding のみがどれくらいのスペースを取るか知る必要があるならば、 <code><a href="/ja/DOM/element.clientWidth" title="ja/DOM/element.clientWidth">clientWidth</a></code> プロパティと <code><a href="/ja/DOM/element.clientHeight" title="ja/DOM/element.clientHeight">clientHeight</a></code> プロパティを利用するのが良いです:</p> + +<p><img alt="Image:Dimensions-client.png" class="internal" src="/@api/deki/files/185/=Dimensions-client.png"></p> + +<h3 id="How_big_is_the_content.3F" name="How_big_is_the_content.3F">コンテンツの大きさはどのくらいか?</h3> + +<p>現在どのくらい表示されているかに関わらず、コンテンツの実サイズを知る必要があるならば、<code><a href="/ja/DOM/element.scrollWidth" title="ja/DOM/element.scrollWidth">scrollWidth</a></code> プロパティと <code><a href="/ja/DOM/element.scrollHeight" title="ja/DOM/element.scrollHeight">scrollHeight</a></code> プロパティを利用するのが良いです。たとえ現在スクロールバーの使用のために一部分だけが見えているとしても、これらは element の全コンテンツの幅と高さを返します。</p> + +<p>たとえば、600×400ピクセルの element が300x300ピクセルのスクロールボックスの中に表示されているならば、scrollHeightは400を、scrollWidthは600を返します。</p> + +<h3 id="References" name="References">リファレンス</h3> + +<p><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN: Measuring Element Dimension and Location</a></p> + +<p>{{ languages( {"en": "en/Determining_the_dimensions_of_elements"}) }}</p> diff --git a/files/ja/conflicting/web/api/document/characterset/index.html b/files/ja/conflicting/web/api/document/characterset/index.html new file mode 100644 index 0000000000..bc128b09e8 --- /dev/null +++ b/files/ja/conflicting/web/api/document/characterset/index.html @@ -0,0 +1,26 @@ +--- +title: document.inputEncoding +slug: Web/API/Document/inputEncoding +tags: + - DOM + - Document + - Gecko + - Gecko DOM Reference +translation_of: Web/API/Document/characterSet +translation_of_original: Web/API/Document/inputEncoding +--- +<p>{{ApiRef}} {{deprecated_header}}</p> +<h2 id="Summary" name="Summary">概要</h2> +<p>文書パース時のエンコーディングを表す文字列（※ <code>ISO-8859-1</code> 等）を返します。</p> +<div class="warning"> + <strong>注記:</strong> このメソッドは DOM 4 仕様書ドラフトから削除されており、Gecko の実装からも削除される可能性があります。使用しないようにしてください。</div> +<h2 id="Syntax" name="Syntax">構文</h2> +<pre class="syntaxbox"><code><var>encoding</var> = document.inputEncoding;</code></pre> +<ul> + <li><code>inputEncoding</code> : {{readOnlyInline}}</li> +</ul> +<h2 id="Specification" name="Specification">仕様書</h2> +<ul> + <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Document3-inputEncoding">DOM Level 3 Core</a></li> + <li>※ {{spec("http://www.w3.org/TR/domcore/","DOM Core Level 4","WD")}} で削除されています。</li> +</ul> diff --git a/files/ja/conflicting/web/api/document/createevent/index.html b/files/ja/conflicting/web/api/document/createevent/index.html new file mode 100644 index 0000000000..d9dc6aef3f --- /dev/null +++ b/files/ja/conflicting/web/api/document/createevent/index.html @@ -0,0 +1,32 @@ +--- +title: Event.createEvent() +slug: Web/API/Event/createEvent +translation_of: Web/API/Document/createEvent +translation_of_original: Web/API/Event/createEvent +--- +<p>{{APIRef("DOM")}}</p> + +<p>新規イベントを生成します。生成されたイベントは初期化処理が必須です。</p> + +<h3 id="構文">構文</h3> + +<pre><code>document.createEvent(type) </code></pre> + +<dl> + <dt><code>type</code></dt> + <dd>生成するイベントタイプ名</dd> +</dl> + +<p>このメソッドは指定されたイベントタイプの新規DOM {{ domxref("Event") }} オブジェクトを返り値として返します。</p> + +<p>オブジェクトには初期化処理が必須です。</p> + +<h3 id="例">例</h3> + +<pre>var newEvent = document.createEvent("UIEvents");</pre> + +<h3 id="仕様書">仕様書</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-document" title="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-document">DOM Level 2 Events</a></li> +</ul> diff --git a/files/ja/conflicting/web/api/document_object_model/index.html b/files/ja/conflicting/web/api/document_object_model/index.html new file mode 100644 index 0000000000..5bd2ec6ada --- /dev/null +++ b/files/ja/conflicting/web/api/document_object_model/index.html @@ -0,0 +1,5 @@ +--- +title: DOM Client Object Cross-Reference +slug: DOM_Client_Object_Cross-Reference +--- +{{wiki.localize('System.API.page-generated-for-subpage')}} diff --git a/files/ja/conflicting/web/api/document_object_model_226486dcf4878082093d6899a9e478cc/index.html b/files/ja/conflicting/web/api/document_object_model_226486dcf4878082093d6899a9e478cc/index.html new file mode 100644 index 0000000000..736d3074ba --- /dev/null +++ b/files/ja/conflicting/web/api/document_object_model_226486dcf4878082093d6899a9e478cc/index.html @@ -0,0 +1,16 @@ +--- +title: DOM (Document Object Model) について +slug: DOM/About_the_Document_Object_Model +tags: + - DOM +translation_of: Web/API/Document_Object_Model +translation_of_original: DOM/About_the_Document_Object_Model +--- +<h2 id="What_is_the_DOM.3F" name="What_is_the_DOM.3F">DOM とは何か?</h2> +<p><a href="/ja/docs/DOM">Document Object Model</a> は <a href="/ja/docs/HTML">HTML</a> と <a href="/ja/docs/XML">XML</a> ドキュメントへの API です。これは、ドキュメントの構造的な表現、その内容を変更可能にすること、そして視覚的なプレゼンテーションを提供します。本質的には、ウェブページをスクリプト又はプログラミング言語と結合します。</p> +<p>ウェブ開発者がウェブページを操作及び作成するのに役立つ全てのプロパティ、メソッド、そしてイベントは、<a href="/ja/docs/Gecko_DOM_Reference">objects</a> に組込まれています。(例えば、document オブジェクトはドキュメントそのもの、table オブジェクトは HTML テーブル要素を表すなど)。これらのオブジェクトは最新のウェブブラウザのスクリプティング言語を通してアクセス可能です。</p> +<p>DOM は <a href="/ja/docs/JavaScript">JavaScript</a> との関連において最も頻繁に使われます。JavaScript で書かれたコードは、しかしウェブページとその要素にアクセスするのには DOM を使う為です。しかしながら、 DOM はあらゆる個々のプログラミング言語から独立して設計され、ドキュメントの構造的な表現の作成が、単独で、一貫した API により利用できます。当サイトでは終始 JavaScript に焦点を置きますが、DOM の実装は<a href="http://www.w3.org/DOM/Bindings">あらゆる言語</a> でビルドする事が出来ます。</p> +<p><a href="http://www.w3.org/">World Wide Web Consortium</a> は W3C DOM と呼ばれる <a href="http://www.w3.org/DOM/">DOM 標準</a>を設けました。今こそ、有力なブラウザは正しくこれを実装し、強力なクロスブラウザアプリケーションを可能にすべきです。</p> +<h2 id="Why_is_the_DOM_support_in_Mozilla_important.3F" name="Why_is_the_DOM_support_in_Mozilla_important.3F">何故 Mozilla が DOM をサポートすることが重要か</h2> +<p>"Dynamic HTML" (<a href="/ja/docs/DHTML">DHTML</a>) は、あるベンダーが、HTML、スタイルシート、及びドキュメントを活発にするスクリプトの組み合わせを表現するのに使われる一方言です。 W3C DOM ワーキンググループは、必ずや相互実行可能且つ言語的に中立なソリューションが合意に至るよう熱心に努めています(<a href="http://www.w3.org/DOM/faq.html">W3C FAQ</a> も見てください)。Mozilla が "ウェブアプリケーションプラットフォーム" を標榜するならば、DOM のサポートは最も求められる機能の一つであり、もし Mozilla が他のブラウザの代替として成功したいのなら、欠かせないものです。</p> +<p>さらにより重要なことは、Mozilla (Firefox や Thunderbird も然り) のユーザインタフェースが XUL -- XML User interface Language でビルドされているという事実です。故に Mozilla は<a href="/ja/docs/Dynamically_modifying_XUL-based_user_interface">自身の UI を操作する</a>為に DOM を使います。</p> diff --git a/files/ja/conflicting/web/api/document_object_model_656f0e51418b39c498011268be9b3a10/index.html b/files/ja/conflicting/web/api/document_object_model_656f0e51418b39c498011268be9b3a10/index.html new file mode 100644 index 0000000000..dcee4acf84 --- /dev/null +++ b/files/ja/conflicting/web/api/document_object_model_656f0e51418b39c498011268be9b3a10/index.html @@ -0,0 +1,37 @@ +--- +title: DOM developer guide +slug: Web/Guide/DOM +tags: + - API + - DOM + - Guide + - NeedsTranslation + - TopicStub +translation_of: Web/API/Document_Object_Model +translation_of_original: Web/Guide/API/DOM +--- +<p>{{draft}}</p> + +<p><a href="/docs/DOM">Document Object Model</a> は<a href="/en-US/docs/HTML">HTML</a> と <a href="/en-US/docs/XML">XML</a> ドキュメントのための API です。 DOM はドキュメントの構造的表現を提供しており、開発者がコンテンツ自身や、ドキュメントの表示を変更することができるようになります。基本的に、スクリプトやプログラミング言語を通して、ページを繋げています。</p> + +<p>obuject（例、ドキュメントオブジェクトはドキュメント自身を表したり、テーブルオブジェクトはhtmlのテーブル要素を表す、など）内に組み込まれているウェブページを作成したり、操作するためのすべてのプロパティやメソッド、イベントはweb開発者が使用可能です。これらのオブジェクトにはjavascript等のスクリプト言語でアクセス可能です。</p> + +<p> </p> + +<p>DOMはほぼ大抵 <a href="/en-US/docs/JavaScript">JavaScript</a> と合わせて使用されます。しかし、DOMはどんなプログラミング言語にも非依存なものとして設計されました。 <a href="/en-US/docs/DOM/DOM_Reference">a single, consistent API </a>を使用してドキュメントの構造的な表現を作ることが可能です。このサイトでは私たちはJavaScriptにフォーカスを当てていますが、DOMを実装するのはどのような言語でも可能です。</p> + +<p>The DOM is most often used in conjunction with <a href="/en-US/docs/JavaScript">JavaScript</a>. However, the DOM was designed to be independent of any particular programming language, making the structural representation of the document available from <a href="/en-US/docs/DOM/DOM_Reference">a single, consistent API</a>. Though we focus on JavaScript throughout this site, implementations of the DOM can be built for <a href="http://www.w3.org/DOM/Bindings">any language</a>.</p> + +<p>The <a href="http://www.w3.org/">World Wide Web Consortium</a> establishes a <a href="http://www.w3.org/DOM/">standard for the DOM</a>, called the W3C DOM. It should, now that the most important browsers correctly implement it, enable powerful cross-browser applications.</p> + +<h2 id="Why_is_the_DOM_support_in_Mozilla_important.3F" name="Why_is_the_DOM_support_in_Mozilla_important.3F">DOMはなぜ重要なのか?</h2> + +<p>"Dynamic HTML" (<a href="/en-US/docs/DHTML">DHTML</a>) is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated. The W3C DOM Working Group is working hard to make sure interoperable and language-neutral solutions are agreed upon (see also the <a href="http://www.w3.org/DOM/faq.html">W3C FAQ</a>).</p> + +<p>As Mozilla claims the title of "Web Application Platform", support for the DOM is one of the most requested features, and a necessary one if Mozilla wants to be a viable alternative to the other browsers. The user interface of Mozilla (also Firefox and Thunderbird) is built using <a href="https://developer.mozilla.org/en-US/docs/XUL" title="/en-US/docs/XUL">XUL</a>, using the DOM to <a href="https://developer.mozilla.org/en-US/docs/Dynamically_modifying_XUL-based_user_interface">manipulate its own UI</a>.</p> + +<p> </p> + +<h2 id="DOMについてもっと知る">DOMについてもっと知る</h2> + +<p>{{LandingPageListSubpages}}</p> diff --git a/files/ja/conflicting/web/api/document_object_model_8435a25d5137b436d5d7161e1b813c02/index.html b/files/ja/conflicting/web/api/document_object_model_8435a25d5137b436d5d7161e1b813c02/index.html new file mode 100644 index 0000000000..4a390b9177 --- /dev/null +++ b/files/ja/conflicting/web/api/document_object_model_8435a25d5137b436d5d7161e1b813c02/index.html @@ -0,0 +1,52 @@ +--- +title: 序文 +slug: Web/API/Document_Object_Model/Preface +tags: + - DOM + - Gecko + - Gecko DOM Reference +translation_of: Web/API/Document_Object_Model +translation_of_original: Web/API/Document_Object_Model/Preface +--- +<div> + {{ApiRef}}</div> +<h2 id="About_This_Reference" name="About_This_Reference">この資料について</h2> +<p>この節では、このガイドそのものについて説明します。誰のための資料で、どんな情報があって、あなた独自の DOM 開発を行うにあたってこの資料のなかの例をどのように使えるのか、について説明します。</p> +<p>この文書は書きかけなので、Gecko に実装されている DOM 関数と属性がきれいにまとめられてはいません。ただし、資料に含まれる各オブジェクトに関する文書 (<a href="/ja/docs/DOM/document" title="DOM/document">DOM Document リファレンス</a> など） は完結しています。多数の API に含まれるさまざまな資料が準備でき次第、この資料に追加します。</p> +<h2 id="Who_Should_Read_This_Guide" name="Who_Should_Read_This_Guide">この資料の対象となる読者</h2> +<p><a href="/ja/docs/DOM/DOM_Reference" title="DOM/DOM_Reference">Gecko DOM リファレンス</a> の読者は web 開発者や web ページの仕組みを知っている web の利用者です。この資料では、読者の専門知識を前提とはしていません。DOM、<a href="/ja/docs/XML" title="XML">XML</a>、web サーバ、web 標準、読者が DOM にアクセスするための言語である <a href="/ja/docs/JavaScript" title="JavaScript">JavaScript</a> に関する知識があるとは限らないものとしています。ですが、web ページの基本である <a href="/ja/docs/HTML" title="HTML">HTML</a> とブラウザとスタイルシートなどは押さえているものとして書かれています。</p> +<p>「導入の記述がある」 「例が多様」 「説明が詳しい」 という点では、「初心者向け」 のハッキングガイドと言うこともできます。ただし、一般的に言って、技術資料というものは web 開発の経験があっても無くても、その人たちにとって有用な資料である必要があります。</p> +<h2 id="What_is_Gecko.3F" name="What_is_Gecko.3F">Gecko とは？</h2> +<p>Mozilla と Firefox、Netscape 6 以上、そのほかの Mozilla をもとにしたブラウザの DOM 実装は同一のものです。というのも、これらのブラウザは同じ技術を使用しているからです。<span class="comment">naturally, it applies only to products based on the same version of Gecko, but it's tricky to explain</span></p> +<p>Gecko はこれらのブラウザの中にあるソフトウェアコンポーネントのことで、HTML の解析、ページのレイアウト、ドキュメント・オブジェクト・モデル、そしてアプリケーション・インタフェースの描画も処理しています。Gecko は、速く、標準に準拠した描画エンジンで、W3C の DOM 標準や DOM に類似した（しかし標準化されていない）ブラウザ・オブジェクト・モデル（例：<a href="/ja/docs/DOM/window" title="DOM/window"><code>window</code></a> など）を、web ページやブラウザのアプリケーション・インタフェース（<em>chrome</em>）において、実装します。</p> +<p>ブラウザによって表示されるアプリケーション・インタフェースやコンテントは実際には異なりますが、DOM はこれらを一律にノードの階層として提示します。<span class="comment">(commenting this incomplete sentence out for now...) The tree structure of the DOM (which in its application to the user</span></p> +<h2 id="API_Syntax" name="API_Syntax">API 構文</h2> +<p>各資料には、構文、入出力の引数 (return 型が与えられている return 型の場所) 、例、補足、該当仕様へのリンクがあります。</p> +<p>とくに読みとり専用属性の文法は基本的に一行だけです。なぜなら、それらのプロパティは設定できずアクセスしかできないからです。例えば、<code>screen</code> オブジェクトの <code>availHeight</code> は読取専用の属性なので、次のような構文で書かれています。</p> +<pre class="brush:js">iAvail = window.screen.availHeight +</pre> +<p>つまり、式の右辺の属性だけが利用できるということです。それに対して、読み書き可能な属性の場合は、次の例でも分かるように、値を設定することもできます。</p> +<pre class="brush:js">msg = window.status +window.status = msg +</pre> +<p>一般に、メンバの記述があるオブジェクトの場合、その構文は簡潔な型になります。例えば、要素ならなんでも <code>element</code> ですし、document オブジェクトなら <code>document</code> ですし、TABLE オブジェクトなら <code>TABLE</code> といった具合です (データ型について詳しくは<a href="/ja/docs/DOM/DOM_Reference/Introduction#Important_Data_Types" title="DOM/DOM_Reference/Introduction#Important_Data_Types">重要なデータ型</a> を参照してください)。</p> +<h2 id="Using_the_Examples" name="Using_the_Examples">例の使い方</h2> +<p>資料にある例のうち、その多くは単独のファイルとして完結しているものです。新しいファイルにコピーしてブラウザで開くと、きちんと動作します。コード断片もあります。断片の場合は、その断片を JavaScript コールバック関数内で使うことができます。例えば、 <a href="/ja/docs/DOM/window.document" title="DOM/window.document">window.document</a> 属性の資料にある例を次のように関数内に入れて、ボタンが押されたら呼ばれるような確認コードを書くことができます。</p> +<pre class="brush:html"><!DOCTYPE html> +<html> +<head> +<title>Test Page</title> +<script> +function testWinDoc() { + doc = window.document; + alert(doc.title); +} +</script> +</head> + +<body> + <button onclick="testWinDoc();">test document property</button> +</body> +</html> +</pre> +<p>すぐに利用できるように梱包されていないオブジェクトのメンバーについても、上記のような関数やページを作り出すことができます。「テスト実行環境」 の導入部分にある <a href="/ja/docs/DOM/DOM_Reference/Introduction#Testing_the_DOM_API" title="DOM/DOM_Reference/Introduction#Testing_the_DOM_API">DOM API のテスト</a> の節を参照してください。それを使うと、一度に、たくさんの API の動作を確認できます。</p> diff --git a/files/ja/conflicting/web/api/documentorshadowroot/getselection/index.html b/files/ja/conflicting/web/api/documentorshadowroot/getselection/index.html new file mode 100644 index 0000000000..740d006c66 --- /dev/null +++ b/files/ja/conflicting/web/api/documentorshadowroot/getselection/index.html @@ -0,0 +1,13 @@ +--- +title: document.getSelection +slug: Web/API/Document/getSelection +tags: + - DOM + - Document + - Reference + - Selection +translation_of: Web/API/DocumentOrShadowRoot/getSelection +translation_of_original: Web/API/Document/getSelection +--- +<p>DOM の <code>getSelection()</code> メソッドは、 {{domxref("Window")}} インタフェース及び {{domxref("Document")}} インタフェースで利用可能です。<br> + 詳細については {{domxref("window.getSelection()")}} の頁を参照して下さい。</p> diff --git a/files/ja/conflicting/web/api/documentorshadowroot/index.html b/files/ja/conflicting/web/api/documentorshadowroot/index.html new file mode 100644 index 0000000000..a7953136e6 --- /dev/null +++ b/files/ja/conflicting/web/api/documentorshadowroot/index.html @@ -0,0 +1,79 @@ +--- +title: DocumentOrShadowRoot.nodeFromPoint() +slug: Web/API/DocumentOrShadowRoot/nodeFromPoint +tags: + - API + - DocumentOrShadowRoot + - Method + - Non-standard + - Reference + - nodeFromPoint + - メソッド + - 標準外 +translation_of: Web/API/DocumentOrShadowRoot +translation_of_original: Web/API/DocumentOrShadowRoot/nodeFromPoint +--- +<div>{{APIRef("DOM")}}{{Non-standard_header}}</div> + +<p><span class="seoSummary">{{domxref("DocumentOrShadowRoot")}} インターフェイスの <strong><code>nodeFromPoint()</code></strong> プロパティは、 (ビューポートからの相対で) 指定された座標にある最上位のノードを返します。</span></p> + +<p>現在のところ、このメソッドは Firefox でしか実装されておらず、クロムコードでのみ利用できます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var node = document.nodeFromPoint(x, y);</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code>x</code></dt> + <dd>点の水平座標を表す倍精度浮動小数値。</dd> + <dt><code>y</code></dt> + <dd>点の垂直座標を表す倍精度浮動小数値。</dd> +</dl> + +<h3 id="Returns" name="Returns">返値</h3> + +<p>{{domxref('Node')}} オブジェクト。</p> + +<h2 id="Example" name="Example">例</h2> + +<h3 id="HTML_Content" name="HTML_Content">HTML Content</h3> + +<pre class="brush: html"><div> + <p>Some text</p> +</div> +<p>Top node at point 30, 20:</p> +<div id="output"></div> +</pre> + +<h3 id="JavaScript_Content" name="JavaScript_Content">JavaScript Content</h3> + +<pre class="brush: js;highlight[1]">var output = document.getElementById("output"); +if (document.nodeFromPoint) { + var node = document.nodeFromPoint(30, 20); + output.textContent += node.localName; +} else { + output.innerHTML = "<span style=\"color: red;\">" + + "Browser does not support <code>document.nodeFromPoint()</code>" + + "</span>"; +}</pre> + +<p>{{EmbedLiveSample('Example', '420', '120')}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<p>現在はどの仕様書にも含まれていません。</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.DocumentOrShadowRoot.nodeFromPoint")}}</p> + +<h2 id="See_Also" name="See_Also">関連情報</h2> + +<ul> + <li>{{DOMxRef("DocumentOrShadowRoot.nodesFromPoint()")}}</li> + <li>{{DOMxRef("DocumentOrShadowRoot.elementFromPoint()")}}</li> +</ul> diff --git a/files/ja/conflicting/web/api/documentorshadowroot_20ea0e1d91453a020aad3a16dbce16f1/index.html b/files/ja/conflicting/web/api/documentorshadowroot_20ea0e1d91453a020aad3a16dbce16f1/index.html new file mode 100644 index 0000000000..d3f79b8d11 --- /dev/null +++ b/files/ja/conflicting/web/api/documentorshadowroot_20ea0e1d91453a020aad3a16dbce16f1/index.html @@ -0,0 +1,83 @@ +--- +title: DocumentOrShadowRoot.nodesFromPoint() +slug: Web/API/DocumentOrShadowRoot/nodesFromPoint +tags: + - API + - DocumentOrShadowRoot + - Method + - Non-standard + - Reference + - nodesFromPoint + - メソッド +translation_of: Web/API/DocumentOrShadowRoot +translation_of_original: Web/API/DocumentOrShadowRoot/nodesFromPoint +--- +<div>{{APIRef("DOM")}}{{Non-standard_header}}</div> + +<p><span class="seoSummary">{{domxref("DocumentOrShadowRoot")}} インターフェイスの <strong><code>nodesFromPoint()</code></strong> プロパティは、 (ビューポートからの相対で) 指定された座標のすべてのノードの配列を返します。</span></p> + +<p>現在のところ、このメソッドは Firefox でしか実装されておらず、クロムコードでのみ利用できます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var nodes = document.nodesFromPoint(x, y);</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt>x</dt> + <dd>点の水平座標。</dd> + <dt>y</dt> + <dd>点の垂直座標。</dd> +</dl> + +<h3 id="Returns" name="Returns">返値</h3> + +<p>{{domxref('Node')}} オブジェクトの配列。</p> + +<h2 id="Example" name="Example">例</h2> + +<h3 id="HTML_Content" name="HTML_Content">HTML コンテンツ</h3> + +<pre class="brush: html"><div> + <p>Some text</p> +</div> +<p>Nodes at point 30, 20:</p> +<div id="output"></div> +</pre> + +<h3 id="JavaScript_Content" name="JavaScript_Content">JavaScript コンテンツ</h3> + +<pre class="brush: js;highlight[1]">var output = document.getElementById("output"); +if (document.nodesFromPoint) { + var nodes = document.nodesFromPoint(30, 20); + for(var i = 0; i < nodes.length; i++) { + output.textContent += nodes[i].localName; + if (i < nodes.length - 1) { + output.textContent += " < "; + } + } +} else { + output.innerHTML = "<span style=\"color: red;\">" + + "Browser does not support <code>document.nodesFromPoint()</code>" + + "</span>"; +}</pre> + +<p>{{EmbedLiveSample('Example', '420', '120')}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<p>現在はどの仕様書にも含まれていません。</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.DocumentOrShadowRoot.nodesFromPoint")}}</p> + +<h2 id="See_Also" name="See_Also">関連情報</h2> + +<ul> + <li>{{DOMxRef("DocumentOrShadowRoot.nodeFromPoint()")}}</li> + <li>{{DOMxRef("DocumentOrShadowRoot.elementsFromPoint()")}}</li> +</ul> diff --git a/files/ja/conflicting/web/api/element/compositionstart_event/index.html b/files/ja/conflicting/web/api/element/compositionstart_event/index.html new file mode 100644 index 0000000000..e02e6c35ef --- /dev/null +++ b/files/ja/conflicting/web/api/element/compositionstart_event/index.html @@ -0,0 +1,80 @@ +--- +title: compositionstart +slug: Web/Events/compositionstart +tags: + - DOM + - Event + - Gecko DOM Reference + - events + - 要更新 +translation_of: Web/API/Element/compositionstart_event +translation_of_original: DOM/DOM_event_reference/compositionstart +--- +<p>DOM <code>compositionstart</code> イベントはユーザがIMEで未確定文字列の入力を開始した時のように、間接的なテキスト入力を開始した時に同期的に発生します。このイベントは {{ domxref("CompositionEvent") }} インターフェースを持ちます。</p> +<div class="note"> + <strong>注釈:</strong> このイベントはテキストが編集が始まる前に発生すべきではあるのですが、Gecko では編集を始めた直後に発生します。</div> +<ul style="display: table; padding: 0; border-left: 2px solid; margin-left: 0.5em;"> + <li style="display: table-row; padding: 3px; margin: 0;"><dfn>インターフェース:</dfn>{{ domxref('CompositionEvent') }}</li> + <li style="display: table-row; padding: 3px; margin: 0;"><dfn>同期・非同期 :</dfn>同期</li> + <li style="display: table-row; padding: 3px; margin: 0;"><dfn>バブルフェーズ :</dfn>有り</li> + <li style="display: table-row; padding: 3px; margin: 0;"><dfn>ターゲット :</dfn> {{ domxref('Element') }}</li> + <li style="display: table-row; padding: 3px; margin: 0;"><dfn>キャンセル :</dfn> 可能 (ただし、下記のブラウザ固有の事情を参照)</li> + <li style="display: table-row; padding: 3px; margin: 0;"><dfn>既定動作 :</dfn> 無し</li> +</ul> +<h2 id="仕様書">仕様書</h2> +<p><a class="external" href="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html#event-type-compositionstart" title="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html#event-type-compositionstart">DOM Level3 Events</a></p> +<h2 id="ブラウザ間の互換性">ブラウザ間の互換性</h2> +<p>{{ CompatibilityTable() }}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基本的なサポート</td> + <td> + <p>{{ CompatVersionUnknown() }}</p> + <p>data 属性値は仕様と違っています。</p> + </td> + <td>{{ CompatGeckoDesktop("9.0") }}</td> + <td> + <p>{{ CompatVersionUnknown() }}</p> + <p>data 属性値は常に空です。</p> + </td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本的なサポート</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("9.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> + </table> +</div> +<h3 id="Gecko_の動作メモ">Gecko の動作メモ</h3> +<p>DOM Level 3 仕様書では <code>compositionstart</code> はキャンセル可能と定義されています。しかし、 Gecko では現在のところ、キャンセルをできないようにしています。</p> +<p>Gecko はこのイベントをIMEが編集を開始した時に発生させます。また、プラットフォームによっては開始された編集を取り消すAPIがありません。さらに、Gecko は IME が実際に編集を開始するまで各キーイベントがそのきっかけとなるかどうか知ることができません。これらの理由から、<code>compositionstart</code> イベントの {{ domxref("event.preventDefault()") }} は Gecko では機能しません。</p> diff --git a/files/ja/conflicting/web/api/element/index.html b/files/ja/conflicting/web/api/element/index.html new file mode 100644 index 0000000000..859be5e107 --- /dev/null +++ b/files/ja/conflicting/web/api/element/index.html @@ -0,0 +1,50 @@ +--- +title: Slotable +slug: Web/API/Slotable +tags: + - API + - Interface + - Reference + - Slotable + - Web Components + - shadow dom +translation_of: Web/API/Slottable +translation_of_original: Web/API/Slotable +--- +<p>{{APIRef("Shadow DOM")}}</p> + +<p><code>Slotable</code> mixin は、ノードを {{htmlelement("slot")}} 要素のコンテンツにする機能を定義します。— 次の機能が {{domxref("Element")}} と {{domxref("Text")}} の両方に含まれています。</p> + +<h2 id="Properties" name="Properties">プロパティ</h2> + +<dl> + <dt>{{domxref("Slotable.assignedSlot")}} {{readonlyInline}}</dt> + <dd>ノードが挿入されている {{htmlelement("slot")}} を返します。</dd> +</dl> + +<h2 id="Methods" name="Methods">メソッド</h2> + +<p>なし。</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#slotable','Slotable')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">ブラウザー実装状況</h2> + + + +<p>{{Compat("api.Slotable")}}</p> diff --git a/files/ja/conflicting/web/api/formdata/using_formdata_objects/index.html b/files/ja/conflicting/web/api/formdata/using_formdata_objects/index.html new file mode 100644 index 0000000000..605885878f --- /dev/null +++ b/files/ja/conflicting/web/api/formdata/using_formdata_objects/index.html @@ -0,0 +1,145 @@ +--- +title: FormData オブジェクトの利用 +slug: Web/Guide/Using_FormData_Objects +tags: + - Advanced + - Example + - Forms + - Guide + - HTML + - Web +translation_of: Web/API/FormData/Using_FormData_Objects +translation_of_original: Web/Guide/Using_FormData_Objects +--- +<p class="summary"><code><a href="/ja/docs/Web/API/FormData">FormData</a></code> オブジェクトは、<code><a href="/ja/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> を使用して送信するためのキーと値のペアのセットを収集可能にします。本来はフォームデータの送信に使用することを想定していましたが、キーのついたデータを伝送するためにフォームとは独立して使用することもできます。伝送されるデータは、フォームのエンコードタイプが <code>multipart/form-data</code> に設定されている場合に、{{domxref("HTMLFormElement.submit","submit()")}} メソッドで送信する際に使用するデータと同じ形式です。</p> + +<h2 id="Creating_a_FormData_object_from_scratch" name="Creating_a_FormData_object_from_scratch">スクラッチから FormData オブジェクトを作成する</h2> + +<p>以下のように <code>FormData</code> オブジェクトはあなた自身で作成でき、インスタンス化したら {{domxref("FormData.append","append()")}} メソッドを呼び出すことでフィールドに付加します:</p> + +<pre class="brush: js">var formData = new FormData(); + +formData.append("username", "Groucho"); +formData.append("accountnum", 123456); // 数値 123456 は直ちに文字列 "123456" へ変換されます + +// HTML の file input でユーザが選択したファイル +formData.append("userfile", fileInputElement.files[0]); + +// ファイルのような JavaScript オブジェクト +var content = '<a id="a"><b id="b">hey!</b></a>'; // 新しいファイルのボディ... +var blob = new Blob([content], { type: "text/xml"}); + +formData.append("webmasterfile", blob); + +var request = new XMLHttpRequest(); +request.open("POST", "http://foo.com/submitform.php"); +request.send(formData); +</pre> + +<div class="note"><strong>注記:</strong> フィールド "userfile" および "webmasterfile" はどちらも、ファイルを含んでいます。フィールド "accountnum" に与えた数値は <a href="/ja/docs/DOM/XMLHttpRequest/FormData#append()" title="XMLHttpRequest/FormData#append()"><code>FormData.append()</code></a> メソッドにより直ちに文字列へ変換されます (フィールドの値として {{domxref("Blob")}}、{{domxref("File")}}、または文字列をとることができます: <strong>値が Blob でもファイルでもない場合は、文字列に変換されます</strong>)。</div> + +<p>このサンプルでは "username"、"accountnum"、"userfile"、"webmasterfile" という名前のフィールドの値を持つ <code>FormData</code> のインスタンスを作成しており、またフォームのデータを送信するために <code>XMLHttpRequest</code> の <a href="/ja/docs/DOM/XMLHttpRequest#send()" title="XMLHttpRequest#send()"><code>send()</code></a> メソッドを使用しています。フィールド "webmasterfile" は {{domxref("Blob")}} です。<code>Blob</code> オブジェクトはファイルに似たオブジェクトで、イミュータブルな生デーです。Blob は必ずしも JavaScript ネイティブ形式のデータを表すとは限りません。{{domxref("File")}} インターフェイスは <code>Blob</code> を基にしており、blob の機能性を継承しつつユーザのシステムにあるファイル向けのサポートを拡張しています。<code>Blob</code> を作成するために、{{domxref("Blob.Blob","Blob()")}} コンストラクタを呼び出すことができます。</p> + +<h2 id="Retrieving_a_FormData_object_from_an_HTML_form" name="Retrieving_a_FormData_object_from_an_HTML_form">HTML フォームから FormData オブジェクトを取り出す</h2> + +<p>既存の {{HTMLElement("form")}} のデータを含む <code>FormData</code> オブジェクトを構築するために、<code>FormData</code> オブジェクトを作成する際にその form 要素を指定します:</p> + +<pre class="brush: js">var formData = new FormData(someFormElement); +</pre> + +<p>例:</p> + +<pre class="brush: js">var formElement = document.querySelector("form"); +var request = new XMLHttpRequest(); +request.open("POST", "submitform.php"); +request.send(new FormData(formElement)); +</pre> + +<p>以下のように、<code>FormData</code> オブジェクトをフォームより取得してから送信するまでの間に、追加のデータを付加することもできます:</p> + +<pre class="brush: js">var formElement = document.querySelector("form"); +var formData = new FormData(formElement); +var request = new XMLHttpRequest(); +request.open("POST", "submitform.php"); +formData.append("serialnumber", serialNumber++); +request.send(formData);</pre> + +<p>これにより、必ずしもユーザが編集可能である必要がない追加情報を含めるために、送信前にフォームデータを拡張することができます。</p> + +<h2 id="Sending_files_using_a_FormData_object" name="Sending_files_using_a_FormData_object">FormData オブジェクトを使用してファイルを送信する</h2> + +<p><code>FormData</code> を使用してファイルを送信することもできます。type が "file" である {{HTMLElement("input")}} 要素を、{{htmlelement("form")}} に含めます:</p> + +<pre class="brush: html"><form enctype="multipart/form-data" method="post" name="fileinfo"> + <label>Your email address:</label> + <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br /> + <label>Custom file label:</label> + <input type="text" name="filelabel" size="12" maxlength="32" /><br /> + <label>File to stash:</label> + <input type="file" name="file" required /> + <input type="submit" value="Stash the file!" /> +</form> +<div></div> +</pre> + +<p>そして、以下のようなコードを使用して送信できます:</p> + +<pre class="brush: js">var form = document.forms.namedItem("fileinfo"); +form.addEventListener('submit', function(ev) { + + var oOutput = document.querySelector("div"), + oData = new FormData(form); + + oData.append("CustomField", "This is some extra data"); + + var oReq = new XMLHttpRequest(); + oReq.open("POST", "stash.php", true); + oReq.onload = function(oEvent) { + if (oReq.status == 200) { + oOutput.innerHTML = "Uploaded!"; + } else { + oOutput.innerHTML = "Error " + oReq.status + " occurred when trying to upload your file.<br \/>"; + } + }; + + oReq.send(oData); + ev.preventDefault(); +}, false); +</pre> + +<div class="note"> +<p><strong>注記</strong>: フォームへの参照を渡した場合は、open() の呼び出しで指定したメソッドよりもフォームで指定したメソッドを優先します。</p> +</div> + +<p>以下のように、{{domxref("FormData")}} オブジェクトへ直接 {{domxref("File")}} や {{domxref("Blob")}} を追加することもできます:</p> + +<pre class="brush: js">data.append("myfile", myBlob, "filename.txt"); +</pre> + +<p>{{domxref("FormData.append","append()")}} メソッドを使用する際は省略可能な第 3 引数を使用して、<code>Content-Disposition</code> ヘッダに含めるファイル名を渡すことができます。これはサーバへ送信されます。ファイル名を指定しない (あるいは引数がサポートされない) 場合は、"blob" という名前を使用します。</p> + +<p>正しいオプションを設定することで、jQuery と共に <code>FormData</code> を使用することもできます:</p> + +<pre class="brush: js">var fd = new FormData(document.querySelector("form")); +fd.append("CustomField", "This is some extra data"); +$.ajax({ + url: "stash.php", + type: "POST", + data: fd, + processData: false, // jQuery がデータを処理しないよう指定 + contentType: false // jQuery が contentType を設定しないよう指定 +}); +</pre> + +<h2 id="Submitting_forms_and_uploading_files_via_AJAX_without_FormData_objects" name="Submitting_forms_and_uploading_files_via_AJAX_without_FormData_objects"><code>FormData</code> オブジェクトを<em>使用せずに</em> AJAX でフォームやファイルを送信する</h2> + +<p>FormData オブジェクトを<em>使用せず</em>に、<a href="/ja/docs/AJAX" title="AJAX">AJAX</a> でシリアライズや送信する方法を知りたい場合は、 <a href="/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files" title="DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">こちらの節</a>をご覧ください。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li> + <li>{{domxref("HTMLFormElement")}}</li> + <li>{{domxref("Blob")}}</li> + <li><a href="/ja/docs/Web/JavaScript/Typed_arrays">Typed Arrays</a></li> +</ul> diff --git a/files/ja/conflicting/web/api/globaleventhandlers/onclick/index.html b/files/ja/conflicting/web/api/globaleventhandlers/onclick/index.html new file mode 100644 index 0000000000..ac36968fa6 --- /dev/null +++ b/files/ja/conflicting/web/api/globaleventhandlers/onclick/index.html @@ -0,0 +1,45 @@ +--- +title: window.onclick +slug: Web/API/Window/onclick +tags: + - DOM + - Gecko + - Gecko DOM Reference + - Window +translation_of: Web/API/GlobalEventHandlers/onclick +translation_of_original: Web/API/Window/onclick +--- +<div> + {{ApiRef}}</div> +<h2 id="Summary" name="Summary">概要</h2> +<p>カーソルがウィンドウ内にある時にユーザがマウスボタンをクリックした場合に呼び出されます。このイベントはどのマウスボタンを押下した場合でも発生します。イベントが発生した地点はイベントのプロパティから取得する事が出来ます。</p> +<h2 id="Syntax" name="Syntax">構文</h2> +<pre class="syntaxbox">window.onclick =<i>funcRef</i>; +</pre> +<ul> + <li><code>funcRef</code>: 関数への参照</li> +</ul> +<h2 id="Example" name="Example">例</h2> +<pre class="brush:html"><!DOCTYPE html> +<html> +<head> +<meta charset="UTF-8" /> +<title>onclick のテスト</title> +<script> +function clickPage () { + alert("click event detected!"); +} + +window.onclick = clickPage; +</script> +</head> + +<body> + +<p>このページ上でマウスボタンをクリックしてみてください。</p> + +</body> +</html></pre> +<p>ユーザが Window 内をクリックすると <code>click</code> イベントが発生します。</p> +<h2 id="Specification" name="Specification">仕様</h2> +<p>どの仕様書にも含まれていません。</p> diff --git a/files/ja/conflicting/web/api/globaleventhandlers/onmousedown/index.html b/files/ja/conflicting/web/api/globaleventhandlers/onmousedown/index.html new file mode 100644 index 0000000000..b5f947f8be --- /dev/null +++ b/files/ja/conflicting/web/api/globaleventhandlers/onmousedown/index.html @@ -0,0 +1,48 @@ +--- +title: window.onmousedown +slug: Web/API/Window/onmousedown +tags: + - DOM + - Gecko + - Gecko DOM Reference + - Window +translation_of: Web/API/GlobalEventHandlers/onmousedown +translation_of_original: Web/API/Window/onmousedown +--- +<div> + {{ApiRef}}</div> +<h2 id="Summary" name="Summary">概要</h2> +<p>{{domxref("window")}} 上での mousedown イベントに対応するイベントハンドラです。</p> +<h2 id="Syntax" name="Syntax">構文</h2> +<pre class="syntaxbox">window.onmousedown = <em>funcRef</em>; +</pre> +<ul> + <li><code>funcRef</code> : 関数への参照、または関数式</li> +</ul> +<h2 id="Example" name="Example">例</h2> +<pre class="brush:js">window.onmousedown = doFunc; +</pre> +<pre class="brush:html"><!DOCTYPE html> +<html lang="ja"> +<head> +<meta charset="UTF-8" /> +<title>onmousedown のテスト</title> + +<script> +window.onmousedown = mousedown; + +function mousedown() { + alert("mousedown イベントが発生しました。"); +} +</script> + +</head> +<body> +<p>ページ上でのマウスクリック（右クリック、左クリック、中ボタン）で mousedown イベントが発生します。</p> +</body> +</html> +</pre> +<h2 id="Notes" name="Notes">注記</h2> +<p>ページ上の任意の場所でマウスボタンをクリックすると mousedown イベントが発生し、アラートを表示する関数が呼び出されます。</p> +<h2 id="Specification" name="Specification">仕様</h2> +<p>標準仕様書には含まれていません。</p> diff --git a/files/ja/conflicting/web/api/globaleventhandlers/onmouseup/index.html b/files/ja/conflicting/web/api/globaleventhandlers/onmouseup/index.html new file mode 100644 index 0000000000..f7133126a9 --- /dev/null +++ b/files/ja/conflicting/web/api/globaleventhandlers/onmouseup/index.html @@ -0,0 +1,57 @@ +--- +title: window.onmouseup +slug: Web/API/Window/onmouseup +tags: + - DOM + - Gecko + - Gecko DOM Reference + - Window +translation_of: Web/API/GlobalEventHandlers/onmouseup +translation_of_original: Web/API/Window/onmouseup +--- +<div> + {{ApiRef}}</div> +<h2 id="Summary" name="Summary">概要</h2> +<p>{{domxref("window")}} 上の <code>mouseup</code> イベントに対応するイベントハンドラです。</p> +<h2 id="Syntax" name="Syntax">構文</h2> +<pre class="syntaxbox">window.onmouseup = <var>funcRef</var>; +</pre> +<ul> + <li><code>funcRef</code> : 関数への参照、または関数式</li> +</ul> +<h2 id="Example" name="Example">例</h2> +<pre class="brush:js">function doFunc() { + alert("こんにちは！"); +} + +window.onmouseup = doFunc; +</pre> +<pre class="brush:js">window.onmouseup = function() { + alert("こんばんは！"); +}; +</pre> +<pre class="brush:html"><!DOCTYPE html> +<html lang="ja"> +<head> +<meta charset="UTF-8" /> +<title>onmouseup のテスト</title> + +<script> +window.onmouseup = mouseup; + +function mouseup() { + alert("mouseup イベントを検出!"); +} +</script> + +</head> +<body> +<p>ページ上をマウスのボタンでクリックし、数秒押し続け、ボタンを放します。 +マウスのボタンを放すことで、 mouseup イベントが発生します。</p> +</body> +</html> +</pre> +<h2 id="Notes" name="Notes">注記</h2> +<p><code>mouseup</code> イベントは、ドキュメント内のどこででも、ユーザがマウスの左ボタンを放すことによって発生します。</p> +<h2 id="Specification" name="Specification">仕様</h2> +<p>標準仕様書には含まれていません。</p> diff --git a/files/ja/conflicting/web/api/html_drag_and_drop_api/index.html b/files/ja/conflicting/web/api/html_drag_and_drop_api/index.html new file mode 100644 index 0000000000..6b9a4be242 --- /dev/null +++ b/files/ja/conflicting/web/api/html_drag_and_drop_api/index.html @@ -0,0 +1,9 @@ +--- +title: DragDrop +slug: DragDrop +--- +<p> </p> + +<p>This page was auto-generated because a user created a sub-page to this page.</p> + +<p> </p> diff --git a/files/ja/conflicting/web/api/index.html b/files/ja/conflicting/web/api/index.html new file mode 100644 index 0000000000..e069431e6e --- /dev/null +++ b/files/ja/conflicting/web/api/index.html @@ -0,0 +1,58 @@ +--- +title: element.name +slug: Web/API/Element/name +translation_of: Web/API +translation_of_original: Web/API/Element/name +--- +<p>{{ ApiRef() }}</p> +<h3 class="editable" id="概要" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.8em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 1.142em; font-family: Georgia, Times, 'Times New Roman', serif; border-bottom-width: 1px; border-bottom-style: solid; color: rgb(51, 51, 51); font-style: normal; font-variant: normal; letter-spacing: normal; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><span>概要</span></h3> +<p><strong>name</strong> はDOM オブジェクトの<code>name</code> 属性を取得または設定します。</p> +<p>ただし、この属性が適用されるのは次の要素に限られます。</p> +<p>{{ HTMLelement("a") }}, {{ HTMLelement("applet") }}, {{ HTMLelement("form") }}, {{ HTMLelement("frame") }}, {{ HTMLelement("iframe") }}, {{ HTMLelement("img") }}, {{ HTMLelement("input") }}, {{ HTMLelement("map") }}, {{ HTMLelement("meta") }}, {{ HTMLelement("object") }}, {{ HTMLelement("option") }}, {{ HTMLelement("param") }}, {{ HTMLelement("select") }}, {{ HTMLelement("textarea") }}.</p> +<p>name は、 {{ domxref("document.getElementsByName()") }} メソッドか、 <a href="/en/DOM/HTMLFormElement" title="en/DOM/form">form</a> と <a href="/en/DOM/form.elements" title="en/DOM/form.elements">form.elements</a> のコレクションで使用することができます。 form や form.elements のコレクションで使われた場合、一つの要素かコレクションを返します。</p> +<h3 class="editable" id="構文" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.8em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 1.142em; font-family: Georgia, Times, 'Times New Roman', serif; border-bottom-width: 1px; border-bottom-style: solid; color: rgb(51, 51, 51); font-style: normal; font-variant: normal; letter-spacing: normal; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><span>構文</span></h3> +<pre class="eval"><em>HTMLElement</em>.name = <em>string</em>; +var elName = <em>HTMLElement</em>.name; + +var fControl = <em>HTMLFormElement</em>.<em>elementName</em>; +var controlCollection = <em>HTMLFormElement</em>.elements.<em>elementName</em>; +</pre> +<h3 class="editable" id="例" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.8em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 1.142em; font-family: Georgia, Times, 'Times New Roman', serif; border-bottom-width: 1px; border-bottom-style: solid; color: rgb(51, 51, 51); font-style: normal; font-variant: normal; letter-spacing: normal; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><span>例</span></h3> +<pre class="eval"><form action="" name="formA"> + <input type="text" value="foo"> +</form> + +<script type="text/javascript"> + + // form の最初の要素の参照を取得します。 + var formElement = document.forms['formA'].elements[0]; + + // name 属性を設定します。 + formElement.name = 'inputA'; + + // input の value を表示します。 + alert(document.forms['formA'].elements['inputA'].value); + +</script> +</pre> +<h3 class="editable" id="注記" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.8em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 1.142em; font-family: Georgia, Times, 'Times New Roman', serif; border-bottom-width: 1px; border-bottom-style: solid; color: rgb(51, 51, 51); font-style: normal; font-variant: normal; letter-spacing: normal; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><span>注記</span></h3> +<p>Internet Explorer (IE)では、 {{ domxref("document.createElement()") }}を使って作成されたDOM オブジェクトの name 属性 は、設定および変更をすることができません。</p> +<h3 class="editable" id="仕様" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.8em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 1.142em; font-family: Georgia, Times, 'Times New Roman', serif; border-bottom-width: 1px; border-bottom-style: solid; color: rgb(51, 51, 51); font-style: normal; font-variant: normal; letter-spacing: normal; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><span>仕様</span></h3> +<p>W3C DOM 2 HTML Specification:</p> +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-32783304">Anchor</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39843695">Applet</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-22051454">Form</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-91128709">Frame</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-96819659">iFrame</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-47534097">Image</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-89658498">Input</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-52696514">Map</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-31037081">Meta</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-20110362">Object</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-89658498">Option</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-59871447">Param</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-41636323">Select</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-70715578">Textarea</a></li> +</ul> +<p>{{ languages( { "en" :"en/DOM/element.name", "fr": "fr/DOM/element.name", "pl": "pl/DOM/element.name" } ) }}</p> diff --git a/files/ja/conflicting/web/api/mediastream_recording_api/index.html b/files/ja/conflicting/web/api/mediastream_recording_api/index.html new file mode 100644 index 0000000000..a2e3ec8eaf --- /dev/null +++ b/files/ja/conflicting/web/api/mediastream_recording_api/index.html @@ -0,0 +1,187 @@ +--- +title: MediaRecorder API +slug: Web/API/MediaRecorder_API +translation_of: Web/API/MediaStream_Recording_API +translation_of_original: Web/API/MediaRecorder_API +--- +<div class="summary"> +<p><span class="seoSummary">MediaRecorder API (MediaStream Recording) はインプットデバイスからのメディアストリームを記録するための API です。記録したストリームは PCM データのエンコードと言った操作をせずに利用できます。 {{ domxref("Navigator.getUserMedia()") }} を単体で利用する際の利用が想定されています。</span></p> +</div> + +<h2 id="キーコンセプトと利用例">キーコンセプトと利用例</h2> + +<p>MediaRecorder を {{ domxref("Navigator.getUserMedia()") }} とともに利用することで、メディアデータを記録できます。単純には、 {{ domxref("MediaRecorder.start()") }} メソッドを呼ぶことで記録を開始できます。MediaStream の終了、もしくは {{ domxref("MediaRecorder.stop()") }} や{{ domxref("MediaRecorder.requestData()") }}<code> の呼び出しによって記録用のデータが準備できた際には、dataavailable</code> イベントが発生します。現在のところ、データはプラットホームの標準でエンコードされ、 <code>dataavailable</code>の data 属性に {{ domxref("Blob") }} として配置されます。</p> + +<p>アプリは利用可能なエンコード方式を問い合わせ、その中から利用するものを選択することも可能です。またデータをより小さなバッファとして一定間隔で受け取ることもできます。間隔は {{ domxref("MediaRecorder.start()") }} を呼ぶ際に指定できます。</p> + +<div class="note"> +<p><strong>注意</strong>: MediaRecorder API の基本的な利用方法については <a href="/en-US/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API">MediaRecorder API の利用</a> をご覧ください。</p> +</div> + +<h2 id="MediaRecorder_インタフェース">MediaRecorder インタフェース</h2> + +<dl> + <dt>{{ domxref("MediaRecorder") }}</dt> + <dd>MediaRecorder API を利用してメディアデータを記録するために必要な機能を保持するオブジェクト。 <code>MediaRecorder()</code> コンストラクタによって作成される。</dd> + <dt>{{ domxref("BlobEvent") }}</dt> + <dd>{{ domxref("MediaRecorder") }} によって記録されたメディアデータを保持する {{ domxref("Blob") }} オブジェクトへのアクセス手段を提供する。</dd> +</dl> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js; highlight:[11,14,19,23] notranslate">if (navigator.getUserMedia) { + console.log('getUserMedia supported.'); + navigator.getUserMedia ( + // constraints - only audio needed for this app + { + audio: true + }, + + // Success callback + function(stream) { + var mediaRecorder = new MediaRecorder(stream); + + record.onclick = function() { + mediaRecorder.start(); + console.log("recorder started"); + } + + stop.onclick = function() { + mediaRecorder.stop(); + console.log("recorder stopped"); + } + + mediaRecorder.ondataavailable = function(e) { + console.log("data available after MediaRecorder.stop() called."); + + var audio = document.createElement('audio'); + audio.setAttribute('controls', ''); + var audioURL = window.URL.createObjectURL(e.data); + audio.src = audioURL; + } + }, + + // Error callback + function(err) { + console.log('The following gUM error occured: ' + err); + } + ); +} else { + console.log('getUserMedia not supported on your browser!'); +}</pre> + +<div class="note"> +<p><strong>注意</strong>: このサンプルコードはWeb Dictaphoneのデモを参考にしています。コードを簡単にする為にいくつかの行は省略されています。完全なコードは <a href="https://github.com/mdn/web-dictaphone/">元ソース</a> を参照して下さい。</p> +</div> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ互換性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td> + <p>{{ CompatChrome(47.0) }}</p> + </td> + <td>{{ CompatGeckoDesktop("25.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatChrome(47.0) }}</td> + <td>{{ CompatGeckoDesktop("25.0") }}</td> + <td>1.3</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] The initial Firefox OS implementation only supported audio recording.</p> + +<p>[2] To use {{domxref("MediaRecorder")}} in Chrome 47 and 48, enable <strong>experimental Web Platform features</strong> from the <code>chrome://flags</code> page.</p> + +<p>[3] Audio recording works in Chrome 49 and above; Chrome 47 and 48 only support video recording.</p> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('MediaStream Recording', '#MediaRecorderAPI')}}</td> + <td>{{Spec2('MediaStream Recording')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="関連項目">関連項目</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API">MediaRecorder API の利用 </a></li> + <li><a href="http://mdn.github.io/web-dictaphone/">Web Dictaphone</a>: MediaRecorder + getUserMedia + Web Audio API visualization demo, by <a href="https://twitter.com/chrisdavidmills">Chris Mills</a> (<a href="https://github.com/mdn/web-dictaphone/">source on Github</a>.)</li> + <li><a href="http://simpl.info/mediarecorder/">simpl.info MediaStream Recording demo</a>, by <a href="https://twitter.com/sw12">Sam Dutton</a>.</li> + <li>{{ domxref("Navigator.getUserMedia") }}</li> +</ul> + +<section id="Quick_Links"> +<h3 id="クイックリンク">クイックリンク</h3> + +<ol> + <li data-default-state="open"><strong><a href="#">ガイド</a></strong> + + <ol> + <li><a href="/en-US/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API">MediaRecorder API の利用</a></li> + <li><a href="/en-US/docs/WebRTC/Taking_webcam_photos">getUserMedia を利用して webcam から写真を撮影する</a></li> + </ol> + </li> + <li data-default-state="open"><strong><a href="#">インタフェース</a></strong> + <ol> + <li>{{ domxref("MediaRecorder") }}</li> + <li>{{ domxref("BlobEvent") }}</li> + </ol> + </li> + <li data-default-state="open"><strong><a href="#">例</a></strong> + <ol> + <li><a href="http://mdn.github.io/web-dictaphone">Web Dictaphone</a></li> + <li><a href="http://simpl.info/mediarecorder/">MediaStream の記録例</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/ja/conflicting/web/api/mouseevent/button/index.html b/files/ja/conflicting/web/api/mouseevent/button/index.html new file mode 100644 index 0000000000..572f611ebc --- /dev/null +++ b/files/ja/conflicting/web/api/mouseevent/button/index.html @@ -0,0 +1,60 @@ +--- +title: event.button +slug: Web/API/Event/button +tags: + - DOM + - Gecko + - Gecko DOM Reference +translation_of: Web/API/MouseEvent/button +translation_of_original: Web/API/event.button +--- +<p>{{ ApiRef() }}</p> +<h3 id="Summary" name="Summary">Summary</h3> +<p>イベントを発生させたマウスのボタンを示しています。</p> +<h3 id="Syntax" name="Syntax">Syntax</h3> +<pre>var buttonCode = event.button; +</pre> +<p>state を変えたボタンを示す整数値を返します。</p> +<ul> + <li>0 は普通の'クリック'であり、通常は左クリック</li> + <li>1 は中ボタンであり、通常はホイールのクリック</li> + <li>2 は右ボタンであり、通常は右クリック</li> +</ul> +<p>ボタンの順序はどのようにポインティングデバイスが設定されているかによります。</p> +<h3 id="Example" name="Example">Example</h3> +<pre><script type="text/javascript"> + +function whichButton(e) +{ + // Handle different event models + var e = e || window.event; + var btnCode; + + if ('object' == typeof e){ + btnCode = e.button; + + switch (btnCode){ + case 0 : alert('Left button clicked'); + break; + case 1 : alert('Middle button clicked'); + break; + case 2 : alert('Right button clicked'); + break; + default : alert('Unexpected code: ' + btnCode); + } + } +} + +</script> + +<p onclick="whichButton(event);">Click with mouse...</p> + +</pre> +<h3 id="Notes" name="Notes">Notes</h3> +<p>マウスのクリックはしばしばUIによって横取りされるため、ある状況では普通のクリック（通常は左クリック）でないマウスのクリックを検出することが普通のクリックよりも難しいかもしれません。</p> +<p>ユーザーはポインティングデバイスのボタンの設定を変更する可能性があり、たといこのイベントの button プロパティが 0 であったとしても、それは物理的にポインティングデバイスの最も左に存在するボタンによるものではないかもしれません。しかし、そんな場合にも、標準的なボタン配置における左クリックと同様の動作をするべきであるとされています。</p> +<h3 id="Specification" name="Specification">Specification</h3> +<p>DOM 2 Events Specification: <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-MouseEvent-button">button</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/event.button", "pl": "pl/DOM/event.button" } ) }}</p> diff --git a/files/ja/conflicting/web/api/navigator/index.html b/files/ja/conflicting/web/api/navigator/index.html new file mode 100644 index 0000000000..141fc19189 --- /dev/null +++ b/files/ja/conflicting/web/api/navigator/index.html @@ -0,0 +1,620 @@ +--- +title: navigator +slug: DOM_Client_Object_Cross-Reference/navigator +translation_of: Web/API/Navigator +translation_of_original: DOM_Client_Object_Cross-Reference/navigator +--- +<p> +</p> +<table class="standard-table"> +<tbody><tr> +<th>ユーザエージェント</th> +<th>プロパティ</th> +<th>読み取り専用</th> +<th>データ型</th> +<th>デフォルト値</th> +</tr> +<tr> +<td>Gecko-1.0.1</td> +<td>appCodeName</td> +<td>true</td> +<td>string</td> +<td>Mozilla</td> +</tr> +<tr> +<td>Gecko-1.4</td> +<td>appCodeName</td> +<td>true</td> +<td>string</td> +<td>Mozilla</td> +</tr> +<tr> +<td>Gecko-1.7.8</td> +<td>appCodeName</td> +<td>true</td> +<td>string</td> +<td>Mozilla</td> +</tr> +<tr> +<td>IE-6.0</td> +<td>appCodeName</td> +<td>true</td> +<td>string</td> +<td>Mozilla</td> +</tr> +<tr> +<td>Opera-8.0</td> +<td>appCodeName</td> +<td>false</td> +<td>string</td> +<td>Mozilla</td> +</tr> +<tr> +<td>IE-6.0</td> +<td>appMinorVersion</td> +<td>true</td> +<td>string</td> +<td>{{ mediawiki.external('hotfixes installed') }}</td> +</tr> +<tr> +<td>Opera-8.0</td> +<td>appMinorVersion</td> +<td>false</td> +<td>string</td> +<td> +</td></tr> +<tr> +<td>Gecko-1.0.1</td> +<td>appName</td> +<td>true</td> +<td>string</td> +<td>Netscape</td> +</tr> +<tr> +<td>Gecko-1.4</td> +<td>appName</td> +<td>true</td> +<td>string</td> +<td>Netscape</td> +</tr> +<tr> +<td>Gecko-1.7.8</td> +<td>appName</td> +<td>true</td> +<td>string</td> +<td>Netscape</td> +</tr> +<tr> +<td>IE-6.0</td> +<td>appName</td> +<td>true</td> +<td>string</td> +<td>Microsoft Internet Explorer</td> +</tr> +<tr> +<td>Opera-8.0</td> +<td>appName</td> +<td>false</td> +<td>string</td> +<td>Microsoft Internet Explorer</td> +</tr> +<tr> +<td>Gecko-1.0.1</td> +<td>appVersion</td> +<td>true</td> +<td>string</td> +<td>depends on Operating System</td> +</tr> +<tr> +<td>Gecko-1.4</td> +<td>appVersion</td> +<td>true</td> +<td>string</td> +<td>5.0 ({{ mediawiki.external('platform') }}; {{ mediawiki.external('language') }};)</td> +</tr> +<tr> +<td>Gecko-1.7.8</td> +<td>appVersion</td> +<td>true</td> +<td>string</td> +<td>5.0 ({{ mediawiki.external('platform') }}; {{ mediawiki.external('language') }})</td> +</tr> +<tr> +<td>IE-6.0</td> +<td>appVersion</td> +<td>true</td> +<td>string</td> +<td>4.0 (compatible; MSIE 6.0; ...)</td> +</tr> +<tr> +<td>Opera-8.0</td> +<td>appVersion</td> +<td>false</td> +<td>string</td> +<td>4.0 (compatible; MSIE 6.0; {{ mediawiki.external('platform') }}; {{ mediawiki.external('language') }})</td> +</tr> +<tr> +<td>IE-6.0</td> +<td>browserLanguage</td> +<td>true</td> +<td>string</td> +<td>{{ mediawiki.external('depends on language') }}</td> +</tr> +<tr> +<td>Opera-8.0</td> +<td>browserLanguage</td> +<td>false</td> +<td>string</td> +<td>en</td> +</tr> +<tr> +<td>Gecko-1.0.1</td> +<td>cookieEnabled</td> +<td>true</td> +<td>boolean</td> +<td>true</td> +</tr> +<tr> +<td>Gecko-1.4</td> +<td>cookieEnabled</td> +<td>true</td> +<td>boolean</td> +<td>true</td> +</tr> +<tr> +<td>Gecko-1.7.8</td> +<td>cookieEnabled</td> +<td>true</td> +<td>boolean</td> +<td>false</td> +</tr> +<tr> +<td>IE-6.0</td> +<td>cookieEnabled</td> +<td>true</td> +<td>boolean</td> +<td>true</td> +</tr> +<tr> +<td>Opera-8.0</td> +<td>cookieEnabled</td> +<td>false</td> +<td>boolean</td> +<td>true</td> +</tr> +<tr> +<td>IE-6.0</td> +<td>cpuClass</td> +<td>true</td> +<td>string</td> +<td>depends on CPU</td> +</tr> +<tr> +<td>Gecko-1.0.1</td> +<td>javaEnabled</td> +<td>true</td> +<td>function</td> +<td> +</td></tr> +<tr> +<td>Gecko-1.4</td> +<td>javaEnabled</td> +<td>true</td> +<td>function</td> +<td> +</td></tr> +<tr> +<td>Gecko-1.7.8</td> +<td>javaEnabled</td> +<td>true</td> +<td>function</td> +<td> +</td></tr> +<tr> +<td>IE-6.0</td> +<td>javaEnabled</td> +<td>true</td> +<td>function</td> +<td> +</td></tr> +<tr> +<td>Opera-8.0</td> +<td>javaEnabled</td> +<td>true</td> +<td>function</td> +<td> +</td></tr> +<tr> +<td>Gecko-1.0.1</td> +<td>language</td> +<td>true</td> +<td>string</td> +<td>depends on default language</td> +</tr> +<tr> +<td>Gecko-1.4</td> +<td>language</td> +<td>true</td> +<td>string</td> +<td>en-US</td> +</tr> +<tr> +<td>Gecko-1.7.8</td> +<td>language</td> +<td>true</td> +<td>string</td> +<td>en-US</td> +</tr> +<tr> +<td>Opera-8.0</td> +<td>language</td> +<td>false</td> +<td>string</td> +<td>en</td> +</tr> +<tr> +<td>Gecko-1.0.1</td> +<td>mimeTypes</td> +<td>true</td> +<td>object</td> +<td>{{ mediawiki.external('object MimeTypeArray') }}</td> +</tr> +<tr> +<td>Gecko-1.4</td> +<td>mimeTypes</td> +<td>true</td> +<td>object</td> +<td>{{ mediawiki.external('object MimeTypeArray') }}</td> +</tr> +<tr> +<td>Gecko-1.7.8</td> +<td>mimeTypes</td> +<td>true</td> +<td>object</td> +<td>{{ mediawiki.external('object MimeTypeArray') }}</td> +</tr> +<tr> +<td>IE-6.0</td> +<td>mimeTypes</td> +<td>true</td> +<td>object</td> +<td> +</td></tr> +<tr> +<td>Opera-8.0</td> +<td>mimeTypes</td> +<td>false</td> +<td>object</td> +<td>{{ mediawiki.external('object MimeTypes') }}</td> +</tr> +<tr> +<td>IE-6.0</td> +<td>onLine</td> +<td>true</td> +<td>boolean</td> +<td>true</td> +</tr> +<tr> +<td>IE-6.0</td> +<td>opsProfile</td> +<td>true</td> +<td>object</td> +<td> +</td></tr> +<tr> +<td>Gecko-1.0.1</td> +<td>oscpu</td> +<td>true</td> +<td>string</td> +<td>depends on Operating System</td> +</tr> +<tr> +<td>Gecko-1.4</td> +<td>oscpu</td> +<td>true</td> +<td>string</td> +<td> +</td></tr> +<tr> +<td>Gecko-1.7.8</td> +<td>oscpu</td> +<td>true</td> +<td>string</td> +<td>{{ mediawiki.external('depends on Operating System') }}</td> +</tr> +<tr> +<td>Gecko-1.0.1</td> +<td>platform</td> +<td>true</td> +<td>string</td> +<td>depends on Operating System</td> +</tr> +<tr> +<td>Gecko-1.4</td> +<td>platform</td> +<td>true</td> +<td>string</td> +<td> +</td></tr> +<tr> +<td>Gecko-1.7.8</td> +<td>platform</td> +<td>true</td> +<td>string</td> +<td>{{ mediawiki.external('depends on Operating System') }}</td> +</tr> +<tr> +<td>IE-6.0</td> +<td>platform</td> +<td>true</td> +<td>string</td> +<td>depends on Operating System</td> +</tr> +<tr> +<td>Opera-8.0</td> +<td>platform</td> +<td>false</td> +<td>string</td> +<td>{{ mediawiki.external('depends on Operating System') }}</td> +</tr> +<tr> +<td>Gecko-1.0.1</td> +<td>plugins</td> +<td>true</td> +<td>object</td> +<td>{{ mediawiki.external('object PluginArray') }}</td> +</tr> +<tr> +<td>Gecko-1.4</td> +<td>plugins</td> +<td>true</td> +<td>object</td> +<td>{{ mediawiki.external('object PluginArray') }}</td> +</tr> +<tr> +<td>Gecko-1.7.8</td> +<td>plugins</td> +<td>true</td> +<td>object</td> +<td>{{ mediawiki.external('object PluginArray') }}</td> +</tr> +<tr> +<td>IE-6.0</td> +<td>plugins</td> +<td>true</td> +<td>object</td> +<td> +</td></tr> +<tr> +<td>Opera-8.0</td> +<td>plugins</td> +<td>false</td> +<td>object</td> +<td>{{ mediawiki.external('object PluginArray') }}</td> +</tr> +<tr> +<td>Gecko-1.0.1</td> +<td>preference</td> +<td>true</td> +<td>function</td> +<td> +</td></tr> +<tr> +<td>Gecko-1.4</td> +<td>preference</td> +<td>true</td> +<td>function</td> +<td> +</td></tr> +<tr> +<td>Gecko-1.7.8</td> +<td>preference</td> +<td>true</td> +<td>function</td> +<td> +</td></tr> +<tr> +<td>Gecko-1.0.1</td> +<td>product</td> +<td>true</td> +<td>string</td> +<td>Gecko</td> +</tr> +<tr> +<td>Gecko-1.4</td> +<td>product</td> +<td>true</td> +<td>string</td> +<td>Gecko</td> +</tr> +<tr> +<td>Gecko-1.7.8</td> +<td>product</td> +<td>true</td> +<td>string</td> +<td>Gecko</td> +</tr> +<tr> +<td>Gecko-1.0.1</td> +<td>productSub</td> +<td>true</td> +<td>string</td> +<td>CCYYMMDD - build date</td> +</tr> +<tr> +<td>Gecko-1.4</td> +<td>productSub</td> +<td>true</td> +<td>string</td> +<td>CCYYMMDD</td> +</tr> +<tr> +<td>Gecko-1.7.8</td> +<td>productSub</td> +<td>true</td> +<td>string</td> +<td>20050511</td> +</tr> +<tr> +<td>Gecko-1.0.1</td> +<td>securityPolicy</td> +<td>true</td> +<td>string</td> +<td> +</td></tr> +<tr> +<td>Gecko-1.4</td> +<td>securityPolicy</td> +<td>true</td> +<td>string</td> +<td> +</td></tr> +<tr> +<td>Gecko-1.7.8</td> +<td>securityPolicy</td> +<td>true</td> +<td>string</td> +<td> +</td></tr> +<tr> +<td>IE-6.0</td> +<td>systemLanguage</td> +<td>true</td> +<td>string</td> +<td>depends on default langauge</td> +</tr> +<tr> +<td>Gecko-1.0.1</td> +<td>taintEnabled</td> +<td>true</td> +<td>function</td> +<td> +</td></tr> +<tr> +<td>Gecko-1.4</td> +<td>taintEnabled</td> +<td>true</td> +<td>function</td> +<td> +</td></tr> +<tr> +<td>Gecko-1.7.8</td> +<td>taintEnabled</td> +<td>true</td> +<td>function</td> +<td>false {{ Obsolete_inline() }}</td> +</tr> +<tr> +<td>IE-6.0</td> +<td>taintEnabled</td> +<td>true</td> +<td>function</td> +<td> +</td></tr> +<tr> +<td>Opera-8.0</td> +<td>taintEnabled</td> +<td>true</td> +<td>function</td> +<td> +</td></tr> +<tr> +<td>Gecko-1.0.1</td> +<td>userAgent</td> +<td>true</td> +<td>string</td> +<td>Mozilla/5.0 (...; rv:1.0.1) Gecko/CCYYMMDD Vendor/version</td> +</tr> +<tr> +<td>Gecko-1.4</td> +<td>userAgent</td> +<td>true</td> +<td>string</td> +<td>Mozilla/5.0 (...; rv:1.4) Gecko/20030624</td> +</tr> +<tr> +<td>Gecko-1.7.8</td> +<td>userAgent</td> +<td>true</td> +<td>string</td> +<td>Mozilla/5.0 (...; rv:1.7.8) Gecko/20050511</td> +</tr> +<tr> +<td>IE-6.0</td> +<td>userAgent</td> +<td>true</td> +<td>string</td> +<td>Mozilla/4.0 (compatible; MSIE 6.0; ...)</td> +</tr> +<tr> +<td>Opera-8.0</td> +<td>userAgent</td> +<td>false</td> +<td>string</td> +<td>Mozilla/4.0 (compatible; MSIE 6.0; ...) Opera 8.0</td> +</tr> +<tr> +<td>IE-6.0</td> +<td>userLanguage</td> +<td>true</td> +<td>string</td> +<td>depends on default langauge</td> +</tr> +<tr> +<td>Opera-8.0</td> +<td>userLanguage</td> +<td>false</td> +<td>string</td> +<td>en</td> +</tr> +<tr> +<td>IE-6.0</td> +<td>userProfile</td> +<td>true</td> +<td>object</td> +<td> +</td></tr> +<tr> +<td>Gecko-1.0.1</td> +<td>vendor</td> +<td>true</td> +<td>string</td> +<td>empty if Mozilla, otherwise matches Vendor in userAgent</td> +</tr> +<tr> +<td>Gecko-1.4</td> +<td>vendor</td> +<td>true</td> +<td>string</td> +<td> +</td></tr> +<tr> +<td>Gecko-1.7.8</td> +<td>vendor</td> +<td>true</td> +<td>string</td> +<td> +</td></tr> +<tr> +<td>Gecko-1.0.1</td> +<td>vendorSub</td> +<td>true</td> +<td>string</td> +<td>empty if Mozilla, otherwise matches version in userAgent</td> +</tr> +<tr> +<td>Gecko-1.4</td> +<td>vendorSub</td> +<td>true</td> +<td>string</td> +<td> +</td></tr> +<tr> +<td>Gecko-1.7.8</td> +<td>vendorSub</td> +<td>true</td> +<td>string</td> +<td> +</td></tr> +</tbody></table> +{{ languages( { "en": "en/DOM_Client_Object_Cross-Reference/navigator" } ) }} diff --git a/files/ja/conflicting/web/api/node/index.html b/files/ja/conflicting/web/api/node/index.html new file mode 100644 index 0000000000..1de7600c48 --- /dev/null +++ b/files/ja/conflicting/web/api/node/index.html @@ -0,0 +1,33 @@ +--- +title: Node.baseURIObject +slug: Web/API/Node/baseURIObject +tags: + - DOM + - DOM 3 + - Gecko + - Node +translation_of: Web/API/Node +translation_of_original: Web/API/Node/baseURIObject +--- +<div>{{ApiRef}} {{Fx_minversion_header("3")}} {{Non-standard_header}}</div> + +<h2 id="Summary" name="Summary">概要</h2> + +<p><code>baseURIObject</code> は、文書の基底 URL (base URL) を示す {{Interface("nsIURI")}} オブジェクトを返します。</p> + +<p>このプロパティは、HTML 、 XUL、 SVG、 MathML 等のノード全てに存在します。但し、このプロパティの使用を試みるスクリプトが UniversalXPConnect 特権を持つ場合に限ります。</p> + +<p>基底 URL の詳細については {{domxref("Node.baseURI")}} の頁をご覧下さい。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><var>uriObj</var> = element.baseURIObject +</pre> + +<h2 id="Notes" name="Notes">注記</h2> + +<p>このプロパティは読取専用です。書込を試みた場合、例外がスローされます。また、このプロパティには、特権を持つコードからのみアクセス可能です。</p> + +<h2 id="Specification" name="Specification">仕様書</h2> + +<p>標準仕様書には含まれません。</p> diff --git a/files/ja/conflicting/web/api/node_378aed5ed6869e50853edbc988cf9556/index.html b/files/ja/conflicting/web/api/node_378aed5ed6869e50853edbc988cf9556/index.html new file mode 100644 index 0000000000..41547615f2 --- /dev/null +++ b/files/ja/conflicting/web/api/node_378aed5ed6869e50853edbc988cf9556/index.html @@ -0,0 +1,21 @@ +--- +title: Node.nodePrincipal +slug: Web/API/Node/nodePrincipal +tags: + - DOM + - Gecko + - Gecko DOM Reference +translation_of: Web/API/Node +translation_of_original: Web/API/Node/nodePrincipal +--- +<div> + {{ApiRef}}{{Fx_minversion_header("3")}}{{Non-standard_header}}</div> +<h2 id="Summary" name="Summary">概要</h2> +<p><code>nodePrincipal</code> は、ノードの現在のセキュリティ・コンテキストを表す {{interface("nsIPrincipal")}} オブジェクトを返します</p> +<p>{{note("このプロパティは、HTML 、XUL 、SVG 、MathML などの全てのノードに存在しますが、スクリプトが使用を試みた場合にのみ、 UniversalXPConnect 特権を持ちます。")}}</p> +<h2 id="Syntax" name="Syntax">構文</h2> +<pre class="syntaxbox"><var>principalObj</var> = element.nodePrincipal</pre> +<h2 id="Notes" name="Notes">注記</h2> +<p>このプロパティは読取専用です。書込みを試みた場合、例外がスローされます。また、このプロパティには特権コードからのみアクセス可能です。</p> +<h2 id="Specification" name="Specification">仕様書</h2> +<p>仕様書はありません。</p> diff --git a/files/ja/conflicting/web/api/url/index.html b/files/ja/conflicting/web/api/url/index.html new file mode 100644 index 0000000000..ac758d1b3b --- /dev/null +++ b/files/ja/conflicting/web/api/url/index.html @@ -0,0 +1,101 @@ +--- +title: window.URL +slug: Web/API/Window/URL +tags: + - API + - DOM + - Property + - Reference + - Window +translation_of: Web/API/URL +translation_of_original: Web/API/Window/URL +--- +<p>{{ApiRef("Window")}}{{SeeCompatTable}}</p> + +<p><strong><code>Window.URL</code></strong> プロパティは、オブジェクト URL の作成や操作に用いる静的なメソッドを提供します。</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="構文">構文</h2> + +<p>静的なメソッドの呼び出し:</p> + +<pre class="syntaxbox"><code><var>img</var>.src = URL.{{domxref("URL.createObjectURL", "createObjectURL")}}(<var>blob</var>);</code></pre> + +<p>新しいオブジェクトの構築:</p> + +<pre class="syntaxbox"><code>var <var>url</var> = new {{domxref("URL.URL", "URL")}}("../cats/", "https://www.example.com/dogs/");</code></pre> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">ステータス</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('URL', '#dom-url', 'URL')}}</td> + <td>{{Spec2('URL')}}</td> + <td>初期定義。</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基本サポート</td> + <td>8.0<sup>[2]</sup></td> + <td>{{CompatGeckoDesktop("2.0")}}<sup>[1]</sup><br> + {{CompatGeckoDesktop("19.0")}}</td> + <td>10.0</td> + <td>15.0<sup>[2]</sup></td> + <td>6.0<sup>[2]</sup><br> + 7.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatVersionUnknown}}<sup>[2]</sup></td> + <td>{{CompatGeckoMobile("14.0")}}<sup>[1]</sup><br> + {{CompatGeckoMobile("19.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>15.0<sup>[2]</sup></td> + <td>6.0<sup>[2]</sup></td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Gecko 2 (Firefox 4) から Gecko 18 まで、Gecko は非標準の <code>nsIDOMMozURLProperty</code> 内部型を返していました。 実際には、何の違いもありません。</p> + +<p>[2] 非標準の <code>webkitURL</code> という名前で実装されています。</p> diff --git a/files/ja/conflicting/web/api/web_storage_api/index.html b/files/ja/conflicting/web/api/web_storage_api/index.html new file mode 100644 index 0000000000..72c9a903e3 --- /dev/null +++ b/files/ja/conflicting/web/api/web_storage_api/index.html @@ -0,0 +1,14 @@ +--- +title: DOM Storage +slug: DOM/Storage +tags: + - DOM + - Gecko + - HTML5 + - JavaScript + - Offline web applications + - 要更新 +translation_of: Web/API/Web_Storage_API +translation_of_original: Web/Guide/API/DOM/Storage +--- +<p>REDIRECT <a href="https://developer.mozilla.org/ja/docs/Web/API/Web_Storage_API">Web Storage API</a></p> diff --git a/files/ja/conflicting/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html b/files/ja/conflicting/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html new file mode 100644 index 0000000000..15dcbf30e3 --- /dev/null +++ b/files/ja/conflicting/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html @@ -0,0 +1,16 @@ +--- +title: Cross-Domain Textures +slug: Web/API/WebGL_API/Cross-Domain_Textures +translation_of: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL#Cross-domain_textures +translation_of_original: Web/API/WebGL_API/Cross-Domain_Textures +--- +<p>WebGL のテクスチャの読み込みは、クロスドメインアクセス制御に従います。コンテンツで他のドメインからテクスチャを読み込むためには、CORS で許可を得る必要があります。CORS について詳しくは、<a href="/Ja/HTTP_access_control" title="ja/HTTP access control">HTTP access control</a> をご覧ください。</p> +<p>CORS で許可された画像を WebGL のテクスチャとして使用する方法の説明を <a class="external" href="http://hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/" title="http://hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/">こちらの hacks.mozilla.org の記事</a> に掲載していますので、<a class="external" href="http://people.mozilla.org/~bjacob/webgltexture-cors-js.html" title="http://people.mozilla.org/~bjacob/webgltexture-cors-js.html">サンプル</a> と合わせてご覧ください。</p> +<div class="geckoVersionNote"> <p>{{ gecko_callout_heading("8.0") }}</p> <p>WebGL テクスチャ向けの CORS サポートと、画像要素の <code>crossOrigin</code> 属性が Gecko 8 {{ geckoRelease("8.0") }} で実装されました。</p> +</div> +<p>汚染された (書き込みのみ) 2D canvas を WebGL のテクスチャとして使用することはできません。2D {{ HTMLElement("canvas") }} が汚染されたとは例えば、クロスドメインの画像が canvas 上に描画された状態を指します。</p> +<div class="geckoVersionNote"> <p>{{ gecko_callout_heading("9.0") }}</p> <p>Canvas 2D <code>drawImage</code> 向けの CORS サポートが Gecko 9 {{ geckoRelease("9.0") }} で実装されました。これは、CORS で許可されたクロスドメインの画像が 2D canvas を汚染しないので、2D canvas を WebGL のテクスチャ素材として使用することが可能であり続けることを意味します。</p> +</div> +<div class="geckoVersionNote"> <p>{{ gecko_callout_heading("12.0") }}</p> <p>クロスドメインの動画に対する CORS サポートと、{{ HTMLElement("video") }} 要素の<code>crossorigin</code> 属性を Gecko 12 {{ geckoRelease("12.0") }} で実装しました。</p> +</div> +<p>{{ languages( { "en": "en/WebGL/Cross-Domain_Textures"} ) }}</p> diff --git a/files/ja/conflicting/web/api/websockets_api/index.html b/files/ja/conflicting/web/api/websockets_api/index.html new file mode 100644 index 0000000000..d924ac2328 --- /dev/null +++ b/files/ja/conflicting/web/api/websockets_api/index.html @@ -0,0 +1,23 @@ +--- +title: WebSockets リファレンス +slug: Web/API/WebSockets_API/WebSockets_reference +tags: + - WebSocket + - WebSockets +translation_of: Web/API/WebSockets_API +translation_of_original: Web/API/WebSockets_API/WebSockets_reference +--- +<div>{{draft}}</div> +<p>以下のページは、WebSocket API のインタフェースに関する文書です。</p> + + +<dl> + <dt><a href="/ja/docs/WebSockets/WebSockets_reference/WebSocket"><code>WebSocket</code></a></dt> + <dd>WebSocket のサーバに接続し、その接続上でデータを送受信するためのプライマリインターフェイス</dd> + + <dt><a href="/ja/docs/WebSockets/WebSockets_reference/CloseEvent"><code>CloseEvent</code></a></dt> + <dd>接続を閉じる際に <code>WebSocket</code> オブジェクトによって送信されるイベント</dd> + + <dt><a href="/ja/docs/WebSockets/WebSockets_reference/MessageEvent"><code>MessageEvent</code></a></dt> + <dd>サーバからのメッセージの受信時に <code>Websocket</code> オブジェクトによって送出されるイベント</dd> +</dl> diff --git a/files/ja/conflicting/web/api/window/moveto/index.html b/files/ja/conflicting/web/api/window/moveto/index.html new file mode 100644 index 0000000000..1510d2870e --- /dev/null +++ b/files/ja/conflicting/web/api/window/moveto/index.html @@ -0,0 +1,11 @@ +--- +title: Window.restore() +slug: Web/API/Window/restore +translation_of: Web/API/Window/moveTo +translation_of_original: Web/API/Window/restore +--- +<p>{{APIRef}}</p> + +<p>このメソッドは現在動作していませんが、代わりに次のメソッドを利用することができます:</p> + +<p>window.moveTo(window.screenX, window.screenY);</p> diff --git a/files/ja/conflicting/web/api/windoworworkerglobalscope/index.html b/files/ja/conflicting/web/api/windoworworkerglobalscope/index.html new file mode 100644 index 0000000000..760541b9c5 --- /dev/null +++ b/files/ja/conflicting/web/api/windoworworkerglobalscope/index.html @@ -0,0 +1,116 @@ +--- +title: WindowBase64 +slug: Web/API/WindowBase64 +tags: + - API +translation_of: Web/API/WindowOrWorkerGlobalScope +translation_of_original: Web/API/WindowBase64 +--- +<p>{{APIRef("HTML DOM")}}</p> + +<p>The <code><strong>WindowBase64</strong></code> helper contains utility methods to convert data to and from base64, a binary-to-text encoding scheme. For example it is used in <a href="/en-US/docs/data_URIs">data URIs</a>.</p> + +<p>There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}} for workers, implements it.</p> + +<h2 id="Properties">Properties</h2> + +<p><em>This helper neither defines nor inherits any properties.</em></p> + +<h2 id="Methods">Methods</h2> + +<p><em>This helper does not inherit any methods.</em></p> + +<dl> + <dt>{{domxref("WindowBase64.atob()")}}</dt> + <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd> + <dt>{{domxref("WindowBase64.btoa()")}}</dt> + <dd>Creates a base-64 encoded ASCII string from a string of binary data.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#windowbase64', 'WindowBase64')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', '#windowbase64', 'WindowBase64')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "#windowbase64", "WindowBase64")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoDesktop(1)}} [1]</td> + <td>{{CompatVersionUnknown}}</td> + <td>10.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoMobile(1)}}</td> + <td rowspan="1">{{CompatVersionUnknown}}</td> + <td rowspan="1">{{CompatVersionUnknown}}</td> + <td rowspan="1">{{CompatVersionUnknown}}</td> + <td rowspan="1">{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] <code>atob()</code> is also available to XPCOM components implemented in JavaScript, even though {{domxref("Window")}} is not the global object in components.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li> + <li>{{domxref("Window")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}</li> +</ul> diff --git a/files/ja/conflicting/web/api/windoworworkerglobalscope_e2691f7ad05781a30c5fc5bb3b3f633a/index.html b/files/ja/conflicting/web/api/windoworworkerglobalscope_e2691f7ad05781a30c5fc5bb3b3f633a/index.html new file mode 100644 index 0000000000..549969232f --- /dev/null +++ b/files/ja/conflicting/web/api/windoworworkerglobalscope_e2691f7ad05781a30c5fc5bb3b3f633a/index.html @@ -0,0 +1,119 @@ +--- +title: WindowTimers +slug: Web/API/WindowTimers +tags: + - API +translation_of: Web/API/WindowOrWorkerGlobalScope +translation_of_original: Web/API/WindowTimers +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><code><strong>WindowTimers</strong></code> contains utility methods to set and clear timers.</p> + +<p>There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}} for workers, implements it.</p> + +<h2 id="Properties">Properties</h2> + +<p><em>This interface do not define any property, nor inherit any.</em></p> + +<h2 id="Methods">Methods</h2> + +<p><em>This interface do not inherit any method.</em></p> + +<dl> + <dt>{{domxref("WindowTimers.clearInterval()")}}</dt> + <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.</dd> + <dt>{{domxref("WindowTimers.clearTimeout()")}}</dt> + <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setTimeout()")}}.</dd> + <dt>{{domxref("WindowTimers.setInterval()")}}</dt> + <dd>Schedules the execution of a function each X milliseconds.</dd> + <dt>{{domxref("WindowTimers.setTimeout()")}}</dt> + <dd>Sets a delay for executing a function.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#windowtimers', 'WindowTimers')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', '#windowtimers', 'WindowTimers')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "#windowtimers", "WindowTimers")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoDesktop(1)}}</td> + <td>1.0</td> + <td>4.0</td> + <td>4.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoMobile(1)}}</td> + <td rowspan="1">{{CompatVersionUnknown}}</td> + <td rowspan="1">{{CompatVersionUnknown}}</td> + <td rowspan="1">{{CompatVersionUnknown}}</td> + <td rowspan="1">{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("Window")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}</li> +</ul> diff --git a/files/ja/conflicting/web/api/xsltprocessor/index.html b/files/ja/conflicting/web/api/xsltprocessor/index.html new file mode 100644 index 0000000000..ca2a707fb7 --- /dev/null +++ b/files/ja/conflicting/web/api/xsltprocessor/index.html @@ -0,0 +1,12 @@ +--- +title: XSLTProcessor +slug: XSLTProcessor +translation_of: Web/API/XSLTProcessor +translation_of_original: XSLTProcessor +--- +<p>XSLTProcesor は、Mozilla の XSLT エンジンへのインタフェースを提供するオブジェクトです。特権のない JavaScript で利用可能です。</p> + +<ul> + <li><a href="/ja/docs/Using_the_Mozilla_JavaScript_interface_to_XSL_Transformations">Using the Mozilla JavaScript interface to XSL Transformations</a></li> + <li><a href="/ja/docs/The_XSLT_JavaScript_Interface_in_Gecko">The XSLT/JavaScript Interface in Gecko</a></li> +</ul> diff --git a/files/ja/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html b/files/ja/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html new file mode 100644 index 0000000000..1df9691cb1 --- /dev/null +++ b/files/ja/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html @@ -0,0 +1,125 @@ +--- +title: WebAPI +slug: WebAPI +tags: + - Apps + - DOM + - Firefox OS + - Mobile +translation_of: Web/API +translation_of_original: WebAPI +--- +<p><strong>WebAPI</strong> はデバイス間の互換性を提供する機能一式であり、Web アプリやコンテンツがデバイスに保存されているデータ (カレンダーや連絡先など) やデバイスハードウェア (バッテリーの状態やデバイスのバイブレーションハードウェアなど) へアクセスできるようにする API を指す用語です。これらの API を追加することにより今日の Web ができることを増やすとともに、従来はプロプライエタリなプラットフォームでしかできなかったことに広がることを望んでいます。</p> + +<div class="note"> +<p><strong>注記:</strong> 各バッジの簡単な説明については、<a href="/ja/docs/Web/Apps/Packaged_apps#Types_of_packaged_apps" title="Web/Apps/Packaged_apps#Types_of_packaged_apps">パッケージ型アプリ</a>のドキュメントをご覧ください。</p> +</div> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Communication_APIs" name="Communication_APIs">コミュニケーション API</h2> + +<dl> + <dt><a href="/ja/docs/WebAPI/Network_Information" title="WebAPI/Network_Information">Network Information API</a></dt> + <dd>接続速度など、現在のネットワーク接続に関する基本的な情報を提供します。</dd> + <dt><a href="/ja/docs/WebAPI/WebBluetooth" title="WebAPI/WebBluetooth">Bluetooth</a> {{NonStandardBadge}}</dt> + <dd>WebBluetooth API は、デバイスのBluetooth ハードウェアに対する低水準のアクセス手段を提供します。</dd> + <dt><a href="/ja/docs/WebAPI/Mobile_Connection" title="WebAPI/Mobile_Connection">Mobile Connection API</a> {{NonStandardBadge}}</dt> + <dd>信号強度やオペレーター情報など、デバイスのセルラー接続に関する情報を公開します。</dd> + <dt><a href="/ja/docs/WebAPI/Network_Stats" title="WebAPI/Network_Stats">Network Stats API</a> {{NonStandardBadge}}</dt> + <dd>データの使用状況をモニタリングして、そのデータを特権アプリケーションに公開します。</dd> + <dt><a href="/ja/docs/WebAPI/WebTelephony" title="WebAPI/WebTelephony">Telephony</a> {{NonStandardBadge}}</dt> + <dd>アプリが電話を発着信したり、内蔵の電話機能のユーザインターフェイスを使用したりすることが可能です。</dd> + <dt><a href="/ja/docs/WebAPI/WebSMS" title="WebAPI/WebSMS">WebSMS </a>{{NonStandardBadge}}</dt> + <dd>アプリに対して、デバイスに保存しているメッセージのアクセスや管理だけでなく、SMS テキストメッセージの送受信を可能にします。</dd> + <dt><a href="/ja/docs/WebAPI/WiFi_Information" title="WebAPI/WiFi_Information">WiFi Information API</a> {{NonStandardBadge}}</dt> + <dd>信号強度、現在接続しているネットワークの名称、利用可能な WiFi ネットワークなどの情報を提供する特権 API です。</dd> +</dl> + +<h2 class="Documentation" id="Hardware_access_APIs" name="Hardware_access_APIs">ハードウェアアクセス API</h2> + +<dl> + <dt><a href="/ja/docs/WebAPI/Using_Light_Events">Ambient Light Sensor API</a></dt> + <dd>環境光センサーへのアクセス手段を提供します。これにより、アプリがデバイス付近の環境光のレベルを検出できます。</dd> + <dt><a href="/ja/docs/WebAPI/Battery_Status" title="WebAPI/Battery_Status">Battery Status API</a></dt> + <dd>バッテリーの残量や、デバイスが電源に接続されて充電中であるかといった情報を提供します。</dd> + <dt><a href="/ja/docs/Using_geolocation" title="Using_geolocation">Geolocation API</a></dt> + <dd>デバイスの物理的な位置に関する情報を提供します。</dd> + <dt><a href="/ja/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt> + <dd>アプリがマウスへのアクセスをロックして、絶対座標ではなく移動量の差分にアクセスできます。これはゲームに対して重要です。</dd> + <dt><a href="/ja/docs/WebAPI/Proximity" title="WebAPI/Proximity">Proximity API</a></dt> + <dd>ユーザの顔など、近くにある物体とデバイスとの近接度を検出できます。</dd> + <dt><a href="/ja/docs/Detecting_device_orientation" title="WebAPI/Detecting_device_orientation">Device Orientation API</a></dt> + <dd>デバイスの向きが変化したときに通知します。</dd> + <dt><a href="/ja/docs/WebAPI/Managing_screen_orientation" title="WebAPI/Managing_screen_orientation">Screen Orientation API</a></dt> + <dd>スクリーンの向きが変化したときに通知します。この API は、アプリにとってどの向きが望ましいかを示すことにも使用できます。</dd> + <dt><a href="/ja/docs/Web/Guide/API/Vibration" title="WebAPI/Vibration">Vibration API</a></dt> + <dd>ゲームでの触覚フィードバックなどのために、アプリがデバイスのバイブレーションハードウェアを制御できます。これは通知のためのバイブレーションといった用途向けでは<strong>ありません</strong>。通知については <a href="/ja/docs/WebAPI/Alarm" title="WebAPI/Alarm">Alarm API</a> をご覧ください。</dd> + <dt><a href="/ja/docs/Web/API/Camera_API" title="Web/API/Camera_API">Camera API</a> {{NonStandardBadge}}</dt> + <dd>デバイス内蔵のカメラを使用して、アプリが写真や動画を撮影できます。</dd> + <dt><a href="/ja/docs/WebAPI/Power_Management" title="WebAPI/Power_Management">Power Management API </a>{{NonStandardBadge}}</dt> + <dd>アプリがスクリーン、CPU、デバイスの電源などをオン・オフできるようにします。また、リソースロックイベントのリスニングや調査もサポートします。</dd> +</dl> + +<p><span class="alllinks"><a href="/ja/docs/tag/WebAPI" title="tag/CSS">すべて見る...</a></span></p> +</div> + +<div class="section"> +<h2 class="Documentation" id="Data_management_APIs" name="Data_management_APIs">データ管理 API</h2> + +<dl> + <dt><a href="/ja/docs/Web/API/File_Handle_API" title="Web/API/File_Handle_API">FileHandle API</a> {{NonStandardBadge}}</dt> + <dd>ロック機能とともに、書き込み可能なファイルをサポートします。</dd> + <dt><a href="/ja/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt> + <dd>パフォーマンスが高い検索機能をサポートする、クライアントサイドの構造化データ用ストレージです。</dd> + <dt><a href="/ja/docs/WebAPI/Settings" title="WebAPI/Settings">Settings API</a> {{NonStandardBadge}}</dt> + <dd>デバイスへ永続的に保存されるシステム全体の設定オプションを、アプリが調査したり変更したりすることが可能です。</dd> +</dl> + +<h2 class="Documentation" id="Other_APIs" name="Other_APIs">その他の API</h2> + +<dl> + <dt><a href="/ja/docs/Web/API/Alarm_API" title="Web/API/Alarm_API">Alarm API</a></dt> + <dd>アプリが通知を予定することが可能です。特定の時刻にアプリを自動起動する機能もサポートします。</dd> + <dt><a href="/ja/docs/Web/API/Simple_Push_API" title="Web/API/Simple_Push_API">Simple Push API</a></dt> + <dd>プラットフォームが特定のアプリケーションに通知メッセージを送信できます。</dd> + <dt><a href="/ja/docs/WebAPI/Using_Web_Notifications" title="WebAPI/Using_Web_Notifications">Web Notifications</a></dt> + <dd>アプリケーションが、システムレベルで表示される通知を送信できます。</dd> + <dt><a href="/ja/docs/Web/API/DOMApplicationsRegistry" title="Web/API/DOMApplicationsRegistry">Apps API</a> {{NonStandardBadge}}</dt> + <dd>Open WebApps API は、Web アプリのインストールや管理をサポートします。また、アプリが課金情報を調べることを可能にします。</dd> + <dt><a href="/ja/docs/Web/API/Web_Activities" title="Web/API/Web_Activities">Web Activities</a> {{NonStandardBadge}}</dt> + <dd>あるアプリが別のアプリにアクティビティを渡すことができます。例えばあるアプリが別のアプリに対して、写真を選択 (または作成) して返すように依頼するでしょう。一般的に、ユーザはどのアクティビティにどのアプリを使用するかを設定できます。</dd> + <dt><a href="/ja/docs/Web/Apps/Publishing/In-app_payments" title="Apps/Publishing/In-app_payments">WebPayment API</a> {{NonStandardBadge}}</dt> + <dd>Web コンテンツが、仮想的な物品に対する支払いや払い戻しの処理を開始できます。</dd> + <dt><a href="/ja/docs/DOM/Using_the_Browser_API" title="DOM/Using_the_Browser_API"><strong>Browser API</strong></a> {{NonStandardBadge}}</dt> + <dd>Web 技術を完全に使用する Web ブラウザの構築をサポートします (要するに、ブラウザの中にあるブラウザです)。</dd> + <dt><a href="/ja/docs/WebAPI/Idle" title="WebAPI/Device_Storage_API">Idle API</a></dt> + <dd>ユーザが能動的にデバイスを使用していないときに、アプリが通知を受け取れます。</dd> + <dt><a href="/ja/docs/WebAPI/Permissions" title="WebAPI/Permissions">Permissions API</a> {{NonStandardBadge}}</dt> + <dd>集中化された場所で、アプリの許可設定を管理します。設定アプリで使用されます。</dd> + <dt><a href="/ja/docs/WebAPI/Time_and_Clock" title="WebAPI/Time_and_Clock">Time/Clock API</a> {{NonStandardBadge}}</dt> + <dd>現在時刻の設定をサポートします。タイムゾーンは <a href="/ja/docs/WebAPI/Settings" title="WebAPI/Settings">Settings API</a> で設定します。</dd> +</dl> + +<h2 class="Community" id="Community" name="Community">WebAPI コミュニティ</h2> + +<p>これらの API について支援が必要になったとしても、それらの使用方法について他の開発者と語る手段がいくつかあります。</p> + +<ul> + <li>WebAPI フォーラムで相談する: {{DiscussionList("dev-webapi", "mozilla.dev.webapi")}}</li> + <li>WebAPI IRC チャンネルを訪問する: <a href="irc://irc.mozilla.org/webapi" title="irc://irc.mozilla.org/webapi">#webapi</a></li> +</ul> + +<p><span class="alllinks"><a href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html"><em>ネチケット</em>を忘れないでください...</a></span></p> + +<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">関連トピック</h2> + +<ul> + <li><a href="/ja/docs/DOM" title="Document Object Model (DOM)">Document Object Model (DOM)</a> は、HTML ドキュメントをツリーとして表現するものです。</li> + <li><a href="/ja/docs/JavaScript" title="JavaScript">JavaScript</a> - Web 向けのスクリプト言語です。</li> + <li><a href="/ja/docs/MDN/Doc_status/API" title="MDN/Doc_status/API">Doc status</a>: WebAPI のトピック一覧と、それらのドキュメント化の状況です。</li> +</ul> +</div> +</div> + +<p> </p> diff --git a/files/ja/conflicting/web/css/@media/index.html b/files/ja/conflicting/web/css/@media/index.html new file mode 100644 index 0000000000..5bf2140f1d --- /dev/null +++ b/files/ja/conflicting/web/css/@media/index.html @@ -0,0 +1,5 @@ +--- +title: Media +slug: Web/CSS/Media +--- +{{wiki.localize('System.API.page-generated-for-subpage')}} diff --git a/files/ja/conflicting/web/css/@media_dcb6ae28d731b140b24729ff941686e7/index.html b/files/ja/conflicting/web/css/@media_dcb6ae28d731b140b24729ff941686e7/index.html new file mode 100644 index 0000000000..87ca6f864c --- /dev/null +++ b/files/ja/conflicting/web/css/@media_dcb6ae28d731b140b24729ff941686e7/index.html @@ -0,0 +1,17 @@ +--- +title: Visual +slug: Web/CSS/Media/Visual +tags: + - CSS + - CSS Reference + - MDC Project + - NeedsContent +translation_of: Web/CSS/@media +translation_of_original: Web/CSS/media/visual +--- +<div>{{ CSSRef() }}</div> +<p><a href="/ja/CSS" title="ja/CSS">CSS</a> 標準で定義された<a href="/ja/CSS/@media#Media_groups" title="ja/CSS/@media#Media_groups">メディアグループ</a>。</p> +<h2 id="英語版章題(See_also)_参照">{{ 英語版章題("See also") }}参照</h2> +<p><a class="external" href="http://www.w3.org/TR/CSS2/media.html" title="W3C Media Types Spec">W3C Media Types Spec</a></p> +<p><span class="comment">Interwiki Languages Links</span></p> +<div>{{ languages( { "en": "en/CSS/Media/Visual", "es": "es/CSS/Media/Visual", "fr": "fr/CSS/M\u00e9dia/Visuel", "pl": "pl/CSS/Media/Visual", "zh-cn": "cn/CSS/Media/Visual" } ) }}</div> diff --git a/files/ja/conflicting/web/css/@viewport/index.html b/files/ja/conflicting/web/css/@viewport/index.html new file mode 100644 index 0000000000..38f093896b --- /dev/null +++ b/files/ja/conflicting/web/css/@viewport/index.html @@ -0,0 +1,86 @@ +--- +title: height +slug: Web/CSS/@viewport/height +tags: + - '@viewport' + - At-rule descriptor + - CSS + - CSS Descriptor + - Reference +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/height +--- +<div>{{CSSRef}}</div> + +<p><code><strong>height</strong></code> は CSS の記述子で、ビューポートの {{cssxref("@viewport/min-height", "min-height")}} と {{cssxref("@viewport/max-height", "max-height")}} の両記述子を指定する一括指定記述子です。ビューポートの寸法を1つ指定すると、高さの最小値と最大値の両方を指定された値に設定します。</p> + +<p>ビューポートのを2つ指定した場合は、1つ目の値は最小の高さを設定し、2つ目の値は最大の高さを設定します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="brush: css notranslate">/* 1つの値 */ +height: auto; +height: 320px; +height: 15em; + +/* Two values */ +height: 320px 200px; +</pre> + +<h3 id="Values" name="Values">値</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>使用値は他の CSS 記述子の値から計算されます。</dd> + <dt><code><length></code></dt> + <dd>負の数ではない絶対的または相対的な長さです。</dd> + <dt><code><percentage></code></dt> + <dd>拡大率 1.0 の初期ビューポートの幅や高さに対する相対的なパーセント値で、それぞれ水平方向と垂直方向の長さを表します。負の数であってはいけません。</dd> +</dl> + +<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> + +<p>{{cssinfo}}</p> + +<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Setting_minimum_and_maximum_height" name="Setting_minimum_and_maximum_height">高さの最小値と最大値の設定</h3> + +<pre class="brush: css notranslate">@viewport { + height: 500px; +}</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Device', '#descdef-viewport-height', '"height" descriptor')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("css.at-rules.viewport.height")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{cssxref("@viewport")}}</li> +</ul> diff --git a/files/ja/conflicting/web/css/@viewport_516ab4b0283b5b2231fb657505e22440/index.html b/files/ja/conflicting/web/css/@viewport_516ab4b0283b5b2231fb657505e22440/index.html new file mode 100644 index 0000000000..0e9f9079f0 --- /dev/null +++ b/files/ja/conflicting/web/css/@viewport_516ab4b0283b5b2231fb657505e22440/index.html @@ -0,0 +1,77 @@ +--- +title: max-height +slug: Web/CSS/@viewport/max-height +tags: + - '@viewport' + - CSS + - CSS Descriptor + - Reference +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/max-height +--- +<div>{{CSSRef}}</div> + +<p>CSS の <code><strong>max-height</strong></code> 記述子は、{{cssxref("@viewport")}} @-規則で定義された文書のビューポートの最大の高さを指定します。</p> + +<p>最大の高さの制約を考慮して、最初の高さは初期ビューポートの高さにできるだけ近い値に設定されます。</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="brush: css">/* Keyword value */ +max-height: auto; + +/* <length> values */ +max-height: 400px; +max-height: 50em; +max-height: 20cm; + +/* <percentage> value */ +max-height: 75%;</pre> + +<h3 id="Values" name="Values">値</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>使用する値は他の CSS 記述子の値から計算されます。</dd> + <dt><code><length></code></dt> + <dd>負ではない絶対値または相対値。</dd> + <dt><code><percentage></code></dt> + <dd>垂直方向の長さについて、初期ビューポートの高さである表示倍率1.0 に対するパーセンテージの値。値は負ではない必要があります。</dd> +</dl> + +<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: css">@viewport { + max-height: 600px; +}</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Device', '#descdef-viewport-max-height', '"max-height" descriptor')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + + + +<p>{{Compat("css.at-rules.viewport.max-height")}}</p> diff --git a/files/ja/conflicting/web/css/@viewport_6e9c91ec34cdb0393d301240d0d50d84/index.html b/files/ja/conflicting/web/css/@viewport_6e9c91ec34cdb0393d301240d0d50d84/index.html new file mode 100644 index 0000000000..01b0ae54b2 --- /dev/null +++ b/files/ja/conflicting/web/css/@viewport_6e9c91ec34cdb0393d301240d0d50d84/index.html @@ -0,0 +1,71 @@ +--- +title: min-zoom +slug: Web/CSS/@viewport/min-zoom +tags: + - '@viewport' + - CSS + - CSS 記述子 + - リファレンス +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/min-zoom +--- +<div>{{CSSRef}}</div> + +<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>min-zoom</code></strong> 記述子は、 {{cssxref("@viewport")}} <a href="/ja/docs/Web/CSS/At-rule">@-規則</a>で定義され、文書の最小表示倍率を設定します。ブラウザーは自動的にもユーザーのリクエストでも、これより縮小することができません。</p> + +<p><em>表示倍率</em> が <code>1.0</code> 又は <code>100%</code> が、拡大縮小なしに対応します。より大きい値は拡大、より小さい値は縮小です。</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="brush:css">/* キーワード値 */ +min-zoom: auto; + +/* <number> 値 */ +min-zoom: 0.8; +min-zoom: 2.0; + +/* <percentage> 値 */ +min-zoom: 150%; +</pre> + +<h3 id="Values" name="Values">値</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>{{glossary("user agent", "ユーザーエージェント")}}が文書の表示倍率の下限を設定します。</dd> + <dt>{{cssxref("<number>")}}</dt> + <dd>非負の数値で、表示倍率の下限です。</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd>非負のパーセント値で、表示倍率の下限です。</dd> +</dl> + +<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Specification" name="Specification">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Device', '#min-zoom-desc', '"min-zoom" descriptor')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("css.at-rules.viewport.min-zoom")}}</p> diff --git a/files/ja/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html b/files/ja/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html new file mode 100644 index 0000000000..97814ca702 --- /dev/null +++ b/files/ja/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html @@ -0,0 +1,78 @@ +--- +title: viewport-fit +slug: Web/CSS/@viewport/viewport-fit +tags: + - '@viewport' + - CSS + - CSS 記述子 + - Experimental + - Reference + - モバイル + - 画面レイアウト +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/viewport-fit +--- +<div>{{CSSRef}}{{Draft}}{{SeeCompatTable}}</div> + +<p>CSS の <strong><code>viewport-fit</code></strong> {{CSSxRef("@viewport")}} {{Glossary("Descriptor (CSS)", "記述子")}}は、文書のビューポートが画面をどのように埋めるかを制御します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="brush: css; no-line-numbers">/* キーワード値 */ +viewport-fit: auto; +viewport-fit: contain; +viewport-fit: cover; +</pre> + +<h3 id="Values" name="Values">値</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>この値は初期状態のレイアウトビューポートに影響せず、ウェブページ全体が見えます。</dd> + <dt><code>contain</code></dt> + <dd>ビューポートは、画面内に内接する最も大きな長方形に合うように拡大縮小されます。</dd> + <dt><code>cover</code></dt> + <dd>ビューポートは、端末の画面の埋め尽くすように拡大縮小されます。これは重要なコンテンツが画面の外に出ないことを保証するために、<a href="/ja/docs/Web/CSS/env">安全領域差し込み変数</a>を使用するために強く推奨されます。</dd> +</dl> + +<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> + +<pre class="syntaxbox">auto | contain | cover +</pre> + +<div class="hidden">この記述子はまだ <a href="https://github.com/mdn/data/blob/master/css/at-rules.json">https://github.com/mdn/data/blob/master/css/at-rules.json</a> に追加されていません。</div> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2> + +<p><code>viewport-fit</code> 記述子を使用するとき、すべての端末の画面が長方形であるとは限らなないので、<a href="/ja/docs/Web/CSS/env">安全領域差し込み変数</a>を使用してください。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Round Display", "#viewport-fit-descriptor", '"viewport-fit" descriptor')}}</td> + <td>{{Spec2("CSS Round Display")}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("css.at-rules.viewport.viewport-fit")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{CSSxRef("env", "env()")}}</li> +</ul> diff --git a/files/ja/conflicting/web/css/@viewport_d03ebc763769680c55d1a4258592d3ed/index.html b/files/ja/conflicting/web/css/@viewport_d03ebc763769680c55d1a4258592d3ed/index.html new file mode 100644 index 0000000000..483e5c214f --- /dev/null +++ b/files/ja/conflicting/web/css/@viewport_d03ebc763769680c55d1a4258592d3ed/index.html @@ -0,0 +1,89 @@ +--- +title: max-zoom +slug: Web/CSS/@viewport/max-zoom +tags: + - '@viewport' + - At-rule descriptor + - CSS + - CSS Descriptor + - Reference +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/max-zoom +--- +<div>{{CSSRef}}</div> + +<p><strong><code>min-zoom</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の記述子で、 {{cssxref("@viewport")}} <a href="/ja/docs/Web/CSS/At-rule">アット規則</a>で定義され、文書の最大表示倍率を設定します。ブラウザーは自動的にもユーザーのリクエストでも、これより拡大することができません。</p> + +<p><em>表示倍率</em> が <code>1.0</code> または <code>100%</code> が、拡大縮小なしに対応します。より大きい値は拡大、より小さい値は縮小です。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="brush:css notranslate">/* キーワード値 */ +max-zoom: auto; + +/* <number> 値 */ +max-zoom: 0.8; +max-zoom: 2.0; + +/* <percentage> 値 */ +max-zoom: 150%; +</pre> + +<h3 id="Values" name="Values">値</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>{{glossary("user agent", "ユーザーエージェント")}}が文書の表示倍率の上限を設定します。</dd> + <dt>{{cssxref("<number>")}}</dt> + <dd>非負の数値で、表示倍率の上限です。</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd>非負のパーセント値で、表示倍率の上限です。</dd> +</dl> + +<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> + +<p>{{cssinfo}}</p> + +<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Setting_max-zoom" name="Setting_max-zoom">max-zoom の設定</h3> + +<pre class="notranslate"><code>@viewport { + max-zoom: 1.5; +}</code> +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Device', '#max-zoom-desc', '"max-zoom" descriptor')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("css.at-rules.viewport.max-zoom")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{cssxref("@viewport")}}</li> +</ul> diff --git a/files/ja/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html b/files/ja/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html new file mode 100644 index 0000000000..f05447a501 --- /dev/null +++ b/files/ja/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html @@ -0,0 +1,91 @@ +--- +title: zoom +slug: Web/CSS/@viewport/zoom +tags: + - '@viewport' + - At-rule descriptor + - CSS + - CSS Descriptor + - Graphics + - Layout + - Reference + - Web +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/zoom +--- +<div>{{CSSRef}}</div> + +<p><strong><code>zoom</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の記述子で、 {{cssxref("@viewport")}} <a href="/ja/docs/Web/CSS/At-rule">アット規則</a>で定義された文書の表示倍率の初期値を設定します。</p> + +<p><em>表示倍率</em> が <code>1.0</code> または <code>100%</code> が、拡大縮小なしに対応します。より大きい値は拡大、より小さい値は縮小です。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="brush:css notranslate">/* キーワード値 */ +zoom: auto; + +/* <number> 値 */ +zoom: 0.8; +zoom: 2.0; + +/* <percentage> 値 */ +zoom: 150%; +</pre> + +<h3 id="Values" name="Values">値</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>{{glossary("user agent", "ユーザーエージェント")}}が文書の表示倍率の初期値を設定します。ユーザーエージェントは表示倍率を決めるために、文書が表示されるキャンバス領域の寸法を使用することがあります。</dd> + <dt>{{cssxref("<number>")}}</dt> + <dd>表示倍率として使われる非負の数値です。</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd>表示倍率として使われる非負のパーセント値です。</dd> +</dl> + +<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> + +<p>{{cssinfo}}</p> + +<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Setting_viewport_zoom_factor" name="Setting_viewport_zoom_factor">ビューポートの zoom 係数の設定</h3> + +<pre class="notranslate"><code>@viewport { + zoom: 2.0; +}</code></pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Device', '#the-lsquozoomrsquo-descriptor', '"zoom" descriptor')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("css.at-rules.viewport.zoom")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{cssxref("@viewport")}}</li> +</ul> diff --git a/files/ja/conflicting/web/css/_colon_placeholder-shown/index.html b/files/ja/conflicting/web/css/_colon_placeholder-shown/index.html new file mode 100644 index 0000000000..f9e7367a09 --- /dev/null +++ b/files/ja/conflicting/web/css/_colon_placeholder-shown/index.html @@ -0,0 +1,59 @@ +--- +title: ':-moz-placeholder' +slug: 'Web/CSS/:-moz-placeholder' +tags: + - CSS + - CSS Reference + - Non-standard +translation_of: 'Web/CSS/:placeholder-shown' +translation_of_original: 'Web/CSS/:-moz-placeholder' +--- +<p>{{Non-standard_header}}{{ CSSRef() }}{{ gecko_minversion_header("2.0") }}</p> + +<div class="note"><strong>Note:</strong> The <code>:-moz-placeholder</code> pseudo-class is deprecated in Firefox 19 in favor of the {{ cssxref('::-moz-placeholder') }} pseudo-element.</div> + +<div class="note"><strong>Note: </strong>The CSSWG have decided to introduce <code>:placeholder-shown</code>. This functionality will be reintroduced in Gecko at some point in the future, unprefixed and under the new name. {{bug(1069012)}}</div> + +<h2 id="Summary" name="Summary">概要</h2> + +<p><code>:-moz-placeholder</code> は<a href="/en/HTML/HTML5/Forms_in_HTML5#The_placeholder_attribute" title="en/HTML/HTML5/Forms in HTML5#The placeholder attribute">プレースホルダ</a>を表示するフォーム要素にマッチします。この擬似クラスにより、Web 開発者やテーマデザイナーがプレースホルダの表示 (デフォルトは薄い灰色) をカスタマイズすることができます。</p> + +<p>たとえば、フォームフィールドの背景色をプレースホルダの色と似た色に変更した場合、プレースホルダが目立たなくなりうまく機能しません。しかし、この擬似クラスを利用してプレースホルダの文字色を変更すればいいのです。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>この例はプレースホルダの文字色を緑色に変更しています。</p> + +<pre class="brush: html"><!doctype html> +<html> +<head> + <title>Placeholder demo</title> + <style type="text/css"> + input:-moz-placeholder { + color: green; + } + </style> +</head> +<body> + <input id="test" placeholder="Placeholder text!"> +</body> +</html> +</pre> + +<p><a href="/samples/cssref/moz-placeholder.html" title="https://developer.mozilla.org/samples/cssref/moz-placeholder.html">View this example live</a>.</p> + +<h2 id="Bugzilla" name="Bugzilla">Bugzilla</h2> + +<p>{{ Bug(457801) }}</p> + +<h2 id="Notes" name="Notes">注記</h2> + +<div class="note"><strong>Note:</strong> このページは Gecko 1.9 {{ geckoRelease("1.9") }} のリリース時に、<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=11011" title="https://bugzilla.mozilla.org/show_bug.cgi?id=11011">全く異なる目的</a> から間違って作られていました。</div> + +<h3 id="SeeAlso" name="SeeAlso">参考</h3> + +<ul> + <li><a href="/en/HTML/HTML5/Forms_in_HTML5" title="en/HTML/HTML5/Forms in HTML5">Forms in HTML5</a></li> + <li>{{ HTMLElement("input") }}</li> + <li>{{ HTMLElement("textarea") }}</li> +</ul> diff --git a/files/ja/conflicting/web/css/box-ordinal-group/index.html b/files/ja/conflicting/web/css/box-ordinal-group/index.html new file mode 100644 index 0000000000..147bdbd9b4 --- /dev/null +++ b/files/ja/conflicting/web/css/box-ordinal-group/index.html @@ -0,0 +1,66 @@ +--- +title: '-moz-box-ordinal-group' +slug: Web/CSS/-moz-box-ordinal-group +tags: + - CSS + - Mozilla 拡張 + - Non-standard + - Reference + - フレックスボックス +translation_of: Web/CSS/box-ordinal-group +translation_of_original: Web/CSS/-moz-box-ordinal-group +--- +<p>{{CSSRef}}{{warning("これは CSS フレックスボックスレイアウトモジュールの初期の草稿にあったプロパティであり、その後の草稿で置き換えられました。")}}</p> + +<p>このプロパティの代わりに何を使用するべきかについての詳細情報は <a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">フレックスボックス</a>をご覧ください。</p> + +<h2 id="Summary" name="Summary">概要</h2> + +<p>要素が属する序数グループを示します。低い序数グループを持つ要素は、より高い序数を有するものの前に表示されます。</p> + +<h2 id="Values" name="Values">値</h2> + +<p>値はゼロより大きい整数でなければなりません。このプロパティの既定値は1です。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: html"><style type="text/css"> + #Flexbox { + display: -ms-box; + display: -moz-box; + display: -webkit-box; + } + + #text1 { + background: red; + -ms-box-ordinal-group: 4; + -moz-box-ordinal-group: 4; + -webkit-box-ordinal-group: 4; + } + + #text2 { + background: green; + -ms-box-ordinal-group: 3; + -moz-box-ordinal-group: 3; + -webkit-box-ordinal-group: 3; + } + + #text3 { + background: blue; + -ms-box-ordinal-group: 2; + -moz-box-ordinal-group: 2; + -webkit-box-ordinal-group: 2; + } + + #text4 { + background: orange; + } +</style> + +<div id="Flexbox"> + <div id="text1">text 1</div> + <div id="text2">text 2</div> + <div id="text3">text 3</div> + <div id="text4">text 4</div> +</div> +</pre> diff --git a/files/ja/conflicting/web/css/css_backgrounds_and_borders/resizing_background_images/index.html b/files/ja/conflicting/web/css/css_backgrounds_and_borders/resizing_background_images/index.html new file mode 100644 index 0000000000..fa7ce58677 --- /dev/null +++ b/files/ja/conflicting/web/css/css_backgrounds_and_borders/resizing_background_images/index.html @@ -0,0 +1,103 @@ +--- +title: 背景画像の拡大縮小 +slug: Web/CSS/Scaling_background_images +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images +translation_of_original: Web/CSS/CSS_Background_and_Borders/Scaling_background_images +--- +<p>CSS の {{cssxref("background-size")}} プロパティによって、フルサイズの画像がタイル状に配置されるという既定の動作の代わりに、背景画像のサイズを調節することができるようになります。画像を望むように拡大または縮小することができます。</p> + +<h2 id="Tiling_a_large_image" name="Tiling_a_large_image">大きな画像をタイル状に配置する</h2> + +<p>1233 × 1233 の大きな Firefox のロゴ画像を考えてみましょう。 300 × 300 四方に、この画像の 4 つのコピーをタイル状に配置したい（ぞっとするほど悪いサイトデザインを含むいくつかの理由で）場合、結果としてこうなります。</p> + +<p><img alt="screenshot1.png" class="default internal" src="/@api/deki/files/4001/=screenshot1.png"></p> + +<p>これは以下の CSS を使うことで達成されます。</p> + +<pre class="brush: css; highlight:[8]">.square { + width: 300px; + height: 300px; + background-image: url(fxlogo.png); + border: solid 2px; + text-shadow: white 0px 0px 2px; + font-size: 16px; + background-size: 150px; +} +</pre> + +<p>もし、とても古いブラウザをターゲットにするのであれば、いくつかの接頭辞を付したバージョンを加えることを考えるかもしれませんが、もう {{cssxref("background-size")}} に接頭辞を付すことは必要ありません。</p> + +<h2 id="Stretching_an_image" name="Stretching_an_image">画像を引き伸ばす</h2> + +<p>以下のように、画像の水平方向と垂直方向の両方のサイズを記述することもできます。</p> + +<pre class="brush:css">background-size: 300px 150px; +</pre> + +<p>その結果はこのようになります。</p> + +<p><img alt="screenshot3.png" class="default internal" src="/@api/deki/files/4003/=screenshot3.png"></p> + +<h2 id="Scaling_an_image_up" name="Scaling_an_image_up">画像を拡大する</h2> + +<p>この範囲のもう 1 つの終端では、画像を背景の中で拡大することができます。 ここで、300 × 300 ピクセルに 16 × 16 ピクセルの favicon を拡大します。</p> + +<p><img alt="screenshot2.png" class="default internal" src="/@api/deki/files/4002/=screenshot2.png"></p> + +<pre class="brush: css; highlight:[5]">.square2 { + width: 300px; + height: 300px; + background-image: url(favicon.png); + background-size: 300px; + border: solid 2px; + text-shadow: white 0px 0px 2px; + font-size: 16px; +} +</pre> + +<p>ご覧のとおり、 CSS は実際には本質的に同一で、画像ファイル名は安全です。</p> + +<h2 id="Special_values.3A_.22contain.22_and_.22cover.22" name="Special_values.3A_.22contain.22_and_.22cover.22">特別な値の「contain」と「cover」</h2> + +<p>CSS の {{cssxref("background-size")}} には、 {{cssxref("<length>")}} の値の他に、 <code>contain</code> と <code>cover</code> の 2 つの特別なサイズの値が提示されています。これらについて見てみましょう。</p> + +<h3 id="contain" name="contain">contain</h3> + +<p>contain は、コンテナとなるボックスのサイズにかかわらず、背景画像は コンテナの対応する辺の長さを超えないように、可能な限り大きくなるようにそれぞれの辺を拡大縮小されるべきことを指定します。下記の実演中の例からこのことを確認するため、 Firefox 3.6 以降のような、背景画像の拡大縮小に対応したブラウザを使って、ウィンドウのサイズを変えてみて下さい。</p> + +<div style="width: 100%; height: 200px; border: solid 2px;"> +<p>このウィンドウのサイズを変えて、何が起こるかを見て下さい。</p> +</div> + +<p>上の例の CSS は以下のようなものです。</p> + +<pre class="brush: css; highlight:[4]">width: 100%; +height: 200px; +background-image: url(https://developer.mozilla.org/files/2917/fxlogo.png); +background-size: contain; +border: solid 2px; +</pre> + +<h3 id="cover" name="cover">cover</h3> + +<p>cover は、背景画像の両方の寸法が、コンテナの対応するサイズより大きくなる、または同じになることを確保しつつ、背景画像を可能な限り小さい大きさになるべきことを指定します。</p> + +<div style="width: 100%; height: 200px; border: solid 2px;"> +<p>このウィンドウのサイズを変えて、何が起こるかを見て下さい。</p> +</div> + +<p>この例では以下の CSS を使用しています。</p> + +<pre class="brush: css; highlight:[4]">width: 100%; +height: 200px; +background-image: url(https://developer.mozilla.org/files/2917/fxlogo.png); +background-size: cover; +border: solid 2px; +</pre> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{cssxref("background-size")}}</li> + <li>{{cssxref("background")}}</li> +</ul> diff --git a/files/ja/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html b/files/ja/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html new file mode 100644 index 0000000000..4c7327f6c1 --- /dev/null +++ b/files/ja/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html @@ -0,0 +1,74 @@ +--- +title: CSS での複数の背景の利用方法 +slug: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds +tags: + - CSS + - CSS Background + - Example + - Guide + - Intermediate +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +translation_of_original: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds +--- +<p id="Summary">{{CSSRef}}</p> + +<p>CSS3 より、要素に複数の背景を適用できるようになりました。複数の背景は、最初に指定した背景が最前面、最後に指定した背景が最も奥のレイヤーになるように、重ねて描画されます。</p> + +<p>複数の背景は、以下の様に各レイヤーをカンマで区切る事だけの簡単な構文で記述可能です。</p> + +<pre class="syntaxbox">.myclass { + background: 背景1, 背景2, ..., 背景N; +}</pre> + +<p>この方法は、ショートハンドプロパティの {{cssxref("background")}} でも、{{cssxref("background-color")}} 以外の個別のプロパティ（※{{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }},<code> </code>{{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}） のどちらでも利用可能です。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>次の例では、上位レイヤーから</p> + +<ol> + <li>Firefox のロゴ</li> + <li><a href="/ja/CSS/linear-gradient" title="linear-gradient">線形グラデーション</a></li> + <li>花の画像</li> +</ol> + +<p>の順で、3 つの背景が重ねられています。記述量が多くなる場合は、例の様にカンマ毎に改行するとコードが読みやすくなるかもしれません。</p> + +<pre class="brush: css">.multi_bg_example { + background-image: + url("http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png"), /* 最前面の背景レイヤーの背景画像 */ + linear-gradient( to right, rgba(255,255,255,0), #fff ), + url("http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg"); + + background-repeat: + no-repeat, /* 最前面の背景レイヤーに対応 */ + no-repeat, + repeat; + + background-position: + bottom right, /* 最前面の背景レイヤーに対応 */ + left, + right; +}</pre> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">スクリーンショット</td> + </tr> + <tr> + <td><img alt="css_multibg.png" src="/@api/deki/files/4028/=css_multibg.png"></td> + </tr> + </tbody> +</table> + +<p>スクリーンショットで表示されているとおり、最初に記述した Firefox のアイコン画像が最前面、次にグラデーション、最後に花の画像が重ねて描画されます。 {{cssxref("background-repeat")}} と {{cssxref("background-position")}} に指定した複数の値は、それぞれ <code>background-image</code> で記述した各値に対し、同じ順番で適用されます。つまり、<code>background-image</code> の最初の値として指定した FireFox のアイコンの画像に対し、<br> + {{cssxref("background-repeat")}} は "<code>bottom left</code>"、<br> + {{cssxref("background-position")}} は "<code>no-repeat</code>"<br> + が適用され、その結果、Firefox のアイコンの画像は、最前面のレイヤーの<em>右下に</em>、<em>ひとつだけ</em> 表示されるのです。</p> + +<h2 id="See_also" name="See_also">関連記事</h2> + +<ul> + <li><a href="/ja/docs/CSS/Using_CSS_gradients" title="グラデーションの利用">グラデーションの利用</a></li> +</ul> diff --git a/files/ja/conflicting/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html b/files/ja/conflicting/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html new file mode 100644 index 0000000000..fc56bb1de6 --- /dev/null +++ b/files/ja/conflicting/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html @@ -0,0 +1,47 @@ +--- +title: cursor のプロパティーに URL 値を使用する +slug: Using_URL_values_for_the_cursor_property +tags: + - CSS + - CSS_2.1 + - Cross-browser_Development + - Web Development +--- +<p> </p> +<p><a href="ja/Gecko">Gecko</a> 1.8 (<a href="ja/Firefox_1.5">Firefox 1.5</a>, SeaMonkey 1.0) では、<a class="external" href="http://www.w3.org/TR/CSS21/ui.html#cursor-props">CSS2 cursor プロパティー</a> で URL 値が使用できます。これにより、自由な画像 — Gecko がサポートする画像形式なら — がマウスカーソルとして利用できます。</p> +<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">構文</h3> +<p>このプロパティーの記述方式は以下のようになります。</p> +<pre class="eval">cursor: [<url>,]* keyword; +</pre> +<p>これは、カンマ区切りのゼロ個以上の URL が指定可能で、その後ろに <a href="ja/CSS">CSS</a> 規格で定義されている <code>auto</code> や <code>pointer</code> といったキーワードを一つ指定する<b>必要</b>があります。</p> +<p>たとえば、以下のような指定は可能です :</p> +<pre class="eval">cursor: url(foo.cur), url(<span class="nowiki">http://www.example.com/bar.gif</span>), auto; +</pre> +<p>この場合、最初に foo.cur を読み込もうとします。もし、存在しないかその他の理由により利用できない場合、bar.gif を試しますが、両方利用できない場合は <code>auto</code> が利用されます。</p> +<p>cursor 値での CSS3 <a class="external" href="http://www.w3.org/TR/css3-ui/#cursor">書式</a> のサポートが Gecko 1.8beta3 で付け加えられました。(そのため、Firefox 1.5 でも動作します) このことにより、カーソルのホットスポットの座標を指定できるようになります。もし、指定されていなければ、ホットスポットの座標はファイルそのもの (CUR もしくは XBM ファイル) か、画像の左上端に設定されます。CSS3 における書式のサンプルは</p> +<pre class="eval">cursor: url(foo.png) 4 12, auto; +</pre> +<p>となります。</p> +<p>最初の値が x 座標、二つ目の値が y 座標になります。サンプルではホットスポットが、左上端 (0,0) に対して (4,12) のピクセルに設定されます。</p> +<h3 id=".E5.88.B6.E9.99.90.E4.BA.8B.E9.A0.85" name=".E5.88.B6.E9.99.90.E4.BA.8B.E9.A0.85">制限事項</h3> +<p>Gecko でサポートされているすべての画像形式が利用可能です。これは、BMP、JPG、CUR、GIF などが利用できることを意味します。しかしながら、ANI はサポートされていません。また、アニメーション GIF を指定した場合でも、カーソルはアニメーションを行いません。この制限は、将来のリリースで除かれる可能性があります。</p> +<p>Gecko それ自体には、カーソルサイズの制限はありません。しかしながら、OS やプラットフォームの互換性のために、最大サイズを 32x32 にするのがよいでしょう。特に、このサイズより大きなカーソルは、Windows 9x (95, 98, Me) では動作しません。</p> +<p>半透明カーソルは、Windows XP より前ではサポートされていません。これは、OS の制限です。透明度はすべてのプラットフォームで動作します。</p> +<p>Windows、OS/2 と Linux (GTK+ 2.4 以上の場合) での Mozilla リリースでのみ、カーソルにURL 値が利用できます。その他のプラットフォームでのサポートは、将来のリリースで加えられる予定です。(Mac OS: {{ Bug(286304) }}, QNX Neutrino: {{ Bug(286307) }}, XLib: {{ Bug(286309) }}, Qt: {{ Bug(286310) }}, BeOS: {{ Bug(298184) }}, GTK 2.0/2.2: {{ Bug(308536) }})</p> +<h3 id=".E3.81.BB.E3.81.8B.E3.81.AE.E3.83.96.E3.83.A9.E3.82.A6.E3.82.B6.E3.81.A8.E3.81.AE.E4.BA.92.E6.8F.9B.E6.80.A7" name=".E3.81.BB.E3.81.8B.E3.81.AE.E3.83.96.E3.83.A9.E3.82.A6.E3.82.B6.E3.81.A8.E3.81.AE.E4.BA.92.E6.8F.9B.E6.80.A7">ほかのブラウザとの互換性</h3> +<p>Microsoft Internet Explorer でも <code>cursor</code> プロパティーに URL 値を利用できます。しかしながら、CUR と ANI フォーマットのみをサポートしています。</p> +<p>また、<code>cursor</code> プロパティーの書式の制限もゆるいです。これは、</p> +<pre class="eval">cursor: url(foo.cur); +</pre> +<p>または:</p> +<pre class="eval">cursor: url(foo.cur), pointer, url(bar.cur), auto; +</pre> +<p>なども、MSIE では動作することを意味しますが、Geckoブラウザでは動作しません。Gecko との互換性と CSS 規格との整合性からも、URI リストを最初に、最後にキーワード値を一つ入れるべきです。</p> +<dl> + <dd> + <i> + To-do: MSIE が CSS3 ホットスポット座標について行うことについて記述</i> + </dd> +</dl> +<div class="noinclude"> + </div> diff --git a/files/ja/conflicting/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html b/files/ja/conflicting/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html new file mode 100644 index 0000000000..42426babe4 --- /dev/null +++ b/files/ja/conflicting/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html @@ -0,0 +1,368 @@ +--- +title: クロスブラウザのフレックスボックスのミックスイン +slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins +tags: + - CSS + - CSS フレックスボックス + - ミックスイン + - リファレンス +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mixins +--- +<div>{{cssref}}</div> + +<p class="summary">この記事では、 flexbox を現在のブラウザーのネイティブ対応を利用して使いこなしたい人のための一連のミックスインを紹介します。</p> + +<p>このセットは次のものを使用します。</p> + +<ul> + <li>2009年時点の 'box' 構文 (Firefox や古い WebKit) を使用したフォールバックと、接頭辞付きの構文 (IE10, flex ラッピングのない WebKit ブラウザー)</li> + <li>最終的な標準の構文 (Firefox, Safari, Chrome, IE11+, Edge, Opera)</li> +</ul> + +<p>原文:</p> + +<ul> + <li><a href="http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/">http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/</a></li> +</ul> + +<p>参考文献:</p> + +<ul> + <li><a href="http://w3.org/tr/css3-flexbox/">http://w3.org/tr/css3-flexbox/</a></li> + <li><s><a href="http://the-echoplex.net/flexyboxes/">http://the-echoplex.net/flexyboxes/</a></s></li> + <li><a href="http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx">http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx</a></li> + <li><a href="http://css-tricks.com/using-flexbox/">http://css-tricks.com/using-flexbox/</a></li> + <li><a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">A Complete Guide to Flexbox | CSS-Tricks</a></li> + <li><a href="https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/">Visual Guide to CSS3 Flexbox: Flexbox Playground |</a></li> +</ul> + +<div class="note"><strong>メモ:</strong> ミックスインは、現在ブラウザーでは対応されていません。下記の大部分を実行するには、代わりに CSS プリプロセッサーを使用する必要があるでしょう。しかし、 CSS プリプロセッサーは単純に妥当な CSS を生成するので、以下で使用されているテクニックは、推奨される場合は純粋な CSS で書くこともできます。</div> + +<h3 id="Flexbox_containers" name="Flexbox_containers">フレックスボックスのコンテナー</h3> + +<p> {{cssxref("display")}} プロパティに <code>flex</code> の値を使用すると、要素がブロックレベルのコンテナーボックスを生成します。 <code>inline-flex</code> の値では、要素がインラインレベルのフレックスコンテナーボックスを生成します。</p> + +<ul> + <li>値: <code>flex</code> | <code>inline-flex</code></li> + <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-containers">https://drafts.csswg.org/css-flexbox/#flex-containers</a></li> +</ul> + +<pre class="brush: css">@mixin flexbox { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +//Using this mixin +%flexbox { @include flexbox; }</pre> + +<div> +<pre class="brush: css">@mixin inline-flex { + display: -webkit-inline-box; + display: -moz-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +%inline-flex { @include inline-flex; }</pre> +</div> + +<h3 id="Flexbox_direction" name="Flexbox_direction">フレックスボックスの方向</h3> + +<p>The {{cssxref("flex-direction")}} property specifies how flex items are placed in the flex container, by setting the direction of the flex container's main axis. This determines the direction in which flex items are laid out in.</p> + +<ul> + <li>値: <code>row</code> (default) | <code>row-reverse</code> | <code>column</code> | <code>column-reverse</code></li> + <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-direction-property">https://drafts.csswg.org/css-flexbox/#flex-direction-property</a></li> +</ul> + +<div> +<pre class="brush: css">@mixin flex-direction($value: row) { + @if $value == row-reverse { + -webkit-box-direction: reverse; + -webkit-box-orient: horizontal; + -moz-box-direction: reverse; + -moz-box-orient: horizontal; + } @else if $value == column { + -webkit-box-direction: normal; + -webkit-box-orient: vertical; + -moz-box-direction: normal; + -moz-box-orient: vertical; + } @else if $value == column-reverse { + -webkit-box-direction: reverse; + -webkit-box-orient: vertical; + -moz-box-direction: reverse; + -moz-box-orient: vertical; + } @else { + -webkit-box-direction: normal; + -webkit-box-orient: horizontal; + -moz-box-direction: normal; + -moz-box-orient: horizontal; + } + -webkit-flex-direction: $value; + -ms-flex-direction: $value; + flex-direction: $value; +} + +// Shorter version: +@mixin flex-dir($args...) { @include flex-direction($args...); }</pre> +</div> + +<h3 id="Flexbox_wrap" name="Flexbox_wrap">フレックスボックスの折り返し</h3> + +<p>The {{cssxref("flex-wrap")}} property controls whether the flex container is single-lined or multi-lined and the direction of the cross-axis, which determines the direction in which the new lines are stacked in.</p> + +<ul> + <li>値: <code>nowrap</code> (default) | <code>wrap</code> | <code>wrap-reverse</code></li> + <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-wrap-property">https://drafts.csswg.org/css-flexbox/#flex-wrap-property</a></li> +</ul> + +<div> +<pre class="brush: css">@mixin flex-wrap($value: nowrap) { + // No Webkit/FF Box fallback. + -webkit-flex-wrap: $value; + @if $value == nowrap { + -ms-flex-wrap: none; + } @else { + -ms-flex-wrap: $value; + } + flex-wrap: $value; +}</pre> +</div> + +<h3 id="Flexbox_flow_(shorthand)" name="Flexbox_flow_(shorthand)">フレックスボックスのフロー (一括指定)</h3> + +<p>The {{cssxref("flex-flow")}} property is shorthand for setting the <code>flex-direction</code> and <code>flex-wrap</code> properties, which together define the flex container's main and cross axes.</p> + +<ul> + <li>値: <code>row</code> (default) | <code>nowrap</code></li> + <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-flow-property">https://drafts.csswg.org/css-flexbox/#flex-flow-property</a></li> +</ul> + +<div> +<pre class="brush: css">@mixin flex-flow($values: (row nowrap)) { + // No Webkit/FF Box fallback. + -webkit-flex-flow: $values; + -ms-flex-flow: $values; + flex-flow: $values; +}</pre> +</div> + +<h3 id="Flexbox_order" name="Flexbox_order">フレックスボックスの順序</h3> + +<p>The {{cssxref("order")}} property controls the order in which flex items appear within their flex container, by assigning them to ordinal groups.</p> + +<ul> + <li>Value: any integer (0 is the default)</li> + <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#order-property">https://drafts.csswg.org/css-flexbox/#order-property</a></li> +</ul> + +<div> +<pre class="brush: css">@mixin order($int: 0) { + -webkit-box-ordinal-group: $int + 1; + -moz-box-ordinal-group: $int + 1; + -webkit-order: $int; + -ms-flex-order: $int; + order: $int; +}</pre> +</div> + +<h3 id="Flexbox_grow" name="Flexbox_grow">フレックスボックスの伸長</h3> + +<p>The {{cssxref("flex-grow")}} property sets the flex grow factor. Negative numbers are invalid.</p> + +<ul> + <li>Value: any integer (0 is the default)</li> + <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-grow-property">https://drafts.csswg.org/css-flexbox/#flex-grow-property</a></li> +</ul> + +<div> +<pre class="brush: css">@mixin flex-grow($int: 1) { + -webkit-box-flex: $int; + -moz-box-flex: $int; + -webkit-flex-grow: $int; + -ms-flex: $int; + flex-grow: $int; +}</pre> +</div> + +<h3 id="Flexbox_shrink" name="Flexbox_shrink">フレックスボックスの縮小</h3> + +<p>The {{cssxref("flex-shrink")}} property sets the flex shrink factor. Negative numbers are invalid.</p> + +<ul> + <li>Value: any integer (0 is the default)</li> + <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-shrink-property">https://drafts.csswg.org/css-flexbox/#flex-shrink-property</a></li> +</ul> + +<div> +<pre class="brush: css">@mixin flex-shrink($int: 0) { + -webkit-flex-shrink: $int; + -moz-flex-shrink: $int; + -ms-flex: $int; + flex-shrink: $int; +}</pre> +</div> + +<h3 id="Flexbox_basis" name="Flexbox_basis">フレックスボックスの basis</h3> + +<p>The {{cssxref("flex-basis")}} property sets the flex basis. Negative lengths are invalid.</p> + +<ul> + <li>値: See the {{cssxref("flex-basis")}} reference (the default is<code> auto</code>)</li> + <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-basis-property">https://drafts.csswg.org/css-flexbox/#flex-basis-property</a></li> +</ul> + +<div> +<pre class="brush: css">@mixin flex-basis($value: auto) { + -webkit-flex-basis: $value; + flex-basis: $value; +}</pre> +</div> + +<h3 id="Flexbox_flex_(shorthand)" name="Flexbox_flex_(shorthand)">フレックスボックスの "flex" (一括指定)</h3> + +<p>The {{cssxref("flex")}} property specifies the components of a flexible length; <code>flex-grow</code> factor, <code>flex-shrink</code> factor, and the <code>flex-basis</code>. When an element is a flex item, <code>flex</code> is consulted instead of the main size property to determine the main size of the element. If an element is not a flex item, <code>flex</code> has no effect.</p> + +<ul> + <li>値: See the {{cssxref("flex")}} reference for values and default</li> + <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-property">https://drafts.csswg.org/css-flexbox/#flex-property</a></li> +</ul> + +<div> +<pre class="brush: css">@mixin flex($fg: 1, $fs: 0, $fb: auto) { + + // Set a variable to be used by box-flex properties + $fg-boxflex: $fg; + + // Box-Flex only supports a flex-grow value so lets grab the + // first item in the list and just return that. + @if type-of($fg) == 'list' { + $fg-boxflex: nth($fg, 1); + } + + -webkit-box: $fg-boxflex; + -moz-box: $fg-boxflex; + -webkit-flex: $fg $fs $fb; + -ms-flexbox: $fg $fs $fb; + flex: $fg $fs $fb; +}</pre> +</div> + +<h3 id="Flexbox_justify_content" name="Flexbox_justify_content">フレックスボックスのコンテンツの位置揃え</h3> + +<p>The {{cssxref("justify-content")}} property aligns flex items along the main axis of the current line of the flex container. This is done after any flexible lengths and any auto margins have been resolved. Typically, it helps to distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.</p> + +<div class="note"> +<p><strong>Note</strong>: <code>space-*</code> values not supported in older syntaxes.</p> +</div> + +<ul> + <li>値: <code>flex-start</code> (default) | <code>flex-end</code> | <code>center</code> | <code>space-between</code> | <code>space-around</code></li> + <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#justify-content-property">https://drafts.csswg.org/css-flexbox/#justify-content-property</a></li> +</ul> + +<div> +<pre class="brush: css">@mixin justify-content($value: flex-start) { + @if $value == flex-start { + -webkit-box-pack: start; + -moz-box-pack: start; + -ms-flex-pack: start; + } @else if $value == flex-end { + -webkit-box-pack: end; + -moz-box-pack: end; + -ms-flex-pack: end; + } @else if $value == space-between { + -webkit-box-pack: justify; + -moz-box-pack: justify; + -ms-flex-pack: justify; + } @else if $value == space-around { + -ms-flex-pack: distribute; + } @else { + -webkit-box-pack: $value; + -moz-box-pack: $value; + -ms-flex-pack: $value; + } + -webkit-justify-content: $value; + justify-content: $value; +} + // Shorter version: + @mixin flex-just($args...) { @include justify-content($args...); }</pre> +</div> + +<h3 id="Flexbox_align_items" name="Flexbox_align_items">フレックスボックスの項目の配置</h3> + +<p>Flex items can be aligned in the cross axis of the current line of the flex container, similar to <code>justify-content</code> but in the perpendicular direction. {{cssxref("align-items")}} sets the default alignment for all of the flex container's items, including anonymous flex items. {{cssxref("align-self")}} allows this default alignment to be overridden for individual flex items. (For anonymous flex items, <code>align-self</code> always matches the value of <code>align-items</code> on their associated flex container.)</p> + +<ul> + <li>値: <code>flex-start</code> | <code>flex-end</code> | <code>center</code> | <code>baseline</code> | <code>stretch</code> (default)</li> + <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#align-items-property">https://drafts.csswg.org/css-flexbox/#align-items-property</a></li> +</ul> + +<div> +<pre class="brush: css">@mixin align-items($value: stretch) { + @if $value == flex-start { + -webkit-box-align: start; + -moz-box-align: start; + -ms-flex-align: start; + } @else if $value == flex-end { + -webkit-box-align: end; + -moz-box-align: end; + -ms-flex-align: end; + } @else { + -webkit-box-align: $value; + -moz-box-align: $value; + -ms-flex-align: $value; + } + -webkit-align-items: $value; + align-items: $value; +}</pre> +</div> + +<h3 id="Flexbox_align_self" name="Flexbox_align_self">フレックスボックスの自己配置</h3> + +<p>Values: <code>auto</code> (default) | <code>flex-start</code> | <code>flex-end</code> | <code>center</code> | <code>baseline</code> | <code>stretch</code></p> + +<p>Spec: <a href="https://drafts.csswg.org/css-flexbox/#align-items-property">https://drafts.csswg.org/css-flexbox/#align-items-property</a></p> + +<div> +<pre class="brush: css">@mixin align-self($value: auto) { + // No Webkit Box Fallback. + -webkit-align-self: $value; + @if $value == flex-start { + -ms-flex-item-align: start; + } @else if $value == flex-end { + -ms-flex-item-align: end; + } @else { + -ms-flex-item-align: $value; + } + align-self: $value; +}</pre> +</div> + +<h3 id="Flexbox_align_content" name="Flexbox_align_content">フレックスボックスのコンテンツの配置</h3> + +<p>The {{cssxref("align-content")}} property aligns a flex container's lines within the flex container when there is extra space in the cross-axis, similar to how <code>justify-content</code> aligns individual items within the main axis. Note that this property has no effect when the flexbox has only a single line.</p> + +<ul> + <li>値: <code>flex-start</code> | <code>flex-end</code> | <code>center</code> | <code>space-between</code> | <code>space-around</code> | <code>stretch</code> (default)</li> + <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#align-content-property">https://drafts.csswg.org/css-flexbox/#align-content-property</a></li> +</ul> + +<div> +<pre class="brush: css">@mixin align-content($value: stretch) { + // No Webkit Box Fallback. + -webkit-align-content: $value; + @if $value == flex-start { + -ms-flex-line-pack: start; + } @else if $value == flex-end { + -ms-flex-line-pack: end; + } @else { + -ms-flex-line-pack: $value; + } + align-content: $value; +}</pre> +</div> diff --git a/files/ja/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html b/files/ja/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html new file mode 100644 index 0000000000..4458dddff2 --- /dev/null +++ b/files/ja/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html @@ -0,0 +1,191 @@ +--- +title: Web アプリケーションのレイアウトに flexbox を使用する +slug: Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications +tags: + - Advanced + - CSS + - CSS Flexible Boxes + - Example + - Guide + - Web +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox +translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications +--- +<div>{{CSSRef}}</div> + +<p><a href="/ja/docs/Web/Guide/CSS/Flexible_boxes">flexbox</a> は、デスクトップからモバイルまで対応する Web アプリケーションのレイアウト設計で助けになります。浮動状態の {{HTMLElement("div")}} 要素、<a href="/ja/docs/Web/CSS/position#Absolute_positioning">絶対位置指定</a>、JavaScript による細工をなくして、数行の <a href="/ja/docs/Web/CSS">CSS</a> だけで水平方向または垂直方向のフローレイアウトを構築します。基本的な用途例を挙げます:</p> + +<ul> + <li>ページの中央に要素を置きたい場合。</li> + <li>コンテナを垂直方向へ次々に並べて配置したい場合。</li> + <li>スクリーンサイズが小さいときに垂直方向へ並べ替えられる、ボタンや要素の列を作成したい場合。</li> +</ul> + +<p>この記事では、接頭辞がない現行の標準仕様をサポートするブラウザで <em>flexbox</em> を使用する方法を扱います。古いブラウザ向けのベンダー接頭辞については、<a href="/ja/docs/Web/Guide/CSS/Flexible_boxes">CSS flexible box の使用に関する、より一般的なガイド</a>をご覧ください。</p> + +<h2 id="Basics" name="Basics">基本</h2> + +<p>任意の {{HTMLElement("div")}} 要素で {{cssxref("display")}} プロパティに <code>flex</code> を、また {{cssxref("flex-flow")}} に <code>row</code> (要素を水平に並べたい場合) または <code>column</code> (要素を垂直に並べたい場合) を設定すると、内部の要素を flexbox のフローにすることができます。水平方向の flexbox を使用していて内容物を垂直方向に折り返したい場合は、値 <code>wrap</code> も指定します。</p> + +<p>そして、flex フローの一部として組み込みたい要素に {{cssxref("flex")}} プロパティを指定します。通常、以下の 3 種類の値のいずれかを使用するでしょう:</p> + +<ul> + <li>ボタンなど、自身に割り当てられた幅を占有するだけの要素にしたい場合は、<code>flex: none</code> を使用します。この値は <code>0 0 auto</code> に展開されます。</li> + <li>要素のサイズを明示したい場合は、<code>flex: 0 0 <em>size</em></code> を使用します。例: <code>flex 0 0 60px</code></li> + <li>使用可能な領域を埋めるように拡張する要素にしたい、すなわちフロー内に同種の要素が複数ある場合は均等に領域を共有させたい場合は、<code>flex: auto</code> を使用します。この値は <code>1 1 auto</code> に展開されます。</li> +</ul> + +<p>もちろん他にも使用できる値はありますが、それらは基本的な使用方法を超えるものでしょう。これらの値がどのように適用されるかを、いくつかの例で見ていきましょう。</p> + +<h2 id="Centering_an_element_inside_a_page" name="Centering_an_element_inside_a_page">ページ内の中央に要素を配置する</h2> + +<p>このような使い方でもっとも簡単な方法は、2 つの flexible box を入れ子にすることです。それぞれの flexbox 内に要素が 3 つあります。そのうち 2 つが詰め物になって、残る要素が中央に置かれます。</p> + +<h3 id="CSS_Content" name="CSS_Content">CSS コンテンツ</h3> + +<pre class="brush: css;">.vertical-box { + display: flex; + height: 400px; + width: 400px; + flex-flow: column; +} +.horizontal-box { + display: flex; + flex-flow: row; +} +.spacer { + flex: auto; + background-color: black; +} +.centered-element { + flex: none; + background-color: white; +} +</pre> + +<h3 id="HTML_Content" name="HTML_Content">HTML コンテンツ</h3> + +<pre class="brush: html;"><div class="vertical-box"> + <div class="spacer"></div> + <div class="centered-element horizontal-box"> + <div class="spacer"></div> + <div class="centered-element">Centered content</div> + <div class="spacer"></div> + </div> + <div class="spacer"></div> +</div> +</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample('Centering_an_element_inside_a_page', 500, 500)}}</p> + +<h2 id="Flowing_a_set_of_containers_vertically" name="Flowing_a_set_of_containers_vertically">複数のコンテナを垂直方向に並べる</h2> + +<p>ヘッダーセクション、コンテンツセクション、フッターセクションがあるレイアウトのページを思い浮かべてください。ヘッダーとフッターのサイズは固定しますが、コンテンツセクションは使用できる領域に応じてリサイズします。これはコンテンツセクションの {{cssxref("flex")}} プロパティを <code>auto</code> に、またヘッダーおよびフッターの {{cssxref("flex")}} プロパティを <code>none</code> にすることで実現できます。</p> + +<h3 id="CSS_Content_2" name="CSS_Content_2">CSS コンテンツ</h3> + +<pre class="brush: css;highlight:[8,14]">.vertical-box { + display: flex; + height: 400px; + width: 400px; + flex-flow: column; +} +.fixed-size { + flex: none; + height: 30px; + background-color: black; + text-align: center; +} +.flexible-size { + flex: auto; + background-color: white; +} +</pre> + +<h3 id="HTML_Content_2" name="HTML_Content_2">HTML コンテンツ</h3> + +<pre class="brush: html;"><div id="document" class="vertical-box"> + <div class="fixed-size"><button id="increase-size">Increase container size</button></div> + <div id="flexible-content" class="flexible-size"></div> + <div class="fixed-size"><button id="decrease-size">Decrease container size</button></div> +</div> +</pre> + +<h3 id="Javascript_Content" name="Javascript_Content">Javascript コンテンツ</h3> + +<pre class="brush: js;">var height = 400; +document.getElementById('increase-size').onclick=function() { + height += 10; + if (height > 500) height = 500; + document.getElementById('document').style.height = (height + "px"); +} + +document.getElementById('decrease-size').onclick=function() { + height -= 10; + if (height < 300) height = 300; + document.getElementById('document').style.height = (height + "px"); +}</pre> + +<h3 id="Result_2" name="Result_2">結果</h3> + +<p>{{EmbedLiveSample('Flowing_a_set_of_containers_vertically', 500, 500)}}</p> + +<p>この例はヘッダーのボタンをクリックするとサイズが拡大、フッターのボタンをクリックするとサイズが縮小するようになっています。ヘッダーやフッターのサイズを一定にしたままで、どのようにしてコンテンツセクションを自動的に適切なサイズに変えているかを確認してください。</p> + +<h2 id="Creating_a_collapsing_horizontal_container" name="Creating_a_collapsing_horizontal_container">折り返される水平方向のコンテナを作成する</h2> + +<p>スクリーンサイズに余裕があれば水平方向に情報一式を並べますが、そうでない場合は水平方向のレイアウトを崩したい場合があるかもしれません。これは、flexbox を使用すればとても簡単です。{{cssxref("flex-flow")}} プロパティに値 <code>wrap</code> を追加すると実現できます。</p> + +<h3 id="CSS_Content_3" name="CSS_Content_3">CSS コンテンツ</h3> + +<pre class="brush: css;highlight:[4]">.horizontal-container { + display: flex; + width: 300px; + flex-flow: row wrap; +} +.fixed-size { + flex: none; + width: 100px; + background-color: black; + color: white; + text-align: center; +} +</pre> + +<h3 id="HTML_Content_3" name="HTML_Content_3">HTML コンテンツ</h3> + +<pre class="brush: html;"><div id="container" class="horizontal-container"> + <div class="fixed-size">Element 1</div> + <div class="fixed-size">Element 2</div> + <div class="fixed-size">Element 3</div> +</div><button id="increase-size">Increase container size</button><button id="decrease-size">Decrease container size</button> +</pre> + +<h3 id="Javascript_Content_2" name="Javascript_Content_2">Javascript コンテンツ</h3> + +<pre class="brush: js;">var width = 300; + +document.getElementById('increase-size').onclick=function() { + width += 100; + if (width > 300) width = 300; + document.getElementById('container').style.width = (width + "px"); +} + +document.getElementById('decrease-size').onclick=function() { + width -= 100; + if (width < 100) width = 100; + document.getElementById('container').style.width = (width + "px"); +} +</pre> + +<h3 id="Result_3" name="Result_3">結果</h3> + +<p>{{EmbedLiveSample('Creating_a_collapsing_horizontal_container', 500, 200)}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/Guide/CSS/Flexible_boxes">CSS flexible box の利用</a></li> +</ul> diff --git a/files/ja/conflicting/web/css/float/index.html b/files/ja/conflicting/web/css/float/index.html new file mode 100644 index 0000000000..562347725e --- /dev/null +++ b/files/ja/conflicting/web/css/float/index.html @@ -0,0 +1,32 @@ +--- +title: none +slug: Web/CSS/none +tags: + - CSS + - CSS Reference +translation_of: Web/CSS/float +translation_of_original: Web/CSS/none +--- +<div> + {{CSSRef()}}</div> +<h2 id="Summary" name="Summary">概要</h2> +<p><strong><code>none</code></strong> キーワードは、多くの CSS プロパティで使用される共通の値です。デフォルト値であることが多いですが、そのプロパティの「標準値」を意味し、多くの場合は初期値となります。よく似た値として {{ Cssxref("normal") }} が有ります。</p> +<h2 id="Used_in" name="Used_in">none 値が使用可能な CSS プロパティ</h2> +<ul> + <li>{{ Cssxref("float") }}<br> + 要素はフロートしません。</li> + <li>{{ Cssxref("text-decoration") }}<br> + 要素の装飾を行いません。</li> + <li>{{ Cssxref("max-height") }} / {{ Cssxref("max-width") }}<br> + 高さ・幅を特定値で制限しません。</li> + <li>{{ Cssxref("background-image") }}</li> + <li>{{ Cssxref("border-style") }}</li> + <li>{{ Cssxref("clear") }}</li> + <li>{{ Cssxref("content") }}</li> + <li>{{ Cssxref("counter-increment") }}</li> + <li>{{ Cssxref("counter-reset") }}</li> + <li>{{ Cssxref("display") }}</li> + <li>{{ Cssxref("list-style-type") }}</li> + <li>{{ Cssxref("quotes") }}</li> + <li>{{ Cssxref("text-transform") }}</li> +</ul> diff --git a/files/ja/conflicting/web/css/font-variant/index.html b/files/ja/conflicting/web/css/font-variant/index.html new file mode 100644 index 0000000000..4f1a3acf6b --- /dev/null +++ b/files/ja/conflicting/web/css/font-variant/index.html @@ -0,0 +1,37 @@ +--- +title: normal +slug: Web/CSS/normal +tags: + - CSS Reference +translation_of: Web/CSS/font-variant +translation_of_original: Web/CSS/normal +--- +<div> + {{CSSRef}}</div> +<h2 id="Summary" name="Summary">概要</h2> +<p><strong><code>normal</code></strong> は幾つかの CSS プロパティで使用される一般的な値です。そのプロパティの「標準値」を意味し、多くの場合は初期値となります。よく似た値として {{Cssxref("none")}} が有ります。</p> +<h2 id="Used_in" name="Used_in">normal が使用可能な CSS プロパティ</h2> +<dl> + <dt> + {{Cssxref("font-weight")}}</dt> + <dd> + <code>normal</code> を指定した場合、font-weight プロパティの基準値（<code>400</code>）と同等となります。太字にも細字にもなりません。</dd> + <dt> + {{Cssxref("font-style")}}</dt> + <dd> + <code>normal</code> を指定した場合、italic や oblique でない、通常のスタイルで文字がレンダリングされます。</dd> + <dt> + {{Cssxref("word-spacing")}}</dt> + <dd> + <code>normal</code> を指定した場合、フォントの標準的な字間で文字がレンダリングされます。</dd> +</dl> +<p>他にも、以下の様なプロパティ等で <code>normal</code> が指定可能です。</p> +<ul> + <li>{{Cssxref("font-variant")}}</li> + <li>{{Cssxref("letter-spacing")}}</li> + <li>{{Cssxref("white-space")}}</li> + <li>{{Cssxref("speak")}}</li> + <li>{{Cssxref("unicode-bidi")}}</li> + <li>{{Cssxref("line-height")}}</li> + <li>{{Cssxref("content")}}</li> +</ul> diff --git a/files/ja/conflicting/web/css/index.html b/files/ja/conflicting/web/css/index.html new file mode 100644 index 0000000000..7eed5bdf59 --- /dev/null +++ b/files/ja/conflicting/web/css/index.html @@ -0,0 +1,31 @@ +--- +title: CSS-2 Quick Reference +slug: CSS-2_Quick_Reference +tags: + - CSS + - CSS2_Quick_Reference + - CSS_2.1 +translation_of: Web/CSS +translation_of_original: CSS-2_Quick_Reference +--- +<p> </p><p>この文書は、初心者からエキスパートまでのための CSS-2 仕様のクイックリファレンスです。スタイルプロパティは簡単な文法で書かれています。 +</p><p><big><b><a href="ja/CSS-2_Quick_Reference/All_in_a_page">CSS-2 クイックリファレンス(一括)</a></b></big> +</p><p>さらに詳しい情報とブラウザのサポート: +</p><p><big> +<b><a href="ja/CSS-2_Quick_Reference/Selectors">セレクタ</a></b><br> +<b><a href="ja/CSS-2_Quick_Reference/Box_model">ボックスモデル</a></b><br> +<b><a href="ja/CSS-2_Quick_Reference/Visual_formatting_model">視覚的構成モデル</a></b><br> +<b><a href="ja/CSS-2_Quick_Reference/Visual_formatting_details">視覚的構成の詳細</a></b><br> +<b><a href="ja/CSS-2_Quick_Reference/Visual_effects">視覚効果</a></b><br> +<b><a href="ja/CSS-2_Quick_Reference/Lists">リスト</a></b><br> +<b><a href="ja/CSS-2_Quick_Reference/Color_and_Background">カラーと背景</a></b><br> +<b><a href="ja/CSS-2_Quick_Reference/Font">フォント</a></b><br> +<b><a href="ja/CSS-2_Quick_Reference/Text">テキスト</a></b><br> +<b><a href="ja/CSS-2_Quick_Reference/Tables">表組み</a></b><br> +<b><a href="ja/CSS-2_Quick_Reference/User_interface">ユーザインタフェース</a></b><br> +<b><a href="ja/CSS-2_Quick_Reference/Units">単位</a></b><br> +</big> +</p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/CSS-2_Quick_Reference", "fr": "fr/Pr\u00e9cis_CSS_2", "pl": "pl/Szybka_dokumentacja_CSS-2" } ) }} diff --git a/files/ja/conflicting/web/css/media_queries/using_media_queries/index.html b/files/ja/conflicting/web/css/media_queries/using_media_queries/index.html new file mode 100644 index 0000000000..961536b070 --- /dev/null +++ b/files/ja/conflicting/web/css/media_queries/using_media_queries/index.html @@ -0,0 +1,412 @@ +--- +title: メディアクエリ +slug: Web/Guide/CSS/Media_queries +tags: + - CSS + - CSS Reference +--- +<p>{{ gecko_minversion_header("1.9.1") }}</p> + +<p>CSS 3 ではメディア依存のスタイルシートのサポートが強化され、よりメディアの特性に適したスタイルシートを適用できます。メディアクエリは、メディアタイプと、メディア特性を利用してスタイルシートの適用条件を決定 (limits the style sheets' scope) する一つ以上の式からなります。メディア特性には、メディアの幅と高さ、色数などがあります。メディアクエリにより、コンテンツそのものを変更せずに、出力デバイスに合わせてコンテンツを表現することができます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<p>メディアクエリは、<a class="internal" href="/ja/CSS/@media" title="ja/CSS/@media">メディアタイプ</a>と、メディア特性を必要とする一つ以上の式からなります。この式の結果は、true または false になります。クエリの結果は、ドキュメントが表示されるデバイスの種類がメディアクエリで指定されたメディアタイプにマッチし、<strong>さらに</strong>メディアクエリのすべての式が true のとき、true になります。</p> + +<h3 id="Logical operators" name="Logical operators">論理演算子</h3> + +<p>論理演算子を使用して複雑なメディアクエリを記述できます。論理演算子には、<code>not</code> および <code>and</code>, <code>only</code> があります。</p> + +<p>また、複数のメディアクエリをカンマ区切りのリスト形式で併記することもできます。リスト内のいずれかのメディアクエリが true であれば、関連付けられたスタイルシートが適用されます。これは論理演算子の "or" と等価です。</p> + +<p><code>not</code> キーワードは、クエリの結果を否定します。例えば、"<span style="font-family: monospace;">all</span><code> and (not color)</code>" のクエリは、モノクロデバイスではメディアタイプに関係なく true になります。</p> + +<p><code>only</code> キーワードは、メディアクエリに対応していない古いブラウザからスタイルシートを隠します:</p> + +<pre><link rel="stylesheet" media="only screen and (color)" href="example.css" /> +</pre> + +<h3 id="Pseudo-BNF_(for_those_of_you_that_like_that_kind_of_thing)" name="Pseudo-BNF_(for_those_of_you_that_like_that_kind_of_thing)">擬似 BNF (この表記を好む方のために)</h3> + +<pre>media_query_list: <media_query> [, <media_query> ]* +media_query: [[only | not]? <media_type> [ and <expression> ]*] + | <expression> [ and <expression> ]* +expression: ( <media_feature> [: <value>]? ) +media_type: all | aural | braille | handheld | print | + projection | screen | tty | tv | embossed +media_feature: width | min-width | max-width + | height | min-height | max-height + | device-width | min-device-width | max-device-width + | device-height | min-device-height | max-device-height + | aspect-ratio | min-aspect-ratio | max-aspect-ratio + | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio + | color | min-color | max-color + | color-index | min-color-index | max-color-index + | monochrome | min-monochrome | max-monochrome + | resolution | min-resolution | max-resolution + | scan | grid</pre> + +<p>メディアクエリは大文字と小文字を区別しません。メディアクエリに書かれた未知のメディアタイプは常に false になります。</p> + +<div class="note"><strong>注記:</strong> 式 (expression) の前後には括弧が必要です。括弧を書かないとエラーになります。</div> + +<h2 id="Media features" name="Media features">メディア特性</h2> + +<p>ほとんどのメディア特性には、特性が式の値 "以上" または "以下" であることを明示的に制約する "min-" または "max-" 前置詞を付けられます。これは、HTML や XML に干渉する "<" および ">" 記号の使用を避けるためのものです。値を指定せずにメディア特性を使用した場合、特性の値が 0 でなくても、式の結果は true になります。</p> + +<div class="note"><strong>注記:</strong> メディア特性がブラウザを実行中のデバイスに適用されない場合、メディア特性に記述された式の値は常に false になります。例えば、音声デバイスに対するアスペクト比の問い合わせは常に false になります。</div> + +<h3 id="color">color</h3> + +<p><strong>値:</strong> {{cssxref("<color>")}}<br> + <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br> + <strong>min/max 前置詞の使用:</strong> 可</p> + +<p>出力デバイスのカラーコンポーネントあたりのビット数を指示します。デバイスがカラー表示可能なものでない場合、この値は 0 になります。</p> + +<div class="note"><strong>注記:</strong> カラーコンポーネントがカラーコンポーネントごとに異なるビット数を持つ場合、最も小さな数値が使用されます。例えば、ディスプレイが、青は 5 ビット、赤と緑は 6 ビットのカラーコンポーネントで構成されている場合、デバイスはカラーコンポーネントあたり 5 ビット使用するものとみなされ、color テーブルではビット数の最小値が使用されます。</div> + +<h4 id="Examples" name="Examples">例</h4> + +<p>すべてのカラー表示可能なデバイスにスタイルシートを適用するには:</p> + +<pre>@media all and (color) { ... } +</pre> + +<p>カラーコンポーネントあたり最低 4 ビットのデバイスにスタイルシートを適用するには:</p> + +<pre>@media all and (min-color: 4) { ... } +</pre> + +<h3 id="color-index">color-index</h3> + +<p><strong>値:</strong> 整数<br> + <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br> + <strong>min/max 前置詞の使用:</strong> 可</p> + +<p>出力デバイスのカラー検索テーブルのエントリ数を指示します。</p> + +<h4 id="Examples" name="Examples">例</h4> + +<p>インデックス化されたカラーを使用するすべてのデバイスにスタイルシートを適用するよう指示するには:</p> + +<pre>@media all and (color-index) { ... } +</pre> + +<p>最低 256 色を持つインデックス化されたカラーデバイスにスタイルシートを適用するには:</p> + +<pre><link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" /> +</pre> + +<h3 id="aspect-ratio">aspect-ratio</h3> + +<p><strong>値:</strong> 整数 / 整数<br> + <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}<br> + <strong>min/max 前置詞の使用:</strong> 可</p> + +<p>出力デバイスの対象とする表示領域のアスペクト比を記述します。この値は、スラッシュ文字 ("/") で区切られた 2 つの正の整数です。これは、水平ピクセル数 / 垂直ピクセル数を表します。</p> + +<h4 id="Examples" name="Examples">例</h4> + +<p>以下は、表示領域が、その高さよりも幅が広い場合に使用される、特別なスタイルシートを選択します。</p> + +<pre>@media screen and (min-aspect-ratio: 1/1) { ... }</pre> + +<p>これは、アスペクト比が 1:1 以上の場合のスタイルを選択します。</p> + +<h3 id="device-aspect-ratio">device-aspect-ratio</h3> + +<p><strong>値:</strong> 整数 / 整数<br> + <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}<br> + <strong>min/max 前置詞の使用:</strong> 可</p> + +<p>出力デバイスのアスペクト比を記述します。この値は、スラッシュ文字 ("/") で区切られた 2 つの正の整数です。これは、水平ピクセル数 / 垂直ピクセル数を表します。</p> + +<h4 id="Examples" name="Examples">例</h4> + +<p>以下は、ワイドスクリーンディスプレイに使用する特別なスタイルシートを選択します。</p> + +<pre>@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }</pre> + +<p>これは、アスペクト比が 16:9 または 16:10 の場合のスタイルを選択します。</p> + +<h3 id="device-height">device-height</h3> + +<p><strong>値:</strong> {{cssxref("<length>")}}<br> + <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}<br> + <strong>min/max 前置詞の使用:</strong> 可</p> + +<p>出力デバイスの高さを記述します (ドキュメントウィンドウなどの描画領域ではなく、スクリーンや用紙全体を意味します)。</p> + +<h4 id="Examples" name="Examples">例</h4> + +<p>幅 800 ピクセル未満のスクリーンに表示されるドキュメントにスタイルシートを適用するには:</p> + +<pre><link rel="stylesheet" media="screen and (max-device-width: 799px)" /> +</pre> + +<h3 id="device-width">device-width</h3> + +<p><strong>値:</strong> {{cssxref("<length>")}}<br> + <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}<br> + <strong>min/max 前置詞の使用:</strong> 可</p> + +<p>出力デバイスの幅を記述します (ドキュメントウィンドウなどの描画領域ではなく、スクリーンや用紙全体を意味します)。</p> + +<h3 id="grid">grid</h3> + +<p><strong>値:</strong> 整数<br> + <strong>メディア:</strong> all<br> + <strong>min/max 前置詞の使用:</strong> 不可</p> + +<p>出力デバイスがグリッドデバイスとビットマップデバイスのどちらなのかを決定します。デバイスがグリッドベース (tty ターミナルや電話機のディスプレイなど表示部が一行ずつ) の場合、値は 1 になります。ビットマップデバイスの場合は 0 になります。</p> + +<div class="note"><strong>注記:</strong> Gecko (および Firefox) は現在グリッドデバイスに対応していないため、このメディア特性はサポートされていません。</div> + +<h4 id="Examples" name="Examples">例</h4> + +<p>ディスプレイの表示幅が 15 文字以下の handheld デバイスにスタイルを適用するには:</p> + +<pre>@media handheld and (grid) and (max-width: 15em) { ... } +</pre> + +<div class="note"><strong>注記:</strong> "em" 単位はグリッドデバイスで特別な意味を持ちます。"em" 単位の正確な幅を特定することができないため、1em はグリッドセル一つ分の幅と高さであると仮定されます。</div> + +<h3 id="height">height</h3> + +<p><strong>値:</strong> {{cssxref("<length>")}}<br> + <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}<br> + <strong>min/max 前置詞の使用:</strong> 可</p> + +<p><code>height</code> メディア特性には、出力デバイスの描画域の高さを記述します (viewport の高さやプリンタのページ印刷領域の高さなど)。</p> + +<div class="note"><strong>注記:</strong> ユーザがウィンドウの大きさを変更すると、<code>width</code> や <code>height</code> メディア特性を使用したメディアクエリを基に、Firefox がスタイルシートを適切なものに切り替えます。</div> + +<h3 id="monochrome">monochrome</h3> + +<p><strong>値:</strong> 整数<br> + <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br> + <strong>min/max 前置詞の使用:</strong> 可</p> + +<p>モノクロ (グレースケール) デバイス上のピクセルあたりのビット数を指示します。デバイスがモノクローム表示でない場合、デバイスの値は 0 になります。</p> + +<h4 id="Examples" name="Examples">例</h4> + +<p>すべてのモノクロデバイスにスタイルシートを適用するには:</p> + +<pre>@media all and (monochrome) { ... } +</pre> + +<p>ピクセルあたり最低 8 ビットのモノクロデバイスにスタイルシートを適用するには:</p> + +<pre>@media all and (min-monochrome: 8) { ... } +</pre> + +<h3 id="orientation">orientation</h3> + +<p><strong>値:</strong> <code>landscape</code> | <code>portrait</code><br> + <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br> + <strong>min/max 前置詞の使用:</strong> 不可</p> + +<p>デバイスが横置き (landscape: 高さより幅が広い表示) と縦置き (portrait: 幅より高さが高い表示) のどちらのモードなのかを指示します。</p> + +<h4 id="Examples" name="Examples">例</h4> + +<p>縦置き方向のときにだけスタイルシートを適用するには:</p> + +<pre>@media all and (orientation: portrait) { ... }</pre> + +<h3 id="resolution">resolution</h3> + +<p><strong>値:</strong> {{cssxref("<resolution>")}}<br> + <strong>メディア:</strong> {{cssxref("Media/Bitmap", "bitmap")}}<br> + <strong>min/max 前置詞の使用:</strong> 可</p> + +<p>出力デバイスの解像度 (ピクセル密度) を指示します。解像度は、1 インチあたりのドット数 (dpi) または 1 センチメートルあたりのドット数 (dpcm) で指定されます。</p> + +<h4 id="Examples" name="Examples">例</h4> + +<p>解像度が最低 300 dpi のデバイスにスタイルシートを適用するには:</p> + +<pre>@media print and (min-resolution: 300dpi) { ... } +</pre> + +<h3 id="scan">scan</h3> + +<p><strong>値:</strong> <code>progressive</code> | <code>interlace</code><br> + <strong>メディア:</strong> {{cssxref("Media/TV", "tv")}}<br> + <strong>min/max 前置詞の使用:</strong> 不可</p> + +<p>テレビ出力デバイスの走査方式を記述します。</p> + +<div class="note"><strong>注記:</strong> Gecko (および Firefox) は現在 <code>tv</code> メディアタイプをサポートしていないため、このメディア特性も同様にサポートされていません。</div> + +<h4 id="Examples" name="Examples">例</h4> + +<p>プログレッシブ方式で走査するテレビにだけスタイルシートを適用するには:</p> + +<pre>@media tv and (scan: progressive) { ... } +</pre> + +<h3 id="width">width</h3> + +<p><strong>値:</strong> {{cssxref("<length>")}}<br> + <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}<br> + <strong>min/max 前置詞の使用:</strong> 可</p> + +<p><code>width</code> メディア特性には、出力デバイスの描画域の幅を記述します (viewport の幅やプリンタのページ印刷領域の幅など)。</p> + +<div class="note"><strong>注記:</strong> ユーザがウィンドウの大きさを変更すると、<code>width</code> や <code>height</code> メディア特性を使用したメディアクエリを基に、Firefox がスタイルシートを適切なものに切り替えます。</div> + +<h4 id="Examples" name="Examples">例</h4> + +<p>幅 20 em 以上の handheld デバイスまたは screen デバイスにスタイルシートを指定したいときは:</p> + +<pre>@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... } +</pre> + +<p>次のメディアクエリは、印刷された幅が 8.5 インチ以上のメディアに適用されるスタイルシートを指定します:</p> + +<pre><link rel="stylesheet" media="print and (min-width: 8.5in)" + href="http://foo.com/mystyle.css" /> +</pre> + +<p>次のメディアクエリは、viewport の幅が 500 ピクセルから 800 ピクセルの場合に使用されるスタイルシートを指定します:</p> + +<pre>@media screen and (min-width: 500px) and (max-width: 800px) { ... } +</pre> + +<h2 id="Mozilla-specific media features" name="Mozilla-specific media features">Mozilla 独自のメディア特性</h2> + +<p>{{ gecko_minversion_header("1.9.2") }}</p> + +<p>Mozilla はいくつかの Gecko 独自のメディア特性を提供しています。これらの一部は公式のメディア特性として提案される予定です。</p> + +<h3 id="-moz-images-in-menus">-moz-images-in-menus</h3> + +<p><strong>値:</strong> 整数<br> + <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br> + <strong>min/max 前置詞の使用:</strong> 不可</p> + +<p>メニューに画像が表示できるデバイスの場合、この値は 1 になります。そうでない場合は 0 になります。これは、{{ cssxref(":-moz-system-metric(images-in-menus)") }} CSS 擬似クラスに相当します。</p> + +<h3 id="-moz-mac-graphite-theme">-moz-mac-graphite-theme</h3> + +<p><strong>値:</strong> 整数<br> + <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br> + <strong>min/max 前置詞の使用:</strong> 不可</p> + +<p>Mac OS X で、ユーザがデバイスのアピアランスを "Graphite" に設定している場合、この値は 1 になります。ユーザが標準の青色のアピアランスを使用しているか Mac OS X でない場合、この値は 0 になります。</p> + +<p>これは、{{ cssxref(":-moz-system-metric(mac-graphite-theme)") }} CSS 擬似クラスに相当します。</p> + +<h3 id="-moz-maemo-classic">-moz-maemo-classic</h3> + +<p><strong>値:</strong> 整数<br> + <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br> + <strong>min/max 前置詞の使用:</strong> 不可</p> + +<p>ユーザが Maemo でオリジナルのテーマを使用している場合、この値は 1 になります。新しい Fremantle テーマを使用している場合は 0 になります。</p> + +<p>これは、{{ cssxref(":-moz-system-metric(maemo-classic)") }} CSS 擬似クラスに相当します。</p> + +<h3 id="-moz-scrollbar-end-backward">-moz-scrollbar-end-backward</h3> + +<p><strong>値:</strong> 整数<br> + <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br> + <strong>min/max 前置詞の使用:</strong> 不可</p> + +<p>デバイスのユーザインタフェースが、戻る矢印ボタンをスクロールバーの終わりに表示する場合、この値は 1 になります。そうでない場合は 0 になります。</p> + +<p>これは、{{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }} CSS 擬似クラスに相当します。</p> + +<h3 id="-moz-scrollbar-end-forward">-moz-scrollbar-end-forward</h3> + +<p><strong>値:</strong> 整数<br> + <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br> + <strong>min/max 前置詞の使用:</strong> 不可</p> + +<p>デバイスのユーザインタフェースが、進む矢印ボタンをスクロールバーの終わりに表示する場合、この値は 1 になります。そうでない場合は 0 になります。</p> + +<p>これは、{{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }} CSS 擬似クラスに相当します。</p> + +<h3 id="-moz-scrollbar-start-backward">-moz-scrollbar-start-backward</h3> + +<p><strong>値:</strong> 整数<br> + <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br> + <strong>min/max 前置詞の使用:</strong> 不可</p> + +<p>デバイスのユーザインタフェースが、戻る矢印ボタンをスクロールバーの始めに表示する場合、この値は 1 になります。そうでない場合は 0 になります。</p> + +<p>これは、{{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }} CSS 擬似クラスに相当します。</p> + +<h3 id="-moz-scrollbar-start-forward">-moz-scrollbar-start-forward</h3> + +<p><strong>値:</strong> 整数<br> + <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br> + <strong>min/max 前置詞の使用:</strong> 不可</p> + +<p>デバイスのユーザインタフェースが、進む矢印ボタンをスクロールバーの始めに表示する場合、この値は 1 になります。そうでない場合は 0 になります。</p> + +<p>これは、{{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }} CSS 擬似クラスに相当します。</p> + +<h3 id="-moz-scrollbar-thumb-proportional">-moz-scrollbar-thumb-proportional</h3> + +<p><strong>値:</strong> 整数<br> + <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br> + <strong>min/max 前置詞の使用:</strong> 不可</p> + +<p>デバイスのユーザインタフェースが、スクロールバーのトンボのサイズを変化させる (ドキュメント全体に対する表示部分の割り合いによる) 場合、この値は 1 になります。そうでない場合は 0 になります。</p> + +<p>これは、{{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }} CSS 擬似クラスに相当します。</p> + +<h3 id="-moz-touch-enabled">-moz-touch-enabled</h3> + +<p><strong>値:</strong> 整数<br> + <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br> + <strong>min/max 前置詞の使用:</strong> 不可</p> + +<p>デバイスが (タッチスクリーンの) タッチイベントをサポートしている場合、この値は 1 になります。そうでない場合は 0 になります。</p> + +<p>これは、{{ cssxref(":-moz-system-metric(touch-enabled)") }} CSS 擬似クラスに相当します。</p> + +<h4 id="Examples" name="Examples">例</h4> + +<p>例えば、ユーザがタッチスクリーンデバイスで操作している場合に、指で押しやすくするため、ボタンを大きめに描画することが考えられます。</p> + +<h3 id="-moz-windows-classic">-moz-windows-classic</h3> + +<p><strong>値:</strong> 整数<br> + <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br> + <strong>min/max 前置詞の使用:</strong> 不可</p> + +<p>ユーザが Windows でテーマを適用していない (uxtheme を使用する代わりにクラシックモードで使用している) 場合、この値は 1 になります。そうでない場合は 0 になります。</p> + +<p>これは、{{ cssxref(":-moz-system-metric(windows-classic)") }} CSS 擬似クラスに相当します。</p> + +<h3 id="-moz-windows-compositor">-moz-windows-compositor</h3> + +<p><strong>値:</strong> 整数<br> + <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br> + <strong>min/max 前置詞の使用:</strong> 不可</p> + +<p>ユーザが Windows で DWM compositor を使用している場合、この値は 1 になります。そうでない場合は 0 になります。</p> + +<p>これは、{{ cssxref(":-moz-system-metric(windows-compositor)") }} CSS 擬似クラスに相当します。</p> + +<h3 id="-moz-windows-default-theme">-moz-windows-default-theme</h3> + +<p><strong>値:</strong> 整数<br> + <strong>メディア:</strong> {{cssxref("Media/Visual", "visual")}}<br> + <strong>min/max 前置詞の使用:</strong> 不可</p> + +<p>ユーザが現在 Windows の既定のテーマ (Luna, Royale, Zune または Vista Basic, Vista Advanced, Aero Glass を含む Aero) の一つを使用している場合、この値は 1 になります。そうでない場合は 0 になります。</p> + +<p>これは、{{ cssxref(":-moz-system-metric(windows-default-theme)") }} CSS 擬似クラスに相当します。</p> + +<h2 id="See_also" name="See_also">参照</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/css3-mediaqueries/" title="http://www.w3.org/TR/css3-mediaqueries/">CSS 3 media query specification</a></li> + <li><a class="internal" href="/ja/CSS/@media" title="ja/CSS/@media">Media types</a></li> +</ul> diff --git a/files/ja/conflicting/web/css/reference/index.html b/files/ja/conflicting/web/css/reference/index.html new file mode 100644 index 0000000000..9d20688007 --- /dev/null +++ b/files/ja/conflicting/web/css/reference/index.html @@ -0,0 +1,189 @@ +--- +title: All in a page +slug: CSS-2_Quick_Reference/All_in_a_page +tags: + - CSS + - CSS2_Quick_Reference + - CSS_2.1 +translation_of: Web/CSS/Reference +translation_of_original: CSS-2_Quick_Reference/All_in_a_page +--- +<p> +</p><p>この文書は、初心者からエキスパートまでのための CSS-2 仕様のクイックリファレンスです。スタイルプロパティは簡単な文法で書かれています。 +</p> +<h3 id=".E3.83.9C.E3.83.83.E3.82.AF.E3.82.B9.E3.83.A2.E3.83.87.E3.83.AB"> ボックスモデル </h3> +<p><small> +<b>margin-top : <i>length</i> | <i>percentage</i> | <i>auto</i>;</b><br> +<b>margin-right : <i>length</i> | <i>percentage</i> | <i>auto</i>;</b><br> +<b>margin-bottom : <i>length</i> | <i>percentage</i> | <i>auto</i>;</b><br> +<b>margin-left : <i>length</i> | <i>percentage</i> | <i>auto</i>;</b><br> +<b>margin : <i>margin-top</i> <i>margin-right</i> <i>margin-bottom</i> <i>margin-left</i>;</b><br> +</small></p><p><b>padding-top : <i>length</i> | <i>percentage</i>;</b><br> +<b>padding-right : <i>length</i> | <i>percentage</i>;</b><br> +<b>padding-bottom : <i>length</i> | <i>percentage</i>;</b><br> +<b>padding-left : <i>length</i> | <i>percentage</i>;</b><br> +<b>padding : <i>padding-top</i> <i>padding-right</i> <i>padding-bottom</i> <i>padding-left</i>;</b><br> +</p><p><b>border-top-width : thin | medium | thick | <i>length</i>;</b><br> +<b>border-right-width : thin | medium | thick | <i>length</i>;</b><br> +<b>border-bottom-width : thin | medium | thick | <i>length</i>;</b><br> +<b>border-left-width : thin | medium | thick | <i>length</i>;</b><br> +<b>border-width : thin | medium | thick | <i>length</i>;</b><br> +</p><p><b>border-top-color : <i>color</i> | transparent;</b><br> +<b>border-right-color : <i>color</i> | transparent;</b><br> +<b>border-bottom-color : <i>color</i> | transparent;</b><br> +<b>border-left-color : <i>color</i> | transparent;</b><br> +<b>border-color : <i>border-top-color</i> <i>border-right-color</i> <i>border-bottom-color</i> <i>border-left-color</i>;</b><br> +</p><p><b>border-top-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;</b><br> +<b>border-right-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;</b><br> +<b>border-bottom-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;</b><br> +<b>border-left-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;</b><br> +<b>border-style : <i>border-top-style</i> <i>border-right-style</i> <i>border-bottom-style</i> <i>border-left-style</i>;</b><br> +</p><p><b>border-top : <i>border-width</i> <i>border-style</i> <i>border-color</i>;</b><br> +<b>border-right : <i>border-width</i> <i>border-style</i> <i>border-color</i>;</b><br> +<b>border-bottom : <i>border-width</i> <i>border-style</i> <i>border-color</i>;</b><br> +<b>border-left : <i>border-width</i> <i>border-style</i> <i>border-color</i>;</b><br> +<b>border : <i>border-width</i> <i>border-style</i> <i>border-color</i>;</b><br> </p> +<h3 id=".E8.A6.96.E8.A6.9A.E7.9A.84.E6.A7.8B.E6.88.90.E3.83.A2.E3.83.87.E3.83.AB"> 視覚的構成モデル </h3> +<p><small> +<b>display : none | inline | block | inline-block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | tablefooter-group | table-row | table-column-group | table-column | table-cell | table-caption;</b><br> +</small></p><p><b>position : static | relative | absolute | fixed;</b><br> +</p><p><b>top : <i>length</i> | <i>percentage</i> | auto;</b> +<b>right : <i>length</i> | <i>percentage</i> | auto;</b> +<b>bottom : <i>length</i> | <i>percentage</i> | auto;</b> +<b>left : <i>length</i> | <i>percentage</i> | auto;</b> +</p><p><b>float : left | right | none;</b><br> +<b>clear : none | left | right | both;</b><br> +</p><p><b>z-index : auto | <i>integer</i>;</b><br> +</p><p><b>direction : ltr | rtl;</b><br> +<b>unicode-bidi : normal | embed | bidi-override;</b><br> </p> +<h3 id=".E8.A6.96.E8.A6.9A.E7.9A.84.E6.A7.8B.E6.88.90.E3.81.AE.E8.A9.B3.E7.B4.B0"> 視覚的構成の詳細 </h3> +<p><small> +<b>width : <i>length</i> | <i>percentage</i> | auto;</b> +<b>min-width : <i>length</i> | <i>percentage</i>;</b> +<b>max-width : <i>length</i> | <i>percentage</i> | none;</b> +</small></p><p><b>height : <i>length</i> | <i>percentage</i> | auto;</b> +<b>min-height : <i>length</i> | <i>percentage</i>;</b> +<b>max-height : <i>length</i> | <i>percentage</i> | none;</b> +</p><p><b>line-height : normal | <i>number</i> | <i>length</i> | <i>percentage</i>;</b> +</p><p><b>vertical-align : baseline | sub | super | top | text-top | middle | bottom | text-bottom | <i>percentage</i> | <i>length</i>;</b><br> </p> +<h3 id=".E8.A6.96.E8.A6.9A.E5.8A.B9.E6.9E.9C"> 視覚効果 </h3> +<p><small> +<b>overflow : visible | hidden | scroll | auto;</b><br> +</small></p><p><b>clip : <i>rect(top,right,bottom,left)</i> | auto;</b><br> +</p><p><b>visibility : visible | hidden | collapse;</b><br> </p> +<h3 id=".E3.83.AA.E3.82.B9.E3.83.88"> リスト </h3> +<p><small> +<b>list-style-type : disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | none;</b><br> +<b>list-style-image : <i>uri</i> | none;</b><br> +<b>list-style-position : inside | outside;</b><br> +<b>list-style : <i>list-style-type</i> <i>list-style-position</i> <i>list-style-image</i>;</b> +</small> +</p> +<h3 id=".E3.82.AB.E3.83.A9.E3.83.BC.E3.81.A8.E8.83.8C.E6.99.AF"> カラーと背景 </h3> +<p><small> +<b>color : <i>color</i>;</b><br> +</small></p><p><b>background-color : <i>color</i> | transparent;</b><br> +<b>background-image : <i>uri</i> | none;</b><br> +<b>background-repeat : repeat | repeat-x | repeat-y | no-repeat;</b><br> +<b>background-attachment : scroll | fixed;</b><br> +<b>background-position : {{ mediawiki.external('<i>percentage</i> | <i>length</i> | left | center | right') }} {{ mediawiki.external('<i>percentage</i> | <i>length</i> | top | center | bottom') }} ;</b><br> +<b>background : <i>background-color</i> <i>background-image</i> <i>background-repeat</i> <i>background-attachment</i> <i>background-position</i>;</b><br> </p> +<h3 id=".E3.83.95.E3.82.A9.E3.83.B3.E3.83.88"> フォント </h3> +<p><small> +<b>font-family: <i>family-name</i> | <i>generic-family</i>, <i>family-name</i> | <i>generic-family</i>, ... ;</b><br> +<b>font-style: normal | italic | oblique; </b><br> +<b>font-variant: normal | small-caps; </b><br> +<b>font-weight: normal | bold | bolder | lighter | 100 | ... | 900;</b><br> +<b>font-size: <i>absolute-size</i> | <i>relative-size</i> | <i>length</i> | <i>percentage</i>; </b><br> +<b>font: {{ mediawiki.external('<i>font-style</i> <i>font-variant</i> <i>font-weight</i>') }} <i>font-size</i> {{ mediawiki.external('<i>/line-height</i>') }} <i>font-family</i>;</b> +</small> +</p> +<h3 id=".E3.83.86.E3.82.AD.E3.82.B9.E3.83.88"> テキスト </h3> +<p><small> +<b>text-indent : <i>length</i> | <i>percentage</i>;<br></b> +<b>text-align : left | right | center | justify ;<br></b> +<b>text-decoration : none | {{ mediawiki.external(' underline overline line-through blink ') }};<br></b> +<b>text-transform : capitalize | uppercase | lowercase | none;<br></b> +<br> +<b>letter-spacing : normal | <i>length</i>;<br></b> +<b>word-spacing : normal | <i>length</i>;<br></b> +<b>white-space : normal | pre | nowrap | pre-wrap | pre-line;<br></b> +</small></p><p> +</p> +<h3 id=".E8.A1.A8.E7.B5.84.E3.81.BF"> 表組み </h3> +<p><small> +<b>caption-side : top | bottom;</b><br> +</small></p><p><b>table-layout : auto | fixed;</b><br> +</p><p><b>vertical-align : baseline | top | bottom | middle;</b><br> +</p><p><b>border-collapse : collapse | separate;</b><br> +<b>border-spacing : <i>length</i> {{ mediawiki.external('<i>length</i>') }};</b><br> +</p><p><b>empty-cells : show | hide;</b><br> </p> +<h3 id=".E3.83.A6.E3.83.BC.E3.82.B6.E3.82.A4.E3.83.B3.E3.82.BF.E3.83.95.E3.82.A7.E3.83.BC.E3.82.B9"> ユーザインタフェース </h3> +<p><small> +<b>cursor : {{ mediawiki.external('<i>uri</i>') }} {{ mediawiki.external(' auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | swresize | s-resize | w-resize| text | wait | help ') }}, ...;</b><br> +</small></p><p><b>outline-color : <i>color</i> | invert;</b><br> +<b>outline-style : <i>border-style</i>;</b><br> +<b>outline-width : <i>border-width</i>;</b><br> +<b>outline : <i>outline-color</i> <i>outline-style</i> <i>outline-width</i>;</b><br> </p> +<h3 id=".E5.8D.98.E4.BD.8D"> 単位 </h3> +<p><small> +<b>相対単位 : em, ex, px</b> +</small></p> +<ul><li> em : 1 em はフォントサイズと等しい +</li><li> ex : 1 ex はフォントの "x" の高さと等しい +</li><li> px : ピクセル +</li></ul> +<p><b>絶対単位 : in, cm, mm, pt, pc</b> +</p> +<ul><li> in : インチ +</li><li> cm : センチメートル +</li><li> mm : ミリメートル +</li><li> pt : ポイント {{ 訳注() }} +</li><li> pc : パイカ {{ 訳注() }} +</li></ul> +<p><b>カラーの単位 : #336699, #fa5, rgb(127,255,0), rgb(40%,50%,60%)</b> +</p> +<ul><li> #306090 : 十六進数で赤が 30、緑が 60、青が 90。 +</li><li> #fa5 : 十六進数で赤が FF、緑が AA、青が 55。 +</li><li> rgb(127,255,0) : 赤が 127、緑が 255、青が 0。 +</li><li> rgb(40%,50%,60%) : 赤が 40%、緑が 50%、青が 60%。 +</li></ul> +<p> +</p> +<h3 id=".E3.82.BB.E3.83.AC.E3.82.AF.E3.82.BF"> セレクタ </h3> +<p><small> +<b>型セレクタ</b><br> +<code>h1 { text-decoration: underline; }</code><br> +</small></p><p><b>クラスセレクタ</b><br> +<code>.myclass { text-decoration: underline; }</code><br> +</p><p><b>一意セレクタ</b><br> +<code>#myid { text-decoration: underline; }</code><br> +</p><p><b>子孫セレクタ</b><br> +<code>#mainpage h1 { text-decoration: underline; }</code><br> +</p><p><b>リンク擬似クラスセレクタ</b><br> +<code>a:link { color: blue; }</code><br> +<code>a:visited { color: purple; }</code><br> +</p><p><b>動的擬似クラスセレクタ</b><br> +<code>a:hover { text-decoration: underline; }</code><br> +<code>a:active { color: #666666; }</code><br> +<code>a:focus { outline: 1px dashed red; }</code><br> +</p><p><b>印刷用擬似要素セレクタ</b><br> +<code>p:first-line { font-weight: bold; }</code><br> +<code>p:first-letter { font-size: 2em; }</code><br> +</p><p><b>コンテンツ擬似要素セレクタ</b><br> +<code>p:before { content: "["; }</code><br> +<code>p:after { content: "]"; }</code><br> +</p><p><b>子セレクタ</b><br> +<code>#title > p { font-weight: bold; }</code><br> +</p><p><b>first-child 擬似クラスセレクタ</b><br> +<code>p:first-child { margin-top: 0; }</code><br> +</p><p><b>隣接セレクタ</b><br> +<code>h1 + p { font-style: italic; }</code><br> +</p><p><b>属性セレクタ</b><br> +<code>option{{ mediawiki.external('selected') }} { color: #ff0000; }</code><br> +<code>input{{ mediawiki.external('type=\"password\"') }} { color: #cccccc; }</code><br> +<code>a{{ mediawiki.external('rel~=\"next\"') }} { background: #ffffff; }</code><br> +<code>*{{ mediawiki.external('lang|=\"en\"') }} { color: red; }</code><br> </p> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/CSS-2_Quick_Reference/All_in_a_page", "fr": "fr/Pr\u00e9cis_CSS_2/Tout_en_un" } ) }} diff --git a/files/ja/conflicting/web/css/url()/index.html b/files/ja/conflicting/web/css/url()/index.html new file mode 100644 index 0000000000..2ca334be5a --- /dev/null +++ b/files/ja/conflicting/web/css/url()/index.html @@ -0,0 +1,98 @@ +--- +title: <url> +slug: Web/CSS/url +tags: + - CSS + - CSS データ型 + - Reference + - URI + - URL + - urn + - レイアウト +translation_of: Web/CSS/url() +translation_of_original: Web/CSS/url +--- +<div>{{CssRef}}</div> + +<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code><url></code></strong> <a href="/en-US/docs/Web/CSS/CSS_Types">データ型</a>は、画像やフォントなどのリソースへのポインターを記述します。 URL は {{Cssxref("background-image")}}, {{Cssxref("cursor")}}, {{cssxref("list-style")}} のような様々な CSS のプロパティで使用することができます。</p> + +<div class="note"> +<p><strong>URI か URL か？</strong> {{Glossary("URI")}} と {{Glossary("URL")}} との間には違いがあります。 URI は単純にリソースを識別します。 URL は URI の一種で、リソースの<em>場所</em>を記述します。 URI はリソースの URL または名前 ({{Glossary("URN")}}) であることがあります。</p> + +<p>CSS Level 1 では、 <code>url()</code> 関数記法は真に URL のみを記述していました。 CSS Level 2 では、 <code>url()</code> の定義はあらゆる URI、 URL または URN のどちらかを記述するように拡張されました。ややこしいことに、これは <code>url()</code> を CSS の <code><uri></code> データ型の生成のために使用することができることを意味していました。この変更は紛らわしいばかりでなく、議論になりやすく、 URN が実際の CSS で使用されることはほぼあり得ないため不必要でした。混乱を軽減するために、 CSS Level 3 ではより狭い初めの定義まで戻りました。現在では、 <code>url()</code> は真に <code><url></code> のみを記述します。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<p><code><url></code> データ型は <code id="The_url()_functional_notation">url()</code> 関数表記を使用して指定します。引用符なしでも、単一引用符または二重引用符で囲んでも書くことができます。相対 URL も使用することができ、そのスタイルシートの URL からの相対になります (ウェブページの URL ではありません)。</p> + +<pre class="syntaxbox"><a_css_property>: url("http://mysite.example.com/mycursor.png") +<a_css_property>: url('http://mysite.example.com/mycursor.png') +<a_css_property>: url(http://mysite.example.com/mycursor.png) +</pre> + +<div class="note"> +<p><strong>メモ:</strong> Firefox 15以降、 0x7e より大きな制御文字は、引用符で囲まない URL では許可されなくなりました。詳細は {{Bug(752230)}} をご覧ください。</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: css">.topbanner { + background: url("topbanner.png") #00D no-repeat fixed; +} +</pre> + +<pre class="brush: css">ul { + list-style: square url(http://www.example.com/redball.png); +} +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Values', '#urls', '<url>')}}</td> + <td>{{Spec2('CSS4 Values')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS3 Values', '#urls', '<url>')}}</td> + <td>{{Spec2('CSS3 Values')}}</td> + <td>CSS Level 2 (Revision 1) から重要な変更なし</td> + </tr> + <tr> + <td>{{Specname('CSS2.1', 'syndata.html#uri', '<uri>')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>CSS Level 1 から重要な変更なし</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#url', '<url>')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<div>{{Compat("css.types.url")}}</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{cssxref("<gradient>")}}</li> + <li>{{cssxref("element()")}}</li> + <li>{{cssxref("_image","image()")}}</li> + <li>{{cssxref("image-set","image-set()")}}</li> + <li>{{cssxref("cross-fade")}}</li> +</ul> diff --git a/files/ja/conflicting/web/css/width/index.html b/files/ja/conflicting/web/css/width/index.html new file mode 100644 index 0000000000..cae634e45a --- /dev/null +++ b/files/ja/conflicting/web/css/width/index.html @@ -0,0 +1,29 @@ +--- +title: auto +slug: Web/CSS/auto +tags: + - CSS + - CSS Reference +translation_of: Web/CSS/width +translation_of_original: Web/CSS/auto +--- +<div> + {{CSSRef}}</div> +<h2 id="Summary" name="Summary">概要</h2> +<p>ユーザエージェントによって自動的に計算される値です。その具体的な効果は <code>auto</code> が適用されたプロパティ毎にそれぞれ異なります。</p> +<h2 id="Used_in" name="Used_in">auto 値の使用が可能なプロパティ</h2> +<ul> + <li>{{Cssxref("overflow")}}</li> + <li>{{Cssxref("overflow-x")}}</li> + <li>{{Cssxref("overflow-y")}}</li> + <li>{{Cssxref("cursor")}}</li> + <li>{{Cssxref("width")}}</li> + <li>{{Cssxref("marker-offset")}}</li> + <li>{{Cssxref("margin")}}</li> + <li>margin-* (left|bottom|top|right|start|end)</li> + <li>{{Cssxref("bottom")}}</li> + <li>{{Cssxref("left")}}</li> + <li>{{Cssxref("table-layout")}}</li> + <li>{{Cssxref("z-index")}}</li> + <li>{{Cssxref("column-width")}}</li> +</ul> diff --git a/files/ja/conflicting/web/css/width_eaae26a6fb20ed3ef54fb23bfa0b1fcc/index.html b/files/ja/conflicting/web/css/width_eaae26a6fb20ed3ef54fb23bfa0b1fcc/index.html new file mode 100644 index 0000000000..aad9d6d606 --- /dev/null +++ b/files/ja/conflicting/web/css/width_eaae26a6fb20ed3ef54fb23bfa0b1fcc/index.html @@ -0,0 +1,37 @@ +--- +title: width +slug: width +tags: + - Disambiguation +translation_of: Web/CSS/width +translation_of_original: width +--- +<p><code>width</code> は多くの文脈で用いられます。</p> + +<h2 id="CSS" name="CSS">CSS</h2> + +<ul> + <li>CSS {{cssxref("width")}} プロパティ</li> +</ul> + +<h2 id="DOM" name="DOM"><a href="/ja/docs/DOM">DOM</a></h2> + +<ul> + <li>{{domxref("document.width")}}</li> + <li>{{domxref("table.width")}}</li> + <li>{{domxref("element.style","element.style.width")}}</li> +</ul> + +<h2 id="SVG" name="SVG">SVG</h2> + +<ul> + <li>SVG <a href="/ja/docs/SVG/Attribute/width"><code>width</code></a> 属性</li> +</ul> + +<h2 id="XUL" name="XUL">XUL</h2> + +<ul> + <li>XUL <a href="/ja/docs/XUL/Attribute/width"><code>width</code></a> 属性</li> +</ul> + +<div><div class="disambig" id="disambig"><p><i>これは<a href="https://developer.mozilla.org/ja/docs/Project:Disambiguation">あいまい性除去</a>のページです — 同じ題名を共有している可能性のあるページをリストして案内を補助します。 記事のリンクからここに来たのであれば、戻って意図するページに直接行くように修正することもできます。</i></p></div></div> diff --git a/files/ja/conflicting/web/css_eb0c7d23f84df658710ebb6b4bdec8ea/index.html b/files/ja/conflicting/web/css_eb0c7d23f84df658710ebb6b4bdec8ea/index.html new file mode 100644 index 0000000000..fe471649c2 --- /dev/null +++ b/files/ja/conflicting/web/css_eb0c7d23f84df658710ebb6b4bdec8ea/index.html @@ -0,0 +1,28 @@ +--- +title: Other Resources +slug: Web/CSS/Other_Resources +tags: + - CSS +translation_of: Web/CSS +translation_of_original: Web/CSS/Other_Resources +--- +<h2 id="W3C_Documents" name="W3C_Documents">W3C の文書</h2> +<ul> + <li><a class="external" href="http://www.w3.org/Style/CSS/">CSS メインページ</a></li> + <li><a class="external" href="http://www.w3.org/TR/REC-CSS2/">CSS2 仕様</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/">CSS 2.1 仕様</a></li> + <li><a class="external" href="http://www.w3.org/Stylesheets/Core/">W3C での基本スタイルシート</a></li> + <li><a class="external" href="http://www.w3.org/Style/CSS/Test/current/">CSS1 テストスイート</a></li> + <li><a class="external" href="http://www.w3.org/Style/CSS/Test/CSS2.1/current/">CSS2.1 テストスイート</a></li> +</ul> + + +<h2 id="Other_Resources" name="Other_Resources">その他の資料</h2> +<ul> + <li><a class="external" href="http://www.w3schools.com/css/">W3 Schools CSS tutorial pages</a></li> + <li><a class="external" href="http://gallery.theopalgroup.com/selectoracle/">SelectORacle</a></li> + <li><a class="external" href="http://www.westciv.com/style_master/house/">House of Style</a></li> + <li><a class="external" href="http://www.mako4css.com/">MaKo4CSS.com</a></li> + <li>css-discuss: <a class="external" href="http://archivist.incutio.com/css-discuss/">archives</a>, <a class="external" href="http://css-discuss.incutio.com/">wiki</a></li> + <li><a class="external" href="http://www.meyerweb.com/eric/css/edge/">css/edge</a></li> +</ul> diff --git a/files/ja/conflicting/web/guide/events/creating_and_triggering_events/index.html b/files/ja/conflicting/web/guide/events/creating_and_triggering_events/index.html new file mode 100644 index 0000000000..a544b714ed --- /dev/null +++ b/files/ja/conflicting/web/guide/events/creating_and_triggering_events/index.html @@ -0,0 +1,28 @@ +--- +title: dispatchEvent example +slug: DOM/dispatchEvent_example +tags: + - DOM + - Gecko + - Gecko DOM Reference +translation_of: Web/Guide/Events/Creating_and_triggering_events +translation_of_original: Web/Guide/Events/Event_dispatching_example +--- +<div class="noinclude"> + {{ApiRef}}</div> +<p>次の例では DOM メソッドを使用してチェックボックスのクリックをシミュレート（※スクリプトでクリックイベントを生成）しています。</p> +<pre>function simulateClick() { + var evt = <a href="/ja/docs/DOM/document.createEvent" title="DOM/document.createEvent">document.createEvent</a>("MouseEvents"); + evt.<a href="/ja/docs/DOM/event.initMouseEvent" title="DOM/event.initMouseEvent">initMouseEvent</a>("click", true, true, window, + 0, 0, 0, 0, 0, false, false, false, false, 0, null); + var cb = document.getElementById("checkbox"); + var canceled = !cb.<a href="/ja/docs/DOM/element.dispatchEvent" title="DOM/element.dispatchEvent">dispatchEvent</a>(evt); + if(canceled) { + // A handler called preventDefault + alert("canceled"); + } else { + // None of the handlers called preventDefault + alert("not canceled"); + } +}</pre> +<p><a class="button liveSample external" href="http://developer.mozilla.org/samples/domref/dispatchEvent.html">実際の表示を確認</a></p> diff --git a/files/ja/conflicting/web/guide/index.html b/files/ja/conflicting/web/guide/index.html new file mode 100644 index 0000000000..534c441e19 --- /dev/null +++ b/files/ja/conflicting/web/guide/index.html @@ -0,0 +1,81 @@ +--- +title: Web 開発 +slug: Web_Development +tags: + - Web Development +translation_of: Web/Guide +translation_of_original: Web_Development +--- +<p><strong>ウェブ開発</strong> は、ウェブサイトやウェブアプリケーションの開発のすべての側面を含んでいます。</p> + +<p>ここで見つけられる記事を熟読して、単純なウェブサイトから最新のウェブ技術を用いた複雑で非常にインタラクティブなウェブサイトまでを作成する方法を学んでください。</p> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Documentation_topics" name="Documentation_topics">ドキュメンテーショントピックス</h2> + + <h3 id="Technologies" name="Technologies">技術</h3> + + <dl> + <dt><a class="internal" href="/ja/docs/Web_Development/Introduction_to_Web_development" title="ja/docs/Web Development/Introduction to Web development">ウェブ開発の初歩</a></dt> + <dd>Web 向けの開発方法を学ぶためのガイド。</dd> + <dt><a class="internal" href="/ja/docs/HTML" rel="internal">HTML</a></dt> + <dd>HyperText Markup Language はウェブページやブラウザーで表示される他のドキュメントを作成するための基本言語です。</dd> + <dt><a class="internal" href="/ja/docs/CSS" rel="internal">CSS</a></dt> + <dd>Cascading Style Sheets によって Web 上で高度なレイアウトとページデザインを行うことが可能になります。</dd> + <dt><a class="internal" href="/ja/docs/JavaScript" rel="internal">JavaScript</a></dt> + <dd>JavaScript はウェブアプリケーションを開発するために最も一般的に用いられているスクリプト言語です。Mozilla ベースのソフトウェアの開発にも用いられています。</dd> + <dt><a class="internal" href="/ja/docs/DOM" rel="internal">DOM</a></dt> + <dd>Document Object Model は HTML と XML ドキュメントのための API であり、見た目の表現を変更するために変更可能であるドキュメントの構造的な表現を提供します。</dd> + <dt><a class="internal" href="/ja/docs/AJAX" rel="internal">AJAX</a></dt> + <dd>Asynchronous JavaScript and XML はひとつの技術ではなく複数の技術の組み合わせです。動的なウェブアプリケーションを作成するために JavaScript と他のモダンなウェブ技術を共に用いることを指します。</dd> + <dt><a class="internal" href="/ja/docs/XHTML" title="ja/docs/XHTML">XHTML</a></dt> + <dd>Extensible HyperText Markup Language は HTML よりも厳格な構文を提供する XML ベースの HTML 風の言語です。</dd> + <dt><a class="internal" href="/ja/docs/SVG" rel="internal">SVG</a></dt> + <dd>Scalable Vector Graphics は 2D ベクターグラフィックを扱うための XML マークアップ言語です。</dd> + </dl> + + <h3 id="Strategies" name="Strategies">方針</h3> + + <dl> + <dt><a class="internal" href="/ja/docs/Web_Standards" title="ja/docs/Web Standards">Web 標準</a></dt> + <dd>オープンな Web と互換性を持つことであなたのウェブサイトまたはアプリケーションを最も多くのユーザーに提供するための方法を学んでください。</dd> + <dt><a href="/ja/docs/Web_Development/Responsive_Web_design" title="ja/docs/Web development/Responsive Web design">Responsive Web design</a></dt> + <dd>同じコンテンツを携帯電話から高解像度のデスクトップディスプレイまですべてのハードウェア環境で提供できるよう、CSS を使用してください。</dd> + <dt><a href="/ja/docs/Web_development/Writing_forward-compatible_websites" title="Writing forward-compatible websites">Writing forward-compatible websites</a></dt> + <dd>ブラウザーが更新されても壊れることのないウェブサイトを作成するためのベストプラクティスを紹介します。</dd> + <dt><a href="/ja/docs/Web_Development/Mobile" title="/ja/docs/Web development/Mobile">Mobile Web development</a></dt> + <dd>モバイル機器で表示されるウェブサイトを開発する際は、デスクトップブラウザー向けの開発に慣れた人々にはあまり知られていない独特の手法を必要とします。</dd> + <dt><a class="internal" href="/ja/docs/Mozilla_Web_Developer_FAQ" title="ja/docs/Mozilla Web Developer FAQ">Mozilla Web developer FAQ</a></dt> + <dd>ウェブ開発者からのよく聞かれる質問です。答えもあります!</dd> + </dl> + + <p><span class="alllinks"><a href="/ja/docs/tag/Web_Development" title="ja/docs/tag/Web_Development">すべてみる...</a></span></p> + </td> + <td> + <h2 class="Community" id="Community" name="Community">コミュニティ</h2> + + <ul> + <li><a class="external" href="http://hacks.mozilla.org" title="http://hacks.mozilla.org">Mozilla Hacks blog</a> (<a class="external" href="https://dev.mozilla.jp/hacksmozillaorg/" title="https://dev.mozilla.jp/hacksmozillaorg/">日本語訳</a>)</li> + <li><a class="external" href="http://www.whatwg.org/" rel="external nofollow" title="http://www.whatwg.org/">WHAT Working Group</a></li> + <li><a class="external" href="http://webdevfeedhouse.com/" rel="external nofollow" title="http://webdevfeedhouse.com/">WebDev FeedHouse</a></li> + </ul> + + <h2 class="Tools" id="Tools" name="Tools">ツール</h2> + + <ul> + <li><a href="/ja/docs/Tools" title="ja/docs/Tools">ツールのメインページ</a></li> + <li><a class="link-https" href="https://addons.mozilla.org/firefox/addon/1843" rel="external nofollow" title="https://addons.mozilla.org/firefox/addon/1843">Firebug 拡張機能</a></li> + <li><a class="link-https" href="https://addons.mozilla.org/firefox/addon/60" rel="external nofollow" title="https://addons.mozilla.org/firefox/addon/60">Web Developer 拡張機能</a></li> + <li><a href="/ja/docs/Venkman" rel="internal">Venkman</a>: JavaScript デバッガー</li> + <li><a href="/ja/docs/DOM_Inspector" rel="internal" title="ja/docs/DOM Inspector">DOM Inspector</a></li> + <li><a href="/ja/docs/Tools/Scratchpad" title="ja/docs/Tools/Scratchpad">スクラッチパッド</a></li> + </ul> + + <p><span class="alllinks"><a href="/ja/docs/tag/Web_Development:Tools" title="ja/docs/tag/Web_Development:Tools">すべてみる...</a></span></p> + </td> + </tr> + </tbody> +</table> diff --git a/files/ja/conflicting/web/guide/introduction_to_web_development/index.html b/files/ja/conflicting/web/guide/introduction_to_web_development/index.html new file mode 100644 index 0000000000..73086c9207 --- /dev/null +++ b/files/ja/conflicting/web/guide/introduction_to_web_development/index.html @@ -0,0 +1,113 @@ +--- +title: Introduction to Web development +slug: Web_Development/Introduction_to_Web_development +--- +<p>Web開発の初歩</p> + +<p>ここに示すリンクは、Web開発を始めたばかりの方であってもWebのすごさへの新しい領域に踏み込もうとしている方であっても手助けになるはずです。</p> + +<div class="note"><strong>注:</strong> 本ページの推奨リソースは変更される可能性があります。</div> + +<table class="mainpage-table"> + <tbody> + <tr> + <td> + <p> </p> + + <h2 id="項目">項目</h2> + + <p> </p> + + <h3 id="HTML">HTML</h3> + + <ul> + <li><a class="external" href="http://dev.opera.com/articles/view/12-the-basics-of-html/" title="http://dev.opera.com/articles/view/12-the-basics-of-html/">Hypertext Mark-up Langage (HTML</a>)の基本 - HTMLとはいったい何か?</li> + <li><a class="external" href="http://reference.sitepoint.com/html/page-structure" title="http://reference.sitepoint.com/html/page-structure">webページの基本構造</a> - doctype とドキュメント'ツリー'</li> + <li><a class="external" href="http://reference.sitepoint.com/html/elements" title="http://reference.sitepoint.com/html/elements">基本的なHTML要素</a> - カテゴリ別に説明された、構造、ヘッダー、リスト、フォーム要素ほか</li> + <li><a class="external" href="http://htmldog.com/guides/htmlbeginner/" title="http://htmldog.com/guides/htmlbeginner/">HTML初心者へのチュートリアル</a> - 上述の基礎を含めたチュートリアルと練習</li> + <li><a class="external" href="/ja/HTML/Element" title="https://developer.mozilla.org/ja/HTML/Element">MDC HTML要素リファレンスガイド</a> - 詳細を含めGecko/FirefoxがサポートするHTML要素の包括的ガイド</li> + </ul> + + <dl> + <dt>はじめに </dt> + </dl> + + <ul> + </ul> + + <h3 id="CSS">CSS</h3> + + <ul> + <li><a class="external" href="/ja/CSS/Getting_Started" title="https://developer.mozilla.org/ja/CSS/Getting_Started">初心者のためのCSSのMDCガイド</a> - 基本的な概念と基礎をカバーするCSSのまさに初心者用ガイド</li> + <li><a class="external" href="/ja/CSS_Reference" title="https://developer.mozilla.org/ja/CSS_Reference">MDC CSSリファレンスガイド</a> - Gecko/Firefoxのレベルで詳細に記載したCSSの完全ガイド</li> + <li><a class="external" href="http://www.w3.org/MarkUp/Guide/Style" title="http://www.w3.org/MarkUp/Guide/Style">CSSでスタイリングするためのW3Cの紹介</a> - 初心者がwebページをスタイリングするための分かりやすいガイド</li> + <li><a class="external" href="/ja/Common_CSS_Questions" title="https://developer.mozilla.org/ja/Common_CSS_Questions">よくあるCSSの質問</a> - 初心者によくあるQ&A</li> + </ul> + + <ul> + <li><a class="external" href="http://www.html.net/tutorials/css/" title="http://www.html.net/tutorials/css/">中級レベルのCSSの概念</a> - グループ分け、pseudo-classesほか</li> + </ul> + + <dl> + <dt>はじめに </dt> + <dt>中級者向け</dt> + </dl> + + <ul> + </ul> + + <h3 id="JavaScript">JavaScript</h3> + + <ul> + <li><a class="external" href="/ja/JavaScript/Getting_Started" title="https://developer.mozilla.org/ja/JavaScript/Getting_Started">初心者向けMDC Javascriptガイド</a> - Javascriptとは何か? どうやって役に立つのか?</li> + <li><a class="external" href="/ja/JavaScript/Guide" title="https://developer.mozilla.org/ja/JavaScript/Guide">MDC JavaScriptリファレンスガイド</a> - 定期的にアップデートされる、初心者から上級者まですべてのレベルのための包括的ガイド</li> + <li><a class="external" href="http://yuiblog.com/crockford/" title="http://yuiblog.com/crockford/">Crockford on JavaScript</a> - Javascript言語に関し徹底的に追求したビデオシリーズ</li> + </ul> + + <ul> + <li><a href="/ja/JavaScript/A_re-introduction_to_JavaScript" title="https://developer.mozilla.org/ja/a_re-introduction_to_javascript">Javascriptの再入門</a> - 中級者レベルの開発者向けJavascriptプログラミング言語の要約</li> + <li><a class="external" href="http://eloquentjavascript.net/contents.html" title="http://eloquentjavascript.net/contents.html">雄弁なJavaScript </a>- 中級から上級向けJavascript技術の包括ガイド</li> + <li><a class="external" href="http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/" title="http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/">本質的なJavaScript設計パターン</a> - 本質的なJavascriptの設計パターンの紹介</li> + <li><a class="external" href="/ja/Introduction_to_Object-Oriented_JavaScript" title="https://developer.mozilla.org/ja/Introduction_to_Object-Oriented_JavaScript">オブジェクト指向JavascriptのためのMDCの紹介</a> - Javascriptオブジェクトモデルについて学習する</li> + <li><a class="external" href="http://dev.opera.com/articles/view/javascript-best-practices/" title="http://dev.opera.com/articles/view/javascript-best-practices/">Christian HeilmannのJavaScript最適学習</a> - Javascriptを書くときお決まりの(そんなにお決まりでないものも)最適な練習について学習する</li> + </ul> + + <ul> + <li><a class="external" href="http://ejohn.org/apps/learn/" title="http://ejohn.org/apps/learn/">上級者向けJavaScriptを学ぶ</a> - John Resigによる上級者向けJavaScriptガイド</li> + <li><a class="external" href="http://uk.video.yahoo.com/watch/111585/1027823" title="http://uk.video.yahoo.com/watch/111585/1027823">Crockford on Advanced JavaScript</a> - 上級者向けJavascript概念に関する3部構成のビデオシリーズ</li> + </ul> + + <dl> + <dt>はじめに </dt> + <dt>中級者向け</dt> + <dt>上級者向け</dt> + </dl> + + <ul> + </ul> + </td> + <td> + <h2 id="リソース">リソース</h2> + + <dl> + <dt><a class="external" href="http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur" title="http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur">Opera's Web Standards Curriculum</a></dt> + <dd>webデザイン、HTML、HTML5、CSS、Javascriptとそのアクセス法について。多くの分野を通じてweb開発の基礎を学習しようとしている初心者にとってここはよいスタートポイントになります。</dd> + <dt><a class="external" href="http://reference.sitepoint.com/" title="http://reference.sitepoint.com/">SitePoint</a></dt> + <dd>異なるブラウザーやブラウザーに関する既知のバグを通じてのサポートにも言及している、HTML、CSS、Javascriptを学習するために信頼できるサイト</dd> + <dt><a class="external" href="http://htmldog.com/" title="http://htmldog.com/">HTMLDog</a></dt> + <dd>初心者向け、HTMLとCSSに関する優秀で包括的なリファレンスサイト</dd> + <dt><a class="external" href="http://code.google.com/edu/submissions/html-css-javascript/" title="http://code.google.com/edu/submissions/html-css-javascript/">Google's HTML, CSS, and Javascript from the Ground Up</a></dt> + <dd>Googleのプロのweb開発者による易しいビデオチュートリアルがHTML、CSS、Javascriptの基本をカバーします</dd> + <dt><a class="external" href="http://www.csstutorial.net/" title="http://www.csstutorial.net/">CSSTutorial.net Beginner Tutorials</a></dt> + <dd>A broad range of useful text and video tutorials that cover the basics through to intermediate aspects of CSS.</dd> + <dt><a class="external" href="http://www.tizag.com/cssT/" title="http://www.tizag.com/cssT/">Tizag CSS Tutorials</a></dt> + <dd>An easy-to-follow reference for those wishing to learn CSS through short, concise tutorials.</dd> + <dt><a class="external" href="http://jqfundamentals.com/book/book.html" title="http://jqfundamentals.com/book/book.html">jQuery Fundamentals</a></dt> + <dd>An open-source reference book featuring detailed introductions to both JavaScript and jQuery Fundamentals for beginners.</dd> + <dt><a class="external" href="http://net.tutsplus.com/tutorials/javascript-ajax/javascript-from-null-video-series/" title="http://net.tutsplus.com/tutorials/javascript-ajax/javascript-from-null-video-series/">JavaScript From Null: A Video Series</a></dt> + <dd>A video series on JavaScript for absolute beginners looking for more 'visual'-based learning</dd> + </dl> + </td> + </tr> + </tbody> +</table> diff --git a/files/ja/conflicting/web/guide/mobile/index.html b/files/ja/conflicting/web/guide/mobile/index.html new file mode 100644 index 0000000000..cc288a9c45 --- /dev/null +++ b/files/ja/conflicting/web/guide/mobile/index.html @@ -0,0 +1,18 @@ +--- +title: Mobile Web development +slug: Web_Development/Mobile +tags: + - Mobile + - NeedsTranslation + - TopicStub + - Web Development +translation_of: Web/Guide/Mobile +translation_of_original: Web_Development/Mobile +--- +<p>Developing web sites to be viewed on mobile devices requires approaches that ensure a web site works as well on mobile devices as it does on desktop browsers. The following articles describe some of these approaches.</p> +<ul> + <li><a class="vt-p" href="/en/Web_Development/Mobile/Mobile-friendliness" title="/en/Web_development/Mobile/Mobile-friendliness">What is mobile-friendliness?</a></li> + <li><a class="vt-p" href="/en/Web_Development/Mobile/Separate_sites" title="en/Web_development/Mobile/Separate sites">Separate sites</a></li> + <li><a class="vt-p" href="/en/Web_Development/Mobile/Responsive_design" title="/en/Web_development/Mobile/Responsive design">Responsive design</a></li> + <li><a class="vt-p" href="/en/Web_development/Mobile/A_hybrid_approach" title="A New Approach to Web Applications (external)">A hybrid approach</a></li> +</ul> diff --git a/files/ja/conflicting/web/html/element/index.html b/files/ja/conflicting/web/html/element/index.html new file mode 100644 index 0000000000..b5da7466db --- /dev/null +++ b/files/ja/conflicting/web/html/element/index.html @@ -0,0 +1,585 @@ +--- +title: HTML5 の要素 +slug: Web/Guide/HTML/HTML5/HTML5_element_list +tags: + - HTML + - HTML5 +translation_of: Web/HTML/Element +translation_of_original: Web/Guide/HTML/HTML5/HTML5_element_list +--- +<p>This page list all <strong>standard HTML5 elements</strong>, described by their opening tag and grouped by function. Contrary to the <a href="/ja/docs/HTML/Element" title="HTML/Element">HTML Element index</a> which lists all possible tags, standard, non-standard, valid, obsolete or deprecated ones, this list only the valid HTML5 elements. Only those should be used in new Web sites.</p> + +<p>The symbol <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a> indicates that the element has been added in HTML5. Note that other elements listed here may have been modified or extended by the HTML5 specification.</p> + +<h2 id="Root_element" name="Root_element">ルート要素</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">要素</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("html")}}</td> + <td>HTML 文書、XHTML 文書のルート（基点）要素。他の全ての要素はこの要素の子孫要素として配置しなくてはなりません。</td> + </tr> + </tbody> +</table> + +<h2 id="Document_metadata" name="Document_metadata">文書メタデータ要素</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">要素</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("head")}}</td> + <td>Represents a collection of metadata about the document, including links to or definitions of scripts and style sheets.</td> + </tr> + <tr> + <td>{{HTMLElement("title")}}</td> + <td>Defines the title of the document, shown in a browser's title bar or on the page's tab. It can only contain text and any contained tags are not interpreted.</td> + </tr> + <tr> + <td>{{HTMLElement("base")}}</td> + <td>Defines the base URL for relative URL in the page.</td> + </tr> + <tr> + <td>{{HTMLElement("link")}}</td> + <td>Used to link JavaScript and external CSS with the current HTML document.</td> + </tr> + <tr> + <td>{{HTMLElement("meta")}}</td> + <td>Defines metadata that can't be defined using other HTML element.</td> + </tr> + <tr> + <td>{{HTMLElement("style")}}</td> + <td>Style tag is used to write inline CSS.</td> + </tr> + </tbody> +</table> + +<h2 id="Scripting" name="Scripting">スクリプティング要素</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">要素</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("script")}}</td> + <td>Defines either an internal script or link to an external script. The script language is JavaScript</td> + </tr> + <tr> + <td>{{HTMLElement("noscript")}}</td> + <td>Defines an alternative content to display when the browser doesn't support scripting.</td> + </tr> + </tbody> +</table> + +<h2 id="Sections" name="Sections">セクショニング要素と見出し要素</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">要素</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("body")}}</td> + <td> + <div>Represents the main content of an HTML document. There is only one <code><body></code> element in a document.</div> + </td> + </tr> + <tr> + <td>{{HTMLElement("section")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> + <td>Defines a section in a document</td> + </tr> + <tr> + <td>{{HTMLElement("nav")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> + <td>Defines a section that contains only navigation links</td> + </tr> + <tr> + <td>{{HTMLElement("article")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> + <td>Defines self-contained content that could exist independantly of the rest of the content</td> + </tr> + <tr> + <td>{{HTMLElement("aside")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> + <td>Defines some content set aside from the rest of page content. If it is removed, the remaining content still make sence.</td> + </tr> + <tr> + <td><a href="/ja/docs/HTML/Element/Heading_Elements" title="Elementy blokowe"><code><h1>,<h2>,<h3>,<h4>,<h5>,<h6></code></a></td> + <td>Heading elements implement six levels of document headings, <code><h1></code> is the most important and <code><h6></code> is the least. A heading element briefly describes the topic of the section it introduces.</td> + </tr> + <tr> + <td>{{HTMLElement("hgroup")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> + <td>Groups a set of <code><h1></code> to <code><h6></code> elements when a heading has multiple levels</td> + </tr> + <tr> + <td>{{HTMLElement("header")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> + <td>Defines the header of a page or section. It often contains a logo, the title of the Web site and a navigational table of content.</td> + </tr> + <tr> + <td>{{HTMLElement("footer")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> + <td>Defines the footer for a page or section. It often contains a copyright notice, some links to legal information or addresses to give feedback.</td> + </tr> + <tr> + <td>{{HTMLElement("address")}}</td> + <td>Defines a section containing contact information.</td> + </tr> + </tbody> +</table> + +<h2 id="Grouping_content" name="Grouping_content">グループ化要素</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">要素</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("p")}}</td> + <td>Defines a portion that should be displayed as a paragrah.</td> + </tr> + <tr> + <td>{{HTMLElement("hr")}}</td> + <td>Represents a thematic break between paragraphs of a section or article or any longer content.</td> + </tr> + <tr> + <td>{{HTMLElement("pre")}}</td> + <td>Indicates that its content is preformatted and that this format must be preserved.</td> + </tr> + <tr> + <td>{{HTMLElement("blockquote")}}</td> + <td>Represents a citation.</td> + </tr> + <tr> + <td>{{HTMLElement("ol")}}</td> + <td>Defines an ordered list of items, that is a list which change its meaning if we change the order of its elements</td> + </tr> + <tr> + <td>{{HTMLElement("ul")}}</td> + <td>Defines an unordered list of items.</td> + </tr> + <tr> + <td>{{HTMLElement("li")}}</td> + <td>Defines a item of a enumeration list often preceded by a bullet in English.</td> + </tr> + <tr> + <td>{{HTMLElement("dl")}}</td> + <td>Defines a definition list, that is a list of terms and their associated definitions.</td> + </tr> + <tr> + <td>{{HTMLElement("dt")}}</td> + <td>Represents a term defined by the next <code><dd></code>.</td> + </tr> + <tr> + <td>{{HTMLElement("dd")}}</td> + <td>Represents the definition of the terms immediately listed before it.</td> + </tr> + <tr> + <td>{{HTMLElement("figure")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> + <td>Represents a figure illustrated a part of the document.</td> + </tr> + <tr> + <td>{{HTMLElement("figcaption")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> + <td>Represents the legend of a figure.</td> + </tr> + <tr> + <td>{{HTMLElement("div")}}</td> + <td>Represents a generic container with no special meaning.</td> + </tr> + </tbody> +</table> + +<h2 id="Text-level_semantics" name="Text-level_semantics">テキストレベル・セマンティクス要素</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">要素</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("a")}}</td> + <td>ハイパーリンク。他の文書などへのリンク機能を提供します。</td> + </tr> + <tr> + <td>{{HTMLElement("em")}}</td> + <td>Represents<em>emphasized</em> text, like a stress accent.</td> + </tr> + <tr> + <td>{{HTMLElement("strong")}}</td> + <td>Represents especially<em>important</em> text.</td> + </tr> + <tr> + <td>{{HTMLElement("small")}}</td> + <td>Represents a<em>side comment</em>, that is text like a disclaimer, a copyright which is not essential to the comprehension of the document.<code> </code></td> + </tr> + <tr> + <td>{{HTMLElement("s")}}</td> + <td>Represents content that is no<em>longer accurate or relevant</em>.</td> + </tr> + <tr> + <td>{{HTMLElement("cite")}}</td> + <td>Represents the<em>title of a work</em>.</td> + </tr> + <tr> + <td>{{HTMLElement("q")}}</td> + <td>インラインの短い引用。段落をまたぐ様な引用には <code>blockquote</code> 要素を用います。</td> + </tr> + <tr> + <td>{{HTMLElement("dfn")}}</td> + <td>Represents a term whose<em>definition</em> is contained in its nearest ancestor content.</td> + </tr> + <tr> + <td>{{HTMLElement("abbr")}}</td> + <td>Represents an<em>abbreviation</em> or an<em>acronym</em>, eventually with its meaning.</td> + </tr> + <tr> + <td>{{HTMLElement("data")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> + <td>Associates to its content a<em>machine-readable equivalent</em>. (This element is only in the WHATWG version of the HTML standard, and not in the W3C version of HTML5).</td> + </tr> + <tr> + <td>{{HTMLElement("time")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> + <td>Represents a<em>date</em> and<em>time</em> value, eventually with a machine-readable equivalent.</td> + </tr> + <tr> + <td>{{HTMLElement("code")}}</td> + <td>コンピューターのコード</td> + </tr> + <tr> + <td>{{HTMLElement("var")}}</td> + <td>Represents a<em>variable, that is an actual mathematical expression or programming context, an identifier representing a constant, a symbol identifying a physical quantity, a function parameter, or a mere placeholder in prose.</em></td> + </tr> + <tr> + <td>{{HTMLElement("samp")}}</td> + <td>Represents the<em>output</em> of a program or a computer.</td> + </tr> + <tr> + <td>{{HTMLElement("kbd")}}</td> + <td>キーボードのキーコマンドや音声コマンドなどのユーザ入力を表します（※名称が「キーボード要素」であるにも関わらず、キーボード以外のユーザ入力も表せる点に注意が必要です）</td> + </tr> + <tr> + <td>{{HTMLElement("sub")}},{{HTMLElement("sup")}}</td> + <td>Represents a<em>subscript</em>, respectively a<em>superscript.</em></td> + </tr> + <tr> + <td>{{HTMLElement("i")}}</td> + <td>Represents some text in an<em>alternate</em> voice or mood, or at least of different quality, such as a taxonomic designation, a technical term, an idiomatic phrase, a thought or a ship name.</td> + </tr> + <tr> + <td>{{HTMLElement("b")}}</td> + <td>Represents a text which to which attention is drawn for<em>utilitarian purposes</em>. It doesn't convey extra importance and doesn't implicate an alternate voice.</td> + </tr> + <tr> + <td>{{HTMLElement("u")}}</td> + <td>Represents<em>unarticulate</em> non-textual annoatation, such labeling the text as being misspelt or labeling a proper name in Chinese text.</td> + </tr> + <tr> + <td>{{HTMLElement("mark")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> + <td>Represents text highlighted for<em>reference</em> purposes, that is for its relevance in another context.</td> + </tr> + <tr> + <td>{{HTMLElement("ruby")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> + <td>Represents content to be marked with<em>ruby annotations</em>, short runs of text presented alongside the text. This is often used in conjunction with East Asian language where the annotations act as a guide for pronunciation, like the Japanese<em>furigana</em>.</td> + </tr> + <tr> + <td>{{HTMLElement("rt")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> + <td>Represents the<em>text of a ruby annotation</em>.</td> + </tr> + <tr> + <td>{{HTMLElement("rp")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> + <td>Represents<em>parenthesis</em> around a ruby annotation, used to display the annotation in an alternate way by browsers not supporting the standard display for annotations.</td> + </tr> + <tr> + <td>{{HTMLElement("bdi")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> + <td>Represents text that must be<em>isolated</em> from its surrounding for bidirectional text formatting. It allows to embed span of text with a different, or unknown, directionality.</td> + </tr> + <tr> + <td>{{HTMLElement("bdo")}}</td> + <td>Represents the<em>directionality</em> of its children, in order to explicitly override the Unicode bidirectional algorithm.</td> + </tr> + <tr> + <td>{{HTMLElement("span")}}</td> + <td>Represents text with no specific meaning. This has to be used when no<em>other</em> text-semantic element conveys an adequate meaning, which, in this case, is often brought by global attributes like <code>class</code>, <code>lang</code>, or <code>dir</code>.</td> + </tr> + <tr> + <td>{{HTMLElement("br")}}</td> + <td>改行（ HTML のソースコード内での改行コードは、特定の要素内のもの、或いは特定のスタイルが指定された要素内のものしか表示される文書に改行として反映されません ）</td> + </tr> + <tr> + <td>{{HTMLElement("wbr")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> + <td>Represents a<em>line break opportunity</em>, that is a suggested wrapping point in order to improve readability of text split on several lines.</td> + </tr> + </tbody> +</table> + +<h2 id="Edits" name="Edits">変更要素</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">要素</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("ins")}}</td> + <td>文書に追加された内容である事を示す</td> + </tr> + <tr> + <td>{{HTMLElement("del")}}</td> + <td>文書から削除された内容である事を示す</td> + </tr> + </tbody> +</table> + +<h2 id="Embedded_content" name="Embedded_content">埋め込みコンテンツ要素</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">要素</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("img")}}</td> + <td>画像</td> + </tr> + <tr> + <td>{{HTMLElement("iframe")}}</td> + <td>Represents a<em>nested browsing context</em>, that is an embedded HTML document.</td> + </tr> + <tr> + <td>{{HTMLElement("embed")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> + <td>Represents a<em>integration point</em> for an external, often non_HTML, application or interactive content.</td> + </tr> + <tr> + <td>{{HTMLElement("object")}}</td> + <td>Represents an<em>external resource</em>, which will be treated as an image, an HTML sub-document or an external resource to be processed by a plugin.</td> + </tr> + <tr> + <td>{{HTMLElement("param")}}</td> + <td>Defines<em>parameters</em> for use by plugins invoked by <code><object></code> elements.</td> + </tr> + <tr> + <td>{{HTMLElement("video")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> + <td>Represents a<em>video</em>, and its associated audio files and captions, with the necessary interface to play it.</td> + </tr> + <tr> + <td>{{HTMLElement("audio")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> + <td>Represents a<em>sound</em>, or an<em>audio stream</em>.</td> + </tr> + <tr> + <td>{{HTMLElement("source")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> + <td>Allows authors to specify alternative media resources for media elements like <code><video></code> or <code><audio></code>.</td> + </tr> + <tr> + <td>{{HTMLElement("track")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> + <td>Allows authors to specify timed<em>text track</em> for media elements like <code><video></code><em>or <code><audio></code>.</em></td> + </tr> + <tr> + <td>{{HTMLElement("canvas")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> + <td>Represents a<em>bitmap area</em> that scripts can be used to render graphics, like graphs, game graphics, any visual images on the fly.</td> + </tr> + <tr> + <td>{{HTMLElement("map")}}</td> + <td>In conjunction with <code><area></code>, defines an<em>image map</em>.</td> + </tr> + <tr> + <td>{{HTMLElement("area")}}</td> + <td>In conjunction with <code><map></code>, defines an<em>image map</em>.</td> + </tr> + <tr> + <td>{{SVGElement("svg")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> + <td>Defines an embedded<em>vectorial image</em>.</td> + </tr> + <tr> + <td>{{MathMLElement("math")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> + <td>Defines a<em>mathematical formula</em>.</td> + </tr> + </tbody> +</table> + +<h2 id="Tabular_data" name="Tabular_data">テーブルデータ要素</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">要素</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("table")}}</td> + <td>行と列を持つ図表。テーブル。</td> + </tr> + <tr> + <td>{{HTMLElement("caption")}}</td> + <td>テーブルのキャプション</td> + </tr> + <tr> + <td>{{HTMLElement("colgroup")}}</td> + <td>テーブルの、一つ以上の列グループを表す</td> + </tr> + <tr> + <td>{{HTMLElement("col")}}</td> + <td>テーブルの列を表す</td> + </tr> + <tr> + <td>{{HTMLElement("tbody")}}</td> + <td>Represents the block of rows that describes the<em>concrete data</em> of a table.</td> + </tr> + <tr> + <td>{{HTMLElement("thead")}}</td> + <td>Represents the block of rows that describes the<em>column labels</em> of a table.</td> + </tr> + <tr> + <td>{{HTMLElement("tfoot")}}</td> + <td>Represents the block of rows that describes the<em>column summaries</em> of a table.</td> + </tr> + <tr> + <td>{{HTMLElement("tr")}}</td> + <td>Represents a<em>row of cells</em> in a table.</td> + </tr> + <tr> + <td>{{HTMLElement("td")}}</td> + <td>Represents a<em>data cell</em> in a table.</td> + </tr> + <tr> + <td>{{HTMLElement("th")}}</td> + <td>Represents a<em>header cell</em> in a table.</td> + </tr> + </tbody> +</table> + +<h2 id="Forms" name="Forms">フォーム関連要素</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">要素</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("form")}}</td> + <td>Represents a<em>formular</em>, consisting of controls, that can be submitted to a server for processing.</td> + </tr> + <tr> + <td>{{HTMLElement("fieldset")}}</td> + <td>フォームコントロール要素のグループ化に用いる</td> + </tr> + <tr> + <td>{{HTMLElement("legend")}}</td> + <td><code><fieldset></code> のキャプション</td> + </tr> + <tr> + <td>{{HTMLElement("label")}}</td> + <td>フォームコントロールのキャプション</td> + </tr> + <tr> + <td>{{HTMLElement("input")}}</td> + <td>Represents a<em>typed data field</em> allowing the user to edit the data.</td> + </tr> + <tr> + <td>{{HTMLElement("button")}}</td> + <td>Represents a<em>button</em>.</td> + </tr> + <tr> + <td>{{HTMLElement("select")}}</td> + <td>Represents a control allowing the<em>selection among a set of options</em>.</td> + </tr> + <tr> + <td>{{HTMLElement("datalist")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> + <td>Represents a<em>set of predefined options</em> for other controls.</td> + </tr> + <tr> + <td>{{HTMLElement("optgroup")}}</td> + <td>Represents a<em>set of options</em>, logically grouped.</td> + </tr> + <tr> + <td>{{HTMLElement("option")}}</td> + <td>Represents an<em>option</em> in a <code><select></code> element, or a suggestion of a <code><datalist></code> element.</td> + </tr> + <tr> + <td>{{HTMLElement("textarea")}}</td> + <td>Represents a<em>multiline text edit control</em>.</td> + </tr> + <tr> + <td>{{HTMLElement("keygen")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> + <td>Represents a<em>key pair generator control</em>.</td> + </tr> + <tr> + <td>{{HTMLElement("output")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> + <td>Represents the<em>result of a calculation</em>.</td> + </tr> + <tr> + <td>{{HTMLElement("progress")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> + <td>Represents the<em>completion progress</em> of a task.</td> + </tr> + <tr> + <td>{{HTMLElement("meter")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> + <td>Represents a scalar<em>measurement</em> (or a fractional value), within a known range</td> + </tr> + </tbody> +</table> + +<h2 id="Interactive_elements" name="Interactive_elements">インタラクティブコンテンツ要素</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">要素</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("details")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> + <td>Represents a<em>widget</em> from which the user can obtain additional information or controls.</td> + </tr> + <tr> + <td>{{HTMLElement("summary")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> + <td>Represents a<em>summary</em>,<em>caption</em>, or<em>legend</em> for a given <code><details></code>.</td> + </tr> + <tr> + <td>{{HTMLElement("command")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> + <td>Represents a<em>command</em> that the user can invoke.</td> + </tr> + <tr> + <td>{{HTMLElement("menu")}} <a href="/ja/docs/HTML/HTML5"><img alt="この要素は HTML5 で追加された要素です。" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="この要素は HTML5 で追加された要素です。"></a></td> + <td>Represents a<em>list of commands</em>.</td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/HTML/HTML5" title="HTML/HTML5">HTML5</a></li> + <li><a href="/ja/docs/HTML/Element" title="HTML/Element">HTML 要素リファレンス</a> (HTML5 に含まれない要素も含まれています)</li> + <li>Another way of listing the tags: the <a href="http://joshduck.com/periodic-table.html" title="http://joshduck.com/periodic-table.html">Periodic table of HTML5 elements</a> by Josh Duck.</li> +</ul> diff --git a/files/ja/conflicting/web/html/element/title/index.html b/files/ja/conflicting/web/html/element/title/index.html new file mode 100644 index 0000000000..ab170f7d35 --- /dev/null +++ b/files/ja/conflicting/web/html/element/title/index.html @@ -0,0 +1,19 @@ +--- +title: title +slug: title +tags: + - Disambiguation +translation_of: Web/HTML/Element/title +translation_of_original: title +--- +<p><strong>title</strong> は、その文脈により異なるものを指す場合があります。</p> + +<ul> + <li>DOM:{{ domxref("element.title")}} - 要素の <code>title</code> 属性の値を取得 / 設定</li> + <li>DOM:{{domxref("document.title")}} - 文書の <code>title</code> 要素の値を取得 / 設定</li> + <li><a href="/ja/docs/HTML/Element/title"><code><title></code> (HTML)</a> - <a href="/en-US/docs/HTML">HTML</a> の <code>title</code> 要素</li> + <li><a href="/ja/docs/SVG/Element/title"><code><title></code> (SVG)</a> - <a href="/en-US/docs/SVG">SVG</a> の <code>title</code> 要素</li> + <li><a href="/ja/docs/RSS/Element/title"><code><title></code> (RSS)</a> - <a href="/en-US/docs/RSS">RSS</a> の <code>title</code> 要素</li> +</ul> + +<div><div class="disambig" id="disambig"><p><i>これは<a href="https://developer.mozilla.org/ja/docs/Project:Disambiguation">あいまい性除去</a>のページです — 同じ題名を共有している可能性のあるページをリストして案内を補助します。 記事のリンクからここに来たのであれば、戻って意図するページに直接行くように修正することもできます。</i></p></div></div> diff --git a/files/ja/conflicting/web/html/global_attributes/index.html b/files/ja/conflicting/web/html/global_attributes/index.html new file mode 100644 index 0000000000..aee67a75d0 --- /dev/null +++ b/files/ja/conflicting/web/html/global_attributes/index.html @@ -0,0 +1,27 @@ +--- +title: Global attribute (グローバル属性) +slug: Glossary/Global_attribute +tags: + - Attribute + - CodingScripting + - Glossary + - HTML +translation_of: Web/HTML/Global_attributes +translation_of_original: Glossary/Global_attribute +--- +<p>グローバル属性は、すべての{{glossary("element","要素")}}で使用できる{{glossary("attribute","属性")}}です（ただし、一部の要素には影響を与えないこともあります）。</p> + +<p>HTML 要素には、次のいくつかの属性を使用できます。</p> + +<ul> + <li><a href="/ja/docs/Web/HTML/Global_attributes/dir"><strong>dir</strong></a>, <a href="/ja/docs/Web/HTML/Global_attributes/lang"><strong>lang</strong></a>, <a href="/ja/docs/Web/HTML/Global_attributes/style"><strong>style</strong></a>, <a href="/ja/docs/Web/HTML/Global_attributes/id"><strong>id</strong></a>, <a href="/ja/docs/Web/HTML/Global_attributes/class"><strong>class</strong></a>, <a href="/ja/docs/Web/HTML/Global_attributes/tabindex"><strong>tabindex</strong></a>, <a href="/ja/docs/Web/HTML/Global_attributes/accesskey"><strong>accesskey</strong></a>, <a href="/ja/docs/Web/HTML/Global_attributes/title"><strong>title</strong></a>, <a href="/ja/docs/Web/HTML/Global_attributes/hidden"><strong>hidden</strong></a>, <a href="/ja/docs/Web/HTML/Global_attributes/data-*"><strong>data-*</strong></a>, <a href="/ja/docs/Web/HTML/Global_attributes/contextmenu"><strong>contextmenu</strong></a>, <a href="/ja/docs/Web/HTML/Global_attributes/contenteditable"><strong>contenteditable</strong></a>, <a href="/ja/docs/Web/HTML/Global_attributes/translate"><strong>translate</strong></a>, <a href="/ja/docs/Web/HTML/Global_attributes/spellcheck"><strong>spellcheck</strong></a>, <a href="/ja/docs/Web/HTML/Global_attributes/draggable"><strong>draggable</strong></a>, <a href="/ja/docs/Web/HTML/Global_attributes/dropzone"><strong>dropzone</strong></a>, <a href="/ja/docs/Web/HTML/Global_attributes/itemid"><strong>itemid</strong></a>, <a href="/ja/docs/Web/HTML/Global_attributes/itemprop"><strong>itemprop</strong></a>, <a href="/ja/docs/Web/HTML/Global_attributes/itemref"><strong>itemref</strong></a>, <a href="/ja/docs/Web/HTML/Global_attributes/itemscope"><strong>itemscope</strong></a>, <a href="/ja/docs/Web/HTML/Global_attributes/itemtype"><strong>itemtype</strong></a>.</li> + <li><strong>xml:lang </strong>と <strong>xml:base</strong> の両方が {{glossary("XHTML")}} 仕様から継承され、非推奨ですが互換性のために保持されています。</li> + <li>アクセシビリティを向上させるための複数の <strong><a href="/ja/docs/Web/Accessibility/ARIA">aria-*</a></strong> 属性。</li> + <li>イベントハンドラー属性: <strong>onabort</strong>, <strong>onautocomplete</strong>, <strong>onautocompleteerror</strong>, <strong>onblur</strong>, <strong>oncancel</strong>, <strong>oncanplay</strong>, <strong>oncanplaythrough</strong>, <strong>onchange</strong>, <strong>onclick</strong>, <strong>onclose</strong>, <strong>oncontextmenu</strong>, <strong>oncuechange</strong>, <strong>ondblclick</strong>, <strong>ondrag</strong>, <strong>ondragend</strong>, <strong>ondragenter</strong>, <strong>ondragexit</strong>, <strong>ondragleave</strong>, <strong>ondragover</strong>, <strong>ondragstart</strong>, <strong>ondrop</strong>, <strong>ondurationchange</strong>, <strong>onemptied</strong>, <strong>onended</strong>, <strong>onerror</strong>, <strong>onfocus</strong>, <strong>oninput</strong>, <strong>oninvalid</strong>, <strong>onkeydown</strong>, <strong>onkeypress</strong>, <strong>onkeyup</strong>, <strong>onload</strong>, <strong>onloadeddata</strong>, <strong>onloadedmetadata</strong>, <strong>onloadstart</strong>, <strong>onmousedown</strong>, <strong>onmouseenter</strong>, <strong>onmouseleave</strong>, <strong>onmousemove</strong>, <strong>onmouseout</strong>, <strong>onmouseover</strong>, <strong>onmouseup</strong>, <strong>onmousewheel</strong>, <strong>onpause</strong>, <strong>onplay</strong>, <strong>onplaying</strong>, <strong>onprogress</strong>, <strong>onratechange</strong>, <strong>onreset</strong>, <strong>onresize</strong>, <strong>onscroll</strong>, <strong>onseeked</strong>, <strong>onseeking</strong>, <strong>onselect</strong>, <strong>onshow</strong>, <strong>onsort</strong>, <strong>onstalled</strong>, <strong>onsubmit</strong>, <strong>onsuspend</strong>, <strong>ontimeupdate</strong>, <strong>ontoggle</strong>, <strong>onvolumechange</strong>, <strong>onwaiting</strong>.</li> +</ul> + +<h2 id="Learn_more" name="Learn_more">より詳しく知る</h2> + +<ul> + <li>HTML の<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></li> +</ul> diff --git a/files/ja/conflicting/web/html/global_attributes/spellcheck/index.html b/files/ja/conflicting/web/html/global_attributes/spellcheck/index.html new file mode 100644 index 0000000000..07cdb135ef --- /dev/null +++ b/files/ja/conflicting/web/html/global_attributes/spellcheck/index.html @@ -0,0 +1,32 @@ +--- +title: HTML フォームのスペルチェックを制御する +slug: Controlling_spell_checking_in_HTML_forms +tags: + - Configuration management + - HTML +--- +<p>{{ Fx_minversion_header(2) }} Firefox 2 はウェブフォームのテキストエリア{{ 訳注("複数行のテキスト入力欄") }}とテキストフィールド{{ 訳注("一行のテキスト入力欄") }}のスペルチェックのサポートを導入します。ユーザーは about:config インターフェースを使って、スペルチェックを有効にするか、テキストエリアとテキストフィールドの両方でチェックするかを設定することができます。</p> +<p>標準では、テキストエリアと <code>designMode</code> ドキュメントではスペルチェックが行われますが、一行の入力ボックスでは行われません。なぜなら、Firefox が ユーザ ID や E メールアドレスを誤ってマークしてしまうと、ユーザの気を散らしてしまうからです。</p> +<p>しかし、この動作が必ずしも適切でない状況があるでしょう。例えば、HTML や他の非散文データを編集するためにテキストエリアの使用が意図されているなら、スペルチェッカは助けよりむしろ妨害でしょう。 同じようにウェブサイトが特定のテキストフィールドでスペルチェック可能にすることを Firefox に勧めたい場合があるかもしれません。例えば、検索ボックスや E メールの件名フィールドなど。</p> +<p>ウェブサイトが特定の <code><input></code> 要素にスペルチェックを使わせたい、あるいは使わせたくない場合は、<code>spellcheck</code> 属性を使うことができます。スペルチェックを勧めるには <code>true</code> を、使わせたくないときには <code>false</code> を設定します。</p> +<p>もしユーザが <code>layout.spellcheckDefault</code> を 0 に設定してスペルチェックを完全に無効化しているなら、サイトからの勧めは無視されることを覚えておいてください。もし <code>layout.spellcheckDefault</code> が他の値なら勧めは考慮に入れられるでしょう。</p> +<p>一行のテキストフィールド(HTML の <code><input></code> 要素) でスペルチェックを有効化するには、HTML で次のようにコードを書きます:</p> +<pre class="eval"><span class="nowiki"><input type="text" size="50" spellcheck="true"></span> +</pre> +<p>同様にテキストエリアでスペルチェックを無効にするには、HTML で次のようにコードを書きます:</p> +<pre class="eval"><span class="nowiki"><textarea spellcheck="false"></textarea></span> +</pre> +<p><code>spellcheck</code> 属性をドキュメントの <code><body></code> 要素に設定することによって、ドキュメントの <code>designMode</code> (一般的に、リッチテキスト編集の実装に使用されます) を制御することができます。</p> +<p>あなたは <code>spellcheck</code> 属性を <code><span></code> と <code><div></code> のような他の要素にも同じように適用ですます。それらに含まれた全ての <code><input></code> 要素は親によって設定されたスペルチェックの設定が継承されます。もし祖先の要素で何も設定されていない場合、ユーザの標準設定が使われます。</p> +<p>例えば</p> +<pre><div spellcheck="true"> + <label>文章を入力してください: </label><input type="text" size="50"> + <br /> + <label>さらに入力してください: </label><input type="text" size="50"> +</div> +<br /> +<label>3 番目を入力してください: </label><input type="text" size="50"> +</pre> +<p>この HTML の断片では、最初の 2 つのテキストフィールドはスペルチェックされるのに対して 3 番目はスペルチェックされません。</p> +<div class="noinclude"> + </div> diff --git a/files/ja/conflicting/web/http/connection_management_in_http_1.x/index.html b/files/ja/conflicting/web/http/connection_management_in_http_1.x/index.html new file mode 100644 index 0000000000..adb8b20a69 --- /dev/null +++ b/files/ja/conflicting/web/http/connection_management_in_http_1.x/index.html @@ -0,0 +1,38 @@ +--- +title: HTTP Pipelining FAQ +slug: HTTP_Pipelining_FAQ +tags: + - Necko +translation_of: Web/HTTP/Connection_management_in_HTTP_1.x +translation_of_original: Web/HTTP/Pipelining_FAQ +--- +<p><b>HTTP/1.1 パイプライン化 FAQ</b> +</p> +<h3 id="HTTP_.E3.83.91.E3.82.A4.E3.83.97.E3.83.A9.E3.82.A4.E3.83.B3.E5.8C.96.E3.81.A8.E3.81.AF.EF.BC.9F"> HTTP パイプライン化とは？ </h3> +<p>通常、HTTP リクエストは、次のリクエストは完全に受け取られた現在のリクエストに対するレスポンスのあとにだけ発行されるという形で、連続して発行されます。ネットワークの待ち時間と帯域幅の制限により、次のリクエストがサーバによって受け取られるまでに、著しい遅れを生じさせることもあります。 +</p><p>HTTP/1.1 では、複数 HTTP リクエストを対応するレスポンスを待つことなくソケットに同時に書き出すことを許しています。リクエスト発行者は、リクエストされた順序での到着のためのレスポンスを待っています。リクエストの「パイプライン化」の作用でページ読み込み時に劇的に改善をみせることもあります。高い待ち時間をともなう接続においては特にそうです。 +</p><p>パイプライン化はまた、TCP/IP パケットの数を劇的に減少させることもあります。536 ～ 1460 バイトの典型的な MSS (最大セグメントサイズ) で、1 つの TCP/IP パケットにいくつかの HTTP リクエストが可能です。少ないパケットは通常、IP ルータとネットワークの負荷を減らすため、読み込みに必要なパケットの数を減らすことは、全体としてはインターネットに利益になります。 +</p><p>HTTP/1.1 に合致するサーバはパイプライン化のサポートが必要とされています。これはサーバにパイプライン化したレスポンスが必要とされることを意味するわけではありません。しかし、クライアントがパイプライン化したリクエストを選択した時に失敗してはいけないことを要求します。著名な Mozilla 以外のブラウザがパイプライン化を実装していないため、これは明らかにエバンジェリズム (啓蒙) に関する新しいカテゴリのバグとなる可能性があります。 +</p> +<h3 id=".E3.83.91.E3.82.A4.E3.83.97.E3.83.A9.E3.82.A4.E3.83.B3.E5.8C.96.E3.81.97.E3.81.9F.E3.83.AA.E3.82.AF.E3.82.A8.E3.82.B9.E3.83.88.E3.82.92.E3.81.84.E3.81.A4.E3.81.99.E3.81.B9.E3.81.8D.E3.81.A7.E3.81.99.E3.81.8B.EF.BC.9F"> パイプライン化したリクエストをいつすべきですか？ </h3> +<p>GET や HEAD といったリクエストのように独立したリクエストだけが、パイプライン化可能です。POST と PUT といったリクエストはパイプライン化すべきではありません。新しいコネクションの上でもまた、パイプライン化したリクエストをすべきではありません。なぜなら、相手のサーバ (もしくはプロキシ) が HTTP/1.1 をサポートしているかどうかまだわからないからです。そのために、パイプライン化は存在する「keep-alive」接続の再利用時のみ可能です。 +</p> +<h3 id=".E3.81.A9.E3.81.AE.E3.81.8F.E3.82.89.E3.81.84.E3.81.AE.E6.95.B0.E3.81.AE.E3.83.AA.E3.82.AF.E3.82.A8.E3.82.B9.E3.83.88.E3.81.AE.E3.83.91.E3.82.A4.E3.83.97.E3.83.A9.E3.82.A4.E3.83.B3.E5.8C.96.E3.82.92.E3.81.99.E3.81.B9.E3.81.8D.E3.81.A7.E3.81.97.E3.82.87.E3.81.86.E3.81.8B.EF.BC.9F"> どのくらいの数のリクエストのパイプライン化をすべきでしょうか？ </h3> +<p>うーん。多くのリクエストのパイプライン化は、もし早い時点でコネクションが切断された場合コストが高くつきます。新しいコネクションの上でだけ繰り返せばいいのに、ネットワークへリクエストを書き出す時間を浪費するからです。そのうえ、最初のリクエストが完了するのに長い時間がかかると、長いパイプライン化は実際にユーザに知覚されてしまうほどの遅れを引き起こします。サーバあたり、2 つの「keep-alive」接続を超えないという制限を勧めます。明らかに、それはアプリケーションに依存します。Web ブラウザはたぶん、前述の理由のためにあまりに長いパイプライン化は望まないでしょう。2 というのは適切な値でしょう。しかし、この数値にはまだ試行により変えられる余地があります。 +</p> +<h3 id=".E3.82.82.E3.81.97.E3.80.81.E3.83.AA.E3.82.AF.E3.82.A8.E3.82.B9.E3.83.88.E3.81.8C.E3.82.AD.E3.83.A3.E3.83.B3.E3.82.BB.E3.83.AB.E3.81.95.E3.82.8C.E3.81.9F.E3.82.89.E3.81.A9.E3.81.86.E3.81.AA.E3.82.8B.E3.81.AE.E3.81.A7.E3.81.97.E3.82.87.E3.81.86.E3.81.8B.EF.BC.9F"> もし、リクエストがキャンセルされたらどうなるのでしょうか？ </h3> +<p>もし、リクエストがキャンセルされたとき、パイプライン全体がキャンセルされるのでしょうか？ それとも、パイプラインに属する他のリクエストを繰り返すことを強いてはいけないので、キャンセルされたリクエストだけがただ単に捨てられるべきなのでしょうか？ 答えは、受け取られていないままキャンセルされたリクエストに対するレスポンスの破片のサイズを含むいくつかの要素に依存します。実直なアプローチでは、ただパイプラインをキャンセルし、すべてのリクエストを再発行するというのもあるでしょう。これは、リクエストが一度の発行で何度も利用できるときだけできることです。パイプライン化さているリクエストは大抵、キャンセルされている同じ読み込みのグループ (ページ) に属するので、この実直なアプローチはよく筋が通っています。 +</p> +<h3 id=".E3.82.B3.E3.83.8D.E3.82.AF.E3.82.B7.E3.83.A7.E3.83.B3.E3.81.AB.E5.A4.B1.E6.95.97.E3.81.99.E3.82.8B.E3.81.A8.E3.81.A9.E3.81.86.E3.81.AA.E3.82.8B.E3.81.AE.E3.81.A7.E3.81.97.E3.82.87.E3.81.86.E3.81.8B.EF.BC.9F"> コネクションに失敗するとどうなるのでしょうか？ </h3> +<p>もし、コネクションが失敗するか、サーバによってパイプライン化されたレスポンスのダウンロードの一部へ放り込まれた時、Web ブラウザは失ったリクエストの再開始の能力がなくてはなりません。この場合、単純にも、上述の取り消された場合と等価にハンドリンクされているでしょう。 +</p> +<div class="originaldocinfo"> +<h2 id=".E5.8E.9F.E6.96.87.E6.9B.B8.E3.81.AE.E6.83.85.E5.A0.B1"> 原文書の情報 </h2> +<ul><li> 著者: <a class="link-mailto" href="mailto:darin@meer.net">Darin Fisher</a> +</li><li> 最終更新日: March 20, 2005 +</li><li> 著作権: Portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a Creative Commons license | <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">詳細</a> +</li></ul> +</div> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/HTTP_Pipelining_FAQ" } ) }} diff --git a/files/ja/conflicting/web/http/headers/user-agent/firefox/index.html b/files/ja/conflicting/web/http/headers/user-agent/firefox/index.html new file mode 100644 index 0000000000..c14a549f89 --- /dev/null +++ b/files/ja/conflicting/web/http/headers/user-agent/firefox/index.html @@ -0,0 +1,175 @@ +--- +title: User Agent Strings Reference +slug: User_Agent_Strings_Reference +tags: + - 要更新 +translation_of: Web/HTTP/Headers/User-Agent/Firefox +translation_of_original: User_Agent_Strings_Reference +--- +<h3 id="このドキュメントの状況"><a name="status">このドキュメントの状況</a></h3> +<p>これは、元の user-agent のバージョン文字列提議の改訂版です。<a class="external" href="http://www-archive.mozilla.org/build/user-agent-strings.html">元の、時代遅れの提議</a> と、<a class="link-news" href="news://news.mozilla.org/netscape.public.mozilla.seamonkey">netscape.public.mozilla.seamonkey</a> 及び <a class="link-news" href="news://news.mozilla.org/netscape.public.mozilla.netlib">netscape.public.mozilla.netlib</a>での議論を改訂の参考にしてください。</p> +<p>This document is the official Mozilla user-agent string specification. However, the following issues are under review and may be revised in the near future:</p> +<ul style="border: medium solid red;"> + <li>There is concern that the attempt to separate <code>Platform</code> and <code>OS-or-CPU</code> on Windows and Macintosh is not backwards compatible and the user-agent strings should return to their old-fashioned form.</li> + <li>There is <a class="external" href="http://bugzilla.mozilla.org/show_bug.cgi?id=57555">concern</a> that giving the operating system version on Windows reveals too much information about a system (such as potential security holes).</li> + <li>There is <a class="external" href="http://bugzilla.mozilla.org/show_bug.cgi?id=55366">concern</a> that revealing localization information is a violation of privacy.</li> +</ul> +<h3 id="目標点"><a name="goals">目標点</a></h3> +<p>元の目標は:</p> +<ul> + <li>RFC 1945 や RFC 2068 で述べられている規格に従う。</li> + <li>現存の Web サーバーを破壊しない。</li> + <li>現存のログファイル解析ソフトや、user-agent 分析コードを破壊しない。</li> + <li>user-agent のバージョン文字列を適切な短い長さにとどめる。</li> + <li>一貫した、見てすぐ分かる、そして解析しやすい形式を用いる。</li> +</ul> +<p>議論の中で出てきた他の事項は:</p> +<ul> + <li>日付に基づいたバージョン情報を提供する。</li> + <li>バージョン修飾語の問題点に焦点を絞る。</li> + <li>アプリケーションに、Gecko のように Mozilla の技術が含まれていることを知らせる。しかし、Mozilla ではないので、区別できるようにする。</li> +</ul> +<h3 id="提議"><a name="proposal">提議</a></h3> +<p>Mozillaに基づくブラウザは、user-agentのバージョン文字列を以下の形式にすべきである:</p> +<p style="margin-left: 40px;"><code>MozillaProductToken (MozillaComment) GeckoProductToken *(VendorProductToken|VendorComment)</code></p> +<p>Gecko レイアウトエンジンが埋め込まれたアプリケーションの user-agent のバージョン文字列は以下の形式に従うべきである:</p> +<p style="margin-left: 40px;"><code>ApplicationProductToken (ApplicationComment) GeckoProductToken *(VendorProductToken|VendorComment)</code></p> +<p>上記の定義中の参照は以下の通り:</p> +<table> + <colgroup> + <col> + <col> + </colgroup> + <tbody> + <tr style="background-color: rgb(255, 255, 204);"> + <td>MozillaProductToken</td> + <td><code><strong>Mozilla/</strong></code> <em>MozillaVersion</em></td> + </tr> + <tr style="background-color: rgb(255, 255, 204);"> + <td>MozillaVersion</td> + <td><em>Major</em> <code><strong>.</strong></code> <em>minor</em></td> + </tr> + <tr style="background-color: rgb(255, 255, 204);"> + <td>Major</td> + <td>メジャーリリース番号を示す整数値。In practice, always 5.</td> + </tr> + <tr style="background-color: rgb(255, 255, 204);"> + <td>Minor</td> + <td>もし 0 でないなら、3 桁の 0 で埋められた数字であるべきで、たとえば <strong><code>001</code></strong> である。もし 0 なら、0 とするのが望ましい。</td> + </tr> + <tr> + <td>MozillaComment</td> + <td><code>(</code> <em>Platform</em> <strong><code>;</code></strong> <em>Security</em> <strong><code>;</code></strong> <em>OS-or-CPU</em> <strong><code>;</code></strong> <em>Localization information</em> <em><strong><code>;</code></strong> GeckoVersion <code>)</code></em> <em>*[<strong><code>;</code></strong> Optional Other Comments] <code>)</code></em></td> + </tr> + <tr> + <td>Platform</td> + <td>使用してよい文字列: + <ul> + <li><code><strong>Windows</strong></code>: 全ての Windows 環境</li> + <li><code><strong>Macintosh</strong></code>: 全ての Mac OS 環境</li> + <li><code><strong>X11</strong></code>: 全ての X-Window システム環境</li> + <li>etc.</li> + </ul> + </td> + </tr> + <tr> + <td>Security</td> + <td>使用してよい文字列: + <ul> + <li><code><strong>N</strong></code>: セキュリティー無し</li> + <li><code><strong>U</strong></code>: 強化セキュリティーバージョン</li> + <li><code><strong>I</strong></code>: 弱いセキュリティーバージョン</li> + </ul> + </td> + </tr> + <tr> + <td>OS-or-CPU</td> + <td><strong>Windows</strong> システム用の文字列: + <ul> + <li><code><strong>Win3.11</strong></code>: Windows 3.11</li> + <li><code><strong>WinNT3.51</strong></code>: Windows NT 3.11</li> + <li><code><strong>WinNT4.0</strong></code>: Windows NT 4.0</li> + <li><code><strong>Windows NT 5.0</strong></code>: Windows 2000</li> + <li><code><strong>Win95</strong></code>: Windows 95</li> + <li><code><strong>Win98</strong></code>: Windows 98</li> + <li><code><strong>Win 9x 4.90</strong></code>: Windows Me</li> + <li>etc.</li> + </ul> + <strong>MacOS</strong> システム用の文字列: + <ul> + <li><code><strong>68K</strong></code>: 68k ハードウエア</li> + <li><code><strong>PPC</strong></code>: PowerPC ハードウエア</li> + <li>etc.</li> + </ul> + <strong>Unix</strong> システム用の文字列: コマンド <strong><code>uname -sm</code></strong> の出力を用いる。(also accessible as the <strong>sysname</strong> and <strong>machine</strong> fields of the utsname structure.) (Previous versions of this document said they should be the output of <strong><code>uname -srm</code></strong>, but the <strong>release</strong> field of the utsname structure was considered to <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=57555">reveal too much information</a> about the system, such as potential security holes.)</td> + </tr> + <tr> + <td>Localization Information</td> + <td>文字コードの表現は、RFC 1945 及び RFC 2068 の規格に従う。例としては<br> + <code>en, en-US, es, es-CO, ja, ja-JP</code>などがあげられる。</td> + </tr> + <tr style="background-color: rgb(255, 255, 204);"> + <td>GeckoVersion</td> + <td>String starting with "rv:" followed by the Gecko version. This is a set of numbers separated by periods, possibly followed by a pre-release indicator (e.g. "a1" for the first alpha).</td> + </tr> + <tr style="background-color: rgb(255, 255, 204);"> + <td>GeckoProductToken</td> + <td><code><strong>Gecko/</strong></code><em>GeckoDate</em> + <p>Mozilla を含む、Gecko エンジンに基づく製品には、Gecko 製品文字列をその二次製品であることを明確にするために利用を許可する。</p> + </td> + </tr> + <tr style="background-color: rgb(255, 255, 204);"> + <td>GeckoDate</td> + <td>YYYYMMDD 形式の日付。正式な Mozilla ビルドにおいては、これは BuildID の中の日付に一致させる。Mozilla の公開版においては、GeckoDate はソースコードが mozilla.org から取り出された日付と一致させなければならず、必ずしも生成された BuildID の日付部分とは一致しない。複数のブランチが同時に公開される場合、この日付からは Gecko のバージョンを特定できない。</td> + </tr> + <tr> + <td>ApplicationProductToken, Application Comment</td> + <td>Gecko レイアウトエンジンに基づくアプリケーションが使用する部分である。それらの製品文字列とコメントの形式はここで指定するものではないが、HTTP 標準に基づくべきである。</td> + </tr> + <tr style="background-color: rgb(255, 255, 204);"> + <td>( VendorProductToken | VendorComment )</td> + <td>Mozilla に基づくアプリケーションの製品文字列を記述する部分である。形式や内容はベンダー規定とするが、HTTP 標準に基づくべきであり、上記の GeckoVersion を含むことが望ましい。</td> + </tr> + <tr> + <td><strong><code>*</code></strong></td> + <td>0 かそれ以上のトークンを入れることを指定する記号</td> + </tr> + <tr> + <td><strong><code>?</code></strong></td> + <td>0 か 1 つのトークンを入れることを指定する記号</td> + </tr> + </tbody> +</table> +<h3 id="例"><a name="examples">例</a></h3> +<table> + <colgroup> + <col> + <col> + </colgroup> + <tbody> + <tr> + <td>mozilla.org のブラウザ</td> + <td><code>Mozilla/5.001 (windows; U; NT4.0; en-US; rv:1.0) Gecko/25250101</code></td> + </tr> + <tr> + <td>上のブラウザと同じソースに基づいて作られた商標リリース</td> + <td><code>Mozilla/5.001 (Macintosh; N; PPC; ja; rv:1.0) Gecko/25250101 MegaCorpBrowser/1.0 (MegaCorp, Inc.)</code></td> + </tr> + <tr> + <td>再構成リリース</td> + <td><code>Mozilla/9.876 (X11; U; Linux 2.2.12-20 i686, en; rv:2.0) Gecko/25250101 Netscape/5.432b1 (C-MindSpring)</code></td> + </tr> + <tr> + <td>Gecko に基づくブラウザ</td> + <td><code>TinyBrowser/2.0 (TinyBrowser Comment; rv:1.9.1a2pre) Gecko/20201231</code></td> + </tr> + </tbody> +</table> +<h3 id="Implementation_notes_for_applications_vendors_and_extensions"><a name="implementation">Implementation notes for applications, vendors, and extensions</a></h3> +<p>Starting with Mozilla 1.8 beta2, the best way for applications, vendors, and extensions (if needed) to add to default preferences to add <code>VendorProductToken</code>s or <code>VendorComment</code>s is to add a default preference of the form <code>general.useragent.extra.<em>identifier</em></code>. <em>All</em> of the <code>general.useragent.extra.*</code> preferences will have their string values added to the User-Agent string in alphabetical order by identifier. For example:</p> +<ul> + <li><code>pref("general.useragent.extra.megabrowser", "MegaCorpBrowser/1.0 (MegaCorp, Inc.)");</code></li> + <li><code>pref("general.useragent.extra.tinydistro", "TinyDistroLinux/2.3");</code></li> +</ul> +<hr> +<p>これに対するコメントは <a class="link-news" href="news://news.mozilla.org/netscape.public.mozilla.netlib">netscape.public.mozilla.netlib</a> または <a class="link-mailto" href="mailto:dbaron@dbaron.org">dbaron@dbaron.org</a> まで</p> diff --git a/files/ja/conflicting/web/http/headers/x-dns-prefetch-control/index.html b/files/ja/conflicting/web/http/headers/x-dns-prefetch-control/index.html new file mode 100644 index 0000000000..f6ef54e17d --- /dev/null +++ b/files/ja/conflicting/web/http/headers/x-dns-prefetch-control/index.html @@ -0,0 +1,35 @@ +--- +title: DNS プリフェッチの制御 +slug: Controlling_DNS_prefetching +--- +<p>{{ fx_minversion_header(3.5) }}</p> +<p>Firefox 3.5 では <strong>DNS prefetching </strong>が導入されました。これにより、 Firefox は文書中に埋め込まれたアンカーに加え、画像、CSS、JavaScript などの文書内で参照されている外部リソースの URL に対し、予めドメインの名前解決を行います。</p> +<p>このプリフェッチはバックグラウンドで行われるため、実際にリソースが必要となった際には既に名前解決が終了していることになります。これにより、例えばユーザーがリンクをクリックした際の待ち時間を減らすことができます。</p> +<h2 id="背景">背景</h2> +<p>DNS による名前解決に必要な帯域幅は小さなものですが、それにかかる時間は非常に大きく、特にモバイル環境では顕著なものとなります。予め名前解決を行っておくことで、例えばユーザーがリンクをクリックした際に、ページが表示されるまでの待ち時間を大きく削減することができ、場合によっては秒単位の効果が現れる場合もあります。</p> +<p>Firefox での実装においては、実際のページコンテンツの取得と<strong>並行して</strong> DNS による名前解決が行われるため、名前解決に時間がかかっても実際のページコンテンツの取得に遅れが生じることはありません。</p> +<p>特にモバイル環境においては、 DNS プリフェッチによりページの読み込みにかかる時間が劇的に改善されます。例えば、多数の画像が表示されるページにおいて、画像が要求される前に名前解決が行われている場合では読み込み時間が 5% 以上削減されるでしょう。</p> +<h2 id="ブラウザーでのプリフェッチ制御">ブラウザーでのプリフェッチ制御</h2> +<p>通常、ユーザーはプリフェッチ機能に対して何ら設定する必要はありません。が、何らかの理由でプリフェッチ機能を無効にしたい場合は、 <code>network.dns.disablePrefetch</code> を <code>true</code> に設定してください。</p> +<p>また、既定では HTTPS にて読み込まれた文書に対する埋め込みリンクのホスト名は事前に解決されないように設定されています。これを変更するには<code>network.dns.disablePrefetchFromHTTPS </code>を <code>false</code> としてください。</p> +<h2 id="コンテンツでのプリフェッチ制御">コンテンツでのプリフェッチ制御</h2> +<p>コンテンツ・プロバイダー側でもプリフェッチ機能をある程度制御することができます。これは、 <a class="external" href="http://dev.chromium.org/developers/design-documents/dns-prefetching" title="http://dev.chromium.org/developers/design-documents/dns-prefetching">Google Chrome が DNS プリフェッチをコントロールする</a> 際の手法と互換性があります。</p> +<h3 id="プリフェッチのオン・オフ">プリフェッチのオン・オフ</h3> +<p>まず、サーバーはコンテンツの配信時に <code>x-dns-prefetch-control </code>HTTP ヘッダを "<code>off</code>" とすることで、DNS プリフェッチ機能をオプト・アウトとして（ユーザーの意志とは関係なく）実装することができます。</p> +<p>同様に個々の文書に対して制御を行うことも可能で、 <a class="internal" href="/Ja/HTML/Element/Meta" title="Ja/HTML/Element/Meta"><code>meta</code></a> 要素の <code style="color: rgb(37, 34, 29); font-weight: inherit;">http-equiv</code> 属性を次のように設定することで実現できます:</p> +<pre><meta http-equiv="x-dns-prefetch-control" content="off"> +</pre> +<p>逆に、 <code>content</code> 属性を "<code>on</code>" とすることで、プリフェッチが有効になります。</p> +<h3 id="特定のホスト名の名前解決を強制する">特定のホスト名の名前解決を強制する</h3> +<p>コンテンツ・プロバイダーは、文書内にアンカーを埋め込まずとも、特定のホスト名に対する DNS の事前解決を強制することができます。これは、 <code><a class="internal" href="/en/HTML/Element/link" title="En/HTML/Element/Link">link</a> 要素に以下のように記述します</code>:</p> +<pre><link rel="dns-prefetch" href="http://www.spreadfirefox.com/"> +</pre> +<p>この例では、 Firefox は "www.spreadfirefox.com" について、予め名前解決を行うよう試みます。</p> +<p>また、 link 要素中に必ずしも完全なアドレスを記述せずとも、ホスト名の前に二つのスラッシュを加えることで名前解決が行われます:</p> +<pre><link rel="dns-prefetch" href="//www.spreadfirefox.com"> +</pre> +<p>特定のホスト名について強制的に予め名前解決を行うというのは、次のような場合に有効と考えられます: トップページそのものでは参照されていないものの、サイト内の他のページでは頻繁に参照されている外部ドメインをトップページにて強制的に名前解決を行うことで、トップページ自体の速度向上は望めませんが、サイト全体でのパフォーマンス向上が期待できます。</p> +<h2 id="参考文献">参考文献</h2> +<ul> <li><a class="external" href="http://bitsup.blogspot.com/2008/11/dns-prefetching-for-firefox.html" title="http://bitsup.blogspot.com/2008/11/dns-prefetching-for-firefox.html">DNS Prefetching for Firefox (blog post)</a></li> +</ul> +<p> </p> diff --git a/files/ja/conflicting/web/javascript/guide/index.html b/files/ja/conflicting/web/javascript/guide/index.html new file mode 100644 index 0000000000..79c30b670a --- /dev/null +++ b/files/ja/conflicting/web/javascript/guide/index.html @@ -0,0 +1,44 @@ +--- +title: Function Object +slug: Web/JavaScript/Guide/Obsolete_Pages/Predefined_Core_Objects/Function_Object +--- +<p> </p> +<h3 id="Function_.E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88" name="Function_.E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88">Function オブジェクト</h3> +<p>定義済みの <code>Function</code> オブジェクトは、関数としてコンパイルさせたい JavaScript コードの文字列を指定します。</p> +<p><code>Function</code> オブジェクトを作成するには次のようにします。</p> +<pre>functionObjectName = new Function ([arg1, arg2, ... argn], functionBody) +</pre> +<p><code>functionObjectName</code> は変数名または既存のオブジェクトのプロパティ名です。オブジェクトに小文字のイベントハンドラ名を続けて、<code>window.onerror</code> のようにして指定することもできます。</p> +<p><code>arg1</code>, <code>arg2</code>, ... <code>argn</code> は関数が仮引数名として使用する引数です。それぞれが JavaScript の識別子として妥当な文字列である必要があります。例えば、"x" や "theForm" などです。</p> +<p><code>functionBody</code> は関数の本体としてコンパイルさせたい JavaScript コードを表す文字列です。</p> +<p><code>Function</code> オブジェクトはそれが使用されるたびに評価されます。これは関数を宣言し、それをコード内で呼び出す方法よりも非効率的です。宣言された関数はコンパイルされるからです。</p> +<p>ここで説明した関数の定義方法に加えて、<code>function</code> 文と関数式を用いることもできます。詳しくは <a href="/ja/Core_JavaScript_1.5_Reference" title="ja/Core_JavaScript_1.5_Reference">コア JavaScript 1.5 リファレンス</a> を参照してください。</p> +<p>次のコードは関数を変数 <code>setBGColor</code> に代入します。この関数は開いている文書の背景色をセットします。</p> +<pre>var setBGColor = new Function("document.bgColor='antiquewhite'") +</pre> +<p><code>Function</code> オブジェクトを呼び出すには、それがあたかも関数であるかのように変数名を指定すればいいのです。次のコードは <code>setBGColor</code> 変数で指定された関数を実行します。</p> +<pre>var colorChoice="antiquewhite" +if (colorChoice=="antiquewhite") {setBGColor()} +</pre> +<p>次のどちらかの方法を使用することでイベントハンドラに関数を代入することができます。</p> +<pre>1. document.form1.colorButton.onclick=setBGColor +2. <INPUT NAME="colorButton" TYPE="button" + VALUE="Change background color" + onClick="setBGColor()"> +</pre> +<p>上記の変数 <code>setBGColor</code> を作成することは次の関数を宣言することと同じようなことです。</p> +<pre>function setBGColor() { + document.bgColor='antiquewhite' +} +</pre> +<p>関数を変数に代入することは関数を宣言することと似ていますが、異なる点もあります。</p> +<ul> + <li><code>var setBGColor = new Function("...")</code> のようにして関数を変数に代入すると、<code>setBGColor</code> は <code>new Function()</code> を用いて作成した関数への参照がその値であるような変数になります。</li> + <li><code>function setBGColor() {...}</code> のようにして関数を作成すると、<code>setBGColor</code> は変数ではなく関数の名前になります。</li> +</ul> +<p>関数を関数の中に入れ子にすることができます。内側の関数は外側の関数に対してプライベートになります。</p> +<ul> + <li>内側の関数には外側の関数の文からしかアクセスできません。</li> + <li>内側の関数は外側の関数の引数や変数を使用できます。外側の関数は内側の関数の引数や変数を使用できません。</li> +</ul> +<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Predefined_Core_Objects:Date_Object", "Core_JavaScript_1.5_Guide:Predefined_Core_Objects:Math_Object") }}</p> diff --git a/files/ja/conflicting/web/javascript/guide_552be6201ec831852573aad295c96538/index.html b/files/ja/conflicting/web/javascript/guide_552be6201ec831852573aad295c96538/index.html new file mode 100644 index 0000000000..88bf9acbe7 --- /dev/null +++ b/files/ja/conflicting/web/javascript/guide_552be6201ec831852573aad295c96538/index.html @@ -0,0 +1,10 @@ +--- +title: Obsolete Pages +slug: Web/JavaScript/Guide/Obsolete_Pages +translation_of: Web/JavaScript/Guide +translation_of_original: Web/JavaScript/Guide/Obsolete_Pages +--- +<p>This is a list of pages that have been merged into chapters (in alphabetical order):</p> + + +<div>{{tree}}</div> diff --git a/files/ja/conflicting/web/javascript/reference/global_objects/escape/index.html b/files/ja/conflicting/web/javascript/reference/global_objects/escape/index.html new file mode 100644 index 0000000000..48ab4cab3b --- /dev/null +++ b/files/ja/conflicting/web/javascript/reference/global_objects/escape/index.html @@ -0,0 +1,34 @@ +--- +title: window.escape +slug: Web/API/Window/escape +tags: + - DOM + - DOM_0 + - Gecko + - Gecko DOM Reference + - Window +translation_of: Web/JavaScript/Reference/Global_Objects/escape +translation_of_original: Web/API/Window.escape +--- +<div> + {{ApiRef}}</div> +<h2 id="Summary" name="Summary">概要</h2> +<p>文字列をエンコードし、16 進エスケープシーケンスで表された特定の文字に置換します。</p> +<h2 id="Syntax" name="Syntax">構文</h2> +<pre class="syntaxbox"><var>escaped</var> = escape(<i>regular</i>); +</pre> +<ul> + <li><code>escaped</code> は、エンコードされた文字列です。</li> + <li><code>regular</code> は、通常の文字列です。</li> +</ul> +<h2 id="Example" name="Example">例</h2> +<pre class="brush:js">alert( escape("http://www.cnn.com") ); // 表示結果: http%3A//www.cnn.com +</pre> +<h2 id="Notes" name="Notes">注記</h2> +<p><code>escape()</code> メソッドは、特別な文字（通常のテキストや数字ではない文字）を 16 進文字にエンコードします。これは、特に、クッキーの値を設定するために必要となります。また、GET リクエストや AJAX GET/POST リクエストの URL で + <i> + name=value</i> + のような組のデータを渡すときにも役立ちます。</p> +<p>{{domxref("window.unescape")}} 、<a href="/ja/docs/JavaScript/Reference/Global_Objects/encodeURIComponent"><code>encodeURIComponent</code></a> も参照してください。</p> +<h2 id="Specification" name="Specification">仕様</h2> +<p>{{DOM0}} 但し、ECMA-262 の非標準化セクションで言及されています。</p> diff --git a/files/ja/conflicting/web/javascript/reference/global_objects/intl/datetimeformat/index.html b/files/ja/conflicting/web/javascript/reference/global_objects/intl/datetimeformat/index.html new file mode 100644 index 0000000000..5705852c36 --- /dev/null +++ b/files/ja/conflicting/web/javascript/reference/global_objects/intl/datetimeformat/index.html @@ -0,0 +1,88 @@ +--- +title: Intl.DateTimeFormat.prototype +slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype +tags: + - DateTimeFormat + - Internationalization + - JavaScript + - Property + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat +translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype +--- +<div>{{JSRef}}</div> + +<p><strong><code>Intl.DateTimeFormat.prototype</code></strong> プロパティは、 {{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}} コンストラクターに対するプロトタイプオブジェクトを表します。</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Description" name="Description">解説</h2> + +<p><code>Intl.DateTimeFormat</code> インスタンスの解説については {{jsxref("DateTimeFormat")}} を確認して下さい。</p> + +<p>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} インスタンスは <code>Intl.DateTimeFormat.prototype</code> から継承します。プロトタイプオブジェクトへの変更はすべての {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} インスタンスによって継承されます。</p> + +<h2 id="Properties" name="Properties">プロパティ</h2> + +<dl> + <dt><code>Intl.DateTimeFormat.prototype.constructor</code></dt> + <dd>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} への参照です。</dd> +</dl> + +<h2 id="Methods" name="Methods">メソッド</h2> + +<dl> + <dt>{{jsxref("DateTimeFormat.format", "Intl.DateTimeFormat.prototype.format()")}}</dt> + <dd>ロケールおよびこの {{jsxref("DateTimeFormat", "DateTimeFormat")}} オブジェクトの書式化オプションに則って日付を書式化するゲッター関数です。</dd> + <dt>{{jsxref("DateTimeFormat.formatToParts", "Intl.DateTimeFormat.prototype.formatToParts()")}}</dt> + <dd>Returns an {{jsxref("Array")}} of objects representing the date string in parts that can be used for custom locale-aware formatting.</dd> + <dt>{{jsxref("DateTimeFormat.resolvedOptions", "Intl.DateTimeFormat.prototype.resolvedOptions()")}}</dt> + <dd>ローケルを反映しているプロパティとオブジェクトの初期化中に計算されたオプションをもった新しいオブジェクトを返します。</dd> + <dt>{{jsxref("DateTimeFormat.formatRange", "Intl.DateTimeFormat.prototype.formatRange()")}}</dt> + <dd>This method receives two <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/">Dates</a> and formats the date range in the most concise way based on the locale and options provided when instantiating {{jsxref("DateTimeFormat", "DateTimeFormat")}}.</dd> + <dt>{{jsxref("DateTimeFormat.formatRangeToParts", "Intl.DateTimeFormat.prototype.formatRangeToParts()")}}</dt> + <dd>This method receives two <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/">Dates</a> and returns an Array of objects containing the locale-specific tokens representing each part of the formatted date range.</dd> +</dl> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.prototype', 'Intl.DateTimeFormat.prototype')}}</td> + <td>{{Spec2('ES Int Draft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES Int 2.0', '#sec-12.2.1', 'Intl.DateTimeFormat.prototype')}}</td> + <td>{{Spec2('ES Int 2.0')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES Int 1.0', '#sec-12.2.1', 'Intl.DateTimeFormat.prototype')}}</td> + <td>{{Spec2('ES Int 1.0')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Intl.DateTimeFormat.prototype")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li> +</ul> diff --git a/files/ja/conflicting/web/javascript/reference/global_objects/json/index.html b/files/ja/conflicting/web/javascript/reference/global_objects/json/index.html new file mode 100644 index 0000000000..a4f38307ea --- /dev/null +++ b/files/ja/conflicting/web/javascript/reference/global_objects/json/index.html @@ -0,0 +1,95 @@ +--- +title: ネイティブ JSON を使う +slug: Using_native_JSON +translation_of: Web/JavaScript/Reference/Global_Objects/JSON +translation_of_original: Web/JavaScript/Guide/Using_native_JSON +--- +<div>{{gecko_minversion_header("1.9.1")}}</div> + +<p>この文書では、 Gecko 1.9.1 で追加された ECMAScript 5 互換のネイティブ JSON オブジェクトについて説明します。以前のバージョンの Firefox で JSON を扱う際の基本的な情報については、<a href="/ja/docs/JSON" title="JSON">JSON</a> のページをご覧下さい。</p> + +<p>ネイティブ JSON オブジェクトは 2 つの重要なメソッドをもっています。<code>JSON.parse()</code> メソッドは JSON 文字列をパースし、 JavaScript のオブジェクトに変換します。<code>JSON.stringify()</code> メソッドは、 JavaScript オブジェクトを JSON 文字列に変換します。</p> + +<div class="note"><strong>注意:</strong>JSON オブジェクトは循環的な構造の変換には対応していません。そのようなオブジェクトを JSON 文字列に変換しようとすると、<code>TypeError</code> 例外が起こります。</div> + +<h2 id="JSON_.E6.96.87.E5.AD.97.E5.88.97.E3.81.AE.E3.83.91.E3.83.BC.E3.82.B9" name="JSON_.E6.96.87.E5.AD.97.E5.88.97.E3.81.AE.E3.83.91.E3.83.BC.E3.82.B9">JSON 文字列のパース</h2> + +<p>JSON 文字列を JavaScript オブジェクトに変換するには、以下の例のように JSON 文字列を単純に <code>JSON.parse()</code> に渡すだけで済みます。</p> + +<pre class="brush: js">var jsObject = JSON.parse(jsonString); +</pre> + +<p>JavaScript 1.8.5 (Firefox 4) 以降では <code>JSON.parse()</code> では末尾のカンマを許可しません。</p> + +<pre>// JavaScript 1.8.5 ではいずれも構文エラーとなります +var jsObject = JSON.parse("[1, 2, 3, 4, ]"); +var jsObject = JSON.parse("{ \"foo\" : 1, }"); +</pre> + +<h2 id=".E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E3.82.92_JSON_.E3.81.AB.E5.A4.89.E6.8F.9B" name=".E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E3.82.92_JSON_.E3.81.AB.E5.A4.89.E6.8F.9B">オブジェクトを JSON に変換</h2> + +<p>JavaScript オブジェクトを JSON 文字列に変換するには、オブジェクトを<code>JSON.stringify()</code> メソッドに渡します:</p> + +<pre class="brush: js">var foo = {}; +foo.bar = "new property"; +foo.baz = 3; + +var jsonString = JSON.stringify(foo); +</pre> + +<p><code>jsString</code>は<code>'{"bar":"new property","baz":3}'</code> と変換されます。</p> + +<p>Firefox 3.5.4 以降では <code>JSON.stringify()</code> オプションの引数で挙動をカスタマイズ可能になります。構文は次の通りです:</p> + +<p><code>jsonString = JSON.stringify(<em>value</em> [, <em>replacer</em> [, <em>space</em>]])</code></p> + +<dl> + <dt><code>value</code></dt> + <dd>JSON 文字列に変換する JavaScript オブジェクト。</dd> + <dt><code>replacer</code></dt> + <dd>文字列化プロセスの振る舞いを変更する関数、または value オブジェクトのプロパティのうち JSON 文字列出力に含めるホワイトリストを指定する <a href="/ja/docs/Web/JavaScript/Guide/Obsolete_Pages/Predefined_Core_Objects#String_.E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88" title="JavaScript/Guide/Predefined Core Objects/String Object"><code>String</code></a> もしくは <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Number" title="JavaScript/ Reference/Global Objects/Number"><code>Number</code></a> オブジェクトの配列。この値が null もしくは指定されなかった場合、オブジェクトのすべてのプロパティが JSON 文字列の出力に含まれます。</dd> + <dt><code>space</code></dt> + <dd>出力される JSON 文字列を読みやすくするために挿入する空白文字を指定する <a href="/ja/docs/Web/JavaScript/Guide/Obsolete_Pages/Predefined_Core_Objects#String_.E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88" title="JavaScript/ Guide/Predefined Core + Objects/String Object"><code>String</code></a> もしくは <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Number" title="JavaScript/ Reference/Global + Objects/Number"><code>Number</code></a> オブジェクト。<code>Number </code>が指定された場合、ホワイトスペースの空白文字数として扱われます。但し 10 を超える数値を指定しても 10 を指定したものとして扱われます。1 より小さい値を指定するとホワイトスペースは含められません。<code>String </code>が指定された場合、空白文字の代わりにその文字列(または 10 文字を越える場合は最初の 10 文字)が使われます。この値が<code> null </code>もしくは指定されなかった場合、ホワイトスペースは含まれません。</dd> +</dl> + +<h3 id="replacer_.E3.83.91.E3.83.A9.E3.83.A1.E3.83.BC.E3.82.BF" name="replacer_.E3.83.91.E3.83.A9.E3.83.A1.E3.83.BC.E3.82.BF">replacer パラメータ</h3> + +<p><code>replacer </code>パラメータには関数または配列を指定できます。</p> + +<p><code>replacer </code>が関数である場合、文字列化するプロパティのキーと値二つをパラメータとして受け取ります。キーが見つかったオブジェクトは <code>this</code> パラメータとして渡されます。最初空文字列をキー、<code>value</code> パラメータのオブジェクトを値として関数を呼び出します。関数の返り値がオブジェクト(もしくは配列)であれば順次そのプロパティの名前と値を引数として関数を呼び出します。出力される JSON 文字列は関数の返値に応じて次のようになります:</p> + +<ul> + <li><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Number" title="JavaScript/ Reference/Global Objects/Number"><code>Number</code></a> が返されると、プロパティの値としてその数値に対応する文字列が JSON 文字列に出力されます。</li> + <li><a href="/ja/docs/Web/JavaScript/Guide/Obsolete_Pages/Predefined_Core_Objects#String_.E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88" title="JavaScript/ Guide/Predefined Core Objects/String"><code>String</code></a> が返されると、プロパティの値としてその文字列が JSON 文字列に出力されます。</li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="JavaScript/ Reference/Global Objects/Boolean"><code>Boolean</code></a> が返されると、プロパティの値として "true" もしくは "false" が JSON 文字列に出力されます。</li> + <li>その他のオブジェクトが返されると、各プロパティについて <code>replacer</code> を呼び出し、再帰的に JSON 文字列化されます。但し関数が返された場合には JSON 文字列には何も追加されません。</li> + <li><code>undefined</code> が返されると、プロパティは JSON 文字列の出力に含められません。</li> +</ul> + +<div class="note"><strong>注記:</strong> 配列の要素を除外するためには <code>replacer</code> は使えません。オブジェクトのプロパティについては <code>undefined</code> または関数を返すとそのプロパティがスキップされますが、関数の要素の場合は <code>null</code> が出力されます。</div> + +<h4 id="Example" name="Example">例</h4> + +<pre class="eval deki-transform brush: js">function replacer(key, value) { + if (typeof value === "string") { + return undefined; + } + return value; +} + +var foo = {foundation: "Mozilla", model: "box", week: 45, transport: "car", month: 7}; +var jsonString = JSON.stringify(foo, replacer); +</pre> + +<p>結果として得られる JSON 文字列は <code>{"week":45,"month":7}</code> となります。</p> + +<p><code>replacer</code> が配列である場合、オブジェクトのプロパティのうち JSON 文字列出力に含まれるべきプロパティ名のリストとして扱われます。</p> + +<h2 id="See_also" name="See_also">参考文献</h2> + +<ul> + <li><a class="internal" href="/ja/docs/Web/JavaScript/ECMAScript_5_support_in_Mozilla" title="JavaScript/ECMAScript 5 support in Mozilla">Mozilla における ECMAScript 5 のサポート</a></li> + <li><a class="internal" href="/ja/docs/JSON" title="JSON">JSON</a></li> +</ul> diff --git a/files/ja/conflicting/web/javascript/reference/global_objects/string/lastindexof/index.html b/files/ja/conflicting/web/javascript/reference/global_objects/string/lastindexof/index.html new file mode 100644 index 0000000000..1dc9e038db --- /dev/null +++ b/files/ja/conflicting/web/javascript/reference/global_objects/string/lastindexof/index.html @@ -0,0 +1,18 @@ +--- +title: lastIndexOf +slug: lastIndexOf +tags: + - Disambiguation +translation_of: Web/JavaScript/Reference/Global_Objects/String/lastIndexOf +translation_of_original: lastIndexOf +--- +<p><strong>lastIndexOf</strong> は、いくつかの JavaScript オブジェクトが持つメソッドです。</p> + +<h2 id="JavaScript" name="JavaScript">JavaScript</h2> + +<ul> + <li><a href="/ja/docs/JavaScript/Reference/Global_Objects/Array/lastIndexOf">lastIndexOf</a> - Array オブジェクトのメソッド</li> + <li><a href="/ja/docs/JavaScript/Reference/Global_Objects/String/lastIndexOf">lastIndexOf</a> - String オブジェクトのメソッド</li> +</ul> + +<div><div class="disambig" id="disambig"><p><i>これは<a href="https://developer.mozilla.org/ja/docs/Project:Disambiguation">あいまい性除去</a>のページです — 同じ題名を共有している可能性のあるページをリストして案内を補助します。 記事のリンクからここに来たのであれば、戻って意図するページに直接行くように修正することもできます。</i></p></div></div> diff --git a/files/ja/conflicting/web/javascript/reference/global_objects/unescape/index.html b/files/ja/conflicting/web/javascript/reference/global_objects/unescape/index.html new file mode 100644 index 0000000000..07564a02ee --- /dev/null +++ b/files/ja/conflicting/web/javascript/reference/global_objects/unescape/index.html @@ -0,0 +1,34 @@ +--- +title: window.unescape +slug: Web/API/Window/unescape +tags: + - DOM + - DOM_0 + - Gecko + - Gecko DOM Reference + - Window +translation_of: Web/JavaScript/Reference/Global_Objects/unescape +translation_of_original: Web/API/Window.unescape +--- +<div> + {{ApiRef}}</div> +<h2 id="Summary" name="Summary">概要</h2> +<p>16 進でエンコードされた値（例えば、クッキー）をデコードします。</p> +<h2 id="Syntax" name="Syntax">構文</h2> +<pre class="syntaxbox"><var>regular</var> = window.unescape(<i>escaped</i>)</pre> +<ul> + <li><code>regular</code> : 通常の文字列</li> + <li><code>encoded</code> : エンコードされた文字列</li> +</ul> +<h2 id="Example" name="Example">例</h2> +<pre class="brush:js">alert( unescape("%5C") ); // 表示結果: "\" + +alert( unescape("https%3A//developer.mozilla.org") ); // 表示結果: "https://developer.mozilla.org" +</pre> +<h2 id="Specification" name="Specification">仕様</h2> +<p>{{DOM0}} 但し、ECMA-262 の非標準化セクションで言及されています。</p> +<h2 id="See_also" name="See_also">関連情報</h2> +<ul> + <li>{{domxref("window.escape")}}</li> + <li><a href="/ja/docs/JavaScript/Reference/Global_Functions/encodeURIComponent"><code>decodeURIComponent</code></a></li> +</ul> diff --git a/files/ja/conflicting/web/javascript/reference/global_objects/webassembly/instance/index.html b/files/ja/conflicting/web/javascript/reference/global_objects/webassembly/instance/index.html new file mode 100644 index 0000000000..fedccef945 --- /dev/null +++ b/files/ja/conflicting/web/javascript/reference/global_objects/webassembly/instance/index.html @@ -0,0 +1,64 @@ +--- +title: WebAssembly.Instance.prototype +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance +translation_of_original: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/prototype +--- +<div>{{JSRef}} {{SeeCompatTable}}</div> + +<p><code><strong>WebAssembly.Instance</strong></code><strong><code>.prototype</code></strong> プロパティは {{jsxref("WebAssembly.Instance()")}} コンストラクタのプロトタイプを表します。</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="説明">説明</h2> + +<p>全ての {{jsxref("WebAssembly.Instance")}} インスタンスは <code>Instance.prototype</code> を継承します。{{jsxref("WebAssembly.Instance()")}} コンストラクタのプロトタイプオブジェクトは全ての {{jsxref( "WebAssembly.Instance")}} インスタンスに影響するように変更可能です。 </p> + +<h2 id="プロパティ">プロパティ</h2> + +<dl> + <dt><code>Instance.prototype.constructor</code></dt> + <dd>このオブジェクトのインスタンスを生成した関数を返します。デフォルトでは {{jsxref("WebAssembly.Instance()")}} コンストラクタです。</dd> + <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/exports">Instance.prototype.exports</a></code> {{readonlyinline}}</dt> + <dd>WebAssembly モジュールインスタンスからエクスポートされた全ての関数をメンバとして持つオブジェクトを返します。これらは、JavaScriptからアクセスして使用することができます。</dd> +</dl> + +<h2 id="メソッド">メソッド</h2> + +<p>なし。</p> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('WebAssembly JS', '#webassemblymodule-objects', 'WebAssembly.Module()')}}</td> + <td>{{Spec2('WebAssembly JS')}}</td> + <td>初回ドラフト定義</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2> + +<div> + + +<p>{{Compat("javascript.builtins.WebAssembly.Instance.prototype")}}</p> +</div> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li>{{jsxref("WebAssembly.Instance()")}}</li> + <li><a href="/ja/docs/WebAssembly">WebAssembly</a> overview page</li> + <li><a href="/ja/docs/WebAssembly/Concepts">WebAssemblyのコンセプト</a></li> + <li><a href="/ja/docs/WebAssembly/Using_the_JavaScript_API">WebAssembly JavaScript API を使用する</a></li> +</ul> diff --git a/files/ja/conflicting/web/javascript/reference/global_objects/webassembly/memory/index.html b/files/ja/conflicting/web/javascript/reference/global_objects/webassembly/memory/index.html new file mode 100644 index 0000000000..6d837f2f73 --- /dev/null +++ b/files/ja/conflicting/web/javascript/reference/global_objects/webassembly/memory/index.html @@ -0,0 +1,71 @@ +--- +title: WebAssembly.Memory.prototype +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/prototype +tags: + - JavaScript + - Property + - Prototype + - WebAssembly + - memory +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory +translation_of_original: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/prototype +--- +<div>{{JSRef}} {{SeeCompatTable}}</div> + +<p><code><strong>WebAssembly.Memory</strong></code><strong><code>.prototype</code></strong> プロパティは {{jsxref("WebAssembly.Memory()")}} コンストラクタのプロトタイプを表します。</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="説明">説明</h2> + +<p>全ての {{jsxref("WebAssembly.Memory")}} インスタンスは <code>Memory.prototype</code> を継承します。 {{jsxref("WebAssembly.Memory()")}} コンストラクタのプロトタイプオブジェクトは全ての {{jsxref( "WebAssembly.Memory")}} インスタンスに影響するように変更可能です。</p> + +<h2 id="プロパティ">プロパティ</h2> + +<dl> + <dt><code>Memory.prototype.constructor</code></dt> + <dd>このオブジェクトのインスタンスを生成した関数を返します。デフォルトでは {{jsxref("WebAssembly.Memory()")}} コンストラクタです。</dd> + <dt>{{jsxref("WebAssembly/Memory/buffer","Memory.prototype.buffer")}}</dt> + <dd>メモリーに格納されているバッファを返すアクセサプロパティ。</dd> + <dt> + <h2 id="メソッド">メソッド</h2> + </dt> + <dt>{{jsxref("WebAssembly/Memory/grow","Memory.prototype.grow()")}}</dt> + <dd>指定した WebAssembly ページの数 (64KBを1単位とする) で <code>Memory</code> インスタンスのサイズを増やします。</dd> +</dl> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('WebAssembly JS', '#webassemblymemory-objects', 'Memory')}}</td> + <td>{{Spec2('WebAssembly JS')}}</td> + <td>初回ドラフト定義</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2> + +<div> + + +<p>{{Compat("javascript.builtins.WebAssembly.Memory.prototype")}}</p> +</div> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li>{{jsxref("WebAssembly.Memory()")}}</li> + <li><a href="/ja/docs/WebAssembly">WebAssembly</a> overview page</li> + <li><a href="/ja/docs/WebAssembly/Concepts">WebAssemblyのコンセプト</a></li> + <li><a href="/ja/docs/WebAssembly/Using_the_JavaScript_API">WebAssembly JavaScript API を使用する</a></li> +</ul> diff --git a/files/ja/conflicting/web/javascript/reference/global_objects/webassembly/table/index.html b/files/ja/conflicting/web/javascript/reference/global_objects/webassembly/table/index.html new file mode 100644 index 0000000000..84709eb736 --- /dev/null +++ b/files/ja/conflicting/web/javascript/reference/global_objects/webassembly/table/index.html @@ -0,0 +1,75 @@ +--- +title: WebAssembly.Table.prototype +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/prototype +tags: + - JavaScript + - Property + - Prototype + - WebAssembly + - table +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table +translation_of_original: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/prototype +--- +<div>{{JSRef}} {{SeeCompatTable}}</div> + +<p><code><strong>WebAssembly.Table</strong></code><strong><code>.prototype</code></strong> プロパティは {{jsxref("WebAssembly.Table()")}} コンストラクタのプロトタイプを表します。</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="説明">説明</h2> + +<p>全ての {{jsxref("WebAssembly.Table")}} インスタンスは <code>Table.prototype</code> を継承します。{{jsxref("WebAssembly.Table()")}} コンストラクタのプロトタイプオブジェクトは全ての {{jsxref( "WebAssembly.Table")}} インスタンスに影響するように変更可能です。</p> + +<h2 id="プロパティ">プロパティ</h2> + +<dl> + <dt><code>Table.prototype.constructor</code></dt> + <dd>このオブジェクトのインスタンスを生成した関数を返します。デフォルトでは {{jsxref("WebAssembly.Table()")}} コンストラクタです。</dd> + <dt>{{jsxref("WebAssembly/Table/length","Table.prototype.length")}}</dt> + <dd>テーブルの長さを返します。すなわち、要素数です。</dd> + <dt> + <h2 id="メソッド">メソッド</h2> + </dt> + <dt>{{jsxref("WebAssembly/Table/get","Table.prototype.get()")}}</dt> + <dd>アクセサ関数。インデックスから格納された要素を取得します。</dd> + <dt>{{jsxref("WebAssembly/Table/grow","Table.prototype.grow()")}}</dt> + <dd>指定した要素数で Table インスタンスを拡張します。</dd> + <dt>{{jsxref("WebAssembly/Table/set","Table.prototype.set()")}}</dt> + <dd>指定したインデックスに要素を格納します。</dd> +</dl> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('WebAssembly JS', '#webassemblytable-objects', 'Table')}}</td> + <td>{{Spec2('WebAssembly JS')}}</td> + <td>初回ドラフト定義</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2> + +<div> + + +<p>{{Compat("javascript.builtins.WebAssembly.Table.prototype")}}</p> +</div> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li>{{jsxref("WebAssembly.Table")}}</li> + <li><a href="/ja/docs/WebAssembly">WebAssembly</a> overview page</li> + <li><a href="/ja/docs/WebAssembly/Concepts">WebAssemblyのコンセプト</a></li> + <li><a href="/ja/docs/WebAssembly/Using_the_JavaScript_API">WebAssembly JavaScript API を使用する</a></li> +</ul> diff --git a/files/ja/conflicting/web/javascript/reference/lexical_grammar/index.html b/files/ja/conflicting/web/javascript/reference/lexical_grammar/index.html new file mode 100644 index 0000000000..fabc275890 --- /dev/null +++ b/files/ja/conflicting/web/javascript/reference/lexical_grammar/index.html @@ -0,0 +1,89 @@ +--- +title: 予約語 +slug: Web/JavaScript/Reference/Reserved_Words +tags: + - JavaScript +translation_of: Web/JavaScript/Reference/Lexical_grammar#Keywords +translation_of_original: Web/JavaScript/Reference/Reserved_Words +--- +<p>以下は予約語であり、変数、関数、メソッド、あるいはオブジェクトの識別子として用いることはできません。以下は <a href="/ja/docs/ECMAScript">ECMAScript</a> の仕様で既存のキーワードとして予約されているものです。</p> + +<div class="threecolumns"> +<ul> + <li><code><a href="/ja/docs/JavaScript/Reference/Statements/break" title="JavaScript/Reference/Statements/break">break</a></code></li> + <li><code><a href="/ja/docs/JavaScript/Reference/Statements/switch" title="JavaScript/Reference/Statements/switch">case</a></code></li> + <li><code><a href="/ja/docs/JavaScript/Reference/Statements/try...catch" title="JavaScript/Reference/Statements/try...catch">catch</a></code></li> + <li><code><a href="/ja/docs/JavaScript/Reference/Statements/continue" title="JavaScript/Reference/Statements/continue">continue</a></code></li> + <li><code><a href="/ja/docs/JavaScript/Reference/Statements/debugger" title="JavaScript/Reference/Statements/debugger">debugger</a></code></li> + <li><code><a href="/ja/docs/JavaScript/Reference/Statements/switch" title="JavaScript/Reference/Statements/switch">default</a></code></li> + <li><code><a href="/ja/docs/JavaScript/Reference/Operators/delete" title="JavaScript/Reference/Operators/delete">delete</a></code></li> + <li><code><a href="/ja/docs/JavaScript/Reference/Statements/do...while" title="JavaScript/Reference/Statements/do...while">do</a></code></li> + <li><code><a href="/ja/docs/JavaScript/Reference/Statements/if...else" title="JavaScript/Reference/Statements/if...else">else</a></code></li> + <li><code><a href="/ja/docs/JavaScript/Reference/Statements/try...catch" title="JavaScript/Reference/Statements/try...catch">finally</a></code></li> + <li><code><a href="/ja/docs/JavaScript/Reference/Statements/for" title="JavaScript/Reference/Statements/for">for</a></code></li> + <li><code><a href="/ja/docs/JavaScript/Reference/Statements/function" title="JavaScript/Reference/Statements/function">function</a></code></li> + <li><code><a href="/ja/docs/JavaScript/Reference/Statements/if...else" title="JavaScript/Reference/Statements/if...else">if</a></code></li> + <li><code><a href="/ja/docs/JavaScript/Reference/Statements/for...in" title="JavaScript/Reference/Statements/for...in">in</a></code></li> + <li><code><a href="/ja/docs/JavaScript/Reference/Operators/instanceof" title="JavaScript/Reference/Operators/instanceof">instanceof</a></code></li> + <li><code><a href="/ja/docs/JavaScript/Reference/Operators/new" title="JavaScript/Reference/Operators/new">new</a></code></li> + <li><code><a href="/ja/docs/JavaScript/Reference/Statements/return" title="JavaScript/Reference/Statements/return">return</a></code></li> + <li><code><a href="/ja/docs/JavaScript/Reference/Statements/switch" title="JavaScript/Reference/Statements/switch">switch</a></code></li> + <li><code><a href="/ja/docs/JavaScript/Reference/Operators/this" title="JavaScript/Reference/Operators/this">this</a></code></li> + <li><code><a href="/ja/docs/JavaScript/Reference/Statements/throw" title="JavaScript/Reference/Statements/throw">throw</a></code></li> + <li><code><a href="/ja/docs/JavaScript/Reference/Statements/try...catch" title="JavaScript/Reference/Statements/try...catch">try</a></code></li> + <li><code><a href="/ja/docs/JavaScript/Reference/Operators/typeof" title="JavaScript/Reference/Operators/typeof">typeof</a></code></li> + <li><code><a href="/ja/docs/JavaScript/Reference/Statements/var" title="JavaScript/Reference/Statements/var">var</a></code></li> + <li><code><a href="/ja/docs/JavaScript/Reference/Operators/void" title="JavaScript/Reference/Operators/void">void</a></code></li> + <li><code><a href="/ja/docs/JavaScript/Reference/Statements/while" title="JavaScript/Reference/Statements/while">while</a></code></li> + <li><code><a href="/ja/docs/JavaScript/Reference/Statements/with" title="JavaScript/Reference/Statements/with">with</a></code></li> +</ul> +</div> + +<h2 id="Words_reserved_for_possible_future_use" name="Words_reserved_for_possible_future_use">将来の使用を見越した予約語</h2> + +<p>以下は ECMAScript の仕様で将来のキーワードとして予約されているものです。現在は特別な機能を持っていませんが、将来機能を持つときのために、識別子として使用できません。このキーワードは、厳格モード、非厳格モードの両方で使用できません。</p> + +<div class="note"><strong>注記:</strong> Firefox 5 (JavaScript 1.8.6) より以前では、これらのキーワードは厳格モードでないときには使用できました。この ECMAScript 違反は Firefox 5 で修正されました。</div> + +<div class="threecolumns"> +<ul> + <li><code>class</code></li> + <li><code>enum</code></li> + <li><code><a href="/ja/docs/JavaScript/Reference/Statements/export" title="JavaScript/Reference/Statements/export">export</a></code></li> + <li><code>extends</code></li> + <li><code><a href="/ja/docs/JavaScript/Reference/Statements/import" title="JavaScript/Reference/Statements/import">import</a></code></li> + <li><code>super</code></li> +</ul> +</div> + +<p>以下は <a href="/ja/docs/JavaScript/Reference/Functions_and_function_scope/Strict_mode" title="JavaScript/Strict mode">厳格モードのコード</a> として実行されたときに 、ECMAScript の仕様で将来のキーワードとして 予約されているものです。ただし、JavaScript 1.7 以上では <code>let</code> と <code>yield</code> は伝統的な Mozilla 特有の機能を持っています。</p> + +<div class="threecolumns"> +<ul> + <li><code>implements</code></li> + <li><code>interface</code></li> + <li><code><a href="/ja/docs/JavaScript/Reference/Statements/let" title="JavaScript/Reference/Statements/let">let</a></code></li> + <li><code>package</code></li> + <li><code>private</code></li> + <li><code>protected</code></li> + <li><code>public</code></li> + <li><code>static</code></li> + <li><code><a href="/ja/docs/JavaScript/Reference/Statements/yield" title="JavaScript/Reference/Statements/yield">yield</a></code></li> +</ul> +</div> + +<p><code><a href="/ja/docs/JavaScript/Reference/Statements/const" title="JavaScript/Reference/Statements/const">const</a></code> は ECMAScript の仕様によって将来のキーワードとして予約されていますが、Mozilla やほとんどの他のブラウザが非標準の拡張として実装していることに注意してください。さらに、 <a href="/ja/docs/JavaScript/Reference/Statements/export" title="JavaScript/Reference/Statements/export">export</a> と <a href="/ja/docs/JavaScript/Reference/Statements/import" title="JavaScript/Reference/Statements/import">import</a> はかつて Mozilla で実装されていましたが、現在では予約語となっています。</p> + +<p>加えて、 <code>null</code> 、 <code>true</code> 、 <code>false</code> リテラルは ECMAScript の仕様で予約されています。</p> + +<h2 id="Reserved_word_usage" name="Reserved_word_usage">予約語の利用</h2> + +<p>実際に、予約語は識別子のみに適用されます。<span class="comment-copy"><a href="http://es5.github.com/#A.1" rel="nofollow">es5.github.com/#A.1</a> の記述にあるように、これらは全て予約語を排除しない識別名です。</span></p> + +<p><span class="comment-copy"><code>a.import</code></span><br> + <span class="comment-copy"><code>a["import"]</code></span><br> + <span class="comment-copy"><code>a = { import: "test" }</code>.</span></p> + +<p><span class="comment-copy">反対に、以下は識別子であるので違反です。識別子は関数宣言や関数式に使用されます。</span></p> + +<p><span class="comment-copy"><code>function import() {}</code></span></p> diff --git a/files/ja/conflicting/web/javascript/reference/operators/index.html b/files/ja/conflicting/web/javascript/reference/operators/index.html new file mode 100644 index 0000000000..5010c8eb89 --- /dev/null +++ b/files/ja/conflicting/web/javascript/reference/operators/index.html @@ -0,0 +1,232 @@ +--- +title: 比較演算子 +slug: Web/JavaScript/Reference/Operators/Comparison_Operators +tags: + - JavaScript + - Operator + - Reference + - 演算子 +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Comparison_Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>JavaScript には、厳密な比較と型変換の比較の両方があります。厳密な比較 (例: <code>===</code>) は、オペランドが同じ型で、内容も一致している場合にのみ真になります。もっとよく使用される抽象的な比較 (例: <code>==</code>) は、比較する前にオペランドを同じ型に変換します。抽象的な関係比較 (例: <code><=</code>) では、比較前にまずオペランドがプリミティブ型に変換され、それから同じ型に変換されます。</p> + +<p>文字列は Unicode 値を使用した標準的な辞書順に基づいて比較されます。</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-equality.html")}}</div> + +<div> +<div>{{EmbedInteractiveExample("pages/js/expressions-strict-equality.html")}}</div> +</div> + +<div></div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<p>比較の機能は以下のとおりです。</p> + +<ul> + <li>2 つの文字列が厳密に等しくなるのは、字の順序が等しく、長さが等しく、対応する位置の文字が等しいときです。</li> + <li>2 つの数字が厳密に等しくなるのは、数値的に等しいとき (数字の値が等しいとき) です。<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="NaN">NaN</a> は、どんなものとも (Nan とさえも) 等しくなりません。プラスゼロとマイナスゼロは互いと等しくなります。</li> + <li>2 つの論理オペランドが厳密に等しくなるのは、どちらも <code>true</code> か、どちらも <code>false</code> のときです。</li> + <li>2 つの異なるオブジェクトは、厳密な比較でも抽象的な比較でも等しくなりません。</li> + <li>オブジェクト比較が等しくなるのは、オペランドが同じオブジェクトを参照しているときだけです。</li> + <li>Null と Undefined 型は、自分自身と厳密に等しく、また互いに抽象的に等しくなります。</li> +</ul> + +<h2 id="Equality_operators" name="Equality_operators">等価演算子</h2> + +<h3 id="Equality" name="Equality">等価 (==)</h3> + +<p>等価演算子は、2 つのオペランドが<strong>同じ型でないならば</strong>オペランドを変換して、それから厳密な比較を行います。<strong>両方のオペランドがオブジェクトならば</strong>、 JavaScript は内部参照を比較するので、オペランドがメモリ内の同じオブジェクトを参照するときに等しくなります。</p> + +<h4 id="Syntax" name="Syntax">構文</h4> + +<pre class="syntaxbox notranslate">x == y +</pre> + +<h4 id="Examples" name="Examples">例</h4> + +<pre class="brush: js notranslate">1 == 1 // true +'1' == 1 // true +1 == '1' // true +0 == false // true +0 == null // false +var object1 = {'key': 'value'}, object2 = {'key': 'value'}; +object1 == object2 // false +0 == undefined // false +null == undefined // true +</pre> + +<h3 id="Inequality" name="Inequality">不等価 (!=)</h3> + +<p>不等価演算子は、オペランド同士が等しくないならば真を返します。2 つのオペランドが<strong>同じ型でないならば</strong>、JavaScript は適切な型にオペランドを変換して比較しようとします。<strong>両方のオペランドがオブジェクトならば</strong>、JavaScript は内部参照を比較するので、オペランドがメモリ内の異なるオブジェクトを参照するときには等しくなりません。</p> + +<h4 id="Syntax_2" name="Syntax_2">構文</h4> + +<pre class="syntaxbox notranslate">x != y</pre> + +<h4 id="Examples_2" name="Examples_2">例</h4> + +<pre class="brush: js notranslate">1 != 2 // true +1 != '1' // false +1 != "1" // false +1 != true // false +0 != false // false +</pre> + +<h3 id="Identity" name="Identity">一致 / 厳密等価 (===)</h3> + +<p>厳密等価演算子は、<strong>型変換なしで</strong>オペランド同士が (上に示した通り) 厳密に等しければ真を返します。</p> + +<h4 id="Syntax_3" name="Syntax_3">構文</h4> + +<pre class="syntaxbox notranslate">x === y</pre> + +<h4 id="Examples_3" name="Examples_3">例</h4> + +<pre class="brush: js notranslate">3 === 3 // true +3 === '3' // false +var object1 = {'key': 'value'}, object2 = {'key': 'value'}; +object1 === object2 //false</pre> + +<h3 id="Nonidentity" name="Nonidentity">不一致 / 厳密不等価 (!==)</h3> + +<p>厳密不等価演算子は、<strong>オペランド同士が等しくないか、型が等しくない、あるいはその両方</strong>ならば真を返します。</p> + +<h4 id="Syntax_4" name="Syntax_4">構文</h4> + +<pre class="syntaxbox notranslate">x !== y</pre> + +<h4 id="Examples_4" name="Examples_4">例</h4> + +<pre class="brush: js notranslate">3 !== '3' // true +4 !== 3 // true +</pre> + +<h2 id="Relational_operators" name="Relational_operators">関係演算子</h2> + +<p>これらの演算子のそれぞれは、比較が行われる前に、そのオペランドをプリミティブに{{Glossary("Type_coercion", "型強制")}}します。両方とも文字列として終わる場合は、辞書順で比較され、そうでない場合は数値に変換されて比較されます。 <code>NaN</code> との比較は常に <code>false</code> を生み出します。</p> + +<h3 id="Greater_than_operator" name="Greater_than_operator">大なり演算子 (>)</h3> + +<p>大なり演算子は、左オペランドが右オペランドより大きければ、真を返します。</p> + +<h4 id="Syntax_5" name="Syntax_5">構文</h4> + +<pre class="syntaxbox notranslate">x > y</pre> + +<h4 id="Examples_5" name="Examples_5">例</h4> + +<pre class="brush: js notranslate">4 > 3 // true +</pre> + +<h3 id="Greater_than_or_equal_operator" name="Greater_than_or_equal_operator">大なりイコール演算子 (>=)</h3> + +<p>大なりイコール演算子は、左オペランドが右オペランド以上ならば、真を返します。</p> + +<h4 id="Syntax_6" name="Syntax_6">構文</h4> + +<pre class="syntaxbox notranslate"> x >= y</pre> + +<h4 id="Examples_6" name="Examples_6">例</h4> + +<pre class="brush: js notranslate">4 >= 3 // true +3 >= 3 // true +</pre> + +<h3 id="Less_than_operator" name="Less_than_operator">小なり演算子 (<)</h3> + +<p>小なり演算子は、左オペランドが右オペランドより小さければ、真を返します。</p> + +<h4 id="Syntax_7" name="Syntax_7">構文</h4> + +<pre class="syntaxbox notranslate"> x < y</pre> + +<h4 id="Examples_7" name="Examples_7">例</h4> + +<pre class="brush: js notranslate">3 < 4 // true +</pre> + +<h3 id="Less_than_or_equal_operator" name="Less_than_or_equal_operator">小なりイコール演算子 (<=)</h3> + +<p>小なりイコール演算子は、左オペランドが右オペランド以下ならば、真を返します。</p> + +<h4 id="Syntax_8" name="Syntax_8">構文</h4> + +<pre class="syntaxbox notranslate"> x <= y</pre> + +<h4 id="Examples_8" name="Examples_8">例</h4> + +<pre class="brush: js notranslate">3 <= 4 // true +3 <= 3 // true +</pre> + +<h2 id="Using_the_equality_operators" name="Using_the_equality_operators">等価演算子の使用</h2> + +<p>標準等価演算子 (<code>==</code> と <code>!=</code>) は 2 つのオペランドの比較に<a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3">抽象的等価比較アルゴリズム</a>を使用します。オペランドの型が異なる場合は、比較を行う前にそれらを同じ型に変換しようとします。例えば <code>5 == '5'</code> という式では、比較を行う前に右オペランドの文字列を数値に変換します。</p> + +<p>厳密等価演算子 (<code>===</code> と <code>!==</code>) は<a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.6">厳密等価比較アルゴリズム</a>を使用して、オペランドの型が同一かどうかに関する比較も行います。オペランドの型が異なれば、例えば <code>5</code> と <code>'5'</code> の比較では、同一性比較 <code>5 !== '5'</code> は <code>true</code> と評価され、 <code>5 === '5'</code> のチェックは <code>false</code> 評価されます。</p> + +<p>厳密等価演算子を使うのは、オペランドが特定の型の特定の値でなければならない場合、言い換えればオペランドの正確な型が重要な場合です。それ以外では、2 つのオペランドが同じ型でなくても比較が可能になる、標準的な等価演算子を使えます。</p> + +<p>比較に型の変換が関わるとき (つまり厳密でない比較のとき)、 JavaScript は以下のように {{jsxref("String")}}, {{jsxref("Number")}}, {{jsxref("Boolean")}}, {{jsxref("Object")}} 型のオペランドを変換します。</p> + +<ul> + <li>数値と文字列を比較するとき、文字列は数値に変換されます。 JavaScript は文字列の数値リテラルを <code>Number</code> 型の値に変換しようとします。まず、文字列の数値リテラルから数学的な値を引き出します。次に、その値を最も近い <code>Number</code> 型に丸めます。</li> + <li>もしオペランドの片方が <code>Boolean</code> ならば、その Boolean オペランドが <code>true</code> の場合 1 に、<code>false</code> の場合は +0 に変換されます。</li> + <li>オブジェクトを数値または文字列と比較すると、 JavaScript はそのオブジェクトの既定値を返そうとします。演算子は、オブジェクトの <code>valueOf</code> や <code>toString</code> といったメソッドを用いて、プリミティブな値、 <code>String</code> か <code>Number</code> の値に変換しようとします。変換に失敗したら、ランタイムエラーが発生します。</li> + <li>オブジェクトがプリミティブ値に変換されるのは、比較対象がプリミティブ値であるときだけです。両方のオペランドがオブジェクトなら、オブジェクトとして比較され、両方が同じオブジェクトを参照するときだけ真となります。</li> +</ul> + +<div class="note"><strong>メモ:</strong> String オブジェクトはオブジェクト型であり、文字列型ではありません！ String オブジェクトはほとんど使わないので、次の結果に驚くかもしれません。</div> + +<pre class="brush:js notranslate">// 両方のオペランドが文字列型 (すなわちプリミティブな文字列) なので、true +'foo' === 'foo' + +var a = new String('foo'); +var b = new String('foo'); + +// a と b はオブジェクト型で、異なるオブジェクトを参照しているので、false +a == b + +// a と b はオブジェクト型で、異なるオブジェクトを参照しているので、false +a === b + +// a と 'foo' は異なる型で、比較前にオブジェクト (a) は +// 文字列 'foo' に変換されるので、真 +a == 'foo'</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-equality-operators', 'Equality Operators')}}</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.operators.comparison")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Object.is()")}}</li> + <li>{{jsxref("Math.sign()")}}</li> + <li><a href="/ja/docs/Web/JavaScript/Equality_comparisons_and_sameness">等価性の比較とその使いどころ</a></li> +</ul> diff --git a/files/ja/conflicting/web/javascript/reference/operators/yield/index.html b/files/ja/conflicting/web/javascript/reference/operators/yield/index.html new file mode 100644 index 0000000000..69be44e8d9 --- /dev/null +++ b/files/ja/conflicting/web/javascript/reference/operators/yield/index.html @@ -0,0 +1,7 @@ +--- +title: yield +slug: Web/JavaScript/Reference/Statements/yield +translation_of: Web/JavaScript/Reference/Operators/yield +translation_of_original: Web/JavaScript/Reference/Statements/yield +--- +<p>『 <a href="/ja/docs/JavaScript/New_in_JavaScript/1.7">JavaScript 1.7 の新機能</a>』、『<a href="/ja/docs/JavaScript/Guide/Iterators_and_Generators">イテレータとジェネレータ</a>』 を参照して下さい。</p> diff --git a/files/ja/conflicting/web/javascript/reference/operators_f71733c8e7001a29c3ec40d8522a4aca/index.html b/files/ja/conflicting/web/javascript/reference/operators_f71733c8e7001a29c3ec40d8522a4aca/index.html new file mode 100644 index 0000000000..8b43c3de26 --- /dev/null +++ b/files/ja/conflicting/web/javascript/reference/operators_f71733c8e7001a29c3ec40d8522a4aca/index.html @@ -0,0 +1,295 @@ +--- +title: 論理演算子 +slug: Web/JavaScript/Reference/Operators/Logical_Operators +tags: + - JavaScript + - Operator +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Logical_Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<h2 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h2> + +<p>{{ 原語併記("論理演算子", "Logical operators") }} は、基本的に真偽（論理）値とともに用いられ真偽値を返します。しかし、<code>&&</code> および <code>||</code> 演算子は真偽値ではない値も使うことができるため、その場合は、真偽値ではない値を返すことがあります。その場合の考え方は以下の「説明」の欄の記載の通りとなります。</p> + +<h2 id="Description" name="Description">説明</h2> + +<p>論理演算子を以下の表で説明します。:</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>演算子</th> + <th>使用法</th> + <th>説明</th> + </tr> + <tr> + <td>論理 AND(<code>&&</code>)</td> + <td><code><em>expr1</em> && <em>expr2</em></code></td> + <td><code>expr1</code> を false と見ることができる場合は、<code>expr1</code> を返します。そうでない場合は、<code>expr2</code> を返します。したがって、真偽値と共に使われた場合、 演算対象の両方が true ならば、<code>&&</code> は、true を返し、そうでなければ、false を返します。</td> + </tr> + <tr> + <td>論理 OR (<code>||</code>)</td> + <td><code><em>expr1</em> || <em>expr2</em></code></td> + <td><code>expr1</code> を true と見ることができる場合は、<code>expr1</code> を返します。そうでない場合は、<code>expr2</code> を返します。したがって、真偽値と共に使われた場合、 演算対象のどちらかが true ならば、<code>||</code> は、true を返し、両方とも false の場合は、false を返します。</td> + </tr> + <tr> + <td>論理 NOT (<code>!</code>)</td> + <td><code>!<em>expr</em></code></td> + <td>単一の演算対象が true と見ることができる場合は、false を返します。そうでない場合は、true を返します。</td> + </tr> + </tbody> +</table> + +<p><code>true</code> に変換できる値は、いわゆる {{Glossary("truthy")}} です。<code>false</code> に変換できる値は、いわゆる {{Glossary("falsy")}} です。</p> + +<p><code>false</code> と見ることができる式の例は、null、0、空文字列 ("")、あるいは、<code>undefined</code> と評価されるものです。</p> + +<p><code>&&</code> と <code>||</code> 演算子が真偽値ではない値である演算対象とともに用いることができても、それらは、真偽演算子と考えることができます。なぜなら、それらの戻り値は、常に、真偽値と見ることができるからです。</p> + +<h3 id=".E3.82.B7.E3.83.A7.E3.83.BC.E3.83.88.E3.82.B5.E3.83.BC.E3.82.AD.E3.83.83.E3.83.88.E8.A9.95.E4.BE.A1" name=".E3.82.B7.E3.83.A7.E3.83.BC.E3.83.88.E3.82.B5.E3.83.BC.E3.82.AD.E3.83.83.E3.83.88.E8.A9.95.E4.BE.A1">ショートサーキット評価</h3> + +<p>論理演算子は左から右へ評価されるため、論理演算子で左辺を評価した時点で論理式の結果が確定した場合には右辺の評価を行わないことを、ショートサーキット評価といいます。例えば、A && Bという論理式があった場合、Aがfalseなら、その時点で式全体の結果はfalseで確定するため、Bがどうであるかについてはチェックしません。:</p> + +<ul> + <li><code>false && (<em>anything</em>)</code> をショートサーキット評価すると、false になります。</li> + <li><code>true || (<em>anything</em>)</code> をショートサーキット評価すると、true になります。</li> +</ul> + +<p> 上記の式の anything の部分は評価されません。また、<strong>上記の式の anything の部分は (括弧で示しているとおり) ひとつの論理式ですので注意してください。</strong></p> + +<p>例えば、以下の 2 つの関数は等価です。</p> + +<pre class="brush: js">function shortCircuitEvaluation() { + doSomething() || doSomethingElse() +} + +function equivalentEvaluation() { + var flag = doSomething(); + if (!flag) { + doSomethingElse(); + } +} +</pre> + +<p>しかし、以下の式は等価ではありません。これは<a href="/ja/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">演算子の優先順位</a>のためであり、右側の演算子をひとつの式にする (必要に応じて括弧でグループ化する) 必要性の重要度を高めています。</p> + +<pre class="brush: js">false && true || true // true を返す +false && (true || true) // false を返す</pre> + +<h3 id=".E8.AB.96.E7.90.86_AND_.28&&.29" name=".E8.AB.96.E7.90.86_AND_.28&&.29">論理 AND (<code>&&</code>)</h3> + +<p>以下のコードは、<code>&&</code> (論理 AND) 演算子の例を示しています。</p> + +<pre class="brush: js">a1 = true && true // t && t true を返します。 +a2 = true && false // t && f false を返します。 +a3 = false && true // f && t false を返します。 +a4 = false && (3 == 4) // f && f false を返します。 +a5 = "Cat" && "Dog" // t && t "Dog" を返します。 +a6 = false && "Cat" // f && t false を返します。 +a7 = "Cat" && false // t && f false を返します。 +</pre> + +<h3 id=".E8.AB.96.E7.90.86_OR_.28||.29" name=".E8.AB.96.E7.90.86_OR_.28||.29">論理 OR (<code>||</code>)</h3> + +<p>以下のコードは、<code>||</code> (論理 OR) 演算子の例を示しています。</p> + +<pre class="brush: js">o1 = true || true // t || t true を返します。 +o2 = false || true // f || t true を返します。 +o3 = true || false // t || f true を返します。 +o4 = false || (3 == 4) // f || f false を返します。 +o5 = "Cat" || "Dog" // t || t "Cat" を返します。 +o6 = false || "Cat" // f || t "Cat" を返します。 +o7 = "Cat" || false // t || f "Cat" を返します。 +</pre> + +<h3 id=".E8.AB.96.E7.90.86_NOT_.28.21.29" name=".E8.AB.96.E7.90.86_NOT_.28.21.29">論理 NOT (<code>!</code>)</h3> + +<p>以下のコードは、<code>!</code> (論理 NOT) 演算子の例を示しています。</p> + +<pre class="brush: js">n1 = !true // !t false を返します。 +n2 = !false // !f true を返します。 +n3 = !"Cat" // !t false を返します。 +</pre> + +<h3 id="Conversion_rules" name="Conversion_rules">変換規則</h3> + +<h4 id="Converting_AND_to_OR" name="Converting_AND_to_OR">AND から OR への変換</h4> + +<p>Boolean について以下の演算を行います:</p> + +<pre class="brush: js">bCondition1 && bCondition2</pre> + +<p>これは以下の演算と等価です:</p> + +<pre class="brush: js">!(!bCondition1 || !bCondition2)</pre> + +<h4 id="Converting_OR_to_AND" name="Converting_OR_to_AND">OR から AND への変換</h4> + +<p>Boolean について以下の演算を行います:</p> + +<pre class="brush: js">bCondition1 || bCondition2</pre> + +<p>これは以下の演算と等価です:</p> + +<pre class="brush: js">!(!bCondition1 && !bCondition2)</pre> + +<h4 id="Converting_between_NOTs" name="Converting_between_NOTs">NOT 間の変換</h4> + +<p>Boolean について以下の演算を行います:</p> + +<pre class="brush: js">!!bCondition</pre> + +<p>これは以下の演算と等価です:</p> + +<pre class="brush: js">bCondition</pre> + +<h3 id="Removing_nested_parentheses" name="Removing_nested_parentheses">入れ子の括弧を削除する</h3> + +<p>論理演算子は左から右へ評価されるため、複雑な式の中にある括弧をいくつかの規則に従って削除することができます。</p> + +<h4 id="Removing_nested_AND" name="Removing_nested_AND">入れ子の AND を削除する</h4> + +<p>Boolean について以下の複雑な演算を行います:</p> + +<pre class="brush: js">bCondition1 || (bCondition2 && bCondition3)</pre> + +<p>これは以下の演算と等価です:</p> + +<pre class="brush: js">bCondition1 || bCondition2 && bCondition3</pre> + +<h4 id="Removing_nested_OR" name="Removing_nested_OR">入れ子の OR を削除する</h4> + +<p>Boolean について以下の複雑な演算を行います:</p> + +<pre class="brush: js">bCondition1 && (bCondition2 || bCondition3)</pre> + +<p>これは以下の演算と等価です:</p> + +<pre class="brush: js">!(!bCondition1 || !bCondition2 && !bCondition3)</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>最初期の定義</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.11')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>仕様書内のいくつかのセクションで定義: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.9">Logical NOT Operator</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.11">Binary Logical Operators</a></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-binary-logical-operators')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>仕様書内のいくつかのセクションで定義: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-logical-not-operator">Logical NOT Operator</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-binary-logical-operators">Binary Logical Operators</a></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-binary-logical-operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>仕様書内のいくつかのセクションで定義: <a href="http://tc39.github.io/ecma262/#sec-logical-not-operator">Logical NOT Operator</a>, <a href="http://tc39.github.io/ecma262/#sec-binary-logical-operators">Binary Logical Operators</a></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>論理 AND (<code>&&</code>)</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>論理 OR (<code>||</code>)</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>論理 NOT (<code>!</code>)</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>論理 AND (<code>&&</code>)</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>論理 OR (<code>||</code>)</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>論理 NOT (<code>!</code>)</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">ビット演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a></li> +</ul> diff --git a/files/ja/conflicting/web/opensearch/index.html b/files/ja/conflicting/web/opensearch/index.html new file mode 100644 index 0000000000..f7c679aae4 --- /dev/null +++ b/files/ja/conflicting/web/opensearch/index.html @@ -0,0 +1,73 @@ +--- +title: ウェブページからの検索エンジンの追加 +slug: Adding_search_engines_from_web_pages +tags: + - Add-ons + - Search plugins +translation_of: Web/OpenSearch +translation_of_original: Web/API/Window/sidebar/Adding_search_engines_from_Web_pages +--- +<p>Firefox では JavaScript コードから検索プラグインをインストールすることができ、<a href="ja/Creating_OpenSearch_plugins_for_Firefox">OpenSearch</a> と Sherlock という 2 つの検索プラグインフォーマットをサポートしています。</p> + +<div class="note"><strong>注意</strong>: Firefox 2 からは、OpenSearch が Firefox の検索フォーマットとして推奨されています。Sherlock のサポートは将来廃止する予定です ({{bug(862137)}})。</div> + +<p>JavaScript コードが検索プラグインをインストールしようとすると、Firefox はユーザにプラグインのインストールを許可するか尋ねる警告を表示します。</p> + +<p>{{ 英語版章題("Installing OpenSearch plugins") }}</p> + +<h2 id="OpenSearch_.E3.83.97.E3.83.A9.E3.82.B0.E3.82.A4.E3.83.B3.E3.81.AE.E3.82.A4.E3.83.B3.E3.82.B9.E3.83.88.E3.83.BC.E3.83.AB" name="OpenSearch_.E3.83.97.E3.83.A9.E3.82.B0.E3.82.A4.E3.83.B3.E3.81.AE.E3.82.A4.E3.83.B3.E3.82.B9.E3.83.88.E3.83.BC.E3.83.AB">OpenSearch プラグインのインストール</h2> + +<p>OpenSearch プラグインをインストールするには、<code>window.external.AddSearchProvider()</code> DOM メソッドを使う必要があります。このメソッドの構文はこのようになります。</p> + +<pre class="eval">window.external.AddSearchProvider(<em>engineURL</em>); +</pre> + +<p><em>engineURL</em>は検索プラグイン XML ファイルへの絶対 URL です。</p> + +<div class="note"><strong>注意:</strong> OpenSearch は Firefox 2 以降でのみサポートされています。</div> + +<p>{{ 英語版章題("Installing Sherlock plugins") }}</p> + +<h2 id="Sherlock_.E3.83.97.E3.83.A9.E3.82.B0.E3.82.A4.E3.83.B3.E3.81.AE.E3.82.A4.E3.83.B3.E3.82.B9.E3.83.88.E3.83.BC.E3.83.AB" name="Sherlock_.E3.83.97.E3.83.A9.E3.82.B0.E3.82.A4.E3.83.B3.E3.81.AE.E3.82.A4.E3.83.B3.E3.82.B9.E3.83.88.E3.83.BC.E3.83.AB">Sherlock プラグインのインストール</h2> + +<div>{{obsolete_header}}</div> + +<div class="warning"> +<p>window.sidebar.addSearchEngine のサポートは <a href="/ja/docs/Mozilla/Firefox/Releases/44">Firefox 44</a> で廃止しました。</p> +</div> + +<p>Sherlock プラグインをインストールするには、<code>window.sidebar.addSearchEngine()</code> を呼び出す必要があり、その構文は以下のとおりです。</p> + +<pre class="eval">window.sidebar.addSearchEngine(<em>engineURL</em>,<em>iconURL</em>,<em>suggestedName</em>,<em>suggestedCategory</em>); +</pre> + +<ul> + <li><code>engineURL</code> パラメータはインストールする Sherlock プラグイン (".src" ファイル) の URL です。</li> + <li><code>iconURL</code> はプラグインに関連付けるアイコンの URL です。</li> + <li><code>suggestedName</code> パラメータはプラグインのインストールの許可をユーザに尋ねるときにだけ使用します。つまり 「<em>engineURL</em> から<em>suggestedName</em> をインストールしますか?」 のようなメッセージが表示されるでしょう。</li> + <li><code>suggestedCategory</code> パラメータは使われていません。空の文字列 (<code>""</code>) か <code>null</code> を指定すべきです。</li> +</ul> + +<p>Sherlock の詳細は <a class="external" href="http://developer.apple.com/macosx/sherlock/" rel="freelink">http://developer.apple.com/macosx/sherlock/</a> を参照ください。</p> + +<p>{{ 英語版章題("Browser search engine capability detection") }}</p> + +<h2 id=".E3.83.96.E3.83.A9.E3.82.A6.E3.82.B6.E3.81.AE.E6.A4.9C.E7.B4.A2.E3.82.A8.E3.83.B3.E3.82.B8.E3.83.B3.E6.A9.9F.E8.83.BD.E3.81.AE.E6.A4.9C.E5.87.BA" name=".E3.83.96.E3.83.A9.E3.82.A6.E3.82.B6.E3.81.AE.E6.A4.9C.E7.B4.A2.E3.82.A8.E3.83.B3.E3.82.B8.E3.83.B3.E6.A9.9F.E8.83.BD.E3.81.AE.E6.A4.9C.E5.87.BA">ブラウザの検索エンジン機能の検出</h2> + +<p>検索エンジンを追加するための API は Firefox 1.5 から Firefox 2 までに変更されており、また Firefox 1.5 は OpenSearch 記述ファイルをサポートしていません。このため、検索エンジンを追加する時に後方互換性を維持したい場合、すなわち Firefox 1.5, Firefox 2.0, IE7 で動作するようにしたい場合、Web ページの製作者は Sherlock と OpenSearch の両方のフォーマットに対応し、またブラウザの機能を適宜検出しなければなりません。次のコード片はこういったことを行う一つの例です。</p> + +<pre class="brush: js">function installSearchEngine() { + if (window.external && ("AddSearchProvider" in window.external)) { + // Firefox 2 と IE 7 では OpenSearch を使う + window.external.AddSearchProvider("<span class="nowiki">http://example.com/search-plugin.xml</span>"); + } else if (window.sidebar && ("addSearchEngine" in window.sidebar)) { + // Firefox 1.5 以下では Sherlock を使う + window.sidebar.addSearchEngine("<span class="nowiki">http://example.com/search-plugin.src</span>", + "<span class="nowiki">http://example.com/search-icon.png</span>", + "Search Plugin", ""); + } else { + // 検索エンジンはサポートされていない (IE 6, Opera など) + alert("No search engine support"); + } +} +</pre> diff --git a/files/ja/conflicting/web/progressive_web_apps/index.html b/files/ja/conflicting/web/progressive_web_apps/index.html new file mode 100644 index 0000000000..36724f3ba5 --- /dev/null +++ b/files/ja/conflicting/web/progressive_web_apps/index.html @@ -0,0 +1,77 @@ +--- +title: レスポンシブデザイン +slug: Web_Development/Mobile/Responsive_design +tags: + - Apps + - Mobile + - Responsive Design + - Web Development +translation_of: Web/Progressive_web_apps +translation_of_original: Web/Guide/Responsive_design +--- +<p>モバイル向けとデスクトップ向けの Web サイトの開発に対する <a href="/ja/docs/Web/Guide/Mobile/Separate_sites" title="Web development/Mobile/Separate sites">別々のサイト</a> 手法に関連する問題に対する反応として、比較的新しい (実際は <a href="http://www.alistapart.com/articles/dao/">とても古い</a>) アイディアが人気を集め始めています。ユーザーエージェントでの判別とは別れを告げ、かわりにクライアント側のブラウザの機能でページを対応させましょう。この手法は Ethan Marcotte のブログ記事 <a href="http://alistapart.com" title="http://alistapart.com">A List Apart</a> で紹介され、<a href="http://www.alistapart.com/articles/responsive-web-design/" style="line-height: 1.572;">レスポンシブ Web デザイン</a> として知られるようになりました。分離したサイト開発手法と同様に、レスポンシブ Web デザインにも短所があります。</p> + +<h2 id="長所">長所</h2> + +<p>最初は、モバイルサイトを作成するための手法として提案されたものではありませんでしたが、分離したモバイルサイトの代わりにレスポンシブデザインは最近、モバイル・フレンドリーに対する第一歩として多くの注目を浴び始めました。</p> + +<ol style="font-size: medium;"> + <li>デバイスごとに異なる Web サイトをメンテナンスする必要がなくなるため、時間と費用を削減できます。</li> + <li>レスポンシブデザインは、1 つの URL だけで、すべてのデバイスのページを表示できます。</li> + <li>モバイルとデスクトップの Web ページで 1 つの URL を使用しているため、ソーシャルシェアの統計 (Facebook の「いいね」、Twitter のツイート数、Google plus の +1) が分離されません。</li> + <li>レスポンシブデザインはユーザーエージェントを気に掛ける必要がありません。</li> +</ol> + +<p>この手法には本当に素晴らしい側面があります。ユーザーエージェント判別によらないため、サイトを分離する手法よりも柔軟性が高く、古くなりにくい点です。単純なサイトに対しては、他の選択肢よりも改修やメンテナンスが簡単です。</p> + +<h2 id="短所">短所</h2> + +<p>この手法に何も制限がないわけではありません。コンテンツがクライアント側の JavaScript で処理されるため、変更は最小限となることが推奨されます。一般に、同じ DOM を動作させるために、別々に 2 つの JavaScript を記述すると、劇的に悪化することも改善することもあります。これが、Web アプリケーションがこの手法に適応していない大きな理由です。</p> + +<p>もし <a href="http://www.smashingmagazine.com/2008/06/26/flexible-layouts-challenge-for-the-future/">フレキシブルなレイアウト</a> に対応していなければ、既存のサイトをレスポンシブデザインにするには、スタイルシートも書き直す必要があります。これは不幸中の幸いと言えます。レイアウトをレスポンシブデザインに対応することは、CSS を近代化しきれいにする良い機会となるからです。</p> + +<p>最後に、スクリプトやスタイルのコードを追加するため、分離サイト手法よりもパフォーマンスが悪化するかもしれません。これに対する回避策はありません。スクリプトやスタイルコードをリファクタリングして、根気強くバイト数を削減するしかありません。</p> + +<h2 id="この選択肢を選ぶとき">この選択肢を選ぶとき</h2> + +<p><a href="/@api/deki/files/5894/=teixido_responsive-300x177.png" title="teixido_responsive-300x177.png"><img alt="teixido_responsive-300x177.png" class="internal rwrap" src="/@api/deki/files/5894/=teixido_responsive-300x177.png?size=webview" style="float: right; height: 177px; width: 300px;"></a>上述したように、コンテンツの変更は難しいため、この手法を取り扱うとき、複雑なコードを追加せずにユーザに対してモバイルデバイスで異なる体験を与えることはできません。つまり、デスクトップとモバイルのサイトがとても似ているのであれば、この手法は素晴らしい選択肢となります。文章中心でユースケースが複数のデバイスにまたがっているのサイトによく適しています。以下に示す例が、すべてブログやポートフォリオであることに気づくでしょう！</p> + +<h2 id="Examples" name="Examples" style="overflow: hidden;">用例</h2> + +<p>分離サイト手法ほどの人気はありませんが、日に日により多くの Web サイトがこの技術を採用し始めています。幸運にも、すべてのコードはクライアント側にあるため、この手法がサイトで技術的にどのように実装されているか見たければ、サイトを訪問して、“ページのソースを表示” をクリックしてください。</p> + +<ul> + <li><a href="http://teixido.co/">http://teixido.co/</a> – 私のお気に入りのレスポンシブデザインです。画像が上にあります！</li> + <li><a href="http://adactio.com/journal/1696">http://adactio.com/journal/1696</a> – 読むのにおすすめの記事です。記事内のリンクも用例となっています。</li> + <li><a href="http://thinkvitamin.com/">http://thinkvitamin.com/</a></li> + <li><a href="http://stephencaver.com/">http://stephencaver.com/</a></li> + <li><a href="http://hicksdesign.co.uk/">http://hicksdesign.co.uk/</a></li> +</ul> + +<p>比較的若い手法であるにもかかわらず、既にいくつかベストプラクティスが現れています。例えば、サイトを一からデザインするのに、この選択肢を使おうと考えているなら、モバイルには初めから制約があるため、<a href="http://www.lukew.com/ff/entry.asp?1117">まず小さい画面で作成する</a> のがよいでしょう。また、メディアクエリで既存のサイトの要素を隠す代わりに、進歩した機能をスタイルに使用することもよいことです。この方法は、メディアクエリをサポートしてない古いブラウザで正しくレイアウトすることができます。この手法のメリットについての素晴らしいプレゼンテーションが <a href="http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu">ここ</a> から利用できます。</p> + +<h2 id="モバイル_Web_開発手法">モバイル Web 開発手法</h2> + +<p>以下の記事は、モバイルプラットフォーム向け開発の背景や手法です。</p> + +<ul> + <li><a href="/ja/docs/Web/Guide/Mobile/Mobile-friendliness">モバイルの親しみやすさとは？</a></li> + <li><a href="/ja/docs/Web/Guide/Mobile/Separate_sites">別々のサイト</a></li> + <li><a href="/ja/docs/Web/Guide/Mobile/A_hybrid_approach">ハイブリッドアプローチ</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Web/Apps/app_layout/Responsive_design_versus_adaptive_design?search=responsive%20design">Responsive versus adaptive design</a></li> +</ul> + +<h2 id="関連文書">関連文書</h2> + +<ul> + <li>追加リソース: <a href="/ja/docs/Web_Development/Responsive_Web_design" title="Responsive Web design">レスポンシブ Web デザイン</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Web/Apps/app_layout/Responsive_design_versus_adaptive_design?search=responsive%20design">Responsive versus adaptive design</a></li> +</ul> + +<div class="originaldocinfo"> +<h3 id="元の文書">元の文書</h3> + +<p>Mozilla Webdev ブログの "<a href="http://blog.mozilla.com/webdev/2011/05/27/approaches-to-mobile-web-development-part-3-responsive-design/" title="http://blog.mozilla.com/webdev/2011/05/27/approaches-to-mobile-web-development-part-3-responsive-design/">Approaches to Mobile Web Development Part 3 - Responsive Design</a>" の記事として 2011 年 5 月 27 日に Jason Grlicky によって発行されました。</p> +</div> + +<p> </p> diff --git a/files/ja/conflicting/web/progressive_web_apps/introduction/index.html b/files/ja/conflicting/web/progressive_web_apps/introduction/index.html new file mode 100644 index 0000000000..b7d3a2dc7b --- /dev/null +++ b/files/ja/conflicting/web/progressive_web_apps/introduction/index.html @@ -0,0 +1,65 @@ +--- +title: プログレッシブウェブアプリの利点 +slug: Web/Progressive_web_apps/Advantages +tags: + - PWA + - Progressive web apps + - advantages + - concepts +translation_of: Web/Progressive_web_apps/Introduction#Advantages_of_web_applications +translation_of_original: Web/Progressive_web_apps/Advantages +--- +<p class="summary"><span class="seoSummary">プログレッシブウェブアプリ（Progressive web apps、PWA）には、以下のセクションにリストされているすべての利点があります。</span></p> + +<p> </p> + +<h2 id="Discoverable" name="Discoverable">発見可能<img alt="" src="https://mdn.mozillademos.org/files/12654/discoverable.svg" style="float: right; height: 40px; width: 38px;"></h2> + +<p>最終的な目的は、ウェブアプリが検索エンジンでより適切に表現され、公開されやすく、カタログ化とランク付けされ、ブラウザーにメタデータを使用してそれらに特別な機能を提供することです。</p> + +<p>一部の機能は、<a href="http://ogp.me/">Open Graph</a> のような独自の技術によって特定のウェブベースのプラットフォームですでにできるようになっています。 Open Graph は、メタタグを使用して HTML の <code><head></code> で類似のメタデータを指定するための形式を提供します。</p> + +<p>ここで関連するウェブ標準は<a href="/ja/docs/Web/Manifest">ウェブアプリマニフェスト</a>（Web app manifest）です。 これは、名前、アイコン、スプラッシュスクリーン、テーマカラーなどのアプリの機能を JSON 形式のマニフェストファイルで定義します。 これは、アプリ一覧やデバイスのホーム画面などのコンテキストで使用するためのものです。</p> + +<ul> +</ul> + +<h2 id="Installable" name="Installable">インストール可能<img alt="" src="https://mdn.mozillademos.org/files/12656/installable.svg" style="float: right; height: 40px; width: 38px;"></h2> + +<p>アプリエクスペリエンスの中心的な部分は、ユーザーが自分のホーム画面にアプリアイコンを表示して、タップしてアプリをネイティブコンテナに開くことができることで、基盤となるプラットフォームとうまく統合されていると感じます。</p> + +<p>最新のウェブアプリは、ウェブアプリマニフェスト内で設定されたプロパティや、<a href="/ja/docs/Web/Progressive_web_apps/Add_to_home_screen">ホーム画面に追加</a>と呼ばれる最新のスマートフォンのブラウザーで利用可能な機能を介して、このネイティブアプリの感じを持つことができます。</p> + +<h2 id="Linkable" name="Linkable">リンク可能<img alt="" src="https://mdn.mozillademos.org/files/12658/linkable.svg" style="float: right; height: 40px; width: 38px;"></h2> + +<p>ウェブの最も強力な機能の1つは、特定の URL でアプリにリンクできることです — アプリストアは不要で、複雑なインストールプロセスも不要です。 これこそがいつものことです。</p> + +<h2 id="Network_independent" name="Network_independent">ネットワーク非依存<img alt="" src="https://mdn.mozillademos.org/files/12660/network-independent.svg" style="float: right; height: 40px; width: 38px;"></h2> + +<p>最新のウェブアプリは、ネットワークの信頼性が低い場合、または存在しない場合でも機能します。 ネットワークの独立性の背景にある基本的な考え方は、次のことができるようにすることです。</p> + +<ul> + <li>ネットワークにアクセスできない場合でも、サイトを再訪してそのコンテンツを取得する。</li> + <li>接続性が悪い状況でも、ユーザーが以前に少なくとも1回アクセスしたことがある、あらゆる種類のコンテンツを閲覧する。</li> + <li>接続がない状況下でユーザーに見せるものを制御する。</li> +</ul> + +<p>これは技術の組み合わせによって達成されます — ページ要求を制御する<a href="/ja/docs/Web/API/Service_Worker_API">サービスワーカー</a>（オフラインでの保存など）、ネットワーク要求への応答をオフラインで保存するための <a href="/ja/docs/Web/API/Cache">Cache API</a>（サイトアセット（静的なコンテンツ）の保存に非常に便利）、アプリケーションデータをオフラインで格納するための <a href="/ja/docs/Web/API/Web_Storage_API">Web Storage</a> や <a href="/ja/docs/Web/API/IndexedDB_API">IndexedDB</a> などのクライアント側のデータストレージ技術です。</p> + +<h2 id="Progressive" name="Progressive">プログレッシブ<img alt="" src="https://mdn.mozillademos.org/files/12662/progressive.svg" style="float: right; height: 40px; width: 38px;"></h2> + +<p>最新のウェブアプリは、完全対応のブラウザーには非常にクールなエクスペリエンスを提供し、完全ではない対応のブラウザーには（あまり魅力的ではないが）許容可能なエクスペリエンスを提供するように開発できます。<a href="/ja/docs/Glossary/Progressive_Enhancement"> プログレッシブエンハンスメント</a>（progressive enhancement）などのベストプラクティスを使って、これを長年にわたって行ってきました。</p> + +<h2 id="Re-engageable" name="Re-engageable">再エンゲージ可能<img alt="" src="https://mdn.mozillademos.org/files/12666/re-engageable.svg" style="float: right; height: 40px; width: 38px;"></h2> + +<p>ネイティブプラットフォームの大きな利点の1つは、アプリを見ていないときやデバイスを使用していないときでも、ユーザーが更新や新しいコンテンツに簡単に再エンゲージ（係り合い）できることです。 最新のウェブアプリでも、新しい技術を使用してこれを実行できます — ページを制御するための<a href="/ja/docs/Web/API/Service_Worker_API/Using_Service_Workers">サービスワーカー</a>（Service Worker）、サービスワーカーを介してサーバーからアプリに直接更新を送信するための <a href="/ja/docs/Web/API/Push_API">Web Push API</a> 、ユーザーがブラウザーを見ていないときにユーザーとのエンゲージを援助するシステム通知を生成するための <a href="/ja/docs/Web/API/Notifications_API">Notifications API</a> といったもの。</p> + +<h2 id="Responsive" name="Responsive">レスポンシブ<img alt="" src="https://mdn.mozillademos.org/files/12650/responsive.svg" style="float: right; height: 40px; width: 38px;"></h2> + +<p>レスポンシブウェブアプリ（Responsive web apps）では、メディアクエリやビューポートなどの技術を使用して、その UI があらゆる形状（デスクトップ、モバイル、タブレット、または次に来るものは何でも）に適合することを確認します。</p> + +<h2 id="Safe" name="Safe">安全<img alt="" src="https://mdn.mozillademos.org/files/12664/safe.svg" style="float: right; height: 47px; width: 38px;"></h2> + +<p>ウェブプラットフォームは、HTTPS を利用してセキュリティを念頭に置いてアプリを開発する限り、スヌーピング（覗き見）を防ぎ、コンテンツが改ざんされていないことを保証する安全な配信メカニズムを提供します。 さらに、PWA が正しい URL にあることを確認することで、PWA の本質を検証できます。 一方、アプリストア内のアプリは、多くの場合1つのもののように見えますが別のものになります（<a href="https://twitter.com/andreasbovens/status/926965095296651264">例</a>）。</p> + +<p> </p> diff --git a/files/ja/conflicting/web/svg/svg_1.1_support_in_firefox/index.html b/files/ja/conflicting/web/svg/svg_1.1_support_in_firefox/index.html new file mode 100644 index 0000000000..8def32aa25 --- /dev/null +++ b/files/ja/conflicting/web/svg/svg_1.1_support_in_firefox/index.html @@ -0,0 +1,781 @@ +--- +title: Firefox の SVG 実装状況 +slug: SVG_in_Firefox +tags: + - Firefox + - SVG +translation_of: Web/SVG/SVG_1.1_Support_in_Firefox +--- +<p><a class="external" href="http://www.w3.org/Graphics/SVG/Test/20061213/">W3C SVG test suite</a> に、いくつかの基本的な SVG 構文と使用例があります。</p> +<div class="geckoVersionNote"> + <p>{{gecko_callout_heading("2.0")}}</p> + <p>Gecko は 現在、SMIL を用いての SVG アニメーションをサポートしています。概要については、『<a href="/ja/docs/SVG/SVG_animation_with_SMIL">SMIL を用いた SVG アニメーション</a>』 をご覧下さい。SVG の完全なドキュメントはまだ完成に向けて作成中です。</p> +</div> +<h2 id="Element_implementation_status" name="Element_implementation_status">要素の実装状況</h2> +<p><a href="http://www.w3.org/TR/SVG11/">SVG 1.1</a> 要素の簡単な概要および現在のネイティブサポート状況を以下に列挙します。</p> +<table class="standard-table" style="border-collapse: separate;"> + <tbody> + <tr> + <th>要素</th> + <th>注記</th> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/struct.html#basic-structure-mod">Structure モジュール</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/struct.html#SVGElement">svg</a></td> + <td> + <ul> + <li>実装済</li> + <li><code>currentScale</code> 属性と <code>currentTranslate</code> 属性は実装されていますが、パンとズームのユーザインターフェースは有りません。</li> + <li>SVGSVGElement + <ul> + <li>未実装の属性 : <code>contentScriptType</code> 、 <code>contentStyleType</code> 、 <code>viewport</code> 、 <code>currentView</code></li> + <li>未実装のバインディング : <code>getIntersectionList</code> 、 <code>getEnclosureList</code> 、 <code>checkIntersection</code> 、 <code>checkEnclosure</code> 、 <code>deselectAll</code></li> + <li>最近実装されたバインディング : + <ul> + <li><code>pauseAnimations</code> 、 <code>unpauseAnimations</code> 、 <code>animationsPaused</code> 、 <code>getCurrentTime</code> 、 <code>setCurrentTime</code> {{gecko_minversion_inline("2")}} 、 <code>getElementById</code> {{gecko_minversion_inline("11")}} 、 <code>useCurrentView</code> {{gecko_minversion_inline("15")}}</li> + </ul> + </li> + </ul> + </li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/struct.html#GElement">g</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/struct.html#DefsElement">defs</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/struct.html#DescElement">desc</a></td> + <td> + <ul> + <li>実装済</li> + <li>DOM に保存されるだけでユーザインタフェースは無し</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/struct.html#TitleElement">title</a></td> + <td> + <ul> + <li>実装済</li> + <li>Gecko 2.0 より、SVG オブジェクトにマウスを重ねると <code>title</code> 属性値が表示されるようになった {{gecko_minversion_inline("2")}}</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/metadata.html#MetadataElement">metadata</a></td> + <td> + <ul> + <li>実装済</li> + <li>DOM に保存されるだけでユーザインタフェースは無し</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/struct.html#SymbolElement">symbol</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/struct.html#UseElement">use</a></td> + <td> + <ul> + <li>実装済</li> + <li>Firefox 3.5/Gecko 1.9.1 で外部文書への参照が実装された ({{Bug(269482)}})</li> + <li><svg:use> カスケーディング規則に完全に従っていない ({{Bug(265894)}})</li> + <li>SVGElementInstance ツリーにイベントを伝えない ({{Bug(265895)}})</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/struct.html#conditional-mod">Conditional Processing モジュール</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/struct.html#SwitchElement">switch</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/struct.html#image-mod">Image モジュール</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/struct.html#ImageElement">image</a></td> + <td> + <ul> + <li>実装済</li> + <li>Gecko 2.0 以前では <svg:image> はラスタ画像のみサポート ({{Bug(272288)}}).</li> + <li>Gecko 2.0 より、 <svg:image> はラスタ画像と SVG 画像をサポート {{gecko_minversion_inline("2")}}</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/styling.html#style-mod">Style モジュール</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/styling.html#StyleElement">style</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/shapes.html#shape-mod">Shape モジュール</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/paths.html#PathElement">path</a></td> + <td> + <ul> + <li>実装済</li> + <li>SVGPathElement Interface + <ul> + <li>未実装の属性 : normalizedPathSegList, animatedNormalizedPathSegList</li> + </ul> + </li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/shapes.html#RectElement">rect</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/shapes.html#CircleElement">circle</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/shapes.html#LineElement">line</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/shapes.html#EllipseElement">ellipse</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/shapes.html#PolylineElement">polyline</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/shapes.html#PolygonElement">polygon</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/text.html#text-mod">Text モジュール</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/text.html#TextElement">text</a></td> + <td> + <ul> + <li>実装済</li> + <li>多くのプレゼンテーション属性が動作せず : (<code>alignment-baseline</code>, <code>baseline-shift</code>, <code>dominant-baseline</code>, <code>font-variant</code>, <code>kerning</code>, <code>letter-spacing</code>, <code>word-spacing</code>, <code>text-decoration</code>, <code>direction</code>, <code>unicode-bidi</code>, <code>writing-mode</code>, <code>glyph-orientation-horizontal</code>, <code>glyph-orientation-vertical</code>)</li> + <li><code>x</code>, <code>y</code>, <code>dx</code>, <code>dy</code> 属性が複数の値を取れるようになった。 {{gecko_minversion_inline("2")}}</li> + <li>SVGTextElement + <ul> + <li>未実装の属性 : <code>textLength</code> 、 <code>lengthAdjust</code></li> + <li>未実装のバインディング : <code>selectSubString</code></li> + <li>追加属性 : <code>rotate</code> {{gecko_minversion_inline("2")}}</li> + </ul> + </li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/text.html#TSpanElement">tspan</a></td> + <td> + <ul> + <li>実装済</li> + <li>多くのプレゼンテーション属性が動作せず : (<code>alignment-baseline</code>, <code>baseline-shift</code>, <code>dominant-baseline</code>, <code>font-variant</code>, <code>kerning</code>, <code>letter-spacing</code>, <code>word-spacing</code>, <code>text-decoration</code>, <code>direction</code>, <code>unicode-bidi</code>, <code>writing-mode</code>, <code>glyph-orientation-horizontal</code>, <code>glyph-orientation-vertical</code>)</li> + <li><code>x</code>, <code>y</code>, <code>dx</code>, <code>dy</code> 属性が複数の値を取れるようになった。 {{gecko_minversion_inline("2")}}</li> + <li>SVGTSpanElement + <ul> + <li>未実装の属性 : <code>textLength</code> 、 <code>lengthAdjust</code></li> + <li>未実装のバインディング : <code>selectSubString</code></li> + <li>追加属性 : <code>rotate</code> {{gecko_minversion_inline("2")}}</li> + </ul> + </li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="http://www.w3.org/TR/SVG11/text.html#TRefElement">tref</a></td> + <td> + <ul> + <li>未実装 ({{Bug(273171)}}).</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/text.html#TextPathElement">textPath</a></td> + <td> + <ul> + <li>実装済</li> + <li>未実装バインディング : selectSubString</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: yellow;"> + <td><a href="http://www.w3.org/TR/SVG11/text.html#AltGlyphElement">altGlyph</a></td> + <td> + <ul> + <li>Gecko 2.0 では tspan として実装され、フォント機能は無い ({{Bug(456286)}} / {{Bug(571808)}}).</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="http://www.w3.org/TR/SVG11/text.html#AltGlyphDefElement">altGlyphDef</a></td> + <td> + <ul> + <li>未実装</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="http://www.w3.org/TR/SVG11/text.html#AltGlyphItemElement">altGlyphItem</a></td> + <td> + <ul> + <li>未実装</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="http://www.w3.org/TR/SVG11/text.html#GlyphRefElement">glyphRef</a></td> + <td> + <ul> + <li>未実装</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/painting.html#marker-mod">Marker モジュール</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/painting.html#MarkerElement">marker</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/color.html#color-profile-mod">Color Profile モジュール</a></th> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="http://www.w3.org/TR/SVG11/color.html#ColorProfileElement">color-profile</a></td> + <td> + <ul> + <li>未実装 ({{Bug(427713)}}).</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/pservers.html#gradient-mod">Gradient モジュール</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/pservers.html#LinearGradientElement">linearGradient</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/pservers.html#RadialGradientElement">radialGradient</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/pservers.html#StopElement">stop</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/pservers.html#pattern-mod">Pattern モジュール</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/pservers.html#PatternElement">pattern</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/masking.html#clip-mod">Clip モジュール</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/masking.html#ClipPathElement">clipPath</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/masking.html#mask-mod">Mask モジュール</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/masking.html#MaskElement">mask</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/filters.html#filter-mod">Filter モジュール</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#FilterElement">filter</a></td> + <td> + <ul> + <li>実装済</li> + <li>擬似入力として次のものが実装されている : <code>SourceGraphic</code> 、 <code>SourceAlpha</code> 、 <code>FillPaint</code> {{gecko_minversion_inline("17")}}<br> + <code>StrokePaint</code> が実装済 {{gecko_minversion_inline("17")}}</li> + <li>未実装の擬似入力ないしフィルタ要素を使った場合、フィルタは無視され対応する図形はフィルタ無しで表示される</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feBlendElement">feBlend</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feColorMatrixElement">feColorMatrix</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feComponentTransferElement">feComponentTransfer</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feCompositeElement">feComposite</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElement">feConvolveMatrix</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feDiffuseLightingElement">feDiffuseLighting</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feDisplacementMapElement">feDisplacementMap</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feFloodElement">feFlood</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feGaussianBlurElement">feGaussianBlur</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feImageElement">feImage</a></td> + <td> + <ul> + <li>実装済</li> + <li>Gecko 2.0 以前は <svg:feImage> はラスタ画像のみサポート</li> + <li>Gecko 2.0 より、 <svg:feImage> はラスタ画像と SVG 画像をサポート {{gecko_minversion_inline("2")}}</li> + <li>ドキュメントフラグメントは <svg:feImage> で未サポート ({{bug(455986)}})</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feMergeElement">feMerge</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feMergeNodeElement">feMergeNode</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feMorphologyElement">feMorphology</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feOffsetElement">feOffset</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feSpecularLightingElement">feSpecularLighting</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feTileElement">feTile</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feTurbulenceElement">feTurbulence</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feDistantLightElement">feDistantLight</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#fePointLightElement">fePointLight</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feSpotLightElement">feSpotLight</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feFuncRElement">feFuncR</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feFuncGElement">feFuncG</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feFuncBElement">feFuncB</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#feFuncAElement">feFuncA</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/interact.html#cursor-mod">Cursor モジュール</a></th> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="http://www.w3.org/TR/SVG11/interact.html#CursorElement">cursor</a></td> + <td> + <ul> + <li>未実装 ({{Bug(177193)}}).</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/linking.html#hyperlinking-mod">Hyperlinking モジュール</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/linking.html#AElement">a</a></td> + <td> + <ul> + <li>次の属性のみ実装 : <code>xlink:href</code> 、 <code>xlink:show</code> 、 <code>xlink:target</code> 、 <code>xlink:title</code></li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/linking.html#view-mod">View モジュール</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/linking.html#ViewElement">view</a></td> + <td> + <ul> + <li>Gecko 15.0 で実装済 ({{Bug(512525)}}) {{gecko_minversion_inline("15.0")}}</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/script.html#scripting-mod">Scripting モジュール</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/script.html#ScriptElement">script</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/animate.html#animation-mod">Animation モジュール</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/animate.html#AnimateElement">animate</a></td> + <td> + <ul> + <li>Gecko 2.0 で実装済 {{gecko_minversion_inline("2.0")}}</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/animate.html#SetElement">set</a></td> + <td> + <ul> + <li>Gecko 2.0 で実装済 {{gecko_minversion_inline("2.0")}}</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/animate.html#AnimateMotionElement">animateMotion</a></td> + <td> + <ul> + <li>Gecko 2.0 で実装済 ({{Bug(436418)}}). {{gecko_minversion_inline("2.0")}}</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/animate.html#AnimateTransformElement">animateTransform</a></td> + <td> + <ul> + <li>Gecko 2.0 で実装済 {{gecko_minversion_inline("2.0")}}</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="http://www.w3.org/TR/SVG11/animate.html#AnimateColorElement">animateColor</a></td> + <td> + <ul> + <li>未実装 ({{Bug(436296)}}).</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/animate.html#mpathElement">mpath</a></td> + <td> + <ul> + <li>Gecko 2.0 で実装済 ({{Bug(436418)}}). {{gecko_minversion_inline("2.0")}}</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/fonts.html#font-mod">Font モジュール</a></th> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="http://www.w3.org/TR/SVG11/fonts.html#FontElement" title="http://www.w3.org/TR/SVG11/fonts.html#FontElement">font</a></td> + <td> + <ul> + <li>未実装 ({{Bug(119490)}}).</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face</a></td> + <td> + <ul> + <li>未実装</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="http://www.w3.org/TR/SVG11/fonts.html#GlyphElement">glyph</a></td> + <td> + <ul> + <li>未実装</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="http://www.w3.org/TR/SVG11/fonts.html#MissingGlyphElement">missing-glyph</a></td> + <td> + <ul> + <li>未実装</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="http://www.w3.org/TR/SVG11/fonts.html#HKernElement">hkern</a></td> + <td> + <ul> + <li>未実装</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="http://www.w3.org/TR/SVG11/fonts.html#VKernElement">vkern</a></td> + <td> + <ul> + <li>未実装</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceSrcElement">font-face-src</a></td> + <td> + <ul> + <li>未実装</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face-uri</a></td> + <td> + <ul> + <li>未実装</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face-format</a></td> + <td> + <ul> + <li>未実装</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face-name</a></td> + <td> + <ul> + <li>未実装</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a href="http://www.w3.org/TR/SVG11/fonts.html#DefinitionSrcElement">definition-src</a></td> + <td> + <ul> + <li>未実装</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2" style="text-align: center;"><a href="http://www.w3.org/TR/SVG11/extend.html#extensibility-mod">Extensibility モジュール</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a href="http://www.w3.org/TR/SVG11/extend.html#ForeignObjectElement">foreignObject</a></td> + <td> + <ul> + <li>実装済</li> + </ul> + </td> + </tr> + </tbody> +</table> diff --git a/files/ja/conflicting/web/xpath/introduction_to_using_xpath_in_javascript/index.html b/files/ja/conflicting/web/xpath/introduction_to_using_xpath_in_javascript/index.html new file mode 100644 index 0000000000..8d63ce70da --- /dev/null +++ b/files/ja/conflicting/web/xpath/introduction_to_using_xpath_in_javascript/index.html @@ -0,0 +1,411 @@ +--- +title: JavaScript で XPath を使用する +slug: Web/JavaScript/Introduction_to_using_XPath_in_JavaScript +translation_of: Web/XPath/Introduction_to_using_XPath_in_JavaScript +--- +<p>このドキュメントでは、JavaScript の内部、拡張機能、そして Web サイトから <a href="/ja/docs/Web/XPath">XPath</a> を使用するためのインターフェイスについて説明します。Mozilla は <a class="external" href="https://www.w3.org/TR/2004/NOTE-DOM-Level-3-XPath-20040226/">DOM 3 XPath</a> をかなりの量実装しており、XPath 式は HTML と XML ドキュメントの両方に対して実行できます。</p> + +<p>XPath を使用するための主なインターフェースは、<a href="/ja/docs/Web/API/Document">Document</a> オブジェクトの <a href="/ja/docs/Web/API/Document/evaluate">evaluate</a> 関数です。</p> + +<h2 id="document.evaluate" name="document.evaluate">document.evaluate</h2> + +<p>このメソッドは、<a href="/ja/docs/Glossary/XML">XML</a> ベースのドキュメント (HTML ドキュメントを含む) に対して <a href="/ja/docs/Web/XPath">XPath</a> 式を評価し、<code><a href="/ja/docs/Web/API/XPathResult">XPathResult</a></code> オブジェクトを返します。このメソッドの既存のドキュメントは <a href="/ja/docs/Web/API/Document/evaluate">document.evaluate</a> にありますが、今のところ我々が必要としているものには乏しいです。</p> + +<pre class="brush: js notranslate">var xpathResult = document.evaluate( xpathExpression, contextNode, namespaceResolver, resultType, result ); +</pre> + +<h3 id="Parameters" name="Parameters">Parameters</h3> + +<p><a href="/ja/docs/Web/API/Document/evaluate">evaluate</a> 関数は合計5つのパラメータを取ります。</p> + +<ul> + <li><code>xpathExpression</code>: 評価される XPath 式を含む文字列</li> + <li><code>contextNode</code>: <code>xpathExpression</code> が評価されるべきドキュメント内のノード。<a href="/ja/docs/Web/API/Document">Document</a> ノードが最も一般的に使用されます</li> + <li><code>namespaceResolver</code>: <code>xpathExpression</code> 内に含まれる名前空間接頭辞を渡す関数で、その接頭辞に関連付けられた名前空間 URI を表す文字列を返します。これにより、XPath 式で使用されている接頭辞とドキュメント内で使用されている可能性のある異なる接頭辞との変換が可能になります。この関数は、以下のいずれかの方法で利用できます + <ul> + <li><code><a href="/ja/docs/Using_XPath#Node-specific_evaluator_function" title="en/XPathEvaluator">XPathEvaluator</a></code> オブジェクトの <code><a href="/ja/docs/Web/API/Document/createNSResolver">createNSResolver</a></code> メソッドを使用して<a href="/ja/docs/Web/JavaScript/Introduction_to_using_XPath_in_JavaScript#Implementing_a_Default_Namespace_Resolver">作成します</a>。事実上、これを使用する必要があります</li> + <li><code>null</code>です。これは、HTML ドキュメントや名前空間プレフィックスが使用されていない場合に使用することができます。<code>xpathExpression</code>に 名前空間プレフィックスが含まれている場合、<code>NAMESPACE_ERR</code> というコードで <code>DOMException</code> がスローされることに注意してください</li> + <li>カスタムのユーザ定義関数。詳細は、付録の <a href="/ja/docs/Web/JavaScript/Introduction_to_using_XPath_in_JavaScript#Implementing_a_User_Defined_Namespace_Resolver">ユーザー定義名前空間リゾルバの使用法</a> を参照してください</li> + </ul> + </li> + <li><code>resultType</code>: 評価の結果として返される結果の型を指定する<a href="/ja/docs/Web/JavaScript/Introduction_to_using_XPath_in_JavaScript#XPathResult_Defined_Constants">定数</a>です。最も一般的に渡される定数は <code>XPathResult.ANY_TYPE</code> で、これは XPath 式の結果を最も自然な型として返します。付録には、<a href="/ja/docs/Web/JavaScript/Introduction_to_using_XPath_in_JavaScript#XPathResult_Defined_Constants">利用可能な定数</a>の完全なリストを含むセクションがあります。これらの定数は以下の「<a href="/ja/docs/Web/JavaScript/Introduction_to_using_XPath_in_JavaScript#Specifying_the_Return_Type">戻り値の型の指定</a>」のセクションで説明されています</li> + <li><code>result</code>: 既存の <code>XPathResult</code> オブジェクトを指定すると、そのオブジェクトが再利用されて結果が返されます。<code>null</code> を指定すると、新しい <code>XPathResult</code> オブジェクトが作成されます</li> +</ul> + +<h3 id="Return_Value" name="Return_Value">Return Value</h3> + +<p><code>resultType</code> パラメータで<a href="/ja/docs/Web/JavaScript/Introduction_to_using_XPath_in_JavaScript#Specifying_the_Return_Type">指定された</a>型の <code>XPathResult</code> オブジェクトを返します。<code>XPathResult</code> インターフェースは<a href="/ja/docs/Web/API/XPathResult">ここ</a>で定義されています。</p> + +<h3 id="Implementing_a_Default_Namespace_Resolver" name="Implementing_a_Default_Namespace_Resolver">Implementing a Default Namespace Resolver</h3> + +<p><a href="/ja/docs/Web/API/document" title="en/DOM/document">document</a> オブジェクトの <code>createNSResolver</code> メソッドを使用して名前空間リゾルバを作成します。</p> + +<pre class="brush: js notranslate">var nsResolver = document.createNSResolver( contextNode.ownerDocument == null ? contextNode.documentElement : contextNode.ownerDocument.documentElement ); +</pre> + +<p><span class="comment">Or alternatively by using the <code>createNSResolver</code> method of a <code>XPathEvaluator</code> object. <pre> var xpEvaluator = new XPathEvaluator(); var nsResolver = xpEvaluator.createNSResolver( contextNode.ownerDocument == null ? contextNode.documentElement : contextNode.ownerDocument.documentElement ); </pre></span> そして、<code>namespaceResolver</code> パラメータとして <code>nsResolver</code> 変数である <code>document.evaluate</code> を渡します。</p> + +<p>注意: XPath は、ヌル名前空間の要素にのみマッチするように、接頭辞のない QNames を定義しています。XPath では、通常の要素参照 (例: <code><span class="nowiki">xmlns='http://www.w3.org/1999/xhtml</span>'</code> の <code>p[@id='_myid']</code>) に適用されるデフォルトの名前空間を拾う方法はありません。NULL ではない名前空間のデフォルト要素にマッチさせるには、<code>['namespace-uri()='<span class="nowiki">http://www.w3.org/1999/xhtml</span>' and name()='p' and @id='_myid']</code> のような形式を使用して特定の要素を参照する必要があります (<a href="/ja/docs/Web/JavaScript/Introduction_to_using_XPath_in_JavaScript#Using_XPath_functions_to_reference_elements_with_a_default_namespace">このアプローチ</a>は、名前空間がわからない動的な XPath の場合にうまく機能します)。後者の方法を取りたい場合は、<a href="/ja/docs/Web/JavaScript/Introduction_to_using_XPath_in_JavaScript#Implementing_a_User_Defined_Namespace_Resolver">ユーザ定義の名前空間リゾルバを作成する方法</a>を参照してください。</p> + +<h3 id="Notes" name="Notes">Notes</h3> + +<p>任意の DOM ノードを名前空間を解決するように適応させ、 <a href="/ja/docs/Web/XPath">XPath</a> 式をドキュメント内で出現したノードのコンテキストからの相対評価を簡単に行えるようにします。このアダプタは、ノード上の DOM Level 3 メソッド <code>lookupNamespaceURI</code> と同様に動作し、 <code>lookupNamespaceURI</code> が呼び出された時点でのノードの階層内で利用可能な現在の情報を使用して、指定したプレフィックスから <code>namespaceURI</code> を解決します。また、暗黙の <code>xml</code> 接頭辞も正しく解決します。</p> + +<h3 id="Specifying_the_Return_Type" name="Specifying_the_Return_Type">Specifying the Return Type</h3> + +<p>The returned variable <code>xpathResult</code> from <code>document.evaluate</code> can either be composed of individual nodes (<a href="#Simple_Types">simple types</a>), or a collection of nodes (<a href="#Node-Set_Types">node-set types</a>).</p> + +<h4 id="Simple_Types" name="Simple_Types">Simple Types</h4> + +<p><code>resultType</code> に希望する結果タイプがどちらかに指定されている場合。</p> + +<ul> + <li><code>NUMBER_TYPE</code> - a double</li> + <li><code>STRING_TYPE</code> - 文字列</li> + <li><code>BOOLEAN_TYPE</code> - 真偽値</li> +</ul> + +<p><code>XPathResult</code> オブジェクトの以下のプロパティにそれぞれアクセスして、式の戻り値を取得します。</p> + +<ul> + <li><code>numberValue</code></li> + <li><code>stringValue</code></li> + <li><code>booleanValue</code></li> +</ul> + +<h5 id="Example" name="Example">Example</h5> + +<p>The following uses the XPath expression <code><a href="/en-US/docs/XPath/Functions/count" title="en/XPath/Functions/count">count(//p)</a></code> to obtain the number of <code><p></code> elements in an HTML document:</p> + +<pre class="brush: js notranslate">var paragraphCount = document.evaluate( 'count(//p)', document, null, XPathResult.ANY_TYPE, null ); + +alert( 'This document contains ' + paragraphCount.numberValue + ' paragraph elements' ); +</pre> + +<p>Although JavaScript allows us to convert the number to a string for display, the XPath interface will not automatically convert the numerical result if the <code>stringValue</code> property is requested, so the following code will <strong>not</strong> work:</p> + +<pre class="brush: js notranslate">var paragraphCount = document.evaluate('count(//p)', document, null, XPathResult.ANY_TYPE, null ); + +alert( 'This document contains ' + paragraphCount.stringValue + ' paragraph elements' ); +</pre> + +<p>Instead, it will return an exception with the code <code>NS_DOM_TYPE_ERROR</code>.</p> + +<h4 id="Node-Set_Types" name="Node-Set_Types">Node-Set Types</h4> + +<p>The <code>XPathResult</code> object allows node-sets to be returned in 3 principal different types:</p> + +<ul> + <li><a href="#Iterators">Iterators</a></li> + <li><a href="#Snapshots">Snapshots</a></li> + <li><a href="#First_Node">First Nodes</a></li> +</ul> + +<h5 id="Iterators" name="Iterators">Iterators</h5> + +<p>When the specified result type in the <code>resultType</code> parameter is either:</p> + +<ul> + <li><code>UNORDERED_NODE_ITERATOR_TYPE</code></li> + <li><code>ORDERED_NODE_ITERATOR_TYPE</code></li> +</ul> + +<p>The <code>XPathResult</code> object returned is a node-set of matched nodes which will behave as an iterator, allowing us to access the individual nodes contained by using the <code>iterateNext()</code> method of the <code>XPathResult</code>.</p> + +<p>Once we have iterated over all of the individual matched nodes, <code>iterateNext()</code> will return <code>null</code>.</p> + +<p>Note however, that if the document is mutated (the document tree is modified) between iterations that will invalidate the iteration and the <code>invalidIteratorState</code> property of <code>XPathResult</code> is set to <code>true</code>, and a <code>NS_ERROR_DOM_INVALID_STATE_ERR</code> exception is thrown.</p> + +<h6 id="Iterator_Example" name="Iterator_Example">Iterator Example</h6> + +<pre class="brush: js notranslate">var iterator = document.evaluate('//phoneNumber', documentNode, null, XPathResult.UNORDERED_NODE_ITERATOR_TYPE, null ); + +try { + var thisNode = iterator.iterateNext(); + + while (thisNode) { + alert( thisNode.textContent ); + thisNode = iterator.iterateNext(); + } +} +catch (e) { + alert( 'Error: Document tree modified during iteration ' + e ); +} +</pre> + +<h5 id="Snapshots" name="Snapshots">Snapshots</h5> + +<p>When the specified result type in the <code>resultType</code> parameter is either:</p> + +<ul> + <li><code>UNORDERED_NODE_SNAPSHOT_TYPE</code></li> + <li><code>ORDERED_NODE_SNAPSHOT_TYPE</code></li> +</ul> + +<p>The <code>XPathResult</code> object returned is a static node-set of matched nodes, which allows us to access each node through the <code>snapshotItem(itemNumber)</code> method of the <code>XPathResult</code> object, where <code>itemNumber</code> is the index of the node to be retrieved. The total number of nodes contained can be accessed through the <code>snapshotLength</code> property.</p> + +<p>Snapshots do not change with document mutations, so unlike the iterators, the snapshot does not become invalid, but it may not correspond to the current document, for example, the nodes may have been moved, it might contain nodes that no longer exist, or new nodes could have been added.</p> + +<h6 id="Snapshot_Example" name="Snapshot_Example">Snapshot Example</h6> + +<pre class="brush: js notranslate">var nodesSnapshot = document.evaluate('//phoneNumber', documentNode, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null ); + +for ( var i=0 ; i < nodesSnapshot.snapshotLength; i++ ) +{ + alert( nodesSnapshot.snapshotItem(i).textContent ); +} +</pre> + +<h5 id="First_Node" name="First_Node">First Node</h5> + +<p>When the specified result type in the <code>resultType</code> parameter is either:</p> + +<ul> + <li><code>ANY_UNORDERED_NODE_TYPE</code></li> + <li><code>FIRST_ORDERED_NODE_TYPE</code></li> +</ul> + +<p>The <code>XPathResult</code> object returned is only the first found node that matched the XPath expression. This can be accessed through the <code>singleNodeValue</code> property of the <code>XPathResult</code> object. This will be <code>null</code> if the node set is empty.</p> + +<p>Note that, for the unordered subtype the single node returned might not be the first in document order, but for the ordered subtype you are guaranteed to get the first matched node in the document order.</p> + +<h6 id="First_Node_Example" name="First_Node_Example">First Node Example</h6> + +<pre class="brush: js notranslate">var firstPhoneNumber = document.evaluate('//phoneNumber', documentNode, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null ); + +alert( 'The first phone number found is ' + firstPhoneNumber.singleNodeValue.textContent ); +</pre> + +<h4 id="The_ANY_TYPE_Constant" name="The_ANY_TYPE_Constant">The ANY_TYPE Constant</h4> + +<p>When the result type in the <code>resultType</code> parameter is specified as <code>ANY_TYPE</code>, the <code>XPathResult</code> object returned, will be whatever type that naturally results from the evaluation of the expression.</p> + +<p>It could be any of the simple types (<code>NUMBER_TYPE, STRING_TYPE, BOOLEAN_TYPE</code>), <strong>but</strong>, if the returned result type is a node-set then it will <strong>only</strong> be an <code>UNORDERED_NODE_ITERATOR_TYPE</code>.</p> + +<p>To determine that type after evaluation, we use the <code>resultType</code> property of the <code>XPathResult</code> object. The <a href="#XPathResult_Defined_Constants">constant</a> values of this property are defined in the appendix. <span class="comment">None Yet =====Any_Type Example===== <pre> </pre></span></p> + +<h2 id="Examples" name="Examples">Examples</h2> + +<h3 id="Within_an_HTML_Document" name="Within_an_HTML_Document">Within an HTML Document</h3> + +<p>The following code is intended to be placed in any JavaScript fragment within or linked to the HTML document against which the XPath expression is to be evaluated.</p> + +<p>To extract all the <code><h2></code> heading elements in an HTML document using XPath, the <code>xpathExpression</code> is simply '<code>//h2</code>'. Where, <code>//</code> is the Recursive Descent Operator that matches elements with the nodeName <code>h2</code> anywhere in the document tree. The full code for this is: <span class="comment">link to introductory xpath doc</span></p> + +<pre class="brush: js notranslate">var headings = document.evaluate('//h2', document, null, XPathResult.ANY_TYPE, null ); +</pre> + +<p>Notice that, since HTML does not have namespaces, we have passed <code>null</code> for the <code>namespaceResolver</code> parameter.</p> + +<p>Since we wish to search over the entire document for the headings, we have used the <a href="/en-US/docs/Web/API/document" title="en/DOM/document">document</a> object itself as the <code>contextNode</code>.</p> + +<p>The result of this expression is an <code>XPathResult</code> object. If we wish to know the type of result returned, we may evaluate the <code>resultType</code> property of the returned object. In this case, that will evaluate to <code>4</code>, an <code>UNORDERED_NODE_ITERATOR_TYPE</code>. This is the default return type when the result of the XPath expression is a node set. It provides access to a single node at a time and may not return nodes in a particular order. To access the returned nodes, we use the <code>iterateNext()</code> method of the returned object:</p> + +<pre class="brush: js notranslate">var thisHeading = headings.iterateNext(); + +var alertText = 'Level 2 headings in this document are:\n' + +while (thisHeading) { + alertText += thisHeading.textContent + '\n'; + thisHeading = headings.iterateNext(); +} +</pre> + +<p>Once we iterate to a node, we have access to all the standard DOM interfaces on that node. After iterating through all the <code>h2</code> elements returned from our expression, any further calls to <code>iterateNext()</code> will return <code>null</code>.</p> + +<h3 id="Evaluating_against_an_XML_document_within_an_Extension" name="Evaluating_against_an_XML_document_within_an_Extension">Evaluating against an XML document within an Extension</h3> + +<p>The following uses an XML document located at <span class="nowiki">chrome://yourextension/content/peopleDB.xml</span> as an example.</p> + +<pre class="brush: xml notranslate"><?xml version="1.0"?> +<people xmlns:xul = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" > + <person> + <name first="george" last="bush" /> + <address street="1600 pennsylvania avenue" city="washington" country="usa"/> + <phoneNumber>202-456-1111</phoneNumber> + </person> + <person> + <name first="tony" last="blair" /> + <address street="10 downing street" city="london" country="uk"/> + <phoneNumber>020 7925 0918</phoneNumber> + </person> +</people> +</pre> + +<p>To make the contents of the XML document available within the extension, we create an <code><a href="/en-US/docs/Web/API/XMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a></code> object to load the document synchronously, the variable <code>xmlDoc</code> will contain the document as an <code><a href="/en-US/docs/Web/API/XMLDocument" title="en/XMLDocument">XMLDocument</a></code> object against which we can use the <code>evaluate</code> method</p> + +<p>JavaScript used in the extensions xul/js documents.</p> + +<pre class="brush: js notranslate">var req = new XMLHttpRequest(); + +req.open("GET", "chrome://yourextension/content/peopleDB.xml", false); +req.send(null); + +var xmlDoc = req.responseXML; + +var nsResolver = xmlDoc.createNSResolver( xmlDoc.ownerDocument == null ? xmlDoc.documentElement : xmlDoc.ownerDocument.documentElement); + +var personIterator = xmlDoc.evaluate('//person', xmlDoc, nsResolver, XPathResult.ANY_TYPE, null ); +</pre> + +<h3 id="Note">Note</h3> + +<p>When the XPathResult object is not defined, the constants can be retrieved in privileged code using <code>Components.interfaces.nsIDOMXPathResult.ANY_TYPE</code> (<code>CI.nsIDOMXPathResult</code>). Similarly, an XPathEvaluator can be created using:</p> + +<pre class="brush: js notranslate">Components.classes["@mozilla.org/dom/xpath-evaluator;1"].createInstance(Components.interfaces.nsIDOMXPathEvaluator)</pre> + +<h2 id="Appendix" name="Appendix">Appendix</h2> + +<h4 id="Implementing_a_User_Defined_Namespace_Resolver" name="Implementing_a_User_Defined_Namespace_Resolver">Implementing a User Defined Namespace Resolver</h4> + +<p>This is an example for illustration only. This function will need to take namespace prefixes from the <code>xpathExpression</code> and return the URI that corresponds to that prefix. For example, the expression:</p> + +<pre class="notranslate">'//xhtml:td/mathml:math' +</pre> + +<p>will select all <a href="/en-US/docs/Web/API/MathML" title="en/MathML">MathML</a> expressions that are the children of (X)HTML table data cell elements.</p> + +<p>In order to associate the '<code>mathml:</code>' prefix with the namespace URI '<code><span class="nowiki">http://www.w3.org/1998/Math/MathML</span></code>' and '<code>xhtml:</code>' with the URI '<code><span class="nowiki">http://www.w3.org/1999/xhtml</span></code>' we provide a function:</p> + +<pre class="brush: js notranslate">function nsResolver(prefix) { + var ns = { + 'xhtml' : 'http://www.w3.org/1999/xhtml', + 'mathml': 'http://www.w3.org/1998/Math/MathML' + }; + return ns[prefix] || null; +} +</pre> + +<p>Our call to <code>document.evaluate</code> would then looks like:</p> + +<pre class="brush: js notranslate">document.evaluate( '//xhtml:td/mathml:math', document, nsResolver, XPathResult.ANY_TYPE, null ); +</pre> + +<h4 id="Implementing_a_default_namespace_for_XML_documents" name="Implementing_a_default_namespace_for_XML_documents">Implementing a default namespace for XML documents</h4> + +<p>As noted in the <a href="#Implementing_a_Default_Namespace_Resolver">Implementing a Default Namespace Resolver</a> previously, the default resolver does not handle the default namespace for XML documents. For example with this document:</p> + +<pre class="brush: xml notranslate"><?xml version="1.0" encoding="UTF-8"?> +<feed xmlns="http://www.w3.org/2005/Atom"> + <entry /> + <entry /> + <entry /> +</feed> +</pre> + +<p><code>doc.evaluate('//entry', doc, nsResolver, XPathResult.ANY_TYPE, null)</code> will return an empty set, where <code>nsResolver</code> is the resolver returned by <code>createNSResolver</code>. Passing a <code>null</code> resolver doesn't work any better, either.</p> + +<p>One possible workaround is to create a custom resolver that returns the correct default namespace (the Atom namespace in this case). Note that you still have to use some namespace prefix in your XPath expression, so that the resolver function will be able to change it to your required namespace. E.g.:</p> + +<pre class="brush: js notranslate">function resolver() { + return 'http://www.w3.org/2005/Atom'; +} +doc.evaluate('//myns:entry', doc, resolver, XPathResult.ANY_TYPE, null) +</pre> + +<p>Note that a more complex resolver will be required if the document uses multiple namespaces.</p> + +<p>An approach which might work better (and allow namespaces not to be known ahead of time) is described in the next section.</p> + +<h4 id="Using_XPath_functions_to_reference_elements_with_a_default_namespace" name="Using_XPath_functions_to_reference_elements_with_a_default_namespace">Using XPath functions to reference elements with a default namespace</h4> + +<p>Another approach to match default elements in a non-null namespace (and one which works well for dynamic XPath expressions where the namespaces might not be known), involves referring to a particular element using a form such as <code>[namespace-uri()='<span class="nowiki">http://www.w3.org/1999/xhtml</span>' and name()='p' and @id='_myid']</code>. This circumvents the problem of an XPath query not being able to detect the default namespace on a regularly labeled element.</p> + +<h4 id="Getting_specifically_namespaced_elements_and_attributes_regardless_of_prefix" name="Getting_specifically_namespaced_elements_and_attributes_regardless_of_prefix">Getting specifically namespaced elements and attributes regardless of prefix</h4> + +<p>If one wishes to provide flexibility in namespaces (as they are intended) by not necessarily requiring a particular prefix to be used when finding a namespaced element or attribute, one must use special techniques.</p> + +<p>While one can adapt the approach in the above section to test for namespaced elements regardless of the prefix chosen (using <code><a href="/en-US/docs/XPath/Functions/local-name" title="en/XPath/Functions/local-name">local-name()</a></code> in combination with <code><a href="/en-US/docs/XPath/Functions/namespace-uri" title="en/XPath/Functions/namespace-uri">namespace-uri()</a></code> instead of <code><a href="/en-US/docs/XPath/Functions/name" title="en/XPath/Functions/name">name()</a></code>), a more challenging situation occurs, however, if one wishes to grab an element with a particular namespaced attribute in a predicate (given the absence of implementation-independent variables in XPath 1.0).</p> + +<p>For example, one might try (incorrectly) to grab an element with a namespaced attribute as follows: <code>var xpathlink = someElements[local-name(@*)="href" and namespace-uri(@*)='<span class="nowiki">http://www.w3.org/1999/xlink</span>'];</code></p> + +<p>This could inadvertently grab some elements if one of its attributes existed that had a local name of "<code>href</code>", but it was a different attribute which had the targeted (XLink) namespace (instead of <code><a href="/en/XPath/Axes/attribute" title="en/XPath/Axes/attribute">@href</a></code>).</p> + +<p>In order to accurately grab elements with the XLink <code>@href</code> attribute (without also being confined to predefined prefixes in a namespace resolver), one could obtain them as follows:</p> + +<pre class="brush: js notranslate">var xpathEls = 'someElements[@*[local-name() = "href" and namespace-uri() = "http://www.w3.org/1999/xlink"]]'; // Grabs elements with any single attribute that has both the local name 'href' and the XLink namespace +var thislevel = xml.evaluate(xpathEls, xml, null, XPathResult.ANY_TYPE, null); +var thisitemEl = thislevel.iterateNext(); +</pre> + +<h4 id="XPathResult_Defined_Constants" name="XPathResult_Defined_Constants">XPathResult Defined Constants</h4> + +<table class="standard-table"> + <thead> + <tr> + <td class="header">Result Type Defined Constant</td> + <td class="header">Value</td> + <td class="header">Description</td> + </tr> + </thead> + <tbody> + <tr> + <td>ANY_TYPE</td> + <td>0</td> + <td>A result set containing whatever type naturally results from the evaluation of the expression. Note that if the result is a node-set then UNORDERED_NODE_ITERATOR_TYPE is always the resulting type.</td> + </tr> + <tr> + <td>NUMBER_TYPE</td> + <td>1</td> + <td>A result containing a single number. This is useful for example, in an XPath expression using the <code>count()</code> function.</td> + </tr> + <tr> + <td>STRING_TYPE</td> + <td>2</td> + <td>A result containing a single string.</td> + </tr> + <tr> + <td>BOOLEAN_TYPE</td> + <td>3</td> + <td>A result containing a single boolean value. This is useful for example, in an XPath expression using the <code>not()</code> function.</td> + </tr> + <tr> + <td>UNORDERED_NODE_ITERATOR_TYPE</td> + <td>4</td> + <td>A result node-set containing all the nodes matching the expression. The nodes may not necessarily be in the same order that they appear in the document.</td> + </tr> + <tr> + <td>ORDERED_NODE_ITERATOR_TYPE</td> + <td>5</td> + <td>A result node-set containing all the nodes matching the expression. The nodes in the result set are in the same order that they appear in the document.</td> + </tr> + <tr> + <td>UNORDERED_NODE_SNAPSHOT_TYPE</td> + <td>6</td> + <td>A result node-set containing snapshots of all the nodes matching the expression. The nodes may not necessarily be in the same order that they appear in the document.</td> + </tr> + <tr> + <td>ORDERED_NODE_SNAPSHOT_TYPE</td> + <td>7</td> + <td>A result node-set containing snapshots of all the nodes matching the expression. The nodes in the result set are in the same order that they appear in the document.</td> + </tr> + <tr> + <td>ANY_UNORDERED_NODE_TYPE</td> + <td>8</td> + <td>A result node-set containing any single node that matches the expression. The node is not necessarily the first node in the document that matches the expression.</td> + </tr> + <tr> + <td>FIRST_ORDERED_NODE_TYPE</td> + <td>9</td> + <td>A result node-set containing the first node in the document that matches the expression.</td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/XPath">XPath</a></li> + <li><a href="http://www.xml.com/pub/a/2000/08/holman/index.html?page=2#xpath-info">XML Path Language </a>from <em><a href="http://www.xml.com/pub/a/2000/08/holman/">What is XSLT?</a> </em>by G. Ken Holman</li> +</ul> + +<div class="originaldocinfo"> +<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2> + +<ul> + <li>Based Upon Original Document <a class="external" href="http://www-xray.ast.cam.ac.uk/~jgraham/mozilla/xpath-tutorial.html">Mozilla XPath Tutorial</a></li> + <li>Original Source Author: James Graham.</li> + <li>Other Contributors: James Thompson.</li> + <li>Last Updated Date: 2006-3-25.</li> +</ul> +</div> diff --git a/files/ja/conflicting/web/xpath/introduction_to_using_xpath_in_javascript_caa7dfd0899fa1d0dfa5b1eb32e49ac7/index.html b/files/ja/conflicting/web/xpath/introduction_to_using_xpath_in_javascript_caa7dfd0899fa1d0dfa5b1eb32e49ac7/index.html new file mode 100644 index 0000000000..9186a55b76 --- /dev/null +++ b/files/ja/conflicting/web/xpath/introduction_to_using_xpath_in_javascript_caa7dfd0899fa1d0dfa5b1eb32e49ac7/index.html @@ -0,0 +1,94 @@ +--- +title: Using XPath +slug: Using_XPath +tags: + - AJAX + - Add-ons + - DOM + - Extensions + - Transforming_XML_with_XSLT + - XML + - XPath + - XSLT +translation_of: Web/XPath/Introduction_to_using_XPath_in_JavaScript +translation_of_original: Using_XPath +--- +<p> +</p><p><a href="ja/XPath">XPath</a> は XML 文書の一部を指し示すための言語であり、<a class="external" href="http://www.w3.org/TR/xpath">W3C 勧告</a>です。 +</p><p>この記事では JavaScript のコードから XPath の機能を使うための Mozilla のインターフェイスについて説明します。これらは <a class="external" href="http://www.w3.org/TR/DOM-Level-3-XPath/">DOM Level 3 XPath</a> (現時点では W3C Working Group Note) に記載されているものです。 +</p><p>この記事は XPath それ自体について教えるものではありません。XPath についてよく知らなければ、 <a class="external" href="http://www.w3schools.com/xpath/">W3Schools XPath tutorial</a> を参照して下さい。 +</p><p>{{ 英語版章題("Wrapper function") }} +</p> +<h3 id=".E3.83.A9.E3.83.83.E3.83.91.E9.96.A2.E6.95.B0">ラッパ関数</h3> +<p>次の関数を使うと、特定の XML ノードに対して XPath 式を評価する事ができます。第一引数は DOM ノードもしくは Document オブジェクトで、第二引数は XPath 式を定義した文字列です。 +</p> +<pre>// 特定の DOM ノードもしくは Document オブジェクト (aNode) に対して +// XPath 式 aExpression を評価し、その結果を配列として返す。 +// 最初の作業を行った wanderingstan at morethanwarm dot mail dot com に感謝します。 +function evaluateXPath(aNode, aExpr) { + var xpe = new XPathEvaluator(); + var nsResolver = xpe.createNSResolver(aNode.ownerDocument == null ? + aNode.documentElement : aNode.ownerDocument.documentElement); + var result = xpe.evaluate(aExpr, aNode, nsResolver, 0, null); + var found = []; + var res; + while (res = result.iterateNext()) + found.push(res); + return found; +} +</pre> +<p>この関数では <code>new XPathEvaluator()</code> を使用しています。このコンストラクタは Mozilla 固有のものです。他のブラウザで使用される可能性のある Web ページのスクリプトでは、 <code>new XPathEvaluator()</code> の呼び出しを次のコードに置き換えて下さい。 +</p> +<pre> // XPathEvaluator は Document を実装するオブジェクトに実装されている + var xpe = aNode.ownerDocument || aNode; +</pre> +<p>この場合、 <a href="ja/DOM/document.createNSResolver">XPathNSResolver</a> の作成は次のように単純にできます。 +</p> +<pre> var nsResolver = xpe.createNSResolver(xpe.documentElement); +</pre> +<p>ただ、 <code>createNSResolver</code> は、 XPath 式の中の名前空間接頭辞が検索対象の文書のものと一致する場合にしか使うべきではないということに注意してください。一致しない場合には、独自の XPathNSResolver の実装を用意しなければなりません。 +</p><p><a href="ja/XMLHttpRequest">XMLHttpRequest</a> を使って (<a href="ja/Parsing_and_serializing_XML">Parsing and serializing XML</a> にあるように) ローカルもしくはリモートの XML ファイルを DOM ツリーに読み込んだ場合には、 <code>evaluateXPath()</code> の第一引数に <code>req.responseXML</code> を指定します。 +</p><p>{{ 英語版章題("Sample usage") }} +</p> +<h3 id=".E4.BD.BF.E7.94.A8.E4.BE.8B">使用例</h3> +<p>次のような XML 文書があるとします。 (<a href="ja/How_to_create_a_DOM_tree">How to create a DOM tree</a> と <a href="ja/Parsing_and_serializing_XML">Parsing and serializing XML</a> も参照して下さい) +</p> +<pre><?xml version="1.0"?> +<people> + <person first-name="eric" middle-initial="H" last-name="jung"> + <address street="321 south st" city="denver" state="co" country="usa"/> + <address street="123 main st" city="arlington" state="ma" country="usa"/> + </person> + + <person first-name="jed" last-name="brown"> + <address street="321 north st" city="atlanta" state="ga" country="usa"/> + <address street="123 west st" city="seattle" state="wa" country="usa"/> + <address street="321 south avenue" city="denver" state="co" country="usa"/> + </person> +</people> +</pre> +<p>関数 <code>evaluateXPath</code> を使って、XPath 式でこの文書を「クエリ」する事ができます。DOM ツリーを走査しても同様の結果を得られますが、XPath 式を使った方がずっと高速で強力です。<code>id</code> 属性に頼る事ができれば <code>document.getElementById()</code> は強力ですが、XPath の強力さには全く及びません。いくつか例を示します。 +</p> +<pre>// 文書内の全ての人物の苗字を表示する +var results = evaluateXPath(people, "//person/@last-name"); +for (var i in results) + alert("Person #" + i + " has the last name " + results[i].value); + +// 2 人目の人物のノードを得る +results = evaluateXPath(people, "/people/person[2]"); + +// デンバーに住所を持つ全ての人物ノードを得る +results = evaluateXPath(people, "//person[address/@city='denver']"); + +// 通りの名前に "south" が含まれる全ての住所を得る +results = evaluateXPath(people, "//address[contains(@street, 'south')]"); +alert(results.length); +</pre> +<p>{{ 英語版章題("Resources") }} +</p> +<h3 id=".E8.B3.87.E6.96.99">資料</h3> +<ul> <li><a href="/ja/XPath" title="ja/XPath">XPath</a></li> <li><a class="external" href="http://www.topxml.com/code/default.asp?p=3&id=v20021221025528">XPath Visualizer for Mozilla and Firefox</a></li> <li><a class="external" href="http://www.w3schools.com/xpath/">XPath tutorial</a></li> <li><a class="external" href="http://forums.mozillazine.org/viewtopic.php?t=229106">この話題に関するフォーラムでの議論</a></li> <li><a class="external" href="http://zeus.jesus.cam.ac.uk/~jg307/mozilla/xpath-tutorial.html">Using the Mozilla JavaScript Interface to XPath</a> - JavaScript から XPath を使用するためのチュートリアルの草稿</li> +</ul> +<p> </p> + +<p>{{ languages( { "en": "en/Using_XPath", "fr": "fr/Utilisation_de_XPath", "ko": "ko/Using_XPath", "zh-cn": "cn/Using_XPath" } ) }}</p> |