Windows Phone 8.1 アプリケーション開発セミナー

Windows Phone 8.1 アプリ開発徹底解説

高橋 忍

マイクロソフト株式会社デベロッパー エクスペリエンス & エバンジェリズム統括本部

エバンジェリスト

セッションの目的Windows Phone 8.1 のアプリを開発するための必要な知識を身につけるセッションの目的Windows Phone 8.1 のアプリ開発の流れがわかるWindows Phone 8.1 のアプリを開発し公開することができる

セッションの目的とゴール

Windows Phone アプリの開発 UI デザインの基礎 コントロール コントロールの拡張 データと UI の連携

タイルと通知とバックグラウンド アプリの公開 Universal Application

Agenda

Windows Phone アプリの開発

App Model APIs

アプリケーションモデルUser Interface Tools Store

HTML / CSS

JavaScript

Windows Runtime

C# / VB

Windows Kernel Services

C / C++

XAML DirectX

Windows 8.1

開発環境は Visual Studio 2013 のみVisual Studio 2013 Update 2

Hyper-V

開発用端末登録

Application Deployment

ツール -Windows Phone 8.1- 開発者用パワーツール

Windows Phone Development Power Tools

アップデート 機能拡張 サンプル 追加ツール

Visual Studio 拡張機能

Visual Studio/Expression Blend 既存のスキル最大活用

Visual Studio 2010 Expression Blend C# および VB Silverlight

高機能な開発環境 エミュレータ Silverlight SDK XNA Game Studio コードサンプル

9

UI デザインの基礎

10

UI の構成要素Windows Phone の UI部品の分類

ページ プリミティブ：基本図形 コントロール

パネルコントロール：配置のための要素 パネルコントロールに近いコントロール UI エレメントベースのコントロール

11

レイアウト要素パネルコントロールを理解する

Silverlight エレメントの基本 エレメントは階層で定義、子要素は持てない

パネルコントロール 複数のエレメントを子要素として保持の ( 画面上での ) 配置を管理論理的なグループ化としての利用

12

塗りつぶし（ Fill) 無し・単色・グラデーション・テクスチャ

境界線 太さ・塗りつぶし・ダッシュ

表示効果 Opacity / Visibility / Effect

プロパティから始めよう

13

崩してみよう 2D 変形

移動・回転・拡大縮小・シアー・反転 3D 変形

X 軸・ Y 軸・ Z 軸を中心に回転 スクリーン座標とオブジェクト座標

14

アニメーション タイムラインベース

数値パラメータが対象 Storyboard オブジェクト イージング

アニメーションの加減速 Storyboard.begin()/Stop() 関数

15

ビヘイビア オブジェクトにアクションを追加 デフォルトで 13 種のビヘイビアが用意 SDK を使ってカスタムビヘイビアー開発

Behavior<T> クラス Microsoft Expression Community Gallery

16

http://gallery.expression.microsoft.com/en-us/

コントロール

17

Application Bar と System Tray

System Tray バッテリー、時刻等を表示 PhoneApplicationPage で ON/OFF

Application Bar ApplicationBarButton ApplicationBarMenu Blend ならアイコンを準備

18

メディアとサウンド MediaElement

動画再生 音楽再生 コントローラーはなし

19

Web Brower / Map コントロール ブラウザ

URL を指定 Zoom Link

Map 緯度経度を指定 Zoom

20

Pivot と Panorama ストレスのないページ間移動を実現 画面サイズの小ささをカバー

複数画面をまとめて管理 横スライドで画面切替 画面はループで連結

21

PivotコントロールPivot コントロールの使い方

ページ数に制限はないが推奨は７頁以下 １つのデータをページごとに見せ方を変える使い方

同一種のデータを表示（メール等） 表示形式を変えて表示（カレンダー）

機能を区切って表示（設定など）

22

PanoramaコントロールPanoramaコントロールの使い方

２ページにまたがるデータを表示できる 複数の Panorama コントロールを使わない（推奨） Top ページとしての使用が推奨（各ハブ） 壁紙の幅は最大

1024程度が推奨 ApplicationBar は

置かないこと！

23

コントロールの拡張

24

コントロールの拡張 プロパティによる変更を管理

スタイル テンプレート コントロールの UI を完全に変更

コントロール テンプレート 複数の状態のスタイルを定義

ビジュアル ステート マネージャー

25

Metro Metro

Metro

Metro

ビジュアル ステートマネージャー 複数の状態のデザインをまとめて定義 ボタンの場合

通常のステートNormal / Pressed / Disabled

フォーカス ステートUnfocused / Focused

26

データと UI の連携

27

データ バインディング モデル データの表示はデータの管理とは分離 UI とデータ オブジェクト間をデータが移動 ソースとコントロールの連携を定義

28

バインディングエンジン

値コンバーター

Object

プロパティ

FrameworkElement

依存関係プロパティ

テンプレート ビヘイビアー

バインディング ターゲット バインディング ソース

29

2 つのタイプのデータ連携単一データの表示と複数レコードの表示

1:1 のバインド

リストのバインド

Phone Name Value Angle

Phone 7 45

Windows 8 10

XBOX 360 360

Office 365 180

Azure 1 90

Angle

451036018090

サンプルデータ デザインのためのダミーデータを作成

データの型やサイズ ,名称などを設定 ドラッグ＆ドロップでバインド データは追加編集可能

30

C:\Program Files (x86) \Microsoft Expression\Blend 4 \SampleDataResources\en\Data \SampleStrings.csv

タイルと通知とバックグラウンド

Lock Screen

Toast

BackgroundTask

Action Center

Live Tiles

タイルへ提供する情報 カウント（１ ~99 ） テキストコンテンツ 表示する画像（壁紙）

タイルの情報更新頻度 1 回のみ 一定間隔

タイルはアプリへのリンク 特定のアプリページへのリンクも可能

タイルへの情報提供

タイルパターンは 3 種類

Flip

Icon

Cycle

アプリの情報を表示可能 ロック画面の背景 通知領域への文字情報の通知 通知領域へのアイコンとカウントの表示

表示するかどうかはユーザー選択 通知内容はタイルの情報 WMAppManifest.xmlへの記載のみ

Extensions に登録 LockScreen_Notification_IconCount LockScreen_Notification_TextField

ロック画面への情報提供

ローカル通知 タイルの通知もローカル通知の一つ トースト通知 アラーム・リマインダー

プッシュ通知 Windows Notification Service (WNS) Microsoft Push Notification Service (MPNS) ： Silverlight のみ アプリへの情報送信 タイルへの情報送信 トースト通知での表示

通知情報は全て Action Center 登録

通知

アプリの公開

Xap ファイル Silverlight 7/8/8.1 アプリで使用 WMAppManifest.xml で各種設定 パッケージ自体は暗号化されている

APPX パッケージ Windows ストアアプリと同じパッケージ WinRT アプリケーションで使用 Package.appmanifest で各種設定 リソースごとに分割パッケージで保存 保存時に暗号化される

アプリケーションパッケージ

AppX Package

720p

Manifest(s)

1080p

EnglishWVGA

DLLs

Japanese

Chinese

Spanish

ストア アカウントは共通 デベロッパーセンターから申請 アプリの申請

アプリ名 / カテゴリ / 価格 / 配布国 パッケージのアップロード 説明文 / アイコン / スクリーンショット

注意 XAP ファイルの場合の発行者名

Package.appmanifest 内で合わせる アップロードツールは Silverlight Plug-in

アプリの公開

ストアからのダウンロードなしに配布可能なモデル1. パッケージ作成2. エンタープライズトークンを使って署名 ($299/年 )3. 社内などで配布

アプリの配布方法 デバイス管理用サーバー 社内 Web サイト メールでの配布 SD カードに入れての配布

エンタープライズ配布モデル

Universal Application

Windows NT

Direct X

VB/C#

Silverligth

WP7.x WP8

CE Kernel

Windows Phone Application

Windows NT Kernel

C++ DirectX Application (C++)

JavaScript WinRT JS

VB/C# Silverlight 8.1(+WinRT)

WP8.1

VB/C# Silverlight 8.0(+WinPRT)

VB/C#/C++ WinRT XAML

Up

New!

Up

New!

VB/C# XNA

SL8.1 App(+WinRT)

SL8.0(+WinPRT)

WP7.x WP8

CE Kernel

Windows Phone as Universal Application

Windows NT Based Kernel

DirectX Application

WinRT JS

DirectX App

WP8.1

WinRT XAML*

Windows 8.1

WinRT JS

WinRT XAML*

Universal

Universal

Universal

* WinRT XAML Universal Windows Application does note support VB now.

SL7.x

Streamlined end-to-end developmentUser Interface App Model Tools StoreAPIs

You can adapt one design across devicesUser Interface App Model Tools StoreAPIs

You can tailor the design to each deviceUser Interface App Model Tools StoreAPIs

User Interface controlscommon, similar rendering

Button

Slider

ToggleSwitch

ProgressBar

etc (many more)

common, different content

Hub

ListViewGridViewetc.

common, different rendering

DatePicker

TimePickerCommandBarAppBaretc.

unique

SearchBox

PivotContentDialogAutoSuggestBoxetc.

App Model APIs

Develop your app in a way that’s familiarUser Interface Tools Store

HTML / CSS

JavaScript

Windows Runtime

C# / VB

Windows Kernel Services

C / C++

XAML DirectX

Tools

Write and debug your code with easeUser Interface App Model StoreAPIs

You can let customers buy once, use anywhere

Store

Made for Windows Phones and Windows PCs

User Interface App Model ToolsAPIs

Distribute your application on store

StoreUser Interface App Model ToolsAPIs

build

Windows .appx

Windows 8.1

Visual Studio

Upload Publish

Dashboard Store

WindowsDevCenter

WindowsStore

develop

Appproject

Windows 8.1

Visual Studio

WindowsPhone .appx

WindowsPhone

DevCenter

WindowsPhoneStore

Certification

Certification

Create project from …. Universal Application Template

Windows 8.1 project + Windows Phone 8.1 Project

Windows Phone 8.1 ApplicationAdd Windows Project

Windows 8.1 ApplicationAdd Windows Phone Project

Create Universal Application

プロジェクト テンプレート

Windows 8.1 固有のコード

Windows Phone 8.1 固有のコード

共有のコード

プロジェクト テンプレート

Windows 8.1 固有のコード

Windows Phone 8.1 固有のコード

共有のコード

Windows 8.1

アプリ

プロジェクト テンプレート

Windows 8.1 固有のコード

Windows Phone 8.1 固有のコード

共有のコード

Windows Phone 8.1

アプリ

User Interface controlscommon, similar rendering

Button

Slider

ToggleSwitch

ProgressBar

etc (many more)

common, different content

Hub

ListViewGridViewetc.

common, different rendering

DatePicker

TimePickerCommandBarAppBaretc.

unique

SearchBox

PivotContentDialogAutoSuggestBoxetc.

Classes Structs Interfaces

Windows 8.1 SDK 566 119 59

Windows Phone 8.1 SDK

624 131 57

+58 +12 -2

#if - #endif block Shared Project

+ partial classes Portable Class Library +

Platform abstraction

プラットフォーム固有コードの分離方法#if WINDOWS_APP //Windows の時のみコンパイル・実行される処理　　　　　：#elif WINDOWS_PHONE_APP //Windows Phone の時のみコンパイル・実行される処理　　　　　：#endif

Phone アプリ – PFN 12345

roaming Local Temp

Windows アプリ – PFN 12345

roamingLocalTempLocalCache

ローミングによるデータの共有

PFN 12345

ローミング

OneDrive stores up to 100kb of roaming data per app (not included in user quota). If app exceeds the limit, sync stops.

Sync engine transfers data periodically based on triggers (user idle, battery, network, etc.)

Other clients are notified of updated data via Windows Notification Service. If app is running when sync occurs, an event is raised.

PLM とローミング

private void OnSuspending(object sender, SuspendingEventArgs e){ // TODO: Save application state and stop any background activity ApplicationData.Current.RoamingSettings.Values["Hoge"] = model.Hoge; ApplicationData.Current.RoamingSettings.Values["Foo"] = model.Foo;}

// TODO: Load state from previously suspended applicationmodel.Hoge = (bool?)ApplicationData.Current.RoamingSettings.Values["Hoge"] ?? false;model.Foo = (double?)ApplicationData.Current.RoamingSettings.Values["Foo"] ?? 1.0;

まとめ

Windows Phone アプリはWindows アプリ 特別な意識はほとんどいりません

タイルや通知でアプリに付加価値を まずはスタンドアローンから

まずは気軽に作って気軽に公開 アカウントは Windows と共通 審査も数時間で終わります

まとめ

© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.