国内ニュースの取得・表示と、人名から画像検索を行う2つのサンプルをつくる
![](https://thinkit.co.jp/sites/default/files/styles/main_image_730x/public/main_images/4109_8.jpg?itok=HsVr6Pj_)
ページがアクティブになった時の処理
Yahoo!のニュース・トピックス-国内のRSSである、http://rss.dailynews.yahoo.co.jp/fc/domestic/rss.xml
を変数myUrlに格納しておきます。
このRSSで取得できるXMLの構造は図5になります。赤枠で囲まれた要素の内容を取り出して表示します。
新しいHttpClientのインスタンスmyHttpClientオブジェクトを作成します。
GetStringAsyncメソッドで、指定URLにGET要求を送信し、非同期操作で応答本体を文字列として受け取り、変数myResultに格納します。
XElement.LoadメソッドでmyResult変数の値を文字列として読み込みます。
変数myPubDateに
SubString関数で、曜日、日、月、年の部分(図5参照)を取り出し変数displayDateに格納しておきます。
TitleTextBlockにdisplayDateの値を表示します。
NewsInfoクラスの新しいリストである、myNewsInfoを作成します。
すべての子孫要素
NewsInfoクラスのtitleプロパティに
GridViewのItemsSourceプロパティにmyNewsInfoオブジェクトを指定します。これで、ニュースのタイトルがタイルに一覧で表示されます。
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
GridViewの項目が選択された時の処理
Frameを表示状態にします。
GridViewから選択された項目をNewsInfoクラスにキャストし、そのlinkプロパティを取得して、変数myPageに格納します。
変数myPageを引数にNavigateメソッドでWebBrowserPageに遷移します。
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
戻る(←)アイコンがタップされた時の処理
Frameを非表示にします。
Private Sub backButton_Click(sender As Object, e As RoutedEventArgs) Handles backButton.Click myFrame.Visibility = Windows.UI.Xaml.Visibility.Collapsed End Sub End Class
次に、ソリューションエクスプローラー内のWebBrowserPage.xamlを展開して表示される、WebBrowserPage.xaml.vbをダブルクリックしてリスト3のコードを記述します。
ロジックコードを記述する
リスト3 (WebBrowserPage.xaml.vb)
Option Strict On Public NotInheritable Class WebBrowserPage Inherits Page
ページがアクティブになった時の処理
MainPage.xamlから渡された値は、e.Parameterで取得できます。これはObject型であるため、DirectCastで文字列にキャストし、変数myUriに格納します。変数myUriにはNewsInfoクラスのlinkプロパティの値が入ります。
WebBrowserのSourceプロパティに変数myUriを指定します。これで、ブラウザが起動して、選択したニュースの内容が表示されます。
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
ニュースを表示するサンプルの説明は以上です。
人物名から画像検索を行うためのプログラム
それでは、次のサンプルを紹介します。このサンプルは、検索したい人物名を入力して[OK]ボタンをタップすると、該当する人物の画像が一覧で表示されるもので、「フォト蔵」のAPIを使用しています。
「フォト蔵」APIについては下記のURLを参照してください。
→ フォト蔵API
画面に表示された検索人物名の欄に、検索したい人物名を入力します。この例では俳優の「武井咲」を入力してみました。
[OK]ボタンをタップすると「武井咲」に関連する画像の一覧が表示されます(図6)。
任意の画像を選択すると実寸の画像が表示され、[Save]アイコンが使用可能になります(図7)。
[Save]アイコンをタップすると、選択した画像がピクチャライブラリ内のWebSaveImageというフォルダに保存されます(図8)。
実際に動かした動画は下記のようになります。スマホで撮影した動画のため、見難い点はご了承願います。
サンプル一式は以下よりダウンロードできます。
→ 人物名から画像検索を行うプログラム(3,331KB)
プロジェクトの作成
VS 2012のメニューから[ファイル(F)/新規作成(N)/プロジェクト(P)]と選択します。
次に、「テンプレート」から「Windows ストア」を選択し、右に表示される項目名から「新しいアプリケーション(XAML)」を選択します。
「名前(N)」に任意のプロジェクト名を指定します。ここでは「ImageSearch」という名前を付けています。
ピクチャライブラリへのアクセス許可
今回のサンプルではピクチャライブラリにアクセスしますので、ピクチャライブラリへのアクセス許可が必要です。ソリューションエクスプローラー内の、Package.appxmanifestをダブルクリックして開きます。「機能」タブ内の、「機能:」にある「画像ライブラリ」にチェックを付けてください。
コントロールの配置
ツールボックスからデザイン画面上に、ScrollViewerコントロールを1個配置し、HorizontalScrollBarVisibilityプロパティにVisibleを指定して、水平スクロールバーを表示させます。このScrollviewerの子要素として以下のコントロールを配置します。
TextBlockコントロールを2個、Buttonコントロールを2個、WinRTXAML Toolkitのコントロールである、WatermarkTextBoxを1個、ScrollViewerコントロールを1個配置し、その子要素としてGridViewコントロールを配置します。Imageコントロールを1個配置します。これらは、タブレットPCを縦にした場合に、水平スクロールを可能にするものです。
書き出されるXAMLはリスト4、レイアウトは図9のようになります。
リスト4 書き出されたXAMLコード(MainPage.xaml)
- (1)
要素を配置し、HorizontalScrollBarVisibilityプロパティにVisibleを指定して水平スクロールを可能にしています。この要素の子要素として以下の要素を配置します」 - (2)「画像検索」という文字を少し傾斜させて表示しています。
- (3)saveButtonという名前の
- (4)「検索人物名」という項目を表示する
要素を配置しています。 - (5)WatermarkTextBox1という名前のWinRTXAML Toolkitの
要素を配置し、WatermarkTextプロパティに「検索したい人物の名前を入力・・・・・」と指定しておきます。 - (6)okButtonという名前の
- (7)
要素を配置し、子要素としてGridView1という名前の 要素を配置します。
FlowDirectionプロパティにLeftToRightと指定し、左から右方向に表示されるようにします。 - (8)Image1という名前の
要素を配置します。実寸大の画像を表示するImageです。
StretchにはNoneを指定しています。Stretch列挙体については下記のURLを参照してください。
→ Stretch列挙体
<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>
RSSから国内ニュースを取得してタイルに表示するプログラム