HTMLの名前空間(namespace)について掘り下げてみる

この記事は書かれてから1年以上が経過しており、最新の情報とは異なる可能性があります

例えば、

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml">

『こういうのを HTML に埋め込んでください』とか、

<meta property="og:title" content="ソーシャル用のタイトルがここに入る">
<meta property="og:type" content="article">

『この記述を入れておきましょう』とか、

<fb:like url="***" layout="button_count" width="300">いいね!</fb:like>

『このコードは古くて廃止されてるから使わないようにしましょう』とか・・・。

次から次へと新しい方法が出て来て、なんだかよくわからないけど、言われるがままに埋め込んでる、という人もけっこういるのではないかなーと思ってたりしてます。

この辺を少し掘り下げて、理解を深めたいと思います。

OpenGraph のケース

og なんとかで始まる埋め込みの記述と以前からの meta 要素とは、少し異なる点があります。

<meta name="description" content="ここにページの説明文が入る">
<meta property="og:description" content="ここにogpの説明文が入る">

『meta と property が違うのはなぜ？』

前から存在している、description や keywords, はたまた最近の viewport なんかは、 meta 要素の name 属性で記述されているのに対して、 ソーシャルメディアでよく使われる、og:title や og:description, はたまた Facebook で使われる fb:appid あたりは、meta 要素の property 属性で記述されています。

両者にどのような違いがあるのでしょうか？

OpenGraph に関する仕様は、http://ogp.me/ に掲載されています。 こちらによると、

To turn your web pages into graph objects, you need to add basic metadata to your page. We’ve based the initial version of the protocol on RDFa which means that you’ll place additional tags in the of your web page.

「(OpenGraph は、) RDFa というプロトコルの最初のバージョンを基に作ったんだぜー」

と書いてあります。

ということは、RDFa の概要を知ることで、記述の差異が見えてくるのではないでしょうか。ちょっと脇道に逸れて RDFa を調べてみます。

RDFa とは？

ざっくり言うと、RDFa は セマンティックWeb を実現するために、その文書（≒HTML）に対して 意味を付与するメタ情報を記述できる仕様です。類似の仕様に、 Microdata などがあります。

また、最後の “a” は、attribute の “a” で、HTML の要素の中に書く、**属性（attribute）**に相当しますね。 ※より正確な情報は、ぐぐるなりして仕様を読んでほしいところなんですが（僕もそこまで読んでません）・・・。 こちらに http://www.w3.org/TR/rdfa-core/ 仕様としてまとめられているので、Example を引用して紹介してみようと思います。

<html xmlns="http://www.w3.org/1999/xhtml" prefix="foaf: http://xmlns.com/foaf/0.1/ dc: http://purl.org/dc/terms/">
  <head>
    <title>My home-page</title>
    <meta property="dc:creator" content="Mark Birbeck" />
    <link rel="foaf:topic" href="http://www.example.com/#us" />
  </head>
  <body>...</body>
</html>

html要素の中に、 prefix 属性として、Compact URI Expressions と呼ばれる形式で、プレフィックス名と URI をコロンでつなげたものを、 複数ずらずらと書くようになってます。

さらに、meta 要素の property 属性に、先ほど読み込んだプレフィックス名を用いた “dc:creator” という形で、メタ情報を記述しています。

property 属性以外にも記述の仕方はあるようですが、本題から逸れすぎてしまうため、割愛します。

RDFa の仕様を踏まえた OpenGraph の記述方法

こちらも公式のサンプルを引用しています。

<html prefix="og: http://ogp.me/ns#">
  <head>
    <title>The Rock (1996)</title>
    <meta property="og:title" content="The Rock" />
    <meta property="og:type" content="video.movie" />
    <meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
    <meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
    ...
  </head>
  ...
</html>

ほぼ、先ほどの RDFa の書き方と同じですね。

ポイントとしては、

  • html 要素の prefix 属性に prefix=”prefix: uri” の形で宣言しておく
  • meta 要素の property 属性に property=”prefix:name” の形で記述する

あたりですね。

meta 要素の name 属性, property 属性の違いというのも、そもそも別ルールを宣言して読み込んでいるため、違ってててもおかしくないですね。

xmlns なの？ prefix なの？

ちなみに、xmlns なの？ prefix なの？というあたりに関しては、 http://dev.w3.org/html5/rdfa/#backwards-compatibility に詳しくまとめられています。

また、こちらの方が RDFa のバージョンの差異も含めて、分かりやすくまとめられていて読みやすいのではないかと思います http://domes.lingua.heliohost.org/rdfa/intro-syntax1.html。

こちらも簡単にポイントだけかいつまんでみると、

  • RDFa 1.0 は古いやつだよ、1.1 が新しいやつだよ
  • RDFa 1.1 では、xmlns が廃止予定になった代わりに prefix 使ってね
  • でも後方互換性を考えると、XHTML + RDFa 1.0 のときは xmlns 使うべきじゃない？

といった感じかと・・・。

SVG のケース

名前空間の話に入る前に、もう1つ事例を見てみようと思います。

SVG でリンクを指定する際は、以下のような感じになります。 こちらも仕様サンプル（http://www.w3.org/TR/SVG/linking.html#Links）からの引用です。

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="5cm" height="3cm" viewBox="0 0 5 3" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <desc>Example link01 – a link on an ellipse </desc>
  <rect x=".01" y=".01" width="4.98" height="2.98" fill="none" stroke="blue" stroke-width=".03"/>
  <a xlink:href="http://www.w3.org">
    <ellipse cx="2.5" cy="1.5" rx="2" ry="1" fill="red" />
  </a>
</svg>

注目すべきは、svg 要素の xmlns 属性と、svg 要素の中に入っている a 要素です。

<svg width="5cm" height="3cm" viewBox="0 0 5 3" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

こちら、xlink というものが指定されてますね。

<a xlink:href="http://www.w3.org">
...
</a>

さらに、a 要素の xlink:href 属性として、リンク先が指定されています。

ここでは、SVG 内でのリンクの指定方法の話がしたかったわけではなくて、 プレフィックス名を使った別ルールの読み込み、および使い方の一例として挙げただけです。

xmlns に『xlink っていうのはですねー、こういうのなんですよー』と教えてあげることで、実際に使いたいときに、『xlink のー、href 属性を使いますよー』と、プレフィックス付きで使うことが出来るようになります。

xlink というのは、SVG に限った話ではなく、汎用的な XML 文書に対するリンクの仕様です。

このように、外部の別ルールを xmlns などで宣言しておくことで、それぞれの仕様が小さくシンプルになり、使うところだけ宣言して使うといったスマートな使い方が出来るようになっていると言えるのかもしれません。

名前空間（namespace）の話

さて、ここでようやく**名前空間とは何か？**について掘り下げてみようと思います。

ちなみに、もうお気づきだと思いますが、xmlns の ns とは、namespace の略のことですね。まさに名前空間を宣言してます。

一昔前、Facebook が謎の文法『FBML』なるものを使って Facebook ページを作ってね！みたいなのがありましたが、 あれは名前空間の fb を使ったものになります。

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml">

fb という名前空間を宣言する必要があるので、xmlns:fb=”https://www.facebook.com/2008/fbml” という記述が必要になりますね。

<fb:like url="***" layout="button_count" width="300">いいね!</fb:like>

like 要素なんてのは、元々のHTMLには存在してないのですが、fb という名前空間を宣言することで、その名前空間上で限定的に使える like 要素を記述することが出来るようになってます。

これは、先ほど出て来た xlink であっても、他の何かであっても同様で、外部のルールを中に持ち込む場合には、名前空間を宣言して、要素の前にプレフィックスをつけるという手順を踏むことで、名前の重複を起こさずに、既存のものと同様に使えるようになります。

また、Microsoft の Office 製品で HTML ファイルを出力したことがある方なら、ひょっとしたら見たことあるかもしれませんが、

<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns="http://www.w3.org/TR/REC-html40">

これは Office Word から吐き出された HTML ファイルの html 要素（ちょっと古いかも）の xmlns で、 o は Office 関連のルール、w は Office Word 関連のルールとして宣言されてます。

さらに、

<o:p></o:p>

ファイル内に、こんな形で Office のプレフィックスのついた p 要素 みたいなのも出てきます。これは HTML の p 要素ではなくて、Office で使われている p 要素という意味ですね。

このように、名前空間を上手く宣言してやることで、他の仕様を取り込んで利用することが出来るようになります。

よく知られた default prefix とは？（おまけ）

http://www.w3.org/TR/xhtml-rdfa-primer/#default_prefixes からの引用です。

<html>
  <head> ... </head>
  <body>
    <div>
      <h2 property="dc:title">The trouble with Bob</h2>
      ...
      <h3 property="dc:creator" resource="#me">Alice</h3>
      ...
    </div>
  </body>
</html>

prefix 属性が一切書かれていないにも関わらず、dc:title, dc:creator という記述が使えてしまっています。

これは、広く使われている prefix は、デフォルトで宣言なしに使えるようにする、という仕様によるもので、OpenGraph の og も含まれているようです。（その辺の話はこちらに書いてあります http://www.w3.org/2010/02/rdfa/profile/data/）

ただ、あくまで書き忘れた場合などでもちゃんと動くようにするためのものらしいので、基本は書いた方がいいようですね。

まとめ

新しいルールがどんどん増えて、混乱しがちかもしれませんが、『小さなルールが名前空間上で相互連携している』と考えれば、 それが必要なタイミングになったら、その小さなルールだけ調べれば良いことになりますね。

全体がもやもやして、『巨大で、よくわからない仕様群たち』に見えるかもしれませんが、まず名前空間の概念を押さえて、『ここまでは HTML の話、ここから先は HTML 以外の話』みたく、切り分けて考えられるようになれれば、『これは後で調べればいいやー』と切り分け出来るようになり、不安も減って心も穏やかになれるのではないでしょうか。やらなくてもいいことをどんどん増やして、心を穏やかにしていきましょう！。

参考URL

この記事は書かれてから1年以上が経過しており、最新の情報とは異なる可能性があります

もし記事内に誤りなどございましたら、 @girigiribauer @girigiribauer.com までご一報いただけると助かります。