特別なタイルテンプレート

[アーティクル]
06/02/2023

特別なタイルテンプレートは、アニメーション化や、アダプティブタイルでは不可能な機能を実行できる独特なテンプレートです。特別なタイルテンプレートは、それぞれ Windows 10 用に特別に構築されたテンプレートです。ただし、アイコンタイルテンプレートは、特別に構築されたテンプレートではなく、従来の特別なテンプレートが Windows 10 向けに更新されたものです。この記事では、3 つの特別なタイルテンプレートである、アイコンタイルテンプレート、フォトタイルテンプレート、および People タイルテンプレートについて取り上げています。

アイコンタイルテンプレート

アイコンテンプレート ("IconWithBadge" テンプレートとも呼ばれます) を使うと、タイルの中央に小さい画像を表示できます。 Windows 10 では、電話とタブレット/デスクトップの両方でテンプレートがサポートされています

小サイズと普通サイズのメールタイル

アイコンタイルを作成する方法

次の手順では、Windows 10 のアイコンタイルを作成するために必要なすべての情報について説明します。大まかに言うと、まずアイコンの画像アセットを用意する必要があります。次に、アイコンテンプレートを使って通知をタイルに送信し、最後に、タイルに表示される番号を指定するバッジ通知を送信します。

アイコンタイルの開発フロー

手順 1: 画像アセットを PNG 形式で作成する

タイルのアイコンアセットを作成し、他のアセットと共にプロジェクトリソースに配置します。 200 x 200 ピクセル以上のアイコンを作成してください。これは最小サイズで、電話やデスクトップ上の小サイズと普通サイズのタイルのどちらにも使うことができます。最適なユーザーエクスペリエンスを実現するには、各サイズのアイコンを作成します。これらのアセットにはパディングは必要ありません。サイズについて詳しくは、次の画像をご覧ください。

透明度を設定し、PNG 形式でアイコンアセットを保存します。 Windows Phone では、透明でないピクセルは白色 (RGB 255, 255, 255) で表示されます。一貫性と簡素化を保つには、デスクトップのアイコンにも白色を使ってください。

タブレット、ノート PC、デスクトップの Windows 10 では、正方形のアイコンアセットのみがサポートされます。 Windows Phone では、正方形のアセットと、電話アイコンなどの画像に便利な、高さが幅よりも大きいアセット (幅と高さの比率は最大 2:3) の両方がサポートされます。

小サイズと普通サイズのタイルでのアイコンのサイズ (電話とデスクトップ)

バッジがあるアセットとバッジがないアセットのサイズ調整

正方形のアセットの場合、コンテナー内で自動的に中央に配置されます。

正方形のアセットのサイズ調整、バッジがある場合とバッジがない場合

正方形以外のアセットの場合、自動的に水平方向/垂直方向の中央に配置され、コンテナーの幅/高さに合わせてスナップされます。

バッジの有無にかかわらず、自動的に中央に配置された水平方向の非正方形アセットのサイズ設定を示すスクリーンショット。

バッジの有無にかかわらず、自動的に中央に配置された垂直非正方形アセットのサイズ設定を示すスクリーンショット。

手順 2: ベースタイルを作成する

アイコンテンプレートは、プライマリタイルとセカンダリタイルのどちらでも使うことができます。セカンダリタイルで使う場合は、最初にセカンダリタイルを作成するか、既にピン留めされているセカンダリタイルを使う必要があります。プライマリタイルは暗黙的にピン留めされるので、このタイルに対しては常に通知を送信することができます。

手順 3: 通知をタイルに送信する

この手順は、通知をローカルで送信するのか、サーバープッシュを使って送信するのかによって異なります。ただし、送信する XML ペイロードは変わりません。ローカルタイル通知を送信するには、タイル (プライマリタイルまたはセカンダリタイル) に対して TileUpdater を作成してから、次に示すように、アイコンタイルテンプレートを使うタイルに通知を送信します。また、アダプティブタイルテンプレートを使って、ワイドタイルや大きいタイルのバインドを含めることをお勧めします。

XML ペイロードのサンプルコードを次に示します。

<tile>
  <visual>

    <binding template="TileSquare150x150IconWithBadge">
      <image id="1" src="Iconic.png" alt="alt text"/>
    </binding>
    
    <binding template="TileSquare71x71IconWithBadge">
      <image id="1" src="Iconic.png" alt="alt text"/>
    </binding>

  </visual>
</tile>

このアイコンタイルテンプレートの XML ペイロードでは、手順 1. で作成した画像を示す image 要素を使います。これで、タイルのアイコンの横にバッジを表示する準備ができました。あとは、バッジ通知を送信するだけです。

手順 4: バッジ通知をタイルに送信する

手順 3. と同様に、この手順は、通知をローカルで送信するのか、サーバープッシュを使って送信するのかによって異なります。ただし、送信する XML ペイロードは変わりません。ローカルバッジ通知を送信するには、タイル (プライマリタイルまたはセカンダリタイル) に対して BadgeUpdater を作成してから、目的の値を使ってバッジ通知を送信します (またはバッジをクリアします)。

XML ペイロードのサンプルコードを次に示します。

<badge value="2"/>

タイルのバッジは状況に応じて適切に更新されます。

手順 5: 組み立てる

次の図は、さまざまな API やペイロードがアイコンタイルテンプレートの各要素とどのように関連しているかを示しています。タイル通知 (これらの<バインド>要素を含む) は、アイコンテンプレートとイメージアセットを指定するために使用されます。バッジ通知は数値を指定します。タイルプロパティはタイルの表示名、色などを制御します。

アイコンタイルテンプレートに関連付けられている API とペイロード

フォトタイルテンプレート

フォトタイルテンプレートを使うと、ライブタイルに写真のスライドショーを表示できます。このテンプレートは、すべてのタイルのサイズ (小サイズのタイルを含む) でサポートされており、各サイズのタイルで同じ動作をします。次の例は、フォトテンプレートを使った普通サイズのタイルが持つ 5 つのフレームを示しています。テンプレートには、ズームやクロスフェードアニメーションが用意されており、選んだ写真に対して繰り返し適用し、無限にループすることができます。

フォトタイルテンプレートを使った画像のスライドショー

フォトテンプレートを使う方法

Notifications ライブラリがインストールされていれば、フォトテンプレートを簡単に使うことができます。生の XML を使うこともできますが、このライブラリの利用を強くお勧めします。これにより、開発者は有効な XML や XML エスケープされたコンテンツの生成について考える必要がなくなります。

Windows Phone では、スライドショーで最大 9 枚の写真を表示できます。タブレット、ノート PC、デスクトップでは、最大で 12 枚の写真を表示できます。

タイル通知の送信について詳しくは、通知の送信に関する記事をご覧ください。

<!--
 
To use the Photos template...
 
 - On any adaptive tile binding (like TileMedium or TileWide)
   - Set the hint-presentation attribute to "photos"
   - Add up to 12 images as children of the binding.
    
-->
 
<tile>
  <visual>
     
    <binding template="TileMedium" hint-presentation="photos">
       
      <image src="Assets/1.jpg" />
      <image src="ms-appdata:///local/Images/2.jpg"/>
      <image src="http://msn.com/images/3.jpg"/>
       
      <!--TODO: Can have 12 images total-->
       
    </binding>
     
    <!--TODO: Add bindings for other tile sizes-->
     
  </visual>
</tile>

/*
 
To use the Photos template...
 
 - On any TileBinding object
   - Set Content property to new instance of TileBindingContentPhotos
   - Add up to 12 images to Images property of TileBindingContentPhotos.
 
*/
 
TileContent content = new TileContent()
{
    Visual = new TileVisual()
    {
        TileMedium = new TileBinding()
        {
            Content = new TileBindingContentPhotos()
            {
                Images =
                {
                    new TileBasicImage() { Source = "Assets/1.jpg" },
                    new TileBasicImage() { Source = "ms-appdata:///local/Images/2.jpg" },
                    new TileBasicImage() { Source = "http://msn.com/images/3.jpg" }
 
                    // TODO: Can have 12 images total
                }
            }
        }
 
        // TODO: Add other tile sizes
    }
};

People タイルテンプレート

Windows 10 の People アプリでは、円の中に画像のコレクションを表示する特別なタイルテンプレートを使います。これらの円は、タイル上で垂直方向または水平方向にスライドされます。このタイルテンプレートは、Windows 10 ビルド 10572 以降で利用でき、すべてのユーザーがアプリで使うことができます。

People タイルテンプレートは、次のサイズのタイルで動作します。

普通サイズのタイル (TileMedium)

普通サイズの People タイル

ワイドタイル (TileWide)

ワイド People タイル

大きいタイル (デスクトップのみ) (TileLarge)

大きい People タイル

Notifications ライブラリを使っている場合、People タイルテンプレートを利用するために必要な操作は、TileBinding コンテンツ用に新しい TileBindingContentPeople オブジェクトを作成することだけです。 TileBindingContentPeople クラスには、画像を追加するための Images プロパティがあります。

生の XML を使っている場合は、hint-presentation を "people" に設定し、画像を binding 要素の子として追加します。

次の C# コードサンプルは、Notifications ライブラリを使っていることを前提としています。

TileContent content = new TileContent()
{
    Visual = new TileVisual()
    {
        TileMedium = new TileBinding()
        {
            Content = new TileBindingContentPeople()
            {
                Images =
                {
                    new TileBasicImage() { Source = "Assets/ProfilePics/1.jpg" },
                    new TileBasicImage() { Source = "Assets/ProfilePics/2.jpg" },
                    new TileBasicImage() { Source = "Assets/ProfilePics/3.jpg" },
                    new TileBasicImage() { Source = "Assets/ProfilePics/4.jpg" },
                    new TileBasicImage() { Source = "Assets/ProfilePics/5.jpg" },
                    new TileBasicImage() { Source = "Assets/ProfilePics/6.jpg" },
                    new TileBasicImage() { Source = "Assets/ProfilePics/7.jpg" },
                    new TileBasicImage() { Source = "Assets/ProfilePics/8.jpg" },
                    new TileBasicImage() { Source = "Assets/ProfilePics/9.jpg" }
                }
            }
        }
    }
};

<tile>
  <visual>
 
    <binding template="TileMedium" hint-presentation="people">
      <image src="Assets/ProfilePics/1.jpg"/>
      <image src="Assets/ProfilePics/2.jpg"/>
      <image src="Assets/ProfilePics/3.jpg"/>
      <image src="Assets/ProfilePics/4.jpg"/>
      <image src="Assets/ProfilePics/5.jpg"/>
      <image src="Assets/ProfilePics/6.jpg"/>
      <image src="Assets/ProfilePics/7.jpg"/>
      <image src="Assets/ProfilePics/8.jpg"/>
      <image src="Assets/ProfilePics/9.jpg"/>
    </binding>
 
  </visual>
</tile>

最適なユーザーエクスペリエンスを実現するには、タイルの各サイズに対して、写真の数を次のように指定することをお勧めします。

普通サイズのタイル: 9 枚の写真
ワイドタイル: 15 枚の写真
大きいタイル: 20 枚の写真

このように写真の枚数を指定することで、空の円をいくつか使うことができます。これにより、タイルが表示中にビジー状態になりません。写真の数を自由に調整して、最適な表示状態を確認してください。

通知を送信するには、「通知配信方法の選択」をご覧ください。

特別なタイルテンプレート

アイコンタイルテンプレート

アイコンタイルを作成する方法

フォトタイルテンプレート

フォトテンプレートを使う方法

People タイルテンプレート

フィードバック

その他のリソース

特別なタイル テンプレート

アイコン タイル テンプレート

アイコン タイルを作成する方法

フォト タイル テンプレート

フォト テンプレートを使う方法

People タイル テンプレート

関連トピック

フィードバック

その他のリソース

特別なタイルテンプレート

アイコンタイルテンプレート

アイコンタイルを作成する方法

フォトタイルテンプレート

フォトテンプレートを使う方法

People タイルテンプレート