Kuma 入門

草案
このページは完成していません。

この頁は、MDN wiki プラットフォームである「Kuma」の入門的な位置付けの記事です。「Kuma」の名称は日本語の「熊」に由来します。SUMO (Mozilla サポート)のベースである「Kitsune」より強大なクリーチャーという事で Kuma と命名しました。

【訳注: ※この記事の内容は、ロケール特有の内容・表現に変更しています。修正が必要な部分や追加すべき事項がある場合、翻訳者に連絡するか、適宜改変して下さい。】

注記: このページの内容は、本来はメインのユーザーガイドに配置されるべきものですが、まだ整理されていない状態です。古参ユーザは新規協力者に対しこのページの閲覧を促すか、あるいは適切な導線を配置するなど工夫し、円滑な編集作業の手助けをして下さい。

サーバー

環境 URL 目的
Dev https://developer-dev.allizom.org/ アルファ版。コードレビュー通過後、即、最新の機能や修正プログラムが追加される。
Stage https://developer.allizom.org/ ベータ版。本番環境移行前のテストや最終調整を行うためのサーバ。
Prod https://developer.mozilla.org/ 本番環境。一般ユーザが閲覧するためのページが配置されています。

旧システムとの相違点

リダイレクト

リダイレクトの構文が変更されました。現在は「REDIRECT」に続けて、リダイレクト先のページへの 標準の HTML リンクを入力する形になっています。ソース編集モードに切り替え、以下のようなコードを入力します。

<div>REDIRECT <a class="redirect" href="/destination/url/here">some title text here</a><div>

URL (※href 属性の値) は、「/<locale>/doc/foo」のようにサイトのベース URL からのパスとする必要があります。その他のスラッグから始まる相対 URL は機能しません。

デフォルトでは、見出しにはその内容から自動的に id 属性が付与され、アンカー (※ハッシュとも呼ばれる。URL の「#」記号より後の部分に相当) として機能します。但し、あなたが見出しを変更したり翻訳したりした場合、この属性値が変更され、そのアンカーへのリンクが破損してしまう可能性があります。

見出し要素に name 属性を追加する事で、このような問題を防ぎ、アンカーへの恒久的なリンクを保持する事が出来ます。name 属性と id 属性はともにページ上の特定の要素を示すものであり、ともにアンカーの役割を果たします。故にこの二つの属性値は文法上異なるもので有ってはならないため、 id 属性も同じ値とするのが良いでしょう。現在はソースエディタ上で係る変更を行う必要がありますが、将来的にはグラフィカルユーザーインターフェイスから変更できるようにする予定です。以下に、見出しのコンテンツテキストと、アンカーを異なるものにするためのコード例を示します。

<h2 id="All_about_Firefox" name="All_about_Firefox">Firefox の全て</h2>

同一ページ内から特定のアンカーに対してリンクを張る場合、次のテンプレートを用いる事が出来ます。

{{anch("Doing foo")}}

または通常の相対 URL を含む HTML をソースビュー上で記述しても良いでしょう。これは外部ページからリンクする際にも利用可能です。

<a href="/ja/docs/[記事へのパス]/[記事]#All_about_Firefox">Firefox の全て</a>

※MDN 日本語版では、URL は英語版と統一されており、容易な管理が可能な体制になっています。また、見出しのアンカーは TOC (目次)の href 属性にも影響します。そのため、アンカーは英語版と同じものとするのが良いでしょう。英語版の記事に id 属性しか指定されていないのであれば、同じ名前の name 属性を同一要素に指定します。初回翻訳時にこの手続きをしない場合、name 属性の無い全てのアンカーが見出しの内容の日本語文字列を URL エンコードしたものに自動修正されてしまい、修正がやや面倒になってしまいます。

Kuma の新機能

翻訳及びローカライゼーション

KumaScript

KumaScript については、『KumaScript 入門』 を参照して下さい。

Live Samples (Coming Soon)

Kuma では以下のような特別なマークアップにより HTML などのライブ表示例をページに挿入する事ができるようになります。

<section id="live-sample">
  <pre class="brush: html"><p class="shadow">text-shadow</p></pre>
  <pre class="brush: css">.shadow { text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue; }</pre>
  <pre class="brush: js">window.alert("Alert!")</pre>
</section>

注記: コードブロックは <ul> などでなく、<section> などの非フラグメント要素でラップしなくてはなりません。

ライブサンプルを表示するには http://page-url$samples/{section_id} の様な形式の src 属性を持つ iframe を使用します。
※src の実例: https://developer.mozilla.org/en-US/docs/Project:Getting_started_with_Kuma$samples/live_samples

<p class="shadow">text-shadow</p>
.shadow { text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue; }
console.log("Alert!")

<iframe src="https://developer.mozilla.org/en-US/docs/Project:Getting_started_with_Kuma$samples/live-sample"></iframe>

Kuma が出来ない事

---

オートメーション及びフィード

Kuma は 情報取得のための API を提供しています。最終的には自動的にコンテンツを更新するための機能の搭載を予定しています。詳細については 『Kuma API』をご覧下さい。

Kuma はサイトの更新を追跡するための各種フィードも提供しています。『MDN の Feeds API について』の頁をご覧ください。

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: ethertank
 最終更新者: ethertank,