使ってみよう! Live Framework

第9回 Mesh-Enabled Web アプリケーション ―― 共有メディアプレイヤー

この記事を読むのに必要な時間:およそ 7.5 分

ファイル一覧の表示

Live Meshフォルダ内にあるファイルを取得し,アプリケーションのウィンドウに一覧表示する部分を作成します。SilverlightプロジェクトにあるPage.xamlのGrid以下を次のように編集します。

<Grid x:Name="LayoutRoot" Background="White">
    <MediaElement x:Name="Player" Visibility="Collapsed" />
    <ItemsControl x:Name="MediaListControl" Margin="5" >
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>                    
                <Button Margin="1" Click="Button_Click">
                    <Button.Content>
                        <StackPanel Orientation="Horizontal">
                            <Image Source="sound.png" Width="16" Height="16" VerticalAlignment="Center" Margin="2" />
                            <TextBlock Text="{Binding Title}" VerticalAlignment="Center" />
                        </StackPanel>
                    </Button.Content>
                </Button>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>

メディアファイルの再生のためのMediaElementコントロール(非表示にしています。つまり動画も音声のみ再生です)とコレクションを表示するためにItemsControlコントロールを記述しています。ItemsControlに設定するコレクションのアイテムはData Entryのリソースを格納するようこの後コーディングします。

コレクションの各アイテムの表示方法は<DataTemplate>に定義しています。Buttonコントロール内にImage,TextBlockコントロールがあります。TextBlockにはリソースのTitleプロパティを表示するよう指定しています。Imageコントロールには音符の画像を指定しています。画像は適当に用意していただくか,このコントロール自体を削除しても構いません。

続いてMesh上のLive Meshフォルダからメディアファイルを取得し,アプリケーションに表示するロジック部分を記述します。ファイルPage.xaml.vb内に次のメソッドを追加します。

' メディアファイル一覧表示
Private Sub ShowMediaList()

    ' ItemsControl アイテムクリア
    MediaListControl.Items.Clear()

    For Each mo In From m In meshApp.LiveOperatingEnvironment.Mesh.MeshObjects.Entries _
                   Where m.Resource.Type = "LiveMeshFolder"
        ' Live Mesh フォルダ一覧

        Try
            For Each df In From d In mo.DataFeeds.Entries _
                           Where d.Resource.Type = "LiveMeshFiles"
                ' Live Mesh ファイル一覧

                ' メディアファイルのみ取得
                Dim medias = From de In df.DataEntries.Entries _
                             Where de.Resource.Type = "File" AndAlso _
                                  (de.Resource.Title.ToUpper.EndsWith(".WMA") OrElse _
                                   de.Resource.Title.ToUpper.EndsWith(".WMV"))

                For Each m In medias
                    ' ItemsControl に追加
                    MediaListControl.Items.Add(m.Resource)
                Next
            Next
        Catch ex As InvalidOperationException
            ' Ignore
        End Try
    Next
End Sub

上記メソッドではMesh上のMesh ObjectからLive Meshフォルダであるものを探し,さらにその中のファイルについて拡張子がwmaとwmvであるものをItemsControlのItemsコレクションへ追加しています。コレクションへ追加しているアイテムはData EntryのResourceプロパティの内容(DataEntryResourceオブジェクト)です。

このメソッドをアプリケーションロード時に呼び出すようmeshAppLoadedメソッド内に追記しておきましょう。

Private Sub meshAppLoaded(ByVal o As Object, ByVal e As EventArgs)
    'Mesh application service object is now loaded and usable.
    ShowMediaList()
End Sub

ボタンクリック時のイベント処理は,クリック時に対象のメディアファイルが再生されるよう仮に次のように記述しておきます。

Private Sub Button_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
    Dim button = DirectCast(sender, Button)
    Dim resource = DirectCast(button.DataContext, DataEntryResource)
    Player.Source = resource.EditMediaLink
    Player.Play()
End Sub

引数のsenderオブジェクトからクリックされたボタンを取得し,ButtonオブジェクトのDataContextプロパティからData Entryのリソースを取得しています。メディアファイルへのURLはEditMediaLinkプロパティから取得し,これをMediaElementコントロール(名前Player)のSourceプロパティに指定することでメディアファイルの再生が可能です。最後にPlayメソッドを呼んでいます。

Live Meshフォルダのアクセス許可

ここまでを実行してみましょう。初回実行時のみ,Azure Services Developer Portal上にプロジェクトの作成や,アプリケーションパッケージのアップロード作業などが必要です。

初めて実行する場合は,Live Meshフォルダへのアクセスをアプリケーションに対して許可していないため,ひとつもファイルが表示されないはずです。Live Framework Developer Sandboxにサインインし,Appタブから対象アプリケーションを選択しアクセス許可を変更します。⁠edit」リンクをクリックし,移動ページ先の「change」リンクからメディアファイルが入っているフォルダを選択します図3,4)⁠

図3 アプリケーションページ

図3 アプリケーションページ

図4 アクセス許可の設定

図4 アクセス許可の設定

アクセス許可設定後,再度アプリケーションを実行してみましょう。フォルダ内のメディアファイルがボタンとして表示され,クリックするとそのファイルが再生されれば成功です。

著者プロフィール

松江祐輔(まつえゆうすけ)

日本システムウエア株式会社 勤務。現在,ハードウェア設計・検証業務を担当。大学生・大学院生時代はベンチャー企業 有限会社ミレニアムシステムズにプログラマーとして従事。趣味はプログラミング。好きな言語はVisual Basic。Microsoft MVP for Windows Live Platform(Jul 2010 - Jun 2011),Windows Live(Jul 2011 - Jun 2013)。

URL:http://katamari.jp