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

連載 :

2013年6月4日(火)

ページがアクティブになった時の処理

Yahoo!のニュース・トピックス-国内のRSSである、http://rss.dailynews.yahoo.co.jp/fc/domestic/rss.xml
を変数myUrlに格納しておきます。
このRSSで取得できるXMLの構造は図5になります。赤枠で囲まれた要素の内容を取り出して表示します。

図5：RSSの構造（クリックで拡大）

新しいHttpClientのインスタンスmyHttpClientオブジェクトを作成します。
GetStringAsyncメソッドで、指定URLにGET要求を送信し、非同期操作で応答本体を文字列として受け取り、変数myResultに格納します。
XElement.LoadメソッドでmyResult変数の値を文字列として読み込みます。

変数myPubDateに要素の子要素の値を取得して格納します。
SubString関数で、曜日、日、月、年の部分（図5参照）を取り出し変数displayDateに格納しておきます。
TitleTextBlockにdisplayDateの値を表示します。

NewsInfoクラスの新しいリストである、myNewsInfoを作成します。
すべての子孫要素に対して、その要素を変数resultに格納しながら、以下の処理を反復します。

NewsInfoクラスのtitleプロパティに

要素の値を、linkプロパティに<link />要素の値を指定して、AddメソッドでmyNewsInfoオブジェクトに追加していきます。<br /> GridViewのItemsSourceプロパティにmyNewsInfoオブジェクトを指定します。これで、ニュースのタイトルがタイルに一覧で表示されます。 <pre class="brush: plain; " type="syntaxhighlighter"> Protected Overrides Async Sub OnNavigatedTo(e As Navigation.NavigationEventArgs) Dim myUrl = "http://rss.dailynews.yahoo.co.jp/fc/domestic/rss.xml" Dim myHttpClient As New HttpClient Dim myResult As String = Await myHttpClient.GetStringAsync(myUrl) Dim xmldoc As XElement = XElement.Parse(myResult) Dim myPubDate As String = xmldoc.Descendants("item").Elements("pubDate").Value Dim displayDate As String = myPubDate.Substring(0, 16) TitleTextBlock.Text = displayDate& " の国内ニュース" Dim myNewsInfo As New List(Of NewsInfo) For Each result In From c In xmldoc.Descendants("item") Select c With myNewsInfo .Add(New NewsInfo With {.title = result.Element("title").Value, .link = result.Element("link").Value}) End With Next GridView1.ItemsSource = myNewsInfo End Sub </pre> <h4>GridViewの項目が選択された時の処理</h4> <p>Frameを表示状態にします。<br /> GridViewから選択された項目をNewsInfoクラスにキャストし、そのlinkプロパティを取得して、変数myPageに格納します。</p> <p>変数myPageを引数にNavigateメソッドでWebBrowserPageに遷移します。</p> <pre class="brush: plain; " type="syntaxhighlighter"> Private Sub GridView1_SelectionChanged(sender As Object, e As SelectionChangedEventArgs) Handles GridView1.SelectionChanged myFrame.Visibility = Windows.UI.Xaml.Visibility.Visible Dim myPage As String = DirectCast(GridView1.SelectedItem, NewsInfo).link myFrame.Navigate(GetType(WebBrowserPage), myPage) End Sub </pre> <h4>戻る(←)アイコンがタップされた時の処理</h4> <p>Frameを非表示にします。</p> <pre class="brush: plain; " type="syntaxhighlighter"> Private Sub backButton_Click(sender As Object, e As RoutedEventArgs) Handles backButton.Click myFrame.Visibility = Windows.UI.Xaml.Visibility.Collapsed End Sub End Class </pre> <p>次に、ソリューションエクスプローラー内のWebBrowserPage.xamlを展開して表示される、WebBrowserPage.xaml.vbをダブルクリックしてリスト3のコードを記述します。</p> <h3>ロジックコードを記述する</h3> <h4>リスト3　(WebBrowserPage.xaml.vb)</h4> <pre class="brush: plain; " type="syntaxhighlighter">Option Strict On Public NotInheritable Class WebBrowserPage Inherits Page </pre> <h4>ページがアクティブになった時の処理</h4> <p>MainPage.xamlから渡された値は、e.Parameterで取得できます。これはObject型であるため、DirectCastで文字列にキャストし、変数myUriに格納します。変数myUriにはNewsInfoクラスのlinkプロパティの値が入ります。</p> <p>WebBrowserのSourceプロパティに変数myUriを指定します。これで、ブラウザが起動して、選択したニュースの内容が表示されます。</p> <pre class="brush: plain; " type="syntaxhighlighter"> Protected Overrides Sub OnNavigatedTo(e As Navigation.NavigationEventArgs) Dim myUri As String = DirectCast(e.Parameter, String) WebBrowser1.Source = New Uri(myUri) End Sub End Class </pre> <p>ニュースを表示するサンプルの説明は以上です。</p> <h2>人物名から画像検索を行うためのプログラム</h2> <p>それでは、次のサンプルを紹介します。このサンプルは、検索したい人物名を入力して[OK]ボタンをタップすると、該当する人物の画像が一覧で表示されるもので、「フォト蔵」のAPIを使用しています。<br /> 「フォト蔵」APIについては下記のURLを参照してください。<br /> →　<a href="http://photozou.jp/basic/api_method_search_public" target="_blank">フォト蔵API</a></p> <p>画面に表示された検索人物名の欄に、検索したい人物名を入力します。この例では俳優の「武井咲」を入力してみました。<br /> [OK]ボタンをタップすると「武井咲」に関連する画像の一覧が表示されます（図6）。<br /> 任意の画像を選択すると実寸の画像が表示され、[Save]アイコンが使用可能になります（図7）。<br /> [Save]アイコンをタップすると、選択した画像がピクチャライブラリ内のWebSaveImageというフォルダに保存されます（図8）。</p> <div class="imagebox"><a href="/sites/default/files/articles/410906.png" target="_blank"><img alt="" src="/sites/default/files/articles/410906.png" width="300" /></a> <div class="caption">図6：「武井咲」に関する画像の一覧が表示された（クリックで拡大）</div> </div> <div class="imagebox"><a href="/sites/default/files/articles/410907.jpg" target="_blank"><img alt="" src="/sites/default/files/articles/410907.jpg" width="300" /></a> <div class="caption">図7：実寸大の画像が表示された（クリックで拡大）</div> </div> <div class="imagebox"><a href="/sites/default/files/articles/410908.jpg" target="_blank"><img alt="" src="/sites/default/files/articles/410908.jpg" width="300" /></a> <div class="caption">図8：ピクチャライブラリ内のWebSaveImageサブフォルダに画像が保存された（クリックで拡大）</div> </div> <p>実際に動かした動画は下記のようになります。スマホで撮影した動画のため、見難い点はご了承願います。</p> <p><iframe allowfullscreen="" frameborder="0" height="315" src="http://www.youtube.com/embed/7Ilf9c-7HIY" width="560"></iframe></p> <p>サンプル一式は以下よりダウンロードできます。<br /> →　<a href="http://dl.impressbm.co.jp/content/417" target="_blank">人物名から画像検索を行うプログラム（3,331KB）</a></p> <h3>プロジェクトの作成</h3> <p>VS 2012のメニューから[ファイル(F)／新規作成(N)／プロジェクト(P)]と選択します。<br /> 次に、「テンプレート」から「Windows ストア」を選択し、右に表示される項目名から「新しいアプリケーション(XAML)」を選択します。<br /> 「名前(N)」に任意のプロジェクト名を指定します。ここでは「ImageSearch」という名前を付けています。</p> <h3>ピクチャライブラリへのアクセス許可</h3> <p>今回のサンプルではピクチャライブラリにアクセスしますので、ピクチャライブラリへのアクセス許可が必要です。ソリューションエクスプローラー内の、Package.appxmanifestをダブルクリックして開きます。「機能」タブ内の、「機能：」にある「画像ライブラリ」にチェックを付けてください。</p> <h3>コントロールの配置</h3> <p>ツールボックスからデザイン画面上に、ScrollViewerコントロールを1個配置し、HorizontalScrollBarVisibilityプロパティにVisibleを指定して、水平スクロールバーを表示させます。このScrollviewerの子要素として以下のコントロールを配置します。</p> <p>TextBlockコントロールを2個、Buttonコントロールを2個、WinRTXAML Toolkitのコントロールである、WatermarkTextBoxを1個、ScrollViewerコントロールを1個配置し、その子要素としてGridViewコントロールを配置します。Imageコントロールを1個配置します。これらは、タブレットPCを縦にした場合に、水平スクロールを可能にするものです。</p> <p>書き出されるXAMLはリスト4、レイアウトは図9のようになります。</p> <h4>リスト4　書き出されたXAMLコード(MainPage.xaml)</h4> <ul class="type-none"> <li>（1）<scrollviewer>要素を配置し、HorizontalScrollBarVisibilityプロパティにVisibleを指定して水平スクロールを可能にしています。この要素の子要素として以下の要素を配置します」</scrollviewer></li> <li>（2）「画像検索」という文字を少し傾斜させて表示しています。</li> <li>（3）saveButtonという名前の<button>要素を配置します。<br /> Styleプロパティに" {StaticResourceSaveAppBarButtonStyle}"と指定してフロッピーアイコンを表示します。このSaveAppBarButtonStyleは、Commonフォルダ内のStandardStyles.xaml内に定義されています。大部分がコメントアウトされて使用できないようになっていますので、VS2012のメニューの「編集(E)／検索と置換(F)」と選択して、「Save」という名前で検索し、SaveAppBarButtonStyleが定義されているStyleを見つけてください。コメントアウトされている場合はコメントを外します。</button></li> <li>（4）「検索人物名」という項目を表示する<textblock>要素を配置しています。</textblock></li> <li>（5）WatermarkTextBox1という名前のWinRTXAML Toolkitの<watermarktextbox>要素を配置し、WatermarkTextプロパティに「検索したい人物の名前を入力・・・・・」と指定しておきます。</watermarktextbox></li> <li>（6）okButtonという名前の<button>要素を配置しています。</button></li> <li>（7）<scrollviewer>要素を配置し、子要素としてGridView1という名前の<gridview>要素を配置します。<br /> FlowDirectionプロパティにLeftToRightと指定し、左から右方向に表示されるようにします。</gridview></scrollviewer></li> <li>（8）Image1という名前の<image>要素を配置します。実寸大の画像を表示するImageです。<br /> StretchにはNoneを指定しています。Stretch列挙体については下記のURLを参照してください。<br /> →　<a href="http://msdn.microsoft.com/ja-jp/library/system.windows.media.stretch.aspx" target="_blank">Stretch列挙体</a></image></li> </ul> <pre class="brush: plain; " type="syntaxhighlighter"><Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:ImageSearch" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:Controls="using:WinRTXamlToolkit.Controls" x:Class="ImageSearch.MainPage" mc:Ignorable="d"> <Grid Background="{StaticResourceApplicationPageBackgroundThemeBrush}" Margin="0,10,0,0"> <ScrollViewerHorizontalScrollBarVisibility="Visible">■（1） <Grid> <TextBlock Text="画像検索" Margin="1074.985,104.218,52.284,588.868" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" FontFamily="Meiryo UI" FontSize="48" Foreground="Gold" FontWeight="Bold">■（2） <TextBlock.RenderTransform>■（2） <CompositeTransformSkewY="-0.442" TranslateY="-1.485" Rotation="12.075"/>■（2） </TextBlock.RenderTransform>■（2） </TextBlock>■（2） <Button x:Name="saveButton" Style="{StaticResourceSaveAppBarButtonStyle}" Margin="240,343,0,378" Width="105" IsEnabled="False"/>■（3） <TextBlock Text="検索人物名" TextWrapping="Wrap" Margin="72,31,1208,744" FontFamily="Meiryo UI" FontSize="22" FontWeight="Bold" Foreground="Gold"/>■（4） <Controls:WatermarkTextBoxx:Name="WatermarkTextBox1" HorizontalAlignment="Left" Height="70" Margin="187,12,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="731" WatermarkText="検索したい人物の名前を入力・・・・・" FontFamily="Meiryo UI" FontSize="36"/>■（5） <Button x:Name="okButton" Content="OK" HorizontalAlignment="Left" Height="70" Margin="942,12,0,0" VerticalAlignment="Top" Width="125" FontFamily="Meiryo UI" FontSize="36"/> <ScrollViewerHorizontalScrollBarVisibility="Visible" Margin="0,601,0,0">■（6） <GridViewx:Name="GridView1" FlowDirection="LeftToRight" Height="157" Width="1356"/>■（6） </ScrollViewer>■（6） <Image x:Name="Image1" HorizontalAlignment="Left" Height="480" Margin="360,100,0,0" VerticalAlignment="Top" Width="640"Stretch="None"/>■（7） </Grid> </ScrollViewer> </Grid> </Page> </pre> <div class="imagebox"><a href="/sites/default/files/articles/410909.png" target="_blank"><img alt="" src="/sites/default/files/articles/410909.png" width="300" /></a> <div class="caption">図9：各コントロールを配置した（クリックで拡大）</div> </div>

開発 / RSS / Windows 8 / サンプルアプリ / Windows8 ストア / 基本情報

RSSから国内ニュースを取得してタイルに表示するプログラム

4109_1.zip

著者

薬師寺国安

この著者の記事一覧この著者の
記事一覧

薬師寺国安事務所

薬師寺国安事務所代表。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）。