Webカメラで撮影した画像に音声コメントを付けて保存・再生するには：2カ月で160本作った還暦開発者が送る10のアプリ開発ノウハウ（6）（4/4 ページ）

[薬師寺国安，PROJECT KySS]

保存した画像の一覧と音声を再生する画面のロジックコード（DataIchiranShowPage.xaml.vb）

　次に、［ソリューション・エクスプローラー］内の「DataIchiranShowPage.xaml」を展開して「DataIchiranShowPage.xaml.vb」のコードを記述する。

　ここではコードが長くなるため、一部省略している。全てのコードは、サンプルをダウンロードして「DataIchiranShowPage.xaml.vb」ファイルで確認してほしい。

GridView1に画像の一覧を表示する処理（DataShowタスク処理）

    Private Async Function DataShow() As Task
        Dim myFolder As StorageFolder = Windows.Storage.KnownFolders.PicturesLibrary
        Dim mySubFolder = Await myFolder.CreateFolderAsync("ImageVoiceRecord", CreationCollisionOption.OpenIfExists)
        myPictureFiles = Await mySubFolder.GetFilesAsync
        If myPictureFiles.Count = 0 Then
            Dim message As New MessageDialog("画像データがありません。戻ってください。")
            Await message.ShowAsync
            Exit Function
        End If
        For Each result In myPictureFiles
            Dim bmp As New BitmapImage
            bmp.SetSource(Await result.OpenReadAsync)
            Dim myStackPanel As New StackPanel
            With myStackPanel
                .Orientation = Orientation.Horizontal
                .Margin = New Thickness(5)
            End With
            Dim myImage As New Image
            With myImage
                .Width = 160
                .Height = 120
                .Source = bmp
            End With
            myStackPanel.Children.Add(myImage)
            GridView1.Items.Add(myStackPanel)
        Next
        AddHandler GridView1.Loaded, AddressOf GridView1_Loaded
    End Function

　以降、上記コードの中身を詳細に見ていこう。

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

　次に、ピクチャライブラリーの「ImageVoiceRecord」フォルダーにアクセスし、GetFilesAsyncメソッドで画像ファイルを取得する。画像ファイルがない場合はメッセージダイアログを表示して処理を抜ける。

　画像ファイルを格納しているメンバー変数「myPictureFiles」コレクション内のファイルを、変数resultに格納しながら以下の処理を行う。

　新しいBitmapImageのインスタンスbmpオブジェクトを作成する。SetSourceメソッドに、「Await result.OpenReadAsync」と指定して、ランダムアクセス用のストリームを開き、BitmapSourceのソースイメージを設定する。

　StackPanelの新しいインスタンスmyStackPanelオブジェクトを作成し、オブジェクトのスタック方向を指定するOrientationプロパティに水平方向を表す「Horizontal」を指定する。Marginプロパティに「5」を指定して余白を設ける。

　新しいImageのインスタンスmyImageオブジェクトを作成する。Widthに「160」、Heightに「120」を指定して、Sourceプロパティにbmpオブジェクトを追加する。

　myStackPanelオブジェクトにAddメソッドでmyImageオブジェクトを追加する。GridView1にAddメソッドでmyStackPanelオブジェクトを追加する。これでGridView1に小さな画像の一覧が表示される。

　AddHandlerステートメントでGridView1が読み込まれた時のイベントハンドラを追加しておく。

GridView1の画像が選択された時の処理（GridView1_SelectionChangedメソッド処理）

    Private Async Sub GridView1_SelectionChanged(sender As Object, e As SelectionChangedEventArgs) Handles GridView1.SelectionChanged
        Try
            playButton.IsEnabled = True
            myIndex = GridView1.SelectedIndex
            pauseButton.IsEnabled = False
            stopButton.IsEnabled = False
            Dim myFolder As StorageFolder = Windows.Storage.KnownFolders.PicturesLibrary
            Dim mySubFolder = Await myFolder.CreateFolderAsync("ImageVoiceRecord", CreationCollisionOption.OpenIfExists)
            Dim myFiles = Await mySubFolder.GetFilesAsync
            Dim bmp As New BitmapImage
            bmp.SetSource(Await myFiles(myIndex).OpenReadAsync)
            Image1.Source = bmp
            Dim wavFolder = KnownFolders.PicturesLibrary
            Dim myWavSubFolder = Await wavFolder.CreateFolderAsync("ImageRecordSoundFile", CreationCollisionOption.OpenIfExists)
            Dim myWavFiles = Await myWavSubFolder.GetFilesAsync
            Dim getWavFile = Await myWavSubFolder.GetFilesAsync(Path.GetFileNameWithoutExtension(myWavFiles(myIndex).Path) & ".mp4")
            fileNameTextBlock.Text = Path.GetFileNameWithoutExtension(myWavFiles(myIndex).Path)
            Dim soundStream = Await getWavFile.OpenAsync(FileAccessMode.Read)
            MediaElement1.SetSource(soundStream, getWavFile.ContentType)
            deleteButton.IsEnabled = True
        Catch
            Exit Sub
        End Try
    End Sub

　以降、上記コードの中身を詳細に見ていこう。

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

　次に、「再生」アイコンの使用を可能にする。GridView1から選択されたインデックスを、メンバー変数「myIndex」に格納しておく。

　「休止」「停止」アイコンの使用を不可としておく。ピクチャライブラリー内の「ImageVoiceRecord」フォルダーにアクセスする。

　GetFilesAsyncメソッドで画像ファイルを取得して、変数myFilesで参照しておく。

　新しいBitmapImageのインスタンスbmpオブジェクトを作成し、SetSourceメソッドに、「Await myFiles(myIndex).OpenReadAsync」と指定して、メンバー変数「myIndex」に対応する、ランダムアクセス用のストリームを開き、BitmapSourceのソースイメージを設定する。

　Image1のSourceプロパティにbmpオブジェクトを指定する。GridView1から選択した画像の640×480サイズの画像が表示される。

　ピクチャライブラリー内の「ImageRecordSoundFile」フォルダーにアクセスする。GetFilesAsyncメソッドでMP4の音声ファイルを取得して、変数「myWavFiles」で参照しておく。

　変数「getWavFile」でMP4ファイルを取得して参照し、「fileNameTextBlock」に拡張子を除いたファイル名を表示する。

　OpenAsyncメソッドで、ファイルのランダムアクセスストリームを読み取り専用モードで開き、変数soundStreamで参照しておく。

　MediaElement1のSetSourceメソッドで、指定されたストリームを使用して、Sourceプロパティを設定する。SetSourceの書式は下記の通り。

MediaElement.SetSource(stream As Windows.Storage.Streams.IRandomAccessStream,mimeType as String)

　最後に、「削除」アイコンの使用を可能にする。

次回は、選択した画像と、テクスチャとなる画像を合成して保存する

　今回はここまでだ。また次回の記事でお会いしよう。次回は、選択した画像と、テクスチャとなる画像を合成して保存する方法を紹介する。

関連リンク

• 2013流行語アプリ選手権＆総選挙 by ＠IT Windowsタブレット向けアプリ開発

本コンテストでは、2013年9月1日〜12月1日に新たにWindowsストアに新規公開されたアプリを募集します。入賞したアプリの製作者には、総額130万円の賞金が授与されますので、ふるってご応募ください。

著者プロフィール

PROJECT KySS 薬師寺 国安（やくしじ くにやす）

1950年生まれ。フリーVBプログラマ。高級婦人服メーカーの事務職に在職中、趣味でVBやActiveXに取り組み、記事を執筆。2003年よりフリー。.NETやRIAに関する執筆多数。Windowsストアアプリも多数公開中（約270本）。

　

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）。

PROJECT KySSは、1997年に薬師寺聖と結成したコラボレーション・ユニット