マスカブルアイコンを使用したPWAでのアダプティブアイコンのサポート
対応プラットフォームでアダプティブアイコンを使用するための新しいアイコン形式。
マスカブルアイコンとは何か。 #
最近のAndroid携帯にプログレッシブWebアプリをインストールした場合、アイコンに白い背景が表示されることに気付くかもしれません。 Android Oreoは、さまざまなデバイスモデルでさまざまな形でアプリアイコンを表示するアダプティブアイコンを導入しました。この新しい形式に従わないアイコンには、白い背景が表示されます。
マスカブルアイコンは、より詳細な制御を可能にし、プログレッシブWebアプリでアダプティブアイコンを使用できるようにする新しいアイコン形式です。マスカブルアイコンを提供すると、アイコンが図形全体を埋めて、すべてのAndroidデバイスで見栄えが良くなります。 最近、FirefoxとChromeはこの新しい形式のサポートを追加しました。これをアプリに採用できます。
現在のアイコンは対応しているか。 #
マスカブルアイコンはさまざまな形状をサポートする必要があるため、ブラウザが後で目的の形状とサイズにトリミングできるように、不透明な画像にパディングを付けます。最終的に選択される形状はブラウザやプラットフォームごとに異なる可能性があるため、特定の形状に依存しないことをお勧めします。
幸いなことに、すべてのプラットフォームで適用される、明確に定義され、標準化された「最小セーフゾーン」があります。ロゴなどのアイコンの重要な部分は、アイコンの幅の40％の半径で、アイコンの中心にある円形の領域内に表示されることが望ましいとされます。外側の10％の端がトリミングされる場合があります。
Chrome DevToolsを使用して、アイコンのどの部分がセーフゾーン内に収まるかを確認できます。プログレッシブWebアプリを開いた状態で、DevToolsを起動し、[アプリケーション]パネルに移動します。 [アイコン]****セクションで、マスカブルアイコンの最小のセーフゾーンのみを表示するように選択できます。セーフゾーンのみが表示されるようにアイコンがトリミングされます。この安全な領域内にロゴが表示されている場合は、問題ありません。
さまざまなAndroidの図形でマスカブルアイコンをテストするには、私が作成したMaskable.appツールを使用します。アイコンを開くと、Maskable.appでさまざまな形やサイズを試すことができ、チームの他のメンバーとプレビューを共有することもできます。
マスカブルアイコンを採用する方法 #
既存のアイコンに基づいてマスカブルアイコンを作成する場合は、 Maskable.appエディタを使用できます。アイコンをアップロードし、色とサイズを調整してから、画像をエクスポートします。
マスカブルアイコン画像を作成して、DevToolsでテストしたら、新しいアセットを参照するようにWebアプリマニフェストを更新する必要があります。 Webアプリマニフェストは、Webアプリに関する情報をJSONファイルで提供し、icons配列を含みます。
マスカブルアイコンが追加され、Webアプリマニフェストにリストされている画像リソースに新しいプロパティ値が追加されました。 purposeフィールドは、アイコンの使用方法をブラウザに指示します。デフォルトでは、アイコンの目的は"any"です。これらのアイコンは、Androidの白い背景の上でサイズ変更されます。
マスカブルアイコンは、"maskable"という別の目的を使用する必要があります。これは、画像がアイコンマスクとともに使用されることを示し、結果をより細かく制御できます。このようにすると、アイコンの背景が白になりません。他のデバイスでマスクせずにマスカブルアイコンを使用する場合、スペースで区切った複数の目的 (たとえば、 "any maskable") を指定することもできます。
{
…
"icons": [
…
{
"src": "path/to/regular_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "any"
},
{
"src": "path/to/maskable_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "maskable" // <-- 新しいプロパティ値 `"maskable"`
},
…
],
…
}これで、独自のマスカブルアイコンを作成し、端から端までアプリの見栄えが良くなることを確認できます (あくまでも私の意見ですが、円から円、楕円から楕円にも対応しています😄)。
謝辞 #
この記事はJoe Medleyによってレビューされました。