「Windows 8 ストア アプリ開発 tips」 hokuriku.net vol.11 (2013年1月26日)

Windows 8 ストア アプリ開発 Tips

小島 富治雄

Hokuriku.NET vol.11 （ 2013.01.26 ）

自己紹介

• 小島 富治雄• @Fujiwo• 福井コンピュータアーキテクト株式会社

• Microsoft MVP C# (2005-2013)

2

『 Community Open Day 2013 北陸』• ５月 11 日 ( 土 )• 石川高専にて• スピーカー募集中

アジェンダ

3. コントラクト1. Bing Map を使ってみよう

4. Windows ストアへの提出

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

5. お役立ち サイト

• http://www.slideshare.net/Fujiwo/windows-8-tips-hokurikunet-vol11-2013126

• http://slidesha.re/WjZSu5

本日の資料

• C# でプログラムが書ける (y/n)

• “XAML” を「ザムル」と読む

(y/n)

• いや、 「ザメル」と読む派だ

(y/n)

• Windows 8 ストアアプリを作っ

たことがある (y/n)

• 何らかの MVP 受賞経験がある

(y/n)

アンケート :

Windows ストアアプリ開発の例

1. Bing Map を使ってみよう

http://visualstudiogallery.msdn.microsoft.com/bb764f67-6b2c-4e14-b2d3-17477ae1eaca

Bing Maps SDK for Windows Store apps

Bing Maps SDK for Windows Store apps

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

http://www.bingmapsportal.com

Bing Maps Account Center

Bing Maps Account Center

Bing Maps Account Center

DEMO

Bing Maps Application

Bing Map アプリの構成

Bing Map アプリの Package.appxmanifest

<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 アプリ - XAML

public sealed partial class MainPage : Page{ protected async override void OnNavigatedTo(NavigationEventArgs e) { map.Center = await GetCurrentLocationAsync(); }

Bing Map アプリ - C#

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

static async Task<Geoposition> GetCurrentPositionAsync() { var geolocator = new Geolocator(); //geolocator.DesiredAccuracy = PositionAccuracy.High; return await geolocator.GetGeopositionAsync(); }

Bing Map アプリ - C# 続き

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

DEMO

カメラ アプリの Package.appxmanifest

Blend for Visual Studio

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

<Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <bm:Map x:Name="map" Credentials=" 自分の Bing Maps Key" ZoomLevel="16" Grid.ColumnSpan="2" Grid.Column="1" /> <Image x:Name="image"/> </Grid></Page>

カメラ アプリ - XAML

<Page.BottomAppBar> <AppBar> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <StackPanel Orientation="Horizontal"> <Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch“ Style="{StaticResource PhotoAppBarButtonStyle}"/> <Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch“ Style="{StaticResource AddAppBarButtonStyle}"/> </StackPanel> <StackPanel Grid.Column="1" HorizontalAlignment="Right“ Orientation="Horizontal"/> </Grid> </AppBar> </Page.BottomAppBar>

カメラ アプリ – XAML - AppBar

static async Task<StorageFile> TakePhotoAsync(){ var capture = new CameraCaptureUI(); var file = await capture.CaptureFileAsync(CameraCaptureUIMode.Photo); return file;}

写真撮影 - C#

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

写真の表示 - C#

要 using System.Runtime.InteropServices.WindowsRuntime;

async void OnPhotoButtonClick( object sender, RoutedEventArgs e){ image.Source = await CreateBitmapAsync( await TakePhotoAsync() ); }

写真の表示 - C#

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#

static async Task<ImageProperties>GetImagePropertiesAsync(StorageFile file)

{ var imageProperties = await

file.Properties.GetImagePropertiesAsync(); return imageProperties;}

写真のプロパティ (Exif) - C#

async void OnOpenButtonClick( object sender, RoutedEventArgs e){ var file = await GetStorageFileAsync(); image.Source = await CreateBitmapAsync(file); var imageProperties = await GetImagePropertiesAsync(file); map.Center = new Location { Latitude = imageProperties.Latitude.Value, Longitude = imageProperties.Longitude.Value };}

写真のファイル オープン - C#

3. コントラクト

DEMO

3.1. 検索コントラクト

DEMO

public class Book{ public string Title { get; set; } public Uri Url { get; set; }

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

検索コントラクト – C#

public class Model : IEnumerable<Book>{ static readonly Model instance = new Model();

public static IEnumerable<Book> Search(string queryText) // 検索時に呼ばれる { return instance.Where(book => book.Title.Contains(queryText)); }

public IEnumerator<Book> GetEnumerator() { yield return new Book { Title = " 基礎から学ぶ Windows ストアアプリ開発 ", Url = new Uri("http://www.amazon.co.jp/dp/4863541198/") }; yield return new Book { Title = "Windows8 ストアアプリ開発入門 ", Url = new Uri("http://www.amazon.co.jp/dp/4798035440/") }; yield return new Book { Title = "Windows ストアアプリ開発入門 ", Url = new Uri("http://www.amazon.co.jp/dp/4774155012/") }; }

System.Collections.IEnumerator System.Collections.IEnumerable.GetEnumerator() { return GetEnumerator(); }}

検索コントラクト – C#

<Page x:Class="ContractSample.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:ContractSample" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Page.Resources> <local:Model x:Key="model" /> </Page.Resources> <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <ListView x:Name="bookListView" ItemsSource="{Binding Source={StaticResource model}}" Margin="120,140,120,140" /> </Grid></Page>

検索コントラクト – C#

検索コントラクトの追加

検索コントラクト追加時の Package.appxmanifest

private sealed class Filter : ContractSample2.Common.BindableBase{ private String _name; private int _count; private bool _active;

List<Book> searchResult; // ToDo: public List<Book> SearchResult // ToDo: { get { return searchResult; } set { if (this.SetProperty(ref searchResult, value)) this.OnPropertyChanged("Description"); } }

//public Filter(String name, int count, bool active = false) // ToDo: //{ // this.Name = name; // this.Count = count; // this.Active = active; //}

public Filter(string name, List<Book> searchResult, bool active = false) // ToDo: { Name = name; SearchResult = searchResult; Active = active; }

検索コントラクト – C#

public override String ToString() { return Description; }

public String Name { get { return _name; } set { if (this.SetProperty(ref _name, value)) this.OnPropertyChanged("Description"); } }

public int Count { //get { return _count; } // ToDo: get { return SearchResult.Count; } // ToDo: set { if (this.SetProperty(ref _count, value)) this.OnPropertyChanged("Description"); } }

public bool Active { get { return _active; } set { this.SetProperty(ref _active, value); } }

public String Description { get { return String.Format("{0} ({1})", _name, _count); } } }}

検索コントラクト – C#

protected override void LoadState(Object navigationParameter, Dictionary<String, Object> pageState){ var queryText = navigationParameter as String;

var filterList = new List<Filter>();

//filterList.Add(new Filter("All", 0, true)); // ToDo: filterList.Add(new Filter("All", Model. Search(queryText).ToList(), true));

// ビュー モデルを介して結果を通信します this.DefaultViewModel["QueryText"] = '\u201c' + queryText + '\u201d'; this.DefaultViewModel["Filters"] = filterList; this.DefaultViewModel["ShowFilters"] = filterList.Count > 1;}

検索コントラクト – C#

void Filter_SelectionChanged(object sender, SelectionChangedEventArgs e){ var selectedFilter = e.AddedItems.FirstOrDefault() as Filter; if (selectedFilter != null) { selectedFilter.Active = true;

DefaultViewModel["Results"] = selectedFilter.SearchResult;

object results; ICollection resultsCollection; if (this.DefaultViewModel.TryGetValue("Results", out results) && (resultsCollection = results as ICollection) != null && resultsCollection.Count != 0) { VisualStateManager.GoToState(this, "ResultsFound", true); return; } } VisualStateManager.GoToState(this, "NoResultsFound", true);}

検索コントラクト – C#

3.2. 共有コントラクト

DEMO

<Page x:Class="ContractSample.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:ContractSample" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Page.Resources> <local:Model x:Key="model" /> </Page.Resources> <Page.BottomAppBar> <AppBar> <StackPanel Orientation="Horizontal"> <Button Content=“ 共有 " Click="OnButtonClick" /> </StackPanel> </AppBar> </Page.BottomAppBar> <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <ListView x:Name="bookListView" ItemsSource="{Binding Source={StaticResource model}}" Margin="120,140,120,140" /> </Grid></Page>

検索コントラクト – C#

void OnButtonClick(object sender, RoutedEventArgs e){ var book = (Book)bookListView.SelectedItem; if (book == null) return;

var dataTransferManager = DataTransferManager.GetForCurrentView(); dataTransferManager.DataRequested += (_, args) => { args.Request.Data.Properties.Title = book.Title; args.Request.Data.SetUri(book.Url); }; DataTransferManager.ShowShareUI();}

共有コントラクト

DEMO

共有ターゲット コントラクトの追加

共有ターゲット コントラクト追加時の Package.appxmanifest

4. Windows ストアへの提出

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

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

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

アプリ名の予約

アプリ名の予約

アプリ名の予約

Windows 8 アプリ開発体験テンプレートhttp://msdn.microsoft.com/ja-jp/jj556277

Windows ストア アプリ 登録の手引き

参考資料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

お客様のアプリは、要件 2.4 を満たしていません。

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

リジェクト理由

• Windows 8 アプリ開発体験テンプレートhttp://msdn.microsoft.com/ja-jp/jj556277「 NewsReader テンプレート XAML/C# 用」で作ったアプリから、「 Web ブラウザーで開く」機能を削除

対処 : …

2012/09/25

お客様のアプリは、要件 4.1 を満たしていません。

リジェクト理由

Privacy PolicySho'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

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

リジェクト理由

  <Resources>    <Resource Language="x-generate" />  </Resources>

対処 : Package.appxmanifest

  <Resources>    <Resource Language=“en" />  </Resources>

対処 :

2012/09/25

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

リジェクト理由

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

対処 :

2012/10/04お客様のアプリは、要件 1.2 を満たしていません。審査担当者からのコメント :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” を別の表現に変更。

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

Windows 8 Clinic

5. お役立ちサイト

• デベロッパー センター - Windows ストア アプリhttp://msdn.microsoft.com/ja-JP/windows/appsWindows ストア アプリ開発は先ずここから

• Windows ストア アプリ プログラミングの開発者向け ダウンロード -  デベロッパー センター - Windows ストア アプリhttp://msdn.microsoft.com/ja-jp/windows/apps/br229516.aspx

• Windows 8 アプリ開発体験テンプレートhttp://msdn.microsoft.com/ja-jp/jj556277

• Windows アプリ アート ギャラリー -  アプリに組み込めるイメージ素材集http://msdn.microsoft.com/ja-jp/windowsphone/hh544699

• Developer Camp 2012 Japan Fall - Channel 9http://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 Blogshttp://blogs.msdn.com/b/ttanaka/archive/tags/windows_b930c830a230a230d730ea30_/

• windows - Akira Onishi's weblog - MSDN Blogshttp://blogs.msdn.com/b/aonishi/archive/tags/windows/

• WinRT - 荒井省三の Blog - MSDN Blogshttp://blogs.msdn.com/b/shozoa/archive/tags/winrt/

• Windows Store 開発者向けブログ - MSDN Blogshttp://blogs.msdn.com/b/windowsstore_ja/

• Windows8 - 眠るシーラカンスと水底のプログラマーhttp://coelacanth.heteml.jp/blog/category/windows8/

• プログラミング ( Metro スタイル ) - biac の それさえもおそらくは幸せな日々@niftyhttp://bluewatersoft.cocolog-nifty.com/blog/metro/

• [WinRT] - かずきの Blog@Hatenahttp://d.hatena.ne.jp/okazuki/searchdiary?word=%2A%5BWinRT%5D

参考資料 : ブログ

• 速習 Windows ストアアプリケーション - CodeZinehttp://codezine.jp/article/corner/471

• WinRT/Metro TIPS - Insider.NET - @IThttp://www.atmarkit.co.jp/ait/subtop/features/da/ap_winrttips_index.html

• Windows 8 API の基礎 - ITprohttp://itpro.nikkeibp.co.jp/article/COLUMN/20121206/442473/

参考資料 : 連載記事

• Metro アプリをテストファーストするときのポイント - slidesharehttp://www.slideshare.net/yasuhikoy/2520121201-tdd13

• Windows 8 で MVVM パターンを使用する (機械翻訳 ) - MSDN マガジンhttp://msdn.microsoft.com/ja-jp/magazine/jj651572.aspxMVVM Light Toolkit http://mvvmlight.codeplex.com  を使ったサンプル。

• WinRT/Metro TIPS:多言語化対応を楽に行うには ?[Win 8] - @IThttp://www.atmarkit.co.jp/ait/articles/1211/08/news025.html

• WinRT/Metro TIPS:文字列を多言語化対応するには ?[Win 8] - @IThttp://www.atmarkit.co.jp/ait/articles/1211/01/news069.html

• WinRT/Metro TIPS:文字列リソースを使うには ?[Win 8] - @IThttp://www.atmarkit.co.jp/ait/articles/1210/25/news026.html固定文字列を、多言語化対応などのために、文字列リソースとして別のファイルに分けておく方法

参考資料 : 単体テスト、 ViewModel 、その他

お役立ち本

Windows 8 ストア アプリ開発 Tips

小島 富治雄

Hokuriku.NET vol.11 （ 2013.01.26 ）