地図とオンラインOSの関係（後編）：Windows Liveが魅せる次世代マッシュアップ（3/5 ページ）

» 2007年02月22日 08時00分 公開
[大澤文孝，ITmedia]
前のページへ 1|2|3|4|5 次のページへ
画面8■Webアプリケーションに渡された情報

　ここまでの説明から分かるように、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要素に名前空間を指定する。その表記は次のようになる。


<html xmlns:devlive="http://dev.live.com">

3）Live Contacts Controlを読み込む

　Live Contacts Controlのソースは、2本に分かれている。次のようにして、それぞれを読み込めばよい。


<script language="JavaScript"
  src="http://dev.live.com/scripts/base/v0.2/live.js">
</script>
<script language="JavaScript"
  src="http://dev.live.com/scripts/contacts/v0.2/control.js">
</script>

4）コントロールを埋め込む

　Live Contacts Controlは、「devlive:contactscontrol」という要素で示される（この名前空間は、上記の手順「2）」で定義したものだ）。リスト4では、次のように記述している。


<devlive:contactscontrol
  style="width:180px; height=240px;float:right;"
  devlive:privacyStatementURL= 
    "http://example.com/privacy.htm"
  devlive:channelEndpointURL=
    "http://example.com/channel.htm"
  devlive:dataDesired=
    "name,personalState,personalCity,personalStreet"
  devlive:market="jp"
  devlive:onData="onData">
</devlive:contactscontrol>

　この中で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

　ユーザーから連絡先情報が送信されたときに、これを受け取るコールバック関数を指定する。コールバック関数には、ユーザーが送信した連絡先情報が配列として渡される。例えば、次の通りだ。

前のページへ 1|2|3|4|5 次のページへ

Copyright © ITmedia, Inc. All Rights Reserved.

注目のテーマ