眠るシーラカンスと水底のプログラマー

プッシュの概要

 

　タイルの更新をプッシュ更新することで任意のタイミングでサーバからアプリケーションのタイルを更新することができます。

　プッシュ更新はサーバーサイドのプログラミングが必要になったり、Windows Push Notification Serviceを利用するなど、これまでのタイル更新方法より少し複雑です。

 

　プッシュ更新はWindows Azure Mobile Serviceなどを利用すると簡単に行うことができますが、今回は通常の方法で、サーバーサイドはASP.NETではなくPHPで更新する方法を紹介します。

　(タイルの概要についてはWindowsストアアプリ:タイルの概要を参考にしてください)

 

プッシュ更新の登場人物

 

　プッシュ通知はWindowsストアアプリケーション、あなたのサーバー、そしてWindows Push Notification Serviceと登場人物が多いためMSDNのドキュメントも読みにくくなってしまっています。

 

　Windows Push Notification Serverを用いた通知を行う仕組みは以下のような図で説明されます。

 

 

　紫のWindowsと書かれた部分はあなたが作成するWindowsストアアプリケーションをさします。

　プッシュ通知を受け取ってタイルを更新するアプリケーションです。

　Notification Client Platformとは通知を受け取るAPIのことです。

 

 

　緑色のCloud Serviceと書かれた部分はクラウドと書いてありますが、普通のレンタルサーバーで構いません。

　(サーバーサイドのプログラムを書く必要はありますが言語はRubyでもPerlでもPHPでも構いません)

　今回はWebサイト制作でよく使われるPHPを用いることにします。

 

 

　最後に水色で描かれた部分WNSがWindows プッシュ通知サービス(Windows Push Notification Service)です。

　マイクロソフトが無料で提供するプッシュ通知ようのサーバーで、Windowsストアアプリケーションでプッシュ通知を行う場合はWindows プッシュ通知サービスを利用することになります。

 

　

 

プッシュ更新の仕組み

 

　プッシュ更新は以下のような流れで実装します。

 

1.アプリ名をWindowsストアで予約して、Push通知に必要なIDとキーを取得する

(アプリは審査を通す必要はなく、アプリ名の予約だけかまいません)

 

2.サーバーサイド(PHP)で1で取得したIDとキーを用いてトークンを取得する

 

3．Windowsストアアプリを作成し、1で予約した名前と関連付る

 

4．PushNotificationChannelManagerクラスを利用してチャンネルというURIを取得する。

(これがあなたのアプリケーションにプッシュするためのURIになります)

 

5．URIをサーバー(PHP)に送信する

(サーバー側ではURIを保持してプッシュする際に利用します)

 

6．サーバー(PHP)からWindows プッシュ通知サービスに通知を依頼する

(この時点でプッシュ更新が行われます)

 

　手順も多く、実装もWindowsストアアプリとサーバー両方に必要です。

　以下ではその流れを説明していきます。

 

1.アプリ名をWindowsストアで予約して、Push通知に必要なIDとキーを取得する

 

　最初のステップはWindowsストアにプッシュ通知を受け取るアプリを登録することです。

　(ストアにアプリを登録するためにはストアのアカウントが必要になります。ストアアカウントをお持ちでない場合はWindows プッシュ通知サービス (WNS) に対して認証する方法の注釈を参考にしてください)

 

　ストアにログイン後、「アプリの提出」からアプリ名を予約します。

 

　「高度な機能」から「プッシュ通知とLiveConnectサービスの情報」をクリックします。

 

 

　アプリの識別をクリックします。

 

 

　画面下部の

 

　アプリの AppManifest.xml ファイルをテキスト エディターで開き、<identity> 要素の各属性を、ここに表示されている値に設定してください。

 

　以下の部分を記録しておきます。すでにアプリケーションが作成済みの場合はPackage.appxmanifestを書き換えます。

　アプリケーションが作成済みでは無い場合は作成時に置き換えます。

 

　続いて「サービスの認証」をクリックしてパッケージ セキュリティ ID (SID)とクライアント シークレットを記録します。

(参考：Windows プッシュ通知サービス (WNS) に対して認証する方法)

 

2.サーバーサイド(PHP)で1で取得したIDとキーを用いてトークンを取得する

 

　続いて1で取得したパッケージ セキュリティ ID (SID)とクライアント シークレットを利用してサーバー(PHP)からWindows プッシュ通知サービスと通信を行うためのトークンを取得します。

　サーバーとWindows プッシュ通知サービスの通信規約はプッシュ通知サービスの要求ヘッダーと応答ヘッダーを参考にして実装することも可能ですがWindows-8-PHP-NotificationsというサンプルがGitHubにありますので参考にします。

 

<?php
include 'pns.php5';

// ストアのLiveConnectから取得した値を利用する
$sid ="{セキュリティID}";
$secret = "{クライアントシークレット}";

$uri = "{Windowsストアアプリで取得した通知URI}";

$pns = new WPN($sid, $secret);

// タイルを取得する
$xml = $pns->build_tile_xml("push test", "http://coelacanth.heteml.jp/blog/wp-content/uploads/2012/09/WideLogo.png");

$pns->post_tile($uri, $xml, $type = "wns/tile", $tileTag = '');
?>

 

　上記コードがpns.php5がWindows-8-PHP-Notificationsのwpn.phpです。

 

3．Windowsストアアプリを作成し、1で予約した名前と関連付る

 

　続いてまだ作成していない場合はWindowsストアアプリを作成します。

　(1で取得したidentityを書き換えていないならPackage.appxmanifestを書き換えます)

 

　ソリューションエクスプローラーのプロジェクト名を右クリック「ストア」→「アプリケーションをストアと関連付る」を選択します。

 

 

　作業を進めて1で予約した名前をアプリケーションと関連付けます。

 

　

 

4．PushNotificationChannelManagerクラスを利用してチャンネルというURIを取得する。

 

　Windowsストアアプリケーションでの作業を続けます。

　MainPage.xaml.csを以下のように記述します。

 

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
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;
using Windows.UI.Notifications;
using Windows.Data.Xml.Dom;
using Windows.Networking.PushNotifications;

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

namespace PushSample
{
    /// <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)
        {
            PushNotificationChannel channel = null;

            try
            {
                channel = await PushNotificationChannelManager.CreatePushNotificationChannelForApplicationAsync();

                // 取得したchannelをサーバーに送信する
            }

            catch (Exception ex)
            {
                // Could not create a channel. 
            }
        }
    }
}

 

5．URIをサーバー(PHP)に送信する

 

　上記コードで取得したチャンネル(httpsのURI)をサーバーに登録します。

　(登録する処理は通知チャネルを要求、作成、保存する方法を参考にしてください。)

 

6．サーバー(PHP)からWindows プッシュ通知サービスに通知を依頼する

 

　サーバー側(PHP)で通知用のURIを受け取ったら上記コードは実行に必要な情報がすべてそろいました。

 

<?php
include 'pns.php5';

// ストアのLiveConnectから取得した値を利用する
$sid ="{セキュリティID}";
$secret = "{クライアントシークレット}";

$uri = "{Windowsストアアプリで取得した通知URI}";

$pns = new WPN($sid, $secret);

// タイルを取得する
$xml = $pns->build_tile_xml("push test", "http://coelacanth.heteml.jp/blog/wp-content/uploads/2012/09/WideLogo.png");

$pns->post_tile($uri, $xml, $type = "wns/tile", $tileTag = '');
?>

 

　{セキュリティID}、{クライアントシークレット}、{Windowsストアアプリで取得した通知URI}に取得した値を入力して実行してみましょう。

 

object(WPNResponse)#2 (3) { ["message"]=> string(25) "Successfully sent message" ["error"]=> bool(false) ["httpCode"]=> int(200) }

 

　上のような結果が得られれば通信は成功です。

 

　プッシュ更新はサーバー側のコーディングが必要ですが、任意のタイミングで情報を配信できる価値のある方法です。

　ぜひマスターしてアプリケーションに生かしてください。