Microformatsの手引き

(Difference between revisions)

Jump to: navigation, search
m (Webデザインの進化: 日本語表現の修正)
Current revision (05:56, 24 January 2012) (view source)
m (typo)
 
(14 intermediate revisions not shown.)
Line 1: Line 1:
-
<!-- english: 18:23, 3 Apr 2006 -->
+
<entry-title>Microformatsの手引き</entry-title>
 +
<!-- english: 16:51, 25 Nov 2006 -->
-
=  Microformatsの手引き =
+
__TOC__
-
関連: [[press-ja|プレス]], [[presentations-ja|プレゼンテーション]], [[suggested-reading-ja|参考図書]], [[testimonials-ja|証言]]
 
-
 
-
__TOC__
 
== Microformatsとは? ==
== Microformatsとは? ==
-
Microformatsとは、XHTML semantic contentの"辞書"です。Microformatsを使っておけば、リッチな情報をもつHTML文書からsemanticな意味を機械的に抽出できるようになります。つまり、Microformatsは、最も簡単にWeb上でデータ(もしくはデータフォーマット)を再利用するためのものなのです。
+
Microformatsは、ウェブ上で人が読むために提供されているイベントの情報とか、連絡先の詳細や場所などの情報に、シンプルなマークアップを付加する手段です。Microformatsを利用することで、これらの情報の抽出、インデックス付け、検索、保存、情報間の相互参照や組み合わせ、などをソフトウェアによって行うことが可能になります。
 +
 
 +
もう少し技術的に詳しく言うと、Microformatsは標準の'' plain old semantic (X)HTML''(''[[posh-ja|POSH]]'' とも)と、ある共通の[[class-names|クラス名]]の集合や ''[[rel]]'' の値だけを使ったマークアップです。
 +
オープンで誰でも自由に使用することができます。
== 何故Microformatsなのか ==
== 何故Microformatsなのか ==
Line 18: Line 19:
# Webデザインや情報構造の進化の中での論理的な次のステップである
# Webデザインや情報構造の進化の中での論理的な次のステップである
-
# 中央集権的なサービスを信頼せずとも、リッチな情報を公開する人自身で使える方法である
+
# 中央集権的なサービスを信頼せずとも、リッチな情報を公開する人々や組織のための方法である
-
# "従来の"メタデータの試みは失敗したり広く導入されるまでにとても長い時間がかかることが判明したので新しいアプローチが必要とされていた
+
# (専門家領域以外での)"従来の"メタデータの試みは失敗したり広く導入されるまでにとても長い時間がかかることが判明したので新しいアプローチが必要とされていた
-
# データのための(X)HTMLを使うことができる
+
# データのための[[(X)HTML]]を使うことができる
-
=== Webデザインの進化 ===
+
== シンプルさの魅力 ==
-
はじめに1990年のことを話そう。[http://www.w3.org/MarkUp/ HTML]というものがあった。それは良いものだった。シンプルで、小さい仕様で、(テキスト)データを論理的な意味をマークアップすることができた。そして、World Wide Web上でそれを共有することができた。
+
* Microformats は、今までの複雑なセマンティクスへの取り組みに対して不満を抱えていた多くの人たちの興味をそそった、シンプルな試みです。これは、Webサービスの世界における、RESTの存在と似ているとも言えます。RESTに関してもっと知りたい方は、[[suggested-reading#REST|REST関連のおススメな読み物]]のセクションをご覧ください。
 +
*  Justin Leavesleyによる、[http://www.justinleavesley.com/journal/2005/7/28/web-services-and-the-innovators-dilemma.html Web Services and Innovators Dilemma](Webサービスと革新者のジレンマ)もご覧ください。
-
それから[http://en.wikipedia.org/wiki/Browser_wars ブラウザ戦争](1994-1999)が勃発した。主要なブラウザ開発会社は、典型的なWebサイトの作成者/デザイナが求めていたWebページの見ためを制御するための"革新的な"タグを導入しはじめた。結果、[http://www.w3.org/TR/REC-html32 HTML 3.2]は流行していた見ためのためのタグを"標準化"してしまった。
+
== See Also ==
-
 
+
* 最近の[[press-ja|プレス]]のインタビューや[[articles-ja|記事]]もよい手引きとなります。
-
[http://www.w3.org/TR/REC-CSS1 CSS1] (1996)と論理表現に主眼を置いた[http://www.w3.org/TR/REC-html40/ HTML4] (1998)が現れ、かすかな希望をもたらした。しかし、WebデザイナがWebページにCSSを実戦投入するのは、CSS1/HTML4を完全に(もしくはほとんどを)実装したWebブラウザ(IE5/Mac, IE6/Windows, Netscape 6)がリリースされる(2000-2001)のを待たねばならなかった。コミュニティの先導者たちは、([http://www.tantek.com/log/2004/07.html#ie5macbandpass い] [http://tantek.com/CSS/Examples/boxmodelhack.html く] [http://www.tantek.com/CSS/Examples/midpass.html つ] [http://tantek.com/CSS/Examples/highpass.html か]のハックを使いつつとはいえ)CSSを精力的に採用し、推進しはじめた。そして、マークアップからプレゼンテーションを分離することは、効率の良さと高い生産性をもたらしたのであった。しかし、その事実を声高に主張しつつも依然として少数派でしかなかった。
+
-
 
+
-
The introduction of the Wired News redesign in 100% CSS, and the beautiful [http://csszengarden.com/ CSS Zen Garden] (2002-2003) was CSS's tipping point.  With the clear and obvious presentation of visual beauty and broad creativity, designers world-wide "got it" and realized that this was the future of web design.  The presentational markup of <code>&lt;FONT&gt;</code>, <code>&lt;TABLE&gt;</code>, and <code>spacer.gif</code> were tossed aside by any and all self-respecting web designers, who discovered the near infinite flexibility of <code>&lt;div&gt;</code>, <code>&lt;span&gt;</code>, and the 'class' attribute.  A few in the community even began adopting some of the more semantic elements in HTML: <code>&lt;p&gt;</code>, <code>&lt;h1&gt;</code>...<code>&lt;h6&gt;</code>, <code>&lt;ol&gt;</code>, <code>&lt;ul&gt;</code>, <code>&lt;li&gt;</code>, <code>&lt;em&gt;</code>, <code>&lt;strong&gt;</code>.  Leaders in the community exercised the semantic limits of strict HTML4 (experimented with XHTML) and documented [http://www.simplebits.com/publications/solutions/ best practices].
+
-
 
+
-
As the community followed rapidly in the footpaths they had worn, the leaders began to run into the limits of semantic (X)HTML.  Other subcultures were attempting to rewrite the world in their own language(s) (<abbr title="Resource Description Framework">[http://www.w3.org/RDF/ RDF]</abbr>, [[plain-xml|"plain" XML]], <abbr title="Scalable Vector Graphics">[http://www.w3.org/TR/SVG/ SVG]</abbr>), yet not having much of an impact on the World Wide Web, which required human presentable data, compatible with the browsers people already used.  [http://en.wikipedia.org/wiki/Social_software Social Software] and [http://en.wikipedia.org/wiki/Blogs Blogs], written by this new generation of web designers and programmers, began to take off. 
+
-
 
+
-
Natural patterns emerged from the way people used blogging systems, putting things into lists, for example lists of other bloggers (known as blogrolls), and annotating them with information representing relationships such has having met, friends, family, etc. The first microformat, <abbr title="XHTML Friends Network">[http://gmpg.org/xfn/ XFN]</abbr>, was designed to match these behaviors, and [http://tantek.com/log/2003/12.html#L20031215t0830 introduced to the blogging community] (2003-2004), who adopted it within weeks.  The [http://gmpg.org GMPG] was formed as a home for XFN, and documented a few key [http://gmpg.org/principles design principles] later adopted for microformats.  The key notion, that semantic (X)HTML could be extended, had been introduced and accepted by the community.
+
-
 
+
-
By understanding, using, and combining semantic (X)HTML building blocks, as well as determining that semantic (X)HTML could be validly extended via new rel, meta name, and class values, defined in (X)HTML profiles in the [http://gmpg.org/xmdp XMDP format], the community began to design and develop many more microformats (2004-2005).  More patterns emerged from the blogging community, and each aggregate human behavior drove the design of simple, adaptive microformats to meet its needs.  Creative Commons licensing became popular and [[rel-license]] was proposed.  Outlines and lists: [[xoxo|XOXO]]. Contact info: [[hcard|hCard]].  Calendars and events [[hcalendar|hCalendar]].
+
-
 
+
-
Using these new found building blocks, the web design and information architecture communities were no longer limited by the predefined semantics of HTML4 (nor did they have to compromise human presentation and ease of authoring which other attempts sorely lacked).  2005 may well be the year that microformats became the next step in the evolution of the web.
+
-
 
+
-
=== The Appeal to Simplicity ===
+
-
 
+
-
* Microformats are a simple effort which has appealed to many frustrated with previous complex efforts.  One parallel that can be drawn is to REST in the web services world, i.e. see this [http://www.windley.com/archives/2005/07/microformats.shtml comparison of microformats and REST].  See the [http://rest.blueoxen.net REST wiki] for more about REST.  Related [http://patricklogan.blogspot.com/2006/01/microformat-microprotocol.html microformats and microprotocols].
+
-
* See also: [http://www.justinleavesley.com/journal/2005/7/28/web-services-and-the-innovators-dilemma.html Web Services and the Innovators Dilemma] by  Justin Leavesley
+
-
 
+
-
== 関連ページ ==
+
-
* 最近の[[press-ja|プレス]]のインタビューや記事もよい手引きとなります。
+
* [[microformats-ja]]にある[[presentations-ja|プレゼンテーション]]も背景を更に知ったり、導入のための資料となるでしょう。
* [[microformats-ja]]にある[[presentations-ja|プレゼンテーション]]も背景を更に知ったり、導入のための資料となるでしょう。
* microformatsについての[[podcasts-ja|ポッドキャスト]]を聴いてください。
* microformatsについての[[podcasts-ja|ポッドキャスト]]を聴いてください。
 +
* 一般的なmicroformatsに関する疑問については[[faq-ja|FAQs]]を読んでください。
* [[suggested-reading-ja|suggested reading]]もあります。
* [[suggested-reading-ja|suggested reading]]もあります。
* [[implement-ja|microformatsを実装したいですか?]]
* [[implement-ja|microformatsを実装したいですか?]]
 +
* [[presentations-ja]]
 +
* [[podcasts-ja]]
 +
* [[suggested-reading-ja]]
 +
* [[testimonials-ja]]
-
== Articles ==
+
== 外部資料 ==
-
* [http://www.digital-web.com/articles/microformats_primer/ Digital Web Magazine: Microformats Primer] by Garrett Dimon
+
* Sitepoint に導入のためのすばらしいチュートリアルがあります:[http://reference.sitepoint.com/html/microformats Microformats - Plugging the Gaps in HTML]
-
* [http://www.gr0w.com/articles/design/an_extra_side_to_web_standards_based_design/ An Extra SIDE to Web Standards Based Design] - How Semantic Information Design Ethics (SIDE) and a few readily available techniques can help heal the Web, by Jon Tan.  See also his [http://www.csszengarden.com/?cssfile=/193/193.css&page=0 CSS Zen Garden "Leggo my ego" entry].
+
* Premasagar は[http://premasagar.com/microformats/compound/ microformat のすばらしい例をソース付きで]書きました。
-
* [http://thedredge.org/ Andrew D. Hume] has written a blog post [http://thedredge.org/2005/07/introducing-microformats/ introducing microformats] and another one on [http://usabletype.com/articles/2005/usable-microformats/ usable microformats].
+
-
* [http://24ways.org/advent/practical-microformats-with-hcard Practical Microformats with hCard] by Drew McLellan
+
-
* [http://www.thefutureoftheweb.com/blog/2006/1/hcard Jesse Skinner's introduction to hCard]
+
-
* [http://blog.usweb.com/ Shaun Shull's] great post on [http://blog.usweb.com/archives/how-microformats-affect-search-engine-optimization-seo How Microformats Affect Seearch Engine Optimization]
+
-
* [http://blogbusinesssummit.com/2006/04/microformats_in.htm Blog Business Summit: Microformats in Plain English: the Promise of Simple Business to Business Data Exchange] by Steve Broback
+
-
 
+
-
== Miscellaneous Reference ==
+
-
 
+
-
These are various intro-related links/articles which I haven't figured out yet how to incorporate.  You may find them of interest. - [http://tantek.com/log/ Tantek]
+
-
 
+
-
* [http://www.betaversion.org/~stefano/linotype/news/93/ Data First vs. Structure First]
+
-
** [http://tantek.com/log/ Tantek] says: In many ways it is actually *far* worse than that post conveys.  The "typical" programmer literally loves spending far more time worrying about and designing the structure for structure's sake, than data, and even less so, "real world" data (current behaviors etc.). Hence we have taken the directly opposite tack with microformats when looking to solve a problem.
+
-
*** Zeroeth, define the real-world problem.  If you can't do this, then stop.
+
-
*** First, look at real-world usage (data).
+
-
*** Second, what previous standards are people actually using today?  If there is more than one, then lean towards those with the better adoption.
+
-
***And only after those first two do we bother to pay attention to theoretical standards, those that have been invented (whether by individuals, committees), but haven't seen much if any actual adoption.
+
-
* [http://lists.w3.org/Archives/Public/www-rdf-interest/2000Mar/0103 2000-03-21 Dan Connolly on human-consumable information]: ('''strong emphasis''' added)
+
-
** I believe that one of the best ways to transition into RDF, if not a long-term deployment strategy for RDF, is to '''manage the information in human-consumable form (XHTML) annotated with just enough info to extract''' the RDF statements that the human info is intended to convey. In other words: using a relational database or some sort of native RDF data store, and spitting out HTML dynamically, is a lot of infrastructure to operate and probably not worth it for lots of interesting cases. '''We all know that we have to produce a human-readable version of the thing... why not use that as the primary source?'''
+

Current revision


Contents


Microformatsとは?

Microformatsは、ウェブ上で人が読むために提供されているイベントの情報とか、連絡先の詳細や場所などの情報に、シンプルなマークアップを付加する手段です。Microformatsを利用することで、これらの情報の抽出、インデックス付け、検索、保存、情報間の相互参照や組み合わせ、などをソフトウェアによって行うことが可能になります。

もう少し技術的に詳しく言うと、Microformatsは標準の plain old semantic (X)HTMLPOSH とも)と、ある共通のクラス名の集合や rel の値だけを使ったマークアップです。 オープンで誰でも自由に使用することができます。

何故Microformatsなのか

何故Microformatsに注目するのか?

簡単に言えば、Microformatsにはいくつかの追い風があるのです。

  1. Webデザインや情報構造の進化の中での論理的な次のステップである
  2. 中央集権的なサービスを信頼せずとも、リッチな情報を公開する人々や組織のための方法である
  3. (専門家領域以外での)"従来の"メタデータの試みは失敗したり広く導入されるまでにとても長い時間がかかることが判明したので新しいアプローチが必要とされていた
  4. データのための(X)HTMLを使うことができる

シンプルさの魅力

See Also

外部資料

Microformatsの手引き was last modified: Tuesday, January 24th, 2012

Views