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

開発ツール

技術解説

連載 :

Windows Storeアプリ開発で今覚えておきたいTips10選+α

2013年5月7日(火)

薬師寺国安

今回のサンプルでは、下記のMicrosoftのURLで提供されているクラウディアの画像と音声を使用しています。
→　クラウドガール　キャラクター利用ガイドライン、解説集

必ず使用ガイドラインに則ってご利用ください。今回の記事で利用させていただくことは、Microsoft様より使用許諾をいただいています。

まず、気に入ったクラウディアを選択し、喋らせたい言葉を選択します。[Save]アイコンの使用が可能になりますので、アイコンをタップします（図1）。
選択したクラウディアが表示され、選択された言葉を喋り続けます（図2）。
お喋りを中止したい場合は[Stop]アイコンをタップします。
左隅上の戻る(←)アイコンをタップして最初の画面に戻る場合は、必ず[Stop]アイコンでお喋りを停止してから戻ってください。データはXMLで保存されます。
同名ファイルで順次上書きされます。既に一度データを作成していると[Folder]アイコンの使用が可能になります。このアイコンをタップすると最後に作成したデータが読み込まれ、クラウディアが表示されてお喋りを続けます。

図1：クラウディアと音声を選択して[Save]アイコンをタップする（クリックで拡大）

図2：選択したクラウディアが選択した言葉を喋り続ける（クリックで拡大）

実際に動かした動画は下記のようになります。スマホで撮影したため、見難い点はご了承願います。

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

プロジェクトの作成

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

ソリューションエクスプローラー内にImagesとWAVというフォルダを作って、クラウディアの画像と音声ファイルを配置しておきます。またリスト1のclaudia.xmlとsound.xmlファイルもClaudiaプロジェクト内に配置しておきます。

リスト1　XML文書ファイル

01●claudia.xml
02<?xml version="1.0" encoding="utf-8" ?>
03<Claudia>
04  <Item small="s_claudia_01.png" Large="claudia_01.png"/>
05  <Item small="s_claudia_02.png" Large="claudia_02.png"/>
06  <Item small="s_claudia_03.png" Large="claudia_03.png"/>
07  <Item small="s_claudia_04.png" Large="claudia_04.png"/>
08</Claudia>
09 
10●sound.xml
11<?xml version="1.0" encoding="utf-8" ?>
12<Sound>
13  <Item word="さぁ、始めるわよ" wav="01sahajimeru.wav"/>
14  <Item word="終了〜" wav="03syuuryou.wav"/>
15  <Item word="往生際が悪いわよ" wav="04oujougiwa.wav"/>
16  <Item word="Good Morning Azure Sky!" wav="27goodmorningazuresky.wav"/>
17  <Item word="大成功!" wav="35daiseikou.wav"/>
18  <Item word="お疲れ様♪" wav="38otsukare.wav"/>
19  <Item word="早く起きなさい!_1" wav="63.hayaku.wav"/>
20  <Item word="早く起きなさい!_2" wav="64.hayaku-2.wav"/>
21  <Item word="早く起きなさい!_3" wav="65.hayaku-3.wav"/>
22  <Item word=" 遅刻しても知らないからね!" wav="52chikoku.wav"/>
23  <Item word="歯磨きの時間なくなるよ" wav="66.hamigakijikan.wav"/>
24  <Item word="あと 1 分!" wav="67.atoippun.wav"/>
25</Sound>

コントロールの配置

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

リスト2　書き出され編集されたXAMLコード(MainPage.xaml)

（1）プロパティ要素内にKey名がclaudiaListBoxTemplateという要素を配置します。
その子要素として要素を配置し、WidthとHeightプロパティの値を指定します。SourceプロパティにClaudiaImageをバインドしておきます。
更にもう1つ、Key名がwavListBoxTemplateという要素を配置し、子要素として要素を配置します。
TextプロパティにmyWavをバインドしておきます。ここでバインドする名称はVBコード内のクラスで定義されたプロパティ名です。
（2）claudiaListBoxという名前の要素を配置し、ItemTemplateにStaticResourceを使って（1）で定義したclaudiaListBoxTemplateを参照させます。
（3）wavListBoxという名前の要素を配置し、ItemTemplateにStaticResourceを使って（1）で定義したwavListBoxTemplateを参照させます。
（4）backButtonという名前の
（5）saveButtonという名前の
（6）openButtonという名前の
（7）メッセージを表示するための要素を配置しています。
（8）myFrameという名前の要素を配置しています。

01<Page
02  x:Class="Claudia.MainPage"
03  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
04  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
05  xmlns:local="using:Claudia"
06  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
07  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
08  mc:Ignorable="d">
09  <Page.Resources>■（1）
10    <DataTemplatex:Key="claudiaListBoxTemplate">■（1）
11      <Image Width="58" Height="188" Source="{Binding ClaudiaImage}" Stretch="None"/>■（1）
12    </DataTemplate>■（1）
13    <DataTemplatex:Key="wavListBoxTemplate">■（1）
14      <TextBlock Text="{Binding myWav}" FontFamily="Meiryo UI" FontSize="36" FontWeight="Bold"/>■（1）
15    </DataTemplate>■（1）
16  </Page.Resources>■（1）
17 
18  <Grid Background="{StaticResourceApplicationPageBackgroundThemeBrush}">
19    <ListBoxx:Name="claudiaListBox" HorizontalAlignment="Left" Height="624" Margin="346,49,0,0" VerticalAlignment="Top" Width="166" ItemTemplate="{StaticResourceclaudiaListBoxTemplate}"/>■（2）
20    <ListBoxx:Name="wavListBox" HorizontalAlignment="Left" Height="621" Margin="533,49,0,0" VerticalAlignment="Top" Width="670" ItemTemplate="{StaticResourcewavListBoxTemplate}"/>■（3）
21    <Button x:Name="backButton" Style="{StaticResourceBackButtonStyle}" HorizontalAlignment="Left" Height="56" Margin="10,10,0,0" VerticalAlignment="Top" Width="67"/>■（4）
22    <Button x:Name="saveButton" Style="{StaticResourceSaveAppBarButtonStyle}" HorizontalAlignment="Left" Height="83" Margin="649,675,0,0" VerticalAlignment="Top" Width="94" IsEnabled="False"/>■（5）
23    <Button x:Name="openButton" HorizontalAlignment="Left" Height="92" Margin="764,676,0,0" VerticalAlignment="Top" Width="93" Style="{StaticResourceFolderppBarButtonStyle}" IsEnabled="False"/>■（６）
24    <TextBlockHorizontalAlignment="Left" Height="345" Margin="62,325,0,0" TextWrapping="Wrap" Text="お気に入りのクラウディアの画像と、喋らせたい内容を選択して「Save」アイコンをタップしてください。既にSaveされたデータがある場合はFolderアイコンの使用が可能になっています。このFolderアイコンをタップすると、以前に選択しておいたクラウディアが表示され、言葉が再生されます。" VerticalAlignment="Top" Width="266" FontFamily="Meiryo UI" FontSize="24" Foreground="Crimson"/>■（７）
25    <Frame x:Name="myFrame" HorizontalAlignment="Left" Height="768" Margin="62,0,0,0" VerticalAlignment="Top" Width="1294"/>■（8）
26  </Grid>
27</Page>

図3：各コントロールを配置した（クリックで拡大）

開発 / Windows 8 / サンプルアプリ / クラウディア / Windows8 ストア

クラウディアのプログラムサンプル

4073_1.zip

著者

薬師寺国安

この著者の記事一覧この著者の
記事一覧

薬師寺国安事務所

薬師寺国安事務所代表。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）。