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

次に、ソリューションエクスプローラー内の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プロパティに

非同期処理で行われるため、メソッドの先頭に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と入力すると、公開されているアプリの一覧が表示されます。上記はどちらも私のアカウントですので、興味のある方は是非ダウンロードして使ってみてください。