Download - Windows Phone 8.1 アプリ開発徹底解説
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 コントロールの使い方
ページ数に制限はないが推奨は7頁以下 1つのデータをページごとに見せ方を変える使い方
同一種のデータを表示(メール等) 表示形式を変えて表示(カレンダー)
機能を区切って表示(設定など)
22
PanoramaコントロールPanoramaコントロールの使い方
2ページにまたがるデータを表示できる 複数の 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
タイルへ提供する情報 カウント(1 ~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.