PR

小さな子ども向けの文字練習アプリ「もじのれんしゅう」を作る

2014年2月21日(金)
薬師寺 国安

このアプリについて

今回のアプリは、手書きで「もじ(日本語)」を入力し[よむ]ボタンをタップすると、キャラクタがその「もじ」を読み上げるというアプリです(図1)。このアプリは小さなお子さんが、「もじ」を学ぶためのアプリです。

このアプリには、タッチ可能なディスプレイを持つPCが必要です。ペンの付属しているタブレットPCが一番適しているかもしれません。

このアプリは日本語版Windows 8.1 OS上でしか動作しませんので、ご注意ください。英語版のOS上では動作しません。

図1:手書きで入力された[もじ]を[よむ]ボタンタップで、その読みをキャラクタが喋る(クリックで拡大)

プロジェクトの作成

VS 2013のメニューから[ファイル]−[新規作成]−[プロジェクト]と選択します。
次に、「テンプレート」から「Windows ストア」を選択し、右に表示される項目名から「新しいアプリケーション(XAML)」を選択します。「名前(N)」に任意のプロジェクト名を指定します。ここでは「RecognizeFreehandMoji.xaml」という名前を付けています。
ソリューション・エクスプローラー内にImageというフォルダを作成し、キャラクタのPNG画像を配置しています。

コントロールのレイアウト(MainPage.xaml)

ツールボックスからデザイン画面上に、各コントロールを配置します。

書き出されるXAMLコードはリスト1のようになります。

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

(1)Grid要素全体をViewBox要素で囲みます。ViewBox要素は、伸縮およびスケーリングを実行して単一の子を使用可能な領域全体に引き伸ばすことができるコンテンツ・デコレータを定義します。

(2)「myCanvas」という名前のCanvas要素を配置します。このCanvas要素内に手書きで英語を書いていきます。

(3)StackPanel要素を配置し、Orientationプロパティに「Horizontal」と指定します。背景色(Background)には「Orange」と指定します。その子要素として、「recognizeButton」という名前のButton要素を配置し、Contentプロパティに「よむ」と指定します。もう1個、「clearButton」という名前のButton要素を配置し、Contentプロパティに「けす」と指定します。

(4) StackPanel要素を配置し、Orientationプロパティに「Horizontal」と指定します。背景色(Background)には「Beige」と指定します。その子要素として、タイトルを表示するTextBlock要素を配置します。同じく子要素として、「MediaElement1」という名前のMediaElement要素を配置します。キャラクタに音声を喋らすために必要です。

(5)キャラクタを表示するImage要素を配置し、Sourceプロパティに、ソリューション・エクスプローラー内のImageフォルダにある、「syoko5.png」を指定します。

(6)「TextBox1」という名前のTextBox要素を配置します。この中には、手書きで書かれ文字が認識されて、文字として格納されます。非表示にしています。

以上、すべてをレイアウトしたのが図2になります。

<Page
  x:Class="RecognizeFreehandMoji.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:RecognizeFreehandMoji"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d">
  <Viewbox>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Width="1363">
      <Canvas x:Name="myCanvas" Background="White" Margin="-31,101,-31,88"/>
      <StackPanel Orientation="Horizontal" Margin="-31,704,-31,0" Background="Orange" Height="100">
        <Button Content="よむ" x:Name="recognizeButton"  Height="66"  VerticalAlignment="Bottom" Width="158" FontFamily="07YasashisaGothic" FontSize="24" IsEnabled="False" Background="Navy" Foreground="Pink" Margin="20,0,0,19"/>
        <Button Content="けす" x:Name="clearButton"  Height="66" VerticalAlignment="Bottom" Width="158" FontFamily="07YasashisaGothic" FontSize="24" IsEnabled="False" Background="Navy" Foreground="Pink" Margin="20,0,0,19"/>
      </StackPanel>
      <StackPanel HorizontalAlignment="Left" Height="100"  VerticalAlignment="Top" Width="1428" Background="Beige" Margin="-31,0" Orientation="Horizontal">
        <TextBlock HorizontalAlignment="Left" Height="91" Margin="19,0,0,0" TextWrapping="Wrap" Text="もじのれんしゅう" Width="663" FontFamily="07YasashisaGothic" FontSize="72" FontWeight="Bold" Foreground="Pink"/>
        <MediaElement x:Name="MediaElement1" Height="33" Margin="300,36,0,0" VerticalAlignment="Top" Width="131"/>
      </StackPanel>
      <Image HorizontalAlignment="Left" Height="273" Margin="1128,7,-23,524" Width="258" Source="Image/syoko5.png"/>
<TextBox x:Name="TextBox1" HorizontalAlignment="Left" Height="45" Margin="598,23,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="341" FontFamily="Meiryo UI" FontSize="24"  AcceptsReturn="True" Visibility="Collapsed"/>
    </Grid>
  </Viewbox>
</Page>
図2:各コントロールを配置した(クリックで拡大)
Think IT会員限定特典
  • もじのれんしゅうアプリのサンプル

    『Windows 8.1+Visual Studio 2013によるWindows ストア・アプリ開発実例集』 第7回のサンプルプログラムです。
薬師寺国安事務所

薬師寺国安事務所代表。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のWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

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