地図とオンラインOSの関係（後編）：Windows Liveが魅せる次世代マッシュアップ（3/5 ページ）
“マッシュアップの面白さは手軽さにある”。Webページを作る感覚でJavaScriptを使い、地図を自由に利用する醍醐味は？ この記事では、Virtual Earth（地図）とWindows Messenger（メッセンジャー）のマッシュアップを紹介しよう。
ここまでの説明から分かるように、Live Contacts Controlは、連絡先情報をWebアプリケーションに渡す仕組みであり、例えばショッピングサイトを構築する際に、「配送先」などを入力する場面で便利に使えそうなものだといえるだろう。
なお、Live Contacts Controlは、どのようなWebサイトにも配置できる。つまり、ショッピングサイトをすでに運用しているならば、そのHTML内にリスト4で示したコードを埋め込むだけで、注文のたびに配送先を手入力しなくても済むという利便性をユーザーに与えることができるだろう。
Live Contacts Controlを使った情報のやり取り
動きが分かったところで、リスト4に示したコードを説明していこう。Live Contacts Controlを使うには、次のようにすればよい。
ここでは、主要な使い方とプロパティのみの説明となる。すべてのプロパティについては、API Reference（http://dev.live.com/contactscontrol/v0.2/api.aspx）を参考にしてほしい。
1）channel.htmを同じディレクトリに配置する
Live Contacts Controlを使うにあたっては、channel.htmというファイルを、Webアプリケーションと同じディレクトリに配置しなければならない。このソースは、http://dev.live.com/scripts/channel/v0.1/channel.htm からダウンロードできるので、それを配置する。
channel.htmは、Live.com側から呼び出されるため、インターネットから参照可能なWebサーバに配置する必要がある。つまり、ローカル環境で動作させることはできないということだ。
なお、channel.htmというファイル名は、別のファイル名でも構わない。後述する、devlive:channelEndpointURL属性で名前を指定することになるためだ。
2）名前空間の指定
Live Contacts Controlを使う場合には、html要素に名前空間を指定する。その表記は次のようになる。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
3）Live Contacts Controlを読み込む
Live Contacts Controlのソースは、2本に分かれている。次のようにして、それぞれを読み込めばよい。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
4）コントロールを埋め込む
Live Contacts Controlは、「devlive:contactscontrol」という要素で示される（この名前空間は、上記の手順「2）」で定義したものだ）。リスト4では、次のように記述している。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
この中でstyle属性は、いわゆるCSSスタイルシートであり、位置やサイズを指定するものだ。ここでの解説は省略するが、devlive:*の属性が動作を決めるものだ。
・devlive:privacyStatementURL
プライバシーポリシーの表示文のURLを示す。
これは、画面7に示した確認画面において、プライバシーポリシーのリンク先として使われるものである。内容はどのようなものであっても構わない。
リスト4では、例としてexample.comドメインにしてあるが、もちろん、実際には、あらかじめ用意しておいたプライバシーポリシーのリンク先に合わせるようにしよう。
・devlive:channelEndpointURL
上記手順の「1）」で配置したchannel.htmのURLを指定する。繰り返すようだが、channel.htmは、同じディレクトリに配置しなければならない。リスト4では、example.comドメインにしてあるが、これも実際のWebサイトのURLに合わせる必要がある。
・devlive:Desired
連絡先情報として受け取りたい属性をカンマ「,」で区切って指定する。
ここでは、「name,personalState,personalCity,personalStreet」を指定し、「名前」「個人番地」「個人市区町村」「個人都道府県」を受け取るようにした。
ほかにも多くの属性が用意されている。すべての属性については、API Referenceを参照してほしい。
なお、devlive:Desired属性では、大文字小文字の区別はされないようだ。しかし、後述するonDataイベントの処理においては、受け取った連絡先の属性名の大文字小文字を区別するので注意してほしい。
・devlive:market
コントロールの言語情報を示す。日本語であれば「jp」を指定する。
・onData
ユーザーから連絡先情報が送信されたときに、これを受け取るコールバック関数を指定する。コールバック関数には、ユーザーが送信した連絡先情報が配列として渡される。例えば、次の通りだ。
Copyright © ITmedia, Inc. All Rights Reserved.