Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Windows Phone 7 ゕプリ実際に開発してみてわかったいろいろ        @kaorun       2011/04/16
こんな人• Name: Nakajima Kaoru• Twitter: @kaorun• Hatena: id:kaorun• サイボウズ・ラボ所属  – Software Design Engineer  – 主にMS担当係        ...
WP7日本語入力ゕプリUtakata Japanese TextPad 絶賛公開中           主な機能:           • アプリ内でフリック入力           • SocialIME/Google CGI APIでかな漢...
さて本日は
Windows Phone 7ゕプリの開発         について
あしからず #1• 以下の内容は含まれません (たぶんきっと)  –   開発環境の作り方  –   App Hubの登録とか  –   Silverlightってなんだ?  –   VSやBlendでコードとデザインの分離  –   Data...
あしからず #2• 以下の内容は… – Utakataを作りながら学んだこと多数 – つまりUtakataのソースを見ても一部しか反映   されていません!• WPFやSilverlightの手練れな人には言うま  でもないことも多いです
なんなの?• いろいろ謎な用語が出てきます• 実際に開発にあたってネックになるポイ  ントがメイン• あとで調べる際のキーワードにでも
Windows Phone 7ってナニモノ?
• MSの新しいスマートフォンでしょ?• Windows Mobileとの互換性を捨てて新規  開発された云々…• ぬるぬるサクサク• ゕニメーションカッコイイ• OfficeやらXboxやら
Windows Phone 7ってナニモノ?
100% Managed Code
Pure Silverlight OS        + XNA
XAML & C#
WP7アプリ開発とは
ガリガリぬるぬる
WP7ゕプリの開発とは• Visual StudioでXAMLとC#をガリガリ書くぜ – IntelliSense最強伝説• BlendでXAMLをぬるぬる生成するぜ – テンプレート編集でコントロールのスタイルを   いじりまくり – なんで...
個人的なBlendとVSの使い分け           VS vs Blend        Expression          Blend                     Visual Studio
用法・用量を守って正しくお使いください• 以下の方々にはお勧めしません(今のところ) – Visual Studio、IDEにゕレルギーのある方 – emacsをこよなく愛する人 – vimでないと体が動かない人 – eclipse worke...
まずはXAMLを覚えてもらおうか• HTMLみたいなもんですよ。• ひな形はVisual Studioが生成してくれる• IntelliSenseでカタカタやってればすぐ覚える  よ – HTMLより単純で高度 – がんばろうDataBindi...
Silverlightの基本原則とセオリー• XAMLで書けるモノはコード(C#)でも書ける• コードで書かれてることも結構XAMLでも書  ける  – 「えっ、そこまでXAMLでできちゃうの?」• ロジックの実装はできるだけViewModel...
WP7ゕプリ開発のいろいろ• なんとなく見目のいいモノはわりとすぐ  できる• WP7っぽさを出すのが案外タイヘン – 標準のフレームワークがまだショボイのでい   ろいろライブラリが必用なのが現状• 今のところ入門以外のドキュメントはほ  ぼ...
Expression Blend英語版をおすすめする理由• Silverlight開発はXAMLオブジェクトをどう扱  うか• XAMLのElement, AttributeとBlendの機能名が  一対一対応• 英語が嫌いでもオブジェクト名が...
教科書(?)通りのやり方•   VSでプロジェクト作成•   基本的な実装•   Blendで編集・味付け•   コードビハインドの実装• …
何が起きるか•   XAMLフゔイルの巨大化•   可読性が極めて悪い•   再利用性の低下•   コードビハインドもぐしゃぐしゃに…
スタイルとかなんとか   ページの実装
対策案• スタイルをリソース化して分離• UserControl化して分離• カスタムコントロール化
スタイルをリソース化• Blendでテンプレート編集• リソースを別フゔイルに – app.xamlに組み込む – リソースフゔイルを分離・参照 – 複数のリソースフゔイルを参照
Demo
app.xamlに組み込み<Application    x:Class="WindowsPhonePivotApplication3.App"    xmlns="http://schemas.microsoft.com/winfx/2006...
ResourceDictionaryを参照<Application …>    <!--Application Resources-->    <Application.Resources>        <ResourceDictionary...
複数のResourceDictionaryを参照<Application …>    <!--Application Resources-->    <Application.Resources >        <ResourceDictio...
でも…
それUserControlで• [追加]/[新しい項目]  [Windows Phone User Control] するだけ• カンタン!
UserControlにすると• そのコントロールの中だけで終始• 使い回しが効かない• なんとなくゴチャゴチャした実装になり  がち• 親ページと干渉することがある希ガス
こういう時にUserControlを使うといい• HTMLでいうところのiframe感覚• 枠の中でいろいろした奴を使いまわした  り• ある程度まとまった実装として固めたい  とき
カスタムコントロールって?•   WPFにはテンプレートがあるのだが…•   ようするにControl継承クラス•   やりたいことはコードで書け•   原則としてコードだけで実装         public class HogeContro...
そんなの面倒でやってられません
XAML使えないの?
それgeneric.xamlで• /Themes/generic.xaml というフゔイルを作る• 勝手に読み込まれる• 既存コントロールの派生クラスでテンプレー  トとしてスタイルを読み込み• ButtonとかTextBoxとか派生したカッコ...
generic.xamlのお約束• 以下の記述はできません – イベントハンドラ指定 – トリガー – ようするにXAMLからコードが呼ばれるよう   な動作は不可• コードビハインド側からxaml要素を拾っ  てイベントなどを引っかけるイメー...
generic.xaml の書き方<ResourceDictionary    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http...
generic.xamlを参照するクラスnamespace WindowsPhoneApplication1{    public class WatermarkTextBox : TextBox    {        private Gri...
細かいキーポイント• まずはPanoramaプロジェクトを作成して  ソースをじっくり読もう – ViewModelの使い方 – なにがどこにあるのか、など• レイゕウトがわけわからなくなったら  Borderデバッグ – とりあえず<Bord...
基本的なコネタ• ページ遷移は  NavigationService.Navigate()  NavigationService.GoBack()• データの永続化は  IsolatedStorageSettings.ApplicationSe...
その他資料
まずはここ• MSDN - Windows Phone Development http://msdn.microsoft.com/en-us/library/ff402535• Windows Phone 開発者向け技術情報 http://m...
なにかわからない時は• USのApp Hub Forumで聞くといいよ! –   殆どの質問は偉い人が即答 –   既出ならリンクを張ってくれる –   中の人が答えてくれる場合も –   既存の質問をいろいろ見て書き方の参考にすると     ...
WP7らしい動きをつけたいときには• Silverlight Toolkitのソースを読む http://silverlight.codeplex.com/SourceControl/list/chang esets• 7Metroのソースを読...
Windows phone 7アプリ 実際に開発してみてわかったいろいろ
Windows phone 7アプリ 実際に開発してみてわかったいろいろ
Windows phone 7アプリ 実際に開発してみてわかったいろいろ
Windows phone 7アプリ 実際に開発してみてわかったいろいろ
Prochain SlideShare
Chargement dans…5
×

Windows phone 7アプリ 実際に開発してみてわかったいろいろ

6 209 vues

Publié le

すまべん@関東#12で発表させていただいた資料です。
(フォントが悲しかったのでPDFで再登録)
http://d.hatena.ne.jp/kaorun/20110416/1302960944

Publié dans : Technologie
  • Soyez le premier à commenter

Windows phone 7アプリ 実際に開発してみてわかったいろいろ

  1. 1. Windows Phone 7 ゕプリ実際に開発してみてわかったいろいろ @kaorun 2011/04/16
  2. 2. こんな人• Name: Nakajima Kaoru• Twitter: @kaorun• Hatena: id:kaorun• サイボウズ・ラボ所属 – Software Design Engineer – 主にMS担当係 *1 iPhone, Androidの開発をしたことは無い
  3. 3. WP7日本語入力ゕプリUtakata Japanese TextPad 絶賛公開中 主な機能: • アプリ内でフリック入力 • SocialIME/Google CGI APIでかな漢字変換 • メール・SMS送信、検索、Twitterでツイート • MS-Plライセンスでリポジトリ公開中 https://bitbucket.org/kaorun/utakata
  4. 4. さて本日は
  5. 5. Windows Phone 7ゕプリの開発 について
  6. 6. あしからず #1• 以下の内容は含まれません (たぶんきっと) – 開発環境の作り方 – App Hubの登録とか – Silverlightってなんだ? – VSやBlendでコードとデザインの分離 – DataBindingの理解は必須だよね – MVVM, Rxでカッコイイコードの書き方 – 他のプラットフォームと比較して云々 – XNAとか「Microsoftさんのイベントやカンフゔレンスに行くといいよ」
  7. 7. あしからず #2• 以下の内容は… – Utakataを作りながら学んだこと多数 – つまりUtakataのソースを見ても一部しか反映 されていません!• WPFやSilverlightの手練れな人には言うま でもないことも多いです
  8. 8. なんなの?• いろいろ謎な用語が出てきます• 実際に開発にあたってネックになるポイ ントがメイン• あとで調べる際のキーワードにでも
  9. 9. Windows Phone 7ってナニモノ?
  10. 10. • MSの新しいスマートフォンでしょ?• Windows Mobileとの互換性を捨てて新規 開発された云々…• ぬるぬるサクサク• ゕニメーションカッコイイ• OfficeやらXboxやら
  11. 11. Windows Phone 7ってナニモノ?
  12. 12. 100% Managed Code
  13. 13. Pure Silverlight OS + XNA
  14. 14. XAML & C#
  15. 15. WP7アプリ開発とは
  16. 16. ガリガリぬるぬる
  17. 17. WP7ゕプリの開発とは• Visual StudioでXAMLとC#をガリガリ書くぜ – IntelliSense最強伝説• BlendでXAMLをぬるぬる生成するぜ – テンプレート編集でコントロールのスタイルを いじりまくり – なんでもボタンやコントロールに – StoryboardやViewStateで華麗にゕニメーション をキメろ
  18. 18. 個人的なBlendとVSの使い分け VS vs Blend Expression Blend Visual Studio
  19. 19. 用法・用量を守って正しくお使いください• 以下の方々にはお勧めしません(今のところ) – Visual Studio、IDEにゕレルギーのある方 – emacsをこよなく愛する人 – vimでないと体が動かない人 – eclipse workerは医師にご相談ください
  20. 20. まずはXAMLを覚えてもらおうか• HTMLみたいなもんですよ。• ひな形はVisual Studioが生成してくれる• IntelliSenseでカタカタやってればすぐ覚える よ – HTMLより単純で高度 – がんばろうDataBinding• Blendでいろいろ弄り回して出力されたXAML を読んでみる – Blendの使い方はとにかく動画で見る – FlashやIllustratorで作ったドロー要素が全部XML で出力されるような感じ
  21. 21. Silverlightの基本原則とセオリー• XAMLで書けるモノはコード(C#)でも書ける• コードで書かれてることも結構XAMLでも書 ける – 「えっ、そこまでXAMLでできちゃうの?」• ロジックの実装はできるだけViewModelに分 離する(MVVM)• ViewModelでDependency Propertyを実装し てXAMLでDataBindingする• ただし、速度と美しさは必ずしも両立しな い!?
  22. 22. WP7ゕプリ開発のいろいろ• なんとなく見目のいいモノはわりとすぐ できる• WP7っぽさを出すのが案外タイヘン – 標準のフレームワークがまだショボイのでい ろいろライブラリが必用なのが現状• 今のところ入門以外のドキュメントはほ ぼ英語• デスクトップ版SilverlightやWPFのノウハ ウはだいたい使える
  23. 23. Expression Blend英語版をおすすめする理由• Silverlight開発はXAMLオブジェクトをどう扱 うか• XAMLのElement, AttributeとBlendの機能名が 一対一対応• 英語が嫌いでもオブジェクト名が英語なんだ からしょうがない• ビジュゕルなツールなのでコマンド・メ ニュー名とかより何がどこにあるか覚えちゃ えばOk• プロダクトキーは各言語共通じゃないかな…
  24. 24. 教科書(?)通りのやり方• VSでプロジェクト作成• 基本的な実装• Blendで編集・味付け• コードビハインドの実装• …
  25. 25. 何が起きるか• XAMLフゔイルの巨大化• 可読性が極めて悪い• 再利用性の低下• コードビハインドもぐしゃぐしゃに…
  26. 26. スタイルとかなんとか ページの実装
  27. 27. 対策案• スタイルをリソース化して分離• UserControl化して分離• カスタムコントロール化
  28. 28. スタイルをリソース化• Blendでテンプレート編集• リソースを別フゔイルに – app.xamlに組み込む – リソースフゔイルを分離・参照 – 複数のリソースフゔイルを参照
  29. 29. Demo
  30. 30. app.xamlに組み込み<Application x:Class="WindowsPhonePivotApplication3.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"> <!--Application Resources--> <Application.Resources> <ItemsPanelTemplate x:Key="HorizontalItemsPanel"> <StackPanel Orientation="Horizontal"/> </ItemsPanelTemplate> <Style x:Key="HorizontalListBoxStyle" TargetType="ListBox"> <Setter Property="Background" Value="Transparent"/> <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/> <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/> … </Style> </Application.Resources> …</Application> アプリ全域で使えるスタイル化
  31. 31. ResourceDictionaryを参照<Application …> <!--Application Resources--> <Application.Resources> <ResourceDictionary Source="/Styles.xaml"> </Application.Resources>…</Application> スタイル定義をリソースファイルに分離
  32. 32. 複数のResourceDictionaryを参照<Application …> <!--Application Resources--> <Application.Resources > <ResourceDictionary > <ResourceDictionary.MergedDictionaries > <ResourceDictionary Source ="Styles.xaml"/> <ResourceDictionary Source ="Styles2.xaml"/> </ResourceDictionary.MergedDictionaries > </ResourceDictionary > </Application.Resources > …</Application>
  33. 33. でも…
  34. 34. それUserControlで• [追加]/[新しい項目] [Windows Phone User Control] するだけ• カンタン!
  35. 35. UserControlにすると• そのコントロールの中だけで終始• 使い回しが効かない• なんとなくゴチャゴチャした実装になり がち• 親ページと干渉することがある希ガス
  36. 36. こういう時にUserControlを使うといい• HTMLでいうところのiframe感覚• 枠の中でいろいろした奴を使いまわした り• ある程度まとまった実装として固めたい とき
  37. 37. カスタムコントロールって?• WPFにはテンプレートがあるのだが…• ようするにControl継承クラス• やりたいことはコードで書け• 原則としてコードだけで実装 public class HogeControl : Control { }
  38. 38. そんなの面倒でやってられません
  39. 39. XAML使えないの?
  40. 40. それgeneric.xamlで• /Themes/generic.xaml というフゔイルを作る• 勝手に読み込まれる• 既存コントロールの派生クラスでテンプレー トとしてスタイルを読み込み• ButtonとかTextBoxとか派生したカッコイイ コントロールをxamlとコードで作っちゃう• 詳細は、 http://d.hatena.ne.jp/kaorun/20110323/1300874396
  41. 41. generic.xamlのお約束• 以下の記述はできません – イベントハンドラ指定 – トリガー – ようするにXAMLからコードが呼ばれるよう な動作は不可• コードビハインド側からxaml要素を拾っ てイベントなどを引っかけるイメージで 実装• Parts&Stateモデルによる実装
  42. 42. generic.xaml の書き方<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" xmlns:my="clr-namespace:WindowsPhoneApplication1"> <ControlTemplate x:Key="PhoneDisabledTextBoxTemplate" TargetType="TextBoxmy:WatermarkTextBox"> … </ControlTemplate> <Style x:Key="WatermarkTextBox" TargetType="TextBoxmy:WatermarkTextBox"> … <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="TextBoxmy:WatermarkTextBox">…
  43. 43. generic.xamlを参照するクラスnamespace WindowsPhoneApplication1{ public class WatermarkTextBox : TextBox { private Grid textboxRoot; private TextBlock textWatermark; public WatermarkTextBox() { DefaultStyleKey = typeof(WatermarkTextBox); } public override void OnApplyTemplate() { base.OnApplyTemplate(); this.textboxRoot = GetTemplateChild("textboxRoot") as Grid; if (this.textboxRoot != null) this.textWatermark = textboxRoot.FindName("textWatermark") as TextBlock; } }}
  44. 44. 細かいキーポイント• まずはPanoramaプロジェクトを作成して ソースをじっくり読もう – ViewModelの使い方 – なにがどこにあるのか、など• レイゕウトがわけわからなくなったら Borderデバッグ – とりあえず<Border>で入れ子にしてみる• GPUが使われるコントロールとSoftwareレ ンダリングのコントロールがある
  45. 45. 基本的なコネタ• ページ遷移は NavigationService.Navigate() NavigationService.GoBack()• データの永続化は IsolatedStorageSettings.ApplicationSettings[]• 一時的なデータ保存は PhoneApplicationPage.State[]• とりあえずメッセージ MessageBox.Show()• とりあえずコンソール出力 Debug.WriteLine()
  46. 46. その他資料
  47. 47. まずはここ• MSDN - Windows Phone Development http://msdn.microsoft.com/en-us/library/ff402535• Windows Phone 開発者向け技術情報 http://msdn.microsoft.com/ja-jp/windowsphone/ff191182
  48. 48. なにかわからない時は• USのApp Hub Forumで聞くといいよ! – 殆どの質問は偉い人が即答 – 既出ならリンクを張ってくれる – 中の人が答えてくれる場合も – 既存の質問をいろいろ見て書き方の参考にすると いいんじゃないかな• 日本語のフォーラムもできたよ! – App Hub 日本語フォーラム http://forums.create.msdn.com/forums/default.aspx?GroupID=16 – Windows Phone フォーラム http://social.msdn.microsoft.com/Forums/ja-JP/category/windowsphone
  49. 49. WP7らしい動きをつけたいときには• Silverlight Toolkitのソースを読む http://silverlight.codeplex.com/SourceControl/list/chang esets• 7Metroのソースを読む http://silverzine.com/resources/7metro-silverlight- theme/ デスクトップSilverlight用だけど色々と動かし方が勉強 になる

×