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