Windows 8 ストアアプリ開発 Tips

VSUG DAY 2012 Winter （2012.12.15）

Windows 8 ストアアプリ
開発 Tips
小島富治雄

自己紹介
• 小島富治雄
• @Fujiwo
• 福井コンピュータアーキテクト株式会社
• Microsoft MVP C# (2005-2013)

VSUG DAY 2012 Winter 2012.12.15 2

アジェンダ
1. Windows 2. Bing Map を 3. カメラを 4. ViewModel
ストア使ってみよう使ってみよう
アプリとは

5. 単体テスト 6. ポータブル 7. Windows ス 8. お役立ち
ライブラリトアへの提出サイト

VSUG DAY 2012 Winter 2012.12.15

本日の資料
• http://www.slideshare.net/Fujiwo/windo
ws-8-15634919
• http://slidesha.re/W3SrsK


1. Windows ストアアプリとは


Windows ストアアプリ


Windows 8

二本立て!
• Windows ストアアプリ
• デスクトップアプリ


Windows 8 のアプリ
デスクトップアプリ Windows ストアアプリ

Windows 8 • 従来通り • 全画面
x86/x64 Win32 API • 新 API “WinRT”
• .NET • C#/VB+XAML
• Silverlight • JavaScript+HTML5
• ほとんどそのまま動作 • C++ + XAMLで
ネイティブアプリも可
• Windows Store で配布 (原則)
Windows RT × • 審査あり
ARM


マイクロソフトスタイル


Windows ストアアプリの特徴
タッチ & マウス/キーボード
基本フルスクリーン
カスケードウィンドウじゃない
タイトルバー、従来のメニューがない
横長
横スクロール

新たな GUI への対応
ライブタイル
バッチ
チャーム
アプリバー
トースト通知
セマンティックズーム

WinRT


WinRT とは何か?
Win32 API とは別の
Windows RunTime
Win32 API を置き換える
マイクロソフトスタイルアプリ
(≒Windows ストアアプリ) 用

WinRT とは何か?

COM ベースの API
.NET ではない
Win32 API よりはオブジェクト指向
C++ で書かれている


Windows ストアアプリ開発
C#/VB + C++ + JavaScript
XAML XAML + HTML

CLR ネイティブ Chakra

WinRT

言語プロジェクション
C++
(ネイティブ) WinRT
(COMベース
C#/VB CLR ネイティブ)
(マネージ)

JavaScript Chakra WinMD
Windows MetaData
VSUG DAY 2012 Winter 2012.12.15(型情報)

C#/VB では
• WinRT が使える
• WinRT 仕様のクラスライブラリも
• .NET が使える
• .NET for Windows Store apps
• .NET for Windows Store apps を使ったクラ
スライブラリも
• ポータブルクラスライブラリ (後述) も

WinRT では多くの API が非同期に
• 非同期呼び出しだらけ
• タブレット等のデバイスで有効
• 50ms 以上掛かる可能性がある API は非同期版のみ
• 非同期呼び出し?
• APIの機能リクエストと結果受け取りが別

※ これまでのプログラミング方法では複雑なコードに
→ async/await が有効
var client = new SyndicationClient();
var feed = await client.RetrieveFeedAsync(new Uri(feedUri));

開発の例


私の開発環境
Logicool Wireless Rechargeable Touchpad t650


私の開発環境


2. Bing Map を使ってみよう


Bing Maps SDK for Windows Store apps
http://visualstudiogallery.msdn.microsoft.com/bb764f67-6b2c-4e14-b2d3-
17477ae1eaca


Bing Maps SDK for Windows Store apps

既存のアプリに NuGet で入れることも出来る


Bing Maps Account Center
http://www.bingmapsportal.com


Bing Maps Account Center


Bing Maps Application


Bing Map アプリの構成


Bing Map アプリの Package.appxmanifest


Bing Map アプリ - XAML
<Page
x:Class="ShoPhotoInfo.MainPage"
IsTabStop="false"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ShoPhotoInfo"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:bm="using:Bing.Maps">
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

<bm:Map x:Name="map" Credentials=“自分の Bing Maps Key"
ZoomLevel="16" />
</Grid>
</Page>


Bing Map アプリ - C#
public sealed partial class MainPage : Page
{
protected async override void OnNavigatedTo(NavigationEventArgs e)
{
map.Center = await GetCurrentLocation();
}


Bing Map アプリ - C# 続き
static async Task<Geoposition> GetCurrentPosition()
{
var geolocator = new Geolocator();
geolocator.DesiredAccuracy = PositionAccuracy.High;
return await geolocator.GetGeopositionAsync();
}

static async Task<Location> GetCurrentLocation()
{
var currentPosition = await GetCurrentPosition();
return new Location { Latitude = currentPosition.Coordinate.Latitude,
Longitude = currentPosition.Coordinate.Longitude };
}


DEMO


3. カメラを使ってみよう


カメラアプリの Package.appxmanifest


カメラアプリ - XAML
<Page
x:Class="ShoPhotoInfo.MainPage"
IsTabStop="false"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ShoPhotoInfo"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:bm="using:Bing.Maps">
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

<Image x:Name="image" />
</Grid>
</Page>


写真撮影 - C#
public static async Task<StorageFile> TakePhoto()
{
var capture = new CameraCaptureUI();
var file = await capture.CaptureFileAsync(CameraCaptureUIMode.Photo);
return file;
}


写真の表示 - C#
public static async Task<WriteableBitmap> CreateBitmapAsync(StorageFile file) {
var pixelSize = default(Size);
var bytes = default(byte[]);
using (var stream = await file.OpenReadAsync()) {
var decoder = await BitmapDecoder.CreateAsync(stream);
pixelSize = new Size { Width = decoder.PixelWidth, Height = decoder.PixelHeight };
var pixelData = await decoder.GetPixelDataAsync();
bytes = pixelData.DetachPixelData();
}
var bitmap = new WriteableBitmap((int)pixelSize.Width, (int)pixelSize.Height);
using (var pixelStream = bitmap.PixelBuffer.AsStream()) {
await pixelStream.WriteAsync(bytes, 0, bytes.Length);
}
return bitmap; 要 using System.Runtime.InteropServices.WindowsRuntime;
} VSUG DAY 2012 Winter 2012.12.15

写真の表示 - C#
async Task SetImageSource(StorageFile file)
{
var bitmap = await CreateBitmapAsync(file);
image.Source = bitmap;
}


写真のファイルオープン - C#
public static async Task<StorageFile> GetStorageFileAsync()
{
var picker = new FileOpenPicker();
picker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
picker.ViewMode = PickerViewMode.Thumbnail;

picker.FileTypeFilter.Add(".jpg");
picker.FileTypeFilter.Add(".jpeg");
picker.FileTypeFilter.Add(".png");
picker.FileTypeFilter.Add(".bmp");

return await picker.PickSingleFileAsync();
}

写真のファイル保存 - C#
public static async Task SavePhoto(WriteableBitmap bitmap, string fileName)
{
var picker = new FileSavePicker();
picker.FileTypeChoices.Add("JPEGファイル", new List<string> { ".jpg", ".jpeg" });
picker.DefaultFileExtension = ".jpg";
picker.SuggestedFileName = fileName;
picker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
var file = await picker.PickSaveFileAsync();
if (file != null)
await bitmap.WriteAsync(file);
}


写真のプロパティ(Exif) - C#
public static async Task<ImageProperties>
GetImagePropertiesAsync(StorageFile file)
{
var imageProperties = await
file.Properties.GetImagePropertiesAsync();
return imageProperties;
}


4. ViewModel


ViewModel のサンプル

C#
XAML


コードビハインド - XAML

<Grid>
<TextBox x:Name=“titleTextBox“
LostFocus="titleTextBox_LostFocus" />
<TextBlock x:Name=“bookTextBlock" />
<Button x:Name="addButton" Content="追加" />
</Grid>


コードビハインド – C#
public class Book
{
string title = string.Empty;

public string Title { get { return title; } set { title = value; } }

public bool IsValid {
get { return !string.IsNullOrWhiteSpace(Title) && Price >= 0; }
}

public override string ToString() { return Title; }
}

コードビハインド – C#
public sealed partial class BookPage : Page
{
Book book = new Book();

public BookPage()
{
InitializeComponent();
titleTextBox.Text = book.Title;
bookTextBlock.Text = book.ToString();
}

void titleTextBox_LostFocus(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
book.Title = titleTextBox.Text;
titleTextBox.Text = book.Title;
bookTextBlock.Text = book.ToString();
addButton.IsEnabled = book.IsValid;
}
}

ViewModel – C#
public class Book : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;

public string Title {
get { return title; }
set {
if (value != title) {
title = value;
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs("Title"));
}
}
}

public bool IsValid { get { return !string.IsNullOrWhiteSpace(Title) && Price >= 0; } }
public AddBookCommand AddBook { get { return new AddBookCommand(this); }}
} VSUG DAY 2012 Winter 2012.12.15

ViewModel – C#
public class AddBookCommand : ICommand
{
public event EventHandler CanExecuteChanged;

readonly Book book;

public AddBookCommand(Book book)
{
this.book = book;
book.PropertyChanged += delegate {
if (CanExecuteChanged != null)
CanExecuteChanged(this, EventArgs.Empty);
};
}

public bool CanExecute(object parameter)
{
return book.IsValid;
}
} VSUG DAY 2012 Winter 2012.12.15

ViewModel - XAML
<Page.Resources>
<viewModel:Book x:Key="book" />
</Page.Resources>

<Grid DataContext="{Binding Source={StaticResource book}}" >
<TextBox Text="{Binding Path=Title, Mode=TwoWay}" />
<TextBlock Text="{Binding}" />
<Button Content="追加" Command="{Binding Path=AddBook}"
CommandParameter="{Binding}" />
</Grid>


ViewModel その2 – C#
public class ViewModelBase : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;

protected void RaisePropertyChanged<PropertyType>(
Expression<Func<PropertyType>> propertyExpression)
{
var propertyName = ((MemberExpression)propertyExpression.Body).Member.Name;
RaisePropertyChanged(propertyName);
}

void RaisePropertyChanged(string propertyName)
{
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}

ViewModel その2 – C#
public class Book : ViewModelBase
{
// public event PropertyChangedEventHandler PropertyChanged;

public string Title {
get { return title; }
set {
if (value != title) {
title = value;
//if (PropertyChanged != null)
// PropertyChanged(this, new PropertyChangedEventArgs("Title"));
RaisePropertyChanged(() => Title);
}
}
}
public bool IsValid { get { return !string.IsNullOrWhiteSpace(Title) && Price >= 0; } }
public AddBookCommand AddBook { get { return new AddBookCommand(this); }}
} VSUG DAY 2012 Winter 2012.12.15

5. 単体テスト


単体テストライブラリ


単体テスト
[TestClass]
public class UnitTest1
{
Book book;
AddBookCommand addCommand;

[TestInitialize]
public void Setup()
{
book = new Book();
addCommand = new AddBookCommand(book);
}


単体テスト
[TestMethod]
public void AddCommandのCanExecuteが変化するか() {
Assert.IsFalse(addCommand.CanExecute(null));

book.Title = "Windows 8 入門";
book.Price = 2980;
Assert.IsTrue(addCommand.CanExecute(null));

book.Title = "";
book.Price = 1000;

book.Title = "WinRT 入門";
book.Price = -1;
}
}

6. ポータブルライブラリ


XAML ファミリー
XAMLファミリーでコードを共通化できないか?
• Windows Store アプリ
• Windows Phone アプリ
• Silverlight アプリ
• WPF アプリ


WPF と Silverlight の .NET


Phone と Store の .NET


ポータブルライブラリ


ポータブルライブラリ
class Super { }
class Sub : Super
{
public int Number { get; set; }
public string Name { get; set; }
}

class Program
{
static void Main()
{
var sub = new Sub();

bool result1 = typeof(Sub).IsSubclassOf(typeof(Super));
bool result2 = sub.GetType().IsSubclassOf(typeof(Super));
bool result3 = sub.GetType().IsAssignableFrom(typeof(Super));
bool result4 = sub is Super;

var properties1 = typeof(Sub).GetProperties();
}
}

7. Windows ストアへの提出


Windows ストアアプリデベロッパーセンター

• http://msdn.microsoft.com/ja-JP/windows/apps
• https://appdev.microsoft.com/StorePortals/


Windows ストアアプリデベロッパーセンター


アプリ名の予約


Windows ストアアプリ登録の手引き
Windows 8 アプリ開発体験テンプレート
http://msdn.microsoft.com/ja-jp/jj556277

参考資料
Windows ストアアプリ登録の手引き
本自習書では、Microsoft アカウントの取得から Windows ストアアプリの審査登録までの手順を紹介し
ます。
Windows ストアアプリ開発のためのポイント
より効率的にアプリのストア登録をしていただくためのヒントをまとめました。是非ご参照ください。
アイコン作成用テンプレート
ストア申請のために必要となるサイズのアイコンを、より簡単につくっていただくためのテンプレートを
ご用意しました。


リジェクトの理由と対策


リジェクト理由
2012/09/24

お客様のアプリは、要件 4.1 を満たしていません。
審査担当者からのコメント:
There is no privacy policy in metadata regarding internet
connection.
No privacy policy in Settings Charm


対処: プライバシーポリシー
プライバシーポリシー
はじめに
Sho's Software (以下「本サービス」) は、本サービスを利用する全ての方 (以下「利用者」といいます) のプライバシーを尊重するために、利用者の個人情報を以下の定義に従い、個人情報の適切な取り扱いに取り組んでまいります。
■個人情報の定義
個人情報とは、本サービスを通じて利用者から取得する氏名、年齢、メールアドレス、その他の利用者個人を特定できる情報のことを指します。収集する個人情報は、利用者から本サービスにてご登録いただく情報に限られます。
■個人情報の利用目的について
本サービスは、利用者の個人情報を以下の目的で利用することができるものとします。
本サービスならびにその他本サービスに関連する情報の提供のため
利用者の本人確認のため
本サービスの運営上必要な事項の通知 (電子メールによるものを含むものとします)
本サービス上で、個人を特定できない範囲においての統計情報の作成および利用
本サービスの新規開発に必要なデータの解析や分析 •契約や法律等に基づく権利の行使や義務の履行
アフターサービス、各種問い合わせ対応のため •利用規約に反する態様でのご利用を防止するため
■統計データの利用
当社は、ユーザーの個人情報をもとに、個人を識別できないように加工した統計データを作成することがあります。個人を識別できない統計データについては、個人情報には当たらず、当社は何ら制限なく利用することができるものとします
。
■個人情報の共有ならびに利用制限について
本サービスは、以下に定める場合を除いて、事前に利用者本人の同意を得ず、利用目的の達成に必要な範囲を超えて個人情報を利用または共有することはありません。
法令により認められた場合
利用者の皆様の同意があった場合
人の生命、身体または財産の保護のために必要があり、さらに利用者の同意を得るのが困難な場合
裁判所、検察庁、警察、税務署、弁護士会またはこれらに準じた権限を持つ機関から、個人情報の開示を求められた場合
合併、営業譲渡その他の事由による事業の承継の際に、事業を承継する者に対して開示する場合
■個人情報の安全管理について
本サービスでは、個人情報の漏洩または毀損の防止ならびにその他個人情報の安全管理が行われるよう、個人情報の適切な監督を行います。本サービスでは、業務遂行に必要な範囲内で、権限を与えられた者のみが個人情報を取り扱います
。個人情報の取扱いを外部に委託する場合には、機密保持契約を締結のうえ委託先を監督します。
■個人情報の開示、訂正、削除について
本サービスは、個人情報保護法その他の法令等に基づき、個人情報の開示、訂正、追加、削除、利用停止、消去、第三者提供の停止、利用目的の通知の請求に対応いたします。請求が本人確認不可能な場合や、個人情報保護法の定める要件
を満たさない場合、ご希望に添えない場合があります。なお、アクセスログなどの個人情報以外の情報については、原則として開示等はいたしません。
■プライバシーポリシーの更新について
本サービスは、個人情報保護を図るため、法令等の変更や必要に応じて、本プライバシーポリシーを改訂することがあります。その際は、最新のプライバシーポリシーを本サービスに掲載いたします。本ページを都度ご確認の上、本サービ
スのプライバシーポリシーをご理解いただくようお願いします。
■プライバシーポリシーに関するお問い合わせ
本サービスのプライバシーポリシーに関するお問い合わせは、下記までご連絡お願い致します。


2012/09/27


アプリがこの要件を満たしていないと見なされる一般的な理
由は、アプリの主要なシナリオの 1 つに該当する部分を完
了するために、ユーザーが Web ブラウザーにリダイレクト
されることです。


対処: …
• Windows 8 アプリ開発体験テンプレート
「NewsReader テンプレート XAML/C# 用」
で作ったアプリから、
「Web ブラウザーで開く」機能を削除


2012/09/25



対処: プライバシーポリシー
Privacy Policy
Sho's Software takes the privacy of its users very respectfully. We also comply fully with the Act on the
Protection of Personal Information.
Sho's Software does not collect personally identifiable information (e.g., name, address, telephone
number, e-mail address) unless you provide it to us.


対処: Package.appxmanifest


2012/09/25

アプリがこの要件を満たしていないと見なされる一般的な理由:
アプリが、1 つ以上の認定言語をサポートしていない。
提出時に指定された言語の一部ではアプリが動作するが、すべての言語では動作
しない。
アプリの [説明] ページに記載されている情報 (説明、機能、スクリーンショット
など) が、アプリのローカライズ量を反映していない。


対処: Package.appxmanifest
<Resources>
<Resource Language="x-generate" />
</Resources>

対処:
<Resources>
<Resource Language=“en" />
</Resources>


2012/09/25

アプリがこの要件を満たしていないと見なされる一般的な理由は、1 つ以上のス
クリーンショットに、実際より良く見えるようなグラフィック処理が施されてい
ることです。

対処:
審査担当者へのコメント
Background image will be choosen from 6 images randomly.


2012/10/04
審査担当者からのコメント:
You should add more detail to your app description, it read too generic or vague
to adequately represent the app's unique value.

対処:

「説明」をより詳細に


2012/09/28

お客様のアプリは、要件 2.3 を満たしていません。詳細情報
アプリがこの要件を満たしていないと見なされる一般的な理由は、アプリタイ
ル、アプリバー、設定チャーム ([バージョン情報] リンクを含む) が、プロモー
ション資料に使用されていることです。

対処:

アプリの中の “Die Hard” を別の表現に変更。


Windows 8 Clinic
• http://msdn.microsoft.com/ja-jp/jj820154


8. お役立ちサイト


参考資料: 開発を始めるとき
• デベロッパーセンター - Windows ストアアプリ
http://msdn.microsoft.com/ja-JP/windows/apps
Windows ストアアプリ開発は先ずここから
• Windows ストアアプリプログラミングの開発者向けダウンロード - デベロッパーセンター -
http://msdn.microsoft.com/ja-jp/windows/apps/br229516.aspx
• Windows 8 アプリ開発体験テンプレート
• Windows アプリアートギャラリー - アプリに組み込めるイメージ素材集
http://msdn.microsoft.com/ja-jp/windowsphone/hh544699
• Developer Camp 2012 Japan Fall - Channel 9
http://channel9.msdn.com/Events/Windows-Azure-DevCamps/Developer-Camp-2012-Japan-Fall
動画と資料
• Windows Store app samples - デベロッパーセンター - Windows ストアアプリ
http://code.msdn.microsoft.com/windowsapps/
• MSDN マガジン Windows 8 Special Issue 2012
http://msdn.microsoft.com/ja-jp/magazine/jj660298.aspx

参考資料: ブログ
• Windowsストアアプリ - 田中達彦のブログ - MSDN Blogs
http://blogs.msdn.com/b/ttanaka/archive/tags/windows_b930c830a230a230d730ea30_/
• windows - Akira Onishi's weblog - MSDN Blogs
http://blogs.msdn.com/b/aonishi/archive/tags/windows/
• WinRT - 荒井省三のBlog - MSDN Blogs
http://blogs.msdn.com/b/shozoa/archive/tags/winrt/
• Windows Store 開発者向けブログ - MSDN Blogs
http://blogs.msdn.com/b/windowsstore_ja/
• Windows8 - 眠るシーラカンスと水底のプログラマー
http://coelacanth.heteml.jp/blog/category/windows8/
• プログラミング ( Metro スタイル ) - biac のそれさえもおそらくは幸せな日々@nifty
http://bluewatersoft.cocolog-nifty.com/blog/metro/
• [WinRT] - かずきのBlog@Hatena
http://d.hatena.ne.jp/okazuki/searchdiary?word=%2A%5BWinRT%5D


参考資料: 連載記事
• 速習 Windowsストアアプリケーション - CodeZine
http://codezine.jp/article/corner/471
• WinRT/Metro TIPS - Insider.NET - @IT
http://www.atmarkit.co.jp/ait/subtop/features/da/ap_winrttips_index.html
• Windows 8 APIの基礎 - ITpro
http://itpro.nikkeibp.co.jp/article/COLUMN/20121206/442473/


参考資料: ポータブルライブラリ
• [Windows Store アプリ][XAML] Windows Store アプリと Windows Phone アプリ、
Silverlight アプリ、WPF アプリでソースコードを共通化する方法に関する記事
http://blog.shos.info/archives/2012/11/windows_store_windows_phone_si.html
• Windowsストアアプリで利用できるライブラリの種類 - もりひろゆきの日々是勉強
http://moriblog.kit-
eng.com/2012/12/08/windows%E3%82%B9%E3%83%88%E3%82%A2%E3%82%A2%E3%83
%97%E3%83%AA%E3%81%A7%E5%88%A9%E7%94%A8%E3%81%A7%E3%81%8D%E3%82
%8B%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%81%AE%E7%A8
%AE%E9%A1%9E/
• Win8ストア・アプリ WP8アプリ、両面撃破作戦 - slideshare
http://www.slideshare.net/yasuhikoy/2520121201-win8-wp8


参考資料: 単体テスト、ViewModel、その他
• Metroアプリをテストファーストするときのポイント - slideshare
http://www.slideshare.net/yasuhikoy/2520121201-tdd13
• Windows 8 で MVVM パターンを使用する (機械翻訳) - MSDN マガジン
http://msdn.microsoft.com/ja-jp/magazine/jj651572.aspx
MVVM Light Toolkit http://mvvmlight.codeplex.com を使ったサンプル。
• WinRT/Metro TIPS:多言語化対応を楽に行うには?[Win 8] - @IT
http://www.atmarkit.co.jp/ait/articles/1211/08/news025.html
• WinRT/Metro TIPS:文字列を多言語化対応するには?[Win 8] - @IT
• WinRT/Metro TIPS:文字列リソースを使うには?[Win 8] - @IT
固定文字列を、多言語化対応などのために、文字列リソースとして別のファイルに分けて
おく方法


Windows 8 ストアアプリ開発 Tips

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Windows 8 ストアアプリ開発 Tips

Similar to Windows 8 ストアアプリ開発 Tips (20)

More from Fujio Kojima

More from Fujio Kojima (20)

Recently uploaded

Recently uploaded (7)