Silverlightでブログパーツを作ろう!

2008年7月15日(火)
後藤 雄介

APIからデータを取得

 それでは、今度はAPIからデータを取得する部分のコードを実装しましょう。ここでは、アプリケーション起動直後にAPIからデータを取得し、画面に反映するという動きを実装します。

 Page.xaml.csを開き、先ほど追加した自動再生のためのコードの次行に、下記の3行のコードを順に追加します。

WebClient wc = new WebClient();

 1行目では、APIへ接続するためのWebClientsオブジェクトを作成しています。WebClientは、単純な非同期HTTP通信を実装するためのオブジェクトです。

wc.DownloadStringAsync(new Uri("http://dynamic.rakuten.co.jp/rcm/1.0/i/rest?developerId=デベロッパーID&affiliateId=アフィリエイトID&url="+HtmlPage.Document.DocumentUri.ToString()));

 2行目では、作成したWebClientオブジェクトにAPIのURLを渡し、その呼び出しを実行しています。このURL中でデベロッパーID、アフィリエイトIDと記述されている部分にはそれぞれ、自身の楽天デベロッパーIDとアフィリエイトIDを記述してください。末尾のurlパラメータへは、このSilverlightコンテンツが貼付けられるHTMLのURLを渡しています。これにより楽天ダイナミックアドAPIは、このページの中身を解析し、その内容に合った商品情報を渡してくれます。

wc.DownloadStringCompleted += new DownloadStringCompletedEventHandler(wc_DownloadStringCompleted);

 3行目では、サーバから返答が返ってきた際のコールバック関数を登録しています。

データを画面に反映

 最後にコールバック関数を作成して、サーバから返ってきたデータを先ほど作成した画面へと反映します。なお、ここで実装するコードはこちらよりダウンロード(http://www.thinkit.co.jp/images/article/92/3/9232.zip)できます(9232.zip/238 KB)。

 Page.xaml.csを開き、Pageクラスの次行に、コールバック関数「wc_DownloadStringCompleted」を作成してください。引数として、「object sender, DownloadStringCompletedEventArgs e」を取ります。次に、関数内の各行の解説です。

 1行目では、受け取ったStringデータをXDocumentオブジェクトに変換しています。

 2行目以降の「IEnumerable~」では、XDocumentの中からLINQを使用して値を取り出しています。LINQは、Silverlight2の目玉機能のひとつで、XMLクエリやDBクエリなどを共通の構文とインターフェースで記述でき、SQLのように複雑な抽出条件も設定できます。ここでは冗長ではありますが、単純にXMLElementの抽出に使用しています。

 後半のswitch文では、XML要素名に応じて画面の各オブジェクトへの反映を行っています。APIから返される値のうち、ItemNameは商品名ですのでTextBlockへ、SmallImageUrlは商品画像のURLですのでImageオブジェクトへ、そしてAffiliateItemUrlはこのアイテムクリック時のアフィリエイトコード付きURLですので、アイコンクリック時にそのページが開かれるようにそれぞれ記述しています。

 ここまでのコードの実装が完了しましたら、F5キーを押してテストしてみましょう。商品名と商品画像のアイコンがアニメーションしていますでしょうか。また、アイコンクリックで、実際に商品ページへ遷移しますでしょうか。残念ながらアフィリエイトの成果はすぐに確認できませんが、せっかく作ったアプリケーションですし、実際に自分のブログへ貼り付けてしばらく様子を見てみましょう。あるいは1ヶ月後に、それなりに成果が上がっているかもしれません。

 今回は単純なサーバ接続のみの実装でしたが、Silverlightではほかにも用途に応じてWebRequestやWCFなど複数のサーバ接続手段が提供されています。残念ながらExpression Blend単独では実装できず、どうしてもコードが必要にはなってしまいますが、さまざまなサービスを利用することで、単に見た目がリッチなだけでなく、実用としての応用の幅も広げられますので、ぜひいろいろ試してみてください。

株式会社アゼスト
UX・情報アーキテクト。広く・浅く・普くをキーワードに、クライアントサイド・サーバサイドの様々なテクノロジーを囓り散らす。UXとアーキテクチャを主軸に、アプリケーション開発における上流設計を専門とする。またその傍ら、マラソンやトライアスロンを趣味とし、日々トレーニングに勤しむ。http://www.azest.co.jp/

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています