diff options
Diffstat (limited to 'files/ja/web/svg/namespaces_crash_course/index.html')
| -rw-r--r-- | files/ja/web/svg/namespaces_crash_course/index.html | 151 |
1 files changed, 151 insertions, 0 deletions
diff --git a/files/ja/web/svg/namespaces_crash_course/index.html b/files/ja/web/svg/namespaces_crash_course/index.html new file mode 100644 index 0000000000..e2d0f49690 --- /dev/null +++ b/files/ja/web/svg/namespaces_crash_course/index.html @@ -0,0 +1,151 @@ +--- +title: 名前空間の速修講座 +slug: Web/SVG/Namespaces_Crash_Course +tags: + - SVG + - XML +translation_of: Web/SVG/Namespaces_Crash_Course +--- +<h3 id=".E5.B0.8E.E5.85.A5" name=".E5.B0.8E.E5.85.A5">導入</h3> +<p><a href="ja/XML">XML</a> の派生言語として、 <a href="ja/SVG">SVG</a> は名前空間付けられています。もしあなたが SVG コンテンツを作成する予定なら名前空間の概念と使い方を理解することは重要です。 Firefox 1.5 リリースより前の幾つかのバージョンの SVG ビューワは残念ながら名前空間に対して十分な注意を払いませんが、 とても厳格でなくてならない <a href="ja/Gecko">Gecko</a> ベースのブラウザのようなユーザエージェントが複数の XML 派生言語をサポートするために不可欠です。今、名前空間を理解するためにいくらかの時間をとり、将来頭を悩ませる時間を節約しましょう。</p> +<h3 id=".E8.83.8C.E6.99.AF" name=".E8.83.8C.E6.99.AF">背景</h3> +<p>異なった種類の XML ベースのコンテンツが同じ XML ファイルの中で一緒に混ざるのを可能にするのことは W3C の長年の目標です。 例えば、SVG と MathML は直接 XHTML ベースの科学ドキュメントに組み込まれるかもしれません。このようなコンテンツ タイプを混ぜることが可能にすることは、多くの利点がありますが、解決するために非常に大問題を要しました。</p> +<p>当然、それぞれのXML 派生言語は仕様で述べたマークアップタグ名の意味を定義します。 1つの XML ドキュメントに異なった XML 派生言語のコンテンツを混ぜることによる問題は 別の派生言語が 1つの派生言語によって定義されたタグと同じ名前のタグを定義するかもしれないということです。 例えば、XHTMLとSVGの両方には、<code><title></code> タグがあります。 事実、ユーザエージェントはどうやって XML コンテンツが(あらかじめ)知っているものであるとき時に、単なる未知の任意のタグ名を含む無意味な XML ファイルでないと言えますか?</p> +<p>一般的な意見とは逆に、この質問の答えは「<code>DOCTYPE</code> 宣言から伝えることができる」ではありません。 DTD は混ぜられたコンテンツを念頭におかれて設計されませんでした、そして現在、複雑な混ぜられた DTD を作成する過去の試みが失敗したと考えられます。 XML、およびいくつかの XML 派生言語(SVG を含む)は DOCTYPE 宣言を必要とせず、そして SVG 1.2 は一つも持たないでしょう。<code>DOCTYPE</code> 宣言 が (普通) 一種類のコンテンツ タイプのファイルに一致するという事実は単なる偶然の一致です。DTDは内容の識別ではなく、ヴァリデーションためだけのものです。 <code>DOCTYPE</code> 宣言を使用することで XML コンテンツをだまし、特定するユーザエージェントは害を引き起こします。</p> +<p>その質問の本当の答えは XML コンテンツがユーザエージェントにどの派生言語にそのタグが属しているかを 明確な「名前空間宣言」をタグに与えるで伝えるというものです。</p> +<h3 id=".E5.90.8D.E5.89.8D.E7.A9.BA.E9.96.93.E3.82.92.E5.AE.A3.E8.A8.80.E3.81.99.E3.82.8B" name=".E5.90.8D.E5.89.8D.E7.A9.BA.E9.96.93.E3.82.92.E5.AE.A3.E8.A8.80.E3.81.99.E3.82.8B">名前空間を宣言する</h3> +<p>それでは、名前空間宣言はどのように見える、何所におくのでしょうか? 短い例があります。</p> +<pre><svg xmlns="http://www.w3.org/2000/svg"> + <!-- ここに更なるタグ --> +</svg> +</pre> +<p>名前空間宣言は <code>xmlns</code> 属性によって提供されます。この属性は <code><svg></code> タグとその子供タグは名前空間名<span class="nowiki">'http://www.w3.org/2000/svg'</span>を持っている いずれかの XML 派生言語に属すると言っています。もちろん、それは SVG です。名前空間宣言はルート要素で一度のみ提供されることが必要なことに注意してください。その宣言は <i>標準</i>の名前空間を定義するので、ユーザエージェントは <code><svg></code> タグの全ての子孫タグが同じ名前空間に属することが分かります。ユーザエージェントはそのマークアップアップの処理方を知っているか確かめるために名前空間名をチェックします。</p> +<p>名前空間名はただの文字列であることに注意してください。つまり SVG 名前空間名も URI のように見えますが重要ではありません。 URI は一意なので、一般的に使用されて、どこかに「リンク」する意志はありません。 (実際 URI が非常に頻繁に使用されるので、「名前空間 URI」という用語は「名前空間名」の代わりに一般的に使われます。)</p> +<h4 id=".E3.83.87.E3.83.95.E3.82.A9.E3.83.AB.E3.83.88.E5.90.8D.E5.89.8D.E7.A9.BA.E9.96.93.E3.82.92.E5.86.8D.E5.AE.A3.E8.A8.80.E3.81.99.E3.82.8B" name=".E3.83.87.E3.83.95.E3.82.A9.E3.83.AB.E3.83.88.E5.90.8D.E5.89.8D.E7.A9.BA.E9.96.93.E3.82.92.E5.86.8D.E5.AE.A3.E8.A8.80.E3.81.99.E3.82.8B">デフォルト名前空間を再宣言する</h4> +<p>もしルートタグの全ての子孫がデフォルト名前空間にあると定義されているなら、他の名前空間のコンテンツを混ぜるにはどうしたら良いのでしょう ? 簡単です。デフォルト名前空間を再定義するだけです。短い例があります</p> +<pre><html xmlns="http://www.w3.org/1999/xhtml"> + <body> + <!-- ここに幾つか XHTML タグ --> + <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px"> + <!-- ここに幾つか SVG タグ --> + </svg> + <!--ここに幾つか XHTML タグ --> + </body> +</html> +</pre> +<p>この例でルート <code><html></code> タグの <code>xmlns</code> 属性はデフォルト名前空間が XHTML であるように宣言しています。結果として、ユーザエージェントによってそれとその全ての子供のタグは XHTML に属するものとして解釈されます、<code><svg></code> タグを除いて。<code><svg></code> タグは自身の <code>xmlns</code> 属性を持ち、デフォルト名前空間を再定義することで、ユーザエージェントに <code><svg></code> とその子孫(それらが再びデフォルト名前空間を再宣言しない限り)が SVG に属していることを伝えます。</p> +<p>見て、名前空間って全然難しくないでしょう。</p> +<h4 id=".E5.90.8D.E5.89.8D.E7.A9.BA.E9.96.93.E6.8E.A5.E9.A0.AD.E8.BE.9E.E3.82.92.E5.AE.A3.E8.A8.80.E3.81.99.E3.82.8B" name=".E5.90.8D.E5.89.8D.E7.A9.BA.E9.96.93.E6.8E.A5.E9.A0.AD.E8.BE.9E.E3.82.92.E5.AE.A3.E8.A8.80.E3.81.99.E3.82.8B">名前空間接頭辞を宣言する</h4> +<p>XML 派生言語は自身のタグだけではなく、自身の属性も定義します。 標準では、名前空間を全く持たず、ユニークな名前を持っている要素に現れるので、属性がユニークであるとだけ知られています。 しかし、時々多くの異なった要素の上でそれらを再利用することができるように属性を定義して、それらが使用されている要素に関わらず同じ属性であるとなおも考えられることが必要です。 これのとても良い例は XLink 仕様で定義された <code>href</code> 属性です。 この属性は外部のリソースにリンクする方法として他の XML 派生言語によって一般的に使用されます。 しかし、あなたはどうやってその属性がどの派生言語、この場合 XLink 、 に属するとユーザエージェントに伝えますか? 以下の例を考えてください。</p> +<pre><svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <script xlink:href="cool-script.js" type="text/ecmascript"/> +</svg> +</pre> +<p>この例はかなり珍しい属性 <code>xmlns:xlink</code> を含んでいます。 最初の 'xmlns' 部分から推測できるように、これは別の名前空間宣言です。しかしながら、デフォルト名前空間を設定する代わりに、この名前空間宣言は「名前空間接頭辞」と呼ばれるものに名前空間を設定します。 この場合、私たちは接頭辞 <code>xlink</code> (2つめの部分)を使用することを選びました。その接頭辞が XLink に属する属性についてユーザエージェントに伝えるのに使用されるためです。</p> +<p>名前が示すように、名前空間接頭辞は属性名とタグ名の前に置くのに使用されます。 これは上の例で <script> タグに示されるように属性名より前に名前空間接頭語とコロンを加えることで行われます。 これは特定の属性が名前空間接頭辞(XLink)に割り当てられた名前空間に属すことをユーザエージェントに伝え、他のタグにおいても同じ意味で使用することができる属性です。</p> +<p>名前空間名に関連付けられていな接頭辞の利用による XML エラーに注意してください。上の例で <code>xmlns:xlink</code> 属性によって作られた関連付けは <code>xlink:href</code> 属性がエラーに引き起こさないために必要不可欠です。この XLink 属性は SVG の <code><a></code> と <code><use></code>, <code><image></code> タグや他のタグでも頻繁に使われるので、常にドキュメントに XLink の宣言を含めることは良い考えです。</p> +<p>余談として、タグ名に名前空間接頭語を使用することができるのを知っていると役に立ちます。これは特定のタグ(しかし今回の子供ではありません!)が接頭辞に割り当てられた名前空間に属することをユーザエージェントに伝えます。 これを知っていることは、あなたが以下の例のようなマークアップに出くわしたときの混乱を節約するでしょう:</p> +<pre><html + xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg"> + <body> + <h1>XHTML にインラインで埋め込まれた SVG </h1> + <svg:svg width="300px" height="200px"> + <svg:circle cx="150" cy="100" r="50" fill="#ff0000"/> + </svg:svg> + </body> +</html> +</pre> +<p><code><svg:svg></code> タグとその子供の <code><svg:circle></code> に名前空間接頭辞が使われているので、デフォルト名前空間を再宣言する必要が無いことに注意してください。一般にこの方法で沢山のタグに接頭辞をつけるよりもデフォルト名前空間を再宣言した方が良いです。</p> +<h3 id=".E5.90.8D.E5.89.8D.E7.A9.BA.E9.96.93.E4.BB.98.E3.81.91.E3.82.89.E3.82.8C.E3.81.9F_XML_.E3.81.A7.E3.81.AE.E3.82.B9.E3.82.AF.E3.83.AA.E3.83.97.E3.83.86.E3.82.A3.E3.83.B3.E3.82.B0" name=".E5.90.8D.E5.89.8D.E7.A9.BA.E9.96.93.E4.BB.98.E3.81.91.E3.82.89.E3.82.8C.E3.81.9F_XML_.E3.81.A7.E3.81.AE.E3.82.B9.E3.82.AF.E3.83.AA.E3.83.97.E3.83.86.E3.82.A3.E3.83.B3.E3.82.B0">名前空間付けられた XML でのスクリプティング</h3> +<p>名前空間はマークアップだけでなく、スクリプティングにも影響します。もし SVG のような 名前空間付けられた XML 用のスクリプトを書くなら次をお読みください。</p> +<p><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/">DOM Level 1</a> 勧告はオリジナルの <a class="external" href="http://www.w3.org/TR/REC-xml-names/">original Namespaces in XML</a> 勧告がリリースされる前に作られたので、DOM1 は名前空間を認識しません。これは SVG のような 名前空間付けられた XML で問題を引き起こします。それらの問題を解決するために <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/">DOM Level 2 Core</a> は全て DOM Level1 メソッドの適切な名前空間を認識している同等のメソッドを加えました。SVG でスクリプティングをするとき、<a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#Namespaces-Considerations">名前空間を認識しているメソッドを使うことが大切です</a>。下の表は SVG と一緒に使うべきではない DOM 1 メソッドと代わりに使うべき同等な DOM2 の対応するメソッドをリストしています。</p> +<table class="fullwidth-table"> + <tbody> + <tr> + <th>DOM1 (使わないで下さい)</th> + <th>DOM2 (代わりにこれらを使ってください!)</th> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-createAttribute">createAttribute</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-DocCrAttrNS">createAttributeNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-createElement">createElement</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-DocCrElNS">createElementNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getAttributeNode">getAttributeNode</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElGetAtNodeNS">getAttributeNodeNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getAttribute">getAttribute</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElGetAttrNS">getAttributeNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getElementsByTagName">getElementsByTagName</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-getElBTNNS">getElementsByTagNameNS</a> (<a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-A6C90942">要素にも追加されました</a>)</td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getNamedItem">getNamedItem</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-getNamedItemNS">getNamedItemNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#">hasAttribute</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElHasAttrNS">hasAttributeNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeAttribute">removeAttribute</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElRemAtNS">removeAttributeNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeNamedItem">removeNamedItem</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-removeNamedItemNS">removeNamedItemNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttribute">setAttribute</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElSetAttrNS">setAttributeNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttributeNode">setAttributeNode</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElSetAtNodeNS">setAttributeNodeNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setNamedItem">setNamedItem</a></td> + <td>[<a class="external" href="http://w" rel="freelink">http://w</a> ww.w3.org/TR/DOM-Level-2-Core/core.html#ID-setNamedItemNS setNamedItemNS]</td> + </tr> + </tbody> +</table> +<p>全ての DOM2 の名前空間を認識しているメソッドの最初の引数は問題になっている要素か属性の名前空間名(名前空間 URI としても知らています) で無ければなりません。SVG <strong>要素</strong> のためには、これは <span class="nowiki">'http://www.w3.org/2000/svg'</span> です。しかし、よく注意してください:<a class="external" href="http://www.w3.org/TR/xml-names11/#defaulting">Namespaces in XML 1.1</a> 仕様は接頭辞無しの属性の名前空間名は値をもっていません。言い替えると、そのタグの名前空間であっても、そのタグの名前空間を使わないということです。 代わりに<strong>無条件の(接頭辞無し)属性の名前空間名として <code>null</code> を使わなくてはなりません</strong>。つまり <code>document.createElementNS()</code> を使い SVG <code>rect</code> <em>要素</em>を作るには、こう書かなくてはなりません:</p> +<pre>document.createElementNS('http://www.w3.org/2000/svg', 'rect'); +</pre> +<p>しかし、SVG の <code>rect</code> 要素の <code>x</code> <em>属性</em>の値を取り出すにはこう書かなくてはなりません:</p> +<pre class="eval">rect.getAttributeNS(<b>null</b>, 'x'); +</pre> +<p>これは名前空間接頭辞)<em>付き</em>の属性(タグと同じ XML 派生言語に属していない属性)はこの限りではないことに注意してください。xlink:href 属性の様な属性はその接頭辞に割り当てられた名前空間名(XLink は <span class="nowiki">http://www.w3.org/1999/xlink</span>)が必要です。従って SVG の <code><a></code> 要素の <code>xlink:href</code> 属性の値を手に入れるにはこう書くでしょう:</p> +<pre>elt.getAttributeNS('http://www.w3.org/1999/xlink', 'href'); +</pre> +<p>名前空間を持った属性を設定するときに、後で DOM がより簡単に XML に変換できるように(例えばもしそれをサーバに送り返したいなら)、それらの接頭辞を2番目の引数にも含めることが推奨されます(が強制ではありません)。例:</p> +<pre>elt.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'otherdoc.svg'); +</pre> +<p>最後の例として、どうやってスクリプトを使って <image> 要素を動的に作るべきか実演を示します。</p> +<pre>var SVG_NS = 'http://www.w3.org/2000/svg'; +var XLink_NS = 'http://www.w3.org/1999/xlink'; +var image = document.createElementNS(SVG_NS, 'image'); +image.setAttributeNS(null, 'width', '100'); +image.setAttributeNS(null, 'height', '100'); +image.setAttributeNS(XLink_NS, 'xlink:href', 'flower.png'); +</pre> +<h3 id=".E3.81.BE.E3.81.A8.E3.82.81" name=".E3.81.BE.E3.81.A8.E3.82.81">まとめ</h3> +<p>常にあなたの XML ファイルの中で使う名前空間が宣言されているか確認してください。もしそうしていないと、Firefox のようなユーザエージェントはコンテンツを理解せずに単に XML マークアップを表示するか、ユーザに XML の中にエラーが有ることを伝えます。全新しい SVG ファイルを作る時、全ての一般的に使う名前空間宣言を含んだテンプレートを使うことは良い考えです。もしまだ持っていなければ、次のコードで作り始めてください</p> +<pre><svg version="1.1" + baseProfile="full" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:ev="http://www.w3.org/2001/xml-events"> +</svg> +</pre> +<p>あなたが特定のドキュメントでそれら全ての名前空間を使用しなくても、名前空間宣言を含んで全く害はありません。 後日、未使用の名前空間の1つをコンテンツに結局加えるなら、それはいくつかの煩わしいエラーから救ってくれるかもしれません。</p> +<h3 id=".E5.AE.8C.E5.85.A8.E3.81.AA.E4.BE.8B" name=".E5.AE.8C.E5.85.A8.E3.81.AA.E4.BE.8B">完全な例</h3> +<p>完全な例は <a href="ja/SVG/Namespaces_Crash_Course/Example">SVG:Namespaces Crash Course:Example</a> を参照してください。</p> |