「この漢字読めるかな?」の改変方法最終回～漢字クイズからの応用～

Article
01/10/2013

マイクロソフトの田中達彦です。
Windowsストアアプリの「この漢字読めるかな? vol.1」のプロジェクトファイルを元に、オリジナルのアプリを作る方法を紹介していきます。

「この漢字読めるかな?」のプロジェクトは、開発元のご厚意により下記ブログ記事にて公開しています。
https://blogs.msdn.com/b/ttanaka/archive/2013/01/08/10383069.aspx

[前回の記事]
前回(第3回)は、作成したアプリをWindowsストアに登録するまでの手順を説明しました。
https://blogs.msdn.com/b/ttanaka/archive/2013/01/10/10383684.aspx
今回は、漢字クイズではなく、他のアプリに変えられないかどうかの可能性を探っていきます。

[クイズのデータ]
「この漢字読めるかな?」のデータは、以下のように定義されています。
ひとつひとつの質問が、このような形式で実装されています。

// 場面2
scene = 2;
Message[scene] = "捗る";

Command[scene, 0] = "さわる";
Command[scene, 1] = "かかわる";
Command[scene, 2] = "はかどる";

NextScene[scene, 0] = 3;
NextScene[scene, 1] = 3;
NextScene[scene, 2] = 3;

ImageNumber[scene] = 1;

MaxPoint[scene] = 1;
AnswerPoint[scene, 0] = 0;
AnswerPoint[scene, 1] = 0;
AnswerPoint[scene, 2] = 1;

このプログラムでは、1つの質問を場面(scene)と呼ぶ場所に当てはめています。
ここでは、scene = 2; と定義しており、場面2を設定していることになります。

黄色い部分のMessage[scene]には、質問が入ります。
そして、その質問に対する選択肢が

Command[scene, 0] = "さわる";
Command[scene, 1] = "かかわる";
Command[scene, 2] = "はかどる";

のように入っています。
この質問と選択肢を変えると、別のクイズを作ることができます。
もし選択肢が2つでよいときには、3つめの選択肢を以下のようにします。

Command[scene, 2] = "";

さらに選択肢がいらないときは、2つめの選択肢を以下のようにします。

Command[scene, 1] = "";

「この漢字読めるかな?」の場面1は、質問に入る前の問いかけ(「いくつ読めるでしょうか?」)という文を質問の代わりに入れ、最初の選択肢を「開始」にして、2つめの選択肢を空白にしています。
このように、選択肢の数を二者択一にすることも、なんらかのメッセージを表示させることもできるのです。

その次の

NextScene[scene, 0] = 3;
NextScene[scene, 1] = 3;
NextScene[scene, 2] = 3;

の部分は、それぞれの選択肢を選んだときに、どの場面に飛ばすかを定義します。
このアプリの場面2には、最初の質問が入っています。
そして場面3には、2番目の質問が入っています。
最初の質問に答えた後は2番目の質問に飛ばすので、どの選択肢を選んでも場面3に飛ぶように設定しています。
この部分を、選んだ選択肢に応じて飛び先を変えるように設定すると、Yes/Noクイズを作ることができます。
アニマル占いでは、選んだ回答によって次に出題される質問が異なるときがあるように設定しています。

ImageNumber[scene] = 1;

の部分は、背景となる画像を指定する部分です。
こちらについてはブログ記事の第2回をご参照ください。
https://blogs.msdn.com/b/ttanaka/archive/2013/01/09/10383345.aspx

最後の

MaxPoint[scene] = 1;
AnswerPoint[scene, 0] = 0;
AnswerPoint[scene, 1] = 0;
AnswerPoint[scene, 2] = 1;

の部分については、「この漢字読めるかな?」ではMaxPointの部分を使用せず、AnswerPointのみを使用しています。

以下のコードは、アニマル占いのコードの一部です。

MaxPoint[scene] = 10;
AnswerPoint[scene, 0] = 3;
AnswerPoint[scene, 1] = 10;
AnswerPoint[scene, 2] = 0;

アニマル占いでは、質問ごとに点数をつけています。
この例では、この質問は10点満点で、最初の選択肢を選ぶと3点、2番目の選択肢を選ぶと10点が入ります。
このように点数をつけることで、診断系アプリを作成できます。

[フォントの大きさ]
「この漢字読めるかな?」では、質問としては1文字または数文字の単語しか出さないため、質問部分のフォントをかなり大きくしていました。
質問文が長い場合は、フォントサイズを小さくしないと質問が表示できません。
そのときは、ChangeButtonSizeメソッドの以下の黄色くマーカーした部分を変更します。

double x = grid1.ActualWidth;
if (x > 330 && x < grid1.ActualHeight)
x = grid1.ActualHeight;

if (x < 330)
{
    fontSize1 = 64;
    fontSize2 = 32;
}
else if (x < 1600)
{
    fontSize1 = 200;
    fontSize2 = 64;
}
else if (x < 2000)
{
    fontSize1 = 300;
    fontSize2 = 96;
}
else
{
    fontSize1 = 400;
    fontSize2 = 128;
}

if (CurrentScene >= 2 && CurrentScene < 50)
question1.FontSize = fontSize1;
else
question1.FontSize = fontSize2;

answer1.FontSize = fontSize2;
answer2.FontSize = fontSize2;
answer3.FontSize = fontSize2;

ここでは、ランドスケープ(横長の画面)の場合には、横幅が330px未満(スナップ時がこれに該当)、1600px未満、2000px未満、それ以上の4段階に分けてフォントのサイズを定義しています。
fontSize1に質問部のフォントサイズ、fontSize2に設問部のフォントサイズが入っています。
ただし、現在の場面(CurrentScene)が場面1のとき、または場面50以上のときは、fontSize2を質問部にも提供しています。
これは、最初の導入のページ(場面1)と、結果を表示させるページ(場面50以上)のときに提供されています。
これらのフォントサイズを小さくすれば、より多くの文字を表示させられます。

[判定部分の作成]
質問が全部終わったときには、場面30に飛ばすようにしています。
これは、以下のPageChageメソッドの黄色い部分に実装されています。

private void PageChange()
{
TotalMaxPoint += MaxPoint[CurrentScene];
TotalPoint += AnswerPoint[CurrentScene, ButtonNumber];

CurrentScene = NextScene[CurrentScene, ButtonNumber];

if (CurrentScene == 30)
CurrentScene = ShowResult();

DisplayScene();

ChangeButtonSize();
}

ここを変えると、場面30ではなく、任意の場面で結果を判定するメソッドに飛ばすことができます。
結果の判定は、以下のShowResultメソッドで行っています。

private int ShowResult()
{
int number;
double result;

//result = (double)TotalPoint / (double)TotalMaxPoint;
//textBlock5.Text = result.ToString();

if (TotalPoint == 20)
        number = 51;
    else if (TotalPoint == 19)
        number = 52;
    else if (TotalPoint > 15)
        number = 53;
    else if (TotalPoint > 8)
        number = 54;
    else if (TotalPoint > 3)
        number = 55;
    else
        number = 56;

//TotalPoint = 0;
//TotalMaxPoint = 0;

return number;
}

TotalPointフィールドに得点が入っていますので、その得点に応じて次に表示させる場面を変えることにより、メッセージを変更しています。
ここではTotalMaxPointは使用していません。
診断系アプリをつくるときには、各場面のMaxPointを設定すれば、TotalMaxPointに満点となる点数が入ります。
黄色くマーカーしているコメントの部分は、TotalPointとTotalMaxPointを使用して結果判定する点数を計算しています。ここも「この漢字読めるかな?」では使用していません。

[Windows 8 ならではの機能 / 共有チャームへの対応]
このアプリは共有チャームに対応させるように、以下のDataRequestedというイベントハンドラーを設定します。

void DataRequested(DataTransferManager sender, DataRequestedEventArgs args)
{
DataRequest request = args.Request;
DataRequestDeferral deferral = args.Request.GetDeferral();

    request.Data.Properties.Title = "この漢字読めるかな vol.1";
    if (CurrentScene >= 2 && CurrentScene < 22)
        request.Data.SetText(Message[CurrentScene]);
    else
        request.Data.SetUri(new Uri("https://apps.microsoft.com/windows/ja-JP/app/vol-1/9304e135-c917-432d-8ff5-0b19446f68d9"));

deferral.Complete();
}

共有チャームに関しては、下記記事をご参照ください。
https://blogs.msdn.com/b/ttanaka/archive/2012/10/23/windows-vol-03.aspx

[Windows 8 ならではの機能 / ライブタイルの実装]
ライブタイルを実装するために、DisplaySceneメソッドに以下のコードを用意しています。

// LiveTile
Random rnd = new Random();

if (CurrentScene >= 50)
{
string tileString = "この漢字読めるかな? [" + Message[rnd.Next(20) + 2] + "]";
UpdateTiles(tileString);
}

ここでは、場面50以上の場合、すなわち何らかの結果を表示したときに、質問の中からランダムに1つ選んでタイルに表示させています。
UpdateTilesメソッドとライブタイルに関しては、下記ブログ記事をご参照ください。
https://blogs.msdn.com/b/ttanaka/archive/2012/10/25/windows-vol-05.aspx

[最後に]
「この漢字読めるかな?」は、クイズを出題するサンプルとして提供しました。
ソースコードは清書しておらず、コメントもほぼない状態で申し訳ないです。
完成度を上げてから出すべきとの声もあるかもしれませんが、ちゃんとした形式で出すには、おそらくここまでかけた時間と同じくらいの時間がかかってしまいます。
その時間を、他の情報発信に使いたいため、現状のままのプロジェクトファイルを提供しました。
この記事を書いている段階で、Windows 8の販売件数が発売後10週間で6,000万件に達したというニュースが入ってきています。
良いアプリを作れば、それだけ多くの人に使ってもらえる可能性が広がっています。

Windowsストアアプリを作って世に出すことは、そんなに難しいことではありません。
今回のプロジェクトを改変したレベルでも、優れた内容であれば多くの人にダウンロードしてもらえるでしょう。
ぜひ、Windowsストアアプリの開発に挑戦してください!!

良いWindowsストアアプリの作り方 vol.01 余白の取り方の決まり
Windowsストア審査の通し方 No.01 [4.1] インターネットを使うアプリは12歳以上に設定し、プライバシーポリシーを用意する

マイクロソフト
田中達彦

「この漢字 読めるかな?」の改変方法 最終回 ～漢字クイズからの応用～

Additional resources

「この漢字読めるかな?」の改変方法最終回～漢字クイズからの応用～