戻る(←)アイコンがタップされた時の処理
myFrameを非表示にします。都道府県の一覧が表示されることになります。
Private Sub backButton1_Click(sender As Object, e As RoutedEventArgs) Handles backButton1.Click
myFrame.Visibility = Windows.UI.Xaml.Visibility.Collapsed
End Sub
End Class
次に、ソリューションエクスプローラー内のPartyDataShowPage.xamlを展開して表示される、PartyDataShowPage.xaml.vbをダブルクリックしてリスト5のコードを記述します。
ロジックコードを記述する
リスト5 (PartyDataShowPage.xaml.vb)
Option Strict On
最新のHTTPアプリケーション用のプログラミングインターフェイスを提供するクラスの含まれる、System.Net.Http名前空間をインポートします。
Imports System.Net.Http
Imports Windows.UI.Popups
PartyInfoクラス内に、文字列型の、「Title(パーティ名)」、「Place(開催場所)」、「myDate(日時)」、「ReserveMan(男性予約状況)、「ReserveWoman(女性予約状況)」、「AgeMan(男性年齢対象)」、「AgeWoman(女性年齢対象)」、「Url(ページのURL)」、「AreaName(エリア名)」、「Article(内容)」、「no」のプロパティを定義しておきます。
Public Class PartyInfo
Public Property Title As String
Public Property Place As String
Public Property myDate As String
Public Property ReserveMan As String
Public Property ReserveWoman As String
Public Property AgeMan As String
Public Property AgeWoman As String
Public Property Url As String
Public Property AreaName As String
Public Property Article As String
Public Property no As String
End Class
Public NotInheritable Class PartyDataShowPage
Inherits Page
XML要素を表すメンバ変数xmldocを宣言します。
Dim xmldoc As XElement
Dim Index As Integer = 0
Dim prefIndex As Integer
ページがアクティブになった時の処理
WebBrowserを非表示に、GridViewを表示状態にします。
MainPage.xamlから送られた値は、e.Parameterで取得できます。これはObject型であるため、DirectCastでIntegerにキャストしてメンバ変数prefIndexに格納しておきます。
1~47までの都道府県に該当する番号が格納されます。
変数myUriに「お見合いパーティAPI」のリクエストURLを格納します。prefにメンバ変数prefIndexの値を指定します。
新しい、HttpClientのインスタンス、myHttpClientオブジェクトを作成します。
GetStringAsyncメソッドで、指定URI(myUri)にGET要求を送信し、非同期操作で応答本体を文字列として取得し、変数resultXmlに格納します。
返ってきた結果XMLには不要な名前空間や、文字が含まれていますので、それらをReplace関数で消します。
XElement.ParseメソッドでresultXmlを文字列として読み込みます。
PartyInfoクラス型の新しいリストであるmyPartyInfoオブジェクトを作成します。
Descendantsメソッドで全ての要素に対して、その内容をresultに格納しながら、以下の処理を行います。
PartyInfoクラスの以下のそれぞれの値を、noプロパティに1ずつ増加するメンバ変数Indexの値を文字列に変換して指定します。
Titleプロパティに
要素の値<br>
Placeプロパティに文字列「開催場所」と<place>要素の値を連結した値<br>
myDateプロパティに、文字列「日時」と<date>要素の値を連結した値<br>
ReserveManプロパティに、文字列「男性」と<reserveman>要素の値を連結した値<br>
ReserveWomanプロパティに、文字列「女性」と<reservewoman>要素の値を連結した値<br>
AgeManプロパティに、文字列「男性対象年齢」と<ageman>要素の値を連結した値<br>
AgeWomanプロパティに、文字列「女性対象年齢」と<agewoman>要素の値を連結した値<br>
Urlプロパティに、<url>要素の値<br>
AreaNameプロパティに、文字列「エリア」と<areaname>要素の値を連結した値<br>
Articleプロパティに、文字列「内容」と<article>要素の値を連結した値<br>
これらをAddメソッドでmyPartyInfoオブジェクトに追加していきます。
<p>GridViewのItemsSourceプロパティにmyPartyInfoオブジェクトを指定します。パーティの情報がタイルで一覧表示されます。</p>
<pre class="brush: plain; " type="syntaxhighlighter"><code class="hilightjs"> Protected Overrides Async Sub OnNavigatedTo(e As Navigation.NavigationEventArgs)
WebBrowser1.Visibility = Windows.UI.Xaml.Visibility.Collapsed
GridView1.Visibility = Windows.UI.Xaml.Visibility.Visible
prefIndex = DirectCast(e.Parameter, Integer)
Dim myUri = String.Format("http://omiai-party.jp/top/api/get?format=xml&pref={0}&start=0", prefIndex)
Dim myHttpClient As New HttpClient
Dim resultXml = Await myHttpClient.GetStringAsync(myUri)
resultXml = resultXml.Replace("xmlns=" &ChrW(34) & "urn:apli-maker:com:api" &ChrW(34) & " xmlns:xsi=" &ChrW(34) & "http://www.w3.org/2001/XMLSchema-instance" &ChrW(34), "")
resultXml = resultXml.Replace("»", "")
resultXml = resultXml.Replace("«", "")
resultXml = resultXml.Replace("&", "")
Index = 0
xmldoc = XElement.Parse(resultXml)
Dim myPartyInfo As New List(Of PartyInfo)
For Each result In From c In xmldoc.Descendants("Result") Select c
myPartyInfo.Add(New PartyInfo With {.Title = result.Element("Title").Value,
.Place = "【開催場所】=" &result.Element("Place").Value,
.myDate = "【日時】=" &result.Element("Date").Value,
.ReserveMan = "【男性】=" &result.Element("ReserveMan").Value,
.ReserveWoman = "【女性】=" &result.Element("ReserveWoman").Value,
.AgeMan = "【男性対象年齢】=" &result.Element("AgeMan").Value,
.AgeWoman = "【女性対象年齢】=" &result.Element("AgeWoman").Value,
.Url = result.Element("Url").Value,
.AreaName = "【エリア】=" &result.Element("AreaName").Value,
.Article = "【内容】=" &result.Element("Article").Value,
.no = CStr(Index)})
Index += 1
Next
GridView1.ItemsSource = myPartyInfo
End Sub
</code></pre>
<h4>「Webで詳細を表示」ボタンがクリックされた時の処理</h4>
<p>戻る(←)アイコンを表示します。WebBrowserを表示状態にします。GridViewを非表示にします。</p>
<p>Buttonの情報を保持しているsenderオブジェクトをDirectCastでButtonにキャストして、そのTagプロパティの値を取得して変数myIndexに格納しておきます。</p>
<p>変数myUriに、数値にキャストした変数myIndexに位置する<result>要素の子要素<url>の値を取得して格納します。</url></result></p>
<p>PCの解像度が1920×1080であった場合は、WebViewの幅を1700、高さを1080に指定します。</p>
<p>WebBrowserのSourceプロパティに、変数myUriで初期化された新しいUriを指定します。これで、WebBrowserの中に、選択したパーティの詳細情報が表示されます。このコード内でもPCの解像度を取得していますが、前述したようにXAML内の<grid>要素を<viewbox>で括れば、解像度を取得するコードは不要です。</viewbox></grid></p>
<pre class="brush: plain; " type="syntaxhighlighter"><code class="hilightjs"> Private Sub DetailsDataShow(sender As Object, e As RoutedEventArgs)
backButton2.Visibility = Windows.UI.Xaml.Visibility.Visible
WebBrowser1.Visibility = Windows.UI.Xaml.Visibility.Visible
GridView1.Visibility = Windows.UI.Xaml.Visibility.Collapsed
Dim myIndex = DirectCast(sender, Button).Tag
Dim myUri = xmldoc.Descendants("Result")(CInt(myIndex)).Element("Url").Value
Dim myWidth = CInt(Window.Current.CoreWindow.Bounds.Width)
Dim myHeight = CInt(Window.Current.CoreWindow.Bounds.Height)
If myWidth = 1920 AndAlsomyHeight = 1080 Then
WebBrowser1.Width = 1700
WebBrowser1.Height = 1080
End If
WebBrowser1.Source = New Uri(myUri)
End Sub
</code></pre>
<h4>戻る(←)アイコンがタップされた時の処理</h4>
<p>WebBrowserを非表示にします。GridViewを表示状態にします。<br>
WebBrowserと一緒に表示されていた、「戻る(←)」アイコンを非表示にします。パーティのデータがタイルで表示される画面になります。</p>
<pre class="brush: plain; " type="syntaxhighlighter"><code class="hilightjs"> Private Sub backButton2_Click(sender As Object, e As RoutedEventArgs) Handles backButton2.Click
WebBrowser1.Visibility = Windows.UI.Xaml.Visibility.Collapsed
GridView1.Visibility = Windows.UI.Xaml.Visibility.Visible
backButton2.Visibility = Windows.UI.Xaml.Visibility.Collapsed
End Sub
End Class
</code></pre>
<h3>アイコンの作成</h3>
<p>ソリューションエクスプローラーのAssetsフォルダ内には、4つのpngファイルが入っています(表1)。</p>
<h4>表1:Assetsフォルダ内に入っているpngファイルの種類</h4>
<table cellspacing="5" style="width: 636px;">
<tbody>
<tr>
<th>ファイル名</th>
<th>サイズ</th>
</tr>
<tr class="even">
<td>Logo.png</td>
<td>150×150</td>
</tr>
<tr>
<td>SmallLogo.png</td>
<td>30×30</td>
</tr>
<tr class="even">
<td>SplashScreen.png</td>
<td>620×300</td>
</tr>
<tr>
<td>StoreLogo.png</td>
<td>50×50</td>
</tr>
</tbody>
</table>
<p>表1の画像はデフォルトでは、□に×の画像になっています。ストアの審査では、このままの画像では審査に受かりませんので、4種類のアイコンを作る必要があります。このサンプルは実際にストアで審査の通ったアプリですので、Assetsフォルダ内には筆者の作成したアイコンが収められていますので、見てみてください。</p>
<p>SplashScreen.pngはアプリを起動した際に、一瞬最初に表示される画像です。スタート画面にピン止めされる画像はデフォルトでは150×150のLogo.pngが使用されます。これを長方形の画像にしたい場合は、310×150サイズのpng画像を作成し、WideLogo.png(任意の名前でOK)としてAssetsフォルダに追加しておきます。<br>
詳細については、「<a href="http://thinkit.co.jp/story/2013/06/26/4142" target="_blank">自分の現在位置を取得して表示するサンプルプログラム</a>」の記事を参照してください。</p>
<p>今回はここまでです。ありがとうございました。</p>
<h3>筆者からのお知らせ</h3>
<p>筆者はWindowsストアでアプリを公開しています。チャームの検索からWindowsストアを選択して、検索欄に、kuniyasuまたはYakushijiKuniyasuまたはeightmanと入力すると、公開されているアプリの一覧が表示されます。上記はどちらも私のアカウントですので、興味のある方は是非ダウンロードして使ってみてください。</p>
</article></areaname></url></agewoman></ageman></reservewoman></reserveman></date></place>