Microsoft Architect Forum、Enterprise Windows 8 開発セッションフォローアップ Part 3
皆様、こんにちは！
Part 1～Part 3ではWindows ストアアプリとWindows Azure連携デモにつき書きます。Part 1では主に今回のデモで使用された技術の基本的な使い方、Part 2では実際の実装コード(店舗管理者用ストアアプ側)、Part 3では一般ユーザー用ストアアプリ側（Mobile Services）、そしてPart 4で、Office 365およびSharePointとの連携のコード、について書く予定です。
今回は、Part 3について解説します。
1．セッションスライドについて
こちらに公開してあります。
MAF2013 Enterprise Windows 8 – Architecture for rapid development of WinRT apps from Shotaro Suzuki
2．デモについて
Part1 ～ Part 3 では、Windows Azure連携シナリオである、 ”オンライン楽器ストアプリ”について、ご紹介します。このようなアプリでした。
アーキテクチャー概要はこちらです。
店舗管理者用のアプリは、Entity Framework/CodeFirst でデータベースを構成し、SQL Database に商品詳細情報（文字・数値データ）、Windows Azure ストレージ（BLOB）に画像を登録します。そして、ASP.NET Web API で REST サービスを作成・公開し、Windows Azure Websites で当該サービスをホストし、Windows ストアアプリから商品情報を登録・編集して、商品登録と管理を行います。
一般ユーザー用は、店舗管理者用のView を若干変更し、同じデータソースの読み取りに加えて、購入手続き向けに、Mobile Servicesも使って認証やPush通知を行う仕組みになっています。
すなわち、下記の要素からなります。
(1) Windows Azure Web サイト
(2) Windows Azure SQL データベース
(3) ASP.NET Web API
(4) ADO.NET Entity Framework
(5) Windows Azure ストレージサービス
(6) Windows 8 ストアアプリ との連携
(7) Windows Azure Mobile Services との連携
Part3 では、今回のデモの実装内容として、(7) を見ていきましょう。
(7) Windows Azure Mobile Servicesの作成
Mobile Services の組み込みには色々な構成がありえますが、一番簡単なのは、チュートリアルにあるToDoItemsのような構成を踏襲することです。単純なテーブル（ID、Item、フラグ等）をMobile Servicesと連結されたSQL Database上に作成し、そこにお気に入りのアイテムとしてクリックされた情報を保存し、レコード挿入時のスクリプトで、Push通知を飛ばします。Push通知にはChannelテーブルを作り、スクリプトを作成します。またPushと同時に、アドオンのSendGridを使ってメールを飛ばします。いずれも紹介済みですので、下記に過去のBlogエントリーを紹介します。
重要なのはセッションでもお話しした通り、**Mobile Services を使いたい場合には、下記のステップ 2.の（2）（3）にもある通り、SIDやSecret Key等が必要となるため、ストアアプリをストアに登録する必要がある**ということです。サイドローディングでは無理ですので、ご注意ください。
ステップ1. Viewの変更等について
大前提として、 店舗管理者用のストアアプリのソリューションフォルダをそのままコピーして、別の名前で、一般ユーザー向けストアアプリを作ります。これを修正していきます。
（1）AppBarの修正について
ソリューションエクスプローラ内のCommonフォルダを開いて、その中にある、StandardStyles.xaml を修正し、ほぼすべてのコメントアウトを外しておきましょう。そのうえで、下記のように、ItemDetailPage.xaml のBottomAppBar 部分の XAML を修正します。
<Page.BottomAppBar>
<AppBar>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal">
<Button x:Name="buttonContact"
Style="{StaticResource ContactAppBarButtonStyle}" />
</StackPanel>
<StackPanel Grid.Column="1"
HorizontalAlignment="Right"
Orientation="Horizontal">
<Button Style="{StaticResource LikeAppBarButtonStyle}"
x:Name="buttonLike" Click="buttonLike_Click" />
<Button Style="{StaticResource CalculatorAppBarButtonStyle}"
x:Name="buttonBuy" Click="buttonBuy_Click" />
</StackPanel>
</Grid>
</AppBar>
</Page.BottomAppBar>
この中のボタンの各クリックイベント（buttonLike_Click、buttonBuy_Click）に対して、イベントハンドラを割り当て、それぞれ、Mobile Services を使った、お気に入り追加、認証、のロジックを記述します。その内容は、ステップ2でご紹介する通りです。
（2）App.xamlの修正について（デザイン面）
店舗管理者用ストアアプリの App.xaml の最初の部分はこの通りです。
<Application
x:Class="PhotoMgrClient.App"
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:PhotoMgrClient"
xmlns:localData="using:PhotoMgrClient.Data"
RequestedTheme ="Light">
一方、一般ユーザー向けストアアプリのApp.xamlの最初の部分はこうなります。
<Application
x:Class="PhotoMgrClient.App"
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:PhotoMgrClient"
xmlns:localData="using:PhotoMgrClient.Data"
RequestedTheme ="Dark">
RequestedTheme の部分の指定を変えるだけのシンプルな構成になっています。
ステップ2. 新規Mobile ServicesからPush通知の作成まで
これらを参考にしてください。若干、現在とスクリーンショットが異なる部分がありますが、随時Updateによる機能の追加等によるものですので、今回の実装には特に支障はないと思います。
(1) Windows Azure Mobile Services を使った Windows ストアアプリ開発-(1) 最初のMobile Service の作成
（2） Windows Azure Mobile Services を使った Windows ストアアプリ開発-(2) Windows ストアアプリへのプッシュ通知の追加
(3) Windows Azure Mobile Services を使った Windows ストアアプリ開発-(3) Windows ストアアプリとMobile Service に認証を追加する
（4）Windows ストアアプリ - バックエンドサービスの作成例 (1) (C# / XAML 編)
このブログエントリは3万View以上あったものですので、それなりに参考にして戴いているかと思います。
https://blogs.msdn.com/b/shosuz/archive/2012/12/14/windows-1-c-xaml.aspx
ステップ3．SendGridを利用したメール送信について
こちらについても、以前書いたこのエントリーをそのままご利用ください。お気に入り追加ボタンのクリックで、Push通知と同時に、登録したメールアドレスにもメールが飛ぶ仕組みです。なお本文内にも書いてある通り、Push 通知と SendGrid によるメール送信は同じテーブルの挿入のスクリプト内に同居可能です。
https://blogs.msdn.com/b/shosuz/archive/2013/01/03/sendgrid-windows-azure-mobile-services.aspx
以上です。いかがでしょうか？
次回、Part 4では、SharePoint連携およびOffice 365連携について、ご紹介します。
鈴木 章太郎