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

ローカル更新の概要

 

　本記事ではライブタイルの更新方法の一つローカル更新について紹介します。

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

 

　タイルのローカル更新はライブタイルを作成する方法としては最もシンプルな方法です。

　ユーザーがアプリを起動した際にアプリからタイル更新の行います。

 

(ローカル更新のポイント)

・実行はアプリ起動時(実行時にタイルが更新される)

・サーバーとの通信は行わない

 

更新するタイルのテンプレートを選ぶ

 

　タイルの更新はいくつからのテンプレートから選択して更新内容を決めます。

　(参考:タイル テンプレートの選択)

 

　タイルは150×150の正方形と、310×150の長方形の2種類があり、それぞれのテンプレートを選ぶことになります。

　たとえば、正方形のタイルのテンプレートにTileSquarePeekImageAndText01を選択した場合XMLの定義は以下のようになります。

 

<tile>
  <visual>
    <binding template="TileSquarePeekImageAndText01">
      <image id="1" src="image1" alt="alt text"/>
      <text id="1">Text Header Field 1</text>
      <text id="2">Text Field 2</text>
      <text id="3">Text Field 3</text>
      <text id="4">Text Field 4</text>
    </binding>  
  </visual>
</tile>

 

更新処理(ライブラリを使わない場合)

 

　それではプログラム処理を記述していきましょう。

　タイルの更新は後述するNotificationsExtensionsを使うのが便利ですが、まずはライブラリを使わない方法を紹介します。

　まずはテンプレートを取得します。

 

            XmlDocument squareTileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquarePeekImageAndText01);

 

　　続いてテンプレートに画像や文字を指定していきます。

 

            XmlNodeList tileImageAttributes = squareTileXml.GetElementsByTagName("image");
            ((XmlElement)tileImageAttributes[0]).SetAttribute("src", "http://i.msdn.microsoft.com/dynimg/IC612767.png");
            ((XmlElement)tileImageAttributes[0]).SetAttribute("alt", "正方形タイル");

            XmlNodeList squareTileTextAttributes = squareTileXml.GetElementsByTagName("text");
            squareTileTextAttributes[0].AppendChild(squareTileXml.CreateTextNode("タイトル"));
            squareTileTextAttributes[1].AppendChild(squareTileXml.CreateTextNode("1行目のテキスト"));
            squareTileTextAttributes[2].AppendChild(squareTileXml.CreateTextNode("2行目のテキスト"));
            squareTileTextAttributes[3].AppendChild(squareTileXml.CreateTextNode("3行目のテキスト"));

 

　最後にテンプレートで設定したタイルを登録します。

 

            TileNotification tileNotification = new TileNotification(squareTileXml);
            TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);

 

　実行後、アプリケーションの正方形タイルを見ると動作が確認できます。

 

　長方形のタイルが表示されている場合はタイル上でマウスを右クリックないし、タッチ操作でタイルを下にゆっくりスライドすることでアプリバーを表示できます。

　アプリバーからタイルを正方形表示に変更することができます。

 

更新処理(NotificationsExtensions)

 

　NotificationsExtensionsを利用すると先ほど紹介したテンプレートのXML記述部分などが簡略化できます。

　NotificationsExtensionsはNuGetから追加できます(NuGetはライブラリなどのパッケージを管理するツールです。VS2012からは標準でVisualStudioに追加されました)。

 

　インストールすることで自動で参照にも追加されます。

 

  NotificationsExtensionsを利用するとコードは以下のように書き換えられます。

 

            var content = NotificationsExtensions.TileContent.TileContentFactory.CreateTileSquarePeekImageAndText01();
            
            content.Image.Src = "http://i.msdn.microsoft.com/dynimg/IC612767.png";

            content.TextHeading.Text = "タイトル";
            content.TextBody1.Text = "1行目";
            content.TextBody2.Text = "2行目";
            content.TextBody3.Text = "3行目";

            TileNotification tileNotification = content.CreateNotification();
            TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);

 

 　かなりシンプルな記述になりますね。

　(以降の説明ではNotificationsExtensionsを利用したコードを紹介します。)

 

　(参考：クイックスタート: コードでの NotificationsExtensions ライブラリの使用)

 

複数のキューを登録する

 

　タイルに複数のタイルを登録することができます。

　基本的に一つのタイルを登録する手順を繰り返すだけですが、最初にタイルのキュー登録を可能にする一つだけできます。

 

            TileUpdateManager.CreateTileUpdaterForApplication().EnableNotificationQueue(true);

 

　同時に登録できるキューは最大5つです。

　(後述しますが、同時に正方形、長方形のタイルを指定することができ、それぞれの最大が5つです。)

 

　タイルのキューをすべて削除する場合配下のコードを実行します。

 

TileUpdateManager.CreateTileUpdaterForApplication().Clear();

 

　キューにタイル更新を登録するコードは以下、

 

            TileUpdateManager.CreateTileUpdaterForApplication().EnableNotificationQueue(true);

            var content = NotificationsExtensions.TileContent.TileContentFactory.CreateTileSquarePeekImageAndText01();
            
            content.Image.Src = "http://i.msdn.microsoft.com/dynimg/IC612767.png";

            content.TextHeading.Text = "タイトル";
            content.TextBody1.Text = "1行目";
            content.TextBody2.Text = "2行目";
            content.TextBody3.Text = "3行目";

            TileNotification tileNotification = content.CreateNotification();
            TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);

            content = NotificationsExtensions.TileContent.TileContentFactory.CreateTileSquarePeekImageAndText01();

            content.Image.Src = "https://si0.twimg.com/profile_images/2508237913/rctgk6cpgea29ejboclt.png";

            content.TextHeading.Text = "タイトル";
            content.TextBody1.Text = "1行目2";
            content.TextBody2.Text = "2行目2";
            content.TextBody3.Text = "3行目2";

            tileNotification = content.CreateNotification();
            TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);

            content = NotificationsExtensions.TileContent.TileContentFactory.CreateTileSquarePeekImageAndText01();

            content.Image.Src = "https://si0.twimg.com/profile_images/2508237913/rctgk6cpgea29ejboclt.png";

            content.TextHeading.Text = "タイトル";
            content.TextBody1.Text = "1行目3";
            content.TextBody2.Text = "2行目3";
            content.TextBody3.Text = "3行目3";

            tileNotification = content.CreateNotification();
            TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);

            content = NotificationsExtensions.TileContent.TileContentFactory.CreateTileSquarePeekImageAndText01();

            content.Image.Src = "https://si0.twimg.com/profile_images/2508237913/rctgk6cpgea29ejboclt.png";

            content.TextHeading.Text = "タイトル";
            content.TextBody1.Text = "1行目4";
            content.TextBody2.Text = "2行目4";
            content.TextBody3.Text = "3行目4";

            tileNotification = content.CreateNotification();
            TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);

            content = NotificationsExtensions.TileContent.TileContentFactory.CreateTileSquarePeekImageAndText01();

            content.Image.Src = "https://si0.twimg.com/profile_images/2508237913/rctgk6cpgea29ejboclt.png";

            content.TextHeading.Text = "タイトル";
            content.TextBody1.Text = "1行目5";
            content.TextBody2.Text = "2行目5";
            content.TextBody3.Text = "3行目5";

            tileNotification = content.CreateNotification();
            TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);

 

正方形と長方形のタイルを同時に指定する

 

　タイルの指定は同時に正方形と長方形のタイルに対して行うことができます。

　長方形(ワイド)のタイルを指定し、そのプロパティに正方形のタイルを指定します。

　コードは以下、

 

            var wideContent = NotificationsExtensions.TileContent.TileContentFactory.CreateTileWideImageAndText01();
            wideContent.Image.Src = "http://i.msdn.microsoft.com/dynimg/IC612767.png";
            wideContent.TextCaptionWrap.Text = "ワイド";

            var content = NotificationsExtensions.TileContent.TileContentFactory.CreateTileSquarePeekImageAndText01();
            
            content.Image.Src = "http://i.msdn.microsoft.com/dynimg/IC612767.png";

            content.TextHeading.Text = "タイトル";
            content.TextBody1.Text = "1行目";
            content.TextBody2.Text = "2行目";
            content.TextBody3.Text = "3行目";

            wideContent.SquareContent = content;

            TileNotification tileNotification = wideContent.CreateNotification();
            TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);

 

　以上でローカル更新の紹介は終わりです。