From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/html/microformats/index.html | 462 ++++++++++++++++++++++++++++++ 1 file changed, 462 insertions(+) create mode 100644 files/ja/web/html/microformats/index.html (limited to 'files/ja/web/html/microformats') diff --git a/files/ja/web/html/microformats/index.html b/files/ja/web/html/microformats/index.html new file mode 100644 index 0000000000..fa21d22000 --- /dev/null +++ b/files/ja/web/html/microformats/index.html @@ -0,0 +1,462 @@ +--- +title: マイクロフォーマット +slug: Web/HTML/microformats +tags: + - HTML + - Microformat + - NeedsContent + - NeedsMarkupWork + - Reference +translation_of: Web/HTML/microformats +--- +

概要

+ +

マイクロフォーマット (Microformat) (μF と略記されることもあります) は、意味情報と構造化データを HTML に埋め込むために使用される規格で、検索エンジンやアグリゲーター、その他のツールが使用するための API を提供します。HTML のこれらの最小限のパターンは、人、組織、イベント、場所などの基本的な情報からドメイン固有の情報まで、さまざまなものをマークアップするために使用されます。マイクロフォーマットは、オブジェクトを記述するためにサポートする語彙を使用し、そのプロパティに値を割り当てるために名前と値のペアを使用します。プロパティはクラス属性で運ばれ、任意の HTML 要素に追加することができ、データ値は HTML 要素のコンテンツとセマンティック属性を再利用します。マイクロフォーマット 2 はマイクロフォーマットの更新版で、HTML の構造化された構文や語彙に注釈を付けるために新しい属性を学習する必要がある RDFa やマイクロデータを使用する以前のアプローチよりもシンプルな方法を提供します。

+ +

マイクロフォーマットは、すべての主要な検索エンジンが対応しています。検索エンジンは、この構造化データに直接アクセスすることで、ウェブページ上の情報を理解し、より関連性の高い結果をユーザーに提供することができるため、大きな利益を得ることができます。マイクロフォーマットは機械可読性があることにくわえ、人間も簡単に読めるように設計されています。

+ + + +

マイクロフォーマット 2 にはオープンソースの主要言語における解釈ライブラリがあります。

+ +

マイクロフォーマットはどのように動作するのか

+ +

An author of a webpage can add microformats to their HTML. For example if they wanted to identify themselves they could use an h-card such as:

+ +

HTML の例

+ +
+
<a class="h-card" href="http://alice.example.com">Alice Blogger</a>
+ +

When a parser encounters this data, it will know that this page contains a "card" which describes a person or organization named Alice Blogger with a URL of http://alice.example.com/. The parser makes this data available via APIs that can be used for different applications.

+ +

As in this example, some markup patterns require only a single microformat root class name, which parsers use to find a few generic properties such as name, url, photo.

+
+ +

マイクロフォーマットの接頭辞

+ +

All microformats consist of a root, and a collection of properties. Properties are all optional and potentially multivalued - applications needing a singular value may use the first instance of a property. Hierarchical data is represented with nested microformats, typically as property values themselves.

+ +

All microformats class names use prefixes. Prefixes are syntax independent from vocabularies, which are developed separately.

+ + + +

マイクロフォーマットの例

+ +

h-card

+ +

The h-card microformat represents a a person or organization.

+ +

The value of each property is defined in HTML using the class property any element can carry

+ +

h-card の例

+ +
+
<p class="h-card">
+  <img class="u-photo" src="http://example.org/photo.png" alt="" />
+  <a class="p-name u-url" href="http://example.org">Joe Bloggs</a>
+  <a class="u-email" href="mailto:joebloggs@example.com">joebloggs@example.com</a>,
+  <span class="p-street-address">17 Austerstræti</span>
+  <span class="p-locality">Reykjavík</span>
+  <span class="p-country-name">Iceland</span>
+</p>
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
プロパティ説明
p-nameThe full/formatted name of the person or organization.
u-emailemail address
u-photoa photo of the person or organization
u-urlhome page or other URL representing the person or organization
u-uiduniversally unique identifier, preferably canonical URL
p-street-addressstreet number + name
p-localitycity/town/village
p-country-namecountry name
+ +

入れ子になった h-card の例

+ +
+
<div class="h-card">
+  <a class="p-name u-url"
+   href="http://blog.lizardwrangler.com/"
+  >Mitchell Baker</a>
+  (<a class="p-org h-card"
+    href="http://mozilla.org/"
+   >Mozilla Foundation</a>)
+</div>
+
+ +

Parsed JSON:

+ +
+
{
+  "items": [{
+  "type": ["h-card"],
+  "properties": {
+    "name": ["Mitchell Baker"],
+    "url": ["http://blog.lizardwrangler.com/"],
+    "org": [{
+    "value": "Mozilla Foundation",
+    "type": ["h-card"],
+    "properties": {
+      "name": ["Mozilla Foundation"],
+      "url": ["http://mozilla.org/"]
+    }
+    }]
+  }
+  }]
+}
+
+ +

Note: the nested h-card has implied 'name' and 'url' properties, just like any other root-class-name-only h-card on an <a href> would.

+ +

h-entry

+ +

The h-entry microformat represents episodic or datestamped content on the web. h-entry is often used with content intended to be syndicated, e.g. blog posts.

+ +

Example h-entry as a blog post:

+ +
+
<article class="h-entry">
+  <h1 class="p-name">Microformats are amazing</h1>
+  <p>Published by <a class="p-author h-card" href="http://example.com">W. Developer</a>
+   on <time class="dt-published" datetime="2013-06-13 12:00:00">13<sup>th</sup> June 2013</time></p>
+
+  <p class="p-summary">In which I extoll the virtues of using microformats.</p>
+
+  <div class="e-content">
+  <p>Blah blah blah</p>
+  </div>
+</article>
+ +

プロパティ

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
プロパティ説明
p-nameentry name/title
p-authorwho wrote the entry, optionally embedded h-card
dt-publishedwhen the entry was published
p-summaryshort entry summary
e-contentfull content of the entry
+ +

Parsed reply h-entry example

+ +
<div class="h-entry">
+  <p><span class="p-author h-card">
+    <a href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106" ><img class="u-photo" src="https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a630/thumb.jpg"/></a>
+    <a class="p-name u-url" href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106">Greg McVerry</a></span>
+     Replied to <a class="u-in-reply-to" href="https://developer.mozilla.org/ja/docs/Web/HTML/microformats">a post on
+   <strong>developer.mozilla.org</strong> </a>:
+  </p>
+   <p class="p-name e-content">Hey thanks for making this microformats resource</p>
+   <p> <a href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106">Greg McVerry</a>
+  published this <a class="u-url url" href="https://quickthoughts.jgregorymcverry.com/2019/05/31/hey-thanks-for-making-this-microformats-resource"><time class="dt-published"
+   datetime="2019-05-31T14:19:09+0000">31 May 2019</time></a></p>
+</div>
+ +
+
{
+  "items": [
+    {
+      "type": [ "h-entry" ],
+      "properties": {
+        "in-reply-to": [ "https://developer.mozilla.org/ja/docs/Web/HTML/microformats" ],
+        "name": [ "Hey thanks for making this microformats resource" ],
+        "url": [ "https://quickthoughts.jgregorymcverry.com/2019/05/31/hey-thanks-for-making-this-microformats-resource" ],
+        "published": [ "2019-05-31T14:19:09+0000" ],
+        "content": [
+          {
+            "html": "Hey thanks for making this microformats resource",
+            "value": "Hey thanks for making this microformats resource",
+            "lang": "en"
+          }
+        ],
+        "author": [
+          {
+            "type": [ "h-card" ],
+            "properties": {
+              "name": [ "Greg McVerry" ],
+              "photo": [ "https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a630/thumb.jpg" ],
+              "url": [ "https://quickthoughts.jgregorymcverry.com/profile/jgmac1106" ]
+            },
+            "lang": "en",
+            "value": "Greg McVerry"
+          }
+        ]
+      },
+      "lang": "en"
+    }
+
+ +

h-feed

+ +

The h-feed is a stream or feed of h-entry posts, like complete posts on a home page or archive pages, or summaries or other brief lists of posts

+ +

Example h-feed

+ +
+
<div class="h-feed">
+  <h1 class="p-name">Microformats Blogs</h1>
+  <article class="h-entry">
+  <h2 class="p-name">Microformats are amazing</h2>
+  <p>Published by <a class="p-author h-card" href="http://example.com">W. Developer</a>
+     on <time class="dt-published" datetime="2013-06-13 12:00:00">13<sup>th</sup> June 2013</time>
+  </p>
+  <p class="p-summary">In which I extoll the virtues of using microformats.</p>
+  <div class="e-content"> <p>Blah blah blah</p> </div>
+  </article>
+</div>
+
+ +

プロパティ

+ + + + + + + + + + + + + + + + +
プロパティ説明
p-namename of the feed
p-authorauthor of the feed, optionally embed an h-card
+ +

Children

+ + + + + + + + + + + + +
Nested h-entry
objects representing the items of the feed
+ +

h-event

+ +

The h-event is for events on the web. h-event is often used with both event listings and individual event pages

+ +
+
<div class="h-event">
+  <h1 class="p-name">Microformats Meetup</h1>
+  <p>From
+  <time class="dt-start" datetime="2013-06-30 12:00">30<sup>th</sup> June 2013, 12:00</time>
+  to <time class="dt-end" datetime="2013-06-30 18:00">18:00</time>
+  at <span class="p-location">Some bar in SF</span></p>
+  <p class="p-summary">Get together and discuss all things microformats-related.</p>
+</div>
+
+ +

プロパティ

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
プロパティ説明
p-nameevent name (or title)
p-summaryshort summary of the event
dt-startdatetime the event starts
dt-enddatetime the event ends
p-locationwhere the event takes place, optionally embedded h-card
+ +

Parsed h-event Example

+ +
+
<div class="h-event">
+  <h2 class="p-name">IndieWeb Summit</h2>
+  <time class="dt-start" datetime="2019-06-29T09:00:00-07:00">June 29, 2019 at 9:00am  (-0700)</time><br>through <time class="dt-end" datetime="2019-06-30T18:00:00-07:00">June 30, 2019 at 6:00pm (-0700)</time><br>
+  <div class="p-location h-card">
+    <div>
+    <span class="p-name">Mozilla</span>
+     </div>
+     <div>
+      <span class="p-street-address">1120 NW Couch St</span>,
+      <span class="p-locality">Portland</span>,
+      <span class="p-region">Oregon</span>,
+      <span class="p-country">US</span>
+     </div>
+       <data class="p-latitude" value="45.52345"></data>
+      <data class="p-longitude" value="-122.682677"></data>
+  </div>
+    <div class="e-content">Come join us
+     </div>
+    <div>
+     <span class="p-author h-card"><a class="u-url p-name" href="https://aaronparecki.com">Aaron Parecki</a></span> Published this <a href="https://aaronparecki.com/2019/06/29/1/" class="u-url">event </a>on <time class="dt published" datetime="2019-05-25T18:00:00-07:00">May 5th, 2019</time>
+    </div>
+</div>
+ +
+
{
+  "items": [
+    {
+      "type": [ "h-event" ],
+      "properties": {
+        "name": [ "IndieWeb Summit" ],
+        "url": [ "https://aaronparecki.com/2019/06/29/1/" ],
+        "author": [
+          {
+            "type": [ "h-card" ],
+            "properties": {
+              "name": [ "Aaron Parecki" ],
+              "url": [ "https://aaronparecki.com"]
+            },
+            "lang": "en",
+            "value": "Aaron Parecki"
+          }
+        ],
+        "start": [ "2019-06-29T09:00:00-07:00" ],
+        "end": [ "2019-06-30T18:00:00-07:00" ],
+        "published": [ "2019-05-25T18:00:00-07:00" ],
+        "content": [
+          {
+            "html": "Come join us",
+            "value": "Come join us",
+            "lang": "en"
+          }
+        ],
+        "location": [
+          {
+            "type": [ "h-card" ],
+            "properties": {
+              "name": [ "Mozilla" ],
+              p-street-address: [ "1120 NW Couch St" ]
+              "locality": [ "Portland" ],
+              "region": [ "Oregon" ],
+              "country": [ "US" ],
+              "latitude": [ "45.52345" ],
+              "longitude": [ "-122.682677" ]
+            },
+            "lang": "en",
+            "value": "Mozilla"
+          }
+        ]
+      },
+      "lang": "en"
+    }
+  ],
+
+
+ +

ブラウザーの互換性

+ +

すべてのブラウザーが class 属性と DOM API に対応していることにより対応しています。

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf