PR

キャラクターが声で天気予報を教えてくれるアプリを作る

2014年2月26日(水)
薬師寺 国安

Bing Maps Keyの取得方法

第3回:距離の計算」を参照してください(2ページ目後半)。

空白のページの作成(BingMapsPage.xaml)

VS2013のメニューから、[プロジェクト]−[新しい項目の追加]と選択し、表示される「新しい項目の追加」画面で。左のWindows ストアを選択し、右の欄から「空白のページ」を選択します。「名前」には「BingMapsPage.xaml」と指定し、[追加] ボタンをクリックします。「BingMapsPage.xaml」は指定した地域にズームインし、キャラクターがその地域の天気予報を読み上げるページです。

コントロールのレイアウト(BingMapsPage.xaml)

ツールボックスからデザイン画面上に、各コントロールを配置します。

書き出されるXAMLコードはリスト3のようになります。

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

(1)bmという名前空間を定義しています。

(2)Page.Resourcesプロパティ要素内に、GridViewTemplateというKey名のDataTemplate要素を配置します。
その子要素としてStackPanel要素を配置し、Orientationに「Horizontal」と指定します。また、その子要素として、StackPanel要素を配置します。「Orientation」は指定しませんので、デフォルトの「Vertical」が適用されます。
さらにStackPanel要素を配置し、Orientationに「Horizontal」を指定します。背景色(Background)には「Gold」を指定します。
その子要素として、項目名となるTextBlock要素を配置し、Textプロパティに「日付」と指定します。
その日付の値を表示させるために、TextBlock要素を配置し、Textプロパティに「日付」をバインドします。

StackPanel要素を配置し、Orientationに「Hodizontal」を指定します。背景色には「Blue」を指定します。
その子要素として、項目名となるTextBlock要素を配置し、Textプロパティに「天気」と指定します。
その天気の値を表示させるために、TextBlock要素を配置し、Textプロパティに「天気」をバインドします。

StackPanel要素を配置し、背景色に「Pink」を指定します。その子要素として、Image要素を配置しSourceプロパティに「画像」をバインドします。

StackPanel要素を配置し、Orientationに「Hodizontal」を指定します。背景色には「Red」を指定します。
その子要素として、項目名となるTextBlock要素を配置し、Textプロパティに「最高気温」と指定します。
その天気の値を表示させるために、TextBlock要素を配置し、Textプロパティに「最高気温」をバインドします。

StackPanel要素を配置し、Orientationに「Hodizontal」を指定します。背景色には「Gold」を指定します。
その子要素として、項目名となるTextBlock要素を配置し、Textプロパティに「最低気温」と指定します。
その天気の値を表示させるために、TextBlock要素を配置し、Textプロパティに「最低気温」をバインドします。
ここでバインドする名称は、VBコード内のクラスで定義するプロパティ名です(後述)。

(3)Grid要素全体をViewBox要素で囲みます。ViewBox要素は、伸縮およびスケーリングを実行して単一の子を使用可能な領域全体に引き伸ばすことができるコンテンツ・デコレータを定義します。

(4)名前が「MediaElement1」というMediaElement要素を配置します。キャラクターに天気予報を喋らすために必要です。
AutoPlayプロパティに「True」を指定し、自動再生を可能にしておきます。

(5)名前が「myMap」という、bm:Map要素を配置し、[Credentials]プロパティに「Bing Maps Account Centerで取得したBing Maps Key」を指定します。

(6)名前が「AppBar1」というAppBar要素を配置し、背景色(Background)に「DarkGreen」を指定します。
その子要素として、ScrollViewer要素を配置し、またその子要素として、名前が「GridView1」というGridView要素を配置します。
ItemTemplateプロパティにStaticResourceを使って(2)で定義したGridViewTemplateを参照します。

以上、全てをレイアウトしたのが図6になります。

<Page
  x:Class="TenkiInformation_VS2013.BingMapsPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:NewEditionTenkiInformation"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:bm="using:Bing.Maps"■(1)
  mc:Ignorable="d">
  <Page.Resources>■(2)
    <DataTemplate x:Key="GridViewTemplate">■(2)
      <StackPanel Orientation="Horizontal">■(2)
        <StackPanel>■(2)
          <StackPanel Orientation="Horizontal" Background="Gold">■(2)
            <TextBlock Text="日付" FontFamily="Meiryo UI" FontSize="22" Width="100" Foreground="Navy" Padding="5"/>■(2)
            <TextBlock Text="{Binding 日付}" FontFamily="Meiryo UI" FontSize="22" Width="250" TextWrapping="Wrap" Foreground="Crimson" Padding="5"/>■(2)
          </StackPanel>■(2)
          <StackPanel Orientation="Horizontal" Background="Blue">■(2)
            <TextBlock Text="天気" FontFamily="Meiryo UI" FontSize="22" Width="100" Foreground="Gold" Padding="5"/>■(2)
            <TextBlock Text="{Binding 天気}" FontFamily="Meiryo UI" FontSize="22" Width="250" TextWrapping="Wrap" Foreground="Crimson" Padding="5"/>■(2)
          </StackPanel>■(2)
          <StackPanel Background="PinK">■(2)
            <Image Stretch="None" Source="{Binding 画像}"/>■(2)
          </StackPanel>■(2)
          <StackPanel Orientation="Horizontal" Background="Red">■(2)
            <TextBlock Text="最高気温" FontFamily="Meiryo UI" FontSize="22" Width="100" Foreground="Gold" Padding="5"/>■(2)
            <TextBlock Text="{Binding 最高気温}" FontFamily="Meiryo UI" FontSize="20" Width="250" TextWrapping="Wrap" Foreground="Navy"  Padding="5" Height="50"/>
          </StackPanel>■(2)
          <StackPanel Orientation="Horizontal" Background="Gold">■(2)
            <TextBlock Text="最低気温" FontFamily="Meiryo UI" FontSize="22" Width="100" Foreground="Red" Padding="5"/>■(2)
            <TextBlock Text="{Binding 最低気温}" FontFamily="Meiryo UI" FontSize="20" Width="250" TextWrapping="Wrap" Foreground="Navy"  Padding="5" Height="80"/>■(2)
          </StackPanel>■(2)
        </StackPanel>■(2)
      </StackPanel>■(2)
    </DataTemplate>■(2)
  </Page.Resources>■(2)
  <Viewbox>■(3)
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}" Margin="0,-14,0,0" Width="1360">
    <MediaElement  x:Name="MediaElement1" AutoPlay="True" Width="100" Height="100" Margin="1163,569,97,109"/>■(4)
    <bm:Map Credentials=" Bing Maps Account Centerで取得したBing Maps Key" x:Name="myMap" Margin="0,10,0,0" Height="768" Width="1366" />■(5)
    <AppBar x:Name="AppBar1" Background="DarkGreen" Margin="0,10,0,0" Height="758" VerticalAlignment="Top">■(6)
      <ScrollViewer>■(6)
        <GridView x:Name="GridView1" FlowDirection="LeftToRight" ItemTemplate="{StaticResource GridViewTemplate}" Width="1366" Height="570"/>■(6)
      </ScrollViewer>■(6)
    </AppBar>■(6)
  </Grid>
  </Viewbox>■(3)
</Page>
図6:各コントロールを配置した(クリックで拡大)
Think IT会員限定特典
  • キャラクター音声天気予報アプリのサンプル

    『Windows 8.1+Visual Studio 2013によるWindows ストア・アプリ開発実例集』 第8回のサンプルプログラムです。
薬師寺国安事務所

薬師寺国安事務所代表。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会員サービスの概要とメリットをチェック

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