「この漢字 読めるかな?」の改変方法 その2 ~背景やタイルの設定~

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

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

[前回の記事]
第1回めの記事は、Visual Studioで新しいプロジェクトを作成し、ソースファイルをコピーして動かすところまでを説明しています。
https://blogs.msdn.com/b/ttanaka/archive/2013/01/08/10383100.aspx
今回は、その続きとして背景やタイルの設定を説明します。

[背景の変更]
背景は、オリジナルのプロジェクトの
AnimalUranai\Asset
フォルダーに入っている、
image001.png
という画像を使用しています。
このimage001.pngをそのまま作成したプロジェクトのAssetフォルダーにコピーすれば、同じ背景を使うことができます。
コピーするには、ソリューション エクスプローラーに表示されているAssetの上で右クリックし、[追加]-[新しい項目]と進んで画像を選択するか、image001.pngをエクスプローラーからVisual Studioのソリューション エクスプローラーの表示されているAssetフォルダーにドラッグ アンド ドロップします。

背景は質問(場面)ごとに変えることもできます。
以下のコードはMainpage.xaml.csの一部で、アプリを起動したときに最初に表示される文章のデータです。
このときだけ別の背景にしたいときは、別の背景の画像をimage002.pngという名前で用意します。
そして、黄色くマーカーしている部分の1という数値を2に変更します。

// 場面1
scene = 1;
Message[scene] = "漢字の読み方に関する質問を20問出題します。20問中、いくつ読むことができるでしょうか?";

Command[scene, 0] = "開始";
Command[scene, 1] = "";
Command[scene, 2] = "";

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

ImageNumber[scene] = 1;

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

ソースコード上では、Mainpage.xaml.csのDisplaySceneというメソッドの中で、数値に対応した画像ファイルを以下のように表示させています。
他のアプリのソースを流用しているので、使用しなくなったところをコメントアウトしています。

private void DisplayScene()
{
    // 画像を呼び出し、Imageコントロールに表示
    string ext = ".jpg";
    //if (ImageNumber[CurrentScene] >= 10)
        ext = ".png";

    string imageUri = "ms-appx:///Assets/image" + ImageNumber[CurrentScene].ToString("000") + ext;
    BitmapImage bitmap = new BitmapImage(new Uri(imageUri));
    ImageBrush image = new ImageBrush();
    image.ImageSource = bitmap;

    //if (CurrentScene < 50)
        image.Stretch = Stretch.UniformToFill;
    //else
    // image.Stretch = Stretch.Uniform;

    grid1.Background = image;

黄色くマーカーした部分では、どのように画像ファイルを表示させるかを指定しています。
ここではUniformToFillを指定し、画像の縦横比を変えずに画面いっぱいに表示させるようにしています。
他のオプションについては、下記サイトをご参照ください。
https://msdn.microsoft.com/ja-jp/library/windows/apps/windows.ui.xaml.media.stretch.aspx

[Package.appxmanifestの設定(タイルなど)]
Windowsストア アプリを作るときに、必ず通る道がappxmanifestです。
このファイルの中には、アプリを世に出すために必要な情報を入れていきます。
タイルの画像やスプラッシュ スクリーンの画像はappxmanifestで設定します。
アプリケーションがWindows 8のどの機能を使っているかについても、appxmanifestで設定します。

まずは、タイルなどの画像を設定しましょう。
用意するファイルは、以下のものです。
解像度に応じていくつか画像ファイルを設定できるものもあります。
これらについては、黄色くマーカーしている画像だけでも構いません。
画像は.png形式で用意します。

ロゴ(タイル) 270x270、210x210、150x150、120x120
ワイドロゴ(ワイドタイル) 558x270、434x210、310x150、248x120
小さいロゴ 54x54、42x42、30x30、24x24、256x256、48x48、32x32、16x16
ストアロゴ 90x90、70x70、50x50
バッジ ロゴ 43x43、34x34、24x24
スプラッシュ スクリーン 1116x540、868x420、620x300

これらのうち、バッジを使っていなければバッジ ロゴは省略しても構いません。
画像ファイルを用意したら、ソリューション エクスプローラーに表示されているPackage.appxmanifestをダブルクリックします。
Visual Studioの中央にappxmanifestの設定画面が表示されますので、[アプリケーションUI]タブを選択して画像を設定していきます。
なお、Visual Studio 2012にUpdate 1を適用すると以下のように各スケールの画像を設定できるようになります。

[Package.appxanifestの設定(インターネット接続)]
appxmanifestの[機能]タブでは、このアプリがWindows 8のどの機能を使用しているかを宣言します。
使用している機能にチェックを入れ、使用していない機能のチェックを外します。
「この漢字読めるかな?」はインターネットにアクセスしないので、以下のようにデフォルトで入っている[インターネット(クライアント)]のチェックを外しておきます。

このチェックを入れたままにしておくと、以下のブログ記事に書いている理由でWindowsストアの審査に落ちる可能性があります。
https://blogs.msdn.com/b/ttanaka/archive/2012/10/23/windows-no-01-12.aspx

ここまでで、ストアに上げられるアプリとして完成しました。
次回は、ストアに上げる手順を説明します。

[その他の関連記事]
「この漢字 読めるかな?」の改変方法 その1
その3 ストア用のアプリを作ってストアに上げる
最終回 漢字クイズからの応用
「この漢字 読めるかな?」のプロジェクト/ソースコード公開

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

マイクロソフト
田中達彦