List of html5 - Baldanders.info
tag:Baldanders.info,2015-02-03:/tags
2015-02-03T09:00:00+00:00
バルトアンデルスは連続的な怪物,時間の怪物である。(ホルヘ・ルイス・ボルヘス 『幻獣辞典』より)
https://baldanders.info/images/avatar.jpg
https://baldanders.info/images/avatar.jpg
@viewport and @media query
tag:Baldanders.info,2015-02-03:/blog/000801/
2015-02-03T09:00:00+00:00
2015-02-03T09:00:00+00:00
とりあえずトップページと Movable Type で管理してるページは viewport に対応した。それ以外の手書きのページは隙を見て対応することにする。
Spiegel
/profile/
<p> 本当に今更なんだけど。 <a href="http://d.hatena.ne.jp/yomoyomo/20150201/viewport">yomoyomo さんの記事</a>見て「<code>viewport</code> って Safari 専用じゃないんだ」と気がついた。 <a href="http://validator.w3.org/">W3C の Validator</a> で </p> <pre class="brush:html" title="HTML5"><!DOCTYPE html>
<html lang='ja'>
<head>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World!</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html></pre>
<p>
でチェックしてみたが怒られなかったので,もう標準と言っていいのだろう。
(私は <a href="http://validator.w3.org/">W3C の Validator</a> で OK ならよしとしている。細かいことを言ってたらきりがないので)
</p><ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta"><meta> - HTML (HyperText Markup Language) | MDN</a></li>
<li><a href="http://ksnk.jp/viewport.html">HTMLとCSSにおけるviewportについてのメモ</a></li>
<li><a href="http://blog.nzakr.com/multidevice/">マルチデバイス対応方法(viewport,CSSの出し分け)をまとめてみた | NEZU.log</a></li>
<li><a href="http://barktoimagine.com/web/846">レスポンシブWebデザインはviewportとメディアクエリーからはじめろ! | 株式会社Bark to Imagine</a></li>
</ul><p>
何故か <code>viewport</code> の <code>width</code> は既定で980になってるらしい。
どーりで通常のサイトをスマホのブラウザで眺めたらやたら小さく表示されると思ったよ。
これって仕様上のバグじゃねーの。
ふつう既定で <code>width=device-width</code> にしとくもんじゃねーの?
</p><p>
で,あとはこの <code>width</code> 値を使って画面をチューニングすればいい。
私の場合は
</p>
<pre class="brush:css" title="/css/baldanders2014.css">/* condition of medeia */
@media screen and (min-width: 750px) {
html, body {
color: black;
background-color: #FFF8E7; /* Cosmic Latte: http://www.pha.jhu.edu/~kgb/cosspec/ */
}
#sidebar {
display: block;
}
}
@media screen and (max-width: 749px) {
html, body {
color: black;
background-color: white;
}
#sidebar {
display: none;
}
}</pre>
<p>
という感じで,幅が小さくなったらサイドバーを非表示にするようにした。
これは PC のブラウザでも試せるので,よかったら遊んでみてください。
</p><p>
ただし,ページの横幅は 480 を最小値にしてある。
これ以上小さくなるとさすがにレイアウトが壊れる。
最近のスマホは大概 480 以上あるみたいなのでそんなに酷いことにはならないだろう。
</p><p>
さらに CSS では <code>@viewport</code> を策定中らしい。
</p><ul>
<li><a href="http://dev.w3.org/csswg/css-device-adapt/">CSS Device Adaptation</a> (Editor's Draft 11 October 2013)</li>
<li><a href="https://developer.mozilla.org/ja/docs/Web/CSS/@viewport">@viewport - CSS | MDN</a></li>
</ul><p>
これを使えば <code>min-width</code> とか指定できるようになるのだが, <a href="http://jigsaw.w3.org/css-validator/">CSS Validator</a> の方がまだ未サポートらしい。
なので今回は <code>@viewport</code> は見送った。
</p><p>
とりあえずトップページと Movable Type で管理してるページは <code>viewport</code> に対応した。
それ以外の手書きのページは隙を見て対応することにする。
</p>
ちょこっと MathJax
tag:Baldanders.info,2014-10-09:/blog/000750/
2014-10-09T09:00:00+00:00
2014-10-09T09:00:00+00:00
ふだん数式とか使わないけど,たまには使いたい時もある。そういうとき,手軽にかつ綺麗に数式を入力・表示するには MathJax を使うといいらしい。
Spiegel
/profile/
<p> ふだん数式とか使わないけど,たまには使いたい時もある。 そういうとき,手軽にかつ綺麗に数式を入力・表示するには MathJax を使うといいらしい。 </p><ul> <li><a href="http://www.mathjax.org/">MathJax</a></li> <li><a href="https://github.com/mathjax/MathJax">mathjax/MathJax</a> (GitHub)</li> </ul><p> MathJax を使うには MathJax.js を読みこめばいいのだが, MathJax では CDN(Content Distribution Network)が使える。 したがって </p> <pre class="brush:html" title="HTML 記述"><script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML&locale=ja"></script></pre>
<p>
という記述を HTML に書くだけで使えるようになる。
</p><p>
(HTML5 では <code><script></code> 要素の type の既定が <code>"text/javascript"</code> なので,この場合は省略可能。
また,他のページの説明を見ると src の指定が <code><script src="http://~"></code> となっているが,セキュリティ上の問題(なりすまし等)があるため,上記のように https を使うのが望ましい)
</p><p>
(<a href="http://docs.mathjax.org/en/latest/localization.html"><code>locale=ja</code> パラメータを指定</a>すると数式を右クリックした際のコンテキストメニューやヘルプが日本語になる。お試しあれ)
</p><p>
MathJax.js を指定する場所は,通常は <code><head></code> 要素内だが, <code><body></code> 要素内に書いても問題なく動作するようだ。
使い分けとしては,数式をよく使うまたは MathJax の機能をフルに使う場合は <code><head></code> 要素内に(あらかじめテンプレート等で)指定する。
たまにちょこっとだけ数式を使いたいときは都度都度に <code><body></code> 要素内の最後の方に記述するとよいだろう。
</p><p>
日本語の記事に数式を混ぜると地の文と数式とのバランスがおかしくなるようだ。
この場合は configuration を
</p>
<pre class="brush:javascript" title="MathJax Configuring"><script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML&locale=ja">
MathJax.Hub.Config({
"HTML-CSS": {matchFontHeight: false}
});
</script></pre>
<p>
のように変更するとよい。
また
</p>
<pre class="brush:javascript" title="MathJax Configuring"><script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML&locale=ja">
MathJax.Hub.Config({
"HTML-CSS": {
matchFontHeight: false,
preferredFont: null,
webFont: "TeX"
}
});
</script></pre>
<p>
のように <a href="http://docs.mathjax.org/en/latest/options/HTML-CSS.html">preferredFont と webFont を指定</a>すると強制的に Web フォントを読み込むみたい。
</p><p>
MathJax では LaTeX 記法がそのまま使える。
例えば本文に数式を記述するには <code>\( ... \)</code> で囲んで
</p>
<pre class="brush:html" title="HTML 記述">エネルギーと質量には \( E = mc^2 \) の関係がある。</pre>
<p>
とする。
この場合の出力結果は
</p>
<blockquote>エネルギーと質量には \( E = mc^2 \) の関係がある。</blockquote>
<p>
となる。
configuration で
</p>
<pre class="brush:javascript" title="MathJax Configuring"><script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML&locale=ja">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [['$','$'], ['\\(','\\)']],
processEscapes: true
}
});
</script></pre>
<p>
と指定すると本文中の数式指定に <code>$ ... $</code> が使える。
</p>
<pre class="brush:html" title="HTML 記述">エネルギーと質量には $ E = mc^2 $ の関係がある。</pre>
<blockquote>エネルギーと質量には $ E = mc^2 $ の関係がある。</blockquote>
<p>
この場合,もし本文で \$ 文字が使いたい場合は <code>\$</code> とエスケープする。
</p><p>
不等号記号(< または >)を使う際は <code>\lt</code> または <code>\gt</code> を使うほうが安全である。
</p>
<pre class="brush:html" title="HTML 記述">不等号は $ a \lt b $ または $ a \gt b $ と記述する。</pre>
<blockquote>不等号は $ a \lt b $ または $ a \gt b $ と記述する。</blockquote>
<p>
(ちなみに LaTeX には <code>\lt</code> マクロや <code>\gt</code> マクロは存在しないので, LaTeX 入力と互換にするには LaTeX 側で
</p>
<pre class="brush:text" title="LaTeX マクロ定義">\newcommand{\lt}{<}
\newcommand{\gt}{>}</pre>
<p>
などと定義しておく)
</p><p>
別行の数式の場合は <code>\[ ... \]</code> で囲んで
</p>
<pre class="brush:html" title="HTML 記述">\[
\frac{\pi}{2} =
\left( \int_{0}^{\infty} \frac{\sin x}{\sqrt{x}} dx \right)^2 =
\sum_{k=0}^{\infty} \frac{(2k)!}{2^{2k}(k!)^2} \frac{1}{2k+1} =
\prod_{k=1}^{\infty} \frac{4k^2}{4k^2 - 1}
\tag{1}
\label{eq:1}
\]</pre>
<p>
などと記述する。
この場合の出力結果は
</p>
<blockquote>
\[
\frac{\pi}{2} =
\left( \int_{0}^{\infty} \frac{\sin x}{\sqrt{x}} dx \right)^2 =
\sum_{k=0}^{\infty} \frac{(2k)!}{2^{2k}(k!)^2} \frac{1}{2k+1} =
\prod_{k=1}^{\infty} \frac{4k^2}{4k^2 - 1}
\tag{1}
\label{eq:1}
\]
</blockquote>
<p>
となる。
<code>\tag{1}</code> は式番号を与える。
またラベル <code>\label{eq:1}</code> をセットしておけば <code>\eqref{eq:1}</code> を使って<q>\eqref{eq:1}</q>と展開される。
</p><p>
以上の数式展開は <code><code></code> 要素および <code><pre></code> 要素内では無効になる。
</p><p>
んー,こんな感じかな。
</p>
<section>
<h3>参考文献</h3>
<ul>
<li><a href="http://genkuroki.web.fc2.com/">MathJaxの使い方</a></li>
<li><a href="http://oku.edu.mie-u.ac.jp/~okumura/javascript/mathjax.html">MathJaxによる数式表示</a></li>
<li><a href="http://www.yamamo10.jp/yamamoto/comp/WEB/MathJax/index.php">webページの書き方(数式 MathJax)</a></li>
<li><a href="http://gilbert.ninja-web.net/math/mathjax1.html">MathJaxの使い方〈導入編〉</a></li>
</ul>
</section>
<section>
<h3>参考図書</h3>
<div class="hreview"><a class="item url" href="https://www.amazon.co.jp/exec/obidos/ASIN/4774160458/baldandersinf-22/"><img src="https://images-fe.ssl-images-amazon.com/images/I/51UNf22nkGL._SL160_.jpg" alt="photo" class="photo"/></a><dl><dt class="fn"><a class="item url" href="https://www.amazon.co.jp/exec/obidos/ASIN/4774160458/baldandersinf-22/">[改訂第6版] LaTeX2ε美文書作成入門</a></dt><dd>奥村 晴彦 黒木 裕介 </dd><dd>技術評論社 2013-10-23</dd><dd>評価<abbr class="rating" title="4"><img src="https://images-fe.ssl-images-amazon.com/images/G/01/detail/stars-4-0.gif" alt=""/></abbr> </dd></dl><p class="similar"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/4798118141/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/4798118141.09._SCTHUMBZZZ_.jpg" alt="LaTeX2e辞典 用法・用例逆引きリファレンス (DESKTOP REFERENCE)"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/448009525X/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/448009525X.09._SCTHUMBZZZ_.jpg" alt="数学文章作法 基礎編 (ちくま学芸文庫)"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/4320122488/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/4320122488.09._SCTHUMBZZZ_.jpg" alt="はやわかりMathematica 第3版"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/4274215881/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/4274215881.09._SCTHUMBZZZ_.jpg" alt="ロボット考学と人間―未来のためのロボット工学―"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/4877833110/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/4877833110.09._SCTHUMBZZZ_.jpg" alt="LATEXはじめの一歩―Windows8/7対応 (やさしいプログラミング)"/></a> </p>
<p class="description">LaTeX で困ったときはこの本を開いてみるといいかも。</p>
<p class="gtools">reviewed by <a href="#me" class="reviewer">Spiegel</a> on <abbr class="dtreviewed" title="2014-09-03">2014/09/03</abbr> (powered by <a href="http://www.goodpic.com/mt/aws/index.html">G-Tools</a>)</p>
</div>
</section>
<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML&locale=ja"></script>
<script>
MathJax.Hub.Config({
tex2jax: {
inlineMath: [['$','$'], ['\\(','\\)']],
processEscapes: true
},
"HTML-CSS": {
matchFontHeight: false,
preferredFont: null,
webFont: "TeX"
}
});
</script>
Microdata は machine-understandable ではない
tag:Baldanders.info,2014-09-02:/blog/000729/
2014-09-02T09:00:00+00:00
2014-09-02T09:00:00+00:00
長年(といっても10年足らずだけど)RDF を使ってたおかげで Semantic Web について考える際にはどうしても「主語-述語-目的語」の Triple で考える癖がついてしまってるのだが,その発想が Microdata の理解を妨げているらしいと気がついた。そこでちょっとアプローチを変えてみることにした。その上で RDF/RDFa と Microdata を比較・考察してみる。
Spiegel
/profile/
<p> 長年(といっても10年足らずだけど)RDF を使ってたおかげで Semantic Web について考える際にはどうしても「主語-述語-目的語」の Triple で考える癖がついてしまってるのだが,その発想が Microdata の理解を妨げているらしいと気がついた。 そこでちょっとアプローチを変えてみることにした。 その上で RDF/RDFa と Microdata を比較・考察してみる。 </p> <section> <h3>勝手に「Microdata 用語」</h3> <p> Microdata に関する色々なページを回ってみるが,体系的にきちんとした説明をしているところはほぼない。 「<a href="http://www.w3.org/TR/2013/NOTE-microdata-20131029/">W3C のドキュメント</a>を見ろ」と言われそうだが,こちらも「使い方」以上の説明がない。 (ところで Microdata に関する「勧告(Recommendation)」レベルのドキュメントってあるの?) </p><p> そこでこちらで勝手に「用語」を設定して整理してみることにする。 もちろんここで言う「用語」はこのページでしか通用しない。ゴメンペコン。 </p><p> Microdata を理解するには「オブジェクト指向(object-orientation)」で考えると分かりやすい。 また Microdata のデータ構造は HTML 記述の制約を受ける。 したがって Microdata による記述の範囲は,最大でもそのページの内部に限られる。 なぜなら Microdata は <a href="http://www.w3.org/DOM/">DOM(Document Object Model)</a>に組み込まれている(<a href="http://html5experts.jp/shumpei-shiraishi/1710/">予定</a>だ)からだ。 </p><p> <code>itemscope</code> 属性(値なし)をセットされた要素およびその子要素は item と呼ばれる。 item の type は <code>itemtype</code> 属性で指定する。 つまり item と type は is-a 関係である,と言える。 違う言い方をするなら, item は instance object で type は class object である,とも言える。 実際, <a href="http://schema.org/">schema.org</a> を見ると type 同士も is-a 関係による hierarchical 構造を持っているのがわかる。 (<span class="offrec">この辺は Semantic Web における <a href="http://www.w3.org/TR/owl-features/">ontology 研究</a>の成果かねぇ</span>) </p><ul> <li><a href="http://schema.org/docs/full.html">Full Hierarchy - schema.org</a> (<a href="http://schema-ja.appspot.com/docs/full.html">日本語訳</a>)</li> </ul><p> item 内では「名前-値」の組合せで構成された property を設置することができる。 property 名は item の type によって使える名前が決まっていて <code>itemprop</code> 属性で指定する。 property 値には literal 以外に item を指定することができる(したがって property 値は構造を持つ)。 property 値についても対応する property 名によって <q lang="en">expected type</q> が決められているが(他所のサイトの例示等を見る限り)強い制約ではないようである。 </p><p> item と property は常に has-a 関係である。 </p><p> item 自身には「名前」がない。 何故かというと Microdata には property 以外に item 同士を関連付ける手段がないため,<strong>識別(identification)</strong>のための「名前」は不要なのである。 (<code>itemref</code> 属性および <code>itemid</code> 属性については後述) </p><p> 大雑把な説明はここまで。 ここでいったん「用語」を整理しておこう。 </p> <figure> <table> <thead> <tr><th>用語</th><th>内容</th></tr> </thead> <tbody> <tr><td>item</td> <td>Microdata における instance object の単位</td></tr> <tr><td>type</td> <td>Microdata における class object の単位</td></tr> <tr><td>property</td> <td>item の内容を示す情報。「名前-値」の組合せ(連想配列)で表現する</td></tr> <tr><td>property 名</td><td>property の名前</td></tr> <tr><td>property 値</td><td>property の(名前に対する)値。 literal または item の表現をとる</td></tr> <tr><td>literal</td> <td>特定の書式を持った文字列表現(例:日付 "2014-09-02")</td></tr> <tr><td>is-a 関係</td> <td>両オブジェクトが「継承」関係であることを示す(例: He is-a man.)</td></tr> <tr><td>has-a 関係</td> <td>両オブジェクトが「包含」関係であることを示す(例: She has-a book.)</td></tr> <tr><td>application</td><td>Microdata を読み込み解釈(parse)し利用するプログラムまたはサービス。<br/>parser も application の一種</td></tr> </tbody> </table> <figcaption>勝手に「Microdata 用語」</figcaption> </figure> <p> こうしてみると, Microdata は(Microformats から fork した)RDFa よりも Microformats に近いと言える。 </p> </section> <section> <h3>itemref は property を include する</h3> <p> <code>itemref</code> 属性で ID(<code>id</code> 属性で<strong>指示(indication)</strong>する)を指定すると,対象の ID で示された要素(およびその子要素)内に記述された property を構造ごと取り込み(include), item 内の property として再構成する。 これは結構危険な機能である。 </p><p> まず <code>itemref</code> 属性による指定を忘れると,どの item にも属さない「孤独な property」が存在する可能性がある。 この状態で parser がどう反応するか試してみた。 <q lang="en"><a href="http://www.google.com/webmasters/tools/richsnippets">Google Structured Data Testing Tool</a></q> では単純に <code>itemprop</code> 属性を無視するようだ。 property 値が item の場合は,その item はどこにも属さない独立した item として認識される。 一方 <q lang="en"><a href="http://validator.w3.org/">The W3C Markup Validation Service</a></q> ではガッツリ怒られた。 </p><p> もうひとつは <code>itemref</code> 属性による指定が循環する可能性である。 A → B → C → A と指定すると include が循環して無限ループになる。 さすがにこれがどうなるかは試してない。 まさか今時これで stack overflow するバカな parser はないと思うけど。 </p> </section> <section> <h3>Microdata は itemid を参照しない</h3> <p> item には <code>itemid</code> 属性を使って(ページの外部という意味での)グローバルな ID を<strong>指示(indication)</strong>できる。 ただしこの ID を参照する手段は Microdata 自身には存在しない。 </p><p> property 値(literal 表現)として指定することは可能かもしれないが,たとえ全く同じ文字列であっても property 値と <code>itemid</code> 属性で示した ID が同じであると Microdata 自身は保証しない。 また異なる item に同じ ID を指示することが可能なので, <code>itemid</code> 属性を item の<strong>識別(identification)</strong>手段として用いることもできない。 </p><p> じゃあ何のためにこの機能があるかというと, application 側でこの ID に対応する item を検索するためにある(と思われる)。 </p> </section> <section> <h3>Microdata vs. RDFa</h3> <p> Microdata と RDFa の決定的な違いは, RDFa がネット上のあらゆるリソース(= URI)をノードとしたゆるやかな「網(web)」を構成するのに対し, Microdata はページ内の hierarchical な「構造(structure)」を構成する。 しかも Microdata を読む application は,構造化データのうち自身に必要な項目を読むだけで,そこにある意味を「理解」しているわけではない。 何故なら(それは application がヘボいのではなく)もともと Microdata は application にとって制御情報にすぎないからだ。 </p><p class="offrec"> (たとえば,ある item の type に <a href="http://schema.org/Person"><code>http://schema.org/Person</code></a> を指定した際, <code>itemprop='name'</code> を含む property がないと <q lang="en"><a href="http://www.google.com/webmasters/tools/richsnippets">Google Structured Data Testing Tool</a></q> がエラーを吐く。 <code>givenName</code> や <code>familyName</code> では「名前」と見なしてくれないのだ。 これだけを見ても,いかに世の application が「意味」を「理解」する気がないかが分かる) </p><p> たとえば Google なんかは「世界中の情報をグラフ化する」という社是があるんだから,ページ単位でしかデータを構成できない Microdata よりネット上のあらゆるノードを横断する RDFa を支持すべきだろう,となりそうだが実際にはそうならなかった(RDFa も「読める」程度にはサポートしているが)。 理由は政治的なものも含めて色々あるだろうが,おそらく最も大きな理由は RDF が(Google 等のサービス・プロバイダにとって)uncontrollable だからではないだろうか。 それに比べれば hierarchical な構造を持つ Microdata は御しやすい。 ならば, Microdata は machine-understandable というよりは machine-controllable である,とするべきだ。 </p><p> サービス・プロバイダ(の application)にすり寄っていかざるを得ない SEO(Search Engine Optimization)業者にとっても RDFa を支持する理由はない。 少なくとも <a href="https://developers.facebook.com/docs/opengraph">OGP</a> や <a href="https://dev.twitter.com/ja/docs/cards">Twitter Cards</a> なんかよりは Microdata のほうがよほど「冴えたやり方」と言える。 </p><p class="offrec"> (それでも全部対応せざるを得ないのが SEO の悲しさだが。 どっかにも書いたのだが, SEO ってやればやるほど虚しくなるよね。 サービス・プロバイダの提示するジコチューな仕様に振り回されるだけ。 SEO 屋さんって自分の仕事をどう思ってるのかねぇ) </p><p> Microdata が machine-controllable であることは SEO 以外のメリットもあって(というか,こちらが本命だと思うが),それはブラウザの拡張機能やスマートフォン・タブレットなどの携帯端末で動作する application と相性がいいということだ。 今までもそうだったが,これからもっともっと Web は(application との連携により)programmable になる。 そのための要素技術として Microdata は必須の要件になっていくと思う(DOM API も含めてちゃんと Recommendation が出ればだけど)。 </p><p> これまで述べたように Microdata と RDFa とでは出自も目的も構造もまるで異なる。 競合する規格ではないということだ。 まぁ個人的には,世の中がもうすこしだけ semantics に興味を持っていただければと思うわけだが,需要がないということなんだろうなぁ。 </p> </section> <section> <h3>参考</h3> <p>RDFa については拙文<q><a href="https://baldanders.info/spiegel/rdfa/">RDFa 入門</a></q>をどうそ。いくつか間違いがあったのでそのうち修正する。</p> <ul> <li><a href="http://syncer.jp/schema-entering">Googleリッチスニペット対策!初心者向けSchema.org解説!</a></li> <li><a href="http://junmaruyama.info/schemaorgjenerater/">schema.orgを生成してくれるサイト・ツールまとめ | Jun Maruyama Online クズの条件</a></li> <li><a href="http://www.publickey1.jp/blog/09/html5microdata_1.html">HTML5のドラフト仕様書からMicrodataの抄訳 - Publickey</a> (内容が古いが,日本語ではここが一番まとも)</li> </ul> <div class="hreview"> <a class="item url" href="https://www.amazon.co.jp/exec/obidos/ASIN/B00CZ711QS/baldandersinf-22/"><img src="https://images-fe.ssl-images-amazon.com/images/I/51918WvpWNL._SL160_.jpg" alt="photo" class="photo"/></a><dl><dt class="fn"><a class="item url" href="https://www.amazon.co.jp/exec/obidos/ASIN/B00CZ711QS/baldandersinf-22/">HTML5 スタンダード・デザインガイド~Webサイト制作者のためのビジュアル・リファレンス&セマンティクスによるコンテンツデザインガイド~ [リフロー版]</a></dt><dd>エ・ビスコム・テック・ラボ </dd><dd>マイナビ 2013-02-14</dd><dd>評価<abbr class="rating" title="4"><img src="https://images-fe.ssl-images-amazon.com/images/G/01/detail/stars-4-0.gif" alt=""/></abbr> </dd></dl><p class="similar"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00CZ711R2/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/B00CZ711R2.09._SCTHUMBZZZ_.jpg" alt="CSS3 スタンダード・デザインガイド【改訂第2版】 [リフロー版]"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00CALAWC8/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/B00CALAWC8.09._SCTHUMBZZZ_.jpg" alt="よくわかるJavaScriptの教科書 (教科書シリーズ)"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00BPLSH9E/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/B00BPLSH9E.09._SCTHUMBZZZ_.jpg" alt="jQueryデザインブック 仕事で絶対に使うプロのテクニック"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00ME0FJ14/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/B00ME0FJ14.09._SCTHUMBZZZ_.jpg" alt="PHPライブラリ&サンプル実践活用[厳選100] (Software Design Plus)"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00M0ESXUI/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/B00M0ESXUI.09._SCTHUMBZZZ_.jpg" alt="Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法"/></a> </p> <p class="gtools">reviewed by <a href="#me" class="reviewer">Spiegel</a> on <abbr class="dtreviewed" title="2014/09/02">2014/09/02</abbr> (powered by <a href="http://www.goodpic.com/mt/aws/index.html">G-Tools</a>)</p> </div> <p class="offrec">(あとはこの hReview なんだよなぁ。どうにかしたいがどうにかなるのだろうか)</p> </section>
HTML5 とメタデータ
tag:Baldanders.info,2014-08-23:/blog/000727/
2014-08-23T09:00:00+00:00
2014-08-23T09:00:00+00:00
Atom feed と ccREL / head 要素内の標準的なメタ情報 /Microdata の基本知識
Spiegel
/profile/
<p> 今回は覚え書きのみでお送ります。 イマイチ理解してない気がするので,おかしいところは遠慮なくツッコんで下さい。 </p> <section> <h3>Atom feed と ccREL</h3> <p> Atom feed は XML なので ccREL を使って著作権情報を入れることは可能。 </p><ul> <li><a href="https://wiki.creativecommons.org/Atom">Atom - CC Wiki</a></li> </ul><p> まず ccREL の名前空間を追加する。 </p> <pre class="brush:html" title="feed element - Atom feed"><feed xmlns="http://www.w3.org/2005/Atom" xmlns:cc="http://web.resource.org/cc/"></pre>
<p>
これで <code><feed></code> 要素,またはその子要素の <code><entry></code> 要素内に <code>cc:license</code>, <code>cc:morePermissions</code> 等の記述を追加すればいいだけ。
</p>
<pre class="brush:html" title="ccREL on Atom feed"><link rel="cc:license" type="application/rdf+xml" href="http://creativecommons.org/licenses/by/4.0/rdf" />
<link rel="cc:morePermissions" type="text/html" href="/cc-license.shtml#morePermissions" /></pre>
<p>
この例では cc-license の Commos Deed ではなく RDF/XML に直接リンクしている。
これでいいらしい。
タイトル,著者,日付情報については Atom の property でまかなえる。
</p><p>
<code>cc:license</code>, <code>cc:morePermissions</code>, <code>cc:useGuidelines</code> といった property については<a href="https://baldanders.info/spiegel/rdfa/#ccrel">拙文の ccREL の節</a>を参照のこと。
</p>
</section>
<section>
<h3>head 要素内の標準的なメタ情報</h3>
<p>
HTML5 の <code><head></code> 要素内には <code><meta></code> 要素や <code><link></code> 要素などでメタデータを記述できる。
値がリテラルの場合は <code><meta></code> 要素を, URL 等のリソースの場合には <code><link></code> 要素を使う。
</p><p>
<code><link></code> は void 要素で有効な属性は(グローバル属性以外では)以下のとおり。
</p><ul class="cloud">
<li><code>href</code></li>
<li><code>crossorigin</code></li>
<li><code>rel</code> (MUST)</li>
<li><code>media</code></li>
<li><code>hreflang</code></li>
<li><code>type</code></li>
<li><code>sizes</code> (for <code>rel="icon"</code> property)</li>
<li><code>title</code></li>
</ul><p>
メタデータは rel-href のセットで記述される。
<code>rel</code> 属性にセットする標準のタイプは以下のとおり。
</p><ul class="cloud">
<li><code>author</code></li>
<li><code>help</code></li>
<li><code>icon</code></li>
<li><code>license</code></li>
<li><code>next</code></li>
<li><code>prefetch</code></li>
<li><code>prev</code></li>
<li><code>search</code></li>
<li><code>stylesheet</code></li>
</ul><p>
<code>icon</code> と <code>prefetch</code> 以外は <code>href</code> 要素にハイパーリンクを指定する。
<code>bookmark</code>, <code>nofollow</code>, <code>noreferrer</code>, <code>tag</code> は <code><link></code> 要素では使用できない。
</p><p class="offrec">
(<code>tag</code> は <code><a></code> 要素等では使えるとあり,確かに <a href="http://validator.w3.org/">HTML5 validator</a> では問題ないが <a href="http://www.w3.org/2012/pyRdfa/Validator.html">RDFa Validator</a> ではガッツリ怒られる(<code>nofollow</code> は怒られないのに)。この場合は <code>xhv:</code> 接頭辞をつけるとよい。でもこれで parser が正しく認識してくれるかは不明)
</p><p>
<code><meta></code> は void 要素で, <code><title></code>, <code><base></code>, <code><link></code>, <code><style></code>, <code><script></code> 要素で表現できない情報を記述する。
有効な属性は(グローバル属性以外では)以下のとおり。
</p><ul class="cloud">
<li><code>charset</code></li>
<li><code>content</code></li>
<li><code>http-equiv</code></li>
<li><code>name</code></li>
</ul><p>
ひとつの要素内では <code>name</code>, <code>http-equiv</code>, <code>charset</code> 属性のうちひとつのみを記述する(<span class="offrec">グローバル属性を含め property 名を指示する属性は要素内にひとつしか記述できないようだ</span>)。
</p><p class="offrec">
(<code>http-equiv</code> 属性の <code>content-type</code> は <code>charset</code> 属性で代替できるため HTML5 では不要。また <code>content-language</code> もグローバル属性の <code>lang</code> で代替できるため,同様に不要)
</p><p>
name-content のセットでメタデータを記述する際の標準メタデータ名は以下のとおり(なのでこれらのメタデータを <code><head></code> 要素で指示する場合はなるべく標準の名前を使うべき?)。
</p><ul class="cloud">
<li><code>author</code></li>
<li><code>description</code></li>
<li><code>generator</code></li>
<li><code>keywords</code></li>
</ul><p>
参考:
</p><ul>
<li><a href="http://www.w3.org/TR/2014/CR-html5-20140731/">HTML5(2014-06-17 W3C Cantidate Recommendation)</a></li>
<li><a href="http://ja.opera-wiki.com/Project:HTML5%E6%97%A5%E6%9C%AC%E8%AA%9E%E5%8C%96">Project:HTML5日本語化 - Opera Wiki</a></li>
</ul>
</section>
<section>
<h3>Microdata の基本知識</h3>
<p>
Microdata で利用可能な属性は以下のとおり。
</p><ul class="cloud">
<li><code>itemscope</code></li>
<li><code>itemtype</code></li>
<li><code>itemid</code></li>
<li><code>itemprop</code></li>
<li><code>itemref</code></li>
</ul><p>
これらはグローバル属性として扱われる。
基本的には <code>itemscope</code> 属性を指定した要素で囲まれた部分で <code>itemprop</code> 属性を使ってメタデータを記述していく。
</p>
<!--
<div itemscope itemtype="http://schema.org/Person">
私の名前は <span itemprop="name">Spiegel</span> です。
</div>
-->
<pre class="brush:html" title="Microdata basic"><div itemscope itemtype="http://schema.org/Person">
私の名前は <span itemprop="name">Spiegel</span> です。
</div></pre>
<p>
<code>itemscope</code> 属性の範囲を item と呼ぶ。
item のタイプを <code>itemtype</code> 属性で記述し, item の内容を <code>itemprop</code> 属性で記述する。
</p><p>
item は入れ子にすることで構造化が可能。
</p>
<!--
<article itemscope itemtype="http://schema.org/Article">
[...]
<div itemprop="author" itemscope itemtype="http://schema.org/Person">
Written by <span itemprop="name">Spiegel</span>.
</div>
<article>
-->
<pre class="brush:html" title="Microdata basic"><article itemscope itemtype="http://schema.org/Article">
[...]
<div itemprop="author" itemscope itemtype="http://schema.org/Person">
Written by <span itemprop="name">Spiegel</span>.
</div>
<article></pre>
<p>
<del>更に item 同士は <code>id</code> 属性(グローバル属性)と <code>itemref</code> 属性を使って連結できる。
これによりメタデータを構造化できる? かも?</del>
<code>itemref</code> 属性は <code>id</code> 属性(グローバル属性)で指定した先の情報を include する。
</p>
<!--
<div itemscope itemtype="http://schema.org/Person" itemref="link">
私の名前は <span itemprop="name">Spiegel</span> です。
</div>
[...]
<div id="link">
続きは <a href="https://baldanders.info/profile/" itemprop="url">Web</a> で。
</div>
-->
<pre class="brush:html" title="Microdata basic"><div itemscope itemtype="http://schema.org/Person" itemref="link">
私の名前は <span itemprop="name">Spiegel</span> です。
</div>
[...]
<div id="link">
続きは <a href="/profile/" itemprop="url">Web</a> で。
</div></pre>
<p>
この例では, <code>itemprop="url"</code> で指定した情報が元の item に組み込まれる。
<code>itemref</code> 属性には複数の ID を指定できるらしい?
</p><p>
id-itemref 連携はページ内でしかできない(URI ではないため)。
外部のリソースを指示するには <code>itemid</code> を使う(<span class="offrec">らしいのだが使い方がいまいち分からない。 URN を使った例示はあるが,一般的な URI が使えるのかどうか明示されてない</span>)。
</p><p>
また Microdata の属性はグローバルなので <code><link></code> 要素や <code><meta></code> 要素でも使える。
この場合 <code><link></code> 要素や <code><meta></code> 要素は <code><body></code> 要素内でも使用可能となり,しかも flow content かつ phrasing content として機能するらしい(あまり smart じゃない気がするなぁ)?
</p><p>
Microdata の Validator のようなものはない模様。
その代わり Google が <q lang="en"><a href="http://www.google.com/webmasters/tools/richsnippets">Google Structured Data Testing Tool</a></q> というサービスを行っていて,これである程度は分かるかもしれない。
</p><p>
参考:
</p><ul>
<li><a href="http://www.w3.org/TR/2013/NOTE-microdata-20131029/">HTML Microdata (W3C Working Group Note 29 October 2013)</a></li>
<li><a href="http://schema.org/">schema.org</a></li>
<li><a href="http://kots.jp/blog/site-structured/2585/">Microformats & RDFa – 構造化についてまとめ① | kots blog</a></li>
<li><a href="http://hyper-text.org/archives/2013/01/meta_microdata.shtml">meta 要素に対する Microdata の指定 | WWW WATCH</a></li>
</ul>
</section>
<div class="hreview"><a class="item url" href="https://www.amazon.co.jp/exec/obidos/ASIN/B00CZ711QS/baldandersinf-22/"><img src="https://images-fe.ssl-images-amazon.com/images/I/51918WvpWNL._SL160_.jpg" alt="photo" class="photo"/></a><dl><dt class="fn"><a class="item url" href="https://www.amazon.co.jp/exec/obidos/ASIN/B00CZ711QS/baldandersinf-22/">HTML5 スタンダード・デザインガイド~Webサイト制作者のためのビジュアル・リファレンス&セマンティクスによるコンテンツデザインガイド~ [リフロー版]</a></dt><dd>エ・ビスコム・テック・ラボ </dd><dd>マイナビ 2013-02-14</dd><dd>評価<abbr class="rating" title="4"><img src="https://images-fe.ssl-images-amazon.com/images/G/01/detail/stars-4-0.gif" alt=""/></abbr> </dd></dl><p class="similar"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00CZ711R2/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/B00CZ711R2.09._SCTHUMBZZZ_.jpg" alt="CSS3 スタンダード・デザインガイド【改訂第2版】 [リフロー版]"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00CALAWC8/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/B00CALAWC8.09._SCTHUMBZZZ_.jpg" alt="よくわかるJavaScriptの教科書 (教科書シリーズ)"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00BPLSH9E/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/B00BPLSH9E.09._SCTHUMBZZZ_.jpg" alt="jQueryデザインブック 仕事で絶対に使うプロのテクニック"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00M0ESXUI/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/B00M0ESXUI.09._SCTHUMBZZZ_.jpg" alt="Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00IWHVLUG/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/B00IWHVLUG.09._SCTHUMBZZZ_.jpg" alt="これからの「標準」を身につける HTML+CSSデザインレシピ[固定レイアウト版]"/></a> </p><p class="gtools">by <a href="http://www.goodpic.com/mt/aws/index.html">G-Tools</a> , <abbr class="dtreviewed" title="2014/08/22">2014/08/22</abbr></p></div>
ccREL と RDFa,もしくは Open Graph と Microdata
tag:Baldanders.info,2014-08-22:/blog/000726/
2014-08-22T09:00:00+00:00
2014-08-22T09:00:00+00:00
これで一応完成。夏休みの読書感想文ってところですかね。
Spiegel
/profile/
<p> 「<a href="https://baldanders.info/cc-license.shtml">クリエイティブ・コモンズ・ライセンスについて</a>」の <a href="https://baldanders.info/cc-license.shtml#metadata">RDF の節</a>と「<a href="https://baldanders.info/spiegel/rdfa/">RDFa 入門</a>」の <a href="https://baldanders.info/spiegel/rdfa/#ccrel">ccREL の節</a>を追記した。 両者はお互いに関連してるので記述をどう分けるかで悩んだ。 まぁ,でも,これで一応完成。 夏休みの読書感想文ってところですかね。 「<a href="https://baldanders.info/cc-license.shtml">クリエイティブ・コモンズ・ライセンスについて</a>」は当初予想してたより随分量が増えてしまったので目次を付けないとダメかもしれん。 まぁその辺はおいおい。 </p><p> サイトのリニューアルも <a href="https://baldanders.info/profile/">Profile のページ</a>と <a href="https://baldanders.info/spiegel/archive/">Archive のページ</a>を整理すれば一応完了。 古いコンテンツは引き続き放置することにした。 ここまでできれば夏休みの宿題完了ってところだろうか。 </p><p> RDFa についてひとつだけ理解したことがある。 それは </p><p class="center"> <strong class="caution">Open Graph は RDFa じゃねー!</strong> </p><p> ということだった。 単に RDFa に似せて作ってるというだけで RDFa の機能,つまり「意味を構成する」ことができない。 要するにアプリの制御情報(文字通りの property)を「RDFa みたいな」しくみで HTML の <code><head></code> 要素に埋め込んでるだけなのだ。 だいたい Open Graph なんて思わせぶりな名前がいけないんだよな。 そういう方面を期待しちゃうじゃない。 </p><p> で,こういうバカな仕組みほど真似する奴が多いようで, <a href="https://dev.twitter.com/ja/docs/cards">Twitter Card</a> なんてそのまんまだし, <a href="http://developer.mixi.co.jp/connect/mixi_plugin/mixi_check/spec_mixi_check/">mixi</a> や <a href="https://docs.developer.gree.net/ja/platform/connect/socialfeedback">GREE</a> は Open Graph に独自仕様を混ぜ込んで「さすが日本は素晴らしいガラパゴスですね」って感じである。 </p><p> こういうアホなものにつきあうのは業腹なので Open Graph の記述は全部取っ払った。 お陰で <code><head></code> 要素内がスッキリしたよ。 シンプルなのが一番。 もともと Open Graph の情報を入れたのは Facebook や Facebook ページの調査のためだったしな。 Facebook ブームも終わったみたいだし,もうええやろ。 </p><p> SEO 的な効果を考えるのなら Open Graph より Microdata を導入することをお薦めする。 手始めに以下はどうだろうか。 </p><ul> <li><a href="http://kots.jp/blog/site-structured/6284/">microdata のスニペットをbodyタグに書く方法 | kots blog</a></li> </ul><p> これは面白そうなので後日試してみる。 Microdata の勉強になるかな。 </p> <div class="hreview"><a class="item url" href="https://www.amazon.co.jp/exec/obidos/ASIN/B00CZ711QS/baldandersinf-22/"><img src="https://images-fe.ssl-images-amazon.com/images/I/51918WvpWNL._SL160_.jpg" alt="photo" class="photo"/></a><dl><dt class="fn"><a class="item url" href="https://www.amazon.co.jp/exec/obidos/ASIN/B00CZ711QS/baldandersinf-22/">HTML5 スタンダード・デザインガイド~Webサイト制作者のためのビジュアル・リファレンス&セマンティクスによるコンテンツデザインガイド~ [リフロー版]</a></dt><dd>エ・ビスコム・テック・ラボ </dd><dd>マイナビ 2013-02-14</dd><dd>評価<abbr class="rating" title="4"><img src="https://images-fe.ssl-images-amazon.com/images/G/01/detail/stars-4-0.gif" alt=""/></abbr> </dd></dl><p class="similar"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00CZ711R2/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/B00CZ711R2.09._SCTHUMBZZZ_.jpg" alt="CSS3 スタンダード・デザインガイド【改訂第2版】 [リフロー版]"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00CALAWC8/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/B00CALAWC8.09._SCTHUMBZZZ_.jpg" alt="よくわかるJavaScriptの教科書 (教科書シリーズ)"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00BPLSH9E/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/B00BPLSH9E.09._SCTHUMBZZZ_.jpg" alt="jQueryデザインブック 仕事で絶対に使うプロのテクニック"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00M0ESXUI/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/B00M0ESXUI.09._SCTHUMBZZZ_.jpg" alt="Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00IWHVLUG/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/B00IWHVLUG.09._SCTHUMBZZZ_.jpg" alt="これからの「標準」を身につける HTML+CSSデザインレシピ[固定レイアウト版]"/></a> </p><p class="gtools">by <a href="http://www.goodpic.com/mt/aws/index.html">G-Tools</a> , <abbr class="dtreviewed" title="2014/08/22">2014/08/22</abbr></p></div>
RDFa についてちゃんと書いてみた
tag:Baldanders.info,2014-08-18:/blog/000725/
2014-08-18T09:00:00+00:00
2014-08-18T09:00:00+00:00
前回 RDFa についてちょろんと書いたが,そろそろ頭のなかが煮詰まってきたので,整理も兼ねて RDFa についてちゃんと書いてみることにした。
Spiegel
/profile/
<p> 前回 <a href="https://baldanders.info/blog/000722/">RDFa についてちょろんと書いた</a>が,そろそろ頭のなかが煮詰まってきたので,整理も兼ねて RDFa についてちゃんと書いてみることにした。 </p><ul> <li><a href="https://baldanders.info/spiegel/rdfa/">RDFa 入門 — Baldanders.info</a></li> </ul><p> <a href="https://baldanders.info/spiegel/rdfa/#foaf">FoaF まで書いた</a>ところで力尽きた。 ccREL までたどり着かなかったよ。 続きはまた今度。 </p><p> しかし,考えれば考えるほど Open Graph はダサいと思うのだが,その辺どうなんだろう。 なんで FoaF より後発の Open Graph のほうがデキが悪いのか分からない。 それともみんなもう Microdata の方に行っちゃってるのかな。 </p> <div class="hreview"><a class="item url" href="https://www.amazon.co.jp/exec/obidos/ASIN/483993195X/baldandersinf-22/"><img src="https://images-fe.ssl-images-amazon.com/images/I/51oaN2iq9xL._SL160_.jpg" alt="photo" class="photo"/></a><dl><dt class="fn"><a class="item url" href="https://www.amazon.co.jp/exec/obidos/ASIN/483993195X/baldandersinf-22/">セマンティック HTML/XHTML</a></dt><dd>神崎 正英 </dd><dd>毎日コミュニケーションズ 2009-05-28</dd><dd>評価<abbr class="rating" title="4"><img src="https://images-fe.ssl-images-amazon.com/images/G/01/detail/stars-4-0.gif" alt=""/></abbr> </dd></dl><p class="similar"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/4627829310/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/4627829310.09._SCTHUMBZZZ_.jpg" alt="セマンティック・ウェブのためのRDF/OWL入門"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/4873114527/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/4873114527.09._SCTHUMBZZZ_.jpg" alt="セマンティックWeb プログラミング"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/4764904276/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/4764904276.09._SCTHUMBZZZ_.jpg" alt="Linked Data: Webをグローバルなデータ空間にする仕組み"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/4274202925/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/4274202925.09._SCTHUMBZZZ_.jpg" alt="オントロジー構築入門"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/4501542101/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/4501542101.09._SCTHUMBZZZ_.jpg" alt="トピックマップ入門 (セマンティック技術シリーズ)"/></a> </p><p>残念ながら紙の本は実質的に絶版なんですよねぇ。是非デジタル化を希望します。</p><p class="gtools">by <a href="http://www.goodpic.com/mt/aws/index.html">G-Tools</a> , <abbr class="dtreviewed" title="2014/08/17">2014/08/17</abbr></p></div> <div class="hreview"><a class="item url" href="https://www.amazon.co.jp/exec/obidos/ASIN/B00CZ711QS/baldandersinf-22/"><img src="https://images-fe.ssl-images-amazon.com/images/I/51918WvpWNL._SL160_.jpg" alt="photo" class="photo"/></a><dl><dt class="fn"><a class="item url" href="https://www.amazon.co.jp/exec/obidos/ASIN/B00CZ711QS/baldandersinf-22/">HTML5 スタンダード・デザインガイド~Webサイト制作者のためのビジュアル・リファレンス&セマンティクスによるコンテンツデザインガイド~ [リフロー版]</a></dt><dd>エ・ビスコム・テック・ラボ </dd><dd>マイナビ 2013-02-14</dd><dd>評価<abbr class="rating" title="4"><img src="https://images-fe.ssl-images-amazon.com/images/G/01/detail/stars-4-0.gif" alt=""/></abbr> </dd></dl><p class="similar"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00CZ711R2/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/B00CZ711R2.09._SCTHUMBZZZ_.jpg" alt="CSS3 スタンダード・デザインガイド【改訂第2版】 [リフロー版]"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00CALAWC8/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/B00CALAWC8.09._SCTHUMBZZZ_.jpg" alt="よくわかるJavaScriptの教科書 (教科書シリーズ)"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00BPLSH9E/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/B00BPLSH9E.09._SCTHUMBZZZ_.jpg" alt="jQueryデザインブック 仕事で絶対に使うプロのテクニック"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00IWHVLUG/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/B00IWHVLUG.09._SCTHUMBZZZ_.jpg" alt="これからの「標準」を身につける HTML+CSSデザインレシピ[固定レイアウト版]"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00M0ESXUI/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/B00M0ESXUI.09._SCTHUMBZZZ_.jpg" alt="Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法"/></a> </p><p class="gtools">by <a href="http://www.goodpic.com/mt/aws/index.html">G-Tools</a> , <abbr class="dtreviewed" title="2014/08/17">2014/08/17</abbr></p></div>
RDFa 入門
tag:Baldanders.info,2014-08-18:/spiegel/rdfa/
2014-08-18T05:02:47+00:00
2019-06-16T07:50:24+00:00
Web ページにメタデータを記述する RDFa について簡単に説明します。
Spiegel
/profile/
<p>ここでは Web ページにメタデータを記述する RDFa について簡単に説明します。</p>
<p>「メタデータ(metadeta)」というのは「情報に関する情報」といった程度の意味で,特に RDF/RDFa の場合は,検索エンジンなどの機械が理解可能な(machine-understandable)情報を記述することを目標にしています。</p>
<ol>
<li><a href="#fromrdf">まずは RDF から</a></li>
<li><a href="#tordfa">RDF から RDFa へ</a></li>
<li><a href="#rule">RDFa の基本的なルールと語彙</a></li>
<li><a href="#dct">Dublin Core Terms</a></li>
<li><a href="#foaf">Friend of a Friend</a></li>
<li><a href="#ccrel">Creative Commons Rights Expression Language</a></li>
<li><a href="#og">付録: Open Graph</a></li>
</ol>
<h2 id="fromrdf">まずは RDF から</h2>
<p>RDF(Resource Description Framework)は情報を「主語( subject)」,「述語(predicate)」,「目的語(object)」の3つに分類し,この3つ組(triple)の関係を使って情報を記述します。
例えば「私は猫が好きです」という文章は主語を「私」,述語を「好き」,目的語を「猫」と分類し,以下の関係で表すことができます。</p>
<figure style='margin:0 auto;text-align:center;'><a href="./rdf1.svg"><img src="./rdf1.svg" srcset="./rdf1.svg 500w" sizes="(min-width:600px) 500px, 80vw" alt="RDF の Triple (1)" loading="lazy"></a><figcaption><div><a href="./rdf1.svg">RDF の Triple (1)</a></div></figcaption>
</figure>
<p>更にもうひとつ「猫の名前はべるのです」という情報を加えてみましょう。</p>
<figure style='margin:0 auto;text-align:center;'><a href="./rdf2.svg"><img src="./rdf2.svg" srcset="./rdf2.svg 650w" sizes="(min-width:600px) 500px, 80vw" alt="RDF の Triple (2)" loading="lazy"></a><figcaption><div><a href="./rdf2.svg">RDF の Triple (2)</a></div></figcaption>
</figure>
<p>ここで「私は猫が好きです」の目的語である「猫」と「猫の名前はべるのです」の主語である「猫」が同一であるなら上の図のような関係になります。
人間であれば前後の文脈から2つの「猫」が同じものであると推測できますが,機械にはそれができません。
2つの「猫」が同じであるとするためには両者に同じ識別情報(identifier)を与える必要があります。
RDF ではこの識別情報に <a href="http://tools.ietf.org/html/rfc3986">URI (Uniform Resource Identifier)</a> を用います(URI は URL (Uniform Resource Locator) の拡張と考えていただければ概ね間違いないです)。
また URI によって一意に決まる情報を「リソース(resource)」と呼びます。</p>
<p>一方で,「べるの」という目的語はただの文字列で一意である必要がありません。
このようなデータを「リテラル・データ(literal data)」と呼びます。
リテラル・データは目的語には使えますが主語には使えません。
主語は必ずリソースである必要があります。</p>
<p>主語や目的語と同じく述語もまた URI で表現します。
従って「私は犬も好きです」と言うとき</p>
<figure style='margin:0 auto;text-align:center;'><a href="./rdf3.svg"><img src="./rdf3.svg" srcset="./rdf3.svg 650w" sizes="(min-width:600px) 500px, 80vw" alt="RDF の Triple (3)" loading="lazy"></a><figcaption><div><a href="./rdf3.svg">RDF の Triple (3)</a></div></figcaption>
</figure>
<p>「猫」に対する「好き」と「犬」に対する「好き」が同一であるとするなら,「私」と「猫」,「私」と「犬」との関係は「好き」という点において同じであると「<strong>理解</strong>」することができます。
これが machine-understandable であるということの意味です。</p>
<p>(RDF で使われる述語等のセットを語彙(vocabulary)といいます。
語彙は RDF Schema のルールに従えばだれでも定義することができます(語彙の定義に興味のある方は<a href="http://www.kanzaki.com/docs/sw/rdf-schema.html">こちらのページ</a>をどうぞ)。
しかし通常は <a href="#dct">Dublin Core Terms</a> などの汎用の語彙を使うべきです)</p>
<p>このように RDF では, Triple を用いてリソースをノードとした意味(semantic)の網(web)を構成していくのです。</p>
<h2 id="tordfa">RDF から RDFa へ</h2>
<p>RDF は仕様としては良く出来ていましたが,主な形式である RDF/XML の記述が複雑なため使い勝手がイマイチなのと HTML に情報を埋め込む方法がなかったため(RSS(RDF Site Summary)など一部での利用を除いて)普及しているとは言えない状況です。
この状況を改善するために RDFa(Resource Description Framework in Attributes)が提案されました。
RDFa は <a href="http://microformats.org/">Microformats</a> からの fork と言えるもので, <code>rel</code> や <code>property</code> といった HTML 要素の属性を使い, RDF の語彙によって HTML 上の情報同士を関連付けていきます。</p>
<p>RDFa は2013年に W3C によってバージョン 1.1 が勧告(Recommendation)となりました。</p>
<ul>
<li><a href="http://www.w3.org/TR/rdfa-core/">RDFa Core 1.1 - Second Edition</a> (2013-08-22)</li>
<li><a href="http://www.w3.org/TR/xhtml-rdfa/">XHTML+RDFa 1.1 - Second Edition</a> (2013-08-22)</li>
<li><a href="http://www.w3.org/TR/html-rdfa/">HTML+RDFa 1.1</a> (2013-08-22)</li>
<li><a href="http://www.w3.org/TR/rdfa-lite/">RDFa Lite 1.1</a> (2012-06-07)</li>
<li><a href="http://www.w3.org/TR/rdfa-primer/">RDFa 1.1 Primer - Second Edition</a> (2013-08-22 Group Note)</li>
</ul>
<h2 id="rule">RDFa の基本的なルールと語彙</h2>
<p>RDFa で利用することのできる属性は以下のとおりです。</p>
<figure>
<table>
<thead>
<tr><th>RDF 要素</th><th>属性名</th><th>内容</th></tr>
</thead>
<tbody>
<tr><td rowspan='1'>主語</td> <td><code>about</code>, <code>src</code></td><td>主語となるリソースを指示します</td></tr>
<tr><td rowspan='3'>述語</td> <td><code>rel</code>, <code>rev</code></td><td>目的語がリソースである述語を指示します(<code>rev</code> は主語と目的語が反転します)</td></tr>
<tr> <td><code>property</code></td><td>目的語がリテラル・データである述語を指示します</td></tr>
<tr> <td><code>inlist </code></td><td>目的語がコレクションになります(他の述語と組み合わせて使います)</td></tr>
<tr><td rowspan='2'>目的語</td><td><code>resource</code>, <code>href</code></td><td>目的語となるリソースを指示します</td></tr>
<tr> <td><code>content</code></td><td>目的語となるリテラル・データを記述します</td></tr>
<tr><td>クラス</td> <td><code>typeof</code></td><td>主語または述語となるリソースのタイプを指示します</td></tr>
<tr><td>データタイプ</td> <td><code>datatype</code></td><td>リテラル・データのデータタイプを指示します</td></tr>
<tr><td rowspan='1'>語彙</td> <td><code>prefix</code>, <code>vocab</code></td><td>語彙を指示します</td></tr>
</tbody>
</table>
<figcaption>RDFa で利用できる属性</figcaption>
</figure>
<p>語彙を追加するには主に <code>prefix を用います。 </code>prefix` は接頭辞(prefix)を指定することで複数の語彙を指示できます。
たとえば <a href="#dct">Dublin Core Terms</a> および <a href="#ccrel">ccREL</a> の語彙を追加する場合は以下のように記述します。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span> <span class="na">prefix</span><span class="o">=</span><span class="s">'dc: http://purl.org/dc/terms/ cc: http://creativecommons.org/ns#'</span><span class="p">></span>
</span></span></code></pre></div><p>ただし, HTML5 では以下の語彙が組込み済みとなっているため,これらについて改めて指示する必要はありません。</p>
<ul style='list-style:none;'>
<li><code>bibo:</code> <a href="http://purl.org/ontology/bibo/"><code>http://purl.org/ontology/bibo/</code></a></li>
<li><code>cc:</code> <a href="http://creativecommons.org/ns#"><code>http://creativecommons.org/ns#</code></a></li>
<li><code>dbp:</code> <a href="http://dbpedia.org/property/"><code>http://dbpedia.org/property/</code></a> (<a href="http://www.w3.org/2012/pyRdfa/Validator.html">Validator</a> 等では認識しない?)</li>
<li><code>dbp-owl:</code> <a href="http://dbpedia.org/ontology/"><code>http://dbpedia.org/ontology/</code></a> (<a href="http://www.w3.org/2012/pyRdfa/Validator.html">Validator</a> 等では認識しない?)</li>
<li><code>dbr:</code> <a href="http://dbpedia.org/resource/"><code>http://dbpedia.org/resource/</code></a></li>
<li><code>dc:</code> <a href="http://purl.org/dc/terms/"><code>http://purl.org/dc/terms/</code></a></li>
<li><code>ex:</code> <a href="http://example.org/"><code>http://example.org/</code></a></li>
<li><code>foaf:</code> <a href="http://xmlns.com/foaf/0.1/"><code>http://xmlns.com/foaf/0.1/</code></a></li>
<li><code>owl:</code> <a href="http://www.w3.org/2002/07/owl#"><code>http://www.w3.org/2002/07/owl#</code></a></li>
<li><code>rdf:</code> <a href="http://www.w3.org/1999/02/22-rdf-syntax-ns#"><code>http://www.w3.org/1999/02/22-rdf-syntax-ns#</code></a></li>
<li><code>rdfa:</code> <a href="http://www.w3.org/ns/rdfa#"><code>http://www.w3.org/ns/rdfa#</code></a></li>
<li><code>rdfs:</code> <a href="http://www.w3.org/2000/01/rdf-schema#"><code>http://www.w3.org/2000/01/rdf-schema#</code></a></li>
<li><code>xhv:</code> <a href="http://www.w3.org/1999/xhtml/vocab#"><code>http://www.w3.org/1999/xhtml/vocab#</code></a></li>
<li><code>xsd:</code> <a href="http://www.w3.org/2001/XMLSchema#"><code>http://www.w3.org/2001/XMLSchema#</code></a></li>
</ul>
<p>主語・述語・目的語の Triple の指定は,以下のように行います。
たとえば,以下のテキストがあるとします。</p>
<blockquote>
<section id='AlbertEinstein'>
<h4>アルベルト・アインシュタインについて</h4>
<p>
アルベルト・アインシュタインは1879年3月14日,ドイツ生まれの理論物理学者です。
彼による革命的な3つの論文<q>光電効果の理論</q><q>ブラウン運動の理論</q><q>特殊相対性理論</q>が発表された1905年は<q><a href='http://www.einstein1905.info/einstein/1905.html'>奇跡の年</a></q>と呼ばれています。
</p>
</section>
</blockquote><p>
<p>アインシュタインに関する記述ですね。
このテキストのマークアップは以下のとおりです。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">section</span> <span class="na">id</span><span class="o">=</span><span class="s">'AlbertEinstein'</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">h4</span><span class="p">></span>アルベルト・アインシュタインについて<span class="p"></</span><span class="nt">h4</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">p</span><span class="p">></span>
</span></span><span class="line"><span class="cl">アルベルト・アインシュタインは1879年3月14日,ドイツ生まれの理論物理学者です。
</span></span><span class="line"><span class="cl">彼による革命的な3つの論文<span class="p"><</span><span class="nt">q</span><span class="p">></span>光電効果の理論<span class="p"></</span><span class="nt">q</span><span class="p">><</span><span class="nt">q</span><span class="p">></span>ブラウン運動の理論<span class="p"></</span><span class="nt">q</span><span class="p">><</span><span class="nt">q</span><span class="p">></span>特殊相対性理論<span class="p"></</span><span class="nt">q</span><span class="p">></span>が発表された1905年は<span class="p"><</span><span class="nt">q</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">'http://www.einstein1905.info/einstein/1905.html'</span><span class="p">></span>奇跡の年<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">q</span><span class="p">></span>と呼ばれています。
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">p</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">section</span><span class="p">></span>
</span></span></code></pre></div><p>これに名前・生年月日等のメタデータを加えます。
人物についての記述ですので <a href="#foaf">FoaF</a> および <a href="http://vocab.org/bio/0.1/">BIO</a> 語彙が中心になります。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">section</span> <span class="na">id</span><span class="o">=</span><span class="s">'AlbertEinstein'</span> <span class="na">about</span><span class="o">=</span><span class="s">'#AlbertEinstein'</span> <span class="na">prefix</span><span class="o">=</span><span class="s">'bio: http://purl.org/vocab/bio/0.1/'</span> <span class="na">typeof</span><span class="o">=</span><span class="s">'foaf:Person'</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">h4</span><span class="p">></span>アルベルト・アインシュタインについて<span class="p"></</span><span class="nt">h4</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">p</span> <span class="na">property</span><span class="o">=</span><span class="s">'bio:biography'</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">span</span> <span class="na">property</span><span class="o">=</span><span class="s">'foaf:name'</span><span class="p">></span>アルベルト・アインシュタイン<span class="p"></</span><span class="nt">span</span><span class="p">></span>は<span class="p"><</span><span class="nt">span</span> <span class="na">id</span><span class="o">=</span><span class="s">'birth'</span> <span class="na">resource</span><span class="o">=</span><span class="s">'#birth'</span> <span class="na">rel</span><span class="o">=</span><span class="s">'bio:birth'</span> <span class="na">typeof</span><span class="o">=</span><span class="s">'bio:Birth'</span><span class="p">><</span><span class="nt">span</span> <span class="na">property</span><span class="o">=</span><span class="s">'dc:date'</span> <span class="na">content</span><span class="o">=</span><span class="s">'1879-03-14'</span> <span class="na">datatype</span><span class="o">=</span><span class="s">'xsd:date'</span><span class="p">></span>1879年3月14日<span class="p"></</span><span class="nt">span</span><span class="p">></</span><span class="nt">span</span><span class="p">></span>,<span class="p"><</span><span class="nt">span</span> <span class="na">property</span><span class="o">=</span><span class="s">'bio:olb'</span><span class="p">></span>ドイツ生まれの理論物理学者<span class="p"></</span><span class="nt">span</span><span class="p">></span>です。
</span></span><span class="line"><span class="cl">彼による革命的な3つの論文<span class="p"><</span><span class="nt">span</span> <span class="na">id</span><span class="o">=</span><span class="s">'docs'</span> <span class="na">resource</span><span class="o">=</span><span class="s">'#docs'</span> <span class="na">rel</span><span class="o">=</span><span class="s">'foaf:made'</span> <span class="na">rev</span><span class="o">=</span><span class="s">'foaf:maker'</span> <span class="na">typeof</span><span class="o">=</span><span class="s">'foaf:Document'</span><span class="p">><</span><span class="nt">q</span> <span class="na">property</span><span class="o">=</span><span class="s">'dc:title'</span><span class="p">></span>光電効果の理論<span class="p"></</span><span class="nt">q</span><span class="p">><</span><span class="nt">q</span> <span class="na">property</span><span class="o">=</span><span class="s">'dc:title'</span><span class="p">></span>ブラウン運動の理論<span class="p"></</span><span class="nt">q</span><span class="p">><</span><span class="nt">q</span> <span class="na">property</span><span class="o">=</span><span class="s">'dc:title'</span><span class="p">></span>特殊相対性理論<span class="p"></</span><span class="nt">q</span><span class="p">></span>が発表された<span class="p"><</span><span class="nt">span</span> <span class="na">property</span><span class="o">=</span><span class="s">'dc:created'</span> <span class="na">content</span><span class="o">=</span><span class="s">'1905'</span> <span class="na">datatype</span><span class="o">=</span><span class="s">'xsd:date'</span><span class="p">></span>1905年<span class="p"></</span><span class="nt">span</span><span class="p">></span>は<span class="p"><</span><span class="nt">q</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">'http://www.einstein1905.info/einstein/1905.html'</span> <span class="na">rel</span><span class="o">=</span><span class="s">'dc:references'</span><span class="p">></span>奇跡の年<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">q</span><span class="p">></</span><span class="nt">span</span><span class="p">></span>と呼ばれています。
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">p</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">section</span><span class="p">></span>
</span></span></code></pre></div><p>ちょっとゴチャゴチャし過ぎちゃいましたかね。
関係を分かりやすくするために <a href="http://www.w3.org/2012/pyRdfa/">Distiller</a> を使って RDF/XML に変換してみます。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-xml" data-lang="xml"><span class="line"><span class="cl"><span class="cp"><?xml version="1.0" encoding="utf-8"?></span>
</span></span><span class="line"><span class="cl"><span class="nt"><rdf:RDF</span>
</span></span><span class="line"><span class="cl"> <span class="na">xmlns:foaf=</span><span class="s">"http://xmlns.com/foaf/0.1/"</span>
</span></span><span class="line"><span class="cl"> <span class="na">xmlns:bio=</span><span class="s">"http://purl.org/vocab/bio/0.1/"</span>
</span></span><span class="line"><span class="cl"> <span class="na">xmlns:rdf=</span><span class="s">"http://www.w3.org/1999/02/22-rdf-syntax-ns#"</span>
</span></span><span class="line"><span class="cl"> <span class="na">xmlns:dc=</span><span class="s">"http://purl.org/dc/terms/"</span>
</span></span><span class="line"><span class="cl"><span class="nt">></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><bio:Birth</span> <span class="na">rdf:about=</span><span class="s">"#birth"</span><span class="nt">></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><dc:date</span> <span class="na">rdf:datatype=</span><span class="s">"http://www.w3.org/2001/XMLSchema#date"</span><span class="nt">></span>1879-03-14<span class="nt"></dc:date></span>
</span></span><span class="line"><span class="cl"> <span class="nt"></bio:Birth></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><foaf:Person</span> <span class="na">rdf:about=</span><span class="s">"#AlbertEinstein"</span><span class="nt">></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><foaf:name></span>アルベルト・アインシュタイン<span class="nt"></foaf:name></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><bio:olb></span>ドイツ生まれの理論物理学者<span class="nt"></bio:olb></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><bio:biography></span>
</span></span><span class="line"><span class="cl">アルベルト・アインシュタインは1879年3月14日,ドイツ生まれの理論物理学者です。
</span></span><span class="line"><span class="cl">彼による革命的な3つの論文光電効果の理論ブラウン運動の理論特殊相対性理論が発表された1905年は奇跡の年と呼ばれています。
</span></span><span class="line"><span class="cl"><span class="nt"></bio:biography></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><bio:birth</span> <span class="na">rdf:resource=</span><span class="s">"#birth"</span><span class="nt">/></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><foaf:made></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><foaf:Document</span> <span class="na">rdf:about=</span><span class="s">"#docs"</span><span class="nt">></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><dc:title></span>特殊相対性理論<span class="nt"></dc:title></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><dc:title></span>ブラウン運動の理論<span class="nt"></dc:title></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><dc:title></span>光電効果の理論<span class="nt"></dc:title></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><dc:created</span> <span class="na">rdf:datatype=</span><span class="s">"http://www.w3.org/2001/XMLSchema#date"</span><span class="nt">></span>1905<span class="nt"></dc:created></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><dc:references</span> <span class="na">rdf:resource=</span><span class="s">"http://www.einstein1905.info/einstein/1905.html"</span><span class="nt">/></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><foaf:maker</span> <span class="na">rdf:resource=</span><span class="s">"#AlbertEinstein"</span><span class="nt">/></span>
</span></span><span class="line"><span class="cl"> <span class="nt"></foaf:Document></span>
</span></span><span class="line"><span class="cl"> <span class="nt"></foaf:made></span>
</span></span><span class="line"><span class="cl"> <span class="nt"></foaf:Person></span>
</span></span><span class="line"><span class="cl"><span class="nt"></rdf:RDF></span>
</span></span></code></pre></div><p>更にこれを RDF のグラフで表すと以下のようになります。
(図のクリックで拡大されます)</p>
<figure style='margin:0 auto;text-align:center;'><a href="./rdf5.svg"><img src="./rdf5.svg" srcset="./rdf5.svg 2496w" sizes="(min-width:600px) 500px, 80vw" alt="About Albert Einstein (by RDF Graph)" loading="lazy"></a><figcaption><div><a href="./rdf5.svg">About Albert Einstein (by RDF Graph)</a></div></figcaption>
</figure>
<p>RDFa と RDF/XML の記述を見比べるといくつかわかることがあります。</p>
<p>まず,全体の主語は <code>#AlbertEinstein</code> で,主語を指示している <code><section></code> 要素の子要素が全て <code>#AlbertEinstein</code> に対する目的語になっています。
このように, RDFa では HTML 要素の親子関係から主語と目的語を推測します。
明示的な主語が見つからない場合にはページそのもの(の URI)が主語となります。</p>
<p>次に <code>#docs</code> に注目してみます。
<code>#docs</code> は <code>#AlbertEinstein</code> の目的語ですが(述語は <code>foaf:made</code>),同時に <code>#docs</code> を含む <code><span></code> 要素の子要素の主語にもなっています(<code>#docs</code> 自体は <code>resource</code> 属性で指示されている点に注目して下さい)。
RDFa では,リソースは <code>about</code> や <code>resource</code> といったHTML 要素の属性を使って主語か目的語かを指示するのですが,絶対的なものではなく, HTML 要素の親子関係によって主語と目的語が反転する場合があります。
他の例でいくと,以下のようなテキストの場合,</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-xml" data-lang="xml"><span class="line"><span class="cl"><span class="nt"><div</span> <span class="na">id=</span><span class="s">'AlbertEinstein'</span> <span class="na">about=</span><span class="s">'#AlbertEinstein'</span> <span class="na">typeof=</span><span class="s">'foaf:Person'</span> <span class="na">rel=</span><span class="s">'foaf:made'</span><span class="nt">></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><ul></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><li</span> <span class="na">id=</span><span class="s">'doc1'</span> <span class="na">about=</span><span class="s">'#doc1'</span> <span class="na">typeof=</span><span class="s">'foaf:Document'</span><span class="nt">><span</span> <span class="na">property=</span><span class="s">'dc:title'</span><span class="nt">></span>ブラウン運動の理論<span class="nt"></span></li></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><li</span> <span class="na">id=</span><span class="s">'doc2'</span> <span class="na">about=</span><span class="s">'#doc2'</span> <span class="na">typeof=</span><span class="s">'foaf:Document'</span><span class="nt">><span</span> <span class="na">property=</span><span class="s">'dc:title'</span><span class="nt">></span>光電効果の理論<span class="nt"></span></li></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><li</span> <span class="na">id=</span><span class="s">'doc3'</span> <span class="na">about=</span><span class="s">'#doc3'</span> <span class="na">typeof=</span><span class="s">'foaf:Document'</span><span class="nt">><span</span> <span class="na">property=</span><span class="s">'dc:title'</span><span class="nt">></span>特殊相対性理論<span class="nt"></span></li></span>
</span></span><span class="line"><span class="cl"> <span class="nt"></ul></span>
</span></span><span class="line"><span class="cl"><span class="nt"></div></span>
</span></span></code></pre></div><p>RDF/XML に変換するとこのようになります。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-xml" data-lang="xml"><span class="line"><span class="cl"><span class="cp"><?xml version="1.0" encoding="utf-8"?></span>
</span></span><span class="line"><span class="cl"><span class="nt"><rdf:RDF</span>
</span></span><span class="line"><span class="cl"> <span class="na">xmlns:foaf=</span><span class="s">"http://xmlns.com/foaf/0.1/"</span>
</span></span><span class="line"><span class="cl"> <span class="na">xmlns:rdf=</span><span class="s">"http://www.w3.org/1999/02/22-rdf-syntax-ns#"</span>
</span></span><span class="line"><span class="cl"> <span class="na">xmlns:dc=</span><span class="s">"http://purl.org/dc/terms/"</span>
</span></span><span class="line"><span class="cl"><span class="nt">></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><foaf:Person</span> <span class="na">rdf:about=</span><span class="s">"#AlbertEinstein"</span><span class="nt">></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><foaf:made></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><foaf:Document</span> <span class="na">rdf:about=</span><span class="s">"#doc1"</span><span class="nt">></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><dc:title></span>ブラウン運動の理論<span class="nt"></dc:title></span>
</span></span><span class="line"><span class="cl"> <span class="nt"></foaf:Document></span>
</span></span><span class="line"><span class="cl"> <span class="nt"></foaf:made></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><foaf:made></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><foaf:Document</span> <span class="na">rdf:about=</span><span class="s">"#doc2"</span><span class="nt">></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><dc:title></span>光電効果の理論<span class="nt"></dc:title></span>
</span></span><span class="line"><span class="cl"> <span class="nt"></foaf:Document></span>
</span></span><span class="line"><span class="cl"> <span class="nt"></foaf:made></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><foaf:made></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><foaf:Document</span> <span class="na">rdf:about=</span><span class="s">"#doc3"</span><span class="nt">></span>
</span></span><span class="line"><span class="cl"> <span class="nt"><dc:title></span>特殊相対性理論<span class="nt"></dc:title></span>
</span></span><span class="line"><span class="cl"> <span class="nt"></foaf:Document></span>
</span></span><span class="line"><span class="cl"> <span class="nt"></foaf:made></span>
</span></span><span class="line"><span class="cl"> <span class="nt"></foaf:Person></span>
</span></span><span class="line"><span class="cl"><span class="nt"></rdf:RDF></span>
</span></span></code></pre></div><p>(<code>about</code> 属性で指示している <code>#doc1</code> ~ <code>#doc3</code> が <code>#AlbertEinstein</code> の目的語になっているのがわかると思います)</p>
<p>目的語がリテラル・データの場合,通常は HTML 要素で囲まれた内容がリテラル・データとなりますが, <code>content</code> 属性があると <code>content</code> の内容が優先されます。
たとえば</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">span</span> <span class="na">id</span><span class="o">=</span><span class="s">'birth'</span> <span class="na">resource</span><span class="o">=</span><span class="s">'#birth'</span> <span class="na">rel</span><span class="o">=</span><span class="s">'bio:birth'</span> <span class="na">typeof</span><span class="o">=</span><span class="s">'bio:Birth'</span><span class="p">><</span><span class="nt">span</span> <span class="na">property</span><span class="o">=</span><span class="s">'dc:date'</span> <span class="na">content</span><span class="o">=</span><span class="s">'1879-03-14'</span> <span class="na">datatype</span><span class="o">=</span><span class="s">'xsd:date'</span><span class="p">></span>1879年3月14日<span class="p"></</span><span class="nt">span</span><span class="p">></</span><span class="nt">span</span><span class="p">></span>
</span></span></code></pre></div><p>の記述部分では, <code>dc:date</code> の目的語は <code>1879年3月14日</code> ではなく <code>1879-03-14</code> となります(RDF/XML の記述を参照してみてください)。</p>
<p>何故このようなことをするかというと, <code>1879年3月14日</code> では機械が日付として解釈できないからです。
このため機械が解釈可能な <a href="http://www.w3.org/TR/NOTE-datetime">W3C Date and Time Formats</a>(今回の例では <code>1879-03-14</code>)で上書きしているのです。
HTML の内容と解離するようなものはダメですが,機械可読な状態に「翻訳」するのであれば,この方法は有効です。</p>
<p>さて,基本的なルールについては以上です。
ここからは Web 上でよく使われる語彙について解説していきます。</p>
<h2 id="dct">Dublin Core Terms</h2>
<p><a href="http://dublincore.org/">DCMI (Dublin Core Metadata Initiative)</a> が管理・運用している語彙のセットを “<a href="http://dublincore.org/documents/dcmi-terms/">Dublin Core Terms</a>” といいます<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup>。</p>
<p>Dublin Core Terms は15の基本要素(<a href="http://purl.org/dc/elements/1.1/"><code>http://purl.org/dc/elements/1.1/</code></a>)を再定義したものと,その拡張語彙から構成されています。
以下に Dublin Core Terms の一覧を示します。</p>
<figure id='dct-list' about='#dct-list' typeof='dc:Text'>
<style scoped>
#dct-list table {font-size:smaller;}
#dct-list table .odd td {color:inherit; background:#f3ffff;}
#dct-list table .even td {color:inherit; background:#f3f3ff;}
</style>
<table>
<thead>
<tr><th>dcterms:</th><th>subPropertyOf</th><th>domain</th><th>range</th></tr>
</thead>
<tbody class="odd">
<tr><td><strong>contributor</strong></td><td>dc:contributor</td><td>rdfs:Resource</td><td>dcterms:Agent</td></tr>
<tr><td><strong>creator</strong></td><td>dc:creator, dcterms:contributor</td><td>rdfs:Resource</td><td>dcterms:Agent</td></tr>
</tbody>
<tbody class="even">
<tr><td><strong>coverage</strong></td><td>dc:coverage</td><td>rdfs:Resource</td><td>dcterms:LocationPeriodOrJurisdiction</td></tr>
<tr><td>spatial</td><td>dc:coverage, dcterms:coverage</td><td>rdfs:Resource</td><td>dcterms:Location</td></tr>
<tr><td>temporal</td><td>dc:coverage, dcterms:coverage</td><td>rdfs:Resource</td><td>dcterms:PeriodOfTime</td></tr>
</tbody>
<tbody class="odd">
<tr><td><strong>date</strong></td><td>dc:date</td><td>rdfs:Resource</td><td>rdfs:Literal</td></tr>
<tr><td>available</td><td>dc:date, dcterms:date</td><td>rdfs:Resource</td><td>rdfs:Literal</td></tr>
<tr><td>created</td><td>dc:date, dcterms:date</td><td>rdfs:Resource</td><td>rdfs:Literal</td></tr>
<tr><td>dateAccepted</td><td>dc:date, dcterms:date</td><td>rdfs:Resource</td><td>rdfs:Literal</td></tr>
<tr><td>dateCopyrighted</td><td>dc:date, dcterms:date</td><td>rdfs:Resource</td><td>rdfs:Literal</td></tr>
<tr><td>dateSubmitted</td><td>dc:date, dcterms:date</td><td>rdfs:Resource</td><td>rdfs:Literal</td></tr>
<tr><td>issued</td><td>dc:date, dcterms:date</td><td>rdfs:Resource</td><td>rdfs:Literal</td></tr>
<tr><td>modified</td><td>dc:date, dcterms:date</td><td>rdfs:Resource</td><td>rdfs:Literal</td></tr>
<tr><td>valid</td><td>dc:date, dcterms:date</td><td>rdfs:Resource</td><td>rdfs:Literal</td></tr>
</tbody>
<tbody class="even">
<tr><td><strong>description</strong></td><td>dc:description</td><td>rdfs:Resource</td><td>rdfs:Resource</td></tr>
<tr><td>abstract</td><td>dc:description, dcterms:description</td><td>rdfs:Resource</td><td>rdfs:Resource</td></tr>
<tr><td>tableOfContents</td><td>dc:description, dcterms:description</td><td>rdfs:Resource</td><td>rdfs:Resource</td></tr>
</tbody>
<tbody class="odd">
<tr><td><strong>format</strong></td><td>dc:format</td><td>rdfs:Resource</td><td>dcterms:MediaTypeOrExtent</td></tr>
<tr><td>extent</td><td>dc:format, dcterms:format</td><td>rdfs:Resource</td><td>dcterms:SizeOrDuration</td></tr>
<tr><td>medium</td><td>dc:format, dcterms:format</td><td>dcterms:PhysicalResource</td><td>dcterms:PhysicalMedium</td></tr>
</tbody>
<tbody class="even">
<tr><td><strong>identifier</strong></td><td>dc:identifier</td><td>rdfs:Resource</td><td>rdfs:Literal</td></tr>
<tr><td>bibliographicCitation</td><td>dc:identifier, dcterms:identifier</td><td>dcterms:BibliographicResource</td><td>rdfs:Literal</td></tr>
</tbody>
<tbody class="odd">
<tr><td><strong>language</strong></td><td>dc:language</td><td>rdfs:Resource</td><td>dcterms:LinguisticSystem</td></tr>
</tbody>
<tbody class="even">
<tr><td><strong>publisher</strong></td><td>dc:publisher</td><td>rdfs:Resource</td><td>dcterms:Agent</td></tr>
</tbody>
<tbody class="odd">
<tr><td><strong>relation</strong></td><td>dc:relation</td><td>rdfs:Resource</td><td>rdfs:Resource</td></tr>
<tr><td><strong>source</strong></td><td>dc:source, dcterms:relation</td><td>rdfs:Resource</td><td>rdfs:Resource</td></tr>
<tr><td>conformsTo</td><td>dc:relation, dcterms:relation</td><td>rdfs:Resource</td><td>dcterms:Standard</td></tr>
<tr><td>hasFormat</td><td>dc:relation, dcterms:relation</td><td>rdfs:Resource</td><td>rdfs:Resource</td></tr>
<tr><td>hasPart</td><td>dc:relation, dcterms:relation</td><td>rdfs:Resource</td><td>rdfs:Resource</td></tr>
<tr><td>hasVersion</td><td>dc:relation, dcterms:relation</td><td>rdfs:Resource</td><td>rdfs:Resource</td></tr>
<tr><td>isFormatOf</td><td>dc:relation, dcterms:relation</td><td>rdfs:Resource</td><td>rdfs:Resource</td></tr>
<tr><td>isPartOf</td><td>dc:relation, dcterms:relation</td><td>rdfs:Resource</td><td>rdfs:Resource</td></tr>
<tr><td>isReferencedBy</td><td>dc:relation, dcterms:relation</td><td>rdfs:Resource</td><td>rdfs:Resource</td></tr>
<tr><td>isReplacedBy</td><td>dc:relation, dcterms:relation</td><td>rdfs:Resource</td><td>rdfs:Resource</td></tr>
<tr><td>isRequiredBy</td><td>dc:relation, dcterms:relation</td><td>rdfs:Resource</td><td>rdfs:Resource</td></tr>
<tr><td>isVersionOf</td><td>dc:relation, dcterms:relation</td><td>rdfs:Resource</td><td>rdfs:Resource</td></tr>
<tr><td>references</td><td>dc:relation, dcterms:relation</td><td>rdfs:Resource</td><td>rdfs:Resource</td></tr>
<tr><td>replaces</td><td>dc:relation, dcterms:relation</td><td>rdfs:Resource</td><td>rdfs:Resource</td></tr>
<tr><td>requires</td><td>dc:relation, dcterms:relation</td><td>rdfs:Resource</td><td>rdfs:Resource</td></tr>
</tbody>
<tbody class="even">
<tr><td><strong>rights</strong></td><td>dc:rights</td><td>rdfs:Resource</td><td>dcterms:RightsStatement</td></tr>
<tr><td>accessRights</td><td>dc:rights, dcterms:rights</td><td>rdfs:Resource</td><td>dcterms:RightsStatement</td></tr>
<tr><td>license</td><td>dc:rights, dcterms:rights</td><td>rdfs:Resource</td><td>dcterms:LicenseDocument</td></tr>
</tbody>
<tbody class="odd">
<tr><td><strong>subject</strong></td><td>dc:subject</td><td>rdfs:Resource</td><td>rdfs:Resource</td></tr>
</tbody>
<tbody class="even">
<tr><td><strong>title</strong></td><td>dc:title</td><td>rdfs:Resource</td><td>rdfs:Literal</td></tr>
<tr><td>alternative</td><td>dc:title, dcterms:title</td><td>rdfs:Resource</td><td>rdfs:Literal</td></tr>
</tbody>
<tbody class="odd">
<tr><td><strong>type</strong></td><td>dc:type</td><td>rdfs:Resource</td><td>rdfs:Class</td></tr>
</tbody>
<tbody class="even">
<tr><td>audience</td><td></td><td>rdfs:Resource</td><td>dcterms:AgentClass</td></tr>
<tr><td>educationLevel</td><td>dcterms:audience</td><td>rdfs:Resource</td><td>dcterms:AgentClass</td></tr>
<tr><td>mediator</td><td>dcterms:audience</td><td>rdfs:Resource</td><td>dcterms:AgentClass</td></tr>
</tbody>
<tbody class="odd">
<tr><td>accrualMethod</td><td></td><td>dcmitype:Collection</td><td>dcterms:MethodOfAccrual</td></tr>
<tr><td>accrualPeriodicity</td><td></td><td>dcmitype:Collection</td><td>dcterms:Frequency</td></tr>
<tr><td>accrualPolicy</td><td></td><td>dcmitype:Collection</td><td>dcterms:Policy</td></tr>
<tr><td>instructionalMethod</td><td></td><td>rdfs:Resource</td><td>dcterms:MethodOfInstruction</td></tr>
<tr><td>provenance</td><td></td><td>rdfs:Resource</td><td>dcterms:ProvenanceStatement</td></tr>
<tr><td>rightsHolder</td><td></td><td>rdfs:Resource</td><td>dcterms:Agent</td></tr>
</tbody>
</table>
<figcaption><span property='dc:title'>dcterms: の述語一覧</span><br>(via <q><a href="http://www.kanzaki.com/docs/sw/dc-domain-range.html" rel='dc:source'><span property='dc:title'>DCプロパティと定義域、値域一覧</span></a></q> <span about="http://www.kanzaki.com/docs/sw/dc-domain-range.html"><a href="http://www.kanzaki.com/info/ccl#NoOnlineDistribution" rel='cc:license'>licensed</a> (and <a href="http://www.kanzaki.com/info/disclaimer" rel='cc:useGuidelines'>guideline</a>) by <a href="http://www.kanzaki.com/info/who" rel='foaf:maker' typeof='foaf:Person'><span property='foaf:name'>KANZAKI, Masahide</span></a>, <span property='dc:dateCopyrighted' datatype='xsd:date'>2008</span>-<span property='dc:modified' datatype='xsd:date'>2010</span></span>)</figcaption>
</figure>
<p>この表では包含関係を明確にするため接頭辞を</p>
<ul style='list-style:none;'>
<li><code>dc:</code> <a href="http://purl.org/dc/elements/1.1/"><code>http://purl.org/dc/elements/1.1/</code></a></li>
<li><code>dcterms:</code> <a href="http://purl.org/dc/terms/"><code>http://purl.org/dc/terms/</code></a></li>
</ul>
<p>として再定義しています。
<code>dc:</code> と同じ名前で <code>dcterms:</code> で再定義された述語は<strong>強調</strong>して表示しています。
domain は主語として使えるリソースの種類を, range は目的語として使えるリソースの種類(またはリテラル・データ)を示しています。</p>
<p>またリソースのタイプを示すクラスとしては以下のものが用意されています。</p>
<figure id='dct-class' about='#dct-class' typeof='dc:Text'>
<table>
<thead>
<tr><th>クラス</th><th>説明</th></tr>
</thead>
<tbody>
<tr><td>dc:Collection</td> <td>リソースのコレクション</td></tr>
<tr><td>dc:Dataset</td> <td>データベースなどの符号化されたデータ構造</td></tr>
<tr><td>dc:Event</td> <td>時間に基づいた非永続的な事象</td></tr>
<tr><td>dc:Image</td> <td>写真,絵画,映画,地図,音楽記号などの象徴的な視覚表現</td></tr>
<tr><td>dc:InteractiveResource</td><td>対話的なリソース。 Web ページのフォームやチャットなど</td></tr>
<tr><td>dc:MovingImage</td> <td>アニメーション,映画,テレビ番組,ビデオなどの動画。 dc:Image のサブクラス</td></tr>
<tr><td>dc:PhysicalObject</td> <td>彫刻などの実体,あるいは3次元オブジェクト。これらの映像表現は dc:Image クラスなどに分類される</td></tr>
<tr><td>dc:Service</td> <td>サービス。銀行サービスなどオンラインでないものも含まれる</td></tr>
<tr><td>dc:Software</td> <td>ソフトウェアのソースコードまたはバイナリ</td></tr>
<tr><td>dc:Sound</td> <td>音楽ファイル,CD,スピーチなど音声表現</td></tr>
<tr><td>dc:StillImage</td> <td>絵画,グラフィックデザイン,地図,図案などの静止画像。 dc:Image のサブクラス</td></tr>
<tr><td>dc:Text</td> <td>書籍,手紙,論文,詩,新聞など語(words)による表現。画像データでも文字表現が主なものであればこのクラスに分類される</td></tr>
</tbody>
</table>
<figcaption property='dc:title'>Dublin Core Terms のクラス</figcaption>
</figure>
<h2 id="foaf">Friend of a Friend</h2>
<p><a href="http://rdfweb.org/foaf/">FoaF (Friend of a Friend)</a> は知人・友人のネットワークを記述するための語彙です。
また(自分を含む)人物の Profile 情報を記述するためにも使えます<sup id="fnref:2"><a href="#fn:2" class="footnote-ref" role="doc-noteref">2</a></sup>。</p>
<p>まずFoaF の基本クラス(主語または述語となるリソースのタイプ)は以下のとおりです。</p>
<figure id='foaf-class1' about='#foaf-class1' typeof='dc:Text'>
<table>
<thead>
<tr><th>クラス</th><th>説明</th></tr>
</thead>
<tbody>
<tr><td>foaf:Agent</td> <td>エージェント(人間,グループ,ソフトウェア,人工物など)</td></tr>
<tr><td>foaf:Person</td> <td>人物。実存するかどうかは問わない。 foaf:Agent のサブクラス</td></tr>
<tr><td>foaf:Organization</td> <td>会社,組織など。 foaf:Agent のサブクラス</td></tr>
<tr><td>foaf:Group</td> <td>個々の foaf:Agent の集合体としてのグループ。 foaf:Agent のサブクラス</td></tr>
<tr><td>foaf:Project</td> <td>プロジェクト。公式・非公式を問わない</td></tr>
<tr><td>foaf:Document</td> <td>(広い意味での)文書。映像作品や Web ページなども含まれる</td></tr>
<tr><td>foaf:Image</td> <td>映像。 foaf:Document のサブクラス</td></tr>
<tr><td>foaf:PersonalProfileDocument</td><td>人物について記述された RDF 文書</td></tr>
</tbody>
</table>
<figcaption property='dc:title'>FoaF の基本クラス</figcaption>
</figure>
<p>このうち <code>foaf:Agent</code> クラスに関する述語について主なものを挙げます。</p>
<figure id='foaf-property1' about='#foaf-property1' typeof='dc:Text'>
<style scoped>
#foaf-property1 table {font-size:smaller;}
</style>
<table>
<thead>
<tr><th>述語</th><th>domain</th><th>range</th><th>説明</th></tr>
</thead>
<tbody>
<tr><td>foaf:mbox</td> <td>foaf:Agent</td> <td>owl:Thing</td> <td>mailto: から始まるメールアドレスの URI。識別子(identifier)として機能する</td></tr>
<tr><td>foaf:mbox_sha1sum</td> <td>foaf:Agent</td> <td>rdfs:Literal</td> <td>foaf:mbox の SHA1 ハッシュ値。 foaf:mbox を示さなくても,この値を識別子として使うことができる</td></tr>
<tr><td>foaf:name</td> <td>owl:Thing</td> <td>rdfs:Literal</td> <td>名前(人とは限らない)</td></tr>
<tr><td>foaf:givenName</td> <td>—</td> <td>—</td> <td>姓名の「名」</td></tr>
<tr><td>foaf:familyName</td> <td>foaf:Person</td><td>rdfs:Literal</td> <td>姓名の「姓」</td></tr>
<tr><td>foaf:nick</td> <td>—</td> <td>—</td> <td>ニックネーム</td></tr>
<tr><td>foaf:depiction</td> <td>owl:Thing</td> <td>foaf:Image</td> <td>対象を描いた絵や写真など</td></tr>
<tr><td>foaf:birthday</td> <td>foaf:Agent</td> <td>rdfs:Literal</td> <td>誕生日</td></tr>
<tr><td>foaf:schoolHomepage</td> <td>foaf:Person</td><td>foaf:Document</td><td>対象の人物の母校</tr>
<tr><td>foaf:workplaceHomepage</td><td>foaf:Person</td><td>foaf:Document</td><td>対象の人物の勤務先</tr>
<tr><td>foaf:workInfoHomepage</td> <td>foaf:Person</td><td>foaf:Document</td><td>対象の人物の仕事内容</tr>
<tr><td>foaf:knows</td> <td>foaf:Person</td><td>foaf:Person</td> <td>知人(相互に知り合ってるレベル)</td></tr>
<tr><td>foaf:homepage</td> <td>owl:Thing</td> <td>foaf:Document</td><td>ホームページ</td></tr>
<tr><td>foaf:weblog</td> <td>foaf:Agent</td> <td>foaf:Document</td><td>ウェブログ</td></tr>
<tr><td>foaf:tipjar</td> <td>foaf:Agent</td> <td>foaf:Document</td><td>対象への支払いや寄付の方法を記述したページ。 <a href="https://baldanders.info/spiegel/log2/000631.shtml">Flattr</a> にも使える?</td></tr>
<tr><td>foaf:interest</td> <td>foaf:Agent</td> <td>foaf:Document</td><td>関心を持ってる事に関するページ</tr>
<tr><td>foaf:topic_interest</td> <td>foaf:Agent</td> <td>owl:Thing</td> <td>関心を持ってるトピック</tr>
<tr><td>foaf:publications</td> <td>foaf:Person</td><td>foaf:Document</td><td>対象の人物の出版物</tr>
<tr><td>foaf:made</td> <td>foaf:Person</td><td>owl:Thing</td> <td>対象の人物の作品</tr>
<tr><td>foaf:currentProject</td> <td>foaf:Person</td><td>owl:Thing</td> <td>対象の人物が現在手がけているプロジェクト</tr>
<tr><td>foaf:pastProject</td> <td>foaf:Person</td><td>owl:Thing</td> <td>対象の人物が過去に手がけてたプロジェクト</tr>
</tbody>
</table>
<figcaption property='dc:title'>FoaF の述語一覧(1)</figcaption>
</figure>
<p>また <code>foaf:Agent</code> で記述される作品やプロジェクト等に関する述語(上記以外)も挙げておきます。</p>
<figure id='foaf-property2' about='#foaf-property2' typeof='dc:Text'>
<style scoped>
#foaf-property2 table {font-size:smaller;}
</style>
<table>
<thead>
<tr><th>述語</th><th>domain</th><th>range</th><th>説明</th></tr>
</thead>
<tbody>
<tr><td>foaf:page</td> <td>owl:Thing</td> <td>foaf:Document</td><td>ページ</td></tr>
<tr><td>foaf:topic</td> <td>foaf:Document</td><td>owl:Thing</td> <td>ページに関するトピック。 foaf:page の逆</td></tr>
<tr><td>foaf:primaryTopic</td> <td>foaf:Document</td><td>owl:Thing</td> <td>主語ページ・文書のメイントピック</td></tr>
<tr><td>foaf:isPrimaryTopicOf</td><td>owl:Thing</td> <td>foaf:Document</td><td>目的語ページ・文書のメイントピック。 foaf:primaryTopic の逆で foaf:page のサブプロパティ</td></tr>
<tr><td>foaf:maker</td> <td>owl:Thing</td> <td>foaf:Agent</td> <td>主語を作った人。 foaf:made の逆</td></tr>
<tr><td>foaf:logo</td> <td>owl:Thing</td> <td>owl:Thing</td> <td>ロゴ</td></tr>
<tr><td>foaf:depicts</td> <td>foaf:Image</td> <td>owl:Thing</td> <td>映像が描写している対象。 foaf:depiction の逆</td></tr>
<tr><td>foaf:thumbnail</td> <td>foaf:Image</td> <td>foaf:Image</td> <td>映像のサムネイル</td></tr>
</tbody>
</table>
<figcaption property='dc:title'>FoaF の述語一覧(2)</figcaption>
</figure>
<p><code>foaf:maker</code> は <a href="#dct">Dublin Core Terms</a> の <code>dc:creator</code> と被りますが, <code>foaf:maker</code> のほうが構造化リソースとしての作者を記述することができます。</p>
<p>FoaF にはオンラインサービスのアカウントに関する語彙もあります。
以下にオンラインサービスのアカウントに関するクラスと述語を挙げます。</p>
<figure id='foaf-class2' about='#foaf-class2' typeof='dc:Text'>
<table>
<thead>
<tr><th>クラス</th><th>説明</th></tr>
</thead>
<tbody>
<tr><td>foaf:OnlineAccount</td> <td>オンラインサービスのアカウント</td></tr>
<tr><td>foaf:OnlineGamingAccount</td> <td>オンラインゲームのアカウント。 foaf:OnlineAccount のサブクラス</td></tr>
<tr><td>foaf:OnlineEcommerceAccount</td><td>オンラインショップ等のアカウント。foaf:OnlineAccount のサブクラス</td></tr>
<tr><td>foaf:OnlineChatAccount</td> <td>チャットやメッセージング・サービスのアカウント。 foaf:OnlineAccount のサブクラス</td></tr>
</tbody>
</table>
<figcaption property='dc:title'>FoaF のアカウント関連クラス</figcaption>
</figure>
<figure id='foaf-property3' about='#foaf-property3' typeof='dc:Text'>
<style scoped>
#foaf-property3 table {font-size:smaller;}
</style>
<table>
<thead>
<tr><th>述語</th><th>domain</th><th>range</th><th>説明</th></tr>
</thead>
<tbody>
<tr><td>foaf:account</td> <td>foaf:Agent</td> <td>foaf:OnlineAccount</td><td>オンラインサービスのアカウント</td></tr>
<tr><td>foaf:accountServiceHomepage</td><td>foaf:OnlineAccount</td><td>foaf:Document</td> <td>オンラインサービスのホームページ</td></tr>
<tr><td>foaf:accountName</td> <td>foaf:OnlineAccount</td><td>rdfs:Literal</td> <td>オンラインサービスのアカウント名(識別子)</td></tr>
</tbody>
</table>
<figcaption property='dc:title'>FoaF の述語一覧(3)</figcaption>
</figure>
<h2 id="ccrel">Creative Commons Rights Expression Language</h2>
<p><a href="http://www.w3.org/Submission/2008/SUBM-ccREL-20080501/">ccREL (Creative Commons Rights Expression Language)</a> は Web 上の作品の著作権情報を記述するための語彙です。
<a href="http://creativecommons.jp/licenses/">Creative Commons License</a> 3.0 を念頭に設計されていますが,他の(自由な)著作権ライセンスや利用ガイドラインにも対応しています。</p>
<p>ccREL の語彙は「著作権ライセンスを記述する」語彙と「著作権ライセンスを表示する」語彙とに分かれます。
以下は ccREL の基本クラス(主語または述語となるリソースのタイプ)です。</p>
<figure id='ccrel-class' about='#ccrel-class' typeof='dc:Text'>
<table>
<thead>
<tr><th>クラス</th><th>説明</th></tr>
</thead>
<tbody>
<tr><td>cc:Work</td> <td>作品</td></tr>
<tr><td>cc:License</td> <td>ライセンス。 dc:LicenseDocument のサブクラス</td></tr>
<tr><td>cc:Jurisdiction</td><td>準拠法</td></tr>
<tr><td>cc:Permission</td> <td>ライセンスにおける許諾事項</td></tr>
<tr><td>cc:Requirement</td> <td>ライセンスにおける要求(条件)事項</td></tr>
<tr><td>cc:Prohibition</td> <td>ライセンスにおける禁止事項</td></tr>
</tbody>
</table>
<figcaption property='dc:title'>ccREL(cc: <a href="http://creativecommons.org/ns#">http://creativecommons.org/ns#</a>)のクラス</figcaption>
</figure>
<p>このうち「著作権ライセンスを表示する」語彙である <code>cc:Work</code> に関する述語を挙げてみます。</p>
<figure id='ccrel-property' about='#ccrel-property' typeof='dc:Text'>
<table>
<thead>
<tr><th>述語</th><th>domain</th><th>range</th><th>説明</th></tr>
</thead>
<tbody>
<tr><td>cc:license</td> <td>cc:Work</td><td>cc:License</td> <td>ライセンス</td></tr>
<tr><td>cc:morePermissions</td><td>cc:Work</td><td>rdfs:Resource</td><td>(cc:license 以外の)追加の許諾</td></tr>
<tr><td>cc:useGuidelines</td> <td>cc:Work</td><td>rdfs:Resource</td><td>利用ガイドライン</td></tr>
<tr><td>cc:attributionURL</td> <td>cc:Work</td><td>rdfs:Resource</td><td>著作(権)者</td></tr>
<tr><td>cc:attributionName</td><td>cc:Work</td><td>rdfs:Literal</td> <td>著作(権)者名</td></tr>
</tbody>
</table>
<figcaption property='dc:title'>cc:Work 関連の述語</figcaption>
</figure>
<p>明確な「利用許諾(license)」がない場合,またはライセンスに対して付加情報(免責事項など)がある場合には <code>cc:useGuidelines</code> を使います。
また,ライセンスに対して追加の許諾がある場合(ライセンスとしては by-nc だけど条件によっては個別に商用利用も許可するなど)には <code>cc:morePermissions</code> を使います。</p>
<p>作品の著作権は著作者に自動的に付与されますが,権利自体は譲渡可能なため(譲渡できない権利もあります),著作者と著作<strong>権</strong>者が異なる場合があります。
その場合は <code>cc:attributionURL</code> や <code>cc:attributionName</code> で権利の帰属先を明示します。
著作者と著作権者が同一であるなら <code>foaf:maker</code> 等で置き換えることもできます<sup id="fnref:3"><a href="#fn:3" class="footnote-ref" role="doc-noteref">3</a></sup>。</p>
<p>RDFa であれば主語を明示することでページ内のテキスト,映像,音声等に対して個別に権利表示を行うことができます。
たとえば先程の「<a href="#dct-list">dcterms: の述語一覧</a>」の表は「<a href="http://www.kanzaki.com/docs/sw/dc-domain-range.html">DCプロパティと定義域、値域一覧</a>」のものを流用していますが,以下のように記述しています。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">figure</span> <span class="na">id</span><span class="o">=</span><span class="s">'dct-list'</span> <span class="na">about</span><span class="o">=</span><span class="s">'#dct-list'</span> <span class="na">typeof</span><span class="o">=</span><span class="s">'dc:Text'</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">table</span><span class="p">></span>
</span></span><span class="line"><span class="cl">[...]
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">table</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">figcaption</span><span class="p">><</span><span class="nt">span</span> <span class="na">property</span><span class="o">=</span><span class="s">'dc:title'</span><span class="p">></span>dcterms: の述語一覧<span class="p"></</span><span class="nt">span</span><span class="p">></span>(via <span class="p"><</span><span class="nt">q</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"http://www.kanzaki.com/docs/sw/dc-domain-range.html"</span> <span class="na">rel</span><span class="o">=</span><span class="s">'dc:source'</span><span class="p">><</span><span class="nt">span</span> <span class="na">property</span><span class="o">=</span><span class="s">'dc:title'</span><span class="p">></span>DCプロパティと定義域、値域一覧<span class="p"></</span><span class="nt">span</span><span class="p">></</span><span class="nt">a</span><span class="p">></</span><span class="nt">q</span><span class="p">></span> <span class="p"><</span><span class="nt">span</span> <span class="na">about</span><span class="o">=</span><span class="s">"http://www.kanzaki.com/docs/sw/dc-domain-range.html"</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"http://www.kanzaki.com/info/ccl#NoOnlineDistribution"</span> <span class="na">rel</span><span class="o">=</span><span class="s">'cc:license'</span><span class="p">></span>licensed<span class="p"></</span><span class="nt">a</span><span class="p">></span> (and <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"http://www.kanzaki.com/info/disclaimer"</span> <span class="na">rel</span><span class="o">=</span><span class="s">'cc:useGuidelines'</span><span class="p">></span>guideline<span class="p"></</span><span class="nt">a</span><span class="p">></span>) by <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"http://www.kanzaki.com/info/who"</span> <span class="na">rel</span><span class="o">=</span><span class="s">'foaf:maker'</span> <span class="na">typeof</span><span class="o">=</span><span class="s">'foaf:Person'</span><span class="p">><</span><span class="nt">span</span> <span class="na">property</span><span class="o">=</span><span class="s">'foaf:name'</span><span class="p">></span>KANZAKI, Masahide<span class="p"></</span><span class="nt">span</span><span class="p">></</span><span class="nt">a</span><span class="p">></span>, <span class="p"><</span><span class="nt">span</span> <span class="na">property</span><span class="o">=</span><span class="s">'dc:dateCopyrighted'</span> <span class="na">datatype</span><span class="o">=</span><span class="s">'xsd:date'</span><span class="p">></span>2008<span class="p"></</span><span class="nt">span</span><span class="p">></span>-<span class="p"><</span><span class="nt">span</span> <span class="na">property</span><span class="o">=</span><span class="s">'dc:modified'</span> <span class="na">datatype</span><span class="o">=</span><span class="s">'xsd:date'</span><span class="p">></span>2010<span class="p"></</span><span class="nt">span</span><span class="p">></</span><span class="nt">span</span><span class="p">></span>)<span class="p"></</span><span class="nt">figcaption</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">figure</span><span class="p">></span>
</span></span></code></pre></div><p>これを RDF Graph にすると以下のようになり,元になった Web ページを指し示しているのがわかると思います。
(図のクリックで拡大されます)</p>
<!--
<?xml version="1.0" encoding="utf-8"?>
<rdf:RDF
xmlns:foaf="http://xmlns.com/foaf/0.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:dc="http://purl.org/dc/terms/"
>
<dc:Text rdf:about="https://baldanders.info/spiegel/archive/rdfa/#dct-list">
<dc:source>
<rdf:Description rdf:about="http://www.kanzaki.com/docs/sw/dc-domain-range.html">
<foaf:maker rdf:resource="http://www.kanzaki.com/info/who"/>
<cc:useGuidelines rdf:resource="http://www.kanzaki.com/info/disclaimer"/>
<dc:title>DCプロパティと定義域、値域一覧</dc:title>
<dc:dateCopyrighted rdf:datatype="http://www.w3.org/2001/XMLSchema#date">2008</dc:dateCopyrighted>
<dc:modified rdf:datatype="http://www.w3.org/2001/XMLSchema#date">2010</dc:modified>
<cc:license rdf:resource="http://www.kanzaki.com/info/ccl#NoOnlineDistribution"/>
</rdf:Description>
</dc:source>
<dc:title>dcterms: の述語一覧</dc:title>
</dc:Text>
<foaf:Person rdf:about="http://www.kanzaki.com/info/who">
<foaf:name>KANZAKI, Masahide</foaf:name>
</foaf:Person>
</rdf:RDF>
-->
<figure style='margin:0 auto;text-align:center;'><a href="./rdf6.svg"><img src="./rdf6.svg" srcset="./rdf6.svg 2448w" sizes="(min-width:600px) 500px, 80vw" alt="「dcterms: の述語一覧」の RDF Graph" loading="lazy"></a><figcaption><div><a href="./rdf6.svg">「dcterms: の述語一覧」の RDF Graph</a></div></figcaption>
</figure>
<p>Creative Commons License では提示される内容が「コモンズ証(Commons Deed)」「法的条項(Legal Code)」「メタデータ(Metadata)」の3つのレイヤに分かれていて,そのうちメタデータのレイヤを RDF で実装しています。
たとえば「表示-継承(by-sa)」ライセンスの場合は各レイヤの URI は以下のようになっています。</p>
<ul style='list-style:none;'>
<li><strong>コモンズ証</strong>: <a href="http://creativecommons.org/licenses/by-sa/4.0/">http://creativecommons.org/licenses/by-sa/4.0/</a></li>
<li><strong>法的条項</strong>: <a href="http://creativecommons.org/licenses/by-sa/4.0/legalcode">http://creativecommons.org/licenses/by-sa/4.0/legalcode</a></li>
<li><strong>メタデータ</strong>: <a href="http://creativecommons.org/licenses/by-sa/4.0/rdf">http://creativecommons.org/licenses/by-sa/4.0/rdf</a></li>
</ul>
<p>実際にはコモンズ証にも RDFa 付与がされていますが,明示的にメタデータへ誘導するのなら,このページのフッタ部のように記述するのがいいかもしれません。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl">Licensed under <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">'http://creativecommons.org/licenses/by/4.0/'</span> <span class="na">rel</span><span class="o">=</span><span class="s">'cc:license'</span> <span class="na">typeof</span><span class="o">=</span><span class="s">'cc:License'</span><span class="p">><</span><span class="nt">span</span> <span class="na">resource</span><span class="o">=</span><span class="s">'http://creativecommons.org/licenses/by/4.0/rdf'</span> <span class="na">rel</span><span class="o">=</span><span class="s">'dc:relation'</span><span class="p">><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">'/images/cc/by.s.png'</span> <span class="na">alt</span><span class="o">=</span><span class="s">'Attribution License'</span> <span class="na">height</span><span class="o">=</span><span class="s">'12'</span><span class="p">></</span><span class="nt">span</span><span class="p">></</span><span class="nt">a</span><span class="p">></span>
</span></span></code></pre></div><p>Creative Commons License について詳しくは「<a href="https://text.baldanders.info/cc-licenses/" title="改訂3版: CC Licenses について | text.Baldanders.info">CC Licenses について</a>」を参照して下さい<sup id="fnref:4"><a href="#fn:4" class="footnote-ref" role="doc-noteref">4</a></sup>。</p>
<h2 id="og">付録: Open Graph</h2>
<p><a href="http://ogp.me/">Open Graph Protocol</a> はもともと <a href="https://developers.facebook.com/docs/opengraph">Facebook で提案</a>されたもので, RFDa のような体裁をとっていますが(<a href="http://www.w3.org/2012/pyRdfa/Validator.html">Validator</a> でチェックしてもエラーにはなりません),似て非なるものです。
Open Graph は以下のような関係を想定しています。</p>
<figure style='margin:0 auto;text-align:center;'><a href="./ogp.svg"><img src="./ogp.svg" srcset="./ogp.svg 500w" sizes="(min-width:600px) 500px, 80vw" alt="Open Graph の相関図" loading="lazy"></a><figcaption><div><a href="./ogp.svg">Open Graph の相関図</a></div></figcaption>
</figure>
<ul>
<li><strong>The actor</strong> : 行動をおこすユーザ</li>
<li><strong>The app</strong> : 行動をおこすためのアプリケーション</li>
<li><strong>The action</strong> : 行動</li>
<li><strong>The object</strong> : 行動の対象となる「もの」</li>
</ul>
<p>つまり Open Graph の記述は The App からみれば制御情報に過ぎず, Open Graph 自体は意味を構成していません。
そして,当然ながら Facebook 以外のサービスには使いづらいため <a href="https://dev.twitter.com/ja/docs/cards">Twitter Card</a> の登場に加え <a href="http://developer.mixi.co.jp/connect/mixi_plugin/mixi_check/spec_mixi_check/">mixi</a> や <a href="https://docs.developer.gree.net/ja/platform/connect/socialfeedback">GREE</a> も OGP に独自の仕様を混ぜています。
もはやこれは「濫用」と呼ぶべき状況かもしれません。</p>
<p>Open Graph が RDFa と異なる点は以下のとおりです。</p>
<ul>
<li><code><head></code> 要素内の <code><meta></code> 要素にしか記述できない。他は全て無視される</li>
<li>したがってページ全体に関する記述しかできず,ページ内の構造を記述できない。また他の語彙とも組み合わせられない</li>
<li>記述を <code><meta></code> 要素に限定しているためリテラル・データしか扱えない</li>
<li>リテラル・データの <code>datatype</code> は <a href="http://ogp.me/">Open Graph</a> で用意されているものを使わなければならない</li>
</ul>
<p>Open Graph を設置する際は以上の点に気をつけて下さい。
具体的な設定方法については割愛します(SEO 関連のサイトを探せば大抵設定方法が載っています)。</p>
<h2 id="ブックマーク">ブックマーク</h2>
<ul>
<li><a href="http://www.kanzaki.com/docs/sw/">メタ情報とセマンティック・ウェブ</a>(私は最初にここで RDF を勉強しました)</li>
<li><a href="http://domes.lingua.heliohost.org/rdfa/intro-syntax1.html">RDFa 入門(Introduction to RDFa)</a>(ちょっと古いですが RDFa の記述方法について包括的に書かれていて参考になります)</li>
<li><a href="http://validator.w3.org/">The W3C Markup Validation Service</a>(記述が正しいか常にチェックしましょう)</li>
<li><a href="http://www.w3.org/2012/pyRdfa/Validator.html">RDFa 1.1 Validator</a>(記述が正しいか常にチェックしましょう)</li>
<li><a href="http://kots.jp/blog/site-structured/3567/">MicroformatsとRDFaのhReviewを比較 | kots blog</a></li>
<li><a href="http://internet-apps.blogspot.jp/2008/02/first-steps-in-rdfa-creating-foaf.html">First steps in RDFa: Creating a FOAF profile</a></li>
<li><a href="https://wiki.creativecommons.org/CC_REL">CC REL - CC Wiki</a></li>
<li><a href="http://html5experts.jp/shumpei-shiraishi/1710/">RDFa関連の3仕様が勧告に!その時Microdataは……? | HTML5Experts.jp</a></li>
</ul>
<h2 id="参考図書">参考図書</h2>
<div class="hreview">
<div class="photo"><a class="item url" href="https://www.amazon.co.jp/%E3%82%BB%E3%83%9E%E3%83%B3%E3%83%86%E3%82%A3%E3%83%83%E3%82%AF-HTML-XHTML-%E7%A5%9E%E5%B4%8E-%E6%AD%A3%E8%8B%B1/dp/483993195X?SubscriptionId=AKIAJYVUJ3DMTLAECTHA&tag=baldandersinf-22&linkCode=xm2&camp=2025&creative=165953&creativeASIN=483993195X"><img src="https://images-fe.ssl-images-amazon.com/images/I/51oaN2iq9xL._SL160_.jpg" width="124" alt="photo"></a></div>
<dl class="fn">
<dt><a href="https://www.amazon.co.jp/%E3%82%BB%E3%83%9E%E3%83%B3%E3%83%86%E3%82%A3%E3%83%83%E3%82%AF-HTML-XHTML-%E7%A5%9E%E5%B4%8E-%E6%AD%A3%E8%8B%B1/dp/483993195X?SubscriptionId=AKIAJYVUJ3DMTLAECTHA&tag=baldandersinf-22&linkCode=xm2&camp=2025&creative=165953&creativeASIN=483993195X">セマンティック HTML/XHTML</a></dt>
<dd>神崎 正英</dd>
<dd>毎日コミュニケーションズ 2009-05-28</dd>
<dd>Book 単行本(ソフトカバー)</dd>
<dd>ASIN: 483993195X, EAN: 9784839931957</dd>
<dd>評価<abbr class="rating fa-sm" title="4"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="far fa-star"></i></abbr></dd>
</dl>
<p class="description">残念ながら紙の本は実質的に絶版なんですよねぇ。是非デジタル化を希望します。</p>
<p class="powered-by" >reviewed by <a href='#maker' class='reviewer'>Spiegel</a> on <abbr class="dtreviewed" title="2014-08-17">2014-08-17</abbr> (powered by <a href="https://github.com/spiegel-im-spiegel/amazon-item" >amazon-item</a> 0.2.1)</p>
</div>
<div class="hreview">
<div class="photo"><a class="item url" href="https://www.amazon.co.jp/HTML5-%E3%82%B9%E3%82%BF%E3%83%B3%E3%83%80%E3%83%BC%E3%83%89%E3%83%BB%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%AC%E3%82%A4%E3%83%89%EF%BD%9EWeb%E3%82%B5%E3%82%A4%E3%83%88%E5%88%B6%E4%BD%9C%E8%80%85%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AE%E3%83%93%E3%82%B8%E3%83%A5%E3%82%A2%E3%83%AB%E3%83%BB%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9%EF%BC%86%E3%82%BB%E3%83%9E%E3%83%B3%E3%83%86%E3%82%A3%E3%82%AF%E3%82%B9%E3%81%AB%E3%82%88%E3%82%8B%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%AC%E3%82%A4%E3%83%89%EF%BD%9E-%E3%83%AA%E3%83%95%E3%83%AD%E3%83%BC%E7%89%88-%E3%82%A8%E3%83%BB%E3%83%93%E3%82%B9%E3%82%B3%E3%83%A0%E3%83%BB%E3%83%86%E3%83%83%E3%82%AF%E3%83%BB%E3%83%A9%E3%83%9C-ebook/dp/B00CZ711QS?SubscriptionId=AKIAJYVUJ3DMTLAECTHA&tag=baldandersinf-22&linkCode=xm2&camp=2025&creative=165953&creativeASIN=B00CZ711QS"><img src="https://images-fe.ssl-images-amazon.com/images/I/51918WvpWNL._SL160_.jpg" width="124" alt="photo"></a></div>
<dl class="fn">
<dt><a href="https://www.amazon.co.jp/HTML5-%E3%82%B9%E3%82%BF%E3%83%B3%E3%83%80%E3%83%BC%E3%83%89%E3%83%BB%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%AC%E3%82%A4%E3%83%89%EF%BD%9EWeb%E3%82%B5%E3%82%A4%E3%83%88%E5%88%B6%E4%BD%9C%E8%80%85%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AE%E3%83%93%E3%82%B8%E3%83%A5%E3%82%A2%E3%83%AB%E3%83%BB%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9%EF%BC%86%E3%82%BB%E3%83%9E%E3%83%B3%E3%83%86%E3%82%A3%E3%82%AF%E3%82%B9%E3%81%AB%E3%82%88%E3%82%8B%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%AC%E3%82%A4%E3%83%89%EF%BD%9E-%E3%83%AA%E3%83%95%E3%83%AD%E3%83%BC%E7%89%88-%E3%82%A8%E3%83%BB%E3%83%93%E3%82%B9%E3%82%B3%E3%83%A0%E3%83%BB%E3%83%86%E3%83%83%E3%82%AF%E3%83%BB%E3%83%A9%E3%83%9C-ebook/dp/B00CZ711QS?SubscriptionId=AKIAJYVUJ3DMTLAECTHA&tag=baldandersinf-22&linkCode=xm2&camp=2025&creative=165953&creativeASIN=B00CZ711QS">HTML5 スタンダード・デザインガイド~Webサイト制作者のためのビジュアル・リファレンス&セマンティクスによるコンテンツデザインガイド~ [リフロー版]</a></dt>
<dd>エ・ビスコム・テック・ラボ</dd>
<dd>マイナビ出版 2013-02-14 (Release 2013-02-14)</dd>
<dd>eBooks Kindle版</dd>
<dd>ASIN: B00CZ711QS</dd>
<dd>評価<abbr class="rating fa-sm" title="4"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="far fa-star"></i></abbr></dd>
</dl>
<p class="description">最初に HTML5 の基礎的な知識を仕入れるにはちょうどよかったが,今では古い内容。</p>
<p class="powered-by" >reviewed by <a href='#maker' class='reviewer'>Spiegel</a> on <abbr class="dtreviewed" title="2014-08-17">2014-08-17</abbr> (powered by <a href="https://github.com/spiegel-im-spiegel/amazon-item" >amazon-item</a> 0.2.1)</p>
</div>
<div class="footnotes" role="doc-endnotes">
<hr>
<ol>
<li id="fn:1">
<p>Dublin Core の名前は1995年3月に米国オハイオ州のダブリン(Dublin)で開催された OCLC/NCSA Metadata Workshop での討議結果を “Dublin Core Metadata” と呼んだところに由来しているそうです。 <a href="#fnref:1" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
<li id="fn:2">
<p>最近は後者の利用が多いような気がします。後述する Open Graph なんかよりこちらのほうが断然 COOL なのですが(Open Graph より FoaF のほうが先なんですよ),サポートするサービス・プロバイダが皆無なため SEO(Search Engine Optimization)的には不利と言えます。 <a href="#fnref:2" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
<li id="fn:3">
<p>「製作委員会」方式などで権利を集約している場合や(独占契約を結ぶ代わりに)出版社および権利管理団体に権利を譲渡する場合は権利の帰属先が変わります。著作権ライセンスの場合は「誰が作ったか」よりも「誰に権利があるか」のほうが重要なので権利の帰属先を明記することは重要です。もちろん(たとえ著作者であっても)権利のない人が勝手にライセンスを設定することはできません。 <a href="#fnref:3" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
<li id="fn:4">
<p>Creative Commons License のメタデータはかなり不遇な経緯をたどっています。というより, RDF 自体が不遇なのかもしれませんが。最初の Creative Commons License が登場した2002年当時は RDF をまともに解釈できる parser がありませんでした。その後, Creative Commons License については mozCC のようなツールも登場しますが, mozCC はどういうわけかコメントアウトされた RDF 情報しか読まず,他のツールも似たり寄ったりの状況です。さらに Microformats の <a href="http://microformats.org/wiki/rel-license-ja">rel-license</a> も登場しますが,これも URL からあらかじめ持ってる知識でライセンスの種類を推測するだけの実装がほとんどで「意味を理解する」という RDF の目標からは遠いものです。近年 RDFa やその語彙である ccREL が整備されてきましたが,果たしてどうなるでしょうか。 <a href="#fnref:4" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
</ol>
</div>
サイトをリニューアルしました
tag:Baldanders.info,2014-08-11:/blog/000723/
2014-08-11T09:00:00+00:00
2014-08-11T09:00:00+00:00
モロモロ捨てたおかげで Privacy Policy のページがエラくスッキリしてしまった。善き哉。
Spiegel
/profile/
<p> 皆様のところは台風11合の影響はどうだったでしょうか。 広島は,今回もうま~く逸れてくれたおかげで大したことなくて済みましたが,四国辺りは例によって大変だったみたいですね。 被害にあった方々にはお見舞い申し上げます。 </p><p> では本題。 </p><p> サイトをリニューアルしました。 ポイントは以下の4つ。 </p><ol> <li>HTML5+CSS3+RDFa ベースの構成に変更</li> <li>デザインの統一</li> <li>ライセンス運用の見直し</li> <li>重くなったブログパーツを捨てる</li> </ol><p> まずレイアウトを float ベースから flex ベースに変更した。 これがもう超絶楽チン♥。 </p><ul> <li><a href="https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Flexible_boxes">CSS flexible box の利用 - Web developer guide | MDN</a></li> </ul><p> flex はころころと仕様が変わるみたいで,そもそも名前からして2転3転してるので「ええんか? これ」とか思ったりするが,そろそろ仕様も固まったみたいだしいいかな,って感じで。 </p><p> アイコンは <a href="http://fontawesome.io/icons/">Font Awesome</a> を利用している。 <a href="https://github.com/FortAwesome/Font-Awesome">プロジェクトが GitHub にある</a>のでしばらく Watch していたのだが,流量が多すぎて give up した。 最近こういうのが多いなぁ。 フォントを指定する際は <a href="http://www.bootstrapcdn.com/#fontawesome_tab">Bootstrap CDN を利用</a>すると良い。 </p><p> そうそう。 Internet Explorer はサポート対象から外した。 っていうか,前からサポートしてないけど。 今回 CSS3 の機能を割と使ってるんだけど「IExx は対応してない」ってのが多すぎる。 んなもん面倒見きれるかっての。 まぁ業務系でもパソコンからタブレットにシフトしつつあるみたいだし(それも何故か iPad が多い) IE は淘汰されていくことを願うよ。 </p><p> 確認は Firefox と Chrome でしかしてない(Android 版の Firefox ではフォントサイズがグチャグチャになるけど,よくわからないので放置。仕事じゃないし)。 Safari のパソコン版はないので確認のしようがない。 結局ブラウザは Firefox と Chromium 系に2極化されてる感じだね(同じ WebKit でも Chromium 以外はあまり使いものにならない感じ。 Mac? iOS? 無視無視)。 せっかくなので,過去の古いしがらみを捨てた全く新しい実装とか出てこないものかねぇ。 </p><p> もうひとつ。 <a href="http://www.ipa.go.jp/security/vuln/icat.html">IPA の icat</a> を捨てた。 厳密には Flash のブログパーツを捨てて Twitter(<a href="https://twitter.com/ICATalerts/">@ICATalerts</a>) の Widget に切り替えた。 いや, <a href="http://jvndb.jvn.jp/apis/myjvn/vccheck.html">MyJVN バージョンチェッカ</a>にしてもそうだけどさ,なんでわざわざ Java とか Flash とかセキュリティ・リスクの高い製品を使うわけ? </p><p> 捨てたといえば <a href="http://www.google.com/analytics/">Google Analytics</a> も捨てた。 うちのような辺境サイトには過ぎた玩具でした。 モロモロ捨てたおかげで <a href="https://baldanders.info/site-policy/">Privacy Policy のページ</a>がエラくスッキリしてしまった。 善き哉。 </p><p> ライセンスについては<a href="https://baldanders.info/blog/000721/">既に書いた</a>のでここでは割愛する。 RDFa についてはだいぶ理解できた気がするので,そのうちちゃんとしたドキュメントにまとめるつもり。 </p> <div class="hreview"><a class="item url" href="https://www.amazon.co.jp/exec/obidos/ASIN/B00CZ711QS/baldandersinf-22/"><img src="https://images-fe.ssl-images-amazon.com/images/I/51918WvpWNL._SL160_.jpg" alt="photo" class="photo"/></a><dl><dt class="fn"><a class="item url" href="https://www.amazon.co.jp/exec/obidos/ASIN/B00CZ711QS/baldandersinf-22/">HTML5 スタンダード・デザインガイド~Webサイト制作者のためのビジュアル・リファレンス&セマンティクスによるコンテンツデザインガイド~ [リフロー版]</a></dt><dd>エ・ビスコム・テック・ラボ </dd><dd>マイナビ 2013-02-14</dd><dd>評価<abbr class="rating" title="4"><img src="https://images-fe.ssl-images-amazon.com/images/G/01/detail/stars-4-0.gif" alt=""/></abbr> </dd></dl><p class="similar"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00CZ711R2/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/B00CZ711R2.09._SCTHUMBZZZ_.jpg" alt="CSS3 スタンダード・デザインガイド【改訂第2版】 [リフロー版]"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00M0ESXUI/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/B00M0ESXUI.09._SCTHUMBZZZ_.jpg" alt="Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00CALAWC8/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/B00CALAWC8.09._SCTHUMBZZZ_.jpg" alt="よくわかるJavaScriptの教科書 (教科書シリーズ)"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00BPLSH9E/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/B00BPLSH9E.09._SCTHUMBZZZ_.jpg" alt="jQueryデザインブック 仕事で絶対に使うプロのテクニック"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00IWHVLUG/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/B00IWHVLUG.09._SCTHUMBZZZ_.jpg" alt="これからの「標準」を身につける HTML+CSSデザインレシピ[固定レイアウト版]"/></a> </p><p class="gtools">by <a href="http://www.goodpic.com/mt/aws/index.html">G-Tools</a> , <abbr class="dtreviewed" title="2014/08/11">2014/08/11</abbr></p></div> <div class="hreview"><a class="item url" href="https://www.amazon.co.jp/exec/obidos/ASIN/4627829310/baldandersinf-22/"><img src="https://images-fe.ssl-images-amazon.com/images/I/4186NJ98Z7L._SL160_.jpg" alt="photo" class="photo"/></a><dl><dt class="fn"><a class="item url" href="https://www.amazon.co.jp/exec/obidos/ASIN/4627829310/baldandersinf-22/">セマンティック・ウェブのためのRDF/OWL入門</a></dt><dd>神崎 正英 </dd><dd>森北出版 2005-01-07</dd><dd>評価<abbr class="rating" title="4"><img src="https://images-fe.ssl-images-amazon.com/images/G/01/detail/stars-4-0.gif" alt=""/></abbr> </dd></dl><p class="similar"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/4764904276/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/4764904276.09._SCTHUMBZZZ_.jpg" alt="Linked Data: Webをグローバルなデータ空間にする仕組み"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/4873114527/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/4873114527.09._SCTHUMBZZZ_.jpg" alt="セマンティックWeb プログラミング"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/4501540109/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/4501540109.09._SCTHUMBZZZ_.jpg" alt="オントロジ技術入門―ウェブオントロジとOWL (セマンティック技術シリーズ)"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/4274079791/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/4274079791.09._SCTHUMBZZZ_.jpg" alt="セマンティックWeb入門"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/4774163260/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/4774163260.09._SCTHUMBZZZ_.jpg" alt="エンジニアのための データ可視化[実践]入門 ~D3.jsによるWebの可視化 (Software Design plus)"/></a> </p><p class="gtools">by <a href="http://www.goodpic.com/mt/aws/index.html">G-Tools</a> , <abbr class="dtreviewed" title="2014/08/11">2014/08/11</abbr></p></div>
Metadata と RDFa と ccREL
tag:Baldanders.info,2014-08-04:/blog/000722/
2014-08-04T09:00:00+00:00
2014-08-04T09:00:00+00:00
Web ページに cc-license のメタデータを指示するために RDFa をお勉強中。以下は覚え書きのために残しておく。
Spiegel
/profile/
<p> Web ページに cc-license のメタデータを指示するために RDFa をお勉強中。 以下は覚え書きのために残しておく。 </p><p> HTML5 下でメタデータを埋め込むまたは指示する仕組みとしては Microdata と RDFa が有力っぽい。 </p><p> (Microformats はよく分からないけど,あれってもう死んでるんじゃないのかなぁ(とはいえ RDFa は Microformats からの fork なんだけど。まぁ Trunk が潰れて Branch のみが生き残るってのはよく聞く話だし。それも進化の多様性のあり方じゃよ,フォッフォッフォッ)。 <a href="https://baldanders.info/blog/000346/">以前も思った</a>けど, Microformats は何がしたいのかさっぱりわからない。 たぶん基盤(infrastructure)がないせいだと思う。 メタデータってのは語彙(vocabulary)をいかに制御するかが肝で,たとえ「知らない語彙」でも合理的に扱えるようになっていなければならない。 何故ならメタデータを解釈(parse)する「機械」は何も知らない(ところから始める)のだから。 それが Machine-Readable であるということだ) </p><p> Microdata と RDFa の最大の違いは DOM の要素として制御できるかどうかで,その点では最後発の Microdata がもっとも有利といえる。 RDF/RDFa は意味(semantics)を解釈するための独自の parser が必要で, DOM つまり JavaScript 等で制御可能な Microdata のほうが将来性が見込める。 </p><p> とはいえ Microdata の JavaScript 実装は進んでないみたい。 </p> <figure> <blockquote> 「JavaScript APIが削除されるに至った主な理由は、実装の欠如です。具体的には、FirefoxとOpera (Presto)が一度は実装したものの、OperaがChromiumに移行したため実装例が減ってしまい、勧告の条件(二つ以上の相互運用可能な実装が存在すること)を満たせるか怪しくなったというもの。 Blinkからはすでに実装が削除されており、Firefoxでも削除を検討中、WebKitからもMicrodataのAPIに関連するコードは削除されたそうで、MicrodataのJavaScript APIは実質上「終わった」と言っても良いかもしれません(ただし、WHATWG仕様においては、「代替案がない」という理由で仕様が残されることが決定しています)。」 </blockquote> <figcaption>(<q><a href="http://html5experts.jp/shumpei-shiraishi/1710/">RDFa関連の3仕様が勧告に!その時Microdataは……? | HTML5Experts.jp</a></q> より)</figcaption> </figure> <p> どうなるのかなぁ。 もったいない気がするんだけど。 </p><p> というわけで,今回は RDFa で行きます。 </p> <h3>RDFa の基礎</h3> <p> まず W3C のドキュメントから </p><ul> <li><a href="http://www.w3.org/TR/rdfa-lite/">RDFa Lite 1.1</a> (2012-06-07)</li> <li><a href="http://www.w3.org/TR/rdfa-core/">RDFa Core 1.1 - Second Edition</a> (2013-08-22)</li> <li><a href="http://www.w3.org/TR/xhtml-rdfa/">XHTML+RDFa 1.1 - Second Edition</a> (2013-08-22)</li> <li><a href="http://www.w3.org/TR/html-rdfa/">HTML+RDFa 1.1</a> (2013-08-22)</li> </ul><p> で,これだとちょっと分かりにくいので以下を参照するとよい。 </p><ul> <li><a href="http://domes.lingua.heliohost.org/rdfa/intro-syntax1.html">RDFa 入門 (Introduction to RDFa)</a></li> </ul><p> RDF では主語・述語・目的語の Triple を構成する。 実は主語と目的語は等価な resource で,つまり resource 同士を(述語を使って)つなぎ合わせてネットワーク(というか Web)にしていくことで意味(semantics)を形成する。 これが RDF の本質的な機能である。 だから RDF/RDFa では常に主語はなにか,述語はなにか,目的語はなにか,を意識していくとよい(という説明をちゃんとしているページを殆ど見かけないのだが,みんなどうしてるんだろう)。 ちなみに resource には URI を指定する。 またリテラルデータ(タイトルとか名前とか)は目的語にしか使えない。 </p><p> ただし,自前で間違えずに RDFa の Triple を作るのは結構難しいので,以下の Validator の助けを借りることをお薦めする。 </p><ul> <li><del><a href="http://html5.validator.nu/">Validator.nu (X)HTML5 Validator</a></del>(チェック基準が古い?) <a href="http://validator.w3.org/">The W3C Markup Validation Service</a></li> <li><a href="http://www.w3.org/2012/pyRdfa/Validator.html">RDFa 1.1 Validator</a></li> </ul><p> なんで2つも Validate しないといけないかというと HTML5 的には OK でも RDFa 的には NG だったり,またその逆もあったりして結構面倒なのだ。 この辺は慣れていくしかない,トホホ。 </p> <h3>RDFa の語彙</h3> <p> RDFa 1,1 以降では語彙の指定を prefix 属性を使って行う。 </p><div> <pre class="brush:html" title="prefix 属性"><html prefix='dc: http://purl.org/dc/terms/
cc: http://creativecommons.org/ns#'></pre>
</div><p>
これで <a href="http://dublincore.org/">Dublin Core</a> の語彙が <code>dc:</code> プレフィクスに, <a href="http://creativecommons.org/ns#">ccREL</a> の語彙が <code>cc:</code> プレフィクスに割り当てられる。
ただし以下の語彙については組み込み済みなので prefix 指定なしで使うことができる。
</p><ul>
<li><code>bibo:</code> <a href="http://purl.org/ontology/bibo/">http://purl.org/ontology/bibo/</a></li>
<li><code>cc:</code> <a href="http://creativecommons.org/ns#">http://creativecommons.org/ns#</a></li>
<li><code>dbp:</code> <a href="http://dbpedia.org/property/">http://dbpedia.org/property/</a></li>
<li><code>dbp-owl:</code> <a href="http://dbpedia.org/ontology/">http://dbpedia.org/ontology/</a></li>
<li><code>dbr:</code> <a href="http://dbpedia.org/resource/">http://dbpedia.org/resource/</a></li>
<li><code>dc:</code> <a href="http://purl.org/dc/terms/">http://purl.org/dc/terms/</a></li>
<li><code>ex:</code> <a href="http://example.org/">http://example.org/</a></li>
<li><code>foaf:</code> <a href="http://xmlns.com/foaf/0.1/">http://xmlns.com/foaf/0.1/</a></li>
<li><code>og:</code> <a href="http://ogp.me/ns#">http://ogp.me/ns#</a> (<a href="http://www.w3.org/TR/rdfa-core/">RDFa Core 1.1</a> のドキュメントにはなかったけど使えた)</li>
<li><code>owl:</code> <a href="http://www.w3.org/2002/07/owl#">http://www.w3.org/2002/07/owl#</a></li>
<li><code>rdf:</code> <a href="http://www.w3.org/1999/02/22-rdf-syntax-ns#">http://www.w3.org/1999/02/22-rdf-syntax-ns#</a></li>
<li><code>rdfa:</code> <a href="http://www.w3.org/ns/rdfa#">http://www.w3.org/ns/rdfa#</a></li>
<li><code>rdfs:</code> <a href="http://www.w3.org/2000/01/rdf-schema#">http://www.w3.org/2000/01/rdf-schema#</a></li>
<li><code>xhv:</code> <a href="http://www.w3.org/1999/xhtml/vocab#">http://www.w3.org/1999/xhtml/vocab#</a></li>
<li><code>xsd:</code> <a href="http://www.w3.org/2001/XMLSchema#">http://www.w3.org/2001/XMLSchema#</a></li>
</ul><p>
まぁ <code>dc:</code> <code>cc:</code> <code>og:</code> <code>foaf:</code> といったメジャーどころは組み込み済みなので,自前で語彙を作らない限り, prefix のお世話になることはほぼないだろう。
</p>
<h3>cc-license のメタデータを指示する</h3>
<p>
これで準備はできたので,早速 cc-license のメタデータを指示してみる。
cc-license のメタデータを指示するには <a href="http://dublincore.org/">Dublin Core</a> と <a href="http://creativecommons.org/ns">ccREL(Creative Commons Rights Expression Language)</a> の語彙を使う。
</p><p>
(ちなみに <a href="http://creativecommons.org/">Creative Commons</a> のサイトでは<a href="http://creativecommons.org/choose/">選択したライセンスのメタデータを吐いてくれるツール</a>があるが,あれをそのまま貼り付けると Validator に怒られる,困ったことに)
</p><p>
使うプロパティは以下のとおり。
</p><ul>
<li>dc:title : 作品のタイトル</li>
<li>dc:dateCopyrighted : 公表日</li>
<li>dc:source : 元になった作品(URL) 二次的著作物の場合</li>
<li>cc:attributionName : 著作(権)者名</li>
<li>cc:attributionURL : 著作(権)者の URL</li>
<li>cc:license : ライセンス(URL)</li>
<li>cc:morePermissions : 追加許可(URL)</li>
<li>cc:useGuidelines : ガイドライン(URL)</li>
</ul><p>
実際には以下のように使う。
</p><div>
<pre class="brush:html" title="/cc-license.shtml フッタ部"><div class='copyright' about='cc-license.shtml'>
Written and revised by <a href='#me' rel='cc:attributionURL' property='cc:attributionName'>Yasuhiro (Spiegel) ARAKAWA</a>
on <span property="dc:dateCopyrighted">Sunday, 03-Aug-2014 21:11:27 JST</span>,<br>
Licensed under <&span rel='cc:license' resource='http://creativecommons.org/licenses/by/4.0/rdf'gt;<a property='cc:license' href='http://creativecommons.org/licenses/by/4.0/'><img src='/images/cc/by.s.png' alt='Attribution License' height='12'></a>
and <a href='/cc-license.shtml#morePermissions' rel='cc:morePermissions'>more permissions</a></span>.
</div></pre>
</div><p>
<del>述語が全て property 属性で指定されている点に注意。
ライセンスを指示する a 要素の場合は rel 属性のほうが正しい気がするが(実際 <a href="http://www.w3.org/2012/pyRdfa/Validator.html">RDFa Validator</a> は OK なんだけど), <a href="http://html5.validator.nu/">HTML5 Validator</a> のほうが NG を吐く。
理由は不明。</del>
</p><p>
これを <a href="http://www.w3.org/2012/pyRdfa/Validator.html">RDFa Validator</a> にかけると Turtle フォーマットで以下の情報を吐いてくれる。
</p><div>
<pre class="brush:plain" title="RDFa 解析結果">@prefix cc: <http://creativecommons.org/ns#> .
@prefix dc: <http://purl.org/dc/terms/> .
<p></cc-license.shtml>
cc:attributionName "Yasuhiro (Spiegel) Arakawa"@ja;
cc:attributionURL </cc-license.shtml#me>;
cc:license <http://creativecommons.org/licenses/by/4.0/rdf>;
cc:morePermissions </cc-license.shtml#morePermissions>;
dc:dateCopyrighted "Sunday, 03-Aug-2014 21:16:13 JST"@ja;
dc:title "クリエイティブ・コモンズ・ライセンスについて"@ja .</pre></p>
</div><p>
ま,まぁ,正しく解釈してるみたいなんでいいのかな?
</p><p>
RDFa の仕様はかなり parser 任せな部分があるように感じる。
属性の指定さえ間違えなければ parser 側で勝手に解釈して主語や目的語を推定してくれる。
そもそも HTML5 の仕様からしてかなり ad hoc な感じだしなぁ。
まぁいいや。
今日はここまで。
</p>
<div class="hreview"><a class="item url" href="https://www.amazon.co.jp/exec/obidos/ASIN/4627829310/baldandersinf-22/"><img src="https://images-fe.ssl-images-amazon.com/images/I/4186NJ98Z7L._SL160_.jpg" alt="photo" class="photo"/></a><dl><dt class="fn"><a class="item url" href="https://www.amazon.co.jp/exec/obidos/ASIN/4627829310/baldandersinf-22/">セマンティック・ウェブのためのRDF/OWL入門</a></dt><dd>神崎 正英 </dd><dd>森北出版 2005-01-07</dd><dd>評価<abbr class="rating" title="4"><img src="https://images-fe.ssl-images-amazon.com/images/G/01/detail/stars-4-0.gif" alt=""/></abbr> </dd></dl><p class="similar"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/4764904276/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/4764904276.09._SCTHUMBZZZ_.jpg" alt="Linked Data: Webをグローバルなデータ空間にする仕組み"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/4873114527/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/4873114527.09._SCTHUMBZZZ_.jpg" alt="セマンティックWeb プログラミング"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/4501540109/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/4501540109.09._SCTHUMBZZZ_.jpg" alt="オントロジ技術入門―ウェブオントロジとOWL (セマンティック技術シリーズ)"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/4274079791/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/4274079791.09._SCTHUMBZZZ_.jpg" alt="セマンティックWeb入門"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/4274202925/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/4274202925.09._SCTHUMBZZZ_.jpg" alt="オントロジー構築入門"/></a> </p><p class="gtools">by <a href="http://www.goodpic.com/mt/aws/index.html">G-Tools</a> , <abbr class="dtreviewed" title="2014/08/03">2014/08/03</abbr></p></div>
About CC-License (HTML5 練習用)
tag:Baldanders.info,2014-08-03:/blog/000721/
2014-08-03T09:00:00+00:00
2014-08-03T09:00:00+00:00
「クリエイティブ・コモンズについて」を大改訂した。
Spiegel
/profile/
<p> <a href="https://baldanders.info/cc-license.shtml">「クリエイティブ・コモンズについて」を大改訂</a>した。 目的は3つ。 </p><ul> <li>このサイトの cc-license について more permission を設定する</li> <li>2014年に至るも cc-license は国内ではほとんど認知されず, <a href="http://creativecommons.jp/">CCjp</a> 以外にまとまった情報のあるサイト/ページがない。 しかも <a href="http://creativecommons.jp/">CCjp</a> の情報は微妙に古く,やる気が感じられない。 もう自分で書くしかないぢゃん</li> <li>HTML5 の演習課題。 もしくは,このサイトのリニューアル実験ページ</li> </ul><p> 2003年に『<a href="https://baldanders.info/spiegel/archive/docs/cc-about.html">「クリエイティブ・コモンズ」について</a>』(<a href="https://baldanders.info/spiegel/archive/docs/cc-about.pdf">PDF</a>)を書いたときは Creative Commons ができて間もない頃だったし多少の期待を込めて書いていたのだが,それも今は昔。 世界的に見れば普及に向けた運動はとっくに終わっていて,他の「自由なライセンス」との整合性や著作権管理団体との折り合いをどうつけるか,といった方向に議論がシフトしているのに,日本ではいまだに認知すらされているとは言いがたい。 一部の「マニアック」なユーザのなぐさみものにとどまっているのなら,当時の議論は何だったのかという気になる。 </p><p> そこで今回は内容を思いっきり実務的なものにシフトした。 啓蒙とか普及とかクソ食らえである。 「使える道具」がそこにあって(日本以外の)みんなが使ってるのなら私が使わない手はないし,あくまで「私が使う」という前提に立った解説ページでいいぢゃん,ということにした。 したのである。 これが<a href="https://baldanders.info/cc-license.shtml">その結果</a>。 もう「ローレンス・レッシグ」の名前もない。 </p><p> 書き残しもいくつか。 </p><ul> <li>メタデータについて。これちゃんと書かないと more permissions の説明もできないのだが, RDFa については(HTML5 と併せて)お勉強中なのでもう少し待ってね。</li> <li>CC0 について。例によって <a href="http://creativecommons.jp/">CCjp</a> は<a href="http://creativecommons.jp/weblog/2013/11/5065/">パブコメ募集</a>以降まったく音沙汰が無いのですが,やる気があるのでしょうか。</li> </ul><p> 今回 more permission で「2次利用に際して,元となったコンテンツのクレジットを表示する必要はありません」としたが,これ結構危険なので他人にはあまりおすすめできない。 cc-license ではサブライセンスを禁止しているが,そうなると「二次的著作物」にちゃんと元クレジットがないと簡単にコントロールが外れてしまうからだ。 もとより私はそれを狙っての追加許可なのだが,一般のクリエイターのみなさんは,それは本意ではないだろう。 </p><p> 最後に。 </p><p> 「<a href="https://baldanders.info/cc-license.shtml">「クリエイティブ・コモンズ・ライセンスについて</a>」では HTML5 のアウトラインに対応した。 Chrome の <a href="https://chrome.google.com/webstore/detail/html5-outliner/afoibpobokebhgfnknfndkgemglggomo">HTML5 Outliner</a> 等のツールで見ることができる。 自ページを parse できるブログパーツとかあれば便利なんだけどねぇ。 どなたか知らないッスか? </p><p> どう考えても h* 要素の解釈に矛盾があるような気がするんだけど,どうにかして欲しい。 </p> <div class="hreview"><a class="item url" href="https://www.amazon.co.jp/exec/obidos/ASIN/475710152X/baldandersinf-22/"><img src="https://images-fe.ssl-images-amazon.com/images/I/41WPNBY7HZL._SL160_.jpg" alt="photo" class="photo"/></a><dl><dt class="fn"><a class="item url" href="https://www.amazon.co.jp/exec/obidos/ASIN/475710152X/baldandersinf-22/">クリエイティブ・コモンズ―デジタル時代の知的財産権</a></dt><dd>ローレンス レッシグ 椙山 敬士 上村 圭介 林 紘一郎 若槻 絵美 土屋 大洋 クリエイティブコモンズジャパン </dd><dd>NTT出版 2005-03</dd><dd>評価<abbr class="rating" title="4"><img src="https://images-fe.ssl-images-amazon.com/images/G/01/detail/stars-4-0.gif" alt=""/></abbr> </dd></dl><p class="similar"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/4798106801/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/4798106801.09._SCTHUMBZZZ_.jpg" alt="Free Culture"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/4798102040/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/4798102040.09._SCTHUMBZZZ_.jpg" alt="コモンズ"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/4798119806/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/4798119806.09._SCTHUMBZZZ_.jpg" alt="REMIX ハイブリッド経済で栄える文化と商業のあり方"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/4087205274/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/4087205274.09._SCTHUMBZZZ_.jpg" alt="著作権の世紀―変わる「情報の独占制度」 (集英社新書 527A)"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/4480065733/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/4480065733.09._SCTHUMBZZZ_.jpg" alt="デジタル時代の著作権 (ちくま新書)"/></a> </p><p>残念ながら紙の本は実質的に絶版なんですよねぇ。是非デジタル化を希望します。</p><p class="gtools">by <a href="http://www.goodpic.com/mt/aws/index.html">G-Tools</a> , <abbr class="dtreviewed" title="2014/08/02">2014/08/02</abbr></p></div> <div class="hreview"><a class="item url" href="https://www.amazon.co.jp/exec/obidos/ASIN/B00CZ711QS/baldandersinf-22/"><img src="https://images-fe.ssl-images-amazon.com/images/I/51918WvpWNL._SL160_.jpg" alt="photo" class="photo"/></a><dl><dt class="fn"><a class="item url" href="https://www.amazon.co.jp/exec/obidos/ASIN/B00CZ711QS/baldandersinf-22/">HTML5 スタンダード・デザインガイド~Webサイト制作者のためのビジュアル・リファレンス&セマンティクスによるコンテンツデザインガイド~ [リフロー版]</a></dt><dd>エ・ビスコム・テック・ラボ </dd><dd>マイナビ 2013-02-14</dd><dd>評価<abbr class="rating" title="4"><img src="https://images-fe.ssl-images-amazon.com/images/G/01/detail/stars-4-0.gif" alt=""/></abbr> </dd></dl><p class="similar"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00M0ESXUI/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/B00M0ESXUI.09._SCTHUMBZZZ_.jpg" alt="Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00CZ711R2/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/B00CZ711R2.09._SCTHUMBZZZ_.jpg" alt="CSS3 スタンダード・デザインガイド【改訂第2版】 [リフロー版]"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00CALAWC8/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/B00CALAWC8.09._SCTHUMBZZZ_.jpg" alt="よくわかるJavaScriptの教科書 (教科書シリーズ)"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00IWHVLUG/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/B00IWHVLUG.09._SCTHUMBZZZ_.jpg" alt="これからの「標準」を身につける HTML+CSSデザインレシピ[固定レイアウト版]"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00BPLSH9E/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/B00BPLSH9E.09._SCTHUMBZZZ_.jpg" alt="jQueryデザインブック 仕事で絶対に使うプロのテクニック"/></a> </p><p class="gtools">by <a href="http://www.goodpic.com/mt/aws/index.html">G-Tools</a> , <abbr class="dtreviewed" title="2014/08/03">2014/08/03</abbr></p></div>