[Windowsストアアプリ開発]スタートスクリーンに表示されるタイルをライブタイルにする

目次に移動

Windows8のスタートスクリーンに表示されるWindowsストアアプリのタイルをライブタイルにする方法を調べました。

テンプレートを選ぶ

アプリのタイルをライブタイルにするには、まず最初にテンプレートを選択します。 ライブタイルのレイアウトはテンプレートによって決められており、決まった場所にのみ文字列や画像ファイルを設定することができます。 テンプレートの種類は以下のサイトをご覧ください。 タイル テンプレート カタログ

今回は TileSquareText03 というテンプレートを使うことにします。 テンプレートはXMLファイルになっており、DOMを使って要素を検索し更新します。 以下が TileSquareText03 のXMLの例ですが、Text Field 1〜4に文字列を代入します。 4行表示できますが自動で改行してくれないので、あまり長い文字列を設定しないでください。

<tile>
  <visual>
    <binding template="TileSquareText03">
      <text id="1">Text 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>

実装する

それではアプリ起動時にライブタイルを更新する簡単なサンプルを作ってみます。 新しいプロジェクトを作成してMain.xaml.cs の OnNavigatedTo メソッドにライブタイルを更新する処理を入れます。 まずは以下の名前空間をusingディレクティブに追加してください。

using Windows.UI.Notifications;
using Windows.Data.Xml.Dom;

次に以下のソースコードのように実装してみて下さい。 TileUpdateManagerクラスのGetTemplateContentメソッドの引数にテンプレートの種類を指定します。 テンプレートのXMLオブジェクトが戻されますので、DOMを使って編集後、TileUpdaterクラスのUpdateメソッドで更新します。

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
    }
    
    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
        TileUpdate();
    }

    private void TileUpdate()
    {
        XmlDocument template = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquareText03);
        XmlNodeList nodeList = template.GetElementsByTagName("text");
        nodeList[0].InnerText = "ライブタイル";
        nodeList[1].InnerText = "サンプル";

        TileUpdater updater = TileUpdateManager.CreateTileUpdaterForApplication();
        updater.Update(new TileNotification(template));
    }
}

実装できたので、動かしてみましょう。ライブタイルはシミュレーターでは確認できないので、ローカル環境で実行してみてください。 TileUpdateManager、TileUpdater などのクラスを使ってアプリケーション内でライブタイルを更新しますので、最低１回はアプリを起動する必要があります。 実行後、スタートスクリーンを見ると、アプリのタイルに設定した情報が表示されていると思います。

定期的に更新する

ライブタイルのサンプルはできましたが、更新されるのは起動時のみなので面白くありません。 次はアプリが停止中でも定期的に更新するライブタイルを実装してみましょう。

定期的にタイルを更新するにはまずWebサーバが必要になります。 受信するデータはテンプレート同様の形式のXMLファイルでなくてはいけません。 私は以下のような日付と時間を返すPHPファイルを作成して試しました。

<tile>
  <visual>
    <binding template="TileSquareText03">
      <text id="1"><?php echo date("Y/m/d"); ?></text>
      <text id="2"><?php echo date("G:i"); ?></text>
    </binding>  
  </visual>
</tile>

次にプログラムを修正します。TileUpdateメソッド以外は先ほどと同じなので省略します。今度はテンプレートを使わないので、DOMを使った処理はありません。 先ほどは更新時にTileUpdaterクラスのUpdateメソッドを使いましたが、代わりにStartPeriodicUpdateというメソッドを使っています。 このメソッドは第1引数が接続先、第2引数が間隔です。ここでは30分間隔にしています。 他に指定できる間隔は1時間、6時間、12時間、1日などになります。

private void TileUpdate()
{
    TileUpdater updater = TileUpdateManager.CreateTileUpdaterForApplication();
    updater.StartPeriodicUpdate(new Uri("http://localhost/sample.php"), PeriodicUpdateRecurrence.HalfHour);
}

実装できたので1度実行してから、アプリをシャットダウン後、ちょっと時間を置いてみてみます。 起動直後

2回目の更新

なぜか2回目の更新が12分後でしたが3回目は0:02、4回目は0:32だったので間隔はピッタリ30分でした。

目次に移動