1. VSUG DAY 2013 Summer
初めての
Windows ストア アプリ開発
株式会社 創風システム
石野 光仁

2. VSUG DAY 2013 Summer
自己紹介
• 名前
– 本名：石野 光仁
– ハンドル名：アイライト
– Twitter:@AILight
• 所属
– Microsoft MVP for C#
– 2003/10 ～ 現在
• コミュニティ
– アイライト主催:http://www.ailight.jp

3. VSUG DAY 2013 Summer
ストアアプリの紹介
Demo

4. VSUG DAY 2013 Summer
開発の流れ：デザイン
デザイン
ロジック
ブラッシュ
アップ

5. VSUG DAY 2013 Summer
プロジェクトの準備
• 新しいアプリケーション（XAML）から始める
– 「MainPage.xaml」を消す
– 基本ページで「MainPage.xaml」を再作成
– 「MainPage.xaml」のリソースを「App.xaml」に移動
• StandardStyles.xaml
– IMEパッドで調べる
• Segoe UI Symbol

6. VSUG DAY 2013 Summer
デザインの基本
• Grid
– 表の作り方
• RowDefinitions
• ColumnDefinitions
– 入れ子
• Grid.Row=“0”
• Grid.Column=“0”
– *を有効活用
• Width="*"
• Height="*"

7. VSUG DAY 2013 Summer
画面遷移の基本
• ページを追加
– 「GamePage.xaml」
• 画面遷移
– this.Frame.Navigate(typeof(GamePage))
– イベント
• OnNavigatedTo
• OnNavigatedFrom

8. VSUG DAY 2013 Summer
ユーザーコントロールの活用
• リソースの管理
– 画像等はAssetsに入れておく
– Imageコントロールを追加
• プロパティ：Sourceにリソースを追加
– Windows アプリ アート ギャラリーの活用
• http://msdn.microsoft.com/ja-jp/windowsphone/hh544699
• 画面デザイン反映
– ツールボックスから選ぶ
– Gridを活用してデザイン （3ｘ3）

9. VSUG DAY 2013 Summer
これで、
デザインは完璧？
クリックは？
イメージの入れ替えは？
画面に貼り付けたコントロールの制御の仕方は？

10. VSUG DAY 2013 Summer
これが最初の“壁”
クリックは？
イメージの入れ替えは？
画面に貼り付けたコントロールの制御の仕方は？

11. VSUG DAY 2013 Summer
最初の“壁”を突破しよう
• ユーザーコントロール側を改造
– OnTapped
– BitmapImage
– Uri
• ms-appx:///Assets/
• コントロールとグリッドの関係
– griGrid.Children.Add
– Grid.SetRow
– Grid.SetColumn

12. VSUG DAY 2013 Summer
開発の流れ：ロジック
デザイン
ロジック
ブラッシュ
アップ

13. VSUG DAY 2013 Summer
外部ライブラリの利用
• Windowsランタイムコンポーネント
– 言語間で利用するための、コンポーネント
• クラスライブラリ（Windows ストアアプリ）
– いわゆるクラスライブラリ
• 小さな壁
– “クラスライブラリ”を追加しない！！

14. VSUG DAY 2013 Summer
データ保存について
• ApplicationDataContainer
– using Windows.Storage;
– ApplicationData.Current.LocalSettings
• ローカルに保存される
• ApplicationData.Current.LocalFolder.Path （実際の保存先）
– ApplicationData.Current.RoamingSettings
• ローミング（クラウド経由で同期）される
• ApplicationData.Current.RoamingStorageQuota ⇒ 100
– 100KBの制限

15. VSUG DAY 2013 Summer
データ保存について
ローカル
ストレージ
ローミング
ストレージ
ローミング
ストレージ
ローカル
ストレージ
クラウド ストレージ
同期
同期

16. VSUG DAY 2013 Summer
これで、
ロジックは完璧？
進行状況の保存は？
イベントは？画面の表示タイミングは？
ローカル？ローミング？使いどころは？

17. VSUG DAY 2013 Summer
これが２つめの“壁”
機能は理解できるが、
最適な組み合わせが見えてこない！！

18. VSUG DAY 2013 Summer
MainPage
（メニュー）
GamePage
（ゲーム）
Ban
（ライブラリ）
ApplicationData.Current.LocalSettings
（ローカルストレージ）
Ban
（ライブラリ）
Initialize();
GetInitializeString();
InitializeString
InitializeString
操作
結果
デザインとロジックの関係

19. VSUG DAY 2013 Summer
開発の流れ：ブラッシュアップ
デザイン
ロジック
ブラッシュ
アップ

20. VSUG DAY 2013 Summer
国際化対応 ≪ 環境編 ≫
• インストール
– Multilingual App Toolkit for Visual Studio 2012
– http://msdn.microsoft.com/ja-JP/windows/apps/hh848309.aspx
• 「アプリケーション配布パッケージ」の設定を変更
– 「package.appxmanifest」
• 規定の言語：ja-JP ⇒ en-US
• 多言語アプリ ツールキットの有効化
– 「ツール」⇒「多言語アプリ ツールキットの有効化」
– 「プロジェクトで右クリック」⇒「翻訳言語の追加」
– プロジェクトに「Stringsen-USResources.resw」を追加

21. VSUG DAY 2013 Summer
国際化対応 ≪ XAML編 + プログラム編≫
• XAML修正
– XAML側：「x:Uid」で値を指定
– リソース側：ｘ:Uidで指定した値に、プロパティを付けて設定
• 例： btnPlay.Content
• XAMLのContentはそのままでOK
• プログラム修正
– var resourceLoader = new ResourceLoader();
– var commetString = resourceLoader.GetString(“Comment");

22. VSUG DAY 2013 Summer
課金アイテムの実装
• アイテム購入
CurrentApp.RequestProductPurchaseAsync(“課金アイテム名”, false);
• 購入済確認
var licenseInformation = CurrentApp.LicenseInformation;
licenseInformation.ProductLicenses[“課金アイテム名”].IsActive
• 価格確認
var listingInformation = CurrentApp.LoadListingInformationAsync();
listingInformation.ProductListings[“課金アイテム名”].FormattedPrice

23. VSUG DAY 2013 Summer
課金アイテムの実装 テストは？
• シミュレータ用意されています
• CurrentApp ⇒ CurrentAppSimulator
#if DEBUG
_LicenseInformation = CurrentAppSimulator.LicenseInformation;
#else
_LicenseInformation = CurrentApp.LicenseInformation;
#endif
• シミュレータのデータが保存される場所
C:Users<ユーザー名>AppDataLocalPackages<パッケージファミリ名>
LocalStateMicrosoftWindows StoreApiData

24. VSUG DAY 2013 Summer
ストアアプリ ⇔ ストアアプリ
• ストアアプリを検索したい
var uri = new Uri("ms-windows-store:Search?query=AILight");
Windows.System.Launcher.LaunchUriAsync(uri);
• 直接アプリを開く
var uri = new Uri("ms-windows-store:PDP?
PFN=58514.AILightReversi_m7tms3jn3zbkr");
Windows.System.Launcher.LaunchUriAsync(uri);
PFNには、パッケージ・ファミリーネーム：「Package.appxmanifest」
• http://www.ailight.jp/Content/Read/WSA_MsWindowsStoreSearch

25. VSUG DAY 2013 Summer
Azure Mobile Service：準備
• ユーザー全体での共有ストレージを利用
– Azureポータル：モバイルサービスを作成
– Azureポータル：データ・タブで、テーブルを作成
– Visual Studio：テーブル名と同名のクラスを作成
– Visual Studio：クラスにメンバーを定義
• 環境構築
– NuGet:WindowsAzure.MobileServices

26. VSUG DAY 2013 Summer
Azure Mobile Service：操作
• 参照
– App.MobileService.GetTable<HiScore>().Where(row => row.GameMode
== (int) gameMode && row.ScreenNumber ==
screenNumber).OrderByDescending(row =>
row.Score).Take(1).ToListAsync();
• 挿入
– App.MobileService.GetTable<HiScore>().InsertAsync(hiScore);
• 削除
– App.MobileService.GetTable<HiScore>().DeleteAsync(hiScore);

27. VSUG DAY 2013 Summer
MainPage
（メニュー）
GamePage
（ゲーム）
Ban
（ライブラリ）
ApplicationData.Current.LocalSettings
（ローカルストレージ）
Ban
（ライブラリ）
ApplicationData.Current
.
RoamingSettings
（ローミングストレージ）
HighScoreManager
Initialize();
GetInitializeString();
InitializeString
InitializeString
操作
結果
Azure Mobile Service
（クラウド ストレージ）
Azure Mobile Service導入後

28. VSUG DAY 2013 Summer
デバッグ
• デバッグ・ターゲット
– ローカルコンピュータ
– シミュレータ
– リモートコンピュータ
• リモートデバッグセットアップ
– Remote Tools for Visual Studio 2012
• http://www.microsoft.com/visualstudio/jpn/downloads#d-remote-tools
– 設定方法
• http://www.ailight.jp/Content/Read/WSA_RemoteDebug

29. VSUG DAY 2013 Summer
ストアアプリの公開
• 紹介文の作成
• スナップショットの作成
• アイコンの作成
• デバッグ、デバッグ、デバッグ
• Windows App Certification Kit

30. VSUG DAY 2013 Summer
最後に
AILight Reversi
AILight Bubble Breaker

31. VSUG DAY 2013 Summer
ご清聴ありがとうございました