婚活に使えるお見合いパーティ検索アプリを作る

2013年8月1日(木)
薬師寺 国安
婚活に使えるお見合いパーティ検索アプリを作る

戻る(←)アイコンがタップされた時の処理

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"> 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 </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"> 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 </pre> <h4>戻る(←)アイコンがタップされた時の処理</h4> <p>WebBrowserを非表示にします。GridViewを表示状態にします。<br /> WebBrowserと一緒に表示されていた、「戻る(←)」アイコンを非表示にします。パーティのデータがタイルで表示される画面になります。</p> <pre class="brush: plain; " type="syntaxhighlighter"> 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 </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>
  • お見合いパーティを検索するプログラム

薬師寺国安事務所

薬師寺国安事務所代表。Visual Basic プログラミングと、マイクロソフト系の技術をテーマとした、書籍や記事の執筆を行う。
1950年生まれ。事務系のサラリーマンだった40歳から趣味でプログラミングを始め、1996年より独学でActiveXに取り組む。1997年に薬師寺聖とコラボレーション・ユニット PROJECT KySS を結成。2003年よりフリーになり、PROJECT KySS の活動に本格的に参加、.NETやRIAに関する書籍や記事を多数執筆する傍ら、受託案件のプログラミングも手掛ける。Windows Phoneアプリ開発を経て、現在はWindows ストア アプリを多数公開中

Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。Microsoft MVP for Development Platforms - Windows Phone Development(Oct 2012-Sep 2013)。Microsoft MVP for Development Platforms - Client Development(Oct 2013-Sep 2014)。Microsoft MVP for Development Platforms-Windows Platform Development (Oct 2014-Sep 2015)。

連載バックナンバー

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

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

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

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