タイルとバッジ

Applies to Windows and Windows Phone

iOS アプリではバッジを使ってアイコンを更新できますが、Windows ストア アプリではライブ タイルを使ってそれ以外の操作も実行できます。

次の動画は iOS アプリのアイコンと Windows ストア アプリのライブ タイルを比較します。

多くの iOS アプリでは、アプリ アイコンでバッジの数値を使って要約や動的な状態情報を表示して、ユーザーがアプリを起動せずに情報を簡単に確認できるようにしています。 iOS では、メール アプリの未読メールの数、ソーシャル メディア アプリの投稿の数、処理されていない To Do タスクなど、異なる数値を 4 つまで表示できます。 アイコンのバッジの数値は、多くの場合、プッシュ通知に応答して更新されますが、ローカル通知またはプログラムを使って更新することもできます。

Windows 8 では、スタート画面のタイルがアプリを表します。タイルには staticlive があります。

  • static タイルには、常に、アプリのマニフェストで定義された既定のコンテンツが表示されます。
  • live タイルは、プログラムを使って更新し、ひとめでわかる最新の情報を表示するために使います。ライブ タイルでは、アプリを起動することなく、ユーザーにとって興味深い情報を豊富に提供できます。iOS のバッジと同じように、ライブ タイルは、プッシュ通知やローカル通知に応答して更新することや、プログラムを使って更新することができます。

Windows ストア アプリのライブ タイル

Windows ストア アプリでは、既定のタイルをアプリのマニフェスト ファイル (Package.appxmanifest) で定義します。開発者は、アプリのロゴや名前を表示することや、いずれも表示しないようにすることができます。 「クイック スタート: Microsoft Visual Studio マニフェスト エディターを使用した既定のタイルの作成」をご覧ください。 アプリをインストールした後は、実行時に通知を使ってタイル コンテンツを更新できます。 「クイック スタート: タイルの更新の送信」をご覧ください。

Windows ストア アプリのタイルはさまざまなサイズで表示できます。既定では、必須の正方形タイルだけを使います。 アプリにさまざまなサイズのタイルのサポートが含まれている場合、ユーザーはいつでもライブ タイルの形式を変更できます。ライブ タイルについて詳しくは、「タイルとバッジのガイドラインとチェック リスト」をご覧ください。

Windows 8 ライブ タイル

iOS アプリのバッジの数値と Windows ストア アプリのライブ タイルの比較

バッジの数値を使って、iOS アプリのアイコンに動的な情報を表示したことがあれば、ライブ タイルではそれ以上の操作ができることがわかると思います。

次の表には、アプリのアイコンまたはアプリのタイルを定義し、それをバッジなどのコンテンツを使って更新するために必要なさまざまな手順を示しています。

手順iOSWindows 8
アプリのアイコンまたはタイルを作成する。アプリ バンドルにアイコンを 1 つ以上追加します。info.plist ファイルに CFBundleIconFiles アイコン ファイル キーを使ったアイコン ファイルを定義します。Visual Studio のアプリケーション マニフェスト ファイルの [アプリケーション UI] ウィンドウでアイコン ファイルを設定します。 「クイック スタート: Microsoft Visual Studio マニフェスト エディターを使用した既定のタイルの作成」をご覧ください。
アプリケーション名を定義する。info.plist ファイルで CFBundleDisplayName (バンドルの表示名) キーの値を設定します。Visual Studio のアプリケーション マニフェスト ファイルの [アプリケーション UI] ウィンドウでアプリの短い名前を設定します。 「クイック スタート: Microsoft Visual Studio マニフェスト エディターを使用した既定のタイルの作成」をご覧ください。
アプリのアイコン/タイルのバッジを更新する。現在の UIApplication クラスの applicationIconBadgeNumber プロパティを設定します。BadgeUpdateManager クラスを使って、バッジ テンプレートの XML を取得します。Badge 要素の値にグリフの値を設定し、BadgeUpdateManager クラスを使って Badge 要素を更新します。 「クイック スタート: バッジの更新の送信」をご覧ください。
アイコン/タイル画像を変更する。該当なし。TileUpdateManager クラスを使って、タイル テンプレートを表す XML ドキュメントを取得します。テンプレートの image 要素の値に新しい画像を設定します。新しい TileNotification を作成し、TileUpdateManager を使って通知を更新します。 「クイック スタート: タイルの更新の送信」をご覧ください。
タイルの通知メッセージを変更する。該当なし。TileUpdateManager クラスを使って、タイル テンプレートを表す XML ドキュメントを取得します。テンプレートの text 要素の値に新しいメッセージを設定します。新しい TileNotification を作成し、TileUpdateManager を使って通知を更新します。

 

サンプル アプリ

アプリを作成します。

このサンプルでは、C# の "新しいアプリケーション" テンプレートを使って、アプリを作成します。

  • Microsoft Visual Studio を起動します。
  • [ファイル] メニューの [新しいプロジェクト] をクリックします。
  • [Windows ストア] が選択されていない場合は、[インストール済み]、[テンプレート]、[Visual C#] の順に展開し、[Windows ストア] をクリックします。
  • [新しいアプリケーション (XAML)] が選択されていない場合は、それをクリックします。
  • [名前] ボックスと [場所] ボックスに、アプリの名前 (「AppTile」など) と場所を入力するか、既定値のままにします。
  • [OK] をクリックします。

アプリの既定のタイルを定義します。

  • 150 × 150 ピクセル (logo.png) と 30 × 30 ピクセル (logo_small.png) の 2 つの画像を用意します。
  • Visual Studio のソリューション エクスプローラー ウィンドウで、両方の画像を Assets ディレクトリにドラッグします。
  • ソリューション エクスプローラー ウィンドウで、Package.appmanifest ファイルをダブルクリックして開きます。
  • [アプリケーション UI] タブで、[ロゴ] ボックスに「Assets\logo.png」と入力し、[小さいロゴ] ボックスに「Assets\logo_small.png」と入力します。
  • [短い名前] ボックスに「Garden Flowers」などと入力します。
  • [デバッグ]、[デバッグ開始] の順にクリックして、アプリを実行します。

    動作しているライブ タイル

タイルのバッジを更新します。

  • [デバッグ]、[デバッグの停止] の順にクリックして、アプリを停止します。
  • Visual Studio で、MainPage.xaml ファイルの開始タグ <GridViewGrid.Row="0" Grid.Column="0" …> と終了タグ </GridView> の間に次の XAML コードを追加します。
    
    
                <TextBlock HorizontalAlignment="Left" Margin="256,219,0,0" TextWrapping="Wrap"                        
    Text="This a simple app that shows you how to use Live Tile in Windows 8. Click below to update the tile." FontSize="30" VerticalAlignment="Top" Height="201" Width="851" />
                <Button Content="Update the tile" HorizontalAlignment="Left" Margin="256,425,0,0" VerticalAlignment="Top" Height="59" Width="194" FontSize="24" Click="UpdateTile_Click"/>
                <Button Content="Update the badge" HorizontalAlignment="Left" Margin="523,425,0,0" VerticalAlignment="Top" Height="59" Width="245" FontSize="24" Click="UpdateBadge_Click"/>
    
    
    
    

    Visual Studio で、MainPage.xaml.csMainPage クラスに次のコードを追加します。

    
           private void UpdateBadge_Click(object sender, RoutedEventArgs e)
            {
                XmlDocument badgeXml = BadgeUpdateManager.GetTemplateContent(BadgeTemplateType.BadgeNumber);
                //Assign a value to badge
                XmlElement badgeElement = (XmlElement)badgeXml.SelectSingleNode("/badge");
                badgeElement.SetAttribute("value", "1");
                // Create the badge notification and send it to the badge.
                BadgeNotification badge = new BadgeNotification(badgeXml);
                BadgeUpdateManager.CreateBadgeUpdaterForApplication().Update(badge);
            }
    private void UpdateTile_Click(object sender, RoutedEventArgs e)
            {
            }
    
    
    

    ファイルの先頭に次のコードを追加します。

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

    [デバッグ]、[デバッグ開始] の順にクリックして、もう一度アプリを実行します。アプリの [Update the badge] ボタンをクリックします。

    動作しているライブ タイル

    スタート画面に移動し、タイルの更新されたバッジの数値 (1) を確認します。

    動作しているライブ タイル

4. タイル画像と通知メッセージを変更します。

  • [デバッグ]、[デバッグの停止] の順にクリックして、アプリを停止します。
  • ソリューション エクスプローラーで、別の 150 x 150 ピクセルの画像 (Strelitzia.png) を Assets フォルダーにドラッグします。
  • Visual Studio で、MainPage.xaml.cs ファイルの UpdateTile_Click メソッドを次のコードに置き換えます。
    
            private void UpdateLiveTile()
            {
                //Template for tile and retrieve its XML contents
                XmlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquarePeekImageAndText03);
                XmlNodeList tileTextAttributes = tileXml.GetElementsByTagName("text");
                tileTextAttributes[0].InnerText = "Strelitzia";
                tileTextAttributes[1].InnerText = "growing";
                tileTextAttributes[2].InnerText = "in my garden";
                //Add an image for notification
                XmlNodeList tileImageAttributes = tileXml.GetElementsByTagName("image");
                ((XmlElement)tileImageAttributes[0]).SetAttribute("src", "Assets\\Strelitzia.png");
                ((XmlElement)tileImageAttributes[0]).SetAttribute("alt", "Strelitzia");
                //Create the notification based on the XML content 
                TileNotification tileNotification = new TileNotification(tileXml);
                // Send the notification to the app tile
                TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);
            }
    
    
    

    タイルには "TileSquarePeekImageAndText03" テンプレートを使います。アプリと、ユーザーに表示する状態の種類に応じて、さまざまなテンプレートを選ぶことができます (「タイル テンプレート カタログ」をご覧ください)。 このテンプレートは、テキストを含まない画像と、上下にスクロールする 4 行のテキストを含む正方形タイルで構成されています。

    上に示したように、テンプレートの XML からテキスト要素を取得し、3 行を使ってその値を設定します。さらに、タイル テンプレートの XML から image 要素を取得し、src 属性を Assets\Strelitzia.png に設定します。同じように、alt 属性を Strelitzia に設定します。

    次に、新しい TileNotification オブジェクトを作成し、TileUpdateManager クラスを使ってタイルを更新します。 さらに、次に示すように、MainPage.xaml.cs ファイルの MainPage コンストラクターに 2 行追加します。

    
            public MainPage()
            {
                this.InitializeComponent();
                BadgeUpdateManager.CreateBadgeUpdaterForApplication().Clear();
                TileUpdateManager.CreateTileUpdaterForApplication().Clear();
            }
    
    
    

    この 2 行では、アプリを再実行したときにバッジと通知を消去します。

    [デバッグ]、[デバッグ開始] の順にクリックして、もう一度アプリを実行します。アプリの [Update the tile] ボタンをクリックします。

    スタート画面に移動し、タイルが更新されたことを確認します。

    動作しているライブ タイル

    最初の画像は、ストレリチアの新しい画像、ロゴ、バッジの数値を含む更新されたタイルを示しています。2 つ目の画像は、数秒後のタイルを示しており、プレビューのメッセージ、ロゴ、バッジの数値が表示されています。

関連トピック

iOS 開発者のためのトピック
iOS 開発者向けリソース
iOS 開発者のための Windows 8 のコントロール
iOS 開発者のための Windows 8 のクックブック
タイルとバッジのトピック
タイル、バッジ、通知
タイル テンプレート カタログ
クイック スタート: タイルの更新の送信
タイルとバッジのガイドラインとチェック リスト
クイック スタート: バッジの更新の送信

 

 

表示:
© 2014 Microsoft