![閉じる [x]](http://dw1.s81c.com/i/c.gif){kind=small}
jQuery などのライブラリーによって、開発者がサイトを作成する方法に革命的な変化が起こり、HTML で記述されたページにそのまま追加するだけですぐに使用できるスクリプトが大量に開発されています。microdata は、この革命をさらに一歩進める可能性を秘めています。microdata を利用すると、HTML テンプレートのバリエーションとは無関係に、どのサイトでもシームレスに動作するスクリプトを容易に作成することができます。
例えば、計画しているイベントを地図上に表示する場合、jQuery プラグインと Google マップとを統合すると、Web サイト上にインタラクティブな地図を容易に作成することができます。開発者はイベントの場所を含む構造化形式のファイル (JSON や CSV など) を作成するだけでよいのです。ただし、構造化形式のデータを別に持つと、Web ページ上にそのデータの情報を HTML で表示したい場合に問題が生じる可能性があります。データの内容を HTML とデータ・ファイルの両方に持たせるためには、そのページの HTML とデータ・ファイルとの間で変換を行うスクリプトを作成するか、いずれかのデータに対して行った変更を他方のデータへコピーする必要があります。しかし、この方法では HTML とデータ・ファイルとの同期がすぐに困難になります。
microdata や RDFa などの HTML データ・フォーマットを使用する主なメリットの 1 つは、複数ファイルの同期を維持できることです。つまり通常どおり HTML を作成し、いくつかの属性を HTML タグに追加すると、データ・ストアとしては 2 倍必要になるのです。これらの HTML データ・フォーマットは WHATWG と W3C で開発され、認可された Web 標準です。そのため、HTML からデータを抽出するツールが既に作成されており、これらのツールを自分のサイト上で手軽に再利用することができます。
microdata がよく使われるようになったのは最近のことであるため、microdata をサポートするツールとしては、プラグインがいくつかリリースされたのみです。その一例が、上記のような地図を作成できる jQuery の UI Map プラグインです。
HTML のごく一部を使用すると、インタラクティブなイベント・マップと効果的な SEO の両方を実現することができます。
以前の記事 (リンクは「参考文献」を参照) で説明されているように、microdata を schema.org の語彙にある用語と組み合わせて使用すると、検索エンジンがコンテンツを容易に理解できるようになります。そのため、検索エンジンはリッチ・スニペットを表示することができ、その結果ページに関する最も重要な情報が検索結果の中に含まれて表示されるようになります。
リッチ・スニペットを取得するために追加されるアノテーションには 2 つの役割があります。つまりアノテーションを使用することで検索結果がより効果的なものになるだけではなく、ページに表示される内容も充実させることができます。
ここではそのために jQuery プラグインを使用します。サンプル・コードのダウンロードには関連ファイルも含めてあり、その中には jQuery プラグインを少し変更したバージョンが含まれています。
では、世界各地で開催される DrupalCamp イベントの一覧を作成しましょう。まず、2 つのイベント情報が含まれる HTML ページを作成します (リスト 1)。
リスト 1. 2 つのイベント情報が含まれる基本的な HTML
<!DOCTYPE html>
<head>
<title>Upcoming DrupalCamps</title>
</head>
<body id="doc">
<h1>Upcoming DrupalCamps</h1>
<!-- Event 1: DrupalCamp Toulouse -->
<div>
<h2><a href="http://example.com/drupalcamp_fr">DrupalCamp Toulouse 2011</a></h2>
<img src='images/drupalicon_fr.png' />
<p>Vous l’attendiez tous, le DrupalCamp Toulouse aura bien lieu,
réuni avec 2 autres événements sous la bannière
"Capitole du Libre": le DrupalCamp, une Ubuntu Party, une Akademy
(évènement KDE).</p>
<div>
ENSEEIHT, Toulouse, Haute-Garonne, FR
</div>
<div>
<time datetime="2011-11-26T09:00:00+01:00">November 26, 10:00am</time> –
<time datetime="2011-11-27T17:00:00+01:00">November 27, 6:00pm</time>
</div>
</div>
<!-- Event 2: DrupalCamp Ohio -->
<div>
<h2><a href="http://example.com/drupalcampohio">Drupalcamp Ohio 2011</a></h2>
<img src='images/drupalicon_oh.png' />
<p>The Central Ohio Drupal User Group (CODUG) is proud to announce
Ohio’s first Drupalcamp. On Saturday, December 3rd, we’ll hold an
all-day camp with keynote speaker, breakout sessions and Birds of Feather groups at The
Ohio State University’s Nationwide and Ohio Farm Bureau 4-H Center.</p>
<div>
The Ohio State University, Columbus, Ohio, US
</div>
<div>
<time datetime="2011-12-03T09:00:00-05:00">December 3, 9:00am</time> –
<time datetime="2011-12-03T17:00:00-05:00">5:00pm</time>
</div>
</div>
</body>
</html>
|
特殊な要素で日付をマークアップしていることに注意してください。この要素は新しい time 要素であり、HTML5 標準の中心的要素の一部です。この要素を使うことで正確な時刻をページに追加することができるため、アプリケーションが容易に時刻を構文解析して使用することができます。この例の場合には、Google はこれらの time 要素を使用してページの中から今後の 3 つのイベントを選択し、リッチ・スニペットに表示します。この記事を公開する時点で、この time 要素をもっと汎用的なデータ要素に変更すべきかどうかについて議論があることに注意してください。その議論が通った場合には、以下に示すコードの「time」は「data」に置き換えられ、「datetime」は「value」に置き換えられることになります。
datetime は YYYY-MM-DD 形式の日付で始まります。次に、「T」によって日付と時刻が分離され、時刻は HH:MM:SS 形式で指定されます。次に協定世界時 (UTC) からのオフセットが指定されます。例えば冬のフランスは UTC よりも 1 時間進んでいるため、datetime ストリングの最後にオフセットとして「+01:00」が追加されています。オハイオ州は冬には UTC よりも 5 時間遅れているため、datetime ストリングの最後にオフセットとして「-05:00」が追加されています。これらが追加されたことにより、「”2011-12-03T09:00:00-05:00”」という値をコンピューターが読み取ると、2011年 12月 3日の米国中部標準時午前 9 時と解釈されます。
このファイルを Web サーバーの jquery-ui-map/demos ディレクトリーに保存し、Web ブラウザーにロードします。図 1 にはリスト 1 に記述された両方のイベントの詳細が表示されています。
図 1. 2 つのイベントを表示した基本的なページ
time 要素を持つページには、コンピューターにとって理解可能な情報が少し含まれています。この追加情報によって Google に表示される結果がどのように変化したかを調べてみましょう。Google の Rich Snippets Testing Tool のサイトにアクセスし、皆さんの Web ページの URL を入力します (その結果は、図 2 を参照)。すると、イベントの詳細が表示される代わりにプレビュー生成エラーが表示され、作成者のマークアップやリッチ・スニペットのマークアップ、あるいは作成者の情報が含まれていないことが示されます。
図 2. Rich Snippets Testing Tool で基本的な HTML のページを指定してもプレビューが生成されなかった様子
Google はページに時刻が含まれていることを認識しますが、これらの時刻がイベントの開始時刻と終了時刻であることを認識することはできません。Google がそれを認識できるようにするためには、schema.org の用語をいくつか追加する必要があります (リスト 2 を参照)。microdata によって schema.org のマークアップを公開する方法については以前の記事で詳細に説明されています (「参考文献」のリンクを参照)。
リスト 2. 各イベントの <div> を Event アイテムにする
<!-- Event 1: DrupalCamp Toulouse --> <div itemscope itemtype="http://schema.org/Event"> ... </div> <!-- Event 2: DrupalCamp Ohio --> <div itemscope itemtype="http://schema.org/Event"> ... </div> |
次に、url プロパティーと name プロパティーをイベントに追加します。itemprop 属性を追加する場所として、名前を囲うように <span> を追加することに注意してください。また、image プロパティーも追加します。このリッチ・スニペットには画像は必要ありませんが、後で画像を使用します。
リスト 3. イベントに url プロパティーと name プロパティーを追加する
<!-- Event 1: DrupalCamp Toulouse --> <div itemscope itemtype="http://schema.org/Event"> <h2><a href="http://example.com/drupalcamp_fr" itemprop="url"><span itemprop="name">DrupalCamp Toulouse 2011</span></a></h2> <img itemprop="image" src='images/drupalicon_fr.png' /> ... </div> <!-- Event 2: DrupalCamp Ohio --> <div itemscope itemtype="http://schema.org/Event"> <h2><a href="http://example.com/drupalcampohio" itemprop="url"><span itemprop="name">Drupalcamp Ohio 2011</span></a></h2> <img itemprop="image" src='images/drupalicon_oh.png' /> ... </div> |
今度は開始時刻と (オプションとして) 終了時刻を追加します。先ほど time 要素を使用したので、既にコンピューターは開始時刻と終了時刻の値を読み取ることができます。後は schema.org の用語を追加し、どちらが開始時刻でどちらが終了時刻なのかを Google が認識できるようにすればよいのです (リスト 4 を参照)。
リスト 4. time 要素に startDate プロパティーと endDate プロパティーを追加する
<!-- Event 1: DrupalCamp Toulouse -->
<div itemscope itemtype="http://schema.org/Event">
...
<div>
<time itemprop="startDate" datetime="2011-11-26T09:00:00+01:00">November 26,
10:00am</time> –
<time itemprop="endDate" datetime="2011-11-27T17:00:00+01:00">November 27,
6:00pm</time>
</div>
</div>
<!-- Event 2: DrupalCamp Ohio -->
<div itemscope itemtype="http://schema.org/Event">
...
<div>
<time itemprop="startDate" datetime="2011-12-03T09:00:00-05:00">December 3,
9:00am</time> –
<time itemprop="endDate"
datetime="2011-12-03T17:00:00-05:00">5:00pm</time>
</div>
</div>
|
このページを再度 Rich Snippets Testing Tool でテストします。ベース URL とは異なるドメインを指す URL が含まれているため、警告が表示され、リッチ・スニペットは表示されません (図 3 を参照)。
図 3. 警告が表示され、リッチ・スニペットは表示されない様子
Google は、イベントへのリンクは同じドメイン内のページを指していることを要求しています。この要件はスパムが実行されるのを防ぐためです。example.com を検索して皆さんのドメインで置き換え、再度テストすると、図 4 のようにリッチ・スニペットが表示されます。
図 4. リッチ・スニペットによって両方のイベントが開始日と共に表示される
Rich Snippets Testing Tool がリッチ・スニペットを表示したからといって、実際の検索結果にリッチ・スニペットが表示されると保証されたわけではありません。Google がリッチ・スニペットを有効にし、ページのリッチ・スニペットが検索結果に表示されるようにするためには、まず Google に申請し、そのサイトを Google が調べる必要があります。この点についての詳細は Google の FAQ を参照してください。
DrupalCamps は世界各地で開催されるため、サイト訪問者はどのイベントが参加可能な距離内にある場所で開催されるかがわかるような地図を要求するはずです。地図が表示されるようにするには、もう少し情報を追加すればよいのです。
まず、表示用の地図を設定します。文書のページの見出しとイベント一覧の間に、地図を配置するための <div> を追加します (リスト 5 を参照)。
リスト 5. 地図のための <div> を追加する
<body id="doc">
<h1>Upcoming DrupalCamps</h1>
<div>
<div id="map_canvas"></div>
</div>
<!-- Event 1: DrupalCamp Toulouse -->
|
この <div> をインタラクティブな地図にするために、いくつか JavaScript ファイルを追加する必要があります。また CSS ファイルもいくつか追加します。CSS ファイルによって #map_canvas <div> の高さを指定し、地図が表示されるようにします。ローカル・ファイルはソース・コードに含まれています (「ダウンロード」を参照)。
リスト 6. 外部 CSS、JavaScript ライブラリー、インラインの jQuery を追加する
<head> <title>Upcoming DrupalCamps</title> <!-- External Stylesheets --> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css" /> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssbase/base-min.css" /> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssfonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="css/main.css" /> <!-- Google Maps API and jQuery, served by Google --> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script> <!-- jQuery UI Maps files for placing markers and for parsing Microdata --> <script type="text/javascript" src="../web/jquery.fn.gmap.js"></script> <script type="text/javascript" src="../ui/jquery.ui.map.services.js"></script> <script type="text/javascript" src="../ui/jquery.ui.map.microdata.js"></script> ... |
次に jQuery のブロックを追加します。ページを初期化する際、このブロックが #map_canvas <div> を取得し、それを地図として表示します (リスト 7 を参照)。この関数には後でさらにコードを追加します。
リスト 7. 地図を初期化する
...
<!-- Grab the #map_canvas div and turn it into a map -->
<script type="text/javascript">
$(function() {
map = $('#map_canvas');
map.gmap().bind('init', function () {
});
});
</script>
</head>
|
ページをリロードすると、地図が表示されます (図 5 を参照)。この地図にはまだ何もイベント・マーカーがありません。イベント・マーカーが表示されるようにするためには、さらにもう少し情報を追加する必要があります。
図 5. 何もマーカーが表示されていない基本的な地図rs
地図にマーカーを追加する前に、microdata を使用してイベントの場所を追加する必要があります。とりあえず、各イベントの住所を 1 つのストリングとして扱います。しかし住所には明確に異なる複数の部分があります。この構造を microdata で表現し、たとえ後で HTML の構造を変更した場合にも一貫性のある容易な方法で適切な値を取得できるようにする必要があります。
まず、location プロパティーを追加します。このプロパティーにはアイテム・タイプが Place の値が指定されます (リスト 8 を参照)。
リスト 8. イベントに location プロパティーを追加する
<!-- Event 1: DrupalCamp Toulouse -->
<div itemscope itemtype="http://schema.org/Event">
...
<div itemprop="location" itemscope itemtype="http://schema.org/Place">
ENSEEIHT, Toulouse, Haute-Garonne, FR
</div>
...
</div>
|
アイテム・タイプ Place は名前と住所を持つことができます。住所は独自のプロパティーを持つアイテムです。プロパティーには、番地 (streetAddress)、市町村 (addressLocality)、州 (addressRegion)、国 (addressCountry) などがあり、国は 2 文字の ISO 3166-1 alpha-2 国コードで記述する必要があります。リスト 9 では、これらのプロパティーを span タグを使用して分割しています。
リスト 9. span タグを使用する
<!-- Event 1: DrupalCamp Toulouse -->
<div itemscope itemtype="http://schema.org/Event">
...
<div itemprop="location" itemscope itemtype="http://schema.org/Place">
<span itemprop="name">ENSEEIHT</span><br />
<span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">Rue Sylvain Dauriac</span><br />
<span itemprop="addressLocality">Toulouse</span>,
<span itemprop="addressRegion">Haute-Garonne</span>,
<span itemprop="addressCountry">FR</span>
</span>
</div>
...
</div>
|
もう一方のイベントの住所も同じ方法で書式を設定することができます。
ここまでで、地図にマーカーを追加する準備が整いました。まずページの microdata を構文解析し、使用可能なオブジェクトにします。そのためには、必要なデータ・ソースはどのタイプの最上位レベル・アイテムなのかを指定します。microdata の最上位レベル・アイテムはルート・アイテムとみなすことができます。つまり最上位レベル・アイテムは他のどのアイテムのプロパティーでもなく、自らプロパティーを持つアイテムです。アイテム・タイプとして http://schema.org/Event を指定します。すると各 Event のオブジェクトが返されます (リスト 10 を参照)。
リスト 10. microdata を構文解析してオブジェクトにする
<script type="text/javascript">
$(function() {
map = $('#map_canvas');
map.gmap().bind('init', function () {
// Process the microdata for each Event into an object.
map.gmap('microdata', 'http://schema.org/Event', function(result, item, index) {
window.console.log(result);
});
});
});
</script>
|
microdata から作成されたオブジェクトが Firefox や Chrome などのブラウザーの JavaScript コンソールに表示されます。microdata の各アイテムは、そのアイテム自身のプロパティー・オブジェクトによってオブジェクトに変換されます。変換されたオブジェクトには、そのアイテムの itemprop の値が含まれています。microdata のプロパティーは複数の値を持つことができるため、itemprop の値は配列として処理されます (図 6 を参照)。
図 6. Google Chrome の JavaScript コンソールでオブジェクトを検証する
このオブジェクトには、イベント・マーカーを配置するための地理座標を取得するために必要なすべてのプロパティーが含まれています。これらのプロパティーの情報を取得するためには、このオブジェクトから住所の部分を抽出し、Google が認識する住所のストリングとして組み合わせます。そして Google のジオコーダーを使用して、その住所の地理座標を取得します。jQuery の UI Map ライブラリーは、ジオコーダーへのリクエストを実行するために使用できるラッパー関数を提供します。
未定義エラーが発生した場合には、含まれているすべての Event に必要なプロパティーがすべて用意できているかどうかを再度確認する必要があります (リスト 11)。
リスト 11. 住所を指定して、ジオコーダーへのリクエストを実行する
<script type="text/javascript">
$(function() {
map = $('#map_canvas');
map.gmap().bind('init', function () {
// Process the Microdata for each Event into an object.
map.gmap('microdata', 'http://schema.org/Event', function(result, item, index) {
// Traverse from the Event to the Place and from the Place to the
// Address to get the properties.
var placeName = result.properties.location[0].properties.name[0];
var streetAddress =
result.properties.location[0].properties.address[0].properties.streetAddress[0];
var city =
result.properties.location[0].properties.address[0].properties.addressLocality[0];
var state =
result.properties.location[0].properties.address[0].properties.addressRegion[0];
var country =
result.properties.location[0].properties.address[0].properties.addressCountry[0];
// Join the address parts into a comma-separated string.
var address = [placeName, city, state, country].join(', ')
// Run the Geocoder request for the address.
map.gmap('search', {'address': address } , function(result, status) {
window.console.log(result);
// We will place the marker here.
});
});
});
});
</script>
|
コンソールで実行結果を見てみると、指定の住所に一致する 1 つ以上の場所がジオコーダーのサービスから返されたことがわかります。最もよく一致しているのは最初の住所なので、最初の住所のみを使います。このオブジェクトには、必要な地理座標の情報を含む geometry プロパティーがあります (リスト 12 を参照)。
リスト 12. マーカーを配置する
<script type="text/javascript">
$(function() {
map = $('#map_canvas');
map.gmap().bind('init', function () {
// Process the Microdata for each Event into an object.
map.gmap('microdata', 'http://schema.org/Event', function(result, item, index) {
// Traverse from the Event to the Place and from the Place to the
// Address to get the properties.
var placeName = result.properties.location[0].properties.name[0];
var streetAddress =
result.properties.location[0].properties.address[0].properties.streetAddress[0];
var city =
result.properties.location[0].properties.address[0].properties.addressLocality[0];
var state =
result.properties.location[0].properties.address[0].properties.addressRegion[0];
var country =
result.properties.location[0].properties.address[0].properties.addressCountry[0];
// Join the address parts into a comma-separated string.
var address = [placeName, city, state, country].join(', ')
// Run the Geocoder request for the address.
map.gmap('search', {'address': address } , function(result, status) {
if (status == google.maps.GeocoderStatus.OK) {
// Create a LatLng object.
var lat = result[0].geometry.location.lat();
var lng = result[0].geometry.location.lng();
var latlng = new google.maps.LatLng(lat, lng);
// Place the marker.
var markerOptions = {
'bounds':true,
'position': latlng
};
map.gmap('addMarker', markerOptions);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
});
});
});
</script>
|
ページをリロードすると、場所を示すマーカーが図 7 のように表示されるはずです。
図 7. 地図上にマーカーが配置される
ユーザーがマーカーをクリックした場合にイベントの詳細 (イベントの日付やイベントへのリンクなど) が表示されるようにすると、地図が一層便利なものになります。この機能を追加するのはそれほど難しくありません。
まず、構文解析した microdata から、イベントに関して必要な追加情報を抽出します (リスト 13 を参照)。
リスト 13. 補足情報を取得する
<script type="text/javascript">
$(function() {
map = $('#map_canvas');
map.gmap().bind('init', function () {
// Process the Microdata for each Event into an object.
map.gmap('microdata', 'http://schema.org/Event', function(result, item, index) {
var eventName = result.properties.name[0];
var logo = result.properties.image[0];
var url = result.properties.url[0];
var start = result.properties.startDate[0];
...
});
});
</script>
|
地図にマーカーを追加する前に、イベントの詳細を含む HTML ブロックを作成します (リスト 14 を参照)。
リスト 14. 情報ウィンドウのための HTML を作成する
// Run the Geocoder request for the address.
map.gmap('search', {'address': address } , function(result, status) {
if (status == google.maps.GeocoderStatus.OK) {
// Create a LatLng object.
var lat = result[0].geometry.location.lat();
var lng = result[0].geometry.location.lng();
var latlng = new google.maps.LatLng(lat, lng);
var eventDetails = '';
eventDetails += '<div class="iw">';
eventDetails += '<img src="'+logo+'"></img>';
eventDetails += '<h2><a href="'+url+'">'+eventName+'</a></h2>';
eventDetails += new Date(start).toDateString();
eventDetails += '</div>';
// Place the marker.
...
|
次に、作成するマーカーにイベントの詳細を追加します。そのマーカーをクリックしたときに実行する必要がある関数を、jQuery の .click を使用して記述します。その関数の中で、jQuery の UI Map ライブラリーに用意されている openInfoWindow ヘルパー関数を使用してウィンドウを作成し、そのウィンドウのコンテンツとして単純に上記の HTML を渡します (リスト 15 を参照)。
リスト 15. クリック・イベントとして情報ウィンドウを追加する
// Place the marker.
...
map.gmap('addMarker', markerOptions).click( function() {
map.gmap('openInfoWindow', { 'content': eventDetails }, this );
});
|
この作業を終えたらリロードして、マーカーをクリックします。するとイベントの詳細が記述されたウィンドウがポップアップ表示されます (図 8 を参照)。
図 8. イベント・マーカーをクリックする
見栄えを良くするために、いくつか CSS ルールを追加します。これらの CSS ルールは、ダウンロード可能なサンプル・コードに追加してあります (「ダウンロード」を参照)。最終的に、図 9 のような地図が表示されます。
図 9. 最終的な地図
microdata を jQuery プラグインとともに使用すると、Web ページ上のデータを (Google マップのデータのように) 動的な方法で容易に扱えるようになります。microdata の仕様では、関連性のないさまざまな Web サイトで microdata を使用することで汎用のスクリプトをプラグインとして使用できることに触れていますが、それ以外にも microdata を使用することで、複数の異なるサイトのデータを組み合わせて新しいアプリケーションを容易に作成できるようになります。次回の記事では、そうしたアプリケーションを Drupal を使用して作成する方法について説明します。
| 内容 | ファイル名 | サイズ | ダウンロード形式 |
|---|---|---|---|
| Article source code | jquerymicrodatapt1_source.zip | 464KB | HTTP |
学ぶために
- 「HTML5 の microdata を活用する: 第 2 回、microdata を使用した次世代のアグリゲーション」(Lin Clark 著、developerWorks、2012年3月): この連載第 2 回の記事では、microdata と Drupal を使用して、分散管理されるサイトを作成することで、連携して作業を行うサイト所有者のグループのメンバーが容易にサイト同士を接続し、中央のサイトでコンテンツを共有する方法について説明します。
- ISO 3166-1 (ウィキペディア): 2 文字の alpha-2 国コードを調べてください。
- schema.org: このスキーマのコレクションについて学んでください。これらの HTML タグを使用することで、主な検索プロバイダーによって認識されるようにページをマークアップすることができます。
- Getting started with schema.org: Schema.org のサイトにあるチュートリアルを通じ、schema.org の用語を配置する方法を学んでください。
- Itemtype URL: Schema.org の itemtype URL (例えば http://schema.org/Movie) を訪れ、どんなプロパティーをアイテムに使用できるのかを学んでください。
- 「セマンティック Web、Linked Data、そして Drupal: 第 1 回 RDF を使ってデータを公開する」(Lin Clark 著、developerWorks、2011年4月): Web データの相互運用性を改善してデータ共有を効率化する方法を学んでください。この記事では一例として、RDF でコンテンツを公開することによって Drupal 7 を使用して Linked Data を公開する方法を解説しています。
- 「セマンティック Web、Linked Data、そして Drupal: 第 2 回 Drupal 7 と SPARQL Views を使って複数の関連するデータ・セットを合成する」(Stéphane Corlosquet と Lin Clark の共著、developerWorks、6月): 「データの Web」で現在使用可能になっている既存の Linked Data を利用する方法、そして複数の異なるエンドポイントからデータを取得して Drupal 7 サイトを強化する方法を学んでください。
- セマンティック Web に関する Scientific American の記事: この大きな影響を与えた記事を読んでください。この記事は Tim Berners-Lee 氏、James Hendler 氏、Ora Lassila 氏によって執筆されたものです。
- Linked Data: Tim Berners-Lee 氏が Linked Dataについて語った ReadWriteWeb のインタビュー記事を読んでください。
- Linked Data の設計上の問題: Linked Data について、Tim Berners-Lee 氏が書いた記事から学んでください。
- 「リッチスニペット (microdata、microformats、RDFa) － ウェブマスター ツール ヘルプ」: Google のリッチ・スニペットについて、またデータ型 (レストランの名前、住所、ランキングなど) を明確に示すためにWeb コンテンツにラベル付けする方法について学んでください。
- 「Implement Semantic web standards in your Web site」(Rob Crowther 著、developerWorks、2008年5月): PHP と MySQL を使用して単純なソーシャル・ネットワーキング・サイトを構築してください。このサイトはセマンティック URI (Uniform Resource Identifier) の仕組みの一部として、hCard や FOAF (Friend of a Friend) などのセマンティック Web 標準を実装しています。
- FOAF Vocabulary Specification 0.98: FOAF 言語について学んでください。FOAF は名前付きプロパティーやクラスの辞書として W3C の RDF 技術を使用して定義されています。
- Dublin Core Metadata Initiative (DCMI): このオープンな組織について学んでください。DCMI は広範な目的やビジネス・モデルをサポートする相互運用可能なメタデータ標準を開発しています。
- SIOC (Semantically-Interlinked Online Communities) Core Ontology Specification: オンライン・コミュニティー (掲示板、ウィキ、ブログなど) の情報をセマンティック Web 上に記述するために必要な中心的概念と性質について学んでください。
- SPARQL Explorer for http://dbpedia.org/sparql: Web 上で利用できるデモ用のクエリー・インターフェースを試してください。
- developerWorks の Web development ゾーン: Web ベースのさまざまなソリューションを解説した記事が豊富に用意されています。
- New to XML には、XML を学ぶために必要なリソースが豊富に用意されています。
- developerWorks の XML ゾーン: DTD、スキーマ、XSLT など、XML の領域でのスキルを磨くためのリソースが豊富に用意されています。XML の技術文書一覧には、広範な話題を網羅した技術記事やヒント、チュートリアル、技術標準、IBM Redbooks が豊富に用意されています。
- IBM XML certification: XML および関連技術において IBM 認定技術者になる方法を参照してください。
- developerWorks の Technical events and webcasts: 最新情報を入手してください。
- developerWorks on Twitter: 今すぐ Twitter に参加して developerWorks のツイートをフォローしてください。
- developerWorks podcasts: ソフトウェア開発者のための興味深いインタビューや議論を聞いてください。
- developerWorks on-demand demos: 初心者のための製品インストール方法やセットアップのデモから、上級開発者のための高度な機能に至るまで、多様な話題が解説されています。
製品や技術を入手するために
- jQuery UI Map: 最新バージョンをダウンロードしてください。そして jQuery のクリック・イベントを地図やマーカーに使用し、microformats、RDFa、microdata による地図をサイトに追加してください。
- Google の Rich Snippets Testing Tool: リッチ・スニペットをテストしてください。
- Google の Rich Snippets Testing Tool: Schema.org のマークアップをテストしてください。
- Live Microdata テスト・ツール: Opera 開発者の Philip Jägenstedt が microdata のテスト用に作成した、もう 1 つのツールを入手してください。
- IBM 製品の評価版: IBM 製品の評価版をダウンロードするか、あるいは IBM SOA Sandbox のオンライン試用版で、DB2、Lotus、Rational、Tivoli、WebSphere などが提供するアプリケーション開発ツールやミドルウェア製品を試してみてください。
議論するために
- developerWorks プロフィール: 今すぐプロファイルを作成し、ウォッチ・リストをセットアップしてください。
- XML ゾーンのディスカッション・フォーラム: これらのフォーラムでは XML に関連する議論が行われています。
- developerWorks コミュニティー: 開発者向けのブログ、フォーラム、グループ、ウィキなどを利用しながら、他の developerWorks ユーザーとやり取りしてください。
目次
タグ
スライダーバーを使用することで、より多く（少なく）タグを表示します。
人気のタグは、この特定のコンテンツ・ゾーン（例えば、Java テクノロジー、Linux や WebSphere など）に対するトップのタグを表示します。
マイ・タグは、この特定のコンテンツ・ゾーン（例えば、Java テクノロジー、Linux や WebSphere など）に対するお客様ご自身のタグを表示します。
記事の人気タグ |
記事のマイ・タグタグ・リストへスキップ
記事の人気タグ |
記事のマイ・タグ