世界の観光地情報を眺めるサンプルプログラム

2013年6月14日(金)
薬師寺 国安

今回はリクルートの提供している「観光地マスタAPI」を使用したサンプルプログラムを作ります。画面上に世界の観光地一覧を表示して、知りたい観光地をタップすると詳細を見ることができます。
観光地マスターAPIの詳細については下記のURLを参照してください。
→ リクルートWEBサービス/APIリファレンス

プログラムを実行すると、画面上に、コンボボックスから選択した世界の観光地の情報をタイルに表示します(図1)。タイルをタップするとWebブラウザが起動して詳細情報を表示します(図2)。

図1:コンボボックスから選択した地域の観光地の情報がタイルに表示されている(クリックで拡大)
図2:タップしたタイルの詳細データがWebブラウザで表示されている(クリックで拡大)

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

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

※今回のサンプルを実行する場合は、「デバッグなしで開始」を選択してください。WebBrowserに読み込んでいるサイトが.shtmlのサイトであるため、「デバッグ開始」を実行するとJust-In-Timeエラーが発生しますので、ご注意ください。

プロジェクトの作成

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

ソリューションエクスプローラー内にImageというフォルダを作って、右隅下に配置する画像を取り込んでおきます。ダウンロードされたサンプルファイルには、画像ファイルは追加済みです。

NuGetパッケージの管理

今回はCodePlexで公開されている、WinRT XAML Toolkitに含まれているコントロールを使用します。WinRT XAML Toolkitについては下記のURLを参照してください。
→ WinRT XAML Toolkit

連載第1回の「Windows8のストア画面で手軽に時計を表示するサンプル」で、WinRTXAMLToolkitに関するコントロールはすでにツールボックスに表示されているはずですので、今回は、ツールボックスから必要なコントロールを配置するだけでかまいません。
もし、WinRTXAML Toolkitに関するコントロールがツールボックスに追加されていない場合は、上記記事を参考に追加してください。またWebBrowserコントロールが表示されない場合は、再度WinRTXAML Toolkitをインストールし、VS2012を再起動してください。

コントロールの配置

ツールボックスからデザイン画面上にTextBlockコントロールを1個、ScrollViewerコントロールを1個配置し、その子要素としてGridViewコントロールを1個配置します。
Frame、Button、ComboBoxコントロールを1個ずつ配置し、次に、TextBlockとImageコントロールを1個ずつ配置します。
書き出されるXAMLコードをリスト1のように編集します。レイアウトは図3のようになります。

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

  • (1)プロパティ要素内にKey名がGridViewTemplateという要素を配置します。その子要素として要素を配置し、背景色にSilverを指定し、Marginプロパティに5を指定して余白を設けます。
    子要素として要素を配置し、Textプロパティにnameをバインドします。
    同じく、要素を配置し、背景色にBeigeを指定します。その子要素としてTextBlock要素を配置し、Textプロパティにtitleをバインドします。文字色にはGreenを指定します。
    さらに要素を配置し背景色にWhiteを指定します。その子要素として要素を配置し、Textプロパティにdescriptionをバインドします。文字色にはNavyを指定します。
    ここでバインドする名称はVBコード内で定義されたプロパティ名です。
  • (2)タイトルを表示する、名前がTitleTextBlockという要素を配置します。
  • (3)要素を配置し、HorizontalScrollBarVisibilityにVisibleを、VerticalScrollBarVisibilityにVisibleを指定して、横のスクロールと縦のスクロールを可能にします。
  • (4)(3)の要素の子要素として要素を配置します。
    FlowDirectionプロパティにLeftToRightを指定し、左から右に向かって表示されるようにします。
    ItemTemplateプロパティにStaticResourceを使って(1)で指定したGridViewTemplateを参照させます。
  • (5)名前がmyFrameという要素を配置しています。この中にWebブラウザのページを表示させます。
  • (6)backButtonという名前の
  • (7)名前がComboBox1という要素を配置します。
    プロパティの[共通]パネルにあるItemsプロパティからComboBoxItemを7個追加し、Contentプロパティに地域名を入力しておきます。
  • (8)項目名を表示する要素を配置します。
  • (9)要素を配置し、SourceプロパティにImageフォルダ内の画像を指定します。
  • 世界の観光地を表示・検索するプログラム

薬師寺国安事務所

薬師寺国安事務所代表。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メルマガ会員のサービス内容を見る

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