初めての Windows ストア アプリ開発for vsug summer2013_up

1,114 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,114
On SlideShare
0
From Embeds
0
Number of Embeds
229
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

初めての Windows ストア アプリ開発for vsug summer2013_up

  1. 1. VSUG DAY 2013 Summer 初めての Windows ストア アプリ開発 株式会社 創風システム 石野 光仁
  2. 2. VSUG DAY 2013 Summer 自己紹介 •  名前 – 本名:石野 光仁 – ハンドル名:アイライト – Twitter:@AILight •  所属 – Microsoft MVP for C# – 2003/10 ~ 現在 •  コミュニティ – アイライト主催:http://www.ailight.jp
  3. 3. VSUG DAY 2013 Summer ストアアプリの紹介 Demo
  4. 4. VSUG DAY 2013 Summer 開発の流れ:デザイン デザイン ロジック ブラッシュ アップ
  5. 5. VSUG DAY 2013 Summer プロジェクトの準備 •  新しいアプリケーション(XAML)から始める – 「MainPage.xaml」を消す – 基本ページで「MainPage.xaml」を再作成 – 「MainPage.xaml」のリソースを「App.xaml」に移動 •  StandardStyles.xaml – IMEパッドで調べる •  Segoe UI Symbol
  6. 6. VSUG DAY 2013 Summer デザインの基本 •  Grid – 表の作り方 •  RowDefinitions •  ColumnDefinitions – 入れ子 •  Grid.Row=“0” •  Grid.Column=“0” – *を有効活用 •  Width="*" •  Height="*"
  7. 7. VSUG DAY 2013 Summer 画面遷移の基本 •  ページを追加 – 「GamePage.xaml」 •  画面遷移 – this.Frame.Navigate(typeof(GamePage)) – イベント •  OnNavigatedTo •  OnNavigatedFrom
  8. 8. VSUG DAY 2013 Summer ユーザーコントロールの活用 •  リソースの管理 – 画像等はAssetsに入れておく – Imageコントロールを追加 •  プロパティ:Sourceにリソースを追加 – Windows アプリ アート ギャラリーの活用 •  http://msdn.microsoft.com/ja-jp/windowsphone/hh544699 •  画面デザイン反映 – ツールボックスから選ぶ – Gridを活用してデザイン (3x3)
  9. 9. VSUG DAY 2013 Summer これで、 デザインは完璧? クリックは? イメージの入れ替えは? 画面に貼り付けたコントロールの制御の仕方は?
  10. 10. VSUG DAY 2013 Summer これが最初の“壁” クリックは? イメージの入れ替えは? 画面に貼り付けたコントロールの制御の仕方は?
  11. 11. VSUG DAY 2013 Summer 最初の“壁”を突破しよう •  ユーザーコントロール側を改造 – OnTapped – BitmapImage – Uri •  ms-appx:///Assets/ •  コントロールとグリッドの関係 –  griGrid.Children.Add –  Grid.SetRow –  Grid.SetColumn
  12. 12. VSUG DAY 2013 Summer 開発の流れ:ロジック デザイン ロジック ブラッシュ アップ
  13. 13. VSUG DAY 2013 Summer 外部ライブラリの利用 •  Windowsランタイムコンポーネント – 言語間で利用するための、コンポーネント •  クラスライブラリ(Windows ストアアプリ) – いわゆるクラスライブラリ •  小さな壁 – “クラスライブラリ”を追加しない!!
  14. 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. 15. VSUG DAY 2013 Summer データ保存について ローカル ストレージ ローミング ストレージ ローミング ストレージ ローカル ストレージ クラウド ストレージ 同期 同期
  16. 16. VSUG DAY 2013 Summer これで、 ロジックは完璧? 進行状況の保存は? イベントは?画面の表示タイミングは? ローカル?ローミング?使いどころは?
  17. 17. VSUG DAY 2013 Summer これが2つめの“壁” 機能は理解できるが、 最適な組み合わせが見えてこない!!
  18. 18. VSUG DAY 2013 Summer MainPage (メニュー) GamePage (ゲーム) Ban (ライブラリ) ApplicationData.Current.LocalSettings (ローカルストレージ) Ban (ライブラリ) Initialize(); GetInitializeString(); InitializeString InitializeString 操作 結果 デザインとロジックの関係
  19. 19. VSUG DAY 2013 Summer 開発の流れ:ブラッシュアップ デザイン ロジック ブラッシュ アップ
  20. 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. 21. VSUG DAY 2013 Summer 国際化対応 ≪ XAML編 + プログラム編≫ •  XAML修正 – XAML側:「x:Uid」で値を指定 – リソース側:x:Uidで指定した値に、プロパティを付けて設定 •  例: btnPlay.Content •  XAMLのContentはそのままでOK •  プログラム修正 –  var resourceLoader = new ResourceLoader(); –  var commetString = resourceLoader.GetString(“Comment");
  22. 22. VSUG DAY 2013 Summer 課金アイテムの実装 •  アイテム購入 CurrentApp.RequestProductPurchaseAsync(“課金アイテム名”, false); •  購入済確認 var licenseInformation = CurrentApp.LicenseInformation; licenseInformation.ProductLicenses[“課金アイテム名”].IsActive •  価格確認 var listingInformation = CurrentApp.LoadListingInformationAsync(); listingInformation.ProductListings[“課金アイテム名”].FormattedPrice
  23. 23. VSUG DAY 2013 Summer 課金アイテムの実装 テストは? •  シミュレータ用意されています •  CurrentApp ⇒ CurrentAppSimulator #if DEBUG _LicenseInformation = CurrentAppSimulator.LicenseInformation; #else _LicenseInformation = CurrentApp.LicenseInformation; #endif •  シミュレータのデータが保存される場所 C:Users<ユーザー名>AppDataLocalPackages<パッケージファミリ名> LocalStateMicrosoftWindows StoreApiData
  24. 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. 25. VSUG DAY 2013 Summer Azure Mobile Service:準備 •  ユーザー全体での共有ストレージを利用 – Azureポータル:モバイルサービスを作成 – Azureポータル:データ・タブで、テーブルを作成 – Visual Studio:テーブル名と同名のクラスを作成 – Visual Studio:クラスにメンバーを定義 •  環境構築 – NuGet:WindowsAzure.MobileServices
  26. 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. 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. 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. 29. VSUG DAY 2013 Summer ストアアプリの公開 •  紹介文の作成 •  スナップショットの作成 •  アイコンの作成 •  デバッグ、デバッグ、デバッグ •  Windows App Certification Kit
  30. 30. VSUG DAY 2013 Summer 最後に AILight Reversi AILight Bubble Breaker
  31. 31. VSUG DAY 2013 Summer ご清聴ありがとうございました

×