PR

画像の一覧表示と、ListBoxに表示されたYoutubeの再生を試す

2012年11月5日(月)
薬師寺 国安

ListBoxより選択されたYoutubeを再生する

Windows ストアアプリではYoutubeを再生することが可能です。ListBoxに表示されたYoutubeの一覧から、任意の項目名を選択すると、指定したYoutubeが再生されます(図5)。

自分のお気に入りのYoutubeをXMLファイルに記録しておくと、いつでも好きな時に、自分なりのYoutubeリストが作成でき、再生を楽しむことができます。

図5:Youtubeが再生されている(クリックで拡大)

実際に動かした動画は下記のようになります。Windows Store Applicationの動画を撮るアプリケーションが存在していませんので、スマホでとった動画です。見難い点はご了承願います。

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

プロジェクトの作成

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

次に、ソリューションエクスプローラー内にリスト4のXML文書ファイルを追加しておきます。

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

リスト4 XML文書ファイル(youtube.xml)

属性idにYoutubeのIDを指定しています。YoutubeのIDは図6を参照してください。

<?xml version="1.0" encoding="utf-8" ?>
<youtube>
  <info id="bs9R9-vbeN4">Microsoft XBOX</info>
  <info id="a6cNdhOKwi0">未来予想動画</info>
  <info id="DWTjtQqKwcc">Windows Azure とは何か? </info>
  <info id="p92QfWOw88I">Building Windows 8</info>
  <info id="BOvtLqz0BWY">Windows Phone </info>
  <info id="dact-1Tdgz0">Microsoft Sustainability</info>
  <info id="royJee1SQlY">Windows Phone 8</info>
  <info id="MRPSaycTWew">Windows 8(Pro) Install</info>
</youtube>
図6:YoutubeのID(クリックで拡大)

コントロールの配置

ツールボックスからデザイン画面上にWebViewコントロールを1個、ListBoxコントロール1個配置します(図7)

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

※実際に実行した場合と、デザイン画面にコントロールを配置した場合とで、若干コントロールの位置がずれて表示されますので、意図的にコントロールをずらしてレイアウトしています。

書き出されるXAMLコードは省略します。

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

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

リスト5 (MainWindow.xaml.vb)

Option Strict On
  Public NotInheritable Class MainPage
  Inherits Page

XMLを表すXElementクラス型のオブジェクト変数xmldocを宣言します。

  Dim xmldoc As XElement

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

XElement.LoadメソッドでXML文書ファイル(youtube.xml)を読み込みます。

文字列型の新しいリストであるtitleオブジェクトを作成します。

Descendantsメソッドで子孫要素である要素コレクション内の各要素を変数resultに格納しながら、以下の処理を行います。

Addメソッドでtitleオブジェクトに要素の値を追加します。ListBoxのItemsSourceプロパティにtitleオブジェクトを指定します。これで、リストボックス内にYoutubeの項目名が一覧で表示されます。

  Protected Overrides Sub OnNavigatedTo(e As Navigation.NavigationEventArgs)
    xmldoc = XElement.Load("youtube.xml")
    Dim title As New List(Of String)
    For Each result In From c In xmldoc.Descendants("info") Select c
      title.Add(result.Value)
    Next
    ListBox1.ItemsSource = title
  End Sub

リストボックス内の項目が選択された時の処理

選択された項目のインデックスを変数Indexに格納しておきます。

Indexに対応する要素の属性”id”の値を取得して、変数myIDに格納します。

WebViewのNavigateToStringメソッドに

と指定します。YoutubeのURLの後ろにYoutubeのID(myID)を指定します。

NavigateToStringメソッドは、指定された HTML コンテンツを表示するメソッドです。これで、WebView内にYoutubeが表示されます。

  Private Sub ListBox1_SelectionChanged(sender As Object, e As SelectionChangedEventArgs) Handles ListBox1.SelectionChanged
    Dim Index As Integer = ListBox1.SelectedIndex
    Dim myID As String = xmldoc.Descendants("info")(Index).Attribute("id").Value
    WebView1.NavigateToString("<embed width='1024' height='768' src='http://www.youtube.com/embed/" & myID & "'" & "frameborder='0' allowfullscreen></embed>")
  End Sub
End Class

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

  • 画像を横一列に表示するサンプルアプリ

  • ListBoxに表示されたYoutube動画を再生するサンプルアプリ

薬師寺国安事務所

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

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