XAML / C＃でのWindows 8.1アプリケーションの開発。 パート2.タイルを操作する

前回の記事で作成したアプリケーションを引き続きアップグレードします。



今日は、Windows 8.1アプリケーション用にタイル（タイル）を作成する方法と、コンテンツの動的な変更を実装する方法について説明します。



タイルは、ウィンドウ8またはウィンドウ8.1のメイン画面に表示されるものです。 これらは単なるアイコンではありません。 インタラクティブです。 アプリケーションのコンテンツの変更に関するテキストおよびグラフィック情報が含まれ、ユーザーの注意を引き付け、アプリケーションの使用をより頻繁に刺激します。







なぜタイルがとても重要なのですか？ タイルはアプリケーションへの扉であり、ユーザーが気に入るべきであり、ユーザーを困らせる必要はありません。 それ以外の場合、彼はスタート画面からピンを外し、すぐにアプリケーションを忘れます。



次のタイプのタイルをアプリケーションに使用できます。

• 大きなタイル（310 x 310ピクセル）;
• 中タイル（310 x 150ピクセル）;
• 中タイル（150 x 150ピクセル）;
• 小さなタイル（30 x 30ピクセル）。

それらはすべて下の図に示されています。







既製のタイルオプションを見つけて、それらの情報をタイルテンプレートカタログに配置できます。

アプリケーションのタイルをカスタマイズする

デフォルト設定を使用して、単純なタイルを作成します。



1. 前の記事のアプリケーションを開くか、Visual Studio 2013で新しいWindows 8.1アプリケーションを作成します。

2. package.appxmanifestをダブルクリックします。 マニフェストエディターウィンドウが開きます。

3.タイル情報を指定します。

• マニフェストエディターで[ ビジュアルアセット ]タブを選択します。
• 画像へのパスにあるデフォルトの画像を置き換えます。
• タイルにアプリケーションの短い名前を表示するかどうかを指定します。
• 背景色に応じて、タイトルテキストに明るいフォントまたは暗いフォントを選択します。
• デフォルトの背景色を受け入れるか、独自の色文字列を指定します。

4.アプリケーションを起動し、タイルを試します。







ご覧のとおり、タイルは機能し、準備された画像を表示します。



次に、インタラクティブ機能を追加し、タイルのコンテンツを動的に更新する方法を学習します。

タイル情報を更新する

タイルの更新情報を実装するには、いくつかの方法があります。

• ローカル更新 -アプリケーション自体の間にタイルを直接更新します。
• 設定時間 -指定した時間にタイルを更新します。
• 定期的に -外部コンテンツをポーリングして新しいコンテンツを取得することにより、スケジュールに従ってタイルを更新します。
• プッシュ通知の使用 -外部サービスまたはシステムからアプリケーションに通知を送信してタイルを更新します。

アプリケーションのタスクと要件に応じて、これらのオプションのいずれかを選択するか、それらを組み合わせて使用​​できます。



次に、各オプションについてさらに詳しく検討します。

ローカルタイルの更新

アプリケーションから直接タイルの更新を実装するには、製品カタログの[購入]ボタンをクリックしてイベントハンドラーを追加します。 ボタンをクリックすると、選択した製品に関する情報でアプリケーションタイルが更新されます。



1.前の記事のアプリケーションを開きます。

2. ソリューションエクスプローラーで 、 HubPage.xamlファイルを開き、 [購入]ボタンのClickイベントハンドラーと、注文した製品の識別子を持つパラメーターを追加します。







3. HubPage.xaml.csファイルに空のイベントハンドラーが自動的に生成されました。 そこに次のコードを書きましょう：

private void Button_Click(object sender, RoutedEventArgs e) { string TileXmlString = "<tile>" + "<visual version='2'>" + "<binding template='TileSquare150x150Text04' fallback='TileSquareText04'>" + "<text id='1'>{0}</text>" + "</binding>" + "<binding template='TileWide310x150Text03' fallback='TileWideText03'>" + "<text id='1'>{0}</text>" + "</binding>" + "<binding template='TileSquare310x310Text09'>" + "<text id='1'>{0}</text>" + "</binding>" + "</visual>" + "</tile>"; var group = (SampleDataGroup)this.DefaultViewModel["Group1Items"]; if (group != null && group.Items.Count > 0) { IEnumerable<SampleDataItem> dataItems = group.Items.Where(item => item.UniqueId == ((Button)sender).CommandParameter); if (dataItems != null && dataItems.Count() > 0) { XmlDocument tileDOM = new XmlDocument(); tileDOM.LoadXml(string.Format(TileXmlString, " : " + dataItems.FirstOrDefault().Title)); TileNotification tile = new TileNotification(tileDOM); TileUpdateManager.CreateTileUpdaterForApplication().Update(tile); } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

新しいタイルがどのような種類で、何が書き込まれるのかを示すために、カタログ内の標準タイルテンプレートの1つから取得したxmlを使用しました。



TileNotificationクラス-タイルを更新するためのメッセージオブジェクトを作成します。



更新自体は、 TileUpdateManager.CreateTileUpdaterForApplication（）。Update（タイル）を呼び出すことによって実行されます。



4.これで、アプリケーションを起動し、「購入」ボタンをクリックして、タイル上で選択した製品に関する情報を見つけることができます。

特定の時間にタイルを更新

タイルをすぐに変更するのではなく、しばらくしてから変更することができます。

たとえば、イベントの3時間後に変更することができます。 これを行うには、最後の行の代わりに次のコードを追加して、 Button_Clickイベントハンドラーを変更できます。

 Int16 dueTimeInHours = 3; DateTime dueTime = DateTime.Now.AddHours(dueTimeInHours); ScheduledTileNotification scheduledTile = new ScheduledTileNotification(tileXml, dueTime); scheduledTile.Id = "Future_Tile"; TileUpdateManager.createTileUpdaterForApplication().AddToSchedule(scheduledTile);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

定期的なタイル更新

定期的な更新は、タイルの更新を多数のユーザーに配信するための優れた方法です。 このメソッドの実装はもう少し難しく、タイルを作成してクライアントWindowsアプリケーションに転送するロジックを実装するインターネット上のWebサービスが必要です。 Webサービスは、 特殊な形式でXMLコンテンツを返す必要があります。



次に、タイルを更新するための情報を提供するREST WCFサービスを作成します。



Webサービスの作成：



1. ソリューションエクスプローラーを開き、 ソリューションのコンテキストメニューで[ 新しいプロジェクトの追加 ]を選択します。

2.プロジェクトテンプレートとしてWCFサービスアプリケーションを選択し、名前を付けます。







3.その結果、インターフェイスとWebサービスクラス自体を含むWebサービスプロジェクトが作成されました。

4. Service1.csファイルを開き、インターフェイスコードを置き換えます。

  [ServiceContract] public interface IService1 { [WebGet(UriTemplate = "/Tile")] [OperationContract] XElement GetTile(); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

5. Service1.svcファイルの名前をTileService.svcに変更し、そのコードを置き換えます。

  public class TileService : IService1 { private const string TileXmlString = "<tile>" + "<visual version='2'>" + "<binding template='TileSquare150x150Text04' fallback='TileSquareText04'>" + "<text id='1'>{0}</text>" + "</binding>" + "<binding template='TileWide310x150Text03' fallback='TileWideText03'>" + "<text id='1'>{0}</text>" + "</binding>" + "<binding template='TileSquare310x310Text09'>" + "<text id='1'>{0}</text>" + "</binding>" + "</visual>" + "</tile>"; public XElement GetTile() { string xml = string.Format(TileXmlString, "    " ); return XElement.Parse(xml); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このコードを使用して、タイルで理解できる形式でxmlを生成します。



4. Webサービスプロジェクトを実行し、メソッドを呼び出します。 Webサービスはxmlを処理して返す必要があります。



WindowsアプリケーションでWebサービス呼び出しを設定する：



1. ソリューションエクスプローラーで Package.appxmanifestを開き、タイル更新設定を指定します。

• Webサービスのアドレス。
• サービスにアクセスする間隔。

2.これで、アプリケーションを起動し、30分待って、タイルの変更を確認できます。







Webサービスを呼び出して、タイルをプログラムで更新することもできます。

このコードは、30分ごとにWebサービスからタイルを定期的に更新するタスクを作成または更新します。

 var tileupdater = TileUpdateManager.CreateTileUpdaterForApplication(); tileupdater.StartPeriodicUpdate(new Uri("http://localhost:32298/TileService.svc/Tile"), PeriodicUpdateRecurrence.HalfHour);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

注意：メイン画面からタイルを削除しても、タスクは実行されます。 ほとんどの場合、いくつかのイベントのタイルを更新するタスクを削除する必要があります。そのためには、次のコードを実行する必要があります。

 var tileupdater = TileUpdateManager.CreateTileUpdaterForApplication(); tileupdater.StopPeriodicUpdate();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

プッシュ通知を使用してタイルを更新する

プッシュ通知-リアルタイムのタイル更新に最適です。 たとえば、ストア内の注文のステータスが変更されたり、ソーシャルネットワークに新しいメッセージが表示されたりします。

プッシュ通知には、通知のフローを管理し、 Windowsプッシュ通知サービス（WNS）を使用してユーザーのクライアントアプリケーションに配信する外部サービスが必要です。



Windows Azureモバイルサービスを使用して、プッシュ通知を作成および管理します。 Windows Azureの無料試用月間を利用できます。



Visual Studioを離れることなく、Windowsアプリケーション用にWindows Azureモバイルサービスを構成できます。



1. ソリューションエクスプローラーを開きます。 プロジェクトのコンテキストメニューで、[ 通知の 追加 / プッシュ ]を選択します。







2.開いたウィザードに入力します。 このプロセスでは、既存のWindowsストア開発者アカウントを使用するか、新しいWindowsストア開発者アカウントを作成する必要があります。







3.ウィザードの最後に、モバイルサービスがWindows Azureに作成されます。 少し後で彼女に戻ります。







4.プロジェクトに何が起こったかに注意してください。

push.register.csクラスがプロジェクトに追加され、モバイルサービスとの対話を提供します。







5. App.xaml.csファイルのアプリケーション起動イベントで、変更も行われました。

そこで、プッシュ通知チャネルが初期化されます。

 public static Microsoft.WindowsAzure.MobileServices.MobileServiceClient nokiaproductsClient = new Microsoft.WindowsAzure.MobileServices.MobileServiceClient( "https://nokiaproducts.azure-mobile.net/", "LKcaeBgDWQTEJFiifTiRzhZBdfIkLM35"); //… protected override async void OnLaunched(LaunchActivatedEventArgs e) { //… eShop.nokiaproductsPush.UploadChannel(); //… }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

6.ここで、モバイルサービスに通知してアプリケーションに通知を送信する必要があります。

7.これを行うには、Windows Azureコントロールパネル （https://manage.windowsazure.com/）、[モバイルサービス]の順に移動し、モバイルサービスを選択し、[ データ ]タブに移動して、使用可能なデータ転送チャネルを選択します。







8.開いたページで、[ スクリプト ]タブをクリックします。

9. JavaScriptファイルが開き、そこでコードを記述して通知を生成できます。







10.ファイルを編集して、コードを次のコードに置き換えます。

 function insert(item, user, request) { request.execute({ success: function() { request.respond(); sendNotifications(); } }); function sendNotifications() { var channelsTable = tables.getTable('channels'); channelsTable.read({ success: function(devices) { devices.forEach(function(device) { push.wns.sendTileWideText04(device.channelUri, { text1: '  ' }, { success: function(pushResponse) { console.log("Sent tile:", pushResponse); } }); }); } }); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

11.スクリプトを保存します。







12. Visual Studioに戻り、アプリケーションを実行します。







タイルは、スクリプトで指定されたものに即座に変わります。



そこで、Windowsアプリケーション用に動的に更新されるタイルをさまざまな方法で実装する方法を学びました。 今後の記事では、簡単な例を使用してWindows 8.1アプリケーションの開発を引き続き理解していきます。



結果のアプリケーションは、SkyDriveのリンク（ http://sdrv.ms/1gKm4IJ）からダウンロードできます。

便利な資料

タイルを作成する

既製のタイルパターンのカタログ

通知配信方法を選択してください

定期通知の概要

プッシュ通知の概要