From b22068d9536b4a2e9c71f451d8c3572a39a6f1eb Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 18 May 2021 02:33:14 +0900 Subject: MDN/Structures/Live_samples を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/05/18 時点の英語版に同期 - 訳注マクロを削除 --- files/ja/mdn/structures/live_samples/index.html | 49 ++++++++++++------------- 1 file changed, 23 insertions(+), 26 deletions(-) (limited to 'files') diff --git a/files/ja/mdn/structures/live_samples/index.html b/files/ja/mdn/structures/live_samples/index.html index 7bc8972e8a..018cffd3f5 100644 --- a/files/ja/mdn/structures/live_samples/index.html +++ b/files/ja/mdn/structures/live_samples/index.html @@ -2,6 +2,7 @@ title: ライブサンプル slug: MDN/Structures/Live_samples tags: + - Guide - Intermediate - MDN Meta - Structures @@ -10,35 +11,35 @@ translation_of: MDN/Structures/Live_samples ---
{{MDNSidebar}}
-

MDN は、記事に表示されているサンプルコードを、実際に見ている実行可能なサンプルに変換することをサポートしています。これらのライブサンプルには、HTML、CSS、およびJavaScriptを任意の組み合わせで含めることができます。「ライブ」サンプルはインタラクティブではありません。ただし、実際にコードサンプルによって生成されるため、サンプルの表示出力はサンプルのコードと正確に一致します。

+

MDN は、記事に表示されているサンプルコードを、実際に見ている実行可能なサンプルに変換することをサポートしています。これらのライブサンプルには、HTML、CSS、JavaScript を任意の組み合わせで含めることができます。「ライブ」サンプルはインタラクティブではありません。ただし、実際にコードサンプルによって生成されるため、サンプルの表示出力はサンプルのコードと正確に一致します。

ライブサンプルシステムの仕組み

-

ライブサンプルシステムは、グループ内のすべてのコードを集め、1 つの HTML ファイルにマージし、その HTML を {{HTMLElement("iframe")}} にレンダリングします。このためライブサンプルは2つの部分で構成されています。

+

ライブサンプルシステムは、グループ内のすべてのコードを集め、1 つの HTML ファイルにマージし、その HTML を {{HTMLElement("iframe")}} にレンダリングします。このためライブサンプルは 2 つの部分で構成されています。

-

このコンテキストでは、コードブロックの「グループ」は、見出しまたはブロック要素 ( {{HTMLElement("div")}} など) の ID によって識別されます。

+

このコンテキストでは、コードブロックの「グループ」は、見出しまたはブロック要素 ({{HTMLElement("div")}} など) の ID によって識別されます。

このマクロは特別な URL を使用して、指定されたグループのサンプルコード、例えば https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/Web/CSS/animation/_samples_/Cylon_Eye を取得します。一般的な構造は https://url-of-page_samples/group-id で、 group-id はコードが配置されている見出しまたはブロックの ID です。

-

結果として得られるフレーム (またはページ) はサンドボックスで保護されており、技術的にはウェブ上で動作するものすべてを行う可能性があります。もちろん、実際の問題として、コードはそのページの要点に貢献しなければなりません。MDN 上で実行されているランダムなものは、エディターコミュニティによって削除されます。

+

結果として得られるフレーム (またはページ) はサンドボックスで保護されており、技術的にはウェブ上で動作するものすべてを行う可能性があります。もちろん、実際の問題として、そのコードがそのページの要点に貢献していなければなりません。無関係なものが MDN 上で実行されている場合は、編集者コミュニティが削除します。

-

注意: ライブサンプルの出力を表示するには、マクロを使用する必要があります。MDN のエディターは、セキュリティを確保するために <iframe> 要素の直接使用を取り除きます。

+

注: ライブサンプルの出力を表示するには、マクロを使用する必要があります。

-

サンプルのコードを含む各 {{HTMLElement("pre")}} ブロックには、HTML、CSS、または JavaScript コードのいずれかを示すクラスがあり、それぞれ「brush:html」、「brush:css」、「brush:js」です。これらのクラスは、wiki が正しく使うために、対応するコードブロック上になければなりません。幸いにも、各クラスはエディターのツールバーで構文ハイライト機能を使用すると自動的に追加されます。

+

サンプルのコードを含む各 {{HTMLElement("pre")}} ブロックには、HTML、CSS、または JavaScript コードのいずれかを示すクラスがあり、それぞれ "brush: html"、"brush: css"、"brush: js" です。これらのクラスは、対応するコードブロック上になければなりません。

-

ライブサンプルシステムには多数のオプションが用意されており、少しずつ見ていきます。

+

ライブサンプルシステムにはたくさんのオプションが用意されていますが、それらを少しずつ分解して見ていきたいと思います。

ライブサンプルのマクロ

@@ -55,19 +56,15 @@ translation_of: MDN/Structures/Live_samples 
 \{{EmbedLiveSample(block_ID, width, height, screenshot_URL, page_slug)}}
-
-

Note: 見出しが翻訳されている場合、その ID 属性が自動的に翻訳されたテキストに合わせてアップデートされます。そのため、翻訳記事ではマクロが正しく動作するために、マクロ内で呼び出される block_ID の値を変更しなくていけません。

-
-
block_ID
-
必須: コードを描画する見出しまたは囲みブロックの ID。適切な ID であるかどうかを確認する最善の方法は、ページの目次のセクションの URL を見ることです。注記: 見出しが翻訳されている場合、その ID 属性が自動的に翻訳されたテキストに合わせてアップデートされます。そのため、マクロ内で呼び出される block_ID の値を変更しなくていけません。 {{訳注("日本語では見出し要素には name 属性を追加して英語版と同じ ID となるようにしています。")}}
+
必須: コードを描画する見出しまたは囲みブロックの ID。適切な ID であるかどうかを確認する最善の方法は、ページの目次でそのセクションの URL を見ることです。ページのソースを見ることで確認することもできます。
width
-
作成する {{HTMLElement("iframe")}} の幅で、px で指定します。これはオプションで、省略すると合理的なデフォルト幅が使用されます。特定の幅を使用する場合は、height パラメーターも指定する必要があります。
+
作成する {{HTMLElement("iframe")}} の幅で、px で指定します。これは省略可能で、省略すると合理的な既定の幅が使用されます。特定の幅を使用する場合は、height 引数も指定する必要があります。
height
-
作成する {{HTMLElement("iframe")}} の高さで、px で指定します。これはオプションで、省略すると合理的なデフォルトの高さが使用されます。特定の高さを使用する場合は、width パラメーターも指定する必要があります。どちらか一方しか使用しない場合は、デフォルトのフレームサイズが使用されます。
+
作成する {{HTMLElement("iframe")}} の高さで、px で指定します。これは省略可能で、省略すると合理的な既定の高さが使用されます。特定の高さを使用する場合は、width 引数も指定する必要があります。どちらか一方しか使用しない場合は、既定のフレームサイズが使用されます。
screenshot_URL
-
ライブサンプルの外観を示すスクリーンショットの URL。これはオプションですが、新しいテクノロジが動作しないユーザのブラウザに対して役立つ可能性があるため、サンプルがブラウザーでサポートされている場合の様子を確認できます。このパラメータを含めると、ライブサンプルの横に、適切な見出し付きのスクリーンショットが表示されます。
+
ライブサンプルの外観を示すスクリーンショットの URL。これは省略可能ですが、新しい技術が動作しないユーザーのブラウザーではサンプルがブラウザーでサポートされている場合の様子を確認できるので有用です。この引数を含めると、ライブサンプルの横に、適切な見出し付きのスクリーンショットが表示されます。
page_slug

サンプルが入っているページのスラッグです。これは省略可能で、指定されていない場合、サンプルはマクロが使用されたのと同じページから取得されます。

@@ -83,7 +80,7 @@ translation_of: MDN/Structures/Live_samples
block_ID
-
コードを引っ張ってくる見出しまたは囲みブロックの ID。正しいIDであるかどうかを確認する最善の方法は、ページの目次のセクションの URL を見ることです。注記: 見出しが翻訳されている場合、その ID 属性が自動的に翻訳されたテキストに合わせてアップデートされます。そのため、マクロ内で呼び出される block_ID の値を変更しなくていけません。{{訳注("日本語では見出し要素には name 属性を追加して英語版と同じ ID となるようにしています。")}}
+
コードの引用元となる見出しまたは囲みブロックの ID。正しい ID であるかどうかを確認する最善の方法は、ページの目次でそのセクションの URL を見ることです。ページのソースを見ることで確認することもできます。
link_text
リンクテキストとして使用する文字列。
@@ -132,22 +129,22 @@ translation_of: MDN/Structures/Live_samples 
.box {
   width: 200px;
-  height: 100 px;
   border-radius: 6px;
+  padding: 20px;
   background-color: #ffaabb;
 }
 
 #item {
-  width: 100%;
   font-weight: bold;
   text-align: center;
-  font-size: 2em;
+  font-family: sans-serif;
+  font-size: 1.5em;
 }

JavaScript

-

このコードは非常に簡単です。クリックすると警告が表示されるテキスト「Hello world!」にイベントハンドラーをアタッチするだけです。

+

このコードはとても簡単です。クリックすると警告が表示されるテキスト「Hello world!」にイベントハンドラーをアタッチするだけです。

var el = document.getElementById('item');
 el.onclick = function() {
@@ -155,15 +152,15 @@ el.onclick = function() {
 }
-

結果

+

結果

下記は \{{EmbedLiveSample('Live_sample_demo')}} を通じて、上のコードブロックを実行した結果です。

{{EmbedLiveSample('Live_sample_demo')}}

-

下記は \{{LiveSampleLink('Live_sample_demo', 'Live sample demo link')}} を通じて、これらのコードブロックを経由して呼び出される結果のリンクです。

+

下記は \{{LiveSampleLink('Live_sample_demo', 'ライブサンプルデモへのリンク')}} を通じて、これらのコードブロックを経由して呼び出される結果のリンクです。

-

{{LiveSampleLink('Live_sample_demo', 'Live sample demo link')}}

+

{{LiveSampleLink('Live_sample_demo', 'ライブサンプルデモへのリンク')}}

ライブサンプルに関する取り決め

@@ -172,6 +169,6 @@ el.onclick = function() {
ライブサンプルを追加する場合、コードブロックは最初のものがこのサンプルのメイン言語に対応するようにソートする必要があります。たとえば、HTML リファレンスのライブサンプルを追加する場合、最初のブロックは HTML でなければならず、CSS リファレンスのライブサンプルを追加するときは CSS でなければなりません。
見出しの名前付け
曖昧さがない場合 (例: サンプルが「Examples」セクションの下にある場合)、見出しは対応する言語の唯一の名前である HTML、CSS、JavaScript、SVG など (上記参照) で直接的に表します。「HTML コンテンツ」や「JavaScript コンテンツ」のような見出しは使用しないでください。しかし、そのような短い見出しがコンテンツを不明瞭にする場合、より思慮深いタイトルを使用することができます。
-
「Result」ブロックを使用する
-
異なるコードブロックの後、EmbedLiveSample マクロを使用する直前に、「Result」ブロックを使用してください (上記参照)。このようにすると、この例の意味は、読者とページを解析するツール (スクリーンリーダー、ウェブクローラーなど) の両方にとってより明確になります。
+
「結果」ブロックを使用する
+
異なるコードブロックの後、EmbedLiveSample マクロを使用する直前に、「結果」ブロックを使用してください (上記参照)。このようにすると、この例の意味は、読者とページを解析するツール (画面リーダー、ウェブクローラーなど) の両方にとってより明確になります。
-- cgit v1.2.3-54-g00ecf