Windows Phone 7 ゕプリ

実際に開発してみてわかったいろいろ

@kaorun

2011/04/16

こんな人

• Name: Nakajima Kaoru

• Twitter: @kaorun

• Hatena: id:kaorun

• サイボウズ・ラボ所属

– Software Design Engineer

–主にMS担当係

*1 iPhone, Androidの開発をしたことは無い

WP7日本語入力ゕプリ

Utakata Japanese TextPad 絶賛公開中

主な機能: • アプリ内でフリック入力 • SocialIME/Google CGI APIでかな漢字変換 • メール・SMS送信、検索、Twitterでツイート • MS-Plライセンスでリポジトリ公開中

https://bitbucket.org/kaorun/utakata

さて本日は

Windows Phone 7ゕプリの開発

について

あしからず #1

• 以下の内容は含まれません (たぶんきっと)

– 開発環境の作り方

– App Hubの登録とか

– Silverlightってなんだ?

– VSやBlendでコードとデザインの分離

– DataBindingの理解は必須だよね

– MVVM, Rxでカッコイイコードの書き方

– 他のプラットフォームと比較して云々

– XNAとか

「Microsoftさんのイベントやカンフゔレンスに行くといいよ」

あしからず #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をぬるぬる生成するぜ

–テンプレート編集でコントロールのスタイルをいじりまくり

–なんでもボタンやコントロールに

– StoryboardやViewStateで華麗にゕニメーションをキメろ

個人的なBlendとVSの使い分け

Visual Studio

Expression Blend

VS vs Blend

用法・用量を守って正しくお使いください

• 以下の方々にはお勧めしません (今のところ)

– Visual Studio、IDEにゕレルギーのある方

– emacsをこよなく愛する人

– vimでないと体が動かない人

– eclipse workerは医師にご相談ください

まずはXAMLを覚えてもらおうか

• HTMLみたいなもんですよ。

• ひな形はVisual Studioが生成してくれる

• IntelliSenseでカタカタやってればすぐ覚えるよ – HTMLより単純で高度

– がんばろうDataBinding

• Blendでいろいろ弄り回して出力されたXAMLを読んでみる – Blendの使い方はとにかく動画で見る

– FlashやIllustratorで作ったドロー要素が全部XMLで出力されるような感じ

Silverlightの基本原則とセオリー

• XAMLで書けるモノはコード(C#)でも書ける

• コードで書かれてることも結構XAMLでも書ける – 「えっ、そこまでXAMLでできちゃうの?」

• ロジックの実装はできるだけViewModelに分離する(MVVM)

• ViewModelでDependency Propertyを実装してXAMLでDataBindingする

• ただし、速度と美しさは必ずしも両立しない!?

WP7ゕプリ開発のいろいろ

• なんとなく見目のいいモノはわりとすぐできる

• WP7っぽさを出すのが案外タイヘン –標準のフレームワークがまだショボイのでいろいろライブラリが必用なのが現状

• 今のところ入門以外のドキュメントはほぼ英語

• デスクトップ版SilverlightやWPFのノウハウはだいたい使える

Expression Blend英語版をおすすめする理由

• Silverlight開発はXAMLオブジェクトをどう扱うか

• XAMLのElement, AttributeとBlendの機能名が一対一対応

• 英語が嫌いでもオブジェクト名が英語なんだからしょうがない

• ビジュゕルなツールなのでコマンド・メニュー名とかより何がどこにあるか覚えちゃえばOk

• プロダクトキーは各言語共通じゃないかな…

教科書(?)通りのやり方

• VSでプロジェクト作成

• 基本的な実装

• Blendで編集・味付け

• コードビハインドの実装

• …

何が起きるか

• XAMLフゔイルの巨大化

• 可読性が極めて悪い

• 再利用性の低下

• コードビハインドもぐしゃぐしゃに…

ページの実装

スタイルとかなんとか

対策案

• スタイルをリソース化して分離

• UserControl化して分離

• カスタムコントロール化

スタイルをリソース化

• Blendでテンプレート編集

• リソースを別フゔイルに

– app.xamlに組み込む

–リソースフゔイルを分離・参照

–複数のリソースフゔイルを参照

Demo

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>

アプリ全域で使えるスタイル化

ResourceDictionaryを参照

<Application …>

<!--Application Resources-->

<Application.Resources>

<ResourceDictionary Source="/Styles.xaml">

</Application.Resources>

…

</Application>

スタイル定義をリソースファイルに分離

複数のResourceDictionaryを参照

<Application …> <!--Application Resources--> <Application.Resources > <ResourceDictionary > <ResourceDictionary.MergedDictionaries > <ResourceDictionary Source ="Styles.xaml"/> <ResourceDictionary Source ="Styles2.xaml"/> </ResourceDictionary.MergedDictionaries > </ResourceDictionary > </Application.Resources > … </Application>

でも…

それUserControlで

• [追加]/[新しい項目]

[Windows Phone User Control] するだけ

• カンタン!

UserControlにすると

• そのコントロールの中だけで終始

• 使い回しが効かない

• なんとなくゴチャゴチャした実装になりがち

• 親ページと干渉することがある希ガス

こういう時にUserControlを使うといい

• HTMLでいうところのiframe感覚

• 枠の中でいろいろした奴を使いまわしたり

• ある程度まとまった実装として固めたいとき

カスタムコントロールって?

• WPFにはテンプレートがあるのだが…

• ようするにControl継承クラス

• やりたいことはコードで書け

• 原則としてコードだけで実装

public class HogeControl : Control { }

そんなの面倒でやってられません

XAML使えないの?

それgeneric.xamlで

• /Themes/generic.xaml というフゔイルを作る

• 勝手に読み込まれる

• 既存コントロールの派生クラスでテンプレートとしてスタイルを読み込み

• ButtonとかTextBoxとか派生したカッコイイ

コントロールをxamlとコードで作っちゃう

• 詳細は、 http://d.hatena.ne.jp/kaorun/20110323/1300874396

generic.xamlのお約束

• 以下の記述はできません

–イベントハンドラ指定

–トリガー

–ようするにXAMLからコードが呼ばれるような動作は不可

• コードビハインド側からxaml要素を拾ってイベントなどを引っかけるイメージで実装

• Parts&Stateモデルによる実装

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">

…

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; } } }

細かいキーポイント

• まずはPanoramaプロジェクトを作成してソースをじっくり読もう

– ViewModelの使い方

–なにがどこにあるのか、など

• レイゕウトがわけわからなくなったらBorderデバッグ

–とりあえず<Border>で入れ子にしてみる

• GPUが使われるコントロールとSoftwareレンダリングのコントロールがある

基本的なコネタ

• ページ遷移は NavigationService.Navigate() NavigationService.GoBack()

• データの永続化は IsolatedStorageSettings.ApplicationSettings[]

• 一時的なデータ保存は PhoneApplicationPage.State[]

• とりあえずメッセージ MessageBox.Show()

• とりあえずコンソール出力 Debug.WriteLine()

その他資料

まずはここ

• MSDN - Windows Phone Development http://msdn.microsoft.com/en-us/library/ff402535

• Windows Phone 開発者向け技術情報

http://msdn.microsoft.com/ja-jp/windowsphone/ff191182

なにかわからない時は

• 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

WP7らしい動きをつけたいときには

• Silverlight Toolkitのソースを読む http://silverlight.codeplex.com/SourceControl/list/chang

esets

• 7Metroのソースを読む http://silverzine.com/resources/7metro-silverlight-

theme/ デスクトップSilverlight用だけど色々と動かし方が勉強になる