狠狠撸

狠狠撸Share a Scribd company logo

Slug 3-windows phone7helloworld-classmethod-ryuichi-nonaka

?
?
Ryuichi Nonaka
Ryuichi Nonaka
1 of 35
Windows Phone 7 で ?Hello world? ? マークアップエンジニアから抜け出したい ? クラスメソッド株式会社 技術部 Web担当 野中 ?? Copyright???Classmethod. 1
スピーカー紹介 野中 ?? （ Ryuichi Nonaka ） 技術部 Web担当 Twitter @caravaco 経験 Webサイト制作3年 ? デザイン ? コーディング PHP少々 ? オブジェクト指向の勉強中 JavaScript ? jQueryがなんとなく使える ? JavaScriptの基本を勉強中 Copyright???Classmethod. 2
アジェンダ 1. 開発環境の構築 2. プロジェクトの作成 3. エミュレーターを使ってみる 4. 簡単Hello Worldアプリケーションの作成 1. タイトルの編集 2. ボタンコントロールの配置 3. クリックイベントの設定 4. メソッドの編集 5. アプリケーションアイコンの変更 6. オリエンテーションの設定 5. サンプルアプリケーション 6. 参考 Copyright???Classmethod. 3
１，开発环境の构筑 Windows Phone Developer Tools Betaのインストール Copyright???Classmethod. 4
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
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
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
1-4, 開発環境のインストール WPDTのインストール ダウンロードしたWPDTBata_en.isoをVirtual CloneDriveなどで マウントし、インストールを実?する。 Copyright???Classmethod. 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） Copyright???Classmethod. 9
２，新规プロジェクトの作成 Windows Phone Applicationの作成 Copyright???Classmethod. 10
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
Visual Studio 2010の起動画? Copyright???Classmethod. 12
Visual Studio 2010のNew Project画? Copyright???Classmethod. 13
プロジェクトの作成が完了 Copyright???Classmethod. 14
３，エミュレーターを使ってみる Windows Phone Emulator Betaの利? Copyright???Classmethod. 15
3-1, エミュレーターを起動 Visual Studio 2010 Express からエミュレーターを起動 Start Debuggingボタン（F5）を押してエミュレーターを起動します。 Copyright???Classmethod. 16
3-2, エミュレーターの特徴 2010年8?30?現在 オリエンテーションの変更 ズームセッティング ハードウェアボタン（Start, Search, Back) ?本語の表?も可能（現時点ではあまりきれいじゃない） マウスによる疑似タッチ操作 (マルチタッチ対応ディスプレイであれば指でも操作が可能) キーボード???対応 エミュレーターはショートカットを作成することで単体起動も可能です。 参考：http://blogs.msdn.com/b/shintak/archive/2010/08/22/10052840.aspx Copyright???Classmethod. 17
４，Hello World Message Boxを使ったHello Worldを表?するアプリケーション作成 Copyright???Classmethod. 18
4-1, Expression Blendの起動 効率よく画?設計が可能なExpression Blendを起動します。 Copyright???Classmethod. 19
4-2, タイトルの変更 アプリケーション?ページタイトルの変更 ビューから直接タイトルを編集します。 1. アプリケーションタイトルを「Classmethod Application」に変更 します。 2. ページタイトルを「Message Box」に変更します。 Copyright???Classmethod. 20
4-3, ボタンの配置 ボタンコントロールの配置 Message Boxを表?するためのボタンを配置します。 1. アセットウィンドウの「Controls」を選択し、「Button」をビュー にドラッグして配置します。 2. 配置したボタンコントロールを適当な位置に調節し、ボタンのラベル をダブルクリックして「Click!」に変更します。 Copyright???Classmethod. 21
4-3, クリックイベントの設定 Message Boxを表?するためのクリックイベントを設定 ボタンコントロールにイベントを設定します。 1. 先ほどのボタンコントロールを選択し、 プロパティウィンドウの イベントパネルを開きます。 2. ボタンコントロールのNameを 「MassageBoxBtn」に変更します。 3. Clickイベントのプロパティ設定の部分を ダブルクリックします。 4. MainPage.xaml.csが開き、 ?動でMainPageクラスに MessageBoxBtn_Clickメソッドが 追加されます。 Copyright???Classmethod. 22
MainPage.xaml.cs Copyright???Classmethod. 23
4-4, メソッドの編集 アラート表?の処理を設定する Message Boxを利?してアラートを表?します。 1. 先ほどのMessageBoxBtn_Clickメソッドに MessageBox.Show(“Hello World!”); を記述します。 Copyright???Classmethod. 24
4-5, アプリケーションアイコンの変更 タイルとアプリケーションリストに表?されるアイコンの変更 タイル表?とアプリケーション?覧に表?されるアイコンを設定します。 1. プロジェクトフォルダのApplicationIcon.png(62*62)がアプリ ケーション?覧のアイコンです。 2. Background.png(173*173)がタイル表?のアイコンになります。 Copyright???Classmethod. 25
4-6, オリエンテーションの設定 アプリケーションのオリエンテーション対応 Portrait、Landscapeの両?に対応します。 1. オブジェクト＆タイムラインウィンドウから 「 PhoneApplicationPage 」を選択し、プロパティウィンドウにある 「Common Properties」> 「SupportedOrientations」を 「PortraitOrLandscape」に変更します。 Copyright???Classmethod. 26
4-7, 実? 作成したアプリケーションを実?して表?してみます。 Copyright???Classmethod. 27
５，サンプルアプリケーション Code Samples for Windows Phone http://msdn.microsoft.com/en-us/library/ff431744(v=VS.92).aspx Copyright???Classmethod. 28
リストアプリケーション Copyright???Classmethod. 29
アプリケーションバーサンプル Copyright???Classmethod. 30
セッティングサンプルアプリケーション http://msdn.microsoft.com/en-us/library/ff431744(v=VS.92).aspx Copyright???Classmethod. 31
天気予報アプリケーション http://msdn.microsoft.com/en-us/library/ff431744(v=VS.92).aspx Copyright???Classmethod. 32
ブラウザーサンプルアプリケーション http://msdn.microsoft.com/en-us/library/ff431744(v=VS.92).aspx Copyright???Classmethod. 33
７，参考 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
ご静聴ありがとうございました。 Copyright???Classmethod. 35

More Related Content

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
  • 13. Visual Studio 2010のNew Project画? Copyright???Classmethod. 13
  • 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
  • 19. 4-1, Expression Blendの起動 効率よく画?設計が可能なExpression Blendを起動します。 Copyright???Classmethod. 19
  • 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