Windowsストアアプリ:タイルのリモート更新

日曜日 , 7, 10月 2012 Leave a comment

リモート更新の概要

 

 ローカル更新スケジュール更新ではタイルの内容はアプリ起動時に設定する必要がありました。

 リモート更新はアプリが起動していないタイミングでもサーバーと通信することでタイルを更新することができます。

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

 

 しばらくアプリを起動していない状態でも最新のデータを提供することができます。

 (タイマーをトリガーとしたリバックグラウンドタスクでも同様のことができますが、その場合ユーザーにダイアログで許可を得る必要があります。リモート更新はユーザーに許可を得る必要はありません。)

 

(リモート更新のポイント)

・サーバーと通信してその情報でタイルを更新する

・アプリの非起動時でもタイルを更新できる(最低一度は起動する必要がある)

・サーバーからのデータを加工することはできずサーバーはタイル更新用のテンプレート形式のXMLを出力する必要がある

(サーバーがJSONなどを返しそれを加工したい場合はバックグラウンドタスクを利用する)

 

リモート更新の実装

 

 タイルの更新には以下のようなXMLデータを返すWebページを利用します。

 

 http://coelacanth.heteml.jp/win8/tilesample/titleUpdateRemoteImage.html

 

 アプリ側のコードは以下

 

            #region タイル更新

            // タイル更新の設定(30分おきに更新します)
            PeriodicUpdateRecurrence recurrence = PeriodicUpdateRecurrence.HalfHour;
            TileUpdateManager.CreateTileUpdaterForApplication().EnableNotificationQueue(true);

            TileUpdateManager.CreateTileUpdaterForApplication().Clear();

            // ローカルにある画像ファイルをタイル更新に利用します。
            //TileUpdateManager.CreateTileUpdaterForApplication().StartPeriodicUpdate(new Uri("http://coelacanth.heteml.jp/win8/tilesample/titleUpdateLocalImage.html"), recurrence);

            // サーバーにある画像ファイルをタイル更新に利用します。
            TileUpdateManager.CreateTileUpdaterForApplication().StartPeriodicUpdate(new Uri("http://coelacanth.heteml.jp/win8/tilesample/titleUpdateRemoteImage.html"), recurrence);

            #endregion

 

 PeriodicUpdateRecurrenceに実行間隔を指定(最短で30分)して、TileUpdateManager.CreateTileUpdaterForApplication().StartPeriodicUpdateで更新を開始します。

 

アプリ内の画像でタイルを更新する

 

 上記コードでコメントアウトされた部分、

 

          // ローカルにある画像ファイルをタイル更新に利用します。
            //TileUpdateManager.CreateTileUpdaterForApplication().StartPeriodicUpdate(new Uri("http://coelacanth.heteml.jp/win8/tilesample/titleUpdateLocalImage.html"), recurrence);

 

 のtitleUpdateLocalImage.htmlではタイル画像を以下のように指定しています。

 

ms-appx:///Assets/hero.jpg

 

 これはアプリ内の画像を指定しており、アプリケーションで以下の画像のようにhero.jpgが配置されていることを想定しています。

 

 このようにサーバーを利用したタイル更新でもアプリ内の画像を指定することができます。

 

ロゴの表示について

 

 サンプルではライブタイルの左下にはアプリ名が表示されています。

 (Package.appxmanifestで短い名前を指定している場合その名前が表示されます)

 

 サーバー側のXMLの指定で、

 

 

visual branding="name"

 

 が指定されているからです。これをロゴ(30×30でPackage.appxmanifestに指定したもの)に変更するにはbranding値をnameからlogoに変更します。

 

visual branding="logo"

 


Please give us your valuable comment

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

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