Hokuriku.NET vol.11 (2013年1月26日) http://atnd.org/events/33042

1. Hokuriku.NET vol.11（2013.01.26）
Windows 8 ストア アプリ
開発 Tips
小島 富治雄

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

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

4. アジェンダ
1. Bing Map を 2.カメラを 3. コントラクト
使ってみよう 使ってみよう
4. Windows ストアへ 5. お役立ち
の提出 サイト

5. 本日の資料
• http://www.slideshare.net/Fujiwo/windo
ws-8-tips-hokurikunet-vol11-2013126
• http://slidesha.re/WjZSu5

6. アンケート:
• C# でプログラムが書ける (y/n)
• “XAML” を「ザムル」と読む (y/n)
• いや、 「ザメル」と読む派だ (y/n)
• Windows 8 ストアアプリを作った
ことがある (y/n)
• 何らかの MVP 受賞経験がある (y/n)

7. Windows ストアアプリ開発の例

8. 1. Bing Map を使ってみよう

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

10. Bing Maps SDK for Windows Store apps
既存のアプリに NuGet で入れることも出来る

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

12. Bing Maps Account Center

13. Bing Maps Account Center

14. DEMO

15. Bing Maps Application

16. Bing Map アプリの構成

17. Bing Map アプリの Package.appxmanifest

18. 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>

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

20. 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();
}

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

22. DEMO

23. カメラ アプリの Package.appxmanifest

24. Blend for Visual Studio

25. カメラ アプリ - 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}">
<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>

26. カメラ アプリ – XAML - AppBar
<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>

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

28. 写真の表示 - 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;
}
要 using
System.Runtime.InteropServices.WindowsRuntime;

29. 写真の表示 - C#
async void OnPhotoButtonClick(
object sender, RoutedEventArgs e)
{
image.Source = await CreateBitmapAsync(
await TakePhotoAsync()
);
}

30. 写真のファイルオープン - 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();
}

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

32. 写真のファイル オープン - 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 };
}

33. 3. コントラクト

34. DEMO

35. 3.1. 検索コントラクト

36. DEMO

37. 検索コントラクト – C#
public class Book
{
public string Title { get; set; }
public Uri Url { get; set; }
public override string ToString()
{ return Title; }
}

38. 検索コントラクト – 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(); }
}

39. 検索コントラクト – 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>

40. 検索コントラクトの追加

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

42. 検索コントラクト – C#
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;
}

43. 検索コントラクト – 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); }
}
}
}

44. 検索コントラクト – 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;
}

45. 検索コントラクト – 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);
}

46. 3.2. 共有コントラクト

47. DEMO

48. 検索コントラクト – 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>
<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>

49. 共有コントラクト
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();
}

50. DEMO

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

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

53. 4. Windows ストアへの提出

54. Windows ストア アプリ デベロッパー センター
• http://msdn.microsoft.com/ja-JP/windows/apps
• https://appdev.microsoft.com/StorePortals/

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

56. アプリ名の予約

57. アプリ名の予約

58. アプリ名の予約

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

60. リジェクトの理由と対策

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

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

63. リジェクト理由
2012/09/27
お客様のアプリは、要件 2.4 を満たしていません。
アプリがこの要件を満たしていないと見なされる一般的な理
由は、アプリの主要なシナリオの 1 つに該当する部分を完
了するために、ユーザーが Web ブラウザーにリダイレクト
されることです。

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

65. リジェクト理由
2012/09/25
お客様のアプリは、要件 4.1 を満たしていません。

66. 対処: プライバシーポリシー
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.

67. 対処: Package.appxmanifest

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

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

70. リジェクト理由
2012/09/25
お客様のアプリは、要件 6.8 を満たしていません。
アプリがこの要件を満たしていないと見なされる一般的な理由は、1 つ以上のス
クリーンショットに、実際より良く見えるようなグラフィック処理が施されてい
ることです。
対処:
審査担当者へのコメント
Background image will be choosen from 6 images randomly.

71. リジェクト理由
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.
対処:
「説明」をより詳細に

72. リジェクト理由
2012/09/28
お客様のアプリは、要件 2.3 を満たしていません。 詳細情報
アプリがこの要件を満たしていないと見なされる一般的な理由は、アプリ タイ
ル、アプリ バー、設定チャーム ([バージョン情報] リンクを含む) が、プロモー
ション資料に使用されていることです。
対処:
アプリの中の “Die Hard” を別の表現に変更。

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

74. 5. お役立ちサイト

75. 参考資料: 開発を始めるとき
• デベロッパー センター - Windows ストア アプリ
http://msdn.microsoft.com/ja-JP/windows/apps
Windows ストア アプリ開発は先ずここから
• 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 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

76. 参考資料: ブログ
• 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

77. 参考資料: 連載記事
• 速習 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/

78. 参考資料: 単体テスト、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
http://www.atmarkit.co.jp/ait/articles/1211/01/news069.html
• WinRT/Metro TIPS:文字列リソースを使うには?[Win 8] - @IT
http://www.atmarkit.co.jp/ait/articles/1210/25/news026.html
固定文字列を、多言語化対応などのために、文字列リソースとして別のファイルに分けて
おく方法

79. お役立ち本

80. Hokuriku.NET vol.11（2013.01.26）
Windows 8 ストア アプリ
開発 Tips
小島 富治雄