PR

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

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

男女の出会いは、現在様々な形で提供されています。親戚による見合い話か、ごく近い縁で恋愛に発展することが多かった以前に比べて、今では企業によるお見合いパーティや街コン、Facebookによるマッチングサービスなど、自分のライフスタイルに合わせて探すことができます。この記事を読んでいる方の中にも、利用した方がいるかもしれませんね。

今回は、そんなマッチングサービスの中から、婚活に便利な、自分のいる場所の近くで開催されるお見合いパーティを検索できるアプリを作ります。

サンプルアプリを実行すると、都道府県の一覧が表示されます(図1)。任意の都道府県を選択すると、その地域で開催されているパーティ情報の一覧がタイルで表示されます(図2)。任意のタイルをタップすると、そのパーティの詳細データがWebBrowser内に表示されます(図3)。

図1:都道府県名が一覧で表示されている(クリックで拡大)
図2:愛媛県内で催されているパーティの情報がタイルで表示されている(クリックで拡大)
図3:「Webで詳細を表示」ボタンをタップして、パーティに関する情報がWebBrowser内に表示されている(クリックで拡大)

実際に動かした動画は下記のようになります。スマホで撮影した動画のため、見難い点はご了承願います。

サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。

※このサンプルは、VS2012の「デバッグなしで開始」で実行してください。「デバッグ開始」では、Webページを表示する際に、ページによってエラーになる場合があります。「デバッグなしで開始」でしか動作しないアプリでも、Windowsストアの審査は通りますので、ご安心ください。

プロジェクトの作成

VS 2012のメニューから[ファイル(F)/新規作成(N)/プロジェクト(P)]と選択します。
次に、「テンプレート」から「Windows ストア」を選択し、右に表示される項目名から「新しいアプリケーション(XAML)」を選択します。
「名前(N)」に任意のプロジェクト名を指定します。ここでは「PartyEtc」という名前を付けています。
ソリューションエクスプローラーのPartyEtcプロジェクトの配下に、都道府県名を記述した、リスト1のpref.xmlを追加しておきます。ダウンロードされたサンプルファイルには、このファイルは追加済みです。

リスト1XML文書ファイル(pref.xml)

<?xml version="1.0"?>
<一覧>
  <都道府県>北海道</都道府県>
  <都道府県>青森県</都道府県>
  <都道府県>岩手県</都道府県>
  <都道府県>宮城県</都道府県>
  <都道府県>秋田県</都道府県>
  <都道府県>山形県</都道府県>
  ~<都道府県></都道府県>繰り返し~
</一覧>

コントロールの配置

ツールボックスからデザイン画面上にScrollViewerコントロールを1個、その子要素としてGridViewコントロールを1個配置します。
戻る(←)ボタンとなるButtonコントロールを1個、パーティの情報とWebBrowserでパーティの詳細情報を表示させるためのFrameコントロールを1個配置します。
書き出されるXAMLをリスト2のように編集します。レイアウトは図4のようになります。

リスト2 書き出されたXAMLコード(MainPage.xaml)

(1)プロパティ要素内に、Key名がGridViewTemplateという要素を配置します。その子要素として要素を配置し、OrientationプロパティにHorizontalを指定して、オブジェクトのスタック方向を水平方向とします。Marginに5を指定して余白を設けます。
要素の子要素として、要素を配置します。背景色にPink、CornerRadiusに12を指定して四隅を丸めます。枠線の幅に3を指定し、枠線の色をCrimsonとします。
要素の子要素として、要素を配置します。Textプロパティにprefをバインドします。文字色はRedに指定します。ここでバインドしているprefはVBコードのクラス内で定義したプロパティ名です。

(2)要素を配置し、その子要素として、名前がGridView1という要素を配置します。
ItemTemplateプロパティに、StaticResourceを使って、(1)で定義したGridViewTemplateを参照させて、指定します。

(3)名前がbackButton1という

(4)これから作成するPartyDataShowPageに遷移するための、名前がmyFrameという要素を配置します。

<Page
  x:Class="PartyEtc.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:PartyEtc"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d">
  <Page.Resources>(1)
    <DataTemplatex:Key="GridViewTemplate">(1)
      <StackPanel Orientation="Horizontal" Margin="5">(1)
        <Border Background="Pink" CornerRadius="12" BorderBrush="Crimson" BorderThickness="3">(1)
          <TextBlock Width="250" TextWrapping="Wrap" Text="{Binding pref}" FontFamily="Meiryo UI" FontSize="36" Foreground="Red" Padding="5" HorizontalAlignment="Center"/>(1)
        </Border>(1)
      </StackPanel>(1)
    </DataTemplate>(1)
  </Page.Resources>(1)
  <Grid Background="{StaticResourceApplicationPageBackgroundThemeBrush}" Margin="72,0,0,0">
    <ScrollViewerHorizontalAlignment="Left" Height="729" Margin="10,29,0,0" VerticalAlignment="Top" Width="1274">(2)
      <GridViewx:Name="GridView1" Height="699" Width="1232" FlowDirection="LeftToRight" ItemTemplate="{StaticResourceGridViewTemplate}"/>(2)
    </ScrollViewer>(2)
    <Button x:Name="backButton1" Style="{StaticResourceBackButtonStyle}" Margin="-67,0,0,710" />(3)
    <Frame x:Name="myFrame" HorizontalAlignment="Left" Height="734" Margin="23,10,-62,0" VerticalAlignment="Top" Width="1333"/>(4)
  </Grid>
</Page>
図4:各コントロールをレイアウトした(クリックで拡大)

「空白のページ」の作成(PartyDataShowPage.xaml)

次に、パーティの情報をタイルで表示し、詳細データをWebBrowserに表示するページを作成します。

VS2012のメニューの「プロジェクト(P)/新しい項目の追加(W)」と選択します。「新しい項目の追加」ダイアログボックスが開きますので、「空白のページ」を選択します。「名前(N)」にPartyDataShowPage.xamlと入力し、[追加(A)]ボタンをクリックします。

Think IT会員限定特典
  • お見合いパーティを検索するプログラム

薬師寺国安事務所

薬師寺国安事務所代表。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のWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

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

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