👩🏻‍🔬 👃🏼 🙆 microdataおよびmicrodata DOM API 📫 🈂️ 🙎🏽

はじめに

HTML5が解決しようとした問題の1つは、<header>、<nav>、<figure>などの標準的なセマンティック要素の導入によって証明されるように、論理（したがってマシンの可読性）マークアップを増やすことでした。これはすべて良いことですが、コンテンツ要素に特定の機械可読属性を追加して、異なるコンテンツに使用されるマークアップが異なる場合でも、予測可能なスクリプトで使用できるようにする必要がある場合があります。このニーズは、シンプルで下位互換性のあるMicroformatsの助けと、より難解なRDFaの助けを借りて、ある程度まではすでに満たされています。

この点で、この問題の解決策がHTML5仕様にmicrodata仕様（以降Microdata）として追加されたことは驚くことではありません。これには、任意の要素に追加できる属性のセットと、上のmicrodataを処理/集約するための関連DOM APIページ。

Microdataは、過去に既に持っていたことを改善しようとしています。マイクロフォーマットと同じくらい理解しやすく、独自のパーサーを作成せずにデータを処理できる組み込みメカニズムを提供します。もちろん、必要に応じてJavaScriptを使用したネイティブMicrodata DOM APIサポートなしで、ブラウザーサポート用に独自のMicrodataパーサーを作成できます。この記事では、Microdata HTML属性とDOM API構文について説明します。

 :   Opera   Microdata    .

HTML構文

microdataは一連の要素で構成され、各要素にはキーと値のペアで表される一連のプロパティがあります。実際、実際のWebオタクのように、microdata形式で自分を説明しましょう。あなたは私のパターンであなた自身の例を書くことができます。

  :      Microdata    HTML5-.        Microdata    ,     .

まず、 itemscope属性を使用して、適切な要素を要素のコンテナとしてマークできます

 <article itemscope> </article>

明らかに、必要なデータを含む要素を選択する必要がありますが、マークするデータは重要ではありません。この場合、伝記カードをマークします。最初のプロパティは名前であり、 itemprop属性を使用してマークします。

 <article itemscope> <h2 itemprop="name">Chris Mills</h2> </article>

itemprop属性は、データを含むアイテムを選択します。属性値はプロパティの名前であり、要素のコンテンツはプロパティの値です。プロパティをいくつか追加して、要点を確実に把握しましょう。

 <article itemscope> <h2 itemprop="name">Chris Mills</h2> <ul> <li>Nationality: <span itemprop="nationality">British</span></li> <li>Age: <span itemprop="age">33</span></li> <li>Hair colour: <span itemprop="colour">Brown</span></li> </ul> </article>

場合によっては、プロパティ値は要素のテキストコンテンツではなく、同じ要素の属性の値です。例：

<media>タグの場合、プロパティ値はsrc属性の値です。
<a>タグの場合、href属性の値。
<time>タグの場合、「datetime」属性の値。

（注翻訳者：他の要素の値は仕様にあります）

一方、プロパティ値がURLの場合、対応する要素を介して表現する必要があります。対応する要素は、たとえば<a>要素を介して、外部リソースをポイントまたはロードします。プロパティ値が日付または時刻（またはその両方）である場合、プロパティは<time>要素と「datetime」属性で表現する必要があります。 itemprop属性はまったく同じ方法で追加されますが、同時に、プロパティ値は要素のテキストコンテンツではなく属性値になります。

いくつかの例：

 <article itemscope> <h2 itemprop="name">Chris Mills</h2> <p><img itemprop="image" src="Chris-Mills.png" alt="Photo of Chris Mills - this is me"></p> <ul> <li>Nationality: <span itemprop="nationality">British</span></li> <li>Age: <span itemprop="age">33</span></li> <li>Date of birth: <time itemprop="birthday" datetime="1978-06-27">June 27th 1978</time></li> <li>Hair colour: <span itemprop="colour">Brown</span></li> </ul> </article>

 :      (10  2011),        <data>,      .

ネストされたMicrodataノード

また、互いに簡単にMicrodata要素を導入することもできます（トランスレーターに注意してください：混乱しないように、「Microdataノード」）。最上位のMicrodataノードはitemscope属性でマークされ、ネストされたMicrodataノードもitemscope属性でマークされます。グループに関する情報を伝記カードに追加しましょう。

 <article itemscope itemtype="http://example.org/biography"> ... <li> <div itemscope itemprop="band"> <h3>My band</h3> <ul> <li>Name: <span itemprop="name">Conquest of Steel</span></li> <li>Band: <span itemprop="style">Heavy metal</span></li> <li>Members: <span itemprop="size">5</span></li> </ul> </div> </li> ... </article>

異なるプロパティ、1つの名前。 1つのプロパティ、異なる名前

たとえば、次のように、複数の要素に同じプロパティ名を指定できます。

 <li>Members: <ul> <li itemprop="member">Claymore Clark</li> <li itemprop="member">DD Danger</li> <li itemprop="member">Dan Durrant</li> <li itemprop="member">Chris Mills</li> <li itemprop="member">Vic Victory</li> </ul> </li>

その結果、5つのプロパティを持つMicrodataノードが作成されます。すべてのプロパティの名前は「memeber」で、それぞれに独自の値があります。

また、逆に、1つの要素に複数のプロパティを配置して、これらのプロパティに同じ値を与えることもできます。

 <li>Band: <span itemprop="style favouritemusic">Heavy metal</span></li>

itemcope要素の外側のプロパティを指す

Microdataノードに、この句（要素）の外部で実際に定義されていないプロパティを含める場合があります。これを行うには、 itemref属性内の外部プロパティのIDを参照します。次の例を考えてみましょう。この例では、グループのメンバーを要素の外でhtmlマークアップの別の場所に移動しました。

 <article> ... <li> <div itemscope itemprop="band" itemref="members"> <h3>My band</h3> <ul> <li>Name: <span itemprop="name">Conquest of Steel</span></li> <li>Band: <span itemprop="style">Heavy metal</span></li> <li>Members: <span itemprop="bandsize">5</span></li> </ul> </div> </li> </ul> </article> <ul id="members"> <li itemprop="member">Claymore Clark</li> <li itemprop="member">DD Danger</li> <li itemprop="member">Dan Durrant</li> <li itemprop="member">Chris Mills</li> <li itemprop="member">Vic Victory</li> </ul>

この場合、「メンバー」プロパティは、Microdataアイテムのitemref属性が参照する識別子を持つ要素内にあります。

: ID itemref . : itemref="members instruments gigdates"

後で使用できるMicrodataノードのプロパティディクショナリの定義

Microdataマークアップを自分で使用する限り、すべてが問題ありません。Microdataノードのプロパティセットを自分で定義します。ただし、他のWeb開発者と作業する場合、特定のMicrodataノードのプロパティディクショナリを定義する必要があります。これを行うには、 itemtype属性を使用して各ノードにタイプを指定します。この属性の値はURLの形式であり、このURLによって参照されるリソースは存在する場合と存在しない場合があります。 URLを他のユーザーにプロパティディクショナリについて通知するインターネット上の実際のページにポイントすると良いですが、そうする必要はありません。

例に戻りましょう。

 <article itemscope itemtype="http://example.org/biography"> ... <div itemscope itemprop="band" itemtype="http://example.org/band" itemref="members"> ... </div> ... </article>

Microdataノードは1つのタイプのみを持つことができ、タイプはプロパティのディクショナリを定義します。したがって、この例では、タイプexample.org/biographyの要素には、名前、スタイル、バンドサイズ、およびメンバーという4つのプロパティがあります。これにより、同様のプロパティ名との混乱を避けることができます。 Microdataを使用して、同じプロパティitemprop = "member"で、court審に関する情報をマークアップすることもできますが、これは異なるプロパティになります。 Microdataノードには、別のitemtypeがあり ます -“ example.org/jury ”、またはその他の任意の選択。

信頼性、柔軟性、および拡張性を選択するために、使用するプロパティディクショナリについて慎重に検討する必要があります。詳細とヒントについては、「ディクショナリの定義」仕様のセクション「名前の選択」を参照してください。また、ウェブを検索する必要があります。おそらく、誰かがあなたの目的に合った適切な辞書をすでに書いているかもしれません。 vCardやvEventなどのマイクロフォーマットから移行された既存のディクショナリについては、「マイクロデータディクショナリの仕様」セクションをご覧ください。

Midrodataノードのグローバル識別子の割り当て

書籍のISBNやストア内の製品のUPCなど、決済識別子の契約によって既に識別子が割り当てられているものもあります。一部のMicrodataディクショナリはこれらの識別子をサポートします（このような質問は自分で調べる必要があります。そのため、独自のプロパティディクショナリを作成するときは、 itemtype属性で指定されたURLに質問を書くことをお勧めします）同様の識別子を使用する場合、 itemscopeとitemtypeを指定した同じ要素のitemid属性で指定します。このようなマークアップを理解しているクローラーまたは検索エンジン（そのようなマークアップはまだありません）は、コンテンツが同じitemidを持つ他のコンテンツと同じISBN / UPCオブジェクトであることを理解します。さらに、ネットワークが意識を取り戻し、マシンが立ち上がるまで、情報をスムーズに蓄積できます。

たとえば、次のマークアップは、 example.com / bookディクショナリがISBN識別子の使用を明示的に指示している場合にのみ処理されます（これについては後で詳しく説明します）。

 <article itemscope itemtype="http://example.com/book" itemid="urn:isbn:978-0321703521"> <h2 itemprop="title">InterACT with web standards</h2> <p>Authors:</p> <ul> <li itemprop="author">Leslie Jensen-Inman</li> <li itemprop="author">Chris Mills</li> <li itemprop="author">Glenda Sims</li> <li itemprop="author">Aarron Walter</li> ...

Microdata DOM API

microdataは、DOM APIを使用してjavascriptを使用してページ上のノードとそのプロパティを操作し、おそらく情報を検索方法で表示したり、他のアプリケーションに配信したりするとさらに便利になります。

APIは非常に単純です-document.getItems（）関数を使用して、ページ上のすべてのMicrodataノードを含むNodelistオブジェクトを取得します（翻訳者注：すべての最上位レベルのノードのみ、つまり、他のノードにネストされておらず、 itemprop属性を持ちません）。引数なしで関数を呼び出すと、すべてのMicrodataノードのリストが取得されます。または、呼び出しパラメーターとして渡すことで、探しているアイテムタイプを指定できます。この場合、関数は、アイテムタイプがパラメーターに等しいMicrodataノードでのみNodelistを返します。例：

 var biography = document.getItems("http://example.org/biography");

経歴ノードを返し、変数に保存します。ノードを受け取った後、プロパティプロパティを使用してそのプロパティを操作できます。

 var biography = document.getItems("http://example.org/biography")[0]; alert('Hi there ' + biography.properties['name'][0].textContent + '!');

そして、真剣に複雑なものは何もありません。 microdata DOM API仕様の使用で学習する他の例を見つけることができます。さらに、 PhilipJägenstedtは非常にエレガントなライブ microdataビューアを作成しました。これはコードのチェックに非常に便利であり、MicrodataをJSONなどのさまざまな形式にすばやく変換するためにも使用できます。

Microdata. , Opera Microdata, W3C

マイクロデータの簡単なレビューは終了しました。これが、この興味深い新しいテクノロジーの理解に役立つことを願っています。ご意見をお聞かせください。また、microdataをサポートするOperaのパイロットビルドをご覧ください。

翻訳者から：

この記事は8月からDev.Operaに載っており、誰も翻訳していません。 なぜなら この記事は注目に値するものであり、多くの開発者にとって興味深いものになるでしょう。私はこの不正を修正する自由を取りました。 私は英語の知識も翻訳経験もないので、翻訳に不正確な点を見つけたら、私に個人的に書いてください。 この記事が他のブログにふさわしいと思うなら、私に個人的に書いてください

microdataおよびmicrodata DOM API