HTML5 の microdata を活用する: 第 1 回、microdata に対して jQuery を使用する

jQuery の UI Map プラグインと microdata を使用してインタラクティブな地図を作成する

microdata の仕様には microdata を使用する理由が 2 つ挙げられています。1 つは microdata を使用することで、カスタマイズされたサービスを汎用のスクリプトによって Web ページに提供できるようになるからであり、もう 1 つは協力作業に伴う多様な作成者のコンテンツを 1 つのスクリプトによる一貫した方法で処理できるようになるからです。全 2 回からなる連載記事では、この 2 つの目的で microdata を使用する方法を説明します。まず始めに、microdata を使用することによって汎用のスクリプトを適用する方法を取り上げます。今回の記事では 1 つの HTML スニペットを作成します。この HTML スニペットはインタラクティブなイベント・マップを提供すると同時に、リッチ・スニペットを利用することによって Google、Bing、Yahoo に表示される皆さんの Web ページの検索結果を効果的なものにします。

2012年 3月06日 ― この記事の第 2 回へのリンクを「はじめに」と「まとめ」に囲み記事として追加し、「参考文献」にも新しい項目として追加しました。

Lin Clark, Drupal Developer, Digital Enterprise Research Institute, NUI Galway

Author photoLin Clark は、Linked Data を専門とする Drupal 開発者です。Microdata や SPARQL Views など、複数の Drupal モジュールの保守を担当し、W3C HTML Data Task Force および Drupal の HTML5 イニシアチブに積極的に参加しています。カーネギー・メロン大学で教育を受けた彼女は、アイルランド国立大学ゴールウェイ校の Digital Enterprise Research Institute でリサーチ修士課程を終えようとしています。詳細については、lin-clark.com にアクセスしてください。



2012年 4月 05日 (初版 2011年 12月 16日)

はじめに

jQuery などのライブラリーによって、開発者がサイトを作成する方法に革命的な変化が起こり、HTML で記述されたページにそのまま追加するだけですぐに使用できるスクリプトが大量に開発されています。microdata は、この革命をさらに一歩進める可能性を秘めています。microdata を利用すると、HTML テンプレートのバリエーションとは無関係に、どのサイトでもシームレスに動作するスクリプトを容易に作成することができます。

よく使われる頭文字語

  • CSV: Comma Separated Value
  • JSON: JavaScript Object Notation
  • RDF: Resource Description Framework
  • RDFa: RDF in attributes
  • SEO: Search Engine Optimization

例えば、計画しているイベントを地図上に表示する場合、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&rsquo;attendiez tous, le DrupalCamp Toulouse aura bien lieu, 
r&#233;uni avec 2 autres &#233;v&#233;nements sous la bannière 
"Capitole du Libre": le DrupalCamp, une Ubuntu Party, une Akademy 
(&#233;v&#232;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> &ndash;
        <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&rsquo;s first Drupalcamp. On Saturday, December 3rd, we&rsquo;ll hold an 
all-day camp with keynote speaker, breakout sessions and Birds of Feather groups at The 
Ohio State University&rsquo;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> &ndash;
        <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 つのイベントを表示した基本的なページ
2 つのイベントを表示した基本的なページのスクリーン・キャプチャー

イベントをリッチ・スニペット対応にする

time 要素を持つページには、コンピューターにとって理解可能な情報が少し含まれています。この追加情報によって Google に表示される結果がどのように変化したかを調べてみましょう。Google の Rich Snippets Testing Tool のサイトにアクセスし、皆さんの Web ページの URL を入力します (その結果は、図 2 を参照)。すると、イベントの詳細が表示される代わりにプレビュー生成エラーが表示され、作成者のマークアップやリッチ・スニペットのマークアップ、あるいは作成者の情報が含まれていないことが示されます。

図 2. Rich Snippets Testing Tool で基本的な HTML のページを指定してもプレビューが生成されなかった様子
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> &ndash;
    <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> &ndash;
    <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 を参照してください。


jQuery の UI Map を追加する

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 を使用して場所を追加する

地図にマーカーを追加する前に、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 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. 最終的な地図
2 つのイベント・マーカーと 1 つのポップアップ・ウィンドウ、そしてイベントの完全な詳細が表示された最終的な地図のスクリーン・キャプチャー

まとめ

microdata を jQuery プラグインとともに使用すると、Web ページ上のデータを (Google マップのデータのように) 動的な方法で容易に扱えるようになります。microdata の仕様では、関連性のないさまざまな Web サイトで microdata を使用することで汎用のスクリプトをプラグインとして使用できることに触れていますが、それ以外にも microdata を使用することで、複数の異なるサイトのデータを組み合わせて新しいアプリケーションを容易に作成できるようになります。次回の記事では、そうしたアプリケーションを Drupal を使用して作成する方法について説明します。


ダウンロード

内容ファイル名サイズ
Article source codejquerymicrodatapt1_source.zip464KB

参考文献

学ぶために

製品や技術を入手するために

議論するために

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=XML, Open source, Web development
ArticleID=780459
ArticleTitle=HTML5 の microdata を活用する: 第 1 回、microdata に対して jQuery を使用する
publish-date=04052012