WindowsPhoneアプリを作ってみよう

一週間前に日本初のWindowsPhone7.5端末「IS112T」が発売されました。これを機にWindwosPhone端末が流行るか、はまだ判りませんが、前々からWindowsPhoneに興味はあったので開発の感覚を感じてみようかなと思いました。
WindowsPhone開発自体は無償版のVisualStudioを使って開発しますし、Androidと同じように端末エミュレータも付いてるので、実際に端末を持っていなくてもある程度の開発はできるようです。

開発環境の構築

とりあえず開発環境の構築のためにMSDNのWindowsPhone開発サイトにいってインストーラーを落としてきます。

動作環境はこんな感じで提示されてました。

開発環境を動かすOSにはWindowsVistaかWindows7(x86、x64のどちらでもOK)が必要になります。CPUはCore2Duoの2GHzのマシンを使いましたが、サンプルを動かす程度ならこの環境でも大丈夫そうでした。手持ちのネットブック環境(AMD E-350)だとエミュレータが起動すらしなかったです、こんな低スペックじゃ仕方ないですけど、

落としてきたインストーラを起動すると、開発環境の構築に必要なファイルをダウンロードしつつインストールを行ってくれます。インストールが完了すると再起動しろ、と言われますので素直に従いましょう。

プログラムを作ってみよう

開発環境は整ったのでとりあえず何かしらの動作をするアプリを作ってみようと思います。今回は簡単に作れそうなアプリという事で「クリックする度に画面全体を赤、緑、青で塗りつぶすアプリ」を作ってみようと思います。簡単だけど一応「ドット欠けチェックツール」という名目で作ります。今後の作業は、VisualStudioが自動生成するアプリ(1画面を表示するだけ)に、「タッチした時に画面全体を塗りつぶす」コードを追記します。

  • プロジェクトの作成

再起動後にスタートメニューから「Microsoft Visual Studio 2010 Express for Windows Phone」を起動してください。その後VisualStudioのメニューから「ファイル」→「新しいプロジェクト」を選んでプロジェクトを作成します。作成するプロジェクトのタイプは「Visual C#Windows Phone アプリケーション」を選択します。練習なのでアプリケーション名等のプロパティ値はとりあえずそのままでいいでしょう。

次からはいよいよプログラムの改変作業に入ります。

  • MainPage.xamlの編集

xamlファイルは画面上のコンポーネント構成を定義するXMLファイルです(多分、AndroidのレイアウトXMLファイルと同等のものだと思います)。今回は「ApplicationTitle」と「PageTitle」の文字列値(title)の変更、「ContentPanel」のサイズ値(Margin、塗りつぶす対象画面を端末画面全体に広げるようにする)の変更の修正をします。

  • MainPage.xaml.csの編集

xaml.csファイルは対応するxamlファイルの画面上での動作内容をプログラムコード(今回はC#)で記述するソースファイルになります。自動生成しただけの状態では、コンストラクタで「InitializeComponent();」のみを実行していました(xamlファイルから画面を起動する関数?)。今回はこのソースにタッチイベントのロジックを追加して「タッチする度に画面全体を赤、緑、青で塗りつぶす機能」を追加します。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace PhoneApp1
{
    public partial class MainPage : PhoneApplicationPage
    {
        // 塗りつぶす色、0=黒、1=赤、2=緑、3=青;
        int color;
        Brush[] myBrush;
   
        // コンストラクタ
        public MainPage()
        {
            InitializeComponent();
            Touch.FrameReported += new TouchFrameEventHandler(Touch_FrameReported);
            color = 0;
            myBrush = new Brush[4];
            myBrush[0] = new SolidColorBrush(Colors.Black);
            myBrush[1] = new SolidColorBrush(Colors.Red);
            myBrush[2] = new SolidColorBrush(Colors.Green);
            myBrush[3] = new SolidColorBrush(Colors.Blue);
        }

        void Touch_FrameReported(object sender, TouchFrameEventArgs e)
        {
            TouchPoint primaryTouchPoint = e.GetPrimaryTouchPoint(null);
            if (primaryTouchPoint != null)
            {
                if (primaryTouchPoint.Action == TouchAction.Up)
                {
                    color++;
                    if (color == 4) color = 0;
                    Rectangle myRect = new Rectangle();
                    myRect.Stroke = myBrush[color];
                    myRect.Fill   = myBrush[color];
                    myRect.Height = ContentPanel.ActualHeight;
                    myRect.Width  = ContentPanel.ActualWidth;
                    ContentPanel.Children.Add(myRect);
                }
            }
        }
    }
}

作ったアプリをエミュレータで動かす

次は端末エミュレータを起動して作成したアプリを動作させてみましょう。VisualStudioメニューの「デバッグ」→「デバッグの開始」(緑の三角ボタンを押しても同じ)を選ぶと、エミュレータ上で作成したアプリを起動します。起動後のイメージはこんな感じになります。

エミュレータ上では既にアプリが起動しているので、画面をタッチするとタッチする度に赤、緑、青、の順序で塗りつぶす動作をします。

感想

今回、初めてC#のコードを書いてみましたが、Java(というかAndroid開発)とかなり似てるので、それを知ってればすんなり開発できるんだろうなと思いました。個人的にUIはAndroidよりもWindowsPhoneの方がカッコいいと思うし、以前はW-ZERO3(WindowsMobile)ユーザだったのでリベンジ的な意味で、これから色々なアプリが充実してWindowsPhoneが流行ると面白いだろうなと思いました。