前編では、「Windows Phone オーディオ再生エージェント」の追加と、そのロジックコードをメインに解説しました。今回は、分離ストレージまたはリモートURI からBackgroundAudioPlayerを再生する処理を追加して、プログラムを完成させます。
またExpression Blend 4（日本語版）を使ってButtonのUIを変更する処理も解説いたします。一度、前編を再読してから、後編を読むことをお勧めします。
サンプルは以下よりダウンロードできます（前編と同じ）。
→ 「バックグラウンドで音楽を再生する」のサンプルファイル（117.8MB）
※サンプル実行でエラーが発生した場合は、「ソリューションのビルド」を実行後、再度、デバッグ開始を行ってください
※ファイルサイズが大きいため、ダウンロードの際はご注意ください
まず、ソリューションエクスプローラーからApp.xamlを展開し表示されるApp.xaml.vb内に、リスト1のコードを記述します。
BackgroundAudioPlayerは分離ストレージまたはリモートURIからのみ再生できます。ファイルの配列に、プロジェクトに追加したオーディオの実際の名前を格納します。
ロジックコードを記述する
リスト1 (App.xaml.vb)
03 | 仮想ファイルシステムを作成および使用するための型が含まれている、System.IO.IsolatedStorage 名前空間をインポートします。 |
04 | Imports System.IO.IsolatedStorage |
06 | アプリケーションでのリソースの使用をサポートするクラスを提供する、System.Windows.Resources名前空間をインポートします。 |
07 | Imports System.Windows.Resources |
09 | Partial Public Class App |
11 | Public Property RootFrame As PhoneApplicationFrame |
初期化
1 | 曲目ファイルを分離ストレージから読み取るCopyWavToIsolatedStorageプロシージャを実行します。 |
3 | CopyWavToIsolatedStorage() |
曲目を分離ストレージから読み取り分離ストレージ内のファイルに書き出す処理
01 | BackgroundAudioPlayer は、ファイルを分離ストレージ、またはリモート URI からのみ再生できますので、wavファイル情報を分離ストレージから取得し分離ストレージ内のファイルに書き出します。 |
02 | 変数storageを、ファイルとディレクトリを格納している分離ストレージ領域を表すIsolateStorageFileクラスとして宣言し、呼び出し元のコードのアプリケーションIDに対応する、ユーザースコープの分離ストレージを取得します。 |
03 | 参照型変数filesに初期値として各wavファイルを格納します。 |
04 | 参照型変数filesコレクション内を、変数_fileNameで反復処理しながら以下の処理を行います。 |
05 | _fileNameに該当するファイルが存在しなかった場合は、wavファイルを格納しているWAVフォルダと_fileNameを連結した_filePath変数を宣言します。 |
06 | StreamResourceクラスの型のresource変数を宣言します。StreamResourceクラスは、GetResourceStreamメソッドを使って取得したリソースのストリーム情報を提供するクラスです。ここでは、WAVフォルダ内のwavファイルのストリーム情報を取得しています。WAVフォルダ内に追加したwavファイルは、ビルドアクションプロパティが「コンテンツ」になっていますので、GetResourceStreamメソッドでファイル名を指定してリソースを取得できます。 |
07 | IsolatedStorageFileStreamクラス型のオブジェクト変数fileを宣言します。IsolatedStorageFileStreamクラスは、分離ストレージ内のファイルを公開するクラスです。IsolatedStorageFileクラスのCreateFileメソッドで、変数_fileNameに格納されているファイルを、分離ストレージ内に作成します。Integer型変数bufferSizeに4096を格納し、bufferSizeで初期化された新しいByte型配列変数bufferを生成します。バッファサイズを4096確保します。 |
08 | StreamResourceInfoクラスのStream.Readメソッドで、リソースに格納されているストリームを読み取りIsolatedStorageFileStreamにWriteメソッドで書き込みます。InlineAssignHelperヘルパー関数(後述)を使っています。 |
09 | IsolatedStorageFileStream.Write メソッドの書式は下記の通りです。 |
10 | IsolatedStorageFileStream.Write(書き込むバッファ,開始位置を示すバッファ内のオフセット,書き込むバッファの最大バイト数) |
11 | Private Sub CopyWavToIsolatedStorage () |
12 | Using storage As IsolatedStorageFile = IsolatedStorageFile.GetUserStoreForApplication() |
13 | Dim files As String() = New String() {"AGAIN_Trial.wav", "DontCryMama_Trial.wav", "SambaDeOpacidade_Trial.wav", "TheGreenBells_Trial.wav"} |
14 | For Each _fileName In files |
15 | If storage.FileExists(_fileName) = False Then |
16 | Dim _filePath As String = "WAV/" & _fileName |
17 | Dim resource As StreamResourceInfo = Application.GetResourceStream(New Uri(_filePath, UriKind.Relative)) |
19 | Using file As IsolatedStorageFileStream = storage.CreateFile(_fileName) |
20 | Dim bufferSize As Integer = 4096 |
21 | Dim buffer As Byte() = New Byte(bufferSize) {} |
22 | Dim bufferCount As Integer |
23 | While (InlineAssignHelper(bufferCount, resource.Stream.Read(buffer, 0, bufferSize))) > 0 |
24 | file.Write(buffer, 0, bufferCount) |
MSDNのドキュメントで下記のように定義されているInlineAssignHelperヘルパー関数
1 | Private Shared Function InlineAssignHelper(Of T)(ByRef target As T, ByVal value As T) As T |
次に[WebBrowser]ボタンをクリックして遷移するページを作成します。
Windows Phone 縦向きのページ(WebBrowser.xaml)の追加
VS2010メニューの「プロジェクト(P)／新しい項目の追加(W)」と選択して、「Windows Phone 縦向きのページ」を選択し、「名前（N）」に「WebBrowser.xaml」と指定します。[追加(A)]ボタンをクリックします（図1）。
|
|
| 図1：Windows Phone 縦向きのページを追加する（クリックで拡大） |
WebBrowser.xamlの編集とコントロールの追加
x:NameがApplicationTitleとPageTitleというTextBlockを削除します。x:NameがTitlePanelというStackPanel内にツールボックスから、TextBoxとButtonコントロールを1個ずつ配置します。横に配置するため、StackPanelのOrientationプロパティにHorizontalと指定します。デフォルトはVerticalです。TextBoxのTextプロパティには「http://jp.msn.com/」と記述しMSNのサイトを指定しておきます。
次に、TextBoxとButtonコントロールの下にツールボックスからWebBrowserコントロールを1個配置します。WebBrowserコントロールのプロパティウィンドウ内の[共通]パネルにある、IsScriptEnabledにチェックを付けておきます。チェックを付けないでおくと、JavaScriptが無効になり、正常に表示されないページが出てきます。書き出されるXAMLコードはリスト2のようになります。
リスト2 書き出されたXAMLコード(WebBrowser.xaml)
01 | （１）TitlePanelというx:Nameの<StackPanel>要素のOrientationプロパティにHorizontalを指定し、中に<TextBox>と<Button> 要素を1個ずつ配置します。<TextBox> のTextプロパティには「http://jp.msn.com/」と指定しておきます。<Button> 要素のContentプロパティには「実行」と指定します。 |
02 | （２）<phone:WebBrowser>要素のIsScriptEnabledにはTrueと指定されています。 |
03 | <phone:PhoneApplicationPage |
04 | x:Class="WP71_BackgroundAudioPlayer.WebBrowser" |
07 | xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" |
08 | xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" |
11 | FontFamily="{StaticResource PhoneFontFamilyNormal}" |
12 | FontSize="{StaticResource PhoneFontSizeNormal}" |
13 | Foreground="{StaticResource PhoneForegroundBrush}" |
14 | SupportedOrientations="Portrait" Orientation="Portrait" |
15 | mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480" |
16 | shell:SystemTray.IsVisible="True" Langugae=”ja-JP”> |
18 | <!--LayoutRoot is the root grid where all page content is placed--> |
19 | <Grid x:Name="LayoutRoot" Background="Transparent"> |
21 | <RowDefinition Height="Auto"/> |
22 | <RowDefinition Height="*"/> |
23 | </Grid.RowDefinitions> |
25 | <!--TitlePanel contains the name of the application and page title--> |
26 | <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28" Orientation="Horizontal"> ■（１） |
28 | <Button x:Name="uriGoButton" Content="実行"/> |
31 | <!--ContentPanel - place additional content here--> |
32 | <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> |
33 | <phone:WebBrowser Height="634" HorizontalAlignment="Left" Margin="6,6,0,0" Name="WebBrowser1" VerticalAlignment="Top" Width="444" IsScriptEnabled="True" /> ■（２） |
37 | </phone:PhoneApplicationPage> |
全て配置すると図2のようになります。
|
|
| 図2：TextBox、Button、WebBrowserコントロールを配置した（クリックで拡大） |
