PR

国内ニュースの取得・表示と、人名から画像検索を行う2つのサンプルをつくる

2013年6月4日(火)
薬師寺 国安

今回は、「国内ニュースの取得・表示」と「人物名から画像検索」を行う2つのサンプルを紹介します。まずは、「国内ニュースの取得・表示」のサンプルからです。

国内ニュースを表示するためのプログラム

今回のサンプルは、Yahoo!のニュース・トピックス-国内のRSSからデータを取り出して表示させています。使用するRSSは下記のURLです。
→ http://rss.dailynews.yahoo.co.jp/fc/domestic/rss.xml

ページが表示されると、上記URLのデータを読み込んで、当日の国内ニュースの一覧が、タイルで表示されます(図1)。タイルをタップするとブラウザが起動して、そのニュースに該当する内容を見ることができます(図2)。

図1:Yahoo!の国内ニュースのタイトルがタイルで一覧表示されている(クリックで拡大)
図2:ブラウザが起動してニュースの詳細を読むことができる(クリックで拡大)

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

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

プロジェクトの作成

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

ソリューションエクスプローラー内にImageというフォルダを作って、画像を1枚配置しておきます。

ダウンロードされたサンプルファイルには、画像ファイルは追加済みです。

コントロールの配置

ツールボックスからデザイン画面上に、Imageコントロールを1個、TextBlockコントロールを1個、ScrollViewerコントロールを1個配置し、子要素としてGridViewコントロールを1個配置します。Frameコントロールを1個配置し、Buttonコントロールを1個配置します。

書き出されるXAMLをリスト1のように編集します。レイアウトは図3のようになります。

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

  • (1)プロパティ要素内にKey名がGridViewTemplateという要素を配置します。
    その子要素として要素を配置し、背景色にSilverを指定し、Marginに5を指定して余白を設けます。また、Widthに300、Heightに200を指定して、タイルを作成します。その中にTextBlock要素を配置しTextプロパティにtitleをバインドしておきます。文字色にはNavyを指定します。
    ここでバインドする名称はVBコード内のクラスで定義されたプロパティ名です。
  • (2)要素を配置し、SourceプロパティにImageフォルダ内の画像を指定します。
  • (3)TitleTextBlockという名前の要素を配置します。
  • (4)要素を配置し、子要素としてGridView1という名前の要素を配置します。
    FlowDirectionプロパティにLeftToRightと指定し、左から右方向に表示されるようにします。
    ItemTemplateプロパティに(1)で定義したGridViewTemplateをStaticResourceで参照させます。
  • (5)myFrameという名前の要素を配置します。
  • (6)backButtonという名前の
<Page
  x:Class="MyNews.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:MyNews"
  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  Width="300" Background="Silver" Height="200" Margin="5"■(1)>
        <TextBlock Text="{Binding title}" Width="280" TextWrapping="Wrap" FontFamily="Meiryo UI" FontSize="24" Foreground="Navy"/>■(1)
      </StackPanel>■(1)
    </DataTemplate>■(1)
  </Page.Resources>
  <Grid Background="{StaticResourceApplicationPageBackgroundThemeBrush}" Margin="0,80,0,0">
    <Image Source="Image/news.png" Margin="1119,460,10,0" Width="216" Height="188"/>■(2)
      <TextBlockx:Name="TitleTextBlock" Margin="130,-70,194,699" FontFamily="Meiryo UI" FontSize="36" FontWeight="Bold" TextAlignment="Center"/>■(3)
      <ScrollViewerHorizontalScrollBarVisibility="Visible" Margin="68,104,0,0">■(4)
      <GridViewx:Name="GridView1" HorizontalAlignment="Left" Height="586" VerticalAlignment="Top" Width="1368" FlowDirection="LeftToRight" ItemTemplate="{StaticResourceGridViewTemplate}"/>■(4)
    </ScrollViewer>■(4)
    <Frame x:Name="myFrame" HorizontalAlignment="Left" Height="688" Margin="68,0,0,0" VerticalAlignment="Top" Width="1298"/>■(5)
      <Button x:Name="backButton"  Style="{StaticResourceResourceKey=BackButtonStyle}" HorizontalAlignment="Left" Height="45" Margin="0,-70,0,0" VerticalAlignment="Top" Width="63"/>■(6)
  </Grid>
</Page>
図3:各コントロールを配置した(クリックで拡大)

Windows ストア空白のページの作成(WebBrowserPage.xaml)

VS2012のメニューの「プロジェクト(P)/新しい項目の追加(W)」と選択して、左に表示される項目からWindows ストアを選択します。右に表示されるテンプレートから「空白のページ」を選択します。「名前(N):」にはWebBrowserPage.xamlと指定して、[追加(A)]ボタンをクリックします。

コントロールの配置

ツールボックスからWinRTXAML Toolkitのコントロールである、WebBrowserコントロールを1個配置します。書き出されるXAMLコードは省略します。レイアウトは図4のようになります。

図4:WebBrowserコントロールを配置した(クリックで拡大)

次に、ソリューションエクスプローラー内のMainWindow.xamlを展開して表示される、MainWindow.xaml.vbをダブルクリックしてリスト2のコードを記述します。

ロジックコードを記述する

リスト2 (MainWindow.xaml.vb)

Option Strict On

最新の HTTP アプリケーション用のプログラミングインターフェイスを提供するクラスの含まれる、System.Net.Http名前空間をインポートします。

Imports System.Net.Http

Public NotInheritable Class MainPage
  Inherits Page

NewsInfoクラスに文字列型のtitleとlinkプロパティを定義しています。

  Public Class NewsInfo
    Property title As String
    Property link As String
  End Class
Think IT会員限定特典
  • RSSから国内ニュースを取得してタイルに表示するプログラム

薬師寺国安事務所

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

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