HTML 5は、その機能で私たちを驚かせ続けています。 もう一つあります。
HTML5で追加した機能の1つは、注釈を含める機能です。これにより、人々は簡単で特定の方法でデータを取得できます。 つまり、サイトで情報を利用できるようにする場合は、無関係な不完全なデータ取得メカニズムに依存する必要はありません。
Bugzillaなどのインシデントトラッカーを使用していて、データベースからインシデント情報を取得するための追加のツールが必要だとします。
現在、BugzillaはエラーごとにXMLファイルを作成しています。これは、エラーページに対して2つの並列データ形式が生成されることを意味します。 この分離を行う代わりに、新しいHTML5属性であるmicrodataを使用できます。 したがって、インターフェイスがバージョンごとに変更されると、メインのエラーデータが同じHTMLページに表示されます。
マークアップは次のようになります。
< body >
< h1 > Issue 12941: Too many pies in the pie factory </ h1 >
< dl >
< dt > Reporter </ dt >
< dd > ian@hixie.ch </ dd >
< dt > Priority </ dt >
< dd > AAA </ dd >
...
microdataの動作を説明するために、いくつかの属性を作成し、これらの属性を使用して各フィールドに値を割り当てます。 これらは「リバースDNS」形式の属性です。 「example.net」にエラーがある場合、属性は「net.example.bug」、「net.example.number」などになります。 したがって、次のようになります。
< body item ="net.example.bug" >
< h1 > Issue < span itemprop ="net.example.number" > 12941 </ span > :
< span itemprop ="net.example.title" > Too many pies in the pie factory </ span ></ h1 >
< dl >
< dt > Reporter </ dt >
< dd itemprop ="net.example.reporter" > ian@hixie.ch </ dd >
< dt > Priority </ dt >
< dd itemprop ="net.example.priority" > AAA </ dd >
...
item = "net.example.bug"属性は、「これはエラーです」を示します。 さまざまなitemprop属性は、エラーの名前と値のペアを形成します。 上記のスニペットは、次のデータツリーの結果です。
net.example.bug:
net.example.number = "12941"
net.example.title = "Too many pies in the pie factory"
net.example.reporter = "ian@hixie.ch"
net.example.priority = "AAA"
現在、ページに根本的な変更があった場合、同じエラーデータが明らかに利用可能です。
< body >
< h1 > Example.Net Bugs Database </ h1 >
< section item ="net.example.bug" >
< h1 itemprop ="net.example.title" > Too many pies in the pie factory </ span ></ h1 >
< p > # < span itemprop ="net.example.number" > 12941 </ span > ; reported
by < span itemprop ="net.example.reporter" > ian@hixie.ch </ span > . </ p >
< p > PRIORITY: < strong itemprop ="net.example.priority" > AAA </ strong > . </ p >
...
これで、microdataの簡単な紹介は終わりです！ 今後の記事では、ここで説明しなかったmicrodataのいくつかの側面について説明します。
•microdataを使用して、URL、日付と時刻、隠しデータを記述する方法。
•ある要素を別の要素の内側に作成する方法。
•複数のタイプのオブジェクトを記述する方法、または複数の属性に単一の値を与える方法。
•辞書を事前定義する方法。
• subject = ""を使用してitem = ""の外側に説明を追加する方法。
オプション：
HTML 5のMicrodata Extractor
マイクロデータ仕様
*このソースコードは、 ソースコードハイライターで強調表示されました。
いくつかの翻訳の調整についてXaocCPSに感謝します。