婚活に使えるお見合いパーティ検索アプリを作る
戻る(←)アイコンがタップされた時の処理
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メソッドで全ての
PartyInfoクラスの以下のそれぞれの値を、noプロパティに1ずつ増加するメンバ変数Indexの値を文字列に変換して指定します。
Titleプロパティに
Placeプロパティに文字列「開催場所」と
myDateプロパティに、文字列「日時」と
ReserveManプロパティに、文字列「男性」と
ReserveWomanプロパティに、文字列「女性」と
AgeManプロパティに、文字列「男性対象年齢」と
AgeWomanプロパティに、文字列「女性対象年齢」と
Urlプロパティに、
AreaNameプロパティに、文字列「エリア」と
Articleプロパティに、文字列「内容」と
これらをAddメソッドでmyPartyInfoオブジェクトに追加していきます。
GridViewのItemsSourceプロパティにmyPartyInfoオブジェクトを指定します。パーティの情報がタイルで一覧表示されます。
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
「Webで詳細を表示」ボタンがクリックされた時の処理
戻る(←)アイコンを表示します。WebBrowserを表示状態にします。GridViewを非表示にします。
Buttonの情報を保持しているsenderオブジェクトをDirectCastでButtonにキャストして、そのTagプロパティの値を取得して変数myIndexに格納しておきます。
変数myUriに、数値にキャストした変数myIndexに位置する
PCの解像度が1920×1080であった場合は、WebViewの幅を1700、高さを1080に指定します。
WebBrowserのSourceプロパティに、変数myUriで初期化された新しいUriを指定します。これで、WebBrowserの中に、選択したパーティの詳細情報が表示されます。このコード内でもPCの解像度を取得していますが、前述したようにXAML内の
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
戻る(←)アイコンがタップされた時の処理
WebBrowserを非表示にします。GridViewを表示状態にします。
WebBrowserと一緒に表示されていた、「戻る(←)」アイコンを非表示にします。パーティのデータがタイルで表示される画面になります。
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
アイコンの作成
ソリューションエクスプローラーの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フォルダに追加しておきます。
詳細については、「自分の現在位置を取得して表示するサンプルプログラム」の記事を参照してください。
今回はここまでです。ありがとうございました。
筆者からのお知らせ
筆者はWindowsストアでアプリを公開しています。チャームの検索からWindowsストアを選択して、検索欄に、kuniyasuまたはYakushijiKuniyasuまたはeightmanと入力すると、公開されているアプリの一覧が表示されます。上記はどちらも私のアカウントですので、興味のある方は是非ダウンロードして使ってみてください。
お見合いパーティを検索するプログラム