h-card-ja

This article is a stub. You can help the IndieWeb wiki by expanding it with relevant information.

h-cardは、ウェブサイト上で人物、組織、会場をマークアップするためのmicroformats2語彙であり、hCardを継承するものです。名前、住所、写真、関連する連絡先情報などのアイデンティティ情報を含むことが多いため、俗語として、名刺のオンライン版の同義語として「h-card」という言葉を使う人も多くいます。

なぜ必要か

name（名前）、url、photo（写真）プロパティを含む最小限のh-cardをhomepageのプロフィールにマークアップすることで、インディーウェブにおけるh-cardの利用シーンのほとんどをカバーできます：

• フィードreadersが、投稿の横にあなたのプロフィール写真を表示できるようになります。
• あなたの投稿に対するreply（返信）投稿のreply context内に、あなたの著者プロフィールが表示されます。
• あなたが返信した先の投稿のcomments表示欄に、あなたの著者プロフィールが表示されます。
• IndieAuthでサインインしたアプリ（またはあなたのURLを知っているアプリ）が、あなたの名前と写真を自動入力・自動更新できるようになります。
• メールアドレスの代わりにドメインに基づいたGravatarのようなルックアップが可能になります。

方法

マークアップ方法

名前、写真、URLのための最小限のh-cardは、2つの要素と1つのクラス名で作成できます。例：

<a class="h-card" href="http://waterpigs.co.uk">
 <img src="/photo.png" alt="" />
 Barnaby Walters
</a>

WordPressでのh-card作成の詳細は、Getting Started on WordPressに記載されています。

投稿内で誰かに言及するときにh-cardを含めることもできます。以下のような最小限のマークアップから始めてください：

 <a class="h-card" href="https://aaronparecki.com">Aaron Parecki</a>

言及に相手のサイトへのリンクが含まれている場合、相手は@-mentionを受け取ることができます。その投稿がその人物に関するものであることや、その人物が主題であることを伝えたい場合は、person-tagを使用してください。

バリデーター

以下のバリデーターを使用して、ホームページのh-cardの完全性やよくある間違いを確認できます：

• indiewebify.me h-card
• pin13.net mf2 parser（解析された生のJSONを表示）

課題

純粋にユーザー機能の観点から、かつ不可視のメタデータがないと仮定した場合、以下のようなことは（h-cardを使って）どのように達成されるのでしょうか？

• 投稿にはプロフィール情報（名前など）を表示したいが、写真は表示したくない。一方で、別のページ（例：/about）には写真（iconを含む）など追加のプロフィール情報を表示したい場合。

• 他人���投稿にcomment、like、repost、rsvpをした際、相手がその反応を表示する（comments-presentation）にあたって、相手が望むなら写真を含む私の追加プロフィール情報を表示できるようにしたい。authorship（著者情報）で一部は解決しますが、例えば「自分のサイトのどこにも写真を表示していない」ケースなどはカバーできないかもしれません。

• 同様に、このWikiのようなサイトにIndieAuthなどでログインした際、サイト側が私の写真を含む追加のプロフィール情報を見つけ出し、プロフィールページやアクティビティ、その他の適切な場所に表示できるようにしたい。代表的なh-cardの解析は惜しいところまで行っていますが、完全ではありません。以下のブレーンストーミングにある案が助けになるかもしれません。

h-card特有の視点からは、以下のような追加の課題や質問があります：

• 一部の人々（例：GWG、 Kartik、User:Snarfed.org、User:Mowens.com、 gRegor Morrill、 Vika、Lewis Cowles、jmtd）は、ページ上に最小限のh-cardを掲載しつつ、詳細な情報（連絡先や写真など）を含む「完全な」h-cardへのリンクを設ける方法を求めています。authorshipと代表的なh-cardの解析は関連していますが少し異なり、現在はどちらもインラインのh-cardがあればそれのみを使用します。インラインのh-cardに拡張版h-cardへのリンクを含めることができるかもしれません。

• 同様に、一部の人々（例：User:Snarfed.org、User:Mowens.com、 gRegor Morrill）は、h-cardの一部をどこにも表示させたくないが、プログラムによる利用者には提供したいと考えています（例：一部のサイロへのrel-meリンク、公開暗号鍵など）。関連：antipatterns#invisible_metadata
  • 私のサイトでは現在、各投稿の著者hCardを非表示にしています。すべての投稿に自分の写真やURL、名前を表示する必要性を感じないからです。マルチ著者サイトであれば話は別でしょう。 gRegor Morrill
  • 私もデザイン上の理由でホームページのh-cardを非表示にしています。詳細はそこに出したくないからです。Jeremy Cherfas

h-cardにおいて何が u-url であるべきで、何がそうでないべきか？

答え： ホームページ、およびその人物や組織を代表するその他のURLです。この点を明確にするため、2019年5月8日にh-cardの仕様が更新されました。[1]

これまでの議論：

1. 仕様では、u-url はアイデンティティの「ホームページ」のためのものであるとされています。
2. hCardオーサリングの「Link it up」セクションでは、「あなたのウェブサイト、ソーシャルネットワークのプロフィール、および特にあなたを代表するその他のサイトへのリンクを、クラス名 url を使ってhCardに追加すること」を推奨しています。（注：h-card-authoringがまだ書かれていないため、h-cardから間接的にリンクされています）。そして、rel-meリンクにこのクラスを付与する例を示しています。

両方の解釈の例が存在します：

1. Aaron Parecki は、自身のホームページのh-cardに aaronparecki.com と w7apk.com のみをurlプロパティとして含めています。外部プロフィールは rel-me 解析を通じてのみ見つけることができます。
2. Tantek Çelik は、ホームページのh-cardにすべての rel-me リンクをurlプロパティとして含めています。

一般的なアドバイスはどうあるべきでしょうか？ silo（サイロ）のアイデンティティは、依然として u-url でマークアップされるべきホームページなのでしょうか？

1. Jacky Alciné は（2022-05-17）、インディーウェブで利用可能なマークアップ（microformatsなど）を持つページのみを h-card からリンクすべきであり、それ以外はすべて rel-me 経由でリンクすればよいと考えています。

インディーウェブでの例

インディーウェブの基本的なbuilding-block（構成要素）として、h-cardはオンラインidentityの確立に役立ちます。多数の例がMicroformats Wikiに掲載されているほか、以下の例も参考にしてください：

Chris Aldrich

Chris Aldrich は、ホームページの右サイドバーに、人間が読めるデータとマシンが読めるデータの両方を備えたh-cardを設置しています。

Martijn van der Ven

Martijn van der Ven （自称「h-card術」の達人）は、http://vanderven.se/martijn/ に広範なh-cardを公開しています。これには食事の好みのような実験的プロパティや、h-measureのような実験的フォーマット、分単位で指定された dt-bday などが含まれます。

• 彼のカードから何か一つ取り入れるなら、pronoun（代名詞）のマークアップを見てほしいとのことです。

gRegor Morrill

gRegor Morrill: gregorlove.com の各 h-entry のフッターにh-cardを置いていますが、about ページにある既存の情報をマークアップし、各投稿からそこへリンクする実験をしてみたいと考えています。

Amit Gawande

Amit Gawande は、ウェブサイトのフッターにh-cardを設置しており、名前、ニックネーム、メールアドレス、写真の情報を含めています。

Jacky Alcine

Jacky Alciné は、サイトのフッターに位置情報を含むh-cardを設置しています。

2022年3月25日現在、フル版のh-cardは 自己紹介ページ にあり、各ページには「軽量版」を置いています。

Piper McCorkle

pmc は、ウェブサイトのホームページの中央上部にh-cardを設置しています。

Jamie Tanna

  Jamie Tanna は、https://www.jvt.me のトップページに個人のh-cardを置いています。

Simon Prickett

simonprickett.dev は、https://simonprickett.dev のトップページにh-cardを置いています。

Kev Quirk

Kev Quirk は、自身のサイト https://kevq.uk のホームページに個人のh-cardを置いています。

Ethan Yoo

Ethan Yoo は、2020年11月25日に名前、URL、代名詞、ノート、写真、メールアドレスのh-cardマークアップを https://www.ethanyoo.com に追加しました。

Watts Martin

Wattsは、自身のウェブサイト Coyote Tracks のトップページにh-cardを置いています。

Peter Smith

多くのデバッグとこのリストの仲間の助けを経て、Peter Smith は2022年12月10日、Javascriptを使わずに自身のHugoウェブサイト [2] でh-cardマークアップ（名前、URL、ノート、写真）を動作させました。

Jasmine Amalia

Jasmine は、ホームページ 上でh-cardを文字通りの「カード」としてデザインしました。彼女の Mastodonアカウント 用のヘッダー画像（u-featured）は、イースターエッグ 🌼 の中に隠されています。

Otto Rask

Otto Raskは、自身のウェブサイト の各ページのフッター付近に汎用的なh-cardを設置しています。

Coding Otaku

Coding Otaku は、ホームページ にh-cardを設置し、他の全ページの記名フッター部分にもh-cardを含めています。

自身を追加してください！

h-cardを使用しているツール

• Telegraph は、ログイン後にあなたのプロフィールアイコンと名前を取得するためにホームページのh-cardを使用します。[3]
• indiewebring は、ディレクトリ 表示のためにh-card情報を解析します。
• ほとんどのコメント実装はh-cardを消費します。
• ほとんどのreply-context実装はh-cardを消費します。
• ほとんどのreaderはh-cardを消費します。
• …

microformats wikiでも 実世界での例 を収集しています。

記事

• 2020-04-11 Brian Wisti Indieweb h-cards: microformatsを使ってプロフィールページを構築する

ブレーンストーミング

部分的 vs 完全版

「部分的＋完全版のh-card」問題の一つの解決策は、完全なh-cardへのrel-meリンクを含めつつ、ホームページ上の部分的なプロフィール情報はh-cardとしてマークアップ「しない」ことです。代表的なh-cardの解析アルゴリズムがそのrel-meリンクを辿り、完全なデータを利用することになります。理想的とは言えませんが、機能はします。

この方法の問題点は、ホームページには通常多くのrel-meリンク（例：サイロへのリンク）があり、どれが「カノニカル（正規）」なものであるかを示す方法がまだないことです。 gRegor Morrill、User:Mowens.comらは、このために u-uid や新しい rel-canonical プロパティを使用することを提案しています。

• どのh-cardが最も完全で正規のアイデンティティh-cardであるかを指定するために、uid で何かできないか考えています。 — Martijn van der Ven
• Jacky Alciné は、曖昧さ回避のために自身の代表的なh-cardに "rel=canonical" を使用しています。
• rel-author はこれに適しているでしょうか？ 投稿ページから著者のURLへリンクするのには理にかなっていますが、パブリッシャーがホームページには部分的なh-cardを置き、/aboutページなどに拡張版を置きたい場合にはあまり向かないかもしれません。 — Barnaby Walters
• 「ホームページに部分的、別ページに拡張版」というユースケース��は、rel=aboutが理想的かもしれません。「about（について）」は、UIとURLデザインの両方において「このサイト/人物に関する追加情報」を指す非常に一般的な用語だからです。rel-authorをオーバーロードすることもなく、連鎖させることも可能です。例えば、消費側の実装が投稿ページで最小限のh-cardを見つけ、そのurlプロパティを取得して同じ最小限の代表的h-cardを見つけ、さらにそのページにあるrel=aboutリンクを辿って完全なh-cardがあるページにたどり着く、といった具合です。 — Barnaby Walters
  • これが受け入れられれば、authorship と representative h-card の仕様に「著者/代表h-cardが見つかった際、同じページにrel=aboutリンクがあれば、消費側はオプションでそのページを取得し、（代表URLやuidが一致する）人物に関する詳細情報を含むh-cardを解析できる」といった付録を追加するだけで済みます。 — Barnaby Walters
  • Ryan Barrett による indiemap データの検索結果（感謝！）は以下の通りです：
    • rel=About 150件
    • rel=about 95件
    • その他バリエーション（about…、about,, など）12件
    • さらに分析したところ、indiemapにおける rel=About/about の使用例はすべて一つのドメインからのもので、拡張プロフィールページへのリンクとしては使用されていなかったため、実世界でそのように使われている証拠は皆無のようです。
• relmeauth 仕様では、拡張連絡先ページへのリンクに単に rel-me を使うことを提案しており、消費側は追加の連絡先情報を探す際に、同じドメインに一致する rel-me URLを調べて取得することを想定しています。 — Barnaby Walters
  • 実世界での例は？
  • aaronparecki.com には aaronparecki.com/aaronpk への rel-me があり、そこにはフォロワー数などのカウントはありますが、追加のh-card情報はありません。
  • Ryan Barrett が indiemap データをクエリしたところ、同一ドメインのrel-me公開パターンの例が29件見つかりました。
  • 同一または類似ドメインのrel-me公開パターンの例：
    • http://equivalentideas.com/contact
    • https://webrocker.de/impressum/
  • indiemapにおける同一または類似ドメインの /about 公開パターン（現在はrel-meマークアップなし）は90件あり、こちらにリストされています。
  • indiemapにおける {domain}/contact の例は46件あり、これらはおそらく追加の連絡先（プロフィール）情報と問い合わせフォームが混在しています。ここでクエリ可能です。

代名詞のユースケース

より多くの情報や追加プロパティを加えることで、さらなる可能性が開かれます：

• アプリがあなたの好みのpronoun（代名詞）を見つけて表示・利用できるようになります。
  • どのアプリで？ 具体的にどのようなユースケースで表示が必要になるでしょうか？
    • ソーシャルリーダーが、アクション内での短い言及に使用できます（例：「彼（they）はこの写真をいいねしました」）。 Jacky Alciné 2022-07-03
    • IndieAuthのチケッティングをサポートする IndieAuth クライアントが、人間向けの言語を使用できます（例：「xer に $RESOURCE へのチケットを送信しますか？」）。 Jacky Alciné 2023-11-18
• …

h-cardジェネレーター

h-cardジェネレーターが必要です。どなたかボランティアはいませんか？

以下のツールの代替となるものが必要です：

microformats ウェブサイトには、空欄補充式の hCard ジェネレーターがあります。表示したいデータを入力すると、適切なマークアップが自動生成され、そのセマンティックなHTMLをウェブページにコピー＆ペーストできるようになっています。

関連項目

• microformats
• h-entry
• h-cardへの発音ガイド追加に関する議論
• 批判： https://github.com/tootsuite/mastodon/pull/6645#issuecomment-381345084