blob: 882a3e8a69221bd976d96e8ddad3d54c02a156f3 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
---
title: コードサンプルを「ライブ」に変換するには
slug: MDN/Contribute/Howto/Convert_code_samples_to_be_live
tags:
- Beginner
- Howto
- MDN Meta
translation_of: MDN/Contribute/Howto/Convert_code_samples_to_be_live
---
<div>{{MDNSidebar}}</div>
<p class="summary">MDN には「<a href="/ja/docs/MDN/Structures/Live_samples">ライブサンプル</a>」システムがあり、ここではコードサンプルが、そのサンプルの出力を直接表示するのに使われます。しかし、既存の記事にはこのシステムをまだ使っていないコードサンプルが多々あり、変換する必要があります。</p>
<p><span class="seoSummary">ライブサンプルは、サンプルの出力がどのようなものかを見ることができ、ドキュメントをよりダイナミックで教育的なものにできます。このガイドは既存サンプルを取り上げて、「ライブ」動作を追加する方法を掲載します。</span></p>
<dl>
<dt><strong>行う必要のあるページ</strong></dt>
<dd>静的なコード例 (単なる HTML、CSS、JavaScript のブロック) を掲載している記事で、実際に動いているところを見せた方が良いと思われるもの。</dd>
<dt><strong>タスクを行うのに必要な知識</strong></dt>
<dd>
<ul>
<li>コードサンプルに応じて、 HTML, CSS 及び/あるいは JavaScript を理解すること</li>
<li>MDN 記事内の <a href="/ja/docs/MDN/Tools/KumaScript">KumaScript</a> マクロを使う能力</li>
</ul>
</dd>
<dt><strong>タスクを実行するステップ</strong></dt>
<dd>
<ol>
<li>「ライブ」に変換すべきだと思うコード例を見つけてください。</li>
<li>コードサンプルが「ライブ」となるよう変換してください。</li>
<li>以前にサンプル出力を表示するために使われていた、コードや画像を削除してください。</li>
</ol>
</dd>
</dl>
<p>ライブサンプルの作成と編集についての詳細情報は、 <a href="/ja/docs/MDN/Structures/Live_samples">ライブサンプルシステムの使用</a>を参照してください。</p>
|
