Windows アプリのタイル

  • [アーティクル]

''タイル'' とは、[スタート] メニュー上でアプリを表すものです。 すべてのアプリにタイルがあります。 Microsoft Visual Studio で作成した新しい Windows アプリ プロジェクトには、アプリの名前とロゴを表示する既定のタイルが含まれます。 アプリが最初にインストールされると、Windows にこのタイルが表示されます。 アプリがインストールされた後、通知を使用してタイルのコンテンツを変更できます。たとえば、タイルを変更して、ニュースの見出しや最新の未読メッセージの件名などの新しい情報をユーザーに伝えることができます。

既定のタイルを構成する

Visual Studio で新しいプロジェクトを作成すると、アプリの名前とロゴを表示するシンプルな既定のタイルが作成されます。

タイルを編集するには、メインの UWP プロジェクトの Package.appxmanifest ファイルをダブルクリックしてデザイナーを開きます (または、ファイルを右クリックして [コードの表示] を選択します)。

  <Applications>
    <Application Id="App"
      Executable="$targetnametoken$.exe"
      EntryPoint="ExampleApp.App">
      <uap:VisualElements
        DisplayName="ExampleApp"
        Square150x150Logo="Assets\Square150x150Logo.png"
        Square44x44Logo="Assets\Square44x44Logo.png"
        Description="ExampleApp"
        BackgroundColor="#464646">
        <uap:SplashScreen Image="Assets\SplashScreen.png" />
      </uap:VisualElements>
    </Application>
  </Applications>

更新する必要がある項目がいくつかあります。

  • DisplayName: この値は、タイルに表示する名前に置き換えます。

  • ShortName: 表示名がタイルに収まるスペースが限られているため、アプリの名前が切り捨てられないように、ShortName も指定することをお勧めします。

  • ロゴ画像:

    これらの画像は自分のものに置き換える必要があります。 さまざまなビジュアル スケールに画像を指定することもできますが、すべてを指定する必要はありません。 さまざまなデバイスで確実にアプリが適切に表示されるように、各画像の 100%、200%、および 400% のスケール バージョンを指定することをお勧めします。 これらのアセットの生成について詳しくは、「アプリのアイコンとロゴ」を参照してください。

    スケーリングされた画像では次の名前付け規則に従います。

    <画像名>.scale-<倍率>.<画像ファイルの拡張子>

    例: SplashScreen.scale-100.png

    画像を示すときには、<画像名>.<画像ファイルの拡張子> という形式で示します (この例では "SplashScreen.png")。 指定した画像から、デバイスに適したスケーリングされた画像がシステムによって自動的に選択されます。

  • 必要はありませんが、ユーザーがアプリのタイルのサイズをこれらのサイズに変更できるように、広くて大きなタイル サイズのロゴを指定することを強くお勧めします。 これらの追加画像を指定するには、DefaultTile 要素を作成し、Wide310x150Logo と Square310x310Logo 属性を使用して、追加画像を指定します。

  <Applications>
        <Application Id="App"
          Executable="$targetnametoken$.exe"
          EntryPoint="ExampleApp.App">
          <uap:VisualElements
            DisplayName="ExampleApp"
            Square150x150Logo="Assets\Square150x150Logo.png"
            Square44x44Logo="Assets\Square44x44Logo.png"
            Description="ExampleApp"
            BackgroundColor="#464646">
            <uap:DefaultTile
              Wide310x150Logo="Assets\Wide310x150Logo.png"
              Square310x310Logo="Assets\Square310x310Logo.png">
            </uap:DefaultTile>
            <uap:SplashScreen Image="Assets\SplashScreen.png" />
          </uap:VisualElements>
        </Application>
      </Applications>

通知を使用してタイルをカスタマイズする

アプリがインストールされた後、通知を使用してタイルをカスタマイズできます。 これは、アプリが初めて起動したとき、またはプッシュ通知などのイベントに応じて、行うことができます。

タイル通知を送信する方法については、「ローカル タイル通知を送信する」を参照してください。