diff options
Diffstat (limited to 'files/ja/mdn/structures/macros')
3 files changed, 268 insertions, 0 deletions
diff --git a/files/ja/mdn/structures/macros/commonly-used_macros/creating_templates_for_multi-languages/index.html b/files/ja/mdn/structures/macros/commonly-used_macros/creating_templates_for_multi-languages/index.html new file mode 100644 index 0000000000..a22ce9c70e --- /dev/null +++ b/files/ja/mdn/structures/macros/commonly-used_macros/creating_templates_for_multi-languages/index.html @@ -0,0 +1,12 @@ +--- +title: creating templates for multi-languages +slug: >- + MDN/Structures/Macros/Commonly-used_macros/creating_templates_for_multi-languages +--- +<div>{{MDNSidebar}}</div> +<div class="note"><strong>註：</strong> このページは執筆中です。</div> +<h2 id="執筆用memo">執筆用memo</h2> +<ul> <li>span 要素を使って言語版毎にテンプレートを用意するタイプの「ページ・プロパティ」は「なし（デフォルト）」にする。「English」などにするとテンプレートが英語版とその言語版とで二重に表示される現象が起きる。</li> +</ul> +<h2 id="テンプレートの_2_つのタイプ">テンプレートの 2 つのタイプ</h2> +<h2 id="page.langage_を使わない">page.langage を使わない</h2> diff --git a/files/ja/mdn/structures/macros/commonly-used_macros/index.html b/files/ja/mdn/structures/macros/commonly-used_macros/index.html new file mode 100644 index 0000000000..f7cc685313 --- /dev/null +++ b/files/ja/mdn/structures/macros/commonly-used_macros/index.html @@ -0,0 +1,210 @@ +--- +title: よく使われるマクロ +slug: MDN/Structures/Macros/Commonly-used_macros +tags: + - CSS + - Macros + - Reference + - Structures +translation_of: MDN/Structures/Macros/Commonly-used_macros +--- +<p>{{MDNSidebar}}</p> + +<p><span class="seoSummary">このページには MDN で使うために作られた汎用のマクロがたくさん掲載されています。これらのマクロの使い方については、<a href="/ja/docs/MDN/Contribute/Structures/Macros"> マクロの使い方</a> と <a href="/ja/docs/MDN/Contribute/Editor/Links#Using_link_macros">リンクを生成するマクロ</a> を見てください。</span> <a href="/ja/docs/MDN/Contribute/Structures/Macros/Other">その他のマクロ</a> には、めったに使われないマクロ、特殊な文脈でのみ使われるマクロ、使用が推奨されないマクロについての情報が書かれています。また、<a href="/en-US/dashboards/macros">MDNで使用できるマクロの完全な一覧</a>もあります。</p> + +<p><a href="/ja/docs/MDN/Contribute/Guidelines/CSS_style_guide">CSS スタイルガイド</a>も見てください。</p> + +<h2 id="Linking" name="Linking">リンク</h2> + +<h3 id="Creating_a_single_hyperlink" name="Creating_a_single_hyperlink">単一のハイパーリンクを作成する</h3> + +<p id="To_another_MDN_page_or_its_section_(anch_SectionOnPage_manch_Link_LinkItem_LinkItemDL)">一般的に、単なるリンクを作成するためにマクロを使う必要はありません。エディターインターフェイスにある <strong>リンク</strong> ボタンを使えば、リンクを作成できます。</p> + +<ul> + <li>{{TemplateLink("Glossary")}} マクロは MDN <a href="/ja/docs/Glossary">用語集</a>の中の指定した用語のエントリへのリンクを作成するのに使います。このマクロは、1つの必須の引数または2つの任意の引数を受け付けます。 + + <p>例:</p> + + <ol> + <li>用語の名前 (例えば "HTML")</li> + <li>用語の名前の代わりに記事内に表示するテキスト (これはあまり使用するべきではありません)。 {{Optional_Inline}}</li> + <li>この引数が指定されており 0 以外である場合、用語集へのリンクに使われるカスタムスタイルが適用されません。{{Optional_Inline}}</li> + </ol> + + <ul> + <li><code>\{{Glossary("HTML")}}</code> の表示は {{Glossary("HTML")}} となり、</li> + <li><code>\{{Glossary("CSS", "カスケーディングスタイルシート")}}</code> の表示は {{Glossary("CSS", "カスケーディングスタイルシート")}} となり、</li> + <li><code>\{{Glossary("HTML", "", 1)}}</code> の表示は {{Glossary("HTML", "", 1)}} となります。</li> + </ul> + </li> + <li>{{TemplateLink("anch")}} - ページ内の節へのリンクを生成 + <ul> + <li><code>\{{anch("Linking to pages in references")}}</code></li> + <li> + <p>デモ: {{anch("Linking to pages in references")}}</p> + </li> + </ul> + </li> +</ul> + +<h3 id="Linking_to_pages_in_references" name="Linking_to_pages_in_references">リファレンス内のページへのリンク</h3> + +<p>いろいろなマクロがあり、MDN の指定したリファレンスエリア内のページへのリンクを作成することができます。</p> + +<ul> + <li>{{TemplateLink("cssxref")}} は、<a href="/ja/docs/Web/CSS/Reference">CSS リファレンス</a>のページにリンクします。<br> + 例: <code>\{{CSSxRef("cursor")}}</code> の結果は {{CSSxRef("cursor")}} になります</li> + <li>{{TemplateLink("domxref")}} は DOM リファレンス内のページにリンクします。最後にカッコを入れると、関数名のようにリンクが表示されます。たとえば、<code>\{{DOMxRef("document.getElementsByName()")}}</code> は {{DOMxRef("document.getElementsByName()")}} になります。<code>\{{DOMxRef("Node")}}</code> は {{DOMxRef("Node")}} になります</li> + <li>{{TemplateLink("event")}} は DOM イベントリファレンスのページにリンクします。たとえば、<code>\{{Event("change")}}</code> は {{Event("change")}} になります</li> + <li>{{TemplateLink("HTMLElement")}} は HTML リファレンスの HTML 要素にリンクします</li> + <li>{{TemplateLink("htmlattrxref")}} は HTML 属性にリンクします。属性のみを指定する場合はグローバル属性の、属性名と要素名を指定する場合は特定の要素に関連付けられた属性の説明にリンクします。たとえば、<code>\{{HTMLAttrxRef("lang")}}</code> は {{HTMLAttrxRef("lang")}} のリンクを生成します。<code>\{{HTMLAttrxRef("type","input")}}</code> は {{htmlattrxref("type","input")}} のリンクを生成します。</li> + <li>{{TemplateLink("jsxref")}} は <a href="/ja/docs/Web/JavaScript/Reference">JavaScript リファレンス</a>のページにリンクします。</li> + <li>{{TemplateLink("SVGAttr")}} は特定の SVG 属性にリンクします。たとえば、<code>\{{SVGAttr("d")}}</code> は {{SVGAttr("d")}} のリンクを生成します。</li> + <li>{{TemplateLink("SVGElement")}} は SVG リファレンスの SVG 要素にリンクします。</li> + <li>{{TemplateLink("HTTPHeader")}} は <a href="/ja/docs/Web/HTTP/Headers">HTTP ヘッダー</a>にリンクします。</li> + <li>{{TemplateLink("HTTPMethod")}} は <a href="/ja/docs/Web/HTTP/Methods">HTTP リクエストメソッド</a>にリンクします。</li> + <li>{{TemplateLink("HTTPStatus")}} は <a href="/ja/docs/Web/HTTP/Status">HTTP レスポンスステータスコード</a>にリンクします。</li> +</ul> + +<h3 id="Linking_to_bugs" name="Linking_to_bugs">バグへのリンク</h3> + +<ul> + <li>バグ + <ul> + <li>{{TemplateLink("bug")}} を使うと、 bugzilla.mozilla.org に登録されているバグへのリンクを簡単に作ることができます。文法は <code>\{{Bug(123456)}}</code> です。 {{Bug(123456)}} のようなリンクになります。</li> + <li>{{TemplateLink("WebkitBug")}} は WebKit バグのデータベースへのリンクを挿入します。例えば <code>\{{WebkitBug(31277)}}</code> は {WebkitBug(31277)}} のようになります。</li> + </ul> + </li> +</ul> + +<h3 id="Navigation_aids_for_multi-page_guides" name="Navigation_aids_for_multi-page_guides">複数のページからなるガイドのためのナビゲーション補助</h3> + +<p>{{TemplateLink("Previous")}}、{{TemplateLink("Next")}}、{{TemplateLink("PreviousNext")}} は、一連の記事の中でのナビゲーションコントロールを提供します。一方向用のテンプレートでは、 前の または 次の 記事の Wiki 位置を指す1つの引数が必要です。{{TemplateLink("PreviousNext")}} については、前の記事、次の記事を指す 2つの引数を取ります。最初の引数が前の記事を指し、2番めの引数が次の記事を指します。</p> + +<h2 id="Code_samples" name="Code_samples">コードのサンプル</h2> + +<h3 id="Live_samples" name="Live_samples">Live サンプル</h3> + +<ul> + <li>{{TemplateLink("EmbedLiveSample")}} はコードサンプルの出力をページに埋め込むのに使います。解説は <a href="/ja/docs/MDN/Contribute/Structures/Live_samples">Live サンプル</a>のページにあります</li> + <li>{{TemplateLink("LiveSampleLink")}} はコードサンプルの出力を含むページへのリンクを作成します。解説は <a href="/ja/docs/MDN/Contribute/Structures/Live_samples">Live サンプル</a>のページにあります</li> +</ul> + +<h2 id="Sidebar_generation" name="Sidebar_generation">サイドバーの生成</h2> + +<p>ほぼすべての大きなページの集まりについて、雛形があります。典型的には、リファレンス、ガイド、チュートリアルでメインページに戻るためのリンク (パンくずリストではできないことがある) を提供し、記事を適切なカテゴリに配置します。</p> + +<ul> + <li>{{TemplateLink("CSSRef")}} は CSS リファレンスページのサイドバーを生成します</li> + <li>{{TemplateLink("HTMLRef")}} は HTML リファレンスページのサイドバーを生成します</li> + <li>{{TemplateLink("APIRef")}} は Web API リファレンスページのサイドバーを生成します</li> +</ul> + +<h2 id="General-purpose_formatting" name="General-purpose_formatting">汎用の書式</h2> + +<h3 id="Inline_indicators_for_API_documentation" name="Inline_indicators_for_API_documentation">API 文書のためのインラインインジケーター</h3> + +<p>{{TemplateLink("optional_inline")}} と {{TemplateLink("ReadOnlyInline")}} は API 文書の中で通常、オブジェクトのプロパティまたは関数の引数のリストを記述するのに使われます。</p> + +<p>用法: <code>\{{optional_inline()}}</code> または <code>\{{ReadOnlyInline}}</code>. 例:</p> + +<dl> + <dt><code>isCustomObject</code>{{ReadOnlyInline}}</dt> + <dd><code>true</code> の場合、オブジェクトはカスタムオブジェクトであることを示します。</dd> + <dt><code>parameterX</code>{{Optional_Inline}}</dt> + <dd>ごにょごにょごにょ...</dd> +</dl> + +<h2 id="Status_and_compatibility_indicators" name="Status_and_compatibility_indicators">状態と互換性についての表示</h2> + +<h3 id="Inline_indicators_with_no_additional_parameters" name="Inline_indicators_with_no_additional_parameters">インラインインジケーター (追加引数なし)</h3> + +<h4 id="Non-standard" name="Non-standard">標準外のもの</h4> + +<p>{{TemplateLink("non-standard_inline")}} は、その API が標準化されておらず、また標準化の予定もないことを示すインラインマークを付けます。</p> + +<h5 id="Syntax" name="Syntax">構文</h5> + +<p><code>\{{Non-standard_Inline}}</code></p> + +<h5 id="Examples" name="Examples">例</h5> + +<ul> + <li>アイコン: {{Non-standard_Inline}}</li> +</ul> + +<h4 id="Experimental" name="Experimental">実験的なもの</h4> + +<p>{{TemplateLink("experimental_inline")}} は、その API が広く実装されておらず、また将来変更される可能性があることを示すインラインマークを付けます。</p> + +<h5 id="Syntax_2" name="Syntax_2">構文</h5> + +<p><code>\{{Experimental_Inline}}</code></p> + +<h5 id="Examples_2" name="Examples_2">例</h5> + +<ul> + <li>アイコン: {{Experimental_Inline}}</li> +</ul> + +<h3 id="Inline_indicators_that_support_specifying_the_technology" name="Inline_indicators_that_support_specifying_the_technology">特定の技術の対応状況を表すインラインインジケーター</h3> + +<p>これらのマクロにパラメータを指定する場合は、"html", "js", "css", "gecko",のうちの1つにバージョン番号を加えたものとなります。</p> + +<h4 id="Deprecated" name="Deprecated">非推奨のもの</h4> + +<p>{{TemplateLink("deprecated_inline")}} はインラインの非推奨(deprecated) マークを付け、その API が公式には非推奨であり、使用を控えるべきであることを示します。<strong>注:</strong> 非推奨 (deprecated) が意味するのは、その項目はもう使用されるべきではないが、まだ機能するものであることです。もう機能しないものを示す用語としては、廃止 (obsolete) を使ってください。</p> + +<p>ブラウザー特有の記述 (HTML, API, JS, CSS, …) では、引数を使用しないでください。</p> + +<h5 id="Syntax_3" name="Syntax_3">構文</h5> + +<p><code>\{{Deprecated_Inline}}</code> または <code>\{{Deprecated_Inline("gecko5")}}</code></p> + +<h5 id="Examples_3" name="Examples_3">例</h5> + +<ul> + <li>アイコン: {{Deprecated_Inline}}</li> + <li>バッジ: {{Deprecated_Inline("gecko5")}}</li> +</ul> + +<h4 id="Obsolete" name="Obsolete">廃止</h4> + +<p>{{TemplateLink("obsolete_inline")}} はインラインの廃止 (obsolete) マークを付け、例えばその関数、メソッド、またはプロパティ等を使用してはいけないことを示します。</p> + +<p>ブラウザー特有の記述 (HTML, API, JS, CSS, …) では、引数を使用しないでください。</p> + +<h5 id="Syntax_4" name="Syntax_4">構文</h5> + +<p><code>\{{Obsolete_Inline}}</code> または <code>\{{Obsolete_Inline("js1.8.5")}}</code></p> + +<h5 id="Examples_4" name="Examples_4">例</h5> + +<ul> + <li>アイコン: {{Obsolete_Inline}}</li> + <li>バッジ: {{Obsolete_Inline("js1.8.5")}}</li> +</ul> + +<h3 id="Template_badges" name="Template_badges">テンプレートバッジ</h3> + +<p>これらのマクロはほとんど <a href="/ja/docs/Web/API">WebAPI</a> ページで使われます。{{anch("Creating new badges")}} に新しいバッジを作成するための情報があります。</p> + +<h3 id="Page_or_section_header_indicators" name="Page_or_section_header_indicators">ページまたはセクションのヘッダーを示すインジケーター</h3> + +<p>これらのテンプレートが示すのは、上記の対応するインラインマークと同じものです。テンプレートはリファレンスページのメインページタイトルの (または、パンくずリストがあるならばその) 直下に置きます。ページ内のセクションをマークアップすることもできます。</p> + +<ul> + <li>{{TemplateLink("non-standard_header")}}: <code>\{{Non-standard_Header}}</code> {{Non-standard_Header}}</li> + <li><a href="/ja/docs/MDN/Contribute/Guidelines/Conventions_definitions#Experimental">実験的な機能</a>を説明するページでは {{TemplateLink("SeeCompatTable")}} を使用する必要があります。例: <code>\{{SeeCompatTable}}</code> {{SeeCompatTable}}</li> + <li>{{TemplateLink("deprecated_header")}}: <code>\{{Deprecated_Header}}</code> {{Deprecated_Header}}</li> + <li>{{TemplateLink("deprecated_header")}} with parameter: <code>\{{Deprecated_Header("gecko5")}}</code> {{Deprecated_Header("gecko5")}} ブラウザーに依存しない領域 (HTML、API、JS、CSS など) でこの引数を使用しないでください</li> + <li>{{TemplateLink("obsolete_header")}}: <code>\{{Obsolete_Header}}</code> {{Obsolete_Header}}</li> + <li>{{TemplateLink("obsolete_header")}} with parameter: <code>\{{Obsolete_Header("gecko30")}}</code> {{Obsolete_Header("gecko30")}} ブラウザーに依存しない領域 (HTML、API、JS、CSS など) でこの引数を使用しないでください</li> + <li>{{TemplateLink("secureContext_header")}}: <code>\{{SecureContext_Header}}</code> {{SecureContext_Header}}</li> +</ul> + +<h3 id="Indicating_that_a_feature_is_available_in_web_workers" name="Indicating_that_a_feature_is_available_in_web_workers">ウェブワーカーで使用できる機能であることを示す</h3> + +<p>{{TemplateLink("AvailableInWorkers")}} マクロは、その機能が<a href="/ja/docs/Web/API/Web_Workers_API">ウェブワーカー</a>のコンテキストで有効であることを示すためのローカライズされた注記ボックスを挿入するのに使われます。</p> + +<p>{{AvailableInWorkers}}</p> diff --git a/files/ja/mdn/structures/macros/index.html b/files/ja/mdn/structures/macros/index.html new file mode 100644 index 0000000000..40cddcf091 --- /dev/null +++ b/files/ja/mdn/structures/macros/index.html @@ -0,0 +1,46 @@ +--- +title: マクロ +slug: MDN/Structures/Macros +tags: + - Guide + - Kuma + - KumaScript + - MDN Meta + - Structures +translation_of: MDN/Structures/Macros +--- +<div>{{MDNSidebar}}</div><p><span class="seoSummary">MDN が動作している <a href="/ja/docs/MDN/Kuma" title="/en-US/docs/Project:MDN/Kuma">Kuma</a> プラットフォームは、幅広い作業の自動化を可能にする強力なマクロシステムである <a href="/ja/docs/MDN/Contribute/Tools/KumaScript" title="/en-US/docs/Project:MDN/Kuma/KumaScript_guide">KumaScript</a> を提供しています。この記事は MDN のマクロを記事中で呼び出す方法について情報を提供します。</span></p> + +<p><a href="/ja/docs/MDN/Contribute/Tools/KumaScript" title="/en-US/docs/Project:MDN/Kuma/KumaScript_guide">KumaScript ガイド</a>では MDN 上でマクロを利用する方法について詳細な情報を提供しているので、このセクションではむしろ全体の簡潔なまとめをします。</p> + +<h2 id="How_macros_are_implemented" name="How_macros_are_implemented">マクロはどのように実装されているか</h2> + +<p>MDN 上で動作するマクロは、サーバーで実行される <a href="/ja/docs/Web/JavaScript" title="/ja/docs/Web/JavaScript">JavaScript</a> コードを使用して実装され、 <a href="https://nodejs.org/en/" title="https://nodejs.org/en/">Node.js</a> によって解釈されます。そのうえ数多くのライブラリを用意しており、 Wiki 風のサービスを提供します。また、 Wiki プラットフォームとそのコンテンツを、マクロと連携させる機能を提供します。もっと詳細に興味があるのであれば、 <a href="/ja/docs/MDN/Contribute/Tools/KumaScript" title="/en-US/docs/Project:MDN/Kuma/KumaScript_guide">KumaScript ガイド</a>を参照して下さい。</p> + +<h2 id="Using_a_macro_in_content" name="Using_a_macro_in_content">コンテンツでのマクロの利用</h2> + +<p>実際にマクロを使うには、マクロの呼び出しを二重の中括弧で囲むだけです。引数があれば括弧で囲みます。つまり以下のようになります。</p> + +<pre class="notranslate">\{{macroname(parameter-list)}}</pre> + +<p>マクロ呼び出しに関するいくつかのポイント</p> + +<ul> + <li>マクロ名は大文字と小文字を区別します。それに関するエラーはよくあるので幾つかののパターンがあります。例えば、マクロ名に大文字があるのに全て小文字で入力しているかもしれません。また、小文字から始まる所を大文字にしてしまっているのかもしれません。</li> + <li>引数はコンマで区切ります。</li> + <li>引数が無ければ括弧は取ってしまって構いません。 <code>\{{macroname()}}</code> と <code>\{{macroname}}</code> はまったく同等です。</li> + <li>数値の引数は引用符で囲む必要がありませんが、囲んでも構いません（ただし、複数のピリオドを含むバージョン番号を渡す場合などは、引用符で囲む必要があります）。</li> + <li>エラーが発生した場合は、コードを丁寧に読み返して下さい。何が問題なのかそれでも特定できなかった場合には、 <a href="/ja/docs/MDN/Kuma/Troubleshooting_KumaScript_errors">KumaScript エラーのトラブルシューティング</a>を参照して下さい。</li> +</ul> + +<p>マクロは高度にキャッシュ化されています。どの入力値についても（引数や、マクロを動作させる URL といった環境変数のいずれでも）、その結果は記憶され再利用されます。つまり、入力が変化した時だけマクロは実行されます。</p> + +<div class="note"> +<p><strong>注:</strong> ブラウザーでページを強制的に再読み込み（つまり、 Shift を押しながら再読み込み）すると、そのページのマクロを再評価することが出来ます。</p> +</div> + +<p>マクロは大きなテキストブロックを挿入したり、 MDN の他記事からの内容で置き換えたりするようなシンプルなこともできますし、サイトを走査して目次をまるごと作り上げたり、出力のスタイリングをしたり、リンクを張ったりといった複雑なこともできます。</p> + +<p>最もよく使われるマクロについて<a href="/ja/docs/MDN/Contribute/Structures/Macros/Commonly-used_macros" title="/ja/docs/Project:MDN/Contributing/Custom_macros">良く使われるマクロ</a>のページで学習することが出来ます。また、<a href="https://developer.mozilla.org/ja/docs/templates" title="https://developer.mozilla.org/en-US/docs/templates">マクロの完全なリスト</a>もあります。そして多くのマクロには最上部のコメントとして、ソースに説明が組み込まれています。</p> + +<p>{{EditorGuideQuicklinks}}</p> |