Windowsストアアプリ入門 vol69:Windows Azure Mobile Servicesを利用する(その2)Push通知

日曜日 , 30, 9月 2012 Leave a comment

 Windows Azure Mobile Servicesを利用してPush通知を試してみます。

 Get started with push notifications in Mobile Servicesが参考になります。

 

アプリのマニフェストのデータを登録

 

 アプリケーションのPackage.appxmanifestを開きます。

 パッケージ化タブからパッケージ表示名と発行者をコピーしておきます。

 

 

 Windows Push Notifications & Live Connectで情報を登録します。

 

 

 登録すると各種情報が表示されます。

 

 

 そのうちのPackage nameをアプリケーションのPackage nameに設定します。

 

 MobileServiceのページのPUSHタブにClientSecretとPackageSIDを保存します。

 (事前にWindowsストアアプリ入門 vol68:Windows Azure Mobile Servicesを利用する(その1)などを参考にMobileServiceのアプリケーションを作成してある必要があります。)

 

プロジェクトを更新

 

 Windowsストアアプリケーション側はWindowsストアアプリ入門 vol68:Windows Azure Mobile Servicesを利用する(その1)で解説したように、参照にMobile Services SDKを追加してプロパティも追加してある必要があります。

 

 App.xaml.csにusingを追加します。

 

using Windows.Networking.PushNotifications;

 

 同じくApp.xaml.csに以下のプロパティとメソッドを追加します。

 

        public static PushNotificationChannel CurrentChannel { get; private set; }


        private async void AcquirePushChannel()
        {
            CurrentChannel =
                await PushNotificationChannelManager.CreatePushNotificationChannelForApplicationAsync();
        }

 

 OnLaunchedメソッドにAcquirePushChannelメソッドの呼び出しを追加します。

 

            AcquirePushChannel();

 

 MainPage.xaml.csを以下のように書き換えます。

 

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.Serialization;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// 空白ページのアイテム テンプレートについては、http://go.microsoft.com/fwlink/?LinkId=234238 を参照してください

namespace MobileServiceSample
{
    /// <summary>
    /// それ自体で使用できる空白ページまたはフレーム内に移動できる空白ページ。
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        /// <summary>
        /// このページがフレームに表示されるときに呼び出されます。
        /// </summary>
        /// <param name="e">このページにどのように到達したかを説明するイベント データ。Parameter 
        /// プロパティは、通常、ページを構成するために使用します。</param>
        protected async override void OnNavigatedTo(NavigationEventArgs e)
        {
        }

        private async void ButtonSave_Click(object sender, RoutedEventArgs e)
        {
            var todoItem = new Item { text = "Notice Test", Channel = App.CurrentChannel.Uri };
            await App.MobileService.GetTable<Item>().InsertAsync(todoItem);
        }
    }

    public class Item
    {
        public int Id { get; set; }
        public string text { get; set; }

        [DataMember(Name = "channel")]
        public string Channel { get; set; }

    }
}

 

 なぜか後述するMobileServiceで大文字が使えなかったのでTextをtextに変更してあります。

 MainPage.xamlにボタンを追加します。

 

        <Button Content="Button" HorizontalAlignment="Left" Margin="106,100,0,0" VerticalAlignment="Top" Click="ButtonSave_Click"/>

 

 

 Package.appxmanifestのトースト対応を「はい」に設定します(これをやらないとトーストが表示しないので注意)。

 

 

MobileService側のスクリプトを変更する

 

 MobileServiceのテーブルにデータが挿入された際の動作を指定します。

 DATAタブに登録したItemテーブルをクリックしSCRIPTタブの中身を変更します。

(この辺もWindowsストアアプリ入門 vol68:Windows Azure Mobile Servicesを利用する(その1)を参考にしてください)

 

function insert(item, user, request) {
    request.execute({
        success: function() {
            // Write to the response and then send the notification in the background
            request.respond();
            push.wns.sendToastText04(item.channel, {
                text1: item.text
            }, {
                success: function(pushResponse) {
                    console.log("Sent push:", pushResponse);
                }
            });
        }
    });
}

 

 

 最後に画面下の「Save」ボタンで変更を登録します。

 

動作を確認する

 

 それではストアアプリを実行して動作を確認しましょう。

 ボタンを押すとトーストが起動すれば成功です。

 


Please give us your valuable comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください