1. Windowsストア
[DB]アプリ入門
COMMUNITY OPEN DAY 2013
2013.05.11 初音玲

2. アジェンダ
▷基本
▷DBアクセス
▷Azure Mobile Service
▷Web API
▷まとめ

3. 自己紹介
初音玲
Microsoft
MVP
Oracle ACE 開発者
インフラ
エンジニア
テクニカル
ライター

4. Windowsストアアプリ
キホンのキ

5. 用語のおさらい
アプリ
Windows 8
ストアアプリ
デザイン
Microsoft
デザイン
スタイル
UI名
なにそれ？
おいしいの？

6. Microsoftデザインスタイル？
▷「hh464920」でbingる
http://msdn.microsoft.com/en-us/library/windows/apps/hh464920.aspx

7. Windows 8 ストアアプリ
▷開発言語:VB, C#, C++
▷画面定義:XAML

8. アプリ、デザイン、フレームワーク
Windows 8
ストアアプリ
デスクトップアプリ
Microsoft Design Style UXガイド
Windowsストアアプリで配布
従来型
配布
WinRT
(Windows Runtime)
.NET Framework

9. 標準テンプレートを利用

10. 分類 スタイル名
見出し PageHeaderTextStyle
小見出し SubHeaderTextStyle
本文 BodyTextStyle
補足 CaptionTextStyle
文字用途とスタイル名

11. PageHeaderTextStyle
SubHeaderTextStyle
BodyTextStyle
CaptionTextStyle
BodyTextStyle
GroupDetailPage.xaml

12. 分類 ガイドライン StandardStyles
フォント Meiryo UI Segoe UI
見出し文字サイズ 42 56
小見出し文字サイズ 20 26.667
本文文字サイズ 11 (省略値)14.667
補足文字サイズ 9 12
ガイドラインとテンプレートの相違

13. テンプレート標準
ガイドライン推奨値

14. ハブ
スポーク
詳細
ハブナビゲーションモデル

15. グリッドアプリケーションの基本構造
GridView
ListView
Collection
ViewSource
Data
Context
GridView
ListView
Collection
ViewSource
Data
Context
SampleDataSource
BindingBinding
Binding
Binding
Binding Binding
DesignInstance

16. グリッドアプリケーションの基本構造
GridView
ListView
Collection
ViewSource
Data
Context
Default
ViewModel
GridView
ListView
Collection
ViewSource
Data
Context
Observable
Collection
代入BindingBinding
Binding
Binding
Binding
Default
ViewModel
Binding 代入

17. デザイナとのコラボするためのキモ
▷Model – ViewModel – View構造
▷Binding要素をまず作成
▷デザイナはBlendでViewをデザイン
▷TFServiceで共有＆バージョン管理

18. Windowsストアアプリ
DBアクセス

19. WindowsストアアプリでDBを使うには
デスクトップアプリ
• ADO.NET
• LINQ to SQL
• Entity Framework

20. WindowsストアアプリでDBを使うには
Windowsストアアプリ
• ADO.NET
• LINQ to SQL
• Entity Framework

21. 疑問：
DBアクセスがなくてどうするの？

22. リモートDBアクセスがない
▷SQLiteを組み込む
• DBファイルをローカルリソース管理

23. リモートDBアクセスがない
▷
•
▷DBアクセスWeb APIを経由する
• ストアアプリからはWebアクセス

24. グリッドアプリをDBアプリ化
GridView
ListView
Collection
ViewSource
Data
Context
Default
ViewModel
GridView
ListView
Collection
ViewSource
Data
Context
Observable
Collection
(ViewModel)
代入BindingBinding
Binding
Binding
Binding
Default
ViewModel
Binding 代入 Observable
Collection
(Model)
Webサービス
(REST/JSON)
代入
Binding
Observable
Collection
(Model)
代入
Binding

25. REST/JSONなデータアクセス
▷facebookからのデータ取得デモ

26. 疑問：
既存DBと入出力するには？

27. Windows Azure
Mobile Service
人が作りし非常にお手軽なモノ

28. SDKのインストール
▷NuGet

29. SDK 0.3.3-rc
▷NuGet
• Install-Package WindowsAzure.MobileServices -Pre

30. モバイルサービス(preview)

31. 接続用コードを取得

32. テーブル作成
使わない

33. 好きな名前のテーブルを作成

34. テーブル作成
▷IDだけのテーブルが作成される

35. コード
▷テーブル構造と同じ構造のクラスを用意
▷
Public Class COD2013Context
Public Property ID As Integer
Public Property Item As String
End Class
Public Shared MobileService = New MobileServiceClient(
"https://hatsune.azure-mobile.net/",
"CxxxxxxxxxxxxxxxxxxxGRhjhCBe71“
)
Private AnswerTable As IMobileServiceTable(Of COD2013Context) =
MobileService.GetTable(Of COD2013Context)()
Public Async Sub InsertAnswerItem(item As COD2013Context)
Await AnswerTable.InsertAsync(item)
End Sub

36. Azure Mobile Services実行結果

37. テーブルの作成
▷一度でもコードを実行すれば…

38. Mobile Serviceはプラットフォーム限定

39. 料金
無料 占有
料金 無料 8.31円/時間
preview期間中 無料 正規料金の20%
CPU 共有 1CPU/インスタンス
作成数制限 10サービス/サブスクリプション 100サービス/インスタンス
ジョブスケジュール 1件(1か月あたり700回上限) 10件
受信データ転送 無制限 無制限
送信データ転送 最大165MB/日 通常料金の従量制
SQLデータベース(必須) 通常料金の従量制 通常料金の従量制

40. ASP.NET Web API
もっとRESTらしく

41. ASP.NET MVC 4

42. ASP.NET MVC 4 - Model
▷データ構造を定義したクラスを用意
▷データ取得用クラスを用意(ここでDBアクセス)
Public Class COD2013Context
Public Property ID As Integer
Public Property Item As String
End Class
Public Class TResult
Public Property Items As COD2013Context()
End Class

43. ASP.NET MVC 4 - Controller
▷コントローラにコード実装
▷http://……/api/Values
Public Class ValuesController
Inherits ApiController
Private Model As New COD2013Model
' GET api/values
Public Function GetValues() As TResult
Return Model.GetValues()
End Function
End Class

44. ローカル実行

45. Windows Azure Webサイトに発行

46. クラウド上で実行

47. Windowsストアアプリから接続
Public Async Function GetAnswerItem() As Task
Dim urlString As String = String.Format(SearchUrl,
Date.Now.ToString("yyyyMMddHHmmss"))
Dim client As New HttpClient
Using response As HttpResponseMessage = Await client.GetAsync(urlString)
Dim responseDataStream As Stream = Await response.Content.ReadAsStreamAsync
Using stream As New MemoryStream()
responseDataStream.CopyTo(stream, responseDataStream.Length)
stream.Position = 0
Dim serializer As New System.Runtime.Serialization.Json.DataContractJsonSerializer(GetType(TResult))
Dim jsonDataValue As TResult = CType(serializer.ReadObject(stream), TResult)
Me.Items = New ObservableCollection(Of COD2013Context)(
From venue In jsonDataValue.Items
Select New COD2013Context With
{
.ID = venue.ID,
.Item = venue.Item
})
End Using
End Using
NotifyPropertyChanged("Items")
End Function

48. Azure Web Sites実行結果

49. 料金
Mobile Services(無料プラン) Web Sites(無料プラン)
料金 無料 無料
preview期間中 無料 無料
CPU 共有 使用サイクル合計60分/日
作成数制限 10サービス/サブスクリプション 10サイト
ジョブスケジュール 1件(1か月あたり700回上限) -
受信データ転送 無制限 無制限
送信データ転送 最大165MB/日 最大165MB/日
SQLデータベース (必須)通常料金の従量制 (任意)通常料金の従量制
MySQL - 20MB

50. FIN