Slug 3-windows phone7helloworld-classmethod-ryuichi-nonaka

Copyright © Classmethod.

Windows Phone 7 で｢Hello world｣〜マークアップエンジニアから抜け出したい〜

1

クラスメソッド株式会社技術部 Web担当野中⿓⼀


スピーカー紹介

野中⿓⼀（ Ryuichi Nonaka ）技術部 Web担当Twitter @caravaco

経験Webサイト制作3年

• デザイン• コーディング

PHP少々• オブジェクト指向の勉強中

JavaScript• jQueryがなんとなく使える• JavaScriptの基本を勉強中

2


アジェンダ

1. 開発環境の構築2. プロジェクトの作成3. エミュレーターを使ってみる4. 簡単Hello Worldアプリケーションの作成

1. タイトルの編集2. ボタンコントロールの配置3. クリックイベントの設定4. メソッドの編集5. アプリケーションアイコンの変更6. オリエンテーションの設定

5. サンプルアプリケーション6. 参考

3


１，開発環境の構築Windows Phone Developer Tools Betaのインストール

4


1-1, WPDTのサポート環境

OSWindows 7(x86 and x64 ENU - all editions except Starter Edition)

Windows Vista(x86 and x64 ENU with Service Pack 2 - all editions except Starter Edition)

3GB of free disk space on the system drive.2 GB RAMDirectX 10 capable graphics card with a WDDM 1.1 driver

5


1-2, WPDTのインストール内容

Visual Studio 2010 Express for Windows Phone Beta Windows Phone Emulator Beta Silverlight for Windows Phone Beta Microsoft Expression Blend for Windows Phone Beta XNA Game Studio 4.0 Beta

6


1-3, 開発環境のダウンロードWindows Phone Developer Tools Betaをダウンロードする

Windows Phone Developer Tools Beta（以降WPDT）をマイクロソフトのWPDTページからダウンロードします。http://www.microsoft.com/downloads/details.aspx?FamilyID=c8496c2a-54d9-4b11-9491-a1bfaf32f2e3&displaylang=en

7

http://www.microsoft.com/downloads/details.aspx?FamilyID=c8496c2a-54d9-4b11-9491-a1bfaf32f2e3&displaylang=en


1-4, 開発環境のインストールWPDTのインストール

ダウンロードしたWPDTBata_en.isoをVirtual CloneDriveなどでマウントし、インストールを実⾏する。

8


1-5, インストールの完了

インストールが完了すれば、開発環境の準備は完了です。⾮常に簡単ですね。

今回は開発環境がすでにインストールされている前提で進めます。利⽤するツールはこちらの３つです。

Visual Studio 2010 Express for Windows Phone Beta(以下Visual Studio 2010 Express)Windows Phone Emulator Beta(以下エミュレーター)Microsoft Expression Blend for Windows Phone Beta（Expression Blend）

9


２，新規プロジェクトの作成Windows Phone Applicationの作成

10


2-1, Visual Studio 2010 の起動Windows Phone Application プロジェクトを作成

Visual Studio 2010 Expressを起動し、New Project…をクリックし、2つのテンプレートが⽤意されているのがわかります。Silverlight for Windows PhoneXNA Game Studio 4.0

今回は「Silverlight for Windows Phone」の「 Windows Phone Application 」プロジェクトを作成します。Windows Phone Applicationも含め3つのプロジェクトが作成できます。

Windows Phone ApplicationWindows Phone List ApplicationWindows Phone Class Library

プロジェクト作成画⾯で名前を設定し「OK」をクリックします。これでプロジェクトの作成は完了です。

11


Visual Studio 2010の起動画⾯

12


Visual Studio 2010のNew Project画⾯

13


プロジェクトの作成が完了

14


３，エミュレーターを使ってみるWindows Phone Emulator Betaの利⽤

15


3-1, エミュレーターを起動Visual Studio 2010 Express からエミュレーターを起動

Start Debuggingボタン（F5）を押してエミュレーターを起動します。

16


3-2, エミュレーターの特徴2010年8⽉30⽇現在

オリエンテーションの変更ズームセッティングハードウェアボタン（Start, Search, Back) ⽇本語の表⽰も可能（現時点ではあまりきれいじゃない）マウスによる疑似タッチ操作(マルチタッチ対応ディスプレイであれば指でも操作が可能)キーボード⼊⼒⾮対応

エミュレーターはショートカットを作成することで単体起動も可能です。参考：http://blogs.msdn.com/b/shintak/archive/2010/08/22/10052840.aspx

17

http://blogs.msdn.com/b/shintak/archive/2010/08/22/10052840.aspx


４，Hello WorldMessage Boxを使ったHello Worldを表⽰するアプリケーション作成

18


4-1, Expression Blendの起動

効率よく画⾯設計が可能なExpression Blendを起動します。

19


4-2, タイトルの変更アプリケーション・ページタイトルの変更

ビューから直接タイトルを編集します。1. アプリケーションタイトルを「Classmethod Application」に変更

します。2. ページタイトルを「Message Box」に変更します。

20


4-3, ボタンの配置ボタンコントロールの配置

Message Boxを表⽰するためのボタンを配置します。1. アセットウィンドウの「Controls」を選択し、「Button」をビュー

にドラッグして配置します。2. 配置したボタンコントロールを適当な位置に調節し、ボタンのラベル

をダブルクリックして「Click!」に変更します。

21


4-3, クリックイベントの設定Message Boxを表⽰するためのクリックイベントを設定

ボタンコントロールにイベントを設定します。1. 先ほどのボタンコントロールを選択し、

プロパティウィンドウのイベントパネルを開きます。

2. ボタンコントロールのNameを「MassageBoxBtn」に変更します。

3. Clickイベントのプロパティ設定の部分をダブルクリックします。

4. MainPage.xaml.csが開き、⾃動でMainPageクラスにMessageBoxBtn_Clickメソッドが追加されます。

22


MainPage.xaml.cs

23


4-4, メソッドの編集アラート表⽰の処理を設定する

Message Boxを利⽤してアラートを表⽰します。1. 先ほどのMessageBoxBtn_Clickメソッドに

MessageBox.Show(“Hello World!”);を記述します。

24


4-5, アプリケーションアイコンの変更タイルとアプリケーションリストに表⽰されるアイコンの変更

タイル表⽰とアプリケーション⼀覧に表⽰されるアイコンを設定します。1. プロジェクトフォルダのApplicationIcon.png(62*62)がアプリ

ケーション⼀覧のアイコンです。2. Background.png(173*173)がタイル表⽰のアイコンになります。

25


4-6, オリエンテーションの設定アプリケーションのオリエンテーション対応

Portrait、Landscapeの両⽅に対応します。1. オブジェクト＆タイムラインウィンドウから

「 PhoneApplicationPage 」を選択し、プロパティウィンドウにある「Common Properties」> 「SupportedOrientations」を「PortraitOrLandscape」に変更します。

26


4-7, 実⾏

作成したアプリケーションを実⾏して表⽰してみます。

27


５，サンプルアプリケーションCode Samples for Windows Phonehttp://msdn.microsoft.com/en-us/library/ff431744(v=VS.92).aspx

28

http://msdn.microsoft.com/en-us/library/ff431744(v=VS.92).aspx


リストアプリケーション

29


アプリケーションバーサンプル

30


セッティングサンプルアプリケーションhttp://msdn.microsoft.com/en-us/library/ff431744(v=VS.92).aspx

31



天気予報アプリケーションhttp://msdn.microsoft.com/en-us/library/ff431744(v=VS.92).aspx

32



ブラウザーサンプルアプリケーションhttp://msdn.microsoft.com/en-us/library/ff431744(v=VS.92).aspx

33



７，参考

Windows Phonehttp://www.windowsphone7.com/Windows Phone Developmenthttp://msdn.microsoft.com/en-us/library/ff402535(v=VS.92).aspx⾼橋忍のブログhttp://blogs.msdn.com/b/shintak/Windows Phone Developer Tools Betahttp://www.microsoft.com/downloads/details.aspx?FamilyID=c8496c2a-54d9-4b11-9491-a1bfaf32f2e3&displaylang=en#filelistUI Design and Interaction Guide for Windows Phone 7 Series (PDF)http://download.microsoft.com/download/D/8/6/D869941E-455D-4882-A6B8-0DBCAA6AF2D4/UI%20Design%20and%20Interaction%20Guide%20for%20Windows%20Phone%207%20Series.pdf

Design Templetes for Windows Phone 7http://go.microsoft.com/fwlink/?LinkId=196225Application Bar Icons for Windows Phone 7 Serieshttp://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=369b20f7-9d30-4cff-8a1b-f80901b2da93

Windows Phone Design System - Codename Metrohttp://go.microsoft.com/fwlink/?LinkID=189338http://go.microsoft.com/fwlink/?LinkID=189338

34

http://www.windowsphone7.com/


http://blogs.msdn.com/b/shintak/

http://www.microsoft.com/downloads/details.aspx?FamilyID=c8496c2a-54d9-4b11-9491-a1bfaf32f2e3&displaylang=en#filelist

http://www.microsoft.com/downloads/details.aspx?FamilyID=c8496c2a-54d9-4b11-9491-a1bfaf32f2e3&displaylang=en#filelist

http://download.microsoft.com/download/D/8/6/D869941E-455D-4882-A6B8-0DBCAA6AF2D4/UI Design and Interaction Guide for Windows Phone 7 Series.pdf

http://download.microsoft.com/download/D/8/6/D869941E-455D-4882-A6B8-0DBCAA6AF2D4/UI Design and Interaction Guide for Windows Phone 7 Series.pdf

http://go.microsoft.com/fwlink/?LinkId=196225

http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=369b20f7-9d30-4cff-8a1b-f80901b2da93

http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=369b20f7-9d30-4cff-8a1b-f80901b2da93

http://go.microsoft.com/fwlink/?LinkID=189338http://go.microsoft.com/fwlink/?LinkID=189338


ご静聴ありがとうございました。

35

Slug 3-windows phone7helloworld-classmethod-ryuichi-nonaka

Documents

Transcript of Slug 3-windows phone7helloworld-classmethod-ryuichi-nonaka