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/html/multimedia_and_embedding | |
| 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/html/multimedia_and_embedding')
7 files changed, 2086 insertions, 0 deletions
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> |