) をクリックします。ライブサンプルフレームを設定するためのダイアログボックスが開きます
デフォルトでは現在編集中の記事ですが、MDN の別の場所で記事を選択することもできます。これにより、必要に応じて複数ページのサンプルを再利用することができます。(このフィールドに新しいテキストを入力すると、部分的に一致するページのメニューが表示され、必要なページのタイトルを選択します)
\{{ EmbedLiveSample('Live_sample_demo') }}
MDN は、記事に表示されているサンプルコードを、実際に見ている実行可能なサンプルに変換することをサポートしています。これらのライブサンプルには、HTML、CSS、およびJavaScriptを任意の組み合わせで含めることができます。「ライブ」サンプルはインタラクティブではありません。ただし、実際にコードサンプルによって生成されるため、サンプルの表示出力はサンプルのコードと正確に一致します。
ライブサンプルシステムは、グループ内のすべてのコードを集め、1 つの HTML ファイルにマージし、その HTML を {{HTMLElement("iframe")}} にレンダリングします。このためライブサンプルは2つの部分で構成されています。
このコンテキストでは、コードブロックの「グループ」は、見出しまたはブロック要素 ( {{HTMLElement("div")}} など) の ID によって識別されます。
このマクロでは、特別な URL を使用して、http://url-of-page$samples/group-id (group-id はコードが配置されている見出しまたはブロックの ID) という特定のグループのサンプルコードを取得します。
結果として得られるフレーム (またはページ) はサンドボックスで保護されており、技術的にはウェブ上で動作するものすべてを行う可能性があります。もちろん、実際の問題として、コードはそのページの要点に貢献しなければなりません。MDN 上で実行されているランダムなものは、エディターコミュニティによって削除されます。
注意: ライブサンプルの出力を表示するには、マクロを使用する必要があります。MDN のエディターは、セキュリティを確保するために <iframe> 要素の直接使用を取り除きます。
サンプルのコードを含む各 {{HTMLElement("pre")}} ブロックには、HTML、CSS、または JavaScript コードのいずれかを示すクラスがあり、それぞれ「brush:html」、「brush:css」、「brush:js」です。これらのクラスは、wiki が正しく使うために、対応するコードブロック上になければなりません。幸いにも、各クラスはエディターのツールバーで構文ハイライト機能を使用すると自動的に追加されます。
ライブサンプルシステムには多数のオプションが用意されており、少しずつ見ていきます。
ライブサンプルを表示するために使用できるマクロは 2 つあります。
EmbedLiveSample はライブサンプルをページに埋め込みます。LiveSampleLink はライブサンプルを新しいページに開くリンクを作成します。多くの場合、EmbedLiveSample や LiveSampleLink マクロは、追加の作業をほぼ全くすることなくページに追加することができます。サンプルが見出しの ID で識別されるか、ID を持つブロックに含まれていれば、マクロを追加するだけでその作業が行われるはずです。
\{{EmbedLiveSample(block_ID, width, height, screenshot_URL, page_slug)}}
name 属性を追加して英語版と同じ ID となるようにしています。")}}name 属性を追加して英語版と同じ ID となるようにしています。")}}px で指定します。これはオプションで、省略すると合理的なデフォルト幅が使用されます。特定の幅を使用する場合は、height パラメーターも指定する必要があります。px で指定します。これはオプションで、省略すると合理的なデフォルトの高さが使用されます。特定の高さを使用する場合は、width パラメーターも指定する必要があります。どちらか一方しか使用しない場合は、デフォルトのフレームサイズが使用されます。 \{{LiveSampleLink(block_ID, link_text)}}
name 属性を追加して英語版と同じ ID となるようにしています。")}}以下のセクションでは、ライブサンプルシステムの一般的な使用例をいくつか説明します。
これらのすべてのケースでライブサンプルの結果を表示するには、エディターで公開をクリックする必要があります (編集モードから離れます)。ライブサンプルにはインセプションのように再帰的な性質があるため、プレビュー機能でライブサンプルを表示することはできません。
よく使用されるケースの 1 つは、既に MDN に表示されている既存のコードスニペットを実際のサンプルに変換することです。
最初のステップでは、コードスニペットを追加するか、既存のサンプルをコンテンツやマークアップの観点からライブサンプルとして使用できるようにします。コードスニペットは、まとめて実行可能な完全な例を構成する必要があります。たとえば、既存のスニペットに CSS のみが表示されている場合は、CSS が操作する HTML のスニペットを追加する必要があります。
それぞれのコードは {{HTMLElement("pre")}} ブロックにあり、各ブロックはブロックごとに言語ごとに適切にマークされていなければなりません。ほとんどの場合、これは既に行われていますが、コードの各部分が正しい構文で構成されていることを確認することは、常に二重チェックしておく価値があります。ツールバーの PRE アイコンの隣には、MDN が構文強調表示を行うさまざまな言語のドロップダウンメニューアイコン (ツールヒント: 構文ハイライター) があります。構文の強調表示のためにブロックの言語を設定することで、ライブサンプルシステムの目的のための言語と関連付けられます。
注意: 複数の言語のブロックが独立していて、すべて一緒に連結する場合があるかもしれません。コードの塊りに続いて、動作原理の説明があって、また次の塊り、…という構成ができます。これにより、説明テキストを交えたライブサンプルを利用するチュートリアルなどを作成することがより容易になります。
HTML、CSS、JavaScript コードの {{HTMLElement("pre")}} ブロックがそれぞれの言語の構文強調表示に対して正しく設定されていることを確認してください。
注意: MDN にコンテンツを貼り付ける際には、意図せず不要なスタイルやクラスを取り込む可能性のあるスタイル付きコンテンツ (たとえば、別のサイトからコピーされたコードの構文強調を含む) を貼り付けることを意識してください。こうならないように注意してください。必要に応じて、ソースモードで編集内容を確認し、不要なスタイルやクラスを削除してください (貼り付ける前に確認するか、代わりに「プレーンテキストとして貼り付け」オプションを使用してください)。
コードが配置され、各ブロックの言語を識別するように適切に構成されたら、iframeを作成するマクロを挿入する必要があります。
) をクリックします。新しいページを作成していて、ライブサンプルとして提示したいコードを挿入したい場合は、さらに多くの作業をエディターで行うことができます！
) をクリックします。
前述のように、サンプルファインダーは、コードサンプルの iFrame を挿入アイコンをクリックするとアクティブになります。残念なことに、サンプルファインダーは編集しないと使用できないマクロを生成することがあります。必要に応じて慎重にチェックして編集すべき 2 つの問題エリアがあります。
サンプルファインダーは次のようになりました。
\{{ EmbedLiveSample('Examples', '', '', '', 'Web/CSS/@counter-style') }}このマクロは動作しません。block_ID が Examples となっていますが、この場合は Example でなければなりません。(このセクションのソース ID を調べて、使用する必要のある block_ID を確認してください。) 同様に page_slug が @counter-style になっていますが、@counter-style/negative となるべきです。これらの修正は、編集ページで直接行うことができます。
編集すると、マクロは次のようになります。
\{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/@counter-style/negative') }}この編集されたマクロは動作します。マクロが正常に動作している場合は、Open in CodePen ボタンが表示されます。この例のサムネイルは、Open in CodePen ボタンの上に表示されます。ボタンがあるがサムネイルがない場合は、少し待ってください。サーバーがこれを生成するには時間がかかることがあります。
既存のサンプルを探して更新する場合は、更新の主な 3 つの種類があります:
注意: ライブサンプルシステムを使用するために更新が必要なサンプルがある記事を見つけた場合は、タグ「NeedsLiveSample」をページに追加してください。
MDN にはライブサンプルシステムをまだ使用していない古いサンプルがたくさんあります。私たちの目標は、これらのほとんどまたはすべてをライブサンプルに更新することです。これにより、一貫性とユーザビリティが向上します。MDN を日常的に使用するときには、これらの多くがほぼ確実に見つかるでしょう。しかし、あなたが特にそれらを更新しようと探している場合、それらを見つけることができますか？残念ながら簡単な方法はありません。ですが、それらを追跡するのに役立つガイドラインがいくつかあります：
このセクションは、ライブサンプルテンプレートボタンを使用してメイン見出し (「ライブサンプルデモ」) だけでなく、HTML、CSS、および JavaScript コンテンツのサブ見出しも作成した結果です。それぞれのブロックに限定されませんし、さらに、特定の順序である必要はありません。
削除したいものを削除することもできます。スクリプトが必要ない場合は、その見出しとその {{HTMLElement("pre")}} ブロックを削除してください。コードブロック (HTML、CSS、または JavaScript) の見出しは、ライブサンプルマクロでは使用されないため、削除することもできます。
テンプレートが挿入されたので、いくつかのコード、さらには説明テキストを挿入することができます。
この HTML は、メッセージの配置とスタイルに役立つ段落とブロックを作成します。
<p>A simple example of the live sample system in action.</p> <div class="box"> <div id="item">Hello world! Welcome to MDN</div> </div>
CSS コードは、ボックスとその内部のテキストのスタイルを設定します。
.box {
width: 200px;
height: 100 px;
border-radius: 6px;
background-color: #ffaabb;
}
#item {
width: 100%;
font-weight: bold;
text-align: center;
font-size: 2em;
}
このコードは非常に簡単です。クリックすると警告が表示されるテキスト「Hello world!」にイベントハンドラーをアタッチするだけです。
var el = document.getElementById('item');
el.onclick = function() {
alert('Owww, stop poking me!');
}
下記は \{{EmbedLiveSample('Live_sample_demo')}} を通じて、上のコードブロックを実行した結果です。
{{EmbedLiveSample('Live_sample_demo')}}
下記は \{{LiveSampleLink('Live_sample_demo', 'Live sample demo link')}} を通じて、これらのコードブロックを経由して呼び出される結果のリンクです。
{{LiveSampleLink('Live_sample_demo', 'Live sample demo link')}}
EmbedLiveSample マクロを使用する直前に、「Result」ブロックを使用してください (上記参照)。このようにして、この例の意味は、読者とページを解析するツール (スクリーンリーダー、ウェブクローラーなど) の両方にとってより明確になります。