PR

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のWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

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