デスクトップのクラウディアさんが声で励ましてくれるプログラムを作る

2013年5月7日(火)
薬師寺 国安

ピクチャライブラリへのアクセス許可

ピクチャライブラリに内に、claudiaXMLというフォルダを作成して、claudiaInfo.xmlを保存しますので、ピクチャライブラリへのアクセス権が必要になります。ソリューションエクスプローラー内のPackage.appxmanifestをダブルクリックして開きます。「機能」タブ内の「画像ライブラリ」にチェックを付けます(図4)。

図4:Package.appxmanifestを開いて「画像ライブラリ」にチェックを付ける(クリックで拡大)

Windows ストア空白のページの作成(ClaudiaShowPage.xaml)

VS2012のメニューの「プロジェクト(P)/新しい項目の追加(W)」と選択して、左に表示される項目からWindows ストアを選択します。右に表示されるテンプレートから「空白のページ」を選択します。「名前(N):」にはClaudiaShowPage.xamlと指定して、[追加(A)]ボタンをクリックします。

コントロールの配置

ツールボックスからClaudiaShowPage.xamlのデザイン画面上にコントロールを配置します。
Imageコントロールを1個、MediaElementコントロールを1個、Buttonコントロールを2個、TextBlockコントロールを1個配置します。
書き出されるXAMLコードはリスト3、レイアウトは図5のようになります。

リスト3 書き出されたXAMLコード(ClaudiaShowPage.xaml)

  • (1) 名前がClaudiaImageという要素を配置しています。
  • (2) 名前がMediaElement1という要素を配置しています。IsLoopingプロパティにTrueを指定していますので、[Stop]ボタンがタップされるまで言葉を喋り続けます。
  • (3) 名前がplayButtonという
  • (4) stopButtonという名前の
  • (5) メッセージを表示する要素を配置しています。
<Page
  x:Class="Claudia.ClaudiaShowPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:Claudia"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d">
  <Grid Background="{StaticResourceApplicationPageBackgroundThemeBrush}">
    <Image x:Name="ClaudiaImage" HorizontalAlignment="Left" Height="642" Margin="600,59,0,0" VerticalAlignment="Top" Width="221"/>■(1)
    <MediaElementx:Name="MediaElement1" HorizontalAlignment="Left" Height="61" Margin="1015,336,0,0" VerticalAlignment="Top" Width="273" IsLooping="True"/>■(2)
    <Button x:Name="playButton" HorizontalAlignment="Left" Height="95" Margin="863,263,0,0" VerticalAlignment="Top" Width="100" Style="{StaticResourcePlayAppBarButtonStyle}" IsEnabled="False"/>■(3)
    <Button x:Name="stopButton" HorizontalAlignment="Left" Height="85" Margin="863,363,0,0" VerticalAlignment="Top" Width="100" Style="{StaticResourceStopAppBarButtonStyle}"/>■(4)
    <TextBlockHorizontalAlignment="Left" Height="144" Margin="42,614,0,0" TextWrapping="Wrap" Text="Stopアイコンで音声を中止してから戻ってください。" VerticalAlignment="Top" Width="524" FontFamily="Meiryo UI" FontSize="48" FontWeight="Bold" Foreground="Crimson"/>■(5)
  </Grid>
</Page>
図5:各種コントロールを配置した(クリックで拡大)

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

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

リスト4 (MainWindow.xaml.vb)

Option Strict On

ファイルやフォルダ、およびアプリケーションの設定を管理するクラスの含まれる、Windows.Storage名前空間をインポートします。

Imports Windows.Storage

シーケンシャルアクセスストリームおよびランダムアクセスストリームに対する読み込みと書き込みのサポートを提供するクラスの含まれる、Windows.Storage.Streams名前空間をインポートします。

Imports Windows.Storage.Streams

ClaudiaInfo構造体を定義します。文字列型のClaudiaImageとmyWavプロパティを定義しておきます。

Structure ClaudiaInfo
  Property ClaudiaImage As String
  Property myWav As String
End Structure
Public NotInheritable Class MainPage
  Inherits Page

XMLの要素を表すXElementクラス型のメンバ変数、xmldocとwavXmldocを宣言しておきます。

  Dim xmldoc As XElement
  Dim wavXmldoc As XElement
 
  Dim claudiaSelectedImage As String
  Dim wavSelectedFile As String

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

ピクチャライブラリにアクセスします。
CreateFolderAsyncメソッドでピクチャライブラリ内にclaudiaXMLというサブフォルダを作成します。
CreationCollisionOption.OpenIfExistsを指定すると、既に同名フォルダが存在する場合は、そのフォルダ名を返し、存在しない場合は新規に作成されます。

GetFilesAsyncメソッドでclaudiaXML内のファイルを取得します。CountプロパティでclaudiaXMLサブフォルダ内にあるファイルの個数を取得し、0より大きい場合、つまりファイルが存在する場合は、Folderアイコンの使用を可能にします。それ以外は使用不可とします。

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

ClaudiaInfo構造体型の新しいリストであるmyClaudiaInfoを作成します。
Descendantsメソッドで全ての子孫要素のコレクションに対して、その要素を変数resultに格納しながら反復処理を行います。
ClaudiaInfo構造体のClaudiaImageプロパティに、ms-appx:///Images/という文字列と要素の属性”small”の値を連結して指定します。その値をAddメソッドでmyClaudiaInfoオブジェクトに追加します。
claudiaListBoxのItemsSourceプロパティにmyClaudiaInfoオブジェクトを指定します。
リストボックス内に小さなクラウディアの一覧が表示されます。

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

ClaudiaInfo構造体型の新しいリストであるmySoundListを作成します。
Descendantsメソッドで全ての子孫要素のコレクションに対して、その要素を変数resultに格納しながら反復処理を行います。
ClaudiaInfo構造体のmyWavプロパティに、要素の属性”word”の値を指定します。
その値をAddメソッドでmySoundListオブジェクトに追加します。
wavListBoxのItemsSourceプロパティにmySoundListオブジェクトを指定します。
するとリストボックス内に言葉の一覧が表示されます。

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

  Protected Overrides Async Sub OnNavigatedTo(e As Navigation.NavigationEventArgs)
    Dim myStorageFolder As StorageFolder = Windows.Storage.KnownFolders.PicturesLibrary
    Dim mySubFolder = Await myStorageFolder.CreateFolderAsync("claudiaXML", CreationCollisionOption.OpenIfExists)
    Dim myFile = Await mySubFolder.GetFilesAsync()
    If myFile.Count> 0 Then
      openButton.IsEnabled = True
    Else
      openButton.IsEnabled = False
    End If

    xmldoc = XElement.Load("claudia.xml")
    Dim myClaudiaInfo As New List(Of ClaudiaInfo)
    For Each result In From c In xmldoc.Descendants("Item") Select c
      With myClaudiaInfo
        .Add(New ClaudiaInfo With {.ClaudiaImage = "ms-appx:///Images/" &result.Attribute("small").Value})
      End With
    Next
    claudiaListBox.ItemsSource = myClaudiaInfo

    wavXmldoc = XElement.Load("sound.xml")
    Dim mySoundList As New List(Of ClaudiaInfo)
    For Each result In From c In wavXmldoc.Descendants("Item") Select c
      With mySoundList
        .Add(New ClaudiaInfo With {.myWav = result.Attribute("word").Value})
      End With
    Next
    wavListBox.ItemsSource = mySoundList
  End Sub

クラウディアの表示されているリストボックスからクラウディアが選択された時の処理

claudiaListBoxの選択されたインデックスの値が0かそれより大きく、且つwavListBoxの選択されたインデックスの値が0かそれより大きい場合、つまり、claudiaListBoxからクラウディアが選択され、且つ喋る言葉が選択された場合は、[Save]アイコンの使用を可能にします。それ以外は使用不可とします。

  Private Sub claudiaListBox_SelectionChanged(sender As Object, e As SelectionChangedEventArgs) Handles claudiaListBox.SelectionChanged
    If claudiaListBox.SelectedIndex>= 0 AndAlsowavListBox.SelectedIndex>= 0 Then
      saveButton.IsEnabled = True
    Else
      saveButton.IsEnabled = False
    End If
  End Sub
  • クラウディアのプログラムサンプル

薬師寺国安事務所

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

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