PR

観たいジャンルの動画一覧をタイルに表示するプログラムを作る

2013年4月25日(木)
薬師寺 国安

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

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

リスト3 (MainWindow.xaml.vb)

Option Strict On

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

Imports System.Net.Http

Public NotInheritable Class MainPage
  Inherits Page

NewsInfoというクラス内で文字列型のPubDate、titleとlinkプロパティを定義しておきます。

  Public Class NewsInfo
    Property PubDate As String
    Property title As String
    Property link As String
  End Class

文字列型のyoutubeNameというメンバ変数を宣言しておきます。この変数にはTextBoxの入力欄に入力された値が格納されます。

  Dim youtubeName As String

「見たいYoutube」の入力ボックスに検索項目を入力して、該当データがタイルで表示される処理

変数myUrlにhttp://www.youtube.com/rss/tag/とTextBoxの入力欄に入力された値が格納されているyoutubeNameの値と拡張子「.rss」を連結した文字列を格納しておきます。

検索文字列にAKB48と入力して返されるrssの構造は、図5のような構造です。

図5:AKB48と入力して返されるrssの構造の一部。赤い枠線で囲まれた要素を取得します(クリックで拡大)

新しいHttpClientのインスタンスmyHttpClientオブジェクトを作成します。
GetStringAsyncメソッドで、指定したURIにGET要求を送信し、非同期操作で応答本体を文字列として取得します。
取得した値を変数myResultに格納しておきます。

XElement.ParseメソッドmyResult変数に格納されている値を文字列として読み込みます。
Descendantsメソッドで全ての子孫要素要素を選択するクエリーmyMenuQueryを定義します。
Countプロパティで要素の個数を取得します。要素の個数が0か0より小さい場合は、検索されたデータがないということですので、TitleTextBlockに「該当なし」と表示して、処理を抜けます。

データが存在した場合は、NewsInfoクラス型の新しいリストであるmyNewsInfoオブジェクトを作成します。
Descendantsメソッドで、全ての子孫要素内の要素を変数resultに格納しながら、以下の処理を反復します。
NewsInfoクラスのPubDateプロパティに要素の値を、titleプロパティに要素の値を、linkプロパティに<link />要素の値を指定して、AddメソッドでmyNewsInfoオブジェクトに追加していきます。<br /> GridViewのItemsSourceプロパティにmyNewsInfoオブジェクトを追加します。これで、AKB48に関する「日付」と「タイトル」がタイルに表示されます。TitleTextBlockに入力した検索文字列と”動画一覧”を連結して表示します。

非同期処理で行われるため、メソッドの先頭にAsyncを追加します。

  Private Async Sub MenuShow()
    Dim myUrl = "http://www.youtube.com/rss/tag/" &youtubeName& ".rss"
    Dim myHttpClient As New HttpClient
    Dim myResult As String = Await myHttpClient.GetStringAsync(myUrl)
    Dim xmldoc As XElement = XElement.Parse(myResult)
 
    Dim myMenuQuery = From c In xmldoc.Descendants("item") Select c
    If myMenuQuery.Count<= 0 Then
      TextBox1.Text = String.Empty
      TitleTextBlock.Text = "該当なし"
      GridView1.ItemsSource = Nothing
      Exit Sub
    Else
      Dim myPubDate As String = xmldoc.Descendants("item").Elements("pubDate").Value
      Dim displayDate As String = myPubDate.Substring(0, 16)
      TitleTextBlock.Text = youtubeName& "の動画一覧"
      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 If
  End Sub

GridViewの項目が選択された時の処理

myFrameを表示状態にします。
変数myYoutubeに、GridViewから選択された項目を、NewsInfoクラスにキャストして、そのlinkプロパティの値を取得して格納します。
取得したmyYoutube変数を引数にAKB48Youtubeページに遷移します。

  Private Sub GridView1_SelectionChanged(sender As Object, e As SelectionChangedEventArgs) Handles GridView1.SelectionChanged
    Try
      myFrame.Visibility = Windows.UI.Xaml.Visibility.Visible
      Dim myYoutube As String = DirectCast(GridView1.SelectedItem, NewsInfo).link
      myFrame.Navigate(GetType(AKB48Youtube), myYoutube)
    Catch
      Exit Sub
    End Try
  End Sub

戻る(←)アイコンがクリックされた時の処理

myFrameを非表示にします。

  Private Sub backButton_Click(sender As Object, e As RoutedEventArgs) Handles backButton.Click
    myFrame.Visibility = Windows.UI.Xaml.Visibility.Collapsed
  End Sub

Yesアイコンがクリックされた時の処理

変数youtubeNameにTextBox1に入力された検索文字列を格納します。
myFrameを表示状態にします。
タイルにデータを表示するMenuShowプロシージャを実行します。

  Private Sub OkButton_Click(sender As Object, e As RoutedEventArgs) Handles OkButton.Click
    If TextBox1.Text = String.Empty Then
      Exit Sub
    Else
      GridView1.SelectedIndex = -1
      youtubeName = TextBox1.Text
      myFrame.Visibility = Windows.UI.Xaml.Visibility.Collapsed
      MenuShow()
    End If
  End Sub
End Class

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

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

リスト4 (AKB48Youtube.xaml.vb)

Option Strict On
Public NotInheritable Class AKB48Youtube
  Inherits Page

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

MainPage.xamlから送られた値を,e.Parameterで受け取ります。これはObject型であるため、DirectCastで文字列に変換し、変数myUriに格納します。変数myUriには下記のようなリンクが格納されます。
http://www.youtube.com/watch?v=Bpu4rIe1X98&feature=youtube_gdata

上記のリンクからYoutubeのIDを取得します。YoutubeのIDはv= Bpu4rIe1X98のv=以降の値になります。この値を取得するために、SubStringを使って取得し、変数myIDに格納します。

WebViewのNavigateToStringメソッドに
""
と指定します。NavigateToStringメソッドは指定したHTMLコンテンツを表示するメソッドです。

  Protected Overrides Sub OnNavigatedTo(e As Navigation.NavigationEventArgs)
    Dim myUri As String = DirectCast(e.Parameter, String)
    Dim myID = myUri.Substring(31, 11)
    WebView1.NavigateToString("<embed width='640' height='360' src='http://www.youtube.com/embed/" &myID& "'" & "frameborder='0' allowfullscreen></embed>")
  End Sub

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

WebViewを全ての関連付けから解放します。

  Protected Overrides Sub OnNavigatedFrom(e As Navigation.NavigationEventArgs)
    WebView1 = Nothing
    MyBase.OnNavigatedFrom(e)
  End Sub
End Class

今回はここまでです。ありがとうございました。

ここで紹介したサンプルを元に作成したWindows ストアアプリが、下記のURLで公開されています。UIも多少異なっています。興味のある方は使ってみてください。
→ 新版:動画一覧(Windows ストア)

筆者からのお知らせ

筆者はWindowsストアでアプリを公開しています。チャームの検索からWindowsストアを選択して、検索欄に、kuniyasuまたはYakushijiKuniyasuと入力すると、公開されているアプリの一覧が表示されます。上記はどちらも私のアカウントですので、興味のある方は是非ダウンロードして使ってみてください。

  • 観たいジャンルの動画一覧をタイルに表示するプログラムサンプル

薬師寺国安事務所

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

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