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

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やら

Pure Silverlight OS
+ XNA

WP7ゕプリの開発とは
• Visual StudioでXAMLとC#をガリガリ書くぜ
– IntelliSense最強伝説
• BlendでXAMLをぬるぬる生成するぜ
– テンプレート編集でコントロールのスタイルを
いじりまくり
– なんでもボタンやコントロールに
– StoryboardやViewStateで華麗にゕニメーション
をキメろ

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

Expression
Blend

Visual Studio

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

• 以下の方々にはお勧めしません
(今のところ)
– 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に組み込む
– リソースフゔイルを分離・参照
– 複数のリソースフゔイルを参照

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>
<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>
<ResourceDictionary Source="/Styles.xaml">
</Application.Resources>
…
</Application>

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

複数のResourceDictionaryを参照
<Application …>
<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
{

}

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

それ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用だけど色々と動かし方が勉強
になる

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

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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Empfohlen

Empfohlen (20)