Contenu connexe
Similaire à Slug 3-windows phone7helloworld-classmethod-ryuichi-nonaka
Similaire à Slug 3-windows phone7helloworld-classmethod-ryuichi-nonaka (20)
Slug 3-windows phone7helloworld-classmethod-ryuichi-nonaka
- 1. Windows Phone 7 で
｢Hello world｣
〜 マークアップエンジニアから抜け出したい 〜
クラスメソッド株式会社
技術部 Web担当
野中 ⿓⼀
Copyright © Classmethod. 1
- 2. スピーカー紹介
野中 ⿓⼀ （ Ryuichi Nonaka ）
技術部 Web担当
Twitter @caravaco
経験
Webサイト制作3年
• デザイン
• コーディング
PHP少々
• オブジェクト指向の勉強中
JavaScript
• jQueryがなんとなく使える
• JavaScriptの基本を勉強中
Copyright © Classmethod. 2
- 3. アジェンダ
1. 開発環境の構築
2. プロジェクトの作成
3. エミュレーターを使ってみる
4. 簡単Hello Worldアプリケーションの作成
1. タイトルの編集
2. ボタンコントロールの配置
3. クリックイベントの設定
4. メソッドの編集
5. アプリケーションアイコンの変更
6. オリエンテーションの設定
5. サンプルアプリケーション
6. 参考
Copyright © Classmethod. 3
- 4. １，開発環境の構築
Windows Phone Developer Tools Betaのインストール
Copyright © Classmethod. 4
- 5. 1-1, WPDTのサポート環境
OS
Windows 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 RAM
DirectX 10 capable graphics card with a WDDM 1.1 driver
Copyright © Classmethod. 5
- 6. 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
Copyright © Classmethod. 6
- 7. 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
Copyright © Classmethod. 7
- 8. 1-4, 開発環境のインストール
WPDTのインストール
ダウンロードしたWPDTBata_en.isoをVirtual CloneDriveなどで
マウントし、インストールを実⾏する。
Copyright © Classmethod. 8
- 9. 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）
Copyright © Classmethod. 9
- 10. ２，新規プロジェクトの作成
Windows Phone Applicationの作成
Copyright © Classmethod. 10
- 11. 2-1, Visual Studio 2010 の起動
Windows Phone Application プロジェクトを作成
Visual Studio 2010 Expressを起動し、New Project…をクリックし、
2つのテンプレートが⽤意されているのがわかります。
Silverlight for Windows Phone
XNA Game Studio 4.0
今回は「Silverlight for Windows Phone」 の
「 Windows Phone Application 」プロジェクトを作成します。
Windows Phone Applicationも含め3つのプロジェクトが作成できます。
Windows Phone Application
Windows Phone List Application
Windows Phone Class Library
プロジェクト作成画⾯で名前を設定し「OK」をクリックします。
これでプロジェクトの作成は完了です。
Copyright © Classmethod. 11
- 15. ３，エミュレーターを使ってみる
Windows Phone Emulator Betaの利⽤
Copyright © Classmethod. 15
- 16. 3-1, エミュレーターを起動
Visual Studio 2010 Express からエミュレーターを起動
Start Debuggingボタン（F5）を押してエミュレーターを起動します。
Copyright © Classmethod. 16
- 17. 3-2, エミュレーターの特徴
2010年8⽉30⽇現在
オリエンテーションの変更
ズームセッティング
ハードウェアボタン（Start, Search, Back)
⽇本語の表⽰も可能（現時点ではあまりきれいじゃない）
マウスによる疑似タッチ操作
(マルチタッチ対応ディスプレイであれば指でも操作が可能)
キーボード⼊⼒⾮対応
エミュレーターはショートカットを作成することで単体起動も可能です。
参考：http://blogs.msdn.com/b/shintak/archive/2010/08/22/10052840.aspx
Copyright © Classmethod. 17
- 18. ４，Hello World
Message Boxを使ったHello Worldを表⽰するアプリケーション作成
Copyright © Classmethod. 18
- 20. 4-2, タイトルの変更
アプリケーション・ページタイトルの変更
ビューから直接タイトルを編集します。
1. アプリケーションタイトルを「Classmethod Application」に変更
します。
2. ページタイトルを「Message Box」に変更します。
Copyright © Classmethod. 20
- 21. 4-3, ボタンの配置
ボタンコントロールの配置
Message Boxを表⽰するためのボタンを配置します。
1. アセットウィンドウの「Controls」を選択し、「Button」をビュー
にドラッグして配置します。
2. 配置したボタンコントロールを適当な位置に調節し、ボタンのラベル
をダブルクリックして「Click!」に変更します。
Copyright © Classmethod. 21
- 22. 4-3, クリックイベントの設定
Message Boxを表⽰するためのクリックイベントを設定
ボタンコントロールにイベントを設定します。
1. 先ほどのボタンコントロールを選択し、
プロパティウィンドウの
イベントパネルを開きます。
2. ボタンコントロールのNameを
「MassageBoxBtn」に変更します。
3. Clickイベントのプロパティ設定の部分を
ダブルクリックします。
4. MainPage.xaml.csが開き、
⾃動でMainPageクラスに
MessageBoxBtn_Clickメソッドが
追加されます。
Copyright © Classmethod. 22
- 24. 4-4, メソッドの編集
アラート表⽰の処理を設定する
Message Boxを利⽤してアラートを表⽰します。
1. 先ほどのMessageBoxBtn_Clickメソッドに
MessageBox.Show(“Hello World!”);
を記述します。
Copyright © Classmethod. 24
- 25. 4-5, アプリケーションアイコンの変更
タイルとアプリケーションリストに表⽰されるアイコンの変更
タイル表⽰とアプリケーション⼀覧に表⽰されるアイコンを設定します。
1. プロジェクトフォルダのApplicationIcon.png(62*62)がアプリ
ケーション⼀覧のアイコンです。
2. Background.png(173*173)がタイル表⽰のアイコンになります。
Copyright © Classmethod. 25
- 26. 4-6, オリエンテーションの設定
アプリケーションのオリエンテーション対応
Portrait、Landscapeの両⽅に対応します。
1. オブジェクト＆タイムラインウィンドウから
「 PhoneApplicationPage 」を選択し、プロパティウィンドウにある
「Common Properties」> 「SupportedOrientations」を
「PortraitOrLandscape」に変更します。
Copyright © Classmethod. 26
- 27. 4-7, 実⾏
作成したアプリケーションを実⾏して表⽰してみます。
Copyright © Classmethod. 27
- 28. ５，サンプルアプリケーション
Code Samples for Windows Phone
http://msdn.microsoft.com/en-us/library/ff431744(v=VS.92).aspx
Copyright © Classmethod. 28
- 34. ７，参考
Windows Phone
http://www.windowsphone7.com/
Windows Phone Development
http://msdn.microsoft.com/en-us/library/ff402535(v=VS.92).aspx
⾼橋 忍のブログ
http://blogs.msdn.com/b/shintak/
Windows Phone Developer Tools Beta
http://www.microsoft.com/downloads/details.aspx?FamilyID=c8496c2a-54d9-4b11-9491-
a1bfaf32f2e3&displaylang=en#filelist
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%20Design%20and%20Interaction%20Guide%20for%20Windows%20Phone%207%20Series.pdf
Design Templetes for Windows Phone 7
http://go.microsoft.com/fwlink/?LinkId=196225
Application Bar Icons for Windows Phone 7 Series
http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=369b20f7-9d30-4cff-8a1b-
f80901b2da93
Windows Phone Design System - Codename Metro
http://go.microsoft.com/fwlink/?LinkID=189338http://go.microsoft.com/fwlink/?LinkID=189338
Copyright © Classmethod. 34
