マスク可能なアイコン：PWAのAndroid適応アイコン

Progressive WebアプリのAndroid適応アイコン（PWA）：マスク可能なアイコンガイド

プログレッシブWebアプリケーション（PWA）を作成し、Androidホーム画面にインストールされている対応するアイコンを設計しました。ただし、新しいAndroid電話を使用している場合、アイコンは次のように表示される場合があります。

どうしたの？ Android Oreoは、すべてのホーム画面アイコンを同じ形状にする新しいアイコン形式であるAdaptive Iconを導入します。新しい形式に準拠していないアイコンは、白い背景として表示されます。

ただし、Maskableアイコンと呼ばれる新しいWeb機能は、Firefoxプレビューやその他のWebブラウザーですぐに利用できます。この新しいアイコン形式により、PWAはAndroidに独自の適応アイコンを持つことができます。

私はMozillaで働いており、Firefoxプレビューでマスク可能なアイコンのサポートを実装しています。それらを自分のAndroid PWAに追加する方法をお見せします。

マスク可能なアイコンと適応アイコンとは何ですか？

数年前、Androidアプリのアイコンは自由な形であり、あらゆる形状になる可能性があります。これは、Webアプリがホーム画面に固定すると同じ透明なアイコンを再利用できることを意味します。

ただし、Samsungのようなメーカーは、デバイス上のすべてのアイコンを作成したいと考えています。一部のメーカーは、さまざまな形状を使用したいと考えています。メーカーとデバイスのさまざまな要件に対処するために、Androidは「適応アイコン」を導入しました。端の周りに余分なスペースを持つ画像を提供します。Androidはそれを正しい形状に切り分けます。

ただし、Webアプリケーションは任意のプラットフォームで実行されるように設計されているため、これらの特別なAndroidアイコンを作成するAPIがありません。代わりに、アイコンは次のような白い箱に絞ります。

昨年9月に新しいAPIが登場し、W3C仕様に追加されたことは満足しています。マスク可能なアイコンを使用すると、Web開発者はトリミングされる完全な出血アイコンを指定できます。プラットフォームに依存しているため、Windowsはタイルに使用でき、iOSはアイコンに使用できます。

マスク可能なアイコンを作成する方法

マスク可能なアイコン形式は任意のプラットフォームで動作するように設計されているため、そのサイズとスケールは、Androidの適応アイコンのサイズとスケールとは異なります。これは、同じリソースを再利用できないことを意味します。

マスク可能なアイコンは任意のサイズである可能性があり、通常の透過アイコンと同じサイズを引き続き使用できます。ただし、アイコンを設計するときは、重要な情報が画像サイズの40％に等しい半径を持つ「安全なエリア」円内にあることを確認してください。

この領域のすべてのピクセルが表示されていることを確認してください。エリアの外側のピクセルは、アイコンの形状とプラットフォームに従ってトリミングされる場合があります。

警告：既にAndroidアプリをお持ちの場合は、AndroidアプリからWebアプリへのアイコンのコピーや貼り付けを避けてください。スケールは異なるため、アイコンは小さすぎます。

Webアプリケーションマニフェストにアイコンを追加します

アイコンを作成した後、他のアイコンリソースと同様のWebアプリケーションマニフェストへのエントリを追加できます。 Web Application Manifestは、JSONファイルでWebアプリケーションに関する情報を提供し、「アイコン」配列を含みます。

 <code>{ ... "icons": [ ... { "src": "path/to/maskable_icon.png", "sizes": "196x196", "type": "image/png", "purpose": "maskable" ] ... }</code>

マスク可能なアイコンは、特別な新しいキー「目的」を使用して、アイコンマスクで使用することを意図していることを示します。透明な背景を持つアイコンのデフォルトの「目的」は「Any」です。各オプションは、アイコンに複数の使用を使用するためにスペースで分離できます。

 <code>"purpose": "maskable any"</code>

アイコンをプレビューします

あなた自身のマスク可能なアイコンがどのように見えるかを見たいですか？アイコンがさまざまな形状の下でどのように見えるかを評価するために、Tool Maskable.Appを作成しました。

このアプリを使用すると、Androidデバイスで見つけることができるさまざまな形状のアイコンをプレビューできます。このツールが、プログレッシブWebアプリケーション用のユニークなアイコンを作成するのに役立つことを願っています。

[アプリケーションを表示] [ソースコードを表示]

結果に満足したら、アプリケーションのテストを開始できます。 Firefox Preview NightlyとChrome Canaryはどちらもマスク可能なアイコンをサポートしています。それらを使用して、PWAがどのように見えるかを確認できます。

PWACompatのようなツールは、マスク可能なアイコンもサポートしています。新しいマスク可能なアイコンに基づいて、iOSやその他のデバイスのアイコンを自動的に生成できます！

独自のアイコンの作成を開始します

PWAアイコンがAndroidにどのように表示されるかをさらに制御したい場合は、マスク可能なアイコンが最良の選択です。マスク可能なアイコンを使用すると、アイコンのエッジツーエッジディスプレイをカスタマイズできます。この記事が最初のマスク可能なアイコンの作成を開始するのに役立つことを願っています。

アイコンソース：

• https://www.php.cn/link/258b55f3d6bc1cafb846ac3bbe5bc643
• https://www.php.cn/link/55a85e71b468ef171a7d4509b3f35f36
• https://www.php.cn/link/284c1ffedc349416c5a95b82a0f6a6d7
• https://www.php.cn/link/e5f6b927ce20f43fb7d5247109be554a
• https://www.php.cn/link/41be696537187bb3b209c20dafeb2a81

以上がマスク可能なアイコン：PWAのAndroid適応アイコンの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。