[ゼロからはじめるWindows Phone 7プログラミング] 第2回 ～プログラム入門 : Hello Worldプログラムを作る～

  • Article

[ ゼロからはじめるWindows Phone 7プログラミング ]
第2回 ～ プログラム入門 : Hello Worldプログラムを作る～

[ まずは作ってみましょう ]
Windows Phone 7用のアプリケーションを作るためには、Windows Phone 7の機能や、開発方法についての知識が必要です。
と言うものの、まずはWindows Phone 7アプリを作ってみて、その後でアプリケーションの開発に必要な情報について説明します。
本連載の第1回で開発ツールの入手方法について説明したので、既にお手元の環境にWindows Phone 7の開発ツールがインストールされているという前提で説明します。
なお、開発ツールはVisual Studio 2010 Express for Windows Phone、開発言語はC#(シーシャープ)という言語を使用します。

[ 作るアプリケーション ]
以下の図のような見た目のアプリケーションを作ります。

ボタンをクリックしたら、Hello Worldと表示させるようなプログラムにします。
アプリケーションの開発は、この後の「ステップX」と書いてある順番で進めていきます。

[ プロジェクトの作成 ]
Visual Studioを使ってアプリケーションを作成するときは、まず最初にプロジェクトと呼ばれるものを作成します。
プロジェクトにはいくつか種類があるので、目的にあったプロジェクトを作ります。
プロジェクトには、アプリケーションを構築するためのソースファイルなどが入っています。

ステップ1: Visual Studioの起動まずはVisual Studio 2010 Express for Windows Phoneを起動します。
Windowsのスタートメニューのすべてのプログラムに、Visual Studio 2010 Expressという項目が登録されていますので、それを展開して、以下のようにVisual Studio 2010 Express for Windows Phoneとかかれた部分をクリックして起動してください。

ステップ2: プロジェクトの作成Visual Studioが起動したら、メニューの[File]-[New Project]をクリックしてください。
以下のようなダイアログが表示されます。

このダイアログの中央に表示されている、Windows Phone ApplicationやWindows Phone Databound Applicationと書かれているものがプロジェクトの種類です。
10を超えるプロジェクトの中から、作りたいアプリケーションに相当するプロジェクトを選ぶことで、アプリケーション開発に必要なソースコードが自動的に作成されます。
ここでは、いちばん上に表示されているWindows Phone Applicationを使用するので、それをクリックします。

ダイアログの下のほうに、Name、Locationと書かれたところがあります。
ここでプロジェクトの名前と、プロジェクトを作成するフォルダーを指定します。
今は、以下のようにNameの部分にHelloWorldと入力します。
Locationの部分は、デフォルトのままにしておいても、変更しても構いません。
デフォルトでは、そのPCを使用しているユーザーのドキュメント フォルダーの下にフォルダーが作られます。

入力したら、[OK]ボタンをクリックします。

OKボタンをクリックすると、アプリケーションを構築するために必要なソースコードなどのファイルを含んだプロジェクトが自動的に生成されます。

[Visual Studioの画面 ]
現段階で、Visual Studioは以下のような画面になっているはずです。

Visual Studioの画面は、開発者が自由にカスタマイズすることができるため、場合によっては、上記のような画面になっていないかもしれません。
Visual Studio内に表示されるウィンドウの表示位置を変えたり、表示/非表示を自動的に行うこともできるため、見た目が少し違う画面になっていることもあります。
ここでは、画面が以下のように表示されているという前提で説明をします。赤い部分は説明用に追加したものです。

画面の右側にはツールボックスと呼ばれるウィンドウを表示します。このウィンドウの左上には、Toolboxと書かれています。
Toolboxの文字が、Visual Studioの左端の枠に表示されているときは、マウスカーソルをその部分に持っていくとツールボックスが開きます。
その状態で、ツールボックスの右上に表示されている

の部分をクリックすると、ツールボックスが固定されて自動的に隠れなくなります。
他のウィンドウも同様に、右上に表示されているピンのアイコンをクリックすることにより、自動的に非表示にするかどうかを変更することができます。
もし、画面上にToolboxと書かれたウィンドウがないときは、メニューの[View]-[Other Windows]-[Toolbox]を選択すると、ツールボックスが表示されます。
Visual Studioの右上にあるソリューション エクスプローラーや、右下にあるプロパティウィンドウも、もし表示されていないときはメニューの[View]-[Other Windows]にある[Solution Explorer]や[Properties Window]を選択することで表示できます。

画面の中央に表示されている黒い部分を、フォームエディタと呼びます。
この黒い部分をフォームと呼び、アプリケーションの見た目を表しています。
黒い部分の上のほうにMY APPLICATIONと表示され、その下に大きな文字でpageと表示されています。
黒い部分の右側には、XML形式の文字が並んでいます。この部分はユーザーインターフェイスを記述している部分で、XAML(ザムル)と呼ぶマークアップ言語を使用しています。今は、意識しなくて構いません。

[ ユーザーインターフェイスの作成 ]
HelloWorldというプロジェクトを作成したら、最初にユーザーインターフェイスを作ります。
Visual Studioを使用してユーザーインターフェイスを作るときは、ツールボックスの中にあるユーザーインターフェイスの部品を使用します。
この部品をコントロールと呼びます。
今は、クリックするためのボタンと、文字を表示させるためのコントロールであるテキストブロックと呼ばれるコントロールを使用します。
アプリケーションでコントロールを使うには、ツールボックスにあるコントロールを画面中央に表示されている黒いフォームの部分にドラッグアンドドロップします。

ステップ3: ボタンとテキストブロックの貼り付けツールボックスの中から、Buttonと書かれたコントロールを探し、それをフォーム上にドラッグアンドドロップします。
同様に、TextBlockと書かれたコントロールを探しだし、フォーム上にドラッグアンドドロップします。

[ プログラムの記述 ]
ユーザーがボタンをクリックしたときに、Hello Worldと表示させたいので、ボタンがクリックされたときに動くプログラムを用意します。
Windows Phone 7では、ユーザーが何かを行ったときに、その動作に合わせて特定のプログラムを起動させることができます。

ステップ4: ボタンをクリックしたときのプログラムフォーム上に貼り付けたボタンをダブルクリックしてください。
すると、画面上に表示されていたフォームエディタの変わりに、下図のようなソースコードが表示されます。

このソースコードの下のほうに、以下のように表示されている部分があります。

このキャレット(カーソルのことをキャレットと呼びます)が点滅しているところに、以下のプログラムを書きます。プログラムはすべて半角文字で入力します。

textBlock1.Text = "Hello World";

プログラムを書くと、以下のようになります。

文字の色は自動的につくので、気にしなくて構いません。
このプログラムは、ユーザーがボタンをクリックしたときに呼ばれます。

[ プログラムの実行 ]
ここまででユーザーインターフェイスの作成とプログラムの記述を終えたので、あとは実行するだけです。
プログラムを実行するには、メニューの[Debug]-[Start Debugging]を選択するか、[f5]キーを押します。
プログラムの実行時に、Windows Phone 7のエミュレーターを使用するか、実機を使用するかを選べるので、Visual Studioの以下の部分で[Windows Phone 7 emulator]を選択し、エミュレーター上でプログラムを動かすようにします。

ステップ5: プログラムの実行[f5]キーを押して、プログラムを実行してください。
Windows Phone 7のエミュレーターが自動的に起動し、作成したアプリケーションが動きます。
ボタンをクリックすると、Hello Worldと表示されます。

次回は、今回作成したプログラムについて説明します。

[ ゼロからはじめるWindows Phone 7プログラミング ]
第1回 : ～無償の開発環境を揃える～

マイクロソフト
田中達彦