PR

住所から郵便番号を検索できるプログラムを作る

2013年5月16日(木)
薬師寺 国安

今回のサンプルは入力した住所から、郵便番号を検索して表示するものです。入力ボックスに住所を入力すると、その住所に関係のある郵便番号の一覧が表示されます(図1)。更に絞ると関係のある1件が表示されます(図2)。

※番地の入力は控えてください。番地まで入力すると郵便番号が表示されませんので、注意してください。

図1:宇和島市和霊と入力して関連する郵便番号の一覧が表示された(クリックで拡大)
図2:宇和島市和霊元町と絞って検索した(クリックで拡大)
図3:表示された郵便番号付きの住所を選択すると、その住所に関するデータがWebブラウザで表示される(クリックで拡大)

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

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

プロジェクトの作成

VS 2012のメニューから[ファイル(F)/新規作成(N)/プロジェクト(P)]と選択します。
次に、「テンプレート」から「Windows ストア」を選択し、右に表示される項目名から「新しいアプリケーション(XAML)」を選択します。
「名前(N)」に任意のプロジェクト名を指定します。ここでは「FromPostalCodeToAddress」という名前を付けています。

ソリューションエクスプローラー内にImagesというフォルダを作って、ポストの画像を配置しておきます。
ダウンロードされたサンプルファイルには、画像ファイルは追加済みです。

コントロールの配置

ツールボックスからデザイン画面上にStackPanelコントロールを3個配置し、それぞれのStackPanelコントロールの子要素として、Button、Image、TextBlockコントロールを1個ずつ配置します。これで、上の部分にあたる、戻る(←)アイコンと、郵便ポストの画像、「郵便番号検索」の文字が表示されます。

次に、WinRTXAML ToolkitのコントロールであるWatermarkTextBoxコントロールを配置します。このコントロールには透かし文字を入れることができます。
Buttonを1個、ListBoxコントロールを2個、Frameコントロールを1個配置します。2個配置したListBoxコントロールの1つは、影(青色)となる部分のListBoxです。
最後に全体をScrollViewerコントロールで括ります。HorizontalScrollBarVisibilityプロパティにVisibleを指定して、水平スクロールを表示します。これはタブレットを縦向きにした場合にスクロールできるよう配置しておきます。書き出されるXAMLコードをリスト1のように編集します。レイアウトは図4になります。

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

  • (1)プロパティ要素内にKey名がListBoxTemplateという要素を配置します。その子要素として要素を配置し、背景色にSlateBlueを指定し、Marginに10を指定して余白を設けます。
    その中にTextBlock要素を配置しTextプロパティにzipcodeをバインドしておきます。文字色にはGoldを指定します。
    再度要素を配置し、OrientationプロパティにHorizontalを指定してオブジェクトのスタック方向を水平とします。
    Marginに10を指定して余白を設けます。
    子要素として要素を3個配置し、上から順にprefecture、city、townをバインドしておきます。文字色にはWhiteを指定します。
    ここでバインドする名称はVBコード内のクラスで定義されたプロパティ名です。
  • (2)要素を配置し、水平スクロールバーを表示します。
    この要素の子要素として以下の要素を配置します
  • (3)要素を配置しOrientationにHorizontalを指定しておきます。
  • (4)(3)の子要素として再度要素を配置し、その子要素としてbackButtonという名前の
  • (5)再度要素を配置し、子要素として要素を配置します。
    SourceプロパティにImageフォルダ内の郵便ポストの画像を指定します。
  • (6)再度要素を配置します。子要素として要素を配置し、Textプロパティに「郵便番号検索」と指定します。
  • (7)WinRTXAML Toolkitの要素を配置し、WatermarkTextプロパティに「住所を入力してください・・・・・」と指定しておきます。
    このコントロールに何も入力されず、フォーカスが離れると「住所を入力してください・・・・・」の文字が表示されます。フォーカスが移ると透かし文字は消えます。
  • (8)okButtonという名前の
  • (9)影となる部分の要素を配置します。背景色にはNavyを指定します。
  • (10)名前がResultListBoxという名前の要素を配置します。
  • (11)myFrameという名前の要素を配置します。このFrameにブラウザーが表示されます。
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会員サービスの概要とメリットをチェック

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