silverlight勉強会 #03 windows phone 7概要

Copyright © CLASSMETHOD. 1

Silverlight勉強会 #03

Windows Phone 7概要周回遅れに巻き込まれるな！

⽇時：2010/08/30場所：クラスメソッド株式会社会議室


スピーカー紹介• 福⽥寅成（Tomonari FUKUDA）

• Twitter

• RIAエバンジェリストここ4年RIA構築専⾨

• Microsoft様、 Adobe様、Amazon様と共催セミナー開催• BizRIA研究所、＠IT等にて記事執筆• RIA、クラウドのPoCアプリケーションの開発/公開


クラスメソッドとは？• 業務システムのインタフェースデザイン• 業務システムのコンサルティング、提案、設計、実装、テスト、運⽤⽀援

• RIA関連の技術⽀援、コミュニティ活動


アジェンダ


アジェンダ• Windows Phone 7概要• Windows Phone 7開発環境• Windows Phone 7リソース⼀覧• UI Design and Interaction Guide• Twitterアプリケーション• CLASSMETHOD on Silverlight 4


クラスメソッドのBusiness RIA研究所

ユーザーコミュニティ

各種セミナーの開催/運営


ユーザーコミュニティ運営

Flex User Group

Silverlight User Group

Japan AWS User Group

http://www.fxug.net/ #fxug http://sl.ria-ug.net/ #slug http://jaws-ug.jp/ #jawsug

http://www.devlove.org/ #devloveクラスメソッドでは「良い技術」とそれを使いたい「デベロッパ」や

「ユーザー企業」の間の溝を埋め、相互コミュニケーションを促進させる⽬的で各種セミナーを地域ごとに開催しています。


セミナー紹介：社外セミナー開催⽇時セミナータイトル

2010/01/28（⽊） Microsoft社共催セミナー：Silverlight で実現する業務RIA 02

2010/02/19（⾦） Developer Summit 2010

2010/02/23（⽕） Microsoft TechDays 2010（キーノート向けアプリケーション構築）

2010/02/25（⽊） Amazon Data Services Japan共催：Business RIA × クラウドセミナー 03

2010/03/24（⽔） Adobe社共催：Flash Builder 4を⽤いた⾼品質RIA開発セミナー 04

2010/04/02（⾦） Amazon Data Services Japan共催：Business RIA × クラウドセミナー #02 05

2010/05/12（⽔） SODEC 第19回ソフトウェア開発環境展

2010/05/26（⽔） Adobe社共催：AIR2.0を⽤いた業務RIA⾰新セミナー 06

2010/05/27（⽊） Silverlight 勉強会 #01

2010/05/29（⼟） Flex User Group Japan Tour 2010 名古屋

2010/06/05（⼟） Flex User Group Japan Tour 2010 札幌

2010/06/19（⼟） Silverlight 勉強会 #02

2010/06/19（⼟） Flex User Group Japan Tour 2010 ⾦沢

2010/06/25（⾦） Silverlightセミナー（Microsoft社、GrapeCity社共催） 07


セミナー紹介：社外セミナー開催⽇時セミナータイトル

2010/07/28（⽔） Flex User Group Japan Tour 2010 ファイナル東京

2010/08/30（⽉） Silverlight 勉強会 #03

2010/09/01（⽔） Flex × Java 業務システム改善セミナー（ビジネス編） 08

2010/09/01（⽔） Flex × Java 業務システム改善セミナー（デベロッパー編） 09


セミナー紹介：その他開催⽇時セミナータイトル CM会場

2010/04/16（⽊） DevLove：キャズムを超えるのは俺たちだ。（Flex、HTML5）

2010/04/28（⽔） Cassandra勉強会

2010/06/08（⽕） DevLove：実践知のリーダーシップ

2010/06/18（⾦） DevLove：DLuid放談会

2010/06/21（⽉） DevLove：開発プロセス勉強会

2010/07/24（⼟）ペルソナ分析法／デザイン思考のワークショップ [有償セミナー]

2010/08/11（⽔） DevLove：マーケティング勉強会（マイクロソフト池⽥さん）

2010/08/26（⽊）ペルソナ分析法／デザイン思考のワークショップ振り返り

2010/08/27（⾦）ナナナナ会：30±10代しゃべり場「仕事と⽣活のバランス」

2010/09/03（⾦） iPhone勉強会（tilfin⾼橋さん）


セミナー紹介：社内セミナー開催⽇時セミナータイトル

2010/08/03（⽕） Flash Builder 4勉強会（CM福⽥） 01

2010/08/09（⽉） iPhone勉強会（CM横⽥） 02

2010/08/10（⽕） AIR 2.0勉強会（CM福⽥） 03

2010/08/24（⽕）プロジェクトマネージメント勉強会（CM嵩原） 04


Windows Phone 7概要


略語• WP7：Windows Phone 7• WPDT：Windows Phone Developer Tool


Silverlight とは何か？• Silverlight とは（その１）業務アプリケーション開発向けのフレームワーク開発環境、デザインツールなどツール類が完備広く普及しているSilverlightランタイム上で動作ASP.NET/Webサービス/クラウドなどと連携

• Silverlight とは（その２）デスクトップアプリケーション開発プラットフォームローカルファイル、他アプリにアクセスができます

Windows Phone 7向けアプリ開発

⽣産性とメンテナンス性に優れた強⼒なフレームワーク

魅⼒的なデスクトップ/モバイルアプリ開発プラットフォーム


Windows Phone 7• 次世代のマイクロソフト版スマートフォン• SilverlightとXNAによるアプリケーション開発Silverlight：.NETベースのRIA開発のデファクトXNA：XBOX360やPC向けゲーム開発で実績豊富

• 先進RIA開発環境完備Visual Studio 2010 Express for Windows

Phone BetaMicrosoft Expression Blend for Windows

Phone Beta


TechEdのキーノートでのWP7


Windows Phone 7：特徴• .NETベースでの開発• 開発環境は圧倒的、コンポーネント少他のプラットフォームに⽐較してSilverlight商⽤コンポーネント開発会社がWP7向け

コンポーネントを絶対出す！（願）Infragistics、GrapeCity、Telerik

参考：AndroidはAIR for Androidの登場により環境が激変する予定＝WP7と同程度の作りやすさに

• 業務活⽤Windows AzureやOffice Web Appsなどの存在

• Windows Mobile 6.5までの開発経験は流⽤不可


UIフレームワークMetro• Windows Phone 7のUIデザインパターン• ⽇本の地下鉄「メトロ」がベース⽇本の地下鉄の乗り換えガイドや地図


まとめ

今スタートする⼈がWindows Phone 7でTOPを⾛れる！


Windows Phone 7登場予定• ⽶国：年内？• ⽇本：来年前半？？？TechEd2010では発売時期未定と改めて発表

そもそも⽇本に実機がまだ数台しかない状況（泣）


しかし。。。


なぜ実機を待っていると周回遅れか？• Silverlight経験者は技術⾯でのジャンプが全くないため今現在でもアプリの作り込みが可能iPhoneやAndroidに⽐べより多くの開発者が容易

に参⼊しやすい環境のため、少しの遅れが⼤きな差に繋がると考えられる

• Flash/iPhone経験者でSilverlight未経験者の存在スマートフォンに対するノウハウを有している状

況のデベロッパが容易にWP7に参⼊• ⾮業務環境＝ノウハウや事例が外に出てくる→ 業務アプリに⽐べ2番煎じが通⽤しにくい


Windows Phone 7 Marketplace• アプリケーションストア他のスマートフォン同様

• 価格等（予定）年間登録料：1万円くらい

有料アプリ：無制限個無料アプリ：5本まで無料、6本⽬以降2000円位

全世界配信は追加費⽤無し• マージンMS：開発者＝３：７

• 試⽤版API• 無料、有料、⼀部有料、広告有無• アプリはマーケットプレイス以外では基本⼊⼿不可たぶん社内向け配布の仕組みとかはiPhone同様出てくる


参考：WP7ローンチゲームタイトル• “3D Brick Breaker Revolution” (Digital Chocolate)• “Age of Zombies” (Halfbrick)• “Armor Valley” (Protégé Games)• “Asphalt 5” (Gameloft)• “Assassins Creed” (Gameloft)• “Bejeweled™ LIVE” (PopCap)• “Bloons TD” (Digital Goldfish)• “Brain Challenge” (Gameloft)• “Bubble Town 2” (i-Play)• “Butterfly” (Press Start Studio)• “CarneyVale Showtime” (MGS)• “Castlevania” (Konami Digital Entertainment)• “Crackdown 2: Project Sunburst” (MGS)• “De Blob Revolution” (THQ)• “Deal or No Deal 2010” (i-Play)• “Earthworm Jim” (Gameloft)• “Fast & Furious 7” (i-Play)• “Fight Game Rivals” (Rough Cookie)• “Finger Physics” (Mobliss Inc.)• “Flight Control” (Namco Bandai)• “Flowerz” (Carbonated Games)• “Frogger” (Konami Digital Entertainment)• “Fruit Ninja” (Halfbrick)• “Game Chest-Board” (MGS)• “Game Chest-Card” (MGS)• “Game Chest-Logic” (MGS)• “Game Chest-Solitaire” (MGS)• “GeoDefense” (Critical Thought)• “Ghostscape” (Psionic)• “Glow Artisan” (Powerhead Games)• “Glyder 2” (Glu Mobile)• “Guitar Hero 5” (Glu Mobile)

• “Halo Waypoint” (MGS)• “Hexic Rush” (Carbonated Games)• “I Dig It” (InMotion)• “iBlast Moki” (Godzilab)• “ilomilo” (MGS)• “Implode XL” (IUGO)• “Iquarium” (Infinite Dreams)• “Jet Car Stunts” (True Axis)• “Letʼs Golf 2” (Gameloft)• “Little Wheel” (One click dog)• “Loondon” (Flip N Tale)• “Max and the Magic Marker” (PressPlay)• “Mini Squadron” (Supermono Limited)• “More Brain Exercise” (Namco Bandai)• “O.M.G.” (Arkedo)• “Puzzle Quest 2” (Namco Bandai)• “Real Soccer 2” (Gameloft)• “The Revenants” (Chaotic Moon)• “Rise of Glory” (Revo Solutions)• “Rocket Riot” (Codeglue)• “Splinter Cell Conviction” (Gameloft)• “Star Wars: Battle for Hoth” (THQ)• “Star Wars: Cantina” (THQ)• “The Harvest” (MGS)• “The Oregon Trail” (Gameloft)• “Tower Bloxx NY” (Digital Chocolate)• “Twin Blades” (Press Start Studio)• “UNO” (Gameloft)• “Womenʼs Murder Club: Death in Scarlet” (i-Play)• “Zombie Attack!” (IUGO)• “Zombies!!!!” (Babaroga)


Windows Phone 7開発環境


Windows Phone 7 ハードウェア要件• 800x480 QVGA/ 480x320 HVGA• 静電式パネル 4ポイント以上のタッチポイント• A-GPS, コンパス、加速度センサー、照度セン

サー、近接センサー• 500万画素以上のカメラ、フラッシュ、カメラボ

タン• 標準のコーデック(メディア）• 256MB RAM＋8GB フラッシュ ROM • DirectX 9 対応 GPU • CPUは ARMv7 Cortex/Scorpion 以上• 3つのハードウェアボタンStart、Search、Back


Windows Phone 7開発環境 - WPDT• Windows Phone Developer Tools BetaVisual Studio 2010 Express for Windows

Phone BetaWindows Phone Emulator BataSilverlight for Windows Phone BetaMicrosoft Expression Blend for Windows

Phone BetaXNA Game Studio 4.0 Beta

・1個のISOファイルですべてをインストールします。・現状VS2010 Ultimate等へのプラグインは無し→ 今後もなさそう（？）

★完全無償★


Visual Studio 2010 Express for Windows Phone Beta


Microsoft Expression Blend for Windows Phone Beta


Windows Phone7開発環境：注意• Windows 7とVista以外にインストール不可Visual Studio 2010の実⾏要件と違う事に注意

• VS2010 Expressベースだが拡張機能はインストール可能オンラインギャラリーにアクセス可能コンポーネントはWP7以外⽤のものばかりインストールしても無駄

Productivity Power Tools、AnkhSVNなども⾒当たらない今後に期待

• Visual Studio 2010、Expression Blendの通常版では今後も開発できない可能性がある


ニュース：WPDT最終版まもなく！• 2010年09⽉16⽇登場！• 機能はBeta版と同じ• 重要コントロール（後述）が登場PanoramaコントロールPivotコントロールBing mapコントロール


開発の基礎 – MSDNより• WPDTのWhatʼs Newを読む• Windows Phoneコードサンプルを試す• WindowsとWindows PhoneのSilverlightの違いを読む

• Windows PhoneでSilverlight開発する場合のFrame/Pageナビゲーションのコンセプトを学ぶ

• Windows Phone APIの詳細情報はClass Library Reference for Windows Phoneにある


開発の基礎 – MSDNより• Windows Phoneの実⾏モデルを学ぶ「通話が来た場合」等に対応するために

• 電話の実機でデバッグする⽅法を学ぶ• Windows Phoneエミュレーターについて学ぶ• Windows Phone Developer PortalにWindows Phone Developerとして登録するWindows Phone Marketplaceにアプリケー

ションを登録するために必要

※エミュレータのパフォーマンスは⾼速、起動も⽐較的速く、起動中のエミュレータにアプリを配置/再配置するのは⼀瞬！


Windows Phone 7リソース⼀覧


Silverlight 4 Training Course

・Windows Phone 7に特化したものはまだありません


Silverlight 4 オフラインドキュメント

・Windows Phone 7に特化したものはまだありません


Windows Phone 7 Series Training Kit

・⽇本語版が欲しい → 翻訳しようかな。。。

http://channel9.msdn.com/learn/courses/WP7TrainingKit/


Programming Windows Phone 7 Series

• 開発ガイドブック現在⼀部が無料公開されている

http://blogs.msdn.com/b/microsoft_press/archive/2010/03/15/free‐ebook‐programming‐windows‐phone‐7‐series‐draft‐preview.aspx


Windows Phone Development - MSDN

• 開発全般に関してドキュメント既に準備済み• 英語版のみhttp://msdn.microsoft.com/en‐us/library/ff402535(v=VS.92).aspx


チェックすべきTwitter• @shinjiko9越川慎司さん

• @shinoblogavi⾼橋忍さんブログもチェックhttp://blogs.msdn.com/b/shintak/


ProjectUX

http://www.microsoft.com/japan/powerpro/projectux/default.mspx


Microsoft Silverlight

http://www.microsoft.com/japan/silverlight/default.aspx


UI Design and Interaction Guide


UI Design and Interaction Guide for Windows Phone 7 Series

• WP7開発時に必要なデザイン、インタラクションに関するガイドライン

• 他のスマートフォンプラットフォーム同様開発者必読


UIガイドライン：例• チェックボックス配置を⼯夫しないとタッチミスを起こさないよう

にすべし


UIガイドライン：⽬次• ⼊⼒タイプタッチのデザイン使いやすくアクセシブルなレイアウト⾃然で直観的なインタラクション分かりやすく、反応の良いパフォーマンスユニークでエキサイティングな体験

サポートされるタッチジェスチャータップダブルタップパンフリックピンチ、ストレッチタッチ、ホールドタッチデザインで考慮すべきこと


UIガイドライン：⽬次• ⼊⼒タイプハードウェアボタンキーボードスクリーンキーボードハードウェアキーボード

センサー• ユーザーインターフェースフレームワークスクリーンの向きフレーム/ページ構造スクロールビューアーテーマ


UIガイドライン：⽬次• Windows Phoneアプリケーションコントロール

Windows Phone 7でサポートされるコントロール Windows Phone 7でサポートされないコントロール

プッシュボタントグルスイッチチェックボックスラジオボタンハイパーリンクボタンスライダーコントロールテキストブロックテキストボックスリストボックスリストビューアイテムプログレスバーページタイトルパノラマアプリケーション

デザイン推奨パターンピボットコントロール


UIガイドライン：⽬次• Windows Phoneシステムコントロールシステムトレイ、アプリケーションバーコンテキストメニューWindows Phone Notifcation - 通知機能Push Notification概要Push Notificationタイプ

Progress Indicator – 進⾏インジケータ• UIテキストガイドラインWindows Phone 7 ボイスとトーン - マナー⼤⽂字化句読点UIテキスト設計で考慮すべきこと


TwitterアプリケーションTechEd2010キーノートWP7デモ by @shinoblogavi


Twitterアプリケーション• 新規Windows Phone Applicationを作成するソリューション名：TechEdtter7

• PageTitle TextBlockのTextプロパティをTechEdtter7にする

• TextBox、Button、ListBoxを配置する• TextBoxのTextプロパティをteched_jpにする• Buttonをダブルクリックし、button1_Clickを⾃動⽣成

• 参照にSysytem.Xml、Sysytem.Xml.Linqを追加

Microsoft Tech・Ed 2010基調講演オンデマンド配信 01:09:45～


Twitterアプリケーション• ボタンのクリックハンドラを作るWebClientをつくるTwitterのタイムラインを取得するUriを作成DownloadStringCompletedイベントハンドラを

定義⾮同期にデータをダウンロードする

WebClient twitter = new WebClient();

Uri twitterUri = new Uri("http://api.twitter.com/1/statuses/public_timeline.xml?screen_name=" + textBlock1.Text);

twitter.DownloadStringCompleted += new DownloadStringCompletedEventHandler(twitter_DownloadStringCompleted);

twitter.DownloadStringAsync(twitterUri);


Twitterアプリケーション• Twitterデータのエンティティを作成する

public class TwitterItem{public string Name { get; set; }public string Twitt { get; set; }public string ImageSource { get; set; }

}


Twitterアプリケーション• DownloadStringCompletedイベントハンドラを実装する

if (e.Error != null){

MessageBox.Show(e.Error.Message);return;

}

XElement xmlTweets = XElement.Parse(e.Result);

var tweets = from tweet in xmlTweets.Descendants("status")select new TwitterItem{

ImageSource = tweet.Element("user").Element("profile_image_url").Value,Twitt = tweet.Element("text").Value,Name = tweet.Element("user").Element("name").Value

};

listBox1.ItemsSource = tweets;


Twitterアプリケーション• MainPage.xamlを右クリックしてBlend（WP7⽤）を開く普通のBlendを開いていると変になるので、閉じ

ておく


Twitterアプリケーション• サンプルデータソースを新規作成する• プロパティを3つにするItemSource：画像型、画像フォルダは適当Name：String型、FormatはNameTwitt：String型、最⼤⽂字を17⽂字にする

• SampleDataSourceのCollectionをlistBox1にドラッグアンドドロップする


Twitterアプリケーション• listBox1を右クリックし、Edit Additional Templates＞Edit Generated Items＞EditCurrentをクリックする

• StackPanelのOrientationをHorizontalにする• 真ん中のTextBlockのForegroundを⻘⾊にする

• F5で実⾏する• ボタンをクリックしてみる

※このデモは全く同じことを普通のSilverlightプロジェクトでやってもWPFプロジェクトでやっても動きます。


Twitterアプリケーション：実⾏画⾯


Twitterアプリケーション：実機で動かす

ホーム画⾯

タイルで構成される

メニューボタン



メニュー画⾯



ボタン⻑押しでメニュー。

ホーム画⾯にリンクを追加できる。



キーノートでデモ成功！８８８８８８８８８８！


CLASSMETHOD on Silverlight 4• Microsoft TechDays 2010のキーノートでSilverlightの紹介のために利⽤されたデモアプリケーションの⼀つ

• Silverlight 4の最新機能を紹介• 業務アプリケーションを想定したデザイン• バージョン：1.0：TechDays 2010⽤1.1：Silverlight 4 RTM対応1.2：DeepZoom機能等を追加、デザイン⼀新1.3：Silverlight＋Azure（Coming soon）


CLASSMETHOD on Silverlight 4

silverlight勉強会 #03 windows phone 7概要

Technology