.NET MAUI アプリ プロジェクトにアプリ アイコンを追加する
すべてのアプリにはそれを表すロゴ アイコンがあり、そのアイコンは通常、複数の場所に表示されます。 たとえば、iOS では、アプリ アイコンはホーム画面とシステム全体 (設定、通知、検索結果、App Store など) に表示されます。 Android では、アプリ アイコンはランチャー アイコンとして表示され、アクション バー、通知、Google Play ストアなど、システム全体に表示されます。 Windows では、スタート メニュー、タスク バー、アプリのタイル、Microsoft Store のアプリ の一覧にアプリ アイコンが表示されます。
.NET マルチプラットフォーム アプリ UI (.NET MAUI) アプリ プロジェクトでは、アプリ プロジェクト内の 1 つの場所にアプリ アイコンを指定できます。 ビルド時に、このアイコンはターゲット プラットフォームとデバイスの適切な解像度に自動的にサイズ変更され、アプリ パッケージに追加されます。 これにより、プラットフォームごとにアプリ アイコンを手動で複製して名前を付ける必要がなくなります。 既定では、ビットマップ (非ベクター) イメージ形式は.NET MAUI によって自動的にサイズ変更されません。
.NET MAUI アプリ アイコンでは、スケーラブル ベクター グラフィックス (SVG) ファイルなど、標準のプラットフォームイメージ形式を使用できます。
重要
.NET MAUI は、SVG ファイルをポータブル ネットワーク グラフィック (PNG) ファイルに変換します。 したがって、SVG ファイルを .NET MAUI アプリ プロジェクトに追加する場合は、.png 拡張子を持つ XAML または C# から参照する必要があります。 SVG ファイルへの唯一の参照は、プロジェクト ファイルに含まれている必要があります。
アイコンを変更する
.NET MAUI プロジェクトでは、ビルド アクションを MauiIcon 含むイメージによって、アプリに使用するアイコンが指定されます。 これは、プロジェクト ファイル内で項目として <MauiIcon> 表されます。 アプリに対して定義されているアイコンは 1 つだけです。 後続 <MauiIcon> の項目はすべて無視されます。
アプリによって定義されたアイコンは、属性として Include ファイルを指定することで、1 つのイメージで構成できます。
<ItemGroup>
<MauiIcon Include="Resources\AppIcon\appicon.svg" />
</ItemGroup>
プロジェクト ファイルで定義されている最初 <MauiIcon> の項目のみが .NET MAUI によって処理されます。 別のファイルをアイコンとして使用する場合は、まず既存のアイコンをプロジェクトから削除してから、新しいアイコンをプロジェクトの Resources\AppIcon フォルダーにドラッグして追加します。 Visual Studio によってビルド アクションが自動的に MauiIcon 設定され、プロジェクト ファイルに対応する <MauiIcon> 項目が作成されます。
Note
アプリ アイコンは、アプリ プロジェクトの他のフォルダーにも追加できます。 ただし、このシナリオでは、ビルド アクションを [プロパティ] ウィンドウで手動で設定するMauiIcon必要があります。
Android リソースの名前付け規則に準拠するには、アプリ アイコンのファイル名を小文字にし、先頭と末尾を文字で区切り、英数字またはアンダースコアのみを含める必要があります。 詳細については、「developer.android.com のアプリ リソースの概要」を参照してください。
アイコン ファイルを変更した後、Visual Studio でプロジェクトをクリーンすることが必要になる場合があります。 プロジェクトをクリーンするには、[ソリューション エクスプローラー] ウィンドウでプロジェクト ファイルを右クリックし、[クリーン] を選択します。 テスト対象のプラットフォームからアプリをアンインストールする必要がある場合もあります。
注意
プロジェクトをクリーンせず、ターゲット プラットフォームからアプリをアンインストールすると、新しいアイコンが表示されないことがあります。
アイコンを変更した後、プラットフォーム固有の構成情報を確認します。
構成済みアイコン
または、アプリ アイコンは、背景を表す 1 つの画像と前景を表す別の画像の 2 つの画像で構成できます。 アイコンは PNG ファイルに変換されるため、作成されたアプリ アイコンは最初に背景画像 (通常はパターンまたは単色の画像)、その後に前景イメージで重ねて表示されます。 この場合、属性は Include アイコンの背景画像を表し、属性は Foreground 前景イメージを表します。
<ItemGroup>
<MauiIcon Include="Resources\AppIcon\appicon.svg" ForegroundFile="Resources\AppIcon\appiconfg.svg" />
</ItemGroup>
重要
項目の背景イメージ (Include 属性) を指定する <MauiIcon> 必要があります。 前景イメージ (ForegroundFile 属性) は省略可能です。
基本サイズを設定する
.NET MAUI では、複数のプラットフォームとデバイスでアイコンを使用し、プラットフォームとデバイスごとにアイコンのサイズを変更しようとします。 アプリ アイコンは、アプリのストア エントリや、デバイスにインストールされたアプリを表すために使用されるアイコンなど、さまざまな目的にも使用されます。
アイコンの基本サイズはイメージのベースライン密度を表し、実質的には他のすべてのサイズの派生元となる 1.0 スケール ファクターです。 PNG ファイルなどのビットマップ ベースのアプリ アイコンの基本サイズを指定しない場合、イメージのサイズは変更されません。 SVG ファイルなどのベクター ベースのアプリ アイコンの基本サイズを指定しない場合、画像で指定されたサイズが基本サイズとして使用されます。 ベクター イメージのサイズ変更を停止するには、属性を Resize 〗〘に設定します false。
次の図は、基本サイズがイメージに与える影響を示しています。
前の図に示したプロセスは、次の手順に従います。
- A: イメージは .NET MAUI アイコンとして追加され、サイズは 210 x 260 で、基本サイズは 424 x 520 に設定されます。
- B: .NET MAUI は、424 x 520 の基本サイズに合わせてイメージを自動的にスケーリングします。
- C: ターゲット プラットフォームによって必要なイメージのサイズが異なるので、.NET MAUI はベース サイズから異なるサイズにイメージを自動的にスケーリングします。
ヒント
アイコンとして SVG 画像を使用します。 SVG 画像は、より大きなサイズにスケールアップでき、引き続き鮮明でクリーンに見える可能性があります。 PNG や JPG イメージなどのビットマップ ベースのイメージは、アップスケールするとぼやけて表示されます。
基本サイズは属性と共に BaseSize="W,H" 指定されます。ここで W 、アイコンの幅と H アイコンの高さです。 次の例では、基本サイズを設定します。
<ItemGroup>
<MauiIcon Include="Resources\AppIcon\appicon.png" BaseSize="128,128" />
</ItemGroup>
次の例では、ベクター ベースのイメージの自動サイズ変更を停止します。
<ItemGroup>
<MauiIcon Include="Resources\AppIcon\appicon.svg" Resize="false" />
</ItemGroup>
背景の色を変更する
アプリ アイコンの作成に使用する背景イメージに透明度が使用されている場合は、Color<MauiIcon>〘〗〘 次の例では、アプリ アイコンの背景色を赤に設定します。
<ItemGroup>
<MauiIcon Include="Resources\AppIcon\appicon.svg" Color="#FF0000" />
</ItemGroup>
色の値は、次の形式 #RRGGBB#AARRGGBBを使用して 16 進数で指定できます。 値 RR は、赤チャネル、緑チャネル、 GGBB 青チャネル、アルファ AA チャネルを表します。 16 進数の値の代わりに、.NET MAUI という名前の色をRed使用できます(例: .PaleVioletRed
注意
アプリ アイコンの背景色を定義しない場合、iOS および Mac Catalyst では背景がトランスペアレントと見なされます。 これにより、App Store Connect の検証中にエラーが発生し、アプリをアップロードできなくなります。
前景の色を変更する
アプリ アイコンが背景 () イメージとフォアグラウンド (IncludeForegroundFile) イメージで構成されている場合は、前景イメージを濃淡化できます。 前景イメージに濃淡を設定するには、属性を使用して色を TintColor 指定します。 次の例では、前景の画像が黄色に濃淡されます。
<ItemGroup>
<MauiIcon Include="Resources\AppIcon\appicon.png" ForegroundFile="Resources\AppIcon\appiconfg.svg" TintColor="Yellow" />
</ItemGroup>
色の値は、次の形式 #RRGGBB#AARRGGBBを使用して 16 進数で指定できます。 値 RR は、赤チャネル、緑チャネル、 GGBB 青チャネル、アルファ AA チャネルを表します。 16 進数の値の代わりに、.NET MAUI という名前の色をRed使用できます(例: .PaleVioletRed
プラットフォームごとに異なるアイコンを使用する
プラットフォームごとに異なるアイコン リソースまたは設定を使用する場合は、項目に Condition 属性を <MauiIcon> 追加し、特定のプラットフォームに対してクエリを実行します。 条件が満たされると、 <MauiIcon> 項目が処理されます。 .NET MAUI では最初の有効な <MauiIcon> 項目のみが使用されるため、すべての条件付き項目を最初に宣言し、その後に条件のない既定 <MauiIcon> の項目を宣言する必要があります。 次の XML は、Windows 用の特定のアイコンと、他のすべてのプラットフォームのフォールバック アイコンを宣言する方法を示しています。
<ItemGroup>
<!-- App icon for Windows -->
<MauiIcon Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'windows'"
Include="Resources\AppIcon\backicon.png" ForegroundFile="Resources\AppIcon\appiconfg.svg" TintColor="#40FF00FF" />
<!-- App icon for all other platforms -->
<MauiIcon Include="Resources\AppIcon\appicon.png" ForegroundFile="Resources\AppIcon\appiconfg.svg" TintColor="Yellow" />
</ItemGroup>
条件で比較した値を次のいずれかの値に変更することで、ターゲット プラットフォームを設定できます。
'ios''maccatalyst''android''windows'
たとえば、Android を対象とする条件は次のようになります Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'android'"。
プラットフォーム固有の構成
プロジェクト ファイルでは、アプリ アイコンの構成元のリソースが宣言されていますが、それらのアプリ アイコンを参照して個々のプラットフォーム構成を更新する必要があります。 次の情報では、これらのプラットフォーム固有の設定について説明します。
Android で使用されるアイコンは、Platforms\Android\AndroidManifest.xml にある Android マニフェストで 指定されています。 ノード manifest/application には、アイコン android:iconandroid:roundIconを定義するための 2 つの属性が含まれています。 これら 2 つの属性の値は、それぞれ次の形式 @mipmap/{name}@mipmap/{name}_roundに従います。 値 {name} は、.NET MAUI プロジェクト ファイルの <MauiIcon> 項目から派生します。具体的には、属性によって定義された Include ファイル名で、パスや拡張子はありません。
リソース Resources\AppIcon\healthapp.png をアイコンとして定義する次の例を考えてみましょう。
<ItemGroup>
<MauiIcon Include="Resources\AppIcon\healthapp.png" ForegroundFile="Resources\AppIcon\appiconfg.svg" TintColor="Yellow" />
</ItemGroup>
変換された名前 (パスまたは拡張子のないリソース) は healthapp. の値android:iconと、それぞれの値になります@mipmap/healthapp_round@mipmap/healthappandroid:roundIcon。 Android マニフェストは、アイコンと一致 healthapp するように更新する必要があります。
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<application android:allowBackup="true" android:icon="@mipmap/healthapp" android:roundIcon="@mipmap/healthapp_round" android:supportsRtl="true"></application>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
</manifest>
ヒント
アイコンの新しい画像ファイルを作成する代わりに、.NET MAUI テンプレート によって提供される 2 つの画像ファイル (背景の Resources\AppIcon\appicon.svg 、 フォアグラウンドの Resources\AppIcon\appiconfg.svg ) を置き換えるだけです。
アダプティブランチャー
.NET MAUI では、アプリ アイコンから Android 8.0 以降でアダプティブランチャー アイコンを作成できます。 アダプティブ ランチャー アイコンは、円形や正方形など、さまざまなデバイス モデルのさまざまな図形として表示できます。 アダプティブ アイコンの詳細については、「Android 開発者ガイド: アダプティブ アイコン」を参照してください。
アダプティブ ランチャー アイコンは、背景レイヤーとフォアグラウンド レイヤーとオプションのスケーリング値を使用して構成されたアイコンです。 詳細については、「構成済みアイコン」セクションを参照してください。 構成済みアイコンが定義されている場合は、属性を ForegroundFile 指定することで、アダプティブランチャー アイコンが生成されます。 次の XML は、アダプティブ ランチャー アイコンとして使用されるアイコンの定義を示しています。
<ItemGroup>
<MauiIcon Include="Resources\AppIcon\appicon.svg" ForegroundFile="Resources\AppIcon\appiconfg.svg" ForegroundScale="0.65" Color="#512BD4" />
</ItemGroup>
ForegroundScale必要に応じて属性を指定して、バックグラウンド レイヤー上でレンダリングされる前景レイヤーのスケーリングを変更できます。
.NET MAUI
フィードバック
以下は間もなく提供いたします。2024 年を通じて、コンテンツのフィードバック メカニズムとして GitHub の issue を段階的に廃止し、新しいフィードバック システムに置き換えます。 詳細については、「https://aka.ms/ContentUserFeedback」を参照してください。
フィードバックの送信と表示