セマンティック・ウェブに向かって

はじめに

セマンティック・ウェブ（semantic web）とは，Webの創始者ティム・バーナーズ＝リー（Tim Berners-Lee）が提唱した将来型Webで，人間（だけ）でなく機械が読んで意味を理解できるようにしたものです。すでにいろいろな実現法が提案されていますが，ここではいわば漸進的に，今までのWebページに少しずつ意味的な側面を加えていく方法を考えます。

HTML5の機能を使って

HTMLには最初から見出し h1，h2，… や引用 blockquote などといった意味的な要素があります。

人間にとっては，フォントを変えたり文字を大きくしたりすれば見出しであることがわかりますが，機械にそれを理解させるためには h1 のような要素が必要なのでした。

意味を表す仕組みはほかにもあります。

article

HTML5で新設された <article> ... </article> というタグで記事の主要部分を囲んでおくと，Safariの「リーダー」機能でその部分だけ読みやすい形で表示することができます。ただし何らかの条件があるようで，逆に必ずしも article でなくてもよいようです。

meta

メタ情報を表す meta は昔から使われてきたタグです。キーワードやページの説明などに使われます。後者はサーチエンジンの検索結果一覧でページの説明文としてそのまま使われることがあります。

<meta name="keywords" content="HTML5,CSS3,ホームページ">
<meta name="description" content="HTML5とCSS3を使ったWebページの作り方">

rel

リンクするものとされるものとの関係を表すのに rel="..." を使います。例えば，このページの一番下には というリンクがあります。これは人間が常識的に考えれば「奥村 晴彦」が著者の名前で，著者のホームページへのリンクだとわかりますが，それを単に

<a href="/~okumura/">奥村 晴彦</a>

と書いたのでは単なるリンクの機能があるだけです。実は，この部分は

<a href="/~okumura/" rel="author">奥村 晴彦</a>

と書いてあります。この rel="author" のおかげで，機械（多分サーチエンジンのロボット）はこのページの著者が「奥村 晴彦」でそのホームページがこのリンク先であることを理解してくれます。

また，このページはCreative Commonsの表示ライセンス（原著作者のクレジットを表示すれば自由に利用できる。略称CC BY）で公開されていますが，そのことを機械にわかる形で表すためには，

<a href="https://creativecommons.org/licenses/by/2.1/jp/" rel="license">CC BY</a>

のように書きます。人間が見るのはここでは「CC BY」という説明ですが，機械が見るのは rel="license" と href="..." の中身です。

さらに，人間が見る必要がなければ，頭書き（head 要素の中）に

<link rel="license" href="https://creativecommons.org/licenses/by/2.1/jp/">

と書いておくだけでもかまいません（rel と href はどちらが先でもかまいません）。

HTML5の rel="..." で使えるものとしては alternate，author，bookmark，help，icon，license，next，nofollow，noreferrer，prefetch，prev，search，stylesheet，tag があります。これらについての詳しい英語の説明はここをご覧ください。

time

HTML5で追加された意味的なタグに time があります。例えばUnixは1970年元旦0時を時刻の起点としますが，それを機械が読める形で表せば

Unixは<time datetime="1970-01-01T00:00Z">1970年元旦0時</time>を時刻の起点…

のように書きます。1970-01-01T00:00Z はISO 8601（JIS X 0301）の書き方で，日付と時刻は T で区切り，デフォルトではローカルタイムですが最後に Z が付けば協定世界時（UTC，旧グリニッジ標準時（GMT））になります。特に日本標準時（JST）であることを示すには +09:00 を付けます。

Unixの時刻の起点は<time datetime="1970-01-01T09:00+09:00">1970年元旦9時JST</time>である。

+09:00 とは協定世界時の値に9時間を足せば日本標準時の値になることを意味します。

日時をすべてこのようにタグ付けしなければならないわけではありません。データベースやサーチエンジンに意味のある日時だけをタグ付けすればいいのです。

マイクロデータ

さらに意味的なマークアップをするための方法として，マイクロフォーマット（microformats），マイクロデータ（microdata），RDFa といった方法が提案されています。ここではマイクロデータ，特にGoogle，Yahoo!，Bingが共同で策定を進めている schema.org（日本語訳）の方式を説明します。詳しくは以下のページをご覧ください。

まず，一つの何かについて記述している部分に注目します。それが特にタグで囲まれていないなら，前後で改行する無意味なタグ <div> ... </div> で囲みます。そして，その開始タグに itemscope という属性を書き込みます。さらに，それが人物についての記述なら itemtype="http://schema.org/Person" を付けます。この http://schema.org/Person というページには人物についての語彙がいろいろ挙げてあり，最後に例も載っています。これを見ながら，意味的にマークアップしたい個々の情報を囲むタグに注目します。特にタグがないなら，無意味なタグ <span> ... </span> で囲みます。そして，それぞれの開始タグに itemprop="..." でそれが何の情報であるかを示します。

私の例ですと，次のようになります（メールアドレスはデタラメです）：

<div itemscope itemtype="http://schema.org/Person">
  <span itemprop="name">奥村 晴彦</span><br>
  <img src="okumura.jpg" alt="奥村 晴彦" itemprop="image"><br>
  <span itemprop="affiliation">三重大学</span>
  <span itemprop="jobTitle">教授</span><br>
  住所 <span itemprop="address">津市栗真町屋町1577</span><br>
  電話 <span itemprop="telephone">059-232-1211</span><br>
  メール <a href="mailto:okumura@example.jp" itemprop="email">okumura@example.jp</a>
</div>

次は本の紹介の例です。

<div itemscope itemtype="http://schema.org/Book">
  <img itemprop="image" src="bibun5.jpg" alt="美文書5">
  <p><span itemprop="author">奥村晴彦</span>著
  <span itemprop="name">［改訂第5版］LaTeX2e美文書作成入門</span>
  （<span itemprop="publisher">技術評論社</span>，
  <time itemprop="datePublished" datetime="2010-07">2010年7月</time>，
  ISBN<span itemprop="isbn">978-4-7741-4319-4</span>，
  <span itemprop="offers" itemscope itemtype="http://schema.org/Offer">
    <meta itemprop="priceCurrency" content="JPY">
    <span itemprop="price">3180</span>円＋税
  </span>）</p>
</div>

http://schema.org/Book には値段が直接ありませんが，offer → http://www.schema.org/Offer と入れ子にすることで price や priceCurrency にアクセスできる仕組みです。priceCurrency は単位で，ISO 4217 により円は JPY，米ドルは USD と表します。

Last modified: