次に、ソリューションエクスプローラー内のMainWindow.xamlを展開して表示される、MainWindow.xaml.vbをダブルクリックしてリスト4のコードを記述します。
ロジックコードを記述する
リスト4 (MainWindow.xaml.vb)
最新のHTTPアプリケーション用のプログラミングインターフェイスを提供するクラスの含まれる、System.Net.Http名前空間をインポートします。
3 | Imports Windows.UI.Popups |
genreIdInfoクラス内に文字列型の「title」プロパティを定義しておきます。
1 | Public Class genreIdInfo |
2 | Public Property title As String |
4 | Public NotInheritable Class MainPage |
XMLの要素を表すXElementクラス型のメンバ変数xmldocを宣言します。
3 | Dim selectGenreID As String |
ページがアクティブになった時の処理
XElement.LoadメソッドでXML文書(RakutenGenreId.xml)を読み込みます。
genreIdInfoクラス型の新しいリストである、titleListオブジェクトを作成します。
Descendantsメソッドで全ての子孫要素に対して、その内容を変数resultに格納しながら、以下の処理を行います。
genreIdInfoクラスのtitleプロパティに要素の属性”title”の値を指定し、AddメソッドでtitleListオブジェクトに追加していきます。
GridViewのItemsSourceプロパティにtitleList1オブジェクトを指定します。ジャンルの一覧が表示されます。
1 | Protected Overrides Sub OnNavigatedTo(e As Navigation.NavigationEventArgs) |
2 | xmldoc = XElement.Load("RakutenGenreId.xml") |
3 | Dim titleList As New List(Of genreIdInfo) |
4 | For Each result In From c In xmldoc.Descendants("genreId") Select c |
5 | titleList.Add(New genreIdInfo With {.title = result.Attribute("title").Value}) |
7 | GridView1.ItemsSource = titleList |
ジャンルの一覧から任意のジャンルを選択した時の処理
マウスの右クリックで表示されるバーに配置されているsearchTextBoxのReadOnlyプロパティにFalseを指定して、入力可能な状態にし、フォーカスを持たせます。
「Yes」ボタンの使用を可能にします。
メンバ変数selectGenrdIDに、GridViewの選択された項目のインデックスに対応する要素の値を格納します。
「101240(CD,DVD,楽器のジャンルを選択した場合)」のよう数値文字列が格納されます。
1 | Private Sub GridView1_SelectionChanged(sender As Object, e As SelectionChangedEventArgs) Handles GridView1.SelectionChanged |
2 | searchTextBox.IsReadOnly = False |
3 | searchTextBox.Text = String.Empty |
4 | searchTextBox.Focus(Windows.UI.Xaml.FocusState.Pointer) |
5 | okButton.IsEnabled = True |
6 | selectGenreID = xmldoc.Descendants("genreId")(GridView1.SelectedIndex).Value |
マウスの右クリックで表示されるバーに配置された「Yes」ボタンがタップされた時の処理
検索項目がきちんと入力されていた場合の処理です。
myFrameを表示状態にし、searchTextBoxの編集を不可とし、「Yes」ボタンの使用を不可とします。
メンバ変数sendDataにsearchTextBoxに入力された値と、メンバ変数selectGenreIDが格納している値を、カンマで区切って格納します。バーであるAppBar1を非表示にし、Navigateメソッドで、sendDataを引数にして、SearchResultPageに遷移します。
検索項目が入力されていなかった場合は、警告メッセージを表示し、searchTextBoxの入力を可能に、「Yes」ボタンの使用を可能にして処理を抜けます。
01 | Private Async Sub okButton_Click(sender As Object, e As RoutedEventArgs) Handles okButton.Click |
02 | If searchTextBox.Text<>String.Empty Then |
03 | myFrame.Visibility = Windows.UI.Xaml.Visibility.Visible |
04 | searchTextBox.IsReadOnly = True |
05 | okButton.IsEnabled = False |
06 | sendData = searchTextBox.Text& "," &selectGenreID |
07 | AppBar1.Visibility = Windows.UI.Xaml.Visibility.Collapsed |
08 | myFrame.Navigate(GetType(SearchResultPage), sendData) |
10 | Dim message As New MessageDialog("検索項目を入力してください。") |
11 | Await message.ShowAsync |
12 | searchTextBox.IsReadOnly = False |
13 | okButton.IsEnabled = True |
14 | sendData = String.Empty |
戻る(←)アイコンがタップされた時の処理
ジャンルが選択されている場合は、searchTextBoxの入力を可能に、「Yes」ボタンの使用を可能にします。それ以外は、searchTextBoxの入力は不可、「Yes」ボタンの使用も不可としておきます。
Appbarを表示状態にし、myFrameを非表示にします。ジャンルの一覧が表示されたページが現れます。
01 | Private Sub backButton_Click(sender As Object, e As RoutedEventArgs) Handles backButton.Click |
02 | If GridView1.SelectedIndex >= 0 Then |
03 | searchTextBox.IsReadOnly = False |
04 | okButton.IsEnabled = True |
06 | searchTextBox.IsReadOnly = True |
07 | okButton.IsEnabled = False |
09 | AppBar1.Visibility = Windows.UI.Xaml.Visibility.Visible |
10 | myFrame.Visibility = Windows.UI.Xaml.Visibility.Collapsed |
次に、ソリューションエクスプローラー内のSearchResultPage.xamlを展開して表示される、SearchResultPage.xaml.vbをダブルクリックしてリスト5のコードを記述します。
ロジックコードを記述する
リスト5 (SearchResultPage.xaml.vb)
1 | Public NotInheritable Class WebBrowserPage |
6 | Imports Windows.UI.Popups |
ProductInfoクラス内に文字列型の「画像」、「商品名」、「価格」、「サイト」というプロパティを定義しておきます。
1 | Public Class ProductInfo |
2 | Public Property 画像 As String |
3 | Public Property 商品名 As String |
4 | Public Property 価格 As String |
5 | Public Property サイト As String |
7 | Public NotInheritable Class SearchResultPage |
文字列型定数メンバ変数AppIDを宣言し、Yahooより取得したApplicationIdで初期化しておきます。
1 | ConstAppID As String = "Yahooより取得したApplicationId" |
ページがアクティブになった時の処理
MainPage.xamlより渡された値は、e.Parameterで取得できます。これはObject型であるため、DirectCastで文字列型にキャストして、変数myGetDataに格納しておきます。
変数myGetDataに格納されている値は、カンマで区切られているため、配列変数searchItemを宣言し、Split関数を使って、カンマで区切られた、それぞれの値を取得して、格納しておきます。
変数mySortにエスケープ表現された+itemPrice(価格順でソート)といった文字列を格納しておきます。
変数myUriに「楽天商品検索API2(Version:2012-07-23)」で提供される、リクエストURLを格納します。
applicationIdには定数メンバ変数AppIDの値を、keywordには、配列変数searchItem(0)の値をエスケープ表現した値、これは検索ボックスに入力した値、を指定します。sortには変数mySortの値を、genreIdにはsearchItem(1)の値、これはリスト1のXML文書内の、要素の値、を指定します。formatにはxmlをしていします。jsonの指定もできます。
新しいHttpClientのインスタンスmyHttpClient オブジェクトを作成します。GetStringAsyncメソッドで、変数myUriから返される結果XMLを取得して変数myResponseに格納します。
XElement.ParseメソッドでmyResponse変数の内容を文字列として読み込ます。
ProductInfoクラスの新しいリストであるmyProductInfoオブジェクトを作成します。
ProductInfoクラスの画像プロパティに要素の値を、商品名プロパティに、要素の値を、価格プロパティに、三桁区切りで「円」を連結した要素の値を、サイトプロパティに、要素の値を指定して、AddメソッドでmyProductInfoオブジェクトに追加していきます。出力パラメータについては、下記のURLを参照してください。
→ 楽天商品検索API
GridViewのItemsSourceプロパティにmyProductInfoオブジェクトを指定します。これで、検索結果の情報がタイルで一覧表示されます。
01 | Protected Overrides AsyncSub OnNavigatedTo(e As Navigation.NavigationEventArgs) |
02 | Dim myGetData As String = DirectCast(e.Parameter, String) |
03 | Dim searchItem() As String = myGetData.Split(CChar(",")) |
04 | Dim mySort As String = Uri.EscapeDataString("+itemPrice") |
06 | Dim myHttpClient As New HttpClient |
07 | Dim myResponse = Await myHttpClient.GetStringAsync(New Uri(myUri, UriKind.Absolute)) |
08 | Dim xmldoc As XElement = XElement.Parse(myResponse) |
10 | Dim myProductInfo As New List(Of ProductInfo) |
11 | For Each result In From c In xmldoc.Descendants("Item") Select c |
13 | .Add(New ProductInfo With {.画像 = result.Element("mediumImageUrls").Value, |
14 | .商品名 = result.Element("itemName").Value, |
15 | .価格 = String.Format("{0:n0}円", Integer.Parse(result.Element("itemPrice").Value)), |
16 | .サイト = result.Element("itemUrl").Value}) |
19 | GridView1.ItemsSource = myProductInfo |
任意のタイルを選択した時の処理
myFrameを表示状態にします。
変数myUriにGridViewより選択された項目を、DirectCastでProductInfoクラスにキャストして、そのサイトプロパティの値を取得して格納します。
Navigateメソッドで、変数myUriを引数に、WebBrowserPageに遷移します。
1 | Private Async Sub GridView1_SelectionChanged(sender As Object, e As SelectionChangedEventArgs) Handles GridView1.SelectionChanged |
2 | myFrame.Visibility = Windows.UI.Xaml.Visibility.Visible |
3 | Dim myUri = DirectCast(GridView1.SelectedItem, ProductInfo).サイト |
4 | myFrame.Navigate(GetType(WebBrowserPage), myUri) |
戻る(←)アイコンがタップされた時の処理
myFrameを非表示にします。タイルの一覧が表示されているページが表示されます。
1 | Private Sub backButton_Click(sender As Object, e As RoutedEventArgs) Handles backButton.Click |
2 | myFrame.Visibility = Windows.UI.Xaml.Visibility.Collapsed |
次に、ソリューションエクスプローラー内のWebBrowserPage.xamlを展開して表示される、WebBrowserPage.xaml.vbをダブルクリックしてリスト6のコードを記述します。
ロジックコードを記述する
リスト6 (WebBrowserPage.xaml.vb)
2 | Public NotInheritable Class WebBrowserPage |
ページがアクティブになった時の処理
SearchResultPage.xamlより渡された値は、e.Parameterで取得できます。これはObject型であるため、DirectCastで文字列にキャストして、変数myUriに格納します。
WebBrowserのSourceプロパティに、変数myUriで初期化された新しいUriを指定します。ブラウザ内に指定したページが表示されます。
1 | Protected Overrides Sub OnNavigatedTo(e As Navigation.NavigationEventArgs) |
2 | Dim myUri = DirectCast(e.Parameter, String) |
3 | WebBrowser1.Source = New Uri(myUri, UriKind.Absolute) |
アイコンの作成
ソリューションエクスプローラーのAssetsフォルダ内には、4つのpngファイルが入っています（表1）。
表1：Assetsフォルダ内に入っているpngファイルの種類
| ファイル名 |
サイズ |
| Logo.png |
150×150 |
| SmallLogo.png |
30×30 |
| SplashScreen.png |
620×300 |
| StoreLogo.png |
50×50 |
表1の画像はデフォルトでは、□に×の画像になっています。ストアの審査では、このままの画像では審査に受かりませんので、4種類のアイコンを作る必要があります。このサンプルは実際にストアで審査の通ったアプリですので、Assetsフォルダ内には筆者の作成したアイコンが収められていますので、見てみてください。
SplashScreen.pngはアプリを起動した際に、一瞬最初に表示される画像です。スタート画面にピン止めされる画像はデフォルトでは150×150のLogo.pngが使用されます。これを長方形の画像にしたい場合は、310×150サイズのpng画像を作成し、WideLogo.png(任意の名前でOK)としてAssetsフォルダに追加しておきます。
詳細については、「自分の現在位置を取得して表示するサンプルプログラム」の記事を参照してください。
今回はここまでです。ありがとうございました。
